/* ========================================================================== Inclusive AI Strategies — brand.css The single shared stylesheet loaded by the static HTML site, the WordPress blog (news.inclusiveaistrategies.com), and the Moodle learning area (/learn/ via Boost Union's Additional CSS URL setting). Canonical URL when deployed: https://inclusiveaistrategies.com/assets/brand.css Single-source-of-truth notes: - The primary header CTA label and URL live in partials/header.html. Change them there; they propagate to every page via the partial-stitch build step. Do not duplicate the CTA markup elsewhere. - The secondary in-body CTA ("Book a Consultation") URL is written into index.html, about.html, services.html, and resources.html only. Keep a single reference per page; do not sprinkle copies. Contrast pass (WCAG 2.2 AA target, verified by hand; re-verify with a tool before ship): #2d2d2d on #ffffff ........ 12.6:1 AAA #2e4e42 on #ffffff ......... 9.8:1 AAA #2e4e42 on #D1E4DD ......... 7.9:1 AAA (primary-on-sage — the pair the handoff flagged) #ffffff on #2e4e42 ......... 9.8:1 AAA (button primary) #a6670e on #ffffff ......... 5.3:1 AA normal / AAA large #ffffff on #a6670e ......... 5.3:1 AA normal / AAA large Burnt orange is safe as a button background with white text or as large-text accents. Avoid using it as small body text on light surfaces. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Fonts — Atkinson Hyperlegible via Google Fonts Loaded in each page's via preconnect + stylesheet link. Google Fonts serves WOFF2 automatically from their CDN. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 2. Design tokens Copied verbatim from 03_claude_code_handoff.md. These are the canonical brand values — do not override them in page-level styles. -------------------------------------------------------------------------- */ :root { /* Brand */ --primary: #2e4e42; --primary-dark: #1a3a2e; --primary-light: #D1E4DD; --accent-warm: #a6670e; --secondary: #636B73; --green-gray: #484f4c; /* Surfaces */ --bg: #f5faf8; --bg-light: #F2F7F5; --bg-white: #ffffff; --bg-grad: linear-gradient(135deg, #f7fcfa 0%, #e6f0ec 100%); --tint-green: #D1E4DD; --tint-green-light: #E8F0EC; --tint-warm: #F5F0E8; --tint-cool: #E8ECF0; /* Text */ --text: #0b0b0b; --text-body: #2d2d2d; --text-primary: #1a1a1a; --text-secondary: #484f4c; --text-muted: #636B73; /* Status */ --color-success: #2e7d32; --color-success-bg: #e8f5e9; --color-error: #c62828; --color-error-bg: #ffebee; --color-warning: #e65100; --color-warning-bg: #fff3e0; --color-info: #0277bd; --color-info-bg: #e1f5fe; /* Focus */ --ring: #2e4e42; /* Typography */ --font-family: "Atkinson Hyperlegible", Arial, Helvetica, sans-serif; --font-mono: "Atkinson Hyperlegible", Arial, Helvetica, sans-serif; /* 2026-06-07: Atkinson by default for all branded content (was Courier New) */ --line-height: 1.6; --line-height-tight: 1.3; /* Type scale */ --text-xs: 0.8rem; --text-sm: 0.9rem; --text-base: 1rem; --text-lg: 1.15rem; --text-xl: 1.35rem; --text-2xl: 1.65rem; --text-3xl: 2rem; --text-display: 2.5rem; /* Spacing */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 20px; --space-2xl: 28px; --space-3xl: 40px; --space-4xl: 64px; /* Borders, radius, shadows */ --border-radius: 6px; --border-radius-sm: 4px; --border-radius-pill: 20px; --border-subtle: 1px solid rgba(46, 78, 66, 0.12); --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 2px 8px rgba(0,0,0,0.10); --shadow-lg: 0 8px 24px rgba(0,0,0,0.12); /* Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; /* Layout */ --content-max: 1120px; --reading-max: 70ch; } /* -------------------------------------------------------------------------- 3. Reset / normalize (minimal, opinionated) -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } img, picture, svg, video { max-width: 100%; display: block; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } hr { border: 0; border-top: var(--border-subtle); margin: var(--space-3xl) 0; } /* -------------------------------------------------------------------------- 4. Base typography -------------------------------------------------------------------------- */ body { font-family: var(--font-family); font-size: var(--text-base); line-height: var(--line-height); color: var(--text-body); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { color: var(--text-primary); line-height: var(--line-height-tight); font-weight: 700; } h1 { font-size: var(--text-display); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); } h6 { font-size: var(--text-base); text-transform: uppercase; letter-spacing: 0.04em; } p { max-width: var(--reading-max); } a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 0.15em; transition: color var(--transition-fast); } a:hover { color: var(--primary-dark); } strong { font-weight: 700; } em { font-style: italic; } code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.95em; } /* -------------------------------------------------------------------------- 5. Accessibility helpers -------------------------------------------------------------------------- */ /* Visually hide but keep for screen readers. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip link — first focusable element on every page. Invisible until focused, then lands in the top-left with a high-contrast panel the user can activate to jump to main. */ .skip-link { position: absolute; top: var(--space-sm); left: var(--space-sm); z-index: 1000; padding: var(--space-sm) var(--space-lg); background: var(--primary); color: var(--bg-white); border-radius: var(--border-radius); text-decoration: none; font-weight: 700; transform: translateY(-200%); transition: transform var(--transition-fast); } .skip-link:focus { transform: translateY(0); outline: 2px solid var(--bg-white); outline-offset: 2px; } .skip-link:hover { color: var(--bg-white); background: var(--primary-dark); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 2px; } /* Global focus ring — WCAG 2.2 requires non-obscured, visible focus indicators. 2px solid with 2px offset is readable on every brand surface. */ :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--border-radius-sm); } :focus:not(:focus-visible) { outline: none; } /* Dark surfaces: re-scope the focus ring so it stays visible against the --primary background. Inherits to every focus-visible descendant. */ .hero, .site-footer { --ring: var(--bg-white); } /* -------------------------------------------------------------------------- 6. Layout primitives -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-xl); } .section { padding-block: var(--space-4xl); } .section--tint { background: var(--tint-green-light); } .section--warm { background: var(--tint-warm); } .section--cool { background: var(--tint-cool); } .section-header { max-width: var(--reading-max); margin-bottom: var(--space-3xl); } .eyebrow { display: inline-block; font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); margin-bottom: var(--space-md); } .intro { font-size: var(--text-lg); color: var(--text-secondary); margin-top: var(--space-lg); max-width: var(--reading-max); } .stack > * + * { margin-top: var(--space-lg); } .stack-lg > * + * { margin-top: var(--space-2xl); } /* -------------------------------------------------------------------------- 7. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-md) var(--space-xl); font-size: var(--text-base); font-weight: 700; line-height: 1.2; border-radius: var(--border-radius); text-decoration: none; border: 2px solid transparent; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); min-height: 44px; /* WCAG 2.2 target size for pointer targets */ } .btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; } .btn--primary { background: var(--primary); color: var(--bg-white); border-color: var(--primary); } .btn--primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--bg-white); } .btn--secondary { background: transparent; color: var(--primary); border-color: var(--primary); } .btn--secondary:hover { background: var(--primary); color: var(--bg-white); } .btn--accent { background: var(--accent-warm); color: var(--bg-white); border-color: var(--accent-warm); } .btn--accent:hover { background: #8a5609; /* hand-darkened #a6670e for hover contrast */ border-color: #8a5609; color: var(--bg-white); } .btn--ghost { background: transparent; color: var(--primary); border-color: transparent; } .btn--ghost:hover { background: var(--tint-green); } .btn--lg { font-size: var(--text-lg); padding: var(--space-lg) var(--space-2xl); } /* -------------------------------------------------------------------------- 8. Site header + navigation -------------------------------------------------------------------------- */ .site-header { background: var(--bg-white); border-bottom: var(--border-subtle); position: sticky; top: 0; z-index: 100; } .site-header__inner { display: flex; align-items: center; gap: var(--space-xl); padding-block: var(--space-lg); } .brand-wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--text-xl); font-weight: 700; color: var(--primary); text-decoration: none; white-space: nowrap; line-height: 1.2; } .brand-logo { width: 36px; height: 36px; border-radius: var(--border-radius-sm); } .brand-wordmark:hover { color: var(--primary-dark); } /* Hamburger — hidden on desktop, visible on mobile */ .nav-toggle { display: none; margin-left: auto; padding: var(--space-sm) var(--space-md); border-radius: var(--border-radius-sm); color: var(--primary); min-height: 44px; min-width: 44px; align-items: center; justify-content: center; } .nav-toggle:hover { background: var(--tint-green); } .nav-toggle__icon { display: inline-block; width: 22px; height: 2px; background: currentColor; position: relative; } .nav-toggle__icon::before, .nav-toggle__icon::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; } .nav-toggle__icon::before { top: -7px; } .nav-toggle__icon::after { top: 7px; } .primary-nav { display: flex; align-items: center; gap: var(--space-xl); margin-left: auto; } .primary-nav__list { display: flex; align-items: center; gap: var(--space-lg); list-style: none; padding: 0; margin: 0; } .primary-nav__link { color: var(--text-primary); text-decoration: none; font-weight: 400; padding: var(--space-sm) var(--space-xs); border-bottom: 2px solid transparent; transition: border-color var(--transition-fast), color var(--transition-fast); } .primary-nav__link:hover { color: var(--primary); border-bottom-color: var(--primary); } .primary-nav__link[aria-current="page"] { color: var(--primary); font-weight: 700; border-bottom-color: var(--primary); } .primary-nav__cta { margin-left: var(--space-md); } /* -------------------------------------------------------------------------- 9. Mobile nav -------------------------------------------------------------------------- */ @media (max-width: 960px) { .nav-toggle { display: inline-flex; } .site-header__inner { gap: var(--space-md); } .brand-wordmark { font-size: var(--text-lg); min-width: 0; } .brand-logo { width: 32px; height: 32px; } .primary-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-white); border-bottom: var(--border-subtle); box-shadow: var(--shadow-md); flex-direction: column; align-items: stretch; gap: 0; margin-left: 0; padding: var(--space-lg) 0; display: none; } .primary-nav.is-open { display: flex; } .primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; } .primary-nav__list li { width: 100%; } .primary-nav__link { display: block; padding: var(--space-lg) var(--space-xl); border-bottom: 1px solid rgba(46, 78, 66, 0.08); } .primary-nav__link[aria-current="page"] { background: var(--tint-green-light); } .primary-nav__cta { margin: var(--space-lg) var(--space-xl) 0; } } /* -------------------------------------------------------------------------- 10. Hero -------------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; isolation: isolate; background: var(--primary) url("../images/abstract_flowing_shapes.png") center / cover no-repeat; padding-block: var(--space-4xl); color: var(--bg-white); } .hero__ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 72% 38%, rgba(148, 214, 148, 0.12), transparent 31%), linear-gradient(110deg, rgba(255, 230, 151, 0.07), transparent 38% 64%, rgba(255, 230, 151, 0.06)); opacity: 0.72; mix-blend-mode: screen; } .hero__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; mix-blend-mode: screen; } @media (prefers-reduced-motion: reduce) { .hero__lines { display: none; } } /* Mobile fallback: iOS Safari struggles to composite mix-blend-mode + backdrop-filter + the canvas animation together, which can leave the page stuck on the dark green background with broken scrolling. Disable the heavy layers and shrink the hero so it doesn't swallow the viewport. */ @media (max-width: 768px) { .hero__lines, .hero__ambient { display: none; } .hero { background: var(--primary); padding-block: var(--space-xl); overflow: visible; isolation: auto; position: static; } .hero__inner { gap: var(--space-lg); } .hero__content { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(30, 58, 46, 0.92); padding: var(--space-lg) var(--space-xl); } .hero__headline { font-size: clamp(1.5rem, 6vw, 2rem); } .hero__lead { font-size: var(--text-base); } .hero__actions { gap: var(--space-md); margin-top: var(--space-sm); } .hero .btn--lg { width: 100%; } } .hero__inner { position: relative; z-index: 2; display: grid; gap: var(--space-2xl); max-width: 820px; } .hero__content { background: rgba(30, 58, 46, 0.75); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: var(--border-radius); padding: var(--space-2xl) var(--space-3xl); } .hero__headline { font-size: clamp(2rem, 4vw + 1rem, 3.25rem); line-height: 1.15; color: var(--bg-white); } .hero__lead { font-size: var(--text-xl); color: rgba(255, 255, 255, 0.9); max-width: var(--reading-max); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-md); } .hero .btn--primary { background: var(--bg-white); color: var(--primary); border-color: var(--bg-white); } .hero .btn--primary:hover { background: var(--tint-green); border-color: var(--tint-green); color: var(--primary-dark); } .hero .btn--secondary { background: transparent; color: var(--bg-white); border-color: var(--bg-white); } .hero .btn--secondary:hover { background: rgba(255, 255, 255, 0.15); } .hero__wordmark-tm { /* Kept small so the ™ is a mark, not a shout. */ font-size: 0.5em; vertical-align: super; line-height: 0; } /* -------------------------------------------------------------------------- 11. Cards -------------------------------------------------------------------------- */ .card-grid { display: grid; gap: var(--space-2xl); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .card { background: var(--bg-white); border: var(--border-subtle); border-radius: var(--border-radius); padding: var(--space-2xl); display: flex; flex-direction: column; gap: var(--space-md); transition: box-shadow var(--transition-base), transform var(--transition-base); } .card:hover { box-shadow: var(--shadow-md); } .card__title { font-size: var(--text-xl); color: var(--primary); margin: 0; } .card__body { color: var(--text-body); flex-grow: 1; } .card__icon { width: 100%; max-width: 200px; height: auto; object-fit: contain; border-radius: var(--border-radius); margin-inline: auto; } .card--inline { flex-direction: row; align-items: center; gap: var(--space-md); } .card--inline .card__icon { width: 56px; max-width: 56px; flex: 0 0 auto; margin-inline: 0; } .card--inline .card__icon--lg { width: 112px; max-width: 112px; } .card__link { margin-top: var(--space-md); display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 700; color: var(--primary); text-decoration: none; } .card__link::after { content: "\2192"; /* → */ transition: transform var(--transition-fast); } .card__link:hover { text-decoration: underline; } .card__link:hover::after { transform: translateX(3px); } .card__cite { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--text-muted); font-style: normal; } /* -------------------------------------------------------------------------- 12. Callouts / alerts -------------------------------------------------------------------------- */ .callout { background: var(--tint-green); border-left: 4px solid var(--primary); padding: var(--space-2xl); border-radius: var(--border-radius); } .callout--warm { background: var(--tint-warm); border-left-color: var(--accent-warm); } .alert { padding: var(--space-lg); border-radius: var(--border-radius); border-left: 4px solid transparent; } .alert--info { background: var(--color-info-bg); border-color: var(--color-info); } .alert--success { background: var(--color-success-bg); border-color: var(--color-success); } .alert--warning { background: var(--color-warning-bg); border-color: var(--color-warning); } .alert--error { background: var(--color-error-bg); border-color: var(--color-error); } /* -------------------------------------------------------------------------- 13. Forms -------------------------------------------------------------------------- */ .form-field { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-lg); } .form-field label { font-weight: 700; color: var(--text-primary); } .form-field__hint { font-size: var(--text-sm); color: var(--text-muted); } .form-field input[type="text"], .form-field input[type="email"], .form-field input[type="tel"], .form-field input[type="url"], .form-field textarea, .form-field select { padding: var(--space-md); border: 1px solid var(--secondary); border-radius: var(--border-radius); background: var(--bg-white); min-height: 44px; } .form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--primary); } .form-field--error input, .form-field--error textarea, .form-field--error select { border-color: var(--color-error); } .form-field__error { color: var(--color-error); font-size: var(--text-sm); } /* -------------------------------------------------------------------------- 14. Press strip -------------------------------------------------------------------------- */ .press-strip__label { text-align: center; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: var(--space-lg); } .press-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2xl); padding-block: var(--space-xl); list-style: none; padding-left: 0; } .press-strip__item { color: var(--text-secondary); font-weight: 700; } /* -------------------------------------------------------------------------- Bio layout (about page) -------------------------------------------------------------------------- */ .bio { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-3xl); align-items: start; } .bio__photo img { border-radius: var(--border-radius); width: 100%; } .bio__content { min-width: 0; /* prevent grid blowout on long text */ } .bio__tagline { font-size: var(--text-xl); color: var(--text-secondary); font-style: italic; margin-top: var(--space-md); } .bio__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); } .highlight-tags { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); } .highlight-tag { display: inline-block; background: var(--tint-green); color: var(--primary); font-size: var(--text-sm); font-weight: 700; padding: var(--space-xs) var(--space-md); border-radius: var(--border-radius-pill); } @media (max-width: 768px) { .bio { grid-template-columns: 1fr; } .bio__photo { max-width: 280px; } } /* -------------------------------------------------------------------------- Testimonials / quotes -------------------------------------------------------------------------- */ .quote-grid { display: grid; gap: var(--space-2xl); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .quote-grid--compact { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-lg); margin-top: var(--space-3xl); } .quote { background: var(--bg-white); border: var(--border-subtle); border-radius: var(--border-radius); padding: var(--space-2xl); border-left: 4px solid var(--primary); } .quote__text { font-size: var(--text-lg); font-style: italic; color: var(--text-body); margin: 0 0 var(--space-lg); max-width: none; } .quote--compact .quote__text { font-size: var(--text-base); } .quote__cite { display: block; font-size: var(--text-sm); color: var(--text-muted); font-style: normal; } /* -------------------------------------------------------------------------- Book feature (about page / books page) -------------------------------------------------------------------------- */ .book-feature { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-2xl); align-items: center; margin-bottom: var(--space-3xl); } .book-feature__cover { border-radius: var(--border-radius); box-shadow: var(--shadow-md); width: 100%; } .book-feature__title { font-size: var(--text-2xl); color: var(--text-primary); margin-bottom: var(--space-md); } .book-feature__title a { color: inherit; text-decoration: none; } .book-feature__title a:hover { color: var(--primary); text-decoration: underline; } .book-card { background: var(--bg-white); border: var(--border-subtle); border-radius: var(--border-radius); padding: var(--space-2xl); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-lg); transition: box-shadow var(--transition-base); } .book-card:hover { box-shadow: var(--shadow-md); } .book-card__cover { border-radius: var(--border-radius); box-shadow: var(--shadow-sm); max-width: 180px; width: 100%; } .book-card__title { font-size: var(--text-base); font-weight: 700; color: var(--text-primary); } .book-card__title a { text-decoration: none; } .book-card__title a:hover { text-decoration: underline; } @media (max-width: 600px) { .book-feature { grid-template-columns: 1fr; justify-items: center; text-align: center; } .book-feature__cover { max-width: 240px; } } /* -------------------------------------------------------------------------- Level badges (speaking page) -------------------------------------------------------------------------- */ .level-badge { display: inline-block; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: var(--space-xs) var(--space-md); border-radius: var(--border-radius-pill); background: var(--tint-green); color: var(--primary); margin-top: var(--space-sm); } .level-badge--intermediate { background: var(--tint-warm); color: var(--accent-warm); } /* -------------------------------------------------------------------------- Explore links (inline button row) -------------------------------------------------------------------------- */ .explore-links { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; } /* -------------------------------------------------------------------------- 15. Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--primary); color: var(--bg-white); padding-block: var(--space-4xl) var(--space-2xl); margin-top: var(--space-4xl); } .site-footer a { color: var(--bg-white); } .site-footer a:hover { color: var(--tint-green); } .site-footer__grid { display: grid; gap: var(--space-2xl); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .site-footer__heading { font-size: var(--text-base); text-transform: uppercase; letter-spacing: 0.08em; color: var(--tint-green); margin-bottom: var(--space-md); } .site-footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-sm); } .site-footer__bottom { margin-top: var(--space-3xl); padding-top: var(--space-xl); border-top: 1px solid rgba(255, 255, 255, 0.2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-lg); font-size: var(--text-sm); color: var(--tint-green); } .site-footer__copyright { margin: 0; } .site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-lg); list-style: none; padding: 0; margin: 0; } /* -------------------------------------------------------------------------- 16. Reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 17. Prose pages (legal, accessibility, 404) -------------------------------------------------------------------------- */ .container--prose { max-width: 780px; } .legal-page h1 { margin-bottom: var(--space-2xl); } .legal-page h2 { margin-top: var(--space-4xl); } .legal-page p, .legal-page > ul, .legal-page > ol { margin-top: var(--space-lg); } .legal-page ul { padding-left: var(--space-2xl); display: flex; flex-direction: column; gap: var(--space-md); } .notfound-hero { max-width: 780px; text-align: center; } .notfound-hero p.notfound-message { margin-top: var(--space-lg); font-size: var(--text-lg); color: var(--text-secondary); } .notfound-hero p.notfound-cta { margin-top: var(--space-2xl); } .notfound-popular { margin-top: var(--space-3xl); text-align: left; } .notfound-popular h2 { text-align: center; } .notfound-popular ul { max-width: 480px; margin: var(--space-lg) auto 0; }