/* Physiqo waitlist page: shared foundation. Tokens, type, layout, buttons, the waitlist form, the app card kit, the phone, the living Ari, reveals, modes and reduced motion. Colours follow the app (src/theme.ts). Section files (css/.css) build on this. Never restyle these classes globally from a section: scope overrides under your section root, e.g. [data-section="food"] .ab { ... }. */ @font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage.woff2) format("woff2");font-weight:500 800;font-display:swap} @font-face{font-family:"Inter";src:url(fonts/inter.woff2) format("woff2");font-weight:400 700;font-display:swap} @font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap} /* ---------- 1. Tokens ---------- */ :root{ /* app colours */ --bg:#F4F3EE;--card:#EFEEE8;--surface:#FFFFFF;--border:#E4E2DA;--line:#DEDCD4; /* --muted is a touch darker than the app's #6F6E68 (4.4:1 on #EFEEE8, 4.6:1 on the paper, less under a glow or a shadow): #64635D is 5.4:1 on the paper, 5.2:1 on the card grey and 5.3:1 on Ari's green, so small grey text keeps AA everywhere. */ --ink:#1B1B18;--muted:#64635D;--faint:#A3A29B; --hero:#EEF3E5;--heroLine:#D5E2C2; --lime:#D6EBB5;--onLime:#1F2A12; --done:#E3F0CF;--onDone:#3F5A24; --amber:#F3E9C8;--onAmber:#6B5310; --green:#3F5A24;--protein:#3F5A24;--carbs:#8DB35B;--fat:#C9A95C;--fibre:#9C7A5B;--water:#D8D6CE;--track:#E2E0D8; --clay:#D98A6C;--terra:#B4532E;--clayDeep:#BF6E52;--clayShade:#A5573D; --sparkClay:#E48E6B;--sparkGold:#DDA22C;--zzz:#8A7E77; --error:#A8402F; /* the app's newer tokens (src/theme.ts, 28 Oct 2026): the user's chat bubble, a finished exercise, the volume bar, the "Saved to" band, neutral pills and the food tiles. Everything above is unchanged. */ --userBubble:#E3EFCF;--userInk:#27360F; --doneCard:#E6F0D8;--doneCardLine:#C9DCAE;--doneCardInk:#27500A;--doneCardTick:#3B6D11; --volumeBar:#9BC46A;--savedTrack:rgba(63,90,36,.14);--savedNew:#8DB35C; --pillBg:#F1EFE8;--pillInk:#4A4944;--tray:#F8F7F3;--toInk:#77766F; --dayOn:#A9CC7F;--dayOnLine:#8DB35B;--dayClose:#DDEBC9;--dayCloseLine:#C3D9A6;--dayOff:#EBCF8F;--dayOffLine:#D9B866;--dayOffInk:#4C3A0E; --tile-blush:linear-gradient(145deg,#FDF3EE,#F8E5DC 55%,#EFE5DA); --tile-oat:linear-gradient(145deg,#F8EEDF,#EFE9DE); --tile-butter:linear-gradient(145deg,#FBF2D2,#F1ECDD); --tile-roast:linear-gradient(145deg,#F1E6DC,#EAE6DF); --tile-golden:linear-gradient(145deg,#F9EAD8,#F0EADF); --tile-rice:linear-gradient(145deg,#F6F4EE,#EAE8E0); --tile-green:linear-gradient(145deg,#E8F1DA,#EBEEE3); /* glass: the app's header buttons, composer and tab bar */ --glass:rgba(255,255,255,.86);--glassLine:rgba(27,27,24,.10);--glassShadow:0 4px 14px rgba(0,0,0,.08); --serifNum:Georgia,"Times New Roman",serif; /* type */ --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif; --body:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --serif:"Instrument Serif",Georgia,serif; --appfont:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif; --fs-body:15px;--fs-small:13px;--fs-h2:30px;--fs-kicker:20px; /* shape */ --r-widget:22px;--r-btn:14px;--r-pill:20px;--r-badge:12px;--r-inset:14px;--r-tile:28px; /* motion */ --ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.2,.8,.2,1.1); /* depth */ --shadow:0 1px 2px rgba(27,27,24,.04),0 8px 24px -6px rgba(27,27,24,.10),0 24px 48px -24px rgba(27,27,24,.18); --shadow-sm:0 1px 2px rgba(27,27,24,.04),0 6px 18px -10px rgba(27,27,24,.18); /* layout */ --gutter:16px;--sec-y:48px;--maxw:1240px;--nav-h:56px; } @media (min-width:720px){:root{--gutter:24px;--sec-y:80px;--fs-h2:clamp(36px,5vw,48px);--fs-kicker:22px}} @media (min-width:1024px){:root{--gutter:32px;--sec-y:112px;--fs-body:17px;--fs-h2:clamp(40px,4.4vw,60px);--fs-kicker:26px}} /* ---------- 2. Base ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:80px} body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs-body)/1.5 var(--body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip} body::after{content:"";position:fixed;inset:0;pointer-events:none;background:url(img/grain.png);opacity:.5;z-index:100;mix-blend-mode:multiply} img,svg{display:block;max-width:100%} img{height:auto} a{color:inherit} p{margin:0} button{font:inherit;color:inherit} h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.035em;text-wrap:balance} em{font-style:normal} [hidden]{display:none!important} .pq-sprite{position:absolute;width:0;height:0;overflow:hidden} .i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} svg use{pointer-events:none} ::selection{background:var(--lime);color:var(--onLime)} :focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:12px} /* Headings and cards that receive focus from script (tabindex -1) never show a ring */ [tabindex="-1"]:focus{outline:none} .on-dark :focus-visible{outline-color:var(--lime)} .sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .pq-trap{display:none!important} .skip{position:fixed;left:12px;top:-60px;z-index:300;background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;font-weight:600;text-decoration:none;transition:top .2s} .skip:focus{top:12px} /* ---------- 3. Type scale ---------- */ h1,.h1{font-size:clamp(40px,11vw,46px);line-height:.98;font-weight:800;letter-spacing:-.035em} @media (min-width:720px){h1,.h1{font-size:clamp(46px,7vw,64px)}} @media (min-width:1024px){h1,.h1{font-size:clamp(56px,6.2vw,92px)}} .h1,.h2{font-family:var(--display)} h2,.h2{font-size:var(--fs-h2);line-height:1.02;font-weight:800;letter-spacing:-.035em} h1 em,h2 em,.h1 em,.h2 em,.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em} h1 em,h2 em,.h1 em,.h2 em{display:inline-block;font-size:1.06em;line-height:.9;padding-right:.04em;color:var(--terra)} h3,.h3{font-size:19px;line-height:1.15;letter-spacing:-.02em;font-weight:700} @media (min-width:1024px){h3,.h3{font-size:22px}} .sub{margin-top:12px;color:var(--muted);font-size:var(--fs-body);line-height:1.5;max-width:560px;text-wrap:pretty} .small{font-size:13px;line-height:1.45;color:var(--muted)} .muted{color:var(--muted)} .kicker{font:400 var(--fs-kicker)/1.2 var(--serif);font-style:italic;letter-spacing:-.01em;color:var(--ink);text-wrap:balance} .center{text-align:center} .center .sub,.sub.center{margin-left:auto;margin-right:auto} /* Section eyebrow: a lime user bubble (the app's own) in Jake's voice.

can i just text it

*/ .eyebrow{display:block;width:fit-content;max-width:min(100%,520px);margin:0 0 14px;padding:8px 13px;background:var(--userBubble);color:var(--userInk);box-shadow:0 0 0 1px rgba(63,90,36,.16);border-radius:18px 18px 5px 18px;font:500 14px/1.4 var(--body);letter-spacing:0;text-align:left} .center .eyebrow,.eyebrow.center{margin-left:auto;margin-right:auto} @media (min-width:1024px){.eyebrow{font-size:15px}} /* ---------- 4. Layout ---------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left))} .wrap-narrow{max-width:calc(720px + var(--gutter) * 2);margin:0 auto;padding:0 max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left))} .sec{position:relative;padding:var(--sec-y) 0} .sec-head{margin-bottom:20px} .sec-head.center{max-width:760px;margin-left:auto;margin-right:auto;text-align:center} .band{background:var(--card)} .stack>*+*{margin-top:12px} .gap-visual{margin-top:20px} .pq-tail{display:flex;flex-direction:column} @media (min-width:1024px){.pq-tail>[data-section="proof"]{order:-1}} .show-phone{display:none} @media (max-width:719px){.hide-phone{display:none!important}.show-phone{display:revert}} @media (min-width:720px) and (max-width:1023px){.hide-tablet{display:none!important}} /* Phones: sections below the first screen skip layout and paint until they come near, so a slow phone's first render is far cheaper. Tested: no frame ever showed an on-screen section unpainted during fast scrolls, and CLS stayed 0. 940px is a first guess, and the real size is remembered once a section has been drawn. Phones have no in-page nav links; a deep link from elsewhere (#faq) is put right after load by site.js. */ @media (max-width:719px){ main>.sec[data-section]:not(.hero):not(.finale){content-visibility:auto;contain-intrinsic-size:auto 940px} /* --cvh is the measured height of each section's content at phone widths (content-visibility off, padding taken off), so a section that has not been drawn yet takes the room it will really take and the page does not stretch or jump while you scroll. Try is the phone's screen (the window less 84px, 440 to 860px) plus 441px (419px from 460px wide). */ [data-section="faq"].sec{padding-top:40px} [data-section="try"].sec{padding-bottom:40px} main>.sec[data-section]:not(.hero):not(.finale){contain-intrinsic-size:auto var(--cvh,940px)} [data-section="try"]{--cvh:calc(441px + clamp(440px,calc(100vh - 84px),860px))} @supports (height:1svh){[data-section="try"]{--cvh:calc(441px + clamp(440px,calc(100svh - 84px),860px))}} [data-section="training"]{--cvh:1054px} [data-section="food"]{--cvh:calc(1192px - (100vw - 360px) * 1.34)} [data-section="journey"]{--cvh:2810px} [data-section="control"]{--cvh:593px} [data-section="faq"]{--cvh:622px} } @media (min-width:371px) and (max-width:425px){ [data-section="faq"]{--cvh:602px} } @media (min-width:381px) and (max-width:400px){[data-section="control"]{--cvh:573px}} @media (min-width:401px) and (max-width:425px){ [data-section="control"]{--cvh:553px} } @media (min-width:426px) and (max-width:439px){ [data-section="training"]{--cvh:1039px} [data-section="control"]{--cvh:533px} [data-section="faq"]{--cvh:602px} } @media (min-width:440px) and (max-width:719px){ [data-section="training"]{--cvh:986px} [data-section="food"]{--cvh:1244px} [data-section="control"]{--cvh:516px} [data-section="faq"]{--cvh:602px} } @media (min-width:520px) and (max-width:719px){ [data-section="food"]{--cvh:1144px} } @media (min-width:570px) and (max-width:719px){[data-section="food"]{--cvh:1314px}} @media (min-width:600px) and (max-width:719px){[data-section="control"]{--cvh:460px}} /* Journey (Day 1 is the "Build me a training plan" card) and Try (the tall phone), measured 28 Oct */ @media (min-width:365px) and (max-width:719px){[data-section="journey"]{--cvh:2773px}} @media (min-width:395px) and (max-width:719px){[data-section="journey"]{--cvh:2730px}} @media (min-width:410px) and (max-width:719px){[data-section="journey"]{--cvh:2660px}} @media (min-width:425px) and (max-width:719px){[data-section="journey"]{--cvh:2595px}} @media (min-width:440px) and (max-width:719px){[data-section="journey"]{--cvh:2550px}} @media (min-width:480px) and (max-width:719px){[data-section="journey"]{--cvh:2510px}} @media (min-width:460px) and (max-width:719px){ [data-section="try"]{--cvh:calc(419px + clamp(440px,calc(100vh - 84px),860px))} @supports (height:1svh){[data-section="try"]{--cvh:calc(419px + clamp(440px,calc(100svh - 84px),860px))}} } @media (max-width:1023px){.only-desktop{display:none!important}} @media (min-width:1024px){.hide-desktop{display:none!important}} /* Background texture helpers for any section */ .glow{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none} .glow-lime{background:radial-gradient(circle,rgba(214,235,181,.9),rgba(214,235,181,0) 70%)} .glow-clay{background:radial-gradient(circle,rgba(217,138,108,.40),rgba(217,138,108,0) 70%)} .bg-dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(27,27,24,.10) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 75%)} /* ---------- 5. Buttons ---------- */ .btn{appearance:none;border:0;display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 16px/1 var(--body);padding:0 22px;height:52px;border-radius:999px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,opacity .2s} .btn .arrow{width:18px;height:18px;transition:transform .3s var(--ease)} .btn:hover .arrow{transform:translateX(4px)} .btn:active{transform:scale(.97)} .btn[disabled]{opacity:.6;cursor:default} .btn-dark{background:var(--ink);color:#fff;box-shadow:0 6px 18px -6px rgba(27,27,24,.5),inset 0 1px 0 rgba(255,255,255,.12)} .btn-dark:hover{background:#2a2a26} .btn-lime{background:var(--lime);color:var(--onLime);box-shadow:0 8px 30px -8px rgba(214,235,181,.6)} .btn-lime:hover{background:#e0f1c6} .btn-light{background:var(--surface);color:var(--ink);border:1px solid var(--border)} .btn-light:hover{background:#fafaf7} .btn-sm{height:40px;padding:0 16px;font-size:14px} .btn-lg{height:58px;padding:0 28px;font-size:17px} .btn-block{width:100%} /* Green text button, 44px tall target: "Run it again", "Read all", "Skip" */ .btn-text{appearance:none;background:none;border:0;padding:0 2px;min-height:44px;display:inline-flex;align-items:center;gap:6px;font:600 15px/1.2 var(--body);color:var(--green);cursor:pointer;text-decoration:none} .btn-text .i{width:16px;height:16px;stroke-width:2.2} .btn-text:hover{text-decoration:underline;text-underline-offset:3px} .on-dark .btn-text{color:var(--lime)} /* ---------- 6. Nav (shell) ---------- */ .nav-wrap{position:fixed;top:10px;left:0;right:0;z-index:50;padding:0 max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));pointer-events:none} .nav{pointer-events:auto;max-width:820px;height:var(--nav-h);margin:0 auto;display:flex;align-items:center;gap:8px;padding:0 7px 0 12px;border-radius:999px;background:rgba(244,243,238,.74);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border:1px solid rgba(228,226,218,.9);box-shadow:0 8px 30px -12px rgba(27,27,24,.18);transition:background-color .3s,border-color .3s,box-shadow .3s} .brand{display:flex;align-items:center;gap:9px;text-decoration:none;font:800 21px/1 var(--display);letter-spacing:-.05em;color:var(--ink)} .brand img{width:30px;height:30px;border-radius:50%} .nav-links{display:none;margin-left:auto;gap:2px} .nav-links a{text-decoration:none;font-size:14px;font-weight:500;color:#4A4944;padding:9px 13px;border-radius:999px;transition:background .2s,color .2s} .nav-links a:hover{background:rgba(27,27,24,.05);color:var(--ink)} .nav-cta{margin-left:auto;transition:opacity .2s,transform .25s var(--ease),visibility 0s} /* Hidden pill: out of sight, out of the tab order and away from screen readers (visibility flips after the fade) */ .cta-off .nav-cta{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .2s,transform .25s var(--ease),visibility 0s .2s} /* Over the dark finale card: darker glass, light links, the lime pill */ .nav-dark .nav{background:rgba(27,27,24,.72);border-color:rgba(255,255,255,.1);box-shadow:0 10px 30px -14px rgba(0,0,0,.5)} .nav-dark .nav .brand{color:#fff} .nav-dark .nav-links a{color:rgba(255,255,255,.78)} .nav-dark .nav-links a:hover{background:rgba(255,255,255,.08);color:#fff} .nav-dark .nav-cta.btn-dark{background:var(--lime);color:var(--onLime);box-shadow:none} .nav-dark .nav :focus-visible{outline-color:var(--lime)} .nav .brand,.nav-links a{transition:background .2s,color .3s} /* Until the first zone check (html.nav-ready) the nav holds still: no pill flash, no sliding capsule */ .js:not(.nav-ready) .nav,.js:not(.nav-ready) .nav::before,.js:not(.nav-ready) .nav-cta{transition:none!important} .js:not(.nav-ready) .nav-cta{visibility:hidden} /* 44px and more to tap, same look */ .nav .brand,.nav-cta{position:relative} .nav .brand::after,.nav-cta::after{content:"";position:absolute;inset:-7px -4px} @media (max-width:719px){.nav-cta.btn-sm{height:44px}} @media (min-width:720px){.nav{height:58px}} @media (min-width:720px) and (max-width:1023px){.nav-links a{padding:9px 10px}} /* The sixth link only where the bar has room for it on one line (the button is still in Try it, the FAQ and the footer) */ @media (min-width:720px) and (max-width:749px){.nav-links .nav-ari{display:none}} @media (min-width:720px){ .nav-links{display:flex}.nav-cta{margin-left:8px} /* When the pill fades, the glass capsule (a layer behind the links) closes up to the links and the whole bar slides half the pill's width right, so it stays centred. Transforms and the layer's width only: no box on the page moves, so this never counts as layout shift. js sets --pill-w from the visible pill. */ .nav{position:relative;isolation:isolate;background:none;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transition:transform .4s var(--ease)} .nav::before{content:"";position:absolute;z-index:-1;top:-1px;bottom:-1px;left:-1px;right:-1px;border-radius:999px;background:rgba(244,243,238,.74);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);border:1px solid rgba(228,226,218,.9);box-shadow:0 8px 30px -12px rgba(27,27,24,.18);transition:right .4s var(--ease),background-color .3s,border-color .3s,box-shadow .3s} .cta-off .nav{transform:translateX(calc(var(--pill-w,146px) / 2))} .cta-off .nav::before{right:calc(var(--pill-w,146px) - 1px)} .nav-dark .nav{background:none;border-color:transparent;box-shadow:none} .nav-dark .nav::before{background:rgba(27,27,24,.72);border-color:rgba(255,255,255,.1);box-shadow:0 10px 30px -14px rgba(0,0,0,.5)} } @media (max-width:359px){.nav .brand span{display:none}} /* ---------- 7. Footer (shell) ---------- */ /* Phones: brand and line, questions, the disclaimer, then one row of small print. Desktop: two quiet rows. */ .foot{padding:20px 0 calc(20px + env(safe-area-inset-bottom));color:var(--muted);font-size:13px;line-height:1.45} .foot-in{display:grid;gap:8px} .foot a{color:var(--ink);text-underline-offset:2px} .foot-brand{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-bottom:2px} .foot .brand{font-size:18px} .foot .brand img{width:26px;height:26px} .foot-q a,.foot-meta a{position:relative;z-index:1;display:inline-block;padding:13px 0;margin:-13px 0} .foot .brand{position:relative} .foot .brand::after{content:"";position:absolute;inset:-9px -4px} .foot-meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0} .foot-meta li+li::before{content:"\00b7";content:"\00b7" / "";margin:0 8px;color:var(--muted)} /* Phones: the row wraps, so no dot at the start of a line; the gap does the separating */ @media (max-width:719px){.foot-meta{gap:4px 18px}.foot-meta li+li::before{content:none}} @media (min-width:1024px){ .foot{padding:28px 0 40px} .foot-in{grid-template-columns:auto auto;justify-content:space-between;align-items:center;gap:10px 32px} .foot-brand{margin:0} .foot-q{text-align:right} } /* ---------- 8. Waitlist form (hero, sheet, finale) ---------- */ .wl-zone{max-width:480px} .center .wl-zone,.wl-zone.center{margin-left:auto;margin-right:auto} .wl{display:grid;gap:8px} .wl input[type=email]{width:100%;min-width:0;height:52px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font:500 16px var(--body);color:var(--ink);padding:0 20px;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s} .wl input[type=email]::placeholder{color:#767570} .wl input[type=email]:focus{border-color:#c9d9b0;box-shadow:0 0 0 4px rgba(214,235,181,.7)} .wl .btn{width:100%} /* Phones (and the join sheet at any width): a full-width 52px field over a full-width button, so a whole address can be read and checked. From 720px the hero form is one pill: field and button side by side. */ @media (min-width:720px){ .wl:not(.wl-dark):not(.sheet .wl){display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);transition:box-shadow .3s,border-color .3s} .wl:not(.wl-dark):not(.sheet .wl):focus-within{border-color:#c9d9b0;box-shadow:var(--shadow),0 0 0 5px rgba(214,235,181,.6)} .wl:not(.wl-dark):not(.sheet .wl) input[type=email]{flex:1;border:0;background:transparent;padding:0 8px 0 16px;height:52px} .wl:not(.wl-dark):not(.sheet .wl) input[type=email]:focus{box-shadow:none} .wl:not(.wl-dark):not(.sheet .wl) .btn{width:auto;flex:none} } /* Keyboard (and tap) focus on the email field: the page's own 3px green ring, on the field when it stands alone (phones, the sheet), round the whole pill from 720px. The dark finale keeps its lime focus. */ .wl:not(.wl-dark) input[type=email]:focus-visible{outline:3px solid var(--green);outline-offset:2px} @media (min-width:720px){ @supports selector(:has(*)){ .wl:not(.wl-dark):not(.sheet .wl):has(input:focus-visible){outline:3px solid var(--green);outline-offset:3px} .wl:not(.wl-dark):not(.sheet .wl) input[type=email]:focus-visible{outline:none} } } .wl-nojs{margin-top:10px;font-size:15px;font-weight:600;color:var(--error)} .on-dark .wl-nojs{color:#F2A08B} /* Dark variant for the finale: translucent field, lime focus ring, lime button */ .wl-dark{display:grid;gap:10px;padding:0;background:none;border:0;box-shadow:none} .wl-dark input[type=email]{height:56px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff;padding:0 22px} .wl-dark input[type=email]::placeholder{color:rgba(255,255,255,.55)} .wl-dark input[type=email]:focus{border-color:var(--lime);background:rgba(255,255,255,.1);box-shadow:0 0 0 4px rgba(214,235,181,.25)} .wl-dark .btn{height:56px;width:100%} @media (min-width:720px){.wl-dark{grid-template-columns:1fr auto}.wl-dark .btn{width:auto}} .msg{margin-top:10px;font-size:15px;font-weight:600;color:var(--green)} .msg:empty{display:none} .msg.err{color:var(--error)} /* "Did you mean ...?" written into the status line: a plain question, not an error */ .msg.typo{color:var(--ink);font-weight:500} .on-dark .msg{color:var(--lime)} .on-dark .msg.err{color:#F2A08B} .on-dark .msg.typo{color:#fff} .wl-typo{margin-top:8px} .wl-typo button{appearance:none;background:var(--amber);color:var(--onAmber);border:0;border-radius:999px;min-height:40px;padding:8px 14px;font:600 14px/1.3 var(--body);cursor:pointer;text-align:left} .trust{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;margin:14px 0 0;padding:0;font-size:13px;line-height:1.3;color:var(--muted)} .center .trust,.trust.center{justify-content:center} /* Where the four don't fit on one line they go two and two, so "Privacy" is never left on its own */ .wl-zone{container-type:inline-size} @container (max-width:470px){.trust{display:grid;grid-template-columns:repeat(2,max-content);gap:6px 14px}} .trust li{display:flex;align-items:center;gap:6px} .trust li::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2A12' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/9px no-repeat} .trust a{position:relative;z-index:1;display:inline-block;padding:14px 6px;margin:-14px -6px;color:inherit;text-underline-offset:2px} .on-dark .trust{color:rgba(255,255,255,.62)} .on-dark .trust a{color:rgba(255,255,255,.85)} /* ---------- 9. Join sheet (shell; waitlist.js drives it) ---------- */ dialog.sheet{padding:0;border:0;background:transparent;color:var(--ink);width:100%;max-width:100%;max-height:100%;margin:auto 0 0;overflow:visible} dialog.sheet::backdrop{background:rgba(27,27,24,.38);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} html:has(dialog.sheet[open]){overflow:hidden;scrollbar-gutter:stable} /* Classic scrollbars (Windows): the reserved gutter is tinted like the dimmed backdrop, not left as a light strip */ @media (hover:hover) and (pointer:fine){html:has(dialog.sheet[open]){background:#A2A19D}} .sheet-in{position:relative;background:var(--bg);border-radius:28px 28px 0 0;padding:22px 16px calc(16px + env(safe-area-inset-bottom));max-height:90svh;overflow:auto;overscroll-behavior:contain;transform:translateY(calc(-1 * var(--kb,0px)));transition:transform .2s var(--ease);box-shadow:0 -20px 60px -20px rgba(27,27,24,.35)} .sheet[open] .sheet-in{animation:sheet-up .32s var(--ease)} @keyframes sheet-up{from{transform:translateY(40px);opacity:0}} .sheet-x{position:-webkit-sticky;position:sticky;top:0;z-index:3;width:44px;height:44px;display:grid;place-items:center;margin:-12px -6px -32px auto;border:0;border-radius:50%;background:var(--card);color:var(--ink);cursor:pointer;box-shadow:0 0 0 4px var(--bg)} /* sticky offsets count from the sheet's padding edge: this keeps the button 10px from the top */ .sheet-x{top:-12px} .sheet-x .i{width:20px;height:20px} .sheet-title{font-size:26px;line-height:1.1;padding-right:48px;outline:none} .sheet-line{margin:8px 0 18px;color:var(--muted);font-size:15px} .sheet .wl-zone{max-width:none} .sheet-body:empty{display:none} @media (min-width:720px){ dialog.sheet{width:440px;margin:auto} .sheet-in{border-radius:28px;padding:28px 24px 24px;max-height:90svh} .sheet-x{margin:-18px -14px -26px auto;top:-18px} .sheet[open] .sheet-in{animation:sheet-pop .26s var(--ease)} @keyframes sheet-pop{from{transform:scale(.96);opacity:0}} } /* ---------- 10. App card kit (PQ.cards renders these; see js/core.js) ---------- */ .ab em,.mc em,.app em{font-style:normal} /* Ari's reply card, as the app draws it since the chat look of 17 Oct: white, a hairline, radius 16 (no pale green any more) */ .ab{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px 15px 15px;text-align:left;font:400 15px/1.38 var(--body);color:var(--ink);letter-spacing:-.005em} .ab-h{display:flex;align-items:flex-start;gap:8px} .ab-h>.i{width:18px;height:18px;margin-top:2px;color:var(--green)} .ab-t{font-weight:600;font-size:16px;line-height:1.35} .ab-h .tag{margin-left:auto} .ab-sub{margin:2px 0 0 26px;color:var(--muted)} .ab.is-struck .ab-t,.ab.is-struck .sl-v,.ab.is-struck .fc-t{text-decoration:line-through;text-decoration-color:var(--muted);color:var(--muted)} /* An Ari reply that is only words (the protein answer): no card at all */ .ab.plain{background:none;border:0;border-radius:0;padding:0} /* The rows of a card that still lists things in a box (the thank-you card's email): a quiet tray inside the white card */ .inset{background:var(--tray);border:1px solid var(--border);border-radius:14px;margin-top:10px;padding:0 13px} /* Change lines (Fit Push A, Move Legs, Away): plain muted lines under the title, "to" faint, the new value bold. No box. */ .lns{margin:5px 0 0 26px} .ln{margin:0;padding:2px 0;color:var(--muted);line-height:1.5} .ln b{color:var(--ink);font-weight:700} .ln .nw{white-space:nowrap} .ln i{font-style:normal;color:var(--toInk)} .lns+.note{margin-left:26px} .ir{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0} .ir+.ir{border-top:1px solid var(--line)} .ir>span{min-width:0} /* Long exercise names keep to one line with an ellipsis, as the app does ("Incline dumbbell pr...") */ .ir:not(.full)>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ir em{color:var(--muted);text-align:right;white-space:nowrap} .ir em b{color:var(--ink);font-weight:700} .ir em i{font-style:normal;color:var(--muted)} .ir.full{display:block} .ir small{display:block;color:var(--muted);font-size:13px;margin-top:2px} .ft{border-top:1px solid var(--line);padding:10px 0;font-weight:600} .note{margin-top:8px;color:var(--muted)} .ab-lead b{font-weight:700} .ab-mut{margin-top:6px;color:var(--muted)} .ab-mut b{color:var(--ink);font-weight:600} /* Tags */ .tag{display:inline-flex;align-items:center;flex:none;border-radius:var(--r-badge);padding:3px 10px;font:500 13px/1.35 var(--body);white-space:nowrap} .tag.amber{background:var(--amber);color:var(--onAmber)} .tag.done{background:var(--done);color:var(--onDone)} .tag.muted{background:var(--card);color:var(--muted)} .tag.grey{background:rgba(255,255,255,.75);color:var(--muted)} /* Pills on a receipt: neutral ("Set 1 of 4 in Push A", "41 g carbs") and the green PR */ .pill{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:999px;background:var(--pillBg);color:var(--pillInk);font:400 15px/1.35 var(--body);white-space:nowrap} .pill.pr{background:var(--done);color:var(--onDone)} /* Card buttons: Confirm and Apply are lime; "Not now" and "Change it" are green words with no box (the app, 17 Oct) */ .cbtns{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:14px 0 0 0} .lns~.cbtns,.note~.cbtns{margin-left:0} .cbtn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 22px;border-radius:var(--r-btn);background:var(--surface);border:1px solid var(--border);color:var(--ink);font:600 16px/1 var(--body);cursor:pointer;transition:transform .15s var(--ease),filter .15s} .cbtn .i{width:16px;height:16px;stroke-width:2.2} .cbtn.lime{background:var(--lime);border-color:var(--lime);color:var(--onLime)} .cbtn.quiet{background:none;border-color:transparent;color:var(--green);padding:0 14px} .cbtn:active,.cbtn.pressed{transform:scale(.96);filter:brightness(.94)} span.cbtn,span.act,span.tlink{cursor:default} /* Text actions: Undo, Edit, Swap, Fix */ .acts{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:8px} .act{appearance:none;background:none;border:0;padding:0;min-height:36px;display:inline-flex;align-items:center;gap:6px;color:var(--green);font:600 15px/1 var(--body);cursor:pointer} .act .i{width:16px;height:16px;color:var(--green)} /* After Confirm or Apply: Undo on the left, "Training >" on the right in muted ink (a move has Undo now) */ .after{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px} .after .act{min-height:36px} .after .tlink{color:var(--muted);font-weight:400} .after .tlink .i{color:var(--muted)} .lns~.after,.note~.after{margin-left:0} /* Green text link with a chevron: "See history", "View in Food", "Join the waitlist" */ .tlink{appearance:none;background:none;border:0;padding:0;display:inline-flex;align-items:center;gap:3px;color:var(--green);font:600 15px/1.3 var(--body);text-decoration:none;cursor:pointer} .tlink .i{width:14px;height:14px;stroke-width:2.4} a.tlink:hover,button.tlink:hover{text-decoration:underline;text-underline-offset:3px} /* Context chips: white pills with a hairline, shown only when a question offers a choice */ .ctx{display:flex;gap:8px;overflow:hidden} .ctx:empty,.app .ctx:empty{display:none} .ctx-chip{flex:none;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:7px 13px;color:var(--ink);font:500 14px/1.2 var(--body);white-space:nowrap} /* Choice chips (the thank-you card's "I'm on Android") */ .choice{appearance:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 15px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border);color:var(--ink);font:500 15px/1 var(--body);cursor:pointer;transition:background .2s,border-color .2s,transform .15s var(--ease)} .choice:hover{border-color:#cfcdc4} .choice[aria-pressed="true"],.choice.on{background:var(--lime);border-color:var(--lime);color:var(--onLime);font-weight:600} .choice:active{transform:scale(.96)} @media (max-width:719px){.choice{min-height:44px}} /* Pick pills (the phone's own choice, e.g. Which brew did you have?) */ .picks{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:8px} .pick{display:inline-flex;align-items:center;min-height:40px;padding:8px 15px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border);font:400 15px/1.3 var(--body);color:var(--ink)} /* Tip card (the app's "Try this today": a green label with its icon, one line, then the link) */ .tip .tip-t{display:flex;align-items:center;gap:7px;font-weight:600;color:var(--green)} .tip .tip-t .i{width:16px;height:16px} .tip .tip-l{margin-top:2px} .tip .tlink{margin-top:6px} /* Protein mini card: white, a hairline, radius 16, the line on the right */ .spark{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:11px 14px} .spark b{display:block;font-weight:600;line-height:1.25} .spark .tlink{margin-top:4px;font-size:14px} .spark svg.sl{width:96px;height:32px;flex:none} .ab>.tlink{margin-top:8px} .ab.plain>.tlink{margin-top:10px;font-size:16px} .ab-lead{font-size:16px;line-height:1.4} /* Thinking bubble */ .think{display:flex;flex-direction:column;gap:9px;align-self:stretch;min-width:180px} .think small{color:var(--muted);font-size:13px;font-weight:500} .think small span{font-weight:400;font-variant-numeric:tabular-nums} .think i{display:block;height:9px;border-radius:5px;background:var(--heroLine);animation:shimmer .9s ease-in-out infinite alternate} .think i:first-of-type{width:88%} .think i+i{width:62%} @keyframes shimmer{from{opacity:.45}to{opacity:.95}} /* Toast (the app's own "Undone") */ .toast{display:inline-flex;align-items:center;gap:14px;padding:10px 18px;border-radius:20px;background:var(--ink);color:#fff;font:500 14px/1.2 var(--body);box-shadow:var(--shadow);animation:toast 2s var(--ease) both} @keyframes toast{0%{opacity:0;transform:translateY(8px)}12%,82%{opacity:1;transform:none}100%{opacity:0}} /* Chat bubbles and rows */ /* The user's bubble: light lime with dark green ink, 18px corners and a 5px tail bottom right (look 2B). No border. */ .ub{display:block;margin:0 0 0 auto;width:fit-content;max-width:calc(100% - 48px);background:var(--userBubble);color:var(--userInk);padding:8px 13px;border-radius:18px 18px 5px 18px;font:400 16px/23px var(--body);text-align:left;overflow-wrap:anywhere} /* A short line Ari says on the page (the hero's greeting): a white card with a hairline */ .abub{display:block;width:fit-content;max-width:85%;background:var(--surface);border:1px solid var(--border);padding:9px 13px;border-radius:16px;font:400 16px/1.4 var(--body);color:var(--ink)} /* Ari's row: a small avatar and the name "Ari" on a line of their own, then the reply full width, with no bubble round it */ .ar{display:block} .ar-who{display:flex;align-items:center;gap:6px;margin:0 0 6px} .ar-who>b{font:600 13px/17px var(--appfont);letter-spacing:0;color:var(--ink)} .ar-av{flex:none;width:22px;height:22px} .ar-av>.av{width:100%;height:100%} .ar-col{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px} .ar-col>.ab{align-self:stretch} .ar-col>.ab.fit{align-self:flex-start} /* Thumbs up and down under a reply (decorative, muted). Only drawn inside the phone. */ .ar-fb{display:none;gap:14px;margin:6px 0 0 2px;color:#8A8982} .app .ar-fb{display:flex} .ar-fb svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .app .ar.same .ar-fb{display:none} .chat{display:flex;flex-direction:column} .chat>*+*{margin-top:14px} .chat>.same{margin-top:6px} .bul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px} .bul li{display:flex;gap:8px} .bul li::before{content:"\2022";color:var(--muted)} /* ---------- The receipts: Set logged and the logged food card (PQ.cards.setLogged, PQ.cards.breakfast) ---------- */ /* Set logged: a grey tile, "Bench press ยท 09:41", the big set, a check, pills, the "Saved to" band, Done, then Undo and Edit */ .sl-h{display:flex;align-items:center;gap:12px} .sl-tile{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:var(--card);color:var(--muted)} .sl-tile .i{width:22px;height:22px} .sl-m{flex:1;min-width:0} .sl-t{margin:0;font-size:14px;line-height:1.3;color:var(--muted)} .sl-v{margin:1px 0 0;font:700 24px/1.15 var(--body);letter-spacing:-.02em;color:var(--ink)} .sl-v small{font:400 16px var(--body);letter-spacing:0;color:var(--muted)} .sl-ck{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--green);color:var(--green)} .sl-ck .i{width:16px;height:16px;stroke-width:2.4} .sl-ck.tag{width:auto;height:auto;border:0;border-radius:var(--r-badge);padding:3px 10px;font:500 13px/1.35 var(--body)} .sl-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} /* The "Saved to ..." band: pale green, a tick and two lines, a chevron, and (on food) the day's bar */ .sv{display:flex;align-items:center;gap:10px;margin-top:14px;padding:11px 14px 12px;border-radius:14px;background:var(--done);color:var(--onDone)} .sv-b{flex:1;min-width:0} .sv-t{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px;line-height:1.3} .sv-t .i{width:16px;height:16px;stroke-width:2.2;flex:none} .sv-s{margin-top:1px;font-size:16px;line-height:1.35;color:#3A4A25} .sv-s b{font-weight:700;color:var(--ink)} .sv>.i{flex:none;width:16px;height:16px;stroke-width:2.2;color:var(--green)} .sv-bar{display:flex;height:6px;margin-top:9px;border-radius:3px;background:var(--savedTrack);overflow:hidden} .sv-bar i{display:block;height:100%} .sv-bar .a{background:var(--green)} .sv-bar .b{background:var(--savedNew)} .doneb{appearance:none;display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin-top:12px;padding:0 16px;border:0;border-radius:var(--r-btn);background:var(--lime);color:var(--onLime);font:600 17px/1 var(--body);cursor:pointer;transition:transform .15s var(--ease),filter .15s} .doneb:active,.doneb.pressed{transform:scale(.97);filter:brightness(.94)} span.doneb{cursor:default} .ab-foot{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:12px;padding-top:8px;border-top:1px solid var(--border)} .ab-foot .act{min-height:34px} /* Done folds a receipt to its first line */ .ab.is-folded>:not(.sl-h):not(.fc-head){display:none} /* The logged food card: overlapping food tiles, the meal and the time, four macro tiles, a row for each food */ .fc-head{display:flex;align-items:center;gap:12px} .fc-tiles{display:flex;flex:none;padding-left:14px} .fc-tiles>span{display:grid;place-items:center;width:44px;height:44px;margin-left:-14px;border-radius:14px;color:var(--green);box-shadow:-3px 0 7px -3px rgba(120,70,50,.18)} .fc-tiles .i,.fc-ic .i{width:22px;height:22px;stroke-width:1.7} .fc-m{flex:1;min-width:0} .fc-t{margin:0;font:600 19px/1.2 var(--appfont);letter-spacing:-.012em} .fc-s{margin:2px 0 0;font-size:15px;line-height:1.3;color:var(--muted)} .fc-ck{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--done);color:var(--green)} .fc-ck .i{width:16px;height:16px;stroke-width:2.2} .fc-mac{display:grid;grid-template-columns:1fr 1fr 1fr 1.28fr;gap:7px;margin-top:14px} .fc-mac>div{min-width:0;padding:8px 9px 9px;border-radius:14px;background:var(--card)} .fc-mac>.kc{background:var(--hero);border:1px solid var(--heroLine)} .fc-mac .l{display:flex;align-items:center;gap:5px;font-size:13px;line-height:1.3;color:var(--muted);white-space:nowrap} .fc-mac .l::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--c)} .fc-mac .kc .l::before{display:none} .fc-mac .v{display:block;margin-top:1px;font:700 21px/1.2 var(--body);letter-spacing:-.02em;white-space:nowrap} .fc-mac .v small{font:400 14px var(--body);letter-spacing:0;color:var(--muted)} .fc-mac .kc .v{font:400 27px/1.15 var(--serifNum);letter-spacing:0} .fc-row{display:flex;gap:12px;margin-top:14px} .fc-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;color:var(--green)} .fc-b{flex:1;min-width:0} .fc-n{display:flex;align-items:baseline;gap:8px;font:700 17px/1.3 var(--body);letter-spacing:-.01em} .fc-n small{font:400 15px var(--body);letter-spacing:0;color:var(--muted)} .fc-n .i{margin:0 0 -3px auto;width:16px;height:16px;stroke-width:2;color:var(--muted);align-self:center} .fc-p{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px} .fc-p .pill{padding:2px 9px;font-size:14px;gap:5px} .pill b{font-weight:700;color:var(--muted)} .pill.line{background:var(--surface);border:1px solid var(--border);color:var(--muted)} .pill.line b{color:var(--ink)} .pill .dt{flex:none;width:7px;height:7px;border-radius:50%;background:var(--c)} /* The hero's smaller food card: a food a line, its kcal on the right, no band */ .fc.compact .fc-row{align-items:center;margin-top:10px} .fc.compact .fc-ic{width:34px;height:34px;border-radius:10px} .fc.compact .fc-ic .i{width:19px;height:19px} .fc.compact .fc-n{flex-wrap:nowrap} .fc.compact .fc-n>span,.fc.compact .fc-n small{white-space:nowrap} .fc.compact .fc-n em{margin-left:auto;color:var(--muted);font-weight:400;font-size:15px;white-space:nowrap} /* The tray under a food card: Undo and Edit side by side on a pale grey floor */ .ab.fc .ab-tray{display:grid;grid-template-columns:1fr 1fr;margin:14px -15px -15px;border-radius:0 0 15px 15px;background:var(--tray)} .ab.fc .ab-tray .act{justify-content:center;min-height:52px} /* Widget cards (Training and Food tabs) */ .mc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-widget);padding:18px;text-align:left;font:400 15px/1.35 var(--body);color:var(--ink)} .mc-hero{background:var(--hero);border-color:var(--heroLine)} .mc-head{display:flex;align-items:center;gap:12px;margin-bottom:14px} .mc-title{font-weight:600;font-size:17px} .mc-head .tag,.mc-head .tlink{margin-left:auto} .badge{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:var(--r-badge);background:var(--card);color:var(--green)} .badge .i{width:19px;height:19px} .mc-hero .badge{background:rgba(255,255,255,.75)} .mc-name{font:700 28px/1.1 var(--body);letter-spacing:-.6px} .mc-line{margin-top:6px;color:var(--muted)} /* Another day than today: its weekday and "Back to today" above the name (DayHead.tsx) */ .mc-day{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:22px;margin:-4px 0 6px;font-size:13px;line-height:1.3} .mc-day b{font-weight:600;color:var(--muted)} .mc-day .tlink{position:relative} .mc-day button.tlink::after{content:"";position:absolute;inset:-13px -8px} .mc-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;min-height:48px;background:var(--lime);color:var(--onLime);border-radius:var(--r-btn);padding:12px;font-weight:600;font-size:15px} .mc-btn .i{width:16px;height:16px} /* Week strip */ .wk-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px} .wk-head b{font-weight:600;font-size:17px} .wk-head small{color:var(--muted);font-size:14px} .wk{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .wk-d{appearance:none;position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 7px;min-height:66px;border-radius:14px;border:0;background:transparent;color:var(--ink);font:inherit;transition:background .2s,color .2s} button.wk-d{cursor:pointer} button.wk-d:hover:not(.is-sel){background:rgba(27,27,24,.04)} .wk-d .wk-l{font-size:13px;font-weight:500;color:var(--muted)} .wk-d .wk-n{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1} .wk-d .mk{display:grid;place-items:center;height:14px} .wk-d .mk .i{width:14px;height:14px;color:var(--green);stroke-width:2.4} .wk-d .mk s{display:block;width:5px;height:5px;border-radius:50%;background:var(--ink);text-decoration:none} .wk-d.is-rest .wk-n,.wk-d.is-rest .wk-l{color:#6F6E68} .wk-d.is-sel{background:var(--ink);color:#fff} .wk-d.is-sel .wk-l,.wk-d.is-sel .wk-n{color:#fff} .wk-d.is-sel .mk .i{color:var(--lime)} .wk-d.is-sel .mk s{background:#fff} .wk-d.is-today:not(.is-sel){box-shadow:inset 0 0 0 1px var(--line)} .wk-d em{position:absolute;left:50%;bottom:-20px;translate:-50% 0;font-size:13px;font-weight:600;color:var(--onAmber);white-space:nowrap} /* Today's nutrition */ .nut-kc{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px} .nut-kc b{font-size:40px;font-weight:700;letter-spacing:-1.2px;line-height:1} .nut-kc small{color:var(--muted);font-size:17px} .bar{display:block;height:6px;border-radius:3px;background:var(--track);overflow:hidden} .bar i{display:block;height:100%;border-radius:3px;background:var(--c,var(--ink));transform-origin:left;transform:scaleX(var(--w,0));transition:transform .8s var(--ease)} .nut .bar.kcal{height:8px;margin:12px 0 6px} .nut.pre .bar i{transform:scaleX(0)} .nut-rem{color:var(--muted)} .nut-mac{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)} .nut-mac>div{display:grid;gap:4px;min-width:0} .nut-mac .nm{font-size:15px} .nut-mac .nv b{font-size:17px;font-weight:700} .nut-mac .nv small{color:var(--muted);font-size:13px} /* Your meals */ .meal{display:flex;align-items:center;gap:12px;padding:13px 0} .meal+.meal{border-top:1px solid var(--line)} .meal>div{flex:1;min-width:0} .meal b{display:block;font-weight:500;font-size:17px} .meal small{display:block;color:var(--muted);font-size:14px;margin-top:2px} .meal .add{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:var(--r-btn);border:1px solid var(--border);background:var(--surface);font-weight:600;font-size:14px} .meal .add .i{width:14px;height:14px} /* Phones: card text 14px */ @media (max-width:719px){ .ab,.mc{font-size:14px} .ab-t{font-size:15px} .act,.tlink,.cbtn{font-size:14px} .ub,.abub{font-size:15px} .nut-kc b{font-size:34px} .mc-name{font-size:26px} } /* ---------- 11. Vector Ari avatar (PQ.avatar) ---------- */ .av{position:relative;display:inline-block;flex:none;width:var(--s,40px);height:var(--s,40px);line-height:0} .av svg{width:100%;height:100%;overflow:visible} .av .av-b,.av .av-hop,.av .av-eyes,.av .av-eye,.av .av-dots circle,.av .av-z,.av .av-spk{transform-box:fill-box;transform-origin:50% 100%} .av .av-b{animation:av-bob 1.2s ease-in-out infinite alternate} .av.av-sleepy .av-b{animation-duration:1.8s} .av.av-concerned .av-b,.av.av-thinking .av-b{animation:none} @keyframes av-bob{from{transform:translateY(0)}to{transform:translateY(-2px)}} .av .av-eye{transform-origin:50% 50%;animation:av-blink 4.4s linear infinite;animation-delay:var(--bd,0s)} .av.av-thinking .av-eyes{transform-origin:50% 50%} @keyframes av-blink{0%,95%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}} .av.av-thinking .av-eyes{animation:av-glance 2.4s ease-in-out infinite} @keyframes av-glance{0%,15%{transform:translate(-1.5px,-2.2px)}40%,60%{transform:translate(1.5px,-2.2px)}80%,100%{transform:translate(0,0)}} .av .av-dots circle{transform-origin:50% 50%;animation:av-dot 1.5s linear infinite} .av .av-dots circle:nth-child(2){animation-delay:.27s} .av .av-dots circle:nth-child(3){animation-delay:.54s} @keyframes av-dot{0%,100%{opacity:.4}22%{opacity:1;transform:scale(1.25)}45%{opacity:.4;transform:scale(1)}} .av.av-celebrate .av-hop{animation:av-hop .66s .08s ease-out both} @keyframes av-hop{30%{transform:translateY(-7px)}60%{transform:translateY(0)}75%{transform:translateY(-1.5px)}100%{transform:translateY(0)}} .av .av-spk{transform-origin:50% 50%;animation:av-spk 1.28s ease-out both} @keyframes av-spk{0%{opacity:0;transform:scale(.6)}12%{opacity:1}40%{transform:scale(1.08)}66%{opacity:1}100%{opacity:0;transform:scale(1.08)}} .av .av-z{transform-origin:50% 50%;animation:av-z 1.8s ease-out infinite} @keyframes av-z{0%{opacity:0;transform:translate(-2px,4px) scale(.7)}25%{opacity:1}100%{opacity:0;transform:translate(3px,-7px) scale(1.1)}} .av.av-still *{animation:none!important} .av.av-still .av-spk,.av.av-still .av-z{opacity:1} /* Bits PQ.cards and PQ.type emit */ /* Inter's contextual alternates turn "3 x 6" into a multiplication sign; the app (and the house style) write the letter x */ .dc-ex em,.th-ex em,.pb-m small,.ari-does li,.gp q{font-feature-settings:"calt" 0} .joined-email{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* "Build me a training plan": the plan editor card (PQ.cards.planBuild), laid out as Jake's screenshots of the app on 28 Oct. Tools tile, the title with its pencil over a hairline, Draft; One-off session / Repeating plan (the black pill is chosen); the session name field; the session tabs; a white row per lift; Pick exercises / Type one; Save, Next, Discard. Inert. */ .ab.pb{padding:14px 14px 16px;font-size:16px} .pb-h{display:flex;align-items:flex-start;gap:12px} .pb-tile{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:var(--card);color:var(--green)} .pb-tile .i{width:19px;height:19px;stroke-width:1.7} .pb-tw{flex:1;min-width:0;display:flex;align-items:center;gap:8px;min-height:34px;padding-bottom:1px;border-bottom:1px solid var(--line)} .pb-t{flex:1;min-width:0;font:600 18px/1.25 var(--appfont);letter-spacing:-.02em} .pb-tw .i,.pb-field .i{width:18px;height:18px;color:var(--faint);stroke-width:1.6} .pb-h .tag{align-self:flex-start;margin-left:2px;padding:3px 10px;font-size:14px} .pb-seg,.pb-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px} .pb-pill{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:15px;border:1px solid var(--border);background:var(--surface);font:400 15px/1 var(--appfont);color:var(--ink);white-space:nowrap} .pb-pill.on{background:var(--ink);border-color:var(--ink);color:#fff} .pb-note{margin-top:10px;font-size:15px;line-height:1.4;color:var(--muted);text-wrap:pretty} .pb-lbl{margin-top:10px;font:600 14px/1.3 var(--appfont);color:var(--muted)} .pb-field{display:flex;align-items:center;gap:8px;height:38px;margin-top:6px;padding:0 12px 0 13px;border-radius:12px;background:var(--card)} .pb-field b{flex:1;min-width:0;font:600 17px/1 var(--appfont);letter-spacing:-.015em} .pb-tabs{margin-top:10px} .pb-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px} .pb-r{display:flex;align-items:center;gap:10px;min-height:58px;padding:8px 12px 8px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface)} .pb-n{flex:none;min-width:10px;font:400 15px/1 var(--appfont);color:#3E3D38;text-align:center;font-variant-numeric:tabular-nums} .pb-ic{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:10px;background:#F1F0EC;color:#2E2E2A} .pb-ic .i{width:28px;height:28px;stroke-width:1.4} .pb-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .pb-m b{font:600 16px/1.25 var(--appfont);letter-spacing:-.015em} .pb-m small{font-size:15px;line-height:1.3;color:var(--muted);white-space:nowrap} .pb-kg{flex:none;font-size:15px;color:#7A7973;white-space:nowrap} .pb-ch{flex:none;display:grid;color:var(--muted)} .pb-ch .i{width:18px;height:18px} .pb-hint{font-size:14px} .pb-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:12px} .pb-links span{display:inline-flex;align-items:center;gap:7px;font:600 16px/1.25 var(--appfont);color:var(--green)} .pb-links .i{width:18px;height:18px} .pb-btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:12px} .pb-save,.pb-next{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:42px;padding:0 15px;border-radius:14px;font:600 16px/1 var(--appfont);white-space:nowrap} .pb-save{background:var(--lime);color:var(--onLime)} .pb-save .i{width:16px;height:16px;stroke-width:2.2} .pb-next{background:var(--surface);border:1px solid var(--border);color:var(--ink)} .pb-dis{padding:0 4px;font:600 16px/1 var(--appfont);color:var(--green);white-space:nowrap} .pb-reply{margin-top:4px;font-size:16px;line-height:1.45;color:var(--ink);text-wrap:pretty} @media (max-width:719px){ .ab.pb{padding:12px 11px 14px;font-size:15px} .pb-h{gap:10px} .pb-t{font-size:17px} .pb-h .tag{padding:3px 8px;font-size:13px} .pb-seg,.pb-tabs{gap:6px} .pb-pill{padding:0 11px;font-size:14px} .pb-note{font-size:14px} .pb-lbl{font-size:13px} .pb-field b{font-size:16px} .pb-r{gap:8px;min-height:54px;padding:7px 9px 7px 10px} .pb-ic{width:34px;height:34px} .pb-ic .i{width:26px;height:26px} .pb-m b{font-size:15px} .pb-m small,.pb-kg{font-size:14px} .pb-hint{font-size:13px} .pb-links{gap:6px 18px} .pb-links span{font-size:15px} .pb-btns{gap:8px} .pb-save,.pb-next{height:40px;padding:0 12px;font-size:15px} .pb-dis{font-size:15px} .pb-reply{font-size:15px} /* the first four lifts on a phone; all six from 720px */ .pb-r:nth-child(n+5){display:none} } .brew{display:flex;flex-direction:column;align-items:flex-start} .typing-caret::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:1px;background:currentColor;vertical-align:-.18em;animation:caret 1s steps(1) infinite} /* ---------- 12. The living Ari (3D body + live SVG face) ---------- Markup:
Optional before .ari-in. core.js adds .ari-fx (sparkle layer) and copies the face in. Position .ari with left/top/width and transform or translate freely: bob animates .ari-in's translate, squish its scale. */ .ari{position:relative;aspect-ratio:1;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none} .ari-in{position:absolute;inset:0;transform-origin:50% 92%;animation:ari-bob 6s ease-in-out infinite} .ari.no-bob .ari-in{animation:none} .ari.m-sleepy .ari-in{animation:ari-breathe 3.6s ease-in-out infinite} .ari.off .ari-in,.ari.off .ari-ground,.ari.off .zz path,.ari.off .thought circle{animation-play-state:paused!important} /* A whole section off screen: every CSS loop in it holds still (core.js adds .pq-away) */ .pq-away *,.pq-away *::before,.pq-away *::after{animation-play-state:paused!important} @keyframes ari-bob{0%,100%{translate:0 0}50%{translate:0 -3%}} @keyframes ari-breathe{0%,100%{translate:0 0}50%{translate:0 -1.2%}} .ari img,.ari .face{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .ari .face{overflow:visible} .ari-ground{position:absolute;left:50%;bottom:4%;width:74%;height:7%;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(122,74,56,.22),transparent);animation:ari-shadow 6s ease-in-out infinite;pointer-events:none} @keyframes ari-shadow{50%{transform:scale(.9);opacity:.75}} .ari.no-bob .ari-ground{animation:none} .ari-fx{position:absolute;inset:0;pointer-events:none;overflow:visible} .ari .head,.ari .look{transition:transform .35s var(--ease)} .ari .eye{transform-box:fill-box;transform-origin:center;transition:transform .35s var(--ease),opacity .2s} .ari.blink .eye{transform:scaleY(.08);transition-duration:.07s} .ari .socket,.ari .smile{transition:opacity .2s} .ari .happy-eyes,.ari .grin,.ari .sleep-eyes,.ari .mouth-flat,.ari .mouth-soft,.ari .thought,.ari .zz{opacity:0;transition:opacity .2s} /* happy and celebrate */ .ari.happy .eye,.ari.happy .smile,.ari.happy .mouth-flat,.ari.happy .mouth-soft,.ari.happy .sleep-eyes{opacity:0} .ari.happy .socket{opacity:.25} .ari.happy .happy-eyes,.ari.happy .grin{opacity:1} /* thinking: eyes up and left (set by core), flat mouth, thought dots rise from her top left */ .ari.m-thinking:not(.happy) .smile{opacity:0} .ari.m-thinking:not(.happy) .mouth-flat{opacity:1} .ari.m-thinking .thought{opacity:1} .ari.m-thinking .thought circle{transform-box:fill-box;transform-origin:center;animation:ari-dot .5s var(--ease) both} .ari.m-thinking .thought circle:nth-child(2){animation-delay:.12s} .ari.m-thinking .thought circle:nth-child(3){animation-delay:.24s} @keyframes ari-dot{from{opacity:0;transform:translate(24px,36px) scale(.4)}} /* sleepy: closed eyes, small soft mouth, a z drifting up from her top right */ .ari.m-sleepy:not(.happy) .eye{opacity:0} .ari.m-sleepy:not(.happy) .socket{opacity:.35} .ari.m-sleepy:not(.happy) .sleep-eyes{opacity:1} .ari.m-sleepy:not(.happy) .smile{opacity:0} .ari.m-sleepy:not(.happy) .mouth-soft{opacity:1} .ari.m-sleepy:not(.happy) .zz{opacity:1} .ari.m-sleepy .zz path{transform-box:fill-box;transform-origin:center;animation:ari-z 1.8s ease-out infinite} @keyframes ari-z{0%{opacity:0;transform:translate(-10px,40px) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translate(26px,-70px) scale(1.1)}} /* Sparkle pieces (Ari's celebrate burst and the join burst) */ .pq-spark{position:absolute;display:block;pointer-events:none;will-change:transform,opacity} .pq-spark svg{width:100%;height:100%;display:block} .pq-spark.dot{border-radius:50%} .pq-spark.fixed{position:fixed;z-index:200} /* ---------- 13. The phone and the faithful app chat screen ---------- Desktop and tablet: a CSS iPhone at true proportions: the app is laid out on a 390 x 844 logical screen and scaled by --k (site.js sets it so the phone fits the window under the nav, between 736 and 844px of screen; .9 until then). Phones (under 720px): no bezel; the app screen is a full-width card, radius 28, as tall as the window under the nav, at the app's real text sizes. */ .phone{--k:.9;position:relative;width:calc(390px * var(--k) + 22px);max-width:100%;border-radius:calc(55px * var(--k) + 11px);padding:11px;background:linear-gradient(145deg,#3a3a35,#121210 40%,#2b2b27);box-shadow:0 0 0 1.5px #4a4a44 inset,0 50px 100px -30px rgba(27,27,24,.55),0 30px 60px -40px rgba(27,27,24,.6)} .phone::before{content:"";position:absolute;right:-3px;top:calc(190px * var(--k));width:3px;height:calc(80px * var(--k));border-radius:0 3px 3px 0;background:#2b2b27} .phone::after{content:"";position:absolute;left:-3px;top:calc(150px * var(--k));width:3px;height:calc(44px * var(--k));border-radius:3px 0 0 3px;background:#2b2b27} .screen{position:relative;width:calc(390px * var(--k));height:calc(844px * var(--k));border-radius:calc(55px * var(--k));background:var(--bg);overflow:hidden} .app{position:absolute;left:0;top:0;width:390px;height:844px;transform:scale(var(--k));transform-origin:top left;display:flex;flex-direction:column;font:400 16px/1.4 var(--appfont);color:var(--ink);letter-spacing:-.01em;background:var(--bg)} .app .sbar{position:relative;flex:none;display:flex;justify-content:space-between;align-items:center;height:54px;padding:6px 34px 0 40px;font-weight:600;font-size:16px} .app .island{position:absolute;left:50%;top:12px;translate:-50% 0;width:122px;height:36px;border-radius:20px;background:#0b0b0a} .app .sicons{display:flex;align-items:flex-end;gap:2px} .app .sicons i{width:3.5px;border-radius:1px;background:var(--ink)} .app .sicons i:nth-child(1){height:5px}.app .sicons i:nth-child(2){height:7px}.app .sicons i:nth-child(3){height:9.5px}.app .sicons i:nth-child(4){height:12px} .app .sicons b{width:24px;height:12px;margin-left:6px;border-radius:4px;border:1.5px solid rgba(27,27,24,.4);background:linear-gradient(90deg,var(--ink) 80%,transparent 80%) content-box;padding:1.5px} /* The app's header since the glass redesign (10 Oct): a round history button, the page title ("Ari"), and a glass capsule with the sparkles button and the avatar, with the lime usage pill before it (as in Jake's screenshots of 28 Oct, nothing new, so no amber dot). No wordmark, no calendar button (the Calendar is off). */ .app-head{flex:none;display:flex;align-items:center;gap:10px;padding:8px 18px 0} .app .circ{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--glass);border:1px solid var(--glassLine);box-shadow:var(--glassShadow)} .app .circ .i{width:22px;height:22px} .app-title{margin-right:auto;font:800 24px/1 var(--appfont);letter-spacing:-1.1px;color:var(--ink)} .app-cap{display:flex;align-items:center;flex:none;height:44px;padding:0 6px 0 4px;border-radius:22px;background:var(--glass);border:1px solid var(--glassLine);box-shadow:var(--glassShadow)} .app .cap-sp{position:relative;display:grid;place-items:center;width:40px;height:40px} .app .cap-sp .i{width:22px;height:22px;stroke-width:1.7} .app .cap-av{display:grid;place-items:center;width:36px;height:40px;font:700 14px var(--appfont)} /* The coaching usage pill (Jake's screenshots, 28 Oct): a speech bubble and "1% used" on lime, between the title and the capsule */ .app-use{display:inline-flex;align-items:center;gap:6px;flex:none;height:32px;padding:0 13px 0 11px;border-radius:16px;background:var(--userBubble);border:1px solid #CFE3B2;color:var(--userInk);font:600 15px/1 var(--appfont);letter-spacing:-.01em;white-space:nowrap} .app-use .i{width:17px;height:17px;stroke-width:1.8} /* The date row sits under the Shortcuts pill once there is a chat; "Today 09:41" under it */ .app-date{flex:none;display:flex;align-items:center;justify-content:center;gap:12px;padding:6px 18px 0;font-size:15px;color:var(--muted)} .app-date .clear{appearance:none;background:none;border:0;padding:6px 0;font:600 15px var(--appfont);color:var(--muted);cursor:pointer} .app-time{flex:none;text-align:center;padding:2px 18px 8px;font:500 13px/1.3 var(--appfont);color:var(--muted)} .app-short{flex:none;display:flex;justify-content:center;align-items:center;height:38px;margin-top:4px;position:relative;z-index:2} .app-short span{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 14px;border-radius:20px;background:var(--glass);border:1px solid var(--glassLine);box-shadow:var(--glassShadow);font-weight:600;font-size:14px} .app-short .i{width:14px;height:14px;stroke-width:2.4} /* Nothing said yet: the greeting and the list, no Shortcuts pill or date row (the list is the shortcuts) */ .app.is-empty .app-short,.app.is-empty .app-date,.app.is-empty .app-time{display:none} /* The thread scrolls like the app's: touch (with momentum), wheel, trackpad and keys (it takes focus). At its top or bottom the page carries on scrolling (scroll chaining is left on). No scrollbar: soft fades at the edges, and the app's round "down" button while there is more below. */ .app .thread{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 18px 12px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-y;-webkit-mask-image:linear-gradient(transparent,#000 48px);mask-image:linear-gradient(transparent,#000 48px)} .app .thread::-webkit-scrollbar{display:none} .app .thread:focus{outline:none} .app-down{position:absolute;left:50%;z-index:4;display:grid;place-items:center;width:44px;height:44px;margin:0 0 0 -22px;padding:0;border-radius:50%;border:1px solid var(--glassLine);background:var(--glass);box-shadow:var(--glassShadow);color:var(--ink);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s var(--ease),visibility 0s .2s;-webkit-tap-highlight-color:transparent} .app-down.on{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s var(--ease)} .app-down .i{width:22px;height:22px;stroke-width:2} .app-down:focus-visible{outline:3px solid var(--green);outline-offset:2px} .app .thread>*{flex:none} .app .thread>*+*{margin-top:14px} .app .thread>.same{margin-top:6px} .app .thread .pop{animation:msg-in .3s var(--ease) both} @keyframes msg-in{from{opacity:0;transform:translateY(12px)}} /* The empty Home: a greeting and a plain list of rows (icon, bold label, grey live line), no cards */ .app .empty{margin:auto 0;text-align:center;padding-bottom:4px} .app .empty-av{display:block;width:44px;height:44px;margin:0 auto 2px} .app .empty-av .av{width:100%;height:100%} .app .empty-h{font:800 24px/1.2 var(--appfont);letter-spacing:-.6px} .app .empty-s{margin-top:1px;color:var(--muted);font-size:16px} .app .empty-list{list-style:none;margin:10px 0 0;padding:0;text-align:left} .app .empty-list li{display:flex;align-items:center;gap:14px;min-height:42px;padding:0 4px} .app .empty-list .i{flex:none;width:23px;height:23px;margin:0 6px;color:var(--green);stroke-width:1.7} .app .empty-list b{display:block;font:700 16px/1.25 var(--appfont);letter-spacing:-.2px} .app .empty-list small{display:block;font-size:14px;line-height:1.25;color:var(--muted)} .app .ub{font-size:17px;line-height:24px} .app .ab{font-size:16px;line-height:1.4;border-radius:16px;padding:14px 15px 15px} .app .ab.plain{padding:0} .app .ab-t{font-size:17px} .app .ab.sl,.app .ab.fc{font-size:16px} .app .ir,.app .ir em{font-size:16px} .app .act,.app .tlink,.app .cbtn{font-size:16px} .app .ctx{flex:none;padding:0 18px 10px} .app .ctx-chip{font-size:15px;padding:8px 14px} /* The composer: a white glass box (radius 25), the line on top, the camera bottom left, the mic and the lime send bottom right */ .app-composer{flex:none;display:grid;grid-template-columns:auto 1fr auto auto;grid-template-areas:"ph ph ph send" "cam . mic send";align-items:end;margin:0 18px 10px;min-height:70px;padding:9px 8px 7px 12px;background:var(--glass);border:1px solid var(--glassLine);border-radius:25px;box-shadow:var(--glassShadow)} .app-composer .ph{grid-area:ph;align-self:start;padding:3px 0 0 36px;color:#73726B;font-size:17px;line-height:24px;min-height:27px;overflow:hidden;white-space:nowrap} .app-composer .ph.typing{color:var(--ink)} .app-composer .ph.typing::after{content:"";display:inline-block;width:2px;height:20px;background:var(--green);vertical-align:-4px;margin-left:1px;animation:caret 1s steps(1) infinite} .app-composer .cb{display:grid;place-items:center;width:38px;height:36px;color:var(--ink)} .app-composer .cb.cam{grid-area:cam;justify-self:start} .app-composer .cb:not(.cam){grid-area:mic;color:var(--muted)} .app-composer .cb .i{width:22px;height:22px;stroke-width:1.7} .app-composer .send{grid-area:send;align-self:end;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--lime);color:var(--onLime);transition:transform .14s} .app-composer .send.tap{transform:scale(.86)} .app-composer .send .i{width:20px;height:20px;stroke-width:2.2} /* The tab bar: a floating glass pill, the active tab in a lime pill */ .app-tabs{flex:none;display:flex;align-items:center;justify-content:space-around;height:62px;margin:0 18px 10px;padding:4px 6px;background:var(--glass);border:1px solid var(--glassLine);border-radius:31px;box-shadow:var(--glassShadow)} .app-tabs span{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:13px;line-height:1.2;font-weight:500;color:var(--muted)} .app-tabs i{display:grid;place-items:center;width:56px;height:32px;border-radius:16px} .app-tabs .i{width:22px;height:22px;stroke-width:1.7} .app-tabs .on{color:var(--ink);font-weight:700} .app-tabs .on i{background:var(--lime)} @keyframes caret{50%{opacity:0}} /* Desktop and tablet draw the app at 390 and scale it by --k (.872 to 1): every small label is set so it is 13px or more on screen */ @media (min-width:720px){ .app-time,.app .ar-who>b,.app .fc-mac .l,.app .dc-mh em,.app-short span,.app .tag,.app .think small,.app-tabs span,.app .ir small,.app .cap-av,.app .spark .tlink,.app .toast,.app .dc-s,.app .dc-pill,.app .dc-g{font-size:max(13.2px,calc(13.2px / var(--k)))} .app .empty-list small,.app .sl-t,.app .dc-sm,.app .dc-ex em,.app .dc-mf,.app .dc-mf span,.app .dc-mf em{font-size:max(14px,calc(13.2px / var(--k)))} } /* Phones, and phones on their side: the screen is a plain rounded card at the app's own sizes */ @media (max-width:719px),(max-width:1023px) and (max-height:500px) and (orientation:landscape){ .phone{width:100%;padding:0;border-radius:28px;background:none;box-shadow:none} .phone::before,.phone::after{display:none} /* as tall as the window under the floating nav (it ends 66px down), so the whole screen shows at once */ .screen{width:100%;height:clamp(440px,calc(100vh - 84px),860px);border-radius:28px;border:1px solid var(--border);box-shadow:var(--shadow)} @supports (height:1svh){.screen{height:clamp(440px,calc(100svh - 84px),860px)}} .app{position:absolute;inset:0;width:100%;height:100%;transform:none} .app .sbar,.app-short{display:none} .app-head{padding:12px 12px 0;gap:8px} .app-title{font-size:22px} .app .circ,.app-cap{height:42px} .app .circ{width:42px} .app-use{height:30px;padding:0 11px 0 9px;font-size:14px;gap:5px} .app-use .i{width:16px;height:16px} .app-date{padding:4px 14px 0;font-size:14px} .app-date .clear{font-size:14px} .app-time{padding-bottom:6px} .app .thread{padding:0 12px 10px} /* the app's own sizes: 17px bubbles, 15px cards */ .app .ub{font-size:17px;line-height:24px;padding:8px 13px} .app .ab{font-size:15px;padding:13px 13px 14px} .app .ab.plain{padding:0} .app .ab-t{font-size:15.5px} .app .ab.sl,.app .ab.fc{font-size:15px} .app .ir,.app .ir em{font-size:15px} .app .act,.app .tlink,.app .cbtn{font-size:15px} .app .ab.plain>.tlink,.app .ab-lead{font-size:16px} .app .ctx{padding:0 12px 8px} .app .ctx-chip{font-size:13px;padding:6px 11px} .app-composer{margin:0 12px 8px;min-height:62px;padding:7px 6px 6px 12px;border-radius:22px} .app-composer .ph{font-size:16px;padding-left:34px;line-height:22px;min-height:25px} .app-composer .cb{width:34px;height:32px} .app-composer .send{width:38px;height:38px} .app-tabs{height:56px;margin:0 12px 8px} .app-tabs i{width:52px;height:30px} } /* "Today 09:41" gives its line to the thread on short phone screens */ @media (max-width:719px) and (max-height:760px),(min-width:720px) and (max-width:1023px) and (max-height:500px) and (orientation:landscape){.app-time{display:none}} /* The empty Home on a short phone screen: the list gives up the avatar, then row height, then its last rows, so it always fits the thread */ @media (max-width:719px) and (max-height:800px){.app .empty-av{display:none}.app .empty-list li{min-height:40px}} @media (max-width:719px) and (max-height:760px){.app .empty-list li{min-height:37px}} @media (max-width:719px) and (max-height:600px){.app .empty-s{display:none}.app .empty-list{margin-top:6px}.app .empty-list li:nth-child(n+6){display:none}} @media (min-width:720px) and (max-width:1023px) and (max-height:500px) and (orientation:landscape){.app .empty-av,.app .empty-s{display:none}.app .empty-list{margin-top:4px}.app .empty-list li{min-height:37px}.app .empty-list li:nth-child(n+4){display:none}} /* ---------- 14. Reveal on scroll ---------- */ .js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .js [data-reveal="fade"]{transform:none} .js [data-reveal].in{opacity:1;transform:none} /* ---------- 15. Modes (classes on , set before first paint) ---------- */ html:not(.live) .when-live{display:none!important} .live .when-waitlist{display:none!important} /* joined = returning visitor (set before first paint from localStorage); joined-now = joined in this visit (waitlist.js adds it). .when-new: not joined at all (nav join pill, "Not for you?"). .when-joined: joined either way (nav share pill). .when-fresh: hidden only for returning visitors (form zones, so an in-visit thank-you stays in place). .when-returning: only returning visitors (the "You're on the list" cards). */ html:not(.joined):not(.joined-now) .when-joined{display:none!important} .joined .when-new,.joined-now .when-new{display:none!important} .joined .when-fresh{display:none!important} html:not(.joined) .when-returning{display:none!important} html:not(.late) .when-late{display:none!important} .late .when-day{display:none!important} html:not(.referred) .when-referred{display:none!important} .referred .when-direct{display:none!important} html:not(.trial) .when-trial{display:none!important} .trial .when-notrial{display:none!important} /* After launch the finale's "Not for you? Send it to someone it's for." shows to everyone, joined or not */ .live .fin-pass.when-new{display:block!important} /* ---------- 16. Reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} .js [data-reveal]{opacity:1;transform:none} .ari .thought,.ari .zz path{animation:none} .av .av-spk,.av .av-z{opacity:1} } /* ========================================================================== SECTION: Hero (#top) ========================================================================== */ /* Hero (#top): "You talk. Ari does the admin." One job: the email. Phones: chip, H1, the stage (Ari at the left gutter, a mini chat to her right), sub, form. Tablet: copy centred, stage below. Desktop: 5/12 copy, 7/12 stage. Tablet and desktop: three things around Ari (food log, Today at a glance, training), each a message above its card. The stage is plain pixels: the CSS tiers below set her box and the units' scale (--hm, --hs, --A, --ax, --dy, --sh), site.js places the three from her box. Protected face zone: an ellipse at 53% / 52% of Ari's box, radii 33% / 20%. Nothing on the stage enters it: the units keep 30px (satellites) or the whole head and chin (stack) clear of it, the flying message routes round it, the mini chat sits wholly to her right. */ [data-section="hero"]{position:relative;overflow-x:clip;padding:80px 0 24px;--pa:clamp(124px,20vh,168px)} @supports (height:1svh){[data-section="hero"]{--pa:clamp(124px,20svh,168px)}} /* ---------- Background: paper, lime glow top left, terracotta glow behind Ari, faint dots ---------- */ [data-section="hero"] .hero-bg{position:absolute;left:0;right:0;top:0;bottom:-160px;overflow:hidden;pointer-events:none;z-index:0} [data-section="hero"] .hero-glow-l{width:380px;height:380px;left:-190px;top:-130px} [data-section="hero"] .hero-dots{-webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 38%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 80% 55% at 50% 38%,#000 15%,transparent 72%)} [data-section="hero"] .hero-glow-c{z-index:0;opacity:.95} /* ---------- Grid ---------- */ [data-section="hero"] .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"chip" "h1" "stage" "sub" "cta"} [data-section="hero"] .hero-chips{grid-area:chip;display:flex;min-width:0} [data-section="hero"] .hero-h1{grid-area:h1;margin-top:14px} [data-section="hero"] .hero-stage{grid-area:stage} [data-section="hero"] .hero-sub{grid-area:sub} [data-section="hero"] .hero-cta{grid-area:cta;min-width:0} /* ---------- Chip with the pulsing lime dot ---------- */ [data-section="hero"] .hero-chip{display:inline-flex;align-items:center;gap:8px;height:24px;max-width:100%;padding:0 10px 0 9px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid var(--border);box-shadow:0 2px 10px -4px rgba(27,27,24,.12);font:600 13px/1 var(--body);letter-spacing:-.005em;color:var(--green);white-space:nowrap} [data-section="hero"] .hero-ping{position:relative;flex:none;width:7px;height:7px;border-radius:50%;background:#8DB35B} [data-section="hero"] .hero-ping::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #8DB35B;animation:hero-ping 2s var(--ease) infinite} @keyframes hero-ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.8);opacity:0}} /* ---------- H1 and sub ---------- */ [data-section="hero"] .hero-h1 em{color:var(--terra);margin-left:-.021em;text-indent:.095em} [data-section="hero"] .hero-sub{margin-top:12px;max-width:34em;text-wrap:pretty} /* ---------- Form, returning visitor, launch ---------- */ [data-section="hero"] .hero-cta{margin-top:16px} [data-section="hero"] .hero-cta .trust{margin-top:12px} [data-section="hero"] .hero-onlist{max-width:440px;box-shadow:var(--shadow-sm)} [data-section="hero"] .hero-onlist .ab-h>.i{color:var(--green);stroke-width:2.4} [data-section="hero"] .hero-onlist .note{margin:4px 0 0 26px;text-wrap:pretty} [data-section="hero"] .hero-onlist-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:14px} [data-section="hero"] .hero-live{display:flex;flex-direction:column;align-items:flex-start;gap:10px} [data-section="hero"] .hero-out{font:800 24px/1.05 var(--display);letter-spacing:-.03em} [data-section="hero"] .hero-live-l{font-size:13px;line-height:1.4;color:var(--muted)} /* ---------- The stage (all aria-hidden) ---------- */ [data-section="hero"] .hero-stage{position:relative;-webkit-user-select:none;user-select:none} [data-section="hero"] .hero-scene{position:absolute;left:0;top:0} [data-section="hero"] .hero-ari{position:absolute;z-index:3} /* The three things around her (js builds them): each is a unit, the small dark message she was sent above the card it made. cw (position and scale in scene px; parallax translate) > cm (rise-in, dim, hover lift, pop) > box (300px wide: bubble, card). Resting units are calm (a touch softer, no big shadow); the one in play is lifted and sharp, the others step back. */ [data-section="hero"] .hero-cw{position:absolute;left:0;top:0;z-index:5;transform-origin:0 0;pointer-events:none} [data-section="hero"] .hero-cw.is-up{z-index:7} [data-section="hero"] .hero-cm{position:absolute;left:0;top:0;transform-origin:50% 50%;pointer-events:auto;opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .6s var(--ease),translate .3s var(--ease)} [data-section="hero"] .hero-cw.is-in .hero-cm{opacity:1;transform:none} [data-section="hero"] .hero-stage.has-live .hero-cw.is-in:not(.is-live) .hero-cm{opacity:.76} [data-section="hero"] .hero-ubx{position:relative;width:300px} [data-section="hero"] .hero-ub{display:block;width:fit-content;max-width:100%;margin:0 0 0 auto;padding:10px 15px;font-size:17px;line-height:23px;white-space:nowrap;transform-origin:50% 50%;transition:opacity .3s var(--ease);box-shadow:0 0 0 1px rgba(63,90,36,.13),0 8px 16px -14px rgba(39,54,15,.4)} [data-section="hero"] .hero-ub:empty{min-width:30px;min-height:43px} [data-section="hero"] .hero-ub.is-gone{opacity:0} [data-section="hero"] .hero-ucard{margin-top:10px;transition:opacity .35s var(--ease),filter .35s var(--ease)} [data-section="hero"] .hero-ucard .ab,[data-section="hero"] .hero-ucard .dc{box-shadow:0 1px 2px rgba(27,27,24,.04),0 14px 30px -18px rgba(27,27,24,.28);transition:box-shadow .4s var(--ease)} [data-section="hero"] .hero-cw.is-live .hero-ucard .ab,[data-section="hero"] .hero-cw.is-live .hero-ucard .dc{box-shadow:var(--shadow)} [data-section="hero"] .hero-cw.is-wait .hero-ucard{opacity:.4} /* The card's small print (tags, "See history") at 15px like its rows */ [data-section="hero"] .hero-cw .tag,[data-section="hero"] .hero-cw .tlink{font-size:15px} /* The set card's band keeps "Saved to today's workout" on one line in the 300px box */ [data-section="hero"] .hero-cw .sv{gap:8px;padding:10px 12px 11px} [data-section="hero"] .hero-cw .sv-t,[data-section="hero"] .hero-cw .sv-s{font-size:15px} [data-section="hero"] .hero-cw .sv-t{gap:6px;letter-spacing:-.02em} /* Today at a glance is taller than the stage: a window onto the card, faded where it is cut, that scrolls while it is in play */ [data-section="hero"] .hero-ucard.is-win{filter:drop-shadow(0 14px 18px rgba(27,27,24,.1))} [data-section="hero"] .hero-ucard.is-win .dc{box-shadow:none} [data-section="hero"] .hero-win{overflow:hidden;border-radius:16px} [data-section="hero"] .hero-sc{will-change:transform} @media (hover:hover){[data-section="hero"] .hero-cm:hover{translate:0 -4px}} /* The dotted arc the message flies along, over her head into the bite */ [data-section="hero"] .hero-arc{position:absolute;left:0;top:0;width:100%;height:100%;z-index:4;overflow:visible;pointer-events:none;fill:none;stroke:rgba(27,27,24,.32);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:0 9;opacity:0;transition:opacity .35s var(--ease)} [data-section="hero"] .hero-arc.on{opacity:1} /* "Hi, I'm Ari." pops above her head (js places it), its small corner pointing at her */ [data-section="hero"] .hero-greet{position:absolute;z-index:6;margin:0;padding:10px 15px;font-size:17px;line-height:23px;white-space:nowrap;border-radius:16px 16px 4px 16px;box-shadow:var(--shadow-sm);transform-origin:100% 100%;opacity:0;transform:scale(.92);transition:opacity .3s var(--ease),transform .3s var(--spring);pointer-events:none} [data-section="hero"] .hero-greet.on{opacity:1;transform:none} /* Late-night caption under her shadow */ [data-section="hero"] .hero-cap{position:absolute;z-index:6;margin:0;display:block;font:500 14px/1.35 var(--body);color:var(--muted);text-align:center;text-wrap:balance;transition:opacity .4s var(--ease);pointer-events:none} [data-section="hero"] .hero-cap .i{display:inline-block;width:16px;height:16px;margin:0 .4em 0 0;vertical-align:-.2em;color:var(--zzz)} [data-section="hero"] .hero-cap.off{opacity:0} /* ---------- Phones (under 720px), and phones on their side: Ari at the left gutter, a mini chat to her right ---------- */ @media (max-width:719px),(max-width:1023px) and (max-height:500px) and (orientation:landscape){ [data-section="hero"] .hero-stage{height:var(--pa);margin-top:14px} [data-section="hero"] .hero-scene{right:0;bottom:0} [data-section="hero"] .hero-ari{left:calc(var(--pa) * -.054);bottom:0;width:var(--pa)} [data-section="hero"] .hero-glow-c{width:calc(var(--pa) * 1.7);height:calc(var(--pa) * 1.7);left:calc(var(--pa) * -.45);top:calc(var(--pa) * -.32)} [data-section="hero"] .hero-arc,[data-section="hero"] .hero-greet,[data-section="hero"] .hero-cap,[data-section="hero"] .hero-cw{display:none} /* from her right edge (89% of her box, less the 5.4% she is pulled into the gutter) + 10px to the right gutter */ [data-section="hero"] .hero-mini{position:absolute;z-index:6;left:calc(var(--pa) * .837 + 10px);right:0;top:0;bottom:0;max-width:300px;display:flex;flex-direction:column;gap:6px;padding-top:4px;pointer-events:none} [data-section="hero"] .hero-mub{flex:none;margin:0 0 0 auto;max-width:100%;padding:7px 11px;font-size:14px;line-height:1.38;text-wrap:balance;opacity:0;transition:opacity .25s var(--ease)} [data-section="hero"] .hero-mub.on{opacity:1} [data-section="hero"] .hero-mub:empty{min-width:24px;min-height:33px} [data-section="hero"] .hero-pill{flex:none;align-self:flex-start;max-width:100%;margin:0;padding:7px 10px 8px;background:var(--surface);border:1px solid var(--border);border-radius:14px;font:400 13px/1.36 var(--body);letter-spacing:-.003em;color:var(--ink);text-wrap:pretty;opacity:0;transform:translateY(6px);transition:opacity .28s var(--ease),transform .32s var(--ease)} [data-section="hero"] .hero-pill.on{opacity:1;transform:none} [data-section="hero"] .hero-pill b{font-weight:600} [data-section="hero"] .hero-pill .i{display:inline-block;width:15px;height:15px;margin:0 5px 0 0;vertical-align:-3px;color:var(--green)} [data-section="hero"] .hero-pill .pb0{display:block} [data-section="hero"] .hero-pill .pb{display:block;color:var(--muted);text-wrap:balance} [data-section="hero"] .hero-pill.is-bal{text-wrap:balance} [data-section="hero"] .hero-pill .pb b{color:var(--ink)} [data-section="hero"] .hero-pill .hpr{display:inline-block;margin-left:2px;padding:0 7px;border-radius:999px;background:var(--done);color:var(--onDone);font-weight:600} /* the late-night caption in the pill slot: site voice, so no bubble */ [data-section="hero"] .hero-pill.is-cap{background:none;border-color:transparent;padding-left:0;color:var(--muted);font-weight:500} [data-section="hero"] .hero-pill.is-cap .i{color:var(--zzz)} [data-section="hero"] .hero-pill.is-cap.on.cap-off{opacity:0;transform:none} [data-section="hero"] .hero-sub{margin-top:12px;font-size:15px;line-height:1.45} [data-section="hero"] .hero-sub.hide-phone{display:none} [data-section="hero"] .hero-cta{margin-top:18px} [data-section="hero"] .hero-onlist .btn{flex:1 1 auto} } /* Narrow phones (360 to 389px): the mini chat starts 6px closer to her and the pill is 4px narrower in the padding, so "PR: your best Bench press yet" and "Calories 1,556 of 2,300 kcal" stay on one line each (at most 3 lines in a pill) */ @media (max-width:389px){ [data-section="hero"] .hero-mini{left:calc(var(--pa) * .837 + 4px)} [data-section="hero"] .hero-pill{padding-left:8px;padding-right:8px} } /* 360px: keep the 16px gutter on the right and a hair of air from her shoulder; the longer lines wrap instead of running to the edge */ @media (max-width:374px){[data-section="hero"] .hero-mini{left:calc(var(--pa) * .837 + 8px)}} /* Real iPhones in Safari (about 600 to 760px of visible height, e.g. 390 x 664): everything still on the first screen with a 128px Ari and tighter steps: chip, H1, Ari's face, sub, field and button */ @media (max-width:719px) and (min-height:601px) and (max-height:760px){ [data-section="hero"]{padding-top:72px;--pa:128px} [data-section="hero"] .hero-h1{margin-top:10px} [data-section="hero"] .hero-stage{height:136px;margin-top:6px} [data-section="hero"] .hero-sub{margin-top:8px;font-size:14.5px;line-height:1.42} [data-section="hero"] .hero-cta{margin-top:12px} [data-section="hero"] .hero-cta .trust{margin-top:10px} } /* Very short screens (an iPhone SE shows about 548px): chip, H1, a smaller Ari and the form; no sub */ @media (max-width:719px) and (max-height:600px){ [data-section="hero"]{padding-top:72px;--pa:120px} [data-section="hero"] .hero-sub{display:none} [data-section="hero"] .hero-h1{margin-top:8px} [data-section="hero"] .hero-stage{height:128px;margin-top:10px} [data-section="hero"] .hero-cta{margin-top:14px} } /* ---------- Tablet and desktop: the stage is plain pixels. Ari's own box is set here, js places the three things from it ---------- Two arrangements (--hm, read by js): "s" = satellites (food upper left, training lower left, Today at a glance right of her) and "v" = a stack (food above her, training below, Today at a glance right). --hs is the scale of the units (300px boxes, so 15px card text is 15 x --hs on screen), --A her width, --ax her left, --dy how far her centre sits below the middle. Everything the layout depends on is in this CSS, so nothing moves when the script runs. */ @media (min-width:720px){ [data-section="hero"] .hero-mini{display:none} [data-section="hero"] .hero-stage{--hm:s;--hs:.84;--A:330px;--dy:0px; --ax-s:calc(300px * var(--hs) + 22px - .057 * var(--A));--sw-s:calc(var(--ax-s) + .94 * var(--A) + 26px + 300px * var(--hs)); --ax-v:8px;--sw-v:calc(.94 * var(--A) + 30px + 300px * var(--hs)); --ax:var(--ax-s);--sw:var(--sw-s);--sh:clamp(540px,calc(100vh - 190px),660px);height:var(--sh)} @supports (height:1svh){[data-section="hero"] .hero-stage{--sh:clamp(540px,calc(100svh - 190px),660px)}} [data-section="hero"] .hero-scene{left:var(--sl,-16px);top:0;width:var(--sw);height:100%} [data-section="hero"] .hero-ari{left:var(--ax);top:50%;margin-top:calc(var(--A) * -.5 + var(--dy));width:var(--A)} [data-section="hero"] .hero-glow-c{width:calc(var(--A) * 1.75);height:calc(var(--A) * 1.75);left:calc(var(--ax) - var(--A) * .37);top:50%;margin-top:calc(var(--A) * -.875 + var(--dy))} [data-section="hero"] .hero-greet{font-size:17px;line-height:1.35} [data-section="hero"] .hero-cap{left:calc(var(--ax) + var(--A) * .12);width:calc(var(--A) * .8);top:50%;margin-top:calc(var(--A) * .42 + var(--dy));font-size:14px} [data-section="hero"] .hero-cap .i{width:1.15em;height:1.15em} [data-section="hero"] .hero-chip{height:34px;padding:0 15px 0 13px;gap:10px;font-size:14px} [data-section="hero"] .hero-ping{width:8px;height:8px} [data-section="hero"] .hero-glow-l{width:620px;height:620px;left:-260px;top:-220px} } /* Tablet (720 to 1023): copy centred on top, the stage below it (600px+), the stack up to 879px wide, satellites above */ @media (min-width:720px) and (max-width:1023px){ [data-section="hero"]{padding:104px 0 8px} [data-section="hero"] .hero-grid{grid-template-areas:"chip" "h1" "sub" "cta" "stage";justify-items:center;text-align:center} [data-section="hero"] .hero-h1{margin-top:20px} [data-section="hero"] .hero-sub{margin:16px auto 0;max-width:560px} [data-section="hero"] .hero-cta{width:100%;max-width:480px;margin-top:26px} [data-section="hero"] .hero-cta .trust{justify-content:center} [data-section="hero"] .hero-onlist{margin:0 auto} [data-section="hero"] .hero-onlist-acts{justify-content:center} [data-section="hero"] .hero-live{align-items:center} [data-section="hero"] .hero-stage{--hm:v;--hs:.9;--A:262px;--dy:calc(.013 * var(--A) + 12.5px * var(--hs));--ax:var(--ax-v);--sw:var(--sw-v);--sh:740px;width:100%;margin-top:26px} [data-section="hero"] .hero-scene{left:calc(50% - var(--sw) / 2)} } @media (min-width:880px) and (max-width:1023px){ [data-section="hero"] .hero-stage{--hm:s;--hs:.86;--A:316px;--dy:0px;--ax:var(--ax-s);--sw:var(--sw-s);--sh:600px} } /* Desktop (1024 and up): two columns, 5/12 copy and 7/12 stage, vertically centred */ @media (min-width:1024px){ [data-section="hero"]{display:flex;flex-direction:column;justify-content:center;min-height:calc(min(100vh,900px) - 112px);padding:96px 0 24px} @supports (height:1svh){[data-section="hero"]{min-height:calc(min(100svh,900px) - 112px)}} [data-section="hero"] .hero-grid{width:100%;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(28px,2.8vw,40px);grid-template-rows:1fr auto auto auto auto 1fr;grid-template-areas:". stage" "chip stage" "h1 stage" "sub stage" "cta stage" ". stage"} [data-section="hero"] .hero-h1{margin-top:26px} [data-section="hero"] .hero-sub{margin-top:22px;max-width:30em} [data-section="hero"] .hero-cta{margin-top:32px} [data-section="hero"] .hero-cta .trust{margin-top:14px} /* Centred beside the copy; once a join starts, js pins it where it is (align-self:start + margin) and it stays in view (sticky) while the thank-you flow grows the column, so Ari celebrates on screen */ [data-section="hero"] .hero-stage{align-self:center;position:-webkit-sticky;position:sticky;top:96px} } /* The tiers. Satellites from 1280px up (room for two 13px-ish columns and her), the stack below that. The scene bleeds past the copy column to the right, never past the window (width available = window - stage left - 16 - 16). */ /* The stack is as tall as food + her + training need at a readable scale (680px, whatever the window), centred as a stack: --dy is worked out from them (food unit 282px tall, training 257, her head and chin .74 of her width between them) */ @media (min-width:1024px){[data-section="hero"] .hero-stage{--hm:v;--hs:.84;--A:260px;--dy:calc(.013 * var(--A) + 12.5px * var(--hs));--ax:var(--ax-v);--sw:var(--sw-v);--sl:max(-16px,calc(50% - 104px - .47 * var(--A)));--sh:700px}} @media (min-width:1366px){[data-section="hero"] .hero-stage{--hm:s;--hs:.76;--A:258px;--dy:0px;--ax:var(--ax-s);--sw:var(--sw-s);--sl:-6px;--sh:clamp(540px,calc(100vh - 190px),660px)}} @supports (height:1svh){@media (min-width:1366px){[data-section="hero"] .hero-stage{--sh:clamp(540px,calc(100svh - 190px),660px)}}} @media (min-width:1440px){[data-section="hero"] .hero-stage{--hs:.8;--A:274px}} @media (min-width:1536px){[data-section="hero"] .hero-stage{--hs:.85;--A:296px}} @media (min-width:1600px){[data-section="hero"] .hero-stage{--hs:.88;--A:310px}} @media (min-width:1680px){[data-section="hero"] .hero-stage{--hs:.9;--A:345px}} @media (min-width:1920px){[data-section="hero"] .hero-stage{--hs:.95;--A:372px}} /* Phones on their side (e.g. 844 x 390): copy and form on the left, Ari and her mini chat on the right */ @media (min-width:720px) and (max-width:1023px) and (max-height:500px) and (orientation:landscape){ [data-section="hero"]{padding:72px 0 16px;--pa:150px} [data-section="hero"] .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:24px;grid-template-areas:"chip stage" "h1 stage" "cta stage";justify-items:stretch;text-align:left;align-items:start} [data-section="hero"] .hero-h1{margin-top:10px;font-size:clamp(36px,5.4vw,46px)} [data-section="hero"] .hero-sub{display:none!important} [data-section="hero"] .hero-cta{max-width:none;margin-top:14px} [data-section="hero"] .hero-cta .trust{justify-content:flex-start;margin-top:10px} [data-section="hero"] .hero-stage{align-self:center;width:auto;height:calc(var(--pa) + 20px);margin-top:0} [data-section="hero"] .hero-stage{--hm:p} [data-section="hero"] .hero-scene{left:0;width:auto;height:auto} [data-section="hero"] .hero-ari{left:calc(var(--pa) * -.054);top:auto;bottom:0;margin-top:0;width:var(--pa)} [data-section="hero"] .hero-glow-c{width:calc(var(--pa) * 1.7);height:calc(var(--pa) * 1.7);left:calc(var(--pa) * -.45);top:calc(var(--pa) * -.32);margin-top:0} [data-section="hero"] .hero-mini{display:flex} [data-section="hero"] .hero-chip{height:28px;font-size:13px;padding:0 12px 0 10px} } /* Reduced motion: still scene, Ari idle, so the late caption has nothing to explain */ @media (prefers-reduced-motion:reduce){ [data-section="hero"] .hero-cap{display:none} [data-section="hero"] .hero-cm:hover{translate:none} } /* ---------- Today at a glance (PQ.cards.dashboard): the white day card the app answers "my dashboard" with ---------- Sizes from the app's DayCard: head badge 36, title 17, the pale green session block, rows with the label over the value, 4px bars on calories and protein, the lime Start workout button inside the card. Used by the hero today. */ .dcw{display:grid;gap:14px} .dc{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;text-align:left;font:400 15px/1.4 var(--body);color:var(--ink);letter-spacing:-.005em} .dc-h{display:flex;align-items:center;gap:12px} .dc-h .badge{width:36px;height:36px} .dc-h .badge .i{width:18px;height:18px} .dc-t{display:block;font-weight:700;font-size:17px;line-height:1.25;letter-spacing:-.012em} .dc-s{display:block;font-size:13px;line-height:1.35;color:var(--muted)} /* Today's session (the app's block since 19 Oct): white, a hairline, a "Today" pill, the name, the line, the lifts. No uppercase label. */ .dc-hero{margin-top:14px;padding:12px 14px 11px;background:var(--surface);border:1px solid var(--border);border-radius:14px} .dc-pill{display:inline-block;padding:1px 10px;border-radius:999px;background:var(--lime);color:var(--onDone);font-size:13px;line-height:20px;font-weight:600} .dc-sn{margin:5px 0 0;font-weight:700;font-size:22px;line-height:27px;letter-spacing:-.4px} .dc-sm{margin:0;font-size:14px;line-height:20px;color:var(--muted)} .dc-ex{list-style:none;margin:6px 0 0;padding:0} .dc-ex li{display:flex;align-items:baseline;gap:8px;line-height:23px} .dc-ex li::before{content:"\2022";flex:none;width:8px;color:var(--muted)} .dc-ex li span{flex:1;min-width:0} .dc-ex li em{flex:none;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap} .dc-rows{margin-top:6px} /* Yesterday: a few bullets under the label. Food today: each meal with its foods and kcal. */ .dc-bl{list-style:none;margin:1px 0 0;padding:0} .dc-bl li{display:flex;gap:9px;line-height:23px} .dc-bl li::before{content:"\2022";flex:none;color:var(--muted)} .dc-ml{margin-top:7px} .dc-ml:first-of-type{margin-top:3px} .dc-mh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-weight:700;font-size:14px;line-height:21px} .dc-mh em{font-weight:400;font-size:13px;color:var(--muted);text-align:right} .dc-mf{display:flex;justify-content:space-between;gap:8px;font-size:14px;line-height:21px} .dc-mf em{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap} .dc-mf.none{color:var(--muted)} .dc-r{display:flex;gap:12px;padding:11px 0} .dc-r+.dc-r{border-top:1px solid var(--line)} .dc-ic{flex:none;width:20px;padding-top:1px;color:var(--muted)} .dc-ic .i{width:18px;height:18px} .dc-rb{flex:1;min-width:0;display:grid} .dc-rb b{font-weight:700;line-height:21px} .dc-v{line-height:21px} .dc-g{margin-top:1px;font-size:13px;line-height:18px;color:var(--muted)} .dc-bar{display:block;height:4px;margin-top:8px;border-radius:2px;background:var(--card);overflow:hidden} .dc-bar i{display:block;height:100%;border-radius:2px;background:var(--c,var(--ink));transform-origin:left;transform:scaleX(var(--w,0));transition:transform .8s var(--ease)} .dc.pre .dc-bar i{transform:scaleX(0)} .dc-btn{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:10px 16px;background:var(--lime);color:var(--onLime);border-radius:var(--r-btn);font-weight:600;font-size:15px;line-height:22px} .dc-btn .i{width:16px;height:16px} .dc-chips{display:flex;flex-wrap:wrap;gap:8px} .dc-chips span{padding:9px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);font-size:14px;line-height:20px} /* ========================================================================== SECTION: Marquee ========================================================================== */ /* ---------- Marquee: "Say it how you'd say it. Ari sorts the rest." ---------- Jake's own lines as sent user bubbles, drifting under the hero. Row 1 black, row 2 the sent-chip grey. Each track holds its set twice and slides -50% for a seamless loop (js/marquee.js adds repeats on very wide screens and scales the duration so the speed stays the same). Paused on hover (fine pointers), on a tap (touch), off screen, while an email field has focus, and by the keyboard-only pause button. Reduced motion: still rows from the first pill. */ [data-section="marquee"]{position:relative;padding:12px 0 16px} /* Title: one line on tablet and desktop, two centred lines on phones */ [data-section="marquee"] .mq-head{text-align:center} [data-section="marquee"] .mq-title{margin:0 auto;font:700 20px/1.08 var(--display);letter-spacing:-.03em;color:var(--ink);text-wrap:balance} [data-section="marquee"] .mq-title-2{display:block;color:#A64A27} /* Rows */ [data-section="marquee"] .mq-stage{position:relative;margin-top:10px} [data-section="marquee"] .mq-rows{display:grid;gap:12px} [data-section="marquee"] .mq-row{ position:relative;overflow:hidden; /* 6px of air for the pill shadows and a taller touch target, without adding layout height */ padding:6px 0;margin:-6px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); touch-action:pan-y;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:default } [data-section="marquee"] .mq-row-2{display:none} [data-section="marquee"] .mq-track{display:flex;width:max-content;animation:mq-slide 60s linear infinite;will-change:transform} [data-section="marquee"] .mq-row-2 .mq-track{animation-duration:70s;animation-direction:reverse} [data-section="marquee"] .mq-set{display:flex;flex:none;gap:10px;padding-right:10px} @keyframes mq-slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} /* Pills: the app's sent bubble shape, tail bottom right */ [data-section="marquee"] .mq-pill{ display:block;flex:none;padding:9px 14px;border:1px solid transparent;border-radius:18px 18px 5px 18px; font:450 14px/18px var(--body);letter-spacing:-.003em;white-space:nowrap } /* Your messages are the app's lime bubble now (look 2B); a hairline of dark green keeps them readable on the paper */ [data-section="marquee"] .mq-row-1 .mq-pill{background:var(--userBubble);border-color:rgba(63,90,36,.2);color:var(--userInk);box-shadow:0 5px 12px -9px rgba(39,54,15,.5)} /* Row 2: still your messages, in the sent chip's quieter tint */ [data-section="marquee"] .mq-row-2 .mq-pill{background:#EDF1E2;border-color:rgba(63,90,36,.16);color:#3A4430;box-shadow:0 5px 12px -9px rgba(39,54,15,.4)} /* Pauses */ [data-section="marquee"].mq-off .mq-track, [data-section="marquee"].mq-calm .mq-track, [data-section="marquee"].mq-stopped .mq-track, [data-section="marquee"] .mq-row.mq-held .mq-track{animation-play-state:paused} @media (hover:hover) and (pointer:fine){ [data-section="marquee"] .mq-row:hover .mq-track{animation-play-state:paused} } /* Keyboard pause control: invisible until it has focus, then sits over the right end of the rows */ [data-section="marquee"] .mq-stop{ position:absolute;z-index:2;right:var(--gutter);top:50%;transform:translateY(-50%); display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 14px; border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--ink); font:600 14px/1 var(--body);box-shadow:var(--shadow-sm);cursor:pointer; opacity:0;pointer-events:none } [data-section="marquee"] .mq-stop:focus{opacity:1;pointer-events:auto} [data-section="marquee"] .mq-stop:focus-visible{border-radius:999px} [data-section="marquee"] .mq-stop-i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} [data-section="marquee"] .mq-i-play{display:none;fill:currentColor} [data-section="marquee"].mq-stopped .mq-i-pause{display:none} [data-section="marquee"].mq-stopped .mq-i-play{display:inline} /* Tablet and desktop: both rows, larger pills, one-line title */ @media (min-width:720px){ [data-section="marquee"]{padding:40px 0 32px} [data-section="marquee"] .mq-title{font-size:clamp(22px,2.4vw,28px);line-height:1.2} [data-section="marquee"] .mq-title-2{display:inline} [data-section="marquee"] .mq-stage{margin-top:20px} [data-section="marquee"] .mq-row-2{display:block} [data-section="marquee"] .mq-pill{padding:11px 16px;font-size:15px;line-height:19px} } @media (min-width:1024px){ /* Here the proof bar sits above (it closes the hero) and Try it follows with its own section padding */ [data-section="marquee"]{padding:64px 0 8px} [data-section="marquee"] .mq-stage{margin-top:24px} } /* Reduced motion: rows stand still, starting from the first pill at the content edge, cut off by a fade */ @media (prefers-reduced-motion:reduce){ [data-section="marquee"] .mq-track{animation:none;transform:none;will-change:auto;padding-left:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)))} [data-section="marquee"] .mq-dup{display:none} [data-section="marquee"] .mq-row{ -webkit-mask-image:linear-gradient(90deg,#000 72%,transparent 98%); mask-image:linear-gradient(90deg,#000 72%,transparent 98%) } [data-section="marquee"] .mq-stop{display:none} } /* ========================================================================== SECTION: Proof bar ========================================================================== */ /* Proof bar: four facts on a hairline. Desktop (1024+): one row of four across the bottom of the hero, transparent so the hero's glows read through. Tablet: 2 x 2 under the marquee up to 859px, one row of four from 860px. Phones: a 2 x 2 ledger under the marquee (no tiles: tiles would push the longer lines to three lines and blow the 170px budget). Each item draws its own stretch of the hairline, reaching across the gap to its neighbour, so every row reads as one line. A short ink tick marks where each item starts. Motion runs once on view (js/proof.js adds .proof-on); never with reduced motion. */ [data-section="proof"]{position:relative;padding:6px 0 0} [data-section="proof"] .proof-list{--gap:12px;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);row-gap:12px} [data-section="proof"] .proof-item{position:relative;min-width:0;padding-top:10px} /* hairline stretch (row continuity handled per layout below) */ [data-section="proof"] .proof-item::after{content:"";position:absolute;left:0;top:0;width:calc(100% + var(--gap));height:1px;background:var(--line);transform-origin:0 50%;pointer-events:none} /* start tick, sitting on the hairline */ [data-section="proof"] .proof-item::before{content:"";position:absolute;left:0;top:0;z-index:1;width:18px;height:2px;border-radius:0 2px 2px 0;background:var(--ink);transform-origin:0 50%;pointer-events:none} [data-section="proof"] .proof-fig{display:block;font:800 28px/1 var(--display);letter-spacing:-.03em;color:var(--ink);white-space:nowrap} /* reserve the final width so the count causes no layout shift (tabular "53,759" is just under 5ch) */ [data-section="proof"] .proof-n{display:inline-block;min-width:5.1ch;font-variant-numeric:tabular-nums} [data-section="proof"] .proof-line{display:block;margin-top:4px;max-width:22em;font:400 13px/1.3 var(--body);letter-spacing:0;color:var(--muted);text-wrap:balance} /* Two columns: the right-hand item of each row ends the line */ @media (max-width:859px){ [data-section="proof"] .proof-item:nth-child(2n)::after{width:100%} } /* Phones: the first line would just fit on one line and crowd its neighbour; two balanced lines like the other three (row 1's height is set by the second item's two lines anyway, so this costs nothing) */ @media (max-width:719px){ [data-section="proof"] .proof-item:first-child .proof-line{max-width:10em} } /* Smallest phones: a touch tighter so "UK supermarket products," still fits one line and nothing goes to three */ @media (max-width:374px){ /* the right-hand lines are the longer ones: a little more room there keeps every item to two lines */ [data-section="proof"] .proof-list{--gap:8px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)} [data-section="proof"] .proof-line{letter-spacing:-.012em} } /* Tablet, narrow: 2 x 2, centred under the marquee */ @media (min-width:720px) and (max-width:859px){ [data-section="proof"]{padding:8px 0 4px} [data-section="proof"] .proof-list{--gap:24px;max-width:680px;margin:0 auto;row-gap:18px} [data-section="proof"] .proof-item{padding-top:16px} } /* One row of four from 860px */ @media (min-width:860px){ [data-section="proof"]{padding:8px 0 4px} [data-section="proof"] .proof-list{--gap:24px;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:0} [data-section="proof"] .proof-item{padding-top:18px} [data-section="proof"] .proof-item:last-child::after{width:100%} [data-section="proof"] .proof-line{margin-top:7px;max-width:17em} } /* Desktop: a hairline row across the bottom of the hero */ @media (min-width:1024px){ [data-section="proof"]{padding:0} [data-section="proof"] .proof-item{padding:22px 0} } /* ---------- Motion (first time on screen) ---------- One pen stroke: each stretch of hairline starts as the one before it ends (reading order), each tick lands as the line reaches it, and the copy settles behind. Delays live in custom properties so the shorthands below keep them. */ [data-section="proof"] .proof-item{--dl:0s;--df:.08s} [data-section="proof"] .proof-item:nth-child(2){--dl:.17s;--df:.17s} [data-section="proof"] .proof-item:nth-child(3){--dl:.34s;--df:.26s} [data-section="proof"] .proof-item:nth-child(4){--dl:.51s;--df:.35s} html.js:not(.rm) [data-section="proof"] .proof-item::after{transition:transform .17s linear var(--dl)} html.js:not(.rm) [data-section="proof"] .proof-item::before{transition:transform .38s var(--spring) var(--dl)} html.js:not(.rm) [data-section="proof"] .proof-fig{transition:opacity .6s var(--ease) var(--df),transform .6s var(--ease) var(--df)} html.js:not(.rm) [data-section="proof"] .proof-line{transition:opacity .6s var(--ease) calc(var(--df) + .08s),transform .6s var(--ease) calc(var(--df) + .08s)} html.js:not(.rm) [data-section="proof"]:not(.proof-on) .proof-item::after, html.js:not(.rm) [data-section="proof"]:not(.proof-on) .proof-item::before{transform:scaleX(0)} html.js:not(.rm) [data-section="proof"]:not(.proof-on) .proof-fig, html.js:not(.rm) [data-section="proof"]:not(.proof-on) .proof-line{opacity:0;transform:translateY(8px)} /* Reduced motion: everything in place, no transitions at all */ html.rm [data-section="proof"] .proof-item::after, html.rm [data-section="proof"] .proof-item::before, html.rm [data-section="proof"] .proof-fig, html.rm [data-section="proof"] .proof-line{transition:none} @media (prefers-reduced-motion:reduce){ [data-section="proof"] .proof-item::after, [data-section="proof"] .proof-item::before, [data-section="proof"] .proof-fig, [data-section="proof"] .proof-line{transition:none;transform:none;opacity:1} } /* ========================================================================== SECTION: Try it (#try) ========================================================================== */ /* ---------- Try it: the real Ari chat (#try) ---------- Owns sections/try.html, css/try.css, js/try.js. The phone itself is styled by base.css (section 13); everything here is scoped to [data-section="try"]. */ [data-section="try"]{overflow-x:clip;isolation:isolate} /* The one tonal band in the middle of the page: a soft lime field behind the demo (an inset panel from 720px) */ [data-section="try"]::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,var(--bg) 0,#EDF2E2 72px,#EDF2E2 calc(100% - 72px),var(--bg) 100%);pointer-events:none} @media (min-width:720px){ [data-section="try"]::before{top:44px;bottom:0;left:max(12px,calc((100% - 1460px) / 2));right:max(12px,calc((100% - 1460px) / 2));border-radius:40px;background:linear-gradient(165deg,#F3F7EB 0%,#E7EFD9 100%);box-shadow:inset 0 0 0 1px rgba(213,226,194,.75)} } [data-section="try"] .try-glow-lime{width:520px;height:420px;left:-180px;top:4%;opacity:.55} /* Layout. Phones and tablets: one column (copy, screen, tray, what just happened, quote, small print). Desktop: copy column on the left (44%), the phone on the right, both vertically centred. */ [data-section="try"] .try-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stage" "tray" "what" "more" "quote" "small"} [data-section="try"] .try-head{grid-area:head;margin-bottom:20px} [data-section="try"] .try-stage{grid-area:stage;position:relative;display:flex;justify-content:center;min-width:0} [data-section="try"] .try-tray{grid-area:tray;min-width:0;margin-top:14px} [data-section="try"] .try-what{grid-area:what;margin-top:14px} [data-section="try"] .try-quote{grid-area:quote;margin-top:22px} [data-section="try"] .try-small{grid-area:small;margin-top:10px;max-width:440px} /* Soft terracotta glow behind the phone */ [data-section="try"] .try-glow-clay{width:120%;max-width:640px;aspect-ratio:1;left:50%;top:50%;translate:-50% -50%;opacity:.85} [data-section="try"] .try-phone{position:relative} [data-section="try"] .try-fit{position:relative;min-width:0;width:100%} [data-section="try"] .try-ari-w{display:none} /* Tablet and desktop: an iPhone at its true proportions (390 x 844), scaled by --k so it fits the window under the nav (site.js; never under 736px of screen), with the app's real text sizes (13px and up). Until site.js runs, the window height picks a near value. The living Ari leans on its right edge, clear of the screen. */ @media (min-width:720px){ [data-section="try"]{--ari-s:clamp(140px,12.5vw,180px)} [data-section="try"] .try-phone{--k:.872} [data-section="try"] .try-fit{flex:none;width:auto;margin-right:calc(var(--ari-s) * .8)} [data-section="try"] .try-ari-w{display:block;position:absolute;z-index:3;left:calc(100% - var(--ari-s) * .1);bottom:64px;width:var(--ari-s);pointer-events:none} [data-section="try"] .try-ari{width:100%;pointer-events:auto;filter:drop-shadow(0 18px 22px rgba(122,74,56,.18))} } /* ---------- The tray: lime user-bubble chips (the app's own bubble) with a little dark green send button ---------- */ [data-section="try"] .try-tray-l{display:flex;align-items:center;gap:7px;margin:0 0 9px;font:600 13px/1.3 var(--body);color:var(--muted)} [data-section="try"] .try-tray-l::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--lime)} [data-section="try"] .try-chips{position:relative;display:flex;flex-wrap:wrap;gap:8px} [data-section="try"] .try-chip{appearance:none;-webkit-appearance:none;border:0;margin:0;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 6px 6px 14px;background:var(--userBubble);color:var(--userInk);border-radius:18px 18px 5px 18px;font:500 15px/1.3 var(--body);letter-spacing:-.005em;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:0 0 0 1px rgba(63,90,36,.16),0 1px 0 rgba(255,255,255,.6) inset,0 8px 18px -12px rgba(39,54,15,.45);transition:transform .25s var(--ease),background-color .3s,box-shadow .25s} [data-section="try"] .try-chip-i{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--green);color:var(--lime);transition:transform .25s var(--ease)} [data-section="try"] .try-chip-i .i{width:16px;height:16px;stroke-width:2.4} [data-section="try"] .try-chip-i .i+.i{display:none} /* Sent: a quieter chip (ink on #E4E7DC is 11:1) with a tick, so it still reads as done */ [data-section="try"] .try-chip[aria-pressed="true"]{background:#E4E7DC;color:#4C5340;box-shadow:none} [data-section="try"] .try-chip[aria-pressed="true"] .try-chip-i .i:first-child{display:none} [data-section="try"] .try-chip[aria-pressed="true"] .try-chip-i .i+.i{display:block} [data-section="try"] .try-chip:active{transform:scale(.97)} [data-section="try"] .try-chip:focus-visible{outline-offset:3px;border-radius:18px 18px 5px 18px} @media (hover:hover) and (pointer:fine){ [data-section="try"] .try-chip:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 14px 24px -12px rgba(39,54,15,.5)} [data-section="try"] .try-chip:hover .try-chip-i{transform:scale(1.08)} [data-section="try"] .try-chip[aria-pressed="true"]:hover{background:#DADFCF} } [data-section="try"] .try-chip.try-pulse{animation:try-pulse .6s var(--ease) 2} @keyframes try-pulse{45%{transform:scale(1.04)}} /* ---------- What just happened ---------- */ [data-section="try"] .try-what{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-widget);padding:13px 16px 14px;box-shadow:var(--shadow-sm)} [data-section="try"] .try-what-l{display:flex;align-items:center;gap:7px;font:600 13px/1.3 var(--body);color:var(--muted)} [data-section="try"] .try-what-l::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--clay);box-shadow:0 0 0 3px rgba(217,138,108,.22)} [data-section="try"] .try-what-t{margin-top:5px;font-size:15px;line-height:1.45;color:var(--ink);min-height:calc(3 * 1.45em)} /* The app's date row never breaks (360px phones included) */ [data-section="try"] .app-date>span:first-child,[data-section="try"] .app-time{white-space:nowrap} /* Older bubbles go under the header as in the app, with just a 12px soft edge so a bubble is never sliced flat by the date row */ [data-section="try"] .app .thread{-webkit-mask-image:linear-gradient(transparent,#000 12px);mask-image:linear-gradient(transparent,#000 12px)} /* More below: the bottom edge fades too, so the thread reads as scrollable */ [data-section="try"] .app .thread.is-more{-webkit-mask-image:linear-gradient(transparent,#000 12px,#000 calc(100% - 32px),rgba(0,0,0,.2));mask-image:linear-gradient(transparent,#000 12px,#000 calc(100% - 32px),rgba(0,0,0,.2))} /* Keyboard focus on the thread rings the whole screen (the thread's own edges fade) */ [data-section="try"] .try-phone .screen:has(.thread:focus-visible){outline:3px solid var(--green);outline-offset:3px} /* Away rows and titles on one line, as in the reference capture, where the app font falls back to Inter */ [data-section="try"] .app .ir.full,[data-section="try"] .app .ab-t{letter-spacing:-.022em} @media (min-width:720px){ /* A few px back from the gutters so each Away row stays on one line, as in the capture */ [data-section="try"] .app .thread{padding-left:14px;padding-right:14px} [data-section="try"] .app .ab-h{gap:6px} [data-section="try"] .app .ab-h .tag{padding-left:8px;padding-right:8px} [data-section="try"] .app .ab-t{letter-spacing:-.03em} } /* ---------- Pull quote and small print ---------- */ [data-section="try"] .try-quote{font-size:20px;line-height:1.22;color:var(--ink);max-width:24em} /* ---------- The phone: thread mechanics ---------- */ /* Bottom anchored without losing the top: the first message takes the free space (margin-top:auto), so a reply taller than the thread overflows at the bottom, where js/try.js can scroll to it. */ [data-section="try"] .app .thread{position:relative;justify-content:flex-start} [data-section="try"] .app .thread>:first-child{margin-top:auto} [data-section="try"] .app .thread>.try-late{animation-delay:.45s} /* The vector avatar fills the avatar slot (32px on phones) */ /* Bigger hit areas for the app's small text buttons, same look */ [data-section="try"] .app-date .clear{position:relative;transition:color .2s} [data-section="try"] .app-date .clear::after{content:"";position:absolute;inset:-9px -10px} [data-section="try"] .app-date .clear:hover{color:var(--ink)} [data-section="try"] .app .act,[data-section="try"] .app .tlink{position:relative} [data-section="try"] .app .act::after,[data-section="try"] .app .tlink::after{content:"";position:absolute;inset:-6px -9px} [data-section="try"] .app .ab[tabindex]:focus{outline:none} [data-section="try"] .app .ab[tabindex]:focus-visible{outline:3px solid var(--green);outline-offset:2px} /* The composer: one caret (the app's green one), the line keeps its end in view while typing */ [data-section="try"] .app-composer .ph{text-overflow:clip} [data-section="try"] .app-composer .typing-caret::after{display:none} /* The app's toast, floating just above the composer (js sets bottom) */ [data-section="try"] .app>.try-toast{position:absolute;left:50%;translate:-50% 0;z-index:5;white-space:nowrap;pointer-events:none} /* The My dashboard line is only for phones (and phones on their side): the hero already shows that card on a tablet or desktop, and the tray stays the same height */ @media (min-width:1024px),(min-width:720px) and (min-height:501px),(min-width:720px) and (orientation:portrait){ [data-section="try"] .try-chip[data-key="dashboard"]{display:none} } /* ---------- Phones (under 720px), and phones on their side ---------- */ @media (max-width:719px),(max-width:1023px) and (max-height:500px) and (orientation:landscape){ [data-section="try"] .try-glow-lime{display:none} [data-section="try"] .try-tray{display:none} /* The app's context row holds the messages still to send: tap one and it goes, without leaving the screen */ [data-section="try"] .app .ctx{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:12px;scrollbar-width:none;padding:0 12px 4px;align-items:center} [data-section="try"] .app .ctx::-webkit-scrollbar{display:none} /* each chip sits in a real 44px tall button (the scrolling row would clip a larger hit area) */ [data-section="try"] .ctx-send{appearance:none;-webkit-appearance:none;flex:none;display:inline-flex;align-items:center;min-height:44px;margin:0;padding:4px 0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;scroll-snap-align:start;-webkit-tap-highlight-color:transparent;transition:transform .2s var(--ease)} [data-section="try"] .ctx-send .ctx-chip{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 5px 0 13px;font:500 14px/1.2 var(--body);letter-spacing:-.005em} [data-section="try"] .ctx-again .ctx-chip{padding:0 15px 0 12px;gap:6px} [data-section="try"] .ctx-again .i{width:15px;height:15px;stroke-width:2.2} [data-section="try"] .ctx-send:active{transform:scale(.96)} [data-section="try"] .ctx-up{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--lime);color:var(--onLime)} [data-section="try"] .ctx-up .i{width:14px;height:14px;stroke-width:2.4} [data-section="try"] .ctx-send.try-pulse{animation:try-pulse .6s var(--ease) 2} [data-section="try"] .ctx-send:focus-visible{outline:0} [data-section="try"] .ctx-send:focus-visible .ctx-chip{outline:3px solid var(--green);outline-offset:2px;border-radius:var(--r-pill)} [data-section="try"] .try-glow-clay{width:110%;opacity:.55} [data-section="try"] .try-tray{margin-top:12px} [data-section="try"] .try-tray-l{margin-bottom:7px} /* ONE horizontally scrolling row of 44px chips, edge to edge, no visible scrollbar */ [data-section="try"] .try-chips{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);margin:-4px calc(-1 * var(--gutter)) -10px;padding:4px var(--gutter) 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch} [data-section="try"] .try-chips::-webkit-scrollbar{display:none} [data-section="try"] .try-chip{flex:none;scroll-snap-align:start;white-space:nowrap} /* Phones: the What just happened line, without the card, straight under the screen */ /* 44px targets for the app's small green links, same look */ [data-section="try"] .app .tlink::after{inset:-13px -8px} /* See history sits right above View in Food: take its extra height from above so the two hit areas do not overlap */ [data-section="try"] .app .spark .tlink::after{inset:-18px -8px -8px} [data-section="try"] .try-what{margin-top:16px;padding:1px 0 1px 13px;background:none;border:0;border-left:2px solid var(--heroLine);border-radius:0;box-shadow:none} /* Phones: no pull quote (height) */ [data-section="try"] .try-quote{display:none} [data-section="try"] .try-small{margin-top:14px} } /* ---------- Tablet (720 to 1023px): one centred column ---------- */ @media (min-width:720px) and (max-width:1023px){ [data-section="try"] .try-grid{justify-items:center;text-align:center} [data-section="try"] .try-stage{text-align:left} [data-section="try"] .try-head{max-width:640px;margin-bottom:32px} [data-section="try"] .try-head .eyebrow,[data-section="try"] .try-head .sub{margin-left:auto;margin-right:auto} [data-section="try"] .try-tray,[data-section="try"] .try-what{width:100%;max-width:600px} [data-section="try"] .try-tray{margin-top:28px} [data-section="try"] .try-tray-l,[data-section="try"] .try-chips{justify-content:center} [data-section="try"] .try-what{text-align:left;margin-top:16px} [data-section="try"] .try-quote{font-size:22px;margin-top:26px} [data-section="try"] .try-small{margin-left:auto;margin-right:auto} } /* ---------- Desktop (1024px and up): copy left (44%), phone right ---------- */ @media (min-width:1024px){ [data-section="try"] .try-grid{grid-template-columns:44% minmax(0,1fr);column-gap:clamp(40px,5vw,88px);grid-template-rows:1fr repeat(6,auto) 1fr;grid-template-areas:". stage" "head stage" "tray stage" "what stage" "more stage" "quote stage" "small stage" ". stage"} [data-section="try"] .try-head{margin-bottom:28px} [data-section="try"] .try-tray{margin-top:0} [data-section="try"] .try-what{margin-top:18px;padding:15px 20px 16px} [data-section="try"] .try-what-t{font-size:16px} [data-section="try"] .try-quote{font-size:24px;margin-top:26px} [data-section="try"] .try-small{margin-top:12px} [data-section="try"] .try-stage{align-self:center} } @media (min-width:720px){ /* The desktop composer is tall enough for two lines, as in the app */ [data-section="try"] .app-composer .ph.typing{white-space:normal} } /* Phones on their side: the plain screen card, as tall as the window allows (js sets --ph), no 3D Ari */ @media (min-width:720px) and (max-width:1023px) and (max-height:500px) and (orientation:landscape){ [data-section="try"] .try-stage{justify-self:stretch;width:100%} [data-section="try"] .try-fit{width:520px;max-width:100%;margin:0 auto} [data-section="try"] .try-phone .screen{height:var(--ph,300px)} [data-section="try"] .try-phone .app{height:100%} [data-section="try"] .try-ari-w{display:none} [data-section="try"] .try-head{margin-bottom:16px} /* the wordmark row goes too: every px of this short screen is for the chat */ [data-section="try"] .app-head{display:none} [data-section="try"] .app-date{padding-top:12px} } /* Short phone screens (an iPhone SE, phones on their side, and the 600 to 760px of Safari on most iPhones): the app's tab bar goes, so the thread gets its 56px. Tablet and desktop always draw the whole phone, chrome and all. */ @media (max-width:719px) and (max-height:760px),(min-width:720px) and (max-width:1023px) and (max-height:500px) and (orientation:landscape){ [data-section="try"] .app-tabs{display:none} } /* Taller phones show the Shortcuts pill under the header, as the app does */ @media (max-width:719px) and (min-height:800px){ [data-section="try"] .app:not(.is-empty) .app-short{display:flex;height:36px;margin-top:6px} } @media (min-width:720px) and (min-height:850px){[data-section="try"] .try-phone{--k:.92}} @media (min-width:720px) and (min-height:900px){[data-section="try"] .try-phone{--k:.95}} @media (min-width:720px) and (min-height:960px){[data-section="try"] .try-phone{--k:1}} /* 1024 to 1179: a little more room for the phone and the Ari beside it */ @media (min-width:1024px) and (max-width:1179px){ [data-section="try"]{--ari-s:128px} [data-section="try"] .try-grid{grid-template-columns:41% minmax(0,1fr)} } /* ---------- Try: the button to the full "What can Ari do?" page (ari.html), under the demo ---------- */ [data-section="try"] .try-more{grid-area:more;display:flex;align-items:center;gap:12px;min-width:0;width:100%;max-width:440px;margin-top:14px;padding:8px;border-radius:999px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);color:var(--ink);text-decoration:none;text-align:left;-webkit-tap-highlight-color:transparent;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s} [data-section="try"] .try-more-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--lime);color:var(--onLime)} [data-section="try"] .try-more-ic .i{width:20px;height:20px} [data-section="try"] .try-more-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} [data-section="try"] .try-more-t{font:700 17px/1.2 var(--display);letter-spacing:-.02em} [data-section="try"] .try-more-s{font:400 14px/1.3 var(--body);color:var(--muted)} [data-section="try"] .try-more-go{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;transition:transform .25s var(--ease)} [data-section="try"] .try-more-go .i{width:18px;height:18px;stroke-width:2.2} [data-section="try"] .try-more:hover{border-color:var(--heroLine);box-shadow:var(--shadow);transform:translateY(-1px)} [data-section="try"] .try-more:hover .try-more-go{transform:translateX(2px)} [data-section="try"] .try-more:active{transform:scale(.985)} [data-section="try"] .try-more:focus-visible{outline:3px solid var(--green);outline-offset:3px} @media (max-width:719px){ [data-section="try"] .try-more{margin-top:12px;max-width:none} } @media (min-width:720px) and (max-width:1023px){ [data-section="try"] .try-more{justify-self:center;max-width:600px;margin-top:18px} } @media (min-width:1024px){ [data-section="try"] .try-more{max-width:none;margin-top:18px} } @media (prefers-reduced-motion:reduce){ [data-section="try"] .try-more,[data-section="try"] .try-more-go{transition:none} [data-section="try"] .try-more:hover,[data-section="try"] .try-more:hover .try-more-go,[data-section="try"] .try-more:active{transform:none} } /* ========================================================================== SECTION: Training (#training) ========================================================================== */ /* Training (#training): the app's Training tab, live. A lime tile holds two screens of the app: the Training tab (the day strip over Today's workout, PQ.cards.trainWeek and trainHero) and the live workout (PQ.cards.liveWorkout), switched by two buttons; three points, a line and the kicker sit beside it. */ [data-section="training"]{overflow-x:clip} [data-section="training"] .tr-nw{white-space:nowrap} /* ---------- Header ---------- */ [data-section="training"] .tr-head .sub{max-width:600px;text-wrap:pretty} /* ---------- Row: tile + copy ---------- */ [data-section="training"] .tr-row{display:grid;gap:28px} [data-section="training"] .tr-stage{position:relative;min-width:0} [data-section="training"] .tr-glow{left:-12%;top:8%;width:124%;height:84%;opacity:.5;z-index:0} /* The tile */ [data-section="training"] .tr-tile{position:relative;z-index:1;padding:16px;border-radius:var(--r-tile);background:linear-gradient(160deg,#F7FAF1,#EAF2DD);border:1px solid var(--heroLine);box-shadow:0 1px 2px rgba(31,42,18,.04),0 28px 56px -34px rgba(63,90,36,.42)} [data-section="training"] .tr-hint{display:flex;align-items:center;gap:7px;margin:0 2px 10px;font:500 13px/1.3 var(--body);color:var(--muted)} [data-section="training"] .tr-tap{width:16px;height:16px;flex:none;overflow:visible} [data-section="training"] .tr-tap-c{fill:var(--green)} [data-section="training"] .tr-tap-r{fill:none;stroke:var(--green);stroke-width:1.6;opacity:.4;transform-box:fill-box;transform-origin:center} /* The two screens: a pill switch (the app's tab bar look: the picked one is lime) */ [data-section="training"] .tr-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 12px;padding:4px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid var(--heroLine)} [data-section="training"] .tr-tab{appearance:none;min-height:44px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:600 15px/1.1 var(--body);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s var(--ease),color .2s var(--ease)} [data-section="training"] .tr-tab[aria-pressed="true"]{background:var(--lime);color:var(--onLime);box-shadow:0 1px 2px rgba(31,42,18,.1)} [data-section="training"] .tr-tab:focus-visible{outline-offset:2px} [data-section="training"] .tr-pane[hidden]{display:none} /* The day strip (the app, 10 Oct): no card and no title. Mon 5 ... Sun 11, a tick or a dot under each day, a rest day faded, and one dark green tile under the picked day that slides to the next (the cells themselves stay transparent). */ [data-section="training"] .tr-wk{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr))} [data-section="training"] .tr-d{position:relative;z-index:1;appearance:none;display:flex;flex-direction:column;align-items:center;gap:1px;min-height:64px;padding:7px 0 8px;border:0;border-radius:14px;background:transparent;color:var(--ink);font-family:var(--appfont);-webkit-tap-highlight-color:transparent;cursor:pointer} [data-section="training"] .tr-l{font:500 13px/1.25 var(--appfont);color:var(--muted);transition:color .2s var(--ease)} [data-section="training"] .tr-n{font:600 19px/1.2 var(--appfont);font-variant-numeric:tabular-nums;color:var(--ink);transition:color .2s var(--ease)} [data-section="training"] .tr-d.is-rest .tr-l,[data-section="training"] .tr-d.is-rest .tr-n{color:#6F6E68} [data-section="training"] .tr-d.is-rest .tr-n{font-weight:500} [data-section="training"] .tr-mk{display:grid;place-items:center;height:14px;margin-top:2px;color:var(--green);transition:color .2s var(--ease)} [data-section="training"] .tr-mk .i{width:15px;height:15px;stroke-width:2} [data-section="training"] .tr-mk s{display:block;width:6px;height:6px;border-radius:50%;background:var(--green);text-decoration:none;transition:background-color .2s var(--ease)} [data-section="training"] .tr-d.is-sel .tr-l,[data-section="training"] .tr-d.is-sel .tr-n{color:#fff} [data-section="training"] .tr-d.is-sel .tr-mk{color:#fff} [data-section="training"] .tr-d.is-sel .tr-mk s{background:#fff} [data-section="training"] .tr-d:focus-visible{outline-offset:2px;border-radius:14px} [data-section="training"] .tr-hl{position:absolute;left:0;top:0;width:0;height:0;border-radius:14px;background:var(--green);pointer-events:none;z-index:0} [data-section="training"] .tr-live .tr-hl{transition:transform .2s var(--ease),width .2s var(--ease),height .2s var(--ease)} [data-section="training"] .tr-pre .tr-d .tr-mk{opacity:0} /* Today's workout (the app's hero card): pale green, an icon tile, a minutes pill, the name, the dark green Start workout with the 3D Ari beside it, and See exercises. Crossfades between days; the height glides. */ [data-section="training"] .tr-sess{position:relative;margin-top:12px} [data-section="training"] .tr-sess>.tr-hero{position:relative;z-index:1;min-height:var(--tr-mh,0px)} [data-section="training"] .tr-sess>.tr-out{position:absolute;left:0;right:0;top:0;z-index:0;pointer-events:none} [data-section="training"] .tr-sess.tr-anim{overflow:hidden;border-radius:var(--r-widget)} [data-section="training"] .tr-hero{padding:16px 16px 12px;border-radius:var(--r-widget);background:var(--hero);border:1px solid var(--heroLine);font-family:var(--appfont);box-shadow:0 1px 2px rgba(31,42,18,.04),0 10px 24px -18px rgba(31,42,18,.3)} [data-section="training"] .th-top{display:flex;align-items:center;gap:10px} [data-section="training"] .th-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--done);color:var(--green)} [data-section="training"] .th-ic .i{width:20px;height:20px} [data-section="training"] .th-t{flex:1;min-width:0;font:600 16px/1.2 var(--appfont);color:var(--green);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} [data-section="training"] .th-pill{flex:none;padding:5px 13px;border-radius:999px;background:var(--done);color:var(--green);font:600 15px/1.3 var(--appfont);white-space:nowrap} [data-section="training"] .th-pill.is-done{background:var(--lime);color:var(--onLime)} [data-section="training"] .th-more{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--ink)} [data-section="training"] .th-more .i{width:18px;height:18px;stroke-width:2.6} [data-section="training"] .th-name{margin:14px 0 0;font:700 34px/1.05 var(--appfont);letter-spacing:-.025em;color:var(--ink)} [data-section="training"] .th-line{margin:6px 0 0;font:400 16px/1.35 var(--appfont);color:var(--muted)} [data-section="training"] .th-act{position:relative;display:flex;margin-top:14px} [data-section="training"] .th-start{display:flex;align-items:center;justify-content:center;gap:10px;flex:0 0 calc(100% - 96px);min-height:54px;border-radius:999px;background:var(--green);color:#fff;font:600 18px/1 var(--appfont);cursor:default;-webkit-user-select:none;user-select:none} [data-section="training"] .th-start .i{width:20px;height:20px;fill:currentColor;stroke:currentColor;stroke-width:1.2} [data-section="training"] .th-ari-slot{position:absolute;right:-6px;bottom:-8px;width:92px;height:84px;pointer-events:none} [data-section="training"] .th-ari-w{position:absolute;inset:0} [data-section="training"] .th-ari-w .ari{position:absolute;left:0;top:0;width:100%} [data-section="training"] .th-back{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--green);font:600 16px/1 var(--appfont);cursor:pointer} [data-section="training"] span.th-back{cursor:default} [data-section="training"] .th-see{appearance:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:8px;padding:0;border:0;background:none;color:var(--green);font:600 16px/1 var(--appfont);cursor:pointer} [data-section="training"] .th-see .i{width:16px;height:16px;stroke-width:2.2;transition:transform .2s var(--ease)} [data-section="training"] .th-see[aria-expanded="true"] .i{transform:rotate(180deg)} [data-section="training"] .th-ex{list-style:none;margin:2px 0 4px;padding:0} [data-section="training"] .th-ex[hidden]{display:none} [data-section="training"] .th-ex li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--heroLine);font:400 15px/1.3 var(--appfont);color:var(--ink)} [data-section="training"] .th-ex em{font-style:normal;color:var(--muted);white-space:nowrap} [data-section="training"] .tr-hero.is-rest .th-name{color:var(--muted)} /* ---------- Points ---------- */ [data-section="training"] .tr-copy{min-width:0} [data-section="training"] .tr-pts{list-style:none;margin:0;padding:0;display:grid;gap:12px} [data-section="training"] .tr-pt{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start} [data-section="training"] .tr-badge{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-badge);background:var(--card);border:1px solid var(--border);color:var(--green)} [data-section="training"] .tr-badge .i{width:20px;height:20px} [data-section="training"] .tr-pt-t{margin:0;padding-top:1px;font:700 16px/1.25 var(--display);letter-spacing:-.015em;color:var(--ink)} [data-section="training"] .tr-pt-l{margin-top:2px;font-size:14px;line-height:1.42;color:var(--muted);text-wrap:pretty} [data-section="training"] .tr-also{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:15px;line-height:1.45;color:var(--muted)} [data-section="training"] .tr-kicker{margin-top:10px} /* ---------- Phones: tight, the strip runs closer to the card edges so every day is a 44px target ---------- */ @media (max-width:719px){ [data-section="training"]{padding-bottom:18px} [data-section="training"] .tr-head{margin-bottom:14px} [data-section="training"] .tr-hint{margin-bottom:8px} [data-section="training"] .tr-tile .tr-wk{margin:0 -8px} [data-section="training"] .th-more{display:none} [data-section="training"] .tr-tabs{margin-bottom:8px;padding:3px} [data-section="training"] .tr-tab{min-height:44px} /* the days are plainly buttons: the "Tap a day" hint (and its ripple) is left to tablet and desktop */ [data-section="training"] .tr-hint{display:none} [data-section="training"] .tr-hero{padding:14px 14px 6px} [data-section="training"] .th-name{margin-top:10px;font-size:30px} [data-section="training"] .th-line{margin-top:4px;font-size:15px} [data-section="training"] .th-act{margin-top:10px} [data-section="training"] .th-start{min-height:50px;font-size:17px;flex-basis:calc(100% - 84px)} [data-section="training"] .th-ari-slot{right:-8px;bottom:-6px;width:80px;height:74px} [data-section="training"] .th-see{margin-top:2px} [data-section="training"] .tr-sess{margin-top:6px} [data-section="training"] .tr-row{gap:20px} /* Phone cuts (lead's call, to hold the page length): no "Also in Training" line; the sub drops its last sentence via .hide-phone in the markup */ [data-section="training"] .tr-pt{align-items:center} [data-section="training"] .tr-pt-l{display:none} [data-section="training"] .tr-also{display:none} [data-section="training"] .tr-kicker{margin-top:14px} } /* Narrow phones: a little less padding so the days stay close to 44px wide */ @media (max-width:389px){ [data-section="training"] .tr-tile{padding:12px} [data-section="training"] .tr-tile .tr-wk{margin:0 -10px} [data-section="training"] .tr-hint{margin-left:4px} [data-section="training"] .tr-hero{padding:12px 12px 6px} } /* 360-wide phones: 8px of tile and a 12px bleed give the strip 308px, so each day is a full 44px */ @media (max-width:369px){ [data-section="training"] .tr-tile{padding:8px} [data-section="training"] .tr-tile .tr-wk{margin:0 -12px} [data-section="training"] .th-name{font-size:28px} } /* ---------- Tablet and up: centred header ---------- */ @media (min-width:720px){ [data-section="training"] .tr-head{max-width:820px;margin-left:auto;margin-right:auto;margin-bottom:40px;text-align:center} [data-section="training"] .tr-head .eyebrow,[data-section="training"] .tr-head .sub{margin-left:auto;margin-right:auto} [data-section="training"] .tr-head .sub{text-wrap:balance} [data-section="training"] .tr-tile{padding:20px} [data-section="training"] .tr-pts{gap:20px} [data-section="training"] .tr-pt{gap:16px} [data-section="training"] .tr-pt-t{font-size:18px} [data-section="training"] .tr-pt-l{font-size:15px;line-height:1.5} } @media (min-width:720px) and (max-width:1023px){ [data-section="training"] .tr-row{max-width:520px;margin:0 auto;gap:40px} } /* ---------- Desktop: tile left, points right, vertically centred ---------- */ @media (min-width:1024px){ [data-section="training"] .tr-head{max-width:1000px;margin-bottom:56px} [data-section="training"] .tr-head .sub{max-width:620px} /* Top aligned, so the strip never moves under the pointer when the session card changes height */ [data-section="training"] .tr-row{grid-template-columns:minmax(0,480px) minmax(0,440px);justify-content:center;align-items:start;column-gap:clamp(48px,6vw,88px)} [data-section="training"] .tr-tile{padding:24px} [data-section="training"] .tr-hint{margin-bottom:12px} [data-section="training"] .tr-sess{margin-top:14px} [data-section="training"] .tr-pts{gap:28px} [data-section="training"] .tr-pt-t{font-size:20px;line-height:1.2} [data-section="training"] .tr-pt-l{margin-top:5px;font-size:16px} [data-section="training"] .tr-also{margin-top:30px;padding-top:24px} [data-section="training"] .tr-kicker{margin-top:12px} } /* ---------- Reduced motion: instant swaps, no stagger, no slide ---------- */ @media (prefers-reduced-motion:reduce){ [data-section="training"] .tr-live .tr-hl, [data-section="training"] .tr-d .tr-l,[data-section="training"] .tr-d .tr-n,[data-section="training"] .tr-tab, [data-section="training"] .tr-mk,[data-section="training"] .tr-mk s,[data-section="training"] .th-see .i, [data-section="training"] .lw-bar i{transition:none} [data-section="training"] .tr-pre .tr-d .tr-mk{opacity:1} } /* ========================================================================== TRAINING, INPUT (added 7 Oct): what you type and the confirm card above the tile; Confirm moves Legs in the strip ========================================================================== */ [data-section="training"] .tr-flow{min-width:0} [data-section="training"] .tr-chat.chat>*+*{margin-top:10px} [data-section="training"] .tr-chat .ub{max-width:88%} [data-section="training"] .tr-chat .ab{overflow:hidden} [data-section="training"] .tr-chat .ab .cbtns{margin-top:10px} [data-section="training"] .tr-arrow{display:none} /* After Confirm the buttons' row becomes Undo and "Training >" (the app's .after row); after Not now or Undo it is Replay alone (same height, nothing moves) */ [data-section="training"] .tr-after{min-height:44px} [data-section="training"] .tr-after .act,[data-section="training"] .tr-after .tlink{min-height:44px} [data-section="training"] .tr-replay{appearance:none;margin-left:auto;background:none;border:0;padding:0 2px;min-height:44px;color:var(--muted);font:600 15px/1 var(--body);cursor:pointer;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px} [data-section="training"] .tr-replay:hover{color:var(--green);text-decoration-color:currentColor} /* Phones: no tray, no avatar, a compact card (the Journey's Legs card is the same), 44px buttons; the third point is this card, so it goes */ @media (max-width:719px){ [data-section="training"] .tr-chat .ar{gap:0} [data-section="training"] .tr-chat .ub{max-width:92%} [data-section="training"] .tr-chat.chat>*+*{margin-top:8px} [data-section="training"] .tr-chat .ab{padding:9px 12px 10px} [data-section="training"] .tr-chat .ab-h{align-items:center} [data-section="training"] .tr-chat .inset{margin-top:7px;padding:0 11px} [data-section="training"] .tr-chat .ir{padding:5px 0} [data-section="training"] .tr-chat .note{margin-top:5px;line-height:1.3} [data-section="training"] .tr-chat .ab .cbtns{margin-top:8px} [data-section="training"] .tr-row{gap:10px} [data-section="training"] .tr-chat .cbtn{padding:0 16px} [data-section="training"] .tr-pt:nth-child(3){display:none} } /* Tablet and up: the chat sits in a white tray, as it does in the Journey */ @media (min-width:720px){ [data-section="training"] .tr-chat{padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow)} [data-section="training"] .tr-chat.chat>*+*{margin-top:12px} } /* Desktop: the story reads left to right (what you type, then your week), the three points run along underneath */ @media (min-width:1024px){ [data-section="training"] .tr-row{grid-template-columns:minmax(0,460px) 64px minmax(0,480px);grid-template-areas:"flow arrow stage" "copy copy copy";justify-content:center;align-items:center;column-gap:0;row-gap:64px} [data-section="training"] .tr-flow{grid-area:flow} [data-section="training"] .tr-arrow{grid-area:arrow;display:grid;place-items:center;justify-self:center;width:40px;height:40px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--green);box-shadow:var(--shadow-sm)} [data-section="training"] .tr-arrow .i{width:18px;height:18px} [data-section="training"] .tr-stage{grid-area:stage;align-self:start} [data-section="training"] .tr-copy{grid-area:copy} [data-section="training"] .tr-pts{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px} [data-section="training"] .tr-also{margin-top:36px;text-align:center} [data-section="training"] .tr-kicker{text-align:center} } /* ========================================================================== TRAINING, LIVE WORKOUT (added 28 Oct): the app's live workout screen, one set in (PQ.cards.liveWorkout). Progress card, the Bench press card with its drop set button, the next lift, and the rest timer pill. ========================================================================== */ [data-section="training"] .lw{display:grid;gap:10px;font-family:var(--appfont);color:var(--ink);-webkit-user-select:none;user-select:none} [data-section="training"] .lw-prog{padding:14px;border-radius:var(--r-widget);background:var(--surface);border:1px solid var(--border);box-shadow:0 1px 2px rgba(31,42,18,.04),0 10px 24px -18px rgba(31,42,18,.3)} [data-section="training"] .lw-ph{display:flex;align-items:center;gap:10px} [data-section="training"] .lw-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--card);color:var(--green)} [data-section="training"] .lw-ic .i{width:19px;height:19px} [data-section="training"] .lw-ph b{flex:1;font:600 17px/1.2 var(--appfont)} [data-section="training"] .lw-clock{display:inline-flex;align-items:center;gap:6px;font:600 16px/1 var(--appfont);font-variant-numeric:tabular-nums} [data-section="training"] .lw-clock .i{width:16px;height:16px;color:var(--muted)} [data-section="training"] .lw-big{margin:12px 0 6px;font:400 15px/1.2 var(--appfont);color:var(--muted)} [data-section="training"] .lw-big b{font:700 30px/1 var(--appfont);letter-spacing:-.02em;color:var(--ink)} [data-section="training"] .lw-bar{display:block;height:7px;border-radius:4px;background:var(--track);overflow:hidden} [data-section="training"] .lw-bar i{display:block;height:100%;width:max(calc(var(--w) * 100%),6px);border-radius:4px;background:var(--green);transition:width .8s var(--ease)} [data-section="training"] .lw-bar.vol i{background:var(--volumeBar)} [data-section="training"] .lw.pre .lw-bar i{width:0} [data-section="training"] .lw-cap{margin:8px 0 0;font:400 14px/1.3 var(--appfont);color:var(--muted)} [data-section="training"] .lw-ahead{display:inline-block;margin-top:8px;padding:4px 12px;border-radius:999px;background:var(--done);color:var(--onDone);font:600 15px/1.3 var(--appfont)} /* The exercise in hand */ [data-section="training"] .lw-ex{padding:14px 12px 14px;border-radius:var(--r-widget);background:var(--hero);border:1px solid var(--heroLine)} [data-section="training"] .lw-eh{display:flex;align-items:center;gap:10px;padding:0 2px} [data-section="training"] .lw-eh b{flex:1;min-width:0;font:700 19px/1.2 var(--appfont);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} [data-section="training"] .lw-how{font:600 14px/1 var(--appfont);color:var(--green)} [data-section="training"] .lw-cnt{padding:3px 10px;border-radius:999px;background:rgba(27,27,24,.06);color:var(--muted);font:500 13px/1.35 var(--appfont);white-space:nowrap} [data-section="training"] .lw-up .i{display:block;width:16px;height:16px;stroke-width:2.2;transform:rotate(180deg)} [data-section="training"] .lw-tg{margin:3px 2px 0;font:400 14px/1.3 var(--appfont);color:var(--muted)} [data-section="training"] .lw-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} [data-section="training"] .lw-chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 11px;border-radius:12px;background:var(--surface);border:1px solid var(--border);font:500 14px/1 var(--appfont)} [data-section="training"] .lw-chip .i{width:15px;height:15px} [data-section="training"] .lw-chip b{font-weight:700} [data-section="training"] .lw-cols{display:flex;justify-content:space-between;margin:12px 4px 2px;font:600 13px/1.2 var(--appfont);letter-spacing:.06em;color:var(--muted)} [data-section="training"] .lw-cols span+span{letter-spacing:0;color:var(--green)} [data-section="training"] .lw-r{display:grid;grid-template-columns:28px minmax(0,1fr) 10px minmax(0,1fr) 44px 28px;align-items:center;gap:8px;margin-top:6px;padding:5px 7px;min-height:46px;border-radius:14px;border:1.5px dashed transparent} [data-section="training"] .lw-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface);border:1px solid var(--border);font:700 14px/1 var(--appfont)} [data-section="training"] .lw-in{display:grid;place-items:center;height:34px;border-radius:10px;background:var(--surface);font:500 17px/1 var(--appfont);color:#8F8E87;font-variant-numeric:tabular-nums} [data-section="training"] .lw-x{font:400 14px/1 var(--appfont);color:var(--muted);text-align:center} [data-section="training"] .lw-rpe{display:grid;place-items:center;height:30px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font:600 13px/1 var(--appfont);color:#8F8E87} [data-section="training"] .lw-tk{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid #B9B8B0;color:#B9B8B0} [data-section="training"] .lw-tk .i{width:15px;height:15px;stroke-width:2.2} [data-section="training"] .lw-r.is-now{border-color:#A9CC7F} [data-section="training"] .lw-r.is-now .lw-tk{border-color:var(--green);color:var(--green)} [data-section="training"] .lw-r.is-done{background:var(--doneCard)} [data-section="training"] .lw-r.is-done .lw-n{background:var(--green);border-color:var(--green);color:#fff} [data-section="training"] .lw-r.is-done .lw-in{color:var(--ink)} [data-section="training"] .lw-r.is-done .lw-tk{background:var(--green);border-color:var(--green);color:#fff} [data-section="training"] .lw-add{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} [data-section="training"] .lw-btn{display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:12px;background:var(--surface);border:1px solid var(--border);font:500 15px/1 var(--appfont)} [data-section="training"] .lw-btn.dash{border:1.5px dashed #A9CC7F} [data-section="training"] .lw-next{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:var(--r-widget);background:var(--surface);border:1px solid var(--border)} [data-section="training"] .lw-next b{display:block;font:700 17px/1.25 var(--appfont)} [data-section="training"] .lw-next small{display:block;margin-top:2px;font:400 14px/1.3 var(--appfont);color:var(--muted)} [data-section="training"] .lw-next .i{flex:none;width:16px;height:16px;stroke-width:2.2} /* The rest timer: a dark pill with the countdown in lime, +15s and Skip */ [data-section="training"] .lw-rest{display:flex;align-items:center;gap:8px;min-height:54px;padding:0 8px 0 16px;border-radius:999px;background:#3B3E34;color:#fff;box-shadow:0 10px 24px -14px rgba(27,27,24,.6)} [data-section="training"] .lw-rest>.i{flex:none;width:19px;height:19px} [data-section="training"] .lw-rl{font:500 16px/1 var(--appfont)} [data-section="training"] .lw-rt{flex:1;min-width:0;font:700 26px/1 var(--appfont);letter-spacing:-.01em;color:var(--lime);font-variant-numeric:tabular-nums} [data-section="training"] .lw-rb{display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.14);font:600 15px/1 var(--appfont)} @media (max-width:719px){ [data-section="training"] .lw{gap:8px} [data-section="training"] .lw-prog{padding:12px} [data-section="training"] .lw-big{margin-top:9px} [data-section="training"] .lw-big b{font-size:26px} [data-section="training"] .lw-cap{display:none} [data-section="training"] .lw-ahead{margin-top:8px} [data-section="training"] .lw-ex{padding:12px 10px} [data-section="training"] .lw-r{min-height:42px;margin-top:4px;padding:4px 6px;gap:6px} [data-section="training"] .lw-in{height:32px} [data-section="training"] .lw-next{display:none} [data-section="training"] .lw-rest{min-height:50px} } @media (max-width:389px){ [data-section="training"] .lw-r{grid-template-columns:26px minmax(0,1fr) 8px minmax(0,1fr) 40px 26px;gap:5px} [data-section="training"] .lw-n,[data-section="training"] .lw-tk{width:26px;height:26px} } /* ========================================================================== SECTION: Food (#food) ========================================================================== */ /* ---------- Food (#food) ---------- */ /* The #EFEEE8 band, soft-faded into the page at both edges */ [data-section="food"].band{background:linear-gradient(180deg,var(--bg) 0,var(--card) 110px,var(--card) calc(100% - 110px),var(--bg) 100%)} @media (min-width:1024px){[data-section="food"] .food-head .eyebrow{max-width:min(100%,640px)}} /* Steps: 2 x 2 grid of white cards (tablet and desktop) */ [data-section="food"] .food-steps{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} @media (min-width:1024px){[data-section="food"] .food-steps{gap:20px}} [data-section="food"] .food-step{display:flex;flex-direction:column;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-tile);padding:24px 22px 22px} [data-section="food"] .food-top{display:flex;align-items:center;justify-content:space-between;gap:12px;height:34px;margin-bottom:16px} [data-section="food"] .food-num{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font:700 15px/1 var(--display);letter-spacing:-.02em} [data-section="food"] .food-again{margin:-5px -2px -5px 0;font-size:14px} [data-section="food"] .food-p{margin-top:8px;color:var(--muted);font-size:16px;line-height:1.5;text-wrap:pretty} [data-section="food"] .food-cap{font-size:13px;line-height:1.4;color:var(--muted);text-wrap:balance} /* The visual: a #F4F3EE inner panel that fills the rest of the card */ [data-section="food"] .food-vis{container:food-vis / inline-size;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:12px;min-width:0;margin-top:18px;padding:20px;background:var(--bg);border-radius:20px} /* 1. Say it, snap it or scan it */ [data-section="food"] .food-say{display:flex;flex-direction:column;gap:10px} [data-section="food"] .food-say .ub{max-width:92%} [data-section="food"] .food-say .ab{width:100%;max-width:420px} [data-section="food"] .food-ways{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} [data-section="food"] .food-ways li{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px 0 12px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font:500 14px/1 var(--body);color:var(--ink)} [data-section="food"] .food-ways .i{width:16px;height:16px;color:var(--green)} /* 2. The ladder. Narrow (default): the example lands on the rung's second line. Wide panels (460px and up): the example rests in a lane beside the rung. */ [data-section="food"] .food-ladder{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:6px} /* Tablet and desktop: step 2's panel is stretched to step 1's height, so the rungs share some of it rather than float in blank space */ @media (min-width:720px){ [data-section="food"] .food-vis-ladder .food-ladder{flex:1 1 auto;grid-auto-rows:minmax(min-content,124px);align-content:center;gap:12px} [data-section="food"] .food-vis-ladder .food-rung{align-content:center} } [data-section="food"] .food-rung{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:10px;align-items:start;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:9px 12px 9px 10px} [data-section="food"] .food-rn{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font:700 13px/1 var(--body);font-variant-numeric:tabular-nums;transition:background .3s,color .3s} [data-section="food"] .food-rt{min-width:0} [data-section="food"] .food-rname{display:flex;align-items:center;gap:7px;min-height:22px;font:600 14px/1.3 var(--body);color:var(--ink)} [data-section="food"] .food-rname .i{width:16px;height:16px;color:var(--green)} [data-section="food"] .food-l2{display:grid;margin-top:2px} [data-section="food"] .food-l2>*{grid-area:1/1} [data-section="food"] .food-rsub{align-self:center;font-size:13px;line-height:1.35;color:var(--muted);transition:opacity .2s} [data-section="food"] .food-src{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:13px;line-height:1.35;color:var(--muted)} [data-section="food"] .food-src .i{width:14px;height:14px;color:var(--muted)} [data-section="food"] .food-dock{position:relative;display:flex;align-self:center;min-width:0} [data-section="food"] .food-rung:nth-child(1) .food-dock{z-index:3} [data-section="food"] .food-rung:nth-child(2) .food-dock{z-index:2} [data-section="food"] .food-rung:nth-child(3) .food-dock{z-index:1} [data-section="food"] .food-chip{display:inline-block;max-width:100%;padding:4px 10px;border-radius:12px 12px 4px 12px;background:var(--userBubble);color:var(--userInk);font:500 13px/1.3 var(--body);box-shadow:0 4px 10px -4px rgba(39,54,15,.3);transition:opacity .2s} /* Before the run (motion on, JS on), the examples are out of sight */ .js:not(.rm) [data-section="food"] .food-chip{opacity:0} .js:not(.rm) [data-section="food"] .food-rung.is-drop .food-chip, .js:not(.rm) [data-section="food"] .food-rung.is-hit .food-chip{opacity:1} /* Matched: lime number, and in narrow panels the example takes the second line */ [data-section="food"] .food-rung.is-hit .food-rn, :is(.rm,html:not(.js)) [data-section="food"] .food-rung[data-hit] .food-rn{background:var(--lime);color:var(--onLime)} [data-section="food"] .food-rung:is(.is-drop,.is-hit) .food-rsub, :is(.rm,html:not(.js)) [data-section="food"] .food-rung[data-hit] .food-rsub{opacity:0} @container food-vis (min-width:460px){ [data-section="food"] .food-ladder{padding-right:212px} [data-section="food"] .food-vis-ladder .food-ladder{grid-auto-rows:minmax(min-content,112px)} [data-section="food"] .food-dock{position:absolute;left:calc(100% + 12px);top:50%;translate:0 -50%} [data-section="food"] .food-chip{white-space:nowrap} [data-section="food"] .food-rung:is(.is-drop,.is-hit) .food-rsub, :is(.rm,html:not(.js)) [data-section="food"] .food-rung[data-hit] .food-rsub{opacity:1} } /* Step 1's logged card: the full one (tablet and desktop) or the short one (phones, see the phone block) */ [data-section="food"] .food-short{display:none} [data-section="food"] .food-say .ar-col>.ab{max-width:none} /* The Food tab cards (PQ.cards.tabNutrition, PQ.cards.tabMeals): the app's Today's nutrition and Your meals */ [data-section="food"] .tn,[data-section="food"] .tm{font-family:var(--appfont);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-widget);padding:16px 16px 14px;color:var(--ink)} [data-section="food"] .tn-h,[data-section="food"] .tm-h{display:flex;align-items:center;gap:12px} [data-section="food"] .tn-h b,[data-section="food"] .tm-h b{flex:1;min-width:0;font:600 17px/1.2 var(--appfont)} [data-section="food"] .tn-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:var(--card);color:var(--green)} [data-section="food"] .tn-ic .i{width:20px;height:20px} [data-section="food"] .tn-kc{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:12px;font:400 15px/1.2 var(--appfont);color:var(--muted)} [data-section="food"] .tn-kc b{font:700 38px/1 var(--appfont);letter-spacing:-.02em;color:var(--ink)} [data-section="food"] .tn-kc em{font-style:normal;font-size:14px;text-align:right;line-height:1.25;padding-bottom:3px} [data-section="food"] .tn-bar,[data-section="food"] .tn-b{display:block;height:8px;margin-top:10px;border-radius:4px;background:var(--track);overflow:hidden} [data-section="food"] .tn-bar i,[data-section="food"] .tn-b i{display:block;height:100%;width:calc(var(--w) * 100%);border-radius:4px;background:var(--c,var(--green));transition:width .8s var(--ease)} [data-section="food"] .tn.pre .tn-bar i,[data-section="food"] .tn.pre .tn-b i{width:0} [data-section="food"] .tn-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:14px} [data-section="food"] .tn-tile{grid-column:span 2;min-width:0;padding:10px 11px 11px;border:1px solid var(--border);border-radius:14px} [data-section="food"] .tn-tile:nth-child(n+4){grid-column:span 3} [data-section="food"] .tn-l{display:block;font:400 14px/1.2 var(--appfont);color:var(--muted)} [data-section="food"] .tn-v{display:block;margin-top:3px;font:400 14px/1.2 var(--appfont);color:var(--muted);white-space:nowrap} [data-section="food"] .tn-v b{font:700 18px/1.2 var(--appfont);color:var(--ink)} [data-section="food"] .tn-b{height:5px;margin-top:8px} [data-section="food"] .tn-more{display:flex;align-items:center;justify-content:space-between;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--border);font:400 15px/1.2 var(--appfont);color:var(--muted)} [data-section="food"] .tn-more .i{width:17px;height:17px;color:var(--muted)} [data-section="food"] .tm-r{display:flex;align-items:center;gap:10px;padding:12px 0 10px;border-top:1px solid var(--border)} [data-section="food"] .tm-h+.tm-r{margin-top:10px} [data-section="food"] .tm-r>.i{flex:none;width:16px;height:16px;color:var(--muted)} [data-section="food"] .tm-b{flex:1;min-width:0} [data-section="food"] .tm-t{display:flex;align-items:baseline;justify-content:space-between;gap:10px} [data-section="food"] .tm-t b{font:600 17px/1.25 var(--appfont)} [data-section="food"] .tm-t span{font:600 16px/1.25 var(--appfont);color:var(--ink)} [data-section="food"] .tm-b small{display:block;margin-top:2px;font:400 14px/1.3 var(--appfont);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} [data-section="food"] .tm-p{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px} [data-section="food"] .tm-p .pill{padding:2px 9px;font-size:14px} /* 3 and 4: spare height spreads out (in step 4 the space reads as time passing) */ [data-section="food"] .food-vis-ask,[data-section="food"] .food-vis-teach{justify-content:space-evenly} /* 3. Sure? Logged. Not sure? It asks. */ [data-section="food"] .food-askgrp{display:flex;flex-direction:column;gap:10px} [data-section="food"] .food-acts{width:fit-content;max-width:100%;padding:4px 16px;background:var(--hero);border:1px solid var(--heroLine);border-radius:16px} [data-section="food"] .food-acts .acts{margin-top:0} /* 4. Fix it once. It sticks. The rung that now answers "brekkie" */ [data-section="food"] .food-stuck{margin-top:2px} [data-section="food"] .food-teach .ub{max-width:88%;text-wrap:balance} [data-section="food"] .food-later{display:flex;align-items:center;gap:12px;font-size:13px;line-height:1.3;color:var(--muted)} [data-section="food"] .food-later::before,[data-section="food"] .food-later::after{content:"";flex:1;height:1px;background:var(--line)} /* Narrow panels (phones and tablet): tighter step 1, wider bubbles */ @container food-vis (max-width:340px){ [data-section="food"] .food-say{gap:8px} [data-section="food"] .food-say .ub,[data-section="food"] .food-teach .ub{max-width:100%} [data-section="food"] .food-say .ab{padding:10px 12px 11px} [data-section="food"] .food-say .inset{margin-top:8px;padding:0 12px} [data-section="food"] .food-say .ir,[data-section="food"] .food-say .ft{padding:8px 0} [data-section="food"] .food-ways{gap:6px;flex-wrap:nowrap} [data-section="food"] .food-ways li{height:32px;gap:6px;padding:0 11px 0 10px;font-size:13px;white-space:nowrap} [data-section="food"] .food-ways .i{display:none} [data-section="food"] .food-vis-say .food-cap,[data-section="food"] .food-ways{display:none} } /* Deck pager (phones only) */ [data-section="food"] .food-pager{display:none} /* Then it all adds up in the Food tab */ [data-section="food"] .food-tab{margin-top:48px} [data-section="food"] .food-lead{text-align:center;font:600 18px/1.35 var(--body);letter-spacing:-.01em;color:var(--ink)} [data-section="food"] .food-widgets{display:grid;gap:16px;max-width:640px;margin:16px auto 0} [data-section="food"] .food-w{min-width:0} [data-section="food"] .food-w>.mc{height:100%;box-shadow:var(--shadow-sm)} [data-section="food"] .food-more{margin-top:14px;text-align:center;color:var(--muted);font-size:15px;text-wrap:balance} [data-section="food"] .food-kick{margin-top:32px} @media (min-width:1024px){ [data-section="food"] .food-widgets{max-width:900px;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} [data-section="food"] .food-tab{margin-top:64px} [data-section="food"] .food-lead{font-size:20px} [data-section="food"] .food-more{font-size:16px} [data-section="food"] .food-kick{margin-top:40px} } /* Phones: the steps become a scroll-snap deck that bleeds to the screen edges */ @media (max-width:719px){ [data-section="food"] .food-steps{display:flex;align-items:flex-start;gap:12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--gutter));padding:2px var(--gutter) 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch} [data-section="food"] .food-steps::-webkit-scrollbar{display:none} /* number dot beside the title; top aligned, each card only as tall as its own content */ [data-section="food"] .food-step{flex:0 0 calc((100% + 2 * var(--gutter)) * .86);scroll-snap-align:center;scroll-snap-stop:always;display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:12px;padding:16px 14px 14px;box-shadow:var(--shadow-sm)} [data-section="food"] .food-step[data-reveal]{opacity:1;transform:none} [data-section="food"] .food-top{grid-area:1/1;margin:0} [data-section="food"] .food-top .food-again{display:none!important} [data-section="food"] .food-t{grid-area:1/2;align-self:center;font-size:18px;line-height:1.15} [data-section="food"] .food-p{grid-column:1/-1;margin-top:10px;font-size:15px;line-height:1.45} [data-section="food"] .food-vis{grid-column:1/-1;margin-top:12px;padding:10px;gap:10px;border-radius:18px} /* step 2, the ladder, tighter */ [data-section="food"] .food-ladder{gap:4px} [data-section="food"] .food-rung{grid-template-columns:20px minmax(0,1fr);column-gap:8px;padding:6px 10px 7px 8px} [data-section="food"] .food-rn{width:20px;height:20px} [data-section="food"] .food-rname{min-height:20px;line-height:1.2;gap:6px} [data-section="food"] .food-rname .i{width:15px;height:15px} [data-section="food"] .food-l2{margin-top:1px} [data-section="food"] .food-rsub,[data-section="food"] .food-src{line-height:1.25} /* the ladder's source lines are left to tablet and desktop */ [data-section="food"] .food-src{display:none} [data-section="food"] .food-chip{padding:2px 9px;line-height:1.25} /* pager: dots and counter on the left, the replay on the right while step 2 is showing */ [data-section="food"] .food-pager{display:flex;align-items:center;gap:4px;margin:0 0 0 -2px} [data-section="food"] .food-again-pg{margin-left:auto;white-space:nowrap;font-size:14px} [data-section="food"] .food-dots{display:flex} [data-section="food"] .food-dot{appearance:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent} [data-section="food"] .food-dot::before{content:"";display:block;width:8px;height:8px;border-radius:4px;background:#807F78;transition:width .25s var(--ease),background .25s} [data-section="food"] .food-dot[aria-current]::before{width:22px;background:var(--ink)} [data-section="food"] .food-count{min-width:44px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums} [data-section="food"] .food-count b{color:var(--ink);font-weight:600} [data-section="food"] .food-tab{margin-top:24px} [data-section="food"] .food-lead{font-size:16px} /* phones: a compact Today's nutrition (kcal and its bar, then protein, carbs and fat); Your meals stays on desktop */ [data-section="food"] .food-widgets{margin-top:10px;gap:0} [data-section="food"] .food-w-nut .tn{padding:12px 12px 12px} [data-section="food"] .food-w-nut .tn-h{margin-bottom:0} [data-section="food"] .food-w-nut .tn-ic{width:30px;height:30px;border-radius:10px} [data-section="food"] .food-w-nut .tn-ic .i{width:16px;height:16px} [data-section="food"] .food-w-nut .tn-h b{font-size:16px} [data-section="food"] .food-w-nut .tn-kc{margin-top:8px} [data-section="food"] .food-w-nut .tn-bar{margin-top:8px} [data-section="food"] .food-w-nut .tn-kc b{font-size:28px} [data-section="food"] .food-w-nut .tn-tile:nth-child(n+4),[data-section="food"] .food-w-nut .tn-more{display:none} [data-section="food"] .food-w-nut .tn-tiles{margin-top:10px} [data-section="food"] .food-w-nut .tn-tile{padding:8px 9px 9px} [data-section="food"] .food-w-nut .tn-v b{font-size:15px} /* phones: the short logged card (a food a line, no band, no Done) in step 1 */ [data-section="food"] .food-full{display:none} [data-section="food"] .food-short{display:block} [data-section="food"] .food-short .fc-tiles>span{width:36px;height:36px;margin-left:-12px} [data-section="food"] .food-short .fc-t{font-size:18px} [data-section="food"] .food-short .fc-s{font-size:13px;white-space:nowrap} [data-section="food"] .food-short .fc-mac{gap:5px;margin-top:10px} [data-section="food"] .food-short .fc-mac>div{padding:6px 6px 7px} [data-section="food"] .food-short .fc-mac .l{font-size:13px;gap:3px;letter-spacing:-.01em} [data-section="food"] .food-short .fc-mac .l::before{width:6px;height:6px} [data-section="food"] .food-short .fc-mac .v{font-size:18px} [data-section="food"] .food-short .fc-mac .v small{font-size:13px} [data-section="food"] .food-short .fc-mac .kc .v{font-size:24px} [data-section="food"] .food-short .fc.compact .fc-row{margin-top:6px} [data-section="food"] .food-short .fc.compact .fc-ic{width:30px;height:30px} [data-section="food"] .food-short .fc.compact .fc-ic .i{width:17px;height:17px} [data-section="food"] .food-short .ar-who{margin-bottom:4px} [data-section="food"] .food-more{margin-top:10px} [data-section="food"] .food-kick{margin-top:20px} } /* Reduced motion: still end state, no replay */ .rm [data-section="food"] .food-again{display:none!important} /* ========================================================================== SECTION: Journey (#journey) ========================================================================== */ /* ---------- Journey: Day 1 to month 3 (#journey) ---------- Phones: a 2px rail on the left edge that fills lime to clay as you scroll, content indented 28px. 720px and up: a label column beside the content. 1100px and up: the timeline takes the left 7 of 12 columns and the sticky "What Ari knows" notebook the right 4. */ [data-section="journey"]{--jr-in:28px;--jr-dy:15px;--jr-gap:44px} [data-section="journey"] .jr-track{--jr-fill:0} [data-section="journey"] .jr-head{margin-bottom:28px} /* Grid: one column until 1100px */ [data-section="journey"] .jr-grid{position:relative} [data-section="journey"] .jr-tl{position:relative;min-width:0} [data-section="journey"] .jr-tag{margin:0 0 22px} [data-section="journey"] .jr-tag .tag{border:1px solid var(--border)} /* ---------- The rail ---------- */ [data-section="journey"] .jr-rail{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:var(--jr-gap)} [data-section="journey"] .jr-track{position:absolute;left:6px;top:var(--jr-dy);width:2px;height:0;border-radius:2px;background:var(--line);pointer-events:none} [data-section="journey"] .jr-track i{position:absolute;inset:0;border-radius:2px;background:linear-gradient(#8DB35B,#D98A6C);-webkit-clip-path:inset(0 0 calc(100% - var(--jr-fill) * 100%) 0);clip-path:inset(0 0 calc(100% - var(--jr-fill) * 100%) 0)} [data-section="journey"] .jr-stop{position:relative;padding-left:var(--jr-in);min-width:0} [data-section="journey"] .jr-dot{position:absolute;left:0;top:calc(var(--jr-dy) - 7px);z-index:1;width:14px;height:14px;border-radius:50%;background:var(--bg);border:3px solid var(--line);transition:background .4s,border-color .4s,transform .4s var(--spring)} [data-section="journey"] .jr-stop.is-lit .jr-dot{background:var(--lime);border-color:#8DB35B;transform:scale(1.15)} [data-section="journey"] .jr-stop[data-stop="6"].is-lit .jr-dot{background:#F2BBA2;border-color:var(--clay)} /* ---------- A stop ---------- */ [data-section="journey"] .jr-when{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px} [data-section="journey"] .jr-label{font:400 26px/1.15 var(--serif);font-style:italic;letter-spacing:-.01em;color:var(--terra)} [data-section="journey"] .jr-date{font:500 13px/1.3 var(--body);color:var(--muted);font-variant-numeric:tabular-nums} [data-section="journey"] .jr-what{min-width:0} [data-section="journey"] .jr-title{margin-top:4px;font-size:18px;line-height:1.2;letter-spacing:-.02em} [data-section="journey"] .jr-line{margin-top:4px;font-size:15px;line-height:1.45;color:var(--muted);max-width:520px;text-wrap:pretty} /* The white tray the chat snippet sits in */ [data-section="journey"] .jr-tray{margin-top:14px;max-width:480px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow)} [data-section="journey"] .jr-tray.chat>*+*{margin-top:12px} [data-section="journey"] .jr-tray .ub{max-width:88%} [data-section="journey"] .jr-tray .ab{overflow:hidden} /* Day 1's plan card: thumbs under Ari's reply, as in the app */ [data-section="journey"] .jr-tray[data-snip="plan"] .ar-fb{display:flex} [data-section="journey"] .jr-tray .ab .bul{gap:6px;margin-top:8px} [data-section="journey"] .jr-tray .ab .bul li{line-height:1.4} /* Avatars in a stop only move once the stop has lit */ [data-section="journey"] .jr-stop:not(.is-lit) .jr-tray .av *{animation-play-state:paused} /* ...and, as in the app, only the newest one moves: a stop with a lit stop after it keeps its Ari still */ [data-section="journey"] .jr-stop.is-lit:has(~ .jr-stop.is-lit) .jr-tray .av *{animation-play-state:paused} /* Week 2: the Your week strip under the card (1024px and up) */ /* The strip is the app's Training day strip (PQ.cards.trainWeek) on a small lime tile; the picked day is the dark green tile */ [data-section="journey"] .jr-strip{max-width:480px;margin-top:12px;padding:12px 12px 12px;border-radius:20px;background:linear-gradient(160deg,#F7FAF1,#EAF2DD);border:1px solid var(--heroLine)} [data-section="journey"] .tr-wk{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding-bottom:20px} [data-section="journey"] .tr-d{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;min-height:62px;padding:7px 0 6px;border-radius:14px;color:var(--ink);font-family:var(--appfont)} [data-section="journey"] .tr-d.is-sel{background:var(--green)} [data-section="journey"] .tr-l{font:500 13px/1.25 var(--appfont);color:var(--muted);transition:color .3s} [data-section="journey"] .tr-n{font:600 19px/1.2 var(--appfont);font-variant-numeric:tabular-nums;color:var(--ink);transition:color .3s} [data-section="journey"] .tr-d.is-rest .tr-l,[data-section="journey"] .tr-d.is-rest .tr-n{color:#6F6E68} [data-section="journey"] .tr-d.is-rest .tr-n{font-weight:500} [data-section="journey"] .tr-d.is-sel .tr-l,[data-section="journey"] .tr-d.is-sel .tr-n,[data-section="journey"] .tr-d.is-sel .tr-mk{color:#fff} [data-section="journey"] .tr-mk{display:grid;place-items:center;height:14px;margin-top:2px;color:var(--green);transition:opacity .2s} [data-section="journey"] .tr-mk .i{width:15px;height:15px;stroke-width:2} [data-section="journey"] .tr-mk s{display:block;width:6px;height:6px;border-radius:50%;background:var(--green);text-decoration:none} [data-section="journey"] .tr-d.is-sel .tr-mk s{background:#fff} [data-section="journey"] .tr-d em{position:absolute;left:-4px;right:-4px;bottom:-19px;text-align:center;font:600 13px/1 var(--body);font-style:normal;color:var(--onAmber);opacity:1;transition:opacity .3s} [data-section="journey"] .tr-d em.jr-pre{opacity:0} [data-section="journey"] .jr-slide{position:absolute;z-index:2;width:5px;height:5px;border-radius:50%;background:var(--green);pointer-events:none} /* Month 1: the "Your journey" widget is its own tray */ [data-section="journey"] .jr-memo{padding:18px} [data-section="journey"] .jr-memo .mc-head{margin-bottom:12px} [data-section="journey"] .jr-memo-h{font:700 20px/1.2 var(--body);letter-spacing:-.4px} [data-section="journey"] .jr-memo-by{margin-top:2px;font-size:13px;color:var(--muted)} [data-section="journey"] .jr-memo-n{margin-top:12px;font-weight:600} [data-section="journey"] .jr-note{margin-top:6px;line-height:1.5} [data-section="journey"] .jr-more{display:none;margin-top:2px} [data-section="journey"] .jr-memo-f{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;line-height:1.45;color:var(--muted)} /* The one-line stamp under each stop */ [data-section="journey"] .jr-stamp{display:flex;align-items:flex-start;gap:8px;width:fit-content;max-width:100%;margin-top:12px;font:400 13px/1.4 var(--body);color:var(--ink)} [data-section="journey"] .jr-stamp-av{flex:none;width:18px;height:18px;margin-top:0} [data-section="journey"] .jr-stamp-av .av{display:block} [data-section="journey"] .jr-stamp-t{min-width:0;text-wrap:pretty} [data-section="journey"] .jr-stamp b{font-weight:600;color:var(--onDone)} /* The copy that flies to the notebook */ [data-section="journey"] .jr-ghost{position:fixed;z-index:60;margin:0;transform-origin:0 0;pointer-events:none;padding:6px 12px 6px 8px;border-radius:14px;background:var(--surface);border:1px solid var(--heroLine);box-shadow:var(--shadow);transition:none!important;white-space:nowrap} /* ---------- The notebook (1100px and up) ---------- */ [data-section="journey"] .jr-nb{display:none} [data-section="journey"] .jr-nb-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-widget);padding:20px 20px 18px;box-shadow:var(--shadow)} [data-section="journey"] .jr-nb-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)} [data-section="journey"] .jr-nb-av{position:relative;flex:none;width:32px;height:32px} [data-section="journey"] .jr-nb-l{position:absolute;inset:0;opacity:0;transition:opacity .2s} [data-section="journey"] .jr-nb-l.is-on{opacity:1} [data-section="journey"] .jr-nb-l .av{display:block} [data-section="journey"] .jr-nb-t{font-size:20px;line-height:1.2;letter-spacing:-.02em} [data-section="journey"] .jr-nb-list{list-style:none;margin:0;padding:0} /* Entries arrive one by one (is-shown while the copy flies in, is-in once stamped); until then one quiet line */ [data-section="journey"] .jr-nb-empty{padding:14px 0 4px;font:500 15px/1.35 var(--body);color:var(--muted)} [data-section="journey"] .jr-nb-card.has-in .jr-nb-empty{display:none} [data-section="journey"] .jr-nb-e{display:none;align-items:flex-start;gap:12px;min-height:62px;padding:12px 0;border-bottom:1px dashed var(--line)} [data-section="journey"] .jr-nb-e.is-shown,[data-section="journey"] .jr-nb-e.is-in{display:flex} [data-section="journey"] .jr-nb-in{flex:1;min-width:0;display:grid;gap:2px;visibility:hidden;opacity:0} [data-section="journey"] .jr-nb-in time{font:400 13px/1.3 var(--body);color:var(--muted);font-variant-numeric:tabular-nums} [data-section="journey"] .jr-nb-x{font:400 16px/1.3 var(--appfont);color:var(--ink)} /* the app's pencil button: a grey circle (decorative) */ [data-section="journey"] .jr-nb-del{flex:none;box-sizing:border-box;width:32px;height:32px;padding:8px;border-radius:50%;background:var(--card);color:var(--muted);stroke-width:2;visibility:hidden;opacity:0} [data-section="journey"] .jr-nb-hi{margin:14px 0 0;font:400 20px/1.25 Georgia,"Times New Roman",serif;color:var(--ink)} [data-section="journey"] .jr-nb-sub{margin:6px 0 0;font:400 14px/1.4 var(--appfont);color:var(--muted)} [data-section="journey"] .jr-nb-teach{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin-top:12px;border-radius:14px;background:var(--green);color:#fff;font:600 16px/1 var(--appfont)} [data-section="journey"] .jr-nb-teach .i{width:17px;height:17px;stroke-width:2.2} [data-section="journey"] .jr-nb-sec{margin:18px 0 0;font:600 13px/1.2 var(--appfont);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} [data-section="journey"] .jr-nb-e.is-in .jr-nb-in,[data-section="journey"] .jr-nb-e.is-in .jr-nb-del{visibility:visible;opacity:1} [data-section="journey"] .jr-nb-foot{display:none;margin-top:14px;font-size:13px;line-height:1.45;color:var(--muted)} [data-section="journey"] .jr-nb-foot a{color:var(--green);font-weight:600;text-underline-offset:2px} [data-section="journey"] .jr-nb-card.is-done .jr-nb-foot{display:block} /* ---------- Close ---------- */ [data-section="journey"] .jr-end{margin-top:64px} /* The closer never outranks a section title */ [data-section="journey"] .jr-close{font-size:var(--fs-h2);line-height:1.02} [data-section="journey"] .jr-done{align-items:center} [data-section="journey"] .jr-cta{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:16px} [data-section="journey"] .jr-cta-line{color:var(--muted);font-size:var(--fs-body);text-wrap:balance} [data-section="journey"] .jr-cta-tick{display:inline-block;width:18px;height:18px;margin-right:6px;vertical-align:-3px;color:var(--green);stroke-width:2.4} /* ---------- Phones ---------- */ @media (max-width:719px){ /* Shorter on phones: Week 1 and Month 2 (the trip) are left to Try it, and the Month 1 widget loses its header row and footer line */ [data-section="journey"] .jr-stop[data-stop="2"],[data-section="journey"] .jr-stop[data-stop="5"],[data-section="journey"] .jr-memo .mc-head,[data-section="journey"] .jr-memo-f{display:none} [data-section="journey"]{--jr-gap:32px} [data-section="journey"] .jr-head{margin-bottom:22px} [data-section="journey"] .jr-tag{margin-bottom:16px} [data-section="journey"] .jr-title{margin-top:2px} /* Bubble and card run the full width of the tray (the stamp carries Ari) */ [data-section="journey"] .jr-tray{margin-top:12px;padding:12px;border-radius:22px} [data-section="journey"] .jr-tray.chat{padding:0;background:none;border:0;border-radius:0;box-shadow:none} [data-section="journey"] .jr-tray.chat>*+*{margin-top:10px} [data-section="journey"] .jr-tray .ar{gap:0} [data-section="journey"] .jr-tray .ub{max-width:92%} /* Inert cards, so no 44px targets: a little tighter than the app */ [data-section="journey"] .jr-tray .ab{padding:11px 12px 12px} [data-section="journey"] .jr-tray .inset{margin-top:8px;padding:0 11px} [data-section="journey"] .jr-tray .ir{padding:8px 0} [data-section="journey"] .jr-tray .note{margin-top:6px} [data-section="journey"] .jr-tray .ab-sub{margin-top:0} [data-section="journey"] .jr-tray .acts{margin-top:4px} [data-section="journey"] .jr-tray .act{min-height:32px} [data-section="journey"] .jr-tray .cbtns{margin-top:10px} [data-section="journey"] .jr-tray .cbtn{min-height:38px;padding:0 16px} [data-section="journey"] .jr-memo{padding:14px} [data-section="journey"] .jr-memo .mc-head{gap:10px;margin-bottom:10px} [data-section="journey"] .jr-memo .badge{width:32px;height:32px} [data-section="journey"] .jr-memo .badge .i{width:17px;height:17px} [data-section="journey"] .jr-memo .mc-title{font-size:16px} [data-section="journey"] .jr-memo-h{font-size:18px} [data-section="journey"] .jr-memo-n{margin-top:8px} [data-section="journey"] .jr-note{margin-top:4px} [data-section="journey"] .jr-note:not(.is-open){display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} [data-section="journey"] .jr-notew{position:relative} [data-section="journey"] .jr-more{display:inline-flex} [data-section="journey"] .jr-more[aria-expanded="false"]{position:absolute;right:-2px;bottom:-11px;padding:0 2px 0 48px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 42%) center/100% 24px no-repeat} [data-section="journey"] .jr-memo-f{margin-top:14px;padding-top:10px} [data-section="journey"] .jr-notew.is-open+.jr-memo-f{margin-top:2px} [data-section="journey"] .jr-stamp{margin-top:10px} [data-section="journey"] .jr-end{margin-top:36px} } /* ---------- 720px and up: label column beside the content ---------- */ @media (min-width:720px){ [data-section="journey"]{--jr-in:44px;--jr-dy:22px;--jr-gap:64px} [data-section="journey"] .jr-head{margin-bottom:40px} [data-section="journey"] .jr-tl{max-width:800px;margin:0 auto} [data-section="journey"] .jr-tag{padding-left:var(--jr-in)} [data-section="journey"] .jr-stop{display:grid;grid-template-columns:132px minmax(0,1fr);gap:0 24px} [data-section="journey"] .jr-side{display:contents} [data-section="journey"] .jr-when{display:block;grid-column:1;grid-row:1 / span 2} [data-section="journey"] .jr-copy{grid-column:2;grid-row:1} [data-section="journey"] .jr-what{grid-column:2;grid-row:2} [data-section="journey"] .jr-label{display:block;font-size:40px;line-height:1.05} [data-section="journey"] .jr-date{display:block;margin-top:4px} [data-section="journey"] .jr-title{margin-top:6px;font-size:22px} [data-section="journey"] .jr-line{margin-top:6px;font-size:16px} [data-section="journey"] .jr-tray{margin-top:18px} [data-section="journey"] .jr-stamp{margin-top:14px} [data-section="journey"] .jr-end{margin-top:96px} [data-section="journey"] .jr-cta{margin-top:20px} } /* ---------- 1100px and up: timeline left 7 columns, notebook right 4 ---------- */ /* 1100px and up: each stop's words sit in the side column, its card (up to 560px) beside them, and the sticky notebook takes the last 3 of 12 columns */ @media (min-width:1100px){ [data-section="journey"]{--jr-gap:72px} [data-section="journey"] .jr-head{margin-bottom:56px} [data-section="journey"] .jr-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start} [data-section="journey"] .jr-tl{grid-column:1 / span 9;max-width:none;margin:0} [data-section="journey"] .jr-stop{grid-template-columns:clamp(210px,20vw,280px) minmax(0,1fr);gap:0 32px} [data-section="journey"] .jr-side{display:block;grid-column:1;grid-row:1} [data-section="journey"] .jr-when,[data-section="journey"] .jr-copy{grid-column:auto;grid-row:auto} [data-section="journey"] .jr-what{grid-column:2;grid-row:1;padding-top:6px} [data-section="journey"] .jr-label{font-size:44px} [data-section="journey"] .jr-title{margin-top:14px} [data-section="journey"] .jr-line{font-size:16px;line-height:1.5} [data-section="journey"] .jr-tray,[data-section="journey"] .jr-strip{max-width:560px} [data-section="journey"] .jr-tray{margin-top:0} [data-section="journey"] .jr-nb{display:block;grid-column:10 / span 3;position:-webkit-sticky;position:sticky;top:120px;margin-top:2px} [data-section="journey"] .jr-nb-card{padding:18px 18px 16px} [data-section="journey"] .jr-nb-t{font-size:19px} [data-section="journey"] .jr-nb-x{font-size:14px} [data-section="journey"] .jr-end{margin-top:88px} /* A step below the section titles, so Control's "She never forgets." owns the next screen */ [data-section="journey"] .jr-close{font-size:clamp(44px,3.3vw,48px)} } /* ---------- Reduced motion: no transitions on anything here ---------- */ @media (prefers-reduced-motion:reduce){ [data-section="journey"] .jr-dot,[data-section="journey"] .jr-nb-l,[data-section="journey"] .jr-nb-foot{transition:none} } /* ========================================================================== SECTION: Control (#control) ========================================================================== */ /* Control (#control): privacy and control. Ari is part of Physiqo (27 Oct): no switch. One #EFEEE8 card. Left: a white panel in the look of the app's "Ari and your data" card, the vector Ari beside "Ari, your coach / Part of your membership", then the three things she is sent and the never-used line. Right: the three points, one under another on desktop and tablet, a tight list on phones. */ [data-section="control"]{--ctl-muted:var(--muted)} [data-section="control"] .ctl-head{margin-bottom:0} [data-section="control"] .ctl-head .sub{text-wrap:balance} /* ---------- The card ---------- */ [data-section="control"] .ctl-card{position:relative;max-width:980px;margin:48px auto 0;padding:24px;display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:24px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-widget)} [data-section="control"] .ctl-lock{position:absolute;left:50%;top:-20px;margin-left:-20px;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-badge);background:var(--surface);border:1px solid var(--border);color:var(--green);box-shadow:var(--shadow-sm)} [data-section="control"] .ctl-lock .i{width:19px;height:19px;stroke-width:2} /* ---------- Left: the app's Ari card (Profile > Ari and your data: "Ari, your coach / Part of your membership") ---------- */ /* Ari is always on, so there is no switch and no on or off state here: just who she is and what she is sent. */ [data-section="control"] .ctl-panel{position:relative;display:flex;flex-direction:column;min-width:0;padding:16px 14px 14px;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-sm);font-family:var(--appfont)} [data-section="control"] .ctl-who{display:flex;align-items:center;gap:14px} [data-section="control"] .ctl-stage{position:relative;flex:none;display:grid;place-items:center;width:72px;height:72px;border-radius:18px;overflow:hidden;background:var(--hero);box-shadow:inset 0 0 0 1px var(--heroLine)} [data-section="control"] .ctl-glow{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:radial-gradient(closest-side,rgba(214,235,181,1),rgba(214,235,181,.5) 45%,rgba(214,235,181,0))} [data-section="control"] .ctl-avs{position:relative;display:block;width:60px;height:60px;margin-top:4px} [data-section="control"] .ctl-avs .av{position:absolute;left:0;top:0;width:100%;height:100%} /* An off-screen card keeps still */ [data-section="control"] .ctl-card.ctl-away .av *{animation-play-state:paused} [data-section="control"] .ctl-name b{display:block;font:700 19px/1.2 var(--appfont);letter-spacing:-.015em;color:var(--ink)} [data-section="control"] .ctl-name span{display:block;margin-top:2px;font:400 15px/1.3 var(--appfont);color:var(--muted)} [data-section="control"] .ctl-lead{margin:16px 2px 8px;font:400 15px/1.35 var(--appfont);color:var(--muted)} [data-section="control"] .ctl-lead-p{display:none} [data-section="control"] .ctl-share{list-style:none;margin:0;padding:0;display:grid;gap:8px} [data-section="control"] .ctl-share li{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 12px;border:1px solid var(--border);border-radius:14px;background:var(--surface)} [data-section="control"] .ctl-si{flex:none;display:grid;place-items:center;color:var(--green)} [data-section="control"] .ctl-si .i{width:22px;height:22px} [data-section="control"] .ctl-st{min-width:0;font:400 15px/1.25 var(--appfont);color:var(--ink);text-wrap:pretty} [data-section="control"] .ctl-st small{display:block;margin-top:1px;font-size:13px;color:var(--muted)} [data-section="control"] .ctl-fine{margin:12px 2px 0;font:400 14px/1.4 var(--appfont);color:var(--muted);text-wrap:pretty} /* ---------- Right: the three points, one under another ---------- */ [data-section="control"] .ctl-points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;min-width:0} [data-section="control"] .ctl-pt{position:relative;min-width:0;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;padding:20px 12px 20px 8px;border-bottom:1px solid var(--line);text-wrap:pretty} [data-section="control"] .ctl-pt:last-child{border-bottom:0} [data-section="control"] .ctl-ic{grid-row:1 / span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-badge);background:var(--surface);color:var(--green)} [data-section="control"] .ctl-ic .i{width:21px;height:21px} [data-section="control"] .ctl-pt h3{align-self:end;font:700 19px/1.2 var(--display);letter-spacing:-.02em;text-wrap:balance} [data-section="control"] .ctl-pt p{grid-column:2;margin-top:6px;font-size:16px;line-height:1.5;color:var(--ctl-muted);text-wrap:pretty} /* Arriving from the journey's "whenever you like": the delete point lights up once */ [data-section="control"] .ctl-pt::before{content:"";position:absolute;inset:6px;border-radius:16px;background:var(--hero);box-shadow:inset 0 0 0 1px var(--heroLine);opacity:0;transition:opacity .6s var(--ease);pointer-events:none;z-index:0} [data-section="control"] .ctl-pt>*{position:relative;z-index:1} [data-section="control"] .ctl-pt.ctl-lit::before{opacity:1;transition-duration:.25s} /* ---------- Tablet: the card above the points ---------- */ @media (min-width:720px) and (max-width:1023px){ [data-section="control"] .ctl-card{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;padding:20px;margin-top:44px} [data-section="control"] .ctl-pt{padding:16px 8px 16px 4px;column-gap:14px} [data-section="control"] .ctl-pt h3{font-size:18px} [data-section="control"] .ctl-pt p{margin-top:3px;font-size:15px;line-height:1.45} [data-section="control"] .ctl-pt::before{inset:4px -6px} } /* ---------- Phones: the Ari card first, then a tight list ---------- */ @media (max-width:719px){ /* Shorter on phones: tighter padding, the sub kept for screen readers only */ [data-section="control"].sec{padding:30px 0} [data-section="control"] .ctl-head .sub{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} [data-section="control"] .ctl-card{grid-template-columns:minmax(0,1fr);gap:10px;padding:10px;margin-top:20px} /* the decorative lock tile half off the card read as a stray button: on phones it stays out */ [data-section="control"] .ctl-lock{display:none} [data-section="control"] .ctl-panel{padding:12px 12px 12px;border-radius:16px} [data-section="control"] .ctl-who{gap:12px} [data-section="control"] .ctl-stage{width:56px;height:56px;border-radius:15px} [data-section="control"] .ctl-glow{width:96px;height:96px;margin:-48px 0 0 -48px} [data-section="control"] .ctl-avs{width:48px;height:48px;margin-top:3px} [data-section="control"] .ctl-name b{font-size:17px} [data-section="control"] .ctl-name span{font-size:14px} /* the three things she is sent: one sentence on phones (the tiles are for tablet and desktop) */ [data-section="control"] .ctl-lead,[data-section="control"] .ctl-share{display:none} [data-section="control"] .ctl-lead-p{display:block;margin:10px 2px 0;font:400 14px/1.4 var(--appfont);color:var(--ink)} [data-section="control"] .ctl-fine{margin-top:6px;font-size:13px;line-height:1.35} [data-section="control"] .ctl-points{gap:8px;padding:2px 4px 4px} [data-section="control"] .ctl-pt{display:block;padding:0;border:0;font-size:14px;line-height:1.42;color:var(--ctl-muted)} [data-section="control"] .ctl-ic{display:none} /* Title and line run together as one paragraph */ [data-section="control"] .ctl-pt h3{display:inline;font:700 15px/1.3 var(--body);letter-spacing:-.01em;color:var(--ink)} [data-section="control"] .ctl-pt p{display:inline;margin:0;font-size:14px;line-height:1.42} [data-section="control"] .ctl-pt::before{inset:-6px -8px;border-radius:12px} } /* ========================================================================== SECTION: FAQ (#faq) ========================================================================== */ /* FAQ (#faq): questions are the visitor's own black chat bubbles (the ), answers are plain white cards in site voice. Native
, all closed by default. Tap row 48px (4px transparent padding around a 40px bubble), 10px between bubbles. */ [data-section="faq"] .faq-head{margin-bottom:20px} [data-section="faq"] .faq-list{display:flex;flex-direction:column;gap:2px} [data-section="faq"] .faq-item{display:block;margin:0} /* The question: a 48px tap row holding the user bubble, right aligned, up to 85% wide */ [data-section="faq"] .faq-s{display:block;width:fit-content;max-width:85%;margin-left:auto;padding:4px 0;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border-radius:16px} [data-section="faq"] .faq-s::-webkit-details-marker{display:none} [data-section="faq"] .faq-s::marker{content:""} [data-section="faq"] .faq-s:focus{outline:none} [data-section="faq"] .faq-s:focus-visible{outline:none} [data-section="faq"] .faq-s:focus-visible .faq-q{outline:3px solid var(--green);outline-offset:3px} [data-section="faq"] .faq-q{display:flex;align-items:center;gap:10px;min-height:40px;padding:9px 12px 9px 14px;background:var(--userBubble);color:var(--userInk);border-radius:18px 18px 5px 18px;font:400 15px/1.4 var(--body);letter-spacing:0;text-align:left;overflow-wrap:anywhere;transform-origin:100% 100%;transition:background-color .2s,transform .18s var(--ease)} [data-section="faq"] .faq-qt{min-width:0;text-wrap:balance} [data-section="faq"] .faq-chev{width:16px;height:16px;color:var(--userInk);stroke-width:2.2;opacity:.8;transition:transform .2s var(--ease),opacity .2s} [data-section="faq"] .faq-item[open] .faq-chev{transform:rotate(180deg);opacity:1} [data-section="faq"] .faq-s:active .faq-q{transform:scale(.97)} @media (hover:hover) and (pointer:fine){ [data-section="faq"] .faq-s:hover .faq-q{background:#DCE9C5} [data-section="faq"] .faq-s:hover .faq-chev{opacity:1} [data-section="faq"] .faq-item:not([open]) .faq-s:hover .faq-chev{transform:translateY(2px)} } /* The answer: a plain white card in site voice, left aligned under its question */ [data-section="faq"] .faq-a{width:fit-content;max-width:92%;margin:4px 0 12px;padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-widget);color:var(--ink);font:400 15px/1.5 var(--body);text-align:left;text-wrap:pretty} [data-section="faq"] .faq-item:last-child .faq-a{margin-bottom:0} [data-section="faq"] .faq-item[open] .faq-a{animation:faq-in .22s var(--ease) both} @keyframes faq-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} [data-section="faq"] .faq-a p+p{margin-top:8px} [data-section="faq"] .faq-a b{font-weight:600} [data-section="faq"] .faq-a .bul{margin-top:8px;gap:5px} [data-section="faq"] .faq-a .bul li::before{flex:none} [data-section="faq"] .faq-a .faq-dl{margin:2px 0 -10px} [data-section="faq"] .faq-a .tlink{min-height:44px;font-size:15px} /* "how much is it": the three plans, as the app names them (Monthly, 3 months, 12 months), then the fine print */ [data-section="faq"] .faq-plans{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px} [data-section="faq"] .faq-plans li{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:12px;row-gap:1px;padding:9px 12px;border-radius:14px;background:var(--bg);border:1px solid var(--border)} [data-section="faq"] .faq-plans b{font-weight:600;white-space:nowrap} [data-section="faq"] .faq-plans span{text-align:right;white-space:nowrap} [data-section="faq"] .faq-plans small{grid-column:1/-1;display:block;font-size:13px;line-height:1.35;color:var(--muted)} [data-section="faq"] .faq-a .faq-fine{margin-top:10px;font-size:13px;line-height:1.45;color:var(--muted)} /* Footer line */ [data-section="faq"] .faq-more{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:5px;margin-top:6px;color:var(--muted);font-size:15px;line-height:1.4;text-align:center} [data-section="faq"] .faq-more a{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:rgba(27,27,24,.3);text-underline-offset:3px;transition:text-decoration-color .2s} [data-section="faq"] .faq-more a:hover{text-decoration-color:currentColor} /* Tablet and desktop: the thread sits in a soft tile, like a chat window, so the right-aligned bubbles read as a conversation rather than a column hugging one edge of the 720 column */ @media (min-width:720px){ [data-section="faq"] .faq-head{margin-bottom:28px} [data-section="faq"] .faq-list{gap:4px;max-width:600px;margin:0 auto;padding:24px;background:var(--card);border-radius:var(--r-tile)} [data-section="faq"] .faq-q{padding:9px 14px 9px 16px} [data-section="faq"] .faq-a{max-width:88%;padding:18px 22px;margin-bottom:14px} [data-section="faq"] .faq-more{margin-top:20px} } @media (min-width:1024px){ [data-section="faq"] .faq-list{padding:28px 28px 24px} } /* Windows high contrast: keep the bubbles and cards outlined */ @media (forced-colors:active){ [data-section="faq"] .faq-q,[data-section="faq"] .faq-a,[data-section="faq"] .faq-list{border:1px solid CanvasText} [data-section="faq"] .faq-s:focus-visible .faq-q{outline-color:Highlight} } /* Reduced motion: the answer is simply there, the chevron flips without a turn */ @media (prefers-reduced-motion:reduce){ [data-section="faq"] .faq-item[open] .faq-a{animation:none} [data-section="faq"] .faq-chev,[data-section="faq"] .faq-q{transition:none} } .rm [data-section="faq"] .faq-item[open] .faq-a{animation:none} .rm [data-section="faq"] .faq-chev,.rm [data-section="faq"] .faq-q{transition:none} /* ========================================================================== SECTION: Finale (#join) ========================================================================== */ /* ---------- Finale: Be first through the door (#join) ---------- The dark card Jake loves, kept as it was: #1B1B18, 40px radius, terracotta glow from above, masked dot field, big 3D Ari over a white Bricolage headline, lime button, translucent field. The gap above comes from the FAQ's bottom padding; the card sits 24px above the footer on phones. */ [data-section="finale"]{padding-top:0;padding-bottom:24px} [data-section="finale"] .fin-card{position:relative;isolation:isolate;overflow:hidden;border-radius:40px;background:#1B1B18;color:#fff;padding:48px 20px 40px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 80px -48px rgba(27,27,24,.6)} /* Background: the terracotta glow from above and the masked dot field */ [data-section="finale"] .fin-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;overflow:hidden} [data-section="finale"] .fin-glow{position:absolute;left:calc(50% - 450px);top:-40%;width:900px;height:700px;background:radial-gradient(closest-side,rgba(217,138,108,.45),rgba(217,138,108,.08) 60%,rgba(217,138,108,.035) 76%,rgba(217,138,108,.01) 90%,rgba(217,138,108,0));transform-origin:50% 50%;transition:transform .9s var(--ease)} [data-section="finale"] .fin-card:has(input[type=email]:focus) .fin-glow{transform:scale(1.06)} [data-section="finale"] .fin-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 70%)} /* Ari: 150px on phones, 190px on desktop. The body image has about 10% clear space under her, so pull the headline up a touch. */ [data-section="finale"] .fin-ari-w{width:150px;margin:0 auto -12px} [data-section="finale"] .fin-ari{width:100%} [data-section="finale"] .fin-ari{filter:drop-shadow(0 20px 30px rgba(0,0,0,.4))} /* Headline: white Bricolage, "first" in serif italic clay. Phones: 40px on two lines ("Be first through" / "the door.") */ [data-section="finale"] .fin-h{color:#fff;font-size:40px;line-height:1;letter-spacing:-.04em} [data-section="finale"] .fin-h em{color:#D98A6C} [data-section="finale"] .fin-nw{white-space:nowrap} [data-section="finale"] .fin-sub{max-width:31em;margin:12px auto 0;color:rgba(255,255,255,.65);text-wrap:balance} /* The form zone: stacked 56px field and button on phones, one row from 720px, 560px wide */ [data-section="finale"] .wl-zone{max-width:560px;margin-top:20px} [data-section="finale"] .trust{margin-top:16px} /* "Not for you? Send it to someone it's for." A quiet text button under the trust line */ [data-section="finale"] .fin-pass{margin-top:14px} [data-section="finale"] .fin-share{max-width:100%;overflow-wrap:anywhere;justify-content:center;gap:8px;padding:0 14px;border-radius:999px;color:rgba(255,255,255,.82);font-weight:500;font-size:15px;line-height:1.3;text-align:center;transition:color .2s} [data-section="finale"] .fin-share .i{color:var(--lime);stroke-width:2} [data-section="finale"] .fin-share:hover{color:#fff} [data-section="finale"] .fin-done-i{display:none} [data-section="finale"] .fin-share.is-done{color:var(--lime);text-decoration:none} [data-section="finale"] .fin-share.is-done .fin-share-i{display:none} [data-section="finale"] .fin-share.is-done .fin-done-i{display:block} /* Returning visitor: replaces the sub and the form */ [data-section="finale"] .fin-back{display:flex;flex-direction:column;align-items:center;max-width:440px;margin:22px auto 0} [data-section="finale"] .fin-back-t{display:inline-flex;align-items:center;gap:10px;font:800 22px/1.2 var(--display);letter-spacing:-.025em;color:#fff} [data-section="finale"] .fin-tick{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--lime);color:var(--onLime)} [data-section="finale"] .fin-tick .i{width:16px;height:16px;stroke-width:2.6} [data-section="finale"] .fin-back-l{margin-top:6px;color:rgba(255,255,255,.65);text-wrap:balance} [data-section="finale"] .fin-back .btn{margin-top:20px} [data-section="finale"] .fin-reset{margin-top:6px;font-weight:500;color:rgba(255,255,255,.75)} [data-section="finale"] .fin-reset:hover{color:#fff} /* Launch: "Start training with Ari." */ [data-section="finale"] .fin-live .btn{margin-top:24px} @media (max-width:719px){ [data-section="finale"] .fin-back .btn{width:100%;height:56px} [data-section="finale"] .fin-live .btn{width:100%} } @media (max-width:419px){ [data-section="finale"] .fin-share{gap:6px;padding:0;font-size:14px} } @media (min-width:720px){ [data-section="finale"]{padding-bottom:32px} [data-section="finale"] .fin-card{padding:64px 40px 64px} [data-section="finale"] .fin-ari-w{width:170px;margin-bottom:-4px} [data-section="finale"] .fin-h{font-size:clamp(48px,7vw,64px)} [data-section="finale"] .fin-sub{margin-top:16px} [data-section="finale"] .wl-zone{margin-top:28px} [data-section="finale"] .fin-pass{margin-top:14px} } @media (min-width:1024px){ [data-section="finale"]{padding-bottom:40px} [data-section="finale"] .fin-card{padding:72px 40px 80px} [data-section="finale"] .fin-ari-w{width:190px;margin-bottom:-2px} [data-section="finale"] .fin-h{font-size:clamp(56px,5.4vw,76px);letter-spacing:-.045em} [data-section="finale"] .fin-sub{max-width:520px;margin-top:18px} [data-section="finale"] .wl-zone{margin-top:32px} } /* Short laptop windows: a slightly shorter card, so at the very bottom of the page Ari's head clears the nav */ @media (min-width:1024px) and (max-height:860px){ [data-section="finale"] .fin-card{padding-top:48px;padding-bottom:64px} [data-section="finale"] .fin-ari-w{width:160px} } /* ========================================================================== Desktop rhythm: related seams closer (about 150px instead of 224), so every eyebrow bubble sits clearly with its own section and the page keeps moving ========================================================================== */ @media (min-width:1024px){ [data-section="training"]{padding-bottom:56px} [data-section="food"]{padding-top:96px} [data-section="journey"]{padding-top:96px;padding-bottom:64px} [data-section="control"]{padding-top:96px;padding-bottom:64px} [data-section="faq"]{padding-top:96px} } /* ========================================================================== WAITLIST: thank-you flow, share block, sheet states (waitlist.js builds the markup) ========================================================================== */ /* The thank-you flow, the share block and the join sheet's states (waitlist.js builds the markup). Light by default (hero, sheet); every piece has a dark version for the finale panel (.on-dark). */ /* ---------- The flow, in place of the form ---------- */ .wl-ty{display:grid;gap:16px;text-align:left;animation:wl-in .38s var(--ease) both} @keyframes wl-in{from{opacity:0;transform:translateY(10px)}} .wl-ty .ab-t[tabindex]{outline-offset:4px} .wl-ty .note{text-wrap:pretty} .wl-ty .ab-t:focus:not(:focus-visible){outline:none} /* 1. Confirm card: "You're on the list" + "Typo? Fix it" */ .wl-ty .joined .ab-h>.i{color:var(--green)} .wl-ty .joined>.tlink{margin-top:2px;min-height:44px} .wl-ty .joined-email{font-weight:500} /* 2. "On Android? Tap this so we know you're out there." then the chip, under the confirm card */ .wl-droid{display:flex;flex-direction:column;align-items:flex-start;gap:8px} .wl-droid-l{margin:0;font-size:13px;line-height:1.45;color:var(--muted);max-width:420px;text-wrap:pretty} .wl-android{min-height:44px;text-align:left;line-height:1.25} .wl-android .i{width:16px;height:16px;stroke-width:2.4;margin-left:-2px} .wl-android[aria-disabled="true"]{cursor:default} .wl-android[aria-disabled="true"]:active{transform:none} /* 3. Share block */ .wl-share{padding-top:18px;border-top:1px solid var(--line)} .wl-share-t{font:800 21px/1.15 var(--display);letter-spacing:-.025em;color:var(--ink)} .wl-share-t:focus:not(:focus-visible){outline:none} .wl-share-l{margin-top:6px;font-size:15px;line-height:1.45;color:var(--muted)} /* The share message: sized to its whole text by waitlist.js, so the link at the end is always in view */ .wl-msg{display:block;width:100%;margin-top:12px;padding:12px 14px;border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--ink);font:400 16px/1.45 var(--body);resize:none;overflow-y:hidden;min-height:96px;-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s} .wl-msg:focus{outline:none;border-color:#c9d9b0;box-shadow:0 0 0 4px rgba(214,235,181,.7)} .wl-share-btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px} .wl-share-btns.two{grid-template-columns:repeat(2,minmax(0,1fr))} .wl-sb{width:100%;min-width:0;height:48px;padding:0 10px;gap:7px;font-size:15px;border-radius:14px} .wl-sb .i{width:17px;height:17px} .wl-sb span{overflow:hidden;text-overflow:ellipsis} .wl-sb-main{background:var(--ink);color:#fff;box-shadow:0 6px 18px -8px rgba(27,27,24,.5)} .wl-sb-main:hover{background:#2a2a26} .wl-sb-alt{background:var(--surface);color:var(--ink);border:1px solid var(--border)} .wl-sb-alt:hover{background:#fafaf7} .wl-sb.is-done{color:var(--green)} .wl-share-f{margin-top:10px;font-size:13px;line-height:1.45;color:var(--muted)} @media (max-width:419px){ .wl-share-btns:not(.two) .wl-sb .i{display:none} .wl-sb{padding:0 6px;font-size:14px} } /* ---------- On the dark finale panel: light app cards, white share text, lime buttons ---------- */ .on-dark .wl-droid-l{color:rgba(255,255,255,.66)} .on-dark .wl-share{border-top-color:rgba(255,255,255,.14)} .on-dark .wl-share-t{color:#fff} .on-dark .wl-share-l{color:rgba(255,255,255,.7)} .on-dark .wl-msg{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#fff} .on-dark .wl-msg:focus{border-color:var(--lime);background:rgba(255,255,255,.1);box-shadow:0 0 0 4px rgba(214,235,181,.25)} .on-dark .wl-sb-main{background:var(--lime);color:var(--onLime);box-shadow:0 8px 30px -10px rgba(214,235,181,.55)} .on-dark .wl-sb-main:hover{background:#e0f1c6} .on-dark .wl-sb-alt{background:transparent;color:var(--lime);border:1px solid rgba(214,235,181,.5)} .on-dark .wl-sb-alt:hover{background:rgba(214,235,181,.08)} .on-dark .wl-sb.is-done{color:var(--lime)} .on-dark .wl-share-f{color:rgba(255,255,255,.62)} .on-dark .wl-android:not(.on){background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff} .on-dark .wl-android:not(.on):hover{border-color:rgba(255,255,255,.4)} /* ---------- Join sheet ---------- */ /* Share mode: the share block sits under the sheet title */ .sheet-body .wl-share{margin-top:14px;padding-top:0;border-top:0} /* After joining inside the sheet: the title is visually hidden, so the flow starts below the close button */ .sheet.wl-done .sheet-x{margin-bottom:8px} /* Phones: Ari's 40px column stays, everything else is full width */ @media (max-width:719px){ .wl-ty{gap:14px} .wl-share-t{font-size:20px} } /* ========================================================================== WHAT CAN ARI DO? (ari.html, body.ari-page; added 7 Oct) ========================================================================== */ /* The full breakdown behind the Try section's button. Phones: a short head, then the app's own "Things you can say" as seven rows that open in place (native
), then "What she can't do" as three plain cards, then the finale card. Desktop: the head sticks on the left while the rows run down the right. Every rule is scoped so nothing reaches index.html. */ @media (max-width:719px){ body.ari-page main>.sec[data-section]:not(.hero):not(.finale){content-visibility:visible} } body.ari-page [data-section="ari"]{position:relative;overflow-x:clip;padding-top:calc(var(--nav-h) + 32px);padding-bottom:var(--sec-y)} [data-section="ari"] .ari-glow{left:-20%;top:0;width:80%;height:440px;opacity:.5;z-index:0} [data-section="ari"] .ari-wrap{position:relative;z-index:1} [data-section="ari"] .ari-back{min-height:44px;margin:0 0 8px -2px;font-size:15px} [data-section="ari"] .ari-head .sub{max-width:520px} [data-section="ari"] .ari-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px} [data-section="ari"] .ari-jump-a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);color:var(--ink);font:600 15px/1 var(--body);text-decoration:none;transition:border-color .2s,transform .2s var(--ease)} [data-section="ari"] .ari-jump-a:hover{border-color:var(--heroLine);transform:translateY(-1px)} [data-section="ari"] .ari-jump-a:focus-visible{outline:3px solid var(--green);outline-offset:3px} [data-section="ari"] .ari-head-ari{display:none} [data-section="ari"] .ari-h2{font-size:clamp(26px,7.4vw,34px);line-height:1.04} [data-section="ari"] .ari-list-h{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-top:30px;scroll-margin-top:84px} [data-section="ari"] .ari-all{appearance:none;background:none;border:0;min-height:44px;padding:0 2px;margin-right:-2px;color:var(--green);font:600 15px/1 var(--body);cursor:pointer} [data-section="ari"] .ari-all:hover{text-decoration:underline;text-underline-offset:3px} [data-section="ari"] .ari-all[hidden]{display:none} [data-section="ari"] .ari-key{margin:4px 0 16px;max-width:560px;font-size:14px;line-height:1.55;color:var(--muted);text-wrap:pretty} /* The seven rows */ [data-section="ari"] .ari-groups{display:grid;gap:10px} [data-section="ari"] .ari-g{scroll-margin-top:84px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-widget);box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s} [data-section="ari"] .ari-g[open]{border-color:var(--heroLine);box-shadow:var(--shadow)} [data-section="ari"] .ari-g-s{display:flex;align-items:center;gap:12px;min-height:72px;padding:14px 16px;list-style:none;cursor:pointer;border-radius:var(--r-widget);-webkit-tap-highlight-color:transparent} [data-section="ari"] .ari-g-s::-webkit-details-marker{display:none} [data-section="ari"] .ari-g-s:focus-visible{outline:3px solid var(--green);outline-offset:2px} [data-section="ari"] .ari-g-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-badge);background:var(--card);border:1px solid var(--border);color:var(--green)} [data-section="ari"] .ari-g-ic .i{width:20px;height:20px} [data-section="ari"] .ari-g-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} [data-section="ari"] .ari-g-t{font:700 17px/1.2 var(--display);letter-spacing:-.02em;text-wrap:pretty} [data-section="ari"] .ari-g-sum{font-size:14px;line-height:1.35;color:var(--muted);text-wrap:pretty} [data-section="ari"] .ari-g-chev{flex:none;display:grid;place-items:center;width:28px;height:28px;color:var(--muted);transition:transform .25s var(--ease)} [data-section="ari"] .ari-g[open] .ari-g-chev{transform:rotate(180deg)} [data-section="ari"] .ari-g-body{margin:0 16px;padding:6px 0 20px;border-top:1px solid var(--line)} [data-section="ari"] .ari-g[open] .ari-g-body{animation:ari-in .24s var(--ease) both} @keyframes ari-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} [data-section="ari"] .ari-part+.ari-part{margin-top:22px;padding-top:6px;border-top:1px solid var(--line)} [data-section="ari"] .ari-part-t{margin-top:14px;font:700 16px/1.2 var(--display);letter-spacing:-.02em;color:var(--ink)} [data-section="ari"] .ari-say{display:flex;flex-direction:column;gap:8px;margin-top:12px} [data-section="ari"] .ari-part-t+.ari-say{margin-top:10px} [data-section="ari"] .ari-b{display:flex;flex-direction:column;align-items:flex-end;gap:4px} [data-section="ari"] .ari-b .ub{margin:0;max-width:90%} [data-section="ari"] .ari-does-t{margin:18px 0 8px;font:600 13px/1.3 var(--body);color:var(--muted)} [data-section="ari"] .ari-does{list-style:none;margin:0;padding:0;display:grid;gap:9px} [data-section="ari"] .ari-does li{position:relative;padding-left:18px;font-size:15px;line-height:1.5;text-wrap:pretty;font-feature-settings:"calt" 0} [data-section="ari"] .ari-does li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--carbs)} /* What she can't do */ [data-section="ari"] .ari-cant-wrap{margin-top:calc(var(--sec-y) * .9)} [data-section="ari"] .ari-cant{scroll-margin-top:84px} [data-section="ari"] .ari-cant-head{margin-bottom:22px} [data-section="ari"] .ari-cant-head .sub{margin-left:auto;margin-right:auto} [data-section="ari"] .ari-cant-head .eyebrow{margin-left:auto;margin-right:auto} [data-section="ari"] .ari-cc-grid{display:grid;gap:12px;align-items:start} [data-section="ari"] .ari-cc{min-width:0;padding:18px 16px 6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-widget);box-shadow:var(--shadow-sm)} [data-section="ari"] .ari-cc-h{display:flex;align-items:center;gap:12px;margin-bottom:6px} [data-section="ari"] .ari-cc-t{font:700 18px/1.2 var(--display);letter-spacing:-.02em} [data-section="ari"] .ari-cc-l{list-style:none;margin:0;padding:0} [data-section="ari"] .ari-cc-l li{padding:13px 0 14px;border-top:1px solid var(--line)} [data-section="ari"] .ari-cc-l li:first-child{border-top:0;padding-top:8px} [data-section="ari"] .ari-cc-l b{display:block;font:600 15px/1.35 var(--body);color:var(--ink);text-wrap:pretty} [data-section="ari"] .ari-cc-l span{display:block;margin-top:3px;font-size:14px;line-height:1.5;color:var(--muted);text-wrap:pretty} /* The plans (as the app names them: Monthly, 3 months, 12 months). Prices as the audit of 23 Oct has them; the store is the source in the app. */ [data-section="ari"] .ari-plans{max-width:720px;margin:26px auto 0;padding:20px 18px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-widget);box-shadow:var(--shadow-sm)} [data-section="ari"] .ari-plans-t{font:700 20px/1.2 var(--display);letter-spacing:-.02em} [data-section="ari"] .ari-plans-s{margin-top:6px;font-size:15px;line-height:1.45;color:var(--muted);text-wrap:pretty} [data-section="ari"] .ari-plans-l{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px} [data-section="ari"] .ari-plans-l li{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:12px;row-gap:1px;padding:12px 14px;border-radius:14px;background:var(--bg);border:1px solid var(--border);font-size:16px;line-height:1.35} [data-section="ari"] .ari-plans-l b{font-weight:700;white-space:nowrap} [data-section="ari"] .ari-plans-l span{text-align:right;font-weight:500;white-space:nowrap} [data-section="ari"] .ari-plans-l small{grid-column:1/-1;display:block;font-weight:400;font-size:13px;color:var(--muted)} [data-section="ari"] .ari-plans-f{margin-top:12px;font-size:13px;line-height:1.5;color:var(--muted);text-wrap:pretty} @media (min-width:720px){[data-section="ari"] .ari-plans-l{grid-template-columns:repeat(3,minmax(0,1fr))}[data-section="ari"] .ari-plans-l li{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px}[data-section="ari"] .ari-plans-l span{text-align:left}} [data-section="ari"] .ari-more{margin-top:22px;text-align:center} [data-section="ari"] .ari-more a{display:inline-block;padding:13px 0;margin:-13px 0;color:var(--green);font-weight:600} [data-section="faq"] .faq-more{margin-top:10px} /* Tablet: one centred reading column */ @media (min-width:720px){ body.ari-page [data-section="ari"]{padding-top:calc(var(--nav-h) + 56px)} [data-section="ari"] .ari-head{max-width:720px;margin:0 auto} [data-section="ari"] .ari-main,[data-section="ari"] .ari-cc-grid{max-width:720px;margin-left:auto;margin-right:auto} [data-section="ari"] .ari-g-s{padding:16px 20px;min-height:80px} [data-section="ari"] .ari-g-body{margin:0 20px} [data-section="ari"] .ari-g-t{font-size:18px} [data-section="ari"] .ari-g-sum{font-size:15px} [data-section="ari"] .ari-cc{padding:20px 22px 8px} [data-section="ari"] .ari-h2{font-size:34px} /* Opened groups: the lines you could say sit left, in a wrapping row, instead of one bubble per row at the far edge */ [data-section="ari"] .ari-say{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:10px} [data-section="ari"] .ari-b{align-items:flex-start;max-width:100%} [data-section="ari"] .ari-b .ub{max-width:100%} } /* Desktop: the head sticks on the left, the rows run down the right, the three limit cards sit side by side */ @media (min-width:1024px){ body.ari-page [data-section="ari"]{padding-top:calc(var(--nav-h) + 72px)} [data-section="ari"] .ari-wrap:not(.ari-cant-wrap){display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);column-gap:clamp(56px,7vw,112px);align-items:start} [data-section="ari"] .ari-head,[data-section="ari"] .ari-main{max-width:none;margin:0} [data-section="ari"] .ari-main{max-width:680px} [data-section="ari"] .ari-list-h{margin-top:0;min-height:44px} [data-section="ari"] .ari-h2{font-size:38px} [data-section="ari"] .ari-cc-grid{max-width:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} [data-section="ari"] .ari-cc{padding:24px 24px 10px} [data-section="ari"] .ari-cc-t{font-size:20px} [data-section="ari"] .ari-cc-l b{font-size:16px} [data-section="ari"] .ari-cc-l span{font-size:15px} [data-section="ari"] .ari-cant-head{margin-bottom:36px} } @media (min-width:1024px) and (min-height:720px){ [data-section="ari"] .ari-head{position:sticky;top:96px} } @media (min-width:1024px) and (min-height:880px){ [data-section="ari"] .ari-head-ari{display:block;width:210px;margin:22px 0 0 -6px} [data-section="ari"] .ari-head-ari .ari{width:100%} } @media (prefers-reduced-motion:reduce){ [data-section="ari"] .ari-g[open] .ari-g-body{animation:none} [data-section="ari"] .ari-g-chev,[data-section="ari"] .ari-jump-a,[data-section="ari"] .ari-g{transition:none} } .rm [data-section="ari"] .ari-g[open] .ari-g-body{animation:none} /* ========================================================================== PRIVACY PAGE (privacy.html, body.pv) ========================================================================== */ /* privacy.html: the waitlist privacy note. A plain reading page on top of the shared tokens. Every rule is scoped under body.pv so nothing here can reach index.html. */ .pv{display:flex;flex-direction:column;min-height:100vh;min-height:100svh} .pv main{flex:1 0 auto} /* Soft lime and clay light behind the title, clipped so it can never cause sideways scroll */ .pv-bg{position:absolute;top:0;left:0;right:0;height:640px;overflow:hidden;pointer-events:none;z-index:0} .pv-bg .glow-lime{width:560px;height:560px;top:-300px;left:-200px} .pv-bg .glow-clay{width:420px;height:420px;top:-220px;right:-220px;opacity:.55} .pv-top,.pv-main,.pv .foot{position:relative;z-index:1} /* Top bar: the brand, lined up with the reading column */ .pv-top-in{display:flex;align-items:center;min-height:72px} .pv-top .brand{min-height:44px} @media (min-width:1024px){.pv-top-in{min-height:88px}} /* The note */ .pv-main{padding:20px 0 64px} @media (min-width:720px){.pv-main{padding:40px 0 88px}} @media (min-width:1024px){.pv-main{padding:56px 0 112px}} .pv-head{margin-bottom:32px} .pv-head .eyebrow{margin-bottom:16px} .pv-intro{margin-top:16px;max-width:560px;font-size:17px;line-height:1.55;color:var(--ink)} @media (min-width:1024px){.pv-head{margin-bottom:44px}.pv-intro{font-size:20px;margin-top:20px}} .pv-sec{padding:24px 0;border-top:1px solid var(--line)} .pv-sec h2{font-size:22px;line-height:1.2;letter-spacing:-.02em} .pv-body{margin-top:8px;line-height:1.7} .pv-intro,.pv-body p,.pv-list li{text-wrap:pretty} .pv-nw{white-space:nowrap} .pv-body p+p{margin-top:12px} @media (min-width:720px){ .pv-sec{display:grid;grid-template-columns:184px minmax(0,1fr);gap:32px;align-items:baseline;padding:28px 0} .pv-body{margin-top:0} } .pv-list{list-style:none;margin:0;padding:0} .pv-list li{position:relative;padding-left:22px} .pv-list li+li{margin-top:10px} .pv-list li::before{content:"";position:absolute;left:3px;top:calc(.85em - 3.5px);width:7px;height:7px;border-radius:50%;background:var(--clay)} .pv-body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:1.5px;text-underline-offset:3px;overflow-wrap:anywhere} .pv-body a:hover{color:var(--green)} /* Details Jake still has to fill in: kept loud on purpose so they can't ship unnoticed */ .pv-fill{background:var(--amber);color:var(--onAmber);font-weight:600;padding:1px 3px;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone} .pv-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;padding-top:20px;border-top:1px solid var(--line)} .pv-updated{font-size:14px;line-height:1.5;color:var(--muted)} .pv-end .tlink{min-height:44px;gap:4px;font-size:15px} /* Hover feedback for the app-style controls. Mouse only: nothing here applies on a touch screen. */ @media (hover:hover) and (pointer:fine){ [data-section="training"] .tr-d:not(.is-sel):hover,[data-section="journey"] button.tr-d:not(.is-sel):hover{background:rgba(255,255,255,.78)} [data-section="training"] .tr-tab[aria-pressed="false"]:hover{background:rgba(255,255,255,.95);color:var(--ink)} [data-section="training"] .th-see:hover,button.act:hover,button.cbtn.quiet:hover{text-decoration:underline;text-underline-offset:3px} button.cbtn:not(.lime):not(.quiet):hover{background:#FAFAF7} button.cbtn.lime:hover,button.doneb:hover{background:#E0F1C6;border-color:#E0F1C6} .foot a:hover{color:var(--green);text-decoration-thickness:2px} } /* ========================================================================== SEO and AI search additions (28 Oct): mode-copy containers and the explainer pages ========================================================================== */ /* A wrapper that only carries data-mv: it adds no box of its own */ .mv{display:contents} /* The explainer pages (/ai-fitness-coach, /food-logging-app, /workout-tracker-app) reuse the What can Ari do? layout (data-section="ari"); these rules style the reading column. */ .gp{font-size:var(--fs-body);line-height:1.6} .gp>*+*{margin-top:14px} .gp .gp-h{margin-top:34px;scroll-margin-top:84px} .gp .gp-h:first-child{margin-top:0} .gp p{max-width:62ch;text-wrap:pretty} .gp q{quotes:none;display:inline;padding:1px 8px;border-radius:10px;background:var(--userBubble);color:var(--userInk);font-size:.95em} .gp a:not(.btn){color:var(--green);font-weight:600;text-underline-offset:3px} .gp a:not(.btn):hover{text-decoration-thickness:2px} .gp .gp-list{max-width:62ch;gap:12px} .gp .gp-list li b{font-weight:650} .gp .gp-steps{max-width:62ch;margin:0;padding:0;list-style:none;counter-reset:gp;display:grid;gap:10px} .gp .gp-steps li{position:relative;padding:12px 14px 12px 50px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-inset);box-shadow:var(--shadow-sm);counter-increment:gp;font-size:15px;line-height:1.5} .gp .gp-steps li::before{content:counter(gp);position:absolute;left:12px;top:11px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--lime);color:var(--onLime);font:700 14px/1 var(--display)} .gp .gp-plans{margin:6px 0 0} .gp .gp-plans{max-width:none} body.gp-page [data-section="ari"] .ari-main{max-width:680px} /* Phones: 6px less air above and below each section (the first-screen sizes are untouched); the measured section heights in --cvh above leave padding out, so they stay right. */ @media (max-width:719px){:root{--sec-y:42px}} @media (max-width:1023px){.gp{margin-top:30px}} /* ========================================================================== SEO and AI search, round 2 (28 Oct): the home "Physiqo at a glance" box, FAQ questions in sentence case, the pricing table, question-led answer blocks and dated guides ========================================================================== */ /* FAQ questions are written in sentence case in the HTML (so the structured data and quotes read properly) and keep their lowercase text-message look on screen */ [data-section="faq"] .faq-qt{text-transform:lowercase} /* Physiqo at a glance: a plain card above the FAQ. Visible, never folded, so it is the passage people and assistants read. */ [data-section="facts"].sec{padding:0} .facts-card{padding:16px 16px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-widget);box-shadow:var(--shadow-sm)} .facts-h{font:700 21px/1.2 var(--display);letter-spacing:-.02em} .facts-lead{margin-top:6px;font-size:15px;line-height:1.45;text-wrap:pretty} .facts-list{margin:10px 0 0;padding:0;display:grid;gap:0} .facts-row{padding:6px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.45} .facts-row dt,.facts-row dd{display:inline;margin:0;color:var(--ink)} .facts-row dt{font-weight:650;margin-right:2px} .facts-row dt::after{content:":"} .facts-a{color:var(--green);font-weight:600;text-underline-offset:3px;white-space:nowrap} .facts-a:hover{text-decoration-thickness:2px} @media (max-width:719px){ main>.sec[data-section="facts"]{content-visibility:visible} } @media (min-width:720px){ .facts-card{padding:26px 28px 22px} .facts-h{font-size:26px} .facts-lead{font-size:16px;max-width:62ch} .facts-list{grid-template-columns:1fr 1fr;column-gap:28px;margin-top:16px} .facts-row{padding:10px 0;font-size:15px} .facts-row:last-child{grid-column:1/-1} } /* /ari: the group heading sits straight in the (a heading inside a is not valid HTML), so the summary is a grid */ [data-section="ari"] .ari-g-s{display:grid;grid-template-columns:40px minmax(0,1fr) 28px;grid-template-rows:auto auto;align-content:center;column-gap:12px;row-gap:2px} [data-section="ari"] .ari-g-s>.ari-g-ic{grid-row:1/3;grid-column:1;align-self:center} [data-section="ari"] .ari-g-s>.ari-g-t{grid-row:1;grid-column:2;align-self:end} [data-section="ari"] .ari-g-s>.ari-g-sum{grid-row:2;grid-column:2;align-self:start} [data-section="ari"] .ari-g-s>.ari-g-chev{grid-row:1/3;grid-column:3;align-self:center} [data-section="ari"] h2.ari-plans-t{font:700 20px/1.2 var(--display);letter-spacing:-.02em} /* Guides: a one-line plans note with a link to /pricing, the dated footer line, and the pricing table */ .gp .gp-note{padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-inset);box-shadow:var(--shadow-sm)} .gp .gp-updated{margin-top:26px;font-size:13px;color:var(--muted)} .gp .gp-table-w{max-width:62ch;overflow-x:auto;-webkit-overflow-scrolling:touch} .gp .gp-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-inset);box-shadow:var(--shadow-sm);font-size:15px;line-height:1.4} .gp .gp-table caption{text-align:left;padding:0 0 8px;font-size:13px;color:var(--muted)} .gp .gp-table th,.gp .gp-table td{padding:11px 14px;text-align:left;vertical-align:top} .gp .gp-table thead th{font-size:13px;font-weight:600;color:var(--muted);border-bottom:1px solid var(--line)} .gp .gp-table tbody tr+tr th,.gp .gp-table tbody tr+tr td{border-top:1px solid var(--line)} .gp .gp-table tbody th{font-weight:650;white-space:nowrap} .gp .gp-table td.n{white-space:nowrap} @media (max-width:379px){.gp .gp-table th,.gp .gp-table td{padding:10px 10px}.gp .gp-table{font-size:14px}} /* Privacy and 404: a short line of onward links under the main action */ .pv-links{flex-basis:100%;margin:0;font-size:14px;line-height:1.5;color:var(--muted)} .pv-links a,.pv-intro a{color:var(--green);font-weight:600;text-underline-offset:3px} .pv-links a:hover,.pv-intro a:hover{text-decoration-thickness:2px} .pv-404 .pv-end{justify-content:flex-start;gap:12px} /* Phones: measured section heights after the 28 Oct copy changes (one more FAQ question; one more line in the Try and Training intros at 360) */ @media (max-width:719px){[data-section="faq"]{--cvh:652px}} @media (max-width:370px){ [data-section="try"]{--cvh:calc(464px + clamp(440px,calc(100vh - 84px),860px))} [data-section="training"]{--cvh:1076px} } @supports (height:1svh){@media (max-width:370px){[data-section="try"]{--cvh:calc(464px + clamp(440px,calc(100svh - 84px),860px))}}}