/* ============================================================= The Unredacted Project — sitewide design tokens + base rules ------------------------------------------------------------- Civic-modern visual system, modeled on publications like The Marshall Project: off-white ground, near-black ink, confident brick-red signature accent with a supporting civic-blue for trust/tiers and a warm amber for activity. Sans-serif display type (Inter Tight) for headlines and UI; serif (Newsreader) reserved for article-body reading on claim detail pages. Design direction: - One signature accent (brick red #c8322c). It appears in logos, section-label block chips, hover states, buttons, and "action/consequence" surfaces. Used *often*, not sparingly — it's the brand. - Supporting color 1: civic blue #1d4e89. Links, the "corroborated" tier, trust/information surfaces. - Supporting color 2: warm amber #d97706. Activity / rising deltas / counts that should feel positive-active. - Verification tiers get their own confident semantic colors — not muted pastels. - Section labels become small filled colored BLOCK CHIPS ("LATEST", "IN YOUR AREA"), the way Marshall Project does. This is the signature structural move. - Category chips and tier badges are also filled colored chips — color as structure, not decoration. Every web component in /the-gap/web-components/ reads its theming from --gap-* tokens defined here. CSS custom properties cross shadow-DOM boundaries, so updating this file re-themes the site without rebuilding any component. Also implements the sitewide rules the expects (four a11y-* classes toggled on ). ============================================================= */ /* ------------------------------------------------------------- Typography — served from Bunny Fonts (https://fonts.bunny.net). Privacy-respecting, license-respecting mirror of Google Fonts (all three families here are SIL OFL 1.1 licensed). Inter Tight — modern humanist sans for UI, headlines, labels. Newsreader — warm, contemporary serif kept for article-body longform reading (claim detail pages) only. ------------------------------------------------------------- */ @import url('https://fonts.bunny.net/css?family=inter-tight:400,500,600,700,800;inter:400,500,600,700;newsreader:400,500,600,700&display=swap'); :root { /* ═══════════════════════════════════════════════════════════ PALETTE ═══════════════════════════════════════════════════════════ */ /* ── Page grounds ───────────────────────────────────────── Off-white, barely-warm. NOT cream, NOT parchment. Modern civic feel, not aged-document feel. */ --gap-color-page: #fafaf8; /* off-white body ground */ --gap-color-surface: #ffffff; /* raised surfaces (cards, panels) */ --gap-color-surface-hover: #f4f4f2; --gap-color-surface-muted: #f1f2f4; /* muted wells, chips, tinted rows */ --gap-color-surface-alt: #f4f7fb; /* soft blue-tinted section bg */ --gap-color-surface-warm: #fdf6ee; /* soft amber-tinted section bg */ --gap-color-surface-inverse: #0f172a; /* near-black cool — inverse surface */ /* ── Ink ────────────────────────────────────────────────── Cool near-black. Very high contrast body text. */ --gap-color-text: #0f172a; --gap-color-text-primary: #0f172a; --gap-color-text-secondary: #334155; --gap-color-text-subtle: #475569; --gap-color-text-muted: #64748b; --gap-color-text-inverse: #ffffff; --gap-color-text-inverse-muted: #cbd5e1; /* ── Borders / rules ────────────────────────────────────── Clean modern neutrals, not warm. */ --gap-color-border: #e5e7eb; --gap-color-border-strong: #94a3b8; --gap-color-border-subtle: #eef0f3; --gap-color-border-inverse: rgba(255,255,255,0.14); /* ── Signature accent: BRICK RED ────────────────────────── The brand color. Civic-alarm-red, not legal-library oxblood. Brighter, more confident, more "consequence" than "archive". Used often: logo, block-chip labels, hover states, CTAs, the "debunked" / danger surfaces. */ --gap-color-accent: #c8322c; --gap-color-accent-strong: #a42620; --gap-color-accent-hover: #8c1f1a; --gap-color-accent-soft: #fde9e7; --gap-color-accent-tint: #fbd4d1; --gap-color-accent-contrast: #ffffff; --gap-color-focus: #ef4e48; /* ── Supporting color 1: CIVIC BLUE ─────────────────────── Trust / information / verification positive signals. Used for links (paired with the accent on key CTAs), the "corroborated" tier, info callouts, and subtle section backgrounds (--gap-color-surface-alt). */ --gap-color-blue: #1d4e89; --gap-color-blue-strong: #163a68; --gap-color-blue-hover: #12315a; --gap-color-blue-soft: #e0ebf6; --gap-color-blue-tint: #c2d6ea; /* ── Supporting color 2: WARM AMBER ─────────────────────── Activity, rising deltas, counts, "human warmth" signals (numerals, new-content badges). NOT used for warnings — warnings use the accent. */ --gap-color-amber: #d97706; --gap-color-amber-strong: #b45309; --gap-color-amber-soft: #fef3c7; --gap-color-amber-tint: #fde7b5; /* ── Semantic (for toasts, form validation, component states). The verification-tier palette below is the main semantic surface — these are for system feedback only. */ --gap-color-success: #15803d; --gap-color-success-soft: #dcfce7; --gap-color-success-border: #86efac; --gap-color-danger: var(--gap-color-accent); --gap-color-danger-soft: var(--gap-color-accent-soft); --gap-color-warn: var(--gap-color-amber); --gap-color-warn-soft: var(--gap-color-amber-soft); --gap-color-purple: #7c3aed; /* rarely used */ /* ── Chip neutral (for non-semantic chips/tags) ─────────── Colored chips (category, tier, section-label blocks) have their own tokens; this is the fallback neutral chip. */ --gap-color-chip-bg: #f1f2f4; --gap-color-chip-text: #334155; /* ── Tooltip ──────────────────────────────────────────────*/ --gap-color-tooltip-bg: #0f172a; --gap-color-tooltip-fg: #ffffff; /* ═══════════════════════════════════════════════════════════ VERIFICATION TIER PALETTE ------------------------------------------------------------- Confident, differentiated, semantic — not muted. Every tier is instantly distinguishable. Used by verification-tier-badge via its --gap-vtier-* tokens, and by any page that wants to flag tiered content outside a badge. ═══════════════════════════════════════════════════════════ */ /* Unverified — neutral gray. No stance. */ --gap-tier-unverified-bg: #e5e7eb; --gap-tier-unverified-fg: #334155; --gap-tier-unverified-border: #cbd5e1; /* Corroborated — civic blue. First step of credibility. */ --gap-tier-corroborated-bg: #dbe7f3; --gap-tier-corroborated-fg: #163a68; --gap-tier-corroborated-border: #9ab9d8; /* Substantiated — confident green. Strong documentary evidence. */ --gap-tier-substantiated-bg: #d1fae5; --gap-tier-substantiated-fg: #065f46; --gap-tier-substantiated-border: #6ee7b7; /* Officially acknowledged — deep green filled. The crown tier. */ --gap-tier-officially-acknowledged-bg: #064e3b; --gap-tier-officially-acknowledged-fg: #ffffff; --gap-tier-officially-acknowledged-border: #065f46; /* Disputed — amber. Formally contested but not rejected. */ --gap-tier-disputed-bg: #fef3c7; --gap-tier-disputed-fg: #854d0e; --gap-tier-disputed-border: #facc15; /* Debunked — dark red-black filled. The "contradicted" seal. */ --gap-tier-debunked-bg: #450a0a; --gap-tier-debunked-fg: #ffffff; --gap-tier-debunked-border: #7f1d1d; /* Bold (saturated) tier surface tokens — used by prominent displays like the tier-distribution legend and bar segments, where a pastel would wash out. Tier-mini badges inline in story metadata keep the soft -bg/-fg values above so they don't overwhelm surrounding titles. */ --gap-tier-corroborated-bold-bg: #1d4e89; --gap-tier-corroborated-bold-fg: #ffffff; --gap-tier-substantiated-bold-bg: #15803d; --gap-tier-substantiated-bold-fg: #ffffff; --gap-tier-disputed-bold-bg: #b45309; --gap-tier-disputed-bold-fg: #ffffff; /* ═══════════════════════════════════════════════════════════ TYPOGRAPHY ═══════════════════════════════════════════════════════════ */ /* Inter Tight for display/UI — modern humanist sans. Inter for body UI. Newsreader for longform article bodies (claim detail). System fallbacks are deliberate; if Bunny Fonts fails, the site still looks coherent. */ --gap-font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --gap-font-sans: "Inter", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --gap-font-serif: "Newsreader", "Source Serif 4", "Iowan Old Style", "Apple Garamond", Georgia, "Times New Roman", serif; --gap-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Legacy alias so any stragglers pointing at --gap-font-family continue to resolve (to the sans stack). */ --gap-font-family: var(--gap-font-sans); /* Type scale — sans display-first. Tightened for modern civic feel. Display sizes are big but not gigantic. */ --gap-text-display: clamp(2.5rem, 5vw, 4rem); --gap-text-h1: clamp(2rem, 3.5vw, 2.75rem); --gap-text-h2: clamp(1.5rem, 2.5vw, 2rem); --gap-text-h3: 1.25rem; --gap-text-h4: 1.0625rem; --gap-text-body: 1.0625rem; /* 17px */ --gap-text-small: 0.9375rem; /* 15px */ --gap-text-xs: 0.8125rem; /* 13px */ --gap-text-caps: 0.75rem; /* 12px — uppercase labels */ /* Line heights. */ --gap-leading-tight: 1.1; /* display */ --gap-leading-snug: 1.2; /* h1 / h2 */ --gap-leading-normal: 1.5; /* UI default */ --gap-leading-body: 1.7; /* article body */ /* Letter-spacing. Sans display likes negative tracking. */ --gap-tracking-tight: -0.03em; /* display / h1 */ --gap-tracking-snug: -0.02em; /* h2 */ --gap-tracking-normal: -0.01em; --gap-tracking-caps: 0.06em; /* uppercase labels */ --gap-tracking-wide: 0.12em; /* block-chip labels */ /* ═══════════════════════════════════════════════════════════ SPACE & RADIUS ------------------------------------------------------------- Modern civic products use slightly rounder corners on chips/pills (4–6px) while keeping structural elements nearly square. ═══════════════════════════════════════════════════════════ */ --gap-space-xs: 4px; --gap-space-sm: 8px; --gap-space-md: 16px; --gap-space-lg: 24px; --gap-space-xl: 40px; --gap-space-2xl: 64px; --gap-space-3xl: 96px; --gap-radius: 4px; --gap-radius-sm: 3px; --gap-radius-md: 6px; --gap-radius-lg: 8px; --gap-radius-pill: 9999px; /* Shadows — still restrained, but slightly more present for the modern-civic look. */ --gap-shadow-sm: 0 1px 0 var(--gap-color-border); --gap-shadow-md: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --gap-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.08); /* Rules. */ --gap-rule: 1px solid var(--gap-color-border); --gap-rule-strong: 2px solid var(--gap-color-text-primary); --gap-rule-double: 3px double var(--gap-color-border-strong); /* ═══════════════════════════════════════════════════════════ DARK-BAND TOKENS ------------------------------------------------------------- Tokens for the near-black bands (masthead, closing CTA). Cool near-black (not warm brown-black) to match the civic- modern palette. ═══════════════════════════════════════════════════════════ */ --gap-color-dark-bg: #0f172a; /* cool near-black */ --gap-color-dark-bg-elevated: #1e293b; /* 1-step-up */ --gap-color-dark-text: #ffffff; --gap-color-dark-text-muted: #cbd5e1; --gap-color-dark-text-subtle: #94a3b8; --gap-color-dark-border: rgba(255,255,255,0.12); --gap-color-dark-border-strong: rgba(255,255,255,0.25); --gap-color-dark-accent: #ef4e48; /* brick red, lifted for dark */ --gap-color-dark-accent-strong: #ff7570; --gap-color-dark-accent-soft: rgba(239, 78, 72, 0.15); --gap-color-dark-amber: #fbbf24; /* for activity accents on dark */ --gap-color-dark-blue: #60a5fa; } /* ============================================================= Base / reset (minimal, civic-modern) ============================================================= */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { font-family: var(--gap-font-sans); color: var(--gap-color-text); background: var(--gap-color-page); font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga", "calt", "ss01"; } body { min-height: 100vh; line-height: var(--gap-leading-normal); font-size: var(--gap-text-body); display: flex; flex-direction: column; } /* Headlines default to the DISPLAY sans (Inter Tight). Article- body pages (claim detail) will override to the serif locally. */ h1, h2, h3, h4 { color: var(--gap-color-text-primary); font-family: var(--gap-font-display); font-weight: 700; margin: 0; letter-spacing: var(--gap-tracking-snug); } h1 { font-size: var(--gap-text-h1); line-height: var(--gap-leading-snug); letter-spacing: var(--gap-tracking-tight); } h2 { font-size: var(--gap-text-h2); line-height: var(--gap-leading-snug); letter-spacing: var(--gap-tracking-snug); } h3 { font-size: var(--gap-text-h3); line-height: var(--gap-leading-snug); } h4 { font-size: var(--gap-text-h4); line-height: var(--gap-leading-snug); } p, ul, ol { margin: 0; } a { color: var(--gap-color-blue); text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--gap-color-blue-hover); text-decoration: underline; } hr { border: none; border-top: var(--gap-rule); margin: var(--gap-space-xl) 0; } code, kbd, samp, pre { font-family: var(--gap-font-mono); font-size: 0.9375em; } ::selection { background: var(--gap-color-accent); color: #fff; } /* ============================================================= Layout scaffolding ============================================================= */ .gap-layout { display: flex; flex-direction: column; min-height: 100vh; } .gap-layout__main { flex: 1 0 auto; } .gap-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--gap-space-lg); width: 100%; } .gap-container--narrow { max-width: 760px; } /* article measure */ .gap-container--wide { max-width: 1400px; } .gap-section { padding: var(--gap-space-2xl) 0; } /* Default section header — a block-chip label + optional right meta. The block-chip is the signature structural move (see .gap-label-chip below). */ .gap-section__header { margin-bottom: var(--gap-space-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--gap-space-md); flex-wrap: wrap; } .gap-section__header h2 { font-size: var(--gap-text-h2); font-weight: 700; letter-spacing: var(--gap-tracking-snug); } .gap-section__header .gap-section__meta { color: var(--gap-color-text-muted); font-family: var(--gap-font-sans); font-size: var(--gap-text-xs); text-transform: uppercase; letter-spacing: var(--gap-tracking-caps); font-weight: 600; } /* ============================================================= SECTION-LABEL BLOCK CHIPS ← signature structural move ------------------------------------------------------------- Small filled colored blocks used instead of small-caps kickers. Pattern: Latest Verified Activity Default is accent (brick red). The chip is the brand anchor. ============================================================= */ .gap-label-chip { display: inline-flex; align-items: center; background: var(--gap-color-accent); color: #fff; font-family: var(--gap-font-display); font-size: var(--gap-text-xs); font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: var(--gap-tracking-wide); padding: 6px 10px; border-radius: var(--gap-radius); white-space: nowrap; } .gap-label-chip--blue { background: var(--gap-color-blue); color: #fff; } .gap-label-chip--amber { background: var(--gap-color-amber); color: #fff; } .gap-label-chip--ink { background: var(--gap-color-text-primary); color: #fff; } .gap-label-chip--outline { background: transparent; color: var(--gap-color-accent); box-shadow: inset 0 0 0 2px currentColor; padding: 4px 9px; } /* ============================================================= Editorial primitives — kicker / dek / byline / etc. (sans, modern — not small-caps-everywhere anymore) ============================================================= */ /* Kicker — small colored label above a headline. Now uses the accent color, sans, modest tracking. */ .gap-kicker { font-family: var(--gap-font-display); font-size: var(--gap-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--gap-tracking-caps); color: var(--gap-color-accent); display: inline-block; } .gap-kicker--blue { color: var(--gap-color-blue); } .gap-kicker--amber { color: var(--gap-color-amber); } .gap-kicker--ink { color: var(--gap-color-text-subtle); } /* Dek — standfirst / summary paragraph under a headline. Sans, not italic serif — friendlier. Serif override applies on claim detail pages via a local rule. */ .gap-dek { font-family: var(--gap-font-sans); font-size: 1.1875rem; line-height: var(--gap-leading-body); color: var(--gap-color-text-secondary); font-weight: 400; } /* Byline — small sans metadata. No more letter-spaced caps. */ .gap-byline { font-family: var(--gap-font-sans); font-size: var(--gap-text-xs); color: var(--gap-color-text-muted); font-weight: 500; } .gap-byline > * + *::before { content: "·"; margin: 0 0.5em; color: var(--gap-color-border-strong); } /* Dateline — plain sans. "Austin, TX · Jan 14, 2025" style. */ .gap-dateline { font-family: var(--gap-font-sans); color: var(--gap-color-text-secondary); font-size: var(--gap-text-small); } .gap-dateline strong { text-transform: uppercase; letter-spacing: var(--gap-tracking-caps); font-weight: 700; color: var(--gap-color-text-primary); font-size: var(--gap-text-xs); } /* Small-caps eyebrow utility (anywhere we still need the pattern standalone — used sparingly). */ .gap-caps { font-family: var(--gap-font-display); font-size: var(--gap-text-caps); text-transform: uppercase; letter-spacing: var(--gap-tracking-caps); font-weight: 700; } /* Tabular-figures for numeric data (stats, counts). */ .gap-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "lnum"; } /* Citation — monospace legal/technical references. */ .gap-cite { font-family: var(--gap-font-mono); font-size: 0.9375em; color: var(--gap-color-text-subtle); background: var(--gap-color-surface-muted); padding: 1px 6px; border-radius: var(--gap-radius-sm); white-space: nowrap; } /* ============================================================= Category chips — saturated solid fills with white text. Bold stamps, not pastel labels. The "most active categories" homepage section uses these. Pattern: Police misconduct Cycle through modifiers for visual variety, OR let the page choose one. ============================================================= */ .gap-cat-chip { display: inline-flex; align-items: center; gap: var(--gap-space-sm); background: var(--gap-color-accent); color: #fff; font-family: var(--gap-font-display); font-size: var(--gap-text-small); font-weight: 700; letter-spacing: -0.005em; padding: 8px 14px; border-radius: var(--gap-radius-pill); text-decoration: none; transition: background-color 120ms ease, transform 80ms ease; } .gap-cat-chip:hover { background: var(--gap-color-accent-strong); color: #fff; text-decoration: none; transform: translateY(-1px); } .gap-cat-chip--blue { background: var(--gap-color-blue); color: #fff; } .gap-cat-chip--blue:hover { background: var(--gap-color-blue-hover); color: #fff; } .gap-cat-chip--amber { background: var(--gap-color-amber); color: #fff; } .gap-cat-chip--amber:hover { background: var(--gap-color-amber-strong); color: #fff; } .gap-cat-chip--ink { background: var(--gap-color-text-primary); color: #fff; } .gap-cat-chip--ink:hover { background: #000; color: #fff; } /* Subtle count pill inside a saturated chip — tinted translucent white so the count reads without breaking the solid-fill look. */ .gap-cat-chip .count { background: rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.95); padding: 1px 8px; border-radius: var(--gap-radius-pill); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.75rem; } /* ============================================================= Cards ============================================================= */ .gap-card { background: var(--gap-color-surface); border: var(--gap-rule); border-radius: var(--gap-radius-md); padding: var(--gap-space-lg); } /* ============================================================= Skeleton shimmer ============================================================= */ .gap-skeleton { position: relative; overflow: hidden; background: var(--gap-color-surface-muted); border-radius: var(--gap-radius-sm); } .gap-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%); animation: gap-shimmer 1.4s infinite linear; transform: translateX(-100%); } @keyframes gap-shimmer { to { transform: translateX(100%); } } .gap-skeleton--card { height: 180px; } .gap-skeleton--row { height: 64px; } .gap-skeleton--line { height: 12px; margin: 8px 0; } .gap-skeleton--heading { height: 28px; width: 60%; margin-bottom: 12px; } /* ============================================================= Claim grid — fallback layout; pages may prefer editorial rule-separated lists. ============================================================= */ .gap-claim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gap-space-md); } /* ============================================================= Buttons — civic-modern: modest radius, bold weight, confident. ============================================================= */ .gap-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-space-sm); font-family: var(--gap-font-display); font-size: var(--gap-text-small); font-weight: 700; line-height: 1.2; padding: 11px 20px; border-radius: var(--gap-radius-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; letter-spacing: -0.005em; transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, transform 80ms ease; } .gap-btn:active { transform: translateY(1px); } .gap-btn:disabled { opacity: 0.55; cursor: not-allowed; } /* The UA rule `[hidden] { display: none }` has lower specificity than our explicit `.gap-btn { display: inline-flex }` declaration above, so the `hidden` attribute would otherwise have no effect on buttons built from this class. Restore it with an equally-specific selector. */ .gap-btn[hidden] { display: none; } .gap-btn--primary { background: var(--gap-color-accent); color: #fff; border-color: var(--gap-color-accent); } .gap-btn--primary:hover { background: var(--gap-color-accent-strong); border-color: var(--gap-color-accent-strong); color: #fff; text-decoration: none; } .gap-btn--secondary { background: var(--gap-color-blue); color: #fff; border-color: var(--gap-color-blue); } .gap-btn--secondary:hover { background: var(--gap-color-blue-hover); border-color: var(--gap-color-blue-hover); color: #fff; text-decoration: none; } .gap-btn--ghost { background: transparent; color: var(--gap-color-text-primary); border-color: var(--gap-color-border-strong); } .gap-btn--ghost:hover { background: var(--gap-color-surface); border-color: var(--gap-color-text-primary); color: var(--gap-color-text-primary); text-decoration: none; } .gap-btn--inverse { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); } .gap-btn--inverse:hover { background: rgba(255,255,255,0.08); border-color: #fff; color: #fff; text-decoration: none; } .gap-btn--danger { background: var(--gap-color-accent); color: #fff; border-color: var(--gap-color-accent); } .gap-btn--lg { padding: 14px 28px; font-size: 1rem; } .gap-btn--sm { padding: 7px 14px; font-size: var(--gap-text-xs); } /* ============================================================= Retry / inline error state ============================================================= */ .gap-retry { padding: var(--gap-space-lg); text-align: center; color: var(--gap-color-text-muted); border: 1px dashed var(--gap-color-border); border-radius: var(--gap-radius-md); background: var(--gap-color-surface); } .gap-retry strong { display: block; color: var(--gap-color-text); margin-bottom: 6px; font-family: var(--gap-font-display); font-size: 1.125rem; font-weight: 700; } /* ============================================================= Toast ============================================================= */ #gap-toast-root { position: fixed; bottom: var(--gap-space-lg); right: var(--gap-space-lg); display: flex; flex-direction: column; gap: var(--gap-space-sm); z-index: 1000; pointer-events: none; } .gap-toast { pointer-events: auto; background: var(--gap-color-surface-inverse); color: var(--gap-color-text-inverse); padding: 12px 16px; border-radius: var(--gap-radius-md); box-shadow: var(--gap-shadow-lg); font-size: var(--gap-text-small); max-width: 360px; animation: gap-toast-in 180ms ease-out; } .gap-toast--error { background: var(--gap-color-accent); } .gap-toast--success { background: var(--gap-color-success); } @keyframes gap-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================= webapp-core component theming — map --wc-* tokens to our palette. The login modal and other webapp-core components read these. ============================================================= */ :root { --wc-primary-color: var(--gap-color-accent); --wc-primary-hover: var(--gap-color-accent-strong); --wc-text-color: var(--gap-color-text); --wc-text-muted: var(--gap-color-text-muted); --wc-bg-color: var(--gap-color-surface); --wc-bg-secondary: var(--gap-color-page); --wc-border-color: var(--gap-color-border); --wc-border-radius: var(--gap-radius-md); --wc-font-family: var(--gap-font-sans); --wc-font-size: var(--gap-text-small); --wc-error-color: var(--gap-color-accent); --wc-success-color: var(--gap-color-success); --wc-overlay-bg: rgba(15, 23, 42, 0.55); } /* ============================================================= Sitewide form + utility classes ------------------------------------------------------------- Shared utilities that were previously scoped per-page with fallback rules. Hoisted here so workflow/auth pages (and potentially admin pages down the road) can use them without re-declaring. Every utility is minimal by design — pages still scope page-specific layout locally. Naming: existing webapp-core / early-build pages use the convention `.gap-btn-primary` (hyphenated), while the new design-system convention is `.gap-btn--primary` (BEM-style). Both are supported — each alias aliases onto the canonical BEM variant. ============================================================= */ /* ── Page scaffolding ───────────────────────────────── */ /* Critical: restore the HTML `hidden` attribute so it always wins. Every utility class below that sets an explicit `display:` value (e.g. `.gap-alert { display: flex }`) would otherwise out-specify the browser's built-in `[hidden] { display: none }` rule, causing elements intended to be hidden to render. The `!important` here forces the attribute to win for every utility-class element. */ [hidden] { display: none !important; } /* Small eyebrow chip for workflow/auth page heads. Smaller than the home/directory page chips (see .gap-label-chip) — these are scoped, transactional labels like "Sign in", "File a claim", "Your account", not destination markers. */ .gap-eyebrow-chip { display: inline-flex; align-items: center; background: var(--gap-color-accent); color: #fff; font-family: var(--gap-font-display); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--gap-tracking-wide); padding: 5px 9px; border-radius: var(--gap-radius-sm); margin-bottom: var(--gap-space-sm); } .gap-eyebrow-chip--blue { background: var(--gap-color-blue); } .gap-eyebrow-chip--amber { background: var(--gap-color-amber); } .gap-eyebrow-chip--ink { background: var(--gap-color-text-primary); } .gap-page { padding: var(--gap-space-xl) 0 var(--gap-space-3xl); } .gap-container-narrow { max-width: 560px; margin: 0 auto; padding: 0 var(--gap-space-lg); width: 100%; } .gap-page-title { font-family: var(--gap-font-display); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 var(--gap-space-md); color: var(--gap-color-text-primary); } .gap-page-subtitle { font-family: var(--gap-font-sans); font-size: 1.0625rem; line-height: 1.6; color: var(--gap-color-text-secondary); max-width: 62ch; margin: 0 0 var(--gap-space-lg); } /* ── Text utilities ────────────────────────────────── */ .gap-text-sm { font-size: var(--gap-text-small); } .gap-text-xs { font-size: var(--gap-text-xs); } .gap-text-muted { color: var(--gap-color-text-muted); } /* ── Form fields ──────────────────────────────────── */ .gap-field { display: block; margin-bottom: var(--gap-space-md); } .gap-field:last-child { margin-bottom: 0; } .gap-label { font-family: var(--gap-font-display); font-size: var(--gap-text-caps); text-transform: uppercase; letter-spacing: var(--gap-tracking-caps); color: var(--gap-color-text-subtle); font-weight: 700; display: block; margin-bottom: 6px; } .gap-hint { font-family: var(--gap-font-sans); font-size: var(--gap-text-xs); color: var(--gap-color-text-muted); margin-top: 4px; } .gap-input, .gap-select, .gap-textarea { font-family: var(--gap-font-sans); font-size: var(--gap-text-body); color: var(--gap-color-text-primary); background: var(--gap-color-surface); border: 1px solid var(--gap-color-border); border-radius: var(--gap-radius-md); padding: 10px 14px; width: 100%; line-height: 1.4; transition: border-color 0.12s ease, box-shadow 0.12s ease; font: inherit; font-size: var(--gap-text-body); } .gap-textarea { min-height: 120px; resize: vertical; font-family: var(--gap-font-sans); } .gap-input:focus, .gap-select:focus, .gap-textarea:focus { outline: none; border-color: var(--gap-color-accent); box-shadow: 0 0 0 3px var(--gap-color-accent-soft); } .gap-select { cursor: pointer; } .gap-input::placeholder, .gap-textarea::placeholder { color: var(--gap-color-text-muted); } .gap-input[aria-invalid="true"], .gap-select[aria-invalid="true"], .gap-textarea[aria-invalid="true"] { border-color: var(--gap-color-accent); box-shadow: 0 0 0 3px var(--gap-color-accent-soft); } .gap-checkbox { display: inline-flex; align-items: center; gap: 8px; font-family: var(--gap-font-sans); font-size: var(--gap-text-small); color: var(--gap-color-text-primary); cursor: pointer; user-select: none; } .gap-checkbox input[type="checkbox"], .gap-checkbox input[type="radio"] { width: 16px; height: 16px; accent-color: var(--gap-color-accent); cursor: pointer; margin: 0; } .gap-checkbox-group { display: flex; flex-wrap: wrap; gap: var(--gap-space-md); } /* ── Button aliases (hyphenated → BEM canonical) ────────── */ .gap-btn-primary { background: var(--gap-color-accent); color: #fff; border-color: var(--gap-color-accent); } .gap-btn-primary:hover { background: var(--gap-color-accent-strong); border-color: var(--gap-color-accent-strong); color: #fff; text-decoration: none; } .gap-btn-secondary { background: transparent; color: var(--gap-color-text-primary); border: 1px solid var(--gap-color-border-strong); } .gap-btn-secondary:hover { background: var(--gap-color-surface-hover); border-color: var(--gap-color-text-primary); color: var(--gap-color-text-primary); text-decoration: none; } .gap-btn-ghost { background: transparent; color: var(--gap-color-text-primary); border: 1px solid var(--gap-color-border); } .gap-btn-ghost:hover { background: var(--gap-color-surface-hover); border-color: var(--gap-color-border-strong); color: var(--gap-color-text-primary); text-decoration: none; } .gap-btn-danger { background: var(--gap-color-accent); color: #fff; border-color: var(--gap-color-accent); } .gap-btn-sm { padding: 7px 14px; font-size: var(--gap-text-xs); } .gap-btn-lg { padding: 14px 28px; font-size: 1rem; } .gap-btn-block { display: flex; width: 100%; } /* ── Alerts ────────────────────────────────────────────────── */ .gap-alert { display: flex; gap: var(--gap-space-md); padding: var(--gap-space-md) var(--gap-space-lg); border-radius: var(--gap-radius-md); border: 1px solid var(--gap-color-border); background: var(--gap-color-surface); font-family: var(--gap-font-sans); font-size: var(--gap-text-small); margin-bottom: var(--gap-space-md); } .gap-alert-error { background: var(--gap-color-accent-soft); border-color: var(--gap-color-accent); color: var(--gap-color-accent-strong); } .gap-alert-error strong { color: var(--gap-color-accent-strong); font-family: var(--gap-font-display); font-weight: 700; } .gap-alert-success { background: var(--gap-color-success-soft); border-color: var(--gap-color-success-border); color: var(--gap-color-success); } .gap-alert-success strong { color: var(--gap-color-success); font-family: var(--gap-font-display); font-weight: 700; } .gap-alert-info { background: var(--gap-color-blue-soft); border-color: var(--gap-color-blue-tint); color: var(--gap-color-blue-strong); } .gap-alert-warn { background: var(--gap-color-amber-soft); border-color: var(--gap-color-amber-tint); color: var(--gap-color-amber-strong); } /* ── Empty state ──────────────────────────────────── */ .gap-empty-state { text-align: center; padding: var(--gap-space-2xl) var(--gap-space-lg); color: var(--gap-color-text-muted); font-family: var(--gap-font-sans); } .gap-empty-state h3 { font-family: var(--gap-font-display); font-size: 1.25rem; font-weight: 700; color: var(--gap-color-text-primary); margin: 0 0 var(--gap-space-sm); letter-spacing: -0.015em; } .gap-empty-state p { margin: 0; font-family: var(--gap-font-sans); font-size: var(--gap-text-small); } /* ── Spinner ──────────────────────────────────────────── */ .gap-spinner { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--gap-color-border); border-top-color: var(--gap-color-accent); animation: gap-spin 720ms linear infinite; vertical-align: middle; } .gap-spinner-lg { width: 36px; height: 36px; border-width: 3px; } @keyframes gap-spin { to { transform: rotate(360deg); } } html.a11y-reduced-motion .gap-spinner { animation: none; border-top-color: var(--gap-color-border); } /* ── Tabs (used on /me and /notifications) ─────────────── */ /* Modal utilities (used on /me delete-account confirmation) */ .gap-modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); display: flex; align-items: center; justify-content: center; padding: var(--gap-space-lg); z-index: 1000; } .gap-modal-overlay[hidden] { display: none; } .gap-modal { background: var(--gap-color-surface); border-radius: var(--gap-radius-lg); box-shadow: var(--gap-shadow-lg); max-width: 480px; width: 100%; max-height: calc(100vh - 2 * var(--gap-space-lg)); overflow: auto; display: flex; flex-direction: column; } .gap-modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-space-md); padding: var(--gap-space-lg) var(--gap-space-lg) var(--gap-space-md); border-bottom: 1px solid var(--gap-color-border-subtle); } .gap-modal-title { font-family: var(--gap-font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--gap-color-text-primary); } .gap-modal-body { padding: var(--gap-space-lg); font-family: var(--gap-font-sans); font-size: var(--gap-text-small); color: var(--gap-color-text-primary); line-height: 1.6; } .gap-modal-body p { margin: 0 0 var(--gap-space-sm); } .gap-modal-body p:last-child { margin-bottom: 0; } .gap-modal-footer { display: flex; justify-content: flex-end; gap: var(--gap-space-sm); padding: var(--gap-space-md) var(--gap-space-lg) var(--gap-space-lg); border-top: 1px solid var(--gap-color-border-subtle); } /* Card variants */ .gap-card-danger { border-color: var(--gap-color-accent); background: var(--gap-color-accent-soft); } .gap-card-danger h2 { color: var(--gap-color-accent-strong); } /* Alert alias — .gap-alert-warning is a legacy alias for the amber alert. */ .gap-alert-warning { background: var(--gap-color-amber-soft); border-color: var(--gap-color-amber-tint); color: var(--gap-color-amber-strong); } .gap-alert-warning strong { color: var(--gap-color-amber-strong); font-family: var(--gap-font-display); font-weight: 700; } /* Stack spacing utilities */ .gap-stack-md > * + * { margin-top: var(--gap-space-md); } .gap-stack-lg > * + * { margin-top: var(--gap-space-lg); } /* Radio group (used on /me profile tab) */ .gap-radio-group { display: flex; flex-direction: column; gap: var(--gap-space-sm); } .gap-radio { display: flex; align-items: flex-start; gap: 8px; font-family: var(--gap-font-sans); font-size: var(--gap-text-small); color: var(--gap-color-text-primary); cursor: pointer; user-select: none; padding: 8px 10px; border: 1px solid var(--gap-color-border); border-radius: var(--gap-radius-md); transition: border-color 0.12s ease, background 0.12s ease; } .gap-radio:hover { border-color: var(--gap-color-border-strong); background: var(--gap-color-surface-hover); } .gap-radio input[type="radio"] { margin-top: 3px; accent-color: var(--gap-color-accent); flex-shrink: 0; } .gap-radio:has(input[type="radio"]:checked) { border-color: var(--gap-color-accent); background: var(--gap-color-accent-soft); } /* Page header (title + optional right-side action) */ .gap-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gap-space-md); flex-wrap: wrap; margin-bottom: var(--gap-space-xl); } .gap-page-header h1 { margin: 0; } .gap-page-header .gap-page-subtitle { margin: var(--gap-space-sm) 0 0; } .gap-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 var(--gap-space-lg); padding: 0; border-bottom: 1px solid var(--gap-color-border); list-style: none; } .gap-tabs [role="tab"], .gap-tabs button { background: transparent; border: none; border-bottom: 2px solid transparent; padding: 10px 14px; cursor: pointer; font-family: var(--gap-font-display); font-size: var(--gap-text-small); font-weight: 600; color: var(--gap-color-text-muted); margin-bottom: -1px; transition: color 0.12s ease, border-color 0.12s ease; } .gap-tabs [role="tab"]:hover, .gap-tabs button:hover { color: var(--gap-color-text-primary); } .gap-tabs [role="tab"][aria-selected="true"], .gap-tabs button[aria-selected="true"] { color: var(--gap-color-accent); border-bottom-color: var(--gap-color-accent); } /* ============================================================= Accessibility-toggle classes (site-level implementation) ============================================================= */ /* Static-content page scaffolds (about / privacy / terms / error). Longform "read a document" pages. */ .about-page, .legal-page { max-width: 760px; margin: 0 auto; padding: var(--gap-space-xl) var(--gap-space-lg) var(--gap-space-3xl); font-family: var(--gap-font-sans); color: var(--gap-color-text-primary); line-height: 1.65; } .about-page h2, .legal-page h2 { font-family: var(--gap-font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 var(--gap-space-md); color: var(--gap-color-text-primary); } .about-page h3, .legal-page h3 { font-family: var(--gap-font-display); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.015em; margin: var(--gap-space-lg) 0 var(--gap-space-sm); color: var(--gap-color-text-primary); } .about-page p, .legal-page p { margin: 0 0 var(--gap-space-md); color: var(--gap-color-text-secondary); font-size: 1.0625rem; } .about-page ul, .about-page ol, .legal-page ul, .legal-page ol { margin: 0 0 var(--gap-space-md); padding-left: 1.5em; color: var(--gap-color-text-secondary); font-size: 1.0625rem; } .about-page li, .legal-page li { margin-bottom: var(--gap-space-sm); line-height: 1.65; } .about-page a, .legal-page a { color: var(--gap-color-accent); font-weight: 500; } .about-page a:hover, .legal-page a:hover { color: var(--gap-color-accent-strong); } .about-page strong, .legal-page strong { color: var(--gap-color-text-primary); font-weight: 700; } .about-page__hero, .legal-page__header { margin-bottom: var(--gap-space-2xl); padding-bottom: var(--gap-space-lg); border-bottom: 2px solid var(--gap-color-text-primary); } .about-page__eyebrow, .legal-page__eyebrow { display: inline-flex; align-items: center; background: var(--gap-color-accent); color: #fff; font-family: var(--gap-font-display); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--gap-tracking-wide); padding: 5px 9px; border-radius: var(--gap-radius-sm); margin: 0 0 var(--gap-space-md); } .legal-page__eyebrow { background: var(--gap-color-text-primary); } .about-page__title, .legal-page__title { font-family: var(--gap-font-display); font-size: clamp(1.875rem, 3.5vw, 2.5rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; color: var(--gap-color-text-primary); margin: 0 0 var(--gap-space-md); } .about-page__lede, .legal-page__lede { font-family: var(--gap-font-sans); font-size: 1.1875rem; line-height: 1.6; color: var(--gap-color-text-secondary); margin: 0; } .legal-page__meta { font-family: var(--gap-font-sans); font-size: var(--gap-text-xs); text-transform: uppercase; letter-spacing: var(--gap-tracking-caps); font-weight: 600; color: var(--gap-color-text-muted); margin: 0 0 var(--gap-space-md); } .about-page__section, .legal-page__section { padding: var(--gap-space-2xl) 0; border-top: 1px solid var(--gap-color-border); } .about-page__section:first-of-type, .legal-page__section:first-of-type { border-top: none; padding-top: 0; } .about-page__section--callout { background: var(--gap-color-accent-soft); border: 1px solid var(--gap-color-accent-tint); border-left: 4px solid var(--gap-color-accent); border-radius: var(--gap-radius-md); padding: var(--gap-space-lg) var(--gap-space-xl); margin: var(--gap-space-xl) 0; } .about-page__section--callout h2 { color: var(--gap-color-accent-strong); } .about-page__not { font-weight: 600; color: var(--gap-color-text-primary); margin-top: var(--gap-space-md); } .about-page__principles { list-style: none; padding: 0; display: grid; gap: var(--gap-space-md); } .about-page__principles li { padding: var(--gap-space-md) var(--gap-space-lg); background: var(--gap-color-surface); border: 1px solid var(--gap-color-border); border-radius: var(--gap-radius-md); margin-bottom: 0; } .about-page__steps { list-style: none; padding: 0; display: grid; gap: var(--gap-space-lg); } .about-page__steps > li { padding: var(--gap-space-lg); background: var(--gap-color-surface); border: 1px solid var(--gap-color-border); border-radius: var(--gap-radius-md); margin-bottom: 0; } .about-page__steps > li > h3 { color: var(--gap-color-accent); margin-top: 0; } .about-page__steps > li > p:last-child { margin-bottom: 0; } .about-page__faq { border: 1px solid var(--gap-color-border); border-radius: var(--gap-radius-md); background: var(--gap-color-surface); margin-bottom: var(--gap-space-sm); } .about-page__faq > summary { padding: var(--gap-space-md) var(--gap-space-lg); cursor: pointer; font-family: var(--gap-font-display); font-weight: 600; font-size: 1rem; color: var(--gap-color-text-primary); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--gap-space-md); } .about-page__faq > summary::-webkit-details-marker { display: none; } .about-page__faq > summary::after { content: "+"; font-family: var(--gap-font-display); font-weight: 400; color: var(--gap-color-text-muted); font-size: 1.5rem; line-height: 1; transition: transform 150ms ease; } .about-page__faq[open] > summary::after { transform: rotate(45deg); } .about-page__faq > p { padding: 0 var(--gap-space-lg) var(--gap-space-md); margin: 0; } .about-page__team-placeholder { background: var(--gap-color-surface-muted); border: 1px dashed var(--gap-color-border); border-radius: var(--gap-radius-md); padding: var(--gap-space-lg); margin-bottom: var(--gap-space-md); } .about-page__placeholder-lede { margin: 0 0 var(--gap-space-sm); color: var(--gap-color-text-muted); } .legal-page__toc { background: var(--gap-color-surface-muted); border: 1px solid var(--gap-color-border); border-radius: var(--gap-radius-md); padding: var(--gap-space-md) var(--gap-space-lg); margin-bottom: var(--gap-space-xl); } .legal-page__toc h2 { font-size: var(--gap-text-caps); text-transform: uppercase; letter-spacing: var(--gap-tracking-caps); color: var(--gap-color-text-subtle); margin: 0 0 var(--gap-space-sm); } .legal-page__toc ol { margin: 0; padding-left: 1.4em; font-size: var(--gap-text-small); } .legal-page__toc li { margin-bottom: 4px; } .error-page { display: flex; align-items: flex-start; justify-content: center; padding: var(--gap-space-3xl) var(--gap-space-lg); } .error-page__inner { max-width: 640px; width: 100%; text-align: center; font-family: var(--gap-font-sans); } .error-page__illustration { margin: 0 auto var(--gap-space-lg); max-width: 320px; } .error-page__illustration-svg { width: 100%; height: auto; display: block; } .error-page__eyebrow { display: inline-flex; align-items: center; background: var(--gap-color-accent); color: #fff; font-family: var(--gap-font-display); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--gap-tracking-wide); padding: 5px 9px; border-radius: var(--gap-radius-sm); margin: 0 0 var(--gap-space-md); } .error-page__title { font-family: var(--gap-font-display); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; color: var(--gap-color-text-primary); margin: 0 0 var(--gap-space-md); } .error-page__lede { font-size: 1.0625rem; line-height: 1.6; color: var(--gap-color-text-secondary); margin: 0 0 var(--gap-space-xl); } .error-page__section-title { font-family: var(--gap-font-display); font-size: var(--gap-text-caps); text-transform: uppercase; letter-spacing: var(--gap-tracking-caps); font-weight: 700; color: var(--gap-color-text-subtle); margin: var(--gap-space-xl) 0 var(--gap-space-sm); text-align: left; } .error-page__search { margin-bottom: var(--gap-space-xl); text-align: left; } .error-page__links { text-align: left; } .error-page__links ul { list-style: none; padding: 0; margin: 0; } .error-page__links li { padding: var(--gap-space-sm) 0; border-bottom: 1px solid var(--gap-color-border-subtle); } .error-page__links li:last-child { border-bottom: none; } .error-page__links a { font-family: var(--gap-font-display); font-weight: 700; color: var(--gap-color-accent); font-size: 1.0625rem; text-decoration: none; } .error-page__links a:hover { text-decoration: underline; } .error-page__link-desc { display: block; color: var(--gap-color-text-muted); font-size: var(--gap-text-small); margin-top: 2px; } .error-page__request-id { font-family: var(--gap-font-mono); font-size: var(--gap-text-xs); color: var(--gap-color-text-muted); background: var(--gap-color-surface-muted); padding: 2px 8px; border-radius: var(--gap-radius-sm); } .error-page__request-id-block { /* Full block treatment used by the 500 page — label + value + help. */ background: var(--gap-color-surface-muted); border: 1px solid var(--gap-color-border); border-radius: var(--gap-radius-md); padding: var(--gap-space-md) var(--gap-space-lg); margin: 0 0 var(--gap-space-xl); text-align: left; } .error-page__request-id-label { display: block; font-family: var(--gap-font-display); font-size: var(--gap-text-caps); font-weight: 700; text-transform: uppercase; letter-spacing: var(--gap-tracking-caps); color: var(--gap-color-text-subtle); margin-bottom: 4px; } .error-page__request-id-value { display: inline-block; font-family: var(--gap-font-mono); font-size: var(--gap-text-small); color: var(--gap-color-text-primary); background: var(--gap-color-surface); border: 1px solid var(--gap-color-border); padding: 3px 8px; border-radius: var(--gap-radius-sm); word-break: break-all; } .error-page__request-id-help { margin: var(--gap-space-sm) 0 0; font-family: var(--gap-font-sans); font-size: var(--gap-text-xs); color: var(--gap-color-text-muted); line-height: 1.5; } /* When the 500 page uses .error-page__request-id as a block with children, override the pill-style inline treatment above. The presence of .error-page__request-id-label inside indicates the block form. */ .error-page__request-id:has(.error-page__request-id-label) { display: block; font-family: var(--gap-font-sans); background: var(--gap-color-surface-muted); border: 1px solid var(--gap-color-border); border-radius: var(--gap-radius-md); padding: var(--gap-space-md) var(--gap-space-lg); margin: 0 0 var(--gap-space-xl); text-align: left; font-size: inherit; color: inherit; } .error-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-space-sm); margin: var(--gap-space-xl) 0; } .error-page__action { display: inline-flex; align-items: center; justify-content: center; font-family: var(--gap-font-display); font-size: var(--gap-text-small); font-weight: 700; padding: 11px 20px; border-radius: var(--gap-radius-md); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; } .error-page__action--primary { background: var(--gap-color-accent); color: #fff; border-color: var(--gap-color-accent); } .error-page__action--primary:hover { background: var(--gap-color-accent-strong); border-color: var(--gap-color-accent-strong); text-decoration: none; } .error-page__action--secondary { background: transparent; color: var(--gap-color-text-primary); border-color: var(--gap-color-border-strong); } .error-page__action--secondary:hover { background: var(--gap-color-surface-hover); border-color: var(--gap-color-text-primary); text-decoration: none; } .error-page__action--link { background: transparent; color: var(--gap-color-accent); border-color: transparent; } .error-page__action--link:hover { color: var(--gap-color-accent-strong); text-decoration: underline; } .error-page__details { margin-top: var(--gap-space-xl); text-align: left; background: var(--gap-color-surface); border: 1px solid var(--gap-color-border); border-radius: var(--gap-radius-md); padding: 0; } .error-page__details > summary { padding: var(--gap-space-md) var(--gap-space-lg); cursor: pointer; font-family: var(--gap-font-display); font-weight: 600; color: var(--gap-color-text-primary); list-style: none; } .error-page__details > summary::-webkit-details-marker { display: none; } .error-page__details[open] > summary { border-bottom: 1px solid var(--gap-color-border-subtle); } .error-page__details > ul { margin: 0; padding: var(--gap-space-md) var(--gap-space-xl); color: var(--gap-color-text-secondary); font-size: var(--gap-text-small); line-height: 1.6; } .error-page__details > ul li { margin-bottom: var(--gap-space-sm); } html.a11y-reduced-motion *, html.a11y-reduced-motion *::before, html.a11y-reduced-motion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } html.a11y-high-contrast { --gap-color-page: #ffffff; --gap-color-surface: #ffffff; --gap-color-surface-muted: #ffffff; --gap-color-text: #000000; --gap-color-text-primary: #000000; --gap-color-text-muted: #1a1a1a; --gap-color-border: #000000; --gap-color-border-strong: #000000; --gap-color-accent: #9a1b16; /* deeper brick red for contrast */ --gap-color-accent-strong: #6b120f; --gap-color-blue: #0b3560; } html.a11y-enlarged-text { font-size: 112.5%; } html.a11y-enhanced-focus *:focus-visible { outline: 3px solid #ef4e48 !important; outline-offset: 3px !important; } /* Respect OS-level reduced-motion regardless of toggle. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }