/* ============================================================= Pizzería Del Valle — styles.css Archetype: Light Editorial Cream, dark-ink bands as punctuation. Paper canvas carries the brand (appetite appeal, trattoria warmth, daylight/family register); .hero/.club/.contact/.marquee/.footer commit to --ink for rhythm and cinematic contrast. See PROJECT NOTES at the end of this file for the full design rationale. ============================================================= */ /* ============================================================= 1. Tokens ============================================================= */ :root { --bg: #f8f0e2; --bg-2: #efe0c4; --paper: #fffaf1; --ink: #2a1810; --ink-soft: #4a3222; --ink-mute: #8a7360; --accent: #c1442d; --accent-2: #4c6b3f; --accent-3: #d99a3d; --line: rgba(42, 24, 16, 0.12); --line-soft: rgba(42, 24, 16, 0.07); --serif: "Newsreader", "Georgia", serif; --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --nav-h: 76px; } @property --mesh-angle { syntax: ""; inherits: false; initial-value: 0deg; } /* ============================================================= 2. Reset & base ============================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; } html { -webkit-text-size-adjust: 100%; tab-size: 2; overflow-x: clip; scroll-behavior: smooth; } body { font-family: var(--sans); font-size: 16px; line-height: 1.6; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; overscroll-behavior-y: none; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; } a { color: inherit; text-decoration: none; } p { text-wrap: pretty; } h1, h2, h3, h4 { text-wrap: balance; line-height: 1.05; letter-spacing: -0.01em; font-family: var(--serif); font-weight: 500; } em { font-style: italic; color: var(--accent); } ::selection { background: var(--accent); color: var(--paper); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .skip-link { position: fixed; top: -100px; left: 1rem; padding: .6rem 1rem; background: var(--ink); color: var(--paper); z-index: 9999; border-radius: 8px; font-weight: 600; } .skip-link:focus { top: 1rem; } /* ============================================================= 3. Utilities ============================================================= */ .container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 1.25rem; } .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; } .kicker { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: .5rem; } .kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; } .section { padding-block: clamp(4rem, 9vw, 8.5rem); } .section-head { max-width: 660px; margin-bottom: clamp(2.4rem, 6vw, 4.2rem); } .section-head h2 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin-top: .7rem; font-weight: 550; } .section-head p { color: var(--ink-mute); margin-top: 1rem; font-size: 1.08rem; max-width: 52ch; } /* Reveal system: hidden state only applies once JS confirms it can actually reveal the element again (has-js, set synchronously in ). No JS at all → content is visible from first paint. */ .has-js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft); } .has-js [data-reveal].is-revealed { opacity: 1; transform: none; } /* Split-text words: only hidden under has-js, and only until JS wraps the words and flips is-split-ready. A CSS-only fallback animation forces the heading back to visible plain text if JS never gets that far — never permanently hidden. */ .split-word { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; } .split-word-inner { display: inline-block; will-change: transform; } .has-js [data-split] { opacity: 0; } .has-js [data-split].is-split-ready { opacity: 1; transition: opacity .2s linear; } .has-js [data-split] .split-word-inner { transform: translateY(112%) rotate(3deg); transition: transform .95s var(--ease-out); transition-delay: var(--d, 0ms); } .has-js [data-split].is-split-ready .split-word-inner { transform: none; } @keyframes splitFallbackIn { to { opacity: 1; } } .has-js .hero-title[data-split] { animation: splitFallbackIn 0s 1.3s forwards; } .has-js .page-head h1[data-split] { animation: splitFallbackIn 0s .9s forwards; } /* ============================================================= 4. Buttons ============================================================= */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .95rem 1.6rem; border-radius: 999px; overflow: hidden; font-weight: 700; font-size: .95rem; letter-spacing: .01em; transition: transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft), background .3s var(--ease-out); white-space: nowrap; } .btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120px circle at var(--bx,50%) var(--by,50%), rgba(255,255,255,.22), transparent 65%); opacity: 0; transition: opacity .4s var(--ease-out); } .btn:hover::after { opacity: 1; } .btn-primary { background: var(--accent); color: var(--paper); box-shadow: 0 4px 14px rgba(193,68,45,.28), 0 1px 3px rgba(193,68,45,.18); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(193,68,45,.32), 0 8px 18px rgba(193,68,45,.2); } .btn-primary:active { transform: translateY(-1px); transition-duration: .12s; } .btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); } .btn-ghost:hover { border-color: var(--ink); transform: translateY(-3px); } .btn-ghost.size-grande { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: 0 8px 18px -8px rgba(0,0,0,.5); transform: scale(1.05); } .btn-ghost.size-grande:hover { background: #000; border-color: #000; transform: scale(1.05) translateY(-3px); } .btn-sm { padding: .6rem 1.05rem; font-size: .82rem; } .btn svg { width: 1.15em; height: 1.15em; flex: none; } /* Magnetic CTAs: JS drives --mx/--my (translate) while active; CSS hover transform steps aside so the two never fight. Buttons keep their normal hover/active states whenever JS/fine-pointer isn't there. */ .has-fine-pointer [data-magnetic] { transition: transform .5s var(--ease-out), box-shadow .45s var(--ease-soft), background .3s var(--ease-out); } .has-fine-pointer [data-magnetic]:hover { transform: translate3d(var(--mx, 0), var(--my, 0), 0); } .has-fine-pointer [data-magnetic].is-magnet-active:hover { box-shadow: 0 24px 46px -14px rgba(42,24,16,.4); } /* ============================================================= 5. Nav ============================================================= */ .nav { position: fixed; top: 0; inset-inline: 0; z-index: 100; height: var(--nav-h); transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out), backdrop-filter .4s var(--ease-out); } .nav.is-scrolled { background: rgba(248, 240, 226, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); } .nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .nav-brand { display: flex; align-items: center; gap: .65rem; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; } .nav-brand img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; } .nav-links { display: none; align-items: center; gap: 2rem; font-size: .92rem; font-weight: 600; } .nav-link { position: relative; padding: .25rem 0; } .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-soft); } .nav-link:hover::after { transform: scaleX(1); transform-origin: left; } .nav-link[aria-current="page"] { color: var(--accent); } .nav-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; background: var(--accent); } /* On pages with a dark hero at top, nav text must be light until scrolled */ .nav.on-hero:not(.is-scrolled) .nav-brand, .nav.on-hero:not(.is-scrolled) .nav-link { color: var(--paper); } .nav.on-hero:not(.is-scrolled) .nav-link[aria-current="page"] { color: var(--accent-3); } .nav.on-hero:not(.is-scrolled) .nav-burger { border-color: rgba(248,240,226,.4); } .nav.on-hero:not(.is-scrolled) .nav-burger span, .nav.on-hero:not(.is-scrolled) .nav-burger span::before, .nav.on-hero:not(.is-scrolled) .nav-burger span::after { background: var(--paper); } .nav-cta { display: none; } /* Open/closed indicator. Hidden by default: initOpenStatus() in main.js only removes [hidden] once real hours are configured in manifest.js (hours is null until then) — so an unconfigured site never shows a fake status. Kept out of the mobile header (below 960px) same as .nav-cta, to avoid crowding a header that already relies on the burger menu there. */ .open-status { display: none; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 600; white-space: nowrap; position: relative; cursor: pointer; } .open-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(120,110,100,.5); flex: none; } .open-status[data-status="open"]::before { background: #2fae5c; box-shadow: 0 0 0 3px rgba(47,174,92,.18); } .nav.on-hero:not(.is-scrolled) .open-status { color: var(--paper); } /* Delivery info dropdown — same click/keyboard/panel mechanics as the hours badge above (attached in main.js by initDeliveryDropdown), just with its own static content instead of the weekly schedule. */ .nav-delivery-trigger { display: none; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 600; white-space: nowrap; position: relative; cursor: pointer; background: none; border: none; padding: 0; font: inherit; color: inherit; } .nav-delivery-trigger::after { content: "▾"; font-size: .7em; } .nav.on-hero:not(.is-scrolled) .nav-delivery-trigger { color: var(--paper); } .delivery-panel { min-width: 250px; text-align: left; } .delivery-panel p:first-child { margin: 0 0 .5rem; font-weight: 700; color: var(--ink); font-size: .85rem; } .delivery-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; } .delivery-panel li { font-size: .82rem; color: var(--ink-mute); line-height: 1.4; } .delivery-panel li strong { color: var(--accent); margin-right: .2rem; } .delivery-panel p:last-child { margin: .6rem 0 0; font-size: .78rem; color: var(--accent); font-weight: 600; } /* Tap/click target -> expands the full week, built by attachHoursPanel() in main.js. Anchored to the badge itself so it works the same whether the badge lives in the desktop nav bar or the mobile menu overlay. */ .hours-panel { position: absolute; top: calc(100% + .6rem); left: 0; z-index: 20; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 45px -20px rgba(42,24,16,.4); padding: .9rem 1.1rem; min-width: 230px; opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; transition: opacity .25s ease, transform .25s ease, visibility .25s; } .hours-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .hours-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; } .hours-panel li { display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem; font-size: .82rem; font-weight: 500; } .hours-panel .hours-day { color: var(--ink); font-weight: 700; } .hours-panel .hours-range { color: var(--ink-mute); text-align: right; } .hours-panel li.is-today .hours-day, .hours-panel li.is-today .hours-range { color: var(--accent); } /* .delivery-panel also carries the .hours-panel class (for the shared dropdown box styling) — this has to come after .hours-panel li above to win the cascade and undo its flex/space-between, which was meant for day/time-range pairs, not this panel's plain sentences. */ .delivery-panel li { display: block; } .nav-burger { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line); } .nav-burger span { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; } .nav-burger span::before, .nav-burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); transition: transform .3s var(--ease-out); } .nav-burger span::before { top: -6px; } .nav-burger span::after { top: 6px; } @media (min-width: 960px) { .nav-links { display: flex; } .nav-cta { display: inline-flex; } .nav-burger { display: none; } .open-status:not([hidden]) { display: inline-flex; } .nav-delivery-trigger { display: inline-flex; } } .nav-mobile { position: fixed; inset: 0; z-index: 95; background: var(--ink); color: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; clip-path: inset(0 0 100% 0); transition: clip-path .65s var(--ease-soft); } .nav-mobile[data-open="true"] { clip-path: inset(0); } .nav-mobile a { font-family: var(--serif); font-size: 1.9rem; font-style: italic; } .nav-mobile .btn-primary { margin-top: 1rem; } /* The nav-bar .open-status is desktop-only (see the media query above) — this second copy inside the mobile menu is how phones reach it. */ .nav-mobile .open-status:not([hidden]) { display: flex; font-size: .95rem; font-family: var(--sans); color: var(--paper); } .nav-mobile .nav-delivery-trigger { display: flex; font-size: .95rem; font-family: var(--sans); color: var(--paper); } .nav-mobile .hours-panel { left: 50%; transform: translate(-50%, -6px); text-align: left; } .nav-mobile .hours-panel.is-open { transform: translate(-50%, 0); } /* ============================================================= 5b. Fine-grain film texture — pure CSS pseudo-element, no markup and no JS dependency, so it's there (or safely isn't) either way. ============================================================= */ body::after { content: ""; position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: .035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============================================================= 6. Hero ============================================================= */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: clip; isolation: isolate; } .hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; } .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1) contrast(1.06) brightness(.97); opacity: 0; transition: opacity 1.6s ease; animation: ambientZoom 28s ease-in-out infinite; } .hero-bg img.is-active { opacity: 1; } @keyframes ambientZoom { 0%, 100% { transform: scale(1.05) translate3d(0,0,0); } 50% { transform: scale(1.14) translate3d(-1%,-1%,0); } } .hero-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(15,8,5,.88) 0%, rgba(15,8,5,.72) 45%, rgba(15,8,5,.62) 70%, rgba(15,8,5,.68) 100%); } .hero-inner { width: 100%; padding-block: calc(var(--nav-h) + 2.5rem) 3.5rem; color: var(--paper); } /* Curtain: pure CSS, needs no JS to run or to finish. A stage-lift reveal timed to land right as the hero image has faded in. */ .hero-curtain { position: absolute; inset: 0; z-index: 5; background: var(--ink); transform-origin: top; animation: heroCurtainLift .9s var(--ease-in) .55s forwards; pointer-events: none; } @keyframes heroCurtainLift { 0% { transform: scaleY(1); } 100% { transform: scaleY(0); } } .hero-badge { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(248,240,226,.85); background: rgba(248,240,226,.1); border: 1px solid rgba(248,240,226,.25); padding: .5rem .9rem; border-radius: 999px; backdrop-filter: blur(6px); } .hero-badge::before { content: "🍕"; font-size: .95rem; } .hero-title { margin-top: 1.3rem; font-size: clamp(2.9rem, 8.4vw, 6.6rem); font-weight: 550; line-height: .96; letter-spacing: -.015em; max-width: 17ch; color: var(--paper); } .hero-title em { color: var(--accent-3); font-style: italic; } .hero-sub { margin-top: 1.1rem; max-width: 46ch; font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: rgba(248,240,226,.86); } .hero-actions { margin-top: 1.9rem; display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; } .hero-actions .btn-ghost { border-color: rgba(248,240,226,.4); color: var(--paper); } .hero-actions .btn-ghost:hover { border-color: var(--paper); } .hero-stats { margin-top: 3rem; display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.4rem; padding-top: 2rem; border-top: 1px solid rgba(248,240,226,.2); max-width: 760px; } .hero-stat-num { font-family: var(--serif); font-style: italic; font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--accent-3); display: block; } .hero-stat-label { font-size: .85rem; color: rgba(248,240,226,.75); margin-top: .2rem; } @media (min-width: 720px) { .hero-stats { grid-template-columns: repeat(3, 1fr); } } /* ============================================================= 6b. Photography grade — the site mixes stock photos with real phone shots from the local. One shared filter pulls both toward the same warm/contrasty register so they read as one system. ============================================================= */ .about-figure img, .local-figure img, .gallery-grid img, .flavor-card img, .cta-band-bg img { filter: saturate(1.12) contrast(1.06) brightness(1.02); } /* ============================================================= 7. Manifesto / About ============================================================= */ .about { background: var(--paper); } .about-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; } .about-figure { position: relative; border-radius: 20px; overflow: hidden; isolation: isolate; aspect-ratio: 4 / 3; box-shadow: 0 30px 60px -25px rgba(42,24,16,.35); } .about-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.55); opacity: 0; transition: opacity 1.2s ease; } .about-figure img.is-active { opacity: 1; } .about-figure::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(155deg, rgba(74,32,20,.16), transparent 45%, rgba(217,154,61,.1)); mix-blend-mode: multiply; } .about-copy p { color: var(--ink-soft); font-size: 1.05rem; margin-top: 1rem; max-width: 56ch; } .about-copy p:first-of-type { margin-top: 1.4rem; } .pull-quote { margin-top: 1.8rem; padding-left: 1.3rem; border-left: 3px solid var(--accent); font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--ink); max-width: 50ch; } .pull-quote cite { display: block; margin-top: .6rem; font-style: normal; font-family: var(--sans); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); } @media (min-width: 960px) { .about-grid { grid-template-columns: .85fr 1.15fr; align-items: center; gap: 4rem; } } /* Uniform auto-fill grid (not a hand-tuned masonry) so it keeps working cleanly as more real photos get added over time — a fixed nth-child masonry only looks right for the exact number of tiles it was tuned for. */ .gallery-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } } .gallery-grid figure { position: relative; isolation: isolate; cursor: pointer; border-radius: 16px; overflow: hidden; aspect-ratio: 1 / 1; box-shadow: 0 20px 45px -30px rgba(42,24,16,.35); } .gallery-grid figure:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .gallery-grid figure::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(20,10,6,.38), transparent 55%); opacity: 0; transition: opacity .5s var(--ease-soft); } .gallery-grid figure:hover::after { opacity: 1; } .gallery-grid img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.55); transition: transform .7s var(--ease-soft); } .gallery-grid figure:hover img { transform: scale(1.67); } /* Lightbox — injected by initGalleryLightbox() in main.js, one shared overlay per page reused for every .gallery-grid figure. */ .lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 2rem; background: rgba(20,10,6,.88); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s var(--ease-soft), visibility .3s; } .lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .lightbox-inner { position: relative; display: flex; flex-direction: column; gap: 1.1rem; align-items: center; max-width: min(92vw, 960px); max-height: 90vh; } .lightbox-img-wrap { position: relative; width: min(92vw, 640px); max-height: 70vh; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(0,0,0,.6); } .lightbox-img { /* object-fit:cover + a scale nudge (same trick used on the card thumbnails) crops out the delivery-box edges visible in the source photos — the lightbox used to show them uncropped via object-fit:contain. */ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.55); } .lightbox-caption { color: var(--paper); font-family: var(--serif); font-style: italic; font-size: 1.1rem; text-align: center; max-width: 60ch; margin: 0; } .lightbox-close { position: absolute; top: -2.8rem; right: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(248,240,226,.14); border: 1px solid rgba(248,240,226,.35); color: var(--paper); font-size: 1.3rem; line-height: 1; cursor: pointer; } .lightbox-close:hover { background: rgba(248,240,226,.28); } body.lightbox-lock { overflow: hidden; } @media (min-width: 720px) { .lightbox-inner { flex-direction: row; text-align: left; } .lightbox-img-wrap { max-height: 80vh; width: min(60vw, 520px); } .lightbox-caption { text-align: left; max-width: 24ch; font-size: 1.3rem; } .lightbox-close { top: -.5rem; right: -3rem; } } /* ============================================================= 8. Marquee ============================================================= */ .marquee-wrap { background: var(--ink); color: var(--paper); padding-block: 1.1rem; overflow: hidden; position: relative; } .marquee-track { display: inline-flex; gap: 2.5rem; white-space: nowrap; will-change: transform; } .marquee-track span { font-family: var(--serif); font-style: italic; font-size: 1.15rem; display: inline-flex; align-items: center; gap: 2.5rem; color: rgba(248,240,226,.9); } .marquee-track span::after { content: "🍕"; font-size: 1rem; } /* ============================================================= 9. Flavors — asymmetric grid ============================================================= */ .flavors { background: var(--bg); } .flavor-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; } @media (min-width: 640px) { .flavor-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .flavor-grid { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 320px; } .flavor-card[data-size="lg"] { grid-column: span 5; grid-row: span 2; } .flavor-card[data-size="md"] { grid-column: span 4; grid-row: span 1; } .flavor-grid .flavor-card:nth-child(1) { grid-column: span 5; grid-row: span 2; } .flavor-grid .flavor-card:nth-child(2) { grid-column: span 4; grid-row: span 1; } .flavor-grid .flavor-card:nth-child(3) { grid-column: span 3; grid-row: span 1; } .flavor-grid .flavor-card:nth-child(4) { grid-column: span 4; grid-row: span 1; } .flavor-grid .flavor-card:nth-child(5) { grid-column: span 3; grid-row: span 1; } .flavor-grid .flavor-card:nth-child(6) { grid-column: span 7; grid-row: span 1; } .flavor-grid .flavor-card:nth-child(7) { grid-column: span 5; grid-row: span 1; } } .flavor-card { position: relative; border-radius: 18px; overflow: hidden; isolation: isolate; min-height: 320px; --rx: 0deg; --ry: 0deg; transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .55s var(--ease-soft), box-shadow .55s var(--ease-soft); box-shadow: 0 20px 40px -22px rgba(42,24,16,.4); } .flavor-card:hover { transition-duration: .15s; box-shadow: 0 40px 70px -25px rgba(193,68,45,.4); } .flavor-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(217,154,61,.35), transparent 60%); opacity: 0; transition: opacity .35s; mix-blend-mode: screen; pointer-events: none; } .flavor-card:hover::before { opacity: 1; } .flavor-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.55); transition: transform .9s var(--ease-soft), filter .6s; } .flavor-card:hover img { transform: scale(1.67); filter: saturate(1.15) brightness(1.03); } .flavor-card-tint { position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(20,10,6,.92) 0%, rgba(20,10,6,.35) 55%, rgba(20,10,6,.05) 80%); } .flavor-card-body { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 1.3rem 1.4rem; transform: translateZ(30px); } .flavor-note { font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-3); display: block; margin-bottom: .35rem; } .flavor-num { /* Sans, not mono: JetBrains Mono's slashed zero reads as an "8" at this size, which is exactly the kind of misread we can't afford on a badge whose only job is showing the menu number correctly. */ position: absolute; top: 1rem; left: 1rem; z-index: 2; font-family: var(--sans); font-size: .78rem; font-weight: 800; letter-spacing: .02em; color: var(--paper); background: rgba(20,10,6,.55); backdrop-filter: blur(3px); border: 1px solid rgba(248,240,226,.35); border-radius: 999px; padding: .3rem .6rem; } .flavor-card h3 { color: var(--paper); font-size: 1.3rem; } .flavor-desc { color: rgba(248,240,226,.88); font-size: .84rem; margin-top: .35rem; max-width: 34ch; white-space: pre-line; } .flavor-order { display: inline-flex; align-items: center; gap: .4rem; margin-top: .8rem; padding: .5rem .9rem; border-radius: 999px; background: rgba(248,240,226,.14); border: 1px solid rgba(248,240,226,.35); font-size: .82rem; font-weight: 700; color: var(--paper); transition: background .3s, transform .3s var(--ease-soft); } .flavor-order:hover, .flavor-order:focus-visible { background: var(--accent); border-color: var(--accent); transform: translateY(-2px); } .flavor-order svg { width: 1.05em; height: 1.05em; } .flavor-order-group { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; } .flavor-order-group .flavor-order { margin-top: 0; } .flavor-order.size-grande { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: 0 8px 20px -6px rgba(0,0,0,.6); transform: scale(1.05); } .flavor-order.size-grande:hover, .flavor-order.size-grande:focus-visible { background: #000; border-color: #000; transform: scale(1.05) translateY(-2px); } /* ============================================================= 9a2. Combo builder (mitad y mitad) ============================================================= */ .combo[hidden] { display: none; } .combo-card { background: var(--paper); border-radius: 20px; padding: 1.8rem; box-shadow: 0 20px 45px -30px rgba(42,24,16,.35); max-width: 640px; } .combo-row { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; } .combo-field { flex: 1 1 200px; } .combo-field label { display: block; font-size: .78rem; color: var(--ink-mute); margin-bottom: .4rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; } .combo-field select { width: 100%; padding: .8rem .9rem; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: .95rem; } .combo-field select:focus { outline: none; border-color: var(--accent); } .combo-plus { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--accent); padding-bottom: .8rem; } .combo-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); } .combo-total { display: flex; flex-direction: column; } .combo-total span { font-size: .78rem; color: var(--ink-mute); } .combo-total strong { font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: var(--accent); } /* ============================================================= 9b. Promos & otros platos ============================================================= */ .promos { background: var(--paper); } .promo-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .promo-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .promo-grid { grid-template-columns: repeat(3, 1fr); } } .promo-card { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 1.4rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.1rem; transition: transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft), border-color .3s; } .promo-card:hover { transform: translateY(-4px); box-shadow: 0 24px 45px -28px rgba(42,24,16,.35); border-color: var(--accent); } .promo-card h3 { font-size: 1.2rem; } .promo-card p { color: var(--ink-mute); font-size: .9rem; margin-top: .4rem; } .promo-foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; } .promo-price { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--accent); display: block; } .promo-price-alt { display: block; font-family: var(--sans); font-style: normal; font-size: .74rem; color: var(--ink-mute); margin-top: .1rem; } .promo-price-consult { font-family: var(--sans); font-style: normal; font-size: .86rem; font-weight: 700; color: var(--ink-mute); } .otros { margin-top: 2.5rem; padding-top: 2.2rem; border-top: 1px solid var(--line); } .otros-head { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 1.1rem; display: block; } .otros-list { display: flex; flex-direction: column; gap: .9rem; } .otros-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.2rem; border-radius: 14px; background: var(--bg); } .otros-item h4 { font-family: var(--serif); font-weight: 500; font-size: 1.05rem; } .otros-item p { color: var(--ink-mute); font-size: .86rem; margin-top: .2rem; } .otros-foot { display: flex; align-items: center; gap: 1rem; } .flavor-list { display: flex; flex-direction: column; gap: .7rem; } .flavor-list-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .9rem 1.2rem; border-radius: 14px; background: var(--bg); } .flavor-list-info h4 { font-family: var(--serif); font-weight: 500; font-size: 1.02rem; } .flavor-list-num { font-family: var(--sans); font-size: .78rem; font-weight: 800; color: var(--accent-3); margin-right: .1rem; } .flavor-list-note { font-family: var(--sans); font-size: .78rem; font-weight: 600; color: var(--accent); } .flavor-list-info p { color: var(--ink-mute); font-size: .84rem; margin-top: .2rem; max-width: 46ch; white-space: pre-line; } .flavor-list-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .flavor-list-prices { display: flex; gap: .7rem; flex-wrap: wrap; } .flavor-list-price { font-family: var(--sans); font-size: .78rem; font-weight: 700; color: var(--accent); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: .25rem .7rem; white-space: nowrap; } .flavor-list-price-consult { color: var(--ink-mute); background: transparent; border-style: dashed; } .flavor-list-buttons { display: flex; gap: .5rem; flex-wrap: wrap; } /* ============================================================= 10. Process steps ============================================================= */ .process { background: var(--paper); } .process-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; } @media (min-width: 800px) { .process-grid { grid-template-columns: repeat(3, 1fr); } } .step-num { font-family: var(--serif); font-style: italic; font-size: 2.4rem; color: var(--accent); } .step h3 { margin-top: .6rem; font-size: 1.3rem; } .step p { margin-top: .5rem; color: var(--ink-mute); } .step { padding-top: 1.6rem; border-top: 2px solid var(--line); } /* ============================================================= 11. Testimonials ============================================================= */ .testimonials { background: var(--bg-2); } .testi-grid { display: grid; gap: 1.4rem; grid-template-columns: 1fr; } @media (min-width: 860px) { .testi-grid { grid-template-columns: repeat(3, 1fr); } } .testi-card { background: var(--paper); border-radius: 18px; padding: 1.7rem; box-shadow: 0 20px 45px -28px rgba(42,24,16,.4); display: flex; flex-direction: column; gap: .9rem; } .testi-stars { color: var(--accent-3); letter-spacing: .1em; font-size: .95rem; } .testi-quote { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--ink); flex: 1; } .testi-author { display: flex; flex-direction: column; gap: .1rem; } .testi-name { font-weight: 700; font-size: .92rem; } .testi-meta { font-size: .78rem; color: var(--ink-mute); } .testi-reply { margin-top: .3rem; padding: .8rem .9rem; border-radius: 12px; background: var(--bg); font-size: .84rem; color: var(--ink-soft); } .testi-reply strong { color: var(--accent-2); } /* ============================================================= 11b. Club (WhatsApp signup) ============================================================= */ .club { background: var(--ink); color: var(--paper); position: relative; overflow: clip; isolation: isolate; } .club::before { content: ""; position: absolute; inset: -20% -10%; z-index: -1; background: radial-gradient(45% 45% at 80% 20%, rgba(76,107,63,.32), transparent 70%), radial-gradient(40% 40% at 15% 85%, rgba(193,68,45,.3), transparent 70%); filter: blur(90px); } .club-inner { display: grid; gap: 2.2rem; grid-template-columns: 1fr; align-items: center; } @media (min-width: 900px) { .club-inner { grid-template-columns: 1fr .95fr; gap: 3.5rem; } } .club-copy h2 { color: var(--paper); font-size: clamp(1.9rem, 4vw, 2.7rem); margin-top: .6rem; } .club-copy p { color: rgba(248,240,226,.78); margin-top: .9rem; max-width: 42ch; } .club-card { background: var(--paper); color: var(--ink); border-radius: 20px; padding: 1.8rem; box-shadow: 0 30px 60px -25px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 1.1rem; } .club-submit { justify-content: center; } .club-fine { font-size: .78rem; color: var(--ink-mute); text-align: center; } .field { position: relative; } .field input { width: 100%; padding: 1.4rem 1rem .6rem; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; font-size: 1rem; transition: border-color .3s; } .field input:focus { border-color: var(--accent); outline: none; } .field label { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; transition: all .2s var(--ease-out); color: var(--ink-mute); font-size: .96rem; } .field input:focus + label, .field input:not(:placeholder-shown) + label { top: .55rem; transform: none; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } /* ============================================================= 12. Contact / location ============================================================= */ .contact { background: var(--ink); color: var(--paper); position: relative; overflow: clip; isolation: isolate; } .contact::before { content: ""; position: absolute; inset: -20% -10% -20% -10%; z-index: -1; background: radial-gradient(45% 45% at 20% 30%, rgba(193,68,45,.35), transparent 70%), radial-gradient(40% 40% at 85% 75%, rgba(76,107,63,.28), transparent 70%); filter: blur(90px); } .contact-grid { display: grid; gap: 2.4rem; grid-template-columns: 1fr; } @media (min-width: 960px) { .contact-grid { grid-template-columns: 1fr 1fr; align-items: stretch; } } .contact-info h2 { color: var(--paper); font-size: clamp(1.9rem, 4vw, 2.7rem); } .contact-info > p { color: rgba(248,240,226,.75); margin-top: .9rem; max-width: 42ch; } .contact-list { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.1rem; } .contact-item { display: flex; align-items: flex-start; gap: .9rem; } .contact-item svg { width: 1.4rem; height: 1.4rem; flex: none; color: var(--accent-3); margin-top: .1rem; } .contact-item a, .contact-item span { color: rgba(248,240,226,.92); font-size: .98rem; } .contact-item a:hover { color: var(--accent-3); } .contact-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .9rem; } .delivery-accordion { margin-top: 1.6rem; border: 1px solid rgba(248,240,226,.18); border-radius: 14px; overflow: hidden; background: rgba(248,240,226,.06); } .delivery-accordion summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.1rem; font-weight: 700; font-size: 1rem; color: var(--paper); } .delivery-accordion summary::-webkit-details-marker { display: none; } .delivery-accordion summary::after { content: "▾"; color: var(--accent-3); transition: transform .3s; } .delivery-accordion[open] summary::after { transform: rotate(180deg); } .delivery-accordion .delivery-body { padding: 0 1.1rem 1.1rem; color: rgba(248,240,226,.8); font-size: .92rem; line-height: 1.6; } .delivery-accordion .delivery-body p { margin: 0; } .delivery-accordion .delivery-body ul { margin-top: .5rem; padding-left: 1.2rem; } .delivery-accordion .delivery-body li { margin-top: .3rem; } .delivery-accordion .delivery-body li strong { color: var(--accent-3); margin-right: .2rem; } .delivery-accordion .delivery-warning { margin-top: .8rem !important; color: var(--accent-3); font-weight: 600; font-size: .85rem; } .map-frame { border-radius: 18px; overflow: hidden; border: 1px solid rgba(248,240,226,.15); min-height: 320px; height: 100%; } .map-frame iframe { width: 100%; height: 100%; min-height: 320px; border: 0; filter: saturate(.85) contrast(1.05); } /* ============================================================= 13. Final CTA band ============================================================= */ .cta-band { position: relative; color: var(--paper); text-align: center; overflow: clip; isolation: isolate; } .cta-band-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; } .cta-band-bg img { width: 100%; height: 100%; object-fit: cover; } .cta-band-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(193,68,45,.94), rgba(74,32,20,.88)); } .cta-band h2 { color: var(--paper); font-size: clamp(1.8rem, 4.6vw, 3rem); max-width: 20ch; margin-inline: auto; } .cta-band p { color: rgba(255,250,241,.88); margin-top: .9rem; } .cta-band .btn-primary { background: var(--paper); color: var(--accent); margin-top: 1.8rem; } .cta-band .btn-primary:hover { box-shadow: 0 20px 40px rgba(0,0,0,.25); } /* ============================================================= 14. Footer ============================================================= */ .footer { background: var(--ink); color: rgba(248,240,226,.7); padding-block: 2.6rem; } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; } .footer-brand { display: flex; align-items: center; gap: .6rem; font-family: var(--serif); font-style: italic; color: var(--paper); font-size: 1.05rem; } .footer-brand img { width: 34px; height: 34px; border-radius: 50%; } .footer-links { display: flex; gap: 1.4rem; font-size: .85rem; flex-wrap: wrap; } .footer-links a:hover { color: var(--paper); } .footer-fine { margin-top: 1.6rem; font-size: .76rem; color: rgba(248,240,226,.45); display: flex; gap: .5rem; flex-wrap: wrap; } /* ============================================================= 15. Floating WhatsApp button ============================================================= */ .wa-float { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px rgba(37,211,102,.45); transition: transform .4s var(--ease-soft); } .wa-float:hover { transform: scale(1.08); } .wa-float svg { width: 28px; height: 28px; } /* wa-float is round and relies on its scale pop for hover feedback, so unlike the other [data-magnetic] CTAs (translate only, see rule above) it keeps both effects at once — higher specificity than the generic magnetic rule. */ .has-fine-pointer .wa-float[data-magnetic]:hover { transform: translate3d(var(--mx, 0), var(--my, 0), 0) scale(1.08); } /* ============================================================= 15b. Floating cart ============================================================= */ .cart-float { position: fixed; right: 1.1rem; bottom: 5.6rem; z-index: 90; width: 54px; height: 54px; border-radius: 50%; background: var(--accent); color: var(--paper); display: grid; place-items: center; box-shadow: 0 12px 30px rgba(193,68,45,.4); transition: transform .4s var(--ease-soft), opacity .3s, visibility .3s; } .cart-float:hover { transform: scale(1.08); } .cart-float svg { width: 24px; height: 24px; } .cart-float[hidden] { display: none; } .cart-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 999px; background: var(--accent-3); color: var(--ink); font-family: var(--sans); font-size: .7rem; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--bg); } .cart-panel { position: fixed; right: 1.1rem; bottom: 5.6rem; z-index: 95; width: min(360px, calc(100vw - 2.2rem)); max-height: min(70vh, 520px); background: var(--paper); color: var(--ink); border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); display: flex; flex-direction: column; opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none; transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); } .cart-panel.is-open { opacity: 1; transform: none; pointer-events: auto; } .cart-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); } .cart-panel-head h3 { font-size: 1.05rem; } .cart-panel-close { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-mute); } .cart-panel-close:hover { background: var(--bg); } .cart-list { list-style: none; overflow-y: auto; padding: .4rem .6rem; flex: 1; } .cart-list-empty { padding: 1.6rem 1rem; text-align: center; color: var(--ink-mute); font-size: .88rem; } .cart-item { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem .5rem; border-radius: 10px; } .cart-item:hover { background: var(--bg); } .cart-item-name { font-size: .9rem; } .cart-item-remove { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-mute); font-size: 1rem; flex: none; } .cart-item-remove:hover { background: var(--line); color: var(--ink); } .cart-panel-foot { padding: 1rem 1.1rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .6rem; } .cart-panel-foot .btn { width: 100%; } .cart-clear { text-align: center; font-size: .8rem; color: var(--ink-mute); } .cart-clear:hover { color: var(--accent); } /* ============================================================= 16b. Interior page header ============================================================= */ .page-head { padding-block: calc(var(--nav-h) + 3.4rem) 2.6rem; background: var(--bg-2); } .page-head h1 { font-size: clamp(2.5rem, 6.4vw, 4.4rem); font-weight: 550; letter-spacing: -.015em; margin-top: .7rem; } .page-head p { color: var(--ink-mute); margin-top: 1rem; max-width: 60ch; font-size: 1.08rem; } .payment-notice { margin-top: 1.4rem; max-width: 60ch; padding: .9rem 1.1rem; border-radius: 14px; background: rgba(193,68,45,.08); border: 1px solid rgba(193,68,45,.3); color: var(--ink); font-size: .92rem; line-height: 1.5; } .payment-notice strong { color: var(--accent); } /* ============================================================= 16bb. Photo placeholder (pending real photo) ============================================================= */ .local-block { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; } @media (min-width: 800px) { .local-block { grid-template-columns: 1fr 1fr; gap: 3rem; } } .local-figure { position: relative; isolation: isolate; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 30px 60px -25px rgba(42,24,16,.35); } .local-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.22); opacity: 0; transition: opacity 1.2s ease; } .local-figure img.is-active { opacity: 1; } .local-figure::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(155deg, rgba(74,32,20,.18), transparent 45%, rgba(217,154,61,.1)); mix-blend-mode: multiply; } .local-copy h2 { font-size: 1.5rem; margin-top: .5rem; } .local-copy p { color: var(--ink-mute); margin-top: .6rem; } /* ============================================================= 16c. Teaser strip (homepage callouts to other pages) ============================================================= */ .teaser-strip { background: var(--paper); border-radius: 20px; padding: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; box-shadow: 0 20px 45px -30px rgba(42,24,16,.35); } .teaser-strip-copy h3 { font-size: 1.5rem; } .teaser-strip-copy p { color: var(--ink-mute); margin-top: .4rem; max-width: 46ch; } .teaser-strip .btn { flex: none; } /* ============================================================= 16. Credits page ============================================================= */ .page-credits { padding-top: calc(var(--nav-h) + 2rem); } .page-credits main { max-width: 760px; margin-inline: auto; padding: 0 1.25rem 5rem; } .page-credits h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); } .page-credits > main > p { margin-top: 1rem; color: var(--ink-mute); } .credits-list { margin-top: 2rem; list-style: none; display: flex; flex-direction: column; gap: 1rem; } .credits-list li { padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 12px; font-size: .92rem; } .credits-list a { color: var(--accent); text-decoration: underline; } .back-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .9rem; } /* ============================================================= 17. Reduced-motion — gate only continuous/autoplaying loops (ambient zoom, marquee). One-shot reveals, scroll-linked parallax and hover motion stay on: Windows ships reduced-motion ON by default, so gating everything would make the site read as inert for most visitors. Scroll-linked motion tracks the user's own input rather than autoplaying, which is the usual line drawn here. ============================================================= */ @media (prefers-reduced-motion: reduce) { .hero-bg img { animation: none; } .marquee-track { animation-play-state: paused !important; } } /* ============================================================= 18. Responsive base ============================================================= */ @media (min-width: 540px) { .hero-actions { gap: 1.1rem; } } @media (min-width: 1280px) { .container { padding-inline: 2rem; } } /* ============================================================= 19. Mobile composition — not a squeezed desktop: tighter rhythm, bolder single-column type, deliberate stacking order. ============================================================= */ @media (max-width: 719px) { .hero { align-items: flex-end; } .hero-inner { padding-block: calc(var(--nav-h) + 1.4rem) 2.6rem; } .hero-badge { font-size: .66rem; padding: .45rem .8rem; } .hero-title { max-width: 13ch; } .hero-sub { max-width: 34ch; } .hero-actions { width: 100%; } .hero-actions .btn { width: 100%; } .hero-stats { margin-top: 2.2rem; padding-top: 1.6rem; gap: 1.1rem; } .section { padding-block: clamp(3rem, 12vw, 4.5rem); } .section-head { margin-bottom: 1.8rem; } .about-grid { gap: 1.8rem; } .pull-quote { font-size: 1.08rem; } .promo-card:hover, .flavor-card:hover, .teaser-strip:hover { transform: none; } .btn:active, .flavor-order:active { transform: scale(.96); transition-duration: .12s; } .club-inner, .contact-grid { gap: 1.6rem; } .cta-band h2 { font-size: clamp(1.7rem, 8vw, 2.4rem); } } /* ============================================================= PROJECT NOTES — premium pass, 2026-08-12 ============================================================= Archetype: Light Editorial Cream stays the base register (paper canvas, terracotta/olive/mustard accents — reads as daylight, family-run, appetite-friendly). .hero/.club/.contact/.marquee-wrap/ .footer keep committing to --ink so the page still has dark bands for rhythm and cinematic contrast; that hybrid was already how the site was built, so this pass leans into it rather than flipping to a full dark-mode archetype the content (daytime trattoria, family business, WhatsApp-first) doesn't really ask for. Progressive enhancement contract: - `.has-js` is added by a synchronous inline script at the very top of (before any external request). [data-reveal] and [data-split] are only ever hidden by CSS under `.has-js` — with JS fully disabled, nothing in the DOM is ever set to opacity:0, so content reads immediately. - If JS is enabled but main.js fails to load/execute (404, CSP, syntax error), `.has-js` is still present (the inline script ran) but nothing removes the hidden state. Two independent nets catch this: a CSS-only fallback @keyframes on [data-split] headings, and main.js's own 6s watchdog inside initReveals() once it does run. - Every new init* function in main.js is called through the existing safe() try/catch wrapper, matching the pattern already used for every other init function — one broken effect can't take down the rest of the page. - Reduced-motion: only continuous/autoplaying loops are gated (hero ambient zoom, marquee). Scroll-linked motion (parallax, ScrollTrigger reveals) and one-shot entrances (curtain, split-text, magnetic buttons) stay on — Windows ships reduced-motion ON by default, and scroll-linked motion tracks the user's own input rather than autoplaying, which is the usual line drawn here. ============================================================= */