/* ========================================================================== 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-600: #82847C; /* dimmer text on dark — 4.92:1, still AA */ --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 */ --card-edge: #D3D0C6; /* hairline for white cards on --bone-dim */ --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(2rem, 8.4vw, 4rem); /* 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-h1: 1.06; /* the two hero lines need daylight between them */ --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(2.25rem, 6.5vw, 4rem); /* 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-panel: 380ms; /* the chat panel opening — longer than a hover, short enough not to feel like a page change */ --dur-faq: 620ms; /* accordion — slower, so the movement is legible */ --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 */ /* For the radar ring only. Off the mark about twice as fast as linear, then decelerating — but nowhere near --ease-out, which spends half its travel in the first tenth of the time and pops. Named rather than written as the CSS keyword ease-out, which would sit next to a token called --ease-out holding a completely different curve. */ --ease-ripple: cubic-bezier(0.2, 0.6, 0.35, 1); --reveal-shift: 22px; /* how far a section travels as it fades in */ /* page loader — novelty, see the block at the end of site.css */ --loader-roll: 1150ms; /* the putt */ --loader-total: 2000ms; /* whole overlay, including the fade out */ --loader-green-rim: #35461F; --loader-flag: #E03B2C; --loader-peak-back: #4C6B29; --loader-peak-front: #7FA347; /* Chat bubble bloom. Black, not green — a green halo on a green button read as a second glowing ring and blurred the edge of the bubble. Black lifts it off both the dark page and the photography. */ --chat-halo: rgba(0, 0, 0, 0.30); /* tight ring hugging the bubble */ --chat-glow: rgba(0, 0, 0, 0.50); /* soft bloom around it */ --chat-glow-open: rgba(0, 0, 0, 0.68); /* heavier, so the close X reads */ --chat-dim: rgba(18, 19, 17, 0.38); /* the page behind an open panel */ /* How far the background video is knocked back. At 0.4, a blown-out white frame lands near #616161; with --scrim-soft over the top that is 6.6:1 against --bone, so the copy passes AA on every frame. */ --video-dim: 0.4; --reveal-blur: 7px; /* softness it resolves out of */ /* A wash of the brand green, for a callout that has to look different from the copy around it without becoming a second button. */ --green-wash: rgba(196, 214, 137, 0.10); --green-wash-edge: rgba(196, 214, 137, 0.38); /* ------------------------------------------------------------------------ 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; /* Proper glass, not just a blur: a tinted gradient body, a bright specular top edge, a faint bottom edge and a drop. */ --glass-sheen: linear-gradient(158deg, rgba(242,241,236,0.18) 0%, rgba(242,241,236,0.05) 46%, rgba(18,19,17,0.34) 100%); --glass-lip: rgba(255, 255, 255, 0.38); --glass-underlip: rgba(255, 255, 255, 0.07); --glass-cast: rgba(0, 0, 0, 0.34); --glass-rim: rgba(242, 241, 236, 0.24); --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. ------------------------------------------------------------------------ */ /* Gold for the Google rating — the only place on the page that is not green, deliberately, to break up the palette. --gold 10.91:1 on --ink-900 (dark grounds only) --gold-deep 4.07:1 on white (text-safe on the review cards) */ --gold: #FBBC04; --gold-mid: #C08A00; /* stars — 3.05:1 on white, brighter than gold-deep */ --gold-deep: #A87400; --gold-glow: rgba(251, 188, 4, 0.45); /* One tint per tile — six of them, so nothing repeats. The hues sit round the wheel at 3 / 84 / 170 / 198 / 269 / 323, and the two closest pairs — teal and blue 28 apart, red and pink 40 — are placed so neither pair ever touches, in the desktop grid or in the swipe order on a phone. Bone text sits at 15:1 or better on every one, and the edge colour, which the heading uses, clears 3:1 large-text AA on all six, measured against the darker end of each gradient where the heading actually sits: green 4.44 blue 3.90 red 4.20 violet 3.12 pink 4.67 teal 5.12 */ --tile-1: linear-gradient(150deg, #2E3A22 0%, #171C13 68%); /* fairway green */ --tile-2: linear-gradient(150deg, #16303C 0%, #101A20 68%); /* data blue */ --tile-3: linear-gradient(150deg, #3E1D1D 0%, #1E0F0F 68%); /* competition red */ --tile-4: linear-gradient(150deg, #2C1B3C 0%, #16101E 68%); /* evening violet */ --tile-5: linear-gradient(150deg, #3C1B31 0%, #1D0F18 68%); /* coaching pink */ --tile-6: linear-gradient(150deg, #123833 0%, #0D1E1C 68%); /* studio teal */ --tile-1-edge: #6E8A45; --tile-2-edge: #3E7E99; --tile-3-edge: #C25651; --tile-4-edge: #7A4FA8; --tile-5-edge: #C25C9B; --tile-6-edge: #2E9C8A; /* Brighter siblings of the six edges, for the tile row's progress bar. The edge colours are tuned to sit quietly around a card; on a thin bar against --ink-700 they went muddy. Each is the same hue, lifted and saturated. --bar-1 is the brand green itself 11.83:1 on --ink-900 the rest all clear 5:1 against the --ink-700 track behind them */ --bar-1: #C4D689; --bar-2: #5FC2E8; --bar-3: #F58079; --bar-4: #B98CF0; --bar-5: #F79BD0; --bar-6: #5FD8C2; --bar-h: 6px; /* bar thickness — off the 4px grid on purpose, 4 was thin */ --sheen: radial-gradient(120% 80% at 12% 0%, rgba(242,241,236,0.10) 0%, rgba(242,241,236,0) 62%); --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 */ } /* ========================================================================== DESKTOP — the handful of scale values that should not be phone-sized on a landscape screen. Everything else is layout and lives in site.css. Nothing in here can reach a phone: it starts at 1024px. ========================================================================== */ @media (min-width: 64rem) { :root { --section-y: 7rem; /* was capped at 4rem — too tight between bands */ --header-h: 66px; /* a bar rather than a token pill */ --text-h1: clamp(2rem, 8.4vw, 5rem); /* headroom above the 4rem cap */ --gutter: 2.5rem; /* The page column, read by .wrap in site.css. Capped against the viewport as well as in rem, so it keeps a proportional margin at every width instead of running to within 16px of the edges on a 1440. */ --wrap-max: min(92rem, 92vw); /* Distance from the edge of the page column out to the edge of the screen. Written in viewport units only, with no percentage in it: scroll-padding resolves percentages against the scroller rather than the containing block, so a percentage version came out as zero there and the carousels snapped straight past their own leading padding. */ --bleed: calc(50vw - (min(var(--wrap-max), 100vw) - var(--gutter) * 2) / 2); } } @media (min-width: 90rem) { :root { --wrap-max: min(104rem, 92vw); --section-y: 8rem; } } /* A wide monitor was leaving a third of the screen empty on either side of a 1248px column. The column keeps growing with the screen rather than sitting in the middle of it; --measure still holds the paragraphs to a readable line length inside it. */ @media (min-width: 120rem) { :root { --wrap-max: min(116rem, 92vw); --section-y: 9rem; } }