/* platesmith.app, the 2026 redesign (the Adminroo house style, in Platesmith's own clothes). The website's pages only; /demo/ adds demo.css on top. Still no JavaScript and nothing inline, so the strict CSP works as-is: every animation here is CSS. Load-in animations always run; scroll-driven ones only where the browser has animation-timeline (Chrome, Edge, Safari 26), and everything is still with reduced motion. Fonts are ours, from /assets/fonts: Big Shoulders Display for headlines (gym-wall lettering), Archivo for reading and JetBrains Mono for labels and figures. Concrete greys, one green, and the pixel plate as the mark. Colours come from Bolt, the Zappy Studios design system: bolt.css is synced from zappystudios design/ (never edit it here), and design/bolt/lint.mjs fails the site check on a Bolt colour typed by hand. */ @import url("/assets/bolt.css"); @font-face { font-family: "Big Shoulders Display"; src: url("/assets/fonts/big-shoulders-display-800.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; } /* ---------- Tokens ---------- */ :root { color-scheme: light; --show-light: block; --show-dark: none; --paper: var(--bolt-shop-light-paper); --paper-2: var(--bolt-shop-light-paper-2); --card: var(--bolt-shop-light-card); --text: var(--bolt-shop-light-text); --muted: var(--bolt-shop-light-muted); --faint: var(--bolt-shop-light-faint); --rule: var(--bolt-shop-light-rule); --rule-2: var(--bolt-shop-light-rule-2); --accent: var(--bolt-platesmith-light-accent); --accent-hover: var(--bolt-platesmith-light-accent-hover); --on-accent: var(--bolt-platesmith-light-on-accent); --accent-text: var(--bolt-platesmith-light-accent-text); --accent-wash: var(--bolt-platesmith-light-accent-wash); --pr: var(--bolt-platesmith-light-pr); --frame: var(--bolt-shop-light-frame); --shadow: var(--bolt-shop-light-shadow); --shadow-button: var(--bolt-shop-light-shadow-button); --shadow-lg: var(--bolt-shop-light-shadow-lg); --grain: var(--bolt-shop-light-grain); --wrap: 1240px; --gutter: clamp(20px, 4vw, 48px); --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Apple SD Gothic Neo", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif; --tight: var(--sans); --display: "Big Shoulders Display", "Archivo", "Arial Narrow", "Hiragino Sans", "Apple SD Gothic Neo", "PingFang SC", sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* Dark follows the system; the header switch (#theme, a checkbox read with :has()) flips it for the page view. Written twice because a selector can't sit inside and outside a media query at once. The .ink bands are dark in both themes and take the same values. */ @media (prefers-color-scheme: dark) { :root:not(:has(#theme:checked)) { color-scheme: dark; --show-light: none; --show-dark: block; --paper: var(--bolt-shop-dark-paper); --paper-2: var(--bolt-shop-dark-paper-2); --card: var(--bolt-shop-dark-card); --text: var(--bolt-shop-dark-text); --muted: var(--bolt-shop-dark-muted); --faint: var(--bolt-shop-dark-faint); --rule: var(--bolt-shop-dark-rule); --rule-2: var(--bolt-shop-dark-rule-2); --accent: var(--bolt-platesmith-dark-accent); --accent-hover: var(--bolt-platesmith-dark-accent-hover); --on-accent: var(--bolt-platesmith-dark-on-accent); --accent-text: var(--bolt-platesmith-dark-accent-text); --accent-wash: var(--bolt-platesmith-dark-accent-wash); --pr: var(--bolt-platesmith-dark-pr); --frame: var(--bolt-shop-dark-frame); --shadow: var(--bolt-shop-dark-shadow); --shadow-button: var(--bolt-shop-dark-shadow-button); --shadow-lg: var(--bolt-shop-dark-shadow-lg); --grain: var(--bolt-shop-dark-grain); } } @media not (prefers-color-scheme: dark) { :root:has(#theme:checked) { color-scheme: dark; --show-light: none; --show-dark: block; --paper: var(--bolt-shop-dark-paper); --paper-2: var(--bolt-shop-dark-paper-2); --card: var(--bolt-shop-dark-card); --text: var(--bolt-shop-dark-text); --muted: var(--bolt-shop-dark-muted); --faint: var(--bolt-shop-dark-faint); --rule: var(--bolt-shop-dark-rule); --rule-2: var(--bolt-shop-dark-rule-2); --accent: var(--bolt-platesmith-dark-accent); --accent-hover: var(--bolt-platesmith-dark-accent-hover); --on-accent: var(--bolt-platesmith-dark-on-accent); --accent-text: var(--bolt-platesmith-dark-accent-text); --accent-wash: var(--bolt-platesmith-dark-accent-wash); --pr: var(--bolt-platesmith-dark-pr); --frame: var(--bolt-shop-dark-frame); --shadow: var(--bolt-shop-dark-shadow); --shadow-button: var(--bolt-shop-dark-shadow-button); --shadow-lg: var(--bolt-shop-dark-shadow-lg); --grain: var(--bolt-shop-dark-grain); } } .ink { --paper: var(--bolt-ink-paper); --paper-2: var(--bolt-ink-paper-2); --card: var(--bolt-ink-card); --text: var(--bolt-ink-text); --muted: var(--bolt-ink-muted); --faint: var(--bolt-ink-faint); --rule: var(--bolt-ink-rule); --rule-2: var(--bolt-ink-rule-2); --accent: var(--bolt-platesmith-dark-accent); --accent-hover: var(--bolt-platesmith-dark-accent-hover); --on-accent: var(--bolt-platesmith-dark-on-accent); --accent-text: var(--bolt-platesmith-dark-accent-text); --accent-wash: var(--bolt-platesmith-dark-accent-wash); color-scheme: dark; background: var(--paper); color: var(--text); } /* ---------- Base ---------- */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; } body { margin: 0; background: var(--paper); color: var(--text); font: 400 17px/1.6 var(--sans); font-stretch: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } /* Film grain over everything: what keeps the flat colour from looking like a template. */ body::after { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; background: url("/assets/grain.webp") repeat; opacity: var(--grain); mix-blend-mode: overlay; } img, svg, picture { display: block; max-width: 100%; } a { color: inherit; } p a, li a, dd a, td a, .faq-list a { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } p a:hover, li a:hover, dd a:hover, td a:hover { text-decoration-thickness: 2px; } h1, h2, h3, h4 { margin: 0; font-weight: 400; } p { margin: 0; } ::selection { background: var(--accent); color: var(--on-accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); } .skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; } .skip:focus { top: 12px; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .l { display: var(--show-light); } .d { display: var(--show-dark); } /* Type */ .display, .page-head h1, .sec-title, .section-head h2, .cta-panel h2, .promise h2, .compare-wrap h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.005em; line-height: 0.9; text-wrap: balance; } .accent { color: var(--accent-text); } .ink .accent { color: var(--accent-text); } .label, .eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .label::before, .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; } .lede, .section-head > p, .page-head .lede { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.55; color: var(--muted); max-width: 56ch; text-wrap: pretty; } h3 { font: 600 21px/1.25 var(--tight); letter-spacing: -0.015em; } .num-tag { font: 500 12px/1 var(--mono); letter-spacing: 0.06em; color: var(--accent-text); } /* Buttons */ .btn, .button { --h: 52px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--h); padding: 0 24px; border-radius: 999px; border: 1px solid transparent; background: var(--accent); color: var(--on-accent); font: 600 16px/1 var(--tight); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.3s var(--ease); box-shadow: var(--shadow-button); } .btn:hover, .button:hover { background: var(--accent-hover); transform: translateY(-1px); } .btn:active, .button:active { transform: translateY(0); } .btn .arr { width: 16px; height: 16px; transition: transform 0.3s var(--ease); } .btn:hover .arr { transform: translateX(3px); } .btn.ghost, .button.ghost { background: transparent; color: var(--text); border-color: var(--rule-2); box-shadow: none; } .btn.ghost:hover, .button.ghost:hover { background: var(--accent-wash); border-color: var(--text); } .btn.sm, .button.small { --h: 40px; padding: 0 18px; font-size: 15px; } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } /* ---------- Header ---------- */ .hd { position: sticky; top: 0; z-index: 50; view-transition-name: hd; background: color-mix(in srgb, var(--paper) 82%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); border-bottom: 1px solid var(--rule); } .hd-in { display: flex; align-items: center; gap: 28px; height: 68px; } .brand { display: block; flex: none; text-decoration: none; } .brand .logo { width: auto; height: 32px; } .hd-nav { display: flex; gap: 4px; margin-right: auto; } .hd-nav a, .hd-link { padding: 8px 12px; border-radius: 999px; font: 500 15px/1 var(--tight); color: var(--muted); text-decoration: none; transition: color 0.2s, background-color 0.2s; } .hd-nav a:hover, .hd-link:hover { color: var(--text); background: var(--accent-wash); } .hd-nav a[aria-current="page"] { color: var(--text); } .hd-act { display: flex; align-items: center; gap: 8px; } .theme-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .theme-toggle { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule-2); color: var(--muted); cursor: pointer; transition: color 0.2s, border-color 0.2s, transform 0.4s var(--ease); } .theme-toggle:hover { color: var(--text); border-color: var(--text); transform: rotate(-18deg); } .theme-input:focus-visible + .theme-toggle { outline: 2px solid var(--accent); outline-offset: 3px; } .theme-toggle svg { width: 18px; height: 18px; grid-area: 1 / 1; } .theme-toggle .to-dark, .theme-toggle .to-light { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .theme-toggle .moon, .theme-toggle .to-dark { display: var(--show-light); } .theme-toggle .sun, .theme-toggle .to-light { display: var(--show-dark); } .menu { display: none; position: relative; } .menu summary { list-style: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule-2); cursor: pointer; } .menu summary::-webkit-details-marker { display: none; } .menu summary svg { width: 18px; height: 18px; } .menu nav { position: absolute; right: 0; top: 50px; width: min(280px, calc(100vw - 32px)); padding: 8px; display: grid; background: var(--card); border: 1px solid var(--rule); border-radius: 18px; box-shadow: var(--shadow-lg); } .menu nav a { padding: 12px 14px; border-radius: 12px; font: 500 16px/1.2 var(--tight); text-decoration: none; } .menu nav a:hover { background: var(--accent-wash); } .menu[open] nav { animation: pop 0.25s var(--ease-out); } @keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } } @media (max-width: 900px) { .hd-nav, .hd-link { display: none; } .menu { display: block; } .hd-in { justify-content: space-between; gap: 12px; } .hd-act { margin-left: auto; } } @media (max-width: 420px) { .brand .logo { height: 26px; } .hd-act .btn { padding: 0 14px; } } /* Reading progress along the bottom of the header, scroll-driven where supported. */ .progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); } @supports (animation-timeline: scroll()) { .progress { animation: grow linear both; animation-timeline: scroll(root); } } @keyframes grow { to { transform: scaleX(1); } } /* ---------- Motion primitives ---------- */ /* Lines that rise out of a mask on load. */ .rise { display: block; overflow: hidden; padding-bottom: 0.04em; margin-bottom: -0.04em; } .rise > span { display: block; animation: rise 1.1s var(--ease-out) both; } .rise:nth-child(2) > span { animation-delay: 0.08s; } .rise:nth-child(3) > span { animation-delay: 0.16s; } @keyframes rise { from { transform: translateY(105%); } } .fade-in { animation: fadeUp 1s var(--ease-out) both; animation-delay: var(--d, 0.3s); } /* Reveals clip rather than fade, so text keeps its full contrast at every frame (and accessibility scans that land mid-animation still see the real colours). */ @keyframes fadeUp { from { clip-path: inset(0 0 100% 0); transform: translateY(18px); } to { clip-path: inset(0 0 -20% 0); } } /* Scroll reveals. Without animation-timeline they are simply there. */ @supports (animation-timeline: view()) { .rv { animation: fadeUp linear both; animation-timeline: view(); animation-range: entry 5% cover 28%; } .rv-stagger > * { animation: fadeUp linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; } } /* ---------- Home: hero ---------- */ .hero { position: relative; padding: clamp(40px, 7vw, 96px) 0 0; overflow: clip; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(24px, 4vw, 64px); align-items: center; } .hero h1 { font-size: clamp(64px, 10.6vw, 164px); line-height: 0.98; margin: 22px 0 28px; } .hero h1 .accent { color: var(--accent-text); } .hero .sub { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--muted); max-width: 44ch; margin-bottom: 32px; text-wrap: pretty; } .hero .sub b { color: var(--text); font-weight: 600; } .ticks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 24px 0 0; padding: 0; list-style: none; font: 500 13px/1.3 var(--mono); letter-spacing: 0.02em; color: var(--muted); } .ticks li { display: inline-flex; align-items: center; gap: 8px; } .ticks svg { width: 14px; height: 14px; color: var(--accent); } .stage { position: relative; display: grid; place-items: center; min-height: 600px; } .stage .halo { position: absolute; width: 520px; max-width: 120%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--rule); animation: fadeIn 2s var(--ease) both 0.4s; } .stage .halo.h2 { width: 760px; opacity: 0.6; } @keyframes fadeIn { from { opacity: 0; } } .phone { position: relative; width: min(300px, 70vw); border-radius: 52px; padding: 10px; background: linear-gradient(150deg, #3c4140 0%, #0d0f0f 38%, #262a29 100%); box-shadow: var(--shadow-lg), inset 0 0 0 1.5px rgba(255, 255, 255, 0.09), inset 0 0 0 4px #0b0c0c; } .phone .screen { position: relative; border-radius: 42px; overflow: hidden; background: #000; aspect-ratio: 360 / 782; } .phone .screen img { width: 100%; height: 100%; object-fit: cover; } /* The phone lands upright and unscaled, so the screenshot is rasterised 1:1 (a rotated or scaled bitmap looks soft). */ .stage .phone { animation: phoneIn 1.4s var(--ease-out) both 0.15s; } @keyframes phoneIn { from { opacity: 0; transform: translateY(60px); } to { transform: none; } } /* Little notices floating off the phone, like the app's own. */ .toast { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 18px; background: color-mix(in srgb, var(--card) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--rule); box-shadow: var(--shadow-lg); font: 500 14px/1.3 var(--tight); color: var(--text); animation: toastIn 0.9s var(--ease-out) both; white-space: nowrap; } .toast small { display: block; font: 500 11px/1.3 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .toast .dot { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--accent); color: var(--on-accent); flex: none; } .toast .dot svg { width: 18px; height: 18px; } .toast .dot.ok { background: #2f6b3f; color: #fff; } /* Anchored to the phone, not the stage, so they sit on its edges at every width. */ .phone-wrap { position: relative; } .toast.t1 { left: -44%; top: 3.5%; animation-delay: 1.1s; } .toast.t2 { right: -40%; bottom: 23%; animation-delay: 1.6s; } @keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(0.94); } } /* Strip under the hero: facts in mono, between hairlines. */ .facts { margin-top: clamp(48px, 7vw, 96px); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .facts ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } @media (min-width: 961px) { .facts ul:has(> li:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .facts li { padding: 26px 24px 24px 0; border-right: 1px solid var(--rule); } .facts li + li { padding-left: 24px; } .facts li:last-child { border-right: 0; } .facts b { display: block; font: 800 clamp(34px, 3.6vw, 48px)/1 var(--display); letter-spacing: 0.01em; margin-bottom: 8px; } .facts span { font-size: 14px; color: var(--muted); line-height: 1.4; } .sent-count { padding: 14px 0; border-top: 1px solid var(--rule); font: 500 13px/1 var(--mono); letter-spacing: 0.04em; color: var(--muted); } .sent-count[hidden] { display: none; } .sent-count .num { color: var(--accent-text); } @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } .stage { min-height: 0; padding: 24px 0 8px; } .toast.t1 { left: -6%; top: 1.5%; } .toast.t2 { right: -6%; bottom: 3%; } .facts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts li:nth-child(2) { border-right: 0; } .facts li:nth-child(3) { padding-left: 0; } .facts li:nth-child(n+3) { border-top: 1px solid var(--rule); } } @media (max-width: 520px) { .toast { font-size: 13px; padding: 9px 12px 9px 9px; } .toast .dot { width: 30px; height: 30px; } } /* ---------- Sections ---------- */ .sec { padding: clamp(88px, 12vw, 168px) 0; position: relative; } .sec.tight { padding-top: clamp(56px, 7vw, 96px); } .sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(48px, 6vw, 88px); } .sec-head .label { grid-column: 1 / -1; } .sec-title { font-size: clamp(48px, 7vw, 104px); } .sec-head .lede { justify-self: end; } .sec-title + .lede, .sec-title + .lede.rv { margin-top: 24px; } .sec-head .sec-title + .lede { margin-top: 0; } .sec-head.stack { grid-template-columns: 1fr; } .sec-head.stack .lede { justify-self: start; } @media (max-width: 860px) { .sec-head { grid-template-columns: 1fr; } .sec-head .lede { justify-self: start; } } /* The four steps, with the phone held still while the chapters scroll past. */ .story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); timeline-scope: --c1, --c2, --c3, --c4; } .chapters { margin: 0; padding: 0; list-style: none; } .chapter { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; border-top: 1px solid var(--rule); } .chapter:first-child { border-top: 0; } .chapter:nth-child(1) { view-timeline: --c1 block; } .chapter:nth-child(2) { view-timeline: --c2 block; } .chapter:nth-child(3) { view-timeline: --c3 block; } .chapter:nth-child(4) { view-timeline: --c4 block; } .chapter .step-no { font: 800 clamp(88px, 10vw, 148px)/0.85 var(--display); color: transparent; -webkit-text-stroke: 1.5px var(--rule-2); margin-bottom: 24px; } .chapter h3 { font: 800 clamp(34px, 3.6vw, 52px)/0.98 var(--display); text-transform: uppercase; letter-spacing: 0.005em; margin-bottom: 18px; } .chapter p { color: var(--muted); font-size: 18px; max-width: 42ch; } .chapter ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; } .chapter li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; color: var(--text); } .chapter li::before { content: ""; flex: none; width: 14px; height: 1px; background: var(--accent); transform: translateY(-4px); } .pin { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; } .pin .phone { width: min(320px, 30vw); } .pin .screen img { position: absolute; inset: 0; } .pin .frame-no { position: absolute; bottom: 9vh; left: 50%; transform: translateX(-50%); font: 500 12px/1 var(--mono); letter-spacing: 0.08em; color: var(--muted); } .pin .halo { position: absolute; width: 520px; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--rule); } .pin .halo.h2 { width: 720px; opacity: 0.6; } .pin .s2, .pin .s3, .pin .s4 { opacity: 0; } @supports (animation-timeline: view()) { .pin .s1 { animation: shotOut linear both; animation-timeline: --c1; animation-range: exit 20% exit 45%; } .pin .s2 { animation: shotInOut linear both; animation-timeline: --c2; } .pin .s3 { animation: shotInOut linear both; animation-timeline: --c3; } .pin .s4 { animation: shotIn linear both; animation-timeline: --c4; animation-range: entry 55% entry 80%; } .chapter .step-no { animation: strokeFill linear both; animation-range: entry 40% cover 50%; } .chapter:nth-child(1) .step-no { animation-timeline: --c1; } .chapter:nth-child(2) .step-no { animation-timeline: --c2; } .chapter:nth-child(3) .step-no { animation-timeline: --c3; } .chapter:nth-child(4) .step-no { animation-timeline: --c4; } .pin .phone { animation: phoneTilt linear both; animation-timeline: --c1, --c4; } } @keyframes shotOut { to { opacity: 0; } } @keyframes shotIn { from { opacity: 0; } to { opacity: 1; } } @keyframes shotInOut { 0%, 22% { opacity: 0; } 34%, 66% { opacity: 1; } 78%, 100% { opacity: 0; } } @keyframes strokeFill { to { color: var(--accent); -webkit-text-stroke-color: transparent; } } @keyframes phoneTilt { from { transform: translateY(30px); } to { transform: none; } } /* Where the phone can't follow the scroll (phones, reduced motion, browsers without scroll-driven animations), the four steps become four tabs over one phone: radio buttons read with :has(), so no script. */ .how-tabs { display: none; gap: 4px; padding: 4px; border: 1px solid var(--rule-2); border-radius: 999px; background: var(--card); } .how-tabs input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .how-tabs label { flex: 1; display: grid; place-items: center; min-height: 44px; padding: 0 8px; border-radius: 999px; font: 600 15px/1 var(--tight); font-stretch: 92%; color: var(--muted); cursor: pointer; transition: background-color 0.2s, color 0.2s; } .how-tabs label:hover { color: var(--text); } .how-tabs input:checked + label { background: var(--accent); color: var(--on-accent); } .how-tabs input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; } @media (max-width: 860px), (prefers-reduced-motion: reduce) { .story { grid-template-columns: 1fr; gap: 0; } .how-tabs { display: flex; } .chapter { display: none; min-height: 0; padding: 28px 0 0; border-top: 0; } .story:has(#how1:checked) .chapter:nth-child(1), .story:has(#how2:checked) .chapter:nth-child(2), .story:has(#how3:checked) .chapter:nth-child(3), .story:has(#how4:checked) .chapter:nth-child(4) { display: flex; } .chapter .step-no { font-size: 72px; margin-bottom: 16px; } .story .pin { position: relative; top: auto; height: auto; padding: 40px 0 8px; overflow: clip; } .story .pin .phone { width: min(260px, 66vw); animation: none; } .story .pin .halo { width: 320px; } .story .pin .halo.h2 { width: 440px; } .story .pin img { animation: none; opacity: 0 !important; transition: opacity 0.3s var(--ease); } .story:has(#how1:checked) .pin .s1, .story:has(#how2:checked) .pin .s2, .story:has(#how3:checked) .pin .s3, .story:has(#how4:checked) .pin .s4 { opacity: 1 !important; } } @supports not (animation-timeline: view()) { .story { grid-template-columns: 1fr; gap: 0; } .how-tabs { display: flex; } .chapter { display: none; min-height: 0; padding: 28px 0 0; border-top: 0; } .story:has(#how1:checked) .chapter:nth-child(1), .story:has(#how2:checked) .chapter:nth-child(2), .story:has(#how3:checked) .chapter:nth-child(3), .story:has(#how4:checked) .chapter:nth-child(4) { display: flex; } .chapter .step-no { font-size: 72px; margin-bottom: 16px; } .story .pin { position: relative; top: auto; height: auto; padding: 40px 0 8px; overflow: clip; } .story .pin .phone { width: min(260px, 66vw); animation: none; } .story .pin .halo { width: 320px; } .story .pin .halo.h2 { width: 440px; } .story .pin img { animation: none; opacity: 0 !important; transition: opacity 0.3s var(--ease); } .story:has(#how1:checked) .pin .s1, .story:has(#how2:checked) .pin .s2, .story:has(#how3:checked) .pin .s3, .story:has(#how4:checked) .pin .s4 { opacity: 1 !important; } @media (min-width: 861px) { .story { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 64px; align-items: center; } .how-tabs { grid-column: 1 / -1; max-width: 560px; } .story .pin { grid-column: 2; grid-row: 2; padding-top: 32px; } .story .pin .phone { width: 100%; } } } /* ---------- The invoice on paper ---------- */ .paper-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 112px); align-items: center; } .inv-stage { position: relative; perspective: 1400px; padding: 24px 0; } #logbook { overflow: clip; } .inv { position: relative; background: #fffdf8; color: var(--bolt-shop-light-text); border-radius: 6px; padding: clamp(24px, 3vw, 40px); box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 2px 6px rgba(27,31,30,0.06), 0 40px 80px -30px rgba(20,26,24,0.4); transform: rotate(-1.6deg); font: 400 13px/1.5 var(--sans); } .inv::before { content: ""; position: absolute; inset: 10px -10px -10px 10px; z-index: -1; background: #f3ede2; border-radius: 6px; transform: rotate(3deg); box-shadow: var(--shadow); } .inv-top { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 2px solid var(--bolt-shop-light-text); margin-bottom: 18px; } .inv-top b { display: block; font: 600 18px/1.2 var(--tight); letter-spacing: -0.01em; } .inv-top span, .inv-meta span { color: #545a57; display: block; font-size: 12px; } .inv-top .t { text-align: right; font: 800 28px/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; } .inv-top .t span { font: 500 11px/1.6 var(--mono); letter-spacing: 0.04em; margin-top: 6px; } .inv-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; } .inv-meta b { font-weight: 600; font-size: 13px; } .inv table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .inv th { text-align: left; font: 500 10.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: #545a57; padding: 0 0 8px; border-bottom: 1px solid rgba(27,31,30,0.14); } .inv td { padding: 10px 0; border-bottom: 1px solid rgba(27,31,30,0.08); vertical-align: top; } .inv td:last-child, .inv th:last-child { text-align: right; } .inv td small { display: block; color: #656b68; font-size: 11.5px; } .inv .tot { margin-top: 14px; margin-left: auto; width: min(240px, 100%); display: grid; gap: 6px; font-variant-numeric: tabular-nums; } .inv .tot div { display: flex; justify-content: space-between; } .inv .tot .grand { padding-top: 10px; border-top: 2px solid var(--bolt-shop-light-text); font: 600 17px/1.2 var(--tight); } .inv .pay { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; height: 42px; border-radius: 999px; background: #1e8539; color: #fff; font: 600 14px/1 var(--tight); } .stamp { position: absolute; right: 7%; bottom: 23%; padding: 8px 18px 4px; border: 4px solid #2f6b3f; border-radius: 10px; color: #2f6b3f; font: 800 44px/1 var(--display); letter-spacing: 0.08em; transform: rotate(-14deg); mix-blend-mode: multiply; opacity: 0.88; } .stamp small { display: block; font: 500 10px/1.4 var(--mono); letter-spacing: 0.06em; text-align: center; } @supports (animation-timeline: view()) { .inv { animation: docIn linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; } .stamp { animation: stamp linear both; animation-timeline: view(); animation-range: cover 42% cover 52%; } } @keyframes docIn { from { transform: rotateX(18deg) rotate(2deg) translateY(80px); opacity: 0.2; } to { transform: rotate(-1.6deg); } } @keyframes stamp { from { opacity: 0; transform: rotate(-14deg) scale(2.2); } 70% { opacity: 0.9; transform: rotate(-14deg) scale(0.94); } to { opacity: 0.88; transform: rotate(-14deg) scale(1); } } .paper-points { margin: 36px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); } .paper-points li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 20px 0; border-bottom: 1px solid var(--rule); } .paper-points b { display: block; font: 600 17px/1.3 var(--tight); margin-bottom: 4px; } .paper-points p { color: var(--muted); font-size: 15.5px; } @media (max-width: 900px) { .paper-sec { grid-template-columns: 1fr; } .inv-stage { order: 2; } } @media (max-width: 520px) { .stamp { font-size: 32px; right: 4%; } .inv-top .t { font-size: 22px; } } /* ---------- The feature index ---------- */ /* The feature index: three groups with real headings (Bolt: no category tag on every item) */ .groups { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: clamp(32px, 5vw, 72px); border-top: 1px solid var(--rule-2); padding-top: 32px; } .group h3 { font: 800 clamp(34px, 3.6vw, 48px)/1 var(--display); text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 20px; } .group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; } .group h4 { font: 600 19px/1.25 var(--tight); letter-spacing: -0.01em; margin: 0 0 6px; } .group p { margin: 0; color: var(--muted); font-size: 15.5px; max-width: 42ch; } .index-foot { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; margin-top: 40px; } @media (max-width: 860px) { .groups { grid-template-columns: 1fr; } } /* ---------- The office, in a browser ---------- */ .office { perspective: 1800px; } .browser { border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--rule); box-shadow: var(--shadow-lg); transform-origin: 50% 0; } .browser-bar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--rule); background: var(--paper-2); } .browser-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--rule-2); } .browser-bar span { margin: 0 auto; padding: 5px 40px; border-radius: 8px; background: var(--paper); font: 500 12px/1 var(--mono); color: var(--muted); } .browser img { width: 100%; height: auto; } @supports (animation-timeline: view()) { .browser { animation: tiltIn linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; } } @keyframes tiltIn { from { transform: rotateX(22deg) scale(0.9); } to { transform: none; } } .office-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px; } .office-notes div { padding-top: 18px; border-top: 1px solid var(--rule-2); } .office-notes b { display: block; font: 600 17px/1.3 var(--tight); margin-bottom: 6px; } .office-notes p { color: var(--muted); font-size: 15.5px; } @media (max-width: 760px) { .office-notes { grid-template-columns: 1fr; gap: 20px; } } /* ---------- Made here (ink band) ---------- */ .made { overflow: clip; padding-bottom: 0; } #switch { padding-bottom: clamp(48px, 6vw, 80px); } .made-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; } .made .roo { width: min(560px, 100%); margin-top: 48px; } @supports (animation-timeline: view()) { .made .roo { animation: hop linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; } } @keyframes hop { from { transform: translateX(-12%) translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } } .made-list { margin: 0; padding: 0; list-style: none; } .made-list li { padding: 26px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; } .made-list li:first-child { border-top: 1px solid var(--rule); } .made-list .num-tag { padding-top: 6px; } .made-list h3 { font-size: 20px; margin-bottom: 4px; } .made-list p { grid-column: 2; color: var(--muted); font-size: 15.5px; } @media (max-width: 860px) { .made-grid { grid-template-columns: 1fr; } } /* The trades, sliding past. Two copies so the loop has no seam; the second is hidden from screen readers. */ /* "Made for": a still row of links (Bolt: no marquee) */ .for-you { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: clamp(64px, 9vw, 120px); padding: 22px 0; } .for-you .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; } .for-you p { margin: 0; color: var(--muted); font-size: 16px; } .for-you ul { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 0; list-style: none; } .for-you a { font: 600 clamp(20px, 2vw, 26px)/1.2 var(--tight); color: var(--text); text-decoration: none; } .for-you a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 4px; } /* ---------- Switching ---------- */ .switch-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 80px); align-items: center; } /* One container deep (Bolt): the section is not a card, the product mock is the one surface */ .switch-card .sec-title { font-size: clamp(44px, 5.4vw, 80px); margin: 0 0 22px; } .switch-card p { color: var(--muted); max-width: 52ch; } .switch-card .cta-row { margin-top: 28px; } .import-mock { padding: 24px; border-radius: 20px; background: var(--paper); border: 1px solid var(--rule); font-variant-numeric: tabular-nums; } .import-mock .lbl { font: 500 12px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; } .import-mock ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; } .import-mock li { display: grid; grid-template-columns: 1fr auto; gap: 8px; font: 500 15px/1.2 var(--tight); } .import-mock li span { font: 500 13px/1.2 var(--mono); color: var(--ok); } .import-mock li.busy span { color: var(--muted); } .import-mock i { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--rule); overflow: hidden; position: relative; } .import-mock i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; animation: fill 1.6s var(--ease-out) both 0.2s; } .import-mock li.busy i::after { transform: scaleX(0.65); animation: fillPart 2.4s var(--ease-out) both 0.4s; } @keyframes fill { from { transform: scaleX(0); } } @keyframes fillPart { from { transform: scaleX(0); } to { transform: scaleX(0.65); } } @supports (animation-timeline: view()) { .import-mock i::after { animation-timeline: view(); animation-range: entry 20% cover 45%; animation-duration: auto; animation-timing-function: linear; animation-delay: 0s; } } @media (max-width: 860px) { .switch-card { grid-template-columns: 1fr; } } /* ---------- Pricing ---------- */ .plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1000px; } .plans { margin: 0 auto; } .plan { position: relative; display: flex; flex-direction: column; padding: clamp(28px, 3.4vw, 44px); border-radius: 28px; background: var(--card); border: 1px solid var(--rule); transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); } .plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .plan h3 { font: 800 40px/1 var(--display); text-transform: uppercase; letter-spacing: 0.01em; } .plan .for { color: var(--muted); margin: 10px 0 26px; font-size: 16px; } .plan .price { display: flex; align-items: baseline; gap: 10px; margin: 0; } .plan .price b { font: 800 clamp(72px, 7vw, 96px)/0.9 var(--display); letter-spacing: 0; } .plan .price span { font: 500 14px/1.2 var(--mono); color: var(--muted); } .plan .gst { font: 500 12.5px/1.5 var(--mono); letter-spacing: 0.01em; color: var(--muted); margin: 14px 0 26px; padding-bottom: 26px; border-bottom: 1px solid var(--rule); } .plan ul { margin: 0 0 32px; padding: 0; list-style: none; display: grid; gap: 12px; flex: 1; } .plan li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; } .plan li svg { width: 18px; height: 18px; flex: none; color: var(--accent); margin-top: 2px; } .plan .button, .plan .btn { width: 100%; } .plan.featured { background: var(--bolt-ink-paper); color: var(--bolt-ink-text); border-color: var(--bolt-ink-paper); --muted: var(--bolt-ink-muted); --rule: rgba(238, 241, 236, 0.14); --rule-2: rgba(238,241,236,0.3); --accent: var(--bolt-platesmith-dark-accent); --accent-hover: var(--bolt-platesmith-dark-accent-hover); --on-accent: var(--bolt-platesmith-dark-on-accent); --text: var(--bolt-ink-text); --accent-wash: var(--bolt-platesmith-dark-accent-wash); } .ink .plan.featured { background: var(--bolt-ink-card); border-color: rgba(238, 241, 236, 0.14); } @media (prefers-color-scheme: dark) { :root:not(:has(#theme:checked)) .plan.featured { background: var(--bolt-ink-card); border-color: rgba(238, 241, 236, 0.16); } } @media not (prefers-color-scheme: dark) { :root:has(#theme:checked) .plan.featured { background: var(--bolt-ink-card); border-color: rgba(238, 241, 236, 0.16); } } .badge { position: absolute; top: clamp(28px, 3.4vw, 44px); right: clamp(28px, 3.4vw, 44px); padding: 7px 12px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; } .plans-note { text-align: center; margin-top: 28px; color: var(--muted); font-size: 15px; } @media (max-width: 760px) { .plans { grid-template-columns: 1fr; } } /* The price promise: four plain promises in a row. */ .promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: clamp(56px, 7vw, 96px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-2); } .promises li { padding: 24px 24px 0 0; } .promises li + li { padding-left: 24px; border-left: 1px solid var(--rule); } .promises b { display: block; font: 600 17px/1.3 var(--tight); margin: 14px 0 6px; } .promises p { color: var(--muted); font-size: 15px; } @media (max-width: 900px) { .promises { grid-template-columns: 1fr 1fr; } .promises li:nth-child(3) { padding-left: 0; border-left: 0; } .promises li:nth-child(n+3) { padding-top: 28px; } } @media (max-width: 520px) { .promises { grid-template-columns: 1fr; } .promises li, .promises li + li { padding: 22px 0 0; border-left: 0; } } /* ---------- FAQ ---------- */ .faq-split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .faq-split .section-head, .faq-split .faq-head { position: sticky; top: 108px; } .faq-split .section-head h2, .faq-head .sec-title { font-size: clamp(48px, 6vw, 88px); margin-bottom: 20px; } .faq-split .section-head p { color: var(--muted); } .faq-list { border-top: 1px solid var(--rule-2); } .faq-list details { border-bottom: 1px solid var(--rule); } .faq-list summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; cursor: pointer; font: 600 clamp(17px, 1.5vw, 20px)/1.35 var(--tight); letter-spacing: -0.01em; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--text), var(--text)) center / 100% 1.5px no-repeat, linear-gradient(var(--text), var(--text)) center / 1.5px 100% no-repeat; transition: transform 0.4s var(--ease-out); } .faq-list details[open] summary::after { transform: rotate(45deg); } .faq-list summary:hover { color: var(--accent-text); } .faq-list details > div { padding: 0 48px 26px 0; color: var(--muted); } .faq-list details > div p + p { margin-top: 12px; } .faq-list details::details-content { transition: height 0.4s var(--ease-out), content-visibility 0.4s allow-discrete; height: 0; overflow: clip; } .faq-list details[open]::details-content { height: auto; } @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } } @media (max-width: 860px) { .faq-split { grid-template-columns: 1fr; } .faq-split .section-head, .faq-split .faq-head { position: static; } } /* ---------- Closing ---------- */ .closing { padding: clamp(88px, 12vw, 160px) 0; text-align: center; position: relative; overflow: clip; } .closing h2 { font-size: clamp(56px, 9vw, 140px); margin: 22px auto 26px; max-width: 12ch; } .closing p { color: var(--muted); max-width: 46ch; margin: 0 auto 34px; font-size: 18px; } .closing .cta-row { justify-content: center; } .store { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px; border-radius: 14px; border: 1px solid var(--rule-2); color: var(--text); } .store svg { width: 22px; height: 22px; } .store small { display: block; font: 500 10.5px/1.2 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); text-align: left; } .store b { display: block; font: 600 16px/1.1 var(--tight); text-align: left; } /* ---------- Footer ---------- */ .ft { padding: 72px 0 0; border-top: 1px solid var(--rule); overflow: clip; } .ft-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; } .ft-brand p { color: var(--muted); font-size: 15px; max-width: 34ch; margin-top: 18px; } .ft h4 { font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; } .ft ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .ft ul a { text-decoration: none; font-size: 15px; color: var(--text); } .ft ul a:hover { color: var(--accent-text); } .ft-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 56px; padding: 22px 0; border-top: 1px solid var(--rule); color: var(--faint); font-size: 13px; } .ft-legal p { max-width: 80ch; } .wordmark { display: flex; align-items: flex-end; justify-content: center; gap: 0.02em; margin: 40px 0 0; padding-bottom: 0.03em; font: 800 clamp(64px, 18.5vw, 280px)/0.86 var(--display); letter-spacing: -0.005em; color: var(--text); user-select: none; } .wordmark .wm { display: block; padding-top: 0.08em; } .wordmark .wm span { color: var(--accent-text); } .wordmark img { width: auto; height: 0.98em; margin-bottom: -0.01em; } @supports (animation-timeline: view()) { .wordmark .wm, .wordmark img { animation: wordUp linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; } .wordmark img { animation-name: rooHop; } } @keyframes wordUp { from { transform: translateY(45%); } } @keyframes rooHop { from { transform: translate(-30%, 60%) rotate(-12deg); } 70% { transform: translate(0, -8%) rotate(2deg); } to { transform: none; } } @media (max-width: 860px) { .ft-grid { grid-template-columns: 1fr 1fr; } .ft-brand { grid-column: 1 / -1; } } /* ---------- Inner pages: shared pieces ---------- */ .page-head { padding: clamp(56px, 9vw, 128px) 0 clamp(40px, 5vw, 72px); border-bottom: 1px solid var(--rule); } .page-head .eyebrow { margin-bottom: 22px; } .page-head h1 { font-size: clamp(52px, 7.6vw, 116px); margin-bottom: 26px; max-width: 14ch; animation: fadeUp 1s var(--ease-out) both; } .page-head .lede { animation: fadeUp 1s var(--ease-out) both 0.1s; } .page-head .meta + .lede { margin-top: 16px; } .page-head .meta { margin-top: 22px; font: 500 12.5px/1.5 var(--mono); letter-spacing: 0.02em; color: var(--muted); } .page-head .cta-row { margin-top: 32px; } .section { padding: clamp(64px, 9vw, 128px) 0; } .section + .section { border-top: 1px solid var(--rule); } .section-head { margin-bottom: clamp(36px, 5vw, 64px); max-width: 820px; } .section-head h2 { font-size: clamp(40px, 5.4vw, 80px); margin-bottom: 18px; } .section-head.center { text-align: center; margin-left: auto; margin-right: auto; } .section-head.center p { margin: 0 auto; } .pad-top { padding-top: clamp(64px, 9vw, 128px); } .privacy-band { background: var(--paper-2); } /* Generic prose (legal pages, guide, about) */ .prose { max-width: 720px; } .prose h2 { font: 800 clamp(32px, 3.4vw, 46px)/1 var(--display); text-transform: uppercase; margin: 56px 0 18px; } .prose h3 { margin: 32px 0 10px; } .prose p, .prose li { color: var(--muted); } /* Reading text stops at Bolt's measure */ .prose > p, .prose > ul, .prose > ol { max-width: var(--bolt-measure); } .prose p + p, .prose ul, .prose ol { margin-top: 14px; } .prose strong, .prose b { color: var(--text); } /* The price promise on /pricing/ */ .promise { margin: clamp(56px, 7vw, 96px) auto 0; max-width: 1000px; padding: clamp(28px, 4vw, 56px); border-radius: 28px; background: var(--paper-2); border: 1px solid var(--rule); } .promise h2 { font-size: clamp(40px, 5vw, 72px); margin-bottom: 28px; } .promise ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; } .promise li { color: var(--muted); padding-top: 18px; border-top: 1px solid var(--rule-2); } .promise li b { display: block; color: var(--text); font: 600 18px/1.3 var(--tight); margin-bottom: 6px; } @media (max-width: 700px) { .promise ul { grid-template-columns: 1fr; } } /* Compare table on /pricing/ */ .compare-wrap { max-width: 1000px; margin: clamp(56px, 7vw, 96px) auto 0; } .compare-wrap h2 { font-size: clamp(40px, 5vw, 72px); margin-bottom: 28px; } .table-scroll { overflow-x: auto; } .compare { width: 100%; border-collapse: collapse; font-size: 15.5px; } .compare th, .compare td { padding: 15px 12px; border-bottom: 1px solid var(--rule); text-align: left; } .compare thead th { font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--rule-2); } .compare td, .compare thead th + th { text-align: center; width: 22%; } .compare tbody th { font-weight: 500; } .compare .grp th { padding-top: 36px; font: 800 24px/1 var(--display); text-transform: uppercase; letter-spacing: 0.01em; border-bottom: 1px solid var(--rule-2); } .compare svg { width: 18px; height: 18px; margin: 0 auto; color: var(--accent); } .compare .no { color: var(--faint); } /* Cards and grids used on features, trades, templates, support, switch, about */ .grid-2, .grid-3, .cards { display: grid; gap: 20px; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3, .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .grid-3, .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .grid-2, .grid-3, .cards { grid-template-columns: 1fr; } } .card { padding: 28px; border-radius: 22px; background: var(--card); border: 1px solid var(--rule); transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.3s; } a.card { text-decoration: none; display: block; } a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--rule-2); } .card h3 { margin-bottom: 8px; } .card p { color: var(--muted); font-size: 15.5px; } /* Shot inside an inner page */ .shot { width: 100%; height: auto; } .shot.l { display: var(--show-light); } .shot.d { display: var(--show-dark); } /* The CTA panel at the bottom of inner pages */ .cta-panel { text-align: center; padding: clamp(48px, 7vw, 104px) clamp(24px, 5vw, 64px); border-radius: 32px; background: var(--bolt-ink-paper); color: var(--bolt-ink-text); position: relative; overflow: hidden; --muted: var(--bolt-ink-muted); --text: var(--bolt-ink-text); --rule-2: rgba(238,241,236,0.3); --accent: var(--bolt-platesmith-dark-accent); --accent-hover: var(--bolt-platesmith-dark-accent-hover); --on-accent: var(--bolt-platesmith-dark-on-accent); --accent-text: var(--bolt-platesmith-dark-accent-text); --accent-wash: var(--bolt-platesmith-dark-accent-wash); } .cta-panel::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 300px; height: 300px; background: url("/assets/plate.svg") center / contain no-repeat; opacity: 0.08; } .cta-panel > * { position: relative; z-index: 1; } .cta-panel h2 { font-size: clamp(48px, 7vw, 104px); margin: 0 auto 22px; max-width: 14ch; } .cta-panel h2 .accent { color: var(--bolt-platesmith-dark-accent); } .cta-panel p { color: var(--bolt-ink-muted); max-width: 50ch; margin: 0 auto 32px; } .cta-panel .cta-row { justify-content: center; } .cta-panel picture, .cta-panel > img { margin: 0 auto 24px; border-radius: 18px; } /* 404 */ .lost { min-height: 72vh; display: grid; place-items: center; text-align: center; padding: 64px 0; } .lost h1 { font-size: clamp(72px, 14vw, 200px); } .lost img { margin: 0 auto 24px; width: min(320px, 70vw); height: auto; } .lost p { color: var(--muted); margin: 18px auto 30px; max-width: 44ch; } .lost .cta-row { justify-content: center; } /* ---------- Inner pages: long reads (legal, guide, support, trades, switching, about) ---------- */ .kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .draft-note { display: inline-flex; align-items: center; gap: 8px; margin: 22px 0 0; padding: 8px 14px; border-radius: 999px; border: 1px dashed var(--rule-2); font: 500 12.5px/1.3 var(--mono); color: var(--muted); } .doc { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: clamp(40px, 7vw, 104px); padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(72px, 9vw, 128px); } .doc.single { grid-template-columns: minmax(0, 760px); } .rail { position: sticky; top: 100px; align-self: start; max-height: calc(100vh - 130px); overflow: auto; } .rail h2, .toc h2 { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 16px; } .rail ol, .rail ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); } .rail li { margin: 0; } .rail a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; font-size: 14.5px; line-height: 1.4; transition: color 0.2s, border-color 0.2s; } .rail a:hover { color: var(--text); border-left-color: var(--accent); } .prose .toc { display: none; } .prose { max-width: 760px; } .prose > :first-child { margin-top: 0; } .prose h2 { font: 800 clamp(30px, 3.2vw, 44px)/1 var(--display); text-transform: uppercase; letter-spacing: 0.005em; margin: 64px 0 18px; scroll-margin-top: 100px; } .prose h3 { margin: 34px 0 10px; } .prose p, .prose li { color: color-mix(in srgb, var(--text) 80%, var(--muted)); } .prose p + p, .prose p + ul, .prose p + ol, .prose ul + p, .prose ol + p { margin-top: 14px; } .prose ul, .prose ol { padding-left: 22px; margin: 14px 0 0; } .prose li { margin: 8px 0; } .prose li::marker { color: var(--accent); } .prose b, .prose strong { color: var(--text); font-weight: 600; } .prose details { border-bottom: 1px solid var(--rule); } .prose details:first-of-type { border-top: 1px solid var(--rule-2); } .prose details summary { list-style: none; display: flex; justify-content: space-between; gap: 24px; padding: 20px 0; cursor: pointer; font: 600 18px/1.35 var(--tight); font-stretch: 92%; color: var(--text); } .prose details summary::-webkit-details-marker { display: none; } .prose details summary::after { content: "+"; font: 400 22px/1 var(--sans); color: var(--accent-text); transition: transform 0.3s var(--ease-out); } .prose details[open] summary::after { transform: rotate(45deg); } .prose details > :not(summary) { padding-bottom: 18px; } .prose .group-title { display: flex; align-items: center; gap: 14px; } .prose .group-title .icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent-text); flex: none; } .prose .group-title .icon svg { width: 19px; height: 19px; } .summary-box { position: relative; max-width: calc(var(--bolt-measure) + 56px); background: var(--card); border: 1px solid var(--rule); border-radius: 20px; padding: 26px 28px; margin: 0 0 8px; } .summary-box h2 { font: 600 20px/1.3 var(--tight); text-transform: none; margin: 0 0 10px; } .summary-box ul { margin: 0; } .summary-box .cta-row { margin-top: 18px; } .contact-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .contact-card p { margin: 0 !important; } .note { max-width: calc(var(--bolt-measure) + 48px); background: var(--paper-2); border-radius: 16px; padding: 20px 24px; margin-top: 18px; } .note p { margin: 0; } .fine-print { color: var(--faint) !important; font-size: 14.5px; margin-top: 40px !important; } /* Tables in long reads (trade price lists, sample quotes, legal) */ .prose .table-scroll { margin: 20px 0; border: 1px solid var(--rule); border-radius: 16px; background: var(--card); } .prose table { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; } .prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--rule); } .prose thead th { font: 500 11.5px/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: var(--paper-2); } .prose tr:last-child td { border-bottom: 0; } .prose tr.tot td { background: color-mix(in srgb, var(--paper-2) 50%, transparent); } /* Guide */ .prose figure.guide-shot { margin: 24px 0 30px; } .prose figure.guide-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); } .prose figure.guide-shot picture { display: block; } .prose figure.guide-shot.phone img { max-width: 300px; margin: 0 auto; border-radius: 32px; } .prose figure.guide-shot figcaption { margin-top: 10px; font: 500 12.5px/1.4 var(--mono); color: var(--muted); text-align: center; } .prose .guide-roles { display: grid; gap: 10px; padding: 0; list-style: none; } .prose .guide-roles li { margin: 0; padding: 14px 18px; border: 1px solid var(--rule); border-radius: 14px; background: var(--card); } /* Templates */ .dl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 8px; } .dl-card { background: var(--card); border: 1px solid var(--rule); border-radius: 18px; padding: 22px; transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); } .dl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .prose .dl-card h3 { margin: 0 0 8px; font-size: 18px; } .dl-card p { font-size: 15px; } .dl-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0 !important; } @media (max-width: 860px) { .dl-grid { grid-template-columns: minmax(0, 1fr); } } /* Features page */ .stage-jump { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .stage-jump a { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--rule-2); color: var(--text); text-decoration: none; font: 600 15px/1 var(--tight); font-stretch: 92%; transition: background-color 0.2s, border-color 0.2s; } .stage-jump a:hover { border-color: var(--text); background: var(--accent-wash); } .stage-jump span { font: 500 12px/1 var(--mono); color: var(--accent-text); } .stage-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 72px); align-items: start; } .stage-grid.flip { grid-template-columns: 300px minmax(0, 1fr); } .stage-grid.flip .phone { order: -1; } .stage-grid .phone { width: 100%; position: sticky; top: 100px; } .stage-grid.nophone { grid-template-columns: 1fr; } .fgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-top: 1px solid var(--rule-2); } .stage-grid.nophone .fgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fgrid li { padding: 24px 0 26px; border-bottom: 1px solid var(--rule); } .fgrid h3 { font-size: 19px; margin: 0 0 8px; display: flex; align-items: center; gap: 12px; } .fgrid h3 .icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent-text); flex: none; } .fgrid h3 .icon svg { width: 17px; height: 17px; } .fgrid p { margin: 0; color: var(--muted); font-size: 15.5px; } .tag { display: inline-block; margin-left: 4px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--rule-2); font: 500 10.5px/1.2 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); vertical-align: 2px; } @media (max-width: 900px) { .stage-grid, .stage-grid.flip { grid-template-columns: 1fr; } .stage-grid .phone { display: none; } .stage-grid.nophone .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .fgrid, .stage-grid.nophone .fgrid { grid-template-columns: 1fr; } } /* 404 */ .notfound { padding: clamp(72px, 10vw, 140px) 0; text-align: center; } .notfound h1 { font: 800 clamp(64px, 12vw, 168px)/0.9 var(--display); text-transform: uppercase; } .notfound .lede { margin: 22px auto 34px; } .notfound .cta-row { justify-content: center; } .roo-big { display: block; width: min(320px, 64vw); height: auto; margin: 32px 0 0; } .notfound .roo-big { margin: 0 auto 28px; width: min(300px, 62vw); } @media (max-width: 1020px) { .doc { grid-template-columns: minmax(0, 1fr); gap: 0; } .rail { display: none; } .prose .toc { display: block; background: var(--card); border: 1px solid var(--rule); border-radius: 16px; padding: 20px 22px; margin: 28px 0 0; } .prose .toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; } .prose .toc li { margin: 4px 0; break-inside: avoid; } } @media (max-width: 640px) { .prose .toc ol { columns: 1; } } /* Printing a page (the templates and legal pages get printed) */ @media print { .hd, .ft, .rail, .skip, .progress, .no-print { display: none !important; } body::after { display: none; } body { background: #fff; color: #000; } } /* ---------- Reduced motion: everything still ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } @view-transition { navigation: none; } } .more { margin-top: 22px; font-size: 15px; } /* Archivo a touch narrower for headings and controls, wider and calmer for reading. */ h3, .btn, .button, .hd-nav a, .hd-link, .faq-list summary, .toast, .menu nav a, .plan li, .import-mock li, .inv-top b { font-stretch: 92%; } .made-list .ok, .paper-points .ok { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-wash); color: var(--accent-text); margin-top: 1px; } .made-list .ok svg, .paper-points .ok svg { width: 14px; height: 14px; } .crumbs { margin: 0 0 14px; font: 500 12.5px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; } .crumbs a { color: var(--accent-text); text-decoration: none; } .crumbs a::before { content: "\2190\00a0"; } @media print { .doc { display: block; padding: 0; } } .prose .toc h2 { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 14px; } /* ---------- Inner pages: trades, templates, switching, about ---------- */ .clip { overflow: clip; } .stamp.long { font-size: 34px; right: 5%; bottom: 25%; } .page-head .kicker { margin-bottom: 22px; } .page-head .cta-row .btn { animation: fadeUp 1s var(--ease-out) both 0.2s; } .page-head + .wrap .facts { margin-top: 0; border-top: 0; } /* Trade cards on /trades/ */ .trade-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .trade-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; padding: clamp(24px, 3vw, 36px); border-radius: 24px; background: var(--card); border: 1px solid var(--rule); color: var(--text); text-decoration: none; position: relative; overflow: hidden; transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.3s; } .trade-card::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease-out); } .trade-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--rule-2); } .trade-card:hover::after { transform: scaleX(1); } .trade-card h2 { font-size: clamp(36px, 4vw, 56px); margin: 0; } .trade-card p { color: var(--muted); font-size: 16px; max-width: 44ch; } .trade-foot { display: inline-flex; align-items: center; gap: 10px; font: 500 12.5px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-text); } .trade-foot .arr { width: 16px; height: 16px; transition: transform 0.3s var(--ease-out); } .trade-card:hover .trade-foot .arr { transform: translateX(4px); } .trade-other { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-top: clamp(64px, 9vw, 128px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--rule); } .trade-other .sec-title { font-size: clamp(36px, 4.6vw, 64px); } .trade-other .cta-row { margin-top: 24px; } @media (max-width: 760px) { .trade-grid, .trade-other { grid-template-columns: 1fr; } } /* Starter price list on a trade page */ .pl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .pl-grid .cta-row { margin-top: 28px; } .pl-grid .fine-print { margin-top: 20px !important; } .table-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: 18px; background: var(--card); } .table-scroll table { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; } .table-scroll th, .table-scroll td { text-align: left; vertical-align: top; padding: 13px 18px; border-bottom: 1px solid var(--rule); } .table-scroll thead th { font: 500 11.5px/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: var(--paper-2); } .pl-grid .table-scroll td:first-child { font: 500 12.5px/1.5 var(--mono); color: var(--muted); } .pl-grid .table-scroll td:last-child, .pl-grid .table-scroll th:last-child, .workout .table-scroll th:last-child { text-align: right; } .table-scroll tr:last-child td { border-bottom: 0; } .other-trades { padding-bottom: clamp(24px, 4vw, 48px); } .other-trades .label { margin-bottom: 16px; } a.chip { color: var(--text); text-decoration: none; transition: border-color 0.2s, background-color 0.2s; } a.chip:hover { border-color: var(--text); background: var(--accent-wash); } @media (max-width: 900px) { .pl-grid { grid-template-columns: 1fr; } } /* Template downloads */ .dl-grid .dl-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; padding: clamp(24px, 3vw, 32px); border-radius: 24px; } .dl-card h2 { font-size: clamp(30px, 3vw, 40px); margin: 0; } .dl-card .num-tag { font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); } .dl-card p { color: var(--muted); font-size: 15.5px; } .paper-points b { color: var(--text); } .paper-points b b { color: var(--accent-text); } /* Numbered steps (switching) */ .steps { list-style: none; margin: 0; padding: 0; max-width: 920px; border-top: 1px solid var(--rule-2); } .steps li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; padding: 30px 0; border-bottom: 1px solid var(--rule); } .steps .step-n { font: 800 clamp(40px, 4.5vw, 60px)/0.9 var(--display); color: var(--accent-text); letter-spacing: 0.01em; } .steps b { display: block; font: 600 20px/1.3 var(--tight); font-stretch: 92%; margin-bottom: 6px; } .steps p { color: var(--muted); max-width: 60ch; } @media (max-width: 600px) { .steps li { grid-template-columns: 1fr; gap: 10px; } } /* App cards (switching) and promise band (about) */ .apps .card h3 { font: 800 26px/1 var(--display); text-transform: uppercase; letter-spacing: 0.01em; } .ink .promises { border-top-color: var(--rule-2); } .ink .promises li + li { border-left-color: var(--rule); } .contact-wrap { padding-bottom: clamp(40px, 6vw, 80px); } .contact-card .button { flex: none; } .trade-card h2, .dl-card h2 { font: 800 clamp(32px, 3.6vw, 52px)/0.95 var(--display); text-transform: uppercase; letter-spacing: 0.01em; } .dl-card h2 { font-size: clamp(28px, 2.6vw, 36px); } .pl-grid .table-scroll table { min-width: 460px; } .pl-grid .table-scroll td:first-child, .pl-grid .table-scroll td:nth-child(3), .pl-grid .table-scroll td:last-child { white-space: nowrap; } /* ---------- Platesmith ---------- */ /* The mark: the pixel plate beside the name, set in the display face. */ .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); } /* The PLATE/SMITH lockup (zappystudios design/lockups): vector letters and the plate's pixels as crisp rects. */ .brand img.logo { width: auto; height: 30px; } .brand img.logo.l { display: var(--show-light); } .brand img.logo.d { display: var(--show-dark); } .ft h2 { font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; } .ft ul a { display: inline-block; min-height: 24px; } .langs { width: 100%; font: 500 12.5px/1.8 var(--mono); } .langs a { color: var(--muted); text-decoration: none; } .langs a:hover, .langs a[aria-current] { color: var(--accent-text); } .wordmark img { image-rendering: pixelated; height: 0.84em; margin: 0 0 0.04em 0.06em; } @supports (animation-timeline: view()) { .wordmark img { animation-name: plateRoll; } } @keyframes plateRoll { from { transform: translateX(-60%) rotate(-200deg); } to { transform: none; } } .toast .dot.pr { background: var(--pr); color: #fff; } /* The big plate in the ink band turns as you scroll past, like it's being loaded on the bar. */ .plate-big { width: min(300px, 64vw); height: auto; margin-top: 48px; image-rendering: pixelated; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45)); } @supports (animation-timeline: view()) { .plate-big { animation: plateIn linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; } } @keyframes plateIn { from { transform: translateX(-30%) rotate(-150deg); } to { transform: none; } } /* The session, on a logbook page */ .inv.log { background: #fbfaf5; } .inv.log th:nth-child(2), .inv.log td:nth-child(2) { text-align: center; width: 56px; } .inv.log td:last-child { white-space: nowrap; font-weight: 600; } .inv.log .tot .grand span:last-child { color: #176c2e; } .inv.log .stamp { bottom: 30%; right: 5%; border-color: #1e8539; color: #1e8539; } .inv.log .stamp small { letter-spacing: 0.04em; } /* Screens: a sideways gallery of real phone shots, snap-scrolling, edge to edge. */ .gallery-wrap { overflow: hidden; } .gallery { display: flex; gap: clamp(20px, 3vw, 40px); margin: 0; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px max(var(--gutter), calc((100vw - var(--wrap)) / 2)) 40px; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); } .gallery::-webkit-scrollbar { display: none; } .gallery li { flex: none; width: min(280px, 62vw); scroll-snap-align: start; } .gallery figure { margin: 0; } .gallery .phone { width: 100%; border-radius: 46px; padding: 9px; } .gallery .phone .screen { border-radius: 37px; } .gallery figcaption { margin-top: 22px; font-size: 15px; color: var(--muted); line-height: 1.5; } .gallery figcaption b { display: block; font: 800 26px/1 var(--display); text-transform: uppercase; letter-spacing: 0.01em; color: var(--text); margin-bottom: 6px; } .gallery:focus-visible { outline-offset: -4px; } @supports (animation-timeline: view()) { .gallery li { animation: cardIn linear both; animation-timeline: view(inline); animation-range: entry 0% entry 60%; } } @keyframes cardIn { from { transform: translateY(40px) scale(0.94); } } /* Coach code entry */ .switch-card.flip { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } .code-mock { padding: 28px; border-radius: 20px; background: var(--paper); border: 1px solid var(--rule); } .code-mock .lbl { font: 500 12px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; } .code-mock .digits { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } .code-mock .digits span { display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: 12px; background: var(--card); border: 1px solid var(--rule-2); font: 800 clamp(30px, 3.4vw, 44px)/1 var(--display); color: var(--text); } .code-mock .digits .cur { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); position: relative; } .code-mock .digits .cur::after { content: ""; width: 2px; height: 40%; background: var(--accent); animation: blink 1.1s steps(1) infinite; } /* bolt-live: typing caret */ @keyframes blink { 50% { opacity: 0; } } .code-mock .who { display: flex; align-items: center; gap: 10px; margin-top: 20px; font: 500 13px/1 var(--mono); color: var(--muted); } .code-mock .who i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } @media (max-width: 860px) { .switch-card.flip { grid-template-columns: 1fr; } .switch-card.flip .code-mock { order: 2; } } .store { text-decoration: none; } .closing .store { height: 52px; } @media (prefers-reduced-motion: reduce) { .code-mock .digits .cur::after, .code-mock .who i { animation: none !important; } } .hero-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); } .hero h1 { font-size: clamp(60px, 7.4vw, 112px); line-height: 0.9; } .stamp { text-transform: uppercase; } .inv.log .stamp { right: auto; left: 6%; bottom: 5%; font-size: 40px; } @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .hd-act .btn:not(.hd-cta) { display: none; } .hd .brand img.logo { height: 26px; } } @media (max-width: 560px) { .inv.log .stamp { position: relative; left: auto; bottom: auto; right: auto; display: inline-block; margin: 22px 0 4px 8px; font-size: 30px; } .inv-top { flex-wrap: wrap; } } .closing .label { font-size: 12px; margin: 0; } /* /demo/: screen recordings of the real app, a light and a dark