/* ============================================================================= Module: header (modules/header.php) ----------------------------------------------------------------------------- One fixed element that owns four things, so one class can drive them all: the brand line, the action bar, the menu panel and the backdrop behind it. STACKING. .site-header is positioned and has a z-index, so it is a stacking context and the four numbers below are local to it - nothing else on the site has to know about them: 3 .site-header__inner indicator and mark, always on top 2 .site-header__bar the action bar 1 .nav the menu panel (nav.css) 0 .site-header__backdrop the dimmed page behind it The bar and the panel are position: fixed. A fixed box resolves against the viewport and not against its fixed parent, which is what lets the bar travel down into the hero and the panel cover the window while both stay inside the header's markup - and inside its stacking context. That only holds as long as nothing here gets a transform or a filter: either would turn .site-header into their containing block and pin them to the 96px line. HEIGHT. --header-h is the line's own height and shortens once the page has scrolled - SHRINK in assets/js/modules/header.js. The page does NOT follow it: base/layout.css reserves the tall value once and keeps it, or the whole page would jump at that moment. ============================================================================= */ .site-header { --header-h: var(--header-height); /* The mark against the line: roughly half its height, and it shortens with it. Fluid rather than stepped, so it never crowds a phone. */ --header-logo-h: clamp(2rem, 1.4rem + 1.5vw, 2.75rem); /* Where the action bar comes to rest on the home page, measured from the docked position: down past the head of the hero and the band itself, then back up far enough to clear its foot. --hero-height is derived in hero.css from the very ratio the band is drawn with, so this stays true at every window size without anything being measured. */ --actionbar-drop: calc(var(--header-height) / 2 + var(--hero-height) - 4.5rem); position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--z-header); height: var(--header-h); background-color: var(--color-surface); border-block-end: var(--border-width) solid var(--color-line); transition: height var(--transition-base); } .site-header.is-compact { --header-h: var(--header-height-compact); --header-logo-h: clamp(1.625rem, 1.15rem + 1.1vw, 2.125rem); } /* While the menu is open the page behind is locked and its scrollbar is gone. The body is padded by that width (utilities.css) and the line, which spans the viewport rather than the body, has to be padded with it. */ .site-header.is-nav-open { padding-inline-end: var(--scrollbar-width, 0px); } /* --- The brand line -------------------------------------------------------- */ .site-header__inner { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); height: 100%; /* This row spans the whole container and, at z-index 3, lies over the docked action bar between its two controls - so every click meant for a pill would land here instead. It holds nothing of its own that the pointer needs, so it passes the pointer through and the two controls take it back. The layer itself has to stay above the bar: while the menu is open the indicator and the mark sit over the panel. */ pointer-events: none; } .menu-toggle, .site-header__logo { pointer-events: auto; } .site-header__logo { position: relative; display: block; flex: 0 0 auto; text-decoration: none; } .site-header__mark { width: auto; height: var(--header-logo-h); transition: height var(--transition-base), opacity var(--transition-base); } /* Stacked on the dark one, which is the one that holds the box open. */ .site-header__mark--light { position: absolute; inset-block-start: 0; inset-inline-start: 0; opacity: 0; } /* Over the open panel the line is dark. From 1024px the panel starts below it and the line stays white, so this is undone there. */ .site-header.is-nav-open .site-header__mark--dark { opacity: 0; } .site-header.is-nav-open .site-header__mark--light { opacity: 1; } /* ============================================================================= The menu indicator Five bars in CSS. At rest they are even; on hover they draw themselves into a diamond; open, the outer three fall away and the remaining two turn into an X. The bar centres sit 6px apart, which is what the two survivors travel to meet in the middle. ============================================================================= */ .menu-toggle { display: inline-flex; align-items: center; justify-content: flex-start; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; color: var(--color-accent); transition: color var(--transition-base); } .menu-toggle__mark { display: flex; align-items: center; gap: 4px; width: 26px; height: 22px; } .menu-toggle__bar { width: 2px; height: 100%; background-color: currentColor; transform-origin: center; transition: transform var(--transition-base), opacity var(--transition-fast); } /* --- Hover, closed only ---------------------------------------------------- */ .site-header:not(.is-nav-open) .menu-toggle:hover .menu-toggle__bar:nth-child(1), .site-header:not(.is-nav-open) .menu-toggle:hover .menu-toggle__bar:nth-child(5), .site-header:not(.is-nav-open) .menu-toggle:focus-visible .menu-toggle__bar:nth-child(1), .site-header:not(.is-nav-open) .menu-toggle:focus-visible .menu-toggle__bar:nth-child(5) { transform: scaleY(0.55); } .site-header:not(.is-nav-open) .menu-toggle:hover .menu-toggle__bar:nth-child(2), .site-header:not(.is-nav-open) .menu-toggle:hover .menu-toggle__bar:nth-child(4), .site-header:not(.is-nav-open) .menu-toggle:focus-visible .menu-toggle__bar:nth-child(2), .site-header:not(.is-nav-open) .menu-toggle:focus-visible .menu-toggle__bar:nth-child(4) { transform: scaleY(0.78); } /* --- Open ------------------------------------------------------------------ */ .site-header.is-nav-open .menu-toggle__bar:nth-child(1), .site-header.is-nav-open .menu-toggle__bar:nth-child(3), .site-header.is-nav-open .menu-toggle__bar:nth-child(5) { opacity: 0; transform: scaleY(0.2); } /* The middle pair carries the cross. They lead by a moment, so the outer bars are already on their way out before the X draws itself. */ .site-header.is-nav-open .menu-toggle__bar:nth-child(2) { transform: translateX(6px) rotate(-45deg) scaleY(1.15); transition-delay: 60ms; } .site-header.is-nav-open .menu-toggle__bar:nth-child(4) { transform: translateX(-6px) rotate(45deg) scaleY(1.15); transition-delay: 60ms; } .site-header.is-nav-open .menu-toggle { color: var(--color-text-inverse); } /* ============================================================================= The action bar Below 1024px the line has no room for it: it drops out and is pinned to the foot of the open menu panel instead, where the telephone number and WhatsApp stay within reach of a thumb. ============================================================================= */ .site-header__bar { position: fixed; z-index: 2; inset: auto 0 0 0; padding: var(--space-xl) var(--container-padding) var(--space-md); /* The list scrolls underneath, so it has to fade out rather than run into the pills. The panel is at its lightest down here, which is why the wash is the plain blue and not the gradient's own colour. */ background-image: linear-gradient(to bottom, rgba(var(--rgb-blue), 0) 0%, rgba(var(--rgb-blue), 0.95) 45%); transform: translateY(100%); visibility: hidden; transition: transform var(--transition-base), visibility var(--transition-base); } .site-header.is-nav-open .site-header__bar { transform: none; visibility: visible; } /* --- From 1024px: centred in the line, and on the home page in the hero ----- */ @media (min-width: 1024px) { /* The second selector is not decoration: the rule that lifts the bar into the panel below 1024px is more specific than a bare .site-header__bar and would keep winning here, leaving the row pinned to the middle by its left edge instead of centred on it. Both branches are restated, and the two state rules that follow are more specific again, so they still win. */ .site-header__bar, .site-header.is-nav-open .site-header__bar { /* Centred on the viewport, which is what the hero spans too. The half scrollbar backs out the shift the open menu's lock would cause. */ inset: calc(var(--header-height) / 2) auto auto calc(50% - var(--scrollbar-width, 0px) / 2); background-image: none; /* Pinned by its start edge only, the row would otherwise be offered just the half of the window to the right of that edge and wrap in two below about 1400px. max-content lets it take the width it needs and the transform carries it back over the middle; the cap is the gutter, so an overlong row still wraps rather than running off. */ width: max-content; max-width: calc(100vw - 2 * var(--container-padding)); padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-pill); background-color: transparent; transform: translate(-50%, -50%); visibility: visible; transition: transform var(--transition-base), background-color var(--transition-base); } /* The line shortens around a bar that stays put, so the bar has to come up by half the difference to stay on its middle. */ .site-header.is-compact .site-header__bar { transform: translate(-50%, calc(-50% + (var(--header-height-compact) - var(--header-height)) / 2)); } /* Down in the hero. One transform, so the whole travel stays on the compositor - nothing moves in the DOM and nothing reflows. The pale capsule only exists here, over the photograph. */ .js .site-header--home.is-floating .site-header__bar { transform: translate(-50%, calc(-50% + var(--actionbar-drop))); background-color: rgba(var(--rgb-white), 0.28); } } /* ============================================================================= The backdrop Only worth painting from 1024px, where the panel is a drawer and the page is still visible beside it. Below that the panel covers the window on its own. ============================================================================= */ .site-header__backdrop { display: none; } @media (min-width: 1024px) { .site-header__backdrop { display: block; position: fixed; z-index: 0; /* From the foot of the line down, like the drawer beside it. Across the whole window it would darken the line as well: the header paints its own background below every child, so a full-bleed layer at z-index 0 covers it. */ inset: var(--header-h) 0 0 0; background-color: rgba(var(--rgb-black), 0.45); opacity: 0; visibility: hidden; transition: opacity var(--transition-base), visibility var(--transition-base); } .site-header.is-nav-open .site-header__backdrop { opacity: 1; visibility: visible; } /* The drawer starts below the line, so the mark keeps its dark version and the indicator its accent blue. */ .site-header.is-nav-open .site-header__mark--dark { opacity: 1; } .site-header.is-nav-open .site-header__mark--light { opacity: 0; } .site-header.is-nav-open .menu-toggle { color: var(--color-primary); } }