/* ========================================================================== DUBAI LOUNGE & GRILL - Capa estacional de Halloween ========================================================================== TODAS las reglas cuelgan de .theme-halloween, que se pone en el solo cuando SeasonTheme:Enabled = true en appsettings.json. Con Enabled = false la clase no se emite, este archivo no se carga y el Landing queda idéntico al original: no hay que borrar nada. No se sustituye ninguna imagen del sitio. Todo el ambiente se consigue con gradientes, sombras y overlays sobre las imágenes que ya existen. Paleta: se conserva negro + dorado Dubai y se añaden rojo oscuro, borgoña y naranja quemado como secundarios. ========================================================================== */ .theme-halloween { --hw-blood: #7a1010; --hw-burgundy: #4a0d18; --hw-ember: #b5451b; --hw-red-soft: rgba(181, 23, 23, .55); --hw-glow: rgba(255, 80, 60, .35); } /* ========================================================================== 1. HERO - overlay borgoña, iluminación cálida y niebla inferior ========================================================================== La imagen de fondo del hero NO se toca: se superponen capas con ::before y una niebla propia. El contenido del hero queda por encima. ========================================================================== */ .theme-halloween .hero { position: relative; } /* Overlay rojo/borgoña muy ligero + luz cálida lateral. */ .theme-halloween .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(120% 80% at 15% 100%, rgba(181, 69, 27, .28), transparent 60%), radial-gradient(90% 70% at 85% 0%, rgba(122, 16, 16, .30), transparent 65%), linear-gradient(180deg, rgba(74, 13, 24, .18), rgba(5, 5, 5, .35)); mix-blend-mode: screen; opacity: .85; } /* El hero ya tenía ::after: no se altera, solo se garantiza que el contenido quede sobre las capas nuevas. */ .theme-halloween .hero > .container { position: relative; z-index: 3; } /* Niebla en la base del hero. Solo CSS, sin imágenes. */ .theme-halloween .hero .hw-fog { position: absolute; left: -10%; right: -10%; bottom: -40px; height: 220px; pointer-events: none; z-index: 2; background: radial-gradient(60% 100% at 20% 100%, rgba(200, 200, 210, .10), transparent 70%), radial-gradient(70% 100% at 65% 100%, rgba(190, 170, 180, .09), transparent 70%), linear-gradient(0deg, rgba(220, 220, 230, .10), transparent); filter: blur(22px); animation: hwFogDrift 26s ease-in-out infinite alternate; } @keyframes hwFogDrift { from { transform: translateX(-4%) translateY(0); opacity: .75; } to { transform: translateX(4%) translateY(-8px); opacity: 1; } } /* ---- Antetítulo estacional sobre el H1 (no sustituye al título) ---- */ .theme-halloween .hw-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 7px 16px; border: 1px solid rgba(181, 23, 23, .55); border-radius: 999px; background: linear-gradient(90deg, rgba(74, 13, 24, .55), rgba(5, 5, 5, .35)); color: #ffb9a3; font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; box-shadow: 0 0 18px rgba(122, 16, 16, .35); } .theme-halloween .hw-eyebrow .hw-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff5c3c; box-shadow: 0 0 10px #ff5c3c; animation: hwPulse 2.6s ease-in-out infinite; } .theme-halloween .hw-afterdark { display: block; margin-top: 10px; font-family: 'Creepster', 'Segoe UI', sans-serif; font-size: 1.5rem; letter-spacing: .08em; color: #ff7a5c; text-shadow: 0 0 14px rgba(255, 90, 60, .45), 0 0 34px rgba(122, 16, 16, .35); opacity: .95; } @keyframes hwPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.85); } } /* ---- Promo discreta de Haunted House dentro del hero ---- */ .theme-halloween .hw-hero-promo { display: inline-flex; align-items: center; gap: 14px; margin-top: 22px; padding: 12px 18px; border: 1px solid rgba(201, 150, 45, .45); border-left: 3px solid #b5451b; border-radius: 14px; background: linear-gradient(90deg, rgba(74, 13, 24, .45), rgba(5, 5, 5, .25)); color: #f5f5f5; text-decoration: none; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .theme-halloween .hw-hero-promo:hover { border-color: rgba(255, 92, 92, .8); box-shadow: 0 0 26px rgba(181, 23, 23, .45); transform: translateY(-2px); color: #fff; } .theme-halloween .hw-hero-promo img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(255, 90, 60, .6)); } .theme-halloween .hw-hero-promo .hw-promo-kicker { display: block; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: #ffb9a3; } .theme-halloween .hw-hero-promo .hw-promo-title { display: block; font-family: 'Creepster', 'Segoe UI', sans-serif; font-size: 1.15rem; color: #ff7a5c; } .theme-halloween .hw-hero-promo .hw-promo-cta { font-size: .74rem; color: var(--gold-soft, #f1c15b); } /* Botones del hero: solo hover estacional, sin tocar su comportamiento. */ .theme-halloween .hero .btn-gold:hover { box-shadow: 0 0 22px rgba(255, 120, 60, .55); } .theme-halloween .hero .btn-outline-gold:hover { border-color: #ff7a5c; color: #ffb9a3; box-shadow: 0 0 18px rgba(181, 23, 23, .45); } /* ========================================================================== 2. Enlace Haunted House del menú - glow y pulso discretos ========================================================================== El estilo base y el hover ya existen en la vista: aquí solo se añade brillo permanente suave y un latido lento. No se cambia su URL ni su estructura. ========================================================================== */ .theme-halloween .nav-haunted-link { animation: hwHauntedBreath 3.4s ease-in-out infinite; } .theme-halloween .nav-haunted-link .nav-haunted-icon { filter: drop-shadow(0 0 8px rgba(255, 90, 60, .85)); } @keyframes hwHauntedBreath { 0%, 100% { text-shadow: 0 0 6px rgba(255, 80, 80, .45); } 50% { text-shadow: 0 0 14px rgba(255, 80, 80, .9), 0 0 28px rgba(180, 0, 0, .5); } } /* ========================================================================== 3. Banner OCTOBER AT DUBAI (solo con Halloween activo) ========================================================================== */ .theme-halloween .hw-banner { position: relative; overflow: hidden; border: 1px solid rgba(201, 150, 45, .45); border-radius: 26px; padding: 44px 38px; text-align: center; background: radial-gradient(90% 120% at 50% 0%, rgba(122, 16, 16, .45), transparent 65%), linear-gradient(135deg, #0a0505, #17070b 55%, #050505); box-shadow: 0 0 40px rgba(122, 16, 16, .25), inset 0 0 60px rgba(0, 0, 0, .6); } .theme-halloween .hw-banner::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -60px; height: 160px; pointer-events: none; background: linear-gradient(0deg, rgba(215, 215, 225, .10), transparent); filter: blur(20px); } .theme-halloween .hw-banner-badge { width: 86px; height: 86px; object-fit: contain; margin-bottom: 12px; filter: drop-shadow(0 0 16px rgba(255, 90, 60, .55)); animation: hwFloat 5s ease-in-out infinite; } @keyframes hwFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .theme-halloween .hw-banner-kicker { font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: #ffb9a3; } .theme-halloween .hw-banner h2 { font-family: 'Creepster', 'Segoe UI', sans-serif; font-size: clamp(1.9rem, 4vw, 3rem); margin: 10px 0 14px; color: #fff; text-shadow: 0 0 20px rgba(255, 90, 60, .35); } .theme-halloween .hw-banner p { max-width: 620px; margin: 0 auto 10px; color: #d8d3d3; } .theme-halloween .hw-banner-meta { margin: 0 auto 22px; color: var(--gold-soft, #f1c15b); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; } .theme-halloween .hw-banner .btn { position: relative; z-index: 2; } /* ========================================================================== 4. Tarjetas, eventos, menú y souvenirs - solo borde/hover/glow ========================================================================== IMPORTANTE: nunca se aplica filtro de color sobre las fotos de comida. Solo se decoran bordes, sombras y títulos. ========================================================================== */ .theme-halloween .lux-card { transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; } .theme-halloween .lux-card:hover { border-color: rgba(181, 23, 23, .6); box-shadow: 0 14px 40px rgba(122, 16, 16, .35); transform: translateY(-4px); } .theme-halloween .lux-card:hover .icon-box { color: #ff7a5c; box-shadow: 0 0 20px rgba(255, 90, 60, .4); } /* Banner grande de Dubai Experience: luz roja muy tenue + niebla inferior. La imagen se conserva; solo se superponen capas. */ .theme-halloween .experience-banner { position: relative; } .theme-halloween .experience-banner::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 60% at 90% 10%, rgba(122, 16, 16, .22), transparent 70%), linear-gradient(0deg, rgba(215, 215, 225, .07), transparent 45%); border-radius: inherit; } .theme-halloween .experience-banner .content { z-index: 2; } /* Eventos: borde rojizo y glow al hover; la imagen de cada evento intacta. */ .theme-halloween .event-card { border-color: rgba(181, 23, 23, .35); transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; } .theme-halloween .event-card:hover { border-color: rgba(255, 92, 92, .65); box-shadow: 0 16px 44px rgba(122, 16, 16, .4); transform: translateY(-4px); } .theme-halloween .event-card .event-date { color: #ff9c7a; } /* Menú: SOLO borde, título y hover. Sin filtros sobre la comida. */ .theme-halloween .menu-item { border-color: rgba(181, 23, 23, .32); transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; } .theme-halloween .menu-item:hover { border-color: rgba(255, 92, 92, .6); box-shadow: 0 14px 38px rgba(122, 16, 16, .38); transform: translateY(-3px); } .theme-halloween .menu-item h4 { text-shadow: 0 2px 12px rgba(0, 0, 0, .85); } /* Bloque promocional bajo el menú / souvenirs (solo texto, sin URL falsa). */ .theme-halloween .hw-note { margin-top: 26px; padding: 16px 20px; border: 1px dashed rgba(201, 150, 45, .45); border-radius: 14px; text-align: center; background: linear-gradient(90deg, rgba(74, 13, 24, .28), rgba(5, 5, 5, .2)); } .theme-halloween .hw-note strong { display: block; font-family: 'Creepster', 'Segoe UI', sans-serif; font-size: 1.15rem; letter-spacing: .06em; color: #ff7a5c; } .theme-halloween .hw-note span { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft, #f1c15b); } /* Souvenirs: mismo tratamiento de borde/hover. */ .theme-halloween .souvenir-card:hover, .theme-halloween #souvenirs .card:hover { border-color: rgba(255, 92, 92, .55); box-shadow: 0 14px 38px rgba(122, 16, 16, .35); } /* ========================================================================== 5. Reservaciones - solo el contenedor exterior ========================================================================== No se toca ningún input, select, name, id, validación ni endpoint. ========================================================================== */ .theme-halloween #reservas { position: relative; } .theme-halloween #reservas::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 50% at 50% 0%, rgba(122, 16, 16, .16), transparent 70%); } .theme-halloween #reservas .container { position: relative; z-index: 2; } .theme-halloween #reservas form, .theme-halloween #reservas .card, .theme-halloween #reservas .reserve-box { border-color: rgba(181, 23, 23, .4) !important; box-shadow: 0 0 34px rgba(122, 16, 16, .22); } /* ========================================================================== 6. Suscripción y footer - toque mínimo ========================================================================== */ .theme-halloween .subscribe { position: relative; } .theme-halloween .subscribe::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(74, 13, 24, .30), transparent 60%); } .theme-halloween .subscribe .container { position: relative; z-index: 2; } .theme-halloween footer { border-top: 1px solid rgba(181, 23, 23, .3); } /* ========================================================================== 7. Decoración global: niebla al pie, destello y camello ========================================================================== Todo con pointer-events: none para no bloquear ningún clic. ========================================================================== */ .theme-halloween .hw-page-fog { position: fixed; left: 0; right: 0; bottom: 0; height: 130px; pointer-events: none; z-index: 20; background: linear-gradient(0deg, rgba(210, 210, 220, .085), transparent); filter: blur(18px); animation: hwFogDrift 32s ease-in-out infinite alternate; } /* Destello ambiental. La opacidad la controla halloween.js añadiendo .is-on cada 8-15 s durante menos de 500 ms. */ .theme-halloween .hw-flash { position: fixed; inset: 0; pointer-events: none; z-index: 21; opacity: 0; background: radial-gradient(70% 50% at 50% 0%, rgba(255, 70, 40, .16), transparent 70%); transition: opacity .18s ease-out; } .theme-halloween .hw-flash.is-on { opacity: 1; } /* Camello vampiro: easter egg. Usa el PNG transparente que ya existe en el proyecto (wwwroot/images/haunted/camel-vampire.png). Oculto por defecto; lo lanza halloween.js de forma esporádica añadiendo .is-walking. */ .theme-halloween .hw-camel { position: fixed; bottom: 12px; left: 0; width: 190px; height: auto; opacity: 0; pointer-events: none; z-index: 22; transform: translateX(-260px); filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .7)) drop-shadow(0 0 14px rgba(255, 90, 60, .28)); } .theme-halloween .hw-camel.is-walking { animation: hwCamelWalk 26s linear 1 both; } /* Cruza la pantalla despacio y se va. El leve balanceo sugiere el paso. */ @keyframes hwCamelWalk { 0% { transform: translateX(-260px) translateY(0); opacity: 0; } 6% { opacity: .92; } 25% { transform: translateX(24vw) translateY(-5px); } 50% { transform: translateX(48vw) translateY(0); } 75% { transform: translateX(72vw) translateY(-5px); } 92% { opacity: .92; } 100% { transform: translateX(calc(100vw + 260px)) translateY(0); opacity: 0; } } /* Aly: segundo easter egg. Reutiliza el PNG que ya usa Haunted House (wwwroot/images/haunted/ali-vampire-transparent.png) y su mismo tratamiento visual: object-fit contain y el halo frío de .hero .ghost1. Diferencias respecto de Haunted House, que son las mínimas necesarias: - Allí es una animación CSS infinita dentro del hero; aquí es un pase único que dispara halloween.js añadiendo .is-floating, para que el coordinador pueda impedir que coincida con el camello. - Ocupa una banda distinta de la pantalla: el camello camina abajo de izquierda a derecha, Aly cruza arriba de derecha a izquierda. Así se leen como dos sucesos distintos y nunca comparten espacio. */ .theme-halloween .hw-aly { position: fixed; top: 18%; right: 0; width: 92px; height: auto; opacity: 0; pointer-events: none; z-index: 22; object-fit: contain; transform: translateX(200px); filter: drop-shadow(0 0 10px rgba(200, 255, 255, .5)) drop-shadow(0 0 18px rgba(120, 190, 255, .25)); } .theme-halloween .hw-aly.is-floating { animation: hwAlyFlight 18s linear 1 both, hwAlySway 3s ease-in-out infinite; } /* Deriva de derecha a izquierda, más alto que el camello y con balanceo. */ @keyframes hwAlyFlight { 0% { transform: translateX(200px) translateY(0) rotate(6deg); opacity: 0; } 10% { opacity: .72; } 35% { transform: translateX(-28vw) translateY(-26px) rotate(-7deg); } 65% { transform: translateX(-58vw) translateY(18px) rotate(6deg); } 90% { opacity: .5; } 100% { transform: translateX(calc(-100vw - 200px)) translateY(-10px) rotate(-5deg); opacity: 0; } } /* El vaivén va por margin-top para no pisar el transform del recorrido: es el mismo recurso que usa heroGhostSway en Haunted House. */ @keyframes hwAlySway { 0%, 100% { margin-top: 0; } 50% { margin-top: -15px; } } @media (max-width: 768px) { .theme-halloween .hw-camel { width: 130px; bottom: 8px; } .theme-halloween .hw-aly { width: 58px; top: 14%; } .theme-halloween .hw-page-fog { height: 90px; } } /* ========================================================================== 8. Accesibilidad: respetar la reducción de movimiento ========================================================================== Se apagan animaciones y el camello; se conserva la ambientación estática. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .theme-halloween .hero .hw-fog, .theme-halloween .hw-page-fog, .theme-halloween .hw-eyebrow .hw-dot, .theme-halloween .nav-haunted-link, .theme-halloween .hw-banner-badge, .theme-halloween .hw-camel.is-walking, .theme-halloween .hw-aly.is-floating { animation: none !important; } .theme-halloween .hw-camel, .theme-halloween .hw-aly, .theme-halloween .hw-flash { display: none !important; } }