/* ==========================================================================
Zaiqa's Cafe — 901 East Coast Road, Siglap — demo
Design system: "Zaiqa's Cafe — Design System"
(export-v1/_ds/zaiqa-s-cafe-design-system-6eff23a1-7918-4284-a997-d3bba4344d38/)
The four token files below are encoded VERBATIM from
_ds/tokens/{colors,typography,spacing,base}.css. Additions are clearly
fenced and labelled; nothing above them was altered.
========================================================================== */
/* ---- tokens/colors.css (verbatim) ---------------------------------------
green-900 + gold-500 sampled from the actual logo (assets/brand/logo-square.jpg). */
:root{
/* Brand greens */
--green-950:#00231C;
--green-900:#01362E; /* brand green — exact logo background */
--green-800:#0B463A;
--green-700:#175843;
--green-600:#2A6B51;
--sage-300:#AABCA8; /* dining chairs */
--sage-100:#E3E9DF;
/* Golds & yellows */
--gold-600:#B0851F;
--gold-500:#D0A032; /* logo gold — exact */
--gold-300:#E7C878;
--yellow-400:#F2C230; /* signage pill yellow */
--yellow-500:#DFAF14;
/* Inks & creams */
--ink-900:#24211C; /* signage charcoal */
--ink-700:#4A443B;
--ink-500:#736B5E;
--cream-50:#FAF6EB;
--cream-100:#F2EBD9;
--cream-200:#E4DBC2;
--white:#FFFFFF;
/* Supporting (mural, floor, tables) */
--spice-600:#B4472A; /* terracotta floor / curry */
--maroon-700:#8C2332; /* mural red */
--sky-300:#A8CFE3; /* mural blue */
--wood-400:#C89B62; /* tabletops */
/* Semantic aliases */
--surface-page:var(--cream-50);
--surface-card:var(--white);
--surface-tint:var(--cream-100);
--surface-inverse:var(--green-900);
--surface-inverse-raised:var(--green-800);
--text-body:var(--ink-900);
--text-muted:var(--ink-500);
--text-on-dark:var(--cream-50);
--text-on-dark-muted:color-mix(in oklab,var(--cream-50) 72%,var(--green-900));
--brand:var(--green-900);
--accent:var(--gold-500);
--accent-strong:var(--yellow-400);
--link:var(--green-700);
--link-hover:var(--green-600);
--border-line:var(--cream-200);
--border-brass:color-mix(in oklab,var(--gold-500) 55%,transparent);
--focus-ring:var(--gold-500);
--success:var(--green-600);
--danger:var(--maroon-700);
}
/* ---- ADDITION: AA-safe variant ------------------------------------------
One design-system token does not clear WCAG AA (4.5:1) for normal-size
text on this site's white cards and cream pages. It is kept above,
verbatim and unchanged; the variant below is used ONLY where the token
would carry text (menu-row prices, dish-card prices).
--gold-600 #B0851F on --white = 3.38:1 FAIL
--gold-600 #B0851F on --cream-50 #FAF6EB = 3.13:1 FAIL
--gold-aa #8A6420 on --white = 5.35:1 PASS
--gold-aa #8A6420 on --cream-50 = 4.96:1 PASS
--gold-aa #8A6420 on --cream-100 #F2EBD9 = 4.50:1 PASS
--gold-500 #D0A032 stays in use for rules, hairlines, the active-nav
underline and the PipeList "|" separators. On cream it measures 2.22:1,
i.e. below even the 3:1 non-text threshold — it is kept because each of
those marks is either pure decoration or purely redundant, which WCAG
1.4.11 exempts: the PipeList bars are aria-hidden and carry no
information the spacing does not, and the active nav item is already
marked by aria-current plus a colour change to --green-900 (12.40:1),
so the underline only reinforces it. On dark the same token reads
5.58:1 on --green-900.
Everything else on the site clears AA comfortably:
ink-900 on cream-50 14.85:1 ink-700 on cream-50 8.92:1
ink-500 on cream-50 4.87:1 ink-500 on white 5.26:1
spice-600 on cream-50 5.02:1 green-900 on cream-50 12.40:1
green-700 on cream-50 7.74:1 cream-50 on green-900 12.40:1
cream-50 on green-950 15.47:1 gold-300 on green-950 10.29:1
ink-900 on yellow-400 9.57:1 on-dark-muted on green-900 ≈ 7.11:1
-------------------------------------------------------------------------- */
:root{
--gold-aa:#8A6420;
}
/* ---- tokens/typography.css (verbatim, minus the @import) -----------------
Brand logo face is custom calligraphy — never recreated in type; the mark
is always assets/img/logo-square.webp. Webfonts are Google-hosted
substitutes (no brand font files exist): Bricolage Grotesque ≈ the
hand-painted grotesque of the signage; Hanken Grotesk = humanist body;
Kalam = mural hand-lettering accent. The @import was replaced by one
per family in each page head. Kalam is NOT loaded — no screen in
this design uses .zq-accent — but its token is kept for parity. */
:root{
--font-display:'Bricolage Grotesque',Georgia,serif;
--font-body:'Hanken Grotesk',system-ui,sans-serif;
--font-accent:'Kalam',cursive;
/* Scale (desktop) */
--text-display:clamp(44px,6vw,72px);
--text-h1:44px;
--text-h2:32px;
--text-h3:24px;
--text-h4:19px;
--text-body-size:17px;
--text-small:14.5px;
--text-caption:12.5px;
--leading-tight:1.05;
--leading-snug:1.2;
--leading-body:1.6;
--track-display:-0.015em;
--track-overline:0.22em; /* letterspaced uppercase, as on the opening poster */
--weight-display:800;
--weight-heading:700;
--weight-medium:600;
--weight-body:400;
}
/* ---- tokens/spacing.css (verbatim) --------------------------------------- */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;
/* Radii: pill (signage highlight), soft rect (cards), arch (shopfront arches) */
--radius-pill:999px;
--radius-card:14px;
--radius-input:10px;
--radius-arch:999px 999px 0 0;
/* Borders */
--line:1px solid var(--border-line);
--line-brass:1px solid var(--border-brass); /* brass trim on green wainscot */
/* Shadows — kept quiet; photography carries the depth */
--shadow-card:0 1px 2px rgba(36,33,28,.06),0 6px 20px -8px rgba(36,33,28,.12);
--shadow-pop:0 12px 36px -10px rgba(0,35,28,.35);
/* Motion */
--ease-out:cubic-bezier(.22,.8,.32,1);
--dur-fast:140ms;
--dur-med:260ms;
}
/* ---- ADDITION: container width tokens ------------------------------------
The canvases carry NO box-sizing reset — neither tokens/base.css nor
support.js declares one — so every `max-width:1200px; padding:… 24px` shell
in Nav/Home/Menu/About/Contact/Footer.dc.html lays out as CONTENT-BOX:
1200px of content inside a 1248px box. This build adds the usual
`*{box-sizing:border-box}`, which on its own would silently narrow every
column by 48px at desktop. Measured on the rendered canvas at a 1280px
viewport, the nav logo's left edge sits at x=40, not x=64.
So the shells use 1248 / 888 below: with border-box that reproduces the
canvas's geometry exactly at every width (above the cap the content is
1200 / 840 as designed; below it `width:auto` gives viewport−48 under
either box model). */
:root{ --shell:1248px; --shell-narrow:888px; }
/* ---- ADDITION: semantic z-index scale ------------------------------------
The backdrop sits BELOW the sticky nav on purpose: .nav opens a stacking
context that the drawer panel lives inside, so a backdrop above the nav
would tint the open drawer as well as the page. */
:root{ --z-backdrop:30; --z-nav:40; --z-drawer:50; --z-skip:60; }
/* ==========================================================================
Base — tokens/base.css (verbatim) plus the UA reset the canvases assume
========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:var(--text-body-size);line-height:var(--leading-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--link);text-decoration-color:var(--border-brass);text-underline-offset:3px}
a:hover{color:var(--link-hover)}
::selection{background:var(--gold-300);color:var(--ink-900)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.zq-display{font-family:var(--font-display);font-weight:var(--weight-display);line-height:var(--leading-tight);letter-spacing:var(--track-display)}
.zq-overline{font-family:var(--font-body);font-size:var(--text-caption);font-weight:var(--weight-medium);letter-spacing:var(--track-overline);text-transform:uppercase}
.zq-accent{font-family:var(--font-accent)}
/* UA defaults the canvases silently assume away. figure{margin:1em 40px}
and blockquote{margin:1em 40px} would inset every photo and pull-quote. */
figure,blockquote{margin:0}
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
/* height:auto is load-bearing, not decoration. Every here carries real
width/height attributes (for layout stability), and those attributes are
presentational hints for the CSS height property — which makes the box
definite and silently defeats aspect-ratio on the dish cards. */
img{max-width:100%;height:auto}
button{font:inherit;color:inherit}
iframe{border:0}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}
.page{display:flex;flex-direction:column;min-height:100vh}
main{flex:1}
.skip-link{
position:absolute;left:8px;top:-72px;z-index:var(--z-skip);
background:var(--green-900);color:var(--cream-50);
padding:12px 20px;border-radius:var(--radius-pill);
font-weight:700;font-size:15px;text-decoration:none;
transition:top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{top:8px;color:var(--cream-50)}
.visually-hidden{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* To-confirm marker. Used where a fact could not be verified publicly and
the design canvas has no slot of its own for saying so. */
.tc{
font-family:var(--font-body);font-size:11.5px;font-weight:600;
letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500);
white-space:nowrap;
}
.tc--dark{color:var(--gold-300)}
/* ==========================================================================
Core components — Button, Badge, PipeList, SectionHeading
Re-implemented from _ds_bundle.js at the same measurements.
========================================================================== */
/* Button ------------------------------------------------------------------ */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
font-family:var(--font-body);font-weight:700;line-height:1.2;
border:1px solid transparent;border-radius:var(--radius-pill);
cursor:pointer;text-decoration:none;white-space:nowrap;
transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
/* Padding and font sizes are the design system's; min-height is the house
44/48px tap-target floor, which the pill absorbs without changing its look. */
.btn--sm{padding:7px 16px;font-size:13.5px;min-height:44px}
.btn--md{padding:11px 22px;font-size:15px;min-height:44px}
.btn--lg{padding:14px 30px;font-size:16.5px;min-height:52px}
.btn--gold{background:var(--yellow-400);color:var(--ink-900)}
.btn--gold:hover{background:var(--yellow-500);color:var(--ink-900)}
.btn--primary{background:var(--green-900);color:var(--cream-50)}
.btn--primary:hover{background:var(--green-950);color:var(--cream-50)}
.btn--outline{background:transparent;color:var(--green-900);border-color:var(--green-900)}
.btn--outline:hover{background:var(--cream-100);color:var(--green-900)}
/* Badge ------------------------------------------------------------------- */
.badge{
display:inline-flex;align-items:center;gap:6px;
border:1px solid transparent;border-radius:var(--radius-pill);
padding:5px 12px;
font-family:var(--font-body);font-weight:600;font-size:12px;
letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
}
.badge--gold{background:var(--yellow-400);color:var(--ink-900);border-color:transparent}
.badge--brass{background:transparent;color:var(--gold-300);border-color:var(--border-brass)}
.badge--cream{background:var(--cream-100);color:var(--ink-700);border-color:var(--cream-200)}
.badge--spice{background:var(--spice-600);color:var(--cream-50);border-color:transparent}
/* PipeList ---------------------------------------------------------------- */
.pipes{
font-family:var(--font-body);font-weight:500;font-size:14.5px;line-height:1.8;
color:var(--ink-700);
}
.pipes--dark{color:var(--cream-50)}
.pipes--15{font-size:15px}
.pipes--135{font-size:13.5px}
.pipes span{white-space:nowrap}
.pipes i{font-style:normal;color:var(--gold-500);padding:0 10px}
/* SectionHeading ---------------------------------------------------------- */
.sh__overline{
font-family:var(--font-body);font-size:var(--text-caption);font-weight:600;
letter-spacing:var(--track-overline);text-transform:uppercase;
color:var(--spice-600);margin-bottom:10px;
}
.sh--dark .sh__overline{color:var(--gold-300)}
.sh__row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.sh__title{
margin:0;font-family:var(--font-display);font-weight:800;
line-height:var(--leading-tight);letter-spacing:var(--track-display);
color:var(--green-900);font-size:32px;
}
.sh--dark .sh__title{color:var(--cream-50)}
.sh--40 .sh__title{font-size:clamp(30px,5.2vw,40px)}
.sh--48 .sh__title{font-size:clamp(34px,6vw,48px)}
/* DishCard ---------------------------------------------------------------- */
.dish{
background:var(--surface-card);border:1px solid var(--cream-200);
border-radius:var(--radius-card);overflow:hidden;
box-shadow:var(--shadow-card);
transition:box-shadow var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out);
}
.dish:hover{
transform:translateY(-2px);
box-shadow:0 3px 6px rgba(36,33,28,.07),0 14px 30px -10px rgba(36,33,28,.18);
}
.dish__img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.dish__body{padding:14px 16px 16px}
.dish__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.dish__name{font-family:var(--font-display);font-weight:700;font-size:18.5px;color:var(--green-900)}
.dish__price{font-family:var(--font-body);font-weight:700;font-size:15.5px;color:var(--gold-aa);white-space:nowrap}
.dish__desc{margin-top:5px;font-family:var(--font-body);font-size:14px;line-height:1.5;color:var(--text-muted)}
/* MenuRow ----------------------------------------------------------------- */
.row{padding:11px 0;border-bottom:1px dotted var(--cream-200);font-family:var(--font-body)}
.row__line{display:flex;align-items:baseline;gap:10px}
.row__name{font-weight:600;font-size:16px;color:var(--ink-900)}
.row__spicy{color:var(--spice-600);font-weight:700;margin-left:7px;font-size:13px}
.row__leader{flex:1;border-bottom:1px dotted var(--cream-200);transform:translateY(-4px)}
.row__price{font-weight:700;font-size:15px;color:var(--gold-aa)}
.row__desc{font-size:13.5px;color:var(--text-muted);margin-top:3px;max-width:52ch}
/* ==========================================================================
Nav — from Nav.dc.html, shared by all four pages
========================================================================== */
.topbar{
background:var(--green-950);border-bottom:var(--line-brass);
color:var(--text-on-dark-muted);
font-family:var(--font-body);font-size:12.5px;
letter-spacing:.14em;text-transform:uppercase;
display:flex;justify-content:center;align-items:center;gap:10px;
padding:8px 16px;text-align:center;flex-wrap:wrap;
}
.topbar__halal{color:var(--gold-300)}
.topbar__sep{opacity:.5}
.nav{
background:rgba(250,246,235,.92);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
border-bottom:1px solid var(--cream-200);
position:sticky;top:0;z-index:var(--z-nav);
}
.nav__inner{
max-width:var(--shell);margin:0 auto;padding:12px 24px;
display:flex;align-items:center;gap:28px;
}
.nav__logo{display:flex;text-decoration:none;flex:none}
/* Square, as Nav.dc.html draws it — no radius. (Footer.dc.html is the only
place the canvas rounds the mark, at 12px; that is honoured in .footer__logo.) */
.nav__logo img{height:76px;width:76px;display:block}
.nav__links{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav__links a{
font-family:var(--font-body);font-weight:600;font-size:15px;
text-decoration:none;color:var(--ink-700);
border-bottom:2px solid transparent;padding-bottom:3px;
transition:color var(--dur-fast) var(--ease-out);
}
.nav__links a:hover{color:var(--green-900)}
.nav__links a.is-active{color:var(--green-900);border-bottom-color:var(--gold-500)}
.nav__cta{flex:none}
.nav__toggle{
display:none;align-items:center;gap:8px;margin-left:auto;
min-height:44px;padding:9px 16px;
background:transparent;border:1px solid var(--green-900);
color:var(--green-900);border-radius:var(--radius-pill);
font-size:14px;font-weight:700;cursor:pointer;
}
.nav__toggle svg{width:18px;height:18px;flex:none}
.nav__close{
display:inline-flex;align-items:center;gap:8px;
min-height:44px;padding:9px 16px;background:transparent;
border:1px solid var(--cream-200);color:var(--ink-700);
border-radius:var(--radius-pill);font-size:14px;font-weight:600;cursor:pointer;
}
.nav__close svg{width:16px;height:16px}
.nav__drawer-head{display:none}
.nav__backdrop{
position:fixed;inset:0;z-index:var(--z-backdrop);
background:rgba(0,35,28,.5);
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity var(--dur-med) var(--ease-out),visibility var(--dur-med) var(--ease-out);
}
.nav__backdrop.is-open{opacity:1;visibility:visible;pointer-events:auto}
@media (max-width:899px){
.nav__inner{gap:12px;padding:10px 18px}
.nav__logo img{height:58px;width:58px}
.nav__toggle{display:inline-flex}
.nav__panel{
position:fixed;left:0;right:0;top:0;z-index:var(--z-drawer);
display:flex;flex-direction:column;align-items:stretch;gap:6px;
padding:18px 20px 26px;
background:var(--cream-50);
border-bottom:var(--line-brass);
box-shadow:var(--shadow-pop);
max-height:100vh;overflow-y:auto;
/* hidden IN PLACE — never translateX */
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity var(--dur-med) var(--ease-out),visibility var(--dur-med) var(--ease-out);
}
.nav__panel.is-open{opacity:1;visibility:visible;pointer-events:auto}
.nav__drawer-head{display:flex;justify-content:flex-end;margin-bottom:4px}
.nav__links{flex-direction:column;align-items:stretch;gap:0;margin-left:0}
.nav__links a{
font-size:17px;padding:14px 4px;min-height:48px;
display:flex;align-items:center;
border-bottom:1px solid var(--cream-200);
}
.nav__links a.is-active{border-bottom-color:var(--gold-500)}
.nav__cta{width:100%;margin-top:14px;font-size:16px;min-height:48px}
}
@media (max-width:420px){
.topbar{font-size:11px;gap:8px;letter-spacing:.1em}
}
@media (min-width:900px){
.nav__panel{display:flex;align-items:center;gap:28px;flex:1}
.nav__backdrop{display:none}
}
/* ==========================================================================
Home — mosaic, story, green band
========================================================================== */
.mosaic{
display:grid;grid-template-columns:repeat(4,1fr);
grid-template-rows:minmax(clamp(300px,28vw,420px),auto) clamp(300px,28vw,420px);
gap:2px;background:var(--cream-200);
}
.mosaic__tile{position:relative;overflow:hidden}
.mosaic__tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mosaic__badge{position:absolute;left:14px;bottom:14px}
.mosaic__panel{
grid-column:2 / 4;background:var(--green-900);
position:relative;display:flex;align-items:center;justify-content:center;
}
.mosaic__rule{position:absolute;inset:14px;border:var(--line-brass);pointer-events:none}
.mosaic__panel-in{
display:flex;flex-direction:column;align-items:center;gap:14px;
padding:32px 56px;text-align:center;
}
.mosaic__overline{color:var(--gold-300)}
.mosaic__brand{margin:0;line-height:0}
.mosaic__brand img{width:96px;height:96px;display:block}
.mosaic__pipes{display:flex;flex-direction:column;align-items:center;gap:4px}
.mosaic__meta{color:var(--text-on-dark-muted);font-size:14px}
.story{max-width:var(--shell);margin:0 auto;padding:96px 24px}
.story__inner{max-width:760px}
.story__body{margin:20px 0 0;max-width:56ch;color:var(--ink-700)}
.story__link{display:inline-block;margin-top:18px;font-weight:600;font-size:15.5px}
.band{background:var(--green-900);border-top:var(--line-brass);border-bottom:var(--line-brass)}
.band__inner{
max-width:var(--shell);margin:0 auto;padding:88px 24px;
display:flex;gap:56px;flex-wrap:wrap;align-items:center;
}
.band__text{flex:1.3 1 0;min-width:min(420px,100%)}
.band__body{margin:20px 0 0;max-width:54ch;color:var(--text-on-dark-muted)}
.band__aside{
flex:1 1 0;min-width:min(320px,100%);
display:flex;flex-direction:column;align-items:flex-start;gap:12px;
}
.band__cta{margin-top:16px}
@media (max-width:1099px){
.mosaic{grid-template-columns:repeat(2,1fr);grid-template-rows:none}
.mosaic__tile{aspect-ratio:1 / 1}
.mosaic__panel{grid-column:1 / -1;order:-1;min-height:clamp(340px,52vw,460px)}
.mosaic__panel-in{padding:36px 24px}
}
@media (max-width:899px){
.story{padding:64px 20px}
.band__inner{padding:60px 20px;gap:32px}
}
@media (max-width:420px){
.mosaic__panel-in{padding:30px 18px;gap:12px}
.mosaic__brand img{width:84px;height:84px}
/* The 15px pipe row measures ~340px; below ~380px viewport that would
force the poster's 4+4 grouping onto three lines. One step down keeps
the designed grouping intact on a small phone. (Each item is also
followed by a , so it can still break rather than overflow.) */
.mosaic__pipes .pipes{font-size:13px}
}
/* ==========================================================================
Shared page shell (Menu / About / Contact)
========================================================================== */
.page-main{max-width:var(--shell);margin:0 auto;padding:64px 24px 96px}
@media (max-width:899px){.page-main{padding:44px 20px 64px}}
/* ==========================================================================
Menu
========================================================================== */
.menu-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.menu-head__meta{display:flex;align-items:center;gap:14px;padding-bottom:6px;flex-wrap:wrap}
.menu-head__call{font-size:14.5px;color:var(--text-muted)}
.menu-head__call a{font-weight:700}
.dish-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.menu-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px 64px;margin-top:72px}
.menu-col__head{
color:var(--spice-600);border-bottom:var(--line);padding-bottom:10px;
}
.menu-note{margin:56px 0 0;text-align:center;color:var(--text-muted);font-size:15px}
@media (max-width:1023px){
.dish-grid{grid-template-columns:repeat(2,1fr);gap:20px}
.menu-cols{gap:20px 40px;margin-top:56px}
}
@media (max-width:719px){
.dish-grid{grid-template-columns:1fr}
.menu-cols{grid-template-columns:1fr;gap:36px;margin-top:48px}
.menu-note{margin-top:44px}
}
/* ==========================================================================
About
========================================================================== */
.about-hero{display:flex;gap:64px;flex-wrap:wrap;align-items:center}
.about-hero__text{flex:1.1 1 0;min-width:min(420px,100%)}
.about-hero__body{margin:22px 0 0;max-width:54ch;color:var(--ink-700)}
.about-hero__body + .about-hero__body{margin-top:16px}
.about-hero__pipes{margin-top:26px;display:flex;flex-direction:column;gap:2px}
.about-hero__media{flex:1 1 0;min-width:min(380px,100%)}
.about-hero__media img{
display:block;width:100%;height:520px;object-fit:cover;
/* NARROW-WIDTH FALLBACK ONLY — the canvas's own 50% 30% is restored at
>=1024px below. Rationale: --radius-arch (999px 999px 0 0) resolves to a
half-width dome across both top corners, so the narrower the frame the
more of its top the mask eats. Verified in the browser: at 900px (where
the hero wraps to one column) and at 414px, a 50% 30% crop puts the
signboard right under the dome and clips the last letter of the shop's
own name — "ZAIQA'S CAF". Bottom-anchored, the arch cuts wall and awning
instead and the frame shows the shopfront and the terrace tables the
copy is about. The arch, the height and the image file are unchanged. */
object-position:50% 100%;
border-radius:var(--radius-arch);
}
/* Canvas value, restored at the widths the canvas was drawn for. Verified
legible end-to-end at 1024 / 1100 / 1280 / 1900px. */
@media (min-width:1024px){
.about-hero__media img{object-position:50% 30%}
}
.quote{background:var(--green-900);border-top:var(--line-brass);border-bottom:var(--line-brass)}
.quote__inner{max-width:var(--shell-narrow);margin:0 auto;padding:80px 24px;text-align:center}
.quote__text{
margin:0;font-size:32px;font-weight:700;color:var(--cream-50);text-wrap:pretty;
}
.quote__by{color:var(--gold-300);margin-top:22px}
.quote__tc{margin-top:10px}
.mural{max-width:var(--shell);margin:0 auto;padding:88px 24px 96px}
.mural img{
display:block;width:100%;height:400px;object-fit:cover;
/* Crop origin raised: at this fixed height a centred crop of the 3:4
original frames the takeaway boxes and loses the mural entirely. */
object-position:50% 12%;
border-radius:var(--radius-card);
}
.mural figcaption{margin:14px 0 0;font-size:13.5px;color:var(--text-muted)}
@media (max-width:899px){
.about-hero{gap:36px}
.about-hero__media img{height:clamp(300px,58vw,440px)}
.quote__inner{padding:56px 20px}
.quote__text{font-size:clamp(23px,5.4vw,32px)}
.mural{padding:56px 20px 64px}
.mural img{height:clamp(220px,44vw,340px)}
}
/* ==========================================================================
Contact
========================================================================== */
.contact-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:36px;margin-top:40px;align-items:start}
.map-card{border-radius:var(--radius-card);overflow:hidden;border:var(--line)}
.map-card iframe{display:block;width:100%;height:460px}
.badge-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.info-col{display:flex;flex-direction:column;gap:16px}
.info-card{
background:var(--surface-card);border:var(--line);
border-radius:var(--radius-card);padding:18px 20px;
}
.info-card__overline{color:var(--spice-600)}
.info-card__value{font-weight:600;margin-top:8px}
.info-card__note{color:var(--text-muted);font-size:14.5px}
.info-card__link{margin-top:8px;font-size:15px}
.info-card__link a{font-weight:600}
.info-card--green{
background:var(--green-900);border:0;border-radius:var(--radius-card);
padding:20px 22px;color:var(--cream-50);
}
.info-card--green .info-card__overline{color:var(--gold-300)}
.tel-big{
display:block;font-family:var(--font-display);font-weight:800;font-size:34px;
color:var(--cream-50);text-decoration:none;margin-top:6px;line-height:1.1;
}
.tel-big:hover{color:var(--gold-300)}
.info-card--green .info-card__note{font-size:13.5px;color:var(--text-on-dark-muted);margin-top:4px}
@media (max-width:899px){
.contact-grid{grid-template-columns:1fr;gap:24px;margin-top:28px}
.map-card iframe{height:clamp(280px,60vw,460px)}
}
/* ==========================================================================
Footer — from Footer.dc.html, shared by all four pages
========================================================================== */
.footer{background:var(--green-950);color:var(--text-on-dark-muted);border-top:var(--line-brass)}
.footer a{color:var(--gold-300)}
.footer a:hover{color:var(--gold-300)}
.footer__inner{
max-width:var(--shell);margin:0 auto;padding:44px 24px 30px;
display:flex;gap:36px;flex-wrap:wrap;align-items:flex-start;
}
.footer__logo{height:84px;width:84px;border-radius:12px;display:block;flex:none}
.footer__block{font-family:var(--font-body);font-size:14.5px;line-height:1.7}
.footer__block b{color:var(--cream-50);font-weight:600;display:block}
.footer__cuisines{margin-left:auto;max-width:420px;display:flex;flex-direction:column;gap:2px}
.footer__strap{
font-family:var(--font-body);font-size:12.5px;margin-top:14px;
letter-spacing:.14em;text-transform:uppercase;color:var(--gold-300);
}
/* ADDITION: house rule — every page of every demo links to every other page
from the footer, and carries a copyright line. Footer.dc.html has neither.
Styled in the footer's own vocabulary; nothing above it changed. */
.footer__bar{border-top:var(--line-brass)}
.footer__bar-in{
max-width:var(--shell);margin:0 auto;padding:16px 24px 24px;
display:flex;gap:10px 28px;flex-wrap:wrap;align-items:center;justify-content:space-between;
font-family:var(--font-body);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
}
.footer__sitemap{display:flex;gap:8px 20px;flex-wrap:wrap}
.footer__sitemap a{text-decoration:none}
.footer__sitemap a:hover{text-decoration:underline}
@media (max-width:899px){
.footer__inner{padding:36px 20px 26px;gap:26px}
.footer__cuisines{margin-left:0;max-width:100%}
.footer__bar-in{padding:14px 20px 22px}
}