@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"); :root { /* Typography — admin can still override via group/microsite settings */ --font-family-ubuntu: "Ubuntu", system-ui, sans-serif; --font-family-primary: var(--font-family-ubuntu); --font-primary: var(--font-family-ubuntu); --font-secondary: var(--font-family-ubuntu); --font-size-tiny: 0.75rem; --font-size-small: 0.875rem; --font-size-big: 1.25rem; --font-size-huge: 1.5rem; --font-size-h1: clamp(2rem, 5vw, 3rem); --font-size-h2: clamp(1.5rem, 4vw, 2.25rem); --font-size-h3: clamp(1.25rem, 3vw, 1.75rem); --font-size-h4: 1.375rem; --font-size-h5: 1.125rem; --font-size-h6: 1rem; --heading-font-weight: 700; --heading-1-font-weight: var(--heading-font-weight); --heading-2-font-weight: var(--heading-font-weight); --heading-3-font-weight: var(--heading-font-weight); --heading-4-font-weight: var(--heading-font-weight); --heading-5-font-weight: 600; --heading-6-font-weight: 600; --heading-1-line-height: 1.15; --heading-2-line-height: 1.2; --heading-3-line-height: 1.25; --heading-4-line-height: 1.3; --heading-5-line-height: 1.4; --heading-6-line-height: 1.4; --heading-1-color: var(--colour-text); --heading-2-color: var(--colour-text); --heading-3-color: var(--colour-text); --heading-4-color: var(--colour-text); --heading-5-color: var(--colour-text); --heading-6-color: var(--colour-text); --width-container-extra-large: 90rem; /* Brand colours — admin sets --color-accent / --color-accent-2 on inline style */ --color-accent: #00c4b4; --color-accent-2: #ffa3ff; --color-black: #000000; --color-white: #ffffff; --color-dark: #2d2d2d; --colour-surface: #f4f5f7; /* Primary / teal — references admin primary colour */ --colour-primary: var(--color-accent, #00c4b4); --colour-primary-dark: #009e91; --colour-primary-tint: #e6f7f6; /* Black on teal passes WCAG 4.5:1 (ratio ~9.7:1); white fails (~2.3:1) */ --colour-primary-text: #000000; /* Button variants */ --btn-border-radius: 0.375rem; --btn-padding: 0.5rem 1.25rem; --btn-font-weight: 700; --btn-font-size: 0.9375rem; --btn-transition: background-color var(--transition-interaction), color var(--transition-interaction), border-color var(--transition-interaction), box-shadow var(--transition-interaction); /* Focus — WCAG 2.2 SC 2.4.11 */ --colour-focus: #ffbf47; --colour-focus-width: 3px; --colour-focus-offset: 2px; /* Text — references admin text colour */ --colour-text: var(--color-text, #1a1a2e); --colour-text-muted: #555570; /* Focus (WCAG 2.2 AA) — defined above with button tokens */ /* Transitions */ --transition-interaction: 0.2s ease; /* Microsite header — references admin header colour fields */ --mh-bg: var(--header-background-color, #ffffff); --mh-border-color: #e8e8e8; --mh-link-color: var(--header-link-color, #1a1a2e); --mh-link-hover: var(--header-link-hover-color, #00c4b4); --mh-search-border: var(--color-accent, #00c4b4); --mh-search-btn-bg: var(--color-accent, #00c4b4); --mh-search-btn-hover: var(--header-link-hover-color, #009e91); --mh-search-btn-color: #ffffff; --mh-search-input-bg: #ffffff; --mh-search-focus-shadow: rgba(0, 196, 180, 0.25); --mh-logo-max-width: 8.75rem; --mh-padding-y: 0.75rem; --mh-padding-x: 1.5rem; /* Microsite menu — references admin header link colours */ --mm-link-color: var(--header-link-color, #1a1a2e); --mm-link-hover: var(--header-link-hover-color, #00c4b4); --mm-font-size: 0.95rem; --mm-font-weight: 600; --mm-gap: 2rem; /* Sector */ --sector-hero-height-mobile: 9rem; --sector-hero-height-desktop: 18rem; --sector-hero-title-size: 3rem; --sector-body-margin: 1.88rem; /* Sector CTA banner */ --sector-cta-bg: #f5f5f5; --sector-cta-text-size: 1.5rem; --sector-cta-text-weight: var(--heading-font-weight); --sector-cta-padding-y: 1.88rem; --sector-cta-gap: 1.25rem; --sector-cta-btn-bg: #58c3c5; --sector-cta-btn-radius: 0.375rem; --sector-cta-btn-padding: 0.375rem 1.25rem; --sector-cta-btn-gap: 0.625rem; --sector-cta-btn-font-size: 0.875rem; --sector-cta-btn-font-weight: 500; /* medium — intentionally lighter than heading weight */ }