/* Muscle Manor — shared stylesheet Ported from the Claude Design export (export 3/*.dc.html). Each artboard shipped a near-identical style block; they are deduped here. Selectors that differed between pages are scoped with a .page-* class on . Inline style="" attributes are left on the elements themselves so the port stays visually identical to the design. */ /* ---------------------------------------------------------------- tokens */ :root{ --mm-yellow:#F5C400; --mm-black:#0a0a0a; --mm-panel:#141414; --mm-line:rgba(255,255,255,.14); } /* ------------------------------------------------------------------ base */ @font-face{ font-family:"Druk Wide"; src:url("../fonts/DrukTextWide-Medium.otf") format("opentype"); font-weight:500; font-display:swap; } body{margin:0;background:#0a0a0a;color:#fff;font-family:Archivo,system-ui,sans-serif} a{color:inherit} a:hover{color:inherit} img{max-width:100%} .mm{font-family:Archivo,system-ui,sans-serif;color:#fff;background:#0a0a0a} .mm a{text-decoration:none;color:inherit} /* type helpers */ .k{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#F5C400} .d{font-family:'Druk Wide',sans-serif;font-weight:500} .mono{font-family:'IBM Plex Mono',monospace} .p{font-family:'IBM Plex Mono',monospace;font-weight:500;line-height:1.6;text-wrap:pretty} .page-faq .p{line-height:1.65} /* --------------------------------------------------------------- chrome */ .nav{height:88px;display:flex;align-items:center;justify-content:space-between;gap:40px;padding:0 56px} .nav .l{display:flex;gap:clamp(16px,2.5vw,36px);flex-wrap:wrap;justify-content:flex-end;align-items:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500} .nav .l a{white-space:nowrap} .nav .l a:hover{color:#F5C400} .nav .l a[aria-current="page"]{color:#F5C400} .cta{display:inline-block;color:#000!important;background:#F5C400;padding:16px 28px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;white-space:nowrap;transition:background .2s} .cta:hover{background:#fff} .ghost{display:inline-block;color:#fff;border:1px solid rgba(255,255,255,.35);padding:15px 27px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;white-space:nowrap;transition:border-color .2s} .ghost:hover{border-color:#fff} .foot{display:flex;align-items:center;justify-content:space-between;padding:32px 56px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:500} .foot .g{display:flex;gap:36px} .foot a:hover{color:#F5C400} /* --------------------------------------------------- mobile menu button Mobile only — display:none here means it never appears above 1000px. */ .menu-btn{display:none} /* visible keyboard focus — the export had none outside a few controls */ a:focus-visible,button:focus-visible{outline:2px solid #F5C400;outline-offset:3px} /* ---------------------------------------------- hover rules (landing page) The export expressed these as style-hover="" attributes, which only the Claude Design runtime understood. They are real CSS here. */ .hv-y:hover{color:#F5C400} .hv-w:hover{background:#fff} .hv-dark:hover{color:#0a0a0a} .hv-zoom:hover{transform:scale(1.04)} .hv-join:hover{background:#F5C400;color:#000;border-color:#F5C400} .hv-wtext:hover{color:#fff} /* reviews marquee (landing). The card list is duplicated in the HTML, so translating -50% loops seamlessly. Pauses on hover; stops for reduced motion. */ @keyframes mmMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .mm-marq{display:flex;width:max-content;animation:mmMarquee 120s linear infinite} .mm-marq:hover{animation-play-state:paused} /* "Hover to pause" means nothing on a touch screen */ @media (hover:none){.hover-hint{display:none}} @media (prefers-reduced-motion:reduce){.mm-marq{animation:none}} /* ------------------------------------------------- scroll reveal (landing) */ @keyframes mmUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}} @keyframes mmFade{from{opacity:0}to{opacity:1}} [data-reveal]{opacity:0;transform:translateY(32px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)} [data-reveal].mm-in{opacity:1;transform:none} [data-reveal-img]{transform:scaleY(0);transform-origin:top;transition:transform 1.1s cubic-bezier(.7,0,.2,1)} [data-reveal-img].mm-in{transform:none} /* ------------------------------------------------------ hero carousel */ .hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1);transition:opacity var(--mm-fade,1200ms) ease,transform 6.5s linear} .hero-slide.on{opacity:1;transform:scale(1.06)} .dot{all:unset;cursor:pointer;width:2px;height:16px;background:rgba(255,255,255,.35);transition:all .4s} .dot.on{height:40px;background:#F5C400} .dot:focus-visible{outline:2px solid #F5C400;outline-offset:4px} /* ------------------------------------------- facilities accordion (landing) */ .fac-btn{all:unset;cursor:pointer;display:flex;align-items:baseline;gap:20px;padding:12px 0;color:rgba(10,10,10,.35);font-family:'Druk Wide',sans-serif;font-size:40px;line-height:1;transition:color .2s} .fac-btn:hover{color:#0a0a0a} .fac-btn[aria-expanded="true"]{color:#0a0a0a} .fac-btn:focus-visible{outline:2px solid #0a0a0a;outline-offset:4px} .fac-desc{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1)} .fac-desc.open{grid-template-rows:1fr} .fac-desc>div{overflow:hidden} .fac-desc p{margin:4px 0 20px 48px;max-width:520px;font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:15px;line-height:1.6;text-wrap:pretty} .fac-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .7s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)} .fac-img.on{opacity:1;transform:scale(1)} /* ------------------------------------------------------- FAQ page */ .page-faq .hrs{font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1.8;color:#0a0a0a} .page-faq .hrs b{display:block;font-weight:500;margin-bottom:4px} .hours{margin:0 56px;background:#F5C400;color:#0a0a0a;padding:48px 56px;display:flex;flex-wrap:wrap;gap:32px 48px;align-items:start} .hours .hrs{flex:none} .hours .d{margin-right:24px} .list{padding:80px 56px 96px;max-width:1300px} .row{border-top:1px solid rgba(255,255,255,.14)} .row:last-child{border-bottom:1px solid rgba(255,255,255,.14)} .qb{all:unset;cursor:pointer;width:100%;box-sizing:border-box;display:grid;grid-template-columns:64px 1fr 40px;gap:24px;align-items:center;padding:36px 0;text-align:left} .qb:hover .qt{color:#F5C400} .qb:focus-visible{outline:2px solid #F5C400;outline-offset:4px} .qt{font-family:'Druk Wide',sans-serif;font-weight:500;font-size:clamp(20px,1.95vw,28px);line-height:1.05;transition:color .2s} .chev{width:40px;height:40px;display:flex;align-items:center;justify-content:center;justify-self:end;transition:transform .35s cubic-bezier(.2,.7,.2,1);color:rgba(255,255,255,.5)} .chev.open{transform:rotate(180deg);color:#F5C400} .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1)} .ans.open{grid-template-rows:1fr} .ans>div{overflow:hidden} .ans p{margin:0 0 40px 88px;max-width:640px;font-size:15px;color:rgba(255,255,255,.75)} /* Gallery and Classes share a flex .head; FAQ's was a plain block in the export, so restore that rather than letting it inherit the flex rules. */ .page-faq .head{display:block;padding:72px 56px 64px} /* ---------------------------------------------------- memberships page */ .page-memberships .hrs{font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1.8;color:rgba(255,255,255,.7)} /* "When can I train?" access-hours section. All scoped to the memberships page because the source export reused generic class names (.hours/.tab/.cell/.bar) that collide with other pages. */ .page-memberships .when-wrap{padding:0 56px 96px;margin-top:-48px} .page-memberships .tabs{display:flex;gap:4px} .page-memberships .tab{all:unset;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:12px 20px;color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.2);transition:all .2s} .page-memberships .tab:hover{color:#fff;border-color:rgba(255,255,255,.5)} .page-memberships .tab.on{background:#F5C400;color:#0a0a0a;border-color:#F5C400} .page-memberships .tab:focus-visible{outline:2px solid #F5C400;outline-offset:2px} .page-memberships .pane{display:flex;flex-direction:column;gap:12px} .page-memberships .hrow{display:grid;grid-template-columns:240px 1fr;gap:32px;align-items:center} .page-memberships .hname{display:flex;flex-direction:column;gap:5px} .page-memberships .cells{display:grid;grid-template-columns:repeat(17,1fr);gap:3px} .page-memberships .cell{height:40px;border-radius:2px;background:#1f1f1f} .page-memberships .bar{position:absolute;top:0;bottom:0;background:#F5C400;border-radius:2px;transition:left .6s cubic-bezier(.65,0,.35,1),width .6s cubic-bezier(.65,0,.35,1),opacity .3s} .page-memberships .hlabel{transition:opacity .2s} @media (max-width:760px){ .page-memberships .when-wrap{padding:0 24px 64px;margin-top:-24px} .page-memberships .hrow{grid-template-columns:1fr;gap:10px} .page-memberships .cell{height:28px} } @media (prefers-reduced-motion:reduce){.page-memberships .bar{transition:opacity .3s}} /* ----------------------------------------------------------- PTs page */ .intro{padding:72px 56px 80px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end} .trainer{display:grid;grid-template-columns:560px 1fr;border-top:1px solid rgba(255,255,255,.12)} .hire{background:#F5C400;color:#0a0a0a;padding:96px 56px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} /* ------------------------------------------------- PT profile (Ellie Hespe) Every rule is scoped to .page-pt-ellie. This artboard defines .hero, .title and an animated .nav, all of which would otherwise collide with the landing page and every other page's navigation. */ @keyframes eUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}} @keyframes eFade{from{opacity:0}to{opacity:1}} @keyframes eWave{from{opacity:0;transform:translateX(-40px) scale(1.04)}to{opacity:.95;transform:none}} .page-pt-ellie .p{line-height:1.65} .page-pt-ellie .nav{animation:eFade 1s ease .1s both} .page-pt-ellie .waves{animation:eWave 1.8s cubic-bezier(.2,.7,.2,1) .1s both} .page-pt-ellie .port{animation:eUp 1.1s cubic-bezier(.2,.7,.2,1) .35s both} .page-pt-ellie .title{animation:eUp .9s cubic-bezier(.2,.7,.2,1) .7s both} .page-pt-ellie .side>div{animation:eUp .8s cubic-bezier(.2,.7,.2,1) both} .page-pt-ellie .side>div:nth-child(1){animation-delay:.9s} .page-pt-ellie .side>div:nth-child(2){animation-delay:1.02s} .page-pt-ellie .side>div:nth-child(3){animation-delay:1.14s} .page-pt-ellie .info>div:last-child{animation:eUp .9s cubic-bezier(.2,.7,.2,1) 1s both} .page-pt-ellie .hero{position:relative;min-height:760px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;overflow:hidden;padding:0 56px} .page-pt-ellie .waves{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;opacity:.95;pointer-events:none} .page-pt-ellie .port{position:relative;width:min(560px,70vw);margin-bottom:-120px} .page-pt-ellie .port img{display:block;width:100%;height:auto} .page-pt-ellie .fade{position:absolute;left:-10%;right:-10%;bottom:0;height:45%;background:linear-gradient(180deg,rgba(10,10,10,0) 0%,rgba(10,10,10,.85) 70%,#0a0a0a 100%);pointer-events:none} .page-pt-ellie .title{position:relative;text-align:center;padding-bottom:8px;text-shadow:0 4px 30px rgba(0,0,0,.8)} .page-pt-ellie .info{padding:64px 56px 96px;display:grid;grid-template-columns:380px 1fr;gap:64px;align-items:start;max-width:1320px;margin:0 auto;box-sizing:border-box} .page-pt-ellie .side{display:flex;flex-direction:column;gap:40px;text-align:center} .page-pt-ellie .side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:17px;line-height:1.4;color:rgba(255,255,255,.9)} /* ------------------------------------------------------- gallery page */ .head{padding:72px 56px 48px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px} .grid{padding:0 56px 96px;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:260px;gap:4px} .tile{all:unset;cursor:zoom-in;display:block;overflow:hidden;position:relative;background:#141414} .tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .6s ease} .tile:hover img{transform:scale(1.04)} /* Fade-in is opt-in: JS adds .fade to the grid, so without JS the images are simply visible (never stuck invisible). Once .fade is on, tiles start hidden and reveal as each thumbnail decodes. */ [data-gallery].fade .tile img{opacity:0} [data-gallery].fade .tile img.loaded{opacity:1} @media (prefers-reduced-motion:reduce){[data-gallery].fade .tile img{opacity:1}} .tile:focus-visible{outline:2px solid #F5C400;outline-offset:-2px} .lb{position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:50;display:flex;align-items:center;justify-content:center;animation:lbIn .25s ease} .lb[hidden]{display:none} .lb img{max-width:calc(100vw - 160px);max-height:calc(100vh - 160px);object-fit:contain;display:block;animation:lbImg .35s cubic-bezier(.2,.7,.2,1)} .lbBtn{all:unset;cursor:pointer;position:absolute;color:#fff;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:16px;transition:color .2s} .lbBtn:hover{color:#F5C400} .lbBtn:focus-visible{outline:2px solid #F5C400;outline-offset:2px} @keyframes lbIn{from{opacity:0}to{opacity:1}} @keyframes lbImg{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}} /* ------------------------------------------------------- classes page */ .board{padding:0 56px 96px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:16px} .day{display:flex;flex-direction:column;gap:8px;min-width:0} .dayh{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.14)} .dayh b{display:block;font-family:'Druk Wide',sans-serif;font-weight:500;font-size:18px;color:#fff;letter-spacing:0;margin-bottom:4px} .dayh.today{color:#F5C400} .cls{all:unset;cursor:pointer;background:#141414;padding:14px 16px;display:flex;flex-direction:column;gap:6px;border-left:2px solid #F5C400;transition:background .2s;text-align:left} .cls:hover{background:#1c1c1c} .cls:focus-visible{outline:2px solid #F5C400;outline-offset:2px} .cls .t{font-family:'IBM Plex Mono',monospace;font-size:11px;color:rgba(255,255,255,.55)} .cls .n{font-family:'Druk Wide',sans-serif;font-size:13px;line-height:1.1;overflow-wrap:anywhere} .cls .z{font-family:'IBM Plex Mono',monospace;font-size:11px;color:rgba(255,255,255,.55)} .cls .s{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#F5C400} .cls.full{border-left-color:rgba(255,255,255,.25);cursor:default} .cls.full .s{color:rgba(255,255,255,.4)} /* a class that has already ended: looks normal, but shows "Ended" instead of a booking count and is not clickable */ .cls.past{cursor:default} .cls.past:hover{background:#141414} .cls.past .s{color:rgba(255,255,255,.5)} /* live indicator: a slowly pulsing dot next to the "Free with every membership" line */ .live{display:inline-flex;align-items:center;gap:7px;color:#F5C400} .live .dot{width:7px;height:7px;border-radius:50%;background:#F5C400;position:relative;flex:none} .live .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#F5C400;animation:livePulse 2s ease-out infinite} @keyframes livePulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(3);opacity:0}100%{opacity:0}} @media (prefers-reduced-motion:reduce){.live .dot::after{animation:none}} .none{font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(255,255,255,.3);padding-top:16px} .wk{display:flex;gap:8px;align-items:center;font-family:'IBM Plex Mono',monospace} .wk button{all:unset;cursor:pointer;padding:10px 16px;border:1px solid rgba(255,255,255,.3);font-size:12px;color:#fff} .wk button:hover{border-color:#F5C400;color:#F5C400} .wk span{font-size:12px;letter-spacing:.1em;padding:0 12px;text-transform:uppercase} /* shown whenever the board is rendering the bundled sample timetable rather than a live API response */ .sample-note{margin:0 56px 24px;display:flex;align-items:center;gap:10px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;color:#F5C400;border-left:2px solid #F5C400;background:rgba(245,196,0,.08);padding:12px 16px} .sample-note[hidden]{display:none} /* ----------------------------------------------------------- footer map Google injects a place card (address + open/directions buttons) into the top-left of the embed. It lives inside a cross-origin iframe, so it cannot be styled or hidden from here. Instead the iframe is shifted up and grown by the same amount: the container's overflow:hidden clips the card away, the visible map stays exactly as tall as before, and Google's attribution in the bottom-left stays on screen (cropping that would breach their terms). */ .map iframe,.land-map iframe{top:-132px!important;height:calc(100% + 132px)!important} /* --------------------------------------------------- legal pages */ .wrap{padding:72px 56px 96px;display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:64px;align-items:start;max-width:1320px;box-sizing:border-box} .wrap>div:first-child{min-width:0;position:sticky;top:32px;align-self:start;max-height:calc(100vh - 64px);overflow-y:auto;scrollbar-width:none} .wrap>div:first-child::-webkit-scrollbar{display:none} .toc{display:flex;flex-direction:column;gap:10px;font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.4} .toc a{color:rgba(255,255,255,.5);display:grid;grid-template-columns:28px 1fr;gap:8px;transition:color .2s} .toc a:hover{color:#F5C400} .toc a span{color:#F5C400} .body{min-width:0;overflow-wrap:anywhere;font-size:16px;line-height:1.65;color:rgba(255,255,255,.8)} .body h2{text-wrap:balance;font-family:'Druk Wide',sans-serif;font-weight:500;font-size:clamp(16px,1.4vw,20px);line-height:1.1;color:#fff;margin:64px 0 24px;padding-top:32px;border-top:1px solid rgba(255,255,255,.14);display:grid;grid-template-columns:48px 1fr;gap:16px;scroll-margin-top:32px} .body h2 span{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#F5C400;padding-top:6px} .body h2:first-of-type{margin-top:0;border-top:0;padding-top:0} .body h3{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#F5C400;margin:28px 0 8px} .body p{margin:0 0 16px;text-wrap:pretty} .body ul{margin:0 0 16px;padding-left:20px} .body li{margin-bottom:6px} .body dl{margin:0 0 16px;display:grid;grid-template-columns:auto 1fr;gap:6px 20px} .body dt{color:#fff;font-weight:500} .body dd{margin:0} /* ============================================================ responsive */ @media (max-width:1100px){ .board{grid-template-columns:repeat(4,minmax(0,1fr))} } @media (max-width:1000px){ /* Bar: logo left, hamburger right. The link list becomes a full-width panel underneath that expands in flow, pushing the page down rather than overlaying it. site.js animates it by setting an explicit max-height from scrollHeight, so there is no magic number to keep in sync. */ .nav{position:relative;padding:16px 24px;height:auto;flex-wrap:wrap;gap:0; align-items:center;justify-content:space-between} .menu-btn{display:flex;flex-direction:column;justify-content:center;gap:5px; align-items:flex-end;width:44px;height:44px;padding:0;margin:0; border:0;background:none;cursor:pointer; -webkit-tap-highlight-color:transparent} .menu-btn span{display:block;width:24px;height:2px;background:#fff; transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s} .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0} .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .menu-btn:focus-visible{outline:2px solid #F5C400;outline-offset:2px} /* flex-wrap:wrap is inherited from the desktop rule; with a column direction and a clamped max-height it wraps items into side-by-side columns instead of stacking them, so it has to be turned off here. */ .nav .l{width:100%;flex-direction:column;flex-wrap:nowrap;align-items:stretch; justify-content:flex-start;gap:0!important;font-size:12px; letter-spacing:.14em;max-height:0;overflow:hidden; transition:max-height .34s cubic-bezier(.2,.7,.2,1)} .nav .l a{padding:15px 2px;border-bottom:1px solid rgba(255,255,255,.12)} .nav .l a:first-child{margin-top:14px;border-top:1px solid rgba(255,255,255,.12)} .nav .l .cta{position:static;margin:18px 0 6px;text-align:center; border-bottom:0;padding:16px!important} .page-faq .head{padding:48px 24px 40px} .head{padding:48px 24px 32px} .page-gallery .head h1,.page-classes .head h1{font-size:clamp(30px,11vw,120px)!important} .page-pts .intro h1{font-size:clamp(30px,9.5vw,88px)!important} .hours{margin:0 24px;padding:32px 24px;flex-direction:column;gap:28px} .list{padding:56px 24px 64px} .qb{grid-template-columns:36px 1fr 28px;gap:12px;padding:24px 0} .ans p{margin-left:48px} /* Memberships was the one artboard exported with no media queries at all. Its h1 carries white-space:nowrap, which alone forced ~150px of sideways scroll on a phone. */ .memb-head{padding:48px 24px 32px!important;gap:24px!important} .memb-head h1{white-space:normal!important;font-size:clamp(26px,8vw,96px)!important} .memb-head p{width:auto!important;max-width:100%!important} .memb-grid{padding:0 24px 64px!important;grid-template-columns:1fr!important} .memb-grid>div{min-height:0!important;padding:32px 24px!important;gap:24px!important} .page-pt-ellie .hero{min-height:0;padding:24px 24px 0} .page-pt-ellie .port{margin-bottom:-60px} .page-pt-ellie .title h1{font-size:40px!important} .page-pt-ellie .info{grid-template-columns:1fr;padding:40px 24px 64px;gap:40px} .page-pt-ellie .side{text-align:left} .intro{grid-template-columns:1fr;gap:32px;padding:48px 24px 56px} .trainer{grid-template-columns:1fr} .trainer img{height:70vh!important;min-height:480px} .trainer .bio{padding:40px 24px 56px!important;gap:32px} .hire{grid-template-columns:1fr;gap:32px;padding:64px 24px} .hire a{display:block!important;text-align:center} .tourWrap{padding:0 24px 64px!important} .tourWrap iframe{aspect-ratio:4/5!important} .grid{padding:0 24px 64px;grid-template-columns:1fr 1fr;grid-auto-rows:200px} .grid .tile{grid-column:span 1!important;grid-row:span 1!important} .grid .tile.lead{grid-column:span 2!important} .lb img{max-width:calc(100vw - 32px);max-height:calc(100vh - 140px)} .board{padding:0 24px 64px;grid-template-columns:1fr;gap:32px} .day:empty{display:none} .sample-note{margin:0 24px 24px} .wrap{grid-template-columns:1fr;padding:48px 24px 64px;gap:40px} .wrap>div:first-child{position:static;max-height:none} .body{font-size:15px} .body h2{grid-template-columns:36px 1fr;font-size:18px;margin-top:48px} .body dl{grid-template-columns:1fr} .map{height:auto!important} .map iframe{position:relative!important;top:0!important;height:392px!important;margin-top:-132px;display:block} .map .card{position:relative!important;inset:auto!important;width:auto!important;max-width:none!important;padding:32px 24px!important;gap:28px} .foot{flex-direction:column;align-items:flex-start!important;gap:20px;padding:28px 24px} .foot .g{flex-wrap:wrap;gap:16px 24px} } /* ------------------------------------------ landing page — laptop range The facilities row is "1fr 680px" with 56px gutters, which needs roughly 1250px before the 1fr column hits its min-content floor and pushes the image stage off-screen. The export never showed this because the landing artboard had no breakpoints at all. */ @media (min-width:1001px) and (max-width:1300px){ .facilities{padding:96px 40px!important} .facilities-grid{grid-template-columns:minmax(0,1fr) minmax(0,50vw)!important;gap:40px!important} .fac-btn{font-size:clamp(22px,2.9vw,40px)!important} .fac-desc p{margin-left:40px!important} .facilities h2{font-size:clamp(56px,9vw,120px)!important} .zones-head h2{font-size:clamp(40px,5.6vw,64px)!important} .hero-copy h1{font-size:clamp(64px,9.6vw,150px)!important} } /* ------------------------------------------ landing page — mobile layout The landing artboard shipped with no media queries at all: fixed 56px gutters, a 150px headline and two-column grids. Everything below brings it in line with the other seven pages. Desktop rendering is untouched. */ @media (max-width:1000px){ .hero{height:auto!important;min-height:88vh!important} .hero-bar{position:static!important;height:auto!important;padding:20px 24px!important;flex-wrap:wrap;gap:20px;background:rgba(10,10,10,.55);backdrop-filter:blur(6px)} .hero-bar{justify-content:space-between} .hero-bar .hero-links{display:flex!important;flex-direction:column; flex-wrap:nowrap!important; align-items:stretch!important;gap:0!important; width:100%;font-size:12px!important; max-height:0;overflow:hidden; transition:max-height .34s cubic-bezier(.2,.7,.2,1)} .hero-bar .hero-links a{padding:15px 2px; border-bottom:1px solid rgba(255,255,255,.16)} .hero-bar .hero-links a:first-child{margin-top:14px; border-top:1px solid rgba(255,255,255,.16)} /* the hero's "Join now" is a ghost button on desktop; match the solid CTA the other pages use once it is a full-width row in the panel */ .hero-bar .hero-links .hero-join{border:0!important;background:#F5C400; color:#000!important;margin:18px 0 6px; text-align:center;padding:16px!important} .hero-copy{position:static!important;padding:120px 24px 40px!important;flex-direction:column;align-items:flex-start!important;gap:40px!important} /* Druk Wide is very wide: "MUSCLE" measures ~5.7x its font-size, so 15vw pushed the ink past the gutter. Sized to fit down to a 320px viewport. */ .hero-copy h1{font-size:clamp(44px,14vw,88px)!important;margin-left:-2px!important} .hero-meta{align-items:flex-start!important;padding-bottom:0!important} .hero-meta>div:first-child{text-align:left!important;flex-wrap:wrap;gap:24px!important} .hero-dots{left:auto!important;right:16px!important} .intro-band{padding:56px 24px!important;grid-template-columns:1fr!important;gap:28px!important} .intro-band>div:first-child{text-align:left!important;font-size:36px!important} .intro-band .rule{width:auto!important;height:1px!important;align-self:auto!important} .intro-band p{font-size:16px!important} .zones{padding:64px 0 0!important} .zones-head{padding:0 24px!important} .zones-head h2{font-size:clamp(34px,8vw,52px)!important;margin-bottom:40px!important} .zone{grid-template-columns:1fr!important;grid-template-rows:auto!important;height:auto!important} .zone img{height:56vw!important;min-height:260px;max-height:420px} .zone .zone-copy{height:auto!important;padding:36px 24px!important;align-items:flex-start!important;text-align:left!important} /* zone titles: the markup's clamp() bottoms out at 15px, which reads like body text on a phone, so bump to 20px. The markup is nowrap for desktop, but "OUTDOOR CALISTHENICS ZONE" at 20px is ~314px — it clips on narrower phones (360px = 312px of content). Let it wrap; short titles stay one line. */ .zone .zone-copy>div{font-size:20px!important;white-space:normal!important;line-height:1.05!important} .zone-flip{display:flex!important;flex-direction:column-reverse} .facilities{padding:64px 24px!important} /* "FACILITIES" measures ~7.2x its font-size — the widest word on the site */ .facilities h2{font-size:clamp(32px,11.5vw,84px)!important;margin-bottom:40px!important} .facilities-grid{grid-template-columns:1fr!important;gap:32px!important} .fac-btn{font-size:30px!important} .fac-desc p{margin-left:48px!important;font-size:14px!important} .fac-stage{height:60vw!important;min-height:280px} /* reviews: the heading is nowrap for desktop but overflows and gets clipped at phone widths, so let it wrap; bring the 56px gutter in line with the rest of the mobile layout */ .reviews{padding:64px 0 64px 24px!important} .reviews-head{padding-right:24px!important;margin-bottom:32px!important} .reviews h2{white-space:normal!important;font-size:clamp(32px,9vw,64px)!important} .land-map{height:auto!important} .land-map iframe{position:relative!important;top:0!important;height:392px!important;margin-top:-132px;display:block} .land-map .card{position:relative!important;inset:auto!important;width:auto!important;padding:32px 24px!important;gap:28px} } /* ------------------------------------------------------ reduced motion The export declared this for [data-reveal] but the runtime-driven carousel and accordions ignored it. */ @media (prefers-reduced-motion:reduce){ [data-reveal],[data-reveal-img]{opacity:1;transform:none;transition:none} .hero-slide,.hero-slide.on{transition:opacity .01ms;transform:none} .fac-img{transition:opacity .01ms} .ans,.fac-desc{transition:none} .nav .l,.hero-bar .hero-links,.menu-btn span{transition:none} .page-pt-ellie .nav,.page-pt-ellie .waves,.page-pt-ellie .port, .page-pt-ellie .title,.page-pt-ellie .side>div, .page-pt-ellie .info>div:last-child{animation:none} *{animation-duration:.01ms!important;animation-iteration-count:1!important} }