@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:400 800; font-display:swap; src:url('/fonts/PlayfairDisplay.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family:'Playfair Display'; font-style:italic; font-weight:400 800; font-display:swap; src:url('/fonts/PlayfairDisplay-Italic.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family:'Inter'; font-style:normal; font-weight:300 600; font-display:swap; src:url('/fonts/Inter.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --red: #C8202A; --red2: #9B1620; --gold: #F4DA8A; --gold2: #EFC85A; --cream: #FFFDF9; --warm: #F7EDDB; --brown: #5E1A1A; --text: #33181A; --muted: #8A5A52; } html { scroll-behavior: smooth; scroll-padding-top: 80px; } body { font-family: 'Inter', sans-serif; background: var(--cream); color: var(--text); } a:focus-visible, button:focus-visible { outline: 2px solid var(--gold2); outline-offset: 3px; border-radius: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .reveal.in-view { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } header { position: fixed; top: 0; width: 100%; z-index: 100; background: rgba(94,26,26,0.96); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; height: 70px; border-bottom: 2px solid var(--gold); transition: height 0.3s, box-shadow 0.3s; } .logo { display: inline-flex; align-items: center; background: var(--cream); border-radius: 10px; padding: 5px 13px; box-shadow: 0 3px 14px rgba(0,0,0,0.30); } .logo a, .logo picture { display: inline-flex; } .logo img { height: 34px; width: auto; object-fit: contain; display: block; transition: height 0.25s; } header.scrolled .logo img { height: 29px; } nav { display: flex; gap: 2rem; align-items: center; } nav a { color: var(--warm); text-decoration: none; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; transition: color 0.2s; position: relative; } nav a:hover { color: var(--gold2); } nav a:not(.btn-order)::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 100%; height: 2px; background: var(--gold2); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; } nav a:not(.btn-order):hover::after, nav a.active-link::after { transform: scaleX(1); } nav a.active-link { color: var(--gold2); } .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; z-index: 110; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--warm); margin: 5px 0; border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; } .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } #back-to-top { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 90; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; background: var(--red); color: #fff; font-size: 1.1rem; box-shadow: 0 4px 16px rgba(44,24,16,0.3); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity 0.3s, transform 0.3s, background 0.2s; display: flex; align-items: center; justify-content: center; } #back-to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); } #back-to-top:hover { background: var(--red2); } .btn-order { background: var(--gold); color: var(--brown) !important; padding: 0.5rem 1.25rem; border-radius: 4px; font-weight: 600 !important; transition: background 0.2s !important; } .btn-order:hover { background: var(--gold2) !important; } #lang-toggle { background: transparent; border: 1.5px solid var(--gold); color: var(--cream); font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.35rem 0.9rem; border-radius: 20px; cursor: pointer; transition: background 0.2s, color 0.2s; display: inline-block; text-decoration: none; line-height: 1.2; } #lang-toggle:hover { background: var(--gold); color: var(--brown); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--brown); color: var(--cream); padding: 0.6rem 1rem; text-decoration: none; border-radius: 0 0 6px 0; } .skip-link:focus { left: 0; } .inka-form { display: flex; flex-direction: column; gap: 1rem; } .inka-form label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; color: var(--brown); text-align: left; } .inka-form input, .inka-form textarea { font-family: 'Inter', sans-serif; font-size: 1rem; padding: 0.7rem 0.9rem; border: 1.5px solid rgba(94,26,26,0.18); border-radius: 8px; background: #fff; color: var(--text); width: 100%; } .inka-form input:focus, .inka-form textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(200,32,42,0.12); } .inka-form .form-row { display: flex; gap: 1rem; } .inka-form .form-row label { flex: 1; } .inka-form button[type="submit"] { margin-top: 0.4rem; border: none; cursor: pointer; font-size: 1.05rem; } .inka-form .form-alt { text-align: center; margin: 0.6rem 0 0; font-size: 0.9rem; } .inka-form .form-alt a { color: var(--muted); text-decoration: none; } @media (max-width: 480px) { .inka-form .form-row { flex-direction: column; } } #home { position: relative; height: 100vh; min-height: 600px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; } #home .bg { position: absolute; inset: 0; background-image: url('/img/hero.jpg'); background-image: -webkit-image-set(url('/img/hero.webp') type('image/webp'), url('/img/hero.jpg') type('image/jpeg')); background-image: image-set(url('/img/hero.webp') type('image/webp'), url('/img/hero.jpg') type('image/jpeg')); background-size: cover; background-position: center; filter: brightness(0.45); } #home .overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(94,26,26,0.35) 0%, rgba(94,26,26,0.78) 100%); } #home .content { position: relative; z-index: 2; padding: 1rem; max-width: 720px; } .hero-eyebrow { font-size: 0.8rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold2); margin-bottom: 1rem; font-weight: 600; } #home h1 { font-family: 'Playfair Display', serif; font-size: clamp(2.5rem, 6vw, 5rem); color: #fff; line-height: 1.1; margin-bottom: 1rem; } #home h1 span { color: var(--gold2); } #home p { color: rgba(255,255,255,0.85); font-size: 1.1rem; line-height: 1.7; margin-bottom: 2rem; } .hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .btn-primary { background: var(--red); color: var(--cream); padding: 0.85rem 2rem; border-radius: 4px; text-decoration: none; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.05em; transition: background 0.2s, transform 0.15s; } .btn-primary:hover { background: var(--red2); transform: translateY(-1px); } .btn-outline { border: 2px solid rgba(255,255,255,0.7); color: #fff; padding: 0.85rem 2rem; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.05em; transition: border-color 0.2s, background 0.2s; } .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.1); } .scroll-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.5); font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .scroll-arrow { width: 20px; height: 20px; border-right: 2px solid rgba(255,255,255,0.4); border-bottom: 2px solid rgba(255,255,255,0.4); transform: rotate(45deg); animation: bounce 1.5s infinite; } @keyframes bounce { 0%,100%{transform:rotate(45deg) translateY(0)} 50%{transform:rotate(45deg) translateY(5px)} } section { padding: 5rem 2rem; } .section-label { font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--red); font-weight: 600; margin-bottom: 0.5rem; } .section-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4vw, 3rem); color: var(--brown); margin-bottom: 1rem; line-height: 1.2; } .section-subtitle { color: var(--muted); font-size: 1.05rem; line-height: 1.7; max-width: 560px; } .section-header { margin-bottom: 3rem; } .section-header.centered { text-align: center; } .section-header.centered .section-subtitle { margin: 0 auto; } .divider { width: 60px; height: 3px; background: var(--red); margin: 1rem 0 1.5rem; } .divider.centered { margin: 1rem auto 1.5rem; } #about { background: var(--brown); } .about-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .about-img { border-radius: 8px; overflow: hidden; position: relative; } .about-img img { width: 100%; height: 450px; object-fit: cover; display: block; position: relative; z-index: 1; } .about-img::before { content: ''; position: absolute; inset: -8px -8px 8px 8px; border: 2px solid var(--gold); border-radius: 8px; z-index: 0; pointer-events: none; } .about-text .section-label { color: var(--gold2); } .about-text .section-title { color: var(--cream); } .about-text .section-subtitle { color: rgba(245,230,200,0.8); max-width: 100%; } .about-text .divider { background: var(--gold2); } .about-features { display: flex; gap: 2rem; margin-top: 2rem; flex-wrap: wrap; } .about-feat .num { font-family: 'Playfair Display', serif; font-size: 2.5rem; color: var(--gold2); } .about-feat .lbl { font-size: 0.8rem; color: rgba(245,230,200,0.7); text-transform: uppercase; letter-spacing: 0.1em; } #menu { background: var(--cream); } .menu-inner { max-width: 1100px; margin: 0 auto; } .menu-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; } .tab-btn { background: none; border: 1.5px solid #d0b896; padding: 0.5rem 1.1rem; border-radius: 25px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); cursor: pointer; transition: all 0.2s; } .tab-btn:hover { border-color: var(--red); color: var(--red); } .tab-btn.active { background: var(--red); border-color: var(--red); color: #fff; } .menu-section { display: none; } .menu-section.visible { display: block; animation: tabFadeIn 0.4s ease both; } @keyframes tabFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } .menu-item { background: #fff; border-radius: 8px; padding: 1rem 1.25rem; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border: 1px solid #eddfc8; transition: box-shadow 0.2s, border-color 0.2s; cursor: default; position: relative; } .menu-item.has-img { cursor: pointer; } .menu-item.has-img:hover { box-shadow: 0 4px 16px rgba(44,24,16,0.15); border-color: var(--gold); } .item-name { font-weight: 600; font-size: 0.95rem; color: var(--brown); line-height: 1.3; } .item-desc { font-size: 0.8rem; color: var(--muted); margin-top: 0.2rem; } .item-price { font-weight: 700; color: var(--red); font-size: 0.95rem; white-space: nowrap; } .item-hint { font-size: 0.7rem; color: var(--red); margin-top: 0.25rem; opacity: 0.8; } .chicken-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .chicken-card { background: var(--red); border-radius: 10px; padding: 1.25rem; text-align: center; color: #fff; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .chicken-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(139,26,26,0.4); } .chicken-card .c-name { font-family: 'Playfair Display', serif; font-size: 1.1rem; margin-bottom: 0.25rem; } .chicken-card .c-sub { font-size: 0.78rem; opacity: 0.8; margin-bottom: 0.75rem; } .chicken-card .c-price { font-size: 1.5rem; font-weight: 700; color: var(--gold2); } #dish-popup { position: fixed; z-index: 999; background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), 0 4px 16px rgba(0,0,0,0.15); width: 360px; max-width: 92vw; overflow: hidden; opacity: 0; pointer-events: none; transform-origin: top center; transform: scaleY(0.85) translateY(-8px); transition: opacity 0.22s ease, transform 0.22s ease; border: 1px solid #eddfc8; } #dish-popup.visible { opacity: 1; pointer-events: auto; transform: scaleY(1) translateY(0); } #dish-popup.open-up { transform-origin: bottom center; transform: scaleY(0.85) translateY(8px); } #dish-popup.open-up.visible { transform: scaleY(1) translateY(0); } .popup-img-wrap { width: 100%; height: 200px; background: var(--warm); position: relative; overflow: hidden; } .popup-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s ease; } .popup-img-wrap img.loading { opacity: 0; } .bev-active { position: relative; } .bev-active::before { content: ''; position: absolute; inset: 0; background-image: var(--bev-url, none); background-size: cover; background-position: center; opacity: 0.07; z-index: 0; pointer-events: none; border-radius: inherit; } .bev-active .menu-grid { position: relative; z-index: 1; } .popup-img-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--warm) url('/img/icons/plate.png?v=2') center/38% no-repeat; } .popup-body { padding: 1rem 1.25rem 1.25rem; } .popup-name { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--brown); margin-bottom: 0.2rem; } .popup-price { font-size: 0.85rem; color: var(--red); font-weight: 700; margin-bottom: 0.6rem; } .popup-desc { font-size: 0.82rem; color: var(--muted); line-height: 1.6; } .popup-close { position: absolute; top: 0.5rem; right: 0.6rem; background: rgba(0,0,0,0.5); color: #fff; border: none; border-radius: 50%; width: 26px; height: 26px; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; z-index: 10; } #popup-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 998; opacity: 0; pointer-events: none; transition: opacity 0.2s; } #popup-backdrop.visible { opacity: 1; pointer-events: auto; } .address-link { cursor: pointer; color: var(--muted); text-decoration: none; border-bottom: 1px dashed var(--gold); transition: color 0.2s; display: inline; } .address-link:hover { color: var(--red); } .maps-popup-wrap { position: relative; display: inline; } .maps-popup { position: absolute; left: 0; top: calc(100% + 8px); background: #fff; border: 1.5px solid #eddfc8; border-radius: 10px; box-shadow: 0 8px 28px rgba(44,24,16,0.18); padding: 0.6rem; display: flex; flex-direction: column; gap: 0.35rem; z-index: 200; min-width: 190px; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 0.18s, transform 0.18s; } .maps-popup.open { opacity: 1; pointer-events: auto; transform: translateY(0); } .maps-btn { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; border-radius: 7px; text-decoration: none; font-size: 0.85rem; font-weight: 600; color: var(--brown); transition: background 0.15s; white-space: nowrap; } .maps-btn:hover { background: var(--warm); } .maps-icon { width: 22px; height: 22px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; color: #fff; flex-shrink: 0; } .brand-ico { display: inline-block; height: 1em; width: auto; vertical-align: -0.14em; } .maps-icon .brand-ico { height: 15px; width: 15px; vertical-align: middle; } #contact { background: var(--warm); } .contact-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; } .info-block { margin-bottom: 1.75rem; } .info-block h4 { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--brown); margin-bottom: 0.4rem; } .info-block p, .info-block a { font-size: 0.95rem; color: var(--muted); line-height: 1.6; text-decoration: none; } .info-block a:hover { color: var(--red); } .hours-table { width: 100%; border-collapse: collapse; margin-top: 0.25rem; } .hours-table td { padding: 0.3rem 0; font-size: 0.9rem; color: var(--muted); } .hours-table td:first-child { font-weight: 600; color: var(--brown); padding-right: 1rem; } .hours-table tr.closed td { opacity: 0.45; } .social-links { display: flex; gap: 1rem; margin-top: 0.5rem; } .social-links a { background: var(--brown); color: var(--cream); width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background 0.2s; font-size: 0.9rem; } .social-links a:hover { background: var(--red); } .map-wrap { border-radius: 10px; overflow: hidden; height: 100%; min-height: 380px; border: 2px solid #d0b896; } .map-wrap iframe { width: 100%; height: 100%; border: none; } #order { background: var(--cream); } .order-inner { max-width: 960px; margin: 0 auto; } .order-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 0; } .delivery-cards { display: flex; flex-direction: column; gap: 1rem; } .delivery-card { display: flex; align-items: center; gap: 1.25rem; background: #fff; border: 1.5px solid #eddfc8; border-radius: 10px; padding: 1.25rem 1.5rem; text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; } .delivery-card:hover { border-color: var(--gold); box-shadow: 0 4px 20px rgba(44,24,16,0.12); transform: translateY(-2px); } .delivery-logo { width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .delivery-logo img { width: 52px; height: 52px; object-fit: contain; border-radius: 12px; } .dl-ue { background: #06C167; } .dl-dd { background: #FF3008; } .dl-gh { background: #F63440; } .dl-icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-weight: 900; font-size: 0.62rem; color: #fff; text-align: center; line-height: 1.2; letter-spacing: 0.02em; flex-shrink: 0; } .delivery-info { flex: 1; } .delivery-name { font-weight: 700; font-size: 1rem; color: var(--brown); margin-bottom: 0.15rem; } .delivery-sub { font-size: 0.8rem; color: var(--muted); } .delivery-arrow { color: var(--red); font-size: 1.2rem; flex-shrink: 0; } .pickup-form-wrap { background: #fff; border: 1.5px solid #eddfc8; border-radius: 10px; padding: 1.75rem; } .pickup-form-wrap h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: var(--brown); margin-bottom: 0.25rem; } .pickup-form-wrap .pickup-sub { font-size: 0.85rem; color: var(--muted); margin-bottom: 1.5rem; line-height: 1.6; } .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--brown); margin-bottom: 0.35rem; letter-spacing: 0.04em; text-transform: uppercase; } .form-group input, .form-group textarea { width: 100%; padding: 0.65rem 0.9rem; border: 1.5px solid #d0b896; border-radius: 6px; font-family: 'Inter', sans-serif; font-size: 0.9rem; color: var(--text); background: var(--cream); transition: border-color 0.2s, box-shadow 0.2s; outline: none; } .form-group input:focus, .form-group textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,144,26,0.15); } .form-group textarea { resize: vertical; min-height: 90px; } .btn-submit { width: 100%; background: var(--red); color: #fff; border: none; border-radius: 6px; padding: 0.8rem; font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; transition: background 0.2s, transform 0.15s; } .btn-submit:hover { background: var(--red2); transform: translateY(-1px); } .pickup-success { display: none; text-align: center; padding: 1.5rem 0; } .pickup-success .check { font-size: 2.5rem; margin-bottom: 0.75rem; } .pickup-success h4 { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--brown); margin-bottom: 0.5rem; } .pickup-success p { font-size: 0.88rem; color: var(--muted); line-height: 1.6; } .pickup-success .call-link { color: var(--red); font-weight: 600; text-decoration: none; } @media (max-width: 720px) { .order-cols { grid-template-columns: 1fr; gap: 2rem; } } #worldcup { background: linear-gradient(160deg, #0b2e0b 0%, #0d3b0d 55%, #092609 100%); position: relative; overflow: hidden; } #worldcup::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 80px), radial-gradient(circle at 50% 120%, rgba(255,255,255,0.06), transparent 60%); } .wcup-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; } .wcup-inner .section-label { color: var(--gold2); } .wcup-inner .section-title { color: #fff; } .wcup-inner .section-subtitle { color: rgba(255,255,255,0.75); } .wcup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 2.25rem 0; } .wcup-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; padding: 1.25rem 1rem; text-align: center; transition: background 0.25s, border-color 0.25s, transform 0.25s; } .wcup-card:hover { background: rgba(255,255,255,0.1); border-color: var(--gold); transform: translateY(-3px); } .wcup-card.highlight { background: rgba(201,144,26,0.14); border-color: var(--gold); } .wcup-date { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold2); font-weight: 700; margin-bottom: 0.4rem; } .wcup-match { color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.35; } .wcup-tag { display: inline-block; margin-top: 0.5rem; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.25); border-radius: 12px; padding: 0.15rem 0.6rem; } .wcup-card.highlight .wcup-tag { color: var(--gold2); border-color: var(--gold); } .wcup-cta { text-align: center; } .wcup-note { font-size: 0.78rem; color: rgba(255,255,255,0.5); margin-top: 1rem; text-align: center; } #catering { background: var(--cream); } .catering-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 3.5rem; align-items: center; } .catering-points { display: flex; flex-direction: column; gap: 1rem; margin: 1.5rem 0 2rem; } .cat-point { display: flex; gap: 0.9rem; align-items: flex-start; } .cat-point .ico { font-size: 1.4rem; line-height: 1.2; flex-shrink: 0; } .cat-point .t { font-weight: 700; color: var(--brown); font-size: 0.95rem; } .cat-point .d { font-size: 0.85rem; color: var(--muted); line-height: 1.55; margin-top: 0.15rem; } .catering-img { border-radius: 12px; overflow: hidden; box-shadow: 0 12px 36px rgba(44,24,16,0.18); } .catering-img img { width: 100%; height: 420px; object-fit: cover; display: block; } @media (max-width: 820px) { .catering-inner { grid-template-columns: 1fr; gap: 2rem; } .catering-img img { height: 280px; } } #social { background: var(--brown); padding: 3.25rem 2rem; text-align: center; border-top: 2px solid #4a2e1e; } #social h3 { font-family: 'Playfair Display', serif; color: var(--cream); font-size: 1.5rem; margin-bottom: 0.4rem; } #social p { color: rgba(245,230,200,0.65); font-size: 0.9rem; margin-bottom: 1.5rem; } .social-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .social-pill { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.4rem; border-radius: 28px; text-decoration: none; font-weight: 700; font-size: 0.88rem; color: #fff; border: 1.5px solid rgba(245,230,200,0.25); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; } .social-pill:hover { transform: translateY(-2px); border-color: var(--gold2); box-shadow: 0 6px 18px rgba(0,0,0,0.3); } .social-pill.ig { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); } .social-pill.tk { background: #000; } .social-pill.yt { background: #CC0000; } #reviews { background: var(--cream); } .reviews-inner { max-width: 1100px; margin: 0 auto; } .reviews-score { display: flex; align-items: center; justify-content: center; gap: 0.9rem; flex-wrap: wrap; margin: 0.5rem 0 2.5rem; } .reviews-score .score-num { font-family: 'Playfair Display', serif; font-size: 3rem; font-weight: 700; color: var(--brown); line-height: 1; } .score-detail { text-align: left; } .stars { color: #F5B301; font-size: 1.1rem; letter-spacing: 0.1em; } .stars-frac { --fill: 94%; background: linear-gradient(90deg, #F5B301 var(--fill), rgba(51,24,26,0.22) var(--fill)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .score-detail .count { font-size: 0.85rem; color: var(--muted); margin-top: 0.15rem; } .g-mark { font-weight: 700; font-size: 0.85rem; color: var(--muted); } .g-mark .g { font-weight: 800; } .g-blue { color: #4285F4; } .g-red { color: #EA4335; } .g-yellow { color: #FBBC05; } .g-green { color: #34A853; } .reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25rem; margin-bottom: 2.25rem; } .review-card { background: #fff; border: 1.5px solid #eddfc8; border-radius: 12px; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; box-shadow: 0 2px 10px rgba(44,24,16,0.05); transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s; } .review-card:hover { box-shadow: 0 10px 28px rgba(44,24,16,0.13); transform: translateY(-3px); border-color: var(--gold); } .review-card .quote { font-size: 0.9rem; color: var(--text); line-height: 1.65; flex: 1; font-style: italic; } .review-card .quote::before { content: '“'; font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--red); line-height: 0; margin-right: 2px; } .review-card .reviewer { display: flex; align-items: center; gap: 0.65rem; } .review-card .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; } .review-card .r-name { font-weight: 600; font-size: 0.85rem; color: var(--brown); } .review-card .r-src { font-size: 0.7rem; color: var(--muted); } .reviews-cta { text-align: center; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .open-badge { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; padding: 0.35rem 0.85rem; border-radius: 20px; margin-top: 0.75rem; background: rgba(0,0,0,0.35); color: #fff; border: 1px solid rgba(255,255,255,0.2); } .open-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #999; flex-shrink: 0; } .open-badge.is-open .dot { background: #3ECF6E; box-shadow: 0 0 8px rgba(62,207,110,0.8); animation: pulseDot 2s infinite; } .open-badge.is-closed .dot { background: #E05252; } @keyframes pulseDot { 0%,100% { box-shadow: 0 0 4px rgba(62,207,110,0.5); } 50% { box-shadow: 0 0 10px rgba(62,207,110,1); } } .open-badge.on-light { background: #fff; color: var(--brown); border-color: #eddfc8; } .add-btn { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--gold); background: #fff; color: var(--red); font-size: 1rem; font-weight: 700; line-height: 1; cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.15s; display: flex; align-items: center; justify-content: center; align-self: center; } .add-btn:hover { background: var(--gold); color: #fff; transform: scale(1.1); } .add-btn.added { background: #3ECF6E; border-color: #3ECF6E; color: #fff; } .chicken-card .add-btn { margin: 0.6rem auto 0; background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.6); color: #fff; } .chicken-card .add-btn:hover { background: var(--gold); border-color: var(--gold); } #cart-fab { position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 94; background: var(--brown); color: var(--cream); border: 2px solid var(--gold); border-radius: 26px; padding: 0.6rem 1.1rem; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 0.88rem; font-weight: 700; box-shadow: 0 6px 20px rgba(44,24,16,0.35); display: none; align-items: center; gap: 0.5rem; transition: transform 0.2s, box-shadow 0.2s; } #cart-fab:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(44,24,16,0.45); } #cart-fab.show { display: inline-flex; } #cart-fab .cart-count { background: var(--red); color: #fff; border-radius: 50%; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; padding: 0 4px; } #cart-panel { position: fixed; bottom: 5.2rem; left: 1.5rem; z-index: 95; width: 330px; max-width: calc(100vw - 2rem); max-height: 60vh; background: #fff; border: 1.5px solid #eddfc8; border-radius: 14px; box-shadow: 0 16px 48px rgba(44,24,16,0.3); display: none; flex-direction: column; overflow: hidden; } #cart-panel.open { display: flex; } .cart-head { padding: 0.9rem 1.1rem; background: var(--brown); color: var(--cream); font-weight: 700; font-size: 0.95rem; display: flex; justify-content: space-between; align-items: center; } .cart-clear { background: none; border: none; color: rgba(245,230,200,0.7); font-size: 0.72rem; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; } .cart-clear:hover { color: #fff; } .cart-items { overflow-y: auto; padding: 0.5rem 0; flex: 1; } .cart-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem; font-size: 0.85rem; } .cart-row + .cart-row { border-top: 1px solid #f5ecd9; } .cart-row .cr-name { flex: 1; color: var(--brown); font-weight: 600; line-height: 1.3; } .cart-row .cr-price { color: var(--red); font-weight: 700; white-space: nowrap; } .qty-btn { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #d0b896; background: #fff; color: var(--brown); font-weight: 700; cursor: pointer; line-height: 1; font-size: 0.8rem; } @media (pointer: coarse) { .add-btn, .qty-btn { position: relative; } .add-btn::before { content: ''; position: absolute; inset: -10px; } .qty-btn::before { content: ''; position: absolute; inset: -11px; } } .qty-btn:hover { border-color: var(--gold); color: var(--gold); } .cart-qty { min-width: 18px; text-align: center; font-weight: 700; color: var(--brown); } .cart-foot { padding: 0.9rem 1.1rem; border-top: 1.5px solid #eddfc8; background: var(--cream); } .cart-total { display: flex; justify-content: space-between; font-size: 0.9rem; font-weight: 700; color: var(--brown); margin-bottom: 0.7rem; } .cart-note { font-size: 0.68rem; color: var(--muted); margin-top: 0.5rem; line-height: 1.4; text-align: center; } .cart-empty { padding: 1.5rem; text-align: center; color: var(--muted); font-size: 0.85rem; } #mobile-order-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 96; background: var(--brown); border-top: 2px solid var(--gold); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 20px rgba(0,0,0,0.3); } #mobile-order-bar a { flex: 1; text-align: center; padding: 0.8rem 0.25rem; color: var(--cream); text-decoration: none; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; } #mobile-order-bar a .bar-ico { font-size: 1.05rem; } #mobile-order-bar a + a { border-left: 1px solid rgba(245,230,200,0.15); } #mobile-order-bar a.bar-order { background: var(--gold); color: var(--brown); } @media (max-width: 768px) { #mobile-order-bar { display: flex; } body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } #back-to-top { bottom: calc(80px + env(safe-area-inset-bottom)); } #cart-fab { bottom: calc(80px + env(safe-area-inset-bottom)); left: 1rem; } #cart-panel { bottom: calc(132px + env(safe-area-inset-bottom)); left: 1rem; } } .site-footer { background: var(--brown); color: rgba(245,230,200,0.72); border-top: 2px solid #4a2e1e; padding: 3rem 1.5rem 1.75rem; font-size: 0.88rem; } .footer-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem 2.5rem; } .footer-h { font-family: 'Playfair Display', serif; color: var(--gold); font-size: 1.05rem; margin: 0 0 0.85rem; font-weight: 700; } .footer-logo { font-family: 'Playfair Display', serif; color: var(--cream); font-size: 1.5rem; font-weight: 800; margin: 0 0 0.35rem; } .footer-tagline { color: rgba(245,230,200,0.62); margin: 0 0 0.4rem; font-size: 0.85rem; line-height: 1.5; } .footer-hours { border-collapse: collapse; width: 100%; max-width: 260px; } .footer-hours th { text-align: left; font-weight: 600; color: rgba(245,230,200,0.85); padding: 0.18rem 0.75rem 0.18rem 0; white-space: nowrap; } .footer-hours td { text-align: right; color: rgba(245,230,200,0.7); padding: 0.18rem 0; white-space: nowrap; } .footer-hours .is-closed-row th, .footer-hours .is-closed-row td { color: rgba(224,120,120,0.95); } .footer-addr { font-style: normal; line-height: 1.6; color: rgba(245,230,200,0.72); margin: 0 0 0.6rem; } .footer-link { color: var(--gold2); text-decoration: none; font-weight: 600; transition: color 0.2s; } .footer-link:hover { color: var(--gold); text-decoration: underline; } .footer-dir { display: inline-flex; align-items: center; gap: 0.4rem; } .footer-dir .ico { width: 15px; height: 15px; color: var(--gold2); } .footer-col p { margin: 0 0 0.45rem; } .footer-nav { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.5rem; margin-bottom: 1rem; position: static; inset: auto; transform: none; width: auto; height: auto; background: none; backdrop-filter: none; box-shadow: none; border: 0; } .footer-nav a { color: rgba(245,230,200,0.8); text-decoration: none; padding: 0.15rem 0; transition: color 0.2s, padding-left 0.2s; } .footer-nav a:hover { color: var(--gold); padding-left: 3px; } .footer-social { display: flex; gap: 0.6rem; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.08); color: var(--cream); border: 1px solid rgba(255,255,255,0.15); transition: background 0.2s, transform 0.2s, border-color 0.2s; } .footer-social a:hover { background: rgba(244,218,138,0.18); border-color: var(--gold2); transform: translateY(-2px); } .footer-social svg { width: 17px; height: 17px; } .footer-pills { max-width: 1100px; margin: 2.25rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .footer-pills-label { color: var(--gold); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; margin-right: 0.35rem; } .footer-pills a { color: rgba(245,230,200,0.82); text-decoration: none; font-size: 0.82rem; padding: 0.32rem 0.75rem; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; transition: border-color 0.2s, color 0.2s, background 0.2s; } .footer-pills a:hover { color: var(--brown); background: var(--gold2); border-color: var(--gold2); } .footer-pills-current { color: var(--gold); font-size: 0.82rem; padding: 0.32rem 0.75rem; border: 1px solid var(--gold2); border-radius: 999px; background: rgba(244,218,138,0.12); font-weight: 600; } .footer-nav .footer-pills-current { padding: 0.15rem 0; border: 0; border-radius: 0; background: none; font-size: inherit; font-weight: 700; } .footer-bottom { max-width: 1100px; margin: 1.75rem auto 0; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.1); text-align: center; color: rgba(245,230,200,0.68); font-size: 0.78rem; } .footer-bottom span { color: var(--gold2); } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem 2rem; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; } .footer-hours { max-width: none; } .footer-nav a { min-height: 44px; display: flex; align-items: center; } } @media (max-width: 768px) { header { padding: 0 1rem; } .nav-toggle { display: block; } nav { position: fixed; top: 0; right: 0; height: 100vh; width: min(280px, 78vw); background: rgba(94,26,26,0.98); backdrop-filter: blur(12px); flex-direction: column; justify-content: center; gap: 1.75rem; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: -8px 0 30px rgba(0,0,0,0.4); border-left: 1px solid var(--gold); } nav.open { transform: translateX(0); } nav a { font-size: 1rem; } #nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99; opacity: 0; pointer-events: none; transition: opacity 0.3s; } #nav-backdrop.show { opacity: 1; pointer-events: auto; } .about-grid, .contact-inner { grid-template-columns: 1fr; gap: 2.5rem; } #chef > div { grid-template-columns: 1fr !important; } #chef h2 { font-size: 1.7rem !important; } .about-img { display: block; } .map-wrap { min-height: 280px; } section { padding: 3.5rem 1.25rem; } #dish-popup { width: min(340px, 92vw) !important; } } @media (max-width: 520px) { #back-to-top { right: 0.75rem; } } @media (max-width: 768px) { .catering-cta { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; text-align: center; padding: 0.9rem 1.5rem; font-size: 0.9rem; width: 100%; max-width: 320px; box-sizing: border-box; } .cta-phone { white-space: nowrap; font-size: 0.95rem; font-weight: 700; } .menu-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; gap: 0.4rem; } .menu-tabs::-webkit-scrollbar { display: none; } .tab-btn { flex-shrink: 0; } #dish-popup { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) scaleY(0.85) !important; bottom: auto !important; right: auto !important; } #dish-popup.visible { transform: translate(-50%, -50%) scaleY(1) !important; } .hero-btns { flex-direction: column; align-items: center; } .btn-primary, .btn-outline { width: 100%; max-width: 280px; text-align: center; } body { overflow-x: hidden; } .reviews-grid { grid-template-columns: 1fr; } .wcup-grid { grid-template-columns: repeat(2, 1fr); } .wcup-cta .btn-primary { display: block; width: 100%; max-width: 320px; margin: 0 auto; text-align: center; } .reviews-cta { flex-direction: column; align-items: center; } .reviews-cta .btn-primary, .reviews-cta .btn-outline { width: 100%; max-width: 300px; text-align: center; display: block; } .maps-popup { left: 0; right: auto; max-width: calc(100vw - 2.5rem); } .chicken-cards { grid-template-columns: 1fr; } .chicken-card { max-width: 100%; } } #faq { background: var(--cream); } .faq-inner { max-width: 820px; margin: 0 auto; } .faq-intro { color: var(--muted); font-size: 1.05rem; line-height: 1.75; text-align: center; max-width: 680px; margin: 0 auto 2.5rem; } .faq-list { display: flex; flex-direction: column; gap: 0.85rem; } .faq-item { border: 1px solid rgba(44,24,16,0.12); border-radius: 8px; background: #fff; overflow: hidden; transition: box-shadow 0.2s, border-color 0.2s; } .faq-item[open] { border-color: var(--gold); box-shadow: 0 6px 20px rgba(44,24,16,0.08); } .faq-item summary { list-style: none; cursor: pointer; padding: 1.1rem 1.35rem; font-family: 'Playfair Display', serif; font-size: 1.12rem; color: var(--brown); font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; color: var(--red); font-size: 1.6rem; font-weight: 400; line-height: 1; transition: transform 0.25s; flex-shrink: 0; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item .faq-a { padding: 0 1.35rem 1.25rem; color: var(--text); line-height: 1.7; font-size: 1rem; } .faq-item .faq-a a { color: var(--red); font-weight: 600; } .qlinks { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1.1rem; margin-top:2.5rem; } .qcard { display:flex; flex-direction:column; align-items:flex-start; gap:0.4rem; text-decoration:none; background:#fff; border:1px solid rgba(44,24,16,0.12); border-radius:12px; padding:1.4rem 1.3rem; transition:box-shadow .2s, transform .15s, border-color .2s; } .qcard:hover { box-shadow:0 10px 28px rgba(44,24,16,0.12); transform:translateY(-3px); border-color:var(--gold); } .qcard .qicon { font-size:1.9rem; } .qcard .qt { font-family:'Playfair Display',serif; font-size:1.25rem; color:var(--brown); font-weight:600; } .qcard .qd { color:var(--muted); font-size:0.92rem; line-height:1.5; } .gallery-section { background: var(--brown); padding: 5rem 2rem; overflow: hidden; } .gallery-inner { max-width: 1200px; margin: 0 auto; } .gallery-section .section-label { color: var(--gold2); } .gallery-section .section-title { color: var(--cream); } .gallery-section .section-subtitle { color: rgba(245,230,200,0.82); margin: 0 auto; } .gallery-section .divider { background: var(--gold2); } .gallery-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0 0 2.25rem; } .gallery-chips .chip { background: rgba(255,255,255,0.06); border: 1.5px solid rgba(232,168,32,0.4); color: var(--warm); padding: 0.5rem 1.15rem; border-radius: 25px; font: 600 0.82rem 'Inter', sans-serif; letter-spacing: 0.04em; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s; } .gallery-chips .chip:hover { border-color: var(--gold2); color: var(--gold2); transform: translateY(-2px); } .gallery-chips .chip.active { background: var(--gold); border-color: var(--gold); color: var(--brown); box-shadow: 0 4px 14px rgba(201,144,26,0.45); } @media (max-width: 768px) { .gallery-chips { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 0.4rem; } .gallery-chips::-webkit-scrollbar { display: none; } .gallery-chips .chip { flex-shrink: 0; } } .gallery-grid { column-count: 4; column-gap: 0.9rem; } @media (max-width: 1100px) { .gallery-grid { column-count: 3; } } @media (max-width: 760px) { .gallery-grid { column-count: 2; column-gap: 0.6rem; } } @media (max-width: 400px) { .gallery-grid { column-count: 1; } } .gal-card { display: block; width: 100%; margin: 0 0 0.9rem; padding: 0; border: none; background: var(--red2); color: inherit; font: inherit; border-radius: 10px; overflow: hidden; cursor: zoom-in; position: relative; break-inside: avoid; -webkit-column-break-inside: avoid; box-shadow: 0 2px 10px rgba(0,0,0,0.25); transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s; } @media (max-width: 760px) { .gal-card { margin-bottom: 0.6rem; } } .gal-card picture { display: block; } .gal-card img { width: 100%; height: auto; display: block; background: var(--red2); aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), opacity 0.4s; } .gal-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.4); } .gal-card:hover img { transform: scale(1.06); } .gal-card:focus-visible { outline: 3px solid var(--gold2); outline-offset: 3px; } .gal-card.hide { display: none; } .gallery-grid.filtering .gal-card { animation: tabFadeIn 0.4s ease both; } .gal-card.img-error img { display: none; } .gal-card.img-error::before { content: ''; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; background: var(--warm) url('/img/icons/plate.png?v=2') center/40% no-repeat; } .gal-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; padding: 1.6rem 0.85rem 0.75rem; text-align: left; pointer-events: none; background: linear-gradient(to top, rgba(20,10,5,0.92) 0%, rgba(20,10,5,0.5) 55%, transparent 100%); } .gal-name { font-family: 'Playfair Display', serif; color: #fff; font-size: 0.95rem; line-height: 1.2; text-shadow: 0 1px 4px rgba(0,0,0,0.6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .gal-price { flex: none; background: var(--gold); color: var(--brown); font-weight: 700; font-size: 0.78rem; padding: 0.18rem 0.5rem; border-radius: 20px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.35); } .gal-zoom { position: absolute; top: 0.55rem; right: 0.55rem; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: rgba(20,10,5,0.55); color: var(--gold2); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; opacity: 0; transform: scale(0.8); transition: opacity 0.2s, transform 0.2s; pointer-events: none; } .gal-card:hover .gal-zoom, .gal-card:focus-visible .gal-zoom { opacity: 1; transform: scale(1); } .gallery-cta { text-align: center; margin-top: 2.5rem; } .lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(12,6,3,0.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.25s ease; } .lightbox[hidden] { display: none; } .lightbox.open { opacity: 1; } .lb-figure { margin: 0; max-width: min(92vw, 880px); max-height: 86vh; display: flex; flex-direction: column; align-items: center; transform: scale(0.94); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); } .lightbox.open .lb-figure { transform: scale(1); } .lb-img-wrap { position: relative; width: 100%; min-height: 200px; display: flex; align-items: center; justify-content: center; background: var(--brown); border-radius: 12px; overflow: hidden; } .lb-img { max-width: 100%; max-height: 74vh; display: block; object-fit: contain; animation: lbZoom 0.3s cubic-bezier(0.22,1,0.36,1) both; } @keyframes lbZoom { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } } .lb-img-placeholder { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: var(--warm) url('/img/icons/plate.png?v=2') center/32% no-repeat; } .lb-img-wrap.img-error .lb-img { display: none; } .lb-img-wrap.img-error .lb-img-placeholder { display: flex; } .lb-caption { width: 100%; background: var(--cream); border-radius: 0 0 12px 12px; padding: 0.85rem 1.25rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 1rem; } .lb-name { font-family: 'Playfair Display', serif; font-size: 1.25rem; color: var(--brown); } .lb-price { font-weight: 700; color: var(--red); font-size: 1.05rem; white-space: nowrap; } .lb-cat { margin-left: auto; color: var(--muted); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; } .lb-close, .lb-nav { position: absolute; z-index: 2; cursor: pointer; background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(245,230,200,0.25); display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s, transform 0.2s; } .lb-close { top: 1.1rem; right: 1.2rem; width: 44px; height: 44px; border-radius: 50%; font-size: 1.5rem; } .lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; font-size: 2rem; line-height: 1; } .lb-prev { left: 1.25rem; } .lb-next { right: 1.25rem; } .lb-close:hover, .lb-nav:hover { background: var(--gold); color: var(--brown); border-color: var(--gold); } .lb-nav:hover { transform: translateY(-50%) scale(1.08); } .lb-counter { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); color: rgba(245,230,200,0.65); font-size: 0.85rem; letter-spacing: 0.1em; } .lb-counter #lb-current { color: var(--gold2); font-weight: 700; } @media (max-width: 768px) { .lb-nav { top: auto; bottom: 1rem; transform: none; width: 46px; height: 46px; background: rgba(255,255,255,0.14); } .lb-prev { left: 1rem; } .lb-next { right: 1rem; } .lb-nav:hover { transform: none; } .lb-counter { bottom: 1.5rem; } .lb-img { max-height: 64vh; } } .menu-item.has-img { align-items: center; } .mi-thumb { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: var(--warm); border: 1px solid #eddfc8; display: block; transition: transform 0.25s cubic-bezier(0.22,1,0.36,1); } .menu-item.has-img:hover .mi-thumb { transform: scale(1.06); } .mi-thumb.img-error { display: flex; align-items: center; justify-content: center; object-fit: initial; background: var(--warm) url('/img/icons/plate.png?v=2') center/64% no-repeat; } .menu-item.has-img .item-name, .menu-item.has-img .item-desc { min-width: 0; } .menu-item.has-desc { display: grid; align-items: center; grid-template-columns: 1fr auto auto; column-gap: 0.75rem; row-gap: 0.3rem; } .menu-item.has-desc > .item-name { grid-column: 1; grid-row: 1; } .menu-item.has-desc > .item-price { grid-column: 2; grid-row: 1; justify-self: end; } .menu-item.has-desc > .add-btn { grid-column: 3; grid-row: 1; } .menu-item.has-desc > .item-desc { grid-column: 1 / -1; grid-row: 2; } .menu-item.has-desc.has-img { grid-template-columns: auto 1fr auto auto; } .menu-item.has-desc.has-img > .mi-thumb { grid-column: 1; grid-row: 1 / 3; align-self: start; } .menu-item.has-desc.has-img > .item-name { grid-column: 2; grid-row: 1; } .menu-item.has-desc.has-img > .item-price{ grid-column: 3; grid-row: 1; justify-self: end; } .menu-item.has-desc.has-img > .add-btn { grid-column: 4; grid-row: 1; } .menu-item.has-desc.has-img > .item-desc { grid-column: 2 / -1; grid-row: 2; } .menu-item.has-desc > .item-desc { line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } .menu-item > .item-name { flex: 1 1 auto; min-width: 0; } .menu-item.has-desc > .item-price { text-align: right; } .item-price .size-hint { display: block; font-size: 0.68rem; font-weight: 400; color: var(--muted); margin-top: 0.1rem; white-space: nowrap; letter-spacing: 0.01em; } @media (max-width: 480px) { .mi-thumb { width: 54px; height: 54px; } } @media (prefers-reduced-motion: reduce) { .gal-card, .gal-card img, .lb-figure, .lightbox, .mi-thumb { transition: none; } .gal-card:hover { transform: none; } .gal-card:hover img { transform: none; } .lb-img { animation: none; } .gallery-grid.filtering .gal-card { animation: none; } } #menu .menu-tabs { position: sticky; top: 70px; z-index: 40; background: var(--cream); padding-top: 0.75rem; padding-bottom: 0.75rem; box-shadow: 0 6px 10px -6px rgba(44,24,16,0.18); } #home .btn-primary { background: var(--gold); color: var(--brown); } #home .btn-primary:hover { background: var(--gold2); } #gallery .divider, #chef .divider, .gallery-section .divider { background: var(--gold2); } @media (max-width:760px){ .chef-grid{ grid-template-columns:1fr !important; gap:2rem !important; } } :root { --shadow-sm: 0 2px 10px rgba(51,24,26,0.08); --shadow-md: 0 10px 28px rgba(51,24,26,0.14); --shadow-lg: 0 20px 48px rgba(51,24,26,0.20); } header { border-bottom: 1px solid var(--gold); } nav { gap: 1.5rem; } @media (min-width: 769px) and (max-width: 1024px) { .nav-toggle { display: block; } #main-nav { position: fixed; top: 0; right: 0; height: 100vh; width: min(320px, 70vw); background: rgba(94,26,26,0.98); backdrop-filter: blur(12px); flex-direction: column; justify-content: center; gap: 1.75rem; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.22,1,0.36,1); box-shadow: -8px 0 30px rgba(0,0,0,0.4); border-left: 1px solid var(--gold); } #main-nav.open { transform: translateX(0); } #main-nav a { font-size: 1rem; } #main-nav .btn-call, #main-nav .btn-order { font-size: 0.95rem; } #nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99; opacity: 0; pointer-events: none; transition: opacity 0.3s; } #nav-backdrop.show { opacity: 1; pointer-events: auto; } } header.scrolled { height: 58px; background: rgba(94,26,26,0.99); border-bottom-color: rgba(239,200,90,0.55); box-shadow: 0 4px 24px rgba(0,0,0,0.35); } .btn-call { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--gold2); border: 1.5px solid rgba(244,218,138,0.5); padding: 0.45rem 0.9rem; border-radius: 22px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; text-decoration: none; white-space: nowrap; transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease; } .btn-call:hover { transform: translateY(-1px); background: rgba(244,218,138,0.12); border-color: var(--gold); } .btn-call .call-ico { transition: transform 0.2s ease; } .btn-call:hover .call-ico { transform: rotate(-12deg) scale(1.08); } nav a.btn-call::after { display: none; } @media (max-width: 768px) { .btn-call { display: none; } } .open-badge .dot { transition: background 0.3s ease, box-shadow 0.3s ease; } #home { height: 100vh; height: 100svh; min-height: 600px; } #home h1 { font-weight: 800; font-size: clamp(3rem, 7vw, 5.5rem); line-height: 1.04; letter-spacing: -0.01em; text-wrap: balance; text-shadow: 0 2px 28px rgba(51,24,26,0.45); } #home h1 span { font-style: italic; } #home p { max-width: 46ch; margin: 0 auto 2.25rem; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.9rem; } .hero-eyebrow::before, .hero-eyebrow::after { content: ''; width: 36px; height: 1px; background: var(--gold2); opacity: 0.7; } #home .overlay { background: linear-gradient(to bottom, rgba(51,24,26,0.30) 0%, rgba(94,26,26,0.55) 55%, rgba(51,24,26,0.90) 100%); } @media (max-width: 1024px) { #home .bg { background-image: url('/img/hero-mobile.jpg?v=1'); background-image: -webkit-image-set(url('/img/hero-mobile.webp?v=1') type('image/webp'), url('/img/hero-mobile.jpg?v=1') type('image/jpeg')); background-image: image-set(url('/img/hero-mobile.webp?v=1') type('image/webp'), url('/img/hero-mobile.jpg?v=1') type('image/jpeg')); } #home .overlay { background: linear-gradient(to bottom, rgba(51,24,26,0.42) 0%, rgba(94,26,26,0.58) 55%, rgba(51,24,26,0.90) 100%); } } @keyframes heroDrift { from { transform: scale(1); } to { transform: scale(1.07); } } #home .bg { animation: heroDrift 22s ease-out both; } @keyframes heroDriftSoft { from { transform: scale(1); } to { transform: scale(1.03); } } @media (max-width: 1024px) { #home .bg { animation-name: heroDriftSoft; } } .scroll-hint { transition: opacity 0.4s ease; } header.scrolled ~ main .scroll-hint { opacity: 0; pointer-events: none; } .btn-primary, .btn-outline, .btn-order, .btn-submit { border-radius: 8px; } .btn-primary { position: relative; overflow: hidden; box-shadow: 0 6px 18px rgba(155,22,32,0.30); transition: background 0.2s, transform 0.15s cubic-bezier(0.22,1,0.36,1), box-shadow 0.2s; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(155,22,32,0.42); } .btn-primary:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(155,22,32,0.30); } #home .btn-primary { box-shadow: 0 6px 20px rgba(239,200,90,0.28); } #home .btn-primary:hover { box-shadow: 0 10px 28px rgba(239,200,90,0.40); } .btn-primary::after { content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,253,249,0.35), transparent); transition: left 0.55s ease; pointer-events: none; } .btn-primary:hover::after { left: 140%; } .btn-submit { box-shadow: 0 6px 18px rgba(155,22,32,0.25); } .divider { position: relative; width: 76px; height: 2px; background: linear-gradient(90deg, transparent, var(--red), transparent); } .divider::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%) rotate(45deg); background: var(--gold2); } #gallery .divider, #chef .divider, .about-text .divider, .wcup-inner .divider, .gallery-section .divider { background: linear-gradient(90deg, transparent, var(--gold2), transparent); } .qcard, .delivery-card, .pickup-form-wrap, .review-card { box-shadow: var(--shadow-sm); border-color: rgba(94,26,26,0.12); } .qcard:hover, .delivery-card:hover, .review-card:hover { box-shadow: var(--shadow-md); border-color: var(--gold); } .qcard.reveal { transform: none; transition: opacity 0.6s ease, transform 0.15s, box-shadow 0.2s, border-color 0.2s; } .gallery-section { background: radial-gradient(120% 70% at 50% 0%, rgba(200,32,42,0.16), rgba(200,32,42,0) 55%), var(--brown); } .gal-card { position: relative; } .gal-card img { filter: saturate(1.04); transition: filter 0.25s ease; } .gal-card:hover img { filter: saturate(1.16) contrast(1.03); } .gal-card::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: 10px; border: 1px solid rgba(239,200,90,0); transition: border-color 0.25s; pointer-events: none; } .gal-card:hover::after, .gal-card:focus-visible::after { border-color: rgba(239,200,90,0.55); } #worldcup, .gallery-section { border-top: 1px solid rgba(239,200,90,0.28); } .wcup-tag { color: rgba(255,255,255,0.72); } .wcup-inner .section-subtitle { color: rgba(255,255,255,0.82); } .wcup-note { color: rgba(255,255,255,0.62); } .wcup-scroll-wrap { position: relative; } .swipe-hint { display: none; } @media (max-width: 768px) { .wcup-grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0.85rem; margin: 2rem -1.25rem; padding: 0.25rem 1.25rem 1rem; scroll-padding-left: 1.25rem; } .wcup-grid::-webkit-scrollbar { display: none; } .wcup-card { flex: 0 0 80%; max-width: 320px; scroll-snap-align: center; padding: 1.5rem 1.25rem; } .wcup-grid:focus-visible { outline: 2px solid var(--gold2); outline-offset: 3px; border-radius: 8px; } .wcup-card.reveal { opacity: 1; transform: none; } .wcup-match { font-size: 1.1rem; } .wcup-scroll-wrap::after { content: ''; position: absolute; top: 0; right: -1.25rem; width: 48px; height: 100%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(9,38,9,0.92)); opacity: 1; transition: opacity 0.3s; } .wcup-scroll-wrap.scrolled-end::after { opacity: 0; } .swipe-hint { display: flex; gap: 0.4rem; align-items: center; justify-content: center; color: var(--gold2); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.5rem; animation: nudge 1.6s ease-in-out infinite; } .swipe-hint.hide { opacity: 0; transition: opacity 0.3s; animation: none; } } @keyframes nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } } #mobile-order-bar a { transition: background 0.15s; } #mobile-order-bar a:active { background: rgba(244,218,138,0.14); } #mobile-order-bar a.bar-order { font-weight: 800; box-shadow: inset 0 2px 0 rgba(255,253,249,0.45), inset 0 -2px 6px rgba(94,26,26,0.25); } #mobile-order-bar a.bar-order:active { background: var(--gold2); } @media (prefers-reduced-motion: reduce) { #home .bg { animation: none; } .swipe-hint { animation: none; } .btn-primary::after { transition: none; } .wcup-grid { scroll-behavior: auto; } .reveal { will-change: auto; } } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 4px; } header a:focus-visible, header button:focus-visible, #home a:focus-visible, #home button:focus-visible, #worldcup a:focus-visible, #worldcup .wcup-grid:focus-visible, .gallery-section a:focus-visible, .gallery-section button:focus-visible, .gallery-chips :focus-visible, #mobile-order-bar a:focus-visible, footer a:focus-visible, .lightbox button:focus-visible { outline-color: var(--gold2); } .inka-form input:focus-visible, .inka-form textarea:focus-visible { outline: 3px solid var(--red); outline-offset: 1px; } .ico { width: 1.2em; height: 1.2em; flex-shrink: 0; vertical-align: -0.24em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; } a:hover > .ico, button:hover > .ico { transform: translateY(-1px); } .qcard .qicon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(244,218,138,0.24); color: var(--red); margin-bottom: 0.35rem; font-size: 0; transition: background 0.25s, color 0.25s, transform 0.25s; } .qcard .qicon .ico { width: 22px; height: 22px; stroke-width: 1.6; } .qcard:hover .qicon { background: var(--gold); color: var(--brown); transform: rotate(-6deg) scale(1.06); } #mobile-order-bar a .bar-ico { font-size: 0; line-height: 0; } #mobile-order-bar .bar-ico .ico { width: 19px; height: 19px; color: var(--gold2); } #mobile-order-bar a.bar-order .bar-ico .ico { color: var(--brown); } .section-label .ico { width: 1.05em; height: 1.05em; vertical-align: -0.18em; } .btn-submit .ico, .btn-outline .ico, .btn-primary .ico, #cart-fab .ico, .tab-btn .ico { margin-right: 0.4rem; } @media (prefers-reduced-motion: reduce) { .ico, .qcard .qicon { transition: none; } } #chef-band { background: var(--warm); border-top: 1px solid rgba(94,26,26,0.08); } .chefb-inner { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: minmax(240px, 360px) 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .chefb-photo { position: relative; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-md); } .chefb-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; } .chefb-photo::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(244,218,138,0.7); border-radius: 8px; pointer-events: none; } .chefb-text .section-title { margin-bottom: 0.25rem; font-size: clamp(1.9rem, 3.4vw, 2.6rem); } .chefb-quote { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600; font-size: clamp(1.25rem, 2.3vw, 1.55rem); line-height: 1.55; color: var(--brown); margin: 1.1rem 0 1rem; max-width: 36ch; text-wrap: pretty; } .chefb-sub { color: var(--muted); font-size: 0.98rem; line-height: 1.7; max-width: 46ch; margin-bottom: 1.5rem; } .chefb-link { color: var(--red); font-weight: 700; text-decoration: none; font-size: 0.95rem; letter-spacing: 0.02em; border-bottom: 1.5px solid rgba(200,32,42,0.25); padding-bottom: 2px; transition: border-color 0.2s, color 0.2s; } .chefb-link:hover { color: var(--red2); border-bottom-color: var(--red); } @media (max-width: 760px) { .chefb-inner { grid-template-columns: 1fr; gap: 1.75rem; } .chefb-photo { max-width: 320px; } .chefb-quote { max-width: none; } } #signature { position: relative; min-height: 88svh; padding: 0; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; } .sig-media { position: absolute; inset: 0; z-index: -2; background-image: url('/img/pollo-a-la-brasa.webp'); background-size: cover; background-position: center 42%; background-attachment: fixed; } @media (hover: none), (max-width: 900px) { .sig-media { background-attachment: scroll; } } .sig-scrim { position: absolute; inset: 0; z-index: -1; background: radial-gradient(110% 65% at 50% 108%, rgba(239,200,90,0.20), transparent 62%), linear-gradient(to top, rgba(20,8,6,0.90) 0%, rgba(51,24,26,0.42) 34%, rgba(51,24,26,0.12) 58%, rgba(20,8,6,0.38) 100%); } .sig-caption { margin: 0; padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 6vw, 6rem); max-width: 680px; } .sig-eyebrow { color: var(--gold2); font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 700; margin-bottom: 0.6rem; } .sig-title { font-family: 'Playfair Display', serif; font-weight: 800; font-style: italic; color: var(--cream); font-size: clamp(2.6rem, 6vw, 4.5rem); line-height: 1.02; letter-spacing: -0.01em; margin-bottom: 0.75rem; text-shadow: 0 2px 30px rgba(0,0,0,0.55); text-wrap: balance; } .sig-sub { color: rgba(255,253,249,0.85); font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.7; max-width: 44ch; margin-bottom: 1.1rem; } .sig-price { display: inline-flex; align-items: baseline; gap: 0.6rem; color: var(--gold2); font-family: 'Playfair Display', serif; font-size: 1.1rem; } .sig-price::before { content: ''; width: 34px; height: 1px; background: var(--gold2); opacity: 0.7; align-self: center; } .sig-price strong { font-size: 1.7rem; font-weight: 700; color: var(--gold); } @media (max-width: 640px) { #signature { min-height: 92svh; } .sig-caption { padding-bottom: 3.25rem; } } @media (prefers-reduced-motion: reduce) { .sig-media { background-attachment: scroll; } } #home h1 { font-size: clamp(3.4rem, 9vw, 7rem); line-height: 0.98; letter-spacing: -0.015em; margin-bottom: 1.25rem; } @media (max-width: 380px) { #home h1 { font-size: 3rem; } } .section-title { letter-spacing: -0.012em; text-wrap: balance; } #gallery .section-title { font-size: clamp(2.4rem, 5vw, 3.6rem); } #reviews .section-header.centered { text-align: left; } #reviews .section-header.centered .divider.centered { margin: 1rem 0 1.5rem; } #reviews .section-header.centered .section-subtitle { margin: 0; } #reviews .reviews-score { justify-content: flex-start; } #order .section-title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); } #order .section-label { letter-spacing: 0.32em; } .cat-point > .ico { width: 1.5em; height: 1.5em; color: var(--red); } #brasa { position: relative; min-height: 90svh; display: flex; align-items: center; overflow: hidden; isolation: isolate; background: #1a0a08; } .brasa-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .brasa-scrim { position: absolute; inset: 0; z-index: -1; background: radial-gradient(85% 60% at 20% 50%, rgba(20,8,6,0.58), transparent 72%), radial-gradient(120% 85% at 62% 118%, rgba(239,200,90,0.20), transparent 55%), linear-gradient(90deg, rgba(20,8,6,0.88) 0%, rgba(20,8,6,0.5) 46%, rgba(20,8,6,0.22) 100%); } .brasa-inner { max-width: 1100px; margin: 0 auto; width: 100%; padding: clamp(3rem,7vw,6rem) clamp(1.5rem,6vw,5rem); } .brasa-eyebrow { color: var(--gold2); font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(1.1rem,2vw,1.45rem); letter-spacing: 0.01em; margin-bottom: 0.4rem; } .brasa-title { font-family: 'Playfair Display', serif; font-weight: 800; color: var(--cream); font-size: clamp(2.2rem,5vw,3.8rem); line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 2rem; text-shadow: 0 2px 30px rgba(0,0,0,0.6); max-width: 20ch; text-wrap: balance; } .brasa-steps { list-style: none; display: flex; flex-direction: column; gap: 1.05rem; max-width: 540px; } .brasa-steps li { display: flex; align-items: baseline; gap: 1rem; color: rgba(255,253,249,0.92); font-size: clamp(1rem,1.5vw,1.15rem); line-height: 1.5; } .brasa-num { flex-shrink: 0; font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.6rem; color: var(--gold2); width: 1.5rem; } @media (prefers-reduced-motion: reduce) { .brasa-media { display: none; } #brasa { background: #1a0a08 url('/img/brasa-poster.jpg') center/cover; } }