/* ========================================================================== FRONTGRADE · SHARED COMPONENTS · v2 Requires tokens.css to be loaded first. Vanilla CSS. No frameworks, no build step, no external dependencies. Contrast notes in this file quote ratios computed from the sRGB relative luminance formula against the exact surface the element sits on, with any alpha composited first. Where a combination fails, the comment forbids the combination outright; the single orange #e35530 is never recoloured. ========================================================================== */ /* -------------------------------------------------------------------------- 1. BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--surface-base); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--surface-base); color: var(--text-muted); font: var(--type-body); letter-spacing: var(--ls-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; } svg { fill: currentColor; } ::selection { background: var(--accent); color: var(--text-on-accent); /* 5.22:1 */ } /* Thin scrollbar. Decorative, and it inherits the surface ramp so it never reads as a second border on a dark panel. */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.18); } hr { border: 0; border-top: var(--border-hairline-w) solid var(--border-hairline); margin: var(--space-9) 0; } /* -------------------------------------------------------------------------- 2. TYPOGRAPHY PRIMITIVES Display faces are Barlow Condensed bold, uppercase, set to leading-none. Everything else is Inter, small and quiet. -------------------------------------------------------------------------- */ h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } .fg-display, .fg-h1, .fg-h2, .fg-h3 { font-family: var(--font-display); font-weight: var(--fw-display); color: var(--text-display); /* 17.90:1 base, 15.39:1 elevated */ text-transform: uppercase; text-wrap: balance; } .fg-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); } .fg-h1 { font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--ls-h1); } .fg-h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-h2); } .fg-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); } /* Inter sub-head. Sentence case, used for tile and row labels. */ .fg-h4 { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--text-primary); text-transform: none; letter-spacing: 0; } /* One highlighted word inside a display line. --accent measures 5.22 / 4.98 / 4.68 / 4.49 across the ladder. At display sizes the applicable threshold is the 3:1 large-text rule, which all four clear with room to spare. */ .fg-accent-word { color: var(--accent); } .fg-lede { font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--text-muted); /* 5.57:1 base, 4.79:1 elevated */ max-width: var(--measure-lede); text-wrap: pretty; } .fg-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); max-width: var(--measure-body); } .fg-small { font-size: var(--fs-small); line-height: 1.55; color: var(--text-muted); } /* Long-form reading copy. The blog article body is the only place this is used; every other surface follows the low-copy budget. */ .fg-prose { font-size: var(--fs-prose); line-height: var(--lh-prose); color: var(--text-muted); max-width: var(--measure-prose); } /* Meta line: date, read time, category rail. */ .fg-meta { font-size: var(--fs-2xs); line-height: 1.4; color: var(--text-muted); letter-spacing: var(--ls-chip); } /* Eyebrow. 12px / 600 / 0.22em, orange. PERMITTED on --surface-base (5.22), --surface-raised (4.98) and --surface-panel (4.68). FORBIDDEN on --surface-elevated (4.49). */ .fg-eyebrow { display: block; font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); line-height: 1; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-3); } .fg-eyebrow--muted { color: var(--text-muted); } /* 11px column / group title. Muted, never orange. */ .fg-label { display: block; font-family: var(--font-body); font-size: var(--fs-3xs); font-weight: var(--fw-semibold); line-height: 1; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); } /* Stat numeral. Barlow Condensed bold, orange, large-text rule applies. */ .fg-stat { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-stat); line-height: 1; color: var(--accent); } /* Section opener: eyebrow + heading + optional lede. */ .fg-section-head { margin-bottom: clamp(28px, 1.6rem + 1.6vw, 48px); } .fg-section-head .fg-lede { margin-top: var(--space-4); } .fg-section-head--center { text-align: center; } .fg-section-head--center .fg-lede { margin-inline: auto; } .fg-section-head--tight { margin-bottom: var(--space-7); } /* Split opener: copy left, a single quiet link right. */ .fg-section-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; } /* -------------------------------------------------------------------------- 3. LAYOUT · containers, bands, rules, grids -------------------------------------------------------------------------- */ .fg-container { width: 100%; max-width: calc(var(--container-max) + (var(--gutter) * 2)); margin-inline: auto; padding-inline: var(--gutter); } .fg-container--wide { max-width: calc(var(--container-wide) + (var(--gutter) * 2)); } .fg-container--text { max-width: calc(var(--container-text) + (var(--gutter) * 2)); } /* Section bands. v2 separates sections with hairline rules and small tone shifts, not heavy alternating gradients. */ .fg-band { position: relative; padding-block: var(--section-y); background: var(--surface-base); } .fg-band--base { background: var(--surface-base); } .fg-band--raised { background: var(--surface-raised); } .fg-band--panel { background: var(--surface-panel); } .fg-band--tall { padding-block: var(--section-y-lg); } .fg-band--short { padding-block: var(--section-y-sm); } .fg-band--flush-top { padding-top: 0; } .fg-band--flush-bottom { padding-bottom: 0; } .fg-band--hairline { border-top: var(--border-hairline-w) solid var(--border-hairline); } /* Alternation utility. Explicit .fg-band--* classes always win, so a page can opt one band out without breaking the sequence. */ .fg-bands > .fg-band { border-top: var(--border-hairline-w) solid var(--border-hairline); } .fg-bands > .fg-band:first-child { border-top: 0; } .fg-bands > .fg-band:nth-of-type(even) { background: var(--surface-raised); } .fg-bands--invert > .fg-band:nth-of-type(odd) { background: var(--surface-raised); } .fg-bands--invert > .fg-band:nth-of-type(even) { background: var(--surface-base); } /* Standalone hairline rule. */ .fg-rule { height: var(--border-hairline-w); border: 0; margin: 0; background: var(--border-hairline); } .fg-rule--short { width: 32px; height: 1px; background: var(--accent); } .fg-grid { display: grid; gap: var(--grid-gap); } .fg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fg-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } @media (max-width: 1280px) { .fg-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1024px) { .fg-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .fg-grid--3, .fg-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .fg-grid--2, .fg-grid--3, .fg-grid--4, .fg-grid--6 { grid-template-columns: minmax(0, 1fr); } } /* Hairline-seam grid: cells butt together and the 1px gap reads as the rule. */ .fg-grid--seam { gap: var(--border-hairline-w); background: var(--border-hairline); } .fg-grid--seam > * { background: var(--surface-raised); } .fg-stack { display: flex; flex-direction: column; gap: var(--stack-gap); } .fg-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } /* -------------------------------------------------------------------------- 4. FOCUS · two-tone ring on every interactive element 2px white outline at a 2px offset, the offset gap filled by a dark shadow, and a 1px accent edge outside it. Precise, not chunky. `outline` is kept alongside box-shadow so forced-colors mode retains an indicator. -------------------------------------------------------------------------- */ :where(a, button, input, select, textarea, summary, [tabindex]):focus { outline: none; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible, .fg-focus-ring:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-inner); outline-offset: var(--focus-ring-offset); box-shadow: 0 0 0 var(--focus-ring-offset) var(--focus-ring-outer), 0 0 0 5px var(--focus-ring-halo); border-radius: 0; } @media (forced-colors: active) { :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid Highlight; outline-offset: 2px; } } .fg-skip-link { position: fixed; top: var(--space-3); left: var(--space-3); z-index: var(--z-skip); transform: translateY(calc(-100% - var(--space-9))); display: inline-flex; align-items: center; min-height: 40px; padding: var(--space-3) var(--space-5); background: var(--accent); color: var(--text-on-accent); /* 5.22:1 */ font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; text-decoration: none; transition: transform var(--dur-quick) var(--ease-out-expo); } .fg-skip-link:focus-visible { transform: translateY(0); } .fg-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 5. BUTTONS AND LINKS · sharp corners, compact -------------------------------------------------------------------------- */ .fg-btn { --btn-py: 12px; --btn-px: 26px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--btn-py) var(--btn-px); font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-semibold); line-height: 1; letter-spacing: var(--ls-btn); text-decoration: none; white-space: nowrap; border: var(--border-hairline-w) solid transparent; border-radius: 0; cursor: pointer; transition: var(--t-color), transform var(--dur-fast) var(--ease-out-quart); -webkit-appearance: none; appearance: none; } /* Primary. Near-black ink on the one orange. --text-on-accent on --accent 5.22:1 AA White on this fill computes 3.74:1 and is never used. HOVER RULE: the fill does NOT darken. Darkening it under a near-black label would drive the label contrast down, so hover is carried by a light outline and a 1px lift, and the measured 5.22:1 holds in every state. */ .fg-btn--primary { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); } .fg-btn--primary:hover { background: var(--accent); border-color: rgba(255, 255, 255, 0.72); color: var(--text-on-accent); transform: translateY(-1px); } .fg-btn--primary:active { transform: translateY(0); border-color: rgba(255, 255, 255, 0.9); } /* Secondary. Transparent with a functional 1px boundary. --border-ui carries the control edge at 3.36:1 worst case --text-primary label at 13.95:1 worst case */ .fg-btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--border-ui); } .fg-btn--secondary:hover { border-color: var(--border-strong); /* 4.79:1 worst case */ background: rgba(255, 255, 255, 0.035); transform: translateY(-1px); } .fg-btn--secondary:active { background: rgba(255, 255, 255, 0.07); transform: translateY(0); } /* Ghost. Text plus arrow, no chrome. Orange label: permitted on base, raised and panel; not on elevated. */ .fg-btn--ghost { padding-inline: 0; background: none; border-color: transparent; color: var(--accent); } .fg-btn--ghost:hover { color: var(--text-display); } .fg-btn--sm { --btn-py: 10px; --btn-px: 20px; font-size: var(--fs-xs); } /* OUT OF CONTRACT, AND DOWN TO ONE CALLER. This box draws 46px against the contract's --fg-btn-h of 40px, and the audit found it on the closing band of every redesigned family, so a primary and a secondary sitting side by side in a .fg-btn-group were 46, 40 and 32px against each other depending on which band they were in. The token has been taken off every closing band in the theme; the front page's hero pair is the one place still asking for it, and that file is under separate work. The declaration stays for that caller rather than being aliased to the standard box, because aliasing would move a page this pass does not own without its owner seeing the change. Removing ` fg-btn--lg` from those two lines is what retires the rule. */ .fg-btn--lg { --btn-py: 14px; --btn-px: 30px; font-size: var(--fs-body); } .fg-btn--block { width: 100%; } .fg-btn__arrow { width: 13px; height: 13px; flex: none; transition: transform var(--dur-quick) var(--ease-out-expo); } .fg-btn:hover .fg-btn__arrow { transform: translateX(3px); } .fg-btn-group { display: flex; flex-wrap: wrap; gap: var(--space-3); } .fg-btn-group--stack { max-width: 100%; } @media (max-width: 560px) { /* width:100% matters: inside a flex parent the group would otherwise size to the longest label's max-content width and push past the container. */ .fg-btn-group--stack { flex-direction: column; align-items: stretch; width: 100%; } .fg-btn-group--stack .fg-btn { width: 100%; white-space: normal; line-height: 1.3; text-align: center; } } /* Quiet link with an arrow that lights up. */ .fg-link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); padding-block: 4px; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-btn); color: var(--text-muted); /* 5.57:1 base */ text-decoration: none; transition: var(--t-color); } .fg-link-arrow svg { width: 13px; height: 13px; transition: transform var(--dur-quick) var(--ease-out-expo); } .fg-link-arrow:hover { color: var(--accent); } .fg-link-arrow:hover svg { transform: translateX(3px); } /* Inline body link. */ .fg-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: var(--t-color); } .fg-link:hover { color: var(--text-display); text-decoration-color: var(--accent); } /* -------------------------------------------------------------------------- 6. CARD · hairline panel, sharp corners, orange hover edge -------------------------------------------------------------------------- */ .fg-card { position: relative; display: flex; flex-direction: column; background: var(--surface-raised); border: var(--border-hairline-w) solid var(--border-hairline); border-radius: 0; overflow: hidden; transition: var(--t-color), transform var(--dur-base) var(--ease-out-expo); } .fg-card--flush { background: transparent; } .fg-card--panel { background: var(--surface-panel); } .fg-card__media { position: relative; } .fg-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: clamp(18px, 1rem + 0.8vw, 24px); flex: 1; } .fg-card__title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); text-transform: uppercase; color: var(--text-display); transition: var(--t-color); } /* Inter variant, for compact news and list cards. */ .fg-card__title--sm { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-small); line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--text-primary); } .fg-card__text { font-size: var(--fs-xs); line-height: 1.6; color: var(--text-muted); } .fg-card__footer { margin-top: auto; padding-top: var(--space-4); } /* Short accent rule under the card opener. It marks the head of a card without adding a full divider across it. */ .fg-card__rule { width: 20px; height: 1px; background: var(--accent); border: 0; margin: 0 0 var(--space-1); } /* Whole-card link. Hover raises the hairline to the brand edge and lays a 5% accent tint over the surface. card surface --surface-raised, tinted #191521 --text-display 14.87:1 · --text-muted 5.10:1 · --accent 4.79:1 The orange title on hover therefore clears AA. Cards must stay on --surface-base or --surface-raised: on --surface-panel the same tint puts an orange label at 4.48:1, which fails. */ .fg-card--link { cursor: pointer; } .fg-card--link:hover, .fg-card--link:focus-within { border-color: var(--border-accent); /* 4.98:1 on raised, clears 3:1 */ background-color: var(--surface-raised); background-image: linear-gradient(var(--accent-tint), var(--accent-tint)); transform: translateY(-2px); } .fg-card--link:hover .fg-card__title, .fg-card--link:focus-within .fg-card__title { color: var(--accent); } .fg-card--link .fg-card__title a { color: inherit; text-decoration: none; } /* Stretched hit area. The visible ring is drawn on the card, not the text. */ .fg-card--link .fg-card__title a::after { content: ""; position: absolute; inset: 0; } .fg-card--link:has(a:focus-visible) { outline: var(--focus-ring-width) solid var(--focus-ring-inner); outline-offset: var(--focus-ring-offset); box-shadow: 0 0 0 var(--focus-ring-offset) var(--focus-ring-outer), 0 0 0 5px var(--focus-ring-halo); } .fg-card--link .fg-card__title a:focus-visible { outline: none; box-shadow: none; } /* -------------------------------------------------------------------------- 7. CHIP, TAG BADGE -------------------------------------------------------------------------- */ /* Bordered, never filled. Hairline at white/0.14, 12px semibold label. */ .fg-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 12px; background: transparent; border: var(--border-hairline-w) solid var(--border-hairline-strong); border-radius: 0; font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); line-height: 1.2; letter-spacing: var(--ls-chip); color: var(--text-primary); /* 16.22:1 base, 13.95:1 elevated */ text-decoration: none; /* Keeps a chip its own width inside a column flex parent such as .fg-card__body, and top-aligns it inside a wrapped .fg-chip-row. */ align-self: flex-start; transition: var(--t-color); } a.fg-chip:hover, button.fg-chip:hover { border-color: var(--border-accent); /* clears 3:1 on every surface */ color: var(--accent); /* permitted on base / raised / panel */ } .fg-chip--accent { border-color: var(--border-accent); color: var(--accent); } .fg-chip--ghost { border-color: var(--border-hairline); color: var(--text-muted); } /* Selected filter state. Carries a glyph as well as colour. */ .fg-chip[aria-pressed="true"], .fg-chip--active { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); /* 5.22:1 */ } .fg-chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* Tag badge: 11px bold, 0.15em, uppercase. Filled with near-black ink. --text-on-accent on --accent 5.22:1 AA White on the fill computes 3.74:1 and is not used at this size. */ .fg-tag { display: inline-flex; align-items: center; padding: 5px 10px; background: var(--accent); color: var(--text-on-accent); font-family: var(--font-body); font-size: var(--fs-3xs); font-weight: var(--fw-bold); line-height: 1.2; letter-spacing: var(--ls-badge); text-transform: uppercase; text-decoration: none; border: var(--border-hairline-w) solid var(--accent); align-self: flex-start; } /* Quiet variant: hairline plus muted label. */ .fg-tag--muted { background: transparent; border-color: var(--border-hairline-strong); color: var(--text-muted); /* 5.57:1 base, 4.99:1 panel */ } /* Outline variant: orange label on the surface. PERMITTED on base (5.22), raised (4.98) and panel (4.68). FORBIDDEN on --surface-elevated (4.49). */ .fg-tag--outline { background: transparent; border-color: var(--border-accent); color: var(--accent); } /* -------------------------------------------------------------------------- 8. ICON IN A BORDERED SQUARE · the v2 icon pattern Thin-line glyph, 1.5-2px stroke, inside a 40px hairline square. -------------------------------------------------------------------------- */ .fg-icon-square { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; background: var(--surface-base); border: var(--border-hairline-w) solid var(--border-hairline-strong); color: var(--accent); /* icon stroke, 3:1 minimum, 4.49 worst */ transition: var(--t-color); } .fg-icon-square svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; } .fg-icon-square--sm { width: 28px; height: 28px; } .fg-icon-square--sm svg { width: 14px; height: 14px; } .fg-icon-square--accent { border-color: var(--border-accent); } /* Thin-line icon on its own. */ .fg-icon-line { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; color: var(--accent); } /* -------------------------------------------------------------------------- 9. IMAGE PLACEHOLDER · CSS only, no assets Dark navy well, faint hex lattice, a single orange trace, and a label chip that is always the topmost layer of the component. -------------------------------------------------------------------------- */ .fg-placeholder { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 0; background: radial-gradient(120% 90% at 78% 12%, rgba(227, 85, 48, 0.10) 0%, rgba(227, 85, 48, 0) 58%), linear-gradient(152deg, #1b2233 0%, #12172a 46%, #0e1220 100%); border: var(--border-hairline-w) solid var(--border-hairline); } /* Hex lattice. Decorative; the component's own aria-label carries meaning. */ .fg-placeholder::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60' viewBox='0 0 34.64 60'%3E%3Cpath d='M17.32 0 L0 10 L0 30 L17.32 40 L34.64 30 L34.64 10 Z M17.32 40 L17.32 60' fill='none' stroke='%237d89a3' stroke-width='1'/%3E%3C/svg%3E"); background-size: 34.64px 60px; opacity: 0.14; mask-image: radial-gradient(115% 110% at 50% 42%, #000 10%, rgba(0, 0, 0, 0.3) 72%, transparent 100%); -webkit-mask-image: radial-gradient(115% 110% at 50% 42%, #000 10%, rgba(0, 0, 0, 0.3) 72%, transparent 100%); pointer-events: none; } /* Two signal traces. */ .fg-placeholder::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(90deg, transparent 0 7%, rgba(227, 85, 48, 0.30) 7% 7.14%, transparent 7.14% 100%), linear-gradient(0deg, transparent 0 21%, rgba(125, 137, 163, 0.16) 21% 21.4%, transparent 21.4% 100%); mask-image: linear-gradient(115deg, #000 0%, rgba(0, 0, 0, 0.15) 62%, transparent 92%); -webkit-mask-image: linear-gradient(115deg, #000 0%, rgba(0, 0, 0, 0.15) 62%, transparent 92%); pointer-events: none; } /* Label chip. z-index 3 puts it above every layer of the component AND above a media-band scrim, which sits at z-index 1 in the band (fix: the label is never dimmed by a scrim). The chip paints its own 0.78 ink backing, so its contrast does not depend on what is behind it. Measured against the worst case, the chip laid over the lightest point the well can reach (#2f2733): chip backing #11121b --text-muted 5.31:1 · --accent 4.98:1 · --text-display 17.07:1 And over the thinnest media-band scrim stop (0.45) at that same point: chip backing #0e0f18 --text-muted 5.43:1 · --accent 5.09:1 · --text-display 17.47:1 */ .fg-placeholder__label { position: relative; z-index: 3; max-width: 74%; padding: 10px 16px; text-align: center; font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); line-height: 1.45; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); background: rgba(9, 12, 20, 0.78); border: var(--border-hairline-w) solid var(--border-hairline-strong); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .fg-placeholder__label b { display: block; color: var(--accent); font-weight: var(--fw-bold); letter-spacing: var(--ls-badge); margin-bottom: 3px; } .fg-placeholder--hero { aspect-ratio: 21 / 9; border: 0; } .fg-placeholder--wide { aspect-ratio: 21 / 9; } .fg-placeholder--square { aspect-ratio: 1 / 1; } .fg-placeholder--portrait { aspect-ratio: 4 / 5; } .fg-placeholder--card { aspect-ratio: 16 / 10; border: 0; border-bottom: var(--border-hairline-w) solid var(--border-hairline); } /* z-index:auto is deliberate: it keeps the fill from opening a stacking context, so the label above can rise past a sibling scrim. */ .fg-placeholder--fill { aspect-ratio: auto; height: 100%; position: absolute; inset: 0; z-index: auto; } /* -------------------------------------------------------------------------- 10. HEADER · utility bar + compact 56px row + dropdown cards -------------------------------------------------------------------------- */ /* padding-top lifts the row off the viewport edge; ::before and ::after resolve against the padding box, so the fill and scrim still reach y=0 and only the content moves. --header-offset in tokens.css counts it. */ .fg-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); padding-top: 6px; background: transparent; } /* Hero scrim. Taller than the header and fading BELOW it, so the alpha stays at or above 0.80 everywhere the header type sits while the visible effect is a soft vignette over the hero rather than a bar. Contrast math is on --header-scrim in tokens.css. */ .fg-header::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--header-scrim-h); z-index: -2; pointer-events: none; background: var(--header-scrim); transition: opacity var(--dur-base) var(--ease-standard); } /* Solid fill fades in on scroll and whenever a menu is open. Painted as a pseudo-element so the transition is a real cross-fade, not a snap. */ .fg-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--header-solid); opacity: 0; transition: opacity var(--dur-base) var(--ease-standard); } .fg-header.is-scrolled::before, .fg-header[data-scrolled="true"]::before, .fg-header[data-menu-open="true"]::before { opacity: 1; } .fg-header.is-scrolled::after, .fg-header[data-scrolled="true"]::after { opacity: 0; } .fg-header.is-scrolled, .fg-header[data-scrolled="true"], .fg-header[data-menu-open="true"] { backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); } /* THE PAGE'S TOP CLEARANCE, AND THE ONE PLACE ITS VALUE IS STATED. The header is position: fixed, so the first thing in the flow sits under it. This spacer is what a page puts there instead, and its height is --header-offset, the same token the header's own box is measured with, so the gap above a page's first band is settable in tokens.css and nowhere else. Changing --header-offset / --header-offset-mobile moves this spacer; note that the token has other consumers (the mobile nav's top, in-page anchor scroll-margin, the message strip below), so a change to the visible gap alone belongs on the height here rather than on the token. IT IS UNCONDITIONAL IN THE MARKUP. It used to be printed on {% if not page.pre_content %}, which reads as "unless the message strip is carrying the clearance instead" and is in fact always false, because the messages block always renders a hidden fallback div and the region is never empty. Every template now prints the spacer, and the one case where the strip does carry the clearance is handled in admin-context.css, on the presence of a message rather than on the presence of the region. */ .fg-header-offset { height: var(--header-offset); } /* --- Utility bar (desktop only) --- */ .fg-header__utility { border-bottom: var(--border-hairline-w) solid var(--border-hairline-faint); } .fg-header__utility-inner { width: 100%; max-width: calc(var(--container-max) + (var(--gutter) * 2)); margin-inline: auto; padding-inline: var(--gutter); height: var(--header-utility-h); display: flex; align-items: center; justify-content: flex-end; gap: var(--space-6); } /* 28px tall, so the hit area clears the 24px minimum. */ .fg-utility-link { display: inline-flex; align-items: center; gap: 6px; height: var(--header-utility-h); padding-inline: 2px; background: none; border: 0; font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-chip); color: var(--text-utility); /* 5.36:1 base */ text-decoration: none; cursor: pointer; transition: var(--t-color); } .fg-utility-link:hover { color: var(--text-display); } .fg-utility-link svg { width: 12px; height: 12px; flex: none; } /* --- Main row --- */ /* The header's bottom hairline lives here, not on .fg-header: a non-positioned child paints above the negative-z scrim layers, so the rule stays visible. */ .fg-header__inner { width: 100%; max-width: calc(var(--container-max) + (var(--gutter) * 2)); margin-inline: auto; padding-inline: var(--gutter); height: var(--header-h); display: flex; align-items: center; gap: clamp(12px, 0.3rem + 1.6vw, 32px); box-shadow: 0 1px 0 var(--border-hairline-faint); } .fg-header.is-scrolled .fg-header__inner, .fg-header[data-scrolled="true"] .fg-header__inner, .fg-header[data-menu-open="true"] .fg-header__inner { box-shadow: 0 1px 0 var(--border-hairline); } /* --- Wordmark: orange square + Barlow Condensed --- */ .fg-logo { display: inline-flex; align-items: center; gap: 10px; flex: none; text-decoration: none; } .fg-logo__mark { width: 20px; height: 20px; flex: none; background: var(--accent); } .fg-logo__word { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 15px; line-height: 1; letter-spacing: var(--ls-wordmark); text-transform: uppercase; color: var(--text-display); } /* Retained so any legacy split-wordmark markup still renders as plain text. */ .fg-logo__t { display: inline; } /* THE TARGET FLOOR ON THE HEADER WORDMARK. The link is inline-flex round a 15px image, so its box measured 144x15 in the header and 163x17 in the footer: the only recurring target on the site under 24px once the WCAG 2.2 exemptions are applied. Padding counts toward a target, and so does a min-height on a box that already centres its content, so the floor is set without moving anything: the image stays vertically centred, the header row is 56px and the logo box is 24, so no ancestor changes size. Advisory tier, a WCAG 2.2 addition rather than a 2.1 AA criterion. THE FOOTER COPY IS LEFT ALONE deliberately. It sits in a stacked brand block rather than a row, where a taller box would add space above the address, and the advisory finding names the header. */ .fg-header .fg-logo { min-height: 24px; } /* --- Desktop nav --- */ .fg-nav { display: flex; align-items: center; gap: 2px; } .fg-nav__item { position: relative; } .fg-nav__trigger, .fg-nav__link { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 17px 12px; background: none; border: 0; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1; letter-spacing: 0; color: var(--text-nav); /* 6.27:1 on the solid header */ text-decoration: none; cursor: pointer; transition: var(--t-color); } .fg-nav__trigger:hover, .fg-nav__link:hover, .fg-nav__trigger[aria-expanded="true"] { color: var(--text-display); } .fg-nav__caret { width: 9px; height: 9px; flex: none; opacity: 0.6; transition: transform var(--dur-quick) var(--ease-out-expo), opacity var(--dur-quick) linear; } .fg-nav__trigger[aria-expanded="true"] .fg-nav__caret { transform: rotate(180deg); opacity: 1; } /* Current-page marker. An orange rule as well as a brighter label, so the state is never colour-only. */ .fg-nav__trigger[aria-current="page"], .fg-nav__link[aria-current="page"] { color: var(--text-display); } .fg-nav__trigger[aria-current="page"]::after, .fg-nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px; background: var(--accent); } /* --- Dropdown card --- */ .fg-megamenu { position: absolute; top: 100%; left: -8px; z-index: var(--z-menu); padding-top: 4px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: var(--t-panel); pointer-events: none; } .fg-megamenu--end { left: auto; right: -8px; } .fg-megamenu[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; pointer-events: auto; } .fg-megamenu__panel { background: var(--surface-raised); border: var(--border-hairline-w) solid var(--border-hairline-strong); box-shadow: var(--shadow-menu); padding-block: var(--space-2); display: grid; } .fg-megamenu__panel--1col { grid-template-columns: var(--menu-col); } .fg-megamenu__panel--2col { grid-template-columns: repeat(2, var(--menu-col)); } /* Company: DOM order is the pinned spec order and grid-auto-flow: column with explicit rows fills top-to-bottom, so visual, tab and mobile-clone order all match the spec. */ .fg-megamenu__panel--cols { grid-template-columns: repeat(2, 204px); grid-template-rows: repeat(4, auto); grid-auto-flow: column; } .fg-megamenu__group-label { grid-column: 1 / -1; font-family: var(--font-body); font-size: var(--fs-3xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); /* 5.31:1 on the dropdown surface */ padding: var(--space-3) 20px var(--space-2); } .fg-megamenu__divider { grid-column: 1 / -1; height: 1px; background: var(--border-hairline); margin: var(--space-2) 20px; } .fg-menu-item { display: block; padding: 10px 20px; text-decoration: none; transition: background-color var(--dur-fast) var(--ease-standard); } .fg-menu-item__title { display: block; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1.35; color: var(--text-primary); /* 15.47:1 on the dropdown surface */ transition: var(--t-color); } .fg-menu-item__desc { display: block; margin-top: 2px; font-size: var(--fs-2xs); line-height: 1.4; color: var(--text-muted); /* 5.31:1 at rest, 4.86:1 on hover */ } /* Hover lifts the row by white/0.04 (#181b29) and turns the label orange. --accent on #181b29 4.56:1 AA The dropdown card must stay on --surface-raised for this to hold: the same hover over --surface-panel puts the orange label at 4.23:1, which fails. */ .fg-menu-item:hover, .fg-menu-item:focus-visible { background: rgba(255, 255, 255, 0.04); } .fg-menu-item:hover .fg-menu-item__title, .fg-menu-item:focus-visible .fg-menu-item__title { color: var(--accent); } .fg-menu-item--full { grid-column: 1 / -1; } .fg-menu-item--feature .fg-menu-item__title { color: var(--accent); } .fg-menu-item--feature:hover .fg-menu-item__title { color: var(--accent); } .fg-menu-item--compact { padding-block: 9px; } /* --- Two-destination product row. Each row in the Products menu answers both questions the portfolio gets asked: "tell me about this family" and "show me the parts". The title link takes the primary destination and keeps the full .fg-menu-item treatment; the search link under it is the subordinate second action, set at the description's size and colour so the row still has one obvious first click. Anchors cannot nest, so .fg-menu-row is a plain wrapper and both links are .fg-menu-item, which also keeps them inside the megamenu's arrow-key ring. Both rules below are two-class selectors, so source order decides: the --action rule comes second and wins on the properties it restates. --- */ .fg-menu-row { display: block; } .fg-menu-row > .fg-menu-item { padding-block: 10px 2px; } .fg-menu-row > .fg-menu-item--action { display: flex; align-items: center; gap: 7px; padding-block: 2px 9px; font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: var(--fw-medium); line-height: 1.4; color: var(--text-muted); /* 5.31:1 on the dropdown surface */ transition: var(--t-color); } .fg-menu-row > .fg-menu-item--action svg { width: 11px; height: 11px; flex: none; opacity: 0.8; } .fg-menu-row > .fg-menu-item--action:hover, .fg-menu-row > .fg-menu-item--action:focus-visible { color: var(--accent); } /* --- Right-hand utilities --- */ .fg-nav-utils { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; flex: none; } .fg-nav-utils .fg-nav__link { padding-inline: 4px; } /* CTA discipline. The page's own primary Request a Briefing is on screen at the top of a page; the header's copy of it would be the same offer twice in one viewport. So the header button waits for the scrolled state, which motion.js already sets on #fg-header past 12px. Visibility rather than display keeps the button's box in the row, so nothing beside it moves when it arrives. Below 1024px the breakpoint block hides it outright and this never applies. */ .fg-header .fg-nav-utils .fg-btn { opacity: 0; visibility: hidden; transition: var(--t-panel); } .fg-header.is-scrolled .fg-nav-utils .fg-btn, .fg-header[data-scrolled="true"] .fg-nav-utils .fg-btn { opacity: 1; visibility: visible; transition-delay: 0s; } /* 40px target. */ .fg-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: var(--border-hairline-w) solid transparent; color: var(--text-nav); cursor: pointer; transition: var(--t-color); } .fg-icon-btn:hover { color: var(--text-display); border-color: var(--border-ui); } .fg-icon-btn svg { width: 16px; height: 16px; } /* --- Header search. The trigger is a plain .fg-icon-btn and it never moves. The field is taken out of flow and anchored to the trigger's left edge, so opening it costs the row no width: the CTA beside it, the hamburger and the nav all stay exactly where they were, and the scrolled-state CTA rule above keeps working untouched. What the field covers instead is the tail of the nav, which is why it carries the dropdown card's own surface, hairline and shadow: over a transparent header on a hero it still has to read as a panel. Widths: the open width is a clamp so the field never crowds the nav at 1025px and never sprawls at 1440. The open transition restates --t-panel by hand rather than using it, because the field also needs a width leg and --t-panel spends its third slot on transform, which here is the static vertical centring. Same durations, same easing, same visibility-after-the-fade trick, same transition-delay: 0s on the open state that every panel in this kit uses to make the opening direction instant. --- */ .fg-header-search { position: relative; display: inline-flex; align-items: center; flex: none; } .fg-header-search__field { position: absolute; top: 50%; right: calc(100% + var(--space-2)); transform: translateY(-50%); z-index: var(--z-menu); display: flex; align-items: center; gap: var(--space-2); width: 0; padding: 0; overflow: hidden; background: var(--surface-raised); border: var(--border-hairline-w) solid var(--border-hairline-strong); box-shadow: var(--shadow-menu); opacity: 0; visibility: hidden; transition: width var(--dur-base) var(--ease-out-expo), padding var(--dur-base) var(--ease-out-expo), opacity var(--dur-base) var(--ease-out-expo), visibility 0s linear var(--dur-base); } .fg-header-search__field[data-open="true"] { width: clamp(200px, 20vw, 320px); padding: 0 12px; opacity: 1; visibility: visible; transition-delay: 0s; } .fg-header-search__glyph { width: 14px; height: 14px; flex: none; color: var(--text-muted); } .fg-header-search__input { flex: 1 1 auto; min-width: 0; height: 36px; background: none; border: 0; font-family: var(--font-body); font-size: var(--fs-xs); color: var(--text-primary); } .fg-header-search__input::placeholder { color: var(--text-muted); opacity: 1; } .fg-header-search__input:focus { outline: none; } /* The focus ring belongs on the card, not on a borderless input inside it. */ .fg-header-search__field:focus-within { border-color: var(--accent); } /* Chrome and Safari draw their own clear button; the field is decorative here. */ .fg-header-search__input::-webkit-search-decoration, .fg-header-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .fg-header-search__trigger[aria-expanded="true"] { color: var(--text-display); border-color: var(--border-ui); } /* --- Hamburger. 40px target, functional border. --- */ .fg-nav-toggle { display: none; align-items: center; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: var(--border-hairline-w) solid var(--border-ui); /* 3.90:1 */ cursor: pointer; flex-direction: column; } .fg-nav-toggle__bar { display: block; width: 17px; height: 1.5px; background: var(--text-display); transition: transform var(--dur-base) var(--ease-out-expo), opacity var(--dur-fast) linear; } .fg-nav-toggle[aria-expanded="true"] .fg-nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .fg-nav-toggle[aria-expanded="true"] .fg-nav-toggle__bar:nth-child(2) { opacity: 0; } .fg-nav-toggle[aria-expanded="true"] .fg-nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* --- Mobile panel --- */ .fg-mobile-nav { position: fixed; top: var(--header-offset-mobile); left: 0; right: 0; max-height: calc(100vh - var(--header-offset-mobile)); max-height: calc(100dvh - var(--header-offset-mobile)); overflow-y: auto; overscroll-behavior: contain; z-index: var(--z-menu); background: var(--surface-raised); border-top: var(--border-hairline-w) solid var(--border-hairline); padding: var(--space-3) var(--gutter) var(--space-10); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: var(--t-panel); display: none; } .fg-mobile-nav[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; } .fg-mobile-nav__section { border-bottom: var(--border-hairline-w) solid var(--border-hairline); } .fg-mobile-nav__trigger, .fg-mobile-nav__link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; padding: 15px 2px; background: none; border: 0; font-family: var(--font-body); font-size: var(--fs-3xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase; text-align: left; color: var(--text-muted); /* 5.31:1 on the panel surface */ text-decoration: none; cursor: pointer; } .fg-mobile-nav__link { color: var(--text-primary); } .fg-mobile-nav__trigger .fg-nav__caret { width: 11px; height: 11px; } .fg-mobile-nav__trigger[aria-expanded="true"] .fg-nav__caret { transform: rotate(180deg); } .fg-mobile-nav__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out-expo); } .fg-mobile-nav__panel > div { overflow: hidden; } .fg-mobile-nav__trigger[aria-expanded="true"] + .fg-mobile-nav__panel { grid-template-rows: 1fr; } .fg-mobile-nav__panel .fg-menu-item { padding: 9px 0 9px var(--space-3); } .fg-mobile-nav__panel .fg-menu-item__title { font-size: var(--fs-small); } /* The cloned product rows keep their pairing here too: title, then the quiet search link tucked under it. */ .fg-mobile-nav__panel .fg-menu-row > .fg-menu-item { padding: 9px 0 2px var(--space-3); } .fg-mobile-nav__panel .fg-menu-row > .fg-menu-item--action { padding: 2px 0 10px var(--space-3); font-size: var(--fs-xs); } .fg-mobile-nav__panel .fg-megamenu__group-label { padding-inline: var(--space-3); } .fg-mobile-nav__panel .fg-megamenu__divider { margin-inline: var(--space-3); } .fg-mobile-nav__panel > div > :last-child { margin-bottom: var(--space-3); } /* Search, first thing in the panel. Built by motion.js, like the utility bar and the button pair, so no page carries markup for it. Full width here rather than an expanding field: the panel has the room and a tap saved is worth more on a phone. */ .fg-mobile-nav__search { display: flex; align-items: center; gap: var(--space-2); padding: 0 12px; margin-bottom: var(--space-4); background: var(--surface-panel); border: var(--border-hairline-w) solid var(--border-hairline-strong); } .fg-mobile-nav__search:focus-within { border-color: var(--accent); } .fg-mobile-nav__search svg { width: 15px; height: 15px; flex: none; color: var(--text-muted); } .fg-mobile-nav__search-input { flex: 1 1 auto; min-width: 0; height: 44px; background: none; border: 0; font-family: var(--font-body); font-size: var(--fs-small); color: var(--text-primary); } .fg-mobile-nav__search-input::placeholder { color: var(--text-muted); opacity: 1; } .fg-mobile-nav__search-input:focus { outline: none; } .fg-mobile-nav__search-input::-webkit-search-decoration, .fg-mobile-nav__search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } /* Cloned utility-bar links. */ .fg-mobile-nav__utilbar { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); padding-block: var(--space-4); border-bottom: var(--border-hairline-w) solid var(--border-hairline); } .fg-mobile-nav__utilbar .fg-utility-link { height: auto; padding-block: 6px; font-size: var(--fs-small); } .fg-mobile-nav__utils { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); } /* --- Entrance cascade. The panel's own move is unchanged: --t-panel drops it 8px and fades it over --dur-base, on the same duration as the .fg-nav-backdrop fade below, so the two still arrive together. What this adds is layering. The five nav sections, the cloned utility bar and the button pair slide in from the left a beat apart, so the panel reads as a list assembling rather than a slab appearing. SEVEN SLOTS, 40ms APART, 200ms EACH. The last opens at 240ms and finishes at 440ms. The 10px slide runs in x while the panel runs in y, the same cross-axis rule the homepage stage drawer follows, which is what keeps the two moves legible as two moves. Slot 7 is a cap rather than a step: a header that grew an eighth section would otherwise walk the tail of the cascade past half a second, so everything from the seventh child on shares one delay. AN ANIMATION, NOT A TRANSITION. motion.js builds this panel's contents on the first open and appends them BEFORE it flips data-open, so on that open the children have no previous computed style and a transition-delay cascade would be skipped entirely. An animation runs whenever its selector starts matching, which covers the first open and every one after it identically. backwards fill holds the 0 percent state through the delay. THE CLOSE IS NOT STAGGERED. Everything hangs off [data-open="true"], so dropping the attribute takes the animation with it and the panel fades out with its contents composed and at full strength. The selector reads the markup contract stated in templates/page/_fg2-header.html.twig, which every page template includes: .fg-mobile-nav holds a single empty