/* demist PWA - Base Styles */ :root { /* Light and dark palettes are expressed with light-dark(); the active side is chosen by `color-scheme`, which the Theme setting drives through the `data-theme` attribute on (see the [data-theme] rules below). */ color-scheme: light dark; --primary-color: #007bff; --primary-hover-color: #0056b3; --secondary-color: #6c757d; --success-color: #28a745; --danger-color: #dc3545; --warning-color: #ffc107; --info-color: #17a2b8; --light-color: light-dark(#f8f9fa, #2d2d2d); --dark-color: #343a40; --background-color: light-dark(#ffffff, #1a1a1a); --surface-color: light-dark(#ffffff, #242424); --surface-muted-color: light-dark(#f8f9fa, #1f1f1f); --surface-hover-color: light-dark(#f1f5f9, #333333); --text-color: light-dark(#333333, #e5e7eb); --text-strong-color: light-dark(#1e293b, #f0f1f3); --text-muted-color: light-dark(#64748b, #94a3b8); --text-label-color: light-dark(#334155, #cbd5e1); --border-color: light-dark(#dee2e6, #3a3a3a); --input-background-color: light-dark(#ffffff, #2a2a2a); --input-border-color: light-dark(#cbd5e1, #3a3a3a); --input-text-color: light-dark(#0f172a, #e5e7eb); --tabbar-active-color: light-dark(#3b82f6, #60a5fa); --tabbar-active-background: light-dark(#eff6ff, rgba(96, 165, 250, 0.15)); --tabbar-hover-background: light-dark(#f8fafc, rgba(255, 255, 255, 0.05)); --tabbar-hover-text-color: light-dark(#334155, #e5e7eb); /* Black line-art icons are inverted to white on dark backgrounds. Carried as a variable so it crosses the shadow-DOM boundary; switched by theme below (light-dark() only accepts colors, not filter values). */ --icon-filter: none; /* Voting-result colors (Democracy → Results). The first three are read from a choice's own wording — an approval, a refusal, an abstention — and each is shown with a glyph as well, because red and green are nearly the same color to a red-green colorblind reader. The five that follow are assigned in choice order to choices whose wording means nothing to us; they were validated as a categorical set (adjacent CVD ΔE ≥ 13 in both modes) and hold no red or green hue, so an ordinary choice can never read as an approval or a refusal. Each pair is light surface / dark surface, stepped for its own background. */ --result-approval-color: light-dark(#008300, #21a53f); --result-refusal-color: light-dark(#d03b3b, #e66767); --result-abstention-color: light-dark(#6b7280, #9aa1ad); --result-choice-blue-color: light-dark(#2a78d6, #3987e5); --result-choice-orange-color: light-dark(#eb6834, #d95926); --result-choice-violet-color: light-dark(#4a3aa7, #9085e9); --result-choice-magenta-color: light-dark(#e87ba4, #d55181); --result-choice-yellow-color: light-dark(#eda100, #c98500); /* The seven majority-judgment grades (§16.4), MJ_AWFUL to MJ_EXCELLENT. A diverging ramp rather than a categorical set: the grades are ordered and signed, so two hues meet at a neutral gray middle, each arm deepening toward its pole. Every step clears 3:1 on its own surface. Hue is the SECOND reading here, never the only one — a grade profile stacks its segments in a fixed order with a gap between them, so position separates them whatever a reader sees of the color, and the grade that decides a candidacy is always named in words beside it. */ --grade-awful-color: light-dark(#b3261e, #e05a52); --grade-very-bad-color: light-dark(#d03b3b, #e66767); --grade-bad-color: light-dark(#dc6f5f, #ea8f82); --grade-medium-color: light-dark(#6b7280, #9aa1ad); --grade-good-color: light-dark(#5c9a6b, #79c78d); --grade-very-good-color: light-dark(#0f8f35, #21a53f); --grade-excellent-color: light-dark(#00631a, #0f8a2c); /* Spacing */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-xxl: 3rem; /* Border radius */ --border-radius-sm: 4px; --border-radius-md: 8px; --border-radius-lg: 12px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15); } /* Theme override: the Theme setting writes data-theme on . When absent (i.e. "system") the palette follows the OS via `color-scheme: light dark`. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* Non-color theming that light-dark() can't express, kept in sync with the chosen theme (dark when the OS is dark and not overridden to light, or when explicitly overridden to dark). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --icon-filter: invert(1); } } :root[data-theme="dark"] { --icon-filter: invert(1); } * { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background-color: var(--background-color); color: var(--text-color); line-height: 1.6; overflow: hidden; } #app { min-height: 100vh; padding: 0; display: flex; flex-direction: column; } /* SPA Navigation Styles */ nav { position: fixed; top: 0; inset-inline-start: 0; inset-inline-end: 0; background: var(--primary-color); border-bottom: 1px solid rgba(255, 255, 255, 0.2); box-shadow: var(--shadow-md); z-index: 1001; } /* SPA Main Content Area */ main { flex: 1; position: relative; overflow: hidden; padding: var(--spacing-lg); margin-bottom: 90px; /* Space for bottom tab bar */ } /* SPA Component Transitions */ [data-route-component] { opacity: 0; transform: translateX(20px); transition: all 0.3s ease-out; } [data-route-component].active { opacity: 1; transform: translateX(0); } /* Loading spinner */ .loading { display: flex; justify-content: center; align-items: center; height: 100vh; } .spinner { width: 40px; height: 40px; border: 4px solid var(--border-color); border-top: 4px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Utility classes */ .hidden { display: none; } .text-center { text-align: center; } /* Responsive design */ @media (max-width: 768px) { #app { padding-top: 120px; /* More space for mobile navigation */ } main { padding: var(--spacing-md); margin-bottom: 90px; /* Space for bottom tab bar */ } } /* Bottom Tab Bar Styles */ .bottom-tab-bar { position: fixed; bottom: 0; inset-inline-start: 0; inset-inline-end: 0; background: var(--background-color); border-top: 1px solid var(--border-color); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); display: flex; justify-content: space-around; align-items: center; padding: var(--spacing-sm) 0; z-index: 1000; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); height: 70px; } .tab-bar-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--spacing-xs); cursor: pointer; transition: all 0.3s ease; color: var(--secondary-color); text-decoration: none; min-width: 50px; border-radius: var(--border-radius-sm); position: relative; flex: 1; max-width: 80px; } .tab-bar-item:hover { background: var(--light-color); color: var(--primary-color); transform: translateY(-2px); } .tab-bar-item.active { color: var(--primary-color); background: rgba(0, 123, 255, 0.1); } .tab-bar-item.active::before { content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 30px; height: 3px; background: var(--primary-color); border-radius: 0 0 3px 3px; animation: tabIndicator 0.3s ease-out; } @keyframes tabIndicator { 0% { width: 0; opacity: 0; } 100% { width: 30px; opacity: 1; } } .tab-icon { display: flex; align-items: center; justify-content: center; margin-bottom: 4px; transition: transform 0.2s ease; width: 24px; height: 24px; } .tab-bar-item:hover .tab-icon { transform: scale(1.1); } .tab-bar-item.active .tab-icon { transform: scale(1.15); } .tab-label { font-size: 0.75rem; font-weight: 500; text-align: center; white-space: nowrap; margin-top: 2px; transition: font-weight 0.2s ease; } .tab-bar-item.active .tab-label { font-weight: 600; } /* Dark-mode refinements for the bottom tab bar; light-dark() follows the chosen theme via color-scheme (the light side matches the default light styling). */ .bottom-tab-bar { background: light-dark(var(--background-color), rgba(26, 26, 26, 0.95)); border-top: 1px solid light-dark(var(--border-color), #444444); } .tab-bar-item.active { background: light-dark(transparent, rgba(0, 123, 255, 0.2)); } /* Hide bottom tab bar on larger screens - DISABLED FOR TESTING */ /* @media (min-width: 1200px) { .bottom-tab-bar { display: none; } #app { padding-bottom: var(--spacing-md) !important; } } */ /* Adjust main content padding for bottom tab bar */ @media (max-width: 768px) { main { padding-bottom: 90px; /* Extra space for bottom tab bar */ } } /* Tab Bar Item Styles - Must be in global CSS to affect light DOM */ tab-bar-item { display: none !important; padding: 20px; background: var(--surface-muted-color); min-height: calc(100vh - 70px); /* Full height minus tab bar */ } tab-bar-item.active { display: block !important; } tab-bar-item h3 { margin: 0 0 16px 0; color: var(--text-strong-color); font-size: 24px; font-weight: 700; text-align: center; } tab-bar-item p { margin: 0 0 16px 0; color: var(--text-muted-color); line-height: 1.6; font-size: 16px; max-width: 600px; margin-inline-start: auto; margin-inline-end: auto; text-align: center; }