/* Brand overrides layered on top of Bootstrap 5 (vendor/bootstrap.min.css). Colors matched against the actual SDA (Stranka demokratske akcije) logo: a three-color "SDA" wordmark (S green, D blue, A red) next to a white fleur-de-lis on a light backing. Picked by eye against the supplied logo image, not a pixel color-picker or an official brand guide, so still an approximation — replace with exact hex/Pantone values if you get them. Bootstrap 5.3 components reference --bs-primary internally, so overriding it here recolors buttons, links, form focus rings, etc. without needing to recompile Bootstrap's Sass. */ :root { --bs-primary: #178c40; --bs-primary-rgb: 23, 140, 64; --bs-link-color: #178c40; --bs-link-color-rgb: 23, 140, 64; --bs-link-hover-color: #0d5c29; --bs-link-hover-color-rgb: 13, 92, 41; --brand-green-dark: #0d5c29; --brand-green-tint: #eaf5ee; --brand-red: #c22630; --brand-blue: #1f5ea3; --brand-body-bg: #f4f6f5; /* Bootstrap's own light-mode defaults for these (--bs-border-color: #dee2e6, --bs-secondary-color: rgba(33,37,41,.75)) read as too pale against our slightly-off-white --brand-body-bg — borders in particular (the footer's top border was almost invisible) and muted label text both needed more contrast. */ --bs-border-color: #c7ccd1; --bs-border-color-translucent: rgba(0, 0, 0, 0.2); --bs-secondary-color: rgba(33, 37, 41, 0.85); } /* Dark mode: Bootstrap 5.3's compiled CSS already carries a full dark palette, activated by data-bs-theme="dark" on (see partials/theme_init.ejs) — most components (cards, tables, form controls) adapt for free. Only our own brand tokens need a dark variant; redefined here rather than left to only exist in this block, so nothing depends solely on the dark override existing. --bs-secondary-color and --bs-border-color also need a dark-mode redefinition here, even though they're not "our" brand tokens: the :root block above (phase 25) strengthened them for contrast against --brand-body-bg's light-mode off-white, using dark, low-alpha values meant for a LIGHT background. :root custom properties apply regardless of theme, so without a dark override those same dark values carried straight into dark mode too — dark text on a dark background is how the footer's copyright line (and anything else using --bs-secondary-color) went invisible there. */ [data-bs-theme="dark"] { --bs-primary: #3aab5f; --bs-primary-rgb: 58, 171, 95; --bs-link-color: #5cc47e; --bs-link-color-rgb: 92, 196, 126; --bs-link-hover-color: #7fd39a; --bs-link-hover-color-rgb: 127, 211, 154; --brand-green-tint: #12351f; --brand-red: #e05a63; --brand-blue: #5b93cf; --brand-body-bg: #1a1d20; --bs-border-color: #3f454b; --bs-border-color-translucent: rgba(255, 255, 255, 0.15); /* A solid light gray rather than a translucent white — translucency means the effective color (and its contrast) shifts with whatever's underneath it, which read as too washed-out/grey against the footer's own tertiary-bg tint. A fixed color renders the same everywhere it's used. */ --bs-secondary-color: #c7cccf; } /* Shared max-width + centering for single-column page sections (a heading plus the form/detail card below it) — replaces what used to be the same `style="max-width: Npx"` (plus a bolted-on `.mx-auto`) repeated inline across 15 view files. Named by their pixel cap rather than a semantic size (sm/md/lg): the values were each picked per-page to fit that page's own content, not off a deliberate shared scale, so naming them after what they *are* is more honest than implying a design system that was never actually there. Wrapping the heading in the same element as the card (rather than just centering the card on its own) is the point, not just the max-width: a card centered under a heading that still spans the full page read as misaligned — the heading's left edge and the card's left edge no longer lined up once only the card was constrained. */ .content-480 { max-width: 480px; margin-left: auto; margin-right: auto; } .content-600 { max-width: 600px; margin-left: auto; margin-right: auto; } .content-640 { max-width: 640px; margin-left: auto; margin-right: auto; } .content-720 { max-width: 720px; margin-left: auto; margin-right: auto; } .content-900 { max-width: 900px; margin-left: auto; margin-right: auto; } body { background: var(--brand-body-bg); /* Sticky footer: nav, main, and footer are all direct children of body (see partials/header.ejs / footer.ejs) — stacking them in a column and letting only
grow means the footer sits at the bottom of the viewport on short pages instead of riding up right under the content, while still pushing down normally on long ones. */ display: flex; flex-direction: column; min-height: 100vh; } body > main { flex: 1 0 auto; } .navbar-brand-bar { background: var(--brand-green-dark); border-bottom: 3px solid var(--brand-red); /* Material's top app bar sits above page content at a fixed elevation (phase 20/21) — layered under the --md-elevation-2 token defined further down this file, applied here since the navbar itself lives above that section. */ box-shadow: var(--md-elevation-2); } .navbar-brand-bar .nav-link { color: rgba(255, 255, 255, 0.85); border-bottom: 2px solid transparent; } .navbar-brand-bar .nav-link.active, .navbar-brand-bar .nav-link:hover { color: #fff; border-bottom-color: var(--brand-red); } .accent-top { border-top: 3px solid var(--brand-red); } .letter-nav .btn { min-width: 2.25rem; } .quick-edit select { min-width: 140px; } /* Inline SVG icons (partials/icon.ejs) — sized by context, not by the SVG itself, so one markup works for a 16px nav icon and a 28px quick-link tile icon. */ .nav-icon svg { width: 16px; height: 16px; vertical-align: -0.15em; margin-right: 0.35rem; } .quick-link-icon svg { width: 28px; height: 28px; } .theme-toggle-btn svg { width: 16px; height: 16px; } /* Dashboard quick-action tiles — lift + shadow on hover both come from the general .md-surface-interactive rule in the visual-polish section further down (every quick-link carries that class too), so there's nothing quick-link-specific to add here anymore. */ /* Fixed per-party color dot on /people — identity-based (by party id), not the rank-based coloring /analytics uses for its breakdown bars, since a list needs one stable color per party rather than one that shifts as vote counts change. */ .party-swatch { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; margin-right: 0.35rem; flex-shrink: 0; /* A thin ring separates a light party color from the page background it'd otherwise blend into (light mode) or glow against (dark mode) — a fixed-alpha black/white mix rather than a hardcoded color so it reads correctly in both themes without its own dark-mode override. */ box-shadow: 0 0 0 1px color-mix(in srgb, var(--bs-body-color) 20%, transparent); } /* /people row, as a 3-row card instead of a wide table (see SETUP.md phase 18) — the same markup at every width, no separate mobile/desktop version to keep in sync. Rows 1-2 are flex-wrap groups, so they read as one compact line on a wide screen and stack naturally on a narrow one without a breakpoint ever having to be picked by hand. */ .person-list { display: flex; flex-direction: column; gap: 0.5rem; } .person-card { border: 1px solid var(--bs-border-color); border-radius: 0.5rem; padding: 0.65rem 0.85rem; background: var(--bs-body-bg); /* The actual transition (including background-color, for the quick-edit save flash) lives on .md-surface-interactive further down, which every person-card also carries — see the comment there for why it has to be declared there and not here. */ } /* Material pilot (phase 20): dropping the border in favor of .md-surface's elevation shadow — a surface floats instead of being outlined. */ .person-card.md-surface { border: none; padding: 0.85rem 1rem; } .person-card-deceased { opacity: 0.7; } .person-row-1 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .person-row-1 .person-nickname-input { flex: 0 1 140px; } .person-secondary { margin-top: 0.15rem; } .person-row-2 { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; } .person-field { flex: 1 1 150px; min-width: 130px; } .person-field-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--bs-secondary-color); margin-bottom: 0.1rem; } .person-row-3 { display: flex; gap: 0.5rem; margin-top: 0.6rem; } /* =========================================================================== Material Design pilot (phase 20) — structural rules only, layered on the existing SDA colors above. Applied so far to login.ejs, dashboard.ejs, and people/index.ejs, opted into per element via the md-* classes below rather than redefining Bootstrap's own classes — every other page keeps its current look untouched until this direction is confirmed. See SETUP.md. What "Material rules" means here, deliberately scoped to what's safe to do in pure CSS without a visual QA pass: - Elevation: shadow recipes standing in for physical surface height, resting vs. raised (hover) vs. floating (FAB). - Shape: 12px "medium" corners for surfaces, fully rounded ("full") buttons and FAB, per Material 3's shape scale. - Type scale: a modular set of sizes/weights, not just Bootstrap's default h1-h6 ramp. - Motion: consistent short, decelerating transitions on interactive elements instead of ad hoc per-component durations. Not attempted: real ripple (needs JS to track click position — a global click listener felt like too much surface area to add without being able to see it work), and Material's own Roboto typeface (self-hosting a new font family is a bigger ask than "restyle with Material's rules" implies; the system font stack keeps the type scale's proportions instead). =========================================================================== */ :root { --md-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.1); --md-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.1); --md-elevation-3: 0 4px 8px rgba(0, 0, 0, 0.14), 0 6px 12px rgba(0, 0, 0, 0.1); --md-elevation-4: 0 6px 12px rgba(0, 0, 0, 0.16), 0 10px 20px rgba(0, 0, 0, 0.12); --md-shape-small: 4px; --md-shape-medium: 12px; --md-shape-full: 999px; --md-motion-fast: 120ms cubic-bezier(0.2, 0, 0, 1); --md-motion-medium: 200ms cubic-bezier(0.2, 0, 0, 1); } [data-bs-theme="dark"] { --md-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35); --md-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.35); --md-elevation-3: 0 4px 8px rgba(0, 0, 0, 0.55), 0 6px 12px rgba(0, 0, 0, 0.4); --md-elevation-4: 0 6px 12px rgba(0, 0, 0, 0.6), 0 10px 20px rgba(0, 0, 0, 0.45); } /* Type scale — a stand-in for Material's Display/Headline/Title/Label scale, sized in rem off the same base as the rest of the app. */ .md-headline { font-size: 2rem; font-weight: 400; line-height: 1.25; } .md-title-large { font-size: 1.375rem; font-weight: 500; line-height: 1.3; } .md-title-medium { font-size: 1rem; font-weight: 500; } .md-label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bs-secondary-color); } /* Surface — a card-like container using elevation instead of (or in addition to) a border. Kept distinct from Bootstrap's own .card class rather than redefining it, so unpiloted pages don't change. */ /* No `border` reset here deliberately — .md-surface is never applied alongside Bootstrap's .card (which is the only thing that would have put a border on it in the first place), and leaving border alone means .accent-top's gold border-top composes with it without a specificity fight over which one "wins" on the top edge. */ .md-surface { background-color: var(--bs-card-bg, var(--bs-body-bg)); color: var(--bs-body-color); border-radius: var(--md-shape-medium); box-shadow: var(--md-elevation-1); transition: box-shadow var(--md-motion-medium); /* Clips .card-header/.card-body's own square corners to this element's rounded ones — Bootstrap only rounds those automatically inside a real .card (its rule is scoped to .card > .card-header etc.), which .md-surface deliberately isn't. */ overflow: hidden; } .md-surface.md-surface-interactive:hover { box-shadow: var(--md-elevation-2); } /* Bootstrap's default .card-body/.card-header padding (1rem) reads as cramped against the 12px "medium" shape corners here, especially right under .accent-top's gold border — Material surfaces use more generous padding (16-24dp) than Bootstrap's card default. */ .md-surface > .card-body { padding: 1.25rem 1.5rem; } .md-surface > .card-header { padding: 1rem 1.5rem; } .md-surface.accent-top > .card-body:first-child, .md-surface.accent-top > .card-header:first-child { padding-top: 1.5rem; } /* Buttons — Material 3's fully-rounded ("full" shape) pill, plus a state layer (a flat color-mix tint) standing in for ripple on hover/press. */ .md-btn { border-radius: var(--md-shape-full) !important; transition: box-shadow var(--md-motion-fast), transform var(--md-motion-fast), background-color var(--md-motion-fast); } .md-btn:active { transform: scale(0.97); } .btn-primary.md-btn { box-shadow: var(--md-elevation-1); } .btn-primary.md-btn:hover { box-shadow: var(--md-elevation-2); } .md-btn.btn-outline-secondary:hover, .md-btn.btn-outline-primary:hover { background-color: color-mix(in srgb, var(--bs-primary) 8%, transparent); } /* Floating Action Button — the single most recognizable Material component, used here for /people's primary "add" action. Rounded-square (Material 3), not a circle (that was Material 2's shape). */ .md-fab { position: fixed; right: 1.5rem; bottom: 1.5rem; width: 56px; height: 56px; border-radius: var(--md-shape-medium); display: flex; align-items: center; justify-content: center; background: var(--bs-primary); color: #fff; box-shadow: var(--md-elevation-3); transition: box-shadow var(--md-motion-medium), transform var(--md-motion-fast); z-index: 1030; } .md-fab:hover, .md-fab:focus-visible { box-shadow: var(--md-elevation-4); color: #fff; } .md-fab:active { transform: scale(0.95); } .md-fab svg { width: 24px; height: 24px; } /* Text field — Material's "filled" style: a tonal fill with just a bottom accent line, rather than Bootstrap's default boxed outline. Opt in per field with .md-field wrapping the label+input pair. */ .md-field .form-label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bs-secondary-color); } .md-field .form-control, .md-field .form-select { background-color: var(--bs-tertiary-bg); border: none; border-bottom: 2px solid var(--bs-border-color); border-radius: var(--md-shape-small) var(--md-shape-small) 0 0; transition: border-color var(--md-motion-fast), background-color var(--md-motion-fast); } .md-field .form-control:focus, .md-field .form-select:focus { background-color: var(--bs-tertiary-bg); border-bottom-color: var(--bs-primary); box-shadow: none; } /* App footer (phase 24) — a real footer bar, replacing what used to be just a lone coat-of-arms icon with nothing else. */ .app-footer { margin-top: 3rem; /* Extra top/bottom room (up from 1.5rem) so the bigger logos (phase 35/37) have space to breathe instead of feeling cramped against the footer's edges. */ padding: 2rem 0; border-top: 2px solid var(--bs-border-color); background-color: var(--bs-tertiary-bg, var(--brand-body-bg)); } .app-footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .app-footer-brand { display: flex; align-items: center; gap: 0.75rem; /* Bumped from the footer's base muted text size — a small label next to a 64px logo read as an afterthought; this reads as an actual brand lockup instead. */ font-size: 1.15rem; font-weight: 600; color: var(--bs-secondary-color); } .app-footer-emblem { opacity: 0.85; } .app-footer-copyright { margin-top: 0.75rem; font-size: 0.8rem; color: var(--bs-secondary-color); text-align: center; } /* =========================================================================== Visual polish pass — small, additive refinements layered on everything above rather than a redesign: smoother rendering, brand-tinted focus/ selection/scrollbar states, a bit more tactile feedback on interactive surfaces, and rounder/softer treatment for a few stock Bootstrap components (badges, alerts, tables, pagination) that hadn't been touched by the Material pass. Nothing here changes markup or component choice, only how the existing ones render. =========================================================================== */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* A brief fade-in on navigation instead of content just appearing — subtle enough not to feel like a "loading" delay (short duration, no movement), but it takes the edge off a full-page reload every time you navigate somewhere in a server-rendered app like this one. */ body > main { animation: brand-fade-in 0.18s ease-out; } @keyframes brand-fade-in { from { opacity: 0; } to { opacity: 1; } } ::selection { background-color: color-mix(in srgb, var(--bs-primary) 30%, transparent); } /* Bootstrap's own focus ring reuses --bs-primary already, but only on form controls. This extends a visible, brand-colored ring to anything focused via keyboard navigation generally (buttons, links, cards), without adding a ring on mouse click (:focus-visible, not :focus). */ a:focus-visible, button:focus-visible, .btn:focus-visible, .md-surface-interactive:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; } /* Custom scrollbar — brand-tinted rather than the OS default gray, on both engines. Thin enough to stay out of the way on the long /people list and wide admin tables. */ * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--bs-primary) 40%, transparent) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--bs-primary) 40%, transparent); border-radius: var(--md-shape-full); border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--bs-primary) 60%, transparent); } /* Any interactive surface (person cards, dashboard quick-links, admin show/edit triggers) gets a slight lift on hover, not just the shadow bump .md-surface-interactive already had — the combination reads as physically responsive rather than just a color change. */ .md-surface-interactive { /* background-color is included here (not left to .person-card's own rule below) because a later `transition` declaration for the same element replaces an earlier one wholesale rather than merging with it — every person-card also carries this class, and it needs that property transitioning smoothly for the quick-edit save flash. */ transition: background-color 0.4s ease, box-shadow var(--md-motion-medium), transform var(--md-motion-medium); } .md-surface-interactive:hover { transform: translateY(-2px); } .md-surface-interactive:active { transform: translateY(-1px); } /* Primary buttons and the FAB get a brand-tinted glow instead of a flat black shadow — small touch, but a colored shadow is what makes a primary action read as "designed" rather than just elevated. */ .btn-primary.md-btn { box-shadow: 0 2px 8px color-mix(in srgb, var(--bs-primary) 35%, transparent); } .btn-primary.md-btn:hover { box-shadow: 0 4px 14px color-mix(in srgb, var(--bs-primary) 45%, transparent); } .md-fab { box-shadow: 0 4px 14px color-mix(in srgb, var(--bs-primary) 45%, transparent); } .md-fab:hover, .md-fab:focus-visible { box-shadow: 0 6px 20px color-mix(in srgb, var(--bs-primary) 55%, transparent); transform: scale(1.05); } .md-fab:active { transform: scale(0.95); } /* Badges — Bootstrap's default is square-cornered and a little flat; full-round plus slightly bolder text reads as more intentional and matches the rest of the app's fully-rounded (.md-shape-full) buttons. */ .badge { border-radius: var(--md-shape-full); font-weight: 600; letter-spacing: 0.01em; padding: 0.35em 0.65em; } /* Alerts — same idea: Bootstrap's boxed border reads harsher than the rest of this app's borderless, shadow-based surfaces. */ .alert { border: none; border-radius: var(--md-shape-medium); } /* Progress bars — used on the dashboard's assessed/turnout stats. Fully rounded track + bar (Bootstrap's is only lightly rounded), and an explicit transition so a stat that changes on reload doesn't just snap to its new width. */ .progress { border-radius: var(--md-shape-full); overflow: hidden; } .progress-bar { transition: width 0.4s ease; } /* Tables inside a .md-surface (the admin lists, the bulk-edit list) — Bootstrap's table borders fight with the surface's own borderless, shadow-based look. Softened header, a brand-tinted hover row instead of Bootstrap's flat gray, and no bottom border on the last row so the table doesn't draw a redundant line right against the surface's own edge. */ .md-surface table { margin-bottom: 0; } .md-surface thead th { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--bs-secondary-color); border-bottom-width: 1px; } .md-surface .table-hover > tbody > tr:hover > * { background-color: color-mix(in srgb, var(--bs-primary) 6%, transparent); } .md-surface tbody tr:last-child td { border-bottom: none; } /* Pagination and the /people letter nav — pill-shaped to match the rest of the app's buttons, with the active page/letter picked out by the same brand-tinted glow as a primary button instead of Bootstrap's flat fill, so it's consistent with everything else that's "selected" or "primary" on the page. */ .pagination .page-link { border-radius: var(--md-shape-full) !important; margin: 0 0.15rem; border: none; color: var(--bs-body-color); } .pagination .page-item.active .page-link { background-color: var(--bs-primary); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--bs-primary) 35%, transparent); } .pagination .page-item.disabled .page-link { background: transparent; color: var(--bs-secondary-color); } .letter-nav .btn.btn-primary { box-shadow: 0 2px 8px color-mix(in srgb, var(--bs-primary) 35%, transparent); } /* Footer — a soft gradient divider instead of a flat border line, plus a subtle upward shadow so it reads as a distinct layer under the page content rather than just "where the border happened to be drawn". */ .app-footer { border-top: none; box-shadow: inset 0 1px 0 var(--bs-border-color), 0 -8px 16px -12px rgba(0, 0, 0, 0.08); } /* Family tree (/people/:id) — the boxes-and-lines DOM/CSS version (phases 38/39) is gone. Drawn on an actual now (see the inline script in people/show.ejs, next to its data), positioned left of the details card rather than stacked full-width above it — computed layout/lines are exactly the kind of problem canvas is a better fit for than fighting flexbox and absolute positioning to get connector lines to line up correctly. */ @media print { .navbar-brand-bar, .no-print { display: none !important; } body { background: #fff; } .table { font-size: 11px; } .card, .person-card { border: none; } .md-fab { display: none; } }