/* * ═══════════════════════════════════════════════════════════ * TARKOV101 — Global Stylesheet · Sitrep V2 Theme * Single source of truth for: fonts, CSS vars, base reset * ═══════════════════════════════════════════════════════════ */ /* ── GOOGLE FONTS ── loaded via in HTML for performance ── Bender removed (proprietary font) · replaced by Rajdhani (Google Fonts, SIL OFL) */ /* ══════════════════════════════════════════════ CSS CUSTOM PROPERTIES — design tokens All pages share these values. ══════════════════════════════════════════════ */ :root { /* ── Background / Surface ── */ --bg: #050608; --surf: #080c12; --surf2: #0c1220; /* ── Borders ── */ --border: #131d2e; --bord2: #1e2e44; /* ── Brand colours ── */ --gold: #c8a030; --gold-d: #8a6c1a; --gold-g: rgba(200,160,48,.1); --eft-orange: #c8a030; /* alias used on some pages */ --steel: #3a7fc1; --steel-g: rgba(58,127,193,.12); --green: #4caf50; --red: #e53935; /* ── Text ── */ --text: #b8c8d8; --muted: #3a4e62; --dim: #1e2e3e; /* ── Typography ── */ --fn: 'Rajdhani', sans-serif; /* Primary UI font */ --fm: 'Roboto Mono', monospace; /* Monospace / HUD */ --fo: 'Rajdhani', sans-serif; /* Display / hero titles */ } /* ══════════════════════════════════════════════ BASE RESET & DEFAULTS ══════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--fn); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* ══════════════════════════════════════════════ GLOBAL UTILITY CLASSES ══════════════════════════════════════════════ */ /* Screen-reader only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* ── Section wrapper ── */ .sec-wrap { max-width: 1500px; margin: 0 auto; padding: 80px 24px 60px; } /* ── Section header ── */ .s-head { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid var(--border); padding-bottom: 20px; margin-bottom: 40px; } .s-title { font-family: var(--fo); font-size: 36px; color: #fff; text-transform: uppercase; line-height: 1; margin: 0; } .s-link { font-family: var(--fm); font-size: 11px; color: var(--text); padding: 8px 16px; border: 1px solid var(--border); transition: border-color .2s, color .2s; } .s-link:hover { border-color: var(--gold); color: var(--gold); } /* ── Tag / label chip ── */ .t101-tag { font-family: var(--fm); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); } /* ── Gold divider line ── */ .t101-divider { display: block; width: 48px; height: 2px; background: var(--gold); margin: 16px 0; } /* Static scanline texture — subtle, no animation */ body::after { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0,0,0,0.025) 2px, rgba(0,0,0,0.025) 4px ); pointer-events: none; z-index: 9998; } /* ══════════════════════════════════════════════ PAGE HERO — shared hero layout used by gun-builds, settings, all-quests etc. ══════════════════════════════════════════════ */ .page-hero { padding: 72px 24px 56px; background: linear-gradient(180deg, var(--surf) 0%, var(--bg) 100%); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 50%, rgba(200,160,48,.04) 0%, transparent 70%); pointer-events: none; } .page-hero .hero-inner { max-width: 1500px; margin: 0 auto; position: relative; } .page-hero .classif { font-family: var(--fm); font-size: 9px; letter-spacing: .22em; color: var(--gold); text-transform: uppercase; margin-bottom: 14px; } .page-hero .hero-title { font-family: var(--fo); font-size: clamp(36px, 6vw, 72px); font-weight: 700; color: #fff; text-transform: uppercase; line-height: 1; margin-bottom: 16px; } .page-hero .hero-sub { font-family: var(--fm); font-size: 12px; letter-spacing: .1em; color: var(--muted); max-width: 680px; line-height: 1.7; } /* ══════════════════════════════════════════════ SIDEBAR / TOC — shared across settings, gun-builds, etc. ══════════════════════════════════════════════ */ .layout-grid { display: grid; grid-template-columns: 220px 1fr; gap: 40px; max-width: 1500px; margin: 0 auto; padding: 48px 0 80px; align-items: start; } @media (max-width: 900px) { .layout-grid { grid-template-columns: 1fr; } } .toc-sidebar { position: sticky; top: 90px; } .toc-title { font-family: var(--fm); font-size: 9px; letter-spacing: .2em; color: var(--gold); text-transform: uppercase; display: block; padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 8px; } .toc-menu { display: flex; flex-direction: column; gap: 2px; } .toc-link { font-family: var(--fn); font-size: 13px; font-weight: 600; color: var(--muted); padding: 6px 10px; border-left: 2px solid transparent; transition: color .12s, border-color .12s; text-transform: uppercase; letter-spacing: .05em; } .toc-link:hover, .toc-link.active { color: var(--text); border-left-color: var(--gold); } /* ══════════════════════════════════════════════ RESPONSIVE HELPERS ══════════════════════════════════════════════ */ @media (max-width: 768px) { .sec-wrap { padding: 48px 16px 40px; } .page-hero { padding: 48px 16px 40px; } .layout-grid { padding: 32px 16px 60px; gap: 24px; } } /* -- GRID HERO V3 (Field Guide Style) -- */ .grid-hero { position: relative; min-height: 320px; display: flex; align-items: center; border-bottom: 1px solid var(--border); overflow: hidden; background: linear-gradient(135deg, #080a10 0%, #0a0e18 40%, #060810 100%); } .grid-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 75% 50%, rgba(200,160,48,.11) 0%, transparent 55%), radial-gradient(ellipse at 15% 80%, rgba(200,160,48,.04) 0%, transparent 40%); pointer-events: none; } .grid-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; } .grid-hero-inner { position: relative; z-index: 2; max-width: 1500px; margin: 0 auto; padding: 40px 24px; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; height: 100%; } .grid-classif { font-family: var(--fm); font-size: 10px; letter-spacing: .2em; color: var(--gold); text-transform: uppercase; display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .grid-classif::before { content: ''; width: 40px; height: 1px; background: var(--gold); } .grid-title { font-family: var(--fn); font-size: clamp(36px, 5vw, 64px); font-weight: 700; line-height: 1; color: #fff; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 16px; } .grid-desc { font-family: var(--fm); font-size: 14px; max-width: 800px; color: var(--text); line-height: 1.6; } /* ========================================================= UNIVERSAL 1500PX EXACT WIDTH ENFORCEMENT (User Request) ========================================================= */ .header-inner, .grid-hero-inner, .sec-wrap, .kappa-wrap, .f-grid, article { max-width: 1500px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; padding-left: 24px !important; padding-right: 24px !important; } /* Fix footer grid double padding */ .f-grid { padding-left: 0 !important; padding-right: 0 !important; } /* FINAL CATCH-ALL FOR ANY INLINE HEADER VARIANTS */ .hero-inner, .page-hero-inner { max-width: 1500px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; padding-left: 24px !important; padding-right: 24px !important; }