/* Theme Name: Templo de Pandora Theme URI: https://templodepandora.com Author: Aurea Digital Author URI: https://aureadigital.it Description: Custom theme for Templo de Pandora Version: 2.0.0 */ /* ═══════════════════════════════════════════ WHATSAPP PLUGIN — smaller + repositioned ═══════════════════════════════════════════ */ /* Joinchat plugin — Desktop (natural, prominent) */ .joinchat, .joinchat__button, .joinchat__badge, #joinchat { transform: scale(0.9) !important; transform-origin: bottom right !important; bottom: 24px !important; right: 12px !important; } .joinchat__header, .joinchat__tooltip, .joinchat__message { font-size: 0.95rem !important; } /* Generic WhatsApp widgets — Desktop */ .ht-ctc-chat-container, .wp-whatsapp-button, .whatsapp-chat, #whatsapp-chat-container, .wa-chat-box, .floating-wpp, .b24-widget-button-wrapper { transform: scale(0.9) !important; transform-origin: bottom right !important; bottom: 24px !important; right: 12px !important; } @media (max-width: 768px) { .joinchat, .joinchat__button, #joinchat, .ht-ctc-chat-container, .wp-whatsapp-button, .whatsapp-chat, #whatsapp-chat-container, .wa-chat-box, .floating-wpp { transform: scale(0.8) !important; transform-origin: bottom right !important; bottom: 6px !important; right: 10px !important; } } /* ═══════════════════════════════════════════ RESET ═══════════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; overscroll-behavior-x: none; max-width: 100vw; /* iOS dipinge la zona status-bar/overscroll con lo sfondo di : senza questo (e con overflow-x hidden su body) Safari mostra pixel della pagina sopra la navbar durante lo scroll. Stessa cura di Cafe54. */ background: #1a1f22; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; overscroll-behavior-x: none; max-width: 100vw; position: relative; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { border: none; background: none; cursor: pointer; font: inherit; } iframe { display: block; } /* ═══════════════════════════════════════════ DESIGN TOKENS ═══════════════════════════════════════════ */ :root { /* Palette */ --bg: #1a1f22; --bg-deep: #111518; --bg-surface: #232a2e; --warm: #f5f1e8; --warm-dark: #e8e2d4; --gold: #e2d89b; --gold-dark: #ae8f5b; --cream: #ede9d2; --text: #ffffff; --text-dark: #2a2e30; --text-muted: rgba(237, 233, 210, 0.65); --border: rgba(174, 143, 91, 0.18); /* Type */ --font-display: 'Poiret One', 'Georgia', serif; --font-body: 'Arvo', 'Georgia', serif; /* Layout */ --container: 1140px; --gutter: clamp(20px, 4vw, 48px); --section-y: clamp(80px, 10vw, 140px); /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --speed: 0.4s; } /* ═══════════════════════════════════════════ BASE TYPOGRAPHY ═══════════════════════════════════════════ */ body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--text); background: var(--bg); } h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; } h2 { font-size: clamp(2.6rem, 5vw, 4rem); } h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); } /* ═══════════════════════════════════════════ UTILITY COMPONENTS ═══════════════════════════════════════════ */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .label { display: block; font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 16px; } .label--light { color: var(--gold); } .link-arrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-top: 24px; transition: gap var(--speed) var(--ease); } .link-arrow::after { content: '→'; transition: transform var(--speed) var(--ease); } .link-arrow:hover { gap: 16px; } .link-arrow:hover::after { transform: translateX(4px); } .link-arrow--dark { color: var(--gold-dark); } .link-arrow--dark:hover { color: var(--text-dark); } .btn { display: inline-flex; align-items: center; gap: 14px; padding: 18px 42px; font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; background: var(--gold-dark); /* a11y: testo scuro su gold-dark per contrasto WCAG AA (5.2:1 vs bianco 3.3:1) */ color: var(--text-dark); border: 1px solid transparent; transition: all var(--speed) var(--ease); } .btn svg { transition: transform var(--speed) var(--ease); } .btn:hover { background: var(--gold); color: var(--bg); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(226, 216, 155, 0.22); } .btn:hover svg { transform: translateX(6px); } .restaurante__welcome-btn { margin-top: 18px; } .veg { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #4a7c59; color: #fff; font-size: 0.55rem; font-weight: 700; margin-left: 6px; vertical-align: middle; } .section-header { text-align: center; margin-bottom: 60px; } .section-header__logo { height: 36px; width: auto; margin: 0 auto 24px; opacity: 0.5; } .section-header__sub { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 4px; text-transform: uppercase; color: var(--text-muted); margin-top: 10px; } /* ═══════════════════════════════════════════ NAVIGATION — Top bar ═══════════════════════════════════════════ */ /* Top bar — address + phone */ .nav-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; padding: 10px 0; transition: all var(--speed) var(--ease); } .admin-bar .nav-topbar { top: 32px; } .nav-topbar__inner { position: relative; display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: center; padding: 0 var(--gutter) 10px; } /* Line only under content — not full viewport */ .nav-topbar__inner::after { content: ''; position: absolute; bottom: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: rgba(255, 255, 255, 0.2); } .nav-topbar__inner > *:nth-child(1) { justify-self: start; } .nav-topbar__inner > *:nth-child(2) { justify-self: end; grid-column: 3; } .nav-topbar__item { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 1px; color: var(--cream); opacity: 0.95; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); transition: all var(--speed) var(--ease); white-space: nowrap; } .nav-topbar__item svg { width: 14px; height: 14px; } .nav-topbar__item:hover { opacity: 1; color: var(--gold); } .nav-topbar__item svg { flex-shrink: 0; color: var(--gold); } /* Hide topbar when scrolled */ .nav-topbar--hidden { opacity: 0; transform: translateY(-100%); pointer-events: none; } .nav { position: fixed; top: 40px; left: 0; right: 0; z-index: 1000; padding: 16px 0; transition: all var(--speed) var(--ease); } .admin-bar .nav { top: 72px; } .nav--scrolled { top: 0; background: rgba(45, 52, 56, 0.82); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); padding: 12px 0; box-shadow: 0 4px 40px rgba(0, 0, 0, 0.5); border-bottom: 1px solid rgba(174, 143, 91, 0.25); } .admin-bar .nav--scrolled { top: 32px; } .nav__inner { display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: center; padding: 0 var(--gutter); } .nav__left { display: flex; align-items: center; gap: 18px; min-width: 0; } .nav__logo img { height: 44px; width: auto; opacity: 0.95; transition: all var(--speed) var(--ease); filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.4)); } .nav--scrolled .nav__logo img { height: 34px; } .nav__logo:hover img { opacity: 1; } .nav__links { display: flex; align-items: center; justify-content: center; gap: 26px; } .nav__link { font-family: var(--font-body); font-size: 0.78rem; font-weight: 400; letter-spacing: 2.5px; text-transform: uppercase; color: var(--cream); opacity: 0.85; transition: all var(--speed) var(--ease); position: relative; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); white-space: nowrap; } .nav__link::after { content: ''; position: absolute; bottom: -4px; left: 50%; width: 0; height: 1px; background: var(--gold); transition: all var(--speed) var(--ease); transform: translateX(-50%); } .nav__link:hover, .nav__link.active { opacity: 1; color: var(--gold); } .nav__link:hover::after, .nav__link.active::after { width: 100%; } /* Reservar CTA — visually distinct from regular nav links */ .nav__cta { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); background: transparent; border: 1px solid var(--gold); padding: 9px 22px; margin-left: 8px; transition: all var(--speed) var(--ease); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); white-space: nowrap; } .nav__cta:hover { background: var(--gold); color: var(--bg); text-shadow: none; box-shadow: 0 4px 16px rgba(226, 216, 155, 0.18); } .nav__right { display: flex; align-items: center; justify-content: flex-end; gap: 20px; } .nav__lang { position: relative; font-family: var(--font-body); } .nav__lang-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid rgba(226, 216, 155, 0.22); color: var(--cream); font-family: inherit; font-size: 0.72rem; font-weight: 700; letter-spacing: 1.2px; padding: 7px 11px; cursor: pointer; transition: all var(--speed) var(--ease); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); border-radius: 2px; } .nav__lang-btn:hover, .nav__lang.is-open .nav__lang-btn { border-color: var(--gold); color: var(--gold); } .nav__lang-btn svg:last-child { transition: transform var(--speed) var(--ease); } .nav__lang.is-open .nav__lang-btn svg:last-child { transform: rotate(180deg); } .nav__lang-code { line-height: 1; } .nav__lang-menu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 160px; background: rgba(17, 21, 24, 0.98); border: 1px solid rgba(226, 216, 155, 0.2); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6); padding: 6px 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all var(--speed) var(--ease); z-index: 100; } .nav__lang.is-open .nav__lang-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav__lang-option { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 0.82rem; color: var(--cream); text-decoration: none; opacity: 0.75; transition: all var(--speed) var(--ease); } .nav__lang-option:hover { opacity: 1; background: rgba(226, 216, 155, 0.06); color: var(--gold); } .nav__lang-option--active { opacity: 1; color: var(--gold); font-weight: 700; } .nav__lang-flag { font-size: 1rem; } .nav__social { display: flex; align-items: center; gap: 4px; } .nav__social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: #ffffff; opacity: 0.85; transition: color var(--speed) var(--ease), opacity var(--speed) var(--ease); filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.8)); will-change: color; } .nav__social a:hover { opacity: 1; color: var(--gold); } .nav__social svg { width: 18px; height: 18px; pointer-events: none; } /* Burger */ .nav__burger { display: none; flex-direction: column; gap: 5px; padding: 8px; z-index: 1002; } .nav__burger span { display: block; width: 24px; height: 1.5px; background: var(--text); transition: all var(--speed) var(--ease); transform-origin: center; } .nav__burger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav__burger.active span:nth-child(2) { opacity: 0; } .nav__burger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile menu overlay */ /* ── MENU MOBILE "IMMERSIVA" (scelta founder 16-lug-2026) ── Fondo = crossfade lento tra le due anime del locale (coctelería / pasta), foto già ottimizzate -opt.webp. Overlay scuro nel gradiente di OGNI pseudo così il testo resta sovrano. NB: il fixed qui è SICURO (il menu copre tutto e blocca lo scroll — non è l'overlay-su-documento del bug iOS). */ .mobile-menu { position: fixed; inset: 0; z-index: 999; background: var(--bg-deep); display: flex; align-items: flex-start; justify-content: center; padding-top: calc(88px + env(safe-area-inset-top, 0px)); opacity: 0; visibility: hidden; transition: all 0.5s var(--ease); /* Lo scroll vive nel __content, NON qui: così le foto di sfondo (pseudo, absolute su questo box) restano FERME quando si muove il dito. */ overflow: hidden; overscroll-behavior: contain; } .mobile-menu::before, .mobile-menu::after { content: ''; position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; opacity: 0; transform: scale(1.02); } .mobile-menu::before { background-image: linear-gradient(180deg, rgba(19,23,26,0.90) 0%, rgba(19,23,26,0.84) 45%, rgba(19,23,26,0.96) 100%), url('/wp-content/uploads/templo-hero-mobile/hero/notte-cocktail-viola-opt.webp'); background-position: center 30%, center 30%; } .mobile-menu::after { background-image: linear-gradient(180deg, rgba(19,23,26,0.90) 0%, rgba(19,23,26,0.84) 45%, rgba(19,23,26,0.96) 100%), url('/wp-content/uploads/templo-restaurante/chef-pasta-cinematic-opt.webp'); background-position: center 25%, center 25%; } .mobile-menu.open::before { animation: mm-crossfade 16s ease-in-out infinite; } .mobile-menu.open::after { animation: mm-crossfade 16s ease-in-out infinite; animation-delay: -8s; } @keyframes mm-crossfade { 0% { opacity: 1; transform: scale(1.02); } 38% { opacity: 1; } 50% { opacity: 0; transform: scale(1.07); } 88% { opacity: 0; } 100% { opacity: 1; transform: scale(1.02); } } @media (prefers-reduced-motion: reduce) { .mobile-menu.open::before { animation: none; opacity: 1; } .mobile-menu.open::after { animation: none; opacity: 0; } } .mobile-menu.open { opacity: 1; visibility: visible; } /* Quando il menu mobile è aperto, nascondi il logo nella nav per evitare sovrapposizioni */ body.is-menu-open .nav__logo { opacity: 0; visibility: hidden; transition: opacity 0.2s ease; } .mobile-menu__content { position: relative; z-index: 1; width: 100%; max-width: 420px; /* padding-bottom generoso: la barra inferiore di Safari copre ~80px, senza questo i social si tagliano */ padding: 0 28px calc(env(safe-area-inset-bottom, 0px) + 92px); text-align: center; display: flex; flex-direction: column; gap: 0; max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .mobile-menu__link { font-family: var(--font-display); font-size: clamp(1.8rem, 5.4vw, 2.6rem); letter-spacing: 2px; color: var(--cream); padding: 11px 0; opacity: 0; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), color var(--speed) var(--ease); transform: translateY(16px) scale(0.98); } .mobile-menu.open .mobile-menu__link { opacity: 1; transform: translateY(0) scale(1); } .mobile-menu.open .mobile-menu__link:nth-child(1) { transition-delay: 0.10s; } .mobile-menu.open .mobile-menu__link:nth-child(2) { transition-delay: 0.16s; } .mobile-menu.open .mobile-menu__link:nth-child(3) { transition-delay: 0.22s; } .mobile-menu.open .mobile-menu__link:nth-child(4) { transition-delay: 0.28s; } .mobile-menu.open .mobile-menu__link:nth-child(5) { transition-delay: 0.34s; } .mobile-menu.open .mobile-menu__link:nth-child(6) { transition-delay: 0.40s; } .mobile-menu__link:hover { color: var(--gold); } /* Pagina attiva: oro + trattino (classe aggiunta da script.js) */ .mobile-menu__link--active { color: var(--gold); } .mobile-menu__link--active::after { content: ''; display: block; width: 26px; height: 1px; background: var(--gold-dark); margin: 8px auto 0; } .mobile-menu__cta { display: block; margin-top: 34px; padding: 16px 36px; background: linear-gradient(120deg, #d4c98e, var(--gold) 55%, #cfc386); border: none; font-family: var(--font-body); font-size: 0.76rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #1a1410; transition: all var(--speed) var(--ease); } .mobile-menu__cta:hover, .mobile-menu__cta:active { filter: brightness(1.06); box-shadow: 0 6px 24px rgba(226, 216, 155, 0.25); } .mobile-menu__social { display: flex; gap: 24px; justify-content: center; margin-top: 22px; color: var(--text-muted); } .mobile-menu__social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; transition: color var(--speed); } .mobile-menu__social a svg { pointer-events: none; } .mobile-menu__social a:hover { color: var(--gold); } /* ═══════════════════════════════════════════ HERO — Cinematic multi-scene ═══════════════════════════════════════════ */ .hero { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; background: var(--bg-deep); } /* Mobile hero block — hidden by default, shown only on mobile via media query */ .hero__mobile { display: none; } /* ── Scene system ── */ .hero__scenes { position: absolute; inset: 0; } .hero__scene { position: absolute; inset: 0; opacity: 0; transform: scale(1); } /* Video scene: always visible as base layer */ .hero__scene--video { opacity: 1; z-index: 0; } /* Night scene: overlays on top */ .hero__scene--night { opacity: 0; z-index: 1; transition: opacity 0.6s ease; } .hero__scene--night.night-visible { opacity: 1; } .hero__scene--night.night-hiding { opacity: 0; transition: opacity 0.4s ease; } /* Flicker effects on night layer */ .hero__scene--night.night-flicker { animation: nightFlicker 0.2s ease forwards; } .hero__scene--night.night-flicker-double { animation: nightFlickerDouble 0.45s ease forwards; } @keyframes nightFlicker { 0% { opacity: 0; } 40% { opacity: 0.8; } 100% { opacity: 0; } } @keyframes nightFlickerDouble { 0% { opacity: 0; } 20% { opacity: 0.75; } 35% { opacity: 0; } 55% { opacity: 0.6; } 100% { opacity: 0; } } /* Transition flash element */ .hero__transition { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; background: white; } .hero__transition--flash { animation: transitionFlash 0.8s ease forwards; } @keyframes transitionFlash { 0% { opacity: 0; } 8% { opacity: 0.7; background: white; } 16% { opacity: 0; } 24% { opacity: 0.4; background: white; } 32% { opacity: 0; } 100% { opacity: 0; } } /* Cinema bars — letterbox effect during transition */ .hero__cinema-bars { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; } .hero__cinema-bar { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1); } .hero__cinema-bar--top { top: 0; } .hero__cinema-bar--bottom { bottom: 0; } /* Bars close in */ .hero__cinema-bars--active .hero__cinema-bar { height: 8vh; } /* Bars open out */ .hero__cinema-bars--closing .hero__cinema-bar { height: 0; transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s; } /* Scanlines overlay — subtle film grain */ .hero__scanlines { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.15) 2px, rgba(0, 0, 0, 0.15) 4px ); transition: opacity 0.3s; } .hero__scanlines--active { animation: scanlineFlicker 0.8s ease forwards; } @keyframes scanlineFlicker { 0% { opacity: 0; } 10% { opacity: 0.6; } 30% { opacity: 0.3; } 50% { opacity: 0.5; } 70% { opacity: 0.2; } 100% { opacity: 0; } } /* ── Full-width scenes ── */ .hero__scene-bg { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero__scene--active .hero__scene-bg { animation: scenePan 8s ease forwards; } @keyframes scenePan { 0% { transform: scale(1.08); } 100% { transform: scale(1); } } /* ── 3-panel scenes ── */ .hero__scene-panels { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 0; height: 100%; } .hero__scene-panel { position: relative; overflow: hidden; } .hero__scene-panel img, .hero__scene-panel video { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } /* Ken Burns on panel images — aggressive movement so photos feel like video */ .hero__scene--night.night-visible .hero__scene-panel:nth-child(1) img { animation: panelDriftLeft 4s ease-in-out forwards; } .hero__scene--night.night-visible .hero__scene-panel:nth-child(2) img { animation: panelZoomSlow 4s ease-in-out forwards; } .hero__scene--night.night-visible .hero__scene-panel:nth-child(3) img { animation: panelDriftRight 4s ease-in-out forwards; } /* Reset animation when night hides */ .hero__scene--night.night-hiding .hero__scene-panel img { animation: none; } /* Sinistra: zoom out (da vicino a lontano) */ @keyframes panelDriftLeft { 0% { transform: scale(1.2); } 100% { transform: scale(1); } } /* Centro: zoom in cinematografico (pulse: in forte, poi leggero rientro) */ @keyframes panelZoomSlow { 0% { transform: scale(1); } 55% { transform: scale(1.32); } 100% { transform: scale(1.14); } } /* Destra: zoom out (da vicino a lontano) */ @keyframes panelDriftRight { 0% { transform: scale(1.15); } 100% { transform: scale(0.98); } } /* Vignette + fade edges on panels */ .hero__scene-panel::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 60px 20px rgba(17, 21, 24, 0.5); } .hero__scene-panel:first-child::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 80px; z-index: 1; pointer-events: none; background: linear-gradient(to right, transparent, rgba(17, 21, 24, 0.7)); } .hero__scene-panel:last-child::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 80px; z-index: 1; pointer-events: none; background: linear-gradient(to left, transparent, rgba(17, 21, 24, 0.7)); } /* ── Flash giorno/notte scene ── */ .hero__flash-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero__flash-giorno { z-index: 1; animation: none; } .hero__flash-notte { z-index: 2; opacity: 0; animation: none; } .hero__flash-white { position: absolute; inset: 0; z-index: 3; background: white; opacity: 0; pointer-events: none; animation: none; } /* Activate flash animation when scene is active */ .hero__scene--active .hero__flash-giorno { animation: flashZoomGiorno 4.5s ease forwards; } .hero__scene--active .hero__flash-notte { animation: flashNotte 4.5s ease forwards; } .hero__scene--active .hero__flash-white { animation: flashBurst 4.5s ease forwards; } /* Giorno: slow zoom */ @keyframes flashZoomGiorno { 0% { transform: scale(1); } 100% { transform: scale(1.08); } } /* Notte: flash intermittenti rapidi */ @keyframes flashNotte { 0% { opacity: 0; } 18% { opacity: 0; } 19% { opacity: 1; } 28% { opacity: 1; } 29% { opacity: 0; } 44% { opacity: 0; } 45% { opacity: 1; } 52% { opacity: 1; } 53% { opacity: 0; } 65% { opacity: 0; } 66% { opacity: 1; } 100% { opacity: 1; transform: scale(1.06); } } /* Flash bianco rapidi */ @keyframes flashBurst { 0% { opacity: 0; } 18.5% { opacity: 0; } 19% { opacity: 0.7; } 21% { opacity: 0; } 44.5% { opacity: 0; } 45% { opacity: 0.5; } 47% { opacity: 0; } 65.5% { opacity: 0; } 66% { opacity: 0.8; } 69% { opacity: 0; } 100% { opacity: 0; } } /* ── Overlay — always on top ── */ .hero__overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(17, 21, 24, 0.55) 0%, rgba(17, 21, 24, 0.15) 30%, rgba(17, 21, 24, 0.15) 60%, rgba(17, 21, 24, 0.8) 100% ), radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.55) 100%); pointer-events: none; } /* ═══════════════════════════════════════════ MODE A — CREPUSCOLO (color grade progressivo) Giornata → tramonto → notte → alba → giornata Loop continuo, senza mai interrompere i video ═══════════════════════════════════════════ */ .hero--mode-a .hero__overlay { animation: crepuscoloCycle 30s ease-in-out infinite; } @keyframes crepuscoloCycle { /* 0-15% : Giornata piena (overlay standard) */ 0% { background: linear-gradient(180deg, rgba(17, 21, 24, 0.55) 0%, rgba(17, 21, 24, 0.15) 30%, rgba(17, 21, 24, 0.15) 60%, rgba(17, 21, 24, 0.8) 100%), radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.55) 100%); } /* 20% : Inizio tramonto — toni caldi ambra */ 20% { background: linear-gradient(180deg, rgba(50, 25, 10, 0.5) 0%, rgba(120, 60, 20, 0.2) 30%, rgba(80, 40, 20, 0.25) 60%, rgba(30, 15, 5, 0.85) 100%), radial-gradient(ellipse at center, rgba(255, 150, 50, 0.05) 0%, rgba(80, 30, 10, 0.5) 100%); } /* 35% : Crepuscolo — viola/magenta */ 35% { background: linear-gradient(180deg, rgba(40, 20, 60, 0.55) 0%, rgba(80, 30, 100, 0.3) 30%, rgba(60, 20, 80, 0.35) 60%, rgba(25, 10, 40, 0.85) 100%), radial-gradient(ellipse at center, rgba(180, 80, 200, 0.05) 0%, rgba(40, 15, 70, 0.5) 100%); } /* 50% : Notte piena — viola/blu profondo */ 50% { background: linear-gradient(180deg, rgba(15, 10, 40, 0.7) 0%, rgba(30, 15, 70, 0.45) 30%, rgba(40, 20, 90, 0.45) 60%, rgba(10, 5, 25, 0.9) 100%), radial-gradient(ellipse at center, rgba(100, 50, 200, 0.08) 0%, rgba(15, 5, 40, 0.6) 100%); } /* 65% : Ancora notte profonda */ 65% { background: linear-gradient(180deg, rgba(20, 10, 50, 0.65) 0%, rgba(40, 20, 80, 0.4) 30%, rgba(50, 25, 100, 0.4) 60%, rgba(15, 8, 30, 0.9) 100%), radial-gradient(ellipse at center, rgba(120, 60, 220, 0.07) 0%, rgba(20, 10, 50, 0.55) 100%); } /* 80% : Alba — toni caldi riappare */ 80% { background: linear-gradient(180deg, rgba(60, 30, 20, 0.5) 0%, rgba(150, 80, 40, 0.25) 30%, rgba(100, 50, 25, 0.3) 60%, rgba(25, 12, 6, 0.85) 100%), radial-gradient(ellipse at center, rgba(255, 180, 80, 0.06) 0%, rgba(60, 25, 10, 0.5) 100%); } /* 100% : Torna alla giornata */ 100% { background: linear-gradient(180deg, rgba(17, 21, 24, 0.55) 0%, rgba(17, 21, 24, 0.15) 30%, rgba(17, 21, 24, 0.15) 60%, rgba(17, 21, 24, 0.8) 100%), radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.55) 100%); } } /* Bokeh/lights overlay — appare solo di notte */ .hero--mode-a .hero__scanlines { display: none; } /* ═══════════════════════════════════════════ MODE B — MAREA (ripple onda) I pannelli cambiano in sequenza come un'onda ═══════════════════════════════════════════ */ /* Ghost night photos stacked on each panel */ .hero__ghost { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity 1.5s ease; } .hero--mode-b .hero__scene-panels { display: grid; } .hero--mode-b .hero__scene-panel { position: relative; } /* Coreografia — 24s loop 0-4s tutti day (video) 4-7s L solo night 7-10s R solo night (L day) 10-13s C solo night (R day) 13-16s L+R night 16-19s L+C night 19-22s C+R night 22-24s tutti day → LOOP */ .hero--mode-b .hero__ghost { transform: scale(1); } /* Two animations: opacity (24s) + kenBurns (12s alternate) */ .hero--mode-b .hero__scene-panel:nth-child(1) .hero__ghost { animation: choreoOpacityLeft 24s linear infinite, kenBurnsLeft 12s ease-in-out infinite alternate; } .hero--mode-b .hero__scene-panel:nth-child(2) .hero__ghost { animation: choreoOpacityCenter 24s linear infinite, kenBurnsCenter 12s ease-in-out infinite alternate; } .hero--mode-b .hero__scene-panel:nth-child(3) .hero__ghost { animation: choreoOpacityRight 24s linear infinite, kenBurnsRight 12s ease-in-out infinite alternate; } /* OPACITY + FILTER timelines — cinematic blur-in blur-out */ @keyframes choreoOpacityLeft { 0%, 15% { opacity: 0; filter: blur(14px) brightness(1.3) saturate(1.3); } 18% { opacity: 1; filter: blur(0) brightness(1) saturate(1.1); } 27% { opacity: 1; filter: blur(0) brightness(1) saturate(1.1); } 30% { opacity: 0; filter: blur(14px) brightness(0.7) saturate(0.8); } 53% { opacity: 0; filter: blur(14px) brightness(1.3) saturate(1.3); } 56% { opacity: 1; filter: blur(0) brightness(1) saturate(1.1); } 64% { opacity: 1; filter: blur(0) brightness(1) saturate(1.1); } 67% { opacity: 0; filter: blur(10px) brightness(0.9) saturate(1); } 68% { opacity: 0; filter: blur(14px) brightness(1.3) saturate(1.3); } 70% { opacity: 1; filter: blur(0) brightness(1) saturate(1.1); } 78% { opacity: 1; filter: blur(0) brightness(1) saturate(1.1); } 80% { opacity: 0; filter: blur(14px) brightness(0.7) saturate(0.8); } 100% { opacity: 0; filter: blur(14px) brightness(1) saturate(1); } } @keyframes choreoOpacityCenter { 0%, 40% { opacity: 0; filter: blur(14px) brightness(1.3) saturate(1.3); } 43% { opacity: 1; filter: blur(0) brightness(1) saturate(1.1); } 52% { opacity: 1; filter: blur(0) brightness(1) saturate(1.1); } 54% { opacity: 0; filter: blur(14px) brightness(0.7) saturate(0.8); } 68% { opacity: 0; filter: blur(14px) brightness(1.3) saturate(1.3); } 70% { opacity: 1; filter: blur(0) brightness(1) saturate(1.1); } 78% { opacity: 1; filter: blur(0) brightness(1) saturate(1.1); } 80% { opacity: 1; filter: blur(0) brightness(1) saturate(1.1); } 91% { opacity: 1; filter: blur(0) brightness(1) saturate(1.1); } 93% { opacity: 0; filter: blur(14px) brightness(0.7) saturate(0.8); } 100% { opacity: 0; filter: blur(14px) brightness(1) saturate(1); } } @keyframes choreoOpacityRight { 0%, 28% { opacity: 0; filter: blur(14px) brightness(1.3) saturate(1.3); } 30% { opacity: 1; filter: blur(0) brightness(1) saturate(1.1); } 39% { opacity: 1; filter: blur(0) brightness(1) saturate(1.1); } 42% { opacity: 0; filter: blur(14px) brightness(0.7) saturate(0.8); } 54% { opacity: 0; filter: blur(14px) brightness(1.3) saturate(1.3); } 56% { opacity: 1; filter: blur(0) brightness(1) saturate(1.1); } 66% { opacity: 1; filter: blur(0) brightness(1) saturate(1.1); } 68% { opacity: 0; filter: blur(10px) brightness(0.9) saturate(1); } 78% { opacity: 0; filter: blur(14px) brightness(1.3) saturate(1.3); } 80% { opacity: 1; filter: blur(0) brightness(1) saturate(1.1); } 91% { opacity: 1; filter: blur(0) brightness(1) saturate(1.1); } 93% { opacity: 0; filter: blur(14px) brightness(0.7) saturate(0.8); } 100% { opacity: 0; filter: blur(14px) brightness(1) saturate(1); } } /* Ken Burns — continuous zoom for "live" feeling */ @keyframes kenBurnsLeft { /* Cocktail viola: pan orizzontale leggero, niente zoom percepibile — stessa sensazione della versione mobile */ 0% { transform: scale(1.03) translateX(1.5%); } 100% { transform: scale(1.03) translateX(-1.5%); } } @keyframes kenBurnsCenter { 0% { transform: scale(1.02); } 100% { transform: scale(1.12); } } @keyframes kenBurnsRight { 0% { transform: scale(1.02) translateX(1%); } 100% { transform: scale(1.1) translateX(-1%); } } .hero--mode-a::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(circle 3px at 15% 20%, rgba(255, 200, 150, 0.8), transparent 6px), radial-gradient(circle 2px at 35% 40%, rgba(200, 150, 255, 0.7), transparent 5px), radial-gradient(circle 4px at 55% 25%, rgba(255, 220, 180, 0.6), transparent 8px), radial-gradient(circle 2px at 75% 50%, rgba(180, 130, 255, 0.8), transparent 5px), radial-gradient(circle 3px at 85% 30%, rgba(255, 200, 180, 0.7), transparent 7px), radial-gradient(circle 2px at 25% 70%, rgba(200, 160, 255, 0.6), transparent 5px), radial-gradient(circle 3px at 65% 75%, rgba(255, 190, 160, 0.7), transparent 7px); opacity: 0; animation: bokehCycle 30s ease-in-out infinite; } @keyframes bokehCycle { 0%, 15%, 100% { opacity: 0; } 50%, 65% { opacity: 0.7; } } /* Centered content — positioned just above buttons */ .hero__content { position: absolute; left: 0; right: 0; bottom: 110px; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; } .hero__content::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(900px, 85vw); height: 360px; transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.35) 35%, rgba(0, 0, 0, 0) 70%); z-index: -1; pointer-events: none; filter: blur(6px); } .hero__title { font-family: var(--font-display); font-size: clamp(2rem, 5.2vw, 4.8rem); font-weight: 400; line-height: 1.05; letter-spacing: 0.03em; color: var(--gold); text-align: center; margin: 0 0 18px; text-shadow: 0 0 8px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.95), 0 2px 10px rgba(0, 0, 0, 0.85), 0 6px 40px rgba(0, 0, 0, 0.55); position: relative; } .hero__sub { font-family: var(--font-body); font-size: clamp(0.7rem, 1.2vw, 0.9rem); letter-spacing: 5px; text-transform: uppercase; color: var(--cream); opacity: 0.95; margin-top: 0; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 12px rgba(0, 0, 0, 0.7); } .hero__sep { color: var(--gold-dark); margin: 0 4px; } /* Hero buttons — split on panels */ .hero__btn-left { position: absolute; bottom: 90px; left: 10%; z-index: 3; } .hero__btn-right { position: absolute; bottom: 90px; right: 10%; z-index: 3; } .hero__btn { font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; padding: 16px 40px; transition: all var(--speed) var(--ease); } .hero__btn--outline { color: var(--text); border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.05); } .hero__btn--outline:hover { border-color: var(--gold); color: var(--gold); background: rgba(255, 255, 255, 0.1); } .hero__btn--gold { color: var(--bg); background: var(--gold-dark); border: 1px solid var(--gold-dark); } .hero__btn--gold:hover { background: var(--gold); border-color: var(--gold); } /* Bottom left — Scroll indicator */ .hero__bottom-left { position: absolute; bottom: 40px; left: var(--gutter); z-index: 3; display: flex; align-items: center; gap: 14px; } .hero__scroll-label { font-family: var(--font-body); font-size: 0.6rem; letter-spacing: 3px; text-transform: uppercase; color: var(--cream); opacity: 0.5; } .hero__scroll-line { display: block; width: 50px; height: 1px; background: var(--gold-dark); position: relative; overflow: hidden; } .hero__scroll-line::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--gold); animation: scrollLine 2.5s ease-in-out infinite; } @keyframes scrollLine { 0% { left: -100%; } 50% { left: 0; } 100% { left: 100%; } } /* ═══════════════════════════════════════════ SECTION FLOW — smooth gradients between sections ═══════════════════════════════════════════ */ /* Gradient connectors: each section blends into the next */ .statement, .carta, .cocteles, .proof, .contacto { position: relative; } .statement::before, .split + .carta::before, .cocteles::before, .contacto::before { content: ''; position: absolute; top: -80px; left: 0; right: 0; height: 160px; pointer-events: none; z-index: 1; } /* Warm section → dark: blend the bottom of warm into dark */ .carta::before { background: linear-gradient(to bottom, var(--warm) 0%, var(--bg-deep) 100%); } /* Dark → moody purple */ .cocteles::after { content: ''; position: absolute; bottom: -60px; left: 0; right: 0; height: 120px; background: linear-gradient(to bottom, var(--bg) 0%, var(--bg-surface) 100%); pointer-events: none; z-index: 1; } /* ═══════════════════════════════════════════ GLOBAL TEXTURE — subtle grain for character ═══════════════════════════════════════════ */ /* ⚠️ MAI `position: fixed; inset: 0` per questo overlay: su iOS Safari un overlay fisso full-screen + scroll espone una striscia di contenuto sopra la navbar (stesso bug risolto su Cafe54, giu 2026). La grana è ancorata a
(absolute) così scorre col contenuto — visivamente identica. */ main { position: relative; } main::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); } /* ═══════════════════════════════════════════ EL TEMPLO — Narrative intro ═══════════════════════════════════════════ */ .templo { padding: var(--section-y) 0; background: var(--bg-deep); position: relative; } .templo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: stretch; } .templo__text { position: relative; max-width: 620px; padding-left: 80px; } .templo__label-vertical { position: absolute; left: 0; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 8px; text-transform: uppercase; color: var(--gold); white-space: nowrap; padding: 60px 0; } .templo__label-vertical::before, .templo__label-vertical::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: 40px; background: var(--gold-dark); } .templo__label-vertical::before { top: 0; } .templo__label-vertical::after { bottom: 0; } .templo__title { font-family: var(--font-display); font-size: clamp(3.5rem, 7.2vw, 6.5rem); color: var(--gold); font-style: italic; margin-bottom: 40px; line-height: 1; white-space: nowrap; } .templo__lead { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--cream); line-height: 1.55; margin-bottom: 32px; } .templo__desc { font-family: var(--font-body); font-size: 1.15rem; line-height: 1.9; color: var(--text-muted); margin-bottom: 22px; } .templo__desc--highlight { font-family: var(--font-display); font-size: 1.55rem; font-style: italic; color: var(--gold); margin-top: 38px; } .templo__photo { position: relative; overflow: hidden; } .templo__photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(226, 216, 155, 0.08) 0%, transparent 60%); z-index: 1; pointer-events: none; } .templo__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 8s ease; } .templo__photo:hover img { transform: scale(1.04); } /* ═══════════════════════════════════════════ ESPACIOS — Interactive before/after slider ═══════════════════════════════════════════ */ .espacios { position: relative; padding: var(--section-y) 0 calc(var(--section-y) - 40px); background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 50%, var(--bg-deep) 100%); overflow: hidden; } .espacios__header { text-align: center; max-width: 700px; margin: 0 auto 60px; padding: 0 var(--gutter); } .espacios__header h2 { font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 4rem); color: var(--gold); font-style: italic; margin: 10px 0; } .espacios__hint { font-family: var(--font-body); font-size: 0.85rem; color: var(--text-muted); margin-top: 20px; letter-spacing: 1px; } /* Compare container */ .espacios__compare { position: relative; width: 100%; max-width: 1400px; height: 70vh; min-height: 480px; margin: 0 auto; overflow: hidden; cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: none; } /* Base image: day */ .espacios__compare-base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } /* Night image clipped */ .espacios__compare-clip { position: absolute; top: 0; left: 0; width: 50%; height: 100%; overflow: hidden; pointer-events: none; will-change: width; } .espacios__compare-night { position: absolute; top: 0; left: 0; width: calc(var(--compare-container-width, 100vw) * 1); max-width: 1400px; height: 100%; object-fit: cover; } /* Use JS-set width variable for precise match */ .espacios__compare-night { width: 100%; min-width: 100%; } .espacios__compare-clip::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30, 15, 50, 0.15) 0%, rgba(10, 5, 25, 0.45) 100%); pointer-events: none; } /* Labels */ .espacios__compare-label { position: absolute; bottom: 50px; z-index: 1; color: var(--cream); pointer-events: none; white-space: nowrap; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 4px 18px rgba(0, 0, 0, 0.85), 0 0 30px rgba(0, 0, 0, 0.6); } .espacios__compare-clip { z-index: 2; } /* Day label is now on the LEFT (since day photo is clipped from left) */ .espacios__compare-label--day { left: 50px; text-align: left; } /* Stronger contrast on day label — background is bright */ .espacios__compare-label--day .label--light { -webkit-text-stroke: 0.4px rgba(0, 0, 0, 0.85); paint-order: stroke fill; text-shadow: 0 1px 2px rgba(0, 0, 0, 1), 0 2px 8px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 0, 0, 0.8); } .espacios__compare-label--day h3 { -webkit-text-stroke: 0.6px rgba(0, 0, 0, 0.9); paint-order: stroke fill; text-shadow: 0 2px 4px rgba(0, 0, 0, 1), 0 4px 16px rgba(0, 0, 0, 0.95), 0 0 28px rgba(0, 0, 0, 0.75); } /* Night label is now on the RIGHT (since night base shows through on the right) */ .espacios__compare-label--night { right: 50px; text-align: right; } .espacios__compare-label h3 { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-style: italic; margin-top: 8px; color: var(--gold); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95), 0 6px 24px rgba(0, 0, 0, 0.85); } /* Handle */ .espacios__compare-handle { position: absolute; top: 0; left: 50%; width: 4px; height: 100%; transform: translateX(-50%); z-index: 3; pointer-events: none; will-change: left; } .espacios__compare-handle-line { width: 2px; height: calc(50% - 30px); background: var(--gold); margin: 0 auto; box-shadow: 0 0 20px rgba(226, 216, 155, 0.5); } .espacios__compare-handle-button { width: 56px; height: 56px; border-radius: 50%; background: var(--bg-deep); border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; margin: 4px auto; position: relative; left: -26px; color: var(--gold); box-shadow: 0 0 30px rgba(226, 216, 155, 0.4), 0 10px 30px rgba(0, 0, 0, 0.6); animation: handlePulse 3s ease-in-out infinite; } @keyframes handlePulse { 0%, 100% { box-shadow: 0 0 20px rgba(226, 216, 155, 0.3), 0 10px 30px rgba(0, 0, 0, 0.6); } 50% { box-shadow: 0 0 40px rgba(226, 216, 155, 0.6), 0 10px 30px rgba(0, 0, 0, 0.6); } } /* ── Espacios compare slider — mobile/tablet ─────────────── */ @media (max-width: 768px) { .espacios__compare { height: 50vh; min-height: 320px; max-height: 460px; } .espacios__compare-label { bottom: 20px; } .espacios__compare-label--day { left: 16px; } .espacios__compare-label--night { right: 16px; } .espacios__compare-label .label--light { font-size: 0.62rem; letter-spacing: 1.5px; } .espacios__compare-label h3 { font-size: 1.15rem; margin-top: 4px; } .espacios__compare-handle-button { width: 44px; height: 44px; left: -20px; } .espacios__compare-handle { width: 3px; } /* Foto orizzontali su container verticale: spostare crop verso destra per non mostrare la porta del bagno sulla sinistra */ .espacios__compare-base, .espacios__compare-night { object-position: 72% center; } } @media (max-width: 480px) { .espacios__compare { height: 45vh; min-height: 280px; } .espacios__compare-label { bottom: 14px; } .espacios__compare-label--day { left: 12px; } .espacios__compare-label--night { right: 12px; } .espacios__compare-label .label--light { font-size: 0.56rem; letter-spacing: 1.2px; } .espacios__compare-label h3 { font-size: 0.98rem; } .espacios__compare-handle-button { width: 38px; height: 38px; left: -17px; } } /* ═══════════════════════════════════════════ STATEMENT ═══════════════════════════════════════════ */ .statement { padding: var(--section-y) 0; background: linear-gradient(180deg, var(--bg) 0%, var(--bg-surface) 40%, var(--bg-surface) 60%, var(--bg) 100%); text-align: center; } .statement__sub { display: block; margin-top: 20px; font-size: 0.7em; color: var(--gold-dark); font-style: normal; letter-spacing: 4px; text-transform: uppercase; } .statement__deco { width: 1px; height: 60px; background: var(--gold-dark); margin: 0 auto; } .statement__text { font-family: var(--font-display); font-size: clamp(1.4rem, 2.8vw, 2.2rem); font-style: italic; color: var(--gold); line-height: 1.7; max-width: 700px; margin: 40px auto; } /* ═══════════════════════════════════════════ EL RESTAURANTE — Editorial overlap ═══════════════════════════════════════════ */ .restaurante { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 15%, var(--bg-deep) 85%, var(--bg) 100%); position: relative; overflow: hidden; } /* Stage = banner + content with overlap */ .restaurante__stage { position: relative; } /* ── Banner ── */ .restaurante__banner { position: relative; height: 85vh; min-height: 600px; overflow: hidden; background: transparent; } .restaurante__banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 65%; filter: brightness(1.06) saturate(1.25) contrast(1.08); animation: bannerZoom 35s ease-in-out infinite alternate; /* Extra long fade — seamless blend */ -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 10%, rgba(0,0,0,0.08) 18%, rgba(0,0,0,0.25) 26%, rgba(0,0,0,0.55) 34%, rgba(0,0,0,0.85) 42%, #000 50%, #000 75%, rgba(0,0,0,0.6) 85%, rgba(0,0,0,0.2) 93%, transparent 100% ); mask-image: linear-gradient(180deg, transparent 0%, transparent 10%, rgba(0,0,0,0.08) 18%, rgba(0,0,0,0.25) 26%, rgba(0,0,0,0.55) 34%, rgba(0,0,0,0.85) 42%, #000 50%, #000 75%, rgba(0,0,0,0.6) 85%, rgba(0,0,0,0.2) 93%, transparent 100% ); } @keyframes bannerZoom { 0% { transform: scale(1); } 100% { transform: scale(1.03); } } /* Overlay: lighter + radial vignette + fade into section */ .restaurante__banner-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.35) 70%, rgba(0, 0, 0, 0.7) 100% ), linear-gradient(180deg, rgba(17,21,24,0.15) 0%, rgba(17,21,24,0.05) 40%, rgba(17,21,24,0.1) 60%, rgba(17,21,24,0.35) 100% ); pointer-events: none; /* Match image mask */ -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 10%, rgba(0,0,0,0.08) 18%, rgba(0,0,0,0.25) 26%, rgba(0,0,0,0.55) 34%, rgba(0,0,0,0.85) 42%, #000 50%, #000 75%, rgba(0,0,0,0.6) 85%, rgba(0,0,0,0.2) 93%, transparent 100% ); mask-image: linear-gradient(180deg, transparent 0%, transparent 10%, rgba(0,0,0,0.08) 18%, rgba(0,0,0,0.25) 26%, rgba(0,0,0,0.55) 34%, rgba(0,0,0,0.85) 42%, #000 50%, #000 75%, rgba(0,0,0,0.6) 85%, rgba(0,0,0,0.2) 93%, transparent 100% ); } /* Banner badges grid: Google LEFT — Title CENTER — Guru RIGHT */ .restaurante__banner-badges { position: absolute; top: 22%; left: 50%; transform: translate(-50%, -50%); width: min(1280px, 92%); display: grid; grid-template-columns: auto 1fr auto; align-items: center; justify-items: center; gap: 30px; z-index: 3; } .restaurante__banner-badge a { text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 18px; background: rgba(34, 38, 42, 0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 6px; border: 1px solid rgba(226, 216, 155, 0.25); transition: border-color 0.3s ease; filter: brightness(1.15); } .restaurante__banner-badge a:hover { border-color: rgba(226, 216, 155, 0.4); } .restaurante__banner-badge-label { font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; color: var(--gold); letter-spacing: 0.5px; } .restaurante__banner-badge-stars { color: #fbbc05; font-size: 1rem; letter-spacing: 2px; } .restaurante__banner-badge-meta { font-family: var(--font-body); font-size: 0.68rem; color: var(--cream); opacity: 0.7; } .restaurante__banner-badge-meta strong { color: var(--cream); } .restaurante__banner-badge-logo-svg { margin-top: 4px; opacity: 0.9; } .restaurante__banner-badge--guru .guru-badge__img { max-width: 100px; } .restaurante__banner-title--center { position: static !important; transform: none !important; } @media (max-width: 900px) { /* Mobile: il wrapper scompare (display:contents) così i 3 figli si posizionano liberi relativi a .restaurante__banner. Titolo centrato in alto, Google top-left sticker, Guru top-right sticker. */ .restaurante__banner-badges { position: static; display: contents; } .restaurante__banner-title--center { position: absolute !important; top: 34px; left: 50%; transform: translateX(-50%) !important; margin: 0; padding: 0 !important; z-index: 3; font-size: clamp(2.2rem, 9vw, 3.2rem); letter-spacing: 1.5px; white-space: nowrap; } .restaurante__banner-badge--google { position: absolute; top: 32%; left: 14px; transform: rotate(-3deg); z-index: 4; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55)); } .restaurante__banner-badge--guru { position: absolute; top: 32%; right: 14px; transform: rotate(3deg); z-index: 4; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55)); } /* Google badge: layout verticale del desktop (Excelente / stelle / 868 reseñas / logo Google), mini-size per non coprire il titolo */ .restaurante__banner-badge--google a { flex-direction: column; align-items: center; gap: 1px; padding: 3px 5px; background: rgba(34, 38, 42, 0.9); } .restaurante__banner-badge-label { display: block; font-size: 0.34rem; letter-spacing: 0.4px; } .restaurante__banner-badge-stars { font-size: 0.36rem; letter-spacing: 0.7px; line-height: 1; } .restaurante__banner-badge-meta { font-size: 0.3rem; letter-spacing: 0.2px; white-space: nowrap; } .restaurante__banner-badge-logo-svg { width: 19px; height: auto; margin-top: 1px; } /* Guru card: forma verticale originale, mini-size */ .restaurante__banner-badge--guru a { padding: 2px 3px; } .restaurante__banner-badge--guru .guru-badge__img { max-width: 30px; max-height: 40px; } /* Mobile: spinta brightness extra per pareggiare la resa desktop */ .restaurante__banner-img { filter: brightness(1.12) saturate(1.3) contrast(1.08); } .restaurante__banner-badge a { filter: brightness(1.22); } } .restaurante__banner-title { position: absolute; top: 18%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-display); font-size: clamp(4rem, 9vw, 7.5rem); font-style: italic; color: var(--gold); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 4px 20px rgba(0, 0, 0, 0.85), 0 8px 40px rgba(0, 0, 0, 0.7), 0 0 80px rgba(0, 0, 0, 0.6); white-space: nowrap; z-index: 2; letter-spacing: 2px; padding: 30px 60px; transition: top 1.2s cubic-bezier(0.4, 0, 0.2, 1), left 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1), font-size 1.2s cubic-bezier(0.4, 0, 0.2, 1); } /* 3a slide: titolo si sposta in basso a destra, più piccolo — effetto dinamico */ .cocteleria__banner[data-slide="2"] .restaurante__banner-title { top: 78%; left: 82%; transform: translate(-50%, -50%); font-size: clamp(2.5rem, 5.5vw, 4.5rem); } /* Soft radial dark glow behind title for readability */ .restaurante__banner-title::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 140%; height: 280%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.3) 35%, transparent 75% ); pointer-events: none; z-index: -1; } .restaurante__scroll { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); font-family: var(--font-body); font-size: 0.65rem; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); opacity: 0.6; z-index: 2; animation: scrollBounce 2.5s ease-in-out infinite; } @keyframes scrollBounce { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.4; } 50% { transform: translateX(-50%) translateY(6px); opacity: 0.8; } } /* ── Content section — overlaps banner ── */ .restaurante__content { position: relative; margin-top: -60px; padding: 60px var(--gutter) 160px; max-width: 1400px; margin-left: auto; margin-right: auto; z-index: 3; } .restaurante__content-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: flex-start; } .restaurante__text { padding: 60px 20px 0 40px; max-width: 640px; z-index: 2; position: relative; justify-self: start; } .restaurante__welcome-title { font-family: var(--font-display); font-size: clamp(3rem, 5.8vw, 5rem); font-style: italic; color: var(--gold); line-height: 1.05; margin-bottom: 28px; } .restaurante__text p { font-family: var(--font-body); font-size: 1.15rem; line-height: 1.85; color: var(--text-muted); margin-bottom: 22px; } .restaurante__welcome-highlight { font-family: var(--font-display) !important; font-size: 1.6rem !important; font-style: italic !important; color: #14100c !important; letter-spacing: 0.3px !important; line-height: 1.35 !important; margin-top: 32px !important; margin-bottom: 0 !important; padding-top: 22px !important; border-top: 1px solid rgba(174, 143, 91, 0.35) !important; max-width: 520px !important; } .restaurante__welcome-tagline { font-family: var(--font-display) !important; font-size: 1.35rem !important; font-style: italic !important; color: var(--gold) !important; margin-top: 18px !important; } @media (max-width: 600px) { .restaurante__welcome-highlight { font-size: 1.3rem !important; padding-top: 18px !important; margin-top: 24px !important; } .restaurante__welcome-tagline { font-size: 1.15rem !important; } } /* ── Chef photo — floats out of content into banner ── */ .restaurante__chef-photo { position: relative; align-self: start; margin-top: 0; aspect-ratio: 3 / 4; max-width: 460px; justify-self: end; z-index: 4; } .restaurante__chef-main { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6); /* Foto già cinematic — solo leggero rinforzo contrasto */ filter: brightness(0.92) contrast(1.08); } /* Vignette — soft radial darken on the corners, leaves the chef centered */ .restaurante__chef-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 90% 80% at center, transparent 45%, rgba(0,0,0,0.55) 100%); z-index: 1; } .restaurante__chef-main { position: relative; z-index: 0; } .restaurante__chef-frame, .restaurante__chef-accent { z-index: 5; } /* Pasta accent — small vertical photo overlapping bottom-left, edges fused */ .restaurante__chef-accent { position: absolute; bottom: -50px; left: -60px; width: 34%; max-width: 180px; aspect-ratio: 2 / 3; object-fit: cover; object-position: center center; z-index: 5; filter: brightness(0.88) saturate(1.25) contrast(1.08) drop-shadow(0 22px 38px rgba(0, 0, 0, 0.65)); -webkit-mask-image: radial-gradient(ellipse 115% 105% at 30% 75%, black 58%, rgba(0,0,0,0.85) 76%, rgba(0,0,0,0.45) 90%, transparent 100%); mask-image: radial-gradient(ellipse 115% 105% at 30% 75%, black 58%, rgba(0,0,0,0.85) 76%, rgba(0,0,0,0.45) 90%, transparent 100%); } /* Reversed layout — text LEFT, photo RIGHT (for coctelería) */ .restaurante__content-inner--reverse .restaurante__chef-photo { order: 2; justify-self: start; } .restaurante__content-inner--reverse .restaurante__text { order: 1; justify-self: end; padding: 60px 40px 0 20px; } .restaurante__content-inner--reverse .restaurante__chef-accent { left: auto; right: -80px; bottom: -70px; width: 48%; max-width: 260px; filter: brightness(0.95) saturate(1) contrast(1.05) drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55)); -webkit-mask-image: radial-gradient(ellipse 100% 100% at center, black 48%, rgba(0,0,0,0.75) 70%, rgba(0,0,0,0.35) 88%, transparent 100%); mask-image: radial-gradient(ellipse 100% 100% at center, black 48%, rgba(0,0,0,0.75) 70%, rgba(0,0,0,0.35) 88%, transparent 100%); } .restaurante__content-inner--reverse .restaurante__chef-frame { left: -20px; right: 20px; } /* ─── Solo pagina /cocteleria/: overlay banner più leggero sulle foto cocktail, foto bartender ("lui che versa il drink") più grande, e ZERO zoom/scale sulle slide 2 e 3 così i cocktail non sembrano "troppo vicini" alla navbar ─── */ .page-cocteleria .restaurante__banner-overlay { opacity: 0.55; } .page-cocteleria .restaurante__chef-photo { max-width: 560px; } .page-cocteleria .restaurante__chef-main { filter: brightness(0.96) contrast(1.08); } .page-cocteleria .cocteleria__slider .cocteleria__slide:nth-child(2), .page-cocteleria .cocteleria__slider .cocteleria__slide:nth-child(3) { animation: none !important; transform: none !important; object-position: center center !important; } /* Coctelería — matches restaurante bg for seamless flow */ .cocteleria { background: var(--bg-deep); position: relative; } /* Coctelería title centered in banner */ .cocteleria .restaurante__banner-title { top: 50%; } /* ── Coctelería banner slider ── */ .cocteleria__slider { position: absolute; inset: 0; } .cocteleria__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.5s ease-in-out; } .cocteleria__banner .cocteleria__slide.restaurante__banner-img { object-position: center 5%; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, #000 10%, #000 75%, rgba(0,0,0,0.6) 85%, rgba(0,0,0,0.2) 93%, transparent 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, #000 10%, #000 75%, rgba(0,0,0,0.6) 85%, rgba(0,0,0,0.2) 93%, transparent 100%); } /* 2a slide (2 cocktail viola): zoom leggero, massimo shift basso */ .cocteleria__slider .cocteleria__slide:nth-child(2) { animation: bannerZoomSoft 35s ease-in-out infinite alternate; object-position: center 0%; } @keyframes bannerZoomSoft { 0% { transform: scale(1.08) translateY(8%); } 100% { transform: scale(1.12) translateY(8%); } } /* 3a slide (3 cocktail su magazine): grade cinematografico + ken-burns diagonale */ .cocteleria__slider .cocteleria__slide:nth-child(3) { animation: cocteleriaCinematic 22s ease-in-out infinite alternate; object-position: center 0%; filter: saturate(1.28) contrast(1.14) brightness(1.03) sepia(0.08); } @keyframes cocteleriaCinematic { 0% { transform: scale(1.25) translate(-2.5%, 2%); } 100% { transform: scale(1.38) translate(2.5%, -2%); } } /* Light-leak / glow dorato per esaltare l'atmosfera cocktail bar */ .cocteleria__banner[data-slide="2"]::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 18% 28%, rgba(226, 216, 155, 0.22) 0%, rgba(226, 216, 155, 0.08) 25%, transparent 55% ), radial-gradient(ellipse at 82% 72%, rgba(140, 60, 140, 0.18) 0%, rgba(140, 60, 140, 0.06) 30%, transparent 60% ); mix-blend-mode: screen; animation: cocteleriaGlow 9s ease-in-out infinite alternate; } @keyframes cocteleriaGlow { 0% { opacity: 0.55; } 100% { opacity: 0.95; } } .cocteleria__slide--active { opacity: 1; } /* Arrows */ .cocteleria__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; background: rgba(17, 21, 24, 0.5); border: 1px solid rgba(226, 216, 155, 0.4); color: var(--gold); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--speed) var(--ease); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .cocteleria__arrow:hover { background: rgba(226, 216, 155, 0.2); border-color: var(--gold); color: var(--text); } .cocteleria__arrow--prev { left: 40px; } .cocteleria__arrow--next { right: 40px; } /* Dots */ .cocteleria__dots { position: absolute; bottom: 180px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 14px; } .cocteleria__dot { width: 10px; height: 10px; border: 1px solid var(--gold); background: transparent; cursor: pointer; transition: all var(--speed) var(--ease); } .cocteleria__dot--active { background: var(--gold); } @media (max-width: 900px) { .cocteleria__arrow--prev { left: 16px; } .cocteleria__arrow--next { right: 16px; } .cocteleria__arrow { width: 40px; height: 40px; } .cocteleria__dots { bottom: 20px; gap: 10px; } .cocteleria__dot { width: 8px; height: 8px; } } /* Soft transition between restaurante and cocteleria */ .restaurante:not(.cocteleria) { position: relative; } .restaurante:not(.cocteleria)::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80%; max-width: 900px; height: 200px; background: radial-gradient( ellipse at center bottom, rgba(174, 143, 91, 0.08) 0%, rgba(100, 50, 120, 0.05) 40%, transparent 70% ); pointer-events: none; z-index: 1; } /* Breathing space between sections */ .restaurante:not(.cocteleria) + .cocteleria { margin-top: 40px; padding-top: 40px; } /* Small decorative ornament between sections */ .restaurante:not(.cocteleria) + .cocteleria::before { content: '❋'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); color: var(--gold); font-size: 1.4rem; opacity: 0.4; font-style: italic; z-index: 5; background: var(--bg-deep); padding: 0 20px; } /* Gold decorative frame around chef photo */ .restaurante__chef-frame { position: absolute; top: 20px; left: 20px; right: -20px; bottom: -20px; border: 1px solid var(--gold-dark); pointer-events: none; z-index: -1; } /* ── CTA to full carta ── */ .restaurante__cta { text-align: center; padding: 40px 0 100px; } /* ── Highlights stripe (unused now) ── */ .restaurante__highlights { padding: var(--section-y) var(--gutter); text-align: center; background: linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 30%, var(--bg-deep) 70%, var(--bg) 100%); position: relative; } .restaurante__highlights h3 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); color: var(--gold); font-style: italic; margin-top: 10px; margin-bottom: 0; } .restaurante__dishes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; max-width: 1100px; margin: 60px auto; } .restaurante__dish { text-align: center; transition: transform var(--speed) var(--ease); } .restaurante__dish:hover { transform: translateY(-8px); } .restaurante__dish img { width: 100%; max-width: 220px; height: auto; margin: 0 auto 16px; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.4)); transition: transform 0.6s ease; } .restaurante__dish:hover img { transform: scale(1.05); } .restaurante__dish h4 { font-family: var(--font-display); font-size: 1.3rem; color: var(--text); margin-bottom: 4px; } .restaurante__dish span { font-family: var(--font-body); font-size: 0.9rem; font-weight: 700; color: var(--gold); } @media (max-width: 900px) { .restaurante__banner { height: 50vh; min-height: 340px; max-height: 480px; } /* Foto 4 padellini: contain invece di cover per vedere TUTTI i 4 piatti. Il banner dark fa da letterbox sopra/sotto, la foto è centrata. */ .restaurante__banner > .restaurante__banner-img { object-fit: contain; object-position: center 62%; } /* Banner coctelería 3a slide: titolo in basso-destra, piccolo, nell'angolino libero tra il cocktail orange e il limoncello */ .cocteleria__banner[data-slide="2"] .restaurante__banner-title { top: auto; bottom: 60px; left: auto; right: 18px; transform: none; font-size: clamp(1.5rem, 6vw, 2.2rem); letter-spacing: 0.6px; padding: 10px 14px; white-space: nowrap; } /* Banner coctelería SOLO sulla pagina /cocteleria/ (non sulla home): object-fit contain + animazioni disattivate → foto intera, niente zoom */ .page-cocteleria .cocteleria__banner .cocteleria__slide.restaurante__banner-img { object-fit: contain; object-position: center center; } /* Mobile (home + pagina): niente zoom scale/translate sulle slide 2 e 3 → i cocktail non appaiono troppo vicini/tagliati. Object-position center così la foto mostra anche il bancone/contesto sotto. */ .cocteleria__slider .cocteleria__slide:nth-child(2), .cocteleria__slider .cocteleria__slide:nth-child(3) { animation: none !important; transform: translateY(30px) !important; object-position: center 30% !important; } .restaurante__content { margin-top: -100px; padding-bottom: 100px; } .restaurante__content-inner { grid-template-columns: 1fr; gap: 40px; } .restaurante__text { padding: 40px 20px 0; max-width: none; } .restaurante__chef-photo { margin: 0 auto; max-width: 320px; justify-self: center; } .restaurante__content-inner--reverse .restaurante__chef-photo { justify-self: center; } .restaurante__chef-accent { bottom: -30px; left: -18px; width: 32%; max-width: 120px; } .restaurante__content-inner--reverse .restaurante__chef-accent { left: auto; right: -30px; bottom: -50px; width: 42%; max-width: 160px; } .restaurante__banner-title { font-size: clamp(2.2rem, 11vw, 4rem); padding: 20px 24px; letter-spacing: 1px; } .restaurante__dishes { grid-template-columns: repeat(2, 1fr); gap: 30px; } .restaurante__stage::before { display: none; } } @media (max-width: 500px) { .restaurante__dishes { grid-template-columns: 1fr; } .restaurante__chef-photo { max-width: 280px; } .restaurante__banner { height: 44vh; min-height: 300px; max-height: 400px; } .restaurante__banner > .restaurante__banner-img { object-fit: contain; object-position: center 60%; } .restaurante__banner-title { font-size: clamp(1.9rem, 10vw, 3rem); padding: 16px 20px; } /* Banner coctelería 3a slide: ancora più compatto su smartphone stretti */ .cocteleria__banner[data-slide="2"] .restaurante__banner-title { top: auto; bottom: 50px; left: auto; right: 14px; transform: none; font-size: clamp(1.2rem, 6vw, 1.8rem); letter-spacing: 0.4px; padding: 8px 12px; } } /* ═══════════════════════════════════════════ SPLIT SECTIONS ═══════════════════════════════════════════ */ .split { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; } .split--reverse { direction: rtl; } .split--reverse > * { direction: ltr; } .split__image { position: relative; overflow: hidden; } .split__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 8s ease; } .split__image:hover img { transform: scale(1.04); } .split__content { display: flex; align-items: center; } .split__content--warm { background: linear-gradient(135deg, var(--warm) 0%, var(--warm-dark) 100%); } .split__content--dark { background: linear-gradient(135deg, var(--bg) 0%, var(--bg-surface) 100%); } .split__inner { padding: clamp(40px, 6vw, 80px); max-width: 540px; } .split__title { font-size: clamp(2.2rem, 4vw, 3.4rem); color: var(--text); margin-bottom: 20px; } .split__title--dark { color: var(--text-dark); } .split__text { font-family: var(--font-body); font-size: 1rem; line-height: 1.9; color: var(--text-muted); margin-bottom: 16px; } .split__text--dark { color: #5a6266; } /* ═══════════════════════════════════════════ CARTA — Menu ═══════════════════════════════════════════ */ /* CARTA — light cream background with illustrations like online site */ /* ═══════════════════════════════════════════ CARTA — Language modal (centered, first visit) ═══════════════════════════════════════════ */ .carta-lang-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(10, 13, 15, 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: cartaLangFadeIn 0.35s ease; } .carta-lang-modal[hidden] { display: none; } .carta-lang-modal.is-hiding { animation: cartaLangFadeOut 0.3s ease forwards; } @keyframes cartaLangFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes cartaLangFadeOut { from { opacity: 1; } to { opacity: 0; } } .carta-lang-modal__card { position: relative; width: 100%; max-width: 440px; padding: 44px 36px 38px; background: radial-gradient(ellipse at top, rgba(226, 216, 155, 0.12) 0%, transparent 60%), linear-gradient(180deg, #1e2328 0%, #13171a 100%); border: 1px solid var(--gold-dark); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(226, 216, 155, 0.08); text-align: center; animation: cartaLangCardIn 0.45s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes cartaLangCardIn { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .carta-lang-modal.is-hiding .carta-lang-modal__card { animation: cartaLangCardOut 0.3s ease forwards; } @keyframes cartaLangCardOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(12px) scale(0.98); } } .carta-lang-modal__close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(226, 216, 155, 0.25); color: var(--gold); cursor: pointer; transition: all 0.3s ease; } .carta-lang-modal__close:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--bg); } .carta-lang-modal__logo { height: 54px; width: auto; margin: 0 auto 22px; display: block; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.4)); } .carta-lang-modal__kicker { display: block; font-family: var(--font-body); font-size: 0.66rem; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } .carta-lang-modal__title { font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-style: italic; color: var(--cream); margin: 0 0 28px; line-height: 1.25; font-weight: 400; } .carta-lang-modal__title em { color: var(--text-muted); font-style: italic; font-size: 0.85em; opacity: 0.85; } .carta-lang-modal__buttons { display: flex; gap: 12px; flex-direction: column; } .carta-lang-modal__btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 15px 24px; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); background: transparent; border: 1px solid var(--gold-dark); text-decoration: none; transition: all 0.35s ease; } .carta-lang-modal__btn:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(226, 216, 155, 0.25); } .carta-lang-modal__flag { font-size: 1.25rem; line-height: 1; } @media (max-width: 480px) { .carta-lang-modal { padding: 16px; } .carta-lang-modal__card { padding: 36px 24px 30px; } .carta-lang-modal__logo { height: 46px; margin-bottom: 18px; } .carta-lang-modal__title { font-size: 1.2rem; margin-bottom: 22px; } .carta-lang-modal__btn { padding: 14px 18px; font-size: 0.72rem; } } /* ═══════════════════════════════════════════ CARTA — Light/cream menu page ═══════════════════════════════════════════ */ .carta { padding: 20px 0 var(--section-y); background-color: #f5f1e6; background-image: url('/wp-content/uploads/2025/12/fondo-pasta.jpg'); background-repeat: repeat-y; background-size: 100% auto; background-position: center top; color: #2a2e30; position: relative; } .carta .section-header h1, .carta .section-header h2 { color: #2a2e30; } .carta .section-header__sub { color: #8a7a55; } .carta .section-header { margin-bottom: 80px; } .carta .section-header__logo { opacity: 1; height: auto; max-width: 560px; margin-bottom: 30px; filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.08)); } .carta .section-header h1, .carta .section-header h2 { font-size: clamp(2.8rem, 5vw, 4rem); margin-bottom: 10px; } .carta .section-header__sub { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); font-style: italic; letter-spacing: 2px; text-transform: none; color: #4a4a4a; margin-top: 20px; } /* Sub section header for categories */ .section-header--sub { margin-top: 100px; margin-bottom: 60px; position: relative; padding-top: 40px; } .section-header--sub::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 1px; background: linear-gradient(90deg, transparent, #ae8f5b, transparent); } .section-header--sub h3 { color: #1a1410; font-style: italic; font-size: clamp(2.2rem, 4vw, 3.2rem); margin-bottom: 6px; letter-spacing: 1px; } .carta .section-header--sub .section-header__sub { color: #7a6535; font-style: italic; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.5px; } .carta .line { background: #ae8f5b; } .carta .section-header .line--center { width: 100%; max-width: 900px; height: 1px; opacity: 0.4; margin-top: 30px; } /* ── Dishes grid — bigger, more spacious like online ── */ .dishes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 70px 40px; max-width: 1300px; margin: 0 auto; text-align: left; align-items: start; } .dishes--narrow { grid-template-columns: repeat(2, 1fr); max-width: 900px; gap: 70px 60px; } .dish { text-align: center; } .dish__img-wrap { position: relative; width: 280px; height: 280px; margin: 0 auto 24px; overflow: visible; display: flex; align-items: flex-end; justify-content: center; transition: transform var(--speed) var(--ease); } .dish__img-wrap img { max-width: 280px; max-height: 280px; object-fit: contain; transition: transform 0.6s var(--ease); filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.15)); } .dish:hover .dish__img-wrap { transform: translateY(-8px); } .dish:hover .dish__img-wrap img { transform: scale(1.04); } .dish__name { font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 700; color: #1a1410; font-style: italic; letter-spacing: 0.8px; line-height: 1.15; white-space: nowrap; margin: 0 0 6px; text-align: center; } .dish__price { display: block; font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; font-style: italic; color: #ae8f5b; letter-spacing: 0.5px; text-align: center; margin-bottom: 12px; opacity: 0.85; } .dish__desc { font-family: var(--font-body); font-size: 0.82rem; line-height: 1.65; color: #2a2520; font-style: italic; text-align: center; max-width: 260px; text-align: center; margin-left: auto; margin-right: auto; } .dish .veg { background: #6b9c59; } /* Capriccio del Chef — sezione speciale con cornice decorativa */ .capriccio-section { margin: 100px auto 80px; max-width: 800px; text-align: center; } .capriccio-section__frame { position: relative; padding: 50px 40px 60px; border: 1px solid rgba(174, 143, 91, 0.3); border-radius: 4px; background: rgba(174, 143, 91, 0.03); } .capriccio-section__frame::before, .capriccio-section__frame::after { content: ''; position: absolute; width: 30px; height: 30px; border-color: #ae8f5b; opacity: 0.5; } .capriccio-section__frame::before { top: 8px; left: 8px; border-top: 1px solid; border-left: 1px solid; } .capriccio-section__frame::after { bottom: 8px; right: 8px; border-bottom: 1px solid; border-right: 1px solid; } .capriccio-section__header { margin-top: 0; padding-top: 0; } .capriccio-section__header::before { display: none; } .capriccio-section__ornament { display: block; font-size: 1.2rem; color: #ae8f5b; opacity: 0.6; margin-bottom: 16px; letter-spacing: 8px; } .capriccio-section__dishes { display: flex; justify-content: center; gap: 40px; text-align: center; } .capriccio-section__header h3 em { color: #ae8f5b; font-style: italic; } @media (max-width: 680px) { .capriccio-section__dishes { flex-direction: column; gap: 50px; } .capriccio-section__frame { padding: 40px 24px 50px; } } /* Vegetariano badge — top of dish image, no bg */ .dish__veg-badge { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.1rem; color: #4caf50; font-style: italic; font-weight: 700; white-space: nowrap; } .dish__veg-badge img { width: 32px; height: 32px; } /* Vegetarian version available — top of dish image, same as badge */ .dish__veg-option { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1rem; font-style: italic; font-weight: 700; color: #4caf50; white-space: nowrap; text-align: center; line-height: 1.2; } .dish__veg-option img { width: 32px; height: 32px; flex-shrink: 0; } /* ── Carta final — Focaccia + Extras sopra (2 col), Postres full-width sotto ── */ .carta-final { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px 50px; max-width: 1200px; margin: 100px auto 60px; align-items: start; } .carta-final__col { position: relative; } .carta-final__title { font-family: var(--font-display); font-size: 2.2rem; font-style: italic; color: #2a2e30; margin-bottom: 8px; } .carta-final__price { display: inline-block; font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; color: #8a7a55; margin-bottom: 16px; opacity: 0.85; } .carta-final__desc { font-family: var(--font-body); font-size: 0.9rem; line-height: 1.7; color: #4a4a4a; margin-bottom: 14px; max-width: 340px; } .carta-final__photo { margin-top: 20px; max-width: 260px; } .carta-final__photo img { width: 100%; height: auto; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.12)); } /* Extras box — highlighted frame per risaltare la sezione add-ons */ .carta-final__extras { position: relative; padding: 44px 36px 40px; text-align: left; min-height: 280px; background: linear-gradient(180deg, rgba(255,251,238,0.6), rgba(245,240,228,0.4)); border: 1px solid rgba(174, 143, 91, 0.45); border-radius: 4px; box-shadow: 0 6px 24px rgba(26, 20, 16, 0.06); } .carta-final__extras::before, .carta-final__extras::after { content: ''; position: absolute; width: 22px; height: 22px; border-color: #ae8f5b; opacity: 0.6; } .carta-final__extras::before { top: 6px; left: 6px; border-top: 1px solid; border-left: 1px solid; } .carta-final__extras::after { bottom: 6px; right: 6px; border-bottom: 1px solid; border-right: 1px solid; } .carta-final__kicker { display: block; font-family: var(--font-body); font-size: 0.65rem; font-weight: 700; color: #ae8f5b; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 10px; text-align: center; } .carta-final__extras .carta-final__title { text-align: center; margin-bottom: 22px; } .carta-final__extras ul { list-style: none; padding: 0; margin: 0; } .carta-final__extras li { font-family: var(--font-body); font-size: 0.95rem; color: #4a4a4a; padding: 10px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .carta-final__extras li b { color: #8a7a55; font-weight: 700; white-space: nowrap; font-size: 0.88em; opacity: 0.85; vertical-align: baseline; } /* Postres — "gran finale" come griglia di 3 card con foto, distinta dalla cornice box di Extras. Tipografia rinforzata (stroke + halo) per stacco dal fondo marble. */ .carta-final__postres { position: relative; text-align: center; padding: 40px 16px 30px; background: transparent; border: none; box-shadow: none; grid-column: 1 / -1; } .carta-final__postres::before { content: '❦'; display: block; font-size: 1.6rem; color: #ae8f5b; opacity: 0.7; margin-bottom: 10px; line-height: 1; text-shadow: 0 0 6px rgba(245, 241, 230, 0.9); } .carta-final__postres .carta-final__kicker { color: #6a5428; font-style: italic; letter-spacing: 5px; text-transform: uppercase; font-weight: 400; font-family: var(--font-display); font-size: 0.78rem; margin-bottom: 6px; -webkit-text-stroke: 0.25px currentColor; paint-order: stroke fill; text-shadow: 0 0 8px rgba(245, 241, 230, 0.95); } .carta-final__postres .carta-final__title { text-align: center; font-size: 3rem; margin-bottom: 32px; letter-spacing: 0.5px; color: #14100c; -webkit-text-stroke: 0.5px currentColor; paint-order: stroke fill; text-shadow: 0 0 12px rgba(245, 241, 230, 0.95); } .postres-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 30px; max-width: 960px; margin: 0 auto; align-items: start; } .postre-card { text-align: center; } .postre-card__img-wrap { position: relative; width: 220px; height: 220px; margin: 0 auto 18px; border-radius: 50%; overflow: hidden; box-shadow: 0 14px 34px rgba(26, 20, 16, 0.22); transition: transform 0.5s var(--ease); } .postre-card:hover .postre-card__img-wrap { transform: translateY(-6px) scale(1.02); } .postre-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.6s var(--ease); } .postre-card:hover .postre-card__img-wrap img { transform: scale(1.04); } /* Card "tight": foto originali con sfondo radiale — leggero scale CSS per nascondere l'alone chiaro ai bordi del ritaglio circolare. NO crop fisico del file (niente doppio zoom). Scale SOLO su Clásico e Nutella. */ .postre-card--tight .postre-card__img-wrap img { transform: scale(1.06); } .postre-card--tight:hover .postre-card__img-wrap img { transform: scale(1.1); } .postre-card__name { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; font-weight: 700; color: #14100c; letter-spacing: 0.3px; margin: 0 0 6px; -webkit-text-stroke: 0.4px currentColor; paint-order: stroke fill; text-shadow: 0 0 8px rgba(245, 241, 230, 0.92); } .postre-card__price { display: block; font-family: var(--font-display); font-size: 1rem; font-weight: 700; font-style: italic; color: #8a6d35; letter-spacing: 0.5px; opacity: 0.9; -webkit-text-stroke: 0.25px currentColor; paint-order: stroke fill; text-shadow: 0 0 8px rgba(245, 241, 230, 0.9); } /* Il parent .carta-final ha grid-template-columns 2 col (Focaccia | Extras). Con grid-column 1/-1 sul postres, il blocco occupa tutta la riga sotto. */ /* Capriccio del Chef su desktop — stroke + halo per leggere sul marble */ @media (min-width: 601px) { .capriccio-section__header h3 { font-size: clamp(2.4rem, 4vw, 3.3rem); color: #14100c; letter-spacing: 1.2px; -webkit-text-stroke: 0.5px currentColor; paint-order: stroke fill; text-shadow: 0 0 10px rgba(245, 241, 230, 0.95); } .capriccio-section__header h3 em { color: #8a6d35; } .carta .capriccio-section__header .section-header__sub { font-size: 1.2rem; color: #5a4720; letter-spacing: 0.6px; -webkit-text-stroke: 0.3px currentColor; paint-order: stroke fill; text-shadow: 0 0 8px rgba(245, 241, 230, 0.92); } .capriccio-section__ornament { font-size: 1.4rem; color: #ae8f5b; opacity: 0.75; text-shadow: 0 0 6px rgba(245, 241, 230, 0.9); } } /* Focaccia su desktop — testo rinforzato (stroke + halo cream) per leggere bene sul fondo marble con illustrazioni stilizzate */ @media (min-width: 601px) { .carta-final__focaccia .carta-final__title { font-size: 2.6rem; color: #14100c; letter-spacing: 0.5px; -webkit-text-stroke: 0.4px currentColor; paint-order: stroke fill; text-shadow: 0 0 10px rgba(245, 241, 230, 0.95); margin-bottom: 10px; } .carta-final__focaccia .carta-final__price { font-size: 1rem; color: #6a5428; letter-spacing: 0.4px; -webkit-text-stroke: 0.2px currentColor; paint-order: stroke fill; text-shadow: 0 0 8px rgba(245, 241, 230, 0.92); opacity: 1; } .carta-final__focaccia .carta-final__desc { font-size: 0.98rem; line-height: 1.7; color: #1f1a15; text-shadow: 0 0 8px rgba(245, 241, 230, 0.9); max-width: 360px; } .carta-final__focaccia .carta-final__desc strong { color: #14100c; font-weight: 700; } .carta-final__focaccia .carta-final__photo { margin-top: 26px; max-width: 280px; filter: drop-shadow(0 14px 28px rgba(26, 20, 16, 0.18)); } } /* Legend */ .carta-legend { max-width: 1000px; margin: 40px auto 20px; padding-top: 30px; border-top: 1px dashed rgba(174, 143, 91, 0.4); display: flex; flex-direction: column; align-items: flex-end; gap: 14px; } .carta-legend__item { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-body); font-size: 0.85rem; color: #4a4a4a; } .carta-legend__item img { width: 26px; height: 26px; } .carta-legend__item b { color: #4caf50; font-weight: 700; font-style: italic; margin-right: 4px; } /* ── Gluten-free disclaimer — important legal notice ── */ .carta-notice { display: flex; align-items: flex-start; gap: 20px; max-width: 1000px; margin: 40px auto 30px; padding: 26px 32px; background: rgba(255, 251, 238, 0.85); border: 1px solid rgba(174, 143, 91, 0.35); border-left: 3px solid #c38d2a; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06); } .carta-notice__icon { flex-shrink: 0; color: #c38d2a; margin-top: 2px; } .carta-notice__text .label { display: block; color: #8a5a15 !important; margin-bottom: 10px; font-size: 0.68rem; letter-spacing: 3px; } .carta-notice__text p { font-family: var(--font-body); font-size: 0.9rem; line-height: 1.75; color: #4a4a4a; margin: 0; } .carta-notice__text strong { color: #2a2e30; font-weight: 700; } @media (max-width: 700px) { .carta-notice { flex-direction: column; padding: 22px 24px; gap: 14px; } } @media (max-width: 900px) { .carta-final { grid-template-columns: 1fr; gap: 50px; } .postres-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; max-width: 520px; } .carta-legend { align-items: center; text-align: center; } } .carta .menu__note { color: #8a7a55; opacity: 0.8; } /* Carta — full-screen menu mode: nasconde nav/footer come un menu fisico. Il WA-FAB resta visibile (anche su carta), come sulle altre pagine. */ .is-carta .nav-topbar, .is-carta .nav, .is-carta .mobile-menu, .is-carta .footer, .is-carta .skip-link, .is-carta .wa-fab { display: none !important; } .is-carta #main-content { padding-top: 0; background: #f5f0e8; } .is-carta body, .is-carta { background: #f5f0e8; } /* Carta back button — inline in section-header su mobile, fixed top-left corner su desktop (≥601px) */ .carta-back { display: inline-flex; align-items: center; gap: 5px; padding: 8px 18px; margin-bottom: 24px; font-family: var(--font-body); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; color: #ae8f5b; border: 1px solid rgba(174, 143, 91, 0.4); border-radius: 2px; transition: all 0.25s ease; } .carta-back:hover { color: #1a1410; border-color: #ae8f5b; } .carta-back svg { opacity: 0.7; } @media (min-width: 601px) { .carta-back { position: fixed; top: 22px; left: 28px; z-index: 50; margin-bottom: 0; font-size: 0.72rem; padding: 10px 22px; background: rgba(245, 240, 232, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 4px 18px rgba(26, 20, 16, 0.08); border-color: rgba(174, 143, 91, 0.55); } .carta-back:hover { background: rgba(245, 240, 232, 0.95); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(26, 20, 16, 0.12); } } .carta .section-header h1 em, .carta .section-header h2 em { color: #ae8f5b; font-style: italic; } /* Linea decorativa verticale tra logo e titolo */ .carta-separator { display: flex; justify-content: center; margin: 10px 0; } .carta-separator span { display: block; width: 1px; height: 40px; background: linear-gradient(180deg, transparent, #ae8f5b, transparent); } /* Responsive carta */ @media (max-width: 900px) { .dishes { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; } .dishes--narrow { grid-template-columns: 1fr; } .dish__img-wrap { width: 200px; height: 200px; } .dish__name { font-size: 1.4rem; } .dish__price { font-size: 1rem; } .dish__desc { font-size: 0.82rem; max-width: 220px; } .dish__veg-option { font-size: 0.75rem; gap: 6px; } .dish__veg-option img { width: 22px; height: 22px; } .section-header--sub h3 { font-size: 2rem; } .capriccio-section { margin: 70px auto 60px; } .capriccio-section__frame { padding: 35px 25px 45px; } } @media (max-width: 600px) { .dishes { grid-template-columns: 1fr; gap: 36px; } .section-header--sub { margin-top: 60px; margin-bottom: 40px; } .section-header--sub h3 { font-size: 2.2rem; -webkit-text-stroke: 0.55px currentColor; paint-order: stroke fill; text-shadow: 0 0 10px rgba(245, 241, 230, 0.95), 0 1px 0 rgba(26, 20, 16, 0.08); color: #14100c; } .carta .section-header--sub .section-header__sub { font-size: 1.15rem; color: #5a4720; -webkit-text-stroke: 0.35px currentColor; paint-order: stroke fill; text-shadow: 0 0 8px rgba(245, 241, 230, 0.95); letter-spacing: 0.6px; } .capriccio-section { margin: 50px auto 40px; } .capriccio-section__frame { padding: 30px 16px 40px; } .capriccio-section__dishes { flex-direction: column; gap: 36px; } .capriccio-section__ornament { font-size: 1.4rem; opacity: 0.75; text-shadow: 0 0 6px rgba(245, 241, 230, 0.9); } /* Titolo carta — più peso (stroke) + halo cream per stacco dal marble */ .carta .section-header__logo { max-width: min(360px, 94%); width: 100%; margin-bottom: 26px; } .carta .section-header h1, .carta .section-header h2 { font-size: 3.2rem; -webkit-text-stroke: 0.4px currentColor; paint-order: stroke fill; text-shadow: 0 0 10px rgba(245, 241, 230, 0.9); } .carta .section-header__sub { font-size: 1.45rem; color: #3a3228; -webkit-text-stroke: 0.3px currentColor; paint-order: stroke fill; text-shadow: 0 0 8px rgba(245, 241, 230, 0.9); } .carta-back { font-size: 0.78rem; padding: 10px 20px; letter-spacing: 0.18em; } /* Mobile carta — menu-card stacked centered: nome sopra, prezzo sotto, foto e desc centrati, separatore gold dotted tra piatti */ .dish { display: grid; grid-template-columns: 1fr; grid-template-areas: "name" "price" "img" "desc"; row-gap: 2px; padding-bottom: 30px; border-bottom: 1px dotted rgba(174, 143, 91, 0.45); text-align: center; } .dishes > .dish:last-child, .capriccio-section__dishes > .dish:last-child { border-bottom: none; padding-bottom: 8px; } .dish__name { grid-area: name; justify-self: center; text-align: center; font-size: 1.55rem; line-height: 1.2; letter-spacing: 0.3px; white-space: normal; margin: 0; color: #1a1410; -webkit-text-stroke: 0.35px currentColor; paint-order: stroke fill; text-shadow: 0 0 8px rgba(245, 241, 230, 0.9); } .dish__price { grid-area: price; justify-self: center; text-align: center; margin: 3px 0 0; font-size: 1rem; font-weight: 700; font-style: italic; color: #8a6d35; letter-spacing: 0.5px; white-space: nowrap; opacity: 0.85; -webkit-text-stroke: 0.2px currentColor; paint-order: stroke fill; text-shadow: 0 0 8px rgba(245, 241, 230, 0.9); } /* Padellini: misura fluida (scala col viewport) + anchor al fondo default flex-end così tutti i piatti "poggiano" sulla stessa linea base → uniformità anche con foto sorgente composte in modo diverso */ .dish__img-wrap { grid-area: img; width: clamp(210px, 64vw, 280px); height: clamp(210px, 64vw, 280px); justify-self: center; margin: 18px auto 6px; } .dish__img-wrap img { max-width: 100%; max-height: 100%; object-position: center; } .dish__desc { grid-area: desc; justify-self: center; text-align: center; font-size: 0.98rem; line-height: 1.55; max-width: 340px; margin: 6px auto 0; color: #1f1a15; text-shadow: 0 0 8px rgba(245, 241, 230, 0.85); } .dish__veg-option { font-size: 0.85rem; gap: 6px; line-height: 1.15; -webkit-text-stroke: 0.3px currentColor; paint-order: stroke fill; text-shadow: 0 0 6px rgba(245, 241, 230, 0.85); } .dish__veg-option img { width: 22px; height: 22px; } /* Legend + notice — leggibilità rinforzata */ .carta-legend { gap: 14px; align-items: center; text-align: center; } .carta-legend__item { font-size: 0.95rem; color: #1f1a15; text-shadow: 0 0 8px rgba(245, 241, 230, 0.85); } .carta-legend__item img { width: 26px; height: 26px; } .carta-notice__text p { font-size: 0.95rem; line-height: 1.65; color: #2a241e; } /* Carta-final (Focaccia + Extras + Postres) — tutto centrato, tipografia coerente con i piatti sopra, separatori dotted tra colonne */ .carta-final { gap: 0; margin: 70px auto 40px; } .carta-final__col { text-align: center; padding: 32px 4px 36px; border-bottom: 1px dotted rgba(174, 143, 91, 0.45); } .carta-final__col:last-child { border-bottom: none; } .carta-final__title { font-size: 2.2rem; color: #14100c; -webkit-text-stroke: 0.45px currentColor; paint-order: stroke fill; text-shadow: 0 0 10px rgba(245, 241, 230, 0.95); text-align: center !important; margin-bottom: 6px; } .carta-final__price { display: block; margin: 0 auto 14px; font-size: 1rem; color: #8a6d35; text-shadow: 0 0 8px rgba(245, 241, 230, 0.9); } .carta-final__desc { font-size: 0.95rem; line-height: 1.6; color: #1f1a15; max-width: 340px; margin: 0 auto 14px; text-shadow: 0 0 8px rgba(245, 241, 230, 0.85); } .carta-final__photo { max-width: 220px; margin: 22px auto 0; } .carta-final__postres { padding: 30px 10px 20px; } .carta-final__postres::before { font-size: 1.4rem; margin-bottom: 8px; } .carta-final__postres .carta-final__title { font-size: 2.5rem; margin-bottom: 24px; } .postres-grid { grid-template-columns: 1fr; gap: 36px; max-width: 360px; } .postre-card__img-wrap { width: clamp(210px, 64vw, 260px); height: clamp(210px, 64vw, 260px); margin-bottom: 14px; } .postre-card__name { font-size: 1.4rem; } .postre-card__price { font-size: 1rem; } .carta-final__extras { padding: 40px 18px 36px; min-height: 0; } .carta-final__kicker { font-size: 0.7rem; letter-spacing: 3.5px; color: #8a6d35; text-shadow: 0 0 6px rgba(245, 241, 230, 0.9); } .carta-final__extras ul { max-width: 300px; margin: 0 auto; text-align: center; } .carta-final__extras li { justify-content: center; gap: 10px; font-size: 1.02rem; padding: 9px 0; color: #1f1a15; text-shadow: 0 0 6px rgba(245, 241, 230, 0.85); border-bottom: 1px dotted rgba(174, 143, 91, 0.25); } .carta-final__extras li:last-child { border-bottom: none; } .carta-final__extras li b { color: #8a6d35; } } .menu { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 60px; max-width: 1000px; margin: 0 auto; } .menu__item { padding: 16px 0; border-bottom: 1px solid rgba(174, 143, 91, 0.1); } .menu__row { display: flex; align-items: baseline; gap: 8px; } .menu__name { font-family: var(--font-display); font-size: 1.2rem; color: var(--text); white-space: nowrap; } .menu__dots { flex: 1; min-width: 16px; border-bottom: 1px dotted rgba(174, 143, 91, 0.25); margin-bottom: 4px; } .menu__price { font-family: var(--font-body); font-size: 0.9rem; color: var(--gold); white-space: nowrap; } .menu__desc { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; line-height: 1.4; } .menu__note { text-align: center; font-size: 0.7rem; color: var(--text-muted); opacity: 0.5; margin-top: 48px; letter-spacing: 1px; } /* Extras row */ .menu-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; max-width: 1000px; margin: 60px auto 0; padding-top: 48px; border-top: 1px solid var(--border); } .menu-extra__title { font-family: var(--font-display); font-size: 1.5rem; color: var(--gold); font-style: italic; margin-bottom: 20px; } /* ═══════════════════════════════════════════ CINEMATIC BREAK — Full width image ═══════════════════════════════════════════ */ .cinematic { position: relative; height: 50vh; min-height: 350px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .cinematic__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cinematic__overlay { position: absolute; inset: 0; background: rgba(17, 21, 24, 0.6); } .cinematic__content { position: relative; z-index: 2; text-align: center; } .cinematic__title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); color: var(--text); font-style: italic; } /* ═══════════════════════════════════════════ CÓCTELES ═══════════════════════════════════════════ */ .cocteles { padding: var(--section-y) 0; background: var(--bg); position: relative; } .cocteles::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--bg) 0%, rgba(40, 30, 50, 0.3) 100%); pointer-events: none; } .cocteles .container { position: relative; z-index: 2; } .cocteles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 900px; margin: 0 auto; } .cocteles__cat { padding: 32px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.02); transition: border-color var(--speed) var(--ease); } .cocteles__cat:hover { border-color: var(--gold-dark); } .cocteles__cat-name { font-family: var(--font-display); font-size: 1.3rem; color: var(--gold); margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .cocteles__cat li { font-family: var(--font-body); font-size: 0.9rem; color: var(--cream); padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); letter-spacing: 0.5px; } .cocteles__cat li:last-child { border-bottom: none; } .cocteles__beer { max-width: 550px; margin: 48px auto 0; text-align: center; padding: 28px; border: 1px solid var(--border); } .cocteles__beer p { font-family: var(--font-body); font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; } /* ═══════════════════════════════════════════ SOCIAL PROOF ═══════════════════════════════════════════ */ .proof { padding: var(--section-y) 0; background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg) 100%); } .proof__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; margin-bottom: 50px; } .proof__video-wrap { position: relative; } .proof__badge { position: absolute; top: -12px; left: 20px; z-index: 2; background: var(--gold-dark); padding: 6px 16px; font-family: var(--font-body); font-size: 0.6rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #fff; } .proof__video { position: relative; width: 100%; padding-bottom: 56.25%; background: var(--bg); border: 1px solid var(--border); } .proof__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; } .proof__quotes { display: flex; flex-direction: column; gap: 20px; } .proof__quote { padding: 28px; border-left: 3px solid var(--gold); background: rgba(26, 31, 34, 0.4); } .proof__source { display: block; font-family: var(--font-body); font-size: 0.65rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; } .proof__quote p { font-family: var(--font-display); font-size: 1.1rem; font-style: italic; color: var(--text); line-height: 1.7; } .proof__guru-row { display: flex; align-items: center; gap: 20px; } .proof__guru-badge-wrap { flex-shrink: 0; } .proof__reviews { padding-top: 40px; border-top: 1px solid var(--border); } /* ═══════════════════════════════════════════ CONTACTO ═══════════════════════════════════════════ */ /* ═══════════════════════════════════════════ PRENSA — Editorial magazine style ═══════════════════════════════════════════ */ .prensa { padding: var(--section-y) 0; background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(226, 216, 155, 0.08) 0%, transparent 60% ), radial-gradient(ellipse 80% 60% at 100% 100%, rgba(174, 143, 91, 0.06) 0%, transparent 50% ), linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-surface) 50%, var(--bg-deep) 100%); position: relative; } /* Decorative gold corner lines for prensa */ .prensa::before, .prensa::after { content: ''; position: absolute; width: 80px; height: 80px; border: 1px solid rgba(174, 143, 91, 0.25); pointer-events: none; } .prensa::before { top: 50px; left: 50px; border-right: none; border-bottom: none; } .prensa::after { bottom: 50px; right: 50px; border-left: none; border-top: none; } .prensa .section-header { margin-bottom: 70px; } .prensa .section-header h2 { font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; color: var(--gold); font-style: italic; } /* ── Main row: [video + reviews] LEFT + [quotes] RIGHT ── */ /* ── HERO row: video + compact reviews card ── */ .prensa__hero { display: grid; grid-template-columns: 1.9fr 1fr; gap: 40px; max-width: 1300px; margin: 0 auto 80px; align-items: stretch; } /* ── Reviews summary card (right of video) ── */ .prensa__reviews-card { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 40px 36px; background: radial-gradient(ellipse at top right, rgba(226, 216, 155, 0.07) 0%, transparent 60%), linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%); border: 1px solid var(--border); border-top: 3px solid var(--gold-dark); position: relative; } .prensa__reviews-card::before { content: ''; position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; border-top: 1px solid var(--gold-dark); border-right: 1px solid var(--gold-dark); opacity: 0.5; } .prensa__reviews-top { display: flex; align-items: center; gap: 10px; } .prensa__reviews-brand { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted); } .prensa__reviews-score { display: flex; align-items: baseline; gap: 16px; margin-top: 4px; } .prensa__reviews-number { font-family: var(--font-display); font-size: clamp(3.2rem, 5vw, 4.4rem); color: var(--gold); font-style: italic; line-height: 1; } .prensa__reviews-stars { display: flex; gap: 3px; } .prensa__reviews-stars svg { width: 18px; height: 18px; display: block; } .prensa__reviews-count { font-family: var(--font-body); font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; } .prensa__reviews-count strong { color: var(--cream); font-weight: 700; } .prensa__reviews-badge { margin: 4px 0; display: flex; justify-content: flex-start; transform: scale(0.85); transform-origin: left center; } .prensa__reviews-btn { align-self: flex-start; margin-top: 4px; } /* ── MARQUEE ── infinite scrolling press cards ── */ .prensa__marquee-wrap { max-width: 1300px; margin: 0 auto; } .prensa__marquee-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 36px; } .prensa__marquee-header .label { display: inline-block; } .prensa__marquee-nav { display: flex; gap: 10px; } .prensa__marquee-btn { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); color: var(--gold); cursor: pointer; transition: all 0.3s ease; } .prensa__marquee-btn:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--bg); transform: translateY(-1px); } .prensa__marquee-btn:active { transform: translateY(0); } .prensa__marquee { position: relative; overflow: hidden; cursor: grab; user-select: none; /* Soft fade on left and right edges */ -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%); } .prensa__marquee.is-dragging { cursor: grabbing; } .prensa__marquee.is-dragging .prensa__marquee-track { transition: none !important; } .prensa__marquee-track { display: flex; gap: 28px; width: max-content; animation: prensaMarqueeScroll 55s linear infinite; } .prensa__marquee:hover .prensa__marquee-track { animation-play-state: paused; } @keyframes prensaMarqueeScroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 14px)); } } /* ── Single press card (unified style for marquee) ── */ .prensa__card { flex: 0 0 auto; width: 420px; display: flex; flex-direction: column; position: relative; padding: 52px 40px 32px 44px; background: radial-gradient(ellipse at top left, rgba(226, 216, 155, 0.06) 0%, transparent 60%), linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%); border: 1px solid var(--border); border-left: 3px solid var(--gold-dark); overflow: hidden; transition: transform 0.4s ease, border-color 0.4s ease; } .prensa__card:hover { transform: translateY(-4px); border-left-color: var(--gold); } .prensa__card::before { content: ''; position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; border-top: 1px solid var(--gold-dark); border-right: 1px solid var(--gold-dark); opacity: 0.5; } .prensa__card .prensa__quote-mark { position: absolute; top: 6px; left: 24px; font-family: var(--font-display); font-size: 7rem; line-height: 0.8; color: var(--gold); opacity: 0.3; font-style: italic; pointer-events: none; } .prensa__card blockquote { position: relative; font-family: var(--font-display); font-size: 1.25rem; font-style: italic; color: var(--text); line-height: 1.55; margin-bottom: 28px; z-index: 1; flex: 1; } .prensa__card .prensa__quote-footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-top: 18px; border-top: 1px solid var(--border); position: relative; z-index: 1; } .prensa__card .prensa__quote-source { font-family: var(--font-display); font-size: 1.15rem; color: var(--gold); font-style: italic; } .prensa__card .prensa__quote-date { font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin-top: 3px; } /* Video */ .prensa__video { position: relative; } .prensa__video-badge { display: inline-flex; align-items: center; gap: 8px; position: absolute; top: -14px; left: 20px; z-index: 3; background: var(--bg-deep); border: 1px solid var(--gold-dark); padding: 8px 18px; font-family: var(--font-body); font-size: 0.65rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); } .prensa__video-badge svg { color: #e53935; animation: livePulse 2s ease-in-out infinite; } @keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .prensa__video-frame { position: relative; width: 100%; padding-bottom: 56.25%; background: #000; border: 1px solid var(--border); overflow: hidden; } .prensa__video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; } .prensa__video-caption { font-family: var(--font-body); font-size: 0.75rem; color: var(--text-muted); opacity: 0.7; margin-top: 14px; text-align: center; font-style: italic; } /* Quote card — editorial magazine */ .prensa__quote-card { position: relative; background: radial-gradient(ellipse at top left, rgba(226, 216, 155, 0.06) 0%, transparent 60%), linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%); border: 1px solid var(--border); border-left: 3px solid var(--gold-dark); padding: 60px 44px 36px 48px; overflow: hidden; } /* Gold decorative corner */ .prensa__quote-card::before { content: ''; position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-top: 1px solid var(--gold-dark); border-right: 1px solid var(--gold-dark); opacity: 0.6; } .prensa__quote-card::after { content: ''; position: absolute; bottom: 20px; left: 20px; width: 40px; height: 40px; border-bottom: 1px solid var(--gold-dark); border-left: 1px solid var(--gold-dark); opacity: 0.4; } .prensa__quote-mark { position: absolute; top: 10px; left: 30px; font-family: var(--font-display); font-size: 10rem; line-height: 0.8; color: var(--gold); opacity: 0.35; font-style: italic; pointer-events: none; } .prensa__quote-card blockquote { position: relative; font-family: var(--font-display); font-size: clamp(1.4rem, 2.5vw, 2rem); font-style: italic; color: var(--text); line-height: 1.55; margin-bottom: 36px; z-index: 1; } .prensa__quote-footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-top: 22px; border-top: 1px solid var(--border); position: relative; z-index: 1; } .prensa__quote-source { font-family: var(--font-display); font-size: 1.4rem; color: var(--gold); font-style: italic; } .prensa__quote-date { font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; } /* ── Quotes column (right of video) ── */ .prensa__quotes-col { display: flex; flex-direction: column; gap: 24px; } /* Restaurant Guru card — editorial */ .prensa__guru-card { display: flex; align-items: center; gap: 30px; padding: 30px 36px; background: radial-gradient(ellipse at right center, rgba(226, 216, 155, 0.06) 0%, transparent 70%), linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%); border: 1px solid var(--border); border-right: 3px solid var(--gold-dark); position: relative; } .prensa__guru-card::before { content: ''; position: absolute; top: 20px; left: 20px; width: 30px; height: 30px; border-top: 1px solid var(--gold-dark); border-left: 1px solid var(--gold-dark); opacity: 0.5; } .prensa__guru-badge { flex-shrink: 0; } .prensa__guru-text .label { margin-bottom: 12px; color: var(--gold); } .prensa__guru-text p { font-family: var(--font-display); font-size: 1.1rem; font-style: italic; color: var(--cream); line-height: 1.6; margin-top: 8px; } /* ── Google reviews (inside left col under video) ── */ .prensa__reviews { padding-top: 30px; border-top: 1px solid var(--border); } .prensa__reviews-header { text-align: left; margin-bottom: 30px; } .prensa__reviews-header h3 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.5vw, 1.8rem); color: var(--gold); font-style: italic; margin-top: 8px; } .prensa__reviews .ti-widget { transform: none; margin-bottom: 0; } .prensa__reviews .ti-widget-container { max-width: none !important; } @media (max-width: 900px) { .prensa__main { grid-template-columns: 1fr; gap: 40px; } .prensa__hero { grid-template-columns: 1fr; gap: 32px; margin-bottom: 60px; } .prensa__reviews-card { padding: 32px 28px; } .prensa__card { width: 320px; padding: 44px 28px 26px 32px; } .prensa__card blockquote { font-size: 1.1rem; } .prensa__marquee-track { animation-duration: 45s; } .prensa__award { flex-direction: column; gap: 24px; text-align: center; padding: 30px 20px; } } /* ═══════════════════════════════════════════ INSTAGRAM — Social showcase ═══════════════════════════════════════════ */ .instagram-section { padding: var(--section-y) 0; background: radial-gradient(ellipse 60% 80% at 20% 50%, rgba(193, 53, 132, 0.08) 0%, transparent 60% ), radial-gradient(ellipse 60% 80% at 80% 50%, rgba(245, 133, 41, 0.06) 0%, transparent 60% ), linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 50%, var(--bg-deep) 100%); position: relative; overflow: hidden; } .instagram__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; max-width: 1100px; margin: 0 auto; } /* Phone photo */ .instagram__phone { position: relative; display: flex; justify-content: center; align-items: center; } .instagram__phone img { max-width: 100%; width: 420px; height: auto; filter: drop-shadow(0 30px 80px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 60px rgba(193, 53, 132, 0.15)); transform: rotate(-3deg); transition: transform 0.8s var(--ease); } .instagram__phone:hover img { transform: rotate(0deg) scale(1.02); } /* Text */ .instagram__text h2 { font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 4rem); font-style: italic; color: var(--gold); line-height: 1.05; margin-bottom: 20px; } .instagram__text p { font-family: var(--font-body); font-size: 1rem; line-height: 1.9; color: var(--text-muted); margin-bottom: 20px; } .instagram__profile { display: inline-flex; align-items: center; gap: 16px; margin: 14px 0 32px; text-decoration: none; transition: transform 0.35s ease; } .instagram__profile:hover { transform: translateY(-2px); } .instagram__avatar { width: 58px; height: 58px; border-radius: 50%; padding: 3px; background: conic-gradient(from 135deg, var(--gold) 0%, var(--gold-dark) 35%, var(--gold) 70%, var(--gold-dark) 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 8px 24px rgba(226, 216, 155, 0.18); transition: box-shadow 0.35s ease, transform 0.5s ease; } .instagram__profile:hover .instagram__avatar { box-shadow: 0 12px 32px rgba(226, 216, 155, 0.32); transform: rotate(8deg); } .instagram__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg-deep); display: block; } .instagram__handle { font-family: var(--font-display) !important; font-size: 1.4rem !important; font-style: italic; color: var(--gold) !important; letter-spacing: 1px; } .instagram__btn { display: inline-flex !important; align-items: center; gap: 12px; background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%); border: none; color: #fff; padding: 18px 42px; transition: all var(--speed) var(--ease); } .instagram__btn:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(253, 29, 29, 0.3); } @media (max-width: 900px) { .instagram__grid { grid-template-columns: 1fr; gap: 50px; text-align: center; } .instagram__phone img { width: 300px; } .instagram__text .line { margin-left: auto; margin-right: auto; } } /* ═══════════════════════════════════════════ FAQ — Preguntas frecuentes ═══════════════════════════════════════════ */ .faq { padding: var(--section-y) 0; background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(80, 40, 120, 0.08) 0%, transparent 60% ), radial-gradient(ellipse 60% 80% at 100% 50%, rgba(226, 216, 155, 0.04) 0%, transparent 60% ), linear-gradient(180deg, var(--bg-deep) 0%, #0d1014 50%, var(--bg-deep) 100%); position: relative; overflow: hidden; } /* Subtle decorative element in FAQ */ .faq::before { content: '?'; position: absolute; top: 10%; right: 5%; font-family: var(--font-display); font-size: 30rem; font-style: italic; color: var(--gold); opacity: 0.025; pointer-events: none; line-height: 1; } .faq .section-header { margin-bottom: 60px; } .faq__list { max-width: 820px; margin: 0 auto; } .faq__item { border-bottom: 1px solid rgba(174, 143, 91, 0.2); padding: 8px 0; } .faq__item:first-child { border-top: 1px solid rgba(174, 143, 91, 0.2); } .faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 10px; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.6rem); color: var(--gold); font-style: italic; transition: color var(--speed) var(--ease); } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary:hover { color: var(--cream); } /* Plus / Minus icon */ .faq__icon { position: relative; width: 18px; height: 18px; flex-shrink: 0; } .faq__icon::before, .faq__icon::after { content: ''; position: absolute; top: 50%; left: 50%; background: var(--gold); transition: transform var(--speed) var(--ease); } .faq__icon::before { width: 16px; height: 1px; transform: translate(-50%, -50%); } .faq__icon::after { width: 1px; height: 16px; transform: translate(-50%, -50%); } .faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } .faq__answer { padding: 0 10px 24px; animation: faqOpen 0.4s var(--ease); } .faq__answer p { font-family: var(--font-body); font-size: 0.95rem; line-height: 1.8; color: var(--text-muted); max-width: 680px; } .faq__answer a { color: var(--gold); border-bottom: 1px solid var(--gold-dark); transition: color var(--speed); } .faq__answer a:hover { color: var(--cream); } @keyframes faqOpen { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════ CONTACTO — Editorial with big map + card info ═══════════════════════════════════════════ */ .contacto { padding: var(--section-y) 0 0; background: radial-gradient(ellipse 50% 70% at 50% 0%, rgba(226, 216, 155, 0.06) 0%, transparent 50% ), linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 30%, var(--bg-surface) 60%, var(--bg-deep) 100% ); position: relative; } /* Thin gold line decoration at top of contacto */ .contacto::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 60px; background: linear-gradient(to bottom, transparent, var(--gold-dark)); opacity: 0.5; } .contacto .section-header { margin-bottom: 60px; } .contacto .section-header h2 { font-size: clamp(2.6rem, 5vw, 4rem); color: var(--gold); font-style: italic; } .contacto .section-header .line--center { width: 100%; max-width: 500px; height: 1px; opacity: 0.4; margin-top: 24px; } /* ── Main: map + info grid ── */ .contacto__main { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter); } .contacto__map { position: relative; min-height: 620px; overflow: hidden; border: 1px solid var(--border); } .contacto__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.82) contrast(1.08) saturate(1.05); transition: filter 0.6s ease, transform 8s ease; } .contacto__map:hover .contacto__video { filter: brightness(0.95) contrast(1.05) saturate(1.1); transform: scale(1.02); } .contacto__map-overlay { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at bottom right, rgba(0,0,0,0.55) 0%, transparent 55%), linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.4) 100%); z-index: 1; } .contacto__map-cta { position: absolute; bottom: 28px; right: 28px; z-index: 2; display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; background: rgba(17, 21, 24, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--gold-dark); color: var(--gold); font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none; transition: all 0.35s ease; } .contacto__map-cta:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(226, 216, 155, 0.22); } .contacto__map-cta svg:last-child { transition: transform 0.35s ease; } .contacto__map-cta:hover svg:last-child { transform: translateX(4px); } .contacto__info { display: flex; flex-direction: column; gap: 40px; padding-left: 50px; justify-content: space-between; } /* Text info block */ .contacto__text p { font-family: var(--font-body); font-size: 1rem; line-height: 1.8; color: var(--cream); margin-bottom: 18px; } .contacto__text strong { color: var(--gold); font-weight: 700; } .contacto__text a { color: var(--cream); transition: color var(--speed); } .contacto__text a:hover { color: var(--gold); } .contacto__closed { color: var(--gold); font-style: italic; font-size: 0.9rem; } /* ── Photo inside info column ── */ .contacto__photo-inline { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 10; border: 1px solid var(--border); } .contacto__photo-inline img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.9); transition: transform 0.8s ease, filter 0.6s ease; } .contacto__photo-inline:hover img { transform: scale(1.05); filter: brightness(1); } /* ── Reserva CTA strip ── */ .contacto__reserva { margin-top: 100px; padding: 100px 0; background: radial-gradient(ellipse 80% 100% at 50% 50%, rgba(174, 143, 91, 0.12) 0%, transparent 60% ), linear-gradient(180deg, var(--bg-deep) 0%, #0a0d10 100%); text-align: center; border-top: 1px solid var(--border); position: relative; } /* Subtle gold accent lines on reserva */ .contacto__reserva::before, .contacto__reserva::after { content: ''; position: absolute; top: 50%; width: 100px; height: 1px; background: linear-gradient(to right, transparent, var(--gold-dark), transparent); transform: translateY(-50%); } .contacto__reserva::before { left: 15%; } .contacto__reserva::after { right: 15%; } .contacto__reserva-inner { max-width: 600px; margin: 0 auto; } .contacto__reserva h3 { font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3.5rem); font-style: italic; color: var(--gold); margin: 12px 0 16px; } .contacto__reserva p { font-family: var(--font-body); font-size: 1rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 40px; } .contacto__reserva-btn { padding: 22px 60px; font-size: 0.85rem; } .contacto__reserva-phone { margin-top: 28px !important; font-size: 0.9rem !important; } .contacto__reserva-phone a { color: var(--gold); font-weight: 700; } .contacto__reserva-phone a:hover { color: var(--cream); } @media (max-width: 1024px) { .contacto__main { grid-template-columns: 1fr; } .contacto__map { min-height: 400px; } .contacto__info { padding-left: 0; margin-top: 40px; } } .contacto__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; margin-bottom: 80px; } .contacto__map { height: 420px; border: 1px solid var(--border); overflow: hidden; } .contacto__map iframe { width: 100%; height: 100%; filter: grayscale(0.3) brightness(0.85); } .contacto__info { display: flex; flex-direction: column; justify-content: center; gap: 28px; } .contacto__block h4 { font-family: var(--font-body); font-size: 0.65rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; } .contacto__block p { font-size: 0.95rem; color: var(--cream); line-height: 1.7; } .contacto__block a { color: var(--cream); transition: color var(--speed); } .contacto__block a:hover { color: var(--gold); } .contacto__closed { color: var(--gold) !important; font-style: italic; margin-top: 4px; } /* Reserva CTA */ .reserva { text-align: center; padding-top: 60px; border-top: 1px solid var(--border); } .reserva__title { font-family: var(--font-display); font-style: italic; color: var(--gold); margin-bottom: 16px; } .reserva__text { font-size: 1rem; color: var(--text-muted); max-width: 450px; margin: 0 auto 32px; line-height: 1.7; } .reserva__phone { margin-top: 20px; font-size: 0.85rem; color: var(--text-muted); } .reserva__phone a { color: var(--gold); transition: color var(--speed); } .reserva__phone a:hover { color: var(--cream); } /* ═══════════════════════════════════════════ FOOTER ═══════════════════════════════════════════ */ .footer { background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(174, 143, 91, 0.04) 0%, transparent 60% ), linear-gradient(180deg, #0a0d10 0%, #050708 100%); border-top: 1px solid rgba(174, 143, 91, 0.15); padding: 60px 0 28px; position: relative; } .footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60%; max-width: 700px; height: 1px; background: linear-gradient(to right, transparent, rgba(174, 143, 91, 0.5) 30%, rgba(174, 143, 91, 0.5) 70%, transparent ); } .footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 40px; } .footer__brand img { height: 44px; margin-bottom: 14px; opacity: 0.8; } .footer__brand p { font-size: 0.8rem; color: var(--text-muted); max-width: 260px; line-height: 1.6; } .footer__heading { font-family: var(--font-body); font-size: 0.6rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; } .footer__list li { margin-bottom: 8px; } .footer__list a { font-size: 0.8rem; color: var(--text-muted); transition: color var(--speed); } .footer__list a:hover { color: var(--gold); } /* Orari idratati da Aurea /info (footer, home, pannello Reservas) — vedi script.js. Ereditano tipografia e colore dal contenitore; solo accenti oro su nome-servizio e riga di chiusura, come il testo hardcoded che sostituiscono. */ /* STACKED: nome servizio come intestazione, poi OGNI fascia su una riga sua → sempre armonioso, niente separatori "·" che vanno a capo storti. */ .th-block { margin-bottom: 13px; } .th-block:last-child { margin-bottom: 0; } .th-svc { display: block; color: var(--gold); font-weight: 700; margin-bottom: 3px; } /* Righe orari: gruppo inline "Días: hours" (.th-line) o giorni/orari su 2 righe (.th-days/.th-hours) nel banner stretto, per non spezzare storto. */ .th-line, .th-days, .th-hours { display: block; line-height: 1.65; } /* Chiuso = oro corsivo nel footer/home; ROSSO sul banner reservas (come il live). */ .th-closed { display: block; color: var(--gold); font-style: italic; margin-top: 2px; } [data-templo-hours="rich-banner"] .th-closed { color: #c85a5a; opacity: 0.9; } .footer__social { display: flex; gap: 16px; margin-top: 20px; } .footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--text-muted); transition: color var(--speed); } .footer__social a svg { pointer-events: none; } .footer__social a:hover { color: var(--gold); } .footer__bottom { border-top: 1px solid var(--border); padding-top: 20px; text-align: center; } .footer__copy { font-size: 0.7rem; color: var(--text-muted); opacity: 0.6; } .footer__copy a { color: var(--gold); } /* ═══════════════════════════════════════════ SCROLL ANIMATIONS — varied directions ═══════════════════════════════════════════ */ .reveal { opacity: 0; transition: opacity 1s var(--ease), transform 1s var(--ease); } .reveal--up { transform: translateY(50px); } .reveal--down { transform: translateY(-30px); } .reveal--left { transform: translateX(60px); } .reveal--right { transform: translateX(-60px); } .reveal--scale { transform: scale(0.92); } .reveal--fade { transform: none; } .reveal--visible { opacity: 1; transform: translateY(0) translateX(0) scale(1); } .reveal--delay-1 { transition-delay: 0.1s; } .reveal--delay-2 { transition-delay: 0.2s; } .reveal--delay-3 { transition-delay: 0.3s; } .reveal--delay-4 { transition-delay: 0.4s; } /* Parallax on split images */ .split__image img { transition: transform 0.1s linear; } /* Menu items: staggered subtle entrance */ .menu__item.reveal { transform: translateY(20px); transition-duration: 0.5s; } /* Cocktail cards: staggered from different sides */ .cocteles__cat:nth-child(1).reveal { transform: translateX(-40px); } .cocteles__cat:nth-child(2).reveal { transform: translateY(40px); } .cocteles__cat:nth-child(3).reveal { transform: translateX(40px); } /* Cinematic: zoom in on reveal */ .cinematic__content.reveal { transform: scale(0.9); transition-duration: 1.2s; } /* ═══════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════ */ @media (max-width: 1024px) { .templo__grid { grid-template-columns: 1fr; gap: 50px; } .templo__text { padding-left: 0; max-width: none; } .templo__label-vertical { position: static; writing-mode: horizontal-tb; transform: none; display: inline-block; padding: 0; letter-spacing: 5px; margin-bottom: 18px; } .templo__label-vertical::before, .templo__label-vertical::after { display: none; } .templo__photo img { min-height: 400px; } .espacios__split { grid-template-columns: 1fr; height: auto; } .espacios__side { height: 50vh; min-height: 350px; } .espacios__title { font-size: 1.5rem; padding: 16px 32px; } .nav__links { gap: 28px; } .split { grid-template-columns: 1fr; min-height: auto; } .split--reverse { direction: ltr; } .split__image { min-height: 400px; position: relative; } .split__image img { position: absolute; } .proof__grid { grid-template-columns: 1fr; } .proof__guru-row { flex-direction: column; text-align: center; } .menu { grid-template-columns: 1fr; } .menu-extra { grid-template-columns: 1fr; gap: 40px; } .contacto__grid { grid-template-columns: 1fr; } .contacto__map { height: 300px; } .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { /* Topbar — hidden on mobile */ .nav-topbar { display: none; } /* Navbar */ .nav { padding: 4px 0 6px; top: 0; } .nav__inner { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; gap: 16px; } .nav__links, .nav__right { display: none; } .nav__burger { display: flex; position: static; } .nav__logo { margin-right: 0; } .nav__logo img { height: 54px; width: auto; max-width: 210px; object-fit: contain; } .nav--scrolled .nav__logo img { height: 44px; } /* Hero — mobile: hide desktop scenes, show dedicated mobile block */ .hero { min-height: 100svh; } /* Hide desktop scene system entirely on mobile */ .hero__scenes, .hero__transition, .hero__scanlines, .hero__cinema-bars { display: none !important; } /* Mobile hero block */ .hero__mobile { display: block; position: absolute; inset: 0; overflow: hidden; z-index: 1; } .hero__mobile-stage { position: absolute; inset: 0; } .hero__m-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0; transition: opacity 0.85s cubic-bezier(.4, 0, .2, 1); pointer-events: none; will-change: opacity, transform, filter; transform-origin: center center; } .hero__m-slide--active { opacity: 1; z-index: 2; } /* ─── EFFECT PROFILES ─── */ /* Rapid montage: smooth crossfade + subtle motion for breath */ .hero__m-slide.fx-rapid { transition: opacity 0.75s cubic-bezier(.4, 0, .2, 1) !important; } .hero__m-slide--active.fx-rapid { animation: hmFxRapid 3.6s ease-out forwards; } @keyframes hmFxRapid { 0% { transform: scale(1.04); } 100% { transform: scale(1.00); } } /* Medium cinematic: subtle scale-in for breathing room */ .hero__m-slide--active.fx-medium { animation: hmFxMedium 5s ease-out forwards; } @keyframes hmFxMedium { 0% { transform: scale(1.025); } 100% { transform: scale(1.000); } } /* Blur reveal: cinematic focus pull (clip 8) */ .hero__m-slide--active.fx-blur-reveal { animation: hmFxBlurReveal 0.85s ease-out forwards, hmFxMedium 5s ease-out 0.85s forwards; } @keyframes hmFxBlurReveal { 0% { filter: blur(10px); transform: scale(1.06); } 100% { filter: blur(0); transform: scale(1.00); } } /* Epic finale: dramatic entry + slow scale (clip 9) */ .hero__m-slide--active.fx-epic { animation: hmFxEpic 7s ease-out forwards; } @keyframes hmFxEpic { 0% { transform: scale(1.12); opacity: 0; } 12% { opacity: 1; } 100% { transform: scale(1.00); opacity: 1; } } /* Ken Burns ZOOM IN — default */ .hero__m-slide--active.fx-kb-zoom { animation: hmFxKbZoom 4.5s ease-out forwards; } @keyframes hmFxKbZoom { 0% { transform: scale(1.00) translateY(0); } 100% { transform: scale(1.16) translateY(-2.5%); } } /* Cocktail viola: cover (riempie altezza, taglio laterale 6%). Pan orizzontale molto leggero, praticamente senza zoom percepibile → movimento naturale come le altre foto di notte, senza "avvicinarsi". */ .hero__m-slide[src*="cocktail-viola"] { object-fit: cover; object-position: center center; } .hero__m-slide--active[src*="cocktail-viola"].fx-kb-zoom { animation: hmFxKbViolaPan 5.5s ease-out forwards !important; } @keyframes hmFxKbViolaPan { 0% { transform: scale(1.03) translateX(1.5%); } 100% { transform: scale(1.03) translateX(-1.5%); } } /* Ken Burns PAN HORIZONTAL — for barman */ .hero__m-slide--active.fx-kb-pan-h { animation: hmFxKbPanH 4s linear forwards; } @keyframes hmFxKbPanH { 0% { transform: scale(1.10) translateX(2.5%); } 100% { transform: scale(1.10) translateX(-2.5%); } } /* Ken Burns PAN VERTICAL — for bar campari */ .hero__m-slide--active.fx-kb-pan-v { animation: hmFxKbPanV 4s ease-out forwards; } @keyframes hmFxKbPanV { 0% { transform: scale(1.12) translateY(-3.5%); } 100% { transform: scale(1.12) translateY(0%); } } /* Day → Night fade overlay (slow, marked) */ .hero__mobile-fade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, #0a0d0f 0%, #000 100%); opacity: 0; pointer-events: none; z-index: 8; transition: opacity 0.7s ease-in-out; } .hero__mobile-fade.active { opacity: 1; } /* Flash overlay (cool blue micro-flash for rapid montage) */ .hero__mobile-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 9; mix-blend-mode: overlay; } .hero__mobile-flash.flashing { animation: hmFlashWhite 0.45s ease-out; } .hero__mobile-flash.flashing-cool { animation: hmFlashCool 0.22s ease-out; } @keyframes hmFlashWhite { 0% { opacity: 0; background: #fff; } 30% { opacity: 0.4; } 100% { opacity: 0; } } @keyframes hmFlashCool { 0% { opacity: 0; background: #cfe6ff; } 40% { opacity: 0.32; } 100% { opacity: 0; background: #cfe6ff; } } /* ━━━━━━━━━━━━ CINEMATIC TRANSITION LAYER ━━━━━━━━━━━━ */ .hero__mobile-tr { position: absolute; inset: 0; pointer-events: none; z-index: 9; opacity: 0; } /* WARM LIGHT LEAK — golden flare sweeps left → right */ .hero__mobile-tr.tr-warm-leak { background: linear-gradient( 105deg, transparent 0%, transparent 28%, rgba(255, 180, 90, 0.45) 42%, rgba(255, 230, 175, 0.85) 50%, rgba(255, 180, 90, 0.45) 58%, transparent 72%, transparent 100% ); background-size: 250% 100%; background-position: -100% 0; mix-blend-mode: screen; filter: blur(2px); animation: trWarmLeak 950ms cubic-bezier(.4, 0, .2, 1) forwards; } @keyframes trWarmLeak { 0% { opacity: 0; background-position: -100% 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; background-position: 200% 0; } } /* IRIS — circular dark close to swap, then re-open */ .hero__mobile-tr.tr-iris { background: radial-gradient(circle at center, #000 0%, #000 100%); -webkit-clip-path: circle(150% at 50% 50%); clip-path: circle(150% at 50% 50%); opacity: 1; animation: trIris 1100ms cubic-bezier(.6, 0, .4, 1) forwards; } @keyframes trIris { 0% { -webkit-clip-path: circle(150% at 50% 50%); clip-path: circle(150% at 50% 50%); } 45% { -webkit-clip-path: circle(0% at 50% 50%); clip-path: circle(0% at 50% 50%); } 55% { -webkit-clip-path: circle(0% at 50% 50%); clip-path: circle(0% at 50% 50%); } 100% { -webkit-clip-path: circle(150% at 50% 50%); clip-path: circle(150% at 50% 50%); } } /* SOFT — subtle warm glow pulse during cross-dissolve */ .hero__mobile-tr.tr-soft { background: radial-gradient(ellipse at center, rgba(255, 200, 120, 0.2) 0%, transparent 70%); mix-blend-mode: screen; animation: trSoft 600ms ease-in-out forwards; } @keyframes trSoft { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } /* Hero content — centered, smaller */ .hero__content { padding: 0 24px; bottom: 125px; } .hero__content::before { width: 92vw; height: 180px; } .hero__title { font-size: clamp(1.95rem, 8.5vw, 2.9rem); letter-spacing: 0.015em; margin: 0 auto 16px; } .hero__sub { font-size: 0.66rem; letter-spacing: 2px; line-height: 1.4; margin: 0 auto; padding: 0 12px; white-space: nowrap; } /* Buttons — side by side compact row */ .hero__bottom-left { display: none; } .hero__btn-left, .hero__btn-right { position: absolute; bottom: 50px; transform: none; width: calc(50% - 32px); max-width: 160px; text-align: center; padding: 15px 12px !important; font-size: 0.72rem !important; letter-spacing: 2px !important; } .hero__btn-left { left: 20px; right: auto; } .hero__btn-right { right: 20px; left: auto; } .statement__text { font-size: 1.3rem; } .cocteles__grid { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; gap: 28px; } .footer__bottom { text-align: center; } } /* ═══════════════════════════════════════════ RESERVAS — custom booking page ═══════════════════════════════════════════ */ .reservas { background: var(--bg-deep); min-height: 100vh; padding-bottom: 100px; } /* Hero */ .reservas__hero { position: relative; min-height: 52vh; padding: 180px 0 100px; display: flex; align-items: center; overflow: hidden; } .reservas__hero-bg { position: absolute; inset: 0; z-index: 0; } .reservas__hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5) saturate(0.9); } .reservas__hero-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at bottom, rgba(17,21,24,0.85) 0%, rgba(17,21,24,0.5) 60%, transparent 100%), linear-gradient(180deg, rgba(17,21,24,0.5) 0%, rgba(17,21,24,0.75) 100%); } .reservas__hero-content { position: relative; z-index: 1; max-width: 760px; text-align: center; margin: 0 auto; } .reservas__kicker { display: block; font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; } .reservas__title { font-family: var(--font-display); font-size: clamp(2.8rem, 6vw, 5rem); font-style: italic; color: var(--gold); line-height: 1.05; margin: 0 0 24px; text-shadow: 0 6px 40px rgba(0, 0, 0, 0.6); } .reservas__lead { font-family: var(--font-body); font-size: 1.1rem; color: var(--cream); line-height: 1.8; max-width: 620px; margin: 0 auto; opacity: 0.92; } /* Layout: form card + side info panel */ .reservas__layout { max-width: 1280px; margin: -80px auto 0; position: relative; z-index: 2; display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; align-items: start; } /* Card container */ .reservas__card { padding: 60px 60px 70px; background: radial-gradient(ellipse at top left, rgba(226, 216, 155, 0.06) 0%, transparent 60%), linear-gradient(180deg, #1a1f22 0%, #13171a 100%); border: 1px solid var(--border); border-top: 3px solid var(--gold-dark); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55); } /* Side info panel */ .reservas__side { display: flex; flex-direction: column; gap: 0; background: linear-gradient(180deg, rgba(226, 216, 155, 0.04) 0%, transparent 100%), #13171a; border: 1px solid var(--border); border-top: 3px solid var(--gold-dark); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45); padding: 40px 36px; position: sticky; top: 120px; } .reservas__side-block { padding: 24px 0; border-bottom: 1px solid rgba(226, 216, 155, 0.1); } .reservas__side-block:first-child { padding-top: 0; } .reservas__side-block:last-child { padding-bottom: 0; border-bottom: none; } .reservas__side-label { display: block; font-family: var(--font-body); font-size: 0.66rem; font-weight: 700; letter-spacing: 3.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; } .reservas__side-phone { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 1.4rem; font-style: italic; color: var(--cream); text-decoration: none; transition: color var(--speed) var(--ease); letter-spacing: 0.5px; } .reservas__side-phone svg { color: var(--gold); flex: 0 0 auto; } .reservas__side-phone:hover { color: var(--gold); } .reservas__side-note { font-family: var(--font-body); font-size: 0.82rem; color: var(--cream); opacity: 0.7; margin: 10px 0 0; line-height: 1.6; } .reservas__side-text { font-family: var(--font-body); font-size: 0.9rem; line-height: 1.7; color: var(--cream); opacity: 0.85; margin: 0 0 14px; } .reservas__side-text:last-child { margin-bottom: 0; } .reservas__side-text strong { color: var(--gold); font-weight: 700; font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase; display: inline-block; margin-bottom: 4px; } .reservas__side-closed { font-family: var(--font-body); font-style: italic; font-size: 0.82rem; color: #c85a5a; opacity: 0.9; margin: 10px 0 0; } .reservas__side-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); text-decoration: none; transition: gap var(--speed) var(--ease); } .reservas__side-link:hover { gap: 14px; } /* Qué esperar — reassurance row */ .reservas__expect { max-width: 1280px; margin: 60px auto 0; } .reservas__expect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .reservas__expect-item { text-align: center; padding: 32px 24px; background: rgba(226, 216, 155, 0.03); border: 1px solid rgba(226, 216, 155, 0.12); transition: all var(--speed) var(--ease); } .reservas__expect-item:hover { border-color: rgba(226, 216, 155, 0.28); background: rgba(226, 216, 155, 0.05); } .reservas__expect-item svg { width: 40px; height: 40px; color: var(--gold); margin-bottom: 18px; opacity: 0.9; } .reservas__expect-item h3 { font-family: var(--font-display); font-size: 1.3rem; font-style: italic; color: var(--gold); margin: 0 0 12px; } .reservas__expect-item p { font-family: var(--font-body); font-size: 0.88rem; line-height: 1.7; color: var(--cream); opacity: 0.82; margin: 0; } .reservas__label { display: block; font-family: var(--font-body); font-size: 0.66rem; font-weight: 700; letter-spacing: 3.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .reservas__optional { font-weight: 400; letter-spacing: 1.5px; color: var(--text-muted); text-transform: none; } .reservas__row { display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; margin-bottom: 50px; } .reservas__row--2 { grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; } .reservas__field { position: relative; } /* Datepicker custom skin */ .reservas__datepicker { background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border); padding: 20px; } .reservas__datepicker .ui-datepicker { width: 100% !important; background: transparent; border: none; padding: 0; font-family: var(--font-body); } .reservas__datepicker .ui-datepicker-header { background: transparent; border: none; padding: 6px 0 16px; position: relative; } .reservas__datepicker .ui-datepicker-title { font-family: var(--font-display); font-size: 1.2rem; font-style: italic; color: var(--gold); text-align: center; } .reservas__datepicker .ui-datepicker-prev, .reservas__datepicker .ui-datepicker-next { top: 6px !important; width: 28px; height: 28px; border: 1px solid var(--border); background: transparent; cursor: pointer; color: var(--gold); } .reservas__datepicker .ui-datepicker-prev { left: 0 !important; } .reservas__datepicker .ui-datepicker-next { right: 0 !important; } .reservas__datepicker .ui-datepicker-prev:hover, .reservas__datepicker .ui-datepicker-next:hover { background: var(--gold-dark); border-color: var(--gold-dark); } .reservas__datepicker .ui-datepicker-prev span, .reservas__datepicker .ui-datepicker-next span { display: none; } .reservas__datepicker .ui-datepicker-prev::after { content: "‹"; font-size: 1.3rem; line-height: 1; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: inherit; } .reservas__datepicker .ui-datepicker-next::after { content: "›"; font-size: 1.3rem; line-height: 1; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: inherit; } .reservas__datepicker .ui-datepicker-calendar { width: 100%; border-collapse: collapse; margin: 0; background: transparent; } .reservas__datepicker .ui-datepicker-calendar th { font-family: var(--font-body); font-size: 0.62rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); padding: 10px 0; border: none; } .reservas__datepicker .ui-datepicker-calendar td { padding: 3px; border: none; text-align: center; } .reservas__datepicker .ui-datepicker-calendar td a, .reservas__datepicker .ui-datepicker-calendar td span { display: block; padding: 10px 0; font-family: var(--font-body); font-size: 0.88rem; color: var(--cream); border: 1px solid transparent; background: transparent; text-align: center; text-decoration: none; transition: all 0.25s ease; } .reservas__datepicker .ui-datepicker-calendar td a:hover { background: var(--gold-dark); color: var(--bg); border-color: var(--gold-dark); } .reservas__datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a, .reservas__datepicker .ui-datepicker-calendar td a.ui-state-active { background: var(--gold); color: var(--bg); border-color: var(--gold); font-weight: 700; } .reservas__datepicker .ui-datepicker-calendar td.ui-datepicker-today a { border-color: var(--gold-dark); } .reservas__datepicker .ui-datepicker-calendar td.reservas__day--closed span { color: var(--text-muted); opacity: 0.3; text-decoration: line-through; } .reservas__datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable span, .reservas__datepicker .ui-datepicker-calendar td.ui-state-disabled span { color: var(--text-muted); opacity: 0.25; } /* ── Ferie / chiusure straordinarie (ferie · evento · festivo · otro) ── Giorno "sbarrato" a tratteggio oro + badge tipo. Il badge e' in OVERLAY assoluto (::after sul td) così NON allarga le celle della tabella-calendario: senza questo, "CERRADO" allargava le 7 colonne → il calendario cresceva e la colonna "Personas" (grid 1fr accanto) collassava in verticale. Gemello del design Cafe54, ri-skinnato dark/oro Templo; il motivo esteso vive nel tooltip. Regole DOPO .ui-state-disabled per vincere sul colore/opacita' spenti. */ .reservas__datepicker .ui-datepicker-calendar td.reservas__day--ferie { position: relative; } .reservas__datepicker .ui-datepicker-calendar td.reservas__day--ferie span { padding: 7px 0 13px; line-height: 1; color: var(--gold); opacity: 0.9; text-decoration: none; cursor: not-allowed; border-color: rgba(174, 143, 91, 0.4); background-image: repeating-linear-gradient(-45deg, rgba(226, 216, 155, 0.22) 0, rgba(226, 216, 155, 0.22) 1.5px, transparent 1.5px, transparent 7px); } .reservas__datepicker .ui-datepicker-calendar td.reservas__day--ferie::after { content: "Cerrado"; position: absolute; left: -2px; right: -2px; bottom: 3px; text-align: center; font-family: var(--font-body); font-size: 0.38rem; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; line-height: 1; color: var(--gold-dark); pointer-events: none; } .reservas__datepicker .ui-datepicker-calendar td.reservas__day--ferie--evento::after { content: "Evento"; } .reservas__datepicker .ui-datepicker-calendar td.reservas__day--ferie--festivita::after { content: "Festivo"; } /* EN (container .is-en → vince per specificita' sulle regole ES) */ .reservas__datepicker.is-en .ui-datepicker-calendar td.reservas__day--ferie--ferie::after { content: "Closed"; } .reservas__datepicker.is-en .ui-datepicker-calendar td.reservas__day--ferie--altro::after { content: "Closed"; } .reservas__datepicker.is-en .ui-datepicker-calendar td.reservas__day--ferie--evento::after { content: "Event"; } .reservas__datepicker.is-en .ui-datepicker-calendar td.reservas__day--ferie--festivita::after { content: "Holiday"; } /* ═══════════════════════════════════════════════════════════════════ WIZARD RESERVA (rw-) — flusso a step: Fecha → Personas → Hora → Datos. Card centrata che sostituisce calendario+personas+sidebar staccati. Riusa i token del tema (--gold, --font-display…) → match esatto col sito. ═══════════════════════════════════════════════════════════════════ */ .rw-wrap{ max-width:640px; margin:-80px auto 0; position:relative; z-index:2; } /* Dentro del layout de dos columnas (form + panel lateral) el wizard llena su columna; el desplazamiento sobre el hero lo aporta .reservas__layout. */ .reservas__layout .rw-wrap{ max-width:none; margin:0; } .rw{ position:relative; background: radial-gradient(ellipse at top left, rgba(226,216,155,.06) 0%, transparent 58%), linear-gradient(180deg,#1a1f22 0%, #13171a 100%); border:1px solid var(--border); border-top:3px solid var(--gold-dark); box-shadow:0 40px 120px rgba(0,0,0,.55); padding:40px 46px 36px; } .rw__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:26px; } .rw__kicker{ font-size:10.5px; letter-spacing:3px; text-transform:uppercase; color:var(--gold-dark); font-weight:700; } .rw__title{ font-family:var(--font-display); font-style:italic; color:var(--gold); font-size:1.72rem; line-height:1.05; margin-top:7px; } .rw__back{ background:none; border:none; color:var(--text-muted); font-family:var(--font-body); font-size:.8rem; letter-spacing:.5px; cursor:pointer; padding:8px 2px; display:inline-flex; align-items:center; gap:7px; transition:color var(--speed) var(--ease); white-space:nowrap; } .rw__back:hover{ color:var(--gold); } .rw__back[hidden]{ display:none; } .rw__back svg{ width:14px; height:14px; } /* Meridiana d'avanzamento */ .rw__mrd{ display:flex; align-items:center; margin:0 0 30px; padding:0 4px; } .rw-node{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:0 0 auto; } .rw-node__dot{ width:26px; height:26px; border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.72rem; color:rgba(237,233,210,.35); background:var(--bg-deep); transition:all var(--speed) var(--ease); } .rw-node__lbl{ font-size:9px; letter-spacing:1.6px; text-transform:uppercase; color:rgba(237,233,210,.35); transition:color var(--speed) var(--ease); } .rw-line{ flex:1 1 auto; height:1px; background:rgba(174,143,91,.14); margin:0 6px; position:relative; top:-9px; transition:background var(--speed) var(--ease); } .rw-line.is-done{ background:var(--gold-dark); } .rw-node.is-current .rw-node__dot{ border-color:var(--gold); color:var(--gold); box-shadow:0 0 0 4px rgba(226,216,155,.08); } .rw-node.is-current .rw-node__lbl{ color:var(--gold); } .rw-node.is-done .rw-node__dot{ background:var(--gold); border-color:var(--gold); color:#15110c; } .rw-node.is-done .rw-node__lbl{ color:var(--text-muted); } .rw-node.is-done{ cursor:pointer; } /* Pannelli step */ .rw__panels{ position:relative; min-height:344px; } .rw-step{ display:none; } .rw-step.is-active{ display:block; animation:rwIn var(--speed) var(--ease) both; } .rw-step.is-active.back{ animation-name:rwInBack; } @keyframes rwIn{ from{opacity:0; transform:translateX(22px)} to{opacity:1; transform:translateX(0)} } @keyframes rwInBack{ from{opacity:0; transform:translateX(-22px)} to{opacity:1; transform:translateX(0)} } /* Calendario */ .rw-cal__bar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .rw-cal__month{ font-family:var(--font-display); font-style:italic; color:var(--gold); font-size:1.2rem; } .rw-cal__nav{ width:34px; height:34px; border:1px solid var(--border); background:none; color:var(--gold); cursor:pointer; font-size:1.1rem; line-height:1; transition:all var(--speed) var(--ease); } .rw-cal__nav:hover:not(:disabled){ background:var(--gold-dark); border-color:var(--gold-dark); color:#15110c; } .rw-cal__nav:disabled{ opacity:.28; cursor:not-allowed; } .rw-cal__grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; } .rw-cal__wd{ text-align:center; font-size:.6rem; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--text-muted); padding:8px 0 6px; } .rw-day{ position:relative; aspect-ratio:1/1; border:1px solid transparent; background:none; color:var(--cream); font-family:var(--font-body); font-size:.95rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s var(--ease); } .rw-day:hover:not(.is-off):not(.is-ferie):not(.is-blocked):not(.is-empty){ background:var(--gold-dark); border-color:var(--gold-dark); color:#15110c; } .rw-day.is-empty{ cursor:default; } .rw-day.is-today{ border-color:var(--gold-dark); } .rw-day.is-selected{ background:var(--gold); border-color:var(--gold); color:#15110c; font-weight:700; } .rw-day.is-off{ color:rgba(237,233,210,.28); cursor:not-allowed; text-decoration:line-through; text-decoration-color:rgba(237,233,210,.22); } .rw-day.is-ferie{ position:relative; cursor:not-allowed; color:var(--gold); border-color:rgba(174,143,91,.4); background-image:repeating-linear-gradient(-45deg, rgba(226,216,155,.22) 0, rgba(226,216,155,.22) 1.5px, transparent 1.5px, transparent 7px); } .rw-day.is-ferie .rw-d{ line-height:1; } .rw-day.is-ferie .rw-tag{ position:absolute; left:0; right:0; bottom:4px; text-align:center; font-size:.44rem; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:var(--gold-dark); line-height:1; pointer-events:none; overflow:hidden; } /* Reservas online SUSPENDIDAS ese día (local abierto): gris neutro, distinto del oro de vacaciones. */ .rw-day.is-blocked{ position:relative; cursor:not-allowed; color:rgba(237,233,210,.5); border-color:rgba(237,233,210,.18); background-image:repeating-linear-gradient(-45deg, rgba(237,233,210,.10) 0, rgba(237,233,210,.10) 1.5px, transparent 1.5px, transparent 7px); } .rw-day.is-blocked .rw-d{ line-height:1; transform:translateY(-3px); } .rw-day.is-blocked .rw-tag{ position:absolute; left:1px; right:1px; bottom:2px; text-align:center; font-size:.36rem; font-weight:700; letter-spacing:.1px; text-transform:uppercase; color:rgba(237,233,210,.6); line-height:1.02; pointer-events:none; } .rw-cal__hint{ margin-top:16px; text-align:center; font-family:var(--font-display); font-style:italic; color:var(--text-muted); font-size:1.02rem; } /* Personas */ .rw-ppl{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; } .rw-ppl__btn{ aspect-ratio:1/1; border:1px solid var(--border); background:none; color:var(--cream); font-family:var(--font-body); font-size:1.15rem; font-weight:600; cursor:pointer; transition:all .25s var(--ease); } .rw-ppl__btn:hover{ border-color:var(--gold-dark); color:var(--gold); } .rw-ppl__btn.is-selected{ background:var(--gold); border-color:var(--gold); color:#15110c; } /* 6+ = grupo por teléfono: seleccionado se marca en contorno (no relleno) para distinguirlo de un tamaño reservable online. */ .rw-ppl__btn.is-group.is-selected{ background:transparent; border-color:var(--gold); color:var(--gold); } /* Aviso "6 o más" que bloquea el avance */ .rw-group{ margin-top:24px; display:flex; gap:14px; align-items:flex-start; padding:18px 20px; border:1px solid rgba(174,143,91,.32); background:rgba(226,216,155,.05); } .rw-group[hidden]{ display:none; } .rw-group>svg{ width:22px; height:22px; color:var(--gold); flex:0 0 auto; margin-top:3px; } .rw-group__body strong{ display:block; font-family:var(--font-display); font-style:italic; color:var(--gold); font-size:1.12rem; margin-bottom:5px; } .rw-group__body p{ color:var(--text-muted); font-size:.86rem; line-height:1.5; margin:0 0 9px; } .rw-group__call{ color:var(--gold); font-size:.9rem; text-decoration:none; border-bottom:1px solid var(--gold-dark); } .rw-group__call:hover{ border-color:var(--gold); } /* Slots */ .rw-slot__lead{ color:var(--text-muted); font-size:.85rem; margin:-6px 0 18px; letter-spacing:.3px; } .rw-slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:10px; } .rw-slot{ padding:14px 6px; border:1px solid var(--border); background:none; color:var(--cream); font-family:var(--font-body); font-size:.95rem; cursor:pointer; text-align:center; transition:all .25s var(--ease); } .rw-slot:hover:not(:disabled){ border-color:var(--gold-dark); color:var(--gold); } .rw-slot.is-selected{ background:var(--gold); border-color:var(--gold); color:#15110c; font-weight:700; } .rw-slot:disabled{ opacity:.28; cursor:not-allowed; text-decoration:line-through; } .rw-slots__msg{ color:var(--text-muted); font-family:var(--font-display); font-style:italic; font-size:1.02rem; text-align:center; padding:14px 0; } /* Datos form */ .rw-form{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .rw-field{ display:flex; flex-direction:column; gap:7px; } .rw-field.full{ grid-column:1/-1; } .rw-field label{ font-size:9.5px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-dark); font-weight:700; } .rw-field input,.rw-field textarea{ background:rgba(0,0,0,.28); border:1px solid var(--border); color:var(--cream); font-family:var(--font-body); font-size:.95rem; padding:12px 14px; transition:border-color .25s var(--ease); } .rw-field input:focus,.rw-field textarea:focus{ outline:none; border-color:var(--gold); } .rw-field textarea{ resize:vertical; min-height:66px; } /* Riepilogo */ .rw-summary{ display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; margin:22px 0 4px; padding-top:20px; border-top:1px solid rgba(174,143,91,.12); color:var(--cream); font-size:.9rem; } .rw-summary .rw-s{ display:inline-flex; align-items:center; gap:8px; } .rw-summary .rw-s b{ color:var(--gold); font-weight:400; font-family:var(--font-display); font-style:italic; font-size:1.05rem; } .rw-summary svg{ width:15px; height:15px; color:var(--gold-dark); } /* Footer / CTA */ .rw__foot{ margin-top:28px; display:flex; justify-content:center; } .rw-cta{ background:var(--gold); color:#15110c; border:1px solid var(--gold); font-family:var(--font-body); font-weight:700; font-size:.8rem; letter-spacing:2px; text-transform:uppercase; padding:15px 40px; cursor:pointer; transition:all .28s var(--ease); } .rw-cta:hover{ background:var(--gold-dark); border-color:var(--gold-dark); } .rw-cta[disabled]{ opacity:.5; cursor:progress; } .rw-err{ color:#e88; font-size:.85rem; text-align:center; margin-top:14px; } .rw-err[hidden]{ display:none; } /* Confirmación */ .rw-done{ text-align:center; padding:12px 0 6px; } .rw-seal{ width:88px; height:88px; border-radius:50%; margin:6px auto 24px; position:relative; border:1px solid var(--gold-dark); background:radial-gradient(circle at 50% 38%, rgba(226,216,155,.16), transparent 62%); display:flex; align-items:center; justify-content:center; animation:rwSeal .6s var(--ease) both; } .rw-seal::before{ content:""; position:absolute; inset:7px; border:1px solid var(--border); border-radius:50%; } .rw-seal svg{ width:34px; height:34px; color:var(--gold); } @keyframes rwSeal{ from{opacity:0; transform:scale(.8)} to{opacity:1; transform:scale(1)} } .rw-done h2{ font-family:var(--font-display); font-style:italic; color:var(--gold); font-size:2rem; margin:0 0 10px; } .rw-done p{ color:var(--text-muted); font-size:.95rem; line-height:1.6; margin:0 auto 26px; max-width:390px; } .rw-done__card{ border:1px solid var(--border); padding:22px 26px; text-align:left; max-width:400px; margin:0 auto; display:grid; grid-template-columns:auto 1fr; gap:12px 20px; background:rgba(0,0,0,.2); } .rw-done__card dt{ font-size:9.5px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-dark); font-weight:700; align-self:center; } .rw-done__card dd{ margin:0; color:var(--cream); font-size:1rem; } .rw-done__card dd.code{ font-family:var(--font-display); font-style:italic; color:var(--gold); letter-spacing:1px; } .rw-callhint{ margin-top:26px; text-align:center; color:rgba(237,233,210,.3); font-size:.82rem; } .rw-callhint a{ color:var(--text-muted); text-decoration:none; border-bottom:1px solid var(--border); } @media (max-width:640px){ .rw-wrap{ margin-top:-50px; } .rw{ padding:30px 20px 26px; } .rw__title{ font-size:1.5rem; } .rw__mrd{ margin-bottom:24px; } .rw-node__lbl{ display:none; } .rw__panels{ min-height:322px; } .rw-form{ grid-template-columns:1fr; } .rw-ppl{ gap:9px; } .rw-cta{ width:100%; text-align:center; padding:16px; } .rw__foot{ justify-content:stretch; } } .reservas__selected-date { margin-top: 18px; font-family: var(--font-display); font-size: 1.15rem; font-style: italic; color: var(--gold); text-align: center; } /* Guest selector */ .reservas__guests { display: flex; flex-wrap: wrap; gap: 10px; } .reservas__guest-btn { min-width: 52px; height: 52px; padding: 0 14px; background: transparent; border: 1px solid var(--border); color: var(--cream); font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .reservas__guest-btn:hover { border-color: var(--gold-dark); color: var(--gold); } .reservas__guest-btn.is-active { background: var(--gold); border-color: var(--gold); color: var(--bg); } .reservas__guest-btn--more { padding: 0 18px; font-size: 0.85rem; letter-spacing: 1px; } .reservas__large-group { margin-top: 18px; padding: 16px 20px; background: rgba(226, 216, 155, 0.06); border-left: 3px solid var(--gold); font-family: var(--font-body); font-size: 0.9rem; color: var(--cream); line-height: 1.6; } /* Slots */ .reservas__field--slots { margin-bottom: 44px; } .reservas__slots-groups { background: rgba(0, 0, 0, 0.22); border: 1px solid var(--border); padding: 28px 24px; } .reservas__slots-placeholder { font-family: var(--font-body); font-size: 0.95rem; color: var(--text-muted); text-align: center; font-style: italic; padding: 14px 0; margin: 0; } .reservas__slots-warning { color: #d97c5a; font-style: normal; font-weight: 700; background: rgba(217, 124, 90, 0.08); border: 1px solid rgba(217, 124, 90, 0.28); padding: 12px 16px; margin-top: 14px; } .reservas__slots-group { margin-bottom: 24px; } .reservas__slots-group:last-child { margin-bottom: 0; } .reservas__slots-group-label { display: block; font-family: var(--font-body); font-size: 0.6rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 14px; } .reservas__slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; } .reservas__slot-btn { padding: 14px 10px; background: transparent; border: 1px solid var(--border); color: var(--cream); font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; letter-spacing: 1px; cursor: pointer; transition: all 0.3s ease; } .reservas__slot-btn:hover:not(.is-disabled) { border-color: var(--gold); color: var(--gold); transform: translateY(-1px); } .reservas__slot-btn.is-active { background: var(--gold); border-color: var(--gold); color: var(--bg); } .reservas__slot-btn.is-disabled { opacity: 0.3; cursor: not-allowed; text-decoration: line-through; } /* Customer form inputs */ .reservas__customer input[type="text"], .reservas__customer input[type="email"], .reservas__customer input[type="tel"], .reservas__customer textarea { width: 100%; padding: 16px 18px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border); color: var(--cream); font-family: var(--font-body); font-size: 1rem; transition: border-color 0.3s ease, background 0.3s ease; border-radius: 0; } .reservas__customer input:focus, .reservas__customer textarea:focus { outline: none; border-color: var(--gold); background: rgba(0, 0, 0, 0.35); } .reservas__customer textarea { resize: vertical; min-height: 80px; } .reservas__submit-row { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .reservas__submit { min-width: 260px; justify-content: center; } .reservas__submit.is-loading { opacity: 0.6; cursor: wait; } .reservas__legal { font-family: var(--font-body); font-size: 0.78rem; color: var(--text-muted); margin: 0; max-width: 420px; line-height: 1.5; } /* Nota "mantenemos tu mesa 20 min" nello step Confirmación del wizard */ .rw-hold { font-family: var(--font-body); font-size: 0.82rem; font-style: italic; color: var(--text-muted); margin: 16px auto 0; max-width: 42ch; line-height: 1.5; } .reservas__error { margin-top: 18px; padding: 14px 18px; background: rgba(229, 57, 53, 0.12); border-left: 3px solid #e53935; color: #ffbaba; font-family: var(--font-body); font-size: 0.9rem; } /* Success */ .reservas__success { text-align: center; padding: 40px 20px; } .reservas__success-icon { color: var(--gold); margin-bottom: 20px; } .reservas__success h2 { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.2rem); font-style: italic; color: var(--gold); margin: 0 0 16px; } .reservas__success-lead { font-family: var(--font-display); font-size: 1.3rem; font-style: italic; color: var(--cream); margin: 0 0 12px; } .reservas__success-detail { font-family: var(--font-body); font-size: 1rem; color: var(--text-muted); line-height: 1.8; max-width: 540px; margin: 0 auto 32px; } .reservas__success-detail strong { color: var(--gold); letter-spacing: 1px; } .reservas__success-back { display: inline-block; padding: 14px 36px; border: 1px solid var(--gold-dark); color: var(--gold); font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none; transition: all 0.35s ease; } .reservas__success-back:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); } /* Responsive */ @media (max-width: 900px) { .reservas__hero { padding: 140px 0 80px; min-height: auto; } .reservas__layout { grid-template-columns: 1fr; margin-top: -50px; gap: 24px; } .reservas__side { position: static; padding: 32px 26px; } .reservas__card { padding: 40px 24px 50px; } .reservas__expect { margin-top: 50px; } .reservas__expect-grid { grid-template-columns: 1fr; gap: 20px; } .reservas__expect-item { padding: 28px 22px; } .reservas__row { grid-template-columns: 1fr; gap: 36px; margin-bottom: 36px; } .reservas__row--2 { grid-template-columns: 1fr; gap: 20px; } .reservas__lead { font-size: 1rem; } .reservas__guests { justify-content: center; } .reservas__guest-btn { min-width: 48px; height: 48px; } .reservas__slots { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; } .reservas__slot-btn { padding: 12px 8px; font-size: 0.85rem; } .reservas__submit { min-width: 0; width: 100%; } } @media (max-width: 500px) { .reservas__hero { padding: 120px 0 60px; } .reservas__card { padding: 32px 18px 40px; margin-top: -40px; } .reservas__title { font-size: clamp(2.2rem, 9vw, 3rem); } .reservas__datepicker { padding: 14px; } } /* ═══════════════════════════════════════════ RESEÑAS PAGE — dedicated reviews / press ═══════════════════════════════════════════ */ .resenas { background: var(--bg); color: var(--cream); padding-bottom: 120px; } /* Clean centered hero — no rating box, badges live below in the carousel */ .resenas__hero--clean { position: relative; padding: 90px 0 60px; background: radial-gradient(ellipse 60% 40% at 50% 40%, rgba(226, 216, 155, 0.05), transparent 65%), var(--bg); margin-bottom: 60px; text-align: center; border-bottom: 1px solid rgba(226, 216, 155, 0.12); } .resenas__hero--clean .resenas__hero-content { max-width: 760px; margin: 0 auto; } /* BIG TV video — the main visual element of the page */ .resenas__main-video { max-width: 1080px; margin: 0 auto 32px; } .resenas__main-video-frame { position: relative; aspect-ratio: 16 / 9; width: 100%; border: 1px solid rgba(226, 216, 155, 0.18); background: #000; overflow: hidden; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); } .resenas__main-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .resenas__main-video-caption { text-align: center; margin-top: 24px; font-family: var(--font-body); } .resenas__main-video-caption .label--light { display: block; font-size: 0.7rem; letter-spacing: 3px; color: var(--gold); margin-bottom: 8px; } .resenas__main-video-caption p { font-size: 0.95rem; color: var(--text-muted); margin: 0; } .resenas__main-video-caption em { color: var(--cream); font-style: italic; } /* Restaurant Guru badge — centered accent below the video */ /* Featured press articles — hero cards with photos */ .resenas__featured-press { margin: 80px 0 60px; } .resenas__featured-press .section-header { text-align: center; margin-bottom: 50px; } .resenas__featured-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1100px; margin: 0 auto; } .resenas__featured-card { display: flex; flex-direction: column; background: rgba(17, 21, 24, 0.5); border: 1px solid rgba(226, 216, 155, 0.12); border-radius: 6px; overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1), border-color 0.4s ease; } .resenas__featured-card:hover { transform: translateY(-6px); border-color: rgba(226, 216, 155, 0.35); } .resenas__featured-img { aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg-deep); } .resenas__featured-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.8s cubic-bezier(0.2, 0.9, 0.3, 1); } .resenas__featured-card:hover .resenas__featured-img img { transform: scale(1.04); } .resenas__featured-body { padding: 28px 30px 32px; } .resenas__featured-source { display: inline-block; font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .resenas__featured-title { font-family: var(--font-display); font-size: 1.5rem; font-style: italic; color: var(--cream); line-height: 1.25; margin: 0 0 14px; font-weight: 400; transition: color 0.25s ease; } .resenas__featured-card:hover .resenas__featured-title { color: var(--gold); } .resenas__featured-sub { font-family: var(--font-body); font-size: 0.9rem; line-height: 1.65; color: var(--cream); opacity: 0.75; margin: 0 0 20px; } .resenas__featured-body .link-arrow { font-size: 0.8rem; } @media (max-width: 768px) { .resenas__featured-grid { grid-template-columns: 1fr; gap: 24px; } .resenas__featured-title { font-size: 1.3rem; } .resenas__featured-body { padding: 22px 22px 26px; } } .resenas__guru-row { display: flex; justify-content: center; margin: 0 auto 80px; } .resenas__guru { display: flex; justify-content: center; } /* Standalone full-width Google carousel */ .resenas__google--standalone { margin-bottom: 100px; } /* Legacy banner hero — kept for backwards compat but unused in current page */ .resenas__hero--banner { position: relative; padding: 90px 0 80px; background: radial-gradient(ellipse 70% 50% at 30% 50%, rgba(226, 216, 155, 0.05), transparent 65%), var(--bg); margin-bottom: 100px; border-bottom: 1px solid rgba(226, 216, 155, 0.12); } .resenas__hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center; } .resenas__hero-text {} .resenas__kicker { display: inline-block; font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 3.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; } .resenas__title { font-family: var(--font-display); font-style: italic; font-size: clamp(2.4rem, 5.5vw, 4.6rem); font-weight: 400; line-height: 1.02; color: var(--gold); margin: 0 0 28px; letter-spacing: -0.01em; } .resenas__hero-sub { font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: var(--text-muted); max-width: 540px; } .resenas__hero-sub strong { color: var(--cream); font-weight: 700; } /* Rating block — sits on the right of the banner */ .resenas__hero-rating { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 40px 32px; border: 1px solid rgba(226, 216, 155, 0.18); background: linear-gradient(180deg, rgba(226, 216, 155, 0.04), rgba(0, 0, 0, 0)); } .resenas__rating-number { font-family: var(--font-display); font-style: italic; font-size: clamp(4rem, 8vw, 6rem); font-weight: 400; line-height: 1; color: var(--cream); letter-spacing: -0.02em; } .resenas__rating-stars { display: flex; gap: 5px; } .resenas__rating-stars svg { width: 24px; height: 24px; filter: drop-shadow(0 2px 8px rgba(251, 188, 5, 0.35)); } .resenas__rating-meta { font-family: var(--font-body); font-size: 0.8rem; color: var(--text-muted); margin: 4px 0 0; letter-spacing: 0.5px; } .resenas__rating-meta strong { color: var(--gold); font-weight: 700; } /* Google Reviews carousel section (Trustindex plugin embed) */ .resenas__google { margin-bottom: 100px; } .resenas__google .section-header { margin-bottom: 50px; text-align: center; } .resenas__google-widget { /* Let the plugin control its own height; just give it a clean wrapper */ min-height: 240px; } .resenas__google-fallback { padding: 32px; border: 1px dashed rgba(226, 216, 155, 0.3); text-align: center; color: var(--text-muted); font-family: var(--font-body); font-size: 0.95rem; line-height: 1.7; } .resenas__google-fallback strong { color: var(--gold); } .resenas__google-fallback em { color: var(--cream); font-style: italic; } .resenas__reviews-row { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 50px; align-items: start; margin-bottom: 100px; } .resenas__reviews-card { margin: 0; } .resenas__video { display: flex; flex-direction: column; gap: 16px; } .resenas__video-frame { aspect-ratio: 16 / 9; width: 100%; } .resenas__video-caption { font-family: var(--font-body); font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; } .resenas__video-caption .label--light { display: block; margin-bottom: 6px; } .resenas__video-caption em { color: var(--gold); font-style: italic; } .resenas__press { margin-top: 40px; opacity: 0.85; } .resenas__press .section-header { text-align: center; margin-bottom: 40px; } .resenas__press .section-header h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); } .resenas__quotes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; } .resenas__quote-card.prensa__card { flex: 1 1 auto; width: auto; padding: 36px 28px 24px 32px; min-height: auto; } .resenas__quote-card.prensa__card blockquote { font-size: 1rem; line-height: 1.55; margin-bottom: 20px; } .resenas__quote-card .prensa__quote-mark { top: 8px; left: 20px; font-size: 5rem; opacity: 0.15; } .resenas__quote-card .prensa__quote-footer { padding-top: 22px; align-items: center; flex-wrap: wrap; gap: 16px; } .resenas__quote-card .prensa__quote-source { font-size: 1.25rem; } .resenas__quote-card .link-arrow { font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); padding: 10px 18px; border: 1px solid rgba(226, 216, 155, 0.35); white-space: nowrap; transition: all var(--speed) var(--ease); } .resenas__quote-card .link-arrow:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); } .resenas__cta { margin-top: 100px; text-align: center; padding: 60px 32px; border: 1px solid rgba(226, 216, 155, 0.18); background: linear-gradient(180deg, rgba(226, 216, 155, 0.04), rgba(0, 0, 0, 0)); } .resenas__cta-title { font-family: var(--font-display); font-style: italic; font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--gold); margin: 0 0 12px; } .resenas__cta-lead { font-family: var(--font-body); color: var(--text-muted); margin: 0 0 32px; } .resenas__cta-btn { display: inline-block; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; padding: 16px 44px; border: 1px solid var(--gold); color: var(--gold); transition: all var(--speed) var(--ease); } .resenas__cta-btn:hover { background: var(--gold); color: var(--bg); box-shadow: 0 6px 24px rgba(226, 216, 155, 0.22); } @media (max-width: 900px) { .resenas__hero--clean { padding: 70px 0 40px; margin-bottom: 50px; } .resenas__title { font-size: clamp(2.2rem, 11vw, 3.6rem); margin-bottom: 0; } .resenas__main-video { margin-bottom: 22px; } .resenas__main-video-caption { margin-top: 18px; } .resenas__main-video-caption .label--light { font-size: 0.62rem; } .resenas__main-video-caption p { font-size: 0.85rem; } .resenas__guru-row { margin-bottom: 60px; } .resenas__google--standalone { margin-bottom: 70px; } .resenas__quotes-grid { grid-template-columns: 1fr; gap: 22px; } .resenas__quote-card.prensa__card { padding: 48px 28px 28px 36px; min-height: auto; } .resenas__quote-card.prensa__card blockquote { font-size: 1.15rem; margin-bottom: 24px; } .resenas__quote-card .prensa__quote-mark { font-size: 5.5rem; top: 4px; left: 18px; } .resenas__quote-card .prensa__quote-footer { gap: 14px; } .resenas__quote-card .prensa__quote-source { font-size: 1.05rem; } .resenas__cta { margin-top: 70px; padding: 48px 24px; } } /* ═══════════════════════════════════════════ RESTAURANTE PAGE — dedicated landing ═══════════════════════════════════════════ */ .restaurante-page { background: var(--bg); color: var(--cream); padding-bottom: 120px; } /* HERO = Banner with badges flanking the title */ .restaurante-page__banner-wrap { background: var(--bg); } .restaurante-page__banner-wrap .restaurante__stage { padding: 0; } .restaurante-page__banner-hero { position: absolute; top: 26%; left: 50%; transform: translate(-50%, -50%); width: min(1280px, 92%); display: grid; grid-template-columns: auto 1fr auto; align-items: center; justify-items: center; gap: 40px; z-index: 3; } /* Desktop default: hide mobile-only title and trust row */ .restaurante-page__banner-title-mobile { display: none; } .restaurante-page__trust { display: none; } /* Override: inside banner hero, the title is NOT absolute — it sits in the grid. */ .restaurante-page__banner-title.restaurante__banner-title { position: static; transform: none; top: auto; left: auto; white-space: normal; text-align: center; padding: 0; } .restaurante-page__google-badge { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 340px; padding: 36px 32px; background: #1a1f22; border: 1px solid rgba(255, 255, 255, 0.06); text-align: center; transition: all var(--speed) var(--ease); box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5); } .restaurante-page__google-badge:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); } .restaurante-page__google-badge-label { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 1.85rem; font-weight: 800; letter-spacing: 1.5px; color: #fff; text-transform: uppercase; } .restaurante-page__google-badge-stars { display: flex; gap: 4px; } .restaurante-page__google-badge-stars svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 8px rgba(251, 188, 5, 0.35)); } .restaurante-page__google-badge-meta { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 1rem; color: #fff; margin: 4px 0 0; font-weight: 400; } .restaurante-page__google-badge-meta strong { font-weight: 700; color: #fff; } .restaurante-page__google-badge-logo { font-family: 'Product Sans', -apple-system, BlinkMacSystemFont, Arial, sans-serif; font-size: 2rem; font-weight: 700; letter-spacing: -0.5px; margin-top: 4px; line-height: 1; } .restaurante-page__guru-badge { display: flex; justify-content: center; } .guru-badge { display: inline-block; transition: transform 0.3s ease, opacity 0.3s ease; } .guru-badge:hover { transform: scale(1.03); opacity: 0.9; } .guru-badge__img { max-width: 160px; height: auto; border-radius: 6px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); } .resenas__guru-row .guru-badge__img { max-width: 200px; } .prensa__reviews-badge .guru-badge__img { max-width: 140px; } /* Tighter badge sizing when rendered inside the banner hero row */ .restaurante-page__banner-hero .restaurante-page__google-badge { max-width: 240px; padding: 22px 22px; gap: 10px; background: rgba(17, 21, 24, 0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65); } .restaurante-page__banner-hero .restaurante-page__google-badge-label { font-size: 1.4rem; letter-spacing: 1.2px; } .restaurante-page__banner-hero .restaurante-page__google-badge-stars svg { width: 22px; height: 22px; } .restaurante-page__banner-hero .restaurante-page__google-badge-meta { font-size: 0.82rem; } .restaurante-page__banner-hero .restaurante-page__google-badge-logo { font-size: 1.5rem; } .restaurante-page__banner-hero .restaurante-page__guru-badge { transform: scale(0.88); transform-origin: center; } /* INTRO — the chef photo + welcome text. Reuses the home .restaurante styles. */ .restaurante-page__intro { padding-top: 0; } .restaurante-page__intro .restaurante__content { margin-top: 0; padding-top: 80px; } /* VIDEO SECTION */ .restaurante-page__video-section { padding: 100px 0; background: radial-gradient(ellipse 60% 40% at 70% 50%, rgba(226, 216, 155, 0.03), transparent 70%), var(--bg); } .restaurante-page__video-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; } .restaurante-page__video-text .label--light { display: inline-block; margin-bottom: 16px; color: var(--gold); } .restaurante-page__video-title { font-family: var(--font-display); font-style: italic; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 400; line-height: 1.05; color: var(--gold); margin: 0 0 28px; } .restaurante-page__video-text p { font-family: var(--font-body); font-size: 1rem; line-height: 1.75; color: var(--text-muted); margin-bottom: 18px; } .restaurante-page__video-player { position: relative; border: 1px solid rgba(226, 216, 155, 0.18); background: #000; overflow: hidden; aspect-ratio: 9 / 16; max-width: 380px; margin: 0 auto; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); } .restaurante-page__video-el { width: 100%; height: 100%; display: block; object-fit: cover; } /* SIGNATURE DISHES — cream/pasta-textured inset (matches the carta page) */ .restaurante-page__signature { padding: 110px 0 100px; background-color: #f5f1e6; background-image: url('/wp-content/uploads/2025/12/fondo-pasta.jpg'); background-repeat: repeat-y; background-size: 100% auto; background-position: center top; color: #2a2e30; position: relative; } /* Signature section logo — big gold, like carta but larger */ .restaurante-page__signature .restaurante-page__signature-logo, .restaurante-page__signature .section-header__logo { display: block; height: auto; width: auto; max-width: 460px; max-height: 200px; margin: 0 auto 40px; opacity: 1; filter: drop-shadow(0 6px 24px rgba(138, 122, 85, 0.22)); } @media (max-width: 768px) { .restaurante-page__signature .restaurante-page__signature-logo, .restaurante-page__signature .section-header__logo { max-width: 320px; max-height: 140px; margin-bottom: 28px; } } .restaurante-page__signature .section-header { text-align: center; margin-bottom: 70px; } .restaurante-page__signature .section-header h2 { color: #2a2e30; } .restaurante-page__signature .section-header .label--light { color: #8a7a55; } /* Override dish text colors for cream background */ .restaurante-page__signature .restaurante-page__dish-body h3 { color: #2a2e30; } .restaurante-page__signature .restaurante-page__dish-body p { color: #5a544a; } .restaurante-page__signature .restaurante-page__dish-body em { color: #8a7a55; font-style: italic; } /* Drop shadow softer on cream */ .restaurante-page__signature .restaurante-page__dish-img img { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.18)); } /* Carta CTA on cream — filled warm gold with white text */ .restaurante-page__signature .restaurante-page__carta-cta .btn { color: #fff; background: #8a7a55; border-color: #8a7a55; } .restaurante-page__signature .restaurante-page__carta-cta .btn:hover { background: #6f6243; border-color: #6f6243; color: #fff; } .restaurante-page__dishes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 70px 60px; } .restaurante-page__dish { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; transition: transform var(--speed) var(--ease); } /* Bollini dietetici — Vegetariano / Disponible versión vegetariana */ .dish-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-family: var(--font-body); font-size: 0.65rem; letter-spacing: 0.3px; margin-bottom: 8px; } .dish-badge--veg { background: rgba(76, 153, 76, 0.15); border: 1px solid rgba(76, 153, 76, 0.5); color: #5cb85c; } .dish-badge--veg-available { background: rgba(76, 153, 76, 0.1); border: 1px solid rgba(76, 153, 76, 0.35); color: #6abf6a; font-style: italic; } .dish-badge__leaf { width: 14px; height: 14px; flex-shrink: 0; } /* Bollino "Especialidad del Chef" — medaglione dorato elegante con doppio anello */ .dish-stamp { position: absolute; top: 8px; right: 8px; z-index: 10; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #f4e7a8 0%, #e2d89b 28%, #c9a64a 62%, #8b6b1f 100% ); transform: rotate(-8deg); box-shadow: 0 6px 18px rgba(60, 40, 10, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.55), inset 0 -2px 4px rgba(80, 50, 10, 0.45); pointer-events: none; animation: stampPulse 4.5s ease-in-out infinite alternate; } /* Anello interno decorativo */ .dish-stamp::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; border: 1px solid rgba(60, 40, 10, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 240, 200, 0.4); pointer-events: none; } /* Glow dorato esterno */ .dish-stamp::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: radial-gradient(circle, rgba(226, 216, 155, 0.3) 0%, transparent 70%); z-index: -1; pointer-events: none; } .dish-stamp__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 6px; text-align: center; } .dish-stamp__ornament { font-size: 0.55rem; color: #5a3e0d; line-height: 1; opacity: 0.85; } .dish-stamp__text { font-family: var(--font-display); font-size: 0.58rem; font-style: italic; color: #3a2608; line-height: 1.25; letter-spacing: 0.6px; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.45); font-weight: 500; } @keyframes stampPulse { 0% { box-shadow: 0 6px 18px rgba(60, 40, 10, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.55), inset 0 -2px 4px rgba(80, 50, 10, 0.45), 0 0 0 0 rgba(226, 216, 155, 0.35); } 100% { box-shadow: 0 6px 18px rgba(60, 40, 10, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.55), inset 0 -2px 4px rgba(80, 50, 10, 0.45), 0 0 0 8px rgba(226, 216, 155, 0.12); } } @media (prefers-reduced-motion: reduce) { .dish-stamp { animation: none; } } @media (max-width: 768px) { .dish-stamp { width: 72px; height: 72px; top: 6px; right: 10px; } .dish-stamp__text { font-size: 0.52rem; } .dish-stamp__ornament { font-size: 0.5rem; } } /* Anteprima "plato premiado" sulla home — riusa il block della pagina Restaurante con padding ridotto, bordo dorato e hover-lift cliccabile */ .restaurante-page__signature--preview { display: block; padding: 28px 24px; margin: 32px 0 28px; border-radius: 14px; border: 1px solid rgba(138, 122, 85, 0.35); overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35); } .restaurante-page__signature--preview:hover { transform: translateY(-3px); border-color: rgba(138, 122, 85, 0.7); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45); } .restaurante-page__signature--preview .restaurante-page__dish { margin: 0; } .restaurante-page__signature--preview .restaurante-page__dish-img { max-width: 240px; margin: 0 auto 18px; } .restaurante-page__signature--preview .restaurante-page__dish-body { max-width: 100%; } .restaurante-page__signature--preview .restaurante-page__dish-body h3 { font-size: 1.7rem; } @media (max-width: 600px) { .restaurante-page__signature--preview { padding: 22px 16px; } .restaurante-page__signature--preview .restaurante-page__dish-img { max-width: 200px; } } /* Bollino "Premiado" — medaglione con alloro per il piatto premiato */ .dish-award { position: absolute; top: 6px; right: 6px; z-index: 10; width: 110px; height: 110px; display: flex; align-items: center; justify-content: center; pointer-events: none; transform: rotate(-6deg); filter: drop-shadow(0 6px 14px rgba(60, 40, 10, 0.4)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)); animation: awardFloat 5s ease-in-out infinite alternate; } .dish-award__wreath { position: absolute; inset: 0; width: 100%; height: 100%; color: #b8932f; z-index: 2; filter: drop-shadow(0 1px 0 rgba(255, 240, 200, 0.5)); } .dish-award__inner { position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #f7ebb4 0%, #e5d093 28%, #c49538 62%, #7e5c18 100% ); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6), inset 0 -2px 4px rgba(80, 50, 10, 0.5), 0 0 0 2px rgba(60, 40, 10, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px 6px; text-align: center; } .dish-award__stars { color: #5a3e0d; font-size: 0.5rem; letter-spacing: 1px; line-height: 1; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.5); } .dish-award__title { font-family: var(--font-display); font-size: 0.68rem; font-style: italic; color: #2e1d04; line-height: 1; letter-spacing: 0.8px; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.55); font-weight: 600; margin: 1px 0; } .dish-award__source { font-family: var(--font-body); font-size: 0.38rem; color: #4a3208; line-height: 1.15; letter-spacing: 0.4px; text-transform: uppercase; font-weight: 600; opacity: 0.9; } @keyframes awardFloat { 0% { transform: rotate(-6deg) translateY(0); } 100% { transform: rotate(-4deg) translateY(-2px); } } @media (prefers-reduced-motion: reduce) { .dish-award { animation: none; } } @media (max-width: 768px) { .dish-award { width: 92px; height: 92px; top: 4px; right: 4px; } .dish-award__inner { width: 60px; height: 60px; } .dish-award__title { font-size: 0.58rem; } .dish-award__stars { font-size: 0.44rem; } .dish-award__source { font-size: 0.32rem; } } .restaurante-page__dish:hover { transform: translateY(-6px); } .restaurante-page__dish:hover .restaurante-page__dish-img img { transform: scale(1.04); } /* Floating image on dark bg — no border, no card, like the carta page */ .restaurante-page__dish-img { width: 100%; max-width: 320px; aspect-ratio: 1; margin-bottom: 24px; overflow: visible; } .restaurante-page__dish-img img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.6s var(--ease); filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55)); } .restaurante-page__dish-body { max-width: 400px; } .restaurante-page__dish-body h3 { font-family: var(--font-display); font-style: italic; font-size: 2rem; font-weight: 400; color: var(--gold); margin: 0 0 14px; } .restaurante-page__dish-body p { font-family: var(--font-body); font-size: 0.95rem; line-height: 1.7; color: var(--text-muted); margin: 0; } .restaurante-page__dish-body em { color: var(--cream); font-style: italic; } .restaurante-page__carta-cta { text-align: center; margin-top: 60px; } /* MOBILE */ @media (max-width: 900px) { /* Mobile: hide desktop flanking row, show mobile title + trust row below banner */ .restaurante-page__banner-hero { display: none; } .restaurante-page__banner-title-mobile { display: block; top: 32%; } .restaurante-page__trust { display: block; padding: 50px 0 30px; background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(226, 216, 155, 0.05), transparent 65%), var(--bg); border-bottom: 1px solid rgba(226, 216, 155, 0.12); } .restaurante-page__trust-inner { display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; } .restaurante-page__trust .restaurante-page__google-badge { max-width: 300px; padding: 28px 24px; gap: 12px; } .restaurante-page__google-badge-label { font-size: 1.6rem; } .restaurante-page__google-badge-stars svg { width: 26px; height: 26px; } .restaurante-page__google-badge-meta { font-size: 0.9rem; } .restaurante-page__google-badge-logo { font-size: 1.7rem; } .restaurante-page__video-section { padding: 70px 0; } .restaurante-page__video-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; } .restaurante-page__video-text { display: flex; flex-direction: column; align-items: center; } .restaurante-page__signature { padding: 70px 0 60px; } .restaurante-page__dishes-grid { grid-template-columns: 1fr; gap: 60px; } .restaurante-page__dish-img { max-width: 260px; margin-bottom: 18px; } .restaurante-page__dish-body h3 { font-size: 1.6rem; } .restaurante-page__dish-body p { font-size: 0.9rem; } } /* ═══════════════════════════════════════════ COCTELERÍA PAGE — dedicated landing ═══════════════════════════════════════════ */ .cocteleria-page { background: var(--bg); color: var(--cream); padding-bottom: 120px; } /* HERO BANNER */ .cocteleria-page__hero { position: relative; padding: 90px 0 80px; background: radial-gradient(ellipse 70% 50% at 30% 50%, rgba(226, 216, 155, 0.05), transparent 65%), var(--bg); border-bottom: 1px solid rgba(226, 216, 155, 0.12); } .cocteleria-page__hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center; } .cocteleria-page__hero-badges { display: flex; justify-content: center; } /* INTRO (Sin carta) — reuses .restaurante styles */ .cocteleria-page__intro { padding-top: 0; } .cocteleria-page__intro .restaurante__content { margin-top: 0; padding-top: 80px; } /* CÓMO FUNCIONA — 3 steps */ .cocteleria-page__how { padding: 100px 0; background: radial-gradient(ellipse 60% 40% at 70% 50%, rgba(226, 216, 155, 0.03), transparent 70%), var(--bg); } .cocteleria-page__how .section-header { text-align: center; margin-bottom: 70px; } .cocteleria-page__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .cocteleria-page__step { position: relative; padding: 40px 32px 36px; border: 1px solid var(--border); background: linear-gradient(135deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)); transition: all var(--speed) var(--ease); } .cocteleria-page__step:hover { border-color: var(--gold-dark); transform: translateY(-4px); } .cocteleria-page__step-num { display: block; font-family: var(--font-display); font-style: italic; font-size: 3rem; color: var(--gold); line-height: 1; margin-bottom: 20px; opacity: 0.55; } .cocteleria-page__step h3 { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--gold); margin: 0 0 14px; } .cocteleria-page__step p { font-family: var(--font-body); font-size: 0.92rem; line-height: 1.7; color: var(--text-muted); margin: 0; } .cocteleria-page__step em { color: var(--cream); font-style: italic; } /* GALLERY */ .cocteleria-page__gallery { padding: 80px 0 60px; } .cocteleria-page__gallery .section-header { text-align: center; margin-bottom: 60px; } /* Layout: 1 horizontal banner full-width on top + 3 vertical portraits below */ .cocteleria-page__gallery-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; gap: 18px; } .cocteleria-page__gallery-item { margin: 0; overflow: hidden; border: 1px solid rgba(226, 216, 155, 0.12); background: var(--bg-deep); } .cocteleria-page__gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s var(--ease); filter: brightness(0.92) saturate(0.95) contrast(1.05); } .cocteleria-page__gallery-item:hover img { transform: scale(1.04); } /* Top horizontal banner — full row width */ .cocteleria-page__gallery-item--banner { grid-row: 1; grid-column: 1 / 4; aspect-ratio: 21 / 9; } /* Vertical portraits — 3 in a row below */ .cocteleria-page__gallery-item--vert { grid-row: 2; aspect-ratio: 3 / 4; } /* MOBILE */ @media (max-width: 900px) { .cocteleria-page__hero { padding: 70px 0 60px; } .cocteleria-page__hero-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; } .cocteleria-page__how { padding: 70px 0; } .cocteleria-page__how .section-header { margin-bottom: 40px; } .cocteleria-page__steps { grid-template-columns: 1fr; gap: 22px; } .cocteleria-page__step { padding: 32px 24px; } .cocteleria-page__step-num { font-size: 2.4rem; margin-bottom: 12px; } .cocteleria-page__step h3 { font-size: 1.3rem; } .cocteleria-page__gallery { padding: 60px 0 40px; } .cocteleria-page__gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 12px; } .cocteleria-page__gallery-item--banner { grid-row: auto; grid-column: 1 / 3; aspect-ratio: 16 / 9; } .cocteleria-page__gallery-item--vert { grid-row: auto; grid-column: auto; aspect-ratio: 3 / 4; } /* third vertical spans full width on second mobile row */ .cocteleria-page__gallery-item--vert:last-child { grid-column: 1 / 3; max-width: 60%; margin: 0 auto; } } /* ═══════════════════════════════════════════ CONTACTO PAGE — dedicated landing ═══════════════════════════════════════════ */ .contacto-page { padding-top: 0; padding-bottom: 0; } /* HERO */ .contacto-page__hero { padding: 110px 0 70px; text-align: center; background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(226, 216, 155, 0.06), transparent 65%), var(--bg-deep); } .contacto-page__title { font-family: var(--font-display); font-size: clamp(3rem, 7vw, 6rem); font-style: italic; color: var(--gold); line-height: 1; margin: 18px 0 28px; letter-spacing: 1px; } .contacto-page__lead { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.7; color: var(--cream); max-width: 640px; margin: 0 auto; opacity: 0.88; } /* HORARIOS — cocina + bar cards */ .contacto-page__hours { padding: 100px 0 60px; background: radial-gradient(ellipse 60% 40% at 30% 50%, rgba(226, 216, 155, 0.04), transparent 70%), var(--bg); } .contacto-page__hours-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 960px; margin: 0 auto; } .contacto-page__hours-card { background: rgba(226, 216, 155, 0.03); border: 1px solid rgba(226, 216, 155, 0.14); padding: 44px 40px; text-align: center; transition: all var(--speed) var(--ease); } .contacto-page__hours-card:hover { border-color: rgba(226, 216, 155, 0.3); background: rgba(226, 216, 155, 0.05); } .contacto-page__hours-icon { width: 52px; height: 52px; margin: 0 auto 22px; color: var(--gold); } .contacto-page__hours-icon svg { width: 100%; height: 100%; } .contacto-page__hours-card h3 { font-family: var(--font-display); font-size: 2rem; font-style: italic; color: var(--gold); margin: 0 0 24px; letter-spacing: 0.5px; } .contacto-page__hours-list { list-style: none; padding: 0; margin: 0; text-align: left; } .contacto-page__hours-list li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(226, 216, 155, 0.08); font-family: var(--font-body); font-size: 0.92rem; color: var(--cream); } .contacto-page__hours-list li:last-child { border-bottom: none; } .contacto-page__hours-list span { opacity: 0.75; } .contacto-page__hours-list strong { color: var(--gold); font-weight: 700; } .contacto-page__hours-closed strong { color: #c85a5a !important; font-style: italic; font-weight: 600; } /* CÓMO LLEGAR */ .contacto-page__llegar { padding: 90px 0; background: radial-gradient(ellipse 60% 40% at 70% 50%, rgba(226, 216, 155, 0.03), transparent 70%), var(--bg-deep); } .contacto-page__llegar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1100px; margin: 0 auto; } .contacto-page__llegar-card { text-align: center; padding: 30px 20px; } .contacto-page__llegar-icon { width: 56px; height: 56px; margin: 0 auto 20px; color: var(--gold); opacity: 0.9; } .contacto-page__llegar-icon svg { width: 100%; height: 100%; } .contacto-page__llegar-card h3 { font-family: var(--font-display); font-size: 1.7rem; font-style: italic; color: var(--gold); margin: 0 0 14px; } .contacto-page__llegar-card p { font-family: var(--font-body); font-size: 0.92rem; line-height: 1.7; color: var(--cream); opacity: 0.85; max-width: 320px; margin: 0 auto; } .contacto-page__llegar-card strong { color: var(--gold); font-weight: 700; } /* FAQ — preguntas frecuentes (contacto) */ .contacto-page__faq { padding: 90px 0; background: var(--bg); } .contacto-page__faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .contacto-page__faq-item { border: 1px solid rgba(226, 216, 155, 0.15); border-radius: 6px; background: rgba(17, 21, 24, 0.5); overflow: hidden; transition: border-color 0.3s ease, background 0.3s ease; } .contacto-page__faq-item[open] { border-color: rgba(226, 216, 155, 0.35); background: rgba(17, 21, 24, 0.75); } .contacto-page__faq-q { list-style: none; cursor: pointer; padding: 22px 56px 22px 28px; font-family: var(--font-display); font-size: 1.25rem; font-style: italic; color: var(--gold); position: relative; transition: color 0.2s ease; } .contacto-page__faq-q::-webkit-details-marker { display: none; } .contacto-page__faq-q::after { content: '+'; position: absolute; right: 28px; top: 50%; transform: translateY(-50%); font-family: var(--font-body); font-size: 1.6rem; font-style: normal; color: var(--gold); transition: transform 0.3s ease; line-height: 1; } .contacto-page__faq-item[open] .contacto-page__faq-q::after { transform: translateY(-50%) rotate(45deg); } .contacto-page__faq-q:hover { color: var(--cream); } .contacto-page__faq-a { padding: 0 28px 24px; } .contacto-page__faq-a p { font-family: var(--font-body); font-size: 0.95rem; line-height: 1.75; color: var(--cream); opacity: 0.85; margin: 0; } /* MOBILE */ @media (max-width: 900px) { .contacto-page__hero { padding: 80px 0 50px; } .contacto-page__hours { padding: 70px 0 40px; } .contacto-page__hours-grid { grid-template-columns: 1fr; gap: 28px; } .contacto-page__hours-card { padding: 34px 26px; } .contacto-page__llegar { padding: 60px 0; } .contacto-page__llegar-grid { grid-template-columns: 1fr; gap: 40px; } .contacto-page__faq { padding: 60px 0; } .contacto-page__faq-q { font-size: 1.1rem; padding: 18px 48px 18px 22px; } .contacto-page__faq-q::after { right: 22px; } .contacto-page__faq-a { padding: 0 22px 20px; } } /* ======================================================================== DIARIO — blog list + archive ======================================================================== */ .diario-list { background: var(--bg); } .diario-list__hero { padding: 140px 0 60px; text-align: center; background: radial-gradient(ellipse 50% 60% at 50% 30%, rgba(226, 216, 155, 0.05), transparent 70%), var(--bg-deep); } .diario-list__title { font-family: var(--font-display); font-size: clamp(2.4rem, 5.5vw, 4.2rem); font-style: italic; color: var(--gold); margin: 18px 0 20px; line-height: 1.05; font-weight: 400; } .diario-list__lead { max-width: 640px; margin: 0 auto; font-family: var(--font-body); font-size: 1.05rem; line-height: 1.75; color: var(--cream); opacity: 0.85; } .diario-list__body { padding: 80px 0 120px; } .diario-list__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 32px; max-width: 1200px; margin: 0 auto; } .diario-list__pagination { margin-top: 70px; text-align: center; font-family: var(--font-body); display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; } .diario-list__pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 14px; border: 1px solid rgba(226, 216, 155, 0.25); color: var(--cream); text-decoration: none; border-radius: 3px; font-size: 0.92rem; transition: all 0.25s ease; } .diario-list__pagination .page-numbers:hover { border-color: var(--gold); color: var(--gold); } .diario-list__pagination .page-numbers.current { background: var(--gold); color: var(--bg-deep); border-color: var(--gold); } .diario-list__empty { text-align: center; padding: 60px 20px; color: var(--cream); opacity: 0.8; } .diario-list__empty p { font-family: var(--font-body); font-size: 1.05rem; margin-bottom: 28px; } /* Card */ .diario-card { background: rgba(17, 21, 24, 0.4); border: 1px solid rgba(226, 216, 155, 0.08); border-radius: 4px; overflow: hidden; transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1), border-color 0.4s ease; } .diario-card:hover { transform: translateY(-6px); border-color: rgba(226, 216, 155, 0.25); } .diario-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; } .diario-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-deep); } .diario-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.2, 0.9, 0.3, 1); } .diario-card:hover .diario-card__img { transform: scale(1.05); } .diario-card__body { padding: 26px 26px 30px; } .diario-card__kicker { display: inline-block; font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .diario-card__title { font-family: var(--font-display); font-size: 1.55rem; font-style: italic; color: var(--cream); line-height: 1.2; margin: 0 0 14px; font-weight: 400; transition: color 0.25s ease; } .diario-card:hover .diario-card__title { color: var(--gold); } .diario-card__excerpt { font-family: var(--font-body); font-size: 0.92rem; line-height: 1.65; color: var(--cream); opacity: 0.75; margin: 0 0 18px; } .diario-card__meta { font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-dark); opacity: 0.85; } /* ======================================================================== DIARIO SINGLE — individual post ======================================================================== */ .diario-single { background: var(--bg); } .diario-single__hero { position: relative; padding: 0; min-height: 60vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--bg-deep); } .diario-single__hero-media { position: absolute; inset: 0; z-index: 0; } .diario-single__hero-img { width: 100%; height: 100%; object-fit: cover; } .diario-single__hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 21, 24, 0.2) 0%, rgba(17, 21, 24, 0.65) 60%, rgba(17, 21, 24, 0.95) 100%); } .diario-single__hero-inner { position: relative; z-index: 1; padding: 140px 0 70px; text-align: center; } .diario-single__kicker { display: inline-block; margin-bottom: 22px; } .diario-single__title { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 4rem); font-style: italic; color: var(--gold); margin: 0 0 24px; line-height: 1.08; max-width: 820px; margin-left: auto; margin-right: auto; font-weight: 400; } .diario-single__meta { font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream); opacity: 0.8; } .diario-single__meta-sep { margin: 0 12px; opacity: 0.5; } .diario-single__body { padding: 80px 0 60px; } .diario-single__content { max-width: 720px; margin: 0 auto; font-family: var(--font-body); font-size: 1.05rem; line-height: 1.85; color: var(--cream); opacity: 0.9; } .diario-single__content h2, .diario-single__content h3 { font-family: var(--font-display); font-style: italic; color: var(--gold); margin: 50px 0 18px; line-height: 1.25; font-weight: 400; } .diario-single__content h2 { font-size: 2rem; } .diario-single__content h3 { font-size: 1.55rem; } .diario-single__content p { margin: 0 0 22px; } .diario-single__content a { color: var(--gold); text-decoration: underline; text-decoration-color: rgba(226, 216, 155, 0.35); } .diario-single__content a:hover { text-decoration-color: var(--gold); } .diario-single__content strong { color: var(--gold); } .diario-single__content ul, .diario-single__content ol { margin: 0 0 22px; padding-left: 24px; } .diario-single__content li { margin-bottom: 10px; } .diario-single__content blockquote { margin: 40px 0; padding: 24px 30px; border-left: 3px solid var(--gold); background: rgba(226, 216, 155, 0.05); font-style: italic; font-size: 1.15rem; color: var(--cream); } .diario-single__content img { max-width: 100%; height: auto; border-radius: 4px; margin: 30px 0; } .diario-single__content figure { margin: 30px 0; } .diario-single__content figcaption { font-size: 0.85rem; opacity: 0.7; text-align: center; margin-top: 10px; font-style: italic; } .diario-single__cta { padding: 40px 0 120px; border-top: 1px solid rgba(226, 216, 155, 0.12); margin-top: 40px; } .diario-single__cta .container { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; } .diario-single__back { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-body); font-size: 0.88rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream); text-decoration: none; transition: color 0.25s ease; } .diario-single__back:hover { color: var(--gold); } .diario-single__reserva { flex-shrink: 0; } /* ======================================================================== FLOATING WHATSAPP CTA — green icon with gold brand accents ======================================================================== */ .wa-fab { position: fixed; right: 20px; bottom: 20px; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #2bdf6a, #25D366 60%, #1fba58); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 9998; transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.3), box-shadow 0.3s ease; text-decoration: none; box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25); } .wa-fab__ring { position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--gold, #e2d89b); opacity: 0.5; pointer-events: none; transition: opacity 0.3s ease; } .wa-fab:hover .wa-fab__ring, .wa-fab:focus-visible .wa-fab__ring { opacity: 1; } .wa-fab:hover, .wa-fab:focus-visible { transform: scale(1.08); box-shadow: 0 10px 28px rgba(37, 211, 102, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(226, 216, 155, 0.25); } .wa-fab:active { transform: scale(0.96); } .wa-fab__icon { position: relative; z-index: 2; width: 24px; height: 24px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); } .wa-fab__pulse { position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--gold, #e2d89b); opacity: 0; animation: wa-fab-pulse 3s cubic-bezier(0, 0, 0.2, 1) infinite; pointer-events: none; } @keyframes wa-fab-pulse { 0% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .wa-fab__pulse { animation: none; } .wa-fab { transition: none; } } @media (max-width: 768px) { .wa-fab { right: 12px; bottom: 12px; width: 40px; height: 40px; } .wa-fab__icon { width: 18px; height: 18px; } } @media print { .wa-fab { display: none !important; } } /* ======================================================================== ACCESSIBILITY — skip link, focus states, sr-only utility ======================================================================== */ /* Skip link: invisibile finché non riceve focus da tastiera (Tab). Target: #main-content. WCAG 2.4.1 "Bypass Blocks" — permette a screen reader / keyboard users di saltare nav ripetitiva. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; padding: 14px 24px; background: var(--gold); color: var(--bg-deep); font-family: var(--font-body); font-size: 0.9rem; font-weight: 700; text-decoration: none; border-radius: 0 0 4px 0; transition: none; } .skip-link:focus, .skip-link:focus-visible { left: 0; outline: 3px solid var(--cream); outline-offset: 2px; } /* Visually hidden ma leggibile da screen reader (utility riusabile). */ .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; } /* Focus-visible globale: anello dorato spesso 2px + offset, visibile SOLO quando l'utente naviga da tastiera (non col mouse). Unifica il trattamento su link, button, input, select, textarea, details. */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; } /* Target specifici dove il default outline non era abbastanza visibile */ .btn:focus-visible, .nav__cta:focus-visible, .nav__link:focus-visible, .nav__logo:focus-visible, .diario-card__link:focus-visible, .error404__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; box-shadow: 0 0 0 5px rgba(226, 216, 155, 0.2); } /* #main-content riceve focus dopo skip-link: non deve mostrare outline (è un anchor target, non interattivo) */ #main-content:focus { outline: none; } /* ======================================================================== 404 — page not found ======================================================================== */ .error404 { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 140px 0 100px; text-align: center; background: radial-gradient(ellipse 50% 60% at 50% 30%, rgba(226, 216, 155, 0.06), transparent 70%), var(--bg-deep); } .error404 .container { max-width: 760px; } .error404__kicker { margin-bottom: 30px; display: inline-block; } .error404__title { font-family: var(--font-display); font-size: clamp(6rem, 18vw, 12rem); font-style: italic; color: var(--gold); line-height: 0.9; margin: 0 0 30px; letter-spacing: -0.02em; font-weight: 400; text-shadow: 0 4px 40px rgba(226, 216, 155, 0.15); } .error404__lead { font-family: var(--font-body); font-size: 1.1rem; line-height: 1.75; color: var(--cream); opacity: 0.85; max-width: 560px; margin: 0 auto 44px; } .error404__actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 50px; } .error404__btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 30px; font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border-radius: 2px; transition: all 0.3s cubic-bezier(0.2, 0.9, 0.3, 1); } .error404__btn--primary { background: var(--gold); color: var(--bg-deep); border: 1px solid var(--gold); } .error404__btn--primary:hover { background: var(--cream); border-color: var(--cream); transform: translateY(-2px); } .error404__btn--ghost { background: transparent; color: var(--cream); border: 1px solid rgba(226, 216, 155, 0.3); } .error404__btn--ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); } .error404__help { padding-top: 40px; border-top: 1px solid rgba(226, 216, 155, 0.12); font-family: var(--font-body); font-size: 0.9rem; color: var(--cream); opacity: 0.75; } .error404__help a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(226, 216, 155, 0.35); transition: border-color 0.25s ease; } .error404__help a:hover { border-bottom-color: var(--gold); } @media (max-width: 680px) { .error404 { padding: 110px 0 70px; min-height: 70vh; } .error404__lead { font-size: 1rem; } .error404__actions { flex-direction: column; gap: 12px; } .error404__btn { width: 100%; } } @media (max-width: 1000px) { .diario-list__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; } } @media (max-width: 680px) { .diario-list__hero { padding: 110px 0 40px; } .diario-list__body { padding: 60px 0 80px; } .diario-list__grid { grid-template-columns: 1fr; gap: 32px; } .diario-card__body { padding: 22px 22px 26px; } .diario-card__title { font-size: 1.35rem; } .diario-single__hero { min-height: 50vh; } .diario-single__hero-inner { padding: 110px 0 50px; } .diario-single__body { padding: 60px 0 40px; } .diario-single__content { font-size: 1rem; line-height: 1.8; } .diario-single__content h2 { font-size: 1.65rem; } .diario-single__content h3 { font-size: 1.3rem; } .diario-single__cta { padding: 30px 0 80px; } .diario-single__cta .container { flex-direction: column; text-align: center; } } /* ======================================================================== TABLET — iPad mini/air/pro (769-1024px): usa navbar hamburger come su mobile, con più padding laterale così l'icona non è incollata al bordo. ======================================================================== */ @media (min-width: 769px) and (max-width: 1024px) { .nav-topbar { display: none; } .nav { padding: 6px 0 8px; top: 0; } .nav__inner { display: flex; justify-content: space-between; align-items: center; padding: 0 56px 0 32px; gap: 16px; } .nav__links, .nav__right { display: none; } .nav__burger { display: flex; position: static; } .nav__logo { margin-right: 0; } .nav__logo img { height: 60px; width: auto; max-width: 240px; object-fit: contain; } .nav--scrolled .nav__logo img { height: 48px; } /* Hero content: alza il titolo più verso il centro della pagina invece di bottom */ .hero__content { bottom: auto; top: 82%; transform: translateY(-82%); } /* Carta page: logo rimpicciolito + IR A LA WEB sotto per evitare overlap col logo centrato */ .carta .section-header__logo { max-width: 400px; margin-top: 60px; } .carta-back { top: 16px; left: 18px; padding: 8px 16px; font-size: 0.62rem; } } /* Carta: fix overlap "IR A LA WEB" vs logo anche su iPad mini (601-768px) */ @media (min-width: 601px) and (max-width: 768px) { .carta .section-header__logo { max-width: 360px; margin-top: 56px; } .carta-back { top: 16px; left: 18px; padding: 7px 14px; font-size: 0.6rem; } } /* ======================================================================== MOBILE — schermi piccoli tipo Galaxy S24 (≤ 400px): bottoni hero identici (stessa larghezza + testo su una riga) ======================================================================== */ @media (max-width: 400px) { .hero__btn-left, .hero__btn-right { width: calc(50% - 28px) !important; max-width: none !important; padding: 14px 8px !important; font-size: 0.62rem !important; letter-spacing: 1.2px !important; white-space: nowrap; } .hero__btn-left { left: 16px !important; right: auto !important; } .hero__btn-right { right: 16px !important; left: auto !important; } } /* ======================================================================== MOBILE — sposta selettore lingua dentro hamburger menu (≤ 600px) ======================================================================== */ @media (max-width: 600px) { .nav__lang { display: none !important; } } /* Lingue: testo elegante, niente rettangoli/bandierine (restyle Immersiva 16-lug) */ .mobile-menu__lang { display: flex; gap: 26px; justify-content: center; margin-top: 22px; flex-wrap: wrap; } .mobile-menu__lang-option { display: inline-flex; align-items: center; padding: 4px 2px; border: none; border-bottom: 1px solid transparent; font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--cream); opacity: 0.65; transition: all var(--speed) var(--ease); text-decoration: none; } .mobile-menu__lang-option:hover { color: var(--gold); opacity: 1; } .mobile-menu__lang-option--active { color: var(--gold); border-bottom-color: var(--gold-dark); opacity: 1; } .mobile-menu__lang-flag { display: none; } /* ════════════════════════════════════════════════════════════════ COOKIE BANNER (Complianz) — restyle brand Templo (16-lug-2026) Il CSS del plugin arriva da uploads/complianz/css/banner-1-optin.css; questi override lo vestono col linguaggio del sito: fondo scuro, bottone primario oro, font Arvo. NON toccare la logica del plugin. ════════════════════════════════════════════════════════════════ */ .cmplz-cookiebanner { background: linear-gradient(180deg, rgba(226,216,155,0.04) 0%, transparent 40%), #13171a !important; border: 1px solid rgba(174, 143, 91, 0.35) !important; border-top: 3px solid var(--gold-dark, #ae8f5b) !important; border-radius: 0 !important; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6) !important; color: #ede9d2 !important; font-family: 'Arvo', Georgia, serif !important; } .cmplz-cookiebanner .cmplz-header, .cmplz-cookiebanner .cmplz-title, .cmplz-cookiebanner .cmplz-body, .cmplz-cookiebanner .cmplz-message, .cmplz-cookiebanner .cmplz-categories .cmplz-category { color: #ede9d2 !important; background: transparent !important; font-family: 'Arvo', Georgia, serif !important; } .cmplz-cookiebanner .cmplz-message a, .cmplz-cookiebanner .cmplz-links a { color: #e2d89b !important; text-decoration: underline; text-underline-offset: 3px; } .cmplz-cookiebanner .cmplz-btn { border-radius: 0 !important; font-family: 'Arvo', Georgia, serif !important; font-size: 0.78rem !important; letter-spacing: 2px !important; text-transform: uppercase !important; transition: all 0.25s ease !important; } .cmplz-cookiebanner .cmplz-btn.cmplz-accept { background: linear-gradient(120deg, #d4c98e, #e2d89b 55%, #cfc386) !important; color: #1a1410 !important; border: none !important; font-weight: 700 !important; } .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover { filter: brightness(1.06); } .cmplz-cookiebanner .cmplz-btn.cmplz-deny, .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences, .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences { background: transparent !important; color: #ede9d2 !important; border: 1px solid rgba(226, 216, 155, 0.4) !important; } .cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover, .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover, .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover { border-color: #e2d89b !important; color: #e2d89b !important; } .cmplz-cookiebanner .cmplz-close { color: #ede9d2 !important; } /* toggle categorie preferenze in oro */ .cmplz-cookiebanner input.cmplz-consent-checkbox:checked + label::before, .cmplz-cookiebanner .cmplz-banner-checkbox input:checked + .cmplz-label::before { background-color: #ae8f5b !important; }