/* ===========================================================
Superfast Austin — shared styles
Palette pulled directly from the Superfast logo badge:
indigo ring, sky blue fill, orange-red lettering, navy shadow,
pale gold lightning highlight.
Headline font: "Londrina Solid" (free Google Font, weight 900)
Body font: "Karla" (free Google Font, weights 400/600/700) — chosen to
pair with Londrina Solid's rounded, chunky letterforms with some of
that same warmth, rather than a totally neutral grotesque like the
Helvetica/Arial stack this replaced.
=========================================================== */
/* NOTE ON FONTS:
Both Londrina Solid and Karla are loaded from Google Fonts via one
tag in each page's (see index.html / tiers.html /
map.html / about.html) — free, and embeds automatically for every
visitor instead of silently falling back like the old "Blockhead OT"
did. Only the specific weights actually used on the site are loaded
(900 for Londrina Solid; 400/600/700 for Karla).
*/
:root {
--color-header: #3ea5d1; /* sky blue — the logo's inner circle, deepened a touch */
--color-page-bg: #161b33; /* deep navy — darker than the logo's ring, for eye comfort */
--color-ink: #083d77; /* navy — the logo's text shadow */
--color-accent: #f95738; /* orange-red — the logo's lettering */
--color-gold: #f4b942; /* warm gold — the lightning bolt highlight, deepened toward orange */
--color-line: #e4dccb;
/* Text sitting directly on the page background (hero copy, subtitles,
footer) — flip these if --color-page-bg's lightness changes. */
--color-on-page: #eef3fc;
--color-on-page-muted: #b9c3ea;
/* Text inside the (always-white) food cards / popups — stays dark
regardless of the page background. */
--color-card-text: #2d3f66;
--color-card-text-muted: #75839f;
/* Rating palette — kept in sync with TIER_COLORS in assets/data.js, which
is the version actually read by tiers.html/map.html (JS can't read CSS
custom properties without a getComputedStyle round trip). These vars
exist for any CSS that wants the same colors without going through JS. */
--tier-immaculate: #f4b942;
--tier-delightful: #f95738; /* == --color-accent, so title & rating orange match */
--tier-enjoyable: #4fd1a5;
--tier-adequate: #5bc0eb;
/* Pastel photo-box-background tints, kept in sync with TIER_PHOTO_BG in
assets/data.js the same way the four vars above shadow TIER_COLORS —
the JS object is what actually gets applied (per-entry, via inline
style), these exist for reference/consistency. */
--photo-bg-immaculate: #e4dccb;
--photo-bg-delightful: #f6d9cf;
--photo-bg-enjoyable: #d6f5ea;
--photo-bg-adequate: #d7eef8;
/* Money-green for the $/$$/$$$ price indicator — intentionally its own
color, not tied to the Immaculate rating color above. */
--color-price: #2e7d32;
--font-display: "Londrina Solid", "Arial Black", "Helvetica Neue", Impact, sans-serif;
--font-body: "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif;
--radius: 10px;
}
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
body {
background: var(--color-page-bg);
color: var(--color-ink);
font-family: var(--font-body);
line-height: 1.5;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
}
/* ---------- Header / nav ---------- */
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 32px;
border-bottom: 3px solid var(--color-ink);
background: var(--color-header);
position: sticky;
top: 0;
z-index: 10;
}
.site-header .logo-link {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.site-header .logo-badge {
width: 44px;
height: 44px;
display: block;
}
.site-header .logo {
font-family: var(--font-display);
font-weight: 900;
font-size: 1.7rem;
letter-spacing: 0.02em;
text-decoration: none;
color: var(--color-gold);
text-shadow: 2px 2px 0 var(--color-ink);
}
.site-header nav {
display: flex;
gap: 28px;
}
.site-header nav a {
text-decoration: none;
font-weight: 600;
padding-bottom: 4px;
border-bottom: 3px solid transparent;
color: var(--color-ink);
}
.site-header nav a.active,
.site-header nav a:hover {
border-bottom-color: var(--color-accent);
color: var(--color-accent);
}
/* ---------- Hero ---------- */
.hero {
padding: 72px 32px;
text-align: center;
border-bottom: 3px solid var(--color-ink);
}
/* Two-column layout: the animated map on the left, the title/copy/buttons
on the right. Falls back to a single stacked column (map on top) below
the .hero-inner breakpoint, since two side-by-side columns get cramped
on narrower screens well before the site's usual 600px mobile cutoff. */
.hero-inner {
max-width: 1100px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 56px;
text-align: left;
}
.hero-media {
flex: 1 1 0;
display: flex;
justify-content: center;
}
.hero-map-gif {
width: 100%;
max-width: 420px;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: var(--radius);
border: 3px solid var(--color-ink);
box-shadow: 6px 6px 0 var(--color-ink);
}
.hero-text {
flex: 1 1 0;
}
.hero h1 {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(2.8rem, 6vw, 5.2rem);
line-height: 0.98;
margin: 0 0 20px;
text-transform: uppercase;
letter-spacing: 0.005em;
color: var(--color-gold);
text-shadow: 4px 4px 0 var(--color-ink);
}
.hero p {
max-width: 460px;
margin: 0 0 32px;
font-size: 1.15rem;
color: var(--color-on-page);
}
.button-row {
display: flex;
gap: 16px;
justify-content: flex-start;
flex-wrap: wrap;
}
.btn {
display: inline-block;
padding: 14px 28px;
border-radius: 999px;
font-weight: 700;
text-decoration: none;
border: 3px solid var(--color-ink);
}
.btn-primary {
background: var(--color-ink);
color: #ffffff;
}
.btn-secondary {
background: transparent;
color: var(--color-on-page);
border-color: var(--color-on-page);
}
.btn-primary:hover,
.btn-secondary:hover {
background: var(--color-accent);
border-color: var(--color-accent);
color: #fff;
}
/* ---------- Section headings ---------- */
.section {
padding: 56px 32px;
max-width: 1100px;
margin: 0 auto;
}
/* The tier list page's section sits directly under the sticky header with
no hero in between, so it gets less top padding than a typical section. */
.site-header + .section {
padding-top: 20px;
}
.section h2 {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
font-size: 2.6rem;
letter-spacing: 0.005em;
margin-bottom: 8px;
color: var(--color-gold);
text-shadow: 3px 3px 0 var(--color-ink);
}
.section h2.page-title {
font-size: clamp(3.2rem, 6vw, 4.6rem);
text-shadow: 4px 4px 0 var(--color-ink);
}
.section .subtitle {
color: var(--color-on-page);
margin-bottom: 32px;
}
/* ---------- About page ---------- */
.about-body {
max-width: 640px;
}
.about-body p {
color: var(--color-on-page);
font-size: 1.05rem;
line-height: 1.7;
margin: 0 0 20px;
}
.about-body p:last-child {
margin-bottom: 0;
}
.about-body a {
color: var(--color-gold);
}
/* ---------- Front page feature tiles (Tier List / Map) ---------- */
.feature-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.feature-tile {
display: flex;
flex-direction: column;
text-decoration: none;
border: 3px solid var(--color-ink);
border-radius: var(--radius);
overflow: hidden;
background: #fff;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-tile:hover,
.feature-tile:focus-visible {
transform: translateY(-4px);
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
}
.feature-tile:focus-visible {
outline: 3px solid var(--color-gold);
outline-offset: 2px;
}
.feature-tile-photo {
aspect-ratio: 4 / 3;
background: var(--color-line);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.feature-tile-photo img {
width: 78%;
height: 78%;
object-fit: contain;
filter: saturate(150%) contrast(115%);
}
.feature-tile-label {
background: var(--color-header);
padding: 22px 26px;
border-top: 3px solid var(--color-ink);
}
.feature-tile-label h3 {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
font-size: 2rem;
letter-spacing: 0.005em;
margin: 0 0 6px;
color: var(--color-gold);
text-shadow: 2px 2px 0 var(--color-ink);
}
.feature-tile-label p {
margin: 0;
font-size: 0.95rem;
color: var(--color-ink);
opacity: 0.85;
}
@media (max-width: 700px) {
.feature-grid {
grid-template-columns: 1fr;
}
}
/* ---------- Tier sections ---------- */
.tier-block {
margin-bottom: 48px;
}
.tier-heading {
display: flex;
align-items: center;
margin-bottom: 18px;
}
.tier-heading h3 {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
font-size: 1.9rem;
letter-spacing: 0.005em;
margin: 0;
color: var(--color-gold);
text-shadow: 2px 2px 0 var(--color-ink);
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 20px;
/* Without this, CSS Grid stretches every card in a row to match the
tallest one — so expanding a single card would leave awkward blank
space at the bottom of its still-collapsed neighbors. */
align-items: start;
}
.food-card {
background: #fff;
border: 3px solid var(--color-ink);
border-radius: var(--radius);
overflow: hidden;
display: flex;
flex-direction: column;
}
.food-card .card-photo {
aspect-ratio: 4 / 3;
background: var(--color-line);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
color: #8a8471;
overflow: hidden;
}
.food-card .card-photo img {
width: 85%;
height: 85%;
object-fit: contain;
filter: saturate(150%) contrast(115%);
}
/* Newer photos come in already color-correct, so they skip the saturation/
contrast boost tuned for the original batch of cutouts. The map pin glow
is a shared UI element (not a photo edit), so it's kept for these too —
see the .pin-cutout.photo-unadjusted override below. */
.food-card .card-photo img.photo-unadjusted,
.popup-photo.photo-unadjusted {
filter: none;
}
.food-card .card-title-bar {
background: var(--color-header);
padding: 12px 16px;
border-bottom: 3px solid var(--color-ink);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
cursor: pointer;
}
.food-card .card-title-bar:focus-visible {
outline: 3px solid var(--color-gold);
outline-offset: -3px;
}
.food-card .card-toggle {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 900;
color: var(--color-accent);
text-shadow: 1px 1px 0 var(--color-ink);
flex-shrink: 0;
line-height: 1;
}
.food-card .card-photo {
cursor: pointer;
}
.card-title-text {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.food-card h4 {
font-family: var(--font-display);
font-weight: 900;
margin: 0;
font-size: 1.25rem;
line-height: 1.15;
letter-spacing: 0.005em;
text-transform: uppercase;
color: var(--color-gold);
text-shadow: 2px 2px 0 var(--color-ink);
}
.food-card .card-restaurant {
margin: 0;
font-family: var(--font-body);
font-weight: 400;
font-size: 0.82rem;
letter-spacing: 0.01em;
color: var(--color-ink);
opacity: 0.85;
}
.food-card .card-body {
max-height: 0;
opacity: 0;
overflow: hidden;
padding: 0 16px;
transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
}
.food-card.expanded .card-body {
max-height: 600px;
opacity: 1;
padding: 16px;
}
.food-card .meta {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
color: var(--color-card-text-muted);
}
/* Price range ($ / $$ / $$$): shared between tier-list cards and map
popups. All three symbols always render; ".price-symbol-active" is the
only thing that changes between a $ sandwich and a $$$ one. */
.price-range {
display: inline-flex;
gap: 1px;
}
.price-symbol {
font-family: var(--font-body);
font-weight: 700;
color: var(--color-card-text-muted);
opacity: 0.35;
}
.price-symbol-active {
color: var(--color-price);
opacity: 1;
}
.food-card .card-notes {
margin: 10px 0 0;
padding-top: 10px;
border-top: 1px solid var(--color-line);
font-size: 0.85rem;
line-height: 1.45;
color: var(--color-card-text);
}
.food-card .card-address {
margin: 8px 0 0;
font-size: 0.78rem;
color: var(--color-card-text-muted);
}
.card-address-link {
color: var(--color-ink);
font-weight: 600;
text-decoration: underline;
}
.card-address-link:hover,
.card-address-link:focus-visible {
color: var(--color-header);
}
/* ---------- Map page ---------- */
.map-wrap {
height: calc(100vh - 78px);
width: 100%;
border-top: 3px solid var(--color-ink);
}
.map-wrap iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
/* ---------- Map filters (Rating + Price) ----------
A floating control in the corner of the map, not a bar above it — the
map page already fights for vertical room on mobile (see the mobile
".map-wrap" height override further down), so this overlays the map
instead of shrinking it further. */
.map-filters {
position: absolute;
top: 12px;
right: 12px;
z-index: 1000; /* above Leaflet's tile/marker panes, same tier as its own controls */
font-family: var(--font-body);
}
.map-filters-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-body);
font-weight: 700;
font-size: 0.85rem;
color: var(--color-card-text);
background: #fff;
border: 2px solid var(--color-ink);
border-radius: 999px;
padding: 8px 16px;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.map-filters-toggle.has-active-filters {
border-color: var(--color-accent);
color: var(--color-accent);
}
.map-filters-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: var(--color-accent);
color: #fff;
font-size: 0.7rem;
font-weight: 700;
}
/* The unconditional "display: inline-flex" above (needed to lay out the
badge's own contents) has the same specificity as the browser's default
"[hidden] { display: none }" rule and loads later, so it would otherwise
win the tie and defeat "hidden" entirely, showing an empty badge dot at
all times. This re-asserts hidden with one extra attribute selector
((0,2,0) beats (0,1,0)) so toggling the "hidden" property still works. */
.map-filters-count[hidden] {
display: none;
}
.map-filters-panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 220px;
background: #fff;
border-radius: 12px;
border: 2px solid var(--color-ink);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
padding: 14px;
}
.map-filters-group {
margin-bottom: 12px;
}
.map-filters-group:last-of-type {
margin-bottom: 14px;
}
.map-filters-group h4 {
margin: 0 0 8px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-card-text-muted);
}
.map-filters-options {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.map-filter-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border-radius: 999px;
border: 2px solid var(--color-line);
font-size: 0.78rem;
font-weight: 600;
color: var(--color-card-text-muted);
cursor: pointer;
user-select: none;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.map-filter-pill input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.map-filter-pill.active {
border-color: var(--pill-color, var(--color-accent));
color: var(--color-card-text);
background: var(--pill-color, var(--color-accent));
background: color-mix(in srgb, var(--pill-color, var(--color-accent)) 18%, white);
}
.map-filters-reset {
display: block;
width: 100%;
background: none;
border: none;
border-top: 1px solid var(--color-line);
padding: 10px 0 0;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 700;
color: var(--color-card-text-muted);
text-decoration: underline;
cursor: pointer;
text-align: center;
}
.map-filters-reset:hover,
.map-filters-reset:focus-visible {
color: var(--color-accent);
}
/* The Outdoors base tiles are already fairly naturalistic, so this is just
a light touch — a small contrast bump so the cutout pins still pop.
Tweak the saturate()/contrast() percentages to taste. */
.outdoors-tiles {
filter: saturate(95%) contrast(108%);
}
.photo-pin,
.pin-cutout-wrap {
background: transparent;
border: none;
}
.pin-cutout {
width: 56px;
height: 56px;
object-fit: contain;
display: block;
/* A saturation/contrast boost so the cutout photos pop, plus a soft dark
shadow so the pin reads as sitting above the map rather than pasted
flat onto it. (No colored glow — that's been removed.) */
filter: saturate(150%) contrast(115%) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
/* Newer, already color-correct photos skip the saturation/contrast boost,
but keep the same drop shadow, since that's shared map styling, not a
photo edit. */
.pin-cutout.photo-unadjusted {
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.photo-pin-ring {
width: 46px;
height: 46px;
border-radius: 50%;
border: 4px solid #999999;
background: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
overflow: hidden;
display: block;
}
.photo-pin-ring img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.popup-photo {
width: 100%;
max-width: 220px;
aspect-ratio: 4 / 3;
object-fit: contain;
background: var(--color-line);
border-radius: 6px;
border: 2px solid var(--color-ink);
margin-bottom: 8px;
filter: saturate(150%) contrast(115%);
}
/* Leaflet's own CSS sets ".leaflet-popup-content" to a Helvetica Neue
stack via its "font" shorthand, and it loads after this stylesheet, so a
plain ".leaflet-popup-content" rule here would lose that tie. The extra
".map-wrap" ancestor bumps specificity instead, so the popup body text
(restaurant name, price range, "Rating:" label, links, notes) matches
the rest of the site's Karla body font regardless of load order. Titles
and ratings still override to Londrina Solid via their own classes.
Same override also loosens Leaflet's default 13px top/bottom margin a
touch, for more breathing room above the photo and below the notes —
left/right stay at Leaflet's defaults (20px/24px). */
.map-wrap .leaflet-popup-content {
font-family: var(--font-body);
margin-top: 19px;
margin-bottom: 19px;
}
.popup-title {
font-family: var(--font-display);
font-weight: 900;
font-size: 1.05rem;
letter-spacing: 0.005em;
text-transform: uppercase;
color: var(--color-accent);
text-shadow: 1px 1px 0 var(--color-ink);
}
.popup-address-link {
color: var(--color-ink);
font-weight: 600;
text-decoration: underline;
}
.popup-address-link:hover,
.popup-address-link:focus-visible {
color: var(--color-header);
}
.popup-rating {
font-family: var(--font-display);
font-weight: 900;
letter-spacing: 0.005em;
text-transform: uppercase;
text-shadow: 1px 1px 0 var(--color-ink);
}
.popup-notes {
margin: 4px 0 0;
font-size: 0.85rem;
line-height: 1.4;
color: var(--color-card-text);
}
/* ---------- Footer ---------- */
.site-footer {
padding: 32px;
text-align: center;
font-size: 0.85rem;
color: var(--color-on-page-muted);
border-top: 3px solid var(--color-ink);
}
.footer-instagram {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-gold);
margin-bottom: 12px;
transition: opacity 0.2s ease;
}
.footer-instagram:hover,
.footer-instagram:focus-visible {
opacity: 0.75;
}
.footer-instagram svg {
width: 26px;
height: 26px;
display: block;
fill: currentColor;
}
/* Stack the hero's map + text into a single column before things get
cramped — this kicks in well above the site's usual 600px mobile
cutoff below, since two side-by-side columns need more room than a
single card grid does. */
@media (max-width: 820px) {
.hero-inner {
flex-direction: column;
text-align: center;
gap: 32px;
}
.hero-map-gif {
max-width: 320px;
}
.hero p {
margin: 0 auto 32px;
}
.button-row {
justify-content: center;
}
}
@media (max-width: 600px) {
.site-header {
flex-direction: column;
gap: 12px;
padding: 16px;
}
.hero {
padding: 64px 20px 48px;
}
.section {
padding: 40px 16px;
}
/* Two sandwich cards per row instead of one, with everything sized down
to fit — see the "is 2-up too small?" trial referenced in chat. */
.card-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.food-card .card-title-bar {
padding: 8px 10px;
gap: 6px;
}
.food-card h4 {
font-size: 0.92rem;
line-height: 1.15;
}
.food-card .card-restaurant {
font-size: 0.68rem;
}
.food-card .card-toggle {
font-size: 1.1rem;
}
.food-card .card-body {
padding: 0 10px;
}
.food-card.expanded .card-body {
padding: 10px;
}
.food-card .meta,
.food-card .card-notes,
.food-card .card-address {
font-size: 0.72rem;
}
.food-card .card-notes {
line-height: 1.4;
}
/* "Superfast Philosophy" wraps to two lines at this width — the body's
1.5 line-height (inherited by h2) leaves a big gap between them at this
font size, so tighten it here specifically. */
.section h2.page-title {
line-height: 1.05;
}
/* map.html's own inline