/** * GamesHub — design token layer * ============================================================================= * Source of truth: "GamesHub Homepage.html" (frame 2a, desktop 1440), measured * from the rendered comp. Naming mirrors the variable collections authored in * "GamesHub - Redesign.fig" (Primitives / Theme / Typography / Spacing), so the * design file and the CSS share one vocabulary. * * Purely additive. Custom properties do nothing until consumed, so this file * cannot change the live site; only .hp-v2 CSS reads it today. * * Prefix --gh- avoids the theme's existing --bs-* (Bootstrap 5.0.2) and * --wp--* (block editor) namespaces. * * Where a measured value sits off the design system's own scale, it is marked * OFF-SCALE and given its own semantic token rather than being rounded. */ :root { /* ========================================================================== PRIMITIVES — colour ========================================================================== */ /* Navy. Two grounds alternate down the page: -900 for header, hero and footer, -850 for the news and real-money sections. */ --gh-navy-900: #000033; --gh-navy-850: #040447; --gh-navy-600: #39399a; /* hero radial glow only */ --gh-blue-100: #dce8f7; /* section rules on dark, at 25% */ --gh-grey-200: #e6e6f2; /* carousel arrows, media placeholders */ /* Accent. THREE distinct oranges with distinct jobs in the comp — this is not drift, they are used consistently: -500 chip fills and the primary button -400 category / taxonomy links on dark -300 section eyebrows Note the live theme's hover orange is #e65d2f, two units off -500. Treat -500 as canonical and retire #e65d2f when legacy CSS is migrated. */ --gh-accent-500: #e85d2f; --gh-accent-400: #fd6634; --gh-accent-300: #fd855d; --gh-accent-800: #6b381d; /* text on the peach trust band */ --gh-accent-100: #fed7c0; /* peach band ground */ --gh-accent-200: #feb9a2; /* peach band bars */ /* Neutrals */ --gh-neutral-0: #ffffff; --gh-neutral-50: #f6f6fa; /* light section ground */ --gh-neutral-750: #333333; --gh-legacy-text: #212529; /* the theme's own base text colour */ --gh-neutral-700: #383838; /* body copy on light */ --gh-neutral-600: #606060; --gh-neutral-800: #181818; /* headings on light */ /* White alpha ramp. The comp leans on this heavily for hierarchy on the dark grounds; the live theme has no equivalent, which is why its dark sections read flat. */ --gh-on-dark-100: rgba(255, 255, 255, 1); --gh-on-dark-85: rgba(255, 255, 255, 0.85); --gh-on-dark-72: rgba(255, 255, 255, 0.72); --gh-on-dark-66: rgba(255, 255, 255, 0.66); --gh-on-dark-55: rgba(255, 255, 255, 0.55); --gh-on-dark-40: rgba(255, 255, 255, 0.40); --gh-on-dark-14: rgba(255, 255, 255, 0.14); /* neutral chip fill */ --gh-on-dark-08: rgba(255, 255, 255, 0.08); /* hairlines, wells */ /* ========================================================================== THEME — semantic. Prefer these over primitives in component CSS. ========================================================================== */ --gh-surface: var(--gh-neutral-0); --gh-surface-subtle: var(--gh-neutral-50); --gh-surface-dark: var(--gh-navy-900); --gh-surface-dark-alt: var(--gh-navy-850); --gh-surface-promo: var(--gh-accent-100); --gh-text: var(--gh-neutral-800); --gh-text-body: var(--gh-neutral-700); --gh-text-muted: var(--gh-neutral-600); --gh-text-on-dark: var(--gh-on-dark-100); --gh-text-on-dark-soft: var(--gh-on-dark-72); --gh-text-on-dark-muted: var(--gh-on-dark-55); --gh-text-on-promo: var(--gh-accent-800); --gh-taxonomy: var(--gh-accent-400); --gh-eyebrow: var(--gh-accent-300); --gh-border-on-dark: var(--gh-on-dark-40); --gh-hairline-on-dark: rgba(220, 232, 247, 0.25); /* blue-100 @25% */ --gh-hairline-on-dark-alt: rgba(220, 232, 247, 0.22); /* the darker sections use 22% */ --gh-hairline-on-light: var(--gh-blue-100); --gh-badge-border: rgba(255, 255, 255, 0.35); --gh-card-border: var(--gh-blue-100); --gh-arrow-bg: var(--gh-grey-200); --gh-media-placeholder: var(--gh-grey-200); --gh-promo-bars: var(--gh-accent-200); --gh-hairline-on-light: rgba(0, 0, 0, 0.08); /* Scrim behind chips + title on overlay cards, so text stays legible over arbitrary game artwork. Navy-tinted, not neutral black. */ /* Held at high opacity well past the text block before falling away. The comp used a single 0.92->0 ramp, which works over the dark game art it was mocked with but fails over a light featured image — and editors upload whatever they like. Three stops keep white text legible over any photo. */ --gh-scrim-dark: linear-gradient(to top, rgba(0, 0, 51, 0.96) 0%, rgba(0, 0, 51, 0.88) 45%, rgba(0, 0, 51, 0.55) 75%, rgba(0, 0, 51, 0) 100%); --gh-action-bg: var(--gh-accent-500); --gh-action-text: var(--gh-neutral-0); /* Not present anywhere in the comp or the live theme — the one addition. Neither provides a visible keyboard focus state. */ --gh-focus-ring: 2px solid var(--gh-accent-400); --gh-focus-offset: 2px; /* ========================================================================== TYPOGRAPHY — families ========================================================================== */ --gh-font-display: Teko, 'Arial Narrow', sans-serif; /* section titles, numerals */ --gh-font-heading: 'Plus Jakarta Sans', system-ui, sans-serif; --gh-font-body: Lato, system-ui, sans-serif; /* long-form copy */ /* --------------------------------------------------------------------------- META FACE — Arial, as the comp declares it inline on 56 elements (chips, datelines, taxonomy links, hero eyebrow, RTP / volatility labels, affiliate disclosure). Kept by decision rather than swapped to a bundled face. Consequences worth knowing: Arial is a system font, so it costs no download, but it renders as Liberation Sans on most Linux and as Helvetica on some older macOS — so these labels will not be pixel-identical across platforms the way the bundled faces are. One line changes all 56. --------------------------------------------------------------------------- */ --gh-font-meta: Arial, 'Helvetica Neue', Helvetica, sans-serif; /* ========================================================================== TYPOGRAPHY — roles, measured from frame 2a ========================================================================== */ /* --------------------------------------------------------------------------- HERO FACE — deviates from the comp, by decision. The comp sets the hero in Plus Jakarta Sans ExtraBold 64/70. NVS chose Teko instead, keeping the brand's established display face. Teko is condensed and w400 only, so at an identical 64px it carries far less visual mass than PJS 800 — the size below is therefore tuned, not copied. Flip --gh-font-hero back to var(--gh-font-heading) with 64/70/800 to return to the comp exactly. --------------------------------------------------------------------------- */ --gh-font-hero: Teko, 'Arial Narrow', sans-serif; --gh-hero-size: 86px; --gh-hero-leading: 84px; --gh-hero-weight: 500; --gh-hero-transform: uppercase; --gh-hero-tracking: 0.005em; --gh-headline-size: 40px; /* lead card in the news mosaic */ --gh-headline-leading: 48px; --gh-section-title-size: 28px; /* Teko, uppercase */ --gh-section-title-leading: 32px; --gh-band-title-size: 40px; /* Teko — "#1 Gaming News Portal" */ --gh-band-title-leading: 42px; --gh-column-title-size: 24px; /* Teko — "PlayStation" */ --gh-column-title-leading: 26px; --gh-stat-size: 44px; /* Teko numerals — "1,400" */ --gh-stat-leading: 44px; --gh-stat-size-sm: 32px; --gh-stat-leading-sm: 34px; --gh-rank-size: 30px; /* Teko — "01" in the rankings table */ --gh-eyebrow-size: 20px; /* Teko, uppercase */ /* Cards and UI */ --gh-card-title-size: 17px; --gh-card-title-leading: 25px; --gh-card-title-size-sm: 14px; --gh-card-title-leading-sm: 20px; --gh-bridge-title-size: 22px; --gh-bridge-title-leading: 30px; --gh-subhead-size: 20px; --gh-title-weight: 700; --gh-emphasis-weight: 800; --gh-score-size: 14px; /* PJS w800 — "8.4" */ --gh-value-size: 15px; /* PJS w700 — "96.7%" */ --gh-button-size: 14px; --gh-chip-size: 12px; --gh-chip-size-lg: 13px; --gh-meta-size: 12px; --gh-meta-size-lg: 13px; --gh-micro-size: 11px; /* "RTP", "VOLATILITY", "AD · AFFILIATE LINKS" */ /* Body — Lato Light is the comp's default for long-form copy */ --gh-body-lead-size: 21px; --gh-body-lead-leading: 33px; --gh-body-size: 16px; --gh-body-leading: 26px; --gh-body-size-sm: 14px; --gh-body-leading-sm: 22px; --gh-leading-xs: 20px; /* disclosure / micro copy */ --gh-leading-meta: 1.2; /* unitless: datelines and bylines sit tight */ --gh-legacy-leading: 24px; /* the theme's own base line-height */ --gh-body-weight-light: 300; --gh-body-weight: 400; --gh-tracking-chip: 0.04em; /* measured 0.48px at 12px */ --gh-tracking-button: 0.04em; /* measured 0.56px at 14px */ --gh-tracking-eyebrow: 0.14em; /* measured 1.82px at 13px — much wider than chips */ /* ========================================================================== SPACING — multiplier scale, 8px base, mirroring Spacing/Nx in the .fig ========================================================================== */ --gh-space-0x: 0; --gh-space-0_25x: 2px; --gh-space-0_5x: 4px; --gh-space-1x: 8px; --gh-space-1_25x: 10px; /* button icon gap */ --gh-space-1_5x: 12px; --gh-space-2x: 16px; --gh-space-2_5x: 20px; /* stat rail inset */ --gh-space-3x: 24px; --gh-space-4x: 32px; --gh-space-5x: 40px; --gh-space-6x: 48px; --gh-space-7x: 56px; --gh-space-8x: 64px; --gh-space-10x: 80px; /* Section rhythm, measured. Three of these are OFF-SCALE against Spacing/Nx (which has no 4.5x, 5.5x or 9x step) — the comp drifted from its own system. Named here rather than silently rounded; worth reconciling in Figma, since rounding 72->64 would visibly tighten the hero. */ --gh-section-y-lg: 72px; /* OFF-SCALE (9x) hero, light sections */ --gh-section-y: 64px; /* 8x real money, platforms */ --gh-section-y-sm: 56px; /* 7x footer top */ --gh-section-y-xs: 44px; /* OFF-SCALE (5.5x) news mosaic top */ --gh-section-gap-lg: 44px; /* OFF-SCALE (5.5x) */ --gh-section-gap: 36px; /* OFF-SCALE (4.5x) */ --gh-grid-gap: 24px; /* 3x */ --gh-grid-gap-lg: 32px; /* 4x */ /* ========================================================================== LAYOUT ========================================================================== */ /* Matches the theme's own .container (1472px) so the homepage content lines up with the header, nav and footer. The comp was authored on a 1440 frame, which works out at 1360 — narrower than this site actually is, which left 56px of misalignment each side. Set this back to 1360px to return to the comp's exact measurements, but then the header needs narrowing to match and that is a site-wide change. */ --gh-container-max: 1472px; /* Matches the theme's .container padding (16px), NOT the comp's 40px. The container and the gutter have to agree with the header or the homepage content sits inset from the logo and nav — which it did, by exactly 40px. */ --gh-gutter: 16px; --gh-header-height: 80px; /* Hero, measured from frame 2a */ --gh-hero-col: 720px; /* fixed left column; right flexes to 576 */ --gh-hero-col-gap: 64px; /* 8x */ --gh-hero-copy-max: 620px; /* lead paragraph is narrower than its column */ --gh-hero-stack-gap: 26px; /* OFF-SCALE */ --gh-stat-gap: 18px; /* OFF-SCALE */ --gh-stat-rule: 2px; /* accent bar left of each stat */ --gh-stat-label-leading: 24px; /* tighter than body leading, measured */ /* News mosaic, measured */ --gh-mosaic-side: 322px; --gh-mosaic-card-h: 288px; --gh-mosaic-lead-h: 600px; /* ========================================================================== SHAPE ========================================================================== */ --gh-radius-chip: 2px; --gh-radius: 4px; --gh-button-height: 52px; --gh-button-pad-x: 26px; /* OFF-SCALE */ /* Sections 3-7, measured from frame 2a */ --gh-review-cols: 4; --gh-review-media-ratio: 322 / 196; --gh-arrow-size: 40px; --gh-head-lead-max: 780px; /* section intro copy is narrower than the grid */ --gh-head-lead-size: 17px; --gh-head-lead-leading: 27px; --gh-slot-media-ratio: 322 / 172; /* slots are shallower than review cards */ --gh-slot-pad: 16px 18px 18px; --gh-slot-facts-gap: 18px; --gh-slot-card-h: 326px; --gh-rank-row-h: 76px; --gh-rank-row-gap: 10px; --gh-badge-pad-y: 3px; --gh-radius-pill: 999px; --gh-bridge-pad: 28px; --gh-bridge-gap: 18px; --gh-band-pad-y: 44px; --gh-band-pad-x: 48px; --gh-band-art-w: 420px; --gh-band-bar-w: 70px; --gh-band-copy-max: 700px; --gh-band-stat-gap: 44px; --gh-band-cta-h: 48px; --gh-platform-cols: 4; --gh-platform-gap: 32px; --gh-platform-row-gap: 20px; --gh-thumb-w: 84px; --gh-thumb-h: 56px; --gh-radius-thumb: 3px; --gh-duration: 180ms; --gh-ease: cubic-bezier(0.2, 0, 0.3, 1); --gh-transition: var(--gh-duration) var(--gh-ease); } /* Breakpoints stay literal — custom properties can't be used in @media. Frame 2b is 390px wide, so mobile is designed at 390: 575 / 767 / 991 / 1199 */ @media (prefers-reduced-motion: reduce) { :root { --gh-duration: 1ms; } }