/* ==========================================================================
pages.css: sections that appear on one page only
----------------------------------------------------------------------------
Grouped by page. Shared building blocks are in components.css.
========================================================================== */
/* ##########################################################################
HOME PAGE (index.html)
########################################################################## */
/* ==========================================================================
FEATURE GRID ("Why this summer school"): four picture cards, four across
(one row); two across from 1199px; one column from 767px.
The cards in a row are the same height and start at the top, so their
photos and titles line up whatever the length of their text; every
photo has the same 4:3 shape.
========================================================================== */
.feature-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--gap-grid);
}
.feature {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-card);
min-width: 0;
}
.feature__image {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--radius-card);
}
.feature__title {
font-family: var(--font-heading);
font-size: var(--text-subheading);
font-weight: 600;
line-height: var(--leading-snug);
}
.feature__text {
line-height: var(--leading-heading);
text-align: left;
}
@media (max-width: 1200px) {
.feature-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Phones: each reason is a row, its title across the top, then a small
square photo level with the text beside it (half the height of
full-width photos; owner, 23 October 2026) */
@media (max-width: 767px) {
.feature-grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-5);
}
.feature {
display: grid;
grid-template-columns: 112px minmax(0, 1fr);
column-gap: var(--space-4);
row-gap: var(--space-2);
}
.feature__title {
grid-column: 1 / -1;
grid-row: 1;
font-size: var(--text-lg);
}
/* 3px down, so its top is level with the first line of text */
.feature__image {
grid-column: 1;
grid-row: 2;
margin-top: 3px;
aspect-ratio: 1;
}
.feature__text {
grid-column: 2;
grid-row: 2;
font-size: var(--text-sm);
}
}
/* ==========================================================================
COURSE SELECTOR (the Courses page, "Courses"; until 23 October 2026 also
the home page, which now has the course strip below)
The level switch (with its four skill tiles), then one column per subject: its heading (icon, name,
one-liner), its introductory course and its intermediate course; the
rows line up across the columns. Each course is a tile: the code and the
level dots, "Details", the title, a short summary (two lines at most)
and "Taught by" the teacher. The
subject one-liners are short, so the headings are all one line high on
wide screens. The title's button stretches over the tile
and opens the course's pop-up (data-dialog; main.js part 4).
From 1200px down two columns: each subject heading across both, its two
courses side by side. From 767px down one column, in subject order.
========================================================================== */
.course-grid-section {
align-items: center;
gap: var(--space-heading-content);
}
.course-picker {
display: flex;
flex-direction: column;
gap: var(--gap-grid);
}
/* In subject order (heading, introductory, intermediate; then the next
subject); on wide screens the grid fills three rows column by column, so
each subject is a column. */
.course-columns {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(3, auto);
grid-auto-columns: minmax(0, 1fr);
gap: var(--gap-grid);
}
/* --------------------------------------------------------------------------
Level dots: ●○ introductory, ●● intermediate (a small inline SVG that
takes the colour of the text around it)
-------------------------------------------------------------------------- */
.level-dots {
flex: none;
width: 18px;
height: 8px;
fill: currentColor;
}
.level-dots__empty {
fill: none;
stroke: currentColor;
stroke-width: 1.5;
}
/* --------------------------------------------------------------------------
Subject headings: the icon in the subject's colour, with the name and
one-liner beside it
-------------------------------------------------------------------------- */
.course-subject {
display: flex;
align-items: center;
gap: var(--space-4);
min-width: 0;
}
.course-subject__icon {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--radius-card);
}
.course-subject__icon svg {
width: 21px;
height: 21px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.course-subject__icon--ai {
color: var(--color-on-dark);
background-color: var(--color-subject-ai);
}
.course-subject__icon--ds {
color: var(--color-on-dark);
background-color: var(--color-subject-data-science);
}
.course-subject__icon--ec {
color: var(--color-subject-text);
background-color: var(--color-subject-economics);
}
.course-subject__icon--fi {
color: var(--color-subject-text);
background-color: var(--color-subject-finance);
}
.course-subject__label {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.course-subject__title {
font-family: var(--font-heading);
font-size: var(--text-xl);
line-height: var(--leading-snug);
}
.course-subject__text {
font-size: var(--text-sm);
line-height: 1.45;
color: var(--color-muted);
}
/* --------------------------------------------------------------------------
Labels (bubbles): the subject's colour (the Faculty biographies) and the
level (outlined for introductory, filled for intermediate; the course
pop-ups)
-------------------------------------------------------------------------- */
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px;
border: 1px solid transparent;
border-radius: var(--radius-pill);
font-size: var(--text-sm);
font-weight: 600;
line-height: 1.3;
}
.badge--ai {
color: var(--color-on-dark);
background-color: var(--color-subject-ai);
}
.badge--ds {
color: var(--color-on-dark);
background-color: var(--color-subject-data-science);
}
.badge--ec {
color: var(--color-subject-text);
background-color: var(--color-subject-economics);
}
.badge--fi {
color: var(--color-subject-text);
background-color: var(--color-subject-finance);
}
.badge--introductory {
border-color: var(--color-level);
color: var(--color-level);
background-color: var(--color-surface);
}
.badge--intermediate {
border-color: var(--color-level);
color: var(--color-on-dark);
background-color: var(--color-level);
}
/* --------------------------------------------------------------------------
Level switch: a light green card across the top of the grid.
- Top: the switch (●○ Introductory | ●● Intermediate), with the chosen
level's name and one line beside it.
- Four skill tiles: lit (white, green border, "✓ Needed") when the
chosen level needs the skill; dashed and grey ("Not needed") when it
does not. Introductory lights one, intermediate all four.
- Underneath: the online prep course and "Not sure?".
main.js part 7 swaps the texts (data-choice-text; the other level's are
hidden) and sets data-chosen on the card. Without JavaScript the card
shows introductory.
-------------------------------------------------------------------------- */
.level-switch {
display: flex;
flex-direction: column;
gap: var(--space-5);
padding: var(--space-6);
border-radius: var(--radius-card);
background-color: var(--color-level-tint);
}
.level-switch__head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4) var(--space-6);
}
.level-switch__control {
display: inline-flex;
flex: none;
gap: var(--space-1);
padding: var(--space-1);
border: 2px solid var(--color-level);
border-radius: var(--radius-pill);
background-color: var(--color-surface);
}
.level-switch__option {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 44px;
padding: 0 20px;
border: 0;
border-radius: var(--radius-pill);
font: inherit;
font-weight: 600;
color: var(--color-level);
cursor: pointer;
transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.level-switch__option .level-dots {
width: 20px;
height: 9px;
}
.level-switch__option:hover {
background-color: var(--color-level-tint);
}
.level-switch__option[aria-pressed="true"] {
color: var(--color-on-dark);
background-color: var(--color-level);
}
.level-switch__option:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 2px;
}
/* Texts that change with the level: both versions sit in the same place,
so the card keeps its height when the level changes; the one not chosen
is hidden from sight and from screen readers */
.level-switch__swap {
display: grid;
}
.level-switch__swap--inline {
display: inline-grid;
}
.level-switch__swap > * {
grid-area: 1 / 1;
}
.level-switch__swap > [hidden] {
display: block;
visibility: hidden;
}
.level-skill__yes[hidden] {
display: flex;
}
/* The chosen level's name (e.g. "New to the subject") and one line */
.level-switch__text {
flex: 1 1 320px;
min-width: 0;
}
.level-switch__name {
display: block;
font-family: var(--font-heading);
font-size: var(--text-subheading);
font-weight: 700;
line-height: var(--leading-snug);
}
.level-switch__sub {
display: block;
margin-top: 2px;
font-size: var(--text-sm);
color: var(--color-muted);
}
/* The four skill tiles: the icon on the left, the name and "Needed" or
"Not needed" beside it. Every name is on two lines (a in the
HTML), so the four tiles have the same shape at every width and the
names and "Needed" line up across the row. */
.level-skills {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-4);
}
.level-skill {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: 1fr auto;
align-items: center;
gap: 2px var(--space-3);
padding: var(--space-4);
border: 2px solid var(--color-level);
border-radius: var(--radius-card);
background-color: var(--color-surface);
transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.level-skill__icon {
grid-row: 1 / 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--radius-round);
color: var(--color-on-dark);
background-color: var(--color-brand);
transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.level-skill__icon svg {
width: 21px;
height: 21px;
}
.level-skill__name {
align-self: end;
font-weight: 600;
line-height: 1.3;
}
.level-skill__status {
align-self: start;
font-size: var(--text-sm);
line-height: 1.4;
}
.level-skill__yes {
display: flex;
align-items: center;
gap: var(--space-1);
font-weight: 600;
color: var(--color-level);
}
.level-skill__yes svg {
width: 14px;
height: 14px;
}
.level-skill__no {
color: var(--color-muted);
}
/* Not needed for introductory: dashed and grey */
.level-switch[data-chosen="introductory"] .level-skill--intermediate {
border-style: dashed;
border-color: var(--color-line);
background-color: transparent;
}
.level-switch[data-chosen="introductory"] .level-skill--intermediate .level-skill__icon {
color: var(--color-muted);
background-color: transparent;
box-shadow: inset 0 0 0 1.5px var(--color-line);
}
.level-switch[data-chosen="introductory"] .level-skill--intermediate .level-skill__name {
font-weight: 500;
color: var(--color-muted);
}
/* Bottom line: the online prep course on the left, "Not sure?" on the right */
.level-switch__foot {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-3) var(--space-6);
font-size: var(--text-sm);
color: var(--color-muted);
}
.level-switch__foot strong {
color: var(--color-ink);
}
.level-switch__prep {
display: flex;
align-items: flex-start;
gap: var(--space-2);
}
.level-switch__prep-icon {
flex: none;
width: 18px;
height: 18px;
margin-top: 1px;
color: var(--color-level);
}
/* Smaller laptops and tablets: the skill tiles 2 x 2 */
@media (max-width: 1200px) {
.level-skills {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Phones: the switch takes the full width, two equal halves, with smaller
text so both labels fit (on very small phones without the dots); the
skill tiles stay 2 x 2, with the icon above the name and "Needed" along
the bottom (so it lines up even where a name wraps on very small phones) */
@media (max-width: 767px) {
.level-switch {
padding: var(--space-card);
}
.level-switch__control {
width: 100%;
}
.level-switch__option {
flex: 1 1 0;
gap: 6px;
min-width: 0;
padding: 0 var(--space-2);
font-size: var(--text-sm);
white-space: nowrap;
}
.level-switch__option .level-dots {
width: 18px;
height: 8px;
}
.level-skills {
gap: var(--space-3);
}
.level-skill {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto 1fr;
padding: var(--space-3);
}
.level-skill__icon {
grid-row: auto;
width: 32px;
height: 32px;
margin-bottom: var(--space-1);
}
.level-skill__icon svg {
width: 18px;
height: 18px;
}
.level-skill__name {
align-self: auto;
font-size: var(--text-sm);
}
.level-skill__status {
align-self: end;
}
}
@media (max-width: 359px) {
.level-switch__option .level-dots {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.level-skill,
.level-skill__icon {
transition: none;
}
}
/* --------------------------------------------------------------------------
Course tiles: 18px by 20px inside the 2px border, 8px between the lines
-------------------------------------------------------------------------- */
.course-tile {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 0;
padding: 18px 20px;
border: 2px solid var(--color-line);
border-radius: var(--radius-card);
background-color: var(--color-surface);
transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
/* Hover: the tile lifts a little and its arrow moves on (as the day cards) */
.course-tile:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px -8px var(--color-shadow);
}
/* Top line: the code and level dots on the left, "Details" on the right */
.course-tile__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
}
/* The code in grey, then the level dots in green (the level is named for
screen readers) */
.course-tile__code {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: 700;
line-height: 1.35;
letter-spacing: 0.04em;
color: var(--color-muted);
}
.course-tile__code .level-dots {
color: var(--color-level);
}
.course-tile__more {
display: inline-flex;
flex: none;
align-items: center;
gap: var(--space-1);
font-size: var(--text-sm);
font-weight: 600;
line-height: 1.35;
color: var(--color-brand);
}
.course-tile__more svg {
width: 14px;
height: 14px;
transition: transform var(--duration-base) var(--ease-standard);
}
.course-tile:hover .course-tile__more svg {
transform: translateX(3px);
}
.course-tile__title {
/* room for two lines in every tile, so a one-line title (FI201) keeps
its summary level with the tiles beside it */
min-height: calc(2em * 1.2);
font-size: var(--text-md);
font-weight: 600;
line-height: var(--leading-snug);
}
/* Phones: one tile per row, so no space is kept for a second line */
@media (max-width: 767px) {
.course-tile__title {
min-height: 0;
}
}
/* The title is the button; its ::after covers the whole tile */
/* The whole tile is the button (also the faculty tiles): its ::after
covers the tile, so a click anywhere on it opens the pop-up */
.course-tile__button,
.faculty-tile__button {
border: 0;
font: inherit;
text-align: left;
cursor: pointer;
}
.course-tile__button::after,
.faculty-tile__button::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--radius-card);
}
/* Keyboard focus: the usual green ring round the tile (browsers that
support :has), else round the title */
.course-tile__button:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 2px;
}
.course-tile:has(.course-tile__button:focus-visible) {
outline: 2px solid var(--color-focus-ring);
outline-offset: 3px;
}
.course-tile:has(.course-tile__button:focus-visible) .course-tile__button {
outline: none;
}
/* The one-line summary under the title (two lines at most) */
.course-tile__summary {
font-size: var(--text-sm);
line-height: var(--leading-heading);
color: var(--color-muted);
}
/* "Taught by" and the teacher's name sit at the bottom, so the teachers
line up across a row */
.course-tile__teacher {
margin-top: auto;
font-size: var(--text-sm);
color: var(--color-muted);
}
.course-tile__teacher strong {
font-weight: 600;
color: var(--color-ink);
}
@media (prefers-reduced-motion: reduce) {
.course-tile,
.course-tile__more svg {
transition: none;
}
.course-tile:hover {
transform: none;
}
}
/* Smaller laptops and tablets: two columns; each subject heading spans
both, with a line above it, and its two courses sit side by side */
@media (max-width: 1200px) {
.course-columns {
grid-auto-flow: row;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: none;
}
.course-subject {
grid-column: 1 / -1;
margin-top: var(--space-4);
padding-top: var(--space-5);
border-top: 1px solid var(--color-line);
}
}
/* Phones: one column, in subject order */
@media (max-width: 767px) {
.course-columns {
grid-template-columns: minmax(0, 1fr);
}
}
/* --------------------------------------------------------------------------
Course pop-up (Courses and Apply): the site's pop-up box (qr-dialog in
layout.css), wider. A band in the subject's colour (icon, subject, close
button); then the code, level and title beside the teacher; the overview
sentence; two columns, "By the end, you can" (five learning outcomes, one
line each) and "Two weeks, day by day" (ten numbered topics, Week 1 beside
Week 2); "What you need" beside an example team project; Previous / Next.
It fits in one window on laptops (about 610-630px). Keep outcomes to about
58 characters and topics to about 26, so each stays on one line (owner,
23 October 2026; content in docs/COURSE-OVERVIEWS.md).
-------------------------------------------------------------------------- */
.course-dialog {
width: min(1040px, calc(100vw - 32px));
max-height: calc(100vh - 32px);
overflow-y: auto;
}
/* The larger pop-ups (courses, fees, biographies): the page behind is
dimmed and softly blurred, and the box rises into place as it opens */
.course-dialog::backdrop,
.bio-dialog::backdrop {
backdrop-filter: blur(3px);
}
.course-dialog[open],
.bio-dialog[open] {
animation: dialog-in var(--duration-base) var(--ease-standard);
}
@keyframes dialog-in {
from {
opacity: 0;
transform: translateY(12px) scale(0.98);
}
}
@media (prefers-reduced-motion: reduce) {
.course-dialog[open],
.bio-dialog[open] {
animation: none;
}
}
/* The subject band */
.course-dialog__head {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4) var(--space-6);
}
.course-dialog__head--ai {
color: var(--color-on-dark);
background-color: var(--color-subject-ai);
}
.course-dialog__head--ds {
color: var(--color-on-dark);
background-color: var(--color-subject-data-science);
}
.course-dialog__head--ec {
color: var(--color-subject-text);
background-color: var(--color-subject-economics);
}
.course-dialog__head--fi {
color: var(--color-subject-text);
background-color: var(--color-subject-finance);
}
/* The subject icon on a white square (course-subject__icon gives its size) */
.course-dialog__icon {
color: var(--color-subject-text);
background-color: var(--color-surface);
}
.course-dialog__subject {
display: flex;
flex: 1;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.course-dialog__subject-name {
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: 700;
line-height: var(--leading-snug);
}
.course-dialog__subject-text {
font-size: var(--text-sm);
line-height: 1.45;
}
.course-dialog__close {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 0;
border-radius: var(--radius-round);
color: var(--color-subject-text);
background-color: var(--color-surface);
cursor: pointer;
}
.course-dialog__close:hover {
background-color: var(--color-level-tint);
}
.course-dialog__close svg {
width: 20px;
height: 20px;
}
.course-dialog__body {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-5) var(--space-7) var(--space-3);
}
/* Top: code, level label and level summary, with the title under them, on
the left; the teacher on the right (below them when there is no room) */
.course-dialog__top {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-4) var(--space-5);
}
.course-dialog__titleblock {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
}
.course-dialog__level {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
}
.course-dialog__code {
font-weight: 700;
letter-spacing: 0.04em;
color: var(--color-muted);
}
.course-dialog__summary {
font-size: var(--text-sm);
font-weight: 700;
color: var(--color-muted);
}
.course-dialog__teacher {
display: flex;
align-items: center;
gap: var(--space-3);
}
.course-dialog__photo {
flex: none;
width: 48px;
height: 48px;
border-radius: var(--radius-round);
object-fit: cover;
object-position: center top;
}
.course-dialog__teacher-text {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.4;
}
/* Small capitals labels ("Taught by", the column headings, "What you
need"): the site's standard label, brand green, bold, 0.1em */
.course-dialog__label {
font-size: var(--text-xs);
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-brand);
}
.course-dialog__title {
font-family: var(--font-heading);
font-size: var(--text-4xl);
line-height: var(--leading-snug);
}
.course-dialog__text {
font-size: var(--text-md);
line-height: var(--leading-body);
}
/* Two columns: the learning outcomes, and the ten days */
.course-dialog__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-6);
}
.course-dialog__col {
display: flex;
flex-direction: column;
gap: var(--space-3);
min-width: 0;
}
.course-dialog__outcomes {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.course-dialog__outcomes li {
display: grid;
grid-template-columns: 16px minmax(0, 1fr);
gap: var(--space-2);
line-height: var(--leading-heading);
}
.course-dialog__outcomes svg {
width: 16px;
height: 16px;
margin-top: 3px;
color: var(--color-brand);
}
/* Week 1 beside Week 2, each day on a thin line */
.course-dialog__weeks {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
.course-dialog__week {
margin-bottom: var(--space-1);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-muted);
}
.course-dialog__days li {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
gap: var(--space-2);
padding: 5px 0;
border-top: 1px solid var(--color-line);
line-height: 1.4;
}
.course-dialog__day-num {
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--color-brand);
}
/* "What you need" beside the example team project */
.course-dialog__bottom {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-6);
}
.course-dialog__project {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-3) var(--space-4);
border-left: 3px solid var(--color-brand);
}
.course-dialog__project-text {
line-height: var(--leading-heading);
}
/* "What you need" on the light green of the level panels */
.course-dialog__needs {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-card);
background-color: var(--color-level-tint);
}
/* Previous and Next: green text buttons at either end, below a thin line */
.course-dialog__nav {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-3);
border-top: 1px solid var(--color-line);
}
.course-dialog__step {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 44px;
padding: 0 var(--space-1);
border: 0;
font: inherit;
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-brand);
cursor: pointer;
}
/* Only the words are underlined, not the arrows */
.course-dialog__step-text {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
text-decoration-color: var(--color-link-underline);
transition: text-decoration-color var(--duration-base) var(--ease-standard);
}
.course-dialog__step:hover .course-dialog__step-text {
text-decoration-color: var(--color-brand);
}
@media (max-width: 767px) {
.course-dialog__head {
padding: var(--space-4) var(--space-card);
}
.course-dialog__body {
padding: var(--space-5) var(--space-card);
}
.course-dialog__title {
font-size: var(--text-3xl);
}
.course-dialog__text {
font-size: var(--text-base);
}
.course-dialog__grid,
.course-dialog__bottom {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-5);
}
}
@media (max-width: 480px) {
.course-dialog__weeks {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-3);
}
}
/* ==========================================================================
COURSE STRIP (home page, "Choose your course"; owner chose mock-up A,
23 October 2026): one card per subject with its two courses, then a key
to the level dots and a button to the Courses page, where the full
course selector is. Four cards across; two by two from 1200px; on phones
still two by two, with the icon above the name and no one-liner.
Each card: the subject's icon (course-subject__icon, as in the course
selector), its name and one-liner, a line, then each course's code with
its level dots (the level is named for screen readers) and its title.
The cards are information only (no link, no hover): the one link is the
button under them (owner, 23 October 2026).
========================================================================== */
.course-strip {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.course-strip__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--gap-grid);
}
.course-strip__card {
display: flex;
flex-direction: column;
gap: var(--space-4);
min-width: 0;
padding: 20px;
border: 2px solid var(--color-line);
border-radius: var(--radius-card);
background-color: var(--color-surface);
}
.course-strip__head {
display: flex;
align-items: center;
gap: var(--space-3);
}
.course-strip__head .course-subject__icon {
width: 40px;
height: 40px;
}
.course-strip__label {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.course-strip__name {
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: 700;
line-height: var(--leading-snug);
color: var(--color-ink);
}
.course-strip__line {
font-size: var(--text-sm);
line-height: 1.4;
color: var(--color-muted);
}
.course-strip__courses {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid var(--color-line);
}
.course-strip__course {
display: flex;
flex-direction: column;
gap: 2px;
}
.course-strip__code {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--text-sm);
font-weight: 700;
line-height: 1.35;
letter-spacing: 0.04em;
color: var(--color-muted);
}
.course-strip__code .level-dots {
color: var(--color-level);
}
.course-strip__title {
font-weight: 600;
line-height: 1.35;
color: var(--color-ink);
}
/* Under the cards: the key to the level dots, and the button */
.course-strip__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-4) var(--space-6);
}
.course-strip__key {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-5);
font-size: var(--text-sm);
line-height: var(--leading-body);
color: var(--color-muted);
}
.course-strip__key-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.course-strip__key-item .level-dots {
color: var(--color-level);
}
.course-strip__key strong {
font-weight: 700;
color: var(--color-ink);
}
.course-strip__foot .btn {
flex: none;
width: auto;
min-width: 300px;
}
@media (max-width: 1200px) {
.course-strip__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Phones: still two by two, with the icon above the name, no one-liner and
less padding; the key one item per line and the button across the width */
@media (max-width: 767px) {
.course-strip__grid {
gap: var(--space-3);
}
.course-strip__card {
gap: var(--space-3);
padding: 14px;
}
.course-strip__head {
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
}
.course-strip__head .course-subject__icon {
width: 36px;
height: 36px;
}
.course-strip__name {
font-size: var(--text-lg);
}
.course-strip__line {
display: none;
}
.course-strip__title {
font-size: var(--text-sm);
}
.course-strip__key {
flex-direction: column;
}
/* Each key item as running text, so a long explanation wraps under its label */
.course-strip__key-item {
display: block;
}
.course-strip__key-item .level-dots {
display: inline-block;
margin-right: 6px;
vertical-align: middle;
}
.course-strip__foot .btn {
width: 100%;
min-width: 0;
}
}
/* ==========================================================================
PROGRAMME OVERVIEW: a photo beside five tiles (owner's choice, combined
option of the mock-ups, 20 October 2026)
Wide screens: four columns, two rows. The photo takes the first column
(both rows); row 1: the prep course and the residential programme (light
green, the icon above the title) and "A full term in two weeks"; row 2:
contact hours (two columns wide, with the 15/15/30 bar) and the credit.
From 1200px down: the photo on top, then the tiles two by two (hours
across both). From 767px down the date tiles are compact (no line of
text) and the other tiles run across the width.
========================================================================== */
.overview-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: auto auto;
gap: var(--gap-grid);
}
.overview-grid__photo {
grid-column: 1;
grid-row: 1 / 3;
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
object-position: 50% 15%; /* the photo is a portrait: when the slot is wide (tablets and phones), keep the face near the top in view */
border-radius: var(--radius-card);
}
.overview-tile {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 0;
padding: var(--space-card);
border: 2px solid var(--color-line);
border-radius: var(--radius-card);
background-color: var(--color-surface);
}
.overview-tile--prep { grid-column: 2; grid-row: 1; }
.overview-tile--residential { grid-column: 3; grid-row: 1; }
.overview-tile--term { grid-column: 4; grid-row: 1; }
.overview-tile--hours { grid-column: 2 / 4; grid-row: 2; justify-content: center; gap: var(--space-3); }
.overview-tile--credit { grid-column: 4; grid-row: 2; }
/* The two parts of the programme, on the light green of the level card */
.overview-tile--date {
border-color: transparent;
background-color: var(--color-level-tint);
}
/* Icon and title: the icon above the title (beside it in the hours tile) */
.overview-tile__head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}
.overview-tile--hours .overview-tile__head {
flex-direction: row;
align-items: center;
}
.overview-tile__icon {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--radius-round);
color: var(--color-on-dark);
background-color: var(--color-brand);
}
.overview-tile__icon svg {
width: 19px;
height: 19px;
}
.overview-tile__title {
font-family: var(--font-heading);
font-size: var(--text-xl);
line-height: var(--leading-snug);
}
/* "Online prep / course" on two lines like "Residential programme" and "A
full term in two weeks" beside it, so the dates line up (wide screens
only; the tiles are wider from 1200px down) */
@media (max-width: 1200px) {
.overview-tile__break {
display: none;
}
}
.overview-tile__when {
font-weight: 600;
font-variant-numeric: lining-nums;
color: var(--color-level);
}
.overview-tile__text {
font-size: var(--text-sm);
line-height: var(--leading-heading);
color: var(--color-muted);
}
/* Contact hours: lectures 15h, practice classes 15h, team project 30h */
.hours-bar {
display: flex;
height: 36px;
overflow: hidden;
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: 700;
}
.hours-bar__part {
display: flex;
align-items: center;
justify-content: center;
}
.hours-bar__part--lectures { flex: 15; color: var(--color-on-dark); background-color: var(--color-brand); }
.hours-bar__part--classes { flex: 15; color: var(--color-on-dark); background-color: var(--color-level); }
.hours-bar__part--project { flex: 30; background-color: var(--color-pillar-team); }
.hours-legend {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-4);
font-size: var(--text-sm);
color: var(--color-muted);
}
.hours-legend li {
display: inline-flex;
align-items: center;
gap: 6px;
}
.hours-legend__swatch {
width: 10px;
height: 10px;
border-radius: 2px;
}
.hours-legend__swatch--lectures { background-color: var(--color-brand); }
.hours-legend__swatch--classes { background-color: var(--color-level); }
.hours-legend__swatch--project { background-color: var(--color-pillar-team); }
@media (max-width: 1200px) {
.overview-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: none;
}
.overview-grid__photo,
.overview-tile--prep,
.overview-tile--residential,
.overview-tile--term,
.overview-tile--credit {
grid-column: auto;
grid-row: auto;
}
.overview-grid__photo {
grid-column: 1 / -1;
height: auto;
aspect-ratio: 16 / 9;
}
.overview-tile--hours {
grid-column: 1 / -1;
grid-row: auto;
order: 1;
}
.overview-tile--term,
.overview-tile--credit {
order: 2;
}
}
@media (max-width: 767px) {
.overview-grid {
gap: var(--space-3);
}
.overview-grid__photo {
aspect-ratio: 16 / 10;
}
.overview-tile {
padding: var(--space-4);
}
.overview-tile__title {
font-size: var(--text-lg);
}
.overview-tile--date .overview-tile__icon {
width: 32px;
height: 32px;
}
.overview-tile--date .overview-tile__icon svg {
width: 16px;
height: 16px;
}
.overview-tile--date .overview-tile__text {
display: none;
}
.overview-tile--term,
.overview-tile--credit {
grid-column: 1 / -1;
}
.overview-tile--term .overview-tile__head,
.overview-tile--credit .overview-tile__head {
flex-direction: row;
align-items: center;
}
}
/* Very small phones: the two date tiles one under the other */
@media (max-width: 359px) {
.overview-tile--date {
grid-column: 1 / -1;
}
}
/* ==========================================================================
HOW EACH DAY WORKS: the day drawn to scale, then four colour cards
The bar runs from 09:00 to 20:00, one unit per hour: the academic
programme (3), a break (2, no label), team projects (3), talks (1) and
the social programme (2), in the four part-of-day colours; hidden from
767px down. The cards below use the same colours: a photo, the time,
the title, three points and a link to the matching section. Four in a
row; two by two from 1200px down; one column from 767px down, with
shorter photos.
========================================================================== */
.day-plan {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.day-bar {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.day-bar__times {
position: relative;
height: 20px;
font-size: var(--text-sm);
font-weight: 600;
font-variant-numeric: lining-nums;
color: var(--color-muted);
}
.day-bar__time {
position: absolute;
top: 0;
transform: translateX(-50%);
}
.day-bar__time--09 { left: 0; transform: none; }
.day-bar__time--12 { left: 27.27%; }
.day-bar__time--14 { left: 45.45%; }
.day-bar__time--17 { left: 72.73%; }
.day-bar__time--18 { left: 81.82%; }
.day-bar__time--20 { left: 100%; transform: translateX(-100%); }
.day-bar__track {
display: flex;
gap: var(--space-1);
height: 56px;
}
.day-bar__part {
display: flex;
align-items: center;
overflow: hidden;
padding: 0 var(--space-4);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: 700;
white-space: nowrap;
}
.day-bar__part--academic { flex: 3; color: var(--color-on-dark); background-color: var(--color-pillar-academic); }
.day-bar__part--break { flex: 2; background: repeating-linear-gradient(135deg, var(--color-surface-soft) 0 8px, var(--color-surface) 8px 16px); box-shadow: inset 0 0 0 1px var(--color-line); }
.day-bar__part--team { flex: 3; background-color: var(--color-pillar-team); }
.day-bar__part--professional { flex: 1; justify-content: center; padding: 0; background-color: var(--color-pillar-professional); box-shadow: inset 0 0 0 1px var(--color-line); }
.day-bar__part--social { flex: 2; background-color: var(--color-pillar-social); }
.day-cards {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--gap-grid);
}
.day-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
min-width: 0;
padding: var(--space-4) var(--space-4) var(--space-card);
border-radius: var(--radius-card);
}
.day-card--academic { color: var(--color-on-dark); background-color: var(--color-pillar-academic); }
.day-card--team { background-color: var(--color-pillar-team); }
.day-card--professional { background-color: var(--color-pillar-professional); }
.day-card--social { background-color: var(--color-pillar-social); }
.day-card__photo {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: 50% 25%; /* on phones the photo is cut shorter (16:7): keep the upper part, where the faces are */
border-radius: var(--radius-md);
}
/* The team photo: heads at the very top of the photo, so the phone crop starts at the top */
.day-card__photo--top {
object-position: 50% 0;
}
/* The punting photo: the people are in the lower half, so the phone crop keeps that part */
.day-card__photo--low {
object-position: 50% 75%;
}
.day-card__body {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--space-2);
padding: 0 var(--space-2);
}
.day-card--academic .day-card__time { color: var(--color-on-dark-muted); }
.day-card__title {
font-family: var(--font-heading);
font-size: var(--text-xl);
line-height: var(--leading-snug);
}
/* Each title is set on two lines (a after the first word), so the four
titles match side by side: "Professional development" does not fit on one
line. On phones the cards are one under the other, so the break is
dropped (see the 767px block below). */
.day-card__points {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.day-card__points li {
display: grid;
grid-template-columns: 14px minmax(0, 1fr);
gap: var(--space-2);
line-height: var(--leading-heading);
}
.day-card__points svg,
.day-card__link svg {
width: 14px;
height: 14px;
color: var(--color-brand);
}
.day-card__points svg { margin-top: 4px; }
.day-card--academic .day-card__points svg,
.day-card--academic .day-card__link svg { color: var(--color-on-dark-muted); }
/* The link sits at the bottom, so the four links line up */
.day-card__link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: auto;
padding-top: var(--space-2);
font-size: var(--text-sm);
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
text-decoration-color: transparent;
transition: text-decoration-color var(--duration-base) var(--ease-standard);
}
.day-card__link:hover {
text-decoration-color: currentColor;
}
.day-card__link:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}
@media (max-width: 1200px) {
.day-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.day-bar {
display: none;
}
.day-cards {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
}
.day-card__photo {
aspect-ratio: 16 / 7;
}
.day-card__break {
display: none;
}
}
/* ==========================================================================
COURSE HEADER (Courses page, "Sample day" and "Sample project"): the
course the example comes from, on the light green of the level card
(information about a course), with a round photo in a white ring, a small
label and a title (owner chose option 3 of five mock-ups; light green,
owner, 21 October 2026)
========================================================================== */
.course-head {
display: flex;
align-items: center;
gap: var(--space-5);
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-card);
background-color: var(--color-level-tint);
}
/* The white ring keeps a pale photo background apart from the light green */
.course-head__photo {
flex: none;
width: 76px;
height: 76px;
object-fit: cover;
border-radius: var(--radius-round);
box-shadow: 0 0 0 3px var(--color-surface);
}
.course-head__title {
margin-top: var(--space-1);
font-family: var(--font-heading);
font-size: var(--text-3xl);
line-height: var(--leading-snug);
}
/* ==========================================================================
NUMBERED STEPS (Courses page, "Sample day" and "Sample project"): a row
of steps, each a numbered dot on one line, a small label and a line of
text. Four in a row (five for the sample project, three from 1200px
down); one under the other from 767px down, with the dot on the left.
========================================================================== */
.step-line {
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-5);
}
/* The line through the dots */
.step-line::before {
content: "";
position: absolute;
top: 15px;
right: 0;
left: 16px;
height: 2px;
background-color: var(--color-line);
}
.step-line--five {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.step-line__item {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.step-line__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin-bottom: var(--space-3);
border-radius: var(--radius-round);
font-size: var(--text-sm);
font-weight: 700;
color: var(--color-on-dark);
background-color: var(--color-brand);
}
.step-line__text {
line-height: var(--leading-heading);
}
/* ==========================================================================
SAMPLE DAY (Courses page): the course header, then two rows, the lecture
and the practice class, each a photo beside the length, a title and four
numbered steps; the photo on the left, then on the right. From 1200px
down the photo goes on top.
========================================================================== */
.lesson-plan {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.lesson-row {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
gap: var(--gap-columns);
align-items: center;
}
.lesson-row + .lesson-row {
margin-top: var(--space-4);
}
.lesson-row--flip {
grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
}
.lesson-row--flip .lesson-row__photo {
order: 2;
}
.lesson-row__photo {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--radius-card);
}
.lesson-row__body {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.lesson-row__title {
margin-bottom: var(--space-4);
font-family: var(--font-heading);
font-size: var(--text-xl);
line-height: var(--leading-snug);
}
/* ==========================================================================
TEAM PROJECTS (Courses page): three photo columns, challenge, process
and outcome, each with a number, a title and three points with arrows.
One under the other from 767px down.
========================================================================== */
.team-columns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--gap-grid);
}
.team-column {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.team-column__photo {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
margin-bottom: var(--space-2);
object-fit: cover;
border-radius: var(--radius-card);
}
.team-column__num {
font-size: var(--text-xs);
font-weight: 700;
line-height: var(--leading-heading);
letter-spacing: 0.1em;
color: var(--color-brand);
}
.team-column__title {
font-family: var(--font-heading);
font-size: var(--text-xl);
line-height: var(--leading-snug);
}
.team-column__points {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.team-column__points li {
display: grid;
grid-template-columns: 14px minmax(0, 1fr);
gap: var(--space-2);
line-height: var(--leading-heading);
}
.team-column__points svg {
width: 14px;
height: 14px;
margin-top: var(--space-1);
color: var(--color-brand);
}
/* ==========================================================================
SAMPLE PROJECT (Courses page): the course header with the project title,
then the project in five numbered steps (goal, data, method, code,
output)
========================================================================== */
.project-plan {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
@media (max-width: 1200px) {
.lesson-row,
.lesson-row--flip {
grid-template-columns: minmax(0, 1fr);
gap: var(--gap-stacked);
}
.lesson-row--flip .lesson-row__photo {
order: 0;
}
.lesson-row__photo {
aspect-ratio: 16 / 9;
object-position: 50% 35%;
}
.step-line--five {
grid-template-columns: repeat(3, minmax(0, 1fr));
row-gap: var(--space-6);
}
.step-line--five::before {
display: none;
}
}
@media (max-width: 767px) {
.course-head {
align-items: flex-start;
gap: var(--space-4);
padding: var(--space-4);
}
.course-head__photo {
width: 64px;
height: 64px;
}
.course-head__title {
font-size: var(--text-xl);
}
.step-line,
.step-line--five {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
}
.step-line::before {
display: none;
}
.step-line__item {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
column-gap: var(--space-4);
row-gap: 2px;
}
.step-line__num {
grid-row: 1 / 3;
margin: 0;
}
.lesson-row__photo {
aspect-ratio: 4 / 3;
}
.team-columns {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
}
}
/* ==========================================================================
PROFESSIONAL DEVELOPMENT (Courses page): the photo beside the four kinds
of session, then the confirmed speakers as profile cards (owner chose
option 4 of five mock-ups, 20 October 2026). The same photo-and-steps
layout (development, development__photo, teach__steps) is the home
page's "How each day works" (owner, 23 October 2026), where the photo
is a photo mosaic (a div with both classes: development__photo gives
its place and shape, photo-mosaic arranges the three photos inside).
Wide screens: the sessions two by two (7 parts) on the left, the photo
(5 parts) on the right, so the sections alternate down the page (owner,
23 October 2026; the photo comes first in the HTML); the speakers four
in a row. From 1200px down: the photo on top (16:9), the speakers two by
two. The sessions use the Faculty page's
"How we teach" steps (teach__steps, teach__step: a green line above,
who leads it, the title and one line; one under the other from 600px).
========================================================================== */
.development {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: var(--gap-columns);
align-items: center;
}
.development > .teach__steps {
grid-column: 1;
grid-row: 1;
}
.development__photo {
grid-column: 2;
grid-row: 1;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--radius-card);
}
/* Confirmed speakers: a square photo, the name, the role and the
organisation, with a 2px brand-green line under each card (the same as
the lines above the sessions). The cards in a row are the same height, so the lines
line up. Gold is kept for the social programme. */
.speaker-cards {
display: flex;
flex-direction: column;
gap: var(--space-5);
margin-top: var(--space-4);
}
.speaker-cards__title {
font-family: var(--font-heading);
font-size: var(--text-subheading);
line-height: var(--leading-snug);
}
.speaker-cards__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--gap-grid);
}
.speaker-card {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding-bottom: var(--space-4);
border-bottom: 2px solid var(--color-brand);
}
.speaker-card__photo {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
margin-bottom: var(--space-3);
object-fit: cover;
border-radius: var(--radius-card);
}
.speaker-card__name {
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: 700;
line-height: var(--leading-snug);
}
.speaker-card__role {
font-size: var(--text-sm);
line-height: var(--leading-heading);
color: var(--color-muted);
}
.speaker-card__org {
margin-bottom: var(--space-2);
font-size: var(--text-sm);
font-weight: 600;
line-height: var(--leading-heading);
color: var(--color-brand);
}
/* The talk: a thin line, a small label and the title in Playfair, above
the green line at the bottom of the card */
/* margin-top: auto puts it at the foot of the card, so the talks line up
across the cards even when a role takes two lines */
.speaker-card__talk {
margin-top: auto;
padding-top: var(--space-3);
border-top: 1px solid var(--color-line);
}
.speaker-card__talk-label {
display: block;
}
.speaker-card__talk-title {
display: block;
margin-top: 2px;
font-weight: 600;
line-height: var(--leading-snug);
}
/* A speaker's words under the cards: a brand-green bar on the left and the quote
in Playfair, like the student quotes */
.speaker-quote {
display: grid;
grid-template-columns: 4px minmax(0, 1fr);
column-gap: var(--space-5);
max-width: 880px;
margin: var(--space-4) 0 0;
}
.speaker-quote::before {
content: "";
grid-row: 1 / 3;
border-radius: 2px;
background-color: var(--color-brand);
}
.speaker-quote__text {
font-family: var(--font-heading);
font-size: var(--text-xl);
line-height: var(--leading-heading);
text-indent: -0.42em;
text-wrap: pretty;
}
.speaker-quote__who {
margin-top: var(--space-3);
font-size: var(--text-sm);
color: var(--color-muted);
}
.speaker-quote__who strong {
font-weight: 600;
color: var(--color-ink);
}
.speaker-cards__note {
display: flex;
align-items: flex-start;
gap: var(--space-2);
line-height: var(--leading-heading);
color: var(--color-muted);
}
.speaker-cards__note svg {
flex: none;
width: 18px;
height: 18px;
margin-top: 2px;
color: var(--color-cta);
}
@media (max-width: 1200px) {
.development {
grid-template-columns: minmax(0, 1fr);
gap: var(--gap-stacked);
}
/* Stacked: back to the HTML order, the photo first */
.development > .teach__steps,
.development__photo {
grid-column: auto;
grid-row: auto;
}
.development__photo {
aspect-ratio: 16 / 9;
}
.speaker-cards__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.development__photo {
aspect-ratio: 3 / 2;
}
.speaker-cards {
gap: var(--space-4);
margin-top: 0;
}
.speaker-cards__grid {
gap: var(--space-5) var(--space-3);
}
.speaker-card__name {
font-size: var(--text-md);
}
.speaker-card__talk-title {
font-size: var(--text-sm);
}
.speaker-quote {
column-gap: var(--space-4);
}
.speaker-quote__text {
font-size: var(--text-lg);
}
}
/* ##########################################################################
FACULTY PAGE (faculty.html)
########################################################################## */
/* ==========================================================================
HERO VIDEO (Faculty and Home pages): a wide video tile (the student video
tile, student-voice__film--wide) in place of the hero photo: on Faculty
the Academic Director's welcome, with the name and role in its title; on
Home the summer school film. When the hero stacks (from 1200px down), the
video comes straight after the title and the links (Faculty) or the
subject labels (Home), before the introduction.
========================================================================== */
.hero-video {
flex-direction: column;
align-items: stretch;
gap: var(--space-3);
}
/* The wide tile always fills the column (the student tiles are capped at
300px on phones) */
.page-hero--video .student-voice__film--wide {
width: 100%;
}
/* Phones: a smaller play button and title, so they don't overlap on the
small tile; the length note is left to the caption and the video's label */
@media (max-width: 600px) {
.hero-video .student-voice__play {
padding: var(--space-3) var(--space-4);
}
.hero-video .student-voice__play-icon {
width: 46px;
height: 46px;
}
.hero-video .student-voice__play-icon svg {
width: 18px;
height: 18px;
}
.hero-video .student-voice__play-title {
font-size: var(--text-sm);
}
.hero-video .student-voice__play-time {
display: none;
}
}
/* Stacked hero: the content's parts and the video share one column, in this
order: date line, title, links or subject labels, video, introduction,
deadline line, buttons */
@media (max-width: 1200px) {
.page-hero--video .page-hero__inner {
align-items: stretch;
gap: var(--space-5);
}
.page-hero--video .page-hero__content {
display: contents;
}
.page-hero--video .page-hero__eyebrow {
order: 1;
}
.page-hero--video .page-hero__title {
order: 2;
}
.page-hero--video .page-hero__nav,
.page-hero--video .pill-list {
order: 3;
}
.page-hero--video .page-hero__media {
order: 4;
}
.page-hero--video .page-hero__intro,
.page-hero--video .deadline-notes {
order: 5;
}
.page-hero--video .page-hero__actions {
order: 6;
}
}
/* ==========================================================================
MEET THE FACULTY: eight photo tiles in course order (AI101 … FI201), one
per teacher. The photo fills the tile (4:5); the name and role sit on a
dark shade at the bottom (as on the student video tile). The course is
in the pop-up.
The whole tile is a button (the name's button stretches over it, as on
the day cards) that opens the teacher's biography in a pop-up.
The names line up across each row: first name and surname always take
a line each. Four across; three across from 1200px (the last two
centred); two across from 991px. No sideways scrolling.
========================================================================== */
.faculty-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--gap-grid);
}
/* The text block sits at the bottom in normal flow (not positioned), so the
name's button can stretch over the whole tile. */
.faculty-tile {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
aspect-ratio: 4 / 5;
min-width: 0;
overflow: hidden;
border-radius: var(--radius-card);
color: var(--color-on-dark);
background-color: var(--color-ink);
isolation: isolate;
}
.faculty-tile__photo {
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-slow) var(--ease-standard);
}
/* Hover: the photo zooms in a little and the arrow moves on */
.faculty-tile:hover .faculty-tile__photo {
transform: scale(1.05);
}
.faculty-tile__text {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--space-8) var(--space-5) var(--space-5);
background: linear-gradient(to top, var(--color-film-shade) 0%, var(--color-film-shade) 40%, var(--color-film-shade-soft) 75%, var(--color-film-shade-clear) 100%);
}
/* First name and surname on separate lines */
.faculty-tile__name {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
font-family: var(--font-heading);
font-size: var(--text-subheading);
line-height: var(--leading-snug);
}
.faculty-tile__first,
.faculty-tile__last {
display: block;
}
/* Keyboard focus: a white ring inside the tile, and the usual green ring
round it (browsers that support :has) */
.faculty-tile__button:focus-visible {
outline: none;
}
.faculty-tile__button:focus-visible::after {
box-shadow: inset 0 0 0 3px var(--color-on-dark);
}
.faculty-tile:has(.faculty-tile__button:focus-visible) {
outline: 2px solid var(--color-focus-ring);
outline-offset: 3px;
}
.faculty-tile__arrow {
width: 20px;
height: 20px;
flex-shrink: 0;
transition: transform var(--duration-base) var(--ease-standard);
}
.faculty-tile:hover .faculty-tile__arrow {
transform: translateX(3px);
}
.faculty-tile__role {
font-size: var(--text-sm);
line-height: var(--leading-heading);
color: var(--color-on-dark-muted);
}
/* Three across, the last two centred (six narrow columns; each tile takes
two, and the seventh starts at the second) */
@media (max-width: 1200px) {
.faculty-grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.faculty-tile {
grid-column: span 2;
}
.faculty-tile:nth-child(7) {
grid-column: 2 / span 2;
}
}
@media (max-width: 991px) {
.faculty-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.faculty-tile,
.faculty-tile:nth-child(7) {
grid-column: auto;
}
}
/* Phones: smaller gaps and text; the arrow moves to the top corner of the
photo, so the name has the whole width */
@media (max-width: 600px) {
.faculty-grid {
gap: var(--space-4) var(--space-3);
}
.faculty-tile__text {
padding: var(--space-6) var(--space-3) var(--space-3);
}
.faculty-tile__name {
font-size: var(--text-md);
}
.faculty-tile__arrow {
position: absolute;
top: var(--space-2);
right: var(--space-2);
width: 28px;
height: 28px;
padding: 5px;
border-radius: var(--radius-round);
background-color: var(--color-film-shade-soft);
}
.faculty-tile__role {
font-size: var(--text-xs);
}
}
/* --------------------------------------------------------------------------
Biography pop-up: the site's pop-up box (qr-dialog in layout.css, as for
WeChat), wider, with the photo on the left and the name, role, course
and biography beside it; the photo goes above from 600px down.
-------------------------------------------------------------------------- */
.bio-dialog {
width: min(720px, calc(100vw - 32px));
}
.bio-dialog__inner {
position: relative;
display: grid;
grid-template-columns: 180px 1fr;
align-items: start;
gap: var(--space-5);
padding: var(--space-6);
}
.bio-dialog__photo {
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: var(--radius-card);
}
.bio-dialog__body {
display: flex;
flex-direction: column;
gap: var(--space-3);
min-width: 0;
}
.bio-dialog__name {
padding-right: var(--space-7);
font-family: var(--font-heading);
font-size: var(--text-subheading);
line-height: var(--leading-snug);
}
.bio-dialog__role {
margin-top: calc(var(--space-2) * -1);
color: var(--color-muted);
}
.bio-dialog__course {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.bio-dialog__course-title {
flex-basis: 100%;
margin-top: var(--space-1);
font-weight: 600;
}
.bio-dialog__bio {
padding-top: var(--space-3);
border-top: 1px solid var(--color-line);
line-height: var(--leading-relaxed);
}
@media (max-width: 600px) {
.bio-dialog__inner {
grid-template-columns: 1fr;
padding: var(--space-6) var(--space-5) var(--space-5);
}
.bio-dialog__photo {
width: 112px;
}
}
/* ==========================================================================
HOW WE TEACH: Learning by Doing. On the left a large statement ("Learn it
in the morning. Use it in the afternoon.") and the day's goal; on the
right the four steps of each weekday, two by two, each with when it
happens. The fourth step is the daily loop, on the light green tint with
a loop icon. Owner's choice (version 5 of five mock-ups, 20 October 2026).
The steps are also used for the four kinds of session in the Courses
page's "Professional development" (with who leads each one).
One column from 991px; the steps one under the other from 600px.
========================================================================== */
.teach {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: start;
gap: var(--gap-columns);
}
.teach__statement {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
/* The statement: the second sentence in the level green */
/* The large statement: the first line in brand green, the second in the
level green (owner, 22 October 2026: the one place the level green is
used outside the course levels) */
.teach__big {
font-family: var(--font-heading);
font-size: var(--text-6xl);
font-weight: 700;
line-height: var(--leading-snug);
color: var(--color-brand);
}
.teach__big span {
display: block;
color: var(--color-level);
}
.teach__lead {
line-height: var(--leading-heading);
color: var(--color-muted);
}
/* A second paragraph that carries the main point (Courses "Coding with AI":
you own your work), in ink and semi-bold */
.teach__lead--strong {
font-weight: 600;
color: var(--color-ink);
}
.teach__steps {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-6) var(--gap-grid);
}
/* Each step: a green line above, when it happens, the step and one line */
.teach__step {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-top: var(--space-4);
border-top: 2px solid var(--color-brand);
}
/* The small label above each step: the site's standard label (brand
green, bold, 0.1em), as in Sample day and the key facts */
.teach__when {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-brand);
}
.teach__title {
font-size: var(--text-md);
font-weight: 600;
line-height: var(--leading-snug);
}
.teach__text {
line-height: var(--leading-heading);
color: var(--color-muted);
}
/* The highlighted last step: the daily loop on Faculty, "Own your work" in
Courses "Coding with AI" (with a tick instead of the loop icon) */
.teach__step--loop {
padding: var(--space-4) var(--space-5) var(--space-5);
border-top: 0;
border-radius: var(--radius-card);
background-color: var(--color-level-tint);
}
.teach__step--loop .teach__text {
color: var(--color-ink);
}
.teach__loop-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
}
@media (max-width: 991px) {
.teach {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.teach__big {
font-size: var(--text-5xl);
}
}
@media (max-width: 600px) {
.teach__steps {
grid-template-columns: 1fr;
gap: var(--space-5);
}
}
/* ##########################################################################
CAMBRIDGE PAGE (cambridge.html)
########################################################################## */
/* ==========================================================================
SELWYN COLLEGE: a tall photo (the College Chapel) beside six tiles, as the
Courses page's Programme overview (owner's option 5 of the page mock-ups,
21 October 2026). The location tile is light green with an icon circle;
the other five have a 16:9 photo above the title and one line.
Wide screens: four columns, the photo across both rows of the first.
From 1200px down: the photo across the top (16:9, as the Programme
overview's), tiles three across; from 767px down: two across, the photo
4:3; from 600px down: one tile per row, its photo (or the location's
icon) on the left and the title and line beside it, so no text is
squeezed into a narrow column. The photo is a little wider than square,
so the whole chapel shows in all three shapes.
========================================================================== */
.selwyn-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--gap-grid);
}
.selwyn-grid__photo {
grid-row: 1 / 3;
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
object-position: 50% 75%; /* when the slot is wide (tablets and phones), keep the chapel from its spires to its door in view */
border-radius: var(--radius-card);
}
.selwyn-tile {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 0;
overflow: hidden;
padding: 0 var(--space-5) var(--space-5);
border: 2px solid var(--color-line);
border-radius: var(--radius-card);
background-color: var(--color-surface);
}
/* The photo runs to the tile's edges, above its padding */
.selwyn-tile__photo {
display: block;
width: calc(100% + 2 * var(--space-5));
max-width: none;
height: auto;
aspect-ratio: 16 / 9;
margin: 0 calc(-1 * var(--space-5)) var(--space-2);
object-fit: cover;
}
/* The location: light green, the icon above the title, centred in the tile */
.selwyn-tile--tint {
justify-content: center;
gap: var(--space-3);
padding-top: var(--space-5);
border-color: transparent;
background-color: var(--color-level-tint);
}
.selwyn-tile__title {
font-size: var(--text-md);
font-weight: 600;
line-height: var(--leading-snug);
}
.selwyn-tile__text {
font-size: var(--text-sm);
line-height: var(--leading-heading);
color: var(--color-muted);
}
@media (max-width: 1200px) {
.selwyn-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.selwyn-grid__photo {
grid-row: auto;
grid-column: 1 / -1;
height: auto;
aspect-ratio: 16 / 9;
}
}
@media (max-width: 767px) {
.selwyn-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
.selwyn-grid__photo {
aspect-ratio: 4 / 3;
}
.selwyn-tile {
padding: 0 var(--space-4) var(--space-4);
}
.selwyn-tile__photo {
width: calc(100% + 2 * var(--space-4));
margin: 0 calc(-1 * var(--space-4)) var(--space-1);
}
.selwyn-tile--tint {
padding-top: var(--space-4);
}
.selwyn-tile__title {
font-size: var(--text-base);
}
}
/* Phones: one tile per row; the photo fills a 104px column on the left
(the location's icon sits centred in it), the title and line on the right */
@media (max-width: 600px) {
.selwyn-grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-3);
}
.selwyn-tile,
.selwyn-tile--tint {
display: grid;
grid-template-columns: 104px minmax(0, 1fr);
grid-template-rows: 1fr auto auto 1fr;
gap: 0 var(--space-4);
min-height: 88px;
padding: 0 var(--space-4) 0 0;
}
.selwyn-tile__photo {
grid-column: 1;
grid-row: 1 / -1;
width: 100%;
height: 100%;
margin: 0;
aspect-ratio: auto;
}
.selwyn-tile--tint .overview-tile__icon {
grid-column: 1;
grid-row: 1 / -1;
place-self: center;
}
.selwyn-tile__title {
grid-column: 2;
grid-row: 2;
padding-top: var(--space-3);
}
.selwyn-tile__text {
grid-column: 2;
grid-row: 3;
margin-top: var(--space-1);
padding-bottom: var(--space-3);
}
}
/* ==========================================================================
SOCIAL PROGRAMME: six posters in a row, in the order of the FAQ answer.
Each a 3:4 photo with the name on a dark shade at the bottom (as the
Faculty tiles), and one line under it.
Six across; three across from 1200px; two across from 600px.
========================================================================== */
.social-posters {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: var(--space-4);
}
.social-poster {
display: flex;
flex-direction: column;
gap: var(--space-3);
min-width: 0;
}
/* The photo fills the tile; the name sits on a shade at the bottom */
.social-poster__tile {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
aspect-ratio: 3 / 4;
overflow: hidden;
border-radius: var(--radius-card);
color: var(--color-on-dark);
background-color: var(--color-ink);
isolation: isolate;
}
.social-poster__photo {
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
}
.social-poster__title {
padding: var(--space-7) var(--space-4) var(--space-4);
font-size: var(--text-md);
font-weight: 600;
line-height: var(--leading-snug);
background: linear-gradient(to top, var(--color-film-shade) 0%, var(--color-film-shade) 35%, var(--color-film-shade-soft) 72%, var(--color-film-shade-clear) 100%);
}
.social-poster__text {
font-size: var(--text-sm);
line-height: var(--leading-heading);
color: var(--color-muted);
}
@media (max-width: 1200px) {
.social-posters {
grid-template-columns: repeat(3, minmax(0, 1fr));
row-gap: var(--space-6);
}
}
@media (max-width: 600px) {
.social-posters {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: var(--space-5);
}
}
/* ==========================================================================
CAMBRIDGE IN PICTURES: the heading with a Places | People switch on the
same row (the level switch's look, level-switch__control), then a wall
of nine photos, without captions (owner, 21 October 2026; each photo's
alt text names it). The switch shows one wall and hides the other
(data-switch, main.js part 7).
The wall: four columns, 196px rows (210px before the 1200px content width); the first photo two by two, the
third and fifth two rows tall, the sixth and ninth two columns wide.
From 767px down: two columns, the first, sixth and ninth across both;
the switch goes under the heading, full width.
========================================================================== */
.photo-wall-head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-4) var(--space-6);
}
.photo-wall {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: 196px;
gap: var(--space-4);
}
.photo-wall[hidden] {
display: none;
}
.photo-wall__photo {
display: block;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
object-fit: cover;
border-radius: var(--radius-card);
}
/* Each photo's place on the wall */
.photo-wall__photo--a { grid-column: 1 / 3; grid-row: 1 / 3; }
.photo-wall__photo--b { grid-column: 3; grid-row: 1; }
.photo-wall__photo--c { grid-column: 4; grid-row: 1 / 3; }
.photo-wall__photo--d { grid-column: 3; grid-row: 2; }
.photo-wall__photo--e { grid-column: 1; grid-row: 3 / 5; }
.photo-wall__photo--f { grid-column: 2 / 4; grid-row: 3; }
.photo-wall__photo--g { grid-column: 4; grid-row: 3; }
.photo-wall__photo--h { grid-column: 2; grid-row: 4; }
.photo-wall__photo--i { grid-column: 3 / 5; grid-row: 4; }
/* Faces low or high in the frame stay in view when the slot crops it */
.photo-wall__photo--low {
object-position: 50% 72%;
}
.photo-wall__photo--high {
object-position: 50% 35%;
}
@media (max-width: 1200px) {
.photo-wall {
grid-auto-rows: 180px;
}
}
@media (max-width: 991px) {
.photo-wall {
grid-auto-rows: 150px;
gap: var(--space-3);
}
}
@media (max-width: 767px) {
.photo-wall-head__switch {
width: 100%;
}
.photo-wall-head__switch .level-switch__option {
flex: 1;
}
.photo-wall {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.photo-wall__photo {
grid-column: auto;
grid-row: auto;
}
.photo-wall__photo--a,
.photo-wall__photo--f,
.photo-wall__photo--i {
grid-column: 1 / 3;
}
.photo-wall__photo--a {
grid-row: span 2;
}
}
/* ##########################################################################
FAQ PAGE (faq.html)
########################################################################## */
/* ==========================================================================
FAQ: seven topics in the order applicants need them (Applying, Fees and
scholarships, Courses and teaching, Life in Cambridge, Talks and careers,
Visas, About CUNJC; owner's choice, 20 October 2026). On wide screens a
menu of the topics sits on the left and stays in view while you scroll
(main.js marks the topic being read with aria-current) above "Still have
a question?" and the footer's Contact us list (the same markup, so the
same look); the topics and their questions are on the right. From
991px down the menu is hidden (the hero's jump links do its job, and the
closing tiles and the footer have the contacts) and the questions take
the full width.