/* ---------- Palette & themes ---------- */ /* Dark is the default; light is an explicit opt-in via data-theme. */ :root { --bg: #07080C; --card: #0E1017; --text: #EEF0F6; --text-2: #A6ADBF; --text-3: #737B8E; --accent: #7A93FF; --accent-2: #F0A05A; --up: #4FCFA6; --down: #FF8A98; --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 14px rgb(0 0 0 / 0.35); color-scheme: dark; } :root[data-theme="light"] { --bg: #F1F2F5; --card: #FFFFFF; --text: #0C0E14; --text-2: #4A5162; --text-3: #818899; --accent: #2547D8; --accent-2: #B4540A; --up: #17795E; --down: #B03A48; --shadow: 0 1px 2px rgb(12 14 20 / 0.04), 0 4px 14px rgb(12 14 20 / 0.05); color-scheme: light; } /* Derived tokens: borders/lines mixed from the text color so they survive theme switches. */ :root { --line: color-mix(in srgb, var(--text) 9%, transparent); --line-strong: color-mix(in srgb, var(--text) 14%, transparent); --hover: color-mix(in srgb, var(--text) 4%, transparent); --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent); --up-soft: color-mix(in srgb, var(--up) 14%, transparent); --down-soft: color-mix(in srgb, var(--down) 14%, transparent); --font-display: "Unbounded", system-ui, sans-serif; --font-text: "Onest", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --radius: 4px; --gap: 16px; } /* ---------- Motion: theme switch & page enter ---------- */ /* Crossfade for the View Transitions API path (see theme_controller). */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 280ms; animation-timing-function: ease; } /* Fallback: the controller briefly adds .theme-anim to while toggling. */ .theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after { transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease, fill 280ms ease, stroke 280ms ease, box-shadow 280ms ease !important; } @media (prefers-reduced-motion: no-preference) { @keyframes page-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .page > * { animation: page-enter 420ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards; } .page > :nth-child(2) { animation-delay: 60ms; } .page > :nth-child(3) { animation-delay: 120ms; } .page > :nth-child(4) { animation-delay: 180ms; } .page > :nth-child(5) { animation-delay: 240ms; } .page > :nth-child(n+6) { animation-delay: 300ms; } /* Don't animate Turbo's cached preview — the real render animates right after. */ html[data-turbo-preview] .page > * { animation: none; } } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; } p { margin: 0; } svg.icon { flex: none; } /* [hidden] has to beat the display rules below — a card, a panel or a chart placeholder carries its own display, which would otherwise keep it on screen. */ [hidden] { display: none !important; } .mono, .num, table, input, select { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; } .page { padding: 28px 24px 48px; display: grid; gap: 24px; } /* A .page nested inside the layout's .page: the outer one already pads. */ .page--flush { padding: 0; } /* ---------- Top bar ---------- */ .topbar { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .topbar__inner { display: flex; align-items: center; gap: 24px; height: 56px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; } .brand .icon { color: var(--accent); width: 22px; height: 22px; } .nav { display: flex; gap: 4px; margin-left: 8px; } .nav__link { padding: 6px 10px; border-radius: var(--radius); color: var(--text-2); font-weight: 500; } .nav__link:hover { background: var(--hover); color: var(--text); } .nav__link[aria-current="page"] { color: var(--text); background: var(--accent-soft); } .topbar__tools { display: flex; align-items: center; gap: 8px; margin-left: auto; } /* Square control shared by the "About" link and the theme switch. */ .icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); cursor: pointer; } .icon-btn:hover { border-color: var(--line-strong); } .icon-btn .icon { color: var(--text-2); } .icon-btn[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent-soft); } .icon-btn[aria-current="page"] .icon { color: var(--accent); } /* The sun and the moon share one cell; only one of them is ever shown. */ .theme-toggle .icon { grid-area: 1 / 1; } .theme-toggle__sun { display: none; } :root[data-theme="light"] .theme-toggle__sun { display: block; } :root[data-theme="light"] .theme-toggle__moon { display: none; } /* ---------- Cards & sections ---------- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .section { display: grid; gap: 12px; } /* Grid children default to min-width:auto, which would let a wide table stretch the whole page instead of scrolling inside its wrapper. */ .page > *, .section > * { min-width: 0; } .section__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .section__head .icon { color: var(--accent); } .section__title { font-size: 15px; } .section__aside { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .page-title { font-size: 22px; } .page-sub { color: var(--text-2); margin-top: 4px; } /* ---------- Forecasts page: hero header & section framing ---------- */ /* Header card with the page-wide filters built in. The two glows echo the chart accents: blue — our model, orange — АПЭКОН. */ /* No overflow:hidden here — the custom-period popup must hang out of the card; the glows are clipped by the ::before's own border-radius instead. */ .hero { position: relative; padding: 22px 22px 18px; display: grid; gap: 18px; } .hero::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(560px 240px at 10% -30%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(460px 220px at 95% 140%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 70%); } .hero > * { position: relative; min-width: 0; } .hero .page-title { font-size: 24px; } .hero__controls { border-top: 1px solid var(--line); padding-top: 16px; } .section__badge { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius); background: var(--accent-soft); } .section__badge .icon { width: 16px; height: 16px; } .section__desc { color: var(--text-3); font-size: 12px; line-height: 1.5; max-width: 78ch; margin-top: -4px; } /* The lead chart gets its own faint glow so it reads as the page's centerpiece. */ .chart-card--hero { background: radial-gradient(640px 220px at 10% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%) var(--card); } /* First-run notice: the database is empty until the first refresh runs. */ .empty-notice { display: flex; gap: 12px; padding: 16px; align-items: flex-start; } .empty-notice__title { font-family: var(--font-display); font-weight: 600; font-size: 13px; } .empty-notice__text { color: var(--text-2); font-size: 12px; margin-top: 4px; max-width: 78ch; } /* ---------- Skeletons ---------- */ /* Every page here now arrives as an empty shell and fills itself from JSON, so every block needs a placeholder that holds its exact box. One primitive does it: a translucent slab built out of --text, so it reads correctly in both themes and survives a theme switch without being repainted. */ .skel { position: relative; overflow: hidden; border-radius: var(--radius); background: color-mix(in srgb, var(--text) 6%, transparent); } .skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 9%, transparent), transparent); animation: skel-sweep 1.4s ease-in-out infinite; } @keyframes skel-sweep { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } } /* A placeholder line borrows the height of the very text it stands in for: it is an inline-block holding a non-breaking space, so its box comes from the surrounding font-size and line-height and nothing shifts on the swap. */ .skel-line { display: inline-block; vertical-align: top; width: 72px; } .skel-line--mid { width: 132px; } .skel-line--wide { width: 100%; max-width: 280px; } /* Skeleton and real content share one grid cell, so the handover is a crossfade in place rather than a jump. */ .swap { display: grid; } .swap > * { grid-area: 1 / 1; min-width: 0; } .swap__skel, .swap__content { transition: opacity 180ms ease; } .swap__content { opacity: 0; } .swap.is-ready .swap__skel { opacity: 0; pointer-events: none; } .swap.is-ready .swap__content { opacity: 1; } /* Blocks whose skeleton *is* the markup being replaced (table bodies, legends, status lines) fade their fresh content in over the same 180 ms. */ .is-revealed { animation: skel-reveal 180ms ease both; } @keyframes skel-reveal { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .is-revealed { animation: none; } .swap__skel, .swap__content { transition: none; } } /* The card placeholder mirrors the real card's grid exactly; only the cursor and the hover affordance are dropped, since there is nothing to click yet. */ .ccard--skel { cursor: default; } .ccard--skel:hover { border-color: var(--line); } .ccard--skel .ccard__sym { background: color-mix(in srgb, var(--text) 6%, transparent); } .ccard--skel .ccard__code .skel-line { width: 42px; } .ccard--skel .ccard__name .skel-line { width: 92px; } .ccard--skel .ccard__value .skel-line { width: 116px; } .ccard--skel .ccard__src .skel-line { width: 108px; } .ccard--skel .ccard__delta .skel-line { width: 124px; } /* The chart placeholder covers the canvas until the first real draw; the two crossfade, so the line never appears on top of a sweeping slab. */ .chart-skel { position: absolute; inset: 0; transition: opacity 180ms ease; } .chart-wrap canvas { opacity: 0; transition: opacity 180ms ease; } .chart-wrap.is-ready canvas { opacity: 1; } .chart-wrap.is-ready .chart-skel { opacity: 0; } /* A failed load: the message keeps the block's voice, the button repeats the very request that failed. */ .load-error { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--text-2); font-size: 12px; } .retry-btn { padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--text-2); font-size: 12px; cursor: pointer; } .retry-btn:hover { border-color: var(--line-strong); color: var(--text); } /* ---------- Currency cards ---------- */ .cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); } .ccard { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 16px; text-align: left; cursor: pointer; transition: border-color 120ms, transform 120ms; min-width: 0; } .ccard:hover { border-color: var(--line-strong); } .ccard[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); } .ccard__head { display: flex; align-items: center; gap: 10px; min-width: 0; } .ccard__sym { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1; } .ccard__code { font-family: var(--font-display); font-weight: 600; font-size: 13px; } .ccard__name { color: var(--text-3); font-size: 12px; margin-top: 2px; } .ccard__value { grid-column: 1; font-size: 24px; font-weight: 500; line-height: 1.1; white-space: nowrap; } .ccard__value small { font-size: 13px; color: var(--text-3); font-weight: 400; margin-left: 4px; } .ccard__delta { grid-column: 1; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; } .ccard__delta .icon { width: 14px; height: 14px; } .ccard__src { grid-column: 1; color: var(--text-3); font-size: 11px; white-space: nowrap; } .ccard__spark { grid-column: 2; grid-row: 1 / 5; align-self: end; width: 96px; height: 40px; color: var(--text-3); } .ccard__spark svg { width: 100%; height: 100%; overflow: visible; } .ccard__empty { grid-column: 1 / -1; color: var(--text-3); } .is-up { color: var(--up); } .is-down { color: var(--down); } .is-flat { color: var(--text-3); } /* ---------- Segmented controls ---------- */ .seg { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); } .seg__btn { padding: 4px 10px; border: 0; border-radius: 3px; background: transparent; color: var(--text-2); font-family: var(--font-mono); font-size: 12px; cursor: pointer; white-space: nowrap; } .seg__btn:hover { color: var(--text); } .seg__btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--text); font-weight: 500; } .controls { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; } .control { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .control__label { color: var(--text-3); font-size: 12px; } /* Source toggles: pill chips, dot colored to match the provider's chart line. */ .chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text-3); font-family: var(--font-mono); font-size: 12px; cursor: pointer; user-select: none; white-space: nowrap; transition: border-color 120ms, color 120ms, background 120ms; } .chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); opacity: 0.35; transition: opacity 120ms, background 120ms; } .chip:hover { border-color: var(--line-strong); color: var(--text-2); } .chip:has(input:checked) { border-color: var(--line-strong); background: var(--hover); color: var(--text); } .chip:has(input:focus-visible) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .chip--cbr:has(input:checked) .chip__dot { background: var(--accent); opacity: 1; } .chip--erapi:has(input:checked) .chip__dot { background: var(--text-3); opacity: 1; } .chip--currencyapi:has(input:checked) .chip__dot { background: var(--text-2); opacity: 1; } .chip--apecon:has(input:checked) .chip__dot { background: var(--accent-2); opacity: 1; } /* Custom date range: a small popup floating over the content, anchored to the right edge of the period segment — right under the "Свой" button. */ .popover-anchor { position: relative; } .popover { position: absolute; top: calc(100% + 6px); right: 0; z-index: 100; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); white-space: nowrap; transform-origin: top right; } /* Opens with a short drop-in from the «Свой» button it hangs under. */ @media (prefers-reduced-motion: no-preference) { @keyframes popover-in { from { opacity: 0; transform: translateY(-6px) scale(0.96); } to { opacity: 1; transform: none; } } .popover:not([hidden]) { animation: popover-in 180ms cubic-bezier(0.2, 0.7, 0.3, 1); } } .input.input--date { width: 148px; height: 30px; padding: 0 8px; font-size: 12px; flex: none; } /* ---------- Chart ---------- */ .chart-card { padding: 16px; display: grid; gap: 14px; } .chart-wrap { position: relative; height: 340px; width: 100%; min-width: 0; } .chart-wrap canvas { max-width: 100%; } .status-line { display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--text-2); font-family: var(--font-mono); font-size: 12px; } .status-line .dot::before { content: "·"; color: var(--text-3); margin-right: 8px; } /* Forecast version playback: play button + slider + "version N of M". */ .playback { display: flex; align-items: center; gap: 12px; } .playback__btn { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--text-2); font-size: 12px; line-height: 1; cursor: pointer; } .playback__btn:hover { border-color: var(--line-strong); color: var(--text); } .playback__slider { flex: 1; min-width: 0; accent-color: var(--accent); } .playback__label { color: var(--text-3); font-family: var(--font-mono); font-size: 12px; white-space: nowrap; } .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); font-family: var(--font-mono); } .legend__item { display: inline-flex; align-items: center; gap: 6px; } .legend__swatch { width: 14px; height: 0; border-top: 2px solid var(--accent); } .legend__swatch--alt { border-top-color: var(--text-3); } .legend__swatch--alt2 { border-top-color: var(--text-2); } .legend__swatch--apecon { border-top-color: var(--accent-2); } .legend__swatch--dashed { border-top-style: dashed; } .legend__swatch--band { height: 8px; border-top-width: 0; border-radius: 2px; background: var(--accent); opacity: 0.18; } .legend__swatch--band.legend__swatch--apecon { background: var(--accent-2); } /* ---------- Two-column area: trend + converter ---------- */ .duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } /* Pin the heads to the top and stretch the cards, so both columns line up even when their content heights differ. */ .duo > .section { grid-template-rows: auto 1fr; align-content: stretch; } /* Forecasts' version charts pair adds a note row between head and card, so both cards still bottom-align regardless of how the notes wrap. */ .duo--charts > .section { grid-template-rows: auto auto 1fr; } .panel { padding: 16px; display: grid; gap: 12px; align-content: start; } /* The duo stretches both cards to one height; --fill pins the marked bottom block (panel__foot, converter__result) to the lower edge. */ .panel--fill { display: flex; flex-direction: column; } .panel__row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .panel__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 12px; } .panel__label { color: var(--text-3); font-size: 12px; } .panel__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .panel__big { font-family: var(--font-mono); font-size: 26px; font-weight: 500; line-height: 1.1; } .panel__note { color: var(--text-3); font-size: 12px; line-height: 1.5; } .panel__note b { color: var(--text-2); font-weight: 500; } /* «Подробнее» link on the dashboard's forecast teaser card. */ .more-link { color: var(--accent); font-weight: 500; } .more-link:hover { text-decoration: underline; } .field { display: grid; gap: 4px; min-width: 0; } .field label { color: var(--text-3); font-size: 12px; } .input, .select { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card); color: var(--text); font-size: 14px; outline: none; } .input:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .converter__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; } .converter__result { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 4px; } /* Forecast teaser: one equal column per source. */ .forecast-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .forecast-cell { display: grid; gap: 6px; align-content: start; } .forecast-cell > .panel__label { display: flex; align-items: center; gap: 6px; } .forecast-cell__delta { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; } /* ---------- Tables ---------- */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { padding: 9px 14px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); } th { color: var(--text-3); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: var(--hover); } td.num, th.num { text-align: right; } td.muted { color: var(--text-3); } td.wrap { white-space: normal; min-width: 240px; max-width: 420px; color: var(--text-2); font-size: 12px; } .table-empty { padding: 24px; color: var(--text-3); text-align: center; } /* ---------- Admin ---------- */ .flash { padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--up) 35%, transparent); border-radius: var(--radius); background: var(--up-soft); color: var(--text); font-size: 13px; } .flash--alert { border-color: color-mix(in srgb, var(--down) 35%, transparent); background: var(--down-soft); } .actions { display: grid; gap: 12px; } .actions form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .btn { height: 34px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--accent-soft); color: var(--text); font-family: var(--font-text); font-size: 13px; font-weight: 500; cursor: pointer; } .btn:hover { border-color: var(--accent); } .btn[disabled] { opacity: 0.6; cursor: progress; } /* ---------- Pills ---------- */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 18px; white-space: nowrap; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill--ok { color: var(--up); background: var(--up-soft); } .pill--fail { color: var(--down); background: var(--down-soft); } .pill--muted { color: var(--text-3); background: var(--hover); } /* ---------- Sources page ---------- */ .providers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } .provider { padding: 16px; display: grid; gap: 14px; } .provider__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .provider__name { font-size: 15px; } .provider__url { color: var(--text-3); font-size: 12px; font-family: var(--font-mono); margin-top: 2px; word-break: break-all; } /* Prose caption (the scoring method) — same look as __url, but words wrap whole. */ .provider__desc { color: var(--text-3); font-size: 12px; font-family: var(--font-mono); margin-top: 2px; max-width: 56ch; } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .stat__label { color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; } .stat__value { font-family: var(--font-mono); font-size: 18px; font-weight: 500; margin-top: 2px; } /* Success share as a donut ring: track in the neutral line color, value arc in the "up" green, percentage centered inside. Sits to the left of the provider stats as the card's visual anchor. */ .provider__body { display: flex; align-items: center; gap: 20px; } .donut-stat { flex: none; display: grid; justify-items: center; gap: 6px; } .donut-stat .donut__num { font-size: 13px; } .donut-stat__empty { width: 64px; height: 64px; display: grid; place-items: center; border: 2px dashed var(--line-strong); border-radius: 50%; color: var(--text-3); font-family: var(--font-mono); } /* The 2x2 stats block hugs the right edge; the donut stays pinned left. */ .stats--duo { margin-left: auto; grid-template-columns: repeat(2, minmax(0, auto)); gap: 12px 48px; } .donut { display: block; } .donut__track { stroke: var(--line-strong); } .donut__value { stroke: var(--up); } .donut__num { fill: var(--text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 500; } /* Accuracy cards: the total-comparisons stat hugs the head's right edge; an empty card stretches its message box to match its neighbour's height. */ .stat--right { text-align: right; flex: none; align-self: start; } .provider--empty { grid-template-rows: auto 1fr; } .accuracy-empty { display: grid; place-content: center; padding: 20px; min-height: 140px; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--text-3); font-size: 13px; line-height: 1.6; text-align: center; } /* Accuracy buckets: only rows where both providers have matured points are cross-comparable — those get the accent tint, the rest step back. */ .accuracy-table tr.is-comparable td { background: var(--accent-soft); } .accuracy-table tr.is-dim td { color: var(--text-3); } /* Its header may wrap — a nowrap header would out-width a narrow card. */ .accuracy-table th { white-space: normal; } .providers > * { min-width: 0; } .filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .filters .select { width: auto; height: 30px; font-size: 12px; } .stat__value--sm { font-size: 13px; margin-top: 6px; } .pager { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--text-3); } .pager__link { padding: 4px 8px; border-radius: var(--radius); color: var(--text-2); } .pager__link:hover { background: var(--hover); color: var(--text); } .pager__info { margin: 0 auto; } /* The forecasts page pages client-side, so its pager entries are buttons. */ button.pager__link { border: 0; background: none; cursor: pointer; } /* Snapshot table: a row click puts that version on the main chart. */ .snapshots tr[data-run-id] { cursor: pointer; } .snapshots tr.is-selected td { background: var(--accent-soft); } /* ---------- Footer ---------- */ .footer { display: flex; justify-content: space-between; gap: 12px; padding: 16px 24px 32px; color: var(--text-3); font-size: 12px; border-top: 1px solid var(--line); } .footer a { color: var(--text-2); } .footer a:hover { color: var(--text); text-decoration: underline; } /* ---------- About page ---------- */ /* Plain prose cards: a reading measure keeps lines short on wide screens. */ .about { padding: 18px; display: grid; gap: 10px; align-content: start; } .about p, .about li { color: var(--text-2); max-width: 78ch; } .about ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; } .about b { color: var(--text); font-weight: 500; } .about a { color: var(--accent); } .about a:hover { text-decoration: underline; } .about--table { padding: 18px 0 0; gap: 0; } .about--table .section__head, .about--table .panel__note { padding: 0 18px; } .about--table .panel__note { padding-top: 12px; padding-bottom: 18px; } .about--table .about__table { margin-top: 14px; } .about__table th:first-child, .about__table td:first-child { padding-left: 18px; } .about__table th:last-child, .about__table td:last-child { padding-right: 18px; } .about__table td { color: var(--text-2); } .about__table td:first-child { color: var(--text); } /* Quiet warning card: readable, not alarming. */ .about--note { border-color: color-mix(in srgb, var(--accent-2) 35%, transparent); background: color-mix(in srgb, var(--accent-2) 8%, var(--card)); } .about--note .section__badge { background: color-mix(in srgb, var(--accent-2) 18%, transparent); } .about--note .section__badge .icon { color: var(--accent-2); } /* ---------- Responsive ---------- */ @media (max-width: 1100px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .duo, .providers { grid-template-columns: 1fr; } .chart-wrap { height: 280px; } .section__aside { margin-left: 0; width: 100%; } } @media (max-width: 560px) { .container { padding: 0 14px; } .page { padding: 18px 14px 32px; gap: 18px; } .cards { grid-template-columns: 1fr; } .converter__grid { grid-template-columns: 1fr; } .forecast-cells { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr 1fr; } .chart-wrap { height: 240px; } .stats--duo { margin-left: 0; flex: 1; gap: 12px 16px; } .playback { flex-wrap: wrap; } .playback__slider { flex-basis: 100%; order: 1; } .topbar__inner { gap: 10px; } .brand { font-size: 15px; gap: 8px; } /* Three nav links don't fit next to the wordmark — the logo carries the brand. */ .brand span { display: none; } .nav { margin-left: 0; gap: 2px; } .nav__link { padding: 6px 8px; } .page-title { font-size: 18px; } .seg { flex-wrap: wrap; } /* Narrow screens: the anchor sits near the left edge, so the popup grows rightwards. */ .popover { right: auto; left: 0; transform-origin: top left; } .input.input--date { width: 128px; } }