/* Theme Name: ThreatMap USA Theme URI: https://threatmapusa.com Author: ThreatMap USA Author URI: https://threatmapusa.com Description: Programmatic SEO theme for county-level emergency preparedness and disaster risk profiles. Dark dashboard aesthetic with dynamic risk-level color system. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 8.0 License: Private Text Domain: threatmap */ /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg-primary: #0a0c0f; --bg-secondary: #111418; --bg-card: #161b22; --bg-card-hover: #1c2230; --border-color: #21262d; --text-primary: #e6edf3; --text-secondary: #8b949e; --text-muted: #484f58; --font-ui: 'Rajdhani', sans-serif; --font-mono: 'Share Tech Mono', monospace; /* Risk Level Colors */ --risk-low: #3fb950; --risk-low-bg: rgba(63, 185, 80, 0.08); --risk-moderate: #d29922; --risk-moderate-bg: rgba(210, 153, 34, 0.08); --risk-high: #f0883e; --risk-high-bg: rgba(240, 136, 62, 0.08); --risk-critical: #f85149; --risk-critical-bg: rgba(248, 81, 73, 0.08); /* Default accent (overridden per risk level) */ --accent: var(--risk-moderate); --accent-bg: var(--risk-moderate-bg); } /* Risk level overrides — applied to via PHP */ body.risk-low { --accent: var(--risk-low); --accent-bg: var(--risk-low-bg); } body.risk-moderate { --accent: var(--risk-moderate); --accent-bg: var(--risk-moderate-bg); } body.risk-high { --accent: var(--risk-high); --accent-bg: var(--risk-high-bg); } body.risk-critical { --accent: var(--risk-critical); --accent-bg: var(--risk-critical-bg); } html { font-size: 16px; scroll-behavior: smooth; } body { background-color: var(--bg-primary); color: var(--text-primary); font-family: var(--font-ui); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; transition: opacity 0.2s ease; } a:hover { opacity: 0.8; text-decoration: underline; } img { max-width: 100%; height: auto; display: block; } /* ============================================================ TYPOGRAPHY ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-ui); font-weight: 700; line-height: 1.2; color: var(--text-primary); letter-spacing: 0.03em; text-transform: uppercase; } h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); } h2 { font-size: clamp(1.2rem, 3vw, 1.75rem); } h3 { font-size: 1.25rem; } h4 { font-size: 1rem; } p { color: var(--text-secondary); margin-bottom: 1rem; font-size: 1rem; } .mono { font-family: var(--font-mono); } /* ============================================================ LAYOUT ============================================================ */ .site-wrapper { min-height: 100vh; display: flex; flex-direction: column; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } .container--narrow { max-width: 900px; } main { flex: 1; padding: 2rem 0 4rem; } /* ============================================================ SITE HEADER ============================================================ */ .site-header { background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); padding: 0.875rem 0; position: sticky; top: 0; z-index: 100; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .site-logo { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 400; color: var(--accent); letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; } .site-logo span { color: var(--text-muted); } .site-nav { display: flex; align-items: center; gap: 1.5rem; } .site-nav a { font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); text-decoration: none; transition: color 0.2s; } .site-nav a:hover { color: var(--accent); text-decoration: none; } /* ============================================================ SITE FOOTER ============================================================ */ .site-footer { background: var(--bg-secondary); border-top: 1px solid var(--border-color); padding: 2rem 0; margin-top: auto; } .site-footer__inner { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; } .site-footer p { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); margin: 0; } .site-footer a { color: var(--text-secondary); } /* ============================================================ CARDS & PANELS ============================================================ */ .card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 6px; padding: 1.5rem; transition: border-color 0.2s, background 0.2s; } .card:hover { background: var(--bg-card-hover); border-color: var(--accent); } .card__label { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 0.4rem; } .card__value { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: var(--accent); } .card__sub { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.25rem; } /* ============================================================ RISK BADGE ============================================================ */ .risk-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; border-radius: 4px; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent); } .risk-badge::before { content: '●'; font-size: 0.6rem; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* ============================================================ THREAT SCORE ============================================================ */ .threat-score { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 90px; height: 90px; border-radius: 50%; border: 3px solid var(--accent); background: var(--accent-bg); box-shadow: 0 0 20px var(--accent-bg); } .threat-score__number { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; color: var(--accent); line-height: 1; } .threat-score__label { font-family: var(--font-mono); font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); } /* ============================================================ COUNTY PAGE SPECIFIC ============================================================ */ .county-header { background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); padding: 2rem 0; margin-bottom: 2rem; } .county-header__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .county-header__meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap; } .county-breadcrumb { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; } .county-breadcrumb a { color: var(--text-secondary); } .county-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin: 2rem 0; } .county-section { margin: 2.5rem 0; } .county-section__title { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-muted); border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; margin-bottom: 1.25rem; } /* ============================================================ DATA TABLE ============================================================ */ .data-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.85rem; } .data-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border-color); vertical-align: top; } .data-table td:first-child { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; width: 40%; white-space: nowrap; } .data-table td:last-child { color: var(--text-primary); } /* ============================================================ STATE HUB / ARCHIVE ============================================================ */ .state-hub__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-top: 2rem; } .county-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 6px; padding: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; transition: border-color 0.2s, background 0.2s; text-decoration: none; } .county-card:hover { background: var(--bg-card-hover); text-decoration: none; } .county-card.risk-low { border-left: 3px solid var(--risk-low); } .county-card.risk-moderate { border-left: 3px solid var(--risk-moderate); } .county-card.risk-high { border-left: 3px solid var(--risk-high); } .county-card.risk-critical { border-left: 3px solid var(--risk-critical); } .county-card__name { font-family: var(--font-ui); font-size: 1rem; font-weight: 700; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.04em; } .county-card__hazard { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; } /* ============================================================ HOMEPAGE ============================================================ */ .hero { background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); padding: 4rem 0; text-align: center; } .hero__eyebrow { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent); margin-bottom: 1rem; } .hero__title { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 1rem; } .hero__subtitle { font-size: 1.1rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto 2rem; } .state-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-top: 3rem; } /* ============================================================ AFFILIATE CTA ============================================================ */ .affiliate-cta { background: var(--accent-bg); border: 1px solid var(--accent); border-radius: 6px; padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; text-decoration: none; transition: opacity 0.2s; } .affiliate-cta:hover { opacity: 0.85; text-decoration: none; } .affiliate-cta__text { font-family: var(--font-ui); font-weight: 600; color: var(--text-primary); font-size: 0.95rem; } .affiliate-cta__badge { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; } /* ============================================================ UTILITY CLASSES ============================================================ */ .text-accent { color: var(--accent); } .text-muted { color: var(--text-muted); } .text-secondary { color: var(--text-secondary); } .text-mono { font-family: var(--font-mono); } .text-upper { text-transform: uppercase; letter-spacing: 0.08em; } .text-sm { font-size: 0.85rem; } .text-xs { font-size: 0.75rem; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 768px) { .site-header__inner { flex-wrap: wrap; } .site-nav { gap: 1rem; } .county-header__top { flex-direction: column; } .county-stats-grid { grid-template-columns: repeat(2, 1fr); } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .data-table td:first-child { width: auto; white-space: normal; } } @media (max-width: 480px) { .county-stats-grid { grid-template-columns: 1fr 1fr; } h1 { font-size: 1.4rem; } }