/* ============================================================================ TR.Energy — Liquid Glass Design System style.css · tokens + frosted-glass components · LIGHT + DARK ---------------------------------------------------------------------------- Glass is THE system here (not an opt-in skin). • Light = "day" — soft frosted panels on a luminous lavender wash • Dark = "night" — translucent panels lit by ambient neon Switch theme with / . Layers: 1. Tokens :root (light) + [data-theme="dark"] 2. Base / reset / ambient 3. Ambient neon orbs (optional decorative layer + keyframes) 4. Glass components .card .table .nav .btn .badge .tab .field .tip .empty 5. Honesty utilities .is-signal / .is-prelim / .is-bg / .is-nodata 6. Accessibility fallback (prefers-reduced-transparency / -motion) 7. Legacy aliases (old --primary / --tre-* → new tokens) 8. Responsive ============================================================================ */ /* ───────────────────────────────────────────────────────────────────────── 1 · TOKENS — LIGHT ("frosted day") ───────────────────────────────────────────────────────────────────────── */ :root { /* Brand */ --brand:#4D48F0; --brand-strong:#312D97; --brand-mid:#C4BAF5; --brand-soft:#EEEDFF; --on-brand:#FFFFFF; /* Ink / neutral */ --ink:#111118; --ink-2:#45454F; --muted:#6B6B80; --faint:#9A9AAB; --disabled:#B5B5C6; --line:#E6E6E6; --line-soft:#EFEFF3; --surface:#FFFFFF; --surface-2:#FAFAFB; --surface-3:#F4F4F8; --bg:#F1F1FA; /* Status families */ --pos:#10B981; --pos-strong:#047857; --pos-soft:#ECFDF5; --neg:#DC2626; --neg-strong:#B91C1C; --neg-soft:#FEE7E7; --warn:#F59E0B; --warn-strong:#B45309; --warn-soft:#FFFBEB; /* Honesty / confidence (vivid → muted as certainty drops) */ --conf-signal:var(--pos-strong); --conf-signal-soft:var(--pos-soft); --conf-prelim:var(--warn-strong); --conf-prelim-soft:var(--warn-soft); --conf-bg:var(--muted); --conf-bg-soft:var(--surface-3); --conf-nodata:var(--faint); --conf-nodata-soft:var(--surface-3); /* Severity (no emoji) */ --sev-high:var(--neg); --sev-med:var(--warn); --sev-low:var(--disabled); /* Chart */ --chart-line:var(--brand); --chart-fill-top:rgba(77,72,240,.20); --chart-fill-bot:rgba(77,72,240,.02); --chart-grid:var(--line-soft); /* Type scale */ --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-20:20px; --fs-24:24px; --fs-32:32px; --fs-40:40px; --font:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace; /* Spacing */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; /* Radius (glass favours softer edges) */ --radius-sm:6px; --radius:14px; --radius-lg:22px; --radius-pill:100px; /* Layout */ --container:1280px; --nav-h:56px; /* ── GLASS · LIGHT ── */ --glass: rgba(255,255,255,.60); --glass-bar: rgba(255,255,255,.72); --glass-deep: rgba(255,255,255,.42); --glass-border: rgba(255,255,255,.85); --glass-filter: blur(20px) saturate(180%); --glass-shadow: 0 10px 40px rgba(38,36,82,.12), 0 0 22px rgba(94,234,255,.05), 0 0 22px rgba(190,120,255,.06), inset 0 1px 0 rgba(255,255,255,.75), inset 0 0 0 1px rgba(255,255,255,.45); /* luminous lavender wash behind the frost */ --ambient: radial-gradient(900px 520px at 10% -8%, rgba(77,72,240,.20), transparent 60%), radial-gradient(820px 600px at 102% 6%, rgba(16,185,129,.12), transparent 55%), radial-gradient(760px 760px at 62% 118%, rgba(77,72,240,.16), transparent 60%), linear-gradient(180deg,#F1F1FA,#E7E7F3); /* neon orb colours (decorative layer) */ --orb-1:rgba(124,92,255,.30); --orb-2:rgba(56,214,255,.22); --orb-3:rgba(214,90,255,.18); --orb-4:rgba(16,185,129,.16); } /* ───────────────────────────────────────────────────────────────────────── 1b · TOKENS — DARK ("neon night") ───────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] { --brand:#6663F0; --brand-strong:#9D9AF7; --brand-mid:#353072; --brand-soft:#1E1B45; --ink:#F3F3F7; --ink-2:#C4C4D0; --muted:#9090A2; --faint:#6A6A7C; --disabled:#4A4A57; --line:#2A2A33; --line-soft:#22222A; --surface:#16161C; --surface-2:#1B1B22; --surface-3:#21212A; --bg:#0A0913; --pos:#34D399; --pos-strong:#6EE7B7; --pos-soft:#0E2A20; --neg:#F87171; --neg-strong:#FCA5A5; --neg-soft:#2A1416; --warn:#FBBF24; --warn-strong:#FCD34D; --warn-soft:#2A2008; --chart-fill-top:rgba(102,99,240,.30); --chart-fill-bot:rgba(102,99,240,.02); /* ── GLASS · DARK ── */ --glass: rgba(26,26,42,.56); --glass-bar: rgba(12,12,20,.55); --glass-deep: rgba(18,18,30,.42); --glass-border: rgba(255,255,255,.26); --glass-filter: blur(30px) saturate(200%); --glass-shadow: 0 14px 48px rgba(0,0,0,.45), 0 0 26px rgba(94,234,255,.12), /* chromatic edge */ 0 0 26px rgba(190,120,255,.14), inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.09); --ambient: radial-gradient(1200px 760px at 50% -12%, #16142e, transparent 62%), radial-gradient(1000px 700px at 60% 45%, rgba(78,68,170,.12), transparent 60%), linear-gradient(180deg,#070710,#0a0913); --orb-1:rgba(124,92,255,.60); --orb-2:rgba(56,214,255,.42); --orb-3:rgba(214,90,255,.34); --orb-4:rgba(16,185,129,.22); } /* ───────────────────────────────────────────────────────────────────────── 2 · BASE / RESET / AMBIENT ───────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing:border-box; } html, body { margin:0; padding:0; } body { font-family:var(--font); background:var(--ambient) fixed; color:var(--ink); font-size:var(--fs-14); line-height:1.4; -webkit-font-smoothing:antialiased; min-height:100vh; } h1,h2,h3 { margin:0; letter-spacing:-0.02em; } .num,.tabular { font-variant-numeric:tabular-nums; } .mono { font-family:var(--font-mono); } /* Page wrapper must sit above the orb layer */ .app, .container { position:relative; z-index:1; } .container { max-width:var(--container); margin:0 auto; padding:var(--space-5) 20px 80px; } /* Type helpers */ .t-display { font-size:var(--fs-40); font-weight:800; letter-spacing:-0.03em; } .t-h1 { font-size:var(--fs-32); font-weight:800; } .t-h2 { font-size:var(--fs-24); font-weight:700; letter-spacing:-0.01em; } .t-h3 { font-size:var(--fs-20); font-weight:700; } .t-body { font-size:var(--fs-16); font-weight:500; } .t-small { font-size:var(--fs-14); font-weight:500; } .t-caption { font-size:var(--fs-12); font-weight:600; color:var(--muted); } .t-kicker { font-size:var(--fs-12); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); } /* ───────────────────────────────────────────────────────────────────────── 3 · AMBIENT NEON ORBS (optional decorative layer) Drop this once near the top of , BEFORE your app wrapper: Orbs sit at z-index:0; glass panels (z-index:1) frost them via backdrop-filter. ───────────────────────────────────────────────────────────────────────── */ .glass-orbs { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; } .glass-orb { position:absolute; border-radius:50%; } .glass-orb--a { width:640px; height:640px; left:-140px; top:-180px; border-radius:50% 50% 48% 52% / 55% 45% 55% 45%; background:radial-gradient(circle at 38% 38%, var(--orb-1), transparent 70%); filter:blur(70px); animation:orbA 20s ease-in-out infinite; } .glass-orb--b { width:560px; height:560px; right:-120px; top:40px; border-radius:52% 48% 55% 45% / 45% 55% 45% 55%; background:radial-gradient(circle at 60% 40%, var(--orb-2), transparent 70%); filter:blur(80px); animation:orbB 26s ease-in-out infinite; } .glass-orb--c { width:680px; height:680px; left:42%; bottom:-300px; background:radial-gradient(circle at 50% 50%, var(--orb-3), transparent 70%); filter:blur(90px); animation:orbC 30s ease-in-out infinite; } .glass-orb--d { width:420px; height:420px; left:8%; bottom:-160px; background:radial-gradient(circle at 50% 50%, var(--orb-4), transparent 70%); filter:blur(80px); animation:orbB 24s ease-in-out infinite; } @keyframes orbA { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(46px,34px) scale(1.09);} } @keyframes orbB { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-34px,44px) scale(1.07);} } @keyframes orbC { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(26px,-32px) scale(1.11);} } /* ───────────────────────────────────────────────────────────────────────── 4 · GLASS COMPONENTS ───────────────────────────────────────────────────────────────────────── */ /* Glass surface mixin: apply .glass to any panel, or use the components below */ .glass, .card, .table, .nav { background:var(--glass); -webkit-backdrop-filter:var(--glass-filter); backdrop-filter:var(--glass-filter); border:1px solid var(--glass-border); box-shadow:var(--glass-shadow); } /* Nav bar */ .nav { display:flex; align-items:center; gap:2px; height:var(--nav-h); padding:0 20px; position:sticky; top:0; z-index:20; background:var(--glass-bar); border-radius:0; border-left:none; border-right:none; border-top:none; } /* Cards */ .card { border-radius:var(--radius-lg); padding:var(--space-4); } .card--lg { padding:var(--space-5); } .card--tone-ok { border-left:3px solid var(--pos); } .card--tone-warn { border-left:3px solid var(--warn); } .card--tone-neg { border-left:3px solid var(--neg); } .card--tone-info { border-left:3px solid var(--brand); } .metric__label { font-size:var(--fs-12); color:var(--muted); margin-bottom:8px; } .metric__value { font-size:var(--fs-24); font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; } .metric__note { font-size:var(--fs-11); color:var(--muted); margin-top:4px; } /* Buttons — pill */ .btn { display:inline-flex; align-items:center; gap:7px; padding:10px 18px; border-radius:var(--radius-pill); font-family:inherit; font-size:var(--fs-14); font-weight:700; border:1px solid transparent; cursor:pointer; transition:background .12s,color .12s,border-color .12s; } .btn--primary { background:var(--brand); color:var(--on-brand); box-shadow:0 4px 18px rgba(77,72,240,.35); } .btn--primary:hover { background:var(--brand-strong); } .btn--secondary { background:var(--glass); -webkit-backdrop-filter:var(--glass-filter); backdrop-filter:var(--glass-filter); color:var(--brand); border-color:var(--brand-mid); } .btn--secondary:hover { border-color:var(--brand); } .btn--ghost { background:transparent; color:var(--ink-2); border-color:var(--glass-border); font-weight:600; } .btn--ghost:hover { color:var(--brand); border-color:var(--brand); } .btn--danger { background:transparent; color:var(--neg); border-color:var(--neg); } .btn--danger:hover { background:var(--neg-soft); } .btn:disabled,.btn[aria-disabled="true"] { background:var(--surface-3); color:var(--disabled); border-color:var(--line); cursor:not-allowed; box-shadow:none; } .btn--sm { padding:7px 14px; font-size:var(--fs-13); } /* Segmented controls */ .seg { background:transparent; border:1px solid var(--glass-border); color:var(--ink-2); padding:6px 13px; border-radius:var(--radius-pill); font-weight:600; font-size:var(--fs-13); cursor:pointer; } .seg.is-active { background:var(--brand); border-color:var(--brand); color:var(--on-brand); font-weight:700; } .seg.is-active--soft { background:var(--brand-soft); border-color:var(--brand-mid); color:var(--brand-strong); } /* Badges / pills / dots */ .badge { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--radius-pill); font-size:var(--fs-12); font-weight:700; } .badge--ok { background:var(--pos-soft); color:var(--pos-strong); } .badge--warn { background:var(--warn-soft); color:var(--warn-strong); } .badge--neg { background:var(--neg-soft); color:var(--neg-strong); } .badge--neutral { background:var(--surface-3); color:var(--muted); } .pill { background:var(--surface-3); color:var(--muted); padding:3px 10px; border-radius:var(--radius-pill); font-size:var(--fs-12); font-weight:600; } .dot { width:8px; height:8px; border-radius:50%; display:inline-block; } .dot--high { background:var(--sev-high); width:11px; height:11px; } .dot--med { background:var(--sev-med); width:11px; height:11px; } .dot--low { background:var(--sev-low); width:11px; height:11px; } .dot--live { background:var(--pos); } /* Tabs */ .tabs { display:flex; gap:26px; border-bottom:1px solid var(--glass-border); } .tab { padding:0 0 13px; margin-bottom:-1px; border:none; background:none; font-family:inherit; font-size:var(--fs-16); font-weight:600; color:var(--muted); border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; } .tab.is-active { font-weight:700; color:var(--brand-strong); border-bottom-color:var(--brand); } /* Tables (glass surface from the mixin above) */ .table { width:100%; border-radius:var(--radius-lg); border-collapse:separate; border-spacing:0; overflow:hidden; } .table th { text-align:left; padding:11px 16px; background:var(--glass-deep); border-bottom:1px solid var(--glass-border); font-size:var(--fs-11); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); } .table td { padding:13px 16px; border-bottom:1px solid var(--line-soft); font-size:var(--fs-14); } .table tr:last-child td { border-bottom:none; } /* Form fields */ .field__label { display:block; font-size:var(--fs-14); font-weight:600; color:var(--ink-2); margin-bottom:7px; } .input,.select { width:100%; padding:11px 13px; border:1px solid var(--glass-border); border-radius:var(--radius); background:var(--glass); -webkit-backdrop-filter:var(--glass-filter); backdrop-filter:var(--glass-filter); color:var(--ink); font-family:inherit; font-size:var(--fs-14); outline:none; transition:border-color .12s,box-shadow .12s; } .input:focus,.select:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); } /* Tooltip — explanation layer (click, mobile-safe) */ .tip { position:relative; display:inline-flex; } .tip__btn { width:18px; height:18px; border-radius:50%; border:1px solid var(--glass-border); background:var(--surface-3); color:var(--muted); font-size:var(--fs-11); font-weight:700; line-height:1; cursor:pointer; } .tip__pop { position:absolute; z-index:30; top:26px; left:0; width:260px; background:var(--glass); -webkit-backdrop-filter:var(--glass-filter); backdrop-filter:var(--glass-filter); border:1px solid var(--glass-border); border-radius:var(--radius); box-shadow:var(--glass-shadow); padding:12px 14px; font-size:var(--fs-13); line-height:1.5; color:var(--ink-2); } /* Empty states + disclaimers (honest emptiness is first-class) */ .empty { border-radius:var(--radius-lg); padding:44px 24px; text-align:center; background:var(--glass); -webkit-backdrop-filter:var(--glass-filter); backdrop-filter:var(--glass-filter); border:1px solid var(--glass-border); } .empty--nodata { border-style:dashed; border-color:var(--disabled); box-shadow:none; } .empty__title { font-size:var(--fs-16); font-weight:800; color:var(--ink); margin-bottom:6px; } .empty__text { font-size:var(--fs-13); line-height:1.5; color:var(--muted); } .note { display:flex; gap:9px; align-items:flex-start; padding:12px 14px; border-radius:var(--radius); font-size:var(--fs-13); line-height:1.5; color:var(--ink-2); } .note--info { background:var(--brand-soft); border-left:3px solid var(--brand); } .note--warn { background:var(--warn-soft); border:1px solid var(--warn); } /* ───────────────────────────────────────────────────────────────────────── 5 · HONESTY UTILITIES — must read THROUGH the frost Visual weight drops as certainty drops; uncertain ≠ as convincing as confirmed. ───────────────────────────────────────────────────────────────────────── */ .is-signal { color:var(--conf-signal); font-weight:700; } .is-prelim { color:var(--conf-prelim); font-weight:700; } .is-bg { color:var(--conf-bg); font-weight:600; } .is-nodata { color:var(--conf-nodata); font-weight:600; font-style:italic; } .verdict { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--radius-pill); font-size:var(--fs-11); font-weight:800; letter-spacing:.02em; text-transform:uppercase; } .verdict--signal { background:var(--conf-signal-soft); color:var(--conf-signal); } .verdict--prelim { background:var(--conf-prelim-soft); color:var(--conf-prelim); } .verdict--bg { background:var(--conf-bg-soft); color:var(--conf-bg); font-weight:700; } .verdict--nodata { background:var(--conf-nodata-soft); color:var(--conf-nodata); font-weight:700; } .row--bg { opacity:.92; } .row--nodata { opacity:.82; } /* ───────────────────────────────────────────────────────────────────────── 6 · ACCESSIBILITY FALLBACK Frost can hurt contrast / motion sensitivity — degrade gracefully to solids. ───────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-transparency: reduce) { .glass, .card, .table, .nav, .input, .select, .tip__pop, .empty { -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--surface); } .nav { background:var(--surface); } body { background:var(--bg); } } @media (prefers-reduced-motion: reduce) { .glass-orb { animation:none; } } /* ───────────────────────────────────────────────────────────────────────── 7 · LEGACY ALIASES (old _base.html + styles.css names → new tokens) ───────────────────────────────────────────────────────────────────────── */ :root { --primary:var(--brand); --primary-dark:var(--brand-strong); --primary-light:var(--brand-soft); --grey:var(--line); --grey-2:var(--disabled); --green:var(--pos); --red:var(--neg); --amber:var(--warn); --text:var(--ink); --tre-primary:var(--brand); --tre-primary-dark:var(--brand-strong); --tre-primary-light:var(--brand-soft); --tre-primary-mid:var(--brand-mid); --tre-grey:var(--line); --tre-grey-bg:var(--bg); --tre-text:var(--ink); --tre-muted:var(--muted); --tre-red:var(--neg); --tre-red-bg:var(--neg-soft); --tre-radius:var(--radius); } /* ───────────────────────────────────────────────────────────────────────── 8 · RESPONSIVE ───────────────────────────────────────────────────────────────────────── */ @media (max-width:768px) { .container { padding:var(--space-4) 14px 64px; } .t-display { font-size:var(--fs-32); } .t-h1 { font-size:var(--fs-24); } .tabs { gap:18px; overflow-x:auto; -webkit-overflow-scrolling:touch; } .table--responsive thead { display:none; } .table--responsive td { display:flex; justify-content:space-between; gap:12px; } /* lighter blur on mobile for performance */ :root { --glass-filter:blur(16px) saturate(170%); } }