/** * dpf-design-system.css — Data Products Factory shared design tokens * ------------------------------------------------------------------ * Provides: * - Master brand tokens (colour, typography, spacing, radius, shadow) * - Domain accent tokens (nonprofits, health) * - Component class tokens (cards, badges, scores, percentile bars) * - Dark mode via [data-theme="dark"] on * - Responsive typography scale * - WCAG 2.1 AA contrast targets * * Import order: dpf-design-system.css → page-specific overrides * * Colour naming convention: * --c-[role]-[weight] e.g. --c-brand-500, --c-neutral-200 * --domain-[name]-[variant] e.g. --domain-nonprofits-500 * * Shadowing existing per-page variables: * Pages that already define --forest, --green, etc. continue to work. * This file uses the --c-* namespace to avoid collisions during migration. * Once pages are ported, the legacy variables can be removed. */ /* ── Reset ──────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :where(a) { color: inherit; } /* ── Master brand colours ────────────────────────────────────────────────────── */ :root { /* Neutral scale — warm grey, not cold blue-grey */ --c-neutral-0: #ffffff; --c-neutral-50: #f8f7f5; --c-neutral-100: #f0eee9; --c-neutral-200: #e3e0d9; --c-neutral-300: #ccc8c0; --c-neutral-400: #a8a49c; --c-neutral-500: #857f76; --c-neutral-600: #635e57; --c-neutral-700: #46423c; --c-neutral-800: #2e2b27; --c-neutral-900: #1a1815; --c-neutral-950: #0e0d0b; /* Brand: deep forest — used for master logo, nav anchor */ --c-brand-900: #0f2318; --c-brand-800: #1b3a2f; --c-brand-700: #2d6a4f; --c-brand-600: #40916c; --c-brand-500: #52b788; /* primary accent */ --c-brand-400: #74c69d; --c-brand-300: #95d5b2; --c-brand-200: #b7e4c7; --c-brand-100: #d8f3dc; --c-brand-50: #f0faf5; /* Semantic colours */ --c-success: #166534; --c-success-bg: #dcfce7; --c-warning: #92400e; --c-warning-bg: #fef3c7; --c-error: #991b1b; --c-error-bg: #fee2e2; --c-info: #1e40af; --c-info-bg: #dbeafe; /* ── Domain accent: Nonprofit Intelligence ──────────────────────────────── */ /* Forest green identity — inherits from master brand */ --domain-nonprofits-900: #0f2318; --domain-nonprofits-700: #1b3a2f; --domain-nonprofits-500: #52b788; --domain-nonprofits-300: #95d5b2; --domain-nonprofits-100: #d8f3dc; /* ── Domain accent: Health Intelligence ─────────────────────────────────── */ /* Sky blue — distinct from nonprofits, still calm */ --domain-health-900: #0c2340; --domain-health-700: #1e4480; --domain-health-500: #3b82f6; --domain-health-300: #93c5fd; --domain-health-100: #dbeafe; /* ── Light mode semantic tokens ─────────────────────────────────────────── */ --bg: var(--c-neutral-50); /* page background */ --bg-surface: var(--c-neutral-0); /* card / panel surface */ --bg-subtle: var(--c-neutral-100); /* section tint */ --bg-nav: var(--c-brand-800); /* primary nav */ --bg-domain: var(--c-brand-800); /* domain header */ --text-primary: var(--c-neutral-900); --text-secondary:var(--c-neutral-700); --text-tertiary: var(--c-neutral-500); --text-inverse: var(--c-neutral-0); --text-accent: var(--c-brand-700); --border: var(--c-neutral-200); --border-subtle: var(--c-neutral-100); --border-accent: var(--c-brand-400); --focus-ring: var(--c-brand-500); /* ── Typography ──────────────────────────────────────────────────────────── */ --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace; /* Type scale (base 16px) */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.0625rem; /* 17px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed:1.625; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.08em; /* ── Spacing (4px base) ──────────────────────────────────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ /* ── Radius ───────────────────────────────────────────────────────────────── */ --radius-sm: 4px; --radius: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full:9999px; /* ── Shadows ──────────────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(0,0,0,.06); --shadow: 0 2px 8px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06); --shadow-md: 0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06); --shadow-lg: 0 8px 32px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06); --shadow-focus: 0 0 0 3px rgba(82,183,136,.35); /* ── Z-index ──────────────────────────────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* ── Transitions ─────────────────────────────────────────────────────────── */ --transition-fast: 80ms ease; --transition: 160ms ease; --transition-slow: 280ms ease; /* ── Layout ───────────────────────────────────────────────────────────────── */ --nav-height: 62px; --content-max: 1280px; --content-narrow: 800px; --content-wide: 1440px; --sidebar-width: 280px; /* ── Score and percentile display ────────────────────────────────────────── */ /* Percentile tiers — used for colour-coding 0–100 values */ --pct-low: #ef4444; /* 0–24 */ --pct-med: #f97316; /* 25–49 */ --pct-mid: #eab308; /* 50–74 */ --pct-high: #22c55e; /* 75–89 */ --pct-top: #16a34a; /* 90–100 */ /* Inverted tiers (concentration, disadvantage — higher = worse) */ --pct-inv-low: #22c55e; --pct-inv-high: #ef4444; } /* ── Dark mode ───────────────────────────────────────────────────────────────── */ [data-theme="dark"] { --bg: #111610; --bg-surface: #1a2218; --bg-subtle: #1e2a1c; --bg-nav: #0d1a0f; --bg-domain: #0d1a0f; --text-primary: var(--c-brand-100); --text-secondary:var(--c-brand-200); --text-tertiary: var(--c-brand-300); --text-inverse: var(--c-neutral-900); --text-accent: var(--c-brand-400); --border: #243d31; --border-subtle: #1e3229; --border-accent: var(--c-brand-600); --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow: 0 2px 8px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3); --shadow-md: 0 4px 16px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3); --shadow-lg: 0 8px 32px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.3); --shadow-focus: 0 0 0 3px rgba(82,183,136,.45); } /* ── Base styles ─────────────────────────────────────────────────────────────── */ html { font-family: var(--font-family); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-primary); background: var(--bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100vh; } /* Focus ring — WCAG 2.1 AA */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } :focus:not(:focus-visible) { outline: none; } /* ── Typography utilities ────────────────────────────────────────────────────── */ .dpf-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-tertiary); } .dpf-section-label { font-size: var(--text-sm); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-accent); margin-bottom: var(--space-3); } .dpf-eyebrow { /* same as section-label for variant naming */ font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-accent); } .dpf-body-sm { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); } .dpf-body { font-size: var(--text-base); color: var(--text-primary); line-height: var(--leading-relaxed); } .dpf-body-lg { font-size: var(--text-lg); color: var(--text-primary); line-height: var(--leading-relaxed); } .dpf-muted { color: var(--text-tertiary); } .dpf-mono { font-family: var(--font-mono); font-size: var(--text-sm); } /* ── Layout ───────────────────────────────────────────────────────────────────── */ .dpf-container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-6); } .dpf-container-narrow { max-width: var(--content-narrow); margin: 0 auto; padding: 0 var(--space-6); } @media (max-width: 640px) { .dpf-container, .dpf-container-narrow { padding: 0 var(--space-4); } } /* ── AppShell ─────────────────────────────────────────────────────────────────── */ .dpf-app-shell { display: flex; flex-direction: column; min-height: 100vh; } .dpf-main { flex: 1; } /* ── GlobalHeader ─────────────────────────────────────────────────────────────── */ .dpf-header { background: var(--bg-nav); height: var(--nav-height); position: sticky; top: 0; z-index: var(--z-sticky); border-bottom: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; } .dpf-header-inner { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-6); width: 100%; display: flex; align-items: center; gap: var(--space-6); } .dpf-logo { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; flex-shrink: 0; } .dpf-logo-grid { display: grid; grid-template-columns: repeat(3,6px); grid-template-rows: repeat(3,6px); gap: 2px; } .dpf-logo-cell { border-radius: 1.5px; background: var(--c-brand-500); } .dpf-logo-cell:nth-child(2) { background: var(--c-brand-300); } .dpf-logo-cell:nth-child(5) { background: var(--c-brand-400); } .dpf-logo-cell:nth-child(8) { background: var(--c-brand-300); } .dpf-logo-text { font-size: 15px; font-weight: 700; letter-spacing: var(--tracking-tight); color: var(--c-neutral-0); line-height: 1.2; } .dpf-logo-text span { color: var(--c-brand-400); } .dpf-header-nav { display: flex; align-items: center; gap: var(--space-1); flex: 1; } .dpf-header-nav a { font-size: var(--text-sm); font-weight: 500; color: rgba(255,255,255,.7); text-decoration: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius); transition: color var(--transition-fast), background var(--transition-fast); white-space: nowrap; } .dpf-header-nav a:hover, .dpf-header-nav a[aria-current="page"] { color: var(--c-neutral-0); background: rgba(255,255,255,.08); } .dpf-header-nav a[aria-current="page"] { color: var(--c-brand-300); } .dpf-header-controls { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } /* ── Country Selector ─────────────────────────────────────────────────────────── */ .dpf-country-selector { display: flex; align-items: center; gap: 2px; background: rgba(0,0,0,.22); border-radius: var(--radius); padding: 3px; } .dpf-country-btn { background: transparent; border: none; border-radius: 6px; padding: 4px 9px; font-size: var(--text-xs); font-weight: 600; color: rgba(255,255,255,.6); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); font-family: inherit; white-space: nowrap; } .dpf-country-btn:hover { color: rgba(255,255,255,.9); background: rgba(255,255,255,.1); } .dpf-country-btn[aria-pressed="true"] { background: rgba(255,255,255,.16); color: var(--c-neutral-0); } .dpf-country-btn.coming-soon { opacity: .45; cursor: default; } /* ── Breadcrumbs ─────────────────────────────────────────────────────────────── */ .dpf-breadcrumbs { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-sm); color: var(--text-tertiary); padding: var(--space-3) 0; } .dpf-breadcrumbs a { color: var(--text-accent); text-decoration: none; } .dpf-breadcrumbs a:hover { text-decoration: underline; } .dpf-breadcrumbs-sep::before { content: '›'; opacity: .5; } .dpf-breadcrumbs-current { color: var(--text-primary); font-weight: 500; } /* ── Cards ───────────────────────────────────────────────────────────────────── */ .dpf-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-sm); } .dpf-card-sm { padding: var(--space-4); border-radius: var(--radius); } .dpf-card-lg { padding: var(--space-8); border-radius: var(--radius-lg); } .dpf-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); } .dpf-card-title { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); line-height: var(--leading-tight); } .dpf-card-subtitle { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-1); } /* MetricCard — compact stat display */ .dpf-metric-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-1); } .dpf-metric-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--text-tertiary); } .dpf-metric-value { font-size: var(--text-3xl); font-weight: 800; letter-spacing: var(--tracking-tight); color: var(--text-primary); line-height: 1; } .dpf-metric-unit { font-size: var(--text-sm); font-weight: 400; color: var(--text-secondary); } .dpf-metric-context { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-1); } /* InsightCard — highlighted finding with icon */ .dpf-insight-card { background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-left: 3px solid var(--c-brand-500); border-radius: 0 var(--radius) var(--radius) 0; padding: var(--space-4) var(--space-5); display: flex; gap: var(--space-3); align-items: flex-start; } .dpf-insight-icon { font-size: var(--text-xl); flex-shrink: 0; } .dpf-insight-text { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); } .dpf-insight-text strong { color: var(--text-primary); } /* EntityCard — organisation / place list item */ .dpf-entity-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); display: flex; gap: var(--space-4); align-items: flex-start; text-decoration: none; color: inherit; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition-fast); } .dpf-entity-card:hover { border-color: var(--border-accent); box-shadow: var(--shadow-md); transform: translateY(-1px); } .dpf-entity-name { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); } .dpf-entity-meta { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 2px; } /* ── Score Display ────────────────────────────────────────────────────────────── */ .dpf-score { display: inline-flex; align-items: center; gap: var(--space-2); } .dpf-score-value { font-size: var(--text-2xl); font-weight: 800; line-height: 1; } .dpf-score-max { font-size: var(--text-sm); color: var(--text-tertiary); align-self: flex-end; padding-bottom: 2px; } /* ── Percentile Display ───────────────────────────────────────────────────────── */ .dpf-percentile-bar { width: 100%; } .dpf-percentile-track { height: 6px; background: var(--border); border-radius: var(--radius-full); overflow: hidden; position: relative; } .dpf-percentile-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-full); transition: width var(--transition-slow); } .dpf-percentile-label { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-1); } .dpf-percentile-value { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-1); } /* Percentile tier colours */ .dpf-pct-low .dpf-percentile-fill { background: var(--pct-low); } .dpf-pct-med .dpf-percentile-fill { background: var(--pct-med); } .dpf-pct-mid .dpf-percentile-fill { background: var(--pct-mid); } .dpf-pct-high .dpf-percentile-fill { background: var(--pct-high); } .dpf-pct-top .dpf-percentile-fill { background: var(--pct-top); } /* ── Badges ───────────────────────────────────────────────────────────────────── */ .dpf-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; border: 1px solid currentColor; white-space: nowrap; } .dpf-badge-default { color: var(--text-tertiary); border-color: var(--border); background: var(--bg-subtle); } .dpf-badge-brand { color: var(--c-brand-700); border-color: var(--c-brand-300); background: var(--c-brand-50); } .dpf-badge-success { color: var(--c-success); border-color: #bbf7d0; background: var(--c-success-bg); } .dpf-badge-warning { color: var(--c-warning); border-color: #fde68a; background: var(--c-warning-bg); } .dpf-badge-error { color: var(--c-error); border-color: #fecaca; background: var(--c-error-bg); } .dpf-badge-info { color: var(--c-info); border-color: #bfdbfe; background: var(--c-info-bg); } [data-theme="dark"] .dpf-badge-brand { color: var(--c-brand-300); border-color: rgba(82,183,136,.3); background: rgba(82,183,136,.08); } [data-theme="dark"] .dpf-badge-success { color: #4ade80; border-color: rgba(74,222,128,.3); background: rgba(74,222,128,.08); } /* CapabilityBadge — shows data depth level */ .dpf-capability-badge { display: inline-flex; align-items: center; gap: 4px; } .dpf-capability-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-brand-500); } .dpf-capability-dot.coming-soon { background: var(--c-neutral-300); } /* DataSourceBadge */ .dpf-source-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--text-tertiary); background: var(--bg-subtle); border: 1px solid var(--border-subtle); } /* FreshnessBadge */ .dpf-freshness-badge { font-size: var(--text-xs); color: var(--text-tertiary); display: inline-flex; align-items: center; gap: 4px; } .dpf-freshness-badge::before { content: '↻'; } /* ── Methodology Popover ─────────────────────────────────────────────────────── */ .dpf-methodology-trigger { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--text-tertiary); background: none; border: none; cursor: pointer; font-family: inherit; padding: 2px 4px; border-radius: var(--radius-sm); text-decoration: underline dotted; transition: color var(--transition-fast); } .dpf-methodology-trigger:hover { color: var(--text-accent); } .dpf-methodology-trigger::before { content: 'ⓘ'; } .dpf-methodology-panel { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); margin-top: var(--space-2); box-shadow: var(--shadow-md); } .dpf-methodology-panel[hidden] { display: none; } .dpf-methodology-panel h4 { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-2); } /* ── State components ─────────────────────────────────────────────────────────── */ .dpf-empty-state { text-align: center; padding: var(--space-16) var(--space-8); color: var(--text-tertiary); } .dpf-empty-icon { font-size: 2.5rem; margin-bottom: var(--space-3); } .dpf-empty-title { font-size: var(--text-lg); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--space-2); } .dpf-empty-text { font-size: var(--text-sm); max-width: 380px; margin: 0 auto; } .dpf-loading { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-12) var(--space-6); color: var(--text-tertiary); font-size: var(--text-sm); } .dpf-spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--c-brand-500); border-radius: 50%; animation: dpf-spin 0.7s linear infinite; } @keyframes dpf-spin { to { transform: rotate(360deg); } } .dpf-error-state { background: var(--c-error-bg); border: 1px solid #fecaca; border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); color: var(--c-error); font-size: var(--text-sm); display: flex; gap: var(--space-3); align-items: flex-start; } .dpf-error-state::before { content: '⚠'; flex-shrink: 0; } /* ── Buttons ──────────────────────────────────────────────────────────────────── */ .dpf-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-5); border-radius: var(--radius); font-size: var(--text-sm); font-weight: 600; font-family: inherit; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition); white-space: nowrap; } .dpf-btn:disabled { opacity: .5; cursor: not-allowed; } .dpf-btn-primary { background: var(--c-brand-600); color: var(--c-neutral-0); } .dpf-btn-primary:hover:not(:disabled) { background: var(--c-brand-700); } .dpf-btn-secondary { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border); } .dpf-btn-secondary:hover:not(:disabled) { border-color: var(--border-accent); background: var(--bg-subtle); } .dpf-btn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; } .dpf-btn-ghost:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text-primary); } .dpf-btn-nav { background: var(--c-brand-500); color: var(--c-brand-900); font-weight: 700; } .dpf-btn-nav:hover:not(:disabled) { background: var(--c-brand-400); } .dpf-btn-sm { padding: 5px var(--space-3); font-size: var(--text-xs); } .dpf-btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--text-base); } /* ── CTA ──────────────────────────────────────────────────────────────────────── */ .dpf-cta-block { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-8); text-align: center; } .dpf-cta-title { font-size: var(--text-2xl); font-weight: 800; margin-bottom: var(--space-3); } .dpf-cta-body { color: var(--text-secondary); margin-bottom: var(--space-6); } /* ── Data Table ───────────────────────────────────────────────────────────────── */ .dpf-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); } .dpf-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .dpf-table th { background: var(--bg-subtle); color: var(--text-tertiary); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wider); padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; } .dpf-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); vertical-align: middle; } .dpf-table tr:last-child td { border-bottom: none; } .dpf-table tr:hover td { background: var(--bg-subtle); } /* ── Search ───────────────────────────────────────────────────────────────────── */ .dpf-search-box { position: relative; width: 100%; } .dpf-search-input { width: 100%; padding: var(--space-3) var(--space-4); padding-left: 2.5rem; font-size: var(--text-base); font-family: inherit; color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); transition: border-color var(--transition), box-shadow var(--transition); } .dpf-search-input:focus { outline: none; border-color: var(--border-accent); box-shadow: var(--shadow-focus); } .dpf-search-input::placeholder { color: var(--text-tertiary); } .dpf-search-icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--text-tertiary); pointer-events: none; font-size: var(--text-lg); } /* ── Map Card ─────────────────────────────────────────────────────────────────── */ .dpf-map-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .dpf-map-card-header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .dpf-map-area { width: 100%; min-height: 320px; background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); font-size: var(--text-sm); } /* ── Footer ───────────────────────────────────────────────────────────────────── */ .dpf-footer { background: var(--bg-nav); border-top: 1px solid rgba(255,255,255,.06); padding: var(--space-10) 0 var(--space-6); color: rgba(255,255,255,.55); font-size: var(--text-sm); } .dpf-footer-grid { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-6); display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-8); } .dpf-footer-brand p { color: rgba(255,255,255,.45); font-size: var(--text-xs); margin-top: var(--space-3); line-height: var(--leading-relaxed); } .dpf-footer-col h4 { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: var(--space-3); } .dpf-footer-col a { display: block; color: rgba(255,255,255,.55); text-decoration: none; padding: 3px 0; transition: color var(--transition-fast); } .dpf-footer-col a:hover { color: rgba(255,255,255,.9); } .dpf-footer-bottom { max-width: var(--content-max); margin: var(--space-8) auto 0; padding: var(--space-4) var(--space-6) 0; border-top: 1px solid rgba(255,255,255,.06); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-xs); color: rgba(255,255,255,.35); } @media (max-width: 768px) { .dpf-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } .dpf-footer-brand { grid-column: 1 / -1; } } @media (max-width: 480px) { .dpf-footer-grid { grid-template-columns: 1fr; } } /* ── Theme toggle ─────────────────────────────────────────────────────────────── */ .dpf-theme-btn { background: transparent; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(255,255,255,.7); font-size: 15px; transition: background var(--transition-fast), color var(--transition-fast); } .dpf-theme-btn:hover { background: rgba(255,255,255,.1); color: var(--c-neutral-0); } /* ── Font size controls ───────────────────────────────────────────────────────── */ .dpf-font-controls { display: flex; gap: 2px; } .dpf-font-btn { background: transparent; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-sm); padding: 4px 7px; font-size: var(--text-xs); font-weight: 700; color: rgba(255,255,255,.6); cursor: pointer; font-family: inherit; transition: background var(--transition-fast), color var(--transition-fast); } .dpf-font-btn:hover { background: rgba(255,255,255,.1); color: var(--c-neutral-0); } /* ── Responsive helpers ───────────────────────────────────────────────────────── */ .dpf-hide-mobile { } .dpf-hide-desktop { display: none; } @media (max-width: 768px) { .dpf-hide-mobile { display: none; } .dpf-hide-desktop { display: revert; } .dpf-header-nav { display: none; } /* mobile: replaced by hamburger or tabs */ } /* ── Utility ──────────────────────────────────────────────────────────────────── */ .dpf-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .dpf-divider { border: none; border-top: 1px solid var(--border); margin: var(--space-6) 0; } .dpf-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .dpf-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); } .dpf-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-4); } @media (max-width: 1024px) { .dpf-grid-4 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 768px) { .dpf-grid-3, .dpf-grid-4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .dpf-grid-2, .dpf-grid-3, .dpf-grid-4 { grid-template-columns: 1fr; } } /* Toast / notification */ .dpf-toast { position: fixed; bottom: var(--space-6); right: var(--space-6); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-5); font-size: var(--text-sm); box-shadow: var(--shadow-lg); z-index: var(--z-toast); display: none; } .dpf-toast.visible { display: block; }