/* theme.css — shared design tokens for every NPInsight page. Single source of truth for the three themes (slate/charcoal/patriot) and the type system. Extracted from index.html rather than copy-pasted a 4th and 5th time into about.html/contact.html/testimonials.html — same reasoning as nav.js existing instead of duplicating nav markup per page. org_report.html intentionally does NOT use this file — it has its own separate variable namespace (--navy/--cream/etc rather than --bg/--surface/etc) for reasons documented in that file's own CSS comments, and refactoring it onto this naming scheme now would be unnecessary churn for no real benefit. Pages using this file must set (or "charcoal" / "patriot") and link this stylesheet. */ :root{ --radius: 6px; --radius-sm: 4px; --serif: "Source Serif 4", Georgia, serif; --sans: "IBM Plex Sans", -apple-system, system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; --max: 760px; } /* Slate & Sage (default). Most neutral; cool gray, muted navy text, sage CTA. */ html[data-theme="slate"]{ --bg: #E9EDED; --surface: #FFFFFF; --surface-alt: #F3F6F6; --text: #1E2A30; --text-muted: #5C6B70; --border: #D2D9D9; --accent: #6F8F76; --accent-hover: #5C7A63; --accent-contrast: #FFFFFF; --chip-active-bg: #6F8F76; --chip-active-text: #FFFFFF; } /* Charcoal. Pure monochrome, no color at all — black CTA on white/gray. */ html[data-theme="charcoal"]{ --bg: #F0F0F0; --surface: #FFFFFF; --surface-alt: #E4E4E4; --text: #1A1A1A; --text-muted: #6B6B6B; --border: #D5D5D5; --accent: #1A1A1A; --accent-hover: #000000; --accent-contrast: #FFFFFF; --chip-active-bg: #1A1A1A; --chip-active-text: #FFFFFF; } /* Patriot. Red, white & blue — navy text/secondary accent, flag-red CTA. */ html[data-theme="patriot"]{ --bg: #F4F6F9; --surface: #FFFFFF; --surface-alt: #E8ECF2; --text: #1B2A4A; --text-muted: #5C6B85; --border: #D5DCE5; --accent: #B22234; --accent-hover: #8C1A28; --accent-contrast: #FFFFFF; --chip-active-bg: #1B2A4A; --chip-active-text: #FFFFFF; } *{ box-sizing: border-box; } html,body{ margin:0; padding:0; } body{ background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; transition: background-color .35s ease, color .35s ease; } a{ color: inherit; } ::selection{ background: var(--accent); color: var(--accent-contrast); } :focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* ============ NAV (shared by index/about/contact/testimonials) ============ */ .site-nav{ display:flex; align-items:center; justify-content:space-between; max-width: 1040px; margin: 0 auto; padding: 28px 24px 0; } .site-nav__inner{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:20px; } .site-nav__links{ display:flex; align-items:center; gap:24px; flex-shrink:0; } .site-nav__link{ font-family: var(--sans); font-size: .85rem; color: var(--text-muted); text-decoration:none; white-space:nowrap; } .site-nav__link:hover{ color: var(--text); } .site-nav__logo{ font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.35rem; letter-spacing: -0.01em; text-decoration:none; color: var(--text); display:flex; align-items:baseline; gap:10px; flex-shrink:0; } .site-nav__logo-tag{ font-family: var(--mono); font-style:normal; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); } .site-nav__search{ display:flex; flex:1; max-width:260px; } .site-nav__search-input{ flex:1; border:1px solid var(--border); border-right:none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); padding: 6px 10px; font-size:.82rem; font-family: var(--sans); outline:none; background: var(--surface); color: var(--text); } .site-nav__search-input::placeholder{ color: var(--text-muted); } .site-nav__search-btn{ border:1px solid var(--accent); background: var(--accent); color: var(--accent-contrast); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 6px 12px; cursor:pointer; } /* ============ THEME PICKER (dropdown — scales to any number of themes, unlike a click-to-cycle button) ============ */ .site-nav__theme{ position:relative; flex-shrink:0; } .theme-toggle{ width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background: var(--surface); cursor:pointer; padding:0; position:relative; overflow:hidden; transition: transform .15s ease; } .theme-toggle:hover{ transform: scale(1.05); } .theme-toggle::before{ content:""; position:absolute; inset:0; background: linear-gradient(135deg, var(--preview-bg, var(--bg)) 50%, var(--preview-accent, var(--accent)) 50%); } .theme-menu{ position:absolute; top:calc(100% + 8px); right:0; z-index:20; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 4px 16px rgba(0,0,0,.14); padding:6px; min-width:180px; } .theme-menu__item{ display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; text-align:left; padding:8px 10px; font-family: var(--sans); font-size:.85rem; color: var(--text); cursor:pointer; border-radius: var(--radius-sm); } .theme-menu__item:hover{ background: var(--surface-alt); } .theme-menu__swatch{ width:18px; height:18px; border-radius:50%; flex-shrink:0; border:1px solid var(--border); } @media (max-width: 640px){ .site-nav__links{ display:none; } .site-nav__search{ max-width:none; } }