{"project":{"id":"oyNaLM5","userId":"davidyarham@gmail.com","username":null,"userPicture":null,"name":"Hoffs bar","visible":true,"contributors":"","githubRepo":"davidyarham/blnq-hoffs-bar2","forkedFrom":null,"isTemplate":false,"tags":"","files":{"folder":"","files":[{"name":"index.html","content":"\n\n\n \n \n Untitled\n \n\n\n\n\n\n\n\n\n
\n\t
\n
\n\t\n\t\n\t
HOFFS BAR — EST. 2019
\n
\n
\n\n\n\n\n
\n\t
\n\t\t\"Moody\n\t
\n\t
\n\t
\n\t\tEST. 2019 — COCKTAIL BAR\n\t\t

HOFF'S
BAR

\n\t\t

Where loyalty is poured, not earned.

\n\t\tExplore the Menu\n\t
\n\t
\n\t\tScroll\n\t\t\n\t
\n
\n\n
\n\t
\n\t\t
\n\t\t\t\"Cocktail\n\t\t\t
\n\t\t
\n\t\t
\n\t\t\tThe Story\n\t\t\t

No Witnesses.
Just Great Drinks.

\n\t\t\t

Hoffs Bar isn't just a watering hole — it's a sanctuary for those who appreciate the craft. Nestled in\n\t\t\t\tthe heart of the city, we serve bold cocktails with a side of defiance. Every drink tells a story, and\n\t\t\t\tevery night ends with one worth remembering.

\n\t\t\t

Our bartenders are artists, our ingredients are sourced with obsessive care, and our atmosphere is\n\t\t\t\tunapologetically raw.

\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t87\n\t\t\t\t\tSignature Cocktails\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t12\n\t\t\t\t\tDraft Beers\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t200+\n\t\t\t\t\tSpirits\n\t\t\t\t
\n\t\t\t
\n\t\t
\n\t
\n
\n\n
\n\t
\n\t\tCOCKTAILS\n\t\t•\n\t\tSPIRITS\n\t\t•\n\t\tCRAFT BEER\n\t\t•\n\t\tWINE\n\t\t•\n\t\tLATE NIGHTS\n\t\t•\n\t\tCOCKTAILS\n\t\t•\n\t\tSPIRITS\n\t\t•\n\t\tCRAFT BEER\n\t\t•\n\t\tWINE\n\t\t•\n\t\tLATE NIGHTS\n\t\t•\n\t
\n
\n\n
\n\t
\n\t\tSignature Pours\n\t\t

The Lineup

\n\t
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\"The\n\t\t\t
\n\t\t\t
\n\t\t\t\t
01
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

The Teamster

\n\t\t\t\t\t\t$16\n\t\t\t\t\t
\n\t\t\t\t\t

Bourbon, smoked maple, angostura, orange peel. A union of flavors that means business.

\n\t\t\t\t\t
    \n\t\t\t\t\t\t
  • Bourbon
    • \n\t\t\t\t\t\t
  • Smoked Maple
    • \n\t\t\t\t\t\t
  • Bitters
    • \n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\"Red\n\t\t\t
\n\t\t\t
\n\t\t\t\t
02
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Red Handed

\n\t\t\t\t\t\t$14\n\t\t\t\t\t
\n\t\t\t\t\t

Campari, blood orange, prosecco, rosemary. Caught in the act of being delicious.

\n\t\t\t\t\t
    \n\t\t\t\t\t\t
  • Campari
    • \n\t\t\t\t\t\t
  • Blood Orange
    • \n\t\t\t\t\t\t
  • Prosecco
    • \n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\"The\n\t\t\t
\n\t\t\t
\n\t\t\t\t
03
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

The Alibi

\n\t\t\t\t\t\t$15\n\t\t\t\t\t
\n\t\t\t\t\t

Mezcal, lime, jalapeño, agave. Your excuse for staying one more round.

\n\t\t\t\t\t
    \n\t\t\t\t\t\t
  • Mezcal
    • \n\t\t\t\t\t\t
  • Jalapeño
    • \n\t\t\t\t\t\t
  • Agave
    • \n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\"Concrete\n\t\t\t
\n\t\t\t
\n\t\t\t\t
04
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Concrete Shoes

\n\t\t\t\t\t\t$17\n\t\t\t\t\t
\n\t\t\t\t\t

Gin, elderflower, cucumber, tonic. Smooth enough to make you sink right in.

\n\t\t\t\t\t
    \n\t\t\t\t\t\t
  • Gin
    • \n\t\t\t\t\t\t
  • Elderflower
    • \n\t\t\t\t\t\t
  • Tonic
    • \n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t
\n\t
\n\t
\n\t\tFull Menu \n\t
\n
\n\n
\n\t
\n\t\t\"Bar\n\t
\n\t
\n\t
\n\t\t

Private Events
& Reservations

\n\t\t

Book the back room for your next conspiracy. Groups of 10+.

\n\t\tGet in Touch\n\t
\n
\n\n
\n\t
\n\t\t
\n\t\t\tVisit Us\n\t\t\t

Open Late,
Close Never.

\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tMonday — Thursday\n\t\t\t\t\t\n\t\t\t\t\t5PM — 1AM\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tFriday — Saturday\n\t\t\t\t\t\n\t\t\t\t\t5PM — 3AM\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tSunday\n\t\t\t\t\t\n\t\t\t\t\t4PM — 12AM\n\t\t\t\t
\n\t\t\t
\n\t\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t742 Dearborn Street
\n Chicago, IL 60605\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t(312) 555-1975
\n Reservations recommended\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\thello@hoffsbar.com
\n Events & inquiries\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t
\n
\n\n\n \n\n"},{"name":"main.js","content":"// Initialize Lucide icons\nlucide.createIcons();\n\n// Mobile nav drawer\nconst navToggle = document.getElementById('navToggle');\nconst navClose = document.getElementById('navClose');\nconst navDrawer = document.getElementById('navDrawer');\nconst navOverlay = document.getElementById('navOverlay');\n\nfunction openDrawer() {\n\tnavDrawer.classList.add('is-open');\n\tnavOverlay.classList.add('is-open');\n\tdocument.body.style.overflow = 'hidden';\n}\n\nfunction closeDrawer() {\n\tnavDrawer.classList.remove('is-open');\n\tnavOverlay.classList.remove('is-open');\n\tdocument.body.style.overflow = '';\n}\n\nnavToggle.addEventListener('click', openDrawer);\nnavClose.addEventListener('click', closeDrawer);\nnavOverlay.addEventListener('click', closeDrawer);\n\n// Close drawer on link click\nnavDrawer.querySelectorAll('a').forEach(link => {\n\tlink.addEventListener('click', closeDrawer);\n});\n\n// Sticky nav background on scroll\nconst header = document.querySelector('.header');\nwindow.addEventListener('scroll', () => {\n\theader.classList.toggle('header--scrolled', window.scrollY > 60);\n}, {\n\tpassive: true\n});\n\n// Smooth scroll for nav links\ndocument.querySelectorAll('a[href^=\"#\"]').forEach(link => {\n\tlink.addEventListener('click', (e) => {\n\t\tconst target = document.querySelector(link.getAttribute('href'));\n\t\tif (target) {\n\t\t\te.preventDefault();\n\t\t\ttarget.scrollIntoView({\n\t\t\t\tbehavior: 'smooth'\n\t\t\t});\n\t\t}\n\t});\n});"},{"name":"style.css","content":"/* === HOFFS BAR — ELEGANT REVISION === */\n:root {\n\tcolor-scheme: dark;\n\t--red: #9B1B2A;\n\t--red-dark: #6B0F1A;\n\t--red-light: #C9384F;\n\t--gold: #B8965A;\n\t--gold-light: #D4AF78;\n\t--white: #F5F0EB;\n\t--cream: #EDE0D4;\n\t--black: #080808;\n\t--bg: #0D0B09;\n\t--surface: #131008;\n\t--gray: #7A7670;\n\t--gray-light: #A09890;\n\t--border: rgba(184, 150, 90, 0.15);\n\t--font-display: 'Anton', sans-serif;\n\t--font-body: 'Source Serif 4', serif;\n\t--font-mono: 'IBM Plex Mono', monospace;\n}\n\n* {\n\tbox-sizing: border-box;\n\tmargin: 0;\n\tpadding: 0;\n}\n\nhtml {\n\tscroll-behavior: smooth;\n\toverflow-x: hidden;\n}\n\nbody {\n\tfont-family: var(--font-body);\n\tbackground: var(--bg);\n\tcolor: var(--white);\n\toverflow-x: hidden;\n\tline-height: 1.7;\n}\n\na {\n\tcolor: inherit;\n\ttext-decoration: none;\n}\n\nimg {\n\tdisplay: block;\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n}\n\n/* --- NAV --- */\n.header {\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\tz-index: 100;\n\tpadding: max(1.75rem, env(safe-area-inset-top)) max(3.5rem, env(safe-area-inset-right)) 1.75rem max(3.5rem, env(safe-area-inset-left));\n\ttransition: background 0.5s, padding 0.4s;\n}\n\n.header--scrolled {\n\tbackground: rgba(8, 8, 8, 0.92);\n\tbackdrop-filter: blur(16px);\n\tpadding-top: 1.25rem;\n\tpadding-bottom: 1.25rem;\n\tborder-bottom: 1px solid var(--border);\n}\n\n.nav {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmax-width: 1400px;\n\tmargin: 0 auto;\n}\n\n.nav__logo {\n\tfont-family: var(--font-display);\n\tfont-size: 1.6rem;\n\tletter-spacing: 0.25em;\n\tcolor: var(--gold);\n\ttransition: color 0.3s;\n}\n\n.nav__logo:hover {\n\tcolor: var(--gold-light);\n}\n\n.nav__links {\n\tdisplay: flex;\n\tlist-style: none;\n\tgap: 3rem;\n\talign-items: center;\n}\n\n.nav__links a {\n\tfont-family: var(--font-mono);\n\tfont-size: 0.72rem;\n\ttext-transform: uppercase;\n\tletter-spacing: 0.2em;\n\tcolor: var(--gray-light);\n\ttransition: color 0.3s;\n}\n\n.nav__links a:hover {\n\tcolor: var(--white);\n}\n\n.nav__cta {\n\tbackground: transparent !important;\n\tborder: 1px solid var(--gold) !important;\n\tcolor: var(--gold) !important;\n\tpadding: 0.55rem 1.6rem !important;\n\tborder-radius: 1px;\n\ttransition: background 0.3s, color 0.3s !important;\n\tletter-spacing: 0.2em;\n}\n\n.nav__cta:hover {\n\tbackground: var(--gold) !important;\n\tcolor: var(--black) !important;\n}\n\n.nav__toggle {\n\tdisplay: none;\n\tbackground: none;\n\tborder: none;\n\tcolor: var(--white);\n\tcursor: pointer;\n\tpadding: 4px;\n\tz-index: 200;\n\tposition: relative;\n}\n\n/* --- MOBILE DRAWER --- */\n.nav__drawer {\n\tposition: fixed;\n\ttop: 0;\n\tright: 0;\n\twidth: min(380px, 100vw);\n\theight: 100vh;\n\theight: 100dvh;\n\tbackground: var(--bg);\n\tborder-left: 1px solid var(--border);\n\tz-index: 300;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\tpadding: 3rem 2.5rem;\n\ttransform: translateX(100%);\n\ttransition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);\n}\n\n.nav__drawer.is-open {\n\ttransform: translateX(0);\n}\n\n.nav__drawer-close {\n\tposition: absolute;\n\ttop: 1.75rem;\n\tright: 1.75rem;\n\tbackground: none;\n\tborder: none;\n\tcolor: var(--gray-light);\n\tcursor: pointer;\n\tpadding: 4px;\n\ttransition: color 0.2s;\n}\n\n.nav__drawer-close:hover {\n\tcolor: var(--white);\n}\n\n.nav__drawer-links {\n\tlist-style: none;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 0;\n}\n\n.nav__drawer-links li {\n\tborder-bottom: 1px solid var(--border);\n}\n\n.nav__drawer-links li:first-child {\n\tborder-top: 1px solid var(--border);\n}\n\n.nav__drawer-links a {\n\tdisplay: block;\n\tfont-family: var(--font-display);\n\tfont-size: 2.25rem;\n\tletter-spacing: 0.08em;\n\tpadding: 1rem 0;\n\tcolor: var(--white);\n\ttransition: color 0.25s, padding-left 0.3s;\n}\n\n.nav__drawer-links a:hover {\n\tcolor: var(--gold);\n\tpadding-left: 0.75rem;\n}\n\n.nav__drawer-cta {\n\tcolor: var(--gold) !important;\n}\n\n.nav__drawer-footer {\n\tposition: absolute;\n\tbottom: 2.5rem;\n\tleft: 2.5rem;\n\tfont-family: var(--font-mono);\n\tfont-size: 0.62rem;\n\tletter-spacing: 0.3em;\n\ttext-transform: uppercase;\n\tcolor: var(--gray);\n}\n\n.nav__overlay {\n\tposition: fixed;\n\tinset: 0;\n\tbackground: rgba(0, 0, 0, 0.65);\n\tz-index: 250;\n\topacity: 0;\n\tpointer-events: none;\n\ttransition: opacity 0.4s;\n\tbackdrop-filter: blur(6px);\n}\n\n.nav__overlay.is-open {\n\topacity: 1;\n\tpointer-events: all;\n}\n\n/* --- HERO --- */\n.hero {\n\tposition: relative;\n\tmin-height: 100vh;\n\tdisplay: flex;\n\talign-items: flex-end;\n\tpadding: 6rem max(4rem, env(safe-area-inset-right)) max(7rem, env(safe-area-inset-bottom)) max(4rem, env(safe-area-inset-left));\n\toverflow: hidden;\n}\n\n.hero__bg {\n\tposition: absolute;\n\tinset: 0;\n}\n\n.hero__bg .hero__img {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tscale: 1.05;\n\tanimation: heroZoom 24s ease-in-out infinite alternate;\n\tfilter: saturate(0.7);\n}\n\n@keyframes heroZoom {\n\tto {\n\t\tscale: 1.14;\n\t}\n}\n\n.hero__overlay {\n\tposition: absolute;\n\tinset: 0;\n\tbackground: linear-gradient(to top,\n\t\t\tvar(--bg) 0%,\n\t\t\trgba(8, 8, 8, 0.88) 25%,\n\t\t\trgba(8, 8, 8, 0.45) 60%,\n\t\t\trgba(8, 8, 8, 0.2) 100%);\n}\n\n.hero__content {\n\tposition: relative;\n\tz-index: 2;\n\tmax-width: 960px;\n}\n\n.hero__tag {\n\tfont-family: var(--font-mono);\n\tfont-size: 0.7rem;\n\tletter-spacing: 0.4em;\n\ttext-transform: uppercase;\n\tcolor: var(--gold);\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 1rem;\n\tmargin-bottom: 2rem;\n\topacity: 0;\n\tanimation: fadeUp 0.9s 0.3s forwards;\n}\n\n.hero__tag::before {\n\tcontent: '';\n\tdisplay: block;\n\twidth: 40px;\n\theight: 1px;\n\tbackground: var(--gold);\n\topacity: 0.6;\n}\n\n.hero__title {\n\tfont-family: var(--font-display);\n\tfont-size: clamp(5rem, 14vw, 13rem);\n\tline-height: 0.88;\n\tletter-spacing: 0.02em;\n\tcolor: var(--white);\n\topacity: 0;\n\tanimation: fadeUp 0.9s 0.5s forwards;\n}\n\n.hero__title--outline {\n\t-webkit-text-stroke: 1.5px var(--gold);\n\tcolor: transparent;\n}\n\n.hero__sub {\n\tfont-family: var(--font-body);\n\tfont-size: 1.15rem;\n\tfont-style: italic;\n\tcolor: var(--gray-light);\n\tmargin-top: 2rem;\n\tmax-width: 420px;\n\topacity: 0;\n\tanimation: fadeUp 0.9s 0.7s forwards;\n}\n\n.hero__btn {\n\tdisplay: inline-block;\n\tmargin-top: 3rem;\n\tfont-family: var(--font-mono);\n\tfont-size: 0.72rem;\n\ttext-transform: uppercase;\n\tletter-spacing: 0.25em;\n\tpadding: 1rem 2.75rem;\n\tborder: 1px solid var(--gold);\n\tcolor: var(--gold);\n\ttransition: all 0.4s;\n\topacity: 0;\n\tanimation: fadeUp 0.9s 0.9s forwards;\n}\n\n.hero__btn:hover {\n\tbackground: var(--gold);\n\tcolor: var(--black);\n}\n\n.hero__scroll {\n\tposition: absolute;\n\tbottom: 3.5rem;\n\tright: 4rem;\n\tz-index: 2;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tgap: 0.6rem;\n\tfont-family: var(--font-mono);\n\tfont-size: 0.62rem;\n\tletter-spacing: 0.3em;\n\ttext-transform: uppercase;\n\tcolor: var(--gray);\n\topacity: 0;\n\tanimation: fadeIn 1s 1.6s forwards;\n}\n\n.hero__scroll i {\n\twidth: 14px;\n\theight: 14px;\n\tanimation: bounce 2.5s ease-in-out infinite;\n}\n\n@keyframes bounce {\n\t0%, 100% {\n\t\ttransform: translateY(0);\n\t}\n\n\t50% {\n\t\ttransform: translateY(7px);\n\t}\n}\n\n@keyframes fadeUp {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(28px);\n\t}\n\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n@keyframes fadeIn {\n\tto {\n\t\topacity: 1;\n\t}\n}\n\n/* --- SECTION TAG --- */\n.section-tag {\n\tfont-family: var(--font-mono);\n\tfont-size: 0.68rem;\n\tletter-spacing: 0.35em;\n\ttext-transform: uppercase;\n\tcolor: var(--gold);\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.75rem;\n\tmargin-bottom: 1.25rem;\n}\n\n.section-tag::before {\n\tcontent: '';\n\tdisplay: block;\n\twidth: 28px;\n\theight: 1px;\n\tbackground: var(--gold);\n\topacity: 0.6;\n}\n\n/* --- ABOUT --- */\n.about {\n\tpadding: 9rem max(4rem, env(safe-area-inset-right)) 9rem max(4rem, env(safe-area-inset-left));\n\tbackground: var(--bg);\n}\n\n.about__grid {\n\tmax-width: 1200px;\n\tmargin: 0 auto;\n\tdisplay: grid;\n\tgrid-template-columns: 1fr 1.2fr;\n\tgap: 6rem;\n\talign-items: center;\n}\n\n.about__image-wrap {\n\tposition: relative;\n\tanimation: aboutReveal linear both;\n\tanimation-timeline: view();\n\tanimation-range: entry 0% entry 40%;\n}\n\n@keyframes aboutReveal {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateX(-50px);\n\t}\n\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateX(0);\n\t}\n}\n\n.about__image {\n\tborder-radius: 2px;\n\taspect-ratio: 3/4;\n\tposition: relative;\n\tz-index: 2;\n\tfilter: saturate(0.85);\n}\n\n.about__image-accent {\n\tposition: absolute;\n\ttop: 1.5rem;\n\tleft: -1.25rem;\n\tright: 1.25rem;\n\tbottom: -1.5rem;\n\tborder: 1px solid var(--gold);\n\topacity: 0.4;\n\tborder-radius: 2px;\n\tz-index: 1;\n}\n\n.about__text {\n\tanimation: aboutTextReveal linear both;\n\tanimation-timeline: view();\n\tanimation-range: entry 0% entry 45%;\n}\n\n@keyframes aboutTextReveal {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(35px);\n\t}\n\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n.about__heading {\n\tfont-family: var(--font-display);\n\tfont-size: clamp(2.25rem, 4.5vw, 3.75rem);\n\tline-height: 1.02;\n\tmargin-bottom: 2rem;\n\tcolor: var(--white);\n\tletter-spacing: 0.02em;\n}\n\n.about__text p {\n\tcolor: var(--gray-light);\n\tmargin-bottom: 1.1rem;\n\tfont-size: 1rem;\n\tline-height: 1.8;\n}\n\n.about__stats {\n\tdisplay: flex;\n\tgap: 3rem;\n\tmargin-top: 3rem;\n\tpadding-top: 2.5rem;\n\tborder-top: 1px solid var(--border);\n}\n\n.about__stat-num {\n\tfont-family: var(--font-display);\n\tfont-size: 2.25rem;\n\tcolor: var(--gold);\n\tdisplay: block;\n\tline-height: 1;\n\tmargin-bottom: 0.35rem;\n}\n\n.about__stat-label {\n\tfont-family: var(--font-mono);\n\tfont-size: 0.65rem;\n\tletter-spacing: 0.15em;\n\ttext-transform: uppercase;\n\tcolor: var(--gray);\n}\n\n/* --- MARQUEE --- */\n.marquee {\n\tpadding: 2rem 0;\n\tborder-top: 1px solid var(--border);\n\tborder-bottom: 1px solid var(--border);\n\toverflow: hidden;\n}\n\n.marquee__track {\n\tdisplay: flex;\n\tgap: 3.5rem;\n\twhite-space: nowrap;\n\tanimation: marqueeScroll 28s linear infinite;\n\tfont-family: var(--font-mono);\n\tfont-size: 0.7rem;\n\tletter-spacing: 0.35em;\n\ttext-transform: uppercase;\n\tcolor: var(--gray);\n}\n\n.marquee__track span {\n\tflex-shrink: 0;\n}\n\n@keyframes marqueeScroll {\n\tto {\n\t\ttransform: translateX(-50%);\n\t}\n}\n\n/* --- MENU --- */\n.menu {\n\tpadding: 9rem 0 9rem 0;\n\tbackground: var(--surface);\n}\n\n.menu__header {\n\ttext-align: center;\n\tmargin-bottom: 4.5rem;\n\tpadding: 0 max(4rem, env(safe-area-inset-right)) 0 max(4rem, env(safe-area-inset-left));\n}\n\n.menu__heading {\n\tfont-family: var(--font-display);\n\tfont-size: clamp(3rem, 6vw, 5rem);\n\tcolor: var(--white);\n\tletter-spacing: 0.04em;\n}\n\n.menu__grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(4, 1fr);\n\tgap: 0;\n\tmax-width: 100%;\n\tmargin: 0;\n}\n\n.menu__card {\n\tposition: relative;\n\toverflow: hidden;\n\tcursor: pointer;\n\tanimation: cardReveal linear both;\n\tanimation-timeline: view();\n\tanimation-range: entry 0% entry 35%;\n}\n\n@keyframes cardReveal {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(40px);\n\t}\n\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n.menu__card-img {\n\taspect-ratio: 3/4;\n\toverflow: hidden;\n}\n\n.menu__card-img img {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\ttransition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.8s;\n\tfilter: brightness(0.5) saturate(0.75);\n\ttransform: scale(1.04);\n}\n\n.menu__card:hover .menu__card-img img {\n\ttransform: scale(1.11);\n\tfilter: brightness(0.3) saturate(0.5);\n}\n\n.menu__card-overlay {\n\tposition: absolute;\n\tinset: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\tpadding: 1.75rem;\n\tbackground: linear-gradient(to top,\n\t\t\trgba(8, 8, 8, 0.95) 0%,\n\t\t\trgba(8, 8, 8, 0.15) 55%,\n\t\t\ttransparent 100%);\n\ttransition: background 0.6s;\n}\n\n.menu__card:hover .menu__card-overlay {\n\tbackground: linear-gradient(to top,\n\t\t\trgba(107, 15, 26, 0.9) 0%,\n\t\t\trgba(8, 8, 8, 0.35) 55%,\n\t\t\ttransparent 100%);\n}\n\n.menu__card-num {\n\tfont-family: var(--font-mono);\n\tfont-size: 0.65rem;\n\tletter-spacing: 0.3em;\n\tcolor: var(--gold);\n\topacity: 0.5;\n\talign-self: flex-end;\n\ttransition: opacity 0.3s;\n}\n\n.menu__card:hover .menu__card-num {\n\topacity: 1;\n}\n\n.menu__card-info {\n\ttransform: translateY(10px);\n\ttransition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n.menu__card:hover .menu__card-info {\n\ttransform: translateY(0);\n}\n\n.menu__card-top {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: baseline;\n\tmargin-bottom: 0.5rem;\n\tborder-bottom: 1px solid rgba(184, 150, 90, 0.2);\n\tpadding-bottom: 0.6rem;\n}\n\n.menu__card-top h3 {\n\tfont-family: var(--font-display);\n\tfont-size: clamp(1.3rem, 2.2vw, 1.9rem);\n\tletter-spacing: 0.05em;\n\tcolor: var(--white);\n\tline-height: 1;\n}\n\n.menu__price {\n\tfont-family: var(--font-mono);\n\tfont-size: 0.9rem;\n\tcolor: var(--gold);\n}\n\n.menu__card-info p {\n\tfont-size: 0.8rem;\n\tcolor: rgba(245, 240, 235, 0.6);\n\tline-height: 1.55;\n\tmargin-bottom: 0.85rem;\n\tfont-style: italic;\n}\n\n.menu__card-tags {\n\tlist-style: none;\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 0.35rem;\n\topacity: 0;\n\ttransform: translateY(6px);\n\ttransition: opacity 0.4s 0.1s, transform 0.4s 0.1s;\n}\n\n.menu__card:hover .menu__card-tags {\n\topacity: 1;\n\ttransform: translateY(0);\n}\n\n.menu__card-tags li {\n\tfont-family: var(--font-mono);\n\tfont-size: 0.6rem;\n\tletter-spacing: 0.15em;\n\ttext-transform: uppercase;\n\tpadding: 0.2rem 0.55rem;\n\tborder: 1px solid rgba(184, 150, 90, 0.3);\n\tcolor: var(--gold-light);\n\tborder-radius: 1px;\n}\n\n.menu__footer {\n\ttext-align: center;\n\tmargin-top: 3.5rem;\n\tpadding: 0 max(4rem, env(safe-area-inset-right)) 0 max(4rem, env(safe-area-inset-left));\n}\n\n.menu__btn {\n\tfont-family: var(--font-mono);\n\tfont-size: 0.72rem;\n\ttext-transform: uppercase;\n\tletter-spacing: 0.2em;\n\tcolor: var(--gold);\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 0.6rem;\n\tpadding: 0.75rem 0;\n\tborder-bottom: 1px solid rgba(184, 150, 90, 0.4);\n\ttransition: gap 0.3s, color 0.3s, border-color 0.3s;\n}\n\n.menu__btn:hover {\n\tgap: 1.1rem;\n\tcolor: var(--gold-light);\n\tborder-color: var(--gold-light);\n}\n\n.menu__btn i {\n\twidth: 14px;\n\theight: 14px;\n}\n\n/* --- CTA BANNER --- */\n.cta-banner {\n\tposition: relative;\n\tpadding: 9rem max(4rem, env(safe-area-inset-right)) 9rem max(4rem, env(safe-area-inset-left));\n\ttext-align: center;\n\toverflow: hidden;\n}\n\n.cta-banner__bg {\n\tposition: absolute;\n\tinset: 0;\n}\n\n.cta-banner__bg img {\n\tfilter: saturate(0.4);\n}\n\n.cta-banner__overlay {\n\tposition: absolute;\n\tinset: 0;\n\tbackground: rgba(8, 8, 8, 0.78);\n\tbackdrop-filter: brightness(0.6);\n}\n\n.cta-banner__content {\n\tposition: relative;\n\tz-index: 2;\n\tmax-width: 580px;\n\tmargin: 0 auto;\n\tanimation: bannerReveal linear both;\n\tanimation-timeline: view();\n\tanimation-range: entry 0% entry 40%;\n}\n\n@keyframes bannerReveal {\n\tfrom {\n\t\topacity: 0;\n\t\tscale: 0.97;\n\t}\n\n\tto {\n\t\topacity: 1;\n\t\tscale: 1;\n\t}\n}\n\n.cta-banner__content h2 {\n\tfont-family: var(--font-display);\n\tfont-size: clamp(2.5rem, 5vw, 4.25rem);\n\tline-height: 1.0;\n\tmargin-bottom: 1.5rem;\n\tletter-spacing: 0.04em;\n}\n\n.cta-banner__content p {\n\tfont-family: var(--font-body);\n\tfont-size: 1.05rem;\n\tfont-style: italic;\n\tcolor: var(--gray-light);\n\tmargin-bottom: 2.75rem;\n}\n\n.cta-banner__btn {\n\tdisplay: inline-block;\n\tfont-family: var(--font-mono);\n\tfont-size: 0.72rem;\n\ttext-transform: uppercase;\n\tletter-spacing: 0.25em;\n\tpadding: 1rem 2.75rem;\n\tborder: 1px solid var(--gold);\n\tcolor: var(--gold);\n\ttransition: all 0.35s;\n}\n\n.cta-banner__btn:hover {\n\tbackground: var(--gold);\n\tcolor: var(--black);\n}\n\n/* --- HOURS --- */\n.hours {\n\tpadding: 9rem max(4rem, env(safe-area-inset-right)) 9rem max(4rem, env(safe-area-inset-left));\n\tbackground: var(--bg);\n}\n\n.hours__grid {\n\tmax-width: 1150px;\n\tmargin: 0 auto;\n\tdisplay: grid;\n\tgrid-template-columns: 1.2fr 1fr;\n\tgap: 6rem;\n}\n\n.hours__heading {\n\tfont-family: var(--font-display);\n\tfont-size: clamp(2.5rem, 5vw, 4rem);\n\tline-height: 1.0;\n\tmargin-bottom: 3rem;\n\tletter-spacing: 0.03em;\n}\n\n.hours__dot {\n\tcolor: var(--gold);\n}\n\n.hours__schedule {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 0;\n}\n\n.hours__row {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 1rem;\n\tfont-family: var(--font-mono);\n\tfont-size: 0.78rem;\n\tletter-spacing: 0.08em;\n\tpadding: 1.1rem 0;\n\tborder-bottom: 1px solid var(--border);\n\tcolor: var(--gray-light);\n}\n\n.hours__row:first-child {\n\tborder-top: 1px solid var(--border);\n}\n\n.hours__dash {\n\tflex: 1;\n\theight: 1px;\n\tbackground: var(--border);\n}\n\n.hours__info {\n\tanimation: hoursReveal linear both;\n\tanimation-timeline: view();\n\tanimation-range: entry 0% entry 40%;\n}\n\n@keyframes hoursReveal {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateX(-35px);\n\t}\n\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateX(0);\n\t}\n}\n\n.hours__location {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2.25rem;\n\tjustify-content: center;\n\tanimation: locationReveal linear both;\n\tanimation-timeline: view();\n\tanimation-range: entry 0% entry 40%;\n}\n\n@keyframes locationReveal {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateX(35px);\n\t}\n\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateX(0);\n\t}\n}\n\n.hours__address {\n\tdisplay: flex;\n\tgap: 1.25rem;\n\talign-items: flex-start;\n}\n\n.hours__address i {\n\twidth: 18px;\n\theight: 18px;\n\tcolor: var(--gold);\n\tflex-shrink: 0;\n\tmargin-top: 3px;\n\topacity: 0.8;\n}\n\n.hours__address strong {\n\tcolor: var(--white);\n\tfont-weight: 600;\n}\n\n.hours__address div {\n\tcolor: var(--gray-light);\n\tfont-size: 0.92rem;\n\tline-height: 1.7;\n}\n\n.hours__socials {\n\tdisplay: flex;\n\tgap: 1rem;\n\tmargin-top: 0.5rem;\n}\n\n.hours__socials a {\n\twidth: 42px;\n\theight: 42px;\n\tborder: 1px solid var(--border);\n\tborder-radius: 50%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\ttransition: all 0.3s;\n\tcolor: var(--gray-light);\n}\n\n.hours__socials a:hover {\n\tborder-color: var(--gold);\n\tcolor: var(--gold);\n\tbackground: rgba(184, 150, 90, 0.08);\n}\n\n.hours__socials i {\n\twidth: 16px;\n\theight: 16px;\n}\n\n/* --- FOOTER --- */\n.footer {\n\tborder-top: 1px solid var(--border);\n\tpadding: 2.5rem max(4rem, env(safe-area-inset-right)) max(2.5rem, env(safe-area-inset-bottom)) max(4rem, env(safe-area-inset-left));\n\tbackground: var(--bg);\n}\n\n.footer__inner {\n\tmax-width: 1400px;\n\tmargin: 0 auto;\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n}\n\n.footer__logo {\n\tfont-family: var(--font-display);\n\tfont-size: 1.25rem;\n\tletter-spacing: 0.3em;\n\tcolor: var(--gold);\n\topacity: 0.7;\n}\n\n.footer__copy {\n\tfont-family: var(--font-mono);\n\tfont-size: 0.65rem;\n\tletter-spacing: 0.12em;\n\tcolor: var(--gray);\n}\n\n/* --- RESPONSIVE --- */\n@media (max-width: 1024px) {\n\t.menu__grid {\n\t\tgrid-template-columns: repeat(2, 1fr);\n\t}\n\n\t.menu__card-img {\n\t\taspect-ratio: 4/5;\n\t}\n}\n\n@media (max-width: 768px) {\n\t.header {\n\t\tpadding: max(1rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) 1rem max(1.5rem, env(safe-area-inset-left));\n\t}\n\n\t.nav__links {\n\t\tdisplay: none;\n\t}\n\n\t.nav__toggle {\n\t\tdisplay: block;\n\t}\n\n\t.hero {\n\t\tpadding: 4rem max(1.5rem, env(safe-area-inset-right)) max(5rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));\n\t}\n\n\t.hero__scroll {\n\t\tdisplay: none;\n\t}\n\n\t.about {\n\t\tpadding: 6rem max(1.5rem, env(safe-area-inset-right)) 6rem max(1.5rem, env(safe-area-inset-left));\n\t}\n\n\t.about__grid {\n\t\tgrid-template-columns: 1fr;\n\t\tgap: 3.5rem;\n\t}\n\n\t.menu {\n\t\tpadding: 6rem 0 6rem 0;\n\t}\n\n\t.menu__header {\n\t\tpadding: 0 1.5rem;\n\t}\n\n\t.menu__footer {\n\t\tpadding: 0 1.5rem;\n\t}\n\n\t.menu__grid {\n\t\tgrid-template-columns: 1fr 1fr;\n\t}\n\n\t.menu__card-img {\n\t\taspect-ratio: 3/4;\n\t}\n\n\t.menu__card-tags {\n\t\tdisplay: none;\n\t}\n\n\t.menu__card-info {\n\t\ttransform: none;\n\t}\n\n\t.cta-banner {\n\t\tpadding: 6rem max(1.5rem, env(safe-area-inset-right)) 6rem max(1.5rem, env(safe-area-inset-left));\n\t}\n\n\t.hours {\n\t\tpadding: 6rem max(1.5rem, env(safe-area-inset-right)) 6rem max(1.5rem, env(safe-area-inset-left));\n\t}\n\n\t.hours__grid {\n\t\tgrid-template-columns: 1fr;\n\t\tgap: 3.5rem;\n\t}\n\n\t.about__stats {\n\t\tgap: 2rem;\n\t}\n\n\t.footer__inner {\n\t\tflex-direction: column;\n\t\tgap: 1rem;\n\t\ttext-align: center;\n\t}\n}"}],"folders":[]},"variants":null,"createdAt":"2026-02-12T22:39:44.298Z","updatedAt":"2026-03-05T13:27:38.825Z","hasThumbnail":true}}