/* ============================================================================ HIGHLAND VAULT — DESIGN TOKENS (the single source of truth) ---------------------------------------------------------------------------- Everything visual is controlled from this ONE file: • Colours → the --hv-* colour variables • Font family → --hv-font • Font SIZES → the --hv-fs-* scale (fluid & responsive, NO media queries) HOW THE RESPONSIVE FONT SYSTEM WORKS ------------------------------------ Every size below uses clamp(MIN, FLUID, MAX). The size grows smoothly with the viewport between a ~360px phone (MIN) and a ~1440px desktop (MAX) — so you never write per-device font sizes anywhere else. To resize text site-wide, change it HERE and nowhere else: • Nudge EVERYTHING at once → change --hv-type-scale (e.g. 1.05 = +5%). • Resize ONE step → edit that step's clamp() min/max. Do not set pixel font-sizes in Elementor widgets or other CSS — reference these variables instead (font-size: var(--hv-fs-h2)), and the whole site stays in sync. ========================================================================== */ :root { /* ---- FONT FAMILIES ------------------------------------------------------ */ /* Two roles, both managed from the Customizer (Appearance → Customize → "Highland Vault — Typography") and overridden inline by HV_Typography. Defaults: Cormorant Garamond (headings) + Manrope (body/UI). The values here are only the fallback/default stacks. */ --hv-font: "Manrope", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --hv-font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif; /* ---- GLOBAL TYPE MULTIPLIER (nudge every font size at once) -------------- */ /* 1 = default, 0.9 = 10% smaller, etc. Lower this to shrink ALL text. */ --hv-type-scale: 0.9; /* ---- FLUID TYPE SCALE (min @360px → max @1440px) --------------------- */ --hv-fs-hero: calc(clamp(2.25rem, 1.83rem + 1.85vw, 3.50rem) * var(--hv-type-scale)); /* 36 → 56 hero headlines */ --hv-fs-h1: calc(clamp(1.75rem, 1.50rem + 1.11vw, 2.50rem) * var(--hv-type-scale)); /* 28 → 40 page / section title */ --hv-fs-h2: calc(clamp(1.375rem,1.21rem + 0.74vw, 1.875rem) * var(--hv-type-scale)); /* 22 → 30 block titles */ --hv-fs-h3: calc(clamp(1.1875rem,1.08rem + 0.46vw,1.50rem) * var(--hv-type-scale)); /* 19 → 24 card titles */ --hv-fs-h4: calc(clamp(1.0625rem,1.02rem + 0.19vw,1.1875rem) * var(--hv-type-scale)); /* 17 → 19 sub-headings */ --hv-fs-lead: calc(clamp(1.0625rem,1.02rem + 0.19vw,1.1875rem) * var(--hv-type-scale)); /* 17 → 19 intro paragraphs */ --hv-fs-body: calc(clamp(0.9375rem,0.92rem + 0.09vw,1.00rem) * var(--hv-type-scale)); /* 15 → 16 default body text */ --hv-fs-sm: calc(clamp(0.8125rem,0.79rem + 0.09vw,0.875rem) * var(--hv-type-scale)); /* 13 → 14 labels / meta */ --hv-fs-xs: calc(clamp(0.6875rem,0.67rem + 0.09vw,0.75rem) * var(--hv-type-scale)); /* 11 → 12 badges / fine print */ /* ---- FONT WEIGHTS (map to the Stolzl weights loaded in fonts.css) -------- */ --hv-fw-regular: 400; --hv-fw-medium: 500; --hv-fw-bold: 700; --hv-fw-black: 700; /* Stolzl ships no Heavy/Black face — 800 resolved to the 700 face anyway */ /* ---- LINE HEIGHTS ------------------------------------------------------- */ --hv-lh-tight: 1.15; --hv-lh-snug: 1.30; --hv-lh-normal: 1.55; /* ---- LETTER SPACING (uppercase labels / eyebrows) ----------------------- */ --hv-ls-wide: 0.04em; --hv-ls-wider: 0.10em; /* ======================================================================== COLOUR PALETTE ("Dark Blue Premium" — approved v4 preview: blue-toned dark ground, glass navy chrome, brand blue #065BE0 for everything interactive. Mono-blue system: raid/jackpot/accent resolve to brand blue; gold survives only on the logo mark + Trustpilot stars.) ====================================================================== */ /* Near-black chrome — announce/footer, glass header, depth sections (blue-toned navies retired: #0A0A0A family per the approved refinement) */ --hv-navy-900: #0A0A0A; --hv-navy-800: #0A0A0A; --hv-navy-700: #101010; /* Brand blue — the one interactive colour (hover LIGHTENS to 500) */ --hv-blue-700: #054CBB; --hv-blue-600: #065BE0; --hv-blue-500: #0A6BFF; --hv-blue-100: #1A1A1A; /* chip bg on dark — neutral (blue lives in the TEXT/accent) */ --hv-blue-050: #131313; /* hover tint on dark — neutral */ /* Accent (was orange) — resolves to brand blue */ --hv-orange-600: #054CBB; --hv-orange-500: #065BE0; --hv-orange-100: #1A1A1A; --hv-orange-050: #131313; /* Raid (was purple) — brand blue */ --hv-purple-600: #054CBB; --hv-purple-500: #065BE0; --hv-purple-100: #1A1A1A; /* Green — success semantics only (progress bars are blue in this theme) */ --hv-green-600: #16A34A; --hv-green-500: #22C55E; --hv-green-100: #12291B; /* Red — urgency / errors */ --hv-red-600: #DC2626; --hv-red-500: #EF4444; /* Gold — logo mark & Trustpilot stars only */ --hv-gold-500: #D4AF37; /* Neutrals — WHITE page canvas under the dark chrome/cards. These :root values are the ON-GROUND set (dark text, light hairlines). Every dark surface re-declares the ON-DARK set locally — see the "DARK-SURFACE TOKEN SCOPE" rule at the end of base.css. Components keep referencing the same var() names and resolve per context. */ --hv-ink: #111827; /* headings on the white ground */ --hv-body: #4B5563; /* body text on the white ground */ --hv-muted: #6B7280; /* secondary text on the ground */ --hv-line: #E7EAF0; /* hairlines on the white ground */ --hv-bg: #FFFFFF; /* page background — pure white */ --hv-surface: #0A0A0A; /* cards — near-black */ --hv-surface-2:#141414; /* subtle inset surface */ --hv-track: #1C1C1C; /* progress-bar track (neutral) */ /* The on-dark text set (used by the base.css scope rule) — neutral greys for the near-black surfaces (the old GitHub greys had a blue cast) */ --hv-ink-on-dark: #FFFFFF; --hv-body-on-dark: #CFCFCF; --hv-muted-on-dark: #9A9A9A; --hv-line-on-dark: rgba(255,255,255,.08); /* ---- SEMANTIC ALIASES (use these in components, not raw colours) -------- */ --hv-primary: var(--hv-blue-600); --hv-primary-strong: var(--hv-blue-500); /* hover shade — LIGHTER on dark */ --hv-primary-ink: #FFFFFF; --hv-accent: var(--hv-orange-500); --hv-accent-ink: #FFFFFF; --hv-raid: var(--hv-purple-500); --hv-weekly: var(--hv-blue-600); --hv-jackpot: var(--hv-orange-500); --hv-success: var(--hv-green-500); --hv-danger: var(--hv-red-500); /* Prize tiers (Instant Win) */ --hv-tier-1: var(--hv-purple-500); /* top tier */ --hv-tier-2: var(--hv-blue-600); --hv-tier-3: var(--hv-green-500); --hv-tier-4: var(--hv-orange-500); /* base tier */ /* ---- GRADIENTS ---------------------------------------------------------- */ --hv-grad-primary: linear-gradient(90deg, var(--hv-blue-600), var(--hv-blue-500)); --hv-grad-accent: linear-gradient(90deg, var(--hv-blue-500), var(--hv-blue-600)); --hv-grad-raid: linear-gradient(90deg, var(--hv-blue-600), var(--hv-blue-700)); --hv-grad-navy: linear-gradient(160deg, #101010, #0A0A0A); /* depth section — pinned dark (bg is white) */ /* ======================================================================== SPACING / RADIUS / SHADOW / LAYOUT ====================================================================== */ /* Global spacing multiplier — shrink/grow every gap, padding and margin that uses these tokens, in one place (mirrors --hv-type-scale). 1 = default. */ --hv-space-scale: 0.9; --hv-space-1: calc(0.25rem * var(--hv-space-scale)); --hv-space-2: calc(0.5rem * var(--hv-space-scale)); --hv-space-3: calc(0.75rem * var(--hv-space-scale)); --hv-space-4: calc(1rem * var(--hv-space-scale)); --hv-space-5: calc(1.5rem * var(--hv-space-scale)); --hv-space-6: calc(2rem * var(--hv-space-scale)); --hv-space-7: calc(3rem * var(--hv-space-scale)); --hv-space-8: calc(4rem * var(--hv-space-scale)); --hv-radius-sm: 8px; --hv-radius: 12px; --hv-radius-lg: 18px; --hv-radius-xl: 24px; --hv-radius-pill: 999px; --hv-shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.35); --hv-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); --hv-shadow-lg: 0 18px 45px rgba(0, 0, 0, 0.55); --hv-ring: 0 0 0 3px rgba(6, 91, 224, 0.4); /* focus ring */ --hv-container: 1240px; /* max content width */ } /* Comfortable default line-length for reading blocks */ :root { --hv-measure: 68ch; }