/* ========================================================================== Menu page — gold/black "printed menu" identity. Loaded only on menu.php (see $extraHead in that file). ========================================================================== */ :root{ --gold: #c9a227; --gold-bright: #e6c96a; --ivory: #efe7d4; --muted: #a89f8d; --line: rgba(201,162,39,.28); --line-soft: rgba(255,255,255,.08); } /* This stylesheet only loads on menu.php, so scoping the base font to here is safe — it won't affect index.php/about.php. Headings below override it with Playfair Display / Cormorant Garamond as needed. */ body{ font-family: 'Inter', sans-serif; } /* ---------- Decorative hero (brand mark + title + tagline) ---------- */ .menu-hero{ position: relative; text-align: center; padding: 10px 20px 30px; overflow: hidden; } .menu-hero::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(201,162,39,.10), transparent 55%); pointer-events: none; } .menu-hero .brand-mark{ width: 64px; height: 64px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; background: radial-gradient(circle at 30% 20%, rgba(201,162,39,.18), transparent 60%); position: relative; } .menu-hero .brand-mark svg{ width: 34px; height: 34px; } .menu-hero .eyebrow{ font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); margin: 0 0 8px; position: relative; } .menu-hero h1.brand{ font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(34px, 8vw, 54px); margin: 0; letter-spacing: .02em; color: var(--ivory); text-shadow: 0 2px 24px rgba(201,162,39,.15); position: relative; } .menu-hero h1.brand em{ font-style: italic; color: var(--gold-bright); font-weight: 500; } .menu-hero .tagline{ font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 19px; color: var(--muted); margin: 6px 0 0; letter-spacing: .02em; position: relative; } /* ---------- Section divider (echoes the cleaver/knife mark in the logo) ---------- */ .cleaver-rule{ display:flex; align-items:center; gap:10px; margin: 6px 0 22px; opacity:.9; } .cleaver-rule::before, .cleaver-rule::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent); } .cleaver-rule .mark{ width:7px; height:7px; background:var(--gold); transform:rotate(45deg); box-shadow:0 0 8px rgba(201,162,39,.6); } /* ---------- Search + category controls ---------- */ .menu-controls{ position: sticky; top: 84px; /* clears the fixed site navbar */ z-index: 40; background: rgba(11,10,8,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft); padding: 12px 16px 10px; } .search-wrap{ max-width: 720px; margin: 0 auto 10px; position: relative; } .search-wrap input{ width: 100%; background: #141210; border: 1px solid var(--line); border-radius: 999px; padding: 11px 16px 11px 40px; color: var(--ivory); font-size: 14.5px; outline: none; } .search-wrap input::placeholder{ color: var(--muted); } .search-wrap input:focus{ border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,39,.15); } .search-wrap svg{ position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; opacity: .6; } .cat-nav{ max-width: 1000px; margin: 0 auto; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .cat-nav::-webkit-scrollbar{ display: none; } .cat-nav button{ flex: 0 0 auto; background: transparent; border: 1px solid var(--line-soft); color: var(--muted); padding: 7px 14px; border-radius: 999px; font-size: 12.5px; letter-spacing: .03em; cursor: pointer; white-space: nowrap; transition: .2s; } .cat-nav button.active, .cat-nav button:hover{ border-color: var(--gold); color: var(--gold-bright); background: rgba(201,162,39,.08); } /* ---------- Category sections ---------- */ .menu-category{ margin-bottom: 46px; scroll-margin-top: 190px; } .is-hidden{ display: none; } .cat-head{ text-align: center; margin-bottom: 4px; } .cat-head .num{ font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--gold); font-size: 14px; letter-spacing: .1em; } .cat-title{ font-family: 'Playfair Display', 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(24px, 5.5vw, 32px); margin: 2px 0 2px; color: var(--ivory); } .cat-title .en{ display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--muted); font-size: 16px; margin-top: 2px; font-weight: 400; } /* ---------- Items ---------- */ .menu-item{ padding: 14px 2px; border-bottom: 1px dashed var(--line-soft); } .menu-item:last-child{ border-bottom: none; } .item-row{ display: flex; align-items: baseline; gap: 8px; } .item-name{ font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15.5px; color: var(--ivory); letter-spacing: .01em; } .item-name .en{ display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; color: var(--gold-bright); opacity: .85; font-size: 14px; margin-top: 1px; } .leader{ flex: 1; border-bottom: 1px dotted rgba(168,159,141,.4); transform: translateY(-4px); min-width: 14px; } .price{ font-weight: 700; font-size: 15.5px; color: var(--gold-bright); white-space: nowrap; } .price.ask{ font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .item-note{ margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--muted); } /* ---------- Allergen note & empty state ---------- */ .allergen-box{ background: #141210; border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin: 0 auto 46px; font-size: 12.5px; color: var(--muted); line-height: 1.7; } .allergen-box strong{ color: var(--gold-bright); font-weight: 600; } .allergen-box em{ display: block; margin-top: 8px; font-style: italic; } .empty-state{ text-align: center; color: var(--muted); padding: 60px 20px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 19px; }