/* Vega Restaurant — site styles. Edit freely; the dev server live-reloads on save.
Palette + type come from brand/brand-board.html — the brand system of record.
FONTS ARE NOT IMPORTED HERE. An @import at the top of this file made font
loading a two-step chain (download this CSS, THEN discover and download the
fonts CSS). The tags live in render_head() in build_site.py, next to
preconnects, so both stylesheets download in parallel. If the font list
changes, change it THERE. */
:root {
/* brand palette (anchored to the logo; see brand board §03) */
--ink: #1C1712; /* Negro */
--noche: #14100A; /* dark surface — rotulación/hero backdrop */
--cream: #F7EEDD; /* Crema */
--paper: #FFFDF7;
--green: #4E9A66; /* Verde (ring) */
--green-deep: #2E6A43;
--red: #B4433B; /* Rojo (banner) */
--red-deep: #8E2F28;
--gold: #E4A84C; /* Oro */
--gold-deep: #C4872B;
--cafe: #7A5230;
--choco: #1E1309; /* dark-brown field: hero through statement */
--muted: #8A7C66;
--line: #E7DBC4;
--shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(28,23,18,.06);
--wrap: 1120px;
--radius: 14px;
/* type roles (brand board §04) */
--font-display: 'Alfa Slab One', Georgia, serif;
--font-head: 'Rubik', system-ui, sans-serif;
--font-body: 'Karla', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--cream);
color: var(--ink);
font: 17px/1.6 var(--font-body);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-head); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
img { max-width: 100%; display: block; }
a { color: inherit; }
/* Buttons — three-tier system chosen from the button lab.
PRIMARY = "La Mañana": Rye type, arched painted panel, hard under-shadow.
SECONDARY = "La Píldora": pill, flowing fill, push-down shadow.
TERTIARY = "La Taquería": Ewert type, chamfered marquee, dotted inline.
ALL COLORS ARE TOKENS (--b-*) and are provisional — recolor per section by
overriding the tokens, e.g.:
.some-dark-section .btn { --b-outline: var(--cream); --b-under: var(--gold); }
The shapes and motion are the decision; the colors are not. */
@keyframes btn-flow { to { background-position: 300% 0; } }
.btn {
/* tokens (subject to change per section/background) */
--b-fill: linear-gradient(90deg, var(--red), var(--red-deep), var(--red));
--b-ink: #fff6e6;
--b-outline: var(--ink);
--b-under: var(--gold);
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
font-family: 'Rye', serif; font-weight: 400; font-size: 1rem;
text-transform: uppercase; letter-spacing: .02em; line-height: 1;
text-decoration: none; cursor: pointer; user-select: none;
color: var(--b-ink); text-shadow: 0 2px 0 rgba(0,0,0,.28);
background-image: var(--b-fill); background-size: 300% 100%;
animation: btn-flow 8s linear infinite;
padding: 1rem 1.9rem; border: 2.5px solid var(--b-outline);
border-radius: 2.4rem 2.4rem 1.2rem 1.2rem / 2.9rem 2.9rem .9rem .9rem;
box-shadow: 5px 6px 0 var(--b-under), 10px 14px 16px rgba(23,19,15,.24);
transition: transform .09s ease, box-shadow .09s ease, filter .12s ease;
}
.btn:hover { animation-duration: 1.8s; transform: translate(-1px,-2px);
box-shadow: 6px 8px 0 var(--b-under), 12px 16px 20px rgba(23,19,15,.28); }
.btn:active, .btn.is-pressed { transform: translate(5px,6px);
box-shadow: 0 0 0 var(--b-under), 3px 4px 8px rgba(23,19,15,.18); }
.btn:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 3px; }
/* SECONDARY — La Píldora */
.btn-secondary {
--b-fill: linear-gradient(90deg, var(--green-deep), var(--green), var(--green-deep));
--b-ink: #fff;
--b-under: var(--ink);
font-family: inherit; font-weight: 800; font-size: 1rem; letter-spacing: .03em;
text-shadow: none;
padding: .95rem 1.9rem; border-width: 3px; border-radius: 999px;
box-shadow: 0 6px 0 var(--b-under), 0 14px 20px rgba(23,19,15,.25);
}
.btn-secondary:hover { transform: translateY(-2px);
box-shadow: 0 8px 0 var(--b-under), 0 18px 24px rgba(23,19,15,.28); }
.btn-secondary:active { transform: translateY(6px);
box-shadow: 0 0 0 var(--b-under), 0 4px 8px rgba(23,19,15,.2); }
/* TERTIARY — La Taquería */
.btn-tertiary {
--b-fill: linear-gradient(90deg, var(--green-deep), var(--green), var(--green-deep));
--b-ink: #fff6e6;
--b-outline: var(--gold-deep);
--b-under: var(--red-deep);
position: relative;
font-family: 'Ewert', serif; font-weight: 400; font-size: 1.25rem; letter-spacing: .07em;
padding: 1.05rem 2.1rem; border: 3px solid var(--b-outline); border-radius: 0;
clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px),
calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
box-shadow: none;
filter: drop-shadow(5px 5px 0 var(--b-under)) drop-shadow(0 7px 10px rgba(23,19,15,.3));
text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.btn-tertiary::after { content: ""; position: absolute; inset: 5px;
border: 2px dotted var(--gold); pointer-events: none;
clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px),
calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px); }
.btn-tertiary:hover { transform: translate(-1px,-1px); box-shadow: none;
filter: drop-shadow(6px 6px 0 var(--b-under)) drop-shadow(0 9px 12px rgba(23,19,15,.34)); }
.btn-tertiary:active { transform: translate(4px,4px); box-shadow: none;
filter: drop-shadow(0 0 0 var(--b-under)) drop-shadow(0 3px 6px rgba(23,19,15,.2)); }
/* sizes / modifiers */
.btn-sm { padding: .6rem 1.15rem; font-size: .8rem; border-width: 2px; min-height: 40px;
box-shadow: 3px 4px 0 var(--b-under), 6px 8px 12px rgba(23,19,15,.16); }
.btn-lg { padding: 1.1rem 2.2rem; font-size: 1.15rem;
box-shadow: 6px 7px 0 var(--b-under), 12px 16px 20px rgba(23,19,15,.26); }
.btn-block { display: flex; width: 100%; margin-top: 1rem; }
.btn[disabled], .btn.is-disabled { opacity: .42; box-shadow: none; filter: none;
transform: none; cursor: not-allowed; animation: none; }
@media (prefers-reduced-motion: reduce) {
.btn, .btn-secondary, .btn-tertiary { animation: none; transition: none; }
}
.muted { color: var(--muted); }
/* Header */
.site-header {
position: sticky; top: 0; z-index: 20;
background: rgba(250,246,238,.9); backdrop-filter: saturate(150%) blur(8px);
border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand-logo { height: 42px; width: auto; }
.nav { display: flex; align-items: center; gap: .95rem; }
.nav a { text-decoration: none; font-weight: 600; }
/* Nav buttons: all three share design 5 "La Marquesina" from the button lab,
in three colorways — Menu negro/oro, Locations verde/amarillo, Order
rojo/crema. Sized down to sit in the header. */
.nav-btn { cursor: pointer; user-select: none; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
min-height: 40px; /* tap target — Playwright caught these at 27px */
transition: transform .1s ease, box-shadow .1s ease, filter .12s ease; }
/* 5 — La Marquesina: black slab, flowing gradient in the letters */
.nav-menu {
font-family: 'Alfa Slab One', serif; font-weight: 400;
font-size: .92rem; letter-spacing: .02em; text-transform: uppercase;
padding: .58rem 1.15rem; border-radius: 11px;
border: 2.5px solid var(--ink); background: var(--ink);
box-shadow: 4px 5px 0 var(--red);
/* Design 5's gradient-in-letters does NOT survive at nav size — at ~12px
there aren't enough pixels for the ramp to read and antialiasing eats it,
so the label kept washing out (worst on mobile). Solid Oro instead; the
slab, the Alfa Slab type and the rojo offset still carry the identity. */
color: var(--gold);
}
.nav-menu:hover { transform: translate(-1px,-1px); box-shadow: 5px 6px 0 var(--red);
color: #FFF3CB; }
.nav-menu:active { transform: translate(4px,5px); box-shadow: 0 0 0 var(--red); }
/* Locations — same Marquesina slab as Menu, in verde with an amarillo
label and gold offset, so the pair reads as one family in two colorways. */
.nav-loc {
font-family: 'Alfa Slab One', serif; font-weight: 400;
font-size: .92rem; letter-spacing: .02em; text-transform: uppercase;
padding: .58rem 1.15rem; border-radius: 11px;
border: 2.5px solid var(--ink); background: var(--green-deep);
box-shadow: 4px 5px 0 var(--gold);
color: #FADD62; /* 4.78:1 on verde-deep — clears AA */
}
.nav-loc:hover { transform: translate(-1px,-1px); box-shadow: 5px 6px 0 var(--gold);
color: #FFF3CB; }
.nav-loc:active { transform: translate(4px,5px); box-shadow: 0 0 0 var(--gold); }
/* Order — same slab, rojo colorway. Deliberately NOT .btn: the nav trio
should match each other, and the flowing-gradient .btn treatment stays on
the real ordering CTAs further down the page. */
/* Order is the money button: owner asked for it far right, bigger, glowing.
The glow is a breathing gold halo layered UNDER the hard offset shadow so
the Marquesina identity survives; reduced-motion gets a steady halo. */
@keyframes order-glow {
0%, 100% { box-shadow: 4px 5px 0 var(--gold), 0 0 14px rgba(228,168,76,.9), 0 0 30px rgba(228,168,76,.55), 0 0 52px rgba(228,168,76,.3); }
50% { box-shadow: 4px 5px 0 var(--gold), 0 0 24px rgba(228,168,76,1), 0 0 50px rgba(228,168,76,.75), 0 0 80px rgba(228,168,76,.45); }
}
.nav-order {
font-family: 'Alfa Slab One', serif; font-weight: 400;
font-size: 1.06rem; letter-spacing: .02em; text-transform: uppercase;
padding: .68rem 1.35rem; border-radius: 12px;
border: 2.5px solid var(--ink); background: var(--red);
box-shadow: 4px 5px 0 var(--gold), 0 0 16px rgba(228,168,76,.9), 0 0 34px rgba(228,168,76,.55), 0 0 56px rgba(228,168,76,.3);
animation: order-glow 2.6s ease-in-out infinite;
color: #FFF6E6; text-decoration: none;
}
@media (prefers-reduced-motion: reduce) { .nav-order { animation: none; } }
.nav-order:hover { transform: translate(-1px,-1px); box-shadow: 5px 6px 0 var(--gold);
color: #fff; }
.nav-order:active { transform: translate(4px,5px); box-shadow: 0 0 0 var(--gold); }
@media (prefers-reduced-motion: reduce) { .nav-loc { animation: none; } }
@media (max-width: 620px) {
.nav { gap: .5rem; }
.nav-menu { font-size: .76rem; padding: .48rem .8rem; box-shadow: 3px 4px 0 var(--red); }
.nav-loc { font-size: .68rem; padding: .5rem .85rem; }
}
/* ============ HERO — Tantillo-style: dominant arched photo panel, headline
overlapping its bottom edge, no stat strip ====== */
.hero { background: var(--choco); padding: .9rem 0 2.2rem; }
.hero-panel {
position: relative; overflow: hidden;
margin: 0 auto; width: min(1400px, calc(100% - 28px));
aspect-ratio: 16 / 11.6; background: var(--noche);
border-radius: 26px 26px 999px 999px / 26px 26px 240px 240px; /* arched bottom */
box-shadow: 0 26px 60px rgba(28,23,18,.26);
}
/* two counter-scrolling photo rows, each tile labeled with its dish name */
.carousel {
position: absolute; inset: 0;
display: flex; flex-direction: column;
}
.car-row { flex: 1; min-height: 0; overflow: hidden; }
.car-track {
display: flex; height: 100%; width: max-content;
animation: carmove 55s linear infinite;
}
.car-row:nth-child(even) .car-track { animation-direction: reverse; animation-duration: 64s; }
.car-row:nth-child(3) .car-track { animation-duration: 74s; }
.car-row:nth-child(5) .car-track { animation-duration: 60s; }
@keyframes carmove { to { transform: translateX(-50%); } }
.car-tile { position: relative; height: 100%; aspect-ratio: 1; flex: none; }
.car-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.car-name {
position: absolute; left: 8px; bottom: 8px; z-index: 1;
font-family: var(--font-head); font-weight: 700; font-size: .72rem;
letter-spacing: .02em; color: var(--cream);
background: rgba(20,16,10,.66); padding: .28rem .55rem; border-radius: 7px;
max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden;
text-overflow: ellipsis;
}
@media (prefers-reduced-motion: reduce) { .car-track { animation: none; } }
/* no panel shading — owner wants the food bright and visible */
.hero-mark { /* transparent logo centerpiece — food stays visible behind it */
position: absolute; z-index: 2; left: 50%; top: 45%;
width: min(36%, 400px); height: auto;
transform: translate(-50%, -50%);
filter: drop-shadow(0 14px 26px rgba(0,0,0,.55));
}
/* headline straddles the panel's bottom edge (BITE ME move) */
/* title sits clear of the carousel — no overlap */
.hero-overlap { position: relative; z-index: 3; margin-top: clamp(1.6rem, 3vw, 2.8rem); }
.hero-head {
display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
}
.hero-big {
/* "style 7" — Ewert, the Taquería circus face, in Tantillo's solid dark green */
font-family: 'Ewert', serif; font-weight: 400; color: var(--cream);
font-size: clamp(2.3rem, 6.4vw, 4.9rem); line-height: 1.04;
letter-spacing: .02em; margin: 0; text-transform: uppercase;
/* cream letters + ink outline + verde offset: reads on bright photos AND choco */
text-shadow:
3px 3px 0 var(--ink), -3px -3px 0 var(--ink),
3px -3px 0 var(--ink), -3px 3px 0 var(--ink),
7px 7px 0 rgba(46,106,67,.9);
}
.hero-cta-side { flex: 0 0 auto; margin-bottom: 1rem; }
.hero-script {
font-family: 'Rye', serif; font-weight: 400; color: var(--gold);
font-size: clamp(1.1rem, 2.4vw, 1.7rem); margin: .9rem 0 0; letter-spacing: .02em;
}
/* ============ Statement section (Tantillo's "Foodies, rejoice" block) ====== */
.statement { background: var(--choco); padding: 3.4rem 0 4.4rem; text-align: center; }
.stmt-title {
font-family: 'Ewert', serif; font-weight: 400; color: var(--gold);
font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: 1.1;
margin: 0 0 1rem; text-transform: uppercase; letter-spacing: .02em;
}
.stmt-sub { max-width: 52ch; margin: 0 auto 2.8rem; font-size: 1.08rem; color: #D8CCB8; }
/* rectangular dish photos render as a round plate with a cream ring */
@keyframes badgespin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { }
/* ============ Papel-picado garland dividers (fiesta inspo — full color) ==== */
.garland { overflow: hidden; line-height: 0; padding: 1.2rem 0 .6rem; }
.garland svg { width: 100%; height: auto; display: block; min-width: 680px; }
.flag { transform-box: fill-box; transform-origin: top center; }
@media (max-width: 760px) {
.hero-panel {
aspect-ratio: 4 / 5.6; width: calc(100% - 18px);
border-radius: 18px 18px 999px 999px / 18px 18px 120px 120px;
}
.car-tile { aspect-ratio: .9; }
.car-name { font-size: .62rem; left: 6px; bottom: 6px; }
.hero-mark { width: 64%; top: 44%; }
.hero-overlap { margin-top: 1.3rem; }
.hero-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
.hero-big { font-size: clamp(1.9rem, 8.6vw, 2.6rem);
text-shadow: 2px 2px 0 var(--ink), -2px -2px 0 var(--ink),
2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 5px 5px 0 rgba(46,106,67,.9); }
.hero-cta-side { margin-bottom: 0; }
}
/* Sections */
.section-title { font-size: 2rem; letter-spacing: -.01em; margin: 0 0 1.5rem; }
.menu, .order { padding: 4rem 0; }
.locations { padding: 0; }
.menu { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* ============ LAS TORTAS — breakdown feature (heroinspo2) ================= */
/* hero torta + callouts */
/* the leader line pointing at the sandwich */
/* the two flanking tortas */
@media (max-width: 860px) {
/* stacked layout: drop the leader lines, center the callouts */
}
/* ---- signature dishes: big transparent cutouts, each in its own place ---- */
.dish-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(1.2rem, 3vw, 3rem); align-items: end;
margin: 3.2rem auto 3rem; max-width: 1040px;
}
.dish { position: relative; margin: 0; text-align: center; }
.dish img {
position: relative; z-index: 1; width: 100%; height: auto; margin: 0 auto;
filter: drop-shadow(0 26px 30px rgba(0,0,0,.55));
transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.dish:hover img { transform: translateY(-10px) scale(1.03); }
/* warm plate-glow behind each dish so the cutouts sit in the dark field */
.dish-glow {
position: absolute; z-index: 0; left: 50%; top: 46%;
width: 108%; aspect-ratio: 1; transform: translate(-50%,-50%);
background: radial-gradient(circle, rgba(228,168,76,.30), rgba(180,67,59,.14) 46%, transparent 68%);
pointer-events: none;
}
.dish figcaption { position: relative; z-index: 1; margin-top: 1rem; }
.dish-name {
display: block; font-family: 'Ewert', serif; font-weight: 400;
font-size: clamp(1.05rem, 1.9vw, 1.5rem); color: var(--cream);
letter-spacing: .02em;
text-shadow: 2px 2px 0 rgba(16,11,6,.9), 5px 6px 0 rgba(46,106,67,.55);
}
.dish-price {
display: inline-block; margin-top: .25rem;
font-family: var(--font-head); font-weight: 800; font-size: 1rem; color: var(--gold);
}
/* second row: the three tortas, a touch smaller so the first row leads */
.dish-grid-tortas { margin-top: 1rem; max-width: 900px; }
.dish-grid-tortas .dish-name { font-size: clamp(.95rem, 1.6vw, 1.25rem); }
.d-t1 { transform: translateY(10px) rotate(1.4deg); }
.d-t2 { transform: translateY(-14px) rotate(-1.6deg); }
.d-t3 { transform: translateY(4px) rotate(1deg); }
/* each dish finds its own level rather than sitting in a flat row */
.d-rolled { transform: translateY(6px) rotate(-2deg); }
.d-tacos { transform: translateY(-26px) rotate(1.5deg); }
.d-fries { transform: translateY(14px) rotate(-1deg); }
.stmt-cta { --b-outline: var(--gold-deep); --b-under: var(--gold); margin-top: .6rem; }
@media (max-width: 860px) {
.dish-grid { grid-template-columns: 1fr; gap: 2.2rem; max-width: 360px;
margin: 2.4rem auto 2.2rem; }
.d-rolled, .d-tacos, .d-fries,
.d-t1, .d-t2, .d-t3 { transform: none; }
.dish-grid-tortas { margin-top: 0; }
.dish img { max-width: 300px; }
}
/* Tablet: the six dishes become ONE 2x3 grid instead of six stacked rows,
which is most of the scrolling on this section. The six figures live in
two separate .dish-grid containers (3 dishes + 3 tortas), so making each
two-wide would give 2+1 / 2+1 with an orphan in each — instead both
wrappers go display:contents and all six become direct children of
.dish-stack. They are plain divs with no role, so removing their boxes
costs nothing semantically.
Must stay AFTER the max-width:860px block above: equal specificity, and
it overrides the single-column rule set there. */
@media (min-width: 561px) and (max-width: 860px) {
.dish-stack {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 2.4rem clamp(1.2rem, 4vw, 2.6rem);
align-items: end;
max-width: 680px; margin: 2.6rem auto 2.4rem;
}
.dish-grid { display: contents; }
.dish img { max-width: 262px; }
/* row 2 mixes a dish and a torta, so the two name sizes must agree */
.dish-name,
.dish-grid-tortas .dish-name { font-size: clamp(1rem, 2.3vw, 1.28rem); }
}
@media (prefers-reduced-motion: reduce) { .dish img { transition: none; } }
/* Locations map — findusmapinspo style */
.map-shell {
position: relative; overflow: hidden;
border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
box-shadow: inset 0 14px 26px rgba(28,23,18,.14), inset 0 -14px 26px rgba(28,23,18,.14);
}
#vcmap { height: min(82vh, 760px); width: 100%; background: #DCE8DF; z-index: 1; }
/* Phones: the map must not fill the screen, or there's no page edge left to
scroll on. NOTE this override has to live AFTER the base rule — an earlier
copy inside the 760px block never applied, since equal specificity means
source order decides. */
@media (max-width: 760px) { #vcmap { height: 58vh; } }
.map-card {
/* hugs the map's left edge — it used to align to the centred content
column, which pushed it far inland on wide screens and crowded the
pins while the ocean sat empty */
position: absolute; top: 26px; left: clamp(16px, 1.6vw, 34px); z-index: 500;
background: var(--paper); border: 2px solid var(--ink); border-radius: 16px;
padding: 1.15rem 1.3rem; max-width: 290px;
box-shadow: 4px 4px 0 var(--ink), 10px 14px 22px rgba(28,23,18,.22);
}
.map-title {
font-family: var(--font-display); font-weight: 400; font-size: 1.7rem;
margin: 0 0 .3rem; line-height: 1;
}
.map-sub { margin: 0 0 .85rem; font-size: .88rem; color: #4f4638; line-height: 1.45; }
.map-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.map-chip {
font-family: var(--font-head); font-weight: 700; font-size: .8rem;
padding: .5rem .8rem; border-radius: 999px; cursor: pointer;
border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
/* flag order: verde / blanco / rojo */
/* green-deep, not green: white on #4E9A66 is 3.42:1 (fails AA). The old
raster map kept axe from measuring this; the GL canvas let it. 6.4:1 now. */
.map-chip:nth-child(1) { background: var(--green-deep); color: #fff; }
.map-chip:nth-child(2) { background: var(--paper); color: var(--ink); }
.map-chip:nth-child(3) { background: var(--red); color: #fff; }
.map-chip:hover { filter: brightness(1.06); transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }
.map-chip:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }
/* Leaflet ships 30x30 zoom buttons — under the 44px tap-target minimum.
The attribution links stay small: that text is required credit, and every
map on the web renders it at this size. */
/* NOTE: leaflet.css is loaded AFTER styles.css, so a matching-specificity
rule loses. Scoping by the map's id outranks it. */
#vcmap .leaflet-bar a,
#vcmap.leaflet-touch .leaflet-bar a {
width: 44px; height: 44px; line-height: 44px; font-size: 1.35rem;
}
/* Leaflet's attribution links render at 11px. WCAG 2.5.8's "Inline"
exception covers them (targets constrained by the line-height of
surrounding sentence text), so they're compliant as-is — but bumping the
size makes them genuinely easier to hit and read, and the licence requires
the credit be legible anyway. */
.leaflet-control-attribution { font-size: 12.5px; line-height: 1.6; padding: 2px 8px; }
.leaflet-control-attribution a { text-decoration: underline; }
/* Mexican-flag pins */
.flagpin-wrap { background: none; border: none; }
.flagpin { position: relative; width: 72px; height: 82px;
filter: drop-shadow(0 8px 10px rgba(0,0,0,.42)); }
.flagpin-badge {
position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 72px; height: 56px; display: flex; align-items: center;
justify-content: center; padding: 5px 7px;
background: var(--paper); border: 2.5px solid var(--ink); border-radius: 11px;
}
.flagpin-badge img { width: 100%; height: 100%; object-fit: contain; }
.flagpin-stem {
position: absolute; left: 50%; top: 54px; transform: translateX(-50%);
width: 3px; height: 20px; background: var(--ink);
}
.flagpin-dot {
position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
width: 13px; height: 13px; border-radius: 50%;
background: var(--red); border: 2.5px solid #fff;
box-shadow: 0 2px 6px rgba(0,0,0,.45);
}
/* brand-styled Leaflet popup */
.vc-pop .leaflet-popup-content-wrapper {
background: var(--paper); color: var(--ink); border-radius: 14px;
border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
font-family: var(--font-body);
}
.vc-pop .leaflet-popup-content { margin: .95rem 1.05rem; line-height: 1.4; }
.vc-pop .leaflet-popup-tip { background: var(--paper); border: 1px solid var(--ink); }
.pop-name { font-family: var(--font-head); font-weight: 800; font-size: 1.02rem; }
.pop-neigh {
font-family: var(--font-head); font-weight: 700; font-size: .68rem;
text-transform: uppercase; letter-spacing: .07em; color: var(--green-deep);
margin: .1rem 0 .35rem;
}
.pop-addr { font-size: .85rem; color: #4f4638; }
.pop-hours {
margin-top: .6rem; padding-top: .55rem; border-top: 1px dashed var(--line);
font-size: .82rem;
}
.pop-hrow { display: flex; justify-content: space-between; gap: .8rem; padding: .1rem 0; }
.pop-hrow span:first-child { color: var(--muted); }
.pop-hrow span:last-child { font-variant-numeric: tabular-nums; }
.pop-hours-soon { color: var(--muted); font-style: italic; }
.pop-actions { display: flex; flex-direction: column; gap: .45rem; margin-top: .75rem; }
.pop-btn {
display: flex; align-items: center; gap: .55rem; min-height: 44px;
font-family: var(--font-head); font-weight: 700; font-size: .86rem;
padding: .5rem .75rem; border-radius: 10px; text-decoration: none;
border: 2px solid var(--ink); box-shadow: 2.5px 2.5px 0 var(--ink);
background: var(--paper); color: var(--ink);
transition: transform .08s ease, box-shadow .08s ease;
}
.pop-btn:hover { transform: translate(-1px,-1px); box-shadow: 3.5px 3.5px 0 var(--ink); }
.pop-btn:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }
.pop-btn svg { width: 17px; height: 17px; flex: none; }
/* .leaflet-container a is more specific than .pop-btn — match it */
.leaflet-container a.pop-btn { color: var(--ink); }
.leaflet-container a.pop-btn.pop-call { background: var(--green); color: #fff; }
.leaflet-container a.pop-btn.pop-order { background: var(--red); color: #fff; }
/* ============ Menu — the mural hub (La Moderna wall, brand colors) ======== */
/* wall is forward-facing — no perspective */
.menu { overflow: hidden; padding: 0; } /* full-bleed wall */
.mural {
position: relative;
border-radius: 0; /* top clears the 68px sky band, bottom the 10px curb */
padding: calc(68px + .5rem) clamp(1.2rem, 5vw, 4rem) calc(26px + .5rem);
/* minus the sticky header: 100svh alone always overflowed the VISIBLE
area by exactly the 68px the header covers */
min-height: calc(100svh - 68px);
display: flex; flex-direction: column; justify-content: center;
/* real sun-washed adobe plaster (AI-generated for this project, rights-clean) */
background: url(assets/wall-adobe.jpg) center / cover no-repeat, #F0C096;
box-shadow: inset 0 0 80px rgba(150,88,50,.18);
}
/* sky visible above the wall, with the roof-beam edge casting onto it */
.mural-sky {
position: absolute; top: 0; left: 0; right: 0; height: 68px; z-index: 0;
background:
radial-gradient(140px 46px at 18% 40%, rgba(255,255,255,.85), transparent 70%),
radial-gradient(200px 54px at 66% 26%, rgba(255,255,255,.7), transparent 70%),
linear-gradient(180deg, #6FAEDC 0%, #93C6E8 62%, #C7E3F4 100%);
}
.mural-sky::after { /* wooden roof overhang */
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 15px;
background: repeating-linear-gradient(90deg, #7A4A28 0 44px, #8F5A32 44px 90px);
box-shadow: 0 6px 12px rgba(90,50,20,.45);
}
/* sidewalk + painted curb at the base */
.mural-curb {
position: absolute; left: 0; right: 0; bottom: 0; height: 10px; z-index: 0;
background: #C99B3F;
box-shadow: inset 0 3px 5px rgba(90,60,30,.35);
}
/* painted folk motifs on the wall */
.mural-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ma { position: absolute; filter: drop-shadow(3px 5px 7px rgba(140,80,40,.28)); }
.ma svg { width: 100%; height: auto; display: block; }
.ma-cross { top: calc(92px + 22px); right: clamp(14px, 6vw, 96px); width: clamp(52px, 6vw, 82px); transform: rotate(4deg); }
.ma-heart { display: block; width: clamp(50px, 7.4vh, 82px); margin: 0 auto .35rem; }
.ma-heart svg { width: 100%; height: auto; }
.mural-hub, .mural-poster { position: relative; z-index: 1; }
/* hub face: arched spray lettering + sprayed logo + painted categories */
.mural-hub { text-align: center; }
.mural-logo { position: relative; width: clamp(165px, 24vh, 252px); max-width: 42%; margin: 0 auto; }
.mural-logo img { width: 100%; height: auto; display: block; }
.ml-halo { position: absolute; inset: 0;
filter: brightness(0) invert(1) sepia(.2) blur(5px); opacity: .9; transform: scale(1.07); }
.ml-base { position: relative; filter: url(#spray); }
.mural-menu-word {
/* solid painted fill — no spray filter, no stacked shadows */
font-family: 'Ewert', serif; font-weight: 400; color: var(--ink);
font-size: clamp(2.1rem, 5.2vh, 3.6rem); margin: .6rem 0 1.1rem;
letter-spacing: .02em; text-shadow: none;
-webkit-text-stroke: 2px var(--ink); /* thickens the strokes = reads bolder */
}
.mural-cats {
display: flex; flex-wrap: wrap; justify-content: center;
gap: .55rem 2.1rem; max-width: 1040px; margin: 0 auto;
}
.mural-cat {
background: none; border: none; cursor: pointer; padding: .5rem .55rem;
/* Taqueria Lupita blackletter (mexicantypography2 reference) */
font-family: 'Pirata One', serif; font-weight: 400; font-size: 1.62rem;
text-transform: none; letter-spacing: .03em;
transition: transform .1s ease;
}
/* all categories plain black, no offsets or shadows (owner) */
.mural-cat { color: var(--ink); text-shadow: none; }
.mural-cat:nth-child(3n+1) { transform: rotate(-1deg); }
.mural-cat:nth-child(3n+2) { transform: rotate(.7deg); }
.mural-cat:nth-child(3n) { transform: rotate(-.4deg); }
.mural-cat:hover { transform: scale(1.08) rotate(0deg); }
.mural-cat:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 3px; border-radius: 6px; }
/* Short laptops (1280x800 and similar) have almost no vertical slack once the
wall fills the viewport. Tighten the category block there so the whole
composition still fits without shrinking it for everyone. */
@media (max-height: 840px) {
.mural-cats { gap: .35rem 1.75rem; }
.mural-cat { font-size: 1.5rem; padding: .35rem .45rem; }
.mural-hint { margin-top: .8rem; }
}
/* quiet wayfinding note under the categories */
.mural-hint {
margin: 1.2rem 0 0; text-align: center;
font-family: var(--font-head); font-weight: 600; font-size: .92rem;
letter-spacing: .06em; color: rgba(110,64,36,.9);
text-shadow: 1.5px 1.5px 0 rgba(255,246,230,.85);
}
/* poster face: Muchacho-style category menu, flat and readable */
.poster-back {
display: block; margin: 0 auto 1.6rem; /* centered, like the one below */
background: none; border: none; cursor: pointer; padding: .5rem .6rem;
font-family: var(--font-head); font-weight: 800; font-size: .92rem;
text-transform: uppercase; letter-spacing: .05em; color: var(--ink);
text-shadow: none;
}
.poster-back:hover { text-decoration: underline; }
.poster-back-bottom { display: block; margin: 2.4rem auto 0; }
/* jump straight to another category without going back to the wall */
.poster-jump { margin-top: 2.6rem; padding-top: 1.5rem;
border-top: 2px dashed rgba(28,23,18,.25); }
.pj-label {
font-family: var(--font-head); font-weight: 800; font-size: .74rem;
letter-spacing: .16em; text-transform: uppercase; color: #6B4226;
text-align: center; margin: 0 0 1rem;
}
.pj-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem .7rem; }
.pj-cat {
font-family: 'Pirata One', serif; font-weight: 400; font-size: 1.18rem;
color: var(--ink); background: rgba(255,253,247,.72); cursor: pointer;
border: 2px solid rgba(28,23,18,.55); border-radius: 9px;
padding: .3rem .7rem; line-height: 1.25;
transition: background .14s ease, transform .1s ease;
}
.pj-cat:hover { background: var(--gold); transform: translateY(-2px); }
.pj-cat:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 2px; }
@media (max-width: 760px) {
.pj-cat { font-size: 1.02rem; padding: .26rem .55rem; }
}
.poster-back:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 3px; border-radius: 6px; }
.poster-panel {
border: 2.5px solid var(--ink); padding: 1.4rem 1.6rem 1.6rem; margin-top: .8rem;
border-radius: 16px 24px 14px 26px / 22px 14px 24px 16px; /* hand-drawn box */
background: rgba(247,238,221,.94); /* wheatpasted sheet on the brick */
box-shadow: 5px 6px 0 rgba(20,16,10,.55);
}
.poster-title {
font-family: 'Rye', serif; font-weight: 400; color: var(--red);
font-size: clamp(1.5rem, 3.4vw, 2.3rem); margin: 0 0 1.1rem;
transform: rotate(-1deg); display: inline-block; outline: none;
}
.poster-title::after {
content: ""; display: block; height: 7px; margin-top: .25rem;
background: var(--gold); border-radius: 4px; transform: skewX(-16deg);
}
.poster-items { columns: 2; column-gap: 2.6rem; }
/* each row: square photo, then name/price/description */
.pi {
break-inside: avoid; margin-bottom: .95rem;
display: flex; align-items: center; gap: .85rem;
}
.pi-body { flex: 1 1 auto; min-width: 0; }
/* 72px, up from 44px: the column space the prices used to occupy now goes to
the food. Sources are 160px, so still crisp on 2x phone screens. */
.pi-thumb {
flex: 0 0 auto; width: 72px; height: 72px; border-radius: 10px;
object-fit: cover; background: rgba(28,23,18,.06);
border: 2px solid rgba(28,23,18,.35);
box-shadow: 2px 3px 0 rgba(28,23,18,.28);
}
/* items with no photo keep the same indent so names stay aligned */
.pi-thumb-none { border: none; box-shadow: none; background: none; }
.pi-row { display: flex; align-items: baseline; gap: .45rem; }
.pi-name { font-family: var(--font-head); font-weight: 700; font-size: .95rem; }
.pi-dots { flex: 1 1 auto; border-bottom: 2px dotted rgba(28,23,18,.4); min-width: .8rem; transform: translateY(-3px); }
.pi-price { font-family: var(--font-head); font-weight: 800; font-variant-numeric: tabular-nums; }
.pi-desc { margin: .1rem 0 0; font-size: .8rem; color: #6B5F4C; line-height: 1.4; }
@media (max-width: 760px) {
.mural { padding: calc(64px + 1.6rem) 1rem calc(44px + 1.8rem); min-height: 100svh; }
.mural-sky { height: 64px; }
.mural-curb { height: 8px; }
.ma-cross { top: calc(64px + 12px); }
.mural-hint { font-size: .82rem; margin-top: 1.5rem; }
.mural-cats { gap: .7rem 1.3rem; }
.mural-cat { font-size: 1.42rem; padding: .4rem .3rem; }
.poster-items { columns: 1; }
.pi-thumb { width: 60px; height: 60px; }
.poster-panel { padding: 1.1rem .9rem 1.2rem; }
}
/* ============ ORDER ONLINE — PLATES MEAL poster remodel ================== */
.order { padding: 0; }
.garland { position: relative; z-index: 2; }
.checker-hug-top, .checker-hug-bottom { position: relative; z-index: 1; }
/* section seams — the weave carries the eye from one block to the next with
no cream showing through */
.band-top, .band-bottom { position: relative; z-index: 1; display: block; }
.checker.checker-hug-top { height: 64px; background-size: auto 190%; }
.checker { /* woven serape ribbon (orderonlinebanner.webp, owner-supplied) */
height: 42px;
background: url(assets/serape-banner.webp) repeat-x 0 -30px / auto 380px;
border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
}
.order-field {
/* loteria-card collage (AI-generated for this project, rights-clean) */
background: url(assets/loteria-bg.jpg) center / cover no-repeat, var(--red);
color: var(--cream);
padding: 2.2rem 0 2.4rem; overflow: hidden;
position: relative;
}
.order-field > .wrap { position: relative; z-index: 2; }
.op-head, .op-lead { position: relative; }
/* The .wrap sits above the loteria cards (z2 vs z1) and its box — grown by
.op-cards' top padding — covered them, swallowing clicks on transparent
space. Let empty areas pass clicks through; re-arm the real content. */
.order-field > .wrap { pointer-events: none; }
.order-field .op-head,
.order-field .op-lead,
.order-field .op-card { pointer-events: auto; }
.op-head { position: relative; }
/* social loteria cards tucked into the collage — real links, neon-lit */
@keyframes neon-breathe {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.22); }
}
.lot-card {
position: absolute; z-index: 1; display: block;
width: clamp(110px, 11vw, 158px);
border-radius: 8px; padding: 3px; /* the tube sits in this ring */
transition: transform .18s ease, box-shadow .18s ease;
animation: neon-breathe 3.6s ease-in-out infinite;
}
.lot-card img { width: 100%; height: auto; display: block; border-radius: 5px; }
.lot-card:focus-visible { outline: none; }
/* "Click here" badge under each loteria card — the cards read as artwork, so
nothing signalled they were links. Positioned OUTSIDE the neon ring (the
card's padding + background is the tube), on an opaque near-black pill so
the label keeps its contrast over a light, busy collage instead of
depending on whatever card happens to sit behind it. The neon hue is
carried by `color`, and the ring picks it up via currentColor. */
.lot-cta {
position: absolute; top: calc(100% + 10px); left: 50%;
transform: translateX(-50%); white-space: nowrap;
padding: .32rem .62rem; border-radius: 999px;
background: #150D12; border: 1.5px solid currentColor;
font-family: var(--font-head); font-weight: 800;
font-size: .74rem; line-height: 1; letter-spacing: .09em;
text-transform: uppercase;
}
.lot-ig .lot-cta {
color: #F7D3FF;
box-shadow: 0 0 6px rgba(193,59,232,.9), 0 0 16px rgba(193,59,232,.55);
}
.lot-fb .lot-cta {
color: #D9E9FF;
box-shadow: 0 0 6px rgba(46,123,246,.9), 0 0 16px rgba(46,123,246,.55);
}
.lot-card:hover .lot-cta, .lot-card:focus-visible .lot-cta { color: #fff; }
/* Instagram — purple tube */
.lot-ig {
top: 30%; left: 3.5%; transform: rotate(-7deg);
background: #C13BE8;
box-shadow:
0 0 3px #F3C4FF, 0 0 9px #C13BE8, 0 0 22px rgba(193,59,232,.85),
0 0 46px rgba(193,59,232,.55), 0 0 80px rgba(150,40,200,.35),
0 12px 24px rgba(20,8,26,.55);
}
.lot-ig:hover, .lot-ig:focus-visible {
transform: scale(1.06) rotate(-3deg);
box-shadow:
0 0 4px #fff, 0 0 12px #F3C4FF, 0 0 30px #C13BE8,
0 0 62px rgba(193,59,232,.75), 0 0 110px rgba(150,40,200,.5),
0 14px 28px rgba(20,8,26,.6);
}
/* Facebook — blue tube */
.lot-fb {
top: 30%; right: 3.5%; transform: rotate(6deg);
background: #2E7BF6;
box-shadow:
0 0 3px #BEDBFF, 0 0 9px #2E7BF6, 0 0 22px rgba(46,123,246,.85),
0 0 46px rgba(46,123,246,.55), 0 0 80px rgba(24,86,190,.35),
0 12px 24px rgba(6,14,34,.55);
}
.lot-fb:hover, .lot-fb:focus-visible {
transform: scale(1.06) rotate(3deg);
box-shadow:
0 0 4px #fff, 0 0 12px #BEDBFF, 0 0 30px #2E7BF6,
0 0 62px rgba(46,123,246,.75), 0 0 110px rgba(24,86,190,.5),
0 14px 28px rgba(6,14,34,.6);
}
@media (prefers-reduced-motion: reduce) { .lot-card { animation: none; } }
@media (max-width: 900px) {
/* stacked cards start lower on mobile so the loteria pair stays fully
visible and tappable rather than half-buried */
.lot-card { width: 100px; }
.lot-ig { top: 19%; left: 2%; }
.lot-fb { top: 19%; right: 2%; }
/* Below ~900px the order cards go single-column and there is no longer any
horizontal room beside the loteria pair, so a badge hanging BELOW each
card lands on top of them — and loses, since .wrap is z2 against the
cards' z1. Pinning it to straddle the card's bottom edge instead means
it adds no height at all, so the existing clearance still holds.
Chasing it with more padding-top does not work: `top: 19%` resolves
against .order-field's height, so extra padding makes the field taller
and pushes the cards right back down. */
.lot-cta { top: auto; bottom: -10px; }
}
.op-title {
font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
line-height: .88; margin: 0; text-align: center;
font-size: clamp(2.8rem, 7.4vw, 5.6rem); color: var(--cream);
text-shadow: 4px 4px 0 var(--ink), 8px 9px 0 rgba(228,168,76,.5);
}
.op-title span { display: block; }
.op-title span:last-child { color: var(--gold); text-shadow: 5px 5px 0 var(--ink); }
/* Sits directly on the loteria collage, which is busy and light in places, so
soft drop shadows alone left it washing out. Hard 2px outline drawn as an
8-way text-shadow rather than -webkit-text-stroke: the stroke property
centres on the glyph edge and eats into thin strokes at this size, while
the shadow ring sits fully outside the letterform. */
.op-lead {
text-align: center; max-width: 46ch; margin: 1.6rem auto 1.6rem;
color: #FFF6E9; font-size: clamp(1.08rem, 1.5vw, 1.22rem); font-weight: 800;
letter-spacing: .012em;
text-shadow:
-2px -2px 0 var(--ink), 0px -2px 0 var(--ink), 2px -2px 0 var(--ink),
-2px 0px 0 var(--ink), 2px 0px 0 var(--ink),
-2px 2px 0 var(--ink), 0px 2px 0 var(--ink), 2px 2px 0 var(--ink),
0 5px 16px rgba(28,8,4,.75);
}
.op-cards {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 2.2rem; max-width: 820px; margin: 0 auto; /* thinner columns */
padding-top: 6.2rem; /* clears the loteria cards AND their neon halo */
}
.op-card {
background: var(--paper); color: var(--ink);
border: 3px solid var(--ink); border-radius: 16px;
padding: 1.45rem .95rem 1.6rem; text-align: center;
transition: transform .18s ease, box-shadow .18s ease;
animation: neon-breathe 3.6s ease-in-out infinite;
}
/* flag-order neon tubes: verde, blanco, rojo */
.op-0 {
transform: rotate(-1.3deg); border-color: #37E06B;
box-shadow: 0 0 3px #C9FFD9, 0 0 10px #37E06B, 0 0 26px rgba(55,224,107,.7),
0 0 54px rgba(55,224,107,.4), 10px 14px 26px rgba(10,26,14,.45);
}
.op-1 {
transform: rotate(.9deg); border-color: #FFFFFF; animation-delay: .6s;
box-shadow: 0 0 3px #FFFFFF, 0 0 10px #FFF6E6, 0 0 26px rgba(255,246,230,.75),
0 0 54px rgba(255,246,230,.42), 10px 14px 26px rgba(26,20,14,.45);
}
.op-2 {
transform: rotate(-.7deg); border-color: #FF4A4A; animation-delay: 1.2s;
box-shadow: 0 0 3px #FFD2D2, 0 0 10px #FF4A4A, 0 0 26px rgba(255,74,74,.7),
0 0 54px rgba(255,74,74,.4), 10px 14px 26px rgba(34,10,10,.45);
}
.op-card:hover { transform: rotate(0deg) translateY(-5px); }
.op-0:hover { box-shadow: 0 0 4px #fff, 0 0 14px #C9FFD9, 0 0 34px #37E06B,
0 0 72px rgba(55,224,107,.6), 12px 16px 30px rgba(10,26,14,.5); }
.op-1:hover { box-shadow: 0 0 4px #fff, 0 0 14px #FFFFFF, 0 0 34px #FFF6E6,
0 0 72px rgba(255,246,230,.6), 12px 16px 30px rgba(26,20,14,.5); }
.op-2:hover { box-shadow: 0 0 4px #fff, 0 0 14px #FFD2D2, 0 0 34px #FF4A4A,
0 0 72px rgba(255,74,74,.6), 12px 16px 30px rgba(34,10,10,.5); }
@media (prefers-reduced-motion: reduce) { .op-card { animation: none; } }
.op-name {
font-family: var(--font-display); font-weight: 400; font-size: 1.85rem;
margin: 0 0 .35rem; text-transform: uppercase;
}
.op-addr { margin: 0 0 .25rem; color: #4f4638; font-size: .89rem; line-height: 1.4; }
.op-note {
font-family: var(--font-head); font-weight: 700; font-size: .76rem;
letter-spacing: .12em; text-transform: uppercase; color: var(--red);
margin: 0 0 1.35rem;
}
.op-cta { width: 100%; display: flex; }
@media (max-width: 900px) {
/* padding-top clears the loteria cards, their neon halo, and now the
"Click here" badge. 6.6rem was NOT enough even before the badge: between
~430px and ~620px the first order card started ~30px above the loteria
card's bottom edge and painted over the artwork (.wrap is z2 against the
cards' z1). The badge only made the existing overlap visible.
11rem is the measured worst case (+20px of clearance at 560px, the
tightest viewport) — the margin varies with how many lines .op-lead
wraps to, which is why it is not simply "card height + badge". */
.op-cards { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto;
padding-top: 11rem; gap: 1.9rem; }
.lot-cta { font-size: .68rem; padding: .28rem .5rem; letter-spacing: .07em; }
.checker { height: 32px; background-size: auto 290px; background-position: 0 -23px; }
#menu .checker.checker-hug-top { height: 44px; }
}
/* Footer */
.site-footer { background: var(--ink); color: #e8e0d5; padding: 3rem 0 1.5rem; }
.foot-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
.foot-logo { height: 64px; width: auto; margin-bottom: 1rem; }
.foot-social { display: flex; gap: 1rem; }
.foot-social a { color: var(--gold); text-decoration: none; font-weight: 600;
display: inline-flex; align-items: center; min-height: 40px; padding: .3rem .1rem; }
.foot-locs { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.foot-loc { font-size: .92rem; line-height: 1.6; color: #c9bfb2; }
.foot-loc strong { color: #fff; display: block; margin-bottom: .15rem; }
.foot-loc a { text-decoration: none;
display: inline-flex; align-items: center; min-height: 40px; }
.foot-loc a:hover { color: var(--gold); }
.foot-hours {
display: block; margin-top: .5rem; padding-top: .45rem;
border-top: 1px dashed rgba(201,188,164,.28); font-size: .84rem;
}
.foot-hrow { display: flex; justify-content: space-between; gap: 1rem; padding: .06rem 0; }
.foot-hrow span:first-child { color: #9c8f7c; }
.foot-hrow span:last-child { font-variant-numeric: tabular-nums; }
.foot-soon { color: #9c8f7c; font-style: italic; }
.foot-legal { text-align: center; color: #8a8073; font-size: .82rem; margin: 2.5rem 0 0; }
/* Responsive */
@media (max-width: 860px) {
.loc-grid { grid-template-columns: 1fr; }
.menu-body { columns: 1; }
.nav { gap: .9rem; }
.hero { padding: 3.5rem 0 3rem; }
}
/* Mobile map card — must come AFTER the base .map-card rules in source order */
@media (max-width: 760px) {
.map-card {
top: auto; bottom: 12px; left: 12px; right: 12px; max-width: none;
padding: .65rem .8rem;
display: flex; align-items: center; gap: .7rem;
}
.map-title { display: none; }
.map-sub { display: none; }
.map-chips { flex: 1; flex-wrap: nowrap; gap: .4rem; overflow-x: auto; justify-content: space-between; }
.map-chip { white-space: nowrap; font-size: .74rem; padding: .45rem .7rem; }
/* OSM/CARTO attribution is required to stay visible — lift it above the card */
.map-shell .leaflet-bottom.leaflet-right { bottom: 74px; }
}
/* ---------------- accessibility + policy surfaces ----------------
Appended at the end deliberately: these are new classes that nothing else
styles, so source order can't bite them (see CLAUDE.md). */
/* Skip link — offscreen until focused, then a solid brand chip at top-left.
Not display:none, which would take it out of the tab order entirely.
No transition on the reveal either: a skip link is the very first thing a
keyboard user lands on, and animating it in means the first frames after
Tab still show nothing. It appears instantly. */
.skip-link {
position: absolute; left: 8px; top: -60px; z-index: 2000;
background: var(--ink); color: var(--cream);
font: 700 .95rem/1 var(--font-head);
padding: .8rem 1.15rem; border-radius: 0 0 10px 10px;
text-decoration: none; border: 2px solid var(--gold);
}
.skip-link:focus { top: 0; outline: 3px solid var(--gold); outline-offset: 2px; }
/* Menu-page notices: prices-change + allergen + raw-seafood advisory.
Dark choco field with cream text, the same surface as the statement
section and the footer. On the paper background this copy read as an
afterthought stuck under the wall; as a deliberate dark band it closes the
menu page and hands off cleanly to the serape seam below. The .wrap lives
INSIDE the aside so the band is full-bleed. */
.menu-advisories {
background: var(--choco);
color: #DCD0BC;
padding: 1.7rem 0 1.9rem;
font-size: .82rem; line-height: 1.58; font-weight: 400;
}
/* Wider measure than the policy pages use: this is fine print, and letting
it run long costs a line or two of height rather than reading comfort. */
.adv-inner { max-width: 88ch; }
.adv-head {
margin: 0 0 .7rem;
font-family: var(--font-head); font-weight: 600;
font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
color: var(--gold);
}
.menu-advisories p { margin: 0 0 .5rem; }
.menu-advisories p:last-child { margin-bottom: 0; }
.menu-advisories .adv-allergen { color: var(--cream); }
.menu-advisories .adv-raw {
margin-top: .8rem; padding-left: .85rem;
border-left: 2px solid var(--gold-deep);
color: #C6B9A3; font-style: italic; font-size: .76rem;
}
/* Policy pages (accessibility, privacy) — plain, high-contrast, one column. */
.legal-page { background: var(--paper); padding: 3.5rem 0 4.5rem; }
.lg-wrap { max-width: 74ch; }
.legal-page h1 {
font-family: var(--font-display); font-weight: 400;
font-size: clamp(2.1rem, 5vw, 3rem); line-height: 1.1;
margin: 0 0 1rem; color: var(--ink);
}
.legal-page h2 {
font-size: 1.2rem; margin: 2.4rem 0 .6rem; color: var(--red-deep);
letter-spacing: .01em;
}
.legal-page p { margin: 0 0 .9rem; color: #33291F; }
.lg-lead { font-size: 1.1rem; color: #2A2119; }
.lg-list { margin: 0 0 .9rem; padding-left: 1.15rem; color: #33291F; }
.lg-list li { margin-bottom: .55rem; }
.lg-limits li { margin-bottom: .9rem; }
.lg-alt { display: block; margin-top: .25rem; color: var(--green-deep); font-weight: 500; }
.lg-contact { list-style: none; margin: 0 0 1rem; padding: 0; }
.lg-contact li {
padding: .6rem .9rem; margin-bottom: .5rem;
background: var(--cream); border-left: 4px solid var(--green);
border-radius: 0 8px 8px 0;
}
.lg-note {
margin-top: 1.6rem; padding: 1rem 1.15rem;
background: var(--cream); border-left: 4px solid var(--gold);
border-radius: 0 8px 8px 0; font-weight: 500;
}
.legal-page a { color: var(--red-deep); }
.legal-page a:hover { color: var(--ink); }
/* Footer policy links */
.foot-legal-nav {
display: flex; justify-content: center; gap: 1.5rem;
margin: 2.5rem 0 0; flex-wrap: wrap;
}
.foot-legal-nav a {
color: #C9BFB0; font-size: .88rem; text-decoration: underline;
text-underline-offset: 3px;
}
.foot-legal-nav a:hover { color: var(--cream); }
.foot-legal-nav + .foot-legal { margin-top: .9rem; }
/* Phone header (WCAG 1.4.10 reflow + owner feedback: "squished").
Two tiers, matching the ≤560px point where the brief labels (MAP/MAPA,
ESÑ/EN) take over. Originally only ≤400px shrank the slabs, so phones in
the 401–560 range (iPhone Plus/Max, most Androids) showed four FULL-SIZE
slabs crammed edge to edge. Now every phone gets the compact tier and the
narrowest get a second squeeze. 40px min tap target untouched throughout.
Must stay at the end of the file: overrides .nav/.nav-btn set far above. */
@media (max-width: 560px) {
.wrap { padding: 0 16px; }
.nav { gap: .42rem; }
.nav-menu, .nav-loc, .nav-order {
font-size: .8rem; padding: .55rem .6rem; border-radius: 9px;
box-shadow: 3px 4px 0 var(--red);
}
.nav-loc { box-shadow: 3px 4px 0 var(--gold); }
.nav-order { font-size: .92rem; padding: .6rem .85rem;
box-shadow: 3px 4px 0 var(--gold), 0 0 14px rgba(228,168,76,.9), 0 0 28px rgba(228,168,76,.55), 0 0 44px rgba(228,168,76,.3); }
.brand-logo { height: 36px; }
}
@media (max-width: 360px) {
.wrap { padding: 0 12px; }
.nav { gap: .32rem; }
.nav-menu, .nav-loc, .nav-order {
font-size: .73rem; padding: .5rem .52rem; border-radius: 8px;
}
.nav-order { font-size: .84rem; padding: .55rem .6rem; }
.brand-logo { height: 32px; }
}
/* Effective-date / provenance line at the foot of a policy page. */
.lg-date {
margin-top: 2rem; padding-top: 1rem;
border-top: 1px solid var(--line);
font-size: .88rem; color: #5E5346;
}
/* Language toggle — the fourth Marquesina slab, in the one colorway the trio
doesn't use: oro field, negro letters (measured 8.4:1). Owner asked for it
to read as an obvious button, yellow so it stands apart from negro Menu,
verde Locations and rojo Order. Ink offset shadow for the same reason —
the other three all cast red or gold. The full word gives way to ESÑ/EN
below 560px so the nav keeps fitting on narrow phones (the 320px reflow
fix above is load-bearing — re-test it whenever this changes). */
.nav-lang {
display: inline-flex; align-items: center; justify-content: center;
min-height: 40px; cursor: pointer; user-select: none; line-height: 1;
font-family: 'Alfa Slab One', serif; font-weight: 400;
font-size: .92rem; letter-spacing: .02em; text-transform: uppercase;
padding: .58rem 1.15rem; border-radius: 11px;
border: 2.5px solid var(--ink); background: var(--gold);
box-shadow: 4px 5px 0 var(--ink);
color: var(--ink); text-decoration: none;
transition: transform .1s ease, box-shadow .1s ease;
}
.nav-lang:hover { transform: translate(-1px,-1px); box-shadow: 5px 6px 0 var(--ink);
background: #EFBA64; }
.nav-lang:active { transform: translate(4px,5px); box-shadow: 0 0 0 var(--ink); }
@media (prefers-reduced-motion: reduce) { .nav-lang { transition: none; } }
.nav-lang .lang-short { display: none; }
@media (max-width: 560px) {
.nav-lang .lang-long { display: none; }
.nav-lang .lang-short { display: inline; }
}
/* joins the phone-tier tightening that keeps the nav inside 320px */
@media (max-width: 560px) {
.nav-lang { font-size: .8rem; padding: .55rem .6rem; border-radius: 9px;
box-shadow: 3px 4px 0 var(--ink); }
}
@media (max-width: 360px) {
.nav-lang { font-size: .73rem; padding: .5rem .52rem; border-radius: 8px; }
}
/* Spanish nav words are longer than English ones ("Ubicaciones" alone is
wider than "Menu"+"Order" together), so the Locations button carries two
labels: the full word, and a brief one ("Mapa" in Spanish — the link goes
to the map section, so the short word stays honest) that takes over below
560px alongside the ES/EN swap above. Only one span is ever displayed, so
screen readers read exactly what sighted users see. In English both spans
say "Locations" and the swap is invisible. */
.nav-loc .nav-brief { display: none; }
@media (max-width: 560px) {
.nav-loc .nav-full { display: none; }
.nav-loc .nav-brief { display: inline; }
}
/* ---------------- menu photo lightbox ----------------
Every menu thumbnail is a button that opens a larger (640px) version of the
photo in a native