/* Panel growth — pills, and the growth-trend modal. Shared by the public Top Panels pages and the admin ranking; the markup is produced by /assets/scripts/panel-growth.js and src/components/GrowthPills.astro. Two themes, one stylesheet. Every colour is a token, so the light default suits the admin panel and `.pg-dark` restyles the whole thing for the public page's glass-and-gold look. The modal is appended to , outside any page wrapper, so `.pg-dark` goes on the modal element itself rather than being inherited — see ensureModal() in panel-growth.js. */ /* ── Light (admin) ──────────────────────────────────────────────────── */ .pg-pills, .pg-trend-btn, .pg-overlay, .pg-footnote { --pg-surface: #ffffff; --pg-surface-2: #f8fafc; --pg-surface-3: #f1f5f9; --pg-border: #e2e8f0; --pg-border-soft: #f1f5f9; --pg-text: #0f172a; --pg-text-2: #475569; --pg-muted: #64748b; --pg-faint: #94a3b8; --pg-accent: #4338ca; --pg-accent-soft: #eef2ff; --pg-accent-border: #c7d2fe; --pg-up-bg: #dcfce7; --pg-up-fg: #166534; --pg-up-border: #bbf7d0; --pg-up-tint: #f0fdf4; --pg-down-bg: #fee2e2; --pg-down-fg: #991b1b; --pg-down-border: #fecaca; --pg-down-tint: #fef2f2; --pg-flat-bg: #f1f5f9; --pg-flat-fg: #475569; --pg-unknown-bg: #f8fafc; --pg-unknown-fg: #94a3b8; --pg-scrim: rgba(15, 23, 42, 0.55); --pg-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35); --pg-grid: #f1f5f9; --pg-axis: #e2e8f0; --pg-line: #4f46e5; --pg-line-fill: rgba(79, 70, 229, 0.10); } /* ── Dark (public Top Panels) ───────────────────────────────────────── */ .pg-dark.pg-pills, .pg-dark .pg-pills, .pg-dark.pg-trend-btn, .pg-dark .pg-trend-btn, .pg-dark.pg-overlay, .pg-dark.pg-footnote, .pg-dark .pg-footnote { --pg-surface: #12151f; --pg-surface-2: rgba(255, 255, 255, 0.04); --pg-surface-3: rgba(255, 255, 255, 0.07); --pg-border: rgba(255, 255, 255, 0.10); --pg-border-soft: rgba(255, 255, 255, 0.06); --pg-text: #ffffff; --pg-text-2: rgba(255, 255, 255, 0.72); --pg-muted: rgba(255, 255, 255, 0.50); --pg-faint: rgba(255, 255, 255, 0.32); --pg-accent: #f7c948; --pg-accent-soft: rgba(245, 166, 35, 0.10); --pg-accent-border: rgba(245, 166, 35, 0.30); --pg-up-bg: rgba(34, 197, 94, 0.14); --pg-up-fg: #4ade80; --pg-up-border: rgba(34, 197, 94, 0.30); --pg-up-tint: rgba(34, 197, 94, 0.07); --pg-down-bg: rgba(239, 68, 68, 0.14); --pg-down-fg: #f87171; --pg-down-border: rgba(239, 68, 68, 0.30); --pg-down-tint: rgba(239, 68, 68, 0.07); --pg-flat-bg: rgba(255, 255, 255, 0.07); --pg-flat-fg: rgba(255, 255, 255, 0.66); --pg-unknown-bg: rgba(255, 255, 255, 0.04); --pg-unknown-fg: rgba(255, 255, 255, 0.34); --pg-scrim: rgba(3, 6, 15, 0.72); --pg-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.75); --pg-grid: rgba(255, 255, 255, 0.06); --pg-axis: rgba(255, 255, 255, 0.12); --pg-line: #f7c948; --pg-line-fill: rgba(247, 201, 72, 0.12); } /* ── Pills ─────────────────────────────────────────────────────────── */ .pg-pills { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; vertical-align: middle; } .pg-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; line-height: 1; white-space: nowrap; background: var(--pg-flat-bg); color: var(--pg-flat-fg); cursor: help; } .pg-pill-label { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; } .pg-pill sup { font-size: 0.6em; margin-left: 0.1rem; } .pg-up { background: var(--pg-up-bg); color: var(--pg-up-fg); } .pg-down { background: var(--pg-down-bg); color: var(--pg-down-fg); } .pg-flat { background: var(--pg-flat-bg); color: var(--pg-flat-fg); } .pg-unknown { background: var(--pg-unknown-bg); color: var(--pg-unknown-fg); } /* A dashed edge marks a figure covering less than the window it is labelled with. */ .pg-partial { outline: 1px dashed currentColor; outline-offset: -1px; } .pg-trend-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; border: 1px solid var(--pg-accent-border); border-radius: 0.6rem; background: var(--pg-accent-soft); color: var(--pg-accent); font-size: 0.7rem; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .pg-trend-btn:hover { background: var(--pg-surface-3); border-color: var(--pg-accent); } .pg-footnote { font-size: 0.7rem; color: var(--pg-muted); } /* The ranking table already scrolls sideways on phones. Three pills per row would push it wider still, so below the table breakpoint only the weekly figure stays — the other two are one tap away in the modal. */ @media (max-width: 640px) { .pg-pill.pg-w-monthly, .pg-pill.pg-w-yearly { display: none; } } /* ── Modal ─────────────────────────────────────────────────────────── */ .pg-overlay { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--pg-scrim); } .pg-overlay[hidden] { display: none; } .pg-modal { width: 100%; max-width: 56rem; max-height: 92vh; overflow-y: auto; background: var(--pg-surface); border: 1px solid var(--pg-border); border-radius: 1.25rem; box-shadow: var(--pg-shadow); color: var(--pg-text); text-align: left; } .pg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem 1rem; border-bottom: 1px solid var(--pg-border-soft); } .pg-kicker { margin: 0 0 0.25rem; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pg-accent); } .pg-title { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--pg-text); } .pg-subtitle { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--pg-muted); } .pg-close { border: 0; background: none; font-size: 1.75rem; line-height: 1; color: var(--pg-faint); cursor: pointer; } .pg-close:hover { color: var(--pg-text); } /* ── Stat tiles ────────────────────────────────────────────────────── */ .pg-section { padding: 1rem 1.5rem 0; } .pg-section-head { margin: 0 0 0.5rem; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pg-muted); } .pg-section-head span { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--pg-faint); } .pg-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } @media (max-width: 640px) { .pg-tiles { grid-template-columns: 1fr; } } .pg-tile { padding: 0.9rem 1rem; border-radius: 1rem; border: 1px solid var(--pg-border); background: var(--pg-surface-2); } .pg-tile.pg-up { border-color: var(--pg-up-border); background: var(--pg-up-tint); } .pg-tile.pg-down { border-color: var(--pg-down-border); background: var(--pg-down-tint); } .pg-tile-label { margin: 0; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pg-muted); } .pg-tile-window { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--pg-faint); } .pg-tile-value { margin: 0.3rem 0 0.2rem; font-size: 1.5rem; font-weight: 900; line-height: 1.1; color: var(--pg-text); } .pg-tile.pg-up .pg-tile-value { color: var(--pg-up-fg); } .pg-tile.pg-down .pg-tile-value { color: var(--pg-down-fg); } .pg-tile.pg-unknown .pg-tile-value { color: var(--pg-unknown-fg); } .pg-tile-value i { font-size: 0.8em; } .pg-tile-value sup { font-size: 0.5em; } .pg-tile-detail { margin: 0; font-size: 0.72rem; line-height: 1.4; color: var(--pg-text-2); } /* The lifetime row is supporting detail, so it sits quieter than the momentum row above it. */ .pg-tiles-secondary .pg-tile { background: transparent; } .pg-tiles-secondary .pg-tile-value { font-size: 1.15rem; } /* ── Toolbar ───────────────────────────────────────────────────────── */ .pg-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; padding: 1rem 1.5rem 0; } .pg-seg { display: inline-flex; padding: 0.2rem; border-radius: 0.6rem; background: var(--pg-surface-3); } .pg-seg-btn { border: 0; border-radius: 0.45rem; padding: 0.35rem 0.75rem; background: transparent; color: var(--pg-text-2); font-size: 0.75rem; font-weight: 700; cursor: pointer; } .pg-seg-btn.is-active { background: var(--pg-surface); color: var(--pg-accent); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12); } .pg-body { padding: 1rem 1.5rem 1.5rem; } .pg-chart-wrap { position: relative; height: 18rem; } .pg-chart-wrap[hidden] { display: none; } .pg-note { margin: 0.75rem 0 0; font-size: 0.75rem; color: var(--pg-muted); } .pg-error { color: var(--pg-down-fg); font-weight: 600; } .pg-table-wrap { margin-top: 0.75rem; font-size: 0.75rem; } .pg-table-wrap[hidden] { display: none; } .pg-table-wrap summary { cursor: pointer; color: var(--pg-accent); font-weight: 700; } .pg-table-scroll { max-height: 14rem; overflow: auto; margin-top: 0.5rem; border: 1px solid var(--pg-border); border-radius: 0.6rem; } .pg-table { width: 100%; border-collapse: collapse; } .pg-table th, .pg-table td { padding: 0.4rem 0.6rem; text-align: left; border-bottom: 1px solid var(--pg-border-soft); white-space: nowrap; color: var(--pg-text-2); } .pg-table th { position: sticky; top: 0; background: var(--pg-surface-2); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pg-muted); } .pg-muted { color: var(--pg-faint); font-style: italic; } /* The dark modal sits on an opaque panel, so its scrollbars need to match. */ .pg-dark .pg-modal, .pg-dark .pg-table-scroll { scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }