/* --fvh: 1% of the screen height, measured once when the page opens (see index.html). Instagram resizes the page when its bars slide in, which made screen-height sizes (svh) jump; a locked value keeps the layout still. */ /* GENNOFIT landing v2: colour blocks, dark / cream alternating */ :root{ color-scheme:light; --dark:#0E0E0D;--dark-2:#1A1917;--cream:#F3EEE6;--cream-2:#FBF8F3; --ink:#141312;--ink-2:#45413B;--ink-3:#7A746B;--on-dark:#F4F1EC;--on-dark-2:#C9C3BA; --red:#D3281C;--line:#E2DBD0; --serif:'arno-pro','EB Garamond',Georgia,serif; --gut:22px;--block:88px; } @media (min-width:900px){:root{--gut:48px;--block:128px}} *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:var(--serif);font-size:18px;line-height:1.5;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased} img,video{display:block;max-width:100%} img{height:auto} /* images carry their real width/height so space is held while they load; this keeps them in proportion */ a{color:inherit} button{font-family:inherit} :focus-visible{outline:2px solid var(--red);outline-offset:3px} .wrap{max-width:1120px;margin:0 auto;padding:0 var(--gut)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} h1,h2,h3{font-family:var(--serif);font-weight:700;margin:0;line-height:1.02;text-transform:uppercase;letter-spacing:.005em} h2{font-size:38px} @media (min-width:900px){h2{font-size:60px}} p{margin:0} /* colour blocks */ .block{padding:var(--block) 0} .dark{background:var(--dark);color:var(--on-dark)} .dark-2{background:var(--dark-2);color:var(--on-dark)} .cream{background:var(--cream)} .cream-2{background:var(--cream-2)} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;height:58px;padding:0 34px;border:0;border-radius:999px;background:var(--red);color:#fff;font-size:19px;font-weight:700;letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:filter .15s ease} .btn:hover{filter:brightness(.92)} .btn:disabled{opacity:.6;cursor:default} .btn-wide{width:100%} form{margin:0} /* 1. hero: full-screen photo */ .hero{position:relative;height:calc(var(--fvh,1svh) * 100);min-height:560px;overflow:hidden;background:var(--dark);color:#fff} .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%} .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 48%,rgba(0,0,0,.82) 78%,rgba(0,0,0,.92) 100%)} .hero-logo{position:absolute;z-index:2;top:max(22px,env(safe-area-inset-top));left:0;right:0;text-align:center;font-weight:700;font-size:24px;letter-spacing:.14em;color:#fff;text-decoration:none} .hero-copy{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:0 var(--gut) max(34px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px} .hero h1{font-size:44px;line-height:.98;max-width:12ch} .hero-sub{font-size:19px;line-height:1.4;color:#E9E4DC;max-width:30em} .hero .btn{margin-top:8px;min-width:240px} @media (min-width:900px){ .hero-img{object-position:50% 18%} .hero h1{font-size:76px} .hero-sub{font-size:22px} .hero-copy{padding-bottom:56px} } /* 2. not your average + checklist + offer */ .avg{display:flex;flex-direction:column;align-items:center;text-align:center;gap:32px} .avg h2 span{display:block} .avg-img{width:100%;max-width:440px;border-radius:20px;overflow:hidden} .avg-img img{width:100%;height:auto} .cover{font-size:28px;font-weight:600;font-style:italic;color:var(--ink-2)} .checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;text-align:left;width:100%;max-width:440px} .checks li{display:flex;gap:14px;align-items:flex-start;font-size:20px;line-height:1.35} .checks svg{flex-shrink:0;margin-top:2px;color:var(--red)} .checks b{font-weight:700} .offer{width:100%;max-width:440px;background:#fff;border-radius:22px;padding:28px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 14px 44px rgba(40,30,20,.08)} .offer-label{font-size:16px;font-weight:600;color:var(--ink-3)} .offer-price{display:flex;align-items:baseline;gap:12px} .offer-price s{font-size:30px;color:var(--ink-3);text-decoration-color:var(--red);text-decoration-thickness:2px} .offer-price b{font-size:58px;line-height:1;font-weight:700} .offer-note{font-size:17px;color:var(--ink-2)} .offer .btn{margin-top:6px} .offer-terms{font-size:15px;color:var(--ink-3)} /* 3. trailer */ .trailer{display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px} .video{position:relative;width:100%;max-width:420px;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#000} .video video{width:100%;height:100%;object-fit:cover} .video-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#8E877D;font-size:16px;background:radial-gradient(circle at 50% 40%,#2a2724,#0b0b0a 70%)} .video-ph i{width:68px;height:68px;border-radius:999px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center} .trailer-line{font-size:24px;line-height:1.35;max-width:24em;color:var(--on-dark)} .trailer-line em{display:block;font-size:19px;color:var(--on-dark-2);margin-top:8px} @media (min-width:900px){.video{max-width:380px}} /* 4. roadmap carousel */ .road-head{display:flex;flex-direction:column;gap:12px;margin-bottom:30px} .road-head p{font-size:20px;color:var(--ink-2);max-width:28em} .road{position:relative} .cards{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gut);padding:0 var(--gut) 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .cards::-webkit-scrollbar{display:none} .card{position:relative;flex:0 0 82%;max-width:400px;aspect-ratio:3/4.2;border-radius:22px;overflow:hidden;scroll-snap-align:start;background:#222;color:#fff} .card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 25%,rgba(0,0,0,.88) 78%)} .card-body{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:24px;display:flex;flex-direction:column;gap:8px} .card-day{font-size:17px;font-weight:600;color:#F0EBE3} .card h3{font-size:34px;line-height:1} .card p{font-size:17px;line-height:1.4;color:#E6E0D7} .card-n{position:absolute;z-index:1;top:18px;left:20px;font-size:15px;font-weight:600;color:#fff;background:rgba(0,0,0,.35);padding:4px 12px;border-radius:999px} .card.rest{background:var(--dark-2)} .card.rest::after{display:none} .road-ctrl{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px} .dots{display:flex;gap:8px} .dots button{width:9px;height:9px;padding:0;border:0;border-radius:999px;background:#CFC6B8;cursor:pointer} .dots button[aria-current="true"]{background:var(--ink);width:26px} .next{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 10px 0 22px;border:2px solid var(--ink);border-radius:999px;background:transparent;font-size:18px;font-weight:700;cursor:pointer} .next svg{width:40px;height:24px} @media (min-width:900px){ .cards{scroll-padding-left:max(var(--gut),calc((100vw - 1120px)/2 + var(--gut)));padding-left:max(var(--gut),calc((100vw - 1120px)/2 + var(--gut)))} .card{flex-basis:340px} } /* 6. story */ .story{display:flex;flex-direction:column;gap:30px} .story-img{border-radius:20px;overflow:hidden;max-width:520px} .story-img img{width:100%;height:auto} .story-copy{display:flex;flex-direction:column;gap:18px;max-width:34em} .story-copy p{font-size:20px;line-height:1.55;color:var(--on-dark-2)} .story-copy .ph{color:#8E877D;font-style:italic} @media (min-width:900px){.story{flex-direction:row;align-items:center;gap:72px}.story-img{flex:0 0 46%}} /* 7. faq */ .faq{display:flex;flex-direction:column;gap:26px;max-width:760px} details{border-bottom:1px solid var(--line)} .faq-list{border-top:1px solid var(--line)} summary{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;font-size:20px;font-weight:700;list-style:none} summary::-webkit-details-marker{display:none} summary::after{content:"+";font-size:28px;font-weight:400;color:var(--ink-3)} details[open] summary::after{content:"\2212"} details p{margin:0 0 20px;font-size:18px;line-height:1.55;color:var(--ink-2)} /* 8. not ready */ .remind{display:flex;flex-direction:column;gap:18px;max-width:560px} .remind p{font-size:20px;color:var(--on-dark-2)} .remind-row{display:flex;flex-direction:column;gap:10px;margin-top:6px} .remind input{height:58px;border-radius:14px;border:1.5px solid #4a4640;background:#151413;color:#fff;padding:0 18px;font-size:18px;font-family:inherit} .btn-ghost{background:transparent;border:2px solid #fff;color:#fff} /* footer */ footer{background:var(--dark);color:#9A948B;padding:28px 0 calc(32px + env(safe-area-inset-bottom));border-top:1px solid #262421} footer nav{display:flex;flex-wrap:wrap;gap:4px 22px;margin-bottom:10px} footer nav a{font-size:16px;color:#C9C3BA;min-height:40px;display:inline-flex;align-items:center} footer p{font-size:14px;line-height:1.5} @media (min-width:900px){footer{padding-bottom:40px}} /* floating bar (phones) */ .bar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom)) 20px;background:var(--cream-2);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .2s ease} .bar.on{transform:none} .bar-price{display:flex;flex-direction:column;line-height:1.2} .bar-price b{font-size:20px} .bar-price s{font-size:14px;color:var(--ink-3);margin-left:4px;text-decoration-color:var(--red)} .bar-price em{font-style:normal;font-size:14px;color:var(--ink-3)} .bar .btn{height:48px;padding:0 24px;font-size:17px} @media (min-width:900px){.bar{display:none}} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.bar,.btn{transition:none}} /* keep the hero text below the abs on phones (waistband sits ~66% down the photo) */ @media (max-width:899px){ .hero-copy{gap:10px;padding-bottom:max(26px,env(safe-area-inset-bottom))} .hero h1{font-size:38px;line-height:.95} .hero-sub{font-size:18px;line-height:1.35} .hero .btn{margin-top:4px;height:54px} } /* desktop hero: whole photo, centred, over a blurred copy of itself */ .hero-bg{display:none} @media (min-width:900px){ .hero-bg{display:block;position:absolute;inset:-40px;background:url(/assets/genno-hero.jpg) center/cover no-repeat;filter:blur(28px) brightness(.45)} .hero-img{object-fit:contain;object-position:50% 50%} .hero h1{max-width:none} } @media (min-width:900px){ .hero h1{font-size:56px;line-height:1} .hero h1 span{display:block} .hero-copy{gap:12px;padding-bottom:40px} .hero-sub{font-size:20px} } /* countdown to Day 1 (same big-number style as the buy box) */ .countdown{width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:6px} .cd-label{font-size:18px;font-weight:600;color:var(--ink-2)} .cd-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%} .cd-nums div{display:flex;flex-direction:column;align-items:center} .cd-nums b{font-size:52px;line-height:1;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums lining-nums} .cd-nums span{font-size:15px;font-weight:600;color:var(--ink-3);margin-top:6px} .cd-date{font-size:16px;color:var(--ink-3)} @media (min-width:900px){.cd-nums b{font-size:64px}} .hero-cd{max-width:360px;gap:8px;padding-top:4px} .hero-cd .cd-label{color:#E9E4DC} .hero-cd .cd-nums b{font-size:40px;color:#fff} .hero-cd .cd-nums span{font-size:13px;color:#CFC8BD;margin-top:4px} @media (min-width:900px){.hero-cd .cd-nums b{font-size:48px}} /* 5. calendar (circle grid, tap a day) */ .calx{--c1:#B5482A;--c2:#5F6E2B;--c3:#365F80;--c4:#94661B;--c5:#B3261E;--rest:#E4DED4} .calx .wrap{max-width:560px} .calx h2{margin-bottom:10px} .calx .intro{font-size:19px;color:var(--ink-2);margin-bottom:26px} /* selected-day header, like the reference */ .sel{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:end;margin-bottom:22px} .sel-num{grid-row:1 / span 2;font-size:112px;line-height:.8;font-weight:700;color:var(--sel,var(--c1));font-variant-numeric:lining-nums;transition:color .2s} .sel-month{font-size:26px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1} .sel-wd{font-size:20px;color:var(--ink-3);font-weight:600} .sel-info{margin:0 0 26px;min-height:84px} .sel-info b{display:block;font-size:26px;line-height:1.1;color:var(--sel,var(--c1));text-transform:uppercase} .sel-info span{display:block;font-size:17px;line-height:1.45;color:var(--ink-2);margin-top:6px} .sel-info em{font-style:normal;font-size:15px;color:var(--ink-3)} /* grid of circles: the 6 weeks, Mon to Sun */ .wd{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:8px} .wd span{text-align:center;font-size:13px;font-weight:600;color:var(--ink-3)} .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px} .dot{position:relative;aspect-ratio:1;border-radius:999px;border:0;padding:0;cursor:pointer;background:var(--bg);color:#fff;font-family:inherit;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:transform .12s ease,box-shadow .12s ease;font-variant-numeric:lining-nums} .dot.rest{color:#9A9286;cursor:pointer} .dot[aria-pressed="true"]{box-shadow:0 0 0 3px var(--cream-2),0 0 0 5.5px var(--ink);transform:scale(1.04)} .dot{flex-direction:column;line-height:1} .dot .mon{order:-1;font-size:9px;font-weight:700;letter-spacing:.06em;opacity:.9;margin-bottom:1px} .dot.first::after{content:"";position:absolute;inset:-4px;border-radius:999px;border:2px dashed var(--c1);opacity:.6} @media (min-width:640px){.dot{font-size:18px}.grid,.wd{gap:12px}} /* countdown: bigger label and bottom line */ .cd-label{font-size:27px;line-height:1.15;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.01em} .cd-date{font-size:20px;line-height:1.35;color:var(--ink-2);text-align:center} @media (min-width:900px){.cd-label{font-size:32px}.cd-date{font-size:22px}} /* ===== roadmap: Maximilian-style full-height cards, swipe only ===== */ .cards{gap:16px} .card{flex:0 0 78%;max-width:420px;aspect-ratio:auto;height:min(calc(var(--fvh,1svh) * 76),640px);min-height:480px;border-radius:12px} .card img{filter:brightness(.62)} .card::after{background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.72) 82%)} .card-body{padding:26px 24px 26px;gap:12px} .card-day{font-size:16px;font-weight:600;color:#E9E3DA;letter-spacing:.02em} .card h3{font-size:38px;line-height:1;text-transform:none;font-weight:600} .card-tag{align-self:flex-start;border:1.5px solid rgba(255,255,255,.85);border-radius:999px;padding:4px 16px;font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} .card p{font-size:18px;line-height:1.4;color:#EDE8E0} .card-btn{margin-top:6px;width:100%;height:56px;border-radius:999px;border:1.5px solid #fff;background:transparent;color:#fff;font-family:inherit;font-size:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer} .card-btn:hover{background:rgba(255,255,255,.12)} .card.rest{background:#1a1917} .card.rest::after{display:block} .road-ctrl{justify-content:center;margin-top:18px} .road-head{margin-bottom:24px} @media (min-width:900px){.card{flex-basis:360px;height:620px}} /* ===== calendar: week view ===== */ .wk .wrap{max-width:620px} .wk h2{margin-bottom:10px} .wk .intro{font-size:19px;color:var(--ink-2);margin-bottom:22px} .wk-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--gut));padding:2px var(--gut) 4px} .wk-tabs::-webkit-scrollbar{display:none} .wk-tabs button{flex-shrink:0;height:44px;padding:0 18px;border-radius:999px;border:1.5px solid #CFC6B8;background:transparent;font-family:inherit;font-size:17px;font-weight:700;color:var(--ink-2);cursor:pointer} .wk-tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff} .wk-range{margin:16px 0 14px;font-size:17px;color:var(--ink-3)} .wk-days{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .wk-row{display:grid;grid-template-columns:62px 1fr;gap:10px;align-items:stretch} .wk-date{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:24px;font-weight:700;line-height:1;color:var(--ink);font-variant-numeric:lining-nums} .wk-date b{font-size:14px;font-weight:600;color:var(--ink-3);margin-bottom:3px} .wk-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:0 18px;border-radius:12px;background:var(--c);color:#fff} .wk-bar b{font-size:19px;font-weight:700} .wk-bar span{font-size:15px;font-weight:600;opacity:.9;white-space:nowrap} .wk-row.rest .wk-bar{background:transparent;border:1.5px dashed #CFC6B8;color:var(--ink-3)} .wk-row.rest .wk-date{color:var(--ink-3)} .wk-row.c1{--c:#B5482A}.wk-row.c2{--c:#5F6E2B}.wk-row.c3{--c:#365F80}.wk-row.c4{--c:#94661B}.wk-row.c5{--c:#B3261E} .card-tag{font-size:13px;letter-spacing:.05em;white-space:nowrap;padding:5px 14px} /* arrow between cards: shows there's more */ .cards{gap:8px} .card-arrow{flex:0 0 28px;align-self:center;display:flex;align-items:center;justify-content:center;color:var(--ink);list-style:none} .card-arrow svg{width:26px;height:26px} /* trailer video */ .video video{display:block;width:100%;height:100%;object-fit:cover;background:#000} .video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:999px;border:0;background:rgba(255,255,255,.92);color:#111;display:flex;align-items:center;justify-content:center;cursor:pointer} .video-play[hidden]{display:none} /* trailer is cropped to the picture (no black bands): 720x838 */ .video{aspect-ratio:720/838;max-width:520px} /* reminder signup */ .remind-msg{min-height:1.4em;margin:2px 0 0;font-size:17px;color:#E9E4DC} .remind-fine{font-size:14px;color:#8E877D;margin:0} .remind input:disabled{opacity:.6} /* simpler offer card */ .offer{gap:14px;padding:30px 24px 24px} .offer-note{font-size:16px;color:var(--ink-3);margin-top:-4px} .offer-label{font-size:18px;font-weight:700;color:var(--red);letter-spacing:.02em} /* ===== calendar, styled after the reference (big orange date, grey circles) ===== */ .rc{--rc-bg:#E2DFDA;--rc-dot:#CFCAC2;--rc-orange:#F2683A;--rc-brown:#8C7A62;--rc-ink:#151515;--rc-sans:'Inter Tight','Helvetica Neue',Arial,sans-serif} .rc h2{margin-bottom:22px} .rc-card{background:var(--rc-bg);border-radius:28px;padding:34px 22px 26px;max-width:460px;font-family:var(--rc-sans);color:var(--rc-ink)} .rc-big{font-family:var(--rc-sans);font-weight:800;font-size:150px;line-height:.82;letter-spacing:-.04em;color:var(--rc-orange);font-variant-numeric:lining-nums;margin-bottom:22px} .rc-row{display:flex;justify-content:space-between;align-items:flex-start} .rc-my{display:flex;flex-direction:column;line-height:1} .rc-my b{font-size:32px;font-weight:800;letter-spacing:-.01em} .rc-my span{font-size:32px;font-weight:500;color:var(--rc-brown);margin-top:2px} .rc-wd{font-size:32px;font-weight:800;color:var(--rc-brown);line-height:1} .rc-info{margin:14px 0 22px;min-height:1.3em;font-size:17px;font-weight:600;color:var(--rc-ink)} .rc-head{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:8px} .rc-head span{text-align:center;font-size:11px;font-weight:600;color:#55504A} .rc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} .rc-dot{aspect-ratio:1;border-radius:999px;border:0;padding:0;background:var(--rc-dot);color:#6E675E;font-family:var(--rc-sans);font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,color .15s,transform .12s;font-variant-numeric:lining-nums} .rc-dot.rest{background:#F2F0EC;box-shadow:inset 0 0 0 1.5px #CFCAC2;color:#A39B90} .rc-dot.on{background:var(--rc-orange);color:#fff;box-shadow:none;transform:scale(1.05)} .rc-dot:first-child:not(.on){background:var(--rc-ink);color:#fff} .rc-hint{margin-top:14px;font-size:16px;color:var(--ink-3)} @media (min-width:640px){.rc-big{font-size:180px}.rc-dot{font-size:14px}.rc-grid,.rc-head{gap:9px}} /* calendar: one font (the page serif) + Genno's colours */ .rc{--rc-bg:#E9E2D6;--rc-dot:#D6CEC1;--rc-orange:#D3281C;--rc-brown:#7A746B;--rc-ink:#141312;--rc-sans:var(--serif)} .rc-big{font-weight:700;letter-spacing:-.02em;line-height:.8} .rc-my b,.rc-wd{font-weight:700;letter-spacing:.01em} .rc-my span{font-weight:500} .rc-info{font-size:19px;font-weight:600} .rc-head span{font-size:13px;color:var(--ink-3)} .rc-dot{font-size:15px;font-weight:700;color:#6B655D} .rc-dot.rest{background:#F6F2EB;box-shadow:inset 0 0 0 1.5px #D6CEC1;color:#A29A8F} /* calendar colour code + key */ .rc{--k1:#D3281C;--k2:#E07A2E;--k3:#B8892A;--k4:#6F7D57;--k5:#141312} .rc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:22px} .rc-top .rc-big{margin-bottom:0} .rc-key{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:600;line-height:1.15;color:var(--rc-ink)} .rc-key li{display:flex;align-items:center;gap:8px} .rc-key i{flex:none;width:12px;height:12px;border-radius:999px} .k1{--c:var(--k1)}.k2{--c:var(--k2)}.k3{--c:var(--k3)}.k4{--c:var(--k4)}.k5{--c:var(--k5)} .rc-key i:not(.k6),.rc-dot[class*=" k"]{background:var(--c)} .rc-key i.k6{background:#F6F2EB;box-shadow:inset 0 0 0 1.5px #BFB5A6} .rc-dot[class*=" k"]{color:#fff} .rc-dot:first-child:not(.on){background:var(--c);color:#fff} .rc-dot.on{background:var(--c,#F6F2EB);color:#fff;box-shadow:0 0 0 3px var(--rc-bg),0 0 0 5px var(--rc-ink);transform:scale(1.04)} .rc-dot.rest.on{color:var(--rc-ink)} @media (max-width:380px){.rc-key{font-size:12.5px}.rc-big{font-size:120px}} .offer-terms{font-size:17px;color:var(--ink-2)} /* ===== v3: Tessa's notes. GENNOFIT app palette, grey-studio hero, louder hierarchy ===== */ :root{ --dark:#16181A;--dark-2:#1C1E21;--cream:#ECEBE8;--cream-2:#F7F6F4; --ink:#16181A;--ink-2:#3A3D41;--ink-3:#63676C;--on-dark:#ECEBE8;--on-dark-2:#AEB3B8; --red:#B3141C;--red-hot:#E3262E;--gold:#EDB51C;--line:#D2D0CB; --l1:#E3262E;--l2:#EDB51C;--l3:#AEB3B8;--l4:#6B7075;--l5:#16181A; } .btn:hover{filter:none;background:#9A1118} /* hero: Genno on a grey studio backdrop, words underneath in ink */ .hero{height:auto;min-height:calc(var(--fvh,1svh) * 100);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;background:radial-gradient(110% 70% at 50% 32%,#DAD8D4 0%,#BDBAB4 55%,#A3A09A 100%);color:var(--ink)} .hero::after{display:none} .hero-bg{display:none!important} .hero-logo{color:var(--ink)} .hero-img{position:relative;inset:auto;width:auto;height:min(calc(var(--fvh,1svh) * 64),720px);max-width:100%;object-fit:contain;margin-top:56px;-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 82%,transparent 100%)} .hero-copy{position:relative;padding-top:6px;margin-top:-28px} .hero h1{color:var(--ink);font-size:42px} .hero h1 em{font-style:normal;color:var(--red)} .hero-sub{color:var(--ink-2)} .hero-sub b{color:var(--ink);font-weight:700} @media (min-width:900px){ .hero-img{object-fit:contain;height:min(66vh,760px)} .hero h1{font-size:68px} } /* keywords pop: red on light, gold on dark */ .cover em{font-style:italic;color:var(--red)} .trailer-line b{color:var(--gold);font-weight:700} .trailer-line{font-size:27px} .checks b{color:var(--ink)} .offer{background:var(--cream-2)} .offer-price b{color:var(--red)} /* roadmap: Maximilian-size cards, each day its own colour */ .card.c1{--c:var(--l1);--ct:#fff}.card.c2{--c:var(--l2);--ct:var(--ink)}.card.c3{--c:var(--l3);--ct:var(--ink)}.card.c4{--c:var(--l4);--ct:#fff}.card.c5{--c:#fff;--ct:var(--ink)}.card.rest{--c:transparent;--ct:#fff} .card{flex:0 0 86%;max-width:560px;height:min(calc(var(--fvh,1svh) * 84),780px);min-height:540px;border-radius:16px} .card img{filter:brightness(.7)} .card::after{background:linear-gradient(180deg,rgba(0,0,0,0) 28%,rgba(0,0,0,.82) 80%)} .card::before{content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:8px;background:var(--c)} .card.rest::before{display:none} .card-body{padding:30px 26px 32px;gap:14px} .card-day{align-self:flex-start;background:var(--c);color:var(--ct);font-size:19px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 16px;border-radius:8px} .card.rest .card-day{background:transparent;border:2px solid #fff;padding:4px 14px} .card h3{font-size:46px;line-height:.98;font-weight:700;text-transform:uppercase} .card-tag{border-color:rgba(255,255,255,.6);font-size:14px} .card p{font-size:20px;line-height:1.4;color:#E4E2DE} .card p b{color:#fff;font-weight:700} .dots button{background:#C9C7C2} @media (min-width:900px){.card{flex-basis:440px;height:720px}.card h3{font-size:52px}} /* calendar on the app palette */ .rc{--rc-bg:var(--cream-2);--rc-dot:#DCDAD6;--rc-orange:var(--red);--rc-brown:var(--ink-3);--rc-ink:var(--ink);--k1:var(--l1);--k2:var(--l2);--k3:var(--l3);--k4:var(--l4);--k5:var(--l5)} .rc-card{box-shadow:0 14px 44px rgba(22,24,26,.07)} .rc-dot.k2,.rc-dot.k3{color:var(--ink)!important} .rc-dot.rest{background:var(--cream);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink-3)} .rc-key i.k6{background:var(--cream);box-shadow:inset 0 0 0 1.5px #9a9690} .rc-dot.on{box-shadow:0 0 0 3px var(--rc-bg),0 0 0 5px var(--ink)} /* story: one big, wide call to action */ .btn-big{width:100%;max-width:560px;height:auto;min-height:74px;padding:18px 28px;font-size:23px;line-height:1.2;text-align:center} .story-copy form{margin-top:10px} @media (min-width:900px){.hero-img{height:min(54vh,700px);margin-top:64px}.hero h1{font-size:60px}.hero-copy{padding-bottom:44px}} /* ===== v3.1: Tessa's swatch (#ECE7DD) + grey gym photo as the hero ===== */ :root{--cream:#ECE7DD;--cream-2:#F5F2EC;--line:#D9D3C8} body{background:var(--cream)} .hero{background:#0B0B0B;color:#fff;justify-content:flex-end} .hero-logo{color:#fff} .hero-img{width:100%;height:auto;max-width:none;margin-top:-30%;-webkit-mask-image:none;mask-image:none;object-fit:initial} .hero-copy{margin-top:-150px;padding-top:70px;background:linear-gradient(180deg,rgba(11,11,11,0) 0%,rgba(11,11,11,.88) 32%,#0B0B0B 60%)} .hero h1{color:#fff} .hero h1 em{color:var(--red-hot)} .hero-sub{color:#D9D6D0} .hero-sub b{color:#fff} @media (min-width:900px){ .hero-img{width:auto;height:min(78vh,860px);margin-top:0} .hero-copy{margin-top:-170px;width:100%} } @media (min-width:900px){.hero-img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}} /* ===== v3.2: grey photo at the original hero size (full screen, like the red one) ===== */ .hero{display:block;height:calc(var(--fvh,1svh) * 100);min-height:560px} .hero-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;object-position:50% 40%;-webkit-mask-image:none;mask-image:none} .hero::after{display:block;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 52%,rgba(0,0,0,.82) 78%,rgba(0,0,0,.92) 100%)} .hero-copy{position:absolute;margin:0;padding-top:0;background:none} @media (min-width:900px){ .hero-bg{display:block!important;background-image:url(/assets/genno-grey.jpg?v=2)} .hero-img{object-fit:contain;object-position:50% 50%;width:100%;height:100%;-webkit-mask-image:none;mask-image:none} .hero-copy{margin:0} } @media (max-width:899px){.hero-img{inset:auto;top:calc(var(--fvh,1svh) * -31);left:0;right:0;height:calc(var(--fvh,1svh) * 131)}} @media (min-width:900px){.hero-img{inset:auto;top:-46vh;left:0;right:0;height:146vh}} /* ===== roadmap v4: uniform cards. Same photo height, text in the same spot on every card ===== */ .card{display:flex;flex-direction:column;background:#1C1E21} .card img{position:relative;inset:auto;flex:0 0 44%;height:44%;width:100%;object-fit:cover;filter:none} .card::after{inset:auto 0 auto 0;top:calc(44% - 90px);height:90px;background:linear-gradient(180deg,rgba(28,30,33,0),#1C1E21)} .card.rest::after{display:block} .card-body{position:relative;inset:auto;flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:12px;padding:6px 24px 26px} .card-day{font-size:16px;padding:5px 14px} .card h3{font-size:34px;line-height:1;min-height:2em;display:flex;align-items:flex-end;overflow-wrap:anywhere} .card-tag{font-size:13px;padding:5px 14px} .card p{font-size:18px;line-height:1.4;margin-top:2px} @media (min-width:900px){.card h3{font-size:40px}} .card-day{white-space:nowrap}.card img{flex-basis:54%;height:54%}.card::after{top:calc(54% - 90px)} /* roadmap v5: no boxes around the words, just coloured text */ .card-day,.card.rest .card-day{background:none;border:0;padding:0;border-radius:0;color:var(--c);font-size:17px;letter-spacing:.14em} .card.c4 .card-day{color:#A3A9AF} .card.rest .card-day{color:#ECE7DD} .card-tag{border:0;padding:0;border-radius:0;font-size:14px;letter-spacing:.1em;color:#AEB3B8} .card-body{gap:10px} @media (max-width:899px){.card{flex:0 0 calc(100vw - 2*var(--gut));max-width:none}.cards{gap:var(--gut);scroll-padding-left:var(--gut)}.card-arrow{display:none}} @media (max-width:899px){.card{flex:0 0 72vw;height:min(145vw,calc(var(--fvh,1svh) * 80));min-height:0}.cards{gap:8vw;padding-left:5vw;padding-right:5vw;scroll-padding-left:5vw}.card-body{padding:6px 20px 22px}.card h3{font-size:30px}.card p{font-size:17px}} .card::before{display:none}.card .card-day,.card.c4 .card-day,.card.rest .card-day{color:var(--red-hot)} .card .card-day{font-size:24px;letter-spacing:.12em;font-weight:700;line-height:1}@media (min-width:900px){.card .card-day{font-size:26px}} .card.rest .card-day{font-size:24px;letter-spacing:.12em}@media (min-width:900px){.card.rest .card-day{font-size:26px}} /* offer: dumbbell label, "Pre-order special" on the handle */ .db{display:flex;align-items:center;justify-content:center;margin-bottom:2px} .db i{display:block;background:var(--ink);flex:none} .db-end{width:9px;height:34px;border-radius:3px} .db-plate{width:15px;height:56px;border-radius:5px;margin:0 3px 0 2px} .db-plate:last-of-type{margin:0 2px 0 3px} .db-bar{display:block;background:var(--red);color:#fff;font-size:17px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1;padding:9px 16px;white-space:nowrap} @media (max-width:360px){.db-bar{font-size:14px;padding:8px 10px}} /* roadmap lead + treasure-map trail down to Monday */ .road-head{margin-bottom:0;gap:14px} .road-lead{font-size:22px;line-height:1.35;color:var(--ink-2);max-width:22em} .trail{display:block;width:min(340px,86vw);height:auto;margin:2px 0 4px} .trail-path{fill:none;stroke:var(--red);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:2 9} .trail-head{fill:none;stroke:var(--red);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round} .trail circle{fill:var(--red)} @media (min-width:900px){.road-lead{font-size:26px}} /* treasure-map trail v2: bigger, draws on scroll, X marks Monday */ .trail{width:min(380px,92vw);margin:6px 0 0} .trail-path{stroke-width:4.5;stroke-dasharray:12 11;stroke-linecap:butt} .trail-start{fill:var(--red)} .trail-x path{fill:none;stroke:var(--red);stroke-width:6;stroke-linecap:round} .trail-x{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)} .trail-x.on{transform:scale(1)} /* offer: two columns either side of "Pre-order special" */ .pillars{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:2px;color:var(--ink)} .pil{width:30px;height:54px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .pil .dot{fill:currentColor;stroke:none} .pillars span{font-size:20px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red);white-space:nowrap} @media (max-width:360px){.pillars span{font-size:16px}.pillars{gap:10px}} .pillars{gap:10px}.pil{width:24px;height:46px}.pillars span{font-size:17px;letter-spacing:.1em} /* roadmap: weekday leads, lesson title smaller */ .card .card-day,.card.rest .card-day{font-size:34px;letter-spacing:.06em;line-height:1} .card h3{font-size:22px;line-height:1.1;min-height:2.2em} @media (min-width:900px){.card .card-day,.card.rest .card-day{font-size:38px}.card h3{font-size:26px}} /* roadmap: even spacing day -> title -> tag */ .card h3{min-height:0;display:block;margin-top:-2px} .card-body{gap:8px} .card .card-day{margin-bottom:2px} .card-tag{margin-top:2px} .card p{margin-top:6px} .card.rest .card-day{color:#fff} /* longer trail: a full swipe */ .trail{width:min(400px,94vw)} /* calendar: weekends white, selected day grows with a red ring */ .rc-dot.rest{background:#fff;box-shadow:inset 0 0 0 1.5px var(--line)} .rc-key i.k6{background:#fff} .rc-dot{transition:transform .18s ease,box-shadow .18s ease} .rc-dot.on{transform:scale(1.16);box-shadow:0 0 0 2.5px var(--rc-bg),0 0 0 5px var(--red);z-index:1;position:relative} /* roadmap header centred, subtitle big (just under the title) */ .road-head{align-items:center;text-align:center} .road-lead{font-size:28px;line-height:1.2;font-weight:600;color:var(--ink);max-width:16em} .trail{margin-left:auto;margin-right:auto} @media (min-width:900px){.road-lead{font-size:42px}} .road-head .road-lead{font-size:28px;line-height:1.2;font-weight:600;color:var(--ink);max-width:16em}@media (min-width:900px){.road-head .road-lead{font-size:42px}} /* roadmap: the trail lights up the day you're on: slightly bigger, thin red border, bigger weekday */ .cards{padding-top:14px;padding-bottom:14px} .card{transition:transform .35s ease,box-shadow .35s ease} .card .card-day{transform-origin:left center;transition:transform .35s ease} .cards.lit .card.on{transform:scale(1.04);box-shadow:0 0 0 3px var(--red),0 18px 40px rgba(22,24,26,.25)} .cards.lit .card.on .card-day{transform:scale(1.08)} @media (prefers-reduced-motion:reduce){.card,.card .card-day{transition:none}} .trail{margin-bottom:-12px} /* rotating word in "This isn't your ___ ab program" */ .avg h2 .rot{display:inline-block;color:var(--red);transition:transform .28s ease,opacity .28s ease} .avg h2 .rot.out{transform:translateY(-.45em);opacity:0} .avg h2 .rot.in{transform:translateY(.45em);opacity:0;transition:none} /* javelin spears the $49.99 */ .offer-price s{position:relative;display:inline-block} .jav{display:none} .jav-ready s{text-decoration:none} .jav-ready .jav{display:block;position:absolute;left:-58px;top:52%;width:calc(100% + 78px);height:14px;margin-top:-7px;pointer-events:none;opacity:0;transform-origin:92% 50%} .jav-ready.thrown .jav{animation:jav-throw 1.15s cubic-bezier(.2,.75,.35,1) forwards} @keyframes jav-throw{ 0%{opacity:1;transform:translate(-115vw,-90px) rotate(-16deg)} 46%{opacity:1;transform:translate(0,0) rotate(-6deg)} 58%{transform:translate(0,0) rotate(-1.5deg)} 70%{transform:translate(0,0) rotate(-9deg)} 82%{transform:translate(0,0) rotate(-4deg)} 100%{opacity:1;transform:translate(0,0) rotate(-6deg)} } .jav-ready.thrown s{animation:jav-hit .3s .5s ease-out} @keyframes jav-hit{0%,100%{transform:none}30%{transform:translateX(5px)}60%{transform:translateX(-2px)}} .jav-ready.thrown b{animation:jav-pop .45s .62s ease-out} @keyframes jav-pop{0%,100%{transform:none}45%{transform:scale(1.14)}} .offer-price b{display:inline-block} .jav-ready .jav{left:-26px;width:calc(100% + 30px);height:18px;margin-top:-9px;transform-origin:96% 50%} /* sequence: $49.99 alone and centred, javelin spears it, it slides aside, $29.99 appears */ .jav-ready s{transform:translateX(var(--shift,0));transition:transform .55s cubic-bezier(.3,.8,.3,1)} .jav-ready b{opacity:0;transform:scale(.6);transition:opacity .4s .18s ease,transform .55s .18s cubic-bezier(.3,1.55,.5,1)} .jav-ready.thrown b{animation:none} .jav-ready.thrown s{animation:jav-hit2 .3s .5s ease-out} @keyframes jav-hit2{0%,100%{transform:translateX(var(--shift,0))}30%{transform:translateX(calc(var(--shift,0px) + 6px))}60%{transform:translateX(calc(var(--shift,0px) - 2px))}} .jav-ready.slid s{transform:none;animation:none} .jav-ready.slid b{opacity:1;transform:none} .cards.lit .card.rest.on{box-shadow:0 0 0 3px #fff,0 18px 40px rgba(22,24,26,.25)} /* $49.99 starts full size and black, then shrinks and slides left once speared */ .jav-ready s{transform:translateX(var(--shift,0)) scale(var(--big,1));color:var(--ink);transition:transform .6s cubic-bezier(.3,.8,.3,1),color .6s ease} @keyframes jav-hit2{0%,100%{transform:translateX(var(--shift,0)) scale(var(--big,1))}30%{transform:translateX(calc(var(--shift,0px) + 6px)) scale(var(--big,1))}60%{transform:translateX(calc(var(--shift,0px) - 2px)) scale(var(--big,1))}} .jav-ready.slid s{transform:none;color:var(--ink-3)} .trailer-line b{color:#DCF905} /* ===== page black #1C1C1C + page red #AB1922 (Tessa's swatches) ===== */ :root{--dark:#1C1C1C;--dark-2:#1C1C1C;--ink:#1C1C1C;--red:#AB1922;--red-hot:#AB1922;--l1:#AB1922;--l5:#1C1C1C} .btn:hover{background:#8F141C} .hero{background:#1C1C1C} .hero::after{background:linear-gradient(180deg,rgba(28,28,28,.35) 0%,rgba(28,28,28,0) 20%,rgba(28,28,28,0) 52%,rgba(28,28,28,.85) 78%,#1C1C1C 100%)} .card,.card.rest{background:#1C1C1C} .card::after{background:linear-gradient(180deg,rgba(28,28,28,0),#1C1C1C)} /* top-down Roman chariot leads the trail */ .trail{overflow:visible} .chariot *{stroke:#1C1C1C;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;fill:none} .chariot .ch-box,.chariot .ch-horse{fill:#F5F2EC} .chariot .ch-wheel{fill:#1C1C1C} .chariot .ch-man{fill:#F5F2EC} .chariot .ch-plume{stroke:var(--red);stroke-width:2.4} .chariot .ch-rein{stroke:var(--red);stroke-width:.9} .chariot *{stroke-width:1.3} .chariot .ch-ear,.chariot .ch-mane,.chariot .ch-tail{stroke-width:1.2} .chariot .ch-mane{stroke:#1C1C1C;opacity:.55} .chariot{will-change:transform} /* calendar header: month/year left, date number right (no key, no weekday) */ .rc-row{align-items:center;margin-bottom:4px} .rc-row .rc-big{font-size:76px;line-height:.8;margin:0;letter-spacing:-.02em} @media (min-width:640px){.rc-row .rc-big{font-size:92px}} /* side-view chariot */ .chariot *{stroke:#1C1C1C;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:1} .chariot .ch-horse,.chariot .ch-box,.chariot .ch-head{fill:#F5F2EC} .chariot .ch-wheel{fill:#F5F2EC;stroke-width:1.5} .chariot .ch-hub{fill:#1C1C1C} .chariot .ch-spoke{stroke-width:.8} .chariot .ch-plume{stroke:var(--red);stroke-width:2.2} .chariot .ch-rein{stroke:var(--red);stroke-width:.8} /* calendar v3: rounded squares with Roman numerals (like the app), outlined in each lesson's colour */ .rc-grid{gap:7px} .rc-dot,.rc-dot[class*=" k"],.rc-dot:first-child:not(.on){aspect-ratio:1;border-radius:9px;background:#E7E4DF;color:#5E5A55!important;box-shadow:inset 0 0 0 2px var(--c,#D2CDC4);font-size:12px;font-weight:600;letter-spacing:0;line-height:1;padding:0;transform:none} .rc-dot.rest{background:#fff;--c:#D9D3C8;color:#9A948B!important} .rc-dot.k1{--c:var(--l1)}.rc-dot.k2{--c:var(--l2)}.rc-dot.k3{--c:var(--l3)}.rc-dot.k4{--c:var(--l4)}.rc-dot.k5{--c:var(--l5)} .rc-dot.on,.rc-dot.on:first-child{background:var(--c);color:#fff!important;box-shadow:0 0 0 2.5px var(--rc-bg),0 0 0 4.5px var(--c);transform:scale(1.1);position:relative;z-index:1} .rc-dot.k2.on,.rc-dot.k3.on{color:#1C1C1C!important} .rc-dot.rest.on{background:#fff;color:#1C1C1C!important;box-shadow:0 0 0 2.5px var(--rc-bg),0 0 0 4.5px #1C1C1C} .rc-name.k1{color:var(--l1)}.rc-name.k2{color:var(--l2)}.rc-name.k3{color:var(--l3)}.rc-name.k4{color:var(--l4)}.rc-name.k5{color:var(--l5)} @media (max-width:360px){.rc-dot{font-size:10.5px}} @media (min-width:640px){.rc-dot,.rc-dot[class*=" k"]{font-size:14px}} :root{--l3:#8F959B}.rc-dot.long,.rc-dot.long[class*=" k"]{font-size:9.5px;letter-spacing:-.02em}@media (min-width:640px){.rc-dot.long,.rc-dot.long[class*=" k"]{font-size:12px}} #trailer{background:#000} /* marching Roman soldier leads the trail */ .soldier path,.soldier circle,.soldier rect{fill:#1C1C1C;stroke:none} .soldier .sl-pilum{fill:none;stroke:#1C1C1C;stroke-width:1.1;stroke-linecap:round} .soldier .sl-tunic,.soldier .sl-crest,.soldier .sl-shield{fill:var(--red)} .soldier .sl-band{fill:none;stroke:#4A4A4A;stroke-width:.5} .soldier .sl-trim{fill:none;stroke:#C9A227;stroke-width:.55} .soldier .sl-boss{fill:#C9A227} #sl-back path{fill:#3A3A3A} /* Thursday: lighter red instead of grey; date number takes the day's colour */ :root{--l4:#D9646C} .rc-big{transition:color .2s ease} .rc-row .rc-big.k1{color:var(--l1)}.rc-row .rc-big.k2{color:var(--l2)}.rc-row .rc-big.k3{color:var(--l3)}.rc-row .rc-big.k4{color:var(--l4)}.rc-row .rc-big.k5{color:var(--l5)}.rc-row .rc-big.rest{color:#9A948B} /* alternate dark / light from the calendar down */ #calendar h2{text-align:center;color:var(--on-dark)} #calendar .rc-card{color:var(--ink)} .light-story{color:var(--ink)} .light-story .story-copy p{color:var(--ink-2)} .light-story .story-copy .ph{color:#8A847B} .dark-faq{color:var(--on-dark)} .dark-faq .faq-list,.dark-faq details{border-color:#3A3A3A} .dark-faq summary{color:var(--on-dark)} .dark-faq summary::after{color:#9A948B} .dark-faq details p{color:var(--on-dark-2)} .light-remind{color:var(--ink)} .light-remind .remind p,.light-remind .remind-msg{color:var(--ink-2)} .light-remind .remind input{background:#fff;border-color:#CFC8BC;color:var(--ink)} .light-remind .btn-ghost{border-color:var(--ink);color:var(--ink)} .light-remind .btn-ghost:hover{background:var(--ink);color:#fff} #calendar .rc-card{margin-left:auto;margin-right:auto} .video{aspect-ratio:720/820;border-radius:6.4%/5.6%} .trail{margin-top:56px} /* hero: Genno higher so the headline sits below his abs; deeper shade behind the words */ @media (max-width:899px){.hero-img{top:calc(var(--fvh,1svh) * -40)}} @media (min-width:900px){.hero-img{top:-54vh}} .hero::after{background:linear-gradient(180deg,rgba(28,28,28,.35) 0%,rgba(28,28,28,0) 18%,rgba(28,28,28,0) 40%,rgba(28,28,28,.7) 56%,rgba(28,28,28,.94) 68%,#1C1C1C 80%)} .hero h1{text-shadow:0 2px 18px rgba(0,0,0,.55)} .hero h1 em{text-shadow:0 2px 14px rgba(0,0,0,.8)} @media (min-width:900px){.hero-img{top:-49vh}} /* ===== roadmap on desktop: wide landscape cards, words left, photo right (like Maximilian's desktop) ===== */ @media (min-width:900px){ .cards{gap:40px} .card-arrow{display:none} .card{flex:0 0 min(70vw,1080px);max-width:none;height:min(66vh,600px);min-height:480px;flex-direction:row;border-radius:16px} .card img{position:absolute;inset:0 0 0 auto;width:62%;height:100%;flex:none;object-fit:cover} .card::after{inset:0;top:0;height:auto;background:linear-gradient(90deg,#1C1C1C 0%,#1C1C1C 38%,rgba(28,28,28,.6) 50%,rgba(28,28,28,0) 66%)} .card-body{position:relative;z-index:1;width:52%;flex:none;justify-content:center;padding:56px 0 56px 64px;gap:12px} .card .card-day,.card.rest .card-day{font-size:44px} .card h3{font-size:34px} .card-tag{font-size:15px} .card p{font-size:21px;line-height:1.45;max-width:26em} } @media (min-width:900px){.hero-img{top:-44vh}} /* desktop hero: widened photo runs edge to edge (no blurred side panels) */ @media (min-width:900px){ .hero-bg{display:none!important} .hero-img{object-fit:cover;object-position:50% 50%;width:100%;-webkit-mask-image:none;mask-image:none} } @media (min-width:900px){.hero-img{top:-49vh}} @media (min-width:900px){.hero-img{top:-46vh}} .card{cursor:pointer} /* white spear: "more days this way" */ .card-next{position:absolute;z-index:3;right:18px;bottom:16px;width:72px;height:20px;padding:0;border:0;background:none;color:#fff;cursor:pointer;opacity:.92;animation:spear-nudge 1.6s ease-in-out infinite} .card-next svg{display:block;width:100%;height:100%;fill:currentColor} .card-next:hover{opacity:1} @keyframes spear-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}} @media (min-width:900px){.card-next{right:32px;bottom:28px;width:96px;height:26px}} @media (prefers-reduced-motion:reduce){.card-next{animation:none}} .card-next{width:88px;height:24px;right:16px;bottom:16px}@media (min-width:900px){.card-next{width:110px;height:30px;right:32px;bottom:28px}} .faq-cta{display:flex;justify-content:center;margin-top:18px}.faq-cta .btn-big{max-width:480px} /* new teaser (two 16:9 clips stacked) + red highlight */ .video{aspect-ratio:960/1094;border-radius:6.35%/5.58%} .trailer-line b{color:var(--red)} .light-story .story-copy p b{color:var(--ink)} /* My Story: easier to read. Darker ink, a touch larger and heavier, comfortable line length */ .light-story .story-copy p{color:var(--ink);font-size:21px;font-weight:500;line-height:1.55;max-width:30em} .light-story .story-copy p+p{margin-top:4px} .light-story .story-copy p b{font-weight:700} @media (max-width:899px){.light-story .story-copy p{font-size:20px}} /* ===== Oct 9 edits from Genno & Tessa's call ===== */ /* calendar: weeks shade from faded red (week 1) to deep red (week 6) */ .rc-dot.train,.rc-dot.train:first-child:not(.on){background:var(--wc);box-shadow:inset 0 0 0 2px var(--wc);color:#fff!important} .rc-dot.train.lt,.rc-dot.train.lt:first-child:not(.on){color:#5A1015!important} .rc-dot.train.on{background:var(--wc);color:#fff!important;box-shadow:0 0 0 2.5px var(--rc-bg),0 0 0 4.5px #1C1C1C;transform:scale(1.1)} .rc-dot.train.lt.on{color:#5A1015!important} .rc-grid.reveal .rc-dot{opacity:0;transform:translateX(26px)} .rc-grid.reveal .rc-dot.in{opacity:1;transform:none;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.3,1)} .rc-grid.reveal .rc-dot.in.on{transform:scale(1.1)} .rc-grid.reveal .rc-dot:nth-child(7n+2){transition-delay:.04s}.rc-grid.reveal .rc-dot:nth-child(7n+3){transition-delay:.08s}.rc-grid.reveal .rc-dot:nth-child(7n+4){transition-delay:.12s}.rc-grid.reveal .rc-dot:nth-child(7n+5){transition-delay:.16s}.rc-grid.reveal .rc-dot:nth-child(7n+6){transition-delay:.2s}.rc-grid.reveal .rc-dot:nth-child(7n){transition-delay:.24s} /* free bonus: three guide covers, stacked and gently moving */ .guides-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px} .guides-lead{font-size:21px;line-height:1.4;color:var(--ink);max-width:24em} .gcovers{position:relative;width:min(320px,80vw);height:min(300px,72vw);margin:18px 0 8px} .gcover{position:absolute;top:0;left:50%;width:58%;aspect-ratio:3/4;margin-left:-29%;border-radius:10px;background:linear-gradient(160deg,#2a2a2a,#111);box-shadow:0 16px 36px rgba(28,28,28,.28);display:flex;flex-direction:column;justify-content:space-between;padding:16px 14px;color:#fff;text-align:left} .gcover .cv-brand{font-size:12px;font-weight:700;letter-spacing:.18em} .gcover .cv-title{font-size:19px;font-weight:700;line-height:1.1} .gcover.g1{transform:translateX(-42%) rotate(-9deg);animation:cv1 5s ease-in-out infinite} .gcover.g2{z-index:2;background:linear-gradient(160deg,#c22632,#7e1219);animation:cv2 5s ease-in-out infinite} .gcover.g3{transform:translateX(42%) rotate(9deg);animation:cv3 5s ease-in-out infinite} @keyframes cv1{0%,100%{transform:translateX(-42%) rotate(-9deg)}50%{transform:translateX(-46%) translateY(-8px) rotate(-11deg)}} @keyframes cv2{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} @keyframes cv3{0%,100%{transform:translateX(42%) rotate(9deg)}50%{transform:translateX(46%) translateY(-8px) rotate(11deg)}} .guide-names{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:20px;font-weight:600;color:var(--ink)} .guides-cta{width:100%;display:flex;justify-content:center;margin-top:8px} @media (prefers-reduced-motion:reduce){.gcover{animation:none!important}} /* My Story now on dark: full text, easy to read */ .dark-story .story-copy p{color:#ECE7DD;font-size:20px;font-weight:500;line-height:1.55;max-width:32em} .dark-story .story-copy p b{color:#fff;font-weight:700} .dark-story .story-copy .story-hook{font-size:24px;font-weight:700;color:#fff;line-height:1.3} @media (min-width:900px){.dark-story .story-copy p{font-size:21px}.story{align-items:flex-start}.story-img{position:sticky;top:40px}} /* hero: Genno higher so his shorts show, lighter shade over the waist */ @media (max-width:899px){.hero-img{top:calc(var(--fvh,1svh) * -47)}} @media (min-width:900px){.hero-img{top:-50vh}} .hero::after{background:linear-gradient(180deg,rgba(28,28,28,.35) 0%,rgba(28,28,28,0) 18%,rgba(28,28,28,0) 48%,rgba(28,28,28,.35) 58%,rgba(28,28,28,.82) 70%,#1C1C1C 82%)} /* ===== from Tessa's doc ===== */ /* copy under the videos: longer coaching paragraph */ .trailer-line{font-size:20px;line-height:1.55;max-width:34em;color:#ECE7DD} .trailer-line b{color:#fff;font-weight:700} @media (min-width:900px){.trailer-line{font-size:22px}} /* calendar: "Your next 6 weeks will look like this", one week per row with its name and description */ .rc-title em{font-style:normal;color:#AB1922} .rc-title u{text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:6px} .rc-weeks{display:flex;flex-direction:column;gap:22px} .rc-wk-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px} .rc-wk-head b{font-size:20px;font-weight:700;color:var(--ink)} .rc-wk-head span{font-size:20px;font-weight:600;color:var(--wc)} .rc-week:nth-child(-n+2) .rc-wk-head span{color:#C4545C} .rc-wk-days{display:grid;grid-template-columns:repeat(7,1fr);gap:7px} .rc-wk-desc{margin:10px 0 0;font-size:17px;line-height:1.45;color:var(--ink-2)} .rc-weeks.reveal .rc-week{opacity:0;transform:translateX(70px)} .rc-weeks.reveal .rc-week.in{opacity:1;transform:none;transition:opacity .55s ease,transform .6s cubic-bezier(.2,.8,.3,1)} @media (min-width:640px){.rc-wk-days{gap:9px}} /* free bonuses */ .bonus-list{display:flex;flex-direction:column;gap:14px;width:100%;max-width:560px;text-align:left} .bonus{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:14px;background:var(--cream-2)} .bonus b{font-size:20px;font-weight:700;color:var(--ink)} .bonus span{font-size:18px;line-height:1.45;color:var(--ink-2)} .bonus-plus{font-size:26px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin-top:8px} .guides-lead em{font-style:italic} .gcover .cv-title{font-size:17px} /* no sideways scroll: weeks slide in inside the card, and the page never gets wider than the screen */ .rc-card{overflow:hidden} html,body{overflow-x:clip} /* phone hero: smaller photo so his whole head sits below the logo and his shorts show */ @media (max-width:899px){.hero-img{top:calc(var(--fvh,1svh) * -19);height:calc(var(--fvh,1svh) * 100)}} /* phone hero: smaller and higher so his shorts sit above the headline (and his head stays below the logo) */ @media (max-width:899px){ .hero-img{top:calc(var(--fvh,1svh) * -16);height:calc(var(--fvh,1svh) * 86)} .hero::after{background:linear-gradient(180deg,rgba(28,28,28,.35) 0%,rgba(28,28,28,0) 16%,rgba(28,28,28,0) 60%,rgba(28,28,28,.55) 68%,rgba(28,28,28,.9) 76%,#1C1C1C 86%)} } /* phone hero, sized to the space above the headline: head ~70px from the top, shorts end above the words on any phone height */ @media (max-width:899px){ .hero-img{--h:min(calc((calc(var(--fvh,1svh) * 100) - 360px) / 0.62),820px);inset:auto;top:calc(70px - var(--h) * .3);left:50%;right:auto;height:var(--h);width:auto;max-width:none;transform:translateX(-50%);object-fit:contain;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)} } /* FREE in red; icons on the app and nutrition bonuses */ .free{font-style:normal;color:var(--red)} .bonus.has-ic{flex-direction:row;align-items:flex-start;gap:14px} .bonus.has-ic>div{display:flex;flex-direction:column;gap:4px} .bonus-ic{flex:none;width:34px;height:34px;padding:6px;border-radius:10px;background:var(--red);fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:2px} /* testimonials: swipeable row of Playbook screenshots */ .testimonials h2{text-align:center;margin-bottom:26px} .shots{list-style:none;margin:0;padding:4px var(--gut) 10px;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch} .shots::-webkit-scrollbar{display:none} .shot{flex:0 0 68vw;max-width:300px;scroll-snap-align:center;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 10px 28px rgba(28,28,28,.12)} .shot img{display:block;width:100%;height:auto} .shot-ph{aspect-ratio:9/16;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;color:var(--ink-3);font-size:17px;border:2px dashed var(--line);border-radius:16px} @media (min-width:900px){.shots{justify-content:center;flex-wrap:wrap;overflow:visible}.shot{flex-basis:260px}} /* phone hero uses the widened photo too, so it always fills the screen edge to edge (no side gaps) */ @media (max-width:899px){.hero-img{-webkit-mask-image:none;mask-image:none;object-fit:cover}} @media (max-width:899px){.hero-img{-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 99%);mask-image:linear-gradient(180deg,#000 82%,transparent 99%)}} .testi-cta{display:flex;justify-content:center;margin-top:28px}.testi-cta form{width:100%;display:flex;justify-content:center} .rc-icon{display:block;width:52px;height:52px;margin:-8px auto 22px;fill:none;stroke:#ECE7DD;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.rc-icon .dots rect{fill:#ECE7DD;stroke:none}.rc-title{text-align:center} @media (max-width:899px){.hero-img{--h:min(calc((calc(var(--fvh,1svh) * 100) - 334px) / 0.56),1000px);top:calc(62px - var(--h) * .3)}} .rc-dot{cursor:default;display:flex;align-items:center;justify-content:center;user-select:none} /* ===== Oct 10: Genno & Tessa notes ===== */ .white-sec{background:#FFFFFF;color:var(--ink)} .cream-dk{background:var(--cream)} /* one cream for the whole page */ .cream-dk .bonus{background:#F8F5EF} /* same lighter cream as the "what you get" cards */ /* one big line above the videos, the rest below */ .trailer-head{color:#fff;text-align:center;font-size:34px;line-height:1.15;text-transform:none;max-width:16em;margin:0 auto 4px} .trailer-head em{font-style:normal;color:#AB1922} @media (min-width:900px){.trailer-head{font-size:46px}} /* calendar on white: big bold heading, one week per block, numbered red squares */ #calendar .rc-title{color:var(--ink);font-size:40px;line-height:1.08;text-transform:none} #calendar .rc-title em{color:var(--red)} #calendar .rc-title u{text-decoration-color:var(--red)} #calendar .rc-icon{stroke:var(--ink);margin:6px auto 30px} #calendar .rc-icon .dots rect{fill:var(--ink)} @media (min-width:900px){#calendar .rc-title{font-size:56px}} #calendar .rc-card{background:none;box-shadow:none;padding:0;max-width:520px;overflow:hidden} .rc-weeks{gap:0} .rc-week{padding:6px 2px 4px} .rc-wk-head{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-bottom:14px} .rc-wk-head b{font-size:34px;line-height:1;font-weight:700;color:var(--ink)} .rc-wk-head span,.rc-week:nth-child(-n+2) .rc-wk-head span{font-size:30px;line-height:1.05;font-weight:700;color:var(--ink)} .rc-mo{font-style:normal;margin-top:8px;background:var(--ink);color:#fff;font-size:15px;font-weight:700;letter-spacing:.04em;padding:3px 9px;border-radius:4px} .rc-wk-days{display:grid;grid-template-columns:repeat(7,1fr);gap:8px} .rc-dot,.rc-dot.train,.rc-dot.rest{aspect-ratio:1;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;font-variant-numeric:lining-nums;line-height:1;transform:none;cursor:default} .rc-dot.train{background:var(--red);color:#fff!important;box-shadow:none} .rc-dot.rest{background:#fff;color:var(--ink-3)!important;box-shadow:inset 0 0 0 2px #D9D3C8} .rc-wk-desc{margin:14px 0 0;font-size:19px;line-height:1.5;font-weight:500;color:var(--ink)} .rc-next{display:block;width:30px;height:30px;margin:22px auto 26px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .rc-weeks.reveal .rc-week{opacity:1;transition:none;will-change:transform} /* story: lead line above the photo */ .story{flex-wrap:wrap} .story-lead{flex:0 0 100%;color:#fff;font-size:32px;line-height:1.15;text-transform:none;text-align:center;margin-bottom:6px} @media (min-width:900px){.story-lead{font-size:44px}} /* real guide cover */ .gcover.has-img{padding:0;overflow:hidden;background:#111} .gcover.has-img img{width:100%;height:100%;object-fit:cover} .rc-wk-days .rc-dot.train,.rc-wk-days .rc-dot.train:first-child{background:var(--red)!important;color:#fff!important;box-shadow:none!important;transform:none!important} .rc-wk-days .rc-dot{font-size:20px!important;letter-spacing:0!important} /* My Story: line across the top, photo and text side by side on desktop; photo never pins over the text */ .story-img{position:static!important} @media (min-width:900px){ .story{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);gap:36px 64px;align-items:start} .story-lead{grid-column:1/-1;margin-bottom:8px} .story-img{max-width:none} } /* testimonials, Maximilian style: post card on a dark glow with comment bubbles overlapping it */ .glow{background:radial-gradient(60% 45% at 50% 52%,#3a3a3a 0%,#161616 55%,#0b0b0b 100%);color:#fff;overflow:hidden} .glow h2{color:#fff} .post-wrap{position:relative;width:min(330px,74vw);margin:34px auto 40px} .post{margin:0;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.45)} .post img{display:block;width:100%;height:auto} .bubble{position:absolute;display:flex;align-items:center;gap:12px;background:#fff;color:#1C1C1C;border-radius:18px;padding:12px 18px 12px 12px;box-shadow:0 14px 34px rgba(0,0,0,.35);max-width:min(270px,70vw)} .bubble .av{flex:none;width:44px;height:44px;border-radius:50%;background:var(--av);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700} .bubble .nm{display:block;font-size:15px;color:#8A847B;margin-bottom:2px} .bubble p{margin:0;font-size:17px;line-height:1.3;font-weight:500} .bubble.b1{top:10%;right:-24%} .bubble.b2{top:44%;left:-24%} .bubble.b3{bottom:12%;right:-20%} @media (max-width:480px){.bubble.b1{right:-10%}.bubble.b2{left:-12%}.bubble.b3{right:-8%}.bubble p{font-size:16px}} @media (min-width:900px){.post-wrap{width:420px}.bubble p{font-size:19px}} .testi-cta{margin-top:8px} @media (max-width:899px){ .post-wrap{width:84vw;margin:30px auto 44px} .bubble{padding:9px 14px 9px 9px;gap:10px;max-width:60vw;border-radius:15px} .bubble .av{width:34px;height:34px;font-size:16px} .bubble .nm{font-size:13px} .bubble p{font-size:15px} .bubble.b1{top:4%;right:-5%} .bubble.b2{top:46%;left:-6%} .bubble.b3{bottom:4%;right:-4%} } /* comments v2: grey bubbles like Maximilian's, smaller, pushed past the card edges so the post stays readable */ .post-wrap{width:min(330px,64vw)!important;margin:34px auto 40px!important} .bubble{background:#F3F3F5!important;padding:10px 18px 10px 10px!important;gap:12px!important;border-radius:16px!important;box-shadow:0 10px 28px rgba(0,0,0,.28)!important;max-width:none!important;width:max-content} .bubble svg.av{flex:none;width:44px;height:44px;border-radius:50%} .bubble .nm{font-size:14px!important;color:#7C7C84!important} .bubble p{font-size:16px!important;line-height:1.3;white-space:nowrap} .bubble.b1{top:12%!important;left:52%!important;right:auto!important;bottom:auto!important} .bubble.b2{top:46%!important;left:-30%!important;right:auto!important;bottom:auto!important} .bubble.b3{top:70%!important;left:36%!important;right:auto!important;bottom:auto!important} @media (max-width:899px){ .bubble{padding:8px 14px 8px 8px!important;gap:9px!important} .bubble svg.av{width:34px;height:34px} .bubble .nm{font-size:12px!important} .bubble p{font-size:14px!important} .bubble.b1{left:38%!important} .bubble.b2{left:-12%!important} .bubble.b3{left:22%!important} } @media (min-width:900px){.post-wrap{width:360px!important}.bubble p{font-size:18px!important}} @media (max-width:899px){.bubble.b1{left:auto!important;right:-14%!important}} /* comments v3: bigger post, compact bubbles mostly in the margins (like Maximilian's), bottom one without avatar */ .bubble img.av{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover} .bubble.plain{padding:10px 16px!important;align-items:flex-start} .bubble.plain p{white-space:normal!important;width:250px} .post-wrap{width:min(360px,80vw)!important} .bubble.b1{top:9%!important;left:auto!important;right:-16%!important} .bubble.b2{top:43%!important;left:-16%!important;right:auto!important} .bubble.b3{top:auto!important;bottom:16%!important;left:auto!important;right:-20%!important} @media (max-width:899px){ .post-wrap{width:80vw!important} .bubble{padding:6px 11px 6px 6px!important;gap:7px!important;border-radius:13px!important} .bubble svg.av,.bubble img.av{width:28px;height:28px} .bubble .nm{font-size:11px!important;margin-bottom:0} .bubble p{font-size:13px!important} .bubble.plain{padding:7px 12px!important} .bubble.plain p{width:52vw} .bubble.b1{right:-7%!important;left:auto!important} .bubble.b2{left:-7%!important} .bubble.b3{right:-7%!important;left:auto!important;bottom:15%!important} } /* the floating Pre-order bar: no page-level clipping (it could pin the bar mid-page on iPhone Safari) */ html,body{overflow-x:visible} .bar{will-change:transform} .bubble.b3{bottom:7%!important;right:-26%!important}@media (max-width:899px){.bubble.b3{bottom:6%!important;right:-9%!important}} /* comment bubbles in the same clean sans as the Playbook post */ .bubble,.bubble *{font-family:'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif} .bubble .nm{font-weight:400;letter-spacing:0} .bubble p{font-weight:500;letter-spacing:-.005em} @media (max-width:899px){.bubble p{font-size:12.5px!important}.bubble .nm{font-size:11px!important}} .rc-weeks.reveal .rc-week{will-change:transform,opacity;backface-visibility:hidden} .bubble.b3{bottom:-7%!important;right:-24%!important}@media (max-width:899px){.bubble.b3{bottom:-8%!important;right:-9%!important}}.testimonials .post-wrap{margin-bottom:64px!important} html,body{background:#1C1C1C} /* guide covers: rotating stack, tap to bring forward */ .gcover{animation:none!important;cursor:pointer;transition:transform .7s cubic-bezier(.22,.8,.24,1),box-shadow .7s,filter .7s;-webkit-tap-highlight-color:transparent} .gcover.pos-l{transform:translateX(-42%) rotate(-9deg) scale(.92)!important;z-index:1!important;filter:brightness(.8)} .gcover.pos-c{transform:translateY(-6px) scale(1.04)!important;z-index:3!important;box-shadow:0 22px 44px rgba(28,28,28,.38)} .gcover.pos-r{transform:translateX(42%) rotate(9deg) scale(.92)!important;z-index:1!important;filter:brightness(.8)} @media (prefers-reduced-motion:reduce){.gcover{transition:none}} /* guide covers: faster switch + bounce (uses translate so it stacks with the position transform) */ .gcover{transition:transform .5s cubic-bezier(.22,.8,.24,1),box-shadow .5s,filter .5s} @keyframes gbob{0%,100%{translate:0 0}50%{translate:0 -10px}} .gcover.g1{animation:gbob 2.4s ease-in-out infinite!important} .gcover.g2{animation:gbob 2.4s ease-in-out -.8s infinite!important} .gcover.g3{animation:gbob 2.4s ease-in-out -1.6s infinite!important} @media (prefers-reduced-motion:reduce){.gcover.g1,.gcover.g2,.gcover.g3{animation:none!important}} /* calendar CTA */ .rc-cta{margin-top:30px} /* My Story desktop: photo stays put while the story scrolls beside it */ @media (min-width:900px){.dark-story .story-img{position:sticky!important;top:40px;align-self:start}} /* Not ready yet: one slim bar */ #remind{padding:22px 0!important} #remind .remind{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;max-width:860px;margin:0 auto} #remind .remind h2{font-size:24px;margin:0;line-height:1.2;white-space:nowrap} #remind .remind>p{display:none} #remind .remind-row{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;margin:0;flex:1 1 320px;max-width:520px} #remind .remind input{height:46px;border-radius:12px;font-size:17px;flex:1 1 180px;min-width:0} #remind .remind-row .btn{height:46px;min-height:0;padding:0 20px;font-size:17px;flex:none;width:auto} #remind .remind-msg{flex-basis:100%;min-height:0;margin:0;font-size:15px} #remind .remind-msg:empty{display:none} /* desktop comments: smaller, out at the corners of Genno's post */ @media (min-width:900px){ .bubble{padding:7px 13px 7px 7px!important;gap:8px!important;border-radius:13px!important} .bubble img.av{width:32px;height:32px} .bubble .nm{font-size:12px!important;margin-bottom:0} .bubble p{font-size:14px!important} .bubble.plain{padding:8px 13px!important} .bubble.plain p{width:230px} .bubble.b1{top:-3%!important;bottom:auto!important;left:auto!important;right:-34%!important} .bubble.b2{top:37%!important;bottom:auto!important;left:-57%!important;right:auto!important} .bubble.b3{top:auto!important;bottom:-9%!important;left:auto!important;right:-62%!important} } /* Not ready yet: roomier on desktop */ @media (min-width:900px){ #remind{padding:46px 0!important} #remind .remind{gap:14px 28px;max-width:980px} #remind .remind h2{font-size:34px} #remind .remind-row{max-width:600px;gap:12px} #remind .remind input{height:58px;font-size:19px;border-radius:14px;padding:0 20px} #remind .remind-row .btn{height:58px;padding:0 30px;font-size:19px} } /* phone mockup placeholders (swap .phone-screen contents for an ) */ .phone{position:relative;aspect-ratio:9/19.5;border-radius:42px;background:#0d0d0d;padding:9px;box-shadow:0 0 0 1.5px #3a3a3a,0 24px 50px rgba(0,0,0,.35)} .phone::before{content:"";position:absolute;top:18px;left:50%;width:30%;height:22px;margin-left:-15%;border-radius:12px;background:#0d0d0d;z-index:2} .phone-screen{width:100%;height:100%;border-radius:34px;overflow:hidden;background:linear-gradient(180deg,#3a3a3a,#262626);display:flex;align-items:center;justify-content:center} .phone-screen img{width:100%;height:100%;object-fit:cover} .phone-screen span{font-family:'Inter',-apple-system,Arial,sans-serif;font-size:13px;color:#9a9a9a} /* spot A: one tilted phone in Free Bonuses */ .phone-bonus{width:min(200px,50vw);transform:rotate(-6deg);margin:10px 0 18px} /* spot B: slim app section on black */ .app-sec{background:#000;color:#fff} .app-wrap{display:flex;flex-direction:column;align-items:center;gap:34px} .app-phones{position:relative;width:min(330px,82vw);height:min(400px,98vw)} .app-phones .phone{position:absolute;width:52%} .app-phones .ph-back{right:4%;top:0;transform:rotate(9deg)} .app-phones .ph-front{left:4%;top:8%;transform:rotate(-8deg);z-index:2} .app-copy{max-width:30em;text-align:center} .app-copy h2{color:#fff;margin-bottom:16px} .app-copy h2 em{font-style:normal;color:var(--red)} .app-copy p{font-size:20px;line-height:1.5;color:#ECE7DD;margin:0 0 10px} @media (min-width:900px){ .app-wrap{flex-direction:row;justify-content:center;gap:80px} .app-phones{width:400px;height:480px;flex:none} .app-copy{text-align:left} .app-copy p{font-size:21px} } /* trailer: two separate clips, as big as the screen allows, with space between */ .vids .videos{display:flex;flex-direction:column;gap:22px;width:100%;max-width:860px} .vids .video{aspect-ratio:16/9!important;max-width:none!important;width:100%;border-radius:0!important;background:#000} @media (min-width:900px){.vids .videos{gap:36px}} /* My Story: underline "what works" */ .story-lead u{text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:7px} /* calendar: week focus in red + ab icon that gets more defined each week */ #calendar .rc-wk-head span,#calendar .rc-week:nth-child(-n+2) .rc-wk-head span{color:var(--red)!important} #calendar .rc-wk-head{position:relative;padding-right:84px} .rc-abs{position:absolute;right:0;top:-4px;width:72px;height:80px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transform:scale(0);opacity:0;transform-origin:50% 60%} .rc-abs .ab-new{stroke:var(--red)} .rc-week.pop .rc-abs{animation:abpop .55s cubic-bezier(.3,1.6,.5,1) forwards} @keyframes abpop{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}} @media (prefers-reduced-motion:reduce){.rc-abs{transform:none;opacity:1}} @media (min-width:900px){.rc-abs{width:84px;height:92px}#calendar .rc-wk-head{padding-right:96px}} /* app section: three real app screens fanned out */ .app-wrap{flex-direction:column!important;align-items:center;gap:30px!important;text-align:center} .app-wrap h2{color:#fff;max-width:14em} .app-wrap h2 em{font-style:normal;color:var(--red)} .app-sec .app-phones{position:relative;width:min(380px,74vw);height:auto;aspect-ratio:1/1.12} .app-sec .ap{position:absolute;top:0;width:48%;height:auto;filter:drop-shadow(0 22px 34px rgba(0,0,0,.55))} .app-sec .ap-c{left:26%;z-index:2} .app-sec .ap-l{left:0;top:7%;transform:rotate(-8deg);transform-origin:80% 90%} .app-sec .ap-r{right:0;top:7%;transform:rotate(8deg);transform-origin:20% 90%} .app-cta{margin-top:0} @media (min-width:900px){ .app-sec .app-phones{width:640px;aspect-ratio:1/0.92} .app-sec .ap{width:40%} .app-sec .ap-c{left:30%} } .app-cta{width:100%}.app-cta .btn{width:100%;max-width:480px} .rc-abs{overflow:visible;stroke-width:2.8} /* traced ab icon: filled shapes, not strokes */ .rc-abs{stroke:none!important;fill:var(--ink)!important;fill-rule:evenodd} .rc-abs path{fill:var(--ink)} .rc-abs path.ab-new{fill:var(--red)} /* live workout phone (from gennofit-mockups/phone-video), laid out in the phone image's 432 x 898 units */ .gf-phone{aspect-ratio:432/898;container-type:inline-size;--u:calc(100cqw/432)} .gf-phone>img{position:absolute;inset:0;width:100%;height:100%;display:block} .gf-phone video{position:absolute;left:calc(15*var(--u));top:calc(130*var(--u));width:calc(402*var(--u));height:calc(226.125*var(--u));object-fit:cover;background:#000;display:block} .gf-scrub{position:absolute;left:calc(15*var(--u));top:calc(356*var(--u));width:calc(402*var(--u));height:calc(30*var(--u));background:#141414} .gf-scrub .tr{position:absolute;left:0;right:0;top:0;height:calc(4*var(--u));background:#3A3A3A} .gf-scrub .fill{position:absolute;left:0;top:0;bottom:0;width:21%;background:#AB1922} .gf-scrub .knob{position:absolute;top:50%;left:21%;width:calc(14*var(--u));height:calc(14*var(--u));margin:calc(-7*var(--u)) 0 0 calc(-7*var(--u));border-radius:50%;background:#fff} .gf-scrub .tm{position:absolute;top:calc(12*var(--u));left:calc(20*var(--u));right:calc(20*var(--u));display:flex;justify-content:space-between;font:600 calc(12*var(--u))/1 -apple-system,'SF Pro Text',system-ui,sans-serif;color:#8F959B;font-variant-numeric:tabular-nums} .gf-eq{position:absolute;left:calc(370*var(--u));top:calc(654.625*var(--u));width:calc(17*var(--u));height:calc(17*var(--u));background:#2A1416;display:flex;gap:calc(2*var(--u));align-items:flex-end;justify-content:center;padding-bottom:calc(2*var(--u));box-sizing:border-box} .gf-eq i{width:calc(3*var(--u));height:calc(13*var(--u));background:#E3262E;border-radius:calc(1*var(--u));transform-origin:bottom;animation:gf-eq .9s ease-in-out infinite alternate} .gf-eq i:nth-child(1){animation-duration:.7s;animation-delay:-.2s} .gf-eq i:nth-child(2){animation-duration:.55s;animation-delay:-.45s} .gf-eq i:nth-child(3){animation-duration:.8s;animation-delay:-.1s} @keyframes gf-eq{0%{transform:scaleY(.25)}35%{transform:scaleY(.9)}60%{transform:scaleY(.45)}100%{transform:scaleY(1)}} .gf-phone.paused .gf-eq i{animation-play-state:paused} @media (prefers-reduced-motion:reduce){.gf-eq i{animation:none;transform:scaleY(.6)}} /* testimonials: real comments from the last program, two slow rows moving in opposite directions */ .cm-rows{display:flex;flex-direction:column;gap:14px;margin:30px 0 38px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .cm-row{overflow:hidden} .cm-track{display:flex;align-items:flex-start;gap:14px;width:max-content;animation:cm-scroll 95s linear infinite} .cm-row.rev .cm-track{animation-direction:reverse;animation-duration:80s} .cm-row:hover .cm-track,.cm-row:active .cm-track{animation-play-state:paused} @keyframes cm-scroll{to{transform:translateX(-50%)}} .cm{margin:0;flex:none;width:280px;display:flex;gap:12px;align-items:flex-start;background:#F6F5F3;color:#1C1C1C;border-radius:16px;padding:14px 16px 15px;font-family:'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif} .cm.long{width:360px} .cm-av{flex:none;width:36px;height:36px;border-radius:50%;background:#E6E0D7;color:var(--red);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;object-fit:cover} .cm figcaption{min-width:0} .cm-nm{display:block;font-size:13px;font-weight:600;color:#1C1C1C;margin-bottom:3px} .cm-nm time{font-weight:400;color:#8A8A90;margin-left:4px} .cm blockquote{margin:0;font-size:15px;line-height:1.4;font-weight:500;letter-spacing:-.005em} @media (min-width:900px){.cm{width:320px}.cm.long{width:420px}.cm blockquote{font-size:16px}} @media (prefers-reduced-motion:reduce){.cm-track{animation:none}.cm-row{overflow-x:auto}} /* reactions v2: smaller cards, three rows, even spacing, hold to pause */ .cm-rows{gap:10px;margin:26px 0 34px;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} .cm-track{align-items:center;gap:10px} .cm-rows.held .cm-track,.cm-row:hover .cm-track{animation-play-state:paused} .cm{width:220px;gap:9px;padding:10px 12px 11px;border-radius:13px} .cm.long{width:300px} .cm-av{width:28px;height:28px;font-size:13px} .cm-nm{font-size:11.5px;margin-bottom:2px} .cm blockquote{font-size:13px;line-height:1.38} .cm-row .cm-track{animation-duration:70s} .cm-row.rev .cm-track{animation-duration:60s} .cm-row:nth-child(3) .cm-track{animation-duration:65s} @media (min-width:900px){.cm{width:250px}.cm.long{width:340px}.cm blockquote{font-size:14px}.cm-nm{font-size:12px}.cm-av{width:30px;height:30px}} /* reactions v3: one-screen pile of overlapping comments that swap every few seconds */ #testimonials{padding:44px 0 40px!important} #testimonials h2{font-size:30px;line-height:1.08} .cm-pile{position:relative;width:min(372px,calc(100% - 24px));height:442px;margin:22px auto 22px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:pan-y} .cm-slot{position:absolute;transform:rotate(var(--r));transition:opacity .38s ease,transform .38s ease} .cm-slot.out{opacity:0;transform:rotate(var(--r)) translateY(8px) scale(.94)} .cm-slot .cm{width:100%;box-shadow:0 10px 26px rgba(0,0,0,.45)} .cm-slot .cm.long{width:100%} .s1{top:0;left:0;width:72%;--r:-3deg;z-index:1} .s2{top:76px;right:0;width:70%;--r:2.5deg;z-index:2} .s3{top:146px;left:2%;width:72%;--r:-1.5deg;z-index:3} .s4{top:212px;right:1%;width:70%;--r:3deg;z-index:4} .s5{top:270px;left:3%;width:92%;--r:-1deg;z-index:5} @media (min-width:900px){ #testimonials{padding:60px 0 56px!important} #testimonials h2{font-size:44px} .cm-pile{width:700px;height:350px} .s1{top:0;left:0;width:48%} .s2{top:26px;right:0;width:48%} .s3{top:92px;left:7%;width:48%} .s4{top:112px;right:5%;width:46%} .s5{top:180px;left:19%;width:62%} } @media (prefers-reduced-motion:reduce){.cm-slot{transition:none}} /* square buttons: same 9px corners as the calendar day squares (the round pills didn't fit the look) */ .btn,.btn-big,.btn-wide,.btn-ghost,#bar .btn{border-radius:9px!important} /* reactions: straight cards (no tilt) and a bridge line from the old program to this one, above the CTA */ .cm-slot{--r:0deg!important} .testi-bridge{text-align:center;margin:-4px auto 20px;max-width:30em} .testi-bridge p{margin:0;color:#ECE7DD;font-size:21px;line-height:1.35} .testi-bridge b{display:block;color:#fff;font-size:24px;font-weight:700} .testi-bridge em{font-style:italic} @media (min-width:900px){.testi-bridge p{font-size:23px}.testi-bridge b{font-size:28px}} /* bridge line: one short line, one style */ .testi-bridge p{color:#fff;font-weight:700;font-size:clamp(15px,4.4vw,26px);white-space:nowrap} /* Who this is for: two ways it fits, merging into "either way" (below the countdown) */ .who-wrap{display:flex;flex-direction:column;align-items:center;text-align:center} .who-wrap h2{margin:0} .who-sub{margin:8px 0 24px;font-size:21px;font-style:italic;color:var(--ink)} .who-sub em{color:var(--red)} .who-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:640px;margin-top:26px} .who-card{background:#F3EEE6;border-radius:14px;padding:22px 14px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center} .who-ic{width:56px;height:56px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .who-card h3{margin:0;font-size:17px;line-height:1.25;letter-spacing:.1em;text-transform:uppercase;color:var(--red);max-width:11em} .who-dark{position:relative;width:100%;max-width:640px;margin-top:12px;background:var(--dark);color:var(--on-dark);border-radius:14px;padding:26px 22px 24px;text-align:left} .who-dark h3{margin:0 0 16px;font-size:16px;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-align:center} .who-dark ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px} .who-dark li{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:baseline;font-size:17px;line-height:1.3;color:var(--on-dark-2)} .who-dark li i{font-style:normal;font-weight:700;color:var(--red);letter-spacing:.06em;text-align:right;padding-right:6px} .who-dark li b{color:#fff;font-weight:700} .who-close{margin:24px 0 0;font-size:22px;line-height:1.2;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);max-width:20em} .who-close em{font-style:normal;color:var(--red)} .who-cta{width:100%;margin-top:22px} .who-cta .btn-big{max-width:400px} @media (min-width:900px){ .who-sub{font-size:24px} .who-card{padding:26px 24px 24px;gap:14px} .who-cards{margin-top:34px} .who-ic{width:68px;height:68px;stroke-width:1.4} .who-card h3{font-size:19px} .who-dark{padding:32px 36px 30px;margin-top:14px} .who-dark h3{font-size:19px;margin-bottom:20px} .who-dark ol{gap:13px} .who-dark li{font-size:19px;grid-template-columns:34px 1fr} .who-close{font-size:28px;margin-top:28px} .who-cta{margin-top:26px} } @media (max-width:420px){ .who-wrap h2{font-size:32px} .who-sub{font-size:18px;margin:6px 0 16px} .who-cards{gap:10px} .who-card{padding:18px 10px 16px;gap:10px} .who-cards{margin-top:20px} .who-ic{width:48px;height:48px} .who-card h3{font-size:15px;letter-spacing:.08em} .who-dark{padding:20px 14px 18px} .who-dark h3{font-size:14px;margin-bottom:12px} .who-dark li{font-size:15.5px;grid-template-columns:26px 1fr;gap:6px} .who-close{font-size:18px;margin-top:18px} } @media (min-width:900px){ #who{padding:56px 0 52px!important} .who-sub{margin:8px 0 20px} } /* "Not today?" reminder card for people back from checkout: slides up from the bottom, no scroll listeners */ .ret{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;max-width:460px;margin:0 auto;background:#fff;color:var(--ink);border-radius:14px;padding:16px 16px 14px;box-shadow:0 14px 40px rgba(28,28,28,.22);transform:translateY(130%);transition:transform .25s ease} .ret.on{transform:none} .ret-x{position:absolute;top:6px;right:6px;width:36px;height:36px;border:0;background:transparent;color:var(--ink-3);display:flex;align-items:center;justify-content:center;cursor:pointer} .ret-x svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round} .ret-h{margin:0 30px 12px 0;font-size:17px;line-height:1.35;color:var(--ink-2)} .ret-h b{color:var(--ink)} .ret-row{display:flex;gap:8px} .ret-row[hidden]{display:none} .ret-row input{flex:1;min-width:0;height:48px;border:1.5px solid var(--line);border-radius:9px;padding:0 12px;font:500 17px 'EB Garamond',Georgia,serif;color:var(--ink);background:#fff;outline:none} .ret-row input:focus{border-color:var(--red)} .ret-row .btn{height:48px;padding:0 18px;font-size:17px;flex:none} .ret-msg{margin:8px 0 0;font-size:16px;color:var(--ink)} .ret-msg:empty{display:none} @media (prefers-reduced-motion:reduce){.ret{transition:none}} /* Swap (2026-10-11): the workout videos now sit on the cream background, the "This isn't your average ab program" photo on black */ .vids{width:100%} .cream .trailer-head{color:var(--ink)} .cream .trailer-line{color:var(--ink-2)} .cream .trailer-line b{color:var(--ink)} #trailer .avg h2{color:#fff} #trailer .cover{color:var(--on-dark-2)} /* Hero title "6 Week Core / Transformation / Challenge": one line each, and "TRANSFORMATION" always fits the phone width */ .hero h1{max-width:none} .hero h1 span{display:block} @media (max-width:899px){.hero h1{font-size:min(44px,9vw);line-height:1}} /* the workout clips have rounded corners baked in with black behind them: round the box to match so no black shows */ .vids .video{border-radius:6.6%/11.8%!important;overflow:hidden;background:transparent!important;clip-path:inset(1px round 6.6% / 11.8%)} /* What you get: six icon cards, two per row (replaces the check-mark bullets) */ .feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:720px;text-align:left} .feat{background:#F8F5EF;color:var(--ink);border-radius:14px;box-shadow:0 1px 2px rgba(28,28,28,.05);padding:16px 14px 18px;display:flex;flex-direction:column;gap:10px} .feat svg{width:30px;height:30px;flex:none;fill:none;stroke:var(--red);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .feat h3{margin:0 0 4px;font-size:15px;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:var(--red)} .feat p{margin:0;font-size:16px;line-height:1.3;color:var(--ink-2)} @media (min-width:900px){ .feats{gap:16px} .feat{flex-direction:row;align-items:center;gap:20px;padding:26px 26px} .feat svg{width:38px;height:38px} .feat h3{font-size:18px} .feat p{font-size:18px} } /* Price box in full red with a white button (preview on alpha) */ #price.offer{background:var(--red);box-shadow:0 18px 44px rgba(171,25,34,.28)} #price .pillars{color:#fff} #price .pillars span{color:#fff} #price .offer-price b{color:#fff} #price .offer-price s,#price.jav-ready.slid s,#price .jav-ready.slid s{color:rgba(255,255,255,.72);text-decoration-color:#fff} #price .offer-terms{color:rgba(255,255,255,.88)} #price .btn{background:#fff;color:var(--red)} #price .btn:hover{background:#F6EFEF;filter:none} #price .jav-ready s{color:#fff} #price .jav-ready.slid s{color:rgba(255,255,255,.72)} /* two lines under "...you will train it all." on the black section */ .train-copy{max-width:30em;margin-top:-10px;display:flex;flex-direction:column;gap:12px} .train-copy p{margin:0;font-size:19px;line-height:1.45;color:var(--on-dark-2)} .train-copy b{color:#fff;font-weight:700} @media (min-width:900px){.train-copy p{font-size:21px}} /* x / check before the two lines */ .train-copy{text-align:left;gap:16px} .train-copy p{display:flex;gap:12px;align-items:flex-start} .train-copy svg{flex:none;width:24px;height:24px;margin-top:3px;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .tc-no svg{stroke:#E0353D} .tc-yes svg{stroke:#3DBE5A} /* waitlist: an email signup ends every section (no prices anywhere) */ form.wl{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;max-width:420px;margin:0 auto} form.wl input{width:100%;height:54px;padding:0 18px;border:1.5px solid #D9D1C4;border-radius:12px;background:#fff;color:var(--ink);font-family:inherit;font-size:19px;font-weight:500;text-align:left;-webkit-appearance:none;appearance:none} form.wl input::placeholder{color:#6F695F;font-weight:500;opacity:1} form.wl input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(171,25,34,.15)} form.wl input:disabled{opacity:1;color:var(--ink-2);-webkit-text-fill-color:var(--ink-2);background:#F8F5EF} form.wl .btn{width:100%;min-width:0;height:54px;margin:0} form.wl .btn:disabled{opacity:.75} form.wl .wl-msg{margin:0;font-size:15px;line-height:1.35;text-align:center;color:var(--ink-2)} form.wl .wl-msg:empty{display:none} .wl-block{width:100%;margin-top:36px} .dark form.wl input,.dark-2 form.wl input,.hero form.wl input,.app-sec form.wl input{border-color:transparent} .dark form.wl .wl-msg,.dark-2 form.wl .wl-msg,.hero form.wl .wl-msg{color:#E9E4DC} .hero form.wl{max-width:380px;margin-top:6px} .hero form.wl input,.hero form.wl .btn{height:52px} .hero-cd{margin-top:6px} .hero-cd .cd-label{font-size:15px} .hero-cd .cd-nums b{font-size:30px} .hero-cd .cd-nums span{font-size:12px;margin-top:2px} @media (max-width:480px){ .hero-copy{gap:10px} .hero-sub{font-size:17px} .wl-block{margin-top:28px} } .rc form.wl{margin-top:32px} /* email field: bigger, left-aligned like checkout's */ form.wl input{height:58px;padding:0 18px;font-size:19px;font-weight:500;text-align:left;border-width:2px} form.wl input::placeholder{color:#7A746B;font-weight:500} form.wl .btn{height:58px;font-size:19px} .hero form.wl input,.hero form.wl .btn{height:56px} /* hero subtitle: reads as part of the headline, not fine print */ .hero-sub{font-size:20px;line-height:1.35;color:#F3EFE8} @media (max-width:480px){.hero-sub{font-size:19px}} @media (min-width:900px){.hero-sub{font-size:23px}} /* hero photo: top of his hair sits just under the GENNOFIT logo on every phone height */ @media (max-width:899px){.hero-img{top:calc(66px - var(--h) * .328)}} /* hero title: all white, the red "6 Week" was hard to read on the dark photo */ .hero h1 em{color:#fff} /* signup card under the six features: dark card so the form isn't floating on its own */ .wl-card{background:#1C1C1C;border-radius:20px;padding:26px 20px 22px;box-shadow:0 14px 34px rgba(28,28,28,.18);text-align:center} .wl-card-h{margin:0 0 16px;color:#fff;font-size:26px;line-height:1.1} .wl-card form.wl input{border-color:transparent} .wl-card form.wl .wl-msg{color:#E9E4DC} /* "6 Week": white, with a bright red underline instead of red text */ .hero h1 em{color:#fff;text-decoration:underline;text-decoration-color:#E8352B;text-decoration-thickness:5px;text-underline-offset:7px;text-decoration-skip-ink:none} .hero h1 em{text-decoration-thickness:4px;text-underline-offset:4px} .hero h1{line-height:1.06} /* signup card v2: red card, white button (like the old offer box), sits close under the six cards */ .wl-card{background:var(--red);border-radius:18px;padding:24px 18px 20px;box-shadow:0 14px 34px rgba(171,25,34,.25);margin-top:16px} .wl-card-h{margin:0 0 14px;color:#fff;font-size:24px;line-height:1.1} .wl-card form.wl{gap:10px} .wl-card form.wl input{border-color:transparent} .wl-card form.wl .btn{background:#fff;color:var(--red)} .wl-card form.wl .btn:hover{background:#F6EFEF;filter:none} .wl-card form.wl .wl-msg{color:#fff} #program .feats{margin-bottom:0} #program .wl-card{margin-top:14px} #program .wl-card{margin-top:-20px} /* the wrap has a 32px gap: lands 12px under the cards, like the cards themselves */ /* signup card v3: red "Founding members" card with the pillars, black button */ .wl-card{padding:22px 20px 22px;border-radius:22px;box-shadow:0 18px 44px rgba(171,25,34,.28)} .fm-head{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 6px;color:#fff} .fm-head h3{margin:0;color:#fff;font-size:24px;line-height:1.1;letter-spacing:0;text-transform:none;white-space:nowrap} .fm-head .pil{width:22px;height:42px;flex-shrink:0} .fm-head .pil *{fill:none;stroke:#fff;stroke-width:1.6} .fm-when{margin:0 0 18px;color:#fff;font-size:19px;line-height:1.3} .wl-card form.wl input{border:0} .wl-card form.wl .btn{background:#141312;color:#fff} .wl-card form.wl .btn:hover{background:#000;filter:none} #program .wl-card{margin-top:-6px} /* 26px under the cards: its own moment, not a seventh card */ /* signup card v4: see-through email field on the red, solid white button (like the old pricing box) */ .wl-card form.wl input{background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.55);color:#fff;-webkit-text-fill-color:#fff;caret-color:#fff} .wl-card form.wl input::placeholder{color:rgba(255,255,255,.8)} .wl-card form.wl input:focus{border-color:#fff;background:rgba(255,255,255,.2);box-shadow:none} .wl-card form.wl input:disabled{background:rgba(255,255,255,.1);color:#fff;-webkit-text-fill-color:#fff} .wl-card form.wl input:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 40px #B3141C inset} .wl-card form.wl .btn{background:#fff;color:var(--red);box-shadow:0 6px 16px rgba(0,0,0,.18)} .wl-card form.wl .btn:hover{background:#F6EFEF;filter:none} /* countdown: D H M S, seconds always red, any other number flashes red when it changes */ .cd-nums [data-cd="s"]{color:var(--red)} .hero-cd .cd-nums [data-cd="s"]{color:#E8352B} .cd-nums span{text-transform:uppercase} @keyframes cdFlip{0%,55%{color:#E8352B}} .cd-flip{animation:cdFlip 1.4s ease-out} /* "Not interested?" updates banner after the FAQ */ .news{padding:56px 0 60px} .news-wrap{max-width:460px;text-align:center} .news h2{margin:0 0 8px;font-size:30px} .news p{margin:0 auto 20px;max-width:24em;font-size:19px;line-height:1.4;color:#E9E4DC} .news form.wl .btn{background:#fff;color:#141312} .news form.wl .btn:hover{background:#EFEAE2;filter:none} .news form.wl input{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.4);color:#fff;-webkit-text-fill-color:#fff;caret-color:#fff} .news form.wl input::placeholder{color:rgba(255,255,255,.7)} .news form.wl input:focus{border-color:#fff;box-shadow:none} .news form.wl input:disabled{background:rgba(255,255,255,.06);color:#fff;-webkit-text-fill-color:#fff} /* DESKTOP HERO: words on the left, Genno on the right, so the headline never covers his face */ @media (min-width:900px){ .hero{height:min(calc(var(--fvh,1svh) * 100),920px);min-height:640px} .hero-img{inset:auto;top:0;right:0;left:auto;bottom:auto;width:58%;height:100%;max-width:none;transform:none;object-fit:cover;object-position:50% 18%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%);mask-image:linear-gradient(90deg,transparent 0%,#000 30%)} .hero::after{background:linear-gradient(90deg,#1C1C1C 0%,rgba(28,28,28,.92) 34%,rgba(28,28,28,.25) 58%,rgba(28,28,28,0) 72%),linear-gradient(180deg,rgba(28,28,28,0) 70%,rgba(28,28,28,.6) 100%)} .hero-logo{left:max(6vw,calc((100vw - 1200px) / 2));right:auto;text-align:left} .hero-copy{top:0;bottom:0;left:max(6vw,calc((100vw - 1200px) / 2));right:auto;width:min(46vw,560px);padding:40px 0 0;justify-content:center;align-items:flex-start;text-align:left;gap:16px} .hero h1{font-size:64px;line-height:1.02;text-align:left} .hero-sub{text-align:left;font-size:22px;max-width:26em} .hero form.wl{margin:8px 0 0;max-width:420px} .hero form.wl input{text-align:left} .hero-cd{margin:6px 0 0;max-width:360px;align-items:flex-start} .hero-cd .cd-label{text-align:left} } @media (min-width:1300px){.hero h1{font-size:72px}} /* desktop: the Founding members card lines up with the six feature cards above it */ #program .wl-card{max-width:720px;margin-left:auto;margin-right:auto} @media (min-width:900px){#program .wl-card{padding:28px 40px 30px}#program .wl-card form.wl{max-width:440px}} /* desktop hero: crop in so Genno is as big as the headline (head near the top, shorts at the bottom) */ @media (min-width:900px){.hero-img{height:165%;top:-30%;width:60%;object-position:50% 50%}} @media (min-width:900px){.hero-img{height:158%;top:-42%}} /* moved up: head just under the top, shorts in view */ /* email under the app phones (dark section) */ .app-wl{margin-top:34px} .app-sec form.wl input{border-color:transparent} /* countdown moved out of the hero: first thing under it, above "I'll be guiding you" */ .top-cd{margin:0 auto 34px} .top-cd .cd-nums [data-cd="s"]{color:var(--red)} @media (max-width:480px){.top-cd{margin-bottom:26px}.top-cd .cd-nums b{font-size:44px}} .top-cd{margin-bottom:48px} @media (max-width:480px){.top-cd{margin-bottom:40px}} /* countdown back under the Founding members card, a size smaller */ .under-cd{margin:34px auto 0;gap:10px} .under-cd .cd-label{font-size:16px} .under-cd .cd-nums b{font-size:40px} .under-cd .cd-nums span{font-size:13px} .under-cd .cd-nums [data-cd="s"]{color:var(--red)} @media (max-width:480px){.under-cd{margin-top:28px}.under-cd .cd-nums b{font-size:34px}} .under-cd{margin-top:0} @media (max-width:480px){.under-cd{margin-top:-4px}} /* countdown: in the hero on desktop, under the Founding members card on phones */ /* countdown lives in the hero on every screen (under the button); the copy under the Founding members card is retired */ .under-cd{display:none} /* phones: bigger title, and the hero grows taller instead of squeezing, so the photo keeps its room */ @media (max-width:899px){ .hero{height:calc(var(--fvh,1svh) * 100 + 104px)} .hero h1{font-size:min(50px,9.5vw);line-height:1.04} .hero-cd{margin-top:4px;gap:6px} .hero-cd .cd-label{font-size:15px} .hero-cd .cd-nums b{font-size:32px} .hero-cd .cd-nums span{font-size:12px;margin-top:2px} } /* "Join N others" under the main signups */ .join-n{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 0;font-size:17px;color:#D9D3CA} .join-n[hidden]{display:none} .join-n b{color:#fff;font-weight:700} .join-n svg{width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .wl-card .join-n{color:rgba(255,255,255,.85);margin-top:14px} @media (min-width:900px){.hero .join-n{justify-content:flex-start}} /* "Join N others" sits under the timer in the hero; on phones the hero grows to fit it when it shows */ .hero .join-n{margin-top:6px} @media (max-width:899px){.hero:has(.join-n:not([hidden])){height:calc(var(--fvh,1svh) * 100 + 136px)}} /* "Not you?" under the top email box, only once someone has joined on this phone */ .not-you{align-self:center;margin:0;padding:4px 8px;border:0;background:none;color:#CFC8BD;font:inherit;font-size:15px;text-decoration:underline;cursor:pointer} .not-you[hidden]{display:none} form.wl input[readonly]{color:var(--ink-2)} /* app section: one line saying how the workouts work */ .app-lead{max-width:30em;margin:-6px auto 22px;text-align:center;font-size:19px;line-height:1.4;color:#E9E4DC} @media (max-width:480px){.app-lead{font-size:17px;margin-bottom:18px}}