/* ========================================================================== Care & Culinary — main stylesheet Single source of truth for the theme and the static preview. Built to WCAG 2.2 AA: contrast, focus visibility, target size, motion. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design tokens Swap these when the real brand palette / logo arrives — nothing else needs to change. -------------------------------------------------------------------------- */ :root { /* ---- Brand orange ----------------------------------------------------- Taken from the logo mark. The mid tones (500/600) are the logo colour itself: vivid, but too light to carry text on white, so they are used for shapes, icons and fills only. The 700/800 steps are the text-safe versions — same hue, dark enough to pass AA on a light ground. */ --brand-100: #FDECD5; --brand-300: #FDB94E; --brand-500: #F7941E; /* the logo orange */ --brand-600: #E07B10; --brand-700: #A85400; /* AA with white text on top */ --brand-800: #8A4604; /* AA as text on cream */ /* ---- Charcoal --------------------------------------------------------- From the logotype. Carries headings, dark sections and the primary button, exactly as it pairs with orange in the logo. */ --ink-900: #2B2B2B; --ink-800: #3D3D3D; --ink-700: #4F4F4F; --ink-600: #6B6B6B; --ink-500: #8A8A8A; /* Warm neutrals, tinted toward the brand orange rather than plain grey. */ --cream: #FFFBF6; --sand: #FDF2E4; --sand-dark: #F3E1CB; --ink: #2B2B2B; --ink-soft: #55504B; --white: #FFFFFF; /* Semantic */ --bg: var(--cream); --bg-alt: var(--sand); --text: var(--ink); --text-muted: var(--ink-soft); --border: var(--sand-dark); --link: var(--brand-800); --focus: #0B5FFF; /* Type */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Fluid type scale. Top of the scale caps at 55px: the earlier 72px h1 pushed headings onto three or four lines and left large gaps beside them. */ --step--1: clamp(0.88rem, 0.85rem + 0.15vw, 0.95rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --step-1: clamp(1.125rem, 1.08rem + 0.22vw, 1.3125rem); /* max 21px */ --step-2: clamp(1.3rem, 1.22rem + 0.4vw, 1.6875rem); /* max 27px */ --step-3: clamp(1.5rem, 1.35rem + 0.8vw, 2.125rem); /* max 34px */ --step-4: clamp(1.75rem, 1.5rem + 1.3vw, 2.625rem); /* max 42px */ --step-5: clamp(2rem, 1.6rem + 2vw, 3.4375rem); /* max 55px */ /* Space */ --space-2xs: 0.375rem; --space-xs: 0.625rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2.25rem; --space-xl: 3.5rem; --space-2xl: 5rem; --space-3xl: 7rem; /* Shape */ --radius-s: 8px; --radius-m: 14px; --radius-l: 24px; --radius-pill: 999px; --shadow-s: 0 1px 2px rgba(43, 43, 43, 0.06), 0 2px 6px rgba(43, 43, 43, 0.05); --shadow-m: 0 2px 4px rgba(43, 43, 43, 0.05), 0 8px 24px rgba(43, 43, 43, 0.08); --shadow-l: 0 4px 8px rgba(43, 43, 43, 0.06), 0 18px 48px rgba(43, 43, 43, 0.12); --container: 1180px; --container-narrow: 760px; --header-h: 76px; } /* -------------------------------------------------------------------------- 2. Reset / base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Safety net: nothing should ever scroll the page sideways. Set on rather than , because body overflow propagates to the viewport and distorts the containing block that fixed elements size against. */ overflow-x: clip; /* Offset in-page anchors so the sticky header never covers a heading. */ scroll-padding-top: calc(var(--header-h) + var(--space-m)); } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink-900); margin: 0 0 var(--space-s); text-wrap: balance; } h1 { font-size: var(--step-5); } h2 { font-size: var(--step-4); } h3 { font-size: var(--step-2); } h4 { font-size: var(--step-1); } p { margin: 0 0 var(--space-s); text-wrap: pretty; } /* Long-form paragraphs stay in the comfortable 60–75 character range. */ p, li { max-width: 68ch; } a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; } a:hover { text-decoration-thickness: 2px; } ul, ol { margin: 0 0 var(--space-s); padding-left: 1.25em; } /* -------------------------------------------------------------------------- 3. Accessibility primitives -------------------------------------------------------------------------- */ /* A single, high-contrast focus style everywhere. Never remove it. */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: var(--space-s); top: var(--space-s); z-index: 999; transform: translateY(-150%); background: var(--ink-900); color: var(--white); padding: var(--space-xs) var(--space-m); border-radius: var(--radius-s); font-weight: 700; text-decoration: none; transition: transform 0.15s ease; } .skip-link:focus { transform: translateY(0); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* -------------------------------------------------------------------------- 4. Layout -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-m); } .container--narrow { max-width: var(--container-narrow); } .section { padding-block: var(--space-2xl); } .section--tight { padding-block: var(--space-xl); } .section--sand { background: var(--bg-alt); } .section--dark { background: var(--ink-900); color: var(--sand); } .section--dark h2, .section--dark h3 { color: var(--white); } .section__head { max-width: 62ch; margin-bottom: var(--space-xl); } .section__head--center { margin-inline: auto; text-align: center; } .section__head--center p { margin-inline: auto; } .eyebrow { display: inline-block; font-family: var(--font-body); font-size: var(--step--1); font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--brand-700); margin-bottom: var(--space-xs); } .section--dark .eyebrow { color: var(--brand-300); } .lead { font-size: var(--step-1); color: var(--text-muted); line-height: 1.55; } .section--dark .lead { color: var(--sand); } .grid { display: grid; gap: var(--space-m); } @media (min-width: 700px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } } /* -------------------------------------------------------------------------- 5. Buttons Minimum 44×44px target (WCAG 2.2 target size). -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 48px; padding: 0.75em 1.6em; border: 2px solid transparent; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: var(--step-0); font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } /* Charcoal, mirroring the logotype. The logo orange is too light to carry white text at AA, so orange becomes the accent button instead of this one. */ .btn--primary { background: var(--ink-900); border-color: var(--ink-900); color: var(--white); } .btn--primary:hover { background: var(--brand-700); border-color: var(--brand-700); color: var(--white); } .btn--accent { background: var(--brand-500); border-color: var(--brand-500); color: var(--ink-900); } .btn--accent:hover { background: var(--brand-300); border-color: var(--brand-300); color: var(--ink-900); } .btn--ghost { background: transparent; border-color: var(--ink-700); color: var(--ink-700); } .btn--ghost:hover { background: var(--ink-700); color: var(--white); } .btn--on-dark { background: transparent; border-color: var(--sand); color: var(--white); } .btn--on-dark:hover { background: var(--white); border-color: var(--white); color: var(--ink-900); } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-s); } /* -------------------------------------------------------------------------- 6. Header — "locked" sticky bar -------------------------------------------------------------------------- */ .topbar { background: var(--ink-900); color: var(--sand); font-size: var(--step--1); } .topbar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-m); min-height: 42px; padding-block: var(--space-2xs); } .topbar a { color: var(--sand); text-decoration: none; font-weight: 700; } .topbar a:hover { text-decoration: underline; } .topbar__contact { display: flex; flex-wrap: wrap; gap: var(--space-m); } .topbar__badge { display: inline-flex; align-items: center; gap: 0.4em; margin: 0; max-width: none; color: var(--brand-300); font-weight: 800; letter-spacing: 0.02em; } /* Wrapper keeps the icon on the same line as the number. The global `svg { display: block }` rule would otherwise push the text below it. */ .topbar__ico { display: inline-flex; align-items: center; vertical-align: -2px; margin-right: 4px; } /* On small screens the bar must stay one line: keep the trust badge and the phone number, drop the detail that is repeated in the footer. */ @media (max-width: 700px) { .topbar__more, .topbar__email { display: none; } } .site-header { position: sticky; top: 0; z-index: 100; background: rgba(253, 249, 243, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); transition: box-shadow 0.2s ease, background-color 0.2s ease; } /* Toggled by JS once the page scrolls — gives the locked bar depth. */ .site-header.is-stuck { background: rgba(253, 249, 243, 0.98); box-shadow: var(--shadow-m); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); min-height: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: 0.7em; text-decoration: none; color: var(--ink-900); flex-shrink: 0; } .brand__mark { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: linear-gradient(140deg, var(--brand-300), var(--brand-600)); display: grid; place-items: center; /* Charcoal on orange, the same pairing as the logo — and the only one of the two that holds contrast against the gradient. */ color: var(--ink-900); font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.03em; } .brand__name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } .brand__tag { display: block; font-family: var(--font-body); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-700); } /* Primary navigation */ .nav { display: flex; align-items: center; gap: var(--space-s); } .nav__list { display: flex; align-items: center; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; } .nav__list li { max-width: none; } .nav__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-s); border-radius: var(--radius-pill); color: var(--ink-800); font-weight: 700; text-decoration: none; white-space: nowrap; } .nav__link:hover, .nav__link[aria-current="page"] { background: var(--sand); color: var(--ink-900); } .nav__cta { margin-left: var(--space-xs); } .nav-toggle { display: none; align-items: center; gap: 0.5em; min-height: 48px; padding: 0 var(--space-s); background: var(--ink-900); color: var(--white); border: 0; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: var(--step-0); font-weight: 800; cursor: pointer; } .nav-toggle__bars { display: grid; gap: 4px; } .nav-toggle__bars span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; } @media (max-width: 1023px) { .nav-toggle { display: inline-flex; } .nav { /* Closed: removed from layout entirely. A panel parked off-screen with transform still widens the document and stays keyboard-focusable, so display:none is the only clean closed state. */ display: none; position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--space-s); padding: calc(var(--space-xl) + var(--space-m)) var(--space-m) var(--space-xl); background: var(--cream); border-left: 1px solid var(--border); box-shadow: var(--shadow-l); overflow-y: auto; } .nav.is-open { display: flex; animation: nav-slide-in 0.25s ease both; } @keyframes nav-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } } .nav__list { flex-direction: column; align-items: stretch; gap: var(--space-2xs); } .nav__link { min-height: 52px; padding-inline: var(--space-s); font-size: var(--step-1); } .nav__cta { margin-left: 0; } } .nav-backdrop { position: fixed; top: 0; left: 0; /* Sized in viewport units rather than `inset: 0` / `100%`, which resolve against the document width and re-introduce sideways scroll while open. */ width: 100vw; height: 100vh; height: 100dvh; z-index: 99; background: rgba(43, 43, 43, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .nav-backdrop.is-visible { opacity: 1; visibility: visible; } /* -------------------------------------------------------------------------- 7. Hero -------------------------------------------------------------------------- */ /* Padding is deliberately asymmetric: a large gap under a sticky header just reads as dead space, so the top is tight and the breathing room goes at the bottom, where it separates the hero from the next section. */ .hero { position: relative; padding-block: var(--space-l) var(--space-2xl); background: radial-gradient(60% 80% at 85% 15%, var(--brand-300) 0%, transparent 58%), radial-gradient(50% 70% at 5% 90%, var(--brand-100) 0%, transparent 55%), var(--cream); overflow: hidden; } .hero__grid { display: grid; gap: var(--space-xl); align-items: center; } @media (min-width: 960px) { .hero__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-xl); } } .hero__badges { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-s); } .badge { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.4em 0.9em; border-radius: var(--radius-pill); background: var(--white); border: 1px solid var(--border); box-shadow: var(--shadow-s); font-size: var(--step--1); font-weight: 800; color: var(--ink-800); } .badge--brand { background: var(--brand-700); border-color: var(--brand-700); color: var(--white); } .badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-500); flex-shrink: 0; } .badge--brand .badge__dot { background: var(--brand-300); } .hero h1 { margin-bottom: var(--space-s); } /* Highlight under the emphasised words. Painted as a background gradient rather than a positioned pseudo-element so it sits behind the glyphs without a z-index fight, and wraps correctly across lines. */ .hero h1 em { font-style: normal; color: var(--ink-600); background-image: linear-gradient(var(--brand-300), var(--brand-300)); background-repeat: no-repeat; background-size: 100% 0.16em; background-position: 0 92%; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .hero__lead { font-size: var(--step-1); color: var(--text-muted); max-width: 54ch; margin-bottom: var(--space-m); } .hero__actions { margin-bottom: var(--space-m); } .hero__reassure { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m); padding: 0; margin: 0; list-style: none; font-size: var(--step--1); font-weight: 700; color: var(--text-muted); } .hero__reassure li { display: flex; align-items: center; gap: 0.45em; max-width: none; } .tick { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; background: var(--brand-700); color: var(--white); display: grid; place-items: center; font-size: 11px; font-weight: 900; } /* Hero media / card stack */ .hero__media { position: relative; } .hero__figure { position: relative; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-l); background: var(--sand); aspect-ratio: 4 / 3; } .hero__figure img { width: 100%; height: 100%; object-fit: cover; } /* Placeholder shown until real photography is supplied. */ .img-placeholder { width: 100%; height: 100%; display: grid; place-items: center; gap: var(--space-2xs); text-align: center; padding: var(--space-m); background: repeating-linear-gradient( 45deg, var(--sand) 0 14px, var(--sand-dark) 14px 28px ); color: var(--ink-700); font-size: var(--step--1); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .hero__float { position: absolute; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--shadow-l); padding: var(--space-s) var(--space-m); max-width: 240px; } .hero__float--stat { right: -12px; bottom: -20px; } .hero__float strong { display: block; font-family: var(--font-display); font-size: var(--step-2); line-height: 1; color: var(--ink-800); } .hero__float span { font-size: var(--step--1); font-weight: 700; color: var(--text-muted); } @media (max-width: 700px) { .hero__float--stat { right: 0; bottom: -16px; } } /* -------------------------------------------------------------------------- 8. Trust bar -------------------------------------------------------------------------- */ .trustbar { background: var(--ink-900); color: var(--sand); padding-block: var(--space-m); } .trustbar__list { display: grid; gap: var(--space-s) var(--space-l); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); list-style: none; margin: 0; padding: 0; } .trustbar__list li { display: flex; align-items: center; gap: 0.6em; max-width: none; font-size: var(--step--1); font-weight: 700; line-height: 1.35; } .trustbar__icon { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(235, 183, 101, 0.16); color: var(--brand-300); } /* -------------------------------------------------------------------------- 9. Cards -------------------------------------------------------------------------- */ .card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-s); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); } .card__body { padding: var(--space-l); display: flex; flex-direction: column; flex: 1; } .card__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--brand-100); color: var(--brand-800); margin-bottom: var(--space-s); } .card__icon--alt { background: var(--brand-100); color: var(--brand-700); } .card h3 { font-size: var(--step-1); margin-bottom: var(--space-2xs); } .card p { color: var(--text-muted); margin-bottom: var(--space-s); } .card__link { margin-top: auto; font-weight: 800; text-decoration: none; color: var(--ink-700); display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; } .card__link:hover { text-decoration: underline; text-underline-offset: 0.25em; } .card__link .arrow { transition: transform 0.18s ease; } .card__link:hover .arrow { transform: translateX(4px); } /* -------------------------------------------------------------------------- 10. About -------------------------------------------------------------------------- */ .about__grid { display: grid; gap: var(--space-xl); align-items: center; } @media (min-width: 960px) { .about__grid { grid-template-columns: 0.95fr 1.05fr; gap: var(--space-2xl); } } .about__media { position: relative; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-l); aspect-ratio: 1 / 1; background: var(--sand); } .about__points { list-style: none; padding: 0; margin: var(--space-l) 0 var(--space-l); display: grid; gap: var(--space-m); } .about__points li { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-s); align-items: start; max-width: none; } .about__points h4 { margin-bottom: 0.15em; } .about__points p { margin: 0; color: var(--text-muted); } .point__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--sand); color: var(--ink-700); } /* -------------------------------------------------------------------------- 11. Course cards -------------------------------------------------------------------------- */ .course { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-m); overflow: hidden; } .course__banner { position: relative; aspect-ratio: 16 / 9; background: var(--sand); } .course__flag { position: absolute; top: var(--space-s); left: var(--space-s); z-index: 2; display: inline-flex; align-items: center; gap: 0.4em; padding: 0.4em 0.85em; border-radius: var(--radius-pill); background: var(--brand-700); color: var(--white); font-size: var(--step--1); font-weight: 800; box-shadow: var(--shadow-s); } /* Charcoal, so the two programs stay tellable apart at a glance now that the primary flag is brand orange. */ .course__flag--alt { background: var(--ink-900); color: var(--white); } .course__body { padding: var(--space-l); display: flex; flex-direction: column; flex: 1; } .course h3 { font-size: var(--step-2); margin-bottom: var(--space-xs); } .course__summary { color: var(--text-muted); margin-bottom: var(--space-m); } .course__meta { list-style: none; margin: 0 0 var(--space-m); padding: var(--space-m) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); display: grid; gap: var(--space-xs); } .course__meta li { display: grid; grid-template-columns: 26px 1fr; gap: 0.6em; align-items: center; max-width: none; font-size: var(--step--1); font-weight: 700; color: var(--ink-800); } .course__meta svg { color: var(--brand-700); } .course__actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--space-xs); } /* Small "TBC" marker for details the client has not supplied yet. */ .tbc { display: inline-block; padding: 0.1em 0.5em; border-radius: 4px; background: var(--brand-100); border: 1px dashed var(--brand-700); color: var(--brand-700); font-size: 0.85em; font-weight: 800; } /* -------------------------------------------------------------------------- 12. Steps / how it works -------------------------------------------------------------------------- */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-l); counter-reset: step; } @media (min-width: 860px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-m); } } .steps li { position: relative; max-width: none; padding-top: var(--space-l); } .steps li::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-500); color: var(--ink-900); font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; } .steps h3 { font-size: var(--step-1); margin: var(--space-m) 0 var(--space-2xs); } .steps p { margin: 0; color: var(--text-muted); font-size: var(--step--1); } .section--dark .steps p { color: var(--sand); } /* -------------------------------------------------------------------------- 13. Reviews -------------------------------------------------------------------------- */ .reviews { display: grid; gap: var(--space-m); } @media (min-width: 900px) { .reviews { grid-template-columns: repeat(3, 1fr); } } .review { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-l); padding: var(--space-l); box-shadow: var(--shadow-s); } .review__stars { display: flex; gap: 2px; color: var(--brand-500); margin-bottom: var(--space-s); } /* Body sans, not the display serif. These are full paragraphs of real testimony, not short pull-quotes — a display face at that length reads as decoration and makes each card roughly a third taller. */ .review blockquote { margin: 0 0 var(--space-m); font-size: var(--step-0); line-height: 1.6; color: var(--ink-800); } .review figcaption { margin-top: auto; display: flex; align-items: center; gap: var(--space-xs); font-size: var(--step--1); } .review__avatar { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: var(--brand-100); color: var(--brand-800); display: grid; place-items: center; font-weight: 900; font-size: 1rem; } .review__name { display: block; font-weight: 800; color: var(--ink-900); } .review__role { color: var(--text-muted); } /* -------------------------------------------------------------------------- 14. Booking / enquiry form -------------------------------------------------------------------------- */ .booking__grid { display: grid; gap: var(--space-xl); align-items: start; } @media (min-width: 960px) { .booking__grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-2xl); } } .form-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-l); padding: var(--space-l); } @media (min-width: 700px) { .form-card { padding: var(--space-xl); } } .field { margin-bottom: var(--space-m); } .field label { display: block; font-weight: 800; font-size: var(--step--1); color: var(--ink-900); margin-bottom: var(--space-2xs); } .field .hint { display: block; font-weight: 600; color: var(--text-muted); font-size: var(--step--1); margin-bottom: var(--space-2xs); } .req { color: #B3261E; } .field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 0.7em 0.9em; font-family: var(--font-body); font-size: var(--step-0); color: var(--text); background: var(--cream); border: 2px solid var(--sand-dark); border-radius: var(--radius-s); transition: border-color 0.15s ease, background-color 0.15s ease; } .field textarea { min-height: 130px; resize: vertical; } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-500); } .field input:focus, .field select:focus, .field textarea:focus { background: var(--white); border-color: var(--ink-700); } .field-row { display: grid; gap: var(--space-m); } @media (min-width: 620px) { .field-row--2 { grid-template-columns: 1fr 1fr; } } .choice { display: flex; align-items: flex-start; gap: 0.65em; margin-bottom: var(--space-xs); cursor: pointer; } .choice input { width: 22px; height: 22px; min-height: 0; margin-top: 2px; flex-shrink: 0; accent-color: var(--ink-700); } .choice span { font-weight: 600; font-size: var(--step--1); } .form-note { font-size: var(--step--1); color: var(--text-muted); margin-top: var(--space-s); } /* Sidebar beside the form: alternative contact routes. */ .contact-routes { list-style: none; margin: var(--space-l) 0 0; padding: 0; display: grid; gap: var(--space-s); } .contact-routes li { max-width: none; } .route { display: grid; grid-template-columns: 48px 1fr; gap: var(--space-s); align-items: center; padding: var(--space-s); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-m); text-decoration: none; color: var(--text); box-shadow: var(--shadow-s); transition: transform 0.18s ease, box-shadow 0.18s ease; } .route:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); } .route__icon { width: 48px; height: 48px; border-radius: 12px; background: var(--brand-100); color: var(--brand-800); display: grid; place-items: center; } .route__label { display: block; font-size: var(--step--1); font-weight: 700; color: var(--text-muted); } .route__value { display: block; font-weight: 800; font-size: var(--step-1); color: var(--ink-900); line-height: 1.2; } /* -------------------------------------------------------------------------- 15. CTA band -------------------------------------------------------------------------- */ .cta { position: relative; background: radial-gradient(75% 130% at 12% 0%, var(--brand-700) 0%, transparent 62%), var(--ink-900); color: var(--white); overflow: hidden; } .cta__inner { display: grid; gap: var(--space-l); align-items: center; padding-block: var(--space-2xl); } @media (min-width: 900px) { .cta__inner { grid-template-columns: 1.4fr 1fr; gap: var(--space-2xl); } } .cta h2 { color: var(--white); margin-bottom: var(--space-s); } .cta p { color: var(--sand); font-size: var(--step-1); margin-bottom: 0; } .cta__actions { display: flex; flex-direction: column; gap: var(--space-s); } @media (min-width: 520px) and (max-width: 899px) { .cta__actions { flex-direction: row; } } /* -------------------------------------------------------------------------- 16. Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--ink-900); color: var(--sand); padding-block: var(--space-2xl) var(--space-m); } .site-footer h2, .site-footer h3 { color: var(--white); } .footer__grid { display: grid; gap: var(--space-xl); } @media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } } @media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } } .site-footer .brand { color: var(--white); margin-bottom: var(--space-s); } .site-footer .brand__tag { color: var(--brand-300); } .footer__about { color: var(--sand); font-size: var(--step--1); } .footer__title { font-family: var(--font-body); font-size: var(--step--1); font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--brand-300); margin-bottom: var(--space-s); } .footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); } .footer__list li { max-width: none; } .footer__list a, .footer__contact a { color: var(--sand); text-decoration: none; display: inline-flex; align-items: center; min-height: 40px; font-size: var(--step--1); font-weight: 600; } .footer__list a:hover, .footer__contact a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 0.2em; } .footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); } .footer__contact li { max-width: none; font-size: var(--step--1); } .socials { display: flex; gap: var(--space-xs); margin-top: var(--space-m); } .socials a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(253, 249, 243, 0.1); color: var(--sand); transition: background-color 0.18s ease, color 0.18s ease; } .socials a:hover { background: var(--brand-300); color: var(--ink-900); } .footer__registration { margin-top: var(--space-xl); padding: var(--space-m); border: 1px solid rgba(253, 249, 243, 0.18); border-radius: var(--radius-m); background: rgba(253, 249, 243, 0.04); font-size: var(--step--1); } .footer__registration p { max-width: none; margin: 0; color: var(--sand); } /* Inline links on any dark ground. Without this they inherit the dark-on-light brand link colour and fall well below AA. */ .site-footer a:not(.btn):not(.brand), .section--dark a:not(.btn), .cta a:not(.btn) { color: var(--brand-300); } .site-footer a:not(.btn):not(.brand):hover, .section--dark a:not(.btn):hover, .cta a:not(.btn):hover { color: var(--white); } .footer__bottom { margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px solid rgba(253, 249, 243, 0.16); display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-m); align-items: center; justify-content: space-between; font-size: var(--step--1); color: var(--sand); } .footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-m); list-style: none; margin: 0; padding: 0; } .footer__legal li { max-width: none; } .acknowledgement { margin-top: var(--space-m); font-size: var(--step--1); color: rgba(245, 234, 219, 0.75); max-width: 70ch; } /* -------------------------------------------------------------------------- 17. Form alerts -------------------------------------------------------------------------- */ .form-alert { padding: var(--space-s) var(--space-m); border-radius: var(--radius-m); border-left: 5px solid; margin-bottom: var(--space-m); font-weight: 700; } .form-alert:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .form-alert--success { background: var(--brand-100); border-color: var(--brand-700); color: var(--brand-800); } .form-alert--error { background: #FCE8E6; border-color: #B3261E; color: #7A1912; } /* -------------------------------------------------------------------------- 18. Editor content Styles for whatever the client writes in the block editor on About, FAQ, Contact and course pages. -------------------------------------------------------------------------- */ .entry-content > * + * { margin-top: var(--space-m); } .entry-content h2 { font-size: var(--step-3); margin-top: var(--space-xl); } .entry-content h3 { font-size: var(--step-2); margin-top: var(--space-l); } .entry-content ul, .entry-content ol { padding-left: 1.4em; } .entry-content li + li { margin-top: var(--space-2xs); } .entry-content blockquote { margin: var(--space-l) 0; padding: var(--space-m) var(--space-l); border-left: 5px solid var(--brand-500); background: var(--sand); border-radius: 0 var(--radius-m) var(--radius-m) 0; font-family: var(--font-display); font-size: var(--step-1); } .entry-content img { border-radius: var(--radius-m); } .entry-content table { width: 100%; border-collapse: collapse; margin-block: var(--space-m); } .entry-content th, .entry-content td { padding: var(--space-xs) var(--space-s); border: 1px solid var(--border); text-align: left; } .entry-content th { background: var(--sand); font-weight: 800; } /* Wide content must scroll inside itself, never the page. */ .entry-content .wp-block-table { overflow-x: auto; } /* -------------------------------------------------------------------------- 19. Pagination -------------------------------------------------------------------------- */ .pagination { margin-top: var(--space-xl); } .pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-2xs); justify-content: center; } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--space-xs); border-radius: var(--radius-s); background: var(--white); border: 1px solid var(--border); text-decoration: none; font-weight: 700; } .pagination .page-numbers.current { background: var(--ink-700); border-color: var(--ink-700); color: var(--white); } /* Custom logo, when one is uploaded, replaces the text lockup. */ .brand__logo { max-height: 56px; width: auto; } /* -------------------------------------------------------------------------- 20. Interior page hero Lighter than the homepage hero: orients the reader without competing with the content underneath. -------------------------------------------------------------------------- */ .page-hero { padding-block: var(--space-xl) var(--space-l); background: radial-gradient(55% 90% at 88% 10%, var(--brand-100) 0%, transparent 62%), var(--cream); } /* Keeps the top of the scale. Dropping this to --step-4 would make the page title the same size as the h2s underneath it and flatten the hierarchy. */ .page-hero h1 { max-width: 20ch; } .page-hero .lead { max-width: 60ch; } /* -------------------------------------------------------------------------- 21. FAQ accordion Native

: keyboard accessible with no JavaScript. -------------------------------------------------------------------------- */ .faq-group { margin-bottom: var(--space-xl); } .faq-group__title { font-size: var(--step-2); padding-bottom: var(--space-xs); border-bottom: 2px solid var(--border); margin-bottom: var(--space-s); } .faq { border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--white); margin-bottom: var(--space-xs); overflow: hidden; } .faq[open] { box-shadow: var(--shadow-s); } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); min-height: 60px; padding: var(--space-s) var(--space-m); cursor: pointer; font-family: var(--font-body); font-weight: 800; font-size: var(--step-0); color: var(--ink-900); list-style: none; } /* Hide the default disclosure triangle in both engines. */ .faq__q::-webkit-details-marker { display: none; } .faq__q::marker { content: ""; } .faq__q:hover { background: var(--sand); } .faq__q:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; } /* Plus sign that becomes a minus when the answer is open. */ .faq__marker { position: relative; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--sand); } .faq__marker::before, .faq__marker::after { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 2.5px; background: var(--ink-700); border-radius: 2px; transform: translate(-50%, -50%); transition: transform 0.2s ease; } .faq__marker::after { transform: translate(-50%, -50%) rotate(90deg); } .faq[open] .faq__marker::after { transform: translate(-50%, -50%) rotate(0deg); } .faq__a { padding: 0 var(--space-m) var(--space-m); } .faq__a p { margin: 0; color: var(--text-muted); } /* -------------------------------------------------------------------------- 22. Contact page -------------------------------------------------------------------------- */ /* Contact-page variant of the route card: taller, sits in a 3-up grid. */ .route--stacked { grid-template-columns: 48px 1fr; padding: var(--space-m); min-height: 96px; } .location-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-s); } .location-list li { max-width: none; padding: var(--space-s) var(--space-m); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-m); } .location-list__note { display: block; font-size: var(--step--1); color: var(--text-muted); } /* -------------------------------------------------------------------------- 23. Team cards -------------------------------------------------------------------------- */ .team-card__photo { aspect-ratio: 1 / 1; background: var(--sand); } /* -------------------------------------------------------------------------- 24. Course page — key facts -------------------------------------------------------------------------- */ .factgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .factgrid li { max-width: none; display: grid; grid-template-columns: 44px 1fr; grid-template-areas: "icon label" "icon value"; gap: 0 var(--space-s); align-items: center; padding: var(--space-m); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--shadow-s); } .factgrid__icon { grid-area: icon; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--brand-100); color: var(--brand-800); } .factgrid__label { grid-area: label; font-size: var(--step--1); font-weight: 700; color: var(--text-muted); } .factgrid__value { grid-area: value; font-weight: 800; color: var(--ink-900); line-height: 1.3; } /* -------------------------------------------------------------------------- 25. Course page — session slots -------------------------------------------------------------------------- */ .slot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs); padding: var(--space-l); background: var(--white); border: 2px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-m); } .slot__tag { display: inline-block; padding: 0.3em 0.9em; border-radius: var(--radius-pill); background: var(--brand-100); color: var(--brand-800); font-size: var(--step--1); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .slot__time { margin: var(--space-xs) 0 0; font-family: var(--font-display); font-size: var(--step-3); font-weight: 700; line-height: 1.1; color: var(--ink-900); } .slot__day { margin: 0 0 var(--space-m); font-weight: 700; color: var(--text-muted); } /* -------------------------------------------------------------------------- 26. Course page — week-by-week curriculum -------------------------------------------------------------------------- */ .weeks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-s); counter-reset: none; } @media (min-width: 640px) { .weeks { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .weeks { grid-template-columns: repeat(2, 1fr); gap: var(--space-s) var(--space-l); } } .week { max-width: none; display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: var(--space-s); padding: var(--space-s) var(--space-m); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-m); transition: transform 0.18s ease, box-shadow 0.18s ease; } .week:hover { transform: translateX(4px); box-shadow: var(--shadow-s); } .week__num { display: grid; place-items: center; width: 62px; height: 56px; border-radius: var(--radius-s); background: var(--brand-100); color: var(--brand-800); font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; line-height: 1; } .week__num-label { display: block; font-family: var(--font-body); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; } .week__title { font-weight: 800; color: var(--ink-900); line-height: 1.3; } /* The graduation week is the payoff — give it the brand fill. */ .week--final { background: var(--ink-900); border-color: var(--ink-900); } .week--final .week__num { background: var(--brand-500); color: var(--ink-900); } .week--final .week__title { color: var(--white); } /* -------------------------------------------------------------------------- 27. Course page — what's included -------------------------------------------------------------------------- */ .includes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .includes li { max-width: none; display: grid; grid-template-columns: 40px 1fr; gap: var(--space-s); align-items: center; font-weight: 700; line-height: 1.4; } .includes__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: rgba(247, 148, 30, 0.16); color: var(--brand-300); } /* -------------------------------------------------------------------------- 28. Price card -------------------------------------------------------------------------- */ .pricecard { text-align: center; padding: var(--space-xl) var(--space-l); background: var(--white); border: 2px solid var(--brand-500); border-radius: var(--radius-l); box-shadow: var(--shadow-l); } .pricecard__label { display: block; font-size: var(--step--1); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-800); } .pricecard__amount { margin: var(--space-2xs) 0 0; font-family: var(--font-display); font-size: clamp(2.5rem, 2rem + 2.5vw, 3.5rem); font-weight: 700; line-height: 1; color: var(--ink-900); } .pricecard__note { margin: var(--space-xs) auto var(--space-m); max-width: 28ch; font-size: var(--step--1); color: var(--text-muted); } /* -------------------------------------------------------------------------- 29. Real photography Photos fill their frame rather than distorting. Every frame already has an aspect-ratio, so images never shift the layout as they load. -------------------------------------------------------------------------- */ .photo { width: 100%; height: 100%; object-fit: cover; /* Faces sit in the upper half of most candid shots, so bias the crop up. */ object-position: center 40%; } .course__banner .photo, .team-card__photo .photo, .hero__figure .photo, .about__media .photo { display: block; } /* -------------------------------------------------------------------------- 30. Comparison table Wide tables scroll inside their own container so the page never scrolls sideways on a phone. -------------------------------------------------------------------------- */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-m); } .compare { width: 100%; min-width: 640px; border-collapse: collapse; background: var(--white); border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-s); } .compare th, .compare td { padding: var(--space-s) var(--space-m); text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); max-width: none; } .compare thead th { background: var(--ink-900); color: var(--white); font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; line-height: 1.25; } .compare tbody th { width: 1%; white-space: nowrap; font-size: var(--step--1); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand-800); background: var(--sand); } .compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; } @media (max-width: 700px) { .compare tbody th { white-space: normal; } } /* -------------------------------------------------------------------------- 31. Legal pages Long documents: a sticky contents list beside the text on desktop, a collapsible one above it on mobile. -------------------------------------------------------------------------- */ .page-hero--legal { padding-block: var(--space-l) var(--space-m); } .legal-meta { margin: 0; font-size: var(--step--1); font-weight: 700; color: var(--text-muted); } .legal { display: grid; gap: var(--space-l); align-items: start; } @media (min-width: 960px) { .legal { grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-xl); } .legal__toc { position: sticky; top: calc(var(--header-h) + var(--space-m)); } } .legal__body { max-width: 72ch; } .legal__body > .lead { margin-bottom: var(--space-l); } .legal__body h2 { font-size: var(--step-3); margin-top: var(--space-xl); padding-top: var(--space-m); border-top: 1px solid var(--border); } .legal__body h2:first-of-type { margin-top: var(--space-m); } .legal__body h3 { font-size: var(--step-1); margin-top: var(--space-m); } /* Contents list */ .toc { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-m); padding: var(--space-s) var(--space-m); } .toc__title { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: var(--step--1); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-800); } .toc__list { list-style: none; margin: var(--space-2xs) 0 0; padding: 0; counter-reset: toc; } .toc__list li { max-width: none; counter-increment: toc; } .toc__list a { display: flex; gap: 0.6em; min-height: 40px; align-items: center; padding: 0.2em 0; font-size: var(--step--1); font-weight: 700; line-height: 1.3; color: var(--ink-800); text-decoration: none; border-bottom: 1px solid var(--border); } .toc__list li:last-child a { border-bottom: 0; } .toc__list a::before { content: counter(toc); flex: 0 0 1.6em; font-variant-numeric: tabular-nums; color: var(--brand-800); } .toc__list a:hover { color: var(--brand-800); text-decoration: underline; text-underline-offset: 0.2em; } /* Kids workshop — date under each day's bake, and small print on the price card. */ .week__date { display: block; font-size: var(--step--1); font-weight: 600; color: var(--text-muted); } .week--final .week__date { color: var(--sand); } .pricecard__fine { margin: var(--space-xs) auto 0; max-width: 30ch; font-size: var(--step--1); color: var(--text-muted); } /* -------------------------------------------------------------------------- 32. Logo -------------------------------------------------------------------------- */ /* Header: the full lockup. 600x200 source, shown at 64px tall (192px wide), so it stays sharp up to about 3x pixel density. */ .brand--header .brand__logo { height: 64px; max-height: none; width: auto; } @media (max-width: 480px) { .brand--header .brand__logo { height: 50px; } } /* Footer: the heart mark beside the name set as real text. */ .brand__mark-img { height: 56px; width: auto; flex-shrink: 0; } .brand--footer { gap: 0.8em; } /* -------------------------------------------------------------------------- 33. Kids workshop booking -------------------------------------------------------------------------- */ /* The hidden attribute must win over any display rule below. */ [hidden] { display: none !important; } .booking-page { display: grid; gap: var(--space-l); align-items: start; } @media (min-width: 960px) { .booking-page { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-xl); } .booking-page__aside { position: sticky; top: calc(var(--header-h) + var(--space-m)); } } /* On phones the summary sits above the form, so parents see what they are booking before they start typing. */ @media (max-width: 959px) { .booking-page__aside { order: -1; } } .booking-form { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-m); padding: var(--space-m); } @media (min-width: 700px) { .booking-form { padding: var(--space-l); } } .form-section { border: 0; padding: 0; margin: 0 0 var(--space-l); min-width: 0; } .form-section__title { display: flex; align-items: center; gap: 0.6em; padding: 0; margin-bottom: var(--space-m); font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; color: var(--ink-900); } .form-section__num { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-500); color: var(--ink-900); font-family: var(--font-body); font-size: 1rem; font-weight: 900; } @media (min-width: 620px) { .field-row--3 { grid-template-columns: 1.4fr 0.8fr 0.8fr; } } .child-block { margin: 0 0 var(--space-m); padding: var(--space-m); background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius-m); min-width: 0; } .child-block__title { padding: 0 0.5em; margin-left: -0.5em; font-weight: 900; color: var(--brand-800); letter-spacing: 0.03em; } .optional { font-weight: 600; color: var(--text-muted); } /* Errors: colour is never the only signal — every error also has text and a thicker border. */ .field__error { display: block; margin-bottom: var(--space-2xs); font-size: var(--step--1); font-weight: 800; color: #B3261E; } .field [aria-invalid="true"] { border-color: #B3261E; border-width: 3px; background: #FFF6F5; } .field--check.has-error { padding-left: var(--space-s); border-left: 4px solid #B3261E; } .error-summary { margin-bottom: var(--space-m); padding: var(--space-m); border: 3px solid #B3261E; border-radius: var(--radius-m); background: #FFF6F5; } .error-summary__title { font-size: var(--step-1); margin-bottom: var(--space-xs); } .error-summary ul { margin: 0; } .error-summary a { color: #B3261E; font-weight: 800; } .booking-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-s); margin: var(--space-m) 0; padding: var(--space-m); background: var(--sand); border-radius: var(--radius-m); } .booking-total__label { font-weight: 800; color: var(--ink-900); } .booking-total__amount { font-family: var(--font-display); font-size: var(--step-3); font-weight: 700; color: var(--ink-900); line-height: 1; } .booking-total__detail { width: 100%; font-size: var(--step--1); color: var(--text-muted); } .btn--large { min-height: 56px; font-size: var(--step-1); } /* Side summary */ .booking-summary { padding: var(--space-m); background: var(--white); border: 2px solid var(--brand-500); border-radius: var(--radius-l); box-shadow: var(--shadow-s); } .booking-summary__label { margin: 0 0 var(--space-2xs); font-size: var(--step--1); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-800); } .booking-summary__title { font-size: var(--step-2); margin-bottom: var(--space-s); } .booking-summary__list { list-style: none; margin: 0 0 var(--space-m); padding: 0; display: grid; gap: var(--space-xs); } .booking-summary__list li { display: grid; grid-template-columns: 22px 1fr; gap: 0.5em; align-items: start; max-width: none; font-size: var(--step--1); font-weight: 700; color: var(--ink-800); } .booking-summary__list svg { margin-top: 2px; color: var(--brand-700); } .booking-steps { margin: 0 0 var(--space-m); padding-left: 1.3em; font-size: var(--step--1); font-weight: 700; } .booking-summary__help { margin: 0; font-size: var(--step--1); } /* After-payment and status messages */ .booking-status { padding: var(--space-l); background: var(--white); border: 1px solid var(--border); border-left: 6px solid var(--ink-700); border-radius: var(--radius-m); box-shadow: var(--shadow-m); } .booking-status--ok { border-left-color: #1E7A3C; } .booking-status--warn { border-left-color: var(--brand-600); } .booking-status:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .booking-facts { display: grid; gap: var(--space-xs); margin: var(--space-m) 0; } .booking-facts > div { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-s); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--border); } .booking-facts dt { font-weight: 800; color: var(--text-muted); } .booking-facts dd { margin: 0; } @media (max-width: 520px) { .booking-facts > div { grid-template-columns: 1fr; gap: 0; } } /* Paired fields stack on phones; without this the row gap and each field's own bottom margin add together and leave a doubled space between them. Applies to every form on the site. */ .field-row { margin-bottom: var(--space-m); } .field-row > .field { margin-bottom: 0; } /* --------------------------------------------------------------------------- Day picker on the booking form Each child chooses their own days, so the chooser has to read clearly when it is repeated up to four times down the page. Rows rather than a grid: the day, the bake and any "Full" note stay on one line and stay legible at 320px, which a 5-column grid does not. --------------------------------------------------------------------------- */ .dayset { border: 0; margin: 0; padding: 0; } .dayset > legend { font-weight: 700; padding: 0; margin-bottom: 0.15rem; } .dayset .hint { display: block; margin-bottom: 0.6rem; } .choice--day { align-items: center; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 0.4rem; padding: 0.55rem 0.7rem; transition: border-color 0.15s ease, background-color 0.15s ease; } .choice--day:hover { border-color: var(--brand-500); } .choice--day:has(input:checked) { background: var(--brand-100); border-color: var(--brand-500); } .choice--day:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; } .choice--day > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; } .choice__note { color: var(--text-muted); font-size: 0.875rem; } .choice--day.is-full { opacity: 0.55; } .choice--day.is-full .choice__note:last-child { color: #B3261E; font-weight: 700; } .dayset__price { margin: 0.55rem 0 0; font-weight: 700; } .field--days.has-error .dayset { border-left: 3px solid #B3261E; padding-left: 0.75rem; } /* Price-by-days table on the kids workshop page. */ .pricetable { border-collapse: collapse; margin: var(--space-s) 0 var(--space-m); width: 100%; max-width: 26rem; } .pricetable th, .pricetable td { border-bottom: 1px solid var(--border); padding: 0.5rem 0.75rem 0.5rem 0; text-align: left; } .pricetable th { font-weight: 600; } .pricetable td:nth-child(2) { font-weight: 800; white-space: nowrap; } .pricetable td:last-child { color: var(--brand-800); font-size: var(--step--1); font-weight: 700; } .pricetable__best th, .pricetable__best td { border-bottom: 0; } /* --------------------------------------------------------------------------- NDIS course page — skills, supports, callout and class gallery --------------------------------------------------------------------------- */ /* A note the reader must not skim past — the non-refundable terms. */ .callout--note { background: var(--brand-100); border-left: 4px solid var(--brand-500); border-radius: 8px; margin: var(--space-s) 0 var(--space-m); padding: var(--space-s); } .pricetable--wide { max-width: 34rem; } /* NDIS support items. The codes are what a plan manager copies, so they are monospaced and selectable rather than decorative. */ .supports { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: var(--space-s); } .supports__group { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: var(--space-s); } .supports__title { color: var(--brand-800); font-size: var(--step-0); letter-spacing: 0.04em; margin: 0 0 0.6rem; text-transform: uppercase; } .supports__list { list-style: none; margin: 0; padding: 0; } .supports__list li + li { border-top: 1px solid var(--border); margin-top: 0.6rem; padding-top: 0.6rem; } .supports__name { display: block; font-weight: 600; } .supports__code { color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--step--1); user-select: all; } /* Photographs from previous classes. */ .classgallery { display: grid; gap: var(--space-xs); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); list-style: none; margin: 0; padding: 0; } .classgallery li { border-radius: 12px; overflow: hidden; } .classgallery img { aspect-ratio: 4 / 3; display: block; height: 100%; object-fit: cover; width: 100%; } /* --------------------------------------------------------------------------- Outcomes — what the course builds A two-column reading layout rather than a grid of boxes: six bordered cards all shouting at once gave the section no hierarchy, and the text is the point here. Hairlines separate the items; the aside carries the action. --------------------------------------------------------------------------- */ .outcomes { display: grid; gap: var(--space-m); grid-template-columns: 1fr; align-items: start; } @media (min-width: 60rem) { .outcomes { grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 1fr); gap: var(--space-l); } } .outcomes__list { display: grid; gap: 0; grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; } @media (min-width: 40rem) { .outcomes__list { column-gap: var(--space-m); grid-template-columns: repeat(2, minmax(0, 1fr)); } } .outcome { border-top: 1px solid var(--border); display: flex; gap: 0.85rem; padding: var(--space-s) 0; } .outcome__icon { color: var(--brand-800); flex: 0 0 auto; line-height: 1; padding-top: 0.15rem; } .outcome__title { font-size: var(--step-0); margin: 0 0 0.2rem; } .outcome__text { color: var(--text-muted); font-size: var(--step--1); margin: 0; } .outcomes__aside { background: var(--ink-900); border-radius: 14px; color: var(--white); padding: var(--space-m); position: sticky; top: 6rem; } .outcomes__eyebrow { color: var(--brand-300); font-size: var(--step--1); font-weight: 800; letter-spacing: 0.06em; margin: 0 0 0.5rem; text-transform: uppercase; } .outcomes__lead { margin: 0 0 var(--space-s); } .outcomes__note { font-size: var(--step--1); margin: 0.75rem 0 0; opacity: 0.85; } .outcomes__note a { color: var(--brand-300); } /* --------------------------------------------------------------------------- Cost panel The price gets its own block at the top left, where the eye lands first, with the inclusions and the action beside it. --------------------------------------------------------------------------- */ .costpanel { background: var(--white); border: 1px solid var(--border); border-radius: 16px; display: grid; grid-template-columns: 1fr; margin: 0 auto var(--space-m); max-width: 62rem; overflow: hidden; } @media (min-width: 48rem) { .costpanel { grid-template-columns: minmax(16rem, 1fr) minmax(0, 1.4fr); } } .costpanel__price { background: var(--ink-900); color: var(--white); padding: var(--space-m); } .costpanel__label { color: var(--brand-300); display: block; font-size: var(--step--1); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } .costpanel__amount { font-family: var(--font-display); font-size: var(--step-5); line-height: 1; margin: 0.35rem 0 0.3rem; } .costpanel__unit { margin: 0 0 var(--space-s); opacity: 0.85; } .costpanel__pill { align-items: center; background: rgba(255, 255, 255, 0.12); border-radius: 999px; display: inline-flex; font-size: var(--step--1); font-weight: 700; gap: 0.4rem; padding: 0.4rem 0.8rem; } .costpanel__body { padding: var(--space-m); } .costpanel__included { font-weight: 800; margin: 0 0 0.6rem; } .ticklist { list-style: none; margin: 0 0 var(--space-s); padding: 0; } .ticklist li { padding-left: 1.6rem; position: relative; } .ticklist li + li { margin-top: 0.4rem; } /* A tick drawn in CSS: no extra image request, and it stays crisp. */ .ticklist li::before { border-bottom: 2px solid var(--brand-700); border-left: 2px solid var(--brand-700); content: ""; height: 0.35rem; left: 0.15rem; position: absolute; top: 0.45rem; transform: rotate(-45deg); width: 0.7rem; } .costpanel__reassure { color: var(--text-muted); font-size: var(--step--1); margin: 0.75rem 0 0; } /* --------------------------------------------------------------------------- Corrections to the outcomes and cost panels --------------------------------------------------------------------------- */ /* The primary button is charcoal, which disappeared against the charcoal coordinator panel. On dark ground the accent button is the readable one. */ .outcomes__aside .btn--primary { background: var(--brand-500); border-color: var(--brand-500); color: var(--ink-900); } .outcomes__aside .btn--primary:hover, .outcomes__aside .btn--primary:focus-visible { background: var(--brand-300); border-color: var(--brand-300); } .outcomes__aside { padding: var(--space-m) calc(var(--space-m) + 0.25rem); } /* The price column was top-aligned, leaving a pool of empty charcoal beneath it whenever the inclusions list ran longer. Centre it in its own column. */ .costpanel__price { display: flex; flex-direction: column; justify-content: center; } .costpanel__amount { margin-top: 0.5rem; } .costpanel__pill { align-self: flex-start; } /* Fine print should read as fine print: smaller than body copy, and not competing with the panel above it. */ .callout--note { font-size: var(--step--1); margin-left: auto; margin-right: auto; max-width: 62rem; } /* Support items read better as one table than three floating cards — a plan manager scans down a single column of codes rather than across three. */ .supports { background: var(--white); border: 1px solid var(--border); border-radius: 14px; display: block; margin: var(--space-s) auto 0; max-width: 62rem; overflow: hidden; } .supports__group { border: 0; border-radius: 0; display: grid; gap: 0.25rem var(--space-m); grid-template-columns: 1fr; padding: var(--space-s) var(--space-m); } @media (min-width: 40rem) { .supports__group { grid-template-columns: 12rem minmax(0, 1fr); } } .supports__group + .supports__group { border-top: 1px solid var(--border); } .supports__title { margin: 0; padding-top: 0.15rem; } .supports__list li { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0.15rem 0.75rem; justify-content: space-between; } .supports__name { display: inline; } /* The schedule heading sits under a centred section head, so centre it too. */ #cost h3 { text-align: center; }