/** * regen-shared.css — the one stylesheet all five /regen/ pages load. * * Before this file: index.html, forum.html, explorer.html, commons.html and * burn.html each inlined a full `:root` color system from scratch, built at * different times this session. All five landed close (a dark green-black * ground, a growth-green accent, an amber "ember" highlight) but not equal, * used a generic system-font stack instead of the site's own type, ran two * different nav shapes (`nav.bar` on forum/explorer, `header.hero` + a * cross-link eyebrow on the rest), and defaulted to dark-follows-OS instead * of vealth.net's actual law: light is the default for everyone, dark is an * explicit opt-in (vealth-theme.js), never OS-detected. * * This file does NOT load vealth-next.css wholesale — these pages already * carry hundreds of lines of page-local component CSS (governance tallies, * forum threads, the commons ledger strip) built around var(--x) tokens, and * vealth-next.css's own .card/.btn/.wrap/.foot classes mean something * different here. Loading both would fight the cascade for no gain. Instead * this defines the SAME token contract those pages already reference * (--bg, --panel, --ink, --growth, --ember, --clay, --tide, ...) with values * drawn straight from vealth-next.css's real gold/green/black system * (operator law, 2026-08-07: "the colors are too bright they need to match * the logo gold green black"), so every existing component re-skins for * free with zero markup changes. It also carries the ONE nav these five * pages now share, styled like the site's own quiet-nav (warm glass, a * spectrum bottom edge) but scoped to this cluster's own five doors plus one * way back to vealth.net, never the primary product nav. * * Each page still sets body{font:...} and .btn{color:#08130d} as literal * declarations of its own, which win the cascade over anything declared here * (same specificity, later in the document) — those two properties were * edited directly on each page rather than fought over here. Everything * else routes through these tokens. */ :root { /* ── light: the default for everyone ── */ --bg:#f1e4cd; --panel:#fdf7ec; --raised:#f8f0dd; --sunk:#f0e4c8; --hover:#f4ead4; --ink:#241b18; --dim:#5b4a3c; --faint:#8a7a64; --line:#e6d7b8; --line2:#d8c49c; /* --ember was #c98a2e until 2026-08-11: measured 2.6-2.8:1 against --panel/--raised, under the 3:1 floor WCAG sets even for large text and UI-component outlines. It carries real status meaning here (deposit-period pills, vote countdown clocks, "has not voted" tags), not decoration, so this darkens the same gold/amber hue (same hue+saturation, lower lightness) until it clears 4.5:1 against every surface that uses it as text. --rn-spectrum below keeps the original bright gold — that gradient is the logo's own color and is untouched. */ --growth:#2f6f4a; --mint:#3e7d5a; --sand:#7d8451; --ember:#8f6221; --clay:#a8402f; --tide:#3f7ba1; --link:#146b41; --shadow:0 1px 0 rgba(255,255,255,.65), 0 6px 20px -16px rgba(90,58,30,.32); /* text laid on a saturated fill (button faces, bar segments) never a token with a second, contradictory job (see --sunk, which is also the recessed inset-field color and must stay dark-adjacent in both themes). */ --btn-ink:#fbf3e2; /* the lotus spectrum: identical in both themes, thin rules only (doctrine: "the spectrum is the logo's, not the controls'"). Must equal vealth-next.css --spectrum. */ --rn-spectrum:linear-gradient(112deg,#c98a2e 0%,#d9a94f 22%,#6f9e76 55%,#3f6a52 78%,#1b1b20 100%); --rn-glass:linear-gradient(115deg,rgba(255,247,229,.86),rgba(255,234,240,.55),rgba(236,251,236,.5),rgba(233,246,255,.6)); } /* Dark is OPT-IN ONLY (vealth.net law, 2026-08-05): a visitor's OS preference is never consulted. The toggle appended by /vealth-theme.js is the only way in, and it sets this attribute on . */ :root[data-theme="dark"] { --bg:#0d1310; --panel:#161d17; --raised:#1c251d; --sunk:#0a0f0b; --hover:#1a2219; --ink:#ece4d0; --dim:#b9ad8e; --faint:#8a8069; --line:#2a3327; --line2:#37422f; --growth:#6da678; --mint:#7fa583; --sand:#a3ab7f; --ember:#d9b876; --clay:#c9776a; --tide:#8badb4; --link:#d5bc7e; --shadow:0 1px 0 rgba(255,255,255,.02), 0 8px 28px -18px rgba(0,0,0,.9); --btn-ink:#0d130e; --rn-glass:linear-gradient(115deg,rgba(13,16,11,.9),rgba(17,21,14,.78),rgba(15,19,13,.74),rgba(19,23,16,.8)); } /* ── the one nav: brand back to vealth.net, this cluster's five doors ── */ .regen-nav{ position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; padding:10px 20px; border-bottom:1px solid var(--line); background:var(--rn-glass); -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1); } .regen-nav::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--rn-spectrum); opacity:.75; } .rn-brand{ display:inline-flex; align-items:center; gap:8px; flex:none; font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:16px; color:var(--ink); text-decoration:none; min-height:32px; } .rn-brand:hover{ color:var(--growth); } .rn-mark{ width:26px; height:26px; flex:none; border-radius:50%; background:url("/brand-mark-light-round-96.png?v=lotus9") center/contain no-repeat; } :root[data-theme="dark"] .rn-mark{ background-image:url("/brand-mark-dark-round-96.png?v=lotus9"); } .rn-crumb{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); flex:none; } .rn-links{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; margin-left:auto; } .rn-links a{ text-decoration:none; font-size:13px; font-weight:600; color:var(--dim); padding:7px 12px; border-radius:999px; white-space:nowrap; min-height:32px; display:inline-flex; align-items:center; transition:background .15s ease, color .15s ease; } .rn-links a:hover{ color:var(--ink); background:var(--hover); } .rn-links a[aria-current="page"]{ color:var(--ink); background:var(--raised); box-shadow:inset 0 0 0 1px var(--line2); } @media(max-width:640px){ .regen-nav{ padding:8px 14px 8px 16px; gap:6px 10px; } .rn-crumb{ display:none; } /* Brand + toggle alone don't fill a line, and the five-door link row never fits next to them at this width, so without help the toggle (last in source order) is the one pushed onto a lonely third line. order:2 pulls it up next to the brand on row 1; flex-basis:100% guarantees the link row (order:3) always starts row 2, giving the nav two rows instead of three on every phone width, not just some. */ .rn-links{ order:3; flex-basis:100%; margin-left:0; gap:2px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; min-width:0; } .rn-links::-webkit-scrollbar{ display:none; } .rn-links a{ padding:6px 9px; font-size:12.5px; } } /* the theme toggle vealth-theme.js appends finds this nav (any