/* ========================================================================== eras.css — the timeline march. Texture, not window chrome (mobile-light). Each era overrides CSS custom properties + adds a texture overlay. Applied via [data-era="..."] on ; the terminal frame reads the vars. 1999 → 2004 → 2010 → 2016 → 2027: chunky CRT to sleek Order-black. ========================================================================== */ /* ---- 1999 — Capital. CRT, scanlines, chunky beige. ---- */ body[data-era="1999"] { --paper: #cfcabb; /* warm bone/beige monitor */ --ink: #1b1a17; --ink-soft: #3c3a33; --ink-faint: #6f6b5e; --rule: #a49e8c; --accent: #123f2a; /* dim CRT green, used sparingly */ --lit: #123f2a; --glow: rgba(18,63,42,0.4); --radius: 0px; --font-mono: "Courier New", "Courier", ui-monospace, monospace; } body[data-era="1999"] .terminal { box-shadow: inset 0 0 0 2px #b7b1a1, 0 0 0 3px #857f70, 0 18px 40px -22px #000; border-color: #6f6b5e; } body[data-era="1999"] .term-bar { background: #b7b1a1; letter-spacing: 0.2em; } body[data-era="1999"] .terminal::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: repeating-linear-gradient( 0deg, rgba(0,0,0,0.10) 0px, rgba(0,0,0,0.10) 1px, transparent 1px, transparent 3px), radial-gradient(120% 120% at 50% 50%, transparent 62%, rgba(0,0,0,0.22) 100%); mix-blend-mode: multiply; } body[data-era="1999"] .term-log { text-shadow: 0 0 1px rgba(18,63,42,0.25); } @media (prefers-reduced-motion: no-preference) { body[data-era="1999"]:not([data-reduce]) .terminal::after { animation: crt-flicker 5.5s steps(60) infinite; } } @keyframes crt-flicker { 0%,100% { opacity: 1; } 47% { opacity: 0.92; } 48% { opacity: 0.98; } } /* ---- 2004 — Intelligence. Cool office XP-era gray-blue, faint gridlines. ---- */ body[data-era="2004"] { --paper: #e6e8e3; --ink: #21242a; --ink-soft: #464b54; --ink-faint: #7d8590; --rule: #b9bfc7; --accent: #1f4d7a; /* database blue */ --lit: #1f4d7a; --glow: rgba(31,77,122,0.35); --radius: 2px; --font-mono: "Lucida Console", "Lucida Sans Typewriter", monospace; } body[data-era="2004"] .terminal { border-color: #96a0ab; box-shadow: 0 1px 0 #fff inset, 0 0 0 1px #c9cfd6, 0 16px 44px -24px rgba(20,30,45,0.6); } body[data-era="2004"] .term-bar { background: linear-gradient(#eef1ee, #d5dad3); letter-spacing: 0.18em; } /* faint ledger gridlines — a spreadsheet you're meant to scan */ body[data-era="2004"] .terminal::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: repeating-linear-gradient(0deg, transparent 0 27px, rgba(31,77,122,0.05) 27px 28px); } /* ---- 2010 — Operations. Warm workshop gray, soft corners, subtle gloss. ---- */ body[data-era="2010"] { --paper: #f0efe9; --ink: #26251f; --ink-soft: #4c4a41; --ink-faint: #8a887c; --rule: #cbc9bd; --accent: #a35c1f; /* machine-oil copper */ --lit: #a35c1f; --glow: rgba(163,92,31,0.35); --radius: 6px; --font-mono: "Consolas", "Menlo", ui-monospace, monospace; } body[data-era="2010"] .terminal { border-color: #b9b7aa; box-shadow: 0 1px 2px rgba(255,255,255,0.8) inset, 0 20px 50px -26px rgba(40,35,25,0.55); } body[data-era="2010"] .term-bar { background: linear-gradient(#f7f6f1, #e4e2d8); border-radius: 6px 6px 0 0; } /* blueprint dot-grid — a bench you build on */ body[data-era="2010"] .terminal::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; background-image: radial-gradient(rgba(76,74,65,0.10) 1px, transparent 1.4px); background-size: 22px 22px; } /* ---- 2016 — Network. Flat white, hairlines, one saturated violet. ---- */ body[data-era="2016"] { --paper: #fafafa; --ink: #17181c; --ink-soft: #43454d; --ink-faint: #9aa0ab; --rule: #e3e5e9; --accent: #6f3fd4; /* app violet */ --lit: #6f3fd4; --glow: rgba(111,63,212,0.35); --radius: 10px; --font-mono: "SFMono-Regular", ui-monospace, "Menlo", monospace; } body[data-era="2016"] .terminal { border-color: var(--rule); box-shadow: 0 2px 6px rgba(23,24,28,0.06), 0 24px 60px -30px rgba(23,24,28,0.35); } body[data-era="2016"] .term-bar { background: #fff; border-radius: 10px 10px 0 0; letter-spacing: 0.22em; } /* no texture overlay — flatness IS the 2016 texture */ /* ---- 2027 — Security. Order-black. Sleek, quiet, lit from within. ---- */ body[data-era="2027"] { --paper: #0b0b0d; --ink: #ecebe7; --ink-soft: #b9b7b0; --ink-faint: #64635c; --rule: #232328; --accent: #e7e3d6; /* bone light on black */ --lit: #e7e3d6; --glow: rgba(231,227,214,0.45); --radius: 12px; --font-mono: "SFMono-Regular", ui-monospace, "Menlo", monospace; } body[data-era="2027"] { background: #000; } body[data-era="2027"] .terminal { border-color: #1c1c21; box-shadow: 0 0 0 1px rgba(231,227,214,0.05), 0 30px 80px -30px #000, 0 0 60px -20px rgba(231,227,214,0.08); } body[data-era="2027"] .term-bar { background: #0f0f12; border-radius: 12px 12px 0 0; color: #64635c; } body[data-era="2027"] .cursor { background: var(--ink); } /* a breath of light behind the frame, motion-gated */ @media (prefers-reduced-motion: no-preference) { body[data-era="2027"]:not([data-reduce]) .terminal { animation: order-breathe 7s ease-in-out infinite; } } @keyframes order-breathe { 0%, 100% { box-shadow: 0 0 0 1px rgba(231,227,214,0.05), 0 30px 80px -30px #000, 0 0 60px -20px rgba(231,227,214,0.06); } 50% { box-shadow: 0 0 0 1px rgba(231,227,214,0.08), 0 30px 80px -30px #000, 0 0 70px -18px rgba(231,227,214,0.14); } } /* ---- shop — Second Look Books. Warm paper, quiet, timeless. ---- */ body[data-era="shop"] { --paper: #f6f1e5; --ink: #241f18; --ink-soft: #4d463a; --ink-faint: #8d8371; --rule: #ddd3bf; --accent: #4a3c28; --lit: #4a3c28; --glow: rgba(74,60,40,0.3); --radius: 3px; --font-mono: "SFMono-Regular", ui-monospace, monospace; --font-serif: "Georgia", "Times New Roman", serif; background: var(--paper); }