/* ==========================================================
THE SURPLUS STORE — Brand Guidelines 2026
Pitch Pine #3C341F · Raw Canvas #F5F2EB · Desert Khaki #C5AA7F
Woodland Drab #475C3E · Faded Fatigue #758469 · Bunker Olive #5A5542
Vintage Signal #A8573C
Type: Georgia (display) · system sans (body) · Courier (label)
========================================================== */
:root {
--pitch-pine: #3C341F;
--pitch-pine-95: rgba(60, 52, 31, 0.95);
--raw-canvas: #F5F2EB;
--raw-canvas-warm: #EFE9DC;
--desert-khaki: #7B5D2E; /* deep bronze for small text on cream — WCAG AA (~5:1). Was #9C7B47 (3.5:1, failed). */
--desert-khaki-light: #C5AA7F; /* original tan, kept for use on dark backgrounds where it reads well */
--desert-khaki-soft: rgba(197, 170, 127, 0.18);
--woodland-drab: #475C3E;
--faded-fatigue: #5E6B54; /* darkened from #758469 (3.6:1) so small muted text on cream clears AA (~5:1). */
--bunker-olive: #5A5542;
--vintage-signal: #A8573C;
--paper-shadow: rgba(60, 52, 31, 0.08);
--font-display: Georgia, 'Times New Roman', serif;
--font-body: Corbel, 'Lucida Sans Unicode', 'Lucida Grande', -apple-system, sans-serif;
--font-label: 'Courier New', Courier, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%; /* iOS: don't auto-inflate text in landscape */
text-size-adjust: 100%;
}
/* Respect users who ask the OS for reduced motion: no auto-smooth scroll. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* Kill the grey flash box iOS/Android paint over tapped links and buttons;
the design already supplies its own :active / focus states. */
a, button, .btn, .header-cta, .mobile-toggle, [role="button"], summary {
-webkit-tap-highlight-color: rgba(168, 87, 60, 0.18); /* faint vintage-signal */
}
/* Interactive controls shouldn't double-tap-zoom or wait out the 300ms delay. */
button, .btn, .header-cta, .mobile-toggle, [role="button"], input[type="search"], label {
touch-action: manipulation;
}
/* Media never forces a horizontal scrollbar on a narrow phone. */
img, svg, canvas, video { max-width: 100%; }
body {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.6;
color: var(--pitch-pine);
background: var(--raw-canvas);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
/* Brand brief explicitly forbids paper grain / texture overlays.
The texture should come from photography, not the chrome. */
a { color: inherit; text-decoration: none; }
/* On dark backgrounds the original lighter khaki reads better than the
darkened light-bg version. Scope the variable so every nested element
(eyebrows, italic accents, hover states) inherits the right tone. */
.util-bar,
.story-section,
.page-hero,
.hero,
.contact-block,
.ask-prompt,
.brand-hero,
.cat-card,
footer,
.mobile-menu,
.campaign-card:hover {
--desert-khaki: var(--desert-khaki-light);
}
/* Skip link — visible only when focused */
.skip-link {
position: absolute;
left: -9999px;
z-index: 1000;
background: var(--pitch-pine);
color: var(--raw-canvas);
font-family: var(--font-label);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 12px 18px;
}
.skip-link:focus {
left: 16px;
top: 12px;
outline: 2px solid var(--vintage-signal);
}
/* Keyboard focus ring for card-style controls made focusable via JS */
.cat-card:focus-visible,
.campaign-card:focus-visible,
.brand-tile:focus-visible,
.loc-card:focus-visible,
.dig-bin:focus-visible,
.floor-zone:focus-visible {
outline: 2.5px solid var(--vintage-signal);
outline-offset: 3px;
}
/* ===== TOP UTILITY BAR ===== */
.util-bar {
background: var(--pitch-pine);
color: var(--raw-canvas);
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 8px 0;
position: relative;
z-index: 100;
}
.util-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
}
.util-bar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.util-bar .pipe { opacity: 0.4; margin: 0 12px; }
/* Live "open / closed" status pill */
.util-right {
display: inline-flex;
align-items: center;
}
.live-pill {
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(71, 92, 62, 0.25);
border: 1px solid rgba(117, 132, 105, 0.55);
padding: 5px 12px;
min-height: 24px; /* WCAG 2.5.8 target size — on phones this is the only tap target left in the util bar */
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--raw-canvas);
line-height: 1;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
text-transform: inherit;
transition: background 0.15s ease, border-color 0.15s ease;
}
.live-pill:hover { background: rgba(71, 92, 62, 0.42); }
.live-pill.is-closed:hover { background: rgba(168, 87, 60, 0.32); }
.live-pill:focus-visible { outline: 2px solid var(--raw-canvas); outline-offset: 2px; }
.live-pill.is-closed {
background: rgba(168, 87, 60, 0.18);
border-color: rgba(168, 87, 60, 0.55);
}
.live-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #88B364;
box-shadow: 0 0 0 0 rgba(136, 179, 100, 0.6);
animation: live-pulse 2.4s ease infinite;
flex-shrink: 0;
}
.live-pill.is-closed .live-dot {
background: var(--vintage-signal);
animation: none;
box-shadow: none;
}
@keyframes live-pulse {
0% { box-shadow: 0 0 0 0 rgba(136, 179, 100, 0.5); }
70% { box-shadow: 0 0 0 6px rgba(136, 179, 100, 0); }
100% { box-shadow: 0 0 0 0 rgba(136, 179, 100, 0); }
}
/* ===== HEADER ===== */
.site-header {
background: var(--raw-canvas);
border-bottom: 1px solid var(--bunker-olive);
position: sticky;
top: 0;
z-index: 90;
box-shadow: 0 2px 0 var(--paper-shadow);
}
.header-inner {
max-width: 1280px;
margin: 0 auto;
padding: 18px 32px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 40px;
}
.logo {
display: flex;
flex-direction: column;
line-height: 1;
}
.logo-mark {
font-family: var(--font-display);
font-weight: 700;
font-size: 28px;
color: var(--pitch-pine);
letter-spacing: -0.01em;
text-transform: uppercase;
}
.logo-mark em {
color: var(--desert-khaki);
font-style: italic;
}
.logo-rule {
height: 1px;
background: var(--bunker-olive);
margin: 6px 0 4px;
width: 100%;
}
.logo-label {
font-family: var(--font-label);
font-size: 8.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bunker-olive);
}
.nav-primary {
display: flex;
align-items: center;
gap: 2px;
justify-content: center;
flex-wrap: nowrap;
}
/* Top-level nav links: direct children of .nav-primary, plus the
"Products" trigger which sits inside .nav-item. Dropdown items
are styled separately further down. */
.nav-primary > a,
.nav-primary > .nav-item > a {
font-family: var(--font-label);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 10px 14px;
color: var(--pitch-pine);
transition: color 0.18s ease, background 0.18s ease;
position: relative;
cursor: pointer;
white-space: nowrap;
}
.nav-primary > a::after,
.nav-primary > .nav-item > a::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: 6px;
height: 1px;
background: var(--desert-khaki);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.22s ease;
}
.nav-primary > a:hover,
.nav-primary > .nav-item > a:hover {
color: var(--woodland-drab);
}
.nav-primary > a:hover::after,
.nav-primary > .nav-item:hover > a::after {
transform: scaleX(0.6);
}
.nav-primary > a.active,
.nav-primary > .nav-item > a.active {
color: var(--woodland-drab);
}
.nav-primary > a.active::after,
.nav-primary > .nav-item > a.active::after {
transform: scaleX(1);
}
/* Dropdown for Products */
.nav-item {
position: relative;
display: flex;
align-items: center;
}
.dropdown {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: var(--raw-canvas);
border: 1px solid var(--bunker-olive);
box-shadow: 0 12px 32px var(--paper-shadow);
padding: 24px 28px;
min-width: 540px;
max-width: 90vw;
display: none;
grid-template-columns: 1fr 1fr;
gap: 4px 32px;
z-index: 100;
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown { display: grid; } /* keyboard users can open the mega-menu, not just mouse hover */
.dropdown-section-label {
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--desert-khaki);
text-transform: uppercase;
padding: 8px 0 6px;
border-bottom: 1px solid var(--bunker-olive);
margin-bottom: 8px;
grid-column: 1 / -1;
}
.dropdown a {
font-family: var(--font-body);
font-size: 14px;
letter-spacing: 0;
text-transform: none;
padding: 6px 0;
color: var(--pitch-pine);
border-bottom: 1px solid transparent;
}
.dropdown a:hover {
color: var(--woodland-drab);
background: transparent;
}
.header-actions {
display: flex;
align-items: center;
gap: 12px;
}
.header-cta {
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--pitch-pine);
padding: 12px 18px;
border: 1px solid var(--pitch-pine);
transition: all 0.18s ease;
cursor: pointer;
background: transparent;
}
.header-cta:hover {
background: var(--pitch-pine);
color: var(--raw-canvas);
}
.header-cta.primary {
background: var(--pitch-pine);
color: var(--raw-canvas);
}
.header-cta.primary:hover {
background: var(--woodland-drab);
border-color: var(--woodland-drab);
}
/* Mobile menu button */
.mobile-toggle {
display: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
border: 1px solid var(--pitch-pine);
color: var(--pitch-pine);
padding: 8px 12px;
cursor: pointer;
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.mobile-toggle:hover,
.mobile-toggle:active {
background: var(--pitch-pine);
color: var(--raw-canvas);
}
/* ===== PAGE CONTAINER & SHARED ===== */
main { position: relative; z-index: 2; }
/* In the WordPress port the active page is server-rendered (not JS-toggled),
so the page must always be visible. The original SPA hid inactive pages
and faded the active one in from opacity:0 via the pageIn animation; if
that animation never fires here, content stays stuck invisible. Force the
page visible and only animate when motion is acceptable. */
.page { display: block; opacity: 1; }
.page.active { display: block; }
@media (prefers-reduced-motion: no-preference) {
.page.active { animation: pageIn 0.4s ease; }
}
@keyframes pageIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
}
.container-narrow {
max-width: 920px;
margin: 0 auto;
padding: 0 32px;
}
.eyebrow {
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--desert-khaki);
display: inline-flex;
align-items: center;
gap: 12px;
}
.eyebrow::before {
content: "";
width: 24px;
height: 1px;
background: var(--desert-khaki);
}
.eyebrow.no-rule::before { display: none; }
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 700;
color: var(--pitch-pine);
line-height: 1.05;
letter-spacing: -0.01em;
}
h1 { font-size: clamp(48px, 7vw, 96px); }
h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.1; }
h3 { font-size: clamp(22px, 2.5vw, 30px); line-height: 1.2; }
h4 { font-size: 18px; line-height: 1.3; }
em.accent, .accent-italic {
color: var(--desert-khaki);
font-style: italic;
}
p { color: var(--bunker-olive); max-width: 60ch; }
p.lead { font-size: 18px; line-height: 1.5; color: var(--pitch-pine); }
.btn {
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 16px 28px;
display: inline-flex;
align-items: center;
gap: 12px;
border: 1px solid var(--pitch-pine);
background: transparent;
color: var(--pitch-pine);
cursor: pointer;
transition: all 0.2s ease;
}
.btn:hover { background: var(--pitch-pine); color: var(--raw-canvas); }
.btn.primary { background: var(--pitch-pine); color: var(--raw-canvas); }
.btn.primary:hover { background: var(--woodland-drab); border-color: var(--woodland-drab); }
.btn.signal { border-color: var(--vintage-signal); color: var(--vintage-signal); }
.btn.signal:hover { background: var(--vintage-signal); color: var(--raw-canvas); }
.btn .arrow {
width: 16px;
transition: transform 0.2s ease;
}
.btn:hover .arrow { transform: translateX(4px); }
/* ===== HOME — HERO ===== */
.hero {
position: relative;
min-height: 88vh;
display: grid;
grid-template-columns: 1.1fr 1fr;
align-items: stretch;
background: var(--pitch-pine);
color: var(--raw-canvas);
overflow: hidden;
}
.hero-content {
padding: 80px 64px 80px 64px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 2;
}
.hero-eyebrow {
color: var(--raw-canvas);
margin-bottom: 28px;
font-family: var(--font-label);
font-size: 13px;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.hero h1 {
color: var(--raw-canvas);
font-size: clamp(56px, 8vw, 112px);
margin-bottom: 8px;
animation: heroLineIn 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero h1 em {
color: var(--desert-khaki);
font-style: italic;
display: block;
animation-delay: 0.18s;
}
@keyframes heroLineIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-rule {
width: 80px;
height: 1px;
background: var(--desert-khaki);
margin: 36px 0 24px;
}
.hero-sub {
color: var(--raw-canvas);
font-size: 17px;
max-width: 44ch;
margin-bottom: 40px;
opacity: 0.92;
}
.hero-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.hero-actions .btn {
border-color: var(--raw-canvas);
color: var(--raw-canvas);
}
.hero-actions .btn:hover {
background: var(--raw-canvas);
color: var(--pitch-pine);
}
.hero-actions .btn.primary {
background: var(--desert-khaki);
border-color: var(--desert-khaki);
color: var(--pitch-pine);
}
.hero-actions .btn.primary:hover {
background: var(--raw-canvas);
border-color: var(--raw-canvas);
color: var(--pitch-pine);
}
.hero-meta {
margin-top: 56px;
display: flex;
gap: 48px;
font-family: var(--font-label);
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.hero-meta div { color: var(--raw-canvas); text-align: center; }
.hero-meta strong {
display: block;
color: var(--desert-khaki);
font-size: 28px;
font-family: var(--font-display);
font-weight: 700;
letter-spacing: 0;
margin-bottom: 6px;
}
.hero-image {
position: relative;
background-color: var(--bunker-olive);
background-image: url("../images/hero.jpg");
background-size: cover;
background-position: left center;
background-repeat: no-repeat;
overflow: hidden;
}
.hero-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(60, 52, 31, 0.55) 0%, rgba(60, 52, 31, 0.1) 40%, transparent 100%);
}
.hero-stamp {
position: absolute;
bottom: 32px;
right: 32px;
width: 130px;
height: 130px;
border: 1px solid var(--desert-khaki);
border-radius: 50%;
color: var(--raw-canvas);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: var(--font-label);
font-size: 9px;
letter-spacing: 0.22em;
text-align: center;
z-index: 3;
background: rgba(60, 52, 31, 0.5);
-webkit-backdrop-filter: blur(2px); /* Safari / iOS needs the prefix */
backdrop-filter: blur(2px);
}
.hero-stamp strong {
display: block;
font-family: var(--font-display);
font-size: 28px;
font-style: italic;
color: var(--desert-khaki);
margin: 6px 0;
letter-spacing: 0;
font-weight: 400;
}
.hero-stamp { cursor: pointer; }
.hero-stamp.inspected { animation: stampspin 0.6s cubic-bezier(.3,1.4,.5,1); }
@keyframes stampspin { 0% { transform: rotate(0) scale(1); } 45% { transform: rotate(348deg) scale(1.12); } 100% { transform: rotate(360deg) scale(1); } }
/* ===== "GET ___ READY" CAMPAIGN STRIP ===== */
.campaign-strip {
background: var(--raw-canvas-warm);
padding: 80px 0;
border-bottom: 1px solid var(--bunker-olive);
}
.campaign-header {
display: flex;
justify-content: space-between;
align-items: end;
margin-bottom: 48px;
flex-wrap: wrap;
gap: 24px;
}
.campaign-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--bunker-olive);
border-left: 1px solid var(--bunker-olive);
}
.campaign-card {
padding: 36px 32px;
border-right: 1px solid var(--bunker-olive);
border-bottom: 1px solid var(--bunker-olive);
background: var(--raw-canvas);
transition: background 0.25s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.campaign-card:hover {
background: var(--pitch-pine);
color: var(--raw-canvas);
}
.campaign-card:hover h3,
.campaign-card:hover p,
.campaign-card:hover .campaign-num { color: var(--raw-canvas); }
.campaign-card:hover .campaign-arrow { color: var(--desert-khaki); transform: translateX(4px); }
.campaign-num {
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.2em;
color: var(--desert-khaki);
margin-bottom: 24px;
transition: color 0.25s ease;
}
.campaign-card h3 { margin-bottom: 12px; transition: color 0.25s ease; }
.campaign-card h3 em { color: var(--desert-khaki); font-style: italic; }
.campaign-card p {
font-size: 14px;
margin-bottom: 24px;
transition: color 0.25s ease;
}
.campaign-arrow {
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--pitch-pine);
transition: all 0.2s ease;
display: inline-block;
text-transform: uppercase;
}
/* ===== CATEGORIES OVERVIEW (HOME) ===== */
.categories {
padding: 100px 0;
background: var(--raw-canvas);
}
.section-head {
margin-bottom: 56px;
max-width: 720px;
}
.section-head .eyebrow { margin-bottom: 16px; }
.section-head h2 { margin-bottom: 20px; }
.cat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.cat-card {
background: var(--raw-canvas-warm);
border: 1px solid var(--bunker-olive);
aspect-ratio: 4 / 5;
display: flex;
flex-direction: column;
justify-content: end;
padding: 24px;
position: relative;
overflow: hidden;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px var(--paper-shadow); }
.cat-card .cat-img {
background-color: var(--bunker-olive);
position: absolute;
inset: 0;
background-color: var(--woodland-drab);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: transform 0.6s ease;
}
.cat-card:hover .cat-img { transform: scale(1.05); }
.cat-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 35%, rgba(60, 52, 31, 0.85) 100%);
}
.cat-card h3 {
position: relative;
z-index: 2;
color: var(--raw-canvas);
font-size: 22px;
}
.cat-card .cat-num {
position: relative;
z-index: 2;
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.2em;
color: var(--desert-khaki);
margin-bottom: 8px;
}
/* ===== INSTAGRAM STRIP ===== */
/* "What just came in" — Instagram feed, currently rendered as a
static image placeholder. See markup for the LightWidget swap. */
.insta-strip {
padding: 100px 0;
background: var(--raw-canvas);
border-top: 1px solid var(--bunker-olive);
border-bottom: 1px solid var(--bunker-olive);
}
.insta-head {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 32px;
margin-bottom: 40px;
padding-bottom: 28px;
border-bottom: 1px solid var(--bunker-olive);
}
.insta-head h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(28px, 4vw, 42px);
color: var(--pitch-pine);
line-height: 1.1;
}
.insta-head h2 em {
color: var(--desert-khaki);
font-style: italic;
}
.insta-head p {
max-width: 360px;
color: var(--bunker-olive);
font-size: 15px;
}
.insta-handle {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 14px;
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--woodland-drab);
border-bottom: 1px solid var(--desert-khaki);
padding-bottom: 4px;
transition: color 0.18s ease, border-color 0.18s ease;
}
.insta-handle:hover {
color: var(--vintage-signal);
border-color: var(--vintage-signal);
}
.insta-foot {
margin-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bunker-olive);
}
/* Static Instagram preview (used while live widget is disabled) */
.insta-preview {
display: block;
border: 1px solid var(--bunker-olive);
background: var(--raw-canvas-warm);
padding: 6px;
box-shadow: 0 4px 12px var(--paper-shadow);
position: relative;
cursor: pointer;
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.insta-preview:hover {
box-shadow: 0 10px 22px var(--paper-shadow);
transform: translateY(-2px);
}
.insta-preview-frame {
position: relative;
overflow: hidden;
line-height: 0;
}
.insta-preview-frame img {
display: block;
width: 100%;
height: auto;
transition: transform 0.55s ease;
}
.insta-preview:hover .insta-preview-frame img {
transform: scale(1.015);
}
.insta-preview-grid {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
pointer-events: none;
}
.insta-preview-grid span {
border-right: 1px solid rgba(245, 242, 235, 0.18);
}
.insta-preview-grid span:last-child { border-right: none; }
.insta-preview-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(60, 52, 31, 0) 55%, rgba(60, 52, 31, 0.55) 100%);
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding: 18px 22px;
opacity: 0;
transition: opacity 0.25s ease;
pointer-events: none;
}
.insta-preview:hover .insta-preview-overlay { opacity: 1; }
.insta-preview-cta {
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--raw-canvas);
background: rgba(60, 52, 31, 0.85);
padding: 10px 14px;
border: 1px solid var(--desert-khaki-light, #C5AA7F);
}
@media (max-width: 720px) {
.insta-head { grid-template-columns: 1fr; gap: 16px; }
.insta-head p { max-width: none; }
}
/* ===== STORY SECTION ===== */
.story-section {
background: var(--pitch-pine);
color: var(--raw-canvas);
padding: 120px 0;
position: relative;
overflow: hidden;
}
.story-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.story-section h2 {
color: var(--raw-canvas);
margin-bottom: 28px;
}
.story-section h2 em { color: var(--desert-khaki); }
.story-section p {
color: rgba(245, 242, 235, 0.85);
font-size: 17px;
margin-bottom: 20px;
max-width: 52ch;
}
.story-section .eyebrow { color: var(--raw-canvas); font-weight: 700; margin-bottom: 24px; }
.story-image {
aspect-ratio: 4 / 5;
background-image: url("../images/al_finer.jpg");
background-size: cover;
background-position: center top;
position: relative;
border: 1px solid var(--desert-khaki);
background-color: var(--bunker-olive);
}
.story-image::after {
content: "EST. 1947";
position: absolute;
top: 24px;
left: 24px;
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.2em;
color: var(--raw-canvas);
background: var(--pitch-pine);
padding: 6px 12px;
border: 1px solid var(--desert-khaki);
}
.story-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-top: 56px;
padding-top: 40px;
border-top: 1px solid rgba(197, 170, 127, 0.3);
}
/* Scoped to .story-stats so this big-number treatment never leaks into
the arcade page's HUD, which reuses the generic .stat class inline. */
.story-stats .stat strong {
display: block;
font-family: var(--font-display);
font-size: 48px;
color: var(--desert-khaki);
line-height: 1;
margin-bottom: 8px;
}
.story-stats .stat span {
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(245, 242, 235, 0.7);
}
/* ===== BRANDS STRIP ===== */
.brands-strip {
padding: 100px 0;
background: var(--raw-canvas);
border-top: 1px solid var(--bunker-olive);
}
.brands-head {
text-align: center;
margin-bottom: 56px;
}
.brands-head .eyebrow { justify-content: center; margin-bottom: 16px; }
.brands-head .eyebrow::before, .brands-head .eyebrow::after {
content: "";
width: 24px;
height: 1px;
background: var(--desert-khaki);
}
.brands-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0;
border-top: 1px solid var(--bunker-olive);
border-left: 1px solid var(--bunker-olive);
}
.brand-tile {
aspect-ratio: 1.6 / 1;
border-right: 1px solid var(--bunker-olive);
border-bottom: 1px solid var(--bunker-olive);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 700;
color: var(--pitch-pine);
font-size: 16px;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
padding: 8px;
background: var(--raw-canvas);
}
.brand-tile:hover {
background: var(--pitch-pine);
color: var(--desert-khaki);
}
.brand-tile.featured {
background: var(--raw-canvas-warm);
font-style: italic;
color: var(--desert-khaki);
}
.brand-tile.featured:hover {
background: var(--pitch-pine);
}
/* ===== LOCATIONS PREVIEW (HOME) ===== */
.locations-preview {
padding: 100px 0;
background: var(--raw-canvas-warm);
border-top: 1px solid var(--bunker-olive);
}
.loc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-top: 48px;
}
.loc-card {
background: var(--raw-canvas);
border: 1px solid var(--bunker-olive);
padding: 36px;
display: grid;
grid-template-columns: 140px 1fr;
gap: 28px;
align-items: start;
}
.loc-card .loc-img {
aspect-ratio: 1;
background-size: cover;
background-position: center;
border: 1px solid var(--bunker-olive);
}
.loc-card .loc-label {
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.2em;
color: var(--desert-khaki);
text-transform: uppercase;
margin-bottom: 8px;
}
.loc-card h3 {
font-size: 22px;
margin-bottom: 12px;
}
.loc-card .loc-detail {
font-family: var(--font-body);
font-size: 14px;
color: var(--bunker-olive);
line-height: 1.6;
}
.loc-card .loc-detail strong { color: var(--pitch-pine); display: block; }
.loc-card .loc-phone {
font-family: var(--font-label);
font-size: 13px;
color: var(--vintage-signal);
letter-spacing: 0.05em;
margin-top: 12px;
display: block;
}
/* ===== FAQ / WHAT PEOPLE ASK ===== */
.faq-section {
background: var(--raw-canvas-warm);
padding: 100px 0;
border-top: 1px solid var(--bunker-olive);
}
.faq-grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 56px;
align-items: start;
}
.faq-intro h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(30px, 4vw, 44px);
color: var(--pitch-pine);
line-height: 1.05;
margin-top: 18px;
}
.faq-intro h2 em {
color: var(--desert-khaki);
font-style: italic;
}
.faq-intro p {
margin-top: 18px;
color: var(--bunker-olive);
font-size: 15px;
line-height: 1.6;
}
.faq-list {
border-top: 1px solid var(--bunker-olive);
}
.faq-item {
border-bottom: 1px solid var(--bunker-olive);
padding: 22px 0;
cursor: pointer;
transition: padding 0.2s ease;
}
.faq-item:hover { padding-left: 8px; }
.faq-q {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: baseline;
}
.faq-q h4 {
font-family: var(--font-display);
font-weight: 700;
font-size: 19px;
color: var(--pitch-pine);
line-height: 1.3;
}
.faq-toggle {
font-family: var(--font-label);
font-size: 18px;
color: var(--desert-khaki);
transition: transform 0.22s ease;
line-height: 1;
}
.faq-a {
margin-top: 14px;
color: var(--bunker-olive);
font-size: 15px;
line-height: 1.65;
max-width: 640px;
}
.faq-a a {
color: var(--vintage-signal);
border-bottom: 1px solid var(--vintage-signal);
cursor: pointer;
}
details.faq-item summary {
list-style: none;
cursor: pointer;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item[open] .faq-toggle { transform: rotate(45deg); }
@media (max-width: 880px) {
.faq-grid { grid-template-columns: 1fr; gap: 32px; }
}
/* ===== PROMISE / VALUES STRIP ===== */
.promise {
padding: 100px 0;
background: var(--raw-canvas);
}
.promise-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
margin-top: 56px;
}
.promise-card {
border-top: 2px solid var(--desert-khaki);
padding-top: 24px;
}
.promise-card .promise-num {
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.2em;
color: var(--desert-khaki);
margin-bottom: 16px;
}
.promise-card h3 {
font-size: 24px;
margin-bottom: 12px;
}
.promise-card p {
font-size: 14px;
line-height: 1.6;
}
/* ===== HOVER REFINEMENTS =====
Centralized hover/focus states for every clickable element that was
previously missing one (or had one too subtle to read as interactive).
Kept in a single block so it's easy to find, audit, and tune later. */
/* "See all reviews on Google →" link in the reviews-section header */
.reviews-rating a {
transition: color 0.2s ease, text-decoration-thickness 0.2s ease;
}
.reviews-rating a:hover,
.reviews-rating a:focus-visible {
color: var(--vintage-signal);
text-decoration-thickness: 2px;
}
/* Home page location preview cards: whole card has onclick — needs to feel
clickable. Show pointer cursor, lift on hover, and shift the border. */
.loc-card {
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.loc-card:hover,
.loc-card:focus-within {
transform: translateY(-3px);
box-shadow: 0 12px 24px var(--paper-shadow);
border-color: var(--vintage-signal);
}
.loc-card:hover .loc-phone,
.loc-card:focus-within .loc-phone {
color: var(--vintage-signal);
}
/* Phone number on home page location cards */
.loc-phone {
transition: color 0.2s ease;
}
.loc-phone:hover,
.loc-phone:focus-visible {
color: var(--vintage-signal);
}
/* Big phone numbers on the Locations page region headers */
.loc-region-phone {
transition: color 0.2s ease;
}
.loc-region-phone:hover,
.loc-region-phone:focus-visible {
color: var(--vintage-signal);
}
/* Phone/email values inside contact-block widgets (multiple pages) */
a.contact-value {
transition: color 0.2s ease, text-decoration-color 0.2s ease;
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 4px;
}
a.contact-value:hover,
a.contact-value:focus-visible {
color: var(--desert-khaki-light);
text-decoration-color: var(--desert-khaki-light);
}
/* FAQ summary rows are clickable to expand — needs a visible hover cue */
.faq-q {
transition: background-color 0.2s ease;
}
.faq-q:hover {
background-color: rgba(197, 170, 127, 0.08);
}
.faq-q:hover .faq-toggle {
color: var(--vintage-signal);
}
.faq-toggle {
transition: color 0.2s ease, transform 0.2s ease;
}
/* Strengthen the existing .insta-handle hover. Already changes color, but
adding a subtle right-shift makes the arrow feel like it's leading you in. */
.insta-handle {
transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.insta-handle:hover,
.insta-handle:focus-visible {
transform: translateX(3px);
}
/* Desert-khaki accented button variant. Replaces the previous inline-styled
"Read the Full Story" CTA so its hover state actually fires.
(Inline styles override CSS hovers — that was the bug.) */
.btn.btn-accent {
border-color: var(--desert-khaki);
color: var(--desert-khaki);
background: transparent;
}
.btn.btn-accent:hover,
.btn.btn-accent:focus-visible {
background: var(--desert-khaki);
color: var(--pitch-pine);
border-color: var(--desert-khaki);
}
.newsletter-band {
background: var(--pitch-pine);
color: var(--raw-canvas);
padding: 56px 0 40px;
position: relative;
z-index: 2;
border-top: 1px solid rgba(245, 242, 235, 0.08);
}
.newsletter-band .container {
display: grid;
grid-template-columns: 1fr auto;
gap: 48px;
align-items: center;
}
.newsletter-band .newsletter-text h4 {
font-family: var(--font-display);
font-size: 28px;
color: var(--raw-canvas);
margin-bottom: 8px;
line-height: 1.2;
letter-spacing: -0.005em;
}
.newsletter-band .newsletter-text h4 em {
color: var(--desert-khaki-light);
font-style: italic;
}
.newsletter-band .newsletter-text p {
color: rgba(245, 242, 235, 0.78);
font-size: 14px;
margin: 0;
max-width: 56ch;
}
.newsletter-form {
display: flex;
gap: 0;
border: 1px solid var(--desert-khaki-light);
}
.newsletter-form input[type="email"] {
background: transparent;
border: none;
color: var(--raw-canvas);
padding: 14px 18px;
font-family: var(--font-body);
font-size: 14px;
min-width: 260px;
}
/* Visible keyboard focus for the footer email field (WCAG 2.4.7). */
.newsletter-form input[type="email"]:focus-visible {
outline: 2px solid var(--desert-khaki-light);
outline-offset: -2px;
}
.newsletter-form input[type="email"]::placeholder {
color: rgba(245, 242, 235, 0.55);
}
.newsletter-form button {
background: var(--desert-khaki-light);
border: none;
padding: 14px 24px;
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--pitch-pine);
cursor: pointer;
transition: background 0.2s ease;
}
.newsletter-form button:hover { background: var(--raw-canvas); }
/* Newsletter feedback states (Brevo integration) */
.newsletter-message {
grid-column: 1 / -1;
padding: 16px 20px;
margin-top: 8px;
font-family: var(--font-body);
font-size: 14px;
line-height: 1.5;
border: 1px solid var(--desert-khaki-light);
background: rgba(245, 242, 235, 0.06);
color: var(--raw-canvas);
display: none;
}
.newsletter-message.is-visible { display: block; }
.newsletter-message.is-error {
border-color: rgba(168, 87, 60, 0.6);
background: rgba(168, 87, 60, 0.1);
}
.newsletter-form button[disabled] {
opacity: 0.6;
cursor: wait;
}
.newsletter-form.is-submitting input[type="email"] {
opacity: 0.6;
}
@media (max-width: 720px) {
.newsletter-band { padding: 40px 0 28px; }
.newsletter-band .container { grid-template-columns: 1fr; gap: 24px; }
.newsletter-form { flex-direction: column; }
.newsletter-form input[type="email"] { min-width: 0; width: 100%; border-bottom: 1px solid var(--desert-khaki-light); }
}
/* ===== FOOTER ===== */
footer {
background: var(--pitch-pine);
color: var(--raw-canvas);
padding: 48px 0 32px;
position: relative;
z-index: 2;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 64px;
}
.footer-brand .logo-mark { color: var(--raw-canvas); font-size: 32px; }
.footer-brand .logo-mark em { color: var(--desert-khaki); }
.footer-brand .logo-rule { background: var(--desert-khaki); }
.footer-brand .logo-label { color: rgba(245, 242, 235, 0.9); }
.footer-tagline {
font-family: var(--font-display);
font-style: italic;
color: var(--desert-khaki);
font-size: 18px;
margin: 24px 0;
}
.footer-tagline span { color: var(--raw-canvas); font-style: normal; }
.footer-col h4 {
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--raw-canvas);
margin-bottom: 20px;
font-weight: 700;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
color: rgba(245, 242, 235, 0.85);
font-size: 14px;
transition: color 0.15s ease;
cursor: pointer;
/* Long links (e.g. "Military & First Responders Discount") must wrap —
nowrap overflowed the narrow 2-column footer at 561–640px and got
clipped by body{overflow-x:clip}. */
white-space: normal;
}
.footer-col a:hover { color: var(--desert-khaki); }
.footer-bottom {
border-top: 1px solid rgba(245, 242, 235, 0.15);
padding-top: 32px;
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(245, 242, 235, 0.85);
}
.footer-bottom a { color: rgba(245, 242, 235, 0.85); }
.footer-bottom a:hover { color: var(--desert-khaki); text-decoration: underline; text-underline-offset: 3px; }
/* ===== INNER PAGES — SHARED ===== */
.page-hero {
background: var(--pitch-pine);
color: var(--raw-canvas);
padding: 88px 0 80px;
position: relative;
overflow: hidden;
}
.page-hero h1 {
color: var(--raw-canvas);
font-size: clamp(48px, 6vw, 80px);
max-width: 14ch;
margin-bottom: 24px;
}
.page-hero h1 em { color: var(--desert-khaki); }
.page-hero .eyebrow { color: var(--raw-canvas); font-weight: 700; margin-bottom: 28px; }
.page-hero p {
color: rgba(245, 242, 235, 0.88);
max-width: 56ch;
font-size: 17px;
}
.page-hero::after {
content: "";
position: absolute;
top: 0;
right: -200px;
width: 600px;
height: 600px;
background: radial-gradient(circle, var(--desert-khaki-soft) 0%, transparent 70%);
pointer-events: none;
}
/* ===== DEPARTMENT HERO PHOTO (optional) =====
Mirrors the brand-page hero layout. A department hero only adopts the
two-column photo layout when its image actually loads: the markup carries
the modifier class .page-hero--has-photo, and the ![]()
onerror handler
strips that class if the photo is missing — collapsing the hero back to
the original text-only look with zero visual change. So: photo present =>
brand-style split layout; photo absent/broken => exactly as before. */
.page-hero--has-photo .page-hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
/* The text column keeps the original hero copy widths inside the grid. */
.page-hero--has-photo .page-hero-copy h1 { max-width: 14ch; }
.page-hero--has-photo .page-hero-copy p { max-width: 52ch; }
.page-hero-figure {
margin: 0;
/* Square crop, capped so the hero stays compact on desktop.
(4:5 portrait at half-container width made the hero very tall.) */
aspect-ratio: 1 / 1;
width: min(100%, 420px);
justify-self: end;
border: 1px solid var(--desert-khaki);
overflow: hidden;
/* Sits above the decorative ::after glow so the photo is never dimmed. */
position: relative;
z-index: 1;
}
.page-hero-figure img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Fallback state: no photo, so hide the figure entirely and let the copy
occupy the full width exactly like the original single-column hero. */
.page-hero-figure[hidden],
.page-hero:not(.page-hero--has-photo) .page-hero-figure {
display: none;
}
.page-hero:not(.page-hero--has-photo) .page-hero-grid {
display: block;
}
/* ===== REVIEWS / SOCIAL PROOF (HOME) ===== */
.reviews-section {
padding: 100px 0;
background: var(--raw-canvas-warm);
border-top: 1px solid var(--bunker-olive);
border-bottom: 1px solid var(--bunker-olive);
position: relative;
}
.reviews-head {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 32px;
margin-bottom: 56px;
}
.reviews-rating {
text-align: right;
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--bunker-olive);
}
.reviews-rating .stars {
display: block;
font-size: 22px;
letter-spacing: 0.08em;
color: var(--vintage-signal);
margin-bottom: 4px;
}
.reviews-rating .rating-num {
font-family: var(--font-display);
font-size: 26px;
font-style: italic;
color: var(--pitch-pine);
margin-right: 6px;
letter-spacing: 0;
}
.reviews-rating a {
display: inline-block;
margin-top: 8px;
color: var(--desert-khaki);
text-decoration: underline;
text-underline-offset: 4px;
}
/* Marquee track: full-bleed, edge-faded. Auto-scroll is now driven by JS
(incrementing scrollLeft) on a NATIVE horizontal-scroll container, so the
visitor can also drag/swipe/wheel through the reviews freely and click to
pause or resume. See the "REVIEWS MARQUEE" block in main.js. */
.reviews-marquee {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
scrollbar-width: none; /* hide scrollbar (Firefox) */
cursor: grab;
/* Soft fade at left/right edges so cards drift in/out rather than pop */
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.reviews-marquee::-webkit-scrollbar { display: none; } /* hide scrollbar (WebKit) */
.reviews-marquee.is-paused { cursor: grab; }
.reviews-marquee.is-dragging { cursor: grabbing; }
.reviews-marquee.is-dragging .review-card { cursor: grabbing; }
.reviews-track {
display: flex;
gap: 24px;
width: max-content;
padding: 8px 12px;
will-change: scroll-position;
}
/* Respect reduced-motion: no auto-scroll at all; the container is already
natively scrollable, so manual swipe/drag still works. Add snap for tidy
manual paging. */
@media (prefers-reduced-motion: reduce) {
.reviews-marquee { scroll-snap-type: x proximity; }
.review-card { scroll-snap-align: start; }
}
.review-card {
background: var(--raw-canvas);
border: 1px solid rgba(90, 85, 66, 0.25);
padding: 32px 28px;
position: relative;
display: flex;
flex-direction: column;
flex: 0 0 360px;
min-height: 260px;
}
.review-card::before {
content: "\201C";
position: absolute;
top: 8px;
left: 18px;
font-family: var(--font-display);
font-size: 88px;
line-height: 1;
color: var(--desert-khaki-soft);
pointer-events: none;
}
.review-stars {
color: var(--vintage-signal);
font-size: 14px;
letter-spacing: 0.12em;
margin-bottom: 16px;
position: relative;
z-index: 1;
}
.review-text {
font-family: var(--font-display);
font-size: 17px;
line-height: 1.55;
color: var(--pitch-pine);
font-style: italic;
margin-bottom: 24px;
flex: 1;
position: relative;
z-index: 1;
}
.review-meta {
border-top: 1px solid rgba(90, 85, 66, 0.2);
padding-top: 16px;
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bunker-olive);
}
.review-meta strong { color: var(--pitch-pine); font-weight: 700; }
@media (max-width: 880px) {
.reviews-head { grid-template-columns: 1fr; align-items: start; }
.reviews-rating { text-align: left; }
.review-card { flex: 0 0 300px; padding: 24px 22px; min-height: 240px; }
.reviews-track { gap: 16px; }
}
/* ===== LOCATIONS PAGE ===== */
.locations-full {
padding: 80px 0 100px;
background: var(--raw-canvas);
}
.loc-region {
margin-bottom: 80px;
}
.loc-region-head {
display: flex;
justify-content: space-between;
align-items: end;
margin-bottom: 32px;
padding-bottom: 16px;
border-bottom: 1px solid var(--bunker-olive);
flex-wrap: wrap;
gap: 16px;
}
.loc-region-head h2 { font-size: 36px; }
.loc-region-head .loc-region-phone {
font-family: var(--font-display);
font-style: italic;
color: var(--desert-khaki);
font-size: 22px;
}
.loc-detail-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.loc-detail-card {
background: var(--raw-canvas-warm);
border: 1px solid var(--bunker-olive);
overflow: hidden;
display: flex;
flex-direction: column;
}
.loc-detail-card .loc-photo {
aspect-ratio: 16 / 9;
background-size: cover;
background-position: center;
border-bottom: 1px solid var(--bunker-olive);
}
.loc-detail-card .loc-info {
padding: 28px;
flex: 1;
display: flex;
flex-direction: column;
}
.loc-detail-card .loc-info > .btn {
margin-top: auto;
align-self: flex-start;
}
.loc-detail-card .loc-tag {
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.2em;
color: var(--desert-khaki);
text-transform: uppercase;
margin-bottom: 8px;
}
.loc-detail-card h3 { font-size: 24px; margin-bottom: 12px; }
.loc-detail-card .loc-addr {
font-size: 15px;
color: var(--bunker-olive);
margin-bottom: 16px;
line-height: 1.5;
}
.loc-detail-card .loc-hours {
font-family: var(--font-label);
font-size: 12px;
letter-spacing: 0.05em;
color: var(--pitch-pine);
line-height: 1.8;
padding: 16px;
border-top: 1px solid var(--bunker-olive);
background: var(--raw-canvas);
}
/* ===== REGION MAP (interactive Google Maps embed) =====
Sits at the bottom of each .loc-region block, framed in the same warm-cream
panel aesthetic as the cards above. Uses Google's free /maps/embed iframe —
no API key, no JS, lazy-loaded so it only fetches on scroll. */
.loc-region-map {
margin-top: 32px;
background: var(--raw-canvas-warm);
border: 1px solid var(--bunker-olive);
overflow: hidden;
}
.loc-region-map .loc-region-map-head {
padding: 16px 20px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
border-bottom: 1px solid var(--bunker-olive);
flex-wrap: wrap;
}
.loc-region-map .loc-region-map-eyebrow {
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--desert-khaki);
font-weight: 700;
}
.loc-region-map .loc-region-map-link {
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
/* --vintage-signal is only 4.2:1 on this warm cream at 11px; the deeper
bronze already used by the eyebrow beside it clears 5:1. The underline
is now on by default so the link reads as a link before hover. */
color: var(--desert-khaki);
border-bottom: 1px solid var(--desert-khaki);
padding-bottom: 2px;
transition: border-color 0.18s ease, color 0.18s ease;
}
.loc-region-map .loc-region-map-link:hover,
.loc-region-map .loc-region-map-link:focus-visible {
color: var(--pitch-pine);
border-color: var(--pitch-pine);
}
.loc-region-map .loc-region-map-link:focus-visible {
outline: 2px solid var(--pitch-pine);
outline-offset: 3px;
}
.loc-region-map .loc-region-map-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--bunker-olive);
}
.loc-region-map iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
/* Locations-page regional maps: shrink to roughly half the container width and
center them. Echoes the smaller, centered preview-map on the home page. */
.locations-full .loc-region-map {
max-width: 60%;
margin-left: auto;
margin-right: auto;
}
/* ===== Locations 2×2 layout =====
Each region is a grid: top row = the two store cards (.loc-detail-grid),
bottom row = the Google map (left) + the interactive floor map (right). */
.loc-bottom-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 24px;
align-items: stretch;
}
/* Inside the 2×2 bottom row the map fills its cell (override the 60% centering). */
.loc-bottom-row .loc-region-map {
margin: 0;
max-width: none;
display: flex;
flex-direction: column;
}
.loc-bottom-row .loc-region-map .loc-region-map-frame {
flex: 1 1 auto;
aspect-ratio: auto;
min-height: 320px;
}
/* Floor-map panel (right cell of the bottom row) */
.loc-floor {
background: var(--raw-canvas-warm);
border: 1px solid var(--bunker-olive);
overflow: hidden;
display: flex;
flex-direction: column;
}
.loc-floor-head {
padding: 16px 20px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
border-bottom: 1px solid var(--bunker-olive);
flex-wrap: wrap;
}
.loc-floor-eyebrow {
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--desert-khaki);
font-weight: 700;
}
.loc-floor-hint {
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--faded-fatigue);
}
/* Main / second-store toggle — now lives inside the floor panel header so
the panel fills its grid cell to the same height as the map beside it. */
.loc-floor-toggle {
display: inline-flex;
gap: 0;
border: 1px solid var(--bunker-olive);
background: var(--raw-canvas);
}
.loc-floor-toggle button {
appearance: none;
-webkit-appearance: none;
border: 0;
border-right: 1px solid var(--bunker-olive);
background: transparent;
color: var(--pitch-pine);
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
padding: 9px 18px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.loc-floor-toggle button:last-child { border-right: 0; }
.loc-floor-toggle button:hover { background: var(--raw-canvas-warm); }
.loc-floor-toggle button.active {
background: var(--pitch-pine);
color: var(--raw-canvas);
}
.loc-floor-toggle button:focus-visible {
outline: 2px solid var(--vintage-signal);
outline-offset: -2px;
}
/* Each store's map body fills the panel below the shared header. */
.loc-floor-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.loc-floor-body[hidden] { display: none; }
.loc-floor[hidden] { display: none; }
/* The wrap is the positioning context for the anchored callout. */
.loc-floor-wrap {
position: relative;
flex: 1 1 auto;
padding: 18px;
background: var(--raw-canvas);
display: flex;
flex-direction: column;
justify-content: center;
}
.loc-floor-wrap svg {
width: 100%;
height: auto;
display: block;
}
.locfloor-zone { cursor: pointer; }
.locfloor-zone rect,
.locfloor-zone polygon {
fill: var(--raw-canvas-warm);
stroke: var(--bunker-olive);
stroke-width: 1.5;
transition: fill 0.15s;
}
.locfloor-zone:hover rect,
.locfloor-zone.on rect,
.locfloor-zone:hover polygon,
.locfloor-zone.on polygon { fill: var(--desert-khaki); }
.locfloor-zone:focus-visible { outline: none; }
.locfloor-zone:focus-visible rect,
.locfloor-zone:focus-visible polygon { fill: var(--desert-khaki); stroke: var(--vintage-signal); stroke-width: 2; }
.locfloor-zone text {
font-family: var(--font-label);
font-size: 12px;
letter-spacing: 0.08em;
fill: var(--pitch-pine);
text-transform: uppercase;
pointer-events: none;
}
/* Anchored callout that pops out of a clicked zone */
.locfloor-callout {
position: absolute;
z-index: 5;
width: min(280px, 78%);
background: var(--raw-canvas);
color: var(--pitch-pine);
border: 1.5px solid var(--pitch-pine);
box-shadow: 0 14px 34px rgba(60, 52, 31, 0.32);
padding: 16px 18px 18px;
border-radius: 2px;
}
.locfloor-callout::after {
content: '';
position: absolute;
left: var(--arrow-x, 50%);
width: 0; height: 0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
transform: translateX(-50%);
}
/* Two triangles per pointer: the outer (border-color) triangle sits 1.5px
further out so the callout's border appears to continue across the arrow. */
.locfloor-callout.pointer-down::after {
bottom: -9px;
border-top: 9px solid var(--raw-canvas);
filter: drop-shadow(0 1.5px 0 var(--pitch-pine));
}
.locfloor-callout.pointer-up::after {
top: -9px;
border-bottom: 9px solid var(--raw-canvas);
filter: drop-shadow(0 -1.5px 0 var(--pitch-pine));
}
.locfloor-callout-close {
position: absolute;
top: 8px; right: 10px;
background: none; border: 0;
color: var(--bunker-olive);
font-size: 22px; line-height: 1;
cursor: pointer;
padding: 2px 4px;
}
.locfloor-callout-close:hover { color: var(--pitch-pine); }
.locfloor-callout-close:focus-visible {
outline: 2px solid var(--vintage-signal);
outline-offset: 2px;
color: var(--pitch-pine);
}
.locfloor-callout-eyebrow {
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--vintage-signal);
font-weight: 700;
margin-bottom: 6px;
padding-right: 22px;
}
.locfloor-callout-title {
font-family: var(--font-display);
font-size: 20px;
line-height: 1.1;
margin: 0 0 8px;
color: var(--pitch-pine);
}
.locfloor-callout-desc {
font-size: 13px;
line-height: 1.5;
color: var(--pitch-pine);
margin: 0 0 14px;
}
/* Solid, high-contrast button so it never blends into the card. */
.locfloor-callout .locfloor-callout-btn {
margin: 0;
padding: 9px 15px;
font-size: 12px;
background: var(--vintage-signal);
border-color: var(--vintage-signal);
color: var(--raw-canvas);
}
.locfloor-callout .locfloor-callout-btn:hover {
background: var(--pitch-pine);
border-color: var(--pitch-pine);
color: var(--raw-canvas);
}
/* Stack the 2×2 bottom row on narrower screens */
@media (max-width: 900px) {
.loc-bottom-row { grid-template-columns: 1fr; }
.loc-bottom-row .loc-region-map .loc-region-map-frame { min-height: 260px; aspect-ratio: 4 / 3; }
}
/* Phones: more square aspect so the map stays usefully tall on narrow screens */
@media (max-width: 720px) {
.loc-region-map { margin-top: 24px; }
.loc-region-map .loc-region-map-frame { aspect-ratio: 4 / 3; }
.loc-region-map .loc-region-map-head { padding: 14px 16px; }
/* Below tablet, let the regional maps fill the available width — at narrow
widths a 60%-capped map would feel awkwardly small. */
.locations-full .loc-region-map { max-width: none; }
}
/* Preview map variant — sits on the home page between the two store cards
and the "All Locations & Hours" CTA. The OUTER widget is a perfect square
(so total width = total height including the header bar). The inner map
frame uses flex: 1 to absorb whatever vertical space the header leaves.
Sized to match one store card's width, centered. */
.loc-preview-map {
/* On desktop the .loc-grid above uses two equal 1fr columns with 32px gap,
so one card's width = (100% - 32px) / 2. Match that here. */
max-width: calc((100% - 32px) / 2);
margin: 40px auto 0;
aspect-ratio: 1 / 1;
display: flex;
flex-direction: column;
}
.loc-preview-map .loc-region-map-frame {
flex: 1;
aspect-ratio: auto; /* Override the default 16/9 — height is now driven by flex */
}
.loc-preview-map .loc-region-map-eyebrow {
color: var(--pitch-pine);
}
/* Below the tablet breakpoint the cards stack to a single column, so the map
should also fill the available width naturally. Drop the square constraint
so the widget can be wider than tall at full width — square at full-screen
width would push it way too tall on phones/tablets. */
@media (max-width: 880px) {
.loc-preview-map {
max-width: none;
margin-top: 32px;
aspect-ratio: auto;
display: block;
}
.loc-preview-map .loc-region-map-frame {
flex: none;
aspect-ratio: 16 / 9;
}
}
@media (max-width: 720px) {
.loc-preview-map .loc-region-map-frame { aspect-ratio: 4 / 3; }
}
/* ===== HOW TO SHOP PAGE ===== */
.how-to-shop {
padding: 80px 0 100px;
background: var(--raw-canvas);
}
.step-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-top: 56px;
}
.step {
border-top: 2px solid var(--desert-khaki);
padding-top: 24px;
}
.step-num {
font-family: var(--font-display);
font-size: 56px;
color: var(--desert-khaki);
line-height: 1;
margin-bottom: 16px;
}
.step h3 { margin-bottom: 12px; }
.step p { font-size: 15px; }
.contact-block {
background: var(--pitch-pine);
color: var(--raw-canvas);
padding: 56px 48px;
margin-top: 80px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.contact-block h3 { color: var(--raw-canvas); margin-bottom: 16px; font-size: 32px; }
.contact-block h3 em { color: var(--desert-khaki); }
.contact-block p { color: rgba(245, 242, 235, 0.85); }
.contact-options { display: flex; flex-direction: column; gap: 16px; }
.contact-option {
border: 1px solid var(--desert-khaki);
padding: 20px 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.contact-option .contact-label {
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--raw-canvas);
font-weight: 700;
}
.contact-option .contact-value {
font-family: var(--font-display);
font-style: italic;
font-size: 20px;
color: var(--raw-canvas);
}
/* ===== PRICE MATCH PAGE ===== */
.price-match {
padding: 80px 0 100px;
background: var(--raw-canvas);
}
.promise-feature {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 64px;
align-items: center;
margin-bottom: 80px;
}
.promise-mark {
aspect-ratio: 1;
border: 2px solid var(--desert-khaki);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px;
background: var(--raw-canvas-warm);
position: relative;
}
.promise-mark::before, .promise-mark::after {
content: "";
position: absolute;
border: 1px solid var(--desert-khaki);
border-radius: 50%;
}
.promise-mark::before { inset: 12px; opacity: 0.5; }
.promise-mark::after { inset: 22px; opacity: 0.25; }
.promise-mark .pm-eyebrow {
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.22em;
color: var(--woodland-drab);
margin-bottom: 16px;
}
.promise-mark .pm-line {
font-family: var(--font-display);
font-style: italic;
color: var(--pitch-pine);
font-size: clamp(28px, 3vw, 40px);
line-height: 1.05;
}
.promise-mark .pm-line span {
color: var(--desert-khaki);
font-style: italic;
}
.promise-mark .pm-since {
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.2em;
color: var(--woodland-drab);
margin-top: 16px;
}
.terms-list {
list-style: none;
margin-top: 32px;
}
.terms-list li {
border-top: 1px solid var(--bunker-olive);
padding: 20px 0;
display: grid;
grid-template-columns: 60px 1fr;
gap: 20px;
align-items: start;
}
.terms-list li:last-child { border-bottom: 1px solid var(--bunker-olive); }
.terms-list .term-num {
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.2em;
color: var(--desert-khaki);
padding-top: 4px;
}
.terms-list h4 { margin-bottom: 8px; font-family: var(--font-display); }
.terms-list p { font-size: 14px; }
/* ===== ABOUT PAGE ===== */
.about-page { padding: 80px 0 100px; background: var(--raw-canvas); }
.about-portrait {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 64px;
align-items: start;
margin-bottom: 80px;
}
.portrait-img {
aspect-ratio: 3 / 4;
background-image: url("../images/al_finer.jpg");
background-size: cover;
background-position: center top;
background-color: var(--raw-canvas-warm);
border: 1px solid var(--bunker-olive);
position: relative;
}
.portrait-img::after {
content: "AL FINER · USMC · FOUNDER";
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: var(--pitch-pine);
color: var(--raw-canvas);
padding: 12px 16px;
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.2em;
text-align: center;
}
.about-body p {
margin-bottom: 20px;
font-size: 16px;
max-width: 56ch;
}
.about-body p.lead { font-size: 20px; color: var(--pitch-pine); font-family: var(--font-display); font-style: italic; line-height: 1.4; }
.timeline {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0;
margin-top: 80px;
position: relative;
padding-top: 36px;
}
/* The continuous timeline rail. Stops at the center of the first and last
items so the line never extends past the dots. */
.timeline::before {
content: "";
position: absolute;
top: 4px;
left: calc((100% / 6) / 2);
right: calc((100% / 6) / 2);
height: 1px;
background: var(--bunker-olive);
}
.timeline-item {
padding: 0 16px;
position: relative;
text-align: center;
}
/* The dot sits on the rail, centered above each item. */
.timeline-item::before {
content: "";
position: absolute;
top: -36px;
left: 50%;
transform: translateX(-50%);
width: 11px;
height: 11px;
background: var(--raw-canvas);
border: 2px solid var(--desert-khaki);
border-radius: 50%;
box-sizing: border-box;
}
/* Highlight the "Today" dot — solid fill to mark the present. */
.timeline-item:last-child::before {
background: var(--vintage-signal);
border-color: var(--vintage-signal);
}
.timeline-year {
font-family: var(--font-display);
font-style: italic;
color: var(--pitch-pine);
font-size: 32px;
line-height: 1;
margin-bottom: 14px;
}
.timeline-item:last-child .timeline-year {
color: var(--vintage-signal);
}
.timeline-event {
font-family: var(--font-body);
font-size: 13.5px;
line-height: 1.5;
color: var(--bunker-olive);
max-width: 22ch;
margin: 0 auto;
}
/* ===== CATEGORY / BRAND PAGE — CATALOG DIRECTORY ===== */
.products-page { background: var(--raw-canvas); }
.call-strip {
background: var(--raw-canvas-warm);
border-bottom: 1px solid var(--bunker-olive);
padding: 18px 0;
}
.call-strip-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.call-strip-label {
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--bunker-olive);
display: flex;
align-items: center;
gap: 12px;
}
.call-strip-label::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--woodland-drab);
box-shadow: 0 0 0 4px rgba(71, 92, 62, 0.15);
}
.call-strip-cta {
display: flex;
gap: 24px;
align-items: center;
flex-wrap: wrap;
}
.call-strip-cta a {
font-family: var(--font-display);
font-style: italic;
color: var(--pitch-pine);
font-size: 18px;
transition: color 0.15s ease;
}
.call-strip-cta a:hover { color: var(--woodland-drab); }
.call-strip-cta .pipe { color: var(--bunker-olive); opacity: 0.4; }
.catalog-layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: 56px;
padding: 56px 0 100px;
}
.catalog-sidebar h4 {
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--desert-khaki);
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid var(--bunker-olive);
font-weight: 700;
}
.catalog-sidebar ul { list-style: none; margin-bottom: 32px; }
.catalog-sidebar li { margin-bottom: 8px; }
.catalog-sidebar a {
font-size: 14px;
color: var(--bunker-olive);
cursor: pointer;
display: block;
padding: 6px 0;
transition: color 0.15s ease, padding 0.15s ease;
}
.catalog-sidebar a:hover, .catalog-sidebar a.active {
color: var(--pitch-pine);
padding-left: 8px;
}
.catalog-sidebar a.active::before {
content: "→ ";
color: var(--desert-khaki);
}
.catalog-content {
min-width: 0;
}
.catalog-content > .intro-block {
padding: 0 0 40px;
border-bottom: 1px solid var(--bunker-olive);
margin-bottom: 48px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: end;
}
.catalog-content > .intro-block p {
font-family: var(--font-display);
font-style: italic;
color: var(--pitch-pine);
font-size: 22px;
line-height: 1.4;
max-width: 36ch;
}
.catalog-content > .intro-block .intro-meta {
text-align: right;
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--bunker-olive);
line-height: 1.8;
}
.catalog-content > .intro-block .intro-meta strong {
display: block;
font-family: var(--font-display);
font-style: normal;
font-size: 18px;
color: var(--desert-khaki);
letter-spacing: 0;
margin-bottom: 6px;
}
/* Subsection list — the heart of the catalog */
.subsection {
padding: 32px 0;
border-bottom: 1px solid rgba(90, 85, 66, 0.25);
display: grid;
grid-template-columns: 220px 1fr;
gap: 48px;
align-items: start;
scroll-margin-top: 96px;
}
.subsection:last-child { border-bottom: none; }
.subsection-label {
position: sticky;
top: 116px; /* util bar (~32) + header (~84) */
align-self: start;
}
.subsection-num {
font-family: var(--font-label);
font-size: 10px;
line-height: 1;
letter-spacing: 0.2em;
color: var(--desert-khaki);
text-transform: uppercase;
margin-bottom: 8px;
}
.subsection-title {
font-family: var(--font-display);
font-weight: 700;
color: var(--pitch-pine);
font-size: 26px;
line-height: 1.1;
letter-spacing: -0.01em;
}
.subsection-title em {
font-style: italic;
color: var(--desert-khaki);
}
/* Smaller display size for titles carrying a long parenthetical note,
so they don't stack into a tall, awkward column. */
.subsection-title--compact {
font-size: 19px;
line-height: 1.2;
}
.subsection-items {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.85;
color: var(--bunker-olive);
/* Offset the items so their first line sits on the same plane as the
subsection title. The title is pushed down by the num label
(10px, line-height 1) + its 8px margin; 16px lands the 16px body
text's cap-height on the same baseline as the title. */
padding-top: 16px;
}
.subsection-items .item {
display: inline;
color: var(--pitch-pine);
}
.subsection-items .sep {
color: var(--desert-khaki);
margin: 0 6px;
font-weight: 700;
}
.subsection-redirect {
background: var(--raw-canvas-warm);
border: 1px solid var(--bunker-olive);
padding: 20px 24px;
font-family: var(--font-body);
font-size: 15px;
color: var(--pitch-pine);
line-height: 1.6;
}
.subsection-redirect a {
color: var(--woodland-drab);
text-decoration: underline;
text-decoration-color: var(--desert-khaki);
text-underline-offset: 4px;
text-decoration-thickness: 1.5px;
cursor: pointer;
font-weight: 700;
}
.subsection-redirect a:hover { color: var(--pitch-pine); }
/* Catalog brand strip */
.catalog-brands {
margin-top: 56px;
padding-top: 40px;
border-top: 2px solid var(--desert-khaki);
}
/* When the brands matrix sits at the TOP of the catalog content (moved above
the subsections in the 2026-07 pass), flip its separator to the bottom so it
reads as a header for the department rather than a footer. */
.catalog-brands--top {
margin-top: 0;
padding-top: 0;
border-top: none;
margin-bottom: 48px;
padding-bottom: 40px;
border-bottom: 2px solid var(--desert-khaki);
}
.catalog-brands-head {
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--desert-khaki);
margin-bottom: 24px;
}
.catalog-brands-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 0;
border-top: 1px solid var(--bunker-olive);
border-left: 1px solid var(--bunker-olive);
}
.catalog-brand-pill {
aspect-ratio: 2 / 1;
border-right: 1px solid var(--bunker-olive);
border-bottom: 1px solid var(--bunker-olive);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: var(--font-display);
font-weight: 700;
color: var(--pitch-pine);
font-size: 14px;
background: var(--raw-canvas);
transition: all 0.2s ease;
padding: 8px;
cursor: default;
}
.catalog-brand-pill.linked {
cursor: pointer;
}
.catalog-brand-pill.linked:hover {
background: var(--pitch-pine);
color: var(--desert-khaki);
}
/* Question prompt at end */
.ask-prompt {
margin-top: 64px;
padding: 48px;
background: var(--pitch-pine);
color: var(--raw-canvas);
display: grid;
grid-template-columns: 1fr auto;
gap: 32px;
align-items: center;
}
.ask-prompt .ask-eyebrow {
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.22em;
color: var(--raw-canvas);
font-weight: 700;
margin-bottom: 8px;
}
.ask-prompt h3 {
color: var(--raw-canvas);
font-size: 28px;
line-height: 1.2;
}
.ask-prompt h3 em { color: var(--desert-khaki); }
.ask-prompt p {
color: rgba(245, 242, 235, 0.85);
font-size: 15px;
margin-top: 8px;
max-width: 50ch;
}
.ask-prompt .ask-phones {
display: flex;
flex-direction: column;
gap: 12px;
}
.ask-prompt .ask-phones a {
font-family: var(--font-display);
font-style: italic;
color: var(--desert-khaki);
font-size: 22px;
border: 1px solid var(--desert-khaki);
padding: 12px 24px;
text-align: center;
transition: all 0.2s ease;
white-space: nowrap;
}
.ask-prompt .ask-phones a:hover {
background: var(--desert-khaki);
color: var(--pitch-pine);
}
.ask-prompt .ask-phones a span {
display: block;
font-family: var(--font-label);
font-style: normal;
font-size: 9px;
letter-spacing: 0.2em;
color: rgba(245, 242, 235, 0.6);
text-transform: uppercase;
margin-bottom: 4px;
}
.ask-prompt .ask-phones a:hover span { color: var(--pitch-pine); }
/* ===== BRAND PAGE ===== */
.brand-page { background: var(--raw-canvas); }
.brand-hero {
background: var(--pitch-pine);
color: var(--raw-canvas);
padding: 80px 0;
border-bottom: 4px solid var(--desert-khaki);
}
.brand-hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.brand-name {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(60px, 8vw, 120px);
color: var(--desert-khaki);
line-height: 1;
margin-bottom: 16px;
}
.brand-hero p { color: rgba(245, 242, 235, 0.9); font-size: 17px; max-width: 50ch; }
.brand-image {
/* Square crop, capped — matches the department hero treatment. */
aspect-ratio: 1 / 1;
width: min(100%, 420px);
justify-self: end;
background-size: cover;
background-position: center;
border: 1px solid var(--desert-khaki);
}
/* ===== HANGTAG — used on the Price Match page hero ===== */
/* Kraft-paper rectangle with hole punch + string detail.
A brand-book "ownable mark" — used sparingly, one per page. */
.hangtag {
position: relative;
background: linear-gradient(180deg, #E8DCC4 0%, #D9C9A6 100%);
color: var(--pitch-pine);
padding: 56px 36px 36px;
width: 100%;
max-width: 320px;
border: 1px solid rgba(60, 52, 31, 0.2);
box-shadow: 0 6px 20px rgba(60, 52, 31, 0.18),
inset 0 0 60px rgba(60, 52, 31, 0.04);
transform: rotate(2deg);
text-align: center;
transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.hangtag::before {
/* hole punch at top */
content: "";
position: absolute;
top: 22px;
left: 50%;
transform: translateX(-50%);
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--raw-canvas);
box-shadow: inset 0 0 0 2px rgba(60, 52, 31, 0.4),
inset 0 2px 3px rgba(60, 52, 31, 0.3);
}
.hangtag::after {
/* string */
content: "";
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 22px;
background: rgba(60, 52, 31, 0.6);
transform: translateX(-50%);
}
.hangtag:hover {
transform: rotate(0.8deg) translateY(-2px);
box-shadow: 0 12px 30px rgba(60, 52, 31, 0.24),
inset 0 0 60px rgba(60, 52, 31, 0.04);
}
.hangtag-eyebrow {
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(60, 52, 31, 0.7);
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px dashed rgba(60, 52, 31, 0.35);
}
.hangtag-line {
font-family: var(--font-display);
font-weight: 700;
font-size: 36px;
line-height: 1.0;
letter-spacing: -0.01em;
}
.hangtag-line em {
color: var(--vintage-signal);
font-style: italic;
}
.hangtag-foot {
font-family: var(--font-label);
font-size: 9.5px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(60, 52, 31, 0.7);
margin-top: 16px;
padding-top: 14px;
border-top: 1px dashed rgba(60, 52, 31, 0.35);
}
.hangtag-price {
font-family: var(--font-display);
font-weight: 700;
font-size: 56px;
color: var(--pitch-pine);
line-height: 1;
margin: 8px 0;
}
.hangtag-price .price-dollar {
font-size: 26px;
vertical-align: top;
margin-right: 4px;
font-weight: 400;
}
.hangtag-price .price-xx {
font-style: italic;
color: var(--vintage-signal);
}
/* Price Match page hero layout that holds the hangtag */
.pm-hero-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 56px;
align-items: center;
}
.pm-hero-stage {
display: flex;
justify-content: center;
align-items: center;
}
@media (max-width: 880px) {
.pm-hero-grid { grid-template-columns: 1fr; gap: 40px; }
.pm-hero-stage .hangtag { transform: rotate(1deg); margin: 0 auto; }
}
/* ===== UTILITIES ===== */
.small-rule {
width: 60px;
height: 1px;
background: var(--desert-khaki);
margin: 24px 0;
}
/* ===== RESPONSIVE — 4-TIER SYSTEM =====
Desktop ............ 1280px+
Large tablet ....... 1024px (laptop/iPad landscape)
Small tablet ....... 768px (iPad portrait, small laptop)
Mobile ............. 640px (large phone)
Small mobile ....... 420px (iPhone SE / Android small)
============================================== */
/* Large desktop down to small laptop — keep desktop layout but slim some grids */
@media (max-width: 1280px) {
.brands-grid { grid-template-columns: repeat(5, 1fr); }
.footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
.footer-grid > :nth-child(5) { grid-column: 1 / -1; border-top: 1px solid rgba(245, 242, 235, 0.15); padding-top: 32px; }
.nav-primary > a,
.nav-primary > .nav-item > a { padding: 10px 12px; font-size: 11px; letter-spacing: 0.1em; }
.nav-primary > a::after,
.nav-primary > .nav-item > a::after { left: 12px; right: 12px; }
.header-inner { gap: 24px; }
}
/* Mid-laptop — drop the secondary CTA so the nav has breathing room before
it ever has to wrap. Two CTAs is a luxury; the nav is essential. */
@media (max-width: 1180px) {
.header-cta:not(.primary) { display: none; }
.header-inner { gap: 20px; }
}
/* Large tablet — collapse hero, reorganize header, simplify multi-column blocks */
@media (max-width: 1080px) {
.hero { grid-template-columns: 1fr; min-height: auto; }
.hero-content { padding: 80px 48px; }
.hero-image { min-height: 400px; aspect-ratio: 16 / 9; }
.nav-primary { display: none; }
.mobile-toggle { display: inline-flex; align-items: center; }
.header-cta { display: none; }
.header-inner { grid-template-columns: 1fr auto; gap: 16px; }
.campaign-grid, .promise-grid, .step-grid { grid-template-columns: repeat(2, 1fr); }
.cat-grid { grid-template-columns: repeat(3, 1fr); }
.brands-grid { grid-template-columns: repeat(4, 1fr); }
.story-grid, .loc-grid, .loc-detail-grid, .promise-feature, .about-portrait, .contact-block { grid-template-columns: 1fr; gap: 40px; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
.footer-grid > :nth-child(5) { grid-column: auto; border-top: none; padding-top: 0; }
.timeline {
grid-template-columns: 1fr;
padding-top: 0;
padding-left: 32px;
gap: 36px;
}
.timeline::before {
top: 8px;
bottom: 8px;
left: 5px;
right: auto;
width: 1px;
height: auto;
}
.timeline-item {
text-align: left;
padding: 0;
}
.timeline-item::before {
top: 10px;
left: -32px;
transform: none;
}
.timeline-event { margin: 0; max-width: none; }
.catalog-layout { grid-template-columns: 1fr; gap: 32px; }
.catalog-sidebar {
display: block;
border-bottom: 1px solid var(--bunker-olive);
padding-bottom: 20px;
}
.catalog-sidebar h4 {
font-size: 9.5px;
letter-spacing: 0.18em;
margin-bottom: 12px;
padding-bottom: 0;
border-bottom: none;
color: var(--bunker-olive);
}
.catalog-sidebar h4:not(:first-child) { margin-top: 20px; }
.catalog-sidebar ul {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 0;
}
.catalog-sidebar li { margin-bottom: 0; }
.catalog-sidebar a {
padding: 6px 12px;
border: 1px solid var(--bunker-olive);
font-size: 12px;
letter-spacing: 0.02em;
background: var(--raw-canvas);
}
.catalog-sidebar a:hover { padding-left: 12px; background: var(--raw-canvas-warm); }
.catalog-sidebar a.active { background: var(--pitch-pine); color: var(--raw-canvas); border-color: var(--pitch-pine); padding-left: 12px; }
.catalog-sidebar a.active::before { content: ""; }
.subsection { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
.subsection-label { position: relative; top: 0; display: flex; align-items: baseline; gap: 16px; }
.subsection-num { margin-bottom: 0; }
.subsection-items { padding-top: 0; } /* single-column: no title-alignment offset needed */
.catalog-content > .intro-block { grid-template-columns: 1fr; gap: 24px; align-items: start; }
.catalog-content > .intro-block .intro-meta { text-align: left; }
.ask-prompt { grid-template-columns: 1fr; padding: 36px; gap: 24px; }
.ask-prompt .ask-phones { flex-direction: row; flex-wrap: wrap; }
.ask-prompt .ask-phones a { flex: 1 1 200px; }
.promise-mark { max-width: 360px; margin: 0 auto; }
.about-portrait { gap: 48px; }
.portrait-img { max-width: 480px; }
.story-section { padding: 80px 0; }
.story-image { max-height: 600px; }
.loc-card { grid-template-columns: 120px 1fr; gap: 20px; padding: 28px; }
.loc-region-head h2 { font-size: 28px; }
}
/* Small tablet — single column where two doesn't make sense, tighter rhythm */
@media (max-width: 768px) {
.header-inner { padding: 16px 24px; gap: 16px; }
.logo-mark { font-size: 22px; }
.logo-label { font-size: 7.5px; }
.hero-content { padding: 64px 32px; }
.hero h1 { font-size: clamp(44px, 9vw, 72px); }
.hero-sub { font-size: 16px; }
.hero-meta { gap: 32px; flex-wrap: wrap; margin-top: 40px; }
.hero-meta strong { font-size: 22px; }
.hero-stamp { width: 96px; height: 96px; bottom: 20px; right: 20px; font-size: 8px; }
.hero-stamp strong { font-size: 22px; }
.container, .container-narrow, .call-strip-inner { padding: 0 24px; }
.campaign-strip, .categories, .brands-strip, .locations-preview, .reviews-section, .promise, .story-section, .locations-full, .how-to-shop, .price-match, .about-page { padding: 64px 0; }
.section-head { margin-bottom: 40px; }
.campaign-grid, .promise-grid, .step-grid { grid-template-columns: 1fr; }
.campaign-card { padding: 28px 24px; }
.cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.brands-grid { grid-template-columns: repeat(3, 1fr); }
.brand-tile { font-size: 13px; aspect-ratio: 1.8 / 1; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
.footer-brand { grid-column: 1 / -1; }
.story-stats { grid-template-columns: 1fr; gap: 20px; padding-top: 32px; margin-top: 40px; }
.story-stats .stat { display: flex; align-items: baseline; gap: 16px; }
.story-stats .stat strong { font-size: 36px; margin-bottom: 0; }
.loc-card { grid-template-columns: 1fr; padding: 24px; gap: 20px; }
.loc-card .loc-img { aspect-ratio: 16 / 9; max-height: 200px; }
.contact-block { padding: 36px 28px; }
.contact-option { flex-direction: column; align-items: start; gap: 8px; padding: 16px 20px; }
.contact-option .contact-value { font-size: 18px; }
.subsection-items { font-size: 15px; line-height: 1.8; }
.subsection-title { font-size: 22px; }
.ask-prompt { padding: 32px 24px; }
.ask-prompt h3 { font-size: 24px; }
.catalog-brands-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.catalog-brand-pill { aspect-ratio: 2.2 / 1; font-size: 12px; }
.promise-mark { max-width: 300px; padding: 32px; }
.promise-mark .pm-line { font-size: clamp(24px, 5vw, 32px); }
.timeline-event { font-size: 13px; }
.timeline-year { font-size: 26px; }
.page-hero { padding: 64px 0 56px; }
.page-hero h1 { font-size: clamp(38px, 7vw, 56px); }
.brand-name { font-size: clamp(48px, 12vw, 96px); }
}
/* Mobile */
@media (max-width: 640px) {
body { font-size: 15px; }
.header-inner { padding: 12px 16px; }
.logo-mark { font-size: 19px; }
.logo-label { font-size: 7px; letter-spacing: 0.18em; }
.container, .container-narrow, .call-strip-inner { padding: 0 16px; }
.hero-content { padding: 48px 20px; }
.hero h1 { font-size: clamp(38px, 11vw, 56px); line-height: 1.05; }
.hero-eyebrow { font-size: 11px; margin-bottom: 20px; }
.hero-rule { width: 60px; margin: 28px 0 20px; }
.hero-sub { font-size: 15px; margin-bottom: 32px; }
.hero-meta { gap: 24px; margin-top: 32px; }
.hero-meta div { flex: 1 1 calc(50% - 12px); min-width: 0; font-size: 11px; }
.hero-meta strong { font-size: 20px; }
.hero-image { min-height: 280px; }
.hero-stamp { width: 80px; height: 80px; bottom: 16px; right: 16px; font-size: 7px; padding: 4px; }
.hero-stamp strong { font-size: 18px; margin: 2px 0; }
.campaign-strip, .categories, .brands-strip, .locations-preview, .reviews-section, .promise, .story-section, .locations-full, .how-to-shop, .price-match, .about-page { padding: 48px 0; }
.section-head { margin-bottom: 32px; }
.section-head h2 { font-size: 28px; }
.section-head p { font-size: 14px; }
.campaign-header { flex-direction: column; align-items: start; gap: 16px; margin-bottom: 32px; }
.campaign-grid {
border: none;
gap: 12px;
}
.campaign-card {
padding: 24px 20px;
border: 1px solid var(--bunker-olive);
}
.campaign-card h3 { font-size: 22px; }
.cat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.cat-card { aspect-ratio: 1 / 1; padding: 16px; }
.cat-card h3 { font-size: 17px; line-height: 1.2; }
.cat-card .cat-num { font-size: 9px; }
.brands-head { margin-bottom: 32px; }
.brands-grid {
grid-template-columns: repeat(2, 1fr);
border: 1px solid var(--bunker-olive);
}
.brand-tile {
font-size: 13px;
aspect-ratio: 2 / 1;
}
.promise-grid { grid-template-columns: 1fr; }
.step-grid { grid-template-columns: 1fr; gap: 28px; }
.loc-region-head { flex-direction: column; align-items: start; gap: 8px; }
.loc-region-head h2 { font-size: 24px; }
.loc-region-head .loc-region-phone { font-size: 18px; }
.loc-detail-card .loc-info { padding: 24px 20px; }
.footer-grid { grid-template-columns: 1fr; gap: 32px; }
.footer-brand { grid-column: auto; }
.footer-bottom {
flex-direction: column;
gap: 16px;
align-items: start;
font-size: 9px;
line-height: 1.6;
}
.timeline { gap: 28px; padding-left: 28px; }
.timeline::before { left: 4px; }
.timeline-item::before { left: -28px; }
.timeline-year { font-size: 24px; }
.brand-hero-grid { grid-template-columns: 1fr; gap: 32px; }
.brand-image { aspect-ratio: 4 / 3; width: 100%; justify-self: stretch; }
.brand-name { font-size: clamp(40px, 14vw, 72px); }
/* Department hero photo stacks below the copy on narrow screens. */
.page-hero--has-photo .page-hero-grid { grid-template-columns: 1fr; gap: 32px; }
.page-hero-figure { aspect-ratio: 4 / 3; width: 100%; justify-self: stretch; }
.contact-block { padding: 32px 20px; gap: 24px; }
.contact-block h3 { font-size: 24px; }
.promise-feature { gap: 32px; }
.promise-mark { padding: 28px; max-width: 260px; }
.promise-mark .pm-line { font-size: 24px; }
.terms-list li { grid-template-columns: 40px 1fr; gap: 12px; padding: 16px 0; }
.about-portrait { gap: 32px; }
.portrait-img { max-width: 100%; aspect-ratio: 4 / 5; }
.about-body p.lead { font-size: 18px; }
.about-body p { font-size: 15px; }
.page-hero { padding: 48px 0 40px; }
.page-hero h1 { font-size: clamp(32px, 9vw, 48px); }
.page-hero p { font-size: 15px; }
.call-strip-inner { flex-direction: column; align-items: start; gap: 8px; padding: 12px 16px; }
.call-strip-cta { gap: 12px; flex-wrap: wrap; }
.call-strip-cta a { font-size: 16px; }
.call-strip-cta .pipe { display: none; }
.subsection { padding: 24px 0; gap: 10px; }
.subsection-label { flex-direction: column; gap: 4px; align-items: start; }
.subsection-title { font-size: 20px; }
.subsection-num { margin-bottom: 0; }
.subsection-items { font-size: 14px; line-height: 1.75; }
.subsection-items .sep { margin: 0 4px; }
.subsection-redirect { padding: 16px 18px; font-size: 14px; }
.catalog-content > .intro-block { padding: 0 0 28px; margin-bottom: 32px; gap: 16px; }
.catalog-content > .intro-block p { font-size: 18px; }
.catalog-content > .intro-block .intro-meta strong { font-size: 16px; }
.catalog-brands { margin-top: 40px; padding-top: 28px; }
.catalog-brands--top { margin-top: 0; padding-top: 0; margin-bottom: 32px; padding-bottom: 28px; }
.catalog-brands-grid {
grid-template-columns: repeat(2, 1fr);
border: 1px solid var(--bunker-olive);
}
.catalog-brand-pill {
aspect-ratio: 2 / 1;
font-size: 12px;
}
.ask-prompt { padding: 28px 20px; gap: 20px; margin-top: 48px; }
.ask-prompt h3 { font-size: 22px; }
.ask-prompt p { font-size: 14px; }
.ask-prompt .ask-phones { flex-direction: column; gap: 10px; }
.ask-prompt .ask-phones a { padding: 14px 20px; font-size: 18px; }
.btn { padding: 14px 22px; font-size: 10px; }
.header-cta { font-size: 10px; padding: 10px 14px; }
}
/* Small mobile — iPhone SE etc */
@media (max-width: 420px) {
.hero h1 { font-size: clamp(34px, 12vw, 48px); }
.hero-meta { gap: 16px; }
.hero-meta div { flex: 1 1 100%; }
.footer-tagline { font-size: 16px; }
.footer-brand .logo-mark { font-size: 26px; }
.cat-card h3 { font-size: 15px; }
.brand-tile { aspect-ratio: 2.4 / 1; font-size: 12px; }
}
/* Mobile menu drawer */
.mobile-menu {
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100vh; /* fallback for browsers without dvh */
height: 100dvh; /* iOS/Android: tracks the *visible* viewport, so
the last nav item never hides behind the URL bar */
background: var(--pitch-pine);
color: var(--raw-canvas);
z-index: 200;
display: none;
flex-direction: column;
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
overscroll-behavior: contain; /* don't bounce-scroll the body behind */
/* keep content clear of the notch / home indicator */
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-menu.open { display: flex; }
.mobile-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 20px;
padding-left: max(20px, env(safe-area-inset-left, 0px));
padding-right: max(20px, env(safe-area-inset-right, 0px));
border-bottom: 1px solid rgba(245, 242, 235, 0.15);
}
.mobile-menu-header .logo-mark { color: var(--raw-canvas); font-size: 22px; }
.mobile-menu-header .logo-mark em { color: var(--desert-khaki); }
.mobile-menu-close {
background: transparent;
border: 1px solid var(--desert-khaki);
color: var(--raw-canvas);
padding: 10px 16px; /* was 6px 14px — now a comfortable tap target */
min-height: 40px;
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.15em;
cursor: pointer;
}
.mobile-menu nav {
padding: 24px 20px;
padding-left: max(20px, env(safe-area-inset-left, 0px));
padding-right: max(20px, env(safe-area-inset-right, 0px));
flex: 1;
}
.mobile-menu nav a {
display: block;
padding: 16px 0;
border-bottom: 1px solid rgba(245, 242, 235, 0.1);
font-family: var(--font-display);
font-size: 24px;
color: var(--raw-canvas);
cursor: pointer;
}
.mobile-menu nav a em { color: var(--desert-khaki); font-style: italic; }
/* ==========================================================
V2 CLEANUP — legibility, type scale, mobile, density
Loaded last so it overrides earlier rules where needed.
========================================================== */
:root {
/* Darker body color — the old bunker olive (#5A5542) was 4.6:1 on cream;
this lifts paragraph copy to ~7:1 for comfortable long-form reading. */
--body-text: #3F3826;
--body-text-soft: #574F36;
--hairline: rgba(60, 52, 31, 0.18);
/* Density tokens — driven by the Tweaks panel */
--section-pad: clamp(64px, 8vw, 100px);
--container-pad: clamp(20px, 4vw, 32px);
}
/* Body type — slightly larger default, tighter line-height for screens */
body { font-size: 17px; line-height: 1.6; color: var(--pitch-pine); }
p { color: var(--body-text); max-width: 62ch; }
p.lead { font-size: 19px; line-height: 1.55; color: var(--pitch-pine); }
/* Tighter, less screamy display scale.
Old: h1 clamped at 96–112px (visually shouty + tight on mid-screens).
New: top end is 80px, bottom is forgiving on small phones. */
h1 { font-size: clamp(40px, 6.5vw, 80px); line-height: 1.04; letter-spacing: -0.015em; }
h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -0.01em; }
h3 { font-size: clamp(20px, 2vw, 26px); line-height: 1.25; }
h4 { font-size: 17px; line-height: 1.35; }
.hero h1 { font-size: clamp(44px, 7vw, 88px); }
.page-hero h1 { font-size: clamp(36px, 5.5vw, 64px); }
/* Hero italic accent — guarantee a visible line break and breathing room */
.hero h1 em { display: block; margin-top: 4px; }
/* Section rhythm: unify the pad token so density tweaks affect everything */
.campaign-strip, .categories, .brands-strip, .locations-preview,
.promise, .insta-strip, .faq-section, .story-section,
.locations-full, .how-to-shop, .price-match, .about-page, .reviews-section {
padding-top: var(--section-pad);
padding-bottom: var(--section-pad);
}
.container, .container-narrow, .util-inner, .header-inner, .call-strip-inner {
padding-left: var(--container-pad);
padding-right: var(--container-pad);
}
/* Hero subheading — bump the sub-paragraph to 18px and ease the contrast */
.hero-sub { font-size: 18px; line-height: 1.55; opacity: 0.95; max-width: 46ch; }
/* Improve link contrast in the dark utility bar */
.util-bar { font-size: 12px; padding: 9px 0; }
.util-bar a { transition: color 0.15s ease; }
.util-bar a:hover { color: var(--desert-khaki-light); text-decoration: none; }
/* Header — tighten the 40px gap, add a real focus ring */
.header-inner { padding: 16px var(--container-pad); gap: 28px; }
.nav-primary > a:focus-visible,
.nav-primary > .nav-item > a:focus-visible,
.header-cta:focus-visible,
.btn:focus-visible,
.mobile-toggle:focus-visible {
outline: 2px solid var(--vintage-signal);
outline-offset: 3px;
}
/* Section eyebrows — slightly bigger so they're not borderline-illegible */
.eyebrow { font-size: 12px; letter-spacing: 0.2em; }
/* Body copy across cards — bump the small 13–14px copy to 15px */
.campaign-card p,
.promise-card p,
.step p,
.loc-card .loc-detail,
.loc-detail-card .loc-addr,
.insta-head p,
.faq-a,
.terms-list p,
.timeline-event { font-size: 15px; line-height: 1.65; }
.footer-col a { font-size: 15px; }
.footer-bottom { font-size: 11px; }
/* FAQ — bigger question text + comfy answer block */
.faq-q h4 { font-size: 20px; }
.faq-a { color: var(--body-text); max-width: 62ch; }
/* Buttons — slightly more touch-friendly, kinder hit area */
.btn { padding: 15px 26px; font-size: 12px; min-height: 44px; }
.header-cta { font-size: 12px; padding: 12px 18px; min-height: 40px; }
/* Brand-tile rhythm — current grid renders awkwardly tall on wide viewports */
.brand-tile { font-size: 15px; aspect-ratio: 1.8 / 1; }
/* Cards — soften over-bright khaki accents in the campaign cards */
.campaign-card h3 em,
.cat-card h3 em,
.section-head h2 em,
.accent-italic { color: var(--desert-khaki); }
/* === MOBILE — tightening the existing 4-tier breakpoints === */
@media (max-width: 1080px) {
.header-inner { gap: 16px; }
.hero-content { padding: clamp(48px, 7vw, 80px) clamp(24px, 5vw, 56px); }
.hero-image { min-height: 320px; aspect-ratio: 16/10; }
.hero h1 { font-size: clamp(40px, 7vw, 64px); }
}
@media (max-width: 768px) {
body { font-size: 16px; }
.hero { grid-template-columns: 1fr; }
.hero-image { aspect-ratio: 16/9; min-height: 260px; order: -1; }
.hero-content { padding: 48px 24px 56px; }
.hero h1 { font-size: clamp(38px, 9vw, 56px); }
.hero-actions { gap: 10px; }
.hero-actions .btn { flex: 1 1 auto; justify-content: center; }
.hero-meta { gap: 24px 32px; }
.hero-meta strong { font-size: 24px; }
.campaign-card { padding: 26px 22px; }
.campaign-card h3 { font-size: 22px; }
.insta-head { grid-template-columns: 1fr; gap: 16px; }
.insta-head p { max-width: none; }
.insta-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
.faq-grid { grid-template-columns: 1fr; gap: 32px; }
.faq-q h4 { font-size: 18px; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
.footer-brand { grid-column: 1 / -1; }
.footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
}
@media (max-width: 560px) {
h1 { font-size: clamp(32px, 9vw, 48px); }
.hero h1 { font-size: clamp(34px, 10vw, 48px); }
.header-inner { padding: 12px 16px; gap: 12px; }
.logo-mark { font-size: 20px; }
.logo-label { font-size: 8px; letter-spacing: 0.18em; }
.mobile-toggle { padding: 10px 14px; min-height: 40px; }
.hero-content { padding: 40px 20px 48px; }
.hero-stamp { width: 88px; height: 88px; bottom: 16px; right: 16px; font-size: 8px; }
.hero-stamp strong { font-size: 20px; }
.hero-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hero-meta div { font-size: 11px; }
.hero-meta strong { font-size: 20px; }
.campaign-grid, .promise-grid, .step-grid { grid-template-columns: 1fr; gap: 12px; }
.cat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.cat-card { aspect-ratio: 1/1; padding: 14px; }
.cat-card h3 { font-size: 16px; }
.brands-grid { grid-template-columns: repeat(2, 1fr); }
.brand-tile { aspect-ratio: 2/1; font-size: 13px; }
.footer-grid { grid-template-columns: 1fr; gap: 28px; }
.footer-brand { grid-column: auto; }
.ask-prompt { padding: 28px 20px; gap: 20px; }
.contact-block { padding: 32px 20px; gap: 24px; }
.contact-option { flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; }
.contact-option .contact-value { font-size: 17px; }
.timeline { padding-left: 24px; }
.timeline::before { left: 4px; }
.timeline-item::before { left: -24px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Leaflet map mount: fills the parent .loc-region-map-frame edge-to-edge */
.leaflet-mount {
width: 100%;
height: 100%;
background: var(--bunker-olive);
/* Brief placeholder shimmer while tiles load on first paint */
background-image: linear-gradient(135deg, var(--bunker-olive), var(--pitch-pine));
}
/* Custom rust-colored pin marker. Drawn as a div with inline SVG so we don't
need to ship marker image assets. Pointy bottom anchors at the exact coordinate. */
.surplus-pin {
width: 28px;
height: 38px;
background-color: transparent;
border: none;
/* The actual visual is the inline SVG inside via background-image */
}
/* Popup card matches the rest of the site's warm-cream card aesthetic */
.leaflet-popup-content-wrapper {
background: var(--raw-canvas) !important;
border: 1px solid var(--bunker-olive) !important;
border-radius: 0 !important;
padding: 2px !important;
box-shadow: 0 6px 16px var(--paper-shadow) !important;
}
.leaflet-popup-tip {
background: var(--raw-canvas) !important;
border: 1px solid var(--bunker-olive) !important;
}
.leaflet-popup-content {
font-family: var(--font-body) !important;
color: var(--pitch-pine) !important;
margin: 14px 18px !important;
line-height: 1.5 !important;
font-size: 14px !important;
}
.leaflet-popup-content strong {
font-family: var(--font-display);
font-size: 16px;
display: block;
margin-bottom: 2px;
color: var(--pitch-pine);
}
.leaflet-popup-content .popup-meta {
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--desert-khaki);
margin: 6px 0 8px;
}
.leaflet-popup-content a {
display: inline-block;
margin-top: 4px;
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--vintage-signal);
border-bottom: 1px solid var(--vintage-signal);
padding-bottom: 2px;
}
.leaflet-popup-content a:hover {
color: var(--pitch-pine);
border-color: var(--pitch-pine);
}
.leaflet-popup-close-button {
color: var(--bunker-olive) !important;
padding: 6px 8px 0 0 !important;
}
/* Leaflet attribution control — tone it down to match site palette */
.leaflet-control-attribution {
background: rgba(245, 242, 235, 0.85) !important;
color: var(--bunker-olive) !important;
font-family: var(--font-body) !important;
font-size: 10px !important;
padding: 2px 8px !important;
}
.leaflet-control-attribution a {
color: var(--vintage-signal) !important;
}
/* ===== SEARCH OVERLAY ===== */
.search-overlay {
position: fixed; inset: 0; z-index: 500;
background: rgba(60, 52, 31, 0.65);
display: none;
padding: 8vh 20px 20px;
padding-left: max(20px, env(safe-area-inset-left, 0px));
padding-right: max(20px, env(safe-area-inset-right, 0px));
overscroll-behavior: contain;
}
.search-overlay.open { display: block; }
.search-panel {
max-width: 680px; margin: 0 auto;
background: var(--raw-canvas);
border: 2px solid var(--pitch-pine);
box-shadow: 0 18px 50px rgba(0,0,0,0.35);
padding: 22px 24px 12px;
max-height: 80vh;
max-height: 80dvh;
display: flex; flex-direction: column;
}
.search-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.search-eyebrow { font-family: var(--font-label); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vintage-signal); }
.search-close { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; background: none; border: 1.5px solid var(--bunker-olive); color: var(--pitch-pine); padding: 10px 14px; min-height: 40px; cursor: pointer; flex-shrink: 0; }
.search-close:hover { background: var(--pitch-pine); color: var(--raw-canvas); }
.search-input {
width: 100%; font-family: var(--font-body); font-size: 18px;
padding: 13px 16px; border: 1.5px solid var(--bunker-olive);
background: var(--raw-canvas-warm); color: var(--pitch-pine);
}
.search-input:focus { outline: 2px solid var(--vintage-signal); outline-offset: 1px; }
.search-results { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; margin-top: 10px; padding-bottom: 10px; }
.search-result {
display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
padding: 13px 8px; border-bottom: 1px solid rgba(90, 85, 66, 0.25);
}
.search-result:hover, .search-result:focus-visible { background: var(--desert-khaki-soft); outline: none; }
/* The tint alone is too faint to be a keyboard indicator; give focus a real outline. */
.search-result:focus-visible { outline: 2px solid var(--vintage-signal); outline-offset: -2px; }
.search-result .sr-item { font-size: 15px; color: var(--pitch-pine); }
.search-result .sr-meta { font-family: var(--font-label); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faded-fatigue); white-space: nowrap; }
.search-hint, .search-empty { padding: 22px 8px; color: var(--faded-fatigue); font-size: 14px; }
.search-empty strong { font-family: var(--font-display); font-size: 24px; color: var(--pitch-pine); display: block; margin-bottom: 6px; }
.search-empty a { color: var(--vintage-signal); border-bottom: 1px solid var(--vintage-signal); }
/* ===== STORE HOURS LIGHTBOX ===== */
.hours-modal {
position: fixed; inset: 0; z-index: 520;
background: rgba(60, 52, 31, 0.65);
display: none;
padding: 8vh 20px 20px;
padding-left: max(20px, env(safe-area-inset-left, 0px));
padding-right: max(20px, env(safe-area-inset-right, 0px));
overscroll-behavior: contain;
}
.hours-modal.open { display: block; animation: hours-fade 0.18s ease; }
@keyframes hours-fade { from { opacity: 0; } to { opacity: 1; } }
.hours-panel {
max-width: 460px; margin: 0 auto;
background: var(--raw-canvas);
border: 2px solid var(--pitch-pine);
box-shadow: 0 18px 50px rgba(0,0,0,0.35);
padding: 22px 24px 18px;
max-height: 84vh; max-height: 84dvh;
overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.hours-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.hours-eyebrow { font-family: var(--font-label); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vintage-signal); margin-bottom: 8px; }
.hours-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-label); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.hours-status.open { color: var(--woodland-drab); }
.hours-status.closed { color: var(--vintage-signal); }
.hours-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.hours-status.open .hours-dot { box-shadow: 0 0 0 0 rgba(71,92,62,0.5); animation: live-pulse 2.4s ease infinite; }
.hours-close { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; background: none; border: 1.5px solid var(--bunker-olive); color: var(--pitch-pine); padding: 9px 14px; min-height: 40px; cursor: pointer; flex-shrink: 0; -webkit-appearance: none; appearance: none; }
.hours-close:hover { background: var(--pitch-pine); color: var(--raw-canvas); }
.hours-table { border-top: 1.5px solid var(--bunker-olive); }
.hours-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 6px; border-bottom: 1px solid rgba(90, 85, 66, 0.25); }
.hours-row.today { background: var(--desert-khaki-soft); margin: 0 -6px; padding: 13px 12px; border-bottom-color: rgba(90, 85, 66, 0.25); }
.hours-row .hr-days { font-family: var(--font-display); font-size: 16px; color: var(--pitch-pine); }
.hours-row .hr-today-tag { font-family: var(--font-label); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--raw-canvas); background: var(--vintage-signal); padding: 2px 6px; border-radius: 2px; margin-left: 8px; vertical-align: middle; }
.hours-row .hr-time { font-family: var(--font-label); font-size: 13px; letter-spacing: 0.08em; color: var(--woodland-drab); white-space: nowrap; }
.hours-holidays { margin-top: 18px; }
.hours-subhead { font-family: var(--font-label); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vintage-signal); margin-bottom: 8px; }
.hours-holiday { font-size: 13.5px; color: var(--pitch-pine); padding: 5px 6px; border-left: 3px solid var(--desert-khaki); background: var(--raw-canvas-warm); margin-bottom: 4px; padding-left: 12px; }
.hours-stores { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; padding-top: 18px; border-top: 1px dashed rgba(90, 85, 66, 0.4); }
.hours-store .hs-name { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pitch-pine); font-weight: 700; margin-bottom: 5px; }
.hours-store .hs-addr { font-size: 12.5px; color: var(--faded-fatigue); line-height: 1.4; margin-bottom: 5px; }
.hours-store .hs-phone { font-family: var(--font-label); font-size: 12px; letter-spacing: 0.06em; color: var(--vintage-signal); border-bottom: 1px solid var(--vintage-signal); }
.hours-foot { margin-top: 18px; font-family: var(--font-label); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faded-fatigue); text-align: center; }
@media (max-width: 420px) {
.hours-modal {
padding: 5vh 12px 12px;
padding-left: max(12px, env(safe-area-inset-left, 0px));
padding-right: max(12px, env(safe-area-inset-right, 0px));
}
.hours-stores { grid-template-columns: 1fr; gap: 12px; }
}
/* ===== SNOW DAY ===== */
.snowflake {
position: fixed; top: -24px; z-index: 90; color: var(--raw-canvas);
text-shadow: 0 1px 2px rgba(60,52,31,0.4);
pointer-events: none; animation: snowfall linear infinite;
}
@keyframes snowfall {
to { transform: translateY(110vh) translateX(28px) rotate(220deg); }
}
/* Falling lot tags — the 1947 easter egg, available on every page */
.lot-tag-fall { position: fixed; top: -40px; z-index: 9999; font-family: var(--font-label); font-size: 10px; letter-spacing: 0.12em; background: var(--raw-canvas); border: 1.5px solid var(--pitch-pine); color: var(--pitch-pine); padding: 4px 7px; animation: lotfall 2.8s linear forwards; pointer-events: none; }
@keyframes lotfall { to { transform: translateY(110vh) rotate(380deg); } }
/* =====================================================================
DESIGN POLISH LAYER — loaded last on purpose; refinements that win
the cascade over earlier rules at equal specificity.
===================================================================== */
/* --- Buttons never break mid-label; arrows never orphan onto a new line --- */
.btn, .header-cta { white-space: nowrap; }
/* --- Header CTAs: one line each, identical height, never squeezed --- */
.header-actions { flex-shrink: 0; }
.header-cta { flex-shrink: 0; }
/* --- Buttons on dark panels (brand heroes, Dig end screen) --- */
.btn.on-dark { border-color: var(--desert-khaki); color: var(--desert-khaki); background: transparent; }
.btn.on-dark:hover { background: var(--desert-khaki); color: var(--pitch-pine); border-color: var(--desert-khaki); }
/* --- Location cards: Directions + Call sit side by side with real buffer --- */
.loc-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.loc-actions .btn { padding: 13px 20px; letter-spacing: 0.14em; }
/* --- FLUID HEADER ---
Sizes scale continuously with the viewport, and elements yield in a
measured order (thresholds verified against real font metrics —
the Georgia wordmark runs ~20% wider than monospace):
>=1500 logo + 7 nav items + Search + Visit Us + Shop With Us
1181-1499 Visit Us steps aside (Locations lives in the nav)
<=1180 nav collapses to Menu; Search stays beside the logo
<=640 Search moves into the menu; logo + Menu only --- */
.header-inner { gap: clamp(12px, 2vw, 48px); padding-left: clamp(16px, 2.5vw, 32px); padding-right: clamp(16px, 2.5vw, 32px); }
@media (min-width: 1181px) {
.logo-mark { font-size: clamp(20px, 1.95vw, 28px); }
}
.nav-primary > a, .nav-primary > .nav-item > a { font-size: clamp(10px, 0.85vw, 12px); letter-spacing: 0.08em; padding: 10px clamp(6px, 0.75vw, 14px); }
.header-cta { padding: clamp(8px, 0.85vw, 12px) clamp(11px, 1.5vw, 20px); letter-spacing: 0.14em; }
.header-actions { gap: clamp(8px, 0.9vw, 14px); }
@media (max-width: 1500px) {
.header-cta.header-cta--visit { display: none; }
}
@media (max-width: 1180px) {
/* burger takes over while the full desktop header still fits comfortably */
.nav-primary { display: none; }
.mobile-toggle { display: inline-flex; align-items: center; }
.header-inner { grid-template-columns: 1fr auto; gap: 16px; }
.header-cta.header-cta--visit, .header-cta.primary { display: none; }
.header-cta.js-search-open { display: inline-block; }
}
/* --- Mobile header: logo + Search + Menu. Three text CTAs don't fit. --- */
@media (max-width: 1080px) {
.header-actions { gap: 8px; }
}
/* --- Search overlay on phones --- */
@media (max-width: 640px) {
/* Keep the notch/curved-corner insets on landscape iPhones. */
.search-overlay {
padding: 12px;
padding-left: max(12px, env(safe-area-inset-left, 0px));
padding-right: max(12px, env(safe-area-inset-right, 0px));
}
.search-panel { max-height: 92vh; max-height: 92dvh; padding: 16px 16px 8px; }
.search-result { flex-direction: column; align-items: flex-start; gap: 3px; }
.search-result .sr-meta { white-space: normal; }
}
/* --- Tiny screens: the Dig HUD stats stack cleanly --- */
@media (max-width: 420px) {
.dig-hud { justify-content: flex-start; }
}
/* --- "The Surplus Store" stays on one line, header and footer --- */
.logo-mark { white-space: nowrap; }
@media (max-width: 640px) {
/* the header Search button yields to the menu's Search link so the
full wordmark fits next to MENU on one line */
.header-cta.js-search-open { display: none; }
.footer-brand .logo-mark { font-size: 24px; }
}
@media (max-width: 400px) {
.logo-mark { font-size: 17px; }
.footer-brand .logo-mark { font-size: 21px; }
}
@media (max-width: 360px) {
.logo-mark { font-size: 16px; }
.header-inner { padding-left: 14px; padding-right: 14px; gap: 10px; }
}
/* --- Category brand pills: linked ones are real anchors --- */
/* Keep anchors using the same flex centering as the span pills (an earlier
display:inline-block was pushing linked brands to the top of their cell). */
a.catalog-brand-pill {
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
/* Clickable brands read as links the way the rest of the site marks
interactive type: the rust accent (vintage-signal), kept flat. Same cream
cell as its neighbors, rust text, and a thin rust underline accent — no
wash, no inset glow (that double-bordered look fought the site's clean
bordered-cell style). Hover then deepens to solid pitch pine. */
/* Clickable brands borrow the logo's two-tone: a warm gold cell (the tan of
"Surplus") with pitch-pine type (the "The"/"Store" ink). A slightly deeper
gold bottom edge gives it a printed, stamped feel rather than a flat block,
so the linked brands read as crafted little tags. Hover lifts the whole
thing to solid pine with cream type \u2014 the same logo palette, inverted. */
a.catalog-brand-pill.linked {
background: var(--desert-khaki-light);
color: var(--pitch-pine);
box-shadow: inset 0 -3px 0 rgba(60, 52, 31, 0.22);
}
a.catalog-brand-pill.linked:hover,
a.catalog-brand-pill.linked:focus-visible {
background: var(--pitch-pine);
color: var(--desert-khaki-light);
border-color: var(--pitch-pine);
box-shadow: none;
}
/* --- Brands: one slim band instead of a wall of tiles --- */
.brands-strip { padding: 30px 0; border-top: 1px solid rgba(90, 85, 66, 0.25); border-bottom: 1px solid rgba(90, 85, 66, 0.25); }
.brands-slim { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
.brands-slim-row { display: flex; flex-wrap: wrap; gap: 8px; }
.brand-pill { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; border: 1.5px solid var(--bunker-olive); padding: 8px 14px; color: var(--pitch-pine); white-space: nowrap; }
.brand-pill:hover { background: var(--pitch-pine); color: var(--raw-canvas); border-color: var(--pitch-pine); }
.brand-pill.more { border-style: dashed; border-color: var(--vintage-signal); color: var(--vintage-signal); }
.brand-pill.more:hover { background: var(--vintage-signal); color: var(--raw-canvas); }
/* --- Home teaser: arcade pitch beside a playable mini Runner --- */
.teaser-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: center; }
.mini-runner { border: 1.5px solid var(--desert-khaki); background: var(--raw-canvas); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.22); }
.mini-runner canvas { display: block; width: 100%; height: 300px; touch-action: pan-y; cursor: pointer; }
@media (max-width: 880px) {
.teaser-grid { grid-template-columns: 1fr; gap: 30px; }
.mini-runner canvas { height: 260px; }
}
/* --- Headings run their full line; no width caps breaking sentences --- */
.section-head h2 { max-width: none; }
.page-hero h1 { max-width: none; }
/* --- Home page section rhythm: backgrounds alternate so each section
reads as its own band. Order: hero / categories (canvas, warm cards)
/ what just came in (warm) / Colorado (canvas, warm cards) / reviews
(warm, canvas cards) / story (dark) / brands (canvas) / visit us
(warm, canvas cards) / FAQ (canvas) / dig teaser (dark) / promise
(warm) / newsletter+footer (dark). --- */
.insta-strip { background: var(--raw-canvas-warm); }
.campaign-strip { background: var(--raw-canvas); }
.campaign-card { background: var(--raw-canvas-warm); }
.faq-section { background: var(--raw-canvas); }
.promise { background: var(--raw-canvas-warm); }
/* --- Solid signal CTA — for buttons sitting on dark panels --- */
.btn.signal-solid { background: var(--vintage-signal); border-color: var(--vintage-signal); color: var(--raw-canvas); }
.btn.signal-solid:hover { background: var(--desert-khaki); border-color: var(--desert-khaki); color: var(--pitch-pine); }
/* ==========================================================
DEVICE POLISH — iOS / Android / phone / tablet (added v1.0.7)
Additive, scoped, loaded last. Fixes the small touch + layout
issues that only show up on real handsets and iPads.
========================================================== */
/* Footer links: comfortable tap targets on touch screens. The base 14px
line + 10px margin is only ~24px tall — easy to mis-tap. Give each link
real vertical padding on phones/tablets without changing the desktop look. */
@media (max-width: 1080px) {
.footer-col li { margin-bottom: 2px; }
.footer-col a { display: inline-block; padding: 8px 0; }
}
/* The home-page mini Runner: match the full game's touch handling so a
vertical swipe scrolls the page until the player actually starts it. */
.mini-runner canvas { touch-action: pan-y; }
/* Tablet portrait (iPad ~768–834px): the hero CTAs and section grids have
room for two columns; keep cards from getting awkwardly wide-and-short. */
@media (min-width: 700px) and (max-width: 900px) {
.hero-actions .btn { flex: 0 1 auto; }
}
/* Landscape phones / short viewports: the search panel shouldn't get taller
than the screen and trap the close button off-canvas. */
@media (max-height: 480px) {
.search-overlay { padding-top: 4vh; }
.search-panel { max-height: 92vh; max-height: 92dvh; }
.mobile-menu nav a { padding: 12px 0; font-size: 20px; }
}
/* Honor a true tap (no hover) so :hover states don't "stick" on touch after
a tap on iOS/Android. Only neutralize the decorative lift transforms. */
@media (hover: none) {
.dig-bin:hover { transform: none; }
.brand-pill:hover { background: transparent; color: var(--pitch-pine); border-color: var(--bunker-olive); }
.brand-pill:active { background: var(--pitch-pine); color: var(--raw-canvas); border-color: var(--pitch-pine); }
}
/* Hero "Est. 1947 · Colorado" stamp: on mobile the image stacks directly on
top of the dark content block, so a stamp sitting ~16px off the bottom edge
reads as cut off at that hard seam. Lift it clear of the seam, and make the
image tall enough that the lower-right corner (where the stamp lives) is
never cropped out of frame. Right offset kept generous so the circle never
kisses the right edge either. */
@media (max-width: 1080px) {
.hero-image { min-height: 360px; }
}
@media (max-width: 768px) {
.hero-image { min-height: 340px; }
.hero-stamp { bottom: 28px; right: 24px; }
}
@media (max-width: 640px) {
.hero-image { min-height: 320px; }
.hero-stamp { bottom: 26px; right: 20px; }
}
@media (max-width: 420px) {
.hero-image { min-height: 300px; }
.hero-stamp { width: 84px; height: 84px; bottom: 24px; right: 18px; }
}
/* ==========================================================
RESPONSIVE CONTINUITY — seamless resize at every width
(added v1.0.7)
Consolidated, monotonic rules loaded last so they win cleanly
over the older per-breakpoint passes. Goal: no ragged wraps,
no mid-string clipping, no stepwise font jumps — every stopping
point between sizes looks intentional.
========================================================== */
/* ---------- Utility bar ----------
One coherent system. Font scales fluidly (no steps). Items never
clip (each is nowrap). When the row truly can't fit, it wraps
centered and balanced with a stable row-gap — so a paused resize
reads as a tidy two-line bar, not a broken one. The least useful
item (announcement) sheds first; the live pill is always kept. */
.util-bar {
font-size: 11px; /* fallback */
font-size: clamp(9.5px, 1.4vw, 12px);
padding: 8px 0; /* fallback */
padding: clamp(6px, 1vw, 9px) 0;
}
.util-inner {
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 4px 16px; /* fallback */
gap: 4px clamp(8px, 1.6vw, 24px);
padding-left: max(16px, env(safe-area-inset-left, 0px));
padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.util-right {
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 4px 14px; /* fallback */
gap: 4px clamp(8px, 1.6vw, 18px);
}
/* Phone numbers never break across lines. The announcement span, however,
MUST be allowed to wrap — with body{overflow-x:clip} a nowrap announcement
wider than the viewport is silently truncated (and holiday notices are the
whole point of that field), so it is intentionally excluded here. */
.util-right > a,
.live-pill { white-space: nowrap; }
.util-right > span:not(.pipe) { white-space: normal; text-align: center; }
.live-pill { font-size: clamp(9px, 1.2vw, 10px); }
/* Pipes are decorative separators; once the row wraps they're noise.
Hide them as soon as the layout tightens, keeping the items clean. */
@media (max-width: 820px) {
.util-bar .pipe { display: none; }
}
/* Narrow phones: the two full phone strings + pill can't share a row
without dominating the screen. Keep the live pill (the useful, live
bit) and drop the phone links here — they're one tap away in the
header/footer. This is a single clean swap, not a wrap. */
@media (max-width: 560px) {
.util-right > a { display: none; }
.util-inner { gap: 0; }
}
/* ---------- Header / logo: fluid, never colliding ----------
Logo type scales smoothly so it never jumps between breakpoints,
and the header keeps a sensible fluid gap until the nav collapses. */
/* One fluid rule that actually spans the intended range (16px on a 360px
phone → 28px on desktop). The old clamp(19px,…,26px) capped below the
designed 28px and floored above the tuned 16px, silently overriding the
small-phone and desktop rules elsewhere in the file. */
.logo-mark { font-size: clamp(16px, 2.4vw, 28px); }
.logo-label { font-size: clamp(7px, 0.9vw, 9px); }
.header-inner { gap: clamp(12px, 2.2vw, 28px); }
/* ---------- Section rhythm: fluid vertical padding ----------
Replaces the stepped 48/56/64px jumps with one smooth scale so
section spacing eases as the viewport changes rather than snapping. */
.campaign-strip, .categories, .brands-strip, .locations-preview,
.reviews-section, .promise, .story-section, .locations-full,
.how-to-shop, .price-match, .about-page {
padding-top: clamp(48px, 7vw, 100px);
padding-bottom: clamp(48px, 7vw, 100px);
}
/* ---------- Hero meta row: balanced, never lopsided ----------
The 75+/4/2/1,000+ stats wrap to a tidy 2x2 on narrow screens
instead of an uneven 3+1, at every stopping width. */
@media (max-width: 600px) {
.hero-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.hero-meta div { min-width: 0; }
}
/* ---------- Hero stacking is consistent across the whole 1-column range ----------
The hero collapses to a single column at 1080px, but the photo only moved
above the text at 768px — so between 769-1080px the photo sat *below* the
copy, then leapt to the top as you crossed 768. Move it up at 1080 so the
photo-over-copy arrangement holds steady the moment the hero stacks. */
@media (max-width: 1080px) {
.hero-image { order: -1; }
}
/* ---------- Guard the in-between zones (the 700-900px "tablet gap") ----------
Multi-column grids that look fine wide and fine narrow can get
awkwardly stretched in the middle. Hold them to comfortable shapes. */
@media (min-width: 641px) and (max-width: 900px) {
.cat-grid { grid-template-columns: repeat(3, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
/* ---------- Nothing ever forces a sideways scrollbar ----------
A belt-and-suspenders guard: long unbroken strings (URLs, IDs in
copy) wrap instead of pushing the page wider than the screen. */
body { overflow-x: clip; }
h1, h2, h3, .hero h1 { overflow-wrap: break-word; }
/* ==========================================================
SESSION REFINEMENTS — 2026-06 review pass
Loaded last so it wins the cascade. Groups:
1. Home background-band alternation (after section cuts)
2. Hero "How to Shop" / pricing panel in the hero dead space
========================================================== */
/* --- 1. Background bands ---------------------------------------------
The home page lost the campaign, story (dark), brands and promise
sections. With those gone, insta-strip / reviews / locations all
defaulted to warm and stacked three-warm-in-a-row. Re-derive a clean
canvas/warm alternation between the two dark anchors (hero, dig teaser):
hero(dark) · categories(canvas) · insta(warm) · reviews(canvas)
· locations(warm) · faq(canvas) · dig(dark)
Only reviews needs to flip warm->canvas; its cards flip the other way
so they keep their contrast against the section. */
.reviews-section { background: var(--raw-canvas); }
.review-card { background: var(--raw-canvas-warm); }
/* --- 2. Hero "How to Shop" / pricing panel --------------------------
The panel now lives INSIDE .hero-content (the left text column), directly
under the 75+/4/2/1,000+ stats row. It's a normal in-flow block on every
screen size, so it never overlaps the photo. A thin top divider separates
it from the stats above. */
.hero-shop-panel {
margin-top: 32px;
padding-top: 26px;
border-top: 1px solid rgba(212, 197, 158, 0.45); /* desert-khaki, dimmed */
max-width: 52ch;
}
.hero-shop-panel .hsp-eyebrow {
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--desert-khaki-light);
font-weight: 700;
margin-bottom: 8px;
}
.hero-shop-panel .hsp-line {
font-family: var(--font-display);
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.35;
color: var(--raw-canvas);
margin: 0 0 16px;
}
.hero-shop-panel .hsp-line em { color: var(--desert-khaki-light); font-style: italic; }
.hero-shop-panel .hsp-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-shop-panel .hsp-actions .btn {
border-color: var(--desert-khaki-light);
color: var(--desert-khaki-light);
background: transparent;
padding: 11px 18px;
min-height: 0;
}
.hero-shop-panel .hsp-actions .btn:hover,
.hero-shop-panel .hsp-actions .btn:focus-visible {
background: var(--desert-khaki-light);
color: var(--pitch-pine);
border-color: var(--desert-khaki-light);
}
.hero-shop-panel .hsp-actions .btn.primary {
background: var(--desert-khaki-light);
color: var(--pitch-pine);
}
.hero-shop-panel .hsp-actions .btn.primary:hover,
.hero-shop-panel .hsp-actions .btn.primary:focus-visible {
background: var(--raw-canvas);
border-color: var(--raw-canvas);
color: var(--pitch-pine);
}
/* On smaller screens the hero stacks to a single column. The panel is part
of .hero-content, so it flows under the stats automatically; just trim the
button layout on the narrowest phones. */
@media (max-width: 640px) {
.hero-shop-panel { margin-top: 26px; padding-top: 22px; max-width: none; }
.hero-shop-panel .hsp-actions .btn { flex: 1 1 auto; justify-content: center; }
}
/* --- 3. Products "in-store only" notice band -----------------------
Sits directly under the Products page dark hero. Warm-cream band that
states plainly: no online cart, low prices, call or come in. Mirrors
the hero shop panel's message so the point lands wherever a visitor
enters. */
.shop-notice {
background: var(--raw-canvas-warm);
border-bottom: 1px solid var(--bunker-olive);
padding: 28px 0;
}
.shop-notice-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px 40px;
flex-wrap: wrap;
}
.shop-notice-text { flex: 1 1 460px; min-width: 0; }
.shop-notice-tag {
display: inline-block;
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--vintage-signal);
font-weight: 700;
margin-bottom: 8px;
}
.shop-notice-text p {
margin: 0;
color: var(--body-text);
font-size: 15px;
line-height: 1.6;
max-width: 64ch;
}
.shop-notice-actions { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; }
@media (max-width: 640px) {
.shop-notice-actions { width: 100%; }
.shop-notice-actions .btn { flex: 1 1 auto; justify-content: center; }
}
/* ==========================================================
SESSION MOBILE POLISH — 2026-06 review pass (loaded last)
Targeted refinements for phone comfort. The 4-tier responsive
system already handles layout collapse; these address tap-target
size, breathing room, and a few spots that felt cramped on phones.
========================================================== */
@media (max-width: 768px) {
/* Comfortable tap targets for the whole-card links on touch */
.cat-card, .loc-card, .campaign-card { min-height: 96px; }
/* FAQ rows: give the summary a real tap height so the whole row,
not just the text, is easy to thumb open. */
details.faq-item summary { min-height: 56px; display: flex; align-items: center; }
.faq-item { padding: 6px 0; }
.faq-q { width: 100%; }
/* Category-page intro quote shrinks so it doesn't dominate the screen */
.catalog-content > .intro-block p { font-size: 18px; line-height: 1.45; }
/* Sidebar pill links: a touch taller for easier tapping */
.catalog-sidebar a { padding: 9px 13px; }
/* Department subsection lists: a hair more line spacing for scanability */
.subsection-items { line-height: 1.9; }
/* Contact option rows (Locations / How to Shop): tappable phone values */
.contact-option { min-height: 56px; }
a.contact-value { padding: 4px 0; display: inline-block; }
}
@media (max-width: 420px) {
/* Hero stat row: 2x2 with comfortable gaps; numbers never crowd */
.hero-meta { gap: 18px 16px; }
.hero-meta strong { font-size: 22px; }
/* Keep the "We do not sell online" panel readable on the smallest phones */
.hero-shop-panel .hsp-line { font-size: 17px; }
/* Department brand pills: 2-up stays legible */
.catalog-brands-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ==========================================================
SESSION REFINEMENT — "Just call" phone boxes (ask-prompt)
The two phone buttons sat in a tall, centered column and stretched
to match the height of the text block beside them, leaving a lot of
dead space inside and around each box. Tighten them: size to content,
top-align, snug padding, left-aligned text so the label sits right
above the number with no float. Loaded last so it wins.
========================================================== */
.ask-prompt { align-items: start; } /* don't vertically center the phone column */
.ask-prompt .ask-phones {
gap: 10px;
align-self: start;
}
.ask-prompt .ask-phones a {
padding: 10px 18px; /* was 12px 24px */
text-align: left; /* label + number flush-left, no centered float */
line-height: 1.15;
display: inline-flex;
flex-direction: column;
justify-content: center;
}
.ask-prompt .ask-phones a span {
margin-bottom: 2px; /* was 4px — tighter label-to-number gap */
}
/* Mobile: full-width tappable rows, but no taller than the content needs.
Put the label and number on one line so each box is compact. */
@media (max-width: 640px) {
.ask-prompt .ask-phones { flex-direction: column; gap: 8px; width: 100%; }
.ask-prompt .ask-phones a {
flex-direction: row;
align-items: baseline;
gap: 10px;
padding: 12px 16px; /* was 14px 20px */
font-size: 19px;
width: 100%;
}
.ask-prompt .ask-phones a span {
margin-bottom: 0; /* inline now, no bottom gap */
flex-shrink: 0;
}
}
/* ==========================================================
MOBILE FRIENDLINESS PASS — 2026-07 (v1.0.60–62)
Appended last so these rules win the cascade. Seven fixes:
1. Inputs never trigger iOS focus-zoom (16px floor, <=1080px)
2. One-tap search on phones (icon button, not hidden)
3. Tap-to-call block in the mobile menu drawer
4. Google-Maps embeds no longer trap page scrolling on touch
5. Locations floor maps: swipe-to-pan at a legible size
6. Touch feedback + comfortable tap targets in the header
7. "Just call" phone boxes sized to content on phones
========================================================== */
/* --- 1. iOS focus-zoom guard -------------------------------------
Safari on iPhone zooms the whole page when a focused input's font
is under 16px, then leaves the user zoomed in. The newsletter email
field was 14px — the only offender. The bare element selector guards
future unclassed fields, and the newsletter field is named explicitly
because `input` (0,0,1) can never outrank the field's own classed
14px rule (0,2,1) on specificity alone. Scoped to <=1080px (covers
every phone, incl. large phones in landscape) so desktop rendering
is untouched. */
@media (max-width: 1080px) {
input, select, textarea,
.newsletter-form input[type="email"] { font-size: max(16px, 1em); }
}
/* --- 2. Search stays one tap away on phones ----------------------
Below 640px the text "Search" button was display:none (it didn't
fit beside the wordmark and MENU), leaving search reachable only
through the menu drawer. A compact icon button fits fine. The icon
is display:none at every width above 640px, and no other rule here
applies outside the media query — desktop renders untouched. */
.header-cta .header-cta-icon { display: none; }
@media (max-width: 640px) {
.header-cta.js-search-open {
display: inline-flex; /* overrides the earlier display:none */
align-items: center;
justify-content: center;
padding: 9px 11px;
min-width: 42px;
min-height: 42px;
}
.header-cta.js-search-open .header-cta-icon { display: block; }
/* Visually hide the label; the button keeps its aria-label. */
.header-cta.js-search-open .header-cta-text {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip: rect(0 0 0 0); clip-path: inset(50%);
overflow: hidden; white-space: nowrap;
}
/* Menu button matches the search button's comfortable tap size. */
.mobile-toggle { min-height: 42px; }
}
/* --- 3. Mobile menu: tap-to-call block ---------------------------
On phones the utility bar sheds its phone links (<=560px), and the
drawer had no numbers at all — on a drive-to-store site, calling is
the top mobile action. Two big rows, one per store, plus a shortcut
to Locations & Hours. Styled to the drawer's dark-pine language. */
.mobile-menu { overscroll-behavior: contain; } /* drawer scroll never chains to the page */
.mobile-menu-contact {
margin-top: auto; /* pins to the drawer bottom when nav is short */
padding: 22px 24px calc(24px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid rgba(245, 242, 235, 0.18);
}
.mobile-menu-contact .mmc-label {
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--desert-khaki);
font-weight: 700;
margin-bottom: 10px;
}
.mobile-menu-contact .mmc-phone {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
padding: 13px 14px;
margin-bottom: 8px;
border: 1px solid rgba(245, 242, 235, 0.28);
color: var(--raw-canvas);
text-decoration: none;
min-height: 48px;
}
.mobile-menu-contact .mmc-phone span {
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--desert-khaki);
}
.mobile-menu-contact .mmc-phone strong {
font-family: var(--font-display);
font-size: 19px;
font-weight: 600;
letter-spacing: 0.01em;
}
.mobile-menu-contact .mmc-phone:active { background: rgba(245, 242, 235, 0.08); }
.mobile-menu-contact .mmc-hours {
display: inline-block;
margin-top: 6px;
padding: 8px 0;
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--desert-khaki);
text-decoration: none;
}
.mobile-menu-contact .mmc-hours:active { color: var(--raw-canvas); }
/* The drawer is a flex column; let the nav grow so the contact block
sits at the bottom on tall screens and simply follows on short ones. */
.mobile-menu nav { flex: 1 0 auto; }
/* --- 4. Map embeds: tap to interact (touch only) -----------------
A full-width Google Maps iframe swallows one-finger drags, so the
page "sticks" while the map pans — the classic mobile map trap.
main.js injects a transparent shield button over each embed on
hover-less (touch) devices; the first tap removes it and hands the
map its gestures. Desktop is untouched (shield never injected). */
.loc-region-map-frame .map-shield {
position: absolute;
inset: 0;
z-index: 2;
width: 100%;
border: 0;
margin: 0;
background: transparent;
cursor: pointer;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 0 12px 14px;
}
.map-shield .map-shield-label {
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
background: var(--pitch-pine);
color: var(--raw-canvas);
border: 1px solid var(--desert-khaki);
padding: 9px 14px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.map-shield:focus-visible { outline: 2px solid var(--vintage-signal); outline-offset: -4px; }
/* --- 5. Floor maps: fit-to-width on phones ------------------------
The 560-unit floor plans shrink to ~330px on a narrow phone. Rather
than hold the drawing at an oversized minimum width and pan sideways
(which forced a horizontal scrollbar), let the SVG scale to the full
viewport width so the whole map is visible with no side-scroll. The
smaller scale is compensated by bumping the label type so department
names stay legible and the zones stay comfortably tappable. With no
horizontal overflow the callout still anchors correctly: its math in
floor-locations.js degrades cleanly (scrollLeft = 0, scrollWidth =
clientWidth). No "swipe to pan" hint is needed anymore. */
@media (max-width: 560px) {
.loc-floor-wrap {
overflow-x: visible;
padding: 14px;
}
.loc-floor-wrap svg { min-width: 0; max-width: 100%; width: 100%; }
/* Type scales down with the SVG; enlarge it so labels stay readable
at the fitted size. Tested against the busiest map (Englewood, 12
departments) so even the tightest zones (Workwear, Cold Weather)
keep their labels inside the box. */
.locfloor-zone text { font-size: 16px; }
}
/* --- 6. Touch feedback -------------------------------------------
Hover states never fire on phones, so taps on the big card targets
felt inert beyond the faint tap highlight. A one-pixel press is
enough to say "got it" without inventing new visual language. */
@media (hover: none) {
.cat-card:active, .loc-card:active, .campaign-card:active, .brand-tile:active,
.btn:active, .header-cta:active { transform: translateY(1px); }
}
/* --- 7. "Just call" phone boxes: no more skyscrapers ---------------
The department/brand-page ask-prompt gives its phone links
`flex: 1 1 200px` at <=1080px — correct while the boxes sit side by
side (200px = minimum WIDTH). But at <=640px the container flips to
flex-direction: column, and flex-basis flips its axis with it: the
same 200px suddenly means each link is a 200px-TALL box that also
grows. Reset the shorthand once the column takes over, so each box
is exactly as tall as its content (with a comfortable tap height),
and start the label + number from the left edge like the rest of
the mobile layout. */
@media (max-width: 640px) {
.ask-prompt .ask-phones a {
flex: 0 0 auto; /* kill the 200px basis-as-height + grow */
min-height: 52px; /* still a comfortable thumb target */
justify-content: flex-start; /* label + number read from the left */
align-items: center;
}
}
/* ==========================================================
PRINT — customers print the Locations & Hours page to take
in the car. Browsers strip backgrounds when printing, so the
dark hero would print cream-on-white (invisible). Force dark
ink on white paper, drop the site chrome and the games, and
make links legible. */
@media print {
*,
*::before,
*::after {
background: transparent !important;
color: #1a1a1a !important;
box-shadow: none !important;
text-shadow: none !important;
animation: none !important;
}
body { font-size: 12pt; line-height: 1.4; }
/* Chrome and interactive-only furniture that wastes ink on paper. */
.util-bar,
.site-header,
.mobile-menu,
.newsletter-band,
.header-actions,
.reviews-section,
.reviews-marquee,
.insta-strip,
.dig-wrap,
.play-section-label,
#run-canvas,
.hunt-scene,
.quiz-card,
.skip-link,
.map-shield,
.snowflake,
.lot-tag-fall { display: none !important; }
/* The dark hero becomes plain dark-on-white text. */
.page-hero,
.hero,
.brand-hero,
footer { background: #fff !important; }
.page-hero h1, .hero h1, .brand-hero h1,
.page-hero .eyebrow, .page-hero p { color: #1a1a1a !important; }
/* Spell out link targets so a printout is still actionable. */
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
a[href^="tel:"]::after,
a[href^="mailto:"]::after,
a[href^="#"]::after { content: ""; }
.loc-region-map-frame, iframe { display: none !important; }
section { padding: 12pt 0 !important; }
}
/* ===== LONG-FORM POLICY CONTENT — inline links =====
The Store Policies and Privacy Policy pages share the .policies-page
container. Their inline links previously inherited body colour with no
underline, so they were not identifiable without hovering. Scoped to that
container only, and button-style controls are excluded so they keep their
existing appearance. */
.policies-page a:not(.btn) {
color: var(--vintage-signal);
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 0.18em;
}
.policies-page a:not(.btn):hover {
color: var(--pitch-pine);
}
.policies-page a:not(.btn):focus-visible {
outline: 2px solid var(--vintage-signal);
outline-offset: 3px;
}
/* ===== ARCADE KEYBOARD ALTERNATIVES =====
Support for the accessibility pass on the two arcade games. */
/* Treasure Hunt: polite status messages (round, hit, miss, final score).
Announced only, never shown — the same information is already on screen. */
.ht-live,
.run-alt-live {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip: rect(0 0 0 0); clip-path: inset(50%);
overflow: hidden; white-space: nowrap;
}
/* The focused tile needs a ring that reads against every patch colour. */
.ht-cell:focus-visible {
outline: 3px solid var(--raw-canvas);
outline-offset: -3px;
box-shadow: 0 0 0 3px var(--pitch-pine);
}
/* The Runner's text-only course, a native disclosure sitting under
the game and borrowing the frame's own border so it reads as part of it.
Collapsed by default: only the summary row shows until it is opened. */
.run-alt {
border: 1.5px solid var(--bunker-olive);
background: var(--raw-canvas);
margin-top: 18px;
}
.run-alt-summary {
min-height: 44px;
padding: 11px 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
font-family: var(--font-display);
font-weight: 700;
font-size: 16px;
color: var(--pitch-pine);
}
.run-alt-summary::-webkit-details-marker { display: none; }
.run-alt-summary::after {
content: "+";
flex: 0 0 auto;
font-family: var(--font-label);
font-size: 16px;
color: var(--vintage-signal);
}
.run-alt[open] .run-alt-summary { border-bottom: 1px solid var(--bunker-olive); }
.run-alt[open] .run-alt-summary::after { content: "\2212"; }
.run-alt-summary:focus-visible {
outline: 2px solid var(--vintage-signal);
outline-offset: 2px;
}
.run-alt-panel {
padding: 22px 24px;
}
.run-alt-intro, .run-alt-feedback, .run-alt-done { font-size: 15px; color: var(--pitch-pine); }
.run-alt-intro { color: var(--faded-fatigue); margin-bottom: 16px; }
.run-alt-q { font-size: 16px; color: var(--pitch-pine); margin-bottom: 14px; }
.run-alt-step {
display: block;
font-family: var(--font-label);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--desert-khaki);
margin-bottom: 6px;
}
.run-alt-opts { list-style: none; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
/* .btn is white-space:nowrap site-wide, which forces these full-sentence
answers onto one line and pushes the page sideways on a phone. Scoped to
the course's own options only — every other .btn keeps nowrap. */
.run-alt-opts .btn { text-align: left; white-space: normal; max-width: 100%; }
.run-alt-feedback { margin-bottom: 14px; }
.run-alt-done { margin: 14px 0; }
.run-alt-note {
display: block;
font-size: 12px;
color: var(--faded-fatigue);
margin-top: 8px;
}