:root { /* SEMANTIC COLORS — LIGHT MODE */ --bg: #F8FAFC; /* page background */ --card: #FFFFFF; /* cards / panels */ --text-main: #000000; /* primary text */ --text-sub: #64748B; /* secondary text */ --border: #e2e8f0; /* card/border lines */ --hover: #f8fafc; /* hover bg */ --shadow: rgba(0, 0, 0, 0.05); /* 5-TIER COLOR SCALE (same in light + dark) */ --rank-elite: #118AB2; --rank-high: #06D6A0; --rank-mid: #FFD166; --rank-low: #FB8500; --rank-crit: #EF476F; } /* DARK MODE OVERRIDES (ADD .dark ON OR ) */ .dark { --bg: #0F172A; --card: #1E293B; --text-main: #F1F5F9; --text-sub: #94A3B8; --border: #334155; --hover: #334155; --shadow: rgba(0, 0, 0, 0.3); } body { font-family: 'Inter', sans-serif; background-color: var(--bg); color: var(--text-main); transition: background-color 0.3s, color 0.3s; } /* LAYOUTS */ /* Enhanced section separation for better scrolling */ section { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border-width: 2px; } .dark section { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); border-color: #374151; } .chart-container-main, .chart-container-scroll, .chart-container-horizontal, .chart-container-district, .chart-container-scatter { position: relative; width: 100%; } .chart-container-main { height: 250px; } .chart-container-scroll { height: 800px; } .chart-container-horizontal { height: 600px; } .chart-container-district { height: 350px; } .chart-container-scatter { height: 500px; } #map { height: 700px; width: 100%; border-radius: 0.75rem; z-index: 1; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05); } @media (max-width: 768px) { /* Compact header on mobile */ .control-panel { padding-top: 0.5rem; padding-bottom: 0.5rem; } .control-panel .container { gap: 0.75rem !important; } .control-panel .container .gap-4 { gap: 0.75rem !important; } .control-panel .p-3 { padding: 0.6rem !important; } .control-panel .text-xl { font-size: 1.1rem !important; } .control-panel .text-lg { font-size: 1rem !important; } .control-panel .text-xs { font-size: 0.75rem !important; } /* Welcome badge size */ .control-panel .p-3.text-xl { font-size: 1rem !important; padding: 0.5rem !important; } /* Hide long helper legend above map on mobile */ .hidden.md\:block { display: none !important; } .control-panel .metric-btn { padding: 0.5rem 0.8rem; font-size: 0.75rem; } .control-panel .w-px { height: 20px; } .control-panel .rounded-lg, .control-panel .rounded { border-radius: 0.5rem; } .control-panel .inline-block.w-3.h-3 { width: 0.6rem; height: 0.6rem; } .chart-container-scatter { height: 380px; } .chart-container-scroll { height: 700px; /* Increased for proper spacing with all school names */ } #map { height: 450px; } /* Touch-friendly controls */ .metric-btn { padding: 0.65rem 1.15rem; font-size: 0.85rem; min-height: 44px; /* iOS touch target */ } .control-panel .container { padding-left: 1rem; padding-right: 1rem; } /* Better spacing for cards */ .card { margin-bottom: 1rem; } /* Improve readability */ body { font-size: 15px; line-height: 1.6; } } /* Base styles for filter container */ #filters-container { max-height: 500px; opacity: 1; pointer-events: auto; } /* Mobile: Collapse filters by default */ @media (max-width: 767px) { #filters-container { max-height: 0 !important; opacity: 0 !important; pointer-events: none !important; } } /* Desktop: Always show filters */ @media (min-width: 768px) { #filters-container { max-height: none !important; opacity: 1 !important; pointer-events: auto !important; } #mobile-filter-toggle { display: none !important; } } @media (max-width: 480px) { /* Further compress filters/buttons but keep touch-friendly */ .control-panel .metric-btn { padding: 0.45rem 0.7rem; font-size: 0.72rem; min-height: 40px; /* Maintain touch target */ } .control-panel .flex.flex-wrap.justify-center.gap-2 { gap: 0.4rem; } .control-panel .border-l.pl-4 { padding-left: 0.6rem; } .control-panel .p-2 { padding: 0.4rem !important; } .control-panel .gap-2 { gap: 0.4rem !important; } .control-panel .mr-4 { margin-right: 0.6rem; } .chart-container-district { height: 300px; } .chart-container-horizontal { height: 450px; } .chart-container-scatter { height: 300px; } .chart-container-scroll { height: 650px; /* Increased for proper spacing with all school names */ } #map { height: 380px; } /* Mobile typography scale - improved readability */ h1.title, .title { font-size: 1.35rem; line-height: 1.4; } .card__title, h2 { font-size: 1.1rem; line-height: 1.4; } /* Further shrink welcome section title/subtitle */ .control-panel [data-i18n="title"] { font-size: 1rem !important; line-height: 1.3; } .control-panel [data-i18n="subtitle"] { font-size: 0.75rem !important; line-height: 1.3; } .control-panel .p-3.text-xl { font-size: 0.9rem !important; padding: 0.4rem !important; } /* Better padding for content */ .container { padding-left: 0.75rem; padding-right: 0.75rem; } /* Improve card spacing */ .card { margin-bottom: 0.875rem; padding: 0.875rem; } /* Consider hiding subtitle entirely on very narrow screens */ @media (max-width: 380px) { .control-panel [data-i18n="subtitle"] { display: none; } } } /* CONTROL PANEL */ .control-panel { position: sticky; top: 0; z-index: 1000; background: #4b2e83; /* ELE brand purple */ backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); color: #ffffff; /* White text on purple */ } /* Control panel text color overrides - ALL white on purple */ .control-panel *, .control-panel span, .control-panel label, .control-panel div, .control-panel p, .control-panel h1, .control-panel h2, .control-panel h3, .control-panel strong { color: #ffffff !important; } /* PUSD badge - purple text in light mode, white bg exception */ .control-panel .bg-white { background: #ffffff !important; } .control-panel .bg-white.text-slate-900, .control-panel div.bg-white { color: #4b2e83 !important; } .dark .control-panel .bg-white.text-slate-900, .dark .control-panel div.bg-white { color: #ffffff !important; } .control-panel .text-slate-500, .control-panel .text-slate-600, .control-panel .text-slate-700, .control-panel .text-slate-900, .control-panel .text-black, .control-panel .text-gray-500, .control-panel .text-gray-600 { color: rgba(255, 255, 255, 0.9) !important; } /* Toggle switch text */ .control-panel #neighbors-toggle + label, .control-panel #theme-toggle + label, .control-panel label { color: #ffffff !important; } /* METRIC BUTTONS */ .metric-btn { font-size: 0.75rem; font-weight: 600; padding: 0.5rem 1rem; border-radius: 8px; transition: all 0.2s; border: 1px solid rgba(255, 255, 255, 0.3); color: #ffffff; background: rgba(255, 255, 255, 0.1); } /* Sticky header and compact state - maintain purple background */ .control-panel { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(180%) blur(6px); } .control-panel.compact { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .control-panel.compact #welcome-group { display: none !important; } .control-panel.compact .container { gap: 0.5rem !important; } .control-panel.compact .p-3.text-xl { font-size: 0.8rem !important; padding: 0.3rem !important; } .control-panel.compact [data-i18n="title"] { font-size: 0.9rem !important; line-height: 1.1; } .control-panel.compact [data-i18n="subtitle"] { display: none; } .control-panel.compact .metric-btn { padding: 0.4rem 0.6rem; font-size: 0.7rem; } .control-panel.compact #neighbors-toggle span { font-size: 0.65rem; } /* Reduce spacing between filter groups when compact */ .control-panel.compact #filters-panel .w-px { height: 1rem; } .metric-btn:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.5); } .metric-btn.active { background: #ffffff !important; color: #4b2e83 !important; border-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2); } .metric-btn.active * { color: #4b2e83 !important; } .dark .control-panel { background: #3f276f; /* Darker purple for dark mode */ } .dark .metric-btn.active { background: #ffffff; border-color: #ffffff; color: #4b2e83; } .dark .metric-btn { color: white; } /* TOGGLE */ .toggle-checkbox { transform: translateX(0); transition: transform 0.3s ease, border-color 0.3s ease; } .toggle-checkbox:checked { transform: translateX(16px); border-color: #10B981; } .toggle-label { background-color: #D1D5DB; transition: background-color 0.3s ease; } .toggle-checkbox:checked+.toggle-label { background-color: #10B981; } /* Dark mode toggle colors */ .dark .toggle-label { background-color: #4B5563; } .dark .toggle-checkbox:checked+.toggle-label { background-color: #10B981; } /* RANK LEGEND BADGES */ .rank-badge { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; border: 1px solid rgba(0, 0, 0, 0.1); } /* NEIGHBOR LABELS ON MAP */ .neighbor-label { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; font-size: 10px; font-weight: bold; color: var(--text-sub); white-space: nowrap; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } /* LEAFLET POPUP DARK MODE OVERRIDES */ .dark .leaflet-popup-content-wrapper, .dark .leaflet-popup-tip { background-color: #1E293B; color: #F1F5F9; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4); } .dark .leaflet-popup-content strong { color: #F1F5F9 !important; } .dark .leaflet-popup-content .text-slate-500 { color: #94A3B8 !important; } .dark .leaflet-popup-content .text-slate-900 { color: #F1F5F9 !important; } .dark .leaflet-popup-content .bg-slate-100 { background-color: #334155 !important; color: #F1F5F9; } /* Dark Map Tiles Customization */ .dark-tiles { filter: brightness(1.5) contrast(0.85); } /* MODAL ANIMATIONS */ #school-modal.open .opacity-0 { opacity: 1; } #school-modal.open .scale-95 { transform: scale(1); }