:root {
color-scheme: light dark;
--bg: #eff2f1;
--surface: #ffffff;
--surface-2: #e4eae9;
--border: #d2dbd9;
--border-strong: #6b807c;
--text: #0e2321;
--text-muted: #4c605d;
--text-subtle: #576c68;
--brand: #0b5f58;
--brand-strong: #084a45;
--on-brand: #ffffff;
--accent-soft: #dcedeb;
--open-bg: #cfebd8;
--open-text: #12532c;
--closed-bg: #e6e4de;
--closed-text: #4a4740;
--star: #9a5b00;
--user: #1d4ed8;
--focus: #0b5f58;
--focus-halo: #ffffff;
--map-paper: #e7e4dc;
--map-tint: none;
--marker-bg: #0b5f58;
--marker-ink: #ffffff;
--shadow-1: 0 1px 2px rgb(14 35 33 / 0.06), 0 1px 1px rgb(14 35 33 / 0.04);
--shadow-2: 0 6px 16px -4px rgb(14 35 33 / 0.14), 0 2px 6px -2px rgb(14 35 33 / 0.08);
--shadow-3: 0 16px 40px -12px rgb(14 35 33 / 0.28), 0 4px 10px -4px rgb(14 35 33 / 0.12);
--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
Arial, "Noto Sans", sans-serif;
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
"Liberation Mono", "Roboto Mono", monospace;
--step--2: 0.75rem;
--step--1: clamp(0.8125rem, 0.7917rem + 0.093vw, 0.875rem);
--step-0: clamp(0.9375rem, 0.9167rem + 0.093vw, 1rem);
--step-1: clamp(1.0625rem, 1.0208rem + 0.185vw, 1.1875rem);
--step-2: clamp(1.1875rem, 1.1042rem + 0.37vw, 1.4375rem);
--step-3: clamp(1.375rem, 1.2083rem + 0.741vw, 1.875rem);
--step-4: clamp(1.75rem, 1.4583rem + 1.296vw, 2.625rem);
--leading-tight: 1.15;
--leading-snug: 1.3;
--leading-normal: 1.55;
--tracking-tight: -0.015em;
--tracking-wide: 0.06em;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
--radius-1: 6px;
--radius-2: 10px;
--radius-3: 14px;
--radius-4: 20px;
--radius-pill: 999px;
--wrap: 105rem;
--wrap-narrow: 70rem;
--gutter: clamp(1rem, 0.65rem + 1.6vw, 2rem);
--filters-h: 3.5rem;
--z-map-chrome: 3;
--z-card-link: 1;
--z-sticky: 30;
--z-overlay: 40;
--z-skip: 60;
--dur-1: 120ms;
--dur-2: 200ms;
--ease: cubic-bezier(0.2, 0, 0.1, 1);
}
@media (min-width: 45rem) {
:root {
--filters-h: 4rem;
}
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0b1514;
--surface: #14201f;
--surface-2: #1e2c2a;
--border: #2b3b39;
--border-strong: #6c8280;
--text: #e9efed;
--text-muted: #a8bcb8;
--text-subtle: #9aaeaa;
--brand: #5fd3c4;
--brand-strong: #8ce7da;
--on-brand: #04211e;
--accent-soft: #132e2c;
--open-bg: #0f3524;
--open-text: #7fe0a3;
--closed-bg: #26251f;
--closed-text: #c0bdb4;
--star: #e2a32b;
--user: #8fb3ff;
--focus: #7fe7d8;
--focus-halo: #0b1514;
--map-paper: #141a19;
--map-tint: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.92)
saturate(0.85);
--marker-bg: #5fd3c4;
--marker-ink: #04211e;
--shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);
--shadow-2: 0 6px 16px -4px rgb(0 0 0 / 0.6), 0 2px 6px -2px rgb(0 0 0 / 0.4);
--shadow-3: 0 16px 40px -12px rgb(0 0 0 / 0.7), 0 4px 10px -4px rgb(0 0 0 / 0.5);
}
}
.card__media--tint-0 { --tint-bg: #d7efec; --tint-ink: #125e54; }
.card__media--tint-1 { --tint-bg: #d7e7ef; --tint-ink: #144b67; }
.card__media--tint-2 { --tint-bg: #d7ddef; --tint-ink: #142a67; }
.card__media--tint-3 { --tint-bg: #ded7ef; --tint-ink: #2d1467; }
.card__media--tint-4 { --tint-bg: #ecd7ef; --tint-ink: #5c1467; }
.card__media--tint-5 { --tint-bg: #efd7e6; --tint-ink: #671448; }
.card__media--tint-6 { --tint-bg: #efd7dc; --tint-ink: #671424; }
.card__media--tint-7 { --tint-bg: #efddd7; --tint-ink: #672a14; }
.card__media--tint-8 { --tint-bg: #efe5d7; --tint-ink: #674614; }
.card__media--tint-9 { --tint-bg: #efecd7; --tint-ink: #635813; }
.card__media--tint-10 { --tint-bg: #e5efd7; --tint-ink: #3d5e12; }
.card__media--tint-11 { --tint-bg: #d7efdc; --tint-ink: #136323; }
@media (prefers-color-scheme: dark) {
.card__media--tint-0 { --tint-bg: #1e3835; --tint-ink: #83e2d5; }
.card__media--tint-1 { --tint-bg: #1e3038; --tint-ink: #83c2e2; }
.card__media--tint-2 { --tint-bg: #1e2538; --tint-ink: #8ba3e4; }
.card__media--tint-3 { --tint-bg: #261e38; --tint-ink: #ac94e6; }
.card__media--tint-4 { --tint-bg: #351e38; --tint-ink: #d787e3; }
.card__media--tint-5 { --tint-bg: #381e2f; --tint-ink: #e387c1; }
.card__media--tint-6 { --tint-bg: #381e24; --tint-ink: #e48b9d; }
.card__media--tint-7 { --tint-bg: #38251e; --tint-ink: #e29c83; }
.card__media--tint-8 { --tint-bg: #382e1e; --tint-ink: #e2bc83; }
.card__media--tint-9 { --tint-bg: #38351e; --tint-ink: #e2d583; }
.card__media--tint-10 { --tint-bg: #2d381e; --tint-ink: #b9e283; }
.card__media--tint-11 { --tint-bg: #1e3824; --tint-ink: #83e296; }
}
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
[hidden] {
display: none !important;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
min-block-size: 100%;
margin: 0;
background-color: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: var(--step-0);
line-height: var(--leading-normal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img,
svg,
video {
display: block;
max-inline-size: 100%;
}
img {
block-size: auto;
}
input,
button,
select,
textarea {
font: inherit;
color: inherit;
letter-spacing: inherit;
}
button {
background: none;
border: 0;
padding: 0;
cursor: pointer;
text-align: inherit;
}
ul,
ol {
padding: 0;
list-style: none;
}
table {
border-collapse: collapse;
}
address {
font-style: normal;
}
h1,
h2,
h3 {
font-weight: 700;
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
text-wrap: balance;
}
p {
text-wrap: pretty;
}
a {
color: var(--brand);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
a:hover {
color: var(--brand-strong);
}
::placeholder {
color: var(--text-subtle);
opacity: 1;
}
::selection {
background: var(--accent-soft);
color: var(--text);
}
:target {
scroll-margin-block-start: calc(var(--filters-h) + var(--space-4));
}
:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
box-shadow: 0 0 0 2px var(--focus-halo);
}
.map__control:focus-visible,
.marker:focus-visible,
.map__popup-close:focus-visible,
.map__popup-link:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--focus-halo), 0 0 0 5px var(--focus);
}
.visually-hidden {
position: absolute !important;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: fixed;
inset-block-start: -6rem;
inset-inline-start: var(--space-3);
z-index: var(--z-skip);
padding: var(--space-3) var(--space-4);
background: var(--brand);
color: var(--on-brand);
border-radius: 0 0 var(--radius-2) var(--radius-2);
font-weight: 600;
text-decoration: none;
box-shadow: var(--shadow-2);
transition: inset-block-start var(--dur-2) var(--ease);
}
.skip-link:focus {
inset-block-start: 0;
color: var(--on-brand);
}
.icon {
inline-size: 1.2em;
block-size: 1.2em;
flex: none;
}
.icon--star {
inline-size: 1em;
block-size: 1em;
color: var(--star);
}
.button {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-block-size: 2.75rem;
padding-inline: var(--space-5);
background: var(--brand);
color: var(--on-brand);
border-radius: var(--radius-pill);
font-weight: 600;
text-decoration: none;
transition: background-color var(--dur-1) var(--ease);
}
.button:hover {
background: var(--brand-strong);
color: var(--on-brand);
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
transition-delay: 0ms !important;
}
}
.home {
padding-block-end: var(--space-7);
}
.home__layout {
display: grid;
gap: var(--space-5);
inline-size: 100%;
max-inline-size: var(--wrap);
margin-inline: auto;
padding-inline: var(--gutter);
padding-block-start: var(--space-5);
}
.home__layout > .map-panel {
display: none;
}
.home__layout[data-view="map"] > .map-panel {
display: block;
}
.home__layout[data-view="map"] .results {
display: none;
}
.results {
min-inline-size: 0;
}
.results__header {
display: flex;
flex-wrap: wrap;
gap: var(--space-3) var(--space-4);
align-items: center;
justify-content: space-between;
margin-block-end: var(--space-4);
}
.results__heading {
font-size: var(--step-2);
font-weight: 700;
color: var(--text);
}
.results__heading [data-results-count] {
font-family: var(--font-mono);
font-size: 1.1em;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
color: var(--brand);
}
.results__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
gap: var(--space-4);
}
.results__empty {
padding: var(--space-7) var(--space-5);
border: 1px dashed var(--border-strong);
border-radius: var(--radius-3);
color: var(--text-muted);
text-align: center;
}
.view-switch {
display: inline-flex;
padding: 3px;
gap: 2px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
}
.view-switch__button {
min-block-size: 2rem;
padding-inline: var(--space-4);
border-radius: var(--radius-pill);
font-size: var(--step--1);
font-weight: 600;
color: var(--text-muted);
transition: background-color var(--dur-1) var(--ease),
color var(--dur-1) var(--ease);
}
.view-switch__button:hover {
color: var(--text);
}
.view-switch__button[aria-pressed="true"] {
background: var(--brand);
color: var(--on-brand);
}
.view-switch__button[aria-pressed="true"]:hover {
background: var(--brand-strong);
color: var(--on-brand);
}
.notfound {
max-inline-size: 34rem;
margin-inline: auto;
padding: var(--space-8) var(--gutter);
text-align: center;
}
.notfound__heading {
font-size: var(--step-4);
}
.notfound__text {
margin-block: var(--space-4) var(--space-6);
color: var(--text-muted);
}
@media (min-width: 70rem) {
.home__layout {
grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
align-items: start;
gap: var(--space-6);
}
.home__layout > .map-panel,
.home__layout[data-view="map"] > .map-panel,
.home__layout[data-view="list"] > .map-panel {
display: block;
}
.home__layout[data-view="map"] .results,
.home__layout[data-view="list"] .results {
display: block;
}
.home__layout > .map-panel {
position: sticky;
align-self: start;
inset-block-start: calc(var(--filters-h) + var(--space-4));
}
.view-switch {
display: none;
}
}
.site-header {
background: var(--surface);
border-block-end: 1px solid var(--border);
}
.site-header__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3) var(--space-4);
inline-size: 100%;
max-inline-size: var(--wrap);
min-block-size: 3.5rem;
margin-inline: auto;
padding: var(--space-3) var(--gutter);
}
.wordmark {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--text);
text-decoration: none;
}
.wordmark__mark {
inline-size: 1.55em;
block-size: 1.55em;
color: var(--brand);
}
.wordmark__text {
font-size: var(--step-1);
font-weight: 700;
letter-spacing: var(--tracking-tight);
white-space: nowrap;
}
.wordmark:hover .wordmark__text {
text-decoration: underline;
text-underline-offset: 0.2em;
}
.site-search {
position: relative;
order: 3;
display: flex;
flex: 1 0 100%;
}
.site-search__icon {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 0.85rem;
translate: 0 -50%;
color: var(--text-subtle);
pointer-events: none;
}
.site-search__input {
inline-size: 100%;
min-block-size: 2.75rem;
padding-inline: 2.6rem var(--space-4);
background: var(--bg);
color: var(--text);
border: 1px solid var(--border-strong);
border-radius: var(--radius-pill);
transition: border-color var(--dur-1) var(--ease),
background-color var(--dur-1) var(--ease);
}
.site-search__input:hover {
background: var(--surface);
}
.site-search__input:focus {
background: var(--surface);
border-color: var(--brand);
}
.site-header__back {
display: inline-flex;
align-items: center;
gap: var(--space-1);
margin-inline-end: auto;
min-block-size: 2.25rem;
padding-inline: var(--space-3);
border-radius: var(--radius-pill);
color: var(--brand);
font-size: var(--step--1);
font-weight: 600;
text-decoration: none;
}
.site-header__back:hover {
background: var(--accent-soft);
}
.site-header__repo {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-block-size: 2.25rem;
padding-inline: var(--space-3);
border-radius: var(--radius-pill);
color: var(--text-muted);
font-size: var(--step--1);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.site-header__repo:hover {
background: var(--surface-2);
color: var(--text);
}
.site-header__repo-icon {
inline-size: 0.95em;
block-size: 0.95em;
}
@media (min-width: 45rem) {
.site-search {
order: 0;
flex: 1 1 14rem;
max-inline-size: 30rem;
}
}
.banner {
display: flex;
align-items: center;
gap: var(--space-3);
padding-block: var(--space-2);
padding-inline: max(var(--gutter), (100% - var(--wrap)) / 2);
background: var(--accent-soft);
color: var(--text);
}
.banner__text {
flex: 1;
font-size: var(--step--1);
line-height: var(--leading-snug);
}
.banner__link {
color: var(--brand);
font-weight: 600;
text-decoration: underline;
}
.banner__link:hover {
color: var(--brand-strong);
}
.banner__dismiss {
display: grid;
place-items: center;
flex: none;
inline-size: 2rem;
block-size: 2rem;
border-radius: var(--radius-pill);
color: var(--text-muted);
transition: background-color var(--dur-1) var(--ease),
color var(--dur-1) var(--ease);
}
.banner__dismiss:hover {
background: var(--surface);
color: var(--text);
}
.filters {
position: sticky;
inset-block-start: 0;
z-index: var(--z-sticky);
min-block-size: var(--filters-h);
padding-block: var(--space-2);
background-color: var(--bg);
background-image: repeating-linear-gradient(
to right,
var(--border-strong) 0 1px,
transparent 1px 14px
);
background-repeat: no-repeat;
background-size: 100% 3px;
background-position: left bottom;
border-block-end: 1px solid var(--border);
}
.filters__row {
display: flex;
align-items: center;
gap: var(--space-2);
min-block-size: 2.5rem;
inline-size: 100%;
max-inline-size: var(--wrap);
margin-inline: auto;
padding-inline: var(--gutter);
overflow-x: auto;
scroll-padding-inline: var(--gutter);
scrollbar-width: none;
}
.filters__row::-webkit-scrollbar {
display: none;
}
.filter {
flex: none;
}
.filter__summary {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-block-size: 2.5rem;
padding-inline: var(--space-4);
background: var(--surface);
color: var(--text);
border: 1px solid var(--border-strong);
border-radius: var(--radius-pill);
font-size: var(--step--1);
font-weight: 600;
white-space: nowrap;
cursor: pointer;
list-style: none;
transition: background-color var(--dur-1) var(--ease),
border-color var(--dur-1) var(--ease);
}
.filter__summary::-webkit-details-marker {
display: none;
}
.filter__summary:hover {
background: var(--surface-2);
}
.filter[open] > .filter__summary {
background: var(--accent-soft);
border-color: var(--brand);
color: var(--brand-strong);
}
.filter__label {
white-space: nowrap;
}
.filter__badge {
display: inline-block;
min-inline-size: 1.35em;
padding-inline: 0.35em;
background: var(--brand);
color: var(--on-brand);
border-radius: var(--radius-pill);
font-family: var(--font-mono);
font-size: var(--step--2);
font-variant-numeric: tabular-nums;
line-height: 1.35em;
text-align: center;
}
.filter__chevron {
inline-size: 0.95em;
block-size: 0.95em;
color: var(--text-subtle);
transition: rotate var(--dur-2) var(--ease);
}
.filter[open] > .filter__summary .filter__chevron {
rotate: 180deg;
color: currentColor;
}
.filter__panel {
position: fixed;
inset: auto 0 0 0;
z-index: var(--z-overlay);
max-block-size: min(60dvh, 24rem);
padding: var(--space-3) var(--space-3) var(--space-5);
overflow-y: auto;
overscroll-behavior: contain;
background: var(--surface);
border-block-start: 1px solid var(--border);
border-radius: var(--radius-4) var(--radius-4) 0 0;
box-shadow: var(--shadow-3);
}
.filter__fieldset {
display: grid;
gap: 1px;
min-inline-size: 0;
margin: 0;
padding: 0;
border: 0;
}
.option {
display: flex;
align-items: center;
gap: var(--space-3);
min-block-size: 2.25rem;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-1);
font-size: var(--step--1);
cursor: pointer;
}
.option:hover,
.option:focus-within {
background: var(--surface-2);
}
.option__input {
flex: none;
inline-size: 1.05em;
block-size: 1.05em;
margin: 0;
accent-color: var(--brand);
}
.option__label {
flex: 1;
min-inline-size: 0;
}
.option__count {
font-family: var(--font-mono);
font-size: var(--step--2);
font-variant-numeric: tabular-nums;
color: var(--text-subtle);
}
.chip {
display: inline-flex;
align-items: center;
flex: none;
min-block-size: 2.5rem;
padding-inline: var(--space-4);
background: var(--surface);
color: var(--text);
border: 1px solid var(--border-strong);
border-radius: var(--radius-pill);
font-size: var(--step--1);
font-weight: 600;
white-space: nowrap;
transition: background-color var(--dur-1) var(--ease),
border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.chip:hover {
background: var(--surface-2);
}
.chip[aria-pressed="true"] {
background: var(--brand);
border-color: var(--brand);
color: var(--on-brand);
box-shadow: inset 0 0 0 1px var(--surface);
}
.chip[aria-pressed="true"]:hover {
background: var(--brand-strong);
border-color: var(--brand-strong);
}
.filters__clear {
display: inline-flex;
align-items: center;
flex: none;
min-block-size: 2.5rem;
padding-inline: var(--space-3);
border-radius: var(--radius-pill);
color: var(--brand);
font-size: var(--step--1);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 0.2em;
}
.filters__clear:hover {
background: var(--accent-soft);
color: var(--brand-strong);
}
.filters__noscript {
max-inline-size: var(--wrap);
margin-inline: auto;
padding: var(--space-2) var(--gutter) 0;
font-size: var(--step--1);
color: var(--text-muted);
}
.filter__done {
margin-block-start: var(--space-2);
padding: var(--space-3);
inline-size: 100%;
min-block-size: 2.75rem;
background: var(--brand);
color: var(--on-brand);
border: 0;
border-radius: var(--radius-2);
font-weight: 700;
}
@media (min-width: 45rem) {
.filters {
padding-block: 0.625rem;
}
.filters__row {
min-block-size: 2.75rem;
flex-wrap: wrap;
overflow: visible;
}
.filter {
position: relative;
}
.filter__summary,
.chip,
.filters__clear {
min-block-size: 2.75rem;
}
.filter__panel {
position: absolute;
inset: calc(100% + 0.5rem) auto auto 0;
inline-size: max-content;
min-inline-size: 13rem;
max-inline-size: min(21rem, 80vw);
max-block-size: min(60vh, 22rem);
padding: var(--space-2);
border: 1px solid var(--border);
border-radius: var(--radius-3);
box-shadow: var(--shadow-2);
}
.filter__done {
display: none;
}
}
.card {
position: relative;
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-3);
overflow: hidden;
content-visibility: auto;
contain-intrinsic-size: auto 21rem;
transition: border-color var(--dur-1) var(--ease),
box-shadow var(--dur-2) var(--ease), translate var(--dur-2) var(--ease);
}
@media (hover: hover) {
.card:hover {
border-color: var(--border-strong);
box-shadow: var(--shadow-2);
translate: 0 -2px;
}
}
.card__media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--surface-2);
}
.card__image {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.card__media--empty {
display: grid;
place-items: center;
background: var(--tint-bg);
}
.card__initial {
font-size: clamp(2.5rem, 7vw, 3.25rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
color: var(--tint-ink);
}
.card__status,
.venue__status,
.map__popup-status {
display: inline-flex;
align-items: center;
gap: 0.45em;
padding: 0.3em 0.6em;
background: var(--closed-bg);
color: var(--closed-text);
border-radius: var(--radius-1);
box-shadow: inset 0 0 0 1px currentColor;
font-family: var(--font-mono);
font-size: var(--step--2);
font-weight: 600;
line-height: 1.25;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
white-space: nowrap;
}
.card__status::before,
.venue__status::before,
.map__popup-status::before {
content: "";
flex: none;
box-sizing: border-box;
inline-size: 0.55em;
block-size: 0.55em;
border: 1px solid currentColor;
border-radius: 50%;
}
.card__status[data-open="true"],
.venue__status[data-open="true"],
.map__popup-status[data-open="true"] {
background: var(--open-bg);
color: var(--open-text);
}
.card__status[data-open="true"]::before,
.venue__status[data-open="true"]::before,
.map__popup-status[data-open="true"]::before {
background: currentColor;
}
.card__status[data-open="false"],
.venue__status[data-open="false"],
.map__popup-status[data-open="false"] {
background: var(--closed-bg);
color: var(--closed-text);
}
.card__status {
position: absolute;
inset-block-start: var(--space-3);
inset-inline-end: var(--space-3);
z-index: 2;
max-inline-size: calc(100% - var(--space-6));
overflow: hidden;
}
.card__body {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-content: start;
gap: var(--space-2) var(--space-3);
flex: 1;
padding: var(--space-4);
}
.card__name {
grid-area: 1 / 1 / 2 / 2;
font-size: var(--step-1);
font-weight: 700;
line-height: var(--leading-snug);
}
.card__link {
color: inherit;
text-decoration: none;
}
.card__link::after {
content: "";
position: absolute;
inset: 0;
z-index: var(--z-card-link);
}
.card__link:hover {
color: var(--brand);
text-decoration: underline;
}
.card__rating {
grid-area: 1 / 2 / 2 / 3;
align-self: start;
display: inline-flex;
align-items: center;
gap: 0.3em;
padding-block-start: 0.15em;
font-family: var(--font-mono);
font-size: var(--step--1);
font-variant-numeric: tabular-nums;
color: var(--text);
}
.card__meta {
grid-area: 2 / 1 / 3 / 3;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 0.5em;
font-size: var(--step--1);
color: var(--text-muted);
}
.card__meta:empty {
display: none;
}
.card__meta > * + *::before {
content: "\00b7";
margin-inline-end: 0.5em;
color: var(--text-subtle);
}
.card__price {
font-family: var(--font-mono);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--brand);
}
.card__tag {
white-space: nowrap;
}
.card__location {
grid-area: 3 / 1 / 4 / 3;
display: flex;
align-items: center;
gap: 0.35em;
font-size: var(--step--1);
color: var(--text-subtle);
}
.card__location-icon {
inline-size: 1em;
block-size: 1em;
}
@supports selector(:has(*)) {
.card:has(.card__link:focus-visible) {
outline: 2px solid var(--focus);
outline-offset: 2px;
box-shadow: 0 0 0 2px var(--focus-halo);
}
.card__link:focus-visible {
outline: none;
box-shadow: none;
}
}
.map-panel {
min-inline-size: 0;
position: relative;
}
.map {
position: relative;
block-size: 17rem;
min-block-size: 15rem;
overflow: hidden;
isolation: isolate;
background-color: var(--map-paper);
background-image: repeating-linear-gradient(
to right,
var(--border) 0 1px,
transparent 1px 64px
),
repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px 64px);
border: 1px solid var(--border);
border-radius: var(--radius-3);
cursor: grab;
user-select: none;
}
.map--dragging {
cursor: grabbing;
}
.map__tiles {
position: absolute;
inset: 0;
scale: var(--pinch, 1);
transform-origin: var(--pinch-x, 50%) var(--pinch-y, 50%);
filter: var(--map-tint);
pointer-events: none;
}
.map__layer {
position: absolute;
inset: 0;
transform: var(--layer-transform, none);
}
.map__tile {
position: absolute;
top: var(--tile-y, 0);
left: var(--tile-x, 0);
inline-size: 256px;
block-size: 256px;
max-inline-size: none;
opacity: 0;
transition: opacity var(--dur-2) var(--ease);
}
.map__tile--loaded {
opacity: 1;
}
.map__markers {
position: absolute;
inset: 0;
scale: var(--pinch, 1);
transform-origin: var(--pinch-x, 50%) var(--pinch-y, 50%);
pointer-events: none;
}
.marker {
position: absolute;
top: var(--y, 0);
left: var(--x, 0);
z-index: 1;
display: grid;
place-items: center;
inline-size: 34px;
block-size: 34px;
transform: translate(-50%, calc(-100% - 4px));
background: var(--marker-bg);
color: var(--marker-ink);
border: 2px solid var(--focus-halo);
border-radius: 50%;
box-shadow: var(--shadow-2);
pointer-events: auto;
cursor: pointer;
}
.marker__icon {
inline-size: 19px;
block-size: 19px;
}
.marker::after {
content: "";
position: absolute;
inset-block-start: calc(100% - 3px);
inset-inline-start: 50%;
inline-size: 0;
block-size: 0;
transform: translateX(-50%);
border-inline: 4px solid transparent;
border-block-start: 7px solid var(--marker-bg);
}
.marker__label {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.marker--active {
z-index: 2;
inline-size: 42px;
block-size: 42px;
box-shadow: 0 0 0 3px var(--marker-bg), var(--shadow-2);
}
.marker--active .marker__icon {
inline-size: 23px;
block-size: 23px;
}
.marker--cluster {
inline-size: 34px;
block-size: 34px;
transform: translate(-50%, -50%);
}
.marker--cluster::after {
display: none;
}
.marker--cluster .marker__label {
position: static;
inline-size: auto;
block-size: auto;
overflow: visible;
clip-path: none;
font-family: var(--font-mono);
font-size: var(--step--2);
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.marker--cluster[data-size="small"] {
inline-size: 30px;
block-size: 30px;
}
.marker--cluster[data-size="medium"] {
inline-size: 38px;
block-size: 38px;
}
.marker--cluster[data-size="large"] {
inline-size: 46px;
block-size: 46px;
}
.marker--cluster[data-size="large"] .marker__label {
font-size: var(--step--1);
}
.marker--user {
inline-size: 18px;
block-size: 18px;
transform: translate(-50%, -50%);
background: var(--user);
border: 3px solid var(--focus-halo);
box-shadow: 0 0 0 1px var(--user), var(--shadow-2);
pointer-events: none;
cursor: default;
}
.marker--user::after {
display: none;
}
.map__controls {
position: absolute;
inset-block-start: var(--space-3);
inset-inline-end: var(--space-3);
z-index: var(--z-map-chrome);
display: grid;
gap: var(--space-2);
}
.map__control {
display: grid;
place-items: center;
inline-size: 2.75rem;
block-size: 2.75rem;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border-strong);
border-radius: var(--radius-2);
box-shadow: var(--shadow-1);
transition: background-color var(--dur-1) var(--ease);
}
.map__control:hover {
background: var(--surface-2);
}
.map__attribution {
position: absolute;
inset-block-end: 0;
inset-inline-end: 0;
z-index: var(--z-map-chrome);
padding: 0.15em 0.6em;
background: var(--surface);
color: var(--text-muted);
border-start-start-radius: var(--radius-1);
font-family: var(--font-mono);
font-size: var(--step--2);
line-height: 1.7;
}
.map__attribution a {
color: var(--brand);
}
.map__popup {
position: absolute;
top: var(--y, 50%);
left: var(--x, 50%);
z-index: 5;
transform: translate(-50%, calc(-100% - 44px));
display: grid;
justify-items: start;
gap: var(--space-2);
pointer-events: auto;
inline-size: max-content;
max-inline-size: min(16rem, 72%);
padding: var(--space-3) var(--space-6) var(--space-3) var(--space-4);
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius-2);
box-shadow: var(--shadow-3);
line-height: var(--leading-snug);
}
.map__popup::after {
content: "";
position: absolute;
inset-block-start: 100%;
inset-inline-start: 50%;
inline-size: 0;
block-size: 0;
transform: translateX(-50%);
border-inline: 7px solid transparent;
border-block-start: 8px solid var(--surface);
}
.map__popup-link {
font-size: var(--step-0);
font-weight: 700;
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
color: var(--text);
text-decoration: none;
}
.map__popup-link:hover {
color: var(--brand);
text-decoration: underline;
}
.map__popup-meta {
font-size: var(--step--1);
color: var(--text-subtle);
}
.map__popup--below {
transform: translate(-50%, 14px);
}
.map__popup-close {
position: absolute;
inset-block-start: var(--space-1);
inset-inline-end: var(--space-1);
display: grid;
place-items: center;
inline-size: 1.75rem;
block-size: 1.75rem;
border-radius: 50%;
font-size: 1.15rem;
line-height: 1;
color: var(--text-muted);
}
.map__popup-close:hover {
background: var(--surface-2);
color: var(--text);
}
.body--home .map {
block-size: min(62vh, 32rem);
block-size: min(62dvh, 32rem);
touch-action: none;
}
@media (min-width: 70rem) {
.body--home .map {
block-size: calc(100vh - var(--filters-h) - var(--space-4) * 2);
block-size: calc(100dvh - var(--filters-h) - var(--space-4) * 2);
min-block-size: 30rem;
}
}
.venue {
max-inline-size: var(--wrap-narrow);
margin-inline: auto;
padding: var(--space-6) var(--gutter) var(--space-8);
}
.venue__layout {
display: grid;
gap: var(--space-6);
}
.venue__main {
display: grid;
gap: var(--space-6);
min-inline-size: 0;
}
.venue__hero {
inline-size: 100%;
max-inline-size: 35rem;
aspect-ratio: 4 / 3;
object-fit: cover;
background: var(--surface-2);
border-radius: var(--radius-4);
}
.venue__hero--empty {
display: grid;
place-items: center;
background: var(--tint-bg);
}
.venue__initial {
font-size: clamp(4rem, 13vw, 6.5rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
color: var(--tint-ink);
}
.venue__intro {
display: grid;
justify-items: start;
gap: var(--space-3);
}
.venue__name {
font-size: var(--step-4);
}
.venue__status {
font-size: var(--step--1);
padding: 0.35em 0.7em;
}
.venue__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
.venue__price {
font-family: var(--font-mono);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--brand);
}
.venue__tag {
padding: 0.25em 0.7em;
background: var(--surface-2);
border-radius: var(--radius-pill);
font-size: var(--step--1);
color: var(--text-muted);
}
.venue__rating {
display: inline-flex;
align-items: center;
gap: 0.35em;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: var(--step--1);
color: var(--text);
}
.venue__description {
max-inline-size: 62ch;
color: var(--text-muted);
}
.venue__section {
display: grid;
gap: var(--space-4);
align-content: start;
}
.venue__main > .venue__section {
padding-block-start: var(--space-5);
border-block-start: 1px solid var(--border);
}
.venue__section-heading {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--step-2);
}
.venue__section-heading .icon {
color: var(--brand);
}
.hours {
inline-size: 100%;
font-size: var(--step--1);
}
.hours__row {
border-block-end: 1px solid var(--border);
}
.hours__row:last-child {
border-block-end: 0;
}
.hours__day {
padding: var(--space-2);
padding-inline-start: var(--space-3);
text-align: start;
font-weight: 500;
color: var(--text-muted);
}
.hours__time {
padding: var(--space-2);
padding-inline-end: var(--space-3);
text-align: end;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
color: var(--text);
}
.hours__row[data-today] {
background: var(--accent-soft);
font-weight: 700;
}
.hours__row[data-today] .hours__day {
box-shadow: inset 3px 0 0 var(--brand);
color: var(--text);
}
.link-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.link-list__link {
display: inline-flex;
align-items: center;
gap: 0.45em;
min-block-size: 2.5rem;
padding-inline: var(--space-4);
background: var(--surface);
color: var(--brand);
border: 1px solid var(--border-strong);
border-radius: var(--radius-pill);
font-size: var(--step--1);
font-weight: 600;
text-decoration: none;
transition: background-color var(--dur-1) var(--ease),
border-color var(--dur-1) var(--ease);
}
.link-list__link:hover {
background: var(--accent-soft);
border-color: var(--brand);
color: var(--brand-strong);
}
.link-list__icon {
inline-size: 0.9em;
block-size: 0.9em;
}
.badge-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.badge {
display: inline-flex;
align-items: center;
padding: 0.3em 0.75em;
background: var(--surface-2);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
font-size: var(--step--1);
}
.venue__address {
line-height: var(--leading-snug);
}
.venue__postal {
display: block;
margin-block-start: var(--space-1);
font-family: var(--font-mono);
font-size: var(--step--1);
letter-spacing: 0.04em;
color: var(--text-muted);
}
.venue__note {
font-size: var(--step--1);
color: var(--text-muted);
}
.nearby {
display: grid;
gap: var(--space-4);
margin-block-start: var(--space-7);
padding-block-start: var(--space-6);
border-block-start: 1px solid var(--border);
}
.nearby__heading {
font-size: var(--step-2);
}
.results__grid--nearby {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}
@media (min-width: 60rem) {
.venue__layout {
grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
align-items: start;
gap: var(--space-7);
}
.venue__aside {
position: sticky;
inset-block-start: var(--space-5);
background: var(--bg);
}
}
.site-footer {
background: var(--surface);
border-block-start: 1px solid var(--border);
}
.site-footer__inner {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-6);
align-items: baseline;
justify-content: space-between;
max-inline-size: var(--wrap);
margin-inline: auto;
padding: var(--space-5) var(--gutter);
font-size: var(--step--1);
color: var(--text-muted);
}
.site-footer__inner p:last-child {
font-family: var(--font-mono);
font-size: var(--step--2);
color: var(--text-subtle);
}