/* ========================================================================== BNDR LifeMatrix - Base Design System Shared across landing, app, unlock, and legal pages. Design tokens are RGB triplets so they compose with alpha everywhere. ========================================================================== */ /* ---------- Fonts (self-hosted, no external requests) ---------- */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/nunito-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/nunito-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/nunito-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/nunito-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/nunito-latin-800-normal.woff2') format('woff2'); } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/nunito-latin-900-normal.woff2') format('woff2'); } @font-face { font-family: 'Rubik Moonrocks'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/rubik-moonrocks-latin-400-normal.woff2') format('woff2'); } /* Inter: the app face (P-16 / D-01). App-scoped swap only - the landing page still renders Nunito (landing.css), so the Nunito @font-face blocks and woff2 files above MUST NOT be deleted. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/inter-latin-300-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/inter-latin-800-normal.woff2') format('woff2'); } /* === GLOBAL LAYER — edit here first === SECTION 0: one app, one language. Design tokens live here; behavior primitives live under the same banner in app-core.js. A global change (type, color, icon language, popup skin, motion) must be achievable by editing exactly ONE definition here. New color/font literals in page code are a defect. Later steps fill this layer; nothing is deleted in the gathering. */ /* ---------- Design tokens ---------- */ :root { /* Dark base (default) */ --color-primary: 3 4 8; /* v15: black-dominant page base */ --color-secondary: 9 11 17; /* v15: deeper card / panel */ --color-tertiary: 32 37 51; /* raised control */ --color-text-primary: 235 238 245; --color-text-secondary: 213 219 232; /* v14: no grey text - bright secondary */ --color-danger: 252 116 134; /* v14.3: lively coral-rose, not the old harsh red */ /* P-01 / D-09: --color-success and --color-warning are DERIVED from the active accent (success = accent hue +130deg, C x 0.85; warning = accent hue -70deg, L + 0.05, C x 0.90; OKLCH), lightness-clamped per mode to hold WCAG AA against --color-primary and --color-secondary. The values here are the default (Apex Teal) row of the build-time per-theme fallback table below. The tokens stay RGB triplets on purpose: every consumer in the build reads triplets (tailwind rgb(var(--x)/) map, Util.cssColor, aurora) and an oklch() value in these properties breaks them (verified in-session). --color-danger does not change. No new theme classes. No consumer changes. .bndr-studio keeps its own brand success overrides (P-01). */ --color-warning: 214 215 108; /* P-01 derived: Apex Teal, dark (AA vs both bases) */ --color-success: 216 169 252; /* P-01 derived: Apex Teal, dark (AA vs both bases) */ /* Glass system */ --glass-bg: 255 255 255; --glass-bg-alpha: 0.030; --glass-border-alpha: 0.16; --glass-highlight-alpha: 0.30; /* P-06: blur is the only legibility tool - raised now that card fills are fully transparent. Occluding chrome (sidebar, mobile header, toast, dialogs, walkthrough card, crash-report panel) keeps a void+tint / bone+tint surface at low alpha - never grey, never fully transparent. */ --glass-blur: 28px; --glass-shadow: 0 18px 50px -18px rgb(0 0 0 / 0.55); --occluder-alpha: 0.72; /* void+tint alpha on occluding surfaces, dark */ /* Default accent (Apex Teal) - overridden by theme classes below */ --color-accent: 13 222 195; --color-accent-hover: 50 240 215; /* Foreground on solid accent controls; theme overrides maintain AA contrast. */ --color-on-accent: 13 13 13; /* Shared clear-glass hierarchy; active hues still come from theme presets. */ --color-surface-contrast: 255 255 255; --color-shadow: 0 0 0; --interactive-glass-fill-alpha: 0.045; --interactive-glass-border-alpha: 0.16; --interactive-glass-highlight-alpha: 0.22; --interactive-glass-blur: 8px; --radius-sm: 4px; /* P3 radius scale */ --radius-md: 6px; --radius-lg: 10px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* --- Typography role tokens (P-16 / D-01): every text element routes through a role; ad-hoc font/size/weight literals in page code are a defect (SECTION 0 rule). --- */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; /* app face */ --font-brand: 'Rubik Moonrocks', 'Nunito', cursive; /* brand wordmark only */ --tracking-display: -0.02em; /* Display: Inter 800, 24px/32 (30px at sm) */ --tracking-heading: -0.01em; /* Heading: Inter 700 */ --tracking-label: 0.04em; /* form/section labels: Inter 600 uppercase 12px */ --weight-display: 800; --weight-heading: 700; --weight-ui-strong: 600; --weight-body: 400; --weight-label: 500; --weight-caption: 500; /* Caption: 11px floor (10px only footer/legal chip) */ --weight-numeral-display: 800; /* stat tiles, tabular-nums */ --weight-numeral-hero: 300; /* focus timer, tabular-nums (KEEP: stays light) */ /* --- Two-white system (P-03b): every "white" in the app routes through these two tokens. New white literals in page code are a defect. --- */ --white-surface: 250 249 245; /* bone family - surfaces */ --white-text: 235 238 245; /* the page text/glow white */ /* --- Aurora depth tokens (P-04/P-05): ribbon colors are the accent mixed toward the mode base at near/mid/far depths. Dimness comes from the color mix, never from thinned element opacity (the banding kill, D-02). Defaults = Apex Teal dark; every theme class overrides below. --- */ --aurora-near: 4 30 30; --aurora-mid: 4 21 23; --aurora-far: 4 16 18; } html[data-theme="light"] { /* P-03b: light base is warm bone, not near-white - no grey/blue cast. Contrast for true accents comes from background density (P-05), never from darkening the accent (P-02). */ --color-primary: 244 242 236; --color-secondary: 250 249 245; --color-tertiary: 226 221 210; --color-text-primary: 22 27 41; --color-text-secondary: 84 93 115; --color-danger: 225 72 104; /* v14.3: rose, softer than pure red */ --color-warning: 114 114 0; /* P-01 derived: Apex Teal, light (L clamped for AA) */ --color-success: 137 92 169; /* P-01 derived: Apex Teal, light (L clamped for AA) */ --glass-bg: 255 255 255; --glass-bg-alpha: 0.45; --glass-border-alpha: 0.72; --glass-highlight-alpha: 0.95; --glass-shadow: 0 18px 45px -22px rgb(30 41 82 / 0.28); --color-surface-contrast: 13 13 13; --color-shadow: 30 41 82; --interactive-glass-fill-alpha: 0.66; --interactive-glass-border-alpha: 0.10; --interactive-glass-highlight-alpha: 0.90; --occluder-alpha: 0.78; /* bone+tint alpha on occluding surfaces, light */ /* Aurora depth defaults, light: accent carried at low density into the warm bone base so surfaces keep contrast (P-05.5). */ --aurora-near: 209 239 230; --aurora-mid: 221 240 232; --aurora-far: 228 241 233; } /* Accent themes. Featured set is curated around the BNDR brand; the legacy v2 classes (apex-teal-glow, electric-*, neon-blue…) are kept below so any theme a user saved in an older version still renders. */ .lime-punch { --color-accent: 200 240 49; --color-accent-hover: 216 248 96; } .sunset-coral { --color-accent: 255 107 74; --color-accent-hover: 255 132 104; } .ultraviolet { --color-accent: 178 75 243; --color-accent-hover: 196 108 248; } /* Legacy v2 accents (backward compatibility) */ .apex-teal-glow { --color-accent: 13 222 195; --color-accent-hover: 50 240 215; } .electric-magenta-glow { --color-accent: 255 0 255; --color-accent-hover: 255 80 255; } .electric-vioblue { --color-accent: 138 43 226; --color-accent-hover: 158 73 246; --color-on-accent: 255 255 255; } .electric-blue-dark { --color-accent: 25 95 255; --color-accent-hover: 45 115 255; --color-on-accent: 255 255 255; } .pastel-pink { --color-accent: 244 143 177; --color-accent-hover: 248 166 192; } /* P10: modern rose */ .neon-blue { --color-accent: 0 191 255; --color-accent-hover: 30 211 255; } .tropical-orange { --color-accent: 255 159 64; --color-accent-hover: 255 180 90; } /* --- P-01 per-theme fallback table (build-time): success & warning derived from each theme's accent per the D-09 rule, both modes, lightness-clamped for WCAG AA against the mode's --color-primary and --color-secondary. bndr-studio is absent for SUCCESS: its brand-lime overrides below remain (P-01) - only its warning is derived. --- */ .lime-punch { --color-success: 196 224 255; --color-warning: 255 232 219; } .sunset-coral { --color-success: 0 189 135; --color-warning: 227 135 236; } .ultraviolet { --color-success: 177 124 0; --color-warning: 1 161 233; } .apex-teal-glow { --color-success: 216 169 252; --color-warning: 214 215 108; } .electric-magenta-glow { --color-success: 183 159 0; --color-warning: 123 176 255; } .electric-vioblue { --color-success: 168 108 1; --color-warning: 5 135 180; } .electric-blue-dark { --color-success: 226 58 22; --color-warning: 4 148 146; } .pastel-pink { --color-success: 181 217 171; --color-warning: 226 213 255; } .neon-blue { --color-success: 243 139 170; --color-warning: 94 219 163; } .tropical-orange { --color-success: 25 211 206; --color-warning: 255 172 209; } html[data-theme="light"].lime-punch { --color-success: 1 112 199; --color-warning: 176 84 0; } html[data-theme="light"].sunset-coral { --color-success: 3 126 89; --color-warning: 163 75 171; } html[data-theme="light"].ultraviolet { --color-success: 145 102 2; --color-warning: 2 117 170; } html[data-theme="light"].apex-teal-glow { --color-success: 137 92 169; --color-warning: 114 114 0; } html[data-theme="light"].electric-magenta-glow { --color-success: 127 110 0; --color-warning: 0 105 230; } html[data-theme="light"].electric-vioblue { --color-success: 149 96 0; --color-warning: 1 119 161; } html[data-theme="light"].electric-blue-dark { --color-success: 206 42 1; --color-warning: 3 123 121; } html[data-theme="light"].pastel-pink { --color-success: 86 119 77; --color-warning: 118 102 151; } html[data-theme="light"].neon-blue { --color-success: 175 78 110; --color-warning: 3 126 85; } html[data-theme="light"].tropical-orange { --color-success: 4 124 120; --color-warning: 175 76 126; } /* --- P-04/P-05 per-theme aurora depth table (build-time): each theme's accent mixed toward the mode base - dark: near 12% / mid 8% / far 5.5% into void black; light: near 15% / mid 10% / far 7% into warm bone (bndr-studio light mixed into its own cream primary). Brand colors reach the ribbons only under .bndr-studio - every other theme is the user's color + void black (RC-1 fix carries into the background). --- */ .apex-teal-glow { --aurora-near: 5 42 40; --aurora-mid: 4 28 28; --aurora-far: 4 20 20; } /* P10: deeper presence */ .bndr-studio { --aurora-near: 33 8 17; --aurora-mid: 23 7 14; --aurora-far: 17 6 12; } .lime-punch { --aurora-near: 27 32 13; --aurora-mid: 19 23 11; --aurora-far: 14 17 10; } .sunset-coral { --aurora-near: 46 15 14; --aurora-mid: 30 11 12; --aurora-far: 21 9 11; } /* P10: coral, not brown */ .ultraviolet { --aurora-near: 24 13 36; --aurora-mid: 17 10 27; --aurora-far: 13 8 21; } .electric-magenta-glow { --aurora-near: 33 4 38; --aurora-mid: 23 4 28; --aurora-far: 17 4 22; } .electric-vioblue { --aurora-near: 19 9 34; --aurora-mid: 14 7 25; --aurora-far: 10 6 20; } .electric-blue-dark { --aurora-near: 6 15 38; --aurora-mid: 5 11 28; --aurora-far: 4 9 22; } .pastel-pink { --aurora-near: 40 22 30; --aurora-mid: 27 16 22; --aurora-far: 19 12 17; } /* P10: rose depth */ .neon-blue { --aurora-near: 3 26 38; --aurora-mid: 3 19 28; --aurora-far: 3 14 22; } .tropical-orange { --aurora-near: 48 27 10; --aurora-mid: 31 18 9; --aurora-far: 21 13 9; } /* P10: amber, not brown */ html[data-theme="light"].apex-teal-glow { --aurora-near: 196 238 226; --aurora-mid: 212 239 229; --aurora-far: 222 240 231; } /* P10 */ html[data-theme="light"].bndr-studio { --aurora-near: 239 204 205; --aurora-mid: 238 214 212; --aurora-far: 237 219 216; } html[data-theme="light"].lime-punch { --aurora-near: 237 242 208; --aurora-mid: 240 242 217; --aurora-far: 241 242 223; } html[data-theme="light"].sunset-coral { --aurora-near: 248 214 202; --aurora-mid: 246 224 213; --aurora-far: 245 230 221; } /* P10 */ html[data-theme="light"].ultraviolet { --aurora-near: 234 217 237; --aurora-mid: 237 225 237; --aurora-far: 239 230 236; } html[data-theme="light"].electric-magenta-glow { --aurora-near: 246 206 239; --aurora-mid: 245 218 238; --aurora-far: 245 225 237; } html[data-theme="light"].electric-vioblue { --aurora-near: 228 212 235; --aurora-mid: 233 222 235; --aurora-far: 237 228 235; } html[data-theme="light"].electric-blue-dark { --aurora-near: 211 220 239; --aurora-mid: 222 227 238; --aurora-far: 229 232 237; } html[data-theme="light"].pastel-pink { --aurora-near: 247 224 231; --aurora-mid: 246 230 234; --aurora-far: 245 234 235; } /* P10 */ html[data-theme="light"].neon-blue { --aurora-near: 207 234 239; --aurora-mid: 220 237 238; --aurora-far: 227 238 237; } html[data-theme="light"].tropical-orange { --aurora-near: 248 224 196; --aurora-mid: 246 230 208; --aurora-far: 245 234 217; } /* P10 */ /* BNDR Studio (DEFAULT) - matches the bndrllc.com brand site: hot-pink accent with lime success tones; warm cream surfaces in light mode. */ .bndr-studio { --color-accent: 255 39 87; --color-accent-hover: 255 77 115; --color-success: 168 211 86; /* v14.1: softened lime - keeps the brand hue, drops the acid edge (P-01: scoped brand success REMAINS) */ --color-warning: 191 115 255; /* P-01 derived from brand accent, dark */ } html[data-theme="light"].bndr-studio { --color-primary: 236 233 226; --color-secondary: 247 245 240; --color-tertiary: 217 212 200; --color-text-primary: 13 13 13; --color-text-secondary: 92 89 80; --color-success: 104 152 44; /* v14.1: greener, no brown cast (P-01: scoped brand success REMAINS) */ --color-warning: 145 60 208; /* P-01 derived from brand accent, light (lightness clamped vs the theme's own light bases for AA) */ --glass-bg: 255 255 255; --glass-bg-alpha: 0.55; --glass-border-alpha: 0.65; } html[data-theme="dark"].bndr-studio, html.dark.bndr-studio:not([data-theme="light"]) { --color-accent: 255 39 87; --color-accent-hover: 255 87 122; } /* P-02: the muted light-mode accent overrides are DELETED. Every theme keeps its true hue in light mode - lime reads lime, coral coral, ultraviolet violet. Contrast comes from background density (P-05), never from darkening the accent. Verified this session: every true accent and hover holds AA >= 4.5 against --color-on-accent in light mode (theme-contrast gate). */ /* ---------- Base element styles ---------- */ * { box-sizing: border-box; } html { font-family: var(--font-sans, 'Inter', system-ui, -apple-system, sans-serif); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background-color: rgb(var(--color-primary)); color: rgb(var(--color-text-primary)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.35s ease, color 0.35s ease; } h1, h2 { font-weight: 800; letter-spacing: var(--tracking-display, -0.02em); } h3, h4, h5, h6 { font-weight: 800; letter-spacing: var(--tracking-heading, -0.01em); } /* P-16 regression guard: the landing page keeps its original typography. */ body.landing h1, body.landing h2, body.landing h3, body.landing h4, body.landing h5, body.landing h6 { letter-spacing: -0.015em; } .brand-title { font-family: 'Rubik Moonrocks', 'Nunito', cursive; font-weight: 400; letter-spacing: 0; } /* Display-moment italic voice (P-16 / D-01): permitted ONLY on the Home greeting H1, empty-state headlines, and Help & Guide intros - never in dialogs, tables, settings, toolbars, form labels, or body text. */ .display-italic { font-style: italic; font-weight: var(--weight-display, 800); letter-spacing: var(--tracking-display, -0.02em); } ::selection { background: rgb(var(--color-accent) / 0.35); } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { /* P2: S3 accent thumb on a clear track (the grey/navy pairing is banned). */ background: rgb(var(--color-accent) / 0.4); border-radius: var(--radius-md); } ::-webkit-scrollbar-thumb:hover { background: rgb(var(--color-accent) / 0.65); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } a { color: inherit; } button:focus-visible, input:focus-visible, a:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid rgb(var(--color-accent)); outline-offset: 2px; border-radius: var(--radius-sm); } /* ---------- Aurora ambient background (P-04/P-05) ---------- Deep black water lit by the theme color: broad, soft ribbons of theme light flow slowly through a void-black field - ultra-clear, no grain, no visible gradient steps, real near/mid/far depth (D-02). Refined IN PLACE from the existing ribbon structure; the reference image shares this form. The banding kill, all three causes: (a) ribbons render at full element opacity - dimness comes from the color mix toward the base (--aurora-near/mid/far), never from thinned alpha; (b) multi-stop gradients, `in oklab` where supported, so interpolation steps fall below visibility; (c) a fixed full-viewport dither veil (body::after, inline feTurbulence noise, ~2.5%) breaks any remaining 8-bit quantization. Budget (hard): CSS-only, transform/opacity compositing, will-change kept, no per-frame JS, no canvas, no texture file. */ .aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: linear-gradient(145deg, rgb(var(--color-primary)) 0%, rgb(var(--color-secondary) / 0.72) 52%, rgb(var(--color-primary)) 100%); } /* P9: underwater depth (reference lighting) - two broad light currents (upper-right near, lower-left mid) and two tiny star points over the deepened void. Same budget: CSS-only, transform/opacity compositing. */ .aurora::before { content: ''; position: absolute; inset: -12%; background: radial-gradient(52vmax 34vmax at 82% 12%, rgb(var(--aurora-near) / 0.34), transparent 68%), radial-gradient(46vmax 30vmax at 12% 86%, rgb(var(--aurora-mid) / 0.30), transparent 70%), radial-gradient(2px 2px at 71% 33%, rgb(var(--white-text) / 0.9), transparent 100%), radial-gradient(1.5px 1.5px at 24% 58%, rgb(var(--white-text) / 0.7), transparent 100%); will-change: transform, opacity; animation: aurora-depth-breathe 80s ease-in-out infinite alternate; } html[data-theme="light"] .aurora::before { opacity: 0.5; } @keyframes aurora-depth-breathe { from { transform: translate3d(-1.5%, -1%, 0) scale(1); opacity: 0.9; } to { transform: translate3d(1.5%, 1.5%, 0) scale(1.06); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .aurora::before { animation: none; } } .aurora::after { /* Broad theme-hue depth wash between the ribbons and the base. No brand color: it reads the accent depth-mixes only (P-04.1 / P-05.3). */ content: ''; position: absolute; inset: -18%; background: linear-gradient(118deg, transparent 14%, rgb(var(--aurora-mid) / 0.55) 34%, rgb(var(--aurora-near) / 0.45) 50%, rgb(var(--aurora-mid) / 0.55) 64%, transparent 84%); background: linear-gradient(118deg in oklab, transparent 14%, rgb(var(--aurora-mid) / 0.55) 34%, rgb(var(--aurora-near) / 0.45) 50%, rgb(var(--aurora-mid) / 0.55) 64%, transparent 84%); will-change: transform; animation: aurora-surface-flow 55s ease-in-out infinite alternate; } .aurora__blob { --aurora-angle: -12deg; --aurora-peak: 1; --aurora-drift-x: 48vmax; --aurora-drift-y: 6vmax; position: absolute; width: 82vmax; height: 16vmax; border-radius: 50%; filter: blur(26px); opacity: 1; /* opacity floor (banding kill a): never thinned below ~0.8 */ will-change: transform, opacity; animation: aurora-ribbon-drift 46s ease-in-out infinite alternate; } html[data-theme="light"] .aurora__blob { --aurora-peak: 0.9; } .aurora__blob--a { --aurora-angle: -16deg; background: linear-gradient(90deg, transparent 0%, rgb(var(--aurora-near)) 22%, rgb(var(--aurora-near)) 46%, rgb(var(--aurora-mid)) 66%, transparent 92%); background: linear-gradient(90deg in oklab, transparent 0%, rgb(var(--aurora-near)) 22%, rgb(var(--aurora-near)) 46%, rgb(var(--aurora-mid)) 66%, transparent 92%); top: 3vmax; left: -25vmax; width: 88vmax; } .aurora__blob--b { --aurora-angle: -10deg; --aurora-drift-x: -42vmax; --aurora-drift-y: -5vmax; background: linear-gradient(90deg, transparent 0%, rgb(var(--aurora-mid)) 24%, rgb(var(--aurora-near)) 50%, rgb(var(--aurora-near)) 72%, transparent 94%); background: linear-gradient(90deg in oklab, transparent 0%, rgb(var(--aurora-mid)) 24%, rgb(var(--aurora-near)) 50%, rgb(var(--aurora-near)) 72%, transparent 94%); bottom: 2vmax; right: -28vmax; filter: blur(32px); animation-delay: -19s; animation-duration: 62s; } .aurora__blob--c { --aurora-angle: 13deg; --aurora-drift-x: 32vmax; --aurora-drift-y: 4vmax; /* P-04.1: accent depth-mix - no longer --color-success, so no ribbon resolves to a brand color unless BNDR Studio is the active theme. */ background: linear-gradient(90deg, transparent 0%, rgb(var(--aurora-mid)) 26%, rgb(var(--aurora-mid)) 62%, transparent 90%); background: linear-gradient(90deg in oklab, transparent 0%, rgb(var(--aurora-mid)) 26%, rgb(var(--aurora-mid)) 62%, transparent 90%); top: 48%; left: 34%; width: 58vmax; height: 11vmax; filter: blur(38px); animation-delay: -31s; animation-duration: 56s; } .aurora__blob--d { /* Far depth layer (P-05.4): the dimmest, softest, slowest current. */ --aurora-angle: -6deg; --aurora-drift-x: -26vmax; --aurora-drift-y: -4vmax; background: linear-gradient(90deg, transparent 0%, rgb(var(--aurora-far)) 28%, rgb(var(--aurora-far)) 60%, transparent 88%); background: linear-gradient(90deg in oklab, transparent 0%, rgb(var(--aurora-far)) 28%, rgb(var(--aurora-far)) 60%, transparent 88%); top: 30%; left: 6%; width: 64vmax; height: 13vmax; filter: blur(44px); animation-delay: -47s; animation-duration: 70s; } @keyframes aurora-surface-flow { from { transform: translate3d(-4%, -2%, 0) scale(1.05); } to { transform: translate3d(5%, 3%, 0) scale(1.12); } } @keyframes aurora-ribbon-drift { /* Displacement >= 60% of each ribbon's own width per half-cycle (P-05.2), plus slow scale/opacity breathing for depth. 46-70s cycles: slow enough never to pull the eye from text, alive enough to be undeniably moving. transform/opacity only - GPU-composited per P-26. */ from { transform: translate3d(0, 0, 0) rotate(var(--aurora-angle)) scale(1); opacity: var(--aurora-peak); } to { transform: translate3d(var(--aurora-drift-x), var(--aurora-drift-y), 0) rotate(calc(var(--aurora-angle) + 3deg)) scale(1.07); opacity: calc(var(--aurora-peak) * 0.82); } } /* P-05.1c: the dither veil. Fixed full-viewport inline-SVG feTurbulence noise at ~2.5% opacity, sitting directly above the background field and below all app content (z -1 over the aurora's -2). It composites once, is not a network asset, and never intercepts input. */ body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } html[data-theme="light"] body::after { opacity: 0.02; } /* ---------- Glass surfaces (P-06: fully transparent, motion retained) ---------- The fill is STRIPPED: card color = the P-05 background showing through, deepened by glass. Blur is the only legibility tool (radius raised via --glass-blur; no saturate, no grey/blue/washed layer, no haze anywhere). Retained in full: tilt transform, ::after pointer spotlight, hover glow, hover lift - and the ::before top-edge light + border, retuned so boundaries stay legible without reading grey (accent-tinted at low alpha, not white/grey). Occluding chrome (sidebar, mobile header, toast, dialogs, walkthrough card, crash-report panel) is NOT transparent: it keeps a void+tint / bone+tint surface per the census - see app.css. */ .glass { position: relative; background: transparent; border: 1px solid rgb(var(--color-accent) / 0.16); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); } .glass::before { /* top edge light - accent-tinted at low alpha, never grey */ content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: inherit; background: linear-gradient(90deg, transparent 4%, rgb(var(--color-accent) / 0.30) 50%, transparent 96%); pointer-events: none; } html[data-theme="light"] .glass { border-color: rgb(var(--color-accent) / 0.22); } /* Interactive glass card with pointer-tracked specular sheen. JS sets --mx / --my (percentages) on pointermove. */ .glass-card { --mx: 50%; --my: 50%; /* v14.3: pointer tilt vars (JS sets --rx/--ry, max +/-1.6deg) */ transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s ease; } .glass-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: /* v14.1: icy diamond glint tracks the pointer */ radial-gradient( 140px circle at var(--mx) var(--my), rgb(255 255 255 / 0.10), transparent 60% ), radial-gradient( 420px circle at var(--mx) var(--my), rgb(var(--color-accent) / 0.10), transparent 55% ); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .glass-card:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-3px); border-color: rgb(var(--color-accent) / 0.45); box-shadow: var(--glass-shadow), 0 0 0 1px rgb(var(--color-accent) / 0.22), 0 0 18px -4px rgb(var(--color-accent) / 0.35), 0 10px 44px -12px rgb(var(--color-accent) / 0.30); } .glass-card:hover::after { opacity: 1; } /* ---------- Corner specular utility (P-08) ---------- A shared, opt-in automotive highlight on .glass: sharp, narrow, hard-edged light bands curving off the corners (Lexus-commercial shine) - not shimmer, not glitter, not a gradient wash. transform/opacity only, GPU-composited, and it honors reduced motion below. Opt-in consumers (trial pill P-09, chat surface P-11, dialogs P-13, weather chip P-22) are wired by their owning steps; the utility lands here. */ .specular { position: relative; overflow: hidden; isolation: isolate; } .specular::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; background: conic-gradient(from 150deg at -1.5% -1.5%, transparent 0deg, rgb(var(--white-text) / 0.32) 5deg, rgb(var(--white-text) / 0.10) 8deg, transparent 14deg), conic-gradient(from 332deg at 101.5% 101.5%, transparent 0deg, rgb(var(--white-text) / 0.24) 5deg, rgb(var(--white-text) / 0.08) 8deg, transparent 13deg); -webkit-mask-image: linear-gradient(135deg, black 0 11%, transparent 20% 80%, black 89% 100%); mask-image: linear-gradient(135deg, black 0 11%, transparent 20% 80%, black 89% 100%); opacity: 0.55; } html[data-theme="light"] .specular::after { opacity: 0.8; } /* ---------- P3: the one glow utility ---------- */ .glow { box-shadow: 0 0 6px -1px rgb(var(--color-accent) / 0.7), 0 0 22px -4px rgb(var(--color-accent) / 0.35); } @media (prefers-reduced-motion: reduce) { .specular::after { opacity: 0.5; } /* static shine; no circuits (P-08) */ } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 700; border: none; border-radius: var(--radius-md); padding: 0.65rem 1.35rem; line-height: 1.25; text-decoration: none; transition: transform 0.2s var(--ease-out), box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease, opacity 0.2s ease; will-change: transform; } .btn:active { transform: scale(0.97); } .btn--primary { background: linear-gradient(140deg, rgb(var(--color-accent)) 0%, rgb(var(--color-accent-hover)) 100%); color: rgb(var(--color-on-accent)); box-shadow: 0 6px 24px -8px rgb(var(--color-accent) / 0.55); } .btn--primary:hover { box-shadow: 0 10px 32px -8px rgb(var(--color-accent) / 0.75); transform: translateY(-1px); } .btn--ghost { background: rgb(var(--glass-bg) / var(--glass-bg-alpha)); border: 1px solid rgb(var(--glass-bg) / var(--glass-border-alpha)); color: rgb(var(--color-text-primary)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .btn--ghost:hover { border-color: rgb(var(--color-accent) / 0.5); color: rgb(var(--color-accent)); } .btn--lg { padding: 0.9rem 1.9rem; font-size: 1.05rem; border-radius: var(--radius-lg); } /* ---------- Button variants (SECTION 0 routing, Step 4) ---------- Every button routes through .btn + a variant; ad-hoc button styling in page code is a defect. --accent = the long-standing bg-accent/text-primary pattern; --tile = quick-add action tiles; --icon = toolbar glyph chips carrying the sidebar glow treatment (no grey chip). */ .btn--accent { background: rgb(var(--color-accent)); color: rgb(var(--color-primary)); --icon-detail: var(--color-on-accent); /* P-21 */ } .btn--accent:hover { background: rgb(var(--color-accent-hover)); } .btn--tile { flex-direction: column; gap: 0.4rem; text-align: center; background: rgb(var(--color-accent) / 0.06); /* P2: S2 glass, grey fill banned */ border: 1px solid rgb(var(--color-accent) / 0.30); padding: 0.9rem 0.5rem; border-radius: 0.8rem; min-height: 72px; transition: all 0.2s var(--ease-out); border-radius: var(--radius-lg); } .btn--tile:hover { background: rgb(var(--color-accent)); color: rgb(var(--color-on-accent)); --icon-detail: var(--color-on-accent); /* P-21 */ transform: translateY(-2px); box-shadow: 0 8px 22px -8px rgb(var(--color-accent) / 0.6); } .btn--tile svg { width: 1.35rem; height: 1.35rem; } .btn--icon { padding: 0.625rem; border-radius: var(--radius-md); color: rgb(var(--color-text-primary)); background: transparent; } .btn--icon svg { filter: drop-shadow(0 0 4px rgb(var(--color-accent) / 0.65)) drop-shadow(0 0 11px rgb(var(--color-accent) / 0.35)); transition: filter 0.2s ease; } .btn--icon:hover { color: rgb(var(--color-accent)); background: rgb(var(--color-accent) / 0.10); } .btn--icon:hover svg { filter: drop-shadow(0 0 6px rgb(var(--color-accent) / 0.95)) drop-shadow(0 0 16px rgb(var(--color-accent) / 0.6)); } html[data-theme="light"] .btn--icon svg { filter: drop-shadow(0 0 3px rgb(var(--color-accent) / 0.4)); } html[data-theme="light"] .btn--icon:hover svg { filter: drop-shadow(0 0 5px rgb(var(--color-accent) / 0.8)) drop-shadow(0 0 12px rgb(var(--color-accent) / 0.45)); } /* ---------- Shared listbox primitive (P-10) ---------- The single dropdown surface for the whole app: styled trigger + a popup that stays inside the viewport (JS flip/shift sets --up, max-height and left offset), full keyboard navigation, ARIA listbox semantics. Surface matches the P-13 dialog language: void+tint / bone+tint occluder. */ .listbox { position: relative; display: inline-block; min-width: 0; max-width: 100%; } /* Form-field variant: native-