/* ── Fluid layer ────────────────────────────────────────────────────────── Port of the Fluid Functionalism motion system (tools/fluid-functionalism, MIT © Micka Touillaud) onto the dashboard's monochrome brand. Motion is information: fast tiers, exits quicker than enters, transform/ opacity only, weight-not-reflow labels, proximity hover, entrance reveals. CSS transitions restart from rest (springs don't), so durations here run ~25-40% quicker than the source spring tokens to match perceived speed. Load LAST in : ← after /nav.js */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); :root{ --ff-fast:70ms; --ff-fast-exit:50ms; --ff-mod:120ms; --ff-mod-exit:90ms; --ff-slow:200ms; --ff-slow-exit:140ms; --ff-hl:90ms; /* proximity highlight tracking */ --ff-ease:cubic-bezier(.3,.9,.35,1); --ff-ease-bounce:cubic-bezier(.32,1.2,.45,1); --ff-ease-exit:cubic-bezier(.4,0,1,1); --ff-wght-rest:'wght' 450,'opsz' 15; --ff-wght-active:'wght' 560,'opsz' 20; --fluid-hl-bg:rgba(0,0,0,.07); --fluid-lift:0 2px 10px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.05); } [data-theme="dark"]{ --fluid-hl-bg:rgba(255,255,255,.10); --fluid-lift:0 2px 12px rgba(0,0,0,.5); } /* ── weight without reflow (ghost-span, wrapped by fluid.js) ── */ .fw{display:inline-grid} .fw>span{grid-area:1/1;white-space:nowrap} .fw-g{visibility:hidden;font-variation-settings:var(--ff-wght-active)} .fw-v{ font-variation-settings:var(--ff-wght-rest); transition:font-variation-settings var(--ff-fast) linear,color var(--ff-fast) var(--ff-ease); } .ddnav-top:hover .fw-v,.ddnav-item.open .fw-v,.ddnav-top.active .fw-v, .ddnav-menu a:hover .fw-v,.ddnav-menu a.active .fw-v,.ddnav-menu a.fluid-near .fw-v, .nav-link:hover .fw-v,.nav-link.active .fw-v, .nav-page:hover .fw-v,.nav-page.current .fw-v{ font-variation-settings:var(--ff-wght-active); } .ddnav-menu a.active{font-weight:inherit} /* ── proximity highlight: tracks the nearest target ── */ .fluid-prox{position:relative} /* movement is spring-driven from fluid.js (velocity carries between targets); CSS only owns the fade */ .fluid-hl{ position:absolute;z-index:0;left:6px;top:0;height:0;width:calc(100% - 12px); border-radius:8px;background:var(--fluid-hl-bg);opacity:0;pointer-events:none; will-change:transform; transition:opacity var(--ff-fast) var(--ff-ease); } .fluid-prox.fluid-leaving .fluid-hl{transition-duration:var(--ff-fast-exit)} .fluid-prox>*{position:relative;z-index:1} .fluid-hl{z-index:0!important} /* horizontal flavor (top nav): pill-shaped, sized by JS */ .fluid-prox-x .fluid-hl{left:0;top:auto;border-radius:999px} /* the overlay owns the hover background; items keep only their color shift */ .ddnav-menu.fluid-prox a:hover{background:transparent} .ddnav-links.fluid-prox-x .ddnav-top:hover{background:transparent} .ddnav-menu.fluid-prox a.fluid-near{color:rgba(0,0,0,.95)} .ddnav-links.fluid-prox-x .ddnav-top.fluid-near{color:rgba(0,0,0,.9)} [data-theme="dark"] .ddnav-menu.fluid-prox a.fluid-near{color:rgba(255,255,255,.95)} /* nearest-row highlight (tables) */ tbody tr{transition:background var(--ff-fast) var(--ff-ease)} tbody tr.fluid-near{background:rgba(0,0,0,.035)} [data-theme="dark"] tbody tr.fluid-near{background:rgba(255,255,255,.06)} /* ── surfaces answer the cursor: gentle lift on the fast tier ── */ .card,.stat-hero,.persona-ctr-card,.chart-card,.callout,.takeaway{ transition:background var(--ff-fast) var(--ff-ease), box-shadow var(--ff-mod) var(--ff-ease), transform var(--ff-mod) var(--ff-ease); } .card:hover,.stat-hero:hover,.persona-ctr-card:hover{ box-shadow:var(--fluid-lift); transform:translateY(-1px); } /* ── entrance reveals (staggered by fluid.js) ── */ html.fluid-reveals .fluid-in{opacity:0;transform:translateY(7px)} html.fluid-reveals .fluid-in.fluid-in-view{ opacity:1;transform:none; transition:opacity var(--ff-slow) var(--ff-ease),transform var(--ff-slow) var(--ff-ease); transition-delay:var(--fluid-d,0ms); } /* ── press feedback ── */ .ddnav-top:active,.nav-link:active,.nav-page:active,.theme-toggle:active, .collapse-trigger:active,.cta:active,button.fluid-press:active{ transform:scale(.96); transition-duration:var(--ff-fast); } /* ── focus rings ── */ :where(a,button,[tabindex],input,select,textarea):focus-visible{ outline:2px solid rgba(0,0,0,.35);outline-offset:2px; transition:outline-offset var(--ff-fast) var(--ff-ease); } [data-theme="dark"] :where(a,button,[tabindex],input,select,textarea):focus-visible{ outline-color:rgba(255,255,255,.45); } /* ── discoverable thin scrollbars ── */ .table-wrap,pre,.scroll-x{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent} .table-wrap::-webkit-scrollbar,pre::-webkit-scrollbar,.scroll-x::-webkit-scrollbar{width:8px;height:8px} .table-wrap::-webkit-scrollbar-track,pre::-webkit-scrollbar-track,.scroll-x::-webkit-scrollbar-track{background:transparent} .table-wrap::-webkit-scrollbar-thumb,pre::-webkit-scrollbar-thumb,.scroll-x::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.15);border-radius:999px;border:2px solid transparent;background-clip:padding-box; } .table-wrap:hover::-webkit-scrollbar-thumb,pre:hover::-webkit-scrollbar-thumb,.scroll-x:hover::-webkit-scrollbar-thumb{ background-color:rgba(0,0,0,.3);background-clip:padding-box; } [data-theme="dark"] .table-wrap,[data-theme="dark"] pre,[data-theme="dark"] .scroll-x{scrollbar-color:rgba(255,255,255,.2) transparent} /* ── reduced motion: keep fades, drop movement ── */ @media (prefers-reduced-motion:reduce){ .fluid-hl{transition:opacity var(--ff-fast) linear} .ddnav-menu{transition:opacity var(--ff-fast) linear,visibility var(--ff-fast) linear!important;transform:none!important} .ddnav-caret,.collapse-trigger .chevron{transition:none!important} .collapse-body{transition:none!important} html.fluid-reveals .fluid-in{opacity:1;transform:none} .card:hover,.stat-hero:hover,.persona-ctr-card:hover{transform:none} .ddnav-top:active,.nav-link:active,.nav-page:active,.theme-toggle:active, .collapse-trigger:active,.cta:active,button.fluid-press:active{transform:none} .fw-v{transition:color var(--ff-fast) linear} }