/* Stray Wolf Technology: design system v11, "the print plate". Paper and stone, charcoal type, one cactus orange. Square corners, flat surfaces, thin charcoal rules where a list or a zone needs one. Outfit for headings, Bricolage Grotesque for text. Zilla Slab lives in the logo only. Order: tokens, base, type, buttons, section heads, header, hero, home sections, inner pages, footer, motion. Edit here, then bump VERSION in tools/build.py so visitors get the new file. */ @font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin-wght.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Zilla Slab"; src: url("../fonts/zilla-slab-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; } /* ------------------------------------------------------------------ Tokens */ :root { /* colour */ --white: #FFFFFF; --paper: #F8F5EE; /* the page: warm paper */ --paper-2: #FCFAF5; /* fields and raised paper */ --stone: #EAE3D5; /* the second surface: sand. Mounts, bands, the About card */ --stone-2: #DED5C6; --stone-3: #E4DCCC; /* the bottom of a sand band */ --haze: #F1E2D1; /* the warm glow at the top of the hero and the close */ --line: #D9D0C2; /* soft rules inside lists */ --line-2: #8C8273; /* field and chip borders: 3.5:1 on paper, so the edge of every box can be seen (WCAG 1.4.11) */ --ink: #24221F; /* charcoal: text and the structural rules */ --ink-2: #2E2B27; --ink-3: #423D37; --muted: #5B554D; /* captions only, 7.3:1 on paper */ --accent: #C94B17; /* cactus orange, deep enough for white text (4.7:1) */ --accent-dark: #A93D10; --accent-tint: #F7E4D9; --flame: #EE7A45; --sage: #5E6E4E; /* cactus green: small labels, ticks and tags */ --sage-tint: #E3E8DB; --sage-ink: #4E5D40; /* the same green, deep enough for small text on sand (5.2:1) */ --dusk: #4A5F75; /* dusk blue from the footer sky: the third phase */ --on-ink: #F4F2EE; --on-ink-muted: #C2BBB0; --good: #2E6A4C; --good-tint: #E1EEE6; --note-bg: #FFF0C7; --note-ink: #5C4200; --error: #B42318; --error-tint: #FCEBE9; --focus: #1F5FBF; /* type: one family for headings, one for text, six sizes */ --display: "Outfit", "Bricolage Grotesque", system-ui, sans-serif; --text: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif; --t-small: 0.9375rem; /* 15: captions, notes */ --t-body: 1.0625rem; /* 17: text */ --t-lead: clamp(1.125rem, 1.02rem + 0.4vw, 1.3125rem); /* 18 to 21: the line under a heading */ --t-h4: clamp(1.3125rem, 1.15rem + 0.5vw, 1.625rem); /* 21 to 26: item headings */ --t-h3: clamp(1.75rem, 1.3rem + 1.4vw, 2.75rem); /* 28 to 44: list headings, big rows */ --t-h2: clamp(2.375rem, 1.3rem + 3.6vw, 5rem); /* 38 to 80: section headings */ --t-h1: clamp(2.75rem, 1.2rem + 5vw, 6.25rem); /* 44 to 100: page titles */ /* space */ --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; --gutter: clamp(1.25rem, 5vw, 5rem); --measure: 1440px; --section: clamp(3.5rem, 6vw, 6rem); --bleed: calc(var(--gutter) + (100vw - min(100vw, var(--measure))) / 2); /* from the column edge to the screen edge */ /* shape: square, with a whisper of softening on things you press or type in */ --r: 3px; --rule: 1px solid var(--ink); --rule-soft: 1px solid var(--line); /* motion */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); } /* ------------------------------------------------------------------ Base */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6.5rem; color-scheme: light; } body { font-family: var(--text); font-size: var(--t-body); line-height: 1.55; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-kerning: normal; font-variant-ligatures: common-ligatures contextual; min-height: 100svh; display: flex; flex-direction: column; overflow-x: clip; } main { flex: 1; } /* a faint grain over the whole page, so the flat paper and stone read as paper and stone */ body::after { content: ""; position: fixed; inset: 0; z-index: 1000; pointer-events: none; opacity: 0.085; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 220px 220px; } img, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; } button, input, textarea, select { font: inherit; color: inherit; } ul[class], ol[class], ul[role="list"], ol[role="list"] { list-style: none; } h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; } h1, h2 { line-height: 0.98; letter-spacing: -0.035em; font-weight: 560; } p { max-width: 62ch; text-wrap: pretty; } em { font-style: normal; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } ::selection { background: #F5D2C1; color: var(--ink); } input, textarea, select { caret-color: var(--accent); accent-color: var(--accent); } .icon { width: 1em; height: 1em; flex: none; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--on-ink); padding: 0.6rem 1rem; } .skip-link:focus { top: 1rem; } .wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section); position: relative; } .on-stone { background: linear-gradient(180deg, var(--stone) 0%, var(--stone-3) 100%); } .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-tint); flex: none; animation: breathe 2.6s ease-in-out infinite; } @keyframes breathe { 0%, 100% { box-shadow: 0 0 0 3px var(--good-tint); } 50% { box-shadow: 0 0 0 6px var(--good-tint); } } /* ------------------------------------------------------------------ Type */ .h1 { font-size: var(--t-h1); } .h2 { font-size: var(--t-h2); } .h3 { font-size: var(--t-h3); } h1 em, h2 em { color: var(--accent); } .lead { font-size: var(--t-lead); line-height: 1.5; max-width: 44ch; font-weight: 430; } .muted { color: var(--muted); } .small { font-size: var(--t-small); } .link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.22em; transition: text-decoration-thickness 160ms ease; } .link:hover { text-decoration-thickness: 3px; } .link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; text-decoration: none; } .link-arrow .icon { width: 1.15em; height: 1.15em; color: var(--accent); transition: transform 200ms var(--ease-out); } .link-arrow:hover .icon { transform: translateX(4px); } .link-arrow span { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.22em; transition: text-decoration-color 160ms ease; } .link-arrow:hover span { text-decoration-color: var(--accent); } /* a plate with a big line icon on it: the services, the pledges, what every price includes */ .plate-ic { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; background: var(--stone); color: var(--ink); transition: background 250ms ease, color 250ms ease, transform 350ms var(--ease-out); } .plate-ic .icon { width: 1.5rem; height: 1.5rem; } .on-stone .plate-ic { background: var(--paper); } li:hover > .plate-ic { background: var(--ink); color: var(--paper); transform: translateY(-2px); } .tag { display: inline-flex; align-items: center; font-size: var(--t-small); font-weight: 600; color: #2F3A26; background: var(--sage-tint); padding: 0.3rem 0.65rem; border-radius: var(--r); } /* cut-stone facets behind the big titles: long planes fanning from the top right, light on the wolf's own faceted face, fading into the page */ .has-facets { position: relative; overflow: hidden; } .has-facets > .wrap { position: relative; } .has-facets::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("../images/facets.svg") no-repeat right -18rem top -10rem / 130rem auto; -webkit-mask-image: linear-gradient(100deg, transparent 28%, #000 70%); mask-image: linear-gradient(100deg, transparent 28%, #000 70%); } .has-facets::before { inset: -8rem 0; transform: translate3d(0, var(--py, 0px), 0); } /* V43: the fan image has a bottom edge; fade it out before it, so a tall head never shows a hard line across the page */ .has-facets::before { --fac-end: 55rem; -webkit-mask-image: linear-gradient(100deg, transparent 28%, #000 70%), linear-gradient(180deg, #000 calc(var(--fac-end) - 14rem), transparent calc(var(--fac-end) - 1rem)); -webkit-mask-composite: source-in; mask-image: linear-gradient(100deg, transparent 28%, #000 70%), linear-gradient(180deg, #000 calc(var(--fac-end) - 14rem), transparent calc(var(--fac-end) - 1rem)); mask-composite: intersect; } .facets-left::before { transform: scaleX(-1) translate3d(0, var(--py, 0px), 0); } /* V35 (Jeremy: "add some texture to all the site like we did with the hero ... just subtle", "everywhere that makes sense"): the same facets, a little quieter, behind the light sections. .tex-left fans from the left instead of the right, .tex-b shows a lower part of the fan so neighbouring sections don't repeat. The layer sits under the content (isolation + z-index -1), with no overflow, so sticky columns keep working. On the Work page each site gets its own fan, full width, alternating sides with the layout. */ .tex { position: relative; isolation: isolate; } .tex::before, .work-section .show::before { content: ""; position: absolute; z-index: -1; pointer-events: none; opacity: 0.85; background: url("../images/facets.svg") no-repeat right -22rem top var(--tex-y, -9rem) / 124rem auto; --tex-fade: linear-gradient(180deg, transparent 0, #000 7rem, #000 min(calc(100% - 9rem), calc(var(--tex-y, -9rem) + var(--tex-h, 62rem) - 16rem)), transparent min(100%, calc(var(--tex-y, -9rem) + var(--tex-h, 62rem) - 1rem))); -webkit-mask-image: linear-gradient(100deg, transparent 32%, #000 78%), var(--tex-fade); -webkit-mask-composite: source-in; mask-image: linear-gradient(100deg, transparent 32%, #000 78%), var(--tex-fade); mask-composite: intersect; } .tex::before { inset: 0; } /* the top and bottom edges fade, so no fan ends in a hard line where one section meets the next */ .tex-b { --tex-y: -30rem; } .tex-left::before, .work-section .show-flip::before { transform: scaleX(-1); } .work-section .show { position: relative; isolation: isolate; } .work-section .show::before { inset: calc(var(--s6) * -1) calc(50% - 50vw); --tex-y: -16rem; } .work-section .show:nth-child(3n+2)::before { --tex-y: -34rem; } @media (max-width: 63.99em) { .tex::before, .work-section .show::before { --tex-h: 44rem; background-size: 88rem auto; background-position: right -16rem top var(--tex-y, -6rem); } .tex-b { --tex-y: -20rem; } } @media print { .tex::before, .work-section .show::before { display: none; } } /* charcoal plates: the same fine grain as the footer */ .ink-grain { position: relative; } .ink-grain::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 220px 220px; } @media (max-width: 63.99em) { .has-facets::before { background-size: 90rem auto; background-position: right -14rem top -6rem; --fac-end: 39rem; } } /* ------------------------------------------------------------------ Buttons: flat, square, one colour each */ .button { --b-bg: var(--accent); --b-bg-hover: var(--accent-dark); --b-fg: #fff; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; background: var(--b-bg); color: var(--b-fg); font-weight: 600; font-size: var(--t-body); line-height: 1; padding: 1rem 1.35rem; min-height: 3.25rem; border: 0; border-radius: var(--r); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease; } .button .icon { width: 1.1em; height: 1.1em; transition: transform 220ms var(--ease-out); } .button:hover { background: var(--b-bg-hover); box-shadow: 0 12px 24px -16px rgb(36 34 31 / 0.55); } .button:hover .icon { transform: translateX(3px); } .button:active { transform: translateY(1px); box-shadow: none; } .button[disabled], .button[aria-disabled="true"] { opacity: 0.5; pointer-events: none; } .button-quiet { --b-bg: transparent; --b-bg-hover: var(--ink); --b-fg: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); } .button-quiet:hover { color: var(--on-ink); } .button-quiet .icon { color: currentColor; } .button-lg { padding: 1.15rem 1.6rem; min-height: 3.6rem; font-size: 1.125rem; } .button-sm { font-size: var(--t-small); padding: 0.75rem 1rem; min-height: 2.75rem; } .button-row { display: flex; gap: 0.75rem; flex-wrap: wrap; } @media (max-width: 29.99em) { .button-row .button { flex: 1 1 auto; } } /* ------------------------------------------------------------------ Section heads: a charcoal rule, the heading, the line beside it */ .sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s5) var(--s5); align-items: end; padding-top: var(--s5); border-top: var(--rule); margin-bottom: clamp(2.5rem, 5vw, 4.5rem); } .sec-head h2 { grid-column: 1 / span 7; } .sec-head > p, .sec-head > .sec-aside { grid-column: 9 / -1; } .sec-head .lead { max-width: 36ch; } .sec-aside { display: grid; gap: var(--s4); justify-items: start; } @media (max-width: 63.99em) { .sec-head h2, .sec-head > p, .sec-head > .sec-aside { grid-column: 1 / -1; } } /* ------------------------------------------------------------------ Draft banner */ .draft-banner { background: var(--note-bg); color: var(--note-ink); text-align: center; font-size: var(--t-small); padding: 0.5rem var(--gutter); } /* ------------------------------------------------------------------ Header V23 (Nov 10 2026, Jeremy: "make the header a standout piece", picked from three): the night bar. Charcoal with a few faint stars and the orange ground line under it, the same night as the footer scene, so the page opens and closes on one note. It tucks away while you read down and comes back the moment you scroll up (site.js adds .is-scrolled and .is-hidden). On phones the menu opens as a full charcoal sheet. */ .site-header { position: sticky; top: 0; z-index: 30; background-color: var(--ink); color: var(--on-ink); border-bottom: 2px solid var(--accent); transition: transform 380ms var(--ease-out), box-shadow 200ms ease; } /* V24 (Nov 10 2026, Jeremy: "add some movement", "have a moon involved and tie it in with the wolf", "make them both work together"): the bar is a night sky. Every 16 seconds the moon glows, the logo wolf's eyes light up and, on the homepage, the wolf on the ridge lifts its head and howls (hero.css, same 16s clock). All of it stops under reduced motion and with the footer's pause button (site.js puts .scene-paused on ). V26 (Nov 10 2026, Jeremy: "work on it a lot more, polish this up even more"): the sky drawn properly. - Stars come in three sizes, a few with a faint warm or cool tint. The ones along the top and bottom edges (.hdr-sky, .hdr-stars) run the full width. The ones in the open sky (.hdr-field) are masked out over the logo and over the links, so no star ever sits on a letter. The star maps are generated (seed 564); change the mask numbers if the logo or the links change width. - The moon is shaded like a moon (lit from the upper left, faint seas), with a tight warm halo that fits inside the bar. - --b is the distance from the screen edge to the content column, in % of the bar so a scrollbar does not shift it. */ .hdr-sky { --b: calc(var(--gutter) + (100% - min(100%, var(--measure))) / 2); position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(circle closest-side, rgb(244 242 238 / 0.36) 0 50%, rgb(244 242 238 / 0) 100%) 61.9% 89% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.39) 0 50%, rgb(244 242 238 / 0) 100%) 95.8% 85% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.44) 0 50%, rgb(244 242 238 / 0) 100%) 19.7% 91% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.38) 0 50%, rgb(244 242 238 / 0) 100%) 40.6% 86% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.46) 0 50%, rgb(244 242 238 / 0) 100%) 80.6% 11% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.41) 0 50%, rgb(244 242 238 / 0) 100%) 26.4% 10% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.36) 0 50%, rgb(244 242 238 / 0) 100%) 14.4% 7% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.44) 0 50%, rgb(244 242 238 / 0) 100%) 69.5% 9% / 2.2px 2.2px no-repeat; } .hdr-stars, .hdr-field { position: absolute; inset: 0; } .hdr-stars { background: radial-gradient(circle closest-side, rgb(244 242 238 / 0.7) 0 48%, rgb(244 242 238 / 0) 100%) 48.1% 9% / 3.2px 3.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.61) 0 50%, rgb(244 242 238 / 0) 100%) 90.0% 7% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.7) 0 50%, rgb(244 242 238 / 0) 100%) 57.2% 9% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.66) 0 48%, rgb(244 242 238 / 0) 100%) 85.9% 90% / 3.2px 3.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.7) 0 50%, rgb(244 242 238 / 0) 100%) 8.6% 85% / 2.2px 2.2px no-repeat; } .hdr-stars-2 { background: radial-gradient(circle closest-side, rgb(244 242 238 / 0.56) 0 50%, rgb(244 242 238 / 0) 100%) 35.5% 7% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.61) 0 48%, rgb(244 242 238 / 0) 100%) 53.9% 89% / 3.2px 3.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.66) 0 50%, rgb(244 242 238 / 0) 100%) 5.6% 7% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.62) 0 50%, rgb(244 242 238 / 0) 100%) 74.5% 91% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.58) 0 48%, rgb(244 242 238 / 0) 100%) 30.4% 91% / 3.2px 3.2px no-repeat; } .hdr-field { background: radial-gradient(circle closest-side, rgb(244 242 238 / 0.32) 0 50%, rgb(244 242 238 / 0) 100%) 51.5% 20% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.34) 0 50%, rgb(244 242 238 / 0) 100%) 97.5% 53% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.32) 0 50%, rgb(244 242 238 / 0) 100%) 20.4% 23% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.36) 0 50%, rgb(244 242 238 / 0) 100%) 69.5% 45% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.43) 0 50%, rgb(244 242 238 / 0) 100%) 25.8% 70% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.42) 0 50%, rgb(244 242 238 / 0) 100%) 36.2% 63% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.45) 0 50%, rgb(244 242 238 / 0) 100%) 86.3% 67% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.45) 0 50%, rgb(244 242 238 / 0) 100%) 79.7% 44% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.4) 0 50%, rgb(244 242 238 / 0) 100%) 53.5% 53% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.39) 0 50%, rgb(244 242 238 / 0) 100%) 28.2% 46% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.43) 0 50%, rgb(244 242 238 / 0) 100%) 2.5% 55% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.32) 0 50%, rgb(244 242 238 / 0) 100%) 71.4% 24% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.37) 0 50%, rgb(244 242 238 / 0) 100%) 82.6% 71% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.38) 0 50%, rgb(244 242 238 / 0) 100%) 16.3% 29% / 2.2px 2.2px no-repeat; -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--gutter) - 1rem), transparent var(--gutter), transparent calc(var(--gutter) + 10.9rem), #000 calc(var(--gutter) + 11.9rem), #000 calc(100% - var(--gutter) - 7.8rem), transparent calc(100% - var(--gutter) - 6.8rem), transparent calc(100% - var(--gutter)), #000 calc(100% - var(--gutter) + 1rem)); mask-image: linear-gradient(90deg, #000 calc(var(--gutter) - 1rem), transparent var(--gutter), transparent calc(var(--gutter) + 10.9rem), #000 calc(var(--gutter) + 11.9rem), #000 calc(100% - var(--gutter) - 7.8rem), transparent calc(100% - var(--gutter) - 6.8rem), transparent calc(100% - var(--gutter)), #000 calc(100% - var(--gutter) + 1rem)); } @media (max-width: 63.99em) { .hdr-field:not(.hdr-field-1, .hdr-field-2) { display: none; } } /* a narrower sky needs fewer stars */ .hdr-field-1 { background: radial-gradient(circle closest-side, rgb(244 242 238 / 0.69) 0 48%, rgb(244 242 238 / 0) 100%) 30.4% 62% / 3.2px 3.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.6) 0 50%, rgb(244 242 238 / 0) 100%) 12.2% 54% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.74) 0 50%, rgb(244 242 238 / 0) 100%) 23.9% 48% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(255 222 190 / 0.95) 0 22%, rgb(255 222 190 / 0.21) 36%, rgb(255 222 190 / 0) 100%) 40.8% 58% / 8px 8px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.83) 0 50%, rgb(244 242 238 / 0) 100%) 33.8% 47% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.69) 0 48%, rgb(244 242 238 / 0) 100%) 49.0% 48% / 3.2px 3.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.74) 0 48%, rgb(244 242 238 / 0) 100%) 94.1% 20% / 3.2px 3.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.81) 0 50%, rgb(244 242 238 / 0) 100%) 61.5% 51% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.69) 0 50%, rgb(244 242 238 / 0) 100%) 42.9% 41% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.95) 0 22%, rgb(244 242 238 / 0.21) 36%, rgb(244 242 238 / 0) 100%) 17.9% 54% / 8px 8px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.66) 0 50%, rgb(244 242 238 / 0) 100%) 46.4% 68% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.9) 0 48%, rgb(244 242 238 / 0) 100%) 88.8% 49% / 3.2px 3.2px no-repeat; } .hdr-field-2 { background: radial-gradient(circle closest-side, rgb(244 242 238 / 0.61) 0 50%, rgb(244 242 238 / 0) 100%) 56.0% 30% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.74) 0 48%, rgb(244 242 238 / 0) 100%) 5.4% 37% / 3.2px 3.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.85) 0 50%, rgb(244 242 238 / 0) 100%) 58.8% 76% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.83) 0 50%, rgb(244 242 238 / 0) 100%) 77.0% 26% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(206 222 255 / 0.95) 0 22%, rgb(206 222 255 / 0.21) 36%, rgb(206 222 255 / 0) 100%) 10.6% 40% / 8px 8px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.75) 0 50%, rgb(244 242 238 / 0) 100%) 38.3% 32% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.78) 0 50%, rgb(244 242 238 / 0) 100%) 64.0% 22% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.82) 0 48%, rgb(244 242 238 / 0) 100%) 74.9% 50% / 3.2px 3.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.8) 0 50%, rgb(244 242 238 / 0) 100%) 66.8% 78% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.82) 0 50%, rgb(244 242 238 / 0) 100%) 7.3% 64% / 2.2px 2.2px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.95) 0 22%, rgb(244 242 238 / 0.21) 36%, rgb(244 242 238 / 0) 100%) 84.2% 33% / 8px 8px no-repeat, radial-gradient(circle closest-side, rgb(244 242 238 / 0.65) 0 50%, rgb(244 242 238 / 0) 100%) 91.9% 74% / 2.2px 2.2px no-repeat; } @media (min-width: 64em) { .hdr-field { -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--b) - 1.5rem), transparent calc(var(--b) - 0.5rem), transparent calc(var(--b) + 13.75rem), #000 calc(var(--b) + 14.75rem), #000 calc(100% - var(--b) - 34.5rem), transparent calc(100% - var(--b) - 33.5rem), transparent calc(100% - var(--b) + 0.5rem), #000 calc(100% - var(--b) + 1.5rem)); mask-image: linear-gradient(90deg, #000 calc(var(--b) - 1.5rem), transparent calc(var(--b) - 0.5rem), transparent calc(var(--b) + 13.75rem), #000 calc(var(--b) + 14.75rem), #000 calc(100% - var(--b) - 34.5rem), transparent calc(100% - var(--b) - 33.5rem), transparent calc(100% - var(--b) + 0.5rem), #000 calc(100% - var(--b) + 1.5rem)); } } /* the shooting star: a thin tail with a bright head, crossing the open sky left of the links (left of the moon on tablets) */ .hdr-shoot { --sx: -9rem; --sy: 2.6rem; --sa: 164deg; position: absolute; top: 12%; left: calc(100% - var(--gutter) - 17rem); width: 4.5rem; height: 1.5px; border-radius: 1px; background: linear-gradient(90deg, rgb(244 242 238 / 0), rgb(244 242 238 / 0.22) 55%, rgb(255 252 244 / 0.95)); opacity: 0; } .hdr-shoot::after { content: ""; position: absolute; right: -1px; top: 50%; width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%; background: #FFFDF8; box-shadow: 0 0 6px 1px rgb(255 250 235 / 0.7); } @media (max-width: 39.99em) { .hdr-shoot { display: none; } } /* no open sky to cross on a phone */ @media (min-width: 64em) { .hdr-shoot { --sx: -13rem; --sy: 4.3rem; --sa: 161deg; left: calc(100% - var(--b) - 38rem); } } .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; pointer-events: none; background: linear-gradient(90deg, rgb(255 190 140 / 0), rgb(255 190 140 / 0.95) 50%, rgb(255 190 140 / 0)) no-repeat -30% 0 / 16% 100%; } .header-wrap { position: relative; } .brand { position: relative; } .brand img { position: relative; z-index: 1; display: block; } /* V25 (Jeremy: the moon behind the logo, "dont put it here", "maybe the top right of the header"): the moon sits up in the sky at the right. 1568px and up, in the open sky right of the button; 1024 to 1567px, smaller, in the top right corner past the button; tablets, just left of the Menu button; phones, midway between the logo and the Menu button; under 360px it is hidden (no room). It lives in .hdr-sky, which clips it to the bar, so it can rise from below on load. --moon is the disc's width. The halo box is 3.2 discs wide: its own background is a patch of plain night that hides any star too close to the moon, ::before is the halo, the inner is the ring that goes out with the howl, ::after is the disc. */ .hdr-moon { --moon: 1.125rem; position: absolute; top: 50%; right: min(calc(var(--gutter) + 9.15rem), calc(50% - 1.8rem)); width: calc(var(--moon) * 3.2); aspect-ratio: 1; margin: calc(var(--moon) * -1.6) calc(var(--moon) * -1.6) 0 0; background: radial-gradient(circle closest-side, var(--ink) 0 52%, rgb(36 34 31 / 0) 82%); } .hdr-moon::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle closest-side, rgb(255 246 226 / 0.45) 0 30%, rgb(255 246 226 / 0.33) 36%, rgb(255 246 226 / 0.17) 48%, rgb(255 246 226 / 0.07) 62%, rgb(255 246 226 / 0.02) 80%, rgb(255 246 226 / 0) 95%); } .hdr-moon i, .hdr-moon::after { position: absolute; left: 50%; top: 50%; width: var(--moon); aspect-ratio: 1; margin: calc(var(--moon) / -2) 0 0 calc(var(--moon) / -2); border-radius: 50%; } .hdr-moon i { box-shadow: 0 0 0 0.5px rgb(255 246 226 / 0.3), 0 0 5px 1px rgb(255 246 226 / 0.3), inset 0 0 5px 1px rgb(255 246 226 / 0.3); opacity: 0; } .hdr-moon::after { content: ""; background: radial-gradient(circle at 33% 31%, rgb(132 125 114 / 0.36) 0 13%, rgb(132 125 114 / 0) 26%), radial-gradient(circle at 60% 32%, rgb(132 125 114 / 0.3) 0 7%, rgb(132 125 114 / 0) 17%), radial-gradient(circle at 71% 50%, rgb(132 125 114 / 0.28) 0 7%, rgb(132 125 114 / 0) 16%), radial-gradient(circle at 27% 58%, rgb(132 125 114 / 0.26) 0 9%, rgb(132 125 114 / 0) 21%), radial-gradient(circle at 55% 74%, rgb(132 125 114 / 0.2) 0 4%, rgb(132 125 114 / 0) 11%), radial-gradient(circle at 42% 38%, #FFFDF8 0, #F5F1E8 50%, #DDD7CB 100%); box-shadow: 0 0 0 0.5px rgb(255 253 248 / 0.22), 0 0 calc(var(--moon) * 0.3) rgb(255 247 228 / 0.4); } @media (max-width: 39.99em) { .hdr-moon { --ring: 2; } } /* a smaller ring on phones, so it stays clear of the logo and the Menu button */ @media (max-width: 22.49em) { .hdr-moon { display: none; } } /* no room between the logo and the Menu button */ @media (min-width: 64em) { .hdr-moon { --moon: 1.375rem; top: 35%; right: calc(var(--b) / 2); } } @media (min-width: 98em) { .hdr-moon { --moon: 1.75rem; top: 46%; } } .brand-eyes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; fill: var(--flame); opacity: 0; filter: drop-shadow(0 0 2px var(--flame)); } @media (prefers-reduced-motion: no-preference) { .hdr-stars { animation: hdr-twinkle 5s ease-in-out infinite; } .hdr-stars-2 { animation-duration: 6.6s; animation-delay: -2.4s; } .hdr-field-1 { animation: hdr-twinkle 5.8s ease-in-out -1.3s infinite; } .hdr-field-2 { animation: hdr-twinkle 7.4s ease-in-out -3.1s infinite; } .hdr-shoot { animation: hdr-shoot 23s linear 4s infinite; } .site-header::after { animation: hdr-ember 11s ease-in-out 2s infinite; } .hdr-moon { animation: moonrise 1.8s var(--ease-out) 0.25s both; } .hdr-moon::before { animation: moonglow 16s ease-in-out infinite; } .hdr-moon i { animation: moonring 16s ease-out infinite; } .brand-eyes { animation: wolf-eyes 16s ease-in-out infinite; } } .scene-paused .site-header *, .scene-paused .site-header::after, .scene-paused .hdr-moon::before, .scene-paused .hero-scene *, .scene-paused .hero-sky * { animation-play-state: paused !important; } @keyframes hdr-twinkle { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } @keyframes hdr-shoot { 0%, 93% { opacity: 0; transform: translate(0, 0) rotate(var(--sa)); } 94% { opacity: 0.9; } 97.5%, 100% { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(var(--sa)); } } @keyframes hdr-ember { 0% { background-position: -30% 0; } 55%, 100% { background-position: 130% 0; } } @keyframes moonrise { from { transform: translateY(120%); } to { transform: none; } } /* the shared 16s clock: the glow and the howl sit at 40% to 54% of the loop (6.4s to 8.6s) */ @keyframes moonglow { 0%, 38% { transform: scale(1); opacity: 0.85; } 44%, 52% { transform: scale(1.22); opacity: 1; } 60%, 100% { transform: scale(1); opacity: 0.85; } } @keyframes moonring { 0%, 41% { transform: scale(1); opacity: 0; } 44% { opacity: 0.5; } 55%, 100% { transform: scale(var(--ring, 2.6)); opacity: 0; } } @keyframes wolf-eyes { 0%, 40% { opacity: 0; } 44%, 52% { opacity: 1; } 58%, 100% { opacity: 0; } } .site-header :focus-visible { outline-color: var(--flame); } .site-header.is-hidden:not(:focus-within) { transform: translateY(-100%); } .site-header.is-scrolled { box-shadow: 0 12px 30px -18px rgba(36, 34, 31, 0.6); } .header-row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: 5.5rem; } .brand-group { display: flex; align-items: center; gap: 1.1rem; min-width: 0; } .brand { display: block; flex: none; } .brand img { height: 3.1rem; width: auto; } .nav-list { display: flex; align-items: center; gap: 0.25rem; font-weight: 600; font-size: var(--t-body); } .nav-list a { text-decoration: none; } .nav-list a:not(.button) { position: relative; display: inline-flex; align-items: center; min-height: 2.9rem; padding: 0 0.85rem; color: var(--on-ink); } .nav-list a:not(.button)::after { content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.45rem; height: 2px; background: var(--on-ink); transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--ease-out); } .nav-list a:not(.button):hover::after { transform: scaleX(1); } .nav-list a[aria-current="page"]:not(.button)::after { background: var(--flame); transform: scaleX(1); } .nav-act { margin-left: 0.75rem; } .nav-act .button { min-height: 3rem; padding-inline: 1.15rem 1rem; } .nav-act .button[aria-current="page"] { --b-bg: var(--on-ink); --b-bg-hover: #fff; --b-fg: var(--ink); } .nav-home, .nav-note { display: none; } .menu-toggle { display: none; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0 0.9rem; background: transparent; color: var(--on-ink); border: 0; border-radius: var(--r); box-shadow: inset 0 0 0 1.5px rgb(244 242 238 / 0.7); font-weight: 600; cursor: pointer; } .menu-bars { position: relative; width: 1.125rem; height: 0.75rem; } .menu-bars span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform 260ms var(--ease-out), top 260ms var(--ease-out); } .menu-bars span:first-child { top: 0; } .menu-bars span:last-child { top: calc(100% - 2px); } .menu-open .menu-bars span:first-child { top: calc(50% - 1px); transform: rotate(45deg); } .menu-open .menu-bars span:last-child { top: calc(50% - 1px); transform: rotate(-45deg); } @media (max-width: 63.99em) { html { scroll-padding-top: 5rem; } .header-row { height: 4.25rem; } .brand img { height: 2.35rem; } .menu-toggle { display: inline-flex; } .menu-open { overflow: hidden; } .site-nav { position: fixed; left: 0; right: 0; bottom: 0; top: var(--menu-top, 4.25rem); z-index: 29; background: var(--ink); padding: 0.5rem var(--gutter) max(1.5rem, env(safe-area-inset-bottom)); display: flex; flex-direction: column; overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-0.5rem); transition: opacity 220ms ease, transform 280ms var(--ease-out), visibility 0s linear 280ms; } .menu-open .site-nav { visibility: visible; opacity: 1; transform: none; transition: opacity 220ms ease, transform 280ms var(--ease-out), visibility 0s; } .menu-open .site-header { transform: none; } .nav-list { flex-direction: column; align-items: stretch; gap: 0; } .nav-home { display: block; } .nav-list li:not(.nav-act) { border-bottom: 1px solid rgb(244 242 238 / 0.22); } .nav-list a:not(.button) { display: flex; min-height: 0; padding: 0.85rem 0 0.7rem; font-family: var(--display); font-weight: 500; font-size: clamp(1.9rem, 1.2rem + 3vw, 2.5rem); line-height: 1; letter-spacing: -0.035em; } .nav-list a:not(.button)::after { display: none; } .nav-list a[aria-current="page"]:not(.button) { color: var(--flame); } .menu-open .nav-list li { animation: rise 500ms var(--ease-out) both; } .menu-open .nav-list li:nth-child(2) { animation-delay: 50ms; } .menu-open .nav-list li:nth-child(3) { animation-delay: 100ms; } .menu-open .nav-list li:nth-child(4) { animation-delay: 150ms; } .menu-open .nav-list li:nth-child(5) { animation-delay: 200ms; } .menu-open .nav-list li:nth-child(6) { animation-delay: 250ms; } .menu-open .nav-list li:nth-child(7) { animation-delay: 300ms; } .nav-act { margin: 1.75rem 0 0; } .nav-act .button { width: 100%; padding: 1.15rem 1.4rem; font-size: 1.125rem; } .nav-note { display: flex; align-items: center; gap: 0.6rem; margin-top: auto; padding-top: 2rem; color: var(--on-ink-muted); font-size: var(--t-small); } } /* ------------------------------------------------------------------ Hero: the words V21: the headline wide across the top, then one ruled row with the sentence and the two buttons. The desert runs along the bottom. */ .hero { border-bottom: var(--rule-soft); background: radial-gradient(70rem 30rem at 92% -12%, var(--haze) 0%, rgb(241 226 209 / 0) 62%); } .hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); row-gap: var(--s6); align-items: end; padding-block: clamp(3rem, 7vw, 6.5rem) clamp(1.5rem, 3vw, 3rem); } /* the horizon (V19): a paper-cut desert along the bottom edge; in flow, so the words always sit above it; 12.5vw keeps the drawing uncropped at every width */ .hero { --hs-h: clamp(110px, 12.5vw, 300px); } .hero-scene { position: relative; z-index: 0; display: block; width: 100%; height: var(--hs-h); } .hero > .wrap { z-index: 2; } .hs-far { fill: var(--stone-3); } .hs-mid { fill: var(--stone-2); } .hs-near { fill: var(--stone); } .hs-wolf { fill: var(--ink); } .hs-cactus { fill: var(--sage); } .hs-cactus-far { fill: var(--sage); opacity: 0.45; } /* V34: ribs, spines and blooms on the cactuses */ .hs-rib { fill: none; stroke: var(--sage-ink); stroke-width: 1.5; stroke-linecap: round; opacity: 0.75; } .hs-spine { fill: none; stroke: var(--sage-ink); stroke-width: 1.3; stroke-linecap: round; } .hs-bloom { fill: #FFF6DC; } .hs-bud { fill: var(--flame); } .hs-fruit { fill: var(--accent); } /* V34: the oasis. A pool on the near ground, reeds at its far end, rings on the water while the wolf drinks */ .hs-wet { fill: var(--stone-2); } .hs-water { fill: #7F9BB2; } .hs-shine { fill: #fff; opacity: 0.42; } .hs-deep { fill: var(--dusk); opacity: 0.38; } .hs-reed { fill: none; stroke: var(--sage-ink); stroke-width: 1.1; stroke-linecap: round; } .hs-cattail { fill: #6B4A32; } .hs-palm { fill: var(--sage); } .hs-palm-trunk { fill: #8C7A63; } .hs-rip { fill: none; stroke: #fff; stroke-width: 0.55; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; } .hs-sun { fill: #EA9C66; } /* V22: the wolf runs in once and stops on the ridge. The legs take their colour from --leg (the footer's are pale). */ .hs-wolf { --leg: var(--ink); --eye: var(--paper); --glint: 0; --eye-scale: 1.15; } .hs-run { opacity: 0; } .hs-howl, .hs-d1, .hs-d2, .hs-d3 { opacity: 0; } @media (prefers-reduced-motion: no-preference) { .hs-run { animation: hs-run 1.9s cubic-bezier(0.3, 0.5, 0.4, 1) 0.6s both; } .hs-stand { animation: hs-stand 1.9s linear 0.6s both; } .hs-level { animation: hs-level 16s linear infinite; } .hs-howl { animation: hs-howl 16s linear infinite; } .hs-d1 { animation: hs-d1 16s step-end infinite; } .hs-d2 { animation: hs-d2 16s step-end infinite; } .hs-d3 { animation: hs-d3 16s step-end infinite; } .hs-rip-1 { animation: hs-rip-1 16s linear infinite; } .hs-rip-2 { animation: hs-rip-2 16s linear infinite; } .hs-run .gait-1, .hs-run .gait-2, .hs-run .gait-3, .hs-run .gait-4, .hs-run .run-body { animation-iteration-count: 5; } } @keyframes hs-run { 0% { opacity: 1; transform: translateX(-1500px); } 86% { opacity: 1; transform: translateX(-12px); } 93%, 100% { opacity: 0; transform: translateX(0); } } /* the howl, on the header moon's 16s clock (header.css): the level head cross-fades to the raised one and back */ /* V34: before the howl the head goes down to the water in three quick steps (18% to 19.2%), drinks, and comes back up (34.2% to 35.4%) */ @keyframes hs-level { 0%, 17.99% { opacity: 1; } 18%, 35.39% { opacity: 0; } 35.4%, 40% { opacity: 1; } 41.5%, 53% { opacity: 0; } 54.5%, 100% { opacity: 1; } } @keyframes hs-d1 { 0% { opacity: 0; } 18% { opacity: 1; } 18.6% { opacity: 0; } 34.8% { opacity: 1; } 35.4% { opacity: 0; } 100% { opacity: 0; } } @keyframes hs-d2 { 0% { opacity: 0; } 18.6% { opacity: 1; } 19.2% { opacity: 0; } 34.2% { opacity: 1; } 34.8% { opacity: 0; } 100% { opacity: 0; } } @keyframes hs-d3 { 0% { opacity: 0; } 19.2% { opacity: 1; } 34.2% { opacity: 0; } 100% { opacity: 0; } } @keyframes hs-rip-1 { 0%, 20% { opacity: 0; transform: scale(0.2); } 20.6% { opacity: 0.9; } 26.5% { opacity: 0; transform: scale(1.3); } 26.6%, 27.4% { opacity: 0; transform: scale(0.2); } 28% { opacity: 0.9; } 34%, 100% { opacity: 0; transform: scale(1.3); } } @keyframes hs-rip-2 { 0%, 23.6% { opacity: 0; transform: scale(0.2); } 24.2% { opacity: 0.9; } 30.2% { opacity: 0; transform: scale(1.3); } 30.3%, 31% { opacity: 0; transform: scale(0.2); } 31.6% { opacity: 0.8; } 37.5%, 100% { opacity: 0; transform: scale(1.3); } } @keyframes hs-howl { 0%, 40% { opacity: 0; } 41.5%, 53% { opacity: 1; } 54.5%, 100% { opacity: 0; } } @keyframes hs-stand { 0%, 85% { opacity: 0; } 93%, 100% { opacity: 1; } } .hs-line { stroke: var(--accent); stroke-width: 2; } /* V34: the sky. A layer over the desert and under the words: three soft clouds drifting, two small flocks of birds crossing. Without motion (reduced motion) the clouds and one flock simply sit in the sky. The footer's pause button stops them too. */ .hero-sky { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; } .sky-cloud { position: absolute; height: auto; } .sky-cl { fill: #fff; } .sky-cl-back { fill: var(--stone-2); opacity: 0.6; } .sky-cloud-1 { left: 68%; top: 0.9vw; width: clamp(96px, 11vw, 230px); opacity: 0.8; } .sky-cloud-2 { left: 12%; bottom: calc(var(--hs-h) * 0.66); width: clamp(64px, 6.5vw, 140px); opacity: 0.7; } .sky-cloud-3 { left: 84%; top: 34%; width: clamp(72px, 8vw, 170px); opacity: 0.5; } .sky-flock { position: absolute; left: 58%; bottom: calc(var(--hs-h) * 0.8); width: 120px; height: 54px; } .sky-flock-2 { left: 30%; bottom: auto; top: 16%; width: 56px; height: 26px; opacity: 0.6; display: none; } .sky-bird { position: absolute; width: 28px; height: 14px; overflow: visible; } .sky-bird path { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; transform-box: fill-box; transform-origin: 50% 85%; } .sky-flock-1 .sky-bird-1 { left: 88px; top: 20px; } .sky-flock-1 .sky-bird-2 { left: 50px; top: 2px; width: 24px; height: 12px; } .sky-flock-1 .sky-bird-3 { left: 44px; top: 38px; width: 23px; height: 11.5px; } .sky-flock-1 .sky-bird-4 { left: 4px; top: 18px; width: 20px; height: 10px; } .sky-flock-2 .sky-bird { width: 17px; height: 8.5px; } .sky-flock-2 .sky-bird-1 { left: 0; top: 2px; } .sky-flock-2 .sky-bird-2 { left: 30px; top: 14px; } @media (prefers-reduced-motion: no-preference) { .sky-cloud { left: 0; will-change: transform; } .sky-cloud-1 { animation: sky-drift 170s linear -96s infinite; } .sky-cloud-2 { animation: sky-drift 120s linear -22s infinite; } .sky-cloud-3 { animation: sky-drift 210s linear -150s infinite; } .sky-flock { left: 0; } .sky-flock-1 { animation: sky-fly-1 44s linear 3.5s infinite both; } .sky-flock-2 { display: block; animation: sky-fly-2 67s linear 19s infinite both; } .sky-bird path { animation: sky-flap 0.56s ease-in-out infinite alternate; } .sky-bird-2 path { animation-duration: 0.5s; animation-delay: -0.2s; } .sky-bird-3 path { animation-duration: 0.62s; animation-delay: -0.35s; } .sky-bird-4 path { animation-duration: 0.47s; animation-delay: -0.1s; } } @keyframes sky-drift { from { transform: translateX(-26vw); } to { transform: translateX(104vw); } } @keyframes sky-fly-1 { 0% { transform: translate(-120px, 1.5vw); } 30% { transform: translate(52vw, -0.6vw); } 60%, 100% { transform: translate(104vw, 0.8vw); } } @keyframes sky-fly-2 { 0% { transform: translate(104vw, 0); } 50%, 100% { transform: translate(-60px, 1.6vw); } } @keyframes sky-flap { from { transform: scaleY(1); } to { transform: scaleY(0.3); } } @media (max-width: 47.99em) { .sky-cloud-3 { display: none; } .sky-bird { scale: 0.8; } .sky-flock-1 { bottom: calc(var(--hs-h) * 0.64); } } .hero-h1 { grid-column: 1 / -1; font-size: clamp(2.6rem, 0.2rem + 6.4vw, 7rem); line-height: 0.95; letter-spacing: -0.045em; max-width: 15ch; margin: 0; font-weight: 600; } /* V21: one ruled row under the headline, the sentence left and the buttons right, so the words and the actions read as one block */ .hero-text { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4) var(--s5); min-width: 0; padding-top: var(--s4); border-top: var(--rule-soft); } .hero-lead { font-size: var(--t-lead); line-height: 1.45; max-width: 40ch; } .hero-text .button-row { margin-top: 0; } @media (max-width: 63.99em) { .hero-grid { row-gap: var(--s5); } .hero-h1 { max-width: 11ch; } } @media (max-width: 47.99em) { .hero-grid { padding-block: 2rem 1.5rem; } .hero-text .button-row { width: 100%; } } /* V36 hero animals (Jeremy, Nov 11 2026: "something clever and creative", "can we not do them all?"). One thing at a time on a 48 s clock, three of the wolf's 16 s cycles: the pack crosses the far ridge (3 to 28 s), the jackrabbit peeks over its shrub while the wolf drinks and bolts when it howls (35 to 40 s), and the hawk circles the whole time. With reduced motion the rabbit just sits by its shrub, the hawk hangs in one spot and the pack stays away. */ .hs-pack { fill: var(--ink-3); --leg: var(--ink-3); opacity: 0; } .hs-pack .leg-far { opacity: 0.75; } .hs-hare { fill: #5B4F45; } .hs-hare-eye { fill: var(--paper); opacity: 0.9; } .hs-hare-run, .hs-hare-a { opacity: 0; } .hs-shrub { fill: #8E9479; } .hs-shrub-lit { fill: #A9AC93; } .hs-shrub-twig { fill: none; stroke: #6E6450; stroke-width: 0.7; stroke-linecap: round; } .hs-hawk-shade { fill: var(--ink); opacity: 0.09; } .hs-hawk-orbit { transform: rotate(-35deg) translateX(46px); } .sky-hawk { position: absolute; left: 81%; top: 21%; width: 0; height: 0; transform: scaleY(0.5); --hawk-r: clamp(40px, 3.9vw, 112px); } .sky-hawk-orbit { position: absolute; left: 0; top: 0; width: 0; height: 0; transform: rotate(-35deg) translateX(var(--hawk-r)); } .sky-hawk-bird { position: absolute; width: clamp(34px, 3vw, 82px); max-width: none; height: auto; aspect-ratio: 17 / 22; left: 0; top: 0; translate: -50% -50%; rotate: -90deg; fill: var(--ink-3); opacity: 0.82; overflow: visible; } @media (max-width: 47.99em) { .sky-hawk { left: 80%; top: 18%; } } @media (prefers-reduced-motion: no-preference) { .hs-pack { opacity: 1; } .hs-packer { animation: hs-pack 48s linear infinite both; } .hs-p2 { animation-delay: 0.52s; } .hs-p3 { animation-delay: 1.06s; } .hs-p4 { animation-delay: 1.5s; } .hs-packer .run-body, .hs-packer .gait-1, .hs-packer .gait-2, .hs-packer .gait-3, .hs-packer .gait-4 { animation-duration: 0.62s; } .hs-p2 .run-body, .hs-p2 [class^="gait"] { animation-delay: -0.2s; } .hs-p3 .run-body, .hs-p3 [class^="gait"] { animation-delay: -0.41s; } .hs-p4 .run-body, .hs-p4 [class^="gait"] { animation-delay: -0.1s; } .hs-hare-sit { animation: hs-hare-sit 48s linear infinite both; } .hs-hare-run { animation: hs-hare-run 48s linear infinite both; } .hs-hare-hop { animation: hs-hare-hop 0.3s infinite; } .hs-hare-a { animation: hs-hare-a 0.3s steps(1) infinite; } .hs-hare-b { animation: hs-hare-b 0.3s steps(1) infinite; } .sky-hawk-orbit, .hs-hawk-orbit { animation: hawk-orbit 26s linear infinite; } .sky-hawk-orbit { --r: var(--hawk-r); } .hs-hawk-orbit { --r: 46px; } } @keyframes hs-pack { 0.000% { transform: translate(1214.0px, 74.00px) rotate(0.00deg); } 6.250% { transform: translate(1214.0px, 74.00px) rotate(0.00deg); } 6.750% { transform: translate(1202.0px, 74.00px) rotate(0.00deg); } 6.917% { transform: translate(1198.0px, 74.16px) rotate(-4.57deg); } 10.917% { transform: translate(1102.0px, 81.84px) rotate(-4.57deg); } 11.083% { transform: translate(1098.0px, 81.76px) rotate(6.84deg); } 15.083% { transform: translate(1002.0px, 70.24px) rotate(6.84deg); } 15.250% { transform: translate(998.0px, 70.16px) rotate(-4.57deg); } 19.250% { transform: translate(902.0px, 77.84px) rotate(-4.57deg); } 19.417% { transform: translate(898.0px, 77.76px) rotate(6.84deg); } 23.417% { transform: translate(802.0px, 66.24px) rotate(6.84deg); } 23.583% { transform: translate(798.0px, 66.28px) rotate(-7.97deg); } 27.583% { transform: translate(702.0px, 79.72px) rotate(-7.97deg); } 27.750% { transform: translate(698.0px, 79.84px) rotate(4.57deg); } 31.750% { transform: translate(602.0px, 72.16px) rotate(4.57deg); } 31.917% { transform: translate(598.0px, 72.30px) rotate(-8.53deg); } 35.083% { transform: translate(522.0px, 83.70px) rotate(-8.53deg); } 35.250% { transform: translate(518.0px, 83.72px) rotate(7.97deg); } 39.250% { transform: translate(422.0px, 70.28px) rotate(7.97deg); } 39.417% { transform: translate(418.0px, 70.22px) rotate(-6.34deg); } 43.000% { transform: translate(332.0px, 79.78px) rotate(-6.34deg); } 43.167% { transform: translate(328.0px, 79.89px) rotate(3.27deg); } 45.917% { transform: translate(262.0px, 76.11px) rotate(3.27deg); } 46.083% { transform: translate(258.0px, 76.35px) rotate(-9.93deg); } 49.250% { transform: translate(182.0px, 89.65px) rotate(-9.93deg); } 49.417% { transform: translate(178.0px, 89.87px) rotate(3.81deg); } 53.000% { transform: translate(92.0px, 84.13px) rotate(3.81deg); } 53.167% { transform: translate(88.0px, 84.18px) rotate(-5.08deg); } 56.750% { transform: translate(2.0px, 91.82px) rotate(-5.08deg); } 56.917% { transform: translate(-2.0px, 92.00px) rotate(0.00deg); } 57.417% { transform: translate(-14.0px, 92.00px) rotate(0.00deg); } 100.000% { transform: translate(-14.0px, 92.00px) rotate(0.00deg); } } @keyframes hs-hare-run { 0%, 80.812% { opacity: 0; } 80.833%, 84.396% { opacity: 1; } 84.417%, 100% { opacity: 0; } 0.000% { transform: translate(717.0px, 131.46px); } 80.833% { transform: translate(717.0px, 131.46px); } 81.396% { transform: translate(798.0px, 128.08px); } 81.424% { transform: translate(802.0px, 128.12px); } 82.507% { transform: translate(958.0px, 137.88px); } 82.535% { transform: translate(962.0px, 137.90px); } 83.618% { transform: translate(1118.0px, 130.10px); } 83.646% { transform: translate(1122.0px, 130.10px); } 84.174% { transform: translate(1198.0px, 133.90px); } 84.201% { transform: translate(1202.0px, 134.00px); } 84.396% { transform: translate(1230.0px, 134.00px); } 100.000% { transform: translate(1230.0px, 134.00px); } } @keyframes hs-hare-sit { 0%, 72.083% { transform: translateY(112px); } 73.021%, 74.792% { transform: translateY(30px); animation-timing-function: cubic-bezier(.3, 0, .2, 1); } 75.521%, 78.333% { transform: translateY(0); } 78.500% { transform: translateY(-1.6px); } 78.750%, 80.792% { transform: translateY(0); } 80.833%, 100% { transform: translateY(112px); } } @keyframes hs-hare-hop { 0% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .6, .4, 1); } 50% { transform: translateY(-26px); animation-timing-function: cubic-bezier(.6, 0, .8, .4); } 100% { transform: translateY(0); } } @keyframes hs-hare-a { 0%, 14% { opacity: 0; } 15%, 86% { opacity: 1; } 87%, 100% { opacity: 0; } } @keyframes hs-hare-b { 0%, 14% { opacity: 1; } 15%, 86% { opacity: 0; } 87%, 100% { opacity: 1; } } @keyframes hawk-orbit { from { transform: rotate(-35deg) translateX(var(--r)); } to { transform: rotate(-395deg) translateX(var(--r)); } } /* ------------------------------------------------------------------ How it works: your part, then mine, then one checkpoint Three columns under a heavy rule: You. / Me. / Us. A small label with an arrow says the order; a short list under each. */ .phases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s5); } /* V29 (Nov 10 2026, Jeremy: "how can you make this piece special"): the trail. One line runs through the three steps and draws itself from You to Us when the section scrolls in, turning from green to orange to blue on the way, with a small marker where each step starts. On phones and tablets the steps stack, so the trail runs down the left side instead. ::before is this step's stretch of the line (it reaches across the gap to the next step), ::after is the marker. --td is when this step's stretch starts drawing; each one starts as the one before it finishes. */ .phase { position: relative; display: grid; gap: var(--s3); align-content: start; padding-top: calc(var(--s4) + 8px); --phase: var(--ink); --next: var(--phase); --td: 0ms; } .phase::before { content: ""; position: absolute; left: 0; right: calc(var(--col-gap, var(--s5)) * -1); top: 4px; height: 2px; background: linear-gradient(90deg, var(--phase) 0 60%, var(--next)); transform: scaleX(0); transform-origin: left; transition: transform 600ms linear calc(var(--td) + 250ms); } .phase-4::before { right: 0; transition-duration: 900ms; transition-timing-function: var(--ease-out); } .phase::after { content: ""; position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--phase); box-shadow: 0 0 0 4px var(--stone); transform: scale(0); transition: transform 450ms cubic-bezier(0.3, 1.5, 0.5, 1) calc(var(--td) + 150ms); } html:not(.js) .phase::before, .phases.is-in .phase::before, html:not(.js) .phase::after, .phases.is-in .phase::after { transform: none; } .phase-1 { --phase: var(--dusk); --next: var(--sage); } .phase-2 { --phase: var(--sage); --next: var(--accent); --td: 600ms; } .phase-3 { --phase: var(--accent); --next: var(--sage); --td: 1200ms; } .phase-4 { --phase: var(--sage); --td: 1800ms; } .phase-k, .phase-h, .phase-list .icon { color: var(--phase); } .phase-k { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 650; font-size: var(--t-small); } .phase-k .icon { width: 1rem; height: 1rem; } /* the small labels sit on sand: the deeper green and orange keep them above 4.5:1 */ .phase-2 .phase-k, .phase-4 .phase-k { color: var(--sage-ink); } .phase-3 .phase-k { color: var(--accent-dark); } .phase-h { font-size: clamp(2.75rem, 1.4rem + 4vw, 5.5rem); line-height: 0.95; letter-spacing: -0.04em; font-weight: 600; } .phase-lead { font-size: var(--t-lead); line-height: 1.4; font-weight: 500; max-width: 24ch; } .phase-list { display: grid; gap: 0.55rem; margin-top: var(--s2); padding-top: var(--s3); border-top: var(--rule-soft); } .phase-list li { display: flex; gap: 0.6rem; align-items: flex-start; line-height: 1.4; } .phase-list .icon { width: 1.1rem; height: 1.1rem; flex: none; margin-top: 0.2rem; } @media (max-width: 63.99em) { .phases { grid-template-columns: 1fr; gap: var(--s6); } .phase-lead { max-width: 36ch; } /* the trail runs down the left side; each step draws its own stretch as it scrolls in */ .phase { padding-top: 0; padding-left: 1.9rem; --td: 0ms; } .phase::before { left: 4px; right: auto; top: 0.5rem; bottom: calc(var(--s6) * -1 - 0.5rem); width: 2px; height: auto; background: linear-gradient(180deg, var(--phase) 0 60%, var(--next)); transform: scaleY(0); transform-origin: top; transition-duration: 900ms; transition-timing-function: var(--ease-out); } .phase-4::before { right: auto; bottom: 0; } .phase::after { top: 0.3rem; } } /* what happens once the job is on: one quiet line under the three steps */ /* V42 (Nov 11 2026, Jeremy: "make all the spacing look better. and just make this whole section look like the key selling point.. like it does not get more important than this. we are explaining our whole purpose"). The section gets its own stage: more room above and below, a soft light behind the scenes, a wider column than the rest of the page (so the scenes are bigger), a centred heading under a small "How it works" label in the three step colours, the three steps lined up row by row (subgrid: scenes, labels, names, lines and lists all start at the same height), and a closing row with what I'll ask for once I take the job and the Start a project button. */ .how-stage { padding-block: clamp(4.5rem, 8vw, 8.5rem); background: radial-gradient(60% 45% at 50% 46%, rgb(255 253 248 / 0.6), rgb(255 253 248 / 0) 72%), linear-gradient(180deg, var(--stone) 0%, var(--stone-3) 100%); } /* the facet texture fades out well before the picture ends, so no hard edge runs through the lists */ #how.tex::before { --tex-fade: linear-gradient(180deg, transparent 0, #000 7rem, #000 24rem, transparent 44rem); } .wrap-how { max-width: 1880px; } .how-head { display: grid; justify-items: center; gap: var(--s4); max-width: 62rem; margin: 0 auto clamp(3rem, 6vw, 5.5rem); text-align: center; } .how-eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; font-size: var(--t-small); font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; } .how-dots { display: inline-flex; gap: 0.3rem; } .how-dots i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--dusk); } .how-dots i:nth-child(2) { background: var(--accent); } .how-dots i:nth-child(3) { background: var(--sage); } .how-title { font-size: clamp(2.75rem, 1.1rem + 5.4vw, 6.75rem); line-height: 0.98; letter-spacing: -0.045em; font-weight: 600; } .how-head .lead { max-width: 56ch; text-wrap: balance; } /* V44: the longer line sits in two or three even lines, no lone "your name." */ .phases { --col-gap: clamp(1.5rem, 2.4vw, 3rem); column-gap: var(--col-gap); } /* V44 (Jeremy, Nov 11 2026: "we need to add a checkpoint phase for mockups before we get to deep on a build"): four steps now, You. / Us. (the mockup, before the build) / Me. / Us. (before launch), the two checkpoints in the same green. Four across on wide screens (100em and up), two by two on laptops and tablets (each row lined up with subgrid), one column on phones. */ @media (min-width: 64em) { .phases { grid-template-rows: repeat(5, auto) clamp(3.5rem, 6vw, 5.5rem) repeat(5, auto); row-gap: 0; } .phase { grid-row: span 5; grid-template-rows: subgrid; row-gap: var(--s3); } .phase-3, .phase-4 { grid-row: 7 / span 5; } /* the second step ends its row: its stretch of the trail stops at its own edge, as the last one does */ .phase-2::before { right: 0; } .phase-2 .phase-pulse { width: 100%; } } @media (min-width: 100em) { .phases { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); } .phase-3, .phase-4 { grid-row: span 5; } .phase-2::before { right: calc(var(--col-gap, var(--s5)) * -1); } .phase-2 .phase-pulse { width: calc(100% + var(--col-gap, var(--s5))); } } .phase-lead { max-width: 30ch; } .phase-sub { display: block; margin-top: 0.4rem; font-size: 1.0625rem; line-height: 1.45; font-weight: 450; } .phase-list { font-size: 1.0625rem; align-content: start; } .phases-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s5) var(--s7); margin-top: clamp(3rem, 6vw, 5rem); padding: clamp(1.25rem, 2.2vw, 2rem) clamp(1.25rem, 2.6vw, 2.5rem); border-radius: 16px; background: rgb(255 253 248 / 0.72); box-shadow: 0 0 0 1px rgb(36 34 31 / 0.06), 0 22px 40px -30px rgb(36 34 31 / 0.45); } .phases-end .phases-note { flex: 1 1 32rem; margin: 0; padding: 0; border: 0; } .phases-end .button { flex: none; } /* how-scenes:start (V38, generated together with src/partials/how-scenes.html by v38/gen_cards.py) Jeremy (Nov 11 2026): the old scenes were "a little bleh" and "too clip arty"; he picked "Real devices + logo wolf". V38: no mug ("the coffee seems so random"), TVIS on every screen ("use TVIS for every example"), a more muscular wolf. Each card is a small lit product shot: a real phone, a real laptop and real interface cards on a table in soft window light, showing a real site I built (TVIS Construction). Sizes are in em, where 1em is 1/400 of the card's width (container units), so a card scales like a picture. One 24 s clock (it starts when the list scrolls in, .phases.is-in) runs all three, and a small faceted wolf (the logo's facets and orange ear) walks through them: it watches the questions, watches the build, and howls when the site goes live. The resting style of every piece is its final state, so reduced motion and no-JS show three finished pictures with the wolf sitting in Us. The footer's pause button stops them too. */ .phase-scene { position: relative; aspect-ratio: 400 / 240; margin-bottom: var(--s3); container-type: inline-size; overflow: hidden; isolation: isolate; border-radius: clamp(10px, 0.9vw, 16px); background: radial-gradient(120% 95% at 14% 0%, #FFFDF8 0%, rgb(255 253 248 / 0) 62%), linear-gradient(180deg, #F2ECE2 0%, #ECE4D7 100%); box-shadow: 0 0 0 1px rgb(36 34 31 / 0.07), 0 34px 54px -36px rgb(36 34 31 / 0.6), 0 8px 18px -12px rgb(36 34 31 / 0.22); } .dv { position: absolute; inset: 0; font-size: 1px; font-size: 0.25cqw; font-family: var(--text); color: var(--ink); line-height: 1.25; } .dv * { box-sizing: border-box; } .dv i, .dv b { font-style: normal; } .dv-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* the room: window light on the wall, a table */ .dv-window { position: absolute; left: -30em; top: -20em; width: 230em; height: 230em; background: linear-gradient(115deg, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0) 62%); clip-path: polygon(18% 0, 46% 0, 78% 100%, 38% 100%); filter: blur(5em); } .dv-table { position: absolute; left: 0; right: 0; top: 182em; bottom: 0; background: linear-gradient(180deg, #E4DACB 0, #EBE3D6 18%, #EFE8DD 100%); box-shadow: 0 -1px 0 rgb(255 255 255 / 0.6), inset 0 1px 0 rgb(36 34 31 / 0.06); } .dv-fshadow { position: absolute; background: radial-gradient(closest-side, rgb(36 34 31 / 0.36), rgb(36 34 31 / 0.12) 55%, rgb(36 34 31 / 0)); } .dv-glass { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgb(255 255 255 / 0) 38%, rgb(255 255 255 / 0.16) 46%, rgb(255 255 255 / 0.04) 58%, rgb(255 255 255 / 0) 60%); } /* a phone: graphite frame, glass, the camera island, a side button */ .dv-phone { position: absolute; z-index: 2; border-radius: 15em; padding: 3.6em; background: linear-gradient(150deg, #66666C 0%, #2A2A2E 14%, #18181B 55%, #34343A 100%); box-shadow: inset 0 0 0 0.6em #0D0D0F, inset 0 0 0 1em rgb(255 255 255 / 0.06), 0 26em 30em -16em rgb(36 34 31 / 0.55), 0 6em 12em -4em rgb(36 34 31 / 0.22); } .dv-ph-screen { position: relative; width: 100%; height: 100%; border-radius: 11.8em; overflow: hidden; background: #FBFBFA; } .dv-island { position: absolute; z-index: 3; left: 50%; top: 4.2em; width: 24em; height: 7em; margin-left: -12em; border-radius: 4em; background: #0B0B0C; } .dv-btn-side { position: absolute; right: -1.1em; top: 46em; width: 1.4em; height: 22em; border-radius: 0 1em 1em 0; background: linear-gradient(90deg, #1B1B1E, #4A4A50); } /* a laptop: dark bezel, the screen, an aluminium deck */ .dv-laptop { position: absolute; z-index: 1; } .dv-lid { position: absolute; inset: 0; border-radius: 9em 9em 2.5em 2.5em; padding: 6em 6em 9em; background: linear-gradient(180deg, #2C2C30, #161618); box-shadow: inset 0 0 0 0.7em #3A3A3F, 0 4em 10em -6em rgb(36 34 31 / 0.4); } .dv-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 1.5em; background: #fff; } .dv-cam { position: absolute; left: 50%; top: 2.4em; width: 2.2em; height: 2.2em; margin-left: -1.1em; border-radius: 50%; background: #3C3C42; } .dv-deck { position: absolute; left: -9%; right: -9%; top: 100%; height: 8.5em; border-radius: 0 0 10em 10em / 0 0 6em 6em; background: linear-gradient(180deg, #E6E7EA 0%, #CDCFD5 45%, #A9ACB4 100%); box-shadow: inset 0 0.8em 0 #F4F5F7; } .dv-notch { position: absolute; left: 50%; top: 0; width: 34em; height: 2.6em; margin-left: -17em; border-radius: 0 0 2.4em 2.4em; background: #B4B7BE; } /* browser chrome inside a screen */ .dv-bar { display: flex; align-items: center; gap: 5em; height: 13em; padding: 0 5em; background: #F1F0EE; border-bottom: 0.5em solid #E2E0DC; } .dv-dots { display: flex; gap: 1.8em; } .dv-dots b { width: 3.2em; height: 3.2em; border-radius: 50%; background: #D3CFC9; } .dv-url { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.37em; height: 1.5em; border-radius: 0.75em; background: #fff; font-size: 5.4em; font-weight: 550; color: var(--muted); position: relative; } .dv-url .dv-ic { width: 1.2em; height: 1.2em; } .dv-ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .dv-page { position: relative; height: calc(100% - 13em); overflow: hidden; background: #FAF8F3; } .dv-shot { display: block; width: 100%; height: auto; max-width: none; } /* ---- 1. You */ .dv1-phone .dv-ph-screen { display: flex; flex-direction: column; } .dv-status { display: flex; justify-content: space-between; align-items: center; height: 2.7em; padding: 0 1.7em; font-size: 5.6em; } .dv-status b { font-weight: 700; } .dv-sig { width: 2.6em; height: 1.1em; border-radius: 0.3em; border: 0.15em solid var(--ink); } .dv-app { display: flex; align-items: center; gap: 4em; padding: 2em 6em 5em; border-bottom: 0.6em solid #ECEAE6; } .dv-av { width: 13em; height: 13em; padding: 1.6em; border-radius: 50%; background: var(--stone); flex: none; } .dv-app b { display: block; font-size: 6.6em; font-weight: 700; line-height: 1.1; } .dv-app span { display: block; font-size: 5.2em; color: var(--muted); } .dv-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 5em 5em 4em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 4.5em); mask-image: linear-gradient(180deg, transparent 0, #000 4.5em); } .dv-chat-in { flex: none; display: flex; flex-direction: column; gap: 3.2em; } .dv-msg { max-width: 78%; padding: 0.6em 0.9em; border-radius: 1.25em; font-size: 5.6em; line-height: 1.3; font-weight: 550; } .dv-arow { position: relative; align-self: flex-end; max-width: 78%; display: flex; justify-content: flex-end; } .dv-arow .dv-msg { max-width: none; } .dv-msg.dv-q { align-self: flex-start; background: var(--dusk); color: #fff; border-bottom-left-radius: 0.3em; transform-origin: 0 100%; } .dv-msg.dv-a { align-self: flex-end; background: #ECEEF1; color: var(--ink); border-bottom-right-radius: 0.3em; transform-origin: 100% 100%; } .dv-typing { position: absolute; right: 0; bottom: 0; display: flex; gap: 0.3em; padding: 0.75em 0.85em; border-radius: 1.25em 1.25em 0.3em 1.25em; background: #ECEEF1; font-size: 5.6em; opacity: 0; } .dv-typing b { width: 0.5em; height: 0.5em; border-radius: 50%; background: #9AA3AD; } .dv-sent { align-self: center; display: inline-flex; align-items: center; gap: 0.4em; margin-top: 0.5em; padding: 0.35em 0.9em; border-radius: 2em; background: #E4EAF0; color: var(--dusk); font-size: 5.2em; font-weight: 700; } .dv-tick { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .dv-input { display: flex; align-items: center; justify-content: space-between; margin: 0 5em 6em; height: 14em; padding: 0 2.6em 0 6em; border-radius: 7em; background: #F0F0EE; } .dv-input span { font-size: 5.4em; color: #9A948C; } .dv-send { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--dusk); color: #fff; font-size: 5.6em; } .dv-send .dv-ic { width: 1em; height: 1em; } /* the notes card beside the phone: what I took from the chat */ .dv-note { position: absolute; z-index: 2; left: 24em; top: 30em; width: 172em; padding: 7em 8em 4em; border-radius: 8em; background: #fff; box-shadow: 0 0 0 0.5em rgb(36 34 31 / 0.05), 0 14em 22em -12em rgb(36 34 31 / 0.45), 0 2em 4em -2em rgb(36 34 31 / 0.12); } .dv-note-hd { display: flex; align-items: center; gap: 4.5em; padding-bottom: 5em; } .dv-note-hd b { display: block; font-size: 6.8em; font-weight: 700; line-height: 1.15; } .dv-note-hd span { display: block; font-size: 4.9em; color: var(--muted); } .dv-note .dv-note-ic { background: #E4EAF0; color: var(--dusk); } .dv-note-row { position: relative; max-width: none; display: flex; align-items: center; gap: 5em; height: 24em; margin: 0; border-top: 0.5em solid #EEEBE6; } .dv-note-k { width: 6.9em; flex: none; font-size: 5em; font-weight: 500; color: var(--muted); } .dv-note-v { font-size: 6.4em; font-weight: 600; color: var(--ink); white-space: nowrap; } .dv-note-sk { position: absolute; left: 39em; top: 50%; width: 64em; height: 4.4em; margin-top: -2.2em; border-radius: 2.2em; background: #ECE8E1; opacity: 0; } .dv-note-ok { position: absolute; right: 0; top: 50%; display: grid; place-items: center; width: 1.6em; height: 1.6em; margin-top: -0.8em; border-radius: 50%; background: var(--dusk); color: #fff; font-size: 6.4em; } .dv-note-ok .dv-tick { width: 1em; height: 1em; } /* ---- 2. Me */ .dv-skel { position: absolute; inset: 0; padding: 7em 10em; } .dv-skel i { display: block; background: #E9E5DE; border-radius: 1.5em; margin-bottom: 4em; } .sk-nav { height: 4em; width: 60%; } .sk-h1 { height: 9em; width: 52%; margin-top: 9em; } .sk-h2 { height: 9em; width: 40%; } .sk-p { height: 3.4em; width: 48%; } .sk-p2 { width: 38%; } .sk-btn { height: 8em; width: 22%; border-radius: 4em !important; } .dv-skel .sk-img { position: absolute; right: 12em; top: 22em; width: 54em; height: 62em; margin: 0; border-radius: 6em; } .dv2-built { position: absolute; inset: 0; } .dv2-scan { position: absolute; left: 0; right: 0; top: 100%; height: 1.2em; margin-top: -0.6em; background: var(--accent); box-shadow: 0 0 6em 2em rgb(201 75 23 / 0.35); opacity: 0; } .dv-cards { position: absolute; z-index: 2; left: 274em; top: 26em; width: 116em; display: grid; gap: 5em; } .dv-card { position: relative; display: flex; align-items: center; gap: 4.5em; height: 30em; padding: 0 6em 0 5em; border-radius: 7em; background: #fff; box-shadow: 0 0 0 0.5em rgb(36 34 31 / 0.05), 0 10em 18em -10em rgb(36 34 31 / 0.4), 0 2em 4em -2em rgb(36 34 31 / 0.12); } .dv-card-ic { display: grid; place-items: center; flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--accent-tint); color: var(--accent-dark); font-size: 9em; } .dv-card-ic .dv-ic { width: 0.62em; height: 0.62em; } .dv-card b { display: block; font-size: 6.4em; font-weight: 700; line-height: 1.15; } .dv-card span { display: block; font-size: 4.9em; color: var(--muted); white-space: nowrap; } .dv-spin, .dv-ok { position: absolute; right: 5em; top: 50%; width: 11em; height: 11em; margin-top: -5.5em; border-radius: 50%; } .dv-spin { border: 1.4em solid var(--accent-tint); border-top-color: var(--accent); opacity: 0; } .dv-ok { display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 7em; width: 1.6em; height: 1.6em; margin-top: -0.8em; right: 0.7em; } .dv-ok .dv-tick { width: 1em; height: 1em; } /* ---- 3. Us */ .dv-pill { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.35em; font-weight: 650; color: var(--ink); } .dv-pill .dv-ic { width: 1.15em; height: 1.15em; } .dv-live { color: var(--good); opacity: 0; } .dv3-live { opacity: 1; } .dv-live i { width: 0.55em; height: 0.55em; border-radius: 50%; background: #2FA36B; box-shadow: 0 0 0 0.25em rgb(47 163 107 / 0.25); } .dv3-prev { opacity: 0; } .dv-page-ph { height: 100%; padding-top: 8.5em; background: #fff; } /* a status bar's worth of space, so the camera island sits above the site's header */ .dv3-phone { border-radius: 12em; padding: 3em; } .dv3-phone .dv-ph-screen { border-radius: 9.5em; } .dv3-phone .dv-island { top: 2.8em; width: 15em; height: 4.4em; margin-left: -7.5em; } /* a tablet: same graphite as the phone, a thin even bezel, the camera at the top */ .dv-tablet { position: absolute; z-index: 2; border-radius: 9em; padding: 4.6em; background: linear-gradient(150deg, #66666C 0%, #2A2A2E 14%, #18181B 55%, #34343A 100%); box-shadow: inset 0 0 0 0.6em #0D0D0F, inset 0 0 0 1em rgb(255 255 255 / 0.06), 0 26em 30em -16em rgb(36 34 31 / 0.55), 0 6em 12em -4em rgb(36 34 31 / 0.22); } .dv-tab-screen { position: relative; width: 100%; height: 100%; border-radius: 4.6em; overflow: hidden; background: #fff; } .dv-tab-cam { position: absolute; left: 50%; top: 1.6em; width: 1.6em; height: 1.6em; margin-left: -0.8em; border-radius: 50%; background: #3C3C42; } .dv-page-tab { height: 100%; padding-top: 3em; background: #fff; } .dv-ask { position: absolute; z-index: 3; left: 254em; top: 12em; width: 140em; padding: 7em 8em 8em; border-radius: 8em; background: #fff; box-shadow: 0 0 0 0.5em rgb(36 34 31 / 0.05), 0 14em 22em -12em rgb(36 34 31 / 0.45), 0 2em 4em -2em rgb(36 34 31 / 0.12); } .dv-ask > b { display: block; font-size: 7.4em; font-weight: 700; } .dv-ask > span { display: block; margin-top: 0.3em; font-size: 5em; color: var(--muted); } .dv-ask-row { position: relative; margin-top: 5em; height: 15em; } .dv-yes { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.4em; border-radius: 3em; background: var(--good); color: #fff; font-size: 6em; font-weight: 700; } .dv-done { background: var(--good-tint); color: var(--good); } .dv3-yes { opacity: 0; } .dv-cursor { position: absolute; left: 82em; top: 52em; width: 12em; height: 16em; opacity: 0; background: #1E1C1A; clip-path: polygon(0 0, 0 78%, 22% 62%, 38% 98%, 52% 92%, 37% 57%, 66% 57%); filter: drop-shadow(0 0 0.6em #fff); } .dv-confetti { position: absolute; z-index: 4; left: 186em; top: 50em; width: 0; height: 0; } .dv-cf { position: absolute; width: 4em; height: 2.4em; border-radius: 0.5em; opacity: 0; } .dv-cf1 { background: var(--good); --cx: -70em; --cy: -46em; --cr: 160deg; } .dv-cf2 { background: var(--accent); --cx: -30em; --cy: -60em; --cr: -120deg; } .dv-cf3 { background: var(--dusk); --cx: 14em; --cy: -56em; --cr: 200deg; } .dv-cf4 { background: #2FA36B; --cx: 52em; --cy: -44em; --cr: -200deg; } .dv-cf5 { background: var(--flame); --cx: 84em; --cy: -30em; --cr: 140deg; } .dv-cf6 { background: var(--good); --cx: -96em; --cy: -20em; --cr: -160deg; } .dv-cf7 { background: var(--dusk); --cx: 108em; --cy: -10em; --cr: 220deg; } .dv-cf8 { background: var(--accent); --cx: -50em; --cy: -30em; --cr: 90deg; } .dv-cf9 { background: #E8C34A; --cx: 30em; --cy: -34em; --cr: -90deg; } /* ---- the mockup checkpoint: a printed mockup taped to the wall */ .dvm-sheet { position: absolute; z-index: 2; left: 98em; top: 16em; width: 208em; padding: 7em 7em 8em; background: #FFFEFB; rotate: -1.4deg; box-shadow: 0 0 0 0.4em rgb(36 34 31 / 0.04), 0 1.5em 3em rgb(36 34 31 / 0.12), 0 16em 24em -14em rgb(36 34 31 / 0.4); } .dvm-tape { position: absolute; top: -4em; width: 28em; height: 9em; background: rgb(233 222 198 / 0.82); box-shadow: 0 0.4em 1em rgb(36 34 31 / 0.08); } .dvm-tape-l { left: -9em; rotate: -32deg; } .dvm-tape-r { right: -9em; rotate: 30deg; } .dvm-hd { display: flex; align-items: baseline; gap: 3em; height: 11em; } .dvm-hd b { font-size: 5.6em; font-weight: 700; } .dvm-hd span { font-size: 4.8em; color: var(--muted); } .dvm-v { position: relative; margin-left: auto; width: 13em; height: 7.4em; font-style: normal; } .dvm-v span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 3.7em; font-size: 4.6em; font-weight: 750; letter-spacing: 0.04em; } .dvm-v1 { background: #EEECE8; color: var(--muted); opacity: 0; } .dvm-v2 { background: var(--accent-tint); color: var(--accent-dark); } .dvm-img { position: relative; overflow: hidden; box-shadow: 0 0 0 0.4em #EEEBE5; } .dvm-ph { position: absolute; left: 46%; top: 13.6%; right: 0; bottom: 20.5%; display: grid; place-items: center; background: #E7E2D9; opacity: 0; } .dvm-x { position: absolute; inset: 0; width: 100%; height: 100%; } .dvm-x path { fill: none; stroke: #D3CBBE; stroke-width: 0.6; vector-effect: non-scaling-stroke; } .dvm-ph span { position: relative; display: inline-flex; align-items: center; gap: 0.45em; padding: 0.35em 0.8em; border-radius: 2em; background: #F3F0EA; font-size: 5.4em; font-weight: 650; color: #857E73; } .dvm-ph .dv-ic { width: 1.25em; height: 1.25em; } .dvm-flash { position: absolute; inset: 0; background: rgb(255 255 255 / 0.65); opacity: 0; } .dvm-stamp { position: absolute; z-index: 2; left: 5.6em; top: 8.7em; margin: 0; max-width: none; display: inline-flex; align-items: center; gap: 0.32em; padding: 0.2em 0.55em 0.2em 0.45em; border: 0.13em solid currentColor; border-radius: 0.45em; color: #2E6A4C; font-size: 11em; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; rotate: -8deg; background: rgb(255 255 255 / 0.9); box-shadow: inset 0 0 0 0.07em rgb(255 255 255 / 0.9), inset 0 0 0 0.12em rgb(46 106 76 / 0.45), 0 0.3em 0.8em rgb(36 34 31 / 0.18); } /* left/top in its own em (11em) */ .dvm-stamp .dv-tick { width: 0.95em; height: 0.95em; stroke-width: 3.6; } .dvm-note { position: absolute; z-index: 3; left: 292em; top: 48em; width: 66em; min-height: 52em; padding: 8em 7em 7em; background: linear-gradient(180deg, #E3EBF3, #D8E3EE); rotate: 5deg; box-shadow: 0 1em 2em rgb(36 34 31 / 0.12), 0 12em 16em -10em rgb(36 34 31 / 0.4); } .dvm-note::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6em; background: linear-gradient(180deg, rgb(74 95 117 / 0.16), rgb(74 95 117 / 0)); } .dvm-note span { display: block; font-size: 7.4em; line-height: 1.2; font-weight: 600; color: #34465A; } .dvm-tick { position: absolute; right: -0.55em; bottom: -0.55em; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--accent); color: #fff; font-size: 7.4em; box-shadow: 0 0 0 0.12em #fff; } .dvm-tick .dv-tick { width: 1em; height: 1em; } /* V47: the conversation over the mockup. Mine on the left in orange, yours on the right in blue, like any chat. */ .dvm-chat { position: absolute; z-index: 4; display: flex; flex-direction: column; gap: 4em; } .dvm-chat-me { left: 3em; top: 22em; width: 100em; align-items: flex-start; } .dvm-chat-you { right: 4em; top: 114em; width: 108em; align-items: flex-end; } .dvm-row { display: flex; align-items: flex-end; gap: 2.6em; } .dvm-chat-you .dvm-row { flex-direction: row-reverse; } .dvm-av { flex: none; display: grid; place-items: center; width: 12em; height: 12em; border-radius: 50%; } svg.dvm-av { padding: 1.7em; background: #FFFDF9; box-shadow: 0 0 0 0.6em var(--accent), 0 2em 4em -1.5em rgb(36 34 31 / 0.45); } i.dvm-av { background: var(--dusk); color: #fff; box-shadow: 0 0 0 0.6em #fff, 0 2em 4em -1.5em rgb(36 34 31 / 0.45); } i.dvm-av .dv-ic { width: 6.4em; height: 6.4em; stroke-width: 2.2; } .dvm-bw { position: relative; } .dvm-b { margin: 0; max-width: 11.6em; padding: 0.5em 0.8em 0.55em; border-radius: 1.1em; font-size: 7.2em; line-height: 1.22; font-weight: 600; text-wrap: balance; box-shadow: 0 0.25em 0.6em rgb(36 34 31 / 0.14), 0 1.6em 2.6em -1.4em rgb(36 34 31 / 0.4); } .dvm-chat-me .dvm-b { background: var(--accent); color: #fff; border-bottom-left-radius: 0.3em; transform-origin: 0 100%; } .dvm-chat-you .dvm-b { background: var(--dusk); color: #fff; border-bottom-right-radius: 0.3em; transform-origin: 100% 100%; } .dvm-typing { position: absolute; bottom: 0; display: flex; gap: 0.28em; margin: 0; padding: 0.72em 0.8em; border-radius: 1.15em; font-size: 7.2em; background: #fff; opacity: 0; box-shadow: 0 0.25em 0.6em rgb(36 34 31 / 0.14); } .dvm-chat-me .dvm-typing { left: 0; border-bottom-left-radius: 0.3em; } .dvm-chat-you .dvm-typing { right: 0; border-bottom-right-radius: 0.3em; } .dvm-typing b { width: 0.42em; height: 0.42em; border-radius: 50%; background: #A39C92; } /* ---- the wolf */ .cw { position: absolute; z-index: 5; left: 0; width: 84.3em; height: 62.6em; transform: translateX(-86em); } .cw-svg { display: block; width: 100%; height: 100%; overflow: visible; } .cw-shadow { position: absolute; left: 14%; right: 6%; bottom: -0.5em; height: 6em; background: radial-gradient(closest-side, rgb(36 34 31 / 0.32), rgb(36 34 31 / 0)); } .cw-walk { opacity: 0; } .cw-l, .cw-hd, .cw-tl { transform-box: fill-box; } .cw-l { transform-origin: 50% 4%; } .cw-hd { transform-origin: 22% 88%; } .cw-tl { transform-origin: 100% 70%; } .cw-ring { fill: none; stroke: var(--good); stroke-width: 2.4; stroke-linecap: round; opacity: 0; } .cw-4 { transform: translateX(198em); } .cw-1, .cw-2, .cw-3 { display: none; } @media (prefers-reduced-motion: no-preference) { html.js .cw-1, html.js .cw-2, html.js .cw-3 { display: block; } html.js .phases:not(.is-in) .cw { opacity: 0; } } @media (prefers-reduced-motion: no-preference) { .phases.is-in .dv1-q1 { animation: dv-k0 33s linear infinite both; } @keyframes dv-k0 { 0%, 1.364% { opacity: 0; transform: translateY(1.1em); animation-timing-function: var(--ease-out); } 2.576%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: translateY(1.1em); } } .phases.is-in .dv1-t1 { animation: dv-k1 33s linear infinite both; } @keyframes dv-k1 { 0%, 2.727% { opacity: 0; } 3.333%, 4.091% { opacity: 1; } 4.697%, 100% { opacity: 0; } } .phases.is-in .dv1-a1 { animation: dv-k2 33s linear infinite both; } @keyframes dv-k2 { 0%, 4.394% { opacity: 0; transform: translateY(1.1em); animation-timing-function: var(--ease-out); } 5.606%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: translateY(1.1em); } } .phases.is-in .dv1-q2 { animation: dv-k3 33s linear infinite both; } @keyframes dv-k3 { 0%, 5.758% { opacity: 0; transform: translateY(1.1em); animation-timing-function: var(--ease-out); } 6.97%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: translateY(1.1em); } } .phases.is-in .dv1-t2 { animation: dv-k4 33s linear infinite both; } @keyframes dv-k4 { 0%, 7.121% { opacity: 0; } 7.727%, 8.485% { opacity: 1; } 9.091%, 100% { opacity: 0; } } .phases.is-in .dv1-a2 { animation: dv-k5 33s linear infinite both; } @keyframes dv-k5 { 0%, 8.788% { opacity: 0; transform: translateY(1.1em); animation-timing-function: var(--ease-out); } 10%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: translateY(1.1em); } } .phases.is-in .dv1-q3 { animation: dv-k6 33s linear infinite both; } @keyframes dv-k6 { 0%, 10.152% { opacity: 0; transform: translateY(1.1em); animation-timing-function: var(--ease-out); } 11.364%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: translateY(1.1em); } } .phases.is-in .dv1-t3 { animation: dv-k7 33s linear infinite both; } @keyframes dv-k7 { 0%, 11.515% { opacity: 0; } 12.121%, 12.727% { opacity: 1; } 13.333%, 100% { opacity: 0; } } .phases.is-in .dv1-a3 { animation: dv-k8 33s linear infinite both; } @keyframes dv-k8 { 0%, 13.03% { opacity: 0; transform: translateY(1.1em); animation-timing-function: var(--ease-out); } 14.242%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: translateY(1.1em); } } .phases.is-in .dv1-ok { animation: dv-k9 33s linear infinite both; } @keyframes dv-k9 { 0%, 14.394% { opacity: 0; transform: scale(0.6); animation-timing-function: var(--ease-spring); } 15.758%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: scale(0.6); } } .phases.is-in .dv1-scroll { animation: dv-k10 33s linear infinite both; } @keyframes dv-k10 { 0% { transform: translateY(36.16em); } 11.152% { transform: translateY(36.16em); animation-timing-function: cubic-bezier(.3,.6,.3,1); } 12.182% { transform: translateY(15.91em); } 14.03% { transform: translateY(15.91em); animation-timing-function: cubic-bezier(.3,.6,.3,1); } 15.061% { transform: translateY(0.00em); } 96.818% { transform: translateY(0.00em); } 98.333%, 100% { transform: translateY(36.16em); } } .phases.is-in .dv1-note { animation: dv-k11 33s linear infinite both; } @keyframes dv-k11 { 0%, 0.606% { opacity: 0; transform: translateY(1.1em); animation-timing-function: var(--ease-out); } 2.121%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: translateY(1.1em); } } .phases.is-in .dv1-v1 { animation: dv-k12 33s linear infinite both; } @keyframes dv-k12 { 0%, 5.303% { opacity: 0; animation-timing-function: ease; } 6.212%, 96.818% { opacity: 1; } 98.333%, 100% { opacity: 0; } } .phases.is-in .dv1-s1 { animation: dv-k13 33s linear infinite both; } @keyframes dv-k13 { 0%, 5.303% { opacity: 1; } 5.909%, 96.818% { opacity: 0; } 98.333%, 100% { opacity: 1; } } .phases.is-in .dv1-k1 { animation: dv-k14 33s linear infinite both; } @keyframes dv-k14 { 0%, 5.758% { opacity: 0; transform: scale(0.6); animation-timing-function: var(--ease-spring); } 6.97%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: scale(0.6); } } .phases.is-in .dv1-v2 { animation: dv-k15 33s linear infinite both; } @keyframes dv-k15 { 0%, 9.697% { opacity: 0; animation-timing-function: ease; } 10.606%, 96.818% { opacity: 1; } 98.333%, 100% { opacity: 0; } } .phases.is-in .dv1-s2 { animation: dv-k16 33s linear infinite both; } @keyframes dv-k16 { 0%, 9.697% { opacity: 1; } 10.303%, 96.818% { opacity: 0; } 98.333%, 100% { opacity: 1; } } .phases.is-in .dv1-k2 { animation: dv-k17 33s linear infinite both; } @keyframes dv-k17 { 0%, 10.152% { opacity: 0; transform: scale(0.6); animation-timing-function: var(--ease-spring); } 11.364%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: scale(0.6); } } .phases.is-in .dv1-v3 { animation: dv-k18 33s linear infinite both; } @keyframes dv-k18 { 0%, 13.939% { opacity: 0; animation-timing-function: ease; } 14.848%, 96.818% { opacity: 1; } 98.333%, 100% { opacity: 0; } } .phases.is-in .dv1-s3 { animation: dv-k19 33s linear infinite both; } @keyframes dv-k19 { 0%, 13.939% { opacity: 1; } 14.545%, 96.818% { opacity: 0; } 98.333%, 100% { opacity: 1; } } .phases.is-in .dv1-k3 { animation: dv-k20 33s linear infinite both; } @keyframes dv-k20 { 0%, 14.394% { opacity: 0; transform: scale(0.6); animation-timing-function: var(--ease-spring); } 15.606%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: scale(0.6); } } .phases.is-in .cw-1 { animation: dv-k21 33s linear infinite both; } @keyframes dv-k21 { 0% { transform: translateX(-86em); } 0% { transform: translateX(-86em); animation-timing-function: cubic-bezier(.3, .08, .55, 1); } 5.455% { transform: translateX(128em); } 15.152% { transform: translateX(128em); animation-timing-function: cubic-bezier(.3, .08, .55, 1); } 22.273% { transform: translateX(410em); } 99.909% { transform: translateX(410em); } 99.939% { transform: translateX(-86em); animation-timing-function: cubic-bezier(.3, .08, .55, 1); } 100% { transform: translateX(-86em); } 100% { transform: translateX(-86em); } } .phases.is-in .cw-1 .cw-walk { animation: dv-k22 33s linear infinite both; } @keyframes dv-k22 { 0% { opacity: 0; } 0% { opacity: 0; } 0%, 5.455% { opacity: 1; } 5.485% { opacity: 0; } 14.576% { opacity: 0; } 14.606%, 22.273% { opacity: 1; } 22.303% { opacity: 0; } 100% { opacity: 0; } } .phases.is-in .cw-1 .cw-sit { animation: dv-k23 33s linear infinite both; } @keyframes dv-k23 { 0% { opacity: 0; } 4.909% { opacity: 0; transform: translateY(-1.2px); } 5.455% { opacity: 1; transform: none; } 14.606% { opacity: 1; transform: none; } 15.152% { opacity: 0; transform: none; } 21.727% { opacity: 0; transform: translateY(-1.2px); } 22.273% { opacity: 1; transform: none; } 99.394% { opacity: 1; transform: none; } 99.939% { opacity: 0; transform: none; } 100% { opacity: 0; } } .phases.is-in .cw-1 .cw-hd { animation: dv-k24 33s linear infinite both; } @keyframes dv-k24 { 0% { transform: none; } 4.848% { transform: none; animation-timing-function: var(--ease-out); } 5.909%, 6.667% { transform: rotate(-9deg); animation-timing-function: ease-in-out; } 7.879% { transform: none; } 9.091% { transform: none; animation-timing-function: var(--ease-out); } 10.152%, 10.606% { transform: rotate(7deg); animation-timing-function: ease-in-out; } 11.818% { transform: none; } 13.333% { transform: none; animation-timing-function: var(--ease-out); } 14.394%, 14.242% { transform: rotate(-4deg); animation-timing-function: ease-in-out; } 15.455% { transform: none; } 100% { transform: none; } } .phases.is-in .dvm-sheet { animation: dv-k25 33s linear infinite both; } @keyframes dv-k25 { 0%, 21.212% { opacity: 0; transform: translateY(-8em); animation-timing-function: var(--ease-spring); } 22.879%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: translateY(-8em); } } .phases.is-in .dvm-note { animation: dv-k26 33s linear infinite both; } @keyframes dv-k26 { 0%, 28.333% { opacity: 0; transform: scale(0.6); animation-timing-function: var(--ease-spring); } 29.697%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: scale(0.6); } } .phases.is-in .dvm-ph { animation: dv-k27 33s linear infinite both; } @keyframes dv-k27 { 0%, 31.667% { opacity: 1; transform: none; } 33.182%, 96.818% { opacity: 0; transform: scale(1.04); } 98.333%, 100% { opacity: 1; transform: none; } } .phases.is-in .dvm-flash { animation: dv-k28 33s linear infinite both; } @keyframes dv-k28 { 0%, 31.515% { opacity: 0; } 32.121%, 32.121% { opacity: 1; } 32.727%, 100% { opacity: 0; } } .phases.is-in .dvm-v1 { animation: dv-k29 33s linear infinite both; } @keyframes dv-k29 { 0%, 31.97% { opacity: 1; } 32.576%, 96.818% { opacity: 0; } 98.333%, 100% { opacity: 1; } } .phases.is-in .dvm-v2 { animation: dv-k30 33s linear infinite both; } @keyframes dv-k30 { 0%, 32.121% { opacity: 0; transform: scale(0.6); animation-timing-function: var(--ease-spring); } 33.182%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: scale(0.6); } } .phases.is-in .dvm-tick { animation: dv-k31 33s linear infinite both; } @keyframes dv-k31 { 0%, 33.03% { opacity: 0; transform: scale(0.6); animation-timing-function: var(--ease-spring); } 34.242%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: scale(0.6); } } .phases.is-in .dvm-stamp { animation: dv-k32 33s linear infinite both; } @keyframes dv-k32 { 0%, 36.97% { opacity: 0; transform: scale(1.9); animation-timing-function: cubic-bezier(.5, 0, .9, .4); } 37.485% { opacity: 0.95; transform: scale(0.96); animation-timing-function: ease-out; } 37.939%, 96.818% { opacity: 0.92; transform: none; } 98.333%, 100% { opacity: 0; transform: scale(1.9); } } .phases.is-in .dvm-r1 { animation: dv-k33 33s linear infinite both; } @keyframes dv-k33 { 0%, 22.727% { opacity: 0; transform: translateY(1.1em); animation-timing-function: var(--ease-out); } 23.788%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: translateY(1.1em); } } .phases.is-in .dvm-b1 { animation: dv-k34 33s linear infinite both; } @keyframes dv-k34 { 0%, 23.03% { opacity: 0; transform: scale(0.6); animation-timing-function: var(--ease-spring); } 24.242%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: scale(0.6); } } .phases.is-in .dvm-r2 { animation: dv-k35 33s linear infinite both; } @keyframes dv-k35 { 0%, 25.303% { opacity: 0; transform: translateY(1.1em); animation-timing-function: var(--ease-out); } 26.364%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: translateY(1.1em); } } .phases.is-in .dvm-t2 { animation: dv-k36 33s linear infinite both; } @keyframes dv-k36 { 0%, 25.455% { opacity: 0; } 25.818%, 26.667% { opacity: 1; } 27.03%, 100% { opacity: 0; } } .phases.is-in .dvm-b2 { animation: dv-k37 33s linear infinite both; } @keyframes dv-k37 { 0%, 26.818% { opacity: 0; transform: scale(0.6); animation-timing-function: var(--ease-spring); } 28.03%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: scale(0.6); } } .phases.is-in .dvm-r3 { animation: dv-k38 33s linear infinite both; } @keyframes dv-k38 { 0%, 30% { opacity: 0; transform: translateY(1.1em); animation-timing-function: var(--ease-out); } 31.061%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: translateY(1.1em); } } .phases.is-in .dvm-t3 { animation: dv-k39 33s linear infinite both; } @keyframes dv-k39 { 0%, 30.152% { opacity: 0; } 30.515%, 31.364% { opacity: 1; } 31.727%, 100% { opacity: 0; } } .phases.is-in .dvm-b3 { animation: dv-k40 33s linear infinite both; } @keyframes dv-k40 { 0%, 31.515% { opacity: 0; transform: scale(0.6); animation-timing-function: var(--ease-spring); } 32.727%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: scale(0.6); } } .phases.is-in .dvm-r4 { animation: dv-k41 33s linear infinite both; } @keyframes dv-k41 { 0%, 33.939% { opacity: 0; transform: translateY(1.1em); animation-timing-function: var(--ease-out); } 35%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: translateY(1.1em); } } .phases.is-in .dvm-t4 { animation: dv-k42 33s linear infinite both; } @keyframes dv-k42 { 0%, 34.091% { opacity: 0; } 34.455%, 35.303% { opacity: 1; } 35.667%, 100% { opacity: 0; } } .phases.is-in .dvm-b4 { animation: dv-k43 33s linear infinite both; } @keyframes dv-k43 { 0%, 35.455% { opacity: 0; transform: scale(0.6); animation-timing-function: var(--ease-spring); } 36.667%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: scale(0.6); } } .phases.is-in .cw-2 { animation: dv-k44 33s linear infinite both; } @keyframes dv-k44 { 0% { transform: translateX(-86em); } 0% { transform: translateX(-86em); animation-timing-function: cubic-bezier(.3, .08, .55, 1); } 0.03% { transform: translateX(-86em); } 21.515% { transform: translateX(-86em); animation-timing-function: cubic-bezier(.3, .08, .55, 1); } 24.545% { transform: translateX(22em); } 38.788% { transform: translateX(22em); animation-timing-function: cubic-bezier(.3, .08, .55, 1); } 48.485% { transform: translateX(410em); } 99.909% { transform: translateX(410em); } 99.939% { transform: translateX(-86em); animation-timing-function: cubic-bezier(.3, .08, .55, 1); } 100% { transform: translateX(-86em); } 100% { transform: translateX(-86em); } } .phases.is-in .cw-2 .cw-walk { animation: dv-k45 33s linear infinite both; } @keyframes dv-k45 { 0% { opacity: 0; } 20.939% { opacity: 0; } 20.97%, 24.545% { opacity: 1; } 24.576% { opacity: 0; } 38.212% { opacity: 0; } 38.242%, 48.485% { opacity: 1; } 48.515% { opacity: 0; } 100% { opacity: 0; } } .phases.is-in .cw-2 .cw-sit { animation: dv-k46 33s linear infinite both; } @keyframes dv-k46 { 0% { opacity: 0; } 0% { opacity: 0; transform: translateY(-1.2px); } 0.03% { opacity: 1; transform: none; } 20.97% { opacity: 1; transform: none; } 21.515% { opacity: 0; transform: none; } 24% { opacity: 0; transform: translateY(-1.2px); } 24.545% { opacity: 1; transform: none; } 38.242% { opacity: 1; transform: none; } 38.788% { opacity: 0; transform: none; } 47.939% { opacity: 0; transform: translateY(-1.2px); } 48.485% { opacity: 1; transform: none; } 99.394% { opacity: 1; transform: none; } 99.939% { opacity: 0; transform: none; } 100% { opacity: 0; } } .phases.is-in .cw-2 .cw-hd { animation: dv-k47 33s linear infinite both; } @keyframes dv-k47 { 0% { transform: none; } 24.848% { transform: none; animation-timing-function: var(--ease-out); } 25.909%, 26.212% { transform: rotate(-20deg); animation-timing-function: ease-in-out; } 27.424% { transform: none; } 26.97% { transform: none; animation-timing-function: var(--ease-out); } 28.03%, 28.485% { transform: rotate(-4deg); animation-timing-function: ease-in-out; } 29.697% { transform: none; } 31.667% { transform: none; animation-timing-function: var(--ease-out); } 32.727%, 33.03% { transform: rotate(-20deg); animation-timing-function: ease-in-out; } 34.242% { transform: none; } 37.121% { transform: none; animation-timing-function: var(--ease-out); } 38.182%, 38.333% { transform: rotate(-14deg); animation-timing-function: ease-in-out; } 39.545% { transform: none; } 100% { transform: none; } } .phases.is-in .dv2-built { animation: dv-k48 33s linear infinite both; } @keyframes dv-k48 { 0% { clip-path: inset(0 0 100% 0); } 46.515% { clip-path: inset(0 0 100% 0); } 49.242% { clip-path: inset(0 0 86% 0); } 50.758% { clip-path: inset(0 0 86% 0); } 53.788% { clip-path: inset(0 0 53% 0); } 55.303% { clip-path: inset(0 0 53% 0); } 57.424% { clip-path: inset(0 0 26% 0); } 58.333% { clip-path: inset(0 0 26% 0); } 58.939% { clip-path: inset(0 0 0% 0); } 96.818% { clip-path: inset(0 0 0 0); } 98.333%, 100% { clip-path: inset(0 0 100% 0); } } .phases.is-in .dv2-scan { animation: dv-k49 33s linear infinite both; } @keyframes dv-k49 { 0%, 46.212% { opacity: 0; top: 0%; } 46.515% { opacity: 1; top: 0%; } 49.242% { opacity: 1; top: 14%; } 50.758% { opacity: 1; top: 14%; } 53.788% { opacity: 1; top: 47%; } 55.303% { opacity: 1; top: 47%; } 57.424% { opacity: 1; top: 74%; } 58.333% { opacity: 1; top: 74%; } 58.939% { opacity: 1; top: 100%; } 59.848%, 100% { opacity: 0; top: 100%; } } .phases.is-in .dv2-p1 { animation: dv-k50 33s linear infinite both; } @keyframes dv-k50 { 0%, 47.576% { opacity: 0; transform: translateX(-10em); animation-timing-function: var(--ease-out); } 48.939%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: translateX(-10em); } } .phases.is-in .dv2-sp1 { animation: dv-k51 33s linear infinite both; } @keyframes dv-k51 { 0%, 48.03% { opacity: 0; } 48.485%, 50.606% { opacity: 1; } 51.061%, 100% { opacity: 0; } } .phases.is-in .dv2-ok1 { animation: dv-k52 33s linear infinite both; } @keyframes dv-k52 { 0%, 50.758% { opacity: 0; transform: scale(0.6); animation-timing-function: var(--ease-spring); } 51.97%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: scale(0.6); } } .phases.is-in .dv2-p2 { animation: dv-k53 33s linear infinite both; } @keyframes dv-k53 { 0%, 51.515% { opacity: 0; transform: translateX(-10em); animation-timing-function: var(--ease-out); } 52.879%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: translateX(-10em); } } .phases.is-in .dv2-sp2 { animation: dv-k54 33s linear infinite both; } @keyframes dv-k54 { 0%, 51.97% { opacity: 0; } 52.424%, 54.545% { opacity: 1; } 55%, 100% { opacity: 0; } } .phases.is-in .dv2-ok2 { animation: dv-k55 33s linear infinite both; } @keyframes dv-k55 { 0%, 54.697% { opacity: 0; transform: scale(0.6); animation-timing-function: var(--ease-spring); } 55.909%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: scale(0.6); } } .phases.is-in .dv2-p3 { animation: dv-k56 33s linear infinite both; } @keyframes dv-k56 { 0%, 55.455% { opacity: 0; transform: translateX(-10em); animation-timing-function: var(--ease-out); } 56.818%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: translateX(-10em); } } .phases.is-in .dv2-sp3 { animation: dv-k57 33s linear infinite both; } @keyframes dv-k57 { 0%, 55.909% { opacity: 0; } 56.364%, 58.485% { opacity: 1; } 58.939%, 100% { opacity: 0; } } .phases.is-in .dv2-ok3 { animation: dv-k58 33s linear infinite both; } @keyframes dv-k58 { 0%, 58.636% { opacity: 0; transform: scale(0.6); animation-timing-function: var(--ease-spring); } 59.848%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: scale(0.6); } } .phases.is-in .dv2-p4 { animation: dv-k59 33s linear infinite both; } @keyframes dv-k59 { 0%, 59.394% { opacity: 0; transform: translateX(-10em); animation-timing-function: var(--ease-out); } 60.758%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: translateX(-10em); } } .phases.is-in .dv2-sp4 { animation: dv-k60 33s linear infinite both; } @keyframes dv-k60 { 0%, 59.848% { opacity: 0; } 60.303%, 62.424% { opacity: 1; } 62.879%, 100% { opacity: 0; } } .phases.is-in .dv2-ok4 { animation: dv-k61 33s linear infinite both; } @keyframes dv-k61 { 0%, 62.576% { opacity: 0; transform: scale(0.6); animation-timing-function: var(--ease-spring); } 63.788%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: scale(0.6); } } .phases.is-in .cw-3 { animation: dv-k62 33s linear infinite both; } @keyframes dv-k62 { 0% { transform: translateX(-86em); } 0% { transform: translateX(-86em); animation-timing-function: cubic-bezier(.3, .08, .55, 1); } 0.03% { transform: translateX(-86em); } 48.333% { transform: translateX(-86em); animation-timing-function: cubic-bezier(.3, .08, .55, 1); } 58.03% { transform: translateX(300em); } 64.848% { transform: translateX(300em); animation-timing-function: cubic-bezier(.3, .08, .55, 1); } 67.727% { transform: translateX(410em); } 99.909% { transform: translateX(410em); } 99.939% { transform: translateX(-86em); animation-timing-function: cubic-bezier(.3, .08, .55, 1); } 100% { transform: translateX(-86em); } 100% { transform: translateX(-86em); } } .phases.is-in .cw-3 .cw-walk { animation: dv-k63 33s linear infinite both; } @keyframes dv-k63 { 0% { opacity: 0; } 47.758% { opacity: 0; } 47.788%, 58.03% { opacity: 1; } 58.061% { opacity: 0; } 64.273% { opacity: 0; } 64.303%, 67.727% { opacity: 1; } 67.758% { opacity: 0; } 100% { opacity: 0; } } .phases.is-in .cw-3 .cw-sit { animation: dv-k64 33s linear infinite both; } @keyframes dv-k64 { 0% { opacity: 0; } 0% { opacity: 0; transform: translateY(-1.2px); } 0.03% { opacity: 1; transform: none; } 47.788% { opacity: 1; transform: none; } 48.333% { opacity: 0; transform: none; } 57.485% { opacity: 0; transform: translateY(-1.2px); } 58.03% { opacity: 1; transform: none; } 64.303% { opacity: 1; transform: none; } 64.848% { opacity: 0; transform: none; } 67.182% { opacity: 0; transform: translateY(-1.2px); } 67.727% { opacity: 1; transform: none; } 99.394% { opacity: 1; transform: none; } 99.939% { opacity: 0; transform: none; } 100% { opacity: 0; } } .phases.is-in .cw-3 .cw-hd { animation: dv-k65 33s linear infinite both; } @keyframes dv-k65 { 0% { transform: none; } 58.788% { transform: none; animation-timing-function: var(--ease-out); } 59.848%, 60.606% { transform: rotate(-14deg); animation-timing-function: ease-in-out; } 61.818% { transform: none; } 62.727% { transform: none; animation-timing-function: var(--ease-out); } 63.788%, 64.242% { transform: rotate(-18deg); animation-timing-function: ease-in-out; } 65.455% { transform: none; } 100% { transform: none; } } .phases.is-in .dv3-ask { animation: dv-k66 33s linear infinite both; } @keyframes dv-k66 { 0%, 70.758% { opacity: 0; transform: translateY(-8em); animation-timing-function: var(--ease-spring); } 72.273%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: translateY(-8em); } } .phases.is-in .dv3-prev { animation: dv-k67 33s linear infinite both; } @keyframes dv-k67 { 0%, 76.455% { opacity: 1; } 76.818%, 96.818% { opacity: 0; } 98.333%, 100% { opacity: 1; } } .phases.is-in .dv3-live { animation: dv-k68 33s linear infinite both; } @keyframes dv-k68 { 0%, 76.818% { opacity: 0; transform: scale(0.6); animation-timing-function: var(--ease-spring); } 78.182%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: scale(0.6); } } .phases.is-in .dv3-cur { animation: dv-k69 33s linear infinite both; } @keyframes dv-k69 { 0%, 73.182% { opacity: 0; transform: translate(26em, 22em); } 73.636% { opacity: 1; } 75% { opacity: 1; transform: translate(0, 0); } 75.515% { transform: translate(0, 0) scale(0.86); } 76.061% { transform: none; opacity: 1; } 77.576%, 100% { opacity: 0; transform: none; } } .phases.is-in .dv3-yes { animation: dv-k70 33s linear infinite both; } @keyframes dv-k70 { 0%, 75.152% { opacity: 1; transform: none; } 75.455% { transform: scale(0.94); } 75.758%, 96.818% { opacity: 0; transform: none; } 98.333%, 100% { opacity: 1; } } .phases.is-in .dv3-done { animation: dv-k71 33s linear infinite both; } @keyframes dv-k71 { 0%, 75.758% { opacity: 0; transform: scale(0.6); animation-timing-function: var(--ease-spring); } 76.97%, 96.818% { opacity: 1; transform: none; } 98.333%, 100% { opacity: 0; transform: scale(0.6); } } .phases.is-in .dv3-laptop .dv-screen { animation: dv-k72 33s linear infinite both; } @keyframes dv-k72 { 0%, 76.818% { box-shadow: 0 0 0 0 rgb(46 106 76 / 0); } 78.03% { box-shadow: 0 0 0 0.25em rgb(46 106 76 / 0.9), 0 0 2.4em 0.6em rgb(46 106 76 / 0.45); } 84.091%, 100% { box-shadow: 0 0 0 0 rgb(46 106 76 / 0); } } .phases.is-in .dv3-tab .dv-tab-screen { animation: dv-k73 33s linear infinite both; } @keyframes dv-k73 { 0%, 77.121% { box-shadow: 0 0 0 0 rgb(46 106 76 / 0); } 78.333% { box-shadow: 0 0 0 0.25em rgb(46 106 76 / 0.9), 0 0 2.2em 0.55em rgb(46 106 76 / 0.45); } 84.091%, 100% { box-shadow: 0 0 0 0 rgb(46 106 76 / 0); } } .phases.is-in .dv3-phone .dv-ph-screen { animation: dv-k74 33s linear infinite both; } @keyframes dv-k74 { 0%, 77.424% { box-shadow: 0 0 0 0 rgb(46 106 76 / 0); } 78.485% { box-shadow: 0 0 0 0.25em rgb(46 106 76 / 0.9), 0 0 2em 0.5em rgb(46 106 76 / 0.45); } 84.091%, 100% { box-shadow: 0 0 0 0 rgb(46 106 76 / 0); } } .phases.is-in .dv-cf1 { animation: dv-k75 33s linear infinite both; } @keyframes dv-k75 { 0%, 77.182% { opacity: 0; transform: translate(0, 0) rotate(0); } 77.485% { opacity: 1; } 82.03% { opacity: 0.9; transform: translate(var(--cx), var(--cy)) rotate(var(--cr)); animation-timing-function: ease-in; } 84.152%, 100% { opacity: 0; transform: translate(var(--cx), calc(var(--cy) + 14em)) rotate(calc(var(--cr) * 2)); } } .phases.is-in .dv-cf2 { animation: dv-k76 33s linear infinite both; } @keyframes dv-k76 { 0%, 77.545% { opacity: 0; transform: translate(0, 0) rotate(0); } 77.848% { opacity: 1; } 82.394% { opacity: 0.9; transform: translate(var(--cx), var(--cy)) rotate(var(--cr)); animation-timing-function: ease-in; } 84.515%, 100% { opacity: 0; transform: translate(var(--cx), calc(var(--cy) + 14em)) rotate(calc(var(--cr) * 2)); } } .phases.is-in .dv-cf3 { animation: dv-k77 33s linear infinite both; } @keyframes dv-k77 { 0%, 76.818% { opacity: 0; transform: translate(0, 0) rotate(0); } 77.121% { opacity: 1; } 81.667% { opacity: 0.9; transform: translate(var(--cx), var(--cy)) rotate(var(--cr)); animation-timing-function: ease-in; } 83.788%, 100% { opacity: 0; transform: translate(var(--cx), calc(var(--cy) + 14em)) rotate(calc(var(--cr) * 2)); } } .phases.is-in .dv-cf4 { animation: dv-k78 33s linear infinite both; } @keyframes dv-k78 { 0%, 77.182% { opacity: 0; transform: translate(0, 0) rotate(0); } 77.485% { opacity: 1; } 82.03% { opacity: 0.9; transform: translate(var(--cx), var(--cy)) rotate(var(--cr)); animation-timing-function: ease-in; } 84.152%, 100% { opacity: 0; transform: translate(var(--cx), calc(var(--cy) + 14em)) rotate(calc(var(--cr) * 2)); } } .phases.is-in .dv-cf5 { animation: dv-k79 33s linear infinite both; } @keyframes dv-k79 { 0%, 77.545% { opacity: 0; transform: translate(0, 0) rotate(0); } 77.848% { opacity: 1; } 82.394% { opacity: 0.9; transform: translate(var(--cx), var(--cy)) rotate(var(--cr)); animation-timing-function: ease-in; } 84.515%, 100% { opacity: 0; transform: translate(var(--cx), calc(var(--cy) + 14em)) rotate(calc(var(--cr) * 2)); } } .phases.is-in .dv-cf6 { animation: dv-k80 33s linear infinite both; } @keyframes dv-k80 { 0%, 76.818% { opacity: 0; transform: translate(0, 0) rotate(0); } 77.121% { opacity: 1; } 81.667% { opacity: 0.9; transform: translate(var(--cx), var(--cy)) rotate(var(--cr)); animation-timing-function: ease-in; } 83.788%, 100% { opacity: 0; transform: translate(var(--cx), calc(var(--cy) + 14em)) rotate(calc(var(--cr) * 2)); } } .phases.is-in .dv-cf7 { animation: dv-k81 33s linear infinite both; } @keyframes dv-k81 { 0%, 77.182% { opacity: 0; transform: translate(0, 0) rotate(0); } 77.485% { opacity: 1; } 82.03% { opacity: 0.9; transform: translate(var(--cx), var(--cy)) rotate(var(--cr)); animation-timing-function: ease-in; } 84.152%, 100% { opacity: 0; transform: translate(var(--cx), calc(var(--cy) + 14em)) rotate(calc(var(--cr) * 2)); } } .phases.is-in .dv-cf8 { animation: dv-k82 33s linear infinite both; } @keyframes dv-k82 { 0%, 77.545% { opacity: 0; transform: translate(0, 0) rotate(0); } 77.848% { opacity: 1; } 82.394% { opacity: 0.9; transform: translate(var(--cx), var(--cy)) rotate(var(--cr)); animation-timing-function: ease-in; } 84.515%, 100% { opacity: 0; transform: translate(var(--cx), calc(var(--cy) + 14em)) rotate(calc(var(--cr) * 2)); } } .phases.is-in .dv-cf9 { animation: dv-k83 33s linear infinite both; } @keyframes dv-k83 { 0%, 76.818% { opacity: 0; transform: translate(0, 0) rotate(0); } 77.121% { opacity: 1; } 81.667% { opacity: 0.9; transform: translate(var(--cx), var(--cy)) rotate(var(--cr)); animation-timing-function: ease-in; } 83.788%, 100% { opacity: 0; transform: translate(var(--cx), calc(var(--cy) + 14em)) rotate(calc(var(--cr) * 2)); } } .phases.is-in .cw-4 { animation: dv-k84 33s linear infinite both; } @keyframes dv-k84 { 0% { transform: translateX(-86em); } 0% { transform: translateX(-86em); animation-timing-function: cubic-bezier(.3, .08, .55, 1); } 0.03% { transform: translateX(-86em); } 67.273% { transform: translateX(-86em); animation-timing-function: cubic-bezier(.3, .08, .55, 1); } 74.545% { transform: translateX(198em); } 91.364% { transform: translateX(198em); animation-timing-function: cubic-bezier(.3, .08, .55, 1); } 96.818% { transform: translateX(410em); } 99.909% { transform: translateX(410em); } 99.939% { transform: translateX(-86em); animation-timing-function: cubic-bezier(.3, .08, .55, 1); } 100% { transform: translateX(-86em); } 100% { transform: translateX(-86em); } } .phases.is-in .cw-4 .cw-walk { animation: dv-k85 33s linear infinite both; } @keyframes dv-k85 { 0% { opacity: 0; } 66.697% { opacity: 0; } 66.727%, 74.545% { opacity: 1; } 74.576% { opacity: 0; } 90.788% { opacity: 0; } 90.818%, 96.818% { opacity: 1; } 96.848% { opacity: 0; } 100% { opacity: 0; } } .phases.is-in .cw-4 .cw-sit { animation: dv-k86 33s linear infinite both; } @keyframes dv-k86 { 0% { opacity: 0; } 0% { opacity: 0; transform: translateY(-1.2px); } 0.03% { opacity: 1; transform: none; } 66.727% { opacity: 1; transform: none; } 67.273% { opacity: 0; transform: none; } 74% { opacity: 0; transform: translateY(-1.2px); } 74.545% { opacity: 1; transform: none; } 90.818% { opacity: 1; transform: none; } 91.364% { opacity: 0; transform: none; } 96.273% { opacity: 0; transform: translateY(-1.2px); } 96.818% { opacity: 1; transform: none; } 99.394% { opacity: 1; transform: none; } 99.939% { opacity: 0; transform: none; } 100% { opacity: 0; } } .phases.is-in .cw-4 .cw-hd { animation: dv-k87 33s linear infinite both; } @keyframes dv-k87 { 0%, 77.424% { transform: none; animation-timing-function: var(--ease-out); } 78.788%, 83.485% { transform: rotate(-38deg); animation-timing-function: ease-in-out; } 85%, 86.212% { transform: none; } 87.121% { transform: rotate(-8deg); } 88.939%, 100% { transform: none; } } .phases.is-in .cw-4 .cw-ring-1 { animation: dv-k88 33s linear infinite both; } @keyframes dv-k88 { 0%, 78.636% { opacity: 0; } 79.242% { opacity: 0.9; } 81.061% { opacity: 0; } 81.212% { opacity: 0; } 81.818% { opacity: 0.9; } 83.485%, 100% { opacity: 0; } } .phases.is-in .cw-4 .cw-ring-2 { animation: dv-k89 33s linear infinite both; } @keyframes dv-k89 { 0%, 79.242% { opacity: 0; } 79.848% { opacity: 0.7; } 81.667% { opacity: 0; } 81.818% { opacity: 0; } 82.424% { opacity: 0.7; } 84.091%, 100% { opacity: 0; } } .phases.is-in .cw { opacity: 1; } .phases.is-in .cw-fn, .phases.is-in .cw-hf { animation: cw-swing 0.2s ease-in-out infinite alternate; } .phases.is-in .cw-ff, .phases.is-in .cw-hn { animation: cw-swing 0.2s ease-in-out infinite alternate-reverse; } .phases.is-in .cw-bob { animation: cw-bob 0.2s ease-in-out infinite alternate; } .phases.is-in .cw-tl { animation: cw-wag 0.9s ease-in-out infinite alternate; } @keyframes cw-swing { from { transform: rotate(24deg); } to { transform: rotate(-24deg); } } @keyframes cw-bob { from { transform: translateY(0.4px); } to { transform: translateY(-1.1px); } } @keyframes cw-wag { from { transform: rotate(-5deg); } to { transform: rotate(4deg); } } .dv-phone:not(.dv3-phone) { animation: dv-float 6s ease-in-out infinite alternate; } @keyframes dv-float { from { translate: 0 0; } to { translate: 0 -2.5em; } } .phases.is-in .dvm-typing b { animation: dvm-dot 0.9s ease-in-out infinite; } .phases.is-in .dvm-typing b:nth-child(2) { animation-delay: 0.15s; } .phases.is-in .dvm-typing b:nth-child(3) { animation-delay: 0.3s; } @keyframes dvm-dot { 0%, 60%, 100% { transform: none; opacity: 0.55; } 30% { transform: translateY(-0.3em); opacity: 1; } } } .phase-pulse { position: absolute; left: 0; top: 0; width: calc(100% + var(--col-gap, var(--s5))); height: 10px; pointer-events: none; } .phase-4 .phase-pulse { width: 100%; } .phase-pulse::after { content: ""; position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--next); box-shadow: 0 0 0 5px color-mix(in srgb, var(--next) 28%, transparent); opacity: 0; } .phase-4 .phase-pulse::after { background: var(--phase); box-shadow: 0 0 0 5px color-mix(in srgb, var(--phase) 28%, transparent); } .phases.is-in .phase-1 .phase-pulse::after { animation: hw-run-1 33s linear infinite both; } @keyframes hw-run-1 { 0%, 17.879% { left: 0; opacity: 0; } 18.182% { left: 0; opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); } 21.515% { left: calc(100% - 10px); opacity: 1; } 22.727%, 100% { left: calc(100% - 10px); opacity: 0; } } @keyframes hw-fall-1 { 0%, 17.879% { top: 0; opacity: 0; } 18.182% { top: 0; opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); } 21.515% { top: calc(100% - 10px); opacity: 1; } 22.727%, 100% { top: calc(100% - 10px); opacity: 0; } } .phases.is-in .phase-2 .phase-pulse::after { animation: hw-run-2 33s linear infinite both; } @keyframes hw-run-2 { 0%, 41.515% { left: 0; opacity: 0; } 41.818% { left: 0; opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); } 47.576% { left: calc(100% - 10px); opacity: 1; } 48.788%, 100% { left: calc(100% - 10px); opacity: 0; } } @keyframes hw-fall-2 { 0%, 41.515% { top: 0; opacity: 0; } 41.818% { top: 0; opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); } 47.576% { top: calc(100% - 10px); opacity: 1; } 48.788%, 100% { top: calc(100% - 10px); opacity: 0; } } .phases.is-in .phase-3 .phase-pulse::after { animation: hw-run-3 33s linear infinite both; } @keyframes hw-run-3 { 0%, 65.303% { left: 0; opacity: 0; } 65.606% { left: 0; opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); } 67.424% { left: calc(100% - 10px); opacity: 1; } 68.636%, 100% { left: calc(100% - 10px); opacity: 0; } } @keyframes hw-fall-3 { 0%, 65.303% { top: 0; opacity: 0; } 65.606% { top: 0; opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); } 67.424% { top: calc(100% - 10px); opacity: 1; } 68.636%, 100% { top: calc(100% - 10px); opacity: 0; } } .phases.is-in .phase-4 .phase-pulse::after { animation: hw-run-4 33s linear infinite both; } @keyframes hw-run-4 { 0%, 92.273% { left: 0; opacity: 0; } 92.576% { left: 0; opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); } 95.606% { left: calc(100% - 10px); opacity: 1; } 96.818%, 100% { left: calc(100% - 10px); opacity: 0; } } @keyframes hw-fall-4 { 0%, 92.273% { top: 0; opacity: 0; } 92.576% { top: 0; opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); } 95.606% { top: calc(100% - 10px); opacity: 1; } 96.818%, 100% { top: calc(100% - 10px); opacity: 0; } } @media (max-width: 63.99em) { .phase-scene { max-width: 40rem; } .phase-pulse { top: 0.3rem; width: 10px; height: calc(100% + var(--s6)); } .phase-4 .phase-pulse { width: 10px; height: calc(100% - 0.3rem); } .phases.is-in .phase-1 .phase-pulse::after { animation-name: hw-fall-1; } .phases.is-in .phase-2 .phase-pulse::after { animation-name: hw-fall-2; } .phases.is-in .phase-3 .phase-pulse::after { animation-name: hw-fall-3; } .phases.is-in .phase-4 .phase-pulse::after { animation-name: hw-fall-4; } } @media (prefers-reduced-motion: reduce) { .phase-pulse::after { animation: none !important; } } .scene-paused .phase-scene *, .scene-paused .phase-pulse::after { animation-play-state: paused !important; } /* how-scenes:end */ .phases-note { display: flex; gap: 0.75rem; align-items: flex-start; margin-top: var(--s7); padding-top: var(--s4); border-top: var(--rule-soft); max-width: 62rem; line-height: 1.5; } .phases-note .icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; color: var(--sage-ink); } .phases-note span { max-width: 78ch; } /* ------------------------------------------------------------------ What I do: five services, one line each, ruled */ /* the services: five plates with a big icon each */ .svc-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) var(--s5); } .svc { display: grid; gap: var(--s3); align-content: start; padding-top: var(--s4); border-top: var(--rule); } .svc h3 { font-size: var(--t-h4); letter-spacing: -0.02em; line-height: 1.12; } .svc p { font-size: var(--t-small); max-width: 31ch; color: var(--ink-3); } #services { padding-bottom: calc(var(--section) + clamp(1.5rem, 3vw, 3rem)); } /* V46 (Jeremy, Nov 11 2026: "Can you make these buttons awesome ?"): the six service tiles. A faceted charcoal plate (four low-poly facets, like the logo wolf and the hero), a soft light that sweeps across the facets now and then, and a drawn icon in paper white with one orange detail. When a row scrolls in its icon draws itself, then keeps one quiet motion of its own. */ .svc-ic { --ic: 4.5rem; position: relative; display: grid; place-items: center; width: var(--ic); height: var(--ic); border-radius: 16px; overflow: hidden; isolation: isolate; background: radial-gradient(120% 90% at 20% 0%, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0) 60%), conic-gradient(from 222deg at 36% 31%, #4A4540 0 23%, #2C2926 0 50%, #3A3632 0 76%, #46413B 0); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 -2px 0 rgb(0 0 0 / 0.22), 0 14px 22px -14px rgb(36 34 31 / 0.7), 0 2px 4px rgb(36 34 31 / 0.12); transition: transform 350ms var(--ease-out), box-shadow 350ms var(--ease-out); } .svc-ic::after { content: ""; position: absolute; inset: -40%; z-index: 1; pointer-events: none; opacity: 0; background: linear-gradient(115deg, rgb(255 255 255 / 0) 42%, rgb(255 250 240 / 0.22) 50%, rgb(255 255 255 / 0) 58%); transform: translateX(-60%); } .svc-ic svg { position: relative; z-index: 2; width: 58%; height: 58%; overflow: visible; fill: none; stroke: #F4EFE6; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .svc-ic .si-a { fill: var(--flame); stroke: none; } .svc-ic .si-f { fill: rgb(244 239 230 / 0.4); stroke: none; } .svc-ic .si-dot { fill: rgb(244 239 230 / 0.55); stroke: none; } .svc-ic .si-lat { stroke: rgb(244 239 230 / 0.45); stroke-width: 1.3; } .svc-ic .si-mer { stroke: var(--flame); } .svc-ic .si-spark { stroke: var(--flame); stroke-width: 1.7; fill: none; opacity: 0; } .svc-ic .si-led { fill: #8FD3A6; stroke: none; } .svc-ic .si-ring { fill: none; stroke: var(--flame); stroke-width: 1.4; opacity: 0; } .svc-ic .si-new { stroke: #2C2926; stroke-width: 1.6; paint-order: stroke; } .svc-ic .si-txt { stroke: rgb(244 239 230 / 0.32); stroke-width: 2; } .svc-ic .si-glass { fill: rgb(238 122 69 / 0.22); stroke: none; } .svc-ic .si-glint { stroke: rgb(255 255 255 / 0.8); stroke-width: 1.4; } .svc-ic .si-wrench, .svc-ic .si-mer, .svc-ic .si-a, .svc-ic .si-f, .svc-ic .si-led, .svc-ic .si-ring, .svc-ic .si-lens, .svc-ic .si-spark { transform-box: fill-box; transform-origin: center; } .svc-ic .si-wrench { transform-origin: 30% 70%; } .svc:hover .svc-ic { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 -2px 0 rgb(0 0 0 / 0.22), 0 20px 26px -14px rgb(36 34 31 / 0.75), 0 2px 4px rgb(36 34 31 / 0.12); } @media (prefers-reduced-motion: no-preference) { html.js .svc-ic .si-d { stroke-dasharray: 1; } .svc.is-in .si-d { animation: si-draw 1s var(--ease-out) calc(var(--rd, 0ms) + 250ms) both; } .svc.is-in .si-b1 { animation: si-grow 500ms var(--ease-spring) calc(var(--rd, 0ms) + 900ms) both; } .svc.is-in .si-b2 { animation: si-grow 500ms var(--ease-spring) calc(var(--rd, 0ms) + 1050ms) both; } .svc.is-in .si-b3 { animation: si-grow 500ms var(--ease-spring) calc(var(--rd, 0ms) + 1200ms) both; } .svc.is-in .si-dot { animation: fade-in 400ms ease calc(var(--rd, 0ms) + 800ms) both; } .svc.is-in .si-wrench { animation: si-turn 7s var(--ease-out) calc(var(--rd, 0ms) + 900ms) infinite; } .svc.is-in .si-spark { animation: si-spark 7s ease calc(var(--rd, 0ms) + 900ms) infinite; } .svc.is-in .si-mer { animation: si-spin 5s linear calc(var(--rd, 0ms) + 600ms) infinite; } .svc.is-in .si-led1 { animation: si-blink 2.6s steps(1) calc(var(--rd, 0ms) + 900ms) infinite; } .svc.is-in .si-led2 { animation: si-blink 2.6s steps(1) calc(var(--rd, 0ms) + 2200ms) infinite; } .svc.is-in .si-new { animation: si-grow 500ms var(--ease-spring) calc(var(--rd, 0ms) + 1100ms) both; } .svc.is-in .si-ring { animation: si-ping 4s ease-out calc(var(--rd, 0ms) + 1500ms) infinite; } .svc.is-in .si-lens { animation: si-scan 5.5s ease-in-out calc(var(--rd, 0ms) + 600ms) infinite; } .svc.is-in .svc-ic::after { animation: si-sheen 9s ease-in-out calc(var(--rd, 0ms) * 4 + 1.6s) infinite; } @keyframes si-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes si-grow { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } } @keyframes si-turn { 0%, 6% { transform: none; } 12% { transform: rotate(-32deg); } 18% { transform: rotate(4deg); } 22%, 100% { transform: none; } } @keyframes si-spark { 0%, 11% { opacity: 0; transform: scale(0.6); } 14% { opacity: 1; transform: none; } 22%, 100% { opacity: 0; transform: scale(1.15); } } @keyframes si-spin { from { transform: scaleX(1); } 50% { transform: scaleX(-1); } to { transform: scaleX(1); } } @keyframes si-blink { 0% { opacity: 1; } 8% { opacity: 0.25; } 14% { opacity: 1; } 20% { opacity: 0.35; } 26%, 100% { opacity: 1; } } @keyframes si-ping { 0% { opacity: 0.9; transform: scale(0.85); } 45%, 100% { opacity: 0; transform: scale(1.9); } } @keyframes si-scan { 0%, 100% { transform: translateX(-7px); } 45%, 55% { transform: translateX(1px); } } @keyframes si-sheen { 0%, 70% { opacity: 0; transform: translateX(-60%); } 74% { opacity: 1; } 88% { opacity: 1; transform: translateX(60%); } 92%, 100% { opacity: 0; transform: translateX(60%); } } } .scene-paused .svc-ic *, .scene-paused .svc-ic::after { animation-play-state: paused !important; } @media (max-width: 63.99em) { .svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 47.99em) { .svc-list { grid-template-columns: 1fr; gap: 0; } .svc { grid-template-columns: 3.75rem minmax(0, 1fr); column-gap: var(--s4); row-gap: 0.25rem; padding-block: var(--s4); } .svc .svc-ic { grid-row: 1 / span 2; --ic: 3.75rem; } .svc p { max-width: none; } } /* the ridge: low hills rising out of the page into the charcoal work band, one cactus on the skyline */ .ridge { position: absolute; left: 0; right: 0; bottom: 100%; width: 100%; height: clamp(3rem, 6vw, 6rem); display: block; } .ridge-far { fill: var(--stone-2); } .ridge-near { fill: var(--ink); --eye: var(--paper); --glint: 0; --eye-scale: 1.45; } /* ------------------------------------------------------------------ Mounts: a real site on stone, the same way everywhere V47 (Jeremy, Nov 11 2026: "Sharpen up all these boxes and frames as well", "sharpen the logo frames and just polish and sharpen all these lines and boxes up"). The same crafted look as the service tiles: the mount is a rounded plate with soft facets like the logo, the screenshot sits in a slim browser window with a fine edge, and the phone is a real phone (graphite frame, glass, a side button). */ .mount { --m-pad: clamp(1rem, 3.2vw, 3rem); --m-r: clamp(14px, 1.4vw, 22px); position: relative; isolation: isolate; padding: var(--m-pad); border-radius: var(--m-r); background: radial-gradient(130% 100% at 8% 0%, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0) 55%), conic-gradient(from 222deg at 34% 30%, #E8E1D3 0 23%, #DFD6C6 0 50%, #E5DDCE 0 76%, #ECE5D8 0); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.75), inset 0 0 0 1px rgb(36 34 31 / 0.08), 0 36px 60px -42px rgb(36 34 31 / 0.55), 0 10px 22px -16px rgb(36 34 31 / 0.22); } .mount-pic { position: relative; display: block; overflow: hidden; border-radius: clamp(7px, 0.7vw, 11px); background: var(--paper-2); box-shadow: 0 0 0 1px rgb(36 34 31 / 0.16), 0 1px 2px rgb(36 34 31 / 0.1), 0 22px 36px -22px rgb(36 34 31 / 0.5); } /* the browser window: a slim bar with three dots */ .mount-pic::before { content: ""; display: block; font-size: clamp(8px, 0.85vw, 14px); height: 1.9em; border-bottom: 1px solid #E1DDD6; background: radial-gradient(circle at 1.25em 50%, #CBC5BC 0.3em, transparent 0.34em), radial-gradient(circle at 2.25em 50%, #CBC5BC 0.3em, transparent 0.34em), radial-gradient(circle at 3.25em 50%, #CBC5BC 0.3em, transparent 0.34em), linear-gradient(180deg, #F7F5F1, #EFECE6); } .mount-pic img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform 900ms var(--ease-out); } a.mount-pic:hover img { transform: scale(1.012); } .mount:hover .mount-pic img { transform: scale(1.015); } .mount:hover .mount-phone { transform: translateY(-4px); } .mount-phone { --ph-pad: clamp(0.22rem, 0.42vw, 0.4rem); --ph-r: clamp(0.9rem, 2vw, 1.55rem); position: absolute; z-index: 2; right: clamp(1.75rem, 5vw, 4.5rem); bottom: var(--m-pad); width: clamp(5.5rem, 13vw, 10rem); padding: var(--ph-pad); border-radius: var(--ph-r); transition: transform 600ms var(--ease-out); background: linear-gradient(150deg, #6E6E74 0%, #2C2C30 13%, #18181B 55%, #3C3C42 100%); box-shadow: inset 0 0 0 1.5px #0D0D0F, inset 0 0 0 2.5px rgb(255 255 255 / 0.08), 0 28px 40px -20px rgb(20 18 16 / 0.6), 0 6px 12px -6px rgb(20 18 16 / 0.3); } .mount-phone img { width: 100%; border-radius: calc(var(--ph-r) - var(--ph-pad)); aspect-ratio: 300 / 650; object-fit: cover; object-position: top; } .mount-phone::before { content: ""; position: absolute; inset: var(--ph-pad); border-radius: calc(var(--ph-r) - var(--ph-pad)); pointer-events: none; /* the glass */ background: linear-gradient(118deg, rgb(255 255 255 / 0) 36%, rgb(255 255 255 / 0.16) 45%, rgb(255 255 255 / 0.04) 57%, rgb(255 255 255 / 0) 59%); } .mount-phone::after { content: ""; position: absolute; right: -2px; top: 22%; width: 2.5px; height: 11%; border-radius: 0 2px 2px 0; background: linear-gradient(90deg, #1B1B1E, #5A5A60); } /* the side button */ @media (max-width: 47.99em) { .mount { --m-pad: 0.85rem; } } /* the business's logo, on a small raised plate */ .site-logo { box-sizing: border-box; height: 4.25rem; width: auto; max-width: 15rem; object-fit: contain; object-position: center; padding: 0.6rem 0.95rem; border-radius: 12px; background: linear-gradient(180deg, #FFFEFB, #F5F1E9); box-shadow: inset 0 0 0 1px rgb(36 34 31 / 0.12), inset 0 1px 0 #fff, 0 1px 2px rgb(36 34 31 / 0.08), 0 12px 22px -14px rgb(36 34 31 / 0.45); } /* the line above the words: a fine rule with a short orange mark, like a ruler's first tick */ .slide-text, .show-text { position: relative; border-top: 1px solid rgb(36 34 31 / 0.22); } .slide-text::before, .show-text::before { content: ""; position: absolute; left: 0; top: -2px; width: 2.75rem; height: 3px; border-radius: 2px; background: var(--accent); } /* Visit the site: a raised key with the arrow on its own small facet */ .button-visit { --b-fg: var(--ink); --b-bg: linear-gradient(180deg, #FFFEFB, #F2EDE4); --b-bg-hover: linear-gradient(180deg, #FFFFFF, #F5F1EA); gap: 1rem; padding: 0.45rem 0.45rem 0.45rem 1.2rem; border-radius: 12px; transition: box-shadow 200ms ease, transform 200ms var(--ease-out); box-shadow: inset 0 0 0 1px rgb(36 34 31 / 0.3), inset 0 1px 0 #fff, 0 1px 2px rgb(36 34 31 / 0.08), 0 12px 22px -14px rgb(36 34 31 / 0.5); } .button-visit .icon { box-sizing: content-box; width: 1em; height: 1em; padding: 0.6rem; border-radius: 9px; color: #F4EFE6; background: radial-gradient(120% 90% at 30% 0%, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0) 60%), conic-gradient(from 222deg at 36% 31%, #4A4540 0 23%, #2C2926 0 50%, #3A3632 0 76%, #46413B 0); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12); transition: transform 220ms var(--ease-out), background 200ms ease, color 200ms ease; } .button-visit:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgb(36 34 31 / 0.45), inset 0 1px 0 #fff, 0 1px 2px rgb(36 34 31 / 0.1), 0 16px 26px -14px rgb(36 34 31 / 0.55); } .button-visit:hover .icon { transform: none; background: var(--accent); color: #fff; } .button-visit:active { transform: translateY(1px); } /* ------------------------------------------------------------------ Recent work: one site at a time, on its mount */ .work-band { background: var(--ink); color: var(--on-ink); position: relative; } .work-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #C94B17; } .work-band > .wrap { position: relative; } .work-band .sec-head { border-top-color: rgb(244 242 238 / 0.4); } .work-band .lead { color: var(--on-ink-muted); } .work-band .mount { background: radial-gradient(130% 100% at 8% 0%, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0) 55%), conic-gradient(from 222deg at 34% 30%, #3E3934 0 23%, #2E2A27 0 50%, #38332F 0 76%, #433E38 0); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.09), inset 0 0 0 1px rgb(255 255 255 / 0.07), 0 44px 70px -44px rgb(0 0 0 / 0.85); } .work-band .mount-pic { box-shadow: 0 0 0 1px rgb(0 0 0 / 0.4), 0 24px 40px -20px rgb(0 0 0 / 0.75); } .work-band .mount-phone { box-shadow: inset 0 0 0 1.5px #0D0D0F, inset 0 0 0 2.5px rgb(255 255 255 / 0.08), 0 0 0 1px rgb(255 255 255 / 0.1), 0 28px 40px -18px rgb(0 0 0 / 0.75); } .work-band .slide-text { border-top-color: rgb(244 242 238 / 0.2); } .work-band .slide-text::before { background: var(--flame); } .work-band .site-logo { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.6), 0 0 0 1px rgb(0 0 0 / 0.35), 0 14px 26px -14px rgb(0 0 0 / 0.8); } .work-band .button-visit { --b-fg: var(--on-ink); --b-bg: linear-gradient(180deg, #423D37, #322E2A); --b-bg-hover: linear-gradient(180deg, #4A443E, #38332E); box-shadow: inset 0 0 0 1px rgb(244 242 238 / 0.22), inset 0 1px 0 rgb(255 255 255 / 0.1), 0 14px 26px -14px rgb(0 0 0 / 0.8); } .work-band .button-visit:hover { box-shadow: inset 0 0 0 1px rgb(238 122 69 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.12), 0 18px 30px -14px rgb(0 0 0 / 0.85); } .work-band .button-visit .icon { color: var(--ink); background: var(--flame); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3); } .work-band .button-visit:hover .icon { background: #F59468; color: var(--ink); } .work-band .car-dot i { background: rgb(244 242 238 / 0.2); } .work-band .car-dot:hover i { background: rgb(244 242 238 / 0.36); } .work-band .car-dot i::after { background: var(--on-ink); } .work-band .carousel.is-auto .car-dot[aria-current="true"] i::after { background: var(--flame); } .work-band .link-arrow .icon { color: var(--flame); } .work-band .link-arrow:hover span { text-decoration-color: var(--flame); } .work-band .tag { background: var(--ink-3); color: var(--on-ink); } .carousel { position: relative; } .car-nav { display: flex; align-items: center; gap: 0.55rem; } .car-all { margin-left: auto; } /* the slider keys: small faceted charcoal plates, like the service tiles */ .car-btn { width: 3.25rem; height: 3.25rem; border: 0; border-radius: 12px; color: #F4EFE6; display: grid; place-items: center; cursor: pointer; background: radial-gradient(120% 90% at 30% 0%, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0) 60%), conic-gradient(from 222deg at 36% 31%, #4C4742 0 23%, #34302C 0 50%, #413C37 0 76%, #4D4843 0); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 12px 20px -10px rgb(0 0 0 / 0.75); transition: transform 200ms var(--ease-out), box-shadow 200ms ease, color 160ms ease; } .car-btn:hover { color: var(--flame); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 0 0 1px rgb(238 122 69 / 0.55), 0 16px 24px -10px rgb(0 0 0 / 0.8); } .car-btn:active { transform: translateY(1px); } .car-btn .icon, .car-btn svg { width: 1.2rem; height: 1.2rem; } .car-play .i-play { display: none; } .carousel.is-stopped .car-play .i-play { display: block; } .carousel.is-stopped .car-play .i-pause { display: none; } .carousel.no-autoplay .car-play { display: none; } /* See all the work: the arrow in a small ring that fills on hover */ .work-band .car-all .icon { box-sizing: content-box; padding: 0.45rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(244 242 238 / 0.28); transition: transform 200ms var(--ease-out), background 200ms ease, color 200ms ease, box-shadow 200ms ease; } .work-band .car-all:hover .icon { background: var(--flame); color: var(--ink); box-shadow: inset 0 0 0 1px var(--flame); } .track { display: flex; gap: var(--s6); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } .track::-webkit-scrollbar { display: none; } .track:focus-visible { outline-offset: 6px; } .slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s5); align-items: center; } .slide .mount { grid-column: 1 / span 8; } .slide-text { grid-column: 9 / -1; display: grid; gap: var(--s4); justify-items: start; padding-top: var(--s5); } .slide-name { font-size: var(--t-h3); letter-spacing: -0.03em; line-height: 1; } .slide-about { max-width: 34ch; } .slide-link { margin-top: var(--s2); } .car-foot { display: flex; align-items: center; gap: 1rem 1.5rem; margin-top: clamp(2rem, 4vw, 3rem); flex-wrap: wrap; } /* the progress bars: rounded, the current one longer */ .car-dots { display: flex; align-items: center; gap: 0.4rem; } .car-dot { position: relative; width: 2.25rem; height: 2.75rem; border: 0; background: none; cursor: pointer; padding: 0; } .car-dot[aria-current="true"] { width: 4rem; } .car-dot i { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--line-2); overflow: hidden; transition: background 160ms ease; } .car-dot i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); transform: scaleX(0); transform-origin: left; } .car-dot[aria-current="true"] i::after { transform: scaleX(1); } .carousel.is-auto .car-dot[aria-current="true"] i::after { background: var(--accent); animation: dot-fill var(--auto, 6000ms) linear both; } .carousel.is-paused .car-dot[aria-current="true"] i::after { animation-play-state: paused; } @media (prefers-reduced-motion: no-preference) { .car-dot { transition: width 360ms var(--ease-out); } } @keyframes dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (max-width: 63.99em) { .slide { align-content: start; } .slide .mount, .slide-text { grid-column: 1 / -1; } .slide-text { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } .slide-text > * { grid-column: 1; } .slide-text .slide-link { grid-column: 2; grid-row: 1 / span 5; margin-top: 0; } } @media (max-width: 47.99em) { .slide-text { grid-template-columns: 1fr; } .slide-text .slide-link { grid-column: 1; grid-row: auto; margin-top: var(--s2); } .car-btn { width: 2.9rem; height: 2.9rem; border-radius: 11px; } .car-dot { width: 1.9rem; } .car-dot[aria-current="true"] { width: 3.25rem; } } /* ------------------------------------------------------------------ Questions */ .faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s6) var(--s5); align-items: start; padding-top: var(--s5); background: linear-gradient(var(--ink), var(--ink)) no-repeat center top / calc(100% - 2 * var(--gutter)) 1px; } /* the rule stays inside the column, like every other section head */ .faq-head { grid-column: 1 / span 6; display: grid; gap: var(--s5); justify-items: start; position: sticky; top: 7rem; } .faq-head .h2 { max-width: 10ch; } .faqs { grid-column: 7 / -1; border-bottom: var(--rule); } .faq { border-top: var(--rule); } .faq:first-child { border-top: 0; } /* the section rule above already opens the list */ .faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.35rem 0; cursor: pointer; font-family: var(--display); font-weight: 500; font-size: var(--t-h4); line-height: 1.2; letter-spacing: -0.02em; } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--accent-dark); } .faq-ic { width: 2.5rem; height: 2.5rem; flex: none; border-radius: var(--r); display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); transition: transform 300ms var(--ease-out), background 200ms ease, color 200ms ease; } .faq-ic .icon { width: 1.1rem; height: 1.1rem; } .faq[open] .faq-ic { transform: rotate(45deg); background: var(--ink); color: var(--on-ink); } .faq-a { padding: 0 4rem 1.6rem 0; font-size: var(--t-lead); line-height: 1.5; } @media (prefers-reduced-motion: no-preference) { .faq[open] .faq-a { animation: faq-in 380ms var(--ease-out); } } @keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (max-width: 63.99em) { .faq-head, .faqs { grid-column: 1 / -1; } .faq-head { position: static; } .faq-head .h2 { max-width: 14ch; } .faq-a { padding-right: 0; } } /* ------------------------------------------------------------------ The close: stone, a big line and one button */ .close-wrap { background: var(--stone); padding-block: var(--section) clamp(3rem, 6vw, 5rem); } .close { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s6) var(--s5); align-items: end; } .close h2 { grid-column: 1 / span 7; font-size: clamp(3rem, 1.2rem + 6vw, 7.5rem); line-height: 0.92; letter-spacing: -0.045em; max-width: 9ch; } .close-side { grid-column: 8 / -1; display: grid; gap: var(--s5); justify-items: start; } .close-side > p { font-size: var(--t-lead); line-height: 1.5; max-width: 38ch; } @media (max-width: 63.99em) { .close h2, .close-side { grid-column: 1 / -1; } } /* ------------------------------------------------------------------ Fields (shared by the intake form and the close) */ .field { width: 100%; font: inherit; color: var(--ink); background: var(--paper-2); border: 0; border-radius: var(--r); padding: 0.85rem 1rem; min-height: 3.25rem; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: box-shadow 180ms ease, background 180ms ease; } .field::placeholder { color: #7D766C; } .field:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } .field:focus { outline: none; background: var(--white); box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 4px rgb(201 75 23 / 0.18); } textarea.field { min-height: 6.5rem; resize: vertical; line-height: 1.5; } .field[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--error); background: var(--error-tint); } .on-stone .field, .close .field { background: var(--paper); } /* ------------------------------------------------------------------ Inner pages: the head. A big title, the line beside it, plain notes under a rule */ .page-head { border-bottom: var(--rule); } .page-head-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s6) var(--s5); align-items: end; padding-block: clamp(2.75rem, 7vw, 6rem) clamp(2rem, 4vw, 3.25rem); } .page-head h1 { grid-column: 1 / span 8; max-width: 13ch; } .page-head-side { grid-column: 9 / -1; display: grid; gap: var(--s5); } .page-head .lead { max-width: 36ch; } .page-notes { border-top: var(--rule); } .page-notes li { padding: 0.6rem 0; border-bottom: var(--rule-soft); font-weight: 600; font-size: var(--t-small); } .page-notes li:last-child { border-bottom: 0; padding-bottom: 0; } @media (max-width: 63.99em) { .page-head h1, .page-head-side { grid-column: 1 / -1; } .page-head-side { max-width: 34rem; } } /* ------------------------------------------------------------------ Work: each site big on its mount, a second page and the words beside it */ .work-section { padding-top: clamp(2.5rem, 5vw, 4rem); } .shows { display: grid; gap: clamp(4rem, 9vw, 7.5rem); } .show { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s5); align-items: stretch; } .show-art { grid-column: 1 / span 8; min-width: 0; } .show-side { grid-column: 9 / -1; display: grid; align-content: center; min-width: 0; } .show-flip .show-art { grid-column: 5 / -1; grid-row: 1; } .show-flip .show-side { grid-column: 1 / span 4; grid-row: 1; } .show-text { display: grid; gap: var(--s4); justify-items: start; padding-top: var(--s5); } /* V47: the rule and its orange tick live with .slide-text in home.css */ .show-name { font-size: var(--t-h3); letter-spacing: -0.03em; line-height: 1; } .show-text .site-logo { height: 4.5rem; } .show-text p { max-width: 36ch; } .show-text .button { margin-top: var(--s2); } @media (max-width: 63.99em) { .show-art, .show-flip .show-art, .show-side, .show-flip .show-side { grid-column: 1 / -1; grid-row: auto; } .show-side { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; align-items: start; } .show-text { grid-row: auto; grid-column: 1 / -1; align-self: start; } } @media (max-width: 47.99em) { .show-side { grid-template-columns: 1fr; } .show-text { grid-column: 1; } } /* ------------------------------------------------------------------ Start a project */ .page-head-start { border-bottom: 0; } .start-section { padding-top: 0; } .start-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s6) var(--s5); align-items: start; } .start-grid > .intake { grid-column: 1 / span 8; } .start-aside { grid-column: 9 / -1; position: sticky; top: 6.5rem; display: grid; gap: var(--s6); } .aside-block { padding-top: var(--s4); border-top: var(--rule); } .aside-h { font-family: var(--display); font-weight: 500; font-size: var(--t-h4); letter-spacing: -0.02em; line-height: 1.1; } .aside-h { margin-bottom: var(--s4); } .next-steps { display: grid; } .next-steps li { padding: 0.75rem 0; line-height: 1.4; } .next-steps li + li { border-top: var(--rule-soft); } .aside-safe .aside-h { display: flex; align-items: center; gap: 0.5rem; } .aside-safe .aside-h .icon { width: 1.05em; height: 1.05em; color: var(--sage); } .safe-list { display: grid; gap: 0.5rem; } .safe-list li { position: relative; padding-left: 1.25rem; line-height: 1.4; } .safe-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.45rem; height: 0.45rem; background: var(--sage); } .safe-list a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; } .next-steps li:first-child { padding-top: 0; } .next-steps strong { display: block; font-weight: 650; } .aside-tip { padding: 1.1rem 1.25rem; border-top: 0; background: var(--stone); } .reach-list li + li { margin-top: 0.4rem; } @media (max-width: 63.99em) { .start-grid > .intake, .start-aside { grid-column: 1 / -1; } .start-aside { position: static; order: 2; } } /* the form (class names come from src/partials/intake-form.html) */ .intake { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); min-width: 0; } .qs { border: 0; display: grid; gap: var(--s5); min-width: 0; padding-top: var(--s4); border-top: var(--rule); scroll-margin-top: 6.5rem; } .qs-h { float: left; width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-family: var(--display); font-weight: 500; font-size: var(--t-h3); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: var(--s2); } .qs-h + * { clear: both; } .q { display: grid; gap: 0.55rem; border: 0; min-width: 0; } .q > label, .q > legend { font-weight: 600; line-height: 1.35; } /* the question numbers: big sage figures, in the margin on wide screens, above the question elsewhere */ .qn { display: block; font-family: var(--display); font-weight: 600; font-size: 1.6rem; line-height: 1; letter-spacing: -0.03em; color: var(--sage); margin-bottom: 0.45rem; transition: color 200ms ease; } .q.is-filled .qn { color: var(--ink); } .q:focus-within .qn { color: var(--accent); } @media (min-width: 80em) { #qs-project .q { position: relative; } .qn { position: absolute; left: -3.6rem; top: -0.15rem; width: 3rem; text-align: right; margin: 0; } } .q > legend { margin-bottom: 0.6rem; float: left; width: 100%; } .q > legend + * { clear: both; } .req, .opt { font-weight: 500; color: var(--muted); font-size: var(--t-small); } .req { color: var(--accent-dark); } .q-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } @media (max-width: 47.99em) { .q-row { grid-template-columns: 1fr; } } .picks { display: flex; flex-wrap: wrap; gap: 0.5rem; } .pick { position: relative; max-width: 100%; } /* V27: long choices wrap instead of pushing the page sideways (WCAG 1.4.10 / 1.4.12) */ .pick input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .pick span { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.9rem; padding: 0.55rem 1rem; border-radius: var(--r); background: var(--paper-2); box-shadow: inset 0 0 0 1.5px var(--line-2); cursor: pointer; font-weight: 500; transition: background 160ms ease, box-shadow 160ms ease, color 160ms ease; } .pick span::before { content: ""; width: 0; height: 1rem; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; margin-right: -0.4rem; transition: width 180ms var(--ease-out), margin 180ms var(--ease-out); } .pick:hover span { box-shadow: inset 0 0 0 1.5px var(--ink); } .pick input:checked + span { background: var(--ink); color: var(--on-ink); box-shadow: inset 0 0 0 1.5px var(--ink); } .pick input:checked + span::before { width: 1rem; margin-right: 0; } .pick input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; } .bot-field { position: absolute; left: -9999px; opacity: 0; } .error-summary[hidden] { display: none; } .error-summary { background: var(--error-tint); border-left: 4px solid var(--error); padding: 1.1rem 1.35rem; display: grid; gap: 0.5rem; } .error-h { font-weight: 700; color: var(--error); } .error-summary ul { padding-left: 1.25rem; list-style: disc; } .error-summary a { color: var(--error); font-weight: 500; } .form-actions { display: grid; gap: var(--s4); justify-items: start; background: var(--stone); padding: clamp(1.5rem, 3.5vw, 2.5rem); border-top: var(--rule); } .button-big { font-size: 1.125rem; } .form-fine .icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; margin-right: 0.35rem; color: var(--sage); } .form-fine { font-size: var(--t-small); max-width: 56ch; color: var(--muted); } .form-fine a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 0.2em; } .form-status { font-weight: 600; } .form-status:empty { display: none; } @media (max-width: 29.99em) { .form-actions .button { width: 100%; } } /* ------------------------------------------------------------------ Thanks and 404 */ .end-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s6) var(--s5); align-items: stretch; } .end-text { grid-column: 1 / span 7; display: grid; gap: var(--s5); justify-items: start; align-content: start; padding-block: clamp(2.75rem, 7vw, 5.5rem); } .end-text h1 { max-width: 12ch; } .end-text nav { width: 100%; } .end-side { grid-column: 9 / -1; position: relative; display: grid; place-items: center; background: var(--stone); margin-right: calc(var(--bleed) * -1); min-height: 22rem; overflow: hidden; } .end-side img { width: min(42%, 11rem); grid-area: 1 / 1; } .end-404 { grid-area: 1 / 1; font-family: var(--display); font-weight: 500; font-size: clamp(7rem, 4rem + 10vw, 15rem); line-height: 1; letter-spacing: -0.05em; color: var(--stone-2); max-width: none; } .end-404 + img { width: min(30%, 8rem); } .lost .end-side { background: var(--ink); } .lost .end-404 { color: rgb(244 242 238 / 0.09); } .thanks-steps { display: grid; width: 100%; max-width: 40rem; border-top: var(--rule); } .thanks-steps li { display: flex; gap: 1rem; align-items: flex-start; padding: 0.85rem 0; border-bottom: var(--rule-soft); } .thanks-steps strong { display: block; } .ts-n { width: 1.75rem; flex: none; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--muted); padding-top: 0.05rem; } .ts-n .icon { width: 1.2rem; height: 1.2rem; color: var(--good); } .go-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); width: 100%; max-width: 40rem; } @media (max-width: 29.99em) { .go-cards { grid-template-columns: 1fr; } } .go-cards a { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 0; border-top: var(--rule); text-decoration: none; } .go-t { display: grid; flex: 1; min-width: 0; } .go-t strong { font-family: var(--display); font-weight: 500; font-size: var(--t-h4); letter-spacing: -0.02em; line-height: 1.15; } .go-t small { color: var(--muted); font-size: var(--t-small); } .go-cards a > .icon { width: 1.25rem; height: 1.25rem; color: var(--accent); transition: transform 200ms var(--ease-out); } .go-cards a:hover strong { color: var(--accent-dark); } .go-cards a:hover > .icon { transform: translateX(4px); } @media (max-width: 63.99em) { .end-text, .end-side { grid-column: 1 / -1; } .end-side { order: -1; min-height: 0; aspect-ratio: 16 / 6; margin-left: calc(var(--gutter) * -1); } .end-text { padding-top: 0; } .end-side img { width: min(20%, 7rem); } .end-404 { font-size: clamp(5rem, 3rem + 10vw, 9rem); } } /* ------------------------------------------------------------------ Privacy */ .pv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin-bottom: clamp(3rem, 6vw, 5rem); } .pv-cards li { display: grid; gap: var(--s2); align-content: start; padding-top: var(--s4); border-top: var(--rule); } .pv-h { font-size: var(--t-h4); letter-spacing: -0.02em; line-height: 1.15; } .pv-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s6) var(--s5); align-items: start; } .toc { grid-column: 1 / span 3; position: sticky; top: 6.5rem; } .toc-h { font-weight: 650; font-size: var(--t-small); color: var(--muted); margin-bottom: var(--s3); } .toc ol { display: grid; border-left: 2px solid var(--line); } .toc a { display: block; padding: 0.45rem 0 0.45rem 1rem; margin-left: -2px; border-left: 2px solid transparent; text-decoration: none; color: var(--muted); font-weight: 500; transition: color 160ms ease, border-color 160ms ease; } .toc a:hover { color: var(--ink); } .toc a.is-current { color: var(--ink); border-left-color: var(--accent); } .prose { grid-column: 5 / -1; display: grid; } .prose section { scroll-margin-top: 6.5rem; padding: var(--s5) 0 var(--s6); border-top: var(--rule); } .prose h2 { font-size: var(--t-h4); letter-spacing: -0.02em; margin-bottom: 0.75rem; } .prose p { max-width: 56ch; font-size: var(--t-lead); line-height: 1.55; } .prose a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; } @media (max-width: 63.99em) { .pv-cards { grid-template-columns: 1fr; gap: var(--s4); } .toc, .prose { grid-column: 1 / -1; } .toc { position: static; } } /* ------------------------------------------------------------------ Pricing, care plan, reviews: ruled rows and two-column sections */ .rates { display: grid; border-top: var(--rule); } .rate { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s4) var(--s5); align-items: start; padding: var(--s5) 0 var(--s6); border-bottom: var(--rule); } .rate-name { grid-column: 1 / span 4; font-size: var(--t-h3); letter-spacing: -0.03em; line-height: 1.05; } .rate:not(.rate-after):hover .rate-price { color: var(--accent); } .rate-price { transition: color 200ms ease; grid-column: 5 / span 3; font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 1rem + 2.4vw, 3.4rem); letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; } .rate-price small { display: block; font-family: var(--text); font-weight: 600; font-size: var(--t-small); letter-spacing: 0; color: var(--muted); margin-bottom: 0.4rem; } .rate-price span { font-family: var(--text); font-weight: 500; font-size: var(--t-body); letter-spacing: 0; } .rate-text { grid-column: 8 / -1; display: grid; gap: var(--s3); } .rate-text p { max-width: 46ch; } .rate-who { color: var(--muted); font-size: var(--t-small); font-weight: 600; } /* V35: the last row of the price list, for anything not listed: "Let's talk" sits where a price would, in orange */ .rate-fit .rate-price { color: var(--accent); } .rate-fit .link-arrow { color: var(--ink); } .rate-after { background: var(--ink); color: var(--on-ink); border-bottom: 0; margin-top: var(--s5); margin-inline: calc(-1 * var(--s4)); padding: var(--s5) var(--s4) var(--s6); position: relative; overflow: hidden; } .rate-after::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("../images/facets.svg") no-repeat right -10rem center / 80rem auto; opacity: 0.09; } .rate-after > * { position: relative; } .rate-after .rate-price { color: var(--flame); } .rate-after .rate-price small { color: var(--on-ink-muted); } .rate-after strong { color: var(--flame); font-weight: 650; } .two-col { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s6) var(--s5); align-items: start; padding-top: var(--s5); } /* V22: the top rule sits inside the gutters, in line with every other section rule (a border on the wrap ran past the content) */ .two-col::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: var(--rule); } .two-col-side { grid-column: 1 / span 5; display: grid; gap: var(--s4); position: sticky; top: 6.5rem; } .two-col-side .h2 { max-width: 10ch; } .two-col-side .lead { max-width: 30ch; } .two-col > .ruled, .two-col > .plain { grid-column: 7 / -1; } .plain { display: grid; gap: var(--s4); } .plain p { max-width: 58ch; font-size: var(--t-lead); line-height: 1.55; } .ruled { display: grid; } .ruled li { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: var(--s2) var(--s5); padding: 1.1rem 0 1.25rem; border-bottom: var(--rule); } .ruled li:first-child { padding-top: 0; } .two-col > .ruled li:first-child { padding-top: 0.2rem; } .ruled h3 { font-size: var(--t-h4); letter-spacing: -0.02em; line-height: 1.15; } .ruled:not(.ruled-sites) li { align-items: baseline; } .ruled p { max-width: 46ch; } .ruled-sites li { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto; align-items: start; } .ruled-go { font-size: var(--t-small); white-space: nowrap; padding-top: 0.2em; } @media (max-width: 63.99em) { .rate-name { grid-column: 1 / span 6; } .rate-price { grid-column: 7 / -1; } .rate-text { grid-column: 1 / -1; } .two-col-side, .two-col > .ruled, .two-col > .plain { grid-column: 1 / -1; } .two-col-side { position: static; } } @media (max-width: 47.99em) { .rate { gap: var(--s3); } .rate-name, .rate-price { grid-column: 1 / -1; } .ruled li, .ruled-sites li { grid-template-columns: 1fr; gap: var(--s2); } } /* ------------------------------------------------------------------ Reviews: real quotes, one per row, ruled like the rest */ .quotes { display: grid; border-top: var(--rule); } .quote { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s3) var(--s5); padding: clamp(1.75rem, 3.5vw, 2.75rem) 0; border-bottom: var(--rule); } .quote-text { grid-column: 1 / span 8; margin: 0; } .quote-text p { font-family: var(--display); font-weight: 500; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.02em; text-wrap: pretty; } .quote-text p::before { content: "\201C"; color: var(--accent); } .quote-text p::after { content: "\201D"; color: var(--accent); } .quote-by { grid-column: 10 / -1; display: grid; gap: 0.15rem; align-self: end; font-size: var(--t-small); line-height: 1.4; } .quote-by strong { font-weight: 650; font-size: var(--t-body); } .quote-by span { color: var(--muted); } .quote-by .link { justify-self: start; margin-top: 0.4rem; } @media (max-width: 63.99em) { .quote-text, .quote-by { grid-column: 1 / -1; } .quote-by { align-self: start; } } /* ------------------------------------------------------------------ About: the head, with Jeremy (or the logo, until his photo is in) on a stone mount */ .about-hero { border-bottom: var(--rule); } .about-hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s6) var(--s5); align-items: stretch; } .about-text { grid-column: 1 / span 7; display: grid; gap: var(--s5); justify-items: start; align-content: end; padding-block: clamp(2.75rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); } .about-text h1 { max-width: 10ch; } .about-lead { max-width: 44ch; } .profile { grid-column: 9 / -1; display: grid; grid-template-rows: 1fr auto; background: var(--stone); margin-right: calc(var(--bleed) * -1); } .profile-pic { display: grid; place-items: center; min-height: 18rem; padding: clamp(1.5rem, 3vw, 2.5rem); } .profile-pic img { width: min(58%, 13rem); height: auto; } .profile.has-photo .profile-pic { padding: 0; } .profile.has-photo .profile-pic img { width: 100%; height: 100%; object-fit: cover; } .profile-body { display: grid; gap: 0.25rem; padding: var(--s4) var(--bleed) var(--s5) clamp(1.5rem, 3vw, 2.5rem); border-top: var(--rule); } .profile-name { font-family: var(--display); font-weight: 500; font-size: var(--t-h3); letter-spacing: -0.03em; line-height: 1; } .profile-name span { display: block; font-family: var(--text); font-weight: 500; font-size: var(--t-body); letter-spacing: 0; margin-top: 0.4rem; } .profile-status { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: var(--s3); font-weight: 600; font-size: var(--t-small); color: var(--good); } @media (max-width: 63.99em) { .about-text, .profile { grid-column: 1 / -1; } .about-text { padding-bottom: 0; } .profile { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); grid-template-rows: none; margin-left: calc(var(--gutter) * -1); } .profile-pic { min-height: 0; } .profile-body { border-top: 0; border-left: var(--rule); align-content: center; } } @media (max-width: 35.99em) { .profile { grid-template-columns: 1fr; } .profile-pic { padding: 2rem; } .profile-pic img { width: 7rem; } .profile-body { border-left: 0; border-top: var(--rule); padding-left: var(--gutter); } } /* the six promises: plain statements on a ruled grid */ .pledges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3rem) var(--s5); } .pledge { display: grid; gap: 0.6rem; align-content: start; padding-top: var(--s4); border-top: var(--rule); } .pledge h3 { font-size: var(--t-h4); letter-spacing: -0.02em; line-height: 1.12; } .pledge p { max-width: 34ch; } @media (max-width: 63.99em) { .pledges { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 47.99em) { .pledges { grid-template-columns: 1fr; gap: 0; } .pledge { grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: var(--s4); row-gap: 0.25rem; padding-block: var(--s4); } .pledge .plate-ic { grid-row: 1 / span 2; } .pledge p { max-width: none; } } /* the name */ .story-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s6) var(--s5); align-items: center; } .story-art { grid-column: 1 / span 5; display: grid; place-items: center; aspect-ratio: 1; background: var(--ink); margin-left: calc(var(--bleed) * -1); position: relative; overflow: hidden; } .story-art::before { content: ""; position: absolute; inset: 0; background: url("../images/facets.svg") no-repeat center / 220% auto; opacity: 0.16; } .story-art img { width: 64%; position: relative; } .story-text { grid-column: 7 / -1; display: grid; gap: var(--s5); } .story-text .h2 { max-width: 8ch; } .story-text .lead { max-width: 40ch; } /* V43: the promises and the name share the same paper, so they don't need two full section gaps between them */ .section.tex + .section.story { padding-top: calc(var(--section) * 0.35); } @media (max-width: 63.99em) { .story-art { grid-column: 1 / span 5; aspect-ratio: 4 / 5; } .story-text { grid-column: 6 / -1; } } @media (max-width: 47.99em) { .story-art { grid-column: 1 / -1; aspect-ratio: 16 / 9; margin-left: 0; } .story-art img { width: 38%; } .story-text { grid-column: 1 / -1; } } .about-more { max-width: 44ch; } /* ------------------------------------------------------------------ Footer: night. The signature scene on top (a wolf howls at the moon, then runs off past the cactus; it loops, and stands still for people who turn motion off), then the brand, the motto, the pages and a way to reach Jeremy, all on charcoal. */ .site-footer { position: relative; background: var(--ink); color: var(--on-ink); } .site-footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 220px 220px; } .foot-scene { position: relative; overflow: hidden; background: linear-gradient(180deg, #1C1A18 0%, #24221F 50%, #2D2722 100%); } .shoot { opacity: 0; animation: shoot 18s linear infinite; } @keyframes shoot { 0%, 60% { opacity: 0; transform: translate(0, 0); } 61% { opacity: 0.9; } 64%, 100% { opacity: 0; transform: translate(-230px, 86px); } } .scene { display: block; width: 100%; height: clamp(170px, 18.67vw, 440px); } .stars circle { animation: twinkle 5s ease-in-out infinite; } .stars circle:nth-child(3n) { animation-delay: -1.7s; } .stars circle:nth-child(3n + 1) { animation-delay: -3.1s; animation-duration: 6s; } .stars circle:nth-child(4n) { animation-delay: -0.8s; animation-duration: 4.4s; } @keyframes twinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } /* a pause button for the scene (WCAG 2.2.2: anything that moves for more than five seconds can be stopped); the scene also rests while it is off screen */ .scene-toggle { position: absolute; z-index: 1; top: 0.75rem; right: var(--gutter); width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 0; border-radius: var(--r); background: rgb(36 34 31 / 0.6); color: var(--on-ink); box-shadow: inset 0 0 0 1.5px var(--on-ink-muted); cursor: pointer; transition: background 200ms ease, color 200ms ease; } .scene-toggle:hover { background: var(--on-ink); color: var(--ink); } .scene-toggle:focus-visible { outline-color: var(--flame); } .scene-toggle .icon { width: 1rem; height: 1rem; } .scene-toggle .i-play, .foot-scene.is-paused .scene-toggle .i-pause { display: none; } .foot-scene.is-paused .scene-toggle .i-play { display: block; } .foot-scene.is-paused *, .foot-scene.is-off * { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { .scene-toggle { display: none; } } .howl-wolf { animation: howl-wolf 18s linear infinite; } .pose-level { opacity: 0; animation: pose-level 18s linear infinite; } .pose-howl { animation: pose-howl 18s linear infinite; } .moon-glow { transform-box: fill-box; transform-origin: center; animation: moon-glow 18s ease-in-out infinite; } .leg-up, .leg-lo { fill: none; stroke: var(--leg, #F4F2EE); stroke-linecap: round; stroke-linejoin: round; } /* V30: every wolf has an eye. Round, with a small glint, so it reads friendly, like a dog's. Each scene sets the colours and the size through custom properties, which reach into : dark eye with a pale glint on the pale footer wolf (the default), a plain pale eye, a little larger, on the small dark wolves in the hero and on the ridge. */ .wolf-eye { fill: var(--eye, #24221F); transform: scale(var(--eye-scale, 1)); } .wolf-glint { fill: var(--eye-glint, #F4F2EE); opacity: var(--glint, 1); } .leg-up { stroke-width: 11; } .leg-lo { stroke-width: 7; } .leg-far { opacity: 0.8; } .run-wolf { opacity: 0; animation: run-wolf 18s linear infinite; } .gait-1 { animation: gait-1 0.5s steps(1) infinite; } .gait-2 { animation: gait-2 0.5s steps(1) infinite; } .gait-3 { animation: gait-3 0.5s steps(1) infinite; } .gait-4 { animation: gait-4 0.5s steps(1) infinite; } .run-body { animation: bound 0.5s ease-in-out infinite; } @keyframes bound { 0% { transform: translateY(-7px); } 25% { transform: translateY(-2px); } 50% { transform: translateY(0); } 75% { transform: translateY(-3px); } 100% { transform: translateY(-7px); } } @keyframes gait-1 { 0%, 24% { opacity: 1; } 25%, 100% { opacity: 0; } } @keyframes gait-2 { 0%, 24% { opacity: 0; } 25%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes gait-3 { 0%, 49% { opacity: 0; } 50%, 74% { opacity: 1; } 75%, 100% { opacity: 0; } } @keyframes gait-4 { 0%, 74% { opacity: 0; } 75%, 100% { opacity: 1; } } @keyframes moon-glow { 0%, 10% { transform: scale(1); } 16%, 26% { transform: scale(1.4); } 32%, 100% { transform: scale(1); } } @keyframes howl-wolf { 0% { opacity: 0; } 3%, 36% { opacity: 1; } 39%, 100% { opacity: 0; } } /* the howl: the level head fades into the raised one and back (a quick cross-fade reads as the head lifting) */ @keyframes pose-level { 0%, 11% { opacity: 1; } 12.5%, 28% { opacity: 0; } 29.5%, 100% { opacity: 1; } } @keyframes pose-howl { 0%, 11% { opacity: 0; } 12.5%, 28% { opacity: 1; } 29.5%, 100% { opacity: 0; } } @keyframes run-wolf { 0%, 39% { opacity: 0; transform: translate(480px, 0); } 40% { opacity: 1; } 82% { opacity: 1; transform: translate(1500px, 0); } 83%, 100% { opacity: 0; transform: translate(1500px, 0); } } .foot-grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem var(--s5); padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem); } .foot-about { grid-column: 1 / span 6; display: grid; gap: 1.25rem; justify-items: start; align-content: start; } .foot-brand { display: inline-block; } .foot-brand img { height: 3rem; width: auto; } .foot-motto { font-family: var(--display); font-weight: 600; font-size: clamp(2.25rem, 1.3rem + 3.2vw, 4.25rem); line-height: 0.98; letter-spacing: -0.04em; margin-top: 0.5rem; max-width: 10ch; } .foot-motto em { font-style: normal; color: var(--flame); } .foot-tag { max-width: 34ch; color: var(--on-ink-muted); text-wrap: balance; } .foot-col { grid-column: 8 / span 2; position: relative; } .foot-reach { grid-column: 10 / -1; } .foot-h { font-family: var(--text); font-size: var(--t-small); font-weight: 650; color: var(--on-ink-muted); margin-bottom: 0.9rem; letter-spacing: 0; } .foot-menu li + li, .reach li + li { margin-top: 0.6rem; } .foot-menu a, .reach a { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; font-weight: 500; color: var(--on-ink); } .foot-menu a::after, .reach a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--flame); transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--ease-out); } .foot-menu a:hover::after, .reach a:hover::after { transform: scaleX(1); } .site-footer .muted { color: var(--on-ink); max-width: 26ch; } .site-footer .muted a { color: var(--on-ink); text-decoration-color: var(--flame); text-decoration-thickness: 2px; text-underline-offset: 0.2em; } .foot-legal { position: relative; padding-block: 1.25rem; font-size: var(--t-small); color: var(--on-ink-muted); display: flex; gap: 1rem 2rem; flex-wrap: wrap; justify-content: space-between; align-items: center; } .foot-legal::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--ink-3); } .foot-copy { display: inline-flex; align-items: center; gap: 0.6rem; max-width: none; } .foot-safe { display: inline-flex; align-items: center; gap: 0.5rem; max-width: none; color: var(--on-ink-muted); } .foot-safe .icon { width: 1.05em; height: 1.05em; color: var(--on-ink-muted); } .foot-safe a { color: var(--on-ink); text-decoration-color: var(--flame); text-decoration-thickness: 2px; text-underline-offset: 0.2em; } .foot-copy img { width: 1.25rem; height: 1.25rem; } .to-top { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--on-ink); font-weight: 500; text-decoration: none; } .to-top-ic { width: 2.5rem; height: 2.5rem; border-radius: var(--r); display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--on-ink-muted); transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease; } .to-top-ic .icon { width: 1.05rem; height: 1.05rem; } .to-top:hover .to-top-ic { background: var(--on-ink); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--on-ink); } @media (max-width: 63.99em) { .foot-about { grid-column: 1 / -1; } .foot-col, .foot-reach { grid-column: span 6; } } @media (max-width: 47.99em) { .foot-grid { gap: 2.25rem var(--s5); } .foot-col, .foot-reach { grid-column: 1 / -1; } } /* Legal pass (Nov 9 2026): lists and the warning line on Privacy and Terms, and the consent box on the Start form */ .prose ul { display: grid; gap: 0.5rem; margin: 0.25rem 0 1rem; padding-left: 1.25rem; list-style: disc; max-width: 62ch; font-size: var(--t-lead); line-height: 1.5; } .prose ul li::marker { color: var(--accent); } .prose p + p { margin-top: 0.85rem; } .prose strong { font-weight: 650; } .pv-warn { padding: 1rem 1.25rem; background: var(--note-bg); color: var(--note-ink); border-left: 4px solid var(--accent); border-radius: var(--r); } .pv-warn strong { color: var(--ink); } .consent { margin-top: var(--s2); } .consent-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start; font-weight: 500; line-height: 1.45; cursor: pointer; } .consent-check input { width: 1.5rem; height: 1.5rem; margin: 0.08rem 0 0; accent-color: var(--ink); cursor: pointer; } .consent-check input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .consent-check input[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; } .consent-check a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; } /* ------------------------------------------------------------------ Motion: a gentle rise on the way in, a short stagger in groups */ @media (prefers-reduced-motion: no-preference) { .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: var(--rd, 0ms); } .js [data-reveal].is-in { opacity: 1; transform: none; } .js main { animation: fade-in 600ms ease both; } .js .hero-h1 .w { display: inline-block; animation: rise 900ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); } .js .hero-text > * { animation: rise 900ms var(--ease-out) both; } .js .hero-text > :nth-child(1) { animation-delay: 120ms; } .js .hero-text > :nth-child(2) { animation-delay: 220ms; } .js .hero-text > :nth-child(3) { animation-delay: 340ms; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes type { from { max-width: 0; } to { max-width: 16ch; } } @keyframes caret { 50% { border-color: transparent; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .site-header.is-hidden { transform: none; } .phase::before, .phase::after { transform: none; } *, *::before, *::after { transition: none !important; animation: none !important; } } @media print { .site-header, .site-footer, .draft-banner, .close-wrap, .car-nav, .car-dots, body::after { display: none; } body { background: #fff; } } /* V27 (final audit): the form's grids never grow wider than the screen, even with enlarged letter and word spacing (WCAG 1.4.12) */ .intake, .qs, .q { grid-template-columns: minmax(0, 1fr); } /* V35: Google Business Profile. The "Review us on Google" button (outline stars: an invitation, never a rating; plain text, no Google logo), the Reviews page band that holds it, and the small "See us on Google" link. All of it is left off the pages until the links are set. */ .g-review { display: inline-flex; align-items: center; gap: 0.95rem; padding: 0.85rem 1.1rem 0.85rem 1.15rem; background: var(--white); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 0.9rem; text-decoration: none; box-shadow: 0 1px 0 var(--ink), 0 14px 28px -20px rgb(36 34 31 / 0.6); transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); } .g-review:hover { transform: translateY(-2px); box-shadow: 0 3px 0 var(--ink), 0 18px 30px -18px rgb(36 34 31 / 0.6); } .g-review:active { transform: translateY(0); box-shadow: 0 1px 0 var(--ink); } .g-review-stars { display: inline-flex; gap: 0.12rem; color: var(--accent); } .g-review-stars .icon { width: 1.15rem; height: 1.15rem; transition: fill 160ms ease; } .g-review:hover .g-review-stars .icon, .g-review:focus-visible .g-review-stars .icon { fill: currentColor; } .g-review-stars .icon:nth-child(2) { transition-delay: 50ms; } .g-review-stars .icon:nth-child(3) { transition-delay: 100ms; } .g-review-stars .icon:nth-child(4) { transition-delay: 150ms; } .g-review-stars .icon:nth-child(5) { transition-delay: 200ms; } .g-review-t { display: grid; line-height: 1.2; padding-left: 0.95rem; border-left: 1px solid var(--line); } .g-review-t small { font-size: 0.8125rem; color: var(--muted); font-weight: 500; } .g-review-t strong { font-family: var(--display); font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em; } .g-review-go { width: 1.1rem; height: 1.1rem; color: var(--accent); } @media (max-width: 29.99em) { .g-review { flex-wrap: wrap; row-gap: 0.6rem; } .g-review-t { padding-left: 0; border-left: 0; } } @media (prefers-reduced-motion: reduce) { .g-review, .g-review-stars .icon { transition: none; } .g-review:hover { transform: none; } } .g-band { background: var(--stone); } .g-band-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s5); align-items: center; } .g-band-text { grid-column: 1 / span 6; display: grid; gap: var(--s3); } .g-band-text p { max-width: 42ch; } .g-band-act { grid-column: 8 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); } @media (max-width: 63.99em) { .g-band-text, .g-band-act { grid-column: 1 / -1; } } .g-profile { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.25em; } .g-profile .icon, .reach .icon { width: 1rem; height: 1rem; color: var(--accent); } .site-footer .reach .icon { color: var(--flame); } /* V41: the Google G mark on the button and beside "See us on Google" (the same mark the TVIS site uses next to Facebook) */ .g-mark { width: 2.25rem; height: 2.25rem; flex: none; } .g-review-t { gap: 0.2rem; } .g-review-stars .icon { width: 0.95rem; height: 0.95rem; } .g-profile .g-mark, .reach .g-mark { width: 1.25rem; height: 1.25rem; } @media (max-width: 29.99em) { .g-review { flex-wrap: nowrap; } .g-review-t { padding-left: 0.8rem; border-left: 1px solid var(--line); } }