/* * GameRStar News — Global design tokens * Loaded sitewide, first in the gsn-* cascade, so every later stylesheet can * consume these custom properties instead of hardcoding values. */ :root { /* Color */ --color-bg-primary: #0a0e17; --color-bg-secondary: #151922; --color-bg-elevated: #1c212c; --color-text-primary: #ffffff; --color-text-secondary: #9ca3af; --color-text-muted: #6b7280; --color-accent: #fbbf24; --color-accent-hover: #ffcc33; --color-border: #1f242e; --color-bg-primary-rgb: 10, 14, 23; /* Typography */ --font-display: 'Inter', 'Sora', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-size-h1: clamp( 48px, 5vw, 64px ); --font-size-h2: clamp( 32px, 3.5vw, 40px ); --font-size-h3: clamp( 20px, 2vw, 24px ); --font-size-body: 16px; --font-size-caption: 13px; --line-height-heading: 1.1; --line-height-body: 1.55; --letter-spacing-caps: 0.04em; /* Spacing (base 8px) */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-6: 48px; --space-8: 64px; --space-12: 96px; --space-16: 128px; --card-padding: 24px; --grid-gap: 24px; /* Radius */ --radius-card: 10px; --radius-button: 6px; /* Shadow */ --shadow-card: 0 4px 12px rgba( 0, 0, 0, 0.3 ); --shadow-card-hover: 0 20px 40px rgba( 0, 0, 0, 0.5 ); } /* * Applies the design system to the page background itself. `!important` is * required here: the site's Additional CSS (Customizer) is stored in the * database and always renders last in (after every enqueued * stylesheet), so it wins the cascade on a same-specificity `body` rule * regardless of load order. This can't be fixed from the DB side, so we * override it the same way other components in this theme already do. */ html, body { background-color: var( --color-bg-primary ) !important; color: var( --color-text-primary ); } /* Locks background scroll while the mobile nav drawer is open. */ body.gsn-nav-open { overflow: hidden; }