@import url("/v2/static/tokens.css"); /* ============================================================================ Components. Every value here comes from a token; a raw number in this file is either a hairline, a percentage, or a bug. ========================================================================= */ /* Cross-document view transitions: the browser cross-fades between the old and the new page instead of flashing white. Native, declarative, and invisible to browsers that do not support it — unlike the JS click interception this replaced, it cannot leave a click doing nothing. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-2); animation-timing-function: var(--ease-out); } /* the page plane is painted on too, so the gap between documents is the dashboard's own background rather than white */ html { background: var(--canvas); } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--canvas); color: var(--ink-1); font-family: var(--font-sans); font-size: var(--text-md); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } p a { text-decoration: underline; text-underline-offset: 2px; } /* one focus treatment for the whole product, never removed */ :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-xs); } /* numbers that sit in columns must not dance as they change */ .num, .tvalue, table.grid td.r, .chart .tick, .tip b, .kpi-value { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------- header --- */ .topbar { view-transition-name: topbar; display: flex; align-items: center; gap: var(--space-6); padding: 0 var(--space-6); height: 56px; background: color-mix(in srgb, var(--surface-1) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line-1); } .brand { font-weight: 640; letter-spacing: var(--tracking-tight); font-size: var(--text-md); white-space: nowrap; } .brand span { color: var(--ink-3); font-weight: 500; font-size: var(--text-xs); border: 1px solid var(--line-2); border-radius: var(--radius-pill); padding: 1px 7px; margin-left: var(--space-2); vertical-align: 1px; } .tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs a { position: relative; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--ink-2); font-size: var(--text-sm); font-weight: 520; white-space: nowrap; transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out); } .tabs a:hover { color: var(--ink-1); background: var(--surface-3); } .tabs a.on { color: var(--ink-1); background: var(--surface-3); } .tabs a.on::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -9px; height: 2px; border-radius: 2px; background: var(--accent); } .right { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); } .iconbtn { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-1); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--ink-2); cursor: pointer; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); } .iconbtn:hover { background: var(--surface-3); color: var(--ink-1); } .iconbtn svg { width: 17px; height: 17px; stroke-width: 1.7; } :root[data-theme="dark"] .iconbtn .i-sun, .iconbtn .i-moon { display: none; } :root[data-theme="dark"] .iconbtn .i-moon { display: block; } @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .iconbtn .i-sun { display: none; } :root:where(:not([data-theme="light"])) .iconbtn .i-moon { display: block; } } main { max-width: 1240px; margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-10); } @media (max-width: 760px) { main { padding: var(--space-4); } .topbar { padding: 0 var(--space-4); } } /* ---- form controls: one rule, every control ----------------------------- */ /* The language dropdown on Analytics shipped as a bare