/* ============================================ DOOMSDAY — Design System Foundation ============================================ */ /* Google Fonts loaded from via preconnect+stylesheet — see _fix_fonts.py */ /* ---- CSS Reset ---- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: 'Share Tech Mono', monospace; background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; } a { color: var(--toxic-green); text-decoration: none; transition: color 0.3s ease; } a:hover { color: var(--toxic-green-bright); } img { max-width: 100%; display: block; } ul, ol { list-style: none; } /* ---- Custom Properties ---- */ :root { /* Backgrounds */ --bg-primary: #0a0a0a; --bg-secondary: #111111; --bg-tertiary: #1a1a1a; --surface: #222222; /* Accent — Toxic Green */ --toxic-green: #c41e1e; --toxic-green-dim: #7a0a0a; --toxic-green-bright: #ef3a3a; --toxic-glow: rgba(196, 30, 30, 0.18); --toxic-glow-strong: rgba(196, 30, 30, 0.40); /* Secondary Accents */ --hazard-yellow: #ffb800; --hazard-orange: #ff6600; --blood-red: #cc0000; --rust: #8b4513; --steel-blue: #4a90d9; /* Text */ --text-primary: #e0e0e0; --text-secondary: #888888; --text-highlight: #c41e1e; --text-dark: #0a0a0a; /* Typography */ --font-display: 'Black Ops One', cursive; --font-heading: 'Russo One', sans-serif; --font-body: 'Share Tech Mono', monospace; /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 5rem; /* Borders */ --border-thin: 1px solid var(--toxic-green-dim); --border-glow: 1px solid var(--toxic-green); /* Transitions */ --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; /* Nav height */ --nav-height: 70px; /* === REDESIGN v2 (2026-04-17) — extended palette & shadows === */ /* Semantic aliases for blood-red (was misnamed toxic-green) */ --blood: #c41e1e; --blood-dim: #7a0a0a; --blood-bright: #ef3a3a; --blood-glow: rgba(196, 30, 30, 0.20); --blood-glow-strong: rgba(196, 30, 30, 0.50); /* Rusted metal — for borders, panels, dividers */ --metal: #3d2a1c; --metal-hi: #5c3f26; --metal-deep: #1a0e07; /* Bone palette — text replacing pure white */ --bone: #e8ddc8; --bone-dim: #a89880; --ash: #5a4a3a; /* Hazard backgrounds */ --hazard-dark: #3a3010; /* Glows / shadows */ --sh-blood: 0 0 24px var(--blood-glow-strong); --sh-blood-soft: 0 0 18px var(--blood-glow); --sh-rust: 0 8px 24px rgba(139, 69, 19, 0.4); --sh-deep: 0 16px 40px rgba(0, 0, 0, 0.7); --sh-text-stencil: 0 0 14px var(--blood-glow-strong), 0 4px 0 #000; } /* ---- Typography Base ---- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--text-primary); line-height: 1.2; } h1 { font-size: clamp(2rem, 5vw, 3.5rem); } h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); } h3 { font-size: clamp(1.2rem, 3vw, 1.8rem); } p { margin-bottom: var(--space-md); color: var(--text-secondary); } /* ---- Noise Texture Overlay ---- */ .noise-overlay::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.03; /* Z-index hierarchy: контент 0–10, навбар 1000, dropdown 1001, overlay-эффекты 1500/1499, модалки ≥ 2000 (cases-modal=10000). */ z-index: 1500; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px 256px; } /* ---- Scanline Overlay ---- */ .scanlines::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1499; pointer-events: none; background: repeating-linear-gradient( transparent 0, transparent 2px, rgba(0, 0, 0, 0.08) 2px, rgba(0, 0, 0, 0.08) 4px ); } /* ---- Hazard Stripe Pattern ---- */ .hazard-stripe { background: repeating-linear-gradient( -45deg, var(--hazard-yellow) 0, var(--hazard-yellow) 10px, #0a0a0a 10px, #0a0a0a 20px ); } .hazard-stripe-thin { height: 3px; background: repeating-linear-gradient( -45deg, var(--hazard-yellow) 0, var(--hazard-yellow) 5px, #0a0a0a 5px, #0a0a0a 10px ); } /* ---- Selection ---- */ ::selection { background: var(--toxic-green); color: var(--bg-primary); } /* ---- Scrollbar ---- */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--toxic-green-dim); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--toxic-green); }