@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Bungee&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap'); /* ============================================================================= ES-PAGE - the elementary SHOW page design system elementaryschoolassemblies.com Same family as the home page and Jurassic Journeys mockups: Baloo 2 display, Bungee small-caps labels, Nunito body, two-tone headings, the constant orange CTA. What is new here is that ONE stylesheet dresses TWELVE different shows. A page picks a palette class on and that is the whole difference: .es-science The Wacky Science Show .es-halloween Spooky Magic .es-bully No Bully Zone .es-christmas Christmas Magic .es-character Yes I Can .es-winter Winter Magic .es-reading I Love To Read .es-fieldday Field Day .es-math Goofy Kooky Math Show .es-mayhem Magical Mayhem .es-crime Crime Scene Science .es-virtual Virtual Science Each palette is six variables, sampled with PIL from that show's own logo artwork rather than guessed. Adding a fifth show (math, crime scene science, field day) means adding six variables, not a new stylesheet. Single-theme on purpose. A marketing page must look the same for every visitor, so every color is painted explicitly and nothing is left to inherit. ============================================================================= */ :root{ /* constants across all twelve shows */ --cta: #FF8A00; /* Cris's orange, the same button on every show page */ --cta-hov: #E07800; --ink: #1E2233; --muted: #5B6274; --paper: #FFFDF8; --rule: #E7E2D6; --white: #FFFFFF; --f-disp: "Baloo 2", "Trebuchet MS", system-ui, sans-serif; --f-lab: "Bungee", "Arial Black", sans-serif; --f-body: "Nunito", "Segoe UI", system-ui, sans-serif; --read: 68ch; /* Height of the Mago booking form. MEASURED, not guessed: all four forms were rendered headless at 314px, 360px and 530px wide and their content ends between 644px and 672px. The form does NOT reflow - it is one column of fields at every width - so one value serves phone and desktop, and there is no breakpoint here on purpose. 700px leaves about 30px of slack for font differences on a real device. The first guess was 620 desktop / 860 phone, which cut the Submit button off on desktop and left 190px of dead space on a phone. */ --form-h: 700px; } /* --------------------------------------------------------------------------- The palettes. --deep the dark ink the headings open in --accent the bright hue: fills, rules, chips, underlines --accent-dk the SAME hue darkened until it clears 3:1 on white, because the second half of every two-tone heading is set in it. Never set heading text in --accent: the lime and the gold both fail. --accent2 the show's third logo color, used sparingly for contrast --tint the pale band background --tint2 the second pale band, from the accent side --------------------------------------------------------------------------- */ /* The Wacky Science Show - purple and lime, straight off the show logo */ .es-science{ --deep:#4A1466; --deep-dk:#330A4A; --accent:#6FBF2A; --accent-dk:#3F7A0F; --accent2:#0089E0; --tint:#F4ECFB; --tint2:#EFF8E4; --hero-ar:4/5; } /* No Bully Zone - the superhero red, cyan and gold of the logo */ .es-bully{ --deep:#8E1116; --deep-dk:#65090D; --accent:#12A5C4; --accent-dk:#0A6E85; --accent2:#F0A830; --tint:#FDECEC; --tint2:#E7F6FA; --hero-ar:4/3; } /* Yes I Can - the navy and yellow of the logo, with its red for contrast */ .es-character{ --deep:#25336E; --deep-dk:#18234F; --accent:#D69200; --accent-dk:#8F6200; --accent2:#D81818; --tint:#EEF1FA; --tint2:#FCF4E0; --hero-ar:3/2; } /* I Love To Read - the pink of the logo, with its green */ .es-reading{ --deep:#9E0C57; --deep-dk:#71063D; --accent:#E0348F; --accent-dk:#B01C6C; --accent2:#5FA827; --tint:#FDEBF4; --tint2:#EFF7E5; --hero-ar:4/5; } /* --------------------------------------------------------------------------- BATCH 2 - the other eight elementary pages, added 2026-09-09. Same six-variable contract. Every pair is sampled from that show's own logo master, then checked two ways by _build/check_palettes.py: * --accent-dk clears 3:1 on white (it carries two-tone heading text) * --deep clears 4.5:1 against the white type on the deep bands * no palette sits within deltaE 35 of any of the other eleven Field Day is the one page with no logo of its own, so it takes grass and sky rather than art that does not exist. --------------------------------------------------------------------------- */ /* The Goofy Kooky Math Show - the logo's purple wordmark on its sky blue */ .es-math{ --deep:#5A2A7A; --deep-dk:#3F1D55; --accent:#2E9BE0; --accent-dk:#2E9BE0; --accent2:#F6841F; --tint:#F3EDF9; --tint2:#E8F4FC; --hero-ar:4/3; } /* Crime Scene Science - forensic slate with the logo's hot pink */ .es-crime{ --deep:#14323A; --deep-dk:#0E2329; --accent:#FF217A; --accent-dk:#FF217A; --accent2:#FFBA00; --tint:#EAF0F1; --tint2:#FFE9F1; --hero-ar:4/3; } /* Virtual Science - the Super Hero Science blue, red and yellow */ .es-virtual{ --deep:#123E7C; --deep-dk:#0D2B57; --accent:#E01B10; --accent-dk:#E01B10; --accent2:#FFD400; --tint:#E9F0FA; --tint2:#FDECEA; --hero-ar:4/3; } /* Spooky Magic - the logo's pumpkin orange over a not-too-scary grape */ .es-halloween{ --deep:#420C86; --deep-dk:#2E085E; --accent:#FF7105; --accent-dk:#F56A00; --accent2:#7BC618; --tint:#F1EAF9; --tint2:#FFF0E2; --hero-ar:4/3; } /* Christmas Magic - the logo's green and red */ .es-christmas{ --deep:#0B5C3A; --deep-dk:#084029; --accent:#E5233F; --accent-dk:#E5233F; --accent2:#FFC93C; --tint:#E8F4EE; --tint2:#FDEBEE; --hero-ar:4/3; } /* Winter Magic - the logo's midnight navy and ice blue */ .es-winter{ --deep:#1F1C5C; --deep-dk:#161440; --accent:#38B6D8; --accent-dk:#26A0C1; --accent2:#FF5529; --tint:#ECECF6; --tint2:#E6F6FA; --hero-ar:4/3; } /* Field Day - grass and sky. The only page with no logo of its own */ .es-fieldday{ --deep:#2E7D0E; --deep-dk:#20570A; --accent:#00A6D6; --accent-dk:#009ECC; --accent2:#FFC400; --tint:#EDF6E7; --tint2:#E4F6FB; --hero-ar:4/3; } /* Magical Mayhem - the fundraiser logo's purple and magenta */ .es-mayhem{ --deep:#6E0A78; --deep-dk:#4D0754; --accent:#D400CE; --accent-dk:#D400CE; --accent2:#FFC400; --tint:#F6E9F7; --tint2:#FBE6FA; --hero-ar:4/3; } /* --------------------------------------------------------------------------- base --------------------------------------------------------------------------- */ *{box-sizing:border-box;} .es-page{ background:var(--paper);color:var(--ink); font-family:var(--f-body);font-size:17px;line-height:1.68; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;height:auto;display:block;} a{color:var(--accent-dk);} :focus-visible{outline:3px solid var(--cta);outline-offset:3px;border-radius:4px;} h1,h2,h3,h4{font-family:var(--f-disp);color:var(--deep);margin:0;line-height:1.09; text-wrap:balance;} h1{font-size:clamp(32px,5vw,58px);font-weight:800;letter-spacing:-.01em;} h2{font-size:clamp(26px,3.5vw,42px);font-weight:800;margin:0 0 .45em;} h3{font-size:clamp(19px,2.1vw,25px);font-weight:700;margin:0 0 .4em;} h4{font-size:clamp(17px,1.7vw,20px);font-weight:700;margin:0 0 .3em;} p{margin:0 0 1.05em;} p:last-child{margin-bottom:0;} strong{font-weight:800;} /* Two-tone headings. The sentence opens in the deep show color and finishes in the accent, so the eye is carried across the whole line. is left alone for italics: .hl is the two-tone hook, not em. */ .hl{color:var(--accent-dk);} .dark .hl,.deepband .hl{color:var(--accent);} /* the 3-D lift on display type - same hard bottom edge the buttons carry */ h1,h2{text-shadow:0 2px 0 rgba(30,34,51,.10),0 5px 14px rgba(30,34,51,.10);} .dark h1,.dark h2,.dark h3,.deepband h2{text-shadow:0 2px 0 rgba(0,0,0,.38),0 6px 16px rgba(0,0,0,.30);} /* --------------------------------------------------------------------------- layout --------------------------------------------------------------------------- */ .sec{padding:clamp(46px,6vw,86px) clamp(18px,5vw,40px);position:relative;} .in{max-width:1120px;margin-inline:auto;min-width:0;} .narrow{max-width:var(--read);margin-inline:auto;} .band{background:var(--tint);} .band2{background:var(--tint2);} .white{background:var(--white);} .dark{background:var(--deep);color:#fff;} .dark h1,.dark h2,.dark h3{color:#fff;} .dark a{color:var(--accent);} .deepband{background:linear-gradient(160deg,var(--deep) 0%,var(--deep-dk) 100%);color:#fff;} .deepband h2,.deepband h3{color:#fff;} .lab{ font-family:var(--f-lab);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--accent-dk);margin:0 0 14px;display:block; } .dark .lab,.deepband .lab{color:var(--accent);} .center{text-align:center;} .lead{font-size:1.1rem;} /* a rule that echoes the accent, used under section headings */ .tick{width:74px;height:6px;border-radius:999px;background:var(--accent);margin:0 0 22px;} .center .tick{margin-inline:auto;} /* --------------------------------------------------------------------------- buttons --------------------------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;gap:9px; background:var(--cta);color:#fff; font-family:var(--f-disp);font-weight:800;font-size:1.02rem; padding:14px 28px;border-radius:999px;border:0;text-decoration:none;cursor:pointer; box-shadow:0 3px 0 var(--cta-hov); transition:transform .12s ease, box-shadow .12s ease; } .btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--cta-hov);} .btn:active{transform:translateY(1px);box-shadow:0 2px 0 var(--cta-hov);} .btn-ghost{background:transparent;color:var(--deep);box-shadow:inset 0 0 0 2.5px var(--deep);} .btn-ghost:hover{background:var(--deep);color:#fff;box-shadow:inset 0 0 0 2.5px var(--deep);} .dark .btn-ghost,.deepband .btn-ghost{color:#fff;box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.6);} .dark .btn-ghost:hover,.deepband .btn-ghost:hover{background:#fff;color:var(--deep);} .btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;} .center .btnrow{justify-content:center;} /* --------------------------------------------------------------------------- hero - the whole block in the left column, the show photo on the right. Below 900px it stacks PHOTO FIRST, so a phone opens on the show and not on a paragraph. (Same call as the Jurassic page; a full-width headline spanning both columns was tried there and put back.) --------------------------------------------------------------------------- */ .hero{ background: radial-gradient(120% 80% at 84% 4%, color-mix(in srgb,var(--accent) 26%, transparent) 0%, transparent 58%), radial-gradient(90% 70% at 4% 96%, color-mix(in srgb,var(--deep) 14%, transparent) 0%, transparent 62%), var(--paper); padding:clamp(30px,4.4vw,58px) clamp(18px,5vw,40px) clamp(42px,5.6vw,70px); border-bottom:4px solid var(--accent); } .hero-grid{max-width:1180px;margin-inline:auto;display:grid;gap:clamp(22px,3.2vw,44px); align-items:center;} .hero-shot{margin:0;order:-1;position:relative;} /* The studio portrait beside the headline. Shot on white, so a white card makes it read as a cut-out - and it is set CONTAIN, never cover, because this is the one photograph on the page where cropping is unforgivable: crop it and you take off the top of his hat. The soft accent wash behind stops the white card floating on the pale hero ground. */ .hero-shot.studio{ background: radial-gradient(80% 62% at 50% 46%, color-mix(in srgb,var(--accent) 22%, transparent) 0%, transparent 72%), #fff; border-radius:26px;border:5px solid var(--accent);padding:10px; box-shadow:0 18px 44px rgba(30,34,51,.22); } .hero-shot.studio img{width:100%;aspect-ratio:4/5;object-fit:contain; border-radius:18px;} /* Spooky Magic's hero is a LANDSCAPE frame - the cloth caught mid-pull, which Cris picked because it is the more dynamic of his two cloth shots. In the portrait card above it floats with deep white bands top and bottom, so this page gets a landscape card instead. Scoped to this one palette on purpose. Every palette declares a --hero-ar, but nothing has ever read it, so all twelve heroes are 4/5 today. Wiring the variable up properly would reshape the No Bully Zone and Yes I Can heroes on pages that are already live and signed off, which is not a change to make on the way past. */ .es-halloween .hero-shot.studio img{aspect-ratio:4/3;} /* For a page with no studio cut-out available: same card and border, but the picture FILLS it rather than floating on white, because a landscape stage shot set to contain leaves two white bands and looks like a mistake. Winter Magic used this until Cris found a studio shot for it, so nothing uses it today - kept because the next show without one will. */ .hero-shot.photo{ background:var(--deep-dk); border-radius:26px;border:5px solid var(--accent);padding:10px; box-shadow:0 18px 44px rgba(30,34,51,.22); } .hero-shot.photo img{width:100%;aspect-ratio:4/3;object-fit:cover; object-position:center 30%;border-radius:18px;} .hero h1 .h1-kw{ display:block;font-family:var(--f-lab);font-weight:400; font-size:clamp(10px,1.35vw,13px);letter-spacing:.16em;text-transform:uppercase; color:var(--accent-dk);margin-bottom:15px;text-shadow:none; } .hero h1 .hl{display:block;} .hero-sub{ font-family:var(--f-disp);font-weight:700;font-size:clamp(18px,2.4vw,27px); color:var(--deep);margin:16px 0 0;max-width:26ch;line-height:1.2; } .hero-body{margin:20px 0 0;font-size:1.05rem;max-width:56ch;} .hero-fine{margin-top:15px;font-size:.9rem;color:var(--muted);} .hero-logo{width:min(230px,58%);margin:0 0 18px;} @media(min-width:900px){ .hero-grid{grid-template-columns:1.08fr .92fr;} .hero-shot{order:0;} } .chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:20px 0 0;} .chips li{ font-family:var(--f-lab);font-size:10px;letter-spacing:.1em;text-transform:uppercase; background:var(--deep);color:#fff;padding:7px 14px;border-radius:999px; } .chips li:nth-child(2n){background:var(--accent-dk);} /* --------------------------------------------------------------------------- credibility bar --------------------------------------------------------------------------- */ .sig{background:var(--deep);color:#fff;padding:0;} .sig ul{list-style:none;margin:0;padding:16px clamp(18px,5vw,40px); display:flex;flex-wrap:wrap;gap:6px 34px;justify-content:center;align-items:center; max-width:1120px;margin-inline:auto;} .sig li{font-family:var(--f-lab);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; display:flex;align-items:baseline;gap:8px;} .sig b{font-family:var(--f-disp);font-size:24px;font-weight:800;color:var(--accent); letter-spacing:0;line-height:1;} /* --------------------------------------------------------------------------- marquees. Right MARGIN on each item, never gap on the container: a 2N-item track has 2N-1 gaps, so a -50% loop lands half a gap short and visibly hitches once a cycle. With margins, half the track is exactly N items. --------------------------------------------------------------------------- */ .mq{overflow:hidden;padding:18px 0;background:var(--deep-dk);} .mq-track{display:flex;width:max-content;animation:slide 68s linear infinite;} .mq-track img{height:210px;width:auto;border-radius:12px;margin-right:14px; border:3px solid rgba(255,255,255,.16);flex:0 0 auto;} .mq:hover .mq-track{animation-play-state:paused;} @keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}} @media(max-width:700px){.mq-track img{height:150px;}} @media(prefers-reduced-motion:reduce){ .mq-track,.rail-track,.badge-track{animation:none;} .mq,.rail,.badges{overflow-x:auto;} } /* --------------------------------------------------------------------------- split: copy one side, picture the other --------------------------------------------------------------------------- */ .split{display:grid;gap:clamp(22px,3.2vw,42px);align-items:center;} @media(min-width:820px){ .split{grid-template-columns:1.02fr .98fr;} .split.flip>figure{order:-1;} } .split figure{margin:0;} .split img{border-radius:18px;border:4px solid var(--accent);width:100%; box-shadow:0 12px 30px rgba(30,34,51,.13);} /* Stack shapes. Pick the one that matches the SOURCE photograph: a portrait forced into a 3:2 frame is what beheads people, and it happened four times before Cris caught it. Every crop is biased upward, because in nearly all of these photographs the face is in the top third. */ .stack{display:grid;gap:13px;} .stack img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center 18%;} .stack.sq img{aspect-ratio:1/1;} .stack.tall img{aspect-ratio:4/5;} /* Two portraits side by side stay short enough to sit beside a column of copy. Stacked, the same pair ran twice the height of the text next to it. */ .stack.pair{grid-template-columns:1fr 1fr;} .stack.pair img{aspect-ratio:4/5;object-position:center 12%;} .stack.pair.sq img{aspect-ratio:1/1;} .stack.free img{aspect-ratio:auto;object-fit:contain;background:#fff;} /* Mirrored, so the photograph of Cris pointing points AT the list beside it. This has to out-specify the reveal animation below: .pop.in sets `transform:none`, which silently ate a plain `.flipx{transform:scaleX(-1)}`. Both states are restated here at a specificity that wins. */ img.flipx{transform:scaleX(-1);} .js img.flipx.pop{transform:translateY(18px) scaleX(-1);} .js img.flipx.pop.in{transform:scaleX(-1);} figcaption{font-family:var(--f-lab);font-size:9px;letter-spacing:.09em;text-transform:uppercase; color:var(--muted);padding:9px 4px 0;} /* --------------------------------------------------------------------------- bulleted lists in his voice --------------------------------------------------------------------------- */ .ticks{list-style:none;padding:0;margin:0;display:grid;gap:12px;} .ticks li{position:relative;padding-left:38px;} .ticks li::before{ content:"";position:absolute;left:0;top:.34em;width:22px;height:22px;border-radius:50%; background:var(--accent); } .ticks li::after{ content:"";position:absolute;left:7px;top:.62em;width:8px;height:4px; border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg); } .dark .ticks li::before,.deepband .ticks li::before{background:var(--accent);} /* the show's routines, each with a chip saying how many students are involved */ .acts{list-style:none;padding:0;margin:0;display:grid;gap:14px;} .acts li{background:#fff;border:2px solid var(--rule);border-left:8px solid var(--accent); border-radius:14px;padding:16px 20px;box-shadow:0 6px 18px rgba(30,34,51,.06);} .acts .who{font-family:var(--f-lab);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase; color:#fff;background:var(--accent-dk);padding:5px 10px;border-radius:999px; display:inline-block;margin-bottom:8px;} /* --------------------------------------------------------------------------- the acronym block - H.E.R.O. / S.T.A.R. / R.E.A.D. / the Scientific Method. Every one of his shows hangs on a memory hook, so the system has a component for it rather than four one-off treatments. --------------------------------------------------------------------------- */ .letters{display:grid;gap:16px;margin-top:30px;} @media(min-width:760px){.letters{grid-template-columns:repeat(2,1fr);}} @media(min-width:1040px){.letters.four{grid-template-columns:repeat(4,1fr);}} .letter{background:#fff;border-radius:18px;padding:22px 22px 24px; border:3px solid var(--rule);box-shadow:0 10px 26px rgba(30,34,51,.09); display:flex;flex-direction:column;gap:4px;} .letter .glyph{ font-family:var(--f-disp);font-weight:800;font-size:54px;line-height:.9; color:var(--accent);margin-bottom:6px; } .letter h3{color:var(--deep);text-shadow:none;} .letter p{color:var(--muted);font-size:.97rem;} .deepband .letter{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2); box-shadow:none;} .deepband .letter h3{color:#fff;} .deepband .letter p{color:rgba(255,255,255,.86);} /* --------------------------------------------------------------------------- cards --------------------------------------------------------------------------- */ .grid{display:grid;gap:16px;} @media(min-width:700px){.grid{grid-template-columns:repeat(2,1fr);}} @media(min-width:1000px){.grid.three{grid-template-columns:repeat(3,1fr);}} .card{background:#fff;border-radius:16px;padding:22px 22px 24px;border:2px solid var(--rule); box-shadow:0 8px 22px rgba(30,34,51,.07);} .card h3{color:var(--deep);text-shadow:none;} .card p{color:var(--muted);font-size:.97rem;margin:0;} .card .num{font-family:var(--f-lab);font-size:10px;letter-spacing:.12em;color:var(--accent-dk); display:block;margin-bottom:8px;} /* --------------------------------------------------------------------------- pull quote --------------------------------------------------------------------------- */ .pull{padding:clamp(38px,5vw,64px) clamp(18px,5vw,40px);} .pull blockquote{max-width:900px;margin:0 auto;text-align:center;} .pull p{font-family:var(--f-disp);font-weight:700;font-size:clamp(21px,3vw,34px); line-height:1.24;color:var(--deep);margin:0 0 16px;} .deepband.pull p,.dark.pull p{color:#fff;} .pull cite{font-style:normal;font-family:var(--f-lab);font-size:10px;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);line-height:2;} .deepband.pull cite,.dark.pull cite{color:rgba(255,255,255,.75);} .pull cite b{color:var(--accent-dk);} .deepband.pull cite b,.dark.pull cite b{color:var(--accent);} /* --------------------------------------------------------------------------- testimonial rail - auto-scrolling, because a static row of three makes it look as though three is all he has. His words: people glance and assume. --------------------------------------------------------------------------- */ /* The two rails are separate full-width bands so that a live-build widget split has somewhere to fall between them. Collapsing the vertical padding is what keeps that boundary invisible. */ .sec.railtop{padding-bottom:14px;} .sec.railband{padding-top:0;padding-bottom:14px;} .sec.railfoot{padding-top:22px;} .rail{overflow:hidden;padding:6px 0 10px;} .rail-track{display:flex;width:max-content;animation:slide 150s linear infinite;} .rail:hover .rail-track{animation-play-state:paused;} .rail blockquote{ flex:0 0 auto;width:min(400px,84vw);margin:0 16px 0 0;background:#fff; border-radius:18px;padding:24px 24px 22px;border:2px solid var(--rule); border-top:7px solid var(--accent);box-shadow:0 10px 26px rgba(30,34,51,.08); display:flex;flex-direction:column; } .rail blockquote p{font-size:.97rem;color:var(--ink);margin:0 0 14px;} .rail cite{font-style:normal;margin-top:auto;font-size:.86rem;line-height:1.5;color:var(--muted);} .rail cite b{display:block;font-family:var(--f-disp);font-weight:800;font-size:1.02rem; color:var(--deep);} .rail cite .role{color:var(--accent-dk);font-weight:700;} .rail-2 .rail-track{animation-duration:190s;animation-direction:reverse;} /* a long testimonial gets its own wider card rather than being cut */ .rail blockquote.long{width:min(520px,88vw);} /* the badge strip: his own pull-quote graphics, transparent PNGs, so they sit on the band color without a white box behind them */ .badges{overflow:hidden;padding:8px 0;} .badge-track{display:flex;align-items:center;width:max-content;animation:slide 90s linear infinite;} .badge-track img{height:74px;width:auto;margin-right:26px;flex:0 0 auto;} .badges:hover .badge-track{animation-play-state:paused;} @media(max-width:700px){.badge-track img{height:56px;margin-right:18px;}} /* --------------------------------------------------------------------------- photo gallery grid --------------------------------------------------------------------------- */ .gal{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);} @media(min-width:700px){.gal{grid-template-columns:repeat(3,1fr);}} @media(min-width:1000px){.gal{grid-template-columns:repeat(4,1fr);}} .gal img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 26%; border-radius:14px; border:3px solid var(--accent);box-shadow:0 8px 20px rgba(30,34,51,.12);} .gal.wide img{aspect-ratio:4/3;} /* --------------------------------------------------------------------------- video - embedded and played IN PLACE. It used to be a still linking to youtu.be, which sent the visitor off the site. Cris caught that on the four live pages on 2026-09-09 and he is right: the job of these pages is to keep somebody here until they fill the form in. Two things were tried and rejected before landing here, both MEASURED in headless Chrome rather than assumed: * a :target click-to-play facade keeping his own cropped still. It costs a second click and buys nothing - the hidden iframe contacts YouTube on page load anyway. display:none, height:0 and content-visibility:hidden were all tested and every one of them loaded. * that facade plus autoplay=1, which would have won the click back. Rejected because the iframe demonstrably loads while hidden, so a browser that ignored its autoplay policy would play audio at page load. THE OVERLAY IS SCOPED TO a.video ON PURPOSE. The orange play button is drawn with ::after, and on the new markup it would paint a solid disc on top of the player. Scoping it to the anchor means the stylesheet and the widgets can be deployed in either order without a broken-looking page in between. --------------------------------------------------------------------------- */ .video{position:relative;display:block;border-radius:20px;overflow:hidden; border:5px solid var(--accent);background:var(--deep-dk);text-decoration:none; box-shadow:0 16px 40px rgba(30,34,51,.2);} .video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;} .video img{width:100%;aspect-ratio:16/9;object-fit:cover;} a.video::after{ content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:88px;height:88px;border-radius:50%;background:var(--cta); box-shadow:0 8px 26px rgba(0,0,0,.4); } a.video .play{ position:absolute;left:50%;top:50%;transform:translate(-42%,-50%);z-index:2; border-left:28px solid #fff;border-top:17px solid transparent; border-bottom:17px solid transparent; } a.video:hover::after{background:var(--cta-hov);} .videos{display:grid;gap:20px;} @media(min-width:900px){.videos.two{grid-template-columns:repeat(2,1fr);}} /* --------------------------------------------------------------------------- the four "Dear ..." cards. These are LINKS on the live site, but they are flat teal banner GRAPHICS - pictures of words. Rebuilt here as real text so they carry their own headings, stay readable at any size, and mean something to a search engine. --------------------------------------------------------------------------- */ .dears{display:grid;gap:14px;margin-top:26px;} @media(min-width:620px){.dears{grid-template-columns:repeat(2,1fr);}} @media(min-width:1040px){.dears{grid-template-columns:repeat(4,1fr);}} .dear{ display:flex;flex-direction:column;gap:6px;text-decoration:none; background:#fff;border:3px solid var(--deep);border-radius:16px;padding:20px 20px 22px; box-shadow:0 8px 0 var(--deep); transition:transform .12s ease,box-shadow .12s ease; } .dear:hover{transform:translateY(-3px);box-shadow:0 11px 0 var(--deep);} .dear .to{font-family:var(--f-lab);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--accent-dk);} .dear b{font-family:var(--f-disp);font-size:1.32rem;font-weight:800;color:var(--deep); line-height:1.15;} .dear span.sub{font-size:.92rem;color:var(--muted);} .dear .go{font-family:var(--f-disp);font-weight:800;color:var(--cta-hov);margin-top:6px; font-size:.95rem;} /* The free-assembly card is a different KIND of offer from the four letters, and left in the grid it dropped onto a second row on its own looking like a mistake. It spans the full width instead, as a banner. */ .dear.free{background:var(--deep);border-color:var(--deep);box-shadow:0 8px 0 var(--deep-dk); grid-column:1/-1;} @media(min-width:620px){ .dear.free{flex-direction:row;align-items:center;gap:20px;flex-wrap:wrap;} .dear.free .to{flex:0 0 auto;} .dear.free b{flex:0 0 auto;} .dear.free span.sub{flex:1 1 260px;} .dear.free .go{margin-top:0;flex:0 0 auto;} } .dear.free b,.dear.free .to{color:#fff;} .dear.free .to{color:var(--accent);} .dear.free span.sub{color:rgba(255,255,255,.82);} .dear.free .go{color:var(--accent);} .dear.free:hover{box-shadow:0 11px 0 var(--deep-dk);} /* --------------------------------------------------------------------------- internal program tiles --------------------------------------------------------------------------- */ .progs{display:grid;gap:14px;margin-top:24px;} @media(min-width:640px){.progs{grid-template-columns:repeat(2,1fr);}} @media(min-width:1000px){.progs{grid-template-columns:repeat(3,1fr);}} .prog{display:block;text-decoration:none;background:#fff;border:2px solid var(--rule); border-radius:16px;padding:18px 20px 20px;box-shadow:0 8px 20px rgba(30,34,51,.07); transition:transform .12s ease;} .prog:hover{transform:translateY(-3px);border-color:var(--accent);} .prog .cat{font-family:var(--f-lab);font-size:9px;letter-spacing:.12em;text-transform:uppercase; color:var(--accent-dk);display:block;margin-bottom:7px;} .prog h3{font-size:1.16rem;margin-bottom:.25em;text-shadow:none;} .prog p{font-size:.93rem;color:var(--muted);margin:0;} /* --------------------------------------------------------------------------- guarantee seal --------------------------------------------------------------------------- */ .guar{display:grid;gap:26px;align-items:center;} @media(min-width:840px){.guar{grid-template-columns:220px 1fr;}} .seal{ width:210px;height:210px;border-radius:50%;margin-inline:auto; background:var(--cta);color:#fff;display:grid;place-content:center;text-align:center; box-shadow:0 0 0 9px rgba(255,255,255,.28),0 16px 40px rgba(0,0,0,.28); font-family:var(--f-disp);font-weight:800;line-height:1.06;padding:18px; } .seal .big{font-size:52px;display:block;} .seal .sm{font-family:var(--f-lab);font-size:9.5px;letter-spacing:.11em;display:block; margin-top:8px;line-height:1.7;} /* --------------------------------------------------------------------------- booking: schedule link + the form --------------------------------------------------------------------------- */ .booking{display:grid;gap:24px;align-items:start;} @media(min-width:960px){.booking{grid-template-columns:.92fr 1.08fr;}} .formcard{background:#fff;border-radius:20px;padding:10px;border:4px solid var(--accent); box-shadow:0 16px 40px rgba(0,0,0,.2);} .formcard .head{padding:14px 16px 4px;} .formcard .head h3{margin-bottom:.15em;text-shadow:none;} .formcard .head p{font-size:.92rem;color:var(--muted);} .form-slot{ height:var(--form-h);border-radius:14px;border:2px dashed var(--accent); background: repeating-linear-gradient(45deg,rgba(0,0,0,.022) 0 12px,transparent 12px 24px), var(--tint); display:grid;place-content:center;text-align:center;padding:26px;gap:8px;margin:10px; } .form-slot .lab{margin:0;} .form-slot b{font-family:var(--f-disp);font-size:1.25rem;color:var(--deep);} .form-slot code{font-family:ui-monospace,Consolas,monospace;font-size:.8rem;color:var(--muted); background:#fff;padding:4px 9px;border-radius:6px;border:1px solid var(--rule); word-break:break-all;} .datebox{background:#fff;border:3px solid var(--deep);border-radius:18px;padding:22px 24px; box-shadow:0 10px 0 var(--deep);} .datebox h3{text-shadow:none;} .phone{font-family:var(--f-disp);font-weight:800;font-size:clamp(26px,3.4vw,38px); color:var(--cta-hov);text-decoration:none;display:inline-block;line-height:1.1;} /* --------------------------------------------------------------------------- FAQ -
, no JavaScript --------------------------------------------------------------------------- */ .faq{display:grid;gap:11px;margin-top:26px;} .faq details{background:#fff;border:2px solid var(--rule);border-radius:14px; padding:2px 20px;box-shadow:0 6px 16px rgba(30,34,51,.05);} .faq summary{font-family:var(--f-disp);font-weight:800;font-size:1.08rem;color:var(--deep); cursor:pointer;padding:16px 0;list-style:none;display:flex;justify-content:space-between; gap:16px;align-items:center;} .faq summary::-webkit-details-marker{display:none;} .faq summary::after{content:"+";font-size:1.6rem;color:var(--accent-dk);line-height:1;} .faq details[open] summary::after{content:"\2212";} .faq p{padding:0 0 18px;margin:0;color:var(--muted);} .faq p + p{padding-top:0;} /* --------------------------------------------------------------------------- service area + NAP --------------------------------------------------------------------------- */ .nap{font-family:var(--f-lab);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; line-height:2.1;margin-top:22px;} .nap b{color:var(--accent);} /* --------------------------------------------------------------------------- flyer downloads --------------------------------------------------------------------------- */ .flyers{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px;} .flyer{display:flex;align-items:center;gap:12px;text-decoration:none;background:#fff; border:2px solid var(--rule);border-radius:12px;padding:12px 18px;color:var(--ink); font-weight:700;font-size:.95rem;box-shadow:0 6px 16px rgba(30,34,51,.06);} .flyer:hover{border-color:var(--accent);} .flyer .ico{font-size:1.3rem;} /* --------------------------------------------------------------------------- reveal on scroll. TRANSFORM ONLY, never opacity, and the resting state is applied by JS - so with scripting off nothing is ever hidden. --------------------------------------------------------------------------- */ .js .pop{transform:translateY(18px) scale(.985);transition:transform .5s cubic-bezier(.2,.9,.3,1);} .js .pop.in{transform:none;} @media(prefers-reduced-motion:reduce){.js .pop{transform:none;transition:none;}} /* --------------------------------------------------------------------------- mockup furniture - the note bar at the top. Delete before anything ships. --------------------------------------------------------------------------- */ .mocknote{background:#101322;color:#fff;padding:12px clamp(18px,5vw,40px); font-size:.84rem;line-height:1.6;} .mocknote b{font-family:var(--f-lab);font-size:9px;letter-spacing:.13em;color:#FFC24A; display:block;margin-bottom:3px;} .mocknote a{color:#7FD4FF;} @media print{.mocknote{display:none;}} /* ---- live only ------------------------------------------------ Mago's own loader script is deliberately not on the page (a script tag in an Elementor HTML widget 403s on save, and the form is a cross-origin iframe the loader cannot reach into anyway). So the height comes from --form-h at the top of this file, which was MEASURED off the live forms rather than guessed. There is no phone breakpoint because the form does not reflow: it is one column of fields at 314px and at 530px alike. ---------------------------------------------------------------- */ .es-page .form-live{padding:10px;} .es-page .mago-form-container{width:100%;border:0;overflow:hidden; display:block;height:var(--form-h);}