/* Solver Society integrated preview: shared interaction/footer layer */ :root{--ss-neon:#00E5FF;--ss-ink:#eefaff;--ss-muted:#a9c7d5;} .ss-social-strip{position:relative;padding:26px 20px;border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(4,27,47,.44),rgba(2,18,33,.58));color:var(--ss-ink);font-family:Inter,system-ui,sans-serif} .ss-social-inner{width:min(1180px,calc(100% - 8px));margin:0 auto;display:flex;gap:24px;align-items:center;justify-content:space-between} .ss-social-copy strong{display:block;font-family:'Inter Tight',Inter,sans-serif;font-size:18px}.ss-social-copy span{display:block;color:var(--ss-muted);font-size:12px;margin-top:3px} .ss-social-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.ss-social-links a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 13px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.055);color:#fff;text-decoration:none;font-weight:800;font-size:12px;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease}.ss-social-links a:hover,.ss-social-links a:focus-visible{transform:translateY(-2px);border-color:rgba(0,229,255,.82);background:rgba(0,229,255,.08);box-shadow:0 0 0 1px rgba(0,229,255,.16),0 0 22px rgba(0,229,255,.32);outline:none} /* Keep the neon response the user approved around clickable buttons. */ :is(a.btn,button.btn,a.lab-btn,button.lab-btn,.nav-cta,.car-btn,.card-link,.mini-btn,.read,.go,.mini-link,.day-action,.challenge-choice,.quest-option,.door):hover, :is(a.btn,button.btn,a.lab-btn,button.lab-btn,.nav-cta,.car-btn,.card-link,.mini-btn,.read,.go,.mini-link,.day-action,.challenge-choice,.quest-option,.door):focus-visible{box-shadow:0 0 0 1px rgba(0,229,255,.28),0 0 24px rgba(0,229,255,.30)!important} .ss-locked{cursor:not-allowed!important;opacity:.78!important;filter:none!important;box-shadow:none!important}.ss-locked:hover{transform:none!important;box-shadow:none!important} .ss-preview-note{font-size:11px;color:#94b2c1;line-height:1.45} /* Learn: obvious current-day video entry. Actual published video URL plugs into this shell later. */ .learn-video-shell{margin:18px 0 0;display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr);gap:0;border-radius:22px;overflow:hidden;border:1px solid rgba(0,229,255,.24);background:linear-gradient(145deg,rgba(8,44,70,.94),rgba(5,27,47,.96));box-shadow:0 24px 56px -38px #000,0 0 24px rgba(0,229,255,.09)} .learn-video-screen{position:relative;min-height:230px;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,rgba(0,229,255,.18),transparent 42%),linear-gradient(145deg,#102c47,#06172a);overflow:hidden}.learn-video-screen:before{content:'MONDAY • VARIABLES & EXPRESSIONS';position:absolute;left:16px;top:15px;font:900 10px/1 'Inter Tight',Inter,sans-serif;letter-spacing:.14em;color:#dffcff}.learn-video-screen:after{content:'3x + 7';position:absolute;right:18px;bottom:16px;font:800 32px/1 'JetBrains Mono',monospace;color:rgba(255,255,255,.2)} .learn-play{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;text-decoration:none;color:#00151b;background:linear-gradient(180deg,#8cf7ff,#00E5FF);font-size:30px;padding-left:5px;border:1px solid rgba(255,255,255,.72);box-shadow:0 0 0 8px rgba(0,229,255,.08),0 0 34px rgba(0,229,255,.45),0 14px 30px rgba(0,0,0,.35);transition:.16s}.learn-play:hover,.learn-play:focus-visible{transform:scale(1.06);box-shadow:0 0 0 9px rgba(0,229,255,.10),0 0 42px rgba(0,229,255,.64),0 16px 34px rgba(0,0,0,.38);outline:none} .learn-video-copy{padding:25px 28px;display:flex;flex-direction:column;justify-content:center}.learn-video-copy small{font:900 10px/1 'Inter Tight',Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#84f3ff}.learn-video-copy h3{font-family:'Inter Tight',Inter,sans-serif;font-size:28px;line-height:1.05;margin:9px 0 8px}.learn-video-copy p{color:#c8dce7;line-height:1.55;margin:0}.learn-video-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px} /* Challenge Lab additional duo art */ .lab-collab{width:min(1180px,calc(100% - 36px));margin:8px auto 52px;display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);align-items:center;border-radius:26px;border:1px solid rgba(0,229,255,.20);background:linear-gradient(150deg,rgba(10,50,81,.92),rgba(5,24,43,.96));box-shadow:0 4px 0 #0b2744,0 10px 0 #04101d,0 30px 55px -36px #000;overflow:hidden}.lab-collab-art{min-height:280px;display:flex;align-items:flex-end;justify-content:center;background:radial-gradient(circle at 50% 65%,rgba(0,229,255,.17),transparent 48%)}.lab-collab-art img{max-width:100%;max-height:330px;object-fit:contain;filter:drop-shadow(0 18px 20px rgba(0,0,0,.38))}.lab-collab-copy{padding:28px 34px}.lab-collab-copy h3{font-family:'Inter Tight',Inter,sans-serif;font-size:32px;text-transform:uppercase;margin:7px 0 10px}.lab-collab-copy p{color:#b9ceda;line-height:1.6} @media(max-width:760px){.ss-social-inner{display:block}.ss-social-links{justify-content:flex-start;margin-top:14px}.learn-video-shell,.lab-collab{grid-template-columns:1fr}.learn-video-screen{min-height:210px}.lab-collab-art{min-height:220px}} @media(prefers-reduced-motion:reduce){.ss-social-links a,.learn-play{transition:none!important}} /* ========================================================= Integrated v0.2 — unified navigation + footer ========================================================= */ .ss-global-header{position:relative;z-index:200;background:linear-gradient(180deg,rgba(2,18,33,.985),rgba(4,29,49,.965));border-bottom:1px solid rgba(105,224,255,.28);box-shadow:0 12px 28px rgba(0,8,18,.18);font-family:Inter,system-ui,sans-serif;color:#fff} .ss-header-main,.ss-header-sub{width:min(1320px,calc(100% - 34px));margin:0 auto;display:grid;grid-template-columns:158px minmax(0,1fr) 230px;align-items:center;column-gap:18px} .ss-header-main{min-height:78px;padding:8px 0 6px}.ss-header-sub{min-height:41px;padding:0 0 7px} .ss-header-logo{display:flex;align-items:center;justify-content:flex-start;text-decoration:none;min-width:0}.ss-header-logo img{width:124px;height:auto;max-height:68px;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(0,0,0,.22))} .ss-header-primary,.ss-header-secondary{display:flex;align-items:center;justify-content:center;gap:clamp(13px,2vw,29px);min-width:0} .ss-header-primary a,.ss-header-secondary a{position:relative;color:#dbeaf2;text-decoration:none;font-weight:800;white-space:nowrap;letter-spacing:.005em;transition:color .16s ease,text-shadow .16s ease} .ss-header-primary a{font-size:13px}.ss-header-secondary a{font-size:12px;color:#bcd2df} .ss-header-primary a:hover,.ss-header-primary a:focus-visible,.ss-header-secondary a:hover,.ss-header-secondary a:focus-visible,.ss-header-primary a[aria-current="page"],.ss-header-secondary a[aria-current="page"]{color:#fff;text-shadow:0 0 15px rgba(0,229,255,.66);outline:none} .ss-header-primary a[aria-current="page"]::after,.ss-header-secondary a[aria-current="page"]::after{content:"";position:absolute;left:12%;right:12%;bottom:-9px;height:2px;border-radius:99px;background:#00E5FF;box-shadow:0 0 10px rgba(0,229,255,.8)} .ss-header-tools{display:flex;justify-content:flex-end;align-items:center;gap:9px}.ss-header-search,.ss-header-start,.ss-header-store{display:inline-flex;align-items:center;justify-content:center;min-height:36px;border-radius:999px;text-decoration:none;font-weight:900;font-size:11px;white-space:nowrap;transition:.17s ease} .ss-header-search{padding:8px 12px;color:#d4e8f1;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.045)} .ss-header-start{padding:8px 14px;color:#02202b;background:linear-gradient(180deg,#9ff9ff,#00E5FF);border:1px solid rgba(255,255,255,.55)} .ss-header-store{justify-self:end;padding:8px 15px;color:#142000;background:linear-gradient(180deg,#fff184,#FFEA00);border:1px solid rgba(255,255,255,.48);box-shadow:0 5px 13px rgba(0,0,0,.24)} .ss-header-search:hover,.ss-header-search:focus-visible,.ss-header-start:hover,.ss-header-start:focus-visible,.ss-header-store:hover,.ss-header-store:focus-visible{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(0,229,255,.25),0 0 22px rgba(0,229,255,.34);outline:none} .ss-sub-spacer{width:1px;height:1px} .ss-global-footer{position:relative;z-index:50;background:linear-gradient(180deg,#061a2d,#03111e);border-top:1px solid rgba(0,229,255,.20);color:#d9eaf2;font-family:Inter,system-ui,sans-serif;padding:30px 20px 17px} .ss-footer-inner{width:min(1180px,100%);margin:0 auto}.ss-footer-grid{display:grid;grid-template-columns:1.15fr .85fr .75fr;gap:34px;align-items:center} .ss-footer-brand img{width:150px;height:auto;display:block;filter:drop-shadow(0 6px 9px rgba(0,0,0,.25))}.ss-footer-brand p{margin:9px 0 0;color:#9fb9c7;font-size:12px;line-height:1.55;max-width:310px} .ss-footer-title{font-family:'Inter Tight',Inter,sans-serif;font-size:15px;font-weight:900;color:#fff;margin-bottom:10px}.ss-footer-socials{display:flex;gap:10px;flex-wrap:wrap} .ss-social-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.16);text-decoration:none;transition:.16s ease}.ss-social-icon svg{width:21px;height:21px;display:block;fill:currentColor;stroke:currentColor}.ss-social-icon:hover,.ss-social-icon:focus-visible{transform:translateY(-2px);color:#fff;border-color:rgba(0,229,255,.80);background:rgba(0,229,255,.08);box-shadow:0 0 0 1px rgba(0,229,255,.16),0 0 22px rgba(0,229,255,.32);outline:none} .ss-footer-links{display:grid;grid-template-columns:1fr 1fr;gap:7px 18px}.ss-footer-links a{color:#b8cfdb;text-decoration:none;font-size:12px;font-weight:700}.ss-footer-links a:hover,.ss-footer-links a:focus-visible{color:#fff;text-shadow:0 0 10px rgba(0,229,255,.5);outline:none}.ss-footer-copy{margin-top:22px;padding-top:13px;border-top:1px solid rgba(255,255,255,.08);color:#7894a4;font-size:10px;text-align:center} .ss-social-strip{display:none!important} @media(max-width:980px){.ss-header-main,.ss-header-sub{grid-template-columns:122px 1fr 178px}.ss-header-logo img{width:106px}.ss-header-primary{gap:15px}.ss-header-primary a{font-size:11px}.ss-header-secondary{gap:18px}.ss-header-search{display:none}.ss-footer-grid{grid-template-columns:1fr 1fr}.ss-footer-site{grid-column:1/-1}} @media(max-width:720px){.ss-header-main,.ss-header-sub{width:min(100% - 22px,1320px);grid-template-columns:100px 1fr;gap:8px 12px}.ss-header-main{min-height:auto;padding:8px 0}.ss-header-logo{grid-row:1/3}.ss-header-logo img{width:92px}.ss-header-primary{justify-content:flex-start;overflow-x:auto;padding:4px 0 7px;gap:16px;scrollbar-width:none}.ss-header-primary::-webkit-scrollbar,.ss-header-secondary::-webkit-scrollbar{display:none}.ss-header-tools{justify-content:flex-start}.ss-header-start{min-height:31px;padding:6px 11px}.ss-header-sub{display:flex;align-items:center;justify-content:space-between;padding-bottom:8px}.ss-sub-spacer{display:none}.ss-header-secondary{justify-content:flex-start;overflow-x:auto;gap:15px;padding-right:10px}.ss-header-store{flex:0 0 auto;font-size:10px;padding:7px 10px}.ss-footer-grid{grid-template-columns:1fr;gap:24px}.ss-footer-site{grid-column:auto}.ss-footer-brand img{width:135px}} /* Challenge Lab: exact transparent pose assets, preserving every ear/cap edge. */ .challenge-page .hero-bandit img,.challenge-page .hero-sunny img,.challenge-page .console-bandit img,.challenge-page .console-sunny img,.challenge-page .duo-left img,.challenge-page .duo-right img,.lab-collab-art img{object-fit:contain!important;object-position:center bottom!important} /* Solver Squad Elite: keep the blue brick idea, make it read as a gallery rather than a station. */ .elite-page{background-color:#0a315e!important;background-image:radial-gradient(58rem 26rem at 50% 0%,rgba(0,229,255,.18),transparent 68%),radial-gradient(36rem 28rem at 8% 58%,rgba(120,104,255,.08),transparent 70%),radial-gradient(36rem 28rem at 92% 45%,rgba(42,171,255,.09),transparent 70%),linear-gradient(90deg,transparent 0 86px,rgba(0,15,35,.36) 87px,rgba(130,211,255,.08) 89px,transparent 91px),linear-gradient(0deg,transparent 0 38px,rgba(0,15,35,.40) 39px,rgba(141,216,255,.07) 41px,transparent 43px),linear-gradient(135deg,#15518c 0%,#0f4479 42%,#0b3768 66%,#124a82 100%)!important;background-size:auto,auto,auto,176px 82px,176px 82px,auto!important;background-position:center top,left center,right center,0 0,0 0,0 0!important} .elite-page::after{box-shadow:inset 0 0 105px rgba(0,8,20,.40)!important}.week-row{border-radius:20px!important;background:linear-gradient(145deg,rgba(14,55,91,.66),rgba(6,31,58,.54))!important;border-color:rgba(174,228,255,.17)!important;box-shadow:0 16px 36px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.08)!important}.week-row::before,.week-row::after{display:none!important}.badge-backer::before{clip-path:none!important;border-radius:28px!important;width:188px!important;height:214px!important;background:linear-gradient(145deg,rgba(20,72,111,.82),rgba(6,36,66,.78))!important;border:1px solid rgba(165,229,255,.30)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 36px rgba(0,0,0,.28),0 0 28px rgba(0,229,255,.08)!important}.badge-medal{border-color:#d9b343!important;outline-color:#7d5d14!important}.name-plaque{border-color:rgba(224,192,91,.25)!important;background:linear-gradient(180deg,rgba(27,78,118,.92),rgba(9,38,69,.95))!important;box-shadow:0 7px 0 #06213b,0 12px 17px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.13)!important} /* Mascots: same fun showroom, dial brightness back so it sits with the rest of the site. */ .mascot-page{background:radial-gradient(58rem 32rem at 50% 9%,rgba(86,228,244,.20),transparent 64%),radial-gradient(42rem 30rem at 8% 30%,rgba(0,229,255,.10),transparent 68%),radial-gradient(44rem 32rem at 92% 56%,rgba(97,173,255,.10),transparent 70%),linear-gradient(180deg,#083d5c 0%,#07566e 20%,#074763 38%,#06324e 64%,#041d31 100%)!important}.teacher-beam{opacity:.35!important}.teacher-halo{opacity:.72}.teacher-plinth{box-shadow:inset 0 8px 20px rgba(255,255,255,.16),0 0 28px rgba(0,229,255,.28),0 24px 30px rgba(0,18,32,.24)!important}.lineup-glass{background:radial-gradient(100% 72% at 50% 0%,rgba(169,251,255,.13),transparent 52%),linear-gradient(155deg,rgba(27,116,143,.22),rgba(6,52,78,.40) 60%,rgba(3,29,49,.58))!important} /* ========================================================= Integrated v0.3 — evening polish pass (Aug 17) Homepage content intentionally left for tomorrow. ========================================================= */ /* Larger shared logo and a more generous search touch target. */ .ss-header-main,.ss-header-sub{ grid-template-columns:190px minmax(0,1fr) 250px; } .ss-header-logo img{ width:154px; max-height:76px; } .ss-header-search{ min-width:118px; padding:8px 20px; } /* Store is intentionally quiet until launch — no yellow beacon yet. */ .ss-header-store{ color:#b9ceda; background:rgba(255,255,255,.045); border:1px solid rgba(188,222,238,.18); box-shadow:none; } .ss-header-store:hover,.ss-header-store:focus-visible{ color:#fff; background:rgba(0,229,255,.06); border-color:rgba(0,229,255,.40); box-shadow:0 0 0 1px rgba(0,229,255,.10),0 0 18px rgba(0,229,255,.18); } /* Footer must always remain part of document flow; never ride over content. */ .ss-global-footer{position:static!important;transform:none!important;inset:auto!important;} /* Learn: create a calm aurora handoff before the footer so it cannot feel like it rises over the page. */ body.ss-learn-page main.page{padding-bottom:82px;} body.ss-learn-page main.page + .ss-global-footer{ margin-top:0!important; border-top:1px solid rgba(0,229,255,.14); background:linear-gradient(180deg,#06182d,#041526 56%,#03111e); } /* Utility/legal pages: Notebook-family paper card + Aurora Board accents. */ body.ss-utility-page{ min-height:100vh; background: radial-gradient(52rem 34rem at 88% 5%,rgba(0,229,255,.18),transparent 68%), radial-gradient(46rem 34rem at 7% 35%,rgba(0,200,83,.10),transparent 70%), radial-gradient(46rem 38rem at 88% 78%,rgba(94,99,255,.10),transparent 72%), linear-gradient(180deg,#061426 0%,#092744 48%,#071a30 100%)!important; color:#eef7ff!important; } body.ss-utility-page .wall, body.ss-utility-page .wall2, body.ss-utility-page .vig, body.ss-utility-page #ss-depth{display:none!important;} body.ss-utility-page .wrap{ min-height:100vh; background: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:38px 38px; } body.ss-utility-page main{ max-width:900px!important; padding:clamp(42px,7vw,82px) clamp(18px,4vw,36px) 92px!important; } body.ss-utility-page .card{ position:relative; overflow:hidden; color:#142339!important; background:linear-gradient(180deg,#f7f2e8,#ece3d4)!important; border:1px solid rgba(255,255,255,.70)!important; border-radius:20px!important; box-shadow:0 34px 78px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.88)!important; padding:clamp(26px,4.5vw,50px)!important; } body.ss-utility-page .card::before{ content:""; position:absolute;inset:92px 0 24px; pointer-events:none; background:repeating-linear-gradient(180deg,transparent 0 31px,rgba(69,114,153,.10) 31px 32px); } body.ss-utility-page .card > *{position:relative;z-index:1;} body.ss-utility-page .card::after{ content:""; position:absolute;left:34px;top:0;bottom:0;width:2px; background:rgba(193,68,14,.16); } body.ss-utility-page h1{color:#102238!important;text-shadow:none!important;} body.ss-utility-page h2{color:#0b5578!important;} body.ss-utility-page p, body.ss-utility-page li, body.ss-utility-page .sub{color:#405169!important;} body.ss-utility-page .stamp{color:#728196!important;} body.ss-utility-page main a{color:#0b628b!important;font-weight:700;} body.ss-utility-page main a:hover, body.ss-utility-page main a:focus-visible{color:#083f5c!important;text-decoration:underline;} body.ss-utility-page .ss-global-footer{background:linear-gradient(180deg,#06192d,#03111e)!important;} @media(max-width:980px){ .ss-header-main,.ss-header-sub{grid-template-columns:145px minmax(0,1fr) 190px;} .ss-header-logo img{width:126px;} .ss-header-search{min-width:96px;padding-inline:14px;} } @media(max-width:720px){ .ss-header-main,.ss-header-sub{grid-template-columns:112px 1fr;} .ss-header-logo img{width:104px;} body.ss-utility-page .card::after{left:22px;} } /* v3.5 — desktop header consolidated to one line. Tablet/mobile may wrap for readability. */ @media (min-width:981px){ .ss-header-main{width:min(1460px,calc(100% - 28px));grid-template-columns:132px minmax(0,1fr) auto;column-gap:14px;min-height:78px;padding:7px 0} .ss-header-primary{gap:clamp(9px,1.15vw,18px);justify-content:center;overflow:visible} .ss-header-primary a{font-size:11.5px} .ss-header-tools{gap:7px} .ss-header-search,.ss-header-start,.ss-header-store{min-height:34px;font-size:10.5px;padding:7px 11px} .ss-header-store{justify-self:auto} } @media (max-width:980px){ .ss-header-main{grid-template-columns:118px minmax(0,1fr);row-gap:5px;width:min(100% - 24px,1320px);padding:7px 0 8px} .ss-header-logo{grid-column:1;grid-row:1}.ss-header-tools{grid-column:2;grid-row:1;justify-content:flex-end} .ss-header-primary{grid-column:1/-1;grid-row:2;justify-content:flex-start;gap:16px;overflow-x:auto;padding:4px 2px 3px;scrollbar-width:none} .ss-header-primary::-webkit-scrollbar{display:none} .ss-header-primary a{font-size:11.5px} } @media (max-width:620px){.ss-header-search{display:none}.ss-header-store{font-size:10px;padding-inline:10px}} /* v3.6 — Utility/legal pages use the same full-width global footer as the rest of the site. */ body.ss-utility-page footer.ss-global-footer{ max-width:none!important; width:100%!important; margin:0!important; padding:30px 20px 17px!important; font-size:inherit!important; color:#d9eaf2!important; } body.ss-utility-page footer.ss-global-footer a{margin-right:0!important;} body.ss-utility-page footer.ss-global-footer .ss-footer-inner{width:min(1180px,100%)!important;margin:0 auto!important;} /* ============================================================ LAUNCH FIXES — v3.7 Mobile menu, touch targets, form zoom, contrast. Appended last so these rules win without touching the above. ============================================================ */ /* --- Mobile menu button (hidden on desktop) --- */ .ss-nav-toggle{ display:none; align-items:center; gap:7px; min-height:44px; padding:8px 13px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); color:#DCEEF6; font:800 12px/1 Inter,system-ui,sans-serif; letter-spacing:.04em; cursor:pointer; } .ss-nav-toggle:focus-visible{outline:3px solid #FFEA00;outline-offset:3px} .ss-nav-toggle .bars{position:relative;width:16px;height:11px;flex:0 0 16px} .ss-nav-toggle .bars::before,.ss-nav-toggle .bars::after,.ss-nav-toggle .bars span{ content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor; transition:transform .18s ease,opacity .18s ease; } .ss-nav-toggle .bars::before{top:0} .ss-nav-toggle .bars span{top:4.5px} .ss-nav-toggle .bars::after{bottom:0} .ss-nav-toggle[aria-expanded="true"] .bars::before{transform:translateY(4.5px) rotate(45deg)} .ss-nav-toggle[aria-expanded="true"] .bars span{opacity:0} .ss-nav-toggle[aria-expanded="true"] .bars::after{transform:translateY(-4.5px) rotate(-45deg)} /* --- Larger tap targets for the desktop nav (WCAG 2.5.5) --- */ .ss-header-primary a{padding-block:12px} @media(max-width:720px){ .ss-global-header{position:relative} .ss-nav-toggle{display:inline-flex} /* Replace the hidden-scroll strip with a real dropdown panel. */ .ss-header-primary{ display:none; position:absolute; left:0; right:0; top:100%; z-index:80; flex-direction:column; align-items:stretch; gap:0; padding:8px clamp(14px,4vw,22px) 14px; background:#0B2032; border-top:1px solid rgba(0,229,255,.22); box-shadow:0 26px 44px -22px rgba(0,0,0,.85); overflow:visible; } .ss-header-primary.is-open{display:flex} .ss-header-primary a{ display:block; width:100%; font-size:16px; padding:14px 4px; border-bottom:1px solid rgba(255,255,255,.09); white-space:normal; } .ss-header-primary a:last-child{border-bottom:0} .ss-header-primary a[aria-current="page"]::after{display:none} .ss-header-primary a[aria-current="page"]{color:#7FE9FF} } /* --- MailerLite renders inputs at 14px, which makes iOS Safari zoom on focus. --- */ .ml-form-embedContainer input, .ml-form-embedContainer textarea, .ml-form-embedContainer select, .ml-embedded input, .ml-embedded textarea{font-size:16px !important} /* --- Notebook eyebrow labels were 4.09:1; brought onto the site's cyan. --- */ .note-card small{color:#6FD1FF !important} @media(prefers-reduced-motion:reduce){ .ss-nav-toggle .bars::before,.ss-nav-toggle .bars::after,.ss-nav-toggle .bars span{transition:none} } /* Intrinsic width/height attributes were added to every to stop layout shift. Where CSS sizes an image by width + aspect-ratio, the HTML height attribute would otherwise win and stretch it, so keep height derived. width:auto matters just as much. An image sized by max-height alone (the Challenge Lab mascots) keeps the HTML width attribute as a DEFINITE width, and max-height then clamps only the height — so the picture squashes instead of scaling. Bandit rendered 664x305 in a 664x760 frame, 2.5x too wide. A ratio is only preserved when BOTH axes are auto; then max-height scales the width to match. Every width/height attribute on the site equals the file's real pixel size, so auto reproduces the intended size everywhere else. Any rule that genuinely wants a fixed box still wins on specificity. */ img{width:auto;height:auto} /* ========================================================= SIGNUP FORMS — one look on every page --------------------------------------------------------- These rules used to live only in home-studio.css, which only the homepage loads. So the homepage form was styled (dark fields, blue button) while the same form on For Grown-Ups, the Store and the educator page rendered in MailerLite's default grey. They live here now, in the stylesheet every page loads, so all four match. ========================================================= */ .mailerlite-live .ml-form-embedContainer, .mailerlite-live .ml-form-align-center, .mailerlite-live .ml-form-align-default, .mailerlite-live .ml-form-embedWrapper, .mailerlite-live .ml-form-embedBody, .mailerlite-live .ml-form-successBody{ background:transparent!important;background-color:transparent!important; box-shadow:none!important;border:0!important;max-width:none!important; width:100%!important;margin:0!important;padding-top:0!important;padding-bottom:0!important} .mailerlite-live .ml-form-embedContent{display:none!important} .mailerlite-live .ml-form-formContent{margin:0!important} .mailerlite-live .ml-form-fieldRow{margin:0 0 8px!important} .mailerlite-live .ml-form-fieldRow input{ background:rgba(1,17,29,.72)!important;border:1px solid rgba(135,211,250,.32)!important; color:#fff!important;border-radius:10px!important;min-height:44px!important; font-size:16px!important;font-family:Inter,system-ui,sans-serif!important} .mailerlite-live .ml-form-fieldRow input::placeholder{color:#9eb8c6!important} .mailerlite-live .ml-form-embedSubmit button{ background:linear-gradient(180deg,#169bd7,#0b6fa8)!important;color:#fff!important; border-radius:10px!important;min-height:44px!important;font-weight:900!important; font-family:Inter,system-ui,sans-serif!important; box-shadow:0 8px 18px rgba(0,133,196,.24)!important} .mailerlite-live .ml-form-embedSubmit button:hover{filter:brightness(1.08)!important} .mailerlite-live .ml-form-successContent, .mailerlite-live .ml-form-successContent h4, .mailerlite-live .ml-form-successContent p{color:#e9f8ff!important} /* The confirmation note sets width:100% and its own padding. There is no global border-box reset on this site, so under content-box that note rendered 28px wider than its container and hung outside the panel. */ .confirm-note{box-sizing:border-box!important;max-width:100%} /* ========================================================= MOBILE HEADER — stop the Menu button landing on the logo --------------------------------------------------------- On a 375px screen the header was one row: logo in column 1, and the tools in column 2. But the tools need 304px (Menu 87 + Start Here 80 + Store 123, plus gaps) and column 2 is only 221px. Because that row is justified to flex-end, the 83px of overflow spilled LEFT — putting the Menu button on top of the logo. Below 620px the header therefore becomes two rows: logo above, tools below on the full width. Nothing is hidden and nothing shrinks; the row just gets the space it actually needs. ========================================================= */ @media(max-width:620px){ .ss-header-main{grid-template-columns:1fr} .ss-header-logo{grid-column:1;grid-row:1} .ss-header-tools{ grid-column:1;grid-row:2; justify-content:flex-start;flex-wrap:wrap;row-gap:7px} } /* ---- form labels ------------------------------------------------------- This form uses real