/* ============================================================ Verdra — Fintech aesthetic Shared overrides for index v2.html + all subpages. Activated by setting data-aesthetic="fintech" on . Only contains portable rules that apply across all pages — page-specific decoration (hero card, gap matrix, etc.) lives in the page that uses it. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ---------- Tokens (only the ones that change between aesthetics) ---------- */ body[data-aesthetic="fintech"] { --bg: #FFFFFF; --off-1: #FAFAFB; --off-2: #F3F4F6; --line: #E5E7EB; --line-soft: #F0F0F2; --text: #0E1116; --text-muted: #4B5563; --text-faint: #9CA3AF; --accent-pale: #F5E5E8; --accent-pale-2: #FAF1F3; } /* ---------- Body type ---------- */ body[data-aesthetic="fintech"] { font-family: 'Inter', -apple-system, system-ui, sans-serif; font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; } /* ---------- Display type ---------- */ body[data-aesthetic="fintech"] h1, body[data-aesthetic="fintech"] h2, body[data-aesthetic="fintech"] h3, body[data-aesthetic="fintech"] h4 { font-family: 'Inter', sans-serif; letter-spacing: -0.025em; font-weight: 600; } body[data-aesthetic="fintech"] h1 { letter-spacing: -0.035em; } /* ---------- Eyebrows / labels — switch DM Mono → Inter caps ---------- */ body[data-aesthetic="fintech"] .eyebrow { font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-size: 12px; } body[data-aesthetic="fintech"] .eyebrow::before { display: none; } body[data-aesthetic="fintech"] .page-meta { font-family: 'Inter', sans-serif; font-weight: 500; letter-spacing: 0.08em; } body[data-aesthetic="fintech"] .footer-slim-meta { font-family: 'DM Mono', monospace; font-weight: 500; letter-spacing: 0.04em; } /* ---------- Nav ---------- */ body[data-aesthetic="fintech"] .nav { background: rgba(255,255,255,0.78); border-bottom-color: var(--line-soft); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); } body[data-aesthetic="fintech"] .nav-cta, body[data-aesthetic="fintech"] .nav-links a.nav-cta { background: var(--white) !important; color: var(--text) !important; border: 1px solid var(--line) !important; border-radius: 10px !important; box-shadow: 0 1px 2px rgba(14,17,22,0.04); font-weight: 500; padding: 9px 16px; } body[data-aesthetic="fintech"] .nav-cta:hover, body[data-aesthetic="fintech"] .nav-links a.nav-cta:hover { background: var(--off-1) !important; border-color: var(--text-muted) !important; } /* ---------- Buttons ---------- */ body[data-aesthetic="fintech"] .btn { border-radius: 10px; font-weight: 500; padding: 11px 18px; } body[data-aesthetic="fintech"] .btn-primary { background: var(--accent); box-shadow: 0 1px 2px rgba(122,31,43,0.18), inset 0 1px 0 rgba(255,255,255,0.12); } body[data-aesthetic="fintech"] .btn-primary:hover { background: var(--accent-hover, #6A1925); } body[data-aesthetic="fintech"] .btn-ghost { box-shadow: 0 1px 2px rgba(14,17,22,0.04); } /* ---------- Surfaces / cards ---------- */ body[data-aesthetic="fintech"] .article, body[data-aesthetic="fintech"] .panel, body[data-aesthetic="fintech"] .card, body[data-aesthetic="fintech"] .doc-card, body[data-aesthetic="fintech"] .rule-card, body[data-aesthetic="fintech"] .sec-card, body[data-aesthetic="fintech"] .endpoint, body[data-aesthetic="fintech"] .schema-block { border-radius: 14px; } /* ---------- Article body type (legal pages) ---------- */ body[data-aesthetic="fintech"] .article h2 { font-size: 22px; } body[data-aesthetic="fintech"] .article h3 { font-size: 17px; } body[data-aesthetic="fintech"] .article p, body[data-aesthetic="fintech"] .article li { color: var(--text-muted); } body[data-aesthetic="fintech"] .article .note { border-radius: 10px; border-left-width: 3px; } /* ---------- Footer ---------- */ body[data-aesthetic="fintech"] .footer { background: var(--off-1); border-top-color: var(--line-soft); } body[data-aesthetic="fintech"] .footer-slim-meta { font-family: 'DM Mono', monospace; } body[data-aesthetic="fintech"] .footer-slim-tag, body[data-aesthetic="fintech"] .footer-slim-links a { font-family: 'Inter', sans-serif; } body[data-aesthetic="fintech"] .footer-slim-meta { font-size: 12px; color: var(--text-faint); letter-spacing: 0.02em; } /* ---------- Footer layout — give it room to breathe ---------- Restructures the slim footer into two rows so it stops feeling crowded: links sit above, brand + meta sit below as a baseline. */ body[data-aesthetic="fintech"] .footer { padding: 40px 32px 32px; } body[data-aesthetic="fintech"] .footer-slim { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; justify-content: stretch; } body[data-aesthetic="fintech"] .footer-slim-links { order: 1; display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: flex-start; padding-bottom: 24px; border-bottom: 1px solid var(--line-soft); } body[data-aesthetic="fintech"] .footer-slim-links a { font-size: 14px; font-weight: 500; color: var(--text-muted); text-decoration: none; transition: color 0.15s; } body[data-aesthetic="fintech"] .footer-slim-links a:hover { color: var(--accent); } body[data-aesthetic="fintech"] .footer-brand-slim { order: 2; font-size: 13px; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 9px; grid-column: 1; grid-row: 2; } body[data-aesthetic="fintech"] .footer-slim-meta { order: 3; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 12px; color: var(--text-faint); grid-column: 1; grid-row: 2; justify-self: end; align-self: center; } body[data-aesthetic="fintech"] .footer-slim-meta-sep { color: var(--text-faint); opacity: 0.5; } @media (max-width: 640px) { body[data-aesthetic="fintech"] .footer-slim-meta { justify-self: start; grid-row: 3; } } /* ---------- Code / monospace ---------- Keep DM Mono for inline code so it stays visually distinct from the Inter UI text — fintech is calm but still technical. */ body[data-aesthetic="fintech"] code, body[data-aesthetic="fintech"] pre { font-family: 'DM Mono', 'JetBrains Mono', monospace; }