/* Happy Days Creative — Parents subscription mini-site
Same design tokens as the schools site; leans warmer + on teal accents. */
/* Self-hosted Anton (latin subset) — served from our origin so no third-party
round trip, preloaded high-priority in each page's . */
@font-face {
font-family: 'Anton';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/anton-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter and Caveat are self-hosted too. They used to come from fonts.gstatic.com,
which handed every visitor's IP address to Google before they had agreed to
anything — the one third-party request on the page that ran ahead of consent.
Inter is Google's variable file (one weight axis, one download covers 100-900);
Caveat is the 500 instance, the only weight the site uses. */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/fonts/caveat-500-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-adjusted fallback fonts — approximate Anton and Inter with system fonts so
the layout does not visibly shift when the web fonts swap in. */
@font-face {
font-family: 'Anton Fallback';
src: local('Impact'), local('Haettenschweiler'), local('Arial Narrow Bold');
size-adjust: 92%;
ascent-override: 88%;
descent-override: 12%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Inter Fallback';
src: local('Segoe UI'), local('-apple-system'), local('Roboto'), local('Arial');
size-adjust: 100%;
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
}
/* Lee's brand palette, from his deck (2026-08-12). Primary purple #7D1376 and
white; secondary cyan #5CE0E6 and grey #747373. The names are the ones the
codebase already used -- "indigo" and "teal" are now inaccurate as English
but renaming them would touch several hundred call sites for no behaviour
change, so they stay and this comment carries the truth.
--muted is #6d6d6d, not Lee's #747373, and that is deliberate. His grey is
marginally lighter than the #6b6b7b it replaces, which was enough to drop
secondary text to 4.37:1 on the cream --paper ground -- under AA, in about
seventeen places including the admin table headers and the email footers.
#6d6d6d restores the 4.78:1 the site had. The two are indistinguishable
side by side (7/255 per channel, both neutral). Do not "correct" it back to
the deck value without re-running the contrast audit.
THE CYAN IS A FILL, NOT A TYPE COLOUR. #5CE0E6 is 1.58:1 on white, so any
text or standalone icon painted in it on a light surface is unreadable and
fails WCAG AA (4.5:1 for text, 3:1 for graphics). It is legible only on the
purple, where it reaches 5.95:1. The rule this file follows:
light surface -> --indigo for type and marks, --teal for fills,
borders, tints and rules
purple surface -> --teal for type and marks
Which is why .kicker and friends default to --indigo below and the handful
of blocks that sit on purple (.hero, .brochure-card, .cost-hero-kicker)
re-assert --teal explicitly. Adding a `color: var(--teal)` to something on
white re-opens the bug -- `node scripts/contrast-verify.mjs` is the check,
and it needs no deploy.
Two places a palette change hides. Brand colours also appear as raw rgb
triples inside rgba() for shadows and translucent borders (about forty of
them), and URL-ENCODED inside data-URI SVGs -- the select chevrons carry
%237D1376, which no search for #7D1376 will ever find. The contrast suite
cannot help with the second: an element with a background image is exactly
what it declines to measure.
The derived shades are not eyeballed: hovers and gradient partners keep the
HSL delta they had from the colour they replace, and the pale tints keep
their luminance rather than their mix fraction, so a tinted band holds the
same weight in the layout under a lighter cyan. */
:root {
--indigo: #7D1376;
--indigo-dark: #5d0a57;
--teal: #5CE0E6;
--teal-dark: #3edde5;
--teal-soft: #e5fafb;
--ink: #1a1a2e;
--paper: #f7f6f2;
--white: #ffffff;
--muted: #6d6d6d;
--line: #e6e4dc;
--soft: #f5edf5;
--amber: #f6c750;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: 'Inter', 'Inter Fallback', system-ui, -apple-system, Segoe UI, sans-serif;
color: var(--ink);
background: var(--paper);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--indigo); }
a:hover { color: var(--indigo-dark); }
/* Typography */
h1, h2, h3, h4 {
font-family: 'Anton', 'Anton Fallback', 'Inter', 'Inter Fallback', sans-serif;
font-weight: normal;
color: var(--indigo);
text-transform: uppercase;
letter-spacing: 0.02em;
line-height: 1.05;
margin: 0 0 16px;
}
h1 { font-size: clamp(34px, 6.5vw, 60px); }
h2 { font-size: clamp(26px, 4vw, 40px); }
h3 { font-size: clamp(20px, 2.5vw, 26px); }
h4 { font-size: 18px; letter-spacing: 0.04em; }
p { margin: 0 0 16px; }
/* Purple, not cyan: these land on white and paper far more often than on the
hero. The blocks that do sit on purple override back to --teal. */
.kicker {
font-family: 'Caveat', cursive;
color: var(--indigo);
font-size: 22px;
margin-bottom: 6px;
display: inline-block;
}
.script {
font-family: 'Caveat', cursive;
color: var(--indigo);
font-size: 22px;
}
/* Layout */
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 20px; }
section { padding: 56px 0; }
section.tight { padding: 32px 0; }
section.paper { background: var(--paper); }
section.white { background: var(--white); }
section.teal-soft { background: var(--teal-soft); }
section.indigo { background: var(--indigo); color: var(--white); }
section.indigo h1, section.indigo h2, section.indigo h3 { color: var(--white); }
section.indigo a { color: var(--teal); }
.text-center { text-align: center; }
.mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-24 { margin-bottom: 24px; }
/* Top mini bar */
.top-mini {
background: var(--indigo);
color: var(--white);
font-size: 12px;
padding: 6px 20px;
text-align: right;
letter-spacing: 0.03em;
}
.top-mini a {
color: var(--white);
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,0.4);
}
.top-mini a:hover { border-bottom-color: var(--teal); color: var(--teal); }
/* Header */
.site-header {
background: var(--white);
border-bottom: 1px solid var(--line);
padding: 2px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.site-header .logo { display: inline-flex; align-items: center; }
.site-header .logo img { height: 64px; width: auto; display: block; }
/* Brand strapline, on the logo line. Lee's issue #36: this was the hero kicker
on the homepage and he asked for it "in the top bar along the top of the page
as big as possible on the line with the logo". It is on every page rather
than the homepage alone because the header is one component — a strapline
that appears on one page only reads as a rendering fault. */
.site-strapline {
font-family: 'Caveat', cursive;
color: var(--indigo);
font-size: clamp(20px, 2.4vw, 32px);
line-height: 1.15;
flex: 1 1 auto;
min-width: 0;
text-align: center;
}
/* Below 820px it gets its own line. The cut-off is measured, not guessed: the
header is a wrapping flexbox, and between 721px and ~819px the strapline's
min-content width leaves the nav too little room, so the NAV wraps to a
second row and the header jumps from 69px to 129px. Dropping the strapline
deliberately is the same two rows, the right way round. */
@media (max-width: 819px) {
.site-strapline {
order: 3;
flex-basis: 100%;
text-align: left;
font-size: 20px;
padding-bottom: 4px;
}
}
@media (max-width: 720px) {
/* Once the nav collapses to the Menu drawer, `order` keeps the strapline
above the drawer rather than inside it. */
.site-nav { order: 4; }
}
.site-nav {
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 4px 24px;
}
.site-nav a {
color: var(--ink);
text-decoration: none;
font-weight: 500;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 8px 0;
min-height: 44px;
display: inline-flex;
align-items: center;
}
.site-nav a:hover { color: var(--indigo); }
.site-nav a.active:not(.nav-cta) { color: var(--indigo); border-bottom: 2px solid var(--teal); }
/* Subscribe CTA button in the nav */
.site-nav a.nav-cta {
background: var(--indigo);
color: var(--white);
padding: 8px 16px;
border-radius: 999px;
text-transform: none;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.02em;
transition: background 0.15s ease, transform 0.15s ease;
}
.site-nav a.nav-cta:hover { background: var(--indigo-dark); color: var(--white); transform: translateY(-1px); }
/* Utility link — subtly de-emphasised secondary CTA in the primary nav */
.site-nav a.nav-utility {
margin-left: 12px;
padding-left: 14px;
border-left: 1px solid var(--line);
color: var(--muted);
font-size: 12px;
text-transform: none;
letter-spacing: 0;
font-weight: 500;
}
.site-nav a.nav-utility:hover { color: var(--indigo-dark); } /* nav sits on white */
@media (max-width: 720px) {
.site-nav a.nav-utility { margin-left: 0; padding-left: 0; border-left: none; border-top: 1px solid var(--line); padding-top: 12px; }
}
.nav-toggle {
display: none;
background: none;
border: 1px solid var(--line);
border-radius: 6px;
padding: 8px 14px;
font: inherit;
font-size: 14px;
min-height: 44px;
cursor: pointer;
}
@media (max-width: 720px) {
.site-header { padding: 8px 16px; }
.site-header .logo img { height: 44px; }
.nav-toggle { display: inline-block; }
.site-nav {
display: none;
flex-direction: column;
align-items: stretch;
gap: 0;
flex-basis: 100%;
margin-top: 8px;
}
.site-nav.open { display: flex; }
.site-nav a { padding: 12px 0; }
}
/* Buttons */
.cta-with-arrows {
display: inline-flex;
align-items: center;
gap: 14px;
}
/* Renders on both surfaces, so it defaults to purple and opts back into cyan
inside a purple section. */
.cta-arrow {
color: var(--indigo);
flex-shrink: 0;
}
section.indigo .cta-arrow { color: var(--teal); }
.cta-arrow-left { transform: translateY(14px); }
.cta-arrow-right { transform: scaleX(-1) translateY(-8px); }
@media (max-width: 640px) {
.cta-arrow { width: 44px; height: 32px; }
.cta-with-arrows { gap: 8px; }
}
@keyframes btn-pulse {
0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(125, 19, 118, 0.22); }
50% { transform: scale(1.03); box-shadow: 0 10px 22px rgba(125, 19, 118, 0.32); }
}
@media (prefers-reduced-motion: reduce) {
.btn { animation: none !important; }
}
.btn {
display: inline-block;
background: var(--indigo);
color: var(--white);
text-decoration: none;
padding: 14px 26px;
border-radius: 999px;
font-weight: 600;
font-size: 15px;
min-height: 44px;
transition: background 0.15s ease;
border: none;
cursor: pointer;
animation: btn-pulse 2.4s ease-in-out infinite;
}
.btn:hover { animation-play-state: paused; }
.btn:hover { background: var(--indigo-dark); color: var(--white); }
.btn.teal { background: var(--teal); color: var(--indigo); }
.btn.teal:hover { background: var(--teal-dark); color: var(--indigo); }
.btn.ghost {
background: transparent;
color: var(--indigo);
border: 2px solid var(--indigo);
padding: 12px 24px;
}
.btn.ghost:hover { background: var(--indigo); color: var(--white); }
/* Hero */
.hero {
background:
linear-gradient(180deg, rgba(125,19,118,0.72), rgba(125,19,118,0.55)),
url('images/siblings.jpg') center/cover no-repeat;
color: var(--white);
padding: 96px 0 88px;
text-align: center;
}
.hero .kicker { color: var(--teal); }
.hero h1 { color: var(--white); max-width: 780px; margin: 0 auto 16px; }
.hero .lede {
max-width: 620px;
margin: 0 auto 28px;
color: rgba(255,255,255,0.9);
font-size: 18px;
}
.hero .price-badge {
display: inline-block;
background: var(--teal);
color: var(--indigo);
padding: 8px 18px;
border-radius: 999px;
font-weight: 700;
font-size: 15px;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 20px;
}
.hero-cta {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-top: 8px;
}
/* Value block */
.value-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-top: 24px;
}
@media (min-width: 720px) {
.value-grid { grid-template-columns: repeat(3, 1fr); }
}
.value {
background: var(--white);
border: 1px solid var(--line);
border-radius: 12px;
padding: 24px;
text-align: center;
}
.value .num {
font-family: 'Anton', sans-serif;
color: var(--teal);
font-size: 40px;
line-height: 1;
margin-bottom: 8px;
display: block;
}
.value h3 { font-size: 20px; margin-bottom: 8px; }
.value p { color: var(--muted); font-size: 15px; margin: 0; }
/* Included / not included list */
.included {
background: var(--white);
border: 1px solid var(--line);
border-radius: 12px;
padding: 28px;
margin-top: 24px;
}
.included h3 { margin-top: 0; }
.included ul { list-style: none; padding: 0; margin: 12px 0 0; }
.included li {
padding: 8px 0 8px 32px;
position: relative;
color: var(--ink);
}
.included li.yes::before {
content: "✓";
position: absolute;
left: 0;
top: 8px;
color: var(--teal);
font-weight: 700;
font-size: 18px;
}
.included li.no::before {
content: "✗";
position: absolute;
left: 0;
top: 8px;
color: var(--muted);
font-weight: 700;
font-size: 18px;
}
.included .split-cols {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 720px) {
.included .split-cols { grid-template-columns: 1fr 1fr; }
}
/* How it works steps */
.steps {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
margin-top: 24px;
}
@media (min-width: 720px) {
.steps { grid-template-columns: repeat(3, 1fr); }
}
.step {
text-align: center;
padding: 24px;
}
.step .step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--teal);
color: var(--indigo);
font-family: 'Anton', sans-serif;
font-size: 24px;
margin-bottom: 16px;
}
.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 15px; margin: 0; }
/* Testimonials */
.testimonials {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-top: 24px;
}
@media (min-width: 720px) {
.testimonials { grid-template-columns: repeat(3, 1fr); }
}
.testimonial {
background: var(--white);
border: 1px solid var(--line);
border-radius: 12px;
padding: 22px;
}
.testimonial p {
font-style: italic;
color: var(--ink);
margin: 0 0 12px;
}
.testimonial cite {
color: var(--muted);
font-size: 14px;
font-style: normal;
font-weight: 600;
}
/* Hero */
.hero-section { padding-top: 16px; padding-bottom: 20px; }
.hero-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 28px;
align-items: start;
}
.hero-copy { align-self: start; }
.hero-copy .welcome { margin-bottom: 8px; font-size: clamp(26px, 3.6vw, 36px); }
.hero-media { align-self: start; }
.hero-text h1 {
font-size: clamp(26px, 3.4vw, 40px);
margin: 8px 0 12px;
text-transform: none;
letter-spacing: -0.01em;
line-height: 1.1;
}
.hero-lede {
font-size: 17px;
color: var(--ink);
margin-bottom: 16px;
line-height: 1.5;
}
.hero-lede strong { color: var(--indigo); }
.hero-cta {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-top: 4px;
}
.hero-cta .script-aside { margin: 0; font-size: 18px; }
.hero-media { display: flex; align-items: flex-start; }
.hero-media .hero-photo {
margin: 0;
width: 100%;
max-height: 420px;
overflow: hidden;
border-radius: 12px;
}
.hero-media .hero-photo img {
width: 100%;
height: 100%;
max-height: 420px;
object-fit: cover;
object-position: center 30%;
aspect-ratio: auto;
}
@media (max-width: 780px) {
.hero-section { padding-top: 16px; padding-bottom: 16px; }
.hero-grid { grid-template-columns: 1fr; gap: 20px; }
/* Hide the hero photo on mobile — the portrait carousel just below acts as the visual anchor */
.hero-media { display: none; }
}
/* Homepage-specific elements */
.hero-photo {
margin: 0 0 32px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 12px 32px rgba(125, 19, 118, 0.14);
}
.hero-photo img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.pitch-card {
margin: 24px auto 0;
max-width: 480px;
background: var(--white);
border-radius: 12px;
padding: 16px;
}
.pitch-card img { width: 100%; height: auto; }
/* Subscription pricing: hero + family comparator cards + term breakdown */
.cost-hero {
text-align: center;
color: var(--white);
margin: 16px auto 20px;
max-width: 920px;
}
.cost-hero-kicker {
font-family: 'Caveat', cursive;
color: var(--teal);
font-size: 20px;
display: block;
margin-bottom: 2px;
}
.cost-hero-headline {
font-family: 'Anton', sans-serif;
color: var(--white);
font-size: clamp(20px, 2.4vw, 26px);
line-height: 1.15;
margin: 0 0 8px;
text-transform: uppercase;
letter-spacing: 0.02em;
white-space: nowrap;
}
@media (max-width: 900px) {
.cost-hero-headline { white-space: normal; }
}
.cost-hero-sub {
color: rgba(255,255,255,0.85);
font-size: 14px;
margin: 0;
}
.family-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 940px;
margin: 0 auto;
}
@media (max-width: 780px) {
.family-cards { grid-template-columns: 1fr; gap: 16px; }
}
.family-card {
position: relative;
background: var(--white);
color: var(--ink);
border-radius: 12px;
padding: 16px 16px 14px;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
text-align: center;
}
.family-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--teal);
color: var(--indigo);
font-family: 'Anton', sans-serif;
font-size: 12px;
letter-spacing: 0.12em;
padding: 4px 14px;
border-radius: 999px;
text-transform: uppercase;
}
.family-label {
font-family: 'Anton', sans-serif;
color: var(--indigo);
font-size: 18px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.family-nums {
display: flex;
flex-direction: column;
gap: 8px;
}
.family-num {
display: flex;
flex-direction: column;
gap: 2px;
}
.num-label {
font-size: 12px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.num-strike {
font-family: 'Anton', sans-serif;
color: var(--muted);
font-size: 22px;
text-decoration: line-through;
text-decoration-color: #b3261e;
text-decoration-thickness: 2px;
}
.family-num.highlight .num-price {
font-family: 'Anton', sans-serif;
color: var(--indigo);
font-size: 34px;
line-height: 1;
display: inline-flex;
align-items: baseline;
gap: 4px;
justify-content: center;
}
.family-num.highlight .num-per {
font-size: 13px;
color: var(--muted);
font-family: 'Inter', sans-serif;
font-weight: 500;
}
.family-save {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding-top: 10px;
border-top: 1px dashed var(--line);
}
.save-pill {
background: var(--indigo);
color: var(--white);
padding: 6px 14px;
border-radius: 999px;
font-family: 'Anton', sans-serif;
font-size: 15px;
letter-spacing: 0.04em;
}
.save-pct-inline {
color: #b3261e;
font-family: 'Anton', sans-serif;
font-size: 14px;
letter-spacing: 0.06em;
}
/* Term cards */
.term-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
max-width: 960px;
margin: 24px auto 0;
}
@media (max-width: 780px) {
.term-cards { grid-template-columns: 1fr; }
}
.term-card {
background: var(--white);
border: 1px solid var(--line);
border-radius: 12px;
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: 0 4px 12px rgba(125,19,118,0.05);
}
.term-card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
}
.term-card-tag {
background: var(--indigo);
color: var(--white);
font-family: 'Anton', sans-serif;
padding: 6px 16px;
border-radius: 999px;
font-size: 15px;
letter-spacing: 0.04em;
}
.term-card-sub {
font-family: 'Caveat', cursive;
color: var(--muted);
font-size: 18px;
}
.term-card-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.term-card-list li {
display: grid;
grid-template-columns: 22px 1fr auto;
gap: 10px;
align-items: start;
font-size: 14px;
line-height: 1.4;
color: var(--ink);
}
.term-card-list .icon,
.term-card-list .worth { padding-top: 2px; }
.term-card-list .icon {
color: var(--teal);
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
.term-card-list .icon svg { display: block; }
.term-card-list li.bonus .icon { color: var(--indigo); }
.term-card-list .what { color: var(--ink); }
.term-card-list .worth {
color: var(--muted);
font-size: 12px;
font-family: 'Anton', sans-serif;
letter-spacing: 0.02em;
white-space: nowrap;
}
.term-card-list li.bonus .what { color: var(--indigo); font-weight: 600; }
.term-card-total {
display: flex;
align-items: baseline;
justify-content: space-between;
padding-top: 12px;
border-top: 1px dashed var(--line);
font-size: 13px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.term-card-total strong {
font-family: 'Anton', sans-serif;
color: var(--indigo);
font-size: 26px;
letter-spacing: 0;
}
.term-note-bar {
max-width: 780px;
margin: 20px auto 0;
background: var(--teal-soft);
border: 1px solid #a6eef1;
border-radius: 999px;
padding: 12px 20px;
text-align: center;
font-size: 14px;
color: var(--ink);
}
.term-note-bar span {
color: var(--teal);
font-weight: 700;
margin-right: 4px;
}
@media (max-width: 780px) {
.term-note-bar { border-radius: 12px; text-align: left; }
}
.term-list { padding: 16px 0 4px; display: flex; flex-direction: column; gap: 14px; }
.term-item { display: grid; grid-template-columns: 90px 1fr; gap: 16px; align-items: start; }
.term-tag {
background: rgba(255,255,255,0.12);
color: var(--white);
font-family: 'Anton', sans-serif;
padding: 4px 12px;
border-radius: 999px;
text-align: center;
font-size: 14px;
letter-spacing: 0.04em;
}
.term-item p { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.9); }
.term-note {
margin: 8px 0 0;
font-size: 13px;
color: rgba(255,255,255,0.7);
font-style: italic;
}
/* Subscription cost card (rebuilt from the JPG graphic) */
.cost-card {
position: relative;
background: var(--white);
color: var(--ink);
border-radius: 12px;
padding: 24px 20px;
margin: 32px auto 0;
max-width: 940px;
text-align: left;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}
.cost-card-ribbon {
position: absolute;
top: 22px;
right: -46px;
transform: rotate(45deg);
background: linear-gradient(180deg, #d4a94a 0%, #b78827 100%);
color: var(--white);
font-family: 'Anton', sans-serif;
font-size: 12px;
letter-spacing: 0.14em;
padding: 6px 60px;
text-transform: uppercase;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.cost-card-head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: end;
padding: 4px 8px 20px;
border-bottom: 3px solid var(--indigo);
margin-bottom: 16px;
}
.cost-title {
font-family: 'Anton', 'Inter', sans-serif;
color: var(--indigo);
font-size: clamp(24px, 4vw, 34px);
margin: 0;
text-transform: none;
letter-spacing: 0;
}
.cost-headline {
font-family: 'Anton', sans-serif;
color: #b3261e;
font-size: clamp(20px, 3vw, 28px);
text-align: right;
text-decoration: underline;
text-decoration-thickness: 3px;
text-underline-offset: 4px;
line-height: 1.05;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.cost-grid {
display: grid;
grid-template-columns: 110px 1fr 140px 140px;
gap: 0 16px;
align-items: stretch;
}
.cost-row {
display: contents;
}
.cost-row > * {
padding: 16px 12px;
border-bottom: 1px solid var(--line);
}
.cost-row:last-child > * { border-bottom: none; }
.cost-tag {
align-self: start;
background: var(--indigo);
color: var(--white);
font-family: 'Anton', sans-serif;
border-radius: 999px;
padding: 6px 18px !important;
text-align: center;
font-size: 16px;
letter-spacing: 0.04em;
justify-self: start;
border: none;
min-width: 96px;
}
.cost-tag-teal { background: var(--teal); color: var(--indigo); }
.cost-desc { color: var(--ink); font-size: 14px; line-height: 1.5; }
.cost-sub { color: var(--muted); font-size: 12px; }
.cost-perfamily,
.cost-total {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
}
.cost-col-label {
background: var(--teal);
color: var(--indigo);
font-family: 'Anton', sans-serif;
padding: 4px 14px;
border-radius: 999px;
font-size: 13px;
letter-spacing: 0.04em;
}
.cost-price {
font-family: 'Anton', sans-serif;
color: var(--indigo);
font-size: 42px;
line-height: 1;
display: flex;
align-items: baseline;
gap: 4px;
}
.cost-price .cost-per { font-size: 14px; color: var(--muted); }
.cost-total-price {
font-family: 'Anton', sans-serif;
color: var(--indigo);
font-size: 42px;
line-height: 1;
}
/* Span the per-family and total-cost cells across the first 3 term rows */
.cost-row:nth-child(1) .cost-perfamily { grid-row: 1 / span 3; }
.cost-row:nth-child(1) .cost-total { grid-row: 1 / span 3; }
.cost-savings {
grid-column: 3 / span 2;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
align-items: stretch;
}
.save-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px !important;
border: none;
}
.save-label {
background: var(--teal);
color: var(--indigo);
padding: 3px 10px;
border-radius: 999px;
font-family: 'Anton', sans-serif;
font-size: 12px;
}
.save-pct { color: #b3261e; font-family: 'Anton', sans-serif; font-size: 22px; }
.save-amt { color: var(--muted); font-family: 'Anton', sans-serif; font-size: 16px; }
@media (max-width: 780px) {
.cost-grid { grid-template-columns: 90px 1fr; }
.cost-row:nth-child(1) .cost-perfamily,
.cost-row:nth-child(1) .cost-total { grid-row: auto; grid-column: 1 / -1; }
.cost-savings { grid-column: 1 / -1; }
.cost-card-head { grid-template-columns: 1fr; }
.cost-headline { text-align: left; align-items: flex-start; }
}
.script-aside {
font-family: 'Caveat', cursive;
color: var(--teal);
font-size: 22px;
margin: 16px 0 0;
}
/* Portrait carousel placeholder */
.carousel-placeholder {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 4px;
}
.carousel-tile {
aspect-ratio: 3 / 4;
border-radius: 8px;
overflow: hidden;
background: linear-gradient(135deg, #eae7dd 0%, #d9d5c9 100%);
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
box-shadow: 0 4px 14px rgba(125, 19, 118, 0.08);
}
.carousel-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel-tile.placeholder span {
font-family: 'Caveat', cursive;
color: var(--muted);
font-size: 18px;
}
/* Video facade — thumbnail with play button, iframe loads on click only */
.video-facade {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 12px;
overflow: hidden;
border: 0;
padding: 0;
cursor: pointer;
background: var(--ink);
box-shadow: 0 12px 32px rgba(125, 19, 118, 0.14);
}
.video-facade-thumb {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.85);
transition: filter 0.2s ease, transform 0.4s ease;
}
.video-facade:hover .video-facade-thumb { filter: brightness(1); transform: scale(1.02); }
.video-facade-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.15s ease;
pointer-events: none;
}
.video-facade:hover .video-facade-play { transform: translate(-50%, -50%) scale(1.08); }
.video-facade-label {
position: absolute;
bottom: 16px;
left: 20px;
color: var(--white);
font-family: 'Anton', sans-serif;
letter-spacing: 0.04em;
font-size: 14px;
background: rgba(0,0,0,0.5);
padding: 6px 12px;
border-radius: 6px;
}
.video-embed {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 12px 32px rgba(125, 19, 118, 0.14);
background: var(--ink);
}
.video-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.video-placeholder {
margin: 0;
background: linear-gradient(135deg, var(--indigo) 0%, #b321a6 100%);
border-radius: 12px;
aspect-ratio: 16 / 9;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.video-inner {
text-align: center;
color: var(--white);
padding: 24px;
}
.video-icon {
display: block;
font-size: 56px;
line-height: 1;
margin-bottom: 12px;
color: var(--teal);
}
.video-caption {
display: block;
font-family: 'Anton', sans-serif;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 18px;
margin-bottom: 6px;
}
.video-note {
display: block;
font-size: 13px;
color: rgba(255,255,255,0.75);
max-width: 360px;
margin: 0 auto;
}
.welcome {
font-size: clamp(28px, 4.5vw, 44px);
margin-bottom: 20px;
}
.hero-lede {
font-family: 'Anton', sans-serif;
color: var(--indigo);
font-size: clamp(22px, 3.2vw, 32px);
line-height: 1.1;
text-transform: uppercase;
letter-spacing: 0.02em;
margin: 0 0 20px;
}
.sub-headline {
font-family: 'Anton', sans-serif;
color: var(--indigo);
font-size: clamp(22px, 3vw, 28px);
margin-top: 12px;
letter-spacing: 0.02em;
}
.asterisk {
color: var(--muted);
font-size: 13px;
margin-top: 4px;
}
.contact-block {
font-style: normal;
background: var(--white);
padding: 16px 20px;
border-radius: 8px;
border: 1px solid var(--line);
margin: 16px 0 24px;
font-size: 15px;
}
.contact-form {
display: grid;
gap: 12px;
max-width: 520px;
margin: 24px auto 0;
}
.contact-form label {
display: flex;
flex-direction: column;
font-size: 13px;
color: var(--muted);
gap: 4px;
}
.contact-form input,
.contact-form textarea {
font-family: inherit;
font-size: 15px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--white);
color: var(--ink);
}
.contact-form button { justify-self: start; }
/* Terms page warning callout */
.terms-warning {
background: #fff7d6;
border-left: 4px solid #e6cf6b;
padding: 16px 20px;
border-radius: 6px;
margin: 24px 0;
font-size: 15px;
}
/* Register interest form (subscribe page).
Grid rows keep the form-state row auto-sized to the tallest state (fields or thanks),
and the message slot below at a fixed height — so card height stays constant across states. */
.interest-form {
max-width: 480px;
margin: 12px auto 0;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: minmax(44px, auto) 26px;
row-gap: 6px;
}
.interest-form .form-fields,
.interest-form .form-thanks {
grid-row: 1;
grid-column: 1;
align-self: start;
}
.interest-form .post-form-slot {
grid-row: 2;
grid-column: 1;
position: relative;
}
.post-form-slot > * {
position: absolute;
inset: 0;
margin: 0;
}
.delivery-hint {
font-size: 11px;
line-height: 26px;
color: var(--muted);
}
.delivery-hint a { color: var(--indigo); }
.interest-form .form-fields {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.interest-form input[type="email"] {
flex: 1 1 220px;
font-family: inherit;
font-size: 15px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--white);
color: var(--ink);
min-width: 0;
}
.interest-form button {
flex: 0 0 auto;
min-height: 44px;
}
/* Stacked children (fields/thanks in row 1, hint/error in the post-form-slot)
fade in place instead of hard-swapping so the state change reads as one motion. */
.interest-form .form-fields,
.interest-form .form-thanks,
.post-form-slot > * {
transition: opacity 180ms ease;
}
.interest-form .form-fields[hidden],
.interest-form .form-thanks[hidden],
.post-form-slot > [hidden] {
display: block !important;
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.interest-form .form-fields[hidden],
.interest-form .form-thanks[hidden] { display: flex !important; }
.form-thanks {
display: flex;
align-items: center;
gap: 10px;
background: var(--teal-soft);
border: 1px solid rgba(92, 224, 230, 0.35);
color: var(--ink);
padding: 6px 14px;
border-radius: 999px;
min-height: 44px;
box-sizing: border-box;
margin: 0;
text-align: left;
}
.form-thanks-icon {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--teal); /* cyan chip, purple glyph -- white on the cyan is 1.58:1 */
color: var(--indigo);
display: inline-flex;
align-items: center;
justify-content: center;
}
.form-thanks-icon svg { width: 14px; height: 14px; }
.form-thanks-body {
display: flex;
flex-direction: row;
align-items: baseline;
gap: 6px;
line-height: 1.4;
min-width: 0;
flex: 1 1 auto;
}
.form-thanks-title {
color: var(--indigo);
font-size: 13px;
font-weight: 700;
flex: 0 0 auto;
}
.form-thanks-sub {
color: var(--muted);
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
flex: 1 1 auto;
}
.form-thanks-sub a { color: var(--indigo); }
.form-error {
padding: 3px 10px;
border-radius: 6px;
background: #fdecec;
color: #8a1f1f;
border: 1px solid #f4c4c4;
font-size: 11px;
line-height: 18px;
}
.fine-print {
color: var(--muted);
font-size: 12px;
margin-top: 16px;
}
.visually-hidden {
position: absolute;
clip: rect(0 0 0 0);
width: 1px; height: 1px;
overflow: hidden;
white-space: nowrap;
}
/* Homepage window notice + prototype note */
.window-notice {
display: inline-block;
background: var(--indigo);
color: var(--white);
padding: 14px 22px;
border-radius: 8px;
margin-top: 16px;
max-width: 620px;
font-size: 15px;
line-height: 1.5;
}
.prototype-note {
background: #fff7d6;
border: 1px solid #e6cf6b;
border-radius: 8px;
padding: 14px 18px;
color: var(--ink);
font-size: 14px;
margin: 0 0 24px;
}
/* Window state (subscribe page) */
.window-state {
padding: 22px 26px;
border-radius: 12px;
margin-bottom: 24px;
border: 1px solid var(--line);
}
.window-state.open {
background: var(--teal-soft);
border-color: var(--teal);
}
.window-state.closed {
background: #fdf3f3;
border-color: #e0a1a1;
}
.window-state .state-label {
font-family: 'Caveat', cursive;
color: var(--muted);
font-size: 18px;
display: block;
margin-bottom: 6px;
}
.window-state h3 { margin: 0 0 8px; font-size: 22px; }
.window-state p { margin: 0; color: var(--ink); }
/* Jotform placeholder */
.form-placeholder {
border: 2px dashed var(--indigo);
border-radius: 12px;
padding: 48px 24px;
text-align: center;
background: var(--paper);
color: var(--muted);
}
.form-placeholder strong { display: block; color: var(--indigo); margin-bottom: 8px; font-size: 18px; }
.form-placeholder code {
display: inline-block;
background: var(--white);
border: 1px solid var(--line);
padding: 4px 10px;
border-radius: 4px;
font-size: 13px;
margin-top: 8px;
}
/* FAQ */
.faq-item {
border-bottom: 1px solid var(--line);
padding: 18px 0;
}
.faq-item:last-child { border-bottom: none; }
.faq-item h3 {
font-family: 'Inter', sans-serif;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
color: var(--indigo);
font-size: 18px;
margin-bottom: 8px;
}
.faq-item p { color: var(--ink); margin: 0; }
.faq-item .todo {
display: inline-block;
background: var(--amber);
color: var(--ink);
font-size: 11px;
font-weight: 700;
padding: 2px 8px;
border-radius: 3px;
margin-left: 6px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Terms */
.terms h2 {
font-family: 'Inter', sans-serif;
text-transform: none;
letter-spacing: 0;
font-weight: 700;
color: var(--indigo);
font-size: 22px;
margin: 32px 0 12px;
}
.terms ol { padding-left: 22px; }
.terms li { margin-bottom: 12px; }
.terms p { color: var(--ink); }
/* Footer */
.site-footer {
background: var(--indigo);
color: rgba(255,255,255,0.9);
padding: 48px 20px 24px;
}
.footer-grid {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
@media (min-width: 720px) {
.footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}
.site-footer h4 {
color: var(--white);
font-family: 'Anton', sans-serif;
font-size: 16px;
letter-spacing: 0.06em;
margin: 0 0 12px;
}
.site-footer a {
color: rgba(255,255,255,0.85);
text-decoration: none;
display: block;
padding: 4px 0;
font-size: 14px;
}
.site-footer a:hover { color: var(--teal); }
.contact-line { margin: 4px 0; font-size: 14px; }
.socials { margin-top: 16px; display: flex; gap: 12px; flex-wrap: wrap; }
.socials a {
border: 1px solid rgba(255,255,255,0.3);
padding: 6px 12px;
border-radius: 4px;
font-size: 13px;
display: inline-block;
}
.footer-legal {
max-width: 1100px;
margin: 32px auto 0;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,0.15);
font-size: 12px;
color: rgba(255,255,255,0.7); /* matches .site-footer .footer-legal */
text-align: center;
}
.footer-legal a { display: inline; color: var(--teal); border: none; padding: 0; }
/* Cookie chip */
.cookie-chip {
position: fixed;
bottom: 16px;
left: 16px;
right: 16px;
max-width: 520px;
background: var(--ink);
color: var(--white);
padding: 12px 16px;
border-radius: 8px;
font-size: 13px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.cookie-chip button {
background: var(--teal);
color: var(--indigo);
border: none;
padding: 6px 14px;
border-radius: 4px;
font-weight: 700;
cursor: pointer;
min-height: 32px;
}
/* --- Additions 2026-07-30: prototype notes, contact input visibility, split-cta, card animations --- */
.prototype-note {
font-family: 'Caveat', cursive;
color: #ffe27a; /* soft amber — legible against the indigo footer, still visually distinct from the legal line */
font-size: 15px;
}
.prototype-inline-note {
color: var(--muted);
font-style: italic;
font-size: 13px;
margin-top: 12px;
}
/* Contact form: previously white-on-white — give inputs a visible outline */
.contact-form input,
.contact-form textarea {
border: 1px solid #cfcdc4;
background: #fbfaf6;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
outline: none;
border-color: var(--teal);
background: var(--white);
box-shadow: 0 0 0 3px rgba(92, 224, 230, 0.25);
}
/* Schools CTA — unified header + two-column body */
.schools-cta .schools-cta-head {
max-width: 720px;
margin: 0 auto 40px;
}
.schools-cta .schools-cta-head .lede {
color: var(--muted);
font-size: 16px;
margin-top: 8px;
}
.split-cta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
max-width: 1080px;
margin: 0 auto;
align-items: start;
}
.split-cta .contact-form {
max-width: none;
margin: 16px 0 0;
}
@media (max-width: 820px) {
.split-cta {
grid-template-columns: 1fr;
gap: 32px;
}
}
/* Left column — brochure card + address */
.schools-cta-left {
display: flex;
flex-direction: column;
gap: 20px;
}
.brochure-card {
display: block;
background: var(--indigo);
color: var(--white);
text-decoration: none;
border-radius: 14px;
padding: 24px 24px 20px;
box-shadow: 0 12px 32px rgba(125, 19, 118, 0.22);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.brochure-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 44px rgba(125, 19, 118, 0.32);
}
.brochure-card .kicker {
color: var(--teal);
display: block;
margin-bottom: 8px;
}
.brochure-card h3 {
color: var(--white);
margin: 0 0 8px;
font-family: 'Anton', sans-serif;
font-size: 24px;
letter-spacing: 0.02em;
}
.brochure-card p {
color: rgba(255, 255, 255, 0.85);
margin: 0 0 16px;
font-size: 15px;
}
.brochure-card-cta {
display: inline-block;
font-weight: 600;
color: var(--teal);
font-size: 15px;
}
.schools-cta-left .contact-block {
margin: 0;
background: transparent;
border: 1px dashed rgba(125, 19, 118, 0.25);
color: var(--ink);
}
/* Right column — contact form card */
.contact-card {
background: var(--white);
border-radius: 14px;
padding: 28px;
box-shadow: 0 12px 32px rgba(125, 19, 118, 0.10);
}
.contact-card h3 {
margin: 0 0 8px;
font-family: 'Anton', sans-serif;
font-size: 22px;
letter-spacing: 0.02em;
}
@media (max-width: 820px) {
.contact-card { padding: 22px; }
}
/* Family pricing cards: gentle entrance + lift on hover */
.family-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.family-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22);
}
@keyframes fam-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.family-cards .family-card {
animation: fam-in 0.6s ease both;
}
.family-cards .family-card:nth-child(1) { animation-delay: 0.05s; }
.family-cards .family-card:nth-child(2) { animation-delay: 0.18s; }
.family-cards .family-card:nth-child(3) { animation-delay: 0.31s; }
/* Term cards: entrance animation + subtle lift on hover */
.term-card {
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.term-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(125, 19, 118, 0.14);
}
@keyframes term-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.term-cards .term-card {
animation: term-in 0.6s ease both;
}
.term-cards .term-card:nth-child(1) { animation-delay: 0.05s; }
.term-cards .term-card:nth-child(2) { animation-delay: 0.18s; }
.term-cards .term-card:nth-child(3) { animation-delay: 0.31s; }
@media (prefers-reduced-motion: reduce) {
.family-cards .family-card,
.term-cards .term-card,
.family-card,
.term-card {
animation: none !important;
transition: none !important;
}
}
/* --- Additions 2026-07-30 (batch 2): hero bullets + subscribe page layout --- */
/* Home hero — £4/month price pill (replaces kicker + sub-headline in the hero) */
.hero-savings {
color: var(--ink);
font-size: 18px;
line-height: 1.4;
margin: 0 0 8px;
font-weight: 500;
}
.hero-savings strong { color: var(--indigo); font-weight: 800; }
.price-pill {
display: inline-block;
background: transparent;
color: var(--indigo);
border: 1.5px solid var(--teal);
padding: 4px 12px;
border-radius: 999px;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
margin: 4px 0 8px;
}
/* Home hero bullets — each with its own icon (camera / delivery van / star) */
.hero-bullets {
list-style: none;
padding: 0;
margin: 12px 0 0;
display: grid;
gap: 10px;
}
.hero-bullets li {
display: flex;
align-items: center;
gap: 12px;
font-size: 15px;
line-height: 1.5;
color: var(--ink);
}
.hero-bullets .hb-icon {
flex: 0 0 26px;
width: 26px;
height: 26px;
border-radius: 7px;
background: linear-gradient(135deg, var(--teal), #b5f1f3);
color: var(--indigo);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(92, 224, 230, 0.3);
}
.hero-bullets .hb-icon svg { display: block; width: 16px; height: 16px; }
/* --- Subscribe page: closed-state + register-interest two-column indigo section --- */
.closed-state-section {
padding-top: 48px;
padding-bottom: 48px;
}
.closed-split {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 56px;
max-width: 1080px;
margin: 0 auto;
align-items: stretch;
}
@media (max-width: 900px) {
.closed-split { grid-template-columns: 1fr; gap: 32px; }
}
/* Left column */
.closed-message {
color: var(--white);
display: flex;
flex-direction: column;
gap: 12px;
}
.closed-message .state-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
color: var(--teal);
margin-bottom: 4px;
}
.closed-message h2 { margin: 0 0 8px; }
.closed-bullets {
list-style: none;
padding: 0;
margin: 8px 0 0;
display: grid;
gap: 12px;
}
.closed-bullets li {
position: relative;
padding-left: 28px;
color: rgba(255, 255, 255, 0.92);
font-size: 16px;
line-height: 1.5;
}
.closed-bullets li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--teal);
}
/* Right column — register-interest card */
.register-card {
background: var(--white);
color: var(--ink);
border-radius: 14px;
padding: 28px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
display: flex;
flex-direction: column;
}
/* No colour override: the card is white, so the kicker takes the default
purple. It used to force --teal here, which is the unreadable case. */
.register-card h3 {
margin: 4px 0 6px;
font-family: 'Anton', sans-serif;
font-size: 24px;
letter-spacing: 0.02em;
color: var(--indigo);
}
.register-card .register-lede {
margin: 0 0 16px;
color: var(--muted);
font-size: 15px;
}
.register-card .interest-form {
margin: 0;
max-width: none;
}
.register-card .interest-form .form-fields {
display: flex;
gap: 8px;
}
.register-card .interest-form input[type="email"] {
flex: 1;
font-family: inherit;
font-size: 15px;
padding: 12px 14px;
border: 1px solid #cfcdc4;
border-radius: 8px;
background: #fbfaf6;
min-width: 0;
}
.register-card .interest-form input[type="email"]:focus {
outline: none;
border-color: var(--teal);
background: var(--white);
box-shadow: 0 0 0 3px rgba(92, 224, 230, 0.25);
}
.register-card .interest-form button { white-space: nowrap; }
.register-card .fine-print {
margin-top: 10px;
font-size: 11px;
color: var(--muted);
line-height: 1.4;
}
.register-card .fine-print a { color: var(--indigo); }
/* Below-both-columns footer strip inside indigo section */
.closed-footer {
max-width: 1080px;
margin: 32px auto 0;
text-align: center;
}
.btn.ghost-on-indigo {
background: transparent;
color: var(--teal);
border: 1px solid rgba(92, 224, 230, 0.6);
padding: 12px 20px;
border-radius: 8px;
text-decoration: none;
display: inline-block;
font-weight: 600;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn.ghost-on-indigo:hover {
background: var(--teal);
color: var(--indigo);
border-color: var(--teal);
}
.prototype-inline-note-onindigo {
margin-top: 16px;
color: rgba(255, 255, 255, 0.7);
font-style: italic;
font-size: 12px;
}
/* Subscribe FAQ — 2-col on desktop, stacks on mobile */
.faq-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin: 24px auto 0;
max-width: 1000px;
}
.faq-grid .faq-card:last-child { grid-column: 1 / -1; }
@media (max-width: 720px) {
.faq-grid { grid-template-columns: 1fr; max-width: 620px; }
.faq-grid .faq-card:last-child { grid-column: auto; }
}
.faq-card {
background: var(--white);
border: 1px solid var(--line);
border-radius: 12px;
padding: 20px 22px;
box-shadow: 0 4px 12px rgba(125, 19, 118, 0.06);
text-align: left;
}
.faq-card h3 {
margin: 0 0 6px;
font-family: 'Anton', sans-serif;
font-size: 18px;
letter-spacing: 0.02em;
color: var(--indigo);
}
.faq-card p {
margin: 0;
font-size: 15px;
color: var(--ink);
line-height: 1.55;
}
/* Subscribe hero (paper-tight) — narrower */
.subscribe-hero .lede {
color: var(--ink);
font-size: 17px;
margin-top: 8px;
max-width: 620px;
margin-left: auto;
margin-right: auto;
}
.subscribe-hero .lede strong { color: var(--indigo); }
.subscribe-hero .hero-jump {
margin-top: 16px;
font-size: 14px;
}
.subscribe-hero .hero-jump a {
color: var(--muted);
text-decoration: underline;
text-underline-offset: 4px;
}
.subscribe-hero .hero-jump a:hover { color: var(--indigo); }
html { scroll-behavior: smooth; }
.paper.tight { padding-top: 24px; padding-bottom: 28px; }
/* --- Portrait carousel (scroll-snap) --- */
.portrait-carousel {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 8px;
}
.pc-track {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 4px 4px 12px;
scrollbar-width: none;
}
.pc-track::-webkit-scrollbar { display: none; }
.pc-tile {
flex: 0 0 calc((100% - 48px) / 4);
scroll-snap-align: start;
aspect-ratio: 3 / 4;
background: var(--soft);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
font-size: 13px;
text-align: center;
padding: 8px;
}
.pc-tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pc-tile.pc-placeholder {
background: linear-gradient(160deg, var(--soft) 0%, #ebdcea 100%);
color: var(--indigo);
flex-direction: column;
gap: 10px;
padding: 20px 14px;
font-family: 'Caveat', cursive;
font-size: 17px;
line-height: 1.25;
border: 1px solid rgba(125, 19, 118, 0.12);
position: relative;
}
.pc-tile.pc-placeholder::after {
content: "coming soon";
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
font-family: 'Inter', system-ui, sans-serif;
font-size: 10px;
color: var(--muted);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.pc-tile.pc-placeholder svg {
color: var(--teal);
opacity: 0.9;
}
.pc-nav {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--white);
color: var(--indigo);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(125, 19, 118, 0.08);
transition: background 0.15s ease, color 0.15s ease;
}
.pc-nav:hover { background: var(--indigo); color: var(--white); }
.pc-nav:disabled { opacity: 0.4; cursor: default; }
.pc-nav:disabled:hover { background: var(--white); color: var(--indigo); }
@media (max-width: 900px) {
.pc-tile { flex-basis: calc((100% - 32px) / 3); }
}
@media (max-width: 640px) {
.portrait-carousel { grid-template-columns: 1fr; }
.pc-nav { display: none; }
.pc-track { padding: 4px 0 12px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.pc-tile { flex-basis: 72%; }
}
/* --- Subscribe page — refinements 2026-07-31 --- */
/* Prototype state chip strip above the closed-state section */
.state-chip-strip {
background: var(--paper);
text-align: center;
padding: 10px 16px;
border-bottom: 1px solid var(--line);
}
.state-chip {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--white);
border: 1px solid #e0a1a1;
color: var(--ink);
padding: 6px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.state-chip em { color: var(--muted); font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; }
.state-chip .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #d84a4a;
box-shadow: 0 0 0 3px rgba(216, 74, 74, 0.18);
}
/* Softer register-card heading (was Anton uppercase, now Inter semibold sentence-case) */
.register-card h3.soft-heading {
font-family: 'Inter', system-ui, sans-serif;
text-transform: none;
letter-spacing: 0;
font-size: 22px;
font-weight: 700;
color: var(--indigo);
margin: 4px 0 8px;
}
/* Closed-state left-column lede paragraphs (was bullets) */
.closed-lede {
color: rgba(255, 255, 255, 0.92);
font-size: 16px;
line-height: 1.55;
margin: 0 0 12px;
}
.closed-lede:last-child { margin-bottom: 0; }
/* Secondary-CTA line (access-code path) */
.secondary-cta-line {
color: var(--ink);
font-size: 15px;
line-height: 1.6;
margin: 0;
}
.secondary-cta-line .btn {
padding: 10px 20px;
min-height: 40px;
font-size: 14px;
}
@media (max-width: 640px) {
.secondary-cta-line .btn { margin-left: 0 !important; margin-top: 10px; display: inline-block; }
}
/* --- Subscribe page — stacked-sections layout 2026-07-31 --- */
.section-a { padding: 48px 0 44px; }
.section-a .state-icon.big {
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
color: var(--teal);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
}
.section-a-lede {
color: rgba(255, 255, 255, 0.9);
font-size: 17px;
line-height: 1.55;
max-width: 560px;
margin: 0 auto 14px;
}
.next-window-callout {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 4px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(92, 224, 230, 0.35);
border-radius: 14px;
padding: 16px 28px;
margin: 12px auto 0;
}
.next-window-callout .nw-label {
font-family: 'Caveat', cursive;
color: var(--teal);
font-size: 18px;
letter-spacing: 0.02em;
}
.next-window-callout .nw-value {
font-family: 'Anton', sans-serif;
color: var(--white);
font-size: clamp(20px, 2.5vw, 26px);
letter-spacing: 0.02em;
}
.section-b { padding: 48px 0 40px; }
.section-b-heading { margin-bottom: 6px; }
.section-b-lede {
color: var(--muted);
font-size: 16px;
margin: 0 auto 24px;
max-width: 520px;
}
/* Standalone register card (bigger, centred, section-b hero card) */
.register-card.standalone {
max-width: 520px;
margin: 0 auto;
padding: 16px 22px;
background: var(--white);
border-radius: 14px;
box-shadow: 0 12px 32px rgba(125, 19, 118, 0.10);
text-align: left;
}
.register-card.standalone .interest-form {
margin: 0;
max-width: none;
}
.register-card.standalone .interest-form .form-fields {
display: flex;
gap: 8px;
}
.register-card.standalone .interest-form input[type="email"] {
flex: 1;
font-family: inherit;
font-size: 15px;
padding: 12px 14px;
border: 1px solid #cfcdc4;
border-radius: 8px;
background: #fbfaf6;
min-width: 0;
}
.register-card.standalone .interest-form input[type="email"]:focus {
outline: none;
border-color: var(--teal);
background: var(--white);
box-shadow: 0 0 0 3px rgba(92, 224, 230, 0.25);
}
.register-card.standalone .interest-form button { white-space: nowrap; }
.register-card.standalone .fine-print {
margin-top: 14px;
font-size: 12px;
color: var(--muted);
line-height: 1.5;
}
.register-card.standalone .fine-print a { color: var(--indigo); }
/* Secondary CTA line beneath the primary form */
.section-b .secondary-cta-line {
margin-top: 24px;
color: var(--muted);
font-size: 14px;
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
.section-b .secondary-cta-line a {
color: var(--indigo);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Soft (Inter, sentence-case) heading override — reused across pages */
h2.soft-heading,
h3.soft-heading {
font-family: 'Inter', system-ui, sans-serif;
text-transform: none;
letter-spacing: 0;
font-weight: 700;
color: var(--indigo);
}
/* Merged subscribe opener — jump link on indigo bg */
.subscribe-opener .welcome { margin: 6px 0 10px; }
.subscribe-opener { padding: 20px 0 14px; }
.hero-jump-on-indigo {
margin-top: 20px;
font-size: 14px;
}
.hero-jump-on-indigo a {
color: rgba(255, 255, 255, 0.75);
text-decoration: underline;
text-underline-offset: 4px;
}
.hero-jump-on-indigo a:hover { color: var(--teal); }
/* --- Terms page — hero + warning callout --- */
.terms-hero { padding: 40px 0 20px; }
.terms-hero .hero-jump {
margin-top: 12px;
font-size: 14px;
color: var(--muted);
}
.terms-hero .hero-jump a {
color: var(--indigo);
text-decoration: underline;
text-underline-offset: 4px;
margin: 0 4px;
}
.warning-card {
display: flex;
gap: 16px;
background: var(--teal-soft);
border: 1px solid #a6eef1;
border-left: 4px solid var(--teal);
border-radius: 12px;
padding: 18px 20px;
align-items: flex-start;
}
.warning-icon {
flex: 0 0 40px;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(92, 224, 230, 0.22);
color: var(--indigo);
display: inline-flex;
align-items: center;
justify-content: center;
}
.warning-card .warning-title {
font-size: 20px;
margin: 0 0 4px;
color: var(--indigo);
}
.warning-card p {
margin: 0;
font-size: 15px;
color: var(--ink);
line-height: 1.55;
}
.terms-intro {
color: var(--muted);
font-style: italic;
margin-bottom: 20px;
}
/* --- Expanded footer --- */
.site-footer {
background: var(--indigo);
color: var(--white);
padding: 40px 0 20px;
}
.site-footer .footer-grid {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 32px;
}
.site-footer .footer-grid h4 {
color: var(--white);
font-family: 'Anton', sans-serif;
font-size: 16px;
letter-spacing: 0.06em;
margin: 0 0 12px;
}
.site-footer .footer-grid p,
.site-footer .footer-grid a {
color: rgba(255, 255, 255, 0.82);
font-size: 14px;
text-decoration: none;
line-height: 1.6;
margin: 0 0 4px;
display: block;
}
.site-footer .footer-grid a:hover { color: var(--teal); }
.site-footer .footer-legal {
max-width: 1100px;
margin: 24px auto 0;
padding: 16px 20px 0;
border-top: 1px solid rgba(255, 255, 255, 0.15);
/* 0.7, not the 0.6 this had: #7D1376 is a lighter ground than the indigo it
replaces, so the same dimmed white dropped to 4.24:1. */
color: rgba(255, 255, 255, 0.7);
font-size: 12px;
text-align: center;
}
.site-footer .footer-legal a {
color: rgba(255, 255, 255, 0.75);
text-decoration: underline;
text-underline-offset: 3px;
}
.site-footer .footer-legal a:hover { color: var(--teal); }
@media (max-width: 720px) {
.site-footer .footer-grid {
grid-template-columns: 1fr;
gap: 24px;
text-align: left;
}
}
/* --- FAQ cards — icon + body layout --- */
.faq-card {
display: flex;
align-items: flex-start;
gap: 16px;
}
.faq-icon {
flex: 0 0 44px;
width: 44px;
height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, var(--teal), #b5f1f3);
color: var(--indigo);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(92, 224, 230, 0.28);
}
.faq-body { flex: 1; }
.faq-body h3 { margin-bottom: 6px; }
.faq-body p { margin: 0; }
/* --- Family + term card refinements (2026-07-31 pass 2) --- */
/* "Best value" badge on the 3+ family card */
.family-card.is-best-value {
outline: 2px solid var(--teal);
outline-offset: 2px;
position: relative;
}
.family-badge {
position: absolute;
top: -12px;
right: 16px;
background: var(--teal);
color: var(--indigo);
padding: 4px 12px;
border-radius: 999px;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
box-shadow: 0 4px 12px rgba(92, 224, 230, 0.4);
z-index: 1;
}
/* Enlarge strike price so it competes with the subscribe price */
.family-card .num-strike {
font-size: 26px;
line-height: 1;
}
/* Footnote under family cards explaining how "normally pay" is calculated */
.family-cards-note {
color: rgba(255, 255, 255, 0.72);
font-size: 13px;
font-style: italic;
text-align: center;
max-width: 620px;
margin: 16px auto 0;
line-height: 1.55;
}
/* Term cards — set min-height so 3 cards align and Term 3 does not look stunted */
/* min-height removed — was forcing Term 3 to look empty. Cards now size to content. */
/* Small captioning under Term 3's bullet (must override the grid layout of .term-card-list li) */
.term-card-list li.term-card-caption {
display: block;
grid-template-columns: none;
color: var(--muted);
font-size: 13px;
font-style: italic;
padding: 0;
margin-top: 4px;
}
/* --- Subscribe 2-column opener --- */
.opener-split {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 56px;
max-width: 1080px;
margin: 0 auto;
align-items: stretch;
}
.opener-message {
color: var(--white);
text-align: left;
display: flex;
flex-direction: column;
justify-content: center;
}
.opener-message .kicker { text-align: left; }
.opener-message .state-line {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.opener-message .state-line .state-icon.big {
width: 44px;
height: 44px;
margin: 0;
flex-shrink: 0;
}
.opener-form { align-self: stretch; display: flex; flex-direction: column; }
.opener-form .register-card { flex: 1; }
@media (max-width: 900px) {
.opener-split { grid-template-columns: 1fr; gap: 32px; }
.opener-message { text-align: center; }
.opener-message .kicker { text-align: center; }
.opener-message .state-line { justify-content: center; }
.opener-message .next-window-callout { align-items: center !important; margin-left: auto !important; margin-right: auto; }
.opener-message .hero-jump-on-indigo { text-align: center !important; }
}
/* --- Access-code CTA card (upgraded from prose+link) --- */
.access-card {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas:
"kicker kicker kicker"
"icon body btn";
align-items: center;
column-gap: 20px;
row-gap: 6px;
background: var(--white);
border: 1px solid var(--line);
border-left: 4px solid var(--teal);
border-radius: 14px;
padding: 20px 24px;
box-shadow: 0 4px 12px rgba(125, 19, 118, 0.06);
}
.access-card .access-kicker { grid-area: kicker; margin: 0; display: block; }
.access-card .access-icon { grid-area: icon; }
.access-card .access-body { grid-area: body; }
.access-card > .btn { grid-area: btn; }
.access-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--teal-soft);
color: var(--indigo);
display: inline-flex;
align-items: center;
justify-content: center;
}
.access-body { min-width: 0; }
.access-card > .btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 640px) {
.access-card {
grid-template-columns: 1fr;
grid-template-areas:
"kicker"
"icon"
"body"
"btn";
text-align: center;
}
.access-icon { margin: 0 auto; }
.access-card > .btn { justify-self: center; }
}
/* Override indigo-section forced white heading colour inside the register-card (card has its own white bg) */
/* The register card is white but it sits inside a purple section, so the
section's own on-purple colours leak into it. `section.indigo a` is (0,1,2)
and beats `.delivery-hint a` at (0,1,1), which is how the support link ended
up cyan on white at 1.58:1 -- the headings had already been patched here for
the same reason. Anything else the section colours for the purple needs the
same treatment when it appears inside a nested light card. */
section.indigo .register-card h2,
section.indigo .register-card h3 { color: var(--indigo); }
section.indigo .register-card a { color: var(--indigo); }
/* "What happens next" mini-list inside the register card */
.what-next-list {
list-style: none;
padding: 0;
margin: 0 0 10px;
display: flex;
flex-direction: column;
gap: 4px;
}
.what-next-list li {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--ink);
line-height: 1.4;
}
.what-next-list .wn-tick {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--teal-soft); /* cyan chip, purple glyph */
color: var(--indigo);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* --- Family-card badge (number instead of icon — instantly scannable) --- */
.family-num-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--teal-soft);
color: var(--indigo);
margin: 0 auto 4px;
font-family: 'Anton', sans-serif;
font-size: 22px;
letter-spacing: 0.02em;
line-height: 1;
}
.family-card { align-items: stretch; text-align: center; }
/* --- Top prototype-preview strip (persistent, all pages) --- */
.preview-strip {
background: #fef3c7;
color: #713f12;
border-bottom: 1px solid #f0d47c;
font-size: 13px;
padding: 8px 16px;
text-align: center;
letter-spacing: 0.01em;
}
.preview-strip strong { color: #92400e; letter-spacing: 0.04em; text-transform: uppercase; font-size: 12px; }
@media (max-width: 640px) {
.preview-strip { font-size: 12px; padding: 6px 12px; line-height: 1.4; }
}
/* Merged pricing + terms section */
.value-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
max-width: 1040px;
margin: 24px auto 0;
align-items: stretch;
}
@media (max-width: 860px) {
.value-split { grid-template-columns: 1fr; gap: 18px; }
}
.value-panel {
background: var(--white);
color: var(--ink);
border-radius: 14px;
padding: 22px 22px 20px;
box-shadow: 0 10px 24px rgba(0,0,0,0.18);
display: flex;
flex-direction: column;
gap: 14px;
}
.value-panel-kicker {
font-family: 'Caveat', cursive;
color: var(--indigo); /* white card */
font-size: 22px;
line-height: 1;
}
.value-panel-foot {
margin: auto 0 0;
padding-top: 12px;
border-top: 1px dashed var(--line);
font-size: 12.5px;
color: var(--muted);
line-height: 1.45;
min-height: 3.6em;
}
/* Pricing table */
.price-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
table-layout: fixed;
}
.price-table thead th {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 12px;
letter-spacing: 0.02em;
color: var(--muted);
text-align: right;
padding: 8px;
border-bottom: 1px solid var(--line);
}
.price-table thead th:first-child { text-align: left; }
.price-table tbody tr,
.term-table tbody tr {
height: 60px;
}
.price-table tbody th,
.price-table tbody td {
padding: 10px 8px;
border-bottom: 1px solid var(--line);
text-align: right;
vertical-align: middle;
}
.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td { border-bottom: none; }
/* Table footer totals (shared across both tables) */
.price-table tfoot td,
.term-table tfoot td {
background: var(--indigo);
color: var(--white);
padding: 14px 10px;
border-top: 2px solid var(--indigo);
vertical-align: middle;
}
.pt-total-label,
.tt-total-label {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.01em;
}
.pt-total-value,
.tt-total-value {
font-family: 'Anton', sans-serif;
font-size: 22px;
letter-spacing: 0.01em;
color: var(--teal);
text-align: right;
white-space: nowrap;
}
.value-marketing {
margin: 22px auto 0;
text-align: center;
font-family: 'Anton', sans-serif;
color: var(--teal);
font-size: clamp(18px, 2vw, 22px);
letter-spacing: 0.03em;
text-transform: uppercase;
}
.pt-total-per,
.tt-total-per {
font-family: 'Inter', sans-serif;
font-size: 12px;
color: rgba(255,255,255,0.7);
margin-left: 3px;
font-weight: 500;
letter-spacing: 0;
}
.price-table tbody th {
text-align: left;
font-family: 'Anton', sans-serif;
font-weight: 400;
color: var(--indigo);
font-size: 17px;
letter-spacing: 0.01em;
}
.pt-family-cell {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.pt-family-label { flex: 0 0 auto; }
/* Highlighted "Subscribe" column */
.price-col-hero { background: var(--teal-soft); }
.price-col-hero-th {
position: relative;
color: var(--indigo) !important;
}
.price-col-tag {
position: absolute;
top: -22px;
left: 50%;
transform: translateX(-50%);
background: var(--teal);
color: var(--indigo);
font-family: 'Anton', sans-serif;
font-size: 11px;
letter-spacing: 0.02em;
padding: 3px 10px;
border-radius: 999px;
white-space: nowrap;
}
.pt-kids {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 3px;
color: var(--indigo); /* white pricing table */
min-width: 68px;
flex-shrink: 0;
box-sizing: border-box;
}
.pt-kids svg { display: block; }
.pt-kids svg { display: block; }
.pt-kids-plus {
font-family: 'Anton', sans-serif;
color: var(--indigo);
font-size: 14px;
line-height: 1;
margin-left: 2px;
}
.pt-strike {
font-family: 'Anton', sans-serif;
color: var(--muted);
text-decoration: line-through;
text-decoration-color: #b3261e;
text-decoration-thickness: 2px;
font-size: 18px;
}
.pt-price {
font-family: 'Anton', sans-serif;
color: var(--indigo);
font-size: 22px;
line-height: 1;
white-space: nowrap;
}
.pt-per {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 11px;
color: var(--muted);
margin-left: 2px;
}
.pt-save {
white-space: nowrap;
}
.pt-save-inner {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
line-height: 1;
}
.pt-save-num {
font-family: 'Anton', sans-serif;
color: var(--indigo);
font-size: 17px;
}
.pt-pct {
display: inline-block;
background: var(--indigo);
color: var(--white);
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.02em;
padding: 3px 8px;
border-radius: 999px;
}
@media (max-width: 480px) {
.price-table { font-size: 12px; table-layout: auto; }
.price-table thead th,
.price-table tbody th,
.price-table tbody td { padding: 10px 4px; }
.price-table thead th { font-size: 9px; letter-spacing: 0.06em; }
.price-table tbody th { font-size: 13px; gap: 4px; }
.pt-family-label { flex: 0 0 auto; }
.pt-kids {
padding: 2px 5px;
background: transparent;
min-height: 0;
}
.pt-kids svg { width: 12px; height: 12px; }
.pt-kids-plus { font-size: 10px; }
.pt-price { font-size: 16px; }
.pt-strike { font-size: 13px; }
.pt-save-num { font-size: 12px; min-width: 0; }
.pt-pct { font-size: 9px; padding: 2px 5px; margin-left: 4px; }
.pt-total-label { font-size: 10px; }
.pt-total-value { font-size: 16px; }
.pt-total-caveat { font-size: 9px; }
}
/* Term breakdown table */
.term-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
table-layout: fixed;
}
.term-table thead th {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 12px;
letter-spacing: 0.02em;
color: var(--muted);
text-align: left;
padding: 8px;
border-bottom: 1px solid var(--line);
}
.term-table thead th:last-child { text-align: right; }
.term-table tbody th,
.term-table tbody td {
padding: 10px 8px;
border-bottom: 1px solid var(--line);
vertical-align: middle;
}
.term-table tbody tr:last-child th,
.term-table tbody tr:last-child td { border-bottom: none; }
.term-table tbody th {
text-align: left;
}
.tt-num {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 26px;
padding: 0 6px;
border-radius: 999px;
background: var(--teal-soft);
color: var(--indigo);
font-family: 'Anton', sans-serif;
font-size: 14px;
}
.tt-season {
font-family: 'Caveat', cursive;
color: var(--ink);
font-size: 19px;
line-height: 1;
white-space: nowrap;
}
.tt-season svg {
vertical-align: -3px;
margin-right: 4px;
}
.tt-items {
font-size: 13px;
line-height: 1.3;
color: var(--ink);
}
.tt-items-inner {
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
}
.tt-item {
display: inline-flex;
align-items: flex-start;
gap: 6px;
white-space: normal;
}
.tt-item svg { color: var(--indigo); flex-shrink: 0; } /* white table */
.tt-worth {
text-align: right;
font-family: 'Anton', sans-serif;
color: var(--indigo);
font-size: 20px;
white-space: nowrap;
}
@media (max-width: 480px) {
.term-table { font-size: 13px; }
.term-table thead th,
.term-table tbody th,
.term-table tbody td { padding: 10px 4px; }
.tt-season { font-size: 17px; }
.tt-items { font-size: 12px; }
.tt-item { margin-right: 8px; white-space: normal; }
.tt-worth { font-size: 18px; }
}
.value-cta {
margin-top: 28px;
}
.value-cta .script-aside {
margin-bottom: 12px;
}
/* =========================================================
Open-state checkout preview
========================================================= */
/* Journey mode: /subscribe in open state hides site chrome + swaps in checkout-only chrome */
.journey-only { display: none !important; }
/* Sync the view visibility with the inline-script-set attribute — prevents FOUC */
html[data-checkout-state="open"] [data-view="closed"] { display: none !important; }
html[data-checkout-state="closed"] [data-view="open"] { display: none !important; }
body.journey-mode { background: var(--indigo); }
body.journey-mode .site-footer { display: none !important; }
/* Keep the white site-header identical to other pages — just hide the nav items
(visibility, not display, so nav space is not reflowed) */
body.journey-mode .site-nav,
body.journey-mode .nav-toggle { visibility: hidden !important; }
/* The strapline stays on desktop — it is branding, not an escape route, and a
payment form benefits from it. On a phone it wraps to two lines and costs
~65px at the top of the checkout screen, so there it goes. `display`, not
`visibility`: reserving the space is the whole thing we are avoiding. */
@media (max-width: 720px) {
body.journey-mode .site-strapline { display: none !important; }
}
body.journey-mode .journey-only { display: flex !important; }
body.journey-mode p.journey-only { display: block !important; text-align: center; }
body.journey-mode main {
padding: 16px 20px 8px;
min-height: calc(100vh - 90px);
display: flex;
align-items: center;
justify-content: center;
}
body.journey-mode main > section.checkout-shell {
padding: 0;
width: 100%;
display: flex;
justify-content: center;
}
body.journey-mode .checkout-help {
padding: 6px 20px 10px;
font-size: 11px;
}
body.journey-mode .register-card.checkout-card { padding: 16px 20px; }
.checkout-form h2.soft-heading { margin: 0 0 2px; }
/* Cross-page navigation is instant — the View Transitions cross-fade made the
hero image feel like it was still loading. Step-to-step transitions inside
the checkout are independent CSS keyframes and unaffected. */
/* Step transition — cross-fade with small slide so the change is clearly visible.
Long enough to read on video and on human eye but not sluggish. */
.checkout-step:not([hidden]) {
animation: hd-step-in 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes hd-step-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
/* Choices.js — brand overrides + smoother transitions */
.checkout-form .choices { margin-bottom: 8px; }
.checkout-form .choices__inner {
background: #fbfaf6;
border: 1px solid #cfcdc4;
border-radius: 8px;
padding: 10px 12px 8px;
min-height: 44px;
font-size: 15px;
transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.checkout-form .kid-row .choices__inner { background: var(--white); }
.checkout-form .choices.is-open .choices__inner,
.checkout-form .choices.is-focused .choices__inner {
border-color: var(--teal);
background: var(--white);
box-shadow: 0 0 0 3px rgba(92, 224, 230, 0.25);
}
.checkout-form .choices__list--single { padding: 0; }
.checkout-form .choices__list--single .choices__item { color: var(--ink); }
.checkout-form .choices__placeholder { opacity: 0.6; color: var(--muted); }
.checkout-form .choices[data-type*="select-one"]::after {
border-color: var(--indigo) transparent transparent;
right: 14px;
}
.checkout-form .choices__list--dropdown,
.checkout-form .choices__list[aria-expanded] {
border: 1px solid #cfcdc4;
border-radius: 8px;
margin-top: 6px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
opacity: 0;
transform: translateY(-6px);
transition: opacity 0.16s ease, transform 0.16s ease;
}
.checkout-form .choices__list--dropdown.is-active,
.checkout-form .choices__list[aria-expanded].is-active {
opacity: 1;
transform: translateY(0);
}
.checkout-form .choices__item--selectable.is-highlighted {
background: var(--teal-soft);
color: var(--indigo);
}
.checkout-form .choices__input {
background: #fbfaf6;
border-radius: 6px;
padding: 8px 10px;
font-size: 14px;
}
/* Flatpickr — brand overrides */
.flatpickr-calendar {
border-radius: 12px !important;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) !important;
border: 1px solid #cfcdc4 !important;
font-family: 'Inter', sans-serif !important;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after { border-bottom-color: #cfcdc4 !important; }
/* Modernised month/year navigation — pill-styled with cleaner spacing */
.flatpickr-months { padding: 12px 10px 8px; align-items: center; }
.flatpickr-months .flatpickr-month {
height: 40px;
display: flex !important;
align-items: center;
justify-content: center;
}
.flatpickr-current-month {
padding: 0 !important;
height: auto !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 15px !important;
font-weight: 600 !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
appearance: none !important;
-webkit-appearance: none !important;
background: var(--teal-soft) !important;
color: var(--indigo) !important;
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
font-size: 14px !important;
padding: 5px 26px 5px 12px !important;
border-radius: 999px !important;
border: 1px solid rgba(92, 224, 230, 0.35) !important;
cursor: pointer !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 10px center !important;
transition: background-color 0.15s ease, border-color 0.15s ease !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
background-color: #d0f6f8 !important;
border-color: var(--teal) !important;
}
.flatpickr-current-month .numInputWrapper {
background: var(--teal-soft);
border: 1px solid rgba(92, 224, 230, 0.35);
border-radius: 999px;
padding: 3px 10px;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.flatpickr-current-month .numInputWrapper:hover {
background-color: #d0f6f8;
border-color: var(--teal);
}
.flatpickr-current-month input.cur-year {
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--indigo) !important;
padding: 0 !important;
min-width: 44px !important;
text-align: center !important;
}
/* Hide the native number-spinner and use Flatpickr's own arrow buttons only */
.flatpickr-current-month input.cur-year::-webkit-outer-spin-button,
.flatpickr-current-month input.cur-year::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
}
.flatpickr-current-month input.cur-year { -moz-appearance: textfield !important; }
.flatpickr-current-month .numInputWrapper span {
border: none !important;
opacity: 0.6 !important;
transition: opacity 0.15s ease !important;
}
.flatpickr-current-month .numInputWrapper:hover span { opacity: 1 !important; }
.flatpickr-current-month .numInputWrapper span:hover { background: transparent !important; }
.flatpickr-current-month .numInputWrapper span.arrowUp::after {
border-bottom-color: var(--indigo) !important;
}
.flatpickr-current-month .numInputWrapper span.arrowDown::after {
border-top-color: var(--indigo) !important;
}
/* Prev/next month arrows — softer look */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
color: var(--indigo) !important;
fill: var(--indigo) !important;
padding: 8px 12px !important;
border-radius: 8px !important;
transition: background 0.15s ease !important;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
background: var(--teal-soft) !important;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
fill: var(--indigo) !important;
}
/* Calendar min width for the header to breathe */
.flatpickr-calendar { min-width: 320px !important; }
.flatpickr-weekday { color: var(--muted) !important; font-weight: 600 !important; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
background: var(--indigo) !important;
border-color: var(--indigo) !important;
color: var(--white) !important;
}
.flatpickr-day:hover { background: var(--teal-soft) !important; }
.flatpickr-day.today { border-color: var(--teal) !important; color: var(--indigo) !important; }
/* Form → Handoff swap: also cross-fade */
[data-open-stage]:not([hidden]) {
animation: hd-stage-in 240ms ease-out both;
}
@keyframes hd-stage-in {
from { opacity: 0; }
to { opacity: 1; }
}
.checkout-form .register-lede { margin: 0 0 10px; font-size: 14px; }
.checkout-form .field { margin-bottom: 8px; }
.checkout-form .field-row .field { margin-bottom: 8px; }
.checkout-form .field-label { margin-bottom: 3px; }
.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="date"],
.checkout-form select { padding: 9px 12px; min-height: 40px; }
.checkout-form .price-line { margin: 10px 0 8px; padding: 10px 12px; }
.checkout-form .checkbox { margin-bottom: 6px; }
.checkout-form .step-actions { margin-top: 10px; padding-top: 10px; }
.checkout-form .fine-print { margin-top: 8px; }
.checkout-card .step-header { margin-bottom: 4px; }
/* Trust strip beneath the checkout card */
.trust-strip {
list-style: none;
padding: 0;
margin: 14px auto 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 10px;
max-width: 720px;
}
.trust-strip li {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 16px 6px 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
color: var(--white);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
}
.trust-strip li svg {
color: var(--white);
flex-shrink: 0;
width: 26px;
height: 26px;
padding: 5px;
border-radius: 50%;
box-sizing: border-box;
}
/* Per-icon accent colours — subtle Stripe-style variation */
.trust-strip li:nth-child(1) svg { background: var(--teal); color: var(--indigo); }
.trust-strip li:nth-child(2) svg { background: var(--indigo); color: var(--teal); border: 1px solid rgba(255,255,255,0.18); }
.trust-strip li:nth-child(3) svg { background: #1e8449; color: var(--white); } /* was #1eae52: white glyph on it was 2.9:1 */
/* Split layout: brand panel on the left, form on the right */
.checkout-split {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.05fr);
gap: 56px;
align-items: center;
max-width: 1080px;
width: 100%;
margin: 0 auto;
}
.checkout-brand {
color: var(--white);
display: flex;
flex-direction: column;
gap: 20px;
}
.checkout-brand-logo {
display: inline-block;
width: fit-content;
background: var(--white);
padding: 8px 12px;
border-radius: 10px;
}
.checkout-brand-logo img { height: 40px; width: auto; }
.checkout-brand-title {
font-family: 'Anton', sans-serif;
color: var(--white);
font-size: clamp(28px, 4vw, 38px);
line-height: 1.05;
letter-spacing: 0.02em;
margin: 4px 0 8px;
}
.checkout-brand-lede {
color: rgba(255, 255, 255, 0.8);
font-size: 15px;
margin: 0;
max-width: 400px;
}
.trust-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.trust-list li {
display: flex;
gap: 12px;
align-items: flex-start;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
line-height: 1.45;
}
.trust-list li svg {
color: var(--teal);
flex-shrink: 0;
margin-top: 2px;
}
.powered-by {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
align-self: flex-start;
}
.powered-by strong {
color: var(--white);
font-family: 'Anton', sans-serif;
font-size: 14px;
letter-spacing: 0.04em;
}
@media (max-width: 900px) {
.checkout-split { grid-template-columns: 1fr; gap: 24px; }
.checkout-brand { text-align: left; }
.checkout-brand-title { font-size: 24px; }
.trust-list { display: none; }
.checkout-brand-lede { display: none; }
}
/* Tighter form headings inside the checkout card */
.checkout-form h2.soft-heading {
font-family: 'Inter', sans-serif;
font-size: 22px;
text-transform: none;
letter-spacing: 0;
color: var(--indigo);
margin: 2px 0 4px;
}
/* =========================================================
/checkout.html — standalone full-viewport page
========================================================= */
body.checkout-page {
min-height: 100vh;
background: var(--indigo);
display: flex;
flex-direction: column;
overflow: hidden;
}
.checkout-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 24px;
flex-shrink: 0;
}
.checkout-logo img {
height: 40px;
width: auto;
filter: brightness(0) invert(1);
}
.checkout-back {
color: rgba(255, 255, 255, 0.7);
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: color 0.15s ease;
}
.checkout-back:hover { color: var(--teal); }
.checkout-main {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 8px 20px 4px;
min-height: 0;
}
.checkout-shell { width: 100%; }
.checkout-help {
text-align: center;
padding: 12px 20px 16px;
margin: 0;
color: rgba(255, 255, 255, 0.7); /* was 0.55 -- 3.78:1 on the new purple */
font-size: 12px;
flex-shrink: 0;
}
.checkout-help a { color: rgba(255, 255, 255, 0.85); }
.checkout-closed { text-align: center; }
.checkout-closed .state-icon.big {
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
background: var(--teal-soft);
color: var(--indigo);
border-radius: 50%;
margin-bottom: 12px;
}
.checkout-closed h2 { margin: 4px 0 8px; }
.checkout-closed p { color: var(--muted); }
.checkout-closed a { font-weight: 600; }
/* Handoff on the checkout page — centered */
body.checkout-page .handoff-card { text-align: left; }
/* Step 4 review summary — read-only blocks */
.review-grid {
display: flex;
flex-direction: column;
gap: 10px;
margin: 4px 0 12px;
}
.review-block {
background: #fbfaf6;
border: 1px solid var(--line);
border-radius: 10px;
padding: 12px 14px;
}
.review-block-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.review-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.review-edit {
background: transparent;
border: none;
color: var(--indigo); /* on a near-white card, so type takes the purple */
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
padding: 2px 4px;
}
.review-edit:hover { color: var(--indigo); text-decoration: underline; }
.review-body {
color: var(--ink);
font-size: 14px;
line-height: 1.5;
}
.review-body .review-sub {
color: var(--muted);
font-size: 13px;
}
.review-kid { padding: 4px 0; }
.review-kid + .review-kid { border-top: 1px dashed var(--line); }
/* Value callout on step 4 — adapts to number of kids */
.value-callout {
background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-dark) 100%);
color: var(--white);
border-radius: 12px;
padding: 14px 16px;
margin: 8px 0 10px;
}
.value-callout-headline {
font-family: 'Anton', 'Anton Fallback', sans-serif;
font-size: 18px;
letter-spacing: 0.02em;
line-height: 1.2;
color: var(--white);
}
.value-callout-headline strong { color: var(--teal); }
.value-callout-sub {
color: rgba(255, 255, 255, 0.8);
font-size: 13px;
margin-top: 4px;
line-height: 1.4;
}
/* Realistic confirmation screen */
.handoff-lede { font-size: 15px; color: var(--ink); margin-bottom: 16px; }
.confirm-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin: 8px 0 16px;
}
.confirm-block {
background: var(--teal-soft);
border: 1px solid rgba(92, 224, 230, 0.35);
border-radius: 10px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 2px;
}
.confirm-block .confirm-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.confirm-block strong { color: var(--indigo); font-size: 17px; }
.confirm-block .confirm-sub { color: var(--muted); font-size: 12px; line-height: 1.4; }
.confirm-next {
background: var(--white);
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px 16px;
margin-bottom: 16px;
}
.confirm-next h3 {
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 700;
color: var(--indigo);
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0 0 8px;
}
.confirm-next ol {
margin: 0;
padding-left: 20px;
color: var(--ink);
font-size: 14px;
line-height: 1.55;
}
.confirm-next ol li { margin-bottom: 4px; }
.prototype-footnote {
font-size: 11px;
color: var(--muted);
font-style: italic;
margin: 14px 0 0;
padding-top: 10px;
border-top: 1px solid var(--line);
}
/* Transferring loading state (between submit and confirmation) */
.transferring-card { text-align: center; align-items: center; }
.transferring-card .kicker,
.transferring-card h2 { text-align: center; }
.transferring-spinner {
width: 48px;
height: 48px;
border-radius: 50%;
border: 3px solid var(--teal-soft);
border-top-color: var(--teal);
margin: 0 auto 14px;
animation: hd-spin 0.9s linear infinite;
}
@keyframes hd-spin { to { transform: rotate(360deg); } }
.transferring-hint {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 999px;
background: var(--teal-soft);
color: var(--indigo);
font-size: 13px;
margin: 6px 0 12px;
}
.transferring-hint svg { color: var(--indigo); }
@media (max-width: 640px) {
.confirm-grid { grid-template-columns: 1fr; }
}
/* Single-column wrapper for the checkout card */
.checkout-wrap {
max-width: 900px;
margin: 0 auto;
}
/* Override the standalone card's 520px cap in journey mode so the wrap width actually applies */
.checkout-wrap .register-card.standalone { max-width: none; }
@media (max-width: 960px) { .checkout-wrap { max-width: 700px; } }
@media (max-width: 720px) { .checkout-wrap { max-width: 100%; } }
[data-view="open"].subscribe-opener { padding: 24px 0; }
[data-view="open"] .register-card.checkout-card { padding: 20px 22px; }
/* Open-state CTA card on /subscribe */
.open-cta-card { text-align: left; }
.open-cta-card .open-cta-body {
display: flex;
align-items: center;
gap: 20px;
margin: 10px 0 18px;
padding: 16px 18px;
background: var(--teal-soft);
border: 1px solid rgba(92, 224, 230, 0.35);
border-radius: 12px;
}
.open-cta-price {
display: flex;
align-items: baseline;
gap: 6px;
flex-shrink: 0;
}
.open-cta-price strong {
font-family: 'Anton', sans-serif;
font-size: 48px;
color: var(--indigo);
line-height: 1;
}
.open-cta-price span {
font-size: 12px;
color: var(--muted);
line-height: 1.3;
}
.open-cta-perks {
list-style: none;
padding: 0;
margin: 0;
font-size: 13px;
color: var(--ink);
}
.open-cta-perks li {
padding-left: 18px;
position: relative;
line-height: 1.6;
}
.open-cta-perks li::before {
content: "✓";
color: var(--teal);
font-weight: 700;
position: absolute;
left: 0;
}
.open-cta-btn {
width: 100%;
text-align: center;
font-size: 16px;
padding: 16px 24px;
margin-top: 4px;
}
/* Checkout card — inherits register-card styling; adds step-specific bits */
.checkout-card { min-height: 0; }
.checkout-card .step-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.step-indicator {
display: inline-flex;
align-items: center;
gap: 6px;
}
.step-dot {
width: 26px;
height: 26px;
border-radius: 50%;
background: #eeece5;
/* Darker than --muted, which only reaches 4.38:1 on this chip. */
color: #616161;
font-size: 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease, color 0.2s ease;
}
.step-dot.is-current { background: var(--indigo); color: var(--white); }
.step-dot.is-done { background: var(--teal); color: var(--indigo); }
.step-bar {
width: 20px;
height: 2px;
background: #e6e4dc;
display: inline-block;
}
.checkout-form h2.soft-heading { margin: 4px 0 4px; }
.checkout-form .register-lede { margin-bottom: 14px; }
/* Fields */
.checkout-form .field {
display: block;
margin-bottom: 12px;
}
.checkout-form .field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 0;
}
.checkout-form .field-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
/* Wider third column when it holds an email address */
.checkout-form .field-row.cols-3-email { grid-template-columns: 1fr 1fr 1.8fr; }
@media (max-width: 640px) {
.checkout-form .field-row,
.checkout-form .field-row.cols-3 { grid-template-columns: 1fr; gap: 0; }
}
.checkout-form .field-row .field { margin-bottom: 12px; }
.checkout-form .field-row .field.field-narrow { }
.checkout-form .field-label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--ink);
letter-spacing: 0.02em;
margin-bottom: 4px;
}
.checkout-form .field-optional {
color: var(--muted);
font-weight: 400;
}
.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="date"],
.checkout-form select {
width: 100%;
font-family: inherit;
font-size: 15px;
padding: 11px 13px;
border: 1px solid #cfcdc4;
border-radius: 8px;
background: #fbfaf6;
min-height: 44px;
color: var(--ink);
}
.checkout-form select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 40px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
background-color: #fbfaf6;
cursor: pointer;
font-weight: 500;
transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.checkout-form select:hover:not(:focus):not(.is-invalid) {
border-color: var(--indigo);
background-color: var(--white);
}
.checkout-form select:invalid { color: var(--muted); font-weight: 400; }
.checkout-form select option { color: var(--ink); font-weight: 500; }
.checkout-form select option[value=""][disabled] { color: var(--muted); }
.checkout-form input:focus,
.checkout-form select:focus {
outline: none;
border-color: var(--teal);
background-color: var(--white);
box-shadow: 0 0 0 3px rgba(92, 224, 230, 0.25);
}
.checkout-form input.is-invalid,
.checkout-form select.is-invalid {
border-color: #e26d6d;
background-color: #fdf5f5;
}
.checkout-form input[type="date"] { color: var(--ink); font-weight: 500; }
.checkout-form input[type="date"]:invalid { color: var(--muted); }
.field-hint-block {
display: flex;
align-items: center;
color: var(--muted);
font-size: 12px;
line-height: 1.35;
padding: 6px 0;
}
.kid-row select { background-color: var(--white); }
.checkout-form .field-hint {
display: block;
font-size: 12px;
color: var(--muted);
margin-top: 4px;
}
.checkout-form .field-error {
display: block;
font-size: 11px;
color: #c94a4a;
margin-top: 2px;
line-height: 1.3;
min-height: 14px;
}
/* The school name looked up from the code the parent typed.
NO RESERVED HEIGHT, unlike .field-error, and that is what lets the element
stay in the DOM permanently as a live region instead of being hidden and
unhidden -- see subscribe.html. An empty span occupies nothing, so the first
step is not pushed down for every visitor by a line that is usually absent.
Its margin goes with it while it is empty, or a blank line still nudges the
layout by 2px the moment a lookup answers.
Colours are the two the palette already sanctions on a light card: --indigo
for type, never --teal, which is 1.58:1 on white; and the same red
.field-error uses, 4.60:1 on the white card. */
/* The wrapper exists so the lookup line can sit OUTSIDE the label without
changing the spacing: any text inside a wrapping label joins the input's
accessible name. The label's own bottom margin moves to the wrapper, or the
school name would be pushed 12px below the field it belongs to. */
.checkout-form .field-with-lookup { margin-bottom: 12px; }
.checkout-form .field-with-lookup > .field { margin-bottom: 0; }
/* TWO RESERVED LINES UNDER ONE FIELD IS ONE TOO MANY.
.field-error keeps a 14px line under every field so a validation message
does not shove the form around. Under this field the lookup slot reserves a
line as well, and the two stacked put the school name 19px below the input
it describes and only 12px above the row beneath -- so it bound visually to
the wrong thing, which is exactly how it read on screen (measured, not
guessed). Collapsing the empty one here brings the answer to 5px under the
field. Everywhere else the reservation stands.
The cost is that a shape error on THIS field does move the line below it.
That is a state the parent is already being corrected in, and it is rarer
than the successful path this spacing is for. */
/* THE ERROR AND THE ANSWER SHARE ONE LINE, because they cannot both be true.
The shape rule refusing the code is exactly the case where lookupSchool()
clears the answer, so at most one of these two ever has anything in it.
Reserving a line each stacks them; reserving neither makes the form jump 8px
when a shape error appears, which is what collapsing the error alone did.
So the reservation moves between them: whichever is speaking takes the line
and the other collapses, and the row below never moves. The heights are
matched deliberately -- 16.2px is the slot's 1.35em at 12px, and the error is
11px so its natural line box is shorter. */
.checkout-form .field-with-lookup .field-error { min-height: 0; margin-top: 0; }
.checkout-form .field-with-lookup .field-error:not(:empty) {
min-height: 16.2px;
margin-top: 6px;
}
.checkout-form .field-with-lookup:has(.field-error:not(:empty)) .lookup-slot {
min-height: 0;
margin-top: 0;
}
/* A CONFIRMATION, NOT A HEADING.
This was 600 weight in --indigo, which is the heading colour at a heading
weight. A school name in that treatment, sitting in the gap between the code
field and the name row, reads as a title for the fields BELOW it rather than
as an answer about the field above -- which is what it is. Best practice for
a success state is understated: a small mark and a quiet line, so a form does
not become noisy (Baymard, NN/g). The name is reassurance, not something the
parent has to act on, so --muted (4.78:1 on --paper) is the right register
and the mark carries the brand colour.
The mark is a pseudo-element so it stays out of the element's text content:
this is a live region (role="status"), and the announcement should be the
school's name, not a tick. */
/* One line is reserved here and nowhere else, so the answer, the checking
state and the empty state are all the same height and nothing below the
field moves. The children carry no margin of their own for the same reason:
two siblings each with a margin would reserve two lines. A very long school
name still wraps and adds a line on a narrow screen -- reserving two lines
for every parent to avoid that is a worse trade. */
.checkout-form .lookup-slot {
display: block;
font-size: 12px;
line-height: 1.35;
min-height: 1.35em;
/* Half the 12px below it. Bound to the field above, which is what it is
about, without being jammed against the input's border -- 3px read as
crammed, 19px read as a heading for the row underneath. */
margin-top: 6px;
}
.checkout-form .school-lookup {
display: block;
font-size: 12px;
line-height: 1.35;
font-weight: 500;
color: var(--muted);
}
/* GREEN, AND IT IS NOT A BREACH OF THE PALETTE.
The palette already admits one colour that is not in Lee's deck: the #c94a4a
the error state uses. Semantic colours are a different category from brand
ones -- red means wrong to everybody, and a purple tick means nothing in
particular. Success green is the same argument in the other direction, and
having a red failure with no green success is the inconsistent version.
#20734a is 5.81:1 on the white card, well clear of AA, and dark enough not to
read as a highlighter. Only the MARK is green: the school name stays --muted,
so the line keeps the understated register a success state should have. */
.checkout-form .school-lookup:not(:empty)::before {
content: "\2713\00a0";
color: #20734a;
font-weight: 700;
}
/* SAYING IT IS WORKING, because otherwise the field looks broken.
The debounce is 600ms and a cold lookup measured 1.1s against staging, so a
parent can wait over a second and a half with nothing on screen at all.
Anything past about a second needs to acknowledge itself or it reads as
nothing having happened. It is deliberately quieter than the answer: same
size, --muted, and it is replaced the instant a verdict arrives. */
.checkout-form .school-lookup-pending {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
line-height: 1.35;
font-weight: 500;
color: var(--muted);
}
.checkout-form .school-lookup-pending[hidden] { display: none; }
.checkout-form .school-lookup-pending::before {
content: "";
width: 11px;
height: 11px;
border-radius: 50%;
border: 2px solid rgba(125, 19, 118, 0.22);
border-top-color: var(--indigo);
animation: hd-lookup-spin 0.7s linear infinite;
}
/* The trailing dots are a pseudo-element so nothing animates the text node the
sighted user is reading. */
.checkout-form .school-lookup-pending::after {
content: "…";
margin-left: -4px;
}
@keyframes hd-lookup-spin { to { transform: rotate(360deg); } }
/* A spinner is motion for its own sake to anybody who has asked for less of it,
and the ring still reads as "in progress" standing still. */
@media (prefers-reduced-motion: reduce) {
.checkout-form .school-lookup-pending::before { animation: none; }
}
.checkout-form .school-lookup.is-unknown {
color: #c94a4a;
font-weight: 500;
}
.checkout-form .school-lookup.is-unknown::before {
content: "\2715\00a0";
color: #c94a4a;
}
/* Kids repeater */
.kids-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.kid-row {
background: #fbfaf6;
border: 1px solid var(--line);
border-left: 3px solid var(--teal);
border-radius: 10px;
padding: 12px 14px;
}
.kid-row-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.kid-index {
font-size: 12px;
font-weight: 700;
color: var(--indigo);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.kid-remove {
background: transparent;
border: none;
color: var(--muted);
font-size: 22px;
line-height: 1;
cursor: pointer;
padding: 0 6px;
border-radius: 4px;
}
.kid-remove:hover { color: #e26d6d; background: #fdf5f5; }
.kid-row input[type="text"],
.kid-row input[type="date"] { background: var(--white); }
/* DOB group — 3 inputs (day/month/year) side by side, GOV.UK style */
.checkout-form fieldset.dob-group {
border: none;
padding: 0;
margin: 0 0 12px;
}
.checkout-form .dob-group legend.field-label {
padding: 0;
margin-bottom: 4px;
}
.checkout-form .dob-inputs {
display: flex;
gap: 8px;
align-items: flex-end;
}
.checkout-form .dob-inputs label {
display: flex;
flex-direction: column;
gap: 3px;
}
.checkout-form .dob-inputs label:nth-child(1),
.checkout-form .dob-inputs label:nth-child(2) { width: 76px; }
.checkout-form .dob-inputs label:nth-child(3) { width: 96px; }
.checkout-form .dob-sub-label {
font-size: 11px;
font-weight: 500;
color: var(--muted);
letter-spacing: 0.02em;
}
.checkout-form .dob-inputs input {
text-align: center;
font-variant-numeric: tabular-nums;
}
.kid-row .dob-inputs input { background: var(--white); }
/* DOB sub-inputs delegate error display to a single slot at the bottom of the
group; per-input error slots are hidden so they do not reserve extra space. */
.checkout-form .dob-inputs label > .field-error { display: none; }
.checkout-form .dob-error { padding-top: 4px; }
.add-kid {
padding: 10px 18px;
font-size: 14px;
min-height: 40px;
animation: none;
margin-bottom: 8px;
}
/* Price line */
.price-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: var(--teal-soft);
border: 1px solid rgba(92, 224, 230, 0.35);
border-radius: 10px;
padding: 12px 14px;
margin: 14px 0 12px;
}
.price-line-body strong {
display: block;
font-size: 18px;
color: var(--indigo);
}
.price-line-body span {
display: block;
font-size: 12px;
color: var(--muted);
}
.price-line-tag {
background: var(--indigo);
color: var(--white);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 999px;
}
/* Checkboxes */
.checkout-form .checkbox {
display: flex;
gap: 10px;
align-items: flex-start;
font-size: 13px;
line-height: 1.4;
color: var(--ink);
margin-bottom: 8px;
cursor: pointer;
}
.checkout-form .checkbox input[type="checkbox"] {
margin-top: 2px;
width: 18px;
height: 18px;
accent-color: var(--indigo);
flex-shrink: 0;
}
.checkout-form .checkbox a { color: var(--indigo); }
/* Step actions row */
.step-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.step-caption {
font-size: 12px;
color: var(--muted);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.step-actions .btn {
animation: none;
padding: 12px 22px;
}
.step-actions .btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.link-back {
background: transparent;
border: 1.5px solid var(--teal); /* cyan rule, purple type */
color: var(--indigo);
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
padding: 8px 16px;
border-radius: 999px;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
display: inline-flex;
align-items: center;
}
.link-back:hover {
background: var(--teal);
color: var(--indigo);
text-decoration: none;
}
/* On teal-tinted surfaces, swap to indigo so it still reads */
.teal-soft .link-back,
[class*="teal"] .link-back {
border-color: var(--indigo);
color: var(--indigo);
}
.teal-soft .link-back:hover,
[class*="teal"] .link-back:hover {
background: var(--indigo);
color: var(--white);
}
/* Open-state reassurance list — slightly different from the closed one */
.what-next-list.open-reassure li { color: var(--white); }
.what-next-list.open-reassure .wn-tick {
background: rgba(92, 224, 230, 0.15);
color: var(--teal);
}
/* =========================================================
Handoff view — placeholder + integration panel
========================================================= */
.handoff {
max-width: 720px;
margin: 0 auto;
}
.handoff-card {
background: var(--white);
color: var(--ink);
border-radius: 14px;
padding: 32px 28px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.handoff-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--teal-soft); /* cyan chip, purple glyph */
color: var(--indigo);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
}
.handoff-card h2 { margin: 4px 0 12px; color: var(--indigo); }
.handoff-card p { color: var(--muted); font-size: 15px; }
.handoff-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
margin-top: 8px;
}
.handoff-actions .btn { animation: none; }
/* Integration panel */
.integration-panel {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(92, 224, 230, 0.25);
border-radius: 14px;
padding: 28px 26px;
color: var(--white);
}
.integration-header h3 {
color: var(--white);
margin: 4px 0 8px;
font-size: 22px;
}
.integration-lede {
color: rgba(255, 255, 255, 0.75);
font-size: 14px;
margin: 0 0 18px;
}
.integration-flow {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
counter-reset: intstep;
}
.integration-step {
display: grid;
grid-template-columns: auto auto 1fr;
align-items: center;
gap: 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 12px 14px;
position: relative;
}
.integration-step strong {
color: var(--white);
font-size: 15px;
letter-spacing: 0.02em;
}
.integration-step span {
color: rgba(255, 255, 255, 0.7);
font-size: 13px;
line-height: 1.4;
}
.integration-badge {
width: 40px;
height: 40px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Anton', sans-serif;
font-size: 16px;
letter-spacing: 0.02em;
color: var(--white);
}
.integration-badge[data-brand="gocardless"] { background: #00A0E8; }
.integration-badge[data-brand="monday"] { background: #FF3D57; }
.integration-badge[data-brand="mailjet"] { background: #FEAD0E; color: #1a1a2e; }
.integration-badge[data-brand="netlife"] { background: #7B4EE3; }
/* Responsive */
@media (max-width: 900px) {
.handoff { grid-template-columns: 1fr; gap: 24px; }
.checkout-card { min-height: 0; }
}
@media (max-width: 640px) {
.checkout-form .field-row { grid-template-columns: 1fr; gap: 0; }
.step-actions { flex-wrap: wrap; }
.step-caption { order: -1; width: 100%; text-align: center; margin-bottom: 4px; }
.preview-toggle-hint { display: none; }
.integration-step { grid-template-columns: auto 1fr; grid-template-rows: auto auto; }
.integration-step strong { grid-column: 2; }
.integration-step .integration-badge { grid-row: 1 / span 2; }
.integration-step span { grid-column: 2; }
}
/* ---------------------------------------------------------------------------
Cookie consent banner (consent.js)
Sits above the feedback widget (z-index 2147483300) because a consent notice
must not be obscured by anything. Accept and reject are deliberately the
same size, weight and shape — unequal prominence invalidates the consent.
--------------------------------------------------------------------------- */
.hd-consent {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 2147483400;
background: var(--white);
border-top: 3px solid var(--indigo);
box-shadow: 0 -8px 24px rgba(26, 26, 46, 0.14);
animation: hd-consent-in 220ms ease-out both;
}
.hd-consent:focus { outline: none; }
@keyframes hd-consent-in {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.hd-consent { animation: none; }
}
.hd-consent-inner {
max-width: 900px;
margin: 0 auto;
padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
}
.hd-consent-title {
font-family: 'Inter', 'Inter Fallback', system-ui, sans-serif;
font-size: 1.05rem;
font-weight: 700;
color: var(--indigo);
margin: 0 0 8px;
}
.hd-consent-text {
font-size: 0.94rem;
line-height: 1.5;
color: var(--ink);
margin: 0 0 16px;
}
.hd-consent-link {
color: var(--indigo);
text-decoration: underline;
}
.hd-consent-link:hover { color: var(--indigo-dark); }
.hd-consent-actions {
display: flex;
flex-direction: column;
gap: 10px;
}
.hd-consent-btn {
/* 48px min height — comfortably over the 44px touch target floor. */
min-height: 48px;
padding: 12px 20px;
border-radius: 10px;
font-family: inherit;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
border: 2px solid var(--indigo);
transition: background 140ms ease, color 140ms ease;
}
.hd-consent-btn:focus-visible {
outline: 3px solid var(--teal);
outline-offset: 2px;
}
.hd-consent-btn-accept {
background: var(--indigo);
color: var(--white);
}
.hd-consent-btn-accept:hover { background: var(--indigo-dark); border-color: var(--indigo-dark); }
.hd-consent-btn-reject {
background: var(--white);
color: var(--indigo);
}
.hd-consent-btn-reject:hover { background: var(--soft); }
/* Re-opens the banner from the cookie policy. Same shape as the choices, but
its own class — it is neither an accept nor a reject. */
.hd-consent-btn-settings {
background: var(--white);
color: var(--indigo);
}
.hd-consent-btn-settings:hover { background: var(--soft); }
.hd-consent-btn-quiet {
background: var(--white);
color: var(--indigo);
min-height: 44px;
padding: 10px 18px;
font-size: 0.9rem;
}
.hd-consent-btn-quiet:hover { background: var(--soft); }
/* Post-choice confirmation: one line plus a dismiss button. */
.hd-consent-inner-slim {
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.hd-consent-inner-slim .hd-consent-text { margin: 0; }
@media (min-width: 560px) {
.hd-consent-actions {
flex-direction: row;
}
.hd-consent-btn {
/* Equal widths, so neither choice reads as the default. */
flex: 1 1 0;
max-width: 280px;
}
.hd-consent-inner-slim {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.hd-consent-btn-quiet { flex: 0 0 auto; }
}
/* Journey mode paints the page indigo and hides the footer; the banner keeps
its own white ground so it stays readable there. */
body.journey-mode .hd-consent { border-top-color: var(--teal); }