/* ============================================================ Plume — PlumiBot design system (theme: "plume") Quiet early-Macintosh paper canvas + ONE terracotta accent, pixel display type, sharp UI inside rounded Mac windows, hard-offset shadows, bird mascot as the star. Part 1 is the Plume DS bundle (tokens + components), imported verbatim from the design handoff. Part 2 aliases the pixel-icon palette. Part 3 is the "Retro Mac Hero" illustration, ported 1:1 from Claude Design (Retro Mac Hero.dc.html). Part 4 is page-level layout for the one-page marketing site. Fonts (Pixelify Sans, Silkscreen, Karla, JetBrains Mono) load via in base.html — CSP forbids CSS @import of remote URLs. Hand-written CSS: NOT Tailwind, no rebuild step. ============================================================ */ /* ============================================================ PART 1 — Plume DS bundle (tokens + components) ============================================================ */ :root { --paper: #F8F6F1; --surface: #FFFFFF; --sunk: #EFEBE2; --ink: #1A1813; --ink-2: #55514A; --ink-3: #8A857A; --line: #E2DDD2; --border: #CFC8B8; --accent: #E0915E; /* fills only */ --accent-text: #A85731; /* text/links (AA on paper) */ --on-accent: #2A1A10; --success: #8FAA8B; --warn: #C98A2E; /* states only — never a brand colour */ --danger: #B4443C; /* muted brick; plume has no true red */ --on-danger: #FFF6F0; --dot: rgba(26,24,19,0.12); /* placeholder / screenshot mat stipple */ --font-display: "Pixelify Sans", "Press Start 2P", monospace; --font-label: "Silkscreen", "Pixelify Sans", monospace; --font-body: "Karla", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; --r-sm: 2px; --r-md: 4px; --r-win: 9px; --bw: 1px; --bw-strong: 1.5px; --shadow-sm: 2px 2px 0 rgba(26,24,19,0.10); --shadow-md: 3px 3px 0 rgba(26,24,19,0.14); --shadow-lg: 5px 5px 0 rgba(26,24,19,0.16); --shadow-win: 0 10px 30px -18px rgba(26,24,19,0.45); --max-w: 1120px; --nav-h: 64px; /* One source of truth for the page's side padding. Anything that breaks out of the container full-bleed must pull back by exactly this, or the page scrolls sideways on a phone. */ --gutter: 40px; --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; --ease-snap: cubic-bezier(0.2, 0.9, 0.3, 1.2); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* Phosphor — the dark palette. Applied by setting data-theme="phosphor" on : the server stamps it for an explicit dark preference, and the no-flash script resolves "auto" against prefers-color-scheme. Both paths land on this one block, so the palette exists exactly once. */ [data-theme="phosphor"] { --paper: #141210; --surface: #1E1B16; --sunk: #0F0D0B; --ink: #F2ECDD; --ink-2: #C7BFAE; --ink-3: #8E8677; --line: #2A2620; --border: #3A352C; --accent: #E8A06F; --accent-text: #E8A06F; --on-accent: #1A1006; --success: #9DB79A; /* lifted off the base hues: #C98A2E / #B4443C fall below AA on #141210 */ --warn: #E0A94E; --danger: #E2726A; --on-danger: #2A0E0B; --dot: rgba(242,236,221,0.10); --shadow-sm: 2px 2px 0 rgba(0,0,0,0.45); --shadow-md: 3px 3px 0 rgba(0,0,0,0.55); --shadow-lg: 5px 5px 0 rgba(0,0,0,0.6); --shadow-win: 0 14px 34px -18px rgba(0,0,0,0.8); color-scheme: dark; } /* ---------- base ---------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent); color: var(--on-accent); } :focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); } /* ---------- layout ---------- */ /* The gutter is stated once, here, and every rule that also lands on a `.wrap` element (`.section`, `.hero`, …) must use `padding-block` — the shorthand zeroes the inline sides, and since those rules sit later in the file the copy ends up flush against the edge of the phone. The safe-area insets resolve to 0 in a normal portrait tab; they only matter in landscape on a notched phone, where `viewport-fit=cover` would otherwise run the text under the sensor housing. */ .wrap { max-width: var(--max-w); margin: 0 auto; padding-left: calc(var(--gutter) + env(safe-area-inset-left, 0px)); padding-right: calc(var(--gutter) + env(safe-area-inset-right, 0px)); } .section { padding-block: 96px; scroll-margin-top: 80px; } .stack > * + * { margin-top: var(--gap, 16px); } .row { display: flex; gap: 16px; } .grid { display: grid; gap: 24px; } .divider { height: var(--bw); background: var(--line); border: 0; } .center { text-align: center; } /* ---------- typography ---------- */ h1, h2, h3, .display { font-family: var(--font-display); font-weight: 700; color: var(--ink); margin: 0; line-height: 1.3; } .h-hero { font-size: 52px; line-height: 1.2; } h1, .h1 { font-size: 48px; } h2, .h2 { font-size: 30px; } h3, .h3 { font-size: 19px; } .eyebrow { font-family: var(--font-label); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); display: inline-flex; align-items: center; gap: 8px; } .eyebrow::before { content: ""; width: 16px; height: 6px; background: var(--accent); border-radius: 1px; } .lede { font-size: 19px; line-height: 1.6; color: var(--ink-2); } .body { font-size: 16px; line-height: 1.6; color: var(--ink-2); } .small { font-size: 13px; color: var(--ink-3); } .kbd { font-family: var(--font-label); font-size: 9px; letter-spacing: .05em; color: var(--ink-3); text-transform: uppercase; } .mono { font-family: var(--font-mono); } strong, b { font-weight: 700; color: var(--ink); } .accent-text { color: var(--accent-text); } /* ---------- sticky scrollspy nav ---------- */ /* The safe-area padding is what keeps the bar clear of the iOS status bar once the site is installed to the home screen: `viewport-fit=cover` plus apple-mobile-web-app-capable means the page starts at the physical top of the screen, so without it the nav renders *under* the clock. It resolves to 0 in a normal browser tab, so the same rule is correct in both. */ .nav { position: sticky; top: 0; z-index: 8000; height: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); background: color-mix(in oklab, var(--paper), transparent 8%); backdrop-filter: blur(8px); border-bottom: var(--bw) solid var(--line); } .nav-in { max-width: var(--max-w); margin: 0 auto; height: 100%; padding-left: calc(var(--gutter) + env(safe-area-inset-left, 0px)); padding-right: calc(var(--gutter) + env(safe-area-inset-right, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-label); font-size: 13px; } /* The icon carries its own rounded corners in the alpha channel, so it needs no radius here — and must not be squashed when a long translated nav squeezes the flex row. `width`/`height` come from the element's own attributes. */ .brand-mark { flex: none; display: block; } /* Labels never wrap: .nav is a fixed height, so a second line is clipped, and a translated label runs far longer than the English ("FAQ" is 24 characters in Russian). The gap absorbs the difference before the row runs out of room. */ .nav-links { display: flex; align-items: center; gap: clamp(12px, 1.7vw, 22px); } .nav-links a { font-size: 14px; color: var(--ink-2); position: relative; white-space: nowrap; transition: color var(--dur-fast); } .nav-links a:hover { color: var(--ink); } .nav-links a.is-active { color: var(--accent-text); } .nav-links a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--accent); } .nav-links a.btn { color: var(--on-accent); } .nav-links a.btn.is-active::after { display: none; } .nav-burger { display: none; flex-direction: column; gap: 4px; padding: 0; width: 40px; height: 34px; align-items: center; justify-content: center; background: var(--surface); border: var(--bw-strong) solid var(--border); border-radius: var(--r-sm); box-shadow: var(--shadow-sm); cursor: pointer; } .nav-burger i { display: block; width: 16px; height: 2px; background: var(--ink); } .nav-menu { position: absolute; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); left: 0; right: 0; display: none; flex-direction: column; padding: 6px 22px 16px; background: var(--paper); border-bottom: var(--bw) solid var(--line); box-shadow: var(--shadow-md); } .nav-menu a { padding: 13px 4px; font-size: 15px; color: var(--ink-2); border-bottom: var(--bw) solid var(--line); } .nav-menu a:last-child { border-bottom: 0; } .nav-menu a.is-active { color: var(--accent-text); } @media (max-width: 860px) { .nav-links { display: none; } .nav-burger { display: flex; } .nav-menu.is-open { display: flex; } } /* ---------- buttons (sharp, tactile hard-shadow press) ---------- */ .btn { font-family: var(--font-label); font-size: 11px; letter-spacing: .02em; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 20px; border-radius: var(--r-md); border: var(--bw-strong) solid var(--border); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); cursor: pointer; line-height: 1; transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast); } .btn:hover { transform: translate(-1px,-1px); box-shadow: var(--shadow-md); } .btn:active { transform: translate(2px,2px); box-shadow: none; } .btn--primary { background: var(--accent); color: var(--on-accent); border-color: color-mix(in oklab, var(--accent), #000 20%); } .btn--ghost { background: transparent; box-shadow: none; border-color: transparent; color: var(--accent-text); } .btn--ghost:hover { box-shadow: none; text-decoration: underline; } .btn--sm { padding: 9px 14px; font-size: 9px; } .btn--lg { padding: 16px 26px; font-size: 12px; } /* ---------- cards ---------- */ .card { background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: 26px; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); } .card--hover:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-lg); } .card--sunk { background: var(--sunk); box-shadow: none; } /* ---------- Mac window (signature; rounded corners) ---------- */ .win { background: var(--surface); border: var(--bw-strong) solid var(--border); border-radius: var(--r-win); box-shadow: var(--shadow-win); overflow: hidden; } .win-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: linear-gradient(var(--surface), var(--sunk)); border-bottom: var(--bw-strong) solid var(--border); } .win-dot { width: 11px; height: 11px; border-radius: 999px; border: var(--bw-strong) solid var(--border); background: var(--surface); } .win-stripes { flex: 1; height: 8px; opacity: .3; border-radius: 2px; background: repeating-linear-gradient(var(--ink) 0 1px, transparent 1px 3px); } .win-title { font-family: var(--font-label); font-size: 9px; color: var(--ink-2); letter-spacing: .03em; white-space: nowrap; } .win-body { padding: 18px; } /* ---------- badges / pills ---------- */ .badge { font-family: var(--font-label); font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: var(--r-sm); background: color-mix(in oklab, var(--accent), transparent 82%); color: var(--accent-text); border: var(--bw) solid color-mix(in oklab, var(--accent), transparent 60%); } .badge--quiet { background: var(--sunk); color: var(--ink-3); border-color: var(--line); } .pill { font-family: var(--font-mono); font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: var(--bw) solid var(--line); color: var(--ink-2); } /* ---------- inputs ---------- */ .field { display: flex; flex-direction: column; gap: 6px; } .label { font-family: var(--font-label); font-size: 9px; letter-spacing: .04em; color: var(--ink-2); text-transform: uppercase; } .input, .textarea, .select { font-family: var(--font-body); font-size: 15px; color: var(--ink); background: var(--paper); border: var(--bw-strong) solid var(--border); border-radius: var(--r-sm); padding: 11px 13px; width: 100%; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .input::placeholder, .textarea::placeholder { color: var(--ink-3); } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 75%); } /* ---------- pricing ---------- */ .pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .plan { display: flex; flex-direction: column; gap: 16px; padding: 26px; background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); } .plan:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-lg); } .plan--featured { border: var(--bw-strong) solid var(--accent); box-shadow: var(--shadow-md); } .plan-name { font-family: var(--font-display); font-size: 20px; } .plan-price { font-family: var(--font-display); font-size: 30px; color: var(--ink); } .plan-price .per { font-family: var(--font-body); font-size: 13px; color: var(--ink-3); } .plan-feats { list-style: none; margin: 4px 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 11px; } .plan-feats li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink-2); } .plan-feats li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 7px; background: var(--accent); border-radius: 1px; } .plan > .btn, .plan > .plan-cta .btn { width: 100%; } @media (max-width: 860px) { .pricing { grid-template-columns: 1fr; } } /* ---------- scoreboard ---------- */ .scoreboard { display: grid; grid-template-columns: repeat(4, 1fr); border: var(--bw-strong) solid var(--border); border-radius: var(--r-md); background: var(--sunk); overflow: hidden; } .score { padding: 22px; text-align: center; border-right: var(--bw) solid var(--line); } .score:last-child { border-right: 0; } .score .n { font-family: var(--font-display); font-size: 26px; color: var(--accent-text); } .score .l { font-size: 12px; color: var(--ink-3); margin-top: 6px; } @media (max-width: 700px) { .scoreboard { grid-template-columns: repeat(2, 1fr); } } /* ---------- steps ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .step .num { font-family: var(--font-label); font-size: 11px; color: var(--on-accent); background: var(--accent); width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; margin-bottom: 14px; } @media (max-width: 860px) { .steps { grid-template-columns: 1fr; } } /* ---------- pixel-art icon grid (rendered by plumibot-pixel.js) ---------- */ .px { display: inline-grid; line-height: 0; image-rendering: pixelated; } .px i { display: block; } /* ---------- mascot ---------- */ .mascot { display: inline-block; will-change: transform; } .mascot--idle { animation: bob 3s ease-in-out infinite; } .mascot .eye { animation: blink 4s steps(1) infinite; transform-origin: center; } /* ---------- motion primitives ---------- */ .caret { display: inline-block; width: .6ch; background: var(--accent); animation: caret 1s steps(1) infinite; } .progress-barber { height: 10px; border-radius: 999px; border: var(--bw) solid var(--border); background-image: repeating-linear-gradient(-45deg, var(--accent) 0 8px, color-mix(in oklab, var(--accent), #fff 30%) 8px 16px); background-size: 22px 22px; animation: barber 600ms linear infinite; } .marquee { display: flex; overflow: hidden; } .marquee > * { display: flex; gap: 28px; padding-right: 28px; animation: marquee 26s linear infinite; white-space: nowrap; } .reveal { opacity: 0; transform: translateY(10px); } .reveal.is-in { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes blink { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } } @keyframes caret { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } } @keyframes barber { to { background-position: 22px 0; } } @keyframes marquee { to { transform: translateX(-50%); } } @keyframes bootwink { 0% { opacity: 0; transform: scale(.96); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 1; } } /* respect reduced motion — freeze loops, keep state feedback */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .mascot--idle, .mascot .eye, .caret, .progress-barber, .marquee > * { animation: none !important; } .reveal { opacity: 1; transform: none; } } @media (max-width: 900px) { :root { --gutter: 24px; } .section { padding-block: 56px; } .h-hero { font-size: 34px; } h1, .h1 { font-size: 32px; } } /* ============================================================ PART 2 — pixel-icon palette aliases plumibot-pixel.js colors cells with platinum-era var names; map them onto Plume tokens so the shared renderer just works. ============================================================ */ :root, [data-theme="phosphor"] { --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --accent-2: var(--accent-text); --phosphor: var(--success); --rust: var(--accent-text); --accent-wash: color-mix(in oklab, var(--accent), transparent 82%); } /* ============================================================ PART 3 — Retro Mac Hero illustration Ported 1:1 from "Retro Mac Hero.dc.html" (Claude Design). Fixed 700x680 stage, scaled responsively via --mac-scale. ============================================================ */ /* --mac-h is how much of the 680px stage stays visible. Cropping it is what lets a phone zoom into the machine without the block eating more page: the keyboard and mouse are the bottom ~190px and carry no information, while the chat on the CRT is the whole point of the illustration. */ .mac-viewport { --mac-scale: .72; --mac-h: 680px; height: calc(var(--mac-h) * var(--mac-scale)); display: grid; justify-content: center; overflow: hidden; } .mac-stage { position: relative; width: 700px; height: 680px; flex: none; transform: scale(var(--mac-scale)); transform-origin: top center; font-family: var(--font-body); } @media (max-width: 1000px) { .mac-viewport { --mac-scale: .82; } } @media (max-width: 640px) { .mac-viewport { --mac-scale: .6; } } @media (max-width: 440px) { .mac-viewport { --mac-scale: .5; } } .mac-ground { position: absolute; left: 50%; bottom: 62px; width: 600px; height: 104px; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(26,24,19,0.24), transparent 72%); filter: blur(10px); } .mac-cable { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } .mac-cable--mouse { z-index: 0; } .mac-cable--kb { z-index: 5; } .mac-cable path, .mac-cable ellipse { fill: none; stroke: color-mix(in oklab, var(--ink-3), var(--ink-2) 45%); stroke-width: 4.2; stroke-linecap: round; } /* ---- the machine ---- */ .mac { position: absolute; left: 50%; top: 18px; width: 348px; height: 470px; transform: translateX(-50%); } .mac-case { position: relative; width: 348px; height: 470px; border-radius: 21px; padding: 27px 30px 19px; display: flex; flex-direction: column; background: linear-gradient(157deg, #FDFCF8 0%, #F3EFE5 42%, #E8E2D4 100%); box-shadow: 1px -1px 0 #EDE7D8, 2px -2px 0 #EBE5D5, 3px -3px 0 #EBE5D5, 4px -4px 0 #E9E2D2, 5px -5px 0 #E9E2D2, 6px -6px 0 #E7E0CF, 7px -7px 0 #E7E0CF, 8px -8px 0 #E5DDCC, 9px -9px 0 #E5DDCC, 10px -10px 0 #E3DBC9, 11px -11px 0 #E3DBC9, 12px -12px 0 #E1D8C6, 13px -13px 0 #E1D8C6, 14px -14px 0 #DED5C2, 15px -15px 0 #DED5C2, 16px -16px 0 #DBD2BE, 17px -17px 0 #DBD2BE, 18px -18px 0 #D8CEBA, 19px -19px 0 #CFC8B8, 15px 28px 30px -14px rgba(26,24,19,0.32), inset 0 2px 0 rgba(255,255,255,0.62), inset 0 -13px 24px rgba(26,24,19,0.055); } .mac-sheen { position: absolute; inset: 0; border-radius: 21px; pointer-events: none; background: radial-gradient(125% 85% at 24% 10%, rgba(255,255,255,0.66), transparent 52%); z-index: 0; } .mac-bezel { position: relative; z-index: 1; flex: none; height: 300px; border-radius: 15px; padding: 15px; background: linear-gradient(160deg, #EDE8DE 0%, #E0DACC 100%); box-shadow: inset 0 4px 11px rgba(26,24,19,0.20), inset 0 -2px 0 rgba(255,255,255,0.55), inset 2px 0 6px rgba(26,24,19,0.07), 0 1px 0 rgba(255,255,255,0.55); } .mac-crtframe { position: relative; width: 100%; height: 100%; border-radius: 9px; padding: 12px 13px; background: linear-gradient(155deg, #201D18, #100E0B); box-shadow: inset 0 0 0 2px #0A0908, inset 0 3px 12px rgba(0,0,0,0.7), 0 1px 1px rgba(255,255,255,0.35); } .mac-crt { position: relative; width: 100%; height: 100%; border-radius: 5px; overflow: hidden; background: #FBFAF7; display: flex; flex-direction: column; box-shadow: inset 0 0 34px rgba(0,0,0,0.19); animation: crtFlicker 7s ease-in-out infinite; } .mac-menubar { flex: none; height: 17px; display: flex; align-items: center; gap: 11px; padding: 0 7px; background: #fff; border-bottom: 1.5px solid #000; font-family: var(--font-label); font-size: 7px; letter-spacing: .03em; color: #000; z-index: 4; white-space: nowrap; } .mac-menubar .clock { margin-left: auto; white-space: nowrap; } .mac-desktop { position: relative; flex: 1; overflow: hidden; background-color: #FBFAF7; background-image: radial-gradient(rgba(20,18,15,0.20) 0.7px, transparent 0.8px); background-size: 3px 3px; } .mac-chatwin { position: absolute; inset: 7px 8px 8px 8px; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1.5px solid #000; border-radius: 2px; box-shadow: 3px 3px 0 #000; } .mac-chatbar { flex: none; display: flex; align-items: center; gap: 4px; height: 16px; padding: 0 5px; border-bottom: 1.5px solid #000; background: repeating-linear-gradient(180deg, #000 0 1px, transparent 1px 3px); } .mac-chatbar .close { width: 9px; height: 9px; flex: none; background: #fff; border: 1.5px solid #000; border-radius: 1px; } .mac-chatbar .sp { flex: 1; } .mac-chatbar .title { background: #fff; padding: 0 7px; font-family: var(--font-label); font-size: 7.5px; letter-spacing: .03em; color: #000; white-space: nowrap; } .mac-msgs { flex: 1; overflow: hidden; padding: 8px; display: flex; flex-direction: column; gap: 7px; justify-content: flex-end; } .msg-row { display: flex; gap: 6px; align-items: flex-start; animation: msgIn 260ms ease-out both; } .msg-row--typing { align-items: center; justify-content: flex-end; animation-duration: 200ms; } .msg-row--bot { justify-content: flex-end; } .msg-face { width: 19px; height: 19px; flex: none; background: #fff; border: 1.5px solid #000; border-radius: 2px; display: grid; place-items: center; overflow: hidden; } .msg-face img { image-rendering: pixelated; display: block; } .msg-face--bot { background: #000; } .msg-bub { max-width: 210px; background: #fff; border: 1.5px solid #000; border-radius: 2px; box-shadow: 2px 2px 0 #000; padding: 4px 8px; } .msg-bub--bot { background: #000; border-color: #000; box-shadow: 2px 2px 0 rgba(0,0,0,0.28); } .msg-head { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; } .msg-name { font-family: var(--font-label); font-size: 7px; letter-spacing: .03em; color: #000; } .msg-tag { font-family: var(--font-label); font-size: 6px; letter-spacing: .05em; color: #000; border: 1px solid #000; border-radius: 1px; padding: 1px 3px; line-height: 1; } .msg-bub--bot .msg-name { color: #fff; } .msg-bub--bot .msg-tag { color: #fff; border-color: #fff; } .msg-text { font-size: 13px; line-height: 1.34; color: #000; text-wrap: pretty; } .msg-bub--bot .msg-text { color: #fff; } .msg-typing { background: #000; border-radius: 2px; padding: 5px 9px; display: flex; align-items: center; gap: 5px; box-shadow: 2px 2px 0 rgba(0,0,0,0.28); } .msg-typing .t { font-family: var(--font-label); font-size: 7px; letter-spacing: .04em; color: #fff; } .msg-typing .dots { display: flex; gap: 3px; } .msg-typing .dot { width: 3px; height: 3px; background: #fff; border-radius: 50%; animation: dotPulse 1.1s ease-in-out infinite; } .msg-typing .dot:nth-child(2) { animation-delay: .2s; } .msg-typing .dot:nth-child(3) { animation-delay: .4s; } .mac-scanlines { position: absolute; inset: 0; pointer-events: none; z-index: 6; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; } .mac-glare { position: absolute; inset: 0; pointer-events: none; z-index: 7; background: linear-gradient(133deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.05) 16%, transparent 34%); } /* ---- chin: wordmark + floppy ---- */ .mac-chin { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 14px 3px 2px; } .mac-brand { display: flex; align-items: center; gap: 8px; } .mac-brand svg { display: block; flex: none; } .mac-wordmark { display: flex; flex-direction: column; gap: 1px; } .mac-wordmark .nm { font-family: var(--font-label); font-size: 9px; letter-spacing: .04em; color: var(--ink); line-height: 1; } .mac-wordmark .sub { font-family: var(--font-body); font-size: 6.5px; letter-spacing: .18em; color: var(--ink-3); line-height: 1; } .mac-drive { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; } .mac-slit { position: relative; width: 96px; height: 12px; border-radius: 2px; background: linear-gradient(180deg, #14120F, #262119); box-shadow: inset 0 1.5px 3px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.5); } .mac-slit i { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 4px; height: 5px; border-radius: 1px; background: #4a4238; } .mac-badgeline { width: 74px; height: 3px; border-radius: 2px; background: rgba(26,24,19,0.14); } .mac-power { position: absolute; bottom: 12px; right: 54px; width: 18px; height: 18px; border-radius: 3px; background: linear-gradient(158deg, #E1DACB, #CDC5B3); box-shadow: inset 0 1.5px 3px rgba(26,24,19,0.4), 0 1px 0 rgba(255,255,255,0.6); display: grid; place-items: center; z-index: 1; } .mac-power i { width: 9px; height: 9px; border-radius: 1.5px; background: #141210; box-shadow: inset 0 1px 1.5px rgba(0,0,0,0.85); } /* ---- keyboard ---- */ .mac-kb { position: absolute; left: 50%; top: 492px; width: 348px; transform: translateX(-50%) perspective(900px) rotateX(49deg); transform-origin: center top; } .mac-kb-body { border-radius: 9px 9px 11px 11px; padding: 12px 14px 13px; background: linear-gradient(180deg, #F5F0E7 0%, #E3DBCC 100%); box-shadow: 0 6px 0 #C7BEAC, 0 10px 0 #B6AC99, 0 34px 30px -12px rgba(26,24,19,0.42), inset 0 1px 0 rgba(255,255,255,0.85); border: 1px solid var(--border); } .mac-kb-rows { display: flex; flex-direction: column; gap: 5px; } .kb-row { display: flex; gap: 5px; height: 17px; } .kb-key { flex: 1; border-radius: 2px 2px 3px 3px; background: linear-gradient(180deg, #FDFAF3 0%, #EAE1D2 100%); box-shadow: 0 3px 0 #C6BDA9, inset 0 1px 0 rgba(255,255,255,0.92); } .kb-key--mod { flex: none; width: 12%; } /* ---- mouse ---- */ .mac-mouse { position: absolute; right: 92px; top: 496px; width: 54px; height: 86px; transform: perspective(900px) rotateX(44deg); transform-origin: center top; } .mac-mouse-body { position: relative; width: 100%; height: 100%; border-radius: 10px 10px 14px 14px; background: linear-gradient(180deg, #F5F0E7 0%, #E0D8C9 100%); box-shadow: 0 7px 0 #BFB6A3, 0 30px 24px -10px rgba(26,24,19,0.46), inset 0 1px 0 rgba(255,255,255,0.9); border: 1px solid var(--border); } .mac-mouse-btn { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 27px; height: 30px; border-radius: 4px; background: linear-gradient(180deg, #F0EADE 0%, #DCD3C2 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 1.5px 2px rgba(26,24,19,0.16); border: 1px solid rgba(26,24,19,0.12); } .mac-mouse-emblem { position: absolute; top: 51px; left: 50%; transform: translateX(-50%); width: 11px; height: 9px; border-radius: 2px; border: 1px solid rgba(26,24,19,0.15); box-shadow: inset 0 1px 1px rgba(255,255,255,0.5); } @keyframes msgIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } @keyframes dotPulse { 0%, 100% { opacity: .22; } 50% { opacity: 1; } } @keyframes crtFlicker { 0%, 100% { opacity: 1; } 94% { opacity: 1; } 96% { opacity: .94; } 98% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .msg-row, .msg-typing .dot, .mac-crt { animation: none !important; } } /* ============================================================ PART 4 — one-page site layout (plume theme) ============================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* full-bleed sunk band (pricing, commands, changelog) */ .section--sunk { background: var(--sunk); border-block: var(--bw) solid var(--line); } /* hero */ .hero { padding-block: 72px 40px; scroll-margin-top: 80px; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 40px; align-items: center; } .hero-copy { max-width: 34em; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .hero-note { display: flex; align-items: center; gap: 10px; margin-top: 18px; } .row-wrap { display: flex; flex-wrap: wrap; gap: 10px; } @media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; gap: 24px; } .hero { padding-top: 48px; } } /* features */ .section-head { margin-bottom: 40px; max-width: 42em; } .section-head--center { margin-inline: auto; text-align: center; } .feat-cat { margin-top: 44px; } .cat-head { margin-bottom: 20px; } .feat-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .feat-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .feat-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .feat .ic { width: 72px; height: 72px; border-radius: var(--r-sm); background: var(--sunk); border: var(--bw) solid var(--border); display: grid; place-items: center; box-shadow: var(--shadow-sm); margin-bottom: 16px; } .feat h3 { margin-bottom: 8px; } @media (max-width: 860px) { .feat-3, .feat-2, .feat-4 { grid-template-columns: 1fr; } } @media (min-width: 861px) and (max-width: 1000px) { .feat-3 { grid-template-columns: 1fr 1fr; } } /* use cases */ .use-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 860px) { .use-grid { grid-template-columns: 1fr; } } /* language museum */ .lang-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .lang .name { font-family: var(--font-display); font-size: 24px; color: var(--ink); line-height: 1.2; } .lang .native { font-family: var(--font-label); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 6px 0 10px; } .lang .note { font-size: 13px; line-height: 1.5; color: var(--ink-2); } a.lang--more { display: block; text-decoration: none; } a.lang--more:hover { border-color: var(--accent); } .lang--more .more { color: var(--accent-text); margin-top: 10px; } @media (max-width: 1000px) { .lang-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .lang-grid { grid-template-columns: 1fr; } } /* /languages — the whole catalogue, grouped by region. Deliberately flatter than the museum cards above: a hundred-plus entries dressed as windows would be a mile of chrome, so each one is a plain cell carrying the same three lines. No flags — this site draws in 1-bit pixel art, and the language code does the same job. */ .lang-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; } .lang-jump .pill { text-decoration: none; font-family: var(--font-body); font-size: 13px; } .lang-jump .pill:hover { border-color: var(--accent); color: var(--ink); } .lang-jump .pill .n { font-family: var(--font-label); font-size: 8.5px; color: var(--ink-3); } .lang-regions { display: flex; flex-direction: column; gap: 40px; } .lang-region { scroll-margin-top: 88px; } .lang-region-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .lang-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .lang-cell { background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; box-shadow: var(--shadow-sm); min-width: 0; } /* The display face is a pixel font with a Latin-only glyph set, so every non-Latin endonym falls back anyway — `anywhere` stops the long ones (ʻŌlelo Hawaiʻi, Bahasa Indonesia) from pushing the grid out. */ .lang-cell .endonym { font-family: var(--font-display); font-size: 19px; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; } .lang-cell .en { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); margin-top: 2px; } .lang-cell .code { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 4px; } @media (max-width: 1000px) { .lang-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .lang-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Two columns on a phone leave about fourteen Latin characters per cell, and the longest endonyms (Lëtzebuergesch, Kreyòl ayisyen) sit right on that edge — a size down keeps them on one line instead of splitting a word. */ .lang-cell { padding: 11px 12px; } .lang-cell .endonym { font-size: 17px; } } /* tutorial */ .tut { display: flex; flex-direction: column; gap: 40px; } .tut-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; } .tut-step:nth-child(even) .tut-text { order: 2; } .tut-num { font-family: var(--font-label); font-size: 12px; color: var(--on-accent); background: var(--accent); width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; margin-bottom: 14px; box-shadow: var(--shadow-sm); } .tut-text h3 { margin-bottom: 10px; } .cmd-inline { font-family: var(--font-mono); font-size: 14px; color: var(--accent-text); background: var(--sunk); border: var(--bw) solid var(--line); border-radius: var(--r-sm); padding: 1px 6px; white-space: nowrap; } /* Real tutorial screenshots — a small Mac window sized to a phone shot, the screenshot resting on a quiet sunk mat (any aspect ratio) */ .tut-step .win { width: 100%; max-width: 384px; margin-inline: auto; } .shot { display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--sunk); } .shot img { max-width: 100%; max-height: 452px; width: auto; height: auto; display: block; border: var(--bw) solid var(--border); border-radius: var(--r-sm); box-shadow: var(--shadow-sm); } /* Steps 1 and 2 are cut-outs: LINE's white chrome was erased so the QR and the group header sit straight on the mat. The frame has to come off with it — a border and drop shadow would trace the empty canvas, not the artwork. */ .shot--cutout img { border: 0; box-shadow: none; border-radius: 0; } /* …but the artwork underneath is dark ink and a green-on-clear QR, and a clear QR inherits whatever it lands on. On the dark mat the captions disappear and the code inverts into light-on-dark, which LINE's own scanner may refuse. So dark mode hands the cut-outs their light ground back. Deliberately a literal and not `--paper` or `--sunk`: both flip with the theme, which is the exact thing being corrected for here. */ [data-theme="phosphor"] .shot--cutout img { background: #EFEBE2; padding: 14px; border-radius: var(--r-sm); } /* Step 6 carries two shots, not one: the !login card and the dashboard it opens. Stacked rather than side by side because the 352px window would shrink a pair to thumbnails, and the vertical order carries the "tap this, get that" reading. The cap is per image, so the taller dashboard doesn't dwarf the card. */ .shot--stack { flex-direction: column; gap: 12px; } .shot--stack img { max-height: 300px; } /* Steps 3–6 ship one shot per palette — LINE has a dark mode of its own, so a single shot would sit in a page of the opposite colour half the time. Keyed off data-theme rather than prefers-color-scheme so an explicit light choice on a dark phone still gets the light shot. Two classes deep to outrank `.shot img`'s display. */ .shot .shot-dark { display: none; } [data-theme="phosphor"] .shot .shot-light { display: none; } [data-theme="phosphor"] .shot .shot-dark { display: block; } @media (max-width: 860px) { .tut-step { grid-template-columns: 1fr; gap: 16px; } .tut-step:nth-child(even) .tut-text { order: 0; } } /* pricing */ .pricing--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1120px) { .pricing--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .pricing--4 { grid-template-columns: 1fr; } } .pricing--4 .plan { row-gap: 12px; } /* the badge drops onto its own line beneath the name — long names no longer wrap around it — and hugs its content instead of stretching full width */ .pricing--4 .plan > .badge { align-self: start; justify-self: start; } .plan-name { line-height: 1.2; } .plan-tokens { font-family: var(--font-mono); font-size: 13px; color: var(--ink); } .plan-approx, .plan-local { font-size: 12.5px; color: var(--ink-3); } /* 4-across: subgrid pins every card's rows to shared baselines, so names, badges, prices, token lines and buttons line up across all four plans. The empty local-price row is still reserved on plans without one, keeping the token rows aligned. Cards fall back to the base flex column below this. */ @media (min-width: 1121px) { .pricing--4 { grid-template-rows: repeat(6, auto) 1fr auto; } .pricing--4 .plan { display: grid; grid-template-columns: 1fr; grid-template-rows: subgrid; grid-row: span 8; } .pricing--4 .plan > .plan-name { grid-row: 1; } .pricing--4 .plan > .badge { grid-row: 2; } .pricing--4 .plan > .plan-price { grid-row: 3; } .pricing--4 .plan > .plan-local { grid-row: 4; } .pricing--4 .plan > .plan-tokens { grid-row: 5; } .pricing--4 .plan > .plan-approx { grid-row: 6; } .pricing--4 .plan > .plan-feats { grid-row: 7; } .pricing--4 .plan > .btn { grid-row: 8; } } /* min() keeps the 300px track from outgrowing a narrower screen — a bare minmax(300px, …) forces the column wider than the page on a 320px phone. */ .tok-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; margin-bottom: 40px; } .tbl-scroll { overflow-x: auto; } .tbl { width: 100%; border-collapse: collapse; background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); } .tbl th { font-family: var(--font-label); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 13px 18px; border-bottom: var(--bw) solid var(--line); } .tbl td { font-size: 15px; color: var(--ink-2); padding: 12px 18px; border-bottom: var(--bw) solid var(--line); } .tbl tr:last-child td { border-bottom: 0; } .tbl .c { text-align: right; } .tbl td.mono { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); } /* plan comparison table */ .cmp th, .cmp td { text-align: center; white-space: nowrap; } .cmp th:first-child, .cmp td:first-child { text-align: left; white-space: normal; min-width: 150px; } .cmp thead th { color: var(--ink); } .cmp .yes { color: var(--accent-text); font-weight: 700; } .cmp .no { color: var(--ink-3); } /* enterprise / about two-up */ .about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } @media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 24px; } } .drives-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 860px) { .drives-grid { grid-template-columns: 1fr; } } .term { font-family: var(--font-display); font-size: 26px; color: var(--accent-text); margin-bottom: 8px; } /* FAQ */ .faq-list { max-width: 760px; } .qa { border-bottom: var(--bw) solid var(--line); } .qa summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 14px; padding: 18px 2px; font-size: 17px; font-weight: 700; color: var(--ink); } .qa summary::-webkit-details-marker { display: none; } .qa summary::before { content: "+"; flex: none; font-family: var(--font-label); font-size: 12px; width: 22px; height: 22px; display: grid; place-items: center; background: var(--sunk); border: var(--bw) solid var(--border); border-radius: var(--r-sm); color: var(--accent-text); } .qa[open] summary::before { content: "–"; background: var(--accent); color: var(--on-accent); } .qa .ans { padding: 0 2px 20px 38px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); } .qa .ans a { color: var(--accent-text); text-decoration: underline; } .qa .ans code { font-family: var(--font-mono); font-size: 13.5px; color: var(--accent-text); } /* commands */ .cmd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; margin-top: 14px; } .cmd { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px; background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-sm); } .cmd > code { font-family: var(--font-mono); font-size: 13.5px; font-weight: 500; color: var(--ink); } .cmd-d { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); } .cmd-d code { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent-text); } /* changelog */ .log { display: flex; flex-direction: column; gap: 20px; max-width: 820px; } .log-entry { background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: 26px; } .log-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .log-ver { font-family: var(--font-display); font-size: 19px; color: var(--accent-text); } .log-date { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); } .log-title { margin-bottom: 8px; } .log-group h4 { font-family: var(--font-label); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin: 16px 0 8px; } .log-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .log-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink-2); } .log-list li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 8px; background: var(--border); border-radius: 1px; } .log-list code { font-family: var(--font-mono); font-size: 13px; color: var(--accent-text); } /* the rest of the history, folded behind the newest release */ .log-more { margin-top: -20px; } /* cancel .log's gap: the stack has to emerge from under the card above */ .log-more[open] { margin-top: 0; display: flex; flex-direction: column; gap: 20px; } .log-more > summary { list-style: none; cursor: pointer; user-select: none; position: relative; padding-top: 32px; display: flex; justify-content: center; } .log-more[open] > summary { padding-top: 0; } .log-more > summary::-webkit-details-marker { display: none; } /* two card bottoms peeking out, like a deck you can deal. Closed state only — once it is open the cards are all on screen and the illusion is just noise. */ .log-more:not([open]) > summary::before, .log-more:not([open]) > summary::after { content: ""; position: absolute; left: 50%; translate: -50% 0; height: 9px; background: var(--surface); border: var(--bw) solid var(--line); border-top: none; border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: var(--shadow-sm); } .log-more:not([open]) > summary::before { top: 0; width: calc(100% - 26px); } .log-more:not([open]) > summary::after { top: 9px; width: calc(100% - 58px); } .log-more-hide { display: none; } .log-more[open] .log-more-show { display: none; } .log-more[open] .log-more-hide { display: inline; } /* contact */ .contact-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } } .contact-method { display: flex; gap: 14px; align-items: flex-start; margin: 18px 0; } .cm-label { font-family: var(--font-label); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; } .contact-method a { color: var(--accent-text); text-decoration: underline; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } } .hp { position: absolute; left: -5000px; width: 1px; height: 1px; opacity: 0; } .resp-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } /* closing CTA */ .cta-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; align-items: center; padding: 40px; } @media (max-width: 860px) { .cta-body { grid-template-columns: 1fr; padding: 26px; } } /* footer */ .foot { border-top: var(--bw) solid var(--line); padding: 56px 0 44px; } .foot-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 32px; } @media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } } .foot-col h4 { font-family: var(--font-label); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; } .foot-col a { display: block; padding: 5px 0; font-size: 14px; color: var(--ink-2); } .foot-col a:hover { color: var(--ink); } .tag-os { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } /* consent banner — rides above the sticky phone CTA when that bar is showing (--cta-h is set by the bar's own script; 0 when hidden or on desktop) */ .consent { position: fixed; left: 16px; right: 16px; z-index: 9500; max-width: 440px; bottom: calc(16px + var(--cta-h, 0px)); transition: bottom var(--dur-base) var(--ease-out); } @media (min-width: 640px) { .consent { left: auto; } } .consent .card { padding: 18px 20px; box-shadow: var(--shadow-lg); } /* Accept and Reject are the same button, deliberately. Making refusal the quieter option is the dark pattern regulators name first, and it is what invalidates the consent the banner just collected. */ .consent-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } .consent-row .btn { width: 100%; } .consent-more { grid-column: 1 / -1; } /* ---------- legal sub-pages (/privacy, /tos, /cookies) ---------- Their own chrome: no scrollspy, no burger, so none of the nav JS has to load. Lived inline in each page until there were three of them. */ .subnav { position: sticky; top: 0; z-index: 40; background: color-mix(in oklab, var(--paper), transparent 8%); backdrop-filter: blur(6px); border-bottom: var(--bw) solid var(--line); } .subnav-in { max-width: var(--max-w); margin-inline: auto; padding-block: 12px; padding-left: calc(var(--gutter) + env(safe-area-inset-left, 0px)); padding-right: calc(var(--gutter) + env(safe-area-inset-right, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .subnav .brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-label); font-size: 13px; color: var(--ink); } .subnav-right { display: flex; align-items: center; gap: 14px; } .subnav-right a.home { font-family: var(--font-mono); font-size: 13px; color: var(--accent-text); } .legal { max-width: 44em; } .legal .doc { padding: 32px; } @media (min-width: 720px) { .legal .doc { padding: 44px; } } .legal h2 { font-family: var(--font-display); font-size: 20px; color: var(--ink); margin: 28px 0 10px; } .legal h2:first-child { margin-top: 0; } .legal p, .legal li { font-size: 15px; line-height: 1.65; color: var(--ink-2); } .legal ul { margin: 8px 0 0; padding-left: 20px; list-style: square; } .legal li { margin: 6px 0; } .legal li::marker { color: var(--accent); } .legal a { color: var(--accent-text); } .legal strong { color: var(--ink); } /* ---------- cookie preference controls (/cookies + account settings) ---------- */ .ck-row { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-top: var(--bw) solid var(--line); } .ck-row:first-child { border-top: 0; padding-top: 0; } .ck-row input[type="checkbox"] { appearance: none; -webkit-appearance: none; margin: 3px 0 0; flex: none; width: 24px; height: 24px; cursor: pointer; border: var(--bw-strong) solid var(--border); border-radius: var(--r-sm); background: var(--surface); display: grid; place-content: center; font-family: var(--font-body); font-size: 15px; line-height: 1; color: transparent; } .ck-row input[type="checkbox"]::after { content: "\2713"; } .ck-row input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .ck-row input[type="checkbox"]:disabled { cursor: not-allowed; background: var(--sunk); color: var(--ink-3); } .ck-name { font-family: var(--font-label); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); display: block; cursor: pointer; } .ck-row input[type="checkbox"]:disabled ~ div .ck-name { cursor: default; } .ck-desc { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 6px 0 0; } /* Save spans the row; Allow and Reject share the one below at identical width. Left to wrap on their own, Reject dropped to a third line and read as the quieter option — the asymmetry that invalidates the consent just collected. */ .ck-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; } .ck-actions .btn { width: 100%; } .ck-actions .btn--primary { grid-column: 1 / -1; } /* ================================================================ ACCOUNT AREA (/account/*) — phone-first consumer dashboard. Additive section: nothing above this line changed. Bottom tab bar on phones, same tabs move into the header from 860px up. ================================================================ */ .acct { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--paper); } .acct-main { flex: 1; width: 100%; max-width: 680px; margin: 0 auto; padding-block: 20px calc(84px + env(safe-area-inset-bottom, 0px)); padding-left: calc(20px + env(safe-area-inset-left, 0px)); padding-right: calc(20px + env(safe-area-inset-right, 0px)); } .acct-main > * + * { margin-top: 16px; } /* header */ .acct-top { position: sticky; top: 0; z-index: 8000; height: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: env(safe-area-inset-top, 0px) 0; padding-left: calc(20px + env(safe-area-inset-left, 0px)); padding-right: calc(20px + env(safe-area-inset-right, 0px)); background: color-mix(in oklab, var(--paper), transparent 8%); backdrop-filter: blur(8px); border-bottom: var(--bw) solid var(--line); } .acct-logout { font-family: var(--font-label); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); padding: 10px 0; } .acct-logout:hover { color: var(--accent-text); } /* tab bar — fixed bottom on phones, inline in header on desktop */ .acct-tabbar { display: flex; align-items: stretch; } .acct-tabbar--bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; background: var(--surface); border-top: var(--bw-strong) solid var(--border); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -6px 20px -14px rgba(26,24,19,0.4); } .acct-tabbar--top { display: none; } .acct-tab { flex: 1; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-family: var(--font-label); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); } .acct-tab .px { opacity: .55; } .acct-tab.is-active { color: var(--accent-text); } .acct-tab.is-active .px { opacity: 1; } @media (min-width: 860px) { .acct-tabbar--bottom { display: none; } .acct-tabbar--top { display: flex; gap: 6px; } .acct-tabbar--top .acct-tab { flex-direction: row; gap: 8px; min-height: 0; padding: 10px 14px; border-radius: var(--r-md); font-size: 10px; } .acct-tabbar--top .acct-tab.is-active { background: color-mix(in oklab, var(--accent), transparent 85%); } .acct-main { padding-bottom: 48px; } } /* solo (logged-out) pages: login / start / success / cancel / goodbye */ .acct--solo { align-items: center; justify-content: center; padding: 28px 16px; } .acct-solo { width: 100%; max-width: 430px; } .acct-solo > * + * { margin-top: 16px; } .acct-solo--wide { max-width: 560px; } .acct-solo--center { text-align: center; } .acct-solo--center .px { margin-inline: auto; } .acct-solo-brand { justify-content: center; font-size: 15px; } .acct-solo-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .acct-or { display: flex; align-items: center; gap: 12px; font-family: var(--font-label); font-size: 9px; text-transform: uppercase; color: var(--ink-3); } .acct-or::before, .acct-or::after { content: ""; flex: 1; height: var(--bw); background: var(--line); } /* generic bits */ .btn--block { display: flex; width: 100%; } .win-body > * + * { margin-top: 14px; } .notice { font-size: 14px; line-height: 1.55; color: var(--ink-2); background: var(--sunk); border: var(--bw) solid var(--line); border-left: 3px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; } .notice--ok { border-left-color: var(--success); background: color-mix(in oklab, var(--success), transparent 88%); } .notice--err { border-left-color: var(--danger); background: color-mix(in oklab, var(--danger), transparent 92%); } .acct-details summary { cursor: pointer; font-family: var(--font-label); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); padding: 10px 0; } .acct-details[open] summary { margin-bottom: 8px; } .acct-details > * + * { margin-top: 12px; } .acct-greet { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .acct-greet .h2 { font-size: 26px; } .plan-chip { font-family: var(--font-label); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-text); background: color-mix(in oklab, var(--accent), transparent 82%); border: var(--bw) solid color-mix(in oklab, var(--accent), transparent 60%); border-radius: 999px; padding: 6px 11px; white-space: nowrap; } .plan-chip--sm { font-size: 8px; padding: 4px 8px; } .idbox { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); background: var(--sunk); border: var(--bw) solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; word-break: break-all; user-select: all; } /* usage meter */ .meter-track { height: 14px; background: var(--sunk); border: var(--bw-strong) solid var(--border); border-radius: 999px; overflow: hidden; } .meter-fill { height: 100%; min-width: 4px; background: var(--accent); background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.28) 0 5px, transparent 5px 10px); border-radius: 999px; transition: width var(--dur-slow) var(--ease-out); } .meter--warn .meter-fill { background-color: var(--warn); } .meter--over .meter-fill { background-color: var(--danger); } .meter-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; } .meter--mini .meter-track { height: 8px; border-width: var(--bw); } /* stat tiles */ .tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 640px) { .tiles { grid-template-columns: repeat(4, 1fr); } } .tile { background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: 14px 12px; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; } .tile-num { font-family: var(--font-display); font-size: 24px; color: var(--ink); line-height: 1.1; } .tile-label { font-family: var(--font-label); font-size: 8.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); } /* 7-day bars (server-rendered, no JS) */ .bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; } .bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; min-width: 0; } .bar-col { flex: 1; width: 100%; max-width: 34px; display: flex; align-items: flex-end; background: var(--sunk); border: var(--bw) solid var(--line); border-radius: var(--r-sm); overflow: hidden; } .bar-fill { width: 100%; background: var(--accent); background-image: repeating-linear-gradient( rgba(255,255,255,0.25) 0 2px, transparent 2px 5px); } .bar-label { font-family: var(--font-label); font-size: 8px; text-transform: uppercase; color: var(--ink-3); } /* PAYG balance + presets */ .acct-balance { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .acct-balance-num { font-family: var(--font-display); font-size: 34px; color: var(--ink); line-height: 1.1; } .acct-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } /* Three across, "≈ 150,000 msgs" wraps to two lines on any phone, so the six tiles drop to two columns far earlier than the other grids do. */ @media (max-width: 560px) { .acct-presets { grid-template-columns: repeat(2, 1fr); } } .acct-preset { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 8px; background: var(--surface); border: var(--bw-strong) solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); text-align: center; transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast); } .acct-preset:hover { transform: translate(-1px,-1px); box-shadow: var(--shadow-md); } .acct-preset:active { transform: translate(2px,2px); box-shadow: none; } .acct-preset-amt { font-family: var(--font-display); font-size: 19px; color: var(--ink); } /* live-rate equivalent in the visitor's own currency; absent for zh/TWD */ .acct-preset-local { font-size: 12px; color: var(--ink-3); } /* typed amount, under the shortcuts */ .acct-custom { margin-top: 18px; padding-top: 16px; border-top: var(--bw) solid var(--line); } .acct-custom-row { display: flex; align-items: center; gap: 10px; } .acct-custom-cur { font-family: var(--font-label); font-size: 12px; color: var(--ink-2); flex: none; } .acct-custom-row .input { flex: 1; min-width: 0; } .acct-custom-row .btn { flex: none; } .acct-custom .small { display: block; margin-top: 9px; } /* transactions */ .tx { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: var(--bw) solid var(--line); } .tx:last-child { border-bottom: 0; } .tx-amt { font-family: var(--font-mono); font-size: 14px; color: var(--ink-2); white-space: nowrap; } .tx-amt--plus { color: var(--accent-text); font-weight: 700; } /* rows: groups + plans */ .acct-grouprow { display: block; padding: 13px 0; border-bottom: var(--bw) solid var(--line); color: inherit; } .acct-grouprow:last-child { border-bottom: 0; } .acct-grouprow:hover strong { color: var(--accent-text); } .acct-grouprow-main { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; } .acct-grouprow > .small { display: block; margin-top: 6px; } .acct-planrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: var(--bw) solid var(--line); } .acct-planrow:last-child { border-bottom: 0; } .acct-planrow > div { min-width: 0; } .acct-planrow .btn { flex-shrink: 0; } @media (max-width: 480px) { .acct-planrow { flex-direction: column; align-items: stretch; } .acct-planrow .btn { width: 100%; } } /* get-started steps */ .acct-step { display: flex; gap: 16px; padding: 16px 0; border-bottom: var(--bw) solid var(--line); } .acct-step:last-child { border-bottom: 0; } .acct-step .tut-num { flex-shrink: 0; margin-bottom: 0; } .acct-step .btn { margin-top: 10px; } /* danger zone (plume has no true red — muted brick, used sparingly) */ .win.danger { border-color: color-mix(in oklab, var(--danger), transparent 45%); } .win.danger .win-bar { background: linear-gradient(var(--surface), color-mix(in oklab, var(--danger), var(--sunk) 82%)); } .win.danger .win-title { color: var(--danger); } .danger-list { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.7; color: var(--ink-2); } .btn--danger { background: var(--danger); color: var(--on-danger); border-color: color-mix(in oklab, var(--danger), #000 25%); } .btn--danger:disabled, .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: var(--shadow-sm); } /* forms inside windows */ .win-body form > * + * { margin-top: 12px; } .input:disabled, .select:disabled { opacity: .55; cursor: not-allowed; } /* profile-bird avatar: greeting badge + Settings picker */ .acct-avatar { padding: 6px; background: var(--surface); border: var(--bw-strong) solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); } .avatar-pick { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; } .avatar-opt { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 8px; background: var(--surface); border: var(--bw-strong) solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); cursor: pointer; text-align: center; transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast); } .avatar-opt:hover { transform: translate(-1px,-1px); box-shadow: var(--shadow-md); } .avatar-opt .px { margin-inline: auto; } .avatar-opt:has(:checked), .avatar-opt.is-selected { border-color: var(--accent); background: color-mix(in oklab, var(--accent), transparent 88%); } .avatar-opt:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } .avatar-name { font-family: var(--font-label); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); } .avatar-none { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--ink-3); background: var(--sunk); border-radius: var(--r-sm); } .avatar-pick:disabled { opacity: .55; } .avatar-pick:disabled .avatar-opt { cursor: not-allowed; } /* ================================================================ PART 5 — site preferences (colour mode + language) and the phone-first refinements. The phone is the purchase surface, so everything here is written mobile-out. ================================================================ */ /* ---------- shared square control (mode toggle, burger) ---------- */ .iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 40px; padding: 0; flex: none; background: var(--surface); border: var(--bw-strong) solid var(--border); border-radius: var(--r-sm); box-shadow: var(--shadow-sm); color: var(--ink); cursor: pointer; transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast); } .iconbtn:hover { transform: translate(-1px,-1px); box-shadow: var(--shadow-md); } .iconbtn:active { transform: translate(2px,2px); box-shadow: none; } /* right-hand cluster: mode + language always reachable, burger only on phones. Re-asserted here (not left to the earlier .nav-burger rule) because .iconbtn sets display and would otherwise win on source order. */ .nav-tools, .acct-tools { display: flex; align-items: center; gap: 8px; flex: none; } .nav-burger { display: none; width: 44px; height: 40px; flex-direction: column; gap: 4px; } @media (max-width: 860px) { .nav-burger { display: inline-flex; } } /* the eight section links plus the tool cluster get tight between 861-1040px */ @media (max-width: 1040px) { .nav-links { gap: 14px; } .nav-links a { font-size: 13px; } } /* Two real links, one per direction, and CSS reveals the one that matches the palette on screen. That keeps the toggle working with JS off and means the icon can never disagree with what the visitor is actually looking at. */ .mode-btn--light { display: none; } [data-theme="phosphor"] .mode-btn--dark { display: none; } [data-theme="phosphor"] .mode-btn--light { display: inline-flex; } /* ---------- language picker ---------- */ .lang-pick { position: relative; } .lang-pick > summary { list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; font-family: var(--font-label); font-size: 10px; letter-spacing: .04em; background: var(--surface); border: var(--bw-strong) solid var(--border); border-radius: var(--r-sm); box-shadow: var(--shadow-sm); color: var(--ink); } .lang-pick > summary::-webkit-details-marker { display: none; } .lang-pick > summary::after { content: "▾"; font-size: 9px; color: var(--ink-3); } .lang-pick[open] > summary { border-color: var(--accent); } .lang-panel { /* right-anchored to the summary, which itself sits ~74px in from the screen edge (burger + gap + page padding). Budget for that or the panel hangs off the left of a small phone. */ position: absolute; right: 0; top: calc(100% + 8px); z-index: 9200; width: min(320px, calc(100vw - 88px)); max-height: min(64vh, 460px); overflow-y: auto; overscroll-behavior: contain; padding: 10px; background: var(--surface); border: var(--bw-strong) solid var(--border); border-radius: var(--r-win); box-shadow: var(--shadow-lg); } .lang-group + .lang-group { margin-top: 6px; padding-top: 6px; border-top: var(--bw) solid var(--line); } .lang-group > h4 { font-family: var(--font-label); font-size: 8.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin: 4px 6px 6px; } .lang-opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; border-radius: var(--r-sm); font-size: 15px; color: var(--ink-2); } .lang-opt:hover { background: var(--sunk); color: var(--ink); } .lang-opt.is-active { background: color-mix(in oklab, var(--accent), transparent 85%); color: var(--accent-text); } .lang-code { flex: none; width: 30px; text-align: center; padding: 3px 0; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--ink-3); background: var(--sunk); border: var(--bw) solid var(--line); border-radius: var(--r-sm); } .lang-opt.is-active .lang-code { color: var(--accent-text); border-color: color-mix(in oklab, var(--accent), transparent 60%); } .lang-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* honest state: the skin has no translated template for this language yet, so picking it would render English. Say so rather than pretend. */ .lang-soon { flex: none; font-family: var(--font-label); font-size: 8px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); } .lang-note { margin: 8px 6px 2px; font-size: 12px; line-height: 1.45; color: var(--ink-3); } /* The same option rows laid flat instead of behind a dropdown, for Settings where every choice can be on screen at once. Multi-column (not grid) so the long Latin group flows into one column and the short scripts into the next — a grid would size its first row to the tallest cell and leave a hole. */ .lang-settings { columns: 2; column-gap: 20px; padding: 8px 6px; background: var(--paper); border: var(--bw-strong) solid var(--border); border-radius: var(--r-sm); } .lang-settings .lang-group { break-inside: avoid; } @media (max-width: 620px) { .lang-settings { columns: 1; } } /* colour-mode row inside menus/footers, where a 3rd "auto" state fits */ .mode-row { display: inline-flex; align-self: flex-start; padding: 3px; gap: 3px; background: var(--sunk); border: var(--bw) solid var(--line); border-radius: var(--r-md); } .mode-opt { min-height: 36px; padding: 0 12px; display: inline-flex; align-items: center; font-family: var(--font-label); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); border-radius: var(--r-sm); } .mode-opt.is-active { background: var(--surface); color: var(--accent-text); box-shadow: var(--shadow-sm); } /* ---------- sticky phone purchase bar ---------- */ .mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; display: none; align-items: center; gap: 10px; padding-block: 10px calc(10px + env(safe-area-inset-bottom, 0px)); padding-left: calc(14px + env(safe-area-inset-left, 0px)); padding-right: calc(14px + env(safe-area-inset-right, 0px)); background: color-mix(in oklab, var(--paper), transparent 4%); backdrop-filter: blur(10px); border-top: var(--bw-strong) solid var(--border); transform: translateY(105%); transition: transform var(--dur-base) var(--ease-out); } .mobile-cta.is-on { transform: none; } .mobile-cta .btn { flex: 1; } .mobile-cta-price { font-family: var(--font-label); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); text-align: center; line-height: 1.35; } @media (max-width: 860px) { .mobile-cta { display: flex; } } /* ---------- phone-first refinements ---------- */ /* iOS Safari zooms the whole page when a focused field is under 16px. That turns every checkout/contact form into a pinch-to-recover moment. */ .input, .textarea, .select { font-size: 16px; } /* thumb targets. Silkscreen's tiny cap-height reads fine but the hit area has to be finger-sized regardless of the label. */ @media (max-width: 860px) { .btn { min-height: 46px; padding: 13px 18px; } .btn--sm { min-height: 40px; font-size: 9.5px; padding: 10px 14px; } .btn--lg { min-height: 52px; font-size: 12px; } .btn--ghost { min-height: 44px; } .foot-col a { padding: 11px 0; } .acct-logout { padding: 13px 0; } .qa summary { padding: 20px 2px; } /* stop iOS grey-flashing every tap target */ a, button, summary, label { -webkit-tap-highlight-color: transparent; } } /* the hero is the first thing a phone sees: copy first, machine after, and never let the pixel headline push a horizontal scrollbar */ @media (max-width: 560px) { .h-hero { font-size: 29px; } h1, .h1 { font-size: 27px; } h2, .h2 { font-size: 23px; } .lede { font-size: 17px; } .hero { padding-top: 34px; } .hero-cta .btn { width: 100%; } .section { padding-block: 44px; } .win-body, .card, .plan { padding: 18px; } .cta-body { padding: 20px; } } @media (max-width: 400px) { :root { --gutter: 20px; } .h-hero { font-size: 25px; } } /* 320px-class phones: brand + mode + language + burger is 30px too wide, and the globe is the one part of it that carries no information the code doesn't */ @media (max-width: 360px) { .lang-pick > summary { gap: 5px; padding: 0 9px; } .lang-pick > summary > svg { display: none; } } /* the featured plan leads on phones — a stacked list buries "Most popular" three cards deep otherwise */ @media (max-width: 640px) { .pricing--4, .pricing { display: flex; flex-direction: column; } .plan--featured { order: -1; } } /* wide tables: full-bleed the scroller so the swipe area is the whole screen, and fade the right edge so there's a visible hint there's more */ @media (max-width: 640px) { .tbl-scroll { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); } .tbl th, .tbl td { padding: 11px 13px; } } /* On a phone the illustration has to earn its height, and only the CRT does — scaling the whole 700x680 stage down to fit made the chat on it too small to read. So crop to the machine instead of shrinking it: the keyboard, mouse and cables sit outside the crop (and the mouse would be sliced by it), so they go. */ @media (max-width: 560px) { .mac-viewport { --mac-scale: .72; --mac-h: 512px; } .mac-kb, .mac-mouse, .mac-cable { display: none; } } @media (max-width: 360px) { .mac-viewport { --mac-scale: .62; } } /* room for the sticky bar so it never sits on the last footer link */ @media (max-width: 860px) { .foot { padding-bottom: 108px; } } /* legal/design subnav: once the mode toggle joins it, the row is one item too wide for a small phone. The wordmark on the left already goes home, so the redundant text link is what gives way. */ @media (max-width: 560px) { .subnav-right a.home { display: none; } } /* ---------- add-to-home-screen sheet ---------- */ /* Bottom sheet on phones (where installing actually happens), centred dialog from 640px up. Sits above the bottom tab bar and the sticky purchase bar. */ .install-sheet { position: fixed; inset: 0; z-index: 9800; display: flex; align-items: flex-end; justify-content: center; } .install-sheet[hidden] { display: none; } .has-sheet, .has-sheet body { overflow: hidden; } .install-scrim { position: absolute; inset: 0; background: rgba(20, 18, 16, .55); } .install-panel { position: relative; width: 100%; max-width: 460px; background: var(--surface); color: var(--ink); border: var(--bw-strong) solid var(--border); border-bottom: 0; border-radius: var(--r-win) var(--r-win) 0 0; box-shadow: var(--shadow-lg); padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px)); max-height: 88dvh; overflow-y: auto; animation: install-rise var(--dur-base) var(--ease-out); } @keyframes install-rise { from { transform: translateY(16px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .install-panel { animation: none; } } .install-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .install-head h2 { margin: 0; } .install-steps { margin: 16px 0 18px; padding-left: 1.3em; } .install-steps li { margin-bottom: 10px; line-height: 1.55; } .install-steps li:last-child { margin-bottom: 0; } .install-later { margin-top: 14px; } @media (min-width: 640px) { .install-sheet { align-items: center; } .install-panel { border-bottom: var(--bw-strong) solid var(--border); border-radius: var(--r-win); padding-bottom: 22px; } }