/* ------------------------------------ 1. CSS VARIABLES (Theme Definitions) ------------------------------------ */ :root { /* LIGHT MODE (Default - Metroparks Branding) */ --color-primary-green: #29783D; /* Metroparks Forest Green */ --color-bg-body: #ffffff; /* bg-white */ --color-bg-card: #f9fafb; /* bg-gray-50 (Slightly off-white for cards) */ --color-text-body: #374151; /* text-gray-700 */ --color-text-primary: #111827; /* text-gray-900 (for headings) */ --color-border: #e5e7eb; /* border-gray-200 */ --color-accent: var(--color-primary-green); /* Green for KPIs */ --color-nav-bg: var(--color-primary-green); /* Green for the top header */ --color-nav-hover: #1e5a2c; /* Darker shade of Green for hover */ --color-text-nav: #ffffff; /* White text on the green navbar */ } /* DARK MODE (Overrides when 'dark' class is present on ) */ .dark { --color-primary-green: #10b981; /* Brighter accent in dark mode */ --color-bg-body: #1f2937; /* Dark body background */ --color-bg-card: #374151; /* Dark card background */ --color-text-body: #d1d5db; /* Light body text color */ --color-text-primary: #e5e7eb; /* Light heading color */ --color-border: #4b5563; /* Dark border color */ --color-accent: var(--color-primary-green); --color-nav-bg: #111827; /* Very dark nav background */ --color-nav-hover: #374151; /* Darker nav hover */ --color-text-nav: #e5e7eb; /* Light text on dark navbar */ } /* Apply smooth transition to all elements */ * { transition: background-color 0.3s, color 0.3s, border-color 0.3s; box-sizing: border-box; } /* ------------------------------------ 2. GLOBAL & BASE STYLES ------------------------------------ */ body { /* Standard sans-serif stack for a modern look */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; background-color: var(--color-bg-body); padding: 1rem; /* Default for mobile (p-4) */ padding-top: 4.5rem; /* Space for the fixed header */ line-height: 1.6; } /* Desktop Padding (md:p-8) */ @media (min-width: 768px) { body { padding: 2rem; padding-top: 5rem; } } #report-container { color: var(--color-text-body); max-width: 72rem; /* Equivalent to max-w-6xl (1152px) */ margin: 0 auto; /* mx-auto */ } /* Card Styles (report-card) */ .report-card { background-color: var(--color-bg-card); border-radius: 0.75rem; /* rounded-lg */ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); padding: 1.5rem; /* p-6 */ margin-bottom: 1rem; /* Added margin for separation */ } /* Adjust spacing and padding for specific elements */ #kpis > div { padding: 1rem; /* p-4 for the year selector container */ display: flex; /* Makes the content horizontal on wider screens */ flex-direction: column; } @media (min-width: 768px) { #kpis > div { flex-direction: row; justify-content: space-between; align-items: center; } #kpis select { margin-top: 0; } } #kpis select { background-color: var(--color-bg-card); color: var(--color-text-body); border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 0.5rem; margin-top: 0.75rem; /* mt-3 */ cursor: pointer; } /* KPI Styles */ .kpi-value { color: var(--color-accent); font-size: 1.875rem; /* text-3xl */ font-weight: bold; margin-top: 0.5rem; /* mt-2 */ } .kpi-label { font-size: 0.875rem; /* text-sm */ color: var(--color-text-body); } .kpi-sublabel { font-size: 0.75rem; /* text-xs */ color: var(--color-text-body); opacity: 0.7; margin-top: 0.5rem; } /* ------------------------------------ 3. NAVIGATION (Fixed Header) ------------------------------------ */ header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; background-color: var(--color-nav-bg); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; height: 4rem; /* h-16 */ } nav { max-width: 72rem; margin: 0 auto; height: 100%; display: flex; justify-content: space-between; align-items: center; padding-left: 1rem; padding-right: 1rem; } @media (min-width: 768px) { nav { padding-left: 2rem; padding-right: 2rem; } } .nav-title { font-size: 1.25rem; font-weight: bold; color: var(--color-text-nav); } .nav-links-container { display: flex; white-space: nowrap; overflow-x: auto; gap: 1rem; } .nav-link { color: var(--color-text-nav) !important; padding: 0.5rem; border-radius: 0.5rem; transition: color 0.3s, background-color 0.3s; } .nav-link:hover { background-color: var(--color-nav-hover); } /* Theme Toggle Button Styling */ .theme-toggle-button { color: var(--color-text-nav); background: none; border: none; cursor: pointer; padding: 0.625rem; border-radius: 0.5rem; transition: all 0.3s; } .theme-toggle-button:hover { transform: scale(1.05); background-color: rgba(255, 255, 255, 0.1); } .theme-toggle-button svg { width: 1.25rem; height: 1.25rem; } /* ------------------------------------ 4. RESPONSIVE LAYOUTS (KPI Grid) ------------------------------------ */ #kpi-grid { /* Mobile Default: 1 Column */ display: grid; grid-template-columns: 1fr; gap: 1rem; /* gap-4 */ margin-bottom: 3rem; /* mb-12 */ } /* Tablet/Desktop: 5 Columns */ @media (min-width: 768px) { #kpi-grid { grid-template-columns: repeat(5, 1fr); } } /* ------------------------------------ 5. REPORT CONTENT (Typography & Tables) ------------------------------------ */ /* Main Heading Styling (Huron-Clinton Metroparks...) */ .main-heading { font-size: 1.875rem; font-weight: 800; color: var(--color-text-primary); margin-bottom: 1.5rem; margin-top: 1rem; } .intro-subtext { color: var(--color-text-body); opacity: 0.8; margin-bottom: 2rem; /* mb-8 */ } /* Section Headings */ .report-content h2 { font-size: 1.75rem; font-weight: bold; margin-top: 1.5rem; margin-bottom: 1rem; border-bottom: 2px solid var(--color-border); padding-bottom: 0.5rem; color: var(--color-text-primary); } .report-content h3 { font-size: 1.5rem; font-weight: bold; margin-top: 1rem; margin-bottom: 0.75rem; color: var(--color-text-primary); } .report-content p { margin-bottom: 1rem; } .report-content ul, .report-content ol { margin-bottom: 1rem; padding-left: 20px; } .report-content ol { list-style-type: decimal; } .report-content ul { list-style-type: disc; } .report-content ol li, .report-content ul li { margin-bottom: 0.5rem; } /* Report Table Styles (General and Data Tables) */ table { width: 100%; margin-top: 1rem; margin-bottom: 1rem; border-collapse: collapse; font-size: 0.9rem; } /* This class must be applied to the parent
of the dynamic table */ .table-scroll-container { overflow-x: auto; } th, td { border: 1px solid var(--color-border); padding: 8px 12px; text-align: left; } th { background-color: var(--color-border); color: var(--color-text-primary); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; } .data-table-row:hover { background-color: var(--color-nav-hover); /* Subtle hover on dynamic table rows */ } /* Image and Iframe Responsiveness */ .aspect-video { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ overflow: hidden; margin-bottom: 1rem; } .aspect-video img, .aspect-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0.5rem; } /* Specific fix for the large map image */ .image-container { margin-bottom: 1rem; overflow: hidden; border-radius: 0.5rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .image-map { max-width: 100%; max-height: 500px; /* Constrains the max vertical size */ width: 100%; object-fit: contain; /* Ensures the image scales to fit */ border-radius: 0.5rem; } .image-link { display: block; } .image-caption { font-size: 0.75rem; /* text-xs */ color: var(--color-text-body); opacity: 0.6; margin-top: 0.5rem; }