*, *::before, *::after {
box-sizing: border-box;
}
:root {
/* RGB channels behind Tailwind's brand/accent colors (see tailwind.config in App.razor) - overridden
by the seasonal palettes in css/new-year.css and css/halloween.css. A saturated green rather than the
old grayish #2e7558; 600 is the darkest step that still reads as bright and the lightest one that
keeps white button text at WCAG AA (4.55:1), which is why it's also the accent. */
--color-brand-50: 238 251 244;
--color-brand-100: 216 245 230;
--color-brand-200: 181 235 208;
--color-brand-300: 127 217 176;
--color-brand-400: 60 194 138;
--color-brand-500: 16 165 111;
--color-brand-600: 0 135 90;
--color-brand-700: 0 110 73;
--color-brand-800: 6 90 62;
--color-brand-900: 10 69 50;
--color-accent: 0 135 90;
--color-accent-dark: 0 110 73;
--color-accent-shadow: 6 90 62;
--surface-page: #f4f6fb;
--surface: #ffffff;
--surface-strong: #ffffff;
--surface-muted: #eef1f7;
--line: #e3e8f2;
--line-strong: #c9d2e3;
--text: #0e1525;
--text-muted: #5a6478;
--brand: #00875a;
--brand-dark: #065a3e;
--brand-soft: #ddf6ea;
--accent: #00875a;
--accent-dark: #006e49;
--info: #3b82a0;
--shadow-soft: 0 16px 40px rgba(14, 21, 37, 0.14);
--shadow-small: 0 4px 16px rgba(14, 21, 37, 0.10);
/* Floating map UI (Home): translucent "glass" islands over the map. */
--glass: rgba(255, 255, 255, 0.86);
--glass-border: rgba(255, 255, 255, 0.7);
--map-gap: 0.75rem;
/* Severity scale - shared by map markers (js/map.js), the map filter (Home.razor), search results and
badges. Carries meaning, so it is never re-tinted by brand or seasonal palettes. */
--sev-low: #1f9d6a;
--sev-medium: #e0a106;
--sev-high: #f06a24;
--sev-critical: #e0313b;
}
/* clip, not hidden: overflow-x: hidden on body turns it into a scroll container of its own, which
silently disables every position: sticky below it (header band, contents, side rails). */
html, body {
margin: 0;
overflow-x: clip;
}
img, svg, video {
max-width: 100%;
height: auto;
}
h1:focus {
outline: none;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid #e50000;
}
.validation-message {
color: #e50000;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
.darker-border-checkbox.form-check-input {
border-color: #929292;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
/* ---- Shared UI kit (every page except the map) ----
The map page sets the visual language - translucent islands, 1rem radii, the green accent CTA, soft
two-layer shadows - and these classes carry it to the regular pages, so headings, cards, buttons and
form fields look the same everywhere instead of each page repeating its own Tailwind string.
Tailwind utilities are injected after this file (CDN script), so a utility next to one of these
classes (mt-6, w-full, text-sm...) still wins - use them for one-off spacing, not to restyle. */
:root {
--radius-card: 1.25rem;
--radius-control: 0.875rem;
--shadow-card: 0 1px 2px rgba(14, 21, 37, 0.04), 0 6px 20px rgba(14, 21, 37, 0.05);
--ring-focus: 0 0 0 3px rgb(var(--color-brand-600) / 0.18);
}
/* Page container: one horizontal rhythm for every page, width picked by content type. */
.page {
width: 100%;
max-width: 64rem;
margin: 0 auto;
padding: 1rem 1rem 1.5rem;
}
.page--narrow { max-width: 48rem; }
.page--medium { max-width: 56rem; }
.page--wide { max-width: 80rem; }
/* 404/403/500: centered message under the header. */
.page--status {
max-width: 40rem;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 4rem;
text-align: center;
}
@media (min-width: 640px) {
.page { padding: 1.5rem 1.5rem 2rem; }
.page--status { padding-top: 5rem; }
}
/* The footer follows the content directly, so phones and tablets keep only a small gap before it; from xl
(where the footer is one row anyway) the page gets more air at the bottom. */
@media (min-width: 1024px) {
.page { padding: 2rem 2rem 2rem; }
}
@media (min-width: 1280px) {
.page { padding-bottom: 5rem; }
}
/* Page heading block: optional back link, title, lead, meta line and actions on the right. */
.page-head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1rem 1.5rem;
margin-bottom: 2rem;
}
/* The head owns the gap to the content: whatever comes first after it (often one of several
loading/empty/error branches, each with its own mt-*) starts flush. !important because Tailwind's
utilities are injected after this file and would otherwise win. */
.page-head + * {
margin-top: 0 !important;
}
.page-head__text {
min-width: 0;
flex: 1 1 20rem;
}
.page-title {
margin: 0;
color: var(--text);
font-size: 1.875rem;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
text-wrap: balance;
}
@media (min-width: 640px) {
.page-title { font-size: 2.25rem; }
}
/* Detail pages: the title is an address, often long - one step smaller. */
.page-title--sm {
font-size: 1.5rem;
}
@media (min-width: 640px) {
.page-title--sm { font-size: 1.875rem; }
}
.page-lead {
max-width: 42rem;
margin: 0.75rem 0 0;
color: var(--text-muted);
font-size: 1.0625rem;
line-height: 1.6;
}
.page-meta {
margin: 0.5rem 0 0;
color: #8a93a6;
font-size: 0.8125rem;
}
/* "← Back to list" above a title. */
.back-link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
min-height: 2.25rem;
margin: 0 0 0.75rem -0.75rem;
padding: 0 0.75rem;
border-radius: 999px;
color: var(--text-muted);
font-size: 0.875rem;
font-weight: 600;
transition: background-color .15s ease, color .15s ease;
}
.back-link:hover {
background: var(--surface-muted);
color: rgb(var(--color-brand-700));
}
/* Cards */
.card {
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: var(--surface);
box-shadow: var(--shadow-card);
padding: 1.25rem;
}
@media (min-width: 640px) {
.card { padding: 1.5rem; }
.card--lg { padding: 2rem; }
}
.card--flush { padding: 0; overflow: hidden; }
/* Loading / "checking sign-in" placeholders. */
.card--quiet {
color: var(--text-muted);
}
.card--success {
border-color: rgb(var(--color-brand-200));
background: rgb(var(--color-brand-50));
}
.card--danger {
border-color: #f6cfd1;
background: #fff7f7;
}
.card__title {
margin: 0;
color: var(--text);
font-size: 1.125rem;
font-weight: 700;
line-height: 1.35;
}
/* Section headings and long-form copy (rules, legal, about). */
.section-title {
margin: 0;
color: var(--text);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
}
.section-body {
margin: 0.5rem 0 0;
color: var(--text-muted);
font-size: 0.9375rem;
line-height: 1.7;
}
/* Long-form document: one card, sections divided by hairlines. */
.doc {
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: var(--surface);
box-shadow: var(--shadow-card);
padding: 0.25rem 1.25rem;
}
.doc > section {
padding: 1.25rem 0;
}
.doc > section + section {
border-top: 1px solid var(--line);
}
@media (min-width: 640px) {
.doc { padding: 0.5rem 2rem; }
.doc > section { padding: 1.5rem 0; }
}
/* Highlighted section inside a .doc. */
.doc > .doc-callout {
margin: 0.5rem -0.5rem;
padding: 1.25rem;
border: 0;
border-radius: 1rem;
background: rgb(var(--color-brand-50));
}
.doc > .doc-callout + section,
.doc > section + .doc-callout {
border-top: 0;
}
@media (min-width: 640px) {
.doc > .doc-callout { margin: 0.5rem -1rem; padding: 1.5rem; }
}
/* List bullets in rules/guidelines - centered on the first line of .section-body text. */
.bullet {
flex-shrink: 0;
width: 0.375rem;
height: 0.375rem;
margin-top: 0.625rem;
border-radius: 999px;
}
.bullet--ok { background: rgb(var(--color-brand-500)); }
.bullet--bad { background: #e0313b; }
/* Small square icon badge used by feature cards and empty states. */
.icon-tile {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 0.875rem;
background: rgb(var(--color-brand-50));
color: rgb(var(--color-brand-700));
}
.step-num {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 999px;
background: rgb(var(--color-brand-600));
color: #fff;
font-size: 0.875rem;
font-weight: 700;
box-shadow: 0 0 0 4px rgb(var(--color-brand-100));
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
padding: 3rem 1.5rem;
border: 1px dashed var(--line-strong);
border-radius: var(--radius-card);
background: var(--surface);
text-align: center;
}
/* Buttons - same family as the map's .cta, sized for page content. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 2.75rem;
padding: 0 1.25rem;
border: 1px solid transparent;
border-radius: var(--radius-control);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.2;
text-align: center;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn:active:not(:disabled) {
transform: scale(0.98);
}
.btn:focus-visible {
outline: 2px solid rgb(var(--color-brand-600));
outline-offset: 2px;
}
.btn:disabled,
.btn[aria-disabled="true"] {
cursor: not-allowed;
opacity: 0.6;
}
.btn--primary {
background: rgb(var(--color-accent));
color: #fff;
box-shadow: 0 6px 16px rgb(var(--color-accent) / 0.25);
}
.btn--primary:hover:not(:disabled) {
background: rgb(var(--color-accent-dark));
}
.btn--secondary {
border-color: var(--line-strong);
background: var(--surface);
color: var(--text);
}
.btn--secondary:hover:not(:disabled) {
border-color: rgb(var(--color-brand-300));
color: rgb(var(--color-brand-700));
}
.btn--lg {
min-height: 3rem;
padding: 0 1.5rem;
font-size: 0.9375rem;
}
.actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 2rem;
}
/* Form fields */
.field-label {
display: block;
margin-bottom: 0.375rem;
color: var(--text);
font-size: 0.875rem;
font-weight: 600;
}
.input {
display: block;
width: 100%;
min-height: 2.75rem;
padding: 0.625rem 0.875rem;
border: 1px solid var(--line-strong);
border-radius: 0.75rem;
background: var(--surface);
color: var(--text);
font-size: 1rem;
line-height: 1.5;
transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder {
color: #8a93a6;
}
.input:hover {
border-color: #b7c2d6;
}
.input:focus {
border-color: rgb(var(--color-brand-500));
box-shadow: var(--ring-focus);
outline: none;
}
.field-help {
margin: 0.375rem 0 0;
color: #8a93a6;
font-size: 0.75rem;
line-height: 1.5;
}
.field-error {
display: block;
margin-top: 0.25rem;
color: #c4232d;
font-size: 0.875rem;
}
.alert {
padding: 0.75rem 1rem;
border: 1px solid;
border-radius: 0.875rem;
font-size: 0.875rem;
}
.alert--error {
border-color: #f6cfd1;
background: #fff4f4;
color: #a3121c;
}
/* Photo upload drop area (request form, feedback, news). Display (flex/hidden) comes from Tailwind. */
.dropzone {
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 2rem 1rem;
border: 2px dashed var(--line-strong);
border-radius: var(--radius-card);
background: var(--surface-muted);
text-align: center;
transition: border-color .15s ease, background-color .15s ease;
}
.dropzone:hover,
.dropzone:focus-within {
border-color: rgb(var(--color-brand-400));
background: rgb(var(--color-brand-50));
}
/* Regular pages: the header is the same set of islands as on the map, in a sticky band. The band has
the page color (not a blur - a backdrop-filter would trap AccountMenu's position:fixed phone sheet)
and fades out at its lower edge, so scrolled content slides under it instead of being cut off. */
.site-header--page {
position: sticky;
top: 0;
z-index: 50;
background: var(--surface-page);
}
.site-header--page::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 1rem;
background: linear-gradient(var(--surface-page), transparent);
pointer-events: none;
}
/* z-index lifts the islands (and the CTA's glow) above the band's fade-out edge. */
.site-header--page .topbar {
position: relative;
z-index: 1;
inset: auto;
max-width: 80rem;
margin: 0 auto;
padding: var(--map-gap);
}
.site-header--page .island {
box-shadow: 0 1px 2px rgba(14, 21, 37, 0.05), 0 4px 14px rgba(14, 21, 37, 0.06);
}
.site-header--page:has(.pointsearch__mobile-overlay) {
z-index: 75;
}
/* Footer: an island at the bottom of the page, in the same rhythm as the header. One row from md up (the
long copyright only fits from xl; below it shrinks to "© year"), two rows below md. See Footer.razor. */
.site-footer {
padding: 0 var(--map-gap) var(--map-gap);
}
.site-footer__wrap {
position: relative;
max-width: 80rem;
margin: 0 auto;
}
.site-footer__inner {
display: flex;
align-items: center;
gap: 0.5rem 1rem;
padding: 0.625rem 0.75rem 0.625rem 1.25rem;
border-radius: 1rem;
}
.site-footer__id {
display: flex;
flex: 1 1 auto;
align-items: baseline;
gap: 0.75rem;
min-width: 0;
}
.site-footer__brand {
display: none;
flex-shrink: 0;
color: rgb(var(--color-brand-900));
font-size: 0.875rem;
font-weight: 800;
letter-spacing: -0.025em;
white-space: nowrap;
}
.site-footer__copy {
min-width: 0;
overflow: hidden;
color: #94a3b8;
font-size: 0.75rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.site-footer__copy--full,
.site-footer__copy-brand,
.site-footer__label-long {
display: none;
}
.site-footer__nav {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 0.125rem;
}
.site-footer__link {
display: inline-flex;
flex-shrink: 0;
align-items: center;
gap: 0.25rem;
padding: 0.375rem 0.625rem;
border-radius: 0.375rem;
color: #64748b;
font-size: 0.75rem;
font-weight: 500;
white-space: nowrap;
transition: background-color .15s, color .15s;
}
.site-footer__link:hover,
.site-footer--docs-open .site-footer__docs-toggle {
background: var(--surface-muted);
color: rgb(var(--color-brand-700));
}
.site-footer__chevron {
width: 0.875rem;
height: 0.875rem;
transform: rotate(180deg);
transition: transform .15s;
}
.site-footer--docs-open .site-footer__chevron {
transform: none;
}
.site-footer__sep {
flex-shrink: 0;
width: 1px;
height: 1rem;
margin: 0 0.25rem;
background: var(--line);
}
/* Rules & documents: a drop-up anchored to the footer's right edge from md, a bottom sheet below md. */
.site-footer__backdrop {
position: fixed;
inset: 0;
z-index: 60;
background: rgba(14, 21, 37, 0.4);
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
}
.site-footer--docs-open .site-footer__backdrop {
opacity: 1;
pointer-events: auto;
}
.site-footer__panel {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 61;
max-height: 85dvh;
overflow-y: auto;
overscroll-behavior: contain;
padding: 0.5rem 1rem max(1rem, env(safe-area-inset-bottom));
border-radius: 1.25rem 1.25rem 0 0;
background: var(--surface);
box-shadow: 0 -12px 40px rgba(14, 21, 37, 0.18);
outline: none;
transform: translateY(100%);
visibility: hidden;
transition: transform .2s ease-in, visibility 0s linear .2s;
}
.site-footer--docs-open .site-footer__panel {
transform: none;
visibility: visible;
transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
.site-footer__panel-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.site-footer__panel-title {
font-size: 1.125rem;
font-weight: 700;
}
.site-footer__panel-close {
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
margin-right: -0.625rem;
border-radius: 0.75rem;
color: var(--text-muted);
}
.site-footer__panel-close:hover {
background: var(--surface-muted);
color: var(--text);
}
.site-footer__panel-close svg {
width: 1.25rem;
height: 1.25rem;
}
.site-footer__panel-label {
padding: 0.875rem 0 0.25rem;
color: #94a3b8;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.site-footer__panel-item {
display: flex;
align-items: center;
width: 100%;
min-height: 3rem;
border-bottom: 1px solid var(--line);
color: var(--text);
text-align: left;
}
.site-footer__panel li:last-child .site-footer__panel-item {
border-bottom: 0;
}
.site-footer__panel-note {
margin-top: 0.75rem;
padding-top: 0.625rem;
border-top: 1px solid var(--line);
color: #94a3b8;
font-size: 0.75rem;
}
@media (max-width: 767.98px) {
.site-footer__inner {
flex-wrap: wrap;
gap: 0.125rem 0.5rem;
padding: 0.375rem 0.5rem 0.5rem;
}
/* The strip scrolls sideways; the fading right edge hints that there's more. */
.site-footer__nav {
order: -1;
flex: 1 1 100%;
min-width: 0;
overflow-x: auto;
padding-bottom: 0.25rem;
border-bottom: 1px solid var(--line);
scrollbar-width: none;
-webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.site-footer__nav::-webkit-scrollbar {
display: none;
}
.site-footer__link {
min-height: 2.75rem;
padding: 0 0.75rem;
font-size: 0.875rem;
}
.site-footer__docs-toggle {
order: -1;
color: var(--text);
font-weight: 600;
}
.site-footer__sep {
display: none;
}
.site-footer__id {
padding-left: 0.75rem;
}
.site-footer__copy-brand {
display: inline;
}
.site-footer__inner > ul a {
padding: 0.75rem;
}
}
@media (min-width: 768px) {
.site-footer__backdrop {
background: transparent;
}
.site-footer__panel {
position: absolute;
left: auto;
bottom: calc(100% + 0.75rem);
width: min(26rem, calc(100vw - 2rem));
max-height: none;
padding: 0.25rem 1rem 1rem;
border: 1px solid var(--line);
border-radius: 0.75rem;
box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.1);
opacity: 0;
transform: translateY(6px);
transition: opacity .12s ease-in, transform .12s ease-in, visibility 0s linear .12s;
}
.site-footer--docs-open .site-footer__panel {
opacity: 1;
transition: opacity .18s ease-out, transform .2s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
.site-footer__panel-head {
display: none;
}
.site-footer__panel-cols {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 1.5rem;
}
.site-footer__panel-label {
padding-top: 0.75rem;
}
.site-footer__panel-item {
min-height: 0;
margin: 0 -0.5rem;
padding: 0.375rem 0.5rem;
border: 0;
border-radius: 0.375rem;
color: #475569;
font-size: 0.875rem;
}
.site-footer__panel-item:hover {
background: var(--surface-muted);
color: rgb(var(--color-brand-700));
}
}
@media (min-width: 1024px) {
.site-footer__brand {
display: block;
}
}
@media (min-width: 1280px) {
.site-footer__inner {
gap: 1.5rem;
padding: 0.75rem 1.25rem;
}
.site-footer__id {
flex: 0 1 auto;
}
.site-footer__copy--full,
.site-footer__label-long {
display: block;
}
.site-footer__copy--short,
.site-footer__label-short,
.site-footer__panel-note {
display: none;
}
.site-footer__inner > ul {
margin-left: auto;
}
.site-footer__nav {
order: 1;
}
}
/* ---- App shell (Home page) ----
The map page is a fixed-viewport app shell, not a scrolling document: the seasonal banner (if any) takes
its natural height and the map stage fills whatever's left, so the page never scrolls. The header and
every other control float over the map inside that stage. See MainLayout.razor. */
.app-shell {
/* dvh accounts for the mobile browser address bar; vh is a fallback for browsers without it -
invalid declarations are dropped entirely, so the vh rule stays in effect where dvh is unsupported. */
height: 100vh;
height: 100dvh;
overflow: hidden;
}
.map-stage {
position: relative;
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
/* ---- Points map (Home page) ---- */
.home-map {
position: relative;
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.map-shell {
position: relative;
width: 100%;
height: 100%;
min-height: 12rem;
overscroll-behavior: contain;
background: #e9edf2;
z-index: 0;
}
.map-shell .leaflet-container {
width: 100%;
height: 100%;
font-family: inherit;
background: #e9edf2;
}
.point-marker__wrap {
position: relative;
width: 28px;
height: 40px;
}
.point-marker__pin {
position: relative;
display: block;
filter: drop-shadow(0 1px 4px rgba(14, 21, 37, 0.38));
}
/* Count of reports folded into one marker at identical coordinates (see map.js buildMarkerIcon). Sits on
the pin's right shoulder rather than its crown, which is where the seasonal hats go. Neutral dark fill,
not a severity color, so it never reads as a second rating. */
.point-marker__stack {
position: absolute;
top: 4px;
left: 19px;
min-width: 17px;
height: 17px;
padding: 0 4px;
border: 2px solid #fff;
border-radius: 999px;
background: #0e1525;
color: #fff;
font-size: 0.625rem;
font-weight: 800;
line-height: 13px;
text-align: center;
box-shadow: 0 1px 3px rgba(14, 21, 37, 0.4);
pointer-events: none;
}
/* Ground-ring pulse shared with the search marker below (see marker-pulse-ring) - present in the markup
for every point marker but only animated for the selected one (rule below), so an unselected marker
sits still. */
.point-marker__pulse {
position: absolute;
left: 50%;
bottom: -2px;
width: 12px;
height: 12px;
margin-left: -6px;
border-radius: 999px;
opacity: 0;
}
.point-marker--selected .point-marker__pulse {
opacity: 0.6;
animation: marker-pulse-ring 1.8s ease-out infinite;
}
/* Animated/transformed on the pin SVG itself, not on .point-marker (the outer div) - Leaflet positions
markers via an inline `transform: translate3d(...)` on that outer div, and a CSS animation targeting
the same property there would override the marker's position instead of just scaling it in place. */
.point-marker--selected .point-marker__pin {
transform-origin: 50% 100%;
animation: point-marker-pulse 1.6s ease-in-out infinite;
}
@keyframes point-marker-pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.12);
}
}
@keyframes marker-pulse-ring {
0% {
transform: scale(1);
opacity: 0.8;
}
100% {
transform: scale(3.4);
opacity: 0;
}
}
/* Address label shown on marker hover (see map.js addMapItems/bindTooltip) - restyled from Leaflet's
default white/black tooltip to match the app palette. Selector is qualified with .leaflet-tooltip
(not just .point-marker__tooltip) so it outranks leaflet.css's own same-specificity `white-space:
nowrap` rule regardless of which stylesheet's lands later in - leaflet.css is injected
dynamically on first map use (see loadLeafletSource), so it isn't reliably first. */
.leaflet-tooltip.point-marker__tooltip {
background: var(--surface-strong);
color: var(--text);
border: 1px solid var(--line-strong);
border-radius: 10px;
box-shadow: var(--shadow-soft);
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
line-height: 1.35;
min-width: 18rem;
max-width: 26rem;
white-space: normal;
overflow-wrap: break-word;
opacity: 1;
}
.leaflet-tooltip.point-marker__tooltip::before {
border-top-color: var(--surface-strong);
filter: drop-shadow(0 1px 0 var(--line-strong));
}
/* Address search highlight - see js/map.js setSearchMarker/buildSearchHighlightIcon. Two staggered
rings rippling out from the searched spot, no pin/dot shape and no severity color so it never reads
as a rated point - just "look here". The whole thing fades itself out at the end of its fixed
lifetime (SEARCH_HIGHLIGHT_DURATION_MS in map.js, matched here) and gets removed from the map, rather
than sitting there permanently and cluttering it after a visitor has already looked. */
.search-highlight {
position: relative;
width: 64px;
height: 64px;
animation: search-highlight-fade 3.2s ease-in forwards;
}
.search-highlight__ring {
position: absolute;
left: 50%;
top: 50%;
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
border-radius: 999px;
border: 2px solid var(--info);
animation: search-highlight-ring 1.6s ease-out infinite;
}
.search-highlight__ring--delay {
animation-delay: 0.8s;
}
.search-highlight__dot {
position: absolute;
left: 50%;
top: 50%;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
border-radius: 999px;
background: var(--info);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
}
@keyframes search-highlight-ring {
0% {
transform: scale(0.4);
opacity: 0.9;
}
100% {
transform: scale(3.2);
opacity: 0;
}
}
@keyframes search-highlight-fade {
0%, 65% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.cluster-marker__bubble {
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
border-radius: 999px;
color: #fff;
font-size: 0.78rem;
font-weight: 800;
line-height: 1;
box-shadow: 0 2px 10px rgba(14, 21, 37, 0.34);
}
/* ---- Map page floating UI ("Signal" design) ----
Translucent "glass" islands over the full-bleed map: header (Header.razor floating mode), severity
filter chips, the reports counter/first-visit hint/phone submit button at the bottom, Leaflet's own
controls bottom-right and the point panel. Spacing is one shared --map-gap so everything lines up. */
.island {
background: var(--glass);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
box-shadow: 0 1px 2px rgba(14, 21, 37, 0.06), 0 8px 24px rgba(14, 21, 37, 0.10);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.island {
background: rgba(255, 255, 255, 0.97);
}
}
/* Header in floating mode is a zero-height box so the gaps between its islands never swallow map drags. */
.site-header--floating {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 0;
z-index: 50;
}
.topbar {
position: absolute;
top: var(--map-gap);
left: var(--map-gap);
right: var(--map-gap);
display: flex;
align-items: flex-start;
gap: 0.5rem;
pointer-events: none;
}
.topbar > * {
pointer-events: auto;
}
.searchbox {
position: relative;
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 0.25rem;
height: 3.25rem;
padding: 0 0.375rem;
border-radius: 1rem;
transition: border-color .15s ease, box-shadow .15s ease;
}
.searchbox:focus-within {
border-color: rgb(var(--color-brand-300));
box-shadow: 0 0 0 3px rgb(var(--color-brand-600) / 0.18), 0 8px 24px rgba(14, 21, 37, 0.10);
}
.searchbox__logo {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 0.5rem;
border-radius: 0.75rem;
color: var(--text);
font-weight: 800;
letter-spacing: -0.01em;
}
.searchbox__brand {
display: none;
padding: 0.25rem 0.75rem 0.25rem 0.25rem;
border-right: 1px solid var(--line);
white-space: nowrap;
}
/* Phones: looks like the input, opens PointSearch's fullscreen overlay. Display comes from Tailwind. */
.searchbox__trigger {
flex: 1 1 auto;
min-width: 0;
align-items: center;
gap: 0.5rem;
height: 2.75rem;
padding: 0 0.5rem;
border-radius: 0.75rem;
color: var(--text-muted);
text-align: left;
}
.searchbox__field {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0 0.25rem 0 0.5rem;
color: var(--text-muted);
}
.searchbox__field input {
flex: 1 1 auto;
min-width: 0;
height: 2.75rem;
border: 0;
background: none;
outline: none;
color: var(--text);
font-size: 1rem;
}
.searchbox__field input::placeholder {
color: var(--text-muted);
}
.searchbox .pointsearch__panel {
top: calc(100% + 0.75rem);
}
/* Primary action - header island from md up, bottom dock on phones. Display comes from Tailwind. */
.cta {
align-items: center;
justify-content: center;
gap: 0.5rem;
flex-shrink: 0;
height: 3.25rem;
padding: 0 1.25rem;
border-radius: 1rem;
background: rgb(var(--color-accent));
color: #fff;
font-weight: 700;
white-space: nowrap;
box-shadow: 0 8px 20px rgb(var(--color-accent) / 0.35);
transition: background-color .15s ease, transform .15s ease;
}
.cta:hover {
background: rgb(var(--color-accent-dark));
}
.cta:active {
transform: scale(0.98);
}
.topbar .cta {
margin-left: auto;
}
/* Severity filter chips - also the color legend. Right under the header islands. */
.map-filter {
position: absolute;
z-index: 20;
top: calc(var(--map-gap) + 3.25rem + 0.25rem);
left: 0;
right: 0;
display: flex;
gap: 0.5rem;
padding: 0.25rem var(--map-gap) 0.5rem;
overflow-x: auto;
scrollbar-width: none;
pointer-events: none;
}
.map-filter::-webkit-scrollbar {
display: none;
}
.map-chip {
flex: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
height: 2.5rem;
padding: 0 0.875rem 0 0.75rem;
border-radius: 999px;
color: var(--text);
font-size: 0.875rem;
font-weight: 600;
pointer-events: auto;
transition: opacity .15s ease, background-color .15s ease;
}
.map-chip:hover {
background: rgba(255, 255, 255, 0.97);
}
.map-chip__dot {
width: 0.75rem;
height: 0.75rem;
border-radius: 999px;
background: var(--chip-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip-color) 22%, transparent);
}
/* Deselected filter: dimmed rather than removed, so the full set of severities (and their colors)
stays visible as a reference while browsing a narrowed-down map. */
.map-chip[aria-pressed="false"] {
opacity: 0.6;
}
.map-chip[aria-pressed="false"] .map-chip__dot {
background: transparent;
box-shadow: inset 0 0 0 2px var(--chip-color);
}
.map-status {
position: absolute;
top: calc(var(--map-gap) + 3.25rem + 3.5rem);
left: 50%;
z-index: 21;
max-width: min(28rem, calc(100% - 1.5rem));
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 0.875rem;
border-radius: 999px;
border: 1px solid var(--glass-border);
background: var(--glass);
box-shadow: var(--shadow-small);
color: var(--text);
font-size: 0.8125rem;
font-weight: 600;
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
}
/* Most viewport fetches finish in a few hundred ms, so the hint stays invisible until a load is
actually slow: the element is re-created on every new "loading" state, which restarts the delay. */
.map-status--loading {
gap: 0.45rem;
padding: 0.3rem 0.7rem;
color: var(--text-muted);
font-size: 0.75rem;
font-weight: 500;
pointer-events: none;
animation: map-status-reveal .25s ease .6s both;
}
.map-status__spinner {
width: 0.75rem;
height: 0.75rem;
border-radius: 999px;
border: 2px solid currentColor;
border-right-color: transparent;
animation: map-locate-spin .8s linear infinite;
}
@keyframes map-status-reveal {
from { opacity: 0; }
to { opacity: 1; }
}
.map-status--error {
color: #9f2f24;
}
.map-status button {
flex: 0 0 auto;
border-radius: 999px;
background: var(--brand);
padding: 0.25rem 0.75rem;
color: #fff;
font-size: 0.75rem;
font-weight: 700;
}
/* Bottom-left stack: "in this area" counter and (phones) the submit button. */
.map-bottom {
position: absolute;
z-index: 20;
left: var(--map-gap);
right: var(--map-gap);
bottom: calc(var(--map-gap) + env(safe-area-inset-bottom));
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.625rem;
pointer-events: none;
}
.map-bottom:focus {
outline: none;
}
.map-bottom > * {
pointer-events: auto;
}
.map-count {
display: inline-flex;
align-items: center;
gap: 0.625rem;
margin: 0;
padding: 0.5rem 0.875rem 0.5rem 0.75rem;
border-radius: 999px;
color: var(--text);
font-size: 0.875rem;
font-weight: 600;
}
.map-count__pulse {
width: 0.625rem;
height: 0.625rem;
border-radius: 999px;
background: var(--brand);
animation: map-count-pulse 2s infinite;
}
@keyframes map-count-pulse {
0% { box-shadow: 0 0 0 0 rgb(var(--color-brand-600) / 0.5); }
70% { box-shadow: 0 0 0 10px rgb(var(--color-brand-600) / 0); }
100% { box-shadow: 0 0 0 0 rgb(var(--color-brand-600) / 0); }
}
.map-dock-cta {
width: 100%;
height: 3.5rem;
font-size: 1rem;
}
/* Leaflet's bottom-right stack (attribution, zoom, "my location" - see js/map.js addMapControls) as a
glass island. On phones it sits above the full-width submit button and pinch-zoom replaces +/-. */
.home-map .leaflet-bottom {
bottom: calc(3.5rem + var(--map-gap) + env(safe-area-inset-bottom));
}
.home-map .leaflet-right .leaflet-control {
margin-right: var(--map-gap);
}
.home-map .leaflet-right .leaflet-bar {
margin-bottom: 0.5rem;
}
.home-map .leaflet-control-zoom {
display: none;
}
/* .leaflet-control-container is only there for specificity: leaflet.css is loaded after this file (by
js/map.js) and its equally specific ".leaflet-touch .leaflet-bar ..." rules would otherwise shrink the
+/- buttons to 30px with a 2px grey border, leaving them narrower than the "my location" button. */
.home-map .leaflet-control-container .leaflet-bar {
overflow: hidden;
border: 1px solid var(--glass-border);
border-radius: 0.875rem;
background: var(--glass);
box-shadow: 0 1px 2px rgba(14, 21, 37, 0.06), 0 8px 24px rgba(14, 21, 37, 0.10);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.home-map .leaflet-control-container .leaflet-bar a,
.map-locate__btn {
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border: 0;
border-bottom: 1px solid var(--line);
background: transparent;
color: var(--text);
font: 600 1.25rem/1 inherit;
}
.home-map .leaflet-control-container .leaflet-bar a:last-child,
.map-locate__btn {
border-bottom: 0;
}
.home-map .leaflet-control-container .leaflet-bar a:hover,
.map-locate__btn:hover {
background: rgba(14, 21, 37, 0.06);
color: var(--text);
}
.map-locate__btn--busy svg {
animation: map-locate-spin 1s linear infinite;
}
.map-locate__btn--failed {
animation: map-locate-shake .45s ease;
}
@keyframes map-locate-spin {
to { transform: rotate(360deg); }
}
@keyframes map-locate-shake {
25% { transform: translateX(-3px); }
75% { transform: translateX(3px); }
}
.home-map .leaflet-control-attribution {
margin: 0 !important;
border-radius: 0.5rem 0 0 0;
background: rgba(255, 255, 255, 0.7);
color: var(--text-muted);
font-size: 0.625rem;
}
@media (min-width: 768px) {
:root {
--map-gap: 1rem;
}
.searchbox {
flex: 0 1 34rem;
}
.map-filter {
top: calc(var(--map-gap) + 3.25rem + 0.375rem);
}
.home-map .leaflet-bottom {
bottom: 0;
}
.home-map .leaflet-control-zoom {
display: block;
}
/* Keep the controls clear of the side panel while a point is open. */
.home-map--panel-open .leaflet-bottom.leaflet-right {
right: calc(26rem + var(--map-gap));
}
}
@media (min-width: 1024px) {
.searchbox__brand {
display: block;
}
}
/* ---- Point details panel: bottom sheet on phones, floating side panel from md (768px) up ----
Deliberately has no backdrop - the map stays fully interactive (pan/zoom/click other markers)
while the panel is open instead of being dimmed and blocked behind a modal overlay.
Positioned inside the map area (Home's .home-map), not the viewport, so it always starts below the
seasonal banner. Below md the sheet covers the floating submit button at the bottom of the map; from md
up that button lives in the header islands instead, and the side panel sits under the filter chips.
The mobile sheet opens to a "peek" height by default - tall enough to read the essentials but short
enough to leave a strip of map (and any other nearby markers) visible/tappable underneath. Tapping the
handle expands it to read the full description/gallery/translate panel. Both the open/close and the
peek/expand transitions are animated (slide + height), never an abrupt pop. */
.point-panel {
position: absolute;
z-index: 46;
left: 0;
right: 0;
bottom: 0;
height: min(50vh, 34rem);
height: min(50dvh, 34rem);
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #e3e8f2;
border-radius: 1.5rem 1.5rem 0 0;
box-shadow: 0 -14px 42px rgba(14, 21, 37, 0.18);
overflow: hidden;
animation: point-panel-enter-mobile 280ms cubic-bezier(0.32, 0.72, 0, 1);
transition: height 280ms cubic-bezier(0.32, 0.72, 0, 1);
}
.point-panel--expanded {
height: min(88vh, 54rem);
height: min(88dvh, 54rem);
/* Never taller than the map area minus the search island, which stays usable above the sheet. */
max-height: calc(100% - var(--map-gap) - 3.75rem);
}
/* Applied only while the handle is being dragged (see PointDetailsPanel.razor.js) - the JS drives
height/transform directly on every pointermove for immediate visual feedback, so the CSS transition
above would otherwise fight it (each inline update chasing a moving target instead of tracking the
finger 1:1). Removed again on pointerup, letting the transition take back over for the release snap. */
.point-panel--dragging {
transition: none;
}
/* Re-created by the interactive circuit over the identical prerendered panel (see PointDetailsPanel's
_restored) - it's already on screen, so sliding it in again would read as a second open. Two classes
so it also beats the desktop .point-panel animation below; :not() leaves the exit animation alone. */
.point-panel--restored:not(.point-panel--closing) {
animation: none;
}
/* Kept mounted (see PointDetailsPanel's HandleClosedAsync) for exactly as long as this animation runs,
so the sheet slides away instead of vanishing the instant the parent nulls out PointId. */
.point-panel--closing {
animation: point-panel-exit-mobile 220ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
pointer-events: none;
}
@keyframes point-panel-enter-mobile {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
@keyframes point-panel-exit-mobile {
from { transform: translateY(0); }
to { transform: translateY(100%); }
}
/* Floats over the card's cover photo (the panel's first row), so it carries its own contrast instead of
relying on a white strip above the photo. */
.point-panel__handle-btn {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 5;
display: flex;
justify-content: center;
align-items: center;
min-height: 2.75rem;
padding: 0.55rem 3.5rem 0.4rem;
border: 0;
background: none;
cursor: pointer;
/* Without this, a vertical drag on the handle also triggers the browser's own scroll/pull-to-refresh
gesture, fighting the JS-driven resize below it. */
touch-action: none;
}
.point-panel__handle-btn:focus-visible {
outline: 2px solid #fff;
outline-offset: -4px;
border-radius: 999px;
}
.point-panel__handle {
width: 2.5rem;
height: 0.3rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 0 0 1px rgba(14, 21, 37, 0.12), 0 1px 3px rgba(14, 21, 37, 0.3);
transition: background-color .15s ease;
}
.point-panel__handle-btn:hover .point-panel__handle,
.point-panel__handle-btn:focus-visible .point-panel__handle {
background: #fff;
}
/* Dark glass: sits on the cover photo (or the map placeholder) of every card. */
.point-panel__close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
z-index: 6;
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border: 0;
border-radius: 999px;
background: rgba(14, 21, 37, 0.45);
color: #fff;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
transition: background-color .15s ease;
}
.point-panel__close:hover {
background: rgba(14, 21, 37, 0.65);
}
.point-panel__close:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
/* No padding of its own: the card's cover is full-bleed and its action bar sticks to this box's bottom. */
.point-panel__content {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
scrollbar-width: thin;
}
.point-panel__state {
padding: 4rem 1.4rem 1.5rem;
}
.point-panel__loading {
margin: 0;
color: var(--text-muted);
}
/* ---- Point card (PointCard.razor: the map's point panel and RequestForm's preview) ----
"Cover" layout: a full-width photo carousel (or a map-like placeholder when there are no photos) with the
severity badge on it, then address, facts, what the level means, the story, other reports at the
address, and the like/share bar pinned to the bottom of whatever scrolls the card. Severity colours come
from --sev-* and are never re-tinted by seasonal palettes. */
.point-card {
display: flex;
flex-direction: column;
flex: 1 0 auto;
min-width: 0;
color: var(--text);
overflow-wrap: anywhere;
}
.point-card button:focus-visible,
.point-card a:focus-visible,
.point-card select:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
.point-card .severity-badge--low { --sev-color: var(--sev-low); }
.point-card .severity-badge--medium { --sev-color: var(--sev-medium); }
.point-card .severity-badge--high { --sev-color: var(--sev-high); }
.point-card .severity-badge--critical { --sev-color: var(--sev-critical); }
.point-card .severity-badge {
gap: 0.4rem;
font-weight: 700;
white-space: nowrap;
}
.point-card .severity-badge::before {
content: "";
width: 0.45rem;
height: 0.45rem;
flex-shrink: 0;
border-radius: 50%;
background: var(--sev-color, var(--line-strong));
}
.point-cover {
position: relative;
flex: none;
height: 12.5rem;
overflow: hidden;
background: var(--surface-muted);
}
/* Soft top/bottom shading so the badge, close button and counter stay readable on any photo. */
.point-cover::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(14, 21, 37, 0.28), transparent 32%, transparent 68%, rgba(14, 21, 37, 0.32));
}
.point-cover__track {
display: flex;
height: 100%;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.point-cover__track::-webkit-scrollbar {
display: none;
}
.point-cover__slide {
flex: 0 0 100%;
height: 100%;
padding: 0;
border: 0;
background: none;
cursor: zoom-in;
scroll-snap-align: start;
}
.point-cover__slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.point-cover__badge {
position: absolute;
z-index: 2;
top: 0.85rem;
left: 0.85rem;
padding: 0.3rem 0.65rem;
background: rgba(255, 255, 255, 0.94);
color: var(--text);
box-shadow: var(--shadow-small);
}
.point-cover__badge.is-empty {
color: #8a93a6;
font-style: italic;
}
.point-cover__count,
.point-cover__note {
position: absolute;
z-index: 2;
right: 0.85rem;
bottom: 0.85rem;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.65rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
line-height: 1.2;
}
.point-cover__count {
background: rgba(14, 21, 37, 0.6);
color: #fff;
font-variant-numeric: tabular-nums;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.point-cover__count svg {
width: 0.95rem;
height: 0.95rem;
}
.point-cover__note {
background: rgba(255, 255, 255, 0.92);
color: var(--text-muted);
font-weight: 600;
}
.point-cover__dots {
position: absolute;
z-index: 2;
left: 50%;
bottom: 1rem;
display: flex;
gap: 5px;
transform: translateX(-50%);
}
.point-cover__dots i {
width: 6px;
height: 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.55);
transition: width .2s ease, background-color .2s ease;
}
.point-cover__dots i.is-active {
width: 16px;
background: #fff;
}
.point-cover__nav {
position: absolute;
z-index: 3;
top: 50%;
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: var(--text);
box-shadow: var(--shadow-small);
cursor: pointer;
opacity: 0;
transform: translateY(-50%);
transition: opacity .15s ease;
}
.point-cover__nav svg {
width: 1.25rem;
height: 1.25rem;
}
.point-cover__nav--prev { left: 0.6rem; }
.point-cover__nav--next { right: 0.6rem; }
.point-cover:hover .point-cover__nav,
.point-cover__nav:focus-visible {
opacity: 1;
}
/* Touch screens swipe instead; the arrows would only cover the photo. */
@media (hover: none) {
.point-cover__nav {
display: none;
}
}
/* No photos: a map-like tile with the point's marker, so the layout (and the badge on it) stays the same. */
.point-cover__map {
--sev-color: var(--line-strong);
position: relative;
display: grid;
place-items: center;
height: 100%;
overflow: hidden;
background: #f1efe9;
}
.point-cover__map::before {
content: "";
position: absolute;
inset: -30%;
background:
linear-gradient(100deg, transparent 47%, #b9d6ea 47% 55%, transparent 55%),
repeating-linear-gradient(90deg, transparent 0 46px, #fff 46px 52px),
repeating-linear-gradient(0deg, transparent 0 36px, #fff 36px 42px),
#e6e3dc;
transform: rotate(-8deg);
}
.point-cover__map svg {
position: relative;
width: 2.25rem;
margin-bottom: 1.25rem;
fill: var(--sev-color);
filter: drop-shadow(0 3px 4px rgba(14, 21, 37, 0.25));
}
.point-cover__map--low { --sev-color: var(--sev-low); }
.point-cover__map--medium { --sev-color: var(--sev-medium); }
.point-cover__map--high { --sev-color: var(--sev-high); }
.point-cover__map--critical { --sev-color: var(--sev-critical); }
.point-card__body {
flex: 1 0 auto;
padding: 1.1rem 1.25rem 1.25rem;
}
.point-card__address {
margin: 0;
font-size: 1.5rem;
font-weight: 750;
line-height: 1.2;
letter-spacing: -0.03em;
}
.point-card__facts {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 1rem;
margin-top: 0.7rem;
color: var(--text-muted);
font-size: 0.8125rem;
}
.point-card__facts > span {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.point-card__facts svg {
width: 1rem;
height: 1rem;
flex-shrink: 0;
}
.point-card__hint {
--sev-color: var(--line-strong);
display: flex;
gap: 0.6rem;
margin: 1rem 0 0;
padding: 0.7rem 0.85rem;
border-radius: 0.9rem;
background: color-mix(in srgb, var(--sev-color) 9%, #fff);
color: #334155;
font-size: 0.8125rem;
line-height: 1.45;
}
.point-card__hint strong {
color: var(--text);
}
.point-card__hint-dot {
flex-shrink: 0;
width: 0.55rem;
height: 0.55rem;
margin-top: 0.3rem;
border-radius: 50%;
background: var(--sev-color);
}
.point-card__hint--low { --sev-color: var(--sev-low); }
.point-card__hint--medium { --sev-color: var(--sev-medium); }
.point-card__hint--high { --sev-color: var(--sev-high); }
.point-card__hint--critical { --sev-color: var(--sev-critical); }
.point-card__story,
.point-address-siblings {
margin-top: 1.1rem;
padding-top: 1.1rem;
border-top: 1px solid var(--line);
}
.point-card__label {
margin: 0 0 0.6rem;
color: #8a93a6;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.point-card__description {
margin: 0;
color: #334155;
font-size: 0.9375rem;
line-height: 1.7;
white-space: pre-wrap;
}
.point-card__description.is-clamped {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
}
.point-card__address.is-empty,
.point-card__description.is-empty {
color: #8a93a6;
font-style: italic;
font-weight: 500;
}
.point-card__more {
display: inline-flex;
align-items: center;
gap: 0.25rem;
min-height: 2.5rem;
margin-top: 0.2rem;
padding: 0;
border: 0;
background: none;
color: var(--accent-dark);
font-size: 0.875rem;
font-weight: 700;
cursor: pointer;
}
.point-card__more:hover {
color: var(--brand-dark);
}
.point-card__more svg {
width: 1rem;
height: 1rem;
}
/* Other reports at the address: a horizontal strip bleeding to the card edges. */
.point-address-siblings__list {
display: flex;
gap: 0.6rem;
margin: 0 -1.25rem;
padding: 0 1.25rem 0.25rem;
overflow-x: auto;
list-style: none;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.point-address-siblings__list li {
flex: 0 0 13rem;
scroll-snap-align: start;
}
.point-address-siblings__item {
display: flex;
align-items: center;
gap: 0.65rem;
height: 100%;
padding: 0.55rem;
border: 1px solid var(--line);
border-radius: 1rem;
color: var(--text);
text-decoration: none;
transition: border-color .15s ease, background-color .15s ease;
}
.point-address-siblings__item:hover {
border-color: var(--line-strong);
background: var(--surface-page);
}
.point-address-siblings__thumb {
flex-shrink: 0;
width: 3.25rem;
height: 3.25rem;
border-radius: 0.7rem;
}
.point-address-siblings__thumb svg {
width: 1.1rem;
margin-bottom: 0.5rem;
}
.point-address-siblings__meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.3rem;
min-width: 0;
color: var(--text-muted);
font-size: 0.75rem;
}
.point-address-siblings__meta .severity-badge {
padding: 0.2rem 0.5rem;
font-size: 0.6875rem;
}
/* Pinned to the bottom of the scrolling panel (or sheet), so the actions never scroll out of reach. */
.point-card__actions {
position: sticky;
bottom: 0;
z-index: 4;
display: flex;
gap: 0.5rem;
padding: 0.75rem 1.25rem max(0.75rem, env(safe-area-inset-bottom));
border-top: 1px solid var(--line);
background: rgba(255, 255, 255, 0.94);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.like-button, .copy-link-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 3rem;
padding: 0 1rem;
border: 1px solid var(--line-strong);
border-radius: 0.875rem;
background: var(--surface);
color: var(--text);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.like-button {
flex: 1 1 auto;
}
.like-button svg, .copy-link-button svg {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
}
.like-button:hover:not(:disabled), .copy-link-button:hover:not(:disabled) {
background: var(--surface-page);
}
.like-button:active:not(:disabled), .copy-link-button:active:not(:disabled) {
transform: scale(0.98);
}
.like-button__count {
padding-left: 0.55rem;
border-left: 1px solid color-mix(in srgb, currentColor 25%, transparent);
font-variant-numeric: tabular-nums;
}
.like-button--active,
.like-button--active:hover:not(:disabled) {
border-color: #f6b5aa;
background: #ffe1dc;
color: #a7382d;
}
.like-button--active svg {
animation: like-pop .3s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes like-pop {
50% { transform: scale(1.25); }
}
.copy-link-button--copied {
border-color: #bce0cd;
background: #dcefe6;
color: #27634b;
}
/* In the request preview the actions are visible (so the layout matches the map) but inert. A busy like
toggle on the map keeps full opacity - it only blocks double taps. */
.point-card--preview .like-button:disabled,
.point-card--preview .copy-link-button:disabled {
opacity: 0.55;
cursor: default;
}
/* Translate (TranslatePanel.razor; only used inside the point card): one compact row under "What happened". */
.translate-panel {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
margin: 0 0 0.85rem;
padding: 0.5rem 0.5rem 0.5rem 0.75rem;
border-radius: 0.9rem;
background: var(--surface-muted);
}
.translate-panel__heading {
display: flex;
flex: 1 1 9rem;
align-items: center;
gap: 0.55rem;
min-width: 0;
}
.translate-panel__heading strong {
display: block;
font-size: 0.8125rem;
font-weight: 700;
}
.translate-panel__icon {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
color: var(--accent);
}
.translate-panel__status {
display: block;
color: var(--text-muted);
font-size: 0.75rem;
}
.translate-panel__controls {
display: flex;
flex: 1 1 12rem;
gap: 0.4rem;
min-width: 0;
}
.translate-panel__select {
flex: 1 1 6rem;
width: 0;
min-width: 0;
min-height: 2.5rem;
padding: 0 0.6rem;
border: 1px solid var(--line-strong);
border-radius: 0.7rem;
background: var(--surface);
color: var(--text);
font-size: 0.8125rem;
}
.translate-button {
flex: 0 0 auto;
min-height: 2.5rem;
padding: 0 0.9rem;
border: 0;
border-radius: 0.7rem;
background: var(--brand-soft);
color: var(--brand-dark);
font-size: 0.8125rem;
font-weight: 700;
cursor: pointer;
transition: background-color .15s ease;
}
.translate-button:hover:not(:disabled) {
background: #c8efdb;
}
.translate-button:disabled, .translate-panel__select:disabled {
opacity: 0.65;
cursor: wait;
}
.translate-panel__note, .translate-panel__error {
flex-basis: 100%;
margin: 0;
font-size: 0.75rem;
line-height: 1.5;
}
.translate-panel__note {
color: var(--text-muted);
}
.translate-panel__error {
color: #a7382d;
}
@media (min-width: 768px) {
.point-panel .point-cover {
height: 15rem;
}
}
@media (prefers-reduced-motion: reduce) {
.like-button--active svg {
animation: none;
}
}
.linkified-link {
color: var(--brand);
font-weight: 600;
text-decoration: underline;
text-decoration-color: var(--brand-soft);
text-underline-offset: 2px;
word-break: break-word;
}
.linkified-link:hover,
.linkified-link:focus-visible {
color: var(--brand-dark);
text-decoration-color: currentColor;
}
.severity-badge {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.65rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
}
.severity-badge--low { background: #e3f6ec; color: #0f6b46; }
.severity-badge--medium { background: #fdf3d6; color: #8a5a00; }
.severity-badge--high { background: #fde8dc; color: #a63c0a; }
.severity-badge--critical { background: #fde2e3; color: #a3121c; }
.status-badge {
display: inline-flex;
align-items: center;
align-self: flex-start;
padding: 0.3rem 0.75rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
}
.status-badge--created { background: #dcebf3; color: #236174; }
.status-badge--approved { background: #dcefe6; color: #27634b; }
.status-badge--rejected { background: #ffe1dc; color: #a7382d; }
.status-badge--new { background: #dcebf3; color: #236174; }
.status-badge--reviewed { background: #dcefe6; color: #27634b; }
.status-badge--visible { background: #dcefe6; color: #27634b; }
.status-badge--hidden { background: #eef1f7; color: #5a6478; }
.feedback-category-badge {
display: inline-flex;
align-items: center;
align-self: flex-start;
padding: 0.3rem 0.75rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
}
.feedback-category-badge--bug { background: #ffe1dc; color: #a7382d; }
.feedback-category-badge--suggestion { background: #dcebf3; color: #236174; }
.feedback-category-badge--other { background: #eef1f7; color: #5a6478; }
@media (min-width: 768px) {
.point-panel {
top: calc(var(--map-gap) + 3.25rem + 3.5rem);
bottom: var(--map-gap);
left: auto;
right: var(--map-gap);
width: 26rem;
height: auto;
max-height: none;
border-radius: 1.5rem;
box-shadow: 0 2px 6px rgba(14, 21, 37, 0.08), 0 20px 48px rgba(14, 21, 37, 0.16);
animation: point-panel-enter-desktop 240ms cubic-bezier(0.32, 0.72, 0, 1);
transition: none;
}
.point-panel--expanded {
height: auto;
}
.point-panel--closing {
animation: point-panel-exit-desktop 200ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
.point-panel__handle-btn {
display: none;
}
}
@keyframes point-panel-enter-desktop {
from { transform: translateX(1.5rem); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes point-panel-exit-desktop {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(1.5rem); opacity: 0; }
}
/* ---- Account menu (AccountMenu.razor; every page) ----
One "burger + avatar" pill opens the site/account menu everywhere. From md it's a popover dropping out
of the button; below md the same panel is a modal sheet sliding in from the right. Both are this one
DOM, switched by the media query only. Kept in the DOM while closed (visibility toggled via
--open) so the transitions can play. Closing is faster than opening. */
.acct-menu {
position: relative;
flex-shrink: 0;
}
/* An island of its own, as tall as the search island next to it (.island + .searchbox). */
.acct-trigger {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.5rem;
height: 3.25rem;
padding: 0 0.4375rem 0 0.875rem;
border: 1px solid var(--glass-border);
border-radius: 999px;
background: var(--glass);
color: var(--text);
transition: box-shadow .15s ease, border-color .15s ease;
}
.acct-trigger:hover {
border-color: #b7c2d6;
box-shadow: 0 2px 10px rgba(14, 21, 37, 0.12);
}
.acct-trigger[aria-expanded="true"] {
border-color: var(--brand);
box-shadow: 0 0 0 3px rgb(var(--color-brand-600) / 0.16);
}
.acct-trigger:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
.acct-trigger__burger {
width: 1.125rem;
height: 1.125rem;
color: var(--text-muted);
}
.acct-avatar {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 999px;
background: linear-gradient(135deg, rgb(var(--color-brand-400)), rgb(var(--color-brand-600)));
color: #fff;
font-size: 0.875rem;
font-weight: 700;
}
.acct-avatar svg {
width: 1.125rem;
height: 1.125rem;
}
.acct-avatar--guest {
background: var(--surface-muted);
color: var(--text-muted);
}
.acct-avatar--lg {
width: 2.75rem;
height: 2.75rem;
font-size: 1.125rem;
}
.acct-avatar--lg svg {
width: 1.375rem;
height: 1.375rem;
}
/* Moderation queue size on the avatar - the only badge on the button itself, since it's the only
count that asks for action. Red rather than a brand color: it must not be re-tinted by seasonal themes. */
.acct-trigger__badge,
.acct-count.acct-count--alert {
background: #dc2626;
color: #fff;
}
.acct-trigger__badge {
position: absolute;
top: -0.375rem;
right: -0.25rem;
min-width: 1.25rem;
height: 1.25rem;
padding: 0 0.3125rem;
border: 2px solid var(--surface);
border-radius: 999px;
box-sizing: content-box;
font-size: 0.6875rem;
line-height: 1.25rem;
text-align: center;
}
.acct-backdrop {
position: fixed;
inset: 0;
z-index: 60;
background: rgba(14, 21, 37, 0.4);
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
}
.acct-menu--open .acct-backdrop {
opacity: 1;
pointer-events: auto;
}
.acct-panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 61;
display: flex;
flex-direction: column;
width: min(22.5rem, 88vw);
background: var(--surface);
color: var(--text);
border-radius: 1.25rem 0 0 1.25rem;
box-shadow: -16px 0 40px rgba(14, 21, 37, 0.2);
outline: none;
overscroll-behavior: contain;
transform: translateX(100%);
visibility: hidden;
transition: transform .22s ease-in, visibility 0s linear .22s;
}
.acct-menu--open .acct-panel {
transform: none;
visibility: visible;
transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
.acct-panel__head {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 0.75rem;
padding: max(0.875rem, env(safe-area-inset-top)) 0.5rem 0.875rem 1rem;
border-bottom: 1px solid var(--line);
}
.acct-panel__who {
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
gap: 0.125rem;
min-width: 0;
}
.acct-panel__who strong {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.9375rem;
}
.acct-panel__who small {
color: var(--text-muted);
font-size: 0.8125rem;
line-height: 1.35;
}
.acct-role {
display: inline-flex;
align-items: center;
height: 1.375rem;
padding: 0 0.5rem;
border-radius: 999px;
background: var(--brand-soft);
color: var(--brand-dark);
font-size: 0.75rem;
font-weight: 700;
}
.acct-panel__close {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 0.75rem;
color: var(--text-muted);
}
.acct-panel__close:hover {
background: var(--surface-muted);
color: var(--text);
}
.acct-panel__close svg {
width: 1.25rem;
height: 1.25rem;
}
.acct-panel__body {
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: 0.5rem;
}
.acct-panel__foot {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.625rem 1rem max(0.75rem, env(safe-area-inset-bottom));
border-top: 1px solid var(--line);
}
.acct-submit,
.acct-google {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 3rem;
margin: 0.25rem 0.125rem 0.5rem;
padding: 0 1rem;
border-radius: 0.75rem;
font-size: 0.9375rem;
}
.acct-submit {
background: rgb(var(--color-accent));
color: #fff;
font-weight: 700;
transition: background-color .15s ease;
}
.acct-submit:hover {
background: rgb(var(--color-accent-dark));
}
.acct-submit svg {
width: 1.25rem;
height: 1.25rem;
}
.acct-google {
border: 1px solid var(--line-strong);
color: var(--text);
font-weight: 600;
transition: border-color .15s ease, color .15s ease;
}
.acct-google:hover {
border-color: var(--brand);
color: var(--brand-dark);
}
.acct-google svg {
width: 1.125rem;
height: 1.125rem;
}
.acct-item {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
min-height: 2.75rem;
padding: 0.5rem 0.75rem;
border-radius: 0.625rem;
color: var(--text);
font-size: 0.9375rem;
font-weight: 500;
text-align: left;
transition: background-color .12s ease;
}
.acct-item:hover {
background: var(--surface-muted);
}
.acct-item:focus-visible {
outline: 2px solid var(--brand);
outline-offset: -2px;
}
.acct-item > svg {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
color: var(--text-muted);
}
.acct-item.is-current {
background: var(--brand-soft);
color: var(--brand-dark);
font-weight: 600;
}
.acct-item.is-current > svg {
color: var(--brand);
}
.acct-item__text {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
line-height: 1.3;
}
.acct-item__pending {
color: #b45309;
font-size: 0.75rem;
font-weight: 600;
}
.acct-count {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
min-width: 1.5rem;
height: 1.5rem;
padding: 0 0.5rem;
border-radius: 999px;
background: var(--surface-muted);
color: var(--text-muted);
font-size: 0.75rem;
font-weight: 700;
}
.acct-item.is-current .acct-count:not(.acct-count--alert) {
background: var(--surface);
}
.acct-item--danger,
.acct-item--danger > svg {
color: #c2410c;
}
.acct-label {
margin: 0;
padding: 0.75rem 0.75rem 0.25rem;
color: rgb(148 163 184);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.acct-sep {
height: 1px;
margin: 0.375rem 0.25rem;
background: var(--line);
}
.acct-docs-toggle__chevron {
transition: transform .18s ease;
}
.acct-docs-toggle[aria-expanded="true"] .acct-docs-toggle__chevron {
transform: rotate(180deg);
}
.acct-docs {
padding-left: 2rem;
}
.acct-docs .acct-item {
min-height: 2.5rem;
color: var(--text-muted);
font-size: 0.875rem;
}
.acct-docs .acct-item:hover {
color: var(--text);
}
.acct-docs .acct-item.is-current {
color: var(--brand-dark);
}
@media (min-width: 768px) {
.acct-backdrop {
background: transparent;
}
.acct-panel {
position: absolute;
top: calc(100% + 0.5rem);
bottom: auto;
width: 20rem;
max-height: calc(100dvh - 6rem);
border: 1px solid var(--line);
border-radius: 1rem;
box-shadow: 0 1px 2px rgba(14, 21, 37, 0.06), 0 18px 48px rgba(14, 21, 37, 0.18);
opacity: 0;
transform: translateY(-6px) scale(.97);
transform-origin: top right;
transition: opacity .14s ease-in, transform .14s ease-in, visibility 0s linear .14s;
}
.acct-menu--open .acct-panel {
opacity: 1;
transform: none;
transition: opacity .18s ease-out, transform .2s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
.acct-panel__head {
padding: 0.75rem;
}
.acct-panel__close,
.acct-submit {
display: none;
}
.acct-panel__foot {
padding: 0.5rem 0.75rem;
}
}
/* ---- Address search (Header) ---- */
/* The search box has its own clear button (aria-label="Очистить поиск"); without this, WebKit/Blink
also draw their native type=search cancel icon right next to it, showing two "x" glyphs at once. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
.pointsearch__backdrop {
position: fixed;
inset: 0;
z-index: 40;
background: transparent;
}
.pointsearch__panel {
position: absolute;
z-index: 41;
top: calc(100% + 0.5rem);
left: 0;
width: 100%;
max-width: 26rem;
max-height: 22rem;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: var(--surface);
border-radius: 1rem;
box-shadow: var(--shadow-soft);
border: 1px solid var(--line);
}
.pointsearch__status {
margin: 0;
padding: 1.5rem 1.25rem;
text-align: center;
color: var(--text-muted);
font-size: 0.9rem;
}
.pointsearch__error {
padding: 0.25rem;
}
.pointsearch__status--error {
color: #b91c1c;
}
.pointsearch__section-label {
margin: 0;
padding: 0.6rem 0.75rem 0.2rem;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
}
.pointsearch__list {
list-style: none;
margin: 0;
padding: 0.4rem;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.pointsearch__item {
display: flex;
align-items: flex-start;
gap: 0.65rem;
width: 100%;
padding: 0.6rem 0.65rem;
border-radius: 0.65rem;
text-align: left;
background: transparent;
transition: background-color .12s ease;
}
.pointsearch__item:hover,
.pointsearch__item:focus-visible {
background: var(--brand-soft);
}
.pointsearch__item-dot {
flex-shrink: 0;
display: block;
width: 0.6rem;
height: 0.6rem;
margin-top: 0.35rem;
border-radius: 999px;
}
.pointsearch__item-pin {
flex-shrink: 0;
width: 1.1rem;
height: 1.1rem;
margin-top: 0.1rem;
color: var(--text-muted);
}
.pointsearch__item-text {
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.pointsearch__item-address {
font-weight: 600;
font-size: 0.9rem;
color: var(--text);
}
.pointsearch__item-preview {
font-size: 0.8rem;
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* ---- Address search: mobile fullscreen overlay ---- */
/* On the map page the overlay is rendered inside the glass .searchbox island, whose backdrop-filter
makes it the containing block (and stacking context) of position:fixed descendants - which would trap
the "fullscreen" overlay inside the island's box. Drop the filter while the overlay is open, and lift
the floating header above the map's other floating UI (point panel, bottom dock). */
.island:has(.pointsearch__mobile-overlay) {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.site-header--floating:has(.pointsearch__mobile-overlay) {
z-index: 75;
}
.pointsearch__mobile-overlay {
position: fixed;
inset: 0;
z-index: 50;
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh;
background: var(--surface);
padding-top: env(safe-area-inset-top);
animation: pointsearch-overlay-in .18s ease-out;
}
@keyframes pointsearch-overlay-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.pointsearch__mobile-overlay { animation: none; }
}
.pointsearch__mobile-header {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 0.25rem;
padding: 0.625rem 0.75rem 0.5rem 0.25rem;
}
.pointsearch__mobile-back {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 999px;
color: var(--text);
}
.pointsearch__mobile-back:active {
background: var(--surface-muted);
}
.pointsearch__mobile-field {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 0.5rem;
height: 3rem;
padding: 0 0.25rem 0 0.875rem;
border-radius: 999px;
background: var(--surface-muted);
color: var(--text-muted);
transition: box-shadow .15s ease, background-color .15s ease;
}
.pointsearch__mobile-field:focus-within {
background: var(--surface);
box-shadow: 0 0 0 2px rgb(var(--color-brand-600) / 0.55);
}
.pointsearch__mobile-field input {
flex: 1 1 auto;
min-width: 0;
height: 100%;
border: 0;
background: none;
outline: none;
color: var(--text);
/* 16px+ keeps iOS Safari from zooming the page in on focus. */
font-size: 1rem;
}
.pointsearch__mobile-field input::placeholder {
color: var(--text-muted);
}
.pointsearch__mobile-clear {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 999px;
color: var(--text-muted);
}
.pointsearch__mobile-clear:active {
background: var(--line);
}
.pointsearch__chips {
flex-shrink: 0;
display: flex;
gap: 0.5rem;
padding: 0.25rem 1rem 0.625rem;
overflow-x: auto;
scrollbar-width: none;
}
.pointsearch__chips::-webkit-scrollbar {
display: none;
}
.pointsearch__chip {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 0.375rem;
height: 2.25rem;
padding: 0 0.875rem;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--surface);
color: var(--text);
font-size: 0.875rem;
font-weight: 600;
white-space: nowrap;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pointsearch__chip-count {
color: var(--text-muted);
font-weight: 500;
}
.pointsearch__chip.is-active {
border-color: rgb(var(--color-brand-600));
background: rgb(var(--color-brand-600));
color: #fff;
}
.pointsearch__chip.is-active .pointsearch__chip-count {
color: rgb(255 255 255 / 0.8);
}
.pointsearch__mobile-results {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
border-top: 1px solid var(--line);
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
.pointsearch__mobile-results .pointsearch__section-label {
padding: 0.875rem 1rem 0.25rem;
}
.pointsearch__rows {
list-style: none;
margin: 0;
padding: 0;
}
.pointsearch__row {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
min-height: 3.75rem;
padding: 0.5rem 1rem;
text-align: left;
background: transparent;
transition: background-color .12s ease;
}
.pointsearch__row:active,
.pointsearch__row:focus-visible {
background: var(--brand-soft);
}
.pointsearch__row-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.75rem;
background: var(--surface-muted);
color: var(--text-muted);
}
.pointsearch__row-icon svg {
width: 1.25rem;
height: 1.25rem;
}
/* Point rows: a severity-tinted tile with a solid dot, same color as the marker on the map. */
.pointsearch__row-icon[style*="--c"] {
background: color-mix(in srgb, var(--c) 16%, transparent);
}
.pointsearch__row-icon i {
width: 0.75rem;
height: 0.75rem;
border-radius: 999px;
background: var(--c);
box-shadow: 0 0 0 3px var(--surface);
}
.pointsearch__row-text {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.pointsearch__row-title,
.pointsearch__row-subtitle {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.pointsearch__row-title {
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.3;
color: var(--text);
}
.pointsearch__row-title mark {
background: none;
color: rgb(var(--color-brand-700));
}
.pointsearch__row-subtitle {
font-size: 0.8125rem;
line-height: 1.3;
color: var(--text-muted);
}
/* ---- Location picker (Submit request form) ---- */
.location-picker-map-shell {
position: relative;
}
/* Positioning context for the map plus its overlaid toggle/address badge - kept as a separate element
from .location-picker-map-shell so the expanded state (below) can turn the shell into a full-viewport
centering backdrop without disturbing this element's own box, which the toggle/badge are positioned
relative to in both states. */
.location-picker-map-panel {
position: relative;
}
.location-picker-map {
position: relative;
width: 100%;
height: 16rem;
border-radius: 1rem;
overflow: hidden;
background: #e9edf2;
z-index: 0;
}
.location-picker-map .leaflet-container {
width: 100%;
height: 100%;
font-family: inherit;
background: #e9edf2;
}
@media (min-width: 1024px) {
.location-picker-map {
height: 20rem;
}
}
/* Expanded picker view - a large centered panel over a dimmed backdrop, not a true fullscreen takeover
(a visitor picking a point should still see they're in an overlay above the page, not on a different
screen). See LocationPickerMap.razor's ToggleExpandAsync/map.js's beginMapResize+endMapResize for the
JS side that keeps Leaflet's view centered through the jump. Scoped through the shell's modifier class
rather than one directly on .location-picker-map itself - that element's `class` attribute belongs to
Leaflet after init (see the comment in the .razor file), so Blazor must never be the one flipping a
class on it. */
.location-picker-map-shell--expanded {
position: fixed;
inset: 0;
z-index: 90;
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
background: rgba(10, 14, 24, .55);
}
.location-picker-map-shell--expanded .location-picker-map-panel {
width: 100%;
max-width: 1100px;
height: min(80vh, calc(100dvh - 2.5rem));
}
.location-picker-map-shell--expanded .location-picker-map {
height: 100%;
box-shadow: var(--shadow-soft);
}
.location-picker-map__toggle {
position: absolute;
top: 0.6rem;
right: 0.6rem;
z-index: 1;
display: inline-flex;
height: 2.25rem;
width: 2.25rem;
align-items: center;
justify-content: center;
border-radius: 0.6rem;
border: 1px solid var(--line);
background: rgba(255, 255, 255, .92);
color: var(--text-muted);
box-shadow: 0 1px 3px rgba(10, 14, 24, .18);
transition: background-color .12s ease, color .12s ease;
}
.location-picker-map__toggle:hover,
.location-picker-map__toggle:focus-visible {
background: #fff;
color: var(--brand-dark);
}
/* Only ever rendered while expanded (see LocationPickerMap.razor) - positioned relative to
.location-picker-map-panel like the toggle button, so it always overlays the map panel itself
(whatever size that currently is) instead of drifting relative to the viewport. */
.location-picker-map__address {
position: absolute;
left: 0.6rem;
bottom: 0.6rem;
right: 0.6rem;
z-index: 1;
/* Purely informational, unlike the toggle button - it must never intercept clicks meant for the map
underneath. It's a DOM sibling of the Leaflet container, not a descendant, so without this a click
landing in this strip (nearly the full width of the map) would bubble straight past Leaflet's own
click handler (bound to the container itself) instead of reaching it - the point picker would look
like it stopped responding, with the address stuck on whatever it last resolved to. */
pointer-events: none;
border-radius: 0.75rem;
border: 1px solid var(--line);
background: rgba(255, 255, 255, .95);
color: var(--text);
box-shadow: var(--shadow-small);
padding: 0.55rem 0.85rem;
font-size: 0.85rem;
line-height: 1.35;
}
/* ---- Request form (RequestForm.razor: submit + edit) ----
Numbered section cards. From xl: contents column | sections | rail with the point preview and the
readiness checklist next to the submit button. Below xl: the contents become a sticky chip row and the
rail a bar docked at the bottom (preview opens in a sheet). */
.page--request { max-width: 84rem; }
.request-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
align-items: start;
}
.request-sections {
display: grid;
gap: 1rem;
min-width: 0;
}
/* Sections land below the header band (4.75rem) and, below xl, the sticky contents row. */
.request-section {
scroll-margin-top: 8.5rem;
}
.request-section__head {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.request-section__num {
display: grid;
flex-shrink: 0;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 0.7rem;
background: rgb(var(--color-brand-50));
color: rgb(var(--color-brand-700));
font-size: 0.875rem;
font-weight: 800;
}
.request-section__head h2 {
margin: 0;
color: var(--text);
font-size: 1.125rem;
font-weight: 800;
line-height: 1.3;
}
.request-section__head p {
margin: 0;
color: #8a93a6;
font-size: 0.8125rem;
}
/* Address on the left, map on the right from md. */
.request-place {
display: grid;
gap: 1.25rem;
}
@media (min-width: 768px) {
.request-place { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
/* Collapsed only - expanded, the picker's own 100% height must win. */
.request-place .location-picker-map-shell:not(.location-picker-map-shell--expanded) .location-picker-map { height: 16rem; }
}
.request-label-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
}
.request-label-row .field-label {
margin-bottom: 0.375rem;
}
.request-counter {
color: #8a93a6;
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
}
/* Moderator's remark above an edit of a rejected request. */
.request-remark {
display: flex;
gap: 0.75rem;
margin-bottom: 1rem;
padding: 1rem 1.1rem;
border: 1px solid #ffd3cc;
border-radius: 1rem;
background: #fff6f4;
color: #7a2e25;
font-size: 0.875rem;
line-height: 1.5;
}
.request-remark svg {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
margin-top: 0.1rem;
color: #c2410c;
}
.request-remark p {
margin: 0.15rem 0 0;
white-space: pre-line;
}
/* Severity: one card per level - the marker color, the label and what the level means. The colors carry
meaning, so seasonal palettes never touch them. */
.request-sev {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
@media (min-width: 1024px) {
.request-sev { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.request-sev__option {
position: relative;
display: flex;
flex-direction: column;
gap: 0.2rem;
padding: 0.75rem 0.85rem 0.8rem;
border: 1.5px solid var(--line);
border-radius: 1rem;
background: var(--surface);
cursor: pointer;
transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.request-sev__option:hover {
border-color: var(--line-strong);
}
.request-sev__option:has(input:focus-visible) {
outline: 2px solid rgb(var(--color-brand-600));
outline-offset: 2px;
}
.request-sev__option:has(input:checked) {
border-color: var(--c);
background: color-mix(in srgb, var(--c) 7%, #fff);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent);
}
.request-sev__name {
display: flex;
align-items: center;
gap: 0.45rem;
padding-right: 1.25rem;
color: var(--text);
font-size: 0.9rem;
font-weight: 700;
}
.request-sev__name::before {
content: "";
flex-shrink: 0;
width: 0.625rem;
height: 0.625rem;
border-radius: 999px;
background: var(--c);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent);
}
.request-sev__option:has(input:checked)::after {
content: "";
position: absolute;
top: 0.75rem;
right: 0.7rem;
width: 1.125rem;
height: 1.125rem;
border-radius: 999px;
background: var(--c) url("data:image/svg+xml;utf8,") center / 0.75rem no-repeat;
}
.request-sev__hint {
color: var(--text-muted);
font-size: 0.75rem;
line-height: 1.35;
}
/* Photos: a grid of tiles ending with the picker - a full-width drop area while empty, an "Add" tile after. */
.request-photos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr));
gap: 0.5rem;
}
.request-photo {
position: relative;
aspect-ratio: 1;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 0.85rem;
background: var(--surface-muted);
}
.request-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.request-photo__fallback {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.25rem;
height: 100%;
padding: 0.5rem;
color: #b6bfd0;
font-size: 0.6875rem;
text-align: center;
}
.request-photo__fallback svg {
width: 1.5rem;
height: 1.5rem;
}
.request-photo__fallback span {
width: 100%;
overflow: hidden;
color: #8a93a6;
text-overflow: ellipsis;
white-space: nowrap;
}
.request-photo__cover {
position: absolute;
top: 0.35rem;
left: 0.35rem;
padding: 0.1rem 0.45rem;
border-radius: 999px;
background: rgba(14, 21, 37, .65);
color: #fff;
font-size: 0.625rem;
font-weight: 700;
}
.request-photo__progress {
position: absolute;
right: 0.375rem;
bottom: 0.375rem;
left: 0.375rem;
height: 0.3rem;
overflow: hidden;
border-radius: 999px;
background: rgba(255, 255, 255, .7);
}
.request-photo__progress span {
display: block;
height: 100%;
background: rgb(var(--color-brand-500));
transition: width .2s ease;
}
.request-photo__ok {
position: absolute;
right: 0.3rem;
bottom: 0.3rem;
display: grid;
place-items: center;
width: 1.25rem;
height: 1.25rem;
border-radius: 999px;
background: rgb(var(--color-brand-600));
color: #fff;
}
.request-photo__ok svg {
width: 0.75rem;
height: 0.75rem;
}
.request-photo__error {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 0.35rem;
background: rgba(255, 241, 239, .95);
color: #a7382d;
font-size: 0.6875rem;
font-weight: 700;
line-height: 1.25;
text-align: center;
}
.request-photo__delete {
position: absolute;
top: 0.25rem;
right: 0.25rem;
display: grid;
place-items: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 999px;
background: rgba(14, 21, 37, .6);
color: #fff;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
transition: background-color .15s ease;
}
.request-photo__delete:hover:not(:disabled) {
background: #c4232d;
}
.request-photo__delete:disabled {
opacity: 0.5;
}
.request-photo__delete svg {
width: 0.875rem;
height: 0.875rem;
}
.request-photos__picker {
position: relative;
display: flex;
aspect-ratio: 1;
align-items: center;
justify-content: center;
border: 2px dashed var(--line-strong);
border-radius: 0.85rem;
background: var(--surface-page);
transition: border-color .15s ease, background-color .15s ease;
}
.request-photos__picker:hover,
.request-photos__picker:focus-within {
border-color: rgb(var(--color-brand-400));
background: rgb(var(--color-brand-50));
}
.request-photos__picker:focus-within {
outline: 2px solid rgb(var(--color-brand-600));
outline-offset: 2px;
}
.request-photos__picker-body {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
color: rgb(var(--color-brand-700));
font-size: 0.75rem;
font-weight: 700;
text-align: center;
}
.request-photos__picker-body svg {
width: 1.375rem;
height: 1.375rem;
}
/* Empty: one wide drop area. */
.request-photos--empty .request-photos__picker {
grid-column: 1 / -1;
aspect-ratio: auto;
padding: 1.75rem 1rem;
}
.request-photos--empty .request-photos__picker-body {
gap: 0.35rem;
color: var(--text-muted);
font-size: 0.875rem;
font-weight: 500;
}
.request-photos--empty .request-photos__picker-body svg {
width: 2rem;
height: 2rem;
color: #8a93a6;
}
.request-photos--empty .request-photos__picker-body b {
color: rgb(var(--color-brand-700));
}
.request-photos--empty .request-photos__picker-body small {
color: #8a93a6;
font-size: 0.75rem;
}
/* The native picker covers the whole tile/drop area, invisible. */
.request-photos__input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
}
.request-consent {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.9rem 1rem;
border-radius: 1rem;
background: var(--surface-page);
color: var(--text-muted);
font-size: 0.8125rem;
line-height: 1.55;
cursor: pointer;
}
.request-consent a {
color: rgb(var(--color-brand-700));
font-weight: 600;
text-decoration: underline;
}
.request-consent__check {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
margin-top: 0.05rem;
accent-color: rgb(var(--color-brand-600));
}
/* Contents. Below xl: a sticky chip row under the header band. */
.request-toc {
position: sticky;
top: 4.75rem;
z-index: 5;
display: flex;
gap: 0.375rem;
margin: 0 -1rem;
padding: 0.375rem 1rem;
overflow-x: auto;
background: color-mix(in srgb, var(--surface-page) 92%, transparent);
scrollbar-width: none;
}
.request-toc__item {
display: inline-flex;
flex-shrink: 0;
align-items: center;
gap: 0.6rem;
min-height: 2.5rem;
padding: 0 0.85rem 0 0.5rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface);
color: var(--text-muted);
font-size: 0.875rem;
font-weight: 600;
white-space: nowrap;
transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.request-toc__item:hover {
color: var(--text);
}
.request-toc__item[aria-current] {
border-color: var(--text);
background: var(--text);
color: #fff;
}
.request-toc__num {
display: grid;
flex-shrink: 0;
place-items: center;
width: 1.5rem;
height: 1.5rem;
border-radius: 999px;
background: var(--surface-muted);
color: var(--text-muted);
font-size: 0.75rem;
font-weight: 800;
}
.request-toc__num svg {
width: 0.8rem;
height: 0.8rem;
}
.request-toc__item--done .request-toc__num {
background: rgb(var(--color-brand-600));
color: #fff;
}
.request-toc__item[aria-current]:not(.request-toc__item--done) .request-toc__num {
background: rgba(255, 255, 255, .18);
color: #fff;
}
@media (min-width: 640px) {
.request-toc { margin: 0 -1.5rem; padding: 0.375rem 1.5rem; }
}
@media (min-width: 1024px) {
.request-toc { margin: 0 -2rem; padding: 0.375rem 2rem; }
}
/* Right rail: point preview + readiness. Only from xl; below it the bar and the sheet take over. */
.request-rail {
display: none;
}
.request-preview__label {
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0;
padding: 0.7rem 1rem;
border-bottom: 1px solid var(--line);
color: #8a93a6;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.request-preview__label svg {
width: 0.95rem;
height: 0.95rem;
}
.request-ready__top {
display: flex;
align-items: center;
gap: 0.8rem;
margin-bottom: 0.9rem;
}
.request-ready__top b {
display: block;
color: var(--text);
font-size: 0.9375rem;
}
.request-ready__top small {
color: #8a93a6;
font-size: 0.75rem;
}
.request-ready__list {
display: grid;
gap: 0.45rem;
margin: 0 0 1rem;
padding: 0;
list-style: none;
}
.request-ready__list li {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-muted);
font-size: 0.8125rem;
}
.request-ready__list li svg {
flex-shrink: 0;
width: 1.125rem;
height: 1.125rem;
padding: 0.2rem;
border-radius: 999px;
background: var(--surface-muted);
color: transparent;
}
.request-ready__list li.is-done {
color: var(--text);
}
.request-ready__list li.is-done svg {
background: rgb(var(--color-brand-600));
color: #fff;
}
.request-ready__list small {
color: #8a93a6;
font-size: 0.75rem;
}
.request-ready__cancel {
width: 100%;
margin-top: 0.35rem;
color: rgb(var(--color-brand-700));
}
.request-ready .request-error {
margin-bottom: 0.75rem;
}
/* Progress ring (share of required checks done). */
.request-ring {
display: grid;
flex-shrink: 0;
place-items: center;
width: 2.875rem;
height: 2.875rem;
border-radius: 999px;
background: conic-gradient(rgb(var(--color-brand-500)) calc(var(--p) * 1%), var(--surface-muted) 0);
}
.request-ring span {
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 999px;
background: var(--surface);
color: var(--text);
font-size: 0.6875rem;
font-weight: 800;
}
/* Bottom bar (below xl): progress, what's missing, preview and submit. */
.request-bar {
position: fixed;
z-index: 45;
bottom: calc(0.75rem + env(safe-area-inset-bottom));
left: 50%;
display: flex;
align-items: center;
gap: 0.6rem;
width: min(40rem, calc(100vw - 1.5rem));
padding: 0.5rem 0.5rem 0.5rem 0.6rem;
transform: translateX(-50%);
border: 1px solid var(--line);
border-radius: 1.25rem;
background: rgba(255, 255, 255, .95);
box-shadow: 0 12px 32px rgba(14, 21, 37, .16);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
.request-bar .request-ring {
width: 2.5rem;
height: 2.5rem;
}
.request-bar .request-ring span {
width: 1.95rem;
height: 1.95rem;
font-size: 0.625rem;
}
.request-bar__text {
flex: 1;
min-width: 0;
font-size: 0.8125rem;
line-height: 1.25;
}
.request-bar__text b {
display: block;
color: var(--text);
font-size: 0.875rem;
}
.request-bar__text span {
display: block;
overflow: hidden;
color: #8a93a6;
text-overflow: ellipsis;
white-space: nowrap;
}
.request-bar .btn {
flex-shrink: 0;
padding: 0 1rem;
}
@media (max-width: 479.98px) {
.request-bar {
bottom: calc(0.5rem + env(safe-area-inset-bottom));
width: calc(100vw - 1rem);
}
.request-bar__preview { display: none; }
}
/* The bar covers the bottom of the viewport - room for it is reserved under the footer. */
@media (max-width: 1279.98px) {
.site-shell:has(.request-bar) .site-footer {
padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
}
}
/* Preview sheet (below xl). */
.request-sheet {
position: fixed;
inset: 0;
z-index: 80;
display: flex;
align-items: flex-end;
justify-content: center;
background: rgba(14, 21, 37, .4);
animation: request-sheet-fade .2s ease;
}
.request-sheet__panel {
display: grid;
gap: 0.75rem;
width: min(30rem, 100%);
max-height: 88dvh;
overflow: auto;
padding: 0.5rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
border-radius: 1.5rem 1.5rem 0 0;
background: var(--surface-page);
animation: request-sheet-up .25s cubic-bezier(.22, 1, .36, 1);
}
.request-sheet__head {
position: relative;
display: flex;
justify-content: flex-end;
min-height: 2.25rem;
}
.request-sheet__grab {
position: absolute;
top: 0.25rem;
left: 50%;
width: 2.5rem;
height: 0.3rem;
transform: translateX(-50%);
border-radius: 999px;
background: var(--line-strong);
}
.request-sheet__close {
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 999px;
color: var(--text-muted);
}
.request-sheet__close:hover {
background: var(--surface-muted);
}
.request-sheet__close svg {
width: 1.25rem;
height: 1.25rem;
}
.request-sheet .request-ready__list {
margin-bottom: 0;
}
@keyframes request-sheet-fade {
from { opacity: 0; }
}
@keyframes request-sheet-up {
from { transform: translateY(2rem); }
}
@media (min-width: 1280px) {
.request-layout {
grid-template-columns: 12.5rem minmax(0, 1fr) 21rem;
gap: 1.5rem;
}
.request-section {
scroll-margin-top: 5.75rem;
}
.request-toc {
top: 5.75rem;
display: grid;
gap: 0.25rem;
margin: 0;
padding: 0;
overflow: visible;
background: none;
}
.request-toc__item {
min-height: 2.75rem;
padding: 0 0.75rem;
border-color: transparent;
border-radius: 0.8rem;
background: transparent;
text-align: left;
white-space: normal;
}
.request-toc__item:hover {
background: var(--surface-muted);
}
.request-toc__item[aria-current] {
border-color: transparent;
background: var(--surface);
color: var(--text);
box-shadow: var(--shadow-card);
}
.request-toc__item[aria-current]:not(.request-toc__item--done) .request-toc__num {
background: var(--surface-muted);
color: var(--text-muted);
}
.request-rail {
position: sticky;
top: 5.75rem;
display: grid;
gap: 1rem;
}
/* The preview is the full map card, taller than the screen next to the readiness card and its submit
button - so it scrolls inside a capped box, exactly like the map's point panel (its action bar
sticks to the bottom of that box). The cap leaves room for the readiness card below. */
.request-rail .request-preview {
display: flex;
flex-direction: column;
max-height: max(20rem, min(38rem, 100dvh - 29rem));
}
.request-rail .request-preview .point-card {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior-y: contain;
scrollbar-width: thin;
}
.request-bar,
.request-sheet,
.request-error--inline {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.request-sheet,
.request-sheet__panel { animation: none; }
}
/* ---- Request details (MyRequestDetails.razor) ----
Like a listing page: photos, text and map on the left; status, actions and history in a sticky column
on the right. Below lg the status card comes first - it answers "what's going on and what do I do". */
.request-view {
display: grid;
gap: 1rem;
align-items: start;
}
.request-view__side {
order: -1;
}
@media (min-width: 1024px) {
.request-view {
grid-template-columns: minmax(0, 1fr) 21rem;
gap: 1.5rem;
}
.request-view__side {
position: sticky;
top: 5.75rem;
order: 0;
}
}
/* Up to five photos: a big one and the rest beside it; phones show three. */
.request-gallery {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 2fr 1fr;
gap: 0.375rem;
aspect-ratio: 4 / 3.4;
margin: 0.5rem 0.5rem 0;
overflow: hidden;
border-radius: 1rem;
}
.request-gallery > button {
position: relative;
overflow: hidden;
padding: 0;
background: var(--surface-muted);
cursor: zoom-in;
}
.request-gallery > button:first-child {
grid-column: 1 / -1;
}
.request-gallery > button:nth-child(n + 4) {
display: none;
}
.request-gallery img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .3s ease;
}
.request-gallery > button:hover img {
transform: scale(1.03);
}
.request-gallery--1 {
grid-template-rows: 1fr;
aspect-ratio: 16 / 10;
}
.request-gallery--2 > button:nth-child(2) {
grid-column: 1 / -1;
}
.request-gallery__more {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: rgba(14, 21, 37, .5);
color: #fff;
font-size: 1.125rem;
font-weight: 700;
}
.request-gallery__more--wide {
display: none;
}
@media (min-width: 640px) {
.request-gallery {
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
aspect-ratio: 16 / 8;
margin: 1rem 1rem 0;
}
.request-gallery > button:first-child {
grid-column: auto;
grid-row: span 2;
}
.request-gallery > button:nth-child(n + 4) {
display: block;
}
.request-gallery--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.request-gallery--1 > button:first-child { grid-row: auto; }
.request-gallery--2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.request-gallery--2 > button:first-child { grid-row: auto; }
.request-gallery--2 > button:nth-child(2) { grid-column: auto; }
.request-gallery--3 { grid-template-columns: 2fr 1fr; }
.request-gallery--4 > button:nth-child(4) { grid-column: span 2; }
.request-gallery__more--phone { display: none; }
.request-gallery__more--wide { display: grid; }
}
.request-view__body {
padding: 1.25rem;
}
@media (min-width: 640px) {
.request-view__body { padding: 1.5rem 1.75rem 1.75rem; }
}
.request-view__meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.75rem 0 1.25rem;
}
.request-view__pill {
display: inline-flex;
align-items: center;
padding: 0.3rem 0.75rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface-page);
color: var(--text-muted);
font-size: 0.8125rem;
font-weight: 600;
}
.request-view__text {
margin: 0;
color: #2b3445;
line-height: 1.7;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.request-view__subtitle {
margin: 1.75rem 0 0.75rem;
color: var(--text);
font-size: 1.0625rem;
font-weight: 800;
}
/* Status card: a stripe in the status color, what it means, actions, then the history. */
.request-status {
position: relative;
overflow: hidden;
}
.request-status::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 4px;
background: var(--status-color);
}
.request-status--created { --status-color: #3b8fb0; }
.request-status--rejected { --status-color: #d64535; }
.request-status--approved { --status-color: rgb(var(--color-brand-500)); }
.request-status__title {
margin: 0.75rem 0 0;
color: var(--text);
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.01em;
}
.request-status__text {
margin: 0.3rem 0 1rem;
color: var(--text-muted);
font-size: 0.875rem;
line-height: 1.55;
}
.request-status__likes {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
padding: 0.8rem 0.9rem;
border-radius: 1rem;
background: rgb(var(--color-brand-50));
}
.request-status__likes svg {
flex-shrink: 0;
width: 1.375rem;
height: 1.375rem;
color: #e0313b;
}
.request-status__likes b {
color: var(--text);
font-size: 1.25rem;
}
.request-status__likes span {
color: var(--text-muted);
font-size: 0.8125rem;
line-height: 1.3;
}
.request-status__actions {
display: grid;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.request-status__history {
margin: 1.25rem 0 0.9rem;
padding-top: 1.1rem;
border-top: 1px solid var(--line);
color: #8a93a6;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.request-timeline {
margin: 0;
padding: 0;
list-style: none;
}
.request-timeline__item {
position: relative;
padding: 0 0 1.15rem 2.1rem;
}
.request-timeline__item:last-child {
padding-bottom: 0;
}
.request-timeline__item::before {
content: "";
position: absolute;
top: 1.6rem;
bottom: 0.15rem;
left: 0.7rem;
width: 2px;
background: var(--line);
}
.request-timeline__item:last-child::before {
display: none;
}
.request-timeline__item--done::before {
background: rgb(var(--color-brand-300));
}
.request-timeline__dot {
position: absolute;
top: 0.05rem;
left: 0;
display: grid;
place-items: center;
width: 1.45rem;
height: 1.45rem;
border-radius: 999px;
background: rgb(var(--color-brand-600));
color: #fff;
}
.request-timeline__dot svg {
width: 0.8rem;
height: 0.8rem;
}
.request-timeline__item--current .request-timeline__dot {
background: #236174;
box-shadow: 0 0 0 4px #dcebf3;
}
.request-timeline__item--rejected .request-timeline__dot {
background: #d64535;
box-shadow: 0 0 0 4px #ffe1dc;
}
.request-timeline__item b {
display: block;
color: var(--text);
font-size: 0.875rem;
}
.request-timeline__item time {
display: block;
color: #8a93a6;
font-size: 0.75rem;
}
.request-timeline__item p {
margin: 0.5rem 0 0;
padding: 0.65rem 0.8rem;
border: 1px solid #ffe1dc;
border-radius: 0.8rem;
background: #fff6f4;
color: #7a2e25;
font-size: 0.8125rem;
line-height: 1.45;
white-space: pre-wrap;
}
@media (prefers-reduced-motion: reduce) {
.request-gallery img { transition: none; }
}
/* ---- My requests (list) ---- */
/* List page (MyRequests.razor): filter chips + one card with rows grouped by month. Each row is a
stretched link to the details page; the "Fix" button and map link inside it sit above that link. */
.my-requests-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 1rem;
}
.my-requests-chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.my-requests-chip {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 2.5rem;
padding: 0 0.9rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface);
color: var(--text-muted);
font-size: 0.875rem;
font-weight: 600;
white-space: nowrap;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.my-requests-chip:hover {
border-color: var(--line-strong);
color: var(--text);
}
.my-requests-chip b {
min-width: 1.4rem;
padding: 0 0.35rem;
border-radius: 999px;
background: var(--surface-muted);
font-size: 0.75rem;
line-height: 1.4rem;
text-align: center;
}
.my-requests-chip--alert b {
background: #ffe1dc;
color: #a7382d;
}
.my-requests-chip[aria-current="true"] {
border-color: var(--text);
background: var(--text);
color: #fff;
}
.my-requests-chip[aria-current="true"] b {
background: rgb(255 255 255 / 0.18);
color: #fff;
}
.my-requests-sort {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 2.5rem;
padding: 0 0.9rem;
border-radius: 999px;
color: var(--text-muted);
font-size: 0.875rem;
font-weight: 600;
transition: background-color .15s ease, color .15s ease;
}
.my-requests-sort:hover {
background: var(--surface-muted);
color: var(--text);
}
.my-requests-sort svg {
width: 1rem;
height: 1rem;
}
/* clip, not hidden: overflow:hidden would make the card the sticky month headers' scroll container. */
.my-requests-feed.card--flush {
overflow: clip;
}
.my-requests-feed__nothing {
margin: 0;
padding: 2.5rem 1rem;
color: var(--text-muted);
text-align: center;
}
/* Sticks right under the header band (3.25rem islands + 2 x --map-gap). */
.my-requests-month {
position: sticky;
top: calc(3.25rem + 2 * var(--map-gap));
z-index: 2;
margin: 0;
padding: 0.55rem 1.25rem;
border-bottom: 1px solid var(--line);
background: color-mix(in srgb, var(--surface-page) 92%, transparent);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: #8a93a6;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.my-request {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.9rem 1rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--line);
transition: background-color .15s ease;
}
.my-request:last-child {
border-bottom: 0;
}
.my-request:has(.my-request__link:hover) {
background: #fafbfd;
}
.my-request__thumb {
display: flex;
align-items: center;
justify-content: center;
width: 5.5rem;
height: 4.125rem;
overflow: hidden;
border-radius: 0.75rem;
background: var(--surface-muted);
color: #b6bfd0;
}
.my-request__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.my-request__thumb svg {
width: 1.75rem;
height: 1.75rem;
}
.my-request__main {
min-width: 0;
}
.my-request__link {
display: block;
overflow: hidden;
color: var(--text);
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.my-request__link::after {
content: "";
position: absolute;
inset: 0;
}
.my-request__link:focus-visible {
outline: none;
}
.my-request__link:focus-visible::after {
outline: 2px solid rgb(var(--color-brand-600));
outline-offset: -2px;
}
.my-request__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 0.9rem;
margin: 0.3rem 0 0;
color: var(--text-muted);
font-size: 0.8125rem;
}
/* Severity: a dot in the map marker's color + label. */
.my-request__sev {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.my-request__sev::before {
content: "";
width: 0.5rem;
height: 0.5rem;
border-radius: 999px;
background: var(--c);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent);
}
.my-request__status-inline {
display: none;
}
.my-request__side {
display: flex;
align-items: center;
gap: 0.75rem;
}
.my-request__chevron {
width: 1.125rem;
height: 1.125rem;
color: #8a93a6;
transition: transform .15s ease, color .15s ease;
}
.my-request:has(.my-request__link:hover) .my-request__chevron {
transform: translateX(2px);
color: var(--text);
}
/* "What's next" line under the address. */
.my-request__next {
grid-column: 2 / -1;
display: flex;
align-items: center;
gap: 0.75rem;
margin: -0.25rem 0 0;
font-size: 0.8125rem;
}
.my-request__waiting {
color: #236174;
}
.my-request__note {
padding: 0.6rem 0.6rem 0.6rem 0.85rem;
border: 1px solid #ffe1dc;
border-radius: 0.9rem;
background: #fff6f4;
color: #7a2e25;
}
.my-request__note p {
flex: 1;
min-width: 0;
margin: 0;
}
.my-request__fix,
.my-request__map {
position: relative;
z-index: 1;
}
.my-request__fix {
min-height: 2.25rem;
flex-shrink: 0;
border-color: #ffd3cc;
border-radius: 0.7rem;
background: var(--surface);
color: #a7382d;
font-size: 0.8125rem;
}
.my-request__fix:hover {
background: #ffe1dc;
}
.my-request__map {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 2.25rem;
margin-left: -0.6rem;
padding: 0 0.6rem;
border-radius: 0.7rem;
color: rgb(var(--color-brand-700));
font-weight: 600;
}
.my-request__map:hover {
background: rgb(var(--color-brand-50));
}
.my-request__map svg,
.my-request__likes svg {
width: 1rem;
height: 1rem;
}
.my-request__likes {
display: inline-flex;
align-items: center;
gap: 0.25rem;
color: var(--text-muted);
}
/* Phones: square thumb, status above the meta, full-width "what's next", submit button docked below. */
.my-requests-fab {
position: fixed;
z-index: 40;
left: 50%;
bottom: max(1rem, env(safe-area-inset-bottom));
transform: translateX(-50%);
/* left: 50% alone caps a fixed box's shrink-to-fit width at half the viewport, so the longer rotating
labels squeezed the "+" icon to nothing - size to content, bounded by the viewport instead. */
width: max-content;
max-width: calc(100vw - 2rem);
border-radius: 999px;
}
.my-requests-fab svg {
flex-shrink: 0;
}
.my-requests-fab:active {
transform: translateX(-50%) scale(0.98);
}
/* The docked button covers the bottom of the viewport, so the room for it is reserved under the footer
(not under the list): at the end of the page the button sits below the footer instead of over it. */
@media (max-width: 767.98px) {
.site-shell:has(.my-requests-fab) .site-footer {
padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
}
}
@media (max-width: 639px) {
.my-requests .page-head {
margin-bottom: 1rem;
}
.my-requests-chips {
flex: 1 1 100%;
flex-wrap: nowrap;
min-width: 0;
margin: 0 -1rem;
padding: 0 1rem 2px;
overflow-x: auto;
scrollbar-width: none;
}
.my-requests-chips::-webkit-scrollbar {
display: none;
}
.my-requests-chip {
flex: none;
}
.my-requests-month {
padding: 0.5rem 1rem;
}
.my-request {
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 0.6rem 0.85rem;
padding: 0.9rem 1rem;
}
.my-request__thumb {
width: 4rem;
height: 4rem;
}
.my-request__link {
display: -webkit-box;
line-height: 1.3;
white-space: normal;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.my-request__meta {
gap: 0.25rem 0.6rem;
}
.my-request__status-inline {
display: inline-flex;
width: fit-content;
flex-basis: 100%;
max-width: fit-content;
margin-bottom: 0.15rem;
}
.my-request__side {
display: none;
}
.my-request__next {
grid-column: 1 / -1;
margin-top: 0;
}
.my-request__note {
flex-wrap: wrap;
}
.my-request__fix {
width: 100%;
}
}
/* Empty list / signed-out state. */
.my-requests-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.my-requests-empty__art {
width: 8.75rem;
height: 6.875rem;
margin-bottom: 1.25rem;
}
.my-requests-empty__icon {
display: grid;
place-items: center;
width: 4rem;
height: 4rem;
margin-bottom: 1rem;
border-radius: 1.25rem;
background: rgb(var(--color-brand-50));
color: rgb(var(--color-brand-700));
}
.my-requests-empty__icon svg {
width: 1.875rem;
height: 1.875rem;
}
.my-requests-empty__title {
margin: 0;
color: var(--text);
font-size: 1.375rem;
font-weight: 800;
letter-spacing: -0.01em;
}
.my-requests-empty__text {
max-width: 30rem;
margin: 0.5rem auto 1.5rem;
color: var(--text-muted);
}
.my-requests-steps {
display: grid;
gap: 0.75rem;
width: 100%;
max-width: 44rem;
margin: 2rem 0 0;
padding: 0;
list-style: none;
counter-reset: step;
text-align: left;
}
.my-requests-steps li {
position: relative;
padding: 0.9rem 1rem 0.9rem 3.25rem;
border-radius: 1rem;
background: var(--surface-page);
counter-increment: step;
}
.my-requests-steps li::before {
content: counter(step);
position: absolute;
left: 1rem;
top: 0.9rem;
display: grid;
place-items: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 999px;
background: rgb(var(--color-brand-100));
color: rgb(var(--color-brand-800));
font-size: 0.8rem;
font-weight: 800;
}
.my-requests-steps b {
display: block;
color: var(--text);
font-size: 0.9rem;
}
.my-requests-steps span {
color: var(--text-muted);
font-size: 0.8125rem;
}
@media (min-width: 720px) {
.my-requests-steps {
grid-template-columns: repeat(3, 1fr);
}
}
/* Loading placeholder bars. */
.skeleton {
border-radius: 0.5rem;
background: linear-gradient(90deg, var(--surface-muted) 0%, #f7f8fc 50%, var(--surface-muted) 100%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.3s linear infinite;
}
@keyframes skeleton-shimmer {
to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.skeleton { animation: none; }
.my-request__chevron { transition: none; }
}
.comment-timeline {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
.comment-timeline__item {
position: relative;
padding: 0 0 1.5rem 1.75rem;
}
.comment-timeline__item:last-child {
padding-bottom: 0;
}
.comment-timeline__item::before {
content: "";
position: absolute;
left: 0.3125rem;
top: 1.3rem;
bottom: -0.15rem;
width: 2px;
background: var(--line);
}
.comment-timeline__item:last-child::before {
display: none;
}
.comment-timeline__dot {
position: absolute;
left: 0;
top: 0.35rem;
width: 0.75rem;
height: 0.75rem;
border-radius: 999px;
background: var(--brand);
box-shadow: 0 0 0 3px var(--brand-soft);
}
.comment-timeline__date {
display: block;
font-size: 0.75rem;
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.comment-timeline__text {
margin: 0.25rem 0 0;
color: var(--text);
line-height: 1.6;
white-space: pre-wrap;
}
/* ---- Info pages (about, how it works, news, feedback, rules & documents) ----
Same quiet language as "My requests": pill chips, one card per idea, a closing "what next" card. */
/* Sibling pages of the section (InfoNav.razor). Scrolls sideways on phones instead of wrapping into a
second row of chips above the title. */
.info-nav {
display: flex;
gap: 0.5rem;
margin: 0 -1rem 1.5rem;
padding: 0.125rem 1rem;
overflow-x: auto;
scrollbar-width: none;
}
.info-nav::-webkit-scrollbar {
display: none;
}
@media (min-width: 640px) {
.info-nav {
flex-wrap: wrap;
margin: 0 0 1.75rem;
padding: 0;
overflow: visible;
}
}
.info-nav__chip {
display: inline-flex;
flex-shrink: 0;
align-items: center;
min-height: 2.5rem;
padding: 0 0.9rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface);
color: var(--text-muted);
font-size: 0.875rem;
font-weight: 600;
white-space: nowrap;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.info-nav__chip:hover {
border-color: var(--line-strong);
color: var(--text);
}
.info-nav__chip[aria-current="page"] {
border-color: var(--text);
background: var(--text);
color: #fff;
}
.info-nav__chip:focus-visible,
.doc-toc__link:focus-visible,
.choice-card:has(:focus-visible) {
outline: 2px solid rgb(var(--color-brand-600));
outline-offset: 2px;
}
/* "Effective from ..." as a quiet pill under the lead. */
.info-meta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 1rem;
padding: 0.25rem 0.75rem;
border-radius: 999px;
background: var(--surface-muted);
color: var(--text-muted);
font-weight: 600;
}
.info-meta::before {
content: "";
width: 0.4rem;
height: 0.4rem;
border-radius: 999px;
background: rgb(var(--color-brand-500));
}
/* Long documents (LegalDocument.razor): contents column + text from lg, a folded contents card above. */
.doc-layout {
display: grid;
gap: 1rem;
}
.doc-toc__fold {
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: var(--surface);
box-shadow: var(--shadow-card);
}
.doc-toc__summary {
display: flex;
align-items: center;
gap: 0.75rem;
min-height: 3.25rem;
padding: 0 1.25rem;
color: var(--text);
font-weight: 700;
cursor: pointer;
list-style: none;
}
.doc-toc__summary::-webkit-details-marker {
display: none;
}
.doc-toc__count {
margin-left: auto;
color: var(--text-muted);
font-size: 0.8125rem;
font-weight: 500;
}
.doc-toc__chevron {
width: 1.125rem;
height: 1.125rem;
color: var(--text-muted);
transition: transform .2s ease;
}
.doc-toc__fold[open] .doc-toc__chevron {
transform: rotate(180deg);
}
.doc-toc__fold .doc-toc__list {
padding: 0 0.75rem 0.75rem;
}
.doc-toc__column {
display: none;
}
.doc-toc__heading {
margin: 0 0 0.5rem;
padding: 0 0.75rem;
color: #8a93a6;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.doc-toc__list {
margin: 0;
padding: 0;
list-style: none;
}
.doc-toc__link {
display: block;
padding: 0.5rem 0.75rem;
border-radius: 0.75rem;
color: var(--text-muted);
font-size: 0.875rem;
line-height: 1.4;
transition: background-color .15s ease, color .15s ease;
}
.doc-toc__link:hover {
background: var(--surface-muted);
color: var(--text);
}
@media (min-width: 1024px) {
.doc-layout {
grid-template-columns: 15rem minmax(0, 1fr);
gap: 2rem;
align-items: start;
}
.doc-toc {
position: sticky;
top: 6rem;
max-height: calc(100vh - 7rem);
overflow-y: auto;
}
.doc-toc__fold { display: none; }
.doc-toc__column { display: block; }
}
/* Anchor targets land below the sticky header band (3.25rem islands + 2 x --map-gap) and flash briefly. */
.doc > section[id] {
scroll-margin-top: 6rem;
}
.doc > section:target .section-title {
color: rgb(var(--color-brand-700));
}
/* Closing card (DocHelp.razor). */
.doc-help {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 1rem;
align-items: center;
margin-top: 1.5rem;
}
.doc-help__icon {
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
border-radius: 1rem;
background: rgb(var(--color-brand-50));
color: rgb(var(--color-brand-700));
}
.doc-help__icon svg {
width: 1.5rem;
height: 1.5rem;
}
.doc-help__title {
margin: 0;
color: var(--text);
font-size: 1.0625rem;
font-weight: 700;
}
.doc-help__body {
margin: 0.25rem 0 0;
color: var(--text-muted);
font-size: 0.875rem;
line-height: 1.55;
}
.doc-help__actions {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.doc-help__actions > .btn {
flex: 1 1 auto;
}
@media (min-width: 768px) {
.doc-help {
grid-template-columns: auto minmax(0, 1fr) auto;
}
.doc-help__actions {
grid-column: auto;
flex-wrap: nowrap;
}
}
/* Allowed / not allowed (rules pages). */
.compare {
display: grid;
gap: 1rem;
}
@media (min-width: 768px) {
.compare { grid-template-columns: 1fr 1fr; }
}
.compare__card {
display: flex;
flex-direction: column;
border-top-width: 3px;
}
.compare__card--ok { border-top-color: rgb(var(--color-brand-500)); }
.compare__card--bad { border-top-color: var(--sev-critical); }
.compare__title {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0;
color: var(--text);
font-size: 1.125rem;
font-weight: 700;
line-height: 1.3;
}
.rule-mark {
display: grid;
flex-shrink: 0;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 999px;
}
.rule-mark svg {
width: 1rem;
height: 1rem;
}
.rule-mark--ok { background: rgb(var(--color-brand-100)); color: rgb(var(--color-brand-700)); }
.rule-mark--bad { background: #ffe1e2; color: #b4232c; }
.compare__quote {
margin: 1rem 0 0;
padding: 1rem 1.125rem;
border-radius: 1rem;
background: var(--surface-page);
}
.compare__quote figcaption {
color: #8a93a6;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.compare__quote blockquote {
margin: 0.375rem 0 0;
color: var(--text);
font-size: 0.9375rem;
font-style: italic;
line-height: 1.6;
}
.compare__why {
margin: 1.25rem 0 0;
color: var(--text);
font-size: 0.875rem;
font-weight: 700;
}
.rule-list {
display: grid;
gap: 0.625rem;
margin: 0.75rem 0 0;
padding: 0;
list-style: none;
}
.compare__title + .rule-list {
margin-top: 1rem;
}
@media (min-width: 768px) {
.rule-list--split {
grid-template-columns: 1fr 1fr;
gap: 0.75rem 1.5rem;
}
}
.rule-list__item {
position: relative;
padding-left: 1.5rem;
color: var(--text-muted);
font-size: 0.9375rem;
line-height: 1.6;
}
/* Small check / cross, centered on the first line. */
.rule-list__item::before {
content: "";
position: absolute;
left: 0;
top: 0.3rem;
width: 0.9rem;
height: 0.9rem;
background: currentColor;
-webkit-mask: var(--mark) center / contain no-repeat;
mask: var(--mark) center / contain no-repeat;
}
.rule-list__item--ok::before {
--mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
color: rgb(var(--color-brand-600));
}
.rule-list__item--bad::before {
--mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E");
color: var(--sev-critical);
}
/* About: feature cards. */
.features {
display: grid;
gap: 1rem;
}
@media (min-width: 768px) {
.features { grid-template-columns: repeat(3, 1fr); }
}
.feature__title {
margin: 1rem 0 0;
color: var(--text);
font-size: 1rem;
font-weight: 700;
line-height: 1.35;
}
.feature__body {
margin: 0.5rem 0 0;
color: var(--text-muted);
font-size: 0.875rem;
line-height: 1.65;
}
/* About: severity levels as a scale, low to critical - each step topped with its marker color. */
.sev-scale {
display: grid;
gap: 0.75rem;
margin: 1.5rem 0 0;
padding: 0;
list-style: none;
}
@media (min-width: 640px) {
.sev-scale { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
.sev-scale { grid-template-columns: repeat(4, 1fr); }
}
.sev-scale__item {
display: flex;
flex-direction: column;
gap: 0.375rem;
padding: 1rem;
border-radius: 1rem;
background: color-mix(in srgb, var(--c) 8%, var(--surface));
box-shadow: inset 0 3px 0 var(--c);
}
.sev-scale__label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--text);
font-size: 0.9375rem;
font-weight: 700;
}
.sev-scale__label::before {
content: "";
width: 0.625rem;
height: 0.625rem;
border-radius: 999px;
background: var(--c);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent);
}
.sev-scale__desc {
color: var(--text-muted);
font-size: 0.8125rem;
line-height: 1.55;
}
/* How it works: steps on one vertical line. */
.timeline {
margin: 0;
list-style: none;
}
.timeline__step {
position: relative;
display: grid;
grid-template-columns: 2.25rem minmax(0, 1fr);
gap: 1rem;
padding-bottom: 1.75rem;
}
.timeline__step:last-child {
padding-bottom: 0;
}
/* The line between two numbers. */
.timeline__step:not(:last-child)::before {
content: "";
position: absolute;
left: calc(1.125rem - 1px);
top: 2.75rem;
bottom: 0.5rem;
width: 2px;
border-radius: 2px;
background: rgb(var(--color-brand-100));
}
.timeline__num {
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 999px;
background: rgb(var(--color-brand-600));
color: #fff;
font-size: 0.875rem;
font-weight: 800;
box-shadow: 0 0 0 4px rgb(var(--color-brand-100));
}
.timeline__title {
margin: 0.375rem 0 0;
color: var(--text);
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.35;
}
.timeline__body {
margin: 0.375rem 0 0;
color: var(--text-muted);
font-size: 0.9375rem;
line-height: 1.65;
}
/* Icon + text card (moderators note). */
.info-callout {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 1rem;
align-items: start;
border-color: rgb(var(--color-brand-200));
background: rgb(var(--color-brand-50));
}
.info-callout .icon-tile {
background: var(--surface);
}
/* News feed (News.razor, NewsPostCard.razor). */
.news-feed {
display: grid;
/* minmax(0, 1fr), not the implicit auto track: otherwise a card is at least as wide as its widest
unbreakable content (a long word or URL in the title, wide photos) and runs off a phone screen. */
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
}
.news-post {
min-width: 0;
}
.news-post__date {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0.7rem;
border-radius: 999px;
background: rgb(var(--color-brand-50));
color: rgb(var(--color-brand-800));
font-size: 0.8125rem;
font-weight: 600;
}
.news-post__date svg {
width: 0.875rem;
height: 0.875rem;
}
.news-post__title {
margin: 0.875rem 0 0;
color: var(--text);
font-size: 1.375rem;
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.01em;
text-wrap: balance;
overflow-wrap: anywhere;
}
.news-post__text {
max-width: 44rem;
margin-top: 0.75rem;
color: #2c3547;
font-size: 1rem;
line-height: 1.7;
white-space: pre-line;
overflow-wrap: anywhere;
}
.news-post__photos {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
margin-top: 1.25rem;
}
@media (min-width: 640px) {
.news-post__photos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.news-post__photo {
aspect-ratio: 1;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 0.875rem;
background: var(--surface-muted);
transition: transform .15s ease, box-shadow .15s ease;
}
.news-post__photo:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-small);
}
.news-post__photo:focus-visible {
outline: 2px solid rgb(var(--color-brand-600));
outline-offset: 2px;
}
.news-post__photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Empty / done states: illustration or icon, title, text, actions - centered in a card. */
.empty-panel {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.empty-panel__art {
width: 8.75rem;
height: 6.875rem;
margin-bottom: 1.25rem;
}
.empty-panel__icon {
display: grid;
place-items: center;
width: 4rem;
height: 4rem;
margin-bottom: 1rem;
border-radius: 1.25rem;
background: rgb(var(--color-brand-50));
color: rgb(var(--color-brand-700));
}
.empty-panel__icon svg {
width: 1.875rem;
height: 1.875rem;
}
.empty-panel__icon--success {
border-radius: 999px;
background: rgb(var(--color-brand-600));
color: #fff;
box-shadow: 0 0 0 8px rgb(var(--color-brand-100));
margin-bottom: 1.5rem;
}
.empty-panel__title {
margin: 0;
color: var(--text);
font-size: 1.375rem;
font-weight: 800;
letter-spacing: -0.01em;
}
.empty-panel__text {
max-width: 30rem;
margin: 0.5rem auto 1.5rem;
color: var(--text-muted);
}
/* Feedback form: one card - fields, then captcha + submit in a footer strip. */
.feedback-form__body {
display: grid;
gap: 1.5rem;
padding: 1.25rem;
}
.feedback-form__footer {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 1rem;
padding: 1rem 1.25rem;
border-top: 1px solid var(--line);
background: var(--surface-page);
}
@media (min-width: 640px) {
.feedback-form__body { padding: 2rem; }
.feedback-form__footer {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 1.25rem 2rem;
}
}
fieldset.feedback-form__field {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
fieldset.feedback-form__field > legend {
padding: 0;
}
.choice-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.choice-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
min-height: 5.5rem;
justify-content: center;
padding: 0.75rem 0.5rem;
border: 1.5px solid var(--line-strong);
border-radius: 1rem;
background: var(--surface);
color: var(--text-muted);
text-align: center;
cursor: pointer;
transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.choice-card:hover {
border-color: rgb(var(--color-brand-300));
color: var(--text);
}
.choice-card__input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.choice-card__icon svg {
width: 1.5rem;
height: 1.5rem;
}
.choice-card__label {
font-size: 0.875rem;
font-weight: 600;
line-height: 1.25;
}
.choice-card:has(:checked) {
border-color: rgb(var(--color-brand-600));
background: rgb(var(--color-brand-50));
color: rgb(var(--color-brand-800));
}
.feedback-photo {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem;
border: 1px solid var(--line);
border-radius: 1rem;
background: var(--surface-page);
}
.feedback-photo__thumb {
display: grid;
flex-shrink: 0;
place-items: center;
width: 4rem;
height: 4rem;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 0.75rem;
background: var(--surface);
color: #b7c2d6;
}
.feedback-photo__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.feedback-photo__thumb svg {
width: 1.5rem;
height: 1.5rem;
}
.feedback-photo__name {
min-width: 0;
flex: 1;
margin: 0;
overflow: hidden;
color: var(--text);
font-size: 0.875rem;
font-weight: 500;
text-overflow: ellipsis;
white-space: nowrap;
}
.feedback-photo__remove {
flex-shrink: 0;
min-height: 2.5rem;
padding: 0 0.875rem;
border-radius: 999px;
color: #c4232d;
font-size: 0.875rem;
font-weight: 600;
transition: background-color .15s ease;
}
.feedback-photo__remove:hover {
background: #fff0f0;
}
/* ---- Moderation section: denser "working tool" layout, table on tablet/desktop, cards on phones ---- */
/* Status filter inside a section: underline tabs. */
.mod-tabs {
display: flex;
gap: 0.25rem;
margin-top: 1.25rem;
overflow-x: auto;
scrollbar-width: none;
border-bottom: 1px solid var(--line);
}
.mod-tabs::-webkit-scrollbar {
display: none;
}
.mod-tab {
flex: none;
min-height: 2.75rem;
margin-bottom: -1px;
padding: 0 1rem;
border-bottom: 2px solid transparent;
font-size: 0.875rem;
font-weight: 600;
color: var(--text-muted);
background: transparent;
transition: border-color .15s ease, color .15s ease;
}
.mod-tab:hover {
color: var(--text);
border-bottom-color: var(--line-strong);
}
.mod-tab--active,
.mod-tab--active:hover {
color: rgb(var(--color-brand-700));
border-bottom-color: rgb(var(--color-brand-600));
}
.mod-table {
width: 100%;
border-collapse: collapse;
font-size: 0.82rem;
text-align: left;
}
.mod-table thead th {
position: sticky;
top: 0;
z-index: 1;
padding: 0.6rem 0.6rem;
background: #eef1f7;
border-bottom: 1px solid var(--line);
font-size: 0.7rem;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
white-space: nowrap;
}
.mod-table tbody td {
padding: 0.6rem 0.6rem;
border-bottom: 1px solid #eef1f7;
vertical-align: middle;
color: var(--text);
}
.mod-table tbody tr:hover {
background: #f6f8fc;
}
.mod-table tbody tr:last-child td {
border-bottom: none;
}
.mod-table__actions-col {
white-space: nowrap;
text-align: right;
}
.mod-table__submuted {
display: block;
margin-top: 0.2rem;
font-size: 0.7rem;
color: #94a3b8;
white-space: nowrap;
}
.mod-table .severity-badge,
.mod-table .status-badge {
padding: 0.15rem 0.5rem;
font-size: 0.68rem;
}
.mod-table .mod-action-btn {
min-height: 2rem;
padding: 0 0.6rem;
font-size: 0.76rem;
}
.mod-table .mod-actions {
margin-right: 0;
gap: 0.35rem;
}
.mod-table__address-col {
max-width: 15rem;
}
.mod-table__address-link {
display: block;
max-width: 15rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
color: var(--text);
}
.mod-table__address-link:hover {
color: var(--brand);
text-decoration: underline;
}
@media (max-width: 900px) {
.mod-table__address-col,
.mod-table__address-link {
max-width: 9rem;
}
.mod-table .own-request-badge {
white-space: normal;
max-width: 9rem;
}
}
.own-request-badge {
display: inline-flex;
align-self: flex-start;
padding: 0.2rem 0.6rem;
border-radius: 999px;
background: #fff0c2;
color: #8a5b08;
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
}
.mod-actions {
display: inline-flex;
gap: 0.4rem;
margin-right: 0.6rem;
}
.mod-action-btn {
display: inline-flex;
min-height: 2.25rem;
align-items: center;
padding: 0 0.85rem;
border-radius: 0.5rem;
font-size: 0.8rem;
font-weight: 600;
color: #fff;
transition: background-color .12s ease, opacity .12s ease;
}
.mod-action-btn--approve {
background: var(--brand);
}
.mod-action-btn--approve:hover:not(:disabled) {
background: var(--brand-dark);
}
.mod-action-btn--reject {
background: var(--accent);
}
.mod-action-btn--reject:hover:not(:disabled) {
background: var(--accent-dark);
}
.mod-action-btn:disabled {
cursor: not-allowed;
background: var(--line-strong);
color: var(--text-muted);
opacity: 0.8;
}
.mod-action-btn--lg {
min-height: 3rem;
padding: 0 1.5rem;
font-size: 0.9rem;
}
.mod-view-link {
display: inline-flex;
min-height: 2.25rem;
align-items: center;
font-size: 0.8rem;
font-weight: 600;
color: var(--brand);
}
.mod-view-link:hover {
color: var(--brand-dark);
text-decoration: underline;
}
.mod-own-request-notice {
color: #8a5b08;
font-size: 0.9rem;
}
.mod-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-top: 1.5rem;
}
.mod-pagination__btn {
display: inline-flex;
min-height: 2.5rem;
align-items: center;
padding: 0 1rem;
border-radius: 0.6rem;
border: 1px solid var(--line);
background: var(--surface);
font-size: 0.85rem;
font-weight: 600;
color: var(--text);
transition: border-color .12s ease, background-color .12s ease;
}
.mod-pagination__btn:hover:not(:disabled) {
border-color: #bce0cd;
background: var(--brand-soft);
}
.mod-pagination__btn:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.mod-pagination__label {
font-size: 0.85rem;
color: var(--text-muted);
}
/* ---- Moderation cards (narrow screens: same data as the table, stacked) ---- */
.mod-card {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1rem;
border-radius: var(--radius-card);
border: 1px solid var(--line);
background: var(--surface);
box-shadow: var(--shadow-card);
}
.mod-card__header {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
}
.mod-card__address {
margin: 0;
font-weight: 700;
color: var(--text);
}
a.mod-card__address:hover {
color: var(--brand);
text-decoration: underline;
}
.mod-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin: 0;
font-size: 0.8rem;
color: var(--text-muted);
}
.mod-card__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-top: 0.25rem;
padding-top: 0.75rem;
border-top: 1px dashed var(--line);
}
/* ---- Confirm dialog (approve / reject / delete photo) ---- */
.confirm-overlay {
position: fixed;
inset: 0;
z-index: 60;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 0;
background: rgba(14, 21, 37, 0.46);
}
.confirm-dialog {
width: 100%;
max-width: 28rem;
max-height: 90vh;
max-height: 90dvh;
overflow-y: auto;
padding: 1.5rem;
background: var(--surface);
border-radius: 1.25rem 1.25rem 0 0;
box-shadow: 0 -14px 42px rgba(14, 21, 37, 0.22);
}
.confirm-dialog__title {
margin: 0;
font-size: 1.15rem;
font-weight: 800;
color: var(--text);
}
.confirm-dialog__message {
margin: 0.6rem 0 0;
color: var(--text-muted);
line-height: 1.55;
}
.confirm-dialog__body {
margin-top: 1rem;
}
.confirm-dialog__error {
margin: 0.75rem 0 0;
padding: 0.6rem 0.85rem;
border-radius: 0.6rem;
background: #fff0ed;
border: 1px solid #f6b5aa;
color: #a7382d;
font-size: 0.85rem;
}
.confirm-dialog__actions {
display: flex;
justify-content: flex-end;
gap: 0.6rem;
margin-top: 1.5rem;
}
.confirm-dialog__cancel {
display: inline-flex;
min-height: 2.75rem;
align-items: center;
padding: 0 1.1rem;
border-radius: 0.6rem;
border: 1px solid var(--line-strong);
background: var(--surface-strong);
font-size: 0.875rem;
font-weight: 600;
color: var(--text);
}
.confirm-dialog__cancel:hover:not(:disabled) {
background: #f6f8fc;
}
.confirm-dialog__confirm {
display: inline-flex;
min-height: 2.75rem;
align-items: center;
padding: 0 1.4rem;
border-radius: 0.6rem;
background: var(--brand);
color: #fff;
font-size: 0.875rem;
font-weight: 700;
}
.confirm-dialog__confirm:hover:not(:disabled) {
background: var(--brand-dark);
}
.confirm-dialog__confirm--danger {
background: var(--accent);
}
.confirm-dialog__confirm--danger:hover:not(:disabled) {
background: var(--accent-dark);
}
.confirm-dialog__cancel:disabled,
.confirm-dialog__confirm:disabled {
cursor: not-allowed;
opacity: 0.55;
}
@media (min-width: 640px) {
.confirm-overlay {
align-items: center;
padding: 1rem;
}
.confirm-dialog {
border-radius: 1.25rem;
}
}
/* ---- Photo lightbox (map point cards, request details/review) ---- */
/* Gated on [open] so the dialog stays subject to the UA's default `dialog:not([open]) { display: none }`
until openDialog() calls showModal() - author styles otherwise win the cascade over UA styles
regardless of specificity, which would force it visible (outside the top layer) for a frame first. */
.lightbox-overlay[open] {
position: fixed;
inset: 0;
z-index: 70;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
margin: 0;
padding: 1rem;
border: 0;
background: rgba(10, 14, 24, 0.92);
color: #fff;
touch-action: none;
}
.lightbox-overlay::backdrop {
background: transparent;
}
/* Leaves room at the bottom for .lightbox-footer (counter + thumbnail strip) so a tall/portrait photo
never renders underneath it. */
.lightbox-overlay--with-strip {
padding-bottom: 6.5rem;
}
@media (min-width: 640px) {
.lightbox-overlay--with-strip {
padding-bottom: 7.5rem;
}
}
.lightbox-overlay:focus {
outline: none;
}
.lightbox-stage {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.lightbox-image {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
border-radius: 0.5rem;
}
.lightbox-close,
.lightbox-nav {
position: absolute;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 999px;
border: 0;
background: rgba(255, 255, 255, 0.14);
color: #fff;
}
.lightbox-close:hover,
.lightbox-nav:hover {
background: rgba(255, 255, 255, 0.26);
}
.lightbox-close {
top: max(0.75rem, env(safe-area-inset-top));
right: max(0.75rem, env(safe-area-inset-right));
font-size: 1.05rem;
}
.lightbox-nav {
top: 50%;
transform: translateY(-50%);
font-size: 1.6rem;
line-height: 1;
}
.lightbox-nav--prev {
left: max(0.5rem, env(safe-area-inset-left));
}
.lightbox-nav--next {
right: max(0.5rem, env(safe-area-inset-right));
}
/* Groups the counter and the jump-to-photo thumbnail strip into one bottom-anchored block, faded in on
a gradient so both stay legible over a bright photo without needing their own individual pill
backgrounds to compete with the thumbnails. */
.lightbox-footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1.5rem max(0.75rem, env(safe-area-inset-right)) max(0.85rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
background: linear-gradient(to top, rgba(10, 14, 24, 0.85), rgba(10, 14, 24, 0));
pointer-events: none;
}
.lightbox-footer > * {
pointer-events: auto;
}
.lightbox-counter {
padding: 0.3rem 0.85rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
color: #fff;
font-size: 0.8rem;
font-weight: 600;
}
.lightbox-thumbs {
display: flex;
gap: 0.4rem;
max-width: 100%;
padding: 0.2rem;
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.lightbox-thumb {
flex: 0 0 auto;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: 2px solid transparent;
border-radius: 0.5rem;
overflow: hidden;
background: none;
opacity: 0.55;
cursor: pointer;
scroll-snap-align: center;
transition: opacity .15s ease, border-color .15s ease;
}
.lightbox-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.lightbox-thumb:hover {
opacity: 0.85;
}
.lightbox-thumb--active {
opacity: 1;
border-color: #fff;
}
@media (min-width: 640px) {
.lightbox-nav {
width: 3rem;
height: 3rem;
}
.lightbox-nav--prev {
left: 1.5rem;
}
.lightbox-nav--next {
right: 1.5rem;
}
.lightbox-thumb {
width: 3.5rem;
height: 3.5rem;
}
}
/* ---- Moderation section switcher (Заявки / Обратная связь) ---- */
/* Section switcher: a segmented control in a pill, same shape as the map's filter chips. */
.mod-section-tabs {
display: flex;
width: fit-content;
max-width: 100%;
gap: 0.25rem;
margin-top: 1rem;
padding: 0.25rem;
overflow-x: auto;
scrollbar-width: none;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface);
box-shadow: var(--shadow-card);
}
.mod-section-tabs::-webkit-scrollbar {
display: none;
}
.mod-section-tab {
display: inline-flex;
flex: none;
min-height: 2.5rem;
align-items: center;
padding: 0 1.125rem;
border-radius: 999px;
font-size: 0.875rem;
font-weight: 600;
color: var(--text-muted);
background: transparent;
transition: background-color .15s ease, color .15s ease;
}
.mod-section-tab:hover {
color: var(--text);
background: var(--surface-muted);
}
.mod-section-tab--active,
.mod-section-tab--active:hover {
color: #fff;
background: var(--brand);
}
/* ---- Feedback form honeypot ----
Hidden via CSS only (not display:none/JS) so simple bots that only skip JS-hidden or
display:none/type=hidden fields still fill this one in, tripping the server-side check. */
.hp-field {
position: absolute;
left: -5000px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* ---- Cookie consent ----
A glass island like the map's floating UI: bottom sheet on phones, compact card bottom-left from sm up
(clear of the map's zoom controls on the right). */
.cookie-consent {
position: fixed;
z-index: 90;
left: 12px;
right: 12px;
bottom: calc(12px + env(safe-area-inset-bottom));
display: grid;
grid-template-columns: 2.5rem minmax(0, 1fr);
gap: 0.75rem;
padding: 1rem;
border: 1px solid var(--glass-border);
border-radius: 1.5rem;
background: rgba(255, 255, 255, 0.94);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
box-shadow: 0 1px 2px rgba(14, 21, 37, 0.06), 0 16px 48px rgba(14, 21, 37, 0.2);
animation: cookie-consent-in .3s cubic-bezier(.2, .8, .2, 1);
}
.cookie-consent__icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.75rem;
background: var(--brand-soft);
color: var(--brand);
}
.cookie-consent__title {
margin: 0;
color: var(--text);
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
}
.cookie-consent__text {
margin: 0.25rem 0 0;
color: var(--text-muted);
font-size: 0.875rem;
line-height: 1.5;
}
.cookie-consent__link {
color: var(--brand-dark);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.cookie-consent__link:hover {
color: var(--brand);
}
.cookie-consent__actions {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.cookie-consent__reject,
.cookie-consent__accept {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.75rem;
padding: 0 1rem;
border-radius: 0.875rem;
font-size: 0.875rem;
font-weight: 600;
transition: background-color .15s ease, transform .15s ease;
}
.cookie-consent__reject {
background: var(--brand-soft);
color: var(--brand-dark);
}
.cookie-consent__reject:hover {
background: rgb(var(--color-brand-100));
}
.cookie-consent__accept {
background: rgb(var(--color-accent));
color: #fff;
font-weight: 700;
box-shadow: 0 6px 16px rgb(var(--color-accent) / 0.3);
}
.cookie-consent__accept:hover {
background: rgb(var(--color-accent-dark));
}
.cookie-consent__reject:active,
.cookie-consent__accept:active {
transform: scale(0.98);
}
.cookie-consent button:focus-visible,
.cookie-consent__link:focus-visible {
outline: 2px solid rgb(var(--color-accent));
outline-offset: 2px;
}
@keyframes cookie-consent-in {
from { opacity: 0; transform: translateY(16px); }
}
@media (min-width: 640px) {
.cookie-consent {
left: 1rem;
right: auto;
bottom: calc(1rem + env(safe-area-inset-bottom));
width: 26rem;
padding: 1.125rem;
}
.cookie-consent__actions {
grid-column: 2;
}
}
@media (prefers-reduced-motion: reduce) {
.cookie-consent {
animation: none;
}
}
/* Settings mode (reopened from "Cookie settings"): close button, one row per category, a single Save. */
.cookie-consent--settings {
grid-template-columns: 2.5rem minmax(0, 1fr) auto;
}
.cookie-consent__close {
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
margin: -0.25rem -0.25rem 0 0;
border-radius: 999px;
color: var(--text-muted);
transition: background-color .15s ease, color .15s ease;
}
.cookie-consent__close:hover {
background: var(--surface-muted);
color: var(--text);
}
.cookie-consent__close svg {
width: 1.125rem;
height: 1.125rem;
}
.cookie-consent__options {
grid-column: 1 / -1;
margin: 0;
padding: 0;
border: 1px solid var(--line);
border-radius: 1rem;
background: var(--surface);
list-style: none;
}
.cookie-option {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.875rem 1rem;
}
.cookie-option + .cookie-option {
border-top: 1px solid var(--line);
}
.cookie-option__text {
display: flex;
min-width: 0;
flex: 1;
flex-direction: column;
gap: 0.125rem;
cursor: default;
}
label.cookie-option__text {
cursor: pointer;
}
.cookie-option__name {
color: var(--text);
font-size: 0.875rem;
font-weight: 700;
}
.cookie-option__desc {
color: var(--text-muted);
font-size: 0.8125rem;
line-height: 1.45;
}
.cookie-option__locked {
flex-shrink: 0;
color: rgb(var(--color-brand-700));
font-size: 0.75rem;
font-weight: 700;
}
.cookie-consent .cookie-consent__actions--single {
grid-column: 1 / -1;
grid-template-columns: 1fr;
}
/* iOS-style switch on a native checkbox (keeps keyboard + screen reader behavior). */
.switch {
position: relative;
flex-shrink: 0;
width: 2.75rem;
height: 1.625rem;
margin: 0;
border-radius: 999px;
background: var(--line-strong);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: background-color .2s ease;
}
.switch::after {
content: "";
position: absolute;
top: 0.1875rem;
left: 0.1875rem;
width: 1.25rem;
height: 1.25rem;
border-radius: 999px;
background: #fff;
box-shadow: 0 1px 3px rgba(14, 21, 37, 0.25);
transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
.switch:checked {
background: rgb(var(--color-accent));
}
.switch:checked::after {
transform: translateX(1.125rem);
}
.switch:focus-visible {
outline: 2px solid rgb(var(--color-accent));
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.switch, .switch::after { transition: none; }
}
/* ---- First-visit onboarding ----
Same visual language as the map's floating islands: glass card, brand-soft icon tile, accent primary
button. The dimmer is the overlay itself on plain steps, or the spotlight's box-shadow around the
highlighted control (OnboardingTour.razor.js) - the overlay then only blocks clicks. */
.onboarding-open { scroll-behavior: auto; }
.onboarding-overlay {
position: fixed;
inset: 0;
z-index: 80;
background: rgba(14, 21, 37, 0.5);
animation: onboarding-fade .2s ease-out;
}
.onboarding-has-spotlight .onboarding-overlay {
background: transparent;
}
.onboarding-spotlight {
position: fixed;
z-index: 81;
pointer-events: none;
box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgb(var(--color-accent)), 0 0 0 100vmax rgba(14, 21, 37, 0.5);
transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
.onboarding-card {
position: fixed;
z-index: 82;
top: 50%;
left: 50%;
translate: -50% -50%;
width: min(440px, calc(100vw - 24px));
max-height: calc(100dvh - 24px);
overflow: auto;
padding: 1.25rem;
border: 1px solid var(--glass-border);
border-radius: 1.5rem;
background: rgba(255, 255, 255, 0.94);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
box-shadow: 0 1px 2px rgba(14, 21, 37, 0.06), 0 24px 60px rgba(14, 21, 37, 0.24);
animation: onboarding-card-in .28s cubic-bezier(.2, .8, .2, 1);
}
.onboarding-card--anchored {
translate: none;
width: min(400px, calc(100vw - 24px));
}
.onboarding-card__top,
.onboarding-card__actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.onboarding-card__eyebrow {
color: var(--text-muted);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.onboarding-card__close {
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
margin: -0.5rem -0.5rem -0.5rem 0;
border-radius: 999px;
color: var(--text-muted);
transition: background-color .15s ease, color .15s ease;
}
.onboarding-card__close:hover {
background: var(--surface-muted);
color: var(--text);
}
.onboarding-card__body {
animation: onboarding-body-in .22s ease-out;
}
.onboarding-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
margin-top: 0.875rem;
border-radius: 0.875rem;
background: var(--brand-soft);
color: var(--brand);
}
.onboarding-card h2 {
margin: 0.875rem 0 0;
color: var(--text);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
text-wrap: balance;
}
.onboarding-card p {
margin: 0.375rem 0 0;
color: var(--text-muted);
font-size: 0.9375rem;
line-height: 1.55;
}
.onboarding-progress {
display: flex;
gap: 0.375rem;
margin: 1.25rem 0 1rem;
}
.onboarding-progress span {
height: 0.375rem;
flex: 1;
border-radius: 999px;
background: var(--line);
transition: background-color .2s ease;
}
.onboarding-progress span.is-done {
background: rgb(var(--color-brand-200));
}
.onboarding-progress span.is-active {
flex: 2.5;
background: rgb(var(--color-accent));
}
.onboarding-card__actions > div {
display: flex;
gap: 0.5rem;
}
.onboarding-skip,
.onboarding-back,
.onboarding-next {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.75rem;
padding: 0 1rem;
border-radius: 0.875rem;
font-size: 0.875rem;
font-weight: 600;
white-space: nowrap;
transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.onboarding-skip {
margin-left: -0.5rem;
padding: 0 0.5rem;
color: var(--text-muted);
}
.onboarding-skip:hover {
color: var(--text);
}
.onboarding-back {
background: var(--brand-soft);
color: var(--brand-dark);
}
.onboarding-back:hover {
background: rgb(var(--color-brand-100));
}
.onboarding-next {
padding: 0 1.25rem;
background: rgb(var(--color-accent));
color: #fff;
font-weight: 700;
box-shadow: 0 6px 16px rgb(var(--color-accent) / 0.3);
}
.onboarding-next:hover {
background: rgb(var(--color-accent-dark));
}
.onboarding-back:active,
.onboarding-next:active {
transform: scale(0.98);
}
.onboarding-card button:focus-visible {
outline: 2px solid rgb(var(--color-accent));
outline-offset: 2px;
}
@keyframes onboarding-fade {
from { opacity: 0; }
}
@keyframes onboarding-card-in {
from { opacity: 0; transform: translateY(12px) scale(.98); }
}
@keyframes onboarding-body-in {
from { opacity: 0; transform: translateX(8px); }
}
/* Phones: a bottom sheet over the map's bottom dock, flipped to the top edge when the highlighted
control is in the lower half of the screen (placement comes from OnboardingTour.razor.js). */
@media (max-width: 639px) {
.onboarding-card,
.onboarding-card--anchored {
top: auto;
left: 12px;
right: 12px;
bottom: calc(12px + env(safe-area-inset-bottom));
width: auto;
translate: none;
border-radius: 1.5rem;
}
.onboarding-card--top {
top: calc(12px + env(safe-area-inset-top));
bottom: auto;
}
.onboarding-card__actions {
flex-wrap: wrap;
}
}
@media (prefers-reduced-motion: reduce) {
.onboarding-overlay,
.onboarding-card,
.onboarding-card__body {
animation: none;
}
.onboarding-spotlight {
transition: none;
}
}