/* ═══════════════════════════════════════════════════════════════ RadonResources Design System — design-tokens.css Single source of truth for the entire site redesign. Import this file FIRST in every page/component. ═══════════════════════════════════════════════════════════════ */ /* ── FONTS ── Load via in : https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&display=swap ─────────────────────────────────────────────────────────── */ :root { /* ── TYPOGRAPHY ── */ --font-body: 'DM Sans', system-ui, -apple-system, sans-serif; --font-display: 'Open Sans', var(--font-body), sans-serif; /* Font sizes — modular scale (1.2 ratio, 16px base) */ --text-xs: 12px; --text-sm: 13px; --text-base: 14.5px; --text-md: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 28px; --text-4xl: 34px; --text-5xl: 40px; /* Font weights */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line heights */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.6; --leading-relaxed: 1.7; /* Letter spacing */ --tracking-tight: -1px; --tracking-snug: -0.5px; --tracking-normal: 0; --tracking-wide: 0.3px; --tracking-wider: 0.6px; --tracking-caps: 0.8px; /* ── COLORS — Core Palette ── */ /* Background layers */ --bg-page: #FAFAF8; /* Page background */ --bg-surface: #FFFFFF; /* Cards, panels, modals */ --bg-surface-alt: #F4F3EF; /* Alternating rows, secondary surfaces */ --bg-inset: #EDECEA; /* Inset panels, code blocks */ /* Text */ --text-primary: #1A1A18; /* Headings, primary body */ --text-secondary: #5C5B56; /* Subheadings, descriptions */ --text-muted: #8A8983; /* Metadata, timestamps, labels */ --text-inverse: #FFFFFF; /* On dark backgrounds */ /* Borders */ --border-default: #E5E3DC; /* Standard borders */ --border-light: #EEECE6; /* Subtle dividers */ --border-strong: #D1CFC8; /* Emphasized borders */ /* Accent — Brand Red */ --accent: #B8432F; /* Primary CTA, links, active states */ --accent-hover: #9C3827; /* Hover state */ --accent-light: #FDF0ED; /* Light accent backgrounds */ --accent-muted: rgba(184, 67, 47, 0.15); /* Subtle accent borders */ /* EPA Radon Zone Colors — SEMANTIC */ --zone1: #C0392B; /* Zone 1 — High risk (>4 pCi/L) */ --zone1-bg: #FDEDEB; --zone1-border: #E6A9A3; --zone2: #E67E22; /* Zone 2 — Moderate risk (2–4 pCi/L) */ --zone2-bg: #FEF5EC; --zone2-border: #F0C89A; --zone3: #27AE60; /* Zone 3 — Low risk (<2 pCi/L) */ --zone3-bg: #EBF9F1; --zone3-border: #9EDCB5; /* Status / feedback */ --success: #27AE60; --success-bg: #EBF9F1; --warning: #E67E22; --warning-bg: #FEF5EC; --danger: #C0392B; --danger-bg: #FDEDEB; --info: #2980B9; --info-bg: #EBF5FB; /* Dark surfaces (CTA banners, footer) */ --dark-bg: #1A1A18; --dark-surface: #2A2A27; --dark-border: #3A3A37; --dark-text: rgba(255, 255, 255, 0.65); /* ── SPACING ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; /* ── BORDERS & RADIUS ── */ --radius-sm: 6px; --radius-md: 8px; --radius: 10px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 9999px; /* ── SHADOWS ── */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.08); --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.12); /* ── TRANSITIONS ── */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 0.15s; --duration-normal: 0.2s; --duration-slow: 0.35s; /* ── LAYOUT ── */ --max-width: 1200px; --content-padding: 24px; --header-height: 60px; /* ── Z-INDEX SCALE ── */ --z-base: 1; --z-dropdown: 10; --z-sticky: 50; --z-header: 100; --z-overlay: 200; --z-modal: 300; } /* ═══════════════════════════════════════════════════════════════ BASE RESET & GLOBALS ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-primary); background: var(--bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; } /* ═══════════════════════════════════════════════════════════════ TYPOGRAPHY UTILITY CLASSES ═══════════════════════════════════════════════════════════════ */ .heading-display { font-family: var(--font-display); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--text-primary); } .heading-section { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); color: var(--text-primary); } .text-body { font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-secondary); } .text-small { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-muted); } .text-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); } /* ═══════════════════════════════════════════════════════════════ LAYOUT CONTAINERS ═══════════════════════════════════════════════════════════════ */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--content-padding); } .section { max-width: var(--max-width); margin: 0 auto; padding: var(--space-14) var(--content-padding) 0; } .section-header { margin-bottom: var(--space-8); } .section-header h2 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-snug); color: var(--text-primary); margin-bottom: var(--space-2); } .section-header p { font-size: var(--text-md); color: var(--text-secondary); max-width: 680px; }