/* Dandre menu — dandre.hookup.design
Styles for the mobile-first restaurant menu page.
Layout: single-column mobile, 2-col tablet, 3-col desktop (1400px cap).
Colors: teal #3CB3C4 accent on paper #fff9f0 background.
Typography: Sofia Sans Condensed (headings, prices) + Inter (body). */
:root {
--teal: #3CB3C4;
--teal-dark: #1c4046;
--ink: #1c4046;
--muted: #7a8a8d;
--muted-2: #96a4a6;
--paper: #fff9f0;
--card: #ffffff;
--line: #e8dfce;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* NOTE: overflow-x lives on body only, NOT html. Putting overflow-x (or any
overflow value other than visible) on the element breaks position:
fixed on iOS Safari — fixed elements get scoped to the document height and
scroll with the page instead of sticking to the viewport. Keeping html
clean preserves correct fixed positioning for the back-to-top button and
any future sticky/fixed UI. The body's overflow-x: hidden is enough to
clip the full-bleed 100vw separators from causing horizontal scroll. */
html { scroll-behavior: smooth; }
body {
background: var(--paper);
color: var(--ink);
font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
.page {
max-width: 1400px;
margin: 0 auto;
padding: 32px 20px 80px;
}
/* ---------- TOP HEADER BAR ---------- */
/* Full-bleed dark strip at the very top of the page with the logo on the
left and the language toggle on the right. No H1 inside. Breaks out of
.page's max-width and cancels .page's top padding so it starts flush at
the viewport top. */
.header-bar {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-top: -32px;
padding: 14px 20px;
background: var(--ink);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.header-bar .logo {
display: block;
height: 65px;
width: auto;
}
.header-bar .header-right {
display: flex;
align-items: center;
gap: 12px;
}
/* Site-level navigation: Desayunos · Almuerzo · Bebidas
Desktop: inline links in the header bar.
Mobile/tablet: hidden behind a "Menu" pill that opens a dropdown. */
/* ---- Desktop nav links ---- */
.site-nav {
display: none;
gap: 20px;
}
.site-nav a {
font-family: 'Sofia Sans Condensed', sans-serif;
font-weight: 800;
font-size: 16px;
color: rgba(255,255,255,.65);
text-decoration: none;
letter-spacing: .02em;
padding: 4px 0;
border-bottom: 2px solid transparent;
transition: color .15s ease, border-color .15s ease;
white-space: nowrap;
}
.site-nav a:hover { color: #ffffff; }
.site-nav a.is-current {
color: #ffffff;
border-bottom-color: var(--teal);
}
/* ---- Mobile menu pill ---- */
/* Matches the lang toggle aesthetic: teal pill, inset glow, white button
inside with teal text. Single button fills most of the pill width with
a sliver of teal peeking around all edges. */
.menu-pill {
position: relative;
display: inline-flex;
padding: 3px;
border: 0;
border-radius: 999px;
background: var(--teal);
box-shadow: inset 0 0 5px rgba(0, 0, 0, .4);
}
.menu-pill-btn {
appearance: none;
border: 0;
background: #ffffff;
padding: 6px 20px;
font-family: 'Sofia Sans Condensed', sans-serif;
font-weight: 800;
font-size: 16px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--teal);
border-radius: 999px;
cursor: pointer;
line-height: 1;
transition: background-color .15s ease, color .15s ease;
}
.menu-pill-btn:hover { color: var(--ink); }
.menu-pill-btn:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 2px;
}
/* ---- Mobile dropdown ---- */
/* Full-screen overlay dropdown. Uses the same .menu-link card style as the
landing page for visual consistency. */
.menu-dropdown {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(60, 179, 196, .72);
backdrop-filter: saturate(140%) blur(12px);
-webkit-backdrop-filter: saturate(140%) blur(12px);
z-index: 60;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
padding: 24px;
}
.menu-pill.is-open .menu-dropdown { display: flex; }
.menu-dropdown a {
display: block;
width: 100%;
max-width: 400px;
padding: 20px 28px;
background: var(--card);
border-radius: 0;
box-shadow: 0 6px 20px rgba(28, 64, 70, .08);
text-decoration: none;
text-align: center;
transition: box-shadow .15s ease, transform .15s ease;
}
.menu-dropdown a:hover {
box-shadow: 0 10px 32px rgba(28, 64, 70, .14);
transform: translateY(-2px);
}
.menu-dropdown .link-title {
font-family: 'Sofia Sans Condensed', sans-serif;
font-weight: 800;
font-size: 26px;
color: var(--teal);
line-height: 1;
}
.menu-dropdown .link-desc {
font-size: 14px;
font-weight: 500;
color: var(--ink);
margin-top: 6px;
}
.menu-dropdown a.is-current .link-title {
color: var(--ink);
}
@media (min-width: 760px) {
.header-bar { margin-top: -48px; padding: 18px 32px; }
/* Smaller pill fonts at tablet+ widths to match the more compact desktop header */
.lang-toggle button { padding: 5px 10px; font-size: 14px; }
.menu-pill-btn { padding: 5px 18px; font-size: 14px; }
}
@media (min-width: 1200px) {
.header-bar { margin-top: -64px; padding: 20px 40px; }
/* Show inline links, hide pill */
.site-nav { display: flex; gap: 36px; }
.site-nav a { font-size: 19px; }
.menu-pill { display: none; }
.lang-toggle { margin-left: 20px; }
}
/* ---------- LANDING PAGE ---------- */
.landing {
text-align: center;
padding: 0 20px 80px;
}
.landing .brand {
margin-top: 16px;
margin-bottom: 0;
}
.landing .subtitle {
font-size: 17px;
font-weight: 500;
color: var(--muted);
margin: 0 0 48px;
}
.landing .menu-links {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 400px;
margin: 0 auto;
}
.landing .menu-link {
display: block;
padding: 20px 28px;
background: var(--card);
border-radius: 0;
box-shadow: 0 6px 20px rgba(28, 64, 70, .08);
text-decoration: none;
transition: box-shadow .15s ease, transform .15s ease;
}
.landing .menu-link:hover {
box-shadow: 0 10px 32px rgba(28, 64, 70, .14);
transform: translateY(-2px);
}
.landing .menu-link .link-title {
font-family: 'Sofia Sans Condensed', sans-serif;
font-weight: 800;
font-size: 26px;
color: var(--teal);
line-height: 1;
}
.landing .menu-link .link-desc {
font-size: 14px;
font-weight: 500;
color: var(--ink);
margin-top: 6px;
}
@media (min-width: 760px) {
.landing { padding: 0 32px 96px; }
.landing .menu-links { flex-direction: row; max-width: none; justify-content: center; }
.landing .menu-link { flex: 0 1 280px; }
}
/* ---------- HEADER TEAR ---------- */
/* A single torn-top copy of the paper-candy SVG in cream, full-bleed, pulled
up with a negative top margin so its teeth bite into the dark header bar
above it. Breaks the straight bottom edge of the bar. */
.header-sep {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-top: -6px;
height: 6px;
position: relative;
z-index: 1;
background-image: url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
background-repeat: no-repeat;
}
@media (min-width: 760px) {
.header-sep { height: 8px; margin-top: -8px; }
}
@media (min-width: 1200px) {
.header-sep { height: 9px; margin-top: -9px; }
}
/* ---------- BRAND HEADLINE (below the bar) ---------- */
.brand {
text-align: center;
margin-top: 16px;
margin-bottom: 0;
}
/* ---------- SECTION NAVIGATION (sticky) ---------- */
/* Sticky horizontal anchor nav. Full-bleed paper background so it covers
content scrolling underneath; inner wrapper caps content width and hosts
the fade-right hint. Active section tracking is handled in index.html via
IntersectionObserver — this CSS only defines the visual states. */
.section-nav {
position: sticky;
top: 0;
z-index: 40;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-bottom: 0;
background: rgba(255, 249, 240, .72);
backdrop-filter: saturate(140%) blur(12px);
-webkit-backdrop-filter: saturate(140%) blur(12px);
}
.section-nav-inner {
position: relative;
max-width: 1100px;
margin: 0 auto;
}
.section-nav-inner::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 44px;
background: linear-gradient(to right, rgba(255, 249, 240, 0), rgba(255, 249, 240, 1));
pointer-events: none;
z-index: 2;
}
.section-nav ul {
list-style: none;
margin: 0;
padding: 10px 44px 10px 28px;
display: flex;
flex-wrap: nowrap;
justify-content: safe center;
gap: 28px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
.section-nav ul::-webkit-scrollbar { display: none; }
.section-nav li {
flex-shrink: 0;
}
.section-nav a {
font-family: 'Sofia Sans Condensed', sans-serif;
font-weight: 800;
font-size: 22px;
letter-spacing: .01em;
color: var(--teal);
text-decoration: none;
padding: 4px 2px;
display: inline-block;
white-space: nowrap;
border-bottom: 2px solid transparent; /* reserves space so active state doesn't jump */
transition: color .15s ease, border-color .2s ease;
}
.section-nav a:hover,
.section-nav a:focus-visible {
color: var(--ink);
outline: none;
}
.section-nav a.is-active {
color: var(--ink);
border-bottom-color: var(--teal);
}
@media (min-width: 760px) {
.section-nav { margin-bottom: 0; }
.section-nav ul { gap: 34px; padding: 12px 48px 12px 32px; }
.section-nav a { font-size: 22px; }
}
@media (min-width: 1200px) {
.section-nav { margin-bottom: 0px; }
.section-nav ul { gap: 40px; padding: 14px 44px 14px 28px; }
.section-nav a { font-size: 22px; }
}
/* Push anchor targets down by the sticky nav height so clicking a nav link
lands the section head below the nav instead of behind it. */
.section { scroll-margin-top: 60px; }
@media (min-width: 760px) { .section { scroll-margin-top: 68px; } }
@media (min-width: 1200px) { .section { scroll-margin-top: 76px; } }
.brand h1 {
font-family: 'Sofia Sans Condensed', sans-serif;
font-weight: 900;
font-size: 44px;
color: var(--ink);
margin: 0;
line-height: 1;
letter-spacing: -0.01em;
}
@media (min-width: 760px) {
.brand h1 { font-size: 56px; }
}
/* ---------- LANGUAGE TOGGLE ---------- */
/* CSS hides the opposite language based on the html.lang-* class. */
.lang-es .en-only { display: none; }
.lang-en .es-only { display: none; }
.lang-toggle {
position: static;
display: inline-flex;
gap: 2px;
padding: 3px;
border: 0;
border-radius: 999px;
background: var(--teal);
box-shadow: inset 0 0 5px rgba(0, 0, 0, .4);
flex-shrink: 0;
}
.lang-toggle button {
appearance: none;
border: 0;
background: transparent;
padding: 6px 12px;
font-family: 'Sofia Sans Condensed', sans-serif;
font-weight: 800;
font-size: 16px;
letter-spacing: .08em;
color: #ffffff;
border-radius: 999px;
cursor: pointer;
line-height: 1;
transition: background-color .15s ease, color .15s ease;
}
.lang-toggle button:hover { color: var(--ink); }
.lang-toggle button[aria-pressed="true"] {
background: #ffffff;
color: var(--teal);
}
.lang-toggle button[aria-pressed="true"]:hover { color: var(--teal); }
.lang-toggle button:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 2px;
}
@media (min-width: 760px) {
.lang-toggle button { padding: 7px 16px; font-size: 15px; }
}
/* ---------- SECTION BANNER (shared by card + list sections) ---------- */
.section { margin-top: 0; }
.section-head {
width: 100vw;
margin-top: -3px;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
background: linear-gradient(to bottom, #ffffff, var(--paper));
padding: 15px;
text-align: center;
}
.section-head h2 {
font-family: 'Sofia Sans Condensed', sans-serif;
font-style: italic;
font-weight: 800;
font-size: 38px;
color: var(--teal);
margin: 0 0 6px;
line-height: 1;
}
/* ---------- SECTION SEPARATORS ---------- */
/* Full-bleed section divider built from two copies of the original Dandre
"paper candy" torn-edge SVG. Solid flat edges meet in the middle, torn
edges face out. Breaks out of .page max-width to span full viewport width. */
.sep-divider {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
display: block;
}
.sep-half {
display: block;
width: 100%;
height: 6px;
background-image: url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.sep-half--flip { transform: scaleY(-1) scaleX(-1); }
.sep-divider--blue { margin-bottom: 30px; }
.sep-divider--white {
margin-top: 28px;
margin-bottom: 0;
}
#menu-root > .section:first-child > .sep-divider--white:first-child {
margin-top: 0;
}
.sep-divider--white .sep-half {
background-image: url("data:image/svg+xml;utf8,");
}
/* ---------- CARD ITEMS GRID (photo sections) ---------- */
.items {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
}
.item {
background: var(--card);
border-radius: 0;
overflow: hidden;
box-shadow: 0 6px 20px rgba(28,64,70,.08);
margin-bottom: 18px;
display: flex;
flex-direction: column;
}
.item > .body { flex: 1; display: flex; flex-direction: column; }
.item .photo {
aspect-ratio: 16/10;
display: flex;
align-items: center;
justify-content: center;
padding: 14px;
color: rgba(255,255,255,.92);
background-size: cover;
background-position: center;
}
.item .photo .photo-placeholder {
width: 56px;
height: 56px;
stroke: rgba(255, 255, 255, .85);
filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.item .body { padding: 16px 18px 20px; }
.item .name-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
}
.item .title-stack { flex: 1; min-width: 0; }
.item .name-es {
font-family: 'Sofia Sans Condensed', sans-serif;
font-weight: 800;
font-size: 22px;
color: var(--ink);
line-height: 1.05;
}
.item .price {
font-family: 'Sofia Sans Condensed', sans-serif;
font-style: italic;
font-weight: 800;
font-size: 24px;
color: var(--teal);
flex-shrink: 0;
}
.item .name-en {
font-family: 'Sofia Sans Condensed', sans-serif;
font-weight: 800;
font-size: 22px;
line-height: 1.05;
color: var(--ink);
}
.item .desc-es {
font-size: 16px;
font-weight: 500;
line-height: 1.5;
color: var(--ink);
margin-top: 12px;
}
.item .desc-en {
font-weight: 500;
font-size: 16px;
line-height: 1.5;
color: var(--ink);
margin-top: 12px;
}
/* Additional variant row inside an item (e.g. Turkey Ham Benedictinos). */
.item .name-row + .name-row { margin-top: 8px; }
/* Optional footnote under a card section (e.g. "All our breads are made in house"). */
.list-footnote {
text-align: center;
font-style: italic;
font-weight: 600;
font-size: 13px;
color: var(--muted);
margin: 24px 0 0;
letter-spacing: .06em;
text-transform: uppercase;
}
/* ---------- LIST-STYLE SECTIONS (no photos) ---------- */
/* Used by Extras (Cereales, Crepes, Postres, Adiciones) where each item is
just a row with a name, optional description, and a right-aligned price. */
.list-wrap {
max-width: 960px;
margin: 0 auto;
}
.list {
list-style: none;
margin: 0 0 24px;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 18px;
}
/* Tablet+ flows items column-by-column (read top-to-bottom in the left
column, then top-to-bottom in the right) so an alphabetical list scans
naturally instead of zig-zagging left-right. Uses CSS multi-column
instead of a 2-col grid, with break-inside:avoid so each list-item
stays intact across the column break. */
@media (min-width: 760px) {
.list {
display: block;
column-count: 2;
column-gap: 80px;
gap: 0;
}
}
@media (min-width: 1200px) {
.list { column-gap: 96px; }
}
.list-item {
display: flex;
flex-direction: column;
gap: 4px;
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
}
@media (min-width: 760px) {
.list-item { margin-bottom: 22px; }
}
.list-item .row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
}
.list-item .name {
font-family: 'Sofia Sans Condensed', sans-serif;
font-weight: 800;
font-size: 18px;
color: var(--ink);
line-height: 1.1;
letter-spacing: .02em;
text-transform: uppercase;
}
.list-item .price {
font-family: 'Sofia Sans Condensed', sans-serif;
font-style: italic;
font-weight: 800;
font-size: 18px;
color: var(--teal);
flex-shrink: 0;
}
.list-item .desc {
font-size: 14px;
font-weight: 500;
line-height: 1.45;
color: var(--ink);
margin: 2px 0 0;
}
.list-item .desc-en { font-style: italic; }
.list-item .variant-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin-top: 2px;
}
.list-item .variant-name {
font-family: 'Sofia Sans Condensed', sans-serif;
font-weight: 700;
font-size: 15px;
color: var(--ink);
text-transform: none;
}
/* Subgroup heading inside a list section (e.g. "Crepes" inside Extras). */
.subgroup { margin-bottom: 32px; }
.subgroup:last-child { margin-bottom: 0; }
.subgroup-head {
font-family: 'Sofia Sans Condensed', sans-serif;
font-weight: 800;
font-style: italic;
font-size: 22px;
color: var(--teal);
letter-spacing: .06em;
text-transform: uppercase;
margin: 0 0 14px;
padding-bottom: 8px;
border-bottom: 1.5px solid var(--teal);
}
/* ---------- RESPONSIVE ---------- */
/* Breakpoints:
< 760px 1 column (mobile)
760px - 1199px 2 columns (tablet, small desktop)
>= 1200px 3 columns (desktop, page capped at 1400px) */
@media (min-width: 760px) {
.page { padding: 48px 32px 96px; }
.items { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.item { margin-bottom: 0 !important; }
.section-head { padding: 15px; }
.section-head h2 { font-size: 44px; }
.sep-half { height: 8px; }
.sep-divider--white { margin-top: 40px; }
}
@media (min-width: 1200px) {
.page { padding: 64px 40px 10px; }
.items { grid-template-columns: repeat(3, 1fr); gap: 32px; }
.section-head { padding: 15px; }
.sep-half { height: 6px; }
.sep-divider--white { margin-top: 30px; }
.sep-divider--blue { margin-bottom: 30px; }
}
/* ---------- FOOTER ---------- */
.foot {
text-align: center;
width: 100vw;
margin: -3px calc(50% - 50vw) 0;
padding: 24px 16px 0px 16px;
background: linear-gradient(to bottom, #ffffff, var(--paper));
}
.foot p {
font-style: italic;
font-size: 13px;
color: var(--muted);
line-height: 1.5;
}
.foot .credit {
font-style: normal;
font-size: 12px;
letter-spacing: .02em;
margin-top: 14px;
}
.foot p:last-child { margin-bottom: 0; }
.foot .credit a {
color: var(--teal);
text-decoration: none;
}
.foot .credit a:hover { text-decoration: underline; }
/* ---------- BACK TO TOP BUTTON ---------- */
/* Fixed bottom-right, hidden until the user has scrolled past the first
screen-height worth of content. Fade/slide in. Large enough to tap on
mobile (48px target) without dominating the viewport. */
.back-to-top {
position: fixed;
right: 20px;
bottom: 20px;
width: 48px;
height: 48px;
border: 0;
border-radius: 999px;
background: var(--teal);
color: #ffffff;
cursor: pointer;
box-shadow: 0 6px 20px rgba(28, 64, 70, .25);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity .2s ease, transform .2s ease, visibility .2s ease, background-color .15s ease;
z-index: 50;
}
.back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover { background: var(--ink); }
.back-to-top:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 2px;
box-shadow: 0 0 0 4px var(--teal);
}
.back-to-top svg {
width: 20px;
height: 20px;
stroke: #ffffff;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
@media (min-width: 760px) {
.back-to-top { right: 28px; bottom: 28px; width: 52px; height: 52px; }
.back-to-top svg { width: 22px; height: 22px; }
}
/* ---------- INFO PAGES (About, Contact) ---------- */
/* Shared shell for non-menu static pages. Reuses .brand headline and the
same card aesthetic as the landing page but with a single centered
column of content on mobile and flexible horizontal layouts at wider
breakpoints. */
.info-page {
padding: 0 0px 80px;
text-align: center;
}
.info-page .subtitle {
font-size: 17px;
font-weight: 500;
color: var(--muted);
margin: 4px auto 32px;
max-width: 560px;
}
.info-page .info-intro {
max-width: 680px;
margin: 0 auto 40px;
font-size: 17px;
line-height: 1.6;
color: var(--ink);
}
/* ---- About pillars (three feature cards) ---- */
.pillars {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 400px;
margin: 0 auto;
}
.pillar {
background: var(--card);
padding: 24px 28px;
text-align: left;
box-shadow: 0 6px 20px rgba(28, 64, 70, .08);
}
.pillar h2 {
font-family: 'Sofia Sans Condensed', sans-serif;
font-weight: 800;
font-size: 26px;
color: var(--teal);
margin: 0 0 8px;
line-height: 1;
}
.pillar p {
margin: 0;
font-size: 15px;
line-height: 1.55;
color: var(--ink);
}
/* ---- Contact two-column ---- */
.contact-grid {
display: flex;
flex-direction: column;
gap: 24px;
max-width: 400px;
margin: 0 auto 0;
}
.contact-info {
background: var(--card);
padding: 24px 28px;
text-align: left;
box-shadow: 0 6px 20px rgba(28, 64, 70, .08);
}
.contact-info h2 {
font-family: 'Sofia Sans Condensed', sans-serif;
font-weight: 800;
font-size: 18px;
color: var(--teal);
margin: 0 0 4px;
line-height: 1;
text-transform: uppercase;
letter-spacing: .06em;
}
.contact-info .field + .field { margin-top: 20px; }
.contact-info p,
.contact-info a {
margin: 2px 0;
font-size: 15px;
line-height: 1.55;
color: var(--ink);
text-decoration: none;
display: block;
}
.contact-info a:hover { color: var(--teal); }
/* ---- Leaflet map container ---- */
.contact-map {
height: 320px;
background: var(--card);
box-shadow: 0 6px 20px rgba(28, 64, 70, .08);
overflow: hidden;
}
.contact-map .leaflet-container {
height: 100%;
width: 100%;
background: var(--paper);
font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}
.contact-map .leaflet-popup-content-wrapper {
border-radius: 6px;
}
.contact-map .leaflet-popup-content .map-status {
display: block;
margin-top: 8px;
font-size: 13px;
font-weight: 600;
color: var(--ink);
}
.contact-map .leaflet-popup-content .map-status::before {
content: '';
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
margin-right: 7px;
vertical-align: middle;
}
.contact-map .leaflet-popup-content .map-status-open::before { background: #2eb85c; }
.contact-map .leaflet-popup-content .map-status-closing::before { background: #e0a735; }
.contact-map .leaflet-popup-content .map-status-closed::before { background: #c76b60; }
.contact-map .leaflet-popup-content {
font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14px;
color: var(--ink);
margin: 10px 14px;
line-height: 1.4;
}
.contact-map .leaflet-popup-content b {
font-family: 'Sofia Sans Condensed', sans-serif;
font-weight: 800;
font-size: 18px;
color: var(--teal);
display: block;
margin-bottom: 2px;
}
/* ---- Social buttons row ---- */
.socials {
display: flex;
justify-content: center;
gap: 16px;
margin: 40px auto 0;
flex-wrap: wrap;
}
.social-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 999px;
background: var(--teal);
color: #ffffff;
text-decoration: none;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .4), 0 6px 20px rgba(28, 64, 70, .15);
transition: transform .15s ease, background-color .15s ease;
}
.social-btn:hover {
background: var(--ink);
transform: translateY(-2px);
}
.social-btn:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 3px;
}
.social-btn svg {
width: 26px;
height: 26px;
fill: currentColor;
}
.social-btn.social-rappi {
width: auto;
padding: 0 22px;
font-family: 'Sofia Sans Condensed', sans-serif;
font-weight: 800;
font-size: 20px;
letter-spacing: .04em;
font-style: italic;
}
/* Footer-injected socials override: zero the in-page top margin, keep
centering, and add a small bottom gap before the tagline line. */
.foot .socials { margin: 0 auto 20px; }
@media (min-width: 760px) {
.info-page { padding: 0 32px 96px; }
.pillars {
flex-direction: row;
max-width: none;
justify-content: center;
align-items: stretch;
}
.pillar { flex: 0 1 300px; }
.contact-grid {
flex-direction: row;
max-width: none;
align-items: stretch;
}
.contact-info { flex: 1 1 320px; }
.contact-map {
flex: 1.4 1 480px;
min-height: 380px;
height: auto;
}
}
/* ---- Menu dropdown page separator ---- */
/* Thin white hairline rule that sits between the three menus and the
About / Contact links in the mobile menu dropdown. */
.menu-dropdown-sep {
width: 60%;
max-width: 240px;
height: 0;
border: 0;
border-top: 1px solid rgba(255, 255, 255, .45);
margin: 4px 0;
}