/* ==================================================== * Cyber / Cyberpunk-2077 theme * Toggle by adding class="theme-cyber" to . * Load AFTER style.css so these rules win. * ================================================== */ /* Chrome/overlays are hidden unless the theme is on, so removing the body class cleanly reverts the site. */ .term-bar, .term-status, .fx, .fx-sweep { display: none; } body.theme-cyber { --bg: #0b0507; --panel: #1c0a0e; --accent: #ff2b3d; /* red – structural / frame (30%) */ --accent-glow: rgba(255, 43, 61, 0.34); --accent2: #5ad6e0; /* cyan – headings / highlights (10%) */ background: radial-gradient(125% 90% at 50% 0%, #1c070d 0%, #0b0507 62%) fixed; color: #e5e7eb; } /* ---- Fixed HUD overlays ---- */ body.theme-cyber .fx { position: fixed; inset: 0; pointer-events: none; display: block; } body.theme-cyber .fx-grid { z-index: 0; background-image: linear-gradient(rgba(255, 43, 61, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 43, 61, 0.05) 1px, transparent 1px); background-size: 30px 30px; } body.theme-cyber #app.page { position: relative; z-index: 1; } /* Keep content clear of the fixed bars */ body.theme-cyber .page { margin-top: 4.5rem; margin-bottom: 5rem; } /* ---- HUD corner brackets around the content column ---- */ body.theme-cyber #app.page::before, body.theme-cyber #app.page::after { content: ""; position: absolute; width: 1.1rem; height: 1.1rem; pointer-events: none; z-index: 3; } body.theme-cyber #app.page::before { top: -0.6rem; left: -0.2rem; border-top: 0.125rem solid var(--accent); border-left: 0.125rem solid var(--accent); } body.theme-cyber #app.page::after { bottom: -0.6rem; right: -0.2rem; border-bottom: 0.125rem solid var(--accent2); border-right: 0.125rem solid var(--accent2); } /* ---- Typography ---- */ body.theme-cyber .page-title { color: var(--accent2); text-shadow: 0.035em 0 var(--accent), -0.02em 0 rgba(90, 214, 224, 0.5); letter-spacing: 0.01em; } body.theme-cyber .page-subtitle { color: var(--accent2); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; } body.theme-cyber .highlight { color: var(--accent2); font-style: normal; text-shadow: 0 0 0.5rem rgba(90, 214, 224, 0.4); } /* ---- Nav + contact link hover: arrow slide + underline wipe ---- */ body.theme-cyber .nav-arrow { color: var(--accent); transition: transform 0.2s ease; } body.theme-cyber .nav-item:hover .nav-arrow { transform: translateX(0.2rem); text-shadow: 0 0 0.5rem var(--accent); } body.theme-cyber .nav-label { position: relative; } body.theme-cyber .nav-item:hover .nav-label { text-decoration: none; } body.theme-cyber .nav-label::after { content: ""; position: absolute; left: 0; bottom: -0.15rem; width: 100%; height: 0.0625rem; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; } body.theme-cyber .nav-item:hover .nav-label::after { transform: scaleX(1); } body.theme-cyber .contact-link, body.theme-cyber .contact-links a { border-bottom: 0; padding-bottom: 0; } /* ---- Timeline ---- */ body.theme-cyber .timeline-title { color: var(--accent2); } body.theme-cyber .timeline-date { color: var(--accent2); } body.theme-cyber .timeline-item::before { background-color: var(--bg); } body.theme-cyber .timeline-item:hover::before { background-color: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px var(--accent-glow); } body.theme-cyber .timeline-item:hover .timeline-date { color: var(--accent); } /* ---- Top bar (fixed) ---- */ body.theme-cyber .term-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; gap: 0.6rem; height: 2.2rem; padding: 0 0.9rem; background: var(--panel); border-bottom: 0.0625rem solid var(--accent); box-shadow: 0 0 0.75rem var(--accent-glow); } /* Fixed-width left slot so NETRUNNER never shifts between clock/back */ body.theme-cyber .cb-slot { min-width: 5.9rem; display: flex; align-items: center; justify-content: center; } body.theme-cyber .cb-clock { color: var(--accent2); font-size: 0.74rem; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; line-height: 1; padding: 0.08rem 0.55rem; border: 0.0625rem solid transparent; } body.theme-cyber .cb-back { font: inherit; white-space: nowrap; cursor: pointer; background: transparent; border: 0.0625rem solid var(--accent); color: var(--accent); padding: 0.08rem 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.72rem; line-height: 1; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } body.theme-cyber .cb-back:hover { background: var(--accent); color: var(--bg); box-shadow: 0 0 0.6rem var(--accent-glow); } body.theme-cyber .cb-tag { color: var(--bg); background: var(--accent); font-weight: 600; padding: 0 0.5rem; letter-spacing: 0.1em; } body.theme-cyber .cb-title { color: var(--accent2); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; } body.theme-cyber .cb-r { margin-left: auto; color: #7a8595; font-size: 0.72rem; letter-spacing: 0.1em; } body.theme-cyber .cb-r b { color: var(--accent2); font-weight: 600; } /* ---- Bottom status bar (fixed) ---- */ body.theme-cyber .term-status { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; gap: 1.1rem; height: 1.95rem; padding: 0 0.9rem; background: var(--panel); border-top: 0.0625rem solid var(--accent); color: #7a8595; font-size: 0.74rem; letter-spacing: 0.08em; } body.theme-cyber .ts-mode { color: var(--bg); background: var(--accent); font-weight: 600; padding: 0 0.5rem; letter-spacing: 0.12em; } body.theme-cyber .ts-sys { color: var(--accent2); } body.theme-cyber .ts-sys .dot { display: inline-block; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--accent2); margin-right: 0.35rem; vertical-align: middle; box-shadow: 0 0 0.4rem var(--accent2); animation: scr-blink 1.1s steps(1) infinite; } body.theme-cyber .ts-r { margin-left: auto; font-variant-numeric: tabular-nums; } /* ---- Page-change sweep ---- */ body.theme-cyber .fx-sweep { position: fixed; left: 0; right: 0; top: 0; height: 220px; z-index: 45; pointer-events: none; opacity: 0; display: block; background: linear-gradient(to bottom, transparent, var(--accent-glow) 62%, rgba(255, 255, 255, 0.08) 84%, transparent); border-bottom: 0.0625rem solid var(--accent2); } body.theme-cyber .fx-sweep.run { animation: scr-sweep 0.34s ease-out; } /* ---- Intro overlay tint to match ---- */ body.theme-cyber #intro-overlay { background-color: #0b0507; } body.theme-cyber .domain-ext { color: var(--accent2); } @keyframes scr-scan { from { background-position: 0 0; } to { background-position: 0 6px; } } @keyframes scr-blink { 50% { opacity: 0; } } @keyframes scr-sweep { from { transform: translateY(-240px); opacity: 0.85; } to { transform: translateY(920px); opacity: 0; } } @media (max-width: 40rem) { body.theme-cyber .cb-title { display: none; } body.theme-cyber .page { margin-top: 4rem; } }