/* ============================================================ SPARKS ACADEMY landing stylesheet (v8.2.1) Loaded ONLY by index.html. This file is Sparks Academy's alone — edit anything here without any effect on Bright Sparks Education (which has its own complete copy in landing-bright.css). ============================================================ */ body.land{ /* brand gradient (Sparks Academy: indigo → magenta) */ --a1:#3F27BD; --a2:#D22CB2; --acc:#F434A1; /* Pixer signature pink */ --acc2:#FF8442; /* Pixer orange */ --hero-accent:#FFC46B; /* v10.12: hero headline accent — warm, high contrast on the indigo→magenta gradient */ --good:#17DA9B; /* Pixer green */ --wave:url("/assets/brand/pixer/wave-sparks.webp"); --hero-art:url("/assets/brand/pixer/hero-sparks.png"); --ink:#222222; --grey:#66666F; --line:#ececf3; --soft:#f7f7fb; /* v11.2.29: --soft is 2% off white — right for a chip or an inset, far too faint to divide a page into bands. --band is the one for full-width sections, with --line drawn across the join so the edge is stated rather than implied. */ --band:#F4F1ED; --soft2:#fdf4fa; /* warm, to match --surface-2/3 */ --card-sh:0 10px 30px rgba(34,34,60,.09); --card-sh-lg:0 20px 50px rgba(34,34,60,.14); --r:12px; margin:0;color:var(--grey); /* v11.2.32: the page is a soft grey, so white cards and white bands read as objects sitting ON something rather than as holes in a white plane. #55555529 composites to #E4E4E4 over the canvas — 1.27:1 against white, which is the first value in this project that is unmistakably a step. */ background-color:#55555529; font:400 15px/1.8 'Open Sans','Segoe UI',system-ui,sans-serif; -webkit-font-smoothing:antialiased; } /* Bright Sparks Education theme (applied by the branding middleware) */ body.land h1,body.land h2,body.land h3,body.land h4,body.land h5{ font-family:'Poppins','Open Sans',sans-serif;font-weight:700;color:var(--ink); line-height:1.25;margin:0 0 14px; } body.land p{margin:0 0 14px} body.land a{} .small{font-size:.86rem} .muted{color:var(--grey)} .mono{font-family:ui-monospace,Menlo,Consolas,monospace} /* ---------- Pixer sec-title pattern ---------- */ .sec-title{margin-bottom:38px} .sec-title .title{ font-family:'Poppins',sans-serif;font-weight:600;font-size:16px; color:var(--acc);text-transform:capitalize;margin-bottom:8px; } .sec-title h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:700;color:var(--ink);margin:0} .sec-title h2 .grad{ font-family:'Playfair Display',serif;font-style:italic;font-weight:700; background:linear-gradient(90deg,var(--a1),var(--a2)); -webkit-background-clip:text;background-clip:text;color:transparent; } .sec-title.centered{text-align:center} .sec-title.light .title{color:#fff;opacity:.85} body.land .sec-title.light h2{color:#fff} .sec-title.light h2 .grad{background:none;color:#fff;-webkit-text-fill-color:#fff} /* ---------- buttons (Pixer gradient pills) ---------- */ .btn-sen,.btn-block.choose{ display:inline-block;border:0;cursor:pointer;text-decoration:none; font:600 14px/1 'Poppins',sans-serif;color:#fff;letter-spacing:.02em; padding:16px 34px;border-radius:999px; background:linear-gradient(90deg,var(--a1) 0%,var(--a2) 100%); background-size:180% 100%;background-position:0 0; box-shadow:0 10px 25px rgba(0,0,0,.18); transition:background-position .35s,transform .15s,box-shadow .15s; } .btn-sen:hover,.btn-block.choose:hover{background-position:95% 0;transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.22);color:#fff} .btn-sen-lg{padding:18px 40px;font-size:15px} .btn-sm-sen{padding:11px 22px;font-size:13px} .btn-pink,.btn-hero{background:linear-gradient(90deg,var(--acc),var(--acc2));background-size:180% 100%} .btn-ghost-sen,.btn-cta-ghost,.btn-block.choose-ghost{ display:inline-block;cursor:pointer;text-decoration:none; font:600 14px/1 'Poppins',sans-serif;color:var(--ink); padding:14px 30px;border-radius:999px;background:#fff;border:2px solid var(--line); transition:border-color .15s,color .15s,transform .15s; } .btn-ghost-sen:hover,.btn-block.choose-ghost:hover{border-color:var(--a1);color:var(--a1);transform:translateY(-2px)} .bs-btn-dark{background:linear-gradient(90deg,var(--a1),var(--a2))} .bs-btn-light{background:#fff;color:var(--ink);box-shadow:0 10px 25px rgba(0,0,0,.12)} .bs-btn-light:hover{color:var(--a1)} .btn-sm{ display:inline-block;font:600 12.5px/1 'Poppins',sans-serif;color:#fff;text-decoration:none; background:linear-gradient(90deg,var(--a1),var(--a2));padding:10px 20px;border-radius:999px;border:0;cursor:pointer; transition:transform .15s,box-shadow .15s; } .btn-sm:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.2);color:#fff} .btn-block{display:block;text-align:center;width:100%;box-sizing:border-box;margin-top:10px} .linky{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--a1);cursor:pointer;text-decoration:none} .linky:hover{text-decoration:underline} /* ---------- marquee ticker ---------- */ .marquee{overflow:hidden;background:var(--ink);color:#fff} .marquee-track{display:inline-flex;white-space:nowrap;gap:34px;padding:9px 0;animation:mq 26s linear infinite;font:600 12.5px 'Poppins',sans-serif;letter-spacing:.04em} .marquee-track span{display:inline-flex;align-items:center;gap:8px;padding-right:34px} .marquee .star{color:var(--acc2)} @keyframes mq{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.marquee-track{animation:none}} /* ---------- header / nav (Pixer main-header) ---------- */ /* v11.2.30: ten links and two buttons in one nowrap row, and the row was wider than the window — so "Hi, " and My dashboard were pushed off the right edge with nothing to say they had gone. The links now take the leftover space and shrink into it; the account block never shrinks and never wraps. */ .land-nav{ position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:18px; padding:0 2vw;min-height:78px;background:#fff;box-shadow:0 5px 20px rgba(34,34,60,.07); } .land-nav .brand{flex:0 0 auto} .land-nav-links{flex:1 1 auto;min-width:0} /* v11.2.31 — the last resort, and NOT overflow. Scrolling the row would clip the KS3/GCSE panel, because a container with overflow clips absolutely-positioned descendants too. Instead each link is allowed to shrink and lose its own tail: a flex item with white-space:nowrap will not go below its content width unless min-width:0 is set on it, which is why the row overflowed the window and the account block ended up drawn over the last link rather than beside it. */ .land-nav-links a{min-width:0;overflow:hidden;text-overflow:ellipsis} .land-nav-links .nav-drop{min-width:0} .land-nav > #nav-auth{flex:0 0 auto;white-space:nowrap} /* v11.21.2 — between 1200 and 1560 the whole bar tightens rather than the labels losing their tails: a 14" laptop is a 1512–1536px window (and less with devtools open), and "TED-Ed Tc / Maths Olym / 11 Plus On" is what the old sizes ellipsised down to there. Smaller type, tighter pads, a smaller brand and slimmer buttons buy the row back; below 1380 the link icons go too — when space is short the WORDS win. Below 1200 the burger takes over as before. */ @media (max-width:1560px){ .land-nav{gap:10px;padding:0 1.2vw} .land-nav-links{gap:0} .land-nav-links a{padding:0 7px;font-size:12.5px;gap:5px} .land-nav-links a .nav-svg{width:14px;height:14px} .nav-caret{width:11px;height:11px} .land-nav .brand{font-size:1.05rem;gap:8px} .land-nav .brand-mark{width:36px;height:36px;font-size:1rem} .land-nav .brand-logo-img{height:38px} .land-nav #nav-auth .btn-sen,.land-nav #nav-auth .btn-ghost-sen{padding:11px 18px;font-size:13px} .land-nav #nav-auth .small{font-size:12px} } @media (max-width:1380px){ .land-nav-links a .nav-svg{display:none} } /* v13.2.0: GCSE Masterclass made it nine links. Measured with Poppins, the labels lost their tails anywhere between the burger (1200px) and 1800px, so the bar tightens in two steps; on the narrowest laptops the brand keeps its mark and drops its name (the words of the menu win, as in v11.21.2). */ @media (min-width:1201px) and (max-width:1799px){ .land-nav{gap:8px;padding:0 1vw} .land-nav-links a{padding:0 5px;font-size:12px} .land-nav #nav-auth .btn-sen,.land-nav #nav-auth .btn-ghost-sen{padding:10px 14px} } @media (min-width:1201px) and (max-width:1660px){ .land-nav .brand-name{display:none} .land-nav-links a{padding:0 4px;font-size:11.5px} } @media (min-width:1201px) and (max-width:1280px){ .land-nav-links a{padding:0 3px;font-size:10.8px} .land-nav #nav-auth .btn-sen,.land-nav #nav-auth .btn-ghost-sen{padding:9px 11px} } .land-nav .brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 1.2rem 'Poppins',sans-serif;color:var(--ink)} .land-nav .brand-mark{ background:linear-gradient(135deg,var(--a1),var(--a2));border-radius:50%;width:42px;height:42px; display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem;color:#fff; box-shadow:0 6px 14px rgba(0,0,0,.18); } .land-nav .brand-logo-img{height:44px;width:auto;display:block} .land-nav .brand-name em{ font-style:normal;background:linear-gradient(90deg,var(--a1),var(--a2)); -webkit-background-clip:text;background-clip:text;color:transparent; } /* v11.2.18 — the top bar, aligned. Every item is now the same shape: an inline-flex row with an icon, a label and one baseline. Before, some links had a coloured PNG and some had nothing, so no two labels sat at the same height and the bar read as a jumble. The links also no longer wrap: below 1200px the whole set collapses into the burger rather than squashing onto two lines. */ .land-nav-links{display:flex;align-items:center;gap:2px;margin-right:auto;flex-wrap:nowrap} .land-nav-links a{ display:inline-flex;align-items:center;gap:7px;white-space:nowrap; color:var(--ink);text-decoration:none;font:600 14px/1 'Poppins',sans-serif; height:40px;padding:0 12px;border-radius:8px;transition:color .15s,background .15s; } .land-nav-links a:hover{color:var(--acc);background:var(--soft)} .land-nav-links a .nav-svg{width:17px;height:17px;flex:none;color:var(--a1);transition:color .15s} .land-nav-links a:hover .nav-svg{color:var(--acc)} .nav-caret{width:13px;height:13px;flex:none;margin-left:2px;opacity:.55;transition:transform .18s ease} .nav-drop:hover .nav-caret,.nav-drop.open .nav-caret{transform:rotate(180deg);opacity:1} /* the dropdown's own items keep plain text — an icon per subject would be noise */ body.land .drop-panel a{gap:0;height:auto} .nav-drop{position:relative} .drop-panel{ position:absolute;top:100%;left:0;min-width:210px;background:#fff;border-radius:10px; box-shadow:var(--card-sh-lg);padding:14px 0;display:none;z-index:70;border-top:3px solid var(--acc); } .drop-panel b{display:block;padding:4px 18px 8px;font:600 11px 'Poppins',sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--grey)} body.land .drop-panel a{display:block;padding:8px 18px;border-radius:0;font-weight:400;font-family:'Open Sans',sans-serif;font-size:14px;color:var(--ink)} body.land .drop-panel a:hover{background:var(--soft);color:var(--acc)} .nav-drop:hover .drop-panel,.nav-drop.open .drop-panel{display:block} .land-burger{display:none;background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--ink);padding:6px 10px} .land-loading{padding:110px 4vw;text-align:center;font-size:1.1rem;color:var(--grey)} /* ---------- scroll reveal (Pixer fadeInUp) ---------- */ .rv{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s ease} .rv.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}} /* ---------- banner (Pixer banner-section, brand wave) ---------- Sparks: the colourful wave art covers the whole banner as a backdrop, with a soft dark-to-clear wash on the LEFT so the white headline/copy stay readable, and a white SVG wave divider carved into the bottom edge. Curve control — edit --curve-height (depth of the bottom wave divider). To reshape the wave, edit the SVG path `d` in the ::after rule. */ .px-banner{ --curve-height:110px; /* depth of the bottom curve into the next section */ position:relative;overflow:hidden;isolation:isolate; padding:56px 2vw 44px; /* v11.2.13: no curve to leave room for */ /* v10.12: the pale wave photo is gone. The hero is now a saturated brand gradient with two soft light blooms over it, so white type sits on real contrast instead of being faded to 57% opacity over a pastel wash. v11.2.24: the third stop is a deep plum rather than the signature pink — the gradient now DARKENS towards the corner, which stops the right-hand side competing with the white tiles sitting on it. */ background: radial-gradient(1100px 620px at 15% -10%, rgba(255,255,255,.30), transparent 60%), radial-gradient(900px 700px at 92% 8%, rgba(255,255,255,.20), transparent 62%), linear-gradient(128deg, var(--a1) 0%, #7c0966 62%, #5d0b39 100%); } /* grain, so the gradient does not band on large screens */ .px-banner::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.30; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); } /* the curve into the section below */ .px-banner::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;z-index:3; height:var(--curve-height);pointer-events:none; background:bottom center/100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 110' preserveAspectRatio='none'%3E%3Cpath d='M0,44 C240,104 420,10 640,34 C860,58 1010,104 1200,58 L1200,110 L0,110 Z' fill='%23ffffff'/%3E%3C/svg%3E"); } .px-banner-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;display:block} /* ---- slides ---- */ .hero-slides{display:grid;grid-template-areas:"slide"} .hero-slide{ grid-area:slide;opacity:0;visibility:hidden;pointer-events:none; transition:opacity .8s ease; } .hero-slide.on{opacity:1;visibility:visible;pointer-events:auto} /* ---- the headline block, centred across the full width ---- */ .hero-head{text-align:center;max-width:960px;margin:0 auto 34px} .hero-eyebrow{ margin:0 0 14px;color:rgba(255,255,255,.86); font:700 12px/1.4 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase; } body.land .px-banner h1{ font-family:'Fraunces','Playfair Display',Georgia,serif; font-size:clamp(2.3rem,5.4vw,3.9rem);font-weight:700;line-height:1.06; color:#fff;margin:0;letter-spacing:-.015em; text-shadow:0 2px 24px rgba(20,10,60,.22); } /* the accent phrase: warm contrast colour plus a hand-drawn underline */ .px-banner h1 .grad{ position:relative;display:inline-block; font-family:'Fraunces','Playfair Display',Georgia,serif;font-style:italic;font-weight:700; color:var(--hero-accent);-webkit-text-fill-color:var(--hero-accent);background:none; } .px-banner h1 .grad::after{ content:"";position:absolute;left:-2%;right:-2%;bottom:-.16em;height:.20em; background:center/100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M4,13 C70,4 150,17 226,7 C258,3 282,6 296,9' stroke='%23ffffff' stroke-width='5' fill='none' stroke-linecap='round' opacity='.95'/%3E%3Cpath d='M10,18 C80,10 160,20 232,12' stroke='%23ffffff' stroke-width='3' fill='none' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E"); } /* ---- v10.13: the frosted panel ------------------------------------------- The proof points used to be white type directly on the gradient. Legible, but it made the whole hero one flat wash. They now sit on a translucent white panel that floats over the gradient and runs off the bottom of the banner, so the copy is dark-on-light where it is easiest to read, and the gradient reads as a backdrop rather than a background. */ .hero-panel{ position:relative;margin-top:34px; background:rgba(255,255,255,.55); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-radius:34px 34px 0 0; padding:44px 46px 56px; box-shadow:0 -2px 40px rgba(20,10,60,.10); } /* a hairline that fades out down the panel, as on the reference */ .hero-panel::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; border:1px solid rgba(255,255,255,.95); -webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent 78%); mask-image:linear-gradient(to bottom,#000 45%,transparent 78%); } .hero-body{display:grid;grid-template-columns:1fr 1.05fr;gap:44px;align-items:center} /* copy inside the panel is dark, not white */ .px-banner .content{position:relative;z-index:2;color:var(--ink)} .px-banner .text{ color:#4a4a55;font-size:16.5px;line-height:1.75;margin:0 0 28px;max-width:520px;text-shadow:none; } .hero-proof{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:22px} .hero-proof li{padding-left:20px;border-left:4px solid var(--proof,var(--a2));border-radius:2px} .hero-proof b{ display:block;color:#1d1d24;margin-bottom:5px; font-family:'Fraunces','Poppins',serif;font-size:20px;font-weight:700;line-height:1.3; } .hero-proof span{display:block;color:#5a5a66;font-size:14.5px;line-height:1.6;font-weight:500} body.land{--proof-1:var(--a1); --proof-2:var(--acc); --proof-3:var(--acc2)} /* the ghost button now sits on white, so it needs a real outline */ .btn-hero-ghost{ background:#fff;color:var(--ink);border:1px solid #d9d9e3; box-shadow:0 6px 18px rgba(16,8,40,.10); } .btn-hero-ghost:hover{transform:translateY(-2px);background:#fbfbfd;border-color:#c3c3d2} .hero-links .linky{ color:#5a5a66;text-decoration:underline;text-underline-offset:3px; font-weight:600;background:none;border:0;cursor:pointer;font-size:14.5px; } .hero-links .linky:hover{color:var(--a2)} /* stickers hang off the panel's edges, straddling the boundary */ .hero-stickers{position:absolute;inset:0;z-index:20;pointer-events:none} .hero-sticker{ position:absolute;width:58px;height:58px;border-radius:18px; display:grid;place-items:center;background:#fff; box-shadow:0 12px 26px rgba(12,6,40,.22); animation:stickerBob 8s ease-in-out infinite; } .hero-sticker img{width:30px;height:30px;object-fit:contain} /* ---- artwork ---- */ .px-banner .image-box{position:relative;z-index:2;text-align:center} .px-banner .image-box img{ max-width:100%;max-height:430px;height:auto; filter:drop-shadow(0 34px 50px rgba(12,6,40,.34)); animation:heroFloat 7s ease-in-out infinite; } @keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} /* ---- stat chips: solid glass, properly legible ---- */ .hero-stats{ display:flex;flex-wrap:wrap;gap:12px;margin:36px auto 0;justify-content:center; font:600 13.5px 'Poppins',sans-serif;color:#fff;position:relative;z-index:2; } .hero-stats span{ display:inline-flex;gap:8px;align-items:center; background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.42); border-radius:999px;padding:10px 20px;backdrop-filter:blur(6px);white-space:nowrap; } .hero-stats b{color:#fff;font-weight:800} .hero-stats .stat-ico{width:18px;height:18px;object-fit:contain;flex:0 0 auto} /* ---- dots ---- */ .hero-dots{display:flex;gap:10px;margin-top:26px;justify-content:center;position:relative;z-index:2} .hero-dot{ width:34px;height:5px;border:0;padding:0;border-radius:999px;cursor:pointer; background:rgba(255,255,255,.40);transition:background .25s,width .25s; } .hero-dot:hover{background:rgba(255,255,255,.72)} .hero-dot.on{background:#fff;width:54px} .hero-dot:focus-visible{outline:3px solid #fff;outline-offset:3px} @keyframes stickerBob{0%,100%{translate:0 0}50%{translate:0 -12px}} @media (max-width:1100px){ .hero-sticker{display:none} } @media (max-width:900px){ .px-banner{padding-top:40px} .hero-panel{padding:30px 20px 40px;border-radius:26px 26px 0 0;margin-top:26px} .hero-body{grid-template-columns:1fr;gap:30px} .px-banner .content{text-align:center} .hero-proof{text-align:left;max-width:420px;margin-inline:auto} .hero-ctas{justify-content:center} .px-banner .text{margin-inline:auto} .px-banner .image-box{order:-1} .px-banner .image-box img{max-height:290px} } @media (prefers-reduced-motion:reduce){ .hero-slide,.hero-dot,.btn-hero-primary,.btn-hero-ghost{transition:none} .px-banner .image-box img,.hero-sticker{animation:none} } @media (max-width:900px){ .px-banner{padding-top:80px} /* centred text on mobile needs an even wash, so overlay a vertical darkener */ .px-banner::before{ background:linear-gradient(180deg, rgba(40,30,90,.42) 0%, rgba(50,35,110,.30) 34%, rgba(80,60,150,.10) 55%, rgba(255,255,255,0) 78%); } .px-banner-inner{grid-template-columns:1fr;text-align:center} .px-banner .content{padding-bottom:40px} .px-banner .text{margin-inline:auto} .hero-ctas{justify-content:center} .hero-stats{justify-content:center;grid-template-columns:repeat(2,max-content)} } /* ---------- generic section shell ---------- */ .land-section{padding:90px 4vw;max-width:1200px;margin:0 auto;box-sizing:border-box} .land-section.wide{max-width:none;padding-left:0;padding-right:0} .land-section > h2,.land-quotes > h2{text-align:center;font-size:clamp(1.6rem,3.2vw,2.3rem)} .section-sub,.land-sub{text-align:center;max-width:640px;margin:0 auto 40px;color:var(--grey)} /* ---------- services / how-it-works (Pixer services-block) ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:1080px;margin:0 auto} .step{ background:#fff;border-radius:var(--r);box-shadow:var(--card-sh);padding:44px 30px 38px; text-align:center;position:relative;transition:transform .25s,box-shadow .25s; } .step:hover{transform:translateY(-8px);box-shadow:var(--card-sh-lg)} .step-ico{ width:84px;height:84px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; font-size:2rem;color:#fff;background:linear-gradient(135deg,var(--a1),var(--a2)); box-shadow:0 12px 26px rgba(0,0,0,.18);margin-bottom:22px; } .step-badge{ position:absolute;top:20px;left:20px;width:34px;height:34px;border-radius:50%; background:var(--soft);color:var(--acc);font:700 14px/34px 'Poppins',sans-serif; } .step h3{font-size:1.06rem;margin-bottom:10px} .step .small{color:var(--grey)} .step-arrow{display:none} @media (max-width:880px){.steps{grid-template-columns:1fr;max-width:420px}} /* ---------- fact counters (Pixer fact-counter band) ---------- */ .count-band{ background:linear-gradient(100deg,var(--a1) 0%,var(--a2) 100%); padding:70px 4vw;color:#fff; } .count-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;text-align:center} .cnum{font:700 clamp(1.9rem,3.6vw,2.7rem)/1.1 'Poppins',sans-serif;color:#fff} .clab{font:600 13px 'Poppins',sans-serif;letter-spacing:.05em;text-transform:uppercase;opacity:.9;margin-top:8px} @media (max-width:760px){.count-grid{grid-template-columns:repeat(2,1fr)}} /* ---------- category tabs (Pixer tab-btns) ---------- */ .cat-tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0 0 36px} .cat-tab{ border:2px solid var(--line);background:#fff;color:var(--ink);border-radius:999px; padding:10px 24px;font:600 13.5px 'Poppins',sans-serif;cursor:pointer; transition:all .18s;position:relative; } .cat-tab:hover{border-color:var(--acc);color:var(--acc)} .cat-tab.on{background:linear-gradient(90deg,var(--a1),var(--a2));border-color:transparent;color:#fff;box-shadow:0 8px 18px rgba(0,0,0,.16)} /* ---------- course cards (Pixer news-block) ---------- */ .course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px} @media (max-width:1020px){.course-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:680px){.course-grid{grid-template-columns:1fr}} .course-card{ background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--card-sh); display:flex;flex-direction:column;position:relative; transition:transform .25s,box-shadow .25s; } .course-card:hover{transform:translateY(-8px);box-shadow:var(--card-sh-lg)} .course-card .ribbon,.price-card .ribbon{ position:absolute;top:14px;right:-34px;transform:rotate(45deg);z-index:3; background:linear-gradient(90deg,var(--acc),var(--acc2));color:#fff; font:700 11px/1 'Poppins',sans-serif;padding:7px 40px;box-shadow:0 4px 10px rgba(0,0,0,.2); } .course-thumb{height:190px;overflow:hidden;background:linear-gradient(135deg,var(--soft),var(--soft2));display:flex;align-items:center;justify-content:center} .course-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .45s} .course-card:hover .course-thumb img{transform:scale(1.07)} .course-emoji{font-size:3.4rem} .course-body{padding:24px 26px 22px;display:flex;flex-direction:column;flex:1;gap:6px} .tag{display:inline-block;font:600 11px 'Poppins',sans-serif;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:5px 12px} .tag-subject{background:var(--soft2);color:var(--acc);align-self:flex-start} .tag-green{background:#e4fbf3;color:#0a9c6d} .tag-grey{background:var(--soft);color:var(--grey)} .course-body h3{font-size:1.02rem;line-height:1.4;margin:4px 0 2px} .course-contents{color:var(--grey)} .course-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:16px} .price{font:700 1.15rem 'Poppins',sans-serif;color:var(--ink)} .price s{font-weight:400;margin-left:6px} .price.big{font-size:1.9rem} .price.big .small{font-size:.85rem} /* ---------- course finder ---------- */ .finder-card{ max-width:820px;margin:0 auto;background:#fff;border-radius:var(--r);box-shadow:var(--card-sh); padding:26px 28px;display:grid;grid-template-columns:1fr 1.4fr auto;gap:18px;align-items:end; } .finder-card label{display:flex;flex-direction:column;gap:7px;font:600 12px 'Poppins',sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--grey)} .finder-card select{ border:2px solid var(--line);border-radius:8px;padding:12px 14px;font:400 14px 'Open Sans',sans-serif;color:var(--ink);background:#fff; } .finder-card select:focus{outline:none;border-color:var(--a1)} @media (max-width:720px){.finder-card{grid-template-columns:1fr}} /* ---------- fluid split: analytics (Pixer fluid-section-one) ---------- */ .px-fluid{background:var(--soft);padding:90px 0} .px-fluid-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;padding:0 4vw;box-sizing:border-box} @media (max-width:920px){.px-fluid-inner{grid-template-columns:1fr}} .px-fluid .figure img{width:100%;height:auto;border-radius:var(--r);box-shadow:var(--card-sh-lg)} .bold-text{font:600 16px 'Poppins',sans-serif;color:var(--ink);margin-bottom:12px} .skills{margin-top:26px;display:flex;flex-direction:column;gap:20px} .skill-header{display:flex;justify-content:space-between;font:600 13px 'Poppins',sans-serif;color:var(--ink);margin-bottom:8px} .skill-bar{height:9px;border-radius:999px;background:#e7e7ef;overflow:hidden} .skill-bar i{display:block;height:100%;border-radius:999px;width:0;transition:width 1.2s ease .2s} .rv.in .sk-g i{width:85%;background:linear-gradient(90deg,#17DA9B,#88e066)} .rv.in .sk-a i{width:58%;background:linear-gradient(90deg,#FF8442,#ffb25e)} .rv.in .sk-r i{width:32%;background:linear-gradient(90deg,#eb2f5b,#F434A1)} .sk-tag{font-weight:400;color:var(--grey)} .pill-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:34px} @media (max-width:720px){.pill-row{grid-template-columns:1fr}} .pill-card{ background:#fff;border-radius:var(--r);box-shadow:var(--card-sh);padding:20px 22px; display:flex;gap:14px;align-items:center;font:600 14px 'Poppins',sans-serif;color:var(--ink); } .pill-ico{ flex:0 0 52px;height:52px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; font-size:1.4rem;color:#fff;background:linear-gradient(135deg,var(--a1),var(--a2)); } /* ---------- moment split: live demo + accordion ---------- */ .px-moment{padding:90px 4vw;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center} @media (max-width:920px){.px-moment{grid-template-columns:1fr}} .demo-card{ background:#fff;border-radius:var(--r);box-shadow:var(--card-sh-lg);padding:30px 30px 26px; border-top:5px solid;border-image:linear-gradient(90deg,var(--a1),var(--a2)) 1; } .demo-kicker{font:600 11px 'Poppins',sans-serif;text-transform:uppercase;letter-spacing:.1em;color:var(--acc);margin-bottom:10px} #demo-q{font:600 16px/1.5 'Poppins',sans-serif;color:var(--ink);margin-bottom:18px} #demo-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px} .demo-opt{ border:2px solid var(--line);background:#fff;border-radius:8px;padding:12px 10px; font:600 14px 'Poppins',sans-serif;color:var(--ink);cursor:pointer;transition:all .15s; } .demo-opt:hover:not(:disabled){border-color:var(--a1);color:var(--a1)} .demo-opt.right{border-color:#17DA9B;background:#e9fbf4;color:#0a9c6d} .demo-opt.wrong{border-color:#eb2f5b;background:#fdeef2;color:#c9184a} .demo-feedback{margin:16px 0 0;font-size:.88rem;border-radius:8px;padding:12px 14px} .demo-feedback.idle{background:var(--soft);color:var(--grey)} .demo-feedback.ok{background:#e9fbf4;color:#0a7d58} .demo-feedback.no{background:#fdeef2;color:#b0164a} .demo-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px} #demo-count{font:600 12px 'Poppins',sans-serif;color:var(--grey)} /* accordion (Pixer accordion-box) */ .accordion-box{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:14px} .faq,.acc{background:#fff;border-radius:10px;box-shadow:var(--card-sh);overflow:hidden} .faq summary,.acc summary{ cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px; padding:18px 22px;font:600 14.5px 'Poppins',sans-serif;color:var(--ink); } .faq summary::-webkit-details-marker{display:none} .faq summary::before,.acc summary::before{ content:"+";flex:0 0 30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;font-weight:600;font-size:1rem; } .faq[open] summary::before,.acc[open] summary::before{content:"–"} .faq[open] summary,.acc[open] summary{color:var(--acc)} .faq p,.acc p{padding:0 22px 20px 66px;margin:0;color:var(--grey)} .faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px} /* ---------- mock exam events ---------- */ .mock-ev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:30px;max-width:1080px;margin:0 auto} .mock-ev-card{ background:#fff;border-radius:var(--r);box-shadow:var(--card-sh);padding:28px; display:flex;flex-direction:column;gap:8px;transition:transform .25s,box-shadow .25s; } .mock-ev-card:hover{transform:translateY(-6px);box-shadow:var(--card-sh-lg)} .mock-ev-card.full{opacity:.6} .mock-ev-when{ align-self:flex-start;background:linear-gradient(90deg,var(--a1),var(--a2));color:#fff; border-radius:999px;padding:7px 16px;font:600 12px 'Poppins',sans-serif;letter-spacing:.03em; } .mock-ev-card h3{font-size:1.05rem;margin:8px 0 0} .mock-ev-foot{margin-top:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px} .mock-ev-foot b{font:700 1.1rem 'Poppins',sans-serif;color:var(--ink);margin-right:auto} .mock-ev-low{color:#eb2f5b;font-weight:700} /* ---------- pricing (Pixer price-block) ---------- */ .price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:30px;max-width:1080px;margin:0 auto} .price-card{ background:#fff;border-radius:var(--r);box-shadow:var(--card-sh);padding:38px 32px 32px; text-align:center;position:relative;overflow:hidden;display:flex;flex-direction:column; transition:transform .25s,box-shadow .25s; } .price-card:hover{transform:translateY(-8px);box-shadow:var(--card-sh-lg)} .price-card.best{border-top:5px solid;border-image:linear-gradient(90deg,var(--a1),var(--a2)) 1} .price-card h3{font-size:1.1rem} .price-card .price.big{ font-size:2.5rem;margin:8px 0 16px; background:linear-gradient(90deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent; } .price-card .price.big s{color:var(--grey);-webkit-text-fill-color:var(--grey)} .price-card .price-desc{border-top:1px solid var(--line);padding-top:18px;margin-top:6px;min-height:64px} .price-card .btn-block{margin-top:auto;padding:15px 20px} /* ---------- testimonials (Pixer testimonial-block) ---------- */ .land-quotes{padding:90px 4vw;background:var(--soft2)} .quote-viewport{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;max-width:1200px;margin:0 auto;min-height:230px} .quote{ display:none;background:#fff;border-radius:var(--r);box-shadow:var(--card-sh); padding:30px 30px 26px;margin:0;flex:1 1 300px;max-width:360px;position:relative; } .quote.active{display:block;animation:qIn .5s ease} @keyframes qIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.quote.active{animation:none}} .quote::after{ content:"\201D";position:absolute;right:26px;top:14px; font:700 4.6rem/1 'Playfair Display',serif; background:linear-gradient(135deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.85; } .q-head{display:flex;align-items:center;gap:14px;margin-bottom:12px} .q-head b{font-family:'Poppins',sans-serif;color:var(--ink);display:block} .q-head .small{display:block;color:var(--grey)} .q-ava{ width:56px;height:56px;border-radius:50%;flex:0 0 56px;display:inline-flex;align-items:center;justify-content:center; font-size:1.6rem;background:linear-gradient(135deg,var(--soft),var(--soft2));box-shadow:inset 0 0 0 3px #fff,0 4px 12px rgba(0,0,0,.12); } .quote-stars{color:#FFB300;letter-spacing:2px} .quote p{color:var(--grey);font-size:.95rem} .quote-nav{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:34px} .q-arrow{ width:44px;height:44px;border-radius:50%;border:2px solid var(--line);background:#fff;cursor:pointer; font-size:1.2rem;color:var(--ink);transition:all .15s; } .q-arrow:hover{background:linear-gradient(135deg,var(--a1),var(--a2));border-color:transparent;color:#fff} .dot-btn{width:12px;height:12px;border-radius:50%;border:0;background:#dcdce6;cursor:pointer;padding:0;transition:all .2s} .dot-btn.on{background:linear-gradient(90deg,var(--a1),var(--a2));transform:scale(1.25)} /* ---------- taster + contact (Pixer contact-form-section) ---------- */ .px-cta-wrap{padding:90px 4vw} .taster-box,.contact-box{ max-width:980px;margin:0 auto;border-radius:22px;padding:60px 56px;position:relative;overflow:hidden; background:linear-gradient(115deg,var(--a1) 0%,var(--a2) 100%);color:#fff;box-shadow:var(--card-sh-lg); } .taster-box::before,.contact-box::before{ content:"";position:absolute;width:260px;height:260px;border-radius:50%; background:rgba(255,255,255,.09);top:-90px;right:-70px; } .taster-box::after,.contact-box::after{ content:"";position:absolute;width:180px;height:180px;border-radius:50%; background:rgba(255,255,255,.08);bottom:-70px;left:-50px; } .taster-box > *,.contact-box > *{position:relative;z-index:2} body.land .taster-box h2,body.land .contact-box h2{color:#fff;text-align:center;font-size:clamp(1.5rem,3vw,2.1rem)} .taster-box .section-sub,.contact-box .land-sub{color:#fff;opacity:.92} .contact-box .land-sub a{color:#fff;text-decoration:underline} .taster-ticks{text-align:center;margin-top:20px;opacity:.95} @media (max-width:720px){.taster-box,.contact-box{padding:44px 24px}} .taster-form{display:grid;grid-template-columns:1fr 1fr;gap:16px} .taster-form .field:nth-last-child(-n+0){grid-column:1/-1} .taster-form .consent-row,.taster-form .captcha-slot,.taster-form .taster-error,.taster-form button[type=submit]{grid-column:1/-1} @media (max-width:640px){.taster-form{grid-template-columns:1fr}} .field{display:flex;flex-direction:column;gap:7px} .field span{font:600 12px 'Poppins',sans-serif;letter-spacing:.04em} .field input,.field select,.field textarea{ border:0;border-radius:999px;padding:15px 22px;font:400 14px 'Open Sans',sans-serif;color:var(--ink); background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.12); } .field textarea{border-radius:18px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{outline:3px solid rgba(255,255,255,.55)} /* fields on white surfaces (modals) */ .land-taster-modal .field input,.land-taster-modal .field select{ border:2px solid var(--line);box-shadow:none;background:#fff; } .land-taster-modal .field input:focus,.land-taster-modal .field select:focus{outline:none;border-color:var(--a1)} .land-taster-modal .field span{color:var(--ink)} /* v12.32.0 — "Registering for TED-Ed?" pointer at the top of the account form */ .taster-ted-link{ display:flex;align-items:center;gap:14px;margin:4px 0 18px;padding:12px 16px; border-radius:14px;border:1.5px solid #FBCFE8;background:#FFF1F7;color:var(--ink); text-decoration:none;transition:border-color .15s,box-shadow .15s; } .taster-ted-link:hover,.taster-ted-link:focus-visible{border-color:#BE123C;box-shadow:0 4px 14px rgba(190,18,60,.12)} .taster-ted-ico{font-size:1.4rem;line-height:1} .taster-ted-txt{display:flex;flex-direction:column;gap:2px;flex:1;font-size:.92rem} .taster-ted-txt b{font:600 14px 'Poppins',sans-serif} .taster-ted-txt span{color:#BE123C;font-weight:600} .taster-ted-go{font-size:1.2rem;color:#BE123C;font-weight:700} .consent-row{display:flex;gap:10px;align-items:flex-start;font-size:.85rem} .consent-row input{margin-top:3px;accent-color:var(--acc)} .taster-box .consent-row a{color:#fff;text-decoration:underline} .taster-form button[type=submit]{justify-self:center;background:#fff;color:var(--a1);box-shadow:0 10px 25px rgba(0,0,0,.2)} .taster-form button[type=submit]:hover{color:var(--a2)} .land-taster-modal .taster-form button[type=submit]{background:linear-gradient(90deg,var(--a1),var(--a2));color:#fff} /* V9: give the taster modal more room so the two-column form breathes */ @media (min-width:960px){ .land-taster-modal{min-width:900px;max-width:900px} } .taster-error,.form-err{background:#fff;color:#c9184a;border-radius:10px;padding:10px 16px;font-weight:600} .contact-form{display:flex;flex-direction:column;gap:16px;max-width:720px;margin:0 auto} .cf2{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media (max-width:640px){.cf2{grid-template-columns:1fr}} .contact-form button[type=submit]{align-self:center;background:#fff;color:var(--a1);box-shadow:0 10px 25px rgba(0,0,0,.2)} .contact-form button[type=submit]:hover{color:var(--a2)} #contact-done{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);border-radius:10px;padding:10px 16px;text-align:center} /* ---------- Bright Sparks about / mascot / cta ---------- */ .bs-about{max-width:880px} .bs-about h2,.bs-about h3{text-align:left} .bs-touch{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px} .bs-touch a{ display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--ink); background:#fff;border-radius:var(--r);box-shadow:var(--card-sh);padding:18px 24px; font:600 14px 'Poppins',sans-serif;transition:transform .2s; } .bs-touch a:hover{transform:translateY(-4px)} .bs-touch .ico{ width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; font-size:1.3rem;color:#fff;background:linear-gradient(135deg,var(--a1),var(--a2)); } .bs-mascotband{background:var(--soft)} .bs-mascot{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center;max-width:1000px;margin:0 auto;position:relative} @media (max-width:820px){.bs-mascot{grid-template-columns:1fr;text-align:center}} .bs-mascot-arrow{display:none} .bs-mascot-left{display:flex;flex-direction:column;gap:16px;align-items:center} .bs-bubble{ background:#fff;border-radius:16px;box-shadow:var(--card-sh);padding:16px 20px;max-width:250px; font-size:.9rem;color:var(--grey);position:relative; } .bs-bubble b{display:block;font-family:'Poppins',sans-serif;color:var(--acc);margin-bottom:4px} .bs-bubble::after{content:"";position:absolute;bottom:-9px;left:50%;transform:translateX(-50%) rotate(45deg);width:18px;height:18px;background:#fff} .bs-portrait img{width:140px;height:140px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 6px #fff,var(--card-sh-lg)} .bs-mascot-copy h2{font-size:clamp(1.4rem,2.8vw,1.9rem);text-align:left} @media (max-width:820px){.bs-mascot-copy h2{text-align:center}} .bs-squig,.bs-namegrad{ font-family:'Playfair Display',serif;font-style:italic; background:linear-gradient(90deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent; } .bs-cta{ background:linear-gradient(115deg,var(--a1),var(--a2));color:#fff;text-align:center; padding:90px 4vw;position:relative;overflow:hidden; } body.land .bs-cta h2{color:#fff;font-size:clamp(1.6rem,3.2vw,2.3rem)} .bs-cta p{opacity:.94;max-width:520px;margin:0 auto 26px} .bs-star{position:absolute;color:rgba(255,255,255,.5);font-size:1.4rem} .bs-star.s1{top:18%;left:12%}.bs-star.s2{top:30%;right:14%}.bs-star.s3{bottom:24%;left:22%}.bs-star.s4{bottom:18%;right:24%} /* ---------- course detail page ---------- */ .detail{padding-top:50px} .detail-head{display:flex;gap:30px;align-items:center;margin:22px 0 40px;flex-wrap:wrap} .detail-head h1{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:6px} .course-thumb.lg{flex:0 0 220px;height:150px;border-radius:var(--r);overflow:hidden;box-shadow:var(--card-sh)} .course-thumb.lg img{width:100%;height:100%;object-fit:cover} .detail-cols{display:grid;grid-template-columns:1.6fr 1fr;gap:44px;align-items:start} @media (max-width:920px){.detail-cols{grid-template-columns:1fr}} .detail-cols h2{text-align:left;font-size:1.35rem;margin-top:34px} .course-long{color:var(--grey)} .curric{background:#fff;border-radius:10px;box-shadow:var(--card-sh);margin-bottom:14px;overflow:hidden} .curric summary{cursor:pointer;list-style:none;padding:16px 22px;font:600 14.5px 'Poppins',sans-serif;color:var(--ink)} .curric summary::-webkit-details-marker{display:none} .curric[open] summary{color:var(--acc);border-bottom:1px solid var(--line)} .curric ul{list-style:none;margin:0;padding:8px 0} .curric li{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 22px;font-size:.9rem;color:var(--ink)} .curric li:nth-child(even){background:var(--soft)} .review{background:#fff;border-radius:var(--r);box-shadow:var(--card-sh);padding:22px 24px;margin:0 0 16px} .buy-card{ background:#fff;border-radius:var(--r);box-shadow:var(--card-sh-lg);padding:32px 30px; position:sticky;top:100px;border-top:5px solid;border-image:linear-gradient(90deg,var(--a1),var(--a2)) 1; } .buy-card h3{font-size:1.15rem} .buy-card .price.big{background:linear-gradient(90deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent} .buy-card .price.big s{-webkit-text-fill-color:var(--grey);color:var(--grey)} /* ---------- modals ---------- */ #land-modal .modal-backdrop{position:fixed;inset:0;background:rgba(20,16,40,.55);z-index:90;backdrop-filter:blur(2px)} #land-modal .modal{ position:fixed;z-index:95;top:50%;left:50%;transform:translate(-50%,-50%); background:#fff;border-radius:18px;box-shadow:var(--card-sh-lg); width:min(560px,92vw);max-height:88vh;overflow:auto;padding:34px 34px 30px;box-sizing:border-box; } #land-modal .modal h3{font-size:1.25rem;padding-right:30px} .modal-x{position:absolute;top:14px;right:14px;background:var(--soft);border:0;border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:1rem;color:var(--ink)} .modal-x:hover{background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff} .modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:20px} .modal .field{margin-bottom:12px} .modal .field input{border:2px solid var(--line);border-radius:999px;padding:13px 20px;box-shadow:none} .modal .field input:focus{outline:none;border-color:var(--a1)} .modal .field span{color:var(--ink)} .cred-box{background:var(--soft);border-radius:10px;padding:16px 20px;margin:14px 0} .cred-box p{margin:4px 0} .bank-box{background:var(--soft);border-radius:10px;padding:16px 20px;margin:14px 0;display:flex;flex-direction:column;gap:8px} .bank-box > div{display:flex;justify-content:space-between;gap:16px;font-size:.92rem} .bank-box span{color:var(--grey)} .bank-ref{color:var(--acc);font-family:ui-monospace,monospace} /* ---------- footer (Pixer widgets-section) ---------- */ .land-footer{background:#222222;color:#bfbfca;padding:70px 4vw 30px;margin-top:0} body.land .land-footer a{color:#bfbfca;text-decoration:none;line-height:2.1} body.land .land-footer a:hover{color:#fff} .land-footer b{ display:block;color:#fff;font:600 15px 'Poppins',sans-serif;margin-bottom:12px;position:relative;padding-bottom:12px; } .land-footer b::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--a1),var(--a2))} .land-footer-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr 1fr;gap:34px} @media (max-width:960px){.land-footer-grid{grid-template-columns:1fr 1fr}} @media (max-width:560px){.land-footer-grid{grid-template-columns:1fr}} .land-footer .brand{display:inline-flex;align-items:center;gap:10px;font:700 1.15rem 'Poppins',sans-serif;color:#fff;text-decoration:none;margin-bottom:12px} .land-footer .brand-mark{background:linear-gradient(135deg,var(--a1),var(--a2));border-radius:50%;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;color:#fff} .land-footer .brand-logo-img{height:40px;width:auto;background:#fff;border-radius:8px;padding:3px} .land-footer .brand-name em{font-style:normal;background:linear-gradient(90deg,#8ab4ff,#ff9ad5);-webkit-background-clip:text;background-clip:text;color:transparent} /* ---------- mobile bits ---------- */ .mob-cta{display:none} /* v11.2.18: ten items plus two buttons do not fit in 960px — they were wrapping onto a second line and colliding with the brand, which is what made the bar look clumsy on a laptop. The whole set now collapses into the burger at 1200px instead, and the links inside it get their icons too. */ @media (max-width:1200px){ .land-burger{display:block;order:3} .land-nav{flex-wrap:wrap;gap:12px;padding:12px 4vw;min-height:0} .land-nav-links{ display:none;flex-direction:column;align-items:stretch;width:100%;order:4;gap:2px; border-top:1px solid var(--line);padding-top:10px;flex-wrap:wrap; } .land-nav-links a{height:44px;padding:0 8px} .land-nav.nav-open .land-nav-links{display:flex} .drop-panel{position:static;box-shadow:none;border-top:0;padding:0 0 6px 18px;display:block} #nav-auth{margin-left:auto} .mob-cta{ display:flex;gap:12px;position:sticky;bottom:0;z-index:55;background:#fff; padding:12px 4vw;box-shadow:0 -6px 20px rgba(34,34,60,.12); } .mob-cta .btn-sen{flex:1;text-align:center} } @media (max-width:640px){ .land-section{padding:64px 5vw} .count-band{padding:52px 5vw} } /* keyboard focus */ body.land :focus-visible{outline:3px solid var(--acc2);outline-offset:2px;border-radius:6px} /* ---------- v8.2.2: flat icon set replaces emojis ---------- */ .land-nav-links a .nav-ico-img{width:17px;height:17px;object-fit:contain;flex:none} .hero-stats .stat-ico{width:18px;height:18px;object-fit:contain;vertical-align:-4px} .step-ico img{width:46px;height:46px;object-fit:contain} body.land .brand-mark{ background:url("/assets/icons/bolt.png") center/58% no-repeat, linear-gradient(135deg,var(--a1),var(--a2)); color:transparent; } /* ============================================================ MATHS OLYMPIAD (v10.10) — landing section, index and course page. Colours come from the brand gradient already declared on body.land (--a1/--a2/--acc), so this block needs no edits per brand. The one motif of its own is the faint squared-paper grid behind the section: the surface the maths actually happens on. ============================================================ */ .oly-section{ position:relative;background:var(--soft); background-image: linear-gradient(rgba(63,39,189,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(63,39,189,.045) 1px,transparent 1px); background-size:28px 28px; } .oly-section > *{position:relative} /* ---- the two-step chooser. Numbered because it IS a sequence: year group first, because it filters what times exist. ---- */ .oly-picker-head{display:flex;gap:14px;align-items:flex-start;max-width:1080px;margin:0 auto} .oly-step{ flex:0 0 auto;width:32px;height:32px;border-radius:50%; background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff; font:800 15px/32px 'Poppins',sans-serif;text-align:center; } .oly-picker-head b{color:var(--ink);font:700 1.02rem/1.4 'Poppins',sans-serif} .oly-picker{ max-width:1080px;margin:0 auto;background:#fff;border-radius:var(--r); box-shadow:var(--card-sh);padding:26px 28px; } .oly-years{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;padding-left:46px} .oly-year{position:relative;cursor:pointer} .oly-year input{position:absolute;opacity:0;width:1px;height:1px} .oly-year span{ display:block;padding:9px 20px;border-radius:999px;border:2px solid var(--line); background:#fff;color:var(--ink);font:700 .9rem 'Poppins',sans-serif; transition:border-color .2s,color .2s,background .2s,transform .2s; } .oly-year:hover span{border-color:var(--a2);transform:translateY(-2px)} .oly-year.on span{ background:linear-gradient(135deg,var(--a1),var(--a2));border-color:transparent;color:#fff; } .oly-year input:focus-visible + span{outline:3px solid var(--acc);outline-offset:2px} /* ---- one course, with its weekly groups underneath ---- */ .oly-course{ max-width:1080px;margin:0 auto 22px;background:#fff;border-radius:var(--r); box-shadow:var(--card-sh);padding:26px 28px; } .oly-course-head{display:flex;gap:20px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap} .oly-course-head h3{margin:8px 0 2px;font-size:1.22rem} .oly-course-head p{margin:0} .oly-sub{color:var(--acc);font-weight:700;margin:0 0 4px} .oly-badge{ display:inline-block;padding:5px 14px;border-radius:999px; background:rgba(244,52,161,.1);color:var(--acc); font:700 11px/1.4 'Poppins',sans-serif;letter-spacing:.04em;text-transform:uppercase; } .oly-badge.light{background:rgba(255,255,255,.2);color:#fff} /* ---- a bookable weekly group: day/time, run, mode, price, action ---- */ .oly-strips{margin-top:18px;display:flex;flex-direction:column;gap:12px} .oly-strip{ display:flex;gap:18px;align-items:center;flex-wrap:wrap; border:1px solid var(--line);border-left:5px solid transparent; border-image:none;border-radius:10px;padding:14px 18px;background:var(--soft); transition:border-color .2s,background .2s,transform .2s; } .oly-strip:hover{background:#fff;border-left-color:var(--a2);transform:translateX(3px)} .oly-strip.full{opacity:.55} .oly-strip.full:hover{transform:none} .oly-strip-day{min-width:170px} .oly-strip-day b{display:block;color:var(--ink);font:700 1.05rem 'Poppins',sans-serif} .oly-strip-day span{font-size:.92rem;color:var(--grey)} .oly-strip-meta{display:flex;flex-direction:column;gap:3px;font-size:.85rem;flex:1 1 210px} .oly-strip-end{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-left:auto} .oly-price{font:700 1.15rem 'Poppins',sans-serif;color:var(--ink)} .oly-low{color:#eb2f5b;font-weight:700;font-size:.85rem} .oly-full{color:var(--grey);font-weight:700;font-size:.85rem} .oly-footnote{ max-width:1080px;margin:30px auto 10px;text-align:center; background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff; border-radius:999px;padding:13px 26px;font:700 .95rem 'Poppins',sans-serif; } .oly-empty{ max-width:640px;margin:0 auto;text-align:center;background:#fff; border-radius:var(--r);box-shadow:var(--card-sh);padding:34px 28px; } /* ---- /olympiad index ---- */ .oly-index-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:26px;max-width:1080px;margin:0 auto} .oly-index-card{ display:block;background:#fff;border-radius:var(--r);box-shadow:var(--card-sh); padding:26px;text-decoration:none;color:inherit;border-top:4px solid transparent; transition:transform .25s,box-shadow .25s,border-color .25s; } .oly-index-card:hover{transform:translateY(-6px);box-shadow:var(--card-sh-lg);border-top-color:var(--acc)} .oly-index-card h3{margin:10px 0 4px;font-size:1.1rem} .oly-index-foot{margin:14px 0 0;color:var(--a2);font-weight:700} /* ---- course page ---- */ .oly-hero{ background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff; padding:56px 4vw 64px; } .oly-hero-inner{max-width:1080px;margin:0 auto} .oly-back{color:#fff;opacity:.85;display:inline-block;margin-bottom:18px} body.land .oly-hero h1{color:#fff;font-size:clamp(1.8rem,4vw,2.7rem);margin:12px 0 6px} .oly-hero-sub{font-size:1.08rem;opacity:.94;max-width:640px;margin:0 0 8px} .oly-hero-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} .oly-hero-facts span{ background:rgba(255,255,255,.16);border-radius:999px;padding:8px 16px; font:600 .87rem 'Poppins',sans-serif; } .oly-detail-body{padding-top:54px} .oly-ticks{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:10px} .oly-ticks li{position:relative;padding-left:32px;color:var(--ink)} .oly-ticks li::before{ content:"★";position:absolute;left:0;top:-1px;color:var(--acc);font-size:1.05rem; } .oly-ticks.green li::before{content:"✓";color:var(--good)} /* ---- choose a group (detail page) ---- */ .oly-choose{display:flex;flex-direction:column;gap:12px;margin:18px 0 8px} .oly-choice{ display:flex;gap:16px;align-items:center;flex-wrap:wrap;cursor:pointer; background:#fff;border:2px solid var(--line);border-radius:12px;padding:16px 20px; transition:border-color .2s,box-shadow .2s,transform .2s; } .oly-choice:hover{border-color:var(--a2);transform:translateY(-2px)} .oly-choice.on{border-color:var(--a2);box-shadow:0 0 0 4px rgba(212,44,178,.12)} .oly-choice.full{opacity:.55;cursor:not-allowed} .oly-choice.full:hover{border-color:var(--line);transform:none} .oly-choice input{ flex:0 0 auto;width:20px;height:20px;accent-color:var(--a2);margin:0;cursor:inherit; } .oly-choice-body{display:flex;flex-direction:column;gap:3px;flex:1 1 240px} .oly-choice-when{color:var(--ink);font-size:1.02rem} .oly-choice-meta{font-size:.87rem;color:var(--grey)} .oly-choice-dates{font-size:.79rem} .oly-choice-end{display:flex;flex-direction:column;align-items:flex-end;gap:3px;margin-left:auto} .oly-choice-end b{font:700 1.1rem 'Poppins',sans-serif;color:var(--ink)} .oly-choice input:focus-visible{outline:3px solid var(--acc);outline-offset:3px} .oly-buy{position:sticky;top:20px} /* ---- booking modal ---- */ .oly-modal{max-width:520px} .oly-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media (max-width:760px){ .oly-years{padding-left:0} .oly-strip-end{margin-left:0;width:100%} .oly-strip-end .btn-sen{margin-left:auto} .oly-choice-end{margin-left:0;align-items:flex-start;flex-direction:row;gap:12px} .oly-form-row{grid-template-columns:1fr} .oly-buy{position:static} .oly-course-head .btn-ghost-sen{width:100%;text-align:center} } @media (prefers-reduced-motion:reduce){ .oly-strip,.oly-choice,.oly-index-card,.oly-year span{transition:none} .oly-strip:hover,.oly-choice:hover,.oly-index-card:hover,.oly-year:hover span{transform:none} } /* ---- v10.13: hero art collage --------------------------------------------- A slide may carry two extra images that sit BEHIND the main one at opposing angles, so the artwork reads as a stack of screens rather than one flat picture. With no extra images the main art behaves exactly as before. */ .px-banner .image-box.collage{position:relative;min-height:340px;display:grid;place-items:center} .px-banner .image-box.collage .image{position:relative;z-index:2} .px-banner .image-box.collage .image img{max-height:400px} .hero-art-back{ position:absolute;top:8%;z-index:1;width:74%;max-height:none; border-radius:14px;filter:drop-shadow(0 24px 40px rgba(12,6,40,.30)); } .hero-art-back.a{left:-16%;transform:rotate(-6deg)} .hero-art-back.b{right:-18%;transform:rotate(18deg);width:66%} @media (max-width:900px){ .px-banner .image-box.collage{min-height:0} .hero-art-back{display:none} } /* ============================================================ v10.13 — SECTION RHYTHM, CURVES AND TILTS The page ran white → white → white with a single purple band. The reference alternates four surface tones and separates them with curves rather than hard edges, which is most of why it feels designed rather than stacked. Tones are derived from the brand accent so each site keeps its own warmth. ============================================================ */ body.land{ /* v11.2.29: the ramp was 2–3% off white, which on a bright screen is no step at all — the page read as one continuous white plane however many bands it had. Deepened to about 5% and 8%: still quiet, but now visibly a band rather than a suggestion of one. */ --surface-1:#ffffff; /* plain */ --surface-2:#F5F2EE; /* warm off-white */ --surface-3:#EDE8E2; /* sand */ } .land-section.tone-1{background:var(--surface-1)} .land-section.tone-2{background:var(--surface-2)} .land-section.tone-3{background:var(--surface-3)} /* the join between two bands, stated rather than left to the eye */ body.land #how::before,body.land #try-a-question::before,body.land #pricing::before, body.land #faq::before,body.land #finder::before,body.land #mock-bookings::before, body.land #courses::before{border-top:1px solid var(--line);border-bottom:1px solid var(--line)} /* Curved joins. --curve-fill is the colour of the section BELOW, so the curve appears to be that section rising into this one. */ .curve-bottom{position:relative} .curve-bottom::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:70px;z-index:2; pointer-events:none;background:var(--curve-fill,#fff); -webkit-mask:bottom center/100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 Q720,80 1440,0 L1440,80 L0,80 Z' fill='%23000'/%3E%3C/svg%3E"); mask:bottom center/100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 Q720,80 1440,0 L1440,80 L0,80 Z' fill='%23000'/%3E%3C/svg%3E"); } /* the inverse: a dip in the middle, which is what lets a mascot poke through */ .curve-dip::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C480,0 480,80 720,80 C960,80 960,0 1440,0 L1440,80 L0,80 Z' fill='%23000'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C480,0 480,80 720,80 C960,80 960,0 1440,0 L1440,80 L0,80 Z' fill='%23000'/%3E%3C/svg%3E"); } /* ---- the mascot notch ----------------------------------------------------- A mascot image standing in the dip of a curve, clipped so it appears to be peeking over the edge. Set the image in Admin → Site content → Hero; with none set the slot renders nothing at all. */ .mascot-notch{ position:relative;z-index:5;height:0;pointer-events:none;text-align:center; } .mascot-notch img{ position:relative;top:-96px;height:150px;width:auto; filter:drop-shadow(0 14px 26px rgba(12,6,40,.30)); } @media (max-width:760px){ .mascot-notch img{height:104px;top:-66px} } /* ---- card tilts ----------------------------------------------------------- A degree or two, alternating. Enough to look hand-placed; small enough that nothing reads as broken. */ .tilt-a{transform:rotate(-1.2deg)} .tilt-b{transform:rotate(.8deg)} .tilt-c{transform:rotate(-.9deg)} .tilt-a:hover,.tilt-b:hover,.tilt-c:hover{transform:rotate(0) translateY(-4px)} .tilt-a,.tilt-b,.tilt-c{transition:transform .3s ease} /* ---- the closing sky band ------------------------------------------------- A deep night gradient with drifting stars, so the page ends on a strong colour moment instead of trailing off into another white block. */ .sky-band{ position:relative;overflow:hidden;text-align:center;color:#fff; padding:90px 5vw 120px; background: radial-gradient(ellipse 80% 50% at 50% 18%, rgba(143,66,231,.28) 0%, transparent 70%), linear-gradient(180deg,#0a0b2e 0%, var(--a1) 100%); } .sky-band .stars{position:absolute;inset:0;pointer-events:none} .sky-band .stars i{ position:absolute;background:#fff;border-radius:50%; animation:twinkle 3.5s ease-in-out infinite; } @keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}} body.land .sky-band h2{ color:#fff;font-family:'Fraunces','Playfair Display',serif; font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.1;margin:0 0 30px; text-shadow:0 2px 10px rgba(0,0,0,.3); } .sky-band .sky-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap} .sky-band .btn-sky{ display:inline-block;padding:17px 44px;border-radius:999px;cursor:pointer;border:0; font:700 17px 'Poppins',sans-serif;text-decoration:none; background:#fff;color:var(--a1);box-shadow:0 12px 40px rgba(0,0,0,.35); transition:transform .2s,box-shadow .2s; } .sky-band .btn-sky.ghost{ background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.38); backdrop-filter:blur(4px); } .sky-band .btn-sky:hover{transform:translateY(-2px)} .sky-band .sky-note{margin-top:20px;color:rgba(255,255,255,.72);font-size:15px} .sky-band .sky-note a{color:#fff;text-decoration:underline;text-underline-offset:3px} @media (prefers-reduced-motion:reduce){ .sky-band .stars i{animation:none} .tilt-a,.tilt-b,.tilt-c{transition:none} } /* ---- v10.13: the comparison table ---------------------------------------- A saturated band so the argument gets its own colour moment, with the table on a white card floating over it and our column highlighted throughout. */ .cmp-band{ position:relative;overflow:hidden; background: radial-gradient(900px 500px at 12% 0%, rgba(255,255,255,.22), transparent 60%), linear-gradient(135deg, var(--acc) 0%, var(--a2) 45%, var(--a1) 100%); padding-bottom:120px; } body.land .cmp-h2{ color:#fff;font-family:'Fraunces','Playfair Display',serif; font-size:clamp(1.8rem,4vw,3rem);line-height:1.12; text-shadow:0 2px 10px rgba(0,0,0,.22); } .cmp-card{ max-width:1120px;margin:0 auto;background:#fff;border-radius:26px; padding:26px 28px;box-shadow:0 24px 70px rgba(12,6,40,.22);overflow-x:auto; } .cmp-table{width:100%;min-width:720px;border-collapse:collapse} .cmp-table th,.cmp-table td{padding:16px 18px;text-align:left;vertical-align:middle} .cmp-table thead th{ font:700 1.05rem 'Fraunces','Poppins',serif;color:var(--ink);border:0; } .cmp-table tbody th{ font:600 .95rem 'Poppins',sans-serif;color:var(--ink); border-top:1px dashed #dcdce6;width:30%; } .cmp-table tbody td{ font-size:.93rem;color:#5a5a66;border-top:1px dashed #dcdce6; } /* our column: tinted top to bottom with rounded ends */ .cmp-table th.cmp-us,.cmp-table td.cmp-us{ background:color-mix(in srgb, var(--a2) 7%, #fff); color:var(--ink);font-weight:700; } .cmp-table thead th.cmp-us{border-radius:16px 16px 0 0;color:var(--a1)} .cmp-table tbody tr:last-child td.cmp-us{border-radius:0 0 16px 16px} .cmp-yes{color:#12b981;font-size:1.15rem;font-weight:700} .cmp-no{color:#e05252;font-size:1.05rem;opacity:.75} @media (max-width:760px){ .cmp-card{padding:16px;border-radius:18px} .cmp-table th,.cmp-table td{padding:12px 12px;font-size:.86rem} } /* ---- v10.13: applied tone rhythm ----------------------------------------- Assigned by section id so the alternation survives sections being added, removed or reordered in a brand's landing file. The pattern is white → warm → white → sand, broken by the two saturated bands (Olympiad grid, comparison) and the dark closing band. */ body.land #how, body.land #try-a-question, body.land #pricing, body.land #faq{background:var(--surface-2)} body.land #finder, body.land #mock-bookings{background:var(--surface-3)} body.land #courses{background:var(--surface-1)} /* soften the joins between the tinted blocks and their neighbours */ body.land #how{border-top:1px solid rgba(0,0,0,.03)} /* ============================================================ v10.13.1 — fixes found in the browser ============================================================ */ /* 1. The shared button rule was lost when the hero block was rewritten, so "Get started now", "Explore courses" and the comparison CTA all rendered as unstyled browser controls. Restored here as the single definition. */ .btn-hero-primary,.btn-hero-ghost{ display:inline-block;border:0;cursor:pointer;text-decoration:none; padding:15px 34px;border-radius:999px;font:700 15px 'Poppins',sans-serif; transition:transform .2s,box-shadow .2s,background .2s; } .btn-hero-primary{ background:#1a1030;color:#fff;box-shadow:0 12px 28px rgba(16,8,40,.30); } .btn-hero-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(16,8,40,.40)} .btn-hero-ghost{ background:#fff;color:var(--ink);border:1px solid #d9d9e3; box-shadow:0 6px 18px rgba(16,8,40,.10); } .btn-hero-ghost:hover{transform:translateY(-2px);background:#fbfbfd;border-color:#c3c3d2} /* 2. Full-bleed backgrounds. .land-section is a centred 1200px box, so a background set on it painted a stripe down the middle of the page instead of edge to edge. This paints --bleed across the viewport behind the section's own content. */ .bleed-bg{position:relative} .bleed-bg::before{ content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw; background:var(--bleed,transparent);z-index:-1; } body.land #how, body.land #try-a-question, body.land #pricing, body.land #faq{background:none;--bleed:var(--surface-2)} body.land #finder, body.land #mock-bookings{background:none;--bleed:var(--surface-3)} body.land #courses{background:none;--bleed:var(--surface-1)} /* the comparison band and its curve need the same treatment */ .cmp-band{background:none !important;padding-bottom:120px} .cmp-band::before{ content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;z-index:-1; background: radial-gradient(900px 500px at 12% 0%, rgba(255,255,255,.22), transparent 60%), linear-gradient(135deg, var(--acc) 0%, var(--a2) 45%, var(--a1) 100%); } .curve-bottom::after{left:calc(50% - 50vw);right:auto;width:100vw} /* 3. The panel was too transparent — grey body text on lilac was weak. */ .hero-panel{background:rgba(255,255,255,.80)} /* 4. Stickers now clear the panel's content properly. The first pass left the earlier rules further down the file, which won on source order and put badges on top of the proof text. */ .hero-sticker.st-1{top:-28px;left:-30px;right:auto;bottom:auto;transform:rotate(-12deg)} .hero-sticker.st-2{top:32%;left:-32px;right:auto;bottom:auto;transform:rotate(-6deg);animation-delay:-1.6s} .hero-sticker.st-3{top:70%;left:-26px;right:auto;bottom:auto;transform:rotate(4deg);animation-delay:-3.1s} .hero-sticker.st-4{top:-30px;right:-26px;left:auto;bottom:auto;transform:rotate(9deg);animation-delay:-2.2s} .hero-sticker.st-5{top:30%;right:-32px;left:auto;bottom:auto;transform:rotate(16deg);animation-delay:-4.4s} .hero-sticker.st-6{top:72%;right:-26px;left:auto;bottom:auto;transform:rotate(-11deg);animation-delay:-5.5s} .hero-stickers{z-index:20} /* below this width the panel touches the viewport edge, so a sticker hanging off it would be clipped — they are already hidden under 1100px */ @media (max-width:1280px){ .hero-sticker.st-2,.hero-sticker.st-3,.hero-sticker.st-5,.hero-sticker.st-6{display:none} } body.land #try-a-question{background:none;--bleed:var(--surface-2)} /* v10.14.3: the booking form's "you are already signed in" banner — the form asks for account details only when it has none. */ .oly-signed-in{ display:flex;flex-direction:column;gap:2px;margin:0 0 16px;padding:12px 16px; border-radius:12px;background:rgba(18,185,129,.10);border:1px solid rgba(18,185,129,.30); } .oly-signed-in b{color:#0d8a61} .oly-rule{border:0;border-top:1px dashed var(--line);margin:18px 0} /* v10.14.4: the reCAPTCHA widget inside the booking modal */ .oly-captcha{display:flex;justify-content:center;margin:14px 0 4px} .oly-captcha > div{max-width:100%} /* ============================================================ v10.16 — Programmes: hero buttons, home sections, pages ------------------------------------------------------------ Appended IDENTICALLY to landing-sparks.css and landing-bright.css. The two brands own complete, independent stylesheets (v8.2), which is deliberate — but a structural block like this must not diverge, so it is maintained as one file and pasted into both. If you change it, change it in both places. Every rule here is scoped to a programme class, so nothing above is affected. Colour comes from --prog-accent, set per programme in the admin and falling back to the brand colour. ============================================================ */ /* ---------- hero button row ---------- */ .hero-progs{ display:flex;flex-wrap:wrap;justify-content:center;gap:10px; margin:0 auto 28px;max-width:1000px;padding:0 4vw; } .hero-prog{ --prog-accent:var(--acc); display:inline-flex;align-items:center;gap:8px;cursor:pointer; padding:10px 18px;border-radius:999px;border:2px solid var(--line); background:#fff;color:var(--ink); font:600 14px/1 'Poppins',sans-serif; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,color .18s ease; } .hero-prog:hover{transform:translateY(-2px);box-shadow:var(--card-sh);border-color:var(--prog-accent)} .hero-prog.on{ border-color:var(--prog-accent);color:var(--prog-accent); box-shadow:0 8px 20px rgba(34,34,60,.12); } .hero-prog-ico{width:20px;height:20px;object-fit:contain} .hero-prog-ico.is-emoji{font-size:1.05rem;line-height:1} /* v11.2.13: the bottom wave divider is gone. It cut a white curve into the hero, which worked when the hero was a single centred slide and does not now — the tile column runs to the bottom edge and the curve sliced through it. A straight edge also lets the hero end where the content ends rather than reserving 110px for decoration. */ .px-banner::after{content:none} /* v11.2.13 — drawn tile icons and the illustration placeholder. */ .t-ico svg.t-svg{width:19px;height:19px;display:block;color:#fff} .prog-tile.on .t-ico svg.t-svg{color:#fff} .pf-art svg.ph-svg{width:100%;height:auto;max-height:214px;display:block} /* v11.2.14 — the panel illustrations. They lift and fade as the panel changes, and the drawn parts trace in behind that, so a change of programme reads as a movement rather than a jump. Held perfectly still for anyone whose device asks for reduced motion — an animation nobody can switch off is a barrier, not a flourish. */ .pf-art svg.ph-art{width:100%;height:auto;max-height:214px;display:block} :is(.ph-fig,.art-live).on svg.ph-art{animation:ph-rise .7s cubic-bezier(.22,.9,.3,1) both} @keyframes ph-rise{ from{opacity:0;transform:translateY(10px) scale(.985)} to{opacity:1;transform:none} } /* v11.2.24 — the illustrations assemble, one piece at a time. The drawings were authored with a-fade / a-rise / a-pop / a-ring / a-ripple / a-count / a-hand / a-pulse / a-fill classes and a --d delay on every element, and NONE of those rules were ever written. So the only motion was a blanket rule that traced every stroked shape with stroke-dasharray:520 — which on a path longer than 520 units draws a dashed line rather than a whole one, and on a shorter one finishes almost instantly. That is the "too fast, and incomplete" you could see: the choreography was missing and the fallback was wrong. The blanket trace is gone; these are the rules the art was drawn for. */ :is(.ph-fig,.art-live).on svg.ph-art [class^="a-"]{ transform-box:fill-box; transform-origin:center; } :is(.ph-fig,.art-live).on svg.ph-art .a-fade{ opacity:0; animation:a-fade .55s var(--d,0s) ease-out both; } @keyframes a-fade{ from{opacity:0} to{opacity:var(--o,1)} } :is(.ph-fig,.art-live).on svg.ph-art .a-rise{ opacity:0; animation:a-rise .6s var(--d,0s) cubic-bezier(.22,.9,.3,1) both; } @keyframes a-rise{ from{opacity:0;transform:translateY(9px)} to{opacity:var(--o,1);transform:none} } :is(.ph-fig,.art-live).on svg.ph-art .a-pop{ opacity:0; animation:a-pop .5s var(--d,0s) cubic-bezier(.2,1.5,.4,1) both; } @keyframes a-pop{ from{opacity:0;transform:scale(.55)} to{opacity:var(--o,1);transform:none} } /* a ring that draws itself. --len is the circumference, given per drawing; without it the ring simply fades, which is better than a dashed circle. */ :is(.ph-fig,.art-live).on svg.ph-art .a-ring{ animation:a-fade .5s var(--d,0s) ease-out both; } :is(.ph-fig,.art-live).on svg.ph-art .a-count{ stroke-dasharray:var(--len,300); stroke-dashoffset:var(--len,300); animation:a-count 1.5s var(--d,0s) cubic-bezier(.3,.8,.3,1) forwards; } @keyframes a-count{ to{stroke-dashoffset:0} } /* the one thing that repeats: a slow ripple out of the target's centre */ :is(.ph-fig,.art-live).on svg.ph-art .a-ripple{ opacity:0; animation:a-ripple 2.8s var(--d,0s) ease-out infinite; } @keyframes a-ripple{ 0%{opacity:.55;transform:scale(.5)} 70%{opacity:0;transform:scale(1.45)} 100%{opacity:0} } :is(.ph-fig,.art-live).on svg.ph-art .a-pulse{ animation:a-pulse 3.2s var(--d,0s) ease-in-out infinite both; } @keyframes a-pulse{ 0%,100%{opacity:calc(var(--o,1) * .55)} 50%{opacity:var(--o,1)} } /* a clock hand, sweeping once */ :is(.ph-fig,.art-live).on svg.ph-art .a-hand{ animation:a-hand 1.6s var(--d,0s) cubic-bezier(.3,.8,.3,1) both; } @keyframes a-hand{ from{transform:rotate(-120deg)} to{transform:rotate(0)} } /* a bar filling left to right */ :is(.ph-fig,.art-live).on svg.ph-art .a-fill{ transform-origin:left center; animation:a-fill 1.3s var(--d,0s) cubic-bezier(.3,.8,.3,1) both; } @keyframes a-fill{ from{transform:scaleX(0)} to{transform:scaleX(1)} } /* ---- v11.2.27: the classes the rest of the drawings were authored with, and an ambient loop for each, so a slide is alive while it is being shown. Everything here is scoped to .ph-fig.on, so only the visible slide animates — seven idle SVGs looping in the background would cost battery for nothing. */ /* a stroke that draws itself; --len is the path length, given per shape */ :is(.ph-fig,.art-live).on svg.ph-art .a-draw{ stroke-dasharray:var(--len,300); stroke-dashoffset:var(--len,300); animation:a-draw 1.1s var(--d,0s) ease-out forwards; } @keyframes a-draw{ to{stroke-dashoffset:0} } /* an abacus bead slides to its place, then shuttles a hair, for ever */ :is(.ph-fig,.art-live).on svg.ph-art .a-bead{ opacity:0; animation:a-bead .7s var(--d,0s) cubic-bezier(.2,.9,.3,1) both, a-bead-idle 7s calc(var(--d,0s) + 1.2s) ease-in-out infinite; } @keyframes a-bead{ from{opacity:0;transform:translateX(var(--x,0))} to{opacity:var(--o,1);transform:none} } @keyframes a-bead-idle{ 0%,88%,100%{transform:none} 94%{transform:translateX(calc(var(--x,0px) * .06))} } /* TED-Ed: sound levels either side of the microphone, always moving — the picture of a voice, which is the whole programme */ :is(.ph-fig,.art-live).on svg.ph-art .a-lvl-l, :is(.ph-fig,.art-live).on svg.ph-art .a-lvl-r{ opacity:0; } :is(.ph-fig,.art-live).on svg.ph-art .a-lvl-l{ transform-origin:right center; animation:a-fade .5s var(--d,0s) ease-out forwards, a-lvl 1.9s calc(var(--d,0s) + .4s) ease-in-out infinite; } :is(.ph-fig,.art-live).on svg.ph-art .a-lvl-r{ transform-origin:left center; animation:a-fade .5s var(--d,0s) ease-out forwards, a-lvl 2.3s calc(var(--d,0s) + .55s) ease-in-out infinite; } @keyframes a-lvl{ 0%,100%{transform:scaleX(.45)} 45%{transform:scaleX(1)} 70%{transform:scaleX(.7)} } /* Flourish Club: the leaves unfurl from the stem and then sway, out of phase */ :is(.ph-fig,.art-live).on svg.ph-art .a-leaf-l, :is(.ph-fig,.art-live).on svg.ph-art .a-leaf-r{ opacity:0; } :is(.ph-fig,.art-live).on svg.ph-art .a-leaf-l{ transform-origin:100% 100%; animation:a-leaf-in .8s var(--d,0s) cubic-bezier(.2,.9,.3,1) forwards, a-sway 6.5s calc(var(--d,0s) + .8s) ease-in-out infinite; } :is(.ph-fig,.art-live).on svg.ph-art .a-leaf-r{ transform-origin:0% 100%; animation:a-leaf-in .8s var(--d,0s) cubic-bezier(.2,.9,.3,1) forwards, a-sway-alt 7.4s calc(var(--d,0s) + .95s) ease-in-out infinite; } @keyframes a-leaf-in{ from{opacity:0;transform:scale(.2) rotate(-12deg)} to{opacity:var(--o,1);transform:none} } @keyframes a-sway{ 0%,100%{transform:rotate(-2.5deg)} 50%{transform:rotate(2.5deg)} } @keyframes a-sway-alt{ 0%,100%{transform:rotate(2.5deg)} 50%{transform:rotate(-2.5deg)} } /* motes that drift up and down for ever — the only element on any slide that never settles, which is what stops a still drawing looking switched off */ :is(.ph-fig,.art-live).on svg.ph-art .a-float{ opacity:0; animation:a-fade .6s var(--d,0s) ease-out forwards, a-float 5.5s calc(var(--d,0s) + .3s) ease-in-out infinite; } @keyframes a-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} } /* KS3 / GCSE: bubbles rising out of the flask, for ever */ :is(.ph-fig,.art-live).on svg.ph-art .a-bubble{ opacity:0; animation:a-bubble 3.6s calc(var(--d,0s)) ease-in-out infinite; } @keyframes a-bubble{ 0%{opacity:0;transform:translateY(6px) scale(.7)} 25%{opacity:var(--o,1)} 100%{opacity:0;transform:translateY(-26px) scale(1)} } /* A Level: the cap lands, and its tassel keeps swinging */ :is(.ph-fig,.art-live).on svg.ph-art .a-cap{ opacity:0; animation:a-cap .8s var(--d,0s) cubic-bezier(.2,1.3,.4,1) both; } @keyframes a-cap{ from{opacity:0;transform:translateY(-18px) rotate(-8deg)} to{opacity:var(--o,1);transform:none} } :is(.ph-fig,.art-live).on svg.ph-art .a-tassel{ transform-origin:top center; animation:a-tassel 3.4s calc(var(--d,0s) + .6s) ease-in-out infinite; } @keyframes a-tassel{ 0%,100%{transform:rotate(-7deg)} 50%{transform:rotate(7deg)} } /* a second breath for the drawings that only had an entrance: the ripple and the pulse already loop, and these two now do as well */ :is(.ph-fig,.art-live).on svg.ph-art .a-hand{ animation:a-hand 1.6s var(--d,0s) cubic-bezier(.3,.8,.3,1) both, a-hand-idle 12s calc(var(--d,0s) + 1.6s) linear infinite; } @keyframes a-hand-idle{ to{transform:rotate(360deg)} } @media (prefers-reduced-motion:reduce){ :is(.ph-fig,.art-live).on svg.ph-art, :is(.ph-fig,.art-live).on svg.ph-art [class^="a-"]{ animation:none!important; opacity:1; transform:none; stroke-dashoffset:0; } } /* ---------- v11.2: the programme hero (feature panel + tiles) ---------- */ /* Replaces the slide carousel when programmes are configured. Every programme is visible as a tile; the panel rotates and lights the matching tile. The illustration sits against the tile column on purpose — that adjacency is what makes the highlight read as a relationship rather than a coincidence. */ .prog-hero-band{padding:44px 4vw 50px} .prog-hero-in{max-width:1240px;margin:0 auto} .prog-hero-split{ display:grid;grid-template-columns:1.08fr 1fr;gap:24px;align-items:stretch; } .prog-feature{ background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2); border-radius:20px;padding:26px;display:grid;grid-template-columns:1fr 1fr; gap:22px;align-items:center; } .pf-copy{min-width:0} .pf-eyebrow{ /* v11.2.15: state the colour. It set only font and opacity, so it inherited body's grey and rendered dark olive on the purple banner — unreadable, and the first thing on the page. */ color:rgba(255,255,255,.88); font:700 12px/1.4 'Poppins',sans-serif;letter-spacing:.16em;text-transform:uppercase; margin:0 0 10px; } .pf-head{color:#fff;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.15;margin:0} .pf-sub{opacity:.94;font-size:.97rem;margin:12px 0 0;color:#fff} .pf-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} .pf-art{ background:#fff;border-radius:14px;min-height:252px;position:relative;overflow:hidden; box-shadow:var(--card-sh-lg); } .ph-fig{ position:absolute;inset:0;margin:0;display:grid;place-items:center;padding:18px; opacity:0;transform:scale(.985);transition:opacity .5s ease,transform .5s ease; } .ph-fig.on{opacity:1;transform:none} .ph-fig img{max-width:100%;max-height:214px;width:auto;height:auto;display:block} .ph-fig video{max-width:100%;max-height:214px;width:auto;height:auto;display:block} .ph-placeholder{ font:800 68px 'Poppins',sans-serif;color:var(--prog-accent);opacity:.22;line-height:1; } /* the countdown, so rotation is expected rather than startling */ .pf-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:rgba(0,0,0,.06);z-index:2} .pf-bar i{display:block;height:100%;width:0;background:var(--prog-accent,var(--acc))} .pf-bar i.run{animation:pf-fill 5000ms linear forwards} @keyframes pf-fill{from{width:0}to{width:100%}} .prog-tiles-label{ font:700 12px 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase; opacity:.8;margin:0 0 11px;color:#fff; } .prog-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start} .prog-tile{ display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18); border-radius:12px;padding:13px;text-decoration:none;color:#fff;cursor:pointer; transition:background .18s ease,border-color .18s ease,transform .18s ease; } .prog-tile:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)} .prog-tile.on{background:#fff;border-color:#fff;color:var(--ink);box-shadow:var(--card-sh)} .prog-tile.on .t-sub{color:var(--grey)} .prog-tile.on .t-meta{color:var(--prog-accent);opacity:1} .prog-tile.on .t-ico{background:var(--prog-accent);border-color:transparent} .prog-tile.on .t-ico img{filter:brightness(0) invert(1)} .prog-tile.on .t-glyph{color:#fff} .t-ico{ width:36px;height:36px;border-radius:10px;display:grid;place-items:center;margin-top:1px; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2); } .t-ico img{width:20px;height:20px;object-fit:contain;display:block} .t-glyph{font:700 15px 'Poppins',sans-serif;color:#fff;line-height:1} .t-txt{min-width:0} .t-name{display:block;font:600 13.5px/1.3 'Poppins',sans-serif} .t-sub{display:block;font-size:11.5px;line-height:1.4;opacity:.86;margin-top:1px} .t-meta{ display:block;margin-top:6px;font:600 11px 'Poppins',sans-serif; letter-spacing:.04em;text-transform:uppercase;opacity:.72; } @media (max-width:1080px){ .prog-hero-split{grid-template-columns:1fr} } @media (max-width:720px){ .prog-feature{grid-template-columns:1fr} .pf-art{order:-1;min-height:200px} /* the picture leads on a phone */ .prog-hero-band{padding:32px 5vw 38px} } @media (max-width:520px){ .prog-tiles{grid-template-columns:1fr} .t-meta{display:none} } @media (prefers-reduced-motion:reduce){ .ph-fig{transition:none} .pf-bar i.run{animation:none;width:100%} .prog-tile:hover{transform:none} } /* v11.2.1 — the panel headline. `body.land .px-banner h1` sets a 3.9rem serif headline for the old full-width carousel. In the feature panel that headline lives in a HALF width column, so it wrapped to five lines and ran into the illustration. Matched at equal weight here (two classes plus the element) and sized to the column instead. */ body.land .px-banner .prog-feature h1.pf-head{ font-size:clamp(1.5rem,2.1vw,2.15rem);line-height:1.14;letter-spacing:-.01em; text-shadow:0 2px 18px rgba(20,10,60,.18); } /* the underline flourish is sized for a big headline; at this size it crowds the line beneath, so give it room rather than removing it */ body.land .px-banner .prog-feature h1.pf-head .grad::after{bottom:-.1em;height:.14em} .pf-copy{min-width:0;overflow-wrap:break-word} /* the numbers band, under the panel — it belonged to the old hero and should not have been lost with it */ .prog-hero-stats{ display:flex;flex-wrap:wrap;gap:10px;margin-top:18px; } .prog-hero-stats span{ background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff; padding:8px 16px;border-radius:999px;font:600 13px 'Poppins',sans-serif; display:inline-flex;align-items:center;gap:7px; } .prog-hero-stats b{font-weight:700} /* ---------- home-page sections ---------- */ /* v10.16.1: one short row per programme — image 30%, copy 70%, alternating sides down the page. The accordion and the course grid moved to the programme's own page; keeping them here is what made this page a scroll. */ .prog-lead{margin:64px auto 6px} /* v11.2.30: each programme is its own object on the page — a card with an edge and a shadow — rather than a tinted stripe running the full width. The accent bar sits on the card's top edge, and overflow is clipped so a block with its own full-bleed background cannot escape the rounded corners. */ .prog-section{ --prog-accent:var(--acc);position:relative;padding:44px 3vw; max-width:1240px;margin:0 auto 26px;background:#fff; border:1px solid var(--line);border-radius:22px;overflow:hidden; box-shadow:var(--card-sh); transition:box-shadow .25s ease,transform .25s ease; } .prog-section:hover{box-shadow:var(--card-sh-lg)} .prog-section.alt{background:var(--band)} /* a card on a tinted card needs to stay white, or the two merge */ .prog-section.alt .prog-step,.prog-section.alt .course-card{background:#fff} .prog-section::before{ content:"";position:absolute;left:50%;top:0;transform:translateX(-50%); width:96px;height:5px;border-radius:0 0 5px 5px;background:var(--prog-accent); } .prog-row{ display:grid;grid-template-columns:30% 70%;gap:36px;align-items:center; max-width:1120px;margin:0 auto; } .prog-row.no-media{grid-template-columns:1fr;max-width:900px;text-align:center} /* every other row flips: image right, copy left */ .prog-section.alt .prog-row.has-media{grid-template-columns:70% 30%} .prog-section.alt .prog-row.has-media .prog-media{order:2} .prog-section.alt .prog-row.has-media .prog-copy{order:1} .prog-eyebrow{ display:inline-flex;align-items:center;gap:8px;margin-bottom:4px; color:var(--prog-accent);font:700 12px/1 'Poppins',sans-serif; letter-spacing:.12em;text-transform:uppercase; } .prog-row.no-media .prog-eyebrow{justify-content:center} .prog-copy h2{margin:0 0 8px;font-size:clamp(1.4rem,2.6vw,2rem);color:var(--ink)} .prog-summary{margin:0 0 16px;color:var(--grey);max-width:62ch} .prog-row.no-media .prog-summary{margin-left:auto;margin-right:auto} .prog-title-ico{width:18px;height:18px;object-fit:contain} .prog-title-ico.is-emoji{font-size:1rem;line-height:1} .prog-media{margin:0} .prog-media img{ width:100%;border-radius:var(--r);box-shadow:var(--card-sh-lg);display:block; } /* v11.10.5: a picture NOT in a framed gallery keeps its natural height */ .prog-media:not(.art-live) img{ height:auto } .prog-media figcaption{margin-top:6px;text-align:center} .prog-video{ position:relative;width:100%;padding-top:56.25%; border-radius:var(--r);overflow:hidden;box-shadow:var(--card-sh-lg);background:#000; } .prog-video iframe,.prog-video video{ position:absolute;inset:0;width:100%;height:100%;border:0;display:block; } .prog-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px} .prog-row.no-media .prog-ctas{justify-content:center} /* the steps sit inline in the copy column, so they are a compact strip */ .prog-steps{ display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0; } /* v11.2.29: a white card on a white page has only a soft shadow to hold it, which at this scale reads as nothing at all — hence "everything looks white". A hairline costs one line and gives every card an edge on either background. */ .prog-step{ position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--card-sh);padding:16px 14px 14px;text-align:left; } .prog-step-n{ display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%; background:var(--prog-accent);color:#fff;font:700 11px 'Poppins',sans-serif;margin-bottom:6px; } .prog-step-ico{width:24px;height:24px;object-fit:contain;margin-left:6px;vertical-align:middle} .prog-step-ico.is-emoji{font-size:1.1rem;line-height:1;margin-left:6px} .prog-step h4{margin:2px 0 3px;font:600 13px/1.3 'Poppins',sans-serif;color:var(--ink)} .prog-step p{margin:0;color:var(--grey);font-size:.82rem;line-height:1.45} .prog-details{margin-top:18px} .prog-details .acc summary{cursor:pointer} /* ---------- v11.0: custom HTML blocks ---------- */ /* The frame is sandboxed and opaque-origin, so none of this can style its contents — it styles the hole the frame sits in. House styling gets IN via the CSS custom properties copied into the document, not from here. */ /* v11.2.26: the frame is gone — a custom block is part of the page now. Only the full-bleed escape hatch below is still needed. */ /* full-bleed: escape the 1200px container without a horizontal scrollbar */ .prog-section-full{max-width:none;padding-left:0;padding-right:0} .prog-section-full > .prog-inline{width:100%} .prog-page-custom{padding-top:34px;padding-bottom:0} /* ---------- a programme's own page ---------- */ .prog-page{--prog-accent:var(--acc)} .prog-hero{ padding:56px 4vw 52px;text-align:center; background: radial-gradient(1200px 400px at 50% -60%, color-mix(in srgb, var(--prog-accent) 22%, #fff) 0%, transparent 70%), var(--soft); border-bottom:1px solid var(--line); } .prog-hero-inner{max-width:820px;margin:0 auto} .prog-back{display:inline-block;margin-bottom:18px} .prog-hero-ico{width:52px;height:52px;object-fit:contain;display:block;margin:0 auto 10px} .prog-hero-ico.is-emoji{font-size:2.6rem;line-height:1;display:block;margin:0 auto 8px} .prog-hero h1{ font-size:clamp(1.9rem,4.4vw,3rem);margin:6px 0 12px;color:var(--ink);font-weight:800; } .prog-hero-sub{max-width:620px;margin:0 auto;color:var(--grey);font-size:1.05rem} .prog-hero .prog-ctas{justify-content:center;margin-top:24px} .prog-page-body{padding-top:52px} .prog-page-body h2{margin:34px 0 14px;color:var(--ink)} .prog-page-body .prog-body:first-child h2{margin-top:0} /* ============================================================ v11.19.0 — a programme's own page, rethought The hero is a band on the brand gradient, tinted top-right by the programme's own accent (teal for PREP, gold for TED-Ed) so each page is recognisably its programme without leaving the house. Copy left, art right, figures and pledge beneath. The body keeps ONE alignment and ONE heading style, and each section takes the shape of its content. ============================================================ */ .prog-hero.prog-hero-v2{ position:relative;overflow:hidden;isolation:isolate; text-align:left;padding:34px 4vw 44px;border-bottom:0; background: radial-gradient(900px 520px at 12% -10%, rgba(255,255,255,.26), transparent 60%), radial-gradient(760px 620px at 96% 6%, color-mix(in srgb, var(--prog-accent) 62%, transparent), transparent 64%), linear-gradient(128deg, var(--a1) 0%, #6d0b5c 60%, #3a0a38 100%); } /* the same grain the home hero wears, so the gradient does not band */ .prog-hero.prog-hero-v2::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.30; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); } .prog-hero-v2 .prog-hero-inner{position:relative;z-index:1;max-width:1180px} .prog-hero-v2 .prog-back{color:rgba(255,255,255,.86);margin-bottom:22px} .prog-hero-v2 .prog-back:hover{color:#fff} .prog-hero-grid{ display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center; } .prog-hero-copy{min-width:0} .prog-hero-eyebrow{ display:flex;align-items:center;gap:10px;margin:0 0 12px; color:rgba(255,255,255,.9);font:600 14px/1.3 'Poppins',sans-serif; } .prog-hero-v2 .prog-hero-ico{width:30px;height:30px;margin:0;display:inline-block} .prog-hero-v2 .prog-hero-ico.is-emoji{font-size:1.5rem;margin:0} .prog-page .prog-hero-v2 h1{ font-family:'Fraunces','Playfair Display',Georgia,serif; font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:700;line-height:1.06; letter-spacing:-.015em;color:#fff;margin:0 0 14px; text-shadow:0 2px 24px rgba(20,10,60,.22); } .prog-page .prog-hero-v2 .prog-hero-sub{ margin:0;max-width:56ch;color:rgba(255,255,255,.95);font-size:1.08rem;line-height:1.6; } .prog-hero-v2 .prog-ctas{justify-content:flex-start;margin-top:26px} .prog-hero-v2 .btn-ghost-sen{background:#fff;color:var(--ink)} /* the art card: white, framed, the drawn illustration fitted inside */ .prog-hero-art{ margin:0;position:relative;overflow:hidden; background:#fff;border-radius:18px;box-shadow:var(--card-sh-lg); aspect-ratio:16/10.5;display:grid;place-items:center;padding:18px; } .prog-hero-art > svg.ph-art,.prog-hero-art .art-slide > svg.ph-art{width:100%;height:100%} .prog-hero-art > img,.prog-hero-art > video, .prog-hero-art .art-slide > img,.prog-hero-art .art-slide > video{ position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:14px;box-sizing:border-box; } .prog-hero-art .art-slides{position:absolute;inset:0} .prog-hero-art .art-dots{position:absolute;left:0;right:0;bottom:10px;margin:0;z-index:2} /* the figures live in the band with the hero; the chips were styled at v11.2.1, the pledge is new */ .prog-hero-v2 .prog-hero-stats{margin-top:30px} .prog-hero-pledge{ display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start; /* v11.21.1: 10px below the chips — the 26px step read as a gulf on the live page. Written as the longhand so a hand-added margin-top in devtools or a pasted override matches instead of fighting the shorthand. */ margin-top:10px;margin-right:0;margin-bottom:0;margin-left:0; padding:16px 20px;border-radius:16px; background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22); color:#fff;font:500 14px/1.6 'Poppins',sans-serif; } .prog-hero-pledge .prog-pledge-ico{width:18px;height:18px;object-fit:contain;margin-top:3px} .prog-hero-pledge .prog-pledge-ico.is-emoji{font-size:1rem;line-height:1.4} .prog-hero-pledge span{min-width:0} /* v11.24.0 — the pledge can now hold markup, so the band has to behave like a container rather than a paragraph: block children flow, the first and last lose their outer margins so the padding stays even, and links and headings inherit the band's white ink instead of arriving in browser blue. */ .prog-hero-pledge-html .prog-pledge-body{min-width:0} .prog-hero-pledge-html .prog-inline{color:inherit} .prog-hero-pledge-html p,.prog-hero-pledge-html ul,.prog-hero-pledge-html ol{margin:0 0 .6em} .prog-hero-pledge-html > .prog-pledge-body > .prog-inline > *:last-child, .prog-hero-pledge-html p:last-child,.prog-hero-pledge-html ul:last-child{margin-bottom:0} .prog-hero-pledge-html h1,.prog-hero-pledge-html h2,.prog-hero-pledge-html h3, .prog-hero-pledge-html h4{color:#fff;margin:0 0 .4em;font-size:1.05rem;line-height:1.3} .prog-hero-pledge-html a{color:#fff;text-decoration:underline;text-underline-offset:2px} .prog-hero-pledge-html ul,.prog-hero-pledge-html ol{padding-left:1.15em} .prog-hero-pledge-html li{margin:0 0 .25em} .prog-hero-pledge-html img{max-width:100%;height:auto} .prog-hero-pledge-html b,.prog-hero-pledge-html strong{color:#fff} /* ---- the body ---- */ .prog-page-body-v2{padding-top:56px} .prog-sec{margin:0 0 56px} .prog-sec:last-child{margin-bottom:0} .prog-page-body-v2 h2{ margin:0 0 18px;padding-top:14px;position:relative; font-size:clamp(1.45rem,2.6vw,2rem);color:var(--ink);text-align:left; } /* one short accent rule above every heading, in the programme's colour */ .prog-page-body-v2 h2::before{ content:"";position:absolute;left:0;top:0;width:44px;height:4px;border-radius:2px; background:var(--prog-accent); } .prog-what.has-media{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center} .prog-what .prog-copy .rich{max-width:68ch;color:var(--grey);font-size:1.02rem;line-height:1.7} .prog-what .prog-copy .rich p{margin:0 0 14px} .prog-what .prog-copy .rich p:last-child{margin-bottom:0} .prog-what.no-media .prog-copy{max-width:760px} /* the steps: a numbered strip with a line through the numbers, because the content is a sequence — this is the one place numbering earns its keep */ .prog-steps-v2{ list-style:none;margin:0;padding:0;position:relative; display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px; } /* the line runs from each number to the next, and stops at the last */ .prog-step-v2{position:relative;padding-top:0} .prog-step-v2:not(:last-child)::before{ content:"";position:absolute;left:32px;right:-26px;top:15px;height:2px; background:color-mix(in srgb, var(--prog-accent) 32%, #fff); } /* the number sits in a white disc ringed with the accent, so a light accent (TED-Ed gold) still gives a legible digit */ .prog-step-v2 .prog-step-n{ position:relative;z-index:1;width:32px;height:32px;margin:0 0 12px; font-size:13px;background:#fff;color:var(--ink); border:2px solid var(--prog-accent);box-sizing:border-box; } .prog-step-v2 h3{ margin:0 0 6px;font:600 15px/1.35 'Poppins',sans-serif;color:var(--ink); display:flex;align-items:center;gap:8px; } .prog-step-v2 h3 .prog-step-ico{margin:0;width:20px;height:20px} .prog-step-v2 h3 .prog-step-ico.is-emoji{margin:0;font-size:1rem} .prog-step-v2 p{margin:0;color:var(--grey);font-size:.93rem;line-height:1.55;max-width:34ch} /* good to know: a definition list, two up, hairline between rows */ .prog-details-v2{ margin:0;display:grid;grid-template-columns:1fr 1fr;column-gap:40px; } .prog-detail{ padding:16px 0 18px;border-top:1px solid var(--line); } .prog-detail dt{font:600 15px/1.35 'Poppins',sans-serif;color:var(--ink);margin:0 0 4px} .prog-detail dd{margin:0;color:var(--grey);font-size:.95rem;line-height:1.6} @media (max-width:960px){ .prog-hero-grid{grid-template-columns:1fr;gap:26px} .prog-hero-art{max-width:520px} .prog-what.has-media{grid-template-columns:1fr;gap:26px} } @media (max-width:640px){ .prog-hero.prog-hero-v2{padding:26px 5vw 36px} .prog-hero-v2 .prog-ctas .btn-sen,.prog-hero-v2 .prog-ctas .btn-ghost-sen{width:100%;text-align:center;box-sizing:border-box} .prog-hero-pledge{grid-template-columns:1fr;font-size:13.5px;padding:14px 16px} .prog-hero-pledge .prog-pledge-ico{display:none} .prog-step-v2::before{display:none!important} .prog-details-v2{grid-template-columns:1fr} } @media (prefers-reduced-motion:no-preference){ /* one reveal, on load: the art card settles into place once */ .prog-hero-art{animation:prog-art-in .7s cubic-bezier(.22,.9,.3,1) both} @keyframes prog-art-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}} } .prog-others{padding-bottom:70px} .prog-other-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px; max-width:1000px;margin:0 auto; } .prog-other{ display:flex;align-items:center;gap:10px;text-decoration:none; padding:16px 18px;border-radius:var(--r);border:2px solid var(--line);background:#fff; color:var(--ink);font:600 14px 'Poppins',sans-serif; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } .prog-other:hover{transform:translateY(-3px);box-shadow:var(--card-sh);border-color:var(--acc)} .prog-other-ico{width:22px;height:22px;object-fit:contain} .prog-other-ico.is-emoji{font-size:1.2rem;line-height:1} /* ---------- TED-Ed: session dates, then the registration form ---------- v12.32.0 — one above the other, up to 1400px wide (was side by side at 1100px). The dates tile across the width, so a handful of sessions sits in a row or two instead of a long column above the form. */ .ted-block{padding-top:40px;padding-bottom:64px} /* .land-section caps at 1200px; let this one reach 1400px of content */ .land-section.ted-block{max-width:calc(1400px + 8vw)} .ted-stack{max-width:1400px;margin:0 auto;display:flex;flex-direction:column;gap:32px} .ted-stack h3{margin:0 0 16px;color:var(--ink)} .ted-stack-dates .ted-dates{ display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;margin-bottom:0; } /* the anchor for /ted-ed#teded-register: clear the sticky top bar */ #teded-register,#register{scroll-margin-top:96px} .ted-dates{display:flex;flex-direction:column;gap:12px;margin-bottom:16px} .ted-date{ display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center; background:#fff;border-radius:var(--r);box-shadow:var(--card-sh);padding:14px 18px; border-left:4px solid var(--prog-accent,var(--acc)); } .ted-date-when{display:flex;flex-direction:column;min-width:132px} .ted-date-when b{color:var(--ink);font:600 14px 'Poppins',sans-serif} .ted-date-when span{color:var(--grey);font-size:.86rem} .ted-date-what{display:flex;flex-direction:column;gap:2px} .ted-date-what b{color:var(--ink);font:600 14px 'Poppins',sans-serif} .ted-form-card{ background:#fff;border-radius:var(--r);box-shadow:var(--card-sh-lg);padding:28px 26px; } .ted-form .field{display:block;margin-bottom:12px} .ted-consent-head{margin:22px 0 6px;color:var(--ink);font:600 15px 'Poppins',sans-serif} .ted-consents{ display:flex;flex-direction:column;gap:10px;margin:12px 0 16px; background:var(--soft);border-radius:var(--r);padding:16px 18px; } .ted-consents .consent-row{align-items:flex-start;gap:10px} .ted-form .form-err{color:#C2410C;font-weight:600} /* ---------- responsive ---------- */ @media (max-width:900px){ .prog-row.has-media, .prog-section.alt .prog-row.has-media{grid-template-columns:1fr;gap:22px} /* on one column the image always leads, whichever side it took on desktop */ .prog-section.alt .prog-row.has-media .prog-media{order:1} .prog-section.alt .prog-row.has-media .prog-copy{order:2} .ted-stack{gap:24px} } @media (max-width:640px){ .hero-progs{gap:8px;margin-bottom:20px} .hero-prog{padding:9px 14px;font-size:13px} .prog-section{padding:32px 5vw} .prog-hero{padding:40px 5vw 38px} .ted-date{grid-template-columns:1fr;gap:6px} .ted-form-card{padding:22px 18px} } @media (prefers-reduced-motion:reduce){ .hero-prog,.prog-step,.prog-other{transition:none} .hero-prog:hover,.prog-step:hover,.prog-other:hover{transform:none} } /* v11.2.13 — built-in line icons on the landing pages too. */ svg.ic{width:1.05em;height:1.05em;vertical-align:-0.15em;flex:none;display:inline-block;margin-right:.12em} h1 svg.ic,h2 svg.ic,h3 svg.ic{width:1em;height:1em;vertical-align:-0.1em} /* ============================================================ v11.2.19 — programme page blocks Every colour comes from --prog-accent, set per programme by the admin, so MOSAIC reads navy-and-gold and TED-Ed amber without either hard-coding one. ============================================================ */ .prog-blocks{display:block;padding-top:10px} .pb{margin:0 0 64px} .pb:last-child{margin-bottom:10px} .pb-title{text-align:center;font-size:clamp(1.5rem,3.2vw,2.1rem);margin:0 0 10px} .pb-lead{text-align:center;max-width:46ch;margin:0 auto 34px;color:var(--grey)} /* facts */ .pb-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .pb-chip{font:500 12.5px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.05em;color:var(--ink); background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 16px} .pb-chip b{color:var(--prog-accent)} /* strategies */ .pb-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px} .pb-tile{border:0;cursor:pointer;text-align:left;padding:20px 18px;border-radius:14px;background:var(--soft); color:var(--ink);font-family:'Poppins',sans-serif;display:block; transition:transform .18s cubic-bezier(.2,.9,.3,1),background .18s,color .18s,box-shadow .18s} .pb-tile:hover{transform:translateY(-4px);box-shadow:var(--card-sh)} .pb-tile.on{background:var(--prog-accent);color:#fff;transform:translateY(-4px);box-shadow:var(--card-sh)} .pb-glyph{width:26px;height:26px;display:block;margin-bottom:12px;color:var(--prog-accent)} .pb-tile.on .pb-glyph{color:#fff} .pb-tile-n{display:block;font:700 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.16em;opacity:.65;margin-bottom:6px} .pb-tile-name{display:block;font:700 15px/1.3 'Poppins',sans-serif} .pb-detail{margin-top:16px;background:var(--soft);border-radius:16px;padding:24px 26px; display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center} .pb-detail-n{font:400 2.8rem/1 'JetBrains Mono',monospace;color:var(--prog-accent);letter-spacing:-.04em} .pb-detail h3{margin:0 0 6px;font-size:1.15rem} .pb-detail p{margin:0;color:var(--grey)} /* journey */ .pb-stops{list-style:none;margin:0;padding:0;max-width:820px;margin-inline:auto} .pb-stop{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:20px 22px;background:#fff; border:1px solid var(--line);border-radius:16px;margin-bottom:10px;box-shadow:var(--card-sh)} .pb-stop-n{font:700 1.3rem/1 'JetBrains Mono',monospace;color:var(--prog-accent)} .pb-stop b{display:block;font:700 1.02rem/1.3 'Poppins',sans-serif;color:var(--ink)} .pb-stop p{margin:6px 0 0;font-size:.94rem} .pb-who{display:inline-block;margin-top:6px;font:600 10.5px/1 'JetBrains Mono',monospace; letter-spacing:.14em;text-transform:uppercase;color:var(--prog-accent)} .pb-stop.is-parent{border-color:var(--acc)} .pb-stop.is-parent .pb-stop-n,.pb-stop.is-parent .pb-who{color:var(--acc)} /* pathway */ .pb-rungs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px} .pb-rung{background:#fff;border:2px solid var(--line);border-radius:18px;padding:24px} .pb-rung.top{border-color:var(--prog-accent)} .pb-step{font:700 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--prog-accent)} .pb-rung h3{margin:10px 0 8px;font-size:1.05rem} .pb-rung p{margin:0;font-size:.92rem} .pb-specs{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px} .pb-specs span{font:500 10.5px/1 'JetBrains Mono',monospace;padding:8px 11px;border-radius:999px;background:var(--soft)} /* routes */ .pb-route-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px} .pb-route{border-radius:18px;padding:26px;color:#fff;background:var(--prog-accent)} .pb-route.r1{background:linear-gradient(150deg,var(--a1),var(--a2))} .pb-route b{display:block;font:800 1.2rem/1.25 'Poppins',sans-serif;margin-bottom:8px} .pb-route p{color:rgba(255,255,255,.86);font-size:.93rem} .pb-route ol{margin:12px 0 0;padding:0;list-style:none;counter-reset:pb} .pb-route li{counter-increment:pb;position:relative;padding:9px 0 9px 32px;font-size:.92rem; border-top:1px solid rgba(255,255,255,.2)} .pb-route li:first-child{border-top:0} .pb-route li::before{content:counter(pb,decimal-leading-zero);position:absolute;left:0;top:11px; font:500 10.5px/1 'JetBrains Mono',monospace;opacity:.8} .pb-note{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.2);font-size:.85rem} /* try a problem */ .pb-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px; box-shadow:var(--card-sh);max-width:780px;margin:0 auto 14px} .pb-q{font:600 1.1rem/1.5 'Open Sans',sans-serif;color:var(--ink);margin:0 0 16px} .pb-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px} .pb-opt{display:flex;align-items:center;gap:10px;border:2px solid var(--line);background:#fff; border-radius:12px;padding:14px 14px;cursor:pointer;font:600 14px/1.3 'Open Sans',sans-serif; color:var(--ink);text-align:left;transition:all .15s} .pb-opt:hover:not(:disabled){border-color:var(--prog-accent);transform:translateY(-2px)} .pb-key{font:700 12px/1 'JetBrains Mono',monospace;color:var(--grey)} .pb-opt.right{background:#e9fbf4;border-color:#17DA9B;color:#0b6b4d} .pb-opt.right .pb-key{color:#0b6b4d} .pb-opt.wrong{background:var(--soft2);border-color:var(--acc);color:var(--acc)} .pb-why{display:none;margin-top:16px;padding:16px 18px;border-radius:12px;background:var(--soft); border-left:4px solid var(--prog-accent)} .pb-why.show{display:block} .pb-why b{display:block;font:700 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.16em; text-transform:uppercase;color:var(--prog-accent);margin-bottom:8px} .pb-why p{margin:0;font-size:.94rem;color:var(--ink)} /* ledger */ .pb-bar{display:flex;height:18px;border-radius:999px;overflow:hidden;background:var(--soft);max-width:760px;margin:0 auto} .pb-bar span{display:block;height:100%;background:var(--prog-accent);opacity:calc(1 - (var(--i) * .18))} .pb-key-row{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:center;margin-top:14px} .pb-key-row i{font:500 12px/1 'JetBrains Mono',monospace;font-style:normal;color:var(--grey); display:inline-flex;align-items:center;gap:8px} .pb-key-row i::before{content:"";width:11px;height:11px;border-radius:3px;background:var(--prog-accent); opacity:calc(1 - (var(--i) * .18))} @media (max-width:640px){ .pb-detail{grid-template-columns:1fr;gap:8px} .pb-stop{grid-template-columns:40px 1fr;gap:12px} } @media (prefers-reduced-motion:reduce){.pb-tile,.pb-opt{transition:none}} /* v11.2.20 — the programme's monthly plan */ .prog-plan{padding-top:10px} .plan-card{display:grid;grid-template-columns:1.4fr .6fr;gap:0;border:2px solid var(--line); border-radius:22px;overflow:hidden;background:#fff;box-shadow:var(--card-sh)} .plan-main{padding:32px 34px} .plan-eyebrow{font:700 11px/1 'JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase; color:var(--prog-accent);margin:0 0 10px} .plan-main h2{margin:0 0 8px;font-size:clamp(1.3rem,2.6vw,1.8rem)} .plan-blurb{color:var(--grey);margin:0 0 16px} .plan-inc-title{font:600 13px/1 'Poppins',sans-serif;color:var(--ink);margin:0 0 10px} .plan-inc{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:7px} .plan-inc li{position:relative;padding-left:26px;font-size:.94rem} .plan-inc li::before{content:"";position:absolute;left:0;top:8px;width:12px;height:12px;border-radius:4px; background:var(--prog-accent)} .plan-buy{background:var(--soft);padding:32px 28px;display:flex;flex-direction:column;justify-content:center; border-left:2px solid var(--line)} .plan-price{font:800 2.6rem/1 'Poppins',sans-serif;color:var(--ink);margin:0 0 16px;letter-spacing:-.03em} .plan-price span{font:600 .95rem/1 'Poppins',sans-serif;color:var(--grey)} .btn-block{display:block;width:100%;text-align:center} @media (max-width:820px){ .plan-card{grid-template-columns:1fr} .plan-buy{border-left:0;border-top:2px solid var(--line)} } /* v11.2.21a — timetable, day tabs and the included grid */ .pb-week{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 20px;box-shadow:var(--card-sh)} .pb-week-head{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:8px} .pb-week-head span{font:500 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase; color:#B4B0C8;text-align:center} .pb-week-row{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:8px} .pb-slot{min-height:58px;border-radius:12px;background:var(--soft);display:flex;flex-direction:column; align-items:center;justify-content:center;gap:3px;padding:6px 4px;text-align:center} .pb-slot.on{background:linear-gradient(150deg,var(--a1),var(--a2));color:#fff} .pb-slot.on b{font:700 12px/1.2 'Poppins',sans-serif} .pb-slot.on i{font:500 9px/1 'JetBrains Mono',monospace;font-style:normal;letter-spacing:.08em;opacity:.85} .pb-slot.repeat{background:#fff;border:2px dashed var(--prog-accent)} .pb-slot.repeat b{font:700 10px/1.2 'JetBrains Mono',monospace;letter-spacing:.06em;color:var(--prog-accent); text-transform:uppercase} .pb-week-note{margin:14px 0 0;padding:13px 16px;border-radius:12px;background:var(--soft); text-align:center;font-size:.93rem} .pb-week-note b{color:var(--ink)} .pb-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:18px} .pb-tab{border:2px solid var(--line);background:#fff;cursor:pointer;border-radius:999px;padding:12px 22px; font:600 .88rem/1 'Poppins',sans-serif;color:var(--grey);transition:all .18s} .pb-tab:hover{border-color:var(--prog-accent);color:var(--prog-accent)} .pb-tab.on{background:linear-gradient(90deg,var(--a1),var(--a2));border-color:transparent;color:#fff; box-shadow:0 8px 20px rgba(0,0,0,.14)} .pb-panel{display:none;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--card-sh); padding:30px 32px;grid-template-columns:1fr 1fr;gap:34px} .pb-panel.on{display:grid} .pb-when{font:700 11px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase; color:var(--prog-accent);margin:0 0 8px} .pb-panel h3{margin:0 0 12px;font-size:1.25rem} .pb-subj{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px} .pb-subj span{font:600 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase; padding:8px 11px;border-radius:999px;background:var(--soft);color:var(--ink)} .pb-flow{list-style:none;margin:0;padding:0} .pb-flow li{position:relative;padding:0 0 18px 34px;border-left:2px dashed var(--line);margin-left:9px} .pb-flow li:last-child{border-left-color:transparent;padding-bottom:0} .pb-flow li::before{content:"";position:absolute;left:-10px;top:2px;width:18px;height:18px;border-radius:999px; background:#fff;border:2px solid var(--prog-accent)} .pb-flow li.is-parent::before{background:var(--acc);border-color:var(--acc)} .pb-flow b{display:block;color:var(--ink);font:600 .98rem/1.4 'Open Sans',sans-serif} .pb-flow span{font-size:.9rem;line-height:1.6} .pb-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px} .pb-card-item{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--card-sh)} .pb-badge{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px; border-radius:12px;background:var(--soft);color:var(--a1);font:700 13px/1 'JetBrains Mono',monospace; margin-bottom:14px} .pb-card-item b{display:block;font:700 1.02rem/1.3 'Poppins',sans-serif;color:var(--ink);margin-bottom:6px} .pb-card-item p{margin:0;font-size:.92rem} @media (max-width:820px){ .pb-panel.on{grid-template-columns:1fr;gap:20px} .pb-week{overflow-x:auto} .pb-week-head,.pb-week-row{min-width:640px} } /* ============================================================ v11.2.22 — a designed page, with the enrolment rail beside it ============================================================ */ .prog-page-custom.with-rail{padding-left:0;padding-right:0;max-width:none} /* v11.2.28: one column by default. The rail's column is only reserved when there is a rail — a programme with no plan and no mapped courses used to leave a 360px hole down the right of its page. */ .prog-canvas{display:grid;grid-template-columns:minmax(0,1fr);gap:26px; max-width:1700px;margin:0 auto;padding:0 24px;align-items:start} /* v12.25.0 — there is no rail on a programme page any more: the courses are a full-width band between two bands of custom HTML. The rule is kept as a single column so any page still carrying the class is not left broken. */ .prog-canvas.has-rail{grid-template-columns:minmax(0,1fr)} .prog-canvas.no-rail{max-width:1280px} .prog-canvas > .prog-inline{width:100%;min-width:0} .prog-rail{position:sticky;top:88px} .rail-card{background:#fff;border:2px solid var(--line);border-radius:22px;padding:26px 24px; box-shadow:var(--card-sh)} .rail-eyebrow{font:700 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase; color:var(--prog-accent);margin:0 0 8px} .rail-card h3{margin:0 0 14px;font-size:1.15rem} .rail-price{font:800 2.3rem/1 'Poppins',sans-serif;color:var(--ink);margin:0 0 14px;letter-spacing:-.03em} .rail-price span{font:600 .9rem/1 'Poppins',sans-serif;color:var(--grey)} .rail-price.rail-free{color:var(--prog-accent)} .rail-note{font-size:.82rem;color:var(--grey);margin:10px 0 0;line-height:1.55} .rail-inc{font:600 12px/1 'Poppins',sans-serif;color:var(--ink);margin:20px 0 10px; padding-top:16px;border-top:1px solid var(--line)} /* when the designed page carries the price and the button, the rail is only the course list — no rule above it, no wasted padding */ .rail-inc.first{margin-top:0;padding-top:0;border-top:0} .rail-courses li{padding:10px 0 10px 22px;border-bottom:1px solid var(--line)} .rail-courses li:last-child{border-bottom:0} .rail-courses li::before{top:16px} .rail-courses{list-style:none;margin:0;padding:0;display:grid;gap:9px} .rail-courses li{position:relative;padding-left:22px;font-size:.92rem;line-height:1.45} .rail-courses li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;border-radius:3px; background:var(--prog-accent)} .rail-courses a{color:var(--ink);text-decoration:none;font-weight:600} .rail-courses a:hover{color:var(--prog-accent)} .rail-courses span{display:block;font-size:.8rem;color:var(--grey)} .prog-back-float{display:inline-block;margin:18px 0 0 24px} @media (max-width:1160px){ .prog-canvas,.prog-canvas.has-rail{grid-template-columns:1fr} .prog-rail{position:static;order:2;max-width:520px;margin:0 auto;width:100%} } /* v11.2.23 — a designed page rendered directly, not in a frame. The wrapper is the block's own root: its CSS was rewritten to target this element wherever it said html, body or :root. */ .prog-inline{min-width:0} .prog-inline img,.prog-inline svg,.prog-inline video{max-width:100%} .prog-inline *{box-sizing:border-box} /* v11.2.23a — the rail's course cards, one per row */ .rail-cards{display:grid;gap:14px;margin-top:14px} .rail-cards .course-card{width:100%;margin:0} .rail-cards .course-card .course-thumb img,.rail-cards .course-card .course-thumb{max-height:130px;overflow:hidden} .rail-cards .course-card .course-thumb img{width:100%;height:130px;object-fit:cover} .rail-cards .course-card .course-body{padding:16px 16px 18px} .rail-cards .course-card h3{font-size:1rem;line-height:1.3} .rail-cards .course-card .rich-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical; overflow:hidden} .rail-foot{margin-top:12px;padding:0 4px} @media (max-width:1200px){ } /* ============================================================ v11.2.29 — bands, so a long page has a rhythm The page was white from top to bottom: white background, white cards, and an alternating tint two per cent away from white that nobody could see. The answer is not to grey the whole site — an all-grey page relocates the flatness rather than removing it, and white is still the right background to read a paragraph on. It is contrast BETWEEN things that was missing. So: full-width sections alternate white and --band, each band edged with a hairline; and every card carries a hairline of its own so it has an edge on either background. ============================================================ */ .land-band{ background:var(--band); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .land-band + .land-band{border-top:0} /* a card sitting on a band goes pure white, so the two never merge */ .land-band .course-card,.land-band .prog-step,.land-band .rail-card{background:#fff} /* v11.2.30: a pasted block inside a programme card already has its own section padding — the card must not add a second helping, and the block's own tint should fill the card rather than sit in a white margin. */ .prog-section .prog-inline > .sx{padding-left:0;padding-right:0} .prog-section .prog-inline > .sx.alt{ background:transparent; /* the card carries the tint */ } .prog-section > .prog-inline{margin:-44px -3vw;padding:0} .prog-section > .prog-inline > .sx{padding:44px 3vw} /* ============================================================ v11.2.32 — a grey page, and what has to change with it With the canvas at #E4E4E4 every white surface reads as an object. Three things follow, or the page turns into grey soup: 1. Sections meant to be READ keep a white sheet. A paragraph set in grey text on a grey page is the one thing this change could break. 2. Bands that were "white vs almost-white" are now "white vs grey", so the old tints are redundant — tone-2 and tone-3 become white sheets too, distinguished by the gap between them rather than by tint. 3. Every full-width sheet needs a radius and an edge, or the grey shows through as stripes rather than as a background. ============================================================ */ body.land .land-section:not(.wide):not(.cmp-band):not(.bleed-bg){ background:#fff;border:1px solid var(--line);border-radius:22px; box-shadow:var(--card-sh);margin:0 auto 26px; } body.land .land-section.tone-2, body.land .land-section.tone-3{background:#fff} /* the bleed sections paint their own full-width colour; on grey they need to be white rather than an almost-white tint */ body.land #how,body.land #try-a-question,body.land #pricing,body.land #faq, body.land #finder,body.land #mock-bookings,body.land #courses{--bleed:#fff} /* the footer sits on the grey directly, and is dark anyway */ body.land .land-footer{margin-top:26px} /* v11.8.12 — a ghost button with nothing in it is nothing to show. Targets only genuinely empty anchors; real buttons with labels are untouched. */ a.btn-ghost-sen:empty{ display:none } /* ============================================================ v11.10.0 — the showcase row, ONCE. Seven hand-written sections each shipped their own near-identical copy of this stylesheet and its script — roughly 100KB of duplication, and seven places to edit when the design moved. The design is the same in all of them, so it lives here, once, and the sections carry only content. ============================================================ */ .sx{position:relative;padding:86px 4vw;overflow:hidden; font:400 15px/1.8 'Open Sans','Segoe UI',system-ui,sans-serif;color:var(--grey,#777)} .sx.alt{background:var(--soft,#faf9ff)} .sx::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%); width:78px;height:4px;border-radius:0 0 4px 4px;background:var(--prog-accent,var(--acc))} .sx h2{font-family:'Poppins',sans-serif;font-weight:700;color:var(--ink,#222);line-height:1.15;margin:0; /* v11.10.6: never larger than 1.9rem — the row heading sits under the page's own headings, it does not compete with them */ font-size:clamp(1.14rem,2.4vw,1.9rem);letter-spacing:-.02em;margin-bottom:14px} .sx p{margin:0} .sx-row{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .sx.flip .sx-art{order:-1} .sx .eyebrow{display:inline-flex;align-items:center;gap:9px;font:500 .72rem/1 'JetBrains Mono',monospace; letter-spacing:.22em;text-transform:uppercase;color:var(--prog-accent,var(--acc));margin-bottom:16px} .sx .eyebrow::before{content:"";width:26px;height:2px;background:currentColor;border-radius:2px; transform:scaleX(0);transform-origin:left;transition:transform .6s .1s cubic-bezier(.2,.8,.3,1)} .sx.go .eyebrow::before{transform:scaleX(1)} .sx .summary{max-width:44ch;font-size:1.02rem} .sx-copy > *{opacity:0;transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)} .sx.go .sx-copy > *{opacity:1;transform:none} .sx.go .sx-copy > *:nth-child(1){transition-delay:.05s} .sx.go .sx-copy > *:nth-child(2){transition-delay:.13s} .sx.go .sx-copy > *:nth-child(3){transition-delay:.21s} .sx.go .sx-copy > *:nth-child(4){transition-delay:.29s} .sx.go .sx-copy > *:nth-child(5){transition-delay:.37s} .sx .facts{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px} .sx .fact{font:500 .76rem/1 'JetBrains Mono',monospace;letter-spacing:.05em;color:var(--ink,#222); background:#fff;border:1px solid var(--line,#eee);border-radius:999px;padding:11px 16px} .sx .fact b{color:var(--prog-accent,var(--acc));font-weight:700} .sx .ctas{display:flex;gap:12px;flex-wrap:wrap} .sx-art{position:relative;perspective:1200px} .sx .art-card{background:#fff;border:1px solid var(--line,#eee);border-radius:26px;padding:26px; box-shadow:var(--card-sh-lg,0 18px 50px rgba(20,15,46,.12));opacity:0;transform:translateY(30px) rotateX(6deg); transition:opacity .8s cubic-bezier(.2,.8,.3,1),transform .8s cubic-bezier(.2,.8,.3,1)} .sx.go .art-card{opacity:1;transform:none} /* v11.10.5: no height here — the frame below owns it. :where() keeps this at zero specificity so nothing has to out-shout it. */ :where(.sx .art-card) :where(svg,img,video){display:block;width:100%;border-radius:14px} .sx-art::after{content:"";position:absolute;inset:12% -6% -8% 6%;z-index:-1;border-radius:40px; background:radial-gradient(60% 60% at 50% 50%,var(--prog-accent,var(--acc)),transparent 70%); opacity:0;filter:blur(46px);transition:opacity 1s .2s ease} .sx.go .sx-art::after{opacity:.28} /* the art gallery: one frame, several pictures, dots underneath */ .art-slides{position:relative} .art-slide{display:none} .art-slide.on{display:block;animation:art-in .45s ease} @keyframes art-in{from{opacity:0}to{opacity:1}} .art-dots{display:flex;gap:7px;justify-content:center;margin-top:14px} .art-dot{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer; background:var(--line,#ddd);transition:background .2s,transform .2s} .art-dot.on{background:var(--prog-accent,var(--acc));transform:scale(1.25)} .art-nav{position:absolute;top:50%;transform:translateY(-50%);border:0;cursor:pointer; width:34px;height:34px;border-radius:50%;background:#fff;color:var(--ink,#222); box-shadow:0 4px 14px rgba(0,0,0,.14);font-size:17px;line-height:1;opacity:0;transition:opacity .2s} .sx-art:hover .art-nav,.pf-art:hover .art-nav{opacity:1} .art-prev{left:-10px} .art-next{right:-10px} @media (max-width:900px){ .sx-row{grid-template-columns:1fr;gap:34px} .sx.flip .sx-art{order:0} } @media (prefers-reduced-motion:reduce){ .sx *{animation:none!important;transition:none!important} .sx-copy > *,.sx .art-card{opacity:1!important;transform:none!important} } /* v11.10.1 — "art on the left" in the older row layout too */ .prog-row.flip .prog-media{ order:-1 } .prog-row.flip .prog-copy{ order:0 } /* v11.10.3 — a drawing that animates OUTSIDE the hero. v11.10.2 reused .ph-fig to switch the animations on, but that class is a hero SLIDE: absolutely positioned and hidden until it is the one on show. Borrowing it took the row's picture out of the flow and then hid it. This class carries the animation gate and nothing else. */ .art-live{ margin:0; position:relative } /* v11.10.4 — one frame, whatever is dropped into it. A 900px screenshot and a 2400px photo used to make the row two different heights, so the page jumped as the slider turned. The frame is now a fixed height and the picture is fitted INSIDE it — contain, never crop, so a whole mock paper stays readable and nothing is cut off. */ .art-live img,.art-live video,.art-live svg, .sx .art-card .art-live img,.sx .art-card .art-live video,.sx .art-card .art-live svg{ display:block; margin:0 auto; width:100%; height:clamp(200px,24vw,300px); object-fit:contain } .art-live .art-slides,.art-live .art-slide{ min-height:clamp(200px,24vw,300px) } /* the home row's summary may carry its own HTML — give it room to breathe */ .sx .summary{ max-width:60ch } .sx .summary p{ margin:0 0 10px } .sx .summary img{ max-width:100% ; height:auto } /* v12.25.0 — the courses band: the middle of a programme page. The cards were 440px wide in a rail, one per row; here they sit three or four across on a laptop and fall to one on a phone. */ .prog-courses-band{ text-align:left; } .prog-courses-band .band-cta{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin:0 0 18px; } .prog-courses-band .band-price{ margin:0; font-size:1.6rem; font-weight:800; } .prog-courses-band .band-price span{ font-size:.95rem; font-weight:600; color:var(--grey); } .prog-courses-band .band-cards{ display:grid; gap:18px; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); } .prog-courses-band .band-foot{ margin-top:12px; } @media (max-width:620px){ .prog-courses-band .band-cards{ grid-template-columns:1fr; } } /* v12.26.0 — a hidden contents line keeps its space. display:none would pull every card up by two lines, so a grid with one hidden card would sit out of step with the rest. visibility:hidden leaves the box exactly where it was, which is the whole point of the setting. */ .facts-hidden{ visibility:hidden; } /* v12.29.0 — the TED-Ed registration & consent form */ .ted-intake .ted-sec{ border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:12px 14px 6px; margin:0 0 12px; } .ted-intake .ted-sec legend{ font-weight:700; padding:0 6px; } .ted-intake .form-row{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; } .ted-intake .consent-row{ display:flex; gap:10px; align-items:flex-start; margin:0 0 8px; line-height:1.45; } .ted-intake .consent-row input{ margin-top:4px; flex:0 0 auto; } .ted-intake .req{ color:#D22CB2; } .ted-intake .ted-when{ margin:0 0 12px; } .ted-intake input[readonly]{ background:rgba(0,0,0,.03); } .ted-thanks{ padding:18px 20px; border-radius:16px; background:#ECFDF5; border:1px solid #A7F3D0; } .ted-thanks h3{ margin:0 0 8px; } .ted-thanks p{ margin:0 0 8px; } /* v12.60.0: exam board chips and course-type rows */ .board-chips{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin:-18px 0 34px} .board-label{font-size:.82rem;font-weight:700;color:var(--muted,#6b6b80);margin-right:4px} .board-chip{border:1.5px solid rgba(0,0,0,.12);background:#fff;border-radius:999px;padding:6px 14px;font:inherit;font-size:.86rem;font-weight:700;color:inherit;cursor:pointer} .board-chip:hover{border-color:var(--acc);color:var(--acc)} .board-chip.on{border-color:var(--a1);background:var(--a1);color:#fff} .course-groups{display:flex;flex-direction:column;gap:46px} .course-group-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 18px;padding-bottom:10px;border-bottom:2px solid rgba(0,0,0,.07)} .course-group-head h3{margin:0;font-size:1.35rem} .course-group-head p{margin:0;color:var(--muted,#6b6b80);font-size:.95rem} .course-none{text-align:center;color:var(--muted,#6b6b80)} @media (max-width:680px){.board-chips{margin-top:-24px}.course-groups{gap:34px}} .course-group{scroll-margin-top:96px} /* v12.61.0: clear the sticky top bar when the menu jumps here */ /* ---------- v12.87.0 · Meet Ray and Sparky (the mascot video band) ---------- */ .mv-band { padding-top: 24px; padding-bottom: 24px; } .mv-card { max-width: 1200px; margin: 0 auto; background: #fff; border-radius: 28px; padding: clamp(20px, 4vw, 48px); box-shadow: 0 20px 50px rgba(30, 20, 80, .08); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(18px, 3vw, 40px); align-items: center; } .mv-kick { font-family: Poppins, sans-serif; font-weight: 600; font-size: 15px; color: #D22CB2; margin: 0 0 6px; } .mv-copy h2 { font-family: Poppins, sans-serif; font-weight: 800; color: #1B1640; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; margin: 0 0 14px; text-wrap: balance; } .mv-copy h2 em { font-style: italic; font-family: "Playfair Display", Georgia, serif; font-weight: 700; padding-right: 4px; background: linear-gradient(90deg, #3F27BD, #D22CB2); -webkit-background-clip: text; background-clip: text; color: transparent; } .mv-lead { font-size: 18px; line-height: 1.6; margin: 0 0 20px; max-width: 46ch; color: #3E3E4A; } .mv-play { font-size: 16px; } .mv-media { position: relative; border-radius: 20px; overflow: hidden; background: #fff; aspect-ratio: 16 / 9; max-width: 100%; } .mv-media video { display: block; width: 100%; height: 100%; object-fit: cover; background: #fff; } .mv-media.is-sound .mv-loop { display: none; } .mv-close { position: absolute; right: 10px; top: 10px; font: inherit; font-weight: 700; font-size: 14px; border: 0; border-radius: 999px; padding: 6px 12px; background: rgba(27, 22, 64, .75); color: #fff; cursor: pointer; } @media (max-width: 820px) { .mv-card { grid-template-columns: 1fr; } .mv-media { order: -1; } } /* v12.87.1: Ray's name, in his own colours (orange, like his fur), beside Sparky's purple */ .mv-copy h2 em.mv-name2 { background: linear-gradient(90deg, #E8590C, #F59F00); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- v13.38.0 · the GCSE site's home page (public/js/landing-gcse.js) ---------- */ .gcse-sec .prog-copy { max-width: 980px; margin: 0 auto; } .gcse-sec .prog-row.no-media { display: block; } .gcse-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 18px 0 20px; } .gcse-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 18px; background: var(--card, #fff); border: 1px solid var(--line, #E4E2F0); box-shadow: 0 6px 18px rgba(40, 20, 90, .06); } .gcse-tile > span:first-child { font-size: 26px; line-height: 1; } .gcse-tile b { font-size: 16px; } .gcse-tile span:last-child { font-size: 14px; color: var(--muted, #6B6F8A); line-height: 1.5; } .gcse-mc-runs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 16px 0 20px; } .gcse-mc-run { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 18px; text-decoration: none; color: inherit; background: var(--card, #fff); border: 2px solid var(--line, #E4E2F0); transition: border-color .15s, transform .15s; } .gcse-mc-run:hover { border-color: var(--prog-accent, #4F46B8); transform: translateY(-2px); } .gcse-mc-dates { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--prog-accent, #4F46B8); } .gcse-mc-run b { font-size: 18px; } .gcse-mc-sum, .gcse-mc-foot { font-size: 14px; color: var(--muted, #6B6F8A); } .gcse-mc-go { margin-top: 6px; font-weight: 800; color: var(--prog-accent, #4F46B8); } .gcse-mc-none { padding: 14px 16px; border-radius: 14px; background: var(--paper, #F6F5FB); }