/*
* Explore Mission Valley — theme stylesheet.
*
* Range Print Shop / Postershop aesthetic. CSS extracted verbatim from the
* binding mockup app/public/mockups/town-polson-postershop.html per the
* mockups-are-binding rule. Component CSS added in Phase 2 when each
* additional template lands.
*
* Do not refactor selectors or rename tokens here without a corresponding
* update to the mockup file — they must stay in sync.
*/
/* ============================================================
EXPLORE MISSION VALLEY — RANGE PRINT SHOP
Town landing — Polson
============================================================ */
:root {
--paper: #f4ead4;
--paper-deep: #ecdfbe;
--paper-soft: #f8f1de;
--teal: #1f5763;
--teal-deep: #143b45;
--mustard: #d9a64d;
--mustard-deep: #b87f30;
--clay: #b8462b;
--clay-deep: #8e3320;
--forest: #2d4a35;
--ink: #1a1714;
--ink-soft: #3a352f;
--font-poster: 'Big Shoulders Display', 'Anton', sans-serif;
--font-body: 'Outfit', -apple-system, sans-serif;
--font-accent: 'DM Serif Display', Georgia, serif;
--gutter: clamp(1.25rem, 4vw, 3rem);
--max: 1280px;
--read: 720px; /* article column measure — single-story (mockup value; was referenced but never defined) */
--ease: cubic-bezier(0.22, 0.9, 0.3, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
background: var(--paper);
color: var(--ink);
line-height: 1.5;
font-size: 17px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
background-image:
url("data:image/svg+xml;utf8,");
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
svg { display: block; }
.eyebrow {
font-family: var(--font-poster);
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 0.78rem;
}
.script {
font-family: var(--font-accent);
font-style: italic;
font-weight: 400;
}
/* ============================================================
PRESS BAR
============================================================ */
.press-bar {
background: var(--ink);
color: var(--paper);
padding: 0.55rem var(--gutter);
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
gap: 1rem;
font-family: var(--font-poster);
font-weight: 700;
font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
}
.press-bar .left { justify-self: start; }
.press-bar .right { justify-self: end; color: var(--mustard); }
.press-bar .stars { color: var(--mustard); letter-spacing: 0.4em; }
.press-bar .mid {
display: flex; align-items: center; gap: 0.6rem;
color: var(--paper-soft);
justify-self: center;
}
.press-bar .mid::before,
.press-bar .mid::after {
content: ''; width: 30px; height: 1px; background: var(--mustard);
}
@media (max-width: 760px) {
.press-bar { grid-template-columns: 1fr; }
.press-bar .left, .press-bar .right { display: none; }
}
/* ============================================================
MASTHEAD
============================================================ */
.masthead {
background: var(--paper);
border-bottom: 3px solid var(--ink);
padding: 1.1rem var(--gutter);
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
gap: 2rem;
position: sticky; top: 0; z-index: 50;
}
/* Nav lives in the center column; brand and CTA flex columns balance to keep
the nav genuinely page-centered even when brand and CTA have unequal widths. */
.masthead > .brand { justify-self: start; }
.masthead > .masthead-actions { justify-self: end; display: flex; align-items: center; gap: 0.75rem; }
.masthead::after {
content: '';
position: absolute; bottom: -8px; left: 0; right: 0;
height: 4px;
background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 12px);
}
.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand .seal { height: 46px; width: auto; flex: none; } /* shield badge: sized by height */
.brand .wordmark { display: flex; flex-direction: column; line-height: 0.92; }
.brand .wordmark .top {
font-family: var(--font-poster); font-weight: 800;
font-size: 1.15rem; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--ink);
}
.brand .wordmark .bot {
font-family: var(--font-accent); font-style: italic;
font-size: 0.78rem; color: var(--teal); margin-top: 2px;
}
.nav { display: flex; justify-content: center; gap: 0; flex-wrap: wrap; }
.nav li { list-style: none; display: contents; }
.nav a {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.12em;
font-size: 1rem; padding: 0.5rem 1.15rem;
color: var(--ink); position: relative;
transition: color 0.2s var(--ease);
}
.nav li + li > a::before {
content: '';
position: absolute; left: 0; top: 50%;
width: 5px; height: 5px; background: var(--clay); border-radius: 50%;
transform: translate(-50%, -50%);
}
.nav a:hover, .nav a.active { color: var(--clay); }
.cta-btn {
display: inline-flex; align-items: center; gap: 0.5rem;
background: var(--clay); color: var(--paper);
font-family: var(--font-poster);
font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
font-size: 0.82rem;
padding: 0.7rem 1.1rem;
border: 2px solid var(--ink);
box-shadow: 4px 4px 0 var(--ink);
transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.cta-btn:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 var(--ink);
}
.cta-btn.alt { background: var(--mustard); color: var(--ink); }
.cta-btn.dark { background: var(--ink); color: var(--paper); }
.cta-btn.teal { background: var(--teal); color: var(--paper); }
@media (max-width: 900px) {
.masthead { grid-template-columns: 1fr auto; }
.nav { display: none; }
}
/* ============================================================
HERO POSTER — Polson
============================================================ */
.hero {
position: relative;
background: var(--teal);
color: var(--paper);
overflow: hidden;
padding: 0;
isolation: isolate;
}
.hero-frame {
position: relative;
padding: 4rem var(--gutter) 3rem;
max-width: var(--max);
margin: 0 auto;
min-height: min(86vh, 760px);
display: grid;
grid-template-rows: auto 1fr auto;
z-index: 2;
}
.hero-frame::before {
content: '';
position: absolute; inset: 1.5rem var(--gutter);
border: 2px solid var(--paper); opacity: 0.55;
pointer-events: none;
}
.hero-frame::after {
content: '';
position: absolute; inset: calc(1.5rem + 6px) calc(var(--gutter) + 6px);
border: 1px solid var(--paper); opacity: 0.25;
pointer-events: none;
}
/* Real-photo hero background, color-treated to harmonize with Postershop palette */
.hero__bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hero__bg img {
width: 100%; height: 100%;
object-fit: cover;
filter: brightness(0.62) contrast(1.08) saturate(0.78);
}
.hero__overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(180deg,
rgba(20,59,69,0.55) 0%,
rgba(31,87,99,0.10) 28%,
rgba(31,87,99,0.18) 55%,
rgba(20,59,69,0.90) 100%);
}
.hero__credit {
position: absolute; right: 0.75rem; bottom: 0.6rem; z-index: 3;
font-family: var(--font-body); font-size: 0.66rem; letter-spacing: 0.02em;
color: rgba(244,234,212,0.82);
background: rgba(20,23,20,0.42); padding: 0.18rem 0.5rem; border-radius: 2px;
backdrop-filter: blur(2px); pointer-events: none;
}
.hero__overlay::after {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 30% 50%, rgba(217,166,77,0.10) 0%, transparent 55%);
}
.hero-top {
display: flex; justify-content: space-between; align-items: center;
padding: 0.5rem 1rem;
font-family: var(--font-poster); text-transform: uppercase;
letter-spacing: 0.22em; font-size: 0.78rem;
color: var(--mustard);
position: relative; z-index: 5;
}
.hero-top .mid { color: var(--paper); letter-spacing: 0.3em; font-weight: 800; }
.hero-body {
display: grid; grid-template-columns: 1fr;
align-items: center;
padding: 2rem 1rem;
position: relative; z-index: 5;
max-width: 900px;
}
/* .hero-headline canonical rules live further down in the Single-business
import section (~line 924). The earlier duplicate that previously sat here
was dead code shadowed by the later block on every property; deleted 2026-05-21. */
.hero-tag {
display: inline-block;
margin-top: 1.5rem;
font-family: var(--font-accent); font-style: italic;
font-size: clamp(1.05rem, 1.8vw, 1.4rem);
color: var(--paper-soft);
padding: 0.4rem 0.9rem 0.45rem;
background: var(--clay);
letter-spacing: 0.01em;
}
.hero-sub {
margin-top: 1.4rem;
font-size: 1rem; max-width: 42ch;
color: var(--paper-soft); line-height: 1.55;
}
.hero-ctas {
margin-top: 1.8rem;
display: flex; gap: 0.85rem; flex-wrap: wrap;
}
.hero-art {
position: relative;
aspect-ratio: 4 / 5;
width: 100%; max-width: 540px;
justify-self: end;
}
.hero-art svg { width: 100%; height: 100%; display: block; }
.hero-foot {
position: relative; z-index: 5;
margin: 1.5rem 1rem 0;
padding-top: 1.2rem;
border-top: 1px solid rgba(244,234,212,0.35);
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
.hero-foot .item { display: flex; align-items: flex-start; gap: 0.7rem; }
.hero-foot .num {
font-family: var(--font-poster); font-weight: 900;
font-size: 2rem; color: var(--mustard);
line-height: 0.9;
}
.hero-foot .lbl {
font-family: var(--font-poster); font-weight: 800;
text-transform: uppercase; letter-spacing: 0.12em;
font-size: 0.82rem; color: var(--paper);
}
.hero-foot .sub {
font-family: var(--font-accent); font-style: italic;
font-size: 0.82rem; color: var(--paper-soft);
margin-top: 2px;
}
@media (max-width: 900px) {
.hero-foot { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
}
/* ============================================================
ABOUT BAND — manifesto style
============================================================ */
.about-band {
background: var(--mustard);
color: var(--ink);
border-top: 3px solid var(--ink);
border-bottom: 3px solid var(--ink);
padding: 3.5rem var(--gutter);
position: relative;
overflow: hidden;
}
.about-band::before {
content: '';
position: absolute; top: -3px; left: 0; right: 0;
height: 14px;
background: repeating-linear-gradient(90deg, var(--ink) 0 14px, transparent 14px 28px);
}
.about-band-inner {
max-width: 1080px; margin: 0 auto;
display: grid; grid-template-columns: 1.2fr 1fr;
gap: 3rem; align-items: center;
}
@media (max-width: 760px) { .about-band-inner { grid-template-columns: 1fr; gap: 1.5rem; } }
.about-band .lead {
font-family: var(--font-poster);
font-weight: 800; text-transform: uppercase;
font-size: clamp(1.6rem, 3.2vw, 2.6rem);
line-height: 1.0; letter-spacing: -0.005em;
}
.about-band .lead .red {
color: var(--clay);
font-family: var(--font-accent); font-style: italic; font-weight: 400;
text-transform: none; letter-spacing: -0.01em;
}
.about-band .lead .teal { color: var(--teal); }
.about-band .facts {
display: grid; gap: 1rem;
}
.about-band .fact {
padding: 1rem 1.2rem;
background: var(--paper);
border: 2px solid var(--ink);
box-shadow: 4px 4px 0 var(--ink);
}
.about-band .fact .k {
font-family: var(--font-poster);
font-weight: 700; letter-spacing: 0.16em;
text-transform: uppercase; font-size: 0.7rem;
color: var(--clay);
display: block; margin-bottom: 0.4rem;
}
.about-band .fact .v {
font-family: var(--font-body); font-size: 0.94rem;
color: var(--ink); line-height: 1.45;
}
/* ============================================================
CHAPTERS — category sections as ranger badges
============================================================ */
.chapter {
background: var(--paper);
padding: 5rem var(--gutter) 3rem;
border-bottom: 3px solid var(--ink);
}
.chapter:nth-child(even) { background: var(--paper-soft); }
.chapter-head {
max-width: var(--max); margin: 0 auto 2.5rem;
display: grid; grid-template-columns: auto 1fr auto;
gap: 2rem; align-items: end;
}
.chapter-num {
font-family: var(--font-poster); font-weight: 900;
font-size: 4rem; line-height: 0.9;
color: var(--clay);
text-shadow: 4px 4px 0 var(--ink);
}
.chapter-title {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(1.9rem, 4vw, 3.2rem);
line-height: 0.9; color: var(--ink);
}
.chapter-title em {
font-family: var(--font-accent); font-style: italic;
font-weight: 400; color: var(--teal);
text-transform: none;
}
.chapter-meta {
text-align: right;
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.14em;
font-size: 0.84rem; color: var(--ink-soft);
}
.chapter-meta .count {
display: block;
font-size: 1.4rem; color: var(--clay);
font-weight: 900; margin-bottom: 0.2rem;
}
.chapter-grid {
max-width: var(--max); margin: 0 auto;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
@media (max-width: 900px) { .chapter-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .chapter-grid { grid-template-columns: 1fr; } }
.listing-card {
position: relative;
background: var(--paper-soft);
border: 2px solid var(--ink);
box-shadow: 6px 6px 0 var(--ink);
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
overflow: hidden;
}
.chapter:nth-child(even) .listing-card { background: var(--paper); }
.listing-card:hover {
transform: translate(-3px, -3px) rotate(-0.5deg);
box-shadow: 9px 9px 0 var(--ink);
}
.listing-card__media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border-bottom: 2px solid var(--ink);
}
.listing-card__media img {
width: 100%; height: 100%; object-fit: cover;
filter: contrast(1.05) saturate(0.95);
}
.listing-card__body { padding: 1rem 1.1rem 1.2rem; }
.listing-card__tags {
display: flex; gap: 0.4rem; flex-wrap: wrap;
margin-bottom: 0.6rem;
}
.tag {
display: inline-flex; align-items: center; gap: 0.35rem;
font-family: var(--font-poster); font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
font-size: 0.66rem;
padding: 0.25rem 0.5rem;
border: 1.5px solid var(--ink);
background: var(--paper);
color: var(--ink);
}
.tag.pick { background: var(--mustard); }
.tag.cskt { background: var(--teal); color: var(--paper); border-color: var(--ink); }
.tag.eat { background: var(--clay); color: var(--paper); }
.tag.stay { background: var(--teal); color: var(--paper); }
.tag.do { background: var(--forest); color: var(--paper); }
.tag.shop { background: var(--mustard); }
.tag.svc { background: var(--paper-deep); }
.listing-card__name {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: 1.35rem; line-height: 1;
color: var(--ink);
margin-bottom: 0.5rem;
}
.listing-card__meta {
font-family: var(--font-accent); font-style: italic;
font-size: 0.88rem;
color: var(--ink-soft);
margin-bottom: 0.8rem;
}
.listing-card__cta {
display: inline-block;
font-family: var(--font-poster); font-weight: 800;
letter-spacing: 0.16em; text-transform: uppercase;
font-size: 0.7rem;
color: var(--teal);
border-bottom: 2px solid var(--teal);
padding-bottom: 2px;
}
.chapter-seeall {
display: inline-flex; align-items: center; gap: 0.6rem;
margin-top: 2.5rem;
font-family: var(--font-poster); font-weight: 800;
letter-spacing: 0.16em; text-transform: uppercase;
font-size: 0.85rem;
color: var(--clay);
border-bottom: 2px solid var(--clay);
padding-bottom: 4px;
}
.chapter-seeall:hover { color: var(--ink); border-bottom-color: var(--ink); }
.chapter-footer {
max-width: var(--max); margin: 0 auto;
}
/* ============================================================
EVENTS — ticket-stub style
============================================================ */
.events {
background: var(--teal-deep);
color: var(--paper);
padding: 5rem var(--gutter);
border-bottom: 3px solid var(--ink);
}
.events-head {
max-width: var(--max); margin: 0 auto 2.5rem;
text-align: center;
}
.events-head .eyebrow { color: var(--mustard); }
.events-head h2 {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(2.2rem, 5vw, 4rem);
line-height: 0.9; margin-top: 0.6rem;
color: var(--paper);
}
.events-head h2 em {
font-family: var(--font-accent); font-style: italic;
font-weight: 400; color: var(--mustard);
text-transform: none;
}
.events-grid {
max-width: var(--max); margin: 0 auto;
display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;
}
@media (max-width: 760px) { .events-grid { grid-template-columns: 1fr; } }
.ticket {
background: var(--paper);
color: var(--ink);
border: 2px solid var(--ink);
box-shadow: 6px 6px 0 var(--mustard);
display: grid;
grid-template-columns: 110px 1fr;
overflow: hidden;
position: relative;
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.ticket:hover {
transform: translate(-2px, -2px);
box-shadow: 8px 8px 0 var(--mustard);
}
.ticket__stub {
background: var(--clay); color: var(--paper);
padding: 1.4rem 0.6rem;
text-align: center;
border-right: 2px dashed var(--ink);
display: flex; flex-direction: column; justify-content: center;
position: relative;
}
.ticket__stub::before,
.ticket__stub::after {
content: '';
position: absolute;
width: 16px; height: 16px;
background: var(--teal-deep);
border: 2px solid var(--ink);
border-radius: 50%;
right: -10px;
}
.ticket__stub::before { top: -10px; }
.ticket__stub::after { bottom: -10px; }
.ticket__stub .day {
font-family: var(--font-poster); font-weight: 900;
font-size: 2.6rem; line-height: 1;
}
.ticket__stub .mo {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.16em;
font-size: 0.7rem;
margin-top: 0.3rem;
}
.ticket__body { padding: 1.2rem 1.3rem 1.3rem; }
.ticket__where {
font-family: var(--font-poster); font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
font-size: 0.7rem;
color: var(--clay);
margin-bottom: 0.4rem;
}
.ticket__title {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: 1.4rem; line-height: 1;
color: var(--ink);
margin-bottom: 0.45rem;
}
.ticket__title em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--teal); text-transform: none; }
.ticket__when {
font-family: var(--font-accent); font-style: italic;
font-size: 0.92rem; color: var(--ink-soft);
}
/* ============================================================
STORIES — postcard style
============================================================ */
.stories {
background: var(--paper);
padding: 5rem var(--gutter);
border-bottom: 3px solid var(--ink);
}
.stories-head {
max-width: var(--max); margin: 0 auto 2.5rem;
text-align: center;
}
.stories-head .eyebrow { color: var(--clay); }
.stories-head h2 {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(2.2rem, 5vw, 4rem);
line-height: 0.9; margin-top: 0.6rem; color: var(--ink);
}
.stories-head h2 em {
font-family: var(--font-accent); font-style: italic; font-weight: 400;
color: var(--teal); text-transform: none;
}
.stories-grid {
max-width: var(--max); margin: 0 auto;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem;
}
@media (max-width: 900px) { .stories-grid { grid-template-columns: 1fr; } }
.postcard {
background: var(--paper-soft);
border: 2px solid var(--ink);
box-shadow: 6px 6px 0 var(--teal);
padding: 0;
overflow: hidden;
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.postcard:hover {
transform: translate(-3px, -3px) rotate(-0.5deg);
box-shadow: 9px 9px 0 var(--teal);
}
.postcard__img {
position: relative;
aspect-ratio: 5 / 3;
overflow: hidden;
border-bottom: 2px solid var(--ink);
}
.postcard__img img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04) saturate(0.95); }
.postcard__stamp {
position: absolute;
top: 0.7rem; right: 0.7rem;
width: 56px; height: 56px;
background: var(--mustard);
border: 2px solid var(--ink);
display: grid; place-items: center;
font-family: var(--font-poster); font-weight: 900;
font-size: 0.6rem;
text-align: center;
line-height: 1; text-transform: uppercase;
color: var(--ink);
padding: 0.3rem;
letter-spacing: 0.12em;
transform: rotate(-8deg);
box-shadow: 2px 2px 0 var(--ink);
}
.postcard__body { padding: 1.2rem 1.3rem 1.4rem; }
.postcard__cat {
font-family: var(--font-poster); font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
font-size: 0.72rem; color: var(--clay);
margin-bottom: 0.5rem;
}
.postcard__title {
font-family: var(--font-accent); font-style: italic;
font-size: 1.4rem; line-height: 1.15;
color: var(--ink); margin-bottom: 0.6rem;
}
.postcard__read {
font-family: var(--font-poster); font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
font-size: 0.66rem; color: var(--ink-soft);
}
/* ============================================================
MAP — illustrated vintage tourist map
============================================================ */
.maptown {
background: var(--teal);
color: var(--paper);
padding: 5rem var(--gutter);
border-bottom: 3px solid var(--ink);
position: relative; overflow: hidden;
}
.maptown-inner {
max-width: var(--max); margin: 0 auto;
display: grid; grid-template-columns: 1fr 1.3fr;
gap: 3rem; align-items: center;
}
@media (max-width: 900px) { .maptown-inner { grid-template-columns: 1fr; gap: 2rem; } }
.maptown-copy { }
.maptown-copy .eyebrow { color: var(--mustard); margin-bottom: 0.8rem; display: block; }
.maptown-copy h3 {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(1.9rem, 4vw, 3rem);
line-height: 0.9; color: var(--paper); margin-bottom: 1.2rem;
}
.maptown-copy h3 em {
font-family: var(--font-accent); font-style: italic; font-weight: 400;
color: var(--mustard); text-transform: none;
}
.maptown-copy p {
font-size: 1rem; color: var(--paper-soft); line-height: 1.55;
max-width: 42ch; margin-bottom: 1.5rem;
}
.maptown-visual {
position: relative;
aspect-ratio: 4 / 5;
background: var(--paper-soft);
border: 3px solid var(--ink);
box-shadow: 10px 10px 0 var(--mustard);
padding: 1.5rem;
color: var(--ink);
overflow: hidden;
}
.maptown-visual svg { width: 100%; height: 100%; }
/* ============================================================
NEIGHBORS — railway-card style
============================================================ */
.neighbors {
background: var(--paper-soft);
padding: 4.5rem var(--gutter);
border-bottom: 3px solid var(--ink);
}
.neighbors-head {
max-width: var(--max); margin: 0 auto 2rem;
text-align: center;
}
.neighbors-head h3 {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 0.95;
color: var(--ink);
}
.neighbors-head h3 em {
font-family: var(--font-accent); font-style: italic; font-weight: 400;
color: var(--clay); text-transform: none;
}
.neighbors-grid {
max-width: var(--max); margin: 0 auto;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
@media (max-width: 760px) { .neighbors-grid { grid-template-columns: 1fr; } }
.depot {
background: var(--paper); border: 2px solid var(--ink);
box-shadow: 5px 5px 0 var(--clay);
padding: 1.5rem 1.5rem 1.6rem;
text-align: center;
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.depot:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--clay); }
.depot__name {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: 1.7rem; color: var(--ink); margin-bottom: 0.3rem;
}
.depot__dist {
font-family: var(--font-accent); font-style: italic;
color: var(--ink-soft); font-size: 0.95rem;
}
.depot__cta {
display: inline-block; margin-top: 0.8rem;
font-family: var(--font-poster); font-weight: 800;
letter-spacing: 0.14em; text-transform: uppercase;
font-size: 0.72rem; color: var(--teal);
border-bottom: 2px solid var(--teal); padding-bottom: 2px;
}
/* ============================================================
FOOTER — printer's colophon
============================================================ */
.footer {
background: var(--ink); color: var(--paper-soft);
padding: 4rem var(--gutter) 2rem;
}
.footer-inner { max-width: var(--max); margin: 0 auto; }
.footer-land {
font-family: var(--font-accent); font-style: italic;
font-size: 1.05rem; line-height: 1.5;
color: var(--paper-soft);
border-bottom: 1px solid var(--paper-soft);
padding-bottom: 1.6rem; margin-bottom: 2rem;
max-width: 80ch;
}
.footer-land a { color: var(--mustard); border-bottom: 1px solid var(--mustard); }
.footer-cols {
display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 2.5rem;
margin-bottom: 3rem;
}
.footer-brand {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase; font-size: 1.8rem;
color: var(--paper); margin-bottom: 0.3rem;
}
.footer-brand-tag {
font-family: var(--font-accent); font-style: italic;
color: var(--mustard); font-size: 0.95rem;
}
.footer-col h4 {
font-family: var(--font-poster); font-weight: 800;
text-transform: uppercase; letter-spacing: 0.16em;
font-size: 0.78rem; color: var(--mustard);
margin-bottom: 1rem;
}
.footer-col ul { list-style: none; display: grid; gap: 0.55rem; }
.footer-col a { font-size: 0.88rem; color: var(--paper-soft); }
.footer-col a:hover { color: var(--mustard); }
.footer-bottom {
padding-top: 2rem; border-top: 1px solid var(--paper-soft);
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.16em;
font-size: 0.7rem; color: var(--paper-deep);
}
@media (max-width: 880px) {
.footer-cols { grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-bottom { flex-direction: column; gap: 1rem; }
}
/* ============================================================
HOME PAGE CSS — extracted verbatim from
app/public/mockups/homepage-postershop.html, sections 03–12.
Selectors that overlap with town-polson (.hero, .event,
.stories) take precedence on body.home via source order.
When page-town.php is built, town-specific rules will be
re-scoped to avoid conflicts on the town landing.
============================================================ */
/* ============================================================
03. HERO POSTER — the cover of a 1939 brochure
============================================================ */
.hero {
position: relative;
background: var(--teal);
color: var(--paper);
overflow: hidden;
padding: 0;
isolation: isolate;
}
.hero-frame {
position: relative;
padding: 4rem var(--gutter) 3rem;
max-width: var(--max);
margin: 0 auto;
min-height: min(86vh, 760px);
display: grid;
grid-template-rows: auto 1fr auto;
z-index: 2;
}
/* The poster's inner border, like a deckled stamp */
.hero-frame::before {
content: '';
position: absolute;
inset: 1.5rem var(--gutter);
border: 2px solid var(--paper);
opacity: 0.55;
pointer-events: none;
}
.hero-frame::after {
content: '';
position: absolute;
inset: calc(1.5rem + 6px) calc(var(--gutter) + 6px);
border: 1px solid var(--paper);
opacity: 0.25;
pointer-events: none;
}
.hero-top {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 1rem;
font-family: var(--font-poster);
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 0.78rem;
color: var(--mustard);
position: relative;
z-index: 5;
}
.hero-top .mid {
color: var(--paper);
letter-spacing: 0.3em;
font-weight: 800;
}
.hero-body {
display: grid;
grid-template-columns: 1.1fr 1fr;
align-items: center;
gap: 2rem;
padding: 2rem 1rem;
position: relative;
z-index: 5;
}
.hero-headline {
font-family: var(--font-poster);
font-weight: 900;
text-transform: uppercase;
line-height: 1;
letter-spacing: -0.01em;
}
.hero-headline .word-1 {
font-size: clamp(3.2rem, 9.5vw, 8.2rem);
display: block;
color: var(--paper);
}
.hero-headline .word-2 {
font-size: clamp(4.5rem, 14vw, 12rem);
display: block;
color: var(--mustard);
letter-spacing: -0.02em;
white-space: nowrap;
}
.hero-headline .word-3 {
font-size: clamp(2.5rem, 7vw, 6rem);
display: block;
color: var(--paper);
}
.hero-tag {
display: inline-block;
margin-top: 1.5rem;
font-family: var(--font-accent);
font-style: italic;
font-size: clamp(1.05rem, 1.8vw, 1.4rem);
color: var(--paper-soft);
padding: 0.4rem 0.9rem 0.45rem;
background: var(--clay);
letter-spacing: 0.01em;
}
.hero-sub {
margin-top: 1.4rem;
font-size: 1rem;
max-width: 36ch;
color: var(--paper-soft);
line-height: 1.55;
}
.hero-ctas {
margin-top: 1.8rem;
display: flex;
gap: 0.85rem;
flex-wrap: wrap;
}
/* Right side — the illustrated poster art */
.hero-art {
position: relative;
aspect-ratio: 4 / 5;
width: 100%;
max-width: 540px;
justify-self: end;
}
.hero-art svg {
width: 100%;
height: 100%;
display: block;
}
/* Hero bottom strip: numbered features, like an itinerary */
.hero-foot {
position: relative;
z-index: 5;
margin: 1.5rem 1rem 0;
padding-top: 1.2rem;
border-top: 1px solid rgba(244,234,212,0.35);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.hero-foot .item {
display: flex;
align-items: flex-start;
gap: 0.7rem;
}
.hero-foot .num {
font-family: var(--font-poster);
font-weight: 900;
font-size: 2rem;
color: var(--mustard);
line-height: 0.9;
}
.hero-foot .lbl {
font-family: var(--font-poster);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.82rem;
color: var(--paper);
}
.hero-foot .sub {
font-family: var(--font-accent);
font-style: italic;
font-size: 0.82rem;
color: var(--paper-soft);
margin-top: 2px;
}
@media (max-width: 900px) {
.hero-body { grid-template-columns: 1fr; }
.hero-art { max-width: 380px; justify-self: center; }
.hero-foot { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
}
/* Below the clamp floor the nowrap line outgrows the frame — track the
viewport instead so the one-line lockup survives on phones. 14vw (not
15.5) budgets for the hero-body's own side padding stacked on the
gutter; long town names ("St. Ignatius") share this rule. */
@media (max-width: 540px) {
.hero-headline .word-2 { font-size: 14vw; }
}
/* Drifting sun animation */
@keyframes drift {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.sun-disc { animation: drift 7s var(--ease) infinite; transform-origin: center; }
@keyframes shimmer {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
.sun-rays { animation: shimmer 4.5s ease-in-out infinite; transform-origin: center; }
/* ============================================================
04. FIELD GUIDE STRIP — manifesto on a ticker
============================================================ */
.manifesto {
background: var(--mustard);
color: var(--ink);
border-top: 3px solid var(--ink);
border-bottom: 3px solid var(--ink);
padding: 3rem var(--gutter);
position: relative;
overflow: hidden;
}
.manifesto::before {
content: '';
position: absolute;
top: -3px; left: 0; right: 0;
height: 14px;
background: repeating-linear-gradient(90deg,
var(--ink) 0 14px, transparent 14px 28px);
}
.manifesto-inner {
max-width: 1080px;
margin: 0 auto;
text-align: center;
position: relative;
}
.manifesto .lead {
font-family: var(--font-poster);
font-weight: 800;
text-transform: uppercase;
font-size: clamp(1.6rem, 3.6vw, 2.8rem);
line-height: 1;
letter-spacing: -0.005em;
}
.manifesto .lead .red {
color: var(--clay);
font-family: var(--font-accent);
font-style: italic;
font-weight: 400;
text-transform: none;
letter-spacing: -0.01em;
}
.manifesto .lead .teal {
color: var(--teal);
}
.manifesto .sub {
margin-top: 1.2rem;
font-size: 1.05rem;
max-width: 56ch;
margin-left: auto;
margin-right: auto;
color: var(--ink-soft);
line-height: 1.55;
}
.divider-orn {
display: block;
margin: 1.4rem auto 0;
width: 240px;
}
/* ============================================================
05. CATEGORY GATEWAYS — four ranger badges
============================================================ */
.categories {
background: var(--paper);
padding: 4.5rem var(--gutter) 3rem;
}
.categories-head {
max-width: var(--max);
margin: 0 auto 2.5rem;
text-align: center;
}
.categories-head .eyebrow { color: var(--clay); }
.categories-head h2 {
font-family: var(--font-poster);
font-weight: 900;
text-transform: uppercase;
font-size: clamp(2.2rem, 5vw, 4rem);
line-height: 0.9;
margin-top: 0.6rem;
color: var(--ink);
}
.categories-head h2 em {
font-family: var(--font-accent);
font-style: italic;
font-weight: 400;
color: var(--teal);
text-transform: none;
}
.categories-head p {
font-family: var(--font-accent);
font-style: italic;
margin-top: 0.6rem;
color: var(--ink-soft);
}
.cat-grid {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.cat-card {
position: relative;
background: var(--paper-soft);
border: 2px solid var(--ink);
padding: 1.6rem 1.2rem 1.2rem;
text-align: center;
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
box-shadow: 6px 6px 0 var(--ink);
}
.cat-card:hover {
transform: translate(-3px, -3px) rotate(-1deg);
box-shadow: 9px 9px 0 var(--ink);
}
.cat-card .badge {
width: 130px; height: 130px;
margin: 0 auto 1rem;
}
.cat-card h3 {
font-family: var(--font-poster);
font-weight: 900;
font-size: 1.6rem;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--ink);
}
.cat-card .count {
font-family: var(--font-accent);
font-style: italic;
color: var(--clay);
font-size: 0.95rem;
margin-top: 0.2rem;
}
.cat-card .desc {
font-size: 0.88rem;
color: var(--ink-soft);
margin-top: 0.6rem;
line-height: 1.45;
}
.cat-card .arrow {
display: inline-block;
margin-top: 1rem;
font-family: var(--font-poster);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.78rem;
color: var(--teal);
border-bottom: 2px solid var(--teal);
padding-bottom: 2px;
}
.cat-cell {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.cat-card__subs {
font-family: var(--font-body);
font-size: 0.78rem;
line-height: 1.55;
color: var(--ink-soft);
padding: 0 0.4rem;
text-align: center;
}
.cat-card__subs a {
color: var(--ink-soft);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.cat-card__subs a:hover {
color: var(--clay);
border-bottom-color: var(--clay);
}
.cat-card__subs .sep {
color: var(--mustard-deep);
margin: 0 0.2rem;
opacity: 0.6;
}
.cat-card__subs a.all {
font-family: var(--font-poster);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.7rem;
color: var(--teal);
}
.cat-card__subs a.all:hover {
color: var(--clay);
border-bottom-color: var(--clay);
}
@media (max-width: 900px) {
.cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
.cat-grid { grid-template-columns: 1fr; }
}
/* ============================================================
05b. SERVICES BAND — resident-facing band below the four mood-cards
============================================================ */
.services-band {
background: var(--ink);
color: var(--paper);
padding: 3.5rem var(--gutter);
border-top: 3px solid var(--mustard);
border-bottom: 3px solid var(--mustard);
}
.services-band__inner {
max-width: var(--max);
margin: 0 auto;
}
.services-band__head {
text-align: center;
margin-bottom: 2rem;
}
.services-band__eyebrow {
font-family: var(--font-poster);
text-transform: uppercase;
letter-spacing: 0.28em;
font-size: 0.78rem;
font-weight: 700;
color: var(--mustard);
margin: 0 0 0.65rem;
}
.services-band__title {
font-family: var(--font-poster);
font-weight: 900;
text-transform: uppercase;
font-size: clamp(2rem, 4.5vw, 3.4rem);
line-height: 0.92;
color: var(--paper);
margin: 0;
}
.services-band__title em {
font-family: var(--font-accent);
font-style: italic;
font-weight: 400;
color: var(--mustard);
text-transform: none;
}
.services-band__sub {
font-family: var(--font-body);
font-size: 0.98rem;
line-height: 1.55;
color: var(--paper);
opacity: 0.85;
max-width: 56ch;
margin: 0.9rem auto 0;
}
.services-band__list {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
justify-content: center;
margin: 0 auto 2rem;
max-width: 1000px;
}
.services-chip {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.9rem 0.6rem;
background: var(--paper);
color: var(--ink);
border: 2px solid var(--mustard);
text-decoration: none;
font-family: var(--font-poster);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.82rem;
transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease);
}
.services-chip:hover {
background: var(--mustard);
transform: translate(-2px, -2px);
box-shadow: 4px 4px 0 var(--clay);
}
.services-chip__name { line-height: 1; }
.services-chip__n {
font-family: var(--font-poster);
font-weight: 800;
font-size: 0.72rem;
color: var(--ink-soft);
background: var(--mustard);
padding: 0.15rem 0.4rem 0.2rem;
border-radius: 2px;
line-height: 1;
}
.services-chip:hover .services-chip__n {
background: var(--paper);
color: var(--ink);
}
.services-band__foot { text-align: center; }
.services-band__all {
display: inline-block;
font-family: var(--font-poster);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 0.88rem;
color: var(--mustard);
border-bottom: 2px solid var(--mustard);
padding-bottom: 3px;
text-decoration: none;
transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.services-band__all:hover {
color: var(--clay);
border-bottom-color: var(--clay);
}
@media (max-width: 640px) {
.services-band { padding: 2.75rem var(--gutter); }
.services-chip { font-size: 0.76rem; padding: 0.45rem 0.7rem 0.5rem; }
}
/* ============================================================
HEADER SEARCH TOGGLE + OVERLAY (Pass 6)
============================================================ */
.masthead-search-toggle {
background: transparent;
border: 2px solid var(--ink);
color: var(--ink);
cursor: pointer;
width: 38px; height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
margin-right: 0.5rem;
transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), color 0.15s var(--ease);
}
.masthead-search-toggle:hover,
.masthead-search-toggle:focus {
transform: translate(-2px, -2px);
box-shadow: 3px 3px 0 var(--clay);
color: var(--clay);
outline: none;
}
.search-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(20, 23, 20, 0.94);
display: none;
align-items: flex-start;
justify-content: center;
padding: 12vh var(--gutter) var(--gutter);
}
.search-overlay.is-open { display: flex; }
body.search-overlay-open { overflow: hidden; }
.search-overlay__close {
position: absolute;
top: 1.5rem; right: 1.5rem;
background: transparent;
border: 2px solid var(--mustard);
color: var(--mustard);
width: 44px; height: 44px;
font-size: 1.6rem;
font-family: var(--font-poster);
cursor: pointer;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.15s var(--ease), color 0.15s var(--ease);
}
.search-overlay__close:hover {
transform: rotate(90deg);
color: var(--clay);
}
.search-overlay__form {
width: 100%;
max-width: 700px;
}
.search-overlay__label {
display: block;
font-family: var(--font-poster);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 0.85rem;
color: var(--mustard);
margin-bottom: 0.85rem;
}
.search-overlay__input {
width: 100%;
font-family: var(--font-poster);
font-weight: 900;
font-size: clamp(1.5rem, 4vw, 2.4rem);
background: transparent;
border: none;
border-bottom: 3px solid var(--mustard);
color: var(--paper);
padding: 0.4rem 0;
outline: none;
}
.search-overlay__input::placeholder {
color: var(--paper);
opacity: 0.4;
font-style: italic;
font-family: var(--font-accent);
font-weight: 400;
}
.search-overlay__input:focus {
border-bottom-color: var(--clay);
}
.search-overlay__hints {
margin-top: 1.5rem;
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.5;
color: var(--paper);
opacity: 0.75;
}
/* ============================================================
SEARCH RESULTS — /?s=query (Pass 6, Relevanssi-backed)
============================================================ */
.search-section {
background: var(--paper);
padding: 2rem var(--gutter) 1rem;
}
.search-section + .search-section {
padding-top: 0.5rem;
}
.search-section__inner {
max-width: var(--max);
margin: 0 auto;
}
.search-section__head {
display: flex;
align-items: baseline;
gap: 1rem;
margin-bottom: 1.25rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--ink);
}
.search-section__title {
font-family: var(--font-poster);
font-weight: 900;
text-transform: uppercase;
font-size: clamp(1.4rem, 2.5vw, 2rem);
line-height: 1;
color: var(--ink);
margin: 0;
letter-spacing: -0.005em;
}
.search-section__count {
font-family: var(--font-poster);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.8rem;
color: var(--clay);
}
.search-section__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.25rem;
}
/* Town-filter wrapper around each business card: invisible to the grid
(cards stay direct grid items visually) but hideable by search-filter.js. */
.js-sresult { display: contents; }
.filterstrip--search { margin-top: -1px; }
/* past-events progressive reveal (events almanac) */
.past__row--more { display: none; }
.past--expanded .past__row--more { display: grid; }
.past__more {
margin-top: 0.9rem; padding: 0.55rem 1.1rem;
background: var(--paper); color: var(--ink);
border: 2px solid var(--ink); cursor: pointer;
font-family: var(--font-poster); font-weight: 700;
font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.past__more:hover { background: var(--mustard); }
.search-empty {
background: var(--paper);
padding: 4rem var(--gutter) 5rem;
}
.search-empty__inner {
max-width: 700px;
margin: 0 auto;
text-align: center;
}
.search-empty__lede {
font-family: var(--font-accent);
font-style: italic;
font-size: 1.4rem;
color: var(--ink-soft);
margin: 0 0 1.5rem;
}
.search-empty__hints {
font-family: var(--font-poster);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.8rem;
color: var(--ink);
margin: 0 0 1rem;
}
.search-empty__links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.65rem;
}
.search-empty__links a {
font-family: var(--font-poster);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.85rem;
color: var(--ink);
text-decoration: none;
padding: 0.5rem 0.85rem 0.55rem;
border: 2px solid var(--ink);
background: var(--paper-soft);
transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.search-empty__links a:hover {
transform: translate(-2px, -2px);
box-shadow: 3px 3px 0 var(--clay);
color: var(--clay);
}
/* ============================================================
TOWNS HUB — /towns/ landing
============================================================ */
.towns-hub {
background: var(--paper);
padding: 4rem var(--gutter) 5rem;
}
.towns-hub__inner {
max-width: var(--max);
margin: 0 auto;
}
.towns-hub__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.75rem;
}
@media (max-width: 900px) {
.towns-hub__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.towns-hub__grid { grid-template-columns: 1fr; }
}
.town-card {
display: flex;
flex-direction: column;
background: var(--paper-soft);
border: 2px solid var(--ink);
padding: 1.75rem 1.5rem 1.5rem;
text-decoration: none;
color: var(--ink);
box-shadow: 7px 7px 0 var(--ink);
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
position: relative;
}
.town-card:hover {
transform: translate(-3px, -3px);
box-shadow: 10px 10px 0 var(--ink);
}
.town-card--city { box-shadow: 7px 7px 0 var(--clay); }
.town-card--city:hover { box-shadow: 10px 10px 0 var(--clay); }
.town-card--town { box-shadow: 7px 7px 0 var(--teal); }
.town-card--town:hover { box-shadow: 10px 10px 0 var(--teal); }
.town-card--community { box-shadow: 7px 7px 0 var(--mustard); }
.town-card--community:hover { box-shadow: 10px 10px 0 var(--mustard); }
.town-card__head {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-bottom: 0.85rem;
}
.town-card__type {
font-family: var(--font-poster);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 0.7rem;
color: var(--clay);
align-self: flex-start;
padding: 0.15rem 0.45rem 0.2rem;
border: 1px solid var(--clay);
line-height: 1;
}
.town-card--city .town-card__type { color: var(--clay); border-color: var(--clay); }
.town-card--town .town-card__type { color: var(--teal); border-color: var(--teal); }
.town-card--community .town-card__type { color: var(--mustard-deep); border-color: var(--mustard-deep); }
.town-card__name {
font-family: var(--font-poster);
font-weight: 900;
text-transform: uppercase;
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
line-height: 0.95;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0;
}
.town-card__excerpt {
font-family: var(--font-accent);
font-style: italic;
font-size: 1.02rem;
line-height: 1.45;
color: var(--ink-soft);
margin: 0 0 1.25rem;
flex: 1;
}
.town-card__foot {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-top: 0.85rem;
border-top: 1px solid var(--ink);
font-family: var(--font-poster);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.town-card__count {
font-size: 0.78rem;
color: var(--ink-soft);
font-weight: 700;
}
.town-card__arrow {
font-size: 0.85rem;
font-weight: 800;
color: var(--teal);
letter-spacing: 0.14em;
}
.town-card:hover .town-card__arrow { color: var(--clay); }
/* ============================================================
06. FEATURED BUSINESSES — printmaker's frames
============================================================ */
.featured {
background: var(--teal-deep);
color: var(--paper);
padding: 5rem var(--gutter);
position: relative;
overflow: hidden;
}
.featured::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 12% 18%, var(--teal) 0 1px, transparent 1.5px),
radial-gradient(circle at 78% 62%, var(--teal) 0 1px, transparent 1.5px);
background-size: 28px 28px, 36px 36px;
opacity: 0.35;
pointer-events: none;
}
.featured-head {
max-width: var(--max);
margin: 0 auto 2.5rem;
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 1.5rem;
position: relative;
}
.featured-head .eyebrow { color: var(--mustard); }
.featured-head h2 {
font-family: var(--font-poster);
font-weight: 900;
font-size: clamp(2.4rem, 5.5vw, 4.4rem);
text-transform: uppercase;
line-height: 0.92;
color: var(--paper);
margin-top: 0.4rem;
}
.featured-head h2 em {
font-family: var(--font-accent);
font-style: italic;
font-weight: 400;
color: var(--mustard);
text-transform: none;
}
.featured-head .see-all {
font-family: var(--font-poster);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--paper);
border-bottom: 2px solid var(--mustard);
padding-bottom: 3px;
font-size: 0.95rem;
}
.biz-grid {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.6rem;
position: relative;
}
.biz-card {
background: var(--paper);
color: var(--ink);
border: 2px solid var(--ink);
box-shadow: 8px 8px 0 var(--clay);
display: flex;
flex-direction: column;
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
overflow: hidden;
}
.biz-card:hover {
transform: translate(-4px, -4px);
box-shadow: 12px 12px 0 var(--mustard);
}
.biz-img {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border-bottom: 2px solid var(--ink);
background: var(--teal);
}
.biz-img img {
width: 100%;
height: 100%;
object-fit: cover;
filter: sepia(0.5) hue-rotate(-12deg) saturate(1.3) contrast(1.05);
mix-blend-mode: multiply;
opacity: 0.9;
}
.biz-img::after {
/* Halftone dot overlay */
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at center, transparent 1.2px, rgba(31,87,99,0.18) 1.5px);
background-size: 5px 5px;
pointer-events: none;
}
.biz-stamp {
position: absolute;
top: 12px; right: 12px;
background: var(--mustard);
color: var(--ink);
font-family: var(--font-poster);
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.7rem;
padding: 0.35rem 0.7rem;
border: 2px solid var(--ink);
transform: rotate(-6deg);
}
.biz-body {
padding: 1.2rem 1.3rem 1.4rem;
flex: 1;
display: flex;
flex-direction: column;
}
.biz-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-poster);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
font-size: 0.72rem;
color: var(--clay);
}
.biz-meta .town {
color: var(--teal);
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.biz-meta .town::before {
content: '';
width: 6px; height: 6px;
background: var(--clay);
border-radius: 50%;
}
.biz-card h3 {
font-family: var(--font-poster);
font-weight: 900;
font-size: 1.7rem;
text-transform: uppercase;
line-height: 0.95;
margin: 0.5rem 0 0.5rem;
color: var(--ink);
}
.biz-card .blurb {
font-size: 0.93rem;
color: var(--ink-soft);
line-height: 1.55;
flex: 1;
}
.biz-card .footer {
margin-top: 1rem;
padding-top: 0.9rem;
border-top: 1px dashed var(--ink);
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-accent);
font-style: italic;
color: var(--teal);
font-size: 0.9rem;
}
.biz-card .footer .visit {
font-family: var(--font-poster);
font-style: normal;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.78rem;
color: var(--clay);
}
@media (max-width: 950px) {
.biz-grid { grid-template-columns: repeat(2, 1fr); }
.featured-head { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.biz-grid { grid-template-columns: 1fr; }
}
/* ============================================================
07. EVENTS — ticket stubs
============================================================ */
.events {
background: var(--paper-deep);
padding: 5rem var(--gutter);
position: relative;
}
.events-head {
max-width: var(--max);
margin: 0 auto 2.5rem;
text-align: center;
}
.events-head .eyebrow { color: var(--clay); }
.events-head h2 {
font-family: var(--font-poster);
font-weight: 900;
font-size: clamp(2.4rem, 5.5vw, 4.4rem);
text-transform: uppercase;
line-height: 0.92;
color: var(--ink);
margin-top: 0.5rem;
}
.events-head h2 em {
font-family: var(--font-accent);
font-style: italic;
font-weight: 400;
color: var(--clay);
text-transform: none;
}
.events-head p {
font-family: var(--font-accent);
font-style: italic;
color: var(--ink-soft);
margin-top: 0.5rem;
}
.tickets {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.ticket {
background: var(--paper);
border: 2px solid var(--ink);
display: grid;
grid-template-columns: 88px 1fr;
position: relative;
box-shadow: 5px 5px 0 var(--ink);
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
overflow: hidden;
}
.ticket:hover {
transform: translate(-2px, -2px) rotate(-0.6deg);
box-shadow: 8px 8px 0 var(--ink);
}
.ticket .stub {
background: var(--teal);
color: var(--paper);
padding: 1.1rem 0.4rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
border-right: 2px dashed var(--paper);
}
.ticket .stub .mo {
font-family: var(--font-poster);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.85rem;
color: var(--mustard);
}
.ticket .stub .day {
font-family: var(--font-poster);
font-weight: 900;
font-size: 2.6rem;
line-height: 1;
}
.ticket .stub .yr {
font-family: var(--font-accent);
font-style: italic;
font-size: 0.8rem;
color: var(--paper-soft);
margin-top: 0.2rem;
}
/* Perforation circles */
.ticket .stub::before,
.ticket .stub::after {
content: '';
position: absolute;
right: -8px;
width: 14px; height: 14px;
background: var(--paper-deep);
border: 2px solid var(--ink);
border-radius: 50%;
}
.ticket .stub::before { top: -8px; }
.ticket .stub::after { bottom: -8px; }
.ticket .body {
padding: 1rem 1.2rem 1.1rem 1.3rem;
}
.ticket .body .cat {
font-family: var(--font-poster);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.7rem;
color: var(--clay);
}
.ticket .body h3 {
font-family: var(--font-poster);
font-weight: 900;
text-transform: uppercase;
font-size: 1.35rem;
line-height: 0.95;
color: var(--ink);
margin: 0.35rem 0 0.55rem;
}
.ticket .body .where {
font-size: 0.88rem;
color: var(--ink-soft);
}
.ticket .body .where strong {
color: var(--teal);
}
.ticket .body .pill {
display: inline-block;
margin-top: 0.55rem;
font-family: var(--font-poster);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.72rem;
color: var(--ink);
background: var(--mustard);
padding: 0.25rem 0.6rem;
border: 1.5px solid var(--ink);
}
@media (max-width: 900px) {
.tickets { grid-template-columns: 1fr; }
}
/* ============================================================
08. STORIES — editorial strip
============================================================ */
.stories {
background: var(--paper);
padding: 5rem var(--gutter);
position: relative;
}
.stories::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 8px;
background: repeating-linear-gradient(90deg,
var(--forest) 0 18px, var(--paper) 18px 22px,
var(--clay) 22px 40px, var(--paper) 40px 44px,
var(--mustard) 44px 62px, var(--paper) 62px 66px);
}
.stories-head {
max-width: var(--max);
margin: 0 auto 2.5rem;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: end;
gap: 1.5rem;
}
.stories-head .eyebrow { color: var(--forest); }
.stories-head h2 {
font-family: var(--font-poster);
font-weight: 900;
font-size: clamp(2.4rem, 5.5vw, 4rem);
text-transform: uppercase;
line-height: 0.92;
color: var(--ink);
margin-top: 0.4rem;
}
.stories-head h2 em {
font-family: var(--font-accent);
font-style: italic;
font-weight: 400;
color: var(--forest);
text-transform: none;
}
.stories-head .more {
font-family: var(--font-poster);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--ink);
border-bottom: 2px solid var(--clay);
padding-bottom: 3px;
font-size: 0.92rem;
}
.story-grid {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 1.6rem;
}
.story {
display: flex;
flex-direction: column;
padding-top: 1rem;
border-top: 3px solid var(--ink);
transition: transform 0.25s var(--ease);
}
.story:hover { transform: translateY(-3px); }
.story.lead { grid-row: span 1; }
.story .num {
font-family: var(--font-poster);
font-weight: 900;
font-size: 2.4rem;
line-height: 1;
color: var(--clay);
}
.story .ill {
margin-top: 0.8rem;
background: var(--forest);
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--ink);
overflow: hidden;
}
.story.lead .ill { background: var(--teal); aspect-ratio: 16 / 10; }
.story .ill svg { width: 80%; height: 80%; }
.story .cat {
margin-top: 1rem;
font-family: var(--font-poster);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.72rem;
color: var(--teal);
}
.story h3 {
font-family: var(--font-poster);
font-weight: 900;
font-size: clamp(1.3rem, 1.9vw, 1.85rem);
text-transform: uppercase;
line-height: 0.98;
margin-top: 0.45rem;
color: var(--ink);
}
.story.lead h3 {
font-size: clamp(1.8rem, 3vw, 2.6rem);
}
.story .dek {
margin-top: 0.7rem;
font-size: 0.93rem;
color: var(--ink-soft);
line-height: 1.55;
}
.story .byline {
margin-top: 0.8rem;
font-family: var(--font-accent);
font-style: italic;
color: var(--clay);
font-size: 0.85rem;
}
@media (max-width: 950px) {
.story-grid { grid-template-columns: 1fr 1fr; }
.story.lead { grid-column: span 2; }
.stories-head { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.story-grid { grid-template-columns: 1fr; }
.story.lead { grid-column: span 1; }
}
/* ============================================================
09. THE MAP — the centerfold moment
============================================================ */
.mapmoment {
background: var(--forest);
color: var(--paper);
padding: 5rem var(--gutter);
position: relative;
overflow: hidden;
}
.mapmoment::before,
.mapmoment::after {
content: '';
position: absolute;
left: 0; right: 0;
height: 10px;
background: repeating-linear-gradient(90deg,
var(--mustard) 0 16px, var(--forest) 16px 32px);
}
.mapmoment::before { top: 0; }
.mapmoment::after { bottom: 0; }
.map-head {
max-width: var(--max);
margin: 0 auto 2.5rem;
text-align: center;
}
.map-head .eyebrow { color: var(--mustard); }
.map-head h2 {
font-family: var(--font-poster);
font-weight: 900;
font-size: clamp(2.4rem, 5.5vw, 4.6rem);
text-transform: uppercase;
line-height: 0.9;
color: var(--paper);
margin-top: 0.5rem;
}
.map-head h2 em {
font-family: var(--font-accent);
font-style: italic;
font-weight: 400;
color: var(--mustard);
text-transform: none;
}
.map-head p {
font-family: var(--font-accent);
font-style: italic;
color: var(--paper-soft);
margin-top: 0.5rem;
max-width: 56ch;
margin-left: auto;
margin-right: auto;
}
.map-frame {
max-width: 1100px;
margin: 0 auto;
background: var(--paper);
color: var(--ink);
border: 3px solid var(--ink);
padding: 1.5rem 1.5rem 1.2rem;
box-shadow: 12px 12px 0 var(--clay);
position: relative;
}
.map-frame::before {
content: '';
position: absolute;
inset: 8px;
border: 1px dashed var(--ink);
pointer-events: none;
}
.map-titleblock {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 0.4rem 0.8rem 0.8rem;
border-bottom: 2px solid var(--ink);
margin-bottom: 0.8rem;
gap: 1rem;
}
.map-titleblock .small {
font-family: var(--font-poster);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.72rem;
color: var(--teal);
}
.map-titleblock .small.r { text-align: right; color: var(--clay); }
.map-titleblock h3 {
font-family: var(--font-poster);
font-weight: 900;
text-transform: uppercase;
font-size: clamp(1.4rem, 2.6vw, 2.2rem);
letter-spacing: 0.05em;
color: var(--ink);
}
.map-svg-wrap {
position: relative;
background:
radial-gradient(circle at center, var(--paper) 0%, var(--paper-deep) 100%);
border: 1.5px solid var(--ink);
padding: 0;
}
.map-svg-wrap svg {
width: 100%;
height: auto;
display: block;
}
/* Clickable town stamps on the centerfold map. */
.map-svg-wrap .map-pin { cursor: pointer; }
.map-svg-wrap .map-pin circle { transition: fill 0.15s var(--ease), stroke-width 0.15s var(--ease); }
.map-svg-wrap .map-pin:hover circle { fill: var(--clay); stroke-width: 3; }
.map-svg-wrap .map-pin:hover text { fill: var(--clay); }
.map-svg-wrap .map-pin:focus-visible { outline: none; }
.map-svg-wrap .map-pin:focus-visible circle { stroke: var(--clay); stroke-width: 4; }
.map-legend {
margin-top: 0.9rem;
padding: 0.7rem 0.8rem 0.4rem;
border-top: 2px solid var(--ink);
display: grid;
grid-template-columns: repeat(4, auto);
justify-content: center;
gap: 1.2rem;
}
.map-legend .lg {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-poster);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.7rem;
color: var(--ink);
}
.map-legend .lg .sw {
width: 14px; height: 14px;
border: 1.5px solid var(--ink);
}
@media (max-width: 700px) {
.map-titleblock { grid-template-columns: 1fr; text-align: center; }
.map-titleblock .small.r { text-align: center; }
.map-legend { grid-template-columns: repeat(2, auto); }
}
/* ============================================================
10. JOIN / SUBSCRIPTION CARDS
============================================================ */
.join {
background: var(--clay);
color: var(--paper);
padding: 5rem var(--gutter);
position: relative;
overflow: hidden;
}
.join::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 80% 20%, rgba(244,234,212,0.08) 0 50%, transparent 70%),
radial-gradient(circle at 20% 80%, rgba(26,23,20,0.18) 0 50%, transparent 70%);
pointer-events: none;
}
.join-grid {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 2rem;
position: relative;
}
.join-card {
background: var(--paper);
color: var(--ink);
border: 2px solid var(--ink);
padding: 2rem 1.8rem 1.8rem;
position: relative;
box-shadow: 8px 8px 0 var(--ink);
}
.join-card.dark {
background: var(--ink);
color: var(--paper);
box-shadow: 8px 8px 0 var(--mustard);
}
.join-card .eyebrow { color: var(--clay); }
.join-card.dark .eyebrow { color: var(--mustard); }
.join-card h3 {
font-family: var(--font-poster);
font-weight: 900;
text-transform: uppercase;
font-size: clamp(1.7rem, 3vw, 2.4rem);
line-height: 0.95;
margin-top: 0.6rem;
color: inherit;
}
.join-card h3 em {
font-family: var(--font-accent);
font-style: italic;
font-weight: 400;
color: var(--clay);
text-transform: none;
}
.join-card.dark h3 em { color: var(--mustard); }
.join-card p {
margin-top: 0.7rem;
font-size: 0.95rem;
line-height: 1.55;
color: var(--ink-soft);
}
.join-card.dark p { color: var(--paper-soft); }
.join-form {
margin-top: 1.3rem;
display: flex;
gap: 0.6rem;
}
.join-form input {
flex: 1;
font: inherit;
font-family: var(--font-body);
font-size: 0.95rem;
padding: 0.8rem 0.9rem;
background: var(--paper-soft);
border: 2px solid var(--ink);
color: var(--ink);
outline: none;
}
.join-form input:focus {
background: var(--mustard);
}
.join-form button {
background: var(--clay);
color: var(--paper);
font-family: var(--font-poster);
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.15em;
font-size: 0.85rem;
padding: 0 1.2rem;
border: 2px solid var(--ink);
cursor: pointer;
}
.join-form button:hover { background: var(--ink); }
.subscription-card {
margin-top: 1.3rem;
padding: 0.7rem 1rem;
border: 1.5px dashed currentColor;
font-family: var(--font-accent);
font-style: italic;
font-size: 0.85rem;
color: var(--ink-soft);
}
.join-card.dark .subscription-card { color: var(--paper-soft); }
.merchant-points {
margin-top: 1.2rem;
display: grid;
gap: 0.6rem;
}
.merchant-points li {
display: flex;
align-items: flex-start;
gap: 0.7rem;
font-size: 0.92rem;
color: var(--paper-soft);
list-style: none;
}
.merchant-points .mk {
font-family: var(--font-poster);
font-weight: 900;
color: var(--mustard);
width: 22px;
flex: none;
}
.join-cta {
margin-top: 1.4rem;
display: inline-flex;
align-items: center;
gap: 0.6rem;
background: var(--mustard);
color: var(--ink);
font-family: var(--font-poster);
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.15em;
font-size: 0.9rem;
padding: 0.85rem 1.3rem;
border: 2px solid var(--paper);
box-shadow: 4px 4px 0 var(--paper);
transition: transform 0.18s var(--ease);
}
.join-cta:hover { transform: translate(-2px, -2px); }
@media (max-width: 900px) {
.join-grid { grid-template-columns: 1fr; }
}
/* ============================================================
11. FOOTER + LAND ACKNOWLEDGMENT
============================================================ */
.land {
background: var(--ink);
color: var(--paper);
padding: 3.5rem var(--gutter);
border-top: 6px solid var(--mustard);
position: relative;
}
.land::before {
content: '';
position: absolute;
top: -6px; left: 0; right: 0;
height: 6px;
background: repeating-linear-gradient(90deg,
var(--mustard) 0 18px, var(--clay) 18px 36px,
var(--forest) 36px 54px, var(--teal) 54px 72px);
}
.land-inner {
max-width: 880px;
margin: 0 auto;
text-align: center;
}
.land .eyebrow {
color: var(--mustard);
letter-spacing: 0.3em;
}
.land h3 {
font-family: var(--font-poster);
font-weight: 800;
text-transform: uppercase;
font-size: clamp(1.6rem, 3.2vw, 2.4rem);
line-height: 1;
margin-top: 0.8rem;
}
.land h3 em {
font-family: var(--font-accent);
font-style: italic;
font-weight: 400;
color: var(--mustard);
text-transform: none;
}
.land p {
margin-top: 1rem;
font-size: 1rem;
line-height: 1.6;
color: var(--paper-soft);
}
.land .tribal {
margin-top: 1.2rem;
font-family: var(--font-accent);
font-style: italic;
color: var(--mustard);
font-size: 1.1rem;
}
/* ============================================================
12. UTILITY
============================================================ */
.section-rule {
text-align: center;
padding: 1.5rem;
}
.section-rule svg { display: inline-block; }
/* ============================================================
HOME PAGE — hybrid hero overrides
Home now uses the same photo+typography pattern as town pages.
Overrides the 2-column .hero-body grid + drops .hero-art rules.
============================================================ */
body.home .hero {
isolation: isolate;
}
body.home .hero-frame {
position: relative;
z-index: 2;
padding: 4rem var(--gutter) 3rem;
min-height: min(92vh, 820px);
display: grid;
grid-template-rows: auto 1fr auto;
}
body.home .hero-frame::before,
body.home .hero-frame::after { display: none; }
body.home .hero-body {
display: grid;
grid-template-columns: 1fr;
align-self: center;
padding: 2rem 1rem;
max-width: 940px;
position: relative; z-index: 5;
}
body.home .hero-copy { max-width: 100%; }
body.home .hero-art { display: none; }
/* ============================================================
DIRECTORY PAGE CSS — extracted from
app/public/mockups/directory-postershop.html (lines 124–488).
============================================================ */
/* ============================================================
DIRECTORY HEADER
============================================================ */
.dir-header {
background: var(--mustard);
border-bottom: 3px solid var(--ink);
padding: 4rem var(--gutter);
position: relative;
}
.dir-header::before {
content: '';
position: absolute; top: -3px; left: 0; right: 0; height: 14px;
background: repeating-linear-gradient(90deg, var(--ink) 0 14px, transparent 14px 28px);
}
.dir-header__inner {
max-width: var(--max); margin: 0 auto;
display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem;
align-items: center;
}
@media (max-width: 880px) { .dir-header__inner { grid-template-columns: 1fr; gap: 2rem; } }
.dir-header__main { }
.dir-header__eyebrow {
font-family: var(--font-poster); font-weight: 800;
letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.84rem;
color: var(--clay); margin-bottom: 1rem; display: block;
}
.dir-header__title {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(2.5rem, 6vw, 4.8rem);
line-height: 0.88; letter-spacing: -0.02em;
color: var(--ink); margin-bottom: 1rem;
}
.dir-header__title em {
font-family: var(--font-accent); font-style: italic; font-weight: 400;
color: var(--teal); text-transform: none;
}
.dir-header__lede {
font-size: 1.05rem; line-height: 1.6;
color: var(--ink-soft); max-width: 52ch;
}
.dir-header__stats { display: grid; gap: 0.9rem; }
.dir-header__stat {
background: var(--paper); color: var(--ink);
border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
padding: 1rem 1.25rem;
display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center;
}
.dir-header__stat .num {
font-family: var(--font-poster); font-weight: 900;
font-size: 2.6rem; line-height: 1;
color: var(--clay);
}
.dir-header__stat .label {
display: grid; gap: 0.3rem;
}
.dir-header__stat .label .lbl {
font-family: var(--font-poster); font-weight: 800;
text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem;
color: var(--ink);
}
.dir-header__stat .label .sub {
font-family: var(--font-accent); font-style: italic;
font-size: 0.84rem; color: var(--ink-soft);
}
/* ============================================================
FILTER BAR — sticky horizontal
============================================================ */
.filterbar {
background: var(--paper); border-bottom: 3px solid var(--ink);
position: sticky; top: 0; z-index: 40;
}
.filterbar::after {
content: ''; position: absolute; bottom: -8px; left: 0; right: 0;
height: 4px;
background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 12px);
}
.filterbar__inner {
max-width: var(--max); margin: 0 auto;
padding: 1rem var(--gutter);
display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
}
.filterbar__filters {
display: flex; gap: 0.5rem;
overflow-x: auto; scrollbar-width: none;
}
.filterbar__filters::-webkit-scrollbar { display: none; }
.chip {
font-family: var(--font-poster); font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.74rem;
color: var(--ink);
padding: 0.55rem 0.9rem;
border: 2px solid var(--ink);
background: var(--paper);
white-space: nowrap;
display: inline-flex; align-items: center; gap: 0.5rem;
cursor: pointer;
transition: all 0.18s var(--ease);
}
.chip:hover { background: var(--paper-soft); transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--ink); }
.chip.is-active {
background: var(--clay); color: var(--paper);
box-shadow: 3px 3px 0 var(--ink);
}
.chip .pip {
width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft);
}
.chip.is-active .pip { background: var(--paper-soft); }
.chip .pip.eat { background: var(--clay); }
.chip .pip.stay { background: var(--teal); }
.chip .pip.do { background: var(--forest); }
.chip .pip.shop { background: var(--mustard-deep); }
.chip .pip.svc { background: var(--ink-soft); }
.chip.is-active .pip.eat,
.chip.is-active .pip.stay,
.chip.is-active .pip.do,
.chip.is-active .pip.shop,
.chip.is-active .pip.svc { background: var(--paper); }
.chip .count {
color: var(--ink-soft); font-size: 0.7rem; margin-left: 0.2rem;
}
.chip.is-active .count { color: var(--paper-soft); }
.chip-sep { width: 2px; height: 20px; background: var(--ink); align-self: center; margin: 0 0.3rem; }
.filterbar__actions { display: flex; gap: 0.7rem; align-items: center; }
.action {
font-family: var(--font-poster); font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.72rem;
color: var(--ink);
padding: 0.5rem 0.85rem;
border: 2px solid var(--ink); background: var(--paper-soft);
white-space: nowrap;
}
.action:hover { background: var(--paper); transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--ink); }
.viewtoggle { display: flex; border: 2px solid var(--ink); background: var(--paper); }
.viewtoggle button {
font-family: var(--font-poster); font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.72rem;
padding: 0.5rem 0.85rem;
color: var(--ink);
border-right: 2px solid var(--ink);
}
.viewtoggle button:last-child { border-right: none; }
.viewtoggle button.is-active { background: var(--teal); color: var(--paper); }
@media (max-width: 880px) {
.filterbar__inner { grid-template-columns: 1fr; gap: 0.75rem; }
.filterbar__actions { justify-content: space-between; }
}
/* ============================================================
EDITOR'S PICKS — asymmetric featured
============================================================ */
.picks {
background: var(--paper-soft); padding: 4rem var(--gutter) 2rem;
border-bottom: 3px solid var(--ink);
}
.picks__head {
max-width: var(--max); margin: 0 auto 2rem;
display: flex; justify-content: space-between; align-items: baseline;
border-bottom: 2px solid var(--ink); padding-bottom: 1rem;
}
.picks__title {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 0.9;
color: var(--ink);
}
.picks__title em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--clay); text-transform: none; }
.picks__sub {
font-family: var(--font-accent); font-style: italic;
font-size: 0.98rem; color: var(--ink-soft);
}
.picks__grid {
max-width: var(--max); margin: 0 auto;
display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem;
}
@media (max-width: 880px) { .picks__grid { grid-template-columns: 1fr; } }
.pick-hero {
position: relative; display: block;
height: 460px; overflow: hidden;
background: var(--paper); border: 2px solid var(--ink);
box-shadow: 8px 8px 0 var(--clay);
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.pick-hero:hover {
transform: translate(-3px, -3px);
box-shadow: 11px 11px 0 var(--clay);
}
.pick-hero__img { position: absolute; inset: 0; z-index: 0; }
.pick-hero__img img {
width: 100%; height: 100%; object-fit: cover;
filter: contrast(1.05) saturate(0.95);
}
.pick-hero__grad {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(20,59,69,0.0) 35%, rgba(20,59,69,0.92) 100%);
}
.pick-hero__content {
position: absolute; inset: 0; z-index: 2;
padding: 1.6rem; color: var(--paper);
display: flex; flex-direction: column; justify-content: space-between;
}
.tag {
display: inline-flex; align-items: center; gap: 0.4rem;
font-family: var(--font-poster); font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.72rem;
padding: 0.4rem 0.7rem;
background: var(--paper); color: var(--ink);
border: 2px solid var(--ink);
}
.tag.cskt { background: var(--teal); color: var(--paper); }
.tag.pick { background: var(--mustard); color: var(--ink); }
.tag.owner { background: transparent; }
.tag.stay { background: var(--paper); }
.tag.eat { background: var(--clay); color: var(--paper); }
.tag.do { background: var(--forest); color: var(--paper); }
.tag.shop { background: var(--mustard); }
.tag.svc { background: var(--paper-deep); }
.tag.small { font-size: 0.62rem; padding: 0.25rem 0.5rem; border-width: 1.5px; }
.tag.subcat { background: var(--paper-deep); color: var(--teal-deep); border-color: var(--teal-deep); }
.pick-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pick-hero__name {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(2rem, 3vw, 2.6rem); line-height: 0.95;
color: var(--paper); margin-bottom: 0.4rem;
}
.pick-hero__name em {
font-family: var(--font-accent); font-style: italic; font-weight: 400;
color: var(--mustard); text-transform: none;
}
.pick-hero__loc {
font-family: var(--font-accent); font-style: italic;
font-size: 0.98rem; color: var(--paper-soft);
}
.pick-stack { display: grid; gap: 1.25rem; grid-template-rows: 1fr 1fr; }
.pick-mini {
position: relative; display: block;
overflow: hidden;
background: var(--paper); border: 2px solid var(--ink);
box-shadow: 5px 5px 0 var(--clay);
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.pick-mini:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--clay); }
.pick-mini__img { position: absolute; inset: 0; z-index: 0; }
.pick-mini__img img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05); }
.pick-mini__grad {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(20,59,69,0.05) 30%, rgba(20,59,69,0.9) 100%);
}
.pick-mini__content {
position: absolute; inset: 0; z-index: 2; padding: 1.1rem;
color: var(--paper);
display: flex; flex-direction: column; justify-content: space-between;
}
.pick-mini__name {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: 1.4rem; line-height: 1; color: var(--paper);
}
.pick-mini__loc {
font-family: var(--font-accent); font-style: italic;
font-size: 0.84rem; color: var(--paper-soft);
}
/* ============================================================
TOWN BLOCKS
============================================================ */
.results {
padding: clamp(3rem, 5vh, 4rem) var(--gutter) 4rem;
max-width: var(--max); margin: 0 auto;
}
.townblock {
margin-bottom: clamp(3rem, 6vh, 5rem);
}
.townblock__head {
display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem;
align-items: end;
padding-bottom: 1.2rem; margin-bottom: 1.8rem;
border-bottom: 2px solid var(--ink);
}
.townblock__num {
font-family: var(--font-poster); font-weight: 900;
font-size: 3rem; line-height: 0.85;
color: var(--clay);
text-shadow: 3px 3px 0 var(--ink);
}
.townblock__name {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1;
color: var(--ink);
}
.townblock__name em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--teal); text-transform: none; }
.townblock__meta {
text-align: right;
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem;
color: var(--ink-soft);
}
.townblock__meta .count {
display: block; font-size: 1.3rem; color: var(--clay);
font-weight: 900; margin-bottom: 0.2rem;
}
.townblock__grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
gap: 1.4rem;
}
.listing-card {
position: relative; display: block;
background: var(--paper-soft);
border: 2px solid var(--ink);
box-shadow: 6px 6px 0 var(--ink);
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
overflow: hidden;
}
.listing-card:hover {
transform: translate(-3px, -3px) rotate(-0.5deg);
box-shadow: 9px 9px 0 var(--ink);
}
.listing-card__media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border-bottom: 2px solid var(--ink);
}
.listing-card__media img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04) saturate(0.95); }
.listing-card__body { padding: 1rem 1.1rem 1.2rem; }
.listing-card__tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.listing-card__name {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: 1.3rem; line-height: 1;
color: var(--ink); margin-bottom: 0.5rem;
}
.listing-card__name em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--teal); text-transform: none; }
.listing-card__meta {
font-family: var(--font-accent); font-style: italic;
font-size: 0.88rem; color: var(--ink-soft);
}
.townblock__seeall {
display: inline-flex; align-items: center; gap: 0.6rem;
margin-top: 1.5rem;
font-family: var(--font-poster); font-weight: 800;
letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.78rem;
color: var(--clay);
border-bottom: 2px solid var(--clay); padding-bottom: 3px;
}
.townblock__seeall:hover { color: var(--ink); border-bottom-color: var(--ink); }
/* ============================================================
PAGINATION
============================================================ */
.pagination {
padding: 2rem var(--gutter) 5rem;
max-width: var(--max); margin: 0 auto;
display: flex; justify-content: center; gap: 1.5rem; align-items: center;
flex-wrap: wrap;
}
.pagination__count {
font-family: var(--font-accent); font-style: italic;
color: var(--ink-soft);
}
/* ============================================================
SINGLE BUSINESS CSS — extracted from
app/public/mockups/single-business-postershop.html.
Skipped lines 162–208 (.hero / .hero__bg / .hero__overlay /
.hero-frame) since the town-polson extraction already covers
those selectors with values that work for both contexts.
Single-business introduces .crumb, .hero-name, .hero-tagline,
.hero-loc, .hero-lede, .gallery (polaroid), .body grid, .features chips,
.headsup callout, .info sidebar, .locmap, .related grid.
============================================================ */
/* ============================================================
CRUMB
============================================================ */
.crumb {
background: var(--paper-deep);
border-bottom: 2px solid var(--ink);
padding: 0.75rem var(--gutter);
}
.crumb__inner {
max-width: var(--max); margin: 0 auto;
display: flex; align-items: center; gap: 0.7rem;
font-family: var(--font-poster); font-weight: 700;
font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ink-soft);
flex-wrap: wrap;
}
.crumb__inner .sep { color: var(--clay); }
.crumb__inner .current { color: var(--ink); }
.crumb__inner a:hover { color: var(--clay); }
.hero-top {
display: flex; justify-content: space-between; align-items: center;
padding: 0.5rem 1rem;
font-family: var(--font-poster); text-transform: uppercase;
letter-spacing: 0.22em; font-size: 0.74rem;
color: var(--mustard);
}
.hero-top .mid { color: var(--paper); letter-spacing: 0.3em; font-weight: 800; }
.hero-body {
align-self: end;
padding: 1.5rem 1rem 0.5rem;
max-width: 800px;
}
.hero-tags {
display: flex; gap: 0.5rem; flex-wrap: wrap;
margin-bottom: 1.5rem;
}
.tag {
display: inline-flex; align-items: center; gap: 0.4rem;
font-family: var(--font-poster); font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.72rem;
padding: 0.4rem 0.7rem;
background: var(--paper); color: var(--ink);
border: 2px solid var(--ink);
}
.tag.cskt { background: var(--teal); color: var(--paper); }
.tag.pick { background: var(--mustard); color: var(--ink); }
.tag.stay { background: var(--paper); }
.tag.eat { background: var(--clay); color: var(--paper); }
.tag.do { background: var(--forest); color: var(--paper); }
.tag.shop { background: var(--mustard); }
.tag.svc { background: var(--paper-deep); }
.hero-name {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(2.8rem, 7vw, 6rem);
line-height: 0.88; letter-spacing: -0.02em;
color: var(--mustard);
margin-bottom: 1rem;
}
.hero-name em {
font-family: var(--font-accent); font-style: italic; font-weight: 400;
color: var(--paper); text-transform: none;
}
.hero-tagline {
font-family: var(--font-body); font-weight: 500;
font-size: clamp(1.1rem, 1.9vw, 1.45rem);
line-height: 1.35;
color: var(--paper);
max-width: 55ch;
margin: 0 0 1rem;
letter-spacing: 0.005em;
}
.hero-loc {
display: inline-block;
font-family: var(--font-accent); font-style: italic;
font-size: clamp(1.05rem, 1.8vw, 1.4rem);
color: var(--paper-soft);
padding: 0.4rem 0.9rem 0.45rem;
background: var(--clay);
letter-spacing: 0.01em;
margin-bottom: 1.5rem;
}
.hero-lede {
font-size: 1.05rem; line-height: 1.55;
color: var(--paper-soft); max-width: 50ch;
}
/* ============================================================
GALLERY STRIP — polaroid postcards
============================================================ */
.gallery {
background: var(--paper);
padding: 4rem var(--gutter) 1rem;
border-bottom: 3px solid var(--ink);
}
.gallery__head {
max-width: var(--max); margin: 0 auto 2rem;
display: flex; justify-content: space-between; align-items: baseline;
border-bottom: 2px solid var(--ink);
padding-bottom: 0.8rem;
}
.gallery__title {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase; font-size: 1.6rem; letter-spacing: 0.02em;
color: var(--ink);
}
.gallery__count {
font-family: var(--font-accent); font-style: italic;
font-size: 0.95rem; color: var(--clay);
}
.gallery__grid {
max-width: var(--max); margin: 0 auto;
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1.2rem;
padding-bottom: 3rem;
}
.polaroid {
position: relative;
background: var(--paper-soft);
border: 2px solid var(--ink);
padding: 8px 8px 32px;
box-shadow: 5px 5px 0 var(--mustard);
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.polaroid:nth-child(odd) { transform: rotate(-1deg); }
.polaroid:nth-child(even) { transform: rotate(1deg); }
.polaroid:hover {
transform: rotate(0deg) translate(-2px, -2px);
box-shadow: 8px 8px 0 var(--mustard);
z-index: 2;
}
.polaroid img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.polaroid__cap {
position: absolute;
bottom: 8px; left: 0; right: 0;
text-align: center;
font-family: var(--font-accent); font-style: italic;
font-size: 0.8rem; color: var(--ink-soft);
}
/* ============================================================
BODY — prose + sidebar info card
============================================================ */
.body {
background: var(--paper-soft);
padding: 4rem var(--gutter) 4rem;
border-bottom: 3px solid var(--ink);
}
.body__grid {
max-width: var(--max); margin: 0 auto;
display: grid; grid-template-columns: 1fr 360px; gap: 3rem;
align-items: start;
}
@media (max-width: 1024px) { .body__grid { grid-template-columns: 1fr; gap: 2rem; } }
.body__section { margin-bottom: 3rem; }
.body__section:last-child { margin-bottom: 0; }
.body__section h2 {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(1.7rem, 3vw, 2.4rem);
line-height: 0.9; color: var(--ink);
margin-bottom: 1.5rem;
padding-bottom: 0.6rem;
border-bottom: 2px solid var(--ink);
}
.body__section h2 em {
font-family: var(--font-accent); font-style: italic; font-weight: 400;
color: var(--teal); text-transform: none;
}
.body__section .eyebrow {
display: block;
font-family: var(--font-poster); font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase;
font-size: 0.72rem;
color: var(--clay); margin-bottom: 0.6rem;
}
.body__prose p {
font-size: 1rem; line-height: 1.7;
color: var(--ink); margin-bottom: 1.2rem; max-width: 62ch;
}
.body__prose em {
font-family: var(--font-accent); font-style: italic;
color: var(--ink-soft);
}
.body__prose a {
color: var(--clay); border-bottom: 2px solid var(--clay);
padding-bottom: 1px;
}
/* Features chips */
.features {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0.6rem;
}
/* "What they offer" — the services list. Ledger rows rather than chips:
services read as a menu of hireable work, not badges. */
.services-list {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 0.35rem 1.5rem;
}
.services-list__item {
padding: 0.45rem 0 0.45rem 1.3rem;
position: relative;
border-bottom: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent);
font-size: 0.92rem;
color: var(--ink);
}
.services-list__item::before {
content: '›';
position: absolute; left: 0.15rem;
color: var(--clay); font-weight: 700;
}
.feature {
display: flex; align-items: center; gap: 0.55rem;
padding: 0.7rem 0.9rem;
background: var(--paper);
border: 2px solid var(--ink);
font-family: var(--font-poster); font-weight: 700;
font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--ink);
box-shadow: 3px 3px 0 var(--teal);
}
.feature .star { color: var(--clay); }
/* Amenity checklist facts — ledger rows under the chips (portal quick facts).
Blank questions never reach the markup; emv_checklist_render() drops them. */
.amenity-facts {
margin: 1.1rem 0 0; padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 0.35rem 1.5rem;
}
.features + .amenity-facts {
border-top: 2px solid var(--ink);
padding-top: 0.9rem;
}
.amenity-fact {
display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem;
padding: 0.45rem 0;
border-bottom: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent);
}
.amenity-fact__label {
font-family: var(--font-poster); font-weight: 700;
font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--ink);
}
.amenity-fact__value {
margin: 0;
font-size: 0.92rem; color: var(--ink);
text-align: right;
}
.amenity-facts__mark {
margin: 0.7rem 0 0;
font-family: var(--font-accent); font-style: italic;
font-size: 0.9rem; color: var(--teal);
}
/* Heads-up callout — warning poster style */
.headsup {
position: relative;
padding: 1.6rem 1.8rem;
background: var(--mustard);
border: 2px solid var(--ink);
box-shadow: 5px 5px 0 var(--ink);
}
.headsup::before {
content: '⚐';
position: absolute;
top: -16px; left: 1.5rem;
width: 36px; height: 36px;
background: var(--clay);
border: 2px solid var(--ink);
color: var(--paper);
display: grid; place-items: center;
font-family: var(--font-poster); font-size: 1.2rem;
line-height: 1;
}
.headsup__label {
font-family: var(--font-poster); font-weight: 800;
letter-spacing: 0.18em; text-transform: uppercase;
font-size: 0.78rem;
color: var(--clay-deep);
margin-bottom: 0.5rem;
}
.headsup__text {
font-family: var(--font-accent); font-style: italic;
font-size: 1.05rem; line-height: 1.45;
color: var(--ink);
}
/* Sidebar — listing info ticket */
.info {
background: var(--paper);
border: 2px solid var(--ink);
box-shadow: 6px 6px 0 var(--clay);
}
.info__head {
padding: 1.25rem 1.5rem;
background: var(--ink); color: var(--paper);
display: flex; justify-content: space-between; align-items: center;
}
.info__title {
font-family: var(--font-poster); font-weight: 800;
letter-spacing: 0.18em; text-transform: uppercase;
font-size: 0.8rem;
color: var(--mustard);
}
.info__verified {
display: flex; align-items: center; gap: 0.4rem;
font-family: var(--font-poster); font-weight: 700;
font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--paper);
}
.info__verified .dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--mustard);
}
.info__row {
display: grid; grid-template-columns: 90px 1fr; gap: 0.8rem;
padding: 0.95rem 1.5rem;
border-bottom: 1px dashed var(--ink);
align-items: baseline;
}
.info__row:last-child { border-bottom: none; }
.info__row .k {
font-family: var(--font-poster); font-weight: 700;
font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--clay);
}
.info__row .v {
font-size: 0.94rem;
color: var(--ink);
line-height: 1.45;
/* Allow long URLs and email addresses to wrap inside the value cell
so they don't overflow the sidebar card boundary. */
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
.info__row .v a {
color: var(--teal); border-bottom: 2px solid var(--teal);
padding-bottom: 1px;
}
.info__hours { display: grid; gap: 0.25rem; }
.info__hours .row {
display: grid; grid-template-columns: 38px 1fr;
font-family: var(--font-body); font-size: 0.9rem;
color: var(--ink);
}
.info__hours .row .day {
font-family: var(--font-poster); font-weight: 700;
font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--ink-soft);
/* reset the generic .day card style (border/shadow) bleeding in here */
background: none; border: 0; box-shadow: none; overflow: visible;
padding: 0; transition: none; align-self: center;
}
.info__hours .row .day:hover { transform: none; box-shadow: none; }
.info__hours .row.is-today .day { color: var(--clay); }
.info__hours .row.is-today { color: var(--clay); font-weight: 600; }
.info__socials { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.info__social {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 50%;
border: 1.5px solid var(--ink); color: var(--ink);
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.info__social svg { width: 18px; height: 18px; display: block; }
.info__social:hover, .info__social:focus-visible { background: var(--clay); color: var(--paper); border-color: var(--clay); }
/* Empty (collapsed, invisible) until JS confirms reviews exist, then the box
styling appears. NOT display:none — the lazy-loader watches the mount inside,
and a display:none element never intersects, so it would never load. */
.greviews-section.is-active { background: var(--paper); padding: 3rem var(--gutter); border-bottom: 3px solid var(--ink); }
.greviews { max-width: var(--max); margin: 0 auto; }
.greviews__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1.5rem; }
.greviews__title { font-family: var(--font-poster); font-weight: 900; text-transform: uppercase; font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--ink); }
.greviews__src { font-family: var(--font-body); font-size: 0.95rem; color: var(--teal); }
.greviews__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 640px) { .greviews__grid { grid-template-columns: 1fr; } }
.greview { background: var(--paper-soft); border: 2px solid var(--ink); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.greview__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.greview__stars { color: var(--mustard); letter-spacing: 1px; }
.greview__when { font-family: var(--font-body); font-size: 0.8rem; color: var(--ink); opacity: 0.7; }
.greview__text { font-family: var(--font-body); font-size: 0.92rem; line-height: 1.5; color: var(--ink); margin: 0; }
.greview__who { font-family: var(--font-poster); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: var(--ink); opacity: 0.75; }
.greviews__note { font-family: var(--font-accent); font-style: italic; font-size: 0.8rem; color: var(--ink); opacity: 0.7; margin-top: 1.25rem; }
.listing-card__media--logo { background: var(--paper-soft); display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.listing-card__media--logo img.listing-card__logo-img { max-width: 82%; max-height: 78%; width: auto; height: auto; object-fit: contain; filter: none; }
.info__logo { padding: 1rem 0; border-bottom: 1px dashed var(--ink); text-align: center; }
.info__logo img { max-width: 170px; max-height: 72px; width: auto; height: auto; object-fit: contain; display: inline-block; }
.emv-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(26,23,20,0.92); padding: 2rem; }
.emv-lightbox.is-open { display: flex; }
.emv-lightbox__img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; object-fit: contain; border: 3px solid var(--paper); box-shadow: 0 12px 44px rgba(0,0,0,0.5); }
.emv-lightbox__close { position: absolute; top: 0.75rem; right: 1.25rem; background: none; border: none; color: var(--paper); font-size: 2.6rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.6rem; }
.emv-lightbox__close:hover, .emv-lightbox__close:focus-visible { color: var(--mustard); }
body.emv-lightbox-open { overflow: hidden; }
.emv-lightbox__credit { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; color: var(--paper); font-family: var(--font-body); font-size: 0.85rem; opacity: 0.85; }
.biz-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.biz-event a { display: flex; align-items: center; gap: 1rem; border: 2px solid var(--ink); background: var(--paper-soft); padding: 0.75rem 1rem; text-decoration: none; color: var(--ink); }
.biz-event a:hover { background: var(--paper); box-shadow: 4px 4px 0 var(--mustard); }
.biz-event__date { font-family: var(--font-poster); font-weight: 900; text-transform: uppercase; color: var(--clay); font-size: 1.15rem; line-height: 1; min-width: 3.4rem; text-align: center; }
.biz-event__body { display: flex; flex-direction: column; gap: 0.15rem; }
.biz-event__title { font-family: var(--font-poster); font-weight: 700; letter-spacing: 0.5px; }
.biz-event__time { font-family: var(--font-body); font-size: 0.82rem; color: var(--ink); opacity: 0.7; }
button.info__share { width: 100%; cursor: pointer; font: inherit; }
.info__action {
padding: 1.25rem 1.5rem;
background: var(--paper-soft);
border-top: 2px solid var(--ink);
display: grid; gap: 0.6rem;
}
.info__btn {
display: block; width: 100%;
font-family: var(--font-poster); font-weight: 800;
letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.82rem;
padding: 0.95rem;
background: var(--clay); color: var(--paper);
border: 2px solid var(--ink);
box-shadow: 4px 4px 0 var(--ink);
text-align: center;
transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.info__btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.info__btn.alt {
background: var(--paper); color: var(--ink);
box-shadow: 4px 4px 0 var(--clay);
}
.info__btn.alt:hover { box-shadow: 6px 6px 0 var(--clay); }
/* ============================================================
MAP — illustrated location card
============================================================ */
.locmap {
background: var(--teal);
padding: 4rem var(--gutter);
border-bottom: 3px solid var(--ink);
}
.locmap__inner {
max-width: var(--max); margin: 0 auto;
display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem;
align-items: center;
}
@media (max-width: 900px) { .locmap__inner { grid-template-columns: 1fr; gap: 2rem; } }
.locmap__copy { color: var(--paper); }
.locmap__copy .eyebrow { color: var(--mustard); display: block; margin-bottom: 0.7rem; }
.locmap__copy h3 {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(1.7rem, 3.5vw, 2.6rem);
line-height: 0.9; color: var(--paper); margin-bottom: 1rem;
}
.locmap__copy h3 em {
font-family: var(--font-accent); font-style: italic; font-weight: 400;
color: var(--mustard); text-transform: none;
}
.locmap__copy .addr {
font-family: var(--font-body); font-size: 0.98rem;
color: var(--paper-soft); line-height: 1.5;
margin-bottom: 1.5rem;
}
.locmap__visual {
position: relative;
aspect-ratio: 16 / 10;
background: var(--paper-soft);
border: 3px solid var(--ink);
box-shadow: 8px 8px 0 var(--mustard);
padding: 1.5rem;
overflow: hidden;
}
.locmap__visual svg { width: 100%; height: 100%; }
/* Live mini-map variant — real MapLibre canvas inside the same poster plate
(initialized by js/minimap.js; falls back to the static SVG without JS
in the sense that the canvas just stays paper-colored). */
.locmap__visual--live { padding: 0; }
/* Doubled selector: maplibre-gl.css loads after this sheet and its
.maplibregl-map { position: relative } would un-position the canvas. */
.locmap__visual--live .locmap__canvas {
position: absolute; inset: 1.5rem;
background: var(--paper);
}
.locmap__canvas .maplibregl-canvas { outline: none; }
.locmap__canvas .maplibregl-ctrl-attrib {
background: rgba(248, 241, 222, 0.8);
font-family: var(--font-body); font-size: 0.62rem;
}
.locmap__canvas .maplibregl-ctrl-attrib a { color: var(--ink-soft); }
/* Both out-specific ".locmap__visual svg { width/height: 100% }" above,
which would otherwise stretch the compass + pin art to the full plate. */
.locmap__visual--live .emv-minimap__pin svg { width: 34px; height: 68px; }
.emv-minimap__pin { pointer-events: none; }
.locmap__visual--live .locmap__compass {
position: absolute; top: 2.1rem; right: 2.1rem;
width: 44px; height: 58px; z-index: 3;
pointer-events: none;
}
.locmap__band {
position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; z-index: 3;
background: var(--ink);
border-top: 8px solid var(--paper-deep);
color: var(--mustard);
font-family: var(--font-poster); font-weight: 900;
font-size: 1.05rem; letter-spacing: 0.3em;
text-align: center; text-transform: uppercase;
padding: 0.6rem 0.5rem 0.55rem;
}
/* Whole plate clicks through to the regional map. */
.locmap__cover { position: absolute; inset: 0; z-index: 4; }
.locmap__cover:focus-visible { outline: 3px solid var(--mustard); outline-offset: -3px; }
@media (max-width: 640px) {
.locmap__canvas { inset: 1rem; }
.locmap__band { left: 1rem; right: 1rem; bottom: 1rem; font-size: 0.9rem; }
.locmap__compass { top: 1.5rem; right: 1.5rem; width: 36px; }
}
/* ============================================================
RELATED — same listing-card pattern as town landing
============================================================ */
.related {
background: var(--paper);
padding: 4.5rem var(--gutter) 4rem;
border-bottom: 3px solid var(--ink);
}
.related__head {
max-width: var(--max); margin: 0 auto 2.5rem;
text-align: center;
}
.related__head .eyebrow { color: var(--clay); }
.related__head h3 {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(1.7rem, 3.5vw, 2.6rem);
line-height: 0.9; margin-top: 0.5rem; color: var(--ink);
}
.related__head h3 em {
font-family: var(--font-accent); font-style: italic; font-weight: 400;
color: var(--teal); text-transform: none;
}
.related__grid {
max-width: var(--max); margin: 0 auto;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem;
}
@media (max-width: 900px) { .related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .related__grid { grid-template-columns: 1fr; } }
.listing-card {
position: relative;
background: var(--paper-soft);
border: 2px solid var(--ink);
box-shadow: 6px 6px 0 var(--ink);
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
overflow: hidden;
}
.listing-card:hover {
transform: translate(-3px, -3px) rotate(-0.5deg);
box-shadow: 9px 9px 0 var(--ink);
}
.listing-card__media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border-bottom: 2px solid var(--ink);
}
.listing-card__media img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04) saturate(0.95); }
.listing-card__body { padding: 1rem 1.1rem 1.2rem; }
.listing-card__tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.listing-card__name {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: 1.3rem; line-height: 1;
color: var(--ink); margin-bottom: 0.5rem;
}
.listing-card__name em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--teal); text-transform: none; }
.listing-card__meta {
font-family: var(--font-accent); font-style: italic;
font-size: 0.88rem; color: var(--ink-soft);
margin-bottom: 0.8rem;
}
.tag.small {
font-size: 0.62rem; padding: 0.25rem 0.5rem; border-width: 1.5px;
}
/* ============================================================
SINGLE STORY CSS — extracted from
app/public/mockups/single-story-postershop.html.
Skipped lines 62–131 (PRESS BAR + MASTHEAD) and 676+ (FOOTER)
since shared CSS already covers them.
============================================================ */
/* ============================================================
READ PROGRESS BAR
============================================================ */
.progress {
position: fixed; top: 0; left: 0;
height: 3px; width: 0%;
background: var(--clay);
z-index: 1000;
}
/* ============================================================
STORY HERO — real photo + poster typography overlay
============================================================ */
.story-hero {
position: relative;
background: var(--teal);
color: var(--paper);
overflow: hidden;
isolation: isolate;
min-height: 100vh;
}
.story-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.story-hero__bg img {
width: 100%; height: 100%; object-fit: cover;
filter: brightness(0.6) contrast(1.08) saturate(0.78);
}
.story-hero__overlay {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(180deg,
rgba(20,59,69,0.5) 0%,
rgba(31,87,99,0.1) 25%,
rgba(31,87,99,0.18) 60%,
rgba(20,59,69,0.95) 100%);
}
.story-hero__overlay::after {
content: ''; position: absolute; inset: 0;
background: radial-gradient(ellipse at 25% 60%, rgba(217,166,77,0.10) 0%, transparent 55%);
}
.story-hero__frame {
position: relative; z-index: 2;
min-height: 100vh;
padding: 4rem var(--gutter) 4rem;
max-width: var(--max); margin: 0 auto;
display: grid; grid-template-rows: auto 1fr auto;
}
.story-hero__frame::before {
content: '';
position: absolute; inset: 1.5rem var(--gutter);
border: 2px solid var(--paper); opacity: 0.55;
pointer-events: none;
}
.story-hero__frame::after {
content: '';
position: absolute; inset: calc(1.5rem + 6px) calc(var(--gutter) + 6px);
border: 1px solid var(--paper); opacity: 0.25;
pointer-events: none;
}
.story-hero__top {
display: flex; justify-content: space-between; align-items: center;
padding: 0.5rem 1rem;
font-family: var(--font-poster); text-transform: uppercase;
letter-spacing: 0.22em; font-size: 0.74rem;
color: var(--mustard);
}
.story-hero__top .mid { color: var(--paper); letter-spacing: 0.3em; font-weight: 800; }
.story-hero__body {
align-self: center;
padding: 2rem 1rem;
max-width: 900px;
}
.story-hero__cat {
display: inline-block;
font-family: var(--font-poster); font-weight: 800;
letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.84rem;
color: var(--mustard);
margin-bottom: 1.5rem;
}
.story-hero__title {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(2.8rem, 8vw, 7.5rem);
line-height: 0.88; letter-spacing: -0.02em;
color: var(--paper);
margin-bottom: 1.5rem;
}
.story-hero__title em {
font-family: var(--font-accent); font-style: italic; font-weight: 400;
color: var(--mustard); text-transform: none;
text-shadow: 3px 3px 0 var(--clay);
}
.story-hero__dek {
font-family: var(--font-accent); font-style: italic;
font-size: clamp(1.15rem, 1.8vw, 1.6rem);
line-height: 1.4; color: var(--paper-soft);
max-width: 50ch;
padding: 0.5rem 0.9rem;
background: var(--clay);
border: 2px solid var(--ink);
display: inline-block;
}
.story-hero__meta {
align-self: end;
display: flex; gap: 2rem; align-items: center;
padding: 0 1rem;
font-family: var(--font-poster); font-weight: 700;
font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--paper-soft);
}
.story-hero__meta .author { color: var(--mustard); }
.story-hero__meta .sep { color: var(--ink); }
/* ============================================================
ARTICLE BODY — magazine typography
============================================================ */
.article {
background: var(--paper);
padding: 5rem var(--gutter) 4rem;
border-bottom: 3px solid var(--ink);
}
.article__inner { max-width: var(--read); margin: 0 auto; }
.article__lead {
font-family: var(--font-body); font-weight: 400;
font-size: 1.3rem; line-height: 1.55;
color: var(--ink); margin-bottom: 1.5rem;
}
.article__lead::first-letter {
font-family: var(--font-poster); font-weight: 900;
font-size: 5.5rem; line-height: 0.85;
float: left; margin: 0.2rem 0.7rem 0 0;
color: var(--clay);
text-shadow: 3px 3px 0 var(--ink);
}
.article__inner p {
font-size: 1.05rem; line-height: 1.7;
color: var(--ink); margin-bottom: 1.5rem;
}
.article__inner em {
font-family: var(--font-accent); font-style: italic; color: var(--ink-soft);
}
.article__inner a {
color: var(--clay); border-bottom: 2px solid var(--clay);
padding-bottom: 1px;
}
.article__inner a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.article__inner h2 {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(1.8rem, 3.2vw, 2.6rem);
line-height: 0.95; letter-spacing: -0.01em;
color: var(--ink);
margin: 3rem 0 1.2rem;
padding-top: 1.5rem; border-top: 2px solid var(--ink);
}
.article__inner h2 em {
font-family: var(--font-accent); font-style: italic; font-weight: 400;
color: var(--teal); text-transform: none;
}
.article__inner h2 .eyebrow {
display: block;
font-family: var(--font-poster); font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase;
font-size: 0.78rem;
color: var(--clay);
margin-bottom: 0.8rem;
}
/* ============================================================
PULLQUOTE — bold poster moment
============================================================ */
.pullquote {
margin: 3.5rem calc(-2rem) 3.5rem;
background: var(--mustard);
color: var(--ink);
border-top: 3px solid var(--ink);
border-bottom: 3px solid var(--ink);
padding: 3rem 2rem;
position: relative;
}
.pullquote::before {
content: '';
position: absolute; top: -3px; left: 0; right: 0;
height: 12px;
background: repeating-linear-gradient(90deg, var(--ink) 0 10px, transparent 10px 20px);
}
.pullquote__inner {
max-width: 700px; margin: 0 auto;
text-align: center;
position: relative;
}
.pullquote__mark {
font-family: var(--font-accent); font-style: italic;
font-size: 5rem; color: var(--clay);
line-height: 0;
display: block; margin-bottom: 0.8rem;
}
.pullquote__text {
font-family: var(--font-poster); font-weight: 800;
text-transform: uppercase;
font-size: clamp(1.5rem, 3vw, 2.4rem);
line-height: 1.05; letter-spacing: -0.005em;
color: var(--ink);
margin-bottom: 1.5rem;
}
.pullquote__text em {
font-family: var(--font-accent); font-style: italic; font-weight: 400;
color: var(--clay); text-transform: none;
}
.pullquote__attr {
font-family: var(--font-accent); font-style: italic;
font-size: 1rem; color: var(--ink-soft);
}
@media (max-width: 760px) {
.pullquote { margin: 2.5rem calc(-1 * var(--gutter)) 2.5rem; padding: 2rem var(--gutter); }
}
/* ============================================================
INLINE IMAGE
============================================================ */
.inline-img {
margin: 3rem calc(-2rem) 3rem;
position: relative;
}
.inline-img__wrap {
position: relative;
background: var(--paper-soft);
border: 3px solid var(--ink);
padding: 14px;
box-shadow: 8px 8px 0 var(--clay);
margin: 0 1.5rem;
}
.inline-img__wrap img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
border: 1px solid var(--ink);
}
.inline-img__caption {
margin-top: 1rem;
font-family: var(--font-accent); font-style: italic;
font-size: 0.95rem; color: var(--ink-soft);
text-align: center;
}
.inline-img__caption .credit {
font-family: var(--font-poster); font-style: normal;
font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
font-size: 0.66rem; color: var(--clay);
margin-left: 0.5rem;
}
@media (max-width: 760px) { .inline-img { margin: 2rem 0; } .inline-img__wrap { margin: 0; } }
/* ============================================================
ITINERARY — numbered stamp list
============================================================ */
.itinerary {
margin: 2.5rem 0;
list-style: none;
counter-reset: it;
}
.itinerary li {
counter-increment: it;
display: grid;
grid-template-columns: 80px 1fr;
column-gap: 1.5rem;
row-gap: 0.4rem;
padding: 1.6rem 0;
border-bottom: 2px solid var(--ink);
align-items: start;
}
.itinerary li:first-child { border-top: 2px solid var(--ink); }
.itinerary li::before {
content: counter(it, decimal-leading-zero);
grid-column: 1; grid-row: 1 / span 3;
font-family: var(--font-poster); font-weight: 900;
font-size: 3.4rem; line-height: 0.85;
color: var(--clay);
text-shadow: 3px 3px 0 var(--ink);
align-self: start;
}
.itinerary li > div { grid-column: 2; }
.itinerary__time {
display: inline-block;
font-family: var(--font-poster); font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
font-size: 0.72rem;
color: var(--paper);
background: var(--teal);
padding: 0.3rem 0.6rem;
border: 2px solid var(--ink);
margin-bottom: 0.5rem;
}
.itinerary__title {
font-family: var(--font-poster); font-weight: 800;
text-transform: uppercase;
font-size: 1.4rem; line-height: 1;
color: var(--ink); margin-bottom: 0.4rem;
}
.itinerary__title em {
font-family: var(--font-accent); font-style: italic; font-weight: 400;
color: var(--teal); text-transform: none;
}
.itinerary li p {
font-size: 0.98rem; color: var(--ink-soft);
margin: 0;
}
/* ============================================================
SIGNOFF
============================================================ */
.signoff {
margin-top: 3rem;
padding: 1.5rem;
background: var(--paper-soft);
border: 2px solid var(--ink);
box-shadow: 5px 5px 0 var(--mustard);
display: grid; grid-template-columns: 64px 1fr;
gap: 1.2rem; align-items: center;
}
.signoff__avatar {
width: 64px; height: 64px;
border: 2px solid var(--ink);
overflow: hidden;
background: var(--paper);
}
.signoff__avatar img { width: 100%; height: 100%; object-fit: cover; }
.signoff__copy { line-height: 1.5; }
.signoff__name {
font-family: var(--font-poster); font-weight: 800;
text-transform: uppercase;
font-size: 1.15rem; color: var(--ink);
display: block; margin-bottom: 0.2rem;
}
.signoff__bio {
font-family: var(--font-accent); font-style: italic;
font-size: 0.92rem; color: var(--ink-soft);
}
/* ============================================================
MENTIONED — listing cards
============================================================ */
.mentioned {
background: var(--paper-soft);
padding: 4.5rem var(--gutter);
border-bottom: 3px solid var(--ink);
}
.mentioned__head {
max-width: var(--max); margin: 0 auto 2rem;
display: flex; justify-content: space-between; align-items: baseline;
border-bottom: 2px solid var(--ink); padding-bottom: 1rem;
}
.mentioned__title {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 0.95;
color: var(--ink);
}
.mentioned__title em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--clay); text-transform: none; }
.mentioned__sub { font-family: var(--font-accent); font-style: italic; font-size: 0.95rem; color: var(--ink-soft); }
.mentioned__grid {
max-width: var(--max); margin: 0 auto;
display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem;
}
.listing-card {
position: relative; display: block;
background: var(--paper);
border: 2px solid var(--ink);
box-shadow: 6px 6px 0 var(--ink);
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
overflow: hidden;
}
.listing-card:hover {
transform: translate(-3px, -3px) rotate(-0.5deg);
box-shadow: 9px 9px 0 var(--ink);
}
.listing-card__media {
position: relative; aspect-ratio: 4 / 3; overflow: hidden;
border-bottom: 2px solid var(--ink);
}
.listing-card__media img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04); }
.listing-card__body { padding: 1rem 1.1rem 1.2rem; }
.listing-card__tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.tag {
display: inline-flex; align-items: center; gap: 0.4rem;
font-family: var(--font-poster); font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.62rem;
padding: 0.25rem 0.5rem;
border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink);
}
.tag.eat { background: var(--clay); color: var(--paper); }
.tag.stay { background: var(--teal); color: var(--paper); }
.tag.do { background: var(--forest); color: var(--paper); }
.tag.shop { background: var(--mustard); }
.tag.svc { background: var(--paper-deep); }
.tag.cskt { background: var(--teal); color: var(--paper); }
.tag.pick { background: var(--mustard); color: var(--ink); }
.listing-card__name {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: 1.25rem; line-height: 1;
color: var(--ink); margin-bottom: 0.4rem;
}
.listing-card__meta {
font-family: var(--font-accent); font-style: italic;
font-size: 0.84rem; color: var(--ink-soft);
}
/* ============================================================
NEWSLETTER CALLOUT
============================================================ */
.newsletter {
background: var(--mustard);
padding: 4.5rem var(--gutter);
border-bottom: 3px solid var(--ink);
position: relative;
}
.newsletter::before {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: 12px;
background: repeating-linear-gradient(90deg, var(--ink) 0 10px, transparent 10px 20px);
}
.newsletter__inner {
max-width: 900px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
}
@media (max-width: 760px) { .newsletter__inner { grid-template-columns: 1fr; gap: 2rem; } }
.newsletter__eyebrow {
font-family: var(--font-poster); font-weight: 800;
letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.84rem;
color: var(--clay); margin-bottom: 0.8rem; display: block;
}
.newsletter__title {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(1.7rem, 3vw, 2.4rem);
line-height: 0.95;
color: var(--ink);
margin-bottom: 0.8rem;
}
.newsletter__title em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--teal); text-transform: none; }
.newsletter__sub { font-family: var(--font-accent); font-style: italic; font-size: 1rem; color: var(--ink-soft); line-height: 1.5; }
.newsletter__form {
background: var(--paper); padding: 1.5rem;
border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
}
.newsletter__field {
display: grid; grid-template-columns: 1fr auto;
border: 2px solid var(--ink); background: var(--paper-soft);
}
.newsletter__field input {
background: transparent; border: none;
padding: 0.9rem 1rem;
font-family: var(--font-body); font-size: 0.95rem; color: var(--ink);
outline: none;
}
.newsletter__field input::placeholder { color: var(--ink-soft); opacity: 0.6; }
.newsletter__field button {
font-family: var(--font-poster); font-weight: 800;
letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.78rem;
padding: 0 1.4rem;
background: var(--clay); color: var(--paper);
border-left: 2px solid var(--ink);
}
.newsletter__field button:hover { background: var(--clay-deep); }
.newsletter__note {
font-family: var(--font-poster); font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
font-size: 0.66rem; color: var(--ink-soft); margin-top: 0.8rem;
}
/* ============================================================
RELATED STORIES — postcards
============================================================ */
.related-stories {
background: var(--paper);
padding: 4.5rem var(--gutter);
border-bottom: 3px solid var(--ink);
}
.related-stories__head {
max-width: var(--max); margin: 0 auto 2.5rem;
display: flex; justify-content: space-between; align-items: baseline;
border-bottom: 2px solid var(--ink); padding-bottom: 1rem;
}
.related-stories__title {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 0.95;
color: var(--ink);
}
.related-stories__title em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--teal); text-transform: none; }
.related-stories__sub {
font-family: var(--font-poster); font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.74rem;
color: var(--clay);
}
.related-stories__grid {
max-width: var(--max); margin: 0 auto;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem;
}
@media (max-width: 900px) { .related-stories__grid { grid-template-columns: 1fr; } }
.postcard {
background: var(--paper-soft);
border: 2px solid var(--ink);
box-shadow: 6px 6px 0 var(--teal);
overflow: hidden;
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.postcard:hover {
transform: translate(-3px, -3px) rotate(-0.5deg);
box-shadow: 9px 9px 0 var(--teal);
}
.postcard__img {
position: relative;
aspect-ratio: 5 / 3; overflow: hidden;
border-bottom: 2px solid var(--ink);
}
.postcard__img img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04) saturate(0.95); }
.postcard__stamp {
position: absolute;
top: 0.7rem; right: 0.7rem;
width: 64px; height: 64px;
background: var(--mustard);
border: 2px solid var(--ink);
box-shadow: 2px 2px 0 var(--ink);
display: grid; place-items: center;
font-family: var(--font-poster); font-weight: 900;
font-size: 0.62rem; line-height: 1.1;
text-align: center; text-transform: uppercase; color: var(--ink);
padding: 0.3rem;
letter-spacing: 0.1em;
transform: rotate(-8deg);
}
.postcard__body { padding: 1.2rem 1.3rem 1.4rem; }
.postcard__cat {
font-family: var(--font-poster); font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
font-size: 0.72rem; color: var(--clay);
margin-bottom: 0.5rem;
}
.postcard__title {
font-family: var(--font-accent); font-style: italic;
font-size: 1.4rem; line-height: 1.15;
color: var(--ink); margin-bottom: 0.6rem;
}
.postcard__read {
font-family: var(--font-poster); font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
font-size: 0.66rem; color: var(--ink-soft);
}
/* ============================================================
PAGE MAP CSS — extracted from
app/public/mockups/page-map-postershop.html (lines 125–544).
Skipped lines 14–122 (duplicate :root, body, press-bar,
masthead — already in shared CSS) and the global
'html, body { overflow: hidden }' (line 40) which would
break scrolling on every other page.
============================================================ */
:root {
--sidebar-w: 340px;
--nav-h: 130px;
}
body.page-template-page-map { overflow: hidden; height: 100vh; }
body.page-template-page-map .site-inner,
body.page-template-page-map .wrap,
body.page-template-page-map .content-sidebar-wrap { padding: 0; margin: 0; max-width: none; }
body.page-template-page-map .footer { display: none; }
/* ============================================================
PAGE LAYOUT — sidebar + canvas
============================================================ */
.map-page {
position: fixed;
top: var(--nav-h); left: 0; right: 0; bottom: 0;
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
}
@media (max-width: 880px) {
.map-page { grid-template-columns: 1fr; }
}
/* ============================================================
SIDEBAR — tourist info card
============================================================ */
.sidebar {
background: var(--paper);
border-right: 3px solid var(--ink);
overflow-y: auto;
padding: 1.5rem 1.5rem 3rem;
display: grid; gap: 1.8rem; align-content: start;
background-image:
url("data:image/svg+xml;utf8,");
}
.sidebar__head {
padding: 1.1rem 1.25rem;
background: var(--ink); color: var(--paper);
border: 2px solid var(--ink);
box-shadow: 5px 5px 0 var(--clay);
margin-bottom: 0.5rem;
}
.sidebar__eyebrow {
font-family: var(--font-poster); font-weight: 700;
letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.72rem;
color: var(--mustard);
margin-bottom: 0.3rem; display: block;
}
.sidebar__title {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: 1.5rem; line-height: 1; color: var(--paper);
margin-bottom: 0.5rem;
}
.sidebar__count {
font-family: var(--font-accent); font-style: italic;
font-size: 0.95rem; color: var(--paper-soft);
}
.sidebar__count .num { color: var(--mustard); font-weight: 700; font-family: var(--font-poster); font-style: normal; }
.fgroup__label {
font-family: var(--font-poster); font-weight: 800;
letter-spacing: 0.18em; text-transform: uppercase;
font-size: 0.74rem;
color: var(--ink);
margin-bottom: 0.8rem;
display: flex; justify-content: space-between; align-items: center;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--ink);
}
.fgroup__label .clear {
font-size: 0.62rem; color: var(--clay); cursor: pointer;
letter-spacing: 0.14em;
}
.fgroup__label .clear:hover { color: var(--ink); }
.fgroup__list { display: grid; gap: 0.4rem; }
.fitem {
display: flex; align-items: center; gap: 0.65rem;
padding: 0.55rem 0.8rem;
border: 2px solid var(--ink);
background: var(--paper-soft);
font-family: var(--font-poster); font-weight: 700;
font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--ink);
cursor: pointer;
transition: all 0.18s var(--ease);
}
.fitem:hover { background: var(--paper); transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--ink); }
.fitem.is-active {
background: var(--clay); color: var(--paper);
box-shadow: 3px 3px 0 var(--ink);
}
.fitem .pip {
width: 8px; height: 8px; border-radius: 50%; background: var(--ink-soft);
}
.fitem .pip.eat { background: var(--clay); }
.fitem .pip.stay { background: var(--teal); }
.fitem .pip.do { background: var(--forest); }
.fitem .pip.shop { background: var(--mustard-deep); }
.fitem .pip.svc { background: var(--ink-soft); }
.fitem.is-active .pip { background: var(--paper); }
.fitem .name { flex: 1; }
.fitem .count {
color: var(--ink-soft); font-size: 0.66rem;
}
.fitem.is-active .count { color: var(--paper-soft); }
.zoomjump { display: grid; gap: 0.4rem; }
.zoomjump button {
font-family: var(--font-poster); font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.78rem;
color: var(--paper);
background: var(--teal);
padding: 0.6rem 0.85rem;
border: 2px solid var(--ink);
box-shadow: 3px 3px 0 var(--ink);
text-align: left;
display: flex; justify-content: space-between; align-items: center;
transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.zoomjump button:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.zoomjump button .dist {
color: var(--mustard); font-size: 0.66rem; letter-spacing: 0.12em;
font-weight: 600;
}
/* ============================================================
MAP OVERLAY UI — poster-styled chrome layered over #emv-map
(compass, title plate, controls, search, legend, zoom-jump).
The pre-MapLibre illustrated-SVG map styles (.canvas__lake/
__missions/__roads, .town-label, .pin, .cluster, .preview,
.mockup-note) were removed 2026-06-08 — dead since the real
MapLibre map shipped. Live pins/popups/cards live in map.css.
============================================================ */
.canvas {
position: relative;
overflow: hidden;
background: var(--paper-soft);
}
/* Compass rose */
.compass {
position: absolute;
top: 1.5rem; right: 1.5rem;
width: 76px; height: 76px;
z-index: 5;
background: var(--paper);
border: 2px solid var(--ink);
box-shadow: 4px 4px 0 var(--ink);
padding: 6px;
}
.compass svg { width: 100%; height: 100%; }
/* Title plate */
.titleplate {
position: absolute;
top: 1.5rem; left: 1.5rem;
z-index: 5;
background: var(--ink); color: var(--mustard);
border: 2px solid var(--ink);
box-shadow: 4px 4px 0 var(--clay);
padding: 0.75rem 1.2rem;
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase; letter-spacing: 0.18em;
font-size: 0.96rem;
line-height: 1.1;
}
.titleplate .sub {
font-family: var(--font-accent); font-style: italic; font-weight: 400;
font-size: 0.78rem; color: var(--paper-soft);
text-transform: none; letter-spacing: 0.02em;
display: block;
}
/* Controls (top-right under compass) */
.controls {
position: absolute;
top: calc(1.5rem + 76px + 10px); right: 1.5rem;
z-index: 5;
display: grid; gap: 0.5rem;
}
.control-grp {
display: grid;
border: 2px solid var(--ink);
background: var(--paper);
box-shadow: 3px 3px 0 var(--ink);
}
.control-grp button {
font-family: var(--font-poster); font-weight: 900;
width: 42px; height: 42px;
color: var(--ink);
border-bottom: 2px solid var(--ink);
display: grid; place-items: center;
font-size: 1.1rem;
}
.control-grp button:last-child { border-bottom: none; }
.control-grp button:hover { background: var(--mustard); }
/* Search bar */
.searchbox {
position: absolute;
top: 1.5rem; left: calc(1.5rem + 200px);
z-index: 5;
display: flex;
align-items: center;
gap: 0.7rem;
background: var(--paper);
border: 2px solid var(--ink);
box-shadow: 3px 3px 0 var(--ink);
padding: 0 1rem;
width: 320px;
height: 46px;
}
@media (max-width: 1100px) { .searchbox { display: none; } }
.searchbox .icon { font-size: 1rem; color: var(--ink-soft); }
.searchbox input {
background: transparent; border: none; outline: none; flex: 1;
font-family: var(--font-body); font-size: 0.92rem; color: var(--ink);
}
.searchbox input::placeholder { color: var(--ink-soft); opacity: 0.65; }
.searchbox .kbd {
font-family: var(--font-poster); font-weight: 700;
font-size: 0.62rem; letter-spacing: 0.12em;
color: var(--ink-soft);
padding: 2px 5px;
border: 1.5px solid var(--ink-soft);
}
/* Legend */
.legend {
position: absolute;
bottom: 1.5rem; left: 1.5rem;
z-index: 5;
background: var(--paper);
border: 2px solid var(--ink);
box-shadow: 4px 4px 0 var(--ink);
padding: 1rem 1.2rem;
display: grid; gap: 0.5rem;
}
.legend__label {
font-family: var(--font-poster); font-weight: 800;
letter-spacing: 0.2em; text-transform: uppercase;
font-size: 0.7rem;
color: var(--clay);
margin-bottom: 0.3rem;
}
.legend__row {
display: flex; align-items: center; gap: 0.6rem;
font-family: var(--font-poster); font-weight: 700;
font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--ink);
}
.legend__dot { width: 12px; height: 12px; border: 1.5px solid var(--ink); }
.legend__dot.eat { background: var(--clay); }
.legend__dot.stay { background: var(--teal); }
.legend__dot.do { background: var(--forest); }
.legend__dot.shop { background: var(--mustard); }
.legend__dot.svc { background: var(--paper-deep); }
.legend__dot.featured { background: var(--mustard); border-color: var(--clay); }
/* Shared pill/tag styling. NOTE: .tag is defined three times in this file;
this copy is last in source order, so it wins the cascade and sets the
live tag appearance site-wide. Kept intentionally during the dead-map
cleanup (2026-06-08) — do not merge upward without re-checking tag sizing. */
.tag {
display: inline-flex; align-items: center; gap: 0.35rem;
font-family: var(--font-poster); font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.62rem;
padding: 0.25rem 0.5rem;
border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink);
}
.tag.stay { background: var(--teal); color: var(--paper); }
.tag.cskt { background: var(--teal); color: var(--paper); }
.tag.pick { background: var(--mustard); color: var(--ink); }
@media (max-width: 880px) {
.legend { display: none; }
}
/* ============================================================
SPONSOR PLACEHOLDER — single-business sponsor band (Stage 1).
Extracted verbatim from single-business-postershop.html.
============================================================ */
.sponsor {
background: var(--paper-deep);
padding: 2.5rem var(--gutter);
border-bottom: 3px solid var(--ink);
}
.sponsor__inner {
max-width: var(--max); margin: 0 auto;
display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center;
}
.sponsor__label {
font-family: var(--font-poster); font-weight: 700;
letter-spacing: 0.2em; text-transform: uppercase;
font-size: 0.7rem; color: var(--clay);
}
.sponsor__msg {
font-family: var(--font-accent); font-style: italic;
font-size: 1.05rem; color: var(--ink-soft); line-height: 1.45;
margin: 0;
}
.sponsor__cta {
font-family: var(--font-poster); font-weight: 800;
letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.74rem;
color: var(--clay); border-bottom: 2px solid var(--clay); padding-bottom: 2px;
}
@media (max-width: 760px) {
.sponsor__inner { grid-template-columns: 1fr; text-align: left; gap: 0.8rem; }
}
/* ============================================================
============================================================
EVENTS — ARCHIVE (Almanac variant)
Source: app/public/mockups/events-almanac-postershop-v2.html
============================================================
============================================================ */
/* Almanac hero — separate from town/home hero (.hero) */
.archive-tribe_events .ev-hero,
.post-type-archive-tribe_events .ev-hero {
background: var(--paper-soft);
border-bottom: 3px solid var(--ink);
padding: 4rem var(--gutter) 3rem;
position: relative;
}
.ev-hero::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 6px;
background: repeating-linear-gradient(90deg,
var(--clay) 0 14px, transparent 14px 22px,
var(--teal) 22px 36px, transparent 36px 44px,
var(--mustard) 44px 58px, transparent 58px 66px);
}
.ev-hero__inner {
max-width: var(--max); margin: 0 auto;
display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: end;
}
.ev-hero__eye {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.22em;
font-size: 0.78rem;
color: var(--clay);
display: flex; align-items: center; gap: 0.7rem;
margin-bottom: 0.7rem;
}
.ev-hero__eye::before,
.ev-hero__eye::after { content: ''; flex: 0 0 30px; height: 1px; background: var(--ink); }
.ev-hero__eye::after { flex: 1; max-width: 200px; }
.ev-hero__title {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(3.4rem, 10vw, 8rem); line-height: 0.82;
letter-spacing: -0.03em;
color: var(--ink);
text-shadow: 4px 4px 0 var(--mustard), 8px 8px 0 var(--teal-deep);
}
.ev-hero__title em {
font-family: var(--font-accent); font-style: italic;
font-weight: 400; color: var(--teal);
text-transform: none;
display: block;
font-size: 0.42em;
margin-top: 0.4rem;
text-shadow: 2px 2px 0 var(--paper-deep);
}
.ev-hero__sub {
font-family: var(--font-accent); font-style: italic;
font-size: 1.15rem;
color: var(--ink-soft);
max-width: 60ch;
margin-top: 1.2rem;
line-height: 1.45;
}
.ev-hero__plate {
background: var(--paper);
border: 2px solid var(--ink);
box-shadow: 6px 6px 0 var(--clay);
padding: 1.5rem 1.4rem;
position: relative;
}
.ev-hero__plate::before {
content: attr(data-volume);
position: absolute; top: -14px; left: 1rem;
background: var(--ink); color: var(--mustard);
padding: 0.2rem 0.6rem;
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.16em;
font-size: 0.66rem;
}
.ev-hero__plate-head {
font-family: var(--font-poster); font-weight: 800;
text-transform: uppercase; letter-spacing: 0.16em;
font-size: 0.78rem;
color: var(--ink-soft);
border-bottom: 1px dashed var(--ink);
padding-bottom: 0.5rem;
margin-bottom: 0.7rem;
display: flex; justify-content: space-between;
}
.ev-hero__plate-head em { font-family: var(--font-accent); font-style: italic; color: var(--clay); text-transform: none; letter-spacing: 0; }
.ev-hero__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem 1rem; }
.ev-hero__stat {
display: grid; grid-template-columns: 1fr auto; align-items: baseline;
gap: 0.5rem;
padding: 0.45rem 0;
border-bottom: 1px dotted var(--ink-soft);
}
.ev-hero__stat:last-child,
.ev-hero__stat:nth-last-child(2) { border-bottom: none; }
.ev-hero__stat .lbl {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.14em;
font-size: 0.7rem;
color: var(--ink-soft);
}
.ev-hero__stat .num {
font-family: var(--font-poster); font-weight: 900;
font-size: 1.4rem; line-height: 1;
color: var(--clay);
}
@media (max-width: 900px) {
.ev-hero__inner { grid-template-columns: 1fr; gap: 2rem; }
}
/* Marquee strip — 3 featured cards above the filter */
.marquee {
background: var(--paper-deep);
border-bottom: 3px solid var(--ink);
padding: 2.5rem var(--gutter) 3rem;
position: relative;
}
.marquee::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 3px;
background: repeating-linear-gradient(90deg, var(--clay) 0 10px, transparent 10px 18px);
}
.marquee__inner { max-width: var(--max); margin: 0 auto; }
.marquee__head {
display: flex; align-items: end; justify-content: space-between;
gap: 1rem;
border-bottom: 2px solid var(--ink);
padding-bottom: 0.8rem;
margin-bottom: 1.6rem;
position: relative;
}
.marquee__head::after {
content: none; /* drop the redundant dashed rule — keep the single solid border under the head */
}
.marquee__eye {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.22em;
font-size: 0.74rem;
color: var(--clay);
display: flex; align-items: center; gap: 0.7rem;
margin-bottom: 0.5rem;
}
.marquee__eye::before,
.marquee__eye::after { content: '★'; color: var(--mustard); font-size: 0.9rem; }
.marquee__title {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 0.9;
letter-spacing: -0.01em;
color: var(--ink);
}
.marquee__title em {
font-family: var(--font-accent); font-style: italic;
font-weight: 400; color: var(--teal);
text-transform: none;
}
.marquee__note {
font-family: var(--font-accent); font-style: italic;
color: var(--ink-soft);
font-size: 0.95rem;
text-align: right;
max-width: 28ch;
}
.marquee__grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
}
@media (max-width: 900px) { .marquee__grid { grid-template-columns: 1fr; } }
/* Marquee card (was ".feature" in mockup; renamed to avoid collision with single-business .feature chip) */
.marquee-card {
background: var(--paper);
border: 2px solid var(--ink);
box-shadow: 6px 6px 0 var(--mustard);
display: flex; flex-direction: column;
overflow: hidden;
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
position: relative;
}
.marquee-card:hover {
transform: translate(-3px, -3px);
box-shadow: 9px 9px 0 var(--mustard);
}
.marquee-card__photo {
height: 190px; overflow: hidden;
background: var(--teal);
border-bottom: 2px solid var(--ink);
position: relative;
}
.marquee-card__photo img {
width: 100%; height: 100%; object-fit: cover;
filter: brightness(0.78) contrast(1.06) saturate(0.82);
}
.marquee-card__stamp {
position: absolute; top: 0.9rem; right: 0.9rem;
background: var(--clay); color: var(--paper);
border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
padding: 0.32rem 0.7rem;
font-family: var(--font-poster); font-weight: 800;
text-transform: uppercase; letter-spacing: 0.14em;
font-size: 0.66rem;
transform: rotate(-3deg);
}
.marquee-card__stamp.cskt { background: var(--forest); }
.marquee-card__stamp.pick { background: var(--mustard); color: var(--ink); }
.marquee-card__body {
padding: 1.1rem 1.2rem 1.2rem;
display: grid; grid-template-columns: 72px 1fr;
gap: 1rem;
}
.marquee-card__date {
border-right: 1.5px dashed var(--ink-soft);
padding-right: 0.8rem;
text-align: center;
align-self: start;
}
.marquee-card__date .d {
font-family: var(--font-poster); font-weight: 900;
font-size: 2rem; line-height: 1;
color: var(--ink);
}
.marquee-card__date .m {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.16em;
font-size: 0.66rem;
margin-top: 0.2rem;
color: var(--clay);
}
.marquee-card__date .dw {
font-family: var(--font-accent); font-style: italic;
font-size: 0.74rem;
color: var(--ink-soft);
margin-top: 0.1rem;
}
.marquee-card__copy { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.marquee-card__tags {
display: flex; gap: 0.4rem; flex-wrap: wrap;
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.14em;
font-size: 0.62rem;
}
.marquee-card__tag {
background: var(--paper-deep); color: var(--ink);
padding: 0.15rem 0.5rem;
border: 1px solid var(--ink);
}
.marquee-card__tag.cskt { background: var(--forest); color: var(--paper); }
.marquee-card__tag.free { background: var(--mustard); color: var(--ink); }
.marquee-card__title {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: 1.2rem; line-height: 1.05;
color: var(--ink);
}
.marquee-card__title em {
font-family: var(--font-accent); font-style: italic;
font-weight: 400; color: var(--teal);
text-transform: none;
}
.marquee-card__town {
font-family: var(--font-accent); font-style: italic;
font-size: 0.9rem;
color: var(--clay);
}
.marquee-card__blurb {
font-size: 0.86rem; color: var(--ink-soft);
line-height: 1.45;
margin-top: 0.25rem;
}
/* Filter strip — compact horizontal pill bar */
.filterstrip {
background: var(--ink); color: var(--paper);
padding: 1rem var(--gutter);
position: sticky; top: 78px; z-index: 40;
border-bottom: 3px solid var(--ink);
}
.filterstrip__inner { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.filterstrip__group { display: flex; align-items: center; gap: 0.5rem; }
.filterstrip__label {
font-family: var(--font-poster); font-weight: 800;
text-transform: uppercase; letter-spacing: 0.16em;
font-size: 0.7rem;
color: var(--mustard);
}
.pill {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.1em;
font-size: 0.72rem;
padding: 0.3rem 0.7rem;
background: transparent;
color: var(--paper-soft);
border: 1.5px solid var(--paper-soft);
cursor: pointer;
transition: all 0.15s;
}
.pill:hover { background: var(--paper-soft); color: var(--ink); }
.pill.active {
background: var(--mustard); color: var(--ink); border-color: var(--mustard);
}
.filterstrip__divider {
width: 1px; height: 22px; background: var(--paper-soft); opacity: 0.4;
}
@media (max-width: 900px) {
.filterstrip { position: relative; top: 0; }
}
/* Almanac body — week groups + ledger entries */
.almanac { padding: 3rem var(--gutter) 4rem; }
.almanac__inner { max-width: var(--max); margin: 0 auto; }
.week {
display: grid; grid-template-columns: 160px 1fr 160px;
gap: 2rem;
padding: 1.8rem 0 1.4rem;
border-bottom: 2px solid var(--ink);
}
.week:first-child { padding-top: 0.5rem; }
.week__label { position: sticky; top: 158px; align-self: start; }
.week__label .lbl {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.18em;
font-size: 0.72rem;
color: var(--ink-soft);
margin-bottom: 0.4rem;
}
.week__label .num {
font-family: var(--font-poster); font-weight: 900;
font-size: clamp(2.6rem, 5vw, 4rem); line-height: 0.9;
color: var(--clay);
text-shadow: 3px 3px 0 var(--ink);
letter-spacing: -0.02em;
}
.week__label .mo {
font-family: var(--font-accent); font-style: italic;
font-size: 1.2rem; color: var(--teal);
margin-top: 0.2rem;
}
.week__label .count {
margin-top: 1rem;
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.14em;
font-size: 0.7rem;
color: var(--ink-soft);
padding: 0.35rem 0.6rem;
background: var(--paper-deep);
border: 1px solid var(--ink);
display: inline-block;
}
.week__list { display: grid; gap: 0.6rem; }
.entry {
display: grid;
grid-template-columns: 78px 1fr auto;
gap: 1.2rem;
align-items: center;
padding: 1rem 1.2rem;
background: var(--paper-soft);
border: 2px solid var(--ink);
box-shadow: 4px 4px 0 var(--paper-deep);
transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s;
}
.entry:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 var(--mustard);
background: var(--paper);
}
.entry__date {
border-right: 1.5px dashed var(--ink-soft);
padding-right: 1rem;
text-align: center;
}
.entry__date .d {
font-family: var(--font-poster); font-weight: 900;
font-size: 2.2rem; line-height: 1;
color: var(--ink);
}
.entry__date .m {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.16em;
font-size: 0.68rem;
margin-top: 0.2rem;
color: var(--clay);
}
.entry__date .dw {
font-family: var(--font-accent); font-style: italic;
font-size: 0.78rem;
color: var(--ink-soft);
margin-top: 0.1rem;
}
.entry__body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.entry__tags {
display: flex; gap: 0.5rem; flex-wrap: wrap;
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.14em;
font-size: 0.62rem;
margin-bottom: 0.1rem;
}
.entry__tag {
background: var(--paper-deep); color: var(--ink);
padding: 0.15rem 0.5rem;
border: 1px solid var(--ink);
}
.entry__tag.cskt { background: var(--forest); color: var(--paper); }
.entry__tag.free { background: var(--mustard); color: var(--ink); }
.entry__tag.featured { background: var(--clay); color: var(--paper); }
.entry__title {
font-family: var(--font-poster); font-weight: 800;
text-transform: uppercase;
font-size: 1.15rem; line-height: 1.05;
letter-spacing: -0.005em;
color: var(--ink);
}
.entry__title em {
font-family: var(--font-accent); font-style: italic;
font-weight: 400; color: var(--teal);
text-transform: none;
}
.entry__meta {
font-family: var(--font-body);
font-size: 0.86rem; color: var(--ink-soft);
display: flex; gap: 0.7rem; flex-wrap: wrap;
}
.entry__meta .dot { color: var(--clay); }
.entry__where {
text-align: right;
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.14em;
font-size: 0.7rem;
color: var(--ink-soft);
padding-left: 1rem;
border-left: 1.5px dashed var(--ink-soft);
min-width: 110px;
}
.entry__where .town {
display: block;
font-size: 0.84rem;
color: var(--clay);
margin-bottom: 0.2rem;
}
/* Don't double the divider when curated marquee sections stack (This Weekend → Around the Valley) */
.marquee + .marquee::before { content: none; }
/* Instant-filter: JS-hidden elements (events, empty weeks, curated front sections) */
.is-hidden { display: none !important; }
.filterstrip__clear, .js-clear {
color: var(--mustard); border-bottom: 1px solid var(--mustard); cursor: pointer;
}
/* Event poster motif — card-image fallback when there's no photo (no stock art) */
.event-motif {
width: 100%; height: 100%;
background: var(--motif-ink, var(--teal));
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 0.45rem; color: var(--paper);
position: relative; overflow: hidden;
}
.event-motif::before {
content: ''; position: absolute; inset: 0;
background: repeating-linear-gradient(45deg, rgba(255,255,255,0.07) 0 14px, transparent 14px 28px);
}
.event-motif__glyph { font-size: 2.8rem; line-height: 1; position: relative; }
.event-motif__label {
font-family: var(--font-poster); font-weight: 800;
text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem;
position: relative;
}
.dept__seeall {
font-family: var(--font-poster); font-weight: 700; text-transform: uppercase;
letter-spacing: 0.13em; font-size: 0.72rem; color: var(--clay);
border-bottom: 2px solid var(--mustard); white-space: nowrap;
}
/* "The complete almanac" intro band — frames the full calendar as the back section */
.almanac-intro { background: var(--paper); padding: 3.2rem var(--gutter) 0.5rem; text-align: center; }
.almanac-intro__inner { max-width: var(--max); margin: 0 auto; }
.almanac-intro__inner .marquee__eye { justify-content: center; }
.almanac-intro__title {
font-family: var(--font-poster); font-weight: 900; text-transform: uppercase;
font-size: clamp(1.7rem, 3.8vw, 2.6rem); line-height: 0.95; color: var(--ink);
margin-top: 0.3rem;
}
.almanac-intro__title em { font-family: var(--font-accent); font-style: italic; font-weight: 400; text-transform: none; color: var(--teal); }
.almanac-intro__note { font-family: var(--font-accent); font-style: italic; color: var(--ink-soft); margin-top: 0.6rem; }
/* Regulars — the valley's weekly rhythm, collapsed above the dated almanac */
.week--regulars .week__label .num {
color: var(--teal);
}
.week--regulars .week__list { gap: 0.5rem; }
.entry--regular {
background: var(--paper);
border-left: 4px solid var(--teal);
box-shadow: 4px 4px 0 var(--paper-deep);
}
.entry--regular:hover { box-shadow: 6px 6px 0 var(--teal); }
.entry--regular .entry__date .d {
font-size: 1.7rem;
color: var(--teal);
}
.entry--regular .entry__date .m { color: var(--ink-soft); }
@media (max-width: 760px) {
.week { grid-template-columns: 1fr; gap: 0.8rem; }
.week__label { position: relative; top: 0; }
.entry { grid-template-columns: 60px 1fr; }
.entry__where { grid-column: 2; border-left: none; padding-left: 0; text-align: left; }
}
/* Signatures (annual recurring strip) */
.signatures {
background: var(--teal);
color: var(--paper);
padding: 4rem var(--gutter);
border-top: 3px solid var(--ink);
border-bottom: 3px solid var(--ink);
}
.signatures__inner { max-width: var(--max); margin: 0 auto; }
.signatures__head { text-align: center; margin-bottom: 2rem; }
.signatures__eye {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.22em;
font-size: 0.74rem;
color: var(--mustard);
margin-bottom: 0.6rem;
}
.signatures__title {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(2rem, 5vw, 3.4rem); line-height: 0.9;
color: var(--paper);
}
.signatures__title em {
font-family: var(--font-accent); font-style: italic;
font-weight: 400; color: var(--mustard);
text-transform: none;
}
.signatures__grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
@media (max-width: 900px) { .signatures__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .signatures__grid { grid-template-columns: 1fr; } }
.sigrow {
background: var(--teal-deep);
border: 1.5px solid var(--mustard);
padding: 0.9rem 1rem;
display: grid;
grid-template-columns: auto 1fr;
gap: 0.8rem;
align-items: center;
}
.sigrow__date {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: 0.84rem;
color: var(--mustard);
text-align: center;
line-height: 1.05;
padding-right: 0.7rem;
border-right: 1.5px dashed var(--mustard);
min-width: 60px;
}
.sigrow__date small {
display: block;
font-size: 0.62rem;
color: var(--paper-soft);
font-weight: 600;
margin-top: 0.2rem;
letter-spacing: 0.12em;
}
.sigrow__title {
font-family: var(--font-poster); font-weight: 800;
text-transform: uppercase;
font-size: 0.95rem; line-height: 1.1;
color: var(--paper);
}
.sigrow__town {
font-family: var(--font-accent); font-style: italic;
font-size: 0.78rem;
color: var(--mustard);
margin-top: 0.2rem;
}
/* Past events (collapsed archive) */
.past { padding: 4rem var(--gutter) 5rem; }
.past__inner { max-width: var(--max); margin: 0 auto; }
.past__head {
display: flex; align-items: end; justify-content: space-between;
gap: 1rem;
border-bottom: 2px solid var(--ink);
padding-bottom: 0.6rem;
margin-bottom: 1.5rem;
}
.past__title {
font-family: var(--font-poster); font-weight: 800;
text-transform: uppercase;
font-size: clamp(1.4rem, 3vw, 2rem);
}
.past__title em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--teal); text-transform: none; }
.past__toggle {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.14em;
font-size: 0.74rem;
color: var(--clay);
cursor: pointer;
}
.past__list { display: grid; gap: 0.3rem; }
.past__row {
display: grid; grid-template-columns: 84px 1fr auto;
gap: 1.2rem; align-items: center;
padding: 0.65rem 0.4rem;
border-bottom: 1px dashed var(--ink-soft);
}
.past__row .d {
font-family: var(--font-poster); font-weight: 800;
text-transform: uppercase; letter-spacing: 0.1em;
font-size: 0.78rem;
color: var(--ink-soft);
}
.past__row .t {
font-family: var(--font-poster); font-weight: 700;
font-size: 1rem;
}
.past__row .t em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--teal); }
.past__row .w {
font-family: var(--font-accent); font-style: italic;
font-size: 0.86rem; color: var(--ink-soft);
}
/* ============================================================
============================================================
EVENTS — SINGLE event page
Source: app/public/mockups/single-event-postershop.html (no-photo state)
app/public/mockups/single-event-postershop-simple.html (photo state)
============================================================
============================================================ */
/* Event hero — color-block (no photo) + photo backdrop variants */
.event-hero {
position: relative;
background: var(--teal-deep);
color: var(--paper);
overflow: hidden;
isolation: isolate;
border-bottom: 3px solid var(--ink);
}
.event-hero__bg {
position: absolute; inset: 0;
z-index: 0;
overflow: hidden;
}
.event-hero__bg img {
width: 100%; height: 100%;
object-fit: cover;
filter: brightness(0.62) contrast(1.08) saturate(0.78);
}
.event-hero__overlay {
position: absolute; inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(31, 87, 99, 0.55) 0%, rgba(20, 59, 69, 0.78) 100%);
}
/* Sun-ray ornament — no-photo state only */
.event-hero__rays {
position: absolute; inset: 0;
z-index: 0;
opacity: 0.16;
pointer-events: none;
}
/* Poster stripe ornaments (top + bottom edges) */
.event-hero::before,
.event-hero::after {
content: '';
position: absolute; left: 0; right: 0;
height: 14px;
background: repeating-linear-gradient(90deg,
var(--clay) 0 14px, transparent 14px 22px,
var(--mustard) 22px 36px, transparent 36px 44px,
var(--paper) 44px 58px, transparent 58px 66px);
z-index: 3;
}
.event-hero::before { top: 0; }
.event-hero::after { bottom: 0; transform: scaleX(-1); }
.event-hero__frame {
position: relative; z-index: 2;
padding: 5rem var(--gutter) 4rem;
max-width: var(--max);
margin: 0 auto;
min-height: 580px;
display: grid;
grid-template-rows: auto 1fr auto;
}
.event-hero__frame.is-poster { min-height: 720px; }
.event-hero__frame::before {
content: '';
position: absolute; inset: 2rem var(--gutter);
border: 2px solid var(--paper); opacity: 0.5;
pointer-events: none;
}
.event-hero__frame::after {
content: '';
position: absolute; inset: calc(2rem + 7px) calc(var(--gutter) + 7px);
border: 1px solid var(--paper); opacity: 0.22;
pointer-events: none;
}
.event-hero__top {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.2em;
font-size: 0.76rem;
color: var(--paper-soft);
display: flex; justify-content: space-between; align-items: center;
padding: 0.65rem 1.2rem;
background: rgba(20, 23, 20, 0.45);
border: 1px solid rgba(244, 234, 212, 0.3);
margin-bottom: 2rem;
}
.event-hero__top .mid { color: var(--mustard); }
.event-hero__top .cskt,
.event-hero__top .recurring {
color: var(--mustard);
display: inline-flex; align-items: center; gap: 0.4rem;
}
.event-hero__top .cskt::before,
.event-hero__top .recurring::before {
content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--mustard);
}
.event-hero__body {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 1.4rem;
padding: 2rem 1rem;
}
.event-hero__kicker {
font-family: var(--font-accent); font-style: italic;
color: var(--mustard);
font-size: clamp(1.1rem, 1.8vw, 1.6rem);
}
.event-hero__title {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(3rem, 9vw, 8rem); line-height: 0.85;
letter-spacing: -0.022em;
color: var(--paper);
text-shadow: 4px 4px 0 var(--clay-deep), 8px 8px 0 var(--ink);
}
.event-hero__title em {
font-family: var(--font-accent); font-style: italic;
font-weight: 400; color: var(--mustard);
text-transform: none;
display: block;
text-shadow: 3px 3px 0 var(--teal);
}
.event-hero__date {
display: inline-flex; align-items: baseline; gap: 0.7rem;
border-top: 3px solid var(--mustard);
border-bottom: 3px solid var(--mustard);
padding: 0.6rem 1.5rem;
margin-top: 0.3rem;
position: relative;
}
.event-hero__date::before,
.event-hero__date::after {
content: '★';
position: absolute; top: 50%;
color: var(--mustard);
font-size: 0.9rem;
transform: translateY(-50%);
}
.event-hero__date::before { left: 0.3rem; }
.event-hero__date::after { right: 0.3rem; }
.event-hero__date .month {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(1.3rem, 2.4vw, 2.4rem); letter-spacing: 0.18em;
color: var(--mustard);
}
.event-hero__date .num {
font-family: var(--font-poster); font-weight: 900;
font-size: clamp(2.4rem, 4.4vw, 4rem); line-height: 1;
color: var(--paper);
letter-spacing: -0.02em;
}
.event-hero__date .num small {
font-size: 0.55em;
color: var(--mustard);
margin: 0 0.2rem;
}
.event-hero__date .dow {
font-family: var(--font-poster); font-weight: 700;
font-size: 1.1rem;
color: var(--paper-soft);
letter-spacing: 0.18em;
text-transform: uppercase;
}
.event-hero__date .year {
font-family: var(--font-poster); font-weight: 700;
font-size: clamp(1rem, 1.6vw, 1.4rem);
color: var(--paper-soft);
letter-spacing: 0.16em;
}
.event-hero__date .time {
font-family: var(--font-poster); font-weight: 700;
font-size: clamp(0.95rem, 1.4vw, 1.2rem);
color: var(--paper-soft);
letter-spacing: 0.1em;
}
.event-hero__loc {
font-family: var(--font-accent); font-style: italic;
font-size: clamp(0.95rem, 1.6vw, 1.3rem);
color: var(--paper-soft);
margin-top: 0.2rem;
}
.event-hero__foot {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.18em;
font-size: 0.8rem;
color: var(--mustard);
text-align: center;
padding: 1rem 1.2rem;
background: rgba(20, 23, 20, 0.5);
border: 1px solid rgba(217, 166, 77, 0.4);
display: flex; justify-content: center; align-items: center; gap: 0.8rem; flex-wrap: wrap;
}
.event-hero__foot .div { color: var(--paper); opacity: 0.5; }
/* Quick-info strip — 4-5 cards under hero */
.qstrip {
background: var(--paper-deep);
border-bottom: 3px solid var(--ink);
padding: 2rem var(--gutter);
}
.qstrip__inner {
max-width: var(--max); margin: 0 auto;
display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.9rem;
}
.qstrip__inner.is-4 { grid-template-columns: repeat(4, 1fr); }
.qcard {
background: var(--paper);
border: 2px solid var(--ink);
box-shadow: 4px 4px 0 var(--mustard);
padding: 0.9rem 1rem;
display: flex; flex-direction: column; gap: 0.2rem;
}
.qcard__lbl {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.16em;
font-size: 0.66rem;
color: var(--clay);
}
.qcard__val {
font-family: var(--font-poster); font-weight: 800;
font-size: 1rem; line-height: 1.1;
color: var(--ink);
}
.qcard__val em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--teal); }
.qcard__sub {
font-family: var(--font-accent); font-style: italic;
font-size: 0.78rem;
color: var(--ink-soft);
}
@media (max-width: 900px) { .qstrip__inner, .qstrip__inner.is-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .qstrip__inner, .qstrip__inner.is-4 { grid-template-columns: 1fr; } }
/* About-accent polaroid (floated inside .body__prose) */
.about-accent {
float: right;
width: 240px;
margin: 0.4rem 0 1rem 2rem;
background: var(--paper-soft);
border: 2px solid var(--ink);
box-shadow: 5px 5px 0 var(--paper-deep);
padding: 0.6rem 0.6rem 0.35rem;
transform: rotate(1.5deg);
position: relative;
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.about-accent:hover {
transform: rotate(0) translate(-2px, -2px);
box-shadow: 8px 8px 0 var(--mustard);
}
.about-accent::before {
content: '';
position: absolute; top: -10px; left: 50%;
transform: translateX(-50%) rotate(-3deg);
width: 56px; height: 14px;
background: rgba(217, 166, 77, 0.55);
border: 1px solid rgba(184, 70, 43, 0.35);
}
.about-accent__img {
aspect-ratio: 4/3;
background: var(--ink);
border: 1.5px solid var(--ink);
overflow: hidden;
}
.about-accent__img img {
width: 100%; height: 100%; object-fit: cover;
filter: brightness(0.9) contrast(1.04) saturate(0.85);
}
.about-accent__cap {
font-family: var(--font-accent); font-style: italic;
font-size: 0.84rem;
color: var(--ink-soft);
padding: 0.55rem 0.3rem 0.3rem;
text-align: center;
line-height: 1.35;
}
.about-accent__cap .credit {
display: block;
font-family: var(--font-poster); font-weight: 600; font-style: normal;
text-transform: uppercase; letter-spacing: 0.12em;
font-size: 0.6rem;
color: var(--ink-soft);
opacity: 0.7;
margin-top: 0.25rem;
}
@media (max-width: 700px) {
.about-accent { float: none; width: 100%; max-width: 280px; margin: 1rem auto; }
}
/* CSKT protocols block — conditional, forest-green */
.protocols {
background: var(--forest);
color: var(--paper);
padding: 4rem var(--gutter);
border-top: 3px solid var(--ink);
border-bottom: 3px solid var(--ink);
position: relative;
}
.protocols::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 3px;
background: repeating-linear-gradient(90deg, var(--mustard) 0 8px, transparent 8px 14px);
}
.protocols__inner { max-width: var(--max); margin: 0 auto; }
.protocols__head {
display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: end;
border-bottom: 2px solid var(--mustard);
padding-bottom: 1rem;
margin-bottom: 2rem;
}
.protocols__badge {
width: 70px; height: 70px;
background: var(--mustard); color: var(--ink);
border: 2px solid var(--paper);
border-radius: 50%;
display: grid; place-items: center;
font-family: var(--font-poster); font-weight: 900;
font-size: 0.7rem; text-align: center; line-height: 1.05;
letter-spacing: 0.05em;
padding: 0.4rem;
}
.protocols__eye {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.22em;
font-size: 0.78rem;
color: var(--mustard);
margin-bottom: 0.6rem;
}
.protocols__title {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 0.9;
color: var(--paper);
}
.protocols__title em {
font-family: var(--font-accent); font-style: italic;
font-weight: 400; color: var(--mustard);
text-transform: none;
}
.protocols__intro {
max-width: 56ch;
margin-bottom: 2rem;
font-family: var(--font-accent); font-style: italic;
font-size: 1.08rem;
color: var(--paper-soft);
line-height: 1.55;
}
.protocols__grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem;
}
@media (max-width: 700px) { .protocols__grid { grid-template-columns: 1fr; } }
.prule {
background: rgba(20, 23, 20, 0.4);
border: 1.5px solid var(--mustard);
padding: 1rem 1.2rem;
display: grid; grid-template-columns: 32px 1fr; gap: 0.9rem;
}
.prule__num {
font-family: var(--font-poster); font-weight: 900;
font-size: 1.3rem; line-height: 1;
color: var(--mustard);
}
.prule__head {
font-family: var(--font-poster); font-weight: 800;
text-transform: uppercase; letter-spacing: 0.04em;
font-size: 0.95rem; line-height: 1.1;
color: var(--paper);
margin-bottom: 0.3rem;
}
.prule__body {
font-size: 0.9rem;
color: var(--paper-soft);
line-height: 1.5;
}
.protocols__note {
margin-top: 2rem;
padding: 1rem 1.2rem;
background: rgba(20, 23, 20, 0.4);
border: 1px dashed var(--mustard);
font-family: var(--font-accent); font-style: italic;
font-size: 0.9rem;
color: var(--paper-soft);
display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.protocols__note a {
color: var(--mustard);
border-bottom: 1px solid var(--mustard);
padding-bottom: 1px;
font-family: var(--font-poster); font-weight: 700; font-style: normal;
text-transform: uppercase; letter-spacing: 0.14em;
font-size: 0.78rem;
}
/* Program — multi-day schedule grid */
.program {
padding: 4rem var(--gutter);
max-width: var(--max);
margin: 0 auto;
}
.program__head {
display: flex; align-items: end; justify-content: space-between;
gap: 1rem;
border-bottom: 3px solid var(--ink);
padding-bottom: 0.8rem;
margin-bottom: 2rem;
position: relative;
}
.program__head::after {
content: '';
position: absolute; bottom: -8px; left: 0; right: 0;
height: 3px;
background: repeating-linear-gradient(90deg, var(--mustard) 0 8px, transparent 8px 14px);
}
.program__title {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 0.9;
}
.program__title em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--teal); text-transform: none; }
.program__note {
font-family: var(--font-accent); font-style: italic;
color: var(--ink-soft);
font-size: 0.94rem;
text-align: right;
}
.program__grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
}
@media (max-width: 900px) { .program__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .program__grid { grid-template-columns: 1fr; } }
.day {
background: var(--paper-soft);
border: 2px solid var(--ink);
box-shadow: 5px 5px 0 var(--paper-deep);
overflow: hidden;
transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.day:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--mustard); }
.day__head {
background: var(--clay); color: var(--paper);
padding: 0.7rem 1rem;
display: flex; justify-content: space-between; align-items: baseline;
border-bottom: 2px solid var(--ink);
}
.day__head .num {
font-family: var(--font-poster); font-weight: 900;
font-size: 1.4rem;
letter-spacing: -0.02em;
}
.day__head .lbl {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.18em;
font-size: 0.74rem;
}
.day__head .date {
font-family: var(--font-accent); font-style: italic;
font-size: 0.86rem;
color: var(--paper-soft);
}
.day__body { padding: 0.9rem 1rem 1rem; display: grid; gap: 0.5rem; }
.day__row {
display: grid; grid-template-columns: 60px 1fr;
gap: 0.6rem; align-items: baseline;
padding-bottom: 0.4rem;
border-bottom: 1px dotted var(--ink-soft);
}
.day__row:last-child { border-bottom: none; padding-bottom: 0; }
.day__row .t {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.1em;
font-size: 0.74rem;
color: var(--clay);
}
.day__row .what {
font-size: 0.92rem;
color: var(--ink);
line-height: 1.35;
}
.day__row .what em { font-family: var(--font-accent); font-style: italic; color: var(--teal); }
/* Recurring strip — next 3 instances for weekly events */
.recurring-strip {
background: var(--paper-soft);
border-top: 2px solid var(--ink);
border-bottom: 3px solid var(--ink);
padding: 2.5rem var(--gutter) 3rem;
}
.recurring-strip__inner { max-width: var(--max); margin: 0 auto; }
.recurring-strip__head {
display: flex; align-items: end; justify-content: space-between;
gap: 1rem;
border-bottom: 2px solid var(--ink);
padding-bottom: 0.7rem;
margin-bottom: 1.5rem;
position: relative;
}
.recurring-strip__head::after {
content: '';
position: absolute; bottom: -8px; left: 0; right: 0;
height: 3px;
background: repeating-linear-gradient(90deg, var(--mustard) 0 8px, transparent 8px 14px);
}
.recurring-strip__eye {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.22em;
font-size: 0.74rem;
color: var(--clay);
margin-bottom: 0.4rem;
}
.recurring-strip__title {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 0.95;
}
.recurring-strip__title em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--teal); text-transform: none; }
.recurring-strip__note {
font-family: var(--font-accent); font-style: italic;
color: var(--ink-soft);
font-size: 0.92rem;
text-align: right;
}
.recurring-strip__grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
@media (max-width: 760px) { .recurring-strip__grid { grid-template-columns: 1fr; } }
.instance {
background: var(--paper);
border: 2px solid var(--ink);
box-shadow: 4px 4px 0 var(--paper-deep);
display: grid; grid-template-columns: 84px 1fr;
overflow: hidden;
transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.instance:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--mustard); }
.instance.is-this { border-color: var(--clay); box-shadow: 4px 4px 0 var(--mustard); }
.instance__date {
background: var(--paper-deep);
border-right: 1.5px dashed var(--ink-soft);
padding: 1rem 0.5rem;
text-align: center;
display: flex; flex-direction: column; justify-content: center;
}
.instance.is-this .instance__date { background: var(--clay); color: var(--paper); }
.instance__date .d {
font-family: var(--font-poster); font-weight: 900;
font-size: 1.7rem; line-height: 1;
color: var(--ink);
}
.instance.is-this .instance__date .d { color: var(--paper); }
.instance__date .m {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.14em;
font-size: 0.66rem;
margin-top: 0.25rem;
color: var(--clay);
}
.instance.is-this .instance__date .m { color: var(--mustard); }
.instance__date .dw {
font-family: var(--font-accent); font-style: italic;
font-size: 0.74rem;
color: var(--ink-soft);
margin-top: 0.1rem;
}
.instance.is-this .instance__date .dw { color: var(--paper-soft); }
.instance__body { padding: 0.9rem 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.instance__lbl {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.16em;
font-size: 0.66rem;
color: var(--clay);
}
.instance__what {
font-family: var(--font-poster); font-weight: 800;
text-transform: uppercase;
font-size: 1rem; line-height: 1.1;
}
.instance__what em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--teal); text-transform: none; }
.instance__when {
font-family: var(--font-accent); font-style: italic;
font-size: 0.84rem; color: var(--ink-soft);
}
/* Event gallery — distinct from .gallery on single-business via class rename */
.event-gallery {
background: var(--paper);
padding: 4rem var(--gutter);
border-top: 2px solid var(--ink);
border-bottom: 3px solid var(--ink);
}
.event-gallery__inner { max-width: var(--max); margin: 0 auto; }
.event-gallery__head {
display: flex; align-items: end; justify-content: space-between;
gap: 1.5rem;
border-bottom: 2px solid var(--ink);
padding-bottom: 0.7rem;
margin-bottom: 2.2rem;
position: relative;
}
.event-gallery__head::after {
content: '';
position: absolute; bottom: -8px; left: 0; right: 0;
height: 3px;
background: repeating-linear-gradient(90deg, var(--clay) 0 8px, transparent 8px 14px);
}
.event-gallery__eye {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.22em;
font-size: 0.74rem;
color: var(--clay);
margin-bottom: 0.4rem;
}
.event-gallery__title {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 0.9;
}
.event-gallery__title em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--teal); text-transform: none; }
.event-gallery__note {
font-family: var(--font-accent); font-style: italic;
color: var(--ink-soft);
font-size: 0.92rem;
text-align: right;
max-width: 32ch;
}
.event-gallery__grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem;
}
@media (max-width: 900px) { .event-gallery__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .event-gallery__grid { grid-template-columns: 1fr; } }
/* Event-scoped polaroid — different rotations/shadow than single-business polaroid */
.event-gallery .polaroid {
background: var(--paper-soft);
border: 2px solid var(--ink);
box-shadow: 5px 5px 0 var(--paper-deep);
padding: 0.65rem 0.65rem 0.4rem;
display: block;
position: relative;
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.event-gallery .polaroid:nth-child(4n+1) { transform: rotate(-1.2deg); }
.event-gallery .polaroid:nth-child(4n+2) { transform: rotate(0.8deg); }
.event-gallery .polaroid:nth-child(4n+3) { transform: rotate(-0.5deg); }
.event-gallery .polaroid:nth-child(4n+4) { transform: rotate(1.4deg); }
.event-gallery .polaroid:hover {
transform: rotate(0) translate(-3px, -3px);
box-shadow: 9px 9px 0 var(--mustard);
z-index: 2;
}
.event-gallery .polaroid img {
aspect-ratio: 1/1;
width: 100%; height: auto; object-fit: cover;
filter: brightness(0.9) contrast(1.04) saturate(0.85);
border: 1.5px solid var(--ink);
}
.event-gallery .polaroid__cap {
font-family: var(--font-accent); font-style: italic;
font-size: 0.88rem;
color: var(--ink-soft);
padding: 0.7rem 0.3rem 0.4rem;
text-align: center;
line-height: 1.35;
}
.event-gallery .polaroid__cap strong {
font-family: var(--font-poster); font-weight: 800; font-style: normal;
text-transform: uppercase; letter-spacing: 0.14em;
font-size: 0.7rem;
color: var(--clay);
display: block;
margin-bottom: 0.2rem;
}
.event-gallery .polaroid__cap .credit {
display: block;
font-family: var(--font-poster); font-weight: 600; font-style: normal;
text-transform: uppercase; letter-spacing: 0.12em;
font-size: 0.6rem;
color: var(--ink-soft);
opacity: 0.7;
margin-top: 0.25rem;
}
.event-gallery__foot {
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px dashed var(--ink);
display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
font-family: var(--font-accent); font-style: italic;
font-size: 0.88rem;
color: var(--ink-soft);
}
.event-gallery__foot a {
font-family: var(--font-poster); font-weight: 700; font-style: normal;
text-transform: uppercase; letter-spacing: 0.14em;
font-size: 0.74rem;
color: var(--clay);
border-bottom: 1.5px solid var(--clay);
padding-bottom: 1px;
}
/* Event where — map block (teal background variant) */
.event-where {
background: var(--teal); color: var(--paper);
padding: 4rem var(--gutter);
border-top: 3px solid var(--ink);
border-bottom: 3px solid var(--ink);
}
.event-where__inner {
max-width: var(--max); margin: 0 auto;
display: grid; grid-template-columns: 1fr 1.3fr; gap: 3rem; align-items: center;
}
@media (max-width: 900px) { .event-where__inner { grid-template-columns: 1fr; gap: 2rem; } }
.event-where__copy { display: flex; flex-direction: column; gap: 0.8rem; }
.event-where__eye {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.22em;
font-size: 0.78rem;
color: var(--mustard);
}
.event-where__title {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(2rem, 4vw, 3rem); line-height: 0.9;
}
.event-where__title em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--mustard); text-transform: none; }
.event-where__addr {
font-family: var(--font-accent); font-style: italic;
font-size: 1.1rem; color: var(--paper-soft); line-height: 1.5;
}
.event-where__notes {
font-size: 0.94rem; color: var(--paper-soft); line-height: 1.6;
border-top: 1px dashed var(--mustard);
padding-top: 1rem; margin-top: 0.6rem;
}
.event-where__actions { display: flex; gap: 0.8rem; margin-top: 0.6rem; flex-wrap: wrap; }
.event-where__visual {
background: var(--paper);
border: 3px solid var(--paper);
box-shadow: 8px 8px 0 var(--clay);
overflow: hidden;
}
.event-where__visual svg { display: block; width: 100%; height: auto; background: var(--paper); }
/* Related event tickets */
.rticket {
background: var(--paper);
color: var(--ink);
border: 2px solid var(--ink);
box-shadow: 5px 5px 0 var(--mustard);
display: grid; grid-template-columns: 100px 1fr;
overflow: hidden;
transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.rticket:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--mustard); }
.rticket__stub {
background: var(--clay); color: var(--paper);
padding: 1rem 0.5rem;
text-align: center;
border-right: 2px dashed var(--ink);
display: flex; flex-direction: column; justify-content: center;
position: relative;
}
.rticket__stub::before,
.rticket__stub::after {
content: ''; position: absolute; right: -10px;
width: 16px; height: 16px;
background: var(--paper);
border: 2px solid var(--ink);
border-radius: 50%;
}
.rticket__stub::before { top: -10px; }
.rticket__stub::after { bottom: -10px; }
.rticket__stub .d { font-family: var(--font-poster); font-weight: 900; font-size: 2rem; line-height: 1; }
.rticket__stub .m {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.16em;
font-size: 0.66rem; margin-top: 0.2rem;
}
.rticket__body { padding: 0.9rem 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.rticket__where {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.14em;
font-size: 0.66rem; color: var(--clay);
}
.rticket__title {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: 1.1rem; line-height: 1.05;
}
.rticket__title em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--teal); text-transform: none; }
.rticket__when { font-family: var(--font-accent); font-style: italic; font-size: 0.86rem; color: var(--ink-soft); }
/* ============================================================
============================================================
DIRECTORY — Category archive (mustard hero variant)
Source: app/public/mockups/directory-category-postershop.html
============================================================
============================================================ */
.cat-hero {
background: var(--mustard);
color: var(--ink);
padding: 3rem var(--gutter) 3.5rem;
border-bottom: 3px solid var(--ink);
position: relative;
}
.cat-hero::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
background: repeating-linear-gradient(90deg,
var(--clay) 0 14px, transparent 14px 22px,
var(--ink) 22px 36px, transparent 36px 44px);
}
.cat-hero__inner {
max-width: var(--max); margin: 0 auto;
display: grid; grid-template-columns: 1.6fr 1fr; gap: 3rem; align-items: end;
}
.cat-hero__main { display: flex; flex-direction: column; gap: 0.9rem; }
.cat-hero__eyebrow {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.22em;
font-size: 0.78rem; color: var(--clay);
}
.cat-hero__title {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 0.9;
letter-spacing: -0.02em;
color: var(--ink);
text-shadow: 3px 3px 0 var(--paper);
}
.cat-hero__title em {
font-family: var(--font-accent); font-style: italic;
font-weight: 400; color: var(--teal-deep);
text-transform: none;
text-shadow: 2px 2px 0 var(--paper-deep);
}
.cat-hero__lede {
font-family: var(--font-accent); font-style: italic;
font-size: 1.1rem; max-width: 56ch;
color: var(--ink-soft);
line-height: 1.5;
}
.cat-hero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.cat-hero__stat {
background: var(--paper);
border: 2px solid var(--ink);
box-shadow: 4px 4px 0 var(--ink);
padding: 0.9rem 1rem;
display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: center;
}
.cat-hero__stat .num {
font-family: var(--font-poster); font-weight: 900;
font-size: 2.2rem; line-height: 1;
color: var(--clay);
}
.cat-hero__stat .lbl-stack { display: flex; flex-direction: column; gap: 0.1rem; }
.cat-hero__stat .lbl {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.14em;
font-size: 0.74rem; color: var(--ink);
}
.cat-hero__stat .sub {
font-family: var(--font-accent); font-style: italic;
font-size: 0.78rem; color: var(--ink-soft);
}
@media (max-width: 900px) {
.cat-hero__inner { grid-template-columns: 1fr; gap: 1.6rem; align-items: start; }
}
/* Editorial intro — paper band */
.cat-intro {
background: var(--paper);
padding: 3.5rem var(--gutter);
border-bottom: 2px solid var(--ink);
position: relative;
}
.cat-intro::before {
content: ''; position: absolute; bottom: -8px; left: 50%;
transform: translateX(-50%);
width: 90px; height: 3px;
background: repeating-linear-gradient(90deg, var(--mustard) 0 8px, transparent 8px 14px);
}
.cat-intro__inner {
max-width: 760px; margin: 0 auto;
display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: start;
}
.cat-intro__seal {
width: 70px; height: 70px;
background: var(--clay); color: var(--paper);
border: 2px solid var(--ink);
border-radius: 50%;
display: grid; place-items: center;
font-family: var(--font-poster); font-weight: 900;
font-size: 1.6rem;
flex: none;
box-shadow: 4px 4px 0 var(--ink);
}
.cat-intro__eye {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.22em;
font-size: 0.74rem; color: var(--clay);
margin-bottom: 0.5rem;
}
.cat-intro__head {
font-family: var(--font-poster); font-weight: 800;
text-transform: uppercase; letter-spacing: -0.005em;
font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1;
margin-bottom: 0.9rem;
}
.cat-intro__head em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--teal); text-transform: none; }
.cat-intro__prose p {
font-size: 1.04rem; line-height: 1.65;
color: var(--ink); margin-bottom: 0.9rem;
}
.cat-intro__prose p:last-child { margin-bottom: 0; }
.cat-intro__prose em {
font-family: var(--font-accent); font-style: italic;
color: var(--ink-soft);
}
@media (max-width: 700px) {
.cat-intro__inner { grid-template-columns: 1fr; gap: 1.2rem; }
.cat-intro__seal { width: 56px; height: 56px; }
}
/* ============================================================
"Also browse" cross-link strip — used by both cat + feature
============================================================ */
.also {
background: var(--ink);
color: var(--paper);
padding: 4rem var(--gutter);
border-top: 3px solid var(--ink);
border-bottom: 3px solid var(--ink);
}
.also__inner { max-width: var(--max); margin: 0 auto; }
.also__head { text-align: center; margin-bottom: 2rem; }
.also__eye {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.22em;
font-size: 0.74rem; color: var(--mustard);
margin-bottom: 0.5rem;
}
.also__title {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 0.95;
}
.also__title em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--mustard); text-transform: none; }
.also__grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
@media (max-width: 900px) { .also__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .also__grid { grid-template-columns: 1fr; } }
/* Category card (in "Also browse" on category page) */
.cat-card {
background: var(--paper-soft);
color: var(--ink);
border: 2px solid var(--paper);
padding: 1.4rem 1.2rem 1.2rem;
display: flex; flex-direction: column; gap: 0.5rem;
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.cat-card:hover {
transform: translate(-3px, -3px);
box-shadow: 6px 6px 0 var(--mustard);
}
.cat-card__seal {
width: 36px; height: 36px;
background: var(--clay); color: var(--paper);
border: 2px solid var(--ink);
border-radius: 50%;
display: grid; place-items: center;
font-family: var(--font-poster); font-weight: 900;
font-size: 0.9rem;
margin-bottom: 0.4rem;
}
.cat-card__seal.eat-drink { background: var(--clay); }
.cat-card__seal.stay { background: var(--teal); color: var(--paper); }
.cat-card__seal.do-see { background: var(--forest); color: var(--paper); }
.cat-card__seal.shop { background: var(--mustard-deep); color: var(--paper); }
.cat-card__seal.services { background: var(--ink); color: var(--mustard); }
.cat-card__name {
font-family: var(--font-poster); font-weight: 900;
text-transform: uppercase;
font-size: 1.05rem; line-height: 1.05;
letter-spacing: -0.005em;
color: var(--ink);
}
.cat-card__name em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--teal); text-transform: none; }
.cat-card__count {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.14em;
font-size: 0.68rem;
color: var(--clay);
}
.cat-card__tag {
font-family: var(--font-accent); font-style: italic;
font-size: 0.86rem;
color: var(--ink-soft);
margin-top: 0.2rem;
line-height: 1.4;
}
/* Filterbar — zero-count chip styling */
.chip.is-zero { opacity: 0.5; cursor: default; }
.chip.is-zero:hover { transform: none; box-shadow: none; }
/* Category/feature taxonomy pages: override the global .filterbar layout
(the global one is 2-column grid for the main directory, with a
.filterbar__filters wrapper). On these pages the label + chips live
directly inside .filterbar__inner as siblings, so we need flex-wrap. */
.tax-business_category .filterbar,
.tax-business_feature .filterbar {
background: var(--paper-deep);
position: sticky; top: 78px; z-index: 40;
}
.tax-business_category .filterbar__inner,
.tax-business_feature .filterbar__inner {
padding: 1rem var(--gutter);
display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
}
.tax-business_category .filterbar__label,
.tax-business_feature .filterbar__label {
font-family: var(--font-poster); font-weight: 800;
text-transform: uppercase; letter-spacing: 0.18em;
font-size: 0.7rem; color: var(--ink-soft);
display: flex; align-items: center; gap: 0.5rem;
}
.tax-business_category .filterbar__label::before,
.tax-business_feature .filterbar__label::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: var(--clay);
}
.tax-business_feature .filterbar__label::before { background: var(--forest); }
.tax-business_category .chip,
.tax-business_feature .chip {
padding: 0.35rem 0.85rem;
font-size: 0.74rem;
letter-spacing: 0.1em;
}
.tax-business_category .chip.is-active,
.tax-business_feature .chip.is-active {
background: var(--ink); color: var(--mustard);
box-shadow: 2px 2px 0 var(--clay);
}
.tax-business_feature .chip.is-active {
box-shadow: 2px 2px 0 var(--forest);
}
.tax-business_category .chip .count,
.tax-business_feature .chip .count {
font-family: var(--font-poster); font-weight: 600;
font-size: 0.66rem;
padding: 0.05rem 0.4rem;
background: var(--paper-deep); color: var(--ink-soft);
border: 1px solid var(--ink-soft);
width: auto; height: auto; border-radius: 0;
}
.tax-business_category .chip.is-active .count {
background: var(--clay); color: var(--paper); border-color: var(--paper-soft);
}
.tax-business_feature .chip.is-active .count {
background: var(--forest); color: var(--paper); border-color: var(--mustard);
}
/* Sub-category second row: thin top divider, slightly smaller pills */
.tax-business_category .filterbar__inner--subcat {
border-top: 1px dashed var(--ink);
margin-top: 0.6rem;
padding-top: 0.7rem;
}
.tax-business_category .filterbar__inner--subcat .filterbar__label::before {
background: var(--teal);
}
.tax-business_category .filterbar__inner--subcat .chip {
font-size: 0.7rem;
padding: 0.3rem 0.7rem;
letter-spacing: 0.08em;
}
.tax-business_category .filterbar__inner--subcat .chip.is-active {
background: var(--teal); color: var(--mustard);
box-shadow: 2px 2px 0 var(--ink);
}
.tax-business_category .filterbar__inner--subcat .chip.is-active .count {
background: var(--teal-deep); color: var(--paper); border-color: var(--mustard);
}
/* Hide the long tail behind a "+ N more" expander. */
.tax-business_category .filterbar__inner--subcat .chip.is-extra { display: none; }
.tax-business_category .filterbar__inner--subcat.is-expanded .chip.is-extra { display: inline-flex; }
/* ============================================================
CATEGORY PAGE FILTER BAR — Option O
Town dropdown + top-5 type pills + "more" dropdown, strict one line
============================================================ */
.cat-bar-wrap {
padding: 1rem var(--gutter);
}
.cat-bar {
max-width: var(--max);
margin: 0 auto;
background: var(--paper-deep);
border: 2px solid var(--ink);
box-shadow: 6px 6px 0 var(--paper-soft);
padding: 0.8rem 1.1rem;
display: flex;
align-items: center;
gap: 0.9rem;
flex-wrap: nowrap;
white-space: nowrap;
overflow-x: clip;
overflow-y: visible;
min-width: 0;
}
.cat-bar > * { flex: none; position: relative; }
.cat-bar__pills {
display: flex; gap: 0.4rem; align-items: center;
min-width: 0; flex: 1 1 auto;
overflow-x: clip;
overflow-y: visible;
}
.cat-bar__lbl {
font-family: var(--font-poster); font-weight: 800;
text-transform: uppercase; letter-spacing: 0.16em;
font-size: 0.68rem; color: var(--ink-soft);
display: inline-flex; align-items: center; gap: 0.45rem;
}
.cat-bar__lbl::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: var(--clay);
}
.cat-bar__lbl--type::before { background: var(--teal); }
.cat-bar__town {
font-family: var(--font-poster); font-weight: 800;
text-transform: uppercase; letter-spacing: 0.1em;
font-size: 0.74rem;
padding: 0.38rem 1.9rem 0.38rem 0.75rem;
background: var(--ink); color: var(--mustard);
border: 2px solid var(--ink);
cursor: pointer;
appearance: none;
box-shadow: 2px 2px 0 var(--clay);
background-image:
linear-gradient(45deg, transparent 50%, var(--mustard) 50%),
linear-gradient(135deg, var(--mustard) 50%, transparent 50%);
background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%;
background-size: 5px 5px;
background-repeat: no-repeat;
}
.cat-bar__div {
width: 1px; height: 22px;
background: var(--ink); opacity: 0.2;
}
.cat-bar .tp {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
font-size: 0.68rem;
padding: 0.28rem 0.6rem;
background: var(--paper);
color: var(--ink);
border: 2px solid var(--ink);
display: inline-flex; align-items: baseline; gap: 0.3rem;
cursor: pointer;
transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.cat-bar .tp:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--ink); }
.cat-bar .tp .n {
font-weight: 600;
font-size: 0.62rem;
opacity: 0.6;
}
.cat-bar .tp.is-active {
background: var(--teal); color: var(--mustard);
box-shadow: 2px 2px 0 var(--ink);
}
.cat-bar .tp.is-active:hover { box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px); }
.cat-bar .tp.is-active .n { opacity: 0.9; color: var(--paper-soft); }
.cat-bar__more {
font-family: var(--font-poster); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
font-size: 0.66rem;
padding: 0.26rem 1.5rem 0.26rem 0.55rem;
background: transparent; color: var(--clay);
border: 1.5px dashed var(--clay);
cursor: pointer;
appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, var(--clay) 50%),
linear-gradient(135deg, var(--clay) 50%, transparent 50%);
background-position: calc(100% - 10px) 50%, calc(100% - 6px) 50%;
background-size: 4px 4px;
background-repeat: no-repeat;
}
.cat-bar__more:hover { background-color: rgba(184, 70, 43, 0.08); }
/* On narrow screens, let the bar scroll horizontally so it never breaks the one-line contract. */
@media (max-width: 760px) {
.cat-bar { overflow-x: auto; padding: 0.7rem 0.8rem; }
}
/* ============================================================
CATEGORY BAR — styled dropdowns (replaces native