/* Running Squiz Matrix Developed by Squiz - http://www.squiz.net Squiz, Squiz Matrix, MySource, MySource Matrix and Squiz.net are registered Trademarks of Squiz Pty Ltd Page generated: 08 October 2026 09:15:56 */ @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,700&display=swap"); /* -------------------------------------------------------------------------- 1. Tokens Space-separated RGB so they work with Tailwind's opacity variables. -------------------------------------------------------------------------- */ :root { /* Primary palette */ --jid-blue: 0 183 241; /* #00B7F1 headings, buttons, accents (2.3:1 on white — approved for this site) */ --jid-dark-blue: 0 93 131; /* #005D83 7.3:1 on white — links, h2, buttons */ --jid-gray-1: 51 62 72; /* #333E48 10.9:1 on white — body text */ --jid-gray-2: 86 86 90; /* #56565A 7.3:1 on white — secondary text, borders */ --jid-green-1: 208 221 39; /* #D0DD27 DECORATIVE / bg with Gray 1 text only */ --jid-green-2: 156 185 45; /* #9CB92D DECORATIVE ONLY (2.2:1 on white) */ /* Full palette (use sparingly) */ --jid-dark-green-2: 55 114 37; /* #377225 5.8:1 white text. NB guide lists wrong hex (005D83) */ /* Tints (sampled from guide swatches) */ --jid-blue-20: 234 248 254; /* #EAF8FE */ --jid-dark-blue-20: 222 233 240; /* #DEE9F0 */ --jid-green-1-25: 243 246 201; /* #F3F6C9 */ /* Type */ --jid-font: "Montserrat", Arial, Helvetica, sans-serif; /* Focus */ --jid-focus: rgb(var(--jid-dark-blue)); --jid-focus-on-dark: #fff; } /* Tailwind's default ring colour (blue-500 @ 50%) */ *, ::before, ::after, ::backdrop { --tw-ring-color: rgb(var(--jid-dark-blue) / .5); } html, body { font-family: var(--jid-font); } body { font-weight: 400; color: rgb(var(--jid-gray-1)); } /* NB: old @font-face mapped Brown *Regular* to weight 600, so anything at 600 (h2, buttons, .leading-text, .cta-chevron) was rendering as regular. It will now render true SemiBold — check visual weight. */ /* Client decision: primary Blue approved for headings + buttons on this site (contrast requirement waived). Body-size text and links stay Dark Blue. */ main h1 { font-weight: 700; letter-spacing: -0.01em; /* Montserrat sets wide at display sizes */ color: rgb(var(--jid-blue)); } main h2 { font-weight: 600; color: rgb(var(--jid-blue)); } main h3 { font-weight: 600; color: rgb(var(--jid-gray-1)); } .leading-text { color: rgb(var(--jid-dark-blue)); } /* -------------------------------------------------------------------------- 3. Links + CTAs -------------------------------------------------------------------------- */ main a { color: rgb(var(--jid-dark-blue)); } main a:hover { color: rgb(var(--jid-gray-1)); } /* Footer bg unknown — verify this hover colour against it */ footer a:hover { color: rgb(var(--jid-dark-blue)); } .cta-chevron { color: rgb(var(--jid-gray-1)); } .cta-chevron::before { border-color: rgb(var(--jid-blue)); /* decorative underline; text carries meaning */ } .cta-chevron:hover { color: rgb(var(--jid-dark-blue)); } /* Original uses !important, so these must too */ .blue-button { background-color: rgb(var(--jid-blue)) !important; color: #fff !important; } .blue-button:hover { background-color: rgb(var(--jid-dark-blue)) !important; } /* -------------------------------------------------------------------------- 4. Focus — replaces blue-300 ring (1.9:1, fails 1.4.11 / 2.4.13) -------------------------------------------------------------------------- */ :focus-visible { outline: 3px solid var(--jid-focus); outline-offset: 2px; } .blue-button:focus, .blue-button:focus-visible { --tw-ring-shadow: 0 0 #0000; box-shadow: none; outline: 3px solid var(--jid-focus); outline-offset: 3px; } /* On dark surfaces */ .bg-primary-blue :focus-visible, .bg-black :focus-visible, .bg-primary-green :focus-visible, .modal :focus-visible { outline-color: var(--jid-focus-on-dark); } /* -------------------------------------------------------------------------- 5. Forms -------------------------------------------------------------------------- */ form label { color: rgb(var(--jid-gray-1)); } form input, form textarea { background-color: rgb(var(--jid-blue-20)); color: rgb(var(--jid-gray-1)); /* Input fill vs page is ~1.1:1 — add a boundary to meet 1.4.11. Remove if inputs already have a visible border on the live site. */ border: 0; border-bottom: 2px solid rgb(var(--jid-gray-2)); } form input:focus, form textarea:focus { border-color: rgb(var(--jid-dark-blue)); --tw-ring-color: rgb(var(--jid-dark-blue)); } /* Placeholder was #9CA3AF (2.4:1) */ input::placeholder, textarea::placeholder { color: rgb(var(--jid-gray-2)); } /* -------------------------------------------------------------------------- 6. Tailwind utility remaps (class names kept so templates don't change) -------------------------------------------------------------------------- */ /* Blue #2D81BF → Dark Blue. White text on it: 7.3:1 */ .bg-primary-blue, .hover\:bg-primary-blue:hover { background-color: rgb(var(--jid-dark-blue) / var(--tw-bg-opacity, 1)); } .text-primary-blue { color: rgb(var(--jid-blue) / var(--tw-text-opacity, 1)); } /* Old dark blue #194763 → Dark Blue */ .hover\:bg-primary-dark-blue:hover { background-color: rgb(var(--jid-dark-blue) / var(--tw-bg-opacity, 1)); } /* Light blue panel #EAF2F8 → Blue 20% */ .bg-secondary-blue { background-color: rgb(var(--jid-blue-20) / var(--tw-bg-opacity, 1)); } /* Yellow accents → Green 1. Text on it must be Gray 1 (7.3:1), NOT white (1.5:1) */ .bg-primary-yellow, .bg-jid-yellow-3 { background-color: rgb(var(--jid-green-1) / var(--tw-bg-opacity, 1)); color: rgb(var(--jid-gray-1)); } .bg-secondary-yellow { background-color: rgb(var(--jid-green-1-25) / var(--tw-bg-opacity, 1)); } .border-b-yellow-400, .secondary-landing-page header { border-bottom-color: rgb(var(--jid-green-1)); } ul.link-group li::marker { color: rgb(var(--jid-blue)); } /* Green 1 marker is 1.5:1 — too faint */ /* Greens → Dark Green 2 (white text 5.8:1). Green 2 would fail with white text */ .bg-primary-green, .bg-secondary-green { background-color: rgb(var(--jid-dark-green-2) / var(--tw-bg-opacity, 1)); } /* Greys */ .text-primary-grey, .text-gray-700 { color: rgb(var(--jid-gray-1) / var(--tw-text-opacity, 1)); } .menu-icon, .menu-icon::before, .menu-icon::after { background: rgb(var(--jid-gray-1)); } .menu-icon-toggle { background: transparent; } .menu-icon-toggle::before, .menu-icon-toggle::after { background: #fff; } /* Tailwind blue-500 (3.7:1 — fails for body text) */ .text-blue-500 { color: rgb(var(--jid-dark-blue) / var(--tw-text-opacity, 1)); } /* 35% #336699 — assumed decorative. If it carries meaning it fails contrast */ .text-\[\#336699\]\/\[\.35\] { color: rgb(var(--jid-dark-blue) / .35); }