— or on a slot, where the code-drawn stand-in and the path note still do their job:

. */ .cut{ display:grid;place-items:center; aspect-ratio:1/1; background:radial-gradient(58% 58% at 50% 56%, var(--accent-soft), transparent 72%); } .cut img{width:100%;height:100%;object-fit:contain} .cut-xs{max-width:110px} /* an icon inside a card */ .cut-s{max-width:210px} .cut-m{max-width:340px} .slot.cut{border:0;box-shadow:none} /* a cut-out used as a card's icon needs air under it before the heading */ .card>.cut{margin-bottom:14px} .slot-1x1{aspect-ratio:1/1} .slot-4x3{aspect-ratio:4/3} .slot-16x9{aspect-ratio:16/9} .slot-3x4{aspect-ratio:3/4} .slot-wide{aspect-ratio:21/9} /* ----------------------------------------------------------- hero shapes */ .hero-photo{position:relative;min-height:clamp(520px,86vh,880px);display:flex;align-items:flex-end;overflow:hidden} /* A hero photo is a lit room shot in the dark, so the hero ground stays dark in both themes — the white headline then works before and after you drop the real render in. */ .hero-photo .slot{ position:absolute;inset:0;border-radius:0;border:0; background:radial-gradient(90% 80% at 66% 26%, #3A2E38 0%, #241C26 46%, #15111A 100%); } /* the stand-in model sits top-right so the headline keeps the left third */ .hero-photo .clay-art{place-items:start end;padding:5% 4% 0 0} .hero-photo .clay-art svg{width:min(58%,720px)} @media (max-width:880px){ .hero-photo .clay-art svg{width:min(86%,520px)} } .hero-photo .scrim{ position:absolute;inset:0;z-index:1; background: linear-gradient(to top, rgba(16,13,20,.92) 0%, rgba(16,13,20,.64) 34%, rgba(16,13,20,.12) 68%, rgba(16,13,20,0) 100%), linear-gradient(to right, rgba(16,13,20,.66) 0%, rgba(16,13,20,.34) 38%, rgba(16,13,20,0) 66%); } .hero-photo .hero-copy{position:relative;z-index:2;padding-block:clamp(36px,7vw,84px);color:#F6F3F8} .hero-photo .hero-copy .lede{color:rgba(246,243,248,.82)} .hero-photo .hero-copy .eyebrow{color:rgba(246,243,248,.7)} /* ---------------------------------------------------------------- forms */ input,select,textarea,button{font:inherit;color:inherit} .field{ display:flex;gap:10px;flex-wrap:wrap; } .input{ flex:1 1 220px;min-width:0; background:var(--panel-2);color:var(--ink); border:1px solid var(--line);border-radius:var(--r-pill); padding:13px 18px; } .input::placeholder{color:var(--faint)} .input:focus{outline:3px solid var(--accent);outline-offset:2px;border-color:transparent} .on-photo .input{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff} .on-photo .input::placeholder{color:rgba(255,255,255,.65)} /* --------------------------------------------------------------- pricing */ .price{display:flex;align-items:baseline;gap:6px;font-family:var(--display)} .price .n{font-size:44px;font-weight:800;letter-spacing:-.03em} .price .per{font-size:14px;color:var(--muted);font-family:var(--text)} .tier{display:flex;flex-direction:column;gap:16px;height:100%} .product{display:flex;flex-direction:column;height:100%} .product .buy{margin-top:auto;padding-top:14px;justify-content:space-between} .tier.featured{border-color:var(--accent);box-shadow:var(--shadow-3), 0 0 0 1px var(--accent)} .ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:15.5px;color:var(--muted)} .ticks li{display:flex;gap:10px;align-items:flex-start} .ticks .tick{color:var(--accent);flex:none;margin-top:2px} /* ------------------------------------------------------------------ faq */ .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{ cursor:pointer;list-style:none;padding:20px 0; font-family:var(--display);font-weight:700;font-size:18px; display:flex;justify-content:space-between;gap:20px;align-items:center; } .faq summary::-webkit-details-marker{display:none} .faq summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:var(--r-s)} .faq summary::after{content:"+";font-size:24px;color:var(--accent);line-height:1} .faq details[open] summary::after{content:"–"} .faq .answer{padding:0 0 22px;color:var(--muted);max-width:70ch} /* ---------------------------------------------------------------- stats */ .stat{display:flex;flex-direction:column;gap:2px} .stat .n{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.4vw,44px);letter-spacing:-.03em;font-variant-numeric:tabular-nums} .stat .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)} /* ---------------------------------------------------------------- tables For a short list of facts — jobs and prices, sizes, what's included. */ .table{width:100%;border-collapse:collapse;font-size:15.5px} .table th,.table td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--line)} .table th{ font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--faint);font-weight:400; } .table td:last-child,.table th:last-child{text-align:right;font-variant-numeric:tabular-nums} .table tr:last-child td{border-bottom:0} /* --------------------------------------------------------------- avatars One head per file — four-heads-1 … four-heads-4 in the picture library, cut from the sheet there rather than cropped here. Each head is shot with air around it, so the picture is nudged in: the origin sits on the head, not on the middle of the tile. .faces overlaps them into the usual row. */ .face{ position:relative;flex:none;overflow:hidden;border-radius:50%; width:56px;height:56px; background:var(--panel-2);border:1px solid var(--line); } .face img{width:100%;height:100%;object-fit:cover;transform:scale(1.28);transform-origin:56% 54%} .face-s{width:40px;height:40px} .faces{display:flex;align-items:center} .faces .face{margin-right:-14px;box-shadow:0 0 0 3px var(--panel)} .faces .face:last-child{margin-right:0} /* ---------------------------------------------------------- small parts A row of cut-outs with a line of words under each — features, what's in the box, the four things this page does. */ .parts{display:grid;gap:var(--gap);grid-template-columns:repeat(4,1fr)} @media (max-width:900px){ .parts{grid-template-columns:repeat(2,1fr)} } .part{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px} .part .cut{width:100%;max-width:150px} .part h3{font-size:16px} .part p{font-size:14px;color:var(--muted);margin:0} /* -------------------------------------------------------- clay as ground A sheet of clay behind a line of words. Light and dark are separate pictures, and the veil over the top is what keeps the words readable — never drop text straight onto the texture. Add .band to run it edge to edge as a section instead of sitting in a rounded card. */ .texture-strip{ position:relative;border-radius:var(--r-l);overflow:hidden; min-height:clamp(200px,26vw,300px); display:grid;place-items:center;text-align:center; border:1px solid var(--line); } .texture-strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .texture-strip .on-top{position:relative;z-index:2;padding:clamp(20px,3vw,34px)} .texture-strip .on-top h3{margin-bottom:6px} /* The veil is a fixed colour, so the words over it can't follow the page theme — a dark-mode grey on a pale veil goes unreadable. Re-point the colour tokens inside the strip and anything you drop in here comes with it: stats, pills, eyebrows, a table. */ .texture-strip.light .on-top{ color:#211E27; --ink:#211E27; --muted:#4A4553; --faint:#5E5869; --line:rgba(33,30,39,.18); --line-lit:rgba(33,30,39,.3); } .texture-strip.dark .on-top{ color:#F6F3F8; --ink:#F6F3F8; --muted:#D5CFDC; --faint:#BDB5C6; --line:rgba(246,243,248,.2); --line-lit:rgba(246,243,248,.34); } .texture-strip.light::after,.texture-strip.dark::after{ content:"";position:absolute;inset:0;z-index:1; } .texture-strip.light::after{background:rgba(255,255,255,.42)} .texture-strip.dark::after{background:rgba(10,8,12,.42)} .texture-strip.band{ border-radius:0;border-left:0;border-right:0; min-height:0;place-items:stretch;text-align:inherit; } .texture-strip.band .on-top{width:80%;max-width:1280px;margin-inline:auto} @media (max-width:860px){ .texture-strip.band .on-top{width:90%} } /* --------------------------------------------------------------- footer */ .foot{border-top:1px solid var(--line);padding-block:44px;color:var(--muted);font-size:15px} .foot a{text-decoration:none;color:var(--muted)} .foot a:hover{color:var(--ink)} .foot .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--gap)} @media (max-width:760px){ .foot .cols{grid-template-columns:1fr 1fr} } /* ------------------------------------------------------------- utilities */ .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--accent-ink);padding:12px 18px;border-radius:0 0 var(--r-m) 0} .skip:focus{left:0} .center{text-align:center} .center .lede{margin-inline:auto} .rule{display:flex;align-items:baseline;gap:16px;margin-bottom:clamp(22px,3vw,36px)} .rule h2{margin:0} .rule .line{flex:1;height:1px;background:var(--line)} .rule .count{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--faint)} .theme-toggle{ width:38px;height:38px;display:grid;place-items:center; background:var(--panel);border:1px solid var(--line);border-radius:var(--r-pill);cursor:pointer; } .theme-toggle:hover{background:var(--panel-2)} .theme-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:3px} /* clay art sits on its own soft contact shadow */ .clay-art svg{width:100%;height:auto} .float{animation:float 7s ease-in-out infinite} @keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} } @media (prefers-reduced-motion: reduce){ .float{animation:none} } /* ========================================================================== Motion — everything here jumps between poses instead of gliding, at roughly twelve steps a second, because that is how stop-motion moves. Anyone whose system asks for reduced motion gets none of it (see the block at the end). ========================================================================== */ /* people shift their weight on the spot */ .clay-art .bob{animation:clay-bob 1.25s steps(1,end) infinite} @keyframes clay-bob{ 0%{transform:translateY(0)} 25%{transform:translateY(-1.4px)} 50%{transform:translateY(-2.4px)} 75%{transform:translateY(-1px)} } /* a hot drink actually steams */ .clay-art .steam{opacity:0;animation:clay-steam 2.6s steps(1,end) infinite} @keyframes clay-steam{ 0%{opacity:0;transform:translateY(0) scale(1)} 10%{opacity:.42;transform:translateY(-3px)} 22%{opacity:.55;transform:translateY(-8px)} 34%{opacity:.42;transform:translateY(-13px) scale(1.15)} 46%{opacity:.24;transform:translateY(-18px) scale(1.3)} 58%{opacity:0;transform:translateY(-23px) scale(1.4)} 100%{opacity:0} } /* the shimmer of a model re-shot frame by frame */ .clay-art .anim-boil,.clay-art.boil svg{animation:clay-boil .32s steps(1,end) infinite} @keyframes clay-boil{ 0%{transform:translate(0,0) rotate(0deg)} 33%{transform:translate(.9px,-.7px) rotate(.14deg)} 66%{transform:translate(-.7px,.6px) rotate(-.12deg)} } /* press a model and it gives, like a thumb in clay */ .card.lift .clay-art,.swatch .clay-art{transition:transform .3s var(--press)} .card.lift:hover .clay-art{transform:scale(1.035,.975)} .slot .clay-art{transition:transform .3s var(--press)} .card.lift:active .clay-art{transform:scale(1.06,.94)} /* things arrive on set rather than fading in: three steps, then still */ html.js-reveal [data-reveal]{opacity:0;transform:translateY(14px)} html.js-reveal [data-reveal].in{ opacity:1;transform:translateY(0); transition:opacity .34s steps(3,end), transform .34s steps(3,end); } @media (prefers-reduced-motion: reduce){ .clay-art .bob,.clay-art .steam,.clay-art .anim-boil,.clay-art.boil svg{animation:none} .clay-art .steam{opacity:.4} html.js-reveal [data-reveal]{opacity:1;transform:none;transition:none} .card.lift:hover .clay-art,.card.lift:active .clay-art{transform:none} }