:root { color-scheme: light; /* Exact sticky-nav height, measured by JS; 4.5rem is the pre-JS fallback. */ --nav-h: 4.5rem; --ink: #0f1b2d; --ink-soft: #3d4f66; --paper: #f4f8fc; --line: rgba(15, 27, 45, 0.1); --blue: #2f6fe0; --blue-deep: #1d4fb8; --cyan: #4ec4e8; --white: #ffffff; --device: #0b0b10; --slot: #e4edf7; --slot-line: rgba(47, 111, 224, 0.18); --radius-device: 2.4rem; --max: 1120px; --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --nav-bg: rgba(255, 255, 255, 0.92); --nav-border: rgba(15, 27, 45, 0.08); --nav-wrap-top: rgba(238, 245, 252, 0.92); --nav-wrap-mid: rgba(238, 245, 252, 0.55); --surface: rgba(255, 255, 255, 0.62); --surface-strong: rgba(255, 255, 255, 0.78); --body-bg: radial-gradient(1200px 600px at 85% -10%, rgba(78, 196, 232, 0.28), transparent 55%), radial-gradient(900px 500px at -10% 20%, rgba(47, 111, 224, 0.18), transparent 50%), linear-gradient(180deg, #eef5fc 0%, var(--paper) 38%, #f7fafd 100%); --shadow-soft: 0 10px 30px rgba(15, 27, 45, 0.06); --shadow-card: 0 12px 32px rgba(15, 27, 45, 0.06); --compare-head: rgba(47, 111, 224, 0.06); --theme-switch-bg: rgba(15, 27, 45, 0.05); } html[data-theme="dark"] { color-scheme: dark; --ink: #e8eef8; --ink-soft: #9aabc2; --paper: #0b1220; --line: rgba(232, 238, 248, 0.12); --blue: #5b8cff; --blue-deep: #8bb0ff; --cyan: #5ed0f0; --white: #ffffff; --slot: #162033; --slot-line: rgba(91, 140, 255, 0.28); --nav-bg: rgba(18, 26, 42, 0.9); --nav-border: rgba(232, 238, 248, 0.1); --nav-wrap-top: rgba(11, 18, 32, 0.92); --nav-wrap-mid: rgba(11, 18, 32, 0.55); --surface: rgba(18, 26, 42, 0.72); --surface-strong: rgba(22, 32, 51, 0.88); --body-bg: radial-gradient(1100px 560px at 85% -10%, rgba(91, 140, 255, 0.18), transparent 55%), radial-gradient(900px 500px at -10% 18%, rgba(94, 208, 240, 0.1), transparent 50%), linear-gradient(180deg, #0a101c 0%, var(--paper) 42%, #0d1524 100%); --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.28); --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.28); --compare-head: rgba(91, 140, 255, 0.12); --theme-switch-bg: rgba(232, 238, 248, 0.06); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Sections land just below the sticky nav. */ scroll-padding-top: var(--nav-h, 4.5rem); /* Landing-page paging: scrolling snaps to the next section instead of free-scrolling. */ scroll-snap-type: y mandatory; } /* Each section is a “page”: its top edge snaps into place. */ .hero, .feature, .pricing, .faq, .contact { scroll-snap-align: start; } body { margin: 0; color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.55; /* clip instead of hidden: hidden turns into a scroll container, which can interfere with sticky positioning and Safari repainting. */ overflow-x: clip; background: var(--body-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } @supports not (overflow: clip) { body { overflow-x: hidden; } } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { color: var(--blue-deep); } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .skip { position: absolute; left: -999px; top: 0; } .skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--white); padding: 0.5rem 0.75rem; } .shell { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; } /* —— Nav —— */ .nav-wrap { position: sticky; top: 0; z-index: 50; padding: 0.85rem 0 0.35rem; background: linear-gradient(180deg, var(--nav-wrap-top) 0%, var(--nav-wrap-mid) 70%, transparent 100%); } .nav { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.4rem 0.4rem 0.7rem; border: 1px solid var(--nav-border); border-radius: 999px; background: var(--nav-bg); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, var(--shadow-soft); } .brand { display: inline-flex; align-items: center; gap: 0.55rem; padding-right: 0.35rem; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.03em; text-decoration: none; color: var(--ink); } .brand:hover { color: var(--ink); } .brand img { width: 28px; height: 28px; border-radius: 7px; } /* Theme-adaptive brand logo — light icon on light theme, dark icon on dark theme, matching the app icon's luminosity appearance. data-theme is set by the inline script before first paint, so there's no flash. */ .brand img[data-theme-logo="dark"] { display: none; } html[data-theme="dark"] .brand img[data-theme-logo="light"] { display: none; } html[data-theme="dark"] .brand img[data-theme-logo="dark"] { display: block; } .nav-links { display: flex; align-items: center; justify-content: space-evenly; flex: 1 1 auto; flex-wrap: nowrap; gap: 0; margin: 0; min-width: 0; } .nav-links a { padding: 0.42rem 0.55rem; border-radius: 999px; font-size: 0.9rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-soft); text-decoration: none; white-space: nowrap; transition: background 160ms ease, color 160ms ease; } .nav-links a:hover { color: var(--ink); background: rgba(47, 111, 224, 0.08); } .nav-actions { display: inline-flex; align-items: center; gap: 0.45rem; margin-left: 0; flex-shrink: 0; } .nav-cta { flex-shrink: 0; padding: 0.48rem 0.95rem; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 0.84rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; box-shadow: 0 6px 16px rgba(15, 27, 45, 0.16); transition: transform 160ms ease, background 160ms ease; } .nav-cta:hover { color: var(--white); background: #1a2a42; transform: translateY(-1px); } .nav-ph { flex-shrink: 0; display: inline-flex; line-height: 0; border-radius: 6px; overflow: hidden; transition: opacity 160ms ease; } .nav-ph:hover { opacity: 0.88; } .nav-ph img { display: block; width: auto; height: 30px; } html[data-theme="dark"] .nav-cta { background: #e8eef8; color: #0b1220; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28); } html[data-theme="dark"] .nav-cta:hover { background: #ffffff; color: #0b1220; } .theme-switch { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; } .theme-switch__toggle { display: inline-grid; place-items: center; width: 2.15rem; height: 2.15rem; padding: 0; border: 0; border-radius: 999px; background: var(--theme-switch-bg); color: var(--ink-soft); cursor: pointer; transition: background 160ms ease, color 160ms ease; } .theme-switch__toggle svg { grid-area: 1 / 1; display: none; } .theme-switch__toggle svg.is-show { display: block; } .theme-switch__toggle:hover, .theme-switch.is-open .theme-switch__toggle { color: var(--ink); background: var(--surface-strong); } .theme-switch__menu { position: absolute; top: calc(100% + 0.45rem); right: 0; z-index: 60; display: none; flex-direction: column; gap: 0.15rem; min-width: 8.5rem; padding: 0.35rem; border: 1px solid var(--nav-border); border-radius: 0.9rem; background: var(--nav-bg); box-shadow: var(--shadow-soft); } .theme-switch.is-open .theme-switch__menu { display: flex; } .theme-switch__btn { display: flex; align-items: center; justify-content: flex-start; gap: 0.55rem; width: 100%; min-height: 2.15rem; padding: 0.4rem 0.65rem; border: 0; border-radius: 0.65rem; background: transparent; color: var(--ink-soft); cursor: pointer; transition: background 160ms ease, color 160ms ease; } .theme-switch__btn:hover { color: var(--ink); background: rgba(47, 111, 224, 0.08); } .theme-switch__btn.is-on { background: rgba(47, 111, 224, 0.12); color: var(--ink); } html[data-theme="dark"] .theme-switch__btn:hover, html[data-theme="dark"] .theme-switch__btn.is-on { background: rgba(232, 238, 248, 0.08); } .theme-switch__label { font-size: 0.84rem; font-weight: 600; letter-spacing: -0.01em; } .nav-toggle { display: none; width: 2.15rem; height: 2.15rem; padding: 0; border: 0; border-radius: 999px; background: var(--theme-switch-bg); cursor: pointer; } .nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { display: block; width: 0.95rem; height: 1.5px; margin: 0 auto; border-radius: 2px; background: var(--ink); transition: transform 180ms ease, opacity 180ms ease; } .nav-toggle__bar { position: relative; } .nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; position: absolute; left: 0; } .nav-toggle__bar::before { top: -4px; } .nav-toggle__bar::after { top: 4px; } .nav.is-open .nav-toggle__bar { background: transparent; } .nav.is-open .nav-toggle__bar::before { transform: translateY(4px) rotate(45deg); } .nav.is-open .nav-toggle__bar::after { transform: translateY(-4px) rotate(-45deg); } /* —— Shared —— */ .kicker { margin: 0 0 0.65rem; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue-deep); } .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.25rem; max-width: 100%; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; max-width: 100%; padding: 0.85rem 1.25rem; border-radius: 0.85rem; font-weight: 700; font-size: 0.98rem; letter-spacing: -0.01em; text-decoration: none; transition: transform 180ms ease, background 180ms ease, color 180ms ease; } .btn:hover { transform: translateY(-1px); color: #ffffff; } .btn-primary { background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%); color: #ffffff; border: 1px solid transparent; box-shadow: 0 14px 30px rgba(29, 79, 184, 0.22); } .btn-primary:hover { background: linear-gradient(135deg, #3a7aef 0%, var(--blue) 100%); } .btn-secondary { background: var(--surface-strong); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-soft); } .btn-secondary:hover { color: var(--ink); background: var(--white); border-color: rgba(47, 111, 224, 0.28); } html[data-theme="dark"] .btn-secondary { background: rgba(232, 238, 248, 0.06); border-color: var(--line); } html[data-theme="dark"] .btn-secondary:hover { color: var(--ink); background: rgba(232, 238, 248, 0.12); border-color: rgba(91, 140, 255, 0.35); } .btn-apple svg { flex-shrink: 0; } .btn-appstore { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.55rem 1.05rem 0.55rem 0.9rem; border-radius: 0.85rem; background: #000; color: #fff; text-decoration: none; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease; } .btn-appstore:hover { color: #fff; background: #1a1a1a; transform: translateY(-1px); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28); } .btn-appstore__logo { flex-shrink: 0; display: block; } .btn-appstore__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; } .btn-appstore__eyebrow { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.01em; opacity: 0.92; } .btn-appstore__store { font-size: 1.22rem; font-weight: 600; letter-spacing: -0.02em; } html[data-theme="dark"] .btn-appstore { background: #000; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.12); } html[data-theme="dark"] .btn-appstore:hover { background: #141414; color: #fff; } .btn-appstore--soon { cursor: default; user-select: none; opacity: 0.58; box-shadow: none; } .btn-appstore--soon .btn-appstore__eyebrow { letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.62rem; font-weight: 600; opacity: 0.88; } .btn-appstore--soon:hover { background: #000; color: #fff; transform: none; box-shadow: none; } html[data-theme="dark"] .btn-appstore--soon { opacity: 0.55; } html[data-theme="dark"] .btn-appstore--soon:hover { background: #000; color: #fff; } .btn-secondary svg { flex-shrink: 0; } /* Reveal animations only when JS is available AND the reveal observer is confirmed running, so content can never be stuck hidden. */ html.js.reveals .reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms ease, transform 700ms ease; } /* Must outrank the scoped hidden rule above (same specificity, later in file). */ html.js.reveals .reveal.is-visible { opacity: 1; transform: none; } /* —— Hero —— */ .hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr); gap: 1.25rem 1.1rem; align-items: center; /* Fill the first screen (viewport minus the sticky nav) so the landing page opens on a clean hero — nothing below peeks in. */ min-height: calc(100vh - var(--nav-h, 4.5rem)); min-height: calc(100dvh - var(--nav-h, 4.5rem)); padding: 0.75rem 0 2.5rem; } .hero-copy { padding-top: 0; z-index: 1; min-width: 0; overflow: visible; } .hero-title { margin: 0 0 1.85rem; max-width: 100%; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4.2vw, 3.05rem); line-height: 1.12; letter-spacing: -0.035em; } .hero-sub { display: block; margin-top: 0.8rem; font-family: var(--font-display); font-size: clamp(1.6rem, 3.3vw, 2.35rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; color: var(--ink); } .hero-sells { margin: 0 0 1.75rem; padding: 0; list-style: none; max-width: 100%; display: grid; gap: 0.7rem; text-align: left; } .hero-sells li { position: relative; padding-left: 1.5em; color: var(--ink-soft); font-size: 1.08rem; line-height: 1.55; } .hero-sells li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.45em; height: 0.45em; border-radius: 50%; background: #4D7CFE; } .hero-sells strong { color: var(--ink); font-weight: 700; } /* Staggered reveal — the selling points unfold one line at a time. */ .hero-sells li { opacity: 0; transform: translateY(14px); animation: sells-in 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } .hero-sells li:nth-child(1) { animation-delay: 0.1s; } .hero-sells li:nth-child(2) { animation-delay: 0.26s; } .hero-sells li:nth-child(3) { animation-delay: 0.42s; } .hero-sells li:nth-child(4) { animation-delay: 0.58s; } .hero-sells li:nth-child(5) { animation-delay: 0.74s; } .hero-sells li:nth-child(6) { animation-delay: 0.9s; } @keyframes sells-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .hero-note { margin: 0; color: var(--ink-soft); font-size: 0.9rem; } .hero-visual { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 0; min-width: 0; } @media (min-width: 901px) { .hero-visual { align-items: flex-end; /* Push the phone mockup down a little so it sits lower next to the copy instead of being centered too high. */ margin-top: 2.5rem; } /* The phone shrinks (JS scale < 1) anchored to the right edge, so the scaled mockup stays flush with the visual column instead of leaving a gap on its right. Higher specificity (.hero-visual .device-scale) beats the base .device-scale rule that appears later in the file. */ .hero-visual .device-scale { transform-origin: top right; } /* Desktop phone is flush right, so the caption right-aligns with it (on mobile the phone is centered, so the caption stays centered). */ .hero-demo-caption { align-self: flex-end; text-align: right; } } .hero-copy, .hero-visual { position: relative; z-index: 1; } /* Decorative backdrop behind the phone — content sits above it (z-index 1), so the glow can never cover text or overflow the viewport. */ .hero-glow { position: absolute; top: 0; right: 0; bottom: 0; width: 56%; background: radial-gradient(closest-side at 62% 38%, rgba(77, 124, 254, 0.16), transparent 68%), radial-gradient(closest-side at 48% 78%, rgba(78, 196, 232, 0.1), transparent 62%); filter: blur(6px); pointer-events: none; z-index: 0; } .hero-device-stack { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: min(100%, 380px); } /* The hero mockup is hand-tuned at a 380px design width. It is wrapped in .device-scale, which JS scales down uniformly on narrower screens so the internal layout always renders exactly as designed — nothing clips or overflows at any width. */ .device-scale { width: 100%; transform-origin: top center; } .hero-demo-caption { margin: 1rem 0 0; color: var(--ink-soft); font-size: 0.9rem; text-align: center; /* JS sizes the font so the line spans exactly the phone width. */ white-space: nowrap; } .device { position: relative; width: min(100%, 320px); border-radius: var(--radius-device); background: var(--device); padding: 0.55rem; box-shadow: 0 28px 60px rgba(15, 27, 45, 0.22); animation: float-in 900ms cubic-bezier(0.22, 1, 0.36, 1) both; } .device--hero { width: 100%; animation: float-in 900ms cubic-bezier(0.22, 1, 0.36, 1) both, drift 7s ease-in-out 1s infinite alternate; } .device__screen { border-radius: calc(var(--radius-device) - 0.35rem); overflow: hidden; background: #fff; } @keyframes float-in { from { opacity: 0; transform: translateY(28px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes drift { from { transform: translateY(0); } to { transform: translateY(-10px); } } @keyframes nav-in { from { opacity: 0; transform: translateY(-4px); } } /* —— Feature banners (alternating text + visual) —— */ .feature { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; align-items: center; padding: 3.5rem 0; border-top: 1px solid var(--line); } .feature--flip .feature-copy { order: 2; } .feature--flip .feature-visual { order: 1; } .feature-copy h2 { margin: 0 0 1rem; font-family: var(--font-display); font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.18; } .feature-bullets { margin: 0; padding: 0 0 0 1.15rem; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.6; } .feature-bullets li { margin-bottom: 0.45rem; } .feature-bullets li:last-child { margin-bottom: 0; } .feature-visual { display: flex; justify-content: center; width: 100%; } /* —— Theme demo (pure-CSS card; no screenshot needed) —— */ /* —— App mockup cards (pure HTML/CSS UI demos) —— */ /* Feature cards are "close-ups" of the app UI — same design tokens as the hero phone screen: default accent #4D7CFE (ThemeSettings "blue"), white canvas, iOS-native controls (toggle / slider / segmented / chip). */ .app-card, .theme-demo { --acc: #4D7CFE; /* app default accent */ --acc-deep: #3C5FBE; --mc-ink: #111418; /* chatPrimaryTextColor (light) */ --mc-ink2: #5B646E; --mc-ink3: #7A828B; --mc-line: rgba(0, 0, 0, 0.08); /* chatDividerColor */ --mc-bg: #ffffff; --mc-form: #F5F7F8; --mc-card: #ffffff; --mc-chip: rgba(17, 20, 24, 0.06); --mc-seg: rgba(17, 20, 24, 0.06); --mc-seg-on: #ffffff; --mc-knob: #ffffff; --mc-border-soft: rgba(0, 0, 0, 0.05); --mc-border-row: rgba(0, 0, 0, 0.06); --mc-shadow: 0 18px 40px rgba(15, 27, 45, 0.08); --mc-ok: #1f8a4d; --mc-ok-bg: rgba(47, 168, 90, 0.12); --ink: var(--mc-ink); --ink2: var(--mc-ink2); --ink3: var(--mc-ink3); --surf2: #EEF1F4; --tool: #E6F0FA; --reasoning: #F5F2EB; width: 100%; max-width: 520px; padding: 1rem 1.1rem 1.1rem; border-radius: 1rem; border: 1px solid rgba(15, 27, 45, 0.1); background: var(--mc-bg); box-shadow: var(--mc-shadow); font-size: 0.88rem; color: var(--mc-ink); transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .app-head, .theme-demo__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 0.7rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--mc-line); } .app-head__title, .theme-demo__title { font-weight: 700; letter-spacing: -0.02em; } .app-badge, .theme-demo__pill { padding: 0.2rem 0.55rem; border-radius: 999px; background: rgba(77, 124, 254, 0.12); color: var(--acc-deep); font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; } .app-badge--ok { background: var(--mc-ok-bg); color: var(--mc-ok); } .app-row, .theme-demo__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; padding: 0.6rem 0; border-bottom: 1px solid var(--mc-line); } .app-row:last-child, .theme-demo__row--last { border-bottom: none; } .app-row--stack { flex-direction: column; align-items: stretch; } .app-label, .theme-demo__label { color: var(--mc-ink2); font-weight: 600; } .app-sub { font-size: 0.76rem; color: var(--mc-ink2); opacity: 0.8; } .app-mono { font-family: var(--font-mono); font-size: 0.76rem; } .app-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; } .app-chip { padding: 0.24rem 0.62rem; border-radius: 0.4rem; background: var(--mc-chip); font-size: 0.78rem; font-weight: 600; color: var(--mc-ink2); white-space: nowrap; } .app-chip.is-on { background: rgba(77, 124, 254, 0.14); color: var(--acc-deep); } .app-chips--presets .app-chip { border: none; cursor: pointer; font-family: inherit; font-size: 0.78rem; line-height: inherit; } .app-chips--presets .app-chip:hover { background: rgba(77, 124, 254, 0.1); } .app-seg, .theme-demo__seg { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.16rem; border-radius: 0.55rem; background: var(--mc-seg); } .app-seg span, .theme-demo__seg span, .theme-demo__seg button { padding: 0.24rem 0.62rem; border: none; border-radius: 0.4rem; font-size: 0.78rem; font-weight: 600; color: var(--mc-ink2); white-space: nowrap; background: transparent; cursor: pointer; } .app-seg span.is-on, .theme-demo__seg span.is-on, .theme-demo__seg button.is-on { background: var(--mc-seg-on); color: var(--mc-ink); box-shadow: 0 1px 3px rgba(15, 27, 45, 0.12); } .app-toggle { position: relative; flex-shrink: 0; width: 2.1rem; height: 1.25rem; border-radius: 999px; background: rgba(17, 20, 24, 0.15); transition: background 0.25s ease; } .app-toggle::after { content: ""; position: absolute; top: 0.14rem; left: 0.14rem; width: 0.97rem; height: 0.97rem; border-radius: 999px; background: var(--mc-knob); box-shadow: 0 1px 3px rgba(15, 27, 45, 0.25); transition: left 0.25s ease, right 0.25s ease; } .app-toggle.is-on { background: var(--acc); } .app-toggle.is-on::after { left: auto; right: 0.14rem; } .app-slider { position: relative; flex: 0 1 8.5rem; height: 0.42rem; border-radius: 999px; background: linear-gradient(90deg, var(--acc) var(--fill, 60%), rgba(17, 20, 24, 0.12) var(--fill, 60%)); transition: background 0.18s linear; } .app-slider::after { content: ""; position: absolute; top: 50%; left: var(--fill, 60%); width: 1rem; height: 1rem; border-radius: 999px; background: var(--mc-knob); box-shadow: 0 1px 4px rgba(15, 27, 45, 0.3); transform: translate(-50%, -50%); transition: left 0.18s linear; } .app-value { min-width: 2.8rem; text-align: right; font-family: var(--font-mono); font-size: 0.78rem; color: var(--mc-ink2); } /* spinner — the app's "working" indicator */ .app-spin { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 999px; border: 2px solid rgba(77, 124, 254, 0.25); border-top-color: var(--acc); animation: app-spin 0.7s linear infinite; vertical-align: -0.12em; } @keyframes app-spin { to { transform: rotate(360deg); } } /* —— App mockup cards (pure HTML/CSS UI demos) —— */ /* —— Providers: add-provider flow (list → OpenAI Compatible → Verify & Fetch Models → save), mirroring AddProviderView.swift —— */ .pv-stage { display: none; } .pv-stage.is-active { display: block; animation: app-swap 0.32s ease; } /* Both stages share one reserved height so the card never re-layouts while the demo loops; sized to the taller form stage (~425px). */ .pv-stage--form, .pv-stage--list { min-height: 425px; } /* provider rows in the choose-a-provider list */ .pv-provider { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; padding: 0.55rem 0.7rem; } .pv-provider + .pv-provider { border-top: 1px solid var(--mc-border-row); } .pv-provider__name { font-size: 0.78rem; font-weight: 500; color: var(--ink); } .pv-provider__url { font-size: 0.7rem; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pv-provider.is-pick { background: rgba(77, 124, 254, 0.09); } .pv-provider.is-pick .pv-provider__name { color: var(--acc-deep); font-weight: 600; } .pv-more { margin: 0.7rem 0.15rem 0; color: var(--ink3); font-size: 0.72rem; line-height: 1.35; } /* the add-provider form — same SwiftUI Form surface as the MCP config card */ .pv-form { background: var(--mc-form); border-radius: 10px; padding: 0.55rem 0.45rem 0.75rem; } /* fetched models — hidden via opacity so its space is always reserved */ .pv-models { opacity: 0; transform: translateY(4px); transition: opacity 0.35s ease, transform 0.35s ease; } .pv-models.is-in { opacity: 1; transform: none; } /* Save — appears once the models land */ .pv-save { display: block; width: 100%; margin-top: 0.55rem; padding: 0.55rem; border: none; border-radius: 9px; background: var(--acc); color: #ffffff; font-size: 0.8rem; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity 0.35s ease, transform 0.35s ease; cursor: pointer; } .pv-save.is-in { opacity: 1; transform: none; } /* —— Chat Preset: chips swap the whole config block —— */ .app-config { min-height: 9.6rem; } .app-config.is-switching .app-config__inner { animation: app-swap 0.3s ease; } @keyframes app-swap { 0% { opacity: 0.35; transform: translateY(4px); } 100% { opacity: 1; transform: translateY(0); } } /* —— MCP: config page first, then the tools in action —— */ /* Stage 1 mirrors MCPEditServerView.swift (Name/URL → auth → Validate & Fetch Tools → fetched tools with toggles). Stage 2 reuses the hero's .txd-card tool cards (1:1 with the app's transcript tool card). */ .mc-stage { display: none; } .mc-stage.is-active { display: block; animation: app-swap 0.32s ease; } /* Both phases share one reserved height so switching never re-layouts the page. The config form and the chat stage are each pinned to the taller of the two (the chat phase — user question + two pretty-printed tool cards — is 541px); the chat content is centered in that space. */ .mc-form, .mc-stage--chat { min-height: 549px; } .mc-stage--chat { flex-direction: column; justify-content: center; } .mc-stage--chat.is-active { display: flex; } /* config form — SwiftUI Form look: canvas bg, rounded section cards */ .mc-form { background: var(--mc-form); border-radius: 10px; padding: 0.55rem 0.45rem 0.75rem; } .mc-sec__label { margin: 0.1rem 0.4rem 0.35rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink3); } .mc-sec__card { background: var(--mc-card); border-radius: 10px; overflow: hidden; border: 1px solid var(--mc-border-soft); } .mc-sec__card + .mc-sec__card { margin-top: 0.5rem; } .mc-field { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; padding: 0.42rem 0.7rem; } .mc-field + .mc-field { border-top: 1px solid var(--mc-border-row); } .mc-field__name { color: var(--ink2); font-size: 0.78rem; } .mc-field__right { display: flex; align-items: center; justify-content: flex-end; gap: 0.45rem; min-width: 0; } .mc-field__right .mc-mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mc-field__value { color: var(--ink); font-size: 0.78rem; font-weight: 500; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* "this is a demo" marker next to the sample endpoint */ .mc-example { flex-shrink: 0; padding: 2px 7px; border-radius: 4px; background: rgba(17, 20, 24, 0.06); color: var(--ink3); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .mc-mono { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink2); font-weight: 400; } /* Validate & Fetch Tools button + success block */ .mc-fetch { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; padding: 0.45rem 0.7rem; border: none; background: transparent; color: var(--acc); font-size: 0.78rem; font-weight: 600; text-align: left; cursor: pointer; } .mc-fetch__spin { display: none; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(77, 124, 254, 0.3); border-top-color: var(--acc); animation: app-spin 0.7s linear infinite; } .mc-fetch.is-fetching .mc-fetch__spin { display: inline-block; } /* Reveal states use opacity (NOT display) so the config form keeps its full height from the first frame — the card never grows, so the page never re-layouts while the demo plays. */ .mc-fetch__ok { display: flex; align-items: flex-start; gap: 0.45rem; padding: 0.42rem 0.7rem 0.5rem; border-top: 1px solid var(--mc-border-row); opacity: 0; transition: opacity 0.35s ease; } .mc-fetch__ok.is-in { opacity: 1; } .mc-fetch__check { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; border-radius: 999px; background: rgba(22, 163, 74, 0.12); color: #16A34A; flex-shrink: 0; } .mc-fetch__check svg { width: 0.66rem; height: 0.66rem; } .mc-fetch__ok-text { display: flex; flex-direction: column; gap: 1px; font-size: 0.78rem; color: var(--ink); } .mc-fetch__ok-text strong { font-weight: 600; } .mc-fetch__sub { font-size: 0.68rem; color: var(--ink3); } /* fetched tools list — hidden via opacity so its space is always reserved */ .mc-tools { opacity: 0; transform: translateY(4px); transition: opacity 0.35s ease, transform 0.35s ease; } .mc-tools.is-in { opacity: 1; transform: none; } .mc-tool-name { display: flex; flex-direction: column; gap: 1px; font-size: 0.78rem; color: var(--ink); } .mc-tool-desc { font-size: 0.68rem; color: var(--ink3); } /* stage 2 — the user question the tools are answering */ .mc-chat__user { display: flex; justify-content: flex-end; margin-bottom: 0.3rem; } .mc-chat__user span { max-width: 88%; padding: 10px 11px; border-radius: 14px; border-bottom-right-radius: 4px; background: var(--acc); color: #ffffff; font-size: 0.8rem; line-height: 1.45; width: max-content; } /* stage 2 — tool-call cards (reuse .txd-card, see hero) */ .app-card--mcp .txd-card + .txd-card { margin-top: 0.45rem; } /* tighter body padding so the two pretty-printed cards sit comfortably inside the phase height the config form is pinned to */ .app-card--mcp .txd-card__body { padding: 2px 12px 8px 10px; } .app-card--mcp .txd-card__dur { min-width: 2.8em; text-align: right; } .app-card--mcp .txd-tool__args code { font-size: 0.75rem; /* 12px — app --font-size-micro */ } .app-card--mcp .txd-chip--pending { flex-shrink: 0; width: 16px; height: 16px; padding: 0; background: transparent; color: var(--ink3); } .app-card--mcp .txd-tool__args { opacity: 0.55; transition: opacity 0.3s ease; } .app-card--mcp .txd-card.is-calling .txd-tool__args, .app-card--mcp .txd-card.is-in .txd-tool__args { opacity: 1; } .app-card--mcp .txd-tool__result { font-family: var(--font-mono); font-size: 0.75rem; /* 12px — app --font-size-micro */ line-height: 1.45; color: var(--ink2); white-space: pre-wrap; word-break: break-word; opacity: 0; transition: opacity 0.35s ease; } .app-card--mcp .txd-card.is-in .txd-tool__result { opacity: 1; } .app-card--mcp .txd-card.is-pending .txd-card__head, .app-card--mcp .txd-card.is-pending .txd-card__icon { color: var(--ink3); } /* —— Appearance: swatches / mode / font-size flip the card —— */ .theme-demo__swatches { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; } .theme-demo__dot { width: 1.3rem; height: 1.3rem; border-radius: 999px; background: var(--c); border: 2px solid transparent; padding: 0; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .theme-demo__dot:hover { transform: scale(1.12); } .theme-demo__dot.is-on { border-color: #ffffff; box-shadow: 0 0 0 2px var(--c), 0 2px 6px rgba(15, 27, 45, 0.25); } .theme-demo__preview { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.9rem; padding: 0.85rem; border-radius: 0.75rem; background: #f5f7f8; transition: background 0.3s ease; } .theme-demo__preview.is-sm .theme-demo__bubble { font-size: 0.7rem; } .theme-demo__preview.is-md .theme-demo__bubble { font-size: 0.8rem; } .theme-demo__preview.is-lg .theme-demo__bubble { font-size: 0.95rem; } .theme-demo__seg button[data-size="sm"] { font-size: 0.66rem; } .theme-demo__seg button[data-size="lg"] { font-size: 0.95rem; } .theme-demo__bubble { max-width: 78%; padding: 0.45rem 0.7rem; border-radius: 0.9rem; font-size: 0.8rem; line-height: 1.4; transition: background 0.3s ease, color 0.3s ease; } .theme-demo__bubble--ai { align-self: flex-start; background: #ffffff; color: var(--mc-ink2); border-bottom-left-radius: 0.3rem; } .theme-demo__bubble--user { align-self: flex-end; background: var(--acc); color: #ffffff; border-bottom-right-radius: 0.3rem; } /* dark state — matches the app's dark theme tokens. Applied both when the Appearance demo is toggled (.is-dark) and when the site theme is dark (html[data-theme="dark"]). */ .theme-demo.is-dark, html[data-theme="dark"] .app-card, html[data-theme="dark"] .theme-demo { --mc-ink: #E7EBEF; --mc-ink2: #A8B0B9; --mc-ink3: #7C848D; --mc-line: rgba(255, 255, 255, 0.08); --mc-bg: #171B20; --mc-form: #101418; --mc-card: #171B20; --mc-chip: rgba(255, 255, 255, 0.06); --mc-seg: rgba(255, 255, 255, 0.06); --mc-seg-on: #101418; --mc-knob: #E7EBEF; --mc-border-soft: rgba(255, 255, 255, 0.08); --mc-border-row: rgba(255, 255, 255, 0.06); --mc-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); --mc-ok: #4ade80; --mc-ok-bg: rgba(74, 222, 128, 0.14); --ink: #E7EBEF; --ink2: #A8B0B9; --ink3: #7C848D; --surf2: #1D2228; --tool: #181C28; --reasoning: #242722; background: var(--mc-bg); border-color: rgba(255, 255, 255, 0.08); box-shadow: var(--mc-shadow); } .theme-demo.is-dark .theme-demo__head, .theme-demo.is-dark .theme-demo__row, html[data-theme="dark"] .theme-demo__head, html[data-theme="dark"] .theme-demo__row { border-bottom-color: var(--mc-line); } .theme-demo.is-dark .theme-demo__seg, html[data-theme="dark"] .theme-demo__seg, html[data-theme="dark"] .app-seg { background: var(--mc-seg); } .theme-demo.is-dark .theme-demo__seg button.is-on, html[data-theme="dark"] .theme-demo__seg button.is-on, html[data-theme="dark"] .app-seg span.is-on { background: var(--mc-seg-on); color: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .theme-demo.is-dark .theme-demo__preview, html[data-theme="dark"] .theme-demo__preview { background: #101418; } .theme-demo.is-dark .theme-demo__bubble--ai, html[data-theme="dark"] .theme-demo__bubble--ai { background: #1D2228; color: var(--mc-ink2); } .theme-demo.is-dark .theme-demo__bubble--user, html[data-theme="dark"] .theme-demo__bubble--user { color: #ffffff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); } .theme-demo.is-dark .theme-demo__dot.is-on, html[data-theme="dark"] .theme-demo__dot.is-on { border-color: #171B20; } /* —— Hero: phone chat screen mockup (matches BayesChat light theme) —— */ .phone-screen { --acc: #4D7CFE; --canvas: #FFFFFF; /* pure white — user preference over the app's #F5F7F8 */ --surf: #FFFFFF; --surf2: #EEF1F4; --surf3: #E7ECF0; --code: #F3F5F7; --ink: #111418; --ink2: #5B646E; --ink3: #7A828B; --line: rgba(0, 0, 0, 0.08); --reasoning: #F5F2EB; --tool: #E6F0FA; position: relative; display: flex; flex-direction: column; height: 100%; background: var(--canvas); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; font-size: 15px; line-height: 1.5; transition: background 0.3s ease, color 0.3s ease; } html[data-theme="dark"] .phone-screen { --canvas: #101418; --surf: #181C22; --surf2: #1D2228; --surf3: #242A31; --code: #1E242A; --ink: #E7EBEF; --ink2: #A8B0B9; --ink3: #7C848D; --line: rgba(255, 255, 255, 0.08); --reasoning: #242722; --tool: #181C28; } .device--hero .device__screen { aspect-ratio: 552 / 1200; background: var(--canvas, #FFFFFF); transition: background 0.3s ease; } html[data-theme="dark"] .device--hero .device__screen { background: #101418; } .ios-status { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 1.15rem 0; color: var(--ink); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; } .ios-status__icons { display: inline-flex; align-items: center; gap: 0.3rem; } .ios-status svg { display: block; } .chat-nav { display: flex; align-items: center; justify-content: center; padding: 0.5rem 1rem 0.3rem; } .chat-nav__title { font-size: 0.98rem; font-weight: 600; letter-spacing: -0.01em; } .chat-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.55rem; padding: 12px 12px 14px; overflow-y: auto; overscroll-behavior: contain; /* No visible scrollbar — matches the app's WKWebView (iOS overlay scrollbars are hidden at rest). Keeps the light canvas clean. */ scrollbar-width: none; scrollbar-color: transparent transparent; /* Instant scroll-follow during streaming (matches the app — no gliding). */ scroll-behavior: auto; } .chat-body::-webkit-scrollbar { width: 0; display: none; } /* Empty New Chat — 1:1 with MessageListView.chatEmptyState. Skip the app's -24pt vertical offset here: the phone mock clips under the nav, so keep the icon clear of the top edge like other content. */ .demo-empty { display: none; flex-direction: column; align-items: stretch; gap: 24px; padding: 4px 0 12px; margin-top: 0; } .chat-body.is-empty { padding-top: 16px; } .chat-body.is-empty .demo-empty { display: flex; } .chat-body.is-empty .demo-thread { display: none !important; } .demo-empty__header { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 24px; text-align: center; } .demo-empty__icon-wrap { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--surf2); /* chatSecondarySurface #EEF1F4 / #1D2228 */ color: var(--acc); } .demo-empty__icon-wrap .cicon { width: 36px; height: 36px; } .demo-empty__title { margin: 0; color: var(--ink); font-size: 1.25rem; /* chatBody 16 + 4 */ font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; } .demo-empty__desc { margin: 0; max-width: 360px; color: var(--ink2); font-size: 0.875rem; /* chatMeta 14 */ line-height: 1.4; } .demo-empty__presets { display: flex; flex-direction: column; gap: 12px; } .demo-empty__presets-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 24px; } .demo-empty__presets-title { color: var(--ink); font-size: 1rem; /* chatBody 16 semibold */ font-weight: 600; } .demo-empty__see-all { display: inline-flex; align-items: center; gap: 4px; padding: 8px 0 8px 12px; color: var(--acc); font-size: 0.875rem; font-weight: 500; line-height: 1; } .demo-empty__see-all .cicon { width: 9px; height: 9px; } .demo-presets { display: flex; gap: 10px; padding: 2px 24px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; } .demo-presets::-webkit-scrollbar { display: none; } .demo-empty__hint { margin: 0; padding: 0 24px; color: var(--ink3); font-size: 0.78rem; line-height: 1.35; text-align: center; } /* 100×100 launch cards — MessageListView.chatPresetLaunchCard */ .demo-preset-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100px; height: 100px; flex-shrink: 0; border-radius: 16px; border: 0.75px solid color-mix(in srgb, var(--line) 75%, transparent); background: linear-gradient( 180deg, var(--surf2) 0%, color-mix(in srgb, var(--surf2) 80%, transparent) 100% ); color: var(--ink2); transition: opacity 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease; } .demo-presets.has-selection .demo-preset-card:not(.is-on) { opacity: 0.55; } .demo-preset-card.is-on { opacity: 1; border-width: 1px; border-color: color-mix(in srgb, var(--acc) 45%, transparent); background: linear-gradient( 180deg, color-mix(in srgb, var(--acc) 16%, transparent) 0%, color-mix(in srgb, var(--acc) 6%, transparent) 100% ); color: var(--acc); } .demo-preset-card.is-tap { transform: scale(0.96); } .demo-preset-card__icon { width: 20px; height: 20px; color: inherit; } .demo-preset-card:not(.is-on) .demo-preset-card__icon { color: var(--ink2); } .demo-preset-card.is-on .demo-preset-card__icon { color: var(--acc); } .demo-preset-card__name { max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 0.75rem; /* chatMicro 12 */ font-weight: 600; line-height: 1.2; text-align: center; } .composer__effort { display: inline-flex; align-items: center; gap: 6px; } .composer__effort.is-muted, .composer__effort.is-muted .cicon, .composer__effort.is-muted .composer__pill-text { color: var(--ink3); } .composer__field.is-typing { color: var(--ink); } .chat-msg--user { display: flex; justify-content: flex-end; } .chat-bubble--user { max-width: 90%; padding: 7px 11px; border-radius: 16px; background: var(--acc); color: #ffffff; font-size: 0.93rem; line-height: 1.45; } .chat-msg--ai { color: var(--ink); font-size: 0.93rem; line-height: 1.55; } .chat-msg--ai .m { margin: 0.3em 0; } .chat-msg--ai .m:first-child { margin-top: 0; } .chat-msg--ai .m:last-child { margin-bottom: 0; } .math-inline { font-family: "Times New Roman", Georgia, serif; font-size: 1.05em; letter-spacing: 0.01em; } /* Code block — mirrors chat-styles.css (.code-block) */ .code-block { margin: 0.5em 0; border: 1px solid var(--line); border-radius: 8px; background: var(--code); overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } .code-block__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; background: var(--surf2); border-bottom: 1px solid var(--line); } .code-block__lang { color: var(--ink2); font-size: 0.78em; font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .code-copy-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--ink2); font-size: 0.7em; font-weight: 500; } .code-block pre { margin: 0; padding: 9px 11px; overflow-x: auto; font-family: "SF Mono", "Menlo", "Monaco", "Courier New", monospace; font-size: 0.8em; line-height: 1.5; -webkit-mask-image: linear-gradient(to left, transparent 0%, black 18px, black 100%); mask-image: linear-gradient(to left, transparent 0%, black 18px, black 100%); } .code-block pre code { font-family: inherit; } /* highlight.js light theme colors (from the app) */ .hl-kw { color: #8B5CF6; } .hl-fn { color: #2563EB; } .hl-bi { color: #0EA5E9; } .hl-num { color: #D97706; } .hl-str { color: #16A34A; } .hl-cm { color: #9CA3AF; font-style: italic; } html[data-theme="dark"] .hl-kw { color: #C4B5FD; } html[data-theme="dark"] .hl-fn { color: #93C5FD; } html[data-theme="dark"] .hl-bi { color: #7DD3FC; } html[data-theme="dark"] .hl-num { color: #FBBF24; } html[data-theme="dark"] .hl-str { color: #86EFAC; } html[data-theme="dark"] .hl-cm { color: #9CA3AF; font-style: italic; } /* —— Hero transcript demo (matches transcript-styles.css measurements) —— */ /* The demo is JS-driven; without JS (or with reduced motion) everything is simply visible in its final state. The .txd-demo class is added by JS before the timeline starts and defines the *reset* state. */ .txd-demo .chat-msg--ai .txd-card__body, .txd-demo .txd-generating, .txd-demo .txd-body > .m, .txd-demo .txd-table, .txd-demo .txd-formula, .txd-demo .code-block, .txd-demo .txd-footer { opacity: 0; } /* Entry fade for the two cards + the generating placeholder (demo JS adds .is-in as each appears). */ .txd-demo .chat-msg--ai .txd-card, .txd-demo .txd-generating { opacity: 0; transform: translateY(5px); transition: opacity 0.4s ease, transform 0.4s ease, background 0.28s ease, border-color 0.28s ease; } .txd-demo .chat-msg--ai .txd-card.is-in, .txd-demo .txd-generating.is-in { opacity: 1; transform: none; } .txd-demo .chat-msg--ai .txd-card { background: transparent; } /* Reasoning / tool cards — collapsed = flat transparent row (app has NO border/background when folded); expanded = tinted surface + accent bar (app: #F5F2EB reasoning / #E6F0FA tool), also borderless. */ .txd-card { position: relative; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: transparent; transition: background 0.28s ease; } .txd-card + .txd-card { margin-top: 0.3rem; /* tighter gap between reasoning and tool cards */ } .txd-card + .txd-generating, .txd-card + .txd-body { margin-top: 0.55rem; } .txd-card__accent { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: rgba(77, 124, 254, 0.55); transform: scaleY(0); transform-origin: top; transition: transform 0.28s ease; } .txd-card.is-expanded .txd-card__accent { transform: scaleY(1); } .txd-card__head { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 3px 2px; color: var(--ink2); font-size: 0.8125rem; /* 13px — lighter, quieter header */ font-weight: 400; line-height: 1.3; } /* Card icons — the exact SF Symbol PNGs the app ships (sf-brain / sf-hammer), rendered as alpha masks so they inherit currentColor. */ .txd-card__icon { display: inline-block; flex-shrink: 0; width: 1em; height: 1em; min-width: 14px; min-height: 14px; background-color: currentColor; opacity: 0.85; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-source-type: alpha; mask-mode: alpha; } .txd-card[data-role="reasoning"] .txd-card__icon { -webkit-mask-image: url("data:image/png;base64,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"); mask-image: url("data:image/png;base64,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"); } .txd-card[data-role="tool"] .txd-card__icon { -webkit-mask-image: url("data:image/png;base64,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"); mask-image: url("data:image/png;base64,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"); } .txd-card__title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .txd-card__dur { flex-shrink: 0; color: var(--ink3); font-size: 0.6875rem; /* 11px */ font-weight: 400; } .txd-card__chev { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; color: var(--ink3); transition: transform 0.25s ease; } .txd-card.is-expanded .txd-card__chev { transform: rotate(180deg); } .txd-card.is-expanded[data-role="reasoning"] { background: var(--reasoning, #F5F2EB); } .txd-card.is-expanded[data-role="tool"] { background: var(--tool, #E6F0FA); } .txd-card.is-expanded .txd-card__head { color: #3C5FBE; /* app expanded header: accent-mixed */ padding: 8px 10px 6px 8px; font-weight: 500; } html[data-theme="dark"] .txd-card.is-expanded .txd-card__head { color: #8BB0FF; } .txd-card__body { display: none; padding: 4px 12px 10px 10px; color: var(--ink); font-size: 0.8125rem; /* 13px */ line-height: 1.55; opacity: 0; transition: opacity 0.3s ease; } .txd-card__body p { margin: 0; } .txd-card.is-expanded .txd-card__body { display: block; opacity: 1; } /* tap ripple on the chevron when the demo "clicks" a collapsed card */ .txd-card__chev { position: relative; } .txd-card__chev::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: rgba(77, 124, 254, 0.18); opacity: 0; transform: scale(0.4); pointer-events: none; } .txd-card__chev.is-ripple::after { animation: txd-ripple 0.5s ease-out; } @keyframes txd-ripple { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.4); } } /* status chip — app: green tint pill (ok) */ .txd-chip { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 999px; background: var(--surf2); color: var(--ink3); font-size: 0.6875rem; /* 11px — app stat chips */ font-weight: 400; line-height: 1.2; } .txd-chip--ok { flex-shrink: 0; background: rgba(22, 163, 74, 0.12); color: #16A34A; font-weight: 600; } /* Calling state — app shows a small spinning ring, no text. */ .txd-chip--calling { flex-shrink: 0; width: 16px; height: 16px; padding: 0; background: transparent; color: var(--ink3); } .txd-spinner { display: block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(122, 130, 139, 0.35); border-top-color: currentColor; animation: txd-spin 0.7s linear infinite; } @keyframes txd-spin { to { transform: rotate(360deg); } } /* tool card internals — app: JSON args + bordered result. Args match the app's .tx-tool-args-pre: muted secondary text (#5B646E, the light-theme --color-text-secondary), 1.45 line height, pre-wrapped. */ .txd-tool__args code { display: block; font-family: "SF Mono", "Menlo", "Monaco", "Courier New", monospace; font-size: 0.8em; color: var(--ink2); line-height: 1.45; white-space: pre-wrap; word-break: break-word; } .txd-tool__result { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(122, 130, 139, 0.18); font-size: 0.9rem; line-height: 1.5; } /* Processing dots — app typing indicator, shown below the user bubble until the first reasoning card appears. Hidden by default; only the demo shows it. */ .txd-generating { display: none; align-items: center; padding: 4px 0 0; } .txd-demo .txd-generating { display: flex; } .txd-generating__dots { display: inline-flex; gap: 4px; } .txd-generating__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink2); animation: txd-dot 1.2s ease-in-out infinite; } .txd-generating__dots i:nth-child(2) { animation-delay: 0.15s; } .txd-generating__dots i:nth-child(3) { animation-delay: 0.3s; } @keyframes txd-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-3px); opacity: 1; } } .txd-generating__dots { display: inline-flex; gap: 4px; } .txd-generating__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink2); animation: txd-dot 1.2s ease-in-out infinite; } .txd-generating__dots i:nth-child(2) { animation-delay: 0.15s; } .txd-generating__dots i:nth-child(3) { animation-delay: 0.3s; } @keyframes txd-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-3px); opacity: 1; } } /* body segments — intro/leads typed, table/formula/code fade in. Hidden state only applies once the demo is active (JS adds .txd-demo), so no-JS / reduced-motion visitors always see the full reply. */ .txd-demo .txd-body > .m, .txd-demo .txd-table, .txd-demo .txd-formula, .txd-demo .txd-body .code-block, .txd-demo .txd-footer { opacity: 0; transform: translateY(5px); transition: opacity 0.45s ease, transform 0.45s ease; } .txd-body > .m.is-in, .txd-table.is-in, .txd-formula.is-in, .txd-body .code-block.is-in, .txd-footer.is-in { opacity: 1; transform: none; } /* Reserve the closing line's final height up front so the transcript's scrollHeight is final BEFORE the single glide to the bottom — the closing then streams in place, visible, with no second scroll movement. The text wraps to 3 lines (~69px) at the current content width (scrollbar hidden since v34 widened the chat area), so reserve 3 lines — a full 4th line would leave dead space between the text and the footer. */ .txd-demo #demo-closing { min-height: 72px; } /* table — app: th #EEF1F4, 1px rgba(0,0,0,.08) borders, 6px 10px th padding */ .txd-table { margin: 0.5em 0 0.65em; overflow-x: auto; } .txd-table table { width: 100%; border-collapse: collapse; font-size: 0.85rem; line-height: 1.45; } .txd-table th { background: var(--surf2); border: 1px solid var(--line); padding: 6px 10px; text-align: left; font-weight: 600; color: var(--ink); white-space: nowrap; } .txd-table td { border: 1px solid var(--line); padding: 6px 10px; color: var(--ink); white-space: nowrap; } /* block formula — app renders KaTeX (.katex-display): no card, no background, no border — the formula sits directly on the canvas. Only margin + overflow. */ .txd-formula { margin: 0.6em 0; overflow-x: auto; overflow-y: hidden; } .txd-formula__expr { display: block; text-align: center; font-family: "Times New Roman", Georgia, serif; font-size: 1.15rem; font-style: italic; letter-spacing: 0.02em; } /* assistant footer — app: model summary row + stat chips row */ /* assistant footer — ported 1:1 from transcript-styles.css (.tx-footer*): model summary row + actions (copy/regenerate/share/delete, 12px fill icons) + stats row (completion time + ↓/↑ tok chips). No top border — the app footer is just a 6px margin below the message. */ .txd-footer { margin-top: 6px; } .txd-footer__row { display: flex; align-items: center; gap: 10px; min-height: 22px; } .txd-footer__model-wrap { position: relative; flex: 1 1 auto; min-width: 0; /* Actions are ~78px; the old 140px reserve clipped the model mid-name. */ max-width: calc(100% - 88px); } .txd-footer__model { overflow-x: auto; overflow-y: hidden; white-space: nowrap; font-size: 12px; font-weight: 400; color: var(--ink3); /* tertiary #7A828B */ scrollbar-width: none; overscroll-behavior-x: contain; } .txd-footer__model::-webkit-scrollbar { display: none; } .txd-footer__fade { position: absolute; top: 0; right: 0; bottom: 0; width: 14px; pointer-events: none; background: linear-gradient(to right, transparent, var(--canvas)); opacity: 0; } .txd-footer__model-wrap.is-overflow .txd-footer__fade { opacity: 1; } .txd-footer__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; color: var(--ink3); } .txd-footer__icon { display: block; flex-shrink: 0; } .txd-footer__stats { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; } .txd-footer__time { font-size: 12px; font-weight: 400; color: var(--ink3); white-space: nowrap; } .txd-footer__chips { display: flex; flex-wrap: wrap; gap: 6px; } .txd-footer__stats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } /* Streaming cursor — mirrors .streaming-cursor in chat-styles.css */ .stream-cursor { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; background: var(--acc); vertical-align: text-bottom; animation: caret 1s step-end infinite; } /* Composer — ported 1:1 from InputBar.swift (composerContent VStack, spacing 0): pills row (32pt, single line) → input field (16px) → action row [attach 32][tool 32][model flex-1] … [send 44]. No divider. */ .chat-composer { padding: 0 8px 8px; } .composer { padding: 0; border-radius: 24px; border: 1px solid var(--line); background: var(--surf); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); overflow: hidden; } html[data-theme="dark"] .composer { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); } .composer__pills { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 16px; color: var(--ink2); font-size: 11px; font-weight: 500; white-space: nowrap; min-width: 0; } .composer__pills .cicon { font-size: 13px; color: var(--acc); } .composer__pills .pill-dot { color: var(--ink3); } .composer__pill-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .composer__pill-text:last-child { min-width: 0; } .composer__field { padding: 10px 16px 6px; color: var(--ink3); font-size: 14px; } .composer__actions { display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 4px 16px 8px; } .composer__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; color: var(--ink2); } .composer__icon .cicon { font-size: 17px; } .composer__icon--tool { color: var(--ink2); opacity: 0.55; transition: color 0.25s ease, opacity 0.25s ease; } .composer__icon--tool.is-on { color: var(--acc); opacity: 1; } .composer__icon--tool .cicon { font-size: 15px; } .composer__model { display: inline-flex; align-items: center; gap: 4px; min-width: 0; flex: 1; color: var(--ink2); font-size: 11px; font-weight: 500; } .composer__model .cicon { color: var(--acc); flex-shrink: 0; font-size: 15px; } .composer__model span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .composer__send { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: #ffffff; flex-shrink: 0; transition: transform 0.2s ease, box-shadow 0.2s ease; } .composer__send.is-armed { transform: scale(1.06); box-shadow: 0 0 0 3px rgba(77, 124, 254, 0.22); } .composer__send .cicon { font-size: 15px; } /* SF Symbol icons — the exact symbols the app renders (macOS SF Symbols), embedded as alpha masks so they inherit currentColor. */ .cicon { display: inline-block; flex-shrink: 0; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-source-type: alpha; mask-mode: alpha; } .cicon--slider { -webkit-mask-image: url("assets/icons/slider.png"); mask-image: url("assets/icons/slider.png"); } .cicon--brain { -webkit-mask-image: url("assets/icons/brain.png"); mask-image: url("assets/icons/brain.png"); } .cicon--bubble { -webkit-mask-image: url("assets/icons/bubble.png"); mask-image: url("assets/icons/bubble.png"); } .cicon--plus { -webkit-mask-image: url("assets/icons/plus.png"); mask-image: url("assets/icons/plus.png"); } .cicon--wrench { -webkit-mask-image: url("assets/icons/wrench.png"); mask-image: url("assets/icons/wrench.png"); } .cicon--cpu { -webkit-mask-image: url("assets/icons/cpu.png"); mask-image: url("assets/icons/cpu.png"); } .cicon--arrowup { -webkit-mask-image: url("assets/icons/arrowup.png"); mask-image: url("assets/icons/arrowup.png"); } .cicon--bubbles { -webkit-mask-image: url("assets/icons/bubbles.png"); mask-image: url("assets/icons/bubbles.png"); } .cicon--search { -webkit-mask-image: url("assets/icons/search.png"); mask-image: url("assets/icons/search.png"); } .cicon--globe { -webkit-mask-image: url("assets/icons/globe.png"); mask-image: url("assets/icons/globe.png"); } .cicon--textbubble { -webkit-mask-image: url("assets/icons/textbubble.png"); mask-image: url("assets/icons/textbubble.png"); } .cicon--chevron-right { -webkit-mask-image: url("assets/icons/chevron-right.png"); mask-image: url("assets/icons/chevron-right.png"); } /* —— Pricing / plans —— */ .pricing { padding: 3.5rem 0 4rem; border-top: 1px solid var(--line); } .pricing-head { max-width: 36ch; margin-bottom: 2rem; } .pricing-head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; } .plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; } .plan { position: relative; display: flex; flex-direction: column; gap: 1.25rem; padding: 1.5rem 1.4rem 1.4rem; border: 1px solid var(--line); border-radius: 1.15rem; background: var(--surface); box-shadow: var(--shadow-card); } .plan--pro { border-color: color-mix(in srgb, var(--blue) 35%, var(--line)); background: linear-gradient(165deg, color-mix(in srgb, var(--blue) 10%, transparent), transparent 42%), var(--surface-strong); box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 18%, transparent), var(--shadow-card); } .plan__badge { position: absolute; top: 1.05rem; right: 1.15rem; margin: 0; padding: 0.22rem 0.6rem; border-radius: 999px; background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue-deep); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .plan__head { display: flex; flex-direction: column; gap: 0.35rem; padding-right: 4.5rem; } .plan:not(.plan--pro) .plan__head { padding-right: 0; } .plan__name { margin: 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; } .plan__price { margin: 0.15rem 0 0; display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; } .plan__amount { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.12; color: var(--ink); } .plan--pro .plan__amount { color: var(--blue-deep); } .plan__meta { margin: 0; color: var(--ink-soft); font-size: 0.88rem; } .plan__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; flex: 1; } .plan__list li { position: relative; padding-left: 1.35rem; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.45; } .plan__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.42em; height: 0.42em; border-radius: 50%; background: color-mix(in srgb, var(--blue) 70%, var(--ink-soft)); } .plan--pro .plan__list li::before { background: var(--blue); } .plan__list strong { color: var(--ink); font-weight: 700; } .plan__hint { display: block; margin-top: 0.12rem; font-size: 0.78rem; opacity: 0.85; } .plan__cta { width: 100%; margin-top: 0.25rem; } .plan__cta--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); box-shadow: none; } .plan__cta--ghost:hover { color: var(--ink); background: color-mix(in srgb, var(--blue) 8%, transparent); border-color: color-mix(in srgb, var(--blue) 25%, var(--line)); } /* —— FAQ —— */ .faq { padding: 3.5rem 0 4rem; border-top: 1px solid var(--line); } .faq-head { max-width: 52ch; margin-bottom: 1.75rem; } .faq-head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; } .faq-list { border-radius: 1.1rem; border: 1px solid var(--line); background: var(--surface); overflow: hidden; } .faq-list details { border-bottom: 1px solid var(--line); } .faq-list details:last-child { border-bottom: none; } .faq-list summary { cursor: pointer; list-style: none; padding: 1.05rem 1.25rem; font-weight: 600; letter-spacing: -0.015em; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::after { content: "+"; float: right; color: var(--blue); font-weight: 600; font-size: 1.15rem; line-height: 1; } .faq-list details[open] summary::after { content: "–"; } .faq-list details p { margin: 0; padding: 0 1.25rem 1.15rem; max-width: 62ch; color: var(--ink-soft); font-size: 0.95rem; } /* —— Contact —— */ .contact { padding: 3.5rem 0 4rem; border-top: 1px solid var(--line); } .contact-copy { max-width: 42ch; } .contact-copy h2 { margin: 0 0 0.75rem; font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; } .contact-copy p { margin: 0 0 1.35rem; color: var(--ink-soft); } .contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } #features, #pricing, #faq, #contact { scroll-margin-top: 4.5rem; } /* —— Footer —— */ .footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1.5rem 0 2.5rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.9rem; } .footer nav { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; } .footer a { text-decoration: none; } .footer a:hover { text-decoration: underline; } /* —— Privacy page —— */ .legal { max-width: 720px; margin: 0 auto; padding: 2rem 0 4rem; } .legal h1 { margin: 0 0 0.4rem; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.6rem); letter-spacing: -0.03em; } .legal .meta { margin: 0 0 2rem; color: var(--ink-soft); font-size: 0.92rem; } .legal h2 { margin: 2rem 0 0.6rem; font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -0.02em; } .legal p { margin: 0 0 0.85rem; color: var(--ink-soft); } .legal a { color: var(--blue); } /* —— Responsive —— */ @media (max-width: 1180px) { .nav-links a { padding: 0.42rem 0.55rem; font-size: 0.84rem; } .nav-ph img { height: 26px; } } @media (max-width: 900px) { /* Sections are taller than the viewport on phones/tablets (the hero alone spans several screens), so mandatory snap would yank the user back to a section top and make it impossible to rest mid-section. Paging stays a desktop feature; below 901px it's normal free scrolling. */ html { scroll-snap-type: none; } .nav { flex-wrap: wrap; border-radius: 1.35rem; padding: 0.4rem 0.4rem 0.4rem 0.7rem; } .nav.is-open { border-radius: 1.35rem; } .nav-cta { margin-left: 0; } .nav-actions { margin-left: auto; } .nav-ph img { height: 26px; } .nav-toggle { display: grid; place-items: center; } /* The Product Hunt badge is desktop social proof — drop it from the mobile nav so the row has room to breathe. */ .nav-ph { display: none; } .nav-links { display: none; order: 4; flex: none; flex-basis: 100%; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 0.15rem; margin: 0.35rem 0.35rem 0.45rem; padding: 0.35rem 0 0; border-top: 1px solid var(--line); } .nav.is-open .nav-links { display: flex; animation: nav-in 180ms ease both; } .nav-links a { padding: 0.7rem 0.75rem; } .hero { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 0.65rem; } .hero-copy { padding-top: 0; text-align: center; } .hero-title, .hero-sells { margin-inline: auto; } .hero-title { max-width: min(100%, 36ch); } .hero-visual { min-height: auto; margin-right: 0; justify-content: center; } .device--hero { width: 100%; animation: float-in 900ms cubic-bezier(0.22, 1, 0.36, 1) both; } .feature { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.5rem 0; } .feature--flip .feature-copy, .feature--flip .feature-visual { order: unset; } .feature-copy { text-align: center; } .feature-bullets { text-align: left; max-width: 36ch; margin-inline: auto; } .pricing-head { text-align: center; margin-inline: auto; } .plans { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } .plan--pro { order: -1; } .faq-head, .contact-copy { text-align: center; margin-inline: auto; } .contact-actions { justify-content: center; } .cta-row { justify-content: center; } } @media (max-width: 480px) { /* Phones: tighter gutters — 20px margins each side wastes space. */ .shell { width: min(100% - 2rem, var(--max)); } /* Compact nav so brand, theme switch, CTA and hamburger fit one row. */ .nav { gap: 0.35rem; padding: 0.3rem 0.3rem 0.3rem 0.55rem; } .brand { gap: 0.4rem; font-size: 0.95rem; } .brand img { width: 26px; height: 26px; } .nav-actions { gap: 0.35rem; } .nav-cta { padding: 0.45rem 0.7rem; font-size: 0.8rem; } .theme-switch__toggle, .nav-toggle { width: 1.9rem; height: 1.9rem; } .hero { gap: 1.25rem; padding-top: 0.5rem; } /* Scale the headline down a touch so copy + phone read as one screen. */ .hero-title { font-size: clamp(1.85rem, 8vw, 2.15rem); } .hero-sub { font-size: clamp(1.4rem, 6.5vw, 1.7rem); } .hero-sells { gap: 0.6rem; } .hero-sells li { font-size: 0.98rem; } /* Full-bleed visual: single-column layout has nothing beside the phone, so undo the shell gutters and let the mockup sit edge-to-edge. The mockup itself keeps its 380px design layout and is scaled down uniformly by JS (.device-scale) — see hero mockup script. */ .hero-visual { width: calc(100% + 2rem); margin-inline: -1rem; } /* The hero phone is a showcase, not a scrollable list: let touch scroll the page instead of getting trapped in the mockup's internal scroll area. The demo auto-plays, so nothing interactive is lost. */ .device--hero { pointer-events: none; } /* ...but keep the code / table / formula horizontally scrollable so their overflow stays reachable on small screens. */ .device--hero .code-block pre, .device--hero .txd-table, .device--hero .txd-formula { pointer-events: auto; } .cta-row { gap: 0.7rem; } /* Footer: stack and center so the © line and the link row line up instead of wrapping into uneven, space-between rows. */ .footer { flex-direction: column; align-items: center; text-align: center; gap: 0.9rem; } .footer nav { justify-content: center; } /* Contact buttons: full-width and equal on phones — no more uneven intrinsic widths side by side, and bigger tap targets. */ .contact-actions { flex-direction: column; align-items: stretch; } .contact-actions .btn { width: 100%; } } @media (max-width: 340px) { /* iPhone SE (320px) — icon-only brand keeps everything on one row. */ .brand span { display: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .device--hero, .device, html.js.reveals .reveal, .nav-links, .app-caret, .stream-cursor, .hero-sells li { animation: none !important; transition: none !important; opacity: 1; transform: none; } }