/* GENERATED by scripts/build_grid_theme.py — do not edit by hand. Grid (TRON) style: opt-in via html[data-style="grid"]. */ html[data-style="grid"]:not([data-theme="light"]) { --bg:#0f2122; --bg-rgb:15 33 34; --bg-elev-1:#14282d; --bg-1:20 40 45; --bg-elev-2:#1b363e; --bg-2:27 54 62; --bg-elev-3:#23474d; --bg-3:35 71 77; --border:#267c61; --border-rgb:38 124 97; --border-soft:#1d5448; --text:#c9d6de; --text-muted:#9db0bd; --text-faint:#96aab8; --accent-preset:#3ff0a8; --accent-l:0.8506; --accent-c:0.1736; --hue-base:160.9; --hue:var(--hue-base); --accent:oklch(var(--accent-l) var(--accent-c) var(--hue)); --accent-line:color-mix(in oklab, var(--accent), var(--bg) calc((1 - var(--glow)) * 100%)); --accent-rgb:63 240 168; --accent-hot:#6ff4be; --accent-soft:rgba(63,240,168,0.16); --accent-soft-rgb:63 240 168; --accent-fg:#07121a; --success:#6fd3a0; --warning:#efc35a; --danger:#ff6682; --glass-bg:rgba(20,40,45,.9); --glass-blur:0px; --grid-you:#1f5c4d; --grid-you-fg:#c9d6de; --grid-brad:#1f4949; --grid-frame:#14282d } html[data-style="grid"][data-theme="light"] { --bg:#d4e3e4; --bg-rgb:212 227 228; --bg-elev-1:#ffffff; --bg-1:255 255 255; --bg-elev-2:#e8f1f1; --bg-2:232 241 241; --bg-elev-3:#c3d8d9; --bg-3:195 216 217; --border:#8ebcae; --border-rgb:142 188 174; --border-soft:#c0dad2; --text:#0b1720; --text-muted:#3e5463; --text-faint:#4b6170; --accent-preset:#03694b; --accent-l:0.4619; --accent-c:0.0960; --hue-base:165.1; --hue:var(--hue-base); --accent:oklch(var(--accent-l) var(--accent-c) var(--hue)); --accent-line:color-mix(in oklab, var(--accent), var(--bg) calc((1 - var(--glow)) * 100%)); --accent-rgb:3 105 75; --accent-hot:#035940; --accent-soft:rgba(3,105,75,0.12); --accent-soft-rgb:3 105 75; --accent-fg:#ffffff; --success:#0a7a4a; --warning:#7a5000; --danger:#b0103a; --glass-bg:rgba(255,255,255,.9); --glass-blur:0px; --grid-you:#03694b; --grid-you-fg:#ffffff; --grid-brad:#d1e3e0; --grid-frame:#ffffff } html[data-style="grid"][data-palette="cyan"]:not([data-theme="light"]) { --bg:#0f1f28; --bg-rgb:15 31 40; --bg-elev-1:#142732; --bg-1:20 39 50; --bg-elev-2:#1b3545; --bg-2:27 53 69; --bg-elev-3:#244558; --bg-3:36 69 88; --border:#297388; --border-rgb:41 115 136; --border-soft:#1f4f5f; --text:#c9d6de; --text-muted:#9db0bd; --text-faint:#96aab8; --accent-preset:#45dcff; --accent-l:0.8306; --accent-c:0.1317; --hue-base:217.0; --hue:var(--hue-base); --accent:oklch(var(--accent-l) var(--accent-c) var(--hue)); --accent-line:color-mix(in oklab, var(--accent), var(--bg) calc((1 - var(--glow)) * 100%)); --accent-rgb:69 220 255; --accent-hot:#74e5ff; --accent-soft:rgba(69,220,255,0.16); --accent-soft-rgb:69 220 255; --accent-fg:#07121a; --success:#6fd3a0; --warning:#efc35a; --danger:#ff6682; --glass-bg:rgba(20,39,50,.9); --glass-blur:0px; --grid-you:#215667; --grid-you-fg:#c9d6de; --grid-brad:#1f4658; --grid-frame:#142732 } html[data-style="grid"][data-palette="cyan"][data-theme="light"] { --bg:#d5e3ea; --bg-rgb:213 227 234; --bg-elev-1:#ffffff; --bg-1:255 255 255; --bg-elev-2:#e8f1f5; --bg-2:232 241 245; --bg-elev-3:#c3d8e1; --bg-3:195 216 225; --border:#8fbdce; --border-rgb:143 189 206; --border-soft:#c1dae4; --text:#0b1720; --text-muted:#3e5463; --text-faint:#4b6170; --accent-preset:#066c92; --accent-l:0.4993; --accent-c:0.1002; --hue-base:232.0; --hue:var(--hue-base); --accent:oklch(var(--accent-l) var(--accent-c) var(--hue)); --accent-line:color-mix(in oklab, var(--accent), var(--bg) calc((1 - var(--glow)) * 100%)); --accent-rgb:6 108 146; --accent-hot:#055c7c; --accent-soft:rgba(6,108,146,0.12); --accent-soft-rgb:6 108 146; --accent-fg:#ffffff; --success:#0a7a4a; --warning:#7a5000; --danger:#b0103a; --glass-bg:rgba(255,255,255,.9); --glass-blur:0px; --grid-you:#066c92; --grid-you-fg:#ffffff; --grid-brad:#d1e4eb; --grid-frame:#ffffff } html[data-style="grid"][data-palette="verdigris"]:not([data-theme="light"]) { --bg:#101e23; --bg-rgb:16 30 35; --bg-elev-1:#15262d; --bg-1:21 38 45; --bg-elev-2:#1c333e; --bg-2:28 51 62; --bg-elev-3:#25434e; --bg-3:37 67 78; --border:#2d6d64; --border-rgb:45 109 100; --border-soft:#224b4a; --text:#c9d6de; --text-muted:#9db0bd; --text-faint:#96aab8; --accent-preset:#4fd0b0; --accent-l:0.7777; --accent-c:0.1227; --hue-base:173.6; --hue:var(--hue-base); --accent:oklch(var(--accent-l) var(--accent-c) var(--hue)); --accent-line:color-mix(in oklab, var(--accent), var(--bg) calc((1 - var(--glow)) * 100%)); --accent-rgb:79 208 176; --accent-hot:#7bdcc4; --accent-soft:rgba(79,208,176,0.16); --accent-soft-rgb:79 208 176; --accent-fg:#07121a; --success:#6fd3a0; --warning:#efc35a; --danger:#ff6682; --glass-bg:rgba(21,38,45,.9); --glass-blur:0px; --grid-you:#24524f; --grid-you-fg:#c9d6de; --grid-brad:#214349; --grid-frame:#15262d } html[data-style="grid"][data-palette="verdigris"][data-theme="light"] { --bg:#d5e4e6; --bg-rgb:213 228 230; --bg-elev-1:#ffffff; --bg-1:255 255 255; --bg-elev-2:#e9f1f2; --bg-2:233 241 242; --bg-elev-3:#c4d9db; --bg-3:196 217 219; --border:#93c1b7; --border-rgb:147 193 183; --border-soft:#c3dcd7; --text:#0b1720; --text-muted:#3e5463; --text-faint:#4b6170; --accent-preset:#0f7560; --accent-l:0.5035; --accent-c:0.0921; --hue-base:173.8; --hue:var(--hue-base); --accent:oklch(var(--accent-l) var(--accent-c) var(--hue)); --accent-line:color-mix(in oklab, var(--accent), var(--bg) calc((1 - var(--glow)) * 100%)); --accent-rgb:15 117 96; --accent-hot:#0d6352; --accent-soft:rgba(15,117,96,0.12); --accent-soft-rgb:15 117 96; --accent-fg:#ffffff; --success:#0a7a4a; --warning:#7a5000; --danger:#b0103a; --glass-bg:rgba(255,255,255,.9); --glass-blur:0px; --grid-you:#0f7560; --grid-you-fg:#ffffff; --grid-brad:#d3e5e3; --grid-frame:#ffffff } html[data-style="grid"][data-palette="silver"]:not([data-theme="light"]) { --bg:#171f27; --bg-rgb:23 31 39; --bg-elev-1:#1b2631; --bg-1:27 38 49; --bg-elev-2:#253443; --bg-2:37 52 67; --bg-elev-3:#314455; --bg-3:49 68 85; --border:#5d717f; --border-rgb:93 113 127; --border-soft:#3e4d5a; --text:#c9d6de; --text-muted:#9db0bd; --text-faint:#96aab8; --accent-preset:#b8d8ea; --accent-l:0.8647; --accent-c:0.0422; --hue-base:232.6; --hue:var(--hue-base); --accent:oklch(var(--accent-l) var(--accent-c) var(--hue)); --accent-line:color-mix(in oklab, var(--accent), var(--bg) calc((1 - var(--glow)) * 100%)); --accent-rgb:184 216 234; --accent-hot:#cae2ef; --accent-soft:rgba(184,216,234,0.16); --accent-soft-rgb:184 216 234; --accent-fg:#07121a; --success:#6fd3a0; --warning:#efc35a; --danger:#ff6682; --glass-bg:rgba(27,38,49,.9); --glass-blur:0px; --grid-you:#445461; --grid-you-fg:#c9d6de; --grid-brad:#344454; --grid-frame:#1b2631 } html[data-style="grid"][data-palette="silver"][data-theme="light"] { --bg:#dae3ea; --bg-rgb:218 227 234; --bg-elev-1:#ffffff; --bg-1:255 255 255; --bg-elev-2:#ebf1f4; --bg-2:235 241 244; --bg-elev-3:#cad9e0; --bg-3:202 217 224; --border:#a9beca; --border-rgb:169 190 202; --border-soft:#cfdbe2; --text:#0b1720; --text-muted:#3e5463; --text-faint:#4b6170; --accent-preset:#3f6f8a; --accent-l:0.5190; --accent-c:0.0675; --hue-base:234.8; --hue:var(--hue-base); --accent:oklch(var(--accent-l) var(--accent-c) var(--hue)); --accent-line:color-mix(in oklab, var(--accent), var(--bg) calc((1 - var(--glow)) * 100%)); --accent-rgb:63 111 138; --accent-hot:#365e75; --accent-soft:rgba(63,111,138,0.12); --accent-soft-rgb:63 111 138; --accent-fg:#ffffff; --success:#0a7a4a; --warning:#7a5000; --danger:#b0103a; --glass-bg:rgba(255,255,255,.9); --glass-blur:0px; --grid-you:#3f6f8a; --grid-you-fg:#ffffff; --grid-brad:#dae4e9; --grid-frame:#ffffff } html[data-style="grid"][data-palette="platinum"]:not([data-theme="light"]) { --bg:#151c25; --bg-rgb:21 28 37; --bg-elev-1:#1a2430; --bg-1:26 36 48; --bg-elev-2:#233141; --bg-2:35 49 65; --bg-elev-3:#2e3f53; --bg-3:46 63 83; --border:#525f75; --border-rgb:82 95 117; --border-soft:#374354; --text:#c9d6de; --text-muted:#9db0bd; --text-faint:#96aab8; --accent-preset:#a0b0d4; --accent-l:0.7571; --accent-c:0.0549; --hue-base:266.2; --hue:var(--hue-base); --accent:oklch(var(--accent-l) var(--accent-c) var(--hue)); --accent-line:color-mix(in oklab, var(--accent), var(--bg) calc((1 - var(--glow)) * 100%)); --accent-rgb:160 176 212; --accent-hot:#b8c4df; --accent-soft:rgba(160,176,212,0.16); --accent-soft-rgb:160 176 212; --accent-fg:#07121a; --success:#6fd3a0; --warning:#efc35a; --danger:#ff6682; --glass-bg:rgba(26,36,48,.9); --glass-blur:0px; --grid-you:#3d485b; --grid-you-fg:#c9d6de; --grid-brad:#303e50; --grid-frame:#1a2430 } html[data-style="grid"][data-palette="platinum"][data-theme="light"] { --bg:#dbe2ea; --bg-rgb:219 226 234; --bg-elev-1:#ffffff; --bg-1:255 255 255; --bg-elev-2:#ebf0f4; --bg-2:235 240 244; --bg-elev-3:#cbd6e0; --bg-3:203 214 224; --border:#aeb5ca; --border-rgb:174 181 202; --border-soft:#d2d6e2; --text:#0b1720; --text-muted:#3e5463; --text-faint:#4b6170; --accent-preset:#4a5a8a; --accent-l:0.4759; --accent-c:0.0804; --hue-base:269.2; --hue:var(--hue-base); --accent:oklch(var(--accent-l) var(--accent-c) var(--hue)); --accent-line:color-mix(in oklab, var(--accent), var(--bg) calc((1 - var(--glow)) * 100%)); --accent-rgb:74 90 138; --accent-hot:#3f4c75; --accent-soft:rgba(74,90,138,0.12); --accent-soft-rgb:74 90 138; --accent-fg:#ffffff; --success:#0a7a4a; --warning:#7a5000; --danger:#b0103a; --glass-bg:rgba(255,255,255,.9); --glass-blur:0px; --grid-you:#4a5a8a; --grid-you-fg:#ffffff; --grid-brad:#dbe1e9; --grid-frame:#ffffff } html[data-style="grid"][data-palette="rhodium"]:not([data-theme="light"]) { --bg:#181b26; --bg-rgb:24 27 38; --bg-elev-1:#1c2330; --bg-1:28 35 48; --bg-elev-2:#263043; --bg-2:38 48 67; --bg-elev-3:#333e54; --bg-3:51 62 84; --border:#625a7a; --border-rgb:98 90 122; --border-soft:#414057; --text:#c9d6de; --text-muted:#9db0bd; --text-faint:#96aab8; --accent-preset:#c2a6e0; --accent-l:0.7695; --accent-c:0.0865; --hue-base:306.4; --hue:var(--hue-base); --accent:oklch(var(--accent-l) var(--accent-c) var(--hue)); --accent-line:color-mix(in oklab, var(--accent), var(--bg) calc((1 - var(--glow)) * 100%)); --accent-rgb:194 166 224; --accent-hot:#d1bce8; --accent-soft:rgba(194,166,224,0.16); --accent-soft-rgb:194 166 224; --accent-fg:#07121a; --success:#6fd3a0; --warning:#efc35a; --danger:#ff6682; --glass-bg:rgba(28,35,48,.9); --glass-blur:0px; --grid-you:#47455e; --grid-you-fg:#c9d6de; --grid-brad:#363c53; --grid-frame:#1c2330 } html[data-style="grid"][data-palette="rhodium"][data-theme="light"] { --bg:#dee0ec; --bg-rgb:222 224 236; --bg-elev-1:#ffffff; --bg-1:255 255 255; --bg-elev-2:#edeff6; --bg-2:237 239 246; --bg-elev-3:#d0d4e3; --bg-3:208 212 227; --border:#c0acd4; --border-rgb:192 172 212; --border-soft:#dcd1e7; --text:#0b1720; --text-muted:#3e5463; --text-faint:#4b6170; --accent-preset:#7247a0; --accent-l:0.4890; --accent-c:0.1414; --hue-base:303.9; --hue:var(--hue-base); --accent:oklch(var(--accent-l) var(--accent-c) var(--hue)); --accent-line:color-mix(in oklab, var(--accent), var(--bg) calc((1 - var(--glow)) * 100%)); --accent-rgb:114 71 160; --accent-hot:#613c88; --accent-soft:rgba(114,71,160,0.12); --accent-soft-rgb:114 71 160; --accent-fg:#ffffff; --success:#0a7a4a; --warning:#7a5000; --danger:#b0103a; --glass-bg:rgba(255,255,255,.9); --glass-blur:0px; --grid-you:#7247a0; --grid-you-fg:#ffffff; --grid-brad:#e1deed; --grid-frame:#ffffff } html[data-style="grid"][data-palette="rose-gold"]:not([data-theme="light"]) { --bg:#1b1b22; --bg-rgb:27 27 34; --bg-elev-1:#1f232c; --bg-1:31 35 44; --bg-elev-2:#2b303d; --bg-2:43 48 61; --bg-elev-3:#393e4c; --bg-3:57 62 76; --border:#785a5d; --border-rgb:120 90 93; --border-soft:#4e4046; --text:#c9d6de; --text-muted:#9db0bd; --text-faint:#96aab8; --accent-preset:#f4a5a0; --accent-l:0.7976; --accent-c:0.0946; --hue-base:23.4; --hue:var(--hue-base); --accent:oklch(var(--accent-l) var(--accent-c) var(--hue)); --accent-line:color-mix(in oklab, var(--accent), var(--bg) calc((1 - var(--glow)) * 100%)); --accent-rgb:244 165 160; --accent-hot:#f7bcb8; --accent-soft:rgba(244,165,160,0.16); --accent-soft-rgb:244 165 160; --accent-fg:#07121a; --success:#6fd3a0; --warning:#efc35a; --danger:#ff6682; --glass-bg:rgba(31,35,44,.9); --glass-blur:0px; --grid-you:#56454a; --grid-you-fg:#c9d6de; --grid-brad:#3f3c47; --grid-frame:#1f232c } html[data-style="grid"][data-palette="rose-gold"][data-theme="light"] { --bg:#e4dfe4; --bg-rgb:228 223 228; --bg-elev-1:#ffffff; --bg-1:255 255 255; --bg-elev-2:#f1eff1; --bg-2:241 239 241; --bg-elev-3:#d8d3d9; --bg-3:216 211 217; --border:#dda9b0; --border-rgb:221 169 176; --border-soft:#eccfd3; --text:#0b1720; --text-muted:#3e5463; --text-faint:#4b6170; --accent-preset:#b4404f; --accent-l:0.4905; --accent-c:0.1502; --hue-base:16.2; --hue:var(--hue-base); --accent:oklch(var(--accent-l) var(--accent-c) var(--hue)); --accent-line:color-mix(in oklab, var(--accent), var(--bg) calc((1 - var(--glow)) * 100%)); --accent-rgb:180 64 79; --accent-hot:#993643; --accent-soft:rgba(180,64,79,0.12); --accent-soft-rgb:180 64 79; --accent-fg:#ffffff; --success:#0a7a4a; --warning:#7a5000; --danger:#b0103a; --glass-bg:rgba(255,255,255,.9); --glass-blur:0px; --grid-you:#b4404f; --grid-you-fg:#ffffff; --grid-brad:#ebdee1; --grid-frame:#ffffff } html[data-style="grid"][data-palette="copper"]:not([data-theme="light"]) { --bg:#1a1a1c; --bg-rgb:26 26 28; --bg-elev-1:#1e2228; --bg-1:30 34 40; --bg-elev-2:#2a2e36; --bg-2:42 46 54; --bg-elev-3:#373c44; --bg-3:55 60 68; --border:#73513c; --border-rgb:115 81 60; --border-soft:#4a3b32; --text:#c9d6de; --text-muted:#9db0bd; --text-faint:#96aab8; --accent-preset:#e89257; --accent-l:0.7369; --accent-c:0.1282; --hue-base:53.8; --hue:var(--hue-base); --accent:oklch(var(--accent-l) var(--accent-c) var(--hue)); --accent-line:color-mix(in oklab, var(--accent), var(--bg) calc((1 - var(--glow)) * 100%)); --accent-rgb:232 146 87; --accent-hot:#eead81; --accent-soft:rgba(232,146,87,0.16); --accent-soft-rgb:232 146 87; --accent-fg:#07121a; --success:#6fd3a0; --warning:#efc35a; --danger:#ff6682; --glass-bg:rgba(30,34,40,.9); --glass-blur:0px; --grid-you:#533f34; --grid-you-fg:#c9d6de; --grid-brad:#3d3839; --grid-frame:#1e2228 } html[data-style="grid"][data-palette="copper"][data-theme="light"] { --bg:#e3e1df; --bg-rgb:227 225 223; --bg-elev-1:#ffffff; --bg-1:255 255 255; --bg-elev-2:#f0f0ef; --bg-2:240 240 239; --bg-elev-3:#d6d5d2; --bg-3:214 213 210; --border:#d5b096; --border-rgb:213 176 150; --border-soft:#e8d3c5; --text:#0b1720; --text-muted:#3e5463; --text-faint:#4b6170; --accent-preset:#a24f16; --accent-l:0.5015; --accent-c:0.1278; --hue-base:49.6; --hue:var(--hue-base); --accent:oklch(var(--accent-l) var(--accent-c) var(--hue)); --accent-line:color-mix(in oklab, var(--accent), var(--bg) calc((1 - var(--glow)) * 100%)); --accent-rgb:162 79 22; --accent-hot:#8a4313; --accent-soft:rgba(162,79,22,0.12); --accent-soft-rgb:162 79 22; --accent-fg:#ffffff; --success:#0a7a4a; --warning:#7a5000; --danger:#b0103a; --glass-bg:rgba(255,255,255,.9); --glass-blur:0px; --grid-you:#a24f16; --grid-you-fg:#ffffff; --grid-brad:#e8e0d9; --grid-frame:#ffffff } html[data-style="grid"][data-palette="gold"]:not([data-theme="light"]) { --bg:#1a1e1d; --bg-rgb:26 30 29; --bg-elev-1:#1e2528; --bg-1:30 37 40; --bg-elev-2:#2a3337; --bg-2:42 51 55; --bg-elev-3:#374244; --bg-3:55 66 68; --border:#72693d; --border-rgb:114 105 61; --border-soft:#4a4933; --text:#c9d6de; --text-muted:#9db0bd; --text-faint:#96aab8; --accent-preset:#e5c85b; --accent-l:0.8367; --accent-c:0.1319; --hue-base:94.5; --hue:var(--hue-base); --accent:oklch(var(--accent-l) var(--accent-c) var(--hue)); --accent-line:color-mix(in oklab, var(--accent), var(--bg) calc((1 - var(--glow)) * 100%)); --accent-rgb:229 200 91; --accent-hot:#ecd684; --accent-soft:rgba(229,200,91,0.16); --accent-soft-rgb:229 200 91; --accent-fg:#07121a; --success:#6fd3a0; --warning:#efc35a; --danger:#ff6682; --glass-bg:rgba(30,37,40,.9); --glass-blur:0px; --grid-you:#524f35; --grid-you-fg:#c9d6de; --grid-brad:#3d423b; --grid-frame:#1e2528 } html[data-style="grid"][data-palette="gold"][data-theme="light"] { --bg:#dfe2dd; --bg-rgb:223 226 221; --bg-elev-1:#ffffff; --bg-1:255 255 255; --bg-elev-2:#eef1ee; --bg-2:238 241 238; --bg-elev-3:#d2d7d0; --bg-3:210 215 208; --border:#c5b98c; --border-rgb:197 185 140; --border-soft:#dfd8bf; --text:#0b1720; --text-muted:#3e5463; --text-faint:#4b6170; --accent-preset:#7f6300; --accent-l:0.5120; --accent-c:0.1049; --hue-base:89.2; --hue:var(--hue-base); --accent:oklch(var(--accent-l) var(--accent-c) var(--hue)); --accent-line:color-mix(in oklab, var(--accent), var(--bg) calc((1 - var(--glow)) * 100%)); --accent-rgb:127 99 0; --accent-hot:#6c5400; --accent-soft:rgba(127,99,0,0.12); --accent-soft-rgb:127 99 0; --accent-fg:#ffffff; --success:#0a7a4a; --warning:#7a5000; --danger:#b0103a; --glass-bg:rgba(255,255,255,.9); --glass-blur:0px; --grid-you:#7f6300; --grid-you-fg:#ffffff; --grid-brad:#e3e3d6; --grid-frame:#ffffff } /* ---- Grid structure (source for scripts/build_grid_theme.py) ---- Glow is a static box-shadow, painted once and never animated, so it costs nothing to scroll on iPhone Safari. No backdrop-filter anywhere. */ /* Two live dials, both set by the picker and both applied before first paint: --grid-alpha how see-through a card is (0.40 .. 1.00) --glow how bright the DECORATIVE lines are (0.35 .. 1.00) text and links never dim — they have no contrast headroom --glow pulls --accent toward the page background in oklab (see build_grid_theme.py), so it dims every line, edge and glow while holding the hue. Lance asked for it to tune halation on his own eyes in real time: "keep the color.. then adjust the.. whatever you would call that". 1 = exactly the colour the palette always was, so nothing changes for anyone who never touches the slider. */ /* --grid-alpha: 1 = OPAQUE cards, changed from .6 on 2026-09-20. The Grid style paints a 28px lattice on and, at night, a fixed 55vh perspective floor (body::before). At .6 both showed THROUGH every card, so any page whose content did not reach the horizon had the floor crossing its cards and the lattice reading as if it "started halfway down the page". Home looked right only because its content sat above the horizon. The ambience belongs in the gutters, not through the text. The see-through slider still reaches .4 for anyone who wants it back. */ html[data-style="grid"] { --grid-alpha:1; --glow:1; --gridline:color-mix(in srgb, var(--accent-line) 8%, transparent); } html[data-style="grid"][data-theme="light"] { --gridline:color-mix(in srgb, var(--accent-line) 11%, transparent); } /* The grid lives on ; goes transparent so the floor can sit between them. A body background would paint over a z-index:-1 floor. */ html[data-style="grid"] { background-color:var(--bg) !important; background-image:linear-gradient(var(--gridline) 1px, transparent 1px), linear-gradient(90deg, var(--gridline) 1px, transparent 1px) !important; background-size:28px 28px !important; background-attachment:fixed !important; } html[data-style="grid"] body { background:transparent !important; color:var(--text); } /* Night only: a perspective floor fading to a horizon. */ html[data-style="grid"]:not([data-theme="light"]) body::before { content:""; position:fixed; z-index:-1; left:-60%; right:-60%; bottom:0; height:55vh; pointer-events:none; background-image:linear-gradient(color-mix(in srgb, var(--accent-line) 30%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent-line) 30%, transparent) 1px, transparent 1px); background-size:44px 44px; transform:perspective(240px) rotateX(64deg); transform-origin:50% 100%; -webkit-mask-image:linear-gradient(to top, #000, rgba(0,0,0,.6) 45%, transparent 90%); mask-image:linear-gradient(to top, #000, rgba(0,0,0,.6) 45%, transparent 90%); } /* Bars: fully solid, lit edge. */ html[data-style="grid"] body > nav, html[data-style="grid"] body > header { background:var(--bg-elev-1) !important; border-bottom:1px solid var(--accent-line) !important; box-shadow:0 0 18px -9px var(--accent-line); } html[data-style="grid"] body > footer { background:var(--bg-elev-1) !important; border-top:1px solid color-mix(in srgb, var(--accent-line) 40%, transparent) !important; } html[data-style="grid"] #mobile-more-menu, html[data-style="grid"] [id^="dropdown-"] { background:var(--bg-elev-1) !important; border-color:var(--accent) !important; } /* Panels: see-through fill, lit edge, nothing else. No HUD corner brackets (removed 2026-09-18, Lance: the reinforced-corner look reads as a bandaged folder). The lit edge alone carries the style — one unbroken line, same on every surface, so a collapsed Home panel and an expanded household card cannot drift apart. Any bracket, wedge or cut corner added back here has to be added to EVERY surface class below or the pages disagree again. */ html[data-style="grid"] :is(.brad-glass-card, .brad-card, .brad-panel, .brad-panel-cut, .brad-cell, .brad-surface, .brad-glass, .card) { background-color:rgb(var(--bg-1) / var(--grid-alpha)) !important; background-image:none !important; border:1px solid color-mix(in srgb, var(--accent-line) 42%, transparent) !important; border-radius:4px !important; clip-path:none !important; box-shadow:0 0 18px -9px var(--accent-line) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } /* The Classic accent wedge on .brad-panel-cut is a cut corner by another name — kill it in Grid too. */ html[data-style="grid"] .brad-panel-cut::before { display:none !important; } html[data-style="grid"][data-theme="light"] :is(.brad-glass-card, .brad-card, .brad-panel, .brad-panel-cut, .brad-cell, .brad-surface, .brad-glass, .card) { box-shadow:0 6px 16px -12px rgba(11,23,32,.35) !important; } /* `.card` is the sign-in / sign-up pages' own surface class. Those pages are standalone (they do not extend base.html) and were written before the .brad-* system existed, so they loaded grid.css and then ignored it — Lance, 2026-09-18: "our login pages and sign-in could get a slightly updated Tron theme too". One other template uses a bare `.card` — templates/public/fund.html — and it is unaffected: it never loads _theme_bootstrap.html or grid.css, so html[data-style="grid"] is never set on it and none of these rules match. Checked by grep, not assumed: a first draft of this comment claimed nothing else used the class, and that was wrong. If a public page ever starts loading the theme, re-check this. */ html[data-style="grid"] :is(.brad-glass-soft, .brad-pill) { background-color:rgb(var(--bg-2) / .75) !important; border-color:color-mix(in srgb, var(--accent-line) 30%, transparent) !important; border-radius:4px !important; } /* ---- Surfaces the .brad-* class list cannot reach (2026-09-18) ---- Measured before writing this, over templates/, counting class occurrences: 212 carried a .brad-* surface class and followed the see-through setting; 770 were plain Tailwind `bg-[rgb(var(--bg-N))]` and stayed solid. That is what Lance saw — "not all of our cards or content panels become or follow the opaqueness rules". (770 counts every use, including the bars the :not() chain below deliberately leaves solid.) Fixing it at 770 call sites would guarantee the next new panel is solid again, so the rule reaches the TOKEN instead: any element painted with a raw surface colour becomes see-through at the same --grid-alpha as a card. Add a surface anywhere, in any template, and it now matches by default. The exclusions are the surfaces ADR 0039 requires to stay FULLY SOLID, because page content scrolls underneath them and translucency would let two layers of text overlap: - the top bar, page header and pinned footer - the burger sheet and any dropdown panel - chat bubbles (their own palette colours, set further down) - anything sticky/fixed, which is a bar by another name Tailwind's own alpha variants (`/95`, `/0.3`) are left alone — those are already a deliberate opacity and are not matched by these selectors. */ html[data-style="grid"] :is( .bg-\[rgb\(var\(--bg-1\)\)\], .bg-\[rgb\(var\(--bg-2\)\)\], .bg-\[rgb\(var\(--bg-3\)\)\] ):not(nav):not(header):not(footer):not(.sticky):not(.fixed):not(.brad-chat-bubble):not(#mobile-more-menu):not([id^="dropdown-"]):not(nav *):not(header *):not(footer *) { background-color:rgb(var(--bg-1) / var(--grid-alpha)) !important; } /* Chat: solid bubbles in the palette over the see-through panel. */ html[data-style="grid"] .brad-chat-bubble[data-role="user"] { background:var(--grid-you) !important; border-color:var(--accent) !important; color:var(--grid-you-fg) !important; } html[data-style="grid"] .brad-chat-bubble[data-role="user"] * { color:inherit !important; } html[data-style="grid"] .brad-chat-bubble[data-role="assistant"] { background:var(--grid-brad) !important; box-shadow:inset 2px 0 0 var(--accent); border-color:color-mix(in srgb, var(--accent-line) 42%, transparent) !important; } /* Picker: swatches are light-lines on black. The .grid-only visibility rules that lived here went with the Classic style on 2026-09-18 — everything is Grid now, so "only in Grid" is every case. */ html[data-style="grid"] #brad-theme-pop .swatch { position:relative; background:#05080b !important; border:1px solid #1d2a33 !important; border-radius:4px !important; } html[data-style="grid"] #brad-theme-pop .swatch::after { content:""; position:absolute; left:22%; right:22%; top:50%; height:3px; margin-top:-1.5px; border-radius:2px; background:var(--dot); box-shadow:0 0 8px 1px var(--dot); } html[data-style="grid"] #brad-theme-pop .swatch.active { border-color:var(--dot) !important; box-shadow:0 0 12px -3px var(--dot) !important; } /* Custom keeps its rainbow. Every other swatch is a light-line on black, which is right for a single named colour and useless for the one whose job is to say "any colour you like". Listed after the light-line rules so it wins. */ html[data-style="grid"] #brad-theme-pop .swatch.swatch-custom { background:linear-gradient(90deg,#ff5f6d,#ffc371,#47e08a,#45dcff,#a78bfa,#ff5f6d) !important; } html[data-style="grid"] #brad-theme-pop .swatch.swatch-custom::after { display:none !important; } /* Picker controls (both styles). */ #brad-theme-pop .brad-style-row { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-bottom:8px; } #brad-theme-pop .brad-style-row button { min-height:40px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--text-muted); font-size:13px; cursor:pointer; } #brad-theme-pop .brad-style-row button[aria-pressed="true"] { border-color:var(--accent); color:var(--text); background:var(--accent-soft); font-weight:600; } #brad-theme-pop .brad-alpha-row { align-items:center; gap:8px; margin-top:8px; font-size:12.5px; color:var(--text-muted); } #brad-theme-pop .brad-alpha-row input { flex:1; min-width:0; min-height:40px; accent-color:var(--accent); } #brad-theme-pop .brad-alpha-row span { min-width:3ch; text-align:right; font-family:"JetBrains Mono", monospace; }