/* =========================================================
AutoNergy · Ireland, Momentum Design Language
Single-view bento · sidenav · true-dynamic responsive
========================================================= */
/* ---------- Design Tokens ---------- */
:root {
--orange: #FF5300;
--orange-600: #E64A00;
--orange-700: #B83A00;
--orange-deep: #1B0B03;
--orange-dark: #2A0E02;
--ink: #130600;
--ink-2: #1F0903;
--peach: #FFD9C2;
--peach-2: #FFE7D5;
--paper: #FFFFFF;
--paper-2: #FAF6F2;
--paper-3: #F2ECE5;
--line: rgba(19, 6, 0, 0.08);
--text: #130600;
--text-sub: rgba(19, 6, 0, 0.62);
--text-mute: rgba(19, 6, 0, 0.42);
--text-inv: #FFFFFF;
--success: #1DA366;
--danger: #D24B2A;
--r-xl: 28px;
--r-lg: 20px;
--r-md: 14px;
--r-pill: 999px;
--gap: 14px;
--pad: 22px;
--sidenav-w: 0px; /* legacy, rail is fixed-position now */
--rail-w: 58px;
--rail-gap: 14px;
--shadow-1: 0 2px 8px rgba(19, 6, 0, 0.04), 0 10px 30px rgba(19, 6, 0, 0.05);
--shadow-2: 0 4px 16px rgba(19, 6, 0, 0.06), 0 24px 60px rgba(19, 6, 0, 0.10);
--shadow-orange: 0 20px 60px rgba(255, 83, 0, 0.28), 0 4px 20px rgba(255, 83, 0, 0.18);
--shadow-float: 0 30px 80px rgba(19, 6, 0, 0.28);
--ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
--ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 180ms;
--dur-base: 360ms;
--dur-slow: 620ms;
}
:root[data-theme="dark"] {
--paper: #0B0402;
--paper-2: #140703;
--paper-3: #1B0B03;
--text: #FFFFFF;
--text-sub: rgba(255, 255, 255, 0.66);
--text-mute: rgba(255, 255, 255, 0.42);
--line: rgba(255, 255, 255, 0.08);
}
/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
height: 100%;
font-family: 'Outfit', system-ui, -apple-system, sans-serif;
font-feature-settings: "ss01", "tnum";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background: var(--paper-2);
color: var(--text);
line-height: 1.4;
letter-spacing: -0.005em;
overscroll-behavior: none;
min-height: 100vh;
overflow: hidden; /* desktop default non-scrolling for the dashboard */
}
/* Legal pages (privacy / terms / sources / cookies / about) need to scroll. */
body.legal-body, body.blog-body { overflow: auto !important; }
html:has(body.legal-body), html:has(body.blog-body) { overflow: auto !important; }
/* Hide scrollbars globally, keep functional scroll where needed */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.02em; }
/* Internal navigation (referrer is same-origin, no country switch), hide
the splash entirely so the dashboard appears without any orange flash. */
html.no-splash #splash { display: none !important; }
/* ====== Loading skeleton ===========================================
Set on by the inline head script the moment the page boots,
removed inside renderAll() once real numbers are painted. Without it
the dashboard renders default placeholder text ("0", ", ") for the
2-3 seconds it takes to fetch + aggregate per-year JSON, which makes
the site look dead. With it, every figure gets a shimmer stripe in
its slot so the page feels alive immediately. */
@keyframes skel-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
html.is-loading .hero-big-number,
html.is-loading #hero-story,
html.is-loading .hpill-val,
html.is-loading .hpill-delta,
html.is-loading #brand-top-name,
html.is-loading #brand-top-share,
html.is-loading #last-updated,
html.is-loading [data-skel] {
color: transparent !important;
position: relative;
border-radius: 6px;
background: linear-gradient(90deg,
rgba(0,0,0,0.06) 0%,
rgba(0,0,0,0.12) 50%,
rgba(0,0,0,0.06) 100%);
background-size: 200% 100%;
animation: skel-shimmer 1.4s ease-in-out infinite;
/* Make sure the placeholder area is at least the height of a line. */
min-height: 1em;
}
/* The hero number is huge — shimmer wider strip + don't apply min-height
per-line so the empty bar visually matches the "606,240,566" footprint. */
html.is-loading .hero-big-number {
display: inline-block; min-width: 220px; height: 0.92em; border-radius: 8px;
}
html.is-loading .hpill-val { display: inline-block; min-width: 56px; height: 0.95em; }
html.is-loading .hpill-delta { display: inline-block; min-width: 70px; height: 0.85em; opacity: 0.7; }
html.is-loading #hero-story { display: block; max-width: 580px; height: 2.6em; }
html.is-loading #brand-top-name { display: inline-block; min-width: 140px; height: 0.95em; }
html.is-loading #brand-top-share { display: inline-block; min-width: 240px; height: 0.85em; opacity: 0.7; }
/* Empty chart hosts: paint a shimmer block matching their natural size so
the cards never look like dead grey holes during boot. */
html.is-loading #fuel-chart,
html.is-loading #brand-bars,
html.is-loading #county-map,
html.is-loading #january-grid,
html.is-loading #vault-summary {
background: linear-gradient(90deg,
rgba(255,255,255,0.04) 0%,
rgba(255,255,255,0.10) 50%,
rgba(255,255,255,0.04) 100%);
background-size: 200% 100%;
animation: skel-shimmer 1.4s ease-in-out infinite;
border-radius: 8px;
min-height: 180px;
}
:root[data-theme="light"] html.is-loading #fuel-chart,
:root[data-theme="light"] html.is-loading #brand-bars,
:root[data-theme="light"] html.is-loading #county-map,
:root[data-theme="light"] html.is-loading #january-grid,
:root[data-theme="light"] html.is-loading #vault-summary {
background: linear-gradient(90deg,
rgba(0,0,0,0.04) 0%,
rgba(0,0,0,0.10) 50%,
rgba(0,0,0,0.04) 100%);
background-size: 200% 100%;
}
/* Hero number color override — without this we'd still be using the
theme's --ink color for the (transparent) text background. */
html.is-loading.is-loading.is-loading {} /* specificity nudge, kept blank */
/* When arriving via country-switch (?sw=1) the splash itself becomes the
"arrival wipe". */
html.skip-splash #splash { transition-duration: 380ms; }
html.skip-splash #splash .splash-mark,
html.skip-splash #splash .splash-eyebrow,
html.skip-splash #splash .splash-sub { display: none; }
html.skip-splash #splash .splash-title {
font-size: clamp(56px, 9vw, 110px);
letter-spacing: -0.04em;
animation: arrivalRise 380ms var(--ease-spring) both;
}
@keyframes arrivalRise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------- Splash ---------- */
.splash {
position: fixed; inset: 0; z-index: 200;
background: var(--orange);
display: flex; align-items: center; justify-content: center;
transition: opacity 600ms var(--ease-inout), visibility 600ms;
}
.splash.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.splash.fast { transition-duration: 240ms; }
.splash-inner {
text-align: center; color: white;
display: flex; flex-direction: column; align-items: center;
}
.splash-mark {
margin-bottom: 24px;
display: flex; align-items: center; justify-content: center;
width: 100%;
}
.splash-mark img,
.splash-mark svg {
display: block;
margin: 0 auto;
filter: drop-shadow(0 8px 30px rgba(0,0,0,0.25));
animation: splashMark 800ms var(--ease-spring) both;
}
@keyframes splashMark { from { transform: scale(0.6) rotate(-8deg); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.splash-eyebrow { display: block; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.85; font-weight: 500; }
.splash-title { font-size: clamp(64px, 10vw, 120px); font-weight: 700; line-height: 1; margin: 8px 0 6px; letter-spacing: -0.03em; }
.splash-sub { font-size: 16px; opacity: 0.78; font-weight: 400; }
/* ---------- App shell ---------- */
.app {
position: fixed; inset: 0;
display: block;
background: var(--paper-2);
}
/* =========================================================
LEFT NAV RAIL, vertical pane hosting:
1. Year-focus pill (above country switcher)
2. Country switcher
3. Content nav (Blogs / About / Theme)
Width was 58px; bumped to 70px to fit the 56-wide year card cleanly.
========================================================= */
.country-rail {
position: fixed;
left: 14px; top: 14px; bottom: 14px;
transform: none;
width: 70px;
display: flex; flex-direction: column;
gap: 10px;
padding: 0;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
z-index: 50;
}
.main-col { padding-left: calc(70px + 28px); }
.country-rail-section {
display: flex; flex-direction: column;
align-items: center;
gap: 6px;
padding: 8px 6px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 22px;
box-shadow: var(--shadow-2);
}
.country-rail-section + .country-rail-section { margin-top: 0; }
.country-rail-foot { margin-top: auto; }
/* Mobile-only triggers, hidden on desktop. */
.rail-mobile-trigger { display: none; }
/* Brand logo at the top of the rail. The black logo shows in light mode,
the white one in dark mode, both crops trim to the rail width. */
.country-rail-brand {
padding: 8px 4px;
}
.rail-brand {
display: flex; align-items: center; justify-content: center;
width: 100%;
border-radius: 12px;
transition: transform var(--dur-fast) var(--ease-spring);
}
.rail-brand:hover { transform: scale(1.04); }
.rail-brand-img {
width: 100%; max-width: 56px; height: auto;
object-fit: contain;
}
.rail-brand-img.dark { display: none; }
:root[data-theme="dark"] .rail-brand-img.light { display: none; }
:root[data-theme="dark"] .rail-brand-img.dark { display: block; }
:root[data-theme="dark"] .country-rail-section {
background: rgba(20, 7, 3, 0.92);
border-color: rgba(255,255,255,0.08);
}
.rail-btn {
width: 42px; height: 42px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: transparent;
color: var(--text);
font-size: 19px;
position: relative;
transition: background var(--dur-fast) var(--ease-inout), transform var(--dur-fast);
border: 1.5px solid transparent;
}
@media (hover: hover) {
.rail-btn:hover { background: var(--paper-3); transform: scale(1.06); }
}
.rail-btn { touch-action: manipulation; }
.rail-btn.active {
background: var(--orange);
color: white;
border-color: var(--orange);
box-shadow: 0 4px 14px rgba(255,83,0,0.34);
}
.rail-btn .rail-flag { font-size: 19px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.rail-btn svg { width: 18px; height: 18px; }
/* Cross-platform SVG flags (replace the emoji versions on Windows/Android).
Rendered by enhanceFlags() in main.js. The wrapper sits at 22x14 so it
matches the visual weight of the previous emoji glyphs in the round
42x42 rail buttons. Active country gets a subtle white ring so it
reads cleanly against the orange highlight background. */
.rail-btn .rail-flag-svg,
.rail-btn .rail-flag .flag-svg {
width: 22px;
height: 16px;
border-radius: 2.5px;
overflow: hidden;
box-shadow: 0 0 0 0.5px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.18);
line-height: 0;
}
/* Global button keeps the stroke-only meridian glyph at the same 22x22
visual weight as country flags — no special circular treatment, no
custom active ring. The standard .rail-btn.active orange fill applies
uniformly across every rail button. */
.rail-btn[data-country="ALL"] .rail-flag-svg.rail-flag-globe {
width: 22px !important;
height: 22px !important;
flex: 0 0 22px !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent;
}
.rail-btn[data-country="ALL"] .rail-flag-svg.rail-flag-globe svg {
width: 22px;
height: 22px;
color: var(--text-sub);
}
.rail-btn[data-country="ALL"].active .rail-flag-svg.rail-flag-globe svg {
color: #fff;
}
.rail-btn.active .rail-flag-svg,
.rail-btn.active .rail-flag .flag-svg {
box-shadow: 0 0 0 1px rgba(255,255,255,0.85), 0 1px 3px rgba(0,0,0,0.25);
}
.rail-trigger-flag .flag-svg {
width: 24px; height: 17px;
border-radius: 3px;
box-shadow: 0 0 0 0.5px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.18);
}
.topbar-flag .flag-svg { width: 20px; height: 14px; vertical-align: -2px; border-radius: 2px; }
.rail-btn .rail-tip {
position: absolute; left: calc(100% + 10px); top: 50%;
transform: translateY(-50%) translateX(-4px);
background: var(--ink); color: white;
font-size: 11px; font-weight: 500;
padding: 5px 9px; border-radius: 6px;
white-space: nowrap;
opacity: 0; pointer-events: none;
transition: opacity 140ms, transform 140ms;
letter-spacing: 0.02em;
}
@media (hover: hover) {
.rail-btn:hover .rail-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
}
/* Year-focus pill on the rail, rounded rectangle that fits a from→to
range cleanly on two lines (year, arrow, year). Same orange gradient
as before, but bigger and more legible. */
.rail-year {
width: 56px; height: 72px;
border-radius: 14px;
padding: 6px 4px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 2px;
background: linear-gradient(180deg, var(--orange), #E64A00);
color: white;
position: relative;
box-shadow: 0 4px 14px rgba(255,83,0,0.34);
cursor: pointer;
transition: transform var(--dur-fast) var(--ease-spring);
}
.rail-year:hover { transform: scale(1.04); }
.rail-year svg { width: 14px; height: 14px; opacity: 0.9; }
.rail-year-label-val {
font-size: 10.5px; font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
line-height: 1.1;
display: flex; flex-direction: column; align-items: center;
gap: 1px;
}
.rail-year-label-val span { display: block; text-align: center; line-height: 1; }
.rail-year-label-val .ry-arrow { font-size: 9px; opacity: 0.85; }
.rail-year-label-val .ry-monthly { font-size: 9.5px; }
/* Generic content-nav button (Blogs / About). Same shape as country flag. */
.rail-link {
width: 42px; height: 42px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--text-sub);
background: transparent;
position: relative;
transition: background var(--dur-fast) var(--ease-inout), color var(--dur-fast);
}
@media (hover: hover) {
.rail-link:hover { background: var(--paper-3); color: var(--text); }
}
.rail-link { touch-action: manipulation; }
.rail-link svg { width: 18px; height: 18px; }
.rail-link .rail-tip {
position: absolute; left: calc(100% + 10px); top: 50%;
transform: translateY(-50%) translateX(-4px);
background: var(--ink); color: white;
font-size: 11px; font-weight: 500;
padding: 5px 9px; border-radius: 6px;
white-space: nowrap;
opacity: 0; pointer-events: none;
transition: opacity 140ms, transform 140ms;
}
@media (hover: hover) {
.rail-link:hover .rail-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
}
/* Theme toggle, sits as the bottom item of the left rail's foot section */
.theme-circle {
position: relative;
left: auto; bottom: auto;
width: 42px; height: 42px;
border-radius: 50%;
background: transparent;
border: none;
display: flex; align-items: center; justify-content: center;
color: var(--text-sub);
box-shadow: none;
z-index: auto;
transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast), color var(--dur-fast);
}
@media (hover: hover) {
.theme-circle:hover { background: var(--paper-3); color: var(--text); transform: rotate(-12deg) scale(1.04); }
:root[data-theme="dark"] .theme-circle:hover { background: rgba(255,255,255,0.06); }
}
.theme-circle { touch-action: manipulation; }
.theme-circle svg { width: 18px; height: 18px; }
/* Legacy sidenav, kept hidden so old markup doesn't break */
.sidenav { display: none !important; }
/* =========================================================
LEGACY SIDENAV (hidden)
========================================================= */
.sidenav {
background: var(--ink);
color: rgba(255, 255, 255, 0.86);
padding: 20px 14px 16px;
display: flex; flex-direction: column;
min-height: 0;
position: relative;
z-index: 5;
}
.sidenav-brand {
display: flex; align-items: center; gap: 10px;
padding: 2px 6px 18px;
}
.side-mark {
background: var(--orange);
color: white;
padding: 6px;
border-radius: 8px;
display: flex;
box-shadow: 0 6px 20px rgba(255,83,0,0.35);
}
.side-wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.side-brand-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: white; }
.side-brand-tag { font-size: 9.5px; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.16em; margin-top: 2px; }
.sidenav-list {
display: flex; flex-direction: column; gap: 3px;
margin-top: 4px;
}
.side-item {
display: flex; align-items: center; gap: 11px;
padding: 10px 12px;
border-radius: 12px;
font-size: 13px; font-weight: 500;
color: rgba(255, 255, 255, 0.66);
text-align: left;
transition: background var(--dur-fast) var(--ease-inout), color var(--dur-fast), transform var(--dur-fast);
width: 100%;
letter-spacing: -0.005em;
}
.side-item:hover {
background: rgba(255, 255, 255, 0.06);
color: white;
}
.side-item.active {
background: rgba(255, 83, 0, 0.15);
color: var(--orange);
}
.side-item.active::before {
content: '';
position: absolute;
left: 0;
width: 3px; height: 22px;
background: var(--orange);
border-radius: 0 3px 3px 0;
margin-left: -14px;
}
.side-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.side-icon svg { width: 18px; height: 18px; }
.side-label { flex: 1; }
.sidenav-divider {
height: 1px;
background: rgba(255, 255, 255, 0.06);
margin: 16px 4px 12px;
}
.sidenav-foot {
margin-top: auto;
display: flex; flex-direction: column;
gap: 3px;
}
.side-country-label {
font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(255, 255, 255, 0.36); font-weight: 500;
padding: 4px 10px 8px;
}
.side-country {
display: flex; align-items: center; gap: 9px;
padding: 8px 10px;
border-radius: 10px;
font-size: 12.5px; font-weight: 500;
color: rgba(255, 255, 255, 0.58);
text-align: left;
transition: all var(--dur-fast) var(--ease-inout);
}
.side-country:hover:not([disabled]) { background: rgba(255, 255, 255, 0.05); color: white; }
.side-country.active {
color: white;
background: rgba(255, 255, 255, 0.06);
}
.side-country[disabled] { opacity: 0.4; cursor: not-allowed; }
.side-country .flag { font-size: 15px; }
.side-country-name { flex: 1; }
.side-country-pill {
font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase;
padding: 2px 6px; border-radius: 4px;
background: rgba(29, 163, 102, 0.18); color: #3EE59E;
}
.side-country-pill.soon {
background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.45);
}
.side-upgrade {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin-top: 12px;
padding: 10px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.72);
font-size: 11.5px; font-weight: 500;
letter-spacing: 0.02em;
transition: all var(--dur-fast) var(--ease-inout);
}
.side-upgrade:hover { background: rgba(255, 255, 255, 0.08); color: white; }
/* =========================================================
MAIN COLUMN
========================================================= */
.main-col {
display: flex; flex-direction: column;
min-width: 0;
width: 100%; height: 100vh;
position: relative;
padding-left: calc(var(--rail-w) + 28px); /* clear the floating rail */
}
/* Topbar replaced by the left-rail; keep markup for back-compat but hide. */
.topbar {
display: none;
}
.side-toggle {
display: none;
width: 36px; height: 36px; border-radius: 50%;
align-items: center; justify-content: center;
color: var(--text-sub);
}
.side-toggle:hover { background: var(--paper-3); color: var(--text); }
.topbar-title { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.topbar-country { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); }
.topbar-nav { display: flex; align-items: center; gap: 4px; margin-left: 16px; }
.topbar-nav a, .topbar-nav button {
font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
padding: 6px 12px; border-radius: var(--r-pill);
color: var(--text-sub);
transition: background var(--dur-fast), color var(--dur-fast);
}
.topbar-nav a:hover, .topbar-nav button:hover { background: var(--paper-3); color: var(--text); }
@media (max-width: 700px) { .topbar-nav { display: none; } }
.topbar-flag { font-size: 17px; }
.topbar-sep { color: var(--text-mute); font-weight: 400; }
.topbar-section { color: var(--text-sub); font-weight: 500; }
.year-control {
margin-left: auto;
display: flex; align-items: center; gap: 12px;
flex: 1 1 auto;
max-width: 620px;
min-width: 0;
}
.year-label {
font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--text-mute); font-weight: 500;
white-space: nowrap;
}
/* =========================================================
YEAR / RANGE DROPDOWN , reference: clean "Monthly ▾" pill
========================================================= */
.year-pills.year-dropdown-host {
position: relative;
flex: 0 0 auto;
padding: 0;
background: transparent;
border-radius: 0;
z-index: 30;
}
.rd-trigger {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 12px 7px 12px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 12.5px; font-weight: 600;
color: var(--ink);
letter-spacing: -0.005em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
transition: background var(--dur-fast), border-color var(--dur-fast);
box-shadow: 0 1px 2px rgba(19,6,0,0.04);
}
.rd-trigger:hover { background: var(--paper-3); }
.rd-trigger svg { color: var(--text-sub); flex: 0 0 auto; }
.rd-trigger-caret { transition: transform var(--dur-fast); }
.rd-trigger[aria-expanded="true"] .rd-trigger-caret { transform: rotate(180deg); }
.rd-trigger-label { font-weight: 600; }
.rd-pop {
position: absolute;
top: calc(100% + 8px); right: 0;
min-width: 360px; max-width: 420px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 16px;
box-shadow: var(--shadow-2);
opacity: 0; pointer-events: none;
transform: translateY(-4px);
transition: opacity 180ms var(--ease-spring), transform 180ms var(--ease-spring);
z-index: 40;
}
.rd-pop.on { opacity: 1; pointer-events: auto; transform: translateY(0); }
.rd-mode {
display: inline-flex; gap: 2px;
background: var(--paper-3);
padding: 3px;
border-radius: 999px;
margin-bottom: 12px;
}
.rd-mode-btn {
padding: 5px 14px;
font-size: 11.5px; font-weight: 600;
color: var(--text-sub);
border-radius: 999px;
letter-spacing: 0.02em;
transition: background var(--dur-fast), color var(--dur-fast);
}
.rd-mode-btn:hover { color: var(--ink); }
.rd-mode-btn.active { background: var(--orange); color: white; }
.rd-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.rd-col { display: flex; flex-direction: column; gap: 6px; }
.rd-label {
font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--text-mute); font-weight: 600;
}
.rd-selects {
display: flex; gap: 6px;
}
.rd-selects select {
flex: 1; min-width: 0;
padding: 7px 8px 7px 10px;
font-family: inherit; font-size: 12.5px; font-weight: 600;
color: var(--ink);
background: var(--paper-3);
border: 1px solid transparent;
border-radius: 8px;
cursor: pointer;
-webkit-appearance: none; appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 8px center;
padding-right: 24px;
}
.rd-selects select:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.rd-pop:not(.mode-monthly) .rd-month { display: none; }
.rd-presets {
display: flex; flex-wrap: wrap; gap: 4px;
margin-bottom: 12px;
padding: 10px 0 0;
border-top: 1px solid var(--line);
}
.rd-preset {
padding: 5px 10px;
font-size: 11px; font-weight: 600;
color: var(--text-sub);
background: var(--paper-3);
border-radius: 999px;
letter-spacing: 0.02em;
transition: background var(--dur-fast), color var(--dur-fast);
}
.rd-preset:hover { background: var(--orange); color: white; }
.rd-foot {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding-top: 4px;
flex-wrap: wrap;
}
.rd-readout {
font-size: 11px; color: var(--text-mute);
font-variant-numeric: tabular-nums;
flex: 1 1 auto;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
line-height: 1.35;
}
.rd-apply {
padding: 7px 16px;
font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
color: white;
background: var(--orange);
border-radius: 999px;
box-shadow: 0 2px 8px rgba(255,83,0,0.32);
transition: background var(--dur-fast);
}
@media (hover: hover) {
.rd-apply:hover { background: var(--orange-700); }
}
.rd-apply { touch-action: manipulation; }
:root[data-theme="dark"] .rd-trigger { background: rgba(20,7,3,0.9); }
:root[data-theme="dark"] .rd-pop { background: rgba(20,7,3,0.96); }
:root[data-theme="dark"] .rd-selects select {
background: rgba(255,255,255,0.06); color: white;
background-image: url("data:image/svg+xml;utf8,");
}
@media (max-width: 700px) {
.rd-pop { left: auto; right: 0; min-width: 280px; }
.rd-trigger-label { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
}
.year-pills.year-slider-host { flex: 1 1 auto; min-width: 0; padding: 0; background: transparent; border-radius: 0; }
.year-slider {
position: relative;
display: flex; align-items: center; gap: 14px;
flex: 1 1 auto;
min-width: 0;
padding: 4px 0 14px; /* room for tick labels below */
}
.ys-track {
position: relative;
flex: 1 1 auto;
height: 4px; min-width: 160px;
background: var(--paper-3);
border-radius: 2px;
cursor: pointer;
}
.ys-fill {
position: absolute; top: 0; bottom: 0;
background: linear-gradient(90deg, #FF7A3D, var(--orange));
border-radius: 2px;
transition: left 240ms var(--ease-spring), width 240ms var(--ease-spring);
pointer-events: none;
}
.ys-thumb {
position: absolute;
top: 50%;
width: 16px; height: 16px;
border-radius: 50%;
background: white;
border: 2px solid var(--orange);
box-shadow: 0 4px 14px rgba(255,83,0,0.34);
transform: translate(-50%, -50%);
cursor: grab;
transition: transform 140ms var(--ease-spring), left 240ms var(--ease-spring);
z-index: 3;
}
.ys-thumb[data-handle="from"] { background: white; }
.ys-thumb[data-handle="to"] { background: var(--orange); border-color: var(--orange-700); }
.ys-thumb:active { cursor: grabbing; transform: translate(-50%, -50%) scale(1.18); }
.ys-thumb:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.ys-ticks {
position: absolute;
left: 0; right: 0; top: 50%;
transform: translateY(-50%);
display: flex; justify-content: space-between;
pointer-events: none;
height: 18px; align-items: center;
}
.ys-yeartick {
pointer-events: auto;
background: transparent;
padding: 6px 2px;
display: flex; flex-direction: column; align-items: center; gap: 2px;
position: relative;
flex: 0 0 auto;
}
.ys-yeartick .ys-tick-dot {
width: 3px; height: 3px;
border-radius: 50%;
background: rgba(19,6,0,0.22);
transition: background var(--dur-fast), transform var(--dur-fast);
}
.ys-yeartick.in-range .ys-tick-dot { background: var(--orange); }
.ys-yeartick.disabled { cursor: not-allowed; }
.ys-yeartick.disabled .ys-tick-dot { background: rgba(19,6,0,0.10); }
.ys-yeartick.disabled .ys-tick-label { color: rgba(19,6,0,0.22); }
.ys-yeartick:hover:not(.disabled) .ys-tick-dot { transform: scale(1.6); }
.ys-yeartick .ys-tick-label {
position: absolute;
top: 14px;
font-size: 9px; letter-spacing: 0.04em;
color: var(--text-mute);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ys-readout {
display: flex; flex-direction: column; align-items: flex-end;
gap: 1px;
flex: 0 0 auto;
min-width: 76px;
}
.ys-readout-label {
font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--text-mute); font-weight: 500;
}
.ys-readout-value {
font-size: 16px; font-weight: 700; color: var(--orange);
letter-spacing: -0.02em; line-height: 1.05;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ys-readout-sub {
font-size: 9.5px; color: var(--text-mute);
letter-spacing: 0.02em; font-weight: 500;
margin-top: 1px;
}
:root[data-theme="dark"] .ys-track { background: rgba(255,255,255,0.08); }
:root[data-theme="dark"] .ys-yeartick .ys-tick-dot { background: rgba(255,255,255,0.2); }
/* =========================================================
STAGE (bento)
========================================================= */
.stage {
flex: 1 1 auto;
width: 100%;
align-self: stretch;
position: relative;
/* The topbar above us was removed, claim that vertical space for the cards
by giving the stage symmetric padding. The bottom gap leaves a clean
finishing edge under every card so the rounded corners read correctly. */
padding: 18px 20px 22px;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--gap);
min-height: 0;
overflow: hidden;
}
/* Bento placements (desktop 12-col)
Row 2: Brand throne 3, County 3, Seasonality 3, Vault 3, vault is now
a real square card with two stacked stats inside. */
.card-hero { grid-column: 1 / span 5; grid-row: 1; }
.card-fuel { grid-column: 6 / span 7; grid-row: 1; }
.card-brands { grid-column: 1 / span 3; grid-row: 2; }
.card-county { grid-column: 4 / span 4; grid-row: 2; }
.card-january { grid-column: 8 / span 3; grid-row: 2; }
.card-vault { grid-column: 11 / span 2; grid-row: 2; }
/* Card base, no CSS transition on transform (GSAP owns that).
Hover lift uses box-shadow only so GSAP transforms aren't disturbed. */
.card {
position: relative;
border-radius: var(--r-xl);
padding: var(--pad);
overflow: hidden;
display: flex; flex-direction: column;
cursor: pointer;
min-height: 0;
will-change: transform, opacity;
transition: box-shadow var(--dur-base) var(--ease-spring);
}
.card:hover:not(.is-expanded) { box-shadow: var(--shadow-2); }
.card:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
/* Colors per card */
.card-hero {
background: linear-gradient(135deg, #FF5300 0%, #E64A00 60%, #B83A00 100%);
color: white;
box-shadow: var(--shadow-orange);
}
.card-hero::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.18) 0%, transparent 50%);
pointer-events: none;
}
.card-fuel {
background: linear-gradient(180deg, #140703 0%, #1B0B03 100%);
color: white;
box-shadow: var(--shadow-2);
/* Tighter top so the chart gets ~24px more vertical room. */
padding-top: 14px;
}
.card-fuel .card-chrome { margin-bottom: 6px; }
.card-fuel .fuel-headline { margin-bottom: 4px; }
.card-fuel .fuel-chart {
/* Locked layout — chart sits cleanly inside the card padding. SVG uses
viewBox 0 0 806 313 with gutters carved out for the % labels (left)
and right card border, so labels never overlap colored bands. With
preserveAspectRatio="none" on the SVG, an 8px h-padding gives even
breathing room on both sides so axis labels don't kiss the edge. */
margin: 0;
padding: 0 8px;
box-sizing: border-box;
}
.card-fuel .fuel-chart svg {
width: 100%;
height: 100%; /* fit-in-parent slot, never overflow the card */
display: block;
}
.card-brands {
background: var(--paper);
color: var(--text);
box-shadow: var(--shadow-1);
border: 1px solid var(--line);
}
.card-county {
background: linear-gradient(180deg, #FFE7D5 0%, #FFD9C2 100%);
color: var(--ink);
box-shadow: var(--shadow-1);
}
.card-january {
background: #0B0402;
color: white;
box-shadow: var(--shadow-2);
}
.card-vault {
/* Soft warm gradient instead of pure orange so the white tables read well
without burning the eye. The faint grid pattern underneath gives the
"raw data table" feel. */
background:
linear-gradient(180deg, #2A0E02 0%, #401C09 60%, #5A2A14 100%);
color: white;
box-shadow: var(--shadow-2);
padding: 16px 16px 14px;
position: relative;
overflow: hidden;
}
.card-vault::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background:
linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px) 0 0/100% 22px,
linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px) 0 0/22px 100%;
opacity: 0.55;
mask-image: linear-gradient(180deg, black, rgba(0,0,0,0.4));
-webkit-mask-image: linear-gradient(180deg, black, rgba(0,0,0,0.4));
}
.card-vault > * { position: relative; }
/* ---- Expanded state ---- */
.stage.is-expanded { cursor: default; } /* close via X button only */
.card.is-expanded {
position: absolute;
inset: 16px 20px 8px 20px; /* fills the stage */
grid-column: unset; grid-row: unset;
z-index: 10;
box-shadow: var(--shadow-float), var(--shadow-orange);
cursor: default;
}
.card.is-expanded:hover { transform: none; }
/* Other cards push-aside, GSAP owns transform, CSS just disables clicks */
.stage.is-expanded .card:not(.is-expanded) {
pointer-events: none;
}
/* Staggered entry on first load, only runs once, doesn't conflict with GSAP later */
.stage.is-fresh .card {
opacity: 0;
transform: translateY(18px) scale(0.985);
animation: cardEnter 700ms var(--ease-spring) forwards;
}
.stage.is-fresh .card:nth-child(1) { animation-delay: 60ms; }
.stage.is-fresh .card:nth-child(2) { animation-delay: 140ms; }
.stage.is-fresh .card:nth-child(3) { animation-delay: 220ms; }
.stage.is-fresh .card:nth-child(4) { animation-delay: 280ms; }
.stage.is-fresh .card:nth-child(5) { animation-delay: 340ms; }
.stage.is-fresh .card:nth-child(6) { animation-delay: 400ms; }
@keyframes cardEnter {
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ---- Card chrome ---- */
.card-chrome {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 14px;
}
.card-kicker {
font-size: 10.5px; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--text-mute);
}
.card-hero .card-kicker { color: rgba(255, 255, 255, 0.78); }
.dark-kicker { color: rgba(255, 255, 255, 0.55) !important; }
/* Always-peach cards keep their kicker dark even in dark mode (peach BG never inverts). */
.card-county .card-kicker { color: rgba(19, 6, 0, 0.55) !important; }
.card-county .card-title { color: var(--ink); }
.card-county .card-sub { color: rgba(19, 6, 0, 0.62); }
.card-expand {
width: 28px; height: 28px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: currentColor; opacity: 0.45;
transition: opacity var(--dur-fast) var(--ease-inout), background var(--dur-fast);
}
.card-expand:hover { opacity: 1; background: rgba(0,0,0,0.08); }
.card-title { font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.card-title.light { color: white; }
.card-sub { font-size: 13px; color: var(--text-sub); margin-top: 4px; }
.card-sub.light { color: rgba(255, 255, 255, 0.58); }
/* =========================================================
HERO CARD
========================================================= */
.hero-body { display: flex; flex-direction: column; justify-content: space-between; flex: 1; min-height: 0; gap: 6px; }
.hero-number-block { margin-top: 2px; }
.hero-big-number {
display: block;
font-size: clamp(40px, 5.4vw, 84px);
font-weight: 700;
line-height: 0.92;
letter-spacing: -0.045em;
font-variant-numeric: tabular-nums;
}
.hero-unit {
display: block;
font-size: 13.5px; font-weight: 400;
color: rgba(255, 255, 255, 0.82);
margin-top: 6px;
}
.hero-story {
font-size: 12.5px; line-height: 1.45;
color: rgba(255, 255, 255, 0.90);
margin: 8px 0 6px;
}
.hero-story strong { font-weight: 700; }
.hero-pills {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px; margin-top: auto;
width: 100%; min-width: 0;
}
.hpill {
padding: 8px 9px 7px;
border-radius: var(--r-md);
background: rgba(0, 0, 0, 0.22);
backdrop-filter: blur(10px);
min-width: 0; /* allow shrink */
display: flex; flex-direction: column;
}
.hero-pills { flex: 0 0 auto; padding-bottom: 2px; }
.hpill-key {
font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(255, 255, 255, 0.72); font-weight: 500;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hpill-val {
font-size: clamp(15px, 1.45vw, 20px); font-weight: 600;
margin-top: 3px; letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1.05;
}
.hpill-delta {
font-size: 9.5px; color: rgba(255, 255, 255, 0.72);
margin-top: 3px;
line-height: 1.3;
word-break: break-word;
overflow-wrap: anywhere;
}
.hpill-delta.up { color: #3EE59E; }
.hpill-delta.down { color: #FFB7A7; }
/* =========================================================
FUEL SHIFT
========================================================= */
.fuel-headline { margin-bottom: 12px; }
.fuel-chart {
flex: 1; min-height: 0;
position: relative;
width: 100%;
}
.fuel-chart svg { display: block; width: 100%; height: 100%; }
.fuel-legend {
display: flex; flex-wrap: wrap; gap: 12px;
margin-top: 8px;
}
.flg { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: rgba(255,255,255,0.72); }
.flg::before { content: ''; width: 10px; height: 10px; border-radius: 2px; background: currentColor; }
.flg.diesel { color: #8E5A48; }
.flg.petrol { color: #B87250; }
.flg.cng { color: #B8884C; }
.flg.hybrid { color: #D97A3E; }
.flg.ev { color: #FF5300; }
.flg.phev { color: #FFB48C; }
/* =========================================================
BRAND THRONE
========================================================= */
/* Brand throne lead row — center #1, logo, name vertically as a single
coherent line. The share text drops to a tight subline beneath the name. */
.brand-lead {
display: flex; align-items: center; gap: 12px;
margin-bottom: 14px; flex: 0 0 auto;
}
.brand-lead > div { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.brand-lead-rank {
font-size: 36px; font-weight: 700; color: var(--orange);
letter-spacing: -0.04em; line-height: 1;
flex: 0 0 auto;
}
.brand-lead-name {
font-size: 19px; font-weight: 600;
letter-spacing: -0.02em; line-height: 1.15;
}
.brand-lead-share {
font-size: 12px; color: var(--text-mute);
margin-top: 4px; line-height: 1.3;
}
.brand-bars { display: flex; flex-direction: column; gap: 8px; flex: 1 1 0; min-height: 0; overflow: hidden; }
.bb-row { display: flex; align-items: center; gap: 10px; min-height: 0; }
.bb-logo-wrap { flex: 0 0 22px; display: flex; align-items: center; justify-content: center; }
/* Brand logos sit on transparent backgrounds, no white chip. Local SVGs
(Tata, Mahindra, Maruti, MG, Vauxhall) keep their actual brand colours.
simple-icons SVGs are monochrome; we tint them so they read on both
light and dark themes without losing their silhouette. */
.brand-logo { object-fit: contain; }
.bb-logo-wrap .brand-logo { width: 20px; height: 20px; }
/* simple-icons are pure black SVGs. In light mode they look right as-is,
in dark mode flip them to white so the silhouette stays visible. */
:root[data-theme="dark"] .brand-logo.simple-icon { filter: invert(1) brightness(1.2); }
/* On the dark deep-dive cards (fuel / seasonality / vault) the simple-icons
need to invert too even in light theme, because the card itself is dark. */
.card-fuel .brand-logo.simple-icon,
.card-january .brand-logo.simple-icon,
.card-vault .brand-logo.simple-icon { filter: invert(1) brightness(1.2); }
.bb-name { flex: 0 0 76px; font-size: 12px; font-weight: 500; color: var(--text); }
.brand-mono {
display: inline-flex; align-items: center; justify-content: center;
background: var(--paper-3);
color: var(--text-sub);
border-radius: 6px;
font-size: 10px; font-weight: 700;
font-family: 'Outfit', sans-serif;
text-align: center;
}
.brand-lead-logo {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
background: var(--paper-3);
border-radius: 8px;
margin: 0 4px;
}
.brand-lead-logo .brand-logo { width: 24px; height: 24px; object-fit: contain; opacity: 0.92; }
.brand-lead-logo .brand-mono { background: transparent; font-size: 14px; }
.brand-cell {
display: inline-flex; align-items: center; gap: 8px;
}
/* =========================================================
THRONE RACE, animated brand-rank chart
========================================================= */
.throne-race {
margin-top: 12px;
position: relative;
font-size: 12px;
}
.throne-race-year {
font-size: 36px; font-weight: 700; letter-spacing: -0.02em;
color: var(--orange);
font-variant-numeric: tabular-nums;
line-height: 1;
margin-bottom: 12px;
transition: color 220ms;
}
.throne-race-bars {
position: relative;
height: 320px; /* fits 10 rows × 32px */
}
.trr-row {
position: absolute; top: 0; left: 0; right: 0;
height: 28px;
display: grid;
grid-template-columns: 32px 22px minmax(80px, 1fr) minmax(120px, 2.4fr) 56px;
align-items: center;
gap: 8px;
transition: transform 760ms cubic-bezier(0.22, 1, 0.36, 1), opacity 420ms;
will-change: transform;
}
.trr-rank {
font-size: 13px; font-weight: 700;
color: var(--text-mute);
font-variant-numeric: tabular-nums;
text-align: center;
}
.trr-logo { display: flex; align-items: center; justify-content: center; }
.trr-logo img { width: 18px; height: 18px; }
.trr-name {
font-size: 12.5px; font-weight: 600;
color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trr-bar {
height: 12px;
background: rgba(19,6,0,0.10);
border-radius: 999px;
overflow: hidden;
position: relative;
min-width: 60px;
}
.trr-bar-fill {
position: absolute; inset: 0;
width: 0%;
background: var(--orange);
border-radius: 999px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
transition: width 720ms cubic-bezier(0.22, 1, 0.36, 1),
background 720ms cubic-bezier(0.22, 1, 0.36, 1);
}
:root[data-theme="dark"] .trr-bar-fill {
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10),
0 0 8px rgba(255,83,0,0.25);
}
.trr-val {
font-size: 12px; font-weight: 600;
color: var(--text-sub);
font-variant-numeric: tabular-nums;
text-align: right;
}
.trr-row.out-of-top { pointer-events: none; }
.throne-race-controls {
display: flex; align-items: center; gap: 14px;
margin-top: 10px;
}
.throne-race-toggle {
font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 999px;
background: var(--paper-3); color: var(--text-sub);
transition: background var(--dur-fast), color var(--dur-fast);
}
.throne-race-toggle:hover { background: var(--orange); color: white; }
.throne-race-hint {
font-size: 10.5px; color: var(--text-mute); letter-spacing: 0.04em;
}
:root[data-theme="dark"] .trr-bar { background: rgba(255,255,255,0.08); }
.brand-cell .brand-logo { width: 18px; height: 18px; object-fit: contain; opacity: 0.85; }
.brand-cell .brand-mono { width: 18px; height: 18px; line-height: 18px; }
.bb-bar {
flex: 1; height: 8px;
background: var(--paper-3); border-radius: var(--r-pill);
position: relative; overflow: hidden;
}
.bb-fill {
position: absolute; top: 0; left: 0; bottom: 0;
width: 0%;
background: linear-gradient(90deg, #FF5300, #FF8A4D);
border-radius: var(--r-pill);
transition: width 900ms var(--ease-spring);
}
:root[data-theme="dark"] .bb-fill {
background: linear-gradient(90deg, #FF6B1F, #FFA876);
box-shadow: 0 0 8px rgba(255,83,0,0.30);
}
.bb-fill.muted {
background: linear-gradient(90deg, #FF7A3D, #FFB48C);
opacity: 0.7;
}
.bb-val { flex: 0 0 44px; font-size: 12px; font-weight: 500; text-align: right; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.brand-foot {
display: flex; align-items: flex-start; gap: 8px;
margin-top: auto; padding-top: 10px;
border-top: 1px solid var(--line);
font-size: 11px; color: var(--text-sub); line-height: 1.4;
flex: 0 0 auto;
}
.brand-foot-text { display: block; min-width: 0; flex: 1; }
.brand-foot-dot {
display: inline-block; width: 8px; height: 8px; border-radius: 50%;
background: var(--danger); flex-shrink: 0;
}
.brand-foot strong { color: var(--text); font-weight: 600; }
/* =========================================================
COUNTY PULSE
========================================================= */
.county-headline { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; min-width: 0; flex: 0 0 auto; }
.county-headline > div { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.county-big {
font-size: clamp(30px, 3.4vw, 40px);
font-weight: 700; letter-spacing: -0.04em;
line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
flex: 0 0 auto;
}
.county-name {
font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
line-height: 1.1;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.county-sub { font-size: 11.5px; color: rgba(19, 6, 0, 0.55); line-height: 1.25; margin-top: 2px; }
.county-map {
flex: 1 1 auto;
/* aspect-ratio matches the 320x240 viewBox the JS now ships, so the host
always has dimensions before the SVG paints — no more 4px-wide race. */
aspect-ratio: 4 / 3;
width: 100%;
min-height: 180px; position: relative;
padding: 6px 2px;
display: flex; align-items: center; justify-content: center;
}
.county-map svg { display: block; width: 100%; height: 100%; max-height: 100%; }
.county-headline { flex: 0 0 auto; }
.county-map path.county {
stroke: rgba(255, 255, 255, 0.85);
stroke-width: 0.5;
transition: fill var(--dur-fast) var(--ease-inout);
cursor: pointer;
}
.county-map path.county:hover { stroke-width: 1.2; }
.county-list {
list-style: none;
display: flex; flex-wrap: wrap; gap: 2px 10px;
margin-top: 6px;
font-size: 10px;
flex: 0 0 auto;
max-height: 30px; overflow: hidden;
}
.county-list li { color: rgba(19, 6, 0, 0.6); font-variant-numeric: tabular-nums; }
.county-list li strong { color: var(--ink); font-weight: 600; }
/* =========================================================
JANUARY PHENOMENON
========================================================= */
.heatmap-legend {
display: flex; gap: 14px; margin-top: 10px;
font-size: 9.5px; color: rgba(255, 255, 255, 0.50);
font-weight: 500; letter-spacing: 0.03em;
flex-wrap: wrap;
}
.hml-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.hml-swatch {
width: 9px; height: 9px; border-radius: 2px;
background: rgba(255, 83, 0, var(--heat, 0.15));
display: inline-block;
}
.jan-heatmap {
flex: 1; min-height: 0;
display: flex; flex-direction: column;
gap: 2px;
margin-top: 8px;
}
.jan-year-row {
display: grid;
grid-template-columns: 24px repeat(12, 1fr);
gap: 2px; align-items: center;
}
.jan-year-label {
font-size: 9px; color: rgba(255, 255, 255, 0.42);
font-variant-numeric: tabular-nums;
}
.jan-cell {
aspect-ratio: 1;
min-height: 16px;
border-radius: 3px;
background: rgba(255, 83, 0, var(--heat, 0.18));
box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.06);
transition: transform var(--dur-fast) var(--ease-inout), box-shadow var(--dur-fast);
cursor: pointer;
}
.jan-cell.is-empty {
background: rgba(255, 255, 255, 0.04);
box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.04);
cursor: default;
}
.jan-cell:hover { transform: scale(1.25); z-index: 2; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85); }
@media (max-width: 720px) {
.jan-cell { min-height: 20px; }
}
.jan-month-labels {
display: grid; grid-template-columns: 24px repeat(12, 1fr);
gap: 2px; margin-top: 4px;
}
.jan-month-labels span {
font-size: 8.5px; color: rgba(255, 255, 255, 0.38);
text-align: center; letter-spacing: 0.04em;
}
.marquee {
position: relative;
overflow: hidden;
margin-top: 10px;
height: 22px;
mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee-track {
display: flex; gap: 28px;
position: absolute; top: 0; left: 0;
white-space: nowrap;
animation: marquee 32s linear infinite;
font-size: 11.5px; font-weight: 500;
color: rgba(255, 255, 255, 0.76);
align-items: center;
}
.marquee-track .mv-item { display: inline-flex; gap: 6px; align-items: center; }
.marquee-track .mv-arrow { font-weight: 700; }
.marquee-track .mv-arrow.up { color: var(--success); }
.marquee-track .mv-arrow.down { color: var(--danger); }
.marquee-track .mv-sep { color: rgba(255, 255, 255, 0.18); }
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* =========================================================
VAULT
========================================================= */
.vault-frame {
flex: 1;
display: flex; flex-direction: column;
gap: 10px;
position: relative;
}
.vault-top {
display: flex; justify-content: space-between; align-items: flex-start;
padding: 4px 4px 8px;
border-bottom: 1px solid rgba(255,255,255,0.10);
}
.vault-kicker {
font-size: 11px; font-weight: 700; line-height: 1.1;
letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(255,255,255,0.86);
}
.vault-arrow {
display: flex; align-items: center; justify-content: center;
color: white; opacity: 0.7;
width: 26px; height: 26px;
transition: transform var(--dur-base) var(--ease-spring), opacity var(--dur-fast);
}
.vault-arrow svg { width: 22px; height: 22px; }
.card-vault:hover:not(.is-expanded) .vault-arrow { transform: translateX(3px); opacity: 1; }
.vault-bottom {
display: flex; flex-direction: column;
gap: 2px;
flex: 1;
padding: 4px 4px 0;
}
.vault-count {
font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1;
font-variant-numeric: tabular-nums;
color: white;
}
.vault-foot {
font-size: 9.5px; color: rgba(255,255,255,0.68);
letter-spacing: 0.10em; text-transform: uppercase;
}
.vault-second {
display: flex; flex-direction: column; gap: 2px;
padding: 10px 4px 4px;
margin-top: auto;
border-top: 1px solid rgba(255,255,255,0.10);
}
.vault-second-label {
font-size: 9.5px; letter-spacing: 0.10em; text-transform: uppercase;
color: rgba(255,255,255,0.62); font-weight: 600;
}
.vault-second-value {
font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--peach-2);
}
.vault-second-sub {
font-size: 10px; color: rgba(255,255,255,0.6);
}
/* =========================================================
DEEP DIVE (inside expanded card)
========================================================= */
.deep-dive {
position: absolute;
inset: 0;
padding: 28px 28px 24px;
overflow-y: auto;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-base) var(--ease-inout);
background: inherit;
border-radius: inherit;
/* Flex column lets the inline monthly-chart wrap take flex:1 and fill
remaining vertical space inside the deep-dive. */
display: flex;
flex-direction: column;
}
.hero-monthly-wrap { min-height: 240px; }
.card.is-expanded .deep-dive {
opacity: 1;
pointer-events: auto;
transition-delay: 280ms;
}
.card.is-expanded > *:not(.deep-dive):not(.card-chrome):not(.expand-close) {
opacity: 0;
transition: opacity 180ms;
pointer-events: none;
}
.card.is-expanded .card-chrome { z-index: 2; }
/* Chrome itself shouldn't catch clicks while expanded, the kicker is faded
out and the expand button is display:none, but the wrapper still occupies
the top of the card and was eating clicks aimed at the X close button. */
.card.is-expanded .card-chrome { pointer-events: none; }
.dd-h { font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; line-height: 1.1; }
.dd-h.light { color: white; }
.dd-sub { font-size: 13.5px; color: currentColor; opacity: 0.64; margin-bottom: 16px; max-width: 720px; line-height: 1.5; }
.dd-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.dd-block { background: rgba(0,0,0,0.05); border-radius: var(--r-lg); padding: 14px; min-width: 0; }
.card-fuel .dd-block,
.card-january .dd-block,
.card-vault .dd-block { background: rgba(255,255,255,0.06); }
.dd-block h4 { font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; margin-bottom: 8px; }
.dd-stat { font-size: clamp(24px, 2.2vw, 36px); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dd-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dd-table th, .dd-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.card-fuel .dd-table th, .card-fuel .dd-table td,
.card-january .dd-table th, .card-january .dd-table td,
.card-vault .dd-table th, .card-vault .dd-table td { border-bottom-color: rgba(255,255,255,0.08); }
.dd-table th { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; font-weight: 500; }
.dd-table td.num, .dd-table th.num { text-align: right; }
.dd-table td.num { font-variant-numeric: tabular-nums; }
/* Rank columns (#1, #2, …) read better centred so the heading and the value
line up around the same axis. */
.dd-table td.rank, .dd-table th.rank { text-align: center; font-variant-numeric: tabular-nums; }
/* In compact (non-expanded) cards, hide the dense overflow content that was
getting clipped: hero mini bar chart, county footer list, etc. The full
detail still shows up inside the expanded deep-dive. */
.card-hero:not(.is-expanded) .hero-monthly-mini,
.card-county:not(.is-expanded) .county-list,
.card-brands:not(.is-expanded) .brand-bars .bb-row:nth-child(n+6) { display: none; }
/* In any expanded card the kicker's "Diesel collapsed."-style title would overlap
the deep-dive's headline. Fade out the kicker so the deep-dive owns the top. */
.card.is-expanded .card-kicker { opacity: 0; pointer-events: none; }
/* ---- Explicit close button (X) on expanded cards. Tapping anywhere else
no longer collapses the card, important for mobile/touch users who
want to interact with the data inside without accidentally closing. */
.card.is-expanded .card-expand { display: none; }
/* X close, simple inline icon at the top-right of the expanded card.
Subtle round chip that reads on every card theme without screaming. */
.expand-close {
position: absolute;
top: 14px; right: 14px;
width: 38px; height: 38px;
border-radius: 50%;
display: none;
align-items: center; justify-content: center;
background: rgba(0,0,0,0.10);
color: currentColor;
z-index: 12;
cursor: pointer;
transition: background var(--dur-fast), transform var(--dur-fast);
}
.card.is-expanded .expand-close { display: flex; }
.expand-close:hover { background: rgba(0,0,0,0.20); transform: scale(1.05); }
/* Dark cards (fuel / seasonality / vault) get a translucent white chip */
.card-fuel.is-expanded .expand-close,
.card-january.is-expanded .expand-close,
.card-vault.is-expanded .expand-close { background: rgba(255,255,255,0.14); }
.card-fuel.is-expanded .expand-close:hover,
.card-january.is-expanded .expand-close:hover,
.card-vault.is-expanded .expand-close:hover { background: rgba(255,255,255,0.28); }
.expand-close svg { width: 18px; height: 18px; }
.card.is-expanded .deep-dive { z-index: 1; }
/* ---- Tooltip ---- */
.tooltip {
position: fixed; z-index: 100;
background: var(--ink); color: white;
padding: 8px 12px; border-radius: 10px;
font-size: 12px; pointer-events: none;
opacity: 0; transform: translateY(4px);
transition: opacity 120ms ease, transform 120ms ease;
box-shadow: var(--shadow-2);
max-width: 240px;
}
.tooltip.on { opacity: 1; transform: translateY(0); }
.tooltip strong { display: block; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; font-weight: 500; margin-bottom: 4px; }
.tooltip .tt-val { font-size: 16px; font-weight: 600; }
/* ---- Footer ---- */
.sourcebar {
flex: 0 0 auto;
height: 28px;
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 0 20px 8px;
font-size: 10.5px; color: var(--text-mute);
background: transparent;
}
.sourcebar a { color: var(--orange); font-weight: 500; }
.sourcebar .sep { opacity: 0.4; }
.sourcebar-filter {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 999px;
color: var(--text);
font-size: 10.5px; font-weight: 500;
margin-right: 6px;
font-variant-numeric: tabular-nums;
}
.sourcebar-filter strong { color: var(--orange); font-weight: 700; }
.sourcebar-filter svg { color: var(--orange); flex: 0 0 auto; }
.sourcebar .sb-info-links { display: inline-flex; gap: 10px; align-items: center; }
.sourcebar .sb-info-links a:hover { text-decoration: underline; }
/* =========================================================
INFO MODAL (About / Terms)
========================================================= */
.info-modal {
position: fixed; inset: 0; z-index: 200;
background: rgba(19, 6, 0, 0.55);
backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none;
transition: opacity 220ms var(--ease-inout);
padding: 20px;
}
.info-modal.on { opacity: 1; pointer-events: auto; }
.info-modal-card {
position: relative;
background: var(--paper);
color: var(--text);
border-radius: var(--r-lg);
padding: 28px 28px 22px;
width: min(560px, 100%);
max-height: 80vh;
overflow-y: auto;
box-shadow: var(--shadow-float);
transform: translateY(8px) scale(0.98);
transition: transform 240ms var(--ease-spring);
}
.info-modal.on .info-modal-card { transform: translateY(0) scale(1); }
.info-modal-close {
position: absolute; top: 14px; right: 14px;
width: 32px; height: 32px; border-radius: 50%;
font-size: 22px; line-height: 1;
color: var(--text-mute);
background: var(--paper-3);
display: flex; align-items: center; justify-content: center;
}
.info-modal-close:hover { color: var(--text); background: var(--paper-2); }
.info-modal-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; }
.info-modal-body { font-size: 13.5px; line-height: 1.55; color: var(--text-sub); display: flex; flex-direction: column; gap: 10px; }
.info-modal-body p { color: inherit; }
.info-modal-body strong { color: var(--text); }
/* =========================================================
NEWSLETTER POPUP
========================================================= */
.newsletter-pop {
position: fixed; bottom: 24px; right: 24px;
width: min(340px, calc(100vw - 36px));
background: var(--orange);
color: white;
border-radius: var(--r-lg);
padding: 18px 18px 16px;
box-shadow: var(--shadow-orange), var(--shadow-2);
z-index: 180;
transform: translateY(20px);
opacity: 0;
transition: opacity 320ms var(--ease-spring), transform 320ms var(--ease-spring);
}
.newsletter-pop.on { opacity: 1; transform: translateY(0); }
.newsletter-pop-eyebrow { font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; font-weight: 600; }
.newsletter-pop-title { font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; margin: 6px 0 4px; }
.newsletter-pop-sub { font-size: 12.5px; line-height: 1.45; opacity: 0.92; margin-bottom: 12px; }
.newsletter-pop-form { display: flex; gap: 6px; }
.newsletter-pop input {
flex: 1; min-width: 0;
padding: 9px 12px;
border: none; border-radius: var(--r-pill);
background: rgba(255,255,255,0.92);
color: var(--ink);
font-family: inherit; font-size: 12.5px;
}
.newsletter-pop input::placeholder { color: rgba(19,6,0,0.45); }
.newsletter-pop button[type="submit"] {
padding: 9px 14px;
border-radius: var(--r-pill);
background: var(--ink);
color: white;
font-size: 12px; font-weight: 600;
letter-spacing: 0.02em;
transition: background var(--dur-fast);
}
.newsletter-pop button[type="submit"]:hover { background: black; }
.newsletter-pop-close {
position: absolute; top: 6px; right: 6px;
width: 26px; height: 26px;
border-radius: 50%;
color: rgba(255,255,255,0.85);
background: rgba(0,0,0,0.18);
display: flex; align-items: center; justify-content: center;
font-size: 16px; line-height: 1;
}
.newsletter-pop-close:hover { background: rgba(0,0,0,0.32); color: white; }
.newsletter-pop-thanks { font-size: 13px; font-weight: 600; line-height: 1.35; padding: 4px 0; }
/* Country picker chips inside the newsletter popup */
.np-chips {
display: flex; flex-wrap: wrap; gap: 6px;
margin: 8px 0 14px;
}
.np-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.16);
color: rgba(255,255,255,0.86);
font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em;
cursor: pointer; user-select: none;
transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.np-chip input { display: none; }
.np-chip-flag { font-size: 13px; line-height: 1; }
.np-chip:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.28); }
.np-chip.on {
background: #FFFFFF;
border-color: #FFFFFF;
color: #130600;
}
/* ── Info panel (single (i) entry that aggregates all legal pages) ── */
.info-panel {
position: fixed; inset: 0; z-index: 9000;
background: rgba(11, 4, 2, 0.55);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
padding: 28px;
opacity: 0; transition: opacity 220ms ease;
}
.info-panel.on { opacity: 1; }
.info-panel-card {
position: relative;
width: min(520px, 100%);
max-height: 80vh;
overflow: auto;
background: linear-gradient(180deg, #2A0E02 0%, #401C09 100%);
color: white;
border-radius: 18px;
padding: 26px 24px 22px;
box-shadow: 0 30px 80px rgba(0,0,0,0.5);
transform: translateY(8px);
transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.info-panel.on .info-panel-card { transform: translateY(0); }
.info-panel-close {
position: absolute; top: 10px; right: 12px;
width: 28px; height: 28px;
border-radius: 50%;
color: rgba(255,255,255,0.85);
background: rgba(0,0,0,0.22);
display: flex; align-items: center; justify-content: center;
font-size: 18px; line-height: 1;
}
.info-panel-close:hover { background: rgba(0,0,0,0.4); color: white; }
.info-panel-eyebrow { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; font-weight: 600; }
.info-panel-title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 4px 0 6px; }
.info-panel-sub { font-size: 13px; line-height: 1.5; opacity: 0.78; margin-bottom: 16px; }
.info-panel-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.info-panel-list a {
display: flex; flex-direction: column; gap: 2px;
padding: 12px 14px;
border-radius: 10px;
text-decoration: none; color: white;
background: rgba(255,255,255,0.04);
transition: background 180ms;
}
.info-panel-list a:hover { background: rgba(255,255,255,0.10); }
.info-panel-list .ipl-h { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
.info-panel-list .ipl-s { font-size: 11.5px; opacity: 0.65; line-height: 1.35; }
@media (max-width: 480px) {
.info-panel { padding: 16px; }
.info-panel-card { padding: 22px 18px 18px; }
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1280px) {
.stage { padding: 12px 16px 6px; }
}
/* Tablet: bento 2-column, scrollable */
@media (max-width: 1100px) {
html, body { overflow: auto; }
.app { position: relative; min-height: 100vh; }
.main-col { padding-left: calc(var(--rail-w) + 18px); }
.stage {
height: auto; overflow: visible;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
padding: 14px 16px;
gap: 12px;
}
.card { min-height: 300px; grid-column: auto !important; grid-row: auto !important; }
.card-hero { grid-column: span 2 !important; min-height: 380px; }
.card-fuel { grid-column: span 2 !important; min-height: 360px; }
.card-january { grid-column: span 2 !important; min-height: 340px; }
.card.is-expanded {
position: fixed;
inset: 0;
border-radius: 0;
}
}
/* =========================================================
MOBILE, phone-first layout inspired by the user's iPhone reference:
- Top sticky mini-header with country + monthly dropdown trigger
- Cards stack vertically full-width with rounded corners
- Bottom tab bar replaces the side rail for navigation
========================================================= */
@media (max-width: 700px) {
:root { --rail-w: 0px; --gap: 12px; --pad: 18px; }
/* Let the page actually grow & scroll on mobile. The desktop default pins
html/body to 100% of the viewport with overflow:hidden, which silently
truncated the stage and made the .sourcebar sit mid-viewport instead of
after the cards. */
html, body { height: auto; overflow: auto; }
.app { position: relative; min-height: 100vh; background: var(--paper-2); }
.main-col { height: auto; min-height: 0; overflow: visible; }
/* Side rail becomes a CENTER-aligned floating tab bar at the bottom. The
bar's intrinsic width is determined by its content; we use auto margins
to center it horizontally. Max width keeps it from overflowing on
short screens. */
.country-rail {
position: fixed;
top: auto; bottom: 12px; left: 50%;
right: auto;
transform: translateX(-50%);
width: max-content;
max-width: calc(100% - 24px);
height: auto;
flex-direction: row;
gap: 8px;
padding: 6px 8px;
z-index: 60;
background: rgba(255,255,255,0.96);
backdrop-filter: blur(14px);
border-radius: 999px;
box-shadow: 0 12px 36px rgba(19,6,0,0.22);
}
:root[data-theme="dark"] .country-rail {
background: rgba(31,15,10,0.92);
box-shadow: 0 12px 36px rgba(0,0,0,0.55);
}
/* The bar is a single pill; its sections become inline groups, no inner
paper background or shadow. */
.country-rail-section {
flex: 0 0 auto;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0;
background: transparent;
backdrop-filter: none;
box-shadow: none;
border-radius: 999px;
gap: 4px;
position: relative;
}
/* Every mobile-bar button is the SAME 44x44 circle for visual coherence:
the home logo, the year pill, the country flag, the dot menu. The year
pill keeps its orange gradient (it's the active filter) but adopts the
same shape + size as everything else. */
.country-rail-brand {
display: flex;
width: 44px; height: 44px;
}
.country-rail-brand .rail-brand {
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
overflow: hidden;
background: var(--paper-3);
}
.country-rail-brand .rail-brand-img { max-width: 30px; max-height: 30px; }
.country-rail #rail-year-section { flex: 0 0 auto; }
.rail-year {
width: 44px; height: 44px;
border-radius: 50%;
padding: 0;
gap: 0;
}
.rail-year-label-yr { display: none; }
.rail-year-label-val { font-size: 9px; line-height: 1.05; }
.rail-year-label-val .rail-year-yr { font-size: 9px; }
.rail-btn {
width: 44px; height: 44px;
border-radius: 50%;
font-size: 18px;
background: var(--paper-3);
}
.rail-btn .rail-flag { font-size: 18px; }
.rail-btn .rail-tip { display: none; }
/* Mobile triggers (current-country flag + dot menu) appear only at this
breakpoint. Same circle size + background as the other bar buttons so
the four pills look like a coherent set. */
.rail-mobile-trigger {
width: 44px; height: 44px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
color: var(--ink);
background: var(--paper-3);
cursor: pointer;
flex: 0 0 auto;
font-size: 20px;
line-height: 1;
}
.rail-mobile-trigger:active { transform: scale(0.95); }
/* Blogs is now a top-level rail button — same 44x44 circle as every
other pill so the bar stays a coherent set, but with its full SVG
rendered (not hidden via the popout-only rules). */
.country-rail-blogs { flex: 0 0 auto; }
.country-rail-blogs .rail-link-blogs {
width: 44px; height: 44px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--paper-3);
color: var(--ink);
flex: 0 0 auto;
}
.country-rail-blogs .rail-link-blogs svg { width: 20px; height: 20px; }
.country-rail-blogs .rail-link-blogs:active { transform: scale(0.95); }
:root[data-theme="dark"] .country-rail-blogs .rail-link-blogs {
background: rgba(255,255,255,0.08);
}
:root[data-theme="dark"] .rail-btn,
:root[data-theme="dark"] .rail-mobile-trigger,
:root[data-theme="dark"] .country-rail-brand .rail-brand {
background: rgba(255,255,255,0.08);
}
.rail-trigger-flag {
display: inline-flex; align-items: center; justify-content: center;
font-size: 20px; line-height: 1;
}
/* Inline flag buttons + menu items are hidden by default; they live inside
a popout that floats ABOVE the bar when the trigger is tapped. */
.country-rail-countries .rail-btn { display: none; }
.rail-popout {
display: none;
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
flex-direction: row;
gap: 6px;
padding: 8px 10px;
background: var(--paper);
border-radius: 999px;
box-shadow: 0 16px 40px rgba(19,6,0,0.26);
z-index: 70;
animation: rail-popout-in 180ms cubic-bezier(0.22,1,0.36,1);
}
:root[data-theme="dark"] .rail-popout {
background: #1F0F0A;
box-shadow: 0 16px 40px rgba(0,0,0,0.55);
}
@keyframes rail-popout-in {
from { opacity: 0; transform: translate(-50%, 8px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
.country-rail-countries.rail-open .rail-popout,
.country-rail-foot.rail-open .rail-popout { display: inline-flex; }
.country-rail-countries.rail-open .rail-popout .rail-btn { display: inline-flex; }
.country-rail-foot.rail-open .rail-popout .rail-link,
.country-rail-foot.rail-open .rail-popout .theme-circle { display: inline-flex; }
/* Hide non-popout link/theme rendering on mobile so they only show inside
the popout when open. */
.country-rail-foot > .rail-link,
.country-rail-foot > .theme-circle { display: none; }
.country-rail-foot .rail-link,
.country-rail-foot .theme-circle { width: 36px; height: 36px; }
.country-rail-foot .rail-tip { display: none; }
/* Stage stacks vertically. The floating bottom tab bar sits at
bottom:12px with ~62px of height, so we reserve ~120px of bottom
padding (rail + safe-area + breathing room) so the very last card
never gets clipped behind it. */
.main-col { padding-left: 0; padding-right: 0; }
.stage {
grid-template-columns: 1fr;
grid-template-rows: auto;
padding: 18px 14px calc(160px + env(safe-area-inset-bottom));
gap: 14px;
overflow: visible;
height: auto;
}
.card {
grid-column: 1 / -1 !important;
grid-row: auto !important;
min-height: 280px;
border-radius: 22px;
}
/* Top sticky mini-header, country flag + monthly trigger
(we render this via the rail year-button; here we just add safe-area). */
body { padding-top: env(safe-area-inset-top); }
/* Hero compresses */
.hero-big-number { font-size: clamp(44px, 12vw, 64px); line-height: 1; }
.hero-pills { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.hpill { padding: 8px; }
.hpill-val { font-size: 15px; }
/* Brand throne */
.brand-lead-rank { font-size: 32px; }
.brand-lead-name { font-size: 17px; }
/* County / state pulse */
.county-big { font-size: clamp(28px, 9vw, 36px); }
/* Vault on mobile is one card again */
.card-vault { padding: 16px; }
/* Deep-dive uses single column */
.dd-grid { grid-template-columns: 1fr; }
.dd-block { grid-column: auto !important; }
.deep-dive { padding: 18px 16px 24px; }
/* Range dropdown, full-width on phone */
.rd-pop {
position: fixed !important;
left: 12px !important; right: 12px !important;
top: auto !important; bottom: 80px !important;
min-width: 0;
}
/* Source bar, pad GENEROUSLY at the bottom so the last card and the
sourcebar itself sit well above the floating nav, with a chunk of empty
breathing space the user can scroll into. The bar is ~62px tall + 12px
offset, so 220px guarantees there's still ~140px of empty space below
the source line when the user is fully scrolled. */
.sourcebar {
flex-direction: column; height: auto; gap: 4px;
padding: 10px 14px calc(150px + env(safe-area-inset-bottom));
text-align: center;
}
.sourcebar .sep { display: none; }
/* Expanded cards on mobile fill the screen */
.card.is-expanded {
position: fixed;
inset: 0;
border-radius: 0;
}
/* Close X is bigger and offset for safe area */
.expand-close {
top: calc(env(safe-area-inset-top) + 14px);
right: 14px;
width: 56px; height: 56px;
}
/* Hide the desktop topbar nav placeholder on phone too */
.topbar-nav { display: none; }
}
/* Tablet: 2-column bento, scrollable */
@media (min-width: 701px) and (max-width: 1100px) {
html, body { overflow: auto; }
.app { position: relative; min-height: 100vh; }
.stage {
height: auto; overflow: visible;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
padding: 14px 16px;
gap: 12px;
}
.card { min-height: 300px; grid-column: auto !important; grid-row: auto !important; }
.card-hero { grid-column: span 2 !important; min-height: 360px; }
.card-fuel { grid-column: span 2 !important; min-height: 340px; }
.card-january { grid-column: span 2 !important; min-height: 320px; }
.card.is-expanded { position: fixed; inset: 0; border-radius: 0; }
}
/* =========================================================
COUNTRY SWITCH WIPE, bold-title flash
========================================================= */
.country-wipe {
position: fixed; inset: 0; z-index: 250;
background: var(--orange);
display: flex; align-items: center; justify-content: center;
color: white;
pointer-events: none;
/* Click-side wipe: clip-path enters from left, then HOLDS covered.
The new page's arrival wipe takes over visually, then fades. */
animation: countryWipeCover 600ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.country-wipe-flag { font-size: 64px; margin-bottom: 12px; animation: wipeContent 500ms var(--ease-spring) both; }
.country-wipe-title {
font-size: clamp(56px, 8vw, 96px);
font-weight: 700; letter-spacing: -0.04em;
text-align: center; line-height: 0.95;
animation: wipeContent 600ms var(--ease-spring) 60ms both;
}
@keyframes wipeContent {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes countryWipeCover {
0% { clip-path: inset(0 100% 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
/* Arrival wipe shown on the new page, already covering, fades out smoothly */
.country-wipe-arrival {
animation: none;
clip-path: inset(0 0 0 0);
transition: opacity 480ms var(--ease-inout), transform 480ms var(--ease-inout);
}
.country-wipe-arrival.leaving {
opacity: 0;
transform: scale(1.04);
}
/* =========================================================
FUEL CHART hover marker
========================================================= */
.fuel-chart .hover-line { pointer-events: none; }
.brand-bars .bb-row { cursor: default; transition: transform var(--dur-fast); }
.brand-bars .bb-row:hover { transform: translateX(2px); }
.brand-bars .bb-row:hover .bb-fill { filter: brightness(1.08); }
/* =========================================================
HERO monthly bars (deep dive), readable on dark hero card
========================================================= */
#hero-monthly-svg rect.bar-base { fill: rgba(255,255,255,0.32); }
#hero-monthly-svg rect.bar-peak { fill: #FFE7D5; }
#hero-monthly-svg text { font-family: 'Outfit', sans-serif; }
/* Monthly chart on home hero, hover-aware mini chart */
.hero-monthly-mini {
margin-top: 10px;
height: 56px;
position: relative;
cursor: crosshair;
}
.hero-monthly-mini svg { width: 100%; height: 100%; display: block; }
/* =========================================================
SEASONALITY EXPANDED, keep heatmap visible top-right
========================================================= */
.card-january.is-expanded .deep-dive { padding-right: 320px; }
.card-january.is-expanded .jan-heatmap-keep {
position: absolute;
top: 64px; right: 24px;
width: 280px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--r-lg);
padding: 14px;
z-index: 4;
}
.card-january.is-expanded .jan-heatmap-keep h5 {
font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(255,255,255,0.55); font-weight: 500; margin-bottom: 10px;
}
@media (max-width: 1100px) {
.card-january.is-expanded .deep-dive { padding-right: var(--pad); }
.card-january.is-expanded .jan-heatmap-keep { display: none; }
}
/* =========================================================
DATA VAULT, deep dive
========================================================= */
.vault-modes {
display: flex; gap: 6px;
background: rgba(255,255,255,0.06);
padding: 4px; border-radius: var(--r-pill);
width: fit-content;
margin-bottom: 18px;
}
.vault-mode-btn {
padding: 7px 14px;
font-size: 12px; font-weight: 500;
color: rgba(255,255,255,0.62);
border-radius: var(--r-pill);
transition: all var(--dur-fast) var(--ease-inout);
letter-spacing: 0.02em;
}
.vault-mode-btn:hover { color: white; }
.vault-mode-btn.active { background: white; color: var(--ink); }
.vault-year-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
}
.vault-year-card {
background: white;
color: var(--ink);
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--r-lg);
padding: 14px 14px 12px;
cursor: pointer;
transition: transform var(--dur-fast) var(--ease-inout), box-shadow var(--dur-fast);
display: flex; flex-direction: column; gap: 4px;
box-shadow: 0 4px 14px rgba(19,6,0,0.10);
}
.vault-year-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(19,6,0,0.18);
}
.vault-year-card .vyc-year {
font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
color: var(--orange);
}
.vault-year-card .vyc-total {
font-size: 18px; font-weight: 700; color: var(--ink);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.vault-year-card .vyc-meta {
font-size: 10.5px; color: rgba(19,6,0,0.55);
margin-top: 2px;
}
.vault-year-card .vyc-yoy {
font-size: 10.5px; font-weight: 600;
margin-top: 4px;
}
.vault-year-card .vyc-yoy.up { color: var(--success); }
.vault-year-card .vyc-yoy.down { color: var(--danger); }
.vault-back {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
color: rgba(255,255,255,0.62); font-weight: 500;
padding: 6px 12px; border-radius: var(--r-pill);
background: rgba(255,255,255,0.06);
margin-bottom: 14px;
cursor: pointer;
transition: all var(--dur-fast);
}
.vault-back:hover { color: white; background: rgba(255,255,255,0.12); }
/* No-copy table for vault, wrapped in a paper-card so it reads cleanly on the orange */
.vault-table {
width: 100%; border-collapse: collapse; font-size: 12.5px;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
pointer-events: auto;
background: white;
color: var(--ink);
border-radius: var(--r-md);
overflow: hidden;
box-shadow: 0 4px 14px rgba(19,6,0,0.10);
}
.vault-table th, .vault-table td {
padding: 9px 12px; text-align: left;
border-bottom: 1px solid rgba(19,6,0,0.06);
}
.vault-table tr:last-child td { border-bottom: none; }
.vault-table tbody tr:hover { background: rgba(255,83,0,0.06); }
.compare-table td.delta { font-weight: 700; }
.compare-table td.delta.up { color: #1DA366; }
.compare-table td.delta.down { color: #D24B2A; }
.compare-table td.delta.neutral { color: rgba(19,6,0,0.5); font-weight: 500; }
.vault-table td.num, .vault-table th.num { text-align: right; }
.vault-table td.num { font-variant-numeric: tabular-nums; }
.vault-table td.rank, .vault-table th.rank { text-align: center; font-variant-numeric: tabular-nums; }
.vault-table th {
font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(19,6,0,0.55); font-weight: 600;
background: var(--paper-2);
}
/* Dark-mode vault table, match the dark-brown card surface and invert
text/borders so headers + body read cleanly. */
:root[data-theme="dark"] .vault-table {
background: #1F0F0A;
color: #F2ECE5;
box-shadow: 0 4px 14px rgba(0,0,0,0.40);
}
:root[data-theme="dark"] .vault-table th {
background: #2A1611;
color: rgba(242, 236, 229, 0.62);
}
:root[data-theme="dark"] .vault-table th,
:root[data-theme="dark"] .vault-table td {
border-bottom: 1px solid rgba(242, 236, 229, 0.08);
}
:root[data-theme="dark"] .vault-table tbody tr:hover {
background: rgba(255, 83, 0, 0.14);
}
:root[data-theme="dark"] .compare-table td.delta.neutral {
color: rgba(242, 236, 229, 0.5);
}
.vault-block-title {
font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(255,255,255,0.55); font-weight: 500;
margin: 18px 0 8px;
}
.vault-compare-controls {
display: flex; flex-wrap: wrap; gap: 12px;
margin-bottom: 18px;
background: rgba(255,255,255,0.04);
padding: 14px; border-radius: var(--r-lg);
}
.vault-compare-block {
display: flex; align-items: center; gap: 8px;
}
.vault-compare-block label {
font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(255,255,255,0.5); font-weight: 500;
}
.vault-compare-block select {
background: rgba(255,255,255,0.08); color: white;
border: 1px solid rgba(255,255,255,0.14);
border-radius: 8px; padding: 6px 10px;
font-family: inherit; font-size: 12.5px;
cursor: pointer;
}
.vault-compare-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 900px) {
.vault-compare-grid { grid-template-columns: 1fr; }
}
.vault-compare-side {
background: white;
color: var(--ink);
border-radius: var(--r-lg);
padding: 16px;
box-shadow: 0 4px 14px rgba(19,6,0,0.10);
}
.vault-compare-side h5 {
font-size: 13px; font-weight: 700; color: var(--orange);
margin-bottom: 10px; letter-spacing: -0.01em;
}
.vault-compare-side .compare-stat {
display: flex; justify-content: space-between;
font-size: 12.5px; padding: 6px 0;
border-bottom: 1px solid rgba(19,6,0,0.06);
}
.vault-compare-side .compare-stat span:first-child { color: rgba(19,6,0,0.6); }
.vault-compare-side .compare-stat strong {
font-weight: 700; color: var(--ink);
font-variant-numeric: tabular-nums;
}
/* =========================================================
EXPANDED COUNTY/REGION, split layout, map fills the space
========================================================= */
.dd-expanded-split {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
gap: 14px;
height: calc(100vh - 180px);
min-height: 420px;
}
.dd-map-block, .dd-table-block {
display: flex; flex-direction: column;
min-height: 0; min-width: 0;
padding: 14px;
}
.dd-map-block .county-map-big {
flex: 1; min-height: 0;
width: 100%;
padding: 10px;
display: flex; align-items: center; justify-content: center;
}
.dd-map-block .county-map-big svg {
width: 100%; height: 100%;
max-height: 100%;
display: block;
}
.dd-table-scroll {
flex: 1; min-height: 0;
overflow-y: auto;
margin-top: 8px;
}
@media (max-width: 900px) {
.dd-expanded-split { grid-template-columns: 1fr; height: auto; }
/* Give the expanded county / state / world map a tall, near-square slot
on phones so it isn't crushed into a thin sliver. The viewport's
narrowest dimension is the real constraint, not a fixed 360px. */
.dd-map-block {
min-height: min(80vw, 480px);
padding: 12px;
}
.dd-map-block .county-map-big {
height: min(78vw, 460px);
width: 100%;
padding: 6px;
}
}
/* Generic expanded-card polish: tables scroll inside the card, no dead space */
.card.is-expanded .deep-dive .dd-table { width: 100%; }
.card.is-expanded .deep-dive table + .vault-block-title,
.card.is-expanded .deep-dive h3 { margin-top: 22px; }
.deep-dive { padding-right: calc(var(--pad) - 4px); }
/* Topbar adjustments, country/section nav removed */
.side-toggle { display: none !important; }
.topbar { padding-left: 24px; }
/* Section labels → hide since we removed section nav */
.topbar-sep, .topbar-section { display: none; }
.topbar-country { font-size: 14px; }
/* =========================================================
GLOBAL WORLD MAP, country pulse for global view
========================================================= */
.world-map { width: 100%; height: 100%; display: block; }
.world-map .wm-zoom { vector-effect: non-scaling-stroke; }
.world-map .wm-country {
fill: rgba(27,11,3,0.08);
stroke: rgba(255,255,255,0.55);
stroke-width: 0.35;
vector-effect: non-scaling-stroke;
transition: fill var(--dur-fast) var(--ease-inout);
}
.world-map .wm-country.tracked {
fill: #FF5300;
cursor: pointer;
}
.world-map .wm-country.tracked:hover { fill: #FFB48C; }
.world-map .wm-country.summary {
fill: rgba(255, 122, 61, 0.42);
cursor: pointer;
}
.world-map .wm-country.summary:hover { fill: rgba(255, 122, 61, 0.78); }
.world-map .wm-country.selected { fill: #B83A00 !important; stroke: white; stroke-width: 1.2; }
.global-world-layout {
display: grid;
/* Give the map a real minimum so it doesn't collapse to a sliver when the
card is narrower than 600px. Aside still gets 160px floor. */
grid-template-columns: minmax(220px, 1.7fr) minmax(160px, 1fr);
gap: 12px;
flex: 1; min-height: 0;
height: 100%;
align-items: stretch;
}
.global-world-map-host {
position: relative;
/* The world map projects into a 560x340 viewBox (compact) or 920x560 (big),
so the natural-earth aspect is ~1.64:1. Reserving the slot via aspect-ratio
means the host always has dimensions BEFORE the SVG paints, removing every
race condition we saw in the earlier ResizeObserver-based render. */
aspect-ratio: 560 / 340;
width: 100%;
min-height: 200px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(180deg, rgba(255,231,213,0.3), rgba(255,217,194,0.55));
border-radius: var(--r-md);
padding: 4px;
overflow: hidden;
}
.global-world-map-host > svg.world-map {
width: 100%; height: 100%; display: block;
}
.global-world-aside {
display: flex; flex-direction: column;
gap: 8px;
min-width: 0;
min-height: 0; /* let the inner list use flex:1 */
height: 100%;
}
.gwa-title {
font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(19,6,0,0.55); font-weight: 500;
}
.gwa-name {
font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
line-height: 1.05; color: var(--ink);
}
.gwa-share {
font-size: 28px; font-weight: 700; color: var(--orange);
letter-spacing: -0.03em; line-height: 1;
font-variant-numeric: tabular-nums;
margin-top: 2px;
}
.gwa-units { font-size: 12px; color: rgba(19,6,0,0.6); margin-top: 2px; font-variant-numeric: tabular-nums; }
.gwa-list {
list-style: none; display: flex; flex-direction: column;
gap: 4px; margin-top: 6px;
font-size: 11.5px;
}
.gwa-list li {
display: flex; justify-content: space-between; gap: 8px;
padding: 5px 8px; border-radius: 8px;
cursor: pointer; transition: background var(--dur-fast);
color: rgba(19,6,0,0.78);
}
.gwa-list li:hover { background: rgba(255,83,0,0.08); }
.gwa-list li.active { background: var(--orange); color: white; font-weight: 600; }
.gwa-list li strong { font-weight: 600; }
.gwa-list li span { font-variant-numeric: tabular-nums; opacity: 0.85; }
.gwa-list-kv li { cursor: default; }
.gwa-list-kv li:hover { background: transparent; }
.gwa-list-scroll {
flex: 1 1 0;
min-height: 0;
max-height: none;
overflow-y: auto;
padding-right: 4px;
}
.gwa-list-scroll::-webkit-scrollbar { width: 4px; }
.gwa-list-scroll::-webkit-scrollbar-thumb { background: rgba(19,6,0,0.18); border-radius: 4px; }
/* Visual separator between the four panel countries and the wider summary
list (no group label needed). */
.gwa-list-scroll .gwa-row-summary:first-of-type {
margin-top: 6px;
padding-top: 8px !important;
border-top: 1px dashed var(--line);
}
.gwa-row-deep strong { font-weight: 700; }
.gwa-foot {
margin-top: 8px;
font-size: 10.5px; color: rgba(19,6,0,0.55);
line-height: 1.45;
}
.gwa-back {
font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--orange); font-weight: 600;
padding: 6px 10px; border-radius: var(--r-pill);
background: rgba(255,83,0,0.1);
align-self: flex-start;
margin-bottom: 4px;
}
/* When global, hide the headline numbers in card-county since map fills it */
body[data-country="ALL"] .card-county .county-headline,
body[data-country="ALL"] .card-county .county-list { display: none; }
body[data-country="ALL"] .card-county { padding: 16px; }
body[data-country="ALL"] .card-county .county-map { padding: 0; flex: 1 1 auto; min-height: 0; }
body[data-country="ALL"] .card-county .county-map svg.world-map { max-height: 100%; height: 100%; }
@media (max-width: 1100px) {
.global-world-layout { grid-template-columns: 1fr; height: auto; }
.global-world-map-host { min-height: 280px; }
}
/* On mobile the country-pulse card was clipping its own content: card has
overflow:hidden + min-height:280px, but map (≈300px) + aside (title +
count + units, ≈100px) needs ~440px. Without this rule the bottom of
the aside ("606,365,734 cars") got cropped by ~50px. */
@media (max-width: 700px) {
body[data-country="ALL"] .card-county {
min-height: 480px;
}
body[data-country="ALL"] .card-county .county-map {
min-height: 360px;
}
body[data-country="ALL"] .card-county .global-world-map-host {
min-height: 240px;
aspect-ratio: 16 / 9; /* slightly taller than 560/340 to leave room for aside */
}
body[data-country="ALL"] .card-county .global-world-aside {
height: auto;
min-height: 0;
}
body[data-country="ALL"] .card-county .gwa-list-scroll {
/* On mobile the in-card list overflowing is more confusing than helpful;
cap it at a sensible peek and let users tap the expand icon for the
full leaderboard. */
max-height: 220px;
}
/* Fuel Shift was rendering at ~91px tall — the stacked-area shapes
squashed beyond legibility. Give the card extra height on mobile so
the chart gets a real plot area (~200-220px) and fits the legend
below without competing for space. */
.card-fuel {
min-height: 440px;
}
.fuel-chart {
min-height: 220px;
}
/* Brand Throne: on smaller phones the fixed 280px min-height was
clipping the 5th brand row + the trailing narrative. Disable the
flex:1 / overflow:hidden compression on .brand-bars so each row
renders at its natural height, and let the card grow accordingly. */
.card-brands {
min-height: 340px;
height: auto;
}
.card-brands .brand-bars {
flex: 0 0 auto;
overflow: visible;
min-height: 0;
}
}
/* Hero monthly chart dark variant */
#hero-monthly-svg rect { fill: rgba(255,255,255,0.36); }
#hero-monthly-svg rect.peak { fill: #FFE7D5; }
.dd-h.light + .dd-sub, .card-january .dd-sub { color: rgba(255,255,255,0.7); opacity: 1; }
/* ── Data-trust info button (small "i" appended to card kickers) ── */
.chart-info-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 14px !important;
min-width: 14px !important;
max-width: 14px !important;
height: 14px !important;
padding: 0 !important;
border-radius: 50% !important;
border: 1px solid rgba(255, 255, 255, 0.28);
background: rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.78);
font-family: 'JetBrains Mono', monospace !important;
font-size: 9px !important;
font-style: normal !important;
font-weight: 600 !important;
line-height: 1 !important;
text-transform: none !important;
letter-spacing: 0 !important;
cursor: pointer;
vertical-align: middle;
flex-shrink: 0;
margin-left: 6px;
transition: background 0.18s, color 0.18s, border-color 0.18s;
-webkit-appearance: none;
appearance: none;
}
.chart-info-btn:hover {
background: rgba(255, 255, 255, 0.30);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.6);
}
/* Light-card variant — kickers on the orange/pink cards (hero, county) */
.card-fuel .chart-info-btn,
.card-january .chart-info-btn { /* dark cards: keep the white pill above */ }
.card-county .chart-info-btn,
.hero-card .chart-info-btn {
border-color: rgba(19, 6, 0, 0.18);
background: rgba(255, 255, 255, 0.45);
color: rgba(19, 6, 0, 0.55);
}
.card-county .chart-info-btn:hover,
.hero-card .chart-info-btn:hover {
background: rgba(255, 255, 255, 0.95);
color: var(--orange);
border-color: var(--orange);
}
/* Floating tooltip — body-appended so it never clips */
.chart-tooltip-float {
position: fixed;
z-index: 99999;
background: #1F0903;
border: 1px solid rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.9);
font-family: 'Inter', sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 1.55;
padding: 12px 14px;
border-radius: 10px;
width: 260px;
text-align: left;
text-transform: none;
letter-spacing: 0;
pointer-events: none;
opacity: 0;
transform: translateY(2px);
transition: opacity 0.15s, transform 0.15s;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.chart-tooltip-float.visible { opacity: 1; transform: translateY(0); }