/* ========================================================================== REL Research — site stylesheet Shared by all static pages and the /account/ app. Keep component classes generic (.btn, .card, .badge, .container, .section, forms, alerts) so the account app can reuse them without duplication. Design language — sharp editorial: square corners (no border-radius), hairline elevation (borders, never box-shadows), self-hosted display serif for h1/h2 and wordmarks. Keep new components on this system. Strict CSP: this file is the only stylesheet; no inline styles anywhere. ========================================================================== */ /* Self-hosted display serif (variable weight 400-600, latin subset). The ?v= stamp must stay identical to the preload in every page's , or the browser fetches the font twice. */ @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/source-serif-4-latin.woff2?v=20260708a") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Metric-adjusted local fallback: Georgia scaled to Source Serif 4's metrics (computed capsize-style from both fonts' hhea/xWidthAvg values), so the swap when the webfont arrives causes no visible reflow (CLS). */ @font-face { font-family: "Source Serif 4 Fallback"; src: local("Georgia"); size-adjust: 107.4471%; ascent-override: 96.4195%; descent-override: 31.1781%; line-gap-override: 0%; } /* -------------------------------------------------------------------------- 1. Design tokens -------------------------------------------------------------------------- */ :root { --color-primary: #2c3e50; --color-primary-dark: #233140; --color-secondary: #34495e; --color-accent: #d4af37; --color-bg: #f8f9fa; --color-surface: #ffffff; --color-border: #e1e4e8; --color-border-strong: #cfd6dd; --color-text: #1c2733; --color-text-muted: #5f6a72; /* AA (>=4.5:1) on both surface and bg tints */ --color-success: #28a745; --color-error: #dc3545; /* Derived tokens (readable gold for text on light backgrounds, tints) */ --color-accent-deep: #8a6d1d; --color-on-dark: #ffffff; --color-on-dark-muted: #c6d0d9; --tint-neutral-bg: #eef1f5; --tint-neutral-border: #d7dde5; --tint-gold-bg: #faf6e8; --tint-gold-border: #e8d9a8; --tint-success-bg: #e6f4ea; --tint-success-border: #bfe3c8; --tint-success-text: #1e7e34; --tint-error-bg: #fdecea; --tint-error-border: #f4c2c7; --tint-error-text: #b02a37; /* AA (>=4.5:1) on --tint-error-bg */ --font-stack: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-display: "Source Serif 4", "Source Serif 4 Fallback", Georgia, "Times New Roman", serif; --container-max: 72rem; } /* -------------------------------------------------------------------------- 2. Reset and base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* Sticky-footer frame: short pages keep the footer at the viewport bottom instead of leaving a page-background band beneath it. */ body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font-stack); font-size: 1rem; line-height: 1.6; color: var(--color-text); background: var(--color-bg); } main { flex: 1 0 auto; } img, svg { max-width: 100%; height: auto; vertical-align: middle; } h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0 0 1rem; } h1, h2, h3, h4 { color: var(--color-primary); line-height: 1.2; font-weight: 700; } /* Display serif for the two top heading levels only; h3 and below stay on the sans stack — the serif/sans contrast is the editorial signature. */ h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: normal; } h1 { font-size: clamp(2rem, 4.8vw, 3rem); } h2 { font-size: clamp(1.45rem, 3vw, 1.85rem); } h3 { font-size: 1.15rem; } a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--color-accent-deep); } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } hr { border: 0; border-top: 1px solid var(--color-border); margin: 2rem 0; } fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } /* -------------------------------------------------------------------------- 3. Layout -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: 1.25rem; } .container-narrow { max-width: 50rem; } .section { padding-block: clamp(3rem, 6vw, 4.5rem); } .section-surface { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .section-head { max-width: 46rem; margin-bottom: 2.25rem; } .section-head p { color: var(--color-text-muted); } /* Used on spans and, where the eyebrow is the section's only heading (the pricing panel), on an h2 — the font-family and line-height pins keep the h2 rendering identical to the spans (no serif, no tighter leading). */ .eyebrow { display: block; margin-bottom: 0.75rem; font-family: var(--font-stack); font-size: 0.78rem; font-weight: 700; line-height: 1.6; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-deep); } .accent-rule { width: 3rem; height: 2px; margin: 0 0 1.25rem; border: 0; background: var(--color-accent); } .text-muted { color: var(--color-text-muted); } .note { font-size: 0.875rem; color: var(--color-text-muted); } /* -------------------------------------------------------------------------- 4. Header and navigation -------------------------------------------------------------------------- */ /* Skip link: first focusable element on every page; visually hidden until keyboard focus, then a solid navy block above the sticky header. */ .skip-link { position: absolute; left: -999rem; top: 0; z-index: 300; background: var(--color-primary); color: var(--color-on-dark); font-weight: 600; padding: 0.7rem 1.4rem; text-decoration: none; } .skip-link:focus { left: 0; } .site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 100; } /* Stronger hairline once the page has scrolled (site.js toggles .is-scrolled on the root element), so the sticky header reads as lifted — no shadow. */ .is-scrolled .site-header { border-bottom-color: var(--color-border-strong); } /* Anchor targets scroll clear of the sticky header. Default covers the two-row wrapped header on narrow viewports; the >=968px block reduces it once the header is a single row. */ [id] { scroll-margin-top: 7.5rem; } .header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1.5rem; padding-block: 0.9rem; } .brand { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--color-primary); text-decoration: none; white-space: nowrap; } .brand:hover { color: var(--color-primary); } .brand-mark { width: 0.65rem; height: 0.65rem; background: var(--color-accent); flex: none; } .site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1.4rem; font-size: 0.92rem; } /* Compact "Products" summary link: shown only on narrow viewports (see the max-width: 639px block), hidden on desktop where the two product links show. */ .nav-products-summary { display: none; } .site-nav a { color: var(--color-secondary); font-weight: 500; text-decoration: none; } /* Text links get a >=44px-tall hit area (WCAG 2.2 target size) without changing the visual text size; the Sign in button is already large. Vertical padding only — the anchors are flex items of .site-nav, so the display-based show/hide toggles below must stay untouched. */ .site-nav a:not(.btn) { padding-block: 0.7rem; } .site-nav a:hover { color: var(--color-accent-deep); } .site-nav .btn { color: var(--color-on-dark); } /* -------------------------------------------------------------------------- 5. Hero (dark band) -------------------------------------------------------------------------- */ .hero { background: var(--color-primary); color: var(--color-on-dark); padding-block: clamp(3.5rem, 8vw, 6rem); } .hero .eyebrow { color: var(--color-accent); } .hero h1 { color: var(--color-on-dark); max-width: 24ch; line-height: 1.15; } .hero-sub { max-width: 58ch; font-size: 1.08rem; color: var(--color-on-dark-muted); margin-bottom: 2rem; } .hero-cta { display: flex; flex-wrap: wrap; gap: 0.85rem; } .hero :focus-visible { outline-color: var(--color-accent); } /* -------------------------------------------------------------------------- 6. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-block; padding: 0.7rem 1.4rem; border: 1px solid transparent; font: inherit; font-size: 0.95rem; font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .btn-primary { background: var(--color-primary); color: var(--color-on-dark); } .btn-primary:hover { background: var(--color-primary-dark); color: var(--color-on-dark); } .btn-outline { background: transparent; border-color: var(--color-primary); color: var(--color-primary); } .btn-outline:hover { background: var(--color-primary); color: var(--color-on-dark); } .btn-light { background: var(--color-surface); color: var(--color-primary); } .btn-light:hover { background: var(--tint-neutral-bg); color: var(--color-primary-dark); } .btn-outline-light { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: var(--color-on-dark); } .btn-outline-light:hover { border-color: var(--color-accent); color: var(--color-accent); } .btn-sm { padding: 0.45rem 0.95rem; font-size: 0.875rem; } .btn-block { display: block; width: 100%; } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: default; } /* -------------------------------------------------------------------------- 7. Cards and grids -------------------------------------------------------------------------- */ .card { background: var(--color-surface); border: 1px solid var(--color-border); padding: 1.75rem; } .card-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } .product-card { display: flex; flex-direction: column; border-top: 2px solid var(--color-accent); } .product-card h3 { font-size: 1.25rem; margin-bottom: 0.35rem; } .product-kicker { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.75rem; } .scope-list { list-style: none; margin: 0.75rem 0 1.5rem; padding: 0; } .scope-list li { position: relative; padding-left: 1.4rem; margin-bottom: 0.6rem; color: var(--color-secondary); font-size: 0.96rem; } .scope-list li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.55rem; height: 2px; background: var(--color-accent); } .price-line { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--color-border); } .price-line strong { color: var(--color-primary); font-size: 1.05rem; } /* -------------------------------------------------------------------------- 8. Process steps (ordered content only) -------------------------------------------------------------------------- */ .steps { list-style: none; margin: 0; padding: 0; max-width: 44rem; counter-reset: step; } .steps li { position: relative; padding: 0 0 1.9rem 3.5rem; counter-increment: step; } .steps li:last-child { padding-bottom: 0; } /* Bare editorial numeral ("01", "02", …) — no circle, no connector line. */ .steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: -0.35rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--color-accent-deep); } .steps h3 { font-size: 1.05rem; margin-bottom: 0.25rem; } .steps p { color: var(--color-text-muted); font-size: 0.95rem; margin-bottom: 0; } /* -------------------------------------------------------------------------- 9. Standards grid -------------------------------------------------------------------------- */ .standards { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } .standard { background: var(--color-surface); border: 1px solid var(--color-border); padding: 1.5rem; } .standard h3 { font-size: 1.02rem; margin-bottom: 0.45rem; } .standard p { font-size: 0.94rem; color: var(--color-text-muted); margin-bottom: 0; } /* -------------------------------------------------------------------------- 10. Positioning band ("what this is — and is not") -------------------------------------------------------------------------- */ .contrast-band { background: var(--color-primary-dark); color: var(--color-on-dark); padding-block: clamp(3rem, 6vw, 4.5rem); } .contrast-band h2 { color: var(--color-on-dark); } .contrast-band .eyebrow { color: var(--color-accent); } .contrast-band :focus-visible { outline-color: var(--color-accent); } .contrast-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-top: 2rem; } .contrast-col h3 { color: var(--color-on-dark); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(255, 255, 255, 0.18); } .contrast-col.is h3 { color: var(--color-accent); border-bottom-color: var(--color-accent); } .contrast-col ul { list-style: none; margin: 1rem 0 0; padding: 0; } .contrast-col li { position: relative; padding-left: 1.4rem; margin-bottom: 0.7rem; color: var(--color-on-dark-muted); } .contrast-col li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.55rem; height: 2px; background: var(--color-accent); } .contrast-col.not li::before { background: rgba(255, 255, 255, 0.45); } /* -------------------------------------------------------------------------- 11. Pricing -------------------------------------------------------------------------- */ .pricing-panel { max-width: 38rem; margin-inline: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-top: 2px solid var(--color-accent); padding: clamp(2rem, 5vw, 3rem); text-align: center; } .pricing-panel .accent-rule { margin-inline: auto; } .price-figure { display: block; font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 3rem); font-weight: 600; color: var(--color-primary); line-height: 1.1; } .price-unit { display: block; color: var(--color-text-muted); margin-bottom: 1.25rem; } /* -------------------------------------------------------------------------- 12. FAQ (native details/summary — no script needed) -------------------------------------------------------------------------- */ .faq { max-width: 46rem; } /* Hairline list, not boxes: items divided by rules, flush-left text. */ .faq-item { background: transparent; border: 0; border-bottom: 1px solid var(--color-border); margin-bottom: 0; } .faq-item:first-child { border-top: 1px solid var(--color-border); } .faq-item summary { list-style: none; cursor: pointer; padding: 1rem 3rem 1rem 0; font-weight: 600; color: var(--color-primary); position: relative; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); font-size: 1.2rem; font-weight: 400; color: var(--color-accent-deep); } .faq-item[open] summary::after { content: "\2212"; /* minus sign */ } .faq-body { padding: 0 1.25rem 1.1rem 0; color: var(--color-text-muted); font-size: 0.96rem; } .faq-body p { margin-bottom: 0.5rem; } /* -------------------------------------------------------------------------- 13. Forms and alerts -------------------------------------------------------------------------- */ .form-field { margin-bottom: 1.25rem; } .form-field label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.4rem; color: var(--color-primary); } input[type="text"], input[type="email"], select, textarea { width: 100%; padding: 0.65rem 0.75rem; font: inherit; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); } textarea { min-height: 7rem; resize: vertical; } .form-hint { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.45rem; margin-bottom: 0; } .checkbox-field { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.92rem; } .checkbox-field input { margin-top: 0.25rem; flex: none; } .alert { padding: 0.85rem 1rem; border: 1px solid; font-size: 0.95rem; margin-bottom: 1rem; } .alert-success { background: var(--tint-success-bg); border-color: var(--tint-success-border); color: var(--tint-success-text); } .alert-error { background: var(--tint-error-bg); border-color: var(--tint-error-border); color: var(--tint-error-text); } /* -------------------------------------------------------------------------- 14. Badges (status indicators — reused by the account app) -------------------------------------------------------------------------- */ .badge { display: inline-block; padding: 0.25em 0.6em; border: 1px solid transparent; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .badge-neutral { background: var(--tint-neutral-bg); border-color: var(--tint-neutral-border); color: var(--color-secondary); } .badge-accent { background: var(--tint-gold-bg); border-color: var(--tint-gold-border); color: var(--color-accent-deep); } .badge-success { background: var(--tint-success-bg); border-color: var(--tint-success-border); color: var(--tint-success-text); } .badge-muted { background: var(--color-bg); border-color: var(--color-border); color: var(--color-text-muted); } .badge-error { background: var(--tint-error-bg); border-color: var(--tint-error-border); color: var(--color-error); } /* -------------------------------------------------------------------------- 15. Tables (degrade to horizontal scroll inside .table-wrap) -------------------------------------------------------------------------- */ .table-wrap { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .table th, .table td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; } .table th { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); border-bottom: 2px solid var(--color-primary); } /* -------------------------------------------------------------------------- 16. Page head (interior pages) and prose (legal / product detail) -------------------------------------------------------------------------- */ .page-head { background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding-block: clamp(2.5rem, 5vw, 3.5rem); } .page-head p { max-width: 56ch; color: var(--color-text-muted); margin-bottom: 0; } .page-head .lede { font-size: 1.05rem; } .prose { /* The ch unit measures the "0" glyph, wider than the average letter, so 58ch yields a real measure of ~70-75 characters per line. */ max-width: 58ch; } .prose h2 { font-size: 1.3rem; margin: 2.25rem 0 0.75rem; } .prose h3 { font-size: 1.05rem; margin: 1.5rem 0 0.5rem; } .prose ul, .prose ol { padding-left: 1.35rem; } .prose li { margin-bottom: 0.4rem; } /* Gold-dash bullets for prose lists that sit beside dash-marked components (product-page methodology sections); legal prose keeps plain markers. */ .prose ul.dash-list { list-style: none; padding-left: 0; } .prose ul.dash-list li { position: relative; padding-left: 1.4rem; margin-bottom: 0.6rem; } .prose ul.dash-list li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.55rem; height: 2px; background: var(--color-accent); } .version-tag { font-size: 0.85rem; color: var(--color-text-muted); } /* Numbered deliverable outline (mirrors the report's actual sections) */ .toc { list-style: none; margin: 0; padding: 0; counter-reset: toc; } .toc > li { counter-increment: toc; position: relative; padding: 1.5rem 1.5rem 1.5rem 4.25rem; background: var(--color-surface); border: 1px solid var(--color-border); margin-bottom: 0.85rem; } .toc > li::before { content: counter(toc, decimal-leading-zero); position: absolute; left: 1.4rem; top: 1.55rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; line-height: 1; /* aligns the serif numeral baseline with the h3 title */ color: var(--color-accent-deep); } .toc h3 { font-size: 1.08rem; margin-bottom: 0.4rem; } .toc p { color: var(--color-text-muted); font-size: 0.95rem; margin-bottom: 0; } /* Nested lists share the gold-dash marker language of .scope-list. */ .toc ul { list-style: none; margin: 0.5rem 0 0; padding-left: 0; color: var(--color-text-muted); font-size: 0.95rem; } .toc ul li { position: relative; padding-left: 1.4rem; margin-bottom: 0.3rem; } .toc ul li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.55rem; height: 2px; background: var(--color-accent); } /* -------------------------------------------------------------------------- 17. Auth pages (sign-in / verify) -------------------------------------------------------------------------- */ .auth-main { display: flex; justify-content: center; align-items: flex-start; /* keep the card its natural height when main grows */ padding: clamp(3rem, 8vw, 5.5rem) 1.25rem; } .auth-card { width: 100%; max-width: 27rem; background: var(--color-surface); border: 1px solid var(--color-border); border-top: 2px solid var(--color-accent); padding: 2.25rem; } .auth-card h1 { font-size: 1.45rem; margin-bottom: 0.5rem; } .auth-card > p { color: var(--color-text-muted); font-size: 0.95rem; } /* Tabbed sign-in / sign-up switcher. */ .auth-tabs { display: flex; gap: 0.25rem; margin: 1.5rem 0 1.25rem; border-bottom: 1px solid var(--color-border); } .auth-tab { flex: 1 1 0; appearance: none; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0.65rem 0.5rem; font: inherit; font-weight: 600; font-size: 0.95rem; color: var(--color-text-muted); cursor: pointer; } .auth-tab:hover { color: var(--color-primary); } .auth-tab[aria-selected="true"] { color: var(--color-primary); border-bottom-color: var(--color-accent); } .auth-tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Keep both tab labels on a single line on narrow phones. */ @media (max-width: 419px) { .auth-card { padding: 1.75rem 1.25rem; } .auth-tab { padding-inline: 0.25rem; font-size: 0.9rem; } } .auth-panel { margin-top: 0.25rem; } /* Inline text buttons ("Create one" / "Sign in") inside hints. */ .link-button { appearance: none; background: none; border: none; padding: 0; font: inherit; color: var(--color-primary); font-weight: 600; text-decoration: underline; cursor: pointer; } .link-button:hover { color: var(--color-accent-deep); } .link-button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Field-level validation error, shown beneath the offending input. */ .field-error { color: var(--color-error); font-size: 0.85rem; margin-top: 0.4rem; margin-bottom: 0; } input[aria-invalid="true"] { border-color: var(--color-error); } input[aria-invalid="true"]:focus-visible { outline-color: var(--color-error); border-color: var(--color-error); } /* Cross-device confirmation code: the code shown on the device that opened the link, and the matching entry field on the device that started the sign-in. */ .xdev-code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 2rem; font-weight: 700; letter-spacing: 0.28em; text-align: center; color: var(--color-primary); margin: 0.75rem 0 0.5rem; } .xdev-code-entry { margin-top: 1rem; } .xdev-code-input { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 1.5rem; letter-spacing: 0.28em; text-align: center; margin: 0.4rem 0 0.75rem; } .optional-mark { font-weight: 400; color: var(--color-text-muted); font-size: 0.85em; } #auth-success:focus { outline: none; } /* -------------------------------------------------------------------------- 18. CTA panel (product pages) -------------------------------------------------------------------------- */ .cta-panel { background: var(--color-primary); color: var(--color-on-dark); padding: clamp(2rem, 5vw, 2.75rem); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.25rem; } .cta-panel h2 { color: var(--color-on-dark); margin-bottom: 0.35rem; } .cta-panel p { color: var(--color-on-dark-muted); margin-bottom: 0; max-width: 48ch; } .cta-panel :focus-visible { outline-color: var(--color-accent); } /* -------------------------------------------------------------------------- 19. Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--color-primary-dark); color: var(--color-on-dark-muted); padding: 3.25rem 0 2rem; font-size: 0.92rem; } .site-footer a { color: #d5dbe1; text-decoration: none; } .site-footer a:hover { color: var(--color-accent); } .site-footer :focus-visible { outline-color: var(--color-accent); } .footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; } .footer-brand p { max-width: 34rem; color: #9aa6b1; } .footer-wordmark { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--color-on-dark); font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; margin-bottom: 0.75rem; } .footer-heading { color: var(--color-on-dark); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.9rem; } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { margin-bottom: 0.55rem; } /* Keep the contact address on one line — no mid-domain wrap. */ a[href^="mailto:"] { white-space: nowrap; } .footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.85rem; color: #9aa6b1; } .footer-legal p { margin: 0; } /* -------------------------------------------------------------------------- 20. Error pages -------------------------------------------------------------------------- */ .error-main { display: flex; justify-content: center; padding: clamp(4rem, 12vw, 7rem) 1.25rem; text-align: center; } .error-card { max-width: 30rem; } .error-code { display: block; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-deep); margin-bottom: 0.75rem; } /* -------------------------------------------------------------------------- 21. Utilities -------------------------------------------------------------------------- */ .hidden { display: none !important; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mb-0 { margin-bottom: 0; } /* -------------------------------------------------------------------------- 22. Responsive breakpoints (~640px, ~968px) -------------------------------------------------------------------------- */ @media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } .standards { grid-template-columns: repeat(2, 1fr); } .contrast-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem; } .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 968px) { /* Single-row header: less anchor clearance needed. */ [id] { scroll-margin-top: 6rem; } /* Six-track grid so a five-card set lays out 3 + 2 with no empty cell. */ .standards { grid-template-columns: repeat(6, 1fr); } .standard { grid-column: span 2; } .standard:nth-child(4):nth-last-child(2), .standard:nth-child(5):last-child { grid-column: span 3; } .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; } } @media (max-width: 639px) { .site-nav { gap: 0.5rem 1rem; font-size: 0.88rem; } .site-nav .nav-product-link { display: none; } .site-nav .nav-products-summary { display: inline-flex; align-items: center; } .header-inner { justify-content: center; } } /* -------------------------------------------------------------------------- 23. Cookie consent banner (rendered by assets/js/site.js) Slim, non-blocking bottom bar. Collapsed it offers Reject / Only necessary plus a "More options" disclosure; expanded it reveals a per-category panel and Save / Accept all. -------------------------------------------------------------------------- */ .cookie-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; /* above the sticky header */ background: var(--color-surface); border-top: 2px solid var(--color-accent); /* gold system-bar line, no shadow */ animation: cookie-rise 0.25s ease; } @keyframes cookie-rise { from { transform: translateY(100%); } to { transform: translateY(0); } } .cookie-consent__inner { max-width: var(--container-max); margin-inline: auto; padding: 1rem 1.25rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1.5rem; } .cookie-consent__body { flex: 1 1 20rem; min-width: 0; } .cookie-consent__text { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--color-text-muted); } .cookie-consent__text a { color: var(--color-primary); font-weight: 600; white-space: nowrap; } .cookie-consent__panel { display: none; margin-top: 0.85rem; padding-top: 0.6rem; border-top: 1px solid var(--color-border); } .cookie-consent.is-expanded .cookie-consent__panel { display: block; } .cookie-consent__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 26rem; padding: 0.4rem 0; font-size: 0.9rem; } .cookie-consent__row-label { color: var(--color-text); font-weight: 500; } .cookie-consent__always { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); } .cookie-consent__toggle { width: 1.05rem; height: 1.05rem; flex: none; accent-color: var(--color-primary); } .cookie-consent__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; flex: none; } /* Compact chevron toggle: sits to the right of the quick-choice buttons in both states and shares their height. Icon-only ("More options" is on the aria-label / title). */ .cookie-consent__expand { appearance: none; display: inline-flex; align-items: center; justify-content: center; align-self: stretch; background: none; border: 1px solid var(--color-primary); padding: 0 0.6rem; font: inherit; color: var(--color-primary); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .cookie-consent__expand::after { content: "\25be"; /* down triangle */ font-size: 0.8rem; line-height: 1; } .cookie-consent.is-expanded .cookie-consent__expand::after { content: "\25b4"; /* up triangle */ } .cookie-consent__expand:hover { background: var(--color-primary); color: var(--color-on-dark); } /* Reject and the chevron toggle stay put in both states. Collapsed shows Only necessary; expanded swaps it for Save choices + Accept all and reveals the per-category panel. */ .cookie-consent__save, .cookie-consent__acceptall { display: none; } .cookie-consent.is-expanded .cookie-consent__save, .cookie-consent.is-expanded .cookie-consent__acceptall { display: inline-block; } .cookie-consent.is-expanded .cookie-consent__only { display: none; } @media (max-width: 639px) { .cookie-consent__inner { padding: 0.75rem 1rem; gap: 0.6rem 1rem; } .cookie-consent__text { font-size: 0.82rem; } .cookie-consent__actions { width: 100%; } /* Quick-choice buttons share the row; the chevron stays compact on the right. */ .cookie-consent__actions .btn { flex: 1 1 auto; } /* Collapsed the chevron trails the two buttons; expanded it wraps to a second row, where margin-left:auto keeps it aligned under Accept all. */ .cookie-consent__expand { flex: 0 0 auto; margin-left: auto; } } /* -------------------------------------------------------------------------- 24. Motion and print -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; } } @media print { body { background: #fff; color: #000; } .site-header, .site-nav, .btn, .hero-cta, .footer-grid, .cta-panel { display: none !important; } .hero, .contrast-band, .site-footer { background: none; color: #000; padding-block: 1rem; } .hero h1, .contrast-band h2, .contrast-col h3, .contrast-col li { color: #000; } .section { padding-block: 1.25rem; } a { color: #000; } .faq-item { border: 0; } }