/* ========================================================================== HIE DESIGN TOKENS -------------------------------------------------------------------------- Single source of truth for every colour, size, typeface, spacing step and motion timing on the site. RULE: no other stylesheet in this build may contain a raw hex value, px font-size or hard-coded timing. Everything references a token from here. A rebrand is then one file, not a search across forty templates. Contrast ratios noted below were calculated against the stated background using the WCAG 2.1 relative-luminance formula. Where a token is marked "AA text", it meets 4.5:1 for normal body text. Where marked "large/UI only", it meets 3:1 and must NOT be used for body copy. ========================================================================== */ :root { /* ---------------------------------------------------------------------- 0. IDENTITY — REV C (canonical) Blue · Black · White. Every value below is measured, and every derived value is the smallest move that clears the bar it has to clear. Rev C supplies four colours and they do not cover a working interface, so five are derived here. Two pairings in the supplied palette fail outright and must never be used: Signal Blue on Ink Blue 2.38:1 — a link on a blue panel Ink Blue on Structure Black 1.65:1 — the two darks do not separate The first is why --hie-signal-blue-on-dark exists. The second is why no component ever puts the brand blue on the black. ---------------------------------------------------------------------- */ --hie-ink-blue: #0A2F7B; /* keystone field, display type. 12.31:1 on white */ --hie-ink-blue-raised: #2C4C8D; /* hover/raised blue surface. White on it 8.32:1 */ --hie-signal-blue: #2563EB; /* links, focus, CTA fill. 5.17:1 on white */ --hie-signal-blue-hover: #1F51C0; /* derived. 7.01:1 on white — clears AAA */ --hie-signal-blue-on-dark: #A6BFF7; /* derived. 6.69:1 on ink blue, 4.52:1 on raised */ --hie-structure-black: #050608; /* body copy, one-colour mark. 20.27:1 on white */ --hie-muted: #6C6C6D; /* derived. 4.51:1 on the WORST light ground */ --hie-muted-inverse: #8C9DC1; /* derived. 4.52:1 on ink blue */ --hie-edge: #949495; /* derived. 3.03:1 — control edges (WCAG 1.4.11) */ /* ---------------------------------------------------------------------- 1. BRAND — INK & NAVY The base. Ink is the near-black the whole site sits on; navy is the brand colour proper. Deliberately no pure black anywhere — #000 against white is harsh at the body sizes this site uses. ---------------------------------------------------------------------- */ --hie-ink-900: var(--hie-structure-black); /* base ink. 18.6:1 on white — AA/AAA text */ --hie-ink-800: #14161C; /* raised ink surfaces, dark section bg */ --hie-navy-700: var(--hie-ink-blue); /* brand navy. 12.9:1 on white — AA text */ --hie-navy-600: var(--hie-ink-blue-raised); /* hover state for navy elements */ --hie-navy-500: var(--hie-signal-blue); /* links on white. 6.9:1 — AA text */ --hie-navy-100: #DCE5F8; /* tint: quiet navy surfaces, chips */ --hie-navy-050: #F5F7FA; /* tint: section wash */ /* ---------------------------------------------------------------------- 2. SIGNAL GREEN — STATUS ONLY Reserved for credential-valid and course-completion states. Its meaning comes entirely from its scarcity. It must never be used for a button, a heading, a link, a section background or a decorative accent. If green appears anywhere a learner or employer has NOT just been told something is verified or complete, the system has lost its only unambiguous signal. ---------------------------------------------------------------------- */ --hie-green-500: #0FA968; /* the signal. 3.05:1 on white — large/UI only */ --hie-green-700: #0A7A4A; /* green TEXT on white. 5.5:1 — AA text */ --hie-green-900: #053D25; /* green text on green-050 tint */ --hie-green-050: #E8F7F0; /* valid-state card background */ /* ---------------------------------------------------------------------- 3. BRASS — RETIRED AT REV C Rev C is Blue, Black and White. There is no brass. The four token NAMES are kept and re-pointed at the blue ramp rather than deleted, because roughly a dozen rules across four stylesheets reference them and a bulk rename is the operation that has already gone wrong twice on this project (ADR-021). They are deprecated: use the signal-blue tokens in new work, and these will be removed once nothing references them. CONSEQUENCE WORTH KNOWING: the CTA is now the same hue as every link. Brass gave buttons a hue nothing else on the site had. Blue-on-blue relies on fill and weight for salience instead, so a primary CTA must always be a filled block, never a text link. ---------------------------------------------------------------------- */ --hie-brass-400: var(--hie-signal-blue); /* CTA fill. Ink text on this = 8.2:1 */ --hie-brass-500: var(--hie-signal-blue-hover); /* CTA hover fill */ --hie-brass-600: var(--hie-signal-blue-hover); /* brass TEXT on white. 5.7:1 — AA text */ --hie-brass-050: #EBEEF4; /* quiet brass wash */ /* ---------------------------------------------------------------------- 4. CREDENTIAL STATUS Four states, four colours. Colour is never the only carrier of meaning — every status renders with an icon and a text label as well (WCAG 1.4.1). Expired orange is deliberately cooler and deeper than CTA brass so the two never read as the same thing on a page that shows both. ---------------------------------------------------------------------- */ --hie-status-valid: var(--hie-green-700); /* 5.5:1 on white */ --hie-status-valid-bg: var(--hie-green-050); --hie-status-expired: #B45309; /* 5.1:1 on white — AA */ --hie-status-expired-bg:#FEF3E2; --hie-status-revoked: #B3261E; /* 6.5:1 on white — AA */ --hie-status-revoked-bg:#FDEDEC; --hie-status-notfound: #4C5663; /* 8.0:1 on white — AA */ --hie-status-notfound-bg:#F1F3F6; /* ---------------------------------------------------------------------- 5. NEUTRAL RAMP grey-500 is the lightest grey permitted for body text (4.6:1 on white). Anything lighter is for borders, rules and disabled states only. ---------------------------------------------------------------------- */ --hie-white: #FFFFFF; --hie-grey-050: #F7F8FA; --hie-grey-100: #EEF1F5; --hie-grey-200: #DDE3EB; --hie-grey-300: #C2CBD6; --hie-grey-400: #9AA5B4; /* borders, dividers — NOT text */ --hie-grey-500: #6B7684; /* 4.6:1 on white — minimum for body text */ --hie-grey-600: #4C5663; /* 8.0:1 on white — AA text */ --hie-grey-700: #343C46; /* 11.3:1 on white — AA/AAA text */ /* ---------------------------------------------------------------------- 6. SEMANTIC ALIASES Templates and components reference THESE, not the raw ramp above. That way a future dark mode or a palette change is re-pointing ten aliases rather than auditing every rule in the build. ---------------------------------------------------------------------- */ --hie-color-bg: var(--hie-white); --hie-color-bg-sunken: var(--hie-navy-050); --hie-color-bg-inverse: var(--hie-ink-blue); --hie-color-surface: var(--hie-white); --hie-color-surface-raised:var(--hie-navy-050); --hie-color-text: var(--hie-structure-black); --hie-color-text-muted: var(--hie-muted); --hie-color-text-subtle: var(--hie-muted); --hie-color-text-inverse: var(--hie-white); --hie-color-text-on-brass: var(--hie-white); --hie-color-link: var(--hie-signal-blue); --hie-color-link-hover: var(--hie-signal-blue-hover); --hie-color-border: var(--hie-grey-200); --hie-color-border-strong: var(--hie-edge); --hie-color-focus: var(--hie-signal-blue); --hie-color-focus-inverse: var(--hie-white); --hie-color-cta-bg: var(--hie-signal-blue); --hie-color-cta-bg-hover: var(--hie-signal-blue-hover); --hie-color-cta-text: var(--hie-white); /* Links on the blue footer. Signal Blue there is 2.38:1 and unusable. */ --hie-color-link-inverse: var(--hie-signal-blue-on-dark); --hie-color-text-inverse-muted: var(--hie-muted-inverse); /* ---------------------------------------------------------------------- 7. TYPOGRAPHY — FAMILIES (rev C) Zilla Slab Bold for the wordmark and display; IBM Plex Sans for everything else. Both are open licence, both are on Google Fonts, so the cPanel-only constraint is unaffected. Zilla Slab is a slab serif, which is a heavier commitment than the previous grotesque — worth noting that slab serifs sit closer to institutional typography than a geometric sans does. It stays clear of the banned visual language because it is a contemporary slab rather than an old-style or transitional serif, and it carries no collegiate heritage cues on its own. ---------------------------------------------------------------------- */ --hie-font-display: 'Zilla Slab', Rockwell, 'Roboto Slab', Georgia, serif; --hie-font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; --hie-font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, Consolas, monospace; /* Credential IDs, CPD hour counts and price figures render in mono. A credential ID is a reference number a person reads aloud over the phone to verify a hire — tabular, unambiguous glyphs are functional, not decorative. */ /* ---------------------------------------------------------------------- 8. TYPOGRAPHY — FLUID SCALE Fluid clamp() so no breakpoint-specific font sizes are ever needed. Ratio runs ~1.2 at 360px up to ~1.333 at 1440px, giving the large display-to-body contrast the brief calls for without shrinking body copy on mobile. ---------------------------------------------------------------------- */ --hie-text-xs: clamp(0.75rem, 0.73rem + 0.10vw, 0.813rem); --hie-text-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.938rem); --hie-text-base: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem); --hie-text-md: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem); --hie-text-lg: clamp(1.313rem, 1.22rem + 0.42vw, 1.563rem); --hie-text-xl: clamp(1.563rem, 1.40rem + 0.74vw, 2.063rem); --hie-text-2xl: clamp(1.875rem, 1.58rem + 1.31vw, 2.75rem); --hie-text-3xl: clamp(2.25rem, 1.75rem + 2.22vw, 3.75rem); --hie-text-4xl: clamp(2.625rem, 1.83rem + 3.53vw, 5rem); /* Weights */ --hie-weight-regular: 400; --hie-weight-medium: 500; --hie-weight-semibold: 600; --hie-weight-bold: 700; /* Line heights — body sits at 1.65 per brief; display tightens as it grows */ --hie-leading-display: 1.05; --hie-leading-heading: 1.18; --hie-leading-snug: 1.35; --hie-leading-body: 1.65; --hie-leading-loose: 1.75; /* Tracking — display tightens, small caps labels open up */ --hie-tracking-display: -0.03em; --hie-tracking-heading: -0.018em; --hie-tracking-normal: 0; --hie-tracking-label: 0.09em; /* Measure — capped so long-form policy pages stay readable */ --hie-measure-prose: 68ch; --hie-measure-narrow: 46ch; /* ---------------------------------------------------------------------- 9. SPACING 4px base, non-linear at the top so section rhythm has real jumps. ---------------------------------------------------------------------- */ --hie-space-3xs: 0.25rem; /* 4px */ --hie-space-2xs: 0.5rem; /* 8px */ --hie-space-xs: 0.75rem; /* 12px */ --hie-space-sm: 1rem; /* 16px */ --hie-space-md: 1.5rem; /* 24px */ --hie-space-lg: 2rem; /* 32px */ --hie-space-xl: 3rem; /* 48px */ --hie-space-2xl: 4rem; /* 64px */ --hie-space-3xl: 6rem; /* 96px */ --hie-space-4xl: 8rem; /* 128px */ /* Section padding — fluid, so vertical rhythm scales with the viewport */ --hie-section-y: clamp(3rem, 1.5rem + 6.5vw, 7rem); /* ---------------------------------------------------------------------- 10. LAYOUT The asymmetric grid the brief calls for. Content sits on a 12-column grid; the catalogue uses a fixed 300px filter rail plus fluid results. ---------------------------------------------------------------------- */ --hie-container-max: 1280px; --hie-container-wide: 1480px; --hie-container-text: 760px; --hie-gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem); --hie-grid-columns: 12; --hie-grid-gap: clamp(1rem, 0.7rem + 1.3vw, 2rem); --hie-rail-width: 300px; /* catalogue filter rail, desktop */ --hie-header-height: 84px; /* used for scroll-margin under sticky nav */ /* ---------------------------------------------------------------------- 11. RADII, BORDERS, ELEVATION Small radii throughout. A credential platform should feel like a document system, not a consumer app. ---------------------------------------------------------------------- */ --hie-radius-xs: 2px; --hie-radius-sm: 4px; --hie-radius-md: 6px; --hie-radius-lg: 10px; --hie-radius-pill: 999px; --hie-border-hairline: 1px; --hie-border-thick: 2px; /* Shadows tinted with the ink hue rather than neutral black — keeps elevation from going grey-blue against the navy palette. */ --hie-shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.06), 0 1px 3px rgba(10, 22, 40, 0.04); --hie-shadow-md: 0 2px 4px rgba(10, 22, 40, 0.06), 0 6px 16px rgba(10, 22, 40, 0.08); --hie-shadow-lg: 0 4px 8px rgba(10, 22, 40, 0.06), 0 16px 40px rgba(10, 22, 40, 0.12); /* ---------------------------------------------------------------------- 12. MOTION Every duration and easing in the build comes from here, so the prefers-reduced-motion override in base.css can neutralise all of it in one place. ---------------------------------------------------------------------- */ --hie-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --hie-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --hie-dur-fast: 200ms; --hie-dur-mid: 320ms; --hie-dur-slow: 400ms; --hie-reveal-shift: 18px; /* scroll-reveal travel distance */ /* ---------------------------------------------------------------------- 13. Z-INDEX Named so nothing in this build ever needs z-index: 9999. ---------------------------------------------------------------------- */ --hie-z-base: 1; --hie-z-sticky: 100; --hie-z-header: 200; --hie-z-dropdown: 300; --hie-z-overlay: 400; --hie-z-sheet: 500; /* mobile filter bottom-sheet */ --hie-z-modal: 600; --hie-z-toast: 700; --hie-z-skiplink: 9000; /* must clear the sticky header when focused */ } /* -------------------------------------------------------------------------- REDUCED MOTION Neutralise the motion tokens at source. Any component using these tokens is automatically compliant without writing its own media query. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --hie-dur-fast: 1ms; --hie-dur-mid: 1ms; --hie-dur-slow: 1ms; --hie-reveal-shift: 0px; } } /* -------------------------------------------------------------------------- FORCED COLORS (Windows High Contrast) Government buyers procure against accessibility standards and Windows High Contrast Mode is commonly tested. Status colours must survive it, so status components also carry icons and text labels — see base.css. -------------------------------------------------------------------------- */ @media (forced-colors: active) { :root { --hie-color-border: CanvasText; --hie-color-focus: Highlight; } }