@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url(fonts/archivo-1.woff2) format('woff2')} @font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url(fonts/manrope-1.woff2) format('woff2')} @font-face{font-family:'Permanent Marker';font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url(fonts/permanent-marker-1.woff2) format('woff2')} @font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url(fonts/geist-1.woff2) format('woff2')} @font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;src:url(fonts/geist-2.woff2) format('woff2')} @font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url(fonts/geist-mono-1.woff2) format('woff2')} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url(fonts/hanken-grotesk-1.woff2) format('woff2')} @font-face{font-family:'Syne';font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url(fonts/syne-1.woff2) format('woff2')} @font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url(fonts/outfit-1.woff2) format('woff2')} @font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url(fonts/familjen-grotesk-1.woff2) format('woff2')} @font-face{font-family:'Inter Tight';font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url(fonts/inter-tight-1.woff2) format('woff2')} @font-face{font-family:'Inter Tight';font-style:italic;font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url(fonts/inter-tight-2.woff2) format('woff2')} @font-face{font-family:'Inter Tight';font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;src:url(fonts/inter-tight-3.woff2) format('woff2')} /* Cyrillic (13 Oct: the site in Bulgarian): the faces the page is set in have no Cyrillic letters, so each family has a companion that does, used only for those letters and fetched only by a page that has them. Archivo's is Roboto Flex (a grotesque with a width axis, so it widens as Archivo does; one optical size, 18, to keep it at 35 kB), Permanent Marker's Caveat Bold (Z, 14 Oct: "go with Caveat for Bulgarian"); each is scaled to the Latin face's x-height and given its line metrics (ascent, descent and gap overrides, divided by the size-adjust, which multiplies them), so a Bulgarian word stands on the same line and takes the same height as an English one (Z, 14 Oct: the switch's "Български" sat lower than "English"), the example sites' Golos Text where their own have none */ /* a Cyrillic companion is declared with exactly its Latin face's weights (and stretch): Chrome takes a family's faces in sets of the same weights, and a companion with other weights is left out, so Bulgarian fell back to a serif (Syne, Familjen Grotesk: 15 Oct) */ @font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;size-adjust:102.4%;ascent-override:85.74%;descent-override:20.51%;line-gap-override:0%;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;src:url(fonts/roboto-flex-cyr.woff2) format('woff2')} @font-face{font-family:'Permanent Marker';font-style:normal;font-weight:400;font-display:swap;size-adjust:135%;ascent-override:82.18%;descent-override:23.48%;line-gap-override:2.24%;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;src:url(fonts/caveat-cyr.woff2) format('woff2')} /* Bulgarian's hand is Caveat throughout (Z, 16 Oct: "let's not mix Caveat and Permanent Marker ... even the comma appears to be not Caveat"): its punctuation and figures, and the Latin letters of a word like "WordPress", come from Caveat too, scaled and set on the line as the Cyrillic companion is. The punctuation is a file of its own (13 kB), so the Latin letters (38 kB) are fetched only by a page whose hand writes some */ @font-face{font-family:'Caveat NW';font-style:normal;font-weight:400;font-display:swap;size-adjust:135%;ascent-override:82.18%;descent-override:23.48%;line-gap-override:2.24%;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;src:url(fonts/caveat-cyr.woff2) format('woff2')} @font-face{font-family:'Caveat NW';font-style:normal;font-weight:400;font-display:swap;size-adjust:135%;ascent-override:82.18%;descent-override:23.48%;line-gap-override:2.24%;unicode-range:U+0020-0040, U+005B-0060, U+007B-007E, U+00A0-00BF, U+00D7, U+00F7, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212;src:url(fonts/caveat-punct.woff2) format('woff2')} @font-face{font-family:'Caveat NW';font-style:normal;font-weight:400;font-display:swap;size-adjust:135%;ascent-override:82.18%;descent-override:23.48%;line-gap-override:2.24%;unicode-range:U+0041-005A, U+0061-007A, U+00C0-00D6, U+00D8-00F6, U+00F8-00FF, U+0131, U+0152-0153, U+02C6, U+02DC;src:url(fonts/caveat-lat.woff2) format('woff2')} @font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;src:url(fonts/manrope-cyr.woff2) format('woff2')} @font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;src:url(fonts/geist-mono-cyr.woff2) format('woff2')} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;src:url(fonts/golos-cyr.woff2) format('woff2')} @font-face{font-family:'Syne';font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;src:url(fonts/golos-cyr.woff2) format('woff2')} @font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;src:url(fonts/golos-cyr.woff2) format('woff2')} @font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400 700;font-display:swap;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;src:url(fonts/golos-cyr.woff2) format('woff2')} @font-face{font-family:'Gabarito';font-style:normal;font-weight:400 900;font-display:swap;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;src:url(fonts/golos-cyr.woff2) format('woff2')} .im-bk-hero{background-image:url(img/cfba1d4d452f.webp)} .im-bk-loaf{background-image:url(img/2c403e85b026.webp)} .im-bk-crois{background-image:url(img/1c9467f5af08.webp)} .im-bk-cake{background-image:url(img/3d2821a4f659.webp)} .im-bk-buns{background-image:url(img/b6a54edf325f.webp)} .im-bk-shop{background-image:url(img/d53d482ebf2d.webp)} .im-bk-slice{background-image:url(img/b44632cfb023.webp)} .im-ph-1{background-image:url(img/735b9fd257ae.webp)} .im-ph-2{background-image:url(img/aa557ec98550.webp)} .im-ph-3{background-image:url(img/414409482021.webp)} .im-ar-1{background-image:url(img/fbeb40237046.webp)} .im-ar-2{background-image:url(img/aa192afc3823.webp)} .im-ar-3{background-image:url(img/a851451f4ac2.webp)} .im-ar-4{background-image:url(img/38c803c04cb7.webp)} .im-cf-1{background-image:url(img/748f359c975c.webp)} .im-cf-2{background-image:url(img/da75b4581cea.webp)} .im-cf-3{background-image:url(img/712b8de25052.webp)} .im-fl-1{background-image:url(img/cd456a09514c.webp)} .im-fl-2{background-image:url(img/2b77d7576f83.webp)} .im-fl-3{background-image:url(img/4c8798d1ed2d.webp)} .im-fl-4{background-image:url(img/285dd1bca155.webp)} .im-lw-1{background-image:url(img/f3994f63a3aa.webp)} .im-lw-2{background-image:url(img/2345f8d1c0bc.webp)} .im-rs-1{background-image:url(img/23e7b6029a10.webp)} .im-rs-2{background-image:url(img/d63b2d048c05.webp)} .im-rs-3{background-image:url(img/0089d49fb15c.webp)} /* * The parts below the first screen are laid out only as they come near (13 October: a phone painted nothing for * 2.3 seconds while it laid out the whole page, six full-size example sites among it). Each keeps the place of its * own height until then, measured at 390 and 1440 (and remembered by the browser once it has been drawn), so the * page's length and the menu's jumps to its parts hold. Only the landing page: every page loads these rules. */ body:not(.shell-page) #main > section:not(.hero){content-visibility:auto;contain-intrinsic-size:auto var(--cis,900px)} body:not(.shell-page) #how{--cis:760px}body:not(.shell-page) #yours{--cis:770px}body:not(.shell-page) #trades{--cis:1080px} body:not(.shell-page) #why{--cis:2550px}body:not(.shell-page) #fine{--cis:750px}body:not(.shell-page) #faq{--cis:880px}body:not(.shell-page) #end{--cis:820px} @media (max-width:700px){body:not(.shell-page) #how{--cis:1930px}body:not(.shell-page) #yours{--cis:1010px}body:not(.shell-page) #trades{--cis:2270px}body:not(.shell-page) #why{--cis:3870px}body:not(.shell-page) #fine{--cis:1130px}body:not(.shell-page) #faq{--cis:2250px}body:not(.shell-page) #end{--cis:980px}} /* an example site's photographs are fetched once it comes near (landing.js: near), the hero's once its glass shows them; "faces" is a site whose own faces are wanted before its photographs (the hero's, and a copy measured for its sketch) */ .lzy .ds:not(.near) .im{background-image:none!important} /* and its faces: until then it is set in the page's own, which is here already (ten faces, 330 KB, 13 October) */ .lzy .ds:not(.near):not(.faces),.lzy .ds:not(.near):not(.faces) *{font-family:var(--sans)!important} .ds{position:relative;width:1200px;height:750px;overflow:hidden;text-align:left;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} .ds *{box-sizing:border-box} .ds p,.ds h4,.ds h5,.ds b,.ds small{margin:0} .ds .im{background-size:cover;background-position:center;background-repeat:no-repeat} .ds svg{display:block} .ds .ico{width:18px;height:18px;stroke-width:2;flex:none} .ds-lr{--bg:#F6EEE2;--paper:#FFFBF5;--ink:#2E1C12;--ink2:#6E5646;--crust:#3A2419;--acc:#B5502A;--acc-ink:#FFF7EE;--butter:#EFC27A;--line:rgba(46,28,18,.12); background:var(--bg);color:var(--ink);font-family:'Geist',system-ui,sans-serif;transition:background-color .9s ease,color .9s ease} .ds-lr .lr-pat{position:absolute;inset:0;background-image:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%20viewBox%3D%220%200%20180%20180%22%3E%3Cg%20transform%3D%22translate%2834%2044%29%20rotate%28-24%29%20scale%281.05%29%22%20fill%3D%22%233A2419%22%20fill-opacity%3D%220.07%22%3E%3Cellipse%20cx%3D%220%22%20cy%3D%22-15%22%20rx%3D%222.5%22%20ry%3D%224.4%22%2F%3E%3Cellipse%20cx%3D%22-3.6%22%20cy%3D%22-9%22%20rx%3D%222.4%22%20ry%3D%224.4%22%20transform%3D%22rotate%28-32%20-3.6%20-9%29%22%2F%3E%3Cellipse%20cx%3D%223.6%22%20cy%3D%22-9%22%20rx%3D%222.4%22%20ry%3D%224.4%22%20transform%3D%22rotate%2832%203.6%20-9%29%22%2F%3E%3Cellipse%20cx%3D%22-3.6%22%20cy%3D%22-3%22%20rx%3D%222.4%22%20ry%3D%224.4%22%20transform%3D%22rotate%28-32%20-3.6%20-3%29%22%2F%3E%3Cellipse%20cx%3D%223.6%22%20cy%3D%22-3%22%20rx%3D%222.4%22%20ry%3D%224.4%22%20transform%3D%22rotate%2832%203.6%20-3%29%22%2F%3E%3Cellipse%20cx%3D%22-3.6%22%20cy%3D%223%22%20rx%3D%222.4%22%20ry%3D%224.4%22%20transform%3D%22rotate%28-32%20-3.6%203%29%22%2F%3E%3Cellipse%20cx%3D%223.6%22%20cy%3D%223%22%20rx%3D%222.4%22%20ry%3D%224.4%22%20transform%3D%22rotate%2832%203.6%203%29%22%2F%3E%3Cpath%20d%3D%22M0%20-11%20V16%22%20stroke%3D%22%233A2419%22%20stroke-opacity%3D%220.07%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28128%20120%29%20rotate%2828%29%20scale%280.9%29%22%20fill%3D%22%233A2419%22%20fill-opacity%3D%220.06%22%3E%3Cellipse%20cx%3D%220%22%20cy%3D%22-15%22%20rx%3D%222.5%22%20ry%3D%224.4%22%2F%3E%3Cellipse%20cx%3D%22-3.6%22%20cy%3D%22-9%22%20rx%3D%222.4%22%20ry%3D%224.4%22%20transform%3D%22rotate%28-32%20-3.6%20-9%29%22%2F%3E%3Cellipse%20cx%3D%223.6%22%20cy%3D%22-9%22%20rx%3D%222.4%22%20ry%3D%224.4%22%20transform%3D%22rotate%2832%203.6%20-9%29%22%2F%3E%3Cellipse%20cx%3D%22-3.6%22%20cy%3D%22-3%22%20rx%3D%222.4%22%20ry%3D%224.4%22%20transform%3D%22rotate%28-32%20-3.6%20-3%29%22%2F%3E%3Cellipse%20cx%3D%223.6%22%20cy%3D%22-3%22%20rx%3D%222.4%22%20ry%3D%224.4%22%20transform%3D%22rotate%2832%203.6%20-3%29%22%2F%3E%3Cellipse%20cx%3D%22-3.6%22%20cy%3D%223%22%20rx%3D%222.4%22%20ry%3D%224.4%22%20transform%3D%22rotate%28-32%20-3.6%203%29%22%2F%3E%3Cellipse%20cx%3D%223.6%22%20cy%3D%223%22%20rx%3D%222.4%22%20ry%3D%224.4%22%20transform%3D%22rotate%2832%203.6%203%29%22%2F%3E%3Cpath%20d%3D%22M0%20-11%20V16%22%20stroke%3D%22%233A2419%22%20stroke-opacity%3D%220.06%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28146%2030%29%20rotate%2870%29%20scale%280.7%29%22%20fill%3D%22%233A2419%22%20fill-opacity%3D%220.05%22%3E%3Cellipse%20cx%3D%220%22%20cy%3D%22-15%22%20rx%3D%222.5%22%20ry%3D%224.4%22%2F%3E%3Cellipse%20cx%3D%22-3.6%22%20cy%3D%22-9%22%20rx%3D%222.4%22%20ry%3D%224.4%22%20transform%3D%22rotate%28-32%20-3.6%20-9%29%22%2F%3E%3Cellipse%20cx%3D%223.6%22%20cy%3D%22-9%22%20rx%3D%222.4%22%20ry%3D%224.4%22%20transform%3D%22rotate%2832%203.6%20-9%29%22%2F%3E%3Cellipse%20cx%3D%22-3.6%22%20cy%3D%22-3%22%20rx%3D%222.4%22%20ry%3D%224.4%22%20transform%3D%22rotate%28-32%20-3.6%20-3%29%22%2F%3E%3Cellipse%20cx%3D%223.6%22%20cy%3D%22-3%22%20rx%3D%222.4%22%20ry%3D%224.4%22%20transform%3D%22rotate%2832%203.6%20-3%29%22%2F%3E%3Cellipse%20cx%3D%22-3.6%22%20cy%3D%223%22%20rx%3D%222.4%22%20ry%3D%224.4%22%20transform%3D%22rotate%28-32%20-3.6%203%29%22%2F%3E%3Cellipse%20cx%3D%223.6%22%20cy%3D%223%22%20rx%3D%222.4%22%20ry%3D%224.4%22%20transform%3D%22rotate%2832%203.6%203%29%22%2F%3E%3Cpath%20d%3D%22M0%20-11%20V16%22%20stroke%3D%22%233A2419%22%20stroke-opacity%3D%220.05%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2220%22%20r%3D%221.3%22%20fill%3D%22%233A2419%22%20fill-opacity%3D%22.08%22%2F%3E%3Ccircle%20cx%3D%2296%22%20cy%3D%2288%22%20r%3D%221.3%22%20fill%3D%22%233A2419%22%20fill-opacity%3D%22.08%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%22132%22%20r%3D%221.3%22%20fill%3D%22%233A2419%22%20fill-opacity%3D%22.08%22%2F%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%22160%22%20r%3D%221.3%22%20fill%3D%22%233A2419%22%20fill-opacity%3D%22.08%22%2F%3E%3Ccircle%20cx%3D%22170%22%20cy%3D%2280%22%20r%3D%221.3%22%20fill%3D%22%233A2419%22%20fill-opacity%3D%22.08%22%2F%3E%3Ccircle%20cx%3D%2258%22%20cy%3D%22100%22%20r%3D%221.3%22%20fill%3D%22%233A2419%22%20fill-opacity%3D%22.08%22%2F%3E%3Ccircle%20cx%3D%22112%22%20cy%3D%2260%22%20r%3D%221.3%22%20fill%3D%22%233A2419%22%20fill-opacity%3D%22.08%22%2F%3E%3C%2Fsvg%3E);background-size:180px 180px;pointer-events:none} .ds-lr .lr-glow{position:absolute;right:-80px;top:40px;width:720px;height:620px;border-radius:50%;background:radial-gradient(closest-side,rgba(239,194,122,.5),rgba(239,194,122,0) 72%);pointer-events:none;transition:background .9s} .lr-top{position:relative;height:34px;background:var(--crust);color:#F6E7D2;display:flex;align-items:center;justify-content:center;gap:10px;font:500 12.5px/1 'Geist';letter-spacing:.01em;transition:background-color .9s} .lr-top svg{width:13px;height:18px;color:var(--butter)} .lr-hd{position:relative;height:86px;display:flex;align-items:center;gap:34px;padding:0 48px;border-bottom:1px solid var(--line)} .lr-logo{display:flex;align-items:center;gap:12px;margin-right:auto;color:var(--ink)} .lr-mark{width:48px;height:48px;display:block;flex:none} .lr-mark circle{fill:var(--acc);transition:fill .9s} .lr-wm b{display:block;font:800 24px/1 'Manrope';letter-spacing:-.035em} .lr-wm small{display:block;margin-top:6px;font:600 9.5px/1 'Geist';letter-spacing:.24em;text-transform:uppercase;color:var(--ink2)} .lr-nav{display:flex;gap:30px;font:500 15.5px 'Geist'} .lr-bag{width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line);display:grid;place-items:center;position:relative} .lr-bag i{position:absolute;right:-3px;top:-3px;width:18px;height:18px;border-radius:50%;background:var(--acc);color:var(--acc-ink);font:700 10.5px/18px 'Geist';text-align:center;font-style:normal;transition:background-color .9s} .lr-btn{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 21px;border-radius:99px;background:var(--acc);color:var(--acc-ink);font:600 15px 'Geist';white-space:nowrap;transition:background-color .9s} .lr-btn .ico{width:17px;height:17px} .lr-btn.lg{height:54px;padding:0 26px;font-size:16px} .lr-btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(46,28,18,.32)} .lr-hero{position:relative;display:grid;grid-template-columns:500px 1fr;gap:46px;padding:28px 48px 0;height:430px} .lr-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-bottom:30px} .lr-open{display:inline-flex;align-items:center;gap:11px;font:600 12.5px/1 'Geist';letter-spacing:.17em;text-transform:uppercase;color:var(--ink2)} .lr-open svg{width:30px;height:18px;flex:none;color:var(--acc);transition:color .9s} .lr-open b{font-weight:700;color:var(--acc);transition:color .9s} .lr-open i{width:18px;height:1.5px;background:currentColor;opacity:.45} .lr-h{margin:22px 0 18px;font:800 72px/.97 'Manrope';letter-spacing:-.05em;min-height:2em} .lr-h em{font-style:normal;color:var(--acc);transition:color .9s} .lr-l{font-size:17.5px;line-height:1.55;color:var(--ink2);max-width:430px} .lr-bs{display:flex;gap:12px;margin-top:26px} .lr-art{position:relative} .lr-photo{position:absolute;left:0;right:0;top:0;height:372px;border-radius:190px 30px 30px 30px;background-position:58% 40%;box-shadow:0 40px 70px -40px rgba(58,36,25,.65);transition:opacity .6s} .lr-photo.alt{position:absolute;opacity:0;box-shadow:none} .lr-stamp{position:absolute;left:-46px;bottom:12px;width:128px;height:128px;animation:lrspin 26s linear infinite} .lr-stamp svg{width:100%;height:100%} @keyframes lrspin{to{transform:rotate(360deg)}} .lr-week{position:absolute;right:-14px;top:34px;display:flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;border-radius:18px;background:var(--paper);box-shadow:0 20px 40px -20px rgba(58,36,25,.5);transform:rotate(2deg)} .lr-week .im{width:52px;height:52px;border-radius:12px} .lr-week small{display:block;font:700 10.5px 'Geist';letter-spacing:.14em;text-transform:uppercase;color:var(--acc)} .lr-week b{display:block;margin-top:3px;font:800 16px/1.1 'Manrope';letter-spacing:-.01em} .lr-row{position:absolute;left:48px;right:48px;top:546px;height:172px;display:grid;grid-template-columns:1.08fr 1.12fr .86fr;gap:20px} .lr-card{position:relative;border-radius:22px} .lr-c1{background:var(--paper);box-shadow:0 0 0 1px var(--line);display:flex;gap:18px;padding:14px 18px 14px 14px} .lr-c1 .im{width:138px;height:144px;border-radius:14px;flex:none;background-position:center 40%} .lr-c1 small,.lr-c2 small,.lr-c3 small{display:block;font:700 10.5px 'Geist';letter-spacing:.16em;text-transform:uppercase;color:var(--acc)} .lr-c1 .tx{padding-top:8px} .lr-c1 b,.lr-c2 b{display:block;margin:9px 0 7px;font:800 24px/1 'Manrope';letter-spacing:-.025em} .lr-c1 b{font-size:22px} .lr-c1 p{font-size:14px;line-height:1.45;color:var(--ink2)} .lr-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font:600 14px 'Geist';padding-bottom:2px;border-bottom:1.5px solid currentColor} .lr-link .ico{width:15px;height:15px} .lr-warm{position:absolute;left:92px;top:-18px;width:64px;height:64px;border-radius:50%;background:var(--butter);color:var(--crust);display:grid;place-items:center;text-align:center;font:800 12.5px/1 'Manrope';transform:rotate(-14deg);box-shadow:0 10px 18px -10px rgba(0,0,0,.45)} .lr-c2{background:var(--crust);color:#F6E7D2;display:flex;overflow:hidden;transition:background-color .9s} .lr-c2 .tx{flex:1;padding:22px 0 20px 22px;display:flex;flex-direction:column;align-items:flex-start} .lr-c2 small{color:var(--butter)} .lr-c2 p{font-size:14px;line-height:1.45;color:rgba(246,231,210,.72);margin-bottom:auto} .lr-pill{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:99px;background:var(--butter);color:var(--crust);font:700 13px 'Geist'} .lr-pill .ico{width:15px;height:15px} .lr-arch{width:126px;margin:16px 16px 0 0;border-radius:63px 63px 0 0;background-position:center 30%;flex:none} .lr-c3{background:var(--butter);color:var(--crust);padding:20px 22px;transition:background-color .9s} .lr-c3 small{color:var(--crust);opacity:.7} .lr-c3 b{display:block;margin-top:10px;font:800 22px/1 'Manrope';letter-spacing:-.02em} .lr-time{margin-top:6px;font:800 40px/1 'Manrope';letter-spacing:-.04em;font-variant-numeric:tabular-nums} .lr-time em{font-style:normal;font-size:18px;letter-spacing:0;opacity:.7;margin:0 4px} .lr-c3 p{display:flex;align-items:center;gap:6px;margin-top:12px;font:600 13px 'Geist'} .lr-c3 p .ico{width:15px;height:15px} .lr-sign{position:absolute;right:22px;top:-22px;width:86px;height:70px} .lr-sign::before,.lr-sign::after{content:"";position:absolute;top:6px;width:1.5px;height:30px;background:var(--crust);opacity:.55} .lr-sign::before{left:28px;transform:rotate(28deg);transform-origin:top} .lr-sign::after{right:28px;transform:rotate(-28deg);transform-origin:top} .lr-sign i{position:absolute;left:39px;top:2px;width:8px;height:8px;border-radius:50%;background:var(--crust)} .lr-sign span{position:absolute;left:6px;top:30px;width:74px;height:34px;border-radius:7px;background:var(--crust);color:var(--butter);display:grid;place-items:center;font:800 14px/1 'Manrope';letter-spacing:.14em;transform:rotate(-5deg)} /* the look the assistant gives when asked for a dark one (made for the promo film, 4 October; on the home page only) */ .ds-lr.dark{--bg:#1D1410;--paper:#2A1D17;--ink:#F7ECDD;--ink2:#C7B3A1;--crust:#0F0A08;--acc:#E0703C;--acc-ink:#1D1410;--butter:#F0C27B;--line:rgba(247,236,221,.16)} .ds-lr.dark .lr-btn.ghost{box-shadow:inset 0 0 0 1.5px rgba(247,236,221,.4)} .ds-lr.dark .lr-glow{background:radial-gradient(closest-side,rgba(224,112,60,.28),rgba(224,112,60,0) 72%)} .ds-lr.dark .lr-pat{opacity:0} .ds-lr.dark .lr-c1{box-shadow:0 0 0 1px rgba(247,236,221,.12)} .ds-lr.dark .lr-c2{background:#3A261C} .ds-lr.dark .lr-top{background:#E0703C;color:#1D1410} .ds-lr.dark .lr-top svg{color:#1D1410} .ds-lr.dark .sp-card,.ds-lr.dark .sp-menu,.ds-lr.dark .sp-form{box-shadow:0 0 0 1px rgba(247,236,221,.12)} .ds-lr.dark .sp-sum{background:#3A261C} .ds-lr.dark .sp-map{background:#2A1D17} .ds-lr.dark .sp-map .st{background:rgba(247,236,221,.13)} .ds-lr.dark .sp-map .blk{background:rgba(247,236,221,.045)} .ds-lr.dark .sp-map .park{background:rgba(120,150,96,.28)} .ds-lr.dark .sp-in{background:#1D1410;box-shadow:inset 0 0 0 1.5px rgba(247,236,221,.2)} .ds-lr.dark .sp-chip{box-shadow:inset 0 0 0 1.5px rgba(247,236,221,.26)} .ds-lr.dark .lr-stamp{filter:invert(1) hue-rotate(180deg)} /* the bakery's five other pages, in the home page's own system (designed for the film; shown small in "Your other pages, too") */ .ds-lr .lr-nav span.on{position:relative;font-weight:700} .ds-lr .lr-nav span.on::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:3px;border-radius:3px;background:var(--acc)} .sp{position:absolute;left:48px;right:48px;top:120px;bottom:0} .sp-kick{display:block;font:700 11.5px/1 'Geist';letter-spacing:.17em;text-transform:uppercase;color:var(--acc)} .sp-h{margin:12px 0 0;font:800 56px/1 'Manrope';letter-spacing:-.045em;color:var(--ink)} .sp-h em{font-style:normal;color:var(--acc)} .sp-l{margin-top:14px;font-size:17px;line-height:1.55;color:var(--ink2);max-width:420px} .sp-chips{display:flex;gap:9px} .sp-chip{height:38px;padding:0 17px;border-radius:99px;display:inline-flex;align-items:center;font:600 14.5px 'Geist';color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(46,28,18,.22)} .sp-chip.on{background:var(--ink);color:var(--bg);box-shadow:none} .sp-card{background:var(--paper);border-radius:22px;box-shadow:0 0 0 1px var(--line)} /* bread: a shelf of four */ .sp-bread .bhd{display:flex;align-items:flex-end;justify-content:space-between;padding-top:34px} .sp-bread .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:30px} .sp-bread .sp-card{padding:12px 12px 18px;position:relative} .sp-bread .sp-card .im{height:292px;border-radius:14px} .sp-bread .sp-card b{display:block;margin:16px 6px 0;font:800 21px/1.05 'Manrope';letter-spacing:-.025em} .sp-bread .sp-card p{margin:7px 6px 0;font-size:14px;line-height:1.45;color:var(--ink2)} .sp-bread .row{display:flex;align-items:center;justify-content:space-between;margin:14px 6px 0} .sp-bread .pr{font:800 20px/1 'Manrope';letter-spacing:-.02em} .sp-bread .add{width:38px;height:38px;border-radius:50%;background:var(--acc);color:var(--acc-ink);display:grid;place-items:center;font:600 24px/1 'Geist'} .sp-bread .tag{position:absolute;left:22px;top:22px;height:28px;padding:0 12px;border-radius:99px;background:var(--butter);color:#3A2419;font:700 12px/28px 'Geist'} /* cakes: words left, a mosaic right */ .sp-cakes{display:grid;grid-template-columns:400px 1fr;gap:54px} .sp-cakes .tx{padding-top:54px} .sp-cakes ol{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px} .sp-cakes li{display:flex;align-items:center;gap:14px;font:600 17px 'Geist';color:var(--ink)} .sp-cakes li i{width:36px;height:36px;border-radius:50%;background:var(--butter);color:#3A2419;display:grid;place-items:center;font:800 16px/1 'Manrope';font-style:normal;flex:none} .sp-cakes li small{display:block;font:500 14px 'Geist';color:var(--ink2);margin-top:2px} .sp-cakes .lr-btn{margin-top:28px} .sp-cakes .mos{position:relative;margin-top:34px;height:560px} .sp-cakes .mos .im{position:absolute;border-radius:24px} .sp-cakes .m1{left:0;top:0;width:300px;height:560px;border-radius:150px 150px 24px 24px !important;background-position:center 30%} .sp-cakes .m2{left:320px;top:0;width:330px;height:250px} .sp-cakes .m3{left:320px;top:270px;width:155px;height:290px;background-position:30% center} .sp-cakes .m4{left:495px;top:270px;width:155px;height:290px;background-position:70% center} .sp-cakes .cap{position:absolute;left:24px;bottom:54px;padding:12px 18px;border-radius:16px;background:var(--paper);box-shadow:0 20px 40px -20px rgba(58,36,25,.5);transform:rotate(-2deg)} .sp-cakes .cap small{display:block;font:700 10.5px 'Geist';letter-spacing:.14em;text-transform:uppercase;color:var(--acc)} .sp-cakes .cap b{display:block;margin-top:3px;font:800 16px/1.1 'Manrope';color:var(--ink)} /* cafe: a photo left, the menu right */ .sp-cafe{display:grid;grid-template-columns:470px 1fr;gap:40px} .sp-cafe .ph{position:relative;margin-top:34px;height:560px;border-radius:30px 30px 190px 30px} .sp-cafe .open{position:absolute;left:22px;top:22px;display:flex;align-items:center;gap:9px;height:40px;padding:0 16px;border-radius:99px;background:var(--paper);color:var(--ink);font:600 14px 'Geist'} .sp-cafe .open i{width:9px;height:9px;border-radius:50%;background:#3E9B61} .sp-cafe .tx{padding-top:40px} .sp-menu{margin-top:22px;padding:24px 28px 26px;display:grid;grid-template-columns:1fr 1fr;gap:0 40px} .sp-menu h5{font:800 20px/1 'Manrope';letter-spacing:-.02em;color:var(--ink);margin-bottom:14px !important} .sp-menu .it{display:flex;align-items:baseline;gap:8px;padding:9px 0;font:500 15.5px 'Geist';color:var(--ink)} .sp-menu .it u{flex:1;border-bottom:2px dotted var(--line);transform:translateY(-4px);text-decoration:none} .sp-menu .it b{font:800 15.5px 'Manrope'} .sp-menu .it small{font:500 12.5px 'Geist';color:var(--ink2)} .sp-cafe .q{margin-top:18px;display:flex;align-items:center;gap:14px;font:500 15.5px/1.45 'Geist';color:var(--ink2)} .sp-cafe .q .im{width:52px;height:52px;border-radius:50%;flex:none} .sp-cafe .q b{color:var(--ink);font-weight:700} /* visit us: a map and the hours */ .sp-visit{display:grid;grid-template-columns:1fr 372px;gap:28px} .sp-map{position:relative;margin-top:34px;height:560px;border-radius:30px;background:#EADFCF;overflow:hidden} .sp-map .blk{position:absolute;background:rgba(46,28,18,.05);border-radius:8px} .sp-map .park{position:absolute;background:rgba(127,160,96,.34);border-radius:40px} .sp-map .st{position:absolute;background:#FFFBF5;border-radius:9px} .sp-map .nm{position:absolute;font:600 11.5px 'Geist';letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)} .sp-map .pin{position:absolute;left:372px;top:196px;width:64px;height:84px} .sp-map .lbl{position:absolute;left:446px;top:204px;padding:12px 18px;border-radius:16px;background:var(--paper);box-shadow:0 20px 40px -18px rgba(58,36,25,.55)} .sp-map .lbl b{display:block;font:800 17px/1.1 'Manrope';color:var(--ink)} .sp-map .lbl small{display:block;margin-top:4px;font:500 13px 'Geist';color:var(--ink2)} .sp-visit .tx{padding-top:40px} .sp-visit .sp-h{font-size:50px} .sp-hrs{margin-top:22px;padding:8px 22px} .sp-hrs div{display:flex;justify-content:space-between;padding:13px 0;font:500 15.5px 'Geist';color:var(--ink);border-bottom:1px solid var(--line)} .sp-hrs div:last-child{border:0} .sp-hrs div b{font:800 15.5px 'Manrope';font-variant-numeric:tabular-nums} .sp-hrs div.now{color:var(--acc)} .sp-visit .sp-sum{margin-top:16px;padding:18px 22px;border-radius:22px;background:var(--butter);color:#3A2419;display:flex;align-items:center;justify-content:space-between} .sp-visit .sp-sum b{font:800 19px/1.1 'Manrope'} .sp-visit .sp-sum small{display:block;margin-top:4px;font:600 13px 'Geist';opacity:.75} .sp-visit .go{width:46px;height:46px;border-radius:50%;background:#3A2419;color:#F0C27B;display:grid;place-items:center;font:600 22px/1 'Geist'} /* order a cake: a form and what it adds up to */ .sp-order{display:grid;grid-template-columns:1fr 380px;gap:28px} .sp-order .tx{padding-top:34px} .sp-steps{display:flex;align-items:center;gap:12px;margin-top:20px;font:600 14.5px 'Geist';color:var(--ink2)} .sp-steps span{display:flex;align-items:center;gap:9px} .sp-steps i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:800 14px/1 'Manrope';font-style:normal;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink2)} .sp-steps .on{color:var(--ink)} .sp-steps .on i{background:var(--acc);color:var(--acc-ink);box-shadow:none} .sp-steps u{width:44px;height:2px;background:var(--line)} .sp-form{margin-top:22px;padding:24px 26px 26px;display:grid;grid-template-columns:1fr 1fr;gap:18px 20px} .sp-form label{display:block;font:700 11px/1 'Geist';letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-bottom:9px} .sp-in{height:50px;border-radius:14px;background:var(--bg);box-shadow:inset 0 0 0 1.5px rgba(46,28,18,.16);display:flex;align-items:center;padding:0 16px;font:500 16px 'Geist';color:var(--ink)} .sp-in.foc{box-shadow:inset 0 0 0 2px var(--acc)} .sp-form .wide{grid-column:1/3} .sp-form .sp-chips .sp-chip{height:44px} .sp-order .sp-sum{margin-top:34px;height:560px;border-radius:30px;background:var(--crust);color:#F6E7D2;padding:26px;position:relative;overflow:hidden} .sp-order .sp-sum small{display:block;font:700 11px 'Geist';letter-spacing:.16em;text-transform:uppercase;color:var(--butter)} .sp-order .sp-sum b{display:block;margin-top:10px;font:800 28px/1.05 'Manrope';letter-spacing:-.03em} .sp-order .sp-sum p{margin-top:10px;font-size:15px;line-height:1.5;color:rgba(246,231,210,.75)} .sp-order .sp-sum .im{position:absolute;left:50%;bottom:92px;width:210px;height:250px;margin-left:-105px;border-radius:105px 105px 0 0;background-position:center 30%} .sp-order .sp-sum .lr-btn{position:absolute;left:26px;right:26px;bottom:26px;justify-content:center;height:54px;font-size:16px;background:var(--butter);color:#3A2419} .ds-fp{--bg:#EDF4F1;--ink:#0F2A27;--ink2:#4B635F;--teal:#1F6F66;--mint:#D3ECE4;--sun:#F6C56B;--line:rgba(15,42,39,.1);background:var(--bg);color:var(--ink);font-family:'Hanken Grotesk',system-ui,sans-serif} .fp-top{position:relative;z-index:2;height:34px;background:var(--ink);color:#CDE6DF;display:flex;justify-content:space-between;align-items:center;padding:0 48px;font:500 12.5px 'Hanken Grotesk'} .fp-top span{display:flex;align-items:center;gap:8px}.fp-top .ico{width:14px;height:14px} .fp-hd{position:relative;z-index:2;height:80px;display:flex;align-items:center;gap:32px;padding:0 48px} .fp-logo{display:flex;align-items:center;gap:11px;margin-right:auto;font:800 24px/1 'Hanken Grotesk';letter-spacing:-.03em} .fp-logo em{font-style:normal;font-weight:400;color:var(--teal)} .fp-mark{width:40px;height:40px;flex:none} .fp-nav{display:flex;gap:28px;font:500 15.5px 'Hanken Grotesk';color:var(--ink2)} .fp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:99px;background:var(--teal);color:#fff;font:700 15px 'Hanken Grotesk'} .fp-btn.lg{height:54px;padding:0 26px;font-size:16px} .fp-btn.o{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)} .fp-btn .ico{width:17px;height:17px;stroke-width:2.4} /* a soft shape behind the photo, like water */ .fp-wave{position:absolute;left:470px;top:60px;width:820px;height:560px;border-radius:46% 54% 38% 62%/52% 40% 60% 48%;background:radial-gradient(closest-side at 46% 46%,#D3ECE4,rgba(211,236,228,0) 100%),#DCEFE9;opacity:.9;transform:rotate(-8deg)} .fp-copy{position:absolute;left:48px;top:150px;width:520px} .fp-k{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 15px 0 12px;border-radius:99px;background:#fff;box-shadow:0 0 0 1px var(--line);font:700 13px 'Hanken Grotesk';letter-spacing:.01em} .fp-k i{width:9px;height:9px;border-radius:50%;background:#2FB380;box-shadow:0 0 0 4px rgba(47,179,128,.2)} .fp-h{margin-top:20px!important;font:800 64px/.96 'Hanken Grotesk';letter-spacing:-.045em} .fp-h em{font-style:normal;color:var(--teal);background:linear-gradient(transparent 76%,var(--sun) 76%,var(--sun) 92%,transparent 92%)} .fp-l{margin-top:20px!important;font-size:17.5px;line-height:1.5;color:var(--ink2);max-width:410px} .fp-bs{display:flex;gap:12px;margin-top:26px} .fp-rate{display:flex;align-items:center;gap:8px;margin-top:22px;font:500 14.5px 'Hanken Grotesk';color:var(--ink2)} .fp-rate b{color:var(--ink);font-weight:800} .fp-rate .stars{display:inline-flex;gap:2px;color:#E9A93C}.fp-rate .stars svg{width:16px;height:16px} .fp-hero{position:absolute;left:612px;top:132px;width:540px;height:404px;border-radius:210px 30px 30px 30px;background-position:42% 28%;box-shadow:0 40px 70px -44px rgba(15,42,39,.6)} .fp-round{position:absolute;left:556px;top:392px;width:156px;height:156px;border-radius:50%;background-position:30% 30%;box-shadow:0 0 0 8px var(--bg),0 24px 40px -18px rgba(15,42,39,.5)} .fp-stk{position:absolute;left:1078px;top:114px;width:112px;height:112px;border-radius:50%;background:var(--teal);color:#EAF7F2;display:grid;place-items:center;text-align:center;font:800 15.5px/1.08 'Hanken Grotesk';letter-spacing:-.01em;transform:rotate(10deg);box-shadow:0 16px 28px -14px rgba(15,42,39,.6)} .fp-book{position:absolute;right:28px;top:366px;width:326px;padding:18px 18px 16px;border-radius:20px;background:#fff;box-shadow:0 34px 60px -30px rgba(15,42,39,.55),0 0 0 1px var(--line)} .fp-book h5{display:flex;align-items:center;gap:8px;font:800 17px 'Hanken Grotesk';letter-spacing:-.01em} .fp-book h5 .ico{color:var(--teal)} .fp-book p{margin-top:4px;font-size:13.5px;color:var(--ink2)} .fp-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0} .fp-slot{height:54px;border-radius:12px;background:var(--mint);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:800 15px 'Hanken Grotesk'} .fp-slot small{font:600 11.5px 'Hanken Grotesk';color:var(--ink2)} .fp-slot.on{background:var(--teal);color:#fff}.fp-slot.on small{color:#CDE6DF} .fp-book .fp-btn{width:100%;height:44px} .fp-row{position:absolute;left:48px;right:48px;top:592px;display:grid;grid-template-columns:1.05fr 1.2fr 1fr;gap:18px} .fp-card{position:relative;height:130px;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line)} .fp-card small{display:block;font:700 11.5px 'Hanken Grotesk';letter-spacing:.09em;text-transform:uppercase;color:var(--teal)} .fp-card.ph .im{position:absolute;inset:0;background-position:50% 40%} .fp-card.ph .cap{position:absolute;left:12px;bottom:12px;padding:10px 14px;border-radius:13px;background:rgba(255,255,255,.95)} .fp-card.ph .cap b{display:block;font:800 16px 'Hanken Grotesk';letter-spacing:-.01em} .fp-card.ph .cap p{font-size:13px;color:var(--ink2)} .fp-card.plan{padding:16px 20px 0 20px;display:grid;grid-template-columns:1fr 1fr;column-gap:16px;align-content:start} .fp-card.plan small{grid-column:1/-1} .fp-card.plan b{grid-column:1;grid-row:2/5;margin-top:8px;font:800 21px/1.08 'Hanken Grotesk';letter-spacing:-.025em} .fp-card.plan .li{grid-column:2;display:flex;align-items:center;gap:8px;margin-top:8px;font:600 13px 'Hanken Grotesk'} .fp-card.plan .li:nth-of-type(1){margin-top:6px} .fp-card.plan .li i{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;box-shadow:inset 0 0 0 2px var(--mint)} .fp-card.plan .li i.ok{background:var(--teal);color:#fff;box-shadow:none} .fp-card.plan .li i .ico{width:12px;height:12px;stroke-width:3.2} .fp-card.plan .li.todo{color:var(--ink2)} .fp-card.visit{padding:16px 20px;background:var(--ink);color:#EAF7F2;box-shadow:none} .fp-card.visit small{color:#8FD1C0} .fp-card.visit b{display:block;margin:7px 0 9px;font:800 20px/1.1 'Hanken Grotesk';letter-spacing:-.02em} .fp-card.visit p{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:13.5px;color:#CDE6DF} .fp-card.visit p .ico{width:15px;height:15px;color:#8FD1C0} .ds-st{--bg:#EEEBE5;--ink:#151515;--ink2:#5E5A53;--brick:#A64A2E;--line:rgba(21,21,21,.16);background:var(--bg);color:var(--ink);font-family:'Geist',system-ui,sans-serif} .st-hd{height:88px;display:flex;align-items:center;gap:30px;padding:0 48px;border-bottom:1px solid var(--line)} .st-logo{display:flex;align-items:center;gap:14px;font:700 19px/1 'Syne';letter-spacing:.22em} .st-mark{width:30px;height:26px;flex:none} .st-mid{margin:0 auto 0 26px;font:500 13px 'Geist';color:var(--ink2);letter-spacing:.04em} .st-nav{display:flex;gap:28px;font:500 14.5px 'Geist'} .st-talk{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:99px;background:var(--ink);color:var(--bg);font:600 14px 'Geist'} .st-talk .ico{width:15px;height:15px;stroke-width:2.4} .st-h{position:absolute;left:48px;top:126px;width:800px;font:700 98px/.88 'Syne';letter-spacing:-.05em} .st-h em{font-style:normal;color:var(--brick)} .st-side{position:absolute;right:48px;top:136px;width:262px} .st-side p{font-size:15.5px;line-height:1.55;color:var(--ink2)} .st-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding-bottom:4px;border-bottom:1.5px solid var(--ink);font:600 14.5px 'Geist'} .st-link .ico{width:16px;height:16px} .st-count{position:absolute;right:48px;top:312px;display:flex;align-items:center;gap:12px;font:500 12px 'Geist';letter-spacing:.16em;color:var(--ink2)} .st-count i{width:60px;height:1px;background:var(--ink2)} .st-imgs .im{position:absolute} .st-imgs .im.a{left:48px;top:338px;width:610px;height:364px;border-radius:0 120px 0 0;background-position:center 46%} .st-imgs .im.b{left:680px;top:338px;width:226px;height:330px} .st-imgs .im.c{left:926px;top:338px;width:226px;height:330px;border-radius:0 0 0 0} .st-proj{position:absolute;left:72px;top:590px;width:330px;padding:16px 58px 16px 20px;background:var(--bg);box-shadow:0 26px 44px -22px rgba(21,21,21,.6)} .st-proj small{display:block;font:500 11.5px 'Geist';letter-spacing:.14em;text-transform:uppercase;color:var(--brick)} .st-proj b{display:block;margin:6px 0 4px;font:700 23px/1 'Syne';letter-spacing:-.03em} .st-proj p{font-size:13.5px;color:var(--ink2)} .st-proj .go{position:absolute;right:16px;top:50%;width:36px;height:36px;margin-top:-18px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center} .st-proj .go .ico{width:16px;height:16px;stroke-width:2.4} .st-seal{position:absolute;left:596px;top:278px;width:120px;height:120px;border-radius:50%;background:var(--brick);color:#F7EDE6;transform:rotate(-8deg);box-shadow:0 18px 30px -16px rgba(21,21,21,.6)} .st-seal .st-rt{position:absolute;inset:0;width:100%;height:100%} .st-seal .st-rt text{font:600 9px 'Geist';fill:currentColor} .st-seal i{position:absolute;inset:0;display:grid;place-items:center} .st-seal i .st-mark{width:34px;height:30px;filter:brightness(0) invert(1)} .st-aw{position:absolute;right:48px;top:262px;width:262px;display:flex;align-items:center;gap:12px;font:500 12.5px/1.35 'Geist';color:var(--ink2)} .st-aw .ico{width:26px;height:26px;stroke-width:1.5;color:var(--brick)} .st-aw b{display:block;color:var(--ink);font-weight:600} .st-caps{position:absolute;left:680px;right:48px;top:684px;display:grid;grid-template-columns:226px 226px;gap:20px;font:500 13px 'Geist';color:var(--ink2)} .st-caps span{display:flex;gap:10px}.st-caps b{color:var(--ink);font-weight:600} .ds-kr{--bg:#F2E8D8;--ink:#2A1A10;--ink2:#6B5646;--car:#C0763A;--olive:#7F8C5A;--cream:#FBF6EE;--line:rgba(42,26,16,.14);background:var(--bg);color:var(--ink);font-family:'Outfit',system-ui,sans-serif} .kr-hd{height:100px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 48px} .kr-nav{display:flex;align-items:center;gap:30px;font:500 16px 'Outfit'} .kr-nav.r{justify-content:flex-end} .kr-bag{width:42px;height:42px;border-radius:50%;background:var(--cream);display:grid;place-items:center} .kr-logo{display:flex;flex-direction:column;align-items:center;gap:6px} .kr-badge{width:50px;height:50px} .kr-logo b{font:700 13px/1 'Outfit';letter-spacing:.3em;text-transform:uppercase} .kr-copy{position:absolute;left:48px;top:176px;width:390px} .kr-k{display:flex;align-items:center;gap:8px;font:600 14.5px 'Outfit';color:var(--car)} .kr-k .ico{width:16px;height:16px} .kr-h{margin:16px 0 20px;font:700 58px/.98 'Outfit';letter-spacing:-.035em} .kr-l{font-size:17px;line-height:1.55;color:var(--ink2);max-width:350px} .kr-bs{display:flex;gap:10px;margin-top:26px} .kr-btn{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 24px;border-radius:99px;background:var(--ink);color:var(--cream);font:600 15.5px 'Outfit'} .kr-btn.o{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)} .kr-arch{position:absolute;left:470px;top:122px;width:292px;height:520px;border-radius:146px 146px 26px 26px;background-position:center 26%} .kr-sticker{position:absolute;left:712px;top:148px;width:104px;height:104px;border-radius:50%;background:var(--olive);color:var(--cream);display:grid;place-items:center;text-align:center;font:700 13.5px/1.08 'Outfit';transform:rotate(12deg);box-shadow:0 12px 24px -12px rgba(0,0,0,.5)} .kr-menu{position:absolute;right:48px;top:128px;width:330px;padding:24px 24px 18px;border-radius:26px;background:var(--cream);box-shadow:0 0 0 1px var(--line)} .kr-menu h5{font:700 23px/1 'Outfit';letter-spacing:-.02em} .kr-menu h5 small{display:block;margin-top:6px;font:500 13px 'Outfit';color:var(--ink2);letter-spacing:0} .kr-item{display:flex;align-items:baseline;gap:8px;margin-top:15px;font:500 16.5px 'Outfit'} .kr-item i{flex:1;border-bottom:2px dotted rgba(42,26,16,.3);transform:translateY(-4px)} .kr-item b{font-weight:600;font-variant-numeric:tabular-nums} .kr-note{display:flex;align-items:center;gap:8px;margin-top:18px;padding-top:14px;border-top:1.5px dashed var(--line);font-size:13.5px;color:var(--ink2)} .kr-note .ico{width:16px;height:16px;color:var(--olive)} .kr-cup{position:absolute;right:-14px;top:-24px;width:78px;height:78px;border-radius:50%;box-shadow:0 0 0 5px var(--bg)} .kr-card{position:absolute;right:48px;top:470px;width:330px;height:172px;border-radius:22px;background-position:center 60%;overflow:hidden} .kr-card::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(42,26,16,.8),rgba(42,26,16,0) 70%)} .kr-card span{position:absolute;left:20px;bottom:18px;z-index:1;color:var(--cream);font:600 15px/1.3 'Outfit'} .kr-card span b{display:block;font:700 20px 'Outfit'} .kr-rate{display:flex;align-items:center;gap:8px;margin-top:22px;font:500 14.5px 'Outfit';color:var(--ink2)} .kr-rate b{color:var(--ink);font-weight:700} .kr-rate .stars{display:inline-flex;gap:2px;color:var(--car)}.kr-rate .stars svg{width:16px;height:16px} .kr-bake{position:absolute;left:48px;top:528px;width:372px;padding:14px 18px 14px 14px;border-radius:22px;background:var(--cream);box-shadow:0 0 0 1px var(--line),0 26px 44px -30px rgba(43,29,20,.5);display:flex;align-items:center;gap:16px} .kr-bake .im{width:76px;height:76px;border-radius:50%;flex:none;background-position:center} .kr-bake small{display:block;font:600 11.5px 'Outfit';letter-spacing:.08em;text-transform:uppercase;color:var(--car)} .kr-bake b{display:block;margin:3px 0 2px;font:700 20px/1.1 'Outfit';letter-spacing:-.02em} .kr-bake p{font-size:13.5px;color:var(--ink2)} .kr-band{position:absolute;left:0;right:0;bottom:0;height:66px;background:var(--car);color:var(--cream);display:flex;align-items:center;gap:26px;padding:0 48px;font:600 18px 'Outfit';white-space:nowrap;overflow:hidden} .kr-band i{width:8px;height:8px;border-radius:50%;background:var(--cream);opacity:.7;flex:none} .ds-bb{--bg:#FBEEEA;--ink:#1E3328;--ink2:#5B6B61;--rose:#D65A7A;--leaf:#5E7F5A;--cream:#FFF9F6;--line:rgba(30,51,40,.12);background:var(--bg);color:var(--ink);font-family:'Familjen Grotesk',system-ui,sans-serif} .bb-hd{height:86px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 44px;border-bottom:1px solid var(--line)} .bb-left{display:flex;align-items:center;gap:14px;font:600 13px 'Familjen Grotesk';letter-spacing:.14em;text-transform:uppercase} .bb-burger{position:relative;width:26px;height:18px} .bb-burger::before,.bb-burger::after,.bb-burger i{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:var(--ink)} .bb-burger::before{top:0}.bb-burger i{top:8px;right:6px}.bb-burger::after{bottom:0} .bb-logo{display:flex;align-items:center;gap:10px;font:700 29px/1 'Familjen Grotesk';letter-spacing:-.035em} .bb-flower{width:34px;height:34px} .bb-icons{display:flex;justify-content:flex-end;gap:10px} .bb-ic{position:relative;width:44px;height:44px;border-radius:50%;background:var(--cream);display:grid;place-items:center} .bb-ic i{position:absolute;right:-3px;top:-3px;width:19px;height:19px;border-radius:50%;background:var(--rose);color:#fff;font:700 11px/19px 'Familjen Grotesk';text-align:center;font-style:normal} .bb-p1{position:absolute;left:48px;top:122px;width:318px;height:396px;border-radius:20px;background-position:center 40%} .bb-p2{position:absolute;left:318px;top:160px;width:236px;height:282px;border-radius:18px;transform:rotate(4deg);box-shadow:0 0 0 7px var(--cream),0 30px 50px -24px rgba(30,51,40,.5)} .bb-stk{position:absolute;left:258px;top:430px;width:112px;height:112px;border-radius:50%;background:var(--rose);color:#fff;display:grid;place-items:center;text-align:center;font:700 14.5px/1.08 'Familjen Grotesk';transform:rotate(-10deg);box-shadow:0 14px 26px -12px rgba(0,0,0,.45)} .bb-copy{position:absolute;left:626px;top:146px;width:520px} .bb-k{display:flex;align-items:center;gap:10px;font:600 13px 'Familjen Grotesk';letter-spacing:.16em;text-transform:uppercase;color:var(--rose)} .bb-k i{width:26px;height:1.5px;background:var(--rose)} .bb-h{margin:18px 0 22px;font:700 68px/.94 'Familjen Grotesk';letter-spacing:-.045em} .bb-l{font-size:17px;line-height:1.55;color:var(--ink2);max-width:430px} .bb-bs{display:flex;gap:12px;margin-top:26px} .bb-btn{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 24px;border-radius:12px;background:var(--ink);color:var(--cream);font:600 15.5px 'Familjen Grotesk'} .bb-btn.o{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)} .bb-del{display:flex;align-items:center;gap:10px;margin-top:24px;font:500 14px 'Familjen Grotesk';color:var(--ink2)} .bb-del .ico{color:var(--leaf)} .bb-row{position:absolute;left:48px;right:48px;top:566px;height:150px;display:grid;grid-template-columns:1.25fr 1fr .85fr;gap:18px} .bb-prod{display:flex;gap:16px;padding:12px;border-radius:18px;background:var(--cream);box-shadow:0 0 0 1px var(--line)} .bb-prod .im{width:120px;border-radius:12px;flex:none;background-position:center 30%} .bb-prod small{display:block;margin-top:6px;font:600 11px 'Familjen Grotesk';letter-spacing:.14em;text-transform:uppercase;color:var(--rose)} .bb-prod b{display:block;margin:8px 0 4px;font:700 20px/1.1 'Familjen Grotesk';letter-spacing:-.02em} .bb-prod p{font-size:14px;color:var(--ink2)} .bb-add{display:inline-flex;align-items:center;gap:6px;height:34px;margin-top:12px;padding:0 14px;border-radius:99px;background:var(--rose);color:#fff;font:600 13px 'Familjen Grotesk'} .bb-add .ico{width:15px;height:15px} .bb-ws{position:relative;border-radius:18px;overflow:hidden;background-position:center 30%} .bb-ws::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(30,51,40,.8),rgba(30,51,40,0) 70%)} .bb-ws span{position:absolute;left:18px;bottom:16px;z-index:1;color:#fff;font:500 14px/1.3 'Familjen Grotesk'} .bb-ws span b{display:block;font:700 19px/1.1 'Familjen Grotesk';margin-bottom:3px} .bb-visit{padding:18px 20px;border-radius:18px;background:var(--leaf);color:#fff} .bb-visit small{font:600 11px 'Familjen Grotesk';letter-spacing:.14em;text-transform:uppercase;opacity:.75} .bb-visit b{display:block;margin:8px 0 10px;font:700 20px/1.1 'Familjen Grotesk'} .bb-visit p{display:flex;align-items:center;gap:7px;font-size:13.5px;opacity:.9;margin-top:4px} .bb-visit p .ico{width:15px;height:15px} .ds-ha{--navy:#13233F;--ink:#1B2230;--ink2:#5A6272;--brass:#C7A268;--light:#F1F2F5;--line:rgba(19,35,63,.12);background:#F6F5F1;color:var(--ink);font-family:'Inter Tight',system-ui,sans-serif} .ha-hd{height:86px;display:flex;align-items:center;gap:30px;padding:0 48px} .ha-logo{display:flex;align-items:center;gap:13px;margin-right:auto} .ha-mark{width:44px;height:44px;flex:none} .ha-wm b{display:block;font:700 15.5px/1 'Inter Tight';letter-spacing:.2em} .ha-wm small{display:block;margin-top:7px;font:500 12px/1 'Inter Tight';color:var(--ink2);letter-spacing:.01em} .ha-nav{display:flex;gap:26px;font:500 15px 'Inter Tight'} .ha-btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:99px;box-shadow:inset 0 0 0 1.5px var(--navy);color:var(--navy);font:600 14.5px 'Inter Tight'} .ha-btn .ico{width:16px;height:16px} .ha-panel{position:absolute;left:24px;top:86px;width:690px;height:466px;border-radius:26px;background:var(--navy);color:#fff;padding:52px 60px 0 44px;overflow:hidden;isolation:isolate} .ha-panel::before{content:"";position:absolute;z-index:-1;right:-120px;top:-140px;width:380px;height:380px;border-radius:50%;box-shadow:0 0 0 1px rgba(199,162,104,.34),0 0 0 46px var(--navy),0 0 0 47px rgba(199,162,104,.2),0 0 0 100px var(--navy),0 0 0 101px rgba(199,162,104,.1)} .ha-k{display:flex;align-items:center;gap:12px;font:600 12.5px 'Inter Tight';letter-spacing:.14em;text-transform:uppercase;color:var(--brass)} .ha-k i{width:30px;height:1.5px;background:var(--brass)} .ha-h{margin:18px 0 20px!important;font:700 66px/.98 'Inter Tight';letter-spacing:-.045em} .ha-h em{font-weight:500;color:var(--brass)} .ha-l{font-size:17px;line-height:1.55;color:rgba(255,255,255,.76);max-width:480px} .ha-bs{display:flex;align-items:center;gap:24px;margin-top:26px} .ha-cta{display:inline-flex;align-items:center;gap:9px;height:54px;padding:0 26px;border-radius:99px;background:var(--brass);color:var(--navy);font:700 15.5px 'Inter Tight'} .ha-cta .ico{width:17px;height:17px;stroke-width:2.4} .ha-tl{font:600 15px 'Inter Tight';padding-bottom:3px;border-bottom:1.5px solid rgba(255,255,255,.5)} .ha-facts{position:absolute;left:44px;right:60px;bottom:26px;display:flex;gap:0;padding-top:18px;border-top:1px solid rgba(255,255,255,.16)} .ha-facts span{flex:1;font:500 12.5px 'Inter Tight';color:rgba(255,255,255,.66)} .ha-facts b{display:block;margin-bottom:3px;font:700 24px/1 'Inter Tight';letter-spacing:-.03em;color:#fff} .ha-photo{position:absolute;left:668px;right:24px;top:110px;height:442px;border-radius:26px 150px 26px 26px;background-position:34% center;box-shadow:0 40px 70px -46px rgba(19,35,63,.7)} .ha-seal{position:absolute;left:640px;top:86px;width:124px;height:124px;border-radius:50%;background:var(--brass);color:var(--navy);transform:rotate(-10deg);box-shadow:0 18px 30px -16px rgba(19,35,63,.7)} .ha-seal .ha-rt{position:absolute;inset:0;width:100%;height:100%} .ha-seal .ha-rt text{font:700 10px 'Inter Tight';fill:currentColor} .ha-seal i{position:absolute;inset:0;display:grid;place-items:center} .ha-seal i .ico{width:34px;height:34px;stroke-width:1.8} .ha-quote{position:absolute;right:48px;top:404px;width:290px;padding:18px 20px 16px;border-radius:18px;background:#fff;box-shadow:0 30px 54px -26px rgba(19,35,63,.6)} .ha-quote .stars{display:inline-flex;gap:2px;color:var(--brass)}.ha-quote .stars svg{width:16px;height:16px} .ha-quote p{margin-top:9px;font:500 16px/1.35 'Inter Tight';letter-spacing:-.01em;color:var(--navy)} .ha-quote small{display:block;margin-top:8px;font:500 12.5px 'Inter Tight';color:var(--ink2)} .ha-cards{position:absolute;left:24px;right:24px;top:576px;display:grid;grid-template-columns:1fr 1fr 1.16fr;gap:16px} .ha-card{height:150px;padding:22px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--line);display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:start} .ha-card i{width:48px;height:48px;border-radius:14px;background:var(--light);color:var(--navy);display:grid;place-items:center} .ha-card i .ico{width:22px;height:22px} .ha-card b{display:block;font:700 19px/1.15 'Inter Tight';letter-spacing:-.015em;margin-top:2px} .ha-card p{margin-top:8px;font-size:14px;line-height:1.45;color:var(--ink2)} .ha-card em{font-style:normal;color:var(--brass)} .ha-card em .ico{width:20px;height:20px} .ha-card.call{grid-template-columns:auto 1fr;align-items:center;background:var(--brass);box-shadow:none} .ha-card.call .im{width:92px;height:92px;border-radius:50%;background-position:22% 30%;box-shadow:0 0 0 4px rgba(255,255,255,.5)} .ha-card.call small{display:block;font:700 11.5px 'Inter Tight';letter-spacing:.1em;text-transform:uppercase;color:rgba(19,35,63,.7)} .ha-card.call b{margin-top:6px;font-size:21px;color:var(--navy)} .ha-card.call p{display:flex;align-items:center;gap:7px;color:var(--navy);font-weight:600} .ha-card.call p .ico{width:15px;height:15px} .ds-b12{--bg:#120F0C;--cream:#F2E8D9;--gold:#D4A15A;background:var(--bg);color:var(--cream);font-family:'Geist',system-ui,sans-serif} .b12-bg{position:absolute;inset:0;background-position:center 60%} .b12-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,10,8,.92) 0%,rgba(12,10,8,.62) 42%,rgba(12,10,8,.12) 78%),linear-gradient(180deg,rgba(12,10,8,.6),rgba(12,10,8,0) 26%,rgba(12,10,8,0) 66%,rgba(12,10,8,.7))} .b12-hd{position:relative;height:100px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 56px} .b12-menu{display:flex;align-items:center;gap:14px;font:600 12px 'Geist';letter-spacing:.22em;text-transform:uppercase} .b12-burger{position:relative;width:28px;height:12px} .b12-burger::before,.b12-burger::after{content:"";position:absolute;left:0;right:0;height:1.8px;background:var(--cream)} .b12-burger::before{top:0}.b12-burger::after{bottom:0;right:8px} .b12-logo{display:flex;flex-direction:column;align-items:center;gap:7px} .b12-logo b{display:flex;align-items:center;gap:12px;font:700 34px/1 'Archivo';font-stretch:72%;letter-spacing:.14em} .b12-logo b svg{width:30px;height:30px} .b12-logo small{font:500 10.5px/1 'Geist';letter-spacing:.3em;text-transform:uppercase;color:var(--gold)} .b12-book{justify-self:end;display:inline-flex;align-items:center;height:46px;padding:0 22px;border-radius:99px;box-shadow:inset 0 0 0 1.5px var(--gold);color:var(--gold);font:600 14px 'Geist'} .b12-copy{position:absolute;left:72px;top:196px;width:660px} .b12-k{display:flex;align-items:center;gap:12px;font:600 12.5px 'Geist';letter-spacing:.22em;text-transform:uppercase;color:var(--gold)} .b12-k i{width:34px;height:1.5px;background:var(--gold)} .b12-h{margin:20px 0 20px;font:700 112px/.86 'Archivo';font-stretch:68%;letter-spacing:-.005em;text-transform:uppercase} .b12-l{font-size:17.5px;line-height:1.6;color:rgba(242,232,217,.8);max-width:440px} .b12-bar{position:absolute;left:72px;top:596px;width:720px;height:80px;border-radius:18px;background:rgba(20,16,12,.76);box-shadow:0 0 0 1px rgba(242,232,217,.16),0 30px 50px -20px rgba(0,0,0,.6);display:grid;grid-template-columns:1fr 1fr 1fr auto;align-items:center;padding:0 12px 0 26px;gap:10px} .b12-f{padding-left:16px;border-left:1px solid rgba(242,232,217,.16)} .b12-f:first-child{padding-left:0;border-left:0} .b12-f small{display:block;font:600 10.5px 'Geist';letter-spacing:.18em;text-transform:uppercase;color:var(--gold)} .b12-f b{display:flex;align-items:center;gap:6px;margin-top:6px;font:500 16.5px 'Geist'} .b12-f b .ico{width:15px;height:15px;opacity:.7} .b12-go{display:inline-flex;align-items:center;gap:8px;height:56px;padding:0 24px;border-radius:12px;background:var(--gold);color:#1A130C;font:700 15px 'Geist'} .b12-dish{position:absolute;right:56px;top:398px;width:290px;border-radius:18px;overflow:hidden;background:rgba(20,16,12,.84);box-shadow:0 0 0 1px rgba(242,232,217,.14),0 30px 50px -20px rgba(0,0,0,.7)} .b12-dish .im{height:168px} .b12-dish p{padding:14px 18px 16px;font-size:14px;line-height:1.4;color:rgba(242,232,217,.75)} .b12-dish p b{display:block;margin-bottom:3px;color:var(--cream);font:600 16px 'Geist'} /* NeuWP concept E2, "Sketchbook": graph paper, a pencil, a coral marker, and real websites under the sketches. Archivo does the talking; the logo's own marker writes the notes in the margins. */ :root{ --paper:#FCFBF7; --paper-2:#F5F1E8; --white:#FFFFFF; --grid:rgba(61,109,242,.065); --grid-2:rgba(61,109,242,.12); --ink:#17171C; --ink-2:#4A4B54; --ink-3:#7B7D87; --pencil:#5E626E; --line:rgba(23,23,28,.1); --line-2:rgba(23,23,28,.16); /* --coral-ink: words in coral, the deeper one (5 to 1 on the paper, as WCAG asks of words under 24 px: 12 Oct); --coral-line: the pencil's coral lines and arrows, the lighter one (a line needs 3 to 1) */ --coral:#F15C3E; --coral-ink:#C9351C; --coral-line:#D8432A; --coral-deep:#C9351C; --coral-btn:#D53E20; --coral-btn-hover:#BF381D; --coral-light:#F4846E; --yellow:#FFD24A; --green:#2F9E6B; --green-deep:#1E7B53; --kraft:#DCC8A4; --kraft-2:#CDB68D; --kraft-3:#E6D5B5; --kraft-ink:#2E2418; --sans:'Archivo',system-ui,sans-serif; --hand:'Permanent Marker','Archivo',cursive; --mono:'Geist Mono',ui-monospace,monospace; --ease:cubic-bezier(.2,.8,.2,1); --ease-io:cubic-bezier(.7,0,.2,1); --spring:cubic-bezier(.34,1.45,.64,1); --pad:clamp(18px,4vw,56px); --maxw:1280px; --gap:clamp(84px,10.4vw,156px); /* the pencil rule and the marker's swipe (the menu's), and the header's height */ --rule:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%227%22%20viewBox%3D%220%200%20600%207%22%3E%3Cpath%20d%3D%22M0.0%2C3.5%20C6.7%2C3.6%2026.7%2C3.7%2040.0%2C3.8%20C53.3%2C3.9%2066.7%2C4.1%2080.0%2C4.1%20C93.3%2C4.2%20106.7%2C4.2%20120.0%2C4.3%20C133.3%2C4.4%20146.7%2C4.7%20160.0%2C4.7%20C173.3%2C4.6%20186.7%2C4.1%20200.0%2C4.1%20C213.3%2C4.1%20226.7%2C4.9%20240.0%2C4.6%20C253.3%2C4.3%20266.7%2C2.5%20280.0%2C2.3%20C293.3%2C2.1%20306.7%2C3.0%20320.0%2C3.4%20C333.3%2C3.8%20346.7%2C4.6%20360.0%2C4.7%20C373.3%2C4.7%20386.7%2C3.9%20400.0%2C3.9%20C413.3%2C3.9%20426.7%2C4.8%20440.0%2C4.5%20C453.3%2C4.3%20466.7%2C2.7%20480.0%2C2.5%20C493.3%2C2.3%20506.7%2C3.4%20520.0%2C3.4%20C533.3%2C3.5%20546.7%2C2.8%20560.0%2C2.8%20C573.3%2C2.9%20593.3%2C3.4%20600.0%2C3.5%22%20fill%3D%22none%22%20stroke%3D%22%2317171C%22%20stroke-opacity%3D%22.2%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E); --marker:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M5%2C9%20C40%2C4%2090%2C7%20140%2C5%20C165%2C4%20185%2C6%20197%2C8%20L195%2C33%20C160%2C37%20120%2C34%2080%2C36%20C50%2C37%2025%2C35%203%2C34%20Z%22%20fill%3D%22%23FFD24A%22%2F%3E%3C%2Fsvg%3E); --hd:86px; --paper-shadow:0 1px 0 rgba(0,0,0,.04),0 32px 60px -36px rgba(60,48,28,.5),0 8px 18px -12px rgba(60,48,28,.22); } *{box-sizing:border-box} html{background:var(--paper);scroll-padding-top:96px} /* without a script too, an address box arrived at by #start is not stuck under the header */ #start{scroll-margin-top:28vh} body{margin:0;color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden; background-color:var(--paper);background-image:linear-gradient(var(--grid-2) 1px,transparent 1px),linear-gradient(90deg,var(--grid-2) 1px,transparent 1px),linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:-1px -1px} ::selection{background:var(--yellow);color:var(--ink)} a{color:inherit} img,svg{display:block} button{font:inherit;color:inherit} .wrap{width:min(var(--maxw),100% - 2*var(--pad));margin-inline:auto} .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* the first stop of a keyboard: "Skip to content" shows itself while it has the focus (until 9 Oct it stayed a pixel wide) */ a.vh:focus-visible{position:fixed!important;z-index:200;top:14px;left:14px;width:auto;height:auto;overflow:visible;clip:auto;padding:13px 18px;border-radius:12px;background:var(--ink);color:#fff;font:700 15px/1 var(--sans);text-decoration:none;outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 3px var(--paper)} .ico{width:1em;height:1em;stroke-width:2.2;flex:none} /* ---------------------------------------------------------------- type */ .note{font:400 clamp(17px,1.45vw,21px)/1.15 var(--hand);color:var(--coral-ink);letter-spacing:.01em} .kick{display:inline-block;transform:rotate(-1deg)} /* No last line of one word (Z, 2 and 5 October). A heading or a short text is balanced, a paragraph is "pretty", and the build holds each text's last two words together (lang.py, bind). The example sites are set by hand. */ :where(p,li,dd,figcaption,blockquote):not(.ds *){text-wrap:pretty} :where(h1,h2,h3,h4,.sub,.note,.qb p,label,legend,summary,button,.btn):not(.ds *){text-wrap:balance} h2{margin:12px 0 0;font:800 clamp(2.4rem,4.7vw,4.6rem)/.98 var(--sans);font-stretch:110%;letter-spacing:-.035em;text-wrap:balance} .sub{margin:18px 0 0;font-size:clamp(16.5px,1.3vw,19px);line-height:1.55;color:var(--ink-2)} .sec-hd{display:flex;flex-direction:column;align-items:center;text-align:center} .sec-hd .sub{max-width:62ch} /* a marker swipe behind a word: it grows from the left, and only sideways */ .hl{position:relative;z-index:0;white-space:nowrap} .hl::before{content:"";position:absolute;z-index:-1;left:-.14em;right:-.14em;top:.5em;bottom:.02em;background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M5%2C9%20C40%2C4%2090%2C7%20140%2C5%20C165%2C4%20185%2C6%20197%2C8%20L195%2C33%20C160%2C37%20120%2C34%2080%2C36%20C50%2C37%2025%2C35%203%2C34%20Z%22%20fill%3D%22%23FFD24A%22%2F%3E%3C%2Fsvg%3E) center/100% 100% no-repeat;opacity:.9; clip-path:inset(0 100% 0 0);transition:clip-path .9s var(--ease) .15s} .hl.in::before{clip-path:inset(0 0 0 0)} /* a long highlight in another language (hl-w: build-landing.py, build-pages.py, lsw.js) may take two lines: the marker is drawn under each line instead of once under the whole (14 Oct: German and Bulgarian highlights ran past a phone's edge) */ .hl.hl-w{white-space:normal;background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M5%2C9%20C40%2C4%2090%2C7%20140%2C5%20C165%2C4%20185%2C6%20197%2C8%20L195%2C33%20C160%2C37%20120%2C34%2080%2C36%20C50%2C37%2025%2C35%203%2C34%20Z%22%20fill%3D%22%23FFD24A%22%2F%3E%3C%2Fsvg%3E) left bottom/100% 54% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .1em;margin:0 -.1em} .hl.hl-w::before{display:none} /* ---------------------------------------------------------------- buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border:0;border-radius:14px;background:var(--ink);color:#fff; font:700 16px/1 var(--sans);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:4px 4px 0 var(--coral);transition:transform .35s var(--spring),box-shadow .35s var(--spring),background .25s} .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--coral)} .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--coral)} .btn .ico{width:18px;height:18px;stroke-width:2.4;transition:transform .35s var(--spring)} .btn:hover .ico{transform:translateX(3px)} /* a focus ring a keyboard can always find (Z, 9 Oct: "we pride ourselves on being WCAG aware"): ink, 3 px, a gap from what it rings; --focus says another colour where the ground is dark */ :focus-visible{outline:3px solid var(--focus,var(--ink));outline-offset:3px} /* ---------------------------------------------------------------- header */ .hd{position:fixed;inset:0 0 auto;z-index:80;transition:transform .5s var(--ease),background .35s} .hd::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:7px;background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%227%22%20viewBox%3D%220%200%20600%207%22%3E%3Cpath%20d%3D%22M0.0%2C3.5%20C6.7%2C3.6%2026.7%2C3.7%2040.0%2C3.8%20C53.3%2C3.9%2066.7%2C4.1%2080.0%2C4.1%20C93.3%2C4.2%20106.7%2C4.2%20120.0%2C4.3%20C133.3%2C4.4%20146.7%2C4.7%20160.0%2C4.7%20C173.3%2C4.6%20186.7%2C4.1%20200.0%2C4.1%20C213.3%2C4.1%20226.7%2C4.9%20240.0%2C4.6%20C253.3%2C4.3%20266.7%2C2.5%20280.0%2C2.3%20C293.3%2C2.1%20306.7%2C3.0%20320.0%2C3.4%20C333.3%2C3.8%20346.7%2C4.6%20360.0%2C4.7%20C373.3%2C4.7%20386.7%2C3.9%20400.0%2C3.9%20C413.3%2C3.9%20426.7%2C4.8%20440.0%2C4.5%20C453.3%2C4.3%20466.7%2C2.7%20480.0%2C2.5%20C493.3%2C2.3%20506.7%2C3.4%20520.0%2C3.4%20C533.3%2C3.5%20546.7%2C2.8%20560.0%2C2.8%20C573.3%2C2.9%20593.3%2C3.4%20600.0%2C3.5%22%20fill%3D%22none%22%20stroke%3D%22%2317171C%22%20stroke-opacity%3D%22.2%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E) left center/600px 7px repeat-x;opacity:0;transition:opacity .35s} .hd.solid{background:rgba(252,251,247,.9);backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3)} .hd.solid::after{opacity:1} .hd.away{transform:translateY(-110%)} .hd-in{display:flex;align-items:center;gap:16px;height:86px} .hd .logo img{height:32px;width:auto} /* The header is the menu on a computer (Z, 20 Oct: "Go with E"): Pricing, Process and Why WordPress (the logo is the way home), and Free tools and More, each opening a panel under it, the way most business websites do. Wherever they do not fit on one line in the language shown (a tablet, a phone, a long language on a laptop: menu.js measures it, and the widths at the end of this file say it before the script runs), the burger opens the drawer instead. */ .bn{margin:0 auto} .bn-list{position:relative;display:flex;gap:2px;list-style:none;margin:0;padding:5px;border-radius:16px;background:rgba(255,255,255,.82);box-shadow:inset 0 0 0 1.5px var(--line),0 14px 28px -22px rgba(60,48,28,.5)} .bn-list>li{position:relative} .bn-a{all:unset;box-sizing:border-box;position:relative;display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 12px;border-radius:11px;font:600 15px var(--sans);color:var(--ink-2);white-space:nowrap;cursor:pointer;text-decoration:none;transition:color .2s,background .2s} .bn-a:focus-visible{outline:3px solid var(--ink);outline-offset:2px} .bn-a>span{position:relative} .bn-a>span::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-6px;height:8px;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 9' preserveAspectRatio='none'%3E%3Cpath d='M2,5.5 C18,2 30,8 48,4.5 S80,2.5 98,5' fill='none' stroke='%23F15C3E' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;clip-path:inset(0 100% 0 0);transition:clip-path .4s var(--ease)} .bn-a:hover,.bn-a[aria-current]{color:var(--ink)} .bn-a:not(.bn-t):hover>span::after,.bn-a[aria-current]>span::after{clip-path:inset(0 0 0 0)} .bn-t{padding-right:9px} .bn-t .ico{width:16px;height:16px;stroke-width:2.4;transition:transform .3s var(--ease)} .bn-t:hover,.bn-t[aria-expanded="true"]{background:var(--paper-2);color:var(--ink)} .bn-t[aria-expanded="true"] .ico{transform:rotate(180deg)} /* the panels: smaller than the page, in the drawer's manner (the tools a line each, the trades as chips) */ .bn-p{position:absolute;top:calc(100% + 17px);left:50%;z-index:5;width:var(--pw,460px);max-width:calc(100vw - 36px);max-height:calc(100vh - var(--hd) - 24px);overflow-y:auto;overscroll-behavior:contain;padding:16px 18px 18px;border-radius:20px;background:var(--white); box-shadow:0 0 0 1.5px var(--line),0 44px 80px -36px rgba(60,48,28,.55),0 12px 26px -18px rgba(60,48,28,.3); transform:translateX(calc(-50% + var(--dx,0px)));opacity:0;translate:0 -8px;transition:opacity .22s var(--ease),translate .32s var(--ease)} .bn-p.on{opacity:1;translate:none} /* the room between a button and its panel belongs to the button while the panel is open, so a pointer crossing it keeps it */ .bn-dd.open::after{content:"";position:absolute;left:-12px;right:-12px;top:100%;height:24px} .bn-p[hidden]{display:none} .ep-tools{--pw:430px} .ep-more{--pw:470px} .ep-say{margin:0 0 6px 2px;font:500 13.5px/1.4 var(--sans);color:var(--pencil)} .ep .dr-tools{margin:0 -10px} .ep .dr-tools a:hover{background:var(--paper)} .ep .dr-ideas{margin-top:10px} .ep-sec+.ep-sec{position:relative;margin-top:14px;padding-top:12px} .ep-sec+.ep-sec::before{content:"";position:absolute;left:0;right:0;top:-3px;height:7px;background:var(--rule) left center/600px 7px repeat-x} .ep-h{display:flex;align-items:center;gap:10px;margin-bottom:8px;font:800 16px/1.25 var(--sans);font-stretch:104%;color:var(--ink);text-decoration:none} .ep-h .mm-ico{flex:none;width:46px;height:34px} .ep-h .ico{width:16px;height:16px;color:var(--coral-ink);transition:transform .3s var(--spring)} .ep-h:hover .ico{transform:translateX(3px)} .ep-h span{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:4px;transition:text-decoration-color .25s} .ep-h:hover span,.ep-h[aria-current] span{text-decoration-color:var(--coral)} .ep .dr-chips{padding-left:56px} .ep .dr-chips a{background:var(--paper)} .ep .dr-chips a:hover,.ep .dr-chips a[aria-current]{background:var(--yellow)} .ep .dr-list{padding-left:56px} .bn-strip{display:flex;flex-wrap:wrap;gap:2px 22px;margin:14px -18px -18px;padding:12px 28px 13px;border-radius:0 0 20px 20px;background:var(--paper)} .bn-strip a{padding:4px 0;font:600 13.5px var(--sans);color:var(--pencil);text-decoration:none} .bn-strip a:hover,.bn-strip a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px;text-underline-offset:4px} /* where they do not fit: the burger, and the drawer. Each language's words are longer or shorter, so each has the width below which its header no longer holds the menu with room to spare (24 px, measured on 20 Oct with "Home" and "Try it free" in it), said here so the header is right before any script has run; menu.js measures it again, for whatever these did not foresee */ .hd.narrow .bn{display:none} .hd.narrow .burger{display:flex} .hd.narrow .logo{margin-right:auto} @media (max-width:1113px){html[lang="en"] .hd .bn{display:none}html[lang="en"] .hd .burger{display:flex}html[lang="en"] .hd .logo{margin-right:auto}} @media (max-width:1269px){html[lang="de"] .hd .bn{display:none}html[lang="de"] .hd .burger{display:flex}html[lang="de"] .hd .logo{margin-right:auto}} @media (max-width:1189px){html[lang="da"] .hd .bn{display:none}html[lang="da"] .hd .burger{display:flex}html[lang="da"] .hd .logo{margin-right:auto}} @media (max-width:1192px){html[lang="bg"] .hd .bn{display:none}html[lang="bg"] .hd .burger{display:flex}html[lang="bg"] .hd .logo{margin-right:auto}} .hd .btn{height:52px;padding:0 18px;font-size:16.5px} /* the language switch (13 Oct: Z, "a language selector so users can change NeuWP's language"): the globe and the language's own name, its list under it; on a phone it is in the menu */ .lsw{position:relative;flex:none} .lsw-b{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 12px;border:0;border-radius:12px;background:transparent;font:600 15.5px var(--sans);color:var(--ink-2);cursor:pointer;transition:color .25s,background .25s} .lsw-b:hover,.lsw-b[aria-expanded="true"]{color:var(--ink);background:rgba(255,255,255,.78)} .lsw-b .ico{width:19px;height:19px} .lsw-b .lsw-v{width:14px;height:14px;transition:transform .3s var(--ease)} .lsw-b[aria-expanded="true"] .lsw-v{transform:rotate(180deg)} .lsw-m{position:absolute;right:0;top:calc(100% + 8px);z-index:2;display:flex;flex-direction:column;min-width:180px;padding:8px;border-radius:16px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line),0 22px 40px -24px rgba(60,48,28,.55)} .lsw-m[hidden]{display:none} .lsw-m a{padding:10px 14px;border-radius:10px;font:600 15.5px var(--sans);color:var(--ink-2);text-decoration:none} .lsw-m a:hover{color:var(--ink);background:var(--paper)} .lsw-m a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px;text-underline-offset:5px} /* The drawer (Z, 20 Oct: "Go with E"), opened by the burger wherever the header does not hold the menu: it slides in from the right edge as in most apps and shops, the page dimmed behind it (no blur: older laptops lag under a backdrop-filter, 17 Oct); on a phone it is the whole screen, its logo and its cross where the page's are. One column in the order of importance: the four pages large, the way to start, the free tools, then the trades and the guides folded away, and the small print last. theme/menu.js opens it. */ .burger{display:none;flex:none;width:48px;height:48px;border-radius:14px;border:2px solid var(--ink);background:var(--white);align-items:center;justify-content:center;cursor:pointer;transition:transform .35s var(--spring),box-shadow .35s var(--spring)} .burger svg{width:24px;height:24px;overflow:visible} .burger path{stroke-width:2.4;transition:transform .45s var(--spring)} .burger:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--coral)} .burger:hover path:nth-child(1){transform:translateX(2px)} .burger:hover path:nth-child(2){transform:translateX(-2px)} .burger:hover path:nth-child(3){transform:translateX(4px)} .mnav{position:fixed;inset:0;z-index:90;visibility:hidden;transition:visibility 0s .6s} .mnav.on{visibility:visible;transition:none} .mnav:not(.on){pointer-events:none} .mnav-dim{position:absolute;inset:0;background:rgba(23,23,28,.44);opacity:0;transition:opacity .4s var(--ease)} .mnav.on .mnav-dim{opacity:1} .drw{--dp:32px;position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;width:min(452px,100%);background:var(--paper); box-shadow:-1px 0 0 rgba(23,23,28,.07),-40px 0 80px -40px rgba(0,0,0,.55);transform:translateX(105%);transition:transform .55s var(--ease)} .mnav.on .drw{transform:none} .dr-top{position:relative;z-index:1;flex:none;display:flex;align-items:center;gap:12px;height:min(var(--hd),80px);padding:0 var(--dp);transition:box-shadow .25s} .drw.scrolled .dr-top{box-shadow:0 1px 0 var(--line),0 10px 18px -16px rgba(60,48,28,.45)} .dr-logo{display:none;line-height:0;margin-right:auto} .dr-logo img{height:28px;width:auto} .mm-lang{display:flex;gap:2px;padding:3px;border-radius:12px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line)} .mm-lang a{display:grid;place-items:center;min-width:40px;height:34px;padding:0 6px;border-radius:9px;font:700 13px/1 var(--sans);letter-spacing:.08em;color:var(--ink-2);text-decoration:none;transition:background .2s,color .2s} .mm-lang a:hover{background:var(--paper-2);color:var(--ink)} .mm-lang a[aria-current]{background:var(--ink);color:#fff} .dr-top .mm-lang{margin-right:auto} .dr-x{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;border:2px solid var(--ink);background:var(--white);cursor:pointer;transition:transform .35s var(--spring)} .dr-x:hover{transform:rotate(90deg)} .dr-x svg{width:24px;height:24px} .dr-x path{stroke-width:2.6} .dr-body{flex:1;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;padding:8px var(--dp) 0} .mnav ul{list-style:none;margin:0;padding:0} /* the four pages: large, each on its own line under a pencil rule, an arrow that steps on, a marker under the one a visitor is on */ .dr-main li{position:relative} .dr-main li+li::before{content:"";position:absolute;left:0;right:0;top:-3px;height:7px;background:var(--rule) left center/600px 7px repeat-x} .dr-main a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0 11px;color:var(--ink);text-decoration:none} .dr-main a>span{position:relative;z-index:0;font:800 29px/1.12 var(--sans);font-stretch:110%;letter-spacing:-.03em} .dr-main a>span::before{content:"";position:absolute;z-index:-1;left:-.12em;right:-.12em;top:.54em;bottom:.02em;background:var(--marker) center/100% 100% no-repeat;clip-path:inset(0 100% 0 0);transition:clip-path .4s var(--ease)} .dr-main a:hover>span::before,.dr-main a[aria-current]>span::before{clip-path:inset(0 0 0 0)} .dr-main .ico{width:22px;height:22px;color:var(--ink-3);transition:transform .35s var(--spring),color .2s} .dr-main a:hover .ico{transform:translateX(4px);color:var(--coral-ink)} /* the way to start, right under the pages */ .dr-cta{display:grid;gap:12px;margin-top:20px} .dr-cta .btn{width:100%;height:58px;font-size:17px} .dr-ideas{list-style:none;margin:0;padding:0} .dr-idea,.idea-slip{display:grid;grid-template-columns:50px minmax(0,1fr) auto;align-items:center;column-gap:10px;padding:7px 16px 7px 6px;border-radius:14px;background:#FFF0BA;color:var(--ink);text-decoration:none;transition:background .25s} .dr-idea:hover,.dr-idea[aria-current],.idea-slip:hover{background:#FFE48A} .dr-idea .mm-ico,.idea-slip .mm-ico{width:50px;height:38px} .dr-idea b,.idea-slip b{display:block;font:600 13.5px/1.3 var(--sans);color:var(--ink-2)} .dr-idea span>span,.idea-slip span>span{display:block;font:800 16.5px/1.25 var(--sans);font-stretch:104%} .dr-idea>.ico,.idea-slip>.ico{width:18px;height:18px;color:var(--coral-ink);transition:transform .35s var(--spring)} .dr-idea:hover>.ico,.idea-slip:hover>.ico{transform:translateX(3px)} /* the free tools, second: smaller, a drawing, a name and a line each */ .dr-sec{margin-top:26px} .dr-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-bottom:6px} .mnav h2.dr-lab{margin:0;font:400 19px/1.2 var(--hand);letter-spacing:.01em;color:var(--coral-ink)} .dr-say{margin:0;font:500 13.5px/1.4 var(--sans);color:var(--pencil)} .dr-tools{list-style:none;margin:0 -12px;padding:0;display:grid;gap:2px} .dr-tools a{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:14px;align-items:center;padding:6px 12px;border-radius:14px;color:var(--ink);text-decoration:none;transition:background .2s} .dr-tools a:hover,.dr-tools a[aria-current]{background:var(--white)} .dr-tools .mm-ico{grid-row:span 2;width:52px;height:39px} .dr-tools b{align-self:end;font:700 16px/1.25 var(--sans)} .dr-tools span{align-self:start;margin-top:1px;font:500 13.5px/1.4 var(--sans);color:var(--pencil)} /* trades and guides, third: folded, each opened by its arrow; its name leads to its own page */ .dr-fold{position:relative} .dr-fold::before{content:"";position:absolute;left:0;right:0;top:-3px;height:7px;background:var(--rule) left center/600px 7px repeat-x} .dr-fold-h{display:flex;align-items:center;gap:8px} .dr-fold-h a{flex:1;display:flex;align-items:center;gap:12px;min-width:0;padding:7px 0;font:700 16px/1.25 var(--sans);color:var(--ink);text-decoration:none} .dr-fold-h a span{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:4px;transition:text-decoration-color .25s} .dr-fold-h a:hover span,.dr-fold-h a[aria-current] span{text-decoration-color:var(--coral)} .dr-fold-h .mm-ico{flex:none;width:44px;height:33px} .dr-fold-b{all:unset;box-sizing:border-box;flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:var(--ink-2);cursor:pointer;transition:background .2s} .dr-fold-b:hover{background:var(--white);color:var(--ink)} .dr-fold-b:focus-visible{outline:3px solid var(--ink);outline-offset:2px} .dr-fold-b .ico{width:20px;height:20px;transition:transform .3s var(--ease)} .dr-fold-b[aria-expanded="true"] .ico{transform:rotate(180deg)} .dr-fold-p{padding:2px 0 16px 56px} .dr-fold-p[hidden]{display:none} .dr-chips{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0} .dr-chips a{display:inline-block;padding:7px 12px;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line);font:600 14px/1.2 var(--sans);color:var(--ink-2);text-decoration:none;transition:background .2s,color .2s} .dr-chips a:hover,.dr-chips a[aria-current]{background:var(--yellow);color:var(--ink)} .dr-list{list-style:none;margin:0;padding:0;display:grid} .dr-list a{display:block;padding:6px 0;font:500 14.5px/1.35 var(--sans);color:var(--ink-2);text-decoration:none} .dr-list a:hover,.dr-list a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px;text-underline-offset:4px} /* the small print, last */ .dr-more{margin-bottom:22px} .dr-foot{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:auto;padding:14px 0 18px} .dr-foot::before{content:"";position:absolute;left:0;right:0;top:-3px;height:7px;background:var(--rule) left center/600px 7px repeat-x} .dr-small{display:flex;flex-wrap:wrap;gap:2px 20px;margin:0} .dr-small a{padding:6px 0;font:600 14px var(--sans);color:var(--pencil);text-decoration:none} .dr-small a:hover,.dr-small a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px;text-underline-offset:5px} .dr-foot .mm-lang{display:none} /* opening: the drawer slides in, then its parts settle one after another, and each drawing does its one thing */ .dr-body>*{opacity:0;translate:0 10px;transition:opacity .35s var(--ease),translate .5s var(--ease)} .mnav.on .dr-body>*{opacity:1;translate:none} .mnav.on .dr-body>:nth-child(1){transition-delay:.12s}.mnav.on .dr-body>:nth-child(2){transition-delay:.18s}.mnav.on .dr-body>:nth-child(3){transition-delay:.24s}.mnav.on .dr-body>:nth-child(4){transition-delay:.3s}.mnav.on .dr-body>:nth-child(5){transition-delay:.34s} .mm-ico{overflow:visible} .mm-ico .t-lens{transform-box:view-box;transform-origin:80px 50px} .mm-ico [pathLength]{stroke-dasharray:1 1} :is(.mnav.on,.bn-p.on) .mm-ico-check .t-lens,.dr-tools a:hover .mm-ico-check .t-lens{animation:mm-lens 1.4s var(--ease) .35s both} :is(.mnav.on,.bn-p.on) .mm-ico-check .t-lens [pathLength]{animation:mm-draw .45s var(--ease) 1.45s both} :is(.mnav.on,.bn-p.on) .mm-ico-cost .t-key,.dr-tools a:hover .mm-ico-cost .t-key{animation:mm-press .9s ease-in-out .45s 2 both} :is(.mnav.on,.bn-p.on) .mm-ico-cost .t-slip{animation:mm-slip 1s var(--spring) .4s both} :is(.mnav.on,.bn-p.on) .mm-ico-cost .t-spark{animation:mm-flick 1.4s steps(2) .8s both} :is(.mnav.on,.bn-p.on) .mm-ico-move .t-box,.dr-tools a:hover .mm-ico-move .t-box{animation:mm-hop .8s var(--spring) .5s both} :is(.mnav.on,.bn-p.on) .mm-ico-move .t-arrow [pathLength]{animation:mm-draw .6s var(--ease) .85s both} :is(.mnav.on,.bn-p.on) .mm-ico-idea .t-rays{animation:mm-flick 1.6s steps(2) .5s both} :is(.mnav.on,.bn-p.on) .mm-ico-book .t-ribbon{transform-box:fill-box;transform-origin:50% 0;animation:mm-swing 1.4s ease-in-out .4s both} :is(.mnav.on,.bn-p.on) .mm-ico-shop .t-awn{transform-box:fill-box;transform-origin:50% 0;animation:mm-swing 1.6s ease-in-out .35s both} @keyframes mm-lens{0%{transform:translate(-44px,-12px) rotate(-8deg)}45%{transform:translate(-12px,4px) rotate(4deg)}100%{transform:none}} @keyframes mm-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} @keyframes mm-press{0%,100%{transform:none}40%,60%{transform:translateY(2px)}} @keyframes mm-slip{from{transform:translateY(16px)}to{transform:none}} @keyframes mm-flick{0%,30%,70%{opacity:0}15%,50%,100%{opacity:1}} @keyframes mm-hop{0%,100%{transform:none}40%{transform:translateY(-7px) rotate(-3deg)}70%{transform:translateY(1px)}} @keyframes mm-swing{0%,100%{transform:none}30%{transform:rotate(5deg)}65%{transform:rotate(-3deg)}} html.mm-open{overflow:hidden} /* the free tools in the footer, on the footer's paper, each on a slip of its own */ .tools-say{margin:6px 0 14px;font:600 14px/1.4 var(--sans);color:var(--ink-2)} .tools-list{list-style:none;margin:0;padding:0;display:grid;gap:10px} .tools-list a{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:12px;align-items:center;padding:10px 14px 11px 8px;border-radius:4px;background:#FFFDF8;color:var(--ink);text-decoration:none; box-shadow:0 1px 0 rgba(0,0,0,.05),0 12px 18px -14px rgba(60,48,28,.6);transition:transform .45s var(--spring)} /* the deeper shadow of a lifted card fades in on a layer of its own: only a move and a fade, nothing drawn anew */ .tools-list a::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 20px 26px -16px rgba(60,48,28,.6);opacity:0;transition:opacity .45s var(--ease);pointer-events:none} .tools-list a:hover{transform:translateY(-3px) rotate(-.8deg)} .tools-list a:hover::after{opacity:1} .tools-list .mm-ico{grid-row:span 2;width:64px;height:48px;transition:transform .45s var(--spring)} .tools-list a:hover .mm-ico{transform:rotate(-6deg) scale(1.08)} .tools-list b{align-self:end;font:800 16px/1.25 var(--sans);font-stretch:104%;text-wrap:balance} .tools-list span{align-self:start;margin-top:2px;font:500 14px/1.4 var(--sans);color:var(--ink-2);text-wrap:pretty} /* with less motion asked for, the drawer and the panels are there at once, whole, and nothing in them moves */ @media (prefers-reduced-motion:reduce){.mnav,.mnav.on,.mnav-dim,.drw,.dr-body>*,.bn-p{transition:none!important}.dr-body>*{opacity:1;translate:none}.bn-p{translate:none}.mm-ico *{animation:none!important}} /* ---------------------------------------------------------------- hero */ .hero{position:relative;padding:210px 0 calc(var(--gap) * .95);overflow-x:clip} .hero-grid{display:grid;grid-template-columns:minmax(0,5.4fr) minmax(0,6.6fr);gap:clamp(32px,4vw,60px);align-items:center} .hero .kick{opacity:0;animation:up .8s var(--ease) .15s forwards} .hero h1{position:relative;isolation:isolate;margin:18px 0 0;font:800 clamp(3rem,5.4vw,5rem)/.95 var(--sans);font-stretch:108%;letter-spacing:-.045em} .hero h1 .ln{display:block;overflow:hidden;padding:0 .08em .09em 0;margin:0 -.08em -.09em 0} .hero h1 .ln>span{display:inline-block;transform:translateY(106%);animation:rise 1.1s var(--ease) forwards} .hero h1 .ln:nth-child(2)>span{animation-delay:.1s} .circ-mark{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:1} .circ-mark path{fill:none;stroke:var(--coral);stroke-width:5.5;stroke-linecap:round;stroke-dasharray:var(--len,1400);stroke-dashoffset:var(--len,1400)} .circ-mark.on path{transition:stroke-dashoffset 1.2s var(--ease);stroke-dashoffset:0} @keyframes rise{to{transform:none}} @keyframes up{from{opacity:0;transform:translateY(14px) rotate(-1deg)}to{opacity:1;transform:rotate(-1deg)}} @keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* the lead is there from the first paint and slides into place (13 October: faded in from nothing, the page's largest paint on a phone was the logo, at 3.7 seconds) */ .hero .lead{margin:28px 0 0;max-width:30em;font-size:clamp(17px,1.35vw,19.5px);line-height:1.6;color:var(--ink-2);transform:translateY(14px);animation:settle .9s var(--ease) .45s forwards} @keyframes settle{to{transform:none}} /* the address field, here and at the end */ .urlf{position:relative;display:flex;align-items:center;gap:6px;max-width:580px;height:72px;margin-top:34px;padding:0 9px 0 10px;border-radius:20px;background:var(--white); border:2px solid var(--ink);box-shadow:0 22px 44px -28px rgba(23,23,28,.5);transition:box-shadow .35s var(--ease),border-color .3s} .urlf .ic{width:46px;height:46px;border-radius:13px;background:var(--paper-2);display:grid;place-items:center;color:var(--ink-2);flex:none;transition:background .3s,color .3s} .urlf .ic .ico{width:20px;height:20px} .urlf input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font:600 18.5px var(--sans);color:var(--ink);padding:0 8px;caret-color:var(--coral)} .urlf input::placeholder{color:#A4A5AE;font-weight:500;font-size:var(--ph)} /* an example longer than its box (landing.js, fitHolder): the icon goes and the button tightens; --ph, if set, is the example's own smaller size (unset, it is the box's) */ .urlf.tight .ic{display:none} .urlf.tight .btn{padding:0 14px} .urlf.stack{flex-wrap:wrap;height:auto;padding:8px;gap:8px} .urlf.stack input{flex:1 0 100%;height:46px} .urlf.stack .btn{flex:1 0 100%;justify-content:center} .urlf .btn{height:54px;padding:0 22px;border-radius:13px;background:var(--coral-btn);color:#fff;box-shadow:none;font-size:16px} .urlf .btn:hover{transform:none;box-shadow:none;background:var(--coral-btn-hover)} .urlf .btn:active{transform:scale(.97)} .urlf:focus-within{box-shadow:0 0 0 6px rgba(241,92,62,.14),0 22px 44px -28px rgba(23,23,28,.5)} .urlf:focus-within .ic{background:rgba(241,92,62,.13);color:var(--coral-deep)} /* the address box rings itself while its words are typed; its button rings itself (until 9 Oct both lost their rings in here, and a tab to the button showed nothing) */ .urlf input:focus-visible{outline:none} /* typing in it: its own line grows thicker where it stands, with no second ring a gap away (Z, 10 Oct: the ring with a gap "weird with the shadow"); a clear outline stays for forced colours */ .urlf:has(input:focus-visible){outline:2px solid transparent;box-shadow:0 0 0 2px var(--focus,var(--ink)),0 0 0 8px rgba(241,92,62,.16),0 22px 44px -28px rgba(23,23,28,.5)} .cta .urlf:has(input:focus-visible){box-shadow:0 0 0 2px var(--ink),8px 8px 0 2px var(--ink)} .urlf .btn:focus-visible{outline:3px solid var(--focus,var(--ink));outline-offset:3px} /* Cloudflare's check, just under the form that was sent (flow/intake.js), and only while it needs the visitor */ .nw-ts{margin-top:14px;max-width:100%} .nw-ts[hidden]{display:none} .urlf-under{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:16px;font:600 14.5px var(--sans);color:var(--ink-2)} .urlf-under span{display:flex;align-items:center;gap:7px} .urlf-under .ico{width:16px;height:16px;color:#2F9E6B;stroke-width:2.8} .hero .urlf,.hero .urlf-under{opacity:0;animation:fade .9s var(--ease) .6s forwards} .hero .urlf-under{animation-delay:.72s} /* a business with no website yet starts from an idea (/idea/, decision 148): shown only where that page is offered (landing.php: .idea-on) */ /* "No website yet?" as a choice of its own under each address box (Z, 20 Oct: "we need to make this more prominent now"): the drawer's yellow slip, its bulb lighting up as it arrives and when pointed at. Where /idea/ is shut, the server takes the item out (neuwp_pages_unlink_shut) and the empty list takes no room. */ /* under each address box (Z, 20 Oct 17:43): its two promises one over the other, and beside them the way for a business with no website; one under the other where the row is too narrow for both */ .cta-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:16px} .hero .cta-more{max-width:580px} .cta-more>.urlf-under,.cta-more>.cb-under{flex-direction:column;align-items:flex-start;gap:6px;margin:0} /* beside the two lines the slip is a size smaller, so the two fit side by side wherever the form is about 500 px wide */ .cta-more{column-gap:16px} .cta-more>.urlf-under,.cta-more>.cb-under{font-size:14px} .cta-more .idea-slip{grid-template-columns:42px minmax(0,1fr) auto;column-gap:8px;padding:6px 13px 6px 5px} .cta-more .idea-slip .mm-ico{width:42px;height:32px} .cta-more .idea-slip b{font-size:12.5px} .cta-more .idea-slip span>span{font-size:15.5px} .idea-or{display:flex;list-style:none;margin:0;padding:0} .idea-or:empty{display:none} .idea-or li{display:flex;min-width:0} .idea-slip{box-shadow:0 1px 0 rgba(0,0,0,.05),0 10px 16px -14px rgba(60,48,28,.7)} .idea-slip:hover .mm-ico-idea .t-rays{animation:mm-flick 1.6s steps(2) both} .hero .idea-or{opacity:0;animation:fade .9s var(--ease) .84s forwards} .hero .idea-slip .mm-ico-idea .t-rays{animation:mm-flick 1.6s steps(2) 1.8s both} /* the band's and the last form's light up as they arrive, wherever nothing can point (a mouse points too) */ :is(.cta-band.in,.cta.in) .idea-slip .mm-ico-idea .t-rays{animation:mm-flick 1.6s steps(2) .9s both} /* notes with arrows, anywhere on the page */ .anote{position:absolute;z-index:12;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(6px) rotate(var(--rr,-1deg));transition:opacity .5s var(--ease),transform .6s var(--spring),color .3s} .anote.on{opacity:1;transform:rotate(var(--rr,-1deg))} /* a note's box has room round its letters, taken back by its margin so the words stay where they were: the glass's hole in a note (landing.js) is a mask, and a mask ends at the box, so a letter's ink above or below its line was cut off flat while the glass was near (a Bulgarian "д" in Caveat, Z, 16 Oct); the arrows start from the words, as before */ .anote{padding:8px 6px;margin:-8px -6px} .arrows{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:12} .arrows path{fill:none;stroke:var(--coral-line);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .arrows path.draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)} .arrows path.draw.on{transition:stroke-dashoffset .8s var(--ease) .15s;stroke-dashoffset:0} /* the sheet, the sketch, the pencil and the lens */ .sheet-wrap{position:relative;opacity:0;animation:sheet 1.1s var(--ease) .35s forwards} @keyframes sheet{from{opacity:0;transform:translateY(28px) rotate(2.4deg)}to{opacity:1;transform:none}} .paper{position:relative;background:var(--white);border-radius:5px;box-shadow:var(--paper-shadow)} .paper::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(170deg,rgba(255,255,255,0) 60%,rgba(60,48,28,.035))} .tape{position:absolute;z-index:4;width:118px;height:34px;background:rgba(255,214,102,.62);box-shadow:inset 0 0 0 1px rgba(190,140,20,.08);pointer-events:none; clip-path:polygon(0 8%,4% 0,9% 10%,14% 1%,20% 8%,26% 0,32% 9%,38% 1%,44% 8%,50% 0,56% 9%,62% 1%,68% 8%,74% 0,80% 9%,86% 1%,92% 8%,96% 0,100% 9%,100% 92%,96% 100%,91% 91%,86% 100%,80% 92%,74% 100%,68% 91%,62% 100%,56% 92%,50% 100%,44% 91%,38% 100%,32% 92%,26% 100%,20% 91%,14% 100%,9% 92%,4% 100%,0 91%)} .tape.pink{background:rgba(241,92,62,.32)} .sheet{padding:16px;transform:rotate(.7deg)} .sheet .tape.t1{left:-34px;top:14px;transform:rotate(-38deg)} .sheet .tape.t2{right:-34px;top:14px;transform:rotate(38deg)} .lensbox{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:3px;background:#FFFEFB} .fitc{position:absolute;left:0;top:0;width:1200px;height:750px;transform-origin:0 0;text-rendering:geometricPrecision} .site-base{visibility:hidden} .draft{position:absolute;inset:0;background:#FFFEFB} .draft::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:18px 18px} .sk{overflow:visible} .sk path{fill:none;stroke:var(--pencil);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .sk path.l{stroke-width:1.4;stroke-opacity:.6} .sk path.h{stroke-width:2.3;stroke-opacity:.82} .sk path.draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:skdraw var(--dur) cubic-bezier(.35,.15,.25,1) var(--d) both paused} .go .sk path.draw{animation-play-state:running} @keyframes skdraw{to{stroke-dashoffset:0}} .lens{position:absolute;left:0;top:0;z-index:8;pointer-events:none;opacity:0;transform:scale(.3) rotate(-30deg);transition:opacity .45s var(--ease),transform .9s var(--spring)} .lens.on{opacity:1;transform:none} .lens-in{position:relative;width:calc(var(--r) * 2);height:calc(var(--r) * 2);border-radius:50%;overflow:hidden;background:#fff;isolation:isolate; box-shadow:0 0 0 5px #fff,0 0 0 8px var(--ink),0 26px 44px -16px rgba(0,0,0,.5)} .lens-in .ds{position:absolute;left:0;top:0;transform-origin:0 0;visibility:visible;text-rendering:geometricPrecision} .lens-tapes{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;z-index:1;pointer-events:none} .lens-tapes .tape{position:absolute;z-index:auto} .lens-arrows{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;z-index:1;pointer-events:none} .lens-notes{position:absolute;left:0;top:0;transform-origin:0 0;z-index:1;pointer-events:none} .lens-notes .anote{transition:none} .lens-arrows path{fill:none;stroke:var(--coral-line);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .lens-in::after{content:"";position:absolute;inset:0;border-radius:50%;z-index:2;background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.55),rgba(255,255,255,0) 34%),radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 62%,rgba(0,0,0,.14))} .lens-handle{position:absolute;left:calc(var(--r) * 1.66);top:calc(var(--r) * 1.66);width:calc(var(--r) * .9);height:20px;margin-top:-10px;border-radius:10px;background:var(--ink);transform:rotate(45deg);transform-origin:0 50%;box-shadow:0 14px 20px -8px rgba(0,0,0,.4)} .lens-handle::after{content:"";position:absolute;right:6px;top:4px;bottom:4px;width:45%;border-radius:6px;background:var(--coral)} .hero .anote{font-size:clamp(17px,1.35vw,20px)} .n-nav{left:15%;top:-66px;--rr:-2deg} .n-photo{right:-1%;top:-72px;--rr:2deg} .n-hours{right:6%;bottom:-74px;--rr:-1.5deg} /* ---------------------------------------------------------------- sections */ .sec{position:relative;padding:calc(var(--gap) / 2) 0;overflow-x:clip} /* four steps */ .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:66px} .step{position:relative;display:flex;flex-direction:column;padding:22px 22px 18px;background:var(--white);border-radius:5px;box-shadow:var(--paper-shadow);transform:rotate(var(--r,0deg));transition:box-shadow .5s var(--ease);outline:none} .step:nth-child(1){--r:-1.2deg}.step:nth-child(2){--r:.9deg}.step:nth-child(3){--r:-.6deg}.step:nth-child(4){--r:1.2deg} .step:hover{box-shadow:0 1px 0 rgba(0,0,0,.04),0 40px 64px -40px rgba(60,48,28,.5),0 10px 22px -14px rgba(60,48,28,.24)} .step:focus-visible{box-shadow:0 0 0 3px var(--focus,var(--ink)),var(--paper-shadow)} .step .tape{left:50%;top:-15px;width:84px;height:28px;margin-left:-42px;transform:rotate(-2deg)} .step:nth-child(even) .tape{transform:rotate(3deg)} .step .art{position:relative;height:168px;margin:6px -4px 8px;border-radius:4px;background-image:linear-gradient(var(--grid-2) 1px,transparent 1px),linear-gradient(90deg,var(--grid-2) 1px,transparent 1px);background-size:16px 16px} .step .doo{width:100%;height:100%;overflow:visible} .step h3{display:flex;align-items:baseline;gap:9px;margin:8px 0 8px;font:800 23px/1.1 var(--sans);font-stretch:108%;letter-spacing:-.02em} .step h3 .num{flex:none;font:400 27px/1 var(--hand);letter-spacing:0;color:var(--coral-ink)} .step p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-2)} .step p{margin-bottom:18px} .step .who{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;border-top:1.5px dashed var(--line-2)} .step .by{font:400 16px/1 var(--hand);color:var(--coral-ink);white-space:nowrap} .step .time{display:inline-flex;align-items:center;gap:6px;font:600 13px var(--sans);color:var(--ink-2);text-align:right} .step .time .ico{width:15px;height:15px;color:var(--ink-3);flex:none} .doo .dr{fill:none;stroke:var(--ink);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round} .doo circle.dr{fill:none} .doo .th{stroke-width:1.5} .doo .hv{stroke-width:4.8} .doo .c{stroke:var(--coral)} .doo .fy{fill:var(--yellow);opacity:.8} .doo .fc{fill:var(--coral);opacity:.9} .doo .mk{font:400 30px var(--hand);fill:var(--ink)} .doo .mk.q{font-size:40px;fill:var(--coral-ink)} .doo .dash{fill:none;stroke-dasharray:4 7} .draw-me .dr{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)} .draw-me.in .dr{transition:stroke-dashoffset 1.1s var(--ease) var(--d,0s);stroke-dashoffset:0} .draw-me .fy,.draw-me .fc,.draw-me .mk{opacity:0;transition:opacity .6s var(--ease) .7s} .draw-me.in .fy{opacity:.8}.draw-me.in .fc{opacity:.9}.draw-me.in .mk{opacity:1} .doo g{transform-box:fill-box} /* step one: the pointer clicks, the button pops */ .s1 .cur{transform-origin:0 0} .s1 .go{transform-origin:center} .s1 .spk .dr{stroke-dasharray:14;stroke-dashoffset:14} .step.s1:hover .cur,.step.s1:focus-visible .cur,.step.s1.play .cur{animation:s1cur 1.5s var(--ease) forwards} .step.s1:hover .go,.step.s1:focus-visible .go,.step.s1.play .go{animation:s1go 1.5s var(--ease) forwards} .step.s1:hover .spk .dr,.step.s1:focus-visible .spk .dr,.step.s1.play .spk .dr{animation:s1spk .5s var(--ease) .78s forwards} .step.s1:hover .ty,.step.s1:focus-visible .ty,.step.s1.play .ty{animation:s1type .9s steps(9) forwards} @keyframes s1cur{0%{transform:none}45%,62%{transform:translate(46px,-33px)}52%{transform:translate(46px,-33px) scale(.84)}100%{transform:translate(46px,-33px)}} @keyframes s1go{0%,48%{transform:none}54%{transform:scale(.86)}66%{transform:scale(1.12)}80%,100%{transform:none}} @keyframes s1spk{to{stroke-dashoffset:0}} @keyframes s1type{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}} /* step two: the glass sweeps, the lines light up */ .s2 .glass{transform-origin:center} .s2 .hi{fill:var(--yellow);opacity:.75;transform:scaleX(0);transform-origin:0 50%;transform-box:fill-box;transition:transform .5s var(--ease)} .step.s2:hover .glass,.step.s2:focus-visible .glass,.step.s2.play .glass{animation:s2sweep 2.4s ease-in-out infinite} .step.s2:hover .hi,.step.s2:focus-visible .hi,.step.s2.play .hi{transform:scaleX(1)} .s2 .hi1{transition-delay:.12s}.s2 .hi2{transition-delay:.24s}.s2 .hi3{transition-delay:.36s}.s2 .hi4{transition-delay:.48s} @keyframes s2sweep{0%,100%{transform:none}50%{transform:translate(-62px,8px) rotate(-8deg)}} /* step three: the pencil scribbles, the blocks fill in */ .s3 .blk{fill:var(--coral);opacity:0;transform:scale(.4);transform-origin:center;transform-box:fill-box;transition:opacity .3s,transform .55s var(--spring)} .s3 .b2,.s3 .b4{fill:var(--yellow)} .s3 .x{transition:opacity .3s} .step.s3:hover .blk,.step.s3:focus-visible .blk,.step.s3.play .blk{opacity:.9;transform:none} .step.s3:hover .x,.step.s3:focus-visible .x,.step.s3.play .x{opacity:0} .s3 .draw-me.in .pic .dr{stroke-dashoffset:var(--len);transition:stroke-dashoffset .3s var(--ease)} .step.s3:hover .draw-me.in .pic .dr,.step.s3:focus-visible .draw-me.in .pic .dr,.step.s3.play .draw-me.in .pic .dr{stroke-dashoffset:0;transition:stroke-dashoffset var(--pt,.7s) cubic-bezier(.45,.05,.25,1) var(--pd,.5s)} .s3 .spk3 .dr{stroke-dasharray:14;stroke-dashoffset:14;transition:stroke-dashoffset .2s} .step.s3:hover .spk3 .dr,.step.s3:focus-visible .spk3 .dr,.step.s3.play .spk3 .dr{stroke-dashoffset:0;transition:stroke-dashoffset .35s var(--ease) .9s} .s3 .b2{transition-delay:.12s}.s3 .b3{transition-delay:.24s}.s3 .b4{transition-delay:.36s}.s3 .b5{transition-delay:.48s} /* step four: the envelope drops a little, the flap opens behind it, the letter slides out; and back in reverse */ .s4 .env{transition:transform .4s var(--ease) .3s} .s4 .flap-o{transform-origin:50% 100%;transform:scaleY(0);opacity:0;transition:transform .2s ease-in .15s,opacity 0s .35s} .s4 .letter{transition:transform .35s var(--ease)} .step.s4:hover .env,.step.s4:focus-visible .env,.step.s4.play .env{transform:translateY(14px);transition-delay:0s} .step.s4:hover .flap-o,.step.s4:focus-visible .flap-o,.step.s4.play .flap-o{transform:none;opacity:1;transition:transform .28s ease-out .25s,opacity 0s .25s} .step.s4:hover .letter,.step.s4:focus-visible .letter,.step.s4.play .letter{transform:translateY(-44px);transition:transform .6s var(--ease) .45s} .doo .perf{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-dasharray:2 2.2} .doo .wh{stroke:#fff} .draw-me .perf{opacity:0;transition:opacity .6s var(--ease) .7s} .draw-me.in .perf{opacity:1} /* all yours to change */ /* the board is taped down: it stays where it is while the list beside it opens and shuts */ .yours-grid{display:grid;grid-template-columns:minmax(0,4.3fr) minmax(0,7.7fr);gap:clamp(30px,5vw,84px);align-items:start} .yours h2{white-space:normal} .checks{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:6px;counter-reset:c} .checks button{all:unset;box-sizing:border-box;position:relative;width:100%;display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;padding:12px 16px 12px 12px;border-radius:14px;cursor:pointer;transition:background .35s var(--ease),box-shadow .35s var(--ease)} .checks button:focus-visible{outline:3px solid var(--focus,var(--ink));outline-offset:2px} .checks .tbox{width:30px;height:30px;overflow:visible} .checks .bx{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round} .checks .tk{fill:none;stroke:var(--coral);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:44;stroke-dashoffset:44;transition:stroke-dashoffset .45s var(--ease)} .checks li.done .tk{stroke-dashoffset:0} .checks .t{padding-top:3px} .checks .t b{position:relative;z-index:0;display:inline-block;font:700 18.5px/1.25 var(--sans);letter-spacing:-.01em;color:var(--ink-2);transition:color .3s} .checks .t b::before{content:"";position:absolute;z-index:-1;left:-.2em;right:-.2em;top:.55em;bottom:-.05em;background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M5%2C9%20C40%2C4%2090%2C7%20140%2C5%20C165%2C4%20185%2C6%20197%2C8%20L195%2C33%20C160%2C37%20120%2C34%2080%2C36%20C50%2C37%2025%2C35%203%2C34%20Z%22%20fill%3D%22%23FFD24A%22%2F%3E%3C%2Fsvg%3E) center/100% 100% no-repeat;opacity:.85;clip-path:inset(0 100% 0 0);transition:clip-path .6s var(--ease)} .checks .t em{display:grid;grid-template-rows:0fr;opacity:0;font-style:normal;font-size:15.5px;line-height:1.5;color:var(--ink-2);transition:grid-template-rows .45s var(--ease),opacity .35s,margin .45s var(--ease)} .checks .t em>span{overflow:hidden} .checks li.done .t b,.checks li.on .t b{color:var(--ink)} .checks li.on button{background:var(--white);box-shadow:0 18px 36px -24px rgba(60,48,28,.55),0 0 0 1px var(--line)} .checks li.on .t b::before{clip-path:inset(0 0 0 0)} .checks li.on .t em{grid-template-rows:1fr;opacity:1;margin-top:4px} .board-wrap{position:relative;padding:56px 0 64px} .board{padding:14px;transform:rotate(-.5deg)} .board .tape.t1{left:-30px;top:10px;transform:rotate(-36deg)} .board .tape.t2{right:-30px;top:10px;transform:rotate(36deg)} .bview{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:3px;background:#fff} .ov{pointer-events:none} .ov-spot{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:20px;box-shadow:0 0 0 2400px rgba(252,251,247,.5);opacity:0;transition:left .7s var(--ease),top .7s var(--ease),width .7s var(--ease),height .7s var(--ease),opacity .5s} .ov-spot.on{opacity:1} .ov-spot::after{content:"";position:absolute;inset:-6px;border-radius:24px;border:3px dashed var(--coral);opacity:.9} .ov-edit{position:absolute;opacity:0;transition:opacity .3s} .ov-edit.on{opacity:1} .ov-edit .ol{position:absolute;inset:-10px;border:3px solid #3858E9;border-radius:3px} .ov-edit .tb{position:absolute;left:-10px;top:-72px;display:flex;align-items:center;height:50px;border-radius:4px;background:#fff;box-shadow:0 0 0 1.5px #1E1E1E,0 10px 20px -10px rgba(0,0,0,.4);font:600 17px 'Geist',sans-serif;color:#1E1E1E} .ov-edit .tb span{display:grid;place-items:center;min-width:50px;height:100%;padding:0 12px;border-right:1px solid #E0E0E0} .ov-edit .tb span:last-child{border-right:0} .ov-edit .tb .ico{width:22px;height:22px} .ov-caret{display:inline-block;width:5px;height:.82em;margin-left:4px;vertical-align:-.04em;background:#3858E9;animation:blink 1s steps(1) infinite} @keyframes blink{50%{opacity:0}} .ov-replace{position:absolute;display:flex;align-items:center;gap:12px;height:62px;padding:0 24px;border-radius:14px;background:#fff;box-shadow:0 20px 40px -18px rgba(0,0,0,.5);font:600 20px 'Geist',sans-serif;color:#1E1E1E;opacity:0;transform:translateY(10px) scale(.94);transition:opacity .35s,transform .5s var(--spring)} .ov-replace .ico{width:26px;height:26px;color:#3858E9} .ov-replace.on{opacity:1;transform:none} .ov-chat{position:absolute;right:36px;bottom:34px;width:430px;display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(16px);transition:opacity .4s,transform .6s var(--spring)} .ov-chat.on{opacity:1;transform:none} .ov-chat .me{align-self:flex-end;padding:16px 22px;border-radius:22px 22px 6px 22px;background:#17171C;color:#fff;font:600 21px 'Geist',sans-serif} .ov-chat .ai{padding:18px 22px;border-radius:22px 22px 22px 6px;background:#fff;box-shadow:0 24px 44px -20px rgba(0,0,0,.45);font:500 19px/1.45 'Geist',sans-serif;color:#2A2A30} .ov-chat .say{display:block;text-wrap:balance} .ov-chat .ai b{display:flex;align-items:center;gap:8px;margin-bottom:6px;font:700 16px 'Geist',sans-serif;color:var(--coral-deep)} .ov-chat .ai b svg{width:18px;height:18px} .ov-chat .ok{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:6px 12px;border-radius:99px;background:#E4F5EA;color:#1E7A45;font:600 15px 'Geist',sans-serif} .ov-chat .ok .ico{width:17px;height:17px;stroke-width:2.8} .ov-pages{position:absolute;inset:0} .ov-pages::before{content:"";position:absolute;inset:0;background:rgba(246,238,226,.8);opacity:0;transition:opacity .5s} .ov-pages.on::before{opacity:1} .ov-pg{position:absolute;left:0;top:0;width:360px;height:225px;border-radius:9px;overflow:hidden;background:#F6EEE2;box-shadow:0 0 0 6px #fff,0 0 0 7px rgba(46,28,18,.1),0 30px 50px -18px rgba(58,36,25,.6);opacity:0;transform:translate(calc(var(--x) + 30px),calc(var(--y) + 70px)) rotate(calc(var(--r) * 3)) scale(.84);transition:opacity .4s var(--ease) var(--d),transform .8s var(--spring) var(--d)} .ov-pages.on .ov-pg{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r))} .ov-pg .ds{transform:scale(.3);transform-origin:0 0} .ov-chat .me{background:#3858E9} .ov-team{position:absolute;right:40px;bottom:36px;width:440px;padding:22px 24px 24px;border-radius:22px 22px 6px 22px;background:#fff;box-shadow:0 26px 46px -18px rgba(0,0,0,.5);font:500 19px/1.45 'Geist',sans-serif;color:#2A2A30;opacity:0;transform:translateY(16px);transition:opacity .4s,transform .6s var(--spring)} .ov-team.on{opacity:1;transform:none} .ov-team .who{display:flex;align-items:center;gap:12px;margin-bottom:12px} .ov-team .av{width:46px;height:46px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;flex:none} .ov-team .av svg{width:24px;height:24px} .ov-team .who b{display:block;font:700 18px/1.2 'Geist',sans-serif;color:#17171C} .ov-team .who small{display:block;font:500 14.5px/1.3 'Geist',sans-serif;color:#696B75} .ov-team p{margin:0;text-wrap:balance} .ov-team .go{display:inline-flex;align-items:center;height:44px;margin-top:16px;padding:0 20px;border-radius:99px;background:#17171C;color:#fff;font:700 16px 'Geist',sans-serif} @keyframes spin{to{transform:rotate(-360deg)}} .bview .ds-lr .lr-h .lr-ht em{transition:color .9s} .callout{font-size:clamp(18px,1.5vw,22px)} .co1{left:4%;top:0;--rr:-2deg} .co2{right:14%;top:2px;--rr:2deg} .co3{right:-2%;bottom:6px;--rr:-1.5deg} .co4{left:30%;top:4px;--rr:-1deg} .co5{left:6%;bottom:8px;--rr:1.5deg} /* trades */ .tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 34px;margin-top:70px} .tcard{margin:0;cursor:zoom-in;outline:none} .tcard .paper{padding:10px;transform:rotate(var(--r,0deg));transition:transform .55s var(--spring),box-shadow .5s} .tcard:nth-child(1){--r:-1deg}.tcard:nth-child(2){--r:.8deg}.tcard:nth-child(3){--r:-.5deg}.tcard:nth-child(4){--r:.7deg}.tcard:nth-child(5){--r:-.9deg}.tcard:nth-child(6){--r:.5deg} .tcard:hover .paper,.tcard:focus-visible .paper{transform:rotate(0) translateY(-8px)} .tcard:focus-visible .paper{box-shadow:0 0 0 3px var(--focus,var(--ink)),var(--paper-shadow)} .tcard .tape{left:50%;top:-14px;width:92px;height:28px;margin-left:-46px;transform:rotate(-3deg)} .tcard:nth-child(even) .tape{transform:rotate(4deg);background:rgba(241,92,62,.3)} .tview{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:3px;background:#fff} .tview .draft{clip-path:inset(0 0 0 0);transition:clip-path 1.2s var(--ease-io)} .tcard.real .tview .draft{clip-path:inset(0 0 0 100%)} .tcard.real.xr .tview .draft{clip-path:circle(var(--xr,0px) at var(--x,50%) var(--y,50%));transition:none} .tview .wiper{position:absolute;top:-2px;bottom:-2px;left:0;width:3px;margin-left:-1.5px;z-index:3;background:var(--coral);box-shadow:0 0 14px rgba(241,92,62,.55);opacity:0;pointer-events:none} .tcard.real .wiper{animation:wipe 1.2s var(--ease-io)} @keyframes wipe{0%{left:0;opacity:1}88%{opacity:1}100%{left:100%;opacity:0}} .tview .xring{position:absolute;left:0;top:0;z-index:4;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .25s} .tcard.xr .xring{opacity:1} .tview .xring::before{content:"";position:absolute;left:calc(var(--xr,0px) * -1);top:calc(var(--xr,0px) * -1);width:calc(var(--xr,0px) * 2);height:calc(var(--xr,0px) * 2);border-radius:50%;box-shadow:0 0 0 2px var(--ink),0 10px 20px -8px rgba(0,0,0,.4)} .tcard figcaption{display:flex;align-items:baseline;gap:10px;margin-top:18px;padding:0 6px} .tcard figcaption b{font:800 19px/1.1 var(--sans);font-stretch:108%;letter-spacing:-.01em} .tcard figcaption .note{font-size:17px} .tcard figcaption .open{align-self:center;margin-left:auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink-2);transition:background .3s,color .3s,transform .4s var(--spring)} .tcard figcaption .open .ico{width:16px;height:16px} .tcard:hover figcaption .open{background:var(--ink);color:#fff;transform:rotate(-8deg) scale(1.06)} .tgrid-hint{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:44px;color:var(--ink-3);font:600 14.5px var(--sans)} .tgrid-hint .ico{width:17px;height:17px} /* the big view of one example */ .lb{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;padding:18px clamp(12px,3vw,40px) 24px;background:rgba(245,241,232,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s} .lb.on{opacity:1;visibility:visible;transition:opacity .35s} .lb-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:1240px;width:100%;margin:0 auto} .lb-top b{font:800 22px var(--sans);font-stretch:108%} .lb-top .note{font-size:19px} .seg{display:flex;gap:4px;margin-left:auto;padding:4px;border-radius:14px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line-2)} .seg button{all:unset;cursor:pointer;height:40px;padding:0 16px;border-radius:10px;font:700 14.5px var(--sans);color:var(--ink-2)} .seg button[aria-pressed="true"]{background:var(--ink);color:#fff} .seg button:focus-visible{outline:3px solid var(--focus,var(--ink))} .lb-x{all:unset;cursor:pointer;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line-2)} .lb-x:focus-visible{outline:3px solid var(--focus,var(--ink))} .lb-x .ico{width:20px;height:20px} .lb-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px} .lb-nav{all:unset;cursor:pointer;flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;box-shadow:3px 3px 0 var(--coral)} .lb-nav:focus-visible{outline:3px solid var(--focus,var(--ink));outline-offset:3px} .lb-nav .ico{width:22px;height:22px} .lb-paper{padding:12px;flex:none} .lb-view{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:3px;background:#fff;max-height:calc(100vh - 170px);margin:0 auto} .lb-view .draft{clip-path:inset(0 0 0 100%);transition:clip-path .9s var(--ease-io)} .lb.sketch .lb-view .draft{clip-path:inset(0 0 0 0)} /* the fine print, on a receipt */ .fine-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,90px);align-items:center} .fine-copy .sub{max-width:34ch} .fine-list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px} .fine-list li{display:flex;gap:12px;align-items:flex-start;font:600 17px/1.4 var(--sans)} .fine-list li .tbox{width:26px;height:26px;flex:none;margin-top:-3px;overflow:visible} .fine-list .bx{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round} .fine-list .tk{fill:none;stroke:var(--coral);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:44;stroke-dashoffset:44;transition:stroke-dashoffset .5s var(--ease)} .fine-list.in .tk{stroke-dashoffset:0} .fine-list li:nth-child(2) .tk{transition-delay:.15s}.fine-list li:nth-child(3) .tk{transition-delay:.3s}.fine-list li:nth-child(4) .tk{transition-delay:.45s} .receipt-wrap{position:relative;display:flex;flex-direction:column;align-items:center} /* The printer, third try (Z, 5 October: a dark bar "did not fit", a pencil drawing was "too comic-y"): a light body in the receipt's own manner, paper tones, a soft shadow and a slot. The paper comes out of the slot and hangs in front of the body, so the receipt's box begins at the slot's middle and lies over the printer. */ .receipt-wrap{--slot:50px} .printer{position:relative;z-index:1;flex:none;width:min(404px,100%);height:76px;border-radius:22px 22px 18px 18px; background:linear-gradient(180deg,#F8F5EE 0%,#EDE7DA 50%,#DFD7C6 100%); box-shadow:inset 0 1.5px 0 #fff,inset 0 -5px 0 rgba(110,90,60,.16),0 0 0 1px rgba(23,23,28,.13),0 26px 34px -20px rgba(60,48,28,.55)} .printer::before{content:"";position:absolute;left:24px;top:18px;width:44px;height:4px;border-radius:2px;background:rgba(23,23,28,.2);box-shadow:0 9px 0 rgba(23,23,28,.2)} .pr-slot{position:absolute;left:20px;right:20px;top:calc(var(--slot) - 5px);height:10px;border-radius:5px;background:#1B1B20;box-shadow:inset 0 2px 3px #000,0 1px 0 rgba(255,255,255,.95)} .pr-led{position:absolute;right:26px;top:19px;width:8px;height:8px;border-radius:50%;background:#37C27C;box-shadow:0 0 0 3px rgba(55,194,124,.2)} .fine.in .pr-led{animation:prled .45s steps(2,jump-none) 6} @keyframes prled{50%{opacity:.25}} .rcpt-clip{position:relative;z-index:2;width:min(340px,calc(100% - 64px));margin-top:calc(var(--slot) - 76px);padding:0 0 26px;overflow:hidden} .rcpt-clip::before{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:18px;background:linear-gradient(rgba(23,23,28,.26),rgba(23,23,28,0));pointer-events:none} .receipt{position:relative;padding:34px 26px 30px;background:#fff;font:500 14px/1.55 var(--mono);color:#2B2B31;box-shadow:0 20px 30px -24px rgba(0,0,0,.35); transform:translateY(-101%);transition:transform 2.6s cubic-bezier(.35,.1,.3,1)} .receipt::after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:12px;background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2212%22%20viewBox%3D%220%200%2014%2012%22%3E%3Cpath%20d%3D%22M0%2C0%20H14%20L7%2C11%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E) left top/14px 12px repeat-x} .fine.in .receipt{transform:none} .receipt .c{text-align:center} /* a receipt printer has one ink (Z, 5 October) */ .receipt .brand{display:block;margin:0 auto 4px;width:150px;filter:grayscale(1) contrast(1.6) brightness(.82)} .receipt .muted{color:#7B7D87} .receipt hr{border:0;border-top:1.5px dashed #C9CACF;margin:14px 0} .receipt .row{display:flex;align-items:baseline;gap:8px} .receipt .row i{flex:1;border-bottom:1.5px dotted #B8B9C0;transform:translateY(-4px)} .receipt .tot{position:relative;margin-top:4px;font:700 20px/1.3 var(--mono)} .receipt .tot .free{position:relative} .receipt .tot svg{position:absolute;left:-14px;top:-10px;width:calc(100% + 28px);height:calc(100% + 20px);overflow:visible} .receipt .tot svg path{fill:none;stroke:var(--coral);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset .9s var(--ease) 2.7s} .fine.in .receipt .tot svg path{stroke-dashoffset:0} .receipt .bar{display:block;width:100%;height:44px;margin:16px 0 6px;fill:#2B2B31} .receipt .ty{margin-top:10px;font:700 15px var(--mono);letter-spacing:.3em} .r-note{left:calc(50% + 188px);top:61%;width:calc(6.5em + 12px);white-space:normal;--rr:4deg} /* questions: index cards that turn over */ .qgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 26px;margin-top:64px} .qcell{display:flex;transform:rotate(var(--r,0deg))} .qcard{position:relative;flex:1;display:flex;perspective:1400px;cursor:pointer;-webkit-tap-highlight-color:transparent} .qin{position:relative;flex:1;display:grid;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,.7,.2,1)} .qcard.open .qin{transform:rotateY(180deg)} .qcard.peek .qin{animation:peek 1.2s var(--ease)} @keyframes peek{35%{transform:rotateY(-26deg)}70%{transform:rotateY(5deg)}} .qf,.qb{grid-area:1/1;position:relative;display:flex;flex-direction:column;min-width:0;border-radius:6px;background:#fff;box-shadow:var(--paper-shadow);backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:box-shadow .45s var(--ease)} .qf{padding:16px 18px 22px} .qb{transform:rotateY(180deg);padding:14px 20px 18px;background:#FFFEFB} .qcard:hover .qf,.qcard:hover .qb{box-shadow:0 1px 0 rgba(0,0,0,.04),0 36px 60px -38px rgba(60,48,28,.5),0 10px 20px -14px rgba(60,48,28,.22)} .qcard:has(.qbtn:focus-visible) .qf,.qcard:has(.qbtn:focus-visible) .qb{box-shadow:0 0 0 3px var(--focus,var(--ink)),var(--paper-shadow)} .qd{height:124px;margin:0 -4px 12px;border-radius:4px;background-image:linear-gradient(var(--grid-2) 1px,transparent 1px),linear-gradient(90deg,var(--grid-2) 1px,transparent 1px);background-size:16px 16px} .qd .doo{width:100%;height:100%} .qn{font:400 19px/1 var(--hand);color:var(--coral-ink)} .qf h3{--fit-edge:content;margin:7px 0 0;padding-right:40px;font:800 19.5px/1.2 var(--sans);font-stretch:106%;letter-spacing:-.015em;color:var(--ink)} .qbtn{all:unset;cursor:pointer} .qturn{position:absolute;right:14px;bottom:14px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink-2);transition:transform .6s var(--ease),background .3s,color .3s} .qturn .ico{width:15px;height:15px} .qcard:hover .qturn{background:var(--ink);color:#fff;transform:rotate(-180deg)} .qbq{display:block;margin:0 -20px;padding:0 20px 9px;border-bottom:1.5px solid rgba(224,86,74,.75);font:700 13.5px/1.35 var(--sans);color:var(--ink-3)} .qb p{flex:1;margin:0;padding:6px 0 40px;font:400 15.5px/26px var(--sans);color:var(--ink); background-image:repeating-linear-gradient(to bottom,transparent 0 23px,rgba(61,109,242,.2) 23px 24px,transparent 24px 26px);background-position:0 6px} /* a link in an answer (07: the pricing page), in the words' own coral, underlined */ .qb p a{color:var(--coral-ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px} .qb p a:hover{color:var(--ink)} /* the eighth card: a postcard with our address */ .ask-card{position:relative;flex:1;padding:30px 22px 64px;background:var(--white);border-radius:6px;box-shadow:var(--paper-shadow); background-image:repeating-linear-gradient(135deg,var(--coral) 0 10px,transparent 10px 20px,#3D6DF2 20px 30px,transparent 30px 40px);background-size:100% 6px;background-repeat:no-repeat} .ask-card p{margin:0;max-width:11.5em;padding-right:82px;box-sizing:content-box;font:600 16px/1.45 var(--sans);color:var(--ink-2)} @media (max-width:1280px){.ask-card p{max-width:none}} .ask-card a{display:inline-block;margin-top:30px;font:800 clamp(20px,1.75vw,24px)/1.2 var(--sans);font-stretch:106%;letter-spacing:-.01em;color:var(--ink);text-decoration:none;background:linear-gradient(var(--yellow),var(--yellow)) left 88%/0 36% no-repeat;transition:background-size .5s var(--ease)} .ask-card a:hover{background-size:100% 36%} .ask-lines{display:grid;gap:16px;margin-top:8px} .ask-lines i{display:block;border-top:1.5px dashed var(--line-2)} .stamp{position:absolute;right:18px;top:24px;width:58px;height:69px;transform:rotate(4deg);filter:drop-shadow(0 4px 6px rgba(60,48,28,.22))} .stamp svg{width:100%;height:100%;overflow:visible} .qcell.in .stamp{animation:thump .55s var(--spring) .7s both} @keyframes thump{from{opacity:0;transform:rotate(-10deg) scale(1.6)}to{opacity:1;transform:rotate(4deg)}} .mail-note{left:22px;bottom:18px;--rr:-2deg} /* your turn: one coral card, printed with the same grid */ .end{padding:calc(var(--gap) / 2) 0 calc(var(--gap) * .8);overflow-x:clip} .cta{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(30px,4.5vw,72px);align-items:center; padding:clamp(60px,9vh,96px) clamp(26px,5.5vw,80px);border-radius:32px;color:var(--ink);background-color:#F27056; background-image:radial-gradient(80% 110% at 0% 0%,rgba(255,190,165,.4),rgba(255,190,165,0) 62%),linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px); background-size:100% 100%,24px 24px,24px 24px;background-position:0 0,-1px -1px,-1px -1px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 50px 90px -60px rgba(160,40,15,.75)} .cta .kick{color:var(--ink)} .cta h2{font-size:clamp(2.6rem,5vw,5rem)} .cta .sub{color:var(--ink)} .cta .urlf{max-width:560px;border-color:var(--ink);box-shadow:6px 6px 0 var(--ink);transition:transform .25s var(--ease),box-shadow .25s var(--ease)} .cta .urlf .ic{background:#FCE4DD;color:var(--coral-deep)} .cta .urlf .btn{background:var(--ink);color:#fff} .cta .urlf .btn:hover{background:#2E2E36} .cta .urlf:focus-within{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)} .cta .urlf:focus-within .ic{background:#FCE4DD;color:var(--coral-deep)} .cta .urlf-under{color:var(--ink)} .cta .urlf-under .ico{color:var(--ink)} .cta .arrows path{stroke:var(--ink)} /* the arrow leaves the field above what is typed and lands by the name it writes */ .cta-from{position:absolute;right:9%;top:-12px;width:2px;height:2px;pointer-events:none} /* A whole address is in the field: the sketch is only a sketch, so a button lies over it, and pencil marks flicker round the form's own button (Z, 6 October: the changing layouts "looked like a loading screen", and he waited for more) */ .cta-rays{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none} .cta-rays path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);opacity:0} .cta.press .cta-rays path{animation:ray 2.2s var(--ease) var(--d,0s) infinite} @keyframes ray{0%{stroke-dashoffset:var(--len);opacity:1}16%,58%{stroke-dashoffset:0;opacity:1}76%,100%{stroke-dashoffset:0;opacity:0}} .cta.press .urlf .btn{animation:hey 2.2s var(--ease) .35s infinite} .cta.press .urlf .btn:hover,.cta.press .urlf .btn:focus-visible{animation:none} .cta.press .urlf .btn .ico{animation:nudge 1.1s var(--ease) infinite} @keyframes hey{0%,70%,100%{transform:none}76%{transform:rotate(-2.2deg) scale(1.045)}84%{transform:rotate(2deg) scale(1.045)}92%{transform:rotate(-1deg) scale(1.01)}} @keyframes nudge{0%,100%{transform:none}50%{transform:translateX(4px)}} .mini::after{content:"";position:absolute;left:12px;right:12px;top:44px;bottom:12px;z-index:2;border-radius:0 0 5px 5px;background:rgba(255,254,251,.56);opacity:0;pointer-events:none;transition:opacity .4s var(--ease)} .cta.press .mini::after{opacity:1} .mini-go{position:absolute;left:50%;top:calc(50% + 4px);z-index:3;height:56px;padding:0 24px;font-size:17px;white-space:nowrap;background:var(--coral-btn);color:#fff;box-shadow:5px 5px 0 var(--ink); opacity:0;visibility:hidden;transform:translate(-50%,-50%) rotate(-2deg) scale(.7);transition:opacity .25s var(--ease),transform .5s var(--spring),visibility 0s .25s,background .2s,box-shadow .2s} .cta.press .mini-go{opacity:1;visibility:visible;transform:translate(-50%,-50%) rotate(-2deg);transition:opacity .25s var(--ease),transform .5s var(--spring),background .2s,box-shadow .2s} .cta.press .mini-go:hover{background:var(--coral-btn-hover);transform:translate(calc(-50% - 1px),calc(-50% - 1px)) rotate(-2deg);box-shadow:6px 6px 0 var(--ink)} .cta.press .mini-go:active{transform:translate(calc(-50% + 3px),calc(-50% + 3px)) rotate(-2deg);box-shadow:2px 2px 0 var(--ink)} @media (max-width:1040px){.cta .arrows{display:none}} .mini{position:relative;padding:12px;background:var(--white);border-radius:6px;transform:rotate(1.4deg);box-shadow:0 1px 0 rgba(0,0,0,.05),0 40px 60px -34px rgba(110,25,5,.7),0 10px 20px -12px rgba(110,25,5,.35)} .mini .tape{left:-26px;top:6px;width:90px;height:28px;transform:rotate(-34deg)} .mini-bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:5px 5px 0 0;background:var(--paper-2)} .mini-bar i{width:9px;height:9px;border-radius:50%;background:#D8D2C6} .mini-bar span{margin:0 auto;display:flex;align-items:center;gap:6px;height:22px;padding:0 12px;border-radius:6px;background:var(--white);font:500 12px var(--mono);color:var(--ink-2);max-width:78%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .mini-bar span .ico{width:12px;height:12px;color:#2F9E6B} .mini-page{position:relative;aspect-ratio:320/214;border:1.5px solid var(--line);border-top:0;border-radius:0 0 5px 5px;background:#FFFEFB} .mini-sk{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .mini-sk .dr{fill:none;stroke:var(--pencil);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len)} .mini-sk .th{stroke-width:1.3;stroke-opacity:.8} .mini-sk .wh{stroke:#fff;stroke-opacity:.95} .mini-sk .tint{fill:var(--their,transparent);opacity:.88} /* each layout is drawn stroke after stroke, quickly: somebody trying one arrangement, then another */ .mini-sk.go .dr{stroke-dashoffset:0;transition:stroke-dashoffset .5s var(--ease) var(--d,0s)} .mini-name{position:absolute;left:6.25%;top:24.3%;width:43.75%;height:26%;display:block;font:400 clamp(20px,2.4vw,34px)/1.02 var(--hand);color:var(--ink);overflow-wrap:normal; clip-path:inset(-20% 100% -20% 0);transition:clip-path .9s var(--ease) 1.4s,left .55s var(--spring),top .55s var(--spring)} /* (their widths change at once: the words are fitted to the box by measuring it, and a width on its way gives the wrong measure) */ .cta.in .mini-name{clip-path:inset(-20% -10% -20% -10%)} /* their color, as a stroke of marker under their name */ .mini.theirs .mini-name>span{background:linear-gradient(transparent 58%,color-mix(in srgb,var(--their,transparent) 42%,transparent) 58%,color-mix(in srgb,var(--their,transparent) 42%,transparent) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .12em;margin:0 -.12em} .mini-name.pop{animation:pop .45s var(--spring)} /* what their website says of itself, in pencil where the scribbled lines were */ .mini-say{position:absolute;display:block;overflow:hidden;font:400 clamp(8.5px,.82vw,11.5px)/1.28 var(--hand);color:var(--pencil);opacity:0;transition:opacity .4s var(--ease) .2s,left .55s var(--spring),top .55s var(--spring)} .mini-say.on{opacity:1} /* their own picture, turned into a pencil drawing: the picture in grey, and over it its own negative, blurred, which leaves only the edges (the old darkroom trick); then laid on the paper so white is paper */ .mini-logo{position:absolute;display:block;overflow:hidden;border-radius:50%;background:#fff;opacity:0;box-shadow:0 0 0 1.5px var(--pencil);transition:opacity .4s var(--ease),left .55s var(--spring),top .55s var(--spring)} .mini-logo.on{opacity:1} .mini-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)} /* the note under it says what it is doing */ .cta .anno{padding-bottom:26px} .mini-note{position:absolute;left:8%;top:calc(100% + 16px);font-size:clamp(16px,1.35vw,20px);color:var(--ink);transform:rotate(-2deg);white-space:nowrap;transition:opacity .3s} .mini-note.try::after,.mini-note.read::after{content:"...";display:inline-block;width:1.2em;text-align:left;animation:dots 1.1s steps(4,end) infinite;overflow:hidden;vertical-align:bottom;white-space:nowrap} @keyframes dots{from{width:0}to{width:1.2em}} @keyframes pop{from{transform:scale(.9) rotate(-2deg)}to{transform:none}} /* the foot of the page: the next sheet of the sketchbook, torn along its top edge */ .foot{position:relative;margin-top:10px;isolation:isolate} /* the shadow is the torn edge's alone, a strip nothing else touches: as a filter over the whole footer it was worked out again for every frame anything in it moved (a tool card, a link's line), and a pointer on them lagged (20 Oct) */ .foot::before{content:"";position:absolute;left:0;right:0;top:0;height:28px;z-index:-1;pointer-events:none;background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221440%22%20height%3D%2228%22%20viewBox%3D%220%200%201440%2028%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C28%20L0.0%2C16.6%20L14.8%2C14.7%20L24.5%2C10.0%20L31.6%2C10.8%20L41.6%2C5.5%20L54.4%2C13.1%20L67.5%2C9.5%20L81.1%2C14.3%20L92.9%2C11.9%20L106.3%2C13.6%20L118.6%2C9.7%20L128.8%2C13.7%20L138.7%2C10.5%20L145.7%2C15.5%20L152.8%2C5.8%20L158.2%2C13.6%20L172.3%2C12.0%20L180.4%2C15.2%20L191.5%2C9.9%20L205.1%2C15.6%20L212.7%2C16.3%20L224.2%2C10.3%20L240.0%2C11.5%20L245.2%2C14.5%20L260.9%2C16.6%20L271.8%2C15.0%20L280.7%2C12.0%20L287.8%2C12.4%20L294.9%2C16.6%20L302.3%2C13.5%20L309.2%2C15.5%20L317.0%2C16.2%20L326.9%2C16.1%20L340.8%2C14.5%20L350.4%2C15.6%20L362.4%2C11.4%20L371.9%2C13.5%20L382.9%2C9.9%20L394.9%2C13.5%20L409.1%2C16.6%20L414.9%2C13.3%20L422.5%2C12.8%20L432.5%2C9.0%20L441.6%2C10.1%20L456.2%2C14.4%20L463.1%2C12.4%20L469.0%2C12.8%20L481.5%2C13.4%20L492.3%2C16.2%20L498.3%2C15.9%20L508.8%2C14.4%20L520.4%2C11.6%20L529.3%2C16.7%20L538.0%2C12.4%20L552.0%2C13.4%20L559.8%2C9.7%20L567.2%2C15.8%20L577.7%2C12.3%20L584.0%2C12.5%20L598.5%2C15.8%20L606.2%2C14.1%20L611.7%2C11.2%20L620.7%2C15.7%20L626.7%2C12.2%20L639.1%2C9.6%20L654.2%2C10.4%20L669.9%2C10.5%20L675.2%2C10.1%20L688.2%2C14.7%20L699.5%2C15.6%20L711.1%2C11.6%20L717.6%2C19.4%20L724.8%2C11.5%20L736.7%2C15.9%20L746.5%2C14.2%20L759.6%2C11.5%20L774.4%2C16.9%20L780.8%2C15.2%20L795.0%2C11.1%20L807.9%2C13.3%20L815.2%2C9.5%20L823.7%2C15.6%20L835.2%2C11.0%20L843.7%2C12.6%20L850.6%2C13.6%20L866.2%2C14.0%20L875.9%2C16.4%20L891.7%2C12.4%20L897.4%2C12.1%20L906.6%2C4.6%20L915.9%2C14.9%20L928.7%2C11.2%20L935.6%2C9.5%20L947.0%2C13.3%20L953.4%2C12.5%20L960.0%2C11.5%20L971.8%2C13.9%20L982.6%2C11.8%20L998.4%2C11.3%20L1008.8%2C15.3%20L1017.1%2C9.2%20L1030.8%2C16.2%20L1037.4%2C16.6%20L1049.8%2C20.6%20L1065.5%2C18.9%20L1071.3%2C18.3%20L1084.2%2C14.1%20L1094.9%2C13.6%20L1110.8%2C16.0%20L1118.0%2C14.9%20L1123.7%2C10.4%20L1131.1%2C15.9%20L1137.7%2C9.0%20L1151.6%2C13.6%20L1162.9%2C14.1%20L1169.4%2C11.8%20L1180.8%2C16.2%20L1190.4%2C9.7%20L1199.0%2C13.9%20L1213.1%2C15.4%20L1226.9%2C10.1%20L1238.3%2C13.9%20L1248.0%2C15.5%20L1258.8%2C13.7%20L1274.0%2C15.7%20L1281.9%2C15.6%20L1294.8%2C16.3%20L1301.3%2C11.9%20L1308.5%2C16.9%20L1322.0%2C8.5%20L1331.0%2C12.7%20L1337.8%2C11.0%20L1343.2%2C16.9%20L1356.7%2C10.2%20L1367.9%2C15.1%20L1377.8%2C20.7%20L1385.8%2C12.7%20L1399.3%2C9.7%20L1409.0%2C15.3%20L1418.5%2C12.0%20L1431.5%2C16.0%20L1440.0%2C16.6%20L1440%2C28%20Z%22%20fill%3D%22%23F3EEE4%22%2F%3E%3C%2Fsvg%3E) left top/1440px 28px repeat-x;filter:drop-shadow(0 -1px 0 rgba(60,48,28,.08)) drop-shadow(0 -10px 14px rgba(60,48,28,.06))} .foot-sheet{position:relative;padding:76px 0 30px;background:linear-gradient(#F3EEE4,#F3EEE4) left 27px/100% calc(100% - 27px) no-repeat} .foot-top{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,3.14fr);gap:44px} .foot-logo{display:inline-block} .foot-logo img{height:32px;width:auto} .foot-say p{margin:16px 0 0;max-width:17em;font:600 17px/1.5 var(--sans);color:var(--ink-2)} /* the flag of the European Union drawn in pencil and marker, and both companies' registration numbers, Hey.bg's first (Z, 17 Oct; their names are in the last row). The flag is site/landing-source/doodles/eu.svg (site/tools/doodles.mjs) */ .foot-reg{display:flex;align-items:center;gap:12px;margin-top:22px} .foot-eu{flex:none;width:50px;line-height:0} .foot-eu svg{display:block;width:100%;height:auto} .foot-say .foot-reg p{margin:0;max-width:none;font:600 13.5px/1.6 var(--sans);color:var(--pencil);font-variant-numeric:tabular-nums} .foot-reg p span{display:block;white-space:nowrap} /* the columns take the room their words need, the guides, whose names are long, as much as there is up to a line each, and what is left lies evenly between them (20 Oct: the guides were two lines each and close against the next column) */ .foot-cols{display:grid;grid-template-columns:max-content max-content minmax(220px,max-content) max-content;justify-content:space-between;gap:28px clamp(32px,3.4vw,52px)} .foot-cols h5{margin:6px 0 14px;font:400 17px var(--hand);color:var(--coral-ink)} .foot-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:8px} .foot-cols a,.totop{position:relative;display:inline-block;padding:2px 0 6px;font:600 15.5px var(--sans);color:var(--ink-2);text-decoration:none;transition:color .25s} .foot-cols a:hover,.totop:hover{color:var(--ink)} .foot-cols a svg,.totop svg.sq{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:8px;overflow:visible} .foot-cols a svg path,.totop svg.sq path{fill:none;stroke:var(--coral);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:140;stroke-dashoffset:140;transition:stroke-dashoffset .45s var(--ease)} .foot-cols a:hover svg path,.totop:hover svg.sq path,.foot-cols a:focus-visible svg path{stroke-dashoffset:0} .foot-bottom{position:relative;display:flex;justify-content:space-between;align-items:center;gap:14px 28px;flex-wrap:wrap;margin-top:56px;padding-top:22px;font:600 13.5px var(--sans);color:var(--pencil)} .foot-bottom::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%227%22%20viewBox%3D%220%200%20600%207%22%3E%3Cpath%20d%3D%22M0.0%2C3.5%20C6.7%2C3.6%2026.7%2C3.7%2040.0%2C3.8%20C53.3%2C3.9%2066.7%2C4.1%2080.0%2C4.1%20C93.3%2C4.2%20106.7%2C4.2%20120.0%2C4.3%20C133.3%2C4.4%20146.7%2C4.7%20160.0%2C4.7%20C173.3%2C4.6%20186.7%2C4.1%20200.0%2C4.1%20C213.3%2C4.1%20226.7%2C4.9%20240.0%2C4.6%20C253.3%2C4.3%20266.7%2C2.5%20280.0%2C2.3%20C293.3%2C2.1%20306.7%2C3.0%20320.0%2C3.4%20C333.3%2C3.8%20346.7%2C4.6%20360.0%2C4.7%20C373.3%2C4.7%20386.7%2C3.9%20400.0%2C3.9%20C413.3%2C3.9%20426.7%2C4.8%20440.0%2C4.5%20C453.3%2C4.3%20466.7%2C2.7%20480.0%2C2.5%20C493.3%2C2.3%20506.7%2C3.4%20520.0%2C3.4%20C533.3%2C3.5%20546.7%2C2.8%20560.0%2C2.8%20C573.3%2C2.9%20593.3%2C3.4%20600.0%2C3.5%22%20fill%3D%22none%22%20stroke%3D%22%2317171C%22%20stroke-opacity%3D%22.2%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E) left center/600px 7px repeat-x} .foot-colophon{font:400 15px var(--hand);color:var(--ink-3)} @media (max-width:640px){.foot-colophon{display:none}} .totop{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink)} .totop .ico{width:16px;height:16px;transition:transform .35s var(--ease)} .totop:hover .ico{transform:translateY(-3px)} .totop:focus-visible,.foot-cols a:focus-visible,.foot-logo:focus-visible{outline:3px solid var(--focus,var(--ink));outline-offset:4px;border-radius:4px} /* the footer, 19 Oct (Z: "Footer also needs an upgrade now, and separate the free tools from the rest"): the trades and the guides with a column each, their hubs as the columns' headings, and the free tools on a row of their own, each on a slip pinned to the footer's paper, a little askew */ .foot-cols h5 a.foot-hub{display:inline-block;padding:0 0 5px;margin-bottom:-5px;font:inherit;color:inherit} .foot-cols h5.foot-h-more{margin-top:28px} .foot-cols .foot-long{gap:14px} .foot-cols .foot-long a{line-height:1.35;text-wrap:balance} .foot-tools{position:relative;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,3.14fr);gap:22px 44px;align-items:center;margin-top:56px;padding-top:34px} .foot-tools::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%227%22%20viewBox%3D%220%200%20600%207%22%3E%3Cpath%20d%3D%22M0.0%2C3.5%20C6.7%2C3.6%2026.7%2C3.7%2040.0%2C3.8%20C53.3%2C3.9%2066.7%2C4.1%2080.0%2C4.1%20C93.3%2C4.2%20106.7%2C4.2%20120.0%2C4.3%20C133.3%2C4.4%20146.7%2C4.7%20160.0%2C4.7%20C173.3%2C4.6%20186.7%2C4.1%20200.0%2C4.1%20C213.3%2C4.1%20226.7%2C4.9%20240.0%2C4.6%20C253.3%2C4.3%20266.7%2C2.5%20280.0%2C2.3%20C293.3%2C2.1%20306.7%2C3.0%20320.0%2C3.4%20C333.3%2C3.8%20346.7%2C4.6%20360.0%2C4.7%20C373.3%2C4.7%20386.7%2C3.9%20400.0%2C3.9%20C413.3%2C3.9%20426.7%2C4.8%20440.0%2C4.5%20C453.3%2C4.3%20466.7%2C2.7%20480.0%2C2.5%20C493.3%2C2.3%20506.7%2C3.4%20520.0%2C3.4%20C533.3%2C3.5%20546.7%2C2.8%20560.0%2C2.8%20C573.3%2C2.9%20593.3%2C3.4%20600.0%2C3.5%22%20fill%3D%22none%22%20stroke%3D%22%2317171C%22%20stroke-opacity%3D%22.2%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E) left center/600px 7px repeat-x} .foot-tools h2.tools-h{margin:0;font:400 clamp(27px,2.3vw,33px)/1.05 var(--hand);letter-spacing:.01em;color:var(--ink);transform:rotate(-2deg);transform-origin:left center} .foot-tools .tools-say{margin:10px 0 0;max-width:22em;font-size:14.5px;color:var(--pencil)} .foot-tools .tools-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .foot-tools .tools-list a{height:100%;transform:rotate(-1deg)} .foot-tools .tools-list li:nth-child(2) a{transform:rotate(.9deg)} .foot-tools .tools-list li:nth-child(3) a{transform:rotate(-.4deg)} .foot-tools .tools-list a:hover{transform:rotate(0) translateY(-4px)} /* the footer's tools under their heading, where the row is narrower */ @media (max-width:1279px){ .foot-tools{grid-template-columns:minmax(0,1fr)} } /* the columns under the name where there is not room beside it for each column's words on a line and a guide in 220 px */ @media (max-width:1365px){ .foot-top{grid-template-columns:minmax(0,1fr);gap:34px} } /* three slips in a row on a tablet: each its drawing above its words */ @media (min-width:641px) and (max-width:1040px){ .foot-tools .tools-list a{grid-template-columns:minmax(0,1fr);align-content:start;padding:14px 16px 16px} .foot-tools .tools-list .mm-ico{grid-row:auto;margin:0 0 8px -4px} .foot-tools .tools-list b{align-self:start} } /* arrivals */ .rv{opacity:0;translate:0 24px;transition:opacity .9s var(--ease),translate 1s var(--ease)} .rv.in{opacity:1;translate:none} .d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s} .toast{position:fixed;left:50%;bottom:24px;z-index:120;display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:14px 20px;border-radius:14px;background:var(--ink);color:#fff;font:600 15px var(--sans);box-shadow:5px 5px 0 var(--coral);transform:translate(-50%,calc(100% + 60px));visibility:hidden;transition:transform .6s var(--spring),visibility 0s .6s} .toast .ico{width:18px;height:18px;color:var(--yellow)} .toast.on{transform:translate(-50%,0);visibility:visible;transition:transform .6s var(--spring),visibility 0s} /* ---------------------------------------------------------------- smaller screens */ /* the question cards three to a row where four left their headings 158 to 190 px (16 Oct: German, Danish and Bulgarian words broken in the middle, last words alone, the English in four lines at 1100); four only where the page is at its full width (from 1392 the headings are 225 px: at 1321 to 1391 they were 208 to 224, and "Ist WordPress / sicher?", "Колко време / отнема?" took two lines) */ @media (min-width:1041px) and (max-width:1391px){.qgrid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:1180px){ .n-nav{left:1%} } @media (max-width:1040px){ .bn{display:none} .hd-in{gap:12px}.hd .logo{margin-right:auto} .hd .btn{height:48px;padding:0 18px;font-size:15px} .burger{display:flex} .hero{padding-top:170px} .hero-grid{grid-template-columns:minmax(0,1fr);gap:110px} .hero-copy{max-width:660px} .hero h1{font-size:clamp(3rem,8.4vw,5.6rem)} .n-nav{left:4%} .hero .cta-more{justify-content:flex-start} .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px} .yours-grid{grid-template-columns:minmax(0,1fr)} .tgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .fine-grid{grid-template-columns:minmax(0,1fr)} .qgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .cta .anno{margin-top:48px} .cta{grid-template-columns:minmax(0,1fr)} .foot-top{grid-template-columns:minmax(0,1fr);gap:34px} .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px} /* two columns: the guides across the whole width, and saying hello beside the small print */ .foot-cols .fc-guides{grid-column:1/-1} .foot-cols .fc-hello{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;grid-auto-flow:column;align-content:start;align-items:start;column-gap:inherit} .foot-cols h5.foot-h-more{margin-top:6px} .foot-bottom{justify-content:flex-start} } @media (max-width:640px){ :root{--hd:72px} body{font-size:16px} .hd-in{height:72px} .hd .logo img{height:26px} .hd .btn{height:44px;padding:0 14px;font-size:14px;box-shadow:3px 3px 0 var(--coral)} .hd .btn .ico{display:none} .burger{width:44px;height:44px} .burger svg{width:22px;height:22px} .hd .lsw{display:none} .hero{padding:132px 0 96px} .hero h1{font-size:clamp(2.7rem,12.6vw,3.9rem)} .urlf{height:62px;padding:0 6px 0 6px;border-radius:17px} .urlf .ic{display:none} .urlf input{font-size:16.5px;padding:0 8px} .urlf .btn{height:48px;padding:0 14px;font-size:14.5px} .urlf .btn .ico{display:none} .hero-grid{gap:92px} .sheet{padding:9px} .sheet .tape{width:78px;height:24px} .n-nav{display:none} .n-photo{right:0;top:-54px} .n-hours{right:2%;bottom:-56px} .steps{grid-template-columns:minmax(0,1fr);gap:34px} .sec-hd h2{white-space:normal} .board-wrap{padding:52px 0 58px} .callout{font-size:16px} .co4{left:auto;right:14%} .tgrid{grid-template-columns:minmax(0,1fr);gap:44px} .r-note{display:none} .qgrid{grid-template-columns:minmax(0,1fr);gap:26px;margin-top:48px} .qd{height:112px} .cta{padding:56px 20px 48px;border-radius:24px} .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px} .foot-sheet{padding-top:64px} .foot-tools{margin-top:44px} .foot-tools .tools-list{grid-template-columns:minmax(0,1fr);gap:14px} /* a phone: the drawer is the whole screen, the logo and the cross where the page's are, the languages at its foot */ .drw{--dp:var(--pad);width:100%;box-shadow:none} .dr-logo{display:block} .dr-top .mm-lang{display:none} .dr-foot .mm-lang{display:flex} .dr-main a>span{font-size:clamp(28px,8.4vw,34px)} .dr-cta{margin-top:16px} .dr-sec{margin-top:28px} .dr-foot{flex-direction:column;align-items:flex-start} .lb-nav{display:none} .seg{margin-left:0} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001s!important;transition-delay:0s!important} .hero h1 .ln>span{transform:none} .hero .kick,.hero .lead,.hero .urlf,.hero .urlf-under,.hero .idea-or,.sheet-wrap{opacity:1;animation:none} .hero .lead{transform:none} .rv{opacity:1;translate:none} .receipt{transform:none} .cta.press .cta-rays path{animation:none;opacity:1;stroke-dashoffset:0} } /* NeuWP, 4 October: the page's languages, in the footer's last row (build-landing.py) */ .foot-lang{display:inline-flex;flex-wrap:wrap;gap:4px 18px} .foot-lang a{padding:6px 0;color:var(--ink-2);text-decoration:none;transition:color .25s} .foot-lang a:hover{color:var(--ink)} .foot-lang a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px;text-underline-offset:5px} /* NeuWP, 1 October: accessibility */ .foot-cols h5{color:var(--coral-deep)} .step .by{color:var(--coral-deep)} .qbq{color:#72747E} .tcard .open:focus-visible{outline:none} .tcard:has(.open:focus-visible) .paper{transform:rotate(0) translateY(-8px);box-shadow:0 0 0 3px var(--focus,var(--ink)),var(--paper-shadow)} .tcard:has(.open:focus-visible) figcaption .open{background:var(--ink);color:#fff;transform:rotate(-8deg) scale(1.06)} /* ===================================================================================================== Why WordPress, why us, under the hood. Section concept 01g (1 October), merged into the page on 5 October: each row is a heading with its picture beside its four points, and the rows swap sides, with a small call to action between them. Then the checks, in one low card. ===================================================================================================== */ @font-face{font-family:'Gabarito';font-style:normal;font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url(fonts/gabarito-1.woff2) format('woff2')} .im-sm-shop{background-image:url(img/c2b5ae9fa5e7.webp)} .im-sm-wall{background-image:url(img/2e59cf7d8539.webp)} .im-sm-hands{background-image:url(img/cf98aaba0eb9.webp)} .ds-sm{--bg:#F5F1E8;--ink:#141A2E;--ink2:#4A5168;--blue:#2347C4;--blue-2:#E3E9FB;--sun:#FFCC33;--line:rgba(20,26,46,.1);background:var(--bg);color:var(--ink);font-family:'Gabarito','Hanken Grotesk',system-ui,sans-serif} .sm-hd{height:86px;display:flex;align-items:center;gap:34px;padding:0 48px} .sm-logo{display:flex;align-items:center;gap:12px;margin-right:auto;font:800 27px/1 'Gabarito';letter-spacing:-.02em} .sm-logo em{font-style:normal;color:var(--blue)} .sm-mark{width:44px;height:44px;flex:none} .sm-nav{display:flex;gap:30px;font:500 16px 'Gabarito';color:var(--ink2)} .sm-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 24px;border-radius:99px;background:var(--blue);color:#fff;font:700 16px 'Gabarito'} .sm-btn.o{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)} .sm-btn .ico{width:17px;height:17px;stroke-width:2.4} .sm-copy{position:absolute;left:48px;top:128px;width:520px} .sm-k{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:99px;background:var(--sun);font:700 13px 'Gabarito';letter-spacing:.04em;text-transform:uppercase} .sm-h{margin-top:20px!important;font:800 66px/.95 'Gabarito';letter-spacing:-.035em} .sm-h span{color:var(--blue)} .sm-l{margin-top:22px!important;max-width:410px;font:400 18px/1.5 'Gabarito';color:var(--ink2)} .sm-bs{display:flex;gap:12px;margin-top:28px} .sm-hero{position:absolute;left:612px;right:48px;top:108px;height:400px;border-radius:26px;background-position:50% 55%} .sm-price{position:absolute;left:580px;top:410px;width:226px;padding:16px 18px;border-radius:18px;background:#fff;box-shadow:0 24px 50px -24px rgba(20,26,46,.55),0 0 0 1px var(--line)} .sm-price small{display:block;font:600 12.5px 'Gabarito';color:var(--ink2)} .sm-price b{display:block;margin:4px 0 2px;font:800 30px/1 'Gabarito';letter-spacing:-.02em} .sm-price b em{font-style:normal;font-size:16px;font-weight:600;color:var(--ink2)} .sm-price p{font:500 13px 'Gabarito';color:var(--blue)} .sm-sticker{position:absolute;right:76px;top:86px;width:116px;height:116px;border-radius:50%;background:var(--sun);display:grid;place-items:center;text-align:center;font:800 17px/1.05 'Gabarito';transform:rotate(12deg);box-shadow:0 14px 26px -14px rgba(20,26,46,.5)} .sm-row{position:absolute;left:48px;right:48px;top:548px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px} .sm-card{position:relative;height:160px;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line)} .sm-card .im{position:absolute;inset:0} .sm-card .cap{position:absolute;left:14px;bottom:14px;right:14px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.94)} .sm-card .cap b{display:block;font:800 17px 'Gabarito'} .sm-card .cap p{font:400 13.5px 'Gabarito';color:var(--ink2)} .sm-card.blue{background:var(--blue);color:#fff;padding:22px 24px;box-shadow:none} .sm-card.blue small{font:700 12.5px 'Gabarito';letter-spacing:.06em;text-transform:uppercase;color:#C9D4FA} .sm-card.blue b{display:block;margin:8px 0 10px;font:800 28px/1.05 'Gabarito'} .sm-card.blue p{display:flex;align-items:center;gap:8px;font:500 14.5px 'Gabarito';color:#E3E9FB} .sm-card.blue p .ico{width:16px;height:16px} .yrow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);align-items:center} .yrow+.yrow{margin-top:var(--gap)} .yrow-us{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)} .yrow-us .ylead{order:2}.yrow-us .pts-col{order:1} .ylead{min-width:0} .ylead h2{margin:10px 0 0;font:800 clamp(2.3rem,3.6vw,3.6rem)/.98 var(--sans);font-stretch:110%;letter-spacing:-.035em;text-wrap:balance} .ylead .sub{margin:18px 0 0;font-size:clamp(16.5px,1.3vw,19px);line-height:1.55;color:var(--ink-2);text-wrap:pretty} .vis{position:relative;margin-top:36px} /* the points */ .pts{list-style:none;margin:0;padding:0;min-width:0} /* the icon items, and a link to the page that says more (Z, 12 Oct): under the items' words */ .pts-col{min-width:0} .pts-more{margin:8px 0 0 84px} /* a text link with the pencil squiggle of the menu: the landing page's and the pages' beside it (pages.css had it first) */ .nx-link{position:relative;display:inline-flex;align-items:center;gap:8px;padding:4px 0 8px;font:700 16.5px var(--sans);color:var(--ink);text-decoration:none} .nx-link .ico{width:17px;height:17px;transition:transform .35s var(--spring)} .nx-link:hover .ico{transform:translateX(3px)} .nx-link .undermark{position:absolute;left:0;bottom:0;width:100%;height:8px;overflow:visible} .nx-link .undermark path{fill:none;stroke:var(--coral);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:140;stroke-dashoffset:0} .nx-link:hover .undermark path{animation:nxdraw .5s var(--ease)} @keyframes nxdraw{from{stroke-dashoffset:140}to{stroke-dashoffset:0}} .pts li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;align-items:start;padding:22px 0} .pts .ic{width:64px;height:64px;transition:transform .5s var(--spring)} .pts .ic svg{width:100%;height:100%} .pts li.on .ic{transform:rotate(-6deg) scale(1.06)} .pts h3{margin:6px 0 6px;font:800 clamp(20px,1.6vw,23px)/1.15 var(--sans);font-stretch:106%;letter-spacing:-.018em} .pts h3 .t{position:relative;z-index:0} .pts h3 .t::before{content:"";position:absolute;z-index:-1;left:-.12em;right:-.12em;top:.48em;bottom:-.02em;background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M5%2C9%20C40%2C4%2090%2C7%20140%2C5%20C165%2C4%20185%2C6%20197%2C8%20L195%2C33%20C160%2C37%20120%2C34%2080%2C36%20C50%2C37%2025%2C35%203%2C34%20Z%22%20fill%3D%22%23FFD24A%22%2F%3E%3C%2Fsvg%3E) center/100% 100% no-repeat;opacity:.85;clip-path:inset(0 100% 0 0);transition:clip-path .6s var(--ease)} .pts li.on h3 .t::before{clip-path:inset(0 0 0 0)} .pts p{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink-2);text-wrap:pretty} .doo .dot{fill:var(--ink)} /* ---------------------------------------------------------------- the moving box (s01's drawing) */ .vis-box .art{position:relative;width:min(100%,600px);aspect-ratio:440/300;container-type:inline-size} .vis-box .art>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .vis-box .box-b{z-index:1}.vis-box .box-f{z-index:3}.vis-box .box-m{z-index:5;pointer-events:none} .doo .kr{fill:var(--kraft)}.doo .kr2{fill:var(--kraft-2)}.doo .kr3{fill:var(--kraft-3)} .doo .tp{fill:rgba(255,214,102,.5)} .vis-box .box-f .dr,.vis-box .box-b .dr{stroke:var(--kraft-ink)} .vis-box .bx1{font:400 27px/1 var(--hand);fill:var(--kraft-ink);letter-spacing:.02em} .vis-box .bx2{font:400 15px/1 var(--hand);fill:var(--kraft-ink);opacity:.85} .draw-me .scrawl{opacity:0;transition:opacity .6s var(--ease) .9s}.draw-me.in .scrawl{opacity:1} .vis-box .card{z-index:2;left:30%;top:12%;width:45%;transform:rotate(-3deg);transition:transform .8s var(--spring)} .vis-box .art:hover .card,.vis-box.lift .card{transform:translateY(-22%) rotate(-1deg)} .vis-box .art{cursor:default} .vis-box .n-move{position:absolute;z-index:6;right:-1%;top:-40px;max-width:10em;transform:rotate(3deg)} .vis-box svg.marks{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:7} .marks path{fill:none;stroke:var(--coral-line);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len)} .vis.in .marks path{transition:stroke-dashoffset .8s var(--ease) var(--d,0s);stroke-dashoffset:0} .box-m .wm{opacity:0;transition:opacity .18s var(--ease)} .box-m .wm .dr{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)} .box-m .wm .fy{opacity:0} .vis-box.st-2 .wm2,.vis-box.st-4 .wm4{opacity:1;transition:opacity .1s} .vis-box.st-2 .wm2 .dr,.vis-box.st-4 .wm4 .dr{stroke-dashoffset:0;transition:stroke-dashoffset .7s var(--ease) calc(var(--d,0s) * .5)} .vis-box.st-4 .wm4 .fy{opacity:.85;transition:opacity .3s .4s} .vis-box .wm2{transform:translate(10px,6px)} .vis-box.st-2 .wm2{transform:none;transition:opacity .1s,transform .6s var(--ease)} /* "Change it yourself": the headline's last words, on a line of their own, are selected, deleted and typed again, and a photo is dropped onto the arched one. The site comes further out of the box for it. */ .vis-box.st-3 .card{transform:translateY(-27%) rotate(-1deg) scale(1.3)} .vis-box .n-move,.vis-box svg.marks.top{transition:opacity .35s var(--ease)} .vis-box.st-3 .n-move,.vis-box.st-3 svg.marks.top{opacity:0} .vis-box .kr-h .ed{display:block;width:fit-content;min-height:.98em} .kr-h .ed.sel{background:#B6D3FF;border-radius:4px;box-shadow:0 0 0 4px #B6D3FF} .kr-h .ed.car::after{content:"";display:inline-block;width:5px;height:.86em;margin-left:3px;vertical-align:-.06em;border-radius:3px;background:#D8432A;animation:caret 1s steps(1) infinite} .kr-zone{position:absolute;z-index:2;left:456px;top:108px;width:320px;height:548px;border-radius:160px 160px 38px 38px;outline:5px dashed #2D6CDF;outline-offset:-5px;background:rgba(45,108,223,.1);opacity:0;transition:opacity .3s var(--ease);pointer-events:none} .kr-zone.on{opacity:1} .kr-drop{position:absolute;z-index:3;left:470px;top:122px;width:292px;height:520px;border-radius:146px 146px 26px 26px;background-size:cover;background-position:center;pointer-events:none;opacity:0;transform:translate(250px,-300px) rotate(15deg) scale(.56);box-shadow:0 46px 70px -22px rgba(30,16,8,.6),0 0 0 8px #fff} .kr-drop.fly{opacity:1;transform:none;transition:transform .85s cubic-bezier(.2,1.25,.35,1),opacity .22s var(--ease),box-shadow .6s var(--ease)} .kr-drop.set{box-shadow:0 0 0 0 rgba(30,16,8,0),0 0 0 0 #fff} .kr-drop.off{opacity:0;transform:translateY(-44px) rotate(-4deg) scale(1.04);transition:transform 1s cubic-bezier(.4,0,.2,1),opacity .85s cubic-bezier(.5,0,.6,1)} .vis-box .ds-kr .kr-sticker{z-index:4} @keyframes caret{0%{opacity:1}50%{opacity:0}} /* ---------------------------------------------------------------- a note from us, written in as you watch */ .vis-note{display:flow-root;padding:0 0 10px;min-height:400px} .nt-print{position:absolute;left:0;top:6px;width:72%;transform:rotate(-2deg);z-index:0} .nt-pad{--lh:30px;--pt:34px;--lo:28.5px;position:relative;z-index:1;width:54%;margin:150px 0 0 auto;padding:var(--pt) 16px 16px 50px;border-radius:2px; background:#FFFEFA linear-gradient(transparent 0 calc(var(--lh) - 1px),rgba(61,109,242,.2) calc(var(--lh) - 1px) var(--lh)) 0 var(--lo)/100% var(--lh); box-shadow:0 1px 0 rgba(0,0,0,.05),0 30px 50px -30px rgba(60,48,28,.55),0 8px 16px -12px rgba(60,48,28,.25);transform:rotate(2deg);transition:transform .5s var(--spring)} .nt-pad:hover{transform:rotate(1.2deg) translateY(-4px)} .nt-pad::before{content:"";position:absolute;left:36px;top:0;bottom:0;width:1.5px;background:rgba(216,67,42,.4)} .nt-pad::after{content:"";position:absolute;left:0;right:0;top:-5px;height:10px;background:radial-gradient(circle at 5px 5px,var(--paper) 3.4px,transparent 3.8px) 0 0/14px 10px repeat-x} .nt-lines{position:relative} .nln{position:relative;display:flex;align-items:baseline;gap:6px;margin:0;height:var(--lh);font:400 14.5px/var(--lh) var(--hand);color:var(--ink);white-space:nowrap} .nln span{position:relative;z-index:0;clip-path:inset(-30% 100% -30% 0)} .nln span::before{content:"";position:absolute;z-index:-1;left:-.15em;right:-.15em;top:.15em;bottom:-.05em;background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M5%2C9%20C40%2C4%2090%2C7%20140%2C5%20C165%2C4%20185%2C6%20197%2C8%20L195%2C33%20C160%2C37%20120%2C34%2080%2C36%20C50%2C37%2025%2C35%203%2C34%20Z%22%20fill%3D%22%23FFD24A%22%2F%3E%3C%2Fsvg%3E) center/100% 100% no-repeat;opacity:.85;clip-path:inset(0 100% 0 0);transition:clip-path .5s var(--ease)} .nln.hot span::before{clip-path:inset(0 0 0 0)} .vis-note.in .nln span{clip-path:inset(-30% 0 -30% 0);transition:clip-path var(--t,.8s) cubic-bezier(.45,.05,.4,1) var(--d,0s)} .nln .tk{width:18px;height:16px;flex:none;overflow:visible;align-self:center} .nln .tk path{fill:none;stroke:var(--coral-line);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60} .vis-note.in .nln .tk path{stroke-dashoffset:0;transition:stroke-dashoffset .35s var(--ease) var(--td,0s)} .nln.sig{color:var(--coral-ink)} /* the heart: drawn in after the signature; pointing at the note scribbles it in */ .nln .hrt{width:21px;height:19px;flex:none;overflow:visible;align-self:center;margin-left:2px;transition:transform .5s var(--spring)} .hrt .hline{fill:none;stroke:var(--coral-line);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len,90);stroke-dashoffset:var(--len,90)} .vis-note.in .hrt .hline{stroke-dashoffset:0;transition:stroke-dashoffset .7s cubic-bezier(.45,.05,.4,1) var(--td,0s)} .hrt .hfill{fill:none;stroke:var(--coral);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len2,200);stroke-dashoffset:var(--len2,200);transition:stroke-dashoffset .35s var(--ease)} .nt-pad:hover .hrt .hfill,.vis-note .hrt:hover .hfill{stroke-dashoffset:0;transition:stroke-dashoffset .8s steps(18,end)} .nt-pad:hover .hrt{transform:scale(1.18) rotate(-6deg)} .vis-note .clip{position:absolute;z-index:3;left:50%;top:128px;width:20px;height:56px;transform:rotate(-12deg)} /* ---------------------------------------------------------------- a small call to action between the rows: the big one's coral card, smaller */ .cta-band{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:clamp(30px,5vw,80px);align-items:center;margin:var(--gap) 0; padding:clamp(44px,5vw,58px) clamp(26px,4.5vw,64px) clamp(40px,4.6vw,52px);border-radius:28px;color:var(--ink);background-color:#F27056; background-image:radial-gradient(80% 120% at 0% 0%,rgba(255,190,165,.4),rgba(255,190,165,0) 62%),linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px); background-size:100% 100%,24px 24px,24px 24px;background-position:0 0,-1px -1px,-1px -1px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 44px 80px -56px rgba(160,40,15,.7)} .cta-band .kick{color:var(--ink)} .cta-band h2{margin:8px 0 0;font:800 clamp(1.9rem,3vw,2.9rem)/1 var(--sans);font-stretch:110%;letter-spacing:-.035em;text-wrap:balance} .cb-field{position:relative;z-index:2;display:flex;align-items:center;gap:6px;height:68px;padding:0 8px 0 9px;border-radius:19px;background:#fff;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);transition:transform .25s var(--ease),box-shadow .25s var(--ease)} .cb-field .ic{width:44px;height:44px;border-radius:12px;background:#FCE4DD;display:grid;place-items:center;color:var(--coral-deep);flex:none} .cb-field .ic .ico{width:19px;height:19px} .cb-field input{box-sizing:border-box;flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;padding:0 8px;font:600 18px var(--sans);color:var(--ink);caret-color:var(--coral)} .cb-field input::placeholder{color:#A4A5AE;font-weight:500} .cb-field button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 22px;border-radius:13px;background:var(--ink);color:#fff;font:700 16px var(--sans);white-space:nowrap;transition:background .25s} .cb-field button:hover{background:#2E2E36} .cb-field button:focus-visible{outline:3px solid var(--ink);outline-offset:3px} .cb-field:has(input:focus-visible){outline:2px solid transparent;box-shadow:0 0 0 2px var(--ink),8px 8px 0 2px var(--ink)} .cb-field button .ico{width:17px;height:17px;stroke-width:2.4} .cb-field:focus-within{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)} .cb-under{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:16px;font:600 14.5px var(--sans);color:var(--ink)} .cb-under span{display:flex;align-items:center;gap:7px} .cb-under .ico{width:16px;height:16px;stroke-width:2.8} /* the doodle: three hand-drawn sparks that pop in once and twinkle when the card is pointed at */ .cb-doodle{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1} .cb-doodle .spk{fill:var(--yellow);stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round} .cb-doodle .s2 .spk,.cb-doodle .s3 .spk{fill:#fff;stroke-width:1.8} .cb-doodle .tw{transform-box:fill-box;transform-origin:center;transform:scale(0) rotate(-40deg);transition:transform .7s var(--spring) var(--d,0s)} .cta-band.in .cb-doodle .tw{transform:none} .cta-band.in:hover .cb-doodle .tw,.cta-band.in:focus-within .cb-doodle .tw{transform:rotate(var(--tr,18deg)) scale(1.16);transition-delay:var(--hd,0s)} .yview{position:relative;overflow:hidden;border-radius:2px;background:#fff;aspect-ratio:16/10} .ysheet{position:absolute;padding:8px;background:#fff;border-radius:4px;box-shadow:var(--paper-shadow)} .why .doo{overflow:visible} .why .draw-me .dot,.why .draw-me .kr,.why .draw-me .kr2,.why .draw-me .kr3,.why .draw-me .tp{opacity:0;transition:opacity .6s var(--ease) .5s} .why .draw-me.in .dot,.why .draw-me.in .kr,.why .draw-me.in .kr2,.why .draw-me.in .kr3,.why .draw-me.in .tp{opacity:1} .why .ylead .sub{text-wrap:pretty} .cta-band .cb-field{margin:0} /* ---------------------------------------------------------------- under the hood: five checks in a row and one line of words below them, which says what the check pointed at (or pressed) means. Pointing at a check colors it in with the green marker, lifts it, and three short strokes spark off it. */ .hood{--in:14px;position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:clamp(26px,4vw,64px);align-items:center; margin-top:var(--gap);padding:clamp(38px,3.6vw,50px) clamp(30px,4vw,62px) clamp(32px,3.2vw,44px);border-radius:8px;background:#fff;box-shadow:var(--paper-shadow);transform:rotate(-.3deg)} .hood::before{content:"";position:absolute;z-index:-1;inset:var(--in);border-radius:4px;background-image:linear-gradient(var(--grid-2) 1px,transparent 1px),linear-gradient(90deg,var(--grid-2) 1px,transparent 1px);background-size:16px 16px} .hood svg.marks{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2} .hood .marks path{fill:none;stroke:var(--coral-line);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len)} .hood .marks path.frame{stroke:var(--ink);stroke-width:1.5;stroke-opacity:.82} .hood .marks path.frame.f2{stroke-width:1.1;stroke-opacity:.4} .hood.in .marks path{transition:stroke-dashoffset 1.3s var(--ease) var(--d,0s);stroke-dashoffset:0} .hd-head{position:relative;min-width:0} .hd-head h2{margin:8px 0 0;font:800 clamp(1.7rem,2.25vw,2.15rem)/1.3 var(--sans);font-stretch:110%;letter-spacing:-.03em;white-space:nowrap} .hd-body{position:relative;z-index:3;min-width:0} .hd-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px} .hd-item{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;padding:8px 2px 6px;border-radius:14px;text-align:center;-webkit-tap-highlight-color:transparent} .hd-item:focus-visible{outline:3px solid var(--ink);outline-offset:2px} .ring-box{position:relative;display:block;width:80px;height:80px;flex:none;transition:transform .5s var(--spring)} .ring{display:block;width:100%;height:100%;overflow:visible} .ring .rbg{fill:#fff} .ring .rdr{fill:none;stroke:var(--green);stroke-width:4.6;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len)} .ring .rsc{fill:none;stroke:var(--green-deep);stroke-width:14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset .3s var(--ease)} .ring .rtick{opacity:0;transform:scale(.5);transform-origin:82px 20px;transition:opacity .2s,transform .4s var(--spring)} .ring .rtk{fill:none;stroke:var(--green);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round} .ring .rray path{fill:none;stroke:var(--green);stroke-width:3.6;stroke-linecap:round;stroke-dasharray:11;stroke-dashoffset:11;transition:stroke-dashoffset .15s} .ring-box b{position:absolute;inset:0;display:grid;place-items:center;padding-top:1px;font:800 21px/1 var(--sans);font-stretch:108%;letter-spacing:-.02em;color:var(--ink);transition:color .15s} .ring-box b.sm{font-size:16.5px;letter-spacing:-.01em} .hood.in .ring .rdr{transition:stroke-dashoffset 1.1s var(--ease) var(--d,0s);stroke-dashoffset:0} .hood.in .ring .rtick{opacity:1;transform:scale(1);transition-delay:calc(var(--d,0s) + .9s)} .hd-item:hover .ring-box,.hd-item.on .ring-box{transform:translateY(-5px) rotate(-6deg) scale(1.09)} .hd-item:hover .rsc,.hd-item.on .rsc{stroke-dashoffset:0;transition:stroke-dashoffset .62s cubic-bezier(.4,.1,.3,1)} .hd-item:hover .ring-box b,.hd-item.on .ring-box b{color:#fff;transition:color .25s .2s} .hood.in .hd-item:hover .rtick,.hood.in .hd-item.on .rtick{transform:scale(1.22) rotate(10deg);transition-delay:.12s} .hd-item:hover .rray path,.hd-item.on .rray path{stroke-dashoffset:0;transition:stroke-dashoffset .3s var(--ease) .32s} .hd-item:hover .rray path:nth-child(2),.hd-item.on .rray path:nth-child(2){transition-delay:.38s} .hd-item:hover .rray path:nth-child(3),.hd-item.on .rray path:nth-child(3){transition-delay:.44s} .hd-t{font:800 15px/1.2 var(--sans);font-stretch:106%;letter-spacing:-.01em;color:var(--ink)} .hd-t .t{position:relative;z-index:0} .hd-t .t::before{content:"";position:absolute;z-index:-1;left:-.14em;right:-.14em;top:.5em;bottom:-.04em;background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M5%2C9%20C40%2C4%2090%2C7%20140%2C5%20C165%2C4%20185%2C6%20197%2C8%20L195%2C33%20C160%2C37%20120%2C34%2080%2C36%20C50%2C37%2025%2C35%203%2C34%20Z%22%20fill%3D%22%23FFD24A%22%2F%3E%3C%2Fsvg%3E) center/100% 100% no-repeat;opacity:.85;clip-path:inset(0 100% 0 0);transition:clip-path .35s var(--ease)} .hd-item:hover .hd-t .t::before,.hd-item.on .hd-t .t::before{clip-path:inset(0 0 0 0);transition:clip-path .5s var(--ease) .1s} .hd-say{margin:14px auto 0;max-width:78ch;min-height:3.2em;font-size:16px;line-height:1.55;color:var(--ink-2);text-align:center;text-wrap:balance;transition:opacity .14s var(--ease)} .hd-say.out{opacity:0} .hd-say b{font-weight:800;color:var(--ink)} /* a rubber stamp over the card's corner: a person looked (Z, 5 October). Its two rings, its tick and its scribble are drawn by landing.js; it comes down with a thump after the checks have drawn. */ /* the stamp sits on the card's upper left corner, on a round paper label of its own (Z, 5 October: on the right, with the card's lines showing through it, it "didn't look great") */ .hd-stamp{position:absolute;z-index:4;left:-46px;top:-62px;width:132px;height:132px;transform:rotate(-11deg);pointer-events:none} .hd-stamp svg{width:100%;height:100%;overflow:visible;opacity:0;transform:scale(1.5) rotate(12deg);transition:opacity .2s var(--ease) 1.5s,transform .5s var(--spring) 1.5s;filter:drop-shadow(0 8px 10px rgba(60,48,28,.2)) drop-shadow(0 1px 1px rgba(60,48,28,.18))} .hood.in .hd-stamp svg{opacity:1;transform:none} .hd-stamp .lab{fill:#FFFDF8} .hd-stamp .ink{stroke:var(--coral-line);stroke-width:2.8} .hd-stamp .ink.th{stroke-width:1.5}.hd-stamp .ink.hv{stroke-width:4.6} .hd-stamp .dr{stroke-dasharray:none!important;stroke-dashoffset:0!important} .hd-stamp text{font-family:var(--hand);fill:var(--coral-ink);text-transform:uppercase} .hd-stamp .st1{font-size:12px;letter-spacing:.08em} .hd-stamp .st2{font-size:18.5px;letter-spacing:.03em} @media (max-width:999px){ .yrow,.yrow-us{grid-template-columns:minmax(0,1fr);gap:34px;max-width:680px;margin-inline:auto} .yrow-us .ylead{order:1}.yrow-us .pts-col{order:2} .cta-band{grid-template-columns:minmax(0,1fr);gap:26px} .cta-band .cb-copy{padding-right:56px} .hood{grid-template-columns:minmax(0,1fr);gap:22px;text-align:center} .hd-head h2{margin-top:6px} } @media (max-width:640px){ .pts li{grid-template-columns:52px minmax(0,1fr);gap:14px;padding:18px 0} .pts .ic{width:52px;height:52px} .pts-more{margin-left:66px} .vis-box .n-move{position:static;display:block;max-width:none;margin:0 0 14px auto;text-align:right} .vis-note{min-height:0} .nt-print{width:84%;left:-2%} .nt-pad{width:86%;margin-top:150px} .vis-note .clip{left:12%;top:128px} .cb-field{flex-wrap:wrap;height:auto;padding:8px;gap:8px}.cb-field .ic{display:none}.cb-field input{flex:1 0 100%;height:46px;padding:0 8px}.cb-field button{flex:1 0 100%;justify-content:center;height:50px} .hood{--in:10px;padding:40px 20px 30px;transform:none} .hd-stamp{left:auto;right:-10px;top:-50px;width:96px;height:96px;transform:rotate(9deg)} .hd-list{gap:2px} .hd-item{padding:6px 0;gap:0} .ring-box{width:54px;height:54px} .ring-box b{font-size:15px}.ring-box b.sm{font-size:11.5px} /* on a phone the rings say it themselves, and the line below names the one pressed */ .hd-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .hd-say{min-height:7.8em;font-size:15.5px} } @media (prefers-reduced-motion:reduce){ .ring .rdr{stroke-dashoffset:0!important}.ring .rtick{opacity:1!important} .nln span{clip-path:none!important}.hrt .hline,.nln .tk path,.hood .marks path,.vis .marks path{stroke-dashoffset:0!important}.cb-doodle .tw{transform:none!important}.kr-h .ed.car::after{animation:none!important}.kr-drop,.kr-zone{transition:none!important} } /* ---------------------------------------------------------------- where nothing can point (Z, 19 Oct: "lots of creative graphics and icons need to animate on their own ... not usable on mobile"). landing.js plays them as they come into view: the four steps (.play, beside their :hover above), the examples' glass, the points of why WordPress and why us in turns, the note's heart, the band's sparks. */ .tcard.hint figcaption .open{background:var(--ink);color:#fff;transform:rotate(-8deg) scale(1.06)} .nt-pad.hrt-on .hrt .hfill{stroke-dashoffset:0;transition:stroke-dashoffset .8s steps(18,end)} .nt-pad.hrt-on .hrt{transform:scale(1.18) rotate(-6deg)} .cta-band.in.twk .cb-doodle .tw{transform:rotate(var(--tr,18deg)) scale(1.16);transition-delay:var(--hd,0s)} /* the moving box says, in the point's own words, which part of it is shown */ .vis-say{margin:12px 0 0;min-height:1.25em;text-align:center;font-size:clamp(19px,5vw,23px);line-height:1.25;color:var(--coral-ink);opacity:0;transform:translateY(6px) rotate(-1.5deg);transition:opacity .3s var(--ease),transform .5s var(--spring)} .vis-say.on{opacity:1;transform:rotate(-1.5deg)} /* the board of "All yours to change" on a phone: a camera goes close to what changes (landing.js, camAt) */ .bview.cam>.fitc{transition:transform .9s cubic-bezier(.45,.05,.25,1)} @media (max-width:1040px){ /* one column: the board above the list, so it stays where it is while the list opens and shuts, and what a step pressed shows is right above it (Z, 19 Oct) */ .yours-grid{row-gap:0} .yours-copy{display:contents} .yours-copy>*{order:1} .yours .board-wrap{order:2;margin-top:14px} .yours .checks{order:3;margin-top:0} } /* the big view of an example on a phone: its two arrows under the picture, where they were hidden (a swipe does the same) */ @media (max-width:640px){ .lb-stage{flex-wrap:wrap;align-content:center;gap:22px 28px} .lb-stage .lb-paper{order:-1;flex:0 0 100%} .lb-stage .lb-nav{display:grid;width:52px;height:52px} } @media (prefers-reduced-motion:reduce){.bview.cam>.fitc{transition:none}.vis-say{transition:none}} /* one of us signed in to WordPress: its admin bar sits above the header, not over it (Z, 8 Oct). Our pages leave WordPress's own bump out of the head, so the page makes room itself */ html:has(#wpadminbar){margin-top:32px} html:has(#wpadminbar) .hd,html:has(#wpadminbar) .mnav{top:32px} @media screen and (max-width:782px){ html:has(#wpadminbar){margin-top:46px} html:has(#wpadminbar) .hd,html:has(#wpadminbar) .mnav{top:46px} } @media screen and (max-width:600px){html:has(#wpadminbar) #wpadminbar{position:fixed}} /* the other languages (13 Oct): a word longer than its line (a German compound, a Danish one) is hyphenated where the browser knows the language, and broken rather than left running past the screen where it does not */ html:not([lang="en"]) body{overflow-wrap:break-word} html:not([lang="en"]) :is(h1,h2,h3,h4,.btn,.note,.kick){hyphens:auto;-webkit-hyphens:auto} /* but only a long word, and never leaving fewer than four letters on a line (Z's Chrome, 15 Oct: "Fo-tos", "kom-men", "Vi læ-ser", "Wir gestal-ten" in the headings): a word too short to hyphenate that does not fit wraps whole, and one that would be broken in the middle has its hold let go by fit.js */ html:is([lang="de"],[lang="da"]) :is(h1,h2,h3,h4,.btn,.note,.kick,.foot-cols a,.hd-head h2){hyphenate-limit-chars:10 4 4} /* and a long word in a narrow column (the footer's links, Bulgarian's "Поверителност") breaks rather than widening the page */ html:not([lang="en"]) :is(.foot-cols a,.hd-head h2){overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto} html:not([lang="en"]) .hd-head h2{white-space:normal} /* a question card's heading is never hyphenated in German or Danish (16 Oct: Chrome's balancing broke "forhåndsvis-ningen", "Reparatu-ren", "Rechtsge-biet" in cards where each word fits whole): its longest word is 188 px ("forhåndsvisningen"), its narrowest heading 206 (641 wide, two to a row), so every word wraps whole */ html:is([lang="de"],[lang="da"]) .qf h3{hyphens:manual;-webkit-hyphens:manual} /* the drawn example sites in the other languages (Z, 15 Oct: "our demos look broken"): a translated text that took more lines than the English, and pushed the site's parts over each other or out of a round sticker, is set a little smaller there. Each size was measured on the site's own 1200 by 750 canvas, which is the same at every width (the scratchpad's dsaudit.mjs and fitfind.mjs: the text's height as the English, or inside its circle) */ html[lang="da"] .ds-lr .lr-h{font-size:70px} html[lang="bg"] .ds-lr .lr-h{font-size:58px} html:is([lang="de"],[lang="da"]) .ds-kr .kr-h{font-size:52px} html[lang="bg"] .ds-kr .kr-h{font-size:54px} html[lang="da"] .ds-fp .li{font-size:12px} html[lang="bg"] .ds-fp .fp-stk{font-size:15px} html[lang="bg"] .ds-lr .lr-sign span{font-size:12.5px;letter-spacing:.06em} html[lang="bg"] .ds-st .st-h{font-size:90px} html:is([lang="de"],[lang="bg"]) .ds-st .st-side p{font-size:13.5px} html:is([lang="de"],[lang="bg"]) .ds-st .st-seal{top:300px} /* and the box the website comes in: "DIN HJEMMESIDE" filled its front from edge to edge */ html[lang="da"] .vis-box .bx1{font-size:23px} /* Bulgarian is not hyphenated by the browser (Z, 15 Oct: "limit hyphenated words to a minimum"): its words fit their lines at the four widths without it (measured with the browser's hyphens off), and one that ever does not is still broken by overflow-wrap rather than running past the screen */ html[lang="bg"] :is(h1,h2,h3,h4,.btn,.note,.kick,.foot-cols a,.hd-head h2){hyphens:manual;-webkit-hyphens:manual} /* and its hand is one face, Caveat (the faces above): in the styles' --hand, and in a drawing's own lettering, which names Permanent Marker */ html[lang="bg"]{--hand:'Caveat NW',cursive} html[lang="bg"] svg text[font-family*="Permanent Marker"]{font-family:'Caveat NW',cursive}