/* ========================================================================== 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,64px); /* was 96 max; cut 2026-09-21, gaps read as holes */ --hero-pad:clamp(64px,9vw,120px); /* the hero gap, top and bottom, on every page */ --r:20px; --r-lg:28px; --r-field:14px; --prose:68ch; /* blog post body. The figure and panel run wider */ --grid-gap:10px; --navh:90px; --sceneh:min(60vh,640px); --mstickh:96px; /* How We Work's sticky method bar. was 56 */ } @media(max-width:959px){:root{--navh:72px;--mstickh:60px;--secpad:clamp(44px,9vw,64px)}} [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 two jobs: the nav rule and the sticky section bar. (The hero intro rule went 2026-09-21 when the intro moved out of the hero into a card.) -------------------------------------------------------------------------- */ .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. Below 1040px the links fold into a full-screen menu; below 560px the coral CTA leaves the bar and lives in that menu (the fixed bar at the thumb end went 2026-09-22). -------------------------------------------------------------------------- */ /* The logo is inlined so the wordmark takes currentColor and flips with the ground; the mark keeps the coral on both. Sized by height, the lockup is 3.63:1. */ .wordmark{display:inline-flex;align-items:center;color:var(--fg);--logo-mark:var(--coral)} .wordmark .logo{display:block;height:48px;width:auto} @media(max-width:1039px){.wordmark .logo{height:40px}} @media(max-width:559px){.wordmark .logo{height:34px}} .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); transition:transform .34s cubic-bezier(.4,0,.2,1),opacity .26s ease} /* Scrolling down hands the screen back to the page; scrolling up brings the nav with it. site.js sets the flag on . Reduced motion never hides it. */ [data-nav-hidden] .nav{transform:translateY(-100%);opacity:0;pointer-events:none} [data-nav-hidden] .mstick{top:0} @media(prefers-reduced-motion:reduce){.nav{transition:none}} .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}} /* The mobile menu: a full-screen sheet. Hidden with visibility, not display, so it can fade; visibility also takes it out of the tab order and the accessibility tree while closed. */ .menu{position:fixed;inset:0;z-index:90;background:var(--menu-bg);display:flex;flex-direction:column; overflow-y:auto;overscroll-behavior:contain;visibility:hidden;opacity:0; transition:opacity .32s ease,visibility 0s linear .32s} .menu.open{visibility:visible;opacity:1;transition:opacity .32s ease} @media(min-width:1040px){.menu{display:none}} .menu-top{height:var(--navh);flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;padding-inline:var(--pad)} .menuclose{position:relative;width:40px;height:40px;background:none;border:1px solid var(--outline);border-radius:999px;cursor:pointer} .menuclose span{position:absolute;left:11px;right:11px;top:50%;height:1.5px;margin-top:-.75px;background:var(--fg);border-radius:2px;transform:rotate(45deg)} .menuclose span+span{transform:rotate(-45deg)} .menu-in{flex:1 0 auto;display:flex;flex-direction:column;align-items:flex-start; padding:clamp(8px,4vh,40px) var(--pad) calc(40px + env(safe-area-inset-bottom))} .menu-logo{align-self:center;margin-bottom:clamp(36px,8vh,72px)} .menu-logo .logo{height:clamp(52px,9vw,68px)} .menu-links{display:flex;flex-direction:column;gap:clamp(6px,1.4vh,14px);width:100%} .menu-links a{font-family:var(--font-display);font-weight:300;font-size:clamp(34px,9.5vw,52px);line-height:1.1; letter-spacing:-.024em;color:var(--fg-2);text-decoration:none;padding:2px 0} .menu-links a[aria-current]{color:var(--fg)} .menu-links a:hover{color:var(--fg)} .menu-cta{margin-top:clamp(36px,7vh,56px);font-size:16px;padding:15px 26px} /* the items rise in one after another as the sheet fades up */ .menu .menu-logo,.menu .menu-links a,.menu .menu-cta{opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1)} .menu.open .menu-logo,.menu.open .menu-links a,.menu.open .menu-cta{opacity:1;transform:none} .menu.open .menu-links a:nth-child(1){transition-delay:.06s} .menu.open .menu-links a:nth-child(2){transition-delay:.10s} .menu.open .menu-links a:nth-child(3){transition-delay:.14s} .menu.open .menu-links a:nth-child(4){transition-delay:.18s} .menu.open .menu-links a:nth-child(5){transition-delay:.22s} .menu.open .menu-links a:nth-child(6){transition-delay:.26s} .menu.open .menu-cta{transition-delay:.30s} html.menu-open{overflow:hidden} @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} } @media(max-width:559px){.nav-in .btn-nav{display:none}} /* -------------------------------------------------------------------------- 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} .linkrow{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px} /* -------------------------------------------------------------------------- 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 follows the hero in its own section, in a card (see .intro). -------------------------------------------------------------------------- */ /* Vertical rhythm, set 2026-09-20 after measuring every page at 1920. Heroes used to carry a hand-picked min-height per page (620/640/680/700/720/740/760) and centre their content, so whatever the copy did not fill was split top and bottom. The gap from the nav to the first line of a hero ranged from 120px to 246px, and none of those numbers was chosen. Height now follows the content, so --hero-pad is the gap on every page, top and bottom. */ .hero{position:relative;overflow:hidden;display:flex;align-items:center} .hero-short{} .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:var(--hero-pad)} .hero .btnrow{margin-top:36px} /* A hero followed by an intro card fills the first screen on desktop, so the card always starts below the fold instead of peeking in as a stray edge (Mario, 2026-09-21). Content stays top-aligned, so the --hero-pad gap under the nav is unchanged and the extra room goes below. On a screen shorter than the content the rule does nothing, and the hero is taller than the fold anyway. */ @media(min-width:960px){.hero:has(+ .intro){min-height:calc(100svh - var(--navh));align-items:flex-start}} @media(max-width:959px){ .hero,.hero-short{min-height:0} .hero-in{padding-bottom:calc(var(--hero-pad) + 52vh)} /* room for the scene */ .hero-short .hero-in{padding-bottom:calc(var(--hero-pad) + 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} /* Where the headings are long enough that the figure would wrap on one card and not the other, stack every head in the set so the pair reads the same. */ .card-head-stack{flex-direction:column;align-items:flex-start;gap:8px} .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%} img.portrait{border-radius:var(--r);object-fit:cover;height:auto;border:1px solid var(--rule)} /* Intro: Home and How We Work, moved out of the hero 2026-09-21. Inside the hero it landed on the fold at 1920x1080 and showed two lines cut mid-sentence. Same quiet type it had there, set in a raised card (Mario's call) so it reads as its own beat rather than stray prose. The card hugs the measure instead of spanning the grid. A large statement treatment was tried and rejected the same day: it read as a wall of text. */ .intro .card{width:fit-content} .intro p{color:var(--fg-2);font-size:clamp(17px,1.5vw,19px);line-height:1.6;max-width:56ch;text-wrap:pretty} /* On phones the hero already ends in its own padding under the scene, so a second section gap on top of it left a blank screen-third before the intro. */ @media(max-width:959px){.intro .secin{padding-top:0}} /* -------------------------------------------------------------------------- 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 calc(var(--secpad) * 2);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} /* The face above a testimonial (Mario, 2026-09-22). Circular, so it reads as a person rather than a card: the design system's only other 999px radius is buttons and pills. Served at 400px for high-DPI screens and displayed at 200. */ .avatar{width:200px;height:200px;border-radius:999px;object-fit:cover;margin-bottom:18px} @media(max-width:719px){.avatar{width:160px;height:160px}} /* Order in a testimonial: face, then who they are, then what they said (Mario, 2026-09-22). The attribution belongs with the photo, so a reader knows whose words they are before reading them, rather than after. */ .cite{margin-top:28px;font-size:15px;color:var(--fg-2)} .avatar + .cite{margin-top:0} .cite + blockquote{margin-top:clamp(26px,3vw,34px)} .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 .cta-after{max-width:none;text-wrap:pretty} /* one sentence under the buttons: one line on desktop, no lone word below it */ .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:var(--mstickh);display:flex;align-items:center;gap:14px;justify-content:space-between} .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;max-width:none} .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) + var(--mstickh));z-index:30;background:var(--bg)} @media(min-width:960px){.scenecol{top:calc(var(--navh) + var(--mstickh) + (100vh - var(--navh) - var(--mstickh) - 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-min is no longer read: hero height follows content. Kept out of the templates too, so nothing sets a value that does nothing. */ @media(max-width:959px){.hero-short .hero-in{padding-bottom:calc(var(--hero-pad) + var(--hero-scene,44vh))}} /* care plans: the three worries overlap up into the hero */ .hero-care{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(var(--hero-pad) + 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)} /* Third-party embeds we do not control the inside of: Calendly on Fit Call, Google Appointment Scheduling on the Strategy Session. Both render their own white card, so and both are narrower than the measure, so both take embed-framed: the site's raised surface, radius and hairline, which gives the band an object instead of a floating card. .embed on its own is the unframed case, kept for an embed that fills the width itself. */ .embed{min-height:420px;isolation:isolate} .embed>iframe{display:block;width:100%;border:0;height:820px} /* The Google scheduler is a cross-origin iframe, so the page cannot measure its content and size to fit. These heights are set to clear the tallest state of the widget at each width, so the visitor never scrolls inside the frame. Re-check them if the event description in Google Calendar gets longer. */ @media(max-width:900px){.embed>iframe{height:1000px}} @media(max-width:700px){.embed>iframe{height:1240px}} .embed .calendly-inline-widget{width:100%} .embed-framed{background:var(--raised);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden} .embed-fallback{padding:clamp(24px,4vw,44px);color:var(--fg-2)} .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 The mark holds the left at a size nothing else on the page uses, with the studio line under it, and the links sit beside it in three labelled columns. One hairline, then the fine print. Link colour is the secondary ink, coral on hover, like body links. -------------------------------------------------------------------------- */ .footer{padding-block:clamp(56px,7vw,88px) 26px;border-top:1px solid var(--rule)} .footer a{text-decoration:none;color:var(--fg-2)} .footer a:hover{color:var(--accent-text)} .footer-in{display:grid;grid-template-columns:minmax(0,280px) 1fr;gap:clamp(40px,7vw,110px);align-items:start} .footer-mark{display:block;--logo-mark:var(--coral)} .footer-mark .icon{display:block;width:auto;height:clamp(112px,12vw,168px)} .footer-tag{color:var(--fg-2);font-size:14.5px;line-height:1.45;max-width:32ch;margin-top:22px} .footer-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px} .fcol h2{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--fg-3);font-weight:400;margin:0 0 16px;max-width:none} .fcol ul{list-style:none;display:flex;flex-direction:column;gap:11px;font-size:15px} .footer-base{margin-top:clamp(44px,6vw,72px);padding-top:22px;border-top:1px solid var(--rule); font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--fg-3); display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center} .footer-base a{color:var(--fg-3)} /* Below 820 the mark becomes a centred banner with the line under it, and the three columns fold to two: the short lists pair up and Elsewhere runs as a single row across the bottom. Everything stays in one measure. */ @media(max-width:820px){ .footer-in{grid-template-columns:1fr;gap:42px} .footer-brand{text-align:center} .footer-mark .icon{height:128px;margin-inline:auto} .footer-tag{margin:22px auto 0;max-width:26ch} .footer-cols{grid-template-columns:1fr 1fr;gap:32px 20px} .fcol-wide{grid-column:1 / -1} .fcol-wide ul{flex-direction:row;flex-wrap:wrap;gap:10px 22px} .footer-base{justify-content:center} } /* kept: the one-line note the scaffold shipped with, still used on nothing */ .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,.menu,.menu .menu-logo,.menu .menu-links a,.menu .menu-cta{transition:none} .menu .menu-logo,.menu .menu-links a,.menu .menu-cta{transform:none} .step:not(.on){opacity:1} } /* -------------------------------------------------------------------------- 16. Utilities -------------------------------------------------------------------------- */ .mt-0{margin-top:0} .pt-0{padding-top:0} .stackgap{display:flex;flex-direction:column;gap:18px} /* case study prose blocks */ .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} /* Skip link. Off-screen until focused, then it lands top-left over the nav. */ .skip{position:absolute;left:-9999px;top:0;z-index:100} .skip:focus{left:12px;top:12px;background:var(--raised);color:var(--fg); border:1px solid var(--rule);border-radius:var(--r-field);padding:10px 16px; font-family:var(--font-body);font-weight:500;font-size:15px;text-decoration:none} /* ---- legal pages: Termageddon policy body ------------------------------ */ /* Markup comes from tools/fetch-policy.js. Semantic, no inline styles. */ .policy{max-width:68ch} /* Long bare URLs in the generated policy (the Google opt-out link) overflowed at 320px. */ .policy a{overflow-wrap:anywhere} .policy p{max-width:none;margin:0 0 18px} .policy h3{font-size:22px;margin:44px 0 14px;letter-spacing:-.014em} .policy h3:first-of-type{margin-top:0} .policy h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--accent-text);font-weight:400;margin:24px 0 8px} .policy ul{margin:0 0 18px;padding-left:20px} .policy li{margin:0 0 6px} .policy a{color:var(--accent-text)} .policy .tg-last-updated-date{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em; color:var(--fg-3);margin-bottom:32px} .policy .tpt-section-heading{margin-top:0} /* the policy's own accordions are
, so they work without script */ .policy details{border-top:1px solid var(--rule);padding:14px 0} .policy details:last-of-type{border-bottom:1px solid var(--rule)} .policy summary{cursor:pointer;font-weight:500;list-style:none; display:flex;justify-content:space-between;align-items:baseline;gap:16px} .policy summary::-webkit-details-marker{display:none} .policy summary::after{content:"+";font-family:var(--font-mono);color:var(--accent-text);flex:none} .policy details[open] summary::after{content:"\2013"} .policy details[open] summary{margin-bottom:14px} .policy .table-responsive{overflow-x:auto} /* ---- blog posts -------------------------------------------------------- */ .post{max-width:var(--prose)} .post p{max-width:none;margin:0 0 20px} .post h2{font-size:clamp(28px,3.4vw,38px);max-width:24ch;margin:48px 0 16px;letter-spacing:-.018em} .post h2:first-child{margin-top:0} .post ul,.post ol{margin:0 0 20px;padding-left:20px} .post li{margin:0 0 8px} .post a{color:var(--accent-text)} .post strong{font-weight:700} .postmeta{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--fg-3);margin-bottom:34px} .postback{margin-top:44px} /* code blocks. No highlighter: one colour, monospace, horizontal scroll. */ .post pre{background:var(--raised);border:1px solid var(--rule);border-radius:var(--r-field); padding:18px 20px;margin:0 0 24px;overflow-x:auto} .post pre code{font-family:var(--font-mono);font-size:13.5px;line-height:1.6;color:var(--fg); background:none;padding:0;white-space:pre} .post :not(pre)>code{font-family:var(--font-mono);font-size:.92em;background:var(--raised); border:1px solid var(--rule);border-radius:6px;padding:1px 6px} .video{position:relative;aspect-ratio:16/9;margin:0 0 24px;border-radius:var(--r); overflow:hidden;background:var(--raised);border:1px solid var(--rule)} .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* ---- the featured image, under the heading ----------------------------- */ /* Contained to the prose column and shown whole: no crop, no overlay. */ .hero-noscene{--hero-scene:0px} /* A short text-only header does not need the hero-to-section rhythm that a */ /* full-height canvas hero earns. 214px of gap becomes about 90. */ .hero-noscene .hero-in{padding-bottom:clamp(16px,1.6vw,24px)} .hero-noscene + .sec > .secin{padding-top:clamp(16px,2vw,28px)} /* Blog posts only: the title runs to the same width as the featured image right below it, instead of the site-wide 12.5ch cap (Mario, 2026-09-22). At 1920 that was 822px of headline over a 1072px image, and the mismatch read as a mistake. Dropping the cap was not enough: text-wrap:balance evens line lengths out, so the lines stayed short of the edge. `pretty` fills each line and still protects the last one from a single stranded word. Marketing-page heroes keep both the cap and balance: nothing sits under them at another width. */ .hero-post h1{max-width:none;text-wrap:pretty} /* Image-led case studies too (Mario, 2026-09-23): the client name runs on one line over the image instead of breaking at the 12.5ch cap. It still wraps on a narrow screen. */ .hero-cs h1{max-width:none;text-wrap:pretty} .postfig{margin:0 0 44px} .postfig img{display:block;width:100%;height:auto;border-radius:var(--r); background:var(--obsidian);border:1px solid var(--rule)} .postfig figcaption{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em; color:var(--fg-3);margin-top:12px} /* ---- contact form: honeypot and status ---------------------------------- */ /* The honeypot is off-screen rather than display:none, because some bots */ /* skip fields they can tell are hidden. */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .formstatus{margin-top:14px;font-size:15px;max-width:44ch} .formstatus[data-state="ok"]{color:var(--fg)} .formstatus[data-state="error"]{color:var(--accent-text)} .form button[disabled]{opacity:.55;cursor:default} .cf-turnstile{margin-top:4px;min-height:65px} /* ---- case studies, image-led (CA Family Properties, 2026-09-23) ------------ */ /* The title, one image from the project, then the story with its images. The */ /* hero image uses the blog's .postfig look: whole, rounded, one hairline. */ .csfig{margin:0} .csrow{display:grid;grid-template-columns:1fr;gap:var(--grid-gap);margin-top:clamp(32px,4vw,56px)} @media(min-width:720px){.csrow{grid-template-columns:1fr 1fr}.csrow-1{grid-template-columns:1fr}} .csrow + .csrow{margin-top:var(--grid-gap)} .csrow img{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid var(--rule);background:var(--raised)} .cs-more{margin-top:clamp(48px,6vw,80px)} /* ---- the lightbox: case study images open large (2026-09-23) --------------- */ /* Each image is a .zoom button. site.js builds one .lb overlay per page, grows */ /* the image out of the thumbnail you clicked, and shrinks it back on close. */ .zoom{display:block;width:100%;padding:0;margin:0;border:0;background:none;border-radius:var(--r);cursor:zoom-in;overflow:hidden; font:inherit;color:inherit} .zoom img{transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .3s ease} @media(hover:hover){.zoom:hover img{transform:scale(1.012);filter:brightness(1.04)}} .zoom:focus-visible{outline:2px solid var(--focus);outline-offset:4px} .lb{position:fixed;inset:0;z-index:100;visibility:hidden} .lb.open{visibility:visible} .lb-bg{position:absolute;inset:0;background:rgba(8,4,4,.92);opacity:0;transition:opacity .38s ease} .lb.open .lb-bg{opacity:1} .lb-img{position:fixed;left:0;top:0;border-radius:var(--r);transform-origin:0 0;will-change:transform; box-shadow:0 30px 80px rgba(0,0,0,.45);cursor:zoom-out;user-select:none;-webkit-user-drag:none} .lb-img.anim{transition:transform .46s cubic-bezier(.2,.8,.2,1),border-radius .46s ease,opacity .26s ease} .lb-ui{opacity:0;transition:opacity .3s ease .12s} .lb.open.ready .lb-ui{opacity:1} .lb-close,.lb-nav{position:fixed;z-index:2;display:grid;place-items:center;width:48px;height:48px;border-radius:999px; border:1px solid rgba(255,248,240,.35);background:rgba(15,8,8,.55);color:#FFF8F0;cursor:pointer; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .18s ease,border-color .18s ease} .lb-close:hover,.lb-nav:hover{background:var(--coral);border-color:var(--coral);color:var(--obsidian)} .lb-close{top:18px;right:18px} .lb-nav{top:50%;margin-top:-24px} .lb-prev{left:18px}.lb-next{right:18px} .lb-close svg,.lb-nav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .lb-cap{position:fixed;left:0;right:0;bottom:18px;z-index:2;margin:0 auto;max-width:min(72ch,calc(100% - 40px));text-align:center; font-size:14px;line-height:1.45;color:#AA9593} .lb-count{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:#8E7B79;margin-right:10px} @media(max-width:719px){.lb-nav{display:none}.lb-close{top:12px;right:12px}.lb-cap{bottom:12px;font-size:13px}} html.lb-open{overflow:hidden} @media(prefers-reduced-motion:reduce){ .zoom img,.lb-bg,.lb-ui,.lb-img.anim{transition:none} .zoom:hover img{transform:none} }