/* ========================================================================== 4SKILLS — DESIGN TOKENS -------------------------------------------------------------------------- Single source of truth for colour, type, spacing, radii and shadows. Loaded FIRST in header.php and header-black.php, before every other stylesheet. Custom properties resolve at used-value time, so load order does not affect correctness — but keeping this first makes the cascade readable and lets later stylesheets reference tokens freely. NOTHING CONSUMES THESE YET. Existing CSS is refactored onto them in later phases. Adding a value here changes no pixel on its own. Palette rule: navy, gold, white and grey only. Two supporting neutrals (--color-surface, --color-border) and one muted state colour (--color-muted). Everything else is a tint or shade of navy or gold. ========================================================================== */ :root { /* ------------------------------------------------------------------ COLOUR — BRAND ------------------------------------------------------------------ */ /* Navy. --color-navy is the existing site value (was --dark / $dark), already applied to every h1-h6. Deep is a shade for dark grounds. */ --color-navy: #181d38; --color-navy-deep: #0f1329; --color-navy-soft: #2a3050; /* hairlines and dividers on dark */ /* Gold. --color-gold is the established brand accent (header-black.php, success-stories-ielts.php). IMPORTANT: --color-gold is 2.29:1 on white. It FAILS WCAG AA for text. Use it for rules, borders, marks and small decorative elements on dark grounds only. For type on a light ground use --color-gold-deep, which is the same hue darkened to 4.90:1 on white and 4.62:1 on --color-surface. Both pass AA for normal text. */ --color-gold: #c9a84c; --color-gold-light: #e2c578; /* lifted gold — hover on dark grounds */ --color-gold-deep: #8a6d1f; --color-gold-tint: #f3ecd8; /* 90% tint — quiet fills and bands */ --color-gold-line: rgba(201, 168, 76, 0.32); /* Type set ON a --color-gold-tint surface. --color-gold-deep only reaches 4.15:1 against that tint, so it fails AA there; this deeper step is 5.85:1 on --color-gold-tint and 5.06:1 on the next tint down. */ --color-gold-ink: #6e5719; /* ------------------------------------------------------------------ COLOUR — NEUTRALS Two new hues only: --color-surface and --color-border. ------------------------------------------------------------------ */ --color-white: #ffffff; --color-surface: #faf8f4; /* NEW — warm off-white section band */ --color-border: #e2ded6; /* NEW — warm mid grey hairline */ --color-border-strong: #cfc9bd; /* shade of --color-border */ /* ------------------------------------------------------------------ COLOUR — TEXT ------------------------------------------------------------------ */ --color-ink: var(--color-navy); /* headings */ --color-body: #52565b; /* existing Bootstrap $body-color */ --color-muted: #6b7180; /* NEW — the one muted state colour */ --color-on-dark: #ffffff; --color-on-dark-muted: #a7aec1; /* tint of navy for dark grounds */ /* Interactive text. Links resolve to gold-deep on light grounds so hover is both visible and AA-compliant. */ --color-link: var(--color-navy); --color-link-hover: var(--color-gold-deep); /* ------------------------------------------------------------------ TYPOGRAPHY — FAMILIES Both families are already loaded on the pages that use them; adopting them costs no additional network requests. Heebo is currently downloaded on every page and never rendered, because `* { font-family: 'popping', sans-serif }` in css/style.css overrides it on every element. That rule is retired in Phase 4.5, at which point --font-body takes effect. Do not apply these globally before then. ------------------------------------------------------------------ */ --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-body: 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* ------------------------------------------------------------------ TYPOGRAPHY — SCALE Restrained, print-influenced. Steps are deliberately few. ------------------------------------------------------------------ */ --text-2xs: 0.75rem; /* 12px — eyebrow, caps labels */ --text-xs: 0.8125rem; /* 13px — meta, captions */ --text-sm: 0.875rem; /* 14px — secondary body */ --text-base: 1rem; /* 16px — body */ --text-md: 1.125rem; /* 18px — lead paragraph */ --text-lg: 1.25rem; /* 20px — card title */ --text-xl: 1.5rem; /* 24px — h4 */ --text-2xl: 1.875rem; /* 30px — h3 */ --text-3xl: 2.25rem; /* 36px — h2 */ --text-4xl: 3rem; /* 48px — h1 */ --text-5xl: 4rem; /* 64px — page hero */ /* Fluid display sizes for hero headings. Replaces the ad hoc clamp() and vw values currently scattered across pages. */ --text-display: clamp(2.25rem, 4.5vw, 3.5rem); --text-display-lg: clamp(2.75rem, 6vw, 4.5rem); /* ------------------------------------------------------------------ TYPOGRAPHY — WEIGHT, LEADING, TRACKING Weights are limited to those actually loaded: Heebo 400/500/600, Cormorant Garamond 400/600/700. ------------------------------------------------------------------ */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-none: 1; --leading-tight: 1.15; /* display headings */ --leading-snug: 1.3; /* headings */ --leading-normal: 1.6; /* body */ --leading-relaxed: 1.75; /* long-form body */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-caps: 0.16em; /* uppercase eyebrow labels */ /* ------------------------------------------------------------------ SPACING — 4px base Absorbs the existing 10/20/24/25/30/48/50/60/70/80/100/160/320px values. See DESIGN-AUDIT.md for the full old-to-new mapping. --space-12 (96px) is the standard section rhythm. The current 160px margins and the 320px stack on .sec__pricing map down to it. ------------------------------------------------------------------ */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 2rem; /* 32px */ --space-8: 2.5rem; /* 40px */ --space-9: 3rem; /* 48px */ --space-10: 4rem; /* 64px */ --space-11: 5rem; /* 80px */ --space-12: 6rem; /* 96px */ --space-13: 8rem; /* 128px */ /* Semantic aliases — prefer these for layout rhythm. */ --section-gap-sm: var(--space-9); /* 48px — tight sections */ --section-gap: var(--space-12); /* 96px — standard */ --section-gap-lg: var(--space-13); /* 128px — page open/close */ /* ------------------------------------------------------------------ LAYOUT Bootstrap's top container step is 1320px, which yields a 95-110 character measure on this site's long explanatory paragraphs. 1200px yields roughly 78-85, which is the print measure the brand wants. success-stories-ielts.php already chose 1200 independently. ------------------------------------------------------------------ */ --container-max: 1200px; --container-gutter: var(--space-6); /* 24px */ /* Prose measure. ch is the advance of "0", which is wider than the average character, so this is not a character count - 60ch measures out at 75 characters in Heebo, inside the 65-80 band (measured in the browser, not estimated). */ --measure: 60ch; /* ------------------------------------------------------------------ RADIUS Absorbs the fifteen radii currently in use (0/4/5/7/8/10/12/14/20/24/30/35/46/100px/50%). ------------------------------------------------------------------ */ --radius-none: 0; --radius-sm: 4px; /* 4, 5 */ --radius-md: 8px; /* 7, 8 */ --radius-lg: 12px; /* 10, 12, 14 */ --radius-xl: 20px; /* 20, 24 */ --radius-pill: 999px; /* 30, 35, 46, 100 */ --radius-circle: 50%; /* ------------------------------------------------------------------ SHADOW Navy-tinted rather than pure black — softer, closer to ink on paper than to a drop shadow. Replaces the nine unrelated shadows in use. ------------------------------------------------------------------ */ --shadow-none: none; --shadow-xs: 0 1px 2px rgba(24, 29, 56, 0.06); --shadow-sm: 0 2px 6px rgba(24, 29, 56, 0.08); --shadow-md: 0 6px 18px rgba(24, 29, 56, 0.10); --shadow-lg: 0 16px 40px rgba(24, 29, 56, 0.12); /* Shadows for dark grounds need more depth to register. */ --shadow-on-dark: 0 20px 50px rgba(0, 0, 0, 0.45); /* Focus ring. Gold reads clearly on both light and dark grounds and ties the accent to keyboard navigation. */ --focus-ring: 0 0 0 3px rgba(201, 168, 76, 0.45); /* ------------------------------------------------------------------ MOTION ------------------------------------------------------------------ */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 0.15s; --duration-base: 0.25s; --duration-slow: 0.4s; } /* Respect reduced-motion preferences wherever tokens drive transitions. */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0.01ms; --duration-base: 0.01ms; --duration-slow: 0.01ms; } }