/* It's Dinnertime! static page. Tokens are law: every colour, the two font names and the easing curve are GENERATED output, imported below, never typed here. See design/dinnertime-design/tokens.css for the values, the provenance (Theme.swift) and the measured contrast on every pair. check-tokens.sh guards against a bare hex creeping back into this file. Written MOBILE FIRST. Every screen-size rule is a min-width query placed directly under the component it widens, so nothing later in the file can quietly win the cascade back from a narrow-screen rule (which is exactly how the hero stopped stacking at 390px). */ @import url("design/dinnertime-design/tokens.css"); :root{ /* one spacing scale, four steps. Sections pick a step, never a bespoke gap. Spacing/width are a DIFFERENT system from the colour/type/motion tokens above: viewport clamp() steps against the app's fixed points, not drift (DESIGN_BRIEF §1). */ --dt-step-1:clamp(14px,3vw,22px); --dt-step-2:clamp(24px,4vw,38px); --dt-step-3:clamp(40px,6vw,64px); --dt-step-4:clamp(60px,9vw,104px); --dt-step-5:clamp(80px,12vw,144px); /* one width system. 1020px matches the header and footer chrome exactly. */ --dt-well:1020px; --dt-gutter:clamp(20px,4vw,44px); --dt-measure:34em; --dt-measure-tight:30em; } *{box-sizing:border-box} html{color-scheme:light} body{margin:0;background:var(--dt-ground);color:var(--dt-ink);font-family:var(--dt-sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} /* Links in running text take the accent; a bare anchor otherwise falls to the browser's blue, which no hex scan can see. */ a{color:var(--dt-accent)} a:focus-visible,button:focus-visible{outline:2px solid var(--dt-accent);outline-offset:3px;border-radius:6px} .dt-well{max-width:var(--dt-well);margin:0 auto;padding:0 var(--dt-gutter)} /* ---------- type scale. Every step moves size AND weight or leading. ---------- */ .dt-display{font-family:var(--dt-serif);font-weight:600;font-size:clamp(38px,8.4vw,68px);line-height:1.02;letter-spacing:-.022em;margin:0;text-wrap:balance} h2.dt-h2{font-family:var(--dt-serif);font-weight:600;font-size:clamp(28px,4.6vw,44px);line-height:1.1;letter-spacing:-.015em;margin:0 0 var(--dt-step-1);text-wrap:balance} .dt-lede{font-size:clamp(17px,2.2vw,20px);line-height:1.5;color:var(--dt-ink-2);margin:0;max-width:var(--dt-measure)} .dt-body{font-size:16px;line-height:1.6;margin:0 0 12px;max-width:36em} .dt-caption{font-size:13px;line-height:1.45;font-weight:500;color:var(--dt-ink-2);margin:12px 0 0;max-width:36em} .dt-eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dt-accent);font-weight:600;margin:0 0 14px} /* ---------- the device. One component, every screenshot on the page sits in it. ---------- Size is driven only by --dt-dev-w, and every other measurement is a multiple of it, so the bezel, the corner radius and the Dynamic Island all scale together. --dt-dev-w must never be a percentage: border-radius resolves percentages against the box's own two axes, which on a 9:19.5 box gives an egg rather than a phone. */ .dt-device{ --dt-dev-w:280px; position:relative; width:var(--dt-dev-w); max-width:100%; margin-inline:auto; padding:calc(var(--dt-dev-w) * .037); /* 10.4px at 280, 12px at 320 */ border-radius:calc(var(--dt-dev-w) * .185); /* 52px at 280 */ background:var(--dt-ink); box-shadow: inset 0 0 0 1px rgba(255,253,248,.13), 0 2px 3px rgba(28,28,23,.18), 0 22px 48px rgba(28,28,23,.22); } .dt-device img,.dt-device video{ width:100%; height:auto; border-radius:calc(var(--dt-dev-w) * .148); background:var(--dt-surface); display:block; } /* the Press loop is 720x1564, a hair wider than the 570x1240 box the poster sets; contained, it letterboxed half a pixel of surface at the top and bottom while playing (the owner, 2026-09-07: "what is this white line"). Cover crops a fifteenth of a percent instead. */ .dt-device video{object-fit:cover} /* the Dynamic Island, sitting over the screenshot's own status bar */ .dt-device::after{ content:"";position:absolute;z-index:1; top:calc(var(--dt-dev-w) * .066); left:50%;transform:translateX(-50%); width:calc(var(--dt-dev-w) * .30); height:calc(var(--dt-dev-w) * .088); border-radius:999px; background:rgba(0,0,0,.72); } /* a real phone's own island: the Press chapter's frame comes from a screen recording, island expanded around the app's mark, so the drawn one would double it (the owner, 2026-09-06 17:15: "Two Dynamic Islands") */ .dt-device--real::after{display:none} /* ---------- hero ---------- */ .dt-hero{position:relative;padding:var(--dt-step-3) 0 var(--dt-step-4);background:var(--dt-ground)} .dt-hero__grid{display:grid;grid-template-columns:1fr;gap:var(--dt-step-3);align-items:center} .dt-hero__say{text-align:center;max-width:22em;margin-inline:auto} .dt-hero .dt-lede{margin:var(--dt-step-1) auto 0} .dt-hero__door{margin-top:var(--dt-step-2);display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center} .dt-hero__phone{--dt-dev-w:clamp(212px,70vw,300px)} @media (min-width:880px){ .dt-hero__grid{grid-template-columns:53fr 47fr;gap:clamp(32px,5vw,72px);align-items:center} .dt-hero__say{text-align:left;margin-inline:0;max-width:none} .dt-hero .dt-lede{margin-left:0;margin-right:0} .dt-hero__door{justify-content:flex-start} .dt-hero__phone{--dt-dev-w:clamp(260px,26vw,330px)} } /* ---------- chapters I-III: Save, Shop, Cook. Hard cuts, no crossfade. ---------- Each chapter is its own full-bleed
, ground alternating with surface (DESIGN_BRIEF §4/§6), so the boundary between them reads as a cut rather than a scroll. No sticky pinned frame, no crossfade: media sits in its own column next to its own text, alternating sides via .dt-moment--flip, exactly as it does at every viewport width (mobile-first: there is no separate "desktop" behaviour to layer back on top any more). */ .dt-moments-intro{padding-top:var(--dt-step-4);padding-bottom:var(--dt-step-3);text-align:center;max-width:26em;margin-inline:auto} .dt-moments-intro .dt-lede{margin-inline:auto;text-wrap:balance} .dt-chapter{padding:var(--dt-step-3) 0} /* every chapter on the ground. Two of the four sat on the surface tint, which on a phone read as a white slab around the Press loop (the owner, 2026-09-09: "white borders around the gif"); the verb and the chapter padding carry the rhythm instead */ .dt-chapter--ground{background:var(--dt-ground)} .dt-moment{display:grid;grid-template-columns:1fr;gap:var(--dt-step-2)} .dt-verb{font-family:var(--dt-serif);font-weight:600;font-size:clamp(26px,4vw,36px);line-height:1.12;letter-spacing:-.012em;margin:0 0 var(--dt-step-1);display:block} .dt-protag{display:inline-block;margin-left:10px;padding:3px 10px;border-radius:999px;background:var(--dt-accent);color:var(--dt-on-accent);font-family:var(--dt-sans);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;line-height:1.4} .dt-plate{--dt-dev-w:clamp(212px,64vw,300px);justify-self:center} .dt-marks{list-style:none;margin:var(--dt-step-1) 0;padding:0;display:flex;gap:10px;flex-wrap:wrap} .dt-marks li{margin:0} .dt-marks img{width:40px;height:40px;border-radius:9px;box-shadow:0 1px 2px rgba(28,28,23,.12)} .dt-facts{margin:8px 0 0;padding-left:0;list-style:none;max-width:var(--dt-measure)} .dt-facts li{position:relative;padding-left:18px;margin:0 0 8px;line-height:1.5} .dt-facts li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--dt-accent)} @media (min-width:880px){ .dt-chapter{padding:var(--dt-step-4) 0} .dt-moment{grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center} .dt-moment--flip .dt-moment__text{order:2} .dt-plate{--dt-dev-w:clamp(250px,25vw,320px)} } /* ---------- mid-page App Store badges: the same .dt-badge component as the hero, repeated after the chapters and again above the Pro band, so a visitor sold partway down has something to tap without scrolling back up (SITE-CONVERSION-PLAN-2026-09-07.md item 5). ---------- */ .dt-mid-cta{padding:var(--dt-step-4) 0;text-align:center} /* ---------- and the rest of it: one centred sequence, never a grid of tiles ---------- */ .dt-depth{padding-top:var(--dt-step-4)} .dt-depth__say{text-align:center;max-width:26em;margin-inline:auto} .dt-depth__say .dt-lede{margin-inline:auto;text-wrap:balance} .dt-features{margin:var(--dt-step-3) auto 0;display:flex;flex-direction:column;gap:var(--dt-step-4)} .dt-feature{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--dt-step-2);text-align:center} .dt-feature__say{max-width:var(--dt-measure-tight);margin-inline:auto} .dt-feature__p{text-wrap:pretty} .dt-feature__h{font-family:var(--dt-serif);font-weight:600;font-size:clamp(22px,3.4vw,30px);line-height:1.15;letter-spacing:-.012em;margin:0 0 10px;text-wrap:balance} .dt-feature__p{font-size:16px;line-height:1.6;color:var(--dt-ink-2);margin:0} .dt-feature .dt-marks{justify-content:center;margin-bottom:0} .dt-feature .dt-device{--dt-dev-w:clamp(212px,62vw,286px)} .dt-pair{display:flex;flex-direction:column;gap:var(--dt-step-4)} .dt-pair .dt-feature .dt-device{--dt-dev-w:clamp(200px,56vw,254px)} .dt-depth__more{margin:var(--dt-step-4) auto 0;max-width:var(--dt-measure-tight);text-align:center;color:var(--dt-ink-2)} @media (min-width:880px){ .dt-features{max-width:900px} .dt-feature .dt-device{--dt-dev-w:clamp(240px,24vw,300px)} /* subgrid keeps the two devices on one baseline even when one headline wraps. Where subgrid is unsupported the declaration is dropped and the pair stays a plain two-column grid, which is the layout it has today. */ .dt-pair{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;column-gap:clamp(32px,5vw,64px);row-gap:var(--dt-step-2);align-items:start} .dt-pair>.dt-feature{display:grid;grid-template-rows:subgrid;grid-row:span 2;justify-items:center;min-width:0} .dt-pair .dt-feature .dt-device{--dt-dev-w:clamp(190px,19vw,244px)} .dt-pair .dt-feature__say{max-width:22em} } /* ---------- privacy, on surface ---------- */ .dt-privacy{margin:var(--dt-step-4) 0 0;background:var(--dt-surface);border:1px solid var(--dt-hair);border-radius:22px;padding:clamp(24px,4vw,44px)} .dt-privacy ul{margin:var(--dt-step-1) 0 0;padding-left:20px;max-width:40em} .dt-privacy li{margin:0 0 8px} /* ---------- pro: the peak. The one Committed band on the page (DESIGN_BRIEF §5): a real dish photograph, Mulberry ground, no text over the photo. Copy sits below it on mobile, beside it from 760px. Everything after this band (the pricing rows) stays on --dt-surface: nothing outweighs the photo. ---------- */ .dt-pro{padding-top:var(--dt-step-4)} .dt-pro__peak{background:var(--dt-accent);border-radius:24px;overflow:hidden;display:grid;grid-template-columns:1fr;margin-bottom:var(--dt-step-2)} .dt-pro__peak img{width:100%;height:auto;display:block} .dt-pro__peak-say{padding:clamp(22px,4vw,40px);color:var(--dt-on-accent)} .dt-pro__peak-say .dt-eyebrow{color:var(--dt-on-accent)} .dt-pro__peak-say .dt-h2{color:var(--dt-on-accent);margin-bottom:10px} .dt-pro__peak-say .dt-lede{color:var(--dt-on-accent);max-width:none} @media (min-width:760px){ .dt-pro__peak{grid-template-columns:1.1fr 1fr;align-items:stretch} .dt-pro__peak img{height:100%;object-fit:cover} .dt-pro__peak-say{display:flex;flex-direction:column;justify-content:center} } .dt-pro__panel{background:var(--dt-surface);border:1px solid var(--dt-hair);border-radius:24px;padding:clamp(24px,4vw,44px)} .dt-prices{display:grid;grid-template-columns:1fr;gap:clamp(12px,2vw,20px);margin:var(--dt-step-2) 0;align-items:stretch} .dt-price{position:relative;display:flex;flex-direction:column;gap:2px;padding:20px 20px 18px;border-radius:18px;border:1px solid var(--dt-hair);background:var(--dt-ground)} .dt-price__amount{font-family:var(--dt-serif);font-weight:700;font-size:clamp(28px,3.4vw,38px);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums} .dt-price__per{font-size:15px;color:var(--dt-ink-2);margin-top:4px} .dt-price__note{font-size:13px;line-height:1.45;color:var(--dt-ink-2);margin-top:12px} .dt-price--featured{background:var(--dt-accent);border-color:var(--dt-accent);color:var(--dt-on-accent);padding-top:44px;box-shadow:0 18px 40px rgba(148,49,112,.22)} .dt-price--featured .dt-price__per,.dt-price--featured .dt-price__note{color:var(--dt-on-accent);opacity:.92} .dt-price__tag{position:absolute;top:12px;left:20px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dt-accent);background:var(--dt-surface);padding:2px 9px;border-radius:999px} .dt-pro__cols{display:grid;grid-template-columns:1fr;gap:var(--dt-step-2);margin-top:8px} .dt-pro__h{font-family:var(--dt-sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dt-accent);font-weight:600;margin:0 0 10px} .dt-facts--quiet li{color:var(--dt-ink-2)} .dt-facts--quiet li::before{background:var(--dt-hair)} .dt-pro .dt-caption{margin-top:18px} @media (min-width:760px){ .dt-prices{grid-template-columns:1.25fr 1fr 1fr} .dt-pro__cols{grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,48px)} } /* ---------- close: a colophon in tone, small type throughout (DESIGN_BRIEF §4/§6). The CTA is a real .dt-badge, not underlined running text (a plain 44px-tall underlined phrase still read as running text, not a button, at the page's highest-intent moment), and the section no longer carries .dt-reveal: it is the last thing on the page, so nothing below it needs a scroll threshold, and the IntersectionObserver's rootMargin never fired for a target this close to document end. SITE-CONVERSION-PLAN-2026-09-07.md item 2. ---------- */ .dt-close{text-align:center;padding-top:var(--dt-step-4);padding-bottom:var(--dt-step-4)} .dt-close__say{font-size:16px;line-height:1.6;color:var(--dt-ink-2);max-width:30em;margin:0 auto} .dt-close__cta{margin-top:var(--dt-step-2)} .dt-close .dt-llc,.dt-close .dt-credit{font-size:13px;color:var(--dt-ink-2);margin:8px 0 0} /* ---------- motion. Curves and durations from the brief; every rule has its Reduced Motion twin. No parallax remains anywhere on the page (DESIGN_BRIEF §7): the scroll-linked .dt-drift transform and the pinned crossfade frame are both gone, not merely hidden. Reveals are opacity + a few px of travel, under 500ms, and extend to every chapter boundary via the same .dt-reveal/.dt-in mechanism used everywhere else on the page. ---------- */ .dt-js .dt-reveal{opacity:0;transform:translateY(14px);transition:opacity .42s var(--dt-ease-out),transform .42s var(--dt-ease-out)} .dt-js .dt-reveal.dt-in{opacity:1;transform:none} .dt-js .dt-feature.dt-reveal{transition-duration:.38s} .dt-js .dt-pair>.dt-feature:nth-child(2){transition-delay:90ms} @keyframes dtRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @keyframes dtFade{from{opacity:0}to{opacity:1}} .dt-js .dt-hero__say{animation:dtRise .42s var(--dt-ease-out) both} .dt-js .dt-hero__phone{animation:dtRise .42s var(--dt-ease-out) 80ms both} html.dt-reduce .dt-reveal{transform:none;transition:opacity .42s ease-out} html.dt-reduce .dt-hero__say,html.dt-reduce .dt-hero__phone{animation-name:dtFade} @media (prefers-reduced-motion:reduce){ .dt-js .dt-reveal{transform:none} .dt-badge:hover{transform:none} } /* ---- site chrome, snapshotted 2026-09-03 from the live page, drift closed 2026-09-06 ---- */ /* Extracted 2026-09-03 from https://smarthomelifellc.com/dinnertime/ These are the page's own inline