/* ========================================================================== 1Q Academy — Design System Part of 1Q Health. Colours, type and spacing per brand handover document. ========================================================================== */ /* ---------- 0. Webfonts ---------- Aptos — headings, sublines, labels and other emphasis. Noto Sans — body copy, self-hosted as WOFF2, subset to the Latin, Greek, punctuation and maths ranges the site uses. Aptos is licensed through Adobe Fonts and may NOT be downloaded and self-hosted from this folder — Adobe serves it from a web project. Two steps are needed once, in the Adobe Fonts account: 1. Create a web project containing Aptos, weights 400, 600 and 700, normal and italic. Note the project (kit) ID. 2. Add the kit stylesheet to the of every page, above style.css: `build.py` has the line ready and commented out — uncomment it there, insert the ID, and re-run the build. Until then --font-display falls back to a locally installed Aptos, which Windows and Microsoft 365 machines have. Everywhere else the fallback chain below applies, so the site stays fully usable and nothing shifts. Worth knowing before it goes live: the kit is a request to use.typekit.net on every page view, which passes the visitor's IP to Adobe. That is the one reason Noto Sans is self-hosted here. Adobe sets no cookies for font serving and offers a data processing agreement, but for a German B2B site the point is worth raising with whoever signs off on the privacy policy. The alternative is a desktop-and-web licence for Aptos from a distributor that permits self-hosting; then the fonts move into ../fonts/ like Noto Sans. */ /* Athiti returns for one line only: the 1Q Health promise in the band under the hero. It is not the site's display face any more — Aptos is — but the quote is set apart deliberately, and Athiti is licensed under the SIL OFL, so unlike Aptos it can simply be self-hosted from this folder. Two weights are here; only 600 is used. */ @font-face { font-family: "Athiti"; src: url("../fonts/athiti-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Athiti"; src: url("../fonts/athiti-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } /* Variable weight axis 100–900 in a single file. */ @font-face { font-family: "Noto Sans"; src: url("../fonts/notosans-var.woff2") format("woff2-variations"), url("../fonts/notosans-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Noto Sans"; src: url("../fonts/notosans-italic-var.woff2") format("woff2-variations"), url("../fonts/notosans-italic-var.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; } /* ---------- 1. Design tokens ---------- */ :root { /* Brand colours */ /* Version 3: the whole blue family is derived from 1Q Health blue #005B82, hue locked to 198° like the Academy palette it replaces. #005B82 is eight lightness points lighter than #003E59, so every tint and every gold-on-blue pairing had to be re-measured, not just recoloured. */ --blue: #005B82; /* Primary — 1Q Health blue, 7.45:1 on white */ --blue-light: #006F9E; /* Links / secondary text — 5.57:1 on white */ --blue-mid: #34444B; --blue-pale: #C7D9E1; /* Body copy on primary — 5.12:1 */ --blue-faint: #BDD2DB; /* Eyebrow labels on primary — 4.76:1 */ /* The gold family (--gold #D9A404, --gold-ink, --gold-deep #8A6800, --gold-light #F8D982) was removed in Version 4. Every accent that used it now uses the blue family above. See section 'Gold removal' in README.md. */ --paper: #EFF4F6; /* Page background */ --paper-tint: #EAF1F5; /* Resting surface of a publication record; the focused record fades this away to white. Light blue, from the --paper family. Not lighter than this, and not darker. Lighter (the #F1F6F8 first tried here) is only 1.02:1 against the page background, so the card dissolved into the page, and it was so close to white that a half-faded record already looked focused. Darker (#E5EEF3 and below) drops the blue citation separator to 4.40:1, under AA. At this value every text colour inside a record clears AA: ink 11.0:1, ink-soft 5.8:1, blue 6.5:1, blue-light 4.9:1. */ --ink: #333333; /* Body copy — never pure black */ --ink-soft: #4B5F66; --footer-bg: #002E42; /* Darkened #005B82 — keeps the footer as the page's anchor */ --white: #FFFFFF; /* Two lockups, two aspect ratios. The homepage carries the claim version (946 x 502 = 1.884); the subpages carry the wordmark on its own (1137 x 574 = 1.981), because the claim only needs saying once, on the page where the brand is introduced. Every panel measurement is derived from this, so it has to be a variable rather than a number repeated six times. */ /* 1.981 — the lockup's real aspect, measured from the file: 1137 x 574, with no transparent margin on any side. The root value said 1.884, left over from the previous artwork, and every panel width on the homepage is derived from it. The logo was therefore rendering about 5% wider than the box had been sized for, which is why it sat hard against the right edge there and not on the subpages, which already carried the corrected value. */ --logo-aspect: 1.981; --line: rgba(0, 91, 130, 0.14); --line-strong: rgba(0, 91, 130, 0.28); --line-dark: rgba(255, 255, 255, 0.18); /* The logo panel's ground: 12% of the primary over paper. Light enough that the blue lockup keeps its full contrast on it, distinct enough from the paper to read as a panel rather than a rendering artefact. */ --brand-panel: #D8E3E9; /* The header's own ground. Paper by default; each section sets its own tint below. Kept as a variable because three things depend on it: the header bar and the top ramp of both panel layers, whose fade has to end in whatever colour the header is, or the seam at the top edge comes back. */ --header-bg: var(--paper); /* Type — Aptos for display and emphasis, Noto Sans for reading. `aptos` is the family name Adobe Fonts serves; "Aptos" is the locally installed one on Windows and Microsoft 365. Segoe UI Variable and Segoe UI follow because they are the closest match already present on Windows, then the platform UI font. */ --font-display: "aptos", "Aptos", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-label: "aptos", "Aptos", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif; --font-quote: "Athiti", "aptos", "Aptos", "Segoe UI", sans-serif; /* Layout */ /* Was 1400px. At that width a publication citation ran to well over 120 characters before wrapping, and the page read as a wide admin table rather than as an editorial page. 1080px keeps the three-column card grids on the landing page comfortable while bringing the text column back to a normal measure. Anything sized from the content width must read this variable, not a copy of its value — see the promise band, which had 1400px baked into its font-size arithmetic and overflowed the page when this changed. */ --container: 1080px; /* Header only: the nav needs about 1126px and does not fit the content column. See .site-header__inner. */ --container-wide: 1240px; --gutter: clamp(1.25rem, 4vw, 2.5rem); --section-y: clamp(3.5rem, 8vw, 6.25rem); --radius: 3px; /* Elevation */ --shadow-sm: 0 1px 2px rgba(0, 91, 130, 0.08); --shadow-md: 0 8px 24px -8px rgba(0, 91, 130, 0.22); } /* ---------- 2. Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } /* `display` declarations on components would otherwise beat the UA [hidden] rule. Filtering and search rely on the hidden attribute, so it must always win. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } /* One cut lighter throughout. Aptos ships Light, Regular, SemiBold, Bold and ExtraBold — there is no Medium — so h1 and h2 go from Bold to SemiBold and h3/h4 from SemiBold to Regular. At display sizes the lighter cut reads as more composed; a heavy headline is the fastest way to look like an advertisement. */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--blue); line-height: 1.15; margin: 0 0 0.6em; text-wrap: balance; } h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.35rem); letter-spacing: -0.015em; } h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.15rem); } /* h1 and h2 carry the brand blue. h3 and h4 drop to ink at 600: colour and weight were both signalling hierarchy at every level, which read as loud. */ h3 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); color: var(--ink); font-weight: 400; } h4 { font-size: 1.05rem; color: var(--ink); font-weight: 400; } p { margin: 0 0 1.1em; max-width: 68ch; text-wrap: pretty; } p:last-child { margin-bottom: 0; } a { color: var(--blue-light); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { color: var(--blue); } strong { font-weight: 600; } small { font-size: 0.8125rem; } /* Two rings, not one, and the reason is measured. A single-colour focus ring cannot work on this site: against the paper background the old gold managed only 2.04:1, under the 3:1 a focus indicator needs, and plain blue is 6.72:1 on paper but 1.00:1 on the brand blue — invisible on the hero, the CTA band and the footer. So: a blue outline sitting 2px out, and a white ring filling exactly that 2px gap. On light surfaces the blue is what you see (6.72:1). On blue and dark surfaces the blue outline disappears and the white ring is what you see (7.45:1 on the brand blue). Both states clear 3:1, which no single colour did. */ :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; border-radius: 2px; } ::selection { background: rgba(0, 91, 130, 0.16); color: var(--ink); } /* The parent promise is set in capitals wherever it is quoted. Done in CSS, not in the markup, so screen readers still read it as a phrase and not as an initialism. */ /* Capitals barely tracked, as on 1qhealth.com. 0.06em read as spaced-out; at 0.015em the words stay words. */ .caps { text-transform: uppercase; letter-spacing: 0.015em; } .skip-link { position: absolute; top: 0; left: 0; z-index: 100; background: var(--blue); color: #fff; padding: 0.75rem 1.25rem; font-weight: 600; transform: translateY(-120%); transition: transform 0.15s ease; } .skip-link:focus { transform: translateY(0); color: #fff; } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; float: none !important; } /* ---------- 3. Layout ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); } .section--paper { background: var(--paper); } .section--white { background: var(--white); } .section--blue { background: var(--blue); color: #fff; } .section--blue h2, .section--blue h3, .section--blue h1 { color: #fff; } .section--blue p { color: var(--blue-pale); } .grid { display: grid; gap: 1.25rem; } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); } /* Four across. Explicit breakpoints rather than auto-fit, because auto-fit would fall back to three columns on a 1024px screen and strand the fourth card on a row of its own — the exact thing this layout exists to avoid. */ .grid--4 { grid-template-columns: 1fr; } @media (min-width: 40rem) { .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 68rem) { .grid--4 { grid-template-columns: repeat(4, 1fr); gap: 1rem; } } .split { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; } @media (min-width: 62rem) { .split { grid-template-columns: 0.72fr 1fr; align-items: start; } .split--even { grid-template-columns: 1fr 1fr; align-items: center; } .split--wide-left { grid-template-columns: 1.15fr 0.85fr; align-items: center; } } .stack > * + * { margin-top: 1rem; } .lede { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.6; } /* ---------- 4. The brand dot — bullet ---------- */ /* The 1QAcademy_Point asset replaces every generic bullet on the site. Version 4: the gold original (point.png/webp, #D9A404) is recoloured to the brand blue (point-blue.png/webp, #005B82) — at 0.29rem the gold dot reached only 2.04:1 against the paper background, the blue reaches 6.72:1. The gold files stay in assets/img/ untouched. */ .dot-list { list-style: none; padding: 0; margin: 0 0 1.1em; } .dot-list > li { position: relative; padding-left: 1.6rem; margin-bottom: 0.6rem; max-width: 68ch; } .dot-list > li::before { content: ""; position: absolute; left: 0; /* Down from 0.5rem in three steps: at high frequency the brand dot was reading as decoration. It stays the brand asset, just quieter. `top` moves with it so the dot still sits on the first line's x-height. */ top: 0.66em; width: 0.29rem; height: 0.29rem; background-image: url("../img/point-blue.png"); background-image: image-set(url("../img/point-blue.webp") type("image/webp") 1x, url("../img/point-blue.png") type("image/png") 1x); background-size: contain; background-repeat: no-repeat; } .dot-list--roomy > li { margin-bottom: 1rem; } .dot-list--dark > li { color: var(--blue-pale); } /* ---------- 4b. Eyebrow — three-dot family marker + Aptos label ---------- Dots ascend small → large, matching the Academy mark: the blue 1QAcademy_Point is the last and largest. Dot sizes are in em so they track the label size. */ .eyebrow { display: flex; align-items: center; gap: 0.7em; font-family: var(--font-label); font-size: 0.8125rem; font-weight: 600; /* Capitals, tracked enough to stay legible at this size but well short of the 0.15em it started at. The dots take the text colour rather than the brand blue, so the marker reads as part of the label. */ letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin: 0 0 1.1rem; --eb-dot: var(--ink); } .eyebrow--dark { color: var(--blue-faint); --eb-dot: var(--blue-faint); } /* The gold summit point is no longer used in the eyebrow anywhere, on light or dark ground: the marker is one colour throughout and takes --eb-dot. Only the ascending sizes carry the family reference now. */ /* Larger in the hero and on every page hero, per brand direction. */ .hero .eyebrow, .page-hero .eyebrow { font-size: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem); letter-spacing: 0.11em; margin-bottom: 1.35rem; } /* Centred on the text beside them, not sitting on its baseline. The container used to be a fixed 0.95em tall with the dots bottom-aligned inside it, which hung the small ones low; now it is as tall as the largest dot and the three share one horizontal axis, which the flex line centres against the label. Measured against a label without descenders ("WHAT THIS IS"), the dots' centre and the ink band of the capitals coincide exactly, so no correction is needed. Note for anyone tempted to nudge this: under `align-items: center` a negative margin only moves the item by half its value, because the centring recomputes the free space. A -0.09em nudge shifted the dots by 0.5px. */ .eyebrow__dots { flex: none; display: inline-flex; align-items: center; gap: 0.26em; height: auto; } .eyebrow__dots i { display: block; border-radius: 50%; background: var(--eb-dot); } /* Three steps smaller than the original 0.34 / 0.52 / 0.78em: at this frequency the marker only has to be recognisable, not prominent. */ .eyebrow__dots i:nth-child(1) { width: 0.21em; height: 0.21em; } .eyebrow__dots i:nth-child(2) { width: 0.32em; height: 0.32em; } /* All three dots carry --eb-dot: one colour throughout, on light and dark ground alike. The gold summit point is no longer used in the eyebrow — the ascending sizes carry the family reference on their own. */ .eyebrow__dots i:nth-child(3) { width: 0.48em; height: 0.48em; /* One colour, like the other two. */ background: var(--eb-dot); background-image: none; } /* Build-up animation, same easing and rhythm as the hero Academy mark. Runs when the eyebrow scrolls into view; JS adds .is-in. Without JS, or with reduced motion, the dots are simply present. */ .eyebrow__dots.is-in i { animation: dotIn 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) both; } .eyebrow__dots.is-in i:nth-child(1) { animation-delay: 0.05s; } .eyebrow__dots.is-in i:nth-child(2) { animation-delay: 0.19s; } .eyebrow__dots.is-in i:nth-child(3) { animation: dotIn 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) 0.33s both; } @media (prefers-reduced-motion: reduce) { .eyebrow__dots.is-in i, .eyebrow__dots.is-in i:nth-child(3) { animation: none !important; opacity: 1; } } /* ---------- 4c. Emphasis ---------- A gold textmarker stroke used to run through one sentence per section. It was the second-loudest gold surface on the page and read as a study aid rather than as a publication, so the elements were unwrapped in the markup. The rule below stays only as a guard: should a ever come back through a CMS or a paste, it renders as quiet emphasis instead of a yellow stripe. */ mark, .hl { background: transparent; color: inherit; font-weight: 600; } /* ---------- 5. Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; line-height: 1.2; padding: 0.8rem 1.35rem; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .btn:hover { transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } } /* The primary action used to be a filled gold block, repeated on every page in the header and again in the hero. Gold is the accent in the brand system, not a second primary, and as a large fill it was the loudest thing on the screen. It is now solid blue on light ground and solid white on the blue sections, where blue on blue would not read. The class name is kept so no markup had to change. */ .btn--primary { background: var(--blue); color: #fff; } .btn--primary:hover { background: #002b3e; color: #fff; } .section--blue .btn--primary, .hero .btn--primary, .page-hero .btn--primary, .cta-band .btn--primary { background: #fff; color: var(--blue); } .section--blue .btn--primary:hover, .hero .btn--primary:hover, .page-hero .btn--primary:hover, .cta-band .btn--primary:hover { background: var(--blue-pale); color: #003347; } .btn--blue { background: var(--blue); color: #fff; } .btn--blue:hover { background: #002b3e; color: #fff; } .btn--ghost-dark { border-color: rgba(255,255,255,0.4); color: #fff; background: transparent; } .btn--ghost-dark:hover { background: rgba(255,255,255,0.1); color: #fff; } .btn--ghost { border-color: var(--line-strong); color: var(--blue); background: transparent; } .btn--ghost:hover { background: rgba(0, 91, 130,0.06); color: var(--blue); } .btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; } /* ---------- 6. Header ---------- */ /* The bar carries a hint of the section's own colour — 5% of the accent already used on the active nav item, mixed into paper. The first attempt tinted it in steps of the primary blue, which was the wrong answer: the sections already have a colour scheme, on the current nav item, and blue steps both ignored it and broke it. **Why only 5%.** Those five accents are calibrated to land within a hundredth of 5.03:1 on paper — somebody chose them carefully. Every step of tint eats into that, because the accent is measured against the header it now sits on: tint Ingredients Health Areas Publications Webinars Concept Lab 4% 4.76 4.71 4.80 4.79 4.74 5% 4.70 4.64 4.75 4.71 4.68 <- set 6% 4.65 4.57 4.71 4.64 4.63 8% 4.51 4.41 4.57 4.52 4.51 <- Health Areas fails 10% 4.40 4.28 4.44 4.38 4.37 Health Areas is the binding one. 5% keeps every section above 4.6:1 with the grey nav items at 10.2:1 and the magnifier at 6:1. A stronger tint is possible, but it means strengthening the five accents first — and those are a brand decision, not a CSS one. The bar is opaque. It used to be 93% over the page artwork, but the panel's top ramp has to end in the header's colour, and a translucent ramp inside a translucent bar composites twice — the seam came back at 5 to 7 steps of 255. Measured, the artwork behind contributed a difference of 1 step across the five sections, so nothing is lost by making the bar solid. */ .page--bg-ingredients { --header-bg: #E3EEED; } /* 5% of #007842 */ .page--bg-health-indications { --header-bg: #EDE9EC; } /* 5% of #CD1928 */ .page--bg-publications { --header-bg: #E9EDEA; } /* 5% of #726900 */ .page--bg-webinars { --header-bg: #ECEBEA; } /* 5% of #B54200 */ .page--bg-concept-lab { --header-bg: #E9ECF4; } /* 5% of #764ED1 */ /* The bar is opaque. It used to be 93% over the page artwork, but the panel's top ramp has to end in the header's colour, and a translucent ramp inside a translucent bar composites twice — the seam came back at 5 to 7 steps of 255. Measured, the artwork behind contributed a difference of 1 step across the five sections, so nothing is lost by making the bar solid, and now the ramp can match it exactly. */ .site-header { position: sticky; top: 0; z-index: 40; background: var(--header-bg); border-bottom: 1px solid var(--line); } .site-header__inner { /* The header keeps a wider measure than the article column. The logo, five nav items with dropdowns, the search icon and the CTA need about 1126px; inside the 1080px content container they did not fit, and the only alternatives were forcing the mobile drawer onto 1280px-wide desktops or shrinking the nav type. A full-width bar over a narrower text column is a normal arrangement, and it keeps the drawer breakpoint where it was. */ max-width: var(--container-wide); /* Positioning context for the logo panel layers on .brand. */ position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 5.25rem; } /* The subpage override is now the same as the root value and is kept only so that a future change to one does not silently change the other. */ .page--inner { --logo-aspect: 1.981; } /* ---------- Logo panel ---------- At the top of the page the brand sits in a white panel that hangs below the header bar; on the first scroll it retracts and the logo lands where it sits today. Four decisions behind it: 1. The default — no class on — is the RETRACTED state, so without JavaScript, or before this stylesheet's script runs, the page shows the header it has always had. The panel is an enhancement, never a dependency. 2. **The logo is positioned absolutely inside the brand link.** It has to be: left in the flex row, a 120 px logo simply pushed the header from 85 px to 121 px, and everything below it moved. Out of flow, the header keeps its row and nothing can shift. Measured: layout shift 0.000 both ways. 3. `.brand` stretches to the full row height, so the panel's `top: 0` is the header's own top edge without a magic number derived from the logo clamp. 4. The logo grows by `height`, not by `transform: scale()`. The artwork is 1137 × 574, so every size used here is a downscale and stays crisp — scaling a raster up would go soft mid-animation. Desktop only: on a phone a panel this size would take a third of the first screen. */ .brand { position: relative; flex: none; display: block; align-self: stretch; width: calc(clamp(2.9rem, 2.1rem + 1.9vw, 4.25rem) * var(--logo-aspect)); } .brand img { position: absolute; left: 0; top: 50%; height: clamp(2.9rem, 2.1rem + 1.9vw, 4.25rem); /* The global reset sets `max-width: 100%`, which here means 100% of the brand link — and the link only reserves the retracted footprint. Left in place it squashed the expanded logo from its 1.98 aspect to 1.01. Out of flow it cannot break the layout, so the cap is not needed. */ max-width: none; transform: translateY(-50%); /* Slower than a normal UI transition on purpose: this is the one deliberate movement on the page and it reads better unhurried. */ transition: height 0.9s cubic-bezier(0.22, 0.7, 0.25, 1), transform 0.9s cubic-bezier(0.22, 0.7, 0.25, 1); } /* From 76rem, the same breakpoint as the side-by-side hero. Measured at 1100 px and below, reserving the panel's 301px in the header pushed the navigation, search and CTA past the edge — 61px of overflow at 1100, 161px at 992. */ @media (min-width: 76rem) { /* Reserves the *panel's* footprint rather than the small logo's, so the navigation begins to the right of the panel instead of sitting on it. Held in both states: a nav that slides sideways on scroll is a layout shift. */ /* 7.5rem is the logo's panel height; 1.884 its aspect (the claim lockup — 946 x 502; the previous artwork without the claim was 1.981). These used to say 9rem, left over from the first draft, which is why the panel had 16px of ground on the left of the logo and 63px on the right. */ .brand { width: calc(7.5rem * var(--logo-aspect) + 1rem); } .brand::before { content: ""; position: absolute; z-index: -1; /* Geometry is derived from the expanded logo, not from the brand link, whose width follows the small logo's clamp and would make the insets drift with the viewport. 7.5rem × 1.884 is the artwork at its panel size; 1rem of ground on each side. */ left: -1rem; width: calc(7.5rem * var(--logo-aspect) + 2rem); /* A different answer to the pale line at the top, after overshooting alone did not settle it: rather than make the edge land exactly, make there be no edge to land. The panel starts half a rem above the viewport, and its background is a gradient that is *paper-coloured* at that point, deepening to the panel blue over the next 44px. So at the visible top edge the panel is the same colour as the header behind it — a stray hairline of paper cannot show against a colour it already matches — and the two blues run into one another instead of meeting at a line. Note the two must agree: the gradient's first stop is at 0.5rem because that is exactly how far the panel reaches above the viewport. With the earlier -6rem the whole ramp sat above the visible area and the edge stayed hard. The ramp is over by 52px, well clear of the logo at 100px. */ top: -0.5rem; /* Deep enough for the lockup, which now carries "provided by 1Q Health" inside the artwork: the logo runs 74–194, and 26px of ground below it puts the panel edge at 220. Re-measure this if the 7.5rem logo height changes. */ bottom: -8.5rem; background: linear-gradient(to bottom, var(--header-bg) 0.5rem, var(--brand-panel) 3.25rem); /* It dissolves rather than collapsing: opacity only, no scaling. The movement comes from the logo sliding up out of it. */ opacity: 0; transition: opacity 1.1s ease; /* Without this the panel would extend the link's hit area by a 317 × 252 rectangle over the hero, swallowing clicks even at zero opacity. */ pointer-events: none; } .at-top .brand::before { opacity: 1; } /* ---------- The panel artwork (homepage only) ---------- Luisa's "Logo-Hintergrund-Startseite" conic gradient, 780 x 890 in the source, delivered at 560px wide (WebP 4 KB, JPEG 19 KB) for a panel that is about 270 x 292 CSS px. Third artwork ("Logo-Hintergrund-Startseite-3"), delivered at 560px wide (WebP 2 KB, JPEG 8 KB). Re-measured on the bare image, with no white over it: claim "provided by 1Q Health" 4.73:1 (needs 4.5) wordmark + dots 5.29:1 (needs 3) veil claim wordmark 0% 4.73:1 5.29:1 15% 4.95:1 5.60:1 <- kept 25% 5.12:1 5.78:1 35% 5.25:1 5.99:1 It clears both lines bare, but the claim does so by a quarter of a point, and it is the smallest, lightest ink on the panel. The veil stays at the 15% the previous artwork used, which buys half a point on the claim and leaves the image essentially untouched. For the record, the second artwork ("…-2") measured as follows: "PROVIDED BY 1Q HEALTH" in --blue 1.73:1 (needs 4.5:1) the logo lockup itself 1.97:1 (3:1 is the bar for a graphic) claim "provided by 1Q Health" 4.74:1 (needs 4.5) wordmark + dots 3.34:1 (needs 3) The first artwork put a dark turquoise corner directly under the claim and needed a 62% veil to clear the same line. This one is pale where the lockup sits, so the veil drops to 15% — enough to buy a real margin, not enough to wash the image out: veil claim wordmark colour left (mean CIELAB chroma in the panel) 0% 4.74:1 3.34:1 7.36 15% 5.04:1 3.77:1 6.31 <- set 35% 5.47:1 4.43:1 4.87 62% 6.10:1 5.40:1 2.93 (what the old artwork needed) 15% keeps 86% of the image's colour and puts half a point of headroom on the claim and three quarters of a point on the wordmark. The claim is the binding element either way: it is the smallest, lightest ink on the panel (#005F84). Layers, painting order from the top: 1. paper -> transparent over the top 3.25rem, so the ramp on ::before still owns the top edge and no hairline can show against the header, 2. the 35% white veil, 3. the artwork, `cover`, with --brand-panel painted underneath on ::before, so a failed image request leaves the panel exactly as it was. */ body:not(.page--inner) .brand::after { content: ""; position: absolute; z-index: -1; left: -1rem; width: calc(7.5rem * var(--logo-aspect) + 2rem); top: -0.5rem; bottom: -8.5rem; background-image: linear-gradient(to bottom, var(--header-bg) 0.5rem, rgb(from var(--header-bg) r g b / 0) 3.25rem), linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)), image-set(url("../img/panel-home.webp") type("image/webp") 1x, url("../img/panel-home.jpg") type("image/jpeg") 1x); background-size: 100% 3.25rem, cover, cover; background-position: left top, center, center top; background-repeat: no-repeat, no-repeat; opacity: 0; transition: opacity 1.1s ease; pointer-events: none; } /* `at-top` is on , the page class on , so they cannot be chained. */ .at-top body:not(.page--inner) .brand::after { opacity: 1; } /* ---------- The panel artwork on Ingredients ---------- The artwork panel was a homepage-only thing: `body:not(.page--inner)`. Ingredients now has its own, from Logo-Hintergrund-Ingredients.jpg, so the rule is repeated for that page with the compact geometry the inner pages use — the panel there is a third smaller, so the image is told to cover a shorter box and the ramp along the top keeps the same 3.25rem it has everywhere. The veil is 40% here, not the homepage's 15%, and that is measured rather than copied. This artwork is a teal gradient and its darkest point under the wordmark is #8DB3A1; the brand blue on that reads 3.23:1 bare and 3.72:1 at the homepage's 15%. 3:1 is the bar for a graphic, so it was not failing — but it was a long way under the 4.5:1 this site holds its type to, on the one mark every page carries. veil wordmark on the darkest point 0% 3.23:1 15% 3.72:1 (what the homepage uses) 30% 4.25:1 40% 4.25:1 (predicted 4.64 — the prediction was taken from the source file, the measurement from the rendered panel, and the rendered one is the one that counts) 52% 4.71:1 <- set 52% is where it clears 4.5 with something to spare against the *rendered* pixels. The image is paler than the file but still clearly this image. No animation here, like the other inner pages: the panel is simply there. */ :is(.page--bg-concept-lab, .page--bg-ingredients, .page--bg-health-indications, .page--bg-publications, .page--bg-webinars) .brand::after { content: ""; position: absolute; z-index: -1; left: -1rem; width: calc(5.5rem * var(--logo-aspect) + 2rem); top: -0.5rem; bottom: -4.5rem; background-image: linear-gradient(to bottom, var(--header-bg) 0.5rem, rgb(from var(--header-bg) r g b / 0) 3.25rem), linear-gradient(rgba(255, 255, 255, var(--panel-veil, 0.52)), rgba(255, 255, 255, var(--panel-veil, 0.52))), var(--panel-art); background-size: 100% 3.25rem, cover, cover; background-position: left top, center, center top; background-repeat: no-repeat, no-repeat; opacity: 0; transition: none; pointer-events: none; } .page--bg-ingredients .brand::after { --panel-art: image-set(url("../img/panel-ingredients.webp") type("image/webp") 1x, url("../img/panel-ingredients.jpg") type("image/jpeg") 1x); } .page--bg-health-indications .brand::after { /* 60%, not the 52% the other two use. This artwork is the pinkest of the three and its darkest point under the wordmark left exactly 4.50:1 at 52% — the bar with nothing in hand. 60% puts a quarter of a point on it. */ --panel-veil: 0.60; --panel-art: image-set(url("../img/panel-health-indications.webp") type("image/webp") 1x, url("../img/panel-health-indications.jpg") type("image/jpeg") 1x); } .page--bg-concept-lab .brand::after { --panel-art: image-set(url("../img/panel-concept-lab.webp") type("image/webp") 1x, url("../img/panel-concept-lab.jpg") type("image/jpeg") 1x); } .page--bg-webinars .brand::after { --panel-art: image-set(url("../img/panel-webinars.webp") type("image/webp") 1x, url("../img/panel-webinars.jpg") type("image/jpeg") 1x); } .page--bg-publications .brand::after { --panel-art: image-set(url("../img/panel-publications.webp") type("image/webp") 1x, url("../img/panel-publications.jpg") type("image/jpeg") 1x); } .at-top :is(.page--bg-concept-lab, .page--bg-ingredients, .page--bg-health-indications, .page--bg-publications, .page--bg-webinars) .brand::after { opacity: 1; } /* The image is 7rem while the panel is still sized from 7.5rem, so the lockup keeps 1.5rem of ground on each side instead of the 1rem the formula alone would give. The translate follows it down by the quarter it lost, so it stays where it sat in the panel. */ .at-top .brand img { height: 7rem; /* Half the width the logo gave up, so it stays centred in a panel that is still sized from 7.5rem. Without it the image keeps its left edge and all the new space lands on the right: measured 16px left against 32px right. */ transform: translateY(-50%) translateY(6rem) translateX(calc((7.5rem - 7rem) * var(--logo-aspect) / 2)); } /* ---------- Compact panel on the inner pages ---------- The homepage hero is built around the panel; a subpage's job is to get to its content, so the panel is about a third smaller there and the hero keeps more of its height. Every value is the homepage's scaled by 0.733 (5.5rem instead of 7.5rem), including the label, which stays exactly as wide as the logo. */ .page--inner .brand { width: calc(5.5rem * var(--logo-aspect) + 1rem); } .page--inner .brand::before { width: calc(5.5rem * var(--logo-aspect) + 2rem); bottom: -4.5rem; } /* `at-top` is on and `page--inner` on , so they cannot be chained on one element — the descendant order is the whole selector. */ .at-top .page--inner .brand img { height: 5.5rem; transform: translateY(-50%) translateY(3.2rem); } /* No animation on the subpages. Arriving on one of eight pages and watching the panel build itself each time is restless; the movement earns its place once, on the homepage. The panel is simply there, and it snaps away on scroll. */ .page--inner .brand::before, .page--inner .brand img { transition: none; } } @media (prefers-reduced-motion: reduce) { .brand::before, .brand::after, .brand img { transition: none; } } /* The sentinel is 5rem tall and absolutely positioned at the very top, so the panel retracts once the page has scrolled past that. */ .top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 5rem; pointer-events: none; } /* The final lockup is 1137 × 574 — aspect 1.98 : 1, where the previous one was 4.37 : 1. The words "1Q Academy" are 154 px tall in both files, so they now occupy 27% of the artwork's height instead of 57%. Rendered at the old header height the wordmark would be less than half its former size, so the logo is set taller here. Even so it does not fully recover: matching the old wordmark exactly would need 68–94 px of height and a header of roughly 140 px. */ .brand img { height: clamp(2.9rem, 2.1rem + 1.9vw, 4.25rem); width: auto; } /* The row's free space is split between the two gaps that should have it: after the brand, and after the navigation. Two `margin-left: auto` in one flex row share the spare space equally, so "Ingredients" sits away from the logo panel instead of hard against it, and the search icon still ends up pinned to the button (see .header-search). Before this the search's single auto took all of it: the gap after the brand was stuck at the row's 16px while the gap before the search ran to 163px. */ .site-nav { margin-left: auto; } .site-nav ul { display: flex; align-items: center; /* Minus 0.06rem against the old clamp. Reserving the bold width on every link (see the ::before rule further down) made the row a couple of pixels wider, and at 1024px the header has no slack at all — all ten inner pages grew a 2px horizontal scrollbar. Six gaps give it back with room over. */ gap: clamp(0.9rem, 1.8vw - 0.06rem, 1.75rem); list-style: none; margin: 0; padding: 0; } .site-nav > ul > li > .nav-row > a, .site-nav > ul > li > a { font-size: 0.875rem; /* Neutral at rest. The row has been grey, then blue, then fully coloured; the coloured row was too much, so colour is back to marking one thing at a time — the item you are pointing at, or the page you are on. Both of those are colour, weight and an underline together, and the width for the bold state is reserved below so that nothing moves. */ color: var(--ink); text-decoration: none; padding: 0.4rem 0; border-bottom: 2px solid transparent; white-space: nowrap; transition: background-color 0.14s ease, color 0.14s ease; } @media (prefers-reduced-motion: reduce) { .site-nav > ul > li > .nav-row > a, .site-nav > ul > li > a { transition: none; } } /* No underline on hover: the box is the hover mark now. The current page keeps its underline — that is state, not hover. */ .site-nav a[aria-current="page"] { color: var(--blue); font-weight: 600; border-bottom-color: var(--blue); } /* ---------- 6a. The active category carries its own colour ---------- Only the page you are on is coloured. At rest and on hover every item stays in ink and then the brand blue, exactly as before — the colour is a "you are here" mark, not decoration on all five labels at once. Each colour is the hue of that band's artwork, sampled as the circular mean of the most saturated tenth of its pixels. The artwork colours themselves cannot be used as text: they are pale by design, and the Publications yellow measures 1.29:1 on white. category hue colour on the header Ingredients 153° #007842 5.03:1 Health Areas 355° #CD1928 5.03:1 Publications 55° #726900 5.07:1 Webinars 22° #B54200 5.06:1 Concept Lab 258° #764ED1 5.01:1 These are brighter than the first attempt on purpose. That version held all five to one CIELAB chroma (46) so the row would read as a matched set — necessary when every label was coloured at once. With one colour on screen at a time there is no row to match, so each hue now runs as saturated as it can while still clearing 5:1 against the header, capped at chroma 78 so the strongest hues stop short of neon: category chroma before -> now hue's ceiling at 5:1 Health Areas 46 -> 77 87 Concept Lab 46 -> 78 112 Webinars 46 -> 70 70 (at its ceiling) Publications 46 -> 51 51 (at its ceiling) Ingredients 46 -> 47 47 (at its ceiling) So green, olive and orange are as bright as they can be — they are already at the hue's own limit, and the only way further is to break the 5:1 line. Publications stays olive for the same reason: a yellow dark enough to read as text is olive. The colour also takes the underline, so the rule under the label and the label agree. Attribute selectors on the five unique top-level hrefs, so neither build.py nor index.html had to change. */ /* Two variables per category, not one, and the reason is Publications. --cat is the colour as a *surface*: the hover box, the dropdown panel's tint. --cat-ink is the colour as *type*: the current page's label and underline, the chevron, the dropdown's own entries. Both selectors are doubled — `> .nav-row > a` and `> a` — because Webinars and Concept Lab lost their dropdowns and with them their .nav-row wrapper. The first version of this rule matched only the wrapped form, so those two fell back to the blue default and their boxes came out the same colour as Authors', which has no category at all. Nothing in the CSS looked wrong; the rendered pixels did. For four of the five they are the same value. Publications is the exception. Its artwork is a bright yellow-green — sampled from page-bg-publications.webp, the most common saturated colour in it is #D8D878 — and that yellow is a fine surface and an impossible typeface: measured, #DCDC80 on the dropdown panel reads 1.39:1 and on the header 1.33:1, against 4.5:1 for small text. There is no veil or weight that fixes that; a yellow light enough to be this yellow cannot carry text. #6E6E10 is that same hue (60°) taken down until it reads 5.2:1. It is, within a couple of points, the olive that was here before — which is worth saying plainly: the olive was never an arbitrary substitute for the yellow, it *is* the yellow, darkened until it is legible. The yellow is back where it can be seen, as the box and the panel. */ .site-nav > ul > li:has(> .nav-row > a[href^="ingredients.html"]), .site-nav > ul > li:has(> a[href^="ingredients.html"]) { --cat: #007842; --cat-ink: #007842; } .site-nav > ul > li:has(> .nav-row > a[href^="health-indications.html"]), .site-nav > ul > li:has(> a[href^="health-indications.html"]) { --cat: #CD1928; --cat-ink: #CD1928; } .site-nav > ul > li:has(> .nav-row > a[href^="publications.html"]), .site-nav > ul > li:has(> a[href^="publications.html"]) { --cat: #DCDC80; --cat-ink: #676710; } .site-nav > ul > li:has(> .nav-row > a[href^="webinars.html"]), .site-nav > ul > li:has(> a[href^="webinars.html"]) { --cat: #F0926C; --cat-ink: #B54200; } .site-nav > ul > li:has(> .nav-row > a[href^="concept-lab.html"]), .site-nav > ul > li:has(> a[href^="concept-lab.html"]) { --cat: #764ED1; --cat-ink: #764ED1; } /* Both forms again — Webinars and Concept Lab have no .nav-row. Without the second selector the generic aria-current rule won and the page you were on was the one item in the row still painted blue. */ .site-nav > ul > li > .nav-row > a[aria-current="page"], .site-nav > ul > li > a[aria-current="page"] { color: var(--cat-ink, var(--blue)); border-bottom-color: var(--cat-ink, var(--blue)); } /* The hover box. Solid, not a tint: brand blue on any of these five measures 1.34:1, so a blue label could not survive on top of one. The label goes white instead, which measures 5.55:1 to 5.62:1 across the five — the same five colours were calibrated to about 5:1 as text on the header, and they land in the same place as grounds for white. The current page keeps its coloured label and underline underneath; hovering it turns it into the box like any other, which is right — the underline is still there when the pointer leaves. */ /* Hover and current page are one treatment: the category's colour, semibold, and an underline in the same colour. No boxes — those are gone on request. The underline is the element's existing 2px bottom border rather than text-decoration, so it runs the full width of the label and sits exactly where the current page's rule has always sat; the two states line up instead of one being a text underline and the other a border. THE WIDTH IS RESERVED. Going from 400 to 600 makes a label wider, and in a flex row that shifts every item after it — the whole right-hand half of the header twitches as the pointer crosses it. Each link carries a hidden copy of its own text at the bold weight (::before, from data-label), which fixes its width to the widest state it will ever take. */ .site-nav > ul > li > .nav-row > a::before, .site-nav > ul > li > a::before { content: attr(data-label); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 600; pointer-events: none; } .site-nav > ul > li > .nav-row > a:hover, .site-nav > ul > li > a:hover, .site-nav > ul > li > .nav-row > a[aria-current="page"], .site-nav > ul > li > a[aria-current="page"] { color: var(--cat-ink, var(--blue)); font-weight: 600; border-bottom-color: var(--cat-ink, var(--blue)); } /* The chevron thickens with the label it belongs to. */ .has-menu:hover > .nav-row > .submenu-toggle svg, .has-menu:focus-within > .nav-row > .submenu-toggle svg, .has-menu.is-open > .nav-row > .submenu-toggle svg, .nav-row:has(a[aria-current="page"]) .submenu-toggle svg { stroke-width: 2.6; } /* ---------- 6b. Dropdown menus ---------- */ .nav-row { display: flex; align-items: center; gap: 0.25rem; } .submenu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; padding: 0; border: 0; border-radius: 2px; background: transparent; color: var(--ink-soft); cursor: pointer; } .submenu-toggle svg { width: 0.75rem; height: 0.75rem; transition: transform 0.18s ease; } /* The chevron sits beside the label rather than inside the hover box — it is a control of its own and moving it into the box would have meant restructuring .nav-row. It takes the category colour instead, so it belongs to the box without being in it. The five colours were calibrated to about 5:1 as ink on this header, so the mark is as legible as the label was. */ .has-menu:hover > .nav-row > .submenu-toggle, .has-menu:focus-within > .nav-row > .submenu-toggle, .has-menu.is-open > .nav-row > .submenu-toggle { color: var(--cat, var(--blue)); } .has-menu:hover .submenu-toggle svg, .has-menu.is-open .submenu-toggle svg { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .submenu-toggle svg { transition: none; } } @media (min-width: 62rem) { .site-nav > ul > li.has-menu { position: relative; } /* Bridges the gap between the nav item and the panel so the pointer can travel down without the menu closing underneath it. */ .has-menu::after { content: ""; position: absolute; inset: 100% 0 auto 0; height: 1.15rem; display: none; } .has-menu:hover::after, .has-menu:focus-within::after { display: block; } .submenu { position: absolute; top: calc(100% + 1.1rem); left: -1rem; z-index: 50; min-width: 15rem; /* The panel carries its category's colour at 10%, and the rule along its top carries it solid. 10% measured: the menu's own ink reads 10.7:1 to 11.0:1 on it and the blue "all …" link 6.3:1 to 6.5:1, so the tint is well clear of costing anything. The flat fallback is there for anything without color-mix(). */ background: var(--white); background: color-mix(in srgb, var(--cat, var(--blue)) 10%, #fff); border: 1px solid var(--line); border-top: 3px solid var(--cat, var(--blue)); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 0.6rem; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s; } .has-menu:hover > .submenu, .has-menu:focus-within > .submenu, .has-menu.is-open > .submenu { opacity: 1; visibility: visible; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .submenu { transition: none; transform: none; } } .submenu ul { display: block; } /* Nine long health-area labels would make a single column absurdly tall. */ .submenu--wide { min-width: 34rem; } .submenu--wide ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.5rem; } /* Keep the last item ("All …") on its own full-width row. */ .submenu--wide ul li:last-child { grid-column: 1 / -1; } } /* display:block must be unconditional — the nav's base rule sets the list to flex-row, which the drawer would otherwise inherit and lay the submenu out sideways, pushing the page into horizontal scroll. */ .submenu ul { display: block; list-style: none; margin: 0; padding: 0; gap: 0; } /* …and because that rule sits after the desktop block and carries equal specificity, the two-column health-area panel has to be re-asserted here or `display: block` silently wins and the panel collapses to one column. Note: getComputedStyle still reports the track list when display is block, so verify this by measuring rendered positions, not the computed value. */ @media (min-width: 62rem) { .submenu.submenu--wide ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.5rem; } .submenu.submenu--wide ul li:last-child { grid-column: 1 / -1; } } .submenu li { border: 0; } .submenu a { display: block; font-size: 0.875rem; line-height: 1.35; /* The entries take their category's colour, at full strength — --cat-ink, not --cat, so the Publications panel reads in its dark yellow rather than in a bright yellow nobody can read on it. Measured on each panel's own 10% tint: 4.72:1 to 5.17:1, all clear of AA. */ color: var(--cat-ink, var(--ink)); text-decoration: none; padding: 0.5rem 0.65rem; border-radius: 2px; border-bottom: 0; } /* On a panel that is already tinted, a 6% blue wash no longer registered. The hover is the same category colour again, at 22% over the panel's 10%. */ .submenu a:hover, .submenu a:focus-visible { background: rgba(0, 91, 130, 0.06); background: color-mix(in srgb, var(--cat, var(--blue)) 22%, transparent); color: var(--cat-ink, var(--blue)); border-radius: 0; } /* The final entry is the catch-all link back to the whole category. */ .submenu li:last-child a { margin-top: 0.35rem; padding-top: 0.6rem; border-top: 1px solid var(--line); border-radius: 0; font-weight: 600; color: var(--cat-ink, var(--blue)); } /* Search sits to the left of the primary action: a quiet icon, same optical size as the button's cap height, linking to the publications library search. */ .header-search { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; /* Pinned to the button. The header row is `justify-content: space-between`, which was making this gap float: measured from the icon's ink to the button's edge it ran from 15px at 992 to 62px at 1280, because whatever space the row has spare gets distributed across all three gaps, and the amount spare depends on the page (the subpages' logo panel is narrower than the homepage's, so their header has more). A negative margin could not fix that — it only shifts the average. `margin-left: auto` can: it absorbs all the free space to the left of the icon, so the row has none left to distribute and the icon-to-button distance becomes a constant. It is then set by the row's 1rem gap plus this margin: 20px box to box, 32px ink to the button's edge, at every width. */ margin-left: auto; margin-right: 0.25rem; border-radius: var(--radius); color: var(--blue); text-decoration: none; } .header-search svg { width: 1.15rem; height: 1.15rem; } .header-search:hover { background: rgba(0, 91, 130, 0.08); color: var(--blue); } .header-cta { flex: none; } .nav-toggle { display: none; flex: none; align-items: center; gap: 0.5rem; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--blue); font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; padding: 0.55rem 0.8rem; cursor: pointer; min-height: 2.75rem; } .nav-toggle svg { width: 1rem; height: 1rem; } .nav-toggle[hidden] { display: none !important; } @media (max-width: 61.99rem) { .nav-toggle { display: inline-flex; } .header-cta, .header-search { display: none; } .site-nav { margin-left: 0; position: absolute; inset: 100% 0 auto 0; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); padding: 1rem var(--gutter) 1.5rem; } .site-nav[hidden] { display: none; } .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; } .site-nav > ul > li { border-bottom: 1px solid var(--line); } .site-nav a { display: block; padding: 0.85rem 0; font-size: 1rem; border-bottom: none; } .site-nav .btn { margin-top: 1.1rem; width: 100%; } /* In the drawer the panel becomes an indented, collapsible list rather than an overlay — an absolutely positioned dropdown is unusable at this width. */ .nav-row { justify-content: space-between; } .nav-row > a { flex: 1; } .submenu-toggle { width: 2.75rem; height: 2.75rem; margin-right: -0.5rem; color: var(--blue); } .submenu-toggle svg { width: 0.9rem; height: 0.9rem; } .submenu { display: none; padding: 0 0 0.6rem 0.9rem; } .has-menu.is-open > .submenu { display: block; } .submenu a { padding: 0.6rem 0; font-size: 0.9375rem; color: var(--blue-light); } .submenu li:last-child a { margin-top: 0.3rem; padding-top: 0.7rem; } } @media (min-width: 62rem) { .site-nav [data-mobile-only] { display: none; } } /* ---------- 7. Hero ---------- */ .hero { position: relative; background: var(--blue); color: #fff; overflow: hidden; isolation: isolate; } .hero__media { position: absolute; inset: 0; z-index: -2; } /* A little more of the photograph than before (0.28): the parent brand leads with a full photographic hero, and a barely-there image read as texture rather than as a place. Still low enough that white type clears AA — the gradient below does the real work. */ /* `height: 100%` on the image resolves against its parent, and that parent is the