/* ───────────────────────────────────────────────────────────────────────── newdesign1 - "Airy editorial" Plausible-clean redesign of the client analytics dashboard. Generous whitespace, one hero chart, a calm Top-N grid, a single orange accent. Self-contained: reuses the Maileroo tokens verbatim, self-hosts the brand font from /fonts (zero external requests), light-only. ───────────────────────────────────────────────────────────────────────── */ /* The sitewide default is Plus Jakarta Sans (self-hosted, @font-face below), with the native system-UI stack kept as the fallback so text still renders before the woff2 loads (font-display: swap) or if the fetch fails. The other @font-face rules are lazy alternates for the hidden "dev" panel; none fetch until --font-sans names them. */ /* The default face + the alternate typefaces offered by the hidden "dev" panel (type d-e-v): Plus Jakarta Sans (the default) plus Figtree/Sora/Gabarito/Onest/Nacelle. All self-hosted, all OFL 1.1, zero external requests. Figtree/Sora/Gabarito/Onest and Plus Jakarta ship one variable face each; Nacelle only publishes static weights, so it takes two @font-face rules. */ @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('fonts/figtree-var.woff2') format('woff2'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/PlusJakartaSans-Variable.woff2') format('woff2'); } @font-face { font-family: 'Sora'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('fonts/sora-var.woff2') format('woff2'); } @font-face { font-family: 'Gabarito'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('fonts/gabarito-var.woff2') format('woff2'); } @font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/onest-var.woff2') format('woff2'); } @font-face { font-family: 'Nacelle'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/nacelle-400.woff2') format('woff2'); } @font-face { font-family: 'Nacelle'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/nacelle-700.woff2') format('woff2'); } :root { /* Plus Jakarta Sans (self-hosted variable face) leads; the native system-UI stack follows as the pre-load / no-fetch fallback so nothing renders unstyled. */ --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* Neutrals + semantics from Apple HIG system colours; the two blues are palette 3598. */ --ink: #1c1c1e; --ink-2: #3c3c43; --muted: #6c6c70; --muted-2: #8e8e93; --line: #e5e5ea; --line-soft: #f2f2f7; --canvas: #f2f2f7; --surface: #ffffff; --primary: #0070ff; --primary-soft: #e6f1ff; --primary-tint: #cfe4ff; --good: #248a3d; --good-soft: #e3f9e9; --bad: #d70015; --bad-soft: #fde7e9; --c1: #0070ff; --c2: #00a4ff; --c3: #5856d6; --c4: #ff2d55; --c5: #8e8e93; --c6: #34c759; --shadow: 0 4px 24px -14px rgba(60, 60, 67, 0.28); --radius: 14px; } /* ── Dark mode (Appearance -> Dark mode; the class rides on , persisted as ws_theme, re-applied pre-paint by hydrate.js) ── This used to be a hand-picked navy-slate palette: ~60 token overrides plus a tail of per-component fixes for every rule that hardcoded a raw colour. It is now the same mechanism the admin console uses, so the two panels agree. Stripe's dashboard, which this app is skinned from, has no dark mode to copy: every saved page pins `color-scheme: light` and carries no prefers-color-scheme block, no data-theme hook and no dark-named custom property. The only Stripe dark mode that exists is the Stripe Dark Mode browser extension (ddjigdjplfeajnddnggjgnaelaadcclg), and it ships no colour values either - its whole mechanism is `filter: invert(1)` on the root with anything that carries its own colour inverted a second time back. That is what is below, so dark mode introduces no colours of its own: every token stays exactly as it is in light and is simply viewed inverted, and no per-component fix is needed because a hardcoded colour inverts the same as a token does. html.dark (0,1,1) outranks :root (0,1,0), so it wins regardless of source order. */ /* Carbon: a hand-built dark palette, NOT the light theme inverted. Every colour token below is redefined to a Carbon value and the components read the tokens, so the whole app follows without per-component rewrites. html.dark (0,1,1) outranks the :root skin blocks (0,1,0), so these win regardless of source order. color-scheme: dark so native controls (scrollbars, form widgets, autofill, date pickers) paint dark too, and images/charts keep their own real colours. */ html.dark { color-scheme: dark; /* grounds - Dim: a softer blue-grey slate, one step up from Carbon's near-black */ --bg:#1b1f27; --canvas:#1b1f27; --card:#232833; --surface:#232833; --sand:#2b313d; --tint:#2b313d; --primary-soft:#2b313d; /* text - eased off pure white so the lifted ground stays low-glare */ --ink:#c6cdd9; --ink-h1:#e2e7ef; --ink-2:#a6adbc; --body-ink:#a6adbc; --label:#9aa2b1; --muted:#7e8796; --muted-2:#656e7d; --ink-button:#c6cdd9; /* lines / rings (white at low alpha reads as a hairline on any dark surface) */ --line:rgba(255,255,255,0.06); --line-soft:rgba(255,255,255,0.04); --line-hover:rgba(255,255,255,0.11); --primary-tint:rgba(255,255,255,0.11); --ring-light:rgba(255,255,255,0.06) 0 0 0 1px; --ring-mid:rgba(255,255,255,0.11) 0 0 0 1px; --ring-brand:rgb(143,134,240) 0 0 0 1.5px; --shadow:rgba(255,255,255,0.06) 0 0 0 1px; --shadow-pop:rgba(0,0,0,0.5) 0 1px 2px 0,rgba(255,255,255,0.08) 0 0 0 1px,rgba(0,0,0,0.45) 0 8px 24px -8px; /* accent - Dim lavender, softened for the lighter ground */ --accent:#8f86f0; --accent-rgb:143,134,240; --accent-soft:rgba(143,134,240,0.15); --accent-ico:#a9a1f5; --violet:#a9a1f5; --violet-rgb:169,161,245; --icon-idle:#7e8796; --primary:#8f86f0; /* semantics */ --good:#5cc98d; --good-soft:rgba(92,201,141,0.14); --ok:#5cc98d; --ok-rgb:92,201,141; --green:#5cc98d; --green-rgb:92,201,141; --bad:#ef8a90; --bad-soft:rgba(239,138,144,0.14); --coral:#ef8a90; --amber:#e0a13a; --amber-bg:rgba(224,161,58,0.16); --wait:#9a9da6; --wait-rgb:154,157,166; /* nav / sidebar - a shade deeper than the canvas so the rail reads as a distinct plane */ --nav:#191d24; --nav-2:#232833; --nav-ink:#c6cdd9; --nav-muted:#7e8796; --nav-line:rgba(255,255,255,0.06); /* chart categoricals - eased to sit with the softer Dim ground while still separating */ --c1:#7c9dff; --c2:#4fc3e8; --c3:#a99cf0; --c4:#f07f95; --c5:#9aa2b1; --c6:#5cc98d; } /* Per-component dark fixes: the few rules that hardcode a light colour instead of reading a token, so they cannot follow the palette above. Warnings keep an amber identity; the danger/hover tints move to a dark wash. Everything else flips through the tokens. */ html.dark .help-banner:not(.hb-bad){background:#241f14;color:#e6b45a} html.dark .h-warn{background:rgba(239,138,144,0.14);color:#ef8a90} html.dark .tag.warn{background:rgba(224,161,58,0.16);color:#e6b45a} html.dark .btn.btn-danger:hover{background:rgba(239,138,144,0.12)} html.dark .nav-b:hover::before{background:rgba(143,134,240,0.14)} * , *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; } a { color: inherit; text-decoration: none; } /* ── Impersonation banner ── Operator chrome, JS-injected at the top of the body when /api/auth/me reports impersonatedBy. It deliberately sits outside the app's own visual language (dark bar, no orange) so it can never be read as part of the client's UI. Plain document flow: the shell is not fixed, so the bar pushes the page down without a body offset. Its own tokens, NOT --ink: --ink is the text colour, so in dark mode the bar painted itself #c6cdd9 and kept white text on it. Dark mode gets a ground below the canvas plus a hairline, which keeps the strip unmistakable without the glare of a light bar in a low-glare theme. */ .imp-banner { --imp-bg: #1c1c1e; --imp-ink: #fff; --imp-line: rgba(255, 255, 255, 0.35); --imp-hover: rgba(255, 255, 255, 0.12); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; padding: 9px 20px; background: var(--imp-bg); color: var(--imp-ink); font-size: 13px; font-weight: 600; } html.dark .imp-banner { --imp-bg: #10131a; --imp-ink: #e2e7ef; --imp-line: rgba(255, 255, 255, 0.28); --imp-hover: rgba(255, 255, 255, 0.1); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.14); } .imp-exit { border: 1px solid var(--imp-line); border-radius: 8px; background: transparent; color: inherit; font: inherit; padding: 3px 10px; cursor: pointer; } .imp-exit:hover { background: var(--imp-hover); } /* Collapse control: shrinks the bar to a slim strip (Exit stays reachable). State persists in ws_imp_collapsed so it survives SPA hops and reloads within the impersonated session. */ .imp-mini { display: none; font-weight: 600; opacity: 0.85; } .imp-collapse { display: inline-flex; align-items: center; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 2px 6px; border-radius: 6px; opacity: 0.8; } .imp-collapse:hover { background: var(--imp-hover); opacity: 1; } .imp-collapse svg { transition: transform 0.15s ease; } .imp-banner.collapsed { padding: 4px 16px; gap: 10px; } .imp-banner.collapsed .imp-who { display: none; } .imp-banner.collapsed .imp-mini { display: inline; } .imp-banner.collapsed .imp-collapse svg { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .imp-collapse svg { transition: none; } } /* ── Shell ── The redesign owns `.wrap` and `.top` (sidebar shell, further down this file). The pre-redesign `.container`-style `.wrap` and the old tab-bar `.top` are gone: they only leaked stray properties (margin:0 auto mis-centred the column, justify-content:space-between fought the topbar layout). */ .brand { display: flex; align-items: center; gap: 12px; min-width: 0; } /* The logo (mark + wordmark) is a link back to the client root. Inline so it sits inside .brand next to the site switcher without changing the row layout; only the logo itself is clickable. */ .brand-home { display: inline-flex; align-items: center; gap: 12px; min-width: 0; border-radius: 8px; color: inherit; } .brand-home:hover .brand-name { color: var(--primary); } .brand-home:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-soft); } .brand-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--primary); display: grid; place-items: center; flex: none; } .brand-name { font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; } /* site switcher (the slim property pill, made pickable) */ .site { min-width: 0; } /* The site switcher = the artifact's .switcher pill: same white-pill/shadow as the .dd-btn triggers (inherited), a touch lighter weight, and a green live dot. */ .site .site-btn { gap: 9px; font-size: 0.88rem; font-weight: 600; padding: 8px 14px; max-width: 230px; } .site .site-btn:hover { border-color: var(--line-hover); } .site-btn .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; } .site-host { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Dropdown primitive (site / country / range / account) ── */ .controls { display: inline-flex; align-items: center; gap: 8px; } /* syncNav sets [hidden] on #filters for the Settings/Visitor surfaces, where the country/range/answers cluster is meaningless. The class display above beats the UA [hidden] rule, so honour the intent explicitly (same idiom as .cc-row/.rng-custom). */ .controls[hidden] { display: none; } .dd { position: relative; } /* Trigger pills - copied verbatim from the artifact's .ctrl-b so the site / country / range selectors read as one uniform white pill with a soft shadow (they were a flat, mismatched set: 10px rounded-rect, borderless range, slim site). The open state draws the artifact's blue accent ring. */ .dd-btn { display: inline-flex; align-items: center; gap: 9px; font: inherit; font-size: 0.86rem; font-weight: 700; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 8px 13px; cursor: pointer; white-space: nowrap; box-shadow: var(--shadow); } .dd-btn:hover { border-color: var(--line-hover); } .dd.open > .dd-btn { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .dd-caret { color: var(--muted); font-size: 0.6rem; flex: none; transition: transform .18s ease; } .dd.open > .dd-btn .dd-caret { transform: rotate(180deg); } .dd-ico { display: inline-flex; color: var(--label); } .dd-menu { position: absolute; left: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; min-width: 190px; z-index: 40; display: none; } .dd-menu-r { left: auto; right: 0; } .dd.open .dd-menu { display: block; } .dd-menu button, .dd-link { display: block; width: 100%; text-align: left; font: inherit; font-size: 0.83rem; font-weight: 600; color: var(--ink-2); background: none; border: 0; border-radius: 8px; padding: 8px 10px; cursor: pointer; } .dd-menu button:hover, .dd-link:hover { background: var(--line-soft); } .dd-menu button[aria-current="true"] { color: var(--accent); background: var(--accent-soft); } .dd-fields { display: flex; flex-direction: column; gap: 8px; padding: 8px 6px 4px; } .dd-fields[hidden] { display: none; } .dd-fields label { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 0.76rem; font-weight: 700; color: var(--muted); } .dd-fields input { font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; } .dd-apply { text-align: center !important; color: #fff !important; background: var(--accent) !important; font-weight: 700 !important; } .dd-apply:hover { filter: brightness(0.96); } /* ── Time-range picker (Plausible's grouped period sheet in the artifact's pill) ── The trigger is now the artifact's .ctrl-b pill (white, bordered, soft shadow, blue open ring) so it matches the site + country selectors; the prev/next period arrows for the day/month/year presets sit inside the pill on the right. The grouped 224px sheet keeps its single-key hints; the active row reads in the blue accent (matching the country dropdown) rather than the old orange. Scoped under .range-trigger / .range-menu so they out-specify the shared .dd-btn / .dd-menu primitives. */ .range-trigger { display: inline-flex; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-pill); box-shadow: var(--shadow); padding-right: 4px; } .range-trigger:hover { border-color: var(--line-hover); } .range-dd.open .range-trigger { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .range-btn { display: inline-flex; align-items: center; gap: 9px; font: inherit; font-size: 0.86rem; font-weight: 700; color: var(--ink); background: none; border: 0; border-radius: var(--radius-pill); padding: 8px 4px 8px 13px; cursor: pointer; white-space: nowrap; } .range-dd.open .range-btn .dd-caret { transform: rotate(180deg); } .range-cal { display: inline-flex; color: var(--label); } .range-cur { line-height: 1.2; } .range-arrows { display: inline-flex; align-items: center; padding-right: 4px; } .range-arrow { display: inline-flex; align-items: center; justify-content: center; height: 24px; width: 20px; padding: 0; border: 0; background: none; border-radius: 6px; color: var(--ink-2); cursor: pointer; } .range-arrow:hover:not(:disabled) { background: var(--line); } .range-arrow:disabled { color: var(--muted-2); cursor: not-allowed; } .range-menu { min-width: 224px; padding: 4px; border-radius: 8px; } .dd.open .range-menu { display: flex; flex-direction: column; gap: 2px; } .range-menu .range-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; font: inherit; font-size: 0.83rem; font-weight: 500; line-height: 1.2; color: var(--ink-2); background: none; border: 0; border-radius: 7px; padding: 9px 14px; cursor: pointer; } .range-menu .range-item:hover { background: var(--line-soft); color: var(--ink); } .range-menu .range-item.on { color: var(--accent); font-weight: 700; } .range-menu .range-item.on .range-kbd { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.5); } .range-kbd { flex: none; font: inherit; font-size: 0.7rem; font-weight: 600; line-height: 1.4; color: var(--muted-2); background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 0 6px; } .range-sep { height: 1px; background: var(--line); margin: 3px -2px; } .range-fields { border-top: 1px solid var(--line-soft); margin-top: 3px; } /* ── Country multi-select ────────────────────────────────────────────────── The trigger shows a single selection as a removable chip and any larger selection as an "N selected" count; the menu is a search box over a scrollable, checkable list whose selected rows float to the top. */ .cc-btn { max-width: 340px; } .cc-chips { display: inline-flex; align-items: center; gap: 5px; min-width: 0; } .cc-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 2px 4px 2px 7px; font-size: 0.76rem; font-weight: 700; } .cc-chip .flag-ico { width: 16px; height: 11px; } .cc-chip-name { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cc-x { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 999px; color: var(--accent); opacity: 0.66; cursor: pointer; } .cc-x:hover { opacity: 1; background: rgba(var(--accent-rgb), 0.16); } .cc-count { font-weight: 700; color: var(--ink-2); } .cc-menu { min-width: 248px; padding-top: 8px; } .cc-search { padding: 0 4px 8px; } .cc-search input { width: 100%; font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; } .cc-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .cc-all { border-bottom: 1px solid var(--line-soft); border-radius: 0 !important; margin-bottom: 4px; color: var(--muted); } .cc-all.on { color: var(--accent); } /* overflow-y:auto alone computes overflow-x to auto, which puts a horizontal scrollbar in the menu the moment a row is a pixel too wide. Rows never need to scroll sideways - they ellipsis. */ .cc-list { max-height: 244px; overflow-y: auto; overflow-x: hidden; } .cc-row { display: flex !important; align-items: center; gap: 8px; } .cc-row[hidden] { display: none !important; } .cc-row.on { color: var(--accent); font-weight: 700; } .cc-check { width: 15px; height: 15px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); } .cc-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct-menu { min-width: 210px; } .acct-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; } .acct-id { display: flex; flex-direction: column; line-height: 1.3; } .acct-id small { color: var(--muted); font-weight: 600; } .dd-sep { border-top: 1px solid var(--line-soft); margin-top: 4px; } .avatar { width: 30px; height: 30px; border-radius: 9px; flex: none; background: linear-gradient(135deg, var(--primary), #66b2ff); display: inline-grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.72rem; } .avatar-lg { width: 38px; height: 38px; font-size: 0.85rem; border-radius: 11px; } /* The avatar chip: a circular ring that hugs the avatar (tighter padding than a text dd-btn). Hover and the open state both draw a clean accent ring (no grey fill) and give the avatar a subtle lift, so the trigger reads as interactive and, when open, active. */ .acct-btn { padding: 3px; border-radius: 999px; border-color: var(--line); box-shadow: none; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } .acct-btn .avatar { transition: transform .15s ease; } .acct-btn:hover { background: var(--line-soft); border-color: var(--muted-2); } .acct-dd.open .acct-btn { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .acct-dd.open .avatar { transform: scale(1.04); } @media (prefers-reduced-motion: reduce) { .acct-dd.open .avatar { transform: none; } } /* Running build, footer of the account menu: quiet, centered, its own hairline above. The only place the version is shown. --muted-2 is 3.3:1 on the menu surface, below AA, so use --muted (5.2:1). */ .acct-ver { margin-top: 4px; padding: 7px 10px 3px; border-top: 1px solid var(--line-soft); font-size: 0.72rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; text-align: center; } /* Fixed build timestamp under the version: a quieter second line so the version still leads. */ .acct-build { display: block; margin-top: 2px; font-size: 0.68rem; font-weight: 500; color: var(--muted); opacity: 0.85; } /* Account block in the sidebar footer (redesign). A full-width row - avatar + identity + caret - that opens the shared account menu upward, out of the dark nav. Overrides the white .dd-btn pill. */ .acct-dd-side { width: 100%; } .acct-side-btn { width: 100%; justify-content: flex-start; gap: 10px; background: var(--nav-2); border: 1px solid var(--nav-line); box-shadow: none; border-radius: var(--radius-sm); padding: 8px 10px; color: var(--nav-ink); } .acct-side-btn:hover { background: var(--nav-2); border-color: rgba(255, 255, 255, 0.18); } .acct-dd-side.open .acct-side-btn { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .acct-side-id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; text-align: left; } .acct-side-id b { font-size: 0.85rem; font-weight: 700; color: var(--nav-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct-side-id small { font-size: 0.72rem; font-weight: 600; color: var(--nav-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct-side-btn .dd-caret { margin-left: auto; color: var(--nav-muted); font-size: 0.62rem; } /* Opens upward from the footer (vertical sidebar), left-aligned within the rail. */ .acct-menu-up { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; } /* Stripe-style: the account bar is the top item, so the menu drops downward, left-aligned. */ .acct-menu-down { top: calc(100% + 8px); bottom: auto; left: 0; right: auto; } /* Console layout: the footer sits at the top-right of the horizontal bar, so the menu opens downward + right-aligned and the trigger collapses to just the avatar chip. */ .spinner { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid var(--primary-tint); border-top-color: var(--primary); animation: dd-spin 0.6s linear infinite; } .spinner[hidden] { display: none; } .spinner-sm { width: 10px; height: 10px; border-width: 2px; } @keyframes dd-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.5s; } } /* ── Mobile filter drawer ────────────────────────────────────────────────── The country / range controls are wrapped in .filter-cluster, each in a labelled .fgroup. On desktop those wrappers are transparent (display:contents), so the controls sit inline in the bar exactly as before and the drawer chrome (sheet header, group labels, the toggle button, the backdrop) is hidden. The 640px block at the foot of the file turns .filter-cluster into a right-side sheet and reveals the chrome. Open state is `body.filters-open`, scoped there too. */ .filter-cluster, .fgroup { display: contents; } .fdrawer-h, .fgroup-lab, .filters-toggle, .fdrawer-backdrop { display: none; } /* The site picker sits inline in the bar (.top .site) on desktop; its in-sheet twin is hidden here and only appears once the cluster becomes the mobile sheet (see 640px block). Scoped to .top so it out-specifies the reskin's later `.fgroup{display:inline-flex}` rule, which would otherwise un-hide this twin on desktop and show "All pixels" twice. */ .top .fgroup-site { display: none; } main { padding: 34px 0 80px; } /* ── Answer-first summary ── */ .answer { font-size: 1.42rem; line-height: 1.44; font-weight: 500; letter-spacing: -0.015em; color: var(--ink-2); max-width: 46ch; margin: 0 0 34px; text-wrap: pretty; } .answer b { color: var(--ink); font-weight: 700; } .answer .up { color: var(--good); font-weight: 700; } /* ── Top stats: the KPI row and the hero chart share one card ── */ /* The card chrome the .kpis and .hero blocks each used to carry themselves now lives here once, so the tiles read as controls on the chart below them rather than as a separate panel. */ .topstats { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; margin-bottom: 24px; } /* ── KPI row ── */ .kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; margin-bottom: 24px; } /* Inside .topstats the card chrome belongs to the wrapper, so the .kpis row drops its own border, radius and bottom margin (earnings.html/video.html use a standalone .kpis and keep theirs). The per-tile dividers stay: Plausible's top-stats keeps a vertical rule between tiles, and they are the "borders on the KPI buttons" the overview row should carry. */ .topstats .kpis { border: 0; border-radius: 0; margin-bottom: 0; } .kpi { padding: 18px 20px; border-left: 1px solid var(--line); } .kpi:first-child { border-left: 0; } /* The pickable tiles are