/* ═══════════════════════════════════════════════════════════════════════ TBH Dashboard - "Espresso Glass" overlay v6 SUBTLE (REVERSIBLE LAYER) Activation: this file does NOTHING unless has class="glass". Remove the class (or the ) and the dashboard is byte-identical to the original design (core.js reads two CSS variables set here and falls back to its original constants when they are absent). v6 philosophy: the ORIGINAL colour system, verbatim. Cards are the original surface (#352824) at 93% opacity over the original canvas (#2A1F1A): the resting blend lands within ~1/255 of the original hex. Liquid glass survives as a whisper: edge light, blur through the 7%, true glass on overlays/menus, grain, depth, and choreographed motion. ═══════════════════════════════════════════════════════════════════════ */ /* ── 1. Tokens ─────────────────────────────────────────────────────────── */ .glass{ --g-ease:cubic-bezier(.22,1,.36,1); --g-ease-drawer:cubic-bezier(.32,.72,0,1); --g-fast:.22s; /* hovers: smooth, weighted */ --g-med:.38s; /* lifts, cards */ --radius-lg:12px; --tbh-reveal-gap:85; /* ms between card entries (core.js hook) */ --tbh-count-ms:1900; /* number count-up duration (core.js hook) */ } .glass.dark{ /* original surface #352824, slightly open so the field breathes through */ --g-base:rgba(53,40,36,.9); --g-fill:radial-gradient(140% 60% at 18% -6%, rgba(255,236,210,.045), transparent 55%); --g-edge:inset 0 1px 0 rgba(255,240,222,.09),inset 0 -1px 0 rgba(0,0,0,.12); } /* ── 2. Field: the original canvas, with the faintest breath of light ──── */ .glass.dark .app{ background: radial-gradient(1100px 740px at 86% -12%, rgba(156,166,126,.07), transparent 60%), radial-gradient(940px 660px at -8% 110%, rgba(169,140,136,.06), transparent 56%), radial-gradient(800px 520px at 50% 120%, rgba(186,140,72,.05), transparent 62%), linear-gradient(180deg,#2A1F1A 0%,#271C17 100%); } .glass.dark .main{background:transparent;} .glass:not(.dark) .app{ background: radial-gradient(1000px 680px at 88% -10%, rgba(107,115,87,.06), transparent 58%), radial-gradient(860px 600px at -6% 106%, rgba(139,110,107,.05), transparent 55%), var(--bg); } .glass:not(.dark) .main{background:transparent;} /* wide-monitor proportion cap */ .glass .scroll>*{max-width:1560px;margin-inline:auto;} /* breathing room: filter / tab rows shouldn't hug the KPI cards above them (the glass card shadow eats into the gap, so the rows look cramped). 32px because the row's top margin collapses against the KPI block's 16px bottom margin — only the excess over 16 actually widens the gap. */ .glass .kpis + .seg-row, .glass .kpis + .tabs, .glass .card + .tabs, .glass .card + .seg-row{margin-top:32px;} /* grain: barely-there film */ .glass .app::after{ content:'';position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.02; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } .glass:not(.dark) .app::after{opacity:.015;} /* ── 3. Surfaces (dark): original colour, whisper of material ──────────── */ .glass.dark :where(.card:not(.brief),.kpi,.kcol,.mh-card:not(.dark-card):not(.pj-net),.act,.prop-card,.lost-card){ background:var(--g-fill),var(--g-base); border-color:var(--line); -webkit-backdrop-filter:blur(18px) saturate(125%); backdrop-filter:blur(18px) saturate(125%); box-shadow:var(--g-edge),var(--shadow); } /* inner cards: original surface-2 nearly solid */ .glass.dark :where(.lead-card){ background:rgba(62,47,41,.94); border-color:var(--line-2); } /* signature espresso panels untouched apart from a faint lit edge */ .glass.dark :where(.brief,.mh-card.dark-card,.f-rec){ box-shadow:inset 0 1px 0 rgba(255,240,222,.06),var(--shadow); } /* shells: visually original, glass only where it overlays */ .glass.dark .sb{ background:rgba(28,20,17,.97); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); } .glass.dark .topbar{ background:linear-gradient(180deg,rgba(42,31,26,.32),rgba(42,31,26,.12)); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); } /* menus + popovers: true glass (an overlay's privilege) */ .glass.dark :where(.qadd-menu,.snooze-pop){ background:linear-gradient(170deg,rgba(255,238,214,.05),rgba(255,238,214,.012)),rgba(53,40,36,.88); border-color:var(--line); -webkit-backdrop-filter:blur(20px) saturate(130%); backdrop-filter:blur(20px) saturate(130%); box-shadow:inset 0 1px 0 rgba(255,240,222,.08),var(--shadow-lift); } /* overlay panels: drawer, form, report, toast, auth - the glass moments */ .glass.dark .drawer{ background:linear-gradient(165deg,rgba(255,238,214,.03),rgba(255,238,214,0)),rgba(42,30,25,.9); -webkit-backdrop-filter:blur(24px) saturate(125%); backdrop-filter:blur(24px) saturate(125%); border-left:1px solid var(--line); } .glass.dark :where(.form-doc,.report-doc){ background:linear-gradient(165deg,rgba(255,238,214,.025),rgba(255,238,214,0)),rgba(44,31,26,.95); -webkit-backdrop-filter:blur(20px) saturate(120%); backdrop-filter:blur(20px) saturate(120%); border:1px solid var(--line); } .glass.dark .cc-toast{ background:linear-gradient(170deg,rgba(255,238,214,.05),rgba(255,238,214,.015)),rgba(53,40,36,.88); border:1px solid var(--line); -webkit-backdrop-filter:blur(18px) saturate(125%); backdrop-filter:blur(18px) saturate(125%); box-shadow:inset 0 1px 0 rgba(255,240,222,.08),var(--shadow-lift); } .glass.dark #authGate .auth-card{ background:linear-gradient(165deg,rgba(255,238,214,.04),rgba(255,238,214,.01)),rgba(53,40,36,.9); border:1px solid var(--line); -webkit-backdrop-filter:blur(20px) saturate(125%); backdrop-filter:blur(20px) saturate(125%); box-shadow:inset 0 1px 0 rgba(255,240,222,.08),0 30px 80px rgba(0,0,0,.45); } /* scrims: depth-of-field behind overlays */ .glass :where(.drawer-scrim,.form-scrim,.report-scrim){ background:rgba(20,13,10,.4); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); } /* inputs: original, with a soft focus ring */ .glass :where(.f-input,.f-select,.f-textarea){ transition:border-color var(--g-fast) var(--g-ease),box-shadow var(--g-fast) var(--g-ease); } .glass :where(.f-input,.f-select,.f-textarea):focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } /* semantic edge colours (unchanged, asserted over the material) */ .glass.dark .upd{border-left:3px solid var(--line);} .glass.dark .upd.overdue{border-left-color:var(--neg);} .glass.dark .upd.due{border-left-color:var(--gold);} .glass.dark .upd.ok{border-left-color:var(--olive-2);} .glass.dark .act{border-left-width:3px;} .glass.dark .act.now{border-left-color:var(--neg);} .glass.dark .act.today{border-left-color:var(--accent);} .glass.dark .act.week{border-left-color:var(--mauve);} .glass.dark .act.recapture{border-left-color:var(--gold);} .glass.dark .act.watch{border-left-color:var(--ink-3);} /* ── 4. Buttons: quiet frost only (original look, glass touch) ─────────── */ .glass.dark .btn{ background:rgba(255,240,222,.04); border-color:var(--line); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); } .glass.dark .btn:hover{background:rgba(255,240,222,.07);border-color:rgba(156,166,126,.35);} .glass.dark .btn.primary{background:var(--olive);border-color:var(--olive);} /* ── 5. Surfaces (light): original colour, whisper of material ─────────── */ .glass:not(.dark) :where(.card:not(.brief),.kpi,.kcol,.mh-card:not(.dark-card):not(.pj-net),.act,.prop-card,.lost-card){ background: radial-gradient(140% 60% at 18% -6%, rgba(255,255,255,.55), transparent 55%), rgba(255,255,255,.88); border-color:var(--line); -webkit-backdrop-filter:blur(16px) saturate(120%); backdrop-filter:blur(16px) saturate(120%); box-shadow:inset 0 1px 0 rgba(255,255,255,.8),var(--shadow); } .glass:not(.dark) .topbar{ background:linear-gradient(180deg,rgba(246,241,236,.5),rgba(246,241,236,.2)); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); } .glass:not(.dark) :where(.qadd-menu,.snooze-pop){ background:rgba(255,255,255,.85); -webkit-backdrop-filter:blur(18px) saturate(120%); backdrop-filter:blur(18px) saturate(120%); } .glass:not(.dark) .drawer{ background:rgba(250,246,240,.9); -webkit-backdrop-filter:blur(22px) saturate(120%); backdrop-filter:blur(22px) saturate(120%); border-left:1px solid var(--line); } .glass:not(.dark) :where(.form-doc,.report-doc){ background:rgba(250,246,240,.95); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border:1px solid var(--line); } .glass:not(.dark) :where(.drawer-scrim,.form-scrim,.report-scrim){background:rgba(52,37,31,.28);} .glass:not(.dark) .btn{ background:rgba(255,255,255,.55); border-color:var(--line); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); } .glass:not(.dark) .upd{border-left:3px solid var(--line);} .glass:not(.dark) .upd.overdue{border-left-color:var(--neg);} .glass:not(.dark) .upd.due{border-left-color:var(--gold);} .glass:not(.dark) .upd.ok{border-left-color:var(--olive-2);} .glass:not(.dark) .act{border-left-width:3px;} .glass:not(.dark) .act.now{border-left-color:var(--neg);} .glass:not(.dark) .act.today{border-left-color:var(--accent);} .glass:not(.dark) .act.week{border-left-color:var(--mauve);} .glass:not(.dark) .act.recapture{border-left-color:var(--gold);} .glass:not(.dark) .act.watch{border-left-color:var(--ink-3);} /* ── 6. Motion: purposeful, thoughtful ─────────────────────────────────── */ .glass :where(.btn,.icon-btn,.tab,.dtab,.seg button,.seg-chip,.seg-wrap button,.seg-sm button, .theme-tog button,.sb-i,.ch-a,.act-icbtn,.act-cta,.qadd-btn,.qadd-menu button, .drawer-x,.form-x,.svc-opt,.f-sig-btn,.f-rec-opt,.cc-detail,.snooze-pop button, .task,.wrow){transition-duration:var(--g-fast);} .glass :where(.kpi,.prop-card,.act,.lead-card,.card){transition-duration:var(--g-med);} /* press: fast in, weighted release */ .glass :where(.btn,.icon-btn,.qadd-btn,.act-cta,.act-icbtn,.seg button,.seg-chip, .seg-wrap button,.seg-sm button,.tab,.dtab,.theme-tog button,.f-sig-btn, .f-rec-opt,.drawer-x,.form-x,.rd-x):active{transform:scale(.97);transition-duration:.12s;} .glass .btn.primary:active{transform:translateY(0) scale(.97);} .glass .qadd-btn:active{transform:translateY(0) scale(.97);} .glass .sb-i:active{transform:scale(.985);} /* status edge keeps its colour and thickens on hover (was being repainted olive by the generic card-hover) — the left edge animates from 3px to 5px */ .glass .upd{transition:background var(--g-med) var(--g-ease),border-color var(--g-med) var(--g-ease),border-left-width .5s var(--g-ease),padding-left .5s var(--g-ease),box-shadow var(--g-med) var(--g-ease),transform var(--g-med) var(--g-ease);} /* hover: a quiet olive answer */ @media (hover:hover) and (pointer:fine){ .glass.dark .card:not(.brief):not(.upd):hover{border-color:rgba(156,166,126,.26);} .glass.dark :where(.kpi,.prop-card,.act):hover{border-color:rgba(156,166,126,.3);} .glass:not(.dark) .card:not(.brief):not(.upd):hover{border-color:rgba(107,115,87,.28);} /* edge grows +2px while padding shrinks -2px → content never moves */ .glass .upd.card:hover{border-left-width:5px;padding-left:22px;} .glass .sb-i svg{transition:transform var(--g-fast) var(--g-ease);} .glass .sb-i:hover svg{transform:translateX(2px);} .glass .qadd-btn svg{transition:transform .3s var(--g-ease);} .glass .qadd-btn:hover svg{transform:rotate(90deg);} .glass .wrow .wstat{transition:box-shadow var(--g-fast) var(--g-ease);} .glass .wrow:hover .wstat{box-shadow:0 0 0 4px rgba(156,166,126,.14),0 0 12px 0 rgba(156,166,126,.18);} } @media (prefers-reduced-motion:no-preference){ /* arrive: cards fade up from a soft blur, unhurried, staggered */ .glass .reveal.armed{transform:translateY(16px);filter:blur(7px);} .glass .reveal.armed.in{ transition:opacity 1.35s var(--g-ease),transform 1.35s var(--g-ease),filter 1.1s var(--g-ease); filter:blur(0); } .glass .view.on{animation-duration:.85s;} .glass .dtab-panel.on{animation-duration:.35s;} /* text settles a beat after its card */ .glass .view.on :is(.kpi-l,.kpi-v,.kpi-d,.ch,.hero-fig,.brief-q,.brief-foot, .mh-card .ml,.mh-card .mv,.mh-card .mc,.chart-legend){ animation:glassText 1s var(--g-ease) .25s backwards; } /* charts settle at a cinematic tempo */ .glass .fbar{transition:width 1.6s var(--g-ease);} .glass .disc-fill{transition:width 1.7s var(--g-ease)!important;} .glass .view.on .donut svg{animation:glassDonut 1.4s var(--g-ease);transform-origin:50% 50%;} /* respond: menus pop from their trigger, nav confirms with a drawn bar */ .glass .qadd-menu.on{animation:glassPop .18s var(--g-ease) backwards;transform-origin:top right;} .glass .snooze-pop{animation:glassPop .18s var(--g-ease) backwards;transform-origin:top right;} .glass .sb-i.on::before{animation:glassBar .35s var(--g-ease);} /* overlays: drawer rides an iOS curve, content settles in sequence */ .glass .drawer{transition:transform .46s var(--g-ease-drawer);} .glass .drawer.on .drawer-b>*{animation:fadeUp .55s var(--g-ease) backwards;} .glass .drawer.on .drawer-b>*:nth-child(2){animation-delay:.06s;} .glass .drawer.on .drawer-b>*:nth-child(3){animation-delay:.12s;} .glass .drawer.on .drawer-b>*:nth-child(4){animation-delay:.18s;} .glass .drawer.on .drawer-b>*:nth-child(5){animation-delay:.24s;} .glass .drawer.on .drawer-b>*:nth-child(n+6){animation-delay:.3s;} .glass :where(.form-doc,.report-doc){transition:transform .3s var(--g-ease);} .glass :where(.form-scrim,.report-scrim,.drawer-scrim,.form-modal,.report-modal){transition-duration:.3s;} .glass .cc-toast{transition:opacity .32s var(--g-ease),transform .32s var(--g-ease);} /* confirm: once-per-action delight */ .glass .task.done .ck{animation:glassCk .32s var(--g-ease);} .glass .theme-tog button.on svg{animation:glassTog .35s var(--g-ease);} .glass #authGate .auth-card{animation:fadeUp .6s var(--g-ease);} /* ambient: the brief's spark circles ripple, slow and offset */ .glass .brief-spark circle:nth-of-type(1){animation:glassRipple 7s var(--ease-io,ease-in-out) infinite;} .glass .brief-spark circle:nth-of-type(2){animation:glassRipple 7s var(--ease-io,ease-in-out) -3.5s infinite;} } /* spark presence (static): tinted, visible */ .glass .brief-spark{opacity:.9;} .glass .brief-spark circle{transform-box:fill-box;transform-origin:center;} .glass .brief-spark circle:nth-of-type(1){stroke:rgba(246,241,236,.3);} .glass .brief-spark circle:nth-of-type(2){stroke:rgba(212,177,170,.4);} @keyframes glassText{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}} @keyframes glassPop{from{opacity:0;transform:scale(.96) translateY(-4px);}to{opacity:1;transform:none;}} @keyframes glassBar{from{transform:scaleY(0);}to{transform:scaleY(1);}} @keyframes glassDonut{from{opacity:0;transform:rotate(-70deg) scale(.94);}to{opacity:1;transform:none;}} @keyframes glassCk{0%{transform:scale(1);}45%{transform:scale(1.22);}100%{transform:scale(1);}} @keyframes glassTog{0%{transform:rotate(-40deg) scale(.8);opacity:.4;}100%{transform:none;opacity:1;}} @keyframes glassRipple{0%,100%{transform:scale(1);opacity:.5;}50%{transform:scale(1.12);opacity:1;}} /* ── 7. 2026 refinements: a11y, touch, platform polish ─────────────────── */ /* native controls + scrollbars match the active theme */ .glass.dark{color-scheme:dark;} .glass:not(.dark){color-scheme:light;} /* micro-label legibility: same hue, enough contrast for small text (WCAG AA) */ .glass.dark{--ink-3:rgba(247,240,234,.62);} .glass:not(.dark){--ink-3:#7E6C60;} /* complete the focus-visible coverage (the original covers the main CTAs) */ .glass :is(.tab,.ch-a,.icon-btn,.act-icbtn,.theme-tog button,.drawer-x,.form-x,.rd-x, .seg button,.seg-wrap button,.seg-sm button,.cc-detail,.f-sig-btn,.f-rec-opt):focus-visible{ outline:2px solid var(--accent);outline-offset:2px; } /* instant, intentional touch: no 300ms delay, no grey tap flash */ .glass :where(button,[role="button"],a,.task,.wrow,.act,.lead-card,.prop-card,.svc-opt,.ch-a){ -webkit-tap-highlight-color:transparent; touch-action:manipulation; } /* panels keep their scroll to themselves (no scroll-chaining bounce) */ .glass :where(.scroll,.drawer-b,.form-body){overscroll-behavior:contain;} /* headline + prose wrapping */ .glass :is(.tb-title,.drawer-h .ti,.form-head .ti,.rd-title){text-wrap:balance;} .glass :is(.brief-q,.dnote,.set-desc,.rd-prose){text-wrap:pretty;} /* comfortable touch targets on coarse pointers (44px floor) */ @media (pointer:coarse){ .glass :is(.icon-btn,.act-icbtn,.drawer-x,.form-x,.rd-x,.theme-tog button,.f-sig-btn){ min-width:44px;min-height:44px; } .glass :is(.f-input,.f-select,.f-textarea){font-size:16px;} /* stops iOS focus-zoom */ .glass .rng::-webkit-slider-thumb{width:24px;height:24px;} } /* ── 8. Accessibility fallbacks ────────────────────────────────────────── */ @media (prefers-reduced-transparency:reduce){ .glass.dark :is(.card,.kpi,.kcol,.mh-card,.act,.prop-card,.lost-card,.qadd-menu,.snooze-pop, .drawer,.form-doc,.report-doc,.cc-toast,#authGate .auth-card,.btn){ background:var(--surface); -webkit-backdrop-filter:none;backdrop-filter:none; } .glass.dark :is(.sb,.topbar){background:var(--sidebar);-webkit-backdrop-filter:none;backdrop-filter:none;} .glass.dark .topbar{background:var(--canvas);} .glass.dark .main{background:var(--canvas);} .glass:not(.dark) :is(.card,.kpi,.kcol,.mh-card,.act,.prop-card,.lost-card,.qadd-menu,.snooze-pop, .drawer,.form-doc,.report-doc){ background:var(--surface); -webkit-backdrop-filter:none;backdrop-filter:none; } .glass .app::after{display:none;} }