/* ========================================================================== Tech Knows You — CLEAN theme (serious, low-flair) -------------------------------------------------------------------------- Loaded AFTER style.css. Every rule is scoped to `html.theme-clean`, so the whole serious look is gated behind ONE class on . • ON (serious / AdSense-friendly): ← current • OFF (full iridescent vibe): (remove the class) style.css is never modified — removing the class (or this ) restores the original vibey theme on a dime. To flip every page at once: remove: sed -i '' 's/ class="theme-clean"//' *.html ========================================================================== */ /* 1. Re-point the design tokens. Most "glass" surfaces and shadows read from these vars, so flipping them here calms the whole site in one move. */ html.theme-clean { --paper: #ffffff; --ink: #1b1a26; --ink-soft: #4b4960; --ink-faint: #7c7a90; --glass: #ffffff; --glass-strong: #ffffff; --glass-edge: #e7e5ee; --shadow-soft: 0 1px 2px rgba(20, 18, 40, 0.06), 0 1px 1px rgba(20, 18, 40, 0.04); --shadow-lift: 0 6px 16px -6px rgba(20, 18, 40, 0.14); --accent: #4a3fae; /* single restrained accent, replaces the rainbow */ } /* 2. Flat, calm background — no animated mesh, grain, or sheen. */ html.theme-clean body { background: #fbfbfd; } html.theme-clean .mesh, html.theme-clean .grain { display: none !important; } /* 3. Drop the scrolling facts marquee (the same figures live in the stats module below, where they read as serious content). */ html.theme-clean .ticker { display: none !important; } /* 4. Kill holographic gradient-clipped text → solid, single-colour type. */ html.theme-clean .hero__headline em, html.theme-clean .counter-lede em, html.theme-clean .counter__figure, html.theme-clean .stat-card__figure, html.theme-clean .caption__quote, html.theme-clean .brand__mark, html.theme-clean .psa-stamp__star, html.theme-clean .watermark__mark, html.theme-clean .sheet__title span { background: none !important; -webkit-text-fill-color: currentColor !important; filter: none !important; } html.theme-clean .hero__headline em, html.theme-clean .counter-lede em { color: var(--accent) !important; } html.theme-clean .stat-card__figure { color: var(--accent) !important; } html.theme-clean .counter__figure { color: var(--ink) !important; } html.theme-clean .brand__mark, html.theme-clean .psa-stamp__star, html.theme-clean .watermark__mark { color: var(--accent) !important; } html.theme-clean .caption__quote { color: var(--ink-faint) !important; } /* 5. Counter: plain ticking number — no glow, no gleam sweep, no holo border. */ html.theme-clean .counter { background: #fff !important; border: 1px solid var(--glass-edge) !important; } html.theme-clean .counter::after { display: none !important; } /* gleam */ /* 6. PSA badge → simple bordered label. */ html.theme-clean .psa-stamp { background: #fff !important; border: 1px solid var(--glass-edge) !important; box-shadow: none !important; color: var(--ink-soft) !important; } /* 7. Grid tiles: flat cards, no holo border, no entry/hover/shimmer motion. */ html.theme-clean .tile { background: #fff !important; border: 1px solid var(--glass-edge) !important; box-shadow: none !important; animation: none !important; } html.theme-clean .tile:hover { transform: none !important; box-shadow: none !important; } html.theme-clean .tile.is-loading::before { animation: none !important; } html.theme-clean .tile__empty { background: #f6f6fa !important; } html.theme-clean .tile__empty-glyph { animation: none !important; } /* 8. Live dot: static, muted (no pulse ring). */ html.theme-clean .live-dot { background: var(--accent) !important; } html.theme-clean .live-dot::after { display: none !important; } /* 9. Buttons: solid accent / plain bordered — no holographic fill or glow. */ html.theme-clean .btn--primary { background: var(--accent) !important; color: #fff !important; box-shadow: none !important; } html.theme-clean .btn--primary:hover { filter: brightness(1.07) !important; } html.theme-clean .btn--ghost { box-shadow: none !important; } /* 10. Card preview panel uses a hardcoded tint — flatten to white. */ html.theme-clean .cardmodal__panel { background: #fff !important; } /* 11. Strip remaining entry animations for a still, serious feel. */ html.theme-clean .consent { animation: none !important; } /* 12. Unify accent on links/underlines. */ html.theme-clean .sources__list a, html.theme-clean .prose a, html.theme-clean .method__summary, html.theme-clean .fieldnotes__more a { text-decoration-color: var(--accent) !important; } html.theme-clean ::selection { background: #e3e0f5; color: var(--ink); } /* 13. Dial display type down a notch — present, not shouty. */ html.theme-clean .hero__headline { font-size: clamp(1.7rem, 6.2vw, 2.35rem); } html.theme-clean .counter__figure { font-size: clamp(1.9rem, 8vw, 2.7rem); } html.theme-clean .stats__heading, html.theme-clean .fieldnotes__heading { font-size: clamp(1.25rem, 5vw, 1.55rem); } html.theme-clean .page-hero h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); }