/* Generated by scripts/picker/port.py from scripts/picker/board.html. Do not edit by hand: edit the board sources and re-run the port, or the site and the approved board drift apart. */ @font-face{font-family:"Sans";src:url("/fonts/general-sans-var.woff2") format("woff2");font-weight:200 700;font-display:swap} /* ============ 1. THE RAMP. Eleven measured steps of the live ink, written on body by the checked radio. ============ */ body{--s01:#000D0F; --s02:#001C1F; --s03:#002D31; --s04:#004046; --s05:#00565E; --s06:#02717A; --s07:#008E9A; --s08:#00AEBC; --s09:#02CFE0; --s10:#84E8F4; --s11:#D8F9FD;} body:has(#ink-01:checked){--s01:#180400; --s02:#2C0C00; --s03:#431700; --s04:#5E2300; --s05:#7D3200; --s06:#A14200; --s07:#C95500; --s08:#EE7027; --s09:#FF9968; --s10:#FFC8AE; --s11:#FFEEE6;} body:has(#ink-02:checked){--s01:#110800; --s02:#221400; --s03:#352200; --s04:#4C3200; --s05:#654500; --s06:#835A01; --s07:#A57200; --s08:#CA8D00; --s09:#E8AB3E; --s10:#F9CF8D; --s11:#FFF0D8;} body:has(#ink-03:checked){--s01:#0B0B00; --s02:#191900; --s03:#282900; --s04:#3B3B00; --s05:#4F4F00; --s06:#686800; --s07:#838300; --s08:#A0A100; --s09:#BDBF48; --s10:#D9DC92; --s11:#F3F4DA;} body:has(#ink-04:checked){--s01:#000F00; --s02:#021E00; --s03:#053000; --s04:#0A4500; --s05:#105C00; --s06:#187800; --s07:#229700; --s08:#53B344; --s09:#83CD77; --s10:#B4E6AB; --s11:#E6F8E2;} body:has(#ink-05:checked){--s01:#000E09; --s02:#001D15; --s03:#002E24; --s04:#014335; --s05:#005947; --s06:#00755E; --s07:#029377; --s08:#00B492; --s09:#30D4AF; --s10:#91EBD0; --s11:#DBFAEF;} body:has(#ink-06:checked){--s01:#000D0F; --s02:#001C1F; --s03:#002D31; --s04:#004046; --s05:#00565E; --s06:#02717A; --s07:#008E9A; --s08:#00AEBC; --s09:#02CFE0; --s10:#84E8F4; --s11:#D8F9FD;} body:has(#ink-07:checked){--s01:#000C16; --s02:#001A29; --s03:#002A3F; --s04:#003D59; --s05:#005277; --s06:#016B99; --s07:#0087C0; --s08:#00A5EA; --s09:#5BC3FF; --s10:#AADEFF; --s11:#E5F4FF;} body:has(#ink-08:checked){--s01:#030527; --s02:#070E44; --s03:#101964; --s04:#1A2889; --s05:#2639AE; --s06:#3852D3; --s07:#4F70EF; --s08:#7192FF; --s09:#9AB4FF; --s10:#C5D5FF; --s11:#ECF2FF;} body:has(#ink-09:checked){--s01:#0F0122; --s02:#20033D; --s03:#32095A; --s04:#47137C; --s05:#5E229E; --s06:#773AC1; --s07:#9159DD; --s08:#AC7CF4; --s09:#C4A3FF; --s10:#DDCCFF; --s11:#F4EFFF;} body:has(#ink-01:checked) [for="ink-01"]{--on:1} body:has(#ink-01:focus-visible) [for="ink-01"] .sq{outline:2px solid var(--ring);outline-offset:5px} body:has(#ink-01:focus-visible) [for="ink-01"] :is(.tip,.sw__name,.tchip__n){color:var(--t)} html[data-ink="01"] a[data-ink="01"]:is(.dot,.tchip){--on:1} body:has(#ink-01:checked) .nm-01{display:inline} body:has(#ink-01:checked) .go a[data-ink="01"]{display:inline} body:has(#ink-01:checked) .go a.btn[data-ink="01"]{display:inline-flex} body:has(#ink-02:checked) [for="ink-02"]{--on:1} body:has(#ink-02:focus-visible) [for="ink-02"] .sq{outline:2px solid var(--ring);outline-offset:5px} body:has(#ink-02:focus-visible) [for="ink-02"] :is(.tip,.sw__name,.tchip__n){color:var(--t)} html[data-ink="02"] a[data-ink="02"]:is(.dot,.tchip){--on:1} body:has(#ink-02:checked) .nm-02{display:inline} body:has(#ink-02:checked) .go a[data-ink="02"]{display:inline} body:has(#ink-02:checked) .go a.btn[data-ink="02"]{display:inline-flex} body:has(#ink-03:checked) [for="ink-03"]{--on:1} body:has(#ink-03:focus-visible) [for="ink-03"] .sq{outline:2px solid var(--ring);outline-offset:5px} body:has(#ink-03:focus-visible) [for="ink-03"] :is(.tip,.sw__name,.tchip__n){color:var(--t)} html[data-ink="03"] a[data-ink="03"]:is(.dot,.tchip){--on:1} body:has(#ink-03:checked) .nm-03{display:inline} body:has(#ink-03:checked) .go a[data-ink="03"]{display:inline} body:has(#ink-03:checked) .go a.btn[data-ink="03"]{display:inline-flex} body:has(#ink-04:checked) [for="ink-04"]{--on:1} body:has(#ink-04:focus-visible) [for="ink-04"] .sq{outline:2px solid var(--ring);outline-offset:5px} body:has(#ink-04:focus-visible) [for="ink-04"] :is(.tip,.sw__name,.tchip__n){color:var(--t)} html[data-ink="04"] a[data-ink="04"]:is(.dot,.tchip){--on:1} body:has(#ink-04:checked) .nm-04{display:inline} body:has(#ink-04:checked) .go a[data-ink="04"]{display:inline} body:has(#ink-04:checked) .go a.btn[data-ink="04"]{display:inline-flex} body:has(#ink-05:checked) [for="ink-05"]{--on:1} body:has(#ink-05:focus-visible) [for="ink-05"] .sq{outline:2px solid var(--ring);outline-offset:5px} body:has(#ink-05:focus-visible) [for="ink-05"] :is(.tip,.sw__name,.tchip__n){color:var(--t)} html[data-ink="05"] a[data-ink="05"]:is(.dot,.tchip){--on:1} body:has(#ink-05:checked) .nm-05{display:inline} body:has(#ink-05:checked) .go a[data-ink="05"]{display:inline} body:has(#ink-05:checked) .go a.btn[data-ink="05"]{display:inline-flex} body:has(#ink-06:checked) [for="ink-06"]{--on:1} body:has(#ink-06:focus-visible) [for="ink-06"] .sq{outline:2px solid var(--ring);outline-offset:5px} body:has(#ink-06:focus-visible) [for="ink-06"] :is(.tip,.sw__name,.tchip__n){color:var(--t)} html[data-ink="06"] a[data-ink="06"]:is(.dot,.tchip){--on:1} body:has(#ink-06:checked) .nm-06{display:inline} body:has(#ink-06:checked) .go a[data-ink="06"]{display:inline} body:has(#ink-06:checked) .go a.btn[data-ink="06"]{display:inline-flex} body:has(#ink-07:checked) [for="ink-07"]{--on:1} body:has(#ink-07:focus-visible) [for="ink-07"] .sq{outline:2px solid var(--ring);outline-offset:5px} body:has(#ink-07:focus-visible) [for="ink-07"] :is(.tip,.sw__name,.tchip__n){color:var(--t)} html[data-ink="07"] a[data-ink="07"]:is(.dot,.tchip){--on:1} body:has(#ink-07:checked) .nm-07{display:inline} body:has(#ink-07:checked) .go a[data-ink="07"]{display:inline} body:has(#ink-07:checked) .go a.btn[data-ink="07"]{display:inline-flex} body:has(#ink-08:checked) [for="ink-08"]{--on:1} body:has(#ink-08:focus-visible) [for="ink-08"] .sq{outline:2px solid var(--ring);outline-offset:5px} body:has(#ink-08:focus-visible) [for="ink-08"] :is(.tip,.sw__name,.tchip__n){color:var(--t)} html[data-ink="08"] a[data-ink="08"]:is(.dot,.tchip){--on:1} body:has(#ink-08:checked) .nm-08{display:inline} body:has(#ink-08:checked) .go a[data-ink="08"]{display:inline} body:has(#ink-08:checked) .go a.btn[data-ink="08"]{display:inline-flex} body:has(#ink-09:checked) [for="ink-09"]{--on:1} body:has(#ink-09:focus-visible) [for="ink-09"] .sq{outline:2px solid var(--ring);outline-offset:5px} body:has(#ink-09:focus-visible) [for="ink-09"] :is(.tip,.sw__name,.tchip__n){color:var(--t)} html[data-ink="09"] a[data-ink="09"]:is(.dot,.tchip){--on:1} body:has(#ink-09:checked) .nm-09{display:inline} body:has(#ink-09:checked) .go a[data-ink="09"]{display:inline} body:has(#ink-09:checked) .go a.btn[data-ink="09"]{display:inline-flex} @media (hover:hover) and (pointer:fine){.hero:has(.sw[for="ink-01"]:hover) .hero__word{--ink-fill:#EE7027} .hero:has(.sw[for="ink-02"]:hover) .hero__word{--ink-fill:#CA8D00} .hero:has(.sw[for="ink-03"]:hover) .hero__word{--ink-fill:#A0A100} .hero:has(.sw[for="ink-04"]:hover) .hero__word{--ink-fill:#53B344} .hero:has(.sw[for="ink-05"]:hover) .hero__word{--ink-fill:#00B492} .hero:has(.sw[for="ink-06"]:hover) .hero__word{--ink-fill:#00AEBC} .hero:has(.sw[for="ink-07"]:hover) .hero__word{--ink-fill:#00A5EA} .hero:has(.sw[for="ink-08"]:hover) .hero__word{--ink-fill:#7192FF} .hero:has(.sw[for="ink-09"]:hover) .hero__word{--ink-fill:#AC7CF4}} @supports not selector(body:has(a)){.nm.nm-06{display:inline} .go a[data-ink="06"]{display:inline} .go a.btn[data-ink="06"]{display:inline-flex} [for="ink-06"]{--on:1}} .sw[for="ink-01"],.dot[for="ink-01"],.tchip[for="ink-01"],.dot[data-ink="01"],.tchip[data-ink="01"]{--chip:#EE7027} .sw[for="ink-02"],.dot[for="ink-02"],.tchip[for="ink-02"],.dot[data-ink="02"],.tchip[data-ink="02"]{--chip:#CA8D00} .sw[for="ink-03"],.dot[for="ink-03"],.tchip[for="ink-03"],.dot[data-ink="03"],.tchip[data-ink="03"]{--chip:#A0A100} .sw[for="ink-04"],.dot[for="ink-04"],.tchip[for="ink-04"],.dot[data-ink="04"],.tchip[data-ink="04"]{--chip:#53B344} .sw[for="ink-05"],.dot[for="ink-05"],.tchip[for="ink-05"],.dot[data-ink="05"],.tchip[data-ink="05"]{--chip:#00B492} .sw[for="ink-06"],.dot[for="ink-06"],.tchip[for="ink-06"],.dot[data-ink="06"],.tchip[data-ink="06"]{--chip:#00AEBC} .sw[for="ink-07"],.dot[for="ink-07"],.tchip[for="ink-07"],.dot[data-ink="07"],.tchip[data-ink="07"]{--chip:#00A5EA} .sw[for="ink-08"],.dot[for="ink-08"],.tchip[for="ink-08"],.dot[data-ink="08"],.tchip[data-ink="08"]{--chip:#7192FF} .sw[for="ink-09"],.dot[for="ink-09"],.tchip[for="ink-09"],.dot[data-ink="09"],.tchip[data-ink="09"]{--chip:#AC7CF4} :root{--n-0:#06070A;--n-1:#0C0C0E;--n-2:#141417;--n-3:#1A1B1F;--n-4:#26272D;--t-1:#F2F5FD;--t-2:#B7BCC7;--t-3:#8A8F9B;--l-1:#F5F6F8;--l-0:#FFFFFF;--l-2:#ECEEF2;--k-1:#0C0C0E;--k-2:#4B4F59;--k-3:#5F6470;--line-d:#26272D;--line-l:#E6E9EE} @supports (color:color-mix(in oklab,red,red)){:root{--line-d:color-mix(in oklab,var(--t-1) 8%,transparent);--line-l:color-mix(in oklab,var(--k-1) 8%,transparent)}} body{--ink-fill:var(--s08);--ink-fill-hover:var(--s09);--ink-text-d:var(--s09);--ink-text-l:var(--s06);--ink-display-l:var(--s07);--ink-line-d:var(--s07);--ink-ring-d:var(--s09);--ink-ring-l:var(--s06);--band:var(--s08);--band-t:var(--k-1)} body:has(#ink-02:checked){--band:var(--s08);--band-t:var(--k-1);--ink-display-l:var(--k-1);--ink-display-bar:var(--ink-fill)} body:has(#ink-03:checked){--band:var(--s08);--band-t:var(--k-1);--ink-display-l:var(--k-1);--ink-display-bar:var(--ink-fill)} body:has(#ink-08:checked){--band:var(--s06);--band-t:var(--l-0)} body:has(#ink-09:checked){--band:var(--s06);--band-t:var(--l-0)} body{--pal-a:#EE7027;--pal-at:var(--k-1)} body:has(#ink-01:checked){--pal-a:#3852D3;--pal-at:var(--l-0)} body:has(#ink-02:checked){--pal-a:#773AC1;--pal-at:var(--l-0)} body:has(#ink-03:checked){--pal-a:#773AC1;--pal-at:var(--l-0)} body:has(#ink-04:checked){--pal-a:#EE7027;--pal-at:var(--k-1)} body:has(#ink-05:checked){--pal-a:#EE7027;--pal-at:var(--k-1)} body:has(#ink-07:checked){--pal-a:#CA8D00;--pal-at:var(--k-1)} body:has(#ink-08:checked){--pal-a:#CA8D00;--pal-at:var(--k-1)} body:has(#ink-09:checked){--pal-a:#CA8D00;--pal-at:var(--k-1)} /* ============ 2. THE ROOMS. Four grounds, constant on all nine routes; the ink is never one of them. ============ A room re-declares the role tokens and everything inside it reads the roles, never a step of the ramp: --g ground --surf the surface one step off it --t --t2 --t3 the three text tiers --rule --edge a hairline --btn --btn-t --btn-e the one filled button, its label and its 1 px edge on light --btn2 --btn2-h the quiet one --mark the small lit thing --link the underline of a link --ring the focus ring .room--stage the dark stage: header, hero, inner hero band, the closing band .room--band the one vivid band, from the per ink band table .room--read the cool white reading room .room--close the dark close; the footer under it steps down once more The four names the board was first drawn with stay as aliases until the sections that carry them are replaced: .ra is the stage, .rd the footer ground, .rm the band, .paper a white card. */ html{background:var(--n-1);scrollbar-color:var(--n-4) var(--n-1);scroll-padding-bottom:88px} body,.room--stage,.room--close,.ra,.rd{--g:var(--n-1);--surf:var(--n-2);--t:var(--t-1);--t2:var(--t-2);--t3:var(--t-3);--rule:var(--line-d);--edge:var(--line-d); --btn:var(--ink-fill);--btn-h:var(--ink-fill-hover);--btn-t:var(--k-1);--btn-e:transparent;--btn2:var(--n-2);--btn2-h:var(--n-3); --mark:var(--ink-fill);--link:var(--ink-fill);--ring:var(--ink-ring-d);--shadow:var(--n-0);--fade:var(--n-1);color-scheme:dark} .rd,.close{--g:var(--n-0)} .room--band,.rm{--g:var(--band);--surf:var(--band);--t:var(--band-t);--t2:var(--band-t);--t3:var(--band-t);--rule:var(--band-t);--edge:var(--band-t); --btn:var(--band-t);--btn-h:var(--band-t);--btn-t:var(--band);--btn-e:transparent;--btn2:var(--band);--btn2-h:var(--band); --mark:var(--band-t);--link:var(--band-t);--ring:var(--band-t);--shadow:var(--k-1)} .room--read,.paper{--g:var(--l-1);--surf:var(--l-0);--t:var(--k-1);--t2:var(--k-2);--t3:var(--k-3);--rule:var(--line-l);--edge:var(--line-l); --btn:var(--ink-fill);--btn-h:var(--ink-fill-hover);--btn-t:var(--k-1);--btn-e:var(--ink-text-l);--btn2:var(--l-0);--btn2-h:var(--l-2); --mark:var(--ink-text-l);--link:var(--ink-text-l);--ring:var(--ink-ring-l);--shadow:var(--k-1);color-scheme:light} .paper{--g:var(--l-0)} .room--stage,.room--band,.room--read,.room--close,.ra,.rd,.rm,.close{background:var(--g);color:var(--t)} /* one stroke rule for every drawn object: on the dark backgrounds the outline is step 04 so it shows, as step 02 does on the room's 06 */ /* the one duotone: the door top /method/ carries, read through the ink */ #duo-deep feFlood:nth-of-type(1){flood-color:var(--s02)} #duo-deep feFlood:nth-of-type(2){flood-color:var(--s08)} .ph-deep{filter:url(#duo-deep)} /* the five steps the color file's swatch strip is painted in */ .f07{fill:var(--s07)} .f08{fill:var(--s08)} .f09{fill:var(--s09)} .f10{fill:var(--s10)} .f11{fill:var(--s11)} /* ============ 3. BASE ============ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font-family:"Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:400;font-size:1.0625rem;line-height:1.55; background:var(--g);color:var(--t);-webkit-font-smoothing:antialiased} ::selection{background:var(--t);color:var(--g)} input,textarea{caret-color:var(--t);accent-color:var(--btn)} *{-webkit-tap-highlight-color:color-mix(in oklab,var(--btn) 35%,transparent)} :focus-visible{outline:2px solid var(--ring);outline-offset:3px} .defs{position:absolute} .ico{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} img{max-width:100%;height:auto;display:block} a{color:inherit} /* the container: 1280, with a gutter on each side that is 16 px on a phone and 64 px on a desk */ .wrap{--gut:clamp(16px,4.4vw,64px);width:min(100% - 2*var(--gut),1280px);margin-inline:auto} /* ONE FAMILY, ONE LADDER. Every size on the board is one of these: h1, h2, h3, statement, lead, body (the body rule above), small, and one sentence case micro label. Display weight follows the ground: 560 on dark, 600 on the ink room and on paper. Nothing but a price figure and the band's one statement is larger than the h1, nothing is under 13 px, and caps are set only inside drawn objects. Pages outside the board set their own sizes and take the family, the weight and the tracking from the first rule. */ h1,h2,h3{font-weight:600;margin:0;letter-spacing:-.02em;text-wrap:balance} .reply__price{font-size:1.375rem;font-weight:600;line-height:1.2;letter-spacing:-.015em} .read__pct,.read__q{font-size:1.25rem;line-height:1.45;letter-spacing:-.005em} .signoff,.close__nav,.read__lead{font-size:.9375rem;line-height:1.5} @media (max-width:760px){ .room--read h2,.you h2{font-size:1.875rem} .reply__price{font-size:1.3125rem} .read__pct,.read__q{font-size:1.125rem} } p{margin:0} /* THE BUTTON. One filled rule on every ground and every ink: the ink's own fill under a near black label, so it is the color of its chip wherever it sits; on a light ground it takes a 1 px edge in the ink's text step so the control clears 3:1 against white. One quiet rule beside it: the room's surface, a hairline, the room's text. No bevel, no gradient, no shadow. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--btn);color:var(--btn-t);text-decoration:none; padding:0 20px;min-height:48px;border-radius:12px;border:0;font:inherit;font-weight:600;font-size:1rem;letter-spacing:-.005em;line-height:1;cursor:pointer;white-space:nowrap; box-shadow:inset 0 0 0 1px var(--btn-e)} .btn:hover{background:var(--btn-h)} .btn:active{translate:0 1px} .btn--2{background:var(--btn2);color:var(--t);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--t) 16%,transparent)} .btn--2:hover{background:var(--btn2-h);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--t) 28%,transparent)} a:active{opacity:.7} .nm{display:none} /* the ink's own square, beside its name wherever the name is printed: flat, the fill every button takes */ .chip::before{content:"";display:inline-block;width:.62em;height:.62em;border-radius:.12em;background:var(--ink-fill);margin-right:.32em;vertical-align:-.04em} .paper .chip::before,.room--read .chip::before{box-shadow:inset 0 0 0 1px var(--ink-text-l)} h1 .chip::before,h2 .chip::before{margin:0 .18em;line-height:0} .go a{display:none} .live{display:inline} .nw{white-space:nowrap} /* ============ 4. THE HEADER. One component on every page, the reply included. Static, never sticky: 64 px on a desk, 52 px on a phone, no ground of its own, so it and the hero under it are one continuous dark stage. The logo, ONE nav, the ink control, one quiet button. Below 760 the nav is a sheet IN THE FLOW of the page, opened by a checkbox: it pushes the page down and can never lie over the form. It opens and closes with no animation. A browser with no :has() cannot read the checkbox, so there the links are simply always shown. ============ */ .hd__in{display:flex;align-items:center;gap:28px;min-height:64px} .brand{display:flex;align-items:center;text-decoration:none;min-height:44px;flex:none} /* THE LOGO: the name on line one in the room's text, the shared i and line two in the ink. Outlines, not text, so it draws the same before the face arrives. 40 px tall in the header on every width; the close sets its own size. */ .lk{display:block;height:40px;width:auto} .lk__a{fill:var(--t)} .lk__b{fill:var(--ink-fill)} .hd__links{display:flex;gap:28px;margin-left:auto;font-weight:500;font-size:.9375rem} .hd__links a{color:var(--t2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap} .hd__links a:hover,.hd__links a:focus-visible,.hd__links a[aria-current]{color:var(--t)} .hd__ink{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--t);font-size:.9375rem;font-weight:500;text-decoration:none;cursor:pointer;white-space:nowrap} .hd__sq{width:12px;height:12px;border-radius:4px;background:var(--ink-fill);flex:none} .hd__btn{min-height:40px;padding:0 14px;font-size:.9375rem;border-radius:12px} .hd__tog,.hd__menu{display:none} @media (max-width:1023px){.hd__in{gap:20px}.hd__links{gap:20px}} @media (max-width:760px){ .wrap{--gut:16px} .hd__in{flex-wrap:wrap;gap:0 12px;min-height:52px} .hd__btn{display:none} .hd__ink{margin-left:auto} .hd__tog{display:block;position:absolute;width:1px;height:1px;margin:-1px;opacity:0;pointer-events:none} .hd__menu{display:inline-flex;align-items:center;min-height:44px;padding-inline:4px;font-size:.9375rem;font-weight:500;color:var(--t);cursor:pointer} body:has(#menu:focus-visible) .hd__menu{outline:2px solid var(--ring);outline-offset:3px} .hd__links{display:none;order:9;flex:0 0 calc(100% + 2*var(--gut));margin:0 calc(-1*var(--gut));padding:4px var(--gut) 8px;background:var(--surf);flex-direction:column;gap:0;font-size:1.0625rem} .hd__links a{min-height:48px;color:var(--t)} body:has(#menu:checked) .hd__links{display:flex} @supports not selector(:has(a)){ .hd__menu,.hd__tog{display:none} .hd__links{display:flex;flex-direction:row;flex-wrap:wrap;gap:0 20px;background:none;padding-block:0;font-size:.9375rem} .hd__links a{min-height:44px;color:var(--t2)} } } /* ============ THE CHIP ============ ONE OBJECT RUNS THE WHOLE PICKER: a flat square of the ink's own fill, radius 8, no photograph, no material, no gradient, no bevel, no hex, no slider. It appears in three places and nowhere else: the hero tray (.sw), the dock's tray (.tchip) and the footer row (.dot). Each square's color is written per ink by the generator, the way the ramp is, so a chip says its own color whichever ink the page is in. THE CHOSEN ONE TAKES A RING AND NOTHING MOVES: two pixels of the ground it sits on, then two of the room's text, so the ring's gap is always the tray's own color. Never a shift, a bevel or a corner tab. */ .sq{display:block;width:36px;height:36px;border-radius:8px;background:var(--chip); box-shadow:0 0 0 calc(var(--on,0)*2px) var(--g),0 0 0 calc(var(--on,0)*4px) var(--t)} .dots{display:flex;align-items:flex-start;gap:0;flex-wrap:nowrap} .dot{width:48px;min-height:44px;display:grid;justify-items:center;align-content:start;gap:8px;padding-top:4px;cursor:pointer;text-decoration:none} .dot .sq{width:32px;height:32px} .tip,.tchip__n{font-size:.8125rem;font-weight:500;font-weight:calc(500 + var(--on,0)*100);line-height:1.2;pointer-events:none; color:color-mix(in oklab,var(--t) calc(var(--on,0)*100%),var(--t2))} @media (hover:hover) and (pointer:fine){ .sq{transition:scale .12s cubic-bezier(.2,.7,.2,1)} .dot:hover .sq,.sw:hover .sq,.tchip:hover .sq{scale:1.06} } /* the phone row: all nine chips across the width, square, 6 px apart, no names. It used to scroll inside itself with 44 px chips, and on a phone it read as a row cut off after seven (the owner, 2026-09-19: "fix mobile"); at 390 each chip is now 34 px, over the 24 px minimum for a tap target */ @media (max-width:760px){ .dots{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;overflow:visible;margin-inline:0;padding:6px 0} .dot{width:auto;min-height:0;padding:0} .dot .sq{width:100%;height:auto;aspect-ratio:1} .tip{display:none} } /* ============ 5. THE DOCK. The site's color, the price, the one action: one opaque bar that exists only after the hero. It is position:sticky at the foot of the wrapper it is the last child of (.after-hero), so it cannot be over the first screen, the closing form or the footer in any browser: the box it sticks inside does not span them. The same dark surface on every ground, never glass. The wrapper carries no overflow and no content-visibility. ============ */ /* the wrapper carries the room class of its last room, so the dock's resting slot at its foot is floor and not a stripe */ .after-hero{position:relative} .dock{position:sticky;bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;margin:0 auto 16px;width:max-content;max-width:min(680px,100% - 32px); display:flex;align-items:center;gap:12px;height:56px;padding:6px 6px 6px 16px;border-radius:16px; --g:var(--n-2);--surf:var(--n-2);--t:var(--t-1);--t2:var(--t-2);--t3:var(--t-3);--btn-e:transparent;--btn2:var(--n-3);--btn2-h:var(--n-4);--ring:var(--ink-ring-d);color-scheme:dark; background:var(--n-2);color:var(--t-1);font-size:.9375rem;font-weight:500;line-height:1; box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--t-1) 10%,transparent),0 8px 24px -8px color-mix(in srgb,var(--n-0) 50%,transparent)} .dock__ink{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:0;cursor:pointer;color:var(--t-1)} .dock__dot{width:10px;height:10px;border-radius:3px;background:var(--ink-fill);flex:none} .dock__nm{min-width:0;max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600} .dock__ink .ico{color:var(--t-2)} body:has(#tray:checked) .dock__ink .ico{rotate:180deg} body:has(#tray:focus-visible) .dock__ink{outline:2px solid var(--ring);outline-offset:3px;border-radius:8px} .dock__bar{width:1px;height:20px;background:color-mix(in oklab,var(--t-1) 10%,transparent);flex:none} .dock__fact{white-space:nowrap;flex:none;color:var(--t-2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;gap:.35em} .dock__fact b{font-weight:600;color:var(--t-1)} .dock__fact:hover,.dock__fact:focus-visible{color:var(--t-1)} .dock__btn{min-height:44px;padding:0 16px;border-radius:10px;flex:none;margin-left:4px} /* THE TRAY. Opens upward, 8 px above the bar: three by three, 56 px chips with their names, one line of words. Closed is display:none, and only :has() opens it, so where :has() is missing it never shows and the footer row is the picker. No animation in any mode. */ .dock__tray{display:none;position:absolute;left:0;bottom:calc(100% + 8px);padding:12px;border-radius:16px;background:var(--n-2);color:var(--t-1); box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--t-1) 10%,transparent),0 8px 24px -8px color-mix(in srgb,var(--n-0) 50%,transparent)} body:has(#tray:checked) .dock__tray{display:block} .dock__say{font-size:.9375rem;line-height:1.4;color:var(--t-2);margin:2px 4px 10px;white-space:nowrap} .dock__grid{display:grid;grid-template-columns:repeat(3,80px);gap:8px} .tchip{display:grid;justify-items:center;gap:8px;padding:6px 0 4px;min-height:44px;cursor:pointer;text-decoration:none;color:inherit} .tchip .sq{width:56px;height:56px} .tchip__n{font-size:.9375rem} /* while a text field has the caret the bar leaves, so it can never sit between a thumb and a button */ body:has(input[type=text]:focus) .dock{translate:0 140%} @media (prefers-reduced-motion:no-preference){.dock{transition:translate .2s cubic-bezier(.2,.7,.2,1)}} @media (max-width:760px){ .dock{height:52px;gap:8px;padding-left:12px;font-size:.875rem;max-width:calc(100% - 32px)} .dock__ink{gap:6px} .dock__six,.dock__who{display:none} .dock__btn{min-height:40px;padding:0 12px;font-size:.9375rem;position:relative} .dock__btn::after{content:"";position:absolute;inset:-2px 0} } /* the narrowest phones: the chevron goes before a letter of the ink's name does */ @media (max-width:420px){.dock__ink .ico{display:none}.dock__btn{padding:0 10px;margin-left:0}} /* ============ 7. THE FIRST SCREEN ============ */ /* THE HERO IS AT LEAST THE FIRST SCREEN, less the header. The dock's wrapper opens where this section ends, and a sticky box is clamped inside its wrapper: if the wrapper started above the fold, a slice of the dock would show at the foot of the first screen. It is a column: the grid at its own height, then the band's strip, 28 px at least, taking whatever the first screen has left, so the band's color starts where the prices end and runs on into the band below as one field. */ .hero{position:relative;overflow:clip;display:flex;flex-direction:column;min-block-size:calc(min(100svh,900px) - 64px)} @media (max-width:760px){.hero{min-block-size:calc(100svh - 52px)}} .sliver{flex:1 0 28px;min-block-size:28px;background:var(--band)} /* from 1024 the band below is four stripes, so its strip at the foot of the first screen carries the same four at the same widths; a strip of the main color alone read as a lid laid over the other three (the owner's screenshot, 2026-09-19) */ @media (min-width:1024px){.sliver{background:linear-gradient(90deg,var(--band) 0 46%,var(--s04) 46% 66%,var(--s11) 66% 84%,var(--pal-a) 84%)}} /* THE ROW, as the approved mock draws it: the name across the whole container, then the headline at left and the form with its helper and the chips at right, bottom aligned, 48 px apart, then the prices under both. One column in source order under 1024 px, where a half-width form cuts its own placeholder and the prices no longer fit one line, and wherever grid is missing. The grid is the container the name is fitted to. */ .hero__grid{flex:none;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "copy" "act" "prices"; align-items:end;container-type:inline-size} .hero__stage{grid-area:stage} .hero__copy{grid-area:copy} .hero__act{grid-area:act} .prices{grid-area:prices} .hero__stage,.hero__copy,.hero__act,.prices{position:relative;min-width:0} .hero__copy{margin-top:clamp(28px,5vh,56px)} .hero__act{margin-top:22px} @media (min-width:1024px){ .hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:48px; grid-template-areas:"stage stage" "copy act" "prices prices"} .hero__act{margin-top:clamp(28px,5vh,56px)} } /* a narrow desk: the half column is too narrow for a field and the button side by side, so the button goes under the field, as it does on a phone */ @media (min-width:1024px) and (max-width:1199px){ .hero .group{grid-template-columns:minmax(0,1fr)} .hero .group .btn{grid-area:2/1} } /* ---- THE NAME. The studio's name at 700, tracked in to -0.045em, in the ink's fill, as wide as the container lets the LONGER of its two readings be: what it says backward is 3.51 of its own ems wide with the space the script puts in, so the size is the smallest of the mock's clamp, 28.4% of the container and 41% of the screen's height, which keeps the line under it on the screen. The block is 1.12 of that size tall and the line sits 9 px inside its foot on a desk and 11 px under it on a phone, exactly where the mock draws it. AT REST THE LETTERS ARE TEXT IN THE FLOW, centered, kerning off so each one stands where its own advance puts it. picker.js moves them with transforms and nothing else, so the block never changes size and nothing under it moves; the apostrophe and the space it adds exist only while it runs. */ .hero__stage{--fs:min(clamp(120px,23vw,330px),28.4cqi,41vh);height:calc(var(--fs)*1.12);margin-top:clamp(8px,3vh,36px)} @supports not (width:1cqi){.hero__stage{--fs:min(clamp(120px,23vw,330px),calc((100vw - 2*var(--gut))*.284),41vh)}} .hero__word{position:relative;margin:0;padding:0;border:0;background:none;display:block;width:100%;font:inherit;font-size:var(--fs);font-weight:700;line-height:1; letter-spacing:-.045em;font-kerning:none;text-align:center;white-space:nowrap;color:var(--ink-fill);-webkit-user-select:none;user-select:none} .hero__l{display:inline-block} .hero__x{position:absolute;left:0;top:0} button.hero__word{cursor:pointer} button.hero__word:focus-visible{outline:2px solid var(--ring);outline-offset:6px;border-radius:12px} .hero__cap{position:absolute;left:0;bottom:9px;margin:0;font-size:.9375rem;line-height:1.5;color:var(--t2)} .hero__cap b{font-weight:600;color:var(--t)} @media (max-width:760px){.hero__cap{bottom:-11px}} /* ---- THE HEADLINE. The mock's size and tracking; it wraps where its column ends. It names no ink: the nine colors are this site's, and the headline is about the customer's own. */ .hero h1{font-size:clamp(34px,3.6vw,52px);font-weight:560;line-height:1.04;letter-spacing:-.035em;text-wrap:initial} .trade{color:var(--t);font-size:1.1875rem;line-height:1.45;max-width:44ch;margin-top:14px;text-wrap:pretty} /* ---- THE PASTE BOX. One white group on every ground, the only white panel in a dark viewport: radius 16, six pixels of padding, a transparent field and the filled button nested at radius 10. */ .field__label{display:block;font-size:.9375rem;font-weight:500;line-height:1.4;color:var(--t);margin-bottom:6px} .group{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;padding:6px;border-radius:16px;background:var(--l-0);max-width:560px;color-scheme:light;scroll-margin-top:270px} .hero .group{max-width:none} .group input{grid-area:1/1;min-width:0;height:52px;padding:0 14px;border:0;border-radius:10px;background:transparent;font:inherit;line-height:1.3;color:var(--k-1);outline:0;text-overflow:ellipsis; scroll-margin-top:270px;caret-color:var(--k-1)} .group input::placeholder{color:var(--k-3);opacity:1} .group input:-webkit-autofill{-webkit-text-fill-color:var(--k-1);box-shadow:inset 0 0 0 99px var(--l-0)} .group:focus-within{outline:2px solid var(--ring);outline-offset:3px} .group .btn{grid-area:1/2;border-radius:10px;min-height:52px} /* THE BUSY LINE. Two pixels along the field's own bottom edge (it shares the field's cell), absent at rest and grown along it over eight seconds once the form is sent (section 14), until the reply page takes over. */ .group::after{content:"";grid-area:1/1;align-self:end;height:2px;margin:0 14px;border-radius:1px;background:var(--ink-text-l); scale:0 1;transform-origin:0 50%;pointer-events:none} form[data-busy] .group::after{scale:1 1} form[data-busy] .btn{pointer-events:none} /* THE ARRIVAL. A link to #u lands here: the white group is ringed in the ink, out and back (section 14), and with motion reduced the ring simply holds, three pixels, while the address still points at the field. */ @media (prefers-reduced-motion:reduce){.group:has(#u:target){box-shadow:0 0 0 3px var(--ink-fill)}} .helper{margin-top:10px;max-width:560px;font-size:.9375rem;line-height:1.5;color:var(--t2);text-wrap:pretty} /* ---- THE CHIPS, at hero size: nine flat 30 px squares, 8 px apart, no tray and no names drawn (each label keeps its name for a screen reader, and so does the radio it operates). Each chip's press area reaches 44 px tall and half way into the gaps, so nine of them fit a phone in one row that never scrolls: under 334 px of row they give up width together, never the gaps and never the gutter. */ .picker{border:0;margin:20px 0 0;padding:0;min-inline-size:0} .picker legend{padding:0 0 8px;font-size:.9375rem;line-height:1.5;color:var(--t2)} .picker__row{display:flex;gap:8px} .sw{position:relative;display:block;flex:0 1 30px;min-width:0;cursor:pointer;text-decoration:none} .sw::after{content:"";position:absolute;inset:-7px -4px} .sw .sq{width:100%;height:auto;aspect-ratio:1} /* ---- THE PRICES. One row under a hairline, the first at the left edge, the last at the right, the middle between: the name, the price at 22 px and the time, 6 px apart on one baseline. On a phone, three lines. */ .prices{display:flex;justify-content:space-between;gap:6px 24px;border-top:1px solid var(--rule);margin-top:34px;padding:16px 0 26px} .pr{display:flex;align-items:baseline;gap:6px;color:var(--t2);text-decoration:none;font-size:.9375rem;line-height:1.5;white-space:nowrap} .pr__p{font-size:1.375rem;font-weight:600;letter-spacing:-.015em;color:var(--t)} .pr:hover .pr__n,.pr:focus-visible .pr__n{color:var(--t)} @media (max-width:1023px){.prices{flex-wrap:wrap;justify-content:flex-start;column-gap:32px}} @media (max-width:760px){.prices{flex-direction:column}} /* the sample submit: a plain button with its own name and value, so the machine runs on our page for an owner who is not ready to hand over theirs. It needs no script at all. */ .lnk{font:inherit;font-weight:500;color:var(--t);background:none;border:0;cursor:pointer; padding:.82rem 0;margin:-.82rem 0;text-decoration:underline;text-decoration-color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1.5px} .lnk:hover,.lnk:focus-visible{text-decoration-thickness:2.5px} /* THE RING COMES IN TO THE TEXT. This button carries 13 px of padding above and below so the touch target clears 44 px without moving the sentence it sits in, and the page's 4 px ring offset was drawn around THAT box: at the foot of the paste panel the bottom edge of the ring landed off the paper and onto the room, where a ring the color of the paper's text (step 02) is the color of the room's ground. Rendered at 390 it was a three sided ring. Offset 0 puts all four sides back on the paper, in every one of the nine inks, because the pair is the paper's own two extremes. */ .lnk:focus-visible{outline-offset:0} /* ============ 8. THE BAND: THE LAUNCH SET, A FLAT LAY. One table in the palette's light color, seen from above, under the words and the things alike: a t-shirt, a phone lying flat, two business cards and a round sticker, lit from the top left, so every shadow falls the same way. The shirt is a gray photograph of a white shirt with the main color multiplied through its own silhouette, so its folds show through the color and the printed name. The four colors are --yd1 to --yd4: at rest this ink's palette (the band field, steps 04 and 11, the partner ink), and once the visitor picks a color, the script's. Text on the table is near black and the dark gray; text on a color is a measured pair or is chosen by the script at 4.5 to 1. Compact on purpose: about 560 px on a desk. */ .yard{--yd1:var(--band);--yd2:var(--s04);--yd3:var(--s11);--yd4:var(--pal-a);--ydt1:var(--band-t);--ydt2:var(--l-0);--ydt4:var(--pal-at); --pl:max(clamp(16px,4.4vw,64px),calc(50vw - 640px)); position:relative;display:grid;grid-template-columns:minmax(0,38%) minmax(0,62%);align-items:center;overflow:hidden;background:var(--yd3);color:var(--k-1)} .yd-words{position:relative;z-index:2;padding:64px 24px 64px var(--pl)} .yard h2{font-size:clamp(2rem,3.2vw,3rem);line-height:1.04;letter-spacing:-.04em;font-weight:600;max-width:none;text-wrap:balance} .yd-lead{margin-top:12px;font-size:1.0625rem;line-height:1.5;color:var(--k-2);max-width:36ch} .yd-ctl{margin-top:22px;display:grid;gap:10px;max-width:420px} .yd-ctl[hidden]{display:none} .yd-in{font:inherit;font-size:1rem;font-weight:600;height:48px;border-radius:12px;border:1px solid var(--line-l);background:var(--l-0);padding:0 14px;color:var(--k-1)} .yd-in:focus-visible{outline:2px solid var(--ink-ring-l);outline-offset:2px} .yd-rail{-webkit-appearance:none;appearance:none;width:100%;height:36px;border-radius:10px;background:var(--yd-rail,var(--l-2));cursor:pointer;box-shadow:inset 0 0 0 1px var(--line-l)} .yd-rail::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--yd1);box-shadow:0 0 0 3px var(--l-0),0 0 0 4px var(--k-3),0 3px 10px color-mix(in srgb,var(--k-1) 30%,transparent);cursor:grab} .yd-rail::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--yd1);border:3px solid var(--l-0)} .yd-rail:focus-visible{outline:2px solid var(--ink-ring-l);outline-offset:3px} .yd-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .yd-seg{display:inline-flex;padding:3px;border-radius:11px;background:var(--l-0);box-shadow:inset 0 0 0 1px var(--line-l)} .yd-seg button,.yd-btn{font:inherit;font-size:.8125rem;font-weight:600;border:0;border-radius:8px;min-height:38px;padding:0 12px;cursor:pointer;background:transparent;color:var(--k-1)} .yd-seg button[aria-pressed=true]{background:var(--k-1);color:var(--l-0)} .yd-btn{background:var(--l-0);border-radius:11px;min-height:44px;box-shadow:inset 0 0 0 1px var(--line-l)} .yd-seg button:focus-visible,.yd-btn:focus-visible{outline:2px solid var(--ink-ring-l);outline-offset:2px} .yd-hex{display:inline-flex;align-items:center;gap:8px;height:44px;border-radius:11px;padding:0 10px;background:var(--l-0);box-shadow:inset 0 0 0 1px var(--line-l)} .yd-hex i{width:16px;height:16px;border-radius:4px;background:var(--yd1)} .yd-hex input{font:inherit;font-size:.875rem;font-weight:600;width:8.4ch;border:0;background:transparent;color:var(--k-1);text-transform:uppercase} .yd-hex input:focus-visible{outline:2px solid var(--ink-ring-l);outline-offset:4px;border-radius:4px} /* the legend: each color with its plain name over its role and its code, the way a brand book lists it */ .yd-legend{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;color:var(--k-1)} .yd-legend li{display:flex;gap:10px;align-items:center;min-width:0} .yd-legend i{flex:none;width:32px;height:32px;border-radius:8px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--k-1) 14%,transparent)} .yd-legend li>span{display:flex;flex-direction:column;min-width:0;line-height:1.25} .yd-legend small span{margin-left:6px} .yd-legend b{font-size:.9375rem;font-weight:600;letter-spacing:-.01em} .yd-legend b:empty{display:none} .yd-legend small{font-size:.75rem;font-weight:500;color:var(--k-2);white-space:nowrap;font-variant-numeric:tabular-nums} .yd-hex b{font-size:.8125rem;font-weight:600;color:var(--k-2);white-space:nowrap} .yd-hex b:empty{display:none} .yd-l1 i{background:var(--yd1)} .yd-l2 i{background:var(--yd2)} .yd-l3 i{background:var(--yd3)} .yd-l4 i{background:var(--yd4)} .yd-go{margin-top:12px} /* the table, seen from above */ .yd-scene{position:relative;z-index:1;height:560px} .yd-obj{position:absolute;margin:0;isolation:isolate} .yd-obj img{display:block;width:100%;height:auto} .yd-dye{position:absolute;inset:0;background:var(--c);mix-blend-mode:multiply;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat;container-type:inline-size} .yd-tee{left:3%;top:5%;width:54%;rotate:-5deg;--m:url(/photo/merch-shirt-511b2bc5.webp);--c:var(--yd1);filter:drop-shadow(6px 14px 14px color-mix(in srgb,var(--k-1) 20%,transparent))} .yd-print{position:absolute;left:30%;right:30%;top:30%;text-align:center;font-weight:700;letter-spacing:-.03em;line-height:1.05;color:var(--ydt1); font-size:clamp(2.6cqi,calc(64cqi / var(--len,8)),7.5cqi);text-wrap:balance} .yd-phone{position:absolute;left:60%;top:8%;width:22%;aspect-ratio:9/19;border-radius:15% / 7%;padding:3%;background:var(--n-2);rotate:8deg; box-shadow:0 0 0 1.5px var(--n-4),8px 20px 26px -8px color-mix(in srgb,var(--k-1) 42%,transparent)} .yd-screen{position:relative;height:100%;border-radius:12% / 5.6%;overflow:hidden;background:var(--l-0);container-type:inline-size} .yd-sbar{display:flex;align-items:center;gap:4cqi;padding:12cqi 7cqi 6cqi;margin:0;background:var(--yd2);color:var(--ydt2)} .yd-slogo{width:11cqi;height:11cqi;border-radius:3cqi;background:var(--yd1);display:grid;place-items:center;font-weight:700;font-size:6.5cqi;color:var(--ydt1)} .yd-sname{font-weight:600;font-size:7cqi;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .yd-sbody{padding:9cqi 7cqi;color:var(--yd2)} .yd-stag{display:inline-block;font-weight:700;font-size:4.6cqi;letter-spacing:.08em;text-transform:uppercase;padding:1.8cqi 3.2cqi;border-radius:2cqi;background:var(--yd4);color:var(--ydt4)} .yd-sh{margin:6cqi 0 0;font-weight:600;font-size:13cqi;line-height:1.02;letter-spacing:-.04em} .yd-sbtn{display:inline-block;margin-top:8cqi;font-weight:600;font-size:6cqi;padding:4.5cqi 7cqi;border-radius:3cqi;background:var(--yd1);color:var(--ydt1)} .yd-simg{display:block;margin-top:9cqi;height:46cqi;border-radius:4cqi;background:linear-gradient(135deg,var(--yd1),var(--yd2))} .yd-cards{position:absolute;left:30%;top:66%;width:34%;height:30%} .yd-card{position:absolute;margin:0;width:70%;aspect-ratio:3.5/2;border-radius:4px;padding:6%;display:flex;flex-direction:column;justify-content:space-between;container-type:inline-size; box-shadow:4px 10px 16px -6px color-mix(in srgb,var(--k-1) 30%,transparent)} .yd-card--1{left:0;top:10%;rotate:-9deg;background:var(--yd2);color:var(--ydt2)} .yd-card--2{left:32%;top:0;rotate:4deg;background:var(--l-0);color:var(--yd2)} .yd-card b{font-size:10cqi;font-weight:700;letter-spacing:-.03em;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .yd-card small{font-size:4.8cqi;font-weight:500;line-height:1.35} .yd-rule{display:block;width:22%;height:1.6cqi;border-radius:1cqi;background:var(--yd4)} .yd-mono{width:19cqi;height:19cqi;border-radius:4cqi;background:var(--yd1);color:var(--ydt1);display:grid;place-items:center;font-weight:700;font-size:10cqi} .yd-sticker{position:absolute;left:72%;top:72%;width:12%;aspect-ratio:1;border-radius:50%;background:var(--yd1);color:var(--ydt1);display:grid;place-items:center;container-type:inline-size; rotate:-12deg;box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--l-0) 55%,transparent),3px 8px 12px -4px color-mix(in srgb,var(--k-1) 32%,transparent)} .yd-sticker b{font-weight:700;font-size:40cqi;letter-spacing:-.04em;line-height:1} /* a new color arrives thing by thing: the table, the shirt, the phone, the cards, the sticker */ @media (prefers-reduced-motion:no-preference){ .yard,.yd-dye,.yd-sbar,.yd-sbody,.yd-slogo,.yd-stag,.yd-sbtn,.yd-card,.yd-mono,.yd-rule,.yd-sticker,.yd-legend i,.yd-print{transition:background-color .6s cubic-bezier(.2,.7,.2,1) var(--yd-d,0ms),color .6s var(--yd-d,0ms)} .yd-dye{--yd-d:60ms} .yd-sbar,.yd-sbtn,.yd-stag{--yd-d:140ms} .yd-card,.yd-rule,.yd-mono{--yd-d:210ms} .yd-sticker{--yd-d:280ms} } /* THE TEXT LINK WITH ITS ARROW: neutral words, an underline in the room's link color (on the band that is the band's own type color, because an ink underline on an ink field disappears), one arrow that moves 3 px */ .go-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--t);font-weight:500;text-decoration:underline;text-decoration-color:var(--link);text-decoration-thickness:1.5px;text-underline-offset:.18em} .go-link:hover{text-decoration-thickness:2.5px} .go-link:hover .ico--go{translate:3px 0} /* THE TILES' PAINT (the drawings in the light room): a screen or a page is white, lettered near black; the ink on it is the fill under near black, edged in the ink's text step; thin rules in the text step. */ .ob-t{fill:var(--ob-t)} .ob-t2{fill:var(--ob-t2)} .ob-ink{fill:var(--ob-ink)} .ob-ink-t{fill:var(--ob-ink-t)} .ob-screen{fill:var(--l-0)} .ob-well{fill:var(--l-2)} .ob-st{fill:var(--k-1)} .ob-st-t{fill:var(--k-1)} .ob-st3{fill:var(--k-3);opacity:.45} .ob-sink{fill:var(--ink-fill)} .ob-sink-t{fill:var(--k-1)} .ob-sline{fill:var(--ink-text-l)} .ob-sedge{fill:none;stroke:var(--ink-text-l);stroke-width:.8} .ob-edge{fill:none;stroke:color-mix(in srgb,var(--k-1) 12%,transparent);stroke-width:.8} .ob-p1{fill:var(--band)} .ob-p2{fill:var(--s04)} .ob-p3{fill:var(--s11)} .ob-p4{fill:var(--pal-a)} /* the lettering in the tiles: the page's one family in caps at 700, the sample holding its drawn width through its textLength, a typed name sized to the box by the script and never stretched */ .ob-name,.ob-mark{font-weight:700} .ob-fine{font-weight:500;letter-spacing:.02em} /* under 1024 the table comes first, short, and the words and the controls follow it; on a phone "Another mix" and the color code step aside, and the rail and the three mixes stay */ @media (max-width:1023px){ .yard{grid-template-columns:minmax(0,1fr)} .yd-scene{order:-1;height:auto;aspect-ratio:1.45} .yd-words{padding:8px var(--pl) 48px} } @media (max-width:760px){ .yd-scene{aspect-ratio:1.2} .yd-tee{width:58%;left:4%} .yd-phone{left:62%;width:28%;top:6%} .yd-cards{left:22%;top:64%;width:48%} .yd-sticker{left:76%;top:74%;width:15%} .yd-words{padding:4px 16px 40px} .yard h2{font-size:1.875rem} .yd-lead{font-size:1rem} .yd-hex{display:none} } /* ============ 11. THE LIGHT ROOM. One continuous cool white floor: the work, what you get and what it costs, how it works. 128 px of air above and below each part on a desk, 96 on a tablet, 72 on a phone, and no rule between them. Section headers are an h2 and at most one lead. ============ */ /* THE RHYTHM (the owner, 2026-09-19: "too much empty space"): two neighboring rooms leave 128 px between them on a desk, 112 on a tablet and 96 on a phone; it was 256, 192 and 144 */ .room--read.sec,.room--read .sec{padding-block:64px} .room--read h2{font-size:clamp(1.875rem,3.4vw,3rem);font-weight:600;line-height:1.06;letter-spacing:-.035em} .lead{margin-top:16px;font-size:1.25rem;line-height:1.45;letter-spacing:-.005em;color:var(--t2);max-width:56ch;text-wrap:pretty} /* THE CARD on light: white, radius 16, a hairline and the one soft elevation */ .wcard,.pcard,.tile{background:var(--l-0);border-radius:16px; box-shadow:inset 0 0 0 1px var(--line-l),0 1px 2px color-mix(in srgb,var(--k-1) 5%,transparent),0 8px 24px -12px color-mix(in srgb,var(--k-1) 10%,transparent)} /* THE WORK. MeasuredPlan in columns 1 to 8, two cards stacked in 9 to 12, the fourth a full-width card. */ .works{margin-top:64px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px} .wcard{grid-column:9/13;display:flex;flex-direction:column;min-width:0;overflow:hidden} .wcard--lead{grid-column:1/9;grid-row:1/3} .wcard--row{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;padding:32px} /* the fourth, full width: the solar installer's site shown without its name or logo (the owner, 2026-09-19), the frame in columns 1 to 7 and its words beside it */ .wcard--wide{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center} .wcard--wide .frame{grid-column:1/8} .wcard--wide .wcard__body{grid-column:8/13;padding:32px} .wcard--row .wcard__say{grid-column:1/6} .wcard--row .wcard__stat{grid-column:6/11;margin:0} .wcard--row .wcard__acts{grid-column:11/13;margin:0;justify-content:flex-end} /* THE CLIENTS' OWN WORDS (MeasuredPlan, signed by its CEO Alfred, and the solar installer, received 2026-09-19; both agreed to light edits, and the installer stays unnamed, as its case does). Their text word for word, on white cards, under one quote mark in the ink. On the home page each card is one unbroken passage of the client's own text, never marked with cut dots (the owner: they look weird); each case file carries the whole quote. */ .quotes{margin-top:32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} @media (max-width:1023px){.quotes{grid-template-columns:minmax(0,1fr)}} .quote{margin:0;padding:36px clamp(24px,3.5vw,44px) 32px;border-radius:16px;background:var(--l-0);box-shadow:inset 0 0 0 1px var(--line-l);display:flex;flex-direction:column} .quote::before{content:"“";display:block;height:.5em;font-size:4.5rem;line-height:1;font-weight:700;color:var(--ink-text-l)} .quote blockquote{margin:0;flex:1} .quote p{font-size:clamp(1.0625rem,1.2vw,1.1875rem);line-height:1.45;letter-spacing:-.01em;font-weight:500;color:var(--k-1);text-wrap:pretty} .quote p+p{margin-top:.8em} .quote figcaption{margin-top:20px;font-size:.875rem;line-height:1.45;color:var(--k-2)} .quote figcaption b{display:block;color:var(--k-1);font-weight:600} .quote figcaption span{display:block;margin-top:6px} @media (max-width:760px){.quotes{grid-template-columns:minmax(0,1fr);gap:16px}} /* THE WORK FRAME, the one media component, TRUE COLOR ALWAYS. A cool mat with 24 px at the top and sides and none at the foot; the capture rises from the foot with its own 8 px top corners, a hairline, and a 32 px dark bar that carries only the domain. The bar is what parts a warm white page from the cool room. Never dyed, never zoomed: the image is set from the top and covers a 16:10 opening. */ .frame{background:var(--l-2);padding:24px 24px 0;display:flex;flex-direction:column} .frame__bar::before{content:attr(data-bar)} .frame__bar{display:flex;align-items:center;height:32px;padding:0 14px;border-radius:8px 8px 0 0;background:var(--n-2);color:var(--t-2); font-size:.8125rem;font-weight:500;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; box-shadow:0 0 0 1px color-mix(in srgb,var(--k-1) 10%,transparent)} .frame__shot{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--l-0); box-shadow:0 0 0 1px color-mix(in srgb,var(--k-1) 10%,transparent),0 1px 2px color-mix(in srgb,var(--k-1) 6%,transparent),0 12px 32px -12px color-mix(in srgb,var(--k-1) 18%,transparent)} .frame__shot img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:top} /* Survair's capture is the crop it is, 1400 by 592, and the opening takes its shape: it is never extended */ .frame--sa .frame__shot{aspect-ratio:1400/592} .wcard__body{display:grid;gap:12px;padding:24px;align-content:start;flex:1} .wcard--lead .wcard__body{padding:32px;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:center} .wcard--lead :is(.plate,.wcard__say,.wcard__stat){grid-column:1} .wcard--lead .wcard__acts{grid-column:2;grid-row:1/4;flex-direction:column;align-items:flex-start;gap:4px} .plate{display:inline-flex;align-items:center;justify-self:start;padding:8px 12px;border-radius:8px;background:var(--l-0);box-shadow:inset 0 0 0 1px var(--line-l)} .plate img{width:9rem;height:auto} .wcard__say{color:var(--t);text-wrap:pretty} .wcard__stat{color:var(--t2);font-size:.9375rem;line-height:1.5;text-wrap:pretty} .wcard__acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:4px} /* the lead card says its one figure the way a stat card does: the numeral in the ink at display size, then the plain sentence. The numeral is a picture of the sentence's own figure, drawn from an attribute the generator checks against the sentence, so it is not a second word on the page and is not read out twice. */ .wcard__stat[data-figure]::before{content:attr(data-figure);display:block;width:max-content;font-size:3rem;font-weight:600;line-height:1;letter-spacing:-.035em;color:var(--ink-display-l);margin-bottom:8px;border-bottom:4px solid var(--ink-display-bar,transparent)} .wcard--lead .wcard__say{font-size:clamp(1.375rem,1.9vw,1.75rem);font-weight:500;line-height:1.3;letter-spacing:-.015em;max-width:30ch} .wcard--lead .wcard__body{gap:20px;align-content:center} /* THE PAGE SCROLLS INSIDE THE FRAME, on hover and on keyboard focus, for the two live sites only. The tall capture lies behind the resting one and begins with the same first screen; the resting one steps aside and the tall one runs to its foot in 5 s, linear, and comes back in 600 ms the moment the pointer or the focus leaves. With motion reduced, with no pointer that hovers and no focus, nothing moves. */ @media (prefers-reduced-motion:no-preference){ .frame--live .shot--tall{transition:object-position .6s cubic-bezier(.2,.7,.2,1)} .frame--live .shot{transition:opacity 0s .6s} .wcard:has(a:focus-visible) .frame--live .shot{opacity:0;transition-delay:0s} .wcard:has(a:focus-visible) .frame--live .shot--tall{object-position:bottom;transition:object-position 5s linear} @media (hover:hover){ .wcard:hover .frame--live .shot{opacity:0;transition-delay:0s} .wcard:hover .frame--live .shot--tall{object-position:bottom;transition:object-position 5s linear} } } @media (max-width:1023px){ .room--read.sec,.room--read .sec{padding-block:56px} .works{grid-template-columns:minmax(0,1fr);margin-top:40px} .wcard,.wcard--lead,.wcard--row,.wcard--wide{grid-column:1;grid-row:auto} .wcard--wide{display:flex} .wcard--row{grid-template-columns:minmax(0,1fr);row-gap:12px;padding:24px} .wcard--row :is(.wcard__say,.wcard__stat,.wcard__acts){grid-column:1;justify-content:flex-start} .wcard--lead .wcard__body{padding:24px;grid-template-columns:minmax(0,1fr)} .wcard--lead .wcard__acts{grid-column:1;grid-row:auto;flex-direction:row;align-items:center;gap:8px 20px} } @media (max-width:760px){ .room--read.sec,.room--read .sec{padding-block:48px} .lead{font-size:1.125rem} .wcard__stat[data-figure]::before{font-size:2.5rem} .wcard--lead .wcard__say{font-size:1.3125rem} .frame{padding:16px 16px 0} .wcard__acts .btn{width:100%;min-height:52px} } /* ============ 9. WHAT YOU GET AND WHAT IT COSTS ============ */ .price__h{max-width:22ch} /* THE ONE MICRO LABEL: 13 px, sentence case, on light grounds only. It is the list's own name, drawn from it. */ .tiles::before{content:attr(aria-label);grid-column:1/-1;font-size:.8125rem;font-weight:500;line-height:1.4;color:var(--t2)} /* THE FIVE TILES: white cards, the drawing on a cool well, the caption under it. No bevel, no thrown shadow. */ .tiles{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 24px} .tile{display:grid;grid-template-rows:auto 1fr;gap:16px;padding:12px 12px 20px} .tile__art{display:block;border-radius:8px;background:var(--l-2);overflow:hidden} .tile__art svg{display:block;width:100%;height:auto} .tile p{padding-inline:8px;font-size:.9375rem;line-height:1.5;color:var(--t2);text-wrap:pretty} .ob-dark{fill:var(--n-1)} .ob-w{fill:var(--l-0)} .ob-inkd{fill:var(--ink-fill)} .ob-cut{fill:none;stroke:var(--ink-text-l);stroke-width:.9;stroke-dasharray:3 2.4} .ob-reg{fill:none;stroke:var(--k-3);stroke-width:.8} .ob-reg--k{stroke:var(--k-1)} .ob-dim{fill:none;stroke:var(--k-2);stroke-width:.8} /* THE PRICE CARD. A card whose hero is the price: the name, the numeral in the ink's display step with the time beside it on one baseline, one sentence, four bullets with a drawn check, what is not included, one quiet button and one link. Three equal cards: no ring, no badge. Subgrid rows line the parts up across the three. */ .pcards{margin-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;grid-template-rows:repeat(8,auto)} .pcard{grid-row:span 8;display:grid;grid-template-rows:subgrid;row-gap:0;padding:32px;min-width:0} .pcard h3{font-size:1.375rem;font-weight:600;line-height:1.2;letter-spacing:-.015em} .pcard__fig{margin-top:20px;display:flex;align-items:baseline;align-items:last baseline;gap:12px;color:var(--t2)} .pcard__dur{min-width:0;line-height:1.3;text-wrap:balance} /* the price figure is the one thing allowed over the h1. The face has no tabular figures, so nothing depends on digits lining up; the dollar sign is a superior, half size, hung from the cap height of the figures. If an ink's numeral ever falls back to near black (a data switch), a 4 px bar of the ink's fill sits under it. */ .fig{font-weight:600;font-size:4.5rem;line-height:.95;letter-spacing:-.04em;color:var(--ink-display-l);white-space:nowrap; border-bottom:4px solid var(--ink-display-bar,transparent)} .fig__d{font-size:.5em;font-weight:500;line-height:0;vertical-align:.74em;letter-spacing:0;margin-right:.06em} .pcard__say{margin-top:16px;color:var(--t2);text-wrap:pretty} /* the founding rate: one quiet line under the figure, its number in the ink's text step */ .pcard__fnd{margin-top:10px;font-size:.9375rem;line-height:1.4;color:var(--t2)} .pcard__fnd b{font-weight:600;color:var(--ink-text-l)} /* THE SLIM PAIR. The site report and site care, after the three projects: one row of two, each card split in two columns on a desk, the name, the figure and the sentence on the left and the four bullets on the right. */ .pcards--slim{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:24px;margin-top:8px} .pcard--slim{grid-row:auto;grid-template-rows:none;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-content:start;padding:28px 32px;border-top:1px solid var(--rule)} .pcard--slim>*{grid-column:1} .pcard--slim .fig{font-size:3rem} .pcard--slim .btn{grid-column:2;grid-row:1/3;align-self:start;margin-top:0} .pcard--slim .go-link{grid-column:2;grid-row:3;justify-self:start} /* THE OPEN LINE: the founding rate and the next start date, two quiet pills over the cards */ .open{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px 10px} .open>span{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;padding:9px 16px;border-radius:999px;background:var(--l-0);box-shadow:inset 0 0 0 1px var(--line-l);font-size:.9375rem;line-height:1.4;color:var(--t2)} .open b{font-weight:600;color:var(--t)} .open__f b{color:var(--ink-text-l)} .open[hidden],.open>span[hidden],.pcard__fnd[hidden],.pg-open[hidden],.pg-open>span[hidden],.pg-pcard__fnd[hidden]{display:none} .pcard__ul{list-style:none;margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--rule);display:grid;gap:10px;align-content:start} .pcard__ul li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;color:var(--t)} .pcard__ul li::before{content:"";width:16px;height:16px;margin-top:.3em;background:var(--ink-text-l); mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center/16px no-repeat; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center/16px no-repeat} .pcard__not{margin-top:20px;font-size:.9375rem;line-height:1.5;color:var(--t3)} .pcard .btn{margin-top:24px;justify-self:start;max-width:100%;white-space:normal;text-align:center;line-height:1.2;padding-block:8px} .pcard .go-link{margin-top:4px;justify-self:start} .cost__reply{margin-top:24px;font-size:.9375rem;line-height:1.5;color:var(--t2)} /* THE NO SURPRISES STRIP: four facts in a row, two by two on a phone, a hairline over each */ .strip{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px} .cell{padding-top:16px;border-top:1px solid var(--rule)} .cell h3{font-size:1.375rem;font-weight:600;line-height:1.2;letter-spacing:-.015em} .cell p{margin-top:8px;font-size:.9375rem;line-height:1.5;color:var(--t2);text-wrap:pretty} .cost__partner{margin-top:48px;color:var(--t2)} .cost__partner a{color:var(--t);font-weight:500;text-decoration:underline;text-decoration-color:var(--link);text-decoration-thickness:1.5px;text-underline-offset:.18em} .cost__partner a:hover{text-decoration-thickness:2.5px} .cost__fine{margin-top:8px;font-size:.8125rem;line-height:1.4;color:var(--t3)} @media (max-width:1199px){.fig{font-size:4rem}} @media (max-width:1023px){ .tiles{position:relative;margin-top:40px;padding-top:32px!important;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gut);scrollbar-width:none;margin-inline:calc(-1*var(--gut));padding:4px var(--gut) 24px;margin-bottom:-24px} .tiles::-webkit-scrollbar{display:none} .tiles::before{position:absolute;left:var(--gut);top:0} .tile{flex:none;width:min(62vw,260px);scroll-snap-align:start} .pcards{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:16px} .pcards--slim{margin-top:16px} .pcard--slim{grid-template-columns:minmax(0,1fr);padding:24px} .pcard--slim .btn,.pcard--slim .go-link{grid-column:1;grid-row:auto} .pcard--slim .btn{margin-top:20px} .open>span{border-radius:16px} .pcard{grid-row:auto;grid-template-rows:none;padding:24px} .fig{font-size:3.5rem} .pcard .btn{justify-self:stretch;min-height:52px} .strip{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:48px} } @media (max-width:760px){.cell h3,.pcard h3{font-size:1.3125rem}} /* ============ 10. HOW IT WORKS: THE WEEK RULER, fully drawn as its resting state ============ Two rows on one time axis, a 2 px line in the ink's text step each, three payment dots on each: start, middle, end. The logo's row ends at the end of week 2, two thirds along; the logo and website's runs the whole way. Desk: horizontal, six columns. Below 1024: vertical, the two rows become two columns of one line each and the markers read top to bottom in the same order. Markup and rules only. */ .ruler{margin-top:64px} .ruler__legend{display:flex;align-items:center;gap:10px;font-size:.9375rem;line-height:1.5;color:var(--t2)} .ruler__dot,.ruler__line i{width:12px;height:12px;border-radius:50%;background:var(--ink-fill);box-shadow:inset 0 0 0 1.5px var(--ink-text-l),0 0 0 3px var(--l-1);flex:none} .ruler__grid{margin-top:32px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;align-items:start} .ruler__ax{grid-row:1;font-size:.9375rem;font-weight:600;line-height:1.4;color:var(--t)} .ruler__ax--1{grid-column:1/3} .ruler__ax--2{grid-column:2/6;text-align:right} .ruler__ax--3{grid-column:9/13;text-align:right} .ruler__name{grid-column:1/-1;margin-top:20px;font-size:.9375rem;font-weight:500;line-height:1.4;color:var(--t2)} .ruler__name--logo{grid-row:2} .ruler__name--site{grid-row:4} .ruler__line{position:relative;display:block;height:2px;margin:14px 0 6px;background:var(--ink-text-l)} .ruler__line--logo{grid-row:3;grid-column:1/6} .ruler__line--site{grid-row:5;grid-column:1/13} .ruler__line i{position:absolute;top:-5px} .ruler__line i:nth-child(1){left:0} .ruler__line i:nth-child(2){left:calc(50% - 6px)} .ruler__line i:nth-child(3){right:0} .ruler__m{grid-row:6;margin-top:28px;padding-top:12px;border-top:1px solid var(--rule);color:var(--t);text-wrap:pretty} .ruler__m--1{grid-column:1/4} .ruler__m--2{grid-column:4/7} .ruler__m--3{grid-column:7/10} .ruler__m--4{grid-column:10/13;text-align:right} /* the one inline tag: radius 4, 13 px, on light */ .tag{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:4px;background:var(--l-2);color:var(--t2);font-size:.8125rem;font-weight:500;line-height:1.4;white-space:nowrap} /* THE FOOT OF THE SECTION: the closing line as a statement in columns 1 to 8 with its two links. */ .how__foot{margin-top:96px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start} .how__words{grid-column:1/9} .how__close{color:var(--t);font-size:clamp(1.375rem,1.9vw,1.75rem);font-weight:500;line-height:1.3;letter-spacing:-.015em;max-width:44ch;text-wrap:balance} .how__go{margin-top:12px;display:flex;flex-wrap:wrap;gap:0 32px} @media (max-width:1023px){ .ruler{margin-top:40px} .ruler__legend{align-items:flex-start} .ruler__legend .ruler__dot{margin-top:.35em} .ruler__grid{grid-template-columns:12px 12px minmax(0,1fr);column-gap:10px;row-gap:0} /* the two names lead down into their own lines: a stem from each name to the column under it */ .ruler__name{grid-column:1/-1;margin-top:0;padding:4px 0 4px 54px;background:linear-gradient(var(--ink-text-l),var(--ink-text-l)) 5px 100%/2px 50% no-repeat} .ruler__name--logo{grid-row:1} .ruler__name--site{grid-row:2;padding-bottom:16px;background:linear-gradient(var(--ink-text-l),var(--ink-text-l)) 5px 0/2px 100% no-repeat,linear-gradient(var(--ink-text-l),var(--ink-text-l)) 27px 100%/2px calc(100% - 14px) no-repeat} .ruler__ax,.ruler__m{grid-column:3;text-align:left;margin-left:10px} .ruler__ax--1{grid-row:3} .ruler__m--1{grid-row:4} .ruler__m--2{grid-row:5} .ruler__ax--2{grid-row:6} .ruler__m--3{grid-row:7} .ruler__ax--3{grid-row:8} .ruler__m--4{grid-row:9} .ruler__m{margin-top:4px;padding:0 0 28px;border-top:0;color:var(--t2)} .ruler__m--4{padding-bottom:0} .ruler__line{width:2px;height:auto;margin:0 5px -12px;align-self:stretch} .ruler__line--logo{grid-column:1;grid-row:3/6} .ruler__line--site{grid-column:2;grid-row:3/8} .ruler__line i{top:auto;left:-5px!important;right:auto} .ruler__line i:nth-child(1){top:6px} .ruler__line i:nth-child(2){top:calc(50% - 6px)} .ruler__line i:nth-child(3){bottom:-6px;right:auto} .how__foot{margin-top:64px;grid-template-columns:minmax(0,1fr)} .how__words{grid-column:1} } /* ============ 11b. THE CLOSE, PART ONE: THE FREE CHECK BAND. Full bleed on the stage ground, no radius, no card around it, no light strip between it and the footer. As the approved mock draws it: the words, the white group and the address in the wider column at left, the hello frame at right, both centered on each other, and one sample card under both. The dock's wrapper ended above it, so nothing can rest on this form. ============ */ .you{padding-block:80px} .you__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px clamp(32px,6vw,96px);align-items:center} .you__words{grid-column:1;min-width:0} .you h2{font-size:clamp(1.875rem,3.4vw,3rem);font-weight:560;line-height:1.06;letter-spacing:-.035em} .you__lead{margin-top:16px;max-width:34ch;font-size:1.25rem;line-height:1.45;letter-spacing:-.005em;color:var(--t2);text-wrap:pretty} .you__form{margin-top:30px;min-width:0} .you__form .group{max-width:560px} .you__mail{margin-top:18px;color:var(--t2);text-wrap:pretty} .you__mail a{color:var(--t);font-weight:600;text-decoration:underline;text-decoration-color:var(--link);text-decoration-thickness:1.5px;text-underline-offset:.18em;overflow-wrap:anywhere} .you__mail a:hover{text-decoration-thickness:2.5px} .you .hello{grid-column:2} /* THE SAMPLE CARD: one surface step off the band, a hairline, no shadow. The figure is a two part bar and is never the only carrier of itself: both shares are printed beside it. The customer's share is the ink's fill, the rest is the text color at 14 percent. */ .scard{grid-column:1/-1;margin:0;padding:32px;border-radius:16px;background:var(--n-2);box-shadow:inset 0 0 0 1px var(--line-d); display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px 24px;align-items:center} .scard__h{grid-column:1/-1;font-size:.9375rem;line-height:1.4;font-weight:500;color:var(--t2)} .scard__bar{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px 16px;align-items:center} .scard__k{font-size:.9375rem;line-height:1.4;color:var(--t2);white-space:nowrap} .scard__k b{font-weight:600;color:var(--t)} .bar{display:block;width:100%;height:12px;border-radius:6px} .bar__you{fill:var(--ink-fill)} .bar__us{fill:color-mix(in oklab,var(--t-1) 14%,transparent)} .scard__say{grid-column:1/9;color:var(--t);max-width:68ch;text-wrap:pretty} .scard__go{grid-column:9/13;justify-self:end;font-size:.9375rem} @media (max-width:1023px){ .you{padding-block:72px} .you__in{grid-template-columns:minmax(0,1fr);gap:40px} .you__words,.you .hello,.scard__say,.scard__go{grid-column:1} .you__lead{font-size:1.125rem;max-width:none} .you__form{margin-top:24px} .scard{grid-template-columns:minmax(0,1fr);padding:24px;gap:16px} .scard__go{justify-self:start} } /* the narrow phone: the two shares stack, one over the bar and one under it */ @media (max-width:520px){ .scard__bar{grid-template-columns:minmax(0,1fr)} .scard__k--us{justify-self:end} } /* ============ 11c. HER PHOTOGRAPHS. The owner's own pictures, in two places only: her portrait at the head of the About page and the hello frame, here and in the hero of /contact/. One frame for both: 4:5, radius 16, the surface step behind it while it loads, the picture covering it, TRUE COLOR ALWAYS: no filter, no blend, no mask, no tint, no transform, never dyed by the ink. The caption under it in the room's second text. THE HELLO FRAME is three pictures of the same size stacked in that frame, the first at the bottom. At rest the two others are transparent, so the first is the picture: with every script off, with motion reduced, and until all three have loaded. The script beside the frame marks it data-play once they have, and with motion allowed the other two step in and out, no fade, in the order and at the lengths of the approved loop: 1 for 0.9 s, 2 for 0.7 s, 3 for 1.4 s, 2 for 0.7 s, and round again. Their opacity is the only property that moves, and scripts/verify.mjs (17b, 17e) allows it on these two classes and nowhere else. ============ */ .pic{margin:0;min-width:0} .pic__frame{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:var(--n-2)} .pic__frame img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover} .pic__cap{margin-top:12px;font-size:.9375rem;line-height:1.5;color:var(--t2)} .pic__cap b{font-weight:600;color:var(--t)} .hello__f2,.hello__f3{opacity:0} @media (prefers-reduced-motion:no-preference){ .hello[data-play] .hello__f2{animation:hello-2 3.7s step-end infinite} .hello[data-play] .hello__f3{animation:hello-3 3.7s step-end infinite} } @keyframes hello-2{0%{opacity:0}24.32%{opacity:1}43.24%{opacity:0}81.08%,100%{opacity:1}} @keyframes hello-3{0%{opacity:0}43.24%{opacity:1}81.08%,100%{opacity:0}} /* SHORTER SCROLL (the owner, 2026-09-18: "with pictures scroll is too long"). On a desk the frame is held to 400 px wide, so it is never taller than the words beside it by much; the About portrait gets 440. Under 1024 px the frame turns landscape, 4:3, cut from the same picture: her face and the dress stay in the frame (the hello frames at 55 percent down, the portrait at 20), and each picture costs about 180 px less of the phone's scroll. */ .pic{width:100%;max-width:400px;justify-self:end} .pg-hero--pic .pic{max-width:440px} @media (max-width:1023px){ .pic,.pg-hero--pic .pic{max-width:none;justify-self:stretch} .pic__frame{aspect-ratio:4/3} .hello .pic__frame img{object-position:50% 55%} .pic:not(.hello) .pic__frame img{object-position:50% 20%} } /* ============ 12. THE CLOSE, PART TWO: THE FOOTER. One step darker than the stage, a single hairline above it. ============ HOME: the logo at large size, its i and its second line in the ink, as wide as the container lets it be while the whole footer stays inside min(60svh, 560px) on a desk. Under it one row of three: the share line and the chip row, ONE column of buyer links, the quiet line and the sign-off. INNER PAGES AND THE REPLY: the same row under the logo at 44 px, linked home (src/lib/picker-shell.ts swaps it in). PHONE: one column, the logo from gutter to gutter with no height cap, 44 px link rows. */ .close{padding-block:32px 24px;border-top:1px solid var(--edge)} .close__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:20px 24px;align-items:start} /* the logo's frame is 643 by 193, so its width is 3.332 of the height the footer can spare it */ .flk{grid-column:1/-1} .lk--big{width:min(100%,calc((min(60svh,560px) - 264px)*3.332));height:auto} .brand--foot{grid-column:1/-1;justify-self:start} .brand--foot .lk{height:44px} /* the share line: only the address is the link; the chip sits in the plain run and the ink name is neutral */ .share{color:var(--t2);text-wrap:pretty;font-size:.9375rem;line-height:1.5;max-width:44ch} .share .nm{font-weight:600;color:var(--t)} .share a,.signoff a,.close__built a{color:inherit;text-decoration:underline;text-decoration-color:var(--link);text-decoration-thickness:1.5px;text-underline-offset:.18em} .share a{color:var(--t)} .share a:hover,.signoff a:hover,.close__built a:hover{text-decoration-thickness:2.5px} .close .dots{margin:12px 0 0 -6px} .close__main{list-style:none;margin:0;padding:0;display:grid;align-content:start;font-size:1.0625rem;font-weight:500} .close__main a{color:var(--t);text-decoration:none;display:inline-flex;align-items:center;min-height:28px} .close__main a:hover,.close__main a:focus-visible{text-decoration:underline;text-decoration-color:var(--link);text-decoration-thickness:1.5px;text-underline-offset:.18em} .close__built{font-size:.9375rem;line-height:1.5;color:var(--t3);text-wrap:pretty} /* the nav holds the link column and the quiet line, and the sign-off sits under the quiet line beside the links: with subgrid the nav lends its two cells to the footer's own rows; without it the sign-off drops a row */ .close__send{grid-column:1;grid-row:2/4} .close__nav{grid-column:2/4;grid-row:2/4;display:grid;grid-template-columns:3fr 4fr;gap:20px 24px;align-content:start} .close__main{grid-column:1;grid-row:1/3} .close__built{grid-column:2;grid-row:1} .close__off{grid-column:1/-1;grid-row:4;display:grid;gap:8px;align-content:start} @supports (grid-template-rows:subgrid){ .close__nav{grid-template-columns:subgrid;grid-template-rows:subgrid} .close__off{grid-column:3;grid-row:3} } .signoff{font-size:.9375rem;line-height:1.5;color:var(--t2);text-wrap:pretty} .signoff a{color:var(--t)} .signoff__kb{font-size:.9375rem;line-height:1.5;color:var(--t3)} /* between 1024 and 1199 the three columns wrap a line more, so the logo hands back the difference */ @media (max-width:1199px){.lk--big{width:min(100%,calc((min(60svh,560px) - 292px)*3.332))}} @media (max-width:1023px){ .close__in{grid-template-columns:minmax(0,1fr)} .close__send,.close__nav,.close__off{grid-column:1;grid-row:auto} .close__nav{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:none} } @media (max-width:760px){ .lk--big{width:100%} .close__nav{grid-template-columns:minmax(0,1fr)} .close__main,.close__built{grid-column:1;grid-row:auto} .close__main a{min-height:44px;display:flex} .close .dots{margin-left:0} } /* ============ 13. THE REPLY (board mock of /amber/proof/): the van, two panes, the forward line ============ */ .reply{padding-block:clamp(1.5rem,3vw,2.5rem) clamp(3rem,6vw,5rem)} /* the reply's stage: the name row alone, no photograph, at the desk's size and block, and its one caption */ .photo--reply{margin:0;background:none} .photo--reply .name{display:flex;align-items:flex-end;height:96px;margin:0;font-size:92px;font-weight:700;line-height:1;letter-spacing:.03em;color:var(--ink-fill);white-space:nowrap} .photo--reply .cap{height:auto;margin:6px 0 0;max-width:60ch} .reply__panes{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.5rem,3.5vw,4rem);align-items:start;margin-top:clamp(2rem,4vw,3rem)} .read{display:grid;gap:.9rem;align-content:start} .read__sample{color:var(--t2);text-wrap:pretty;max-width:50ch} .read__pct{display:grid;grid-template-columns:auto 1fr;gap:1.25rem;align-items:baseline;color:var(--t);margin-top:.5rem;text-wrap:pretty} .read__n{font-weight:600;font-size:3rem;line-height:1;letter-spacing:-.035em;color:var(--ink-text-d)} @media (max-width:760px){.read__n{font-size:2.5rem}} .read__lead{color:var(--t2);margin-top:.5rem} .read__q{margin:0;padding-left:1rem;border-left:3px solid var(--mark);color:var(--t);display:grid;gap:.15rem} .offer{background:var(--surf);border-radius:16px;padding:clamp(1.25rem,2.4vw,2rem);display:grid;gap:1.25rem;align-content:start} .reply__differs{color:var(--t);text-wrap:pretty} /* the price line, set as h3; the underline runs under the words only */ .reply__price{text-wrap:pretty} .reply__price a{color:var(--t);text-decoration:none} .reply__price a .u{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px} .reply__acts{display:flex;flex-wrap:wrap;align-items:center;gap:1rem} .reply__mail{font-weight:500;color:var(--t);user-select:all;-webkit-user-select:all} .reply__when{color:var(--t2)} .reply__share{margin-top:clamp(2rem,4vw,3rem);color:var(--t2);max-width:52ch;text-wrap:pretty} .reply__linkrow{display:block;margin-top:.4rem} .reply__link{display:inline-block;font:inherit;font-weight:500;color:var(--t);user-select:all;-webkit-user-select:all;text-decoration:underline;text-underline-offset:.15em;overflow-wrap:anywhere} /* ============ 14. MOTION. One easing, states in 120 to 160 ms, and the still page is the page. ============ Every rule here ADDS movement to a resting state that is already the finished page: with scripts off, with motion reduced, or in an engine that has none of this, nothing is missing, nothing is hidden and nothing moves by itself. A visitor who asked for less motion gets fades of 150 ms at most, the name standing still and a ring that holds instead of pulsing. The name's flight is picker.js's, not a keyframe here: it runs only with motion allowed and a script running, and without either the name rests, whole. */ @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} @media (hover:hover){ .btn{transition:background-color .12s cubic-bezier(.2,.7,.2,1),box-shadow .12s cubic-bezier(.2,.7,.2,1)} /* the preview: resting on a chip re-colors the giant name in 100 ms, nothing else */ .hero__word{transition:color .1s} } /* THE ARRIVAL: a link to #u lands, and after a quarter second the white group is ringed in the ink, out to six pixels and back, over 700 ms */ .group:has(#u:target){animation:arrive .7s cubic-bezier(.2,.7,.2,1) .25s} @keyframes arrive{50%{box-shadow:0 0 0 6px var(--ink-fill)}} /* THE BUSY LINE (hook 4) grows along the field for eight seconds, eased, until the reply page takes over */ form[data-busy] .group::after{scale:1 1;transition:scale 8s cubic-bezier(.2,.7,.2,1)} .ico--go{transition:translate .18s cubic-bezier(.2,.7,.2,1)} } /* THE POUR (hook 6) AND THE PAGE CHANGE (hook 7), both view transitions, told apart by one attribute. Same document, an ink change on the home page: picker.js sets data-pour on the root for the length of the transition, and the new page comes out from under the pressed chip in 400 ms, hard edged under a thumb and feathered under a fine pointer. Between documents there is no attribute: the old root leaves in 140 ms and the new one arrives in 220 ms, opacity and eight pixels of rise, never the circle. The header and the dock are their own groups and hold still in both, with the blend the engine would add between their two snapshots turned off, so the bar never brightens while the room under it changes. */ @view-transition{navigation:auto} .hd{view-transition-name:hd} .dock{view-transition-name:dock} /* THE SCREENSHOT TRAVELS (wow 6): each work capture is its own group, named the same on the case page that opens on the same file, so on the way from the card to the case the picture morphs into the case's hero instead of fading with the page. With motion reduced the group animation is off, like every other. */ .shot--mp{view-transition-name:shot-measuredplan} .shot--dcp{view-transition-name:shot-datacenterprep} .shot--sa{view-transition-name:shot-survair} .shot--sp{view-transition-name:shot-solarprojects} ::view-transition-group(hd),::view-transition-new(hd),::view-transition-group(dock),::view-transition-new(dock){animation:none} /* the old header has no ground of its own, so its snapshot would show through the new one: it is not drawn */ ::view-transition-old(hd),::view-transition-old(dock){display:none} ::view-transition-old(*),::view-transition-new(*){mix-blend-mode:normal} @keyframes page-out{to{opacity:0}} @keyframes page-in{from{opacity:0;translate:0 8px}} @keyframes page-fade{from{opacity:0}} @property --pour-r{syntax:"";inherits:false;initial-value:0px} @media (prefers-reduced-motion:no-preference){ ::view-transition-old(root){animation:page-out .14s ease-in} ::view-transition-new(root){animation:page-in .22s cubic-bezier(.2,.7,.2,1)} html[data-pour]::view-transition-old(root){animation:none} html[data-pour]::view-transition-new(root){animation:pour .4s cubic-bezier(.3,0,.1,1)} /* --vr is the distance from the pressed chip to the farthest corner of the viewport, set with --vx and --vy, so the pour ends the moment the last corner is covered and not a frame earlier */ @keyframes pour{from{clip-path:circle(0 at var(--vx,50%) var(--vy,50%))}to{clip-path:circle(var(--vr,160%) at var(--vx,50%) var(--vy,50%))}} @media (hover:hover) and (pointer:fine){ html[data-pour]::view-transition-new(root){animation:pour-soft .4s cubic-bezier(.3,0,.1,1); mask:radial-gradient(circle at var(--vx,50%) var(--vy,50%),var(--n-1) calc(var(--pour-r) - 140px),transparent var(--pour-r))} @keyframes pour-soft{from{--pour-r:0px}to{--pour-r:calc(var(--vr,200vmax) + 140px)}} } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none!important;animation:none!important} ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important} /* the root still changes as a 150 ms fade, never a hard flash, whether the change is an ink or a page */ ::view-transition-old(root){animation:page-out .15s linear!important} ::view-transition-new(root){animation:page-fade .15s linear!important} } /* ============ CONTAINMENT ============ Changing the ink rewrites eleven custom properties on body. Containing the sections below the fold means only what is on screen is restyled. NEVER on .after-hero itself: content-visibility on the dock's wrapper ends sticky. */ .yard,.work,.cost,.how,.you,.close,.reply{content-visibility:auto;contain-intrinsic-size:auto 900px} .close{contain-intrinsic-size:auto 540px} /* ============ 15. PRINT ============ */ @media print{.hd,.dock,.dots{display:none!important}.reply__acts .btn{color:inherit;background:none;padding:0}} /* ============ 16. NARROW AND PHONE ============ */ @media (max-width:900px){ .read__pct{grid-template-columns:1fr;gap:.5rem} .reply__panes{grid-template-columns:1fr} } @media (max-width:760px){ /* the white group stacks: a 52 px field, 8 px, a 52 px button, inside the same panel */ .group{grid-template-columns:minmax(0,1fr);gap:8px} .group .btn{grid-area:2/1} .group input,.group .btn{height:52px;min-height:52px} .price__h{max-width:none} .plate img{width:8rem} .offer{padding:1.1rem} } /* ============ BACK TO TOP (the owner, 2026-09-19). One round button at the bottom right, on every page. It rests hidden and fades in once the reader is about a screen down, where the timeline exists; elsewhere it simply stays in place. On a phone it sits above the dock, which spans the width there. A link to the top of the body, so it works with every script off. ============ */ .totop{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:41;display:grid;place-items:center; width:48px;height:48px;border-radius:50%;background:var(--n-2);color:var(--t-1);text-decoration:none; box-shadow:0 0 0 1px var(--n-4),0 10px 24px -10px color-mix(in srgb,var(--k-1) 60%,transparent)} .totop svg{width:20px;height:20px} .totop:hover{background:var(--n-3)} .totop:focus-visible{outline:2px solid var(--ink-ring-d);outline-offset:3px} /* on a phone the dock is centered with about 48 px free at each side; the button, 40 px, sits in that margin and above the dock's usual place, and the dock stays on top wherever the dock rests at the end of a short page */ @media (max-width:760px){.totop{width:40px;height:40px;right:6px;z-index:39;bottom:calc(80px + env(safe-area-inset-bottom))}.totop svg{width:18px;height:18px}} @supports (animation-timeline:scroll()){ .totop{animation:totop-in linear both;animation-timeline:scroll(root);animation-range:0 110vh} } @keyframes totop-in{0%,70%{opacity:0;visibility:hidden}100%{opacity:1;visibility:visible}} /* ============ THE CURRENCY SWITCH (the owner, 2026-09-19): prices are set and billed in US dollars; this shows them in another currency, approximate, with the date of the rate. Hidden until its script binds it. ============ */ .fx{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:.875rem;line-height:1.4;color:var(--k-2)} .fx[hidden]{display:none} .fx label{font-weight:600;color:var(--k-1)} .fx select{font:inherit;font-weight:600;color:var(--k-1);background:var(--l-0);border:1px solid var(--line-l);border-radius:10px;height:40px;padding:0 10px;cursor:pointer} .fx select:focus-visible{outline:2px solid var(--ink-ring-l);outline-offset:2px} /* ============ 8b. THE LAUNCH SET, CURRENT OBJECTS (2026-09-19) ============ The owner: "phone mockup and business card mockups looks dated. only current modern best designs needed". A design round (research, three builds, three judges, one refinement) chose these: a current Pro phone lying flat with a thin metal frame, a modern small-business site on its screen, thick duplex cards with painted edges, a vinyl sticker. It overrides the first launch set above, so it stays last in the file. */ /* FINAL: a current Pro phone lying flat, a set of cards on thick duplex stock and a vinyl sticker, one key light from the top left. Every length on the table is in --yu (1% of the table's width); wider than 1440 it holds its 1440 value, so the things keep their size. Shadows fall 1 across for 2 down in the world and are counter-rotated per object (--sx/--sy); the lit edge uses --kx/--ky. */ #yard .yd-scene{container-type:inline-size;--yu:1cqi;--ys:color-mix(in srgb,var(--n-0) 88%,var(--yd2)); --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); --cx:14%;--cy:min(max(calc(5% + 37 * var(--yu)),calc(100% - 29 * var(--yu))),calc(100% - 19.5 * var(--yu)))} #yard .yd-phone,#yard .yd-card,#yard .yd-under,#yard .yd-sticker{rotate:var(--r); --sx:calc(cos(var(--r)) + 2 * sin(var(--r)));--sy:calc(2 * cos(var(--r)) - sin(var(--r))); --kx:calc(cos(var(--r)) + sin(var(--r)));--ky:calc(cos(var(--r)) - sin(var(--r)))} /* THE PHONE: 71.9 x 150, a thin metal frame, a glass border and a screen with concentric corners */ #yard .yd-phone{--r:5deg;--f:color-mix(in srgb,var(--l-2) 80%,var(--k-3));position:absolute;left:64.5%;top:calc(5% - .6 * var(--yu));width:calc(22 * var(--yu)); aspect-ratio:71.9/150;padding:0;border-radius:18%/8.63%;container-type:inline-size; background:linear-gradient(120deg,color-mix(in srgb,var(--f),var(--l-0) 60%),var(--f) 20%,color-mix(in srgb,var(--f),var(--n-0) 20%) 55%,color-mix(in srgb,var(--f),var(--l-0) 30%) 82%,color-mix(in srgb,var(--f),var(--n-0) 10%)); box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--n-0) 35%,transparent), inset calc(.3 * var(--yu) * var(--kx)) calc(.3 * var(--yu) * var(--ky)) calc(.25 * var(--yu)) calc(-.15 * var(--yu)) color-mix(in srgb,var(--l-0) 55%,transparent), calc(.08 * var(--yu) * sin(var(--r))) calc(.08 * var(--yu) * cos(var(--r))) calc(.15 * var(--yu)) color-mix(in srgb,var(--ys) 35%,transparent), calc(.45 * var(--yu) * var(--sx)) calc(.45 * var(--yu) * var(--sy)) calc(1.4 * var(--yu)) calc(-.2 * var(--yu)) color-mix(in srgb,var(--ys) 22%,transparent), calc(1.1 * var(--yu) * var(--sx)) calc(1.1 * var(--yu) * var(--sy)) calc(4.5 * var(--yu)) calc(-1 * var(--yu)) color-mix(in srgb,var(--ys) 14%,transparent)} /* the glass border, in percent of the phone so it never depends on how an engine measures units on a pseudo-element */ #yard .yd-phone::before{content:"";position:absolute;inset:.671% 1.4%;border-radius:16.6%/7.957%;background:var(--n-0); box-shadow:0 0 0 .5px color-mix(in srgb,var(--n-0) 40%,transparent),inset 0 0 0 .5px color-mix(in srgb,var(--l-0) 12%,transparent)} /* the buttons: action, volume up and down on the left; side button and Camera Control on the right */ #yard .yd-phone::after{content:"";position:absolute;inset:0 -.8%;z-index:-1; background:linear-gradient(var(--f),var(--f)) left 0 top 20.6%/.9% 3% no-repeat, linear-gradient(var(--f),var(--f)) left 0 top 29.8%/.9% 6% no-repeat, linear-gradient(var(--f),var(--f)) left 0 top 38.3%/.9% 6% no-repeat, linear-gradient(var(--f),var(--f)) right 0 top 33%/.9% 9% no-repeat, linear-gradient(color-mix(in srgb,var(--f),var(--n-0) 35%),color-mix(in srgb,var(--f),var(--n-0) 35%)) right 0 top 63.8%/.7% 6% no-repeat} #yard .yd-screen{position:absolute;inset:3.8cqi;height:auto;border-radius:14.2cqi;overflow:hidden;background:var(--l-0);color:var(--k-1);container-type:inline-size; display:flex;flex-direction:column;line-height:1.2} #yard .yd-screen::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(135deg,color-mix(in srgb,var(--l-0) 6%,transparent),transparent 42%)} #yard .yd-isl{position:absolute;z-index:3;top:2.7cqi;left:50%;translate:-50% 0;width:22cqi;height:8.6cqi;border-radius:99px; background:radial-gradient(circle at 76% 50%,color-mix(in srgb,var(--n-3),var(--yd2) 25%) 0 1.5cqi,transparent 1.7cqi),var(--n-0)} #yard .yd-stat{position:absolute;z-index:2;top:0;left:0;right:0;height:14cqi;margin:0;display:flex;align-items:center;gap:1.4cqi;padding:0 7.4cqi 0 10cqi; color:var(--ydt2);font-size:4.3cqi;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums} #yard .yd-time{margin-right:auto} #yard .yd-ico,#yard .yd-ubk,#yard .yd-umore,#yard .yd-lock,#yard .yd-rev i,#yard .yd-tiles i::before{-webkit-mask:var(--g) center/contain no-repeat;mask:var(--g) center/contain no-repeat} #yard .yd-ico{display:block;height:3.3cqi;background:currentColor} #yard .yd-ico--sig{width:5cqi;--g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Crect x='0' y='7.5' width='3.2' height='4.5' rx='1'/%3E%3Crect x='4.9' y='5' width='3.2' height='7' rx='1'/%3E%3Crect x='9.8' y='2.5' width='3.2' height='9.5' rx='1'/%3E%3Crect x='14.7' y='0' width='3.2' height='12' rx='1'/%3E%3C/svg%3E")} #yard .yd-ico--wifi{width:4.6cqi;--g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M8 12 5.6 9.3a3.4 3.4 0 0 1 4.8 0Z'/%3E%3Cpath d='M3.1 6.6a7 7 0 0 1 9.8 0l-1.5 1.6a4.8 4.8 0 0 0-6.8 0Z'/%3E%3Cpath d='M.6 3.9a10.6 10.6 0 0 1 14.8 0l-1.5 1.6a8.4 8.4 0 0 0-11.8 0Z'/%3E%3C/svg%3E")} #yard .yd-ico--bat{width:7.4cqi;--g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 12'%3E%3Crect x='.6' y='.6' width='22.8' height='10.8' rx='3.4' fill='none' stroke='black' stroke-width='1.1' opacity='.45'/%3E%3Crect x='2.3' y='2.3' width='17.5' height='7.4' rx='1.9'/%3E%3Cpath d='M25 4.1v3.8a2 2 0 0 0 0-3.8Z' opacity='.45'/%3E%3C/svg%3E")} /* the site: a dark hero that runs up under the island, a paper sheet with round top corners over its foot, content that scrolls under the address bar */ #yard .yd-hero{background:var(--yd2);color:var(--ydt2);padding:15cqi 7cqi 13.5cqi;border-radius:0} #yard .yd-nav{display:flex;align-items:center;gap:2.6cqi;min-height:12cqi;margin:0 0 5cqi} #yard .yd-slogo{flex:none;width:9cqi;height:9cqi;border-radius:2.6cqi;background:var(--yd1);color:var(--ydt1);display:grid;place-items:center;font-weight:700;font-size:4.4cqi;letter-spacing:-.03em; box-shadow:inset 0 0 0 .3cqi color-mix(in srgb,var(--ydt2) 16%,transparent)} #yard .yd-sname{min-width:0;font-weight:600;font-size:5.4cqi;line-height:1.05;letter-spacing:-.02em;text-wrap:balance;overflow-wrap:anywhere;white-space:normal;overflow:visible} #yard .yd-menu{flex:none;margin-left:auto;width:6cqi;height:2.6cqi;border-block:.6cqi solid currentColor;box-sizing:border-box} #yard .yd-stag{display:inline-flex;align-items:center;gap:1.4cqi;font-weight:700;font-size:3.4cqi;line-height:1;letter-spacing:.08em;text-transform:uppercase; padding:1.5cqi 2.6cqi 1.5cqi 2.2cqi;border-radius:99px;background-color:var(--yd4);color:var(--ydt4)} #yard .yd-stag i{width:1.6cqi;height:1.6cqi;border-radius:50%;background:currentColor} #yard .yd-sh{margin:4cqi 0 0;font-weight:600;font-size:11.5cqi;line-height:1;letter-spacing:-.045em;text-wrap:balance} #yard .yd-ssub{margin:3.4cqi 0 0;font-weight:500;font-size:4.2cqi;line-height:1.4;color:color-mix(in srgb,var(--ydt2) 76%,var(--yd2));text-wrap:pretty} #yard .yd-sbtn{display:flex;padding:0;align-items:center;justify-content:center;margin-top:6cqi;height:12cqi;border-radius:99px;background:var(--yd1);color:var(--ydt1);font-weight:600;font-size:4.6cqi; box-shadow:inset 0 0 0 .3cqi color-mix(in srgb,var(--ydt2) 16%,transparent)} #yard .yd-scall{display:block;margin-top:3.6cqi;text-align:center;font-weight:600;font-size:4.2cqi;text-decoration:underline;text-decoration-thickness:.3cqi;text-underline-offset:.25em; text-decoration-color:color-mix(in srgb,var(--ydt2) 45%,transparent)} #yard .yd-sbody{position:relative;margin-top:-7cqi;padding:6cqi 7cqi 0;border-radius:7cqi 7cqi 0 0;background:var(--l-0);color:var(--k-1)} #yard .yd-rev{margin:0;display:flex;align-items:center;gap:1.6cqi;font-weight:500;font-size:3.6cqi;line-height:1;color:var(--k-2)} #yard .yd-rev i{flex:none;width:14cqi;height:2.6cqi;background:var(--k-1);-webkit-mask-size:2.8cqi 2.6cqi;mask-size:2.8cqi 2.6cqi;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-position:left center;mask-position:left center; --g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 10'%3E%3Cpath d='M5 .4l1.4 2.9 3.2.4-2.3 2.2.6 3.2L5 7.6 2.1 9.1l.6-3.2L.4 3.7l3.2-.4z'/%3E%3C/svg%3E")} #yard .yd-rev b{font-weight:650;color:var(--k-1)} #yard .yd-tiles{margin:4cqi 0 0;display:grid;grid-template-columns:1fr 1fr;gap:3cqi} #yard .yd-tiles span{display:flex;flex-direction:column;justify-content:flex-end;height:29cqi;padding:3.6cqi;border-radius:4cqi;background:var(--yd3);font-weight:600;font-size:4.2cqi;line-height:1.15;letter-spacing:-.01em;color:var(--k-1)} #yard .yd-tiles i{display:grid;place-items:center;width:7.4cqi;height:7.4cqi;border-radius:50%;margin-bottom:auto;background:var(--yd1);color:var(--ydt1); --g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1' y='1' width='4.2' height='4.2' rx='1.2'/%3E%3Crect x='6.8' y='1' width='4.2' height='4.2' rx='1.2'/%3E%3Crect x='1' y='6.8' width='4.2' height='4.2' rx='1.2'/%3E%3Crect x='6.8' y='6.8' width='4.2' height='4.2' rx='2.1'/%3E%3C/svg%3E")} #yard .yd-tiles i::before{content:"";width:3.8cqi;height:3.8cqi;background:currentColor} #yard .yd-tiles span:nth-child(2) i{background:var(--yd4);color:var(--ydt4); --g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='4.6'/%3E%3Cpath d='M6 3.4V6l1.8 1.2'/%3E%3C/svg%3E")} #yard .yd-tiles span:nth-child(3) i{background:var(--yd2);color:var(--ydt2); --g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1' y='1.6' width='10' height='8.8' rx='2' fill='none' stroke='black' stroke-width='1.3'/%3E%3Cpath d='M2.6 9 5 6.2l1.9 1.9 1.2-1.1L9.6 9z'/%3E%3Ccircle cx='8' cy='4.4' r='1'/%3E%3C/svg%3E")} #yard .yd-tiles span:nth-child(4) i{ --g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill-rule='evenodd' d='M6 .8a4.1 4.1 0 0 0-4.1 4.1c0 3.1 4.1 6.3 4.1 6.3s4.1-3.2 4.1-6.3A4.1 4.1 0 0 0 6 .8zm0 5.7a1.6 1.6 0 1 1 0-3.2 1.6 1.6 0 0 1 0 3.2z'/%3E%3C/svg%3E")} #yard .yd-tiles small{font-weight:500;font-size:3.3cqi;color:var(--k-2)} #yard .yd-url{position:absolute;z-index:2;left:50%;bottom:5.5cqi;translate:-50% 0;width:84cqi;height:11cqi;margin:0;display:flex;align-items:center;justify-content:space-between;padding:0 3.6cqi;box-sizing:border-box; border-radius:99px;background:color-mix(in srgb,var(--l-0) 86%,transparent);color:var(--k-1);font-weight:500;font-size:3.6cqi;letter-spacing:-.005em; box-shadow:inset 0 0 0 1px var(--line-l),0 1.5cqi 5cqi -1cqi color-mix(in srgb,var(--n-0) 18%,transparent)} #yard .yd-uaddr{display:flex;align-items:center;gap:1.3cqi} #yard .yd-ubk,#yard .yd-umore{display:block;width:4cqi;height:4cqi;background:var(--k-1)} #yard .yd-lock{display:block;width:2.2cqi;height:2.6cqi;background:var(--k-2); --g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Crect x='1' y='5' width='8' height='7' rx='1.6'/%3E%3Cpath d='M3 5.5V3.6a2 2 0 0 1 4 0v1.9' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E")} #yard .yd-ubk{--g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M8 1.5 3.5 6 8 10.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} #yard .yd-umore{--g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='2' cy='6' r='1.3'/%3E%3Ccircle cx='6' cy='6' r='1.3'/%3E%3Ccircle cx='10' cy='6' r='1.3'/%3E%3C/svg%3E")} #yard .yd-home{position:absolute;z-index:2;left:50%;bottom:1.8cqi;translate:-50% 0;width:33cqi;height:1.25cqi;border-radius:99px;background:var(--k-1)} /* THE CARDS: 3.5 x 2 on thick duplex stock. The key light catches the top-left edges; the painted edge shows on the shadow side, darker */ #yard .yd-cards{--cw:calc(24.5 * var(--yu));position:absolute;left:var(--cx);top:var(--cy);width:calc(48 * var(--yu));height:calc(19 * var(--yu))} #yard .yd-card,#yard .yd-under{--hl:max(.6px,calc(.1 * var(--yu)));position:absolute;margin:0;width:var(--cw);aspect-ratio:3.5/2;padding:0;border-radius:calc(.28 * var(--yu));box-sizing:border-box} #yard .yd-card{display:block;overflow:hidden;container-type:inline-size; background-image:linear-gradient(155deg,color-mix(in srgb,var(--l-0) 8%,transparent),transparent 45%,color-mix(in srgb,var(--n-0) 5%,transparent)); box-shadow:inset calc(var(--hl) * var(--kx)) calc(var(--hl) * var(--ky)) 0 color-mix(in srgb,var(--l-0) 35%,transparent), calc(.12 * var(--yu) * cos(var(--r)) + .22 * var(--yu) * sin(var(--r))) calc(.22 * var(--yu) * cos(var(--r)) - .12 * var(--yu) * sin(var(--r))) 0 var(--edge), calc(.05 * var(--yu) * sin(var(--r))) calc(.05 * var(--yu) * cos(var(--r))) calc(.1 * var(--yu)) color-mix(in srgb,var(--ys) 30%,transparent), calc(.25 * var(--yu) * var(--sx)) calc(.25 * var(--yu) * var(--sy)) calc(1 * var(--yu)) calc(-.15 * var(--yu)) color-mix(in srgb,var(--ys) 16%,transparent)} /* fine cotton grain: raw turbulence, no alpha boost */ #yard .yd-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:color-mix(in srgb,var(--n-0) 5%,transparent);mix-blend-mode:multiply; -webkit-mask:var(--grain) 0 0/140px 140px repeat;mask:var(--grain) 0 0/140px 140px repeat} #yard .yd-under{top:calc(4 * var(--yu));left:0;background:color-mix(in srgb,var(--yd2) 92%,var(--n-0)); box-shadow:inset calc(var(--hl) * var(--kx)) calc(var(--hl) * var(--ky)) 0 color-mix(in srgb,var(--l-0) 22%,transparent), calc(.12 * var(--yu) * var(--sx)) calc(.12 * var(--yu) * var(--sy)) 0 color-mix(in srgb,var(--yd4) 50%,var(--n-0)), calc(.05 * var(--yu) * sin(var(--r))) calc(.05 * var(--yu) * cos(var(--r))) calc(.12 * var(--yu)) color-mix(in srgb,var(--ys) 30%,transparent), calc(.25 * var(--yu) * var(--sx)) calc(.25 * var(--yu) * var(--sy)) calc(1 * var(--yu)) calc(-.15 * var(--yu)) color-mix(in srgb,var(--ys) 14%,transparent)} #yard .yd-under--1{--r:-1deg;translate:calc(.35 * var(--yu)) calc(.3 * var(--yu))} #yard .yd-under--2{--r:-5deg;translate:calc(-.1 * var(--yu)) calc(.6 * var(--yu))} /* the back: dark soft-touch stock, the initials blind-pressed and cropped off the corner, the name big */ #yard .yd-card--1{--r:-3deg;left:0;top:calc(4 * var(--yu));z-index:1;background-color:var(--yd2);color:var(--ydt2);--edge:color-mix(in srgb,var(--yd4) 65%,var(--n-0))} #yard .yd-card--1::after{background:color-mix(in srgb,var(--l-0) 5%,transparent);mix-blend-mode:screen} #yard .yd-cmark{position:absolute;right:9cqi;bottom:-11cqi;font-weight:700;font-size:56cqi;line-height:1;letter-spacing:-.05em;white-space:nowrap; color:color-mix(in srgb,var(--yd2) 84%,var(--n-0)); text-shadow:-.2cqi -.25cqi 0 color-mix(in srgb,var(--n-0) 35%,transparent),.2cqi .25cqi 0 color-mix(in srgb,var(--l-0) 10%,transparent)} #yard .yd-card .yd-curl{position:absolute;left:7cqi;top:7cqi;font-weight:500;font-size:3.6cqi;line-height:1;letter-spacing:.01em;color:color-mix(in srgb,var(--ydt2) 70%,var(--yd2))} #yard .yd-card--1 .yd-cname{position:absolute;left:7cqi;right:21cqi;bottom:7cqi;font-weight:650;font-size:12cqi;line-height:.95;letter-spacing:-.04em;text-wrap:balance;overflow-wrap:anywhere;white-space:normal;overflow:visible;text-overflow:clip} /* the front: warm light stock with a colored core; the name top left, the mark on the right margin, two contact columns that line up */ #yard .yd-card--2{--r:7deg;left:calc(var(--cw) * .85);top:0;z-index:2;background-color:color-mix(in srgb,var(--l-0) 95%,var(--yd3));color:var(--yd2); --edge:color-mix(in srgb,var(--yd1) 70%,var(--n-0))} #yard .yd-card--2 .yd-cname{position:absolute;left:7.5cqi;top:7.5cqi;right:22cqi;font-weight:650;font-size:6.8cqi;line-height:1.02;letter-spacing:-.03em;text-wrap:balance;overflow-wrap:anywhere;white-space:normal;overflow:visible;text-overflow:clip;color:var(--yd2)} #yard .yd-cini{position:absolute;right:7.5cqi;top:6.5cqi;width:10cqi;height:10cqi;border-radius:50%;display:grid;place-items:center;background:var(--yd1);color:var(--ydt1);font-weight:700;font-size:4.4cqi;letter-spacing:-.03em;line-height:1} #yard .yd-card .yd-ccol{position:absolute;left:7.5cqi;bottom:7cqi;font-weight:500;font-size:3.8cqi;line-height:1.38;color:var(--k-1)} #yard .yd-card .yd-ccol+.yd-ccol{left:52cqi;right:7.5cqi;text-align:left} #yard .yd-card .yd-ccol span{color:var(--k-2)} /* THE STICKER: matte vinyl in the accent, die-cut with a paper border, a faint sheen and grain; it lands on the front card's corner */ #yard .yd-sticker{--r:-10deg;position:absolute;left:calc(var(--cx) + 41.6 * var(--yu));top:calc(var(--cy) + 10.6 * var(--yu));width:calc(9.6 * var(--yu));aspect-ratio:1;padding:0;z-index:3; border-radius:50%;color:var(--ydt4);display:grid;place-items:center;container-type:inline-size; background:linear-gradient(150deg,color-mix(in srgb,var(--l-0) 12%,transparent),transparent 55%), radial-gradient(closest-side,var(--yd4) 88.5%,color-mix(in srgb,var(--l-0) 96%,var(--yd3)) calc(88.5% + .6px)); box-shadow:inset calc(max(.5px,calc(.06 * var(--yu))) * var(--kx)) calc(max(.5px,calc(.06 * var(--yu))) * var(--ky)) 0 color-mix(in srgb,var(--l-0) 70%,transparent), calc(.04 * var(--yu) * sin(var(--r))) calc(.04 * var(--yu) * cos(var(--r))) calc(.08 * var(--yu)) color-mix(in srgb,var(--ys) 28%,transparent), calc(.12 * var(--yu) * var(--sx)) calc(.12 * var(--yu) * var(--sy)) calc(.6 * var(--yu)) color-mix(in srgb,var(--ys) 12%,transparent)} #yard .yd-sticker::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:color-mix(in srgb,var(--n-0) 7%,transparent);mix-blend-mode:multiply; -webkit-mask:var(--grain) 0 0/140px 140px repeat;mask:var(--grain) 0 0/140px 140px repeat} #yard .yd-sticker b{position:relative;font-weight:700;font-size:38cqi;letter-spacing:-.05em;line-height:1} @media (prefers-reduced-motion:no-preference){ #yard .yd-hero,#yard .yd-slogo,#yard .yd-stag,#yard .yd-sbtn,#yard .yd-tiles span,#yard .yd-tiles i,#yard .yd-card,#yard .yd-under,#yard .yd-cmark,#yard .yd-cini,#yard .yd-sticker,#yard .yd-isl{transition:background-color .6s cubic-bezier(.2,.7,.2,1) var(--yd-d,0ms),color .6s var(--yd-d,0ms)} #yard .yd-hero,#yard .yd-slogo,#yard .yd-stag,#yard .yd-sbtn{--yd-d:140ms} #yard .yd-card,#yard .yd-under,#yard .yd-cmark,#yard .yd-cini{--yd-d:210ms} #yard .yd-sticker{--yd-d:280ms} } /* wider than 1440 the table keeps its 560 px height, so the things keep their 1440 size; they still sit where the shirt is */ @media (min-width:1441px){ #yard .yd-scene{--yu:8.93px} } /* a narrow, tall desk table (about 1024 to 1130): room below the phone, so the cards come down a little and grow */ @media (min-width:1024px){ @container (max-width:700px){ #yard .yd-cards,#yard .yd-sticker{--cx:13%;--cy:calc(100% - 27.5 * var(--yu))} #yard .yd-cards{--cw:calc(27 * var(--yu));width:calc(53 * var(--yu));height:calc(21 * var(--yu))} #yard .yd-sticker{left:calc(var(--cx) + 45.9 * var(--yu));top:calc(var(--cy) + 11.7 * var(--yu));width:calc(10.6 * var(--yu))} } } @media (max-width:760px){ #yard .yd-scene{--cx:5%;--cy:calc(5% + 50 * var(--yu))} #yard .yd-phone{left:66%;width:calc(27 * var(--yu));top:5%} #yard .yd-phone::after{display:none} #yard .yd-cards{--cw:calc(31 * var(--yu));width:calc(60 * var(--yu));height:calc(23 * var(--yu))} #yard .yd-sticker{left:calc(var(--cx) + 52.4 * var(--yu));top:calc(var(--cy) + 12.8 * var(--yu));width:calc(12.5 * var(--yu))} }