/* whitepaper.css — chrome (nav / footer / buttons / base) for the static AnswerShare whitepaper pages under /research/whitepapers/. Body/article styling is inlined per-document in the page ; this file covers the shared shell so the static HTML renders styled standalone. */ :root { --as-navy: #060c18; --as-navy-2: #0a1628; --as-panel: #0d1521; --as-gold: #fbbf24; --as-amber: #f59e0b; --as-ink: #f1f5f9; --as-body: #cbd5e1; --as-muted: #94a3b8; --as-line: rgba(251, 191, 36, 0.15); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--as-navy); color: var(--as-body); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--as-gold); } /* ---------- Nav ---------- */ nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: 1rem clamp(1rem, 5vw, 3rem); background: rgba(6, 12, 24, 0.92); border-bottom: 1px solid var(--as-line); position: sticky; top: 0; z-index: 50; backdrop-filter: blur(8px); } .nav-logo-text { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--as-ink); text-decoration: none; } .nav-links { display: flex; align-items: center; gap: 1.25rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .nav-links a { color: var(--as-muted); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 0.15s ease; } .nav-links a:hover { color: var(--as-ink); } .nav-links a.nav-proof { color: var(--as-gold); } .nav-links a.nav-cta { color: var(--as-navy); background: var(--as-gold); padding: 0.45rem 0.95rem; border-radius: 999px; font-weight: 700; } .nav-links a.nav-cta:hover { background: #fcd34d; color: var(--as-navy); } /* ---------- Buttons ---------- */ .btn-primary, .btn-secondary { display: inline-block; text-decoration: none; font-weight: 700; border-radius: 8px; font-size: 0.9rem; padding: 0.7rem 1.25rem; transition: transform 0.12s ease, background 0.15s ease; } .btn-primary { background: var(--as-gold); color: var(--as-navy); border: 1px solid var(--as-gold); } .btn-primary:hover { background: #fcd34d; transform: translateY(-1px); } .btn-secondary { background: transparent; color: var(--as-gold); border: 1px solid rgba(251, 191, 36, 0.4); } .btn-secondary:hover { background: rgba(251, 191, 36, 0.1); } /* ---------- Cite span ---------- */ .wp-cite { display: block; margin-top: 0.5rem; font-size: 0.85rem; color: var(--as-muted); font-style: normal; } /* ---------- Footer ---------- */ footer { background: var(--as-navy-2); border-top: 1px solid var(--as-line); padding: 3rem clamp(1rem, 5vw, 3rem) 1.5rem; } .footer-inner { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; max-width: 1100px; margin: 0 auto; } .footer-brand .footer-logo-text { font-weight: 800; font-size: 1.1rem; color: var(--as-ink); text-decoration: none; } .footer-brand p { color: var(--as-muted); font-size: 0.85rem; line-height: 1.7; margin-top: 0.75rem; max-width: 32ch; } .footer-col h5 { color: var(--as-gold); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 0.85rem; } .footer-col ul { list-style: none; margin: 0; padding: 0; line-height: 2; } .footer-col a { color: var(--as-muted); text-decoration: none; font-size: 0.875rem; } .footer-col a:hover { color: var(--as-ink); } .footer-bottom { max-width: 1100px; margin: 2rem auto 0; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .footer-bottom p { color: var(--as-muted); font-size: 0.8rem; margin: 0; } .footer-tagline { color: var(--as-gold) !important; } @media (max-width: 720px) { .footer-inner { grid-template-columns: 1fr 1fr; } nav { gap: 0.75rem; } }