/* Final brand palette (Phase 11 §3) as the canonical tokens. WCAG-AA checked: primary ~10:1 on white; accent for large UI only (3:1+, never body text). The legacy semantic names from Phases 5–10 alias onto the tokens so existing rules keep working. Placeholder logo/icons ship with this palette; the final brand design lands later as in-place asset swaps. */ :root { --colour-primary: #1f4e5f; /* slate teal — cool primary */ --colour-accent: #c46a1f; /* muted ochre — warm accent (large UI only) */ --colour-verified: #2d6a4f; --colour-pending: #6c757d; --colour-rejected: #a44a3f; --colour-bg: #ffffff; --colour-bg-muted: #f5f5f5; --colour-text: #2b2b2b; --colour-text-muted: #6c757d; /* Legacy semantic names aliased onto the tokens. */ --colour-chrome: var(--colour-primary); --colour-chrome-text: #ffffff; --colour-border: #c4ccd0; /* Marker channels (see markers.css / docs/contributor-ui-design.md). */ --colour-positive: var(--colour-verified); /* verified / lowered+flush fill */ --colour-warning: var(--colour-pending); /* raised (neutral grey) */ --colour-absence: var(--colour-rejected); /* no kerb (muted red) */ --colour-placing: var(--colour-accent); /* placing-in-progress (warm accent) */ --colour-osm-outline: #11202b; /* existing OSM kerbs (thick) */ --colour-mtk-outline: #4b5563; /* Mind the Kerb reports (thin) */ --colour-assertion: #7c3aed; /* "no kerbs here" tint on a unit */ --tap-min: 44px; --radius: 6px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--colour-text); background: var(--colour-bg); -webkit-text-size-adjust: 100%; } button { font: inherit; cursor: pointer; } /* Visible keyboard focus everywhere (accessibility). */ :focus-visible { outline: 3px solid var(--colour-placing); outline-offset: 2px; } /* High-contrast mode (§5.3). Applied via data-high-contrast on by the no-flash head script (/static/js/high-contrast.js): "on" forces it, "off" blocks it even under the OS prefers-contrast media query, and an absent attribute defers to the OS. Near-black/near-white pairs, darker saturated status accents, and thicker borders/focus rings. The explicit-toggle block and the OS-media block deliberately repeat the palette — CSS can't share a declaration across a media-query boundary. Marker stroke widths are handled at the §5.3 device + AT verification pass. */ :root[data-high-contrast="on"] { --colour-primary: #003e52; --colour-accent: #8a3a00; --colour-verified: #00432f; --colour-pending: #1a1a1a; --colour-rejected: #6b1f17; --colour-bg: #ffffff; --colour-bg-muted: #ffffff; --colour-text: #000000; --colour-text-muted: #1a1a1a; --colour-chrome-text: #ffffff; --colour-border: #000000; --colour-osm-outline: #000000; --colour-mtk-outline: #000000; --colour-assertion: #4a148c; } @media (prefers-contrast: more) { :root:not([data-high-contrast="off"]) { --colour-primary: #003e52; --colour-accent: #8a3a00; --colour-verified: #00432f; --colour-pending: #1a1a1a; --colour-rejected: #6b1f17; --colour-bg: #ffffff; --colour-bg-muted: #ffffff; --colour-text: #000000; --colour-text-muted: #1a1a1a; --colour-chrome-text: #ffffff; --colour-border: #000000; --colour-osm-outline: #000000; --colour-mtk-outline: #000000; --colour-assertion: #4a148c; } } /* Site footer (Phase 11 §4) — on every page except the full-bleed map. Stacks vertically on narrow screens. */ .site-footer { max-width: 44rem; margin: 2rem auto 0; padding: 1rem 1.25rem 1.5rem; border-top: 1px solid var(--colour-border); font-size: 0.85rem; color: var(--colour-text-muted); } .site-footer p { margin: 0 0 0.4rem; } .site-footer nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; } .site-footer a { color: var(--colour-primary); } /* Thicker focus ring + control borders under either high-contrast trigger. */ :root[data-high-contrast="on"] :focus-visible, :root[data-high-contrast="on"] button, :root[data-high-contrast="on"] input, :root[data-high-contrast="on"] select, :root[data-high-contrast="on"] textarea { outline-width: 4px; border-width: 2px; } /* Screen-reader-only text + skip link (shared utilities). */ .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; } .skip-link { position: absolute; left: 0.5rem; top: -3rem; z-index: 3000; padding: 0.5rem 0.9rem; background: var(--colour-chrome); color: var(--colour-chrome-text); border-radius: var(--radius); } .skip-link:focus { top: 0.5rem; } /* Chrome buttons: text + icon, min 44px tap target. */ .chrome-btn { display: inline-flex; align-items: center; gap: 0.4rem; min-height: var(--tap-min); padding: 0 0.9rem; border: 1px solid var(--colour-border); border-radius: var(--radius); background: var(--colour-bg); color: var(--colour-text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } .chrome-btn--primary { background: var(--colour-chrome); color: var(--colour-chrome-text); border-color: var(--colour-chrome); } .chrome-btn[disabled] { opacity: 0.5; cursor: not-allowed; } /* Non-blocking inline banner (zoom hint, approach picker). */ .banner { position: absolute; top: 0.5rem; left: 50%; transform: translateX(-50%); z-index: 1000; max-width: calc(100% - 1rem); padding: 0.5rem 0.9rem; background: var(--colour-text); color: #fff; border-radius: var(--radius); font-size: 0.95rem; } .banner--picker { top: auto; bottom: 6rem; background: var(--colour-bg); color: var(--colour-text); border: 1px solid var(--colour-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .banner__title { margin: 0 0 0.5rem; font-weight: 600; } .approach-options { display: flex; flex-wrap: wrap; gap: 0.4rem; } /* Muted-contributor banner (Phase 8). Not dismissible — it states a fact about the account, not a notification. Hidden until populated. */ #muted-banner:empty { display: none; } #muted-banner { padding: 0.6rem 1rem; background: #fff3df; border-bottom: 2px solid var(--colour-placing); color: #6b4a00; font-size: 0.95rem; } #muted-banner a { color: inherit; } /* Toast region (status messages). */ #toast-region { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; gap: 0.4rem; pointer-events: none; } .toast { background: var(--colour-text); color: #fff; padding: 0.5rem 0.9rem; border-radius: var(--radius); font-size: 0.9rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }