/* ============================================================ header.css — Flex Europa · finaldesign TWO-STATE header: State 1 — GLASS over the hero video (absolute, translucent, backdrop-blur). Scrolls away with the page. State 2 — SOLID graphite bar that SLIDES DOWN from the top, eased, after a 0.8s delay (brief §4). Toggled by JS via .is-stuck (dock + solid) and .is-visible (slide). z-index = --z-sticky (200), below overlays/modals (500). ============================================================ */ .site-header { position: absolute; /* State 1: overlays the hero, scrolls away */ inset-block-start: 0; inset-inline: 0; z-index: var(--z-sticky); color: var(--color-text-inverse); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-block-end: 1px solid var(--glass-border); } /* State 2 — docked: fixed, solid graphite, hidden above then slid in */ :is(.site-header.is-stuck, .page--flat .site-header) { position: fixed; background: var(--color-bg); /* solid WHITE — clearly "docked" */ color: var(--color-text); -webkit-backdrop-filter: none; backdrop-filter: none; border-block-end: 1px solid var(--color-border); box-shadow: 0 8px 24px rgba(20, 24, 26, .10); transform: translateY(-100%); /* parked above the top; no transition here, so it snaps to the hidden spot before is-visible slides it in */ } .site-header.is-stuck.is-visible { transform: translateY(0); transition: transform var(--dur-slow) var(--ease-out); /* eased slide-DOWN … */ transition-delay: var(--header-slide-delay); /* … after the mandated 0.8s dwell */ } /* Reduced motion: dock instantly — no slide */ @media (prefers-reduced-motion: reduce) { .site-header.is-stuck.is-visible { transition: none; } } /* ============================================================ STATE 3 — INTERNAL PAGES (body.page--flat) State 1 is glass over the dark hero video, which only works on the home page. On a light internal page it failed twice over: the inverse text sat on a near-white band at 2.13:1, and because the bar is absolutely positioned it covered the page's own

outright. Internal pages therefore reuse the SOLID appearance State 2 already defines — every colour, logo-swap, nav and icon rule above is shared through :is(), so there is ONE docked appearance in the codebase, not a second one written out again — and change only what must differ: · sticky, not fixed, so the bar occupies flow space and nothing ends up hidden behind it; · no translateY/slide, because it is already where it belongs; · no drop shadow at rest — it is not floating over content. Driven by a class on , so the header MARKUP is still byte-identical on every page (§1.1). In Razor this is one layout variable, not a second partial. The utility strip stays visible here (State 2 hides it) because it carries the flex-europa.me corporate cross-link, which §7 requires on every page; its colours were written for a dark backdrop, so they are restated for a light one below. ============================================================ / .page--flat .site-header { position: sticky; transform: none; box-shadow: none; } .page--flat .site-headerutility { border-block-end: 1px solid var(--color-border); } .page--flat .site-headertagline { color: var(--color-text-muted); } .page--flat .site-headercorp-link { color: var(--color-text-muted); } .page--flat .site-headercorp-link:hover { color: var(--color-accent-strong); } .page--flat .site-searchinput { border: 1px solid var(--color-border); } / ---- Utility strip (corporate cross-link) — hidden once docked ---- / .site-headerutility { min-block-size: var(--header-utility-h); border-block-end: 1px solid rgba(255, 255, 255, .10); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); } .site-header.is-stuck .site-headerutility { display: none; } .site-headerutility-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-block-size: var(--header-utility-h); } .site-headertagline { color: rgba(255, 255, 255, .74); text-transform: uppercase; } .site-headerutility-links { display: flex; align-items: center; gap: var(--space-md); } .site-headercorp-link { display: inline-flex; align-items: center; / 44px floor. The label does not move — only the hit area grows around it, centred. / min-block-size: var(--step-size); gap: 6px; color: rgba(255, 255, 255, .9); text-transform: uppercase; } .site-headercorp-link:hover { color: var(--color-accent-on-dark); } .site-headercorp-link .icon { inline-size: .95em; block-size: .95em; } / ---- Main bar ---- / .site-headerbar-inner { display: flex; align-items: center; gap: var(--space-md); min-block-size: var(--header-h); transition: min-block-size var(--dur-base) var(--ease-out); } .site-header.is-stuck .site-headerbar-inner { min-block-size: var(--header-h-stuck); } / ---- Logo — white wordmark over the hero glass; brand-colour wordmark once docked on white ---- / / The wordmark image stays 26px; the LINK's hit area grows to 44 inside the 62-76px bar, so the target passes without moving a pixel of art. / .site-headerlogo { display: inline-flex; align-items: center; flex: none; min-block-size: var(--step-size); } .site-headerlogo-img { block-size: 26px; inline-size: auto; } .site-headerlogo-img--light { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); } / legibility over bright video frames / .site-headerlogo-img--color { display: none; } / hidden until docked / :is(.site-header.is-stuck, .page--flat .site-header) .site-headerlogo-img--light { display: none; } :is(.site-header.is-stuck, .page--flat .site-header) .site-headerlogo-img--color { display: inline-block; } / ============================================================ Primary nav ============================================================ / .site-nav { display: flex; align-items: center; margin-inline-start: auto; } .site-navlist { display: flex; align-items: center; gap: var(--space-xs); } .site-navitem--has-submenu { position: relative; } .site-navitem--has-submenu .site-navlink-row { gap: 0px; } .site-navitem--has-submenu .site-navlink { padding-right: 0px; } .site-navlink-row { display: flex; align-items: center; gap: var(--space-xs); } .site-navlink { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: var(--space-sm); font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: rgba(255, 255, 255, .88); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); / AA insurance on glass / position: relative; transition: color var(--transition-fast); / A two-word label must never break across lines: the item then measures 44px tall while its text occupies two, which is how "Contact Us" read when the bar was one pixel over. This also makes the nav's minimum width honest, so any future crowding shows up as overflow in the gate rather than as quietly broken labels. / white-space: nowrap; } :is(.site-header.is-stuck, .page--flat .site-header) .site-navlink { text-shadow: none; color: var(--color-text-muted); } :is(.site-header.is-stuck, .page--flat .site-header) .site-navlink:hover, :is(.site-header.is-stuck, .page--flat .site-header) .site-navlink:focus-visible { color: var(--color-text); } :is(.site-header.is-stuck, .page--flat .site-header) .site-navitem--active .site-navlink { color: var(--color-text); } .site-navlink::after { content: ""; position: absolute; inset-block-end: 10px; inset-inline: var(--space-sm); block-size: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: inline-start; transition: transform var(--dur-fast) var(--ease-out); } .site-navlink:hover, .site-navlink:focus-visible { color: var(--color-text-inverse); } .site-navlink:hover::after, .site-navlink:focus-visible::after { transform: scaleX(1); } .site-navitem--active .site-navlink { color: var(--color-text-inverse); } .site-navitem--active .site-navlink::after { transform: scaleX(1); } .site-navsubmenu-toggle { display: inline-flex; align-items: center; justify-content: center; inline-size: 24px; block-size: 44px; flex: none; color: currentColor; background: transparent; border: 0; cursor: pointer; } .site-navitem--has-submenu:hover .site-navsubmenu-toggle, .site-navsubmenu-toggle:hover, .site-navsubmenu-toggle:focus-visible, .site-navsubmenu-toggle[aria-expanded="true"] { color: var(--color-accent-on-dark); } .site-navsubmenu-toggle .icon { inline-size: 16px; block-size: 16px; transition: transform var(--transition-fast); } .site-navsubmenu { position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: var(--z-dropdown); min-inline-size: 240px; padding: var(--space-sm) 0; background: var(--footer-band); border: 1px solid var(--footer-border); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s linear var(--dur-base); } .site-navitem--has-submenu:hover .site-navsubmenu, .site-navitem--has-submenu:focus-within .site-navsubmenu { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; } .site-navsubmenu-link { display: flex; align-items: center; min-block-size: 44px; padding: 0 var(--space-md); color: var(--footer-text); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; white-space: nowrap; } .site-navsubmenu-link:hover, .site-navsubmenu-link:focus-visible { color: var(--color-accent-on-dark); background: var(--footer-raised); } / ---- Actions cluster (search + CTA) ---- / / --space-xs, not --space-sm. At 992px the bar is exact to the pixel: 48px padding each side leaves 896, and logo 197 + nav 468 + actions + two 16px gaps consumed all of it — the nav came up ONE pixel short and "Contact Us" broke across two lines. A fourth 44px action needs that pixel back, and the gap is where it is cheapest: the icons already carry 11px of clear space inside their own 44px boxes. / .site-headeractions { display: flex; align-items: center; gap: var(--space-xs); flex: none; } / ============================================================ Search — icon button that slides a field open ============================================================ / .site-search { position: relative; display: flex; align-items: center; } .site-searchtoggle { position: relative; z-index: 2; } / stays on top of the overlay field / / The field is an ABSOLUTE right-anchored overlay — opening it never reflows the bar / .site-searchform { position: absolute; inset-inline-end: 0; inset-block-start: 50%; transform: translateY(-50%); z-index: 1; display: flex; align-items: center; inline-size: 0; opacity: 0; visibility: hidden; overflow: hidden; transition: inline-size var(--dur-base) var(--ease-out), opacity var(--transition-fast), visibility 0s linear var(--transition-base); } .site-search.is-open .site-searchform { inline-size: min(78vw, 440px); opacity: 1; visibility: visible; transition: inline-size var(--dur-base) var(--ease-out), opacity var(--transition-fast); } .site-searchinput { inline-size: 100%; min-block-size: 44px; padding-inline: var(--space-md); padding-inline-end: 52px; / clear the toggle sitting on top at the right / border: 1px solid rgba(255, 255, 255, .4); border-radius: var(--radius-control); background: var(--color-ink-scrim); / opaque — masks the nav it overlays / color: var(--color-text-inverse); font-size: var(--fs-sm); } .site-searchinput::placeholder { color: rgba(255, 255, 255, .6); } .site-searchinput:focus { outline: none; border-color: var(--color-accent-on-dark); box-shadow: var(--focus-ring-dark); } :is(.site-header.is-stuck, .page--flat .site-header) .site-searchinput { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } :is(.site-header.is-stuck, .page--flat .site-header) .site-searchinput::placeholder { color: var(--color-text-faint); } / Icon controls (search · nav · account · cart) — white on glass, ink once docked on white / .site-searchtoggle, .site-navtoggle, .site-headeraction { color: var(--color-text-inverse); } .site-searchtoggle:hover, .site-navtoggle:hover, .site-headeraction:hover, .site-headeraction:focus-visible { color: var(--color-accent-on-dark); } :is(.site-header.is-stuck, .page--flat .site-header) .site-searchtoggle, :is(.site-header.is-stuck, .page--flat .site-header) .site-navtoggle, :is(.site-header.is-stuck, .page--flat .site-header) .site-headeraction { color: var(--color-text); } :is(.site-header.is-stuck, .page--flat .site-header) .site-searchtoggle:hover, :is(.site-header.is-stuck, .page--flat .site-header) .site-navtoggle:hover, :is(.site-header.is-stuck, .page--flat .site-header) .site-headeraction:hover, :is(.site-header.is-stuck, .page--flat .site-header) .site-headeraction:focus-visible { color: var(--color-accent-strong); } / ---- Account + Cart actions (eCommerce) ---- / .site-headeraction { position: relative; display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; flex: none; transition: color var(--transition-fast); } .site-headeraction .icon { inline-size: 22px; block-size: 22px; } / The logged-in action includes a server-rendered display name; the logged-out action remains an icon-only sign-in target. / .site-headeraction--logged-in { inline-size: auto; max-inline-size: 180px; gap: var(--space-xs); padding-inline: var(--space-xs); } .site-headeraccount-name { overflow: hidden; max-inline-size: 132px; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: var(--tracking-wide); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } / Every value below is unchanged; the literals are now token references so the badge satisfies the "no raw hex, no raw px outside tokens.css" rule on all 17 pages. --badge-* carry the identical numbers. Named for what it is, not for the one action that first used it: the bag and favourites both hang a count off a header action, and one badge component serves both. (Was .site-headercart-count.) / .site-headerbadge { position: absolute; inset-block-start: var(--badge-offset-block); inset-inline-end: var(--badge-offset-inline); min-inline-size: var(--badge-size); block-size: var(--badge-size); padding-inline: var(--space-xs); border-radius: var(--radius-pill); background: var(--color-accent-strong); color: var(--color-text-inverse); font-family: var(--font-mono); font-size: var(--badge-fs); font-weight: var(--fw-semibold); line-height: var(--badge-size); text-align: center; } / Search open → fade the primary nav out so the sliding field never collides with the nav text (it opens into the freed space). Desktop only — on phones the nav is a single hamburger the opaque field simply covers. / .site-nav { transition: opacity var(--transition-fast); } @media (min-width: 992px) { .site-header.is-searching .site-nav { opacity: 0; visibility: hidden; pointer-events: none; } } / ============================================================ Mobile nav toggle + panel ============================================================ / .site-navtoggle { display: none; } @media (max-width: 991px) { .site-nav { / margin-inline-start: 0; / justify-content: flex-end; } .site-navtoggle { min-inline-size: auto; display: inline-flex; order: 3; } / Collapse the inline list into a solid graphite drop panel / .site-navlist { position: absolute; inset-block-start: 100%; inset-inline: 0; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-sm) clamp(20px, 5vw, 48px) var(--space-lg); background: var(--footer-band); border-block-start: 1px solid var(--footer-border); box-shadow: 0 16px 32px rgba(0, 0, 0, .35); display: none; } .site-navlist.is-open { display: flex; } .site-navlink { / flex, not the base inline-flex: the link then fills its row, so the tap target is the full panel width (it measured 38px wide for "Home" — tall enough but too narrow for the 44px floor) and the divider rule below spans the row instead of just the word. / display: flex; min-block-size: 52px; padding-inline: 0; text-shadow: none; border-block-end: 1px solid var(--footer-border); } .site-navlink-row { border-block-end: 1px solid var(--footer-border); } .site-navlink-row .site-navlink { flex: 1; border-block-end: 0; } .site-navsubmenu-toggle { inline-size: 52px; block-size: 52px; color: var(--footer-text); } .site-navsubmenu-toggle:hover, .site-navsubmenu-toggle:focus-visible { color: var(--color-accent-on-dark); } .site-navsubmenu-toggle .icon { inline-size: 18px; block-size: 18px; transition: transform var(--transition-fast); } .site-navitem--has-submenu.is-submenu-open .site-navsubmenu-toggle .icon { transform: rotate(180deg); } .site-navsubmenu { position: static; min-inline-size: 0; padding: 0 0 0 var(--space-lg); border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; display: none; } .site-navitem--has-submenu.is-submenu-open .site-navsubmenu { display: block; padding: 0px; } .site-navsubmenu-link { min-block-size: 44px; padding-inline: var(--space-md); border-block-end: 1px solid var(--footer-border); } .site-navlink::after { inset-inline: 0; inset-block-end: 14px; } / The drop panel is ALWAYS dark graphite → keep its links light in both header states (overrides the docked dark-ink nav colour used on desktop). / .site-header .site-navlist .site-navlink, :is(.site-header.is-stuck, .page--flat .site-header) .site-navlist .site-navlink { color: var(--footer-text); } .site-header .site-navlist .site-navlink:hover, :is(.site-header.is-stuck, .page--flat .site-header) .site-navlist .site-navlink:hover { color: var(--color-accent-on-dark); } / Order within the bar on mobile: logo | (spacer) | search · account · cart | toggle / .site-headerbar-inner { / flex-wrap: wrap; / justify-content: space-between; } .site-headeractions { / margin-inline-start: auto; / justify-content: flex-end; } } @media (max-width: 575px) { .site-search.is-open .site-searchform { inline-size: min(72vw, 300px); } .site-headertagline { display: none; } .site-headerlogo-img { block-size: 22px; } / trim the wordmark so the icons fit / .site-headeraccount-name { display: none; } .site-headeraction--logged-in { inline-size: 44px; padding-inline: 0; } } / ============================================================ CHECKOUT HEADER (§3.5) A reduced bar: logo, a secure indicator, and one way back to the bag. No nav, no search, no drawer trigger — during checkout the order summary IS the bag, and every extra exit is a way to lose the sale. Built on .site-header so the shell, height and logo rules are the shared ones; .site-header--checkout only removes what is not there. ============================================================ / .site-header--checkout { position: sticky; background: var(--color-bg); color: var(--color-text); -webkit-backdrop-filter: none; backdrop-filter: none; border-block-end: 1px solid var(--color-border); box-shadow: none; } .site-header--checkout .site-headerbar-inner { justify-content: space-between; min-block-size: var(--header-h-stuck); } / The colour wordmark, as on any solid header. / .site-header--checkout .site-headerlogo-img--color { display: inline-block; } .site-headersecure { display: inline-flex; align-items: center; gap: var(--space-xs); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-accent-strong); } .site-headersecure .icon { inline-size: 14px; block-size: 14px; } .site-headerexit { display: inline-flex; align-items: center; min-block-size: var(--step-size); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); } .site-headerexit:hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 575px) { / The words go, the padlock stays — the reassurance is the point. */ .site-headersecure span { display: none; } } @media (max-width: 520px) { .site-headerbar-inner{ gap: var(--space-sm); } .site-headeraction,.site-search__toggle { inline-size: 30px !important; min-inline-size: 30px !important; } }