/*
Todo:
- [x] Remove non-scheme colors
- [x] Remove color-mix and use real scheme's colors
- [x] Fix font sizes (remove things like --fw-bold)
- [~] Remove selectors that don't exist
- [ ] Use WCAG 3 contrast checker to figure out minimum font sizes/weights
- [x] Fix accessibility
- Clickable areas
- [x] Copy reset and color scheme layers
- [x] Copy parts of components layer
- mrc-buttons
- mrc-cards?
- [x] Use mrc-button components
- [ ] Add light/dark mode support
- Or at least, it must look good for light/dark/transparent backgrounds
- [ ] Simplify selectors
- [~] Remove site.css then remove unnecessary rules
- [ ] Design review
- [ ] Do we actually want to use cards?
- [ ] Move the back button above the progress bar
- [ ] Fix layout so that the block of the questions and the media have a centered vertical alignment
- [ ] Animate the progress bar
*/
@layer reset, base-theme, typography, layout, components;
@layer reset {
*, *::before, *::after {
box-sizing: border-box;
}
html {
/* Note: Prefix still needed for Firefox on Android in landscape as of 2026 */
-moz-text-size-adjust: none;
/* Note: Prefix still needed for Safari on iOS (not iPadOS) in landscape as of 2026 */
-webkit-text-size-adjust: none;
text-size-adjust: none;
scroll-behavior: smooth;
@media(prefers-reduced-motion: reduce) {
scroll-behavior: auto;
}
}
html, body {
margin: 0;
padding: 0;
background: transparent;
}
img, video {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
}
@layer base-theme {
:root {
--c-background: #FFFFFF;
--c-copy: #2e2f31;
--c-heading: #393a3c;
--c-visited: #7b50a9;
--c-primary-light: #E0F2FD;
--c-primary-vibrant: #0096D6;
--c-primary-dark: #004565;
--c-secondary-light: #E6E1D1;
}
body {
color: var(--c-copy);
}
}
/* Todo: Remove unused selectors in this cascade layer */
@layer typography {
@font-face {
font-family: InterVariable;
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('https://rsms.me/inter/font-files/InterVariable.woff2?v=4.1') format('woff2');
}
/*
Todo: Figure out font-switching metrics during page load
*/
:root {
/*
Typography will smoothly scale between a minimum and maximum size based on viewport width.
text (step-0): 16px -> 24px
text (step-6): 20px -> 40px
*/
--step-0: clamp(1rem, 0.913rem + 0.4348svw, 1.25rem ); /* p */
--step-1: clamp(1.0699rem, 0.954rem + 0.5794svw, 1.4031rem); /* h6 */
--step-2: clamp(1.1447rem, 0.9951rem + 0.7482svw, 1.5749rem); /* h5 */
--step-3: clamp(1.2247rem, 1.0359rem + 0.9444svw, 1.7678rem); /* h4 */
--step-4: clamp(1.3104rem, 1.076rem + 1.172svw, 1.9842rem); /* h3 */
--step-5: clamp(1.402rem, 1.1149rem + 1.4352svw, 2.2272rem); /* h2 */
--step-6: clamp(1.5rem, 1.1521rem + 1.7391svw, 2.5rem ); /* h1 */
}
html, body, button {
font-family: "InterVariable", Helvetica, sans-serif;
font-feature-settings: "ss03" 1, "cv01" 1, "cv05" 1, "cv07" 1, "cv14" 1;
line-height: 1.5;
}
html, body {
font-size: var(--step-0);
font-weight: 400;
}
h1 { font-size: var(--step-6); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-2); }
h5 { font-size: var(--step-1); }
h6 { font-size: var(--step-1); }
mrc-lead { font-size: var(--step-2); }
:where(h1, h2, h3, h4, h5, h6) {
color: var(--c-heading);
font-weight: 600;
line-height: 1.1;
text-wrap: pretty;
}
:where(h1, h2, h3, h4, h5, h6, p) {
margin-top: 0.75em;
margin-bottom: 0;
}
:where(h1, h2, h3) {
letter-spacing: -0.025ch;
}
h1 {
color: var(--c-primary-vibrant);
margin-top: 4rem;
margin-bottom: 2rem;
width: fit-content;
min-width: 6ch;
text-align: center;
&::after {
display: block;
content: "";
background: currentColor;
width: min(100%, 6ch);
margin-inline: auto;
margin-block-start: 1rem;
height: 0.3rem;
}
}
h3 {
font-weight: 500;
}
button, a {
font-size: 1rem;
font-weight: 550;
color: var(--c-primary-vibrant);
&:visited {
color: var(--c-visited);
}
&:focus-within {
outline: 3px solid blue;
outline-offset: 3px;
}
}
mrc-primary, mrc-primary * {
color: var(--c-primary-vibrant);
}
small {
font-size: 0.8rem;
}
.screenreader-only {
position: absolute;
/* Need a non-zero size for Safari */
width: 1px;
height: 1px;
/* Prevent Safari fix from messing up page layout */
margin: -1px;
padding: 0px;
border: 0px solid transparent;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
@layer layout {
/* Todo: Put layout related styles in here */
/* Note: Prevent overflowing from triggering a runaway infinite resize loop with iframe's parent */
html, body, #assessment-app {
overflow-x: hidden;
overflow-y: hidden;
}
/*
Note: Explicitly turn off the margin-top on the first prose element.
This is to prevent a loop between the assessment iframe and its parent that constantly increases the iframe's height
*/
:is(h1, h2, h3, h4, h5, h6, p):first-of-type {
margin-top: 0px;
}
/*
Note: Explicitly turn off the margin-bottom on the last button element.
This is to prevent a loop between the assessment iframe and its parent that constantly increases the iframe's height
*/
:is(mrc-button, mrc-button-secondary, mrc-button-outline) {
margin-bottom: 0 !important;
}
}
@layer components {
/* Todo: Put component related styles here */
/* buttons */
mrc-button, mrc-button-secondary, mrc-button-outline {
cursor: pointer;
/* Todo: Add other Safari-isms here */
-webkit-user-select: none;
user-select: none;
display: inline-block;
width: fit-content;
align-content: center;
margin-block: 2rem;
border-radius: 0.25rem;
box-shadow: 0px 2px 4px -1px rgb(from var(--c-copy) r g b / 0.5);
&:focus-within {
outline: 3px solid black;
outline-offset: 3px;
}
> p {
display: contents;
}
button {
background: transparent;
border: 0px solid transparent;
cursor: pointer;
}
button, a {
display: inline-block;
padding: 0.5rem 1rem;
color: currentColor;
text-decoration: none;
word-wrap: break-word;
&:focus-visible, &:focus-within {
outline: transparent;
outline-offset: 3px;
}
}
}
mrc-button {
background: var(--c-primary-dark);
border: 2px solid var(--c-primary-dark);
color: var(--c-background);
&:hover, &:focus-within {
background: var(--c-primary-vibrant);
}
}
mrc-button-secondary {
background: var(--c-primary-vibrant);
border: 2px solid var(--c-primary-vibrant);
color: var(--c-background);
&:hover, &:focus-within {
background: var(--c-primary-light);
color: var(--c-heading);
}
}
/* Cards */
mrc-card {
/* Customisable styles */
/*
Allow shadow tinting based on containing element by overwriting this custom property.
Note: this must be overridden manually for custom background colors because advanced attr()
support hasn't reached baseline and we don't want to lose out of our background
layering support.
This can be set in such a way to change the card from an opaque object obscuring a light
source to the card itself becoming an emissive object.
TODO(2028): Look at moving these into a CSS function so they can inherit values from local
custom properties falling back to custom properties defined on :root. Or if the `inherits()`
proposal gets added and reaches baseline, use that.
*/
--c-shadow-base: oklch(from var(--c-copy) l c h);
--box-shadow:
0px 0.3px 0.6px 0px oklch(from var(--c-shadow-base) l c h / 0.05),
0px 2.4px 4.8px 0px oklch(from var(--c-shadow-base) l c h / 0.14),
0px 7.7px 15.4px 0px oklch(from var(--c-shadow-base) l c h / 0.23)
;
/* Default styles */
box-shadow: var(--box-shadow);
background: var(--c-background);
border-radius: 0.25rem;
overflow: clip;
/* Allow space to show box-shadow */
margin-block: 0.5rem;
/* Dock the first element to the top edge of the card */
& > *:first-child {
margin-top: 0;
}
/* Card content is special, so tweak typography for emphasis */
* {
text-wrap: balance;
line-height: 1.8;
word-break: break-word;
}
}
}
mrc-button-outline {
/*
Note: This button is different from the main site's styles.
The main site renders this button as glassy / transparent.
The button must always be readable, so care is taken on where the button is used on our
website to maintain readability.
However, the self assessment _may_ be run in a transparent iframe which would mean we lose
our readability guarantees. So we need to give up the glassy effect to maintain readability.
*/
background: oklch(from var(--c-background) l c h / 0.5);
border: 2px solid var(--c-primary-dark);
color: var(--c-primary-dark);
&:hover, &:focus-within {
background: var(--c-primary-light);
}
}
/* Add disabled state support to the mrc-button components */
:where(mrc-button, mrc-button-secondary, mrc-button-outline):has(button[disabled]) {
&, button {
cursor: not-allowed;
}
background: lightgray;
border-color: gray;
color: var(--c-copy);
box-shadow: none;
}
#assessment-app {
.card {
width: min(74rem, calc(100% - 2rem));
margin-inline: auto;
:where(mrc-button, mrc-button-secondary, mrc-button-outline) {
margin-inline: auto;
}
button {
display: block;
margin-inline: auto;
min-width: 10rem;
padding: 1rem;
}
.back-link {
button {
min-width: auto;
padding: 0.5rem 1rem;
}
margin: 0;
}
}
.intro-card {
text-align: center;
.intro-copy,
.helper {
max-width: 72ch;
margin-inline: auto;
text-align: center;
}
.intro-heading {
padding-bottom: 0.85rem;
border-bottom: 1px solid var(--c-primary-vibrant);
}
.audience-grid {
border: 0;
text-align: center;
padding: 0;
white-space: normal;
.audience-option {
position: relative;
display: block;
width: 10rem;
margin: 0;
white-space: normal;
.audience-input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.audience {
cursor: pointer;
display: flex;
width: 100%;
padding: 1rem;
align-items: center;
justify-content: center;
border-radius: 10rem;
background: var(--c-background);
box-shadow: inset 0px 0px 8px 0px grey;
color: var(--c-primary-dark);
text-align: center;
font: inherit;
font-weight: 700;
transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
&:hover {
background: var(--c-primary-light);
color: var(--c-primary-vibrant);
}
}
.audience-input:focus-visible + .audience {
outline: 3px solid var(--c-primary-vibrant);
outline-offset: 3px;
}
.audience-input:checked + .audience {
background: var(--c-primary-vibrant);
color: var(--c-background);
}
.audience-note {
margin: 0.45rem 0 0;
color: var(--c-primary-dark);
text-align: center;
line-height: 1.25;
max-width: 14rem;
}
}
.audience-separator {
display: block;
margin: 0.2rem 0 0.85rem;
color: var(--c-primary-vibrant);
font-weight: 700;
line-height: 1;
}
}
}
.question-card {
display: grid;
grid-template-columns: 1fr auto;
align-items: start;
> :not(.back-link) {
grid-column: 1 / -1;
}
.question-chip {
grid-row: 1;
margin: 0 auto;
width: min(56rem, 100%);
padding: 0.45rem 1rem;
text-align: center;
letter-spacing: 0.15em;
font-weight: 700;
text-transform: uppercase;
color: var(--c-copy);
}
.meter {
grid-row: 2;
display: block;
width: 100%;
height: 0.75rem;
margin: 1rem 0 0.75rem;
background: lightgrey;
border: 0;
border-radius: 999px;
overflow: hidden;
-webkit-appearance: none;
appearance: none;
}
.meter::-webkit-progress-bar {
background: lightgrey;
}
.meter::-webkit-progress-value,
.meter::-moz-progress-bar {
background: var(--c-primary-vibrant);
}
.back-link {
grid-row: 3;
grid-column: 1;
}
.question-heading {
grid-row: 4;
margin-top: 1.3rem;
margin-bottom: 1.25rem;
text-align: center;
}
fieldset {
grid-row: 6;
width: 100%;
border: 0;
margin: 0;
padding: 0;
legend {
font-weight: 700;
margin-bottom: 0.7rem;
color: var(--c-copy);
}
.row {
display: flex;
/*
Todo: Improve these checkbox inputs and labels:
- Moving the input within the label to simplify these selector
- Having the background for the label wrapping behind the input
- Simplify any attributes on the elements
*/
input {
width: 1.5rem;
height: 1.5rem;
margin: 0;
flex: 0 0 auto;
position: relative;
top: 0.5rem;
accent-color: var(--c-primary-vibrant);
}
input + label {
cursor: pointer;
display: inline-block;
padding: 0.5rem;
flex: 1 1 auto;
font-size: 1rem;
line-height: 1.5;
color: var(--c-copy);
text-wrap: balance;
}
input:hover + label, label:hover{
color: var(--c-primary-dark);
background: var(--c-primary-light);
}
input:hover, input:has(& + label:hover) {
accent-color: var(--c-primary-dark);
}
}
.option-separator {
margin: 1rem 0 0;
text-align: start;
font-weight: 700;
color: var(--c-copy);
text-transform: uppercase;
}
}
.illustration {
grid-row: 5;
width: 100%;
margin: 1rem 0;
border-radius: 0.55rem;
overflow: hidden;
align-self: start;
display: block;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.primary {
grid-row: 7;
}
}
.contact-card {
.contact-form-embed {
margin-top: 1rem;
}
}
.result-card {
padding-top: clamp(1.4rem, 2.4vw, 2rem);
padding-bottom: clamp(1.6rem, 2.8vw, 2.4rem);
background: var(--c-background);
.result-lead {
margin: 0;
color: var(--c-copy);
font-weight: 500;
text-align: center;
}
.result-intro {
margin: 0.55rem auto 1.6rem;
color: var(--c-copy);
text-align: center;
}
.result-audience-banner {
margin: 0 0 1.25rem;
padding: 0.5rem 0.75rem;
color: var(--c-primary-dark);
font-weight: 700;
letter-spacing: 0.08em;
text-align: center;
text-transform: uppercase;
}
.result-symptoms-heading {
margin: 0 0 0.7rem;
color: var(--c-copy);
font-weight: 700;
}
.result-symptoms {
margin-top: 0.5rem;
}
.result-symptom-group {
border-top: 1px solid var(--c-primary-vibrant);
padding: 0.75rem 1rem 0.85rem;
background: var(--c-primary-light);
}
.result-symptom-group:first-of-type {
border-top: 0;
}
.result-group-heading {
margin: 0;
font-weight: 700;
color: var(--c-copy);
}
.result-group-list {
margin: 0.35rem 0 0;
padding: 0;
list-style: none;
}
.result-symptom-item {
margin-top: 0.18rem;
color: var(--c-primary-dark);
line-height: 1.35;
}
.result-section-heading {
position: relative;
margin: 2rem 0 1rem;
color: var(--c-primary-vibrant);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
text-align: center;
&::after {
content: "";
display: block;
width: min(18rem, 100%);
height: 1px;
margin: 0.5rem auto 0;
background: color-mix(in srgb, var(--c-primary-vibrant) 30%, var(--c-background));
}
}
.result-copy {
margin: 0.85rem 0 0;
color: var(--c-copy);
line-height: 1.55;
}
.result-actions {
display: flex;
justify-content: center;
gap: 1rem;
padding: 1rem;
:where(mrc-button, mrc-button-secondary, mrc-button-outline) {
margin: 0;
}
}
}
.contact-card {
.back-link {
margin-bottom: 0.75rem;
}
h2 {
margin-top: 0;
text-align: center;
}
.helper {
margin: 0.5rem auto 1.05rem;
max-width: 72ch;
color: var(--c-copy);
text-align: center;
}
}
}
@media (min-width: 56rem) {
#assessment-app {
.question-card {
/* Desktop: place options and illustration side by side. */
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
column-gap: clamp(1rem, 2.4vw, 2rem);
.question-chip,
.meter,
.back-link,
.question-heading,
> .primary {
grid-column: 1 / -1;
}
.back-link {
grid-column: 1;
}
> .illustration {
grid-row: 5;
grid-column: 2;
margin-top: 0;
}
> fieldset:not(.back-link) {
grid-row: 5;
grid-column: 1;
min-width: 0;
}
}
.intro-card {
.audience-grid {
/* Desktop: keep audience options and separator on one line. */
white-space: nowrap;
.audience-option {
display: inline-block;
vertical-align: top;
width: 13.5rem;
margin: 0 0.675rem;
}
.audience-separator {
display: inline-block;
margin: 0 0.675rem;
line-height: 4.1rem;
vertical-align: top;
}
}
}
.result-card,
.contact-card {
.contact-fields {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
}
}