/* ========================================================================== PIQUERO TEATRO - THEATRICAL SPOTLIGHT NAVIGATION (Efecto Focos de Teatro) Solo activo en el menú superior original (sin scroll). Al hacer scroll, el menú vuelve al comportamiento nativo de la plantilla. ========================================================================== */ /* Variables de Iluminación Teatral */ :root { --spotlight-beam-start: rgba(255, 250, 220, 0.45); --spotlight-beam-mid: rgba(255, 225, 135, 0.20); --spotlight-beam-end: rgba(255, 210, 90, 0.0); --spotlight-glow-core: rgba(255, 248, 225, 1); --spotlight-glow-warm: rgba(255, 215, 110, 0.9); --spotlight-glow-ambient: rgba(235, 160, 45, 0.55); --spotlight-floor-core: rgba(255, 235, 160, 0.95); --spotlight-floor-mid: rgba(255, 195, 75, 0.5); --theatrical-gold: #e8bd6c; --theatrical-bg-velvet: rgba(16, 11, 22, 0.97); } /* -------------------------------------------------------------------------- 1. ESTRUCTURA EN UNA SOLA LÍNEA (Menú superior no stuck) -------------------------------------------------------------------------- */ .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-navbar-main, .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-navbar-main-element, .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-navbar-nav-wrap, .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-navbar-nav { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; white-space: nowrap !important; } .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-navbar-main-element { justify-content: flex-end !important; gap: 15px; } .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-nav-item { position: relative !important; display: inline-flex !important; align-items: center !important; padding: 8px 4px !important; margin: 0 4px !important; white-space: nowrap !important; } .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-nav-item + .rd-nav-item { margin-left: 8px !important; } /* -------------------------------------------------------------------------- 2. EFECTO FOCO CENITAL (Haz de luz cónico) - Solo estado superior -------------------------------------------------------------------------- */ .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-nav-item::before { content: ''; position: absolute; top: 0px !important; left: 50%; width: 120%; height: 100% !important; transform: translateX(-50%) scaleY(0.4); transform-origin: top center; background: linear-gradient( 180deg, var(--spotlight-beam-start) 0%, var(--spotlight-beam-mid) 45%, var(--spotlight-beam-end) 100% ); clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%); -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%); opacity: 0; pointer-events: none; z-index: 1; filter: blur(1px); transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); } /* -------------------------------------------------------------------------- 3. EFECTO ELIPSE EN EL SUELO DEL ESCENARIO - Solo estado superior -------------------------------------------------------------------------- */ .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-nav-item::after { content: ''; position: absolute; bottom: 0px !important; left: 50%; width: 90%; height: 7px; transform: translateX(-50%) scaleX(0.3); background: radial-gradient( ellipse at center, var(--spotlight-floor-core) 0%, var(--spotlight-floor-mid) 45%, rgba(240, 160, 45, 0) 80% ); border-radius: 50%; opacity: 0; pointer-events: none; z-index: 1; filter: blur(1px); transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); } /* -------------------------------------------------------------------------- 4. ESTADO ACTIVO POR DEFECTO (Cuando NO se hace hover en ningún item) -------------------------------------------------------------------------- */ .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-navbar-nav:not(:hover) .rd-nav-item.active::before { opacity: 1 !important; transform: translateX(-50%) scaleY(1) !important; } .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-navbar-nav:not(:hover) .rd-nav-item.active::after { opacity: 0.9 !important; transform: translateX(-50%) scaleX(1) !important; } .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-navbar-nav:not(:hover) .rd-nav-item.active .rd-nav-link { color: #FFFDF0 !important; text-shadow: 0 0 8px var(--spotlight-glow-core), 0 0 16px var(--spotlight-glow-warm), 0 0 28px var(--spotlight-glow-ambient) !important; } /* -------------------------------------------------------------------------- 5. HOVER DINÁMICO (El foco sigue al cursor y apaga el activo) -------------------------------------------------------------------------- */ .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-nav-item:hover::before, .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-nav-item.opened::before { opacity: 1 !important; transform: translateX(-50%) scaleY(1) !important; } .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-nav-item:hover::after, .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-nav-item.opened::after { opacity: 0.95 !important; transform: translateX(-50%) scaleX(1) !important; } .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-nav-item:hover > .rd-nav-link, .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-nav-item.opened > .rd-nav-link { color: #FFFDF0 !important; text-shadow: 0 0 8px var(--spotlight-glow-core), 0 0 18px var(--spotlight-glow-warm), 0 0 30px var(--spotlight-glow-ambient) !important; transform: translateY(-1px); } /* Al pasar el ratón por el menú: el activo no seleccionado se apaga */ .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-navbar-nav:hover .rd-nav-item.active:not(:hover)::before, .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-navbar-nav:hover .rd-nav-item.active:not(:hover)::after { opacity: 0 !important; transform: translateX(-50%) scale(0.3) !important; } .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-navbar-nav:hover .rd-nav-item.active:not(:hover) .rd-nav-link { color: #FFFFFF !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important; transform: none !important; } /* -------------------------------------------------------------------------- 6. ENLACES DEL MENÚ - Solo estado superior -------------------------------------------------------------------------- */ .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-nav-link { position: relative; z-index: 2; display: inline-block; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.03em !important; padding: 4px 6px !important; white-space: nowrap !important; color: #FFFFFF !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); transition: all 0.25s ease; } .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-nav-item > .rd-navbar-submenu-toggle { color: var(--theatrical-gold) !important; position: relative; z-index: 2; margin-left: 3px !important; transition: all 0.3s ease; } .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-nav-item:hover > .rd-navbar-submenu-toggle, .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-nav-item.opened > .rd-navbar-submenu-toggle { color: #FFFDF0 !important; text-shadow: 0 0 10px var(--spotlight-glow-warm); } /* -------------------------------------------------------------------------- 7. MENÚ DESPLEGABLE HACIA ABAJO - Solo estado superior -------------------------------------------------------------------------- */ .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-menu.rd-navbar-dropdown { position: absolute !important; top: 100% !important; left: 0 !important; right: auto !important; margin-top: 6px !important; background: var(--theatrical-bg-velvet) !important; border: 1px solid rgba(232, 189, 108, 0.38) !important; border-radius: 6px !important; padding: 8px 0 !important; min-width: 250px !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(232, 189, 108, 0.15) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 9999 !important; } .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-menu.rd-navbar-dropdown::before { content: ''; position: absolute; top: -10px; left: 0; width: 100%; height: 10px; background: transparent; display: block; } .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-dropdown-link, .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-navbar-dropdown li > a { display: flex !important; align-items: center; font-family: "Source Sans Pro", sans-serif; font-size: 14px !important; font-weight: 400; letter-spacing: 0.02em; color: #E6DFD5 !important; padding: 9px 20px !important; position: relative; transition: all 0.25s ease !important; background: transparent !important; border-left: 3px solid transparent; white-space: nowrap !important; } .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-dropdown-link:hover, .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-navbar-dropdown li > a:hover, .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-dropdown-item:hover > .rd-dropdown-link { color: #FFFDF5 !important; background: linear-gradient( 90deg, rgba(232, 189, 108, 0.24) 0%, rgba(232, 189, 108, 0.06) 75%, transparent 100% ) !important; border-left: 3px solid var(--theatrical-gold) !important; padding-left: 26px !important; text-shadow: 0 0 10px rgba(255, 235, 175, 0.9), 0 0 20px rgba(232, 189, 108, 0.6) !important; } .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-dropdown-link::before { content: '✦'; font-size: 10px; color: var(--theatrical-gold); margin-right: 10px; opacity: 0; transform: scale(0.5); transition: all 0.25s ease; position: absolute; left: 12px; } .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-dropdown-link:hover::before, .rd-navbar-static:not(.rd-navbar--is-stuck):not(.rd-navbar--is-clone) .rd-dropdown-item:hover > .rd-dropdown-link::before { opacity: 1; transform: scale(1); } /* -------------------------------------------------------------------------- 8. DESACTIVACIÓN TOTAL DE LOS FOCOS AL HACER SCROLL (STICKY / STUCK) Garantiza que style.css controle 100% el menú blanco nativo sin interferencias. -------------------------------------------------------------------------- */ .rd-navbar-static.rd-navbar--is-stuck .rd-nav-item::before, .rd-navbar-static.rd-navbar--is-stuck .rd-nav-item::after, .rd-navbar-static.rd-navbar--is-clone .rd-nav-item::before, .rd-navbar-static.rd-navbar--is-clone .rd-nav-item::after { display: none !important; content: none !important; opacity: 0 !important; } /* -------------------------------------------------------------------------- 9. MENÚ MÓVIL (Fixed Layout) -------------------------------------------------------------------------- */ .rd-navbar-fixed .rd-navbar-nav-wrap { background: #150E1C !important; border-right: 1px solid rgba(232, 189, 108, 0.25); } .rd-navbar-fixed .rd-nav-link { color: #EDE4D8 !important; font-weight: 500; } .rd-navbar-fixed .rd-nav-item:hover .rd-nav-link, .rd-navbar-fixed .rd-nav-item.active .rd-nav-link { color: #FFFDF0 !important; background: rgba(232, 189, 108, 0.15) !important; text-shadow: 0 0 8px var(--spotlight-glow-warm); } .rd-navbar-fixed .rd-navbar-dropdown { background: rgba(8, 5, 12, 0.8) !important; } .rd-navbar-fixed .rd-dropdown-link { color: #D6C8B8 !important; } .rd-navbar-fixed .rd-dropdown-link:hover { color: #FFE699 !important; }