/* ============================================================ Alide.AI - main site Light, quiet, confident. Rogo-inspired spacing and hierarchy, Alide brand system throughout. ============================================================ */ :root { color-scheme: light; --ink: #18222c; --ink-soft: #293440; --paper: #fcf6f0; --paper-deep: #f4ebe2; --white: #ffffff; --line: rgba(24, 34, 44, 0.14); --line-soft: rgba(24, 34, 44, 0.08); --muted: #58616b; --accent: #c85f45; --accent-deep: #b1503a; --accent-soft: #e48461; --green: #18bf91; --green-deep: #168763; --paper-on-ink: #e8ded6; --shadow-soft: 0 18px 60px rgba(24, 34, 44, 0.1); --shadow-card: 0 10px 36px rgba(24, 34, 44, 0.08); --header-bg: rgba(252, 246, 240, 0.86); --wrap: min(1180px, calc(100% - 48px)); --radius: 16px; --r-ctl: 10px; --r-pill: 999px; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --serif: "Newsreader", Georgia, "Times New Roman", serif; /* Constant surfaces for the hero demo rail - it's a dark ink panel in both themes, same trick as the extension's own dark mode, so these don't need light/dark pairs. --surface tracks --white on purpose: it already flips per theme, so the demo's chat-adjacent bits (unused here but kept for parity) stay correct for free. */ --ink-fixed: #18222c; --surface: var(--white); --blue: #4a8dff; --blue-soft: color-mix(in oklch, var(--blue) 55%, var(--paper)); --amber: #e2a300; } /* The plan cards answer the common question quickly. The full matrix stays available without forcing every visitor through a dense wall of rows. */ .comparison-disclosure-section { padding-top: 24px; } .comparison-disclosure { border-block: 1px solid var(--line); } .comparison-disclosure > summary { display: flex; min-height: 124px; align-items: center; justify-content: space-between; gap: 28px; padding: 24px 2px; list-style: none; cursor: pointer; } .comparison-disclosure > summary::-webkit-details-marker { display: none; } .comparison-disclosure > summary span { display: grid; gap: 5px; } .comparison-disclosure > summary small { color: var(--muted); font-size: 0.69rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .comparison-disclosure > summary strong { color: var(--ink); font-size: clamp(1.35rem, 2.5vw, 2rem); font-weight: 650; letter-spacing: -0.04em; } .comparison-disclosure > summary i { position: relative; width: 42px; height: 42px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; } .comparison-disclosure > summary i::before, .comparison-disclosure > summary i::after { position: absolute; top: 50%; left: 50%; width: 14px; height: 1px; background: var(--ink); content: ""; transform: translate(-50%, -50%); transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); } .comparison-disclosure > summary i::after { transform: translate(-50%, -50%) rotate(90deg); } .comparison-disclosure[open] > summary i::after { transform: translate(-50%, -50%) rotate(0deg); } .comparison-disclosure-body { padding-bottom: 28px; } .section.pricing-tiers { padding-bottom: 52px; } .section-tight.comparison-disclosure-section { padding-block: 0 64px; } /* ---- dark mode ---- Same trick the extension's own dark mode uses (panel.css's .tt-panel[data-mode="dark"] block): every surface on this site already reads through --ink/--paper/--white/--muted/--accent, so swapping the variables is enough to re-theme the whole site without touching individual selectors. Two ways in: an explicit choice (data-theme, set by the toggle + persisted to localStorage, read pre-paint by the inline script on every page) always wins; failing that, the OS preference applies automatically via the media query below. An explicit "light" pick on a dark OS must NOT be overridden by the media query - :not([data-theme]) on the media-query block is what guarantees that, same reasoning as the extension's own light/dark precedence rules. */ :root[data-theme="dark"] { color-scheme: dark; --ink: #f2ece3; --ink-soft: #d8d0c4; --paper: #1c232a; --paper-deep: #12171c; --white: #242c34; --line: rgba(242, 236, 227, 0.14); --line-soft: rgba(242, 236, 227, 0.08); --muted: #aab4ac; --accent: #e2896a; --accent-deep: #eaa688; --accent-soft: #c85f45; --green: #2ed6a6; --green-deep: #24b78e; --paper-on-ink: #12171c; --shadow-soft: 0 18px 60px rgba(0, 0, 0, 0.45); --shadow-card: 0 10px 36px rgba(0, 0, 0, 0.35); --header-bg: rgba(28, 35, 42, 0.86); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --ink: #f2ece3; --ink-soft: #d8d0c4; --paper: #1c232a; --paper-deep: #12171c; --white: #242c34; --line: rgba(242, 236, 227, 0.14); --line-soft: rgba(242, 236, 227, 0.08); --muted: #aab4ac; --accent: #e2896a; --accent-deep: #eaa688; --accent-soft: #c85f45; --green: #2ed6a6; --green-deep: #24b78e; --paper-on-ink: #12171c; --shadow-soft: 0 18px 60px rgba(0, 0, 0, 0.45); --shadow-card: 0 10px 36px rgba(0, 0, 0, 0.35); --header-bg: rgba(28, 35, 42, 0.86); } } /* spacing utilities - replace ad-hoc inline styles */ .u-pt-0 { padding-top: 0 !important; } .u-pt-16 { padding-top: 16px !important; } .u-pt-24 { padding-top: 24px !important; } .u-pt-40 { padding-top: 40px !important; } .u-pb-128 { padding-bottom: 128px !important; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } [id] { scroll-margin-top: 92px; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Manrope", "Avenir Next", Avenir, sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; } a { color: inherit; text-decoration: none; } button, input, select { font: inherit; } img, svg { display: block; max-width: 100%; } .wrap { width: var(--wrap); margin: 0 auto; } .skip-link { position: absolute; left: 16px; top: -52px; z-index: 40; padding: 10px 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-ctl); } .skip-link:focus-visible { top: 14px; } /* ---- type ---- */ .eyebrow { margin: 0 0 18px; font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); } .display { margin: 0; font-size: clamp(48px, 7.4vw, 100px); font-weight: 800; letter-spacing: -0.045em; line-height: 0.99; } .h2 { margin: 0; font-size: clamp(30px, 4vw, 46px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; } .lead { margin: 22px 0 0; max-width: 60ch; font-size: clamp(17px, 1.8vw, 20px); color: var(--muted); } .dot { color: var(--accent); display: inline-block; } /* Signature beat: the branded coral period pops in just after its headline settles. One rule, felt on every section of every page. */ .js [data-reveal].is-in .dot { animation: dotPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s backwards; } @keyframes dotPop { from { transform: scale(0); } 60% { transform: scale(1.35); } to { transform: scale(1); } } /* Selection, tap, scrollbars - palette-true details. */ ::selection { background: rgba(200, 95, 69, 0.25); } .band ::selection, .cta-band ::selection, .site-footer ::selection { background: rgba(228, 132, 97, 0.4); } body { -webkit-tap-highlight-color: transparent; } /* Keyboard focus, branded - one system for every interactive element. */ :where(a, button, summary, input, select, [tabindex]):focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; border-radius: 4px; } .band :where(a, button):focus-visible, .cta-band :where(a, button):focus-visible, .site-footer :where(a, button):focus-visible { outline-color: var(--paper); } /* Cross-document view transitions (Chrome): page-to-page feels like one app. Other browsers keep normal loads. */ @media not (prefers-reduced-motion: reduce) { @view-transition { navigation: auto; } } .site-header { view-transition-name: site-header; } .serif-accent { font-family: "Newsreader", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 500; letter-spacing: -0.015em; } .display-accent-price { position: relative; display: inline-block; color: var(--accent); font-family: "Manrope", "Avenir Next", sans-serif; font-style: normal; font-weight: 800; letter-spacing: -0.055em; } .band .dot, .cta-band .dot { color: var(--accent-soft); } /* ---- header ---- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; height: 76px; padding: 0 max(24px, calc((100% - 1180px) / 2)); background: var(--header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.3s ease; } .site-header.is-scrolled { border-bottom-color: var(--line-soft); } .header-actions { display: flex; align-items: center; gap: 14px; } .brand svg { height: 44px; width: auto; } /* header logo ships hardcoded light-mode fills inline (matches --ink / --accent / --ink-soft exactly) so it renders correctly with no JS; these overrides make it track the theme instead of going invisible against a dark header. Footer logo (.footer-brand) is intentionally NOT touched - the footer is permanently dark regardless of site theme. */ .brand svg path { fill: var(--ink); } .brand svg text tspan:nth-child(1) { fill: var(--ink); } .brand svg text tspan:nth-child(2) { fill: var(--accent); } .brand svg text tspan:nth-child(3) { fill: var(--ink-soft); } .site-nav { display: flex; gap: 34px; font-size: 15px; font-weight: 600; color: var(--ink-soft); } .site-nav a { padding: 6px 0; border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .site-nav a:hover { color: var(--ink); } .site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 38px; height: 38px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .theme-toggle:hover { border-color: var(--accent-soft); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle-icon { position: absolute; font-size: 14px; line-height: 1; transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .theme-icon-sun { opacity: 1; transform: scale(1) rotate(0deg); } .theme-icon-moon { opacity: 0; transform: scale(0.4) rotate(-45deg); } :root[data-theme="dark"] .theme-icon-sun { opacity: 0; transform: scale(0.4) rotate(45deg); } :root[data-theme="dark"] .theme-icon-moon { opacity: 1; transform: scale(1) rotate(0deg); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-icon-sun { opacity: 0; transform: scale(0.4) rotate(45deg); } :root:not([data-theme]) .theme-icon-moon { opacity: 1; transform: scale(1) rotate(0deg); } } @media (prefers-reduced-motion: reduce) { .theme-toggle-icon { transition: opacity 0.15s ease; } } /* ---- ⌘K command palette ---- */ .cmdk-trigger { display: inline-flex; align-items: center; gap: 2px; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); color: var(--muted); font-family: var(--mono); font-size: 12px; font-weight: 700; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .cmdk-trigger:hover { border-color: var(--accent-soft); color: var(--ink); } .cmdk-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (max-width: 720px) { .cmdk-trigger { display: none; } } .cmdk-overlay { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: center; padding-top: 12vh; background: rgba(24, 34, 44, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .cmdk-overlay.open { opacity: 1; pointer-events: auto; } .cmdk-panel { width: min(560px, calc(100% - 48px)); height: fit-content; background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow-soft); overflow: hidden; transform: translateY(-10px) scale(0.98); transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1); } .cmdk-overlay.open .cmdk-panel { transform: translateY(0) scale(1); } @media (prefers-reduced-motion: reduce) { .cmdk-overlay, .cmdk-panel { transition: none; } } .cmdk-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); } .cmdk-input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--ink); outline: none; } .cmdk-input::placeholder { color: var(--muted); } .cmdk-hint { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; flex: 0 0 auto; } .cmdk-list { max-height: 360px; overflow-y: auto; padding: 8px; } .cmdk-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: var(--r-ctl); cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink); } .cmdk-item.active { background: var(--paper-deep); } .cmdk-item-tag { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--muted); flex: 0 0 auto; } .cmdk-empty { padding: 28px 12px; text-align: center; color: var(--muted); font-size: 13px; } .nav-exit { font-size: 14px; font-weight: 600; color: var(--ink-soft); opacity: 0.72; border-bottom: 1px solid transparent; transition: border-color 0.2s ease, opacity 0.2s ease; white-space: nowrap; /* .site-header's justify-content: space-between only guarantees a gap here when there's slack left over; at narrower widths this and the nav's last item (Account) can end up flush with zero space between them, so the gap can't rely on the flex layout - it's explicit. */ margin-left: 20px; } .nav-exit:hover { opacity: 1; border-bottom-color: currentColor; } /* Real duplicate of .nav-exit that lives inside .site-nav so it appears in the mobile dropdown (site-nav becomes visible there) - hidden on desktop where the header-actions copy already covers it. */ .nav-exit-mobile { display: none; } .nav-toggle { display: none; } .nav-cta { flex: 0 0 auto; white-space: nowrap; padding: 11px 22px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 600; transition: transform 0.2s ease, background 0.2s ease; } .nav-cta:hover { background: var(--ink-soft); transform: translateY(-1px); } /* ---- buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border: 0; border-radius: var(--r-pill); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .btn-primary { background: var(--accent-deep); color: var(--white); } .btn-primary:hover { background: #9a4331; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(154, 67, 49, 0.28); } .btn:active, .nav-cta:active { transform: translateY(0) scale(0.98); } .btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); } .btn-ghost:hover { border-color: var(--ink-soft); transform: translateY(-1px); } .band .btn-ghost, .cta-band .btn-ghost { border-color: rgba(252, 246, 240, 0.32); color: var(--paper); } .band .btn-ghost:hover, .cta-band .btn-ghost:hover { border-color: rgba(252, 246, 240, 0.62); } /* ---- sections ---- */ .section { padding: 118px 0; border-top: 1px solid var(--line); } .section-tight { padding: 84px 0; border-top: 1px solid var(--line); } .section-head { max-width: 760px; } .section-head.centered { margin: 0 auto; text-align: center; } .section-head.centered .lead { margin-left: auto; margin-right: auto; } main { padding-top: 76px; } /* ---- hero ---- */ .hero { padding: 108px 0 96px; position: relative; } .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(24, 34, 44, 0.055) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(70% 60% at 72% 30%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 60% at 72% 30%, #000 30%, transparent 100%); } .hero .wrap { position: relative; } /* Asymmetric editorial hero: copy left, product right. The frame is allowed to breathe past the wrap's right edge - horizontal tension, not symmetry. */ .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); /* start, not center: the interactive demo column now runs far taller than the headline column, and centering would push the headline down out of the fold to match the demo's midpoint. */ align-items: start; text-align: left; } .hero .display { max-width: 12ch; } .hero .lead { margin: 26px 0 0; max-width: 46ch; } .hero-actions { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; } .hero-note { margin: 22px 0 0; font-size: 14px; color: var(--muted); } /* interior page hero (product / pricing / reviews) - left-aligned, with a coral hairline running the full wrap width under the eyebrow. */ .page-hero { padding: 118px 0 76px; } .page-hero .eyebrow { padding-bottom: 16px; border-bottom: 1px solid rgba(200, 95, 69, 0.35); display: block; } .page-hero .display { font-size: clamp(42px, 6vw, 76px); max-width: 16ch; margin: 34px 0 0; } .page-hero .lead { margin: 22px 0 0; max-width: 58ch; } /* Draft notice for an unfinished legal page. Deliberately reads as an annotation pinned to the page rather than as product chrome: a left rule in the accent, no fill, so nobody mistakes a draft for the published policy. Remove this rule and its markup once the real text ships. */ .policy-draft-note { margin: 28px 0 0; max-width: 58ch; padding: 0 0 0 18px; border-left: 2px solid var(--accent); color: var(--muted); font-size: 0.95rem; line-height: 1.6; } .policy-draft-note strong { display: block; margin-bottom: 4px; color: var(--accent); font-weight: 700; letter-spacing: 0.01em; } .policy-draft-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .policy-draft-note a:hover { color: var(--accent); } /* ---- workspace mockup (home hero visual) ---- */ .frame { border: 1px solid var(--line-soft); border-radius: var(--radius); background: linear-gradient(180deg, var(--white), var(--paper-deep)); box-shadow: 0 30px 90px rgba(24, 34, 44, 0.14), 0 4px 18px rgba(24, 34, 44, 0.06); padding: clamp(18px, 3vw, 36px); position: relative; isolation: isolate; } /* In the hero grid the frame bleeds slightly past the wrap's right edge. */ .hero-grid .frame { margin-right: clamp(-72px, -4vw, -16px); } .frame::before { content: ""; position: absolute; inset: -90px -50px -70px; z-index: -1; pointer-events: none; background: radial-gradient(640px 340px at 22% 12%, rgba(200, 95, 69, 0.16), transparent 70%), radial-gradient(560px 360px at 80% 85%, rgba(24, 191, 145, 0.13), transparent 70%); filter: blur(4px); } .workspace { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(16px, 2.4vw, 28px); align-items: start; text-align: left; position: relative; } /* Inside the hero's right column the frame is ~45vw, so the workspace stacks: composer above, rail below. */ .hero-grid .workspace { grid-template-columns: 1fr; } /* ---- hero demo loop (state-driven) ---- */ .composer-swap { display: grid; } .composer-swap .composer-text { grid-area: 1 / 1; transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); } .ct-final { opacity: 0; transform: translateY(6px); } [data-hero-demo][data-state="applied"] .ct-draft { opacity: 0; } [data-hero-demo][data-state="applied"] .ct-final { opacity: 1; transform: translateY(0); } /* The loop's fourth beat: everything settles to 60% before dissolving back to the draft, so the restart reads as a dissolve, not a cut. (.settling is applied ON TOP of data-state="applied" so the rail keeps its green state while fading.) */ [data-hero-demo].settling .composer-swap, [data-hero-demo].settling .rail { opacity: 0.6; } [data-hero-demo] .composer-swap, [data-hero-demo] .rail { transition: opacity 0.45s ease; } .mark-flag { background: rgba(200, 95, 69, 0.12); border-bottom: 2px dashed var(--accent); border-radius: 3px 3px 0 0; padding: 0 2px; } /* In the pick beat, the flagged phrase gets struck through left-to-right - the act of fixing, made visible. */ [data-hero-demo] .ct-draft .mark-flag { background-image: linear-gradient(var(--accent-deep), var(--accent-deep)); background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 55%; transition: background-size 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); } [data-hero-demo][data-state="pick"] .ct-draft .mark-flag { background-size: 100% 2px; } /* The picked pill presses down like a real click. */ [data-hero-demo][data-state="pick"] .rail-pill:first-child { animation: pillPress 0.4s ease 0.35s; } @keyframes pillPress { 0%, 100% { transform: scale(1); } 45% { transform: scale(0.95); } } .rail-status .rs-b, [data-hero-demo][data-state="applied"] .rail-status .rs-a { display: none; } [data-hero-demo][data-state="applied"] .rail-status .rs-b { display: inline; } .rail-score-line .sl-b, [data-hero-demo][data-state="applied"] .rail-score-line .sl-a { display: none; } [data-hero-demo][data-state="applied"] .rail-score-line .sl-b { display: inline; } [data-hero-demo] .rail-score-line strong { color: #8a5c12; /* darkened for 4.5:1 contrast at this size */ transition: color 0.25s ease; } [data-hero-demo][data-state="applied"] .rail-score-line strong { color: var(--green-deep); } [data-hero-demo] .rail-meter i.meter-fill { width: 58%; background: #d99a2b; } [data-hero-demo][data-state="applied"] .rail-meter i.meter-fill { width: 92%; background: var(--green); } [data-hero-demo] .rail-chips span { transition: color 0.4s ease, border-color 0.4s ease, background 0.4s ease; } .chip-spec { border-color: rgba(200, 95, 69, 0.4) !important; color: var(--accent-deep) !important; background: rgba(200, 95, 69, 0.08) !important; } [data-hero-demo][data-state="applied"] .chip-spec { border-color: rgba(22, 135, 99, 0.35) !important; color: var(--green-deep) !important; background: rgba(24, 191, 145, 0.08) !important; } [data-hero-demo] .rail-pill { transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease; } [data-hero-demo][data-state="pick"] .rail-pill:first-child, [data-hero-demo][data-state="applied"] .rail-pill:first-child { border-color: var(--accent-soft); background: rgba(200, 95, 69, 0.09); color: var(--accent-deep); } .rail-cards { display: grid; } .rail-cards .rail-card { grid-area: 1 / 1; transition: opacity 0.25s ease; } .rc-done { opacity: 0; } [data-hero-demo][data-state="applied"] .rc-flag { opacity: 0; } [data-hero-demo][data-state="applied"] .rc-done { opacity: 1; } /* ---- floating glass chips ---- */ .float-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-pill); font-size: 13px; font-weight: 700; color: var(--ink-soft); background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(24, 34, 44, 0.08); box-shadow: 0 18px 44px rgba(24, 34, 44, 0.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: floaty 6s ease-in-out infinite alternate; } .fc-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--green); } .float-chip-a { top: -20px; right: -12px; opacity: 0; transition: opacity 0.35s ease 0.1s; animation-delay: 0.9s; } [data-hero-demo][data-state="applied"] .float-chip-a { opacity: 1; } .float-chip-b { bottom: -18px; left: -14px; } @keyframes floaty { from { transform: translateY(-4px); } to { transform: translateY(6px); } } .composer { background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow-card); } .composer-label { margin: 0 0 14px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); } /* faux browser chrome on the hero frame */ .browser-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 2px 6px 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line-soft); } .bb-dots { display: flex; gap: 6px; } .bb-dots i { width: 10px; height: 10px; border-radius: var(--r-pill); background: rgba(24, 34, 44, 0.12); } .bb-url { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--muted); background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--r-pill); padding: 6px 20px; } .bb-badge { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--green-deep); background: rgba(24, 191, 145, 0.08); border: 1px solid rgba(22, 135, 99, 0.25); border-radius: var(--r-pill); padding: 5px 12px; } .composer-text { margin: 0; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.6; color: var(--ink-soft); } .mark { background: rgba(24, 191, 145, 0.14); border-bottom: 2px solid var(--green); border-radius: 3px 3px 0 0; padding: 0 2px; } .composer-meta { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--muted); } /* ---- rail preview component ---- */ .rail { --acc: var(--accent); position: relative; background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 20px; display: grid; gap: 14px; overflow: hidden; } /* Background patterns - the real extension's actual mask technique (extension/panel.css's .tt-panel[data-pattern]::before): a repeating SVG mask tinted with the accent color, so it auto-matches whichever theme is picked. Sits behind the rail's own content, only visible in the gaps between cards (padding/gutters) - same subtle effect as the real rail. */ .rail::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-color: var(--acc); opacity: 0; } .rail[data-pattern="floral"]::before { opacity: 0.13; -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-size: 148px 148px; mask-size: 148px 148px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='148'%20height='148'%20viewBox='0%200%20148%20148'%3E%3Cg%20fill='%23fff'%3E%3Ccircle%20cx='36'%20cy='22'%20r='9'/%3E%3Ccircle%20cx='25'%20cy='33'%20r='9'/%3E%3Ccircle%20cx='47'%20cy='33'%20r='9'/%3E%3Ccircle%20cx='28'%20cy='46'%20r='9'/%3E%3Ccircle%20cx='44'%20cy='46'%20r='9'/%3E%3Ccircle%20cx='36'%20cy='36'%20r='6'/%3E%3Ccircle%20cx='106'%20cy='90'%20r='6'/%3E%3Ccircle%20cx='98'%20cy='98'%20r='6'/%3E%3Ccircle%20cx='114'%20cy='98'%20r='6'/%3E%3Ccircle%20cx='101'%20cy='107'%20r='6'/%3E%3Ccircle%20cx='111'%20cy='107'%20r='6'/%3E%3Ccircle%20cx='106'%20cy='100'%20r='4'/%3E%3Cpath%20d='M12%20100q6-14%2014%200q-8%206-14%200Z'/%3E%3Cpath%20d='M120%2030q6-14%2014%200q-8%206-14%200Z'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='148'%20height='148'%20viewBox='0%200%20148%20148'%3E%3Cg%20fill='%23fff'%3E%3Ccircle%20cx='36'%20cy='22'%20r='9'/%3E%3Ccircle%20cx='25'%20cy='33'%20r='9'/%3E%3Ccircle%20cx='47'%20cy='33'%20r='9'/%3E%3Ccircle%20cx='28'%20cy='46'%20r='9'/%3E%3Ccircle%20cx='44'%20cy='46'%20r='9'/%3E%3Ccircle%20cx='36'%20cy='36'%20r='6'/%3E%3Ccircle%20cx='106'%20cy='90'%20r='6'/%3E%3Ccircle%20cx='98'%20cy='98'%20r='6'/%3E%3Ccircle%20cx='114'%20cy='98'%20r='6'/%3E%3Ccircle%20cx='101'%20cy='107'%20r='6'/%3E%3Ccircle%20cx='111'%20cy='107'%20r='6'/%3E%3Ccircle%20cx='106'%20cy='100'%20r='4'/%3E%3Cpath%20d='M12%20100q6-14%2014%200q-8%206-14%200Z'/%3E%3Cpath%20d='M120%2030q6-14%2014%200q-8%206-14%200Z'/%3E%3C/g%3E%3C/svg%3E"); } .rail[data-pattern="star"]::before { opacity: 0.13; -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-size: 160px 160px; mask-size: 160px 160px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%20viewBox='0%200%20160%20160'%3E%3Cg%20fill='%23fff'%3E%3Cpath%20d='M20%2030L45%2015L70%2040L100%2020L130%2055'%20stroke='%23fff'%20stroke-width='1.4'%20fill='none'/%3E%3Cpath%20d='M115%2090L140%20120'%20stroke='%23fff'%20stroke-width='1.4'%20fill='none'/%3E%3Cpath%20d='M85%20110L50%20130L15%2095'%20stroke='%23fff'%20stroke-width='1.4'%20fill='none'/%3E%3Ccircle%20cx='20'%20cy='30'%20r='3'/%3E%3Ccircle%20cx='45'%20cy='15'%20r='2.2'/%3E%3Ccircle%20cx='70'%20cy='40'%20r='2.6'/%3E%3Ccircle%20cx='100'%20cy='20'%20r='2.2'/%3E%3Cpath%20d='M130%2048L132%2053L137%2055L132%2057L130%2062L128%2057L123%2055L128%2053Z'/%3E%3Ccircle%20cx='115'%20cy='90'%20r='2.4'/%3E%3Cpath%20d='M140%20114L142%20118L146%20120L142%20122L140%20126L138%20122L134%20120L138%20118Z'/%3E%3Ccircle%20cx='85'%20cy='110'%20r='2.2'/%3E%3Ccircle%20cx='50'%20cy='130'%20r='2.8'/%3E%3Ccircle%20cx='15'%20cy='95'%20r='2.2'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%20viewBox='0%200%20160%20160'%3E%3Cg%20fill='%23fff'%3E%3Cpath%20d='M20%2030L45%2015L70%2040L100%2020L130%2055'%20stroke='%23fff'%20stroke-width='1.4'%20fill='none'/%3E%3Cpath%20d='M115%2090L140%20120'%20stroke='%23fff'%20stroke-width='1.4'%20fill='none'/%3E%3Cpath%20d='M85%20110L50%20130L15%2095'%20stroke='%23fff'%20stroke-width='1.4'%20fill='none'/%3E%3Ccircle%20cx='20'%20cy='30'%20r='3'/%3E%3Ccircle%20cx='45'%20cy='15'%20r='2.2'/%3E%3Ccircle%20cx='70'%20cy='40'%20r='2.6'/%3E%3Ccircle%20cx='100'%20cy='20'%20r='2.2'/%3E%3Cpath%20d='M130%2048L132%2053L137%2055L132%2057L130%2062L128%2057L123%2055L128%2053Z'/%3E%3Ccircle%20cx='115'%20cy='90'%20r='2.4'/%3E%3Cpath%20d='M140%20114L142%20118L146%20120L142%20122L140%20126L138%20122L134%20120L138%20118Z'/%3E%3Ccircle%20cx='85'%20cy='110'%20r='2.2'/%3E%3Ccircle%20cx='50'%20cy='130'%20r='2.8'/%3E%3Ccircle%20cx='15'%20cy='95'%20r='2.2'/%3E%3C/g%3E%3C/svg%3E"); } .rail > * { position: relative; z-index: 1; } .rail-head { display: flex; align-items: center; justify-content: space-between; } .rail-brand { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; } .rail-brand i { font-style: normal; color: var(--acc); } .rail-status { font-size: 12px; color: var(--muted); } .rail-score { border: 1px solid var(--line-soft); border-radius: var(--r-ctl); padding: 14px; display: grid; gap: 10px; } .rail-score-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 700; } .rail-score-top strong { color: var(--green-deep); font-size: 13px; } .rail-score-line { margin: 0; font-size: 13.5px; font-weight: 700; } .rail-score-line strong { color: var(--green-deep); } .rail-score-line.is-weak strong { color: var(--acc); } .rail-meter { height: 6px; border-radius: 99px; background: rgba(24, 34, 44, 0.08); overflow: hidden; } .rail-meter i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--green); transition: width 0.6s cubic-bezier(0.25, 0.8, 0.3, 1) 0.15s, background 0.35s ease; } .is-in .rail-meter i, .rail.static .rail-meter i { width: var(--w, 86%); } .rail-chips { display: flex; gap: 6px; flex-wrap: wrap; } .rail-chips span { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); } .rail-chips span.ok { border-color: rgba(22, 135, 99, 0.35); color: var(--green-deep); background: rgba(24, 191, 145, 0.08); } .rail-chips span.flag { border-color: rgba(200, 95, 69, 0.4); color: var(--accent-deep); background: rgba(200, 95, 69, 0.08); } /* The real rail's persistent free-form question box - sits below the score, above the card stack, in the actual extension (panel.js's tt-askbox). Illustrative only in these mockups: styled to match, not wired live. */ .rail-askbox { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--paper); } .rail-askbox-text { flex: 1; font-size: 12.5px; color: var(--muted); } .rail-askbox-submit { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green-deep); color: var(--white); font-size: 11px; flex: 0 0 auto; } .rail-card { position: relative; border: 1px solid var(--line-soft); border-left: 3px solid var(--acc); border-radius: var(--r-ctl); padding: 14px 14px 14px 16px; display: grid; gap: 10px; } .rail-card-head { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 10px; } .rail-card-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(200, 95, 69, 0.1); color: var(--acc); font-family: var(--mono); font-size: 10.5px; font-weight: 700; margin-top: 1px; } .rail-card-title { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.3; } .rail-card-dismiss { border: 0; background: none; padding: 2px; font-size: 15px; line-height: 1; color: var(--muted); cursor: pointer; } .rail-card-dismiss:hover { color: var(--ink); } .rail-card-hint { margin: 0 0 0 32px; font-size: 13px; color: var(--muted); } .rail-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: 32px; } .rail-pill { padding: 7px 14px; font-size: 13px; font-weight: 600; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); color: var(--ink-soft); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; } .rail-pill:hover { border-color: rgba(24, 34, 44, 0.3); } .rail-pill.sel { border-color: var(--acc); background: rgba(200, 95, 69, 0.09); color: var(--accent-deep); } .rail-pill-input { padding: 7px 14px; font-size: 13px; border: 1px dashed var(--line); border-radius: var(--r-pill); color: var(--muted); background: transparent; } .rail-submit { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--green-deep); /* 4.5:1 with white - it's a real control */ color: var(--white); font-size: 14px; cursor: pointer; transition: filter 0.2s ease; margin-left: auto; } .rail-submit:hover { filter: brightness(0.94); } /* Accepting deserves a reward: the button flips to a check and pops, the score card pulses green, the freshly-ok chip snaps in. */ .rail-submit.did-accept, .rail-actions .accept.did-accept { animation: acceptPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes acceptPop { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } } .rail-score.score-pulse { animation: scorePulse 0.6s ease; } @keyframes scorePulse { 0% { background: transparent; transform: scale(1); } 35% { background: rgba(24, 191, 145, 0.09); transform: scale(1.012); } 100% { background: transparent; transform: scale(1); } } .rail-chips span.chip-pop { animation: chipPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes chipPop { 0% { transform: scale(0.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } } .rail-approve { display: block; width: 100%; padding: 12px; margin-top: 2px; border: 0; border-radius: var(--r-ctl); background: var(--ink); color: var(--paper); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background 0.2s ease; } .rail-approve:hover { background: var(--ink-soft); } /* ---- interactive rail mockups (product demo + customization teaser) ---- */ /* Completion card: hidden until every suggestion is handled, then the demo ends on the same payoff the real product gives. */ @keyframes completeIn { from { opacity: 0; transform: translateY(8px); } } .rail-wrap { display: grid; gap: 12px; } .mini-composer { background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-card); } .mini-composer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .mini-composer-label { margin: 0; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); } .mini-composer-own { border: 0; background: none; padding: 0; font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: color 0.15s ease; } .mini-composer-own:hover { color: var(--accent-deep); } .mini-composer-own:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .mini-composer-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); } .mini-composer-input { display: block; width: 100%; resize: none; border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 10px 12px; font: inherit; font-size: 14.5px; line-height: 1.55; color: var(--ink); background: var(--paper); } .mini-composer-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .mini-composer-input::placeholder { color: var(--muted); } .rail-free-empty { padding: 22px 16px; text-align: center; color: var(--muted); font-size: 13px; border: 1px dashed var(--line); border-radius: var(--r-ctl); } .rail-hint { margin: 0; font-size: 13px; color: var(--muted); } .rail-reset { border: 0; background: none; padding: 0; margin-left: 8px; font: inherit; font-weight: 600; color: var(--accent-deep); cursor: pointer; } .rail-reset:hover { color: var(--accent-deep); text-decoration: underline; } .demo-caption .rail-reset { margin-left: 10px; } .rail-tag { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acc); transition: color 0.4s ease; } .rail-card p { margin: 0; font-size: 13.5px; color: var(--ink-soft); } .rail-opts { display: grid; gap: 6px; } .rail-opts button { text-align: left; padding: 8px 12px; font-size: 13px; font-weight: 600; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--white); color: var(--ink-soft); cursor: default; } .rail-opts button:hover { border-color: rgba(24, 34, 44, 0.3); } .rail-opts button.sel { border-color: var(--accent-soft); background: rgba(200, 95, 69, 0.09); color: var(--accent-deep); } .rail-actions { display: flex; gap: 8px; margin-left: 32px; } .rail-actions button { padding: 8px 16px; font-size: 13px; font-weight: 600; border-radius: var(--r-ctl); border: 1px solid transparent; cursor: default; } .rail-actions .accept:hover { filter: brightness(0.94); } .rail-actions .ghost:hover { border-color: rgba(24, 34, 44, 0.3); } .rail-actions .accept { background: var(--acc); color: var(--white); transition: background 0.4s ease; } .rail-actions .ghost { background: transparent; border-color: var(--line); color: var(--muted); } /* ---- manuscript-proof cards (edit/tip suggestions) ---- The real extension's actual edit-card look (extension/panel.css's .tt-proof-*): a paper-colored top half in serif with the flagged phrase struck through, a dark ink margin below with the replacement - not a generic white card with buttons. `.rail-card--proof` is a modifier on the existing `.rail-card` (data-bump/is-resolved collapse logic in site.js is untouched); only the two edit-type demo cards use it, flag/question cards keep their existing stacked-pill look unchanged. */ .rail-card--proof { border-left: 0; padding: 0; overflow: hidden; gap: 0; } .rail-proof-paper { padding: 12px 14px 10px; background: linear-gradient(90deg, rgba(200, 95, 69, 0.035) 1px, transparent 1px), linear-gradient(rgba(24, 34, 44, 0.02) 1px, transparent 1px), var(--paper); background-size: 22px 22px, 22px 22px, auto; border-bottom: 1px solid var(--line); } .rail-proof-line { font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.35; } .rail-proof-mark { position: relative; color: var(--accent); text-decoration-line: underline line-through; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; } /* Literal, not var(--ink)/var(--paper): this reproduces the real extension's actual manuscript-proof card look (a fixed dark margin, regardless of the extension's OWN light/dark mode) - it shouldn't invert with the marketing site's theme either, or the demo stops matching the real product it's demonstrating. */ .rail-proof-margin { padding: 12px 14px; display: grid; gap: 6px; background: linear-gradient(180deg, #10202d, #18222c); color: #fcf6f0; } .rail-margin-label { font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-soft); } .rail-margin-replacement { font-size: 15.5px; font-weight: 800; line-height: 1.3; color: var(--green); } .rail-margin-why { font-size: 12px; line-height: 1.4; color: rgba(252, 246, 240, 0.82); } .rail-card--proof .rail-actions { margin-left: 0; margin-top: 4px; } .rail-card--proof .rail-actions .accept { background: var(--green); } .rail-card--proof .rail-actions .ghost { background: rgba(252, 246, 240, 0.06); border-color: rgba(252, 246, 240, 0.24); color: rgba(252, 246, 240, 0.85); } /* ---- trust strip ---- */ .strip { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 26px 0; } .strip-items { display: flex; justify-content: center; gap: clamp(24px, 5vw, 64px); flex-wrap: wrap; font-size: 14px; font-weight: 600; color: var(--muted); } .strip-items span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 99px; background: var(--accent); margin-right: 10px; vertical-align: 2px; } /* ---- editorial ledger (index #why) ---- Numbered rows, hairline rules, oversized Newsreader numerals - the site's own vocabulary instead of an anonymous card grid. */ .ledger { margin-top: 58px; border-top: 1px solid var(--line); } .ledger-row { display: grid; grid-template-columns: minmax(64px, 110px) 1fr 1.45fr; gap: clamp(18px, 3vw, 44px); align-items: baseline; padding: 34px 0; border-bottom: 1px solid var(--line); position: relative; } .ledger-num { font-family: "Newsreader", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 500; font-size: clamp(34px, 4vw, 52px); line-height: 1; color: var(--accent); } .ledger-row h3 { margin: 0; font-size: clamp(19px, 2vw, 23px); font-weight: 800; letter-spacing: -0.02em; } .ledger-row p { margin: 0; font-size: 15.5px; color: var(--muted); max-width: 52ch; } /* ---- feature cards ---- Two-material rule: rounded + shadow is PRODUCT CHROME (frame, composer, rail). Editorial content sits square with a hairline - so the product mockups are the only "app-shaped" objects on the page. */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 58px; } .card { background: var(--white); border: 1px solid var(--line); border-radius: 2px; padding: 30px 28px; transition: border-color 0.25s ease; } .card:hover { border-color: var(--ink-soft); } .card h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; } .card p { margin: 12px 0 0; font-size: 15px; color: var(--muted); } .card-num { display: block; margin-bottom: 22px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--accent-deep); } /* ---- numbers ---- */ .numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 58px; } .number { border-top: 2px solid var(--ink); padding-top: 22px; } .number strong { display: block; font-family: var(--mono); font-size: clamp(38px, 4.4vw, 56px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; } .number span { display: block; margin-top: 10px; font-size: 14.5px; color: var(--muted); max-width: 24ch; } /* ---- navy band ---- */ /* Literal, not var(--ink)/var(--paper) - same reasoning as .site-footer: this is a permanently-dark contrast band regardless of site theme. */ .band { background: radial-gradient(900px 520px at 85% 0%, rgba(228, 132, 97, 0.12), transparent 60%), #18222c; color: #fcf6f0; padding: 122px 0; position: relative; overflow: hidden; } /* The mark, finally used as geometry: ghosted at architectural scale in the band's dead right space. */ .band::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 460px; height: 320px; pointer-events: none; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 80'%3E%3Cpath d='M3.85 75.4L26.4 35.3C28.7 31.2 34.4 30.8 37.25 34.55L51.1 52.75L38.3 75.4H3.85Z' fill='rgba(252,246,240,0.05)'/%3E%3Cpath d='M42.75 21.1C45.45 16.5 52.05 16.05 55.35 20.25L106 75.4H75.75L37.6 31.75C34.65 28.4 35.05 23.95 39.55 22.45L42.75 21.1Z' fill='rgba(252,246,240,0.05)'/%3E%3C/svg%3E"); } .band .wrap { position: relative; z-index: 1; } .band .eyebrow { color: var(--accent-soft); } .band-quote { max-width: 900px; margin: 0; font-family: "Newsreader", Georgia, "Times New Roman", serif; font-style: italic; font-size: clamp(30px, 4.4vw, 56px); font-weight: 500; letter-spacing: -0.005em; line-height: 1.18; text-indent: -0.45em; /* hang the opening quote so lines align optically */ } .band-attrib { margin: 28px 0 0; font-size: 15px; color: #e8ded6; } .band-attrib strong { color: #fcf6f0; font-weight: 700; } .band-link { display: inline-block; margin-top: 40px; font-size: 15px; font-weight: 700; color: var(--accent-soft); border-bottom: 1px solid transparent; transition: border-color 0.2s ease; } .band-link:hover { border-bottom-color: var(--accent-soft); } /* ---- split rows (teaser / deep dives) ---- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center; } .split .lead { max-width: 46ch; } .split-list { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 16px; } .split-list li { padding-left: 26px; position: relative; font-size: 16px; color: var(--ink-soft); } .split-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); } .split-list strong { font-weight: 700; color: var(--ink); } .split-cta { display: inline-block; margin-top: 34px; font-size: 16px; font-weight: 700; color: var(--accent-deep); } .split-cta:hover { color: #9a4331; } /* Text-link arrows live in a span so they can actually move on hover, and the link draws an underline left-to-right - the refined-editorial tell. */ .split-cta .arr, .band-link .arr { display: inline-block; transition: transform 0.2s ease; } .split-cta:hover .arr, .band-link:hover .arr { transform: translateX(4px); } .split-cta, .band-link { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%; transition: background-size 0.3s ease, color 0.2s ease; padding-bottom: 2px; } .split-cta:hover, .band-link:hover { background-size: 100% 1px; } /* ---- numbered deep-dive rows (product) ---- */ .dive { border-top: 1px solid var(--line); padding: 54px 0; display: grid; grid-template-columns: 120px 1fr 1.2fr; gap: clamp(20px, 4vw, 60px); align-items: start; } .dive:last-of-type { border-bottom: 1px solid var(--line); } .dive-num { font-family: "Newsreader", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 500; font-size: clamp(38px, 4.4vw, 56px); line-height: 1; color: var(--accent); } .dive h3 { margin: 0; font-size: clamp(21px, 2.4vw, 27px); font-weight: 800; letter-spacing: -0.015em; } .dive p { margin: 0; font-size: 16px; color: var(--muted); max-width: 56ch; } /* ---- "beyond the fix" - product.html's manuscript-proof + continuation demo ---- */ .beyond-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 56px; } @media (max-width: 860px) { .beyond-grid { grid-template-columns: 1fr; } } /* Compact decision pages: put the actual choice in the first viewport. */ .pricing-compact { padding: calc(var(--global-header-height, 76px) + 26px) 0 22px; border-bottom: 1px solid var(--line); } .pricing-compact-row { display: flex; align-items: end; justify-content: space-between; gap: 24px; } .pricing-compact .eyebrow { margin-bottom: 9px; } .pricing-compact h1, .downloads-compact h1 { margin: 0; font-size: clamp(40px, 5vw, 64px); font-weight: 750; letter-spacing: -0.06em; line-height: 0.96; } .pricing-compact .toggle-row { margin: 0; } .pricing-tiers { padding: 24px 0 44px; } .pricing-tiers .tiers { margin-top: 0; } .pricing-tiers .tier { padding: 24px 25px; } .pricing-tiers .tier-price { margin-top: 17px; font-size: 40px; } .pricing-tiers .tier-list { gap: 8px; margin-top: 17px; padding-top: 17px; font-size: 13.5px; } .pricing-tiers .tier .btn { margin-top: 20px; min-height: 44px; } .pricing-tiers .tier-foot { margin-top: 9px; font-size: 11.5px; } .pricing-tiers .pricing-note { margin-top: 18px; font-size: 12px; } .downloads-first { padding: calc(var(--global-header-height, 76px) + 26px) 0 48px; } .downloads-compact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 0.45fr); align-items: end; gap: 38px; margin-bottom: 20px; } .downloads-compact .eyebrow { margin-bottom: 9px; } .downloads-compact > p { padding-bottom: 4px; color: var(--muted); font-size: 14px; } .downloads-first .dl-grid { margin-top: 0; } .downloads-first .dl-card { padding: 30px 34px; } .downloads-first .dl-card-primary { min-height: 490px; } /* Downloads: the one thing this page exists for gets the big centered button in the middle of the dark card. */ .dl-now { align-self: center; min-height: 66px; margin: auto 0; padding-inline: 52px; font-size: 19px; border-radius: 999px; } .downloads-first .dl-card-primary { display: flex; flex-direction: column; } .downloads-first .dl-card-primary .dl-now { margin-top: auto; margin-bottom: auto; } .downloads-first .dl-card-secondary { min-height: 260px; } .downloads-first .dl-icon { margin-bottom: 18px; } .downloads-first .dl-card h3 { font-size: clamp(28px, 3vw, 40px); } .downloads-first .dl-card p { margin-top: 13px; } .downloads-first .dl-card .btn { margin-top: 18px; } .downloads-first .dl-future-heading { padding: 21px 28px 14px; } .downloads-first .dl-row { padding: 18px 28px; } .downloads-first .dl-note { margin-top: 15px; font-size: 12px; } @media (max-width: 980px) { .pricing-compact-row, .downloads-compact { align-items: flex-start; flex-direction: column; } .pricing-compact-row { display: flex; } .downloads-compact { display: grid; grid-template-columns: 1fr; gap: 14px; } } @media (max-width: 640px) { .pricing-compact { padding-top: calc(var(--global-header-height, 72px) + 24px); } .pricing-compact .toggle-row, .pricing-compact .seg { width: 100%; } .pricing-compact .seg button { flex: 1; } .downloads-first { padding-top: calc(var(--global-header-height, 72px) + 24px); } .downloads-first .dl-card-primary { min-height: 380px; } .downloads-first .dl-card-secondary { min-height: 270px; } } .beyond-card { display: flex; flex-direction: column; } .beyond-label { margin: 0 0 16px; font-size: 14px; font-weight: 700; color: var(--ink-soft); } .beyond-copy { margin: 16px 0 0; font-size: 14.5px; color: var(--muted); line-height: 1.55; } .beyond-rail { padding: 20px; } .beyond-rail .rail-card--proof { margin: 0; } /* ---- continuation / auto-send demo ---- */ .continuation-demo { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-card); padding: 20px; display: flex; flex-direction: column; gap: 14px; } .continuation-chat { display: flex; flex-direction: column; gap: 8px; } .continuation-bubble { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; } .continuation-bubble-user { align-self: flex-end; background: var(--ink); color: var(--paper); border-bottom-right-radius: 4px; } .continuation-bubble-ai { align-self: flex-start; background: var(--paper-deep); color: var(--ink-soft); border-bottom-left-radius: 4px; } .continuation-bubble.is-entering { animation: continuationBubbleIn 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); } @keyframes continuationBubbleIn { from { opacity: 0; transform: translateY(6px); } } .continuation-suggest { border-top: 1px solid var(--line-soft); padding-top: 12px; opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.3s ease, max-height 0.3s ease; } .continuation-suggest.is-visible { opacity: 1; max-height: 120px; } .continuation-label { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .continuation-chips { display: flex; flex-wrap: wrap; gap: 8px; } .continuation-chip { padding: 7px 13px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper); font-size: 13px; font-weight: 600; color: var(--ink-soft); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, background 0.2s ease; } .continuation-chip[data-continuation-active].is-picked { border-color: var(--accent); background: var(--accent-soft); color: var(--white); transform: scale(1.05); } .continuation-composer { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 10px 14px; font-size: 13.5px; min-height: 20px; color: var(--ink); } .continuation-composer-placeholder { color: var(--muted); } .continuation-composer.is-filled .continuation-composer-placeholder { display: none; } .continuation-composer-text { display: none; } .continuation-composer.is-filled .continuation-composer-text { display: inline; } .continuation-composer.is-sending { border-color: var(--accent); transition: border-color 0.15s ease; } @media (prefers-reduced-motion: reduce) { .continuation-bubble.is-entering { animation: none; } .continuation-suggest { transition: none; } .continuation-chip { transition: none; } } /* ---- before/after gallery (product.html) ---- */ .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 48px; } @media (max-width: 760px) { .gallery-grid { grid-template-columns: 1fr; } } .gallery-card { background: var(--white); border: 1px solid var(--line); border-radius: 2px; padding: 28px 26px; } .gallery-tag { margin: 0 0 16px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .gallery-before, .gallery-after { margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; } .gallery-before { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--accent-soft); } .gallery-after { margin-bottom: 0; color: var(--ink); font-weight: 600; padding-top: 14px; border-top: 1px solid var(--line-soft); } .gallery-kicker { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; } .gallery-before .gallery-kicker { color: var(--accent-soft); } .gallery-after .gallery-kicker { color: var(--green-deep); } /* ---- product demo ---- */ .demo { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 5vw, 80px); align-items: start; margin-top: 64px; } .demo-controls { display: grid; gap: 40px; position: sticky; top: 116px; } /* In the hero's right column the demo has ~45% of the wrap's width, far narrower than the full-width section it was designed for - stack controls above the stage instead of sitting them side by side. */ .hero-grid .demo { grid-template-columns: 1fr; gap: 22px; margin-top: 0; } .hero-grid .demo-controls { position: static; gap: 20px; } .hero-grid .demo-stage .rail { max-width: none; } .control-label { margin: 0 0 14px; font-size: 15px; font-weight: 800; } .control-hint { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); } .seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); padding: 4px; gap: 4px; } .seg button { padding: 9px 18px; font-size: 14px; font-weight: 600; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); } .swatches { display: flex; gap: 12px; } .swatch { width: 40px; height: 40px; border-radius: var(--r-ctl); border: 2px solid transparent; box-shadow: 0 0 0 1px var(--line-soft); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .swatch:hover { transform: scale(1.08); } .swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); } .swatch:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .demo-note { font-size: 13px; color: var(--muted); border-left: 3px solid var(--accent); padding-left: 14px; } /* ---- pricing ROI calculator ---- */ .calc { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: center; } @media (max-width: 860px) { .calc { grid-template-columns: 1fr; } } .calc-widget { background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: clamp(24px, 3vw, 32px); } .calc-slider-row { display: flex; align-items: center; gap: 16px; } .calc-slider { flex: 1; accent-color: var(--accent); height: 4px; } .calc-slider-value { font-family: var(--mono); font-size: 20px; font-weight: 800; color: var(--accent); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; } .calc-slider-label { margin: 10px 0 24px; font-size: 13px; font-weight: 700; color: var(--ink); } .calc-assumption { font-weight: 500; color: var(--muted); } .calc-results { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .calc-result { display: grid; gap: 2px; } .calc-result strong { font-family: var(--mono); font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .calc-result span { font-size: 12px; color: var(--muted); font-weight: 600; } .calc-note { margin: 16px 0 0; font-size: 13.5px; color: var(--green-deep); font-weight: 700; } .calc-note.calc-note-zero { color: var(--muted); font-weight: 600; } .demo-stage { background: linear-gradient(180deg, var(--white), var(--paper-deep)); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: 0 30px 90px rgba(24, 34, 44, 0.13), 0 4px 18px rgba(24, 34, 44, 0.06); padding: clamp(20px, 3vw, 36px); position: relative; isolation: isolate; } .demo-stage::before { content: ""; position: absolute; inset: -60px -40px; z-index: -1; pointer-events: none; background: radial-gradient(560px 400px at 50% 32%, color-mix(in srgb, var(--stage-acc, #c85f45) 16%, transparent), transparent 70%); filter: blur(4px); } .demo-stage.pulse .rail { animation: railPulse 0.4s ease; } @keyframes railPulse { 0% { opacity: 0.55; transform: translateY(5px); } 100% { opacity: 1; transform: none; } } .demo-stage .rail { max-width: 400px; margin: 0 auto; } .demo-stage .rail-card { transition: opacity 0.3s ease; } .demo[data-density="2"] .rail-card[data-card="3"], .demo[data-density="2"] .rail-card[data-card="4"], .demo[data-density="3"] .rail-card[data-card="4"] { display: none; } .demo-caption { margin: 18px auto 0; max-width: 400px; text-align: center; font-size: 13px; color: var(--muted); } /* ---- platform chips ---- */ .platforms { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 44px; } .platform { padding: 13px 26px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); font-size: 15px; font-weight: 600; color: var(--ink-soft); } .platform-soon { border-style: dashed; background: transparent; color: var(--muted); font-weight: 600; } /* ---- pricing ---- */ .toggle-row { display: flex; justify-content: center; margin-top: 40px; } .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; align-items: stretch; } .tier { background: var(--white); border: 1px solid var(--line); border-radius: 2px; padding: 36px 32px; display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease; } .tier:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); } /* Literal, not var(--ink)/var(--paper): the featured Pro card is deliberately dark-navy in BOTH themes - that's the whole point of the accent (it's what makes it "featured" against the other cards); letting it invert in dark mode would make it blend in and lose the effect. */ .tier.featured { background: linear-gradient(170deg, #223040, #18222c 58%); color: #fcf6f0; border-color: #18222c; position: relative; box-shadow: 0 30px 80px rgba(24, 34, 44, 0.26); } .tier.featured:hover { box-shadow: 0 34px 90px rgba(24, 34, 44, 0.32); } .tier-badge { position: absolute; top: -13px; left: 32px; padding: 5px 14px; border-radius: 99px; background: var(--accent-deep); color: var(--white); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .tier h3 { margin: 0; font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .tier-tag { margin: 8px 0 0; font-size: 14px; color: var(--muted); } .tier.featured .tier-tag { color: #e8ded6; } .tier-price { margin: 26px 0 0; font-size: 46px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .tier-price small { font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--muted); } .tier.featured .tier-price small { color: #e8ded6; } .tier-cycle { margin: 8px 0 0; font-size: 13px; color: var(--muted); min-height: 18px; } .tier.featured .tier-cycle { color: #e8ded6; } .tier-list { margin: 28px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line-soft); list-style: none; display: grid; gap: 13px; font-size: 14.5px; color: var(--ink-soft); flex: 1; } .tier.featured .tier-list { border-top-color: rgba(252, 246, 240, 0.16); color: #e8ded6; } .tier-list li { padding-left: 24px; position: relative; } .tier-list li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; color: var(--ink-soft); } .tier.featured .tier-list li::before { color: #e8ded6; } .coming-soon { display: inline-flex; align-items: center; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--accent-deep) 24%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--accent-deep) 8%, transparent); color: var(--accent-deep); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; line-height: 1; text-transform: uppercase; white-space: nowrap; } .tier.featured .coming-soon { border-color: rgba(252, 246, 240, 0.24); background: rgba(252, 246, 240, 0.1); color: #fcf6f0; } .tier .btn { margin-top: 32px; justify-content: center; } .tier-foot { margin: 14px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); } .tier.featured .tier-foot { color: #e8ded6; } .pricing-note { margin: 34px auto 0; max-width: 620px; text-align: center; font-size: 14px; color: var(--muted); } /* ---- downloads ---- */ .dl-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(330px, 0.85fr); gap: 0; margin-top: 34px; align-items: stretch; border: 1px solid var(--line); background: var(--white); } @media (max-width: 980px) { .dl-grid { grid-template-columns: 1fr 1fr; } } .download-picker { padding-top: 42px; } .download-intro { display: grid; grid-template-columns: minmax(150px, 0.5fr) 1.5fr; gap: 24px; align-items: end; } .download-intro .eyebrow { margin-bottom: 12px; } .download-intro .h2 { max-width: 13ch; margin-left: auto; text-align: right; } .dl-card { display: flex; flex-direction: column; background: var(--white); padding: clamp(34px, 4vw, 58px); text-align: left; } .dl-card-primary { grid-row: 1 / 3; min-height: 540px; justify-content: flex-end; color: #fcf6f0; background: radial-gradient(480px 320px at 80% 8%, rgba(228, 132, 97, 0.25), transparent 68%), #18222c; } .dl-card-secondary { min-height: 310px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); } .dl-icon { width: 52px; height: 52px; margin: 0 0 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--paper-deep); color: var(--ink); } .dl-card-primary .dl-icon { background: rgba(252, 246, 240, 0.12); color: #fcf6f0; } .dl-icon svg { width: 24px; height: 24px; } .dl-card h3 { margin: 0; font-size: clamp(28px, 3vw, 46px); font-weight: 800; letter-spacing: -0.05em; } .dl-status { margin: 12px 0 0; display: inline-flex; width: fit-content; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--green-deep); background: rgba(24, 191, 145, 0.12); } .dl-status.soon { color: var(--muted); background: var(--paper-deep); } .dl-card p { margin: 18px 0 0; max-width: 34ch; font-size: 15px; line-height: 1.55; color: var(--muted); flex: 1; } .dl-card-primary p { color: rgba(252, 246, 240, 0.72); } .dl-card .btn { margin-top: 22px; justify-content: center; width: fit-content; } .dl-card-primary .btn { background: #fcf6f0; color: #18222c; } .dl-future { border-left: 1px solid var(--line); } .dl-future-heading { padding: 28px 32px 18px; } .dl-future-heading .eyebrow { margin-bottom: 8px; } .dl-future-heading > p:last-child { margin: 0; color: var(--muted); font-size: 14px; } .dl-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 22px 32px; border-top: 1px solid var(--line); } .dl-row .dl-icon { width: 38px; height: 38px; margin: 0; } .dl-row .dl-icon svg { width: 19px; height: 19px; } .dl-row h3, .dl-row p { margin: 0; } .dl-row h3 { font-size: 16px; } .dl-row p { margin-top: 3px; color: var(--muted); font-size: 12.5px; } .dl-row a { color: var(--ink); font-size: 12px; font-weight: 800; text-underline-offset: 4px; } .dl-note { margin: 24px 0 0; max-width: 620px; text-align: left; font-size: 14px; color: var(--muted); } @media (max-width: 760px) { .download-intro { grid-template-columns: 1fr; } .download-intro .h2 { margin-left: 0; text-align: left; } .dl-grid { grid-template-columns: 1fr; } .dl-card-primary { grid-row: auto; min-height: 420px; } .dl-card-secondary, .dl-future { border-left: 0; border-top: 1px solid var(--line); } .dl-card-secondary { min-height: 290px; border-bottom: 0; } } @media (max-width: 560px) { .dl-card { padding: 32px 26px; } .dl-card-primary { min-height: 380px; } .dl-row { grid-template-columns: auto minmax(0, 1fr); padding: 20px 24px; } .dl-row a { grid-column: 2; } .dl-future-heading { padding: 26px 24px 16px; } } /* comparison table */ .table-scroll { overflow-x: auto; margin-top: 56px; border: 1px solid var(--line); border-radius: 2px; background: var(--white); scrollbar-width: thin; scrollbar-color: rgba(24, 34, 44, 0.3) transparent; } .table-note { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); } .table-scroll:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .compare { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14.5px; } .compare th, .compare td { padding: 16px 22px; text-align: left; border-bottom: 1px solid var(--line-soft); } .compare thead th { font-size: 14px; font-weight: 800; background: var(--paper); } .compare thead th:not(:first-child) { text-align: center; width: 17%; } .compare td:not(:first-child) { text-align: center; color: var(--ink-soft); } .compare tbody th { text-align: left; font-weight: 600; } .compare tbody tr:last-child td { border-bottom: 0; } .compare .yes { color: var(--green-deep); font-weight: 800; } .compare .no { color: rgba(24, 34, 44, 0.7); } .compare .group td, .compare .group th { background: var(--paper); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); } /* faq */ .faq { max-width: 760px; margin: 56px auto 0; } .faq details { border-top: 1px solid var(--line); } .faq details:last-child { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; list-style: none; padding: 24px 44px 24px 4px; font-size: 17px; font-weight: 700; position: relative; transition: color 0.2s ease; } .faq summary:hover { color: var(--accent-deep); } /* Animated open/close where supported (Chrome): height interpolates to auto. */ @media not (prefers-reduced-motion: reduce) { :root { interpolate-size: allow-keywords; } .faq details::details-content { block-size: 0; overflow: clip; transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete; } .faq details[open]::details-content { block-size: auto; } } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; color: var(--accent); transition: transform 0.25s ease; } .faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); } .faq details p { margin: 0; padding: 0 4px 26px; font-size: 15.5px; color: var(--muted); max-width: 64ch; } /* ---- reviews ---- */ /* Three cards now (down from six) - a plain equal-height row reads better than a masonry column, and it's the only way to force the three to match height regardless of how much each quote wraps. The featured card stays full-width above it via grid-column: 1 / -1. */ .review-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 58px; } .review { background: var(--white); border: 1px solid var(--line); border-radius: 2px; padding: 44px 28px 28px; position: relative; } /* The words are the content - set them editorially, not in UI sans. */ .review p { margin: 0; font-family: "Newsreader", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 500; font-size: 20px; line-height: 1.5; color: var(--ink); } .review p::before { content: "“"; position: absolute; top: 10px; left: 22px; font-size: 44px; line-height: 1; color: var(--accent); font-weight: 500; font-style: normal; } .review p::after { content: "”"; color: var(--accent); } /* One featured voice spans the whole wall. */ .review.review-featured { grid-column: 1 / -1; padding: 54px 48px 36px; } .review.review-featured p { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.4; max-width: 30ch; } .review-who { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); } .review-who strong { display: block; font-size: 14px; font-weight: 700; } .review-who span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); } .themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 58px; } /* ---- CTA band ---- */ .cta-band { background: radial-gradient(1000px 560px at 50% 118%, rgba(228, 132, 97, 0.15), transparent 65%), var(--ink); color: var(--paper); text-align: center; padding: 128px 0; } .cta-band .h2 { max-width: 18ch; margin: 0 auto; } .cta-band .lead { color: var(--paper-on-ink); margin: 22px auto 0; max-width: 46ch; } .cta-band .hero-actions { margin-top: 40px; justify-content: center; } .cta-band .hero-note { color: rgba(232, 222, 214, 0.75); } /* ---- footer ---- */ /* Deliberately literal, not var(--ink)/var(--paper-on-ink): the footer is a permanently-dark band regardless of site theme (same brand choice as before dark mode existed) - if it read the swappable tokens it would flip to a light footer with dark text in dark mode, the one place on the site the ink/paper swap trick doesn't want to apply. */ .site-footer { background: #18222c; color: #e8ded6; border-top: 1px solid rgba(252, 246, 240, 0.1); padding: 64px 0 44px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; align-items: start; } .footer-brand svg { height: 24px; width: auto; } .footer-brand p { margin: 18px 0 0; font-size: 14px; max-width: 34ch; color: rgba(232, 222, 214, 0.75); } .footer-brand .footer-note { margin-top: 12px; font-size: 13px; color: rgba(232, 222, 214, 0.6); } .footer-note a { color: #e8ded6; text-decoration: underline; text-underline-offset: 3px; } .footer-note a:hover { color: #fcf6f0; } .footer-col h3 { margin: 0 0 16px; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(232, 222, 214, 0.55); } .footer-col a { display: block; padding: 5px 0; font-size: 14.5px; color: #e8ded6; transition: color 0.2s ease; } .footer-col a:hover { color: #fcf6f0; } .footer-meta { margin-top: 54px; padding-top: 24px; border-top: 1px solid rgba(252, 246, 240, 0.1); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: rgba(232, 222, 214, 0.6); } /* Editorial sign-off: a giant ghosted wordmark cropped by the footer's bottom edge. */ .footer-wordmark { margin: 64px 0 -8px; overflow: hidden; pointer-events: none; user-select: none; } .footer-wordmark span { display: block; font-size: clamp(88px, 17vw, 250px); font-weight: 800; letter-spacing: -0.045em; line-height: 0.72; color: rgba(252, 246, 240, 0.05); white-space: nowrap; } /* ---- reveal ---- */ .js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); } [data-reveal].is-in { opacity: 1; transform: none; } /* Reveal variants: the hero frame arrives with weight; ledger/dive/number rules draw themselves in rather than just appearing. */ .js .frame[data-reveal] { transform: translateY(28px) scale(0.985); transition-duration: 0.9s; } .js .ledger-row[data-reveal]::after, .js .number[data-reveal]::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: currentColor; opacity: 0.9; transform: scaleX(0); transform-origin: left; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s; } .js .ledger-row[data-reveal]::after { height: 1px; color: var(--line); opacity: 1; } .js .number[data-reveal]::after { color: var(--ink); } .js .ledger-row[data-reveal].is-in::after, .js .number[data-reveal].is-in::after { transform: scaleX(1); } .js .number[data-reveal] { border-top-color: transparent; position: relative; } .js .ledger-row[data-reveal] { border-bottom-color: transparent; } .js .ledger-row[data-reveal]::after { top: auto; bottom: 0; } [data-reveal="2"] { transition-delay: 0.08s; } [data-reveal="3"] { transition-delay: 0.16s; } [data-reveal="4"] { transition-delay: 0.24s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js [data-reveal] { opacity: 1; transform: none; transition: none; } .js [data-reveal] .dot, .js [data-reveal].is-in .dot { animation: none; } .js .ledger-row[data-reveal]::after, .js .number[data-reveal]::after { transform: none; transition: none; } .js .number[data-reveal] { border-top-color: var(--ink); } .js .ledger-row[data-reveal] { border-bottom-color: var(--line); } .rail-meter i { transition: none; } .float-chip { animation: none; } .rail-submit.did-accept, .rail-actions .accept.did-accept, .rail-score.score-pulse, .rail-chips span.chip-pop, [data-hero-demo][data-state="pick"] .rail-pill:first-child { animation: none; } .demo-stage.pulse .rail { animation: none; } } @media print { .js [data-reveal] { opacity: 1 !important; transform: none !important; } } /* ---- responsive ---- */ @media (max-width: 1020px) { .tiers { grid-template-columns: 1fr 1fr; } .tier.featured { grid-column: 1 / -1; order: -1; } .hero-grid { grid-template-columns: 1fr; gap: 48px; } .hero-grid .frame { margin-right: 0; } .demo { grid-template-columns: 1fr; } .demo-controls { position: static; } } @media (max-width: 1000px) { .card-grid { grid-template-columns: repeat(2, 1fr); } .numbers { grid-template-columns: repeat(2, 1fr); gap: 34px 18px; } .review-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dive { grid-template-columns: 64px 1fr; } .dive p { grid-column: 2; } } @media (max-width: 860px) { .site-nav { display: none; } /* Crowds the row alongside the theme toggle, CTA, and hamburger at this width - the real (clickable) link rides inside the dropdown menu instead, via .nav-exit-mobile below. */ .header-actions > .nav-exit { display: none; } .nav-exit-mobile { display: block; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); } .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0 11px; background: transparent; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; } .nav-toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.25s ease; } .site-header.nav-open .nav-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); } .site-header.nav-open .nav-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); } .site-header.nav-open .site-nav { display: flex; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; gap: 2px; padding: 14px 24px 22px; background: var(--paper); border-bottom: 1px solid var(--line); animation: navDrop 0.25s ease both; } .site-header.nav-open .site-nav a { padding: 10px 0; border-bottom: 0; font-size: 17px; } .section { padding: 84px 0; } .hero { padding: 96px 0 72px; } .workspace { grid-template-columns: 1fr; } .float-chip { display: none; } .split { grid-template-columns: 1fr; } .demo { grid-template-columns: 1fr; } .demo-controls { position: static; } .tiers { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } /* Single column restores DOM order: the free plan leads again. The featured reorder only makes sense in the 2-col range above. */ .tier.featured { order: 0; grid-column: auto; } .hero-grid { grid-template-columns: 1fr; } .hero-grid .frame { margin-right: 0; } .ledger-row { grid-template-columns: 56px 1fr; } .ledger-row p { grid-column: 2; } .footer-grid { grid-template-columns: 1fr; gap: 32px; } } @keyframes navDrop { from { opacity: 0; transform: translateY(-8px); } } @media (max-width: 640px) { .card-grid, .themes { grid-template-columns: 1fr; } .numbers { grid-template-columns: 1fr; } .review-wall { grid-template-columns: 1fr; } .hero-actions .btn { width: 100%; justify-content: center; } } /* ---- how it works (index) ---- Three steps, one horizontal line - sets install expectations in a glance. */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 48px); margin-top: 54px; } .step { border-top: 2px solid var(--ink); padding-top: 20px; position: relative; } .step-num { font-family: "Newsreader", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 500; font-size: 34px; line-height: 1; color: var(--accent); } .step h3 { margin: 12px 0 0; font-size: 18px; font-weight: 800; letter-spacing: -0.015em; } .step p { margin: 8px 0 0; font-size: 14.5px; color: var(--muted); max-width: 30ch; } /* ---- pricing: price-swap acknowledgment ---- */ .price-swap { animation: priceSwap 0.3s ease; } @keyframes priceSwap { from { opacity: 0; transform: translateY(8px); } } /* ---- alpha banner (pricing) ---- */ .alpha-banner { margin: 18px 0 42px; text-align: left; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-soft); } .alpha-banner strong { color: var(--accent-deep); font-weight: 800; } @media (max-width: 640px) { .steps { grid-template-columns: 1fr; } .review.review-featured { padding: 48px 28px 28px; } } @media (prefers-reduced-motion: reduce) { .price-swap { animation: none; } .site-header.nav-open .site-nav { animation: none; } .site-header.nav-open .nav-toggle span:first-child, .site-header.nav-open .nav-toggle span:last-child { transform: none; } } /* ---- hero demo: the Alide review rail, ported from the landing page's full workflow demo (interview -> attach -> suggested prompt -> ready -> send -> reply -> where-to-next), rail only - no chat mock, so it fits a hero column instead of a full-width section. Beats are pre-rendered and revealed by data-beat on .showcase-stage; [data-b] lists the beats an element is visible on. ---- */ .rail-ask { --db: flex; } @keyframes demoIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .showcase-stage [data-b] { animation: none !important; } } .is-target { outline: 2px solid var(--accent-soft); outline-offset: 3px; box-shadow: 0 0 0 7px color-mix(in oklch, var(--accent-soft) 22%, transparent); transition: box-shadow 0.3s ease; } .is-press { filter: brightness(1.3); transform: scale(0.94); } .rail { background: var(--ink-fixed); border-radius: 16px; overflow: hidden; color: #fcf6f0; display: flex; flex-direction: column; font-size: 13px; height: 540px; box-shadow: var(--shadow-soft); } .rail-brand { display: flex; align-items: center; gap: 8px; padding: 14px 16px; background: rgba(0, 0, 0, 0.25); font-weight: 800; letter-spacing: -0.01em; font-size: 14px; flex: none; } .rail-brand svg { width: 24px; height: 18px; flex: none; } .rail-wordmark b { font-weight: 800; color: var(--accent-soft); } .rail-strength { padding: 14px 16px; border-bottom: 1px solid rgba(252, 246, 240, 0.08); } .rail-strength-label { margin: 0 0 8px; font-weight: 800; font-size: 13px; } .rail-word { position: relative; } .rail-word-before, .rail-word-mid, .rail-word-after { transition: opacity 0.3s ease; } .rail-word-before { color: var(--amber); } .rail-word-mid, .rail-word-after { position: absolute; left: 0; opacity: 0; } .rail-word-mid { color: var(--green); } .rail-word-after { color: var(--blue); } .rail-track { display: block; height: 8px; border-radius: 999px; background: rgba(252, 246, 240, 0.14); overflow: hidden; } .rail-fill { display: block; height: 100%; width: 62%; border-radius: inherit; background: var(--amber); transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.5s ease; } .rail-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; } .rail-chips span { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(252, 246, 240, 0.25); color: rgba(252, 246, 240, 0.55); } .rail-chips .is-ok { border-color: var(--green); color: var(--green); } .rail-ask { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(252, 246, 240, 0.08); } .rail-ask span { flex: 1; border: 1px solid rgba(252, 246, 240, 0.2); border-radius: 999px; padding: 8px 14px; font-size: 12px; color: rgba(252, 246, 240, 0.5); font-weight: 600; } .rail-ask i { width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: var(--ink-fixed); font-style: normal; font-weight: 800; display: grid; place-items: center; font-size: 13px; } .rail-body { position: relative; flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; background: radial-gradient(rgba(252, 246, 240, 0.045) 1px, transparent 1px) 0 0 / 18px 18px, var(--ink-fixed); } .rail-card { border: 1.5px solid var(--accent-soft); border-radius: 12px; background: rgba(252, 246, 240, 0.045); padding: 12px; } .rail-num { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(252, 246, 240, 0.3); font-size: 11px; font-weight: 700; margin-right: 6px; color: rgba(252, 246, 240, 0.7); vertical-align: 1px; } .rail-int-q { margin: 0 0 10px; font-weight: 800; font-size: 14px; } .rail-int-echo { margin: -4px 0 10px; text-align: center; font-size: 11.5px; font-weight: 700; color: rgba(252, 246, 240, 0.55); } .rail-chips-col { display: flex; flex-direction: column; gap: 6px; } .rail-chips-col span { border: 1px solid rgba(252, 246, 240, 0.3); border-radius: 999px; padding: 7px 12px; text-align: center; font-size: 12px; font-weight: 700; color: rgba(252, 246, 240, 0.9); transition: filter 0.2s ease, transform 0.2s ease; } .rail-chips-col .rail-ortype { border: 0; color: rgba(252, 246, 240, 0.45); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 0 0; } .rail-ortype i { width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: var(--ink-fixed); font-style: normal; font-weight: 800; font-size: 11px; display: inline-grid; place-items: center; } .rail-becomes { margin: 0 0 4px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-soft); } .rail-new { margin: 0 0 12px; font-weight: 800; font-size: 13.5px; line-height: 1.4; } .rail-actions { display: flex; gap: 8px; justify-content: flex-end; } .rail-accept, .rail-ignore { border-radius: 10px; padding: 7px 16px; font-weight: 800; font-size: 12.5px; transition: filter 0.2s ease, transform 0.2s ease; } .rail-accept { background: var(--green); color: var(--ink-fixed); } .rail-ignore { border: 1px solid rgba(252, 246, 240, 0.25); color: rgba(252, 246, 240, 0.7); } .rail-sofar-kicker { margin: 14px 0 6px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(252, 246, 240, 0.55); } .rail-score { display: inline-block; border: 1px solid var(--blue); color: var(--blue); border-radius: 8px; padding: 3px 10px; font-size: 11px; font-weight: 800; margin-bottom: 8px; } .rail-sofar-text { margin: 0; border: 1px solid color-mix(in oklch, var(--blue) 45%, transparent); background: color-mix(in oklch, var(--blue) 8%, transparent); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; font-weight: 700; color: var(--blue); line-height: 1.45; } .rail-use { display: block; margin-top: 10px; border: 1px solid rgba(252, 246, 240, 0.35); border-radius: 999px; padding: 8px 12px; text-align: center; font-weight: 800; font-size: 13px; transition: filter 0.2s ease, transform 0.2s ease; } .rail-done, .rail-wait, .rail-next { border: 1px solid rgba(252, 246, 240, 0.18); border-radius: 12px; padding: 14px; } .rail-wait { border-style: dashed; } .rail-done-kicker { margin: 0 0 6px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-soft); } .rail-done-title { margin: 0; font-weight: 800; font-size: 16px; line-height: 1.25; } .rail-wait-text { margin: 0; font-family: var(--serif); font-style: italic; font-size: 13px; color: rgba(252, 246, 240, 0.65); } .rail-next { border: 0; padding: 0; } .rail-next .rail-done-kicker { margin: 0 0 8px; padding: 0 2px; } .rail-next-card { border: 1px solid rgba(252, 246, 240, 0.16); border-radius: 10px; background: rgba(252, 246, 240, 0.04); padding: 10px 12px; margin-bottom: 8px; transition: filter 0.2s ease, transform 0.2s ease; } .rail-next-card b { display: block; font-size: 12.5px; font-weight: 800; margin-bottom: 3px; } .rail-next-card p { margin: 0; font-size: 11.5px; line-height: 1.45; color: rgba(252, 246, 240, 0.6); } @media (max-width: 900px) { .showcase-stage { max-width: 100%; } } /* ============================================================ THE ICEBERG One hero banner, not a scroll-scrubbed march. Dylan's read on the first version: too wordy, too much scrolling. This says the same thing in one screen: a real prompt above the line, seven words-or- fewer capability tiles below it, numbers and color doing the work instead of sentences. Still theme-independent by design, same reasoning as --ink-fixed - deep water reads as deep water in both themes, so only the paper sections above and below it change temperature. ============================================================ */ :root { --sea-1: #17394b; --sea-2: #0d2634; --sea-3: #061520; --ice: #f2f8fa; --ice-dim: rgba(233, 244, 248, 0.66); --ice-faint: rgba(233, 244, 248, 0.4); } /* One centred stack, vertically centred in a shorter banner. The earlier version was 94vh with the typed prompt free-floating at top:17% and the headline pinned to the bottom - below ~900px wide the prompt collided with the fixed header and the headline, and between them sat ~400px of near-black footage doing nothing. */ .berg-banner { position: relative; isolation: isolate; min-height: min(620px, 78vh); display: grid; place-items: center; padding: clamp(80px, 12vh, 130px) 0 clamp(56px, 9vh, 90px); color: var(--ice); background: var(--sea-3); overflow: hidden; } /* Higgsfield-generated: a slow descent along a glowing tip into deep blue water - the shape of the page, rendered once instead of drawn. */ .berg-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; z-index: 0; } /* Brand pass over the raw footage. The centre is darkened hard enough that the headline holds contrast over ANY frame of the loop - the previous veil only darkened the edges, so legibility drifted as the video played. */ .berg-veil { position: absolute; inset: 0; z-index: 1; background: radial-gradient(70% 55% at 50% 52%, rgba(6, 21, 32, 0.82), rgba(6, 21, 32, 0.34) 70%, transparent), linear-gradient(180deg, var(--sea-3) 0%, rgba(6, 21, 32, 0.2) 26%, rgba(6, 21, 32, 0.35) 62%, var(--sea-3) 100%); } .berg-content { position: relative; z-index: 2; width: var(--wrap); max-width: 780px; text-align: center; } .berg-kicker { margin: 0 0 12px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-soft); } .berg-typed { margin: 0 auto clamp(28px, 5vh, 48px); display: inline-block; font-family: var(--mono); font-size: clamp(14px, 1.5vw, 17px); font-weight: 600; color: var(--ice); padding: 12px 18px; border: 1px solid rgba(233, 244, 248, 0.26); border-radius: var(--r-ctl); background: rgba(6, 21, 32, 0.55); } .berg-title { margin: 0; font-size: clamp(32px, 5.6vw, 62px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.03; text-wrap: balance; } .berg-title em { color: var(--accent-soft); font-style: italic; } /* ---- the tiles: numbers and color instead of sentences ---- */ .depths { background: var(--sea-3); color: var(--ice); padding: 88px 0 96px; border-top: 0; } .depths-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: rgba(233, 244, 248, 0.1); border-radius: var(--radius); overflow: hidden; } .depths-tile { background: var(--sea-3); padding: 24px 20px; display: flex; flex-direction: column; gap: 10px; transition: background-color 0.25s ease; } .depths-tile:hover { background: color-mix(in oklch, var(--sea-2) 70%, var(--sea-3)); } .depths-num { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 34px; color: var(--accent-soft); line-height: 1; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); } .depths-tile:hover .depths-num { transform: translateY(-2px); } .depths-tile h3 { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.28; } .depths-tile.is-floor { background: var(--accent); color: #fff; } .depths-tile.is-floor:hover { background: var(--accent-deep); } .depths-tile.is-floor .depths-num { color: rgba(255, 255, 255, 0.75); } @media (prefers-reduced-motion: reduce) { .depths-tile:hover .depths-num { transform: none; } } .depths-close { margin: 40px auto 0; max-width: 46ch; text-align: center; font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2.2vw, 24px); color: var(--ice-dim); } /* ---- automation: same cold ground, half the words ---- */ .deep-eyebrow { color: var(--accent-soft); } @media (max-width: 900px) { .depths-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .depths-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .berg-film { display: none; } .berg-banner { background-image: url("iceberg-poster.jpg"); background-size: cover; background-position: center 38%; } } /* ============================================================ BOLD-COLOR TOKENS Lifted straight from the extension's own theme palette (panel.css), not invented for the site: --pop is coral's pop-ink, --ocean/--moss/ --plum are the ocean/moss/plum accent themes. Used by the live- recreation demo (.ademo, further down) and product.html's gallery cards. ============================================================ */ :root { --pop: #d93a17; --pop-soft: #f4dcd4; --ocean: #34678a; --ocean-soft: #5f93b3; --moss: #4a7d5b; --moss-soft: #7aa885; } :root[data-theme="dark"] { --pop: #ff6a45; --pop-soft: rgba(217, 58, 23, 0.22); --ocean-soft: #82abc7; --moss-soft: #96bd9c; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --pop: #ff6a45; --pop-soft: rgba(217, 58, 23, 0.22); --ocean-soft: #82abc7; --moss-soft: #96bd9c; } } /* ============================================================ BLENDING THE ICEBERG IN The banner's first pass had a hard paper->video seam and read as a clip pasted onto the page. Two fixes: a real fade from --paper into the footage instead of a cut, and a warm radial wash near the crown so the accent hue bridges the two sections instead of stopping dead at the edge. ============================================================ */ .berg-banner::before { content: ""; position: absolute; inset: 0 0 auto; height: 34%; z-index: 2; background: linear-gradient(180deg, var(--paper) 0%, rgba(252, 246, 240, 0) 100%); pointer-events: none; } :root[data-theme="dark"] .berg-banner::before { background: linear-gradient(180deg, var(--paper) 0%, rgba(28, 35, 42, 0) 100%); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .berg-banner::before { background: linear-gradient(180deg, var(--paper) 0%, rgba(28, 35, 42, 0) 100%); } } .berg-film { filter: saturate(0.85) brightness(0.92); } .berg-veil { background: radial-gradient(60% 45% at 78% 8%, color-mix(in oklch, var(--accent) 30%, transparent), transparent 70%), linear-gradient(180deg, rgba(6, 21, 32, 0.25) 0%, rgba(6, 21, 32, 0.1) 30%, rgba(6, 21, 32, 0.55) 100%), radial-gradient(120% 90% at 50% 0%, transparent 40%, var(--sea-3) 100%); } /* ============================================================ PRODUCT PAGE: bold-color pass on the gallery Four categories, four hues from the extension's own accent themes - was flat black-and-white text before, gave the page nothing to look at next to the homepage's colorful sections. ============================================================ */ :root { --plum: #6d5a8e; --plum-soft: #9483ae; } .gallery-card { border-top: 3px solid var(--line); } .gallery-card.is-ocean { border-top-color: var(--ocean); } .gallery-card.is-ocean .gallery-tag { color: var(--ocean); } .gallery-card.is-moss { border-top-color: var(--moss); } .gallery-card.is-moss .gallery-tag { color: var(--moss); } .gallery-card.is-pop { border-top-color: var(--pop); } .gallery-card.is-pop .gallery-tag { color: var(--pop); } .gallery-card.is-plum { border-top-color: var(--plum); } .gallery-card.is-plum .gallery-tag { color: var(--plum); } /* ============================================================ APPEARANCE PANEL The extension's real Appearance settings (five accent themes, six background patterns) rendered in the site's light chrome. Replaces what used to be a fourth review-rail demo in a fourth palette. ============================================================ */ .appearance { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px 28px; box-shadow: var(--shadow-card); } .appearance-kicker { margin: 0 0 20px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .appearance-label { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 12px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .appearance-label span { font-weight: 800; color: var(--ink); letter-spacing: 0; text-transform: none; font-size: 13px; } .appearance-swatches { display: flex; gap: 14px; margin-bottom: 26px; } .appearance-swatches span { width: 38px; height: 38px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1); } .appearance-swatches span:hover { transform: scale(1.08); } /* The selected swatch gets a ring in its OWN colour, offset from the fill - the same affordance the extension uses, and it survives on any of the five hues without needing a per-theme rule. */ .appearance-swatches .is-on { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 3px var(--white), 0 0 0 5px var(--sw); } .appearance-patterns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .appearance-patterns span { padding: 14px 8px; text-align: center; font-size: 12.5px; font-weight: 700; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--paper-deep); color: var(--muted); transition: border-color 0.2s ease, color 0.2s ease; } .appearance-patterns span:hover { border-color: var(--accent-soft); color: var(--ink); } .appearance-patterns .is-on { border-color: var(--accent); color: var(--accent); background: color-mix(in oklch, var(--accent) 8%, var(--white)); } @media (prefers-reduced-motion: reduce) { .appearance-swatches span:hover { transform: none; } } /* ============================================================ THE RAIL, RECREATED 1:1 Every value below is lifted from extension/panel.css rather than matched by eye. The important one is the ground: the extension's paper is #f6e9d7, a warm tan, and its cards sit on #faf1e3 - the site's own --paper (#fcf6f0) is nearly white, which is why earlier passes of this component read as "a website's idea of the rail" instead of the rail. The palette is scoped to .ademo so the rest of the page keeps the site's lighter ground. --tt-paper #f6e9d7 rail background --tt-surface #faf1e3 cards and option chips --tt-paper-deep #eeddc4 --tt-ink #18222c --tt-muted #6f766f --tt-pop #d93a17 every big bold heading, weight 900 --tt-green #18bf91 submit affordances, "best guess" --tt-green-ink #14684f text on a green-tinted chip --tt-amber #e2a300 "Fair" --tt-blue #4a8dff "Ready" ============================================================ */ .ademo { --tt-ink: #18222c; --tt-paper: #f6e9d7; --tt-paper-deep: #eeddc4; --tt-surface: #faf1e3; --tt-line: rgba(24, 34, 44, 0.12); --tt-line-strong: rgba(24, 34, 44, 0.2); --tt-muted: #6f766f; /* Follows the site's picked accent, which is exactly what the extension does: choosing Moss in Alide re-tints the rail's headings, not just the page around it. Falls back to coral (panel.css's default) when no accent has been chosen. */ --tt-pop: var(--pop, #d93a17); --tt-green: #18bf91; --tt-green-ink: #14684f; --tt-amber: #e2a300; --tt-blue: #4a8dff; max-width: 430px; margin: 0 auto; font-size: 14px; } .ademo-chrome { border-radius: 18px; overflow: hidden; box-shadow: 0 24px 70px rgba(24, 34, 44, 0.18); border: 1px solid var(--tt-line); } /* ---- header ---- */ .ademo-head { display: flex; align-items: center; gap: 10px; padding: 15px 16px; background: var(--ink-fixed); } .ademo-brand { display: flex; align-items: center; gap: 9px; } .ademo-brand svg { width: 24px; height: auto; flex: none; } /* Literal, not --paper: this header is --ink-fixed in BOTH themes, so a theme-flipping token renders the wordmark black-on-black in dark mode. */ .ademo-word-mark { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; color: #fcf6f0; } .ademo-word-mark b { color: var(--tt-pop); font-weight: 800; } .ademo-badges { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .ademo-version { font-family: var(--mono); font-size: 10px; font-weight: 600; color: rgba(252, 246, 240, 0.45); } /* ---- tab strip ---- */ .ademo-tabs { position: relative; display: flex; background: var(--tt-surface); border-bottom: 1px solid var(--tt-line); } .ademo-tab { flex: 1; text-align: center; padding: 13px 0; font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: var(--tt-muted); } .ademo-tab-ind { position: absolute; bottom: -1px; left: 0; width: 33.333%; height: 2px; background: var(--tt-pop); display: none; } .ademo-tab-ind-auto { left: 33.333%; } .ademo-tab-ind-config { left: 66.666%; } .ademo[data-beat="1"] .ademo-tab-ind[data-b~="1"], .ademo[data-beat="2"] .ademo-tab-ind[data-b~="2"], .ademo[data-beat="3"] .ademo-tab-ind[data-b~="3"], .ademo[data-beat="4"] .ademo-tab-ind[data-b~="4"], .ademo[data-beat="5"] .ademo-tab-ind[data-b~="5"], .ademo[data-beat="6"] .ademo-tab-ind[data-b~="6"], .ademo[data-beat="7"] .ademo-tab-ind[data-b~="7"], .ademo[data-beat="8"] .ademo-tab-ind[data-b~="8"] { display: block; } .ademo-tab[data-ademo-tab-alide] { color: var(--tt-ink); } .ademo[data-beat="7"] .ademo-tab[data-ademo-tab-alide] { color: var(--tt-muted); } .ademo[data-beat="7"] .ademo-tab[data-ademo-tab-auto] { color: var(--tt-ink); } /* ---- body: the rail's own warm ground, with the Stars pattern ---- */ .ademo-body { position: relative; min-height: 372px; padding: 16px 14px 18px; background-color: var(--tt-paper); background-image: radial-gradient(circle at 20% 24%, rgba(24, 34, 44, 0.07) 1.4px, transparent 1.5px), radial-gradient(circle at 68% 62%, rgba(24, 34, 44, 0.07) 1.4px, transparent 1.5px), radial-gradient(circle at 88% 16%, rgba(24, 34, 44, 0.05) 1.1px, transparent 1.2px); background-size: 132px 118px, 132px 118px, 132px 118px; } .ademo-body > [data-b] { display: none; } .ademo[data-beat="1"] .ademo-body > [data-b~="1"], .ademo[data-beat="2"] .ademo-body > [data-b~="2"], .ademo[data-beat="3"] .ademo-body > [data-b~="3"], .ademo[data-beat="4"] .ademo-body > [data-b~="4"], .ademo[data-beat="5"] .ademo-body > [data-b~="5"], .ademo[data-beat="6"] .ademo-body > [data-b~="6"], .ademo[data-beat="7"] .ademo-body > [data-b~="7"], .ademo[data-beat="8"] .ademo-body > [data-b~="8"] { display: block; } /* ---- shared card + type ---- */ .ademo-card { background: var(--tt-surface); border: 1px solid var(--tt-line); border-radius: 14px; padding: 15px 15px 16px; } .ademo-kick { margin: 0 0 7px; font-family: var(--mono); font-size: 10.5px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--tt-pop); } .ademo-kick-dim { color: var(--tt-muted); margin-top: 14px; } .ademo-kick-ink { color: var(--tt-ink); font-size: 11.5px; } /* The signature move: pop-ink, weight 900, negative tracking. */ .ademo-big { margin: 0; color: var(--tt-pop); font-size: 25px; font-weight: 900; line-height: 0.98; letter-spacing: -0.045em; } .ademo-big-sm { font-size: 20px; } .ademo-q { margin-bottom: 13px; } .ademo-sub { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--tt-muted); font-weight: 600; } .ademo-sub-tight { margin-top: 6px; font-size: 12px; } /* ---- 1. idle ---- */ .ademo-idle { padding: 26px 14px 30px; } .ademo-sparks { margin: 0 0 16px; font-size: 15px; letter-spacing: 0.5em; color: var(--tt-pop); opacity: 0.55; } /* ---- score strip ---- */ .ademo-score { margin-bottom: 13px; padding: 12px 13px; background: var(--tt-surface); border: 1px solid var(--tt-line); border-radius: 12px; } .ademo-score-line { margin: 0 0 8px; font-size: 13.5px; font-weight: 800; } .ademo-word span { display: none; } .ademo[data-beat="2"] .ademo-word span[data-b~="2"], .ademo[data-beat="3"] .ademo-word span[data-b~="3"], .ademo[data-beat="4"] .ademo-word span[data-b~="4"], .ademo[data-beat="5"] .ademo-word span[data-b~="5"], .ademo[data-beat="6"] .ademo-word span[data-b~="6"] { display: inline; } .ademo-word .is-fair { color: var(--tt-amber); } .ademo-word .is-ready { color: var(--tt-blue); } .ademo-meter { height: 6px; border-radius: var(--r-pill); background: var(--tt-paper-deep); overflow: hidden; margin-bottom: 10px; } .ademo-meter i { display: none; height: 100%; border-radius: var(--r-pill); } .ademo[data-beat="2"] .ademo-meter i[data-b~="2"], .ademo[data-beat="3"] .ademo-meter i[data-b~="3"], .ademo[data-beat="4"] .ademo-meter i[data-b~="4"], .ademo[data-beat="5"] .ademo-meter i[data-b~="5"], .ademo[data-beat="6"] .ademo-meter i[data-b~="6"] { display: block; } .ademo-meter .is-fair { background: var(--tt-amber); } .ademo-meter .is-ready { background: var(--tt-blue); } .ademo-dims { display: flex; flex-wrap: wrap; gap: 5px; } .ademo-dims span { font-family: var(--mono); font-size: 9.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; padding: 4px 9px; border-radius: var(--r-pill); border: 1px solid rgba(24, 191, 145, 0.55); color: var(--tt-green-ink); background: rgba(24, 191, 145, 0.08); } /* ---- card head ---- */ .ademo-cardhead { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; padding-bottom: 9px; border-bottom: 1px solid var(--tt-line); font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--tt-ink); } .ademo-cardhead b { color: var(--tt-pop); } .ademo-x { color: var(--tt-muted); letter-spacing: 0; } .ademo-echo { display: flex; gap: 9px; margin: 0 0 11px; font-size: 12.5px; font-weight: 700; } .ademo-echo i { font-style: normal; font-family: var(--mono); font-weight: 800; color: var(--tt-pop); } /* ---- option chips: panel.css .tt-ask-chip / .tt-ask-chip-best ---- */ .ademo-opts { display: flex; flex-direction: column; gap: 8px; } .ademo-opts span { display: flex; align-items: center; justify-content: space-between; gap: 11px; border: 1px solid var(--tt-line); background: var(--tt-surface); color: var(--tt-ink); font-size: 14px; font-weight: 700; text-align: left; border-radius: 12px; padding: 12px 13px; transition: transform 0.15s ease, border-color 0.2s ease; } .ademo-opts .is-best { border-color: rgba(24, 191, 145, 0.5); background: rgba(24, 191, 145, 0.08); color: var(--tt-green-ink); } .ademo-opts i { font-style: normal; font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tt-green-ink); opacity: 0.85; flex: none; } /* ---- skip / type-your-own row ---- */ .ademo-typerow { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .ademo-skip { font-size: 11.5px; font-weight: 700; color: var(--tt-muted); border: 1px dashed var(--tt-line-strong); border-radius: var(--r-pill); padding: 6px 13px; } .ademo-type { flex: 1; font-size: 12.5px; color: var(--tt-muted); border-bottom: 1px solid var(--tt-line); padding-bottom: 5px; } .ademo-go { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--tt-green); color: #fff; font-size: 13px; font-weight: 900; } /* ---- built prompt ---- */ .ademo-prompt { margin: 0; font-size: 12.5px; line-height: 1.5; font-weight: 600; padding: 11px 12px; border-radius: 10px; background: var(--tt-paper-deep); color: var(--tt-ink); } .ademo-prompt.is-built { background: rgba(24, 191, 145, 0.09); border: 1px solid rgba(24, 191, 145, 0.4); } /* ---- CTAs ---- */ .ademo-use { display: block; text-align: center; margin-top: 14px; padding: 13px; border-radius: 12px; background: var(--tt-pop); color: #fff; font-weight: 900; font-size: 15px; letter-spacing: -0.01em; box-shadow: 0 8px 20px color-mix(in srgb, var(--tt-pop) 26%, transparent); } .ademo-save { display: inline-block; margin-top: 15px; border: 1.5px solid color-mix(in srgb, var(--tt-pop) 45%, transparent); background: var(--tt-surface); color: var(--tt-pop); border-radius: var(--r-pill); padding: 8px 16px; font-size: 12px; font-weight: 800; } /* ---- highlight-to-ask ---- */ .ademo-quote { margin: 0; font-size: 13px; font-style: italic; font-weight: 700; padding: 10px 12px; border-radius: 10px; color: var(--tt-pop); background: color-mix(in srgb, var(--tt-pop) 10%, var(--tt-surface)); border: 1px solid color-mix(in srgb, var(--tt-pop) 26%, transparent); } .ademo-asks { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; } .ademo-asks span { font-size: 12px; font-weight: 800; color: var(--tt-pop); border: 1.5px solid color-mix(in srgb, var(--tt-pop) 45%, transparent); border-radius: var(--r-pill); padding: 7px 13px; } .ademo-sendrow { display: flex; align-items: stretch; gap: 8px; margin-top: 12px; } .ademo-sendinput { flex: 1; font-size: 12.5px; font-weight: 600; padding: 9px 12px; border-radius: 10px; border: 1.5px solid color-mix(in srgb, var(--tt-pop) 40%, transparent); background: var(--tt-surface); } .ademo-send { display: grid; place-items: center; padding: 0 18px; border-radius: 10px; background: var(--tt-pop); color: #fff; font-size: 13px; font-weight: 900; } /* ---- where to next ---- */ .ademo-nexts { display: flex; flex-direction: column; gap: 8px; } .ademo-nexts > div { padding: 11px 12px; border-radius: 12px; border: 1px solid var(--tt-line); background: var(--tt-surface); } .ademo-nexts b { display: block; font-size: 13px; font-weight: 800; color: var(--tt-pop); margin-bottom: 3px; letter-spacing: -0.01em; } .ademo-nexts p { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--tt-muted); font-weight: 600; } .ademo-nexts .is-new { border-color: rgba(24, 191, 145, 0.45); background: rgba(24, 191, 145, 0.07); } .ademo-nexts .is-new b { color: var(--tt-green-ink); } .ademo-ideas { display: inline-block; margin-top: 11px; border: 1.5px solid var(--tt-line-strong); border-radius: var(--r-pill); padding: 7px 15px; font-size: 12px; font-weight: 800; color: var(--tt-ink); } .ademo-helpful { margin: 12px 0 0; font-size: 12px; font-weight: 700; color: var(--tt-muted); } .ademo-helpful b { font-size: 13px; } /* ---- auto ---- */ .ademo-goalbox { margin: 12px 0 0; font-size: 13.5px; font-weight: 800; padding: 12px 13px; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--tt-pop) 40%, transparent); background: var(--tt-surface); } .ademo-autobtns { display: flex; gap: 9px; margin-top: 12px; } .ademo-start, .ademo-stop { flex: 1; text-align: center; padding: 11px; border-radius: 12px; font-size: 14px; font-weight: 900; } .ademo-start { background: var(--tt-paper-deep); color: var(--tt-muted); } .ademo-stop { background: var(--tt-ink); color: #fff; } .ademo-runcard { margin-top: 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-color: color-mix(in srgb, var(--tt-pop) 30%, transparent); } .ademo-turn { flex: none; font-family: var(--mono); font-size: 11px; font-weight: 900; color: var(--tt-pop); background: color-mix(in srgb, var(--tt-pop) 12%, #fff); border: 1px solid color-mix(in srgb, var(--tt-pop) 34%, transparent); border-radius: var(--r-pill); padding: 4px 11px; font-variant-numeric: tabular-nums; } /* ---- press affordance: focus ring settles, then depresses ---- */ [data-ademo-press] { cursor: pointer; transition: box-shadow 0.3s ease, transform 0.15s ease; } [data-ademo-press].is-target { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tt-pop) 34%, transparent); } [data-ademo-press].is-press { transform: scale(0.97); } @media (max-width: 520px) { .ademo { max-width: 100%; } } /* ============================================================ LIVE SITE THEMING The five accent themes and six background patterns are the real extension settings, wired to actually re-theme this site the way they re-theme the rail. Values are panel.css's own, and the pattern masks are the identical SVG data URIs - not redrawn approximations. Choice persists in localStorage under alideAccent / alidePattern, mirroring the extension's alideAccentTheme / alideBackgroundPattern. ============================================================ */ :root { --pat-none: none; --pat-floral: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='148'%20height='148'%20viewBox='0%200%20148%20148'%3E%3Cg%20fill='%23fff'%3E%3Cg%20transform='translate(40%2036)'%3E%3Cellipse%20cx='0'%20cy='-8'%20rx='3.4'%20ry='6.6'/%3E%3Cellipse%20cx='0'%20cy='-8'%20rx='3.4'%20ry='6.6'%20transform='rotate(72)'/%3E%3Cellipse%20cx='0'%20cy='-8'%20rx='3.4'%20ry='6.6'%20transform='rotate(144)'/%3E%3Cellipse%20cx='0'%20cy='-8'%20rx='3.4'%20ry='6.6'%20transform='rotate(216)'/%3E%3Cellipse%20cx='0'%20cy='-8'%20rx='3.4'%20ry='6.6'%20transform='rotate(288)'/%3E%3Ccircle%20r='2.6'/%3E%3C/g%3E%3Cg%20transform='translate(106%20100)%20scale(0.72)'%3E%3Cellipse%20cx='0'%20cy='-8'%20rx='3.4'%20ry='6.6'/%3E%3Cellipse%20cx='0'%20cy='-8'%20rx='3.4'%20ry='6.6'%20transform='rotate(72)'/%3E%3Cellipse%20cx='0'%20cy='-8'%20rx='3.4'%20ry='6.6'%20transform='rotate(144)'/%3E%3Cellipse%20cx='0'%20cy='-8'%20rx='3.4'%20ry='6.6'%20transform='rotate(216)'/%3E%3Cellipse%20cx='0'%20cy='-8'%20rx='3.4'%20ry='6.6'%20transform='rotate(288)'/%3E%3Ccircle%20r='2.6'/%3E%3C/g%3E%3Cpath%20d='M16%20104q6-13%2013%200q-7%206-13%200Z'/%3E%3Cpath%20d='M124%2034q6-13%2013%200q-7%206-13%200Z'/%3E%3Ccircle%20cx='78'%20cy='22'%20r='2'/%3E%3Ccircle%20cx='30'%20cy='78'%20r='2'/%3E%3Ccircle%20cx='118'%20cy='132'%20r='2'/%3E%3C/g%3E%3C/svg%3E"); --pat-constellation: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%20viewBox='0%200%20160%20160'%3E%3Cg%20fill='%23fff'%3E%3Cpath%20d='M20%2030L45%2015L70%2040L100%2020L130%2055'%20stroke='%23fff'%20stroke-width='1.4'%20fill='none'/%3E%3Cpath%20d='M115%2090L140%20120'%20stroke='%23fff'%20stroke-width='1.4'%20fill='none'/%3E%3Cpath%20d='M85%20110L50%20130L15%2095'%20stroke='%23fff'%20stroke-width='1.4'%20fill='none'/%3E%3Ccircle%20cx='20'%20cy='30'%20r='3'/%3E%3Ccircle%20cx='45'%20cy='15'%20r='2.2'/%3E%3Ccircle%20cx='70'%20cy='40'%20r='2.6'/%3E%3Ccircle%20cx='100'%20cy='20'%20r='2.2'/%3E%3Cpath%20d='M130%2048L132%2053L137%2055L132%2057L130%2062L128%2057L123%2055L128%2053Z'/%3E%3Ccircle%20cx='115'%20cy='90'%20r='2.4'/%3E%3Cpath%20d='M140%20114L142%20118L146%20120L142%20122L140%20126L138%20122L134%20120L138%20118Z'/%3E%3Ccircle%20cx='85'%20cy='110'%20r='2.2'/%3E%3Ccircle%20cx='50'%20cy='130'%20r='2.8'/%3E%3Ccircle%20cx='15'%20cy='95'%20r='2.2'/%3E%3C/g%3E%3C/svg%3E"); --pat-peaks: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='170'%20height='170'%20viewBox='0%200%20170%20170'%3E%3Cg%20fill='%23fff'%20stroke='%23fff'%20stroke-width='7'%20stroke-linejoin='round'%3E%3Cpath%20d='M16%2052L31%2027L46%2052Z'/%3E%3Cpath%20d='M36%2052L54%2022L74%2052Z'/%3E%3Cpath%20d='M102%20138L114%20118L126%20138Z'/%3E%3Cpath%20d='M118%20138L133%20112L149%20138Z'/%3E%3Cpath%20d='M120%2044L128%2032L136%2044Z'/%3E%3Cpath%20d='M24%20122L32%20110L40%20122Z'/%3E%3C/g%3E%3Cg%20fill='%23fff'%3E%3Crect%20x='80'%20y='31'%20width='5'%20height='19'%20rx='2.5'/%3E%3Crect%20x='154'%20y='121'%20width='4'%20height='15'%20rx='2'/%3E%3C/g%3E%3C/svg%3E"); --pat-waves: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='150'%20height='150'%20viewBox='0%200%20150%20150'%3E%3Cg%20fill='none'%20stroke='%23fff'%20stroke-linecap='round'%3E%3Cpath%20stroke-width='3'%20d='M5%2030q15-14%2030%200t30%200t30%200t30%200'/%3E%3Cpath%20stroke-width='2.2'%20d='M5%2085q15-14%2030%200t30%200t30%200t30%200'/%3E%3Cpath%20stroke-width='3'%20d='M5%20140q15-14%2030%200t30%200t30%200t30%200'/%3E%3C/g%3E%3Cg%20fill='%23fff'%3E%3Ccircle%20cx='38'%20cy='55'%20r='2.6'/%3E%3Ccircle%20cx='112'%20cy='60'%20r='2'/%3E%3Ccircle%20cx='75'%20cy='112'%20r='2.3'/%3E%3C/g%3E%3C/svg%3E"); --pat-confetti: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%20viewBox='0%200%20140%20140'%3E%3Cg%20fill='%23fff'%3E%3Crect%20x='18'%20y='14'%20width='11'%20height='5'%20rx='2'%20transform='rotate(24%2023%2016)'/%3E%3Crect%20x='96'%20y='30'%20width='11'%20height='5'%20rx='2'%20transform='rotate(-35%20101%2032)'/%3E%3Crect%20x='52'%20y='72'%20width='11'%20height='5'%20rx='2'%20transform='rotate(58%2057%2074)'/%3E%3Crect%20x='118'%20y='104'%20width='11'%20height='5'%20rx='2'%20transform='rotate(-18%20123%20106)'/%3E%3Crect%20x='14'%20y='112'%20width='11'%20height='5'%20rx='2'%20transform='rotate(40%2019%20114)'/%3E%3Ccircle%20cx='72'%20cy='24'%20r='4'/%3E%3Ccircle%20cx='34'%20cy='58'%20r='3'/%3E%3Ccircle%20cx='104'%20cy='70'%20r='3.5'/%3E%3Ccircle%20cx='66'%20cy='122'%20r='3'/%3E%3Cpath%20d='M124%2010l5%209h-10Z'/%3E%3Cpath%20d='M42%2092l5%209h-10Z'/%3E%3Cpath%20d='M88%2098l5%209h-10Z'/%3E%3C/g%3E%3C/svg%3E"); } /* Accent themes. --accent/-soft/-deep drive the site's existing chrome; --pop is the bold heading colour the rail uses (panel.css --tt-pop-ink). --accent-deep is derived rather than hardcoded so a new theme needs only the three values panel.css actually defines. */ :root[data-accent="coral"] { --accent: #c85f45; --accent-soft: #e48461; --pop: #d93a17; } :root[data-accent="ocean"] { --accent: #34678a; --accent-soft: #5f93b3; --pop: #2f6fed; } :root[data-accent="moss"] { --accent: #4a7d5b; --accent-soft: #7aa885; --pop: #128740; } :root[data-accent="plum"] { --accent: #6d5a8e; --accent-soft: #9483ae; --pop: #8f5adf; } :root[data-accent="slate"] { --accent: #55606c; --accent-soft: #7f8a95; --pop: #3d6fb0; } :root[data-accent] { --accent-deep: color-mix(in oklch, var(--accent) 84%, #000); } /* The page's own pattern layer. Fixed so it does not scroll with content (the rail's does not either), behind everything, and masked in the accent so switching accent re-tints the pattern for free - exactly what the extension does. Per-pattern opacity is panel.css's, which equalizes perceived weight so chunky floral does not shout next to thin waves. */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-color: var(--accent); -webkit-mask-repeat: repeat; mask-repeat: repeat; opacity: 0; transition: opacity 0.45s ease; } body[data-pattern="floral"]::before { opacity: 0.11; -webkit-mask-image: var(--pat-floral); mask-image: var(--pat-floral); -webkit-mask-size: 148px 148px; mask-size: 148px 148px; } body[data-pattern="constellation"]::before { opacity: 0.13; -webkit-mask-image: var(--pat-constellation); mask-image: var(--pat-constellation); -webkit-mask-size: 160px 160px; mask-size: 160px 160px; } body[data-pattern="peaks"]::before { opacity: 0.12; -webkit-mask-image: var(--pat-peaks); mask-image: var(--pat-peaks); -webkit-mask-size: 170px 170px; mask-size: 170px 170px; } body[data-pattern="waves"]::before { opacity: 0.17; -webkit-mask-image: var(--pat-waves); mask-image: var(--pat-waves); -webkit-mask-size: 150px 150px; mask-size: 150px 150px; } body[data-pattern="confetti"]::before { opacity: 0.15; -webkit-mask-image: var(--pat-confetti); mask-image: var(--pat-confetti); -webkit-mask-size: 140px 140px; mask-size: 140px 140px; } /* Sections that own their own ground must sit above the pattern layer, or the fixed mask bleeds over the video and the dark tiles. */ main > section, .site-header, .site-footer { position: relative; z-index: 1; } /* ---- appearance controls become real buttons ---- */ .appearance-swatches button, .appearance-patterns button { font: inherit; cursor: pointer; } .appearance-swatches button { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1); } .appearance-swatches button:hover { transform: scale(1.08); } .appearance-swatches button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 3px var(--white), 0 0 0 5px var(--sw); } .appearance-patterns button { padding: 14px 8px; text-align: center; font-size: 12.5px; font-weight: 700; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--paper-deep); color: var(--muted); transition: border-color 0.2s ease, color 0.2s ease; } .appearance-patterns button:hover { border-color: var(--accent-soft); color: var(--ink); } .appearance-patterns button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: color-mix(in oklch, var(--accent) 8%, var(--white)); } .appearance-note { margin: 16px 0 0; font-size: 12.5px; font-weight: 600; color: var(--muted); } .appearance-note b { color: var(--accent); font-weight: 800; } @media (prefers-reduced-motion: reduce) { body::before { transition: none; } .appearance-swatches button:hover { transform: none; } } /* ============================================================ THE DEMO, MADE INTERACTIVE Autoplays until the visitor touches it, then hands over. Every chip, tab and button is a real control, so they all need real button resets (the markup used to be spans) and a visible focus ring for keyboard users. ============================================================ */ .usecase { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 auto 16px; max-width: 430px; } .usecase-label { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-right: 2px; } .usecase button { font: inherit; cursor: pointer; font-size: 12.5px; font-weight: 700; padding: 7px 13px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--white); color: var(--muted); transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .usecase button:hover { color: var(--ink); border-color: var(--accent-soft); } .usecase button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: color-mix(in oklch, var(--accent) 9%, var(--white)); } /* Every control inside the rail is a