/* ============================================================ NEW WORLD SURVIVAL — Global Stylesheet Single source of truth for all tokens, base styles, and utility classes. Never redefine these per-page. ============================================================ */ /* 1. TOKENS ---------------------------------------------------------- */ :root { --ink: #143a22; /* Primary dark surface, nav, dark sections */ --ink-deep: #0c2816; /* Footer only */ --ink-soft: #1e4d30; /* Hover state on dark cards */ --signal: #e07030; /* Single accent — CTAs, eyebrows, emphasis (brightened for dark-bg legibility) */ --signal-hover: #c85a20; /* Hover state for signal buttons */ --signal-soft: #fef3eb; /* Background tint for callout blocks */ --paper: #faf7f2; /* Default page background */ --rule: #d4d0c8; /* Decorative dividers */ --border-warm: #e2d9c9; /* Card hover border */ /* Hero overlay gradient */ --hero-overlay-start: rgba(20,58,34,0.40); --hero-overlay-end: rgba(20,58,34,0.72); } /* 2. BASE ---------------------------------------------------------- */ html { font-size: 18px; /* Bumped from browser default 16px — scales all rem-based Tailwind text utilities */ } html, body { font-family: 'IBM Plex Sans', system-ui, sans-serif; background: var(--paper); color: var(--ink); overflow-x: hidden; } img, video, svg { max-width: 100%; height: auto; } /* 3. DISPLAY FONT ---------------------------------------------------------- */ .font-display { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; letter-spacing: -0.02em; } /* 4. CARD HOVER — lift on hover for light-background cards ---------------------------------------------------------- */ .card-hover { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .card-hover:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -18px rgba(20,58,34,.25); border-color: var(--border-warm); } /* 5. TIER CARD — stronger lift for tier/feature cards ---------------------------------------------------------- */ .tier-card { transition: transform .3s ease, box-shadow .3s ease; } .tier-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -20px rgba(20,58,34,.3); } /* 6. ACCENT UNDERLINE — signal-colored highlight on inline text ---------------------------------------------------------- */ .accent-underline { background-image: linear-gradient(to right, var(--signal), var(--signal)); background-repeat: no-repeat; background-size: 100% 6px; background-position: 0 92%; padding: 0 2px; } /* 7. RULE DIVIDER — warm gradient horizontal rule ---------------------------------------------------------- */ .rule { height: 1px; background: linear-gradient(to right, transparent, var(--rule), transparent); } /* 8. NAV ACTIVE STATE — applied by includes.js based on current URL ---------------------------------------------------------- */ .nav-link.nav-active { color: var(--signal); font-weight: 500; } .nav-link[data-section="field-notes"].nav-active { color: var(--signal); } /* 9. REDUCED MOTION ---------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .card-hover, .tier-card { transition: none; } } /* ─────────────────────────────────────────────────────────────── 10. STICKY BUTTONS Bottom-center pill → How prepared is your household? (readiness) Bottom-left circle → Get Local (state page) Bottom-right circle → Chatbot (injected separately) All injected by footer-engine.js — DOM home is . ---------------------------------------------------------------- */ /* Shared circle style */ .nws-sticky-circle { position: fixed; bottom: 1.5rem; z-index: 900; padding-bottom: env(safe-area-inset-bottom, 0px); transition: opacity .25s ease, transform .25s ease; pointer-events: auto; } .nws-sticky-circle.nws-sticky-hidden { opacity: 0; pointer-events: none; } .nws-sticky-circle a { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 9999px; background: var(--signal); color: #fff; font-size: 1.1rem; text-decoration: none; box-shadow: 0 4px 20px -4px rgba(20,58,34,.35); transition: background .2s ease, box-shadow .2s ease; } .nws-sticky-circle a:hover { background: var(--signal-hover); box-shadow: 0 6px 24px -4px rgba(20,58,34,.45); } #nws-sticky-local { left: 1.5rem; } /* Mobile: tight sticky formation — CTA pill above, State + Chatbot below */ @media (max-width: 768px) { #nws-sticky-cta { bottom: calc(60rem + env(safe-area-inset-bottom, 0px)); padding-bottom: 0; } #nws-sticky-local { bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)); left: 1rem; padding-bottom: 0; } footer { padding-bottom: calc(10rem + env(safe-area-inset-bottom, 0px)); } } /* Center pill */ #nws-sticky-cta { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 900; padding-bottom: env(safe-area-inset-bottom, 0px); transition: opacity .25s ease, transform .25s ease; pointer-events: auto; } #nws-sticky-cta.nws-sticky-hidden { opacity: 0; transform: translateX(-50%) translateY(8px); pointer-events: none; } #nws-sticky-cta a { display: inline-flex; align-items: center; gap: .65rem; background: var(--signal); color: #fff; font-family: 'IBM Plex Sans', system-ui, sans-serif; white-space: nowrap; padding: .7rem 1.6rem; border-radius: 9999px; text-decoration: none; box-shadow: 0 4px 20px -4px rgba(20,58,34,.35); transition: background .2s ease, box-shadow .2s ease; } #nws-sticky-cta a i { font-size: 1.1rem; flex-shrink: 0; } #nws-sticky-cta .nws-sticky-text { display: flex; flex-direction: column; gap: .05rem; } #nws-sticky-cta .nws-sticky-main { font-size: .88rem; font-weight: 600; line-height: 1.2; } #nws-sticky-cta .nws-sticky-sub { font-size: .72rem; font-weight: 400; opacity: .85; line-height: 1.2; } #nws-sticky-cta a:hover { background: var(--signal-hover); box-shadow: 0 6px 24px -4px rgba(20,58,34,.45); } @media (prefers-reduced-motion: reduce) { #nws-sticky-cta, .nws-sticky-circle { transition: none; } } /* 11. WHITE TEXT ON DARK SURFACES Secondary text (slate-300, slate-400) is too dim on dark green at small sizes. Force to #fff inside ink-colored containers. ---------------------------------------------------------- */ .bg-\[var\(--ink\)\] .text-slate-300, .bg-\[var\(--ink\)\] .text-slate-400, .bg-\[var\(--ink-deep\)\] .text-slate-300, .bg-\[var\(--ink-deep\)\] .text-slate-400, .bg-\[var\(--ink-soft\)\] .text-slate-300, .bg-\[var\(--ink-soft\)\] .text-slate-400 { color: #ffffff; } /* 12. MY LIBRARY TAB BAR Shared across all /my-library/ tab pages and /my-readiness/dashboard/. ---------------------------------------------------------- */ .nws-tab { font-family: 'IBM Plex Sans', sans-serif; font-size: 0.82rem; font-weight: 500; padding: 0.6rem 1rem; border-radius: 0.5rem; white-space: nowrap; transition: all 0.2s; text-decoration: none; border: 1px solid transparent; background: transparent; color: #64748b; } .nws-tab:hover { color: var(--ink); background: rgba(20,58,34,0.04); } .nws-tab.active { color: var(--ink); background: white; border-color: var(--rule); box-shadow: 0 1px 3px rgba(20,58,34,0.08); } .nws-tab-bar { display: flex; gap: 0.25rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } .nws-tab-bar::-webkit-scrollbar { display: none; }