/* theme-cyberpunk.css — dark, neon, monospace, glitchy. Scoped to . Stereotypical tropes, on purpose. */ [data-theme="cyberpunk"] { --bg: #07080f; --fg: #cfeef0; --muted: #6f8ba0; --border: #16303a; --accent: #ff2f87; /* hot magenta */ --link: #22e0d6; /* cyan */ --card-bg: #0b0f1c; --title-fg: #34f5e0; --byline-fg: #8a7fb5; --section-fg: #ff2f87; --note-bg: #12081a; --note-border: #b026ff; /* neon purple */ --note-flag-bg: #b026ff; --note-flag-fg: #0b0012; --flash: #2a0f3d; --font-body: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; --font-head: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; } [data-theme="cyberpunk"] body { background: radial-gradient(1200px 500px at 80% -10%, #16093a55, transparent), linear-gradient(#07080f, #05060c); background-attachment: fixed; } [data-theme="cyberpunk"] .site-head { border-color: var(--accent); } [data-theme="cyberpunk"] .site-head h1 { color: var(--title-fg); text-transform: uppercase; letter-spacing: .06em; text-shadow: 0 0 6px #34f5e080, 0 0 18px #34f5e040; } [data-theme="cyberpunk"] .cpl-section h2 { color: var(--section-fg); text-transform: uppercase; letter-spacing: .12em; border-color: #2a1030; text-shadow: 0 0 6px #ff2f8760, 0 0 16px #ff2f8730; } [data-theme="cyberpunk"] .entry { border-bottom-color: #14202a; } [data-theme="cyberpunk"] .entry-title { color: var(--title-fg); text-shadow: 0 0 5px #34f5e050; } [data-theme="cyberpunk"] .entry:hover { background: #0b111f66; } [data-theme="cyberpunk"] a { text-decoration: none; border-bottom: 1px dotted var(--link); } [data-theme="cyberpunk"] a:hover { color: #baffff; text-shadow: 0 0 8px var(--link); } [data-theme="cyberpunk"] .meta-circa { color: var(--accent); text-shadow: 0 0 6px #ff2f8750; } [data-theme="cyberpunk"] .control select { border-color: var(--accent); box-shadow: 0 0 0 1px #ff2f8722 inset; } [data-theme="cyberpunk"] .site-head h1::after { content: "_"; animation: blink 1.1s steps(1) infinite; color: var(--accent); } @keyframes blink { 50% { opacity: 0; } } /* ========================================================================== CYBERPUNK MAXIMAL PASS — START Added 2026-08-24. Every optional over-the-top effect is isolated in this block so the pass can be removed wholesale or pared back section by section. See CYBERPUNK_THEME.md at the project root for the rollback map. ========================================================================== */ /* 1. Layered neon grid, CRT scanlines, grain, and screen-edge vignette. */ [data-theme="cyberpunk"] body { position: relative; isolation: isolate; } [data-theme="cyberpunk"] body::before { content: ""; position: fixed; z-index: 0; pointer-events: none; left: -12vw; right: -12vw; bottom: -20vh; height: 72vh; background: linear-gradient(#22e0d645 1px, transparent 1px), linear-gradient(90deg, #ff2f8738 1px, transparent 1px); background-size: 42px 42px; transform: perspective(420px) rotateX(62deg) scale(1.25); transform-origin: center bottom; -webkit-mask-image: linear-gradient(to bottom, transparent 2%, #000 55%); mask-image: linear-gradient(to bottom, transparent 2%, #000 55%); opacity: .7; } [data-theme="cyberpunk"] body::after { content: ""; position: fixed; z-index: 50; pointer-events: none; inset: 0; background: repeating-linear-gradient( to bottom, rgba(207,238,240,.025) 0, rgba(207,238,240,.025) 1px, transparent 1px, transparent 4px ), repeating-linear-gradient( 117deg, transparent 0, transparent 19px, rgba(255,47,135,.012) 20px ), radial-gradient(ellipse at center, transparent 56%, rgba(0,0,0,.46) 100%); } [data-theme="cyberpunk"] .wrap, [data-theme="cyberpunk"] .comparison-shell { position: relative; z-index: 1; } /* 2. Angular HUD cards with clipped corners and neon edge reactions. */ [data-theme="cyberpunk"] body .entry, [data-theme="cyberpunk"] body .story-pane, [data-theme="cyberpunk"] body .annotation-rail, [data-theme="cyberpunk"] body .topic:not(.topic-child) { border: 1px solid #174655; border-radius: 0; background: linear-gradient(135deg, rgba(34,224,214,.055), transparent 34%), linear-gradient(315deg, rgba(255,47,135,.045), transparent 30%), var(--card-bg); clip-path: polygon( 0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px) ); } [data-theme="cyberpunk"] body .entry { margin: .48rem 0; padding: .8rem .9rem; transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; } [data-theme="cyberpunk"] body .entry:hover { transform: translateX(3px); border-color: var(--link); box-shadow: inset 3px 0 0 var(--accent), 0 0 18px #22e0d620; } [data-theme="cyberpunk"] body .story-pane, [data-theme="cyberpunk"] body .annotation-rail { border-color: #266375; box-shadow: 0 0 18px #22e0d618, inset 0 0 22px #07080f88; } [data-theme="cyberpunk"] body .topic:not(.topic-child) { padding: 0 .65rem; margin: .65rem 0; } /* 3. Terminal/HUD labels and controls. */ [data-theme="cyberpunk"] .control > label:first-child::before { content: "SYS::"; color: var(--accent); opacity: .8; } [data-theme="cyberpunk"] .control select { border-radius: 0; color: var(--title-fg); background: linear-gradient(90deg, #ff2f8710, transparent 42%), #080d18; text-transform: uppercase; letter-spacing: .04em; box-shadow: inset 3px 0 0 var(--accent), 0 0 10px #ff2f8722; } [data-theme="cyberpunk"] .cpl-section h2::before { content: "// "; color: var(--link); } [data-theme="cyberpunk"] .cpl-section h2::after { content: " [NODE:ONLINE]"; margin-left: auto; color: var(--muted); font-size: .55em; letter-spacing: .08em; text-shadow: none; } [data-theme="cyberpunk"] .source-column-head h2::before, [data-theme="cyberpunk"] .annotation-rail-head h2::before, [data-theme="cyberpunk"] .story-side::before { content: "SYS::"; color: var(--accent); } [data-theme="cyberpunk"] .source-column-head, [data-theme="cyberpunk"] .annotation-rail-head, [data-theme="cyberpunk"] .story-heading { background: linear-gradient(90deg, rgba(255,47,135,.11), transparent 45%), #080c16; } [data-theme="cyberpunk"] .meta-row::before { content: "EDITION::"; color: var(--muted); font-size: .7rem; letter-spacing: .08em; } [data-theme="cyberpunk"] .meta-sources::before { content: "UPLINK::"; color: var(--accent); font-size: .68rem; } /* 4. Hover-triggered chromatic glitch—never a constant readability burden. */ [data-theme="cyberpunk"] .site-head h1:hover, [data-theme="cyberpunk"] .cpl-section h2:hover { animation: cyber-glitch .32s steps(2, end) 1; } @keyframes cyber-glitch { 0% { text-shadow: -2px 0 #ff2f87, 2px 0 #22e0d6; transform: translateX(0); } 25% { text-shadow: 3px 0 #ff2f87, -2px 0 #22e0d6; transform: translateX(1px); } 50% { text-shadow: -3px 1px #ff2f87, 3px -1px #22e0d6; transform: translateX(-1px); } 75% { text-shadow: 2px -1px #ff2f87, -3px 1px #22e0d6; transform: translateX(1px); } 100% { text-shadow: 0 0 6px currentColor; transform: translateX(0); } } /* 5. Linked source and annotation glow when an annotation is active. */ [data-theme="cyberpunk"] .annotation-trigger { background: linear-gradient(90deg, rgba(255,47,135,.2), rgba(34,224,214,.13)); box-shadow: inset 3px 0 0 var(--accent), inset 0 -1px 0 var(--link); } [data-theme="cyberpunk"] .annotation-trigger.is-selected { animation: cyber-source-pulse 1.7s ease-in-out infinite alternate; } [data-theme="cyberpunk"] .annotation-rail.is-open { animation: cyber-rail-pulse 1.7s ease-in-out infinite alternate; } @keyframes cyber-source-pulse { from { box-shadow: inset 3px 0 0 var(--accent), 0 0 5px #ff2f8755; } to { box-shadow: inset 3px 0 0 var(--link), 0 0 16px #22e0d688; } } @keyframes cyber-rail-pulse { from { box-shadow: 0 0 12px #ff2f8744, inset 0 0 16px #07080f88; } to { box-shadow: 0 0 25px #22e0d666, inset 0 0 24px #12081a99; } } /* 6. Neon scrollbars, selection, and cover-image halos. */ [data-theme="cyberpunk"] * { scrollbar-color: var(--accent) #080c16; scrollbar-width: thin; } [data-theme="cyberpunk"] *::-webkit-scrollbar { width: 9px; height: 9px; } [data-theme="cyberpunk"] *::-webkit-scrollbar-track { background: #080c16; } [data-theme="cyberpunk"] *::-webkit-scrollbar-thumb { background: linear-gradient(var(--accent), var(--link)); border: 2px solid #080c16; } [data-theme="cyberpunk"] ::selection { background: var(--accent); color: #fff; } [data-theme="cyberpunk"] .entry-cover img { border-color: var(--link); box-shadow: 0 0 7px #22e0d688, -3px 3px 12px #ff2f8744; } /* 7. Respect reduced-motion preferences, including the original cursor blink. */ @media (prefers-reduced-motion: reduce) { [data-theme="cyberpunk"] .site-head h1::after, [data-theme="cyberpunk"] .site-head h1:hover, [data-theme="cyberpunk"] .cpl-section h2:hover, [data-theme="cyberpunk"] .annotation-trigger.is-selected, [data-theme="cyberpunk"] .annotation-rail.is-open { animation: none; } [data-theme="cyberpunk"] body .entry { transition: none; } } /* CYBERPUNK MAXIMAL PASS — END */