/* ========================================================================== Counter — dashboard styles DESIGN NOTE ----------- This is an operator's instrument panel for a network of sites, not a marketing dashboard. The reference points are plotting charts and signals monitoring: a pale chart ground, ink linework, tabular numerals, hairline rules, and almost no chrome. The one rule that governs the palette: AMBER MEANS LIVE. Nothing that is not happening right now is ever amber. Historical data is ink and slate; a hit that arrived seconds ago is amber and cools back to ink as it ages. Colour encodes recency, so "what is happening now" is readable without reading a single timestamp. Do not spend amber on anything else — the moment it becomes a generic accent, the signal is gone. No build step, no CDN, no webfonts. System stacks only; the typographic personality comes from treatment (tabular monospace at display sizes, wide-tracked uppercase micro-labels) rather than from a purchased face. ========================================================================== */ /* --------------------------------------------------------------- tokens */ :root { /* Design-system scales. Use these for new work; component-specific sizes remain named where their meaning is more useful than a scale step. */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* IMP-0099. The WCAG 2.5.5/2.5.8 touch-target floor, named once. Every interactive control in the dashboard — .btn, select, .danger, the shared form-control rule below, the map/pager buttons — was already built to this exact figure; this only gives the repeated literal a name so a future control can be written against the rule rather than against the number. Applied here at the two shared control rules (this file's `select, .btn` and the `:is(.account-form, ...)` input block); the remaining literal `44px`s elsewhere in this file are the same constant, not yet retrofitted — see docs/design/DESIGN_SYSTEM.md. */ --control-height: 44px; --text-xs: 10px; /* IMP-0221. The step between --text-xs and --text-sm, named for the same reason --control-height was: nineteen rules already used the bare 11px, across the two most-read regions of the product (the dashboard's .delta, .stale-label, .panel-body h3, .posture-tile span; the auth and landing surfaces' .auth-field small, .auth-check, .landing-kicker, .landing-canada-note). A figure used nineteen times is a scale step in everything but name, and a name lets the next rule be written against the step rather than against the number. Its role is annotation: secondary text sitting beside a primary value — the delta beside a metric, the staleness caption beside a panel, the hint beside a field. It is NOT the uppercase micro-label; that is `.label` at --text-xs. Naming a role rather than extending the t-shirt sequence follows --text-ui (13px), which sits between sm and base for the same reason. */ --text-note: 11px; --text-brand-micro: 9px; --text-map-detail: 10.5px; --text-live-row: 11.5px; --text-compact-value: 12.5px; --text-chart-tick: 9.5px; --text-sm: 12px; --text-ui: 13px; --text-base: 14px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 24px; /* IMP-0225. The page title, named once per shell. There were five clamps for one role and three of them sat inside the SAME wide shell: .help-hero at 62px, .tool-head at 68px, and .demo-head at 58px with a 5vw slope instead of 6vw, so /demo drifted away from its neighbours mid-resize rather than only at the ends. None of those differences was chosen; they are the residue of hero blocks written on different days. Two values because there are two shells (see the layout section of DESIGN_SYSTEM.md): the wide .help-shell carries a 1120px column, the document .legal-shell a 780px measure, and a title proportionate to one is not proportionate to the other. The dashboard's .account-hero and the landing/auth surfaces keep their own scale — those are different surfaces, not the same role at a different size. */ --text-title: clamp(34px, 6vw, 62px); --text-title-doc: clamp(34px, 6vw, 58px); /* Custom properties cannot be interpolated into media-query conditions. These document the responsive contract; queries below use the same literal values: wide 1080px, compact 900px, narrow 760px, phone 480px. */ --breakpoint-wide: 1080px; --breakpoint-compact: 900px; --breakpoint-narrow: 760px; --breakpoint-phone: 480px; --motion-fast: 150ms; --motion-base: 160ms; --motion-slow: 240ms; --radius-brand-sm: 8px; --radius-brand-mark: 9px; --radius-brand-control: 10px; --radius-brand-grid: 15px; --radius-brand-panel: 18px; --radius-brand-card: 20px; --radius-brand-halo: 32px; /* Chart paper */ --paper: #eef2f5; --paper-raised: #f8fafb; --paper-sunk: #e4eaef; /* Ink. BUG-0051: --ink-faint was #8ba0ad, which measures 2.41:1 on --paper, 2.60:1 on --paper-raised and 2.24:1 on the --paper-sunk rail — well under the WCAG AA 4.5:1 floor for normal text. It is not a decorative token: it colours .label, table th, .delta, td.n.muted, .note, .empty and the chart ticks, so the smallest type in the product was also the least legible, and the rail's headings sat on the worst background of the three. #536b7a measures 4.97 / 5.35 / 4.61 on the same three papers. The quiet of the label now comes from its size, tracking and weight rather than from being too pale to read. Amber (--signal) is not an option here: it means "happening right now" and nothing else. */ --ink: #16303f; --ink-soft: #5a7183; --ink-faint:#536b7a; /* Structure */ --rule: #cbd8e1; --grid: #dde7ed; /* The basemap reads as a MAP, the way StatCounter's does: warm land against blue water, with the coastline carried by the colour change rather than by a stroke. Sampled off their visitor map — land #e8e5d8, water #94c1e1 — then pulled back a little, because theirs is a photographic tile raster and this is a flat vector that sits inside a page. */ --land: #e6e2d6; --ocean: #b9d5ea; --border-line: #b6b1a4; /* Map dots. Red/coral is absent from the beige-and-blue basemap, so even a compact circle remains legible without the visual bulk of a teardrop. --signal still owns "just arrived"; this owns "a visitor is here". */ --map-dot: #b93d3c; --map-dot-edge: rgba(255, 255, 255, 0.9); --canada: #c73531; /* Data series — deliberately not a brand colour, just legible against ink */ --series: #2e6b7e; --series-soft: rgba(46, 107, 126, 0.14); /* LIVE. Reserved. See the note above. */ --signal: #cf6a1f; --signal-soft: rgba(207, 106, 31, 0.13); /* Audit #81 (BUG-0079). --signal itself measures only 3.2531:1 for #cf6a1f on --paper (#eef2f5) — under the WCAG AA 4.5:1 floor for the .live-pill's 12px text — but it must not change: CLAUDE.md reserves it everywhere else for "happening right now", and diluting it site-wide to fix one selector is exactly the mistake that note warns against. This token exists ONLY for .live-pill's text and is not for reuse elsewhere. #9c4e17 is the same hue/saturation family as --signal (24.8°/74.3% vs 25.6°/73.9%), just darker, so the pill still reads amber/urgent — its border and dot keep the brighter --signal. Measures 5.3061:1 on --paper, comfortably over 4.5. Dark mode needs no separate shade (see below); this is the light-mode value. */ --live-pill-ink: #9c4e17; --up: #2f6b4f; --down: #9c3b2e; /* IMP-0222. The focus halo for the risk-tiered fields, matching the alpha of --series-soft below rather than inventing a second weight. It exists because .risk-action/.risk-inline inputs carry a --down border as their risk grammar, so borrowing --series-soft for their focus ring would put a selection colour around a destructive-action field. Same shape as --series-soft/--signal-soft: the base hue at low alpha, nothing else. */ --down-soft: rgba(156, 59, 46, 0.14); /* Fixed brand surfaces and primary actions. Unlike the chart-paper tokens, these do not change with the user's colour scheme. */ --surface-brand: #0d1c24; --surface-brand-raised: #13242e; --surface-brand-sunk: #0a171d; --on-brand: #f4f8fb; --brand-series: #63aac0; --cta-from: #78e7d7; --cta-to: #45bdd3; --cta-ink: #05131c; --cta-shadow: rgba(69, 189, 211, 0.16); /* Traffic intensity. A single red/coral family reads as one dataset while the increasing depth remains distinct from --series (selection) and --signal (live recency). */ --traffic-1: #c44b46; --traffic-2: #b93d3c; --traffic-3: #a92e39; --traffic-4: #84243a; --display: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace; --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --rail-width: 232px; --gutter: 28px; --radius: 2px; } @media (prefers-color-scheme: dark) { :root { --paper: #0d1c24; --paper-raised: #13242e; --paper-sunk: #0a171d; --ink: #dae7ee; --ink-soft: #7d96a5; /* BUG-0051, dark half. #57707f measured 3.33:1 on --paper, 3.05:1 on the raised panels every table header sits inside and 3.49:1 on --paper-sunk; #758e9c measures 5.05 / 4.63 / 5.29. Still dimmer than --ink-soft above it, so the two-step ink hierarchy survives the lift. */ --ink-faint:#758e9c; --rule: #23404f; --grid: #1a3140; /* Same relationship, dimmed: land still warmer than the water it sits in, both dark enough that the dots carry the page. */ --land: #3a3a34; --ocean: #16303f; --border-line: #55524a; --series: #63aac0; --series-soft: rgba(99, 170, 192, 0.16); --map-dot: #ff6967; --map-dot-edge: rgba(4, 14, 20, 0.88); --signal: #ef8f3f; --signal-soft: rgba(239, 143, 63, 0.15); /* Audit #81 (BUG-0079), dark half. Dark-mode --signal (#ef8f3f) already measures 7.1738:1 on dark --paper (#0d1c24) — comfortably over the 4.5:1 the light-mode override above exists for — so .live-pill's text can stay on the same amber as its border/dot here; no separate shade is needed in this theme. */ --live-pill-ink: var(--signal); --up: #5aa37c; --down: #d0705f; --down-soft: rgba(208, 112, 95, 0.16); --traffic-1: #ffaaa0; --traffic-2: #ff867a; --traffic-3: #ff6967; --traffic-4: #ff5268; } } /* ----------------------------------------------------------------- base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--text-base); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Audit #94 fixes BUG-0092. Anonymous pages are one public product, not a light/dark dashboard skin wrapped around whichever template happens to be open. Scope the landing page's fixed teal brand family at body level for every signed-out response; landing/auth can still refine their own local composition, while help, legal, trust, demo, share and action pages inherit the same papers, inks, rules, data colours and browser colour scheme. */ body.public-brand-surface { color-scheme: dark; --paper: var(--surface-brand); --paper-raised: var(--surface-brand-raised); --paper-sunk: var(--surface-brand-sunk); --ink: var(--on-brand); --ink-soft: #afc2d1; --ink-faint: #7892a6; --rule: rgba(151, 184, 207, 0.2); --grid: rgba(151, 184, 207, 0.1); --land: #3a3a34; --ocean: #16303f; --border-line: #55524a; --series: #55dbc9; --series-soft: rgba(85, 219, 201, 0.16); --map-dot: #ff6967; --map-dot-edge: rgba(4, 14, 20, 0.88); --signal: #ffab3d; --signal-soft: rgba(255, 171, 61, 0.15); --live-pill-ink: var(--signal); --up: #62d6a2; --down: #d0705f; --traffic-1: #ffaaa0; --traffic-2: #ff867a; --traffic-3: #ff6967; --traffic-4: #ff5268; min-height: 100vh; background: radial-gradient(circle at 78% 8%, rgba(52, 119, 150, 0.2), transparent 28rem), radial-gradient(circle at 18% 34%, rgba(85, 219, 201, 0.07), transparent 24rem), linear-gradient(90deg, transparent 49.9%, rgba(151, 184, 207, 0.06) 50%, transparent 50.1%), var(--paper); } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } /* BUG-0042. --series, not --signal. Amber is reserved for things happening right now, and a focus ring is the single most frequently drawn accent in the interface — every Tab press painted "live" onto whatever the keyboard happened to be resting on. A colour that means everything means nothing, and it is the arrivals feed and the presence dot that pay. */ :focus-visible { outline: 2px solid var(--series); outline-offset: 2px; } /* Every numeral in this interface is tabular. Live figures update in place, and proportional digits make them jitter as the values change. */ .num, .metric-value, table td.n, .feed-time { font-family: var(--display); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* The recurring micro-label: wide-tracked, uppercase, quiet. */ .label { font-family: var(--sans); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); } .text-button { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; } .skip-link { position: fixed; left: 12px; top: -80px; z-index: 100; padding: 11px 14px; background: var(--ink); color: var(--paper-raised); } .skip-link:focus { top: 12px; } .utility-nav { position: fixed; right: 14px; bottom: 14px; z-index: 30; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 7px; background: color-mix(in srgb, var(--paper-raised) 94%, transparent); border: 1px solid var(--rule); box-shadow: 0 8px 30px rgba(9, 30, 42, 0.12); } .utility-nav a { text-decoration: none; } .utility-nav form { display: contents; } /* IMP-0157. aria-current="true" marks the EN/FR link matching the resolved locale, the same visual treatment [aria-current="page"] already gives the active section link. */ .utility-nav [aria-current="page"], .utility-nav [aria-current="true"] { border-color: var(--series); font-weight: 700; } /* --------------------------------------------------------------- layout */ .shell { display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); min-height: 100vh; } /* The network rail. This service exists to watch many sites at once, so the whole network stays on screen rather than hiding behind a dropdown. */ .rail { background: var(--paper-sunk); border-right: 1px solid var(--rule); padding: var(--space-5) 0; display: flex; flex-direction: column; gap: var(--space-1); } .rail-brand { display: block; font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 0 var(--space-5) 18px; color: var(--ink); } .rail-brand:hover { color: var(--ink); text-decoration: none; } .rail-brand small { display: block; font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; color: var(--ink-faint); margin-top: 3px; } .rail-heading { padding: 14px var(--space-5) 6px; } /* Audit #74 (BUG-0068): --ink-soft measures 4.1979:1 for #5a7183 on the --paper-sunk (#e4eaef) the rail sits on — under the WCAG AA 4.5:1 floor for 13px normal-weight text, same shape of bug as BUG-0051 (see the --ink-faint note in :root above). --ink-soft itself stays as-is: it is used elsewhere at sizes/contexts that already pass, and darkening the token would move every one of those, not just this rail. --ink-faint already measures 4.6148:1 here (it is the token BUG-0051 darkened, and is coincidentally already used two rules down for .site-link .count), and 5.2945:1 for its dark-mode value (#758e9c) against dark-mode --paper-sunk (#0a171d) — dark mode was never broken (--ink-soft dark measures 5.8774:1 there already; axe only runs light per tests/browser/conftest.py), so this scopes the fix to the one selector rather than the variable. */ .site-link { display: flex; align-items: baseline; gap: 9px; padding: 7px var(--space-5); border-left: 2px solid transparent; color: var(--ink-faint); font-size: 13px; } .site-link:hover { background: var(--paper); text-decoration: none; color: var(--ink); } /* BUG-0043. --series, not --signal. "Which site am I looking at" is navigation state, not liveness, and this marker sits inches from the presence dot that uses amber to mean exactly one thing. Two amber marks side by side, one meaning "selected" and one meaning "live", is how the reader stops trusting either. It also makes the .live-pill comment below true again — that really is now the only always-amber element. */ .site-link[aria-current="page"] { background: var(--paper); border-left-color: var(--series); color: var(--ink); font-weight: 600; } /* Presence dot: amber when the site has traffic in the last five minutes. */ .presence { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); flex: none; align-self: center; } .presence.is-live { background: var(--signal); } .site-link .count { margin-left: auto; font-family: var(--display); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ink-faint); } .main { min-width: 0; display: flex; flex-direction: column; } .account-main { min-height: 100vh; } .account-content { width: min(1080px, 100%); margin: 0 auto; padding-bottom: 110px; } .account-hero { padding: 42px 0 var(--space-6); max-width: 760px; } .account-hero h1 { font-size: clamp(36px, 6vw, 68px); line-height: 1; margin: 7px 0 var(--space-4); } .account-security-link { display: inline-flex; text-decoration: none; margin-bottom: 18px; } .account-section { margin: 18px 0; padding: var(--space-6); background: var(--paper-raised); border: 1px solid var(--rule); } .account-section-head { margin-bottom: var(--space-5); } .account-section-head h2 { margin: 3px 0 0; font-size: clamp(22px, 3vw, var(--space-8)); } .operator-main { display: block; min-height: 100vh; } .operator-content { width: min(1280px, calc(100% - var(--space-10))); margin: 0 auto; padding: 0 0 110px; } .operator-hero { display: flex; justify-content: space-between; align-items: end; gap: var(--space-6); padding: 42px 0 var(--space-6); } .operator-hero > div { max-width: 700px; } .operator-hero h1 { font-size: clamp(36px, 6vw, 68px); line-height: 1; margin: 7px 0 var(--space-4); } .operator-ranges { display: flex; flex-wrap: wrap; gap: 6px; } .operator-ranges .btn[aria-current="page"] { color: var(--paper-raised); background: var(--ink); border-color: var(--ink); } .operator-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; } .operator-attention-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .operator-attention-item { display: grid; gap: var(--space-1); padding: var(--space-3); background: var(--paper); border-left: 3px solid var(--up); } .operator-attention-item.is-warn { border-left-color: var(--down); } .operator-attention-item strong { font: 700 24px/1 var(--display); } .operator-attention-item span { color: var(--ink-soft); font-size: 12px; } .operator-chart { margin: 18px 0; } .operator-ranked-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .operator-ranked-grid .account-section { min-width: 0; margin: 0; } .operator-table-wrap { max-width: 100%; overflow-x: auto; } .operator-table-wrap table { min-width: 620px; } .operator-table-wrap td small { display: block; margin-top: 3px; color: var(--ink-faint); } .operator-actions { min-width: 220px; } .operator-actions > summary { cursor: pointer; font-weight: 650; } .operator-actions[open] > summary { margin-bottom: var(--space-2); } .operator-audit > summary { cursor: pointer; display: grid; gap: var(--space-1); } .operator-audit > summary strong { font-size: 20px; } @media (max-width: 800px) { .operator-content { width: min(100% - 24px, 1280px); } .operator-hero { display: grid; align-items: start; } .operator-metrics, .operator-attention-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .operator-ranked-grid { grid-template-columns: 1fr; } } .usage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } .usage-card { padding: 18px; background: var(--paper); border-top: 3px solid var(--series); } .usage-card strong { display: block; font: 700 clamp(28px, 4vw, 44px)/1 var(--display); } .usage-card span { display: block; color: var(--ink-soft); margin-top: 7px; } .usage-card p { font-size: 13px; color: var(--ink-soft); margin-bottom: 0; } .account-form { display: grid; gap: 14px; max-width: 680px; } .account-form label { display: grid; gap: 6px; } .account-form .btn { justify-self: start; } .account-disclosure { margin-top: var(--space-6); border-top: 1px solid var(--rule); padding-top: 18px; } .account-disclosure summary { cursor: pointer; font-weight: 700; margin-bottom: 18px; } .account-danger { border-color: color-mix(in srgb, var(--down) 55%, var(--rule)); } .account-danger .auth-eyebrow { color: var(--down); } /* IMP-0093. The plain-language purge phases on the deletion preview page — an ordered list because the phases run in that order, not a bulleted one. */ .account-disclosure-list { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); } .account-disclosure-list li { color: var(--ink-soft); } /* IMP-0093. Deletion receipts on the account page: small, secondary — this is a look-up-later record, not something that competes with the sections above it for attention. */ .receipt-list { display: grid; gap: 10px; margin-top: 14px; } .receipt-row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 13px; } .receipt-row .receipt-state { color: var(--ink-soft); } /* IMP-0137. A row of related action buttons (rotate a key, exclude this browser, run a test) below a panel's explanatory copy — used across account/site/migrate settings, previously left with no rule of its own so each call site improvised its own inline top margin. */ .settings-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 14px 0 0; } /* IMP-0137. The operator-console purge button is the one destructive action in this table that is not paired with a confirmation step, so it gets its own full button treatment (matching select, .btn below in box model) in the --down accent rather than the plain suspend/reactivate .btn look. */ .danger { font-family: var(--sans); font-size: 13px; font-weight: 650; color: var(--paper-raised); background: var(--down); border: 1px solid var(--down); border-radius: var(--radius); padding: 5px 9px; cursor: pointer; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } .danger:hover { background: color-mix(in srgb, var(--down) 82%, black); border-color: color-mix(in srgb, var(--down) 82%, black); } .account-security form { display: grid; gap: var(--space-3); max-width: 680px; margin-bottom: 26px; } .account-security form label { display: grid; gap: 6px; } .account-security h2 { margin-top: 30px; padding-top: var(--space-5); border-top: 1px solid var(--rule); } /* IMP-0097. Risk-tiered, password-gated actions — one visual grammar for every action that already re-proves identity inline before it runs (a current password, sometimes a second factor, sometimes a fifteen-minute- old sign-in) but never looked different from an ordinary settings form. Reuses --down/.danger (IMP-0137) rather than a third accent colour: amber (--signal) is reserved for live recency and --map-dot red for map markers only (CLAUDE.md). Two densities of the same idea. .risk-action is the full card for a standalone form (security.html). .risk-inline compresses the same accent and tag to fit an operator-console table cell, where several rows of it sit stacked in one column. */ .risk-action { border: 1px solid color-mix(in srgb, var(--down) 35%, var(--rule)); border-left: 3px solid var(--down); background: var(--paper); padding: 18px var(--space-5); margin: 0 0 22px; display: grid; gap: 10px; max-width: 680px; } .risk-action:last-child { margin-bottom: 0; } .risk-action h3 { margin: 0; font-size: var(--space-4); } .risk-action .hint { margin: 0; color: var(--ink-soft); font-size: 13px; } /* The severe modifier is for an action that ends the account's own authentication factor or, on the operator console, the account itself — a thicker accent rather than a second colour, so the hierarchy still reads in a colour-blind-safe way (width, not hue, carries the extra tier). */ .risk-action-severe { border-left-width: 5px; } .risk-inline { border-left: 3px solid var(--down); background: var(--paper); padding: var(--space-2) 10px; margin-bottom: var(--space-2); display: grid; gap: 6px; max-width: 260px; } .risk-inline:last-child { margin-bottom: 0; } .risk-inline-severe { border-left-width: 5px; } .risk-tag { margin: 0; font-family: var(--display); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--down); } .risk-action input:not([type="hidden"]), .risk-inline input:not([type="hidden"]) { width: 100%; padding: 6px 9px; font-family: var(--sans); font-size: 13px; color: var(--ink); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius); } /* IMP-0222. These used to be `outline: none` with only the border recoloured. That put the weakest focus indicator in the product on its highest-stakes field: .risk-action/.risk-inline inputs are the password re-entry on disable MFA, delete account, delete site and the operator purge. Every other input in the interface already gets a 3px halo on focus; a 1px border recolour is a thin thing to meet WCAG 2.4.11 with. Same 3px geometry as the shared form control rule, in --down-soft so the risk grammar survives. */ .risk-action input:focus, .risk-inline input:focus { border-color: var(--down); outline: 3px solid var(--down-soft); outline-offset: 0; } .risk-inline .confirm-label { display: grid; gap: var(--space-1); font-size: var(--space-3); color: var(--ink-soft); } .risk-inline .confirm-label code { font-family: var(--display); font-size: var(--text-note); color: var(--ink); } /* Security posture summary (security.html). Same tile shape as .usage-grid/ .usage-card (account.html's quota tiles), but the top border reads status rather than a fixed series colour — --up for "in a good state", --down for "needs attention", the same two tokens a numeric .delta already uses, not a new hue. */ .posture-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); } .posture-tile { padding: var(--space-4); background: var(--paper); border-top: 3px solid var(--ink-faint); } .posture-tile.is-ok { border-top-color: var(--up); } .posture-tile.is-warn { border-top-color: var(--down); } .posture-tile strong { display: block; font: 700 18px/1.3 var(--display); word-break: break-word; } .posture-tile span { display: block; color: var(--ink-soft); margin-top: 6px; font-size: var(--text-note); text-transform: uppercase; letter-spacing: 0.05em; } .posture-tile p { font-size: var(--space-3); color: var(--ink-soft); margin: var(--space-2) 0 0; } /* IMP-0168. One row per signed-in device on security.html — same list shape as account.html's .receipt-list/.receipt-row (a bounded feed of small, flush-left rows), not a table: entries here are heterogeneous height once a revoke button is involved, which a table cell handles awkwardly. */ .session-list { display: grid; gap: 10px; margin: 14px 0; max-width: 680px; } .session-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) 14px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 13px; } .session-row.is-current { border-top-color: var(--up); } .session-row-main { display: flex; align-items: baseline; gap: var(--space-2); flex: 1 1 100%; } .session-row .hint { margin: 0; flex: 1 1 100%; } .session-row form { margin: 0; } /* The [hidden] attribute only sets `display: none` through the user-agent stylesheet, which any class-based `display` rule outranks. Without this, every element the JavaScript hides with `node.hidden = true` stays on screen — which is exactly how the live pill ended up reading "0 now". Declared once, globally, so the trap cannot be re-sprung per component. */ [hidden] { display: none !important; } /* --------------------------------------------------------------- header */ .topbar { display: flex; align-items: center; gap: 18px; padding: 18px var(--gutter) 0; /* Wrap rather than overflow: on a phone the title plus the live pill plus the range select do not fit on one line, and an un-wrapped flex row pushes the range control off the right edge where it cannot be reached. */ flex-wrap: wrap; } .topbar h1 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -0.01em; } .topbar .domain { font-family: var(--display); font-size: 12px; color: var(--ink-faint); } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .range-control, .custom-range { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } .range-control > .label { margin-right: -4px; } .range-compare, .custom-range label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-muted); font-family: var(--display); font-size: var(--text-note); } .range-compare input { margin: 0; } .custom-range { flex-basis: 100%; justify-content: flex-end; } /* IMP-0223. analytics_range_control puts these two date fields in one row with a .btn and a select (see dashboard/_macros.html), and they used to disagree with both on three properties at once: 36px tall, a 4px corner and a --grid border, against 44px / var(--radius) / --rule beside them. The height was the one that mattered beyond looks — IMP-0099 named --control-height because every interactive control in the dashboard was already built to it, and these two were the exception, shipping below the WCAG 2.5.5/2.5.8 target floor flush against two controls that met it. */ .custom-range input[type="date"] { min-height: var(--control-height); padding: 6px var(--space-2); border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink); background: var(--paper); font: inherit; } .range-error { flex-basis: 100%; color: var(--down); text-align: right; font-size: 12px; } /* The live pill. The only always-amber element on the page — it is by definition about now. Audit #81 (BUG-0079): the text used plain --signal, which is only 3.2531:1 on --paper in light mode — under WCAG AA's 4.5:1 floor for 12px text. Border and dot stay --signal (its 3.25:1 already clears the 3:1 non-text floor, and neither is text), only the text colour switches to --live-pill-ink — see the tokens' own comments in :root above for why that is a scoped token rather than a change to --signal. */ .live-pill { display: inline-flex; align-items: center; gap: 7px; padding: var(--space-1) 10px; border: 1px solid var(--signal); border-radius: 999px; color: var(--live-pill-ink); font-family: var(--display); font-size: 12px; font-variant-numeric: tabular-nums; } .live-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } select, .btn { font-family: var(--sans); font-size: var(--text-ui); color: var(--ink); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--space-2) var(--space-3); cursor: pointer; min-height: var(--control-height); min-width: var(--control-height); display: inline-flex; align-items: center; justify-content: center; } .btn:hover { border-color: var(--ink-soft); text-decoration: none; } .btn-primary { color: var(--cta-ink); background: linear-gradient(135deg, var(--cta-from), var(--cta-to)); border-color: transparent; box-shadow: 0 10px 30px var(--cta-shadow); font-weight: 800; } .btn-primary:hover { border-color: transparent; filter: brightness(1.04); } .btn-danger, .btn.danger { color: var(--paper-raised); background: var(--down); border-color: var(--down); font-weight: 700; } .btn-danger:hover, .btn.danger:hover { color: var(--paper-raised); background: color-mix(in srgb, var(--down) 82%, black); border-color: color-mix(in srgb, var(--down) 82%, black); } /* Dashboard-side control contract. Auth cards intentionally use the denser branded variant below, but both families share tokens, focus treatment and the .btn modifier vocabulary. */ :is(.account-form, .account-security form, .form-stack, .goal-form) :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), textarea, select) { width: 100%; min-height: var(--control-height); padding: var(--space-2) var(--space-3); font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); } :is(.account-form, .account-security form, .form-stack, .goal-form) :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), textarea, select):focus { border-color: var(--series); outline: 3px solid var(--series-soft); outline-offset: 0; } :is(input[type="checkbox"], input[type="radio"]) { inline-size: 18px; block-size: 18px; margin: 0; accent-color: var(--series); } /* Small, composable layout utilities replace repeated static style= attributes. Dynamic visualization coordinates remain inline by design. */ .span-all { grid-column: 1 / -1; } .span-two { grid-column: span 2; } .content.content-tight { padding-top: 22px; } .panel-note { margin-top: 0; color: var(--ink-soft); } .note.note-pull-up { margin-top: -10px; } .note.note-flush { margin-top: 0; } .goal-form.form-compact { margin-top: var(--space-4); } .note.form-error { grid-column: 1 / -1; margin: 0; color: var(--down); } .note.field-row, .field.field-row { grid-column: 1 / -1; margin: 0; } .section-heading, .panel-body h3.section-heading { margin-top: var(--space-6); } .note.reveal-note { margin-top: var(--space-4); } .section-subheading, .panel-body h3.section-subheading { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-base); } .button-offset { margin-top: 10px; } .choice-offset { margin-left: var(--space-3); } .integration-logo { height: 20px; vertical-align: middle; } .risk-tag-current { color: var(--up); } .auth-card.auth-card-compact { max-width: 460px; } .auth-card.auth-card-wide { max-width: 620px; } .auth-card .auth-compact-title { margin: 0 0 var(--space-2); font-size: var(--text-lg); } .auth-compact-copy { margin: 0 0 var(--space-5); color: var(--ink-soft); font-size: var(--text-ui); } .auth-compact-note { color: var(--ink-soft); font-size: var(--text-sm); } /* IMP-0105. Generic disabled/pending treatment — before this, a disabled .btn was pixel-identical to an enabled one except for not responding to clicks, so a revoke/delete in flight looked exactly like one that hadn't been pressed yet. The pager's own [disabled] rule stays local to it. */ .btn[disabled] { opacity: 0.5; cursor: default; pointer-events: none; } .btn[disabled]:hover { border-color: var(--rule); } /* Same treatment, but for a trigger that isn't a .btn — the goal-delete link is a plain , which has no [disabled] to hook. */ .is-pending { opacity: 0.5; cursor: default; pointer-events: none; } /* ----------------------------------------------------------------- tabs */ .tabs { display: flex; gap: 0; padding: 0 var(--gutter); border-bottom: 1px solid var(--rule); margin-top: 14px; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 9px 14px; min-height: 44px; display: inline-flex; align-items: center; font-size: 13px; color: var(--ink-soft); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } /* IMP-0124. The active cross-panel drill-down filter, and its clear control. Sits between the tab strip and the content so it visibly scopes everything below it, on every tab, the same way the range control above the tabs already scopes the whole page. */ .segment-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px var(--gutter); background: var(--paper-raised); border-bottom: 1px solid var(--rule); font-size: 13px; } .segment-filter[hidden] { display: none; } button, input[type="submit"], input[type="button"] { min-height: 44px; } .help-shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0 80px; } .help-hero { max-width: 760px; margin-bottom: var(--space-8); } .help-hero h1 { font-size: var(--text-title); line-height: 1.02; } .help-search { display: grid; gap: var(--space-2); margin-top: 26px; font-weight: 650; } .help-search input { min-height: 50px; font-size: var(--space-4); padding: 10px 14px; } .help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .help-grid article { min-width: 0; padding: var(--space-6); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-raised); } .help-grid article h2 { margin-top: var(--space-1); } .help-grid article code { overflow-wrap: anywhere; } .share-report-meta { margin-bottom: 22px; } .share-range-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* IMP-0152. --series, not --signal — a selected range preset is not "live", and the utility nav (above) already uses --series for the same kind of selected-state marker. */ .share-range-nav [aria-current="page"] { border-color: var(--series); box-shadow: inset 0 -2px var(--series); } .share-report-footer { display: flex; justify-content: space-between; gap: var(--space-4); padding: 18px var(--gutter); color: var(--ink-faint); font-size: 12px; } .share-report { max-width: 1100px; margin: 0 auto; padding-bottom: 70px; } /* The DOCUMENT presentation: long-form prose read top to bottom, held to a ~780px measure on a full-viewport ground. /terms, /privacy, /acceptable-use, /status, /product-principles, /metrics-glossary, /accessibility and /data-retention all use it. The wide .help-shell is its counterpart, for pages whose content is a grid or a tool (.help-grid, the badge builder, the demo readout) and would break at this measure. IMP-0137 consolidated the geometry but left two vocabularies for it: the legal templates said `.legal`/`.legal article` while the newer pages said `.legal-shell`/`.legal-card`, comma-joined into one rule. IMP-0226 retired the first pair — same presentation, one name, so a new document page has only one thing to reach for. */ .legal-shell { min-height: 100vh; padding: clamp(var(--space-6), 6vw, 74px) var(--space-5); background: linear-gradient(90deg, transparent 49.9%, color-mix(in srgb, var(--rule) 32%, transparent) 50%, transparent 50.1%), var(--paper); } .legal-card { width: min(780px, 100%); margin: 0 auto; padding: clamp(var(--space-7), 6vw, 68px); background: var(--paper-raised); border: 1px solid var(--rule); } .legal-header { margin-bottom: 46px; } .legal-header .auth-mark { margin-bottom: 46px; } .legal-card h1 { font-size: var(--text-title-doc); line-height: 1.02; margin: 0 0 10px; } .legal-card h2 { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--rule); } .legal-card p { line-height: 1.72; } .legal-version { color: var(--ink-soft); font-family: var(--display); } /* IMP-0167. status.html's incident-history table: the global `table` rule (below, "tables") is tuned for the dashboard's dense data grids — 10px uppercase headers, tight cell padding — which reads cramped next to a .legal-card's spacious clamp(28px, 6vw, 68px) padding and 1.72 paragraph line-height. Same border/rule colours so it still reads as one table language, just with room to breathe. */ .legal-table { width: 100%; border-collapse: collapse; margin: 18px 0; } .legal-table th { text-align: left; font-family: var(--sans); font-size: var(--text-note); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); padding: 0 var(--space-4) 10px 0; border-bottom: 1px solid var(--rule); } .legal-table td { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--grid); line-height: 1.5; } .legal-table tr:last-child td { border-bottom: 0; } /* IMP-0122 time-zone chooser. Radios stack rather than sit inline: each option carries a resolved zone name after it, and those wrap badly side by side. */ .tz-choice { display: flex; gap: 10px; align-items: baseline; padding: var(--space-2) 0; } .account-form label.tz-choice { display: flex; align-items: center; } .tz-choice input { flex: none; } .tz-choice small { color: var(--ink-faint); font-weight: 400; } .tz-note { margin: 6px 0 14px; color: var(--ink-faint); font-size: 13px; line-height: 1.55; } /* The public network directory. One column of plain entries: the list is read top to bottom to find a property, not scanned as a grid of cards. */ .network-sites-list { display: grid; gap: 18px; width: min(820px, 100%); margin: 0; padding: 0; list-style: none; } .network-sites-list li { padding-bottom: 18px; border-bottom: 1px solid var(--rule); line-height: 1.62; color: var(--ink-soft); } .network-sites-list li:last-child { padding-bottom: 0; border-bottom: 0; } .network-sites-list a { font-weight: 700; } /* IMP-0224. demo.html wears .help-shell. There used to be a .demo-shell here whose rule body was byte-identical to it — the same width, margin and padding — which is exactly the drift DESIGN_SYSTEM.md's layout section warns against: reach for the shell that already matches the page's job before writing a new top-level wrapper. The .demo-* rules below are content, not a shell, and were never nested inside it. */ .demo-head { display: flex; flex-wrap: wrap; align-items: end; gap: 18px; margin-bottom: 18px; } .demo-head > div { flex: 1 1 480px; } .demo-head h1 { font-size: var(--text-title); line-height: 1.02; } .demo-range { display: grid; gap: 5px; color: var(--ink-soft); font-size: var(--space-3); } .demo-state { color: var(--ink-soft); } .demo-chart { width: 100%; min-width: 0; color: var(--series); } .demo-callout { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-top: 26px; padding: var(--space-7); background: var(--surface-brand); color: var(--on-brand); border-radius: var(--radius); } .demo-callout h2 { margin-bottom: 0; } /* A fixed brand island uses the fixed brand-series token in both schemes. */ .demo-callout .auth-eyebrow { color: var(--brand-series); } /* IMP-0226. badge_builder.html wears .help-shell. There used to be a .tool-shell here doing the same job with four different numbers — min(1080px, 100% - 40px) and 38px/70px padding against .help-shell's min(1120px, 100% - 32px) and 34px/80px — so the badge builder was 40px narrower than /help and nobody had chosen that. The .tool-* rules below are content, not a shell, and were never nested inside it. */ .tool-head { max-width: 760px; margin: 52px 0 30px; } .tool-head h1 { font-size: var(--text-title); line-height: 1.02; } .form-stack { display: grid; gap: 18px; } .form-stack label { display: grid; gap: 7px; } .badge-preview { min-height: 96px; display: grid; place-items: center; margin-bottom: 14px; background: var(--paper-sunk); border: 1px dashed var(--rule); } .badge-preview img { image-rendering: auto; } .badge-code { width: 100%; margin: 7px 0 var(--space-3); resize: vertical; } .public-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-bottom: var(--space-5); border-bottom: 1px solid var(--rule); } .public-nav-links { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); flex-wrap: wrap; } .public-nav-links a { font-size: 13px; font-weight: 650; } .public-nav-links .btn { text-decoration: none; } /* IMP-0157. Same treatment as the utility-nav's EN/FR pair: underline the link matching the resolved locale. */ .public-nav-links [aria-current="true"] { text-decoration: underline; } /* IMP-0218. The public page footer. Mirrors .public-nav's grammar on purpose — same mark, same 13px/650 link weight, same rule colour — so a content page is bookended rather than ending in a second, unrelated component. The rule sits on top here where the nav's sits underneath, which is the only difference between them. Collapses to a single column at the narrow breakpoint with the rest of the responsive block below; it is not repeated there because the grid falls back to `display: grid` with one implicit column on its own. */ .public-footer { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-6); align-items: center; margin-top: var(--space-16); padding-top: var(--space-6); border-top: 1px solid var(--rule); } .public-footer nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2); font-size: var(--text-ui); font-weight: 650; } @media print { .utility-nav, .share-range-nav { display: none !important; } body { background: #fff; color: #000; } .panel, .readout, .hero { break-inside: avoid; box-shadow: none; } .share-report-footer { border-top: 1px solid #bbb; } a { color: inherit; text-decoration: none; } } .tab:hover { color: var(--ink); text-decoration: none; } .tab[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); } /* IMP-0150. .utility-nav is fixed to the viewport's bottom-right (see its own rule above), and a plain var(--gutter) bottom edge is not enough clearance — the dock visibly sits on top of the last table row(s) at scroll-end on every page that uses this class (site, network, settings). .account-content already solved this with padding-bottom: 110px; reused verbatim here rather than a new number, both so the two agree and because — cascade note — .account-content's own 110px is a class *combined* with this one (`class="content account-content"`), and since this rule and that one share specificity (0,1,0), whichever is declared later in this file wins the padding-bottom property outright, not just for elements with only one class. Declaring the same value here means it no longer matters which of the two comes last. */ .content { padding: var(--gutter); padding-bottom: 110px; flex: 1; } /* ------------------------------------------------- hero: map + arrivals */ /* The thesis of the overview. Most analytics products bury geography in a tab; for a visitor counter, "someone in Osaka is reading this right now" is the whole feeling, so it opens the page. */ .hero { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 26px; } /* The Map tab, where the map is the content rather than the backdrop. Giving it the full width is also the only correct way to make it taller: the viewport's height is derived from its width by the 2:1 above. */ .hero.is-wide { grid-template-columns: minmax(0, 1fr); } .hero > * { background: var(--paper-raised); } .map-panel { padding: var(--space-4) 18px 10px; min-width: 0; } /* Title left, state right — the same head grammar as .panel-head, so the map reads as a titled region rather than a picture with a caption. The state is live copy: which sites are showing, how many cities, what the zoom is scoped to. */ .map-head { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: 6px; } .map-head h2 { margin: 0; font-size: 13px; font-weight: 650; } /* Second child onward, NOT `.label` — the share page's head is two labels with no heading, and keying on the class put `margin-left:auto` on the title as well, which let the first item absorb the free space and shunted the whole head to the right edge. */ .map-head > * + * { margin-left: auto; text-align: right; } /* overflow:hidden is the backstop for BUG-0013 — nothing positioned against the map may escape its box onto the page. */ .map-wrap { position: relative; overflow: hidden; } /* The window onto the map. THE 2:1 IS LOAD-BEARING — DO NOT GIVE THIS A DIFFERENT ASPECT RATIO. The basemap's viewBox is 1000x500 and it is drawn with preserveAspectRatio="xMidYMid meet", so in any box that is not 2:1 the SVG letterboxes itself and draws smaller than its element. The dot layer is positioned in percentages of this box, so the moment the two disagree every dot slides off the coastline by up to half the letterbox. Want a bigger map? Give it more width (see .hero.is-wide) — the height follows. */ .map-viewport { position: relative; overflow: hidden; aspect-ratio: 2 / 1; cursor: grab; touch-action: pan-y; /* one finger still scrolls the page; see map.js */ /* The water. The basemap draws land only, so everything the coastlines do not cover is ocean — which is what makes this read as a map rather than as a diagram of some continents. */ background: var(--ocean); } .map-viewport:focus-visible { outline: 2px solid var(--series); outline-offset: -2px; } .map-viewport.is-dragging { cursor: grabbing; } /* Everything that moves. One transform, written by map.js. Deliberately NOT will-change:transform. Promoting this to its own compositor layer makes the browser rasterise the basemap once at 1x and then scale that bitmap, so at 16x every coastline is a soft grey smear instead of a vector edge. Re-rasterising per zoom is the correct trade: the map is a few hundred paths, and a blurry map is not a map. */ .map-canvas { position: absolute; inset: 0; transform-origin: 0 0; } .worldmap { display: block; width: 100%; height: 100%; color: var(--land); } /* Land is a quiet ground, not the subject. The dots are the subject. */ .worldmap-land { fill: currentColor; } /* The 50m countries replace the 110m silhouette rather than sitting on top of it — the same land drawn twice at two resolutions fringes every coastline. */ .map-viewport.has-detail .worldmap-land { display: none; } /* vector-effect keeps every stroke a hairline on screen instead of thickening with the transform — without it a 16x view is all border and no country. IT MUST BE SET ON THE PATHS, NOT THE GROUP: fill and stroke inherit, but vector-effect does not, so a rule on the silently does nothing. */ .worldmap-countries path, .worldmap-states path, .worldmap-graticule path { vector-effect: non-scaling-stroke; } /* Borders are drawn IN a border colour now, not knocked out in the panel background. Knocking them out only works while the land sits on the panel; over water it drew white canals down every frontier. */ .worldmap-countries { fill: currentColor; stroke: var(--border-line); stroke-width: 0.6px; stroke-linejoin: round; } .worldmap-states { fill: none; stroke: var(--border-line); stroke-width: 0.5px; stroke-linejoin: round; opacity: 0; transition: opacity 140ms linear; } /* has-states means "fetched"; show-states means "zoomed in far enough to want them". Both are needed — see the note in map.js. */ .map-viewport.has-states.show-states .worldmap-states { opacity: 0.7; } /* Latitude/longitude every 30°. Under the land, and quiet enough to read as graph paper rather than as data. */ .worldmap-graticule { fill: none; stroke: var(--grid); stroke-width: 1px; opacity: 0; transition: opacity 160ms linear; } .map-viewport.is-zoomed .worldmap-graticule { opacity: 0.7; } /* The tile layer. Sits under everything else inside .map-canvas, so the one transform that pans and zooms the map carries the tiles along with the dots for free — no per-frame repositioning. */ /* Sibling of .map-canvas, NOT a child of it — see the long note in map.js. Positioned in screen pixels and repositioned per frame, because a tile inside a 30,000x transform has a sub-pixel layout box and rasterises to nothing. Inserted before the canvas so the dots paint on top. */ .map-tiles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .map-tile { position: absolute; display: block; /* The browser resamples while a gesture is mid-flight and before the next zoom level's tiles arrive; smooth beats the blocky nearest-neighbour some engines pick for upscaled images. */ image-rendering: auto; } /* Once real tiles are down, the vendored silhouette underneath them is just a beige shape showing through every gap while they load. */ .map-viewport.has-tiles .worldmap { display: none; } .map-dots, .map-labels { position: absolute; inset: 0; pointer-events: none; } /* IMP-0251. Every map surface uses the same centred circular marker. Dots leave substantially more geography visible than teardrops, remain coherent at the compact sizes a busy map needs, and keep the data coordinate in the visual centre while the canvas counter-scales during zoom. The light edge separates the small colour mark from both land and water without inflating its encoded diameter. */ .map-dots .dot { position: absolute; background: var(--map-dot); border-radius: 50%; /* --dot-k is 1/zoom, set by map.js on the canvas. Without it every dot would inflate with the map and a zoomed view would be one solid blob. */ transform: translate(-50%, -50%) scale(var(--dot-k, 1)); transform-origin: 50% 50%; box-shadow: 0 0 0 1px var(--map-dot-edge), 0 1px 3px rgba(20, 33, 43, 0.38); /* Solid. Over photographic tiles a translucent mark picks up whatever coastline is behind it and stops reading as one object. */ opacity: 1; } /* IMP-0251. The red/coral sequence adds a second traffic cue without spending amber, which remains exclusive to live arrivals. */ .map-dots .dot.traffic-tier-1 { background: var(--traffic-1); } .map-dots .dot.traffic-tier-2 { background: var(--traffic-2); } .map-dots .dot.traffic-tier-3 { background: var(--traffic-3); } .map-dots .dot.traffic-tier-4 { background: var(--traffic-4); } /* Clustering remains a shape/weight modifier, not a separate series colour. */ .map-dots .dot.is-cluster { filter: saturate(1.15) brightness(0.82); } /* IMP-0103 / IMP-0251. Activating a place-list row highlights its dot with a high-contrast ring as well as a colour change, so selection does not depend on hue alone. The ring is temporary interaction chrome, not data magnitude. */ .map-dots .dot.is-selected { background: var(--series); z-index: 2; transform: translate(-50%, -50%) scale(calc(var(--dot-k, 1) * 1.25)); box-shadow: 0 0 0 2px var(--paper-raised), 0 0 0 4px var(--series); filter: none; } .map-dots .dot.is-cluster.is-selected { filter: none; } .map-traffic-legend { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 7px 10px 0; color: var(--ink-faint); font: 600 10px/1 var(--sans); } .map-traffic-swatch { width: 9px; height: 9px; border-radius: 50%; } .map-traffic-swatch.tier-1 { background: var(--traffic-1); } .map-traffic-swatch.tier-2 { background: var(--traffic-2); } .map-traffic-swatch.tier-3 { background: var(--traffic-3); } .map-traffic-swatch.tier-4 { background: var(--traffic-4); } /* BUG-0052. The dot layer above is pointer-events: none, which also suppresses the browser's native tooltip on a dot's title attribute. In the dashboard that costs nothing — map.js hit-tests on the viewport's own mousemove and draws .map-tip itself, and letting a dot swallow the pointer would only risk a native tooltip fighting the custom one. The public share report is the opposite case: templates/share/view.html is a flat, JavaScript-free render whose dots carry title="City — visitors" and nothing else, so with the layer inert every dot there was an anonymous red mark with no way to find out which city it marked. Re-enabled for that view only, keyed on .map-wrap, which is the share view's container — the dashboard's .map-viewport/.map-canvas never matches. */ .map-wrap .map-dots .dot { pointer-events: auto; /* The public report intentionally ships no JavaScript, so it cannot expose the persistent dashboard control. Match that control's compact default. */ transform: translate(-50%, -50%) scale(0.65); } /* The rest of the network, while one site's footprint is in focus. Weight, not hue: the same series colour dropped to a ground. Recolouring it would invent a second series, and the one colour with a meaning free to take is amber — which is spoken for and would read as "these cities are live". Uniform and small by design (see GHOST_PX in map.js): this layer says where the network is, and the layer on top says how much. */ .map-dots .dot.is-muted { opacity: 0.32; box-shadow: none; } @media (prefers-color-scheme: dark) { /* A pale dot on a dark ground loses more to a low alpha than a dark dot on paper does. Same apparent weight, different number. */ .map-dots .dot.is-muted { opacity: 0.42; } } /* Screen space, not canvas space — see the note in site.html. map.js writes left/top in pixels whenever the transform moves. */ .map-label { position: absolute; transform: translateY(-50%); font: 600 11px/1 var(--sans); color: var(--ink); white-space: nowrap; /* A halo rather than a plate: the label has to stay readable over land, over water and over another country's fill without boxing the map in. */ text-shadow: 0 1px 2px var(--paper-raised), 0 -1px 2px var(--paper-raised), 1px 0 2px var(--paper-raised), -1px 0 2px var(--paper-raised), 1px 1px 0 var(--paper-raised), -1px 1px 0 var(--paper-raised), 1px -1px 0 var(--paper-raised), -1px -1px 0 var(--paper-raised); } /* -------------------------------------------------------- map: chrome */ /* ZOOM BUTTONS ARE BACK, deliberately, and the note that used to sit here arguing against them is gone. It said a control cluster "just covers the part of the world it is sitting on" — true, and irrelevant next to the fact that a map with no visible controls reads as a picture. Every map anyone uses has +/- in a corner; StatCounter's has exactly this stack, bottom right, and people go looking for it. The wheel and drag still work, and the keyboard still gets arrows, +/- and 0. */ .map-controls { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 4px rgb(0 0 0 / 0.18); } /* IMP-0251. Visible dot diameter is reader-controlled independently of zoom. This pair sits immediately left of the zoom stack so the two operations do not masquerade as one another; the dot preview makes the target explicit even before the title/accessible name is read. */ .map-size-controls { position: absolute; right: 47px; bottom: 10px; z-index: 3; display: flex; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 4px rgb(0 0 0 / 0.18); } .map-btn { width: 27px; height: 27px; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--paper-raised); color: var(--ink); border: 0; border-radius: 0; font: 600 15px/1 var(--sans); cursor: pointer; } .map-btn + .map-btn { border-top: 1px solid var(--rule); } .map-btn:hover { background: var(--paper-sunk); } .map-btn:focus-visible { outline: 2px solid var(--series); outline-offset: -2px; } .map-btn[disabled] { color: var(--ink-faint); cursor: default; background: var(--paper-raised); } .map-size-controls .map-btn { width: 34px; } .map-size-controls .map-btn + .map-btn { border-top: 0; border-left: 1px solid var(--rule); } .map-size-symbol { display: flex; align-items: center; gap: 3px; } .map-size-dot { display: block; flex: none; border-radius: 50%; background: currentColor; } .map-size-dot.is-small { width: 5px; height: 5px; } .map-size-dot.is-large { width: 8px; height: 8px; } /* Reset sits under the two zoom keys, as the third key in the same stack. */ .map-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; } /* Expand, top right — the corner everything else puts it in. */ .map-expand { position: absolute; top: 10px; right: 10px; z-index: 3; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 1px 4px rgb(0 0 0 / 0.18); } /* Expanded. NOT stretched to the window — the dot layer is positioned in percentages of this box, so breaking the 2:1 slides every dot off its city (see the note on .map-viewport). So it becomes the largest 2:1 that fits, centred over a backdrop. */ .map-viewport.is-full { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(96vw, 186vh); height: auto; z-index: 61; box-shadow: 0 8px 40px rgb(0 0 0 / 0.35); } .map-backdrop { position: fixed; inset: 0; z-index: 60; background: rgb(8 22 30 / 0.72); } /* Required by the tile licence, and it has to stay legible over both water and land at every zoom, so it gets a plate rather than a halo. */ .map-credit { position: absolute; left: 0; bottom: 0; z-index: 3; padding: 2px 6px; background: rgb(255 255 255 / 0.72); color: #29323a; font: 400 10px/1.4 var(--sans); border-top-right-radius: var(--radius); } .map-credit a { color: inherit; text-decoration: underline; } /* Stacked, not a sentence: place, then figures, then whatever the page adds. One long line made the eye read prose to reach a number, and left nowhere to put a third fact — which the network map needs, to say who is behind a dot. */ .map-tip { position: absolute; /* IMP-0251. A tooltip is the answer to an explicit hover/selection, so it paints over map chrome (z-index:3), not underneath controls that can hide the city and counts on a short mobile map. pointer-events remains none, so the controls underneath are still operable while the tip is visible. */ z-index: 4; padding: 6px 9px; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius); font: 500 11px/1.45 var(--sans); color: var(--ink); white-space: nowrap; pointer-events: none; box-shadow: 0 2px 8px rgb(0 0 0 / 0.12); } .map-tip span { display: block; } .map-tip-place { font-weight: 650; } .map-tip-counts { font-family: var(--display); font-variant-numeric: tabular-nums; font-size: var(--text-map-detail); color: var(--ink-soft); } /* Ruled off rather than just spaced: the line above is this city's own totals, the line below is how they split. */ .map-tip-detail { margin-top: var(--space-1); padding-top: var(--space-1); border-top: 1px solid var(--grid); font-size: var(--text-map-detail); color: var(--ink-soft); } /* IMP-0103. The keyboard/screen-reader counterpart to the map: the same cities, as a real sortable table of focusable rows, appended by map.js under the legend so it reads as part of the same card. */ .map-places { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule); } .map-places h3 { margin: 0 0 var(--space-2); font-size: 13px; font-weight: 650; } /* The network overview can carry hundreds of cities. Keep the complete, sortable table available without letting it become several viewports of mandatory scrolling between the map and the traffic trend. Native details supplies the disclosure state; this is only its compact dashboard skin. */ .map-places.is-collapsible { padding-top: 0; } .map-places-summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); padding: 8px 2px 0; cursor: pointer; list-style: none; } .map-places-summary::-webkit-details-marker { display: none; } .map-places-summary::before { content: ""; width: 7px; height: 7px; flex: none; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 120ms ease; } .map-places.is-collapsible[open] > .map-places-summary::before { transform: rotate(45deg); } .map-places-summary:focus-visible, .map-places.is-collapsible:focus-visible { outline: 2px solid var(--series); outline-offset: 2px; } .map-places-title { font-size: 13px; font-weight: 650; } .map-places-count { margin-left: auto; } .map-places-content { padding-top: var(--space-2); } /* The skip-map link map.js prepends before the viewport reuses .skip-link as-is (base.html's own "Skip to main content" link) rather than inventing a second fixed/hidden-until-focused pattern for the identical job. */ .map-place-btn { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; } .map-place-btn:hover { color: var(--series); text-decoration: underline; } /* The row's half of "activating a place highlights its dot" — the marker's half is .map-dots .dot.is-selected above. */ .map-place-btn[aria-pressed="true"] { color: var(--series); font-weight: 650; } .map-places-note { margin: var(--space-2) 0 0; } /* A ranked row that the map can frame, and whose own click/keydown still carries that meaning (the visitor-map panel's "recent visits" list, where there is no second interactive control inside the row). Audit #76 (BUG-0075): the Countries/Regions/Cities panels used to set this same class and role="button" on their too, but once IMP-0124 put a real