/* ========================================================= Ketsy's Young Magicians White content boxes sitting on bright stage curtains, with circular trick "bubbles" threaded around them. ========================================================= */ :root{ --ink:#1C1024; --ink-soft:#584668; --gold:#F5B800; --hero-yellow:#FFE016; --gold-deep:#C08A00; --purple:#8A00B0; --crimson:#E4003F; --deep-red:#B00020; --blue:#2D6CE0; --teal:#0E9E96; --green:#2A9E4B; --shell:1120px; --r:26px; --display:"Poppins", system-ui, sans-serif; --body:"Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; --util:"Poppins", system-ui, sans-serif; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.001ms !important;animation-duration:.001ms !important}} body{ margin:0;font-family:var(--body); font-size:clamp(1rem,.97rem + .2vw,1.08rem);line-height:1.6; color:var(--ink);background:#1C1024;-webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.1;margin:0 0 .5em;letter-spacing:-.01em} h1{font-size:clamp(1.85rem,1.25rem + 2.9vw,3.1rem)} h2{font-size:clamp(1.5rem,1.15rem + 1.7vw,2.3rem)} h3{font-size:clamp(1.1rem,1rem + .5vw,1.35rem)} p{margin:0 0 1em} p:last-child{margin-bottom:0} a{color:var(--purple)} .eyebrow{ font-family:var(--util);font-weight:500;text-transform:uppercase;letter-spacing:.2em; font-size:.74rem;color:var(--deep-red);display:block;margin:0 0 .7rem; } .lede{font-size:clamp(1.03rem,.98rem + .45vw,1.24rem);line-height:1.5} .muted{color:var(--ink-soft)} .center{text-align:center} /* ---------- Curtain sections ---------- */ .curtain{ position:relative; padding:clamp(2.4rem,1.6rem + 3.4vw,4rem) 0; background-repeat:repeat-x; background-position:center top; background-size:auto 100%; /* keeps pleats in proportion at any width */ background-color:var(--curtain-dark,#2A0B33); background-image:var(--curtain); } /* Page theme — set one of these on . Every curtain on the page follows it. */ .page-red{--curtain:url("assets/curtain-red.webp?v=34");--curtain-dark:#5E0016} .page-purple{--curtain:url("assets/curtain-purple.webp?v=34");--curtain-dark:#33003F} .page-blue{--curtain:url("assets/curtain-blue.webp?v=34");--curtain-dark:#0B2A5E} .page-green{--curtain:url("assets/curtain-green.webp?v=34");--curtain-dark:#123A17} .page-teal{--curtain:url("assets/curtain-teal.webp?v=34");--curtain-dark:#08383A} .page-gold{--curtain:url("assets/curtain-gold.webp?v=34");--curtain-dark:#4A3D00} .shell{width:min(100% - 1.6rem,var(--shell));margin-inline:auto;position:relative} /* ---------- The white box ---------- */ .box{ background:#fff;border-radius:var(--r); padding:clamp(1.5rem,1.1rem + 2vw,2.8rem); box-shadow:0 26px 60px rgba(0,0,0,.42); position:relative; } .box + .box{margin-top:1.2rem} .box-narrow{width:min(100%,780px);margin-inline:auto} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center; font-family:var(--util);text-transform:uppercase;letter-spacing:.12em;font-weight:500; font-size:clamp(.8rem,.76rem + .18vw,.92rem); padding:.9rem 1.6rem;border-radius:999px;text-decoration:none;border:2px solid transparent; transition:transform .16s ease,box-shadow .16s ease,background .16s ease;cursor:pointer; } .btn:hover{transform:translateY(-2px)} .btn-red{background:var(--crimson);color:#fff} .btn-red:hover{background:var(--deep-red)} .btn-gold{background:var(--gold);color:#2A1600} .btn-purple{background:var(--purple);color:#fff} .btn-line{border-color:var(--purple);color:var(--purple)} .btn-line:hover{background:var(--purple);color:#fff} .btn-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.3rem} .center .btn-row{justify-content:center} :focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px} /* ---------- Header ---------- */ .site-head{position:sticky;top:0;z-index:60;background:#fff;box-shadow:0 3px 14px rgba(0,0,0,.28)} .head-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem 0;flex-wrap:wrap} .brand img{width:clamp(140px,32vw,200px)} .nav-toggle{ font-family:var(--util);text-transform:uppercase;letter-spacing:.14em;font-size:.8rem; background:var(--purple);color:#fff;border:0;border-radius:999px;padding:.55rem 1rem;cursor:pointer; } .nav{display:none} .nav.open{display:block;width:100%;padding-bottom:.6rem} .nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .nav a{display:block;padding:.6rem .2rem;color:var(--ink);text-decoration:none;font-weight:600;border-bottom:1px solid rgba(28,16,36,.1)} .nav a[aria-current="page"]{color:var(--deep-red)} @media(min-width:920px){ .nav-toggle{display:none} .nav{display:block !important;width:auto;padding:0} .nav ul{flex-direction:row;align-items:center;gap:.1rem} .nav a{border:0;padding:.5rem .7rem;font-size:.95rem} .nav .nav-cta{background:var(--crimson);color:#fff;border-radius:999px;padding:.5rem 1.1rem;margin-left:.4rem} } /* ---------- Hero ---------- */ .hero-logo{width:min(72%,430px);margin:0 auto clamp(1rem,3vw,1.8rem);filter:drop-shadow(0 10px 22px rgba(0,0,0,.5))} .hero-fan{width:min(100%,900px);margin:clamp(1.2rem,3vw,2rem) auto 0;filter:drop-shadow(0 18px 32px rgba(0,0,0,.5))} .tickets{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:1.2rem} .ticket{ font-family:var(--util);text-transform:uppercase;letter-spacing:.12em;font-size:.7rem; background:rgba(255,255,255,.94);color:var(--ink);padding:.42rem .85rem;border-radius:999px; box-shadow:0 4px 12px rgba(0,0,0,.3); } /* ---------- Bubbles ---------- */ .bubble{ border-radius:50%;border:5px solid #fff; box-shadow:0 12px 28px rgba(0,0,0,.4); background:#fff; } /* decorative, non-uniform, desktop only */ .bubble-deco{position:absolute;z-index:2;display:none} @media(min-width:1040px){.bubble-deco{display:block}} .bd-1{width:140px;top:-46px;left:-62px;transform:rotate(-7deg)} .bd-2{width:112px;bottom:-40px;right:-52px;transform:rotate(6deg)} .bd-3{width:96px;top:38%;right:-56px;transform:rotate(-4deg)} .bd-4{width:124px;bottom:-48px;left:-54px;transform:rotate(5deg)} .bd-5{width:104px;top:-42px;right:-38px;transform:rotate(8deg)} /* inline strip, shows everywhere */ .bubble-strip{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin:1.4rem 0 0} .bubble-strip img{width:clamp(70px,16vw,116px)} .bubble-strip img:nth-child(2n){transform:rotate(-5deg)} .bubble-strip img:nth-child(3n){transform:rotate(4deg)} /* bubble beside a heading */ .with-bubble{display:flex;gap:1rem;align-items:flex-start} .with-bubble img{width:84px;flex:0 0 84px} .with-bubble h3{margin-bottom:.3rem} .with-bubble p{font-size:.97rem} /* ---------- Grids ---------- */ .grid{display:grid;gap:1.2rem} @media(min-width:760px){.g-2{grid-template-columns:1fr 1fr}.g-3{grid-template-columns:repeat(3,1fr)}} .split{display:grid;gap:1.6rem;align-items:center} @media(min-width:860px){.split{grid-template-columns:1fr 1fr}} /* ---------- Steps ---------- */ .steps{counter-reset:s;display:grid;gap:1.1rem} @media(min-width:820px){.steps{grid-template-columns:repeat(4,1fr)}} .step::before{ counter-increment:s;content:counter(s); font-family:var(--display);font-size:1.35rem;color:var(--deep-red);display:block;margin-bottom:.2rem; } .step h3{font-size:1.05rem;margin-bottom:.25rem} .step p{font-size:.95rem} /* ---------- Timeline ---------- */ .timeline{list-style:none;margin:0;padding:0;border-left:3px solid var(--gold)} .timeline li{position:relative;padding:0 0 1.2rem 1.3rem} .timeline li:last-child{padding-bottom:0} .timeline li::before{content:"";position:absolute;left:-9.5px;top:.4rem;width:14px;height:14px;border-radius:50%;background:var(--gold)} .t-time{font-family:var(--util);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--deep-red)} .timeline h3{font-size:1.02rem;margin:.1rem 0 .2rem} .timeline p{font-size:.95rem} /* ---------- Price ---------- */ .price-box{background:#fff;border:3px solid var(--gold);border-radius:var(--r);padding:1.8rem 1.4rem;text-align:center;box-shadow:0 24px 54px rgba(0,0,0,.4)} .price-fig{font-family:var(--display);font-size:clamp(2.4rem,1.9rem + 2.6vw,3.4rem);color:var(--deep-red);line-height:1;display:block} .price-sub{font-family:var(--util);text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;color:var(--ink-soft)} .ticklist{list-style:none;margin:1.2rem 0 0;padding:0;text-align:left;display:grid;gap:.45rem} .ticklist li{padding-left:1.6rem;position:relative;font-size:.97rem} .ticklist li::before{content:"★";position:absolute;left:0;color:var(--gold)} /* ---------- Quote ---------- */ .quote{border-left:4px solid var(--gold);padding-left:1.2rem;font-size:clamp(1.05rem,1rem + .5vw,1.25rem);line-height:1.45;margin:0} .quote cite{display:block;font-style:normal;font-family:var(--util);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--deep-red);margin-top:.7rem} /* ---------- FAQ ---------- */ .faq details{border-bottom:1px solid rgba(28,16,36,.14)} .faq summary{cursor:pointer;font-weight:600;padding:.8rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--display);color:var(--deep-red);font-size:1.2rem} .faq details[open] summary::after{content:"–"} .faq p{padding-bottom:.9rem;font-size:.98rem} /* ---------- Form ---------- */ .field{display:block;margin-bottom:.9rem} .field span{display:block;font-family:var(--util);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--ink-soft);margin-bottom:.3rem} .field input,.field select,.field textarea{ width:100%;font-family:var(--body);font-size:1rem;padding:.75rem .85rem; border:2px solid rgba(28,16,36,.18);border-radius:12px;background:#FFFDF9;color:var(--ink); } .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--purple);outline:none} @media(min-width:660px){.form-2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}} /* ---------- Placeholder ---------- */ .frame{ border:3px dashed var(--gold-deep);border-radius:var(--r);background:#FFF9E8; min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:1.4rem;color:var(--ink-soft); } .frame .fr-label{font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;color:var(--deep-red);margin-bottom:.4rem} .frame p{font-size:.9rem;max-width:32ch} /* ---------- Media ---------- */ .shot{border-radius:18px;box-shadow:0 14px 32px rgba(0,0,0,.22)} .prop{filter:drop-shadow(0 12px 20px rgba(0,0,0,.25))} .caption{font-family:var(--util);text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;color:var(--ink-soft);margin:.6rem 0 0;text-align:center} /* ---------- Footer ---------- */ .site-foot{background:#1C1024;color:#D9C8E4;padding:2.6rem 0 1.6rem;font-size:.94rem} .foot-grid{display:grid;gap:1.8rem} @media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}} .site-foot img{width:190px;margin-bottom:.9rem} .site-foot h3{font-family:var(--util);font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;color:var(--gold);margin-bottom:.6rem} .site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem} .site-foot a{color:#D9C8E4;text-decoration:none} .site-foot a:hover{color:var(--gold)} .foot-base{border-top:1px solid rgba(255,255,255,.14);margin-top:1.8rem;padding-top:1.1rem;color:#9C88AA;font-size:.83rem;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:space-between} .skip{position:absolute;left:-9999px} .skip:focus{left:1rem;top:1rem;z-index:99;background:var(--gold);color:#2A1600;padding:.6rem 1rem;border-radius:8px} .mt{margin-top:1.4rem} /* ========================================================= HERO — pill navigation and headline sitting on the curtain ========================================================= */ .hero{ position:relative; background-repeat:repeat-x;background-position:center top;background-size:auto 100%; background-color:var(--curtain-dark,#2A0B33); background-image:var(--curtain); padding:1rem 0 clamp(2.2rem,1.4rem + 3vw,3.4rem); text-align:center; } .pill-nav ul{ list-style:none;margin:0 0 clamp(1.2rem,3vw,2rem);padding:0; display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem; } .pill-nav a{ display:block;background:#fff;color:var(--deep-red);text-decoration:none; font-family:var(--display);font-weight:700;font-size:clamp(.86rem,.82rem + .2vw,1rem); padding:.6rem 1.5rem;border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.28); transition:transform .15s ease,background .15s ease,color .15s ease; } .pill-nav a:hover{transform:translateY(-2px)} .pill-nav a[aria-current="page"]{background:var(--hero-yellow);color:#241400} .pill-nav .pill-cta{background:var(--crimson);color:#fff} .pill-nav .pill-cta:hover{background:#fff;color:var(--crimson)} .hero-logo{ width:min(78%,470px);margin:0 auto clamp(.6rem,2vw,1.1rem); filter:drop-shadow(0 8px 20px rgba(0,0,0,.55)); } .hero h1{ color:var(--hero-yellow);margin:0 0 .25em; font-size:clamp(1.9rem,1.2rem + 3.3vw,3.3rem); text-shadow:0 3px 0 rgba(0,0,0,.30), 0 8px 26px rgba(0,0,0,.5); } .hero-tag{ color:#fff;font-family:var(--display);font-weight:700; font-size:clamp(1.05rem,.9rem + 1.2vw,1.7rem);line-height:1.25; margin:0 auto;max-width:22ch; text-shadow:0 2px 0 rgba(0,0,0,.28), 0 6px 20px rgba(0,0,0,.5); } .hero .btn-row{justify-content:center;margin-top:clamp(1.1rem,3vw,1.7rem)} .btn-hero{ background:var(--hero-yellow);color:#241400; font-size:clamp(.92rem,.86rem + .3vw,1.08rem);padding:.95rem 2rem; box-shadow:0 8px 22px rgba(0,0,0,.35); } .btn-hero:hover{background:#fff} .btn-hero-line{background:rgba(255,255,255,.94);color:var(--deep-red);box-shadow:0 8px 22px rgba(0,0,0,.3)} .btn-hero-line:hover{background:#fff} .hero .tickets{margin-top:clamp(1.1rem,3vw,1.6rem)} .hero-fan{width:min(100%,880px);margin:clamp(1.3rem,3vw,2rem) auto 0;filter:drop-shadow(0 16px 30px rgba(0,0,0,.5))} /* Buttons pick up the rounded brand face */ .btn{font-family:var(--display);font-weight:700;letter-spacing:.02em;text-transform:none} .eyebrow{font-weight:700;letter-spacing:.14em} .ticket{font-weight:600;letter-spacing:.06em;text-transform:none;font-size:.78rem} .t-time,.price-sub,.caption,.field span,.site-foot h3,.quote cite,.fr-label{letter-spacing:.1em} /* ========================================================= v5 — white breather sections, sticky bar, feature circles ========================================================= */ /* Plain white sections break up consecutive curtains */ .plain{background:#fff;padding:clamp(2.6rem,1.8rem + 3.6vw,4.4rem) 0} .plain + .curtain, .curtain + .plain{margin:0} /* Sticky white bar — slides in once the hero has scrolled away */ .bar{ position:fixed;top:0;left:0;right:0;z-index:80;background:#fff; box-shadow:0 3px 16px rgba(0,0,0,.22); transform:translateY(-104%);transition:transform .26s ease; } .bar.show{transform:translateY(0)} .bar-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.45rem 0} .bar img{width:clamp(126px,26vw,168px)} .bar-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:.1rem;flex-wrap:wrap;justify-content:flex-end} .bar-nav a{ display:block;padding:.45rem .7rem;color:var(--ink);text-decoration:none; font-family:var(--display);font-weight:700;font-size:.92rem;border-radius:999px; } .bar-nav a:hover{color:var(--deep-red)} .bar-nav a[aria-current="page"]{color:var(--deep-red)} .bar-nav .bar-cta{background:var(--crimson);color:#fff;padding:.45rem 1.05rem} .bar-nav .bar-cta:hover{background:var(--deep-red);color:#fff} @media(max-width:640px){ .bar-nav a{font-size:.82rem;padding:.4rem .5rem} .bar img{width:120px} } /* ---------- Bubbles: bigger, thinner ring ---------- */ .bubble{border-width:3px;box-shadow:0 10px 26px rgba(0,0,0,.30)} /* Big circle above a heading — the three-up that reads as a feature */ .feature-row{display:grid;gap:clamp(1.6rem,4vw,2.6rem);text-align:center;margin-top:clamp(1.6rem,4vw,2.4rem)} @media(min-width:780px){.feature-row{grid-template-columns:repeat(3,1fr)}} .feature{display:flex;flex-direction:column;align-items:center} .feature img{ width:clamp(180px,42vw,260px);aspect-ratio:1;object-fit:cover; margin-bottom:1.1rem; } .feature h3{font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);margin-bottom:.3rem} .feature p{max-width:30ch;margin-inline:auto;color:var(--ink-soft)} /* A single oversized circle used as a section feature */ .big-bubble{width:clamp(220px,48vw,340px);aspect-ratio:1;object-fit:cover;margin-inline:auto} /* Scattered strip, now much larger */ .bubble-strip{gap:1rem;margin-top:1.8rem} .bubble-strip img{width:clamp(104px,21vw,168px);aspect-ratio:1;object-fit:cover} /* Bubble beside text, larger */ .with-bubble{gap:1.2rem;align-items:center} .with-bubble img{width:clamp(96px,20vw,132px);flex:0 0 auto;aspect-ratio:1;object-fit:cover} /* Decorative corner bubbles, larger */ .bd-1{width:180px;top:-58px;left:-78px} .bd-2{width:150px;bottom:-52px;right:-66px} .bd-3{width:132px;top:36%;right:-70px} .bd-4{width:164px;bottom:-58px;left:-70px} .bd-5{width:140px;top:-54px;right:-52px} /* ---------- Team ---------- */ .team-grid{display:grid;gap:1.4rem} @media(min-width:720px){.team-grid{grid-template-columns:1fr 1fr}} .leader{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.32)} .leader-img{aspect-ratio:4/3;width:100%;object-fit:cover;display:block} .leader .frame{border-radius:0;border-width:0 0 3px 0;min-height:230px} .leader-body{padding:1.3rem 1.4rem 1.5rem} .leader-body h3{margin-bottom:.15rem} .leader-role{ font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:.1em; text-transform:uppercase;color:var(--deep-red);display:block;margin-bottom:.6rem; } .leader-body p{font-size:.97rem} .skills{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem;padding:0;list-style:none} .skills li{ background:#F4ECF8;color:var(--purple);border-radius:999px;padding:.28rem .8rem; font-size:.78rem;font-weight:600; } .leader-wide{grid-column:1/-1} @media(min-width:720px){ .leader-wide{display:grid;grid-template-columns:1fr 1.15fr;align-items:stretch} .leader-wide .leader-img,.leader-wide .frame{height:100%;aspect-ratio:auto;min-height:320px} .leader-wide .leader-body{padding:1.8rem} } /* ========================================================= v6 — the mockup template: bold white sections with a child-facing colour scheme and coloured circle rings. Applies to every page. ========================================================= */ :root{ --c1:#F7861B; /* orange */ --c2:#8A00B0; /* purple */ --c3:#0E9E96; /* teal */ --c4:#E4007F; /* pink */ --c5:#2D6CE0; /* blue */ --c6:#2A9E4B; /* green */ } /* Bold white breather sections */ .plain{padding:clamp(3rem,2rem + 4.6vw,5.2rem) 0} .plain .eyebrow{ color:var(--c2);font-size:.9rem;letter-spacing:.28em;margin-bottom:1rem; } .plain h2{color:var(--c2);font-size:clamp(1.7rem,1.2rem + 2.3vw,2.9rem)} .plain .lede{color:#423050} /* Feature circles with bold coloured rings */ .feature img{ border:9px solid var(--c2);border-radius:50%;background:#fff; box-shadow:0 14px 30px rgba(0,0,0,.16); width:clamp(190px,44vw,286px); } .feature h3{ color:var(--c2);font-size:clamp(1.4rem,1.15rem + 1vw,1.9rem); letter-spacing:-.01em;margin-bottom:.35rem; } .feature p{color:#4A3A57;font-size:1.02rem} .f1 img{border-color:var(--c1)} .f1 h3{color:var(--c1)} .f2 img{border-color:var(--c2)} .f2 h3{color:var(--c2)} .f3 img{border-color:var(--c3)} .f3 h3{color:var(--c3)} .f4 img{border-color:var(--c4)} .f4 h3{color:var(--c4)} .f5 img{border-color:var(--c5)} .f5 h3{color:var(--c5)} .f6 img{border-color:var(--c6)} .f6 h3{color:var(--c6)} /* Oversized single circle picks up a ring too */ .big-bubble{border:9px solid var(--c3);border-radius:50%;background:#fff} .plain .big-bubble{box-shadow:0 16px 36px rgba(0,0,0,.16)} /* Scattered strips cycle the same child-facing palette */ .plain .bubble-strip img{border-width:6px} .plain .bubble-strip img:nth-child(6n+1){border-color:var(--c1)} .plain .bubble-strip img:nth-child(6n+2){border-color:var(--c2)} .plain .bubble-strip img:nth-child(6n+3){border-color:var(--c3)} .plain .bubble-strip img:nth-child(6n+4){border-color:var(--c4)} .plain .bubble-strip img:nth-child(6n+5){border-color:var(--c5)} .plain .bubble-strip img:nth-child(6n+6){border-color:var(--c6)} /* Numbered steps go colourful on white */ .plain .step::before{ color:#fff;background:var(--c2);width:2.2rem;height:2.2rem;border-radius:50%; display:grid;place-items:center;font-size:1.15rem;margin-bottom:.6rem; } .plain .steps .step:nth-child(1)::before{background:var(--c1)} .plain .steps .step:nth-child(2)::before{background:var(--c2)} .plain .steps .step:nth-child(3)::before{background:var(--c3)} .plain .steps .step:nth-child(4)::before{background:var(--c4)} .plain .step h3{color:var(--ink);font-size:1.12rem} /* Lists and quotes on white pick up brand colour */ .plain .ticklist li::before{color:var(--c1)} .plain .quote{border-left-color:var(--c2)} .plain .quote cite{color:var(--c2)} .plain .faq summary::after{color:var(--c2)} .plain .t-time{color:var(--c1)} .plain .timeline{border-left-color:var(--c2)} .plain .timeline li::before{background:var(--c2)} .plain .timeline li:nth-child(2)::before{background:var(--c1)} .plain .timeline li:nth-child(3)::before{background:var(--c3)} .plain .timeline li:nth-child(4)::before{background:var(--c4)} .plain .timeline li:nth-child(5)::before{background:var(--c5)} .plain .timeline li:nth-child(6)::before{background:var(--c6)} .plain .btn-line{border-color:var(--c2);color:var(--c2)} .plain .btn-line:hover{background:var(--c2);color:#fff} /* Hero image sizing for the new artwork */ .hero-fan{width:min(100%,820px)} /* ---------- Founder welcome ---------- */ .welcome{display:grid;gap:clamp(1.4rem,4vw,2.4rem);align-items:start} @media(min-width:880px){.welcome{grid-template-columns:minmax(260px,.85fr) 1.3fr}} .welcome-photo{ border-radius:20px;width:100%; box-shadow:0 14px 32px rgba(0,0,0,.22); } .welcome h2{color:var(--c2);font-size:clamp(1.7rem,1.2rem + 2.2vw,2.7rem);margin-bottom:.15em} .welcome .hello{ font-family:var(--display);font-weight:700;color:var(--ink); font-size:clamp(1.05rem,.98rem + .5vw,1.24rem);margin-bottom:.9rem; } .welcome p{color:#3E2E4B} .welcome .pull{ color:var(--c1);font-family:var(--display);font-weight:700; font-size:clamp(1.08rem,1rem + .7vw,1.42rem);line-height:1.35; margin:1.2rem 0;padding-left:1.1rem;border-left:5px solid var(--c1); } .signoff{ font-family:var(--display);font-weight:800;color:var(--c2); font-size:clamp(1.2rem,1.05rem + .9vw,1.7rem);margin:1.3rem 0 .1rem; } .signoff-name{font-weight:600;color:var(--ink-soft);font-size:.98rem;font-family:var(--body)} /* ========================================================= v8 — sticky header replaces the hero pills, logo threaded ========================================================= */ .bar{ position:sticky;top:0;transform:none; background:#fff;box-shadow:0 3px 16px rgba(0,0,0,.20);z-index:80; } .bar-in{padding:.5rem 0;gap:.8rem;flex-wrap:wrap} .bar img{width:clamp(178px,32vw,268px)} .bar-nav a{font-size:.98rem;padding:.5rem .8rem} @media(max-width:760px){ .bar-in{justify-content:center;flex-direction:column;gap:.35rem} .bar img{width:clamp(180px,54vw,230px)} .bar-nav ul{justify-content:center} .bar-nav a{font-size:.86rem;padding:.38rem .55rem} } .pill-nav{display:none} .hero{padding-top:clamp(1.6rem,1rem + 2.4vw,2.6rem)} /* Logo threaded between sections */ .logo-rule{ display:flex;align-items:center;gap:1.1rem; margin:clamp(1.8rem,4vw,2.8rem) auto 0;width:min(100%,760px); } .logo-rule::before,.logo-rule::after{ content:"";flex:1;height:3px;border-radius:2px; background:linear-gradient(90deg,transparent,var(--c2)); } .logo-rule::after{background:linear-gradient(90deg,var(--c2),transparent)} .logo-rule img{width:clamp(126px,26vw,180px);flex:0 0 auto} .curtain .logo-rule::before{background:linear-gradient(90deg,transparent,var(--gold))} .curtain .logo-rule::after{background:linear-gradient(90deg,var(--gold),transparent)} /* Small logo lockup inside a white box */ .box-logo{width:clamp(140px,28vw,196px);margin:0 auto 1rem} /* ---------- Wand ladder ---------- */ .wand-hero{width:min(100%,940px);margin:clamp(1.2rem,3vw,2rem) auto 0; filter:drop-shadow(0 14px 26px rgba(0,0,0,.28))} .curtain .wand-hero{filter:drop-shadow(0 14px 26px rgba(0,0,0,.5))} .spread{width:min(100%,900px);margin:0 auto;filter:drop-shadow(0 14px 26px rgba(0,0,0,.22))} .claims{display:grid;gap:1rem;margin-top:clamp(1.6rem,4vw,2.2rem)} @media(min-width:820px){.claims{grid-template-columns:repeat(3,1fr)}} .claim{ border-radius:20px;padding:1.4rem 1.3rem;color:#fff;text-align:left; box-shadow:0 12px 28px rgba(0,0,0,.18); } .claim h3{color:#fff;font-size:1.18rem;margin-bottom:.35rem} .claim p{font-size:.98rem;color:rgba(255,255,255,.94)} .claim-1{background:linear-gradient(150deg,#FF9E33,#E2670A)} .claim-2{background:linear-gradient(150deg,#A927CC,#6A0088)} .claim-3{background:linear-gradient(150deg,#17BDB4,#067C76)} /* ---------- Welcome gallery ---------- */ .welcome-gallery{display:grid;gap:.9rem;margin-top:1rem} .welcome-gallery img{border-radius:16px;box-shadow:0 12px 26px rgba(0,0,0,.2);width:100%} @media(min-width:520px){.welcome-gallery{grid-template-columns:1fr 1fr}} @media(min-width:880px){.welcome-gallery{grid-template-columns:1fr}} /* ========================================================= v9 — bigger logos, booklet name ladder ========================================================= */ .bar img{width:clamp(210px,38vw,330px)} @media(max-width:760px){.bar img{width:clamp(210px,62vw,280px)}} .hero-logo{width:min(88%,620px)} .logo-rule img{width:clamp(160px,32vw,250px)} .box-logo{width:clamp(190px,36vw,290px)} .site-foot img{width:260px} /* The nine booklet names */ .levels{display:grid;gap:.7rem;margin-top:clamp(1.4rem,3.5vw,2rem)} @media(min-width:560px){.levels{grid-template-columns:1fr 1fr}} @media(min-width:900px){.levels{grid-template-columns:repeat(3,1fr)}} .level{ display:flex;align-items:center;gap:.85rem;text-align:left; background:#fff;border-radius:999px;padding:.5rem .95rem .5rem .5rem; box-shadow:0 6px 16px rgba(0,0,0,.12);border:2px solid #F0E8F5; } .level .num{ flex:0 0 auto;width:2.3rem;height:2.3rem;border-radius:50%; display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:800; font-size:1rem; } .level .nm{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--ink);line-height:1.15} .level:nth-child(1) .num{background:#E4003F} .level:nth-child(2) .num{background:#2A9E4B} .level:nth-child(3) .num{background:#1C1024} .level:nth-child(4) .num{background:#D6188C} .level:nth-child(5) .num{background:#2D6CE0} .level:nth-child(6) .num{background:#F2B705;color:#3A2A00} .level:nth-child(7) .num{background:#F7861B} .level:nth-child(8) .num{background:#8A00B0} .level:nth-child(9) .num{background:#0E9E96} /* Prominent, colourful testimonial */ .shout{ border-radius:24px;padding:clamp(1.5rem,1.1rem + 2vw,2.6rem); background:linear-gradient(135deg,#8A00B0 0%,#D6188C 55%,#F7861B 100%); color:#fff;box-shadow:0 20px 46px rgba(0,0,0,.28);position:relative;overflow:hidden; } .shout::before{ content:"\201C";position:absolute;top:-.35em;left:.12em; font-family:var(--display);font-weight:800;font-size:11rem;line-height:1; color:rgba(255,255,255,.16);pointer-events:none; } .shout p{ position:relative;font-family:var(--display);font-weight:700; font-size:clamp(1.1rem,.98rem + .95vw,1.62rem);line-height:1.34;margin:0; } .shout cite{ display:block;position:relative;font-style:normal;margin-top:1rem; font-family:var(--body);font-weight:600;letter-spacing:.1em;text-transform:uppercase; font-size:.8rem;color:#FFE016; } .shout .stars{position:relative;color:#FFE016;font-size:1.2rem;letter-spacing:.18em;margin-bottom:.7rem} /* ========================================================= v10 — call-to-action buttons are flat block colour. The coloured drop shadows read as a glow, especially on white, so they are removed everywhere. ========================================================= */ .btn-red, .btn-gold, .btn-purple, .btn-line{box-shadow:none} .btn-red:hover, .btn-gold:hover, .btn-purple:hover{box-shadow:none} /* Buttons sitting on a curtain keep a plain neutral shadow so they still lift off the background — no colour in it. */ .curtain .btn-red, .curtain .btn-gold, .curtain .btn-purple{box-shadow:0 4px 12px rgba(0,0,0,.28)} /* Slightly darker hover states, since there is no longer a glow doing the work of showing the button is interactive. */ .btn-gold:hover{background:#E0A800} .btn-purple:hover{background:#6E008C} /* ========================================================= v11 — black fade on the curtains, and the new ringed photographs (their coloured ring is part of the artwork) ========================================================= */ /* Soften the curtain top and bottom so it stops shouting */ .curtain::before, .hero::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 14%, rgba(0,0,0,0) 30%), linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 14%, rgba(0,0,0,0) 30%); } .curtain > .shell, .hero > .shell{position:relative;z-index:1} /* Ringed photographs: the coloured border is baked into the image, so no CSS ring — just a soft shadow that follows the circle. */ .ring{ border:0;border-radius:50%;background:none; filter:drop-shadow(0 12px 22px rgba(0,0,0,.26)); width:100%; } .plain .ring{filter:drop-shadow(0 12px 22px rgba(28,16,36,.22))} .curtain .ring{filter:drop-shadow(0 14px 26px rgba(0,0,0,.42))} .feature .ring{ border:0;box-shadow:none;background:none; width:clamp(200px,46vw,300px); } .big-bubble.ring{border:0;box-shadow:none;width:clamp(230px,50vw,360px)} .ring-strip{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1.8rem} .ring-strip img{width:clamp(112px,23vw,182px);border:0;background:none; filter:drop-shadow(0 10px 20px rgba(0,0,0,.24))} .ring-strip img:nth-child(2n){transform:rotate(-4deg)} .ring-strip img:nth-child(3n){transform:rotate(3deg)} .with-ring{display:flex;gap:1.1rem;align-items:center} .with-ring img{width:clamp(104px,22vw,140px);flex:0 0 auto;border:0;background:none; filter:drop-shadow(0 10px 20px rgba(0,0,0,.22))} /* ========================================================= v12 — circles less formulaic: varied sizes, softened back into the curtain, plus placeholders for the ones to come ========================================================= */ /* On curtain the circles sit BACK — atmosphere, not content */ .curtain .ring-strip img, .curtain .ring.bubble-deco{ opacity:.72; transition:opacity .25s ease, transform .25s ease; } .curtain .ring-strip img:hover, .curtain .ring.bubble-deco:hover{opacity:1;transform:translateY(-3px)} /* On white they stay full strength — this is where they carry meaning */ .plain .ring-strip img{opacity:1} /* Deliberately uneven strip: sizes and angles vary, nothing repeats */ .ring-strip{align-items:center;gap:clamp(.7rem,2vw,1.5rem)} .ring-strip img{width:clamp(96px,20vw,150px)} .ring-strip img:nth-child(1){width:clamp(120px,26vw,196px);transform:rotate(-3deg)} .ring-strip img:nth-child(2){width:clamp(84px,18vw,128px);transform:rotate(5deg) translateY(10px)} .ring-strip img:nth-child(3){width:clamp(132px,29vw,222px);transform:rotate(-2deg) translateY(-8px)} .ring-strip img:nth-child(4){width:clamp(92px,20vw,140px);transform:rotate(4deg) translateY(12px)} .ring-strip img:nth-child(5){width:clamp(112px,24vw,178px);transform:rotate(-5deg)} .ring-strip img:nth-child(6){width:clamp(80px,17vw,118px);transform:rotate(3deg) translateY(8px)} /* Feature circles vary a little too, so the three-up stops marching */ .feature.f1 .ring{width:clamp(196px,44vw,286px)} .feature.f2 .ring{width:clamp(212px,48vw,312px)} .feature.f3 .ring{width:clamp(188px,42vw,272px)} /* Placeholder circle, styled like the real thing */ .ring-ph{ border-radius:50%;aspect-ratio:1;display:grid;place-items:center;text-align:center; border:9px dashed var(--c2);background:rgba(255,255,255,.9);color:var(--ink-soft); padding:1rem;box-sizing:border-box; } .ring-ph span{ font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.1em; font-size:.62rem;line-height:1.35;color:var(--c2); } .ring-strip .ring-ph{width:clamp(96px,21vw,158px)} .curtain .ring-ph{background:rgba(255,255,255,.86);opacity:.9} .ring-ph.ph-1{border-color:var(--c1)} .ring-ph.ph-1 span{color:var(--c1)} .ring-ph.ph-3{border-color:var(--c3)} .ring-ph.ph-3 span{color:var(--c3)} .ring-ph.ph-4{border-color:var(--c4)} .ring-ph.ph-4 span{color:var(--c4)} .ring-ph.ph-5{border-color:var(--c5)} .ring-ph.ph-5 span{color:var(--c5)} .ring-ph.ph-6{border-color:var(--c6)} .ring-ph.ph-6 span{color:var(--c6)} /* Richard's circle, for the welcome */ .welcome-ring{width:min(76%,320px);margin:0 auto;filter:drop-shadow(0 14px 26px rgba(0,0,0,.24))} /* ========================================================= v15 — smaller founder photo, and the party kit shown item by item ========================================================= */ /* The headshot was dominating the welcome — bring it right down */ .welcome{align-items:start} @media(min-width:880px){.welcome{grid-template-columns:minmax(190px,.55fr) 1.45fr}} .welcome-photo{width:min(58%,230px);border-radius:16px} @media(min-width:880px){.welcome-photo{width:100%;max-width:230px}} .welcome-gallery{margin-top:1rem} @media(min-width:880px){.welcome-gallery{grid-template-columns:1fr;gap:.7rem}} /* Kit grid — every item on its own */ .kit-grid{display:grid;gap:.9rem;margin-top:clamp(1.4rem,3.5vw,2.2rem)} @media(min-width:480px){.kit-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:760px){.kit-grid{grid-template-columns:repeat(3,1fr)}} @media(min-width:1000px){.kit-grid{grid-template-columns:repeat(5,1fr)}} .kit-item{ background:#fff;border-radius:18px;padding:1rem .8rem 1.1rem;text-align:center; border:2px solid #F1E9F6;box-shadow:0 8px 20px rgba(28,16,36,.09); display:flex;flex-direction:column;align-items:center;justify-content:flex-start; } .kit-item img{ height:106px;width:auto;max-width:100%;object-fit:contain;margin-bottom:.7rem; filter:drop-shadow(0 6px 12px rgba(0,0,0,.18)); } .kit-item h3{ font-size:.94rem;line-height:1.25;margin:0;color:var(--ink); } .kit-item .or{ display:block;margin-top:.35rem;font-size:.72rem;font-weight:600; letter-spacing:.08em;text-transform:uppercase;color:var(--c1); } .kit-item:nth-child(6n+1){border-color:#FBE3CC} .kit-item:nth-child(6n+2){border-color:#EFD9F6} .kit-item:nth-child(6n+3){border-color:#CFEFEC} .kit-item:nth-child(6n+4){border-color:#FBD6E9} .kit-item:nth-child(6n+5){border-color:#D6E3FA} .kit-item:nth-child(6n+6){border-color:#D5EFDC} .kit-note{ margin-top:1.2rem;text-align:center;font-size:.95rem;color:var(--ink-soft); max-width:56ch;margin-inline:auto; } .kit-landscape{width:min(100%,900px);margin:0 auto;filter:drop-shadow(0 14px 28px rgba(0,0,0,.16))} /* ========================================================= v16 — kit items sit clean on the white card, no shadow ========================================================= */ .kit-item img{filter:none} .kit-item{box-shadow:0 4px 14px rgba(28,16,36,.06)} /* The full kit line-up, used as a banner in the pricing section */ .kit-banner{ width:min(100%,980px);margin:clamp(1.4rem,3.5vw,2.2rem) auto 0; filter:none; } /* ========================================================= v18 — deeper red curtain on the homepage, and the props composited into the stage spotlight ========================================================= */ .page-red{--curtain:url("assets/curtain-red.webp?v=34");--curtain-dark:#3A0010} /* The spotlight panel is a feathered image that melts into the tiled curtain behind it, so it wants no shadow and full width. */ .hero-spotlight{ width:min(100%,1000px); margin:clamp(.6rem,2vw,1.4rem) auto 0; filter:none; display:block; } /* the fade at the top of the hero would dull the spotlight, so lift it here */ .page-red .hero::before{ background: linear-gradient(to bottom, rgba(0,0,0,.62) 0%, rgba(0,0,0,.20) 16%, rgba(0,0,0,0) 34%), linear-gradient(to top, rgba(0,0,0,.58) 0%, rgba(0,0,0,.18) 14%, rgba(0,0,0,0) 30%); } /* ========================================================= v19 — hero is the cut-out props alone; circles all match ========================================================= */ /* No spotlight panel — the props sit straight on the curtain */ .hero-spotlight{ width:min(100%,880px); margin:clamp(.8rem,2.4vw,1.6rem) auto 0; filter:drop-shadow(0 18px 34px rgba(0,0,0,.5)); } /* Every circle in a row is now the same size — no stepping */ .ring-strip img, .ring-strip .ring-ph{ width:clamp(110px,22vw,170px); transform:none; } .ring-strip img:nth-child(1), .ring-strip img:nth-child(2), .ring-strip img:nth-child(3), .ring-strip img:nth-child(4), .ring-strip img:nth-child(5), .ring-strip img:nth-child(6){ width:clamp(110px,22vw,170px); transform:none; } .feature.f1 .ring, .feature.f2 .ring, .feature.f3 .ring, .feature.f4 .ring, .feature.f5 .ring, .feature.f6 .ring{width:clamp(200px,45vw,290px)} .feature img{aspect-ratio:1;object-fit:contain} /* ========================================================= v20 — Learn / Practise / Perform become portrait pictures ========================================================= */ .feature .portrait, .feature .portrait-ph{ width:100%; max-width:340px; aspect-ratio:3/4; border-radius:20px; margin:0 auto 1.1rem; display:block; } .feature .portrait{ object-fit:cover; border:7px solid var(--c2); box-shadow:0 14px 30px rgba(28,16,36,.18); background:#fff; } .feature .portrait-ph{ border:7px dashed var(--c2); background:#FFFDF8; display:grid;place-items:center;text-align:center;padding:1.2rem; box-sizing:border-box; } .feature .portrait-ph span{ font-family:var(--display);font-weight:700;text-transform:uppercase; letter-spacing:.1em;font-size:.72rem;line-height:1.5;color:var(--c2); } .f1 .portrait,.f1 .portrait-ph{border-color:var(--c1)} .f1 .portrait-ph span{color:var(--c1)} .f2 .portrait,.f2 .portrait-ph{border-color:var(--c2)} .f2 .portrait-ph span{color:var(--c2)} .f3 .portrait,.f3 .portrait-ph{border-color:var(--c3)} .f3 .portrait-ph span{color:var(--c3)} /* the three sit side by side and stay the same height */ .feature-row{align-items:start} /* 4:5 portrait holds more of each classroom photo than 3:4 */ .feature .portrait, .feature .portrait-ph{aspect-ratio:4/5;max-width:330px} /* ========================================================= v23 — the red curtain reads welcoming rather than sinister Swap the alternates in by changing this one line: assets/curtain-red-alt-deeper.webp (a shade deeper) assets/curtain-red-alt-lighter.webp (a shade lighter) ========================================================= */ .page-red{--curtain:url("assets/curtain-red.webp?v=34");--curtain-dark:#5A0018} /* Most of the gloom was the black fade, not the fabric — ease it right back */ .page-red .curtain::before, .page-red .hero::before{ background: linear-gradient(to bottom, rgba(0,0,0,.40) 0%, rgba(0,0,0,.12) 14%, rgba(0,0,0,0) 30%), linear-gradient(to top, rgba(0,0,0,.38) 0%, rgba(0,0,0,.11) 13%, rgba(0,0,0,0) 28%); } /* ========================================================= v24 — parties: transparent pricing, tidier imagery ========================================================= */ /* ---- Pricing: one figure, in a pill, then the plain facts ---- */ .price-box{padding:clamp(1.6rem,1.2rem + 1.6vw,2.4rem) clamp(1.2rem,1rem + 1.4vw,2rem)} .price-pill{ display:inline-flex;align-items:baseline;gap:.35rem; background:linear-gradient(135deg,#E4003F,#B00020); color:#fff;border-radius:999px; padding:.5rem 1.9rem .65rem; box-shadow:0 8px 20px rgba(176,0,32,.28); } .price-pill .fig{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,1.9rem + 2.6vw,3.5rem);line-height:1} .price-pill .vat{font-family:var(--display);font-weight:700;font-size:.9rem;letter-spacing:.04em;opacity:.92} .price-for{ display:block;margin-top:.85rem;font-family:var(--display);font-weight:700; font-size:1.05rem;color:var(--ink); } .price-rows{list-style:none;margin:1.4rem 0 0;padding:0;text-align:left} .price-rows li{ display:flex;justify-content:space-between;align-items:baseline;gap:1rem; padding:.68rem 0;border-bottom:1px dashed rgba(28,16,36,.16);font-size:1rem; } .price-rows li:last-child{border-bottom:0} .price-rows .amt{font-family:var(--display);font-weight:700;color:var(--deep-red);white-space:nowrap} .price-rows .amt.free{color:var(--c6)} .price-foot{ margin-top:1.1rem;font-size:.9rem;color:var(--ink-soft); border-top:2px solid rgba(28,16,36,.10);padding-top:.9rem; } /* ---- Imagery tweaks ---- */ .shot-quiet{ width:min(100%,560px);margin-inline:auto; border-radius:16px;box-shadow:0 10px 24px rgba(0,0,0,.16); } .tilt-l{transform:rotate(-2.2deg)} .tilt-r{transform:rotate(2deg)} .tilt-l,.tilt-r{transition:transform .2s ease} .tilt-l:hover,.tilt-r:hover{transform:rotate(0deg)} /* the sticker tile art is now a 3-over-3 grid, so give it more room */ .kit-item img[src*="kit/stickers"]{height:150px} /* ========================================================= v26 — Ketsy the character introduces the club section ========================================================= */ .intro-split{ display:grid;gap:clamp(1rem,3vw,2rem);align-items:center; text-align:center; } @media(min-width:900px){ .intro-split{grid-template-columns:minmax(240px,.8fr) 1.6fr;text-align:left} .intro-split .intro-copy .eyebrow{margin-left:0} .intro-split .intro-copy .lede{margin-left:0;margin-right:0} } .ketsy-character{ width:min(58%,300px);margin:0 auto;display:block; filter:drop-shadow(0 16px 26px rgba(28,16,36,.22)); } @media(min-width:900px){ .ketsy-character{width:100%;max-width:340px;margin:0} } .intro-copy h2{margin-bottom:.35em} /* Logo heading the club section, above the character and headline */ .section-logo{ width:clamp(230px,42vw,380px); margin:0 auto clamp(1.4rem,3.5vw,2.2rem); display:block; } /* ========================================================= v28 — tighter section logo, and named characters ========================================================= */ .section-logo{ width:clamp(250px,44vw,410px); margin-bottom:clamp(.5rem,1.4vw,.9rem); } .intro-split{align-items:center} /* A character plus their name, in a playful face */ .character{display:flex;flex-direction:column;align-items:center;gap:.2rem} .character img{ width:min(58%,300px);display:block; filter:drop-shadow(0 16px 26px rgba(28,16,36,.22)); } @media(min-width:900px){ .character img{width:100%;max-width:340px} } .character-name{ font-family:"Lilita One", var(--display), sans-serif; font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem); letter-spacing:.02em;line-height:1;margin:.1rem 0 0; color:var(--c2); text-shadow:2px 2px 0 rgba(138,0,176,.16); transform:rotate(-2deg); } .character-name.n-orange{color:var(--c1);text-shadow:2px 2px 0 rgba(247,134,27,.18);transform:rotate(2deg)} .character-name.n-teal{color:var(--c3);text-shadow:2px 2px 0 rgba(14,158,150,.18)} .character-name.n-pink{color:var(--c4);text-shadow:2px 2px 0 rgba(228,0,127,.18);transform:rotate(1.5deg)} /* Two characters side by side, when there are more than one */ .character-row{display:flex;flex-wrap:wrap;gap:clamp(1rem,3vw,2rem);justify-content:center;align-items:flex-end} .character-row .character img{width:clamp(150px,26vw,250px);max-width:none} /* ========================================================= v29 — Jared alongside the booklet spreads ========================================================= */ .spread-pair{ display:grid;gap:clamp(1rem,2.5vw,2rem);align-items:center; margin-top:clamp(1.4rem,3.5vw,2.2rem); } @media(min-width:820px){ .spread-pair{grid-template-columns:1.55fr .85fr} } .spread-pair .spread{ width:100%;max-width:585px;margin:0 auto; /* 35% down from 900px */ } .spread-pair .character img{width:min(56%,230px)} @media(min-width:820px){ .spread-pair .character img{width:100%;max-width:250px} } /* ========================================================= v30 — the collectable holographic stickers ========================================================= */ .sticker-feature{ display:grid;gap:clamp(1.1rem,3vw,2.2rem);align-items:center; margin-top:clamp(1.6rem,4vw,2.4rem);text-align:center; } @media(min-width:780px){ .sticker-feature{grid-template-columns:.85fr 1.15fr;text-align:left} } .sticker-art{ width:min(62%,280px);margin:0 auto;display:block;border-radius:50%; filter:drop-shadow(0 14px 28px rgba(28,16,36,.26)); } @media(min-width:780px){.sticker-art{width:100%;max-width:300px;margin:0}} .sticker-feature h3{ color:var(--c2);font-size:clamp(1.25rem,1.1rem + .8vw,1.7rem);margin-bottom:.4rem; } .sticker-feature p{color:var(--ink-soft);margin:0} .sticker-feature .rare{ display:inline-block;margin-top:.9rem; font-family:"Lilita One",var(--display),sans-serif; font-size:1.05rem;color:var(--c1);letter-spacing:.02em; } /* ========================================================= v31 — the wands become a proper feature: big title, room to breathe, and a little sparkle ========================================================= */ .wand-feature{ position:relative;isolation:isolate; margin:clamp(2.4rem,6vw,4rem) auto 0; padding:clamp(2rem,1.4rem + 3vw,3.4rem) clamp(1rem,3vw,2.4rem); border-radius:28px; background: radial-gradient(70% 90% at 50% 45%, rgba(245,184,0,.16), rgba(245,184,0,0) 68%), linear-gradient(180deg,#FFFBF0,#FFF6E4); border:2px solid rgba(245,184,0,.35); text-align:center;overflow:hidden; } .wand-feature .eyebrow{color:var(--gold-deep);margin-bottom:.6rem} .wand-feature h3{ font-family:"Lilita One",var(--display),sans-serif; font-size:clamp(1.9rem,1.3rem + 3.2vw,3.4rem); line-height:1.05;color:var(--c2);margin:0 0 .35em; text-shadow:3px 3px 0 rgba(138,0,176,.14); } .wand-feature .wand-sub{ max-width:46ch;margin:0 auto;color:var(--ink-soft); font-size:clamp(1rem,.96rem + .35vw,1.16rem); } .wand-feature .wand-hero{ width:min(100%,900px); margin:clamp(1.8rem,4.5vw,3rem) auto clamp(1.2rem,3vw,1.8rem); filter:drop-shadow(0 14px 26px rgba(28,16,36,.18)); } .wand-feature .caption{color:var(--ink-soft);max-width:52ch;margin-inline:auto} /* Sparkles — small four-point stars, twinkling gently */ .sparkles{position:absolute;inset:0;z-index:-1;pointer-events:none} .sparkles i{ position:absolute;display:block;width:var(--s,14px);height:var(--s,14px); background:var(--gold);opacity:.75; clip-path:polygon(50% 0%,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0% 50%,40% 40%); animation:twinkle var(--d,3.2s) ease-in-out var(--t,0s) infinite; } @keyframes twinkle{ 0%,100%{transform:scale(.55) rotate(0deg);opacity:.28} 50% {transform:scale(1) rotate(18deg);opacity:.95} } @media (prefers-reduced-motion:reduce){ .sparkles i{animation:none;opacity:.6} } .sparkles i:nth-child(1){top:12%;left:7%;--s:18px;--d:3.4s;--t:0s} .sparkles i:nth-child(2){top:26%;left:88%;--s:13px;--d:2.8s;--t:.5s} .sparkles i:nth-child(3){top:62%;left:4%;--s:12px;--d:3.9s;--t:1.1s} .sparkles i:nth-child(4){top:78%;left:92%;--s:16px;--d:3.1s;--t:.3s} .sparkles i:nth-child(5){top:8%;left:62%;--s:11px;--d:4.2s;--t:1.6s} .sparkles i:nth-child(6){top:86%;left:33%;--s:14px;--d:3.6s;--t:.9s} .sparkles i:nth-child(7){top:44%;left:96%;--s:10px;--d:2.6s;--t:2s} .sparkles i:nth-child(8){top:70%;left:68%;--s:12px;--d:3.3s;--t:1.4s} /* ========================================================= v32 — wand feature: white panel, big red title ========================================================= */ .wand-feature{ background:#fff; border:3px solid rgba(228,0,63,.22); box-shadow:0 18px 44px rgba(28,16,36,.10); } .wand-feature h3{ color:var(--crimson); font-size:clamp(2.3rem,1.5rem + 4.2vw,4.2rem); text-shadow:3px 3px 0 rgba(176,0,32,.14); } .wand-feature .eyebrow{color:var(--crimson);opacity:.85} .wand-feature .wand-hero{ width:min(100%,1000px); filter:drop-shadow(0 10px 20px rgba(28,16,36,.16)); } .wand-feature .sparkles i{opacity:.55} /* Ketsy's caricature, another 25% larger */ .intro-split .character img{width:min(72%,375px)} @media(min-width:900px){ .intro-split .character img{width:100%;max-width:425px} .intro-split{grid-template-columns:minmax(300px,1fr) 1.5fr} }