/* --------------------------------------------- Proton Pulse - shared design system Identity: Steam Deck navy + atom orbital motif + cyberpunk polish Palette pulls from store.steampowered.com (link blue, install green) --------------------------------------------- */ /* Google Fonts: Space Grotesk for display, Inter for body, JetBrains Mono for stats/code */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&family=Space+Grotesk:wght@500;600;700&display=swap'); :root { /* surfaces - deep Steam navy gradient stack */ --bg: #0b1116; --bg-top: #0b1116; --bg-bot: #131c26; --s1: #131c26; --s2: #1b2838; /* Steam store main panel */ --s3: #2a475e; /* Steam store card raised */ --border: #1f3346; --border2: #2f4a63; /* text */ --text: #c7d5e0; /* Steam body text */ --strong: #ffffff; --muted: #67788c; /* identity accents blue is primary (Steam links), green is the "alive / compatible" pop, magenta is the cyberpunk punctuation - used sparingly for glows only */ --accent: #66c0f4; --accent-hi: #aedcff; --accent-soft: rgba(102, 192, 244, 0.16); --accent-glow: rgba(102, 192, 244, 0.45); --green: #a4d007; /* Steam install button green */ --green-hi: #beee11; --green-glow: rgba(190, 238, 17, 0.35); --magenta: #ff3aa5; --magenta-glow: rgba(255, 58, 165, 0.35); /* tiers (kept for compat across pages) */ --gold: #ffc83d; --silver: #c0c8d2; --bronze: #c08858; --red: #ff5566; /* type */ --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", "SF Mono", "Consolas", "Liberation Mono", monospace; /* layout */ --sidebar-w: 260px; /* legacy, kept until all pages migrate off sidebar */ --banner-h: 46px; /* identity strip - tighter to drop vertical padding */ --nav-h: 44px; /* functional nav row underneath */ /* layout tokens (must stay in :root, not in a theme override, since they control structural dimensions that don't change between light/dark) */ --topnav-h: calc(var(--banner-h) + var(--nav-h)); --content-max: 1440px; --content-pad: clamp(16px, 3.2vw, 48px); color-scheme: dark; } /* ── Light theme override ───────────────────────────────────────────── Flipped by adding data-theme="light" on . Only COLOR tokens live here - layout tokens stay in :root since they don't change between themes. */ [data-theme="light"] { --bg: #f0f2f5; --bg-top: #e8ecf0; --bg-bot: #f5f7fa; --s1: #ffffff; --s2: #e9edf2; --s3: #dde3ea; --border: #d0d7de; --border2: #b8c2cc; --text: #2c3e50; --strong: #0a0c10; /* muted text must clear WCAG AA (>=4.5:1) on the light surfaces; the old #6b7d8f only hit ~4.2 on white and worse on tinted cards (#13) */ --muted: #556577; /* accent doubles as link text; #1a73e8 was 4.02 on the page bg (fails AA). #1668cf clears AA on bg/s1/s2 while staying the same blue family (#13) */ --accent: #1668cf; --accent-hi: #0d47a1; --accent-soft: rgba(26, 115, 232, 0.12); --accent-glow: rgba(26, 115, 232, 0.25); --green: #2e7d32; --green-hi: #357a38; --green-glow: rgba(46, 125, 50, 0.25); --magenta: #c2185b; --magenta-glow: rgba(194, 24, 91, 0.25); /* tier colors are used only as text in CSS (tier pills get their fill from the JS RATING_COLORS map, not these vars), so darken them for AA (#13) */ --gold: #8f6508; --silver: #586b7b; --bronze: #7d6355; --red: #c62828; color-scheme: light; } /* ── Light theme: fix hardcoded backgrounds across all pages ────────── Many page-specific styles use literal rgba() dark values instead of var(--tokens). Until those get refactored to use tokens, we override the most common hardcoded patterns here. The list looks long because every page (stats, scoring, coverage, app, index) has its own dark surface classes that need flipping */ [data-theme="light"] body { background: linear-gradient(180deg, var(--bg-top), var(--bg-bot)); color: var(--text); } /* Topbar stays dark in light mode (brand identity reads best on dark canvas). CRITICAL: force nav link colors to stay light since --accent/--accent-hi flip to dark blue in light mode, making them invisible on the dark nav */ [data-theme="light"] .topbar-banner { background: linear-gradient(180deg, #2a3a4a, #1b2838); } [data-theme="light"] .topbar-nav { background: rgba(42, 58, 74, 0.95); } [data-theme="light"] .topnav-links > a { color: #8fa8c4; } [data-theme="light"] .topnav-links > a:hover { color: #e8f4ff; background: rgba(102, 192, 244, 0.1); } [data-theme="light"] .topnav-links > a.active { color: #aedcff; border-bottom-color: #66c0f4; background: linear-gradient(180deg, transparent, rgba(102, 192, 244, 0.12)); } [data-theme="light"] .topbar-search-wrap input { background: rgba(11, 17, 22, 0.4); border-color: rgba(102, 192, 244, 0.3); color: #e8f4ff; } [data-theme="light"] .topbar-search-wrap input::placeholder { color: #8fa8c4; } [data-theme="light"] .topbar-search-icon { color: #8fa8c4; } [data-theme="light"] .banner-icon-link, [data-theme="light"] .theme-toggle { color: #8fa8c4; } [data-theme="light"] .banner-icon-link:hover, [data-theme="light"] .theme-toggle:hover { color: #e8f4ff; } [data-theme="light"] .auth-link { color: #8fa8c4 !important; } [data-theme="light"] .auth-link:hover { color: #e8f4ff !important; } /* Overflow MORE button + panel keep the dark nav styling */ [data-theme="light"] .nav-overflow-toggle { color: #8fa8c4; } [data-theme="light"] .nav-overflow-toggle:hover { color: #e8f4ff; } [data-theme="light"] .nav-overflow-panel { background: #1b2838; border-color: #66c0f4; } [data-theme="light"] .nav-overflow-panel > a { color: #8fa8c4; } [data-theme="light"] .nav-overflow-panel > a:hover { color: #e8f4ff; background: rgba(102,192,244,0.08); } [data-theme="light"] .nav-overflow-panel > a.active { color: #aedcff; } /* Card/tile surfaces that use hardcoded dark gradients */ [data-theme="light"] .source-summary-tile, [data-theme="light"] .stat-tile, [data-theme="light"] .chart-card, [data-theme="light"] .card, [data-theme="light"] .config-card, [data-theme="light"] .card-summary, [data-theme="light"] .retest-callout, [data-theme="light"] .framegen-headline { background: var(--s1) !important; border-color: var(--border); } /* The inner panels/details that used rgba(11,17,22,...) */ [data-theme="light"] .all-details-panel, [data-theme="light"] .filter-panel, [data-theme="light"] .info-tooltip-inner, [data-theme="light"] .nav-overflow-panel { background: var(--s1); border-color: var(--border); } /* Signal icon neutral state: was dark bg that vanishes on light surface */ [data-theme="light"] .signal-icon.signal-neutral { background: var(--s2); border-color: var(--border); opacity: 0.6; } [data-theme="light"] .signal-icon { border-color: var(--border); } /* Author avatar area */ [data-theme="light"] .author-avatar { background: var(--s2); border-color: var(--border); color: var(--accent); } /* Game header needs the left accent border to stay visible */ [data-theme="light"] .game-header { background: var(--s1); border-color: var(--border); } /* Hub link buttons */ [data-theme="light"] .hub-link { background: var(--s1); border-color: var(--border); color: var(--text); } [data-theme="light"] .hub-link:hover { background: var(--s2); border-color: var(--accent); } /* Scoring page: matrix grid cells */ [data-theme="light"] .matrix-cell, [data-theme="light"] .matrix-row-head { background: var(--s1); border-color: var(--border); } [data-theme="light"] .matrix-cell strong { color: var(--strong); } [data-theme="light"] .matrix-cell span { color: var(--muted); } /* Scenario cards on scoring page */ [data-theme="light"] .scenario-card { background: var(--s1) !important; border-color: var(--border); } /* Stats page: filter chips/buttons + sparkline card */ [data-theme="light"] .filter-button, [data-theme="light"] .filter-check:hover, [data-theme="light"] .chip { background: var(--s1); border-color: var(--border); } /* Index page hero - keep it dark since the brand identity lives there */ /* (hero gradient + atom SVG look best on the dark canvas) */ /* Coverage / data-index table rows */ [data-theme="light"] .config-hw, [data-theme="light"] .weight-group, [data-theme="light"] .confidence-group, [data-theme="light"] .os-fam { background: var(--s2); border-color: var(--border); } /* Source summary details panel divider */ [data-theme="light"] .ss-details { border-left-color: var(--border); } /* Freshness + stat strip text */ [data-theme="light"] .source-summary-freshness, [data-theme="light"] .source-summary-stats, [data-theme="light"] .source-summary-meta, [data-theme="light"] .source-summary-note { color: var(--muted); } [data-theme="light"] .source-summary-freshness strong, [data-theme="light"] .source-summary-stats strong { color: var(--strong); } /* Vote buttons + action buttons */ [data-theme="light"] .vote-btn { border-color: var(--border); color: var(--muted); } [data-theme="light"] .action-btn { background: var(--s1); } /* Scoring page: scenario tag + example lines + flow blocks */ [data-theme="light"] .scenario-tag { background: var(--s2); border-left-color: var(--accent); color: var(--text); } [data-theme="light"] .example-lines code { background: var(--s2); border-color: var(--border); color: var(--text); } [data-theme="light"] .flow { background: var(--s2); border-color: var(--border); color: var(--text); } [data-theme="light"] .flow .branch { color: var(--accent); } [data-theme="light"] .flow .verdict { color: #2e7d32; } [data-theme="light"] .flow .borked { color: #e53935; } /* Index page: feature cards have hardcoded dark gradients */ [data-theme="light"] .feature-card, [data-theme="light"] .feature-cards > div { background: var(--s1) !important; border-color: var(--border); color: var(--text); } [data-theme="light"] .feature-card p, [data-theme="light"] .feature-cards > div p { color: var(--muted); } /* Mobile drawer stays dark (matches the topbar so the drawer feels like a continuation of the header). Text at #e8f4ff (near-white) on the deep navy surface reads as calm high-contrast; icons at #66c0f4 stay consistent across every row (direct links AND accordion parents) so the eye stops picking up subtle icon-color mismatches. */ [data-theme="light"] .mobile-nav-drawer { background: #1b2838; } [data-theme="light"] .mobile-nav-drawer a { color: #e8f4ff; } [data-theme="light"] .mobile-nav-drawer a:hover { color: #ffffff; } [data-theme="light"] .mobile-nav-drawer a.active { color: #ffffff; background: rgba(102, 192, 244, 0.16); } [data-theme="light"] .mobile-nav-drawer a .nav-icon, [data-theme="light"] .mnav-parent .nav-icon { color: #66c0f4; } /* Accordion parent rows (Browse / Resources) inherit var(--text) which flips to #2c3e50 in light mode -- invisible on the dark drawer. Same near-white contrast as the direct drawer links so parent + child rows read as peers. */ [data-theme="light"] .mnav-parent { color: #e8f4ff; } [data-theme="light"] .mnav-caret { color: #66c0f4; } [data-theme="light"] .mnav-sub { background: rgba(0, 0, 0, 0.28); } /* Hamburger toggle button in the topbar inherits var(--text) which flips to near-black in light mode. Force the same #c7d5e0 the rest of the topbar uses so the 3 lines stay visible on the dark navy header. */ [data-theme="light"] .topbar-mobile-toggle { color: #c7d5e0; } [data-theme="light"] .topbar-mobile-toggle:hover { color: #66c0f4; } /* Topbar lockup: .topbar-brand + .topbar-brand-text pull from var(--strong) which flips to near-black in light mode; on the dark topbar that reads as invisible. Force Steam body-text color and rework the "PULSE" gradient to a sky-blue -> green stop that reads on the dark navy topbar. */ [data-theme="light"] .topbar-brand, [data-theme="light"] .topbar-brand:hover, [data-theme="light"] .topbar-brand-text { color: #c7d5e0; } [data-theme="light"] .topbar-brand-text .brand-accent { background: linear-gradient(90deg, #66c0f4, #7fdaa2); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="light"] .topbar-brand-tag { color: #8fa8c4; border-left-color: rgba(102, 192, 244, 0.3); } /* Search dropdown drops down from the dark topbar; keep the dark surface for continuity but force the text colors to the same Steam-body palette so results are readable in light mode (var(--text) flipped to dark blue and went invisible on the dark card). */ [data-theme="light"] .search-dropdown { background: linear-gradient(180deg, rgba(30, 41, 55, 0.98), rgba(19, 28, 38, 0.98)); border-color: rgba(102, 192, 244, 0.35); } [data-theme="light"] .search-dropdown a { color: #e8f4ff; border-bottom-color: rgba(102, 192, 244, 0.12); } [data-theme="light"] .search-dropdown a:hover, [data-theme="light"] .search-dropdown a.is-focused { color: #ffffff; background: rgba(102, 192, 244, 0.16); } [data-theme="light"] .search-dropdown .sd-title { color: #ffffff; } [data-theme="light"] .search-dropdown .sd-appid, [data-theme="light"] .search-dropdown .sd-meta { color: #a8c1dd; } /* Confidence breakdown page */ [data-theme="light"] .cb-header { background: var(--s1); border-color: var(--border); } [data-theme="light"] .cb-factors { background: var(--border); } [data-theme="light"] .cb-factor { background: var(--s1); } [data-theme="light"] .cb-formula { background: var(--s2); border-color: var(--border); } [data-theme="light"] .cb-disclaimer { background: rgba(249, 168, 37, 0.08); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Enforce hidden attribute — CSS display rules can override it otherwise */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { background: radial-gradient(1200px 600px at 80% -10%, rgba(102, 192, 244, 0.08), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(190, 238, 17, 0.05), transparent 60%), linear-gradient(180deg, var(--bg-top), var(--bg-bot)); background-attachment: fixed; color: var(--text); font: 15px/1.6 var(--font-body); font-feature-settings: "ss01", "cv11"; min-height: 100vh; position: relative; overflow-x: hidden; } /* scanline + grain overlay - keeps it textured, never loud */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0px, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 3px); mix-blend-mode: overlay; opacity: 0.6; } /* keep real content above the overlay */ .topbar, .main-content { position: relative; z-index: 2; } .topbar { z-index: 200; } /* legacy sidebar: hide for pages that still have the markup so they don't double-render */ .sidebar-nav, .sidebar-overlay { display: none !important; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code { font-family: var(--mono); font-size: 0.88em; background: rgba(255,255,255,0.05); border: 1px solid var(--border); padding: 1px 5px; } /* "Box art unavailable" placeholder. Rendered by steam-img.js in place of a broken image slot once every source in the fallback chain has failed, for any store. Keeps the failed element's layout classes so it fills the same slot; this rule supplies the visible missing-state chrome. */ .boxart-missing { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 120px; box-sizing: border-box; padding: 14px; text-align: center; color: var(--muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.015) 0 12px, rgba(255, 255, 255, 0.05) 12px 24px); border: 1px dashed var(--border2); border-radius: 6px; } .boxart-missing-icon { opacity: 0.55; }