/* ===================================================================== Alpaca Docs — landing styles Palette borrows from the in-app "Pages-paper" theme: warm cream chrome, white "document" panels, near-black ink, with a single mossy-green for citation chips so the site reads as the app, only larger. ===================================================================== */ :root { --bg: #f4f1e8; --bg-alt: #ebe7d9; --paper: #ffffff; --ink: #1a1a1a; --ink-muted: #5e5946; --ink-dim: #8c876e; --rule: #d8d3c0; --rule-strong: #b4ad94; --accent: #111111; --accent-fg: #ffffff; --cite-bg: #ecf7f0; --cite-fg: #1d6f42; --cite-rule: #c4dfd0; --danger: #b34234; --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Cambria, Georgia, serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --container: 1120px; --gutter: 28px; --shadow-paper: 0 1px 2px rgba(20, 20, 20, 0.04), 0 12px 32px -12px rgba(20, 20, 20, 0.12); --shadow-lift: 0 2px 4px rgba(20, 20, 20, 0.05), 0 18px 48px -18px rgba(20, 20, 20, 0.16); } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* Leave room for the sticky nav (~52px) when scrolling to anchors, so `#download`, `#verification`, etc. land below the bar rather than under it. */ scroll-padding-top: 80px; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent); } button { font: inherit; cursor: pointer; } img, svg { display: block; max-width: 100%; } .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } /* ===================================================================== Typography ===================================================================== */ .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); } h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.01em; margin: 0; color: var(--ink); } h1 { font-size: clamp(38px, 5.2vw, 64px); line-height: 1.05; } h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; } h3 { font-size: 19px; line-height: 1.35; } p { margin: 0 0 14px; color: var(--ink-muted); } .lede { font-size: 19px; line-height: 1.5; color: var(--ink-muted); max-width: 56ch; } /* ===================================================================== Top navigation ===================================================================== */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(244, 241, 232, 0.78); -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid transparent; transition: border-color 180ms ease, background 180ms ease; } .nav.is-scrolled { border-bottom-color: var(--rule); } .nav-inner { max-width: var(--container); margin: 0 auto; padding: 14px var(--gutter); display: flex; align-items: center; gap: 28px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-weight: 500; font-size: 18px; color: var(--ink); } .brand-mark { width: 22px; height: 22px; color: var(--ink); flex-shrink: 0; } /* Header wordmark fades in after the brand-mark finishes its load-time morph. The .js class guards against the wordmark being hidden when JavaScript fails to run (the inline script in adds it). */ .brand-wordmark { display: inline-block; } .js .brand[data-animate] .brand-wordmark { opacity: 0; transform: translateX(-8px); transition: opacity 380ms ease, transform 380ms ease; } .brand[data-animate].is-revealed .brand-wordmark { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .brand[data-animate] .brand-wordmark { opacity: 1; transform: none; } } .nav-links { display: flex; align-items: center; gap: 22px; margin-left: auto; font-size: 14px; color: var(--ink-muted); } .nav-links a { transition: color 120ms ease; } .nav-links a.is-active { color: var(--ink); } .nav-cta { display: inline-flex; align-items: center; padding: 8px 14px; background: var(--accent); color: var(--accent-fg); border-radius: 8px; font-size: 13.5px; font-weight: 500; border: 0; transition: transform 120ms ease, background 120ms ease; } .nav-cta:hover { background: #2a2a2a; color: var(--accent-fg); } .nav-burger { display: none; } @media (max-width: 760px) { .nav-links a:not(.nav-cta) { display: none; } } /* ===================================================================== Buttons ===================================================================== */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 9px; font-size: 14.5px; font-weight: 500; border: 1px solid transparent; background: var(--paper); color: var(--ink); transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, box-shadow 120ms ease; } .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -8px rgba(20,20,20,0.18); } .btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .btn-primary:hover { background: #2a2a2a; color: var(--accent-fg); } .btn-ghost { background: transparent; border-color: var(--rule-strong); color: var(--ink); } .btn-ghost:hover { background: var(--paper); } .btn .icon { width: 16px; height: 16px; } /* ===================================================================== Hero — painting on the right, cream wash on the left for the headline ===================================================================== */ .hero { position: relative; padding: 96px 0 120px; background-color: var(--bg); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(to right, var(--bg) 22%, rgba(244, 241, 232, 0.55) 48%, rgba(244, 241, 232, 0.05) 95%), url("assets/hero-bg.jpg"); background-size: cover, cover; background-position: center, center right; background-repeat: no-repeat, no-repeat; pointer-events: none; } .hero-inner { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); } .hero-copy { max-width: 620px; } .hero-copy .eyebrow { margin-bottom: 18px; display: inline-block; } .hero-copy h1 { margin-bottom: 22px; max-width: 14ch; } .hero-copy .lede { margin-bottom: 32px; max-width: 52ch; } .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; } .hero-trust { margin-top: 32px; display: flex; gap: 22px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--ink-dim); } .hero-trust span::before { content: "·"; margin-right: 8px; color: var(--rule-strong); } .hero-trust span:first-child::before { content: "✓"; color: var(--cite-fg); } @media (max-width: 880px) { .hero { padding: 56px 0 72px; } .hero::before { background-image: linear-gradient(to bottom, var(--bg) 38%, rgba(244, 241, 232, 0.6) 70%, rgba(244, 241, 232, 0.15) 100%), url("assets/hero-bg.jpg"); background-position: center, center bottom; } } /* ===================================================================== Pillars (three columns of trust) ===================================================================== */ .pillars { padding: 56px 0 24px; } .pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .pillar { padding: 32px 28px; border-right: 1px solid var(--rule); } .pillar:last-child { border-right: 0; } .pillar .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--ink-dim); } .pillar h3 { font-family: var(--font-serif); font-size: 22px; margin: 8px 0 10px; } .pillar p { font-size: 14.5px; margin: 0; } @media (max-width: 760px) { .pillars-grid { grid-template-columns: 1fr; } .pillar { border-right: 0; border-bottom: 1px solid var(--rule); } .pillar:last-child { border-bottom: 0; } } /* ===================================================================== Section scaffold ===================================================================== */ .section { padding: 88px 0; border-top: 1px solid var(--rule); } .section-head { max-width: 720px; margin-bottom: 40px; } .section-head .eyebrow { display: block; margin-bottom: 12px; } .section-head h2 { margin-bottom: 12px; } /* ===================================================================== Demo — replica of the in-app chat surface (lifted from theme research) ===================================================================== */ .demo { background: var(--bg-alt); } .demo-frame { display: grid; grid-template-columns: 220px 1fr; height: 640px; background: var(--bg-alt); border: 1px solid var(--rule-strong); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lift); } .demo-frame-wide { height: 600px; margin-top: 16px; } .demo-frame-wide .demo-doc { margin: 22px 22px 22px 6px; } .demo-frame-wide .demo-msg { max-width: 720px; } .demo-sidebar { background: var(--bg-alt); padding: 14px 10px; display: flex; flex-direction: column; border-right: 1px solid var(--rule); } .demo-brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-serif); font-size: 15px; padding: 4px 8px 14px; } .demo-brand .demo-brand-mark { width: 14px; height: 14px; background: var(--accent); border-radius: 50%; } .demo-new { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 13px; color: var(--ink); border-radius: 7px; } .demo-new .plus { color: var(--ink-dim); } .demo-section-label { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); padding: 14px 10px 6px; font-weight: 600; } .demo-row { padding: 7px 10px; border-radius: 7px; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 1px; } .demo-row .subtitle { display: block; font-size: 11px; color: var(--ink-dim); margin-top: 1px; } .demo-row.active { background: #d8d0b0; } .demo-account { margin-top: auto; padding: 10px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--ink-muted); display: flex; justify-content: space-between; align-items: center; } .demo-account .plan { font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-weight: 600; } .demo-doc { background: var(--paper); margin: 18px 18px 18px 6px; border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px -8px rgba(0,0,0,0.08); overflow: hidden; display: flex; flex-direction: column; min-width: 0; } .demo-doc-head { padding: 14px 22px; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 2px; } .demo-doc-head .title { font-family: var(--font-serif); font-size: 16px; } .demo-doc-head .sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-dim); } .demo-msgs { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .demo-msg { width: 100%; max-width: 640px; } .demo-user { background: var(--bg); border: 1px solid var(--rule); padding: 10px 14px; border-radius: 12px; margin-left: 60px; font-size: 13.5px; line-height: 1.55; } .demo-pre { border: 1px solid var(--rule); border-radius: 8px; padding: 9px 12px; background: var(--paper); margin-bottom: 12px; } .demo-pre-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-serif); font-size: 13px; color: var(--ink-dim); } .demo-pre-body { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; } .demo-step { display: flex; align-items: flex-start; gap: 8px; font-family: var(--font-serif); font-size: 13px; color: var(--ink-muted); position: relative; } .demo-step + .demo-step::before { content: ""; position: absolute; top: -8px; left: 4px; width: 1px; height: 8px; background: var(--rule); } .demo-step .dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 999px; margin-top: 6px; background: #2f9e44; } .demo-step .name { color: var(--ink); font-weight: 600; } .demo-step .meta { color: var(--ink-dim); margin-left: 4px; } .demo-prose { font-size: 14px; line-height: 1.65; color: var(--ink); } .demo-prose p { margin: 0 0 10px; } .demo-ol { margin: 4px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; } .demo-ol li { padding-left: 4px; } .demo-ol li::marker { color: var(--ink-dim); font-variant-numeric: tabular-nums; } .cite { display: inline-flex; align-items: center; padding: 1px 6px; border: 1px solid var(--cite-rule); border-radius: 4px; background: var(--cite-bg); color: var(--cite-fg); font-size: 0.85em; line-height: 1.3; font-weight: 500; white-space: nowrap; } /* Verified quote: background highlight + a green underline. The in-app version of this is a green pill; in editorial context (the landing's demo) the underline reads as "trustworthy attestation" without looking like a UI element. */ .vquote { background: var(--cite-bg); color: var(--ink); text-decoration: underline; text-decoration-color: var(--cite-fg); text-decoration-thickness: 1.5px; text-underline-offset: 3px; padding: 0 3px; border-radius: 2px; font-style: italic; } .demo-composer { padding: 14px 22px 18px; border-top: 1px solid var(--rule); display: flex; justify-content: center; } .demo-composer-box { width: 100%; max-width: 560px; border: 1px solid var(--rule-strong); background: var(--paper); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; } .demo-composer-input { flex: 1; color: var(--ink-dim); font-size: 13px; } .demo-composer-send { background: var(--accent); color: var(--accent-fg); border-radius: 8px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; } @media (max-width: 880px) { /* Mobile: drop the sidebar, let the chat fill the frame. */ .demo-frame, .demo-frame-wide { grid-template-columns: 1fr; height: 680px; } .demo-sidebar { display: none; } .demo-doc, .demo-frame-wide .demo-doc { margin: 0; border-radius: 0; box-shadow: none; border: 0; } .demo-doc-head { padding: 12px 16px; } .demo-msgs { padding: 16px; } .demo-msg { max-width: 100% !important; } .demo-user { margin-left: 24px; } .demo-composer { padding: 12px 16px 14px; } } /* ===================================================================== Feature blocks (alternating left/right) ===================================================================== */ .feature { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .feature.image-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); } .feature.reverse { direction: rtl; } .feature.reverse > * { direction: ltr; } .feature .copy h2 { margin-bottom: 14px; } .feature .copy p { font-size: 16px; max-width: 48ch; } .feature .copy ul { margin: 18px 0 0; padding: 0; list-style: none; } .feature .copy li { padding: 10px 0; border-top: 1px solid var(--rule); display: flex; gap: 10px; font-size: 14.5px; color: var(--ink-muted); } .feature .copy li:last-child { border-bottom: 1px solid var(--rule); } .feature .copy li strong { color: var(--ink); font-weight: 600; margin-right: 6px; } .feature-card { background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 28px; box-shadow: var(--shadow-paper); min-height: 320px; } @media (max-width: 880px) { .feature { grid-template-columns: 1fr; gap: 28px; } .feature.reverse { direction: ltr; } } /* --- Verification card ----------------------------------------------- */ .verify-card .demo-prose { font-size: 15px; } .verify-card .stamp { margin-top: 18px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--rule); border-radius: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); display: flex; gap: 10px; align-items: flex-start; } .verify-card .stamp .ok { width: 14px; height: 14px; border-radius: 4px; background: var(--cite-bg); color: var(--cite-fg); border: 1px solid var(--cite-rule); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; } /* --- Folder card ----------------------------------------------------- */ .folder-card { font-family: var(--font-mono); font-size: 13px; color: var(--ink-muted); line-height: 1.7; } .folder-card .root { color: var(--ink); font-weight: 600; } .folder-card .hidden-dir { color: var(--ink-dim); } .folder-card .note { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); font-family: var(--font-sans); font-size: 13px; color: var(--ink-dim); } /* --- Screenshot placeholder ----------------------------------------- */ /* A labeled dashed box we drop in wherever a real product screenshot should go but doesn't exist yet. Wrap an if/when it lands. */ .shot-slot { width: 100%; aspect-ratio: 16 / 10; border: 1px dashed var(--rule-strong); border-radius: 12px; background: repeating-linear-gradient( 135deg, transparent 0 12px, rgba(180, 173, 148, 0.08) 12px 13px ), var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink-dim); font-family: var(--font-mono); font-size: 12px; text-align: center; padding: 24px; } .shot-slot strong { font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-muted); font-weight: 500; } .shot-slot .hint { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; } /* --- Tracked-changes card ------------------------------------------- */ .tracked-card { font-family: var(--font-serif); font-size: 15px; line-height: 1.7; } .tracked-card del { color: var(--danger); text-decoration: line-through; text-decoration-thickness: 1.5px; } .tracked-card ins { color: var(--cite-fg); text-decoration: none; background: var(--cite-bg); padding: 0 2px; border-radius: 2px; } .tracked-card .meta { margin-top: 18px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-dim); letter-spacing: 0.06em; } /* --- Cost matrix (3-column "what you pay" card) --------------------- */ .cost-matrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--paper); box-shadow: var(--shadow-paper); } .cost-cell { padding: 28px 26px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 4px; } .cost-cell:last-child { border-right: 0; } .cost-cell .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); } .cost-cell .price { font-family: var(--font-serif); font-size: 26px; line-height: 1.15; margin: 4px 0 6px; color: var(--ink); } .cost-cell p { font-size: 14px; line-height: 1.55; color: var(--ink-muted); margin: 0; } @media (max-width: 760px) { .cost-matrix { grid-template-columns: 1fr; } .cost-cell { border-right: 0; border-bottom: 1px solid var(--rule); } .cost-cell:last-child { border-bottom: 0; } } /* --- 2-up compressed cards (Audit + Prompts) ------------------------- */ .cards-2up { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .cards-2up .feature-card { min-height: 0; padding: 28px; } .cards-2up h3 { font-family: var(--font-serif); font-size: 22px; margin: 0 0 10px; } .cards-2up .eyebrow { display: block; margin-bottom: 10px; } .cards-2up p { margin: 0; font-size: 14.5px; } .cards-2up .ill { margin-top: 18px; } @media (max-width: 760px) { .cards-2up { grid-template-columns: 1fr; } } /* --- Prompt library card -------------------------------------------- */ .prompt-card { display: flex; flex-direction: column; gap: 10px; } .prompt-card .row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--bg); font-size: 13.5px; } .prompt-card .row .ico { width: 26px; height: 26px; border-radius: 6px; background: var(--paper); border: 1px solid var(--rule); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); flex-shrink: 0; } .prompt-card .row .name { color: var(--ink); font-weight: 500; } .prompt-card .row .sub { color: var(--ink-dim); font-size: 12.5px; } .prompt-card .row .run { margin-left: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-dim); } /* ===================================================================== Database section — list of sources ===================================================================== */ .database { background: var(--bg-alt); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .db-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; margin-top: 32px; border: 1px solid var(--rule); background: var(--paper); border-radius: 10px; overflow: hidden; } .db-cell { padding: 22px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .db-cell .country { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-dim); margin-bottom: 6px; } .db-cell .name { font-family: var(--font-serif); font-size: 18px; } .db-cell .desc { font-size: 13px; color: var(--ink-muted); margin-top: 4px; } .db-stats { display: flex; flex-wrap: wrap; gap: 36px; margin-top: 28px; } .db-stat .num { font-family: var(--font-serif); font-size: 36px; line-height: 1; letter-spacing: -0.02em; } .db-stat .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-dim); margin-top: 6px; text-transform: uppercase; } /* ===================================================================== Pricing teaser ===================================================================== */ .pricing-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .plan { background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 14px; } .plan.featured { border-color: var(--ink); box-shadow: var(--shadow-lift); } .plan .badge { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); } .plan h3 { font-size: 24px; font-family: var(--font-serif); } .plan .price { font-family: var(--font-serif); font-size: 44px; line-height: 1; letter-spacing: -0.02em; } .plan .price small { font-family: var(--font-sans); font-size: 14px; color: var(--ink-dim); } .plan ul { list-style: none; margin: 0; padding: 0; } .plan li { padding: 8px 0; font-size: 14.5px; color: var(--ink-muted); border-top: 1px solid var(--rule); } .plan li:first-child { border-top: 0; } .plan li::before { content: "·"; margin-right: 8px; color: var(--ink-dim); } .plan .cta { margin-top: auto; } @media (max-width: 760px) { .pricing-teaser { grid-template-columns: 1fr; } } /* ===================================================================== FAQ ===================================================================== */ .faq { border-top: 1px solid var(--rule); } .faq details { border-bottom: 1px solid var(--rule); padding: 18px 0; } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; font-family: var(--font-serif); font-size: 19px; color: var(--ink); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: var(--font-mono); font-size: 22px; color: var(--ink-dim); transition: transform 180ms ease; } .faq details[open] summary::after { transform: rotate(45deg); } .faq .answer { padding-top: 10px; max-width: 65ch; font-size: 15px; color: var(--ink-muted); } /* ===================================================================== Closing CTA ===================================================================== */ .closer { text-align: center; padding: 96px 0; background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.65), transparent 60%), var(--bg); border-top: 1px solid var(--rule); } .closer h2 { max-width: 18ch; margin: 0 auto 16px; } .closer p { max-width: 50ch; margin: 0 auto 28px; } .closer .hero-ctas { justify-content: center; } /* ===================================================================== Footer ===================================================================== */ .footer { background: var(--bg-alt); border-top: 1px solid var(--rule); padding: 56px 0 28px; } .footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 40px; } .footer-brand { font-family: var(--font-serif); font-size: 20px; } .footer-brand p { font-family: var(--font-sans); font-size: 13.5px; margin-top: 10px; color: var(--ink-muted); max-width: 38ch; } .footer-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 14px; font-weight: 600; } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { padding: 4px 0; font-size: 14px; color: var(--ink-muted); } .footer-col a:hover { color: var(--ink); } .footer-base { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-dim); } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } .footer-base { flex-direction: column; gap: 12px; } } /* ===================================================================== Page hero — slim hero used by pricing/contact-style pages. No background painting, just cream + serif H1 + lede. ===================================================================== */ .page-hero { padding: 96px 0 40px; background: var(--bg); border-bottom: 1px solid var(--rule); } .page-hero .container { max-width: 820px; } .page-hero h1 { font-size: clamp(36px, 4.6vw, 56px); line-height: 1.1; margin: 14px 0 18px; max-width: 20ch; } .page-hero .lede { font-size: 19px; color: var(--ink-muted); max-width: 60ch; margin: 0; } /* ===================================================================== Plan card — small additions for pricing.html ===================================================================== */ .plan .alt-price { margin: -6px 0 8px; font-size: 13px; color: var(--ink-dim); } .plan li strong { color: var(--ink); font-weight: 600; } /* Combined hero+plans block for pricing.html — tighter than the default page-hero so the title, lede, and both cards land above the fold on a typical laptop viewport. */ .pricing-top { padding: 56px 0 72px; background: var(--bg); } .pricing-top h1 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; letter-spacing: -0.01em; margin: 12px 0 14px; max-width: 22ch; color: var(--ink); } .pricing-top .lede { font-size: 16.5px; line-height: 1.55; color: var(--ink-muted); max-width: 60ch; margin: 0 0 36px; } .pricing-top .pricing-teaser { margin-top: 0; } /* Plain stacked list used inside .feature-card on pricing.html for the "what you pay the model provider" breakdown. */ .stacked-list { list-style: none; margin: 0; padding: 0; } .stacked-list li { padding: 14px 0; border-top: 1px solid var(--rule); font-size: 14.5px; line-height: 1.55; } .stacked-list li:last-child { border-bottom: 1px solid var(--rule); } .stacked-list strong { color: var(--ink); font-weight: 600; display: block; margin-bottom: 2px; } .stacked-list .desc { color: var(--ink-muted); } /* ===================================================================== Reveal-on-scroll (Intersection-Observer driven) ===================================================================== */ @media (prefers-reduced-motion: no-preference) { [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 600ms ease, transform 600ms ease; } [data-reveal].is-visible { opacity: 1; transform: none; } } /* ===================================================================== Long-form pages (terms / privacy / contact) ===================================================================== */ .page { max-width: 760px; margin: 0 auto; padding: 64px var(--gutter) 96px; } .page-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 14px; } .page h1 { font-size: clamp(32px, 4vw, 46px); margin-bottom: 12px; } .page .updated { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-dim); letter-spacing: 0.06em; margin-bottom: 40px; } .page article h2 { font-family: var(--font-serif); font-size: 22px; margin: 44px 0 12px; } .page article h3 { font-family: var(--font-serif); font-size: 17px; margin: 24px 0 8px; } .page article p, .page article li { font-size: 15.5px; color: var(--ink); line-height: 1.7; } .page article a { color: var(--ink); border-bottom: 1px solid var(--rule-strong); } .page article ul { padding-left: 22px; } .page article ol { padding-left: 22px; } /* Company info block — shown on legal pages per DL 7/2004 art. 10 */ .company-info { background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 18px 22px; margin-bottom: 28px; } .company-info h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 12px; font-weight: 600; } .company-info dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; column-gap: 22px; row-gap: 6px; font-size: 13.5px; } .company-info dt { color: var(--ink-dim); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; padding-top: 2px; } .company-info dd { margin: 0; color: var(--ink); } /* Tables used inside legal pages (e.g. sub-processors list in privacy). */ .page article table { width: 100%; border-collapse: collapse; margin: 16px 0 22px; font-size: 14px; } .page article th, .page article td { padding: 10px 14px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; line-height: 1.5; } .page article th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); font-weight: 600; border-bottom: 1px solid var(--rule-strong); } /* Lettered legal lists rendered with "(a)" "(b)" "(c)" prefix. */ .page article ol.lettered { list-style: none; counter-reset: alpha; padding-left: 32px; } .page article ol.lettered > li { counter-increment: alpha; position: relative; margin-bottom: 8px; } .page article ol.lettered > li::before { content: "(" counter(alpha, lower-alpha) ")"; position: absolute; left: -32px; width: 28px; color: var(--ink-muted); font-variant-numeric: tabular-nums; } /* TOC */ .toc { background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 18px 22px; margin-bottom: 40px; } .toc h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 10px; font-weight: 600; } .toc ol { margin: 0; padding-left: 22px; column-count: 2; column-gap: 28px; } .toc li { font-size: 13.5px; padding: 2px 0; break-inside: avoid; } .toc a { color: var(--ink-muted); } .toc a:hover { color: var(--ink); } @media (max-width: 600px) { .toc ol { column-count: 1; } }