/* overthinking-bonuses-styles.css — The Overthinking Reset Series · Bonus Pages highvibes.click/overthinking/bonuses/ Typography: Inter (headings + UI) + Inter (body) Load in every page : Book accent values: Book 1 — Sage: #3A7260 fill: #EAF1EB Book 2 — Terracotta: #B84E20 fill: #FAF1E9 Book 3 — Plum: #6B4B9A fill: #F2EEF9 Book 4 — Slate Blue: #3A6A98 fill: #EBF0F7 Book 5 — Rose: #A04870 fill: #F7EBF2 Book 6 — Gold: #A87E10 fill: #F7F0E1 */ /* ─── Tokens ──────────────────────────────────────────── */ :root { --white: #ffffff; --surface: #f5f6f4; --soft: #e8ede9; --border: #e2e5e0; --ink: #252826; --body: #4a524c; --muted: #828c84; --accent: #3A7260; --fill: #EAF1EB; } /* ─── Reset ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* ─── Base ────────────────────────────────────────────── */ body { margin: 0; background: var(--white); color: var(--ink); font-family: Inter, sans-serif; font-weight: 400; line-height: 1.65; -webkit-font-smoothing: antialiased; } /* ─── Layout ──────────────────────────────────────────── */ .wrap { width: min(1020px, calc(100% - 36px)); margin: 0 auto; } .narrow { max-width: 700px; margin: 0 auto; } /* ─── Typography ──────────────────────────────────────── */ h1, h2, h3, h4 { font-family: 'Inter', sans-serif; font-weight: 600; line-height: 1.1; margin: 0; color: var(--ink); } p { color: var(--body); margin: 0 0 16px; } p:last-child { margin-bottom: 0; } a { color: inherit; } .eyebrow { font-family: Inter, sans-serif; font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 10px; } /* ─── Topbar ──────────────────────────────────────────── */ .topbar { background: var(--fill); border-bottom: 1px solid var(--border); color: var(--accent); text-align: center; font-family: Inter, sans-serif; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; padding: 9px 16px; font-weight: 500; } /* ─── Header ──────────────────────────────────────────── */ header { padding: 18px 0; border-bottom: 1px solid var(--border); background: var(--white); position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 6px rgba(0,0,0,.05); } .header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .brand { font-family: 'Inter', sans-serif; font-size: .95rem; font-weight: 600; color: var(--body); text-transform: uppercase; text-decoration: none; } .header-links { display: flex; gap: 8px; flex-wrap: wrap; } .header-link { font-family: Inter, sans-serif; font-size: .8rem; color: var(--muted); text-decoration: none; border: 1px solid var(--border); padding: 6px 13px; border-radius: 999px; transition: .18s; } .header-link:hover { color: var(--ink); border-color: #bfc5bc; } .header-link.accent-link { background: var(--accent); color: white; border-color: var(--accent); } .header-link.accent-link:hover { opacity: .88; } /* ─── Buttons ─────────────────────────────────────────── */ .btn { display: inline-block; background: var(--accent); color: white; text-decoration: none; padding: 11px 22px; border-radius: 999px; font-family: Inter, sans-serif; font-weight: 500; font-size: .9rem; transition: .18s; cursor: pointer; border: none; line-height: 1; } .btn:hover { opacity: .88; transform: translateY(-1px); } .btn-block { display: block; text-align: center; } /* ─── Footer ──────────────────────────────────────────── */ footer { padding: 28px 0; border-top: 1px solid var(--border); color: var(--muted); font-family: Inter, sans-serif; font-size: .82rem; text-align: center; background: var(--white); } footer a { color: var(--muted); text-decoration: none; } footer a:hover { color: var(--body); } /* ─── Responsive ──────────────────────────────────────── */ @media (max-width: 560px) { .header-inner { flex-direction: column; align-items: flex-start; } }