/* Senoseč.live — Material 3 design tokens + base styles. Palette: meadow-green primary, sienna/amber secondary (warm "open/field" accent), error red. Light + automatic dark mode. Variable names kept stable so every component restyles from here (max CSS, minimal inline). */ :root { /* ===== Material 3 palette — EXACT values copied from the design mockup's tailwind.config (navrh/*.html). Token names kept as green/amber/red aliases so every component below restyles from here. ===== */ /* Primary = deep meadow green: brand, headings, filled actions, links */ --green-900: #1b4d2e; /* primary */ --green-700: #2f4d39; /* on-primary-fixed-variant — links */ --green-600: #1b4d2e; /* primary — filled buttons */ --green-500: #2e5900; /* tertiary — accent green */ --green-100: #c8ebd0; /* primary-fixed — soft green container (chips, tonal) */ --primary-container: #244030; /* tonal container (urgency banner bg) */ --on-primary-container: #99baa1; /* text on primary-container */ /* Secondary = sienna: warm "field team" accent */ --amber-600: #a0522d; /* secondary */ --amber-500: #a0522d; --amber-100: #ffdcc5; /* secondary-fixed — soft peach container */ /* Error red */ --red-600: #d32f2f; /* error */ --red-100: #ffdad6; /* error-container */ /* Neutrals (M3 surfaces) */ --ink: #191c1b; /* on-surface */ --muted: #424843; /* on-surface-variant */ --line: #c2c8c0; /* outline-variant */ --bg: #f8faf8; /* background */ --header-bg: #ffffff; /* surface-container-lowest — header */ --surface: #ffffff; /* surface-container-lowest — cards */ --surface-2: #f2f4f2; /* surface-container-low */ --surface-3: #eceeec; /* surface-container (heads, fills, hover) */ --line-soft: #c2c8c0; /* card outline (mockup uses outline-variant everywhere) */ /* Solid badge/button pairs — flip readably between light and dark */ --solid-primary-bg: #1b4d2e; --solid-primary-fg: #ffffff; --solid-error-bg: #d32f2f; --solid-error-fg: #ffffff; --solid-secondary-bg: #a0522d; --solid-secondary-fg: #ffffff; /* Staffing traffic-light: none=error red, partial=gold, full=primary green */ --staff-partial: #9a6700; /* amber/gold — partially staffed */ /* M3 mockup borderRadius scale: DEFAULT 2 / lg 4 / xl 8 */ --radius: 2px; /* cards default (mockup `rounded` = 2px, nearly square) */ --radius-sm: 2px; /* facts, inputs, small */ --radius-lg: 8px; /* emphasized card (rounded-xl) */ --radius-btn: 4px; /* buttons (rounded-lg) */ /* Layout: full-bleed header + 1280px content with 16px→64px side margins */ --header-h: 64px; --content-max: 1280px; --pad-x: clamp(1rem, 5vw, 64px); /* margin-mobile 16px → margin-desktop 64px */ --shadow: 0 1px 2px rgba(14, 74, 43, .06), 0 6px 20px rgba(14, 74, 43, .08); --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-head: "Montserrat", var(--font); } /* Dark mode — M3 dark palette, applied via which an inline head script sets before paint (from localStorage, else the OS preference). The header toggle flips it. (Class-based so the manual switch can override the OS setting.) */ html.theme-dark { /* EXACT M3 dark palette from the mockup dark config (navrh/*_dark_mode.html) */ --green-900: #adcfb4; /* primary — headings/brand */ --green-700: #c8ebd0; /* on-primary-container — links */ --green-600: #2f4d39; /* primary-container — tonal green surfaces */ --green-500: #a7d47a; /* tertiary */ --green-100: #2f4d39; /* primary-container — tonal chips */ --primary-container: #2f4d39; --on-primary-container: #c8ebd0; --amber-600: #f4bb92; /* secondary */ --amber-500: #f4bb92; --amber-100: #653d1e; /* secondary-container */ --red-600: #ffb4ab; /* error (text use) */ --red-100: #93000a; /* error-container */ --ink: #eceeec; /* on-surface */ --muted: #c2c8c0; /* on-surface-variant */ --line: #424843; /* outline-variant */ --bg: #1a1c1a; /* background */ --header-bg: #1a1c1a; /* surface-container-lowest — header */ --surface: #242624; /* surface-container-low — cards */ --surface-2: #1a1c1a; /* surface-container-lowest */ --surface-3: #2d2f2d; /* surface-container (heads, fills, hover) */ --line-soft: #424843; /* solid badge/button pairs — readable dark equivalents (container/on-container) */ --solid-primary-bg: #2f4d39; --solid-primary-fg: #c8ebd0; --solid-error-bg: #93000a; --solid-error-fg: #ffdad6; --solid-secondary-bg: #653d1e; --solid-secondary-fg: #ffdcc5; --staff-partial: #ecc06a; /* amber/gold readable on dark surfaces */ --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35); } /* Keep raster map tiles legible in dark mode. */ html.theme-dark .leaflet-tile { filter: brightness(.85) contrast(1.05); } html.theme-dark img:not(.no-dim) { filter: brightness(.95); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--green-700); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { font-family: var(--font-head); font-weight: 700; line-height: 1.2; color: var(--green-900); margin: 0 0 .5em; letter-spacing: -.01em; } h1 { font-size: 2rem; } /* headline-lg 32px */ h2 { font-size: 1.5rem; font-weight: 600; } /* headline-md 24px */ h3 { font-size: 1.2rem; font-weight: 600; } /* Layout — content centred at container-max (1280px) with mockup side margins */ .container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--pad-x); } .stack > * + * { margin-top: 1rem; } /* ===== Header — full-bleed top bar. Mockup: bg surface-container-lowest, px 64, py 16, border-b outline-variant, sticky. Brand + primary nav on the left, actions on the right. NOT wrapped in .container — it spans the full width. ===== */ .site-header { position: sticky; top: 0; z-index: 1000; background: var(--header-bg); border-bottom: 1px solid var(--line); } .site-header__inner { display: flex; align-items: center; gap: 2rem; min-height: var(--header-h); padding-block: .5rem; padding-inline: var(--pad-x); } /* Brand: deer logo + Montserrat headline-md (24px), weight 700, primary colour */ .brand { display: inline-flex; align-items: center; gap: .6rem; flex: none; } .brand:hover { text-decoration: none; } .brand__name { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; line-height: 2rem; color: var(--green-900); letter-spacing: -.01em; white-space: nowrap; } /* Primary nav: body-md (16px), on-surface-variant, active = primary + underline */ .site-nav { display: flex; align-items: center; gap: 1.5rem; } .nav-link { font-family: var(--font); font-weight: 400; font-size: 1rem; line-height: 1.5; color: var(--muted); padding: .25rem 0; position: relative; white-space: nowrap; } .nav-link:hover { color: var(--green-900); text-decoration: none; } .nav-link.is-active { color: var(--green-900); font-weight: 700; } .nav-link.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.45rem; height: 2px; background: var(--green-900); } /* Right-hand actions */ .site-header__actions { display: flex; align-items: center; gap: 1rem; margin-left: auto; } .site-nav__user { font-weight: 600; color: var(--green-900); white-space: nowrap; } .logout-form { display: inline; margin: 0; } .locale-switch { display: inline-flex; gap: .35rem; font-size: .85rem; color: var(--muted); } .locale-switch a { color: var(--muted); } .locale-switch a.is-active { font-weight: 700; color: var(--green-900); } /* Hamburger (mobile) toggles the whole bar open via .site-header.is-open */ .nav-toggle { display: none; margin-left: auto; background: none; border: 0; line-height: 1; cursor: pointer; color: var(--green-900); padding: .25rem; } .nav-toggle .icon { font-size: 1.75rem; } @media (max-width: 860px) { .nav-toggle { display: inline-flex; } .site-nav, .site-header__actions { display: none; } .site-header.is-open .site-header__inner { flex-wrap: wrap; row-gap: .25rem; } .site-header.is-open .site-nav, .site-header.is-open .site-header__actions { display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: .9rem; margin-left: 0; padding: .5rem 0 .75rem; } .site-header.is-open .nav-link.is-active::after { display: none; } } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .6rem 1rem; border-radius: var(--radius-btn); border: 1px solid transparent; font: inherit; font-weight: 600; cursor: pointer; background: var(--green-100); color: var(--green-900); transition: background .15s, transform .05s; } .btn:hover { text-decoration: none; filter: brightness(.96); } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--solid-primary-bg); color: var(--solid-primary-fg); box-shadow: var(--shadow); } .btn--primary:hover { filter: brightness(1.08); } .btn--amber { background: var(--solid-secondary-bg); color: var(--solid-secondary-fg); } .btn--amber:hover { filter: brightness(1.05); } .btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); } .btn--ghost:hover { background: var(--surface-3); filter: none; } /* Text button (mockup header "Přihlásit": no fill, hover tonal surface) */ .btn--text { background: transparent; color: var(--muted); } .btn--text:hover { background: var(--surface-3); color: var(--ink); filter: none; } .btn--block { width: 100%; } .btn--sm { padding: .35rem .7rem; font-size: .85rem; } /* Cards */ .card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow); } .card__body { padding: 1.1rem 1.25rem; } /* Chips / badges */ .chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; background: var(--green-100); color: var(--green-900); font-size: .8rem; font-weight: 600; } .chip--removable button { border: 0; background: none; cursor: pointer; color: inherit; font-size: 1rem; line-height: 1; } .badge { padding: .15rem .5rem; border-radius: 6px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; } .badge--open { background: var(--green-100); color: var(--green-700); } .badge--missing-pilot { background: var(--amber-100); color: var(--amber-600); } .badge--cancelled { background: var(--red-100); color: var(--red-600); } .badge--done { background: var(--surface-3); color: var(--muted); } /* Forms */ .field { display: block; margin-bottom: 1rem; } .field > label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .92rem; } .input, .field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="tel"], .field input[type="datetime-local"], .field input[type="number"], .field select, .field textarea { width: 100%; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; background: var(--surface); color: var(--ink); } .input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--green-500); outline-offset: 0; border-color: var(--green-500); } .form-error { color: var(--red-600); font-size: .85rem; margin-top: .25rem; } .help { color: var(--muted); font-size: .85rem; } /* Alerts / flashes */ .flash { padding: .8rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; border: 1px solid; } .flash--success { background: var(--green-100); border-color: #b9d8c5; color: var(--green-900); } .flash--error { background: var(--red-100); border-color: #e9b8b1; color: var(--red-600); } .flash--warning { background: var(--amber-100); border-color: #efd2a0; color: var(--amber-600); } .flash--info { background: #e7eef6; border-color: #c2d2e6; color: #234; } /* Auth pages */ .auth-wrap { min-height: calc(100dvh - var(--header-h)); display: grid; place-items: center; padding: 2rem 1rem; } .auth-card { width: min(420px, 100%); } /* Symfony-rendered auth forms: rows carry .field/.check (set in the FormType) so the shared form CSS applies. Extra polish here: checkbox row = box first + (multi-line) label, and validation error lists in the error colour. */ .auth-card .check { align-items: flex-start; font-weight: 500; } .auth-card .check input[type="checkbox"] { order: -1; margin-top: .2rem; flex: none; } .auth-card .check label { font-weight: 500; margin: 0; } .auth-card form ul { margin: .3rem 0 0; padding: 0; list-style: none; color: var(--red-600); font-size: .85rem; } /* Map */ .map { width: 100%; height: 100%; } .map-shell { position: relative; height: calc(100dvh - var(--header-h)); } .map-panel { position: absolute; top: 1rem; left: 1rem; z-index: 500; width: min(360px, calc(100% - 2rem)); max-height: calc(100% - 2rem); overflow: auto; } .leaflet-container { font: inherit; } /* Utilities */ .muted { color: var(--muted); } .text-amber { color: var(--amber-600); } .flex { display: flex; gap: .75rem; align-items: center; } .flex--between { justify-content: space-between; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .hero { padding: 3rem 0; } .hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); } .lead { font-size: 1.15rem; color: var(--muted); max-width: 60ch; } footer.site-footer { border-top: 1px solid var(--line); padding: 1.5rem 0; color: var(--muted); font-size: .9rem; margin-top: 2rem; } .disclaimer { font-size: .8rem; color: var(--muted); } @media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } } /* App shell — homepage (sidebar + map) */ .app-shell { display: flex; height: calc(100dvh - var(--header-h)); } .app-sidebar { width: 380px; max-width: 85vw; flex-shrink: 0; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; } .app-sidebar__head { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); } .app-sidebar__head h1 { font-size: 1.25rem; margin-bottom: .25rem; } .app-sidebar__head p { margin: 0 0 .8rem; } .app-map { flex: 1; min-width: 0; position: relative; } .map-canvas { width: 100%; height: 100%; } .map-search { position: absolute; top: .75rem; left: 50%; transform: translateX(-50%); z-index: 600; width: min(440px, calc(100% - 1.5rem)); } .map-search__input { width: 100%; padding: .55rem .9rem; border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); background: var(--surface); font: inherit; color: var(--ink); } .map-search__input:focus { outline: 2px solid var(--green-500); border-color: var(--green-500); } .filters { display: flex; flex-wrap: wrap; gap: .5rem; padding: .8rem 1.25rem; border-bottom: 1px solid var(--line); } .chip--filter { cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink); } .chip--filter.is-active { background: var(--amber-100); border-color: var(--amber-500); color: var(--amber-600); } .event-list { padding: .5rem; overflow-y: auto; flex: 1; } .event-list__empty { padding: 1.5rem 1rem; text-align: center; } .event-card { display: flex; flex-direction: column; gap: .4rem; width: 100%; text-align: left; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem .9rem; margin-bottom: .6rem; font: inherit; transition: border-color .12s, box-shadow .12s; } .event-card, .event-card:hover { text-decoration: none; color: inherit; } .event-card:hover { border-color: var(--green-500); box-shadow: var(--shadow); } .event-card--missing { border-left: 4px solid var(--red-600); } .event-card__row { display: flex; justify-content: space-between; gap: .5rem; align-items: center; } .event-card__date { font-size: .78rem; display: inline-flex; gap: .35rem; align-items: center; } .event-card__title { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--green-900); line-height: 1.25; } .event-card__method { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); } .event-card__method .icon { color: var(--green-900); } .event-card__alert { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700; color: var(--red-600); } .event-card__needs { display: flex; gap: .8rem; font-size: .82rem; } .event-card__needs span { display: inline-flex; align-items: center; gap: .25rem; } .event-card__meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .85rem; } /* Homepage sidebar promo (DroSys) */ .app-sidebar__promo { margin: .8rem .9rem 0; text-decoration: none; align-items: flex-start; } .app-sidebar__promo:hover { text-decoration: none; filter: brightness(1.05); } .app-sidebar__promo .banner__text { display: flex; flex-direction: column; gap: .15rem; } .app-sidebar__promo-sub { font-size: .78rem; color: rgba(255,255,255,.85); } @media (max-width: 720px) { .app-shell { flex-direction: column; height: auto; } .app-sidebar { width: 100%; max-width: 100%; max-height: 55vh; border-right: 0; border-bottom: 1px solid var(--line); } .app-map { height: 55vh; } } /* Coverage editor (admin-unit area picker) */ .coverage-editor { overflow: hidden; } .coverage-editor__tools { padding-bottom: .75rem; } .coverage-editor__map { width: 100%; height: 360px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* Typeahead dropdown */ .coverage-search { position: relative; } .coverage-results { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 600; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); max-height: 240px; overflow-y: auto; } .coverage-result { display: flex; align-items: baseline; gap: .5rem; width: 100%; padding: .5rem .7rem; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; text-align: left; cursor: pointer; color: var(--ink); } .coverage-result:last-child { border-bottom: 0; } .coverage-result:hover { background: var(--green-100); } .coverage-result__name { font-weight: 600; } .coverage-result__type { margin-left: auto; font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; } /* Cascade multiselects (Tom Select) */ .coverage-cascade { display: grid; gap: .6rem; margin-top: .25rem; padding-top: .85rem; border-top: 1px solid var(--line); } .coverage-cascade .field { margin-bottom: 0; } /* Tom Select — flattened + themed to the app (modern look, light + dark via vars). Overrides the dated default theme; tags reuse the app's green pill language. */ .ts-wrapper { font: inherit; } .ts-wrapper .ts-control { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); padding: .3rem .45rem; min-height: 2.6rem; gap: .35rem; box-shadow: none; } .ts-wrapper.focus .ts-control { border-color: var(--green-500); box-shadow: 0 0 0 2px color-mix(in srgb, var(--green-500) 30%, transparent); } .ts-wrapper .ts-control > input { color: var(--ink); font: inherit; } .ts-wrapper .ts-control > input::placeholder { color: var(--muted); } /* selected tags = green pills (same language as the app's chips) */ .ts-wrapper.multi .ts-control > .item { background: var(--green-100); color: var(--green-900); border: 0; border-radius: 999px; padding: .15rem .2rem .15rem .65rem; margin: 0; font-size: .8rem; font-weight: 600; display: inline-flex; align-items: center; box-shadow: none; } .ts-wrapper.multi .ts-control > .item.active { background: var(--green-100); color: var(--green-900); } .ts-wrapper .ts-control > .item .remove { border: 0; padding: 0 .45rem; margin-left: .1rem; color: var(--green-900); opacity: .65; font-size: 1rem; line-height: 1; background: transparent; } .ts-wrapper .ts-control > .item .remove:hover { background: transparent; opacity: 1; } /* dropdown — above the Leaflet map */ .ts-dropdown { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); box-shadow: var(--shadow); z-index: 2000; margin: 2px 0 0; } .ts-dropdown .option { color: var(--ink); padding: .5rem .7rem; } .ts-dropdown .option.active, .ts-dropdown .active { background: var(--green-100); color: var(--green-900); } .ts-dropdown .no-results, .ts-dropdown .optgroup-header { color: var(--muted); } /* clear-all (×) button (clear_button plugin) */ .ts-wrapper .clear-button { color: var(--muted); opacity: .75; background: transparent; } .ts-wrapper .clear-button:hover { color: var(--ink); opacity: 1; background: transparent; } /* Radius slider */ .coverage-editor__radius input[type="range"] { width: 100%; accent-color: var(--amber-600); } .coverage-editor__radius-value { font-weight: 700; color: var(--amber-600); } /* Selected chips */ .coverage-editor__selection { padding-top: .9rem; } .coverage-editor__selection-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; } .coverage-editor__selection-title { font-weight: 600; margin: 0; font-size: .92rem; } .coverage-chips { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 1.6rem; max-height: 168px; overflow-y: auto; } .coverage-editor__hint { margin: .6rem 0 0; } /* Checkbox rows + fieldsets (onboarding) */ .check { display: flex; align-items: center; gap: .5rem; margin: .35rem 0; font-weight: 500; } .check input { width: auto; } fieldset.field { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem 1rem; } fieldset.field > legend { font-weight: 700; padding: 0 .35rem; } /* Wider auth card — onboarding embeds the map editor */ .auth-card--wide { width: min(760px, 100%); } /* Toasts — flash messages as an auto-dismissing overlay (don't affect layout) */ .toasts { position: fixed; top: 72px; right: 1rem; z-index: 2000; display: flex; flex-direction: column; gap: .5rem; width: min(380px, calc(100% - 2rem)); } .toast { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; border-radius: var(--radius-sm); box-shadow: var(--shadow); border: 1px solid; background: var(--surface); animation: toast-in .25s ease; } .toast--success { background: var(--green-100); border-color: #b9d8c5; color: var(--green-900); } .toast--error { background: var(--red-100); border-color: #e9b8b1; color: var(--red-600); } .toast--warning { background: var(--amber-100); border-color: #efd2a0; color: var(--amber-600); } .toast--info { background: #e7eef6; border-color: #c2d2e6; color: #223344; } .toast__close { margin-left: auto; border: 0; background: none; font-size: 1.2rem; line-height: 1; cursor: pointer; color: inherit; } .toast--leaving { opacity: 0; transform: translateX(8px); transition: opacity .3s, transform .3s; } @keyframes toast-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } } /* Event detail + signup box (from feature workflow) */ .event-detail__badges { gap: .4rem; } .event-detail__head h1 { margin: 0; } .event-detail__facts p, .event-detail__needs p, .event-detail__group p { margin: 0; } .event-detail__signups { list-style: none; padding: 0; margin: 0; } .event-signup { display: flex; padding: .5rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; gap: .5rem; align-items: center; } .event-signup:last-child { border-bottom: 0; } .event-map { position: relative; border-radius: var(--radius-sm); overflow: hidden; } .signup-box { margin-top: 1rem; } .event-card__detail { display: inline-block; margin-top: .35rem; font-size: .85rem; font-weight: 600; } /* Notifications */ .nav-bell { position: relative; text-decoration: none; font-size: 1.15rem; } .nav-bell:hover { text-decoration: none; } .nav-bell__badge { position: absolute; top: -7px; right: -11px; background: var(--solid-error-bg); color: var(--solid-error-fg); font-size: .7rem; font-weight: 700; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .notif-list { list-style: none; margin: 0; padding: 0; } .notif-item { border-bottom: 1px solid var(--line); } .notif-item:last-child { border-bottom: 0; } .notif-item__link { display: block; padding: .7rem .25rem; text-decoration: none; color: inherit; } .notif-item__link:hover { background: var(--green-100); text-decoration: none; } .notif-item__title { display: block; font-weight: 600; color: var(--green-900); } .notif-item__body { display: block; font-size: .9rem; } .notif-item__meta { display: block; font-size: .8rem; margin-top: .15rem; } .notif-item--unread .notif-item__title::before { content: '● '; color: var(--amber-600); } /* Weather snapshot on the event detail */ .weather { display: flex; flex-wrap: wrap; gap: 1rem; padding: .6rem .8rem; background: var(--green-100); border-radius: var(--radius-sm); font-weight: 600; } /* Buttons — destructive (GDPR account deletion) */ .btn--danger { background: var(--solid-error-bg); border-color: var(--solid-error-bg); color: var(--solid-error-fg); } .btn--danger:hover { filter: brightness(.92); } /* Footer legal links */ .footer-links { display: flex; flex-wrap: wrap; gap: 1rem; } .footer-links a { color: var(--muted); font-size: .85rem; } .footer-links a:hover { color: var(--green-700); } /* DroSys ad — decent, mission-first banner across the web (never in live ops) */ .drosys-ad { background: var(--green-100); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .drosys-ad__inner { display: flex; align-items: center; gap: .9rem; padding: .6rem 0; } .drosys-ad__mark { font-size: 1.5rem; line-height: 1; } .drosys-ad__text { display: flex; flex-direction: column; line-height: 1.25; } .drosys-ad__text strong { color: var(--green-900); } .drosys-ad__sub { font-size: .85rem; color: var(--muted); } .drosys-ad__cta { margin-left: auto; white-space: nowrap; } /* Legal / long-form text pages (privacy, terms) */ .legal.prose { max-width: 760px; padding-block: 1.5rem 2.5rem; } .prose h2 { margin-top: 1.6rem; font-size: 1.15rem; } .prose p, .prose li { line-height: 1.6; } .prose ul { padding-left: 1.2rem; } .prose li + li { margin-top: .35rem; } /* Account danger zone (GDPR erasure) */ .danger-zone { margin-top: 1.5rem; border: 1px solid #e9b8b1; } .danger-zone h2 { color: var(--red-600); font-size: 1.05rem; } /* Superadmin area */ .admin-wrap { padding-block: 1.5rem 2.5rem; } .admin-nav { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: .5rem; } .admin-nav a { padding: .5rem .85rem; border-radius: var(--radius-sm) var(--radius-sm) 0 0; color: var(--muted); font-weight: 600; } .admin-nav a:hover { background: var(--green-100); } .admin-nav a.is-active { color: var(--green-900); border-bottom: 2px solid var(--green-600); } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; } .stat { display: flex; flex-direction: column; gap: .15rem; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: inherit; } a.stat:hover { border-color: var(--green-500); text-decoration: none; } .stat__num { font-size: 1.8rem; font-weight: 700; color: var(--green-900); line-height: 1; } .stat__label { font-size: .85rem; color: var(--muted); } .stat--alert .stat__num { color: var(--amber-600); } .table-scroll { overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; background: var(--surface); } .admin-table th, .admin-table td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; font-size: .9rem; } .admin-table th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; } .admin-table__action { white-space: nowrap; text-align: right; } .badge { display: inline-block; padding: .1rem .5rem; margin: .1rem .15rem .1rem 0; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--green-100); color: var(--green-900); } .badge--ok { background: var(--green-100); color: var(--green-700); } .badge--muted { background: var(--surface-3); color: var(--muted); } .badge--admin { background: var(--amber-100); color: var(--amber-600); } /* Groups directory + detail */ .groups-wrap { padding-block: 1.5rem 2.5rem; } .groups-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; justify-content: space-between; } .group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } .group-card { color: inherit; transition: border-color .15s; } a.group-card:hover { border-color: var(--green-500); text-decoration: none; } .group-card__head { display: flex; align-items: center; gap: .5rem; justify-content: space-between; } .group-card__head h2 { font-size: 1.1rem; margin: 0; } .group-card__meta { font-size: .85rem; } .group-detail { padding-block: 1.5rem 2.5rem; } .group-detail__head h1 { margin: .25rem 0; } .group-detail__badges { display: flex; align-items: center; gap: .5rem; } .group-detail__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } .member-list { list-style: none; margin: 0; padding: 0; } .member-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--line); } .member-row:last-child { border-bottom: 0; } .member-row__actions { display: flex; gap: .35rem; } .chip-list { display: flex; flex-wrap: wrap; gap: .35rem; } .chip-list .chip { background: var(--green-100); color: var(--green-900); padding: .15rem .6rem; border-radius: 999px; font-size: .8rem; } /* Coverage of CZ choropleth page */ .coverage-page { padding-block: 1.5rem 2.5rem; } .coverage-map { height: min(70vh, 620px); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } .coverage-legend { display: flex; flex-wrap: wrap; gap: 1.2rem; } .coverage-legend__item { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; color: var(--muted); } .coverage-swatch { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--line); display: inline-block; } .coverage-swatch--covered { background: #3a9460; border-color: #1f5c38; } .coverage-swatch--blank { background: #ffffff; } /* Push enable + quiet hours (onboarding) */ .push-enable { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .6rem 0; } .quiet-hours { display: flex; align-items: center; gap: .5rem; max-width: 280px; } .quiet-hours input[type="time"] { flex: 1; } /* Operativa: chat + live map */ .chat-list { display: flex; flex-direction: column; gap: .4rem; max-height: 320px; overflow-y: auto; padding: .5rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); } .chat-msg { padding: .35rem .55rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); max-width: 85%; } .chat-msg--mine { align-self: flex-end; background: var(--green-100); border-color: var(--green-500); } .chat-msg__meta { display: block; font-size: .72rem; color: var(--muted); margin-bottom: .1rem; } .chat-msg__body { white-space: pre-wrap; overflow-wrap: anywhere; } .chat-form { display: flex; gap: .5rem; margin-top: .6rem; } .chat-form input { flex: 1; } .operativa-live__bar { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; } .operativa-map { height: 320px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } /* ============================================================ Material 3 component library (mockup-aligned). Token-driven. ============================================================ */ /* Material Symbols icon */ .icon { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-flex; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; vertical-align: middle; user-select: none; font-size: 1.25rem; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .icon--fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .icon--sm { font-size: 1.05rem; } .icon--lg { font-size: 1.6rem; } .icon--xl { font-size: 2.2rem; } .btn .icon { font-size: 1.15rem; } /* Status pills (M3 tonal). Reused by event cards + detail. */ .pill { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .pill--open { background: var(--solid-primary-bg); color: var(--solid-primary-fg); } .pill--missing { background: var(--solid-error-bg); color: var(--solid-error-fg); } .pill--full { background: var(--surface-3); color: var(--muted); } .pill--done { background: var(--green-100); color: var(--green-900); } .pill--amber { background: var(--amber-100); color: var(--amber-600); } .pill--solid-primary { background: var(--solid-primary-bg); color: var(--solid-primary-fg); } .pill--solid-error { background: var(--solid-error-bg); color: var(--solid-error-fg); } /* Tonal (secondary) button + outline + accent */ .btn--tonal { background: var(--green-100); color: var(--green-900); } .btn--outline { background: transparent; border-color: var(--line); color: var(--green-700); } .btn--accent { background: var(--solid-secondary-bg); color: var(--solid-secondary-fg); } .btn--pill { border-radius: 999px; } /* Hero header (detail pages) */ .hero { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.5rem; } .hero__pills { display: flex; flex-wrap: wrap; gap: .5rem; } .hero__title { font-family: var(--font-head); font-size: clamp(2rem, 5vw, 3rem); line-height: 1.08; font-weight: 700; color: var(--green-900); margin: .2rem 0; letter-spacing: -.02em; } .hero__lead { color: var(--muted); font-size: 1.05rem; max-width: 60ch; } /* Stat grid (key facts) */ .facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .8rem; } /* Stat boxes. Staffing boxes (pilot, field team) use a traffic-light by occupancy: none = error red, partially staffed = gold, fully staffed = primary green (default). Method/start are informational → primary green. Hover border follows the box colour. */ .fact { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem .9rem; } .fact__label { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--muted); margin-bottom: .25rem; } .fact__value { display: flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--green-900); } /* none (0 signed up) → error red, bold */ .fact--none { border-color: color-mix(in srgb, var(--red-600) 40%, var(--line)); } .fact--none .fact__label, .fact--none .fact__value { color: var(--red-600); } .fact--none .fact__value { font-weight: 700; } /* partially staffed → gold */ .fact--partial { border-color: color-mix(in srgb, var(--staff-partial) 45%, var(--line)); } .fact--partial .fact__value { color: var(--staff-partial); } /* Bento two-column layout */ .bento { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; } @media (min-width: 960px) { .bento { grid-template-columns: 2fr 1fr; } } /* Weather strip */ .weather-strip { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; padding: .9rem 1.1rem; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); } .weather-strip__item { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; } .weather-strip__item .icon { color: var(--green-900); } /* Banners */ .banner { display: flex; align-items: center; gap: .8rem; padding: .8rem 1.1rem; border-radius: var(--radius-sm); } .banner__text { flex: 1; } /* Urgency banner = M3 primary-container (mockup) */ .banner--urgent { background: var(--primary-container); color: var(--on-primary-container); border-left: 4px solid var(--green-900); box-shadow: var(--shadow); } /* Banner icon = primary-fixed (light) / primary (dark) — bright on the dark-green fill */ .banner--urgent .icon { color: var(--green-100); } html.theme-dark .banner--urgent .icon { color: var(--green-900); } .banner--urgent strong { color: inherit; } .banner--promo { background: linear-gradient(135deg, var(--green-600) 0%, #2d5a00 100%); color: #fff; } .banner--promo .btn { background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.3); } .banner--promo .btn:hover { background: rgba(255,255,255,.3); } /* Role-select buttons (signup) */ .role-pick { display: flex; flex-direction: column; gap: .6rem; } .role-pick form { margin: 0; } .role-option { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; text-align: left; text-decoration: none; transition: border-color .15s, background .15s; } .role-option:hover { text-decoration: none; border-color: var(--green-900); background: color-mix(in srgb, var(--green-900) 8%, var(--surface)); } .role-option--accent:hover { border-color: var(--amber-600); background: color-mix(in srgb, var(--amber-600) 8%, var(--surface)); } .role-option__main { display: flex; align-items: center; gap: .7rem; } .role-option__main .icon { color: var(--green-900); } .role-option--accent .role-option__main .icon { color: var(--amber-600); } .role-option__arrow .icon { color: var(--muted); } .role-option__title { display: block; font-weight: 700; color: var(--ink); } .role-option:hover .role-option__title { color: var(--green-900); } .role-option--accent:hover .role-option__title { color: var(--amber-600); } .role-option__hint { display: block; font-size: .8rem; color: var(--muted); } .signup-card__lead { margin: 0; } .signup-card__foot { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); } /* Avatars */ .avatar { width: 2.25rem; height: 2.25rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; background: var(--green-100); color: var(--green-900); border: 1px solid var(--line); flex: none; } .avatar--sm { width: 1.6rem; height: 1.6rem; font-size: .65rem; border: 2px solid var(--surface); } .avatar-stack { display: inline-flex; } .avatar-stack > * + * { margin-left: -.5rem; } /* Segmented control (layer switch etc.) */ .segmented { display: inline-flex; gap: .25rem; padding: .25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); } .segmented button { border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 600; font-size: .85rem; padding: .35rem .8rem; border-radius: calc(var(--radius-sm) - 3px); cursor: pointer; } .segmented button.is-active { background: var(--green-600); color: #fff; } /* Mobile bottom nav + FAB */ .bottom-nav { display: none; } .fab { position: fixed; bottom: 5.5rem; right: 1.1rem; width: 3.5rem; height: 3.5rem; border-radius: 999px; background: var(--green-600); color: #fff; border: 0; box-shadow: var(--shadow); z-index: 1200; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } @media (max-width: 640px) { .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1100; justify-content: space-around; align-items: center; padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); } .bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: .1rem; color: var(--muted); font-size: .68rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px; } .bottom-nav a.is-active { color: var(--green-900); background: var(--green-100); } } /* Soft section heading with icon */ .section-head { display: flex; align-items: center; gap: .5rem; } .section-head .icon { color: var(--green-900); } /* Theme toggle button (header) */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--green-900); cursor: pointer; padding: 0; } .theme-toggle:hover { background: var(--green-100); } /* Event detail bento extras */ .bento__main, .bento__side { min-width: 0; } /* Signup card: same neutral border as every other card (unified), just a softer radius. */ .signup-card { border: 1px solid var(--line-soft); border-radius: var(--radius-lg); } /* Merged participant list inside the signup card */ .signup-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .signup-person { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; padding: .5rem 0; border-bottom: 1px solid var(--line); } .signup-person:first-child { padding-top: 0; } .signup-person:last-child { border-bottom: 0; padding-bottom: 0; } .signup-person__name { display: inline-flex; align-items: center; gap: .4rem; flex: 1; min-width: 0; } .signup-person__name .icon { color: var(--green-900); } .signup-person__phone { font-size: .8rem; } .signup-person__actions { display: flex; gap: .35rem; width: 100%; } .signup-card__join { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); } .org-row { display: flex; align-items: center; gap: .6rem; } .org-row .help { display: block; font-size: .78rem; } .org-row strong { display: block; line-height: 1.2; } /* Offset page content from the sticky header */ .event-detail { padding-block: 1.5rem 3rem; } /* Fact cards: hover border follows the box's own status colour */ .fact { transition: border-color .15s; } .fact:hover { border-color: var(--green-900); } .fact--none:hover { border-color: var(--red-600); } .fact--partial:hover { border-color: var(--staff-partial); } /* Share-the-mission card */ .share-actions { display: flex; gap: .5rem; } .share-actions .btn { flex: 1; } .share-actions .icon { color: var(--green-900); } .share-qr { display: flex; justify-content: center; padding: .5rem; background: #fff; border-radius: var(--radius-sm); border: 1px solid var(--line); } /* Brand logo (primary colour — readable in both themes) */ .brand__logo { width: 1.8rem; height: 1.8rem; flex: none; color: var(--green-900); }