/* =============================================================================
* GrapeLand — Heritage-Wine-style Navbar Integration
* -----------------------------------------------------------------------------
* Goal: Replace the visual presentation of GrapeLand's slide-out drawer
* navigation with a horizontal top navbar that mirrors the layout,
* typography and sticky-on-scroll behaviour of the "heritage-wine"
* template — without touching any HTML or the original style.css.
*
* How it works:
* - The existing markup in every page is reused as-is:
*
* ... ← mobile only
*
← mobile only
*
*
* ...Home / About / Pages▾ / Shop / Blog / Contact...
* ...Cart / Checkout / Account / Login...
*
* - On screens ≥ 992px we re-flow that DOM into a single horizontal bar:
* [Logo] -------- main menu (centered) -------- [secondary icons] [lang]
* Hover opens the "Pages" submenu as a positioned dropdown.
* A `.is-sticky` class is added to by main.js after 80px of scroll
* to flip the bar from transparent (over hero) → solid white (sticky),
* mirroring heritage-wine's `.fixed-menu` slide-down behaviour.
* - On screens < 992px nothing changes: the original drawer keeps working
* via the unmodified main.js logic.
*
* Files touched:
* - assets/css/custom.css ← this file (was empty)
* - assets/js/main.js ← appended a small scroll listener (see bottom)
*
* Layout-shift safety:
* - The new bar is `position: fixed` and overlays the hero exactly like
* the original GrapeLand header (which was `position: absolute` at top:0).
* No vertical space is consumed in the document flow, so no section is
* pushed down and no existing rule needs to be relaxed.
*
* Color/typography choice:
* - Heritage-wine uses red `#d00035` as its accent on Open Sans 14px UPPER.
* - GrapeLand's brand accent is `--primary: #dcbe84` (gold). To stay
* visually consistent with the rest of the GrapeLand pages we keep
* gold as the hover/active accent and Mulish as the menu typeface,
* while adopting heritage-wine's *structural* choices (uppercase,
* letter-spacing, 14px, sticky-white-on-scroll, mega-style centered
* menu, right-aligned action icons).
* ===========================================================================*/
/* ---------- 1. CSS tokens reused below ---------- */
:root {
--nav-h: 84px;
/* slimmer, more refined bar */
--nav-bg: rgba(11, 11, 15, .22);
/* over-hero — light veil so cinema stays visible */
--nav-bg-sticky: #ffffff;
/* after scroll */
/* Foreground colors — gold tuned per background so contrast stays
readable in both states (target WCAG AA, ≥4.5:1 for body text):
- over the rgba(0,0,0,.55) hero overlay: `--gold-bright` (#f1d88a)
achieves ≈10:1 contrast vs. the underlying dark imagery.
- over the white sticky bar: `--gold-deep` (#7a5a1a) achieves
≈5.4:1 contrast vs. #fff (passes AA for normal text). */
--gold-bright: #f1d88a;
--gold-deep: #7a5a1a;
--gold-deep-soft: #a07c2a;
/* hover on white sticky bar */
--nav-fg: var(--gold-bright);
/* over-hero text → gold */
/* On the white sticky bar the navbar font color is pure black
per the latest spec — the bar itself stays solid white, and every
nav flips to #000 with a smooth transition for readability.
Hover / active keeps the luxury gold accent so state change stays
visible against the black default. */
--nav-fg-sticky: #000000;
/* sticky text → black */
--nav-fg-sticky-accent: var(--gold, #D4AF37);
/* hover / active gold */
--nav-accent: var(--primary);
/* hover/active accent */
--nav-shadow-sticky: 0 6px 24px rgba(0, 0, 0, .08);
--nav-trnst: .35s cubic-bezier(.19, 1, .22, 1);
/* Menu link typography — sized so all 9 spec items fit a 1280px viewport
without wrapping or horizontal scroll, while keeping a luxury feel. */
--nav-link-fs: .75rem;
/* ~12px; refined for EN luxury nav */
--nav-link-tracking: .08em;
--nav-link-padding-x: .7rem;
--nav-link-padding-y: .55rem;
}
/* =============================================================================
* DESKTOP (≥ 1100px) — heritage-wine horizontal navbar
* Breakpoint raised from 992px to 1100px so the 9-item bar never overflows
* on smaller laptops; below 1100px the original GrapeLand drawer kicks in.
* ===========================================================================*/
@media (min-width: 1100px) {
/* 2. Hide elements only meaningful for the original drawer UX */
.nav-toggle,
.nav-overlay,
nav#navbar .nav-image {
display: none !important;
}
/* 3. Logo — anchored top-left of the bar (over the nav background) */
header {
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
width: auto;
height: var(--nav-h);
padding: 0 2rem;
z-index: 1001;
/* above nav background */
transition: var(--nav-trnst);
}
header a {
display: inline-flex;
align-items: center;
line-height: 1;
}
header a img,
header .site-logo img {
width: auto;
height: 44px;
transition: var(--nav-trnst);
filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .25));
}
/* 4. The bar itself — full-width fixed overlay over the hero */
nav#navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: var(--nav-h);
display: flex;
flex-direction: row;
/* override style.css 1224 */
align-items: center;
justify-content: center;
flex-wrap: nowrap;
/* reserve space on the left for the fixed logo (trimmed) */
padding: 0 1.25rem 0 clamp(140px, 12vw, 180px);
background: var(--nav-bg);
backdrop-filter: blur(14px) saturate(1.05);
-webkit-backdrop-filter: blur(14px) saturate(1.05);
border-bottom: 1px solid rgba(212, 175, 55, .12);
transform: none;
/* cancel translateX from base */
transition: background-color var(--nav-trnst),
box-shadow var(--nav-trnst);
overflow: visible;
/* allow dropdowns to escape */
z-index: 1000;
}
/* 5. Main menu — centered horizontal list.
DOM order is [lang][main][secondary] but we want visual order
[main][secondary][lang], so we reorder with `order` and let the
auto margins on the main list absorb free space on both sides. */
nav#navbar>ul:not(.lang):not(.secondary) {
display: flex;
flex-direction: row;
align-items: center;
gap: 0;
/* link padding handles spacing */
margin: 0 auto;
/* center between logo & actions */
padding: 0;
min-width: 0;
order: 1;
}
nav#navbar ul.secondary {
order: 2;
}
nav#navbar ul.lang {
order: 3;
}
nav#navbar>ul:not(.lang):not(.secondary)>li {
position: relative;
/* dropdown anchor */
padding: 0;
}
nav#navbar>ul:not(.lang):not(.secondary)>li>a,
nav#navbar>ul:not(.lang):not(.secondary)>li>span {
position: relative;
display: inline-block;
padding: var(--nav-link-padding-y) var(--nav-link-padding-x);
font-family: var(--ff-2);
/* Mulish */
font-size: var(--nav-link-fs);
font-weight: 500;
letter-spacing: var(--nav-link-tracking);
text-transform: uppercase;
color: var(--nav-fg);
cursor: pointer;
transition: color var(--nav-trnst);
}
/* Animated thin underline — slides in on hover instead of the prior
heavy 2px border-bottom which doubled vertical rhythm. */
nav#navbar>ul:not(.lang):not(.secondary)>li>a::after,
nav#navbar>ul:not(.lang):not(.secondary)>li>span::after {
content: "";
position: absolute;
left: var(--nav-link-padding-x);
right: var(--nav-link-padding-x);
bottom: calc(var(--nav-link-padding-y) - 6px);
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: center;
transition: transform var(--nav-trnst);
}
nav#navbar>ul:not(.lang):not(.secondary)>li>a:hover,
nav#navbar>ul:not(.lang):not(.secondary)>li>span:hover,
nav#navbar>ul:not(.lang):not(.secondary)>li>a.active {
color: var(--nav-accent);
text-decoration: none;
}
nav#navbar>ul:not(.lang):not(.secondary)>li>a:hover::after,
nav#navbar>ul:not(.lang):not(.secondary)>li>span:hover::after,
nav#navbar>ul:not(.lang):not(.secondary)>li>a.active::after {
transform: scaleX(1);
}
/* Tablet-ish desktop fine-tune: between 1100–1280px the 9 items are
tight, so trim padding a touch more without changing font size. */
@media (max-width: 1280px) {
nav#navbar>ul:not(.lang):not(.secondary)>li>a,
nav#navbar>ul:not(.lang):not(.secondary)>li>span {
padding-inline: .55rem;
letter-spacing: .06em;
}
}
/* Chevron after the "Pages" trigger, mirroring heritage-wine dropdown UI */
nav#navbar>ul:not(.lang):not(.secondary)>li.has-submenu>span::after {
content: "";
display: inline-block;
margin-left: .5rem;
width: .4rem;
height: .4rem;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform var(--nav-trnst);
}
/* 6. Hover dropdown for ".has-submenu" — heritage-wine .dropdown-menu1 vibe */
nav#navbar>ul li.has-submenu ul.submenu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(8px);
min-width: 220px;
margin: 0;
padding: .5rem 0 !important;
/* override base !important-free */
background: rgba(0, 0, 0, .92);
border-top: 2px solid var(--nav-accent);
box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
opacity: 0;
visibility: hidden;
height: auto;
/* override base height:0 */
transition: opacity var(--nav-trnst),
transform var(--nav-trnst),
visibility var(--nav-trnst);
z-index: 1002;
}
nav#navbar>ul li.has-submenu:hover ul.submenu,
nav#navbar>ul li.has-submenu.active ul.submenu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
nav#navbar>ul li.has-submenu:hover>span::after,
nav#navbar>ul li.has-submenu.active>span::after {
transform: translateY(0) rotate(225deg);
}
nav#navbar>ul li.has-submenu ul.submenu li {
padding: 0;
}
nav#navbar>ul li.has-submenu ul.submenu li a {
display: block;
padding: .55rem 1.25rem;
font-family: var(--ff-2);
font-size: .85rem;
font-weight: 500;
letter-spacing: .04em;
color: #fff;
text-transform: capitalize;
transition: color var(--nav-trnst),
background-color var(--nav-trnst);
}
nav#navbar>ul li.has-submenu ul.submenu li a:hover {
background: rgba(220, 190, 132, .14);
color: var(--nav-accent);
text-decoration: none;
}
/* 7. Right-side action icons (cart / account / login) — heritage-wine .right-menu */
nav#navbar ul.secondary {
display: flex;
flex-direction: row;
align-items: center;
gap: .25rem;
margin: 0;
/* main ul's auto margins handle the spacing */
padding: 0;
list-style: none;
}
nav#navbar ul.secondary li {
padding: 0;
}
nav#navbar ul.secondary li a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.4rem;
height: 2.4rem;
font-size: 0;
/* hide raw label text */
color: var(--nav-fg);
border-radius: 50%;
transition: color var(--nav-trnst),
background-color var(--nav-trnst);
}
nav#navbar ul.secondary li a::before {
font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
font-weight: 900;
font-size: 1.05rem;
line-height: 1;
color: inherit;
}
/* Map each link to a FontAwesome glyph (FA6 unicode codepoints) */
nav#navbar ul.secondary li a[href*="cart"]::before {
content: "\f290";
}
/* shopping-bag */
nav#navbar ul.secondary li a[href*="checkout"]::before {
content: "\f07a";
}
/* cart-shopping */
nav#navbar ul.secondary li a[href*="account"]::before {
content: "\f007";
}
/* user */
nav#navbar ul.secondary li a[href*="login"]::before {
content: "\f2f6";
}
/* sign-in */
nav#navbar ul.secondary li a[href*="privacy"] {
display: none;
}
/* not a top-bar action */
nav#navbar ul.secondary li a:hover {
color: var(--nav-accent);
background: rgba(255, 255, 255, .08);
text-decoration: none;
}
/* 8. Language switcher — small horizontal pill at the far right */
nav#navbar ul.lang {
display: flex;
flex-direction: row;
align-items: center;
gap: .35rem;
margin: 0 0 0 .75rem;
padding: 0 0 0 .75rem;
border-left: 1px solid rgba(255, 255, 255, .15);
width: auto;
/* override style.css 1237 */
min-width: 0;
}
nav#navbar ul.lang li {
padding: 0;
}
nav#navbar ul.lang li a {
display: inline-block;
padding: .25rem .4rem;
font-family: var(--ff-2);
font-size: .7rem;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
color: rgba(255, 255, 255, .55);
}
nav#navbar ul.lang li a.active,
nav#navbar ul.lang li a:hover {
color: var(--nav-accent);
text-decoration: none;
}
/* 9. STICKY STATE — toggled by main.js when scrollY > 80
Mirrors heritage-wine's `.fixed-menu` (slide-down + white bg). */
body.is-sticky nav#navbar {
background: var(--nav-bg-sticky);
box-shadow: var(--nav-shadow-sticky);
backdrop-filter: none;
animation: navSlideDown .45s ease-out;
}
body.is-sticky nav#navbar>ul:not(.lang):not(.secondary)>li>a,
body.is-sticky nav#navbar>ul:not(.lang):not(.secondary)>li>span,
body.is-sticky nav#navbar ul.secondary li a {
color: var(--nav-fg-sticky);
}
body.is-sticky nav#navbar ul.lang {
border-left-color: rgba(122, 90, 26, .25);
}
body.is-sticky nav#navbar ul.lang li a {
color: var(--nav-fg-sticky);
}
/* Hover/active state on the white sticky bar — flip the default black
to the luxury gold accent so the interaction reads cleanly against
the rest of the black items. The underline `::after` already
animates in the base rule; we only change color here. */
body.is-sticky nav#navbar ul.lang li a.active,
body.is-sticky nav#navbar ul.lang li a:hover,
body.is-sticky nav#navbar>ul:not(.lang):not(.secondary)>li>a:hover,
body.is-sticky nav#navbar>ul:not(.lang):not(.secondary)>li>span:hover,
body.is-sticky nav#navbar>ul:not(.lang):not(.secondary)>li>a.active,
body.is-sticky nav#navbar ul.secondary li a:hover {
color: var(--nav-fg-sticky-accent);
}
/* Every text color in the sticky bar (including submenu links and
the language toggle pill) flips to pure black. We set color on the
, , and so the inner AR/EN i18n spans inherit black by
default, but the gold hover/active override further below still wins
because its selectors explicitly include the nested spans. */
body.is-sticky nav#navbar li,
body.is-sticky nav#navbar li a,
body.is-sticky nav#navbar li a span,
body.is-sticky nav#navbar li>span {
color: var(--nav-fg-sticky);
transition: color var(--nav-trnst);
}
/* Active / hover gold needs to reach the inner i18n spans too (otherwise
the .ar / .en span keeps the default black and the accent never
renders when the language toggle flips). */
body.is-sticky nav#navbar ul.lang li a.active,
body.is-sticky nav#navbar ul.lang li a.active>span,
body.is-sticky nav#navbar ul.lang li a:hover,
body.is-sticky nav#navbar ul.lang li a:hover>span,
body.is-sticky nav#navbar>ul:not(.lang):not(.secondary)>li>a.active,
body.is-sticky nav#navbar>ul:not(.lang):not(.secondary)>li>a.active>span,
body.is-sticky nav#navbar>ul:not(.lang):not(.secondary)>li>a[aria-current="page"],
body.is-sticky nav#navbar>ul:not(.lang):not(.secondary)>li>a[aria-current="page"]>span,
body.is-sticky nav#navbar>ul:not(.lang):not(.secondary)>li>a:hover,
body.is-sticky nav#navbar>ul:not(.lang):not(.secondary)>li>a:hover>span,
body.is-sticky nav#navbar>ul:not(.lang):not(.secondary)>li>span:hover,
body.is-sticky nav#navbar ul.secondary li a:hover,
body.is-sticky nav#navbar ul.secondary li a:hover>span {
color: var(--nav-fg-sticky-accent);
}
body.is-sticky header a img {
height: 38px;
/* slight shrink, like heritage-wine sc-logo */
}
@keyframes navSlideDown {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
/* 10. Accessibility — visible focus ring */
nav#navbar a:focus-visible,
nav#navbar span:focus-visible,
header a:focus-visible {
outline: 2px solid var(--nav-accent);
outline-offset: 3px;
border-radius: 2px;
}
}
/* =============================================================================
* MOBILE (≤ 991px) — keep the original GrapeLand drawer untouched.
* We only ensure the secondary list's added FA pseudo-elements (if any
* rendered) don't pollute the drawer view.
* ===========================================================================*/
@media (max-width: 991.98px) {
/* The base style.css already styles the drawer correctly.
Nothing to override — listed here for documentation completeness. */
}
/* =============================================================================
* i18n — Arabic / English bilingual support (index.html only for now)
* ---------------------------------------------------------------------------
* Activation: + body.ar (set by inline JS).
* These rules are inert until the body.ar / [dir=rtl] selectors match, so
* monolingual pages remain unaffected.
* ===========================================================================*/
/* Bilingual visibility — only one of the two language spans renders at a time.
Inside any element marked `.ar` is shown when has the `ar` class
and `.en` otherwise. */
body:not(.ar) .ar {
display: none !important;
}
body.ar .en {
display: none !important;
}
/* Per-language typography — Arabic uses the same families as
custom/asl_aleanab_luxury_website.html (Amiri + IBM Plex Sans Arabic).
The :lang() selectors target individual translated spans so a mixed-language
document still picks the right family per fragment. */
:lang(ar) {
font-family: "IBM Plex Sans Arabic", "Mulish", system-ui, sans-serif;
}
body.ar,
body.ar p,
body.ar a,
body.ar li,
body.ar span,
body.ar input,
body.ar textarea,
body.ar button {
font-family: "IBM Plex Sans Arabic", "Mulish", system-ui, sans-serif;
}
body.ar h1,
body.ar h2,
body.ar h3,
body.ar h4,
body.ar h5,
body.ar h6,
body.ar .hero-content h1,
body.ar .hero-content h4 {
font-family: Amiri, "IBM Plex Sans Arabic", serif;
font-feature-settings: "kern" 1, "liga" 1;
}
/* Larger comfortable line-height for Arabic per aslaleanb.md "Dev Tip". */
body.ar {
line-height: 1.7;
}
/* Arabic & English navbar typography moved to navbar-i18n.css
for independent per-language font control. */
/* RTL layout adjustments — mirror only what's not already symmetric.
The rest of the layout is logical-property friendly so it flips automatically. */
[dir="rtl"] .nav-toggle {
/* hamburger lives top-right in LTR; logical mirroring puts it top-left.
Pin it to the inline-end for a consistent inset behavior. */
right: auto;
left: 0;
transform: translateX(-.6rem);
}
[dir="rtl"] .nav-toggle:hover {
transform: translateX(0);
}
[dir="rtl"] .nav-toggle[aria-expanded="true"] {
margin-left: .5rem;
margin-right: 0;
}
[dir="rtl"] .nav-toggle span.current-page {
right: auto;
left: 0;
transform: rotate(0deg);
/* keep readable in RTL */
writing-mode: vertical-lr;
}
/* MOBILE / TABLET ONLY — slide-in drawer comes from the inline-end.
IMPORTANT: this rule must NOT apply on desktop, otherwise the heritage-wine
horizontal bar would be translated 100% off-screen the moment the user
switches to Arabic (this was the "navbar disappears" bug). */
@media (max-width: 1099.98px) {
[dir="rtl"] nav#navbar {
right: auto;
left: 0;
transform: translateX(-100%) matrix(1, 0, 0, 1, 0, 0);
}
[dir="rtl"] nav#navbar[data-visible="true"] {
transform: translateX(0) matrix(1, 0, 0, 1, 0, 0);
}
}
/* Heritage-wine desktop bar — reserve logo space on whichever side sits.
In LTR the logo sits on the left; in RTL we move it to the right and flip
the nav's reserved padding accordingly. Breakpoint matches the desktop
navbar (1100px). */
@media (min-width: 1100px) {
[dir="rtl"] header {
left: auto;
right: 0;
}
/* Explicitly cancel any drawer transform that might leak through. */
[dir="rtl"] nav#navbar {
transform: none;
left: 0;
right: 0;
padding: 0 clamp(140px, 12vw, 180px) 0 1.25rem;
}
/* The lang ul (now repurposed as toggle) styled as a pill button */
nav#navbar ul.lang li #langToggle {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.4rem;
height: 2.4rem;
padding: 0 .85rem;
font-family: var(--ff-2);
font-size: .72rem;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
color: #fff;
border: 1px solid rgba(255, 255, 255, .35);
border-radius: 999px;
transition: color var(--nav-trnst),
border-color var(--nav-trnst),
background-color var(--nav-trnst);
}
nav#navbar ul.lang li #langToggle:hover {
color: var(--nav-accent);
border-color: var(--nav-accent);
background: rgba(220, 190, 132, .08);
text-decoration: none;
}
body.is-sticky nav#navbar ul.lang li #langToggle {
color: var(--nav-fg-sticky);
border-color: rgba(122, 90, 26, .35);
}
body.is-sticky nav#navbar ul.lang li #langToggle:hover {
color: var(--gold-deep-soft);
border-color: var(--gold-deep-soft);
}
}
/* =============================================================================
* DARK NIGHT THEME + GOLD TYPOGRAPHY
* ---------------------------------------------------------------------------
* Activated by `body.theme-dark` (currently only on grapes/index.html so the
* rest of the template keeps its original light palette).
*
* Strategy: redefine the CSS custom properties from the base style.css inside
* the body.theme-dark scope — almost every component already pulls colors via
* `var(--white)`, `var(--light-grey)`, `var(--grey)` and `var(--primary)`,
* so re-mapping those four variables propagates the theme everywhere with
* near-zero per-component overrides.
*
* Palette
* --night-0 #06070a deepest base (page bg)
* --night-1 #0d0e13 panels / sections
* --night-2 #16181f raised cards
* --night-3 #1f222b borders / dividers
* --gold #d4b873 primary brand gold (slightly warmer than #dcbe84)
* --gold-soft #efd99a highlight / hover
* --gold-dim #8a7544 muted body copy
* ===========================================================================*/
body.theme-dark {
/* 1. Re-map the base GrapeLand variables so existing rules pick them up. */
--white: #06070a;
/* was page bg in light theme */
--light-grey: #0d0e13;
/* `.bg-light` sections turn into deep-night */
--grey: #8a7544;
/* muted-text role → muted gold */
--black: #06070a;
/* unchanged-feeling but normalized */
--primary: #d4b873;
/* gold accent (slight warm tweak) */
/* 2. Local theme tokens used for fine-tuning. */
--night-0: #06070a;
--night-1: #0d0e13;
--night-2: #16181f;
--night-3: #1f222b;
--gold: #d4b873;
--gold-soft: #efd99a;
--gold-dim: #8a7544;
background-color: var(--night-0);
color: var(--gold);
/* default body copy → gold */
}
/* 3. Typography — every text element gets a gold tone, calibrated by role.
Bright gold for headings, warm gold for body, dim gold for secondary. */
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark h5,
body.theme-dark h6 {
color: var(--gold-soft);
}
body.theme-dark p,
body.theme-dark li,
body.theme-dark span,
body.theme-dark blockquote,
body.theme-dark dd,
body.theme-dark dt,
body.theme-dark label {
color: var(--gold);
}
body.theme-dark a {
color: var(--gold-soft);
}
body.theme-dark a:hover {
color: #fff;
}
/* enough contrast lift */
body.theme-dark small,
body.theme-dark .muted,
body.theme-dark figcaption {
color: var(--gold-dim);
}
/* 4. Section & layout backgrounds.
The base template uses `.bg-light` and `.bg-black` utility classes plus
raw whites from var(--white). All become night shades here. */
body.theme-dark main,
body.theme-dark .bg-light {
background-color: var(--night-1);
}
body.theme-dark .bg-black {
background-color: var(--night-0);
}
/* `bg-half` uses inline `--halfColors` referencing var(--black) and
var(--light-grey); both are remapped above so the diagonal still works. */
body.theme-dark hr,
body.theme-dark .frame-img,
body.theme-dark .card,
body.theme-dark blockquote,
body.theme-dark fieldset {
border-color: var(--night-3);
}
/* 5. Buttons — gold-on-dark, with inverted state on hover. */
body.theme-dark .btn,
body.theme-dark button:not(.nav-toggle):not(.lang-toggle):not(#langToggle) {
background: transparent;
color: var(--gold);
border: 1px solid var(--gold);
}
body.theme-dark .btn:hover,
body.theme-dark button:not(.nav-toggle):not(.lang-toggle):not(#langToggle):hover {
background: var(--gold);
color: var(--night-0);
}
/* 6. Form fields — dark inputs with gold text & caret. */
body.theme-dark input,
body.theme-dark textarea,
body.theme-dark select {
background-color: var(--night-2);
color: var(--gold-soft);
border: 1px solid var(--night-3);
caret-color: var(--gold);
}
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
color: var(--gold-dim);
}
body.theme-dark input:focus,
body.theme-dark textarea:focus,
body.theme-dark select:focus {
border-color: var(--gold);
outline: none;
}
/* 7. Footer — slightly deeper than the page base. */
body.theme-dark footer {
background-color: #04050a;
color: var(--gold);
}
body.theme-dark footer a {
color: var(--gold-soft);
}
/* 8. Heritage-wine navbar — re-tune sticky state for the dark theme.
Default state stays transparent over the hero; once sticky the bar
turns into a deep-night band with gold text instead of white. */
@media (min-width: 1100px) {
body.theme-dark.is-sticky nav#navbar {
background: rgba(13, 14, 19, .92);
box-shadow: 0 6px 24px rgba(0, 0, 0, .6);
backdrop-filter: blur(14px);
}
body.theme-dark.is-sticky nav#navbar>ul:not(.lang):not(.secondary)>li>a,
body.theme-dark.is-sticky nav#navbar>ul:not(.lang):not(.secondary)>li>span,
body.theme-dark.is-sticky nav#navbar ul.secondary li a {
color: var(--gold);
}
body.theme-dark.is-sticky nav#navbar>ul:not(.lang):not(.secondary)>li>a:hover,
body.theme-dark.is-sticky nav#navbar>ul:not(.lang):not(.secondary)>li>a.active,
body.theme-dark.is-sticky nav#navbar ul.secondary li a:hover {
color: var(--gold-soft);
}
body.theme-dark.is-sticky nav#navbar ul.lang li #langToggle {
color: var(--gold);
border-color: rgba(212, 184, 115, .35);
}
}
/* 9. Hero/section overlays sometimes use rgba blacks — they already work,
but bump the hero text contrast. */
body.theme-dark .hero-content h1,
body.theme-dark .hero-content h4 {
color: var(--gold-soft);
text-shadow: 0 4px 24px rgba(0, 0, 0, .6);
}
/* 10. Selection color — keeps gold consistent across the page. */
body.theme-dark ::selection {
background: var(--gold);
color: var(--night-0);
}
/* 11. Reduced-motion + cross-browser tidy-ups. */
body.theme-dark img {
filter: brightness(.92) contrast(1.05);
}
@media (prefers-reduced-motion: reduce) {
body.theme-dark * {
transition: none !important;
animation: none !important;
}
}
/* =============================================================================
* HERO SECTION — bilingual & responsive refinements
* ---------------------------------------------------------------------------
* - Background slides (grape1/grape2/grap3) get an explicit object-position
* so the most important part of the image (the fruit) stays in frame on
* portrait viewports.
* - Arabic typography on the hero uses the same Amiri / IBM Plex Sans Arabic
* families as custom/asl_aleanab_luxury_website.html, with relaxed
* line-height tuned for Arabic ascenders/descenders.
* - RTL is inherited from ; the hero is centered so nothing
* needs to flip — the rules below just guard against accidental drift.
* ===========================================================================*/
/* 1. New slot.
The base style.css gives `.hero-slider ul.hero-bg > li` `position: absolute;
inset: 0;` so we just need the image to cover that box. */
.hero-bg .hero-slide__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
/* keep grape clusters in frame */
border: 0;
}
@media (max-width: 600px) {
.hero-bg .hero-slide__img {
object-position: center center;
}
}
/* Ken-Burns zoom — port the previous `bg-zoom` (which animated background-size)
to an