/* FOOD & DRINK — page-specific only. Header, nav, footer, buttons, .psd-title and the base rules come from site.css + exact-home.css. . Menu content transcribed from the client's printed PDF (1-2-combined.pdf). */ .menu-hero { position:relative; height:min(32vw,610px); min-height:390px; overflow:hidden; background:#222; } .menu-hero img { width:100%; height:100%; object-fit:cover; object-position:center 55%; } .menu-hero__veil { position:absolute; inset:0; background: radial-gradient(ellipse 60% 50% at 50% 56%,rgba(10,16,25,.70) 0%,rgba(10,16,25,.40) 60%,rgba(10,16,25,.08) 100%), linear-gradient(180deg,rgba(9,13,19,.72) 0%,rgba(9,13,19,0) 32%); } .menu-hero__content { position:absolute; z-index:1; top:56%; left:50%; width:min(1170px,calc(100% - 48px)); transform:translate(-50%,-50%); text-align:center; color:#fff; } .menu-hero h1 { margin:0; font-family:var(--psd-serif); font-size:clamp(38px,3.6vw,69px); font-style:italic; line-height:1.02; } .menu-hero p { margin:14px 0 0; font-size:13px; letter-spacing:.14em; text-transform:uppercase; } .menu-shell { width:var(--psd-shell); margin-inline:auto; } .menu-intro { padding:84px 0 70px; } .menu-intro__grid { display:grid; grid-template-columns:1fr 1.04fr; gap:58px; align-items:center; } .menu-intro__grid img { width:100%; aspect-ratio:1.24; object-fit:cover; } .menu-lede { margin:0 0 18px; color:var(--psd-ink); font-family:var(--psd-serif); font-size:23px; font-style:italic; line-height:1.45; } .menu-intro p { max-width:56ch; margin:0 0 18px; color:var(--psd-muted); font-size:16px; line-height:1.62; } .menu-intro__cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; } /* ---- the menu itself ---- */ .menu-body { padding:0 0 30px; } .menu-group { margin-bottom:62px; } .menu-group__title { margin:0 0 30px; color:var(--psd-ink); font-family:var(--psd-serif); font-size:clamp(28px,2.3vw,42px); font-style:italic; font-weight:400; } .menu-group__note { margin:-20px 0 28px; color:var(--psd-muted); font-size:14px; font-style:italic; } .menu-list { display:grid; grid-template-columns:1fr 1fr; gap:30px 64px; } .menu-item__head { display:flex; align-items:baseline; gap:12px; } .menu-item__name { color:var(--psd-ink); font-size:17px; font-weight:400; } .menu-item__dot { flex:1; border-bottom:1px dotted rgba(36,36,36,.28); transform:translateY(-4px); } .menu-item__price { color:var(--psd-ink); font-size:16px; white-space:nowrap; } .menu-item__desc { margin:6px 0 0; color:var(--psd-muted); font-size:14.5px; line-height:1.55; } .menu-item__diet { display:inline-flex; gap:5px; margin-left:7px; color:var(--psd-gold-text); font-size:11px; letter-spacing:.06em; text-transform:uppercase; } /* ---- compact price-only list (sides) ---- */ .menu-sides__list { display:grid; grid-template-columns:1fr 1fr; gap:11px 64px; } .menu-sides__list div { display:flex; align-items:baseline; gap:12px; } .menu-sides__list span:first-child { color:var(--psd-ink); font-size:16px; } .menu-sides__list i { flex:1; border-bottom:1px dotted rgba(36,36,36,.28); transform:translateY(-4px); } .menu-sides__list span:last-child { color:var(--psd-ink); font-size:15px; } /* ---- callouts ---- */ .menu-feature { margin:0 0 62px; padding:28px 32px; border:2px solid var(--psd-ink); } .menu-feature h3 { margin:0 0 4px; color:var(--psd-ink); font-family:var(--psd-serif); font-size:28px; font-style:italic; font-weight:400; } .menu-feature p { margin:0 0 16px; color:var(--psd-muted); font-size:14px; font-style:italic; } .menu-feature div { display:flex; align-items:baseline; gap:12px; margin-top:8px; } .menu-feature span:first-child { color:var(--psd-ink); font-size:17px; } .menu-feature i { flex:1; border-bottom:1px dotted rgba(36,36,36,.28); transform:translateY(-4px); } .menu-evening { padding:70px 0 64px; background:#faf9f6; --psd-muted:#6b6b6b; } .menu-evening .menu-group { margin-bottom:0; } .menu-happy { padding:74px 0 78px; } .menu-happy__inner { max-width:1000px; margin-inline:auto; padding:34px 38px 38px; border:2px solid var(--psd-gold); text-align:center; } .menu-happy h2 { margin:0 0 6px; color:var(--psd-ink); font-family:var(--psd-serif); font-size:clamp(30px,2.5vw,46px); font-style:italic; font-weight:400; } .menu-happy__when { margin:0 0 26px; color:var(--psd-ink); font-size:15px; } .menu-happy__grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 56px; text-align:left; } .menu-happy__grid div { display:flex; align-items:baseline; gap:12px; } .menu-happy__grid span:first-child { color:var(--psd-ink); font-size:15.5px; } .menu-happy__grid i { flex:1; border-bottom:1px dotted rgba(36,36,36,.28); transform:translateY(-4px); } .menu-key { padding:0 0 76px; } .menu-key__inner { display:flex; flex-wrap:wrap; justify-content:center; gap:14px 34px; padding:22px 26px; background:#faf9f6; --psd-muted:#6b6b6b; } .menu-key__inner span { color:var(--psd-muted); font-size:14px; } .menu-key__inner b { color:var(--psd-gold-text); font-weight:400; letter-spacing:.06em; text-transform:uppercase; font-size:11.5px; margin-right:5px; } .menu-takeout { padding:0 0 96px; } .menu-takeout__grid { display:grid; grid-template-columns:1fr 1fr; gap:26px; } .menu-takeout__grid > div { padding:34px 34px 36px; border:1px solid rgba(36,36,36,.16); } .menu-takeout__grid h3 { margin:0 0 10px; color:var(--psd-ink); font-family:var(--psd-serif); font-size:26px; font-style:italic; font-weight:400; } .menu-takeout__grid p { margin:0 0 20px; color:var(--psd-muted); font-size:15px; line-height:1.6; } @media (max-width:1100px) { .menu-hero h1 { font-size:clamp(34px,5vw,52px); } } @media (max-width:860px) { .menu-intro__grid { grid-template-columns:1fr; gap:32px; } .menu-list, .menu-sides__list, .menu-happy__grid, .menu-takeout__grid { grid-template-columns:1fr; } .menu-list { gap:26px; } .menu-intro { padding:56px 0 48px; } .menu-group { margin-bottom:46px; } .menu-evening { padding:52px 0 48px; } .menu-happy { padding:52px 0 56px; } .menu-happy__inner { padding:26px 22px 30px; } .menu-takeout { padding:0 0 64px; } }