/* --------------------------------------------------------------- HCBI redesign tokens, phase 1. Loaded after main.css so these win where they overlap. The names are deliberately new (--sk-*) rather than overwriting main.css's existing variables, because phase 1 restyles the site chrome only. Page body content, heroes and cards still read the old variables and must keep looking exactly as they do until phase 2. The one deliberate exception is typography: --font-heading and --font-body are updated in main.css itself, because the brief calls for Sora and Inter site-wide and those two variables are how every component asks for a typeface. --------------------------------------------------------------- */ :root { /* Type */ --sk-heading: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif; --sk-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Core palette */ --sk-navy: #0B0B45; --sk-navy-hover: #1B1B7A; --sk-green: #6C9934; /* Green that carries WHITE text. #6C9934 with white is 3.36:1, under the 4.5:1 AA threshold for normal text, and it was the fill on the primary button and on all 424 .card__link pills. This is the same hue (86.7deg) darkened until white clears the bar: 4.95:1. Only surfaces that put white on green use it; accents, rules and borders keep --sk-green. */ --sk-green-cta: #577B2A; --sk-green-cta-hover: #4A6A24; --sk-green-bright: #9FD45C; /* accent text only, never a background */ --sk-white: #FFFFFF; /* Grays, each with one job */ --sk-nav-link: #39435F; --sk-body-text: #4F5872; --sk-utility: #5E6880; /* Was #6E7899, which is 4.37:1 on white and 4.00:1 on the #F5F5F5 breadcrumb bar: failing on both. Same hue, darkened to 5.35:1 and 4.91:1 respectively. */ --sk-muted: #606A8A; --sk-desc: #7B8499; /* Darker description grey for small text on the light sublist wash. --sk-desc at 12px scores 3.44:1 on #F5F5F5, under the 4.5:1 AA threshold for normal text. This is 5.97:1, still clearly lighter than the 8.99:1 sublink title so the hierarchy holds. */ --sk-desc-strong: #545E73; --sk-number: #A8B1C6; /* Surfaces */ --sk-wash: linear-gradient(160deg, #FBFAF8 0%, #F4F6FC 40%, #FAF3F6 72%, #F3F8F2 100%); --sk-panel: #F8F9FC; --sk-card: #FFFFFF; --sk-item-hover: #F4F7FC; /* Lines */ --sk-hairline: rgba(11, 11, 69, 0.08); --sk-hairline-strong: rgba(11, 11, 69, 0.09); --sk-hairline-soft: rgba(11, 11, 69, 0.07); --sk-card-border: rgba(11, 11, 69, 0.07); /* Shape */ --sk-radius-panel: 20px; --sk-radius-item: 13px; --sk-radius-card: 20px; --sk-radius-pill: 100px; /* Shadows */ --sk-shadow-panel: 0 26px 60px -20px rgba(11, 11, 69, 0.26), 0 3px 10px -3px rgba(11, 11, 69, 0.08); --sk-shadow-item: 0 10px 22px -10px rgba(11, 11, 69, 0.22); --sk-shadow-pill: 0 12px 30px -8px rgba(11, 11, 69, 0.40); --sk-shadow-card: 0 18px 40px -18px rgba(11, 11, 69, 0.22); /* Motion */ --sk-ease: cubic-bezier(0.2, 0.85, 0.3, 1); /* Layout */ --sk-container: 1360px; --sk-container-pad: 40px; /* Panel widths, keyed to item count in header.php */ --sk-panel-3: 880px; --sk-panel-2: 600px; --sk-panel-1: 330px; --sk-panel-states: 520px; /* Utility bar, navy in the corrected reference */ --sk-ubar-bg: #0B0B45; --sk-ubar-text: #FFFFFF; /* was #A9B6D6, too dim on navy */ /* Compact state rows, card indices, small caps labels */ --sk-arrow: #C3CBDB; --sk-idx: #C3CBDB; --sk-label: #8D96AD; --sk-prose: #57607A; --sk-card-text: #68728A; /* Depth surfaces */ --sk-card-fill: linear-gradient(165deg, #FFFFFF 0%, #FAFBFE 100%); --sk-bleed: radial-gradient(ellipse at top left, rgba(108, 153, 52, 0.10), transparent 68%); --sk-bleed-soft: radial-gradient(ellipse at top left, rgba(108, 153, 52, 0.09), transparent 70%); --sk-shadow-rest: 0 1px 2px rgba(11, 11, 69, 0.04), 0 10px 30px -16px rgba(11, 11, 69, 0.16); --sk-shadow-lift: 0 2px 4px rgba(11, 11, 69, 0.05), 0 34px 64px -22px rgba(11, 11, 69, 0.30); --sk-shadow-panel-soft: 0 1px 2px rgba(11, 11, 69, 0.03), 0 18px 50px -28px rgba(11, 11, 69, 0.18); /* Footer */ --sk-footer-bg: linear-gradient(165deg, #0B0B45 0%, #111157 55%, #16166B 100%); /* Light footer and CTA. The CTA band uses the same value so the two read as one continuous section with no seam between them. */ --sk-footer-light: linear-gradient(170deg, #FFFFFF 0%, #F4F7FC 45%, #E9EFF9 100%); /* Foreground set for the LIGHT footer and CTA. The dark-footer grays fail WCAG AA on this ground (as low as 2.56:1), so these are darker values chosen to clear 4.5:1 against the darkest gradient stop. */ --sk-on-light-head: #5E6880; /* 4.82:1 */ --sk-on-light-body: #57607A; /* 5.41:1 */ --sk-on-light-muted: #5A6379; /* 5.20:1 */ --sk-on-light-green: #4E7024; /* 4.96:1 */ --sk-footer-link: #C2CDE6; --sk-footer-head: #7C8AB0; --sk-footer-dim: #8494B8; /* Light hero, replacing the dark navy gradient. */ --sk-hero-light: linear-gradient(165deg, #FFFFFF 0%, #F4F8FE 26%, #E9F1FC 52%, #F2F6FD 74%, #FBFCFE 100%); --sk-hero-bleed-blue: radial-gradient(circle, rgba(120, 160, 230, 0.22), transparent 62%); --sk-hero-bleed-green: radial-gradient(circle, rgba(108, 153, 52, 0.10), transparent 64%); /* Type colours on the light hero */ --sk-eyebrow: #5C7A9E; --sk-lede: #4C5670; /* Index numbers. The old pale gray failed contrast; these are the readable replacements, and the bright green is for dark grounds. */ /* The reference specifies #5C7A9E, #7C87A0 and #8B95AD. At 14px bold and smaller these are not WCAG "large text", so 4.5:1 applies and those values land at 4.44, 3.60 and 3.00 against white. Each is darkened by the smallest step that clears 4.5 while keeping the hue. Measured values are in the report. */ --sk-num: #556F91; /* 4.54 worst ground, reference #5C7A9E */ --sk-num-dark: #9FD45C; /* 10.49 on navy, reference value unchanged */ --sk-num-hover: #4E7024; /* 5.03 worst ground, reference #6C9934 */ --sk-stat-label: #666F87; /* 5.01 on white, reference #7C87A0 */ --sk-stat-num: #556F91; /* 4.54, reference #8B95AD failed at 3.00 */ /* Green button */ --sk-green-hover: #5C8429; /* Dark CTA panel */ --sk-cta-dark: linear-gradient(150deg, #080830, #0B0B45 55%, #17176E); --sk-section-wash: linear-gradient(180deg, #FDFCFB 0%, #F3F7FD 50%, #F7FAF6 100%); /* Frosted nav */ --sk-nav-glass: rgba(255, 255, 255, 0.75); --sk-nav-border: rgba(11, 11, 69, 0.07); --sk-nav-shadow: 0 1px 24px -8px rgba(11, 11, 69, 0.10); /* The width at which the desktop links give way to the hamburger */ --sk-nav-break: 1300px; /* --------------------------------------------------------------- HERO CONTENT COLUMN Every hero capped its lead at a book measure (52ch on the homepage, 60ch on solution pages, 65ch on hubs, 620px over a photo) while the headline ran nearly the full container. At 1440px that put the lead and the buttons at 47% of a 1280px container with the photograph or an empty gradient filling the rest, which is the "left third" the copy appeared to sit in. The headline now takes the whole column, the one exception being the homepage (see .hero__title in home.css), and the lead keeps a comfortable measure INSIDE that wider column: the cap is physical rather than character-based, and the type steps up one size on desktop so the wider box is filled with a measure that still lands under 80 characters rather than with 92. Measured at 1440px: the lead box is 920px, 72% of the container, and its longest painted line runs 70 to 80 characters. Below 1024px the lead already ran the full column, so these leave it alone. --------------------------------------------------------------- */ --hero-measure: min(100%, 62ch); --hero-measure-lg: min(100%, 920px); --hero-lead-size-lg: 21px; /* --------------------------------------------------------------- HERO HEIGHT Hero height was purely a function of content plus padding, so a page with a one-line headline finished 553px tall on a 900px viewport, 61% of it, and every hero left a band of empty ground under the buttons because the padding was asymmetric (112 top, 136 bottom) and the copy sat top-aligned inside it. The height is now driven by the viewport and the content block is centred in it. MIN 640px The tallest hero content measured 477px at 1440px. 640px clears that with 80px of air each side, and it is what stops a short page (the sitemap headline is one word) collapsing to 439px on a tall screen. 80vh The target. Lands at 720px on a 1440x900 window and 640px on a 1024x800 one: 80% of the viewport in both. MAX 880px Caps the VIEWPORT-driven growth so a tall monitor does not hand over a screen and a half of hero with the page below it out of sight. Content taller than 880px still grows the hero, because min-height never clips; the cap governs the vh term only. Desktop only. Below 1024px the hero is content-driven: measured across all 88 pages at 390x844 it runs 519 to 802px, 62 to 95% of the viewport, on content alone, so forcing 80vh there would add nothing on most pages and push the buttons under the fold on the rest. See the breakpoint note in pages.css. --------------------------------------------------------------- */ --hero-h-min: 640px; --hero-h-ideal: 80vh; --hero-h-max: 880px; --hero-height: clamp(var(--hero-h-min), var(--hero-h-ideal), var(--hero-h-max)); /* Symmetric, so that when content does exceed the min-height the block stays centred instead of drifting up. */ --hero-pad-lg: 72px; }