/* ============================================================ Warzone CS 1.6 — custom.css Bootstrap 5.3 overrides + project-specific components. Never edit bootstrap.min.css directly — always override here. ============================================================ */ /* --- Font: Inter Variable (self-hosted) --- */ @font-face { font-family: 'InterVariable'; src: url('/assets/fonts/InterVariable.woff2') format('woff2-variations'), url('/assets/fonts/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ============================================================ Design tokens ============================================================ */ :root { /* Base palette — CS 1.6 nostalgia, modernized */ --wz-bg-base: #0D0D0D; --wz-bg-elevated: #1A1A1A; --wz-bg-border: #2A2A2A; --wz-text: #F5F5F5; --wz-text-muted: #A0A0A0; --wz-accent: #FF7A00; --wz-accent-hover: #FF9633; --wz-accent-deep: #E56A00; --wz-accent-rgb: 255, 122, 0; /* triplet for rgba(var(--wz-accent-rgb), α) */ --wz-accent-secondary: var(--wz-accent); /* national flag secondary; overridden per theme */ --wz-accent-secondary-rgb: var(--wz-accent-rgb); --wz-flag-stripe: transparent; /* footer flag band; nav stripe removed */ --wz-hero-glow-primary: rgba(var(--wz-accent-rgb), 0.10); /* dominant top-of-hero glow */ --wz-hero-glow-secondary: transparent; /* per-theme corner hero accent */ --wz-section-glow: transparent; /* per-theme ambient wash on other sections */ --wz-eyebrow-bg: rgba(var(--wz-accent-rgb), 0.15); /* category label bg */ --wz-eyebrow-color: var(--wz-accent); /* category label text */ --wz-success: #4ADE80; --wz-danger: #EF4444; --wz-gold: #FBBF24; --wz-font-primary: 'InterVariable', 'Roboto', system-ui, -apple-system, sans-serif; /* Bootstrap 5.3 variable overrides */ --bs-body-bg: var(--wz-bg-base); --bs-body-bg-rgb: 13, 13, 13; --bs-body-color: var(--wz-text); --bs-body-color-rgb: 245, 245, 245; --bs-secondary-color: var(--wz-text-muted); /* .text-muted */ --bs-secondary-color-rgb: 160, 160, 160; --bs-primary: var(--wz-accent); --bs-primary-rgb: var(--wz-accent-rgb); --bs-primary-bg-subtle: rgba(var(--wz-accent-rgb), 0.15); --bs-primary-text-emphasis: var(--wz-accent-hover); --bs-border-color: var(--wz-bg-border); --bs-border-color-translucent: rgba(255, 255, 255, 0.075); --bs-border-radius: 0.5rem; /* 8px cards */ --bs-border-radius-sm: 0.25rem; /* 4px buttons */ --bs-font-sans-serif: var(--wz-font-primary); --bs-link-color: var(--wz-accent); --bs-link-color-rgb: var(--wz-accent-rgb); --bs-link-hover-color: var(--wz-accent-hover); --bs-link-hover-color-rgb: 255, 150, 51; } /* --- Regional accent overrides --- Activated by data-theme on (emitted by includes/header.php from $CONFIG['theme_accent']). Only swaps the accent tokens; the dark base palette stays the same across every deployment. */ html[data-theme="russian"] { --wz-accent: #DA291C; /* Russian flag red (Pantone 485) */ --wz-accent-hover: #EA4A3F; --wz-accent-deep: #A81A10; --wz-accent-rgb: 218, 41, 28; --wz-accent-secondary: #0039A6; /* Russian flag blue (Pantone 286) */ --wz-accent-secondary-rgb: 0, 57, 166; /* Footer band only — nav stripe removed. */ --wz-flag-stripe: linear-gradient(to right, #FFFFFF 0 33.333%, #0039A6 33.333% 66.666%, #DA291C 66.666% 100%); /* Atmosphere = blue (secondary). Accent highlights = red (primary). */ --wz-hero-glow-primary: rgba(0, 57, 166, 0.30); /* dominant blue haze below nav */ --wz-hero-glow-secondary: rgba(218, 41, 28, 0.14); /* subtle red corner accent */ --wz-section-glow: rgba(0, 57, 166, 0.10); /* blue wash on other sections */ --wz-eyebrow-bg: #0F47B5; /* solid Russian royal blue — pops on the blue-tinted sections */ --wz-eyebrow-color: #FFFFFF; } html[data-theme="polish"] { --wz-accent: #DC143C; /* Polish flag crimson */ --wz-accent-hover: #EA425F; --wz-accent-deep: #A50E2E; --wz-accent-rgb: 220, 20, 60; --wz-accent-secondary: #FFFFFF; /* Polish flag white */ --wz-accent-secondary-rgb: 255, 255, 255; /* Footer band only — nav stripe removed. */ --wz-flag-stripe: linear-gradient(to right, #FFFFFF 0 50%, #DC143C 50% 100%); /* Atmosphere = soft white. Accent highlights = crimson. */ --wz-hero-glow-primary: rgba(255, 255, 255, 0.10); /* soft white haze below nav */ --wz-hero-glow-secondary: rgba(220, 20, 60, 0.14); --wz-section-glow: rgba(255, 255, 255, 0.05); --wz-eyebrow-bg: rgba(255, 255, 255, 0.16); --wz-eyebrow-color: #FFFFFF; } /* ============================================================ Base ============================================================ */ body { font-family: var(--wz-font-primary); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-weight: 700; color: var(--wz-text); letter-spacing: -0.015em; } .fw-black { font-weight: 900; } /* Universal overflow safety — long translations (RU, DE, etc.) can push single words / long badge strings past narrow viewports. */ html, body { overflow-x: hidden; /* nothing scrolls the page horizontally */ } * { overflow-wrap: break-word; /* let long words (URLs, compounds) break */ } /* ============================================================ Components ============================================================ */ /* --- Nav --- */ .wz-nav { background-color: rgba(13, 13, 13, 0.85); border-bottom: 1px solid var(--wz-bg-border); } /* backdrop-filter creates a containing block for position:fixed descendants, which clamps the mobile Offcanvas menu to the nav's tiny box. Only apply the frosted-glass blur above the navbar breakpoint, where Offcanvas collapses to `position: static` (Bootstrap's .navbar-expand-lg override) and the issue goes away. */ @media (min-width: 992px) { .wz-nav { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } } .wz-nav .navbar-brand { font-size: 1.35rem; letter-spacing: -0.02em; color: var(--wz-text); } .wz-nav .navbar-brand:hover, .wz-nav .navbar-brand:focus { color: var(--wz-text); } .wz-nav .nav-link { color: var(--wz-text-muted); font-weight: 500; padding: 0.5rem 0.9rem; border-radius: 0.375rem; transition: color 0.15s, background-color 0.15s; } .wz-nav .nav-link:hover, .wz-nav .nav-link:focus { color: var(--wz-text); } .wz-nav .nav-link.active { color: var(--wz-text); background-color: var(--wz-bg-elevated); } .wz-nav .navbar-toggler { border-color: var(--wz-bg-border); } .wz-nav .navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(var(--wz-accent-rgb), 0.25); } /* --- Offcanvas mobile drawer --- */ .wz-offcanvas { background-color: var(--wz-bg-elevated); color: var(--wz-text); border-left: 1px solid var(--wz-bg-border); } .wz-offcanvas .offcanvas-header { border-color: var(--wz-bg-border) !important; } /* --- Eyebrow badge --- */ .wz-eyebrow { background-color: var(--wz-eyebrow-bg); color: var(--wz-eyebrow-color); font-weight: 600; letter-spacing: 0.01em; border-radius: 999px; /* Bootstrap's .badge uses white-space: nowrap; long translations (RU, DE) overflow narrow viewports. Allow wrapping and keep the pill shape. */ white-space: normal; text-align: center; max-width: 100%; } /* --- Hero --- */ .wz-hero { background: radial-gradient(ellipse at top, var(--wz-hero-glow-primary), transparent 70%), radial-gradient(ellipse at bottom left, var(--wz-hero-glow-secondary), transparent 60%), radial-gradient(ellipse at bottom right, var(--wz-hero-glow-secondary), transparent 60%), var(--wz-bg-base); border-bottom: 1px solid var(--wz-bg-border); } /* Ambient national-color wash behind every non-hero
. Transparent for default theme; blue/white for RU/PL. Uses background-image so section rules that only set background-color (like .wz-section-alt) still layer correctly. */ main > section:not(.wz-hero) { background-image: radial-gradient(ellipse at top, var(--wz-section-glow), transparent 60%), radial-gradient(ellipse at bottom, var(--wz-section-glow), transparent 60%); } /* --- Buttons --- */ .btn { border-radius: var(--bs-border-radius-sm); font-weight: 500; transition: transform 0.1s, box-shadow 0.15s, filter 0.15s, background-color 0.15s, border-color 0.15s; } .btn:active { transform: translateY(1px); } .btn-primary { background: linear-gradient(180deg, var(--wz-accent) 0%, var(--wz-accent-deep) 100%); border-color: var(--wz-accent-deep); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset, 0 2px 6px rgba(0, 0, 0, 0.25); } .btn-primary:hover, .btn-primary:focus { background: linear-gradient(180deg, var(--wz-accent-hover) 0%, var(--wz-accent) 100%); border-color: var(--wz-accent); color: #fff; filter: brightness(1.05); } .btn-primary:focus { box-shadow: 0 0 0 0.25rem rgba(var(--wz-accent-rgb), 0.35); } .btn-outline-light { border-color: rgba(255, 255, 255, 0.25); } .btn-outline-light:hover, .btn-outline-light:focus { background-color: rgba(255, 255, 255, 0.06); color: var(--wz-text); border-color: rgba(255, 255, 255, 0.4); } /* --- Cards --- */ .wz-card { background-color: var(--wz-bg-elevated); border: 1px solid var(--wz-bg-border); border-radius: 0.5rem; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; overflow: hidden; } /* Card content flex rows (title+tag headers, button footers) wrap on narrow viewports so long translations don't overflow the fixed card width. */ .wz-card .d-flex, .wz-mini-card .d-flex { flex-wrap: wrap; } .wz-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4); border-color: rgba(var(--wz-accent-rgb), 0.35); } .wz-card-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: radial-gradient(ellipse at center, rgba(var(--wz-accent-rgb), 0.08), transparent 70%), #0A0A0A; border-bottom: 1px solid var(--wz-bg-border); } .wz-card-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; transition: transform 0.4s ease; } .wz-card:hover .wz-card-thumb img { transform: scale(1.05); } /* --- Mini cards (More versions grid) --- */ .wz-mini-card { display: flex; flex-direction: column; background-color: var(--wz-bg-elevated); border: 1px solid var(--wz-bg-border); border-radius: 0.5rem; overflow: hidden; transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s; color: inherit; } .wz-mini-card:hover, .wz-mini-card:focus { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); border-color: rgba(var(--wz-accent-rgb), 0.4); color: inherit; } .wz-mini-card-thumb { aspect-ratio: 4 / 3; overflow: hidden; background: radial-gradient(ellipse at center, rgba(var(--wz-accent-rgb), 0.06), transparent 70%), #0A0A0A; border-bottom: 1px solid var(--wz-bg-border); } .wz-mini-card-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 0.75rem; transition: transform 0.4s ease; } .wz-mini-card:hover .wz-mini-card-thumb img { transform: scale(1.05); } /* --- Compare-versions teaser card --- */ .wz-compare-card { color: inherit; text-decoration: none; } .wz-compare-card:hover, .wz-compare-card:focus { color: inherit; text-decoration: none; } .wz-compare-thumb { aspect-ratio: 4 / 3; background: radial-gradient(ellipse at center, rgba(var(--wz-accent-rgb), 0.12), transparent 65%), #0A0A0A; } .wz-compare-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.5rem; padding: 1rem; height: 100%; } .wz-compare-grid img { width: 100%; height: 100%; object-fit: contain; background-color: rgba(255, 255, 255, 0.02); border: 1px solid var(--wz-bg-border); border-radius: 0.25rem; padding: 0.5rem; transition: transform 0.4s ease, border-color 0.2s; } .wz-compare-card:hover .wz-compare-grid img { border-color: rgba(var(--wz-accent-rgb), 0.35); } /* --- Dropdown (Versions nav menu) --- */ .wz-nav .dropdown-menu { --bs-dropdown-bg: var(--wz-bg-elevated); --bs-dropdown-border-color: var(--wz-bg-border); --bs-dropdown-link-color: var(--wz-text); --bs-dropdown-link-hover-bg: rgba(var(--wz-accent-rgb), 0.08); --bs-dropdown-link-hover-color: var(--wz-accent); --bs-dropdown-link-active-bg: rgba(var(--wz-accent-rgb), 0.12); --bs-dropdown-link-active-color: var(--wz-accent); --bs-dropdown-divider-bg: var(--wz-bg-border); margin-top: 0.5rem; padding: 0.5rem 0; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); min-width: 260px; } .wz-dropdown .dropdown-item { display: flex; justify-content: space-between; align-items: center; padding: 0.55rem 1rem; font-weight: 500; gap: 0.75rem; } .wz-dropdown-tag { font-size: 0.75rem; color: var(--wz-text-muted); font-weight: 400; } .wz-dropdown .dropdown-item:hover .wz-dropdown-tag, .wz-dropdown .dropdown-item:focus .wz-dropdown-tag { color: var(--wz-accent); } .wz-dropdown-cta { color: var(--wz-accent) !important; font-weight: 700 !important; } /* Dropdown-toggle caret spacing */ .wz-nav .nav-link.dropdown-toggle::after { margin-left: 0.4em; vertical-align: 0.15em; } /* --- Alt-background section --- */ .wz-section-alt { background-color: #0A0A0A; border-top: 1px solid var(--wz-bg-border); border-bottom: 1px solid var(--wz-bg-border); } /* --- Features (Why us) --- */ .wz-feature { padding: 1.5rem; background-color: var(--wz-bg-elevated); border: 1px solid var(--wz-bg-border); border-radius: 0.5rem; height: 100%; } /* --- Install steps --- */ .wz-steps { counter-reset: wz-step; } .wz-step-number { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: linear-gradient(180deg, var(--wz-accent) 0%, var(--wz-accent-deep) 100%); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; box-shadow: 0 2px 6px rgba(var(--wz-accent-rgb), 0.35); } /* --- Accordion (dark theme) --- */ .accordion { --bs-accordion-bg: var(--wz-bg-elevated); --bs-accordion-color: var(--wz-text); --bs-accordion-border-color: var(--wz-bg-border); --bs-accordion-btn-color: var(--wz-text); --bs-accordion-btn-bg: var(--wz-bg-elevated); --bs-accordion-btn-focus-border-color: var(--wz-accent); --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--wz-accent-rgb), 0.20); --bs-accordion-active-bg: var(--wz-bg-elevated); --bs-accordion-active-color: var(--wz-accent); --bs-accordion-body-color: var(--wz-text); } .accordion-button { font-weight: 500; } .accordion-button::after { filter: invert(0.8) sepia(0) saturate(0); } .accordion-button:not(.collapsed)::after { filter: invert(0.6) sepia(1) saturate(4) hue-rotate(-10deg); } /* --- Footer --- */ .wz-footer { background-color: #0A0A0A; border-top: 1px solid var(--wz-bg-border); position: relative; /* positioning context for the flag stripe pseudo */ } .wz-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--wz-flag-stripe); pointer-events: none; } .wz-footer-link { color: var(--wz-text-muted); transition: color 0.15s; } .wz-footer-link:hover, .wz-footer-link:focus { color: var(--wz-accent); } /* --- Article prose --- */ .wz-prose { color: var(--wz-text); font-size: 1.05rem; } .wz-prose h1, .wz-prose h2, .wz-prose h3 { margin-top: 2rem; margin-bottom: 1rem; } .wz-prose h1 { font-size: 2rem; } .wz-prose h2 { font-size: 1.5rem; } .wz-prose h3 { font-size: 1.25rem; } .wz-prose p, .wz-prose ul, .wz-prose ol { margin-bottom: 1.25rem; } .wz-prose a { color: var(--wz-accent); text-decoration: underline; text-decoration-color: rgba(var(--wz-accent-rgb), 0.4); text-underline-offset: 3px; } .wz-prose a:hover, .wz-prose a:focus { color: var(--wz-accent-hover); text-decoration-color: var(--wz-accent-hover); } .wz-prose code { background-color: var(--wz-bg-elevated); padding: 0.15em 0.4em; border-radius: 0.25rem; font-size: 0.9em; color: var(--wz-accent); border: 1px solid var(--wz-bg-border); } .wz-prose pre { background-color: var(--wz-bg-elevated); border: 1px solid var(--wz-bg-border); padding: 1rem; border-radius: 0.5rem; overflow-x: auto; } .wz-prose pre code { background: transparent; padding: 0; border: 0; color: var(--wz-text); } .wz-prose img { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 1.5rem 0; } .wz-prose blockquote { border-left: 3px solid var(--wz-accent); padding-left: 1rem; color: var(--wz-text-muted); margin: 1.5rem 0; } .wz-prose hr { border-color: var(--wz-bg-border); margin: 2.5rem 0; opacity: 1; } /* --- Selection --- */ ::selection { background-color: var(--wz-accent); color: #fff; } /* ============================================================ Global polish ============================================================ */ /* --- Smooth in-page scroll (respects reduced-motion) --- */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Anchor targets sit below the sticky nav (~62px) plus a little breathing room. */ :target { scroll-margin-top: 80px; } /* --- Scrollbar (accent-tinted, theme-aware) --- */ /* WebKit / Blink: Chrome, Edge, Safari */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: #050505; /* slightly darker than --wz-bg-base for depth */ } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(var(--wz-accent-rgb), 0.65), rgba(var(--wz-accent-rgb), 0.40)); border: 3px solid #050505; /* thin gutter around the thumb */ border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--wz-accent), rgba(var(--wz-accent-rgb), 0.70)); } ::-webkit-scrollbar-thumb:active { background: var(--wz-accent); } ::-webkit-scrollbar-corner { background: #050505; } /* Firefox */ html { scrollbar-color: rgba(var(--wz-accent-rgb), 0.6) #050505; scrollbar-width: thin; } /* --- Focus ring (keyboard nav only) --- */ :focus-visible { outline: 2px solid var(--wz-accent); outline-offset: 2px; } /* Bootstrap components already ship their own focus box-shadow. */ .btn:focus-visible, .accordion-button:focus-visible, .dropdown-item:focus-visible, .navbar-toggler:focus-visible { outline: none; } /* --- Section heading underline (small accent bar under centered H2s) --- */ section .text-center > h2::after { content: ""; display: block; width: 64px; height: 3px; margin: 0.75rem auto 0; background: var(--wz-accent); border-radius: 999px; } /* --- Recommended card highlight (the primary/big card in #download row) --- */ #download .wz-card:not(.wz-compare-card) { border-color: rgba(var(--wz-accent-rgb), 0.40); box-shadow: 0 0 32px rgba(var(--wz-accent-rgb), 0.10); } #download .wz-card:not(.wz-compare-card):hover { border-color: rgba(var(--wz-accent-rgb), 0.65); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.40), 0 0 40px rgba(var(--wz-accent-rgb), 0.18); }