/* Recon marketing site — shared styles for all non-hero pages. Inherits the visual language from heroes.css but scoped to instead of .hv-stage, since real pages scroll (artboards don't). Tokens are duplicated intentionally — single source of truth for the handoff package, easier to lift into Tailwind config later. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,200..600,30..100;1,9..144,200..500,30..100&family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;450;500&display=swap'); :root { --ink: #0A0A0A; --ink-2: #141414; --ink-3: #1F1F1F; --ink-4: #2A2A2A; --paper: #FAF7F2; --paper-2: #E8E2D6; --paper-3: #d8d2c5; --muted: #6B6660; --muted-2: #8a857d; --line: rgba(250,247,242,0.10); --line-2: rgba(250,247,242,0.18); --line-3: rgba(250,247,242,0.32); --terracotta: #C36B3E; --terracotta-2: #d68458; --display: "Fraunces", Georgia, serif; --mono: "JetBrains Mono", ui-monospace, monospace; --sans: "Inter", system-ui, sans-serif; --ease-soft: cubic-bezier(0.22, 1, 0.36, 1); /* Page rhythm */ --gutter: 56px; --max-w: 1440px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; } body { position: relative; isolation: isolate; min-height: 100vh; } /* Subtle grain layer — same as hero, applied document-wide */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: 0.03; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* ---------- Shared TopBar ---------- */ .site-topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 22px var(--gutter); border-bottom: 1px solid var(--line); background: rgba(10,10,10,0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .site-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--paper); text-decoration: none; transition: opacity 0.2s; } .site-brand:hover { opacity: 0.75; } .site-mark { display: inline-flex; color: var(--paper); } .site-brand-word { font-family: var(--display); font-size: 22px; font-weight: 400; letter-spacing: -0.01em; } .site-brand-word em { font-style: normal; color: var(--terracotta); font-weight: 500; } .site-nav { display: flex; align-items: center; gap: 28px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; } .site-nav a { color: inherit; text-decoration: none; opacity: 0.7; transition: opacity 0.2s, color 0.2s; position: relative; padding: 6px 0; } .site-nav a:hover { opacity: 1; } .site-nav a.active { opacity: 1; color: var(--terracotta); } .site-nav a.active::after { content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: 1px; background: var(--terracotta); } .site-nav-cta { border: 1px solid var(--line-2); padding: 10px 18px; border-radius: 999px; opacity: 1 !important; transition: border-color 0.2s, background 0.2s, color 0.2s; white-space: nowrap; } .site-nav-cta:hover { border-color: var(--terracotta); background: rgba(195,107,62,0.08); color: var(--terracotta); } .site-nav-cta::after { display: none !important; } .site-nav-home { color: var(--terracotta) !important; opacity: 0.85 !important; font-weight: 500; } .site-nav-home:hover { opacity: 1 !important; } .site-nav-home::after { display: none !important; } /* ---------- Shared label (matches hero) ---------- */ .site-label { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--paper); opacity: 0.7; } .site-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); box-shadow: 0 0 0 4px rgba(195,107,62,0.18); animation: site-pulse 2.4s var(--ease-soft) infinite; } @keyframes site-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(195,107,62,0.18); } 50% { box-shadow: 0 0 0 8px rgba(195,107,62,0.05); } } .site-label-num { color: var(--terracotta); font-weight: 600; } /* ---------- Page header pattern (used at top of every content page) ---------- */ .site-page-head { max-width: var(--max-w); margin: 0 auto; padding: 96px var(--gutter) 64px; border-bottom: 1px solid var(--line); } .site-page-head .site-label { margin-bottom: 28px; } .site-page-title { font-family: var(--display); font-weight: 300; font-size: clamp(56px, 7vw, 104px); line-height: 0.96; letter-spacing: -0.028em; color: var(--paper); margin: 0; font-variation-settings: "opsz" 144; text-wrap: balance; } .site-page-title em { font-style: italic; color: var(--terracotta); font-weight: 300; } .site-page-lede { margin: 40px 0 0; font-family: var(--display); font-weight: 300; font-size: 22px; line-height: 1.5; letter-spacing: -0.005em; color: var(--paper); opacity: 0.85; max-width: 62ch; text-wrap: pretty; } .site-page-lede em { font-style: italic; color: var(--terracotta); opacity: 1; } /* ---------- CTAs (mirrors hero) ---------- */ .site-cta-primary { display: inline-flex; align-items: center; gap: 14px; background: var(--paper); color: var(--ink); padding: 18px 30px; border-radius: 4px; font-family: var(--display); font-size: 18px; font-weight: 400; letter-spacing: -0.01em; transition: gap 0.3s var(--ease-soft), transform 0.3s var(--ease-soft); cursor: pointer; border: 0; } .site-cta-primary:hover { gap: 22px; transform: translateY(-1px); } .site-cta-secondary { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: var(--paper); border: 1px solid var(--line-2); padding: 17px 22px; border-radius: 4px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; } .site-cta-secondary:hover { border-color: var(--terracotta); color: var(--terracotta); background: rgba(195,107,62,0.06); } /* ---------- Section utilities ---------- */ .site-section { max-width: var(--max-w); margin: 0 auto; padding: 96px var(--gutter); } .site-section--tight { padding: 56px var(--gutter); } .site-section--rule { border-top: 1px solid var(--line); } .site-eyebrow { display: inline-block; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--terracotta); margin-bottom: 18px; } .site-h2 { font-family: var(--display); font-weight: 300; font-size: clamp(36px, 4.5vw, 64px); line-height: 1.02; letter-spacing: -0.022em; color: var(--paper); margin: 0; font-variation-settings: "opsz" 144; text-wrap: balance; } .site-h2 em { font-style: italic; color: var(--terracotta); font-weight: 300; } .site-h3 { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; color: var(--paper); margin: 0; font-variation-settings: "opsz" 60; } .site-h3 em { font-style: italic; color: var(--terracotta); font-weight: 400; } .site-prose { font-size: 17px; line-height: 1.65; color: var(--paper); opacity: 0.85; max-width: 64ch; } .site-prose p { margin: 0 0 1.1em; } .site-prose p:last-child { margin-bottom: 0; } .site-prose em { font-style: italic; font-family: var(--display); color: var(--terracotta); } .site-prose strong { font-weight: 500; opacity: 1; } .site-prose a { color: var(--terracotta); border-bottom: 1px solid rgba(195,107,62,0.4); transition: border-color 0.2s; } .site-prose a:hover { border-color: var(--terracotta); } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--line); background: var(--ink); margin-top: 64px; } .site-footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 80px var(--gutter) 48px; } .site-footer-manifesto { font-family: var(--display); font-weight: 300; font-size: clamp(32px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.022em; color: var(--paper); max-width: 22ch; margin: 0 0 64px; text-wrap: balance; font-variation-settings: "opsz" 144; } .site-footer-manifesto em { font-style: italic; color: var(--terracotta); font-weight: 300; } .site-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-top: 48px; border-top: 1px solid var(--line); } .site-footer-brand .site-brand { margin-bottom: 18px; } .site-footer-brand p { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 0; line-height: 1.7; } .site-footer-col h4 { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--terracotta); margin: 0 0 16px; font-weight: 600; } .site-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .site-footer-col a { font-family: var(--sans); font-size: 14px; color: var(--paper); opacity: 0.75; transition: opacity 0.2s, color 0.2s; } .site-footer-col a:hover { opacity: 1; color: var(--terracotta); } .site-footer-base { display: flex; align-items: center; justify-content: space-between; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); } .site-footer-base em { font-family: var(--display); font-style: italic; text-transform: none; letter-spacing: 0; color: var(--terracotta); font-size: 13px; } @media (max-width: 900px) { .site-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 600px) { :root { --gutter: 24px; } .site-nav { display: flex; gap: 0; } .site-nav a:not(.site-nav-cta) { display: none; } .site-nav-cta { background: var(--terracotta); color: var(--paper); border-color: var(--terracotta); padding: 10px 16px; font-weight: 600; } .site-nav-cta:hover { background: var(--terracotta-2); border-color: var(--terracotta-2); color: var(--paper); } .site-footer-grid { grid-template-columns: 1fr; } .site-footer-base { flex-direction: column; gap: 12px; align-items: flex-start; } }