/* site_audience.css — the shared chapter styles for the audience pages (/schools/, /students/, /parents/, /tutors/). Every page extends core/audience_base.html, which sets two custom properties on : --acc the page's accent (the same colour as its tile in the Products menu) --acc-ink a readable text colour for that accent on a light surface Everything here reads those two instead of naming a colour, so one page cannot drift from another. Map: docs/landing-page.md. */ /* /schools/: airy sibling of the homepage. Same tokens; more room to breathe. */ .aud-hero{ position:relative;overflow:hidden;min-height:100dvh;display:grid;place-items:center; padding:max(6.5rem, env(safe-area-inset-top) + 5rem) 1.25rem max(4rem, env(safe-area-inset-bottom) + 2.5rem); text-align:center; } .aud-hero__in{position:relative;z-index:2;max-width:38rem;margin-inline:auto} .aud-hero h1{font-size:clamp(2.4rem, 6vw, 4.2rem);line-height:1.08;margin:0} .aud-hero h1 .run{color:var(--acc-ink)} .aud-hero .line{margin:1.5rem auto 0;max-width:34ch} .aud-hero .proof-chips{justify-content:center;margin-top:1.8rem} .aud-hero .hero-cta{margin-top:2.2rem} .aud-chapter{padding:clamp(4.5rem, 10vw, 8rem) 0;position:relative} .aud-chapter--alt{background:var(--fill-soft)} .aud-chapter--ink{ background:var(--ink);color:var(--card); } .aud-chapter--ink .line, .aud-chapter--ink .aud-lede{color:color-mix(in oklch, var(--card) 72%, transparent)} .aud-chapter--ink h2{color:var(--card)} .aud-chapter--ink .aud-pill{background:color-mix(in oklch, var(--card) 14%, transparent);color:var(--card)} .aud-split{ display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem, 5vw, 4.5rem); align-items:center; } .aud-split--flip{grid-template-columns:.95fr 1.05fr} .aud-split--flip .aud-copy{order:2} .aud-split--flip .aud-frame{order:1} .aud-copy{max-width:34rem} .aud-copy h2{font-size:clamp(1.9rem, 3.6vw, 2.85rem);line-height:1.12;margin:0 0 1rem} .aud-lede{color:var(--soft);font-weight:600;font-size:1.08rem;line-height:1.55;margin:0 0 1.6rem;max-width:36ch} .aud-points{list-style:none;padding:0;margin:0;display:grid;gap:1rem} .aud-points li{display:grid;gap:.2rem;padding:0;border:0} .aud-points b{font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--ink)} .aud-chapter--ink .aud-points b{color:var(--card)} .aud-points span{color:var(--soft);font-weight:600;font-size:.95rem;line-height:1.5;max-width:38ch} .aud-chapter--ink .aud-points span{color:color-mix(in oklch, var(--card) 70%, transparent)} .aud-frame{ position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--lift); background:var(--card);aspect-ratio:4/3; } .aud-frame img{display:block;width:100%;height:100%;object-fit:cover} .aud-frame__float{ position:absolute;z-index:2;width:72px;height:72px;border-radius:var(--r-md); box-shadow:var(--lift);overflow:hidden;background:var(--card); } .aud-frame__float img{width:100%;height:100%;object-fit:cover;display:block} .aud-frame__float--a{top:-1.1rem;right:-.8rem;background:var(--lime);rotate:-8deg} .aud-frame__float--b{bottom:-1rem;left:-.9rem;background:var(--tang);rotate:7deg;width:64px;height:64px} .aud-frame__float--c{top:-1rem;left:-.7rem;background:var(--cyan);rotate:6deg} .aud-frame__float--d{bottom:-1.1rem;right:-.8rem;background:var(--rose);rotate:-6deg} .aud-tile{ background:var(--card);border-radius:var(--r-lg);box-shadow:var(--lift); overflow:hidden;display:grid;grid-template-rows:auto 1fr; } .aud-tile__pic{aspect-ratio:16/11;overflow:hidden;background:var(--fill-soft)} .aud-tile__pic img{width:100%;height:100%;object-fit:cover;display:block} .aud-tile__body{padding:1.35rem 1.4rem 1.55rem;display:grid;gap:.45rem;align-content:start} .aud-tile__body b{font-family:var(--display);font-weight:800;font-size:1.15rem;line-height:1.2} .aud-tile__body span{color:var(--soft);font-weight:600;font-size:.92rem;line-height:1.5} .aud-head{text-align:center;max-width:36rem;margin:0 auto clamp(2.5rem, 5vw, 3.5rem); display:grid;justify-items:center} .aud-head h2{font-size:clamp(1.9rem, 3.6vw, 2.85rem);line-height:1.12;margin:0 0 1rem} .aud-head .line{margin:0 auto;max-width:38ch} .aud-trio{ display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:auto auto; gap:clamp(1.2rem, 3vw, 2rem);margin-top:clamp(2.5rem, 5vw, 3.5rem); } .aud-tile--hero{grid-row:1 / span 2} .aud-tile--hero .aud-tile__pic{aspect-ratio:4/5;min-height:100%} .aud-tile--hero .aud-tile__body{padding:1.6rem 1.55rem 1.8rem} .aud-tile--hero .aud-tile__body b{font-size:1.35rem} .aud-pilot{ list-style:none;padding:0;margin:0; display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem; } .aud-pilot li{ background:var(--card);border-radius:var(--r-lg);box-shadow:var(--lift); padding:1.6rem 1.4rem 1.7rem;display:grid;gap:.7rem;align-content:start; position:relative;overflow:hidden; } .aud-pilot li::before{ content:"";position:absolute;inset:auto -20% -40% auto;width:7rem;height:7rem; border-radius:50%;opacity:.55;pointer-events:none; } .aud-pilot li:nth-child(1)::before{background:var(--acc)} .aud-pilot li:nth-child(2)::before{background:var(--lime)} .aud-pilot li:nth-child(3)::before{background:var(--tang)} .aud-pilot li:nth-child(4)::before{background:var(--cyan)} .aud-pilot__t{ font-family:var(--display);font-weight:800;font-size:.78rem;letter-spacing:.08em; text-transform:uppercase;color:var(--acc-ink);position:relative; } .aud-pilot__body{display:grid;gap:.35rem;position:relative} .aud-pilot__body b{font-family:var(--display);font-weight:800;font-size:1.2rem;line-height:1.2;color:var(--ink)} .aud-pilot__body em{font-style:normal;color:var(--soft);font-weight:600;font-size:.92rem;line-height:1.5} .aud-limits{ display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem, 5vw, 4rem);align-items:center; } .aud-limits .proof-list{margin:0} .aud-limits__art{ position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--lift); aspect-ratio:5/4;background:var(--card); } .aud-limits__art img{width:100%;height:100%;object-fit:cover;display:block} .aud-pill{ display:inline-flex;align-items:center;gap:.45rem;font-family:var(--display); font-weight:800;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase; padding:.45em 1em;border-radius:999px;background:var(--fill-soft);color:var(--acc-ink); margin-bottom:1rem; } .aud-pill .dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--acc);flex:none} /* Parent ⇄ student linking (partials/family_link_both_ways.html). Each lane keeps its own audience colour through --lane, never --acc, so both products are recognisable on either page. */ .aud-both{ display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:clamp(.8rem, 2vw, 1.4rem);align-items:stretch; } .aud-both__lane--parent{--lane:var(--tang);--lane-ink:var(--tang-deep)} .aud-both__lane--student{--lane:var(--lime);--lane-ink:var(--lime-ink)} .aud-both__lane{ background:var(--card);border-radius:var(--r-lg);box-shadow:var(--lift); border-top:.45rem solid var(--lane); padding:1.6rem 1.5rem 1.7rem;display:grid;gap:1.3rem;align-content:start; grid-template-rows:auto 1fr auto; } .aud-both__who{display:flex;align-items:center;gap:.8rem} .aud-both__who h3{ margin:0;font-family:var(--display);font-weight:800;font-size:1.25rem;line-height:1.2; color:var(--lane-ink); } .aud-both__toy{ width:52px;height:52px;flex:none;border-radius:var(--r-md);overflow:hidden; background:var(--lane);rotate:-6deg; } .aud-both__lane--student .aud-both__toy{rotate:6deg} .aud-both__toy img{width:100%;height:100%;object-fit:cover;display:block} .aud-both__steps{list-style:none;margin:0;padding:0;display:grid;gap:1rem;counter-reset:both} .aud-both__steps li{ counter-increment:both;display:grid;grid-template-columns:2rem 1fr; column-gap:.75rem;row-gap:.15rem;align-items:baseline; } .aud-both__steps li::before{ content:counter(both);grid-row:1 / span 2;align-self:start; width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center; background:color-mix(in oklch, var(--lane) 35%, var(--card));color:var(--lane-ink); font-family:var(--display);font-weight:800;font-size:.95rem; } .aud-both__steps b{font-family:var(--display);font-weight:800;font-size:1.02rem;color:var(--ink)} .aud-both__steps span{grid-column:2;color:var(--soft);font-weight:600;font-size:.92rem;line-height:1.5} .aud-both__go{justify-self:start} .aud-both__join{ align-self:center;width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center; background:var(--card);box-shadow:var(--lift);font-size:1.4rem;font-weight:800;color:var(--ink); } .aud-both__note{ margin:clamp(1.6rem, 3vw, 2.2rem) auto 0;text-align:center;max-width:44ch; color:var(--soft);font-weight:700;font-size:.95rem; } @media (max-width:760px){ .aud-both{grid-template-columns:1fr} .aud-both__join{justify-self:center;rotate:90deg} } .aud-marquee{ overflow:hidden;padding:1.4rem 0;border-block:2px dashed var(--border-dash); background:var(--card);margin:0; } .aud-marquee__track{ display:flex;gap:2.4rem;width:max-content; animation:aud-scroll 42s linear infinite; } .aud-marquee__track span{ font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--soft); white-space:nowrap; } .aud-marquee__track span b{color:var(--ink)} @keyframes aud-scroll{to{translate:-50% 0}} @media (prefers-reduced-motion:reduce){ .aud-marquee__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center; max-width:min(1140px,92vw);margin-inline:auto;row-gap:.6rem} } @media (max-width:960px){ .aud-split,.aud-split--flip,.aud-limits,.aud-pilot{grid-template-columns:1fr} .aud-trio{grid-template-columns:1fr;grid-template-rows:auto} .aud-tile--hero{grid-row:auto} .aud-tile--hero .aud-tile__pic{aspect-ratio:16/11;min-height:0} .aud-split--flip .aud-copy,.aud-split--flip .aud-frame{order:unset} .aud-frame{max-width:32rem} .aud-pilot{grid-template-columns:1fr 1fr} } @media (max-width:880px){ .aud-hero{min-height:auto;padding-top:7rem} .aud-hero .toy{position:static;width:min(48px,12vw);height:min(48px,12vw)} .aud-hero{ grid-template-columns:repeat(6,minmax(0,auto));justify-content:center;align-content:center; row-gap:1.6rem;column-gap:.45rem; } .aud-hero__in{grid-column:1/-1;grid-row:1} .aud-hero .toy{grid-row:2} } @media (max-width:560px){ .aud-pilot{grid-template-columns:1fr} .aud-frame__float{width:52px;height:52px} } /* The accent wash behind every hero: the one place the page's colour is large, so /students/ and /parents/ are told apart before a word is read. */ .aud-hero::before{ content:"";position:absolute;z-index:0;inset:auto 50% 8% auto;translate:50% 0; width:min(46rem,120vw);aspect-ratio:1;border-radius:50%;pointer-events:none; background:radial-gradient(closest-side, color-mix(in oklch, var(--acc) 30%, transparent), transparent); } /* the "who it's for" eyebrow picks up the accent */ .aud-hero .eyebrow{color:var(--acc-ink)} /* --acc-ink is a dark text shade for a light ground. On the dark theme the accent itself is the readable one, so the text uses it directly. */ [data-tb-theme="dark"] :is(.aud-hero h1 .run, .aud-hero .eyebrow, .aud-pill, .aud-pilot__t){color:var(--acc)}