/* Marketing site stylesheet. Custom-property driven so dark/light swap with no duplicated rules. Tracks the app's warm-paper + sage-green "vibrant" look. */ /* Display serif — matches the app's titles. (Demo/eval build of Recoleta; buy a production license and swap before any paid launch.) */ @font-face { font-family: "Lora"; src: url("/fonts/Lora.ttf") format("truetype"); font-weight: 400 700; /* variable font */ font-style: normal; font-display: swap; } :root { /* Warm paper + sage-green accent to match the app (Tapestry "vibrant"). */ --bg: #faf9f5; --bg-2: #f3f1ea; --bg-3: #e9e5db; --bg-card: #fffefb; --border: rgba(40, 36, 30, 0.10); --border-soft: rgba(40, 36, 30, 0.06); --text: #1c1b18; --text-dim: #5c574e; --text-faint: #8a857a; --accent: #3e9d7a; --accent-2: #57b394; --accent-soft: rgba(62, 157, 122, 0.12); --accent-on: #ffffff; --font-display: "Lora", Georgia, "Times New Roman", serif; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06); --shadow-lg: 0 1px 2px rgba(15, 23, 42, 0.04), 0 24px 60px rgba(15, 23, 42, 0.12); --radius: 14px; --radius-sm: 10px; --radius-xs: 8px; --max-width: 1180px; } /* Dark palette. Activated by: - OS preference, when no manual override is set, OR - [data-theme="dark"] on , written by the palette's theme toggle. The system / light branches stay on the default :root vars. */ :root[data-theme="dark"], :root[data-theme="system"] { color-scheme: dark light; } :root[data-theme="light"] { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0a0b0a; --bg-2: #0f1411; --bg-3: #131915; --bg-card: #131915; --border: rgba(231, 234, 232, 0.08); --border-soft: rgba(231, 234, 232, 0.04); --text: #f1f5f3; --text-dim: #9aa39c; --text-faint: #5e6862; --accent: #4fb491; --accent-2: #6fc9a8; --accent-soft: rgba(79, 180, 145, 0.16); --accent-on: #06251a; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3); --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.55); } } /* Explicit dark override, regardless of OS preference. */ :root[data-theme="dark"] { --bg: #0a0b0a; --bg-2: #0f1411; --bg-3: #131915; --bg-card: #131915; --border: rgba(231, 234, 232, 0.08); --border-soft: rgba(231, 234, 232, 0.04); --text: #f1f5f3; --text-dim: #9aa39c; --text-faint: #5e6862; --accent: #10b981; --accent-2: #34d399; --accent-soft: rgba(16, 185, 129, 0.14); --accent-on: #052e1e; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3); --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.55); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; height: auto; } a { color: var(--accent); text-decoration: none; transition: color 80ms ease; } a:hover { color: var(--accent-2); text-decoration: underline; } /* Selection highlight — matches the app: accent background, white text. */ ::selection { background: var(--accent); color: #fff; } ::-moz-selection { background: var(--accent); color: #fff; } code, pre { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; } code { background: var(--bg-3); padding: 0.12em 0.36em; border-radius: 5px; } em { font-style: italic; color: var(--text); } strong { font-weight: 600; color: var(--text); } .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 28px; } /* ── Reveal-on-scroll ──────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms ease, transform 600ms cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } .reveal-delay { transition-delay: 120ms; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ── Header / nav ───────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border-soft); z-index: 50; padding-top: env(safe-area-inset-top); } .nav { display: flex; align-items: center; justify-content: space-between; height: 64px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.015em; color: var(--text); } .brand:hover { text-decoration: none; color: var(--text); } .brand img { border-radius: 7px; } /* Wordmark in the display serif (like the hero), with "Tapestry" carrying the same accent gradient and "Calendar" in the default text color. */ .brand-name { font-family: var(--font-display); font-weight: 400; font-size: 19px; letter-spacing: -0.005em; } /* Logo light/dark swap (mirrors the app). Default = light mark. */ .brand-dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-light { display: none; } :root:not([data-theme="light"]) .brand-dark { display: block; } } :root[data-theme="light"] .brand-light { display: block; } :root[data-theme="light"] .brand-dark { display: none; } :root[data-theme="dark"] .brand-light { display: none; } :root[data-theme="dark"] .brand-dark { display: block; } .nav-links { display: inline-flex; align-items: center; gap: 28px; } .nav-links a:not(.btn) { color: var(--text-dim); font-size: 14.5px; font-weight: 500; position: relative; padding: 4px 0; transition: color 100ms ease; } .nav-links a:not(.btn):hover { color: var(--text); text-decoration: none; } /* Active section indicator — set by scroll.js via aria-current="true". */ .nav-links a[aria-current="true"] { color: var(--text); font-weight: 600; } .nav-links a[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 1px; background: var(--accent); } /* ── Buttons ────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: var(--radius-xs); font-weight: 600; font-size: 14.5px; border: 1px solid transparent; cursor: pointer; transition: transform 80ms ease, background 80ms ease, border-color 80ms ease, color 80ms ease, box-shadow 80ms ease; white-space: nowrap; letter-spacing: -0.005em; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--accent); color: var(--accent-on); box-shadow: 0 1px 2px rgba(5, 150, 105, 0.3), 0 4px 12px rgba(5, 150, 105, 0.18); } .btn-primary:hover { background: var(--accent-2); transform: translateY(-1px); color: var(--accent-on); box-shadow: 0 1px 2px rgba(5, 150, 105, 0.3), 0 8px 22px rgba(5, 150, 105, 0.32); } .btn-ghost { color: var(--text); border-color: var(--border); background: transparent; } .btn-ghost:hover { background: var(--bg-2); color: var(--text); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); } .btn-lg { padding: 14px 24px; font-size: 15.5px; } /* App Store download button — Apple's convention is a black lockup; a faint ring keeps it legible on dark backgrounds too. */ .btn-appstore { background: #000; color: #fff; border-color: rgba(255, 255, 255, 0.18); } .btn-appstore:hover { background: #161616; } .btn-appstore svg { margin-top: -2px; } /* Scan-to-download QR — only useful on desktop, hidden on phones. */ .qr-download { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 28px; } .qr-box { background: #fff; padding: 10px; border-radius: 12px; box-shadow: var(--shadow-sm); line-height: 0; } .qr-download span { font-size: 12.5px; color: var(--text-dim); } @media (max-width: 640px) { .qr-download { display: none; } } /* ── Pill / eyebrow ─────────────────────────────────────────────────── */ .pill { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--accent); background: var(--accent-soft); margin-bottom: 18px; } .eyebrow { text-transform: uppercase; letter-spacing: 0.16em; font-size: 11.5px; font-weight: 700; color: var(--accent); margin: 0 0 12px; } /* ── Gradient text ──────────────────────────────────────────────────── */ .gradient-text { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 60%, #3b82f6 120%); -webkit-background-clip: text; background-clip: text; color: transparent; /* fallback */ -webkit-text-fill-color: transparent; } /* ── Hero ───────────────────────────────────────────────────────────── */ .hero { position: relative; padding: 80px 0 56px; overflow: hidden; /* Subtle deeper-cream-to-page gradient + hairline so the hero reads as its own zone above "Everything in." (theme-aware via the bg vars). */ background: linear-gradient(180deg, var(--bg-2), var(--bg)); border-bottom: 1px solid var(--border); } @media (min-width: 880px) { .hero { padding: 88px 0 48px; } } .hero-bg { position: absolute; inset: -100px -10% 0; background: radial-gradient(800px 360px at 20% -10%, var(--accent-soft) 0%, transparent 60%), radial-gradient(700px 320px at 100% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 65%); z-index: 0; pointer-events: none; } .hero > .container { position: relative; z-index: 1; } .hero-grid { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; } /* Desktop: two columns. The CTAs are a separate grid child (so mobile can slot the image between the copy and the buttons), so pin them back under the copy in the left column and let the image span both rows on the right. row-gap:0 keeps the buttons tight under the copy — the lede's own 30px bottom margin is the visual gap, same as when the CTAs lived inside the copy. */ @media (min-width: 880px) { .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 72px; row-gap: 0; } .hero-grid .hero-copy { grid-column: 1; grid-row: 1; } .hero-grid .hero-ctas { grid-column: 1; grid-row: 2; align-self: start; } .hero-grid .hero-mock { grid-column: 2; grid-row: 1 / 3; align-self: center; } } .hero-copy h1 { font-family: var(--font-display); font-size: clamp(40px, 5.5vw, 64px); line-height: 1.04; letter-spacing: -0.015em; margin: 0 0 22px; font-weight: 400; } .lede { font-size: 18px; color: var(--text-dim); margin: 0 0 30px; max-width: 58ch; line-height: 1.65; } /* Hook line above the explanatory lede: muted gray (matches the body paragraph) so it doesn't compete with the ink headline. */ .lede-hook { font-size: 22px; font-weight: 500; color: var(--text-dim); letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 14px; } .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .hero-note { font-size: 13px; color: var(--text-faint); margin: 0; } /* ── Hero funnel graphic ──────────────────────────────────────────────── A self-framed diagram (source cards → shared week view), not a browser screenshot — so no window chrome. width/height:auto keeps the tall image's aspect ratio intact (no flatten/stretch), and no max-height clamps it. */ .hero-mock { position: relative; } .hero-funnel { display: block; width: 100%; height: auto; /* On desktop the hero column is roomy; cap the diagram so it doesn't tower over the copy, while staying centered. Portrait aspect is preserved. */ max-width: 440px; margin: 0 auto; } @media (min-width: 880px) { .hero-funnel { max-width: none; } } /* ── Section heads ──────────────────────────────────────────────────── */ .section-head { text-align: center; margin: 0 auto 56px; max-width: 64ch; } .section-head h2 { font-family: var(--font-display); font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.015em; line-height: 1.13; margin: 0 0 14px; font-weight: 400; } .section-head .lede { margin-left: auto; margin-right: auto; } /* ── Features ───────────────────────────────────────────────────────── */ .features { padding: 72px 0 40px; } /* ── How it works — 3-step narrative (design/marketing handoff) ──────── Namespaced hiw-* so it can't clash with the older ".steps" list section below; colors map to the site's custom properties for dark-mode support. */ /* scroll-margin lands the #how anchor ~20px above the first card, clear of the sticky header (tuned empirically: settled gap = margin − 83). */ .hiw-steps { display: flex; flex-direction: column; gap: 28px; margin-top: 48px; text-align: left; scroll-margin-top: 103px; } .hiw-step { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; background: var(--bg-card); border-radius: 26px; box-shadow: var(--shadow); padding: 52px 56px; } .hiw-step:nth-child(even) .hiw-vis { order: -1; } .hiw-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } .hiw-num { width: 26px; height: 26px; border-radius: 99px; background: var(--accent); color: var(--accent-on); display: grid; place-items: center; font-size: 13px; font-weight: 700; } .hiw-step h3 { font-family: var(--font-display); font-weight: 400; font-size: 32px; margin: 14px 0 12px; letter-spacing: -0.012em; } .hiw-step > div > p { margin: 0; color: var(--text-dim); font-size: 17px; line-height: 1.6; text-wrap: pretty; } .hiw-step p b { color: var(--text); font-weight: 600; } .hiw-link { display: inline-block; margin-top: 16px; font-weight: 600; font-size: 15px; color: var(--accent); } .hiw-link:hover { text-decoration: underline; } /* recessed visual panel. min-width:0 on both grid children lets the tracks shrink below their content's min-size — otherwise the nowrap webcal:// pills force a track wider than the card and the panel overflows the viewport. */ .hiw-step > div { min-width: 0; } .hiw-vis { border-radius: 18px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--border); padding: 22px; min-width: 0; } .hiw-rows { display: flex; flex-direction: column; gap: 10px; } .hiw-row { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border-radius: 12px; padding: 11px 14px; box-shadow: var(--shadow-sm); font-size: 14px; font-weight: 600; color: var(--text); } .hiw-row small { color: var(--text-faint); font-weight: 500; margin-left: auto; font-size: 12px; } .hiw-dot { width: 11px; height: 11px; border-radius: 99px; flex-shrink: 0; } .hiw-paste { border: 1.5px dashed var(--border); border-radius: 12px; padding: 12px 14px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; line-height: 1.6; color: var(--text-faint); margin-top: 12px; } .hiw-chips { display: flex; flex-wrap: wrap; gap: 6px; } .hiw-chip { display: inline-flex; align-items: center; background: var(--accent-soft); color: var(--accent); border-radius: 99px; padding: 7px 11px; font-size: 12px; font-weight: 600; white-space: nowrap; } .hiw-evlabel { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); margin: 16px 0 8px; } .hiw-ev { background: #7b7fe0; border-radius: 12px; border-top: 4px solid var(--accent); padding: 12px 15px; color: #fff; } .hiw-ev-title { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 700; } .hiw-jbadge { width: 20px; height: 20px; border-radius: 99px; background: #fff; color: #7b7fe0; font-size: 12px; font-weight: 800; display: inline-grid; place-items: center; flex-shrink: 0; } .hiw-ev-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; opacity: 0.95; margin-top: 5px; } .hiw-evtag { background: rgba(255, 255, 255, 0.25); border-radius: 99px; padding: 2px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; } .hiw-urlpill { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--accent); background: var(--accent-soft); border-radius: 99px; padding: 9px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hiw-subrow { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow-sm); font-size: 14px; font-weight: 600; margin-top: 10px; color: var(--text); } .hiw-ok { margin-left: auto; color: var(--accent); font-size: 13px; font-weight: 700; } /* Step 3 "feeds out": one Tapestry app → many private subscriptions. */ .feeds { display: flex; align-items: center; gap: 0; } .feeds-app { flex-shrink: 0; width: 132px; text-align: center; box-sizing: border-box; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 18px 12px 14px; } /* No `display` here — it would override .brand-dark{display:none} (equal specificity, later in the file) and show BOTH the light and dark marks. Let the brand toggle own visibility; text-align/margin handle centering. */ .feeds-mark { margin: 0 auto 10px; width: 46px; height: 46px; } .feeds-word { font-family: var(--font-display); font-size: 18px; line-height: 1.14; color: var(--text); letter-spacing: -0.01em; } .feeds-word span { display: block; color: var(--accent); } .feeds-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; } .feeds-dots i { width: 7px; height: 7px; border-radius: 99px; } .feeds-links { width: 46px; flex-shrink: 0; align-self: stretch; overflow: visible; } .feeds-links path { fill: none; stroke: var(--accent); stroke-width: 1.6; opacity: 0.5; } .feeds-down { display: none; width: 22px; height: 28px; color: var(--accent); opacity: 0.55; } .feeds-outs { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; } .feeds-card { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 11px 14px; } /* Arrowhead at each card's left edge (where a connector lands) — a CSS triangle, anchored per-card so it always centers and never distorts, unlike an SVG marker inside the non-uniformly-scaled connector canvas. */ .feeds-card::before { content: ""; position: absolute; left: -6px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid var(--accent); opacity: 0.55; } .feeds-title { font-size: 14.5px; font-weight: 700; color: var(--text); letter-spacing: -0.005em; } .feeds-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 3px; font-size: 12.5px; color: var(--text-dim); } .feeds-ok { color: var(--accent); font-weight: 700; white-space: nowrap; flex-shrink: 0; } @media (max-width: 600px) { /* More room for the how-it-works visuals on phones. */ .hiw-step { padding: 28px 20px; } .hiw-vis { padding: 16px; } /* Step 1: source cards stack into a single full-width column. Uses .hiw-vis.sources (specificity 0,2,0) so it beats the base .sources grid rule, which is defined later in the file. */ .hiw-vis.sources { grid-template-columns: 1fr; } /* Step 3: the Tapestry app becomes a full-width horizontal strip (mark · wordmark · dots), then a down-arrow, then the destination cards stacked. The side connectors don't read in a vertical layout. */ .feeds { flex-direction: column; align-items: stretch; gap: 12px; } .feeds-app { width: 100%; max-width: none; padding: 15px 18px; display: flex; align-items: center; gap: 14px; text-align: left; } .feeds-mark { margin: 0; } .feeds-word { font-size: 18px; } .feeds-dots { margin-top: 0; margin-left: auto; } .feeds-links, .feeds-card::before { display: none; } .feeds-down { display: block; align-self: center; } } /* Step 1 "everything in" — a 2×2 grid of the source kinds. */ .sources { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .src-card { min-width: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 13px 14px; } .src-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; } .src-badge { flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.02em; display: inline-grid; place-items: center; } .src-title { font-size: 13.5px; font-weight: 700; color: var(--text); letter-spacing: -0.005em; } .src-body { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .src-mut { color: var(--text-dim); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .src-ok { color: var(--accent); font-size: 12px; font-weight: 700; white-space: nowrap; flex-shrink: 0; } .src-pill { display: block; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; color: var(--accent); background: var(--accent-soft); border-radius: 99px; padding: 7px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .src-quote { border-left: 2px solid var(--border); padding-left: 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); } .src-quote mark { background: #fdeaa6; color: #4a3d00; border-radius: 3px; padding: 0 3px; font-weight: 600; } .src-xls { width: 100%; border-collapse: collapse; font-size: 11.5px; } .src-xls td { padding: 4px 6px; color: var(--text-dim); border-top: 1px solid var(--border-soft); } .src-xls tr:first-child td { border-top: 0; } .src-xls td:first-child { color: var(--text); font-weight: 500; white-space: nowrap; } @media (max-width: 880px) { .hiw-step { grid-template-columns: 1fr; padding: 34px 30px; gap: 28px; } .hiw-step:nth-child(even) .hiw-vis { order: 0; } } /* ── Capabilities ("everything you wanted your calendar to do") ───────── */ .capabilities { padding: 48px 0 10px; } .cap-big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; } .cap-small { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; } .cap-card { background: var(--bg-card); border-radius: 18px; box-shadow: var(--shadow); padding: 22px 24px; text-align: left; } /* Feature trio: soft green tint, no drop shadow. */ .cap-card-lg { background: var(--accent-soft); box-shadow: none; padding: 28px 30px; } .cap-card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); } .cap-card-lg h3 { color: var(--accent); } .cap-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-dim); } .cap-card p b { color: var(--text); font-weight: 600; } /* "Set events as tasks" mini task list: two checkbox rows over the caption. */ .cap-tasks { display: flex; flex-direction: column; gap: 9px; margin: 4px 0 12px; } .cap-task { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--text); } .cap-check { width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0; border: 1.5px solid var(--text-faint); background: var(--bg-card); } @media (max-width: 900px) { .cap-big { grid-template-columns: 1fr; } .cap-small { grid-template-columns: repeat(2, 1fr); } } /* ── Helpful guides ──────────────────────────────────────────────────── */ .guides-section { padding: 80px 0 10px; } .guides-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; } .guide-card { display: flex; flex-direction: column; gap: 10px; background: var(--bg-card); border-radius: 18px; box-shadow: var(--shadow); padding: 24px; text-decoration: none; color: var(--text); transition: box-shadow 150ms ease, transform 150ms ease; } .guide-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); text-decoration: none; } .guide-card h3 { margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; } .guide-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-dim); flex: 1; } .guide-link { font-weight: 600; font-size: 14px; color: var(--accent); } .guides-more { text-align: center; margin: 34px auto 0; font-size: 15px; color: var(--text-dim); max-width: 60ch; } .guides-more a { color: var(--accent); font-weight: 600; } @media (max-width: 900px) { .guides-grid { grid-template-columns: 1fr; } } /* ── FAQ ───────────────────────────────────────────────────────────── */ .faq { padding: 112px 0; background: linear-gradient(180deg, var(--bg), var(--bg-2)); border-top: 1px solid var(--border-soft); } .faq-groups { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 38px; } .faq-group-title { font-size: 12.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 12px; } .faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; } .faq details { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px 22px; transition: border-color 200ms ease, box-shadow 200ms ease; } .faq details[open] { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: var(--shadow-sm); } .faq summary { cursor: pointer; font-weight: 600; font-size: 15.5px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; letter-spacing: -0.005em; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 22px; font-weight: 300; color: var(--text-faint); /* Rotate 45° on open so the `+` reads as an `×`. That gives us a smooth visual transition without swapping the glyph mid-animation. */ transform: rotate(0deg); transform-origin: center; transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms ease; line-height: 1; display: inline-block; } .faq details[open] summary::after { transform: rotate(45deg); color: var(--accent); } /* Fade the answer in as the details opens. Native

doesn't transition `height: auto`, so we accept the instant height change and layer in a subtle opacity + translate-y for visual smoothness. */ .faq details[open] > *:not(summary) { animation: faqAnswerIn 240ms cubic-bezier(0.16, 1, 0.3, 1); } @keyframes faqAnswerIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .faq details[open] > *:not(summary) { animation: none; } .faq summary::after { transition: none; } } .faq p { margin: 14px 0 0; color: var(--text-dim); font-size: 14.5px; line-height: 1.65; } .faq p a { font-weight: 500; } /* ── CTA ──────────────────────────────────────────────────────────── */ .cta { padding: 112px 0; } /* Dark forest-green band so the page closes with weight. */ .cta-inner { text-align: left; background: oklch(32% 0.045 165); border-radius: var(--radius); padding: 60px 56px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 48px; } .cta-copy { flex: 1; min-width: 0; } .cta-btns { justify-content: flex-start; margin-bottom: 0; } /* QR sits on the right of the band here (not the centered hero variant). */ .cta-qr { margin-top: 0; flex-shrink: 0; } /* Light label on the dark band — matches the body copy, not the hero's dim. */ .cta-qr span { color: oklch(85% 0.03 165); } .cta h2 { font-family: var(--font-display); margin: 0 0 12px; font-size: clamp(28px, 3.5vw, 40px); letter-spacing: -0.015em; font-weight: 400; color: #fff; } .cta p { margin: 0 0 28px; color: oklch(85% 0.03 165); max-width: 46ch; font-size: 16.5px; } /* Inverted button on the dark band: white pill, deep-green text. */ .cta .btn-primary { background: #fff; color: #2c715a; box-shadow: none; } .cta .btn-primary:hover { background: #e2f2ec; color: #2c715a; box-shadow: none; } /* ── Footer ───────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--border-soft); padding: 36px 0; background: var(--bg-2); } .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .brand-footer span { font-size: 15px; } .footer-links { display: inline-flex; gap: 22px; font-size: 14px; color: var(--text-dim); } .footer-links a { color: var(--text-dim); } .footer-links a:hover { color: var(--text); } .footer-copyright { margin-top: 18px; font-size: 13px; color: var(--text-faint); } /* ──────────────────────────────────────────────────────────────────── Mobile / small-screen pass. The desktop layout above assumes a wide canvas; everything below tightens spacing, swaps the inline nav for a hamburger that opens the palette, simplifies the hero mock, and turns the palette into a bottom sheet. ──────────────────────────────────────────────────────────────────── */ /* Hamburger button is hidden by default — only shows on mobile. */ .mobile-menu-btn { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); cursor: pointer; transition: background 80ms ease, border-color 80ms ease; } .mobile-menu-btn:hover, .mobile-menu-btn:focus-visible { background: var(--bg-3); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); outline: none; } .mobile-menu-btn svg { display: block; } /* Safe-area insets so content doesn't sit under notches. */ body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* No-zoom on iOS form inputs (fires when font-size < 16px). */ .palette-input { font-size: max(16px, 16px); } /* ── Tablet (≤880px) ───────────────────────────────────────────────── */ @media (max-width: 880px) { .container { padding: 0 20px; } .features, .faq, .cta { padding: 88px 0; } .hero { padding: 88px 0 64px; } } /* ── Phones (≤640px) ───────────────────────────────────────────────── */ @media (max-width: 640px) { :root { --radius: 12px; --radius-sm: 9px; } .container { padding: 0 16px; } /* Header swaps to: brand · hamburger · CTA. */ .nav { height: 56px; } .nav-links { gap: 8px; } .nav-links a:not(.btn) { display: none; } .kbd-hint { display: none; } .mobile-menu-btn { display: inline-flex; } .nav-links .btn { padding: 9px 14px; font-size: 14px; } /* Hero: show the real app screenshot below the copy. Straighten it (the desktop -1deg tilt + 0.92 scale would clip/cramp inside the phone grid) and restore the grid gap so it sits cleanly under the CTAs. */ .hero { padding: 56px 0 48px; } /* Tighten copy → image → buttons on phones. The last lede's 30px bottom margin stacked on top of the grid gap left a big void before the image. */ .hero-grid { gap: 22px; } .hero-copy .lede:last-child { margin-bottom: 0; } .hero-mock { display: block; transform: none; } .hero-copy h1 { font-size: clamp(34px, 9vw, 44px); line-height: 1.08; } .lede { font-size: 16.5px; } /* Stack CTAs full-width — three side-by-side buttons can't fit their labels on a phone (nowrap made them overflow their boxes). */ .hero-ctas { flex-direction: column; align-items: stretch; } .hero-ctas .btn { width: 100%; } /* "See how it works" is redundant on a phone (the sections are right there as you scroll) — drop it so the primary + App Store CTAs stand out. */ .hide-on-mobile { display: none; } .pill { margin-bottom: 14px; } .features, .faq, .cta { padding: 64px 0; } .section-head { margin-bottom: 36px; } .section-head h2 { font-size: clamp(26px, 7vw, 32px); } .section-head .lede { font-size: 15.5px; } /* FAQ: a touch more breathing room than default. */ .faq details { padding: 16px 18px; } .faq summary { font-size: 15px; } /* CTA: shorter + re-centered on phones (QR is hidden here, so the two-column web layout collapses back to the stacked centered look). */ .cta-inner { flex-direction: column; text-align: center; padding: 44px 22px; } .cta h2 { font-size: clamp(24px, 7vw, 30px); } .cta p { font-size: 15.5px; margin-left: auto; margin-right: auto; } .cta-btns { justify-content: center; } /* Footer: stack vertically, left-aligned. */ .footer-inner { flex-direction: column; align-items: flex-start; gap: 14px; } .footer-links { flex-wrap: wrap; gap: 14px 18px; } /* Buttons: bigger tap target. */ .btn { min-height: 42px; } .btn-lg { min-height: 48px; padding: 12px 20px; } /* Article tweaks for narrow viewports. */ .article { padding-top: 56px; padding-bottom: 80px; } .article h1 { font-size: clamp(30px, 8vw, 38px); line-height: 1.12; } .article .lede { font-size: 17px; } .article h2 { font-size: clamp(20px, 5.5vw, 24px); margin-top: 36px; } .article p, .article li { font-size: 15.5px; } .article .step { padding-left: 48px; } .article .step::before { width: 32px; height: 32px; font-size: 14px; } .article .callout { padding: 14px 16px; } .article pre { padding: 12px 14px; font-size: 13px; } /* Blog index: tighter, stack post meta + body. */ .blog-index { padding-top: 56px; padding-bottom: 80px; } .post-list .post { padding: 22px 0; gap: 10px; } .post-meta { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 12px; } .post-body h2 { font-size: 19px; } .post-body p { font-size: 14.5px; } /* Mock window in CTA — already display:none above. */ /* Palette becomes a bottom sheet so it's thumb-reachable. */ .palette-backdrop { padding: 0; align-items: end; } .palette { width: 100vw; max-height: 88vh; border-radius: 18px 18px 0 0; border-left: 0; border-right: 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); } .palette-input { padding: 16px 18px; font-size: 16px; } .palette-foot { font-size: 11px; } .palette-foot kbd { padding: 1px 5px; } } /* ── Very small (≤380px, iPhone SE / Mini) ─────────────────────────── */ @media (max-width: 380px) { .container { padding: 0 14px; } .hero-copy h1 { font-size: 30px; } .section-head h2 { font-size: 24px; } } /* Landscape phones: drop the giant top padding so the hero fits. */ @media (max-width: 880px) and (max-height: 480px) { .hero { padding: 36px 0; } .features, .faq, .cta { padding: 48px 0; } } /* ── Blog (article pages) ──────────────────────────────────────────── */ .article { /* Vertical only — leave horizontal padding to .container so the article never touches the screen edge (esp. on mobile, where max-width doesn't create a gutter). */ padding-top: 72px; padding-bottom: 96px; max-width: 760px; margin: 0 auto; } .article-meta { font-size: 13px; color: var(--text-faint); margin-bottom: 16px; display: inline-flex; align-items: center; gap: 10px; } .article-meta .pill { margin-bottom: 0; } .article h1 { font-family: var(--font-display); font-size: clamp(34px, 5vw, 50px); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 18px; font-weight: 400; } .article .lede { font-size: 19px; color: var(--text-dim); max-width: none; margin-bottom: 36px; } .article h2 { font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.02em; margin: 48px 0 14px; font-weight: 700; line-height: 1.25; } .article h3 { font-size: 18px; margin: 28px 0 10px; font-weight: 700; letter-spacing: -0.01em; } .article p { color: var(--text-dim); margin: 0 0 18px; line-height: 1.75; } .article p strong { color: var(--text); } .article ol, .article ul { color: var(--text-dim); padding-left: 24px; line-height: 1.75; } .article li { margin: 6px 0; } .article li > strong { color: var(--text); } .article blockquote { margin: 22px 0; padding: 14px 20px; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--text); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 15px; } .article pre { background: var(--bg-3); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 16px 18px; font-size: 13.5px; overflow-x: auto; } .article hr { border: none; border-top: 1px solid var(--border-soft); margin: 40px 0; } .article .callout { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px 22px; margin: 22px 0; } .article .callout-title { font-weight: 700; font-size: 14px; letter-spacing: -0.005em; margin: 0 0 6px; color: var(--text); } .article .step { margin: 24px 0; padding-left: 56px; position: relative; min-height: 40px; } .article .step::before { counter-increment: article-step; content: counter(article-step); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-on); display: grid; place-items: center; font-weight: 700; font-size: 16px; box-shadow: 0 4px 12px -2px var(--accent-soft); } .article .step h3 { margin-top: 0; } .article ol.article-steps { counter-reset: article-step; list-style: none; padding-left: 0; margin: 0; } /* DO NOT zero-out padding on the step

— it carries the left padding that reserves space for the absolutely-positioned counter circle. */ /* Blog index */ .blog-index { /* Vertical only — horizontal gutter comes from .container. */ padding-top: 72px; padding-bottom: 96px; } .blog-index h1 { font-size: clamp(34px, 5vw, 48px); letter-spacing: -0.025em; margin: 0 0 14px; font-weight: 800; } .blog-index .lede { max-width: 60ch; margin-bottom: 40px; } /* Editorial-style article list: a hairline divider stack with a small meta column on the left (chip + date + read-time) and the title + excerpt + CTA on the right. Collapses to a single column on mobile. */ .post-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border-soft); } .post-list > li { border-bottom: 1px solid var(--border-soft); } .post-list .post { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 28px 0; color: inherit; transition: padding-left 200ms cubic-bezier(0.16, 1, 0.3, 1); position: relative; } @media (min-width: 720px) { .post-list .post { grid-template-columns: 200px 1fr; gap: 36px; align-items: start; padding: 32px 0; } } .post-list .post:hover { text-decoration: none; color: inherit; padding-left: 8px; } .post-list .post::before { content: ""; position: absolute; left: 0; top: 32px; bottom: 32px; width: 3px; border-radius: 2px; background: var(--accent); opacity: 0; transition: opacity 200ms ease; } .post-list .post:hover::before { opacity: 1; } .post-meta { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-faint); } @media (min-width: 720px) { .post-meta { padding-top: 4px; } } .post-tag { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); background: var(--accent-soft); padding: 4px 9px; border-radius: 5px; margin-bottom: 2px; } .post-meta time { color: var(--text-dim); font-weight: 500; } .post-readtime { color: var(--text-faint); } .post-body h2 { margin: 0 0 10px; font-size: clamp(20px, 2.4vw, 24px); font-weight: 700; letter-spacing: -0.018em; line-height: 1.25; color: var(--text); transition: color 120ms ease; } .post-list .post:hover .post-body h2 { color: var(--accent); } .post-body p { margin: 0 0 14px; color: var(--text-dim); font-size: 15px; line-height: 1.65; max-width: 60ch; } .post-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--accent); } .post-list .post:hover .post-cta { color: var(--accent-2); } .breadcrumb { font-size: 13.5px; color: var(--text-faint); margin-bottom: 12px; } .breadcrumb a { color: var(--text-dim); } .breadcrumb a:hover { color: var(--text); text-decoration: none; } .breadcrumb-sep { margin: 0 6px; } /* ── Command palette (⌘K) ──────────────────────────────────────────── */ .kbd-hint { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px 5px 7px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-2); color: var(--text-dim); font-size: 12px; font-weight: 600; cursor: pointer; transition: background 80ms ease, color 80ms ease, border-color 80ms ease; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .kbd-hint:hover { background: var(--bg-3); color: var(--text); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); } @media (max-width: 600px) { .kbd-hint { display: none; } } .palette-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 100; display: grid; place-items: start center; padding-top: 12vh; opacity: 0; pointer-events: none; transition: opacity 140ms ease; } .palette-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; } .palette { width: min(560px, calc(100vw - 32px)); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; transform: translateY(-8px) scale(0.98); transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; } .palette-backdrop[data-open="true"] .palette { transform: none; } .palette-input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); padding: 18px 20px; font-size: 16px; font-family: inherit; border-bottom: 1px solid var(--border-soft); } .palette-input::placeholder { color: var(--text-faint); } .palette-list { list-style: none; margin: 0; padding: 6px; max-height: 56vh; overflow-y: auto; } .palette-group-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-faint); padding: 10px 12px 4px; } .palette-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; color: var(--text); font-size: 14.5px; user-select: none; } .palette-item .palette-icon { width: 22px; text-align: center; font-size: 16px; flex-shrink: 0; } .palette-item .palette-label { flex: 1; min-width: 0; } .palette-item .palette-suffix { font-size: 12px; color: var(--text-faint); flex-shrink: 0; } .palette-item[aria-selected="true"] { background: var(--accent-soft); color: var(--text); } .palette-item[aria-selected="true"] .palette-suffix { color: var(--accent); } .palette-item .palette-check { color: var(--accent); font-weight: 700; } .palette-empty { text-align: center; color: var(--text-faint); font-size: 13.5px; padding: 28px 12px; } .palette-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--border-soft); background: var(--bg-2); font-size: 11.5px; color: var(--text-faint); } .palette-foot kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg-card); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--text-dim); margin: 0 2px; } @media (prefers-reduced-motion: reduce) { .palette-backdrop, .palette { transition: none; } }