/* global.css ā Brand, Dark Mode & WCAG 2.2 AA Styles */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;900&display=swap');
/* Light Mode Default Variables */
.theme-root {
--bg-canvas: #FFFFFF;
--bg-subtle: #F7F7F8;
--bg-card: #FFFFFF;
--bg-elevated: #F0F0F3;
--text-primary: #121212;
--text-secondary: #3F3F46;
--text-muted: #52525B;
--border-standard: #D4D4D8;
--brand-red-solid: #E4003B;
--brand-red-inline: #C80032;
--coop-purple-solid: #662381;
--coop-purple-inline: #662381;
--focus-ring: #121212;
background-color: var(--bg-canvas) !important;
color: var(--text-primary) !important;
font-family: 'Poppins', sans-serif !important;
font-style: normal !important;
}
/* Dark Mode Variables (Triggered when .theme-dark is added via masterPage.js) */
.theme-root.theme-dark {
--bg-canvas: #121212;
--bg-subtle: #17171C;
--bg-card: #1C1C21;
--bg-elevated: #26262C;
--text-primary: #F4F4F6;
--text-secondary: #D4D4D8;
--text-muted: #A1A1AA;
--border-standard: #32323A;
--brand-red-solid: #E4003B;
--brand-red-inline: #FF5C82;
--coop-purple-solid: #662381;
--coop-purple-inline: #C490E4;
--focus-ring: #F39407;
}
/* Labour Brand Rule: Never italicise Poppins */
.theme-root *,
.theme-root h1,
.theme-root h2,
.theme-root h3,
.theme-root p,
.theme-root span,
.theme-root a {
font-family: 'Poppins', sans-serif !important;
font-style: normal !important;
}
/* Reusable Classes to Type into the Wix CSS Classes Box */
.surface-subtle {
background-color: var(--bg-subtle) !important;
}
.surface-card {
background-color: var(--bg-card) !important;
border: 1px solid var(--border-standard) !important;
color: var(--text-primary) !important;
}
.text-primary-token {
color: var(--text-primary) !important;
}
.text-secondary-token {
color: var(--text-secondary) !important;
}
.brand-red-text {
color: var(--brand-red-inline) !important;
}
.coop-purple-text {
color: var(--coop-purple-inline) !important;
}
/* Sticky Header Scroll Offset & High-Contrast Focus Ring */
html {
scroll-padding-top: 112px;
}
.theme-root *:focus-visible {
outline: 3px solid var(--focus-ring) !important;
outline-offset: 2px !important;
}
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
.theme-root *,
.theme-root *::before,
.theme-root *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.theme-root.reduce-motion *,
.theme-root.reduce-motion *::before,
.theme-root.reduce-motion *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
top of page
bottom of page
Comments