/* Atlas Red landing. Token system copied from the app (web/src/styles.css) — keep the three theme blocks in sync with it. Auto follows the OS via the media query; data-theme="light|dark" on forces a mode (restored before first paint by /theme-boot.js, same storage key as the app). */ :root { color-scheme: light; --bg: #f4f6fa; --surface: #ffffff; --fg: #1b1f27; --muted: #69707d; --accent: #a94442; --on-accent: #ffffff; --thread: #a94442; --border: #e3e6ec; --danger: #b3261e; --ok: #1b7f4d; --edge: #b9c2d4; --shadow: 0 8px 28px rgba(23, 32, 51, 0.1); --serif: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, serif; --mono: ui-monospace, 'SF Mono', Menlo, monospace; --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --grid: color-mix(in srgb, var(--edge) 26%, transparent); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --bg: #13161c; --surface: #1c2028; --fg: #e8eaee; --muted: #99a1ad; --accent: #e08d84; --on-accent: #10141a; --thread: #e08d84; --border: #2e333d; --danger: #f2857c; --ok: #6fd39a; --edge: #3d4453; --shadow: 0 8px 28px rgba(0, 0, 0, 0.45); } } :root[data-theme='dark'] { color-scheme: dark; --bg: #13161c; --surface: #1c2028; --fg: #e8eaee; --muted: #99a1ad; --accent: #e08d84; --on-accent: #10141a; --thread: #e08d84; --border: #2e333d; --danger: #f2857c; --ok: #6fd39a; --edge: #3d4453; --shadow: 0 8px 28px rgba(0, 0, 0, 0.45); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scrollbar-gutter: stable; } [hidden] { display: none !important; } body { background: var(--bg); /* faint graticule — the atlas under the atlas */ background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 72px 72px; color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } .visually-hidden { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } a { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---- nav ---- */ .nav { max-width: 1100px; margin: 0 auto; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--serif); font-weight: 700; font-size: 21px; color: var(--thread); } .nav-side { display: flex; align-items: center; gap: 16px; } .theme-toggle { color: var(--fg); cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; width: 34px; height: 34px; padding: 0; display: inline-grid; place-items: center; } .theme-toggle:hover { border-color: var(--edge); } /* one icon at a time, driven by the forced theme on (none = auto) */ .theme-toggle svg { display: none; } :root:not([data-theme]) .ti-auto { display: block; } :root[data-theme='light'] .ti-light { display: block; } :root[data-theme='dark'] .ti-dark { display: block; } /* ---- intro: what Atlas Red is, in one breath ---- Unframed: the story draws itself straight onto the page graticule, staged in time — scatter pops in, the thread draws itself through the dots (each one catching red as it's reached), the map blooms, the punchline lands last. Base styles below are the FINISHED picture; every starting state lives in keyframes with fill-mode backwards, so reduced-motion (animation: none) simply shows the completed drawing. */ .intro { max-width: 1100px; margin: 0 auto; padding: 56px 24px 8px; text-align: center; } .intro-title { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5.5vw, 62px); line-height: 1.08; letter-spacing: -0.01em; animation: ia-rise 0.8s ease-out 0.1s backwards; } .intro-title em { color: var(--thread); font-style: italic; } .intro-stage { max-width: 1060px; margin: 22px auto 0; } .intro-art { width: 100%; height: auto; display: block; } .intro-art circle { transform-box: fill-box; transform-origin: center; } /* dots punch out the graticule now that there's no card behind them */ .intro-art .dotline-dot { fill: var(--bg); } .ia-thread { fill: none; stroke: var(--thread); stroke-width: 2.5; stroke-linecap: round; } .ia-branch { fill: none; stroke: var(--thread); stroke-width: 2; } .ia-text { font-family: var(--serif); font-size: 23px; fill: var(--muted); } .ia-red { fill: var(--thread); } .ia-punch { font-family: var(--serif); font-style: italic; font-size: 26px; fill: var(--thread); } @keyframes ia-pop { from { transform: scale(0); } 70% { transform: scale(1.25); } to { transform: scale(1); } } @keyframes ia-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes ia-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes ia-turn-red { from { stroke: var(--edge); } to { stroke: var(--thread); } } /* Act 1 (0–1s): the scatter appears, one idea at a time; the red one last */ .ia-scatter circle { animation: ia-pop 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) backwards; } .ia-scatter circle:nth-child(1) { animation-delay: 0.25s; } .ia-scatter circle:nth-child(2) { animation-delay: 0.35s; } .ia-scatter circle:nth-child(3) { animation-delay: 0.45s; } .ia-scatter circle:nth-child(4) { animation-delay: 0.55s; } .ia-scatter circle:nth-child(5) { animation-delay: 0.65s; } .ia-scatter circle:nth-child(6) { animation-delay: 0.75s; } .ia-scatter circle:nth-child(7) { animation-delay: 0.95s; } .ia-w1 { animation: ia-rise 0.7s ease-out 1s backwards; } /* Act 2 (2.7–5.9s): the thread finds its way; dots catch red as it passes. pathLength=1 normalizes the dash math; catch delays track the tip's x. The first caption gets ~1s of still air (it's short), then the thread takes its time — the draw is the scene, not a transition. */ .ia-thread { stroke-dasharray: 1 1; animation: ia-draw 3.2s cubic-bezier(0.45, 0, 0.3, 1) 2.7s backwards; } .ia-catch { animation: ia-pop 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) backwards, ia-turn-red 0.35s ease-out backwards; stroke: var(--thread); } .ia-catch.c1 { animation-delay: 3.8s; } .ia-catch.c2 { animation-delay: 4.35s; } .ia-catch.c3 { animation-delay: 4.85s; } .ia-catch.c4 { animation-delay: 5.15s; } .ia-w2 { animation: ia-rise 0.7s ease-out 3.1s backwards; } /* Act 3 (6.55–7.5s): a held beat after the thread completes — the second caption is three lines and needs the air — then the map blooms */ .ia-core { animation: ia-pop 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) 6.55s backwards; } .ia-ring { animation: ia-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 6.65s backwards; } .ia-branch { stroke-dasharray: 1 1; animation: ia-draw 0.55s ease-out 6.8s backwards; } .ia-leaf { animation: ia-pop 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) backwards; } .ia-map .ia-leaf:nth-of-type(1) { animation-delay: 7.1s; } .ia-map .ia-leaf:nth-of-type(2) { animation-delay: 7.2s; } .ia-map .ia-leaf:nth-of-type(3) { animation-delay: 7.3s; } .ia-map .ia-leaf:nth-of-type(4) { animation-delay: 7.4s; } .ia-map .ia-leaf:nth-of-type(5) { animation-delay: 7.5s; } .ia-w3 { animation: ia-rise 0.7s ease-out 7s backwards; } /* The punchline lands alone, last — after its caption has been read */ .ia-w4 { animation: ia-rise 0.9s ease-out 8.8s backwards; } @media (prefers-reduced-motion: reduce) { .intro-title, .intro-art * { animation: none !important; } } /* Narrow screens: the SVG captions scale below legibility — hide them, crop the band they occupied (svg height = width × 360/1120; the text band is ~40% of it ≈ 12.5% of the width), and tell the story in HTML instead. */ .intro-story { display: none; } @media (max-width: 640px) { .intro-stage { overflow: hidden; } .intro-art { margin-bottom: -12.5%; } .ia-w1, .ia-w2, .ia-w3, .ia-w4 { display: none; } .intro-story { display: block; margin: 14px auto 0; max-width: 36ch; font-family: var(--serif); font-size: 17px; color: var(--muted); animation: ia-rise 0.7s ease-out 1s backwards; } .intro-story em { color: var(--thread); font-style: normal; } .intro-story .punch { color: var(--thread); font-style: italic; } } @media (prefers-reduced-motion: reduce) { .intro-story { animation: none !important; } } /* ---- the two pillars: message row, text row, screenshot row ---- */ .pillars { max-width: 1100px; margin: 0 auto; padding: 66px 24px 48px; display: grid; gap: 16px 56px; align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 't1 t2' 'x1 x2' 's1 s2'; } .t1 { grid-area: t1; } .t2 { grid-area: t2; } .x1 { grid-area: x1; } .x2 { grid-area: x2; } .s1 { grid-area: s1; } .s2 { grid-area: s2; } .pillar-title { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -0.01em; } .pillar-title em { color: var(--thread); font-style: italic; } .pillar-text { color: var(--muted); max-width: 52ch; } .pillar-text strong { color: var(--fg); } /* brand artwork in a window frame — inline SVG driven by the same tokens as the rest of the page, so it follows the theme on its own */ .shot { margin-top: 22px; } .shot-frame { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); } .shot-bar { position: relative; display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--border); } .shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--edge); opacity: 0.6; } .shot-bar span { position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); } .shot-art { width: 100%; height: auto; display: block; } /* a timeline of payments that never happen — only the middle one is real */ .dotline { stroke: var(--edge); stroke-width: 1.5; opacity: 0.7; } .dotline-dot { fill: var(--surface); stroke: var(--edge); stroke-width: 2; } .dotline-once-dot { fill: var(--thread); } .dotline-once-ring { fill: none; stroke: var(--thread); stroke-width: 2.5; } .dotline-words { font-family: var(--serif); font-style: italic; font-size: 40px; fill: var(--fg); } /* the format mind map — every format a node, one red dot at the middle */ .flow-chip rect { fill: var(--surface); stroke: var(--border); } .flow-chip text { font-family: var(--mono); font-size: 16.5px; fill: var(--fg); } .flow-edges { fill: none; } .flow-edge { stroke: var(--edge); stroke-width: 1.2; opacity: 0.8; } /* ---- editions — mirrors the app's Settings → Account Edition panel ---- */ .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--thread); margin-bottom: 18px; } .editions { border-top: 1px solid var(--border); } .editions-inner { max-width: 760px; margin: 0 auto; padding: 64px 24px 72px; text-align: center; } .editions h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4vw, 40px); margin-bottom: 14px; } .editions-lede { color: var(--muted); margin-bottom: 28px; } .edition-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 8px 20px 14px; text-align: left; } .edition-table { width: 100%; border-collapse: collapse; font-size: 15px; table-layout: fixed; } .edition-table th:first-child, .edition-table td:first-child { width: 30%; } .edition-table th:not(:first-child), .edition-table td:not(:first-child) { width: 35%; } .edition-table th, .edition-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); } .edition-table tbody tr:last-child th, .edition-table tbody tr:last-child td { border-bottom: none; } .edition-table th { vertical-align: top; font-weight: 600; } .edition-table td:first-child { color: var(--muted); } .ed-name { display: block; } .ed-price { display: block; font-weight: 400; font-size: 13px; color: var(--muted); margin-top: 2px; } /* ambient state: plain $99 list price; the sale price and offer badge stay out of the DOM flow until a campaign is live */ .ed-sale, .ed-offer { display: none; } /* campaign state — flip by adding `campaign` to the ed-price span (one-line edit). Renders: ~~$99~~ $59 · one-time · launch offer */ .ed-price.campaign .ed-list { text-decoration: line-through; opacity: .55; } .ed-price.campaign .ed-sale { display: inline; margin-left: .4em; font-weight: 600; color: var(--fg); } .ed-price.campaign .ed-offer { display: inline; } /* the edition being sold wears the brand tint — same move as the app's current-edition column */ .edition-table .is-pro { background: color-mix(in srgb, var(--thread) 7%, transparent); } .edition-table th.is-pro { box-shadow: inset 0 2px 0 var(--thread); } .edition-table tfoot .ed-price-row td { border-top: 1px solid var(--border); border-bottom: none; padding-top: 12px; } .ed-price-row .ed-price { font-size: 15px; color: var(--fg); margin-top: 0; } .editions-lede strong { color: var(--fg); } .editions-emph { display: inline-block; margin-top: 10px; } .edition-guarantee { margin: 14px 2px 2px; font-size: 13px; color: var(--muted); } .edition-guarantee strong { color: var(--fg); } .editions-fineprint { margin-top: 16px; font-size: 12px; color: var(--muted); } /* ---- ai — the two capabilities, then the same terms ---- */ .ai { border-top: 1px solid var(--border); } .ai-inner { max-width: 760px; margin: 0 auto; padding: 64px 24px 72px; text-align: center; } .ai h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4vw, 40px); line-height: 1.15; margin-bottom: 14px; } .ai h2 em { color: var(--thread); font-style: italic; } .ai-lede { color: var(--muted); margin-bottom: 28px; } .ai-features { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; } .ai-feature { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; } .ai-feature h3 { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.25; margin-bottom: 8px; color: var(--thread); } .ai-feature p { color: var(--muted); font-size: 14.5px; margin: 0; } .ai-feature strong { color: var(--fg); font-weight: 600; } .ai-icon { display: block; color: var(--thread); margin-bottom: 12px; } .ai-terms-lede { color: var(--muted); margin-top: 34px; margin-bottom: 16px; } .ai-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; } .ai-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; } .ai-card h3 { font-family: var(--serif); font-weight: 400; font-size: 19px; margin-bottom: 6px; color: var(--thread); } .pro-tag { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; margin-left: 6px; padding: 1px 6px; border-radius: 4px; color: var(--thread); border: 1px solid color-mix(in srgb, var(--thread) 45%, transparent); } .ai-card p { color: var(--muted); font-size: 14px; margin: 0; } .ai-card strong { color: var(--fg); font-weight: 600; } /* per-import cost note — sits below both cards, kept clear of the BYOK card so the cent figure never reads as the price of either payment path */ .ai-cost-note { margin-top: 18px; font-size: 13px; color: var(--muted); } /* ---- cta ---- */ .cta { max-width: 1100px; margin: 0 auto; padding: 24px 24px 80px; text-align: center; } .cta-btn { /* mirrors the app's .btn-primary */ display: inline-block; background: var(--accent); border-radius: 8px; color: var(--on-accent); text-decoration: none; font-weight: 600; padding: 13px 28px; } .cta-btn:hover { filter: brightness(1.08); } /* ---- footer ---- */ .footer { border-top: 1px solid var(--border); max-width: 1100px; margin: 0 auto; padding: 40px 24px 56px; } .footer-links { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 18px; } .footer-links a { color: var(--muted); } .footer-privacy { color: var(--muted); font-size: 13.5px; margin-bottom: 18px; } .footer-privacy strong { color: var(--fg); } .footer-meta { font-family: var(--mono); font-size: 12px; color: var(--muted); } .footer-meta a { color: var(--muted); } /* ---- responsive ---- */ @media (max-width: 900px) { .pillars { grid-template-columns: minmax(0, 1fr); grid-template-areas: 't1' 'x1' 's1' 't2' 'x2' 's2'; padding-top: 24px; } .shot { max-width: 520px; margin-bottom: 16px; } .t2 { border-top: 1px solid var(--border); padding-top: 40px; margin-top: 24px; } } @media (max-width: 640px) { .ai-features, .ai-cards { grid-template-columns: 1fr; } } @media (max-width: 480px) { .edition-card { padding: 4px 10px 8px; } .edition-table th, .edition-table td { padding: 10px 8px; font-size: 13.5px; } }