/* ==========================================================================
Marisqueira Paulo's
Palette: the room itself. Navy #16175A sampled from the logo, azulejo
white-blue for tinted surfaces, and the dining room's wall yellow as the
one warm accent. Blue and white tiles, blue check tablecloths, yellow
walls: the site is the house, not a stock restaurant theme.
Radius system (one rule, applied everywhere):
buttons + pills .......... 999px
media, cells, panels ..... 14px
inputs, small chips ...... 10px
Motion: MOTION_INTENSITY 6. Pinned hero, IntersectionObserver reveals,
CSS transitions. No scroll listeners anywhere.
========================================================================== */
:root{
--ground:#FFFFFF;
--ground-2:#FFFFFF;
--tint:#EEF1F8; /* azulejo white-blue: neutral surfaces and media wells */
--band:#F0C34A; /* the wall yellow, ONLY as the full-width mesa band */
--ink:#141631; /* navy-black, the logo's own dark */
--ink-2:#464A63;
--ink-3:#565A72; /* 7.0:1 on white, 6.0:1 on the tint */
--line:#DFE3EE;
--accent:#16175A; /* sampled from the logo */
--accent-deep:#16175A;
--accent-hover:#0E0F3E; /* hover darkens, never lightens: keeps label AA */
--btn-fg:#FFFFFF;
--accent-soft:rgba(22,23,90,.08);
--sun:#F0C34A; /* the dining room wall, used sparingly */
--dark-panel:#16175A;
--dark-panel-ink:#F2F4FB;
--scrim:16,17,45; /* hero scrim, rgb triplet */
--r-pill:999px;
--r-card:14px;
--r-in:10px;
--f-serif:"DM Serif Display",Georgia,"Times New Roman",serif;
--f-sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
--wrap:1180px;
--ease:cubic-bezier(.16,1,.3,1);
--ease-out:cubic-bezier(.22,.61,.36,1); /* fades and panel changes */
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--ground:#0F1122;
--ground-2:#161930;
--tint:#1A1D33;
--band:#1A1D33;
--ink:#EFF1F8;
--ink-2:#B4BAD2;
--ink-3:#A9AFC8;
--line:#2A2F4A;
--accent:#A9BCF5;
--accent-deep:#A9BCF5;
--accent-hover:#C3D0F9;
--btn-fg:#0E1030; /* dark ink on the light fill: 9.9:1 */
--accent-soft:rgba(169,188,245,.14);
--sun:#F0C34A;
--dark-panel:#161B36;
--dark-panel-ink:#EFF1F8;
--scrim:10,11,26;
}
}
/* Same tokens under an explicit attribute so a theme toggle can win
in both directions, independent of the OS preference. */
:root[data-theme="dark"]{
--ground:#0F1122;
--ground-2:#161930;
--tint:#1A1D33;
--band:#1A1D33;
--ink:#EFF1F8;
--ink-2:#B4BAD2;
--ink-3:#A9AFC8;
--line:#2A2F4A;
--accent:#A9BCF5;
--accent-deep:#A9BCF5;
--accent-hover:#C3D0F9;
--btn-fg:#0E1030; /* dark ink on the light fill: 9.9:1 */
--accent-soft:rgba(169,188,245,.14);
--sun:#F0C34A;
--dark-panel:#161B36;
--dark-panel-ink:#EFF1F8;
--scrim:10,11,26;
}
*,*::before,*::after{box-sizing:border-box}
html{
scroll-behavior:smooth;
-webkit-text-size-adjust:100%;
color-scheme:light dark; /* native scrollbars + form controls follow the theme */
-webkit-tap-highlight-color:var(--accent-soft);
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
margin:0;
background:var(--ground);
color:var(--ink);
font-family:var(--f-sans);
font-size:17px;
line-height:1.65;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--f-serif);font-weight:400;letter-spacing:-.015em;margin:0;text-wrap:balance}
p{text-wrap:pretty}
h1{font-size:clamp(2.5rem,6vw,4.25rem);line-height:1.04}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.12}
h3{font-size:1.2rem;line-height:1.25}
p{margin:0 0 1rem}
img,iframe{max-width:100%;display:block}
a{color:var(--accent-deep)}
section[id]{scroll-margin-top:88px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.25rem,5vw,2.5rem)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--accent-deep);color:var(--btn-fg);padding:.75rem 1.25rem;border-radius:0 0 var(--r-in) 0}
.skip:focus{left:0}
:where(a,button,input,summary):focus-visible{
outline:3px solid var(--accent);
outline-offset:3px;
border-radius:var(--r-in);
}
/* ---------- buttons ---------- */
.btn{
--bg:var(--accent-deep); --fg:var(--btn-fg);
display:inline-flex;align-items:center;justify-content:center;
min-height:46px;padding:.7rem 1.4rem;
background:var(--bg);color:var(--fg);
border:1px solid transparent;border-radius:var(--r-pill);
font:500 .97rem/1 var(--f-sans);letter-spacing:.01em;
text-decoration:none;white-space:nowrap;cursor:pointer;touch-action:manipulation;
transition:transform .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease);
}
.btn:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn--lg{min-height:54px;padding:.9rem 1.9rem;font-size:1.02rem}
.btn--sm{min-height:42px;padding:.55rem 1.1rem;font-size:.9rem}
.btn--ghost{--bg:transparent;--fg:var(--ink);border-color:var(--line)}
.btn--ghost:hover{--bg:var(--accent-soft);--fg:var(--ink);border-color:var(--accent)}
.eyebrow{
font-size:.74rem;text-transform:uppercase;letter-spacing:.16em;
color:var(--accent-deep);font-weight:500;margin:0 0 .9rem;
}
/* ---------- nav ----------
Two states. Over the photographic hero it is transparent with knockout
white content; once the content sheet has slid up under it, it becomes the
frosted light bar. The state flips from a sentinel, never from a scroll
listener. */
/* Fixed, not sticky: the bar has to sit ON the photograph, so it must not
take a strip of layout height above the hero. */
/* The solid bar is the base state, so a browser with JavaScript off gets a
readable header instead of dark labels on a dark photograph. The glass
treatment is layered on top only when the script is running. */
.nav{
position:fixed;top:0;left:0;right:0;z-index:40;
background:color-mix(in srgb,var(--ground) 88%,transparent);
backdrop-filter:blur(12px);
border-bottom:1px solid var(--line);
transition:background .3s var(--ease),border-color .25s var(--ease),backdrop-filter .3s var(--ease);
}
.nav__in{max-width:var(--wrap);margin-inline:auto;padding-inline:max(clamp(1.25rem,5vw,2.5rem),env(safe-area-inset-left)) max(clamp(1.25rem,5vw,2.5rem),env(safe-area-inset-right));height:72px;display:flex;align-items:center;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink);margin-right:auto}
.brand__txt{font:400 .74rem/1.15 var(--f-sans);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.brand__txt strong{display:block;font:400 1.1rem/1.1 var(--f-serif);letter-spacing:0;text-transform:none;color:var(--ink)}
.nav__links{display:flex;gap:1.6rem}
.nav__links a{color:var(--ink-2);text-decoration:none;font-size:.95rem;position:relative;padding:.35rem 0;touch-action:manipulation}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .28s var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{right:0}
/* Knockout state: no background, no blur, no hairline. Over the hero the
photograph must be unbroken, so only the white labels sit on it. */
.js .nav:not(.is-stuck){
background:none;
backdrop-filter:none;
border-bottom-color:transparent;
}
.js .nav:not(.is-stuck) .brand__txt,
.js .nav:not(.is-stuck) .brand__txt strong{color:#FFF}
.js .nav:not(.is-stuck) .nav__links a{color:rgba(255,255,255,.86)}
.js .nav:not(.is-stuck) .nav__links a:hover{color:#FFF}
.js .nav:not(.is-stuck) .burger{border-color:rgba(255,255,255,.5)}
.js .nav:not(.is-stuck) .burger span{background:#FFF}
.js .nav:not(.is-stuck) .btn--sm{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);color:#FFF;backdrop-filter:blur(6px)}
.js .nav:not(.is-stuck) .btn--sm:hover{background:rgba(255,255,255,.24)}
.nav.is-open{background:var(--ground);backdrop-filter:none;border-bottom-color:var(--line)}
.burger{display:none;touch-action:manipulation;width:44px;height:44px;background:none;border:1px solid var(--line);border-radius:var(--r-pill);cursor:pointer;padding:0;place-items:center;gap:5px}
.burger span{display:block;width:16px;height:1.5px;background:var(--ink);transition:transform .25s var(--ease),opacity .25s var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.mobnav{display:none;overscroll-behavior:contain;flex-direction:column;padding:.5rem clamp(1.25rem,5vw,2.5rem) 1.5rem;border-top:1px solid var(--line);gap:.25rem;background:var(--ground)}
.mobnav a{padding:.85rem 0;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.mobnav__call{color:var(--accent-deep)!important;font-weight:500;border-bottom:0!important}
/* ---------- hero: full-bleed photograph, pinned ----------
The hero sticks at the top of the viewport and the content sheet below it
scrolls up over it. Pure CSS: position:sticky plus an opaque sheet with a
higher stacking order. Nothing listens to scroll, nothing repaints per
frame, and with JavaScript off the page is simply a normal hero. */
.hero{
position:sticky;top:0;z-index:0;
min-height:100dvh; /* dvh, not vh: no jump on the iOS bar */
display:grid;align-items:start;
overflow:hidden;isolation:isolate;
}
.hero__bg{position:absolute;inset:0;z-index:-2;margin:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
/* Dark at the bottom so the copy reads, dark at the top so the nav reads,
and left alone in the middle so the photograph is still a photograph. */
.hero__scrim{
position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(to bottom,rgba(var(--scrim),.42) 0%,rgba(var(--scrim),.18) 34%,rgba(var(--scrim),.06) 62%,rgba(var(--scrim),.34) 100%);
}
.hero__in{
position:relative;z-index:1;
width:100%;max-width:var(--wrap);margin-inline:auto;
padding:clamp(6.5rem,15vh,9.5rem) clamp(1.25rem,5vw,2.5rem) 0;
color:#FFF;text-align:center;
}
.hero__logo{
width:clamp(104px,11vw,148px);height:auto;margin-inline:auto;
margin-bottom:clamp(1.1rem,2.5vh,1.9rem);
}
.hero__h1{color:#FFF;font-size:clamp(2.3rem,5.4vw,3.9rem);max-width:17ch;margin-inline:auto}
.hero__h1 em{font-style:italic;color:var(--sun);line-height:1.1;padding-bottom:.06em;display:inline-block}
.hero__sub{margin:1.2rem auto 2rem;font-size:clamp(1.02rem,1.4vw,1.15rem);color:rgba(255,255,255,.9);max-width:46ch}
.hero__cta{display:flex;gap:.85rem;flex-wrap:wrap;justify-content:center}
/* On a photograph the safest high-contrast fill is white with the brand
violet as the label: 12.4:1 either way round. */
/* Literal values, not tokens: this button sits on a photograph, which does
not change with the colour scheme. Following --accent-deep into dark mode
would put light violet on white at 1.9:1. */
.btn--photo{--bg:#FFF;--fg:#16175A;font-weight:500}
.btn--photo:hover{background:#E7ECF7}
/* Dark translucent, not light: a white veil goes invisible over the bright
ice, a dark one holds the label at contrast over any part of the photo. */
.btn--glass{--bg:rgba(var(--scrim),.55);--fg:#FFF;border-color:rgba(255,255,255,.5);backdrop-filter:blur(8px)}
.btn--glass:hover{background:rgba(var(--scrim),.72);border-color:#FFF}
@media (prefers-reduced-transparency:reduce){
.btn--glass{--bg:rgba(var(--scrim),.75);backdrop-filter:none}
}
/* The sheet is what actually creates the reveal: opaque, above the hero,
and it lifts its own top edge over the photograph. */
.sheet{
position:relative;z-index:1;
background:var(--ground);
border-radius:var(--r-card) var(--r-card) 0 0;
box-shadow:0 -24px 60px -24px rgba(var(--scrim),.55);
}
/* Hero copy settles in on load. Motivated: it marks the photograph as the
page's first statement instead of having text appear painted on. */
@media (prefers-reduced-motion:no-preference){
.js .hero__logo,.js .hero__h1,.js .hero__sub,.js .hero__cta{
animation:hero-in .8s var(--ease) both;
}
.js .hero__h1{animation-delay:.07s}
.js .hero__sub{animation-delay:.14s}
.js .hero__cta{animation-delay:.21s}
}
@keyframes hero-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* Progressive extra: where scroll-driven animations exist, the hero copy
fades as the sheet covers it. Everywhere else, nothing happens. */
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){
.js .hero__in{
animation:hero-out linear both;
animation-timeline:scroll(root block);
animation-range:0 82vh; /* the hero is pinned, so track the page, not the element */
}
@keyframes hero-out{to{opacity:0;transform:translateY(-40px)}}
}
}
/* ---------- trust strip ---------- */
.trust{border-bottom:1px solid var(--line);background:var(--ground-2);border-radius:var(--r-card) var(--r-card) 0 0}
.trust__in{
max-width:var(--wrap);margin-inline:auto;padding:1.9rem clamp(1.25rem,5vw,2.5rem);
display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
}
.trust__i{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.15rem .85rem}
/* Filled navy disc, white glyph. The pale disc with a navy glyph was there
first and could barely be seen against the near white strip. */
.trust__icon{
grid-row:span 2;
width:42px;height:42px;display:grid;place-items:center;
color:var(--btn-fg);background:var(--accent-deep);border-radius:var(--r-pill);
}
.trust__icon svg{display:block;fill:currentColor}
.trust__i b{font:400 1.85rem/1 var(--f-serif);color:var(--ink);font-variant-numeric:tabular-nums}
.trust__i > span:last-child{font-size:.87rem;color:var(--ink-3);line-height:1.4}
/* ---------- cozinha: dark band with a dissolving photograph ----------
One deliberate colour block in the middle of a light page, echoing the hero
above and the footer below rather than flipping the theme at random. The
photograph is masked into the ground on its right edge, so there is no cut
line between picture and section. */
.soup{
position:relative;overflow:hidden;
/* The band uses the hero's own darkness, not the footer navy: a mask fades
the photograph to transparent, and against a lighter navy the middle of
the picture came out tinted blue instead of simply darkening. */
background:rgb(var(--scrim));color:var(--dark-panel-ink);
min-height:clamp(430px,50vw,620px);
padding:clamp(3.5rem,7vw,5.5rem) 0;
display:grid;align-items:center;
}
.soup__media{position:absolute;inset:0 auto 0 0;width:min(56%,880px);margin:0;pointer-events:none}
.soup__media img{
width:100%;height:100%;object-fit:cover;object-position:54% 50%;
-webkit-mask-image:linear-gradient(to right,#000 0%,#000 40%,rgba(0,0,0,.5) 72%,transparent 100%);
mask-image:linear-gradient(to right,#000 0%,#000 40%,rgba(0,0,0,.5) 72%,transparent 100%);
}
.soup__in{
position:relative;z-index:1;width:100%;
max-width:var(--wrap);margin-inline:auto;
padding-inline:clamp(1.25rem,5vw,2.5rem);
display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);
}
.soup__copy{grid-column:2}
.soup__copy h2{color:var(--dark-panel-ink);max-width:24ch}
/* The italic half takes its own line, so the break is a decision and not
wherever the sentence happened to run out of room. */
.soup__copy h2 em{display:block}
.soup__copy h2 em{font-style:italic;color:var(--sun);line-height:1.15;padding-bottom:.08em}
.soup__copy h2::after{
content:"";display:block;width:64px;height:1px;
background:rgba(255,255,255,.3);margin:1.7rem 0;
}
.soup__copy p{color:#BFC6E4;max-width:46ch}
.soup__copy p:last-child{margin-bottom:0}
/* The eyebrow gets the small leading rule from the reference. */
.eyebrow--rule{display:flex;align-items:center;gap:.9rem;color:var(--sun)}
.eyebrow--rule::before{content:"";width:34px;height:1px;background:currentColor;flex:none}
@media (max-width:900px){
.soup{display:block;min-height:0;padding-top:0}
.soup__media{position:relative;width:100%;height:clamp(230px,54vw,340px)}
.soup__media img{
-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 100%);
mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 100%);
}
.soup__in{grid-template-columns:1fr;padding-top:0}
.soup__copy{grid-column:1}
}
/* ---------- a mesa: the menu, in tabs ---------- */
.mesa{padding:clamp(4rem,9vw,7rem) 0;background:var(--band)}
/* Every dish now sits next to a photograph of its own category instead of in
a tile that had no picture to give it. */
.menu{margin-top:.5rem}
.menu__tabs{
display:flex;gap:.5rem;flex-wrap:wrap;
border-bottom:1px solid var(--line);padding-bottom:1rem;margin-bottom:2.2rem;
}
.menu__tab{
appearance:none;cursor:pointer;touch-action:manipulation;
min-height:44px;padding:.6rem 1.3rem;
background:transparent;color:var(--ink-2);
border:1px solid var(--line);border-radius:var(--r-pill);
font:500 .95rem/1 var(--f-sans);
transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.menu__tab:hover{color:var(--ink);border-color:var(--accent)}
.menu__tab[aria-selected="true"]{background:var(--accent-deep);color:var(--btn-fg);border-color:transparent}
/* Top aligned, not centred. Categories are not all the same length, and with
the panel centred a six dish list left the photograph floating in the middle
with dead space above and below it. Stretching the frame instead was worse:
the aspect ratio then drives the width too, so a tall row widened the picture
column and squeezed the list. Aligning to the top keeps the frame at 4/3 and
puts the slack in one place, under the picture, where it reads as layout. */
.menu__panel{
display:grid;grid-template-columns:1.05fr .95fr;
gap:clamp(2rem,5vw,3.5rem);align-items:start;
}
/* display:grid beats the user agent's [hidden]{display:none}, so the hidden
panels have to be told again. */
.menu__panel[hidden]{display:none}
/* The photograph cycles through the dishes listed beside it. All the frames
are stacked in the same box and only the opacity changes, so nothing
reflows and the browser only ever composites. */
.menu__media{
position:relative;margin:0;min-width:0;aspect-ratio:4/3;
border-radius:var(--r-card);overflow:hidden;background:var(--tint);
}
.menu__shot{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;z-index:0;transition:opacity .5s var(--ease-out);
}
/* The incoming frame fades in ON TOP of the outgoing one, which is held at
full opacity underneath until the fade is over. Cross fading both at once
put them at 50% together in the middle and the tint showed through, which
read as a washed out flicker. */
.menu__shot.is-on{opacity:1;z-index:2}
.menu__shot.is-prev{opacity:1;z-index:1;transition:none}
.menu__copy{align-self:start}
.menu__intro{color:var(--ink-2);margin:0 0 1.6rem;max-width:46ch}
/* The list doubles as the gallery's index: a rule travels down to whichever
dish is on screen, so the two sides of the section stay tied together. */
.menu__listwrap{position:relative;padding-left:1.35rem}
.menu__marker{
position:absolute;left:0;top:0;width:3px;height:0;
background:var(--accent);border-radius:var(--r-pill);
transition:transform .5s var(--ease-out),height .5s var(--ease-out),opacity .3s var(--ease-out);
opacity:0;
}
.menu__marker.is-live{opacity:1}
.menu__list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.menu__list li{padding:1.1rem 0;border-bottom:1px solid var(--line)}
.menu__list li:last-child{border-bottom:0;padding-bottom:0}
.menu__list h3{font-size:1.1rem;margin-bottom:.2rem;transition:color .4s var(--ease-out)}
.menu__list li.is-current h3{color:var(--accent-deep)}
.menu__list p{margin:0;color:var(--ink-3);font-size:.94rem;max-width:44ch}
@media (prefers-reduced-motion:reduce){
.menu__marker{transition:none}
/* The dishes still cycle, so the frame has to cut rather than cross-fade. */
.menu__shot{transition:none}
}
/* Changing category: the old panel leaves downwards, the new one arrives
from below. Motivated: it says the content was replaced, not redrawn. */
@media (prefers-reduced-motion:no-preference){
.js .menu__panel.is-out{animation:painel-sai .26s var(--ease-out) both}
.js .menu__panel.is-in{animation:painel-entra .42s var(--ease-out) both}
}
@keyframes painel-sai{from{opacity:1;transform:none}to{opacity:0;transform:translateY(20px)}}
@keyframes painel-entra{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
/* Alinhada com a fotografia: a coluna da imagem e 1.05fr de 1.05fr .95fr, ou
seja 1.05/2 do que sobra depois do intervalo. Assim a nota fecha a coluna da
esquerda em vez de atravessar o painel todo. */
.mesa__note{
margin-top:1.8rem;color:var(--ink-3);font-size:.95rem;
max-width:calc((100% - clamp(2rem,5vw,3.5rem)) * 1.05 / 2);
}
.azulejo-panel{
position:relative;
background-color:#FFFFFF;
background-clip:padding-box;
border:24px solid transparent;
border-image:url("data:image/svg+xml,") 24 round;
box-shadow:0 18px 45px rgba(0,0,0,.16),0 3px 10px rgba(0,0,0,.08);
}
.azulejo-panel__in{
background:#FFFFFF;
padding:clamp(2rem,4.5vw,3.5rem);
}
@media (max-width:600px){
.azulejo-panel{border-width:16px}
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .azulejo-panel{
background-color:#161930;
border-image-source:url("data:image/svg+xml,");
}
:root:not([data-theme="light"]) .azulejo-panel__in{
background:#161930;
}
}
:root[data-theme="dark"] .azulejo-panel{
background-color:#161930;
border-image-source:url("data:image/svg+xml,");
}
:root[data-theme="dark"] .azulejo-panel__in{
background:#161930;
}
/* ---------- o espaco ---------- */
.espaco{padding:clamp(4rem,9vw,7rem) 0;background:var(--ground)}
.espaco__in{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
/* The room comes first, then what you need to know about it. */
.espaco__media{margin:0 0 clamp(2.2rem,5vw,3.4rem)}
.espaco__media img{
width:100%;height:auto;aspect-ratio:32/15;object-fit:cover;
border-radius:var(--r-card);
}
@media (max-width:700px){
.espaco__media img{aspect-ratio:3/2}
}
.espaco__copy h2{margin-bottom:1.3rem;max-width:18ch}
/* The wall yellow, on the one line that works like a note pinned up in the
room. */
.espaco__flag{
margin-top:1.6rem;padding:1rem 1.25rem;
background:color-mix(in srgb,var(--sun) 16%,transparent);
border-left:3px solid var(--sun);border-radius:0 var(--r-in) var(--r-in) 0;
color:var(--ink)!important;font-weight:500;
}
.espaco__copy p{color:var(--ink-2);max-width:46ch}
/* Four practical facts as cards, not as a specification table. Icons are
Phosphor regular (@phosphor-icons/core), inlined so they take the text
colour and cost no extra request. */
/* No card chrome any more. These four are details, and a box around each one
gave them the same presence as the sentence that actually matters. Icon,
label, one line, and white space doing the separating. */
.facts{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:2rem 2.5rem}
.fact{display:grid;grid-template-columns:auto 1fr;gap:.1rem .9rem;align-content:start}
.fact__icon{
grid-row:span 2;
width:34px;height:34px;flex:none;display:grid;place-items:center;
background:var(--accent-deep);color:var(--btn-fg);border-radius:var(--r-pill);
}
.fact__icon svg{display:block;width:19px;height:19px;fill:currentColor}
.fact h3{font-family:var(--f-sans);font-size:.95rem;font-weight:500;letter-spacing:0;margin-bottom:.15rem}
.fact p{margin:0;color:var(--ink-3);font-size:.92rem;line-height:1.5}
/* ---------- visitar ---------- */
.visitar{padding:clamp(4rem,9vw,7rem) 0;background:var(--ground-2)}
.visitar__in{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.visitar__addr{color:var(--ink-2);margin:.6rem 0 2rem}
.hours{width:100%;border-collapse:collapse;margin-bottom:2rem;font-size:.97rem}
.hours th,.hours td{text-align:left;padding:.62rem 0;font-weight:400}
.hours th{color:var(--ink-2)}
.hours td{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.hours tr + tr th,.hours tr + tr td{border-top:1px solid var(--line)}
.hours--off th,.hours--off td{color:var(--accent-deep);font-weight:500}
.visitar__cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1.25rem}
.visitar__mail{font-size:.93rem;color:var(--ink-3);margin:0}
.visitar__frame{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);min-height:420px;background:var(--tint)}
.visitar__frame iframe{display:block;width:100%;height:100%;min-height:420px;border:0;filter:saturate(.85)}
/* ---------- footer ---------- */
.foot{position:relative;z-index:1;background:var(--dark-panel);color:var(--dark-panel-ink);padding:clamp(3rem,6vw,4.5rem) 0 max(2rem,env(safe-area-inset-bottom));margin-top:0}
.foot__in{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:2.5rem}
.foot__brand{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start}
.foot__mark{width:230px;max-width:100%;height:auto}
.foot__brand p{margin:0}
.foot__brand span{font:400 .9rem/1.6 var(--f-sans);color:#BFC6E4}
.foot__nav{display:flex;flex-direction:column;gap:.6rem}
.foot__nav a,.foot__contact a{color:#D8DEF2;text-decoration:none;font-size:.95rem}
.foot__nav a:hover,.foot__contact a:hover{color:#fff;text-decoration:underline}
.foot__contact{display:flex;flex-direction:column;gap:.6rem}
.foot__legal{margin:.5rem 0 0;color:#9AA2C6;font-size:.88rem}
.foot__copy{max-width:var(--wrap);margin:2.5rem auto 0;padding:1.5rem clamp(1.25rem,5vw,2.5rem) 0;border-top:1px solid #2E3266;color:#9AA2C6;font-size:.85rem}
/* ---------- motion: reveal on scroll ---------- */
@media (prefers-reduced-motion:no-preference){
/* .js is set by an inline script in . Without JS the rule never
applies, so the page renders fully instead of blank. */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
}
/* ---------- responsive ---------- */
@media (max-width:1000px){
.nav__links{display:none}
.burger{display:grid}
.nav__in .btn--sm{margin-left:auto}
.mobnav{display:none}
.mobnav.is-open{display:flex}
.espaco__in,.visitar__in{grid-template-columns:1fr}
.trust__in{grid-template-columns:repeat(2,1fr);gap:1.25rem}
.menu__panel{grid-template-columns:1fr;gap:2rem}
.mesa__note{max-width:none}
.foot__in{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
body{font-size:16px}
/* On a phone the platter sits mid frame, so the copy is pulled up to land
above it instead of on top of the prawns. */
.hero__in{padding-top:clamp(4.5rem,10vh,6.5rem)}
.hero__logo{width:clamp(78px,22vw,96px)}
.hero__sub{margin-bottom:1.5rem}
.hero__cta{flex-direction:column;align-items:stretch}
.hero__cta .btn{width:100%}
.menu__tabs{gap:.4rem}
.menu__tab{flex:1 1 auto;padding:.6rem .9rem;font-size:.9rem}
.menu__list h3{font-size:1.02rem}
.facts{grid-template-columns:1fr}
.foot__in{grid-template-columns:1fr}
.visitar__frame,.visitar__frame iframe{min-height:300px}
}
/* Reduced motion: nothing moves, everything still reads. */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms!important;
animation-iteration-count:1!important;
transition-duration:.01ms!important;
scroll-behavior:auto!important;
}
}
.visitar__maplink{margin:.75rem 0 0;font-size:.9rem}
.azulejo-bar{
width:100%;
height:44px;
background-color:#FFF;
background-image:url("data:image/svg+xml,");
background-size:44px 44px;
background-repeat:repeat-x;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .azulejo-bar{
background-color:#161B36;
background-image:url("data:image/svg+xml,");
}
}
:root[data-theme="dark"] .azulejo-bar{
background-color:#161B36;
background-image:url("data:image/svg+xml,");
}