/* ============================================================ SALT Ice & Fire — design v3 "Candlelight & Leaves" Reference: the two saved pins + the venue's Eve mural. Near-black warm green ground (Wilma), champagne serif type & thin gold framing (Bella Vista), real photography throughout, botanical photo layers, the mural as centrepiece. Ice & fire live in light temperature: candle-warm vs glacial. ============================================================ */ :root { --night: #0E1710; /* warm green-black ground */ --night-2: #131F16; /* panels */ --forest: #1B2C1F; /* raised */ --hairline: rgba(200,169,106,.38); --gold: #C8A96A; /* thin lines, small caps */ --champagne: #EDE3CF; /* headlines */ --candle: #E8B04B; /* warm emphasis, prices */ --flame: #D96C32; /* CTAs */ --ice: #A9D6C9; /* glacial accents */ --icedeep: #0D1B18; /* the cold room */ --stone: #A8B3A6; /* secondary text */ --free: #7BD9A8; --warn: #DFA845; --small: #566052; --serif: "Cormorant Garamond", Georgia, serif; --sans: "Montserrat", "Segoe UI", sans-serif; --logo-serif: "Playfair Display", Georgia, serif; /* matches the SALT wordmark logo */ --maxw: 1180px; --pad: clamp(1.25rem, 4vw, 3rem); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } body { background: var(--night); color: var(--champagne); font-family: var(--sans); font-weight: 300; font-size: .98rem; line-height: 1.75; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.08; } h2 { font-size: clamp(2.3rem, 5vw, 3.6rem); letter-spacing: .01em; } h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; color: var(--candle); } .em-ice { font-style: italic; font-weight: 400; color: var(--ice); } a { color: var(--candle); text-decoration: none; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .fp-table:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .eyebrow { font-size: .66rem; font-weight: 400; letter-spacing: .42em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; } .eyebrow::before, .eyebrow::after { content: ""; display: inline-block; width: 20px; height: 1px; background: var(--hairline); margin: 0 .7rem; vertical-align: middle; } .section-sub { color: var(--stone); max-width: 46ch; margin: 1.1rem auto 0; } .text-link { border-bottom: 1px solid var(--hairline); padding-bottom: 2px; font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; transition: color .25s, border-color .25s; } .text-link:hover { color: var(--champagne); border-color: var(--gold); } /* ---------- gold frame device (from the pins & the mural's frame) ---------- */ .gframe { position: relative; } .gframe::before { content: ""; position: absolute; inset: 14px; border: 1px solid var(--hairline); pointer-events: none; z-index: 3; } /* ---------- loader ---------- */ #loader { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; gap: 14px; background: var(--night); cursor: pointer; transition: opacity .5s ease, visibility .5s; } #loader.is-done { opacity: 0; visibility: hidden; } .loader-word { font-family: var(--logo-serif); font-style: normal; font-weight: 700; font-size: clamp(3rem, 9vw, 5rem); color: var(--champagne); text-align: center; letter-spacing: .02em; text-transform: uppercase; } .loader-line { height: 1px; width: 0; margin: 0 auto; background: var(--gold); animation: line-grow 1s ease forwards .15s; } @keyframes line-grow { to { width: 150px; } } /* ---------- staging containment banner (item: 2026-08-28) ---------- Hidden by default (production); shown only via the inline hostname check in index.html's , which also adds .is-staging to so the fixed nav below can be pushed down by the banner's height without affecting production's layout at all. */ .staging-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 200; background: var(--flame); color: var(--night); font-family: var(--sans); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: .55rem 1rem; } .staging-banner[hidden] { display: none; } html.is-staging .nav { top: 2.4rem; } /* ---------- nav ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 1.2rem var(--pad); transition: background .35s, padding .35s, border-color .35s; border-bottom: 1px solid transparent; } .nav.is-scrolled { background: rgba(14,23,16,.92); backdrop-filter: blur(12px); padding: .7rem var(--pad); border-bottom-color: var(--hairline); } .nav-brand, .footer-brand { font-family: var(--logo-serif); font-style: normal; font-weight: 700; font-size: 1.55rem; color: var(--champagne); letter-spacing: .01em; text-transform: uppercase; display: inline-flex; align-items: baseline; gap: .6rem; transition: opacity .2s; } .nav-brand:hover { opacity: .85; } .brand-sub { font-family: var(--sans); font-style: normal; font-weight: 400; font-size: .5rem; letter-spacing: .38em; text-transform: uppercase; color: var(--gold); } .nav-links { display: flex; align-items: center; gap: 1.9rem; } .nav-links a { color: var(--champagne); font-size: .68rem; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; opacity: .8; transition: opacity .2s, color .2s; } .nav-links a:hover { opacity: 1; color: var(--candle); } .nav-cta { border: 1px solid var(--gold); padding: .6rem 1.3rem; opacity: 1 !important; color: var(--champagne) !important; transition: background .25s, color .25s; } .nav-cta:hover { background: var(--gold); color: var(--night) !important; } .nav-burger { display: none; background: none; border: 0; cursor: pointer; } .nav-burger span { display: block; width: 24px; height: 1.5px; background: var(--champagne); margin: 6px 0; } /* ---------- language switch ---------- */ .lang-switch { display: flex; align-items: center; gap: .3rem; margin-left: 1.6rem; } .lang-btn { background: transparent; border: 1px solid transparent; color: var(--stone); font-family: var(--sans); font-size: .64rem; font-weight: 400; letter-spacing: .16em; padding: .3rem .55rem; cursor: pointer; transition: color .2s, border-color .2s; } .lang-btn:hover { color: var(--champagne); } .lang-btn.is-on { color: var(--candle); border-color: var(--hairline); } /* ---------- buttons ---------- */ .btn { display: inline-block; font-family: var(--sans); font-weight: 400; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; padding: 1.05rem 2.2rem; cursor: pointer; border: 1px solid transparent; transition: background .25s, color .25s, border-color .25s, box-shadow .25s; } .btn-fire { background: var(--flame); color: #FFF6E8; border-color: var(--flame); } .btn-fire:hover { background: var(--candle); border-color: var(--candle); color: var(--night); box-shadow: 0 10px 34px rgba(232,176,75,.28); } .btn-fire:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; } .btn-line { background: transparent; color: var(--champagne); border-color: var(--hairline); } .btn-line:hover { border-color: var(--gold); color: var(--candle); } /* ---------- hero (Bella Vista composition, real fire photography) ---------- */ .hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; } .hero-media, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-media { animation: kenburns 26s ease-in-out infinite alternate; transition: opacity .6s ease; } @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.12) translate(-1.5%, -1%); } } .hero-veil { position: absolute; inset: 0; background: radial-gradient(75% 60% at 50% 46%, rgba(14,23,16,.18), rgba(14,23,16,.72) 78%), linear-gradient(180deg, rgba(14,23,16,.66), rgba(14,23,16,.22) 40%, rgba(14,23,16,.9)); } .hero-inner { position: relative; z-index: 4; text-align: center; padding: 0 var(--pad); max-width: 860px; } .hero-title { font-family: var(--logo-serif); font-size: clamp(3.4rem, 10vw, 7rem); font-weight: 700; font-style: normal; color: var(--champagne); margin: 1.2rem 0 0; letter-spacing: .01em; text-transform: uppercase; } .hero-sig { display: block; font-family: var(--sans); font-size: .72rem; font-weight: 400; font-style: normal; letter-spacing: .52em; text-transform: uppercase; color: var(--gold); margin: .5rem 0 1.6rem; } .hero-sub { color: var(--stone); max-width: 46ch; margin: 0 auto 2.6rem; font-weight: 300; } .hero-sub .w { color: var(--candle); } .hero-sub .c { color: var(--ice); } .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .hero-scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 4; color: var(--stone); font-size: .6rem; letter-spacing: .4em; text-transform: uppercase; animation: drift 2.6s ease-in-out infinite; } @keyframes drift { 50% { transform: translate(-50%, 8px); } } /* ---------- sections ---------- */ .section { max-width: var(--maxw); margin: 0 auto; padding: clamp(4rem, 9vw, 7rem) var(--pad); } .section-head { text-align: center; margin-bottom: clamp(2.4rem, 5vw, 3.8rem); } /* botanical photo band between sections (Wilma layering) */ .leafband { height: clamp(120px, 20vw, 220px); background-image: linear-gradient(180deg, var(--night) 0%, rgba(14,23,16,.25) 30%, rgba(14,23,16,.25) 70%, var(--night) 100%), var(--leaf-src); background-size: cover; background-position: center; } /* ---------- the mural (Eve) ---------- */ .mural { text-align: center; } .mural-frame { display: inline-block; padding: 10px; border: 1px solid var(--gold); background: #000; box-shadow: 0 40px 90px rgba(0,0,0,.55); } .mural-frame img { display: block; width: 100%; max-width: 900px; height: auto; } .mural-caption { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--stone); margin-top: 1.4rem; } /* ---------- concept ---------- */ .concept-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; } .concept-copy h2 { margin-bottom: 1.6rem; } .concept-copy p { margin-bottom: 1.3rem; color: var(--stone); max-width: 52ch; } .concept-photo { position: relative; } .concept-photo img { width: 100%; height: auto; display: block; } .concept-photo::after { content: ""; position: absolute; inset: -14px 14px 14px -14px; border: 1px solid var(--hairline); pointer-events: none; } /* ---------- menu (photo cards like the pins' dish grids) ---------- */ .menu-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.2rem); } .menu-col { border: 1px solid var(--hairline); background: var(--night-2); } .menu-photo { aspect-ratio: 3/2; overflow: hidden; } .menu-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; } .menu-col:hover .menu-photo img { transform: scale(1.06); } .menu-body { padding: clamp(1.3rem, 2.5vw, 1.8rem); } .menu-cat { font-family: var(--serif); font-style: italic; font-size: 1.5rem; font-weight: 500; color: var(--champagne); margin-bottom: 1.2rem; text-align: center; } .menu-cat::after { content: ""; display: block; width: 44px; height: 1px; background: var(--gold); margin: .8rem auto 0; } .menu-col.chilled .menu-cat::after { background: var(--ice); } .menu-list { list-style: none; } .menu-list li { display: flex; flex-wrap: wrap; align-items: baseline; margin-bottom: 1.1rem; } .mi-name { font-weight: 400; font-size: .88rem; letter-spacing: .02em; } .mi-dots { flex: 1; border-bottom: 1px dotted rgba(168,179,166,.35); margin: 0 .55rem; transform: translateY(-4px); } .mi-price { color: var(--candle); font-size: .82rem; } .menu-col.chilled .mi-price { color: var(--ice); } .mi-desc { width: 100%; color: var(--stone); font-size: .78rem; margin-top: .1rem; } .menu-note { margin-top: 2.4rem; color: var(--stone); font-size: .84rem; text-align: center; font-style: italic; font-family: var(--serif); } /* ---------- full menu (real content, Food/Drinks tabs) ---------- */ .menu-tabs { display: flex; justify-content: center; gap: .8rem; margin-bottom: clamp(2rem, 5vw, 3.2rem); } .menu-tab-btn { background: transparent; border: 1px solid var(--hairline); color: var(--stone); font-family: var(--sans); font-size: .72rem; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; padding: .8rem 1.8rem; cursor: pointer; transition: border-color .25s, color .25s, background .25s; } .menu-tab-btn:hover { color: var(--champagne); border-color: var(--gold); } .menu-tab-btn.is-on { color: var(--night); background: var(--gold); border-color: var(--gold); } .menu-choice-prompt { margin: 0 auto clamp(2rem, 5vw, 3.2rem); text-align: center; color: var(--stone); font-family: var(--serif); font-style: italic; font-size: clamp(1rem, 2vw, 1.2rem); } .menu-panel { display: none; } .menu-panel.is-active { display: block; animation: step-in .35s ease; } .menu-cat-grid { columns: 2; column-gap: clamp(2.4rem, 6vw, 4.5rem); } .menu-category { margin-bottom: clamp(2rem, 4vw, 2.8rem); break-inside: avoid; } .menu-category .menu-cat { text-align: left; } .menu-category .menu-cat::after { margin: .8rem 0 0; } .menu-tagline { color: var(--flame); font-family: var(--serif); font-style: italic; font-size: .92rem; margin: -.6rem 0 1.2rem; } .mi-tag { font-size: .58rem; vertical-align: super; color: var(--ice); letter-spacing: .04em; margin-left: .15rem; } .menu-legend { text-align: center; color: var(--stone); font-size: .74rem; margin-top: 2.4rem; letter-spacing: .04em; } .menu-legend-full { text-align: center; color: var(--stone); font-size: .78rem; margin-top: 2.8rem; padding-top: 1.6rem; border-top: 1px solid var(--hairline); font-style: italic; font-family: var(--serif); } @media (max-width: 720px) { .menu-cat-grid { columns: 1; } } /* ============================================================ RESERVATION — the cold room; the chosen table takes the candle. ============================================================ */ .cold-room { background: radial-gradient(900px 480px at 50% 0%, rgba(169,214,201,.08), transparent 60%), linear-gradient(180deg, var(--icedeep), var(--night)); border-top: 1px solid rgba(169,214,201,.2); border-bottom: 1px solid rgba(169,214,201,.2); } .cold-room .eyebrow { color: var(--ice); } .cold-room-inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(4rem, 9vw, 7rem) var(--pad); } .demo-note { background: rgba(217,108,50,.1); border: 1px solid rgba(217,108,50,.4); font-size: .82rem; padding: .7rem 1rem; margin-bottom: 1.6rem; } .res-alert { background: rgba(223,168,69,.1); border: 1px solid var(--warn); padding: .8rem 1rem; margin-bottom: 1.4rem; font-size: .86rem; } .res-progress { display: flex; justify-content: center; gap: .45rem; list-style: none; margin-bottom: 2.6rem; flex-wrap: wrap; } .res-progress li { font-size: .58rem; letter-spacing: .24em; text-transform: uppercase; color: var(--small); padding: .45rem 1rem; border: 1px solid rgba(86,96,82,.5); transition: color .3s, border-color .3s; } .res-progress li.is-done { color: var(--ice); border-color: rgba(169,214,201,.5); } .res-step { display: none; max-width: 900px; margin: 0 auto; } .res-step.is-active { display: block; animation: step-in .35s ease; } @keyframes step-in { from { opacity: 0; transform: translateY(10px); } } .res-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; } .field { margin-bottom: 1.4rem; display: flex; flex-direction: column; } .field label { font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--stone); margin-bottom: .55rem; } .field input, .field select, .field textarea { background: rgba(13,27,24,.7); border: 1px solid rgba(169,214,201,.22); color: var(--champagne); font-family: var(--sans); font-weight: 300; font-size: .95rem; padding: .9rem 1rem; transition: border-color .25s; color-scheme: dark; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ice); } .field input:disabled, .field select:disabled, .field textarea:disabled { opacity: .55; cursor: not-allowed; } .field .has-error, .has-error { border-color: var(--flame) !important; } .field-error { color: var(--candle); font-size: .78rem; margin-top: .35rem; min-height: 1em; } /* `color-scheme: dark` + `color:` above already theme input[type=date] correctly everywhere this was actually tested (desktop Chrome, Android Chrome emulation, real WebKit engine). This makes the segment/placeholder color explicit on the shadow-DOM parts themselves too, so it can never depend on those parts inheriting from the host element on an engine that wasn't tested here (Samsung Internet's own skin, real iOS Safari) -- a no-op wherever inheritance already works, cheap insurance where it might not. */ .field input[type="date"]::-webkit-datetime-edit, .field input[type="date"]::-webkit-datetime-edit-fields-wrapper, .field input[type="date"]::-webkit-datetime-edit-text, .field input[type="date"]::-webkit-datetime-edit-month-field, .field input[type="date"]::-webkit-datetime-edit-day-field, .field input[type="date"]::-webkit-datetime-edit-year-field { color: var(--champagne); } .party-row, .slots-grid, .res-room-count-buttons { display: flex; flex-wrap: wrap; gap: .5rem; } .party-btn, .slot-btn, .room-count-btn { background: rgba(13,27,24,.7); border: 1px solid rgba(169,214,201,.22); color: var(--champagne); font-family: var(--sans); font-weight: 300; font-size: .85rem; padding: .55rem 1rem; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s, color .2s; } .party-btn:hover, .slot-btn:hover, .room-count-btn:hover { border-color: var(--ice); } .party-btn.is-on, .slot-btn.is-on, .room-count-btn.is-on { border-color: var(--candle); background: rgba(232,176,75,.12); box-shadow: 0 0 16px rgba(232,176,75,.22); color: var(--candle); } .res-room-count-picker { margin: 1rem 0; } .res-deposit-notice { color: var(--candle); font-size: .85rem; margin: .8rem 0; } .res-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.6rem; gap: 1rem; flex-wrap: wrap; } .res-nav-right { display: flex; gap: .8rem; flex-wrap: wrap; } .res-rules { background: rgba(13,27,24,.5); border: 1px solid rgba(169,214,201,.22); padding: 1.1rem 1.2rem; margin-top: 1.6rem; } .res-rules-title { font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--stone); margin: 0 0 .7rem; } .res-rules-list { margin: 0 0 1rem; padding-left: 1.2rem; font-size: .84rem; color: var(--champagne); } .res-rules-list li { margin-bottom: .35rem; } .res-rules-ack { display: flex; align-items: flex-start; gap: .6rem; font-size: .82rem; color: var(--champagne); cursor: pointer; } .res-rules-ack input { margin-top: .2rem; } .res-deposit-notice { background: rgba(232,176,75,.1); border: 1px solid rgba(232,176,75,.4); color: var(--candle); font-size: .84rem; padding: .8rem 1rem; margin-bottom: 1rem; } /* floor plan */ .fp-legend { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; font-size: .78rem; color: var(--stone); margin-bottom: 1rem; } .fp-legend[hidden] { display: none; } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .45rem; } .dot-small { background: var(--free); } .floorplan-wrap { background: rgba(13,27,24,.45); border: 1px solid var(--hairline); padding: clamp(.7rem, 2vw, 1.5rem); } .fp-loading { color: var(--stone); padding: 2rem; text-align: center; } /* one map of the whole restaurant; scrolls sideways on small screens */ .floorplan-wrap { overflow-x: auto; } .fp-plan-svg { display: block; width: 100%; min-width: 820px; height: auto; margin: 0 auto; } .fp-label { fill: var(--gold); font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; } .fp-sea-label { fill: #c4e8f4; font-family: var(--sans); font-size: 11px; letter-spacing: 3px; } /* rooms: wall panel, floor, herringbone sheen, sconce lights */ .fp-wall { fill: #101b13; stroke: rgba(200,169,106,.22); stroke-width: 1.2; } .fp-floor { fill: #14231a; } .fp-floor-pattern { fill: url(#fpHerr); pointer-events: none; } .fp-sconce { fill: #f0c069; pointer-events: none; } .fp-sconce-halo { fill: url(#fpGlow); opacity: .55; pointer-events: none; } /* sea-view water band (glacial — the "ice" of Ice & Fire) */ .fp-sea { fill: url(#fpSeaG); stroke: rgba(169,214,201,.4); stroke-width: 1; } .fp-wave { fill: none; stroke: rgba(169,214,201,.45); stroke-width: 1.3; stroke-linecap: round; animation: fpDrift 7s linear infinite; } .fp-wave.w2 { animation-duration: 11s; opacity: .55; } @keyframes fpDrift { to { transform: translateX(-28px); } } /* tables: wood top on a darker extrusion, gold-trimmed number plaque */ .fp-table { cursor: pointer; } .fp-ext { fill: #1d1007; pointer-events: none; } .fp-top { fill: url(#fpWood); stroke: #2a1809; stroke-width: 1.1; filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); transition: stroke .25s, filter .25s; } .fp-grain { stroke: rgba(22,11,4,.38); stroke-width: 1; pointer-events: none; } .fp-plq { fill: #0f231b; stroke: rgba(232,176,75,.45); stroke-width: .8; pointer-events: none; transition: fill .25s, stroke .25s; } .fp-num { fill: #f4ecd9; font-family: var(--sans); font-size: 12.5px; font-weight: 600; pointer-events: none; } .fp-cap { fill: #9db3a6; font-family: var(--sans); font-size: 8.5px; pointer-events: none; } /* leather chairs, booth benches, candles */ .fp-chair { pointer-events: none; } .fp-seat { fill: #2e5642; stroke: #52836a; stroke-width: 1.1; transition: stroke .25s; } .fp-back { fill: #3a6a52; stroke: #52836a; stroke-width: 1.1; transition: stroke .25s; } .fp-bench { fill: url(#fpBench); stroke: #52836a; stroke-width: 1.1; pointer-events: none; } .fp-bench-arc-outer { fill: none; stroke: #24463a; stroke-width: 12; stroke-linecap: round; pointer-events: none; } .fp-bench-arc { fill: none; stroke: #3a6a52; stroke-width: 8; stroke-linecap: round; pointer-events: none; } .fp-candle { fill: #ffd98a; pointer-events: none; } /* linear fire table between the High Table rows */ .fp-fire-slab { fill: #16110c; stroke: rgba(200,169,106,.3); stroke-width: 1; pointer-events: none; } .fp-fire-bed { fill: url(#fpFire); opacity: .9; pointer-events: none; } .fp-flame { fill: url(#fpGlow); opacity: .75; pointer-events: none; animation: fpFlicker 2.6s ease-in-out infinite; } .fp-flame:nth-of-type(odd) { animation-delay: -1.3s; } .fp-flame-core { fill: #ffd98a; pointer-events: none; } .fp-candle-glow { fill: url(#fpGlow); opacity: .6; pointer-events: none; animation: fpFlicker 3.2s ease-in-out infinite; } @keyframes fpFlicker { 50% { opacity: .3; } } /* states */ .fp-table.is-pick:hover .fp-top, .fp-table.is-pick:focus-visible .fp-top { stroke: var(--candle); filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)) drop-shadow(0 0 7px rgba(232,176,75,.55)); } .fp-table.is-pick:hover .fp-plq, .fp-table.is-pick:focus-visible .fp-plq { stroke: rgba(232,176,75,.9); } /* the chosen table takes the candle */ .fp-table.is-selected .fp-top { stroke: var(--candle); filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)) drop-shadow(0 0 13px rgba(232,176,75,.85)); animation: candle 2s ease-in-out infinite; } .fp-table.is-selected .fp-plq { fill: #33230c; stroke: var(--candle); } .fp-table.is-selected .fp-num { fill: var(--candle); } .fp-table.is-selected .fp-seat, .fp-table.is-selected .fp-back { stroke: var(--candle); } @keyframes candle { 50% { filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)) drop-shadow(0 0 22px rgba(232,176,75,.95)); } } /* Table-size rule: too small for the party, or capacity exceeds party+2 (High Table 1-seat units are exempt — see floorplan.js's comment). */ .fp-table.is-disabled { cursor: not-allowed; opacity: .5; filter: saturate(.4) brightness(.8); } .fp-table.is-disabled:hover .fp-top, .fp-table.is-disabled:focus-visible .fp-top { stroke: #2a1809; filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); } @media (prefers-reduced-motion: reduce) { .fp-wave, .fp-candle-glow, .fp-table.is-selected .fp-top { animation: none; } } .table-pick { margin-top: 1rem; color: var(--candle); font-family: var(--serif); font-style: italic; font-size: 1.05rem; min-height: 1.5em; text-align: center; } /* pre-order */ .preorder-intro { color: var(--stone); margin-bottom: 1.6rem; text-align: center; } .preorder-section { margin: 2rem 0 .7rem; color: var(--gold); font-family: var(--sans); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; } .preorder-group { border-bottom: 1px solid rgba(169,214,201,.14); } .preorder-cat { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--serif); font-style: italic; color: var(--champagne); font-size: 1.12rem; margin: 0; padding: 1rem .2rem; cursor: pointer; list-style: none; } .preorder-cat::-webkit-details-marker { display: none; } .preorder-cat::after { content: "+"; color: var(--gold); font-family: var(--sans); font-style: normal; } .preorder-group[open] > .preorder-cat::after { content: "−"; } .preorder-group > .preorder-item { padding-left: .35rem; padding-right: .35rem; } .preorder-item { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; padding: .85rem 0; border-bottom: 1px solid rgba(169,214,201,.12); } .pi-info { display: flex; flex-direction: column; } .pi-name { font-weight: 400; font-size: .9rem; } .pi-desc { color: var(--stone); font-size: .78rem; } .pi-price { color: var(--candle); font-size: .84rem; white-space: nowrap; } .pi-qty { display: flex; align-items: center; gap: .7rem; } .qty-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hairline); background: transparent; color: var(--candle); font-size: 1rem; cursor: pointer; transition: background .2s, border-color .2s; } .qty-btn:hover { background: rgba(232,176,75,.12); border-color: var(--gold); } .qty-val { min-width: 1.2ch; text-align: center; } .preorder-total { margin-top: 1.4rem; color: var(--candle); text-align: center; } /* confirmation */ .res-confirm { text-align: center; padding: 2.5rem 0; } .confirm-mark { color: var(--gold); font-family: var(--serif); font-size: 2rem; margin-bottom: 1rem; } .res-confirm h3 { font-size: 2.2rem; font-style: italic; margin-bottom: 1rem; } #confirm-summary { margin-bottom: 1rem; line-height: 2; color: var(--stone); } #confirm-summary strong { color: var(--champagne); } .confirm-note { color: var(--stone); font-size: .84rem; margin-bottom: 2rem; } /* ---------- events ---------- */ .events-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.4rem, 6vw, 5rem); align-items: start; } .events-grid h2 { margin-bottom: 1.4rem; } .events-grid p { color: var(--stone); } .events-points { list-style: none; margin-top: 1.6rem; } .events-points li { padding-left: 1.5rem; position: relative; margin-bottom: .65rem; color: var(--stone); font-size: .9rem; } .events-points li::before { content: "·"; position: absolute; left: 0; color: var(--gold); font-size: 1.6rem; line-height: .9; } .events-form { border: 1px solid var(--hairline); background: var(--night-2); padding: clamp(1.4rem, 3vw, 2.2rem); } .events-form .field input, .events-form .field select, .events-form .field textarea { background: rgba(14,23,16,.7); border-color: var(--hairline); } .events-form .field input:focus, .events-form .field select:focus, .events-form .field textarea:focus { border-color: var(--gold); } .events-form .cf-turnstile { margin: 1rem 0; min-height: 65px; } .events-sent { color: var(--free); font-size: .84rem; margin-top: 1rem; } #events-error { color: #f28b82; } /* ---------- gallery ---------- */ .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 12px; } .gallery-item { border: 1px solid var(--hairline); background: var(--night-2); cursor: pointer; overflow: hidden; padding: 0; position: relative; transition: border-color .25s; } .gallery-item:hover { border-color: var(--gold); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s ease; } .gallery-item:hover img { transform: scale(1.05); } .gallery-item .g-tag { position: absolute; left: 0; right: 0; bottom: 0; text-align: left; font-size: .58rem; letter-spacing: .26em; text-transform: uppercase; color: var(--champagne); background: linear-gradient(180deg, transparent, rgba(14,23,16,.85)); padding: 1.6rem .9rem .7rem; } .gallery-item.tall { grid-row: span 2; } .gallery-item.wide { grid-column: span 2; } /* framed: show the WHOLE photo (no crop) on the dark ground, gold hairline */ .gallery-item.framed { background: #0B130D; } .gallery-item.framed img { object-fit: contain; padding: 10px; box-sizing: border-box; } .gallery-note { margin-top: 1.3rem; color: var(--stone); font-size: .8rem; text-align: center; font-style: italic; font-family: var(--serif); } .lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(10,16,11,.95); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .3s; cursor: zoom-out; padding: 4vmin; } .lightbox.is-open { opacity: 1; visibility: visible; } .lightbox img { max-width: 92vw; max-height: 88vh; border: 1px solid var(--gold); background: #000; padding: 6px; } /* ---------- visit ---------- */ .visit-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2.4rem, 6vw, 5rem); align-items: center; } .visit-grid h2 { margin-bottom: 2rem; } .visit-info div { margin-bottom: 1.6rem; } .visit-info dt { font-size: .6rem; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); margin-bottom: .4rem; } .visit-info dd { color: var(--champagne); font-weight: 300; } .visit-map { aspect-ratio: 4/3; border: 1px solid var(--hairline); overflow: hidden; padding: 8px; background: var(--night-2); } .visit-map iframe { width: 100%; height: 100%; border: 0; filter: sepia(.2) hue-rotate(70deg) saturate(.65) brightness(.9); } /* ---------- footer ---------- */ .footer { border-top: 1px solid var(--hairline); padding: 3rem var(--pad) 2rem; } .footer-inner { max-width: var(--maxw); margin: 0 auto 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem; } .footer-links, .footer-social { display: flex; gap: 1.6rem; flex-wrap: wrap; } .footer-links a, .footer-social a { color: var(--stone); font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; } .footer-links a:hover, .footer-social a:hover { color: var(--candle); } .footer-fine { text-align: center; color: var(--small); font-size: .74rem; } .footer-fine a { color: var(--stone); } /* ---------- reveals ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; } .reveal.is-visible { opacity: 1; transform: none; } /* ---------- inner pages (multi-page SEO architecture) ---------- */ .page-hero { max-width: var(--maxw); margin: 0 auto; padding: clamp(7.5rem, 16vw, 10rem) var(--pad) clamp(2.4rem, 5vw, 3.4rem); } .page-hero h1 { font-size: clamp(2.5rem, 6vw, 4.1rem); margin: .8rem 0 1.5rem; } .page-intro { color: var(--stone); max-width: 62ch; } .breadcrumb { font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--stone); } .breadcrumb a { color: var(--gold); } .page-section { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) clamp(3rem, 7vw, 5rem); } .page-section h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 1.2rem; } .page-section p { color: var(--stone); max-width: 68ch; margin-bottom: 1rem; } .page-section + .page-section { border-top: 1px solid var(--hairline); padding-top: clamp(3rem, 7vw, 5rem); } .page-links { max-width: var(--maxw); margin: 0 auto; padding: clamp(2.4rem, 5vw, 3.6rem) var(--pad); display: flex; gap: 1rem 1.6rem; flex-wrap: wrap; border-top: 1px solid var(--hairline); } /* ---------- testimonials ---------- */ .testimonial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 3vw, 2rem); max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) clamp(3rem, 6vw, 4.5rem); } .testimonial { border: 1px solid var(--hairline); background: var(--night-2); padding: clamp(1.6rem, 3vw, 2.2rem); } .testimonial blockquote { font-family: var(--serif); font-style: italic; color: var(--champagne); font-size: 1.05rem; line-height: 1.7; margin: 0 0 1.1rem; } .testimonial cite { font-style: normal; color: var(--gold); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; } @media (max-width: 720px) { .testimonial-grid { grid-template-columns: 1fr; } } /* ---------- 404 ---------- */ .error-page { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: var(--pad); } .error-page .eyebrow::before, .error-page .eyebrow::after { display: none; } .error-page h1 { font-size: clamp(2.4rem, 7vw, 3.6rem); margin: .6rem 0 1.2rem; } .error-page p { color: var(--stone); max-width: 46ch; margin: 0 auto 2rem; } .error-links { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ---------- responsive ---------- */ @media (max-width: 940px) { .menu-cols { grid-template-columns: 1fr; } .concept-grid, .events-grid, .visit-grid { grid-template-columns: 1fr; } .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; } } @media (max-width: 720px) { .nav-links { position: fixed; top: 0; right: 0; bottom: 0; width: min(78vw, 320px); background: rgba(14,23,16,.97); backdrop-filter: blur(14px); flex-direction: column; justify-content: center; gap: 2.2rem; transform: translateX(100%); transition: transform .35s ease; border-left: 1px solid var(--hairline); } .nav-links.is-open { transform: none; } .nav-burger { display: block; position: relative; z-index: 60; } .lang-switch { margin-left: .8rem; } .res-row { grid-template-columns: 1fr; } .preorder-item { grid-template-columns: 1fr auto; } .pi-price { grid-column: 1; } .gframe::before { inset: 8px; } } .menu-price-key { margin: -.55rem 0 .8rem; color: var(--stone); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }