/* St Ives (Hunts) Golf Club: brand tokens shared by every direction.
* Source: the Albatross brand book, https://brand.albatross.digital/stives/ (colour and type measured from the
* club's live stylesheet; hierarchy proposed). Facts for copy live in research/st-ives/facts.md.
*
* TYPE. Proxima Nova comes from the club's Typekit kit pdh2nxp. Put this in each page's , before this file:
*
*
* It loads on localhost and preview hosts (tested 22 Oct 2026). The kit is licensed to the club's domains:
* fine for internal demos, James decides before anything is shown outside Albatross (DEFECTS.md).
* Never Montserrat, never a Google Fonts CDN. Weights 300 to 700 plus one italic.
*
* COLOUR RULES (brand book, "Colour usage rules" and "Contrast").
* - Navy is the brand colour: headers, headings, primary buttons, footer.
* - Fairway Gold is seasoning: rules, icons, hovers, large headings (24px+, or 18.66px bold) only. It fails body
* contrast on white (3.90:1) and on navy (3.23:1): never paragraph text, captions or body-size link text.
* Never a large filled panel.
* - Sky Blue is for links and hover. If it is blue and not navy, it is clickable.
* - Light Gold and Pale Gold on navy only (too pale on white).
* - White and Warm Stone alternate as section grounds. No third tint.
* - Heraldic gold, red and silver belong inside the crest artwork only; they are not tokens here on purpose.
*
* CREST. assets/brand-book/crest.png, the FOUNDED 1923 crest (never CENTENARY 2023). Never redraw or recolour.
* At least 80px wide on screen. On navy it must sit on a Warm Stone circular plate with clear space
* (.sti-crest-plate below): its black surround lettering is unreadable directly on navy.
*
* WRITING. Sentence case headings. British English. No em or en dashes. Labels and buttons may be uppercase.
*/
:root {
/* Colour: primary */
--sti-navy: #0D306F; /* Club Navy. White on navy 12.58:1 */
--sti-gold: #A17B2C; /* Fairway Gold. Rules, icons, hovers, large headings only */
/* Colour: secondary */
--sti-sky: #20609E; /* Sky Blue. Links and hover; 6.50:1 on white */
--sti-gold-light: #D9B764; /* Light Gold. On navy only; 6.53:1 */
--sti-gold-pale: #E6C679; /* Pale Gold. On navy only; 7.62:1. As a ground: once, with navy type */
/* Colour: neutrals */
--sti-white: #FFFFFF;
--sti-stone: #F4F1F0; /* Warm Stone. Alternate section ground; the crest plate */
--sti-body: #4B4B4B; /* Body Grey. Body copy; 8.72:1 on white */
--sti-ink: #222222; /* Ink. Maximum-contrast text */
--sti-rule: #E4E4E4; /* Rule Grey. Borders and dividers */
/* Roles (use these in components so a direction can re-map them in one place) */
--sti-ground: var(--sti-white);
--sti-ground-alt: var(--sti-stone);
--sti-heading: var(--sti-navy);
--sti-text: var(--sti-body);
--sti-link: var(--sti-sky);
--sti-link-hover: var(--sti-navy);
--sti-focus: var(--sti-sky);
--sti-button-bg: var(--sti-navy);
--sti-button-text: var(--sti-white);
--sti-on-navy-accent: var(--sti-gold-light);
/* Type */
--sti-font: proxima-nova, Arial, Helvetica, sans-serif;
--sti-w-light: 300;
--sti-w-regular: 400;
--sti-w-medium: 500;
--sti-w-semibold: 600;
--sti-w-bold: 700;
/* Type scale (brand book hierarchy). Fluid between 390px and 1440px viewports. */
--sti-display: clamp(2.75rem, 1.9rem + 3.4vw, 4.5rem); /* 44 to 72px, 700, lh 1.05. Hero (56 to 72 on desktop) */
--sti-display-lh: 1.05;
--sti-h1: clamp(2.125rem, 1.8rem + 1.3vw, 3rem); /* 34 to 48px, 600, lh 1.15 */
--sti-h1-lh: 1.15;
--sti-h2: clamp(1.625rem, 1.45rem + 0.7vw, 2.125rem); /* 26 to 34px, 600, lh 1.2 */
--sti-h2-lh: 1.2;
--sti-h3: clamp(1.25rem, 1.18rem + 0.3vw, 1.5rem); /* 20 to 24px, 600, lh 1.3 */
--sti-h3-lh: 1.3;
--sti-body-size: 1.0625rem; /* 17px, 400, lh 1.6 */
--sti-body-lh: 1.6;
--sti-lead: 1.25rem; /* 20px, 300, lh 1.6. Standfirsts */
--sti-lead-lh: 1.6;
--sti-caption: 0.875rem; /* 14px, 400, lh 1.4 */
--sti-caption-lh: 1.4;
--sti-label: 0.8125rem; /* 13px, 600, lh 1.2, uppercase, 0.06em. Buttons, tags */
--sti-label-lh: 1.2;
--sti-label-tracking: 0.06em;
--sti-measure: 68ch; /* Line length 60 to 75 characters */
/* Layout and touch */
--sti-gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
--sti-max: 1440px;
--sti-tap: 44px; /* Minimum tap target */
--sti-radius: 2px;
/* Motion. Transform and opacity only; durations collapse under prefers-reduced-motion. */
--sti-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--sti-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--sti-dur-fast: 180ms;
--sti-dur: 420ms;
--sti-dur-slow: 900ms;
}
@media (prefers-reduced-motion: reduce) {
:root { --sti-dur-fast: 1ms; --sti-dur: 1ms; --sti-dur-slow: 1ms; }
}
/* Optional helpers. Prefixed so they never collide with a direction's own classes. */
/* The crest on navy: Warm Stone disc, clear space all round (brand book "The mark").
Size the plate; the crest fills 78% of it. */
.sti-crest-plate {
display: inline-grid; place-items: center;
width: var(--sti-crest-plate, 104px); aspect-ratio: 1;
border-radius: 50%; background: var(--sti-stone);
}
.sti-crest-plate > img { width: 78%; height: auto; display: block; }
.sti-label {
font: var(--sti-w-semibold) var(--sti-label)/var(--sti-label-lh) var(--sti-font);
letter-spacing: var(--sti-label-tracking); text-transform: uppercase;
}
/* Primary button: navy, white label, 44px minimum, Sky Blue focus ring. */
.sti-button {
display: inline-flex; align-items: center; justify-content: center; gap: .5em;
min-height: var(--sti-tap); padding: 0 1.4em;
font: var(--sti-w-semibold) var(--sti-label)/1 var(--sti-font);
letter-spacing: var(--sti-label-tracking); text-transform: uppercase; text-decoration: none;
color: var(--sti-button-text); background: var(--sti-button-bg); border: 1px solid var(--sti-button-bg);
border-radius: var(--sti-radius);
transition: background-color var(--sti-dur-fast) ease, color var(--sti-dur-fast) ease;
}
.sti-button:hover { background: var(--sti-sky); border-color: var(--sti-sky); }
.sti-button:focus-visible { outline: 2px solid var(--sti-focus); outline-offset: 3px; }
