/* ========================================================================== Summit Golf Academy — design tokens -------------------------------------------------------------------------- This file is canonical. Every colour, size, space and radius used anywhere on the site comes from here. If a value is needed that these scales do not contain, it gets added here first — never written inline in a stylesheet. ========================================================================== */ :root { /* ------------------------------------------------------------------------ COLOUR — GREENS Confirmed brand colours. Both are light tints, which makes them ground colours, not text colours. Dark text on a green fill is the signature pairing. Green type on a light ground fails contrast every time. ------------------------------------------------------------------------ */ --summit-green: #C4D689; /* supporting: section fills, chips, rules, selected states */ --summit-green-bright: #CAFF97; /* primary: CTA fill, price figure, hero accent */ --summit-green-deep: #3F6624; /* text-safe green: links + focus rings on LIGHT grounds only */ /* ------------------------------------------------------------------------ COLOUR — NEUTRALS Warm and very slightly green-shifted, so the greens read as part of the same family rather than as an accent sitting on unrelated grey. ------------------------------------------------------------------------ */ --ink-900: #121311; /* primary dark ground */ --ink-800: #1E201C; /* cards and panels on the dark ground */ --ink-700: #2C2E29; /* hairlines and dividers on dark */ --ink-500: #A9ABA2; /* muted text on dark */ --ink-300: #55574E; /* muted text on light */ --bone: #F2F1EC; /* light section ground */ --bone-dim: #E5E3DB; /* alternate light band / inset surface */ --white: #FFFFFF; /* cards on the light ground */ /* ------------------------------------------------------------------------ COLOUR — PAIRINGS Checked with WCAG 2.1 maths, not by eye. PASSES --bone on --ink-900 16.48:1 AAA --ink-500 on --ink-900 8.02:1 AAA --summit-green on --ink-900 11.83:1 AAA --summit-green-bright on --ink-900 16.20:1 AAA --bone on --ink-800 14.52:1 AAA --ink-500 on --ink-800 7.07:1 AAA --ink-900 on --summit-green 11.83:1 AAA --ink-900 on --summit-green-bright 16.20:1 AAA --ink-900 on --bone 16.48:1 AAA --ink-300 on --bone 6.49:1 AA --ink-900 on --white 18.63:1 AAA --ink-300 on --white 7.34:1 AAA --summit-green-deep on --bone 5.92:1 AA --summit-green-deep on --white 6.69:1 AA NEVER BUILD THESE --summit-green as text on --bone 1.39:1 FAIL --summit-green-bright as text on --bone 1.02:1 FAIL --summit-green as text on --white 1.58:1 FAIL --summit-green-bright as a focus ring on any light ground FAIL Hairlines (--ink-700 on dark, --bone-dim on light) sit near 1.4:1. That is fine for decoration, but they must never be the ONLY signal of state. A selected item is shown with a green FILL, not a border change. ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ TYPE — FAMILIES Anton for display, Inter for body. That is the entire typeface budget. Both self-hosted. Real system fallbacks behind each. ------------------------------------------------------------------------ */ --font-display: "Anton", "Haettenschweiler", "Arial Narrow Bold", Impact, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* ------------------------------------------------------------------------ TYPE — SCALE Tight steps at the bottom for fine control of small text on a phone, opening up toward the top where only a few sizes are needed. ------------------------------------------------------------------------ */ --text-2xs: 0.75rem; /* 12px — legal, disclaimers */ --text-xs: 0.8125rem; /* 13px — labels, eyebrows */ --text-sm: 0.875rem; /* 14px — captions, microcopy */ --text-base: 1rem; /* 16px — body */ --text-md: 1.0625rem; /* 17px — lead paragraph */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 1.875rem; /* 30px */ --text-3xl: 2.375rem; /* 38px */ --text-4xl: 3rem; /* 48px */ --text-5xl: 3.75rem; /* 60px */ /* Fluid display sizes — scale with the viewport between the two bounds */ --text-h1: clamp(2.125rem, 9vw, 4.25rem); /* hero h1 — sized so the longest line holds on one row at 320px */ --text-display: clamp(2.75rem, 11vw, 4.5rem); /* large display, unbroken */ --text-display-sm: clamp(2rem, 8vw, 3rem); /* section h2 */ --text-price: clamp(3rem, 14vw, 5rem); /* the live total */ /* ------------------------------------------------------------------------ TYPE — LINE HEIGHT ------------------------------------------------------------------------ */ --leading-display: 0.92; --leading-tight: 1.1; --leading-snug: 1.3; --leading-body: 1.55; /* ------------------------------------------------------------------------ TYPE — TRACKING Heavy condensed faces read loose at default spacing and need negative tracking. Body copy never does. ------------------------------------------------------------------------ */ --tracking-display: -0.01em; /* Anton, default */ --tracking-tighter: -0.02em; /* Anton at the largest sizes */ --tracking-label: 0.08em; /* uppercase Inter labels and eyebrows */ --tracking-body: 0; /* never track body copy */ /* ------------------------------------------------------------------------ SPACING — every value is a multiple of 4px, and the number says which ------------------------------------------------------------------------ */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ------------------------------------------------------------------------ LAYOUT RHYTHM ------------------------------------------------------------------------ */ --section-y: clamp(3rem, 9vw, 5.5rem); /* vertical padding on a section */ --gutter: clamp(1.25rem, 5vw, 2rem); /* horizontal page margin */ --measure: 34rem; /* max line length for body copy */ /* ------------------------------------------------------------------------ RADIUS Built so outer and inner corners stay concentric: a --radius-md card with --space-3 padding wants a --radius-xs element inside it. ------------------------------------------------------------------------ */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* ------------------------------------------------------------------------ SCRIM — translucent --ink-900, for laying type over photography. Needed because a gradient cannot be built from a solid token. ------------------------------------------------------------------------ */ --scrim-0: rgba(18, 19, 17, 0); --scrim-soft: rgba(18, 19, 17, 0.35); --scrim-mid: rgba(18, 19, 17, 0.62); --scrim-strong: rgba(18, 19, 17, 0.88); /* ------------------------------------------------------------------------ MOTION Subtle by default. Everything here is disabled under prefers-reduced-motion — see the block at the end of site.css. ------------------------------------------------------------------------ */ --dur-fast: 140ms; /* button press */ --dur-base: 260ms; /* hover and small state changes */ --dur-header: 420ms; /* the floating header fading in and out */ --dur-slow: 520ms; /* tabs, panels */ --dur-reveal: 900ms; /* section reveal — deliberately slow and soft */ --dur-cross: 1400ms; /* gallery crossfade */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* long decelerating tail */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* symmetrical */ --reveal-shift: 22px; /* how far a section travels as it fades in */ --reveal-blur: 7px; /* softness it resolves out of */ /* ------------------------------------------------------------------------ GLASS — the floating header. Translucent ink over whatever scrolls beneath it, blurred. Falls back to a solid panel where backdrop-filter is unsupported, so the CTA is never unreadable. ------------------------------------------------------------------------ */ --glass-bg: rgba(18, 19, 17, 0.62); --glass-bg-solid: rgba(18, 19, 17, 0.94); /* no-backdrop-filter fallback */ --glass-border: rgba(242, 241, 236, 0.14); --glass-blur: 18px; --header-h: 58px; /* ------------------------------------------------------------------------ REVIEW AVATARS — a white initial on a coloured disc, the way Google draws them. Each is dark enough for white text to pass AA. ------------------------------------------------------------------------ */ --avatar-1: #1A73E8; /* blue — white on this is 4.51:1 */ --avatar-2: #C5221F; /* red — 5.80:1 */ --avatar-3: #188038; /* green — 5.02:1 */ --avatar-4: #A8478A; /* purple — 5.34:1 */ --avatar-5: #B06000; /* amber — 4.65:1 */ --avatar-6: #0B7B83; /* teal — 5.03:1 */ /* ------------------------------------------------------------------------ INTERACTION ------------------------------------------------------------------------ */ --tap-min: 44px; /* minimum tap target on any control */ }