/* Fateline — shared content-page styles. Used by the static routes that are not the React landing page: /support/, /privacy/, /terms/. It mirrors the landing page's design language: Instrument Serif over DM Sans on warm paper, copper accents, hairline-and-shadow cards. The tokens below are the same values src/App.jsx declares — keep the two in step, they are one design system, and a drifting token shows up as a nav pill that changes colour when you click Privacy. */ :root { color-scheme: light; --canvas: #f7f3ea; --surface: #fffdf8; --surface-raised: #f2ecdf; --surface-sunken: #eadfc9; --surface-inverted: #1c1917; --ink: #1c1917; --ink-muted: #6b6259; --ink-faint: #8b8177; --stroke-subtle: #efe8da; --stroke: #e3dcce; --stroke-strong: #b3a896; --copper: #c17f3e; --copper-deep: #a4652b; --teal: #2f5d5a; --rust: #a8443c; --shadow-border: 0 0 0 1px oklch(0.28 0.02 60 / 0.09), 0 1px 2px -1px oklch(0.28 0.02 60 / 0.08), 0 2px 4px 0 oklch(0.28 0.02 60 / 0.05); --shadow-border-hover: 0 0 0 1px oklch(0.28 0.02 60 / 0.13), 0 1px 2px -1px oklch(0.28 0.02 60 / 0.11), 0 2px 4px 0 oklch(0.28 0.02 60 / 0.07); --font-display: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; background: var(--canvas); } /* The gradient is sized to the body box, so short pages need the min-height or the wash stops mid-viewport and html's flat canvas shows through. */ body { margin: 0; min-height: 100vh; font-family: var(--font-body); background: radial-gradient(circle at 50% -12%, #fffdf8 0, rgba(255,253,248,0.84) 26%, transparent 54%), linear-gradient(180deg, #fffdf8 0%, var(--canvas) 30%, var(--canvas) 100%); color: var(--ink); line-height: 1.6; overflow-wrap: break-word; } ::selection { background: var(--surface-sunken); color: var(--ink); } a { color: var(--ink); text-decoration: none; } img { max-width: 100%; } /* ── Header / nav ─────────────────────────────────────────────────────── */ /* One nav, shared verbatim with the React landing page. .nav-bar is only a positioner — full width, transparent, and FIXED. As a sticky element with a top margin, that margin collapses straight through , drops the whole body box, and exposes the flat html canvas as a bar across the top of the page. Out of flow, nothing collapses. .nav-shell is the pill, at one explicit width every page shares. Letting it inherit each page's max-width makes it visibly change size from page to page; fit-content would make it change size with the label text instead. A fixed width is the only thing that holds still. */ .nav-bar { position: fixed; top: 16px; right: 0; left: 0; z-index: 50; padding-inline: 16px; pointer-events: none; /* the empty width either side stays click-through */ } .nav-shell { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(620px, 100%); height: 64px; margin-inline: auto; padding: 0 10px 0 22px; border-radius: 999px; background: rgba(255,253,248,0.82); border: 1px solid rgba(227,220,206,0.7); box-shadow: 0 14px 38px rgba(60,48,32,0.09); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); pointer-events: auto; } .brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; min-width: 0; } .brand img { width: 28px; height: 28px; border-radius: 7px; box-shadow: 0 0 0 1px oklch(0 0 0 / 0.12); } .brand-name { font-family: var(--font-display); font-size: 19px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); } /* Dead centre of the pill, not wherever space-between happens to leave them. Below 560px they are display: none anyway — every one of them is also in the footer, so nothing is lost. */ .nav-links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; } .nav-group { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .nav-link { font-size: 12px; font-weight: 500; color: var(--ink-muted); padding: 5px 8px; border-radius: 8px; transition: background-color 120ms ease-out, color 120ms ease-out; } .nav-link:hover { background: var(--surface-raised); color: var(--ink); } .nav-link:focus-visible, .brand:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .nav-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 7px 13px; border: 1px solid var(--surface-inverted); border-radius: 17px; background: var(--surface-inverted); color: #fffdf8; font-size: 12px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; transition: background-color 150ms ease-out, scale 150ms ease-out; } .nav-cta:hover { background: #0f0d0b; } .nav-cta:active { scale: 0.96; } @media (max-width: 560px) { .nav-bar { top: 10px; padding-inline: 10px; } .nav-shell { height: 56px; gap: 12px; padding: 0 6px 0 12px; } .nav-links { display: none; } } /* ── Page hero ────────────────────────────────────────────────────────── */ .page { max-width: 780px; margin: 0 auto; padding: 132px 20px 88px; } .hero-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--copper-deep); background: var(--surface); box-shadow: var(--shadow-border); } .hero-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--copper); } h1 { font-family: var(--font-display); font-size: clamp(44px, 5.6vw, 74px); line-height: 1.02; letter-spacing: -0.018em; font-weight: 400; text-wrap: balance; margin: 22px 0 16px; color: var(--ink); } h1 em { font-style: italic; color: var(--copper); } .hero-intro { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; letter-spacing: -0.012em; color: var(--ink-muted); max-width: 660px; margin: 0 0 28px; } .meta { font-size: 13px; color: var(--ink-faint); letter-spacing: 0.02em; margin: 0 0 34px; } /* ── Page hero ornament ───────────────────────────────────────────────── */ /* The landing page carries its own art; these pages were bare paper. One plate, top-right of the hero, behind the heading. It is photographed on the same #F7F3EA the page is, so `multiply` leaves the ground untouched and only the rope darkens — which is why it needs no cut-out and no transparency. */ .page { position: relative; } .page > *:not(.page-art-wrap) { position: relative; z-index: 2; } .page-art-wrap { display: contents; } .page-art { position: absolute; z-index: 0; top: -26px; right: -170px; width: min(620px, 76vw); height: auto; opacity: 0.62; mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(58% 68% at 52% 46%, #000 26%, transparent 74%); mask-image: radial-gradient(58% 68% at 52% 46%, #000 26%, transparent 74%); pointer-events: none; } @media (max-width: 860px) { .page-art { top: -40px; right: -200px; width: 106vw; opacity: 0.42; } } /* ── Body typography ──────────────────────────────────────────────────── */ .prose h2 { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -0.014em; font-weight: 400; text-wrap: balance; margin: 64px 0 14px; color: var(--ink); scroll-margin-top: 90px; } .prose h3 { font-family: var(--font-body); font-size: 17px; font-weight: 600; letter-spacing: -0.015em; margin: 30px 0 6px; color: var(--ink); scroll-margin-top: 90px; } .prose p { color: var(--ink-muted); font-size: 16px; margin: 12px 0; } .prose strong { color: var(--ink); font-weight: 600; } .prose em { color: var(--ink); font-style: italic; } .prose code, code { overflow-wrap: anywhere; font-size: 14px; } .prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--copper); text-underline-offset: 3px; transition: text-decoration-color 150ms ease-out; } .prose a:hover { text-decoration-color: var(--ink); } .prose ul, .prose ol { color: var(--ink-muted); padding-left: 1.25em; margin: 12px 0; } .prose li { margin: 6px 0; } .prose li::marker { color: var(--copper); } /* ── Cards & callouts ─────────────────────────────────────────────────── */ .callout { margin: 30px 0; padding: 24px 26px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-border); } .callout .callout-title { font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--copper-deep); margin: 0 0 8px; } .callout p { margin: 8px 0 0; } .callout p:last-child { margin-bottom: 0; } /* ── Q&A ──────────────────────────────────────────────────────────────── */ .faq-item { padding: 20px 0; border-bottom: 1px solid var(--stroke); } .faq-item:first-of-type { border-top: 1px solid var(--stroke); } .faq-q { font-family: var(--font-display); font-size: 25px; font-weight: 400; line-height: 1.16; letter-spacing: -0.012em; color: var(--ink); margin: 0 0 8px; } .faq-a { color: var(--ink-muted); font-size: 15.5px; margin: 0 0 8px; } .faq-a:last-child { margin-bottom: 0; } /* ── Final CTA card ───────────────────────────────────────────────────── */ .cta-card { margin: 72px 0 0; padding: 46px 32px; border-radius: 28px; background: var(--surface-inverted); text-align: center; } .cta-card h2 { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 42px); line-height: 1.06; letter-spacing: -0.014em; font-weight: 400; text-wrap: balance; margin: 0 0 10px; color: #f5efe3; } .cta-card h2 em { font-style: italic; color: var(--copper); } .cta-card p { color: #a2988a; font-size: 15px; margin: 0 0 24px; } .btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 12px; font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; background: #fffdf8; color: #1c1917; border: 1px solid #fffdf8; transition: scale 150ms ease-out, box-shadow 150ms ease-out; box-shadow: 0 10px 24px rgba(0,0,0,0.28); } .btn-primary:hover { box-shadow: 0 14px 30px rgba(0,0,0,0.36); } .btn-primary:active { scale: 0.96; box-shadow: none; } .btn-primary:focus-visible { outline: 2px solid #fffdf8; outline-offset: 3px; } /* ── Footer ───────────────────────────────────────────────────────────── */ footer.site-footer { max-width: 1120px; margin: 0 auto; padding: 32px 20px 48px; border-top: 1px solid var(--stroke); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; color: var(--ink-faint); font-size: 12px; } footer.site-footer .links { display: flex; gap: 16px; flex-wrap: wrap; } footer.site-footer .links a { color: var(--ink-muted); transition: color 150ms ease-out; } footer.site-footer .links a:hover { color: var(--ink); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }