/* ============================================================ product.css — shared shell for all Mochi Labs product pages House layer: tokens, shell, layout, components (never varies) Product layer: token block per [data-product] (the only variance) No product name appears in a selector below the token block. ============================================================ */ @font-face{font-family:'Poppins';font-weight:400;src:url("fonts/poppins400.woff2") format('woff2');font-display:swap} @font-face{font-family:'Poppins';font-weight:600;src:url("fonts/poppins600.woff2") format('woff2');font-display:swap} @font-face{font-family:'Poppins';font-weight:700;src:url("fonts/poppins700.woff2") format('woff2');font-display:swap} /* ---------- house tokens (mirrors style.css) ---------- */ :root{ --bg:#0B0B10; --panel:#14141B; --line:#262531; --ink:#F2F0F7; --muted:#9A94AC; --pink:#F06693; --yellow:#FFD960; --matcha:#B1D684; --pill-bg:#F2F0F7; --pill-ink:#0B0B10; --ctl:#262531; --hair:rgba(242,240,247,.10); /* hairline on dark */ color-scheme:dark; } :root[data-theme="light"]{ --bg:#F7F5EF; --panel:#FFFFFF; --line:#E4E1D5; --ink:#191820; --muted:#6E6A78; --pill-bg:#191820; --pill-ink:#F7F5EF; --ctl:rgba(25,24,32,.5); --hair:rgba(25,24,32,.12); color-scheme:light; } /* ---------- product layer: the only per-product variance ---------- Each product declares its display face + tokens here, and pins ONE theme in its HTML (). Product pages have no theme toggle: a product's palette is art direction, not a preference. grokblock pins dark; its UI screenshots and yellow are dark-native. The house light tokens above stay for light-pinned products. Nothing below this block may name a product. */ @font-face{font-family:'Archivo Black';font-weight:400; src:url("grokblock/fonts/archivo-black.woff2") format('woff2');font-display:swap} @font-face{font-family:'Archivo';font-weight:700; src:url("adios/fonts/archivo-700.woff2") format('woff2');font-display:swap} /* Each product declares SIX tokens. The -text pair exists because a brand color that sings as a fill usually fails as text on the light paper bg: grokblock yellow is 13.7:1 on ink but 1.3:1 on paper. Fills use --accent, text uses --accent-text. Both -text values must clear WCAG AA (4.5:1) against --bg in their own theme. Verified values below. */ :root[data-product="grokblock"]{ --accent:#FFD400; /* fills: buttons, CTA band, marquee, rules */ --accent-2:#E8493A; --accent-text:#FFD400; /* 13.72:1 on --bg dark */ --accent-2-text:#E8493A; /* 6.20:1 on --bg dark */ --accent-ink:#000; /* text on --accent: 14.67:1 */ --display:'Archivo Black','Poppins',system-ui,sans-serif; --display-tight:-.01em; } /* gelp pins light: its UI, Yelp and Google are all light-native. Blue carries interaction, Yelp red is the secondary mark. Display is Poppins 700, so gelp adds no font weight to the page. */ :root[data-product="gelp"]{ --accent:#2C41D8; /* white on it: 7.36:1 */ --accent-2:#D32323; /* yelp red */ --accent-text:#2C41D8; /* 6.75:1 on paper */ --accent-2-text:#B01B1B; /* 6.38:1 on paper */ --accent-ink:#FFFFFF; --display:'Poppins',system-ui,sans-serif; --display-weight:700; --display-tight:-.02em; } /* adios pins light: the hero art is a white brick wall. The bright spray blue #0E8CF0 is 3.20:1 on paper and cannot carry white text (3.48:1), so interaction uses the site's own --blue-deep. The bright blue stays where it belongs: in the artwork. */ :root[data-product="adios"]{ --accent:#0A6BCF; /* white on it: 5.23:1 */ --accent-2:#FFC42E; /* decorative fill only, 1.46:1 on paper */ --accent-text:#0A6BCF; /* 4.80:1 on paper */ --accent-2-text:#8A6300; /* dark amber for the rare text use */ --accent-ink:#FFFFFF; --display:'Archivo',system-ui,sans-serif; --display-weight:700; --display-tight:-.02em; } /* plainpaste pins light: Google Docs is light and both screenshots are light. The accent is deep teal, deliberately not a third blue, and set against Google's own #1A73E8 which appears only inside the screenshots as the thing being bypassed. */ :root[data-product="plainpaste"]{ --accent:#0F766E; /* white on it: 5.47:1 */ --accent-2:#B3541E; --accent-text:#0F766E; /* 5.02:1 on paper */ --accent-2-text:#B3541E; /* 4.58:1 on paper */ --accent-ink:#FFFFFF; --display:'Poppins',system-ui,sans-serif; --display-weight:700; --display-tight:-.02em; } /* ---------- reset / base ---------- */ *{box-sizing:border-box} html{scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--bg);color:var(--ink); font:400 16.5px/1.75 'Poppins',system-ui,sans-serif; -webkit-font-smoothing:antialiased;overflow-x:hidden; transition:background .35s,color .35s; } img{max-width:100%;height:auto;display:block} /* height:auto is load-bearing: without it a capped width keeps the attribute height and squashes the image */ a{color:inherit} :where(a,button,summary):focus-visible{outline:2px solid var(--pink);outline-offset:4px;border-radius:2px} ::selection{background:var(--accent);color:var(--accent-ink)} .wrap{max-width:1120px;margin:0 auto;padding:0 28px} @media(max-width:640px){.wrap{padding:0 22px}} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------- type ---------- */ .display{font-family:var(--display);font-weight:var(--display-weight,400);letter-spacing:var(--display-tight);line-height:.92;margin:0} .d-xl{font-size:clamp(2.8rem,9vw,7rem)} .d-lg{font-size:clamp(1.85rem,4vw,2.9rem)} .d-md{font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:1.15} .d-sm{font-size:1.12rem;line-height:1.2} .d-page{font-size:clamp(2.3rem,5.6vw,4rem)} /* sub-page h1: above .creed, below the landing hero */ .label{font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)} .lede{font-size:clamp(1.05rem,1.9vw,1.35rem);line-height:1.55;color:var(--ink);opacity:.85;max-width:34ch} .prose{max-width:70ch} .prose p{color:var(--muted);line-height:1.8} .accent{color:var(--accent-text)} .accent-2{color:var(--accent-2-text)} /* ---------- house seal: the studio signature strip ---------- Named .house-seal, not .seal: style.css already uses .seal for the contact-section dango canvas. Keep these distinct. */ .house-seal{height:3px;width:100%;background:linear-gradient(90deg, var(--pink) 0 33.333%, var(--yellow) 33.333% 66.666%, var(--matcha) 66.666% 100%)} /* ---------- top bar ---------- */ .bar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--hair)} .bar-in{display:flex;align-items:center;justify-content:space-between;gap:16px; max-width:1120px;margin:0 auto;padding:12px 28px} .crumb{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:13px;letter-spacing:.04em} .crumb .mark{width:auto;height:32px} .crumb .home{color:var(--muted);transition:color .2s} .crumb:hover .home{color:var(--ink)} .crumb .sep{color:var(--muted);opacity:.5} .crumb .here{color:var(--ink)} .bar-links{display:flex;align-items:center;gap:20px} .bar-links a{text-decoration:none;font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);transition:color .2s} .bar-links a:hover{color:var(--ink)} @media(max-width:640px){.bar-links .hide-sm{display:none}} /* the 3-segment crumb (lockup / product / page) overflows 390px at 32px. 28 is the floor threshold, so the ratio is unchanged, just smaller. */ @media(max-width:480px){.crumb .mark{height:28px}} @media(max-width:400px){ .crumb .mark{height:24px} /* drop the middle segment: [mark] / grokblock / manifesto -> [mark] / manifesto. .home only exists on sub-pages, so landing crumbs are untouched. */ .crumb .home,.crumb .home+.sep{display:none} } /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:12px;text-decoration:none; font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase; padding:16px 26px;border:2px solid transparent;transition:background .2s,color .2s,border-color .2s} .btn img,.btn svg{width:16px;height:auto} .btn-primary{background:var(--accent);color:var(--accent-ink)} .btn-primary:hover{background:var(--ink);color:var(--bg)} .btn-ghost{border-color:var(--ink);color:var(--ink)} .btn-ghost:hover{background:var(--ink);color:var(--bg)} /* .icon-mono: a white-glyph PNG that must track the ink color it sits next to, so it stays visible in both themes and on hover-invert. */ .icon-mono{transition:filter .2s} :root[data-theme="light"] .icon-mono{filter:invert(1)} .btn-ghost:hover .icon-mono{filter:invert(1)} :root[data-theme="light"] .btn-ghost:hover .icon-mono{filter:none} @media(prefers-reduced-motion:reduce){.icon-mono{transition:none}} .btn-invert{background:var(--accent-ink);color:var(--accent)} .btn-invert:hover{background:#222} .btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px} /* ---------- section rhythm ---------- */ .sec{border-bottom:1px solid var(--hair)} .sec-in{padding-block:110px} /* padding-block, not the shorthand: these classes share an element with .wrap and the shorthand wiped its side padding */ @media(max-width:720px){.sec-in{padding-block:64px}} .eyebrow{margin-bottom:22px} .sec-head{display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:end;margin-bottom:56px} .sec-head p{color:var(--muted);font-size:15.5px;line-height:1.7;margin:0} @media(max-width:860px){.sec-head{grid-template-columns:1fr;gap:24px;margin-bottom:40px}} /* ---------- hero ---------- */ .hero-in{padding-block:72px 88px} .tagrow{display:flex;align-items:flex-start;gap:12px;margin-bottom:44px} .tagrow .label{flex:1} .tagrow .sq{margin-top:.42em} /* align to the first line: the label wraps to 2-3 lines on mobile and centring left the square beside the middle one */ .tagrow .sq{width:8px;height:8px;background:var(--accent-2);flex:none} .hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:center;margin-top:56px} .hero-grid>*{min-width:0} /* else a long word floors the column width and overflows */ @media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:44px}.hero-in{padding-block:48px 64px}} .quote{margin:44px 0 0;border-left:4px solid var(--accent);padding-left:24px;max-width:34ch} .quote p{margin:0;font-family:var(--display);font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.08} .quote footer{display:flex;align-items:center;gap:10px;margin-top:14px} .stars{color:var(--accent-text);letter-spacing:.1em} .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair); border-block:1px solid var(--hair);margin-top:44px;max-width:34rem} @media(max-width:420px){.stats{grid-template-columns:1fr 1fr}} .stat{background:var(--bg);padding:20px 16px;min-width:0} .stat b{display:block;font-family:var(--display);font-size:1.9rem;font-weight:400;line-height:1;white-space:nowrap} .stat>span{display:block;margin-top:6px} /* direct child only: the accent span inside must stay inline */ .shot{border:2px solid var(--accent);background:var(--panel); width:fit-content;max-width:100%;margin-inline:auto} /* hug the image: it is a UI screenshot at native 380px, so upscaling it to fill the column would soften the text */ /* ---------- set-piece: marquee ---------- */ .marquee{background:var(--accent);color:var(--accent-ink);padding:16px 0;overflow:hidden; border-bottom:1px solid var(--hair)} .marquee-track{display:flex;width:max-content;animation:slide 42s linear infinite} .marquee-track span{display:flex;align-items:center;gap:44px;padding-right:44px; font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.marquee-track{animation:none}} /* ---------- grids ---------- */ .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} @media(max-width:960px){.grid-4{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr}} @media(max-width:640px){.grid-2,.grid-4{grid-template-columns:1fr}} .cell{background:var(--panel);padding:30px} .cell .n{font-family:var(--display);font-size:1.75rem;color:var(--accent-text);line-height:1;margin-bottom:20px} .cell .n-2{color:var(--accent-2-text);font-size:1.5rem;margin-bottom:16px} .cell h3{margin:0 0 10px;font-family:var(--display);font-weight:400} .cell p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.7} .panel{background:var(--panel);padding:16px} .panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} /* ---------- faq ---------- */ .faq{border-block:1px solid var(--hair);max-width:56rem} .faq details{border-bottom:1px solid var(--hair);padding:22px 0} .faq details:last-child{border-bottom:0} .faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px} .faq summary::-webkit-details-marker{display:none} .faq summary span:first-child{font-family:var(--display);font-size:clamp(1.05rem,1.7vw,1.25rem);line-height:1.25} .faq .plus{font-family:var(--display);font-size:1.7rem;color:var(--accent-text);transition:transform .25s;flex:none} .faq details[open] .plus{transform:rotate(45deg)} @media(prefers-reduced-motion:reduce){.faq .plus{transition:none}} .faq details p{margin:16px 0 0;color:var(--muted);max-width:70ch} /* ---------- final cta band ---------- */ .cta{background:var(--accent);color:var(--accent-ink)} .cta .cta-in{padding-block:96px;display:grid;grid-template-columns:2fr 1fr;gap:56px;align-items:end} @media(max-width:860px){.cta .cta-in{grid-template-columns:1fr;gap:36px;padding-block:64px}} .cta-btns{display:flex;flex-direction:column;gap:12px} .cta .btn{justify-content:space-between} /* ---------- footer ---------- */ .foot{background:var(--bg);padding:56px 0 40px} .foot-grid{display:flex;flex-wrap:wrap;gap:36px 80px} .foot-grid>*{flex:0 0 auto} /* no column grows: they cluster left instead of the brand expanding and shoving the rest away */ .foot-grid>:first-child{min-width:170px} @media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}} .foot h4{margin:0 0 16px;font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)} .foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px} .foot a{text-decoration:none;color:var(--ink);opacity:.75;font-size:14.5px;transition:opacity .2s,color .2s} .foot a:hover{opacity:1;color:var(--accent-text)} .foot a[aria-current="page"]{opacity:1;color:var(--muted);cursor:default} .bar-links [aria-current="page"]{color:var(--ink)} .foot-mark{display:inline-flex;align-items:center;text-decoration:none} .foot-mark .mark{width:auto;height:32px} .foot-note{margin-top:44px;padding-top:22px;border-top:1px solid var(--hair); display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between} /* ---------- sub-pages (prose: manifesto, guide, legal) ---------- */ .page-head{padding:64px 0 44px;border-bottom:1px solid var(--hair)} .page-head h1{margin:14px 0 0} .page-head .lede{margin:20px 0 0;max-width:44ch} .page-body{padding:56px 0 96px} .prose>*{margin:0} .prose>*+*{margin-top:24px} .prose h2{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.6vw,1.9rem); line-height:1.15;margin-top:52px;letter-spacing:var(--display-tight)} .prose h3{font-family:var(--display);font-weight:400;font-size:1.12rem;line-height:1.25;margin-top:34px} .prose p{color:var(--muted);line-height:1.8} .prose strong{color:var(--ink);font-weight:600} .prose em{font-style:normal;color:var(--ink);font-weight:600} .prose ul{margin:0;padding-left:1.1em;color:var(--muted);line-height:1.8} .prose li+li{margin-top:10px} .prose li::marker{color:var(--accent-text)} .prose a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px} .prose a:hover{color:var(--ink)} .prose .kicker{color:var(--ink);font-size:1.15rem;line-height:1.65} .rule{border:0;border-top:1px solid var(--hair);margin:52px 0} .stamp{color:var(--muted);font-size:12.5px} /* manifesto set-pieces */ .creed{padding:72px 0;border-bottom:1px solid var(--hair)} .creed p{margin:0;font-family:var(--display);font-weight:400;line-height:1.02; font-size:clamp(1.9rem,4.6vw,3.4rem);letter-spacing:var(--display-tight)} .numbered{list-style:none;margin:0;padding:0;display:grid;gap:40px} .numbered li{display:grid;grid-template-columns:88px 1fr;gap:24px;align-items:start} @media(max-width:640px){.numbered li{grid-template-columns:1fr;gap:8px}} .numbered .n{font-family:var(--display);font-size:2rem;color:var(--accent-text);line-height:1} .numbered p{margin:0;color:var(--muted);font-size:1.02rem;line-height:1.75} .numbered .mono{color:var(--ink);font-weight:600} .beliefs{list-style:none;margin:0;padding:0;display:grid;gap:26px} .beliefs li{background:var(--panel);padding:26px 28px} .beliefs b{display:block;font-family:var(--display);font-weight:400; font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.2} .beliefs span{display:block;margin-top:10px;color:var(--muted);font-size:14px} .pledge{display:grid;grid-template-columns:1fr 1fr;gap:56px} @media(max-width:800px){.pledge{grid-template-columns:1fr;gap:40px}} .pledge h3{font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,2.6vw,1.8rem);margin:0 0 24px} .pledge ul{list-style:none;margin:0;padding:0;display:grid;gap:14px} .pledge li{color:var(--muted);line-height:1.6;padding-left:26px;position:relative} .pledge li::before{position:absolute;left:0;top:0;font-weight:700} .pledge .wont li::before{content:"\00d7";color:var(--accent-2-text)} .pledge .will li::before{content:"\2192";color:var(--accent-text)} /* ---------- set-piece: gelp's two-into-one split ---------- */ .split-band{background:var(--panel);border-block:1px solid var(--hair);padding:72px 0} .split{display:grid;grid-template-columns:1fr 2fr 1fr;gap:28px;align-items:center;margin-top:28px} @media(max-width:760px){.split{grid-template-columns:1fr;gap:18px}} .split-side{display:grid;gap:4px} .split-side.right{text-align:right} @media(max-width:760px){.split-side.right{text-align:left}} .split-name{font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase} .split-side b{font-family:var(--display);font-weight:var(--display-weight,400); font-size:clamp(2rem,4vw,2.8rem);line-height:1} .split-bar{position:relative;height:14px;border-radius:999px;background:var(--accent);overflow:hidden} .split-bar i{position:absolute;inset:0 auto 0 0;background:var(--accent-2);display:block} .split-out{margin:26px 0 0;color:var(--muted);font-size:1.02rem} .split-out strong{color:var(--ink);font-weight:600} /* ---------- set-piece: adios spray ---------- */ .spray{position:relative;background:var(--panel);border-block:1px solid var(--hair);overflow:hidden} .spray-in{padding:0} .spray img{width:100%;height:auto;display:block} .strike{position:relative;display:inline-block;white-space:nowrap} .strike::after{content:"";position:absolute;left:-2%;right:-2%;top:52%;height:.14em; background:var(--accent);border-radius:999px;transform:rotate(-1.6deg)} .removals{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1px; background:var(--hair);border:1px solid var(--hair)} @media(max-width:720px){.removals{grid-template-columns:1fr}} .removals li{background:var(--bg);padding:20px 22px;display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start} .removals li:last-child:nth-child(odd){grid-column:1/-1} /* odd count would leave a dead cell */ .removals .x{color:var(--accent-text);font-weight:700;line-height:1.5} .removals b{display:block;font-weight:600;font-size:15px} .removals span{display:block;color:var(--muted);font-size:13.5px;line-height:1.6;margin-top:3px} .tiers{display:grid;grid-template-columns:1fr 1fr;gap:24px} @media(max-width:760px){.tiers{grid-template-columns:1fr}} .tier{background:var(--panel);padding:32px;display:flex;flex-direction:column;gap:14px} .tier.pro{outline:2px solid var(--accent);outline-offset:-2px} .tier h3{margin:0;font-family:var(--display);font-weight:var(--display-weight,400);font-size:1.5rem} .tier .price{font-family:var(--display);font-weight:var(--display-weight,400);font-size:2.2rem;line-height:1} .tier p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.7} .tier .btn{margin-top:auto;align-self:flex-start} .legal{color:var(--muted);font-size:12.5px;line-height:1.7;max-width:80ch} /* ---------- set-piece: plainpaste's two-frame problem ---------- */ .frames{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:start;margin-top:36px} /* start, not center: the two shots have very different aspect ratios, so centering floated them at different heights instead of reading as a pair */ @media(max-width:860px){.frames{grid-template-columns:1fr;gap:20px}} .frame{background:var(--panel);border:1px solid var(--hair);padding:14px} .frame img{width:100%;height:auto} .frame figcaption{margin-top:12px;color:var(--muted);font-size:13px;line-height:1.6} .frames .arrow{font-family:var(--display);font-weight:var(--display-weight,400); font-size:2rem;color:var(--accent-2-text);text-align:center;align-self:center} @media(max-width:860px){.frames .arrow{transform:rotate(90deg)}} .verdict{margin:34px 0 0;font-size:1.05rem;color:var(--muted);max-width:60ch} .verdict strong{color:var(--ink);font-weight:600} .soon{display:inline-flex;align-items:center;gap:12px;padding:16px 26px; border:2px dashed var(--accent);color:var(--accent-text); font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase}