/* * Era overrides — visual style for the 5-position Time Traveler * ───────────────────────────────────────────────────────────── * Applied via [data-era] on the element. The Time Traveler * slider on the main site writes localStorage.site_era; the * cross-site-state.js inline script (in every subsite's ) * reads that on every page load and stamps the matching data-era. * * Era 1980 — DOS blue/white amber * Era 2010 — Y2K bevel, serif body * Era 2030 — Synthwave cyan * Era 2077 — Cyberpunk yellow * (Era 3 = "Modern" — no overrides, lets data-theme do its thing.) * * Each era ROOT-overrides the theme-vars.css custom properties. * Component CSS reading var(--accent) automatically gets the * era's color without knowing which era is active. * * Subsites can opt out by NOT linking this file. Labs currently * opts in — color palette shifts carry across subsites for UX * continuity ("you're still in cyberpunk era"), but heavier era * decorations (synthwave gridlines, cyberpunk statusbar, era * audio) live only on the main site. */ html[data-era="1980"] { --bg: #000080; --bg-2: #000000; --bg-3: #0000aa; --bg-dark: #000000; --accent: #ffffff; --accent-soft: #ffff55; --text: #aaaaaa; --text-soft: #aaaaaa; --text-mute: #555555; --text-quiet: #555555; --border: #aaaaaa; --border-strong: #ffffff; --hairline: #555555; --nav-bg-scrolled: #000080; } html[data-era="2010"] { --bg: #fff; --bg-2: #f0f0f0; --bg-3: #e0e0e0; --accent: #0000ee; --text: #000; --text-soft: #333; --border: #999; --border-strong: #000; --hairline: #ccc; } html[data-era="2010"] body { font-family: "Times New Roman", serif !important; font-size: 16px; } html[data-era="2010"] .btn, html[data-era="2010"] button { border-radius: 0 !important; background: linear-gradient(to bottom, #eee, #ccc) !important; color: #000 !important; border: 1px solid #666 !important; } html[data-era="2030"] { --bg: #050505; --bg-2: #0a0a0a; --bg-3: #000; --accent: #0ff; --text: #0ff; --text-soft: #088; --border: #0ff; --border-strong: #0ff; --hairline: rgba(0,255,255,0.2); } html[data-era="2030"] body { font-family: 'Inter', sans-serif !important; font-weight: 200; } html[data-era="2030"] * { border-radius: 0 !important; text-shadow: 0 0 5px #0ff; } html[data-era="2030"] .lab-card, html[data-era="2030"] .project-card { background: transparent !important; border: 1px solid #0ff !important; box-shadow: 0 0 10px rgba(0,255,255,0.3); } html[data-era="2077"] { --bg: #030303; --bg-2: #0a0a0a; --bg-3: #111; --bg-dark: #000; --accent: #FCE300; --accent-soft: #FFE94D; --text: #FCE300; --text-soft: rgba(252,227,0,0.7); --text-mute: rgba(252,227,0,0.4); --text-quiet: rgba(252,227,0,0.22); --border: rgba(252,227,0,0.45); --border-strong: #FCE300; --hairline: rgba(252,227,0,0.12); } html[data-era="2077"] body { font-family: 'JetBrains Mono', ui-monospace, monospace !important; } html[data-era="2077"] .lab-card, html[data-era="2077"] .project-card { border-color: rgba(252,227,0,0.6) !important; box-shadow: 0 0 14px rgba(252,227,0,0.18); } /* Modern era (data-era unset or =3) — no overrides, theme-vars.css owns the look. */