/* ============================================================ 41shots global styles ============================================================ */ /* --- Webfonts --- Manrope (body) and Oswald (display) are vendored under SIL Open Font License 1.1. Source files come from @fontsource-variable/{manrope,oswald} and live in /public/fonts. We keep latin + latin-ext only -- enough for every western and central-european player name; cyrillic/greek are skipped to keep first-paint cheap. Variable-axis files cover every weight in one request, so swapping between 400 and 700 needs no extra download. License files alongside the WOFF2s (manrope-OFL.txt, oswald-OFL.txt). */ @font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 200 800; src: url('/public/fonts/manrope-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 200 800; src: url('/public/fonts/manrope-latin-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Oswald'; font-style: normal; font-display: swap; font-weight: 200 700; src: url('/public/fonts/oswald-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Oswald'; font-style: normal; font-display: swap; font-weight: 200 700; src: url('/public/fonts/oswald-latin-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* `[hidden]` should always remove the element from layout. Without `!important` any class with an explicit `display` (e.g. `display: flex`) wins on cascade order and the element stays visible while toggled "hidden" from JS. Standard CSS-reset entry, see HTML5 Boilerplate. */ /* stylelint-disable-next-line declaration-no-important */ [hidden] { display: none !important; } /* --- Icon system --- */ .icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; flex-shrink: 0; } .icon--sm { width: 0.85em; height: 0.85em; } .icon--lg { width: 1.3em; height: 1.3em; } .icon--xl { width: 1.6em; height: 1.6em; } /* Hides the inline SVG sprite definition at the top of . Was `style="display:none"` until Tier-3 CSP hardening replaced it with a class -- strict `style-src 'self'` on /staff/* forbids inline styles. */ .icon-sprite { display: none; } /* The :root token block is the single source of truth for all colours, surface tints, shadows, borders. Hex and rgba(255,255,255,*) / rgba(0,0,0,*) are intentionally allowed *here only*; the rest of the file must reach for these tokens via var(--...). */ /* stylelint-disable color-no-hex, declaration-property-value-disallowed-list */ :root { --bg: #090909; --red: #e03535; --text: #efefef; --text-muted: #a0a0a0; --text-dim: #686868; /* Transparent text colours for content over tinted backgrounds (popups, tooltips, overlays). Unlike the solid --text / --text-muted tokens, these mix with whatever surface sits below, which is what gives leaflet popups and POI panels their lifted look. Migrated from a dozen 0.3-0.9 alpha micro-variants. */ --text-overlay-dim: rgba(255,255,255,0.35); --text-overlay-muted: rgba(255,255,255,0.6); --text-overlay-strong: rgba(255,255,255,0.88); --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Radius scale -- five tokens cover every shape we draw. sm subtle box rounding (stat-bars, heatmap cells, mini-pills) md mid box rounding (search-results, tooltips, list items) lg card rounding (KPI cards, hero blocks, main panels) full perfect circle (dots, avatars, round markers) pill capsule with semicircle caps (badges, buttons, role-pills) */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 50%; --radius-pill: 999px; /* Z-index scale -- eight named tiers replace nine raw values that drifted into similar but slightly different numbers (1000 vs 1001 and so on). Each tier has a clear job; gaps between tiers leave room for future intermediate layers without renumbering. The nav sits above the map-control tier so descendants in the nav's stacking context (e.g. the user-menu dropdown) can render over the map sidebar -- otherwise the dropdown was clipped behind it on /map. */ --z-base: 1; /* hovered/focused element within local stack */ --z-overlay: 10; /* in-component floating control (lightbox nav) */ --z-popover: 20; /* small dropdown / search results overlay */ --z-map-layer: 1000; /* map sidebars + active markers */ --z-map-control:1010; /* map toolbars, legends, map-side controls */ --z-nav: 1100; /* sticky nav, tooltip flyouts */ --z-float: 1500; /* pinned floating CB-radio window (above nav, below modal) */ --z-modal: 2000; /* lightbox, full-page search results */ /* Sizing scale for marker dots, avatars and icons. One scale covers all three because they share the same physical px steps in the design; the semantics live in the selector name (.foo__dot vs .foo-avatar vs .foo-icon), not in the token. Drift values like 7px / 9px / 12px collapsed onto the nearest step. */ --size-xs: 8px; /* small dots (badge, live, list, chip) */ --size-sm: 10px; /* standard map markers, default dots */ --size-md: 14px; /* active markers, small avatars, sort icons */ --size-lg: 16px; /* selected markers, search-icon, follow */ --size-xl: 18px; /* close-icon, small-avatar (hall-of-fame links) */ --size-2xl: 22px; /* prominent nav-icon (lightbox) */ --size-3xl: 28px; /* small avatars */ --size-4xl: 32px; /* circular button (map-tb-chip, econ-sort-dir) */ --size-5xl: 44px; /* medium avatars */ --size-6xl: 64px; /* hero avatars */ /* Transition durations -- four-step ladder replacing nine drifted values. Most hovers used 0.15s (base); the strays at 0.12 / 0.22 / 0.25 / 0.3 / 0.4 were tiny inconsistencies that nobody picked on purpose. fast = press feedback, base = default hover, slow = larger element changes, animate = fade-in / longer movements. */ --motion-fast: 0.1s; --motion-base: 0.15s; --motion-slow: 0.2s; --motion-animate: 0.35s; --nav-h: 58px; /* --- Type tokens -- Hybrid scale --- Body uses comfortable 15.2px for prose, headlines, cards. Data-dense surfaces (tables, sidebars, KPI sub-rows) read --fs-dense which stays pinned at 12.5px so list-heavy pages keep their information density. Pages migrate from hardcoded font-size values to these tokens one at a time. Until that migration completes, hardcodes win. */ --fs-xs: 0.72rem; /* 11.5px -- micro labels, tags */ --fs-sm: 0.82rem; /* 13.1px -- secondary text */ --fs-base: 0.95rem; /* 15.2px -- body, paragraphs, card content */ --fs-md: 1.10rem; /* 17.6px -- card titles, form input */ --fs-lg: 1.35rem; /* 21.6px -- KPI value, sub-heading */ --fs-xl: 1.75rem; /* 28px -- detail page title */ --fs-2xl: 2.40rem; /* 38.4px -- hero / page title */ --fs-dense: 0.78rem; /* 12.5px -- tables, sidebars, dense data UIs */ --fw-regular: 400; --fw-medium: 600; --fw-bold: 700; --fw-hero: 800; --lh-tight: 1.18; --lh-body: 1.58; /* --- Font tokens --- --font-body / --font-display split lets pages set headline-vs-body family in one place. */ --font-body: 'Manrope', var(--font); --font-display: 'Oswald', 'Impact', 'Arial Narrow', sans-serif; /* Page-width tiers (see .page / .page--wide / .map-page below): content = reading-focused pages (Rules, Support, Home, 41PD) dashboard = data-focused pages (Statistics, Economy, Housing, Newspaper, Gallery) */ --max-w-content: 1160px; --max-w-dashboard: 1600px; /* Role colours -- single source of truth, used by: .role-pill, .resident-tile__role-dot, .map-player__role, and the residents-page filter buttons (data-filter="..."). Transparent backgrounds/borders are derived via color-mix so a palette change here propagates everywhere automatically. */ --role-admin: #FFD23F; --role-police: #1E5BFF; --role-enthusiast: #22E6C9; --role-none: #4E9F3D; /* Map-marker colours for non-player buildings. The marker background stays constant; status info (e.g. housing expiry) is conveyed via text colour next to the marker, not through the marker itself. */ --map-housing: #4E9F3D; --map-poi: #deb204; /* Active wildfire markers on the map and the matching heat-slider / heat-mode controls in the sidebar. Distinct from --status-orange (#ff9800) which is an informational tone -- fire has more red so it reads as "danger / heat" rather than "warning / pending". --fire-extinguished is the cool blue used for already-put-out fire markers, so the two states read as opposites at a glance. */ --fire: #ff5500; --fire-extinguished: #4090ff; /* Player-track route visualisation (route-toggle button and matching map-legend swatch). Kept distinct from --role-police so an active route never looks like a police marker. Material Blue 500. */ --route: #2196f3; /* Status colours for KPI labels and tabular state badges. Used by the housing page expiry buckets and the "available" highlight. Reusing --red for danger keeps the brand-red consistent everywhere. --status-muted is a 20% white overlay for inactive/zero states (e.g. a town with no payment bonus, a row whose status no longer applies). Lives in the status family because that is how callers reach for it -- data-status="muted" sits alongside red/orange/etc. */ --status-red: var(--red); --status-orange: #ff9800; --status-yellow: var(--map-poi); --status-green: #4caf50; --status-muted: rgba(255, 255, 255, 0.2); /* Motor Town skill class colours. Bewusste Duplikation mit src/public/skills.js (which exports them for JS-side colour math via dimHex()); keep both in sync on retune. CSP forbids inline style="--accent:..." so CSS-side consumers reach these via the [data-skill="CL_X"] selector family further down in this file. Police bleibt bewusst Blau aber NICHT identisch zu --role-police -- the role pill tints differently on purpose, see project_skill_colors memory. */ --skill-driver: #A1A1AA; --skill-taxi: #EAB308; --skill-bus: #22C55E; --skill-truck: #C2410C; --skill-racer: #EF4444; --skill-wrecker: #D97706; --skill-police: #3B82F6; /* Third-party brand colours, used by .badge--* on the home page. Kept separate from role/map tokens because they belong to external brands and must not drift when our own palette is retuned. */ --brand-motortown: #deb204; --brand-discord: #5865f2; --brand-steam: #66c0f4; /* Movement-track heatmap palette: shared by the map track polyline (drawn from JS in map-app.js trackColor()) and the legend bar in the sidebar. JS reads these via getComputedStyle so any retune here propagates to both the line and the legend automatically. */ --heat-cold: #3c50b4; --heat-cool: #00aad2; --heat-mid: #3cc83c; --heat-warm: #f0c800; --heat-hot: #ff5000; /* Surface tints and borders for cards, container blocks and overlays. Five tokens replace ~280 hardcoded rgba(255,255,255,X) variants that had drifted into 0.01-step micro-differences without visible intent. surface-1/2/3 climb in elevation (quiet base, raised, active); border-soft/strong pair with them. */ --surface-1: rgba(255,255,255,0.04); --surface-2: rgba(255,255,255,0.06); --surface-3: rgba(255,255,255,0.10); --border-hairline: rgba(255,255,255,0.06); --border-soft: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14); --border-emphasis: rgba(255,255,255,0.25); /* Shadow tokens layered by how far the element sits from the page. The previous code had ~10 micro-variants (0.22 vs 0.25, 0.4 vs 0.45) which were drift, not intent. card sits on the page, popup floats above small dropdowns/markers, modal stacks over the whole page. highlight-top tiers are the 1px inner-top accent: base is the hairline used on quiet surfaces, mid is the standard for cards and buttons, strong is the brighter hover state. */ --shadow-card: 0 4px 24px rgba(0,0,0,0.22); --shadow-popup: 0 2px 10px rgba(0,0,0,0.45); --shadow-modal: 0 8px 28px rgba(0,0,0,0.55); --shadow-button: 0 1px 3px rgba(0,0,0,0.3); --shadow-highlight-top: inset 0 1px 0 rgba(255,255,255,0.06); --shadow-highlight-top-mid: inset 0 1px 0 rgba(255,255,255,0.12); --shadow-highlight-top-strong: inset 0 1px 0 rgba(255,255,255,0.18); /* Dark glass overlay used by popups, tooltips, sidebars, modal backdrops and any other floating surface that sits on top of the page or the map. One token covers all of them because on the normal --bg the difference between 0.85 and 0.96 is invisible; on the map both still feel like "frosted glass". The sticky-nav and map-search input use a lower-alpha override directly with a stylelint-disable next to them -- they need the underlying page to bleed through their backdrop-filter, which this token does not. */ --surface-overlay: rgba(9,9,9,0.92); /* Map glow: same visual concept (a soft dark halo) applied via two different CSS properties so map markers (box-shadow) and labels /direction arrows (text-shadow) keep parity. Bumped from the old 0.6 / 0.8 alphas because both were too faint on bright satellite tiles (beach, asphalt) where the markers used to wash out. */ --map-glow-box: 0 0 6px rgba(0,0,0,0.85); --map-glow-text: 0 0 6px rgba(0,0,0,0.85); /* Backdrop scrim for modal overlays. Bewusst NICHT aus --surface-* gemischt: Backdrops haben eine eigene Bedeutung (sie verdunkeln den Inhalt darunter, statt selbst Inhalt zu zeigen) und sollen nicht die Surface-Skala beerben. Eigener Token statt zusaetzlicher stylelint-disable an jeder Modal-Stelle. */ --scrim: rgba(0,0,0,0.6); /* Tow distress-call colour. One tone for the whole tow family -- the specific reason is conveyed by the icon, not by a per-reason hue. The --tow-reason-* tokens are kept as aliases so existing consumers (REASON_META in garage-tow-app.js, the radio swatches in the modal) keep working without a sweep; flip the alias values here if you ever want per-reason tones back. */ --tow-marker: #E08A3A; --tow-reason-stuck: var(--tow-marker); --tow-reason-flipped: var(--tow-marker); --tow-reason-out-of-fuel: var(--tow-marker); } /* stylelint-enable color-no-hex, declaration-property-value-disallowed-list */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Anchors the rem unit; every --fs-* token resolves against this base. scrollbar-gutter reserves the vertical scrollbar's space even on pages that fit the viewport without scrolling -- without it, the nav and centred content jump sideways by ~8px when switching from a long page (scrollbar present) to a short page (scrollbar gone). */ /* stylelint-disable-next-line declaration-property-value-allowed-list */ html { font-size: 16px; scroll-behavior: smooth; scrollbar-gutter: stable; } html:has(.map-page) { overflow: hidden; } body { background: var(--bg); color: var(--text); font-family: var(--font-body, var(--font)); line-height: 1.65; min-height: 100vh; } a { color: var(--red); text-decoration: none; } a:hover { color: var(--text); } img { display: block; max-width: 100%; } ul { list-style: none; } /* ============================================================ Navigation ============================================================ */ .nav { position: sticky; top: 0; z-index: var(--z-nav); height: var(--nav-h); /* Sticky nav lets the page below bleed through so scrolled content is faintly visible behind it -- backdrop-filter only works when the surface is partially transparent. --surface-overlay (0.92) would block too much; the dedicated low-alpha value lives here. */ /* stylelint-disable-next-line declaration-property-value-disallowed-list */ background: rgba(9,9,9,0.72); border-bottom: 1px solid var(--border-hairline); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); } .nav__inner { max-width: var(--max-w-content); margin: 0 auto; padding: 0 1.5rem; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .nav__logo { display: flex; align-items: center; flex-shrink: 0; } .nav__logo-img { height: 36px; width: auto; display: block; mix-blend-mode: screen; } .nav__links { display: flex; align-items: center; gap: 0.1rem; } .nav__link { padding: 0.36rem 0.8rem; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted); border: 1px solid transparent; transition: color var(--motion-base), background var(--motion-base), border-color var(--motion-base); } .nav__link:hover { color: var(--text); background: var(--surface-2); } .nav__link.active { color: color-mix(in srgb, var(--red) 55%, white); background: color-mix(in srgb, var(--red) 10%, transparent); border-color: color-mix(in srgb, var(--red) 22%, transparent); } /* Auth slot in the top nav. Sits to the right of .nav__links and shows either the user chip (avatar + name + Log-out button) or the Sign-in-with-Steam CTA. Sign-in and Log-out share .btn .btn--compact so the brand-red CTA palette stays consistent with Gallery/Newspaper/ Ko-fi. Steam branding lives in the icon, not the colour. */ .nav__auth { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .nav__user { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); max-width: 14rem; text-decoration: none; transition: color var(--motion-base); } a.nav__user:hover { color: var(--text); } .nav__user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Avatar element shared between img, initial-bubble and logo-fallback. 28px matches the .btn--compact height so the chip aligns with the Log-out button to its right. */ .nav-avatar { display: inline-flex; align-items: center; justify-content: center; width: var(--size-3xl); height: var(--size-3xl); border-radius: var(--radius-full); background: var(--surface-2); border: 1px solid var(--border-soft); object-fit: cover; flex-shrink: 0; overflow: hidden; } /* stylelint-disable-next-line declaration-property-value-allowed-list */ .nav-avatar--bubble { font-size: 0.85rem; font-weight: var(--fw-bold); color: var(--text); } .nav-avatar--logo { color: var(--text-muted); } .nav-avatar--logo .icon { width: 1rem; height: 1rem; } /* User-chip dropdown. The chip itself is a