/* ========================================================================== Site header — sticky, blurred, 3-column grid (brand | nav | actions) Structural pattern referenced from schoolofmotion.com, adapted for RenderMe's own menu, language switch and brand gradient CTA. ========================================================================== */ .header { position: sticky; top: 0; z-index: 100; height: var(--header-height); background: var(--color-surface-translucent); -webkit-backdrop-filter: var(--backdrop-blur); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); border-bottom: 1px solid rgba(192, 41, 139, 0.4); } .header__inner { height: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-8); } /* Scrim behind the open mobile drawer (js/header.js appends the element). z-index 90 sits below the header (100) and its fixed drop-down panel — so both stay tappable — but above all page content, so while the menu is open the rest of the page is dimmed AND inert: a tap on it only closes the menu and can't fall through to a link. Inert by default (opacity/visibility/ pointer-events off); nav-open is only ever set on mobile/tablet, so this never activates on desktop even though the rule is global. */ .header__scrim { position: fixed; inset: 0; z-index: 90; background: rgba(3, 3, 4, 0.5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--duration-base) var(--ease-standard), visibility var(--duration-base); } body.nav-open .header__scrim { opacity: 1; visibility: visible; pointer-events: auto; } /* display: contents makes .nav and .header__actions behave as direct grid items of .header__inner on desktop (so the 3-column brand | nav | actions layout is unchanged); on mobile the media query below turns this wrapper into a real off-canvas drawer instead. */ .header__collapse { display: contents; } /* Hamburger — hidden on desktop, shown on mobile by the media query. */ .nav-toggle { display: none; width: 44px; height: 44px; justify-self: end; align-items: center; justify-content: center; flex-direction: column; gap: 5px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-bg-elevated); cursor: pointer; } .nav-toggle__bar { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--color-text); transition: transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); } body.nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* --- Brand --- */ .header__brand { display: inline-flex; align-items: center; gap: var(--space-3); } .header__logo { display: block; height: 40px; width: auto; flex-shrink: 0; } /* WooCommerce compat: on shop/cart/account pages Woo puts `.woocommerce` on and ships `.woocommerce img { height:auto }` — a (0,1,1) selector that outweighs `.header__logo` (0,1,0) and blows the logo up to its intrinsic ~1975px. Re-assert the size with a (0,2,0) selector so the header looks identical on every page, Woo or not. */ .header .header__logo { height: 40px; width: auto; } /* --- Primary nav --- */ .nav { justify-self: center; } .nav__list { display: flex; align-items: center; gap: var(--space-8); } .nav__item { position: relative; } .nav__link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-nav); color: var(--color-text-muted); white-space: nowrap; transition: color var(--duration-fast) var(--ease-standard); } .nav__link:hover, .nav__link:focus-visible { color: var(--color-text); } .nav__chevron { width: 12px; height: 12px; transition: transform var(--duration-fast) var(--ease-standard); } .nav__item:hover .nav__chevron, .nav__item.is-open .nav__chevron { transform: rotate(180deg); } .nav__dropdown { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(4px); min-width: 220px; padding: var(--space-2); background: #0c0c0e; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), visibility var(--duration-base); } .nav__item:hover .nav__dropdown, .nav__item:focus-within .nav__dropdown, .nav__item.is-open .nav__dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav__dropdown-link { display: block; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: var(--fs-small); color: var(--color-text-muted); transition: background var(--duration-fast), color var(--duration-fast); } .nav__dropdown-link:hover, .nav__dropdown-link:focus-visible { background: var(--color-bg-elevated); color: var(--color-text); } /* --- Actions: language switch, login, CTA --- */ .header__actions { display: flex; align-items: center; gap: var(--space-3); } .lang-switch { position: relative; width: 44px; height: 44px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-bg-elevated); overflow: hidden; transition: background var(--duration-fast) var(--ease-standard); } .lang-switch:hover, .lang-switch:focus-visible { background: var(--color-bg-elevated-hover); } .lang-switch__current, .lang-switch__hover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--color-text); transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); } .lang-switch__hover { opacity: 0; transform: translateY(8px); } .lang-switch:hover .lang-switch__current, .lang-switch:focus-visible .lang-switch__current { opacity: 0; transform: translateY(-8px); } .lang-switch:hover .lang-switch__hover, .lang-switch:focus-visible .lang-switch__hover { opacity: 1; transform: translateY(0); } .lang-switch.is-settling .lang-switch__current { opacity: 1; transform: translateY(0); } .lang-switch.is-settling .lang-switch__hover { opacity: 0; transform: translateY(8px); } /* This is a second, otherwise-identical .lang-switch living in .header__mobile-bar (next to the hamburger) — hidden here and shown only ≤1024px (see that media query), where it takes over from the one inside .header__actions (which the same breakpoint hides). Two instances rather than relocating the one element because the original sits inside .header__collapse, which is only ever visible while the drawer is open — no CSS on the switch itself could make it show in the always-visible top bar instead. js/header.js keeps both in sync. */ .lang-switch--mobile { display: none; } .btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; border-radius: var(--radius-sm); font-size: var(--fs-small); font-weight: 700; white-space: nowrap; transition: background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn--outline { background: var(--color-bg-elevated); border: 1px solid var(--color-border-strong); color: var(--color-text); } .btn--outline:hover { background: var(--color-bg-elevated-hover); } .btn--cta { background: var(--gradient-brand-btn); color: #fff; box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255, 255, 255, 0.16); } .btn--cta:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(192, 41, 139, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .btn--cta:active { transform: translateY(0); } /* No glow / highlight when tapping a button (mobile tap flash + the focus ring that lingers after a tap). Keyboard focus keeps its visible ring via :focus-visible (base.css). */ .btn { -webkit-tap-highlight-color: transparent; } .btn:focus:not(:focus-visible) { outline: none; } /* ========================================================================== Mobile / tablet header — off-canvas drawer + hamburger. Breakpoint 1024px matches the site-wide tablet breakpoint. Below it there is (on real devices) no hover, so the Services dropdown switches from a hover-reveal popup to a click-to-expand inline list (js/header.js toggles .is-open on tap). ========================================================================== */ @media (max-width: 1024px) { /* No grid-template-columns override needed here — the base rule above (auto 1fr auto) already gives exactly the 3-slot row this layout wants; only which elements land in the DOM (and are therefore visible/hidden per breakpoint) differs. .nav-toggle is now the FIRST child of .header__inner (before .header__brand) so it lands in slot 1 on the left, .header__brand sits in the middle 1fr slot (its own inline-flex content still hugs the left edge of that slot, right next to the hamburger — the extra 1fr space just trails after the logo, unused), and .lang-switch--mobile is the LAST child so it lands in slot 3 on the right — where the hamburger used to be. */ /* The logo's own link is dead weight here — "Home" already exists as a real item in the drawer, and the anchor's box (grid-stretched to fill the whole middle 1fr slot, ~500px+ wide, far past the visible logo) sits just one gap away from the hamburger and language switch on either side. pointer-events: none turns it back into a plain mark, so a tap that lands slightly off either button can't accidentally trigger it instead. */ .header__brand { pointer-events: none; } .nav-toggle { display: inline-flex; } /* Cancel display: contents — become a real element that can slide in. */ .header__collapse { display: block; position: fixed; top: var(--header-height); left: 0; right: 0; max-height: calc(100dvh - var(--header-height)); overflow-y: auto; padding: var(--space-6) var(--container-pad) var(--space-8); background: #0c0c0e; border-bottom: 1px solid var(--color-border); box-shadow: 0 24px 40px rgba(0, 0, 0, 0.5); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard), visibility var(--duration-base); } body.nav-open .header__collapse { transform: none; opacity: 1; visibility: visible; } .nav { justify-self: auto; } .nav__list { flex-direction: column; align-items: stretch; gap: 0; } .nav__item { border-bottom: 1px solid var(--color-border); } .nav__link { padding: var(--space-4) 0; font-size: 17px; width: 100%; justify-content: space-between; } /* 16px = (lang-switch's 44px width - the chevron's own 12px width) / 2 — .nav__link's space-between above would otherwise push the chevron flush to the row's right edge, which lines up with lang-switch's right edge (both rows share the same container inset) but not its center. This pulls just the chevron in far enough that its center lands under lang-switch's center instead. */ .nav__trigger { width: 100%; padding-right: 16px; } /* Inline, click-expanded dropdown (no hover popup on touch). */ .nav__dropdown { position: static; transform: none; min-width: 0; padding: 0 0 var(--space-2) var(--space-4); background: transparent; border: none; box-shadow: none; opacity: 1; visibility: hidden; height: 0; overflow: hidden; transition: none; } /* transform: none is required here (not just on the base .nav__dropdown): the desktop open/hover rules carry translateX(-50%) at the same specificity, which would otherwise shove the inline mobile list off-screen to the left. :hover deliberately dropped from this list (unlike the desktop rule above) — a tablet with a mouse/trackpad still fires :hover at this width, which would pop the sub-list open just from resting the cursor over "Services" even though nothing was tapped. Only an actual tap (.is-open, via js/header.js) or keyboard focus opens it here. */ .nav__item:focus-within .nav__dropdown, .nav__item.is-open .nav__dropdown { transform: none; visibility: visible; height: auto; } /* Same font-size and padding as .nav__link above — a touch target this small is easy to miss with a thumb, and the sub-items are just as tappable/important as the top-level ones, so there's no reason for them to read smaller. The base rule's hover/focus background + border-radius (a desktop hover-popup affordance) is dropped too — inline in the drawer, boxing each link like a button reads oddly next to its plain-text siblings; a tap here should look like picking a line of text, not pressing a button. */ .nav__dropdown-link { padding: var(--space-4) 0; font-size: 17px; border-radius: 0; } .nav__dropdown-link:hover, .nav__dropdown-link:focus-visible { background: none; } /* Both the language switch and Get a quote move out of the drawer entirely at this width — .lang-switch--mobile (top-right slot, see the note above .header__inner) carries the switch instead. Desktop keeps .header__actions exactly as it was. */ .header__actions { display: none; } .lang-switch--mobile { display: inline-block; } } /* ========================================================================== Header cart + account icons (WooCommerce). Cart appears only when it holds something (.is-active, set server-side in header.php). ========================================================================== */ .header__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--color-text-muted); border-radius: var(--radius-sm); transition: color var(--duration-fast) var(--ease-standard); } .header__icon:hover { color: var(--color-text); } .header__icon svg { width: 22px; height: 22px; } .header__cart { display: none; } .header__cart.is-active { display: inline-flex; } .header__cart-count { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--gradient-brand-btn); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(192, 41, 139, 0.4); } /* Logged-in account avatar — square/rounded, same footprint as the language chip. */ .header__account--avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-sm); overflow: hidden; } .header__avatar { width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; display: block; border: 1px solid var(--color-border-strong); } /* Mobile/tablet: cart + account + language live in the top bar (the desktop .header__actions is hidden in the drawer at ≤1024). */ .header__mobile-actions { display: none; } @media (max-width: 1024px) { .header__mobile-actions { display: inline-flex; align-items: center; gap: 6px; } }