/* --------------------------------------------------------------- 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 a display face and Inter site-wide, and those two variables are how every component asks for a typeface. The display face is Montserrat; it was Sora until this pass. --------------------------------------------------------------- */ :root { /* Type */ --sk-heading: 'Montserrat', 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; /* BODY COPY TIER, one value for all three body roles. Was --sk-body-text #4F5872 (7.07:1), --sk-prose #57607A (6.25:1) and --sk-card-text #646D84 (5.17:1). All three are running body copy, they only differed by which stylesheet set them, and at 5-7:1 they read as mid grey next to the #0B0B45 headings above them. #2B3247 is the same family, H=224 S=25%, taken down to 12.73:1 on white and 12.30:1 on the card fill. It stays a step off the base --text-dark (#1a1a2e, 17.06:1) so headings still lead, and the label tier below is untouched: --sk-label 5.01:1, --sk-muted 5.35:1, --sk-desc and --sk-idx lighter still. Labels and captions therefore stay visibly secondary to the copy they sit against. */ --sk-body-copy: #2B3247; --sk-body-text: var(--sk-body-copy); --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; /* THE ONE CONTENT LINE. .container is 1360px wide with 40px of padding, so its text starts 40px inside its box. Everything that paints a card has to start on that same line rather than on the container's box edge, or the card sits 40px left of the heading above it. --content-max is that line's width, and a card gets it with: width: calc(100% - 2 * var(--container-pad)); max-width: var(--content-max); margin-inline: auto; which lands the card edge on the text edge at every width. */ --content-max: 1280px; /* --------------------------------------------------------------- PANEL PROSE MEASURE The panels themselves are already the full content line: measured at 1440px a prose panel is a 1280px card at x=80, exactly where the card grids start. What sat in a narrow strip was the COPY inside it, capped at 636px, which is 54% of the panel's 1174px content box and left 538px of blank white down the right of every prose section on the site. 636px is 90 characters at 16px, so the measure could not simply be widened: at 16px, 95 characters is 670px and the panel would still be two thirds empty. Filling 1174px at 90 characters needs 29.5px type, which is a lead, not body copy. So the type steps up with the panel, the same lever the hero pass used on the lead. At 19px the same 85-95 character line is 760px rather than 636, which is 91% of the panel at 1024px and 65% at 1440px, and the copy carries the visual weight a 1280px panel needs. Measured across 65 panel paragraphs on five page types: median 90 characters, p95 95. Below 1024px the type and the measure are unchanged: at 768px the panel's content box is 670px, so a 636px measure already fills it and there is nothing to win. --------------------------------------------------------------- */ --prose-measure: 636px; --prose-measure-lg: 760px; --prose-size-lg: 19px; /* The --prose-panel-pad / --prose-panel-max / --prose-panel-max-lg trio lived here. They sized the card that HUGGED its copy, which is reverted: a 864px card stacked between 1280px cards read as a mistake. Every prose panel is full width again and its copy fills the width by flowing across two columns. Removed rather than left unreferenced. See THE ORPHANED PANEL FLOWS IN TWO COLUMNS in pages.css. */ /* 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; /* Was #8D96AD, which is 2.81:1 on the limits-table header, 2.88:1 on the quote form's "(optional)" and 2.89:1 on its fieldset legends. All six uses of this token are the same role, a small secondary label or a placeholder, all sit on a near-white ground and all failed, so this is a token change rather than six scoped ones. #646F8B is the same hue and saturation, H=223 S=16%, darkened by the smallest step that clears the bar on the worst ground any of them actually sits on: 4.76:1 on the table header, 4.88:1 on the form, 5.01:1 on the homepage stat labels. It stays SECONDARY on purpose. The limits table puts these labels above values in --sk-prose (L=0.118); at L=0.159 the label is still the lighter of the two, so the hierarchy reads the same way it did, just legibly. Same for the placeholder, which stays far lighter than the navy a visitor's own typing appears in. */ --sk-label: #646F8B; --sk-prose: var(--sk-body-copy); /* Superseded: this token now points at --sk-body-copy above. The note below records why it was #646D84 before that. Was #68728A: 4.45:1 on the card fill at 768px, just under the bar. */ --sk-card-text: var(--sk-body-copy); /* 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 was #5C7A9E, which is 4.13:1 on the homepage's white and 3.58:1 on the lightest gradient hero, measured under the glyphs across all 45 gradient-hero eyebrows and all 27 homepage section eyebrows. At 11px it is not WCAG large text, so 4.5:1 applies and both were under. #4E6786 is the SAME hue and saturation, H=213 S=26%, darkened until it clears the bar on the worst ground either eyebrow actually sits on: 4.70:1 against the sitemap hero at 390px and 5.42:1 on the homepage. Deliberately not a grey, and deliberately not the existing --sk-num (#556F91), which is on this hue but only reaches 4.16:1 on the gradient heroes. This token is colour-only, used by exactly the two eyebrow rules and nothing else, so darkening it cannot affect a background. */ --sk-eyebrow: #4E6786; --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; }