/* ============================================================ Top10Ranked — Shared design system (v3.0) Loaded on every page. Page-specific styles can be inlined in the page and will cascade after this file. ============================================================ */ :root { /* Brand */ --accent: #E85D26; --accent-hover: #c84a18; --accent-soft: rgba(232, 93, 38, 0.10); --accent-ring: rgba(232, 93, 38, 0.22); /* Surfaces */ --bg: #FAF7F2; --bg-alt: #F1ECE3; --card-bg: #FFFFFF; --ink: #0E1116; --ink-soft: #1F242C; /* Text */ --text-primary: #0E1116; --text-secondary: #4A525C; --text-muted: #6B7280; --text-on-ink: #F7F4EE; --text-on-ink-muted: rgba(247, 244, 238, 0.72); /* Lines */ --border-subtle: #E6E0D4; --border-strong: #D7CFBF; /* Status colors (kept stable for badges) */ --score-bg: #F1ECE3; --social-proof-bg: #E8F4E8; --social-proof-text: #1F6F1F; --green-badge-bg: #E8F4E8; --green-badge-text: #155215; --disclosure-bg: #F1ECE3; --disclosure-border: #D7CFBF; /* Geometry */ --radius-card: 18px; --radius-btn: 999px; --radius-pill: 999px; --max-width: 1180px; /* Elevation */ --shadow-card: 0 1px 0 rgba(14,17,22,0.04), 0 6px 18px rgba(14,17,22,0.05); --shadow-card-hover: 0 1px 0 rgba(14,17,22,0.05), 0 18px 38px rgba(14,17,22,0.10); --shadow-ring: 0 0 0 1px var(--border-subtle); /* Type */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Fraunces', 'Times New Roman', Georgia, serif; --font: var(--font-sans); /* legacy alias */ } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); background: var(--bg); color: var(--text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* Subtle paper grain on body bg — purely decorative, very low impact */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.4; background-image: radial-gradient(circle at 20% 10%, rgba(232,93,38,0.04), transparent 40%), radial-gradient(circle at 90% 80%, rgba(14,17,22,0.04), transparent 45%); } main, nav, footer { position: relative; z-index: 1; } /* ---- Skip link ---- */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--text-on-ink); padding: 12px 18px; font-weight: 600; font-size: 0.9rem; z-index: 200; border-radius: 0 0 10px 0; } .skip-link:focus { left: 0; } /* ---- Container ---- */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } /* ---- Typography helpers ---- */ .display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; font-optical-sizing: auto; font-variation-settings: "SOFT" 50, "WONK" 0; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-secondary); } .eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; display: inline-block; opacity: 0.6; } .dot { color: var(--accent); } /* ---- Top trust strip ---- */ .tape { background: var(--ink); color: var(--text-on-ink-muted); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em; padding: 10px 16px; text-align: center; position: relative; z-index: 2; } .tape strong { color: var(--text-on-ink); font-weight: 600; } .tape .sep { opacity: 0.4; margin: 0 12px; } /* ---- Navigation ---- */ .nav { position: sticky; top: 0; background: rgba(250, 247, 242, 0.85); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border-subtle); z-index: 100; } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .nav-logo { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); display: inline-flex; align-items: baseline; } .nav-logo span { color: var(--accent); } .nav-logo::after { content: "."; color: var(--accent); font-weight: 700; margin-left: 1px; } .nav-links { display: flex; gap: 8px; list-style: none; align-items: center; } .nav-links a { font-size: 0.88rem; font-weight: 500; color: var(--text-secondary); transition: color 0.18s, background 0.18s; position: relative; padding: 8px 14px; border-radius: 999px; } .nav-links a:hover { color: var(--text-primary); background: var(--bg-alt); } .nav-links a[aria-current="page"] { color: var(--text-primary); background: var(--bg-alt); } .nav-links a[aria-current="page"]::after { content: ""; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; display: inline-block; margin-left: 6px; vertical-align: middle; } .nav-toggle { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-primary); padding: 4px 8px; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-weight: 600; font-size: 0.92rem; padding: 13px 22px; border-radius: var(--radius-btn); border: 1px solid transparent; cursor: pointer; transition: transform 0.15s, background 0.18s, color 0.18s, box-shadow 0.18s, border-color 0.18s; white-space: nowrap; text-decoration: none; } .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(232, 93, 38, 0.28); } .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(232, 93, 38, 0.34); } .btn-ink { background: var(--ink); color: var(--text-on-ink); } .btn-ink:hover { background: #000; transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--border-strong); } .btn-ghost:hover { border-color: var(--ink); } /* ---- Footer ---- */ .footer { background: var(--ink); color: var(--text-on-ink-muted); padding: 64px 24px 28px; margin-top: 96px; position: relative; } .footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent), #f5a878); } .footer-inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1.2fr 2fr; gap: 56px; align-items: start; } .footer-brand { display: flex; flex-direction: column; gap: 14px; } .footer-logo { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--text-on-ink); letter-spacing: -0.02em; } .footer-logo span { color: var(--accent); } .footer-logo::after { content: "."; color: var(--accent); } .footer-tagline { font-size: 0.88rem; line-height: 1.6; max-width: 280px; } .footer-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; list-style: none; } .footer-links a { font-size: 0.86rem; color: var(--text-on-ink-muted); transition: color 0.15s; padding: 4px 0; display: inline-block; } .footer-links a:hover { color: var(--text-on-ink); } .footer-bottom { max-width: var(--max-width); margin: 40px auto 0; padding-top: 24px; border-top: 1px solid rgba(247, 244, 238, 0.10); display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; } .footer-disclosure { font-size: 0.74rem; color: var(--text-on-ink-muted); line-height: 1.6; max-width: 720px; opacity: 0.85; } .footer-copy { font-size: 0.74rem; color: var(--text-on-ink-muted); opacity: 0.65; } /* ---- Disclosure bar (top of legal/about pages) ---- */ .disclosure-bar { background: var(--bg-alt); border-bottom: 1px solid var(--border-subtle); text-align: center; padding: 8px 16px; font-size: 0.76rem; color: var(--text-secondary); } /* ---- Content / prose pages ---- */ .about-content { padding: 64px 0 80px; max-width: 760px; } .about-content > .eyebrow { margin-bottom: 18px; } .about-content h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.25rem, 5vw, 3.25rem); letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 28px; } .about-content h1 .dot { color: var(--accent); } .about-content h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.015em; margin-top: 48px; margin-bottom: 16px; padding-top: 24px; border-top: 1px solid var(--border-subtle); } .about-content h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; } .about-content p { color: var(--text-secondary); font-size: 1rem; line-height: 1.75; margin-bottom: 18px; max-width: 720px; } .about-content p strong { color: var(--text-primary); } .about-content a { color: var(--accent); font-weight: 500; border-bottom: 1px solid var(--accent-ring); transition: border-color 0.15s; } .about-content a:hover { border-bottom-color: var(--accent); } .disclosure-box { background: var(--bg-alt); border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent); border-radius: 14px; padding: 22px 26px; margin: 24px 0 32px; } .disclosure-box h4 { font-size: 0.86rem; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.08em; } .disclosure-box p { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.7; } /* ---- Responsive (shared chrome) ---- */ @media (max-width: 768px) { .footer-inner { grid-template-columns: 1fr; gap: 32px; } .footer-links { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .nav-inner { height: 64px; } .nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--bg); flex-direction: column; padding: 16px 24px; border-bottom: 1px solid var(--border-subtle); gap: 6px; box-shadow: 0 12px 24px rgba(0,0,0,0.06); } .nav-links a { padding: 12px 14px; } .nav-links.active { display: flex; } .nav-toggle { display: block; } .container { padding: 0 18px; } .tape .sep { display: none; } .tape { font-size: 0.72rem; } }