/* ============================================================ MOBILE-FIRST ============================================================ */ :root { --cream: #FCF7EA; --cream-soft: #FFFDF4; --red: #9C192E; --red-dark: #8f162a; --red-deep: #831224; --green: #3E7D3A; --brown: #4A3B32; --brown-soft: #6B5A4E; --white-warm: #FFFDF2; --shadow: 0 10px 30px rgba(74, 59, 50, 0.15); --radius-lg: 28px; --radius-pill: 999px; --font-body: "DM Sans", sans-serif; --font-title: "Jost", sans-serif; --font-script: "Galada", cursive; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 72px; /* keeps sections clear of the sticky header */ /* "clip" (not "hidden") so stays the viewport scroller — "hidden" forces overflow-y to auto, which breaks smooth scroll & scrollIntoView */ overflow-x: clip; } body { font-family: var(--font-body); background-color: var(--cream); color: var(--brown); overflow-x: clip; /* "clip" (not "hidden") so the body doesn't become its own scroll container */ } img { max-width: 100%; display: block; } /* visible to Google and screen readers, invisible on screen (SEO h1) */ .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; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-block; font-family: var(--font-title); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; text-align: center; padding: 0.95rem 2.4rem; border-radius: var(--radius-pill); transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease; } .btn--solid { background-color: var(--red); color: var(--cream); box-shadow: 0 6px 18px rgba(178, 59, 52, 0.35); } .btn--solid:hover, .btn--solid:focus-visible { background-color: var(--red-dark); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(178, 59, 52, 0.45); } /* green-accented outline — used for the vegan "Green Menu" button */ .btn--outline { background-color: transparent; color: var(--green, #3E7D3A); border: 2px solid var(--green, #3E7D3A); } .btn--outline:hover, .btn--outline:focus-visible { background-color: var(--green, #3E7D3A); color: var(--cream); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(62, 125, 58, 0.35); } .btn--cream { background-color: var(--cream); color: var(--red); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); } .btn--cream:hover, .btn--cream:focus-visible { background-color: var(--white-warm); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); } /* ============================================================ HEADER + HAMBURGER NAV ============================================================ */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 110; /* stays above the slide-in nav so the X button remains tappable */ display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 1.25rem; /* transparent while on the hero — the bar only shows once you scroll past it */ background-color: transparent; transition: background-color 0.35s ease, box-shadow 0.35s ease; } .header--scrolled { background-color: rgba(252, 247, 234, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 2px 12px rgba(74, 59, 50, 0.08); } .header__logo img { height: 44px; width: auto; } /* logo hidden on the hero, fades in with the bar */ .header__logo { opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .header--scrolled .header__logo { opacity: 1; pointer-events: auto; } .hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: none; border: none; cursor: pointer; z-index: 110; } .hamburger span { display: block; width: 100%; height: 3px; border-radius: 3px; /* cream over the hero photo, red once the bar appears */ background-color: var(--cream); transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.35s ease; } .header--scrolled .hamburger span { background-color: var(--red); } .hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .nav { position: fixed; top: 0; right: 0; z-index: 105; width: min(75vw, 320px); height: 100vh; height: 100dvh; background-color: var(--red); padding: 6.5rem 2rem 2rem; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 0.4s ease; /* no shadow while closed, or it bleeds onto the page's right edge */ box-shadow: none; } .nav.open { transform: translateX(0); box-shadow: -10px 0 30px rgba(74, 59, 50, 0.25); } .nav__list { list-style: none; display: flex; flex-direction: column; gap: 1.75rem; } .nav__link { font-family: var(--font-title); color: var(--cream); text-decoration: none; font-size: 1.15rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; transition: opacity 0.2s ease, padding-left 0.2s ease; } .nav__link:hover, .nav__link:focus-visible { opacity: 0.75; padding-left: 6px; } /* ============================================================ HERO ============================================================ */ .hero { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 6.5rem 1.9rem 3rem; background-image: linear-gradient(rgba(25, 12, 8, 0.109), rgba(25, 12, 8, 0.315)), url("assets/hero-background-lafiesta.png"); background-size: cover; background-position: center; } .hero__content { max-width: 420px; text-align: center; } .hero__logo { width: 230px; margin: 0 auto 1.5rem; } .hero__text { font-size: 0.98rem; line-height: 1.65; color: var(--cream); margin-bottom: 2rem; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } .hero__buttons { display: flex; flex-direction: column; gap: 1rem; align-items: center; } .hero__buttons .btn { min-width: 230px; } /* ============================================================ SHARED SECTION PIECES ============================================================ */ .section-dot { width: 34px; margin: 0 auto 1rem; /* the cream dot asset needs a red tint on light backgrounds */ filter: brightness(0) saturate(100%) invert(30%) sepia(45%) saturate(1600%) hue-rotate(335deg) brightness(90%); } .section-title { font-family: var(--font-title); font-size: 1.85rem; font-weight: 700; color: var(--red); text-align: center; line-height: 1.2; margin-bottom: 1.25rem; } .section-title--script { display: block; font-family: var(--font-script); /* Galada only ships one upright 400 weight */ font-style: normal; font-weight: 400; font-size: 2.1rem; color: var(--brown); margin-top: 0.2rem; } .section-text { font-size: 0.95rem; line-height: 1.7; color: var(--brown-soft); text-align: center; max-width: 480px; margin: 0 auto 2rem; } /* ============================================================ EXPERIENCE SECTION (parallax background) ============================================================ */ .experience { position: relative; overflow: hidden; padding: 4.5rem 1.5rem 4rem; text-align: center; } .experience__parallax { position: absolute; inset: -20% 0; z-index: -1; background-image: url("assets/background-image.png"); /* match the viewport width (no zoomed-in crop) and tile vertically; the depth movement is vertical only */ background-size: 100% auto; background-repeat: no-repeat; background-position: bottom 30% center; opacity: 0.35; will-change: transform; } .experience__tacos { max-width: 380px; margin: 0 auto 2.25rem; } .experience__buttons { display: flex; flex-direction: column; gap: 1rem; align-items: center; scroll-margin-bottom: 40px; /* gap under the buttons when hero scrolls here */ } .experience__buttons .btn { min-width: 250px; } /* ============================================================ FLOATING IMAGE ANIMATIONS (tacos + pizza) ============================================================ */ .floating-img { animation: floaty 5s ease-in-out infinite; will-change: transform; filter: drop-shadow(0 22px 28px rgba(74, 59, 50, 0.3)); } .floating-img--delay { animation-delay: 1.2s; } @keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-16px) rotate(1.5deg); } } @media (prefers-reduced-motion: reduce) { .floating-img { animation: none; } html { scroll-behavior: auto; } } /* ============================================================ MENU SECTION (accordion) ============================================================ */ .menu { padding: 3.5rem 1.25rem; } .menu__card { background-color: var(--red); border-radius: var(--radius-lg); max-width: 560px; margin: 0 auto; padding: 2rem 0 0.5rem; box-shadow: var(--shadow); overflow: hidden; } .menu__title { font-family: var(--font-script); font-style: normal; font-weight: 400; font-size: 2.1rem; color: var(--cream); text-align: center; margin-bottom: 1.25rem; } .menu__category { border-top: 1px solid rgba(252, 247, 234, 0.25); } .menu__header { display: flex; align-items: center; gap: 1rem; width: 100%; background: none; border: none; cursor: pointer; padding: 1.35rem 1.75rem; font-family: var(--font-title); font-size: 1.25rem; font-weight: 500; color: var(--cream); text-align: left; transition: background-color 0.25s ease; } .menu__header:hover { background-color: rgba(252, 247, 234, 0.07); } .menu__dot { width: 26px; height: 26px; flex-shrink: 0; transition: transform 0.4s ease; } .menu__header[aria-expanded="true"] .menu__dot { transform: rotate(90deg) scale(1.1); } .menu__dropdown { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(0.65, 0, 0.35, 1); } .menu__dropdown > .menu__panel { overflow: hidden; } .menu__category.open .menu__dropdown { grid-template-rows: 1fr; } /* The grid item (panel) keeps only horizontal padding, constant — no vertical padding is toggled on it, so nothing snaps when the open animation starts (that snap is what made the animation stutter). The bottom breathing room lives on the inner content instead, where it just adds to the animated height. */ .menu__panel { padding: 0 1.5rem 0 3.25rem; } .menu__panel > :last-child { margin-bottom: 1.6rem; } .menu__items { list-style: none; } .menu__items li { padding: 0.6rem 0; } /* name + price share a row, description sits underneath */ .menu__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .menu__name { color: var(--cream); font-size: 1rem; font-weight: 500; } .menu__price { font-style: italic; font-weight: 500; color: var(--cream); flex-shrink: 0; } .menu__desc { margin-top: 0.2rem; padding-right: 3rem; /* keeps the text clear of the price column */ color: rgba(252, 247, 234, 0.72); font-size: 0.82rem; line-height: 1.45; } /* category-level intro note (e.g. Fajitas, Lunch, Kids) */ .menu__note { color: rgba(252, 247, 234, 0.82); font-size: 0.85rem; font-style: italic; line-height: 1.5; padding-bottom: 0.6rem; } /* small print at the bottom of a category */ .menu__footnote { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid rgba(252, 247, 234, 0.2); color: rgba(252, 247, 234, 0.65); font-size: 0.78rem; line-height: 1.5; } /* price tiers — "2 items 13.00 / 3 items 15.00", "chicken / steak / shrimp" */ .menu__tiers { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding: 0.2rem 0 0.9rem; } .menu__tier { display: flex; align-items: baseline; gap: 0.5rem; color: var(--cream); font-size: 0.95rem; } .menu__tier-label { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; font-weight: 600; } /* the pick-your-own list under Combinaciones */ .menu__choices { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; } .menu__choices li { padding: 0.3rem 0.75rem; border: 1px solid rgba(252, 247, 234, 0.35); border-radius: var(--radius-pill); color: var(--cream); font-size: 0.82rem; } /* ============================================================ ORDER ONLINE SECTION ============================================================ */ .order { padding: 4rem 1.5rem 0; text-align: center; } .order .btn { margin-bottom: 1rem; } .order__pizza { max-width: 440px; margin: 0 auto; } /* ============================================================ VISIT US SECTION ============================================================ */ .visit { background-color: var(--red); color: var(--cream); /* extra bottom padding so anchor-scrolling to #visit can bring the title fully into view */ padding: 3.5rem 1.5rem 8rem; text-align: center; } .visit__title { font-family: var(--font-title); font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; } .visit__info h3 { font-family: var(--font-title); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem; } .visit__info p { font-size: 0.95rem; line-height: 1.8; margin-bottom: 1rem; } .visit__info a { color: var(--cream); font-weight: 600; } .visit__map { max-width: 560px; margin: 2rem auto 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25); } .visit__map iframe { display: block; width: 100%; height: 320px; border: 0; } /* ============================================================ FOOTER ============================================================ */ .footer { background-color: var(--red-deep); display: flex; align-items: center; justify-content: center; gap: 0.9rem; padding: 1.25rem 1.5rem; } .footer__logo { height: 38px; width: auto; /* the small logo asset is red — flip it to cream so it shows on the dark footer */ filter: brightness(0) invert(96%) sepia(10%) saturate(300%) hue-rotate(340deg); } .footer__text { color: rgba(252, 247, 234, 0.75); font-size: 0.75rem; } /* ============================================================ SCROLL REVEAL ============================================================ */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ============================================================ LARGER SCREENS (light touch — mobile is the focus for now) ============================================================ */ @media (min-width: 768px) { .hero__buttons { flex-direction: row; justify-content: center; } .section-title { font-size: 2.4rem; } .section-title--script { font-size: 2.6rem; } .visit__map iframe { height: 400px; } } /* ============================================================ DESKTOP (>=1024px) Everything here is additive — nothing below this width changes. ============================================================ */ @media (min-width: 1024px) { /* ---------- Inline horizontal nav (replaces the hamburger) ---------- */ .hamburger { display: none; } .header { padding: 0 3rem; min-height: 80px; } .header__logo img { height: 50px; } /* turn the slide-in panel into a top-right link row */ .nav { position: fixed; top: 0; right: 0; left: auto; z-index: 111; /* above the header bar so links stay clickable */ width: auto; height: 80px; display: flex; align-items: center; padding: 0 3rem; background-color: transparent; box-shadow: none !important; transform: none !important; /* cancel the mobile off-canvas transform */ } .nav__list { flex-direction: row; gap: 2.5rem; } .nav__link { font-size: 0.95rem; color: var(--cream); /* cream over the hero photo */ } .nav__link:hover, .nav__link:focus-visible { padding-left: 0; /* cancel the mobile slide-in hover */ opacity: 0.7; } /* once scrolled past the hero, the bar turns cream so links go red */ body.is-scrolled .nav__link { color: var(--red); } /* ---------- Hero ---------- */ /* DESKTOP-ONLY PHOTO PATTERN Drop a wider crop into /assets, then uncomment and rename below. Because this rule only matches >=1024px, phones never download the desktop file (and desktops never download the mobile one). Keep the gradient line as-is — it's the dark overlay over the photo. .hero { background-image: linear-gradient( rgba(25, 12, 8, 0.109), rgba(25, 12, 8, 0.315) ), url("assets/hero-background-desktop.png"); } */ .hero__logo { width: 320px; } .hero__content { max-width: 600px; } .hero__text { font-size: 1.1rem; max-width: 540px; margin-left: auto; margin-right: auto; } /* ---------- Experience: text left, tacos right ---------- */ .experience { padding: 7rem 2rem; } .experience__content { display: grid; grid-template-columns: 1.05fr 0.95fr; column-gap: 4.5rem; align-items: center; max-width: 1120px; margin: 0 auto; text-align: left; } .experience .section-dot { grid-column: 1; margin: 0 0 1.25rem; } .experience .section-title { grid-column: 1; text-align: left; } .experience .section-text { grid-column: 1; text-align: left; max-width: none; margin: 0 0 2rem; } .experience__buttons { grid-column: 1; flex-direction: row; justify-content: flex-start; } .experience__tacos { grid-column: 2; grid-row: 1 / span 4; align-self: center; max-width: 480px; margin: 0; } /* ---------- Menu: wider centered card ---------- */ .menu { padding: 5rem 2rem; } .menu__card { max-width: 720px; } /* ---------- Order: pizza left, text right ---------- */ .order { display: grid; grid-template-columns: 0.95fr 1.05fr; column-gap: 4.5rem; align-items: center; max-width: 1120px; margin: 0 auto; padding: 7rem 2rem; text-align: left; } .order__pizza { grid-column: 1; grid-row: 1 / span 4; align-self: center; max-width: 500px; margin: 0; } .order .section-dot { grid-column: 2; margin: 0 0 1.25rem; } .order .section-title { grid-column: 2; text-align: left; } .order .section-text { grid-column: 2; text-align: left; max-width: none; margin: 0 0 2rem; } .order .btn { grid-column: 2; justify-self: start; } /* ---------- Visit: info left, map right (red stays full-bleed) ---------- */ .visit { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4.5rem; align-items: center; text-align: left; /* full-width red background, but content centered within 1120px */ padding: 6rem max(2rem, calc((100% - 1120px) / 2)); } .visit__title { grid-column: 1; text-align: left; margin-bottom: 1.5rem; } .visit__info { grid-column: 1; } .visit__map { grid-column: 2; grid-row: 1 / span 2; max-width: none; margin: 0; } .visit__map iframe { height: 460px; } /* ---------- Footer ---------- */ .footer { padding: 1.75rem 3rem; } }