/* ========================================================================== Minimo Studio · minimo.css · v1.0 · 2026-09-11 One stylesheet, both grounds. Built from design system v3.4 and the ten page templates. Every colour is a token; nothing here is a literal. Ground: set data-ground="light" (default) or data-ground="dark" on . Load fonts.css before this file. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens The palette (fixed values) and the semantic layer (what a surface means). Components only ever read the semantic layer, so a page flips ground by changing one attribute. -------------------------------------------------------------------------- */ :root{ /* palette, fixed */ --paper:#FAF4ED; --cream:#FFF8F0; --sand:#F2F1F0; --obsidian:#0F0808; --clay:#372625; --well:#080404; --coral:#FF6257; --coral-ink:#CF3328; --ice:#7FD4F2; --ink-muted:#654D4C; --ink-subtle:#806A68; --line-light:#DAD3D3; --line-strong:#BEB4B3; --cream-muted:#AA9593; --cream-subtle:#8E7B79; --line-dark:#493837; /* semantic, light ground (default) */ --bg:var(--paper); /* the page */ --raised:var(--cream); /* cards, tiles, panels, form fields */ --recessed:var(--sand); /* placeholder wells inside a card */ --fg:var(--obsidian); /* headlines, body, filled buttons */ --fg-2:var(--ink-muted); /* ledes, secondary copy 7.07 on paper */ --fg-3:var(--ink-subtle); /* captions, metadata, control edges 4.60 */ --accent-text:var(--coral-ink);/* eyebrows, links 4.63 */ --rule:var(--line-light); /* hairlines, card edges. never a control edge */ --outline:var(--ink-subtle); /* control edges: clears 3:1 on every ground */ --focus:var(--coral-ink); --btn-fill:var(--fg); /* the fill is the opposite ground */ --btn-fill-text:var(--bg); --panel-bg:var(--obsidian); /* the closing panel is the opposite ground */ --panel-fg:var(--cream); --panel-fg-2:var(--cream-muted); --panel-accent:var(--coral); --panel-outline:var(--cream-muted); --panel-btn-fill:var(--paper); --panel-btn-text:var(--obsidian); --menu-bg:var(--paper); --ph-stripe:#E4DEDD; /* placeholder hatching, light */ /* type */ --font-display:'Moderna Sans',system-ui,sans-serif; --font-body:'Moderna Sans',system-ui,sans-serif; --font-wordmark:'Moderna Sans Condensed','Arial Narrow',sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; --fs-body:17px; /* not 16: Moderna's x-height is 0.493em */ --lh-body:1.65; --h1:clamp(50px,7.6vw,108px); --h2:clamp(38px,5vw,68px); --h2-s:clamp(26px,3.8vw,44px); --quote:clamp(26px,3.4vw,46px); --lede:clamp(18px,1.7vw,21px); --sub:clamp(18px,1.9vw,22px); /* shape and rhythm */ --max:1240px; --pad:clamp(20px,5.5vw,84px); --secpad:clamp(48px,6.5vw,96px); --r:20px; --r-lg:28px; --r-field:14px; --grid-gap:10px; --navh:64px; --sceneh:min(60vh,640px); } @media(max-width:959px){:root{--navh:58px;--secpad:clamp(44px,9vw,72px)}} [data-ground="dark"]{ --bg:var(--obsidian); --raised:var(--clay); --recessed:var(--well); --fg:var(--cream); --fg-2:var(--cream-muted); /* 7.02 on obsidian, 5.07 on clay */ --fg-3:var(--cream-subtle); /* 4.97 on obsidian. never on clay */ --accent-text:var(--coral); /* the raw coral is type on dark 6.74 */ --rule:var(--line-dark); --outline:var(--cream-muted); --focus:var(--coral); --btn-fill:var(--paper); --btn-fill-text:var(--obsidian); --panel-bg:var(--paper); --panel-fg:var(--obsidian); --panel-fg-2:var(--ink-muted); --panel-accent:var(--coral-ink); --panel-outline:var(--ink-subtle); --panel-btn-fill:var(--obsidian); --panel-btn-text:var(--paper); --menu-bg:var(--obsidian); --ph-stripe:#4A3A39; } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{color-scheme:light} [data-ground="dark"]{color-scheme:dark} body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body); font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} [hidden]{display:none!important} img,svg,canvas,video{max-width:100%;display:block} ::selection{background:var(--coral);color:var(--obsidian)} a{color:inherit} :focus-visible{outline:2px solid var(--focus);outline-offset:3px} p{margin:0;max-width:60ch} h1,h2,h3,h4{margin:0;font-weight:300} ul,ol{margin:0;padding:0} button{font:inherit} sup{font-family:var(--font-mono);font-size:10px;color:var(--accent-text);line-height:0} /* -------------------------------------------------------------------------- 3. Type Display is Moderna Sans Light 300, set large. The condensed black is the wordmark only. Every column of figures is monospace: Moderna's digits are proportional and it ships no tnum. -------------------------------------------------------------------------- */ h1,.h1{font-family:var(--font-display);font-weight:300;font-size:var(--h1);line-height:.98;letter-spacing:-.028em;max-width:12.5ch;text-wrap:balance} h2,.h2{font-family:var(--font-display);font-weight:300;font-size:var(--h2);line-height:1;letter-spacing:-.024em;max-width:14ch;text-wrap:balance} .h2-s{font-size:var(--h2-s)} h3,.h3{font-family:var(--font-body);font-weight:500;font-size:19px;line-height:1.25;letter-spacing:-.01em} .h3-display{font-family:var(--font-display);font-weight:300;font-size:clamp(26px,2.6vw,34px);line-height:1.05;letter-spacing:-.02em} .sub{font-size:var(--sub);line-height:1.5;color:var(--fg-2);max-width:40ch;margin-top:30px} .lead{font-size:var(--lede);line-height:1.6;color:var(--fg-2);max-width:44ch} .dim{color:var(--fg-2)} .eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text);display:block;margin-bottom:22px} .label{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)} .fig,.price{font-family:var(--font-mono)} /* any figure in running copy */ .price{font-size:13px;letter-spacing:.06em;color:var(--accent-text);white-space:nowrap} .priceline{font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;color:var(--accent-text);margin-top:26px} .wordmark{font-family:var(--font-wordmark);font-weight:900;font-size:21px;letter-spacing:.01em;white-space:nowrap;text-transform:uppercase} /* text links carry the arrow; buttons never do */ .tlink{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--outline)} .tlink:hover{color:var(--accent-text);border-color:var(--accent-text)} /* -------------------------------------------------------------------------- 4. Layout One surface. Sections are separated by space alone; the hairline keeps three jobs: the nav rule, the sticky section bar, the hero intro rule. -------------------------------------------------------------------------- */ .w{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)} .sec{border-top:0} .secin{padding-block:var(--secpad)} .two{display:grid;column-gap:clamp(30px,5vw,72px);row-gap:0;grid-template-columns:1fr;align-items:start} .two>*{min-width:0} .two>.eyebrow,.two>h2,.two>.portrait{grid-column:1} .two>.body{grid-column:1;margin-top:clamp(22px,3vw,34px)} @media(min-width:900px){ .two{grid-template-columns:5fr 7fr;grid-template-rows:auto auto} .two>.eyebrow{grid-row:1} .two>h2,.two>.portrait{grid-row:2} .two>.body{grid-column:2;grid-row:2;margin-top:0;padding-top:.32em} /* copy top meets the heading's cap height */ } .stack{display:flex;flex-direction:column;gap:22px;align-items:flex-start} .stack .btn{margin-top:8px} /* -------------------------------------------------------------------------- 5. Nav Sticky, frosted, one hairline. The coral CTA is the one anchor that survives on touch; below 560px it moves to a fixed bar at the thumb end. -------------------------------------------------------------------------- */ .nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 86%,transparent); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)} .nav-in{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);height:var(--navh);display:flex;align-items:center;justify-content:space-between;gap:20px} .nav-links{display:none;gap:30px;font-size:14.5px} @media(min-width:1040px){.nav-links{display:flex}} .nav-links a{text-decoration:none;color:var(--fg-2)} .nav-links a[aria-current]{color:var(--fg)} .nav-right{display:flex;align-items:center;gap:10px} .menubtn{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:0 11px; background:none;border:1px solid var(--outline);border-radius:999px;cursor:pointer} .menubtn span{display:block;height:1.5px;background:var(--fg);border-radius:2px} @media(min-width:1040px){.menubtn{display:none}} .menu{border-top:1px solid var(--rule);background:var(--menu-bg)} .menu-in{max-width:var(--max);margin-inline:auto;padding:6px var(--pad) 16px;display:flex;flex-direction:column} .menu-in a{text-decoration:none;color:var(--fg-2);padding:10px 0;border-bottom:1px solid var(--rule);font-size:16px} .menu-in a:last-child{border-bottom:0} .menu-in a[aria-current]{color:var(--fg);font-weight:500} @media(max-width:719px){ .nav-in{gap:10px} .wordmark{font-size:17px} .btn-nav{font-size:12.5px;padding:9px 13px} .menubtn{width:36px;height:36px;flex:0 0 36px} } .thumbbar{display:none} @media(max-width:559px){ .nav-in .btn-nav{display:none} body{padding-bottom:74px} .thumbbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:70; background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border-top:1px solid var(--rule);padding:11px var(--pad) calc(11px + env(safe-area-inset-bottom))} .thumbbar .btn{width:100%;justify-content:center;font-size:14.5px;padding:13px 18px} } /* -------------------------------------------------------------------------- 6. Buttons The fill is the opposite ground; coral on hover. In a pair the first is filled and the second outlined; a button on its own is filled. The nav CTA is coral at rest. White never goes on the coral; coral takes Obsidian. -------------------------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;font-family:var(--font-body);font-weight:500;font-size:15px; padding:12px 24px;border-radius:999px;border:1px solid transparent;text-decoration:none;white-space:nowrap;cursor:pointer; transition:background .18s ease,color .18s ease,border-color .18s ease} .btn-p{background:var(--btn-fill);color:var(--btn-fill-text);border-color:var(--btn-fill)} .btn-s{background:transparent;color:var(--fg);border-color:var(--outline)} .btn-p:hover,.btn-s:hover{background:var(--coral);color:var(--obsidian);border-color:var(--coral)} .btn-nav{background:var(--coral);color:var(--obsidian);border-color:var(--coral)} .btn-nav:hover{background:var(--btn-fill);color:var(--btn-fill-text);border-color:var(--btn-fill)} .btnrow{display:flex;gap:12px;flex-wrap:wrap} /* -------------------------------------------------------------------------- 7. Hero The scene is the ground: a transparent canvas behind the text. On wide screens the scene sits under the right half; on phones the hero reserves space below the text for it. Intro prose sits in the hero, under the buttons. -------------------------------------------------------------------------- */ .hero{position:relative;overflow:hidden;min-height:calc(100vh - var(--navh));display:flex;align-items:center} .hero-short{min-height:min(74vh,720px)} .hero-bg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none} .hero-in{position:relative;z-index:1;width:100%;padding-block:clamp(64px,9vw,120px)} .hero .btnrow{margin-top:36px} .introblock{margin-top:clamp(40px,5vw,64px);padding-top:clamp(26px,3vw,34px);border-top:1px solid var(--rule);max-width:56ch} .introblock p{color:var(--fg-2);font-size:clamp(17px,1.5vw,19px);line-height:1.6} .introblock p+p{margin-top:14px} @media(max-width:959px){ .hero,.hero-short{min-height:0} .hero-in{padding-bottom:calc(clamp(64px,9vw,120px) + 52vh)} /* room for the scene */ .hero-short .hero-in{padding-bottom:calc(clamp(64px,9vw,120px) + 44vh)} } /* -------------------------------------------------------------------------- 8. Cards and grids Cards hold objects: offers, plans, tiles, posts, forms. A testimonial is not an object and never gets one. 20px radius, 1px hairline, no shadow. -------------------------------------------------------------------------- */ .card{background:var(--raised);border:1px solid var(--rule);border-radius:var(--r);padding:clamp(24px,3.2vw,40px); display:flex;flex-direction:column;gap:14px;align-items:flex-start} .card p{color:var(--fg-2);font-size:16.5px;max-width:44ch} .card .btn{margin-top:auto} .card-featured{border-color:var(--fg)} .cards{display:grid;grid-template-columns:1fr;gap:var(--grid-gap)} @media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.cards-3{grid-template-columns:repeat(3,1fr)}} .cards-2{grid-template-columns:1fr} @media(min-width:760px){.cards-2{grid-template-columns:1fr 1fr}} .card-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;width:100%;flex-wrap:wrap} .card-head h3{font-family:var(--font-display);font-weight:300;font-size:clamp(26px,2.6vw,34px);line-height:1.05;letter-spacing:-.02em} .num{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--accent-text)} .pop{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;background:var(--coral);color:var(--obsidian);padding:5px 10px;border-radius:999px} /* a price inside a card: figures are monospace, always */ .bigprice,.card .bigprice{font-family:var(--font-mono);font-weight:500;font-size:clamp(34px,4vw,52px);letter-spacing:-.02em;line-height:1;color:var(--fg);max-width:none} .planprice,.card .planprice{font-family:var(--font-mono);font-weight:500;font-size:clamp(26px,2.4vw,32px);letter-spacing:-.02em;color:var(--fg);line-height:1.1} .planprice small{font-size:13px;font-weight:400;color:var(--fg-3);letter-spacing:.02em} .planprice s{font-size:14px;font-weight:400;color:var(--fg-3);margin-left:6px} .plus{font-weight:500;font-size:15px;color:var(--fg)} .card ul{list-style:none;display:flex;flex-direction:column;gap:9px;width:100%} .card li{padding-left:18px;position:relative;color:var(--fg-2);font-size:15.5px;line-height:1.5} .card li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--coral)} /* the full-width image grid: breaks out of the column, 4:3 tiles, no captions */ .tilewrap{padding:clamp(40px,5vw,72px) var(--pad) var(--secpad)} .tiles{display:grid;grid-template-columns:1fr;gap:var(--grid-gap)} @media(min-width:640px){.tiles{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.tiles{grid-template-columns:repeat(3,1fr)}} .tile{display:block;border-radius:var(--r);overflow:hidden;border:1px solid var(--rule);background:var(--recessed);text-decoration:none;color:inherit} .tile-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover} .tile-meta{padding:20px 22px 24px;display:flex;flex-direction:column;gap:6px;background:var(--raised)} .tile-meta h3{font-family:var(--font-display);font-weight:300;font-size:clamp(24px,2.4vw,30px);line-height:1.05;letter-spacing:-.02em} .tile-meta p{color:var(--fg-2);font-size:15px;line-height:1.5;max-width:40ch} /* placeholders, marked as such */ .ph{background:var(--recessed);border:1px solid var(--rule);border-radius:var(--r);display:flex;align-items:center;justify-content:center; background-image:repeating-linear-gradient(135deg,transparent 0 9px,var(--ph-stripe) 9px 10px)} .ph-label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3); background:var(--raised);padding:5px 9px;border:1px solid var(--rule);border-radius:999px} .portrait{aspect-ratio:4/5;max-width:420px;width:100%} /* -------------------------------------------------------------------------- 9. Proof: logos and testimonials Centred on the page, no card. Logos are recoloured to the muted token. -------------------------------------------------------------------------- */ .proof .secin{text-align:center;display:flex;flex-direction:column;align-items:center} .proof .eyebrow{margin-bottom:18px} .proof h2{max-width:24ch;margin-bottom:clamp(36px,5vw,64px)} .logos{list-style:none;margin:0 0 clamp(40px,5.5vw,72px);padding:0;display:grid;grid-template-columns:repeat(2,1fr); gap:clamp(18px,3vw,36px) clamp(24px,4vw,56px);width:100%;max-width:960px} @media(min-width:720px){.logos{grid-template-columns:repeat(4,1fr)}} .logos li{display:flex;align-items:center;justify-content:center} .logos img{display:block;width:100%;max-width:190px;height:auto;aspect-ratio:5/3;object-fit:contain;opacity:.85} blockquote{margin:0;font-family:var(--font-display);font-weight:300;font-size:var(--quote);line-height:1.15;letter-spacing:-.02em;max-width:26ch;text-wrap:balance} .cite{margin-top:28px;font-size:15px;color:var(--fg-2)} .cite strong{color:var(--fg);font-weight:500} /* -------------------------------------------------------------------------- 10. Lists and Q&A No hairlines between items; an index, space, or weight does the work. -------------------------------------------------------------------------- */ .idx{list-style:none;display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px)} .idx li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:baseline} .idx li>span,.idx .num{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--accent-text)} .idx p{color:var(--fg-2);font-size:17.5px;line-height:1.55;max-width:56ch} .qa{display:flex;flex-direction:column;gap:clamp(24px,3vw,36px)} .qa h3{margin-bottom:8px} .qa p{color:var(--fg-2);font-size:16.5px;max-width:56ch} .foot{list-style:none;margin-top:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:6px} .foot li{font-size:13.5px;color:var(--fg-3);max-width:80ch} /* -------------------------------------------------------------------------- 11. Forms Fields are raised surfaces with a control edge, so the edge is --outline. -------------------------------------------------------------------------- */ .form{display:flex;flex-direction:column;gap:16px;max-width:560px;align-items:flex-start} .form label{display:flex;flex-direction:column;gap:8px;width:100%} .form label>span{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)} .form input,.form textarea,.form select{font:inherit;font-size:16.5px;color:var(--fg);background:var(--raised);border:1px solid var(--outline); border-radius:var(--r-field);padding:13px 16px;width:100%;resize:vertical} .form input:focus,.form textarea:focus{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--fg)} .form .btn{margin-top:8px} .toggle{display:inline-flex;border:1px solid var(--outline);border-radius:999px;padding:3px;background:var(--raised)} .toggle button{font-weight:500;font-size:14px;padding:8px 18px;border-radius:999px;border:0;background:transparent;color:var(--fg);cursor:pointer} .toggle button[aria-pressed="true"],.toggle button.on{background:var(--btn-fill);color:var(--btn-fill-text)} /* -------------------------------------------------------------------------- 12. The closing panel A rounded panel in the opposite ground, 28px radius, with a button pair. -------------------------------------------------------------------------- */ .ctawrap{padding-block:var(--secpad)} .cta{background:var(--panel-bg);color:var(--panel-fg);border-radius:var(--r-lg);padding:clamp(52px,7.5vw,112px) clamp(28px,6vw,96px)} .cta .eyebrow{color:var(--panel-accent)} .cta h2{color:var(--panel-fg)} /* 14ch from h2; the wide modifier gives a long line two rows */ .cta-wide h2{max-width:20ch} .cta p{color:var(--panel-fg-2);margin-top:26px;font-size:18px;max-width:46ch} .cta strong{color:var(--panel-fg);font-weight:500} .cta .btnrow{margin-top:36px} .cta .btn-p{background:var(--panel-btn-fill);color:var(--panel-btn-text);border-color:var(--panel-btn-fill)} .cta .btn-s{background:transparent;color:var(--panel-fg);border-color:var(--panel-outline)} .cta .btn-p:hover,.cta .btn-s:hover{background:var(--coral);color:var(--obsidian);border-color:var(--coral)} .cta .tlink{color:var(--panel-fg);border-color:var(--panel-outline)} .cta .tlink:hover{color:var(--panel-accent);border-color:var(--panel-accent)} .dot{color:var(--panel-accent);padding:0 7px} /* -------------------------------------------------------------------------- 13. The sticky method section (How We Work) A sticky bar carries the section name and progress; the scene sticks at the vertical centre of what is left, only as tall as it needs to be. -------------------------------------------------------------------------- */ .mstick{position:sticky;top:var(--navh);z-index:50;background:var(--bg);border-bottom:1px solid var(--rule)} .mstick-in{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);height:56px;display:flex;align-items:center;gap:14px;justify-content:space-between} @media(max-width:959px){.mstick-in{height:50px}} .mtitle{font-family:var(--font-display);font-weight:400;font-size:clamp(19px,2.2vw,25px);line-height:1;letter-spacing:-.015em;white-space:nowrap} .mprog{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media(max-width:719px){.mprog .stage-name,.mprog .mdot{display:none}} .mbar{height:2px;background:var(--rule);position:relative} .mbar i{position:absolute;inset:0 auto 0 0;background:var(--coral);width:12.5%;transition:width .35s ease;display:block} .mgrid{display:grid;grid-template-columns:1fr;gap:clamp(16px,3vw,56px)} @media(min-width:960px){.mgrid{grid-template-columns:0.94fr 1.06fr}} .scenecol{position:sticky;top:calc(var(--navh) + 56px);z-index:30;background:var(--bg)} @media(min-width:960px){.scenecol{top:calc(var(--navh) + 56px + (100vh - var(--navh) - 56px - var(--sceneh)) / 2);height:var(--sceneh);background:none}} @media(max-width:959px){.scenecol{padding:8px 0 4px;border-bottom:1px solid var(--rule)}} .stage{position:relative;width:100%;height:100%} .stage canvas{width:100%;height:100%} @media(max-width:959px){.stage{height:34vh}} .steps{display:flex;flex-direction:column} .step{padding:clamp(28px,4.5vw,56px) 0;transition:opacity .45s ease} @media(min-width:960px){.step{min-height:60vh;display:flex;flex-direction:column;justify-content:center} .step:last-child{min-height:24vh;justify-content:flex-start}} @media(max-width:959px){.step{min-height:50vh;display:flex;flex-direction:column;justify-content:center}} .step:not(.on){opacity:.42} .step .num{display:block;margin-bottom:16px;letter-spacing:.2em} .step h3{font-family:var(--font-display);font-weight:300;font-size:clamp(30px,3.8vw,44px);line-height:1.02;letter-spacing:-.022em;margin-bottom:16px} .step p{color:var(--fg-2)} /* -------------------------------------------------------------------------- 13b. Page components The pieces a single template owns. Each is a card variant or a hero modifier, so it reads only the semantic layer. -------------------------------------------------------------------------- */ /* hero heights: one modifier per page, set the custom property on the hero */ .hero-short{--hero-min:min(74vh,720px);min-height:var(--hero-min)} @media(max-width:959px){.hero-short .hero-in{padding-bottom:calc(clamp(64px,9vw,120px) + var(--hero-scene,44vh))}} /* care plans: the three worries overlap up into the hero */ .hero-care{--hero-min:min(76vh,740px);padding-bottom:80px} .worry{margin-top:-90px;position:relative;z-index:2;padding-bottom:var(--secpad)} @media(max-width:959px){.hero-care{padding-bottom:0}.hero-care .hero-in{padding-bottom:calc(clamp(64px,9vw,120px) + 44vh + 60px)}} /* card variants */ .card-compact{padding:clamp(22px,2.8vw,32px);gap:10px} /* included items, worries: a sans h3 */ .card-compact h3{font-family:var(--font-body);font-weight:500;font-size:19px;letter-spacing:-.01em} .card-compact p{font-size:16px} .card-compact .num{display:block;margin-bottom:8px} .card-post{padding:clamp(24px,3vw,36px);min-height:220px;justify-content:space-between;gap:24px;text-decoration:none;color:inherit} .card-post h3{font-family:var(--font-display);font-weight:300;font-size:clamp(24px,2.3vw,30px);line-height:1.1;letter-spacing:-.02em;text-wrap:balance} .read{font-size:15px;color:var(--fg);border-bottom:1px solid var(--outline);align-self:flex-start} .card-post:hover .read{color:var(--accent-text);border-color:var(--accent-text)} .card-plan{padding:clamp(24px,3vw,36px)} .card-plan h3{font-family:var(--font-display);font-weight:300;font-size:clamp(28px,2.8vw,36px);letter-spacing:-.02em;line-height:1} .card-plan ul{flex:1} .card-plan .btn{margin-top:10px} .card-plan sup{margin-left:1px} .plan-name{display:flex;justify-content:space-between;align-items:center;width:100%;gap:12px} .plan-for{color:var(--fg-2);font-size:16px} .plan-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,44px)} .pricecard{max-width:60ch;gap:18px} .pricecard p{max-width:56ch} .pricecard .bigprice{margin-bottom:4px} .cards-3-tight{grid-template-columns:1fr} /* three across from 760, for the worries */ @media(min-width:760px){.cards-3-tight{grid-template-columns:repeat(3,1fr)}} @media(min-width:900px){.cards-plans{grid-template-columns:repeat(3,1fr)}} /* the founder block (About) */ .founder{display:flex;flex-direction:column;gap:16px} .founder .hi{font-family:var(--font-display);font-weight:300;font-size:clamp(30px,3.4vw,44px);letter-spacing:-.02em;line-height:1.05;color:var(--fg);margin-bottom:6px} .founder p{color:var(--fg-2);font-size:17px;max-width:56ch} .founder .lead{color:var(--fg)} /* the scheduler well (Fit Call): a placeholder until the embed lands */ .widget{min-height:420px;flex-direction:column;gap:14px;text-align:center;padding:32px;background-color:var(--raised)} .widget p{color:var(--fg-3);font-size:14.5px;max-width:44ch;background:var(--raised);padding:6px 10px;border-radius:8px} /* Q&A inside the body column; testimonials on a longer page */ .proof-wide blockquote{font-size:clamp(24px,2.8vw,38px);max-width:30ch} /* -------------------------------------------------------------------------- 14. Footer -------------------------------------------------------------------------- */ .footer{padding-block:34px 52px;border-top:1px solid var(--rule)} .footer-note{font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;color:var(--fg-3);line-height:1.85;max-width:96ch} /* -------------------------------------------------------------------------- 15. Motion Reduced motion is a first-class path: scenes snap to their resolved still, transitions go, the steps stay fully legible. -------------------------------------------------------------------------- */ @media(prefers-reduced-motion:reduce){ .btn,.mbar i,.step{transition:none} .step:not(.on){opacity:1} } /* -------------------------------------------------------------------------- 16. Utilities -------------------------------------------------------------------------- */ .mt-0{margin-top:0} .pt-0{padding-top:0} .pb-0{padding-bottom:0} .center{text-align:center} .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}