:root { --forest: #18362f; --ink: #1f2a26; --cream: #f5f1e9; --card: #fffdf8; --paper: #fbfaf7; --sage: #d8e1d6; --yellow: #FFDF00; --line: #d9ddd5; --serif: 'Fraunces', Georgia, serif; --sans: 'DM Sans', sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
button { border: 0; cursor: pointer; font: inherit; }
.site-header { align-items: center; background: rgba(251,250,247,.94); display: flex; height: 84px; justify-content: space-between; padding: 0 6vw; position: relative; z-index: 5; }
.brand { align-items: center; display: flex; gap: 11px; }.brand-mark { display: block; height: 41px; object-fit: cover; width: 41px; }.brand strong { display: block; font-size: 12px; letter-spacing: 2px; }.brand small { color: #78847d; display: block; font-size: 7px; letter-spacing: 1.5px; margin-top: 4px; }.main-nav { display: flex; gap: 35px; margin-left: 60px; }.main-nav a { color: #68736d; font-size: 12px; }.main-nav a:hover, .text-link:hover { color: var(--yellow); }.cart-button { align-items: center; background: transparent; color: var(--forest); display: flex; font-size: 12px; gap: 9px; }.cart-button svg { height: 17px; width: 17px; }.cart-button b { align-items: center; background: var(--yellow); border-radius: 50%; color: var(--forest); display: flex; font-size: 10px; height: 20px; justify-content: center; width: 20px; }
.hero { background: var(--forest); color: #f7f3ea; display: grid; grid-template-columns: 1fr 1.1fr; min-height: 620px; overflow: hidden; position: relative; }.hero-copy { align-self: center; padding: 70px 8vw; position: relative; z-index: 1; }.eyebrow { align-items: center; color: #a9b7aa; display: flex; font-size: 10px; letter-spacing: 1.8px; margin: 0 0 24px; text-transform: uppercase; }.eyebrow span { background: var(--yellow); display: inline-block; height: 7px; margin-right: 11px; width: 7px; }.hero h1 { font-family: var(--serif); font-size: clamp(55px, 6vw, 92px); font-weight: 500; letter-spacing: -2px; line-height: .98; margin: 0; max-width: 600px; }.hero h1 em, h2 em { color: var(--yellow); font-style: italic; }.hero-text { color: #c2cec3; font-size: 15px; line-height: 1.7; margin: 28px 0 36px; max-width: 320px; }.primary-button { align-items: center; background: var(--yellow); color: var(--forest); display: inline-flex; font-size: 11px; font-weight: 700; gap: 28px; padding: 16px 18px; text-transform: uppercase; letter-spacing: .7px; }.primary-button svg { height: 16px; }.hero-photo { background: linear-gradient(90deg, rgba(24,54,47,.2), transparent), url('Hero section.webp') center/cover; min-height: 620px; }.hero-note { align-items: center; background: rgba(251,250,247,.93); bottom: 45px; color: var(--forest); display: flex; gap: 12px; padding: 14px 18px; position: absolute; right: 6vw; }.hero-note svg { color: var(--yellow); height: 20px; }.hero-note span { font-size: 10px; line-height: 1.7; }.hero-note strong { display: block; font-size: 11px; }.hero-stamp { align-items: center; border: 1px solid rgba(255,255,255,.35); bottom: 40px; display: flex; flex-direction: column; gap: 3px; height: 95px; justify-content: center; left: 5vw; position: absolute; width: 95px; }.hero-stamp span { font-size: 8px; letter-spacing: 2px; }.hero-stamp strong { font-family: var(--serif); font-size: 26px; font-weight: 500; }
.intro-band { background: var(--cream); display: grid; gap: 40px; grid-template-columns: 1fr 1.2fr 1fr; padding: 105px 8vw; }.section-kicker { color: #8a948c; font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; }.intro-band h2, .menu-heading h2 { color: var(--forest); font-family: var(--serif); font-size: clamp(39px, 4vw, 58px); font-weight: 500; letter-spacing: -1px; line-height: 1.02; margin: 0; }.intro-band h2 em, .menu-heading h2 em { color: var(--yellow); }.intro-copy { align-self: end; max-width: 310px; }.intro-copy p, .menu-description { color: #64716a; font-size: 13px; line-height: 1.8; margin: 0 0 23px; }.text-link { align-items: center; border-bottom: 1px solid #b5c1b6; color: var(--forest); display: inline-flex; font-size: 11px; font-weight: 700; gap: 12px; padding-bottom: 7px; text-transform: uppercase; }.text-link svg { height: 14px; width: 14px; }
.menu-section { padding: 105px 8vw 120px; }.menu-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 58px; }.menu-heading .eyebrow { color: #8a948c; margin-bottom: 22px; }.menu-description { max-width: 245px; }.section-tabs { background: var(--forest); display: inline-flex; gap: 4px; margin-bottom: 30px; padding: 5px; }.section-tab { background: transparent; color: #b7c7b8; font-family: var(--serif); font-size: 20px; padding: 13px 30px; }.section-tab span { color: #7d9885; font-family: var(--sans); font-size: 10px; margin-left: 7px; vertical-align: middle; }.section-tab.active { background: var(--yellow); color: var(--forest); }.section-tab.active span { color: var(--forest); }.category-bar { border-bottom: 1px solid var(--line); display: flex; gap: 32px; margin-bottom: 36px; overflow-x: auto; }.category { background: transparent; color: #829087; font-size: 12px; padding: 0 0 16px; white-space: nowrap; }.category span { color: #adb6af; font-size: 10px; margin-left: 5px; }.category.active { border-bottom: 2px solid var(--yellow); color: var(--forest); font-weight: 700; }.menu-grid { display: grid; gap: 25px; grid-template-columns: repeat(3, 1fr); }.menu-card { background: var(--card); min-width: 0; transition: transform .25s ease; }.menu-card:hover { transform: translateY(-4px); }.card-image { aspect-ratio: 1.35; overflow: hidden; position: relative; }.card-image img { height: 100%; object-fit: cover; transition: transform .5s ease; width: 100%; }.menu-card:hover img { transform: scale(1.04); }.card-tag { background: var(--yellow); color: var(--forest); font-size: 9px; left: 14px; letter-spacing: 1px; padding: 7px 9px; position: absolute; text-transform: uppercase; top: 14px; }.card-content { padding: 20px 20px 19px; }.card-category { color: var(--yellow); font-size: 9px; letter-spacing: 1.3px; margin: 0 0 8px; text-transform: uppercase; }.card-content h3 { color: var(--forest); font-family: var(--serif); font-size: 22px; font-weight: 500; margin: 0; }.card-description { color: #78847d; font-size: 12px; line-height: 1.6; margin: 14px 0 21px; min-height: 38px; }.card-action { align-items: center; border-top: 1px solid #d9ded7; display: flex; justify-content: space-between; padding-top: 15px; }.card-action strong { color: var(--forest); font-size: 13px; }.add-button { align-items: center; background: var(--forest); color: white; display: flex; height: 31px; justify-content: center; transition: background .2s; width: 31px; }.add-button:hover { background: var(--yellow); color: var(--forest); }.add-button svg { height: 17px; }
.service-band { background: #dce5db; display: grid; grid-template-columns: repeat(3,1fr); padding: 39px 8vw; }.service-item { align-items: center; border-right: 1px solid rgba(24,54,47,.17); display: flex; gap: 17px; padding-left: 27px; }.service-item:first-child { padding-left: 0; }.service-item:last-child { border: 0; }.service-item svg { color: var(--yellow); height: 22px; width: 22px; }.service-item strong, .service-item span { display: block; }.service-item strong { color: var(--forest); font-family: var(--serif); font-size: 16px; font-weight: 500; }.service-item span { color: #718078; font-size: 10px; margin-top: 6px; }
footer { background: var(--forest); color: #eef0e9; display: grid; grid-template-columns: 1.3fr 1fr; padding: 80px 8vw 30px; }.footer-brand h2 { font-family: var(--serif); font-size: 44px; font-weight: 500; margin: 24px 0 5px; }.footer-brand p, .footer-detail p { color: #a5b4a7; font-size: 12px; line-height: 1.7; }.footer-detail { align-self: end; }.footer-detail .text-link { border-color: #60756a; color: #e1e8dc; }.footer-bottom { border-top: 1px solid #345249; color: #8ca092; display: flex; font-size: 10px; justify-content: space-between; grid-column: 1/-1; margin-top: 70px; padding-top: 19px; }
.cart-drawer { background: var(--paper); box-shadow: -8px 0 30px rgba(10,30,24,.16); display: flex; flex-direction: column; height: 100vh; max-width: 410px; position: fixed; right: 0; top: 0; transform: translateX(105%); transition: transform .35s ease; width: 100%; z-index: 20; }.cart-drawer.open { transform: translateX(0); }.scrim { background: rgba(10,25,20,.45); inset: 0; opacity: 0; pointer-events: none; position: fixed; transition: opacity .3s; z-index: 15; }.scrim.visible { opacity: 1; pointer-events: auto; }.drawer-head { align-items: start; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 36px 30px 25px; }.drawer-head .eyebrow { color: #89948d; margin-bottom: 13px; }.drawer-head h2 { color: var(--forest); font-family: var(--serif); font-size: 34px; font-weight: 500; margin: 0; }.icon-button { background: transparent; color: var(--forest); padding: 5px; }.cart-items { flex: 1; overflow-y: auto; padding: 12px 30px; }.empty-cart { align-items: center; color: #8b988e; display: flex; flex-direction: column; font-family: var(--serif); font-size: 17px; justify-content: center; height: 100%; line-height: 1.5; text-align: center; }.empty-cart svg { color: var(--yellow); height: 28px; margin-bottom: 15px; }.empty-cart p { margin: 0 0 18px; }.empty-cart a { color: var(--forest); font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }.cart-line { align-items: start; border-bottom: 1px solid var(--line); display: flex; gap: 12px; padding: 17px 0; }.cart-line img { height: 65px; object-fit: cover; width: 65px; }.cart-line-info { flex: 1; }.cart-line-info strong { color: var(--forest); display: block; font-family: var(--serif); font-size: 16px; font-weight: 500; margin: 2px 0 4px; }.cart-line-info > span { color: #88948c; font-size: 11px; }.quantity { align-items: center; display: flex; gap: 11px; margin-top: 11px; }.quantity button { background: #e5ebe3; color: var(--forest); height: 21px; width: 21px; }.quantity span { font-size: 11px; }.remove-item { background: transparent; color: #9ca79f; padding: 3px; }.remove-item svg { height: 14px; }.cart-footer { border-top: 1px solid var(--line); padding: 22px 30px 25px; }.total-row { align-items: center; color: #7b887f; display: flex; font-size: 12px; justify-content: space-between; margin-bottom: 18px; }.total-row strong { color: var(--forest); font-family: var(--serif); font-size: 22px; font-weight: 500; }.whatsapp-button { align-items: center; background: #258a54; color: white; display: flex; font-size: 11px; font-weight: 700; gap: 10px; justify-content: center; padding: 16px; text-transform: uppercase; width: 100%; }.whatsapp-button svg { height: 16px; }.cart-footer small { color: #9ca79f; display: block; font-size: 10px; margin-top: 11px; text-align: center; }.toast { align-items: center; background: var(--forest); bottom: 25px; color: #fff; display: flex; font-size: 12px; gap: 9px; left: 50%; opacity: 0; padding: 13px 18px; pointer-events: none; position: fixed; transform: translate(-50%, 20px); transition: all .25s ease; z-index: 30; }.toast.show { opacity: 1; transform: translate(-50%, 0); }.toast svg { color: var(--yellow); height: 15px; }
@media (max-width: 760px) { .site-header { height: 70px; padding: 0 5vw; }.main-nav { display: none; }.brand strong { font-size: 11px; }.cart-button span { display: none; }.hero { display: block; min-height: auto; }.hero-copy { padding: 72px 9vw 220px; }.hero h1 { font-size: 58px; }.hero-photo { height: 270px; min-height: 0; }.hero-stamp { bottom: 28px; left: 8vw; }.hero-note { bottom: 28px; right: 8vw; }.intro-band { display: block; padding: 72px 9vw; }.section-kicker { margin-bottom: 35px; }.intro-band h2 { margin-bottom: 35px; }.intro-copy { max-width: none; }.menu-section { padding: 75px 5vw 85px; }.menu-heading { align-items: start; display: block; margin-bottom: 39px; }.menu-description { margin-top: 28px; max-width: 300px; }.category-bar { gap: 23px; margin-left: 0; }.menu-grid { gap: 18px; grid-template-columns: repeat(2, minmax(0,1fr)); }.card-image { aspect-ratio: 1; }.card-content { padding: 15px 13px 14px; }.card-content h3 { font-size: 17px; }.card-description { font-size: 11px; margin: 10px 0 15px; min-height: 53px; }.card-action { padding-top: 11px; }.card-action strong { font-size: 11px; }.service-band { display: block; padding: 15px 9vw; }.service-item, .service-item:first-child { border-bottom: 1px solid rgba(24,54,47,.17); border-right: 0; padding: 18px 0; }.service-item:last-child { border-bottom: 0; }.footer { padding-top: 65px; }.footer-brand h2 { font-size: 38px; }.footer-detail { margin-top: 35px; }.footer-bottom { align-items: start; flex-direction: column; gap: 9px; margin-top: 55px; }.drawer-head, .cart-items, .cart-footer { padding-left: 22px; padding-right: 22px; } }
@media (max-width: 390px) { .hero h1 { font-size: 48px; }.menu-grid { grid-template-columns: 1fr; }.card-image { aspect-ratio: 1.45; }.card-description { min-height: 0; } }