/* 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 { /* Green = primary (headings, brand, filled buttons, links) */ --green-900: #0e4a2b; /* primary — headings, brand */ --green-700: #1c4f34; /* on-primary-fixed-variant — links/hover */ --green-600: #0e4a2b; /* primary — filled buttons */ --green-500: #2d5a00; /* tertiary — accent green */ --green-100: #b4eec4; /* primary-fixed — soft green container (chips, tonal) */ /* Sienna = secondary (warm accent: field team), exact M3 mockup values */ --amber-600: #a0522d; /* secondary — text/icon on light */ --amber-500: #a0522d; /* secondary — filled accent */ --amber-100: #ffd7be; /* secondary-fixed — soft peach container */ /* Red = error (mockup #d32f2f) */ --red-600: #d32f2f; --red-100: #ffdad6; /* Neutrals (M3 surfaces) — exact mockup values */ --ink: #121513; /* on-surface */ --muted: #3f4940; /* on-surface-variant */ --line: #bfc9bf; /* outline-variant */ --bg: #f8faf8; /* background */ --surface: #ffffff; /* surface-container-lowest (cards) */ --surface-2: #f1f4f1; /* surface-container-low (strips, sidebars) */ --surface-3: #e8ece8; /* surface-container (table heads, fills) */ /* M3 mockup borderRadius scale: DEFAULT 2 / lg 4 / xl 8 / full 12 */ --radius: 8px; /* cards (rounded-xl) */ --radius-sm: 4px; /* inputs, small (rounded-lg) */ --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 { --green-900: #cdeada; /* light primary — headings/brand on dark */ --green-700: #86d9a1; /* links */ --green-600: #356b48; /* filled button bg (white text reads well) */ --green-500: #4f9e6e; --green-100: #21392b; /* soft green container (dark) */ --amber-600: #f4bb92; /* light peach — text/icon on dark */ --amber-500: #c0743a; --amber-100: #4d2e16; /* dark peach container */ --red-600: #ffb4ab; --red-100: #5a1512; --ink: #e1e3e1; --muted: #bcc7bd; --line: #424843; --bg: #111411; --surface: #1c1f1c; --surface-2: #202220; --surface-3: #242624; --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; } /* Layout */ .container { width: min(1120px, 100% - 2rem); margin-inline: auto; } .stack > * + * { margin-top: 1rem; } /* Header */ .site-header { position: sticky; top: 0; z-index: 1000; background: var(--surface); border-bottom: 1px solid var(--line); } .site-header__inner { display: flex; align-items: center; gap: 1rem; height: 60px; } .brand { display: flex; align-items: center; gap: .5rem; font-family: var(--font-head); font-weight: 700; color: var(--green-900); font-size: 1.15rem; } .brand:hover { text-decoration: none; } .brand__mark { font-size: 1.4rem; } .site-nav { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; } .site-nav a { color: var(--ink); font-weight: 500; } .locale-switch { display: flex; gap: .25rem; font-size: .85rem; color: var(--muted); } .locale-switch a.is-active { font-weight: 700; color: var(--green-700); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .6rem 1rem; border-radius: 8px; 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(--green-600); color: #fff; box-shadow: var(--shadow); } .btn--primary:hover { background: var(--green-600); filter: brightness(1.08); } .btn--amber { background: var(--amber-600); color: #fff; } .btn--amber:hover { background: var(--amber-500); } .btn--ghost { background: transparent; border-color: var(--line); } .btn--block { width: 100%; } .btn--sm { padding: .35rem .7rem; font-size: .85rem; } /* Cards */ .card { background: var(--surface); border: 1px solid var(--line); 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(100vh - 60px); display: grid; place-items: center; padding: 2rem 1rem; } .auth-card { width: min(420px, 100%); } /* Map */ .map { width: 100%; height: 100%; } .map-shell { position: relative; height: calc(100vh - 60px); } .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(100vh - 60px); } .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-600); } .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; } /* 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%); } /* Header nav: user + mobile menu */ .site-nav__user { font-weight: 600; color: var(--green-700); } .logout-form { display: inline; margin: 0; } .nav-toggle { display: none; margin-left: auto; background: none; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--green-900); } @media (max-width: 720px) { .nav-toggle { display: block; } .site-header__inner { flex-wrap: wrap; } .site-nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: .75rem; margin-left: 0; padding: .5rem 0 1rem; } .site-nav.is-open { display: flex; } } /* 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(--amber-600); color: #fff; 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(--red-600); border-color: var(--red-600); color: #fff; } .btn--danger:hover { background: #a93226; border-color: #a93226; } /* 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(--green-600); color: #fff; } .pill--missing { background: var(--red-600); color: #fff; } .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(--green-600); color: #fff; } .pill--solid-error { background: var(--red-600); color: #fff; } /* 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(--amber-500); color: #fff; } .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(1.7rem, 4vw, 2.6rem); line-height: 1.1; 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; } .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); } .fact--alert .fact__label, .fact--alert .fact__value { color: var(--red-600); } .fact--alert { border-color: color-mix(in srgb, var(--red-600) 40%, var(--line)); } /* 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: 2px solid color-mix(in srgb, var(--green-600) 12%, transparent); 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-600); } /* Banners */ .banner { display: flex; align-items: center; gap: .8rem; padding: .8rem 1.1rem; border-radius: var(--radius-sm); } .banner__text { flex: 1; } .banner--urgent { background: var(--green-100); color: var(--green-900); border-left: 4px solid var(--green-600); } .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-option { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; padding: .9rem 1rem; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font: inherit; text-align: left; transition: border-color .15s, background .15s; } .role-option:hover { border-color: var(--green-600); background: color-mix(in srgb, var(--green-600) 6%, var(--surface)); } .role-option__main { display: flex; align-items: center; gap: .7rem; } .role-option__title { display: block; font-weight: 700; color: var(--green-900); } .role-option__hint { display: block; font-size: .8rem; color: var(--muted); } /* 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-600); } /* 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 { border: 2px solid var(--green-600); } .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; } /* Header nav — mockup style (active underline) + breathing room */ .site-header__inner { gap: 1.5rem; } .site-nav { gap: 1.3rem; } .nav-link { color: var(--ink); font-weight: 600; padding: .35rem 0; position: relative; } .nav-link:hover { color: var(--green-900); text-decoration: none; } .nav-link.is-active { color: var(--green-900); } .nav-link.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.5rem; height: 2px; background: var(--green-600); border-radius: 2px; } /* Offset page content from the sticky header */ .event-detail { padding-block: 1.5rem 3rem; } /* Fact cards: subtle hover (mockup) */ .fact { transition: border-color .15s; } .fact:hover { border-color: var(--green-500); } /* Share-the-mission card */ .share-actions { display: flex; gap: .5rem; } .share-actions .btn { flex: 1; } .share-qr { display: flex; justify-content: center; padding: .5rem; background: #fff; border-radius: var(--radius-sm); border: 1px solid var(--line); } /* Brand logo */ .brand__logo { width: 1.8rem; height: 1.8rem; flex: none; color: var(--green-600); }