sections inside .hero-filters are always-expanded
* (chevron hidden, summary becomes a small section label).
*
* Mobile (<720px): single column, accordion behavior.
* ┌────────────────┐
* │ headline │
* │ + breadcrumb │
* ├────────────────┤
* │ ▸ atmospheres │ (collapsed by default; tap to expand)
* │ ▸ timeline │
* │ ▸ tags │
* └────────────────┘
*
sections behave natively. Summary shows icon +
* label + active selection + chevron. Tapping toggles.
*
* Why
as the building block:
* - Native accordion semantics → keyboard accessible out of the box
* (Enter/Space toggles, focus stays in DOM order).
* - Screen readers announce expansion state via role="region" w/
* aria-expanded automatically.
* - Zero JS for the toggle on mobile.
* - Easy to "force open" on desktop via CSS (we just hide the
* chevron + always show content; the open/closed state of the
* element is irrelevant because content stays visible regardless).
*
* A small inline script at page bottom strips the "open" attribute
* on mobile load so the sections default-closed there. Pre-strip
* markup ships with "open" set so the desktop default is correct
* even before JS runs (progressive enhancement).
*/
.hero {
padding: 1.25rem 0 0;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
align-items: start;
}
.hero-headline {
/* v9.10.51 — Outer slot for breadcrumb + heading + timeline.
* Order: breadcrumb (top, for navigation context) → heading →
* timeline. The flex gap handles spacing between siblings
* uniformly regardless of order. Pre-v9.10.51 the crumb sat
* below the timeline; operator preferred the crumb on top so
* visitors see WHERE THEY ARE before reading editorial chrome. */
display: flex;
flex-direction: column;
gap: 1rem;
}
.hero-headline .hero-section { padding: 0; }
.hero-headline .crumbs {
/* Inside .hero-headline the flex gap handles spacing; we don't
* want the sticky-bar's compensating margin-top to pull other
* hero items up. Zero out both the margin override and the
* compensating negative top to restore natural flex behavior.
* The sticky behavior itself is preserved. */
margin-bottom: 0;
margin-top: 0;
padding-top: .5rem;
}
.hero-filters {
display: flex;
flex-direction: column;
gap: .75rem;
}
/* Each section is a
with consistent visual treatment.
* Border + radius matches the .card aesthetic so the sections read
* as "filter cards" in the page. */
.hero-filter {
background: var(--card);
border: 1px solid var(--border);
border-radius: 18px;
overflow: hidden;
}
.hero-filter > summary {
display: flex;
align-items: center;
gap: .75rem;
padding: 1rem 1.25rem;
cursor: pointer;
list-style: none;
user-select: none;
font-size: 13px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
/* Remove the default ▶ marker in webkit + firefox. */
.hero-filter > summary::-webkit-details-marker { display: none; }
.hero-filter > summary::marker { display: none; }
.hf-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
flex-shrink: 0;
color: var(--text);
}
.hf-icon svg { width: 18px; height: 18px; }
.hf-label {
/* The fixed "ATMOSPHERES" / "TIMELINE" / "TAGS" text. */
color: var(--text);
flex-shrink: 0;
}
.hf-summary {
/* The dynamic "ALL ITEMS" / "13/05/2026 — 19/05/2026" / etc.
* text. Shows the active selection so the user knows what's
* currently filtered without expanding the section. */
flex: 1;
min-width: 0;
color: var(--text);
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
margin-left: auto;
}
.hf-chevron {
display: inline-flex;
flex-shrink: 0;
color: var(--muted);
transition: transform .2s;
}
.hf-chevron svg { width: 14px; height: 14px; }
.hero-filter[open] > summary > .hf-chevron {
transform: rotate(180deg);
}
.hf-content {
padding: 0 1.25rem 1.25rem;
}
/* ----- Atmosphere list (vertical, count right-aligned, hairline
* between rows). Replaces the horizontal chip strip for the
* home hero context. */
.hf-atmo-list {
display: flex;
flex-direction: column;
}
.hf-atmo-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .85rem 0;
border-bottom: 1px solid var(--border);
text-decoration: none;
color: var(--muted);
font-size: 13px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
transition: color .15s;
}
.hf-atmo-row:last-child { border-bottom: 0; }
.hf-atmo-row:hover { color: var(--text); }
.hf-atmo-row.is-active {
color: var(--text);
/* Heavy underline on the active row matches the image-3 desktop
* mock — the active atmosphere reads as "you are here" with the
* solid baseline emphasis. */
border-bottom-color: var(--text);
}
.hf-atmo-row .hf-atmo-icon {
font-size: 14px;
margin-right: .35rem;
}
.hf-atmo-row .hf-atmo-count {
color: var(--muted);
font-weight: 500;
letter-spacing: .05em;
}
/* ----- Timeline (range input + preset chips). */
.hf-tl-label {
font-size: 10px;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: .55rem;
}
.hf-tl-range {
display: flex;
align-items: center;
gap: .5rem;
padding: .75rem 1rem;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 12px;
margin-bottom: 1rem;
}
.hf-tl-range svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.hf-tl-range input[type="date"] {
border: 0;
background: transparent;
font-size: 14px;
font-weight: 500;
color: var(--text);
font-family: inherit;
/* Native date input width is browser-flexible; this baseline
* keeps both From and To inputs evenly sized inside the row. */
width: 8em;
min-width: 0;
padding: 0;
}
.hf-tl-range input[type="date"]:focus { outline: 0; }
/* Hide the browser's native calendar icon — we already render
* one calendar SVG outside the input as a row-level affordance,
* and the native icon (rendered inside each input on the right)
* was clipping the date value on narrow mobile widths (last
* digit of the year hidden behind the icon, as seen in the
* operator's screenshot).
*
* opacity:0 + width:100% on the indicator keeps it CLICKABLE
* (so tapping anywhere on the input still opens the native
* picker on iOS/Android) but invisible. position:absolute lets
* us anchor it across the full input width so the entire field
* remains a tap target.
*
* Firefox doesn't expose a pseudo-element for its picker
* indicator and doesn't show one by default, so no equivalent
* rule is needed there. */
.hf-tl-range input[type="date"]::-webkit-calendar-picker-indicator {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.hf-tl-range input[type="date"] {
position: relative;
}
.hf-tl-range .hf-tl-sep { color: var(--muted); }
.hf-tl-presets {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
.hf-tl-preset {
display: inline-flex;
align-items: center;
padding: .55rem 1rem;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
text-decoration: none;
color: var(--text);
background: var(--bg);
border: 1px solid var(--border);
border-radius: 999px;
transition: background .15s, color .15s, border-color .15s;
}
.hf-tl-preset:hover {
border-color: var(--border-strong);
}
.hf-tl-preset.is-active {
background: var(--text);
color: var(--bg);
border-color: var(--text);
}
/* ----- Tag checkbox list. */
.hf-tag-list {
display: flex;
flex-direction: column;
gap: .15rem;
}
.hf-tag-row {
display: flex;
align-items: center;
gap: .6rem;
padding: .55rem 0;
text-decoration: none;
color: var(--muted);
font-size: 12px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
transition: color .15s;
}
.hf-tag-row:hover { color: var(--text); }
.hf-tag-row.is-active { color: var(--text); }
.hf-tag-box {
/* The checkbox-style indicator. 16x16 square; checked state shows
* an accent-colored checkmark. */
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px; height: 16px;
flex-shrink: 0;
border: 1.5px solid var(--border-strong);
border-radius: 3px;
color: transparent;
transition: border-color .15s, color .15s;
}
.hf-tag-row.is-active .hf-tag-box {
/* Use the brand accent for the checked state. var(--accent) is
* the same pink/rose used for active highlights elsewhere. */
color: var(--accent, #e11d48);
border-color: var(--accent, #e11d48);
}
.hf-tag-box svg { width: 12px; height: 12px; }
.hf-tag-row.is-active .hf-tag-icon {
/* Reserved for tags that ship with a leading emoji (operator-set);
* doesn't affect the box but inherits the active color. */
color: var(--text);
}
/* Tag clear-all link, rendered when 2+ tags active. */
.hf-tag-clear {
display: inline-flex;
align-items: center;
gap: .35rem;
margin-top: .75rem;
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
}
.hf-tag-clear:hover { color: var(--text); }
.hf-tag-clear svg { width: 11px; height: 11px; }
/* ----------------------------------------------------------
* Desktop: 3-column layout, sections always expanded, chevron
* hidden, summary acts as a quiet section label.
* ---------------------------------------------------------- */
@media (min-width: 720px) {
/* New structure (v9.8.1):
*
* ┌─────────────────────────────────────────────┐
* │ headline (h1) │
* │ TIMELINE — date inputs + presets │
* │ breadcrumb │
* ├──────────────────────┬──────────────────────┤
* │ ATMOSPHERES │ TAGS │
* │ (collapsible card) │ (collapsible card) │
* └──────────────────────┴──────────────────────┘
*
* Pre-fix the layout was a 3-col grid with headline left,
* timeline middle, atmospheres+tags right. The operator noted
* (a) atmospheres often produced a tall right column next to
* a short timeline column (dead space), and (b) when filtered
* to a non-events atmosphere the middle column went empty.
* Moving timeline up into the headline block solves both: every
* filter is at the top OR below in a tight 2-col row, no
* gymnastics needed.
*
* The two cells flow naturally:
* - .hero-headline takes the full grid row 1 (grid-column 1 / -1)
* - .hero-filters takes grid row 2 with a nested 2-col grid for
* atmospheres + tags.
*/
.hero-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.hero-headline {
grid-column: 1 / -1;
grid-row: 1;
}
.hero-filters {
grid-column: 1 / -1;
grid-row: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
align-items: start;
}
/* When tags section is absent, atmospheres takes the full width.
* :has() handles this without a server-side class hint; older
* browsers fall through to a half-width atmospheres + empty
* right column — degraded but functional. */
.hero-filters:not(:has(.hero-filter.tags)) {
grid-template-columns: 1fr;
}
/* Headline block: heading on top, timeline below (compact
* inline form), breadcrumb at the bottom. Generous gap between
* heading and timeline so the date controls don't crowd the
* "what's On" wordmark. */
.hero-headline {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
/* Timeline inside the headline — borderless, just the inputs +
* presets row. The whole thing reads as a "primary control bar"
* under the heading, not as a card. Section label stays for
* orientation; chevron + active-summary text are hidden because
* the inputs themselves communicate the current state. */
.hero-headline .hero-filter.timeline {
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
margin: 0;
}
.hero-headline .hero-filter.timeline > summary {
cursor: default;
padding: 0 0 .5rem;
font-size: 10px;
letter-spacing: .25em;
color: var(--muted);
pointer-events: none;
}
.hero-headline .hero-filter.timeline > summary .hf-icon,
.hero-headline .hero-filter.timeline > summary .hf-summary,
.hero-headline .hero-filter.timeline > summary .hf-chevron {
display: none;
}
.hero-headline .hero-filter.timeline .hf-content {
padding: 0;
/* Force expanded regardless of
attribute. The
* inputs and chips are the primary affordance; collapsing them
* would hide the most-used filter behind a click. */
display: block !important;
}
/* Lay out the timeline section as one horizontal row on desktop:
* "SELECT RANGE" label | date inputs | preset chips. Tighter than
* the mobile stacked form. */
.hero-headline .hero-filter.timeline .hf-tl-label {
display: none;
}
.hero-headline .hero-filter.timeline .hf-content {
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: .75rem;
}
.hero-headline .hero-filter.timeline .hf-tl-range {
margin-bottom: 0;
flex: 0 0 auto;
}
.hero-headline .hero-filter.timeline .hf-tl-presets {
flex: 0 0 auto;
}
/* Breadcrumb at the bottom of headline: sits below timeline. */
.hero-headline .crumbs {
margin-bottom: 0;
margin-top: 0;
}
}
/* Mobile: keep accordion behavior. Adjust the date inputs so two
* fit comfortably on narrow screens; presets wrap. Also make the
* timeline card hide its inline label on narrow widths because the
* accordion summary already announces the section. */
@media (max-width: 540px) {
.hf-tl-range { padding: .65rem .85rem; gap: .35rem; }
.hf-tl-range input[type="date"] { width: 7.4em; font-size: 13px; }
.hero-filter > summary { padding: .85rem 1rem; font-size: 12px; }
.hf-content { padding: 0 1rem 1rem; }
}
/* ============================================================
BENTO GRID — unfiltered home only. Editorial sizing.
============================================================ */
.bento {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 240px;
gap: 1rem;
}
@media (max-width: 1100px) { .bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 220px; } }
@media (max-width: 800px) { .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; gap: .75rem; } }
@media (max-width: 480px) { .bento { grid-template-columns: 1fr; grid-auto-rows: 220px; } }
.bento .span-2x2 { grid-column: span 2; grid-row: span 2; }
.bento .span-2x1 { grid-column: span 2; }
@media (max-width: 480px) {
.bento .span-2x2 { grid-row: span 2; }
.bento .span-2x1 { grid-row: span 1; }
.bento .span-2x2, .bento .span-2x1 { grid-column: span 1; }
}
/* ---------- Uniform grid (drill view, search results, favorites) ---------- */
.uniform-grid {
display: grid;
/* Cards stay between 220–280px wide so a single result doesn't
stretch full-row-wide. Wide viewports get more columns
naturally; narrow ones get fewer. */
grid-template-columns: repeat(auto-fill, minmax(220px, 280px));
justify-content: start;
gap: 1rem;
}
@media (max-width: 480px) {
.uniform-grid { grid-template-columns: 1fr; gap: .75rem; }
}
/* ============================================================
CARD — image-as-background + content overlay
============================================================ */
.card {
position: relative;
border-radius: 22px;
overflow: hidden;
background: var(--card);
cursor: pointer;
transition: transform .35s cubic-bezier(.16,1,.3,1);
isolation: isolate;
display: block;
text-decoration: none;
color: inherit;
}
/* Hover transform only on devices that actually have hover.
* Without this guard, iOS Safari triggers :hover on touchend and
* leaves the card translated up by 3px until the next tap elsewhere
* — visually "stuck", confusing for touch users. */
@media (hover: hover) {
.card:hover { transform: translateY(-3px); }
}
/* v9.3 — Cards get an aspect-ratio when placed in .uniform-grid
(drill view, search, favorites). Without this, all .card-*
children are position:absolute and the card collapses to 0
height — invisible. The bento sets row heights explicitly via
grid-auto-rows, so cards there don't need aspect-ratio. */
.uniform-grid > .card {
aspect-ratio: 1 / 1;
}
@media (max-width: 480px) {
.uniform-grid > .card { aspect-ratio: 16 / 10; }
}
.card-img {
position: absolute; inset: 0;
transition: transform .8s cubic-bezier(.16,1,.3,1);
background: linear-gradient(135deg, var(--card-elev), var(--card));
}
@media (hover: hover) {
.card:hover .card-img { transform: scale(1.04); }
}
.card-img img {
width: 100%; height: 100%; object-fit: cover;
opacity: .9;
}
.card-img-empty-icon {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 3rem; opacity: .25;
pointer-events: none;
}
.card-overlay {
position: absolute; inset: 0;
background: var(--gradient-overlay);
pointer-events: none;
}
/* atmosphere accent on a card — thin colored bottom bar */
.card[data-accent] {
box-shadow: inset 0 -3px 0 var(--card-accent);
}
/* v9.10.26 / v9.10.29 — "No image" card variant. When an operator
skips the cover image, the card falls back to the atmosphere's
emoji (placeCard / tripCard). v9.10.26 also shortened the card
aspect-ratio to make the variant visually distinct; v9.10.29
reverts that — in a uniform grid, mixing aspect ratios makes the
layout look broken (rows of different-height cards). Image cards
and emoji cards now share the same outer dimensions; the only
differences are inside the .card-img frame:
- soft neutral background instead of a photo
- large centered emoji at full opacity (not the .25 watermark
used for the legacy "missing image" placeholder pattern)
- de-emphasized overlay so the emoji isn't darkened.
The accent ribbon and meta block keep their normal positions
so the card still belongs to its atmosphere visually. */
.card.is-no-image .card-img {
background: linear-gradient(135deg, var(--card) 0%, var(--card-elev) 100%);
}
.card.is-no-image .card-img-empty-icon {
font-size: clamp(2.5rem, 7vw, 4rem);
opacity: 1;
}
/* Slightly de-emphasize the overlay so the emoji isn't darkened. */
.card.is-no-image .card-overlay {
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 100%);
}
/* card top row (badge + actions) */
.card-top {
position: absolute; top: 1rem; left: 1rem; right: 1rem;
display: flex; justify-content: space-between; align-items: flex-start;
gap: .5rem;
z-index: 2;
pointer-events: none;
}
.card-top > * { pointer-events: auto; }
.badge {
display: inline-flex; align-items: center; gap: .5rem;
padding: .3rem .6rem;
background: rgba(255,255,255,.12);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.14);
border-radius: 7px;
font-size: 9px; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: var(--on-image);
}
.badge-live {
background: #ef4444;
color: white;
padding: .15rem .4rem;
border-radius: 4px;
font-size: 9px; font-weight: 800;
letter-spacing: .05em;
}
.badge-live::before {
content: '';
display: inline-block;
width: 6px; height: 6px;
background: white;
border-radius: 50%;
margin-right: .35rem;
animation: pulse 1.6s ease-in-out infinite;
vertical-align: 1px;
}
@keyframes pulse {
0%,100% { opacity: 1; }
50% { opacity: .35; }
}
/* hover-reveal action buttons (favorite, share) */
.card-actions {
display: flex; gap: .35rem;
opacity: 0;
transform: translateY(-4px);
transition: opacity .25s, transform .25s;
}
.card:hover .card-actions,
.card:focus-within .card-actions {
opacity: 1; transform: translateY(0);
}
@media (hover: none) {
/* Touch devices: actions always visible (lighter weight) */
.card-actions { opacity: 1; transform: none; }
}
.action-btn {
width: 34px; height: 34px;
border-radius: 50%;
background: rgba(255,255,255,.12);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.16);
color: white;
display: inline-flex; align-items: center; justify-content: center;
transition: all .2s;
}
.action-btn:hover { background: white; color: black; }
.action-btn svg { width: 14px; height: 14px; }
.action-btn[aria-pressed="true"] {
background: #ef4444;
border-color: #ef4444;
}
.action-btn[aria-pressed="true"] svg { fill: currentColor; }
.action-btn[aria-pressed="true"]:hover { background: white; color: #ef4444; }
.action-btn[aria-pressed="true"]:hover svg { fill: currentColor; }
/* Detail-page heart button (.btn rather than .action-btn) gets the
* same filled treatment when active. Uses the same aria-pressed
* attribute for consistency. */
.btn[aria-pressed="true"] svg { fill: currentColor; color: #ef4444; }
/* card bottom (text content) */
.card-bottom {
position: absolute; bottom: 1.1rem; left: 1.25rem; right: 1.25rem;
z-index: 2;
color: var(--on-image);
}
.card-name {
font-size: 1.35rem; font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.15;
margin-bottom: .25rem;
display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.card-meta {
font-size: 10px; font-weight: 600;
letter-spacing: .15em; text-transform: uppercase;
color: rgba(255,255,255,.72);
display: flex; align-items: center; gap: .35rem;
flex-wrap: wrap;
}
.card-meta .dot { opacity: .5; }
/* v9.10.31 — Tag chips on placeCard. Sit below the subtype line so
they read as "attributes of this place" (e.g. French, Rooftop)
distinct from the subtype's identity classification (Bakery &
Pastry, Restaurant). Visual style is a soft glass pill — same
family as the top-row .badge but lower-contrast, mixed case, and
sized smaller so they sit politely under the name rather than
competing with it. */
.card-tags {
display: flex; flex-wrap: wrap; gap: .25rem;
margin-top: .4rem;
}
.card-tag {
display: inline-flex; align-items: center; gap: .25rem;
padding: .2rem .5rem;
background: rgba(255,255,255,.14);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,.18);
border-radius: 999px;
font-size: 10px; font-weight: 600;
letter-spacing: .02em;
color: rgba(255,255,255,.92);
line-height: 1.2;
}
/* On no-image cards the background is a soft light gradient, so
the glass-on-photo effect doesn't read. The bottom area is still
darkened by .card-overlay (linear-gradient 0-25% black) so white
text stays legible; we just give the pill a slightly stronger
stroke and darker fill so it doesn't disappear into the gradient. */
.card.is-no-image .card-tag {
background: rgba(0,0,0,.18);
border-color: rgba(255,255,255,.22);
}
/* large card variant — bigger type */
.card.span-2x2 .card-name {
font-size: clamp(1.65rem, 3vw, 2.4rem);
letter-spacing: -0.025em;
-webkit-line-clamp: 3;
}
.card.span-2x2 .card-bottom {
bottom: 1.5rem; left: 1.65rem; right: 1.65rem;
}
.card.span-2x2 .card-meta { font-size: 11px; }
/* wide card */
.card.span-2x1 .card-name {
font-size: 1.55rem;
}
/* trip metadata strip on the card */
.trip-meta {
display: flex; align-items: center; flex-wrap: wrap;
gap: .65rem;
font-size: 11px; font-weight: 500;
letter-spacing: .04em;
color: rgba(255,255,255,.85);
margin-top: .25rem;
}
.trip-meta-item {
display: inline-flex; align-items: center; gap: .25rem;
}
/* hosted event nested mini-card (Pavillon-style)
v9.10.39 — Full-width mini-card (was max-width:65%). When a place
hosts an upcoming event, that event is meaningful info — the
visitor wants to read the event name without it being truncated.
The pill carries the matching atmosphere's accent color (set
inline via style="background:..." on the inner .hosted-event-icon)
so the embedded event reads as part of its atmosphere visually. */
.hosted-event {
position: absolute; bottom: 1.1rem; right: 1.25rem; left: 1.25rem;
z-index: 3;
background: rgba(255,255,255,.12);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,.18);
border-radius: 12px;
padding: .55rem .75rem;
display: flex; align-items: center; gap: .6rem;
/* v9.5 — non-clickable visual span; the card itself is the link. */
pointer-events: none;
color: var(--on-image);
}
/* v9.10.39 — Pill is a 2-line stack (day on top, month abbreviation
below) so a single 30×30 square carries both. Default background
stays red for back-compat; the inline style overrides with the
atmosphere accent when the event belongs to one. */
.hosted-event-icon {
width: 32px; min-height: 32px;
background: #ef4444;
border-radius: 8px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
color: white;
letter-spacing: .04em;
flex-shrink: 0;
padding: .15rem 0;
line-height: 1;
}
.hosted-event-day {
font-size: 13px; font-weight: 800;
line-height: 1;
}
.hosted-event-month {
font-size: 8px; font-weight: 700;
letter-spacing: .1em;
opacity: .92;
margin-top: 1px;
}
/* "NOW" ongoing badge stays urgent-red even when an atmosphere
accent is configured — temporal "happening right now" is a
stronger signal than the atmosphere's visual identity. */
.hosted-event-icon-live {
background: #ef4444 !important;
font-size: 9px; font-weight: 800;
}
/* Single-glyph schedule badge (recurring events with only a
weekday letter). Same 32×32 footprint as the day/month pill. */
.hosted-event-icon-sched {
font-size: 13px; font-weight: 800;
}
.hosted-event-info {
color: var(--on-image);
min-width: 0;
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.hosted-event-info .label {
font-size: 9px; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
opacity: .85;
}
.hosted-event-info .name {
font-size: 12px; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* on a card with hosted event, push the card-bottom up so they don't overlap */
.card.has-hosted .card-bottom {
bottom: 4.5rem;
}
@media (max-width: 480px) {
.hosted-event { right: 1rem; left: 1rem; bottom: .95rem; }
.card.has-hosted .card-bottom { bottom: 4.25rem; }
}
/* ============================================================
ATMOSPHERE CARD — home grid entry points (v9.1)
============================================================
Visually distinct from component cards:
- Larger label type
- Optional italic Playfair description below label
- Count badge in top-right corner (number of components)
- Accent block fills the card when no cover image (high color
saturation — Shopping pink, Park green, etc.)
- When cover image present, image fills with overlay; label
sits at the bottom-left in white.
The bento section .atmo-bento gives these cards generous heights
so they read as editorial entry points, not list items.
*/
.atmo-bento {
/* Override default bento row height for slightly taller atmosphere
cards — they need more breathing room for the editorial label
and description than component cards do. */
grid-auto-rows: 280px;
}
@media (max-width: 1100px) { .atmo-bento { grid-auto-rows: 260px; } }
@media (max-width: 800px) { .atmo-bento { grid-auto-rows: 240px; } }
@media (max-width: 480px) { .atmo-bento { grid-auto-rows: 240px; } }
.atmo-card {
position: relative;
border-radius: 22px;
overflow: hidden;
background: var(--card);
cursor: pointer;
transition: transform .35s cubic-bezier(.16,1,.3,1);
isolation: isolate;
display: block;
text-decoration: none;
color: inherit;
}
@media (hover: hover) {
.atmo-card:hover { transform: translateY(-3px); }
}
.atmo-card .card-img {
position: absolute; inset: 0;
transition: transform .8s cubic-bezier(.16,1,.3,1);
}
@media (hover: hover) {
.atmo-card:hover .card-img { transform: scale(1.04); }
}
.atmo-card .card-img img {
width: 100%; height: 100%; object-fit: cover;
}
.atmo-card .card-img-empty-icon {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
pointer-events: none;
}
.atmo-card .card-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.55) 100%);
pointer-events: none;
}
/* Top-right count badge */
.atmo-card-top {
position: absolute; top: 1rem; right: 1rem;
z-index: 2;
}
.atmo-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 32px; height: 32px; padding: 0 .55rem;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
color: white;
border-radius: 999px;
font-weight: 700; font-size: .85rem;
letter-spacing: -0.01em;
}
.atmo-count.is-loading {
animation: pulse 1.6s ease-in-out infinite;
}
/* Card body — label + optional description */
.atmo-card-body {
position: absolute; bottom: 1.25rem; left: 1.5rem; right: 1.5rem;
z-index: 2;
}
.atmo-card-label {
font-family: 'Outfit', sans-serif;
font-size: clamp(1.15rem, 2vw, 1.5rem);
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.15;
margin-bottom: .35rem;
}
.atmo-card-description {
font-family: 'Playfair Display', Georgia, serif;
font-style: italic;
font-weight: 400;
font-size: .92rem;
line-height: 1.45;
opacity: .92;
display: -webkit-box;
-webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
/* Color modes: white text on image overlay, white on saturated accent block */
.atmo-card.on-image .atmo-card-label,
.atmo-card.on-image .atmo-card-description,
.atmo-card.on-accent .atmo-card-label,
.atmo-card.on-accent .atmo-card-description {
color: #ffffff;
}
.atmo-card.on-accent .card-overlay {
/* On accent cards (no cover image) we don't need the dark gradient —
the accent itself provides text contrast. The .card-img already
fills with the accent color via inline style. */
display: none;
}
/* Span variants for bento layout — same names as component bento so
the .bento grid rules drive sizing identically. */
.atmo-card.span-2x2 .atmo-card-label {
font-size: clamp(1.65rem, 3vw, 2.5rem);
letter-spacing: -0.025em;
}
.atmo-card.span-2x2 .atmo-card-description {
font-size: 1rem;
-webkit-line-clamp: 4;
}
.atmo-card.span-2x2 .atmo-card-body {
bottom: 1.65rem; left: 1.85rem; right: 1.85rem;
}
.atmo-card.span-2x1 .atmo-card-label {
font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}
/* Touch — count badge stays the same; nothing to suppress */
/* ============================================================
TIME CHIP STRIP — secondary filter for events (Today, Tomorrow…)
============================================================
v9.2 — Visually downgraded vs. atmosphere chips so the user
reads the hierarchy: atmosphere = primary filter (Event/Trip/etc),
time = secondary refinement within events. Smaller, ghost-style,
no border. The custom date range form is styled to match —
no native input chrome leaks through.
*/
.chips-time {
border-top: 0;
padding-top: 0;
/* No edge fade since the strip is tighter and rarely overflows */
-webkit-mask-image: none;
mask-image: none;
gap: .15rem;
font-size: 12px;
}
.chip-time {
padding: .35rem .85rem;
font-size: 11px;
font-weight: 600;
letter-spacing: .05em;
text-transform: none;
background: transparent;
border: 0;
color: var(--text-soft);
border-radius: 999px;
}
.chip-time:hover {
background: var(--pill-bg);
color: var(--text);
border: 0;
}
.chip-time.active,
.chip-time.is-active {
background: var(--text);
color: var(--bg);
}
.chip-time .chip-count {
margin-left: .35rem;
opacity: .55;
font-weight: 600;
}
.chip-time-range {
display: inline-flex; align-items: center; gap: .4rem;
padding: .35rem .75rem;
background: var(--pill-bg);
border-radius: 999px;
font-size: 11px;
color: var(--text-soft);
margin-left: .35rem;
}
.chip-time-range.active {
background: var(--text);
color: var(--bg);
}
.chip-time-range .chip-icon {
font-size: 13px;
opacity: .7;
display: inline-flex;
}
.chip-date-input {
background: transparent;
border: 0;
padding: 0;
font: inherit;
font-size: 11px;
font-weight: 600;
color: inherit;
font-family: inherit;
width: 5.5rem;
cursor: pointer;
outline: none;
}
/* v9.6 — Hide the native calendar icon so it doesn't compete with
our 📅 emoji in the chip. Pre-v9.6 the indicator was stretched
across the input via position:absolute + inset:0 with opacity:0
— but absolute-positioned indicators on date inputs anchor to
the body in some browsers, capturing clicks across the page and
blocking access to the atmosphere chips above. The simpler
"display: none" removes the indicator from layout entirely;
tapping the input opens the picker via the input's own behavior. */
.chip-date-input::-webkit-calendar-picker-indicator {
display: none;
}
.chip-date-input::-webkit-datetime-edit { color: inherit; padding: 0; }
.chip-date-input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.chip-date-input::-webkit-inner-spin-button { display: none; }
.chip-date-input::placeholder { color: var(--muted); }
.chip-time-range.active .chip-date-input { color: var(--bg); }
.chip-range-sep {
opacity: .5;
font-size: 10px;
}
.chip-time.chip-clear {
font-size: 14px;
font-weight: 600;
padding: .35rem .65rem;
line-height: 1;
}
/* Header label above the time chips */
.events-toolbar {
display: flex; flex-direction: column; gap: .5rem;
margin-bottom: 1.5rem;
}
.events-toolbar-row {
display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.events-section-label {
font-size: 10px; font-weight: 700;
letter-spacing: .25em; text-transform: uppercase;
color: var(--muted);
}
/* ============================================================
EVENT CARD — date chip + name (one-off events in events row)
============================================================ */
/* v9.2 — Two presentations:
- Image variant: uses .card scaffold; date sits in .event-date-badge
pinned to the top-left corner (overlay glass pill).
- Compact variant: side-by-side date chip + info + arrow row,
used when there's no image and on the home detail's "What's on"
cards (different selector — .whats-on-item).
*/
/* ============================================================
EVENT CARD — __access20 visual differentiation (C1 + C2 + C3)
============================================================
Two variants:
- Image variant: .card.is-event scaffold; horizontal date pill at
top-left, time pill in card body, ribbon along top edge.
- Compact variant: .event-card grid: date column + info + arrow.
Date column is the narrow vertical pill (kept for dense rows
like the hosted-events strip on a venue's detail page). Same
ribbon, same time-pill in the info block.
C3 — atmosphere accent ribbon. Both variants use a ::before pseudo-
element that paints a 4px stripe along the top edge of the card.
The color comes from --card-accent, set by inline style only when
the server attached _atmosphereAccent. Cards without an accent
skip the ribbon (the pseudo's background is transparent without
the variable).
*/
/* C1 — Horizontal date pill (image variant)
* Glass-translucent pill, top-left of image card. Single horizontal
* line carrying the relative or absolute label (TODAY / TOMORROW /
* THU 14 MAY / 14 MAY). Tabular numerals so dates align across cards. */
.event-date-pill {
display: inline-flex; align-items: center;
padding: .35rem .65rem;
background: rgba(0,0,0,.72);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
color: white;
border-radius: 999px;
font-size: 11px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
font-variant-numeric: tabular-nums;
pointer-events: none;
white-space: nowrap;
}
.event-date-pill.is-live {
background: #ef4444;
}
.event-date-pill.is-today {
background: rgba(239, 68, 68, .92);
}
.event-date-pill.is-tomorrow {
background: rgba(0,0,0,.82);
}
.event-date-pill.is-recurring {
background: rgba(0,0,0,.6);
font-weight: 600;
}
/* C3 — Accent ribbon along the top edge.
*
* Painted via ::before only when the card has a [data-accent]
* attribute AND .is-event class. Sits ABOVE the image (z-index 2)
* so it shows over the card's overflow:hidden boundary. Height kept
* minimal so it reads as a "this is an event" signal without
* dominating the visual. The atmosphere-color tint reinforces the
* card's relationship to its parent atmosphere (a Culture & Heritage
* exhibition shows a culture-tinted ribbon).
*
* The image variant has the ribbon overlay the top of the image —
* z-index above .card-img (which is the absolute-positioned image)
* but below .card-top (where the date pill sits) so the pill stays
* crisp above the ribbon.
*/
/* v9.10.43 — Ribbon now ALSO applies to every accented card on a
* drill page (.atmo-drill-in .card[data-accent]). Pre-fix the ribbon
* only attached to event cards; on an atmosphere drill page
* (e.g. /evening-drinks/next-7-days) the place cards visually had no
* tie to the atmosphere they were filtered by — visitor saw a strip
* of generic-looking cards with no color signal saying "these all
* belong to Evening Drinks". The drill-page-scoped rule adds the
* top edge tint to all cards in the drill view while leaving the
* home grid alone (place cards on the unfiltered home stay neutral —
* they belong to many atmospheres and a tinted ribbon there would
* be visually noisy).
*
* The .event-card selector is retained for safety but emits no
* markup since v9.10.42 (the no-image event card uses .card.is-event
* now). Will be dropped in a future cleanup pass. */
.card.is-event[data-accent]::before,
.atmo-drill-in .card[data-accent]::before,
.event-card[data-accent]::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--card-accent, transparent);
z-index: 2;
pointer-events: none;
}
.card.is-event { position: relative; }
.event-card { position: relative; overflow: hidden; }
/* C2 — Time sub-line below the date pill.
*
* Operator design call (Turn __access20c): cluster time WITH the date
* rather than scattering it into the card body. Pre-fix the time
* rendered as a separate .event-time-pill in .card-bottom / .event-info,
* which split temporal info into two zones of the card. Now: a
* small line directly beneath the date pill, both wrapped in
* .event-date-block so they read as one temporal cluster.
*
* Drops the clock icon — position-below-date conveys "this is a time"
* without needing the symbol. Cleaner, less visual weight.
*
* Tabular numerals so times align vertically across cards in a row. */
.event-date-block {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: .25rem;
flex-shrink: 0;
}
/* v9.10.43 — Time sub-line rendered as a PILL (not muted text).
*
* Pre-v9.10.43 the time was a 10px 75%-opacity row of text sitting
* below the date pill. With the date pill rendered as a bold colored
* chip, the time read as an afterthought — operators reported "time
* is not visible enough". v9.10.43 makes time mirror the date pill
* exactly: same pill shape, same accent logic, same is-{kind}
* modifiers. The two pills now read as a single temporal block.
*
* Color rules (mirroring .event-date-pill / .event-date):
* - Default (date/thisweek/recurring): atmosphere accent applied
* inline via style="background:..." from pillStyleAttr().
* - is-live → urgent red (hardcoded, overrides accent)
* - is-today → urgent red (slightly translucent)
* - is-tomorrow → dark (kept neutral; tomorrow isn't urgent)
* - is-recurring → dark (no specific date to take accent from)
*/
.event-time-sub {
display: inline-flex; align-items: center;
padding: .2rem .55rem;
background: rgba(0,0,0,.72);
color: white;
border-radius: 999px;
font-size: 10px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.event-time-sub.is-live { background: #ef4444; }
.event-time-sub.is-today { background: rgba(239, 68, 68, .92); }
.event-time-sub.is-tomorrow { background: rgba(0,0,0,.82); }
.event-time-sub.is-recurring { background: rgba(0,0,0,.6); font-weight: 600; }
/* v9.10.43 — Old overrides for .card.is-event .event-time-sub
* (text-shadow, white color) and .event-card .event-time-sub (muted
* color) removed: now the time-sub renders as a solid pill with white
* text on its own colored background, identical treatment regardless
* of whether the card has an image or not. No shadow needed since the
* pill is opaque. The .event-card class itself isn't emitted anymore
* (since v9.10.42 the no-image event card uses .card.is-event), so
* .event-card-targeted rules are dead weight. */
/* Compact-variant date column (kept from pre-__access20 with relaxed
* sizing — horizontal label needs more room than the old day/month
* stack). Width grew from 56px → fluid (auto) so longer labels like
* "THU 14 MAY" fit. */
.event-date {
min-width: 56px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--accent, rgba(239, 68, 68, .92));
color: white;
border-radius: 12px;
padding: .55rem .75rem;
font-size: 11px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
white-space: nowrap;
}
.event-date.is-live { background: #ef4444; }
.event-date.is-today { background: rgba(239, 68, 68, .92); }
.event-date.is-tomorrow { background: rgba(0,0,0,.82); }
.event-date.is-recurring { background: rgba(0,0,0,.55); font-weight: 600; }
.event-card {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 1rem; align-items: center;
padding: 1rem 1.15rem;
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
cursor: pointer;
transition: border-color .2s, transform .2s;
text-decoration: none;
color: var(--text);
}
.event-card:hover {
border-color: var(--border-strong);
transform: translateY(-2px);
}
.event-info { min-width: 0; }
.event-info .name {
font-size: 1rem; font-weight: 600;
letter-spacing: -0.01em;
margin-bottom: .15rem;
}
.event-info .venue {
font-size: 11px;
color: var(--muted);
}
.event-card .arrow-end {
width: 30px; height: 30px;
border-radius: 50%;
border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
color: var(--muted);
transition: all .2s;
flex-shrink: 0;
}
.event-card:hover .arrow-end {
background: var(--text); color: var(--bg); border-color: var(--text);
}
/* ============================================================
DETAIL VIEW — full-bleed hero + 2-col body
============================================================ */
.detail-view {
background: var(--bg);
min-height: 100vh;
}
.detail-hero {
position: relative;
height: clamp(50vh, 65vh, 80vh);
width: 100%;
background: var(--card-elev);
}
.detail-hero img {
width: 100%; height: 100%; object-fit: cover;
}
.detail-hero::after {
content: '';
position: absolute; inset: 0;
/* v9.3 — Gradient is always dark, regardless of theme. The hero
always renders white text on top; the gradient must darken the
bottom of the image for legibility. Pre-v9.3 the gradient faded
to var(--bg) which is cream in oatmeal theme — that left the
title sitting on a cream/white blend, illegible.
v9.10.37 — Three-stop gradient with darker max and earlier
start. Some operator hero images have bright graphic content
(poster art with white panels, light photography of facades)
directly under where the title sits. The two-stop transparent→
dark gradient left those bright zones bleeding through the
bottom 50%, making the title hard to scan. The new shape ramps
in earlier (20% from top) and reaches a deeper black (.85) at
the bottom — still translucent enough to see the image, but
reliably darker than any white-text overlay would need. Paired
with a text-shadow on .detail-title + .detail-eyebrow below
for belt-and-suspenders legibility on edge-case images. */
background: linear-gradient(180deg,
transparent 20%,
rgba(0, 0, 0, 0.45) 55%,
rgba(0, 0, 0, 0.85) 100%);
pointer-events: none;
}
.detail-back {
position: absolute; top: 1.25rem; left: 1.25rem;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(0,0,0,.4);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,.2);
color: white;
display: inline-flex; align-items: center; justify-content: center;
z-index: 5;
transition: all .2s;
}
.detail-back:hover { background: white; color: black; }
.detail-back svg { width: 20px; height: 20px; }
.detail-hero-content {
position: absolute; bottom: 2.25rem; left: 2rem; right: 2rem;
max-width: 64rem;
color: white;
z-index: 2;
}
@media (max-width: 720px) {
.detail-hero-content { left: 1rem; right: 1rem; bottom: 1.5rem; }
}
.detail-eyebrow {
display: flex; align-items: center; gap: .65rem;
/* v9.10.41 — Eyebrow now sits BELOW the title (operator preference:
name first, supporting metadata after). Margin flips from bottom
to top accordingly so the gap stays the same visually. */
margin-top: .85rem;
font-size: 11px; font-weight: 700;
letter-spacing: .25em; text-transform: uppercase;
opacity: .9;
flex-wrap: wrap;
/* v9.10.37 — Soft text-shadow so even when the image has bright
content directly behind the eyebrow text (operator-uploaded
hero with white background, light architectural shots, etc.)
the type stays readable. Pairs with the strengthened gradient
on .detail-hero::after — gradient handles average images,
shadow handles edge cases. The shadow is soft (16px blur) so
it reads as a haze, not a hard outline. */
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.detail-title {
font-family: 'Outfit', sans-serif;
font-size: clamp(2rem, 7vw, 5.5rem);
font-weight: 700;
letter-spacing: -0.035em;
line-height: .92;
/* v9.10.37 — Larger shadow on the title (the eyebrow is small
enough that 8px is enough; the title's 3-5rem letters need a
wider halo to stay legible against bright image patches). */
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.detail-body {
max-width: 1200px;
margin: 0 auto;
padding: 4rem 2rem 3rem;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 4rem;
}
@media (max-width: 900px) {
.detail-body { grid-template-columns: 1fr; gap: 2.5rem; padding: 2.5rem 1rem; }
}
.detail-section { margin-bottom: 2.5rem; }
.detail-section:last-child { margin-bottom: 0; }
.detail-section.bordered {
border-top: 1px solid var(--border);
padding-top: 2.5rem;
}
.detail-h4 {
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: 1.5rem; font-weight: 600;
margin-bottom: 1rem;
}
.detail-section-label {
font-size: 11px; font-weight: 700;
letter-spacing: .2em; text-transform: uppercase;
color: var(--muted);
margin-bottom: 1rem;
}
.detail-description {
font-size: 1.1rem;
color: var(--text-soft);
line-height: 1.65;
margin-bottom: 1.5rem;
}
/* v9.10.30 — Margin-bottom matches .detail-description so the action
row + heading + description triplet has consistent vertical rhythm
when actions sit above the heading. Pre-v9.10.30 actions were at
the BOTTOM of the description block (after paragraphs), so no
bottom margin was needed; now they're at the TOP and need room
before the .detail-h4 heading. */
.detail-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: 1.5rem; }
/* ============================================================
OPENING HOURS — v9.10.6 sidebar dropdown (Google-Maps style)
============================================================ */
/* Renders inside the sidebar card as a
dropdown. Summary
row (always visible) shows today's status: "Open today · 10:00–20:00"
or "Closed today · Opens Wed". Expanded view shows all 7 days
with today highlighted. Inherits the small label/value layout of
neighboring sidebar rows (Best Time, Address, etc). */
.oh-details {
margin-top: .15rem;
}
.oh-summary-row {
/* Suppress browser default disclosure triangle so we can use a
custom chevron that matches the sidebar's quiet aesthetic. */
list-style: none;
cursor: pointer;
display: flex;
align-items: baseline;
gap: .4rem;
font-size: .92rem;
color: var(--text);
padding: .1rem 0;
}
.oh-summary-row::-webkit-details-marker { display: none; }
.oh-summary-text { flex: 1; }
.oh-chevron {
font-size: .85rem;
color: var(--muted);
transition: transform .15s ease;
display: inline-block;
}
.oh-details[open] .oh-chevron { transform: rotate(180deg); }
.oh-status { font-weight: 600; }
.oh-status-open { color: #16a34a; }
.oh-status-closed { color: #c43; }
.oh-times, .oh-next { color: var(--text-soft); }
/* v9.10.45 — Active seasonal period label, shown next to "Open today"
* status when the place is in a defined period (Summer, Winter, etc.).
* Italic + muted so it reads as supplementary context — visitors see
* the operating hours first, then notice the seasonal flag. */
.oh-period {
font-style: italic;
color: var(--text-soft);
font-weight: 400;
font-size: .92em;
}
.oh-week-list {
margin-top: .5rem;
padding-top: .4rem;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: .12rem;
}
.oh-day-row {
display: flex;
justify-content: space-between;
gap: .75rem;
padding: .2rem .35rem;
border-radius: 4px;
font-size: .85rem;
}
.oh-day-row .oh-day-name {
text-transform: capitalize;
color: var(--text-soft);
}
.oh-day-row .oh-day-hours { color: var(--text); }
.oh-day-row-highlight {
background: color-mix(in srgb, var(--accent, #4f46e5) 10%, transparent);
font-weight: 600;
}
.oh-day-row-highlight .oh-day-name,
.oh-day-row-highlight .oh-day-hours { color: var(--text); }
.oh-day-row .oh-day-hours em {
color: var(--muted);
font-style: italic;
}
.oh-exception-note {
margin: .5rem 0;
padding: .4rem .55rem;
background: color-mix(in srgb, #d97706 12%, transparent);
border-radius: 6px;
font-size: .8rem;
color: var(--text);
}
/* Budget tier display — sidebar row showing $ / $$ / $$$ */
.budget-tier {
font-weight: 600;
letter-spacing: .05em;
}
.budget-tier .budget-active { color: var(--text); }
/* v9.10.11 — Free tier renders as a small green pill so it doesn't
* look like a $-ladder string. Visual cue that this venue/event
* has NO admission cost is more useful than a Stylized "Free" word. */
.budget-tier-free {
/* Override the letter-spacing inherited from .budget-tier so the
* word "Free" doesn't read as F R E E. */
letter-spacing: 0;
font-weight: 600;
}
.budget-tier-free .budget-active {
display: inline-block;
padding: .15rem .55rem;
border-radius: 999px;
background: color-mix(in srgb, #16a34a 14%, transparent);
color: #16a34a;
font-size: .8rem;
}
/* ============================================================
LINK PILLS — v9.10.10 sidebar social/external links
============================================================ */
/* Icon-only round pills, unified color. Each pill is a tap target
* containing a single brand SVG that inherits the surrounding text
* color (via fill="currentColor"). Hover/focus state lights up with
* the accent color. Sized for comfortable touch interaction (40×40
* minimum tap target on mobile per Apple HIG).
*/
.link-pills {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-top: .35rem;
}
.link-pill {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--card, #f5f5f0);
border: 1px solid var(--border, #e3e3dc);
color: var(--text-soft, var(--text));
text-decoration: none;
transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
line-height: 1;
}
.link-pill:hover,
.link-pill:focus-visible {
background: color-mix(in srgb, var(--accent, #4f46e5) 10%, var(--card, #f5f5f0));
border-color: color-mix(in srgb, var(--accent, #4f46e5) 40%, var(--border, #e3e3dc));
color: var(--text);
transform: translateY(-1px);
}
/* Icon-only variant: a uniform square pill that holds just the SVG.
* 36×36 reads as a solid touch target without looking heavy in the
* sidebar. Border-radius slightly smaller than half-width gives a
* "soft square" rather than a perfect circle — feels less stamp-like.
*/
.link-pill-icon-only {
width: 36px;
height: 36px;
border-radius: 10px;
padding: 0;
}
.link-pill-icon-only svg {
display: block;
/* fill is set to currentColor on the SVG itself; this just keeps
* the path crisp at the rendered size. */
width: 18px;
height: 18px;
}
/* v9.10.46 / v9.10.47 / v9.10.48 — Providers section.
*
* Inline accordion list grouped by subtype on the consumer's detail
* page. Each subtype gets its own small heading (BIKE RENTAL,
* FITNESS CENTER, etc.); each provider under that heading is a
*
block with the name + city always visible and the
* description + links revealed on click. Native
/
* handles the show/hide — no JS needed.
*
* Visual design:
* - Section root has top/bottom margin to separate from neighbors
* (Lineup above, What's On below).
* - Each subtype group has its own heading (10px tracked caps,
* muted) — matches other detail-page section labels so
* subtype groups feel like peers of Gallery / Lineup / What's On.
* - Group lists share thin top/bottom borders so multiple groups
* stacked together still read as distinct clusters.
* - Per-provider rows: name in regular weight, city as middle-dot
* suffix in muted color (so name dominates the eye).
* - Chevron rotates 180° on open.
*/
.providers-section {
margin: 2rem 0;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.provider-group-heading {
font-size: 10px;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 .6rem;
}
.providers-list {
border-top: 1px solid var(--border);
}
.provider-block {
border-bottom: 1px solid var(--border);
}
.provider-block[open] .provider-chevron {
transform: rotate(180deg);
}
.provider-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .9rem 0;
cursor: pointer;
list-style: none;
/* Hide the default disclosure triangle (Safari + Firefox) so the
* custom chevron on the right is the only indicator. */
}
.provider-summary::-webkit-details-marker {
display: none;
}
.provider-summary-text {
display: flex;
align-items: baseline;
gap: 0;
min-width: 0;
flex: 1;
flex-wrap: wrap;
}
.provider-name {
font-size: 1rem;
font-weight: 600;
color: var(--text);
letter-spacing: -0.005em;
}
.provider-city {
font-size: .9rem;
color: var(--muted);
font-weight: 400;
}
.provider-chevron {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--muted);
transition: transform .2s ease;
flex-shrink: 0;
}
.provider-content {
padding: 0 0 1rem;
display: flex;
flex-direction: column;
gap: .85rem;
}
.provider-description {
font-size: .9rem;
line-height: 1.5;
color: var(--text-soft, var(--text));
white-space: pre-wrap;
}
/* Provider links cluster reuses .link-pill / .link-pill-icon-only
* styles defined above. The container just gives them flex layout
* matching the sidebar's .link-pills. */
.provider-links {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
/* ============================================================
LINEUP — v9.10.9 main-column artist grid (festivals, concerts)
============================================================ */
/* Auto-fill grid: 3-4 columns on desktop, 2 on tablet, 1 on phone.
* Each item is a name (bold) + optional role (small + muted).
* Festivals with 50+ artists wrap naturally without overflow.
*/
.lineup-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: .75rem 1.25rem;
margin-top: .5rem;
}
.lineup-item {
padding: .15rem 0;
}
.lineup-name {
font-weight: 600;
font-size: .95rem;
color: var(--text);
}
.lineup-role {
font-size: .8rem;
color: var(--text-soft, var(--muted));
margin-top: .1rem;
}
/* ============================================================
ARTICLE CONTENT — v9.10.12 long-form rich text section
============================================================ */
/* Renders below the description. Editorial typography — slightly
* larger leading, generous heading spacing, pulled-quote treatment
* for blockquotes. Inherits the page's text color so light/dark
* themes work automatically.
*/
.article-content {
font-size: 1rem;
line-height: 1.65;
color: var(--text);
}
.article-content h2 {
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -.01em;
margin: 1.75rem 0 .65rem;
color: var(--text);
}
.article-content h3 {
font-size: 1.2rem;
font-weight: 600;
margin: 1.25rem 0 .5rem;
color: var(--text);
}
.article-content h4 {
font-size: 1.05rem;
font-weight: 600;
margin: 1rem 0 .35rem;
color: var(--text);
}
.article-content p { margin: .65rem 0; }
.article-content ul,
.article-content ol {
margin: .75rem 0;
padding-left: 1.6rem;
}
.article-content li { margin: .25rem 0; }
.article-content a {
color: var(--accent, #4f46e5);
text-decoration: underline;
text-underline-offset: 2px;
}
.article-content a:hover { text-decoration: none; }
.article-content blockquote {
margin: 1.25rem 0;
padding: .5rem 0 .5rem 1.1rem;
border-left: 3px solid var(--accent, #4f46e5);
color: var(--text-soft, var(--muted));
font-style: italic;
font-size: 1.05rem;
}
.article-content hr {
border: 0;
border-top: 1px solid var(--border, #e3e3dc);
margin: 1.5rem 0;
}
.article-content b, .article-content strong { font-weight: 600; }
.article-content u { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-content s, .article-content strike {
text-decoration: line-through;
color: var(--text-soft, var(--muted));
}
.article-content h2:first-child,
.article-content h3:first-child,
.article-content h4:first-child,
.article-content p:first-child { margin-top: 0; }
.article-content > *:last-child { margin-bottom: 0; }
/* ============================================================
BUTTONS
============================================================ */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: .5rem;
padding: .85rem 1.65rem;
font-size: 11px; font-weight: 700;
letter-spacing: .15em; text-transform: uppercase;
border-radius: 999px;
transition: all .2s;
cursor: pointer;
border: 0;
text-decoration: none;
white-space: nowrap;
}
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { opacity: .88; }
.btn-secondary {
background: transparent;
border: 1px solid var(--border-strong);
color: var(--text);
}
.btn-secondary:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn-ghost { padding: .65rem 1.25rem; font-size: 10px; }
.btn-sm { padding: .5rem 1rem; font-size: 10px; letter-spacing: .12em; }
.btn-block { display: flex; width: 100%; }
.btn svg { width: 14px; height: 14px; }
/* ============================================================
"WHAT'S ON" — hosted events list in detail view
============================================================ */
.whats-on { display: flex; flex-direction: column; gap: .75rem; }
.whats-on-item {
display: flex; align-items: center; gap: 1.1rem;
padding: 1.1rem 1.3rem;
background: var(--card);
border: 1px solid var(--border);
border-radius: 18px;
transition: border-color .2s, transform .2s;
cursor: pointer;
text-decoration: none;
color: var(--text);
}
.whats-on-item:hover {
border-color: var(--border-strong);
transform: translateX(2px);
}
.whats-on-item.upcoming { opacity: .75; }
.whats-on-bar {
width: 5px; align-self: stretch;
border-radius: 999px;
background: #ef4444;
flex-shrink: 0;
}
.whats-on-bar.upcoming { background: var(--muted); }
.whats-on-info { flex: 1; min-width: 0; }
.whats-on-info .label {
font-size: 9px; font-weight: 700;
letter-spacing: .15em; text-transform: uppercase;
color: #ef4444;
margin-bottom: .25rem;
}
.whats-on-info .label.upcoming { color: var(--muted); }
.whats-on-info .name {
font-size: 1rem; font-weight: 600;
letter-spacing: -0.005em;
margin-bottom: .15rem;
}
.whats-on-info .date {
font-size: 12px; color: var(--muted);
}
.whats-on-arrow {
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid var(--border-strong);
display: flex; align-items: center; justify-content: center;
transition: all .2s;
flex-shrink: 0;
}
.whats-on-item:hover .whats-on-arrow {
background: var(--text); color: var(--bg);
border-color: var(--text);
}
.whats-on-arrow svg { width: 14px; height: 14px; }
/* v9.10.55 — Per-row upcoming events disclosure on listing pages.
*
* Each member row in a listing can have an attached
* handles the show/hide — no JS needed.
*
* Visual design:
* - Section root has top/bottom margin to separate from neighbors
* (Lineup above, What's On below).
* - Each subtype group has its own heading (10px tracked caps,
* muted) — matches other detail-page section labels so
* subtype groups feel like peers of Gallery / Lineup / What's On.
* - Group lists share thin top/bottom borders so multiple groups
* stacked together still read as distinct clusters.
* - Per-provider rows: name in regular weight, city as middle-dot
* suffix in muted color (so name dominates the eye).
* - Chevron rotates 180° on open.
*/
.providers-section {
margin: 2rem 0;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.provider-group-heading {
font-size: 10px;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 .6rem;
}
.providers-list {
border-top: 1px solid var(--border);
}
.provider-block {
border-bottom: 1px solid var(--border);
}
.provider-block[open] .provider-chevron {
transform: rotate(180deg);
}
.provider-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .9rem 0;
cursor: pointer;
list-style: none;
/* Hide the default disclosure triangle (Safari + Firefox) so the
* custom chevron on the right is the only indicator. */
}
.provider-summary::-webkit-details-marker {
display: none;
}
.provider-summary-text {
display: flex;
align-items: baseline;
gap: 0;
min-width: 0;
flex: 1;
flex-wrap: wrap;
}
.provider-name {
font-size: 1rem;
font-weight: 600;
color: var(--text);
letter-spacing: -0.005em;
}
.provider-city {
font-size: .9rem;
color: var(--muted);
font-weight: 400;
}
.provider-chevron {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--muted);
transition: transform .2s ease;
flex-shrink: 0;
}
.provider-content {
padding: 0 0 1rem;
display: flex;
flex-direction: column;
gap: .85rem;
}
.provider-description {
font-size: .9rem;
line-height: 1.5;
color: var(--text-soft, var(--text));
white-space: pre-wrap;
}
/* Provider links cluster reuses .link-pill / .link-pill-icon-only
* styles defined above. The container just gives them flex layout
* matching the sidebar's .link-pills. */
.provider-links {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
/* ============================================================
LINEUP — v9.10.9 main-column artist grid (festivals, concerts)
============================================================ */
/* Auto-fill grid: 3-4 columns on desktop, 2 on tablet, 1 on phone.
* Each item is a name (bold) + optional role (small + muted).
* Festivals with 50+ artists wrap naturally without overflow.
*/
.lineup-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: .75rem 1.25rem;
margin-top: .5rem;
}
.lineup-item {
padding: .15rem 0;
}
.lineup-name {
font-weight: 600;
font-size: .95rem;
color: var(--text);
}
.lineup-role {
font-size: .8rem;
color: var(--text-soft, var(--muted));
margin-top: .1rem;
}
/* ============================================================
ARTICLE CONTENT — v9.10.12 long-form rich text section
============================================================ */
/* Renders below the description. Editorial typography — slightly
* larger leading, generous heading spacing, pulled-quote treatment
* for blockquotes. Inherits the page's text color so light/dark
* themes work automatically.
*/
.article-content {
font-size: 1rem;
line-height: 1.65;
color: var(--text);
}
.article-content h2 {
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -.01em;
margin: 1.75rem 0 .65rem;
color: var(--text);
}
.article-content h3 {
font-size: 1.2rem;
font-weight: 600;
margin: 1.25rem 0 .5rem;
color: var(--text);
}
.article-content h4 {
font-size: 1.05rem;
font-weight: 600;
margin: 1rem 0 .35rem;
color: var(--text);
}
.article-content p { margin: .65rem 0; }
.article-content ul,
.article-content ol {
margin: .75rem 0;
padding-left: 1.6rem;
}
.article-content li { margin: .25rem 0; }
.article-content a {
color: var(--accent, #4f46e5);
text-decoration: underline;
text-underline-offset: 2px;
}
.article-content a:hover { text-decoration: none; }
.article-content blockquote {
margin: 1.25rem 0;
padding: .5rem 0 .5rem 1.1rem;
border-left: 3px solid var(--accent, #4f46e5);
color: var(--text-soft, var(--muted));
font-style: italic;
font-size: 1.05rem;
}
.article-content hr {
border: 0;
border-top: 1px solid var(--border, #e3e3dc);
margin: 1.5rem 0;
}
.article-content b, .article-content strong { font-weight: 600; }
.article-content u { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-content s, .article-content strike {
text-decoration: line-through;
color: var(--text-soft, var(--muted));
}
.article-content h2:first-child,
.article-content h3:first-child,
.article-content h4:first-child,
.article-content p:first-child { margin-top: 0; }
.article-content > *:last-child { margin-bottom: 0; }
/* ============================================================
BUTTONS
============================================================ */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: .5rem;
padding: .85rem 1.65rem;
font-size: 11px; font-weight: 700;
letter-spacing: .15em; text-transform: uppercase;
border-radius: 999px;
transition: all .2s;
cursor: pointer;
border: 0;
text-decoration: none;
white-space: nowrap;
}
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { opacity: .88; }
.btn-secondary {
background: transparent;
border: 1px solid var(--border-strong);
color: var(--text);
}
.btn-secondary:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn-ghost { padding: .65rem 1.25rem; font-size: 10px; }
.btn-sm { padding: .5rem 1rem; font-size: 10px; letter-spacing: .12em; }
.btn-block { display: flex; width: 100%; }
.btn svg { width: 14px; height: 14px; }
/* ============================================================
"WHAT'S ON" — hosted events list in detail view
============================================================ */
.whats-on { display: flex; flex-direction: column; gap: .75rem; }
.whats-on-item {
display: flex; align-items: center; gap: 1.1rem;
padding: 1.1rem 1.3rem;
background: var(--card);
border: 1px solid var(--border);
border-radius: 18px;
transition: border-color .2s, transform .2s;
cursor: pointer;
text-decoration: none;
color: var(--text);
}
.whats-on-item:hover {
border-color: var(--border-strong);
transform: translateX(2px);
}
.whats-on-item.upcoming { opacity: .75; }
.whats-on-bar {
width: 5px; align-self: stretch;
border-radius: 999px;
background: #ef4444;
flex-shrink: 0;
}
.whats-on-bar.upcoming { background: var(--muted); }
.whats-on-info { flex: 1; min-width: 0; }
.whats-on-info .label {
font-size: 9px; font-weight: 700;
letter-spacing: .15em; text-transform: uppercase;
color: #ef4444;
margin-bottom: .25rem;
}
.whats-on-info .label.upcoming { color: var(--muted); }
.whats-on-info .name {
font-size: 1rem; font-weight: 600;
letter-spacing: -0.005em;
margin-bottom: .15rem;
}
.whats-on-info .date {
font-size: 12px; color: var(--muted);
}
.whats-on-arrow {
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid var(--border-strong);
display: flex; align-items: center; justify-content: center;
transition: all .2s;
flex-shrink: 0;
}
.whats-on-item:hover .whats-on-arrow {
background: var(--text); color: var(--bg);
border-color: var(--text);
}
.whats-on-arrow svg { width: 14px; height: 14px; }
/* v9.10.55 — Per-row upcoming events disclosure on listing pages.
*
* Each member row in a listing can have an attached block
* showing the events hosted at that venue. The disclosure sits as a
* sibling of the .listing-row anchor inside a .listing-row-wrap
* grouping (HTML disallows nested interactives so can't
* live inside the ).
*
* Visual treatment: the disclosure is visually attached to the row
* above via shared rounded corners and the same card surface. The
* row gets flat-bottom corners when its sibling disclosure is
* present, so the two read as one card. The disclosure-summary
* line is a thin band with the count and toggle chevron.
*
* Hide native disclosure marker so we render our own chevron icon
* for consistent styling across browsers. */
.listing-row-wrap {
/* The grouping element. No box of its own — children paint the
* card. Vertical stack via the parent .listing-rows flex. */
}
.listing-row-wrap .listing-row-events {
margin: 0;
/* Visually attach to the row above: remove the gap, share the
* card surface, drop the top-border, round only the bottom. */
margin-top: -1px; /* overlap the row's bottom border */
background: var(--card);
border: 1px solid var(--border);
border-top: 1px dashed var(--border);
border-radius: 0 0 18px 18px;
overflow: hidden;
}
/* When a row is followed by an events disclosure, flatten its
* bottom corners so the two pieces merge into a single card. */
.listing-row-wrap .listing-row-events ~ * { display: none; } /* defensive: only one disclosure per wrap */
.listing-row-wrap:has(.listing-row-events) .listing-row {
border-radius: 18px 18px 0 0;
}
.listing-row-events summary { list-style: none; cursor: pointer; }
.listing-row-events summary::-webkit-details-marker { display: none; }
.listing-row-events summary::marker { display: none; content: ''; }
.listing-row-events-summary {
display: flex;
align-items: center;
gap: .5rem;
padding: .7rem 1rem;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
transition: color .15s, background .15s;
}
.listing-row-events-summary:hover {
color: var(--text);
background: color-mix(in srgb, var(--text) 3%, transparent);
}
.listing-row-events-summary .listing-row-events-label {
/* The text portion of the summary line. The count pill and
* toggle chevron sit to its right. */
}
.listing-row-events-summary .listing-count {
letter-spacing: 0;
text-transform: none;
color: var(--muted);
font-weight: 600;
}
.listing-row-events-summary .listing-row-events-toggle {
margin-left: auto;
display: inline-flex;
align-items: center;
color: var(--muted);
transition: transform .2s ease, color .2s ease;
}
.listing-row-events[open] .listing-row-events-toggle {
transform: rotate(180deg);
}
.listing-row-events-summary:hover .listing-row-events-toggle {
color: var(--text);
}
.listing-row-events-list {
/* The events themselves. Indent slightly from the disclosure's
* edge so they read as nested under the row above, and add
* vertical breathing room before the first card and after the
* last. The .whats-on parent flex gap handles inter-card spacing. */
padding: .25rem 1rem 1rem;
}
/* ============================================================
LISTING MEMBER ROWS (v9.10.53)
============================================================
Vertical-stack horizontal-row layout for listing detail
pages. Each row is a wide entry with thumbnail left, name +
subtype + description in the middle, and a chevron on the
right. Visually distinct from atmosphere drill cards so
visitors immediately read the page as "curated list" not
"another category page".
============================================================ */
.listing-members-section { margin-top: 1.5rem; }
.listing-members-section .detail-section-label {
/* Section label gets the same treatment as Gallery / What's On
* section labels, plus a small count pill to make the list
* feel quantified ("Places in this list (5)"). */
margin-bottom: .85rem;
}
.listing-count {
color: var(--muted);
font-weight: 600;
}
.listing-rows {
display: flex;
flex-direction: column;
gap: .85rem;
}
.listing-row {
display: flex;
align-items: center;
gap: 1.1rem;
padding: 1rem;
background: var(--card);
border: 1px solid var(--border);
border-radius: 18px;
transition: border-color .2s, transform .2s;
cursor: pointer;
text-decoration: none;
color: var(--text);
}
.listing-row:hover {
border-color: var(--border-strong);
transform: translateX(2px);
}
/* Thumbnail: fixed-width square on desktop (130px), shrinks on
* mobile to keep the row from dominating narrow viewports.
* object-fit:cover crops cleanly regardless of source aspect. */
.listing-row-thumb {
flex-shrink: 0;
width: 130px;
height: 130px;
border-radius: 12px;
overflow: hidden;
background: var(--bg);
position: relative;
}
.listing-row-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.listing-row-thumb-placeholder {
/* Soft fallback when no cover image is set on the member —
* displays the generic place glyph centered in the thumb slot.
* Same visual weight as image thumbnails so the row layout
* stays uniform across members with and without images. */
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
opacity: .35;
}
.listing-row-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: .25rem;
}
.listing-row-kicker {
/* Subtype kicker: small uppercase tracked label above the
* name. Matches the .whats-on-info .label treatment but in
* a neutral muted color (no red event-ness). */
font-size: 10px;
font-weight: 700;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--muted);
}
.listing-row-name {
font-size: 1.15rem;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--text);
line-height: 1.25;
}
.listing-row-desc {
/* Description trimmed to 2 lines via line-clamp so verbose
* operator copy doesn't bloat the row. The full text shows
* on the member's own detail page. line-clamp is widely
* supported (Chrome, Safari, Firefox); on the rare unsupported
* browser the description still renders, just full-length. */
font-size: .9rem;
color: var(--text-soft, var(--muted));
line-height: 1.4;
margin-top: .15rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.listing-row-arrow {
flex-shrink: 0;
color: var(--muted);
transition: color .2s, transform .2s;
}
.listing-row:hover .listing-row-arrow {
color: var(--text);
transform: translateX(2px);
}
/* Mobile: shrink the thumb so the body text gets the room it
* needs. Keep the row horizontal — vertical stack would lose
* the "guide list" visual signature. */
@media (max-width: 480px) {
.listing-row { padding: .75rem; gap: .85rem; }
.listing-row-thumb { width: 88px; height: 88px; }
.listing-row-name { font-size: 1rem; }
.listing-row-desc { font-size: .85rem; }
.listing-row-arrow { display: none; }
}
/* ============================================================
SIDEBAR CARD — location + hours in detail view
============================================================ */
.sidebar-card {
padding: 1.65rem;
background: var(--card);
border: 1px solid var(--border);
border-radius: 22px;
margin-bottom: 1rem;
display: block;
color: var(--text);
}
/* When the address row is clickable, wrap it in .
* The row gets the hover/cursor styling; the parent card stays passive
* so hovering an info row (hours, time-of-day) doesn't suggest a click
* that doesn't exist. Fixes a bug where the entire card was a single
* , making any-row hover light up the card and any-row click open
* directions — confusing for rows that have nothing to do with maps.
*/
.sidebar-card-row-link {
text-decoration: none;
color: inherit;
cursor: pointer;
border-radius: 12px;
margin: -.4rem -.6rem;
padding: .4rem .6rem;
transition: background .2s;
}
.sidebar-card-row-link:hover {
background: var(--bg);
}
.sidebar-card-row {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 1rem;
}
.sidebar-card-row + .sidebar-card-row {
margin-top: 1.4rem;
padding-top: 1.4rem;
border-top: 1px solid var(--border);
}
.sidebar-card-label {
font-size: 10px; font-weight: 700;
letter-spacing: .2em; text-transform: uppercase;
color: var(--muted);
margin-bottom: .55rem;
}
.sidebar-card-value {
font-size: 1rem; font-weight: 500;
line-height: 1.4;
}
.sidebar-card-value-soft {
font-size: 13px; color: var(--muted); margin-top: .15rem;
}
.open-now {
display: inline-flex; align-items: center; gap: .35rem;
font-size: 10px; font-weight: 700;
letter-spacing: .15em; text-transform: uppercase;
color: #16a34a;
margin-top: .35rem;
}
.open-now::before {
content: ''; width: 7px; height: 7px;
border-radius: 50%; background: currentColor;
}
.closed-now {
display: inline-flex; align-items: center; gap: .35rem;
font-size: 10px; font-weight: 700;
letter-spacing: .15em; text-transform: uppercase;
color: var(--muted);
margin-top: .35rem;
}
.sidebar-arrow {
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid var(--border-strong);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: all .2s;
color: var(--text);
}
.sidebar-card-row-link:hover .sidebar-arrow {
background: var(--text); color: var(--bg);
border-color: var(--text);
}
.sidebar-arrow svg { width: 14px; height: 14px; }
/* ============================================================
SEARCH OVERLAY
============================================================ */
#guides-search-overlay {
position: fixed; inset: 0;
z-index: 200;
background: var(--bg);
display: none;
flex-direction: column;
padding: 1rem;
}
#guides-search-overlay[aria-hidden="false"],
#guides-search-overlay.open {
display: flex;
}
#guides-search-overlay-backdrop {
position: absolute; inset: 0;
background: var(--bg);
}
#guides-search-overlay-body {
position: relative;
max-width: 760px;
width: 100%;
margin: 0 auto;
padding: 1.25rem 1.5rem 0;
}
.guides-search-form {
display: flex; align-items: center; gap: .85rem;
border-bottom: 1px solid var(--border-strong);
padding: .35rem 0 .25rem;
/* v9.5 — Right padding so the input doesn't run under the
* floating close button in the top-right corner of the overlay
* body. 56px = 44 (button width) + 12 (.75rem from-edge offset). */
padding-right: 56px;
}
.guides-search-icon { color: var(--muted); display: inline-flex; }
.guides-search-form input {
flex: 1;
font-size: 1.5rem; font-weight: 500;
background: transparent;
border: 0;
padding: .85rem 0;
color: var(--text);
font-family: inherit;
}
.guides-search-form input:focus { outline: none; }
.guides-search-form input::placeholder { color: var(--muted); }
.guides-search-close {
/* v9.5 — Floating top-right close button.
*
* Pre-v9.5 the close button sat inline at the end of the search
* form, after the input. On narrow mobile viewports users
* reported "can't close search" — even though the button was
* technically there with min 44x44 reach, it was visually muddy
* (text color against same-color background) and the inline
* layout pushed it tight against the right edge where it could
* brush the viewport edge and feel un-tappable.
*
* Floating it to the absolute top-right of the overlay body
* decouples its position from the form layout entirely. The
* circular background gives it consistent contrast against any
* theme, and the fixed corner position matches the pattern most
* users expect for "close this modal" on mobile (iOS share
* sheets, Android modals, etc.).
*
* inset works in this context because the parent
* #guides-search-overlay-body is position:relative. */
position: absolute;
top: .75rem;
right: .75rem;
width: 44px; height: 44px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--pill-bg);
color: var(--text);
padding: 0;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: background .15s, transform .15s, border-color .15s;
/* z-index above the input so the button receives taps even if a
* stray autofill chip or browser-supplied affordance overlaps the
* top-right corner of the form. */
z-index: 2;
}
.guides-search-close:hover {
background: var(--bg-soft, var(--pill-bg));
border-color: var(--border-strong);
transform: scale(1.04);
}
.guides-search-close svg {
width: 20px; height: 20px;
/* The stroked X reads well at 20px; smaller would be hard to tap-
* target precisely on a 44px button. */
}
/* ============================================================
FOOTER
============================================================ */
.site-footer {
margin-top: 6rem;
padding: 4rem 0;
border-top: 1px solid var(--border);
}
.site-footer-inner {
display: flex; flex-wrap: wrap; gap: 2rem;
justify-content: space-between; align-items: center;
}
.site-footer-logo {
font-family: 'Playfair Display', serif;
font-style: italic; font-size: 1.5rem; font-weight: 600;
opacity: .85;
}
.site-footer-links {
display: flex; gap: 2.5rem; flex-wrap: wrap;
font-size: 10px; font-weight: 700;
letter-spacing: .2em; text-transform: uppercase;
color: var(--muted);
}
.site-footer-links a:hover { color: var(--text); }
.site-footer-meta {
font-size: 10px;
letter-spacing: .15em;
color: var(--muted);
}
@media (max-width: 640px) {
.site-footer { margin-top: 3rem; padding: 3rem 0; }
.site-footer-inner { gap: 1.5rem; }
}
/* ============================================================
PANEL (slide-in detail viewer — kept from old design)
============================================================ */
#guides-panel {
position: fixed; inset: 0;
z-index: 200;
pointer-events: none;
}
#guides-panel[aria-hidden="false"] { pointer-events: auto; }
#guides-panel-backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,.5);
opacity: 0;
transition: opacity .3s;
}
#guides-panel[aria-hidden="false"] #guides-panel-backdrop { opacity: 1; }
#guides-panel-body {
position: absolute; top: 0; right: 0;
width: min(100%, 920px);
height: 100%;
background: var(--bg);
transform: translateX(100%);
transition: transform .35s cubic-bezier(.16,1,.3,1);
overflow-y: auto;
border-left: 1px solid var(--border);
}
#guides-panel[aria-hidden="false"] #guides-panel-body {
transform: translateX(0);
}
#guides-panel-close {
position: absolute; top: 1.25rem; left: 1.25rem;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(0,0,0,.4);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,.2);
color: white;
display: inline-flex; align-items: center; justify-content: center;
z-index: 10;
}
@media (max-width: 720px) {
#guides-panel-body { width: 100%; }
}
/* ============================================================
FORMS — signin / signup
============================================================ */
.form-page {
max-width: 420px; margin: 4rem auto;
padding: 2.5rem 1.5rem;
}
.form-page h1 {
font-family: 'Outfit', sans-serif;
font-size: 2.5rem; font-weight: 700;
letter-spacing: -0.025em;
margin-bottom: .5rem;
}
.form-page p.lede {
color: var(--muted);
font-size: 1rem;
margin-bottom: 2.25rem;
}
.form-group { margin-bottom: 1rem; }
.form-group label {
display: block;
font-size: 11px; font-weight: 700;
letter-spacing: .15em; text-transform: uppercase;
color: var(--muted);
margin-bottom: .55rem;
}
.form-input {
width: 100%;
padding: .85rem 1.1rem;
background: var(--card);
border: 1px solid var(--border-strong);
border-radius: 12px;
font: inherit;
font-size: 1rem;
color: var(--text);
transition: border-color .2s;
}
.form-input:focus {
outline: none;
border-color: var(--text);
}
.form-error {
background: rgba(239,68,68,.08);
border: 1px solid rgba(239,68,68,.3);
color: #ef4444;
padding: .85rem 1.1rem;
border-radius: 12px;
font-size: 13px;
margin-bottom: 1rem;
}
.form-footer {
margin-top: 1.5rem;
font-size: 13px;
color: var(--muted);
text-align: center;
}
.form-footer a { color: var(--text); text-decoration: underline; }
/* ============================================================
EMPTY STATES
============================================================ */
.empty {
text-align: center;
padding: 4rem 1.5rem;
color: var(--muted);
}
.empty .emoji { font-size: 2.5rem; display: block; margin-bottom: 1rem; }
.empty p { font-size: 1rem; margin-bottom: 1rem; }
/* ============================================================
ANIMATION HELPERS
============================================================ */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.anim-in { opacity: 0; animation: fadeUp .65s cubic-bezier(.16,1,.3,1) forwards; }
/* ============================================================
SECTION VISIBILITY — atmoDrill SPA-style transitions
============================================================
The home renders both the bento section and the drill section
into the DOM at all times; .is-hidden toggles visibility. The
atmoDrill JS module animates between them by flipping these
classes plus .is-fading / .is-entering for the cross-fade.
*/
.is-hidden { display: none !important; }
.is-fading { opacity: 0; transform: scale(.97); transition: opacity .25s, transform .25s; }
.is-entering { opacity: 0; transform: translateY(8px); }
.atmo-grid-section, .atmo-drill-in {
transition: opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);
}
/* ============================================================
ACCESS-GATING — paywall, banners, account extensions (Turn C)
============================================================ */
/* Subscribe page hero — large, calm, marketing-page feel.
* Most of the geometry is set on container + plan-grid below;
* .subscribe-hero is just the headline block. */
.subscribe-page { padding: 3rem 0; }
.subscribe-hero { text-align: center; margin-bottom: 2.5rem; }
.subscribe-h1 {
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: clamp(2rem, 5vw, 3rem);
margin: 0 0 0.5rem;
}
.subscribe-subhead {
font-size: 1.05rem; color: var(--text-soft);
margin: 0 auto 2rem; max-width: 36rem;
}
/* Billing-interval toggle. Two pill-buttons inside a flex row, one
* is-active at a time. The "save ~30%" badge nests inside the
* Yearly button to reinforce the discount. */
.subscribe-toggle {
display: inline-flex; gap: .25rem;
padding: .25rem; background: var(--pill-bg); border-radius: 999px;
}
.toggle-btn {
border: 0; background: transparent; cursor: pointer;
padding: .5rem 1.25rem; border-radius: 999px;
font-size: .9rem; font-weight: 600; color: var(--text-soft);
transition: background .15s, color .15s;
}
.toggle-btn.is-active {
background: var(--bg); color: var(--text);
box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.toggle-save {
display: inline-block;
margin-left: .35rem;
padding: .1rem .4rem;
background: var(--accent, #6b8d57); color: #fff;
border-radius: 999px; font-size: .7rem; font-weight: 600;
}
/* Plan grid: 2-col on desktop, stacked on mobile. */
.plan-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
max-width: 56rem; margin: 0 auto;
}
.plan-card {
border: 1px solid var(--border);
border-radius: 18px;
padding: 1.75rem 1.5rem;
background: var(--card);
display: flex; flex-direction: column;
transition: transform .15s, box-shadow .15s, border-color .15s;
}
.plan-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,.06);
border-color: var(--text-soft);
}
.plan-name {
font-size: 1.25rem; font-weight: 700;
margin: 0 0 0.75rem;
}
.plan-price { margin-bottom: 1.25rem; }
.plan-price-amount {
font-family: 'Playfair Display', serif;
font-size: 2.2rem; font-weight: 700;
}
.plan-price-period {
font-size: .95rem; color: var(--text-soft);
margin-left: .25rem;
}
.plan-features {
list-style: none; padding: 0; margin: 0 0 1.5rem;
flex: 1;
}
.plan-features li {
padding-left: 1.5rem; position: relative;
margin-bottom: .55rem; font-size: .95rem; color: var(--text);
}
.plan-features li::before {
content: '✓';
position: absolute; left: 0;
color: var(--accent, #6b8d57); font-weight: 700;
}
.subscribe-btn { margin-top: auto; }
.subscribe-anon-note {
text-align: center; color: var(--text-soft);
margin: 2rem auto 0; max-width: 36rem;
font-size: .95rem;
}
.subscribe-anon-note a {
color: var(--text); text-decoration: underline;
font-weight: 600;
}
/* FAQ block under the plan grid */
.subscribe-faq {
max-width: 42rem; margin: 4rem auto 0;
}
.subscribe-faq-h2 {
font-family: 'Playfair Display', serif;
font-weight: 700; font-size: 1.5rem;
margin: 0 0 1.5rem; text-align: center;
}
.subscribe-faq dl { margin: 0; }
.subscribe-faq dt {
font-weight: 600; margin: 1rem 0 .25rem;
}
.subscribe-faq dd {
margin: 0 0 1rem; color: var(--text-soft);
font-size: .95rem; line-height: 1.5;
}
/* ---------- Share banner ----------
* Renders above the header for anonymous visitors who arrived via
* an org share URL. Compact strip with the org name + a CTA to
* sign up. Theme-aware: inherits theme colors instead of a fixed
* accent so it doesn't fight the brand mark. */
.share-banner {
background: var(--text); color: var(--bg);
padding: .55rem 1rem;
font-size: .85rem; line-height: 1.3;
text-align: center;
}
.share-banner a {
color: inherit; text-decoration: underline;
font-weight: 600; margin-left: .5rem;
}
/* ---------- Trial countdown ----------
* Small pill shown in the user menu or account page when access
* state is 'trial'. Counts down in minutes once below an hour,
* gentle warning tone (no alarming red unless < 5 min). */
.trial-countdown {
display: inline-flex; align-items: center; gap: .35rem;
padding: .25rem .75rem; border-radius: 999px;
background: var(--pill-bg); color: var(--text);
font-size: .75rem; font-weight: 600;
}
.trial-countdown.is-urgent {
background: #fff3cd; color: #856404;
}
/* ---------- Account page access section ---------- */
.account-access { margin: 2rem 0; }
.account-access h2 {
font-family: 'Playfair Display', serif; font-size: 1.4rem;
font-weight: 700; margin: 0 0 1rem;
}
.access-row {
display: flex; align-items: center; justify-content: space-between;
padding: .75rem 0; border-bottom: 1px solid var(--border);
gap: 1rem;
}
.access-row:last-child { border-bottom: 0; }
.access-row-label { color: var(--text-soft); font-size: .9rem; }
.access-row-value {
font-weight: 600; font-size: .95rem;
word-break: break-all;
}
.share-url-row {
flex-direction: column; align-items: stretch;
gap: .5rem;
}
.share-url-input {
display: flex; gap: .5rem; align-items: center;
}
.share-url-input input {
flex: 1; padding: .55rem .75rem; font-size: .85rem;
border: 1px solid var(--border); border-radius: 8px;
background: var(--pill-bg); color: var(--text);
font-family: 'Courier New', monospace;
}
.share-url-input button {
white-space: nowrap;
}
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
can't
* live inside the ).
*
* Visual treatment: the disclosure is visually attached to the row
* above via shared rounded corners and the same card surface. The
* row gets flat-bottom corners when its sibling disclosure is
* present, so the two read as one card. The disclosure-summary
* line is a thin band with the count and toggle chevron.
*
* Hide native disclosure marker so we render our own chevron icon
* for consistent styling across browsers. */
.listing-row-wrap {
/* The grouping element. No box of its own — children paint the
* card. Vertical stack via the parent .listing-rows flex. */
}
.listing-row-wrap .listing-row-events {
margin: 0;
/* Visually attach to the row above: remove the gap, share the
* card surface, drop the top-border, round only the bottom. */
margin-top: -1px; /* overlap the row's bottom border */
background: var(--card);
border: 1px solid var(--border);
border-top: 1px dashed var(--border);
border-radius: 0 0 18px 18px;
overflow: hidden;
}
/* When a row is followed by an events disclosure, flatten its
* bottom corners so the two pieces merge into a single card. */
.listing-row-wrap .listing-row-events ~ * { display: none; } /* defensive: only one disclosure per wrap */
.listing-row-wrap:has(.listing-row-events) .listing-row {
border-radius: 18px 18px 0 0;
}
.listing-row-events summary { list-style: none; cursor: pointer; }
.listing-row-events summary::-webkit-details-marker { display: none; }
.listing-row-events summary::marker { display: none; content: ''; }
.listing-row-events-summary {
display: flex;
align-items: center;
gap: .5rem;
padding: .7rem 1rem;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
transition: color .15s, background .15s;
}
.listing-row-events-summary:hover {
color: var(--text);
background: color-mix(in srgb, var(--text) 3%, transparent);
}
.listing-row-events-summary .listing-row-events-label {
/* The text portion of the summary line. The count pill and
* toggle chevron sit to its right. */
}
.listing-row-events-summary .listing-count {
letter-spacing: 0;
text-transform: none;
color: var(--muted);
font-weight: 600;
}
.listing-row-events-summary .listing-row-events-toggle {
margin-left: auto;
display: inline-flex;
align-items: center;
color: var(--muted);
transition: transform .2s ease, color .2s ease;
}
.listing-row-events[open] .listing-row-events-toggle {
transform: rotate(180deg);
}
.listing-row-events-summary:hover .listing-row-events-toggle {
color: var(--text);
}
.listing-row-events-list {
/* The events themselves. Indent slightly from the disclosure's
* edge so they read as nested under the row above, and add
* vertical breathing room before the first card and after the
* last. The .whats-on parent flex gap handles inter-card spacing. */
padding: .25rem 1rem 1rem;
}
/* ============================================================
LISTING MEMBER ROWS (v9.10.53)
============================================================
Vertical-stack horizontal-row layout for listing detail
pages. Each row is a wide entry with thumbnail left, name +
subtype + description in the middle, and a chevron on the
right. Visually distinct from atmosphere drill cards so
visitors immediately read the page as "curated list" not
"another category page".
============================================================ */
.listing-members-section { margin-top: 1.5rem; }
.listing-members-section .detail-section-label {
/* Section label gets the same treatment as Gallery / What's On
* section labels, plus a small count pill to make the list
* feel quantified ("Places in this list (5)"). */
margin-bottom: .85rem;
}
.listing-count {
color: var(--muted);
font-weight: 600;
}
.listing-rows {
display: flex;
flex-direction: column;
gap: .85rem;
}
.listing-row {
display: flex;
align-items: center;
gap: 1.1rem;
padding: 1rem;
background: var(--card);
border: 1px solid var(--border);
border-radius: 18px;
transition: border-color .2s, transform .2s;
cursor: pointer;
text-decoration: none;
color: var(--text);
}
.listing-row:hover {
border-color: var(--border-strong);
transform: translateX(2px);
}
/* Thumbnail: fixed-width square on desktop (130px), shrinks on
* mobile to keep the row from dominating narrow viewports.
* object-fit:cover crops cleanly regardless of source aspect. */
.listing-row-thumb {
flex-shrink: 0;
width: 130px;
height: 130px;
border-radius: 12px;
overflow: hidden;
background: var(--bg);
position: relative;
}
.listing-row-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.listing-row-thumb-placeholder {
/* Soft fallback when no cover image is set on the member —
* displays the generic place glyph centered in the thumb slot.
* Same visual weight as image thumbnails so the row layout
* stays uniform across members with and without images. */
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
opacity: .35;
}
.listing-row-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: .25rem;
}
.listing-row-kicker {
/* Subtype kicker: small uppercase tracked label above the
* name. Matches the .whats-on-info .label treatment but in
* a neutral muted color (no red event-ness). */
font-size: 10px;
font-weight: 700;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--muted);
}
.listing-row-name {
font-size: 1.15rem;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--text);
line-height: 1.25;
}
.listing-row-desc {
/* Description trimmed to 2 lines via line-clamp so verbose
* operator copy doesn't bloat the row. The full text shows
* on the member's own detail page. line-clamp is widely
* supported (Chrome, Safari, Firefox); on the rare unsupported
* browser the description still renders, just full-length. */
font-size: .9rem;
color: var(--text-soft, var(--muted));
line-height: 1.4;
margin-top: .15rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.listing-row-arrow {
flex-shrink: 0;
color: var(--muted);
transition: color .2s, transform .2s;
}
.listing-row:hover .listing-row-arrow {
color: var(--text);
transform: translateX(2px);
}
/* Mobile: shrink the thumb so the body text gets the room it
* needs. Keep the row horizontal — vertical stack would lose
* the "guide list" visual signature. */
@media (max-width: 480px) {
.listing-row { padding: .75rem; gap: .85rem; }
.listing-row-thumb { width: 88px; height: 88px; }
.listing-row-name { font-size: 1rem; }
.listing-row-desc { font-size: .85rem; }
.listing-row-arrow { display: none; }
}
/* ============================================================
SIDEBAR CARD — location + hours in detail view
============================================================ */
.sidebar-card {
padding: 1.65rem;
background: var(--card);
border: 1px solid var(--border);
border-radius: 22px;
margin-bottom: 1rem;
display: block;
color: var(--text);
}
/* When the address row is clickable, wrap it in .
* The row gets the hover/cursor styling; the parent card stays passive
* so hovering an info row (hours, time-of-day) doesn't suggest a click
* that doesn't exist. Fixes a bug where the entire card was a single
* , making any-row hover light up the card and any-row click open
* directions — confusing for rows that have nothing to do with maps.
*/
.sidebar-card-row-link {
text-decoration: none;
color: inherit;
cursor: pointer;
border-radius: 12px;
margin: -.4rem -.6rem;
padding: .4rem .6rem;
transition: background .2s;
}
.sidebar-card-row-link:hover {
background: var(--bg);
}
.sidebar-card-row {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 1rem;
}
.sidebar-card-row + .sidebar-card-row {
margin-top: 1.4rem;
padding-top: 1.4rem;
border-top: 1px solid var(--border);
}
.sidebar-card-label {
font-size: 10px; font-weight: 700;
letter-spacing: .2em; text-transform: uppercase;
color: var(--muted);
margin-bottom: .55rem;
}
.sidebar-card-value {
font-size: 1rem; font-weight: 500;
line-height: 1.4;
}
.sidebar-card-value-soft {
font-size: 13px; color: var(--muted); margin-top: .15rem;
}
.open-now {
display: inline-flex; align-items: center; gap: .35rem;
font-size: 10px; font-weight: 700;
letter-spacing: .15em; text-transform: uppercase;
color: #16a34a;
margin-top: .35rem;
}
.open-now::before {
content: ''; width: 7px; height: 7px;
border-radius: 50%; background: currentColor;
}
.closed-now {
display: inline-flex; align-items: center; gap: .35rem;
font-size: 10px; font-weight: 700;
letter-spacing: .15em; text-transform: uppercase;
color: var(--muted);
margin-top: .35rem;
}
.sidebar-arrow {
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid var(--border-strong);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: all .2s;
color: var(--text);
}
.sidebar-card-row-link:hover .sidebar-arrow {
background: var(--text); color: var(--bg);
border-color: var(--text);
}
.sidebar-arrow svg { width: 14px; height: 14px; }
/* ============================================================
SEARCH OVERLAY
============================================================ */
#guides-search-overlay {
position: fixed; inset: 0;
z-index: 200;
background: var(--bg);
display: none;
flex-direction: column;
padding: 1rem;
}
#guides-search-overlay[aria-hidden="false"],
#guides-search-overlay.open {
display: flex;
}
#guides-search-overlay-backdrop {
position: absolute; inset: 0;
background: var(--bg);
}
#guides-search-overlay-body {
position: relative;
max-width: 760px;
width: 100%;
margin: 0 auto;
padding: 1.25rem 1.5rem 0;
}
.guides-search-form {
display: flex; align-items: center; gap: .85rem;
border-bottom: 1px solid var(--border-strong);
padding: .35rem 0 .25rem;
/* v9.5 — Right padding so the input doesn't run under the
* floating close button in the top-right corner of the overlay
* body. 56px = 44 (button width) + 12 (.75rem from-edge offset). */
padding-right: 56px;
}
.guides-search-icon { color: var(--muted); display: inline-flex; }
.guides-search-form input {
flex: 1;
font-size: 1.5rem; font-weight: 500;
background: transparent;
border: 0;
padding: .85rem 0;
color: var(--text);
font-family: inherit;
}
.guides-search-form input:focus { outline: none; }
.guides-search-form input::placeholder { color: var(--muted); }
.guides-search-close {
/* v9.5 — Floating top-right close button.
*
* Pre-v9.5 the close button sat inline at the end of the search
* form, after the input. On narrow mobile viewports users
* reported "can't close search" — even though the button was
* technically there with min 44x44 reach, it was visually muddy
* (text color against same-color background) and the inline
* layout pushed it tight against the right edge where it could
* brush the viewport edge and feel un-tappable.
*
* Floating it to the absolute top-right of the overlay body
* decouples its position from the form layout entirely. The
* circular background gives it consistent contrast against any
* theme, and the fixed corner position matches the pattern most
* users expect for "close this modal" on mobile (iOS share
* sheets, Android modals, etc.).
*
* inset works in this context because the parent
* #guides-search-overlay-body is position:relative. */
position: absolute;
top: .75rem;
right: .75rem;
width: 44px; height: 44px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--pill-bg);
color: var(--text);
padding: 0;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: background .15s, transform .15s, border-color .15s;
/* z-index above the input so the button receives taps even if a
* stray autofill chip or browser-supplied affordance overlaps the
* top-right corner of the form. */
z-index: 2;
}
.guides-search-close:hover {
background: var(--bg-soft, var(--pill-bg));
border-color: var(--border-strong);
transform: scale(1.04);
}
.guides-search-close svg {
width: 20px; height: 20px;
/* The stroked X reads well at 20px; smaller would be hard to tap-
* target precisely on a 44px button. */
}
/* ============================================================
FOOTER
============================================================ */
.site-footer {
margin-top: 6rem;
padding: 4rem 0;
border-top: 1px solid var(--border);
}
.site-footer-inner {
display: flex; flex-wrap: wrap; gap: 2rem;
justify-content: space-between; align-items: center;
}
.site-footer-logo {
font-family: 'Playfair Display', serif;
font-style: italic; font-size: 1.5rem; font-weight: 600;
opacity: .85;
}
.site-footer-links {
display: flex; gap: 2.5rem; flex-wrap: wrap;
font-size: 10px; font-weight: 700;
letter-spacing: .2em; text-transform: uppercase;
color: var(--muted);
}
.site-footer-links a:hover { color: var(--text); }
.site-footer-meta {
font-size: 10px;
letter-spacing: .15em;
color: var(--muted);
}
@media (max-width: 640px) {
.site-footer { margin-top: 3rem; padding: 3rem 0; }
.site-footer-inner { gap: 1.5rem; }
}
/* ============================================================
PANEL (slide-in detail viewer — kept from old design)
============================================================ */
#guides-panel {
position: fixed; inset: 0;
z-index: 200;
pointer-events: none;
}
#guides-panel[aria-hidden="false"] { pointer-events: auto; }
#guides-panel-backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,.5);
opacity: 0;
transition: opacity .3s;
}
#guides-panel[aria-hidden="false"] #guides-panel-backdrop { opacity: 1; }
#guides-panel-body {
position: absolute; top: 0; right: 0;
width: min(100%, 920px);
height: 100%;
background: var(--bg);
transform: translateX(100%);
transition: transform .35s cubic-bezier(.16,1,.3,1);
overflow-y: auto;
border-left: 1px solid var(--border);
}
#guides-panel[aria-hidden="false"] #guides-panel-body {
transform: translateX(0);
}
#guides-panel-close {
position: absolute; top: 1.25rem; left: 1.25rem;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(0,0,0,.4);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,.2);
color: white;
display: inline-flex; align-items: center; justify-content: center;
z-index: 10;
}
@media (max-width: 720px) {
#guides-panel-body { width: 100%; }
}
/* ============================================================
FORMS — signin / signup
============================================================ */
.form-page {
max-width: 420px; margin: 4rem auto;
padding: 2.5rem 1.5rem;
}
.form-page h1 {
font-family: 'Outfit', sans-serif;
font-size: 2.5rem; font-weight: 700;
letter-spacing: -0.025em;
margin-bottom: .5rem;
}
.form-page p.lede {
color: var(--muted);
font-size: 1rem;
margin-bottom: 2.25rem;
}
.form-group { margin-bottom: 1rem; }
.form-group label {
display: block;
font-size: 11px; font-weight: 700;
letter-spacing: .15em; text-transform: uppercase;
color: var(--muted);
margin-bottom: .55rem;
}
.form-input {
width: 100%;
padding: .85rem 1.1rem;
background: var(--card);
border: 1px solid var(--border-strong);
border-radius: 12px;
font: inherit;
font-size: 1rem;
color: var(--text);
transition: border-color .2s;
}
.form-input:focus {
outline: none;
border-color: var(--text);
}
.form-error {
background: rgba(239,68,68,.08);
border: 1px solid rgba(239,68,68,.3);
color: #ef4444;
padding: .85rem 1.1rem;
border-radius: 12px;
font-size: 13px;
margin-bottom: 1rem;
}
.form-footer {
margin-top: 1.5rem;
font-size: 13px;
color: var(--muted);
text-align: center;
}
.form-footer a { color: var(--text); text-decoration: underline; }
/* ============================================================
EMPTY STATES
============================================================ */
.empty {
text-align: center;
padding: 4rem 1.5rem;
color: var(--muted);
}
.empty .emoji { font-size: 2.5rem; display: block; margin-bottom: 1rem; }
.empty p { font-size: 1rem; margin-bottom: 1rem; }
/* ============================================================
ANIMATION HELPERS
============================================================ */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.anim-in { opacity: 0; animation: fadeUp .65s cubic-bezier(.16,1,.3,1) forwards; }
/* ============================================================
SECTION VISIBILITY — atmoDrill SPA-style transitions
============================================================
The home renders both the bento section and the drill section
into the DOM at all times; .is-hidden toggles visibility. The
atmoDrill JS module animates between them by flipping these
classes plus .is-fading / .is-entering for the cross-fade.
*/
.is-hidden { display: none !important; }
.is-fading { opacity: 0; transform: scale(.97); transition: opacity .25s, transform .25s; }
.is-entering { opacity: 0; transform: translateY(8px); }
.atmo-grid-section, .atmo-drill-in {
transition: opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);
}
/* ============================================================
ACCESS-GATING — paywall, banners, account extensions (Turn C)
============================================================ */
/* Subscribe page hero — large, calm, marketing-page feel.
* Most of the geometry is set on container + plan-grid below;
* .subscribe-hero is just the headline block. */
.subscribe-page { padding: 3rem 0; }
.subscribe-hero { text-align: center; margin-bottom: 2.5rem; }
.subscribe-h1 {
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: clamp(2rem, 5vw, 3rem);
margin: 0 0 0.5rem;
}
.subscribe-subhead {
font-size: 1.05rem; color: var(--text-soft);
margin: 0 auto 2rem; max-width: 36rem;
}
/* Billing-interval toggle. Two pill-buttons inside a flex row, one
* is-active at a time. The "save ~30%" badge nests inside the
* Yearly button to reinforce the discount. */
.subscribe-toggle {
display: inline-flex; gap: .25rem;
padding: .25rem; background: var(--pill-bg); border-radius: 999px;
}
.toggle-btn {
border: 0; background: transparent; cursor: pointer;
padding: .5rem 1.25rem; border-radius: 999px;
font-size: .9rem; font-weight: 600; color: var(--text-soft);
transition: background .15s, color .15s;
}
.toggle-btn.is-active {
background: var(--bg); color: var(--text);
box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.toggle-save {
display: inline-block;
margin-left: .35rem;
padding: .1rem .4rem;
background: var(--accent, #6b8d57); color: #fff;
border-radius: 999px; font-size: .7rem; font-weight: 600;
}
/* Plan grid: 2-col on desktop, stacked on mobile. */
.plan-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
max-width: 56rem; margin: 0 auto;
}
.plan-card {
border: 1px solid var(--border);
border-radius: 18px;
padding: 1.75rem 1.5rem;
background: var(--card);
display: flex; flex-direction: column;
transition: transform .15s, box-shadow .15s, border-color .15s;
}
.plan-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,.06);
border-color: var(--text-soft);
}
.plan-name {
font-size: 1.25rem; font-weight: 700;
margin: 0 0 0.75rem;
}
.plan-price { margin-bottom: 1.25rem; }
.plan-price-amount {
font-family: 'Playfair Display', serif;
font-size: 2.2rem; font-weight: 700;
}
.plan-price-period {
font-size: .95rem; color: var(--text-soft);
margin-left: .25rem;
}
.plan-features {
list-style: none; padding: 0; margin: 0 0 1.5rem;
flex: 1;
}
.plan-features li {
padding-left: 1.5rem; position: relative;
margin-bottom: .55rem; font-size: .95rem; color: var(--text);
}
.plan-features li::before {
content: '✓';
position: absolute; left: 0;
color: var(--accent, #6b8d57); font-weight: 700;
}
.subscribe-btn { margin-top: auto; }
.subscribe-anon-note {
text-align: center; color: var(--text-soft);
margin: 2rem auto 0; max-width: 36rem;
font-size: .95rem;
}
.subscribe-anon-note a {
color: var(--text); text-decoration: underline;
font-weight: 600;
}
/* FAQ block under the plan grid */
.subscribe-faq {
max-width: 42rem; margin: 4rem auto 0;
}
.subscribe-faq-h2 {
font-family: 'Playfair Display', serif;
font-weight: 700; font-size: 1.5rem;
margin: 0 0 1.5rem; text-align: center;
}
.subscribe-faq dl { margin: 0; }
.subscribe-faq dt {
font-weight: 600; margin: 1rem 0 .25rem;
}
.subscribe-faq dd {
margin: 0 0 1rem; color: var(--text-soft);
font-size: .95rem; line-height: 1.5;
}
/* ---------- Share banner ----------
* Renders above the header for anonymous visitors who arrived via
* an org share URL. Compact strip with the org name + a CTA to
* sign up. Theme-aware: inherits theme colors instead of a fixed
* accent so it doesn't fight the brand mark. */
.share-banner {
background: var(--text); color: var(--bg);
padding: .55rem 1rem;
font-size: .85rem; line-height: 1.3;
text-align: center;
}
.share-banner a {
color: inherit; text-decoration: underline;
font-weight: 600; margin-left: .5rem;
}
/* ---------- Trial countdown ----------
* Small pill shown in the user menu or account page when access
* state is 'trial'. Counts down in minutes once below an hour,
* gentle warning tone (no alarming red unless < 5 min). */
.trial-countdown {
display: inline-flex; align-items: center; gap: .35rem;
padding: .25rem .75rem; border-radius: 999px;
background: var(--pill-bg); color: var(--text);
font-size: .75rem; font-weight: 600;
}
.trial-countdown.is-urgent {
background: #fff3cd; color: #856404;
}
/* ---------- Account page access section ---------- */
.account-access { margin: 2rem 0; }
.account-access h2 {
font-family: 'Playfair Display', serif; font-size: 1.4rem;
font-weight: 700; margin: 0 0 1rem;
}
.access-row {
display: flex; align-items: center; justify-content: space-between;
padding: .75rem 0; border-bottom: 1px solid var(--border);
gap: 1rem;
}
.access-row:last-child { border-bottom: 0; }
.access-row-label { color: var(--text-soft); font-size: .9rem; }
.access-row-value {
font-weight: 600; font-size: .95rem;
word-break: break-all;
}
.share-url-row {
flex-direction: column; align-items: stretch;
gap: .5rem;
}
.share-url-input {
display: flex; gap: .5rem; align-items: center;
}
.share-url-input input {
flex: 1; padding: .55rem .75rem; font-size: .85rem;
border: 1px solid var(--border); border-radius: 8px;
background: var(--pill-bg); color: var(--text);
font-family: 'Courier New', monospace;
}
.share-url-input button {
white-space: nowrap;
}
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}