/* =========================== HERO / BANNER =========================== */ .nox-hero { position: relative; height: 100vh; min-height: 100vh; background: url("/wp-content/uploads/images/nox-hero-bg.jpeg") center / cover no-repeat; display: flex; align-items: center; justify-content: center; } .nox-hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* Para que el video cubra todo el área */ opacity: 0.3; /* Ajustar opacidad para que no destaque mucho */ z-index: 0; } .nox-hero-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(10,10,10,0.1), #0a0a0a ); z-index: 1; /* Overlay encima del video */ } .nox-hero-title { position: relative; font-size: clamp(4rem, 12vw, 9rem); letter-spacing: 0.35em; color: #ff2bd6; text-shadow: 0 0 20px rgba(255,43,214,0.8), 0 0 60px rgba(177,0,255,0.6); animation: heartbeat-glow 1.2s infinite ease-in-out; transform-origin: center; text-align: center; margin: 0; z-index: 2; } /* Keyframes para latido + glow */ @keyframes heartbeat-glow { 0%, 100% { transform: translateY(-7vh) scale(1); text-shadow: 0 0 20px rgba(255,43,214,0.8), 0 0 60px rgba(177,0,255,0.6); } 50% { transform: translateY(-7vh) scale(1.1); text-shadow: 0 0 40px rgba(255,43,214,1), 0 0 80px rgba(177,0,255,0.8); } } .nox-hero-subtitle { position: absolute; top: calc(50% + 4rem); left: 50%; transform: translateX(-50%); font-size: clamp(1rem, 2vw, 1.7rem); color: rgba(255,255,255,0.8); text-shadow: 0 0 10px rgba(0,0,0,0.5); text-align: center; z-index: 2; } .nox-hero-credit { position: absolute; /* calc se usa cuando querés combinar porcentajes y unidades fijas en un mismo valor */ /* 50% → se posiciona exactamente en la mitad del contenedor padre. */ /* 11rem → agrega un desplazamiento extra hacia abajo (porque top se mide desde el borde superior). */ top: calc(50% + 9.5rem); /* ← más grande = más abajo */ left: 50%; transform: translateX(-50%); /* rem = “root em”: el tamaño se calcula desde el font-size del . Sirve para que el texto escale correctamente en responsive, zoom del navegador y configuraciones de accesibilidad, sin romper el layout como puede pasar con px. */ /* Responsive significa que el diseño se adapta solo a distintos tamaños de pantalla y contextos, sin que el usuario tenga que hacer nada. */ font-size: 0.90rem; letter-spacing: 0.08em; color: rgba(255,255,255,0.45); text-align: center; z-index: 2; } /* =========================== MENU =========================== */ /* .nox-menu { display: flex; justify-content: center; gap: 3rem; padding: 2.5rem 1rem; background: #0a0a0a; } */ .nox-menu { position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: center; gap: 3rem; padding: 1.6rem 1rem; background: rgba(10,10,10,0.85); backdrop-filter: blur(6px); z-index: 10000; } .nox-hero { padding-top: 80px; /* ajustá según la altura real del menú */ z-index: 1; } .nox-menu a { color: #eaeaea; text-decoration: none; font-size: 0.95rem; font-weight: 400; letter-spacing: 0.22em; opacity: 0.75; transition: all 0.3s ease; } .nox-menu a:hover { opacity: 1; color: #ff2bd6; text-shadow: 0 0 8px #ff2bd6; } /* =========================== GALLERY =========================== */ .nox-gallery { padding: 5rem 6vw; position: relative; } /* Slides */ .gallery-item { position: relative; height: 420px; background-color: #0b0b0b; background-size: cover; background-position: center; background-repeat: no-repeat; /*border-radius: 14px; */ border: 2px solid rgba(255,43,214,0.25); box-shadow: 0 0 20px rgba(255,43,214,0.25), inset 0 0 30px rgba(0,0,0,0.9); transition: transform 0.5s ease, box-shadow 0.5s ease; overflow: hidden; } /* Hover DJ */ /* .gallery-item:hover { box-shadow: 0 0 35px rgba(255,43,214,0.55), 0 0 90px rgba(255,43,214,0.25); } */ /* Forzamos la altura del swiper */ /* porque sino swiper pisa la altura de los slides */ .swiper-slide.gallery-item { height: 420px !important; } /* ========================= NEON NAV BUTTONS ========================= */ /* .nox-nav { width: 54px; height: 54px; border-radius: 50%; background: rgba(10,10,10,0.9); border: 1px solid rgba(255,43,214,0.5); box-shadow: 0 0 25px rgba(255,43,214,0.6); } .nox-nav::after { font-size: 18px; color: #ff2bd6; text-shadow: 0 0 12px rgba(255,43,214,0.9); } .swiper-button-prev { left: 10px; } .swiper-button-next { right: 10px; } */ /* ========================= NOX MINIMAL NAV ========================= */ .nox-nav { width: 70px; height: 100%; top: 0; margin-top: 0; background: transparent; border: none; box-shadow: none; transition: background 0.3s ease; } /* Zona hover sutil */ .nox-nav:hover { background: linear-gradient( to right, rgba(0,0,0,0.55), rgba(0,0,0,0) ); } /* Flechas */ .nox-nav::after { font-size: 34px; color: rgba(255,255,255,0.85); text-shadow: none; transition: color 0.3s ease, text-shadow 0.3s ease; } /* Glow solo al hover */ .nox-nav:hover::after { color: #ff2bd6; text-shadow: 0 0 18px rgba(255,43,214,0.9); } /* Posicionamiento */ .swiper-button-prev { left: 0; } .swiper-button-next { right: 0; } /* =========================== SECTIONS =========================== */ .nox-section { padding: 4rem 6vw 1rem; background: #0a0a0a; color: #eaeaea; scroll-margin-top: 90px; } :target { scroll-margin-top: 90px; } .section-header { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-bottom: 3.5rem; } .section-header h2 { font-size: 1.6rem; letter-spacing: 0.35em; opacity: 0.9; } .section-line { width: 60px; height: 1px; background: linear-gradient(to right, transparent, #ff2bd6, transparent); box-shadow: 0 0 8px #ff2bd6; } h2 { color: #c84bff; letter-spacing: 0.25em; } /* ======================================= LISTEN - SPOTIFY MINIMAL EMBED ============================================= */ .spotify-embed-wrapper { max-width: 760px; margin: 0 auto; padding: 14px; border-radius: 18px; background: linear-gradient( 135deg, rgba(180, 0, 255, 0.35), rgba(255, 43, 214, 0.25) ); box-shadow: 0 0 25px rgba(255, 43, 214, 0.35), 0 0 60px rgba(180, 0, 255, 0.25), inset 0 0 45px rgba(0, 0, 0, 0.9); transition: box-shadow 0.4s ease, transform 0.4s ease; } .spotify-embed-wrapper:hover { /*transform: scale(1.005);*/ box-shadow: 0 0 45px rgba(255, 43, 214, 0.6), 0 0 90px rgba(180, 0, 255, 0.35); } .spotify-embed-wrapper iframe { border-radius: 12px; } /* #listen h2 { color: #c84bff; letter-spacing: 0.25em; } */ /* =========================== VIDEO =========================== */ .video-wrapper { max-width: 960px; /* tamaño razonable */ margin: 0 auto; /* centrado */ padding: 14px; border-radius: 20px; background: linear-gradient( 135deg, rgba(180, 0, 255, 0.35), rgba(255, 43, 214, 0.25) ); box-shadow: 0 0 25px rgba(255, 43, 214, 0.35), 0 0 60px rgba(180, 0, 255, 0.25), inset 0 0 45px rgba(0, 0, 0, 0.9); transition: transform 0.4s ease, box-shadow 0.4s ease; } .video-wrapper:hover { /*transform: scale(1.005);*/ box-shadow: 0 0 45px rgba(255, 43, 214, 0.6), 0 0 90px rgba(180, 0, 255, 0.35); } .nox-section-video { width: 100%; height: auto; aspect-ratio: 16 / 9; /* fuerza la proporción antes de cargar */ display: block; border-radius: 14px; background: #000; } /* =========================== FESTIVALS =========================== */ .festivals-grid { /* Este contenedor va a organizar a sus hijos en una grilla. */ /* En vez de apilar elementos uno debajo del otro, los ordena en filas y columnas. */ display: grid; /* Define cuantas columnas tiene la grilla y cómo se reparten. */ grid-template-columns: repeat(3, 1fr); gap: 3rem; max-width: 1200px; margin: 0 auto; } .festival-card { background: #0e0e0e; border-radius: 14px; /* Sirve para ocultar todo lo que se salga del contenedor. */ /* Sin overflow: hidden la imagen se sale por las esquinas y el borde redondeado no se respeta. */ /* Con overflow: hidden todo queda recortado dentro del radio. /* Es obligatorio cuando: hay imágenes, bordes redondeados o hover / escalados */ overflow: hidden; text-align: center; /* BORDE */ border: 1px solid rgba(180, 0, 255, 0.35); /* Define cómo se anima el cambio cuando pasa algo (hover, focus, etc.). */ transition: transform 0.4s ease, box-shadow 0.4s ease; } .festival-card:hover { border-color: rgba(255, 43, 214, 0.8); box-shadow: 0 20px 60px rgba(255,43,214,0.25), 0 0 40px rgba(180,0,255,0.35); } .festival-image img { width: 100%; height: 440px; object-fit: cover; display: block; } .festival-card h3 { margin: 1.6rem 1rem 0.8rem; font-size: 1.05rem; letter-spacing: 0.12em; text-transform: uppercase; } .festival-separator { width: 60px; height: 1px; margin: 0.8rem auto 1rem; background: linear-gradient(to right, transparent, #ff2bd6, transparent); } .festival-meta { font-size: 0.85rem; opacity: 0.75; } .festival-role { margin-top: 0.6rem; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; } /* Responsive */ @media (max-width: 900px) { .festivals-grid { grid-template-columns: 1fr; } .festival-image img { height: 280px; } } /* ========================= ABOUT ========================= */ .nox-about-section { padding-bottom: 40px; } .nox-about-card { max-width: 1100px; margin: 40px auto 0; padding: 60px; display: flex; gap: 60px; background: #111; border-radius: 26px; position: relative; box-shadow: 0 0 40px rgba(180, 0, 255, 0.25), 0 0 120px rgba(180, 0, 255, 0.15); } /* Neon border */ .nox-about-card::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: 26px; background: linear-gradient(135deg, #ff00cc, #7a00ff); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* Image */ .nox-about-image { flex: 0 0 40%; } .nox-about-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; } /* Text */ .nox-about-content { flex: 1; color: #cfcfcf; font-size: 16px; line-height: 1.7; } .nox-about-content p { margin-bottom: 22px; } .nox-about-tags { margin-top: 30px; color: #b96cff; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; } /* Responsive */ @media (max-width: 900px) { .nox-about-card { flex-direction: column; padding: 40px; } .nox-about-image { width: 100%; height: 320px; } } /* ========================= MINIMAL FOOTER ========================= */ .nox-footer-minimal { /* espacio interno, separa el texto del borde */ padding: 40px 20px; background: #0b0b0f; text-align: center; } .nox-footer-minimal p { margin: 0; color: #666; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; } .nox-footer-credit { margin-top: 6px; color: #555; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; } /* ========================= CUSTOM SCROLLBAR ========================= */ ::-webkit-scrollbar { width: 14px; } ::-webkit-scrollbar-track { background: #0a0a0a; } ::-webkit-scrollbar-thumb { background: #a200ff; border-radius: 12px; } ::-webkit-scrollbar-thumb:hover { background: #d100ff; } /* ========================= FIREFOX ONLY SCROLLBAR ========================= */ @supports (-moz-appearance: none) { html { scrollbar-width: auto; /* más ancha que thin */ scrollbar-color: #a200ff #0a0a0a; } } /* ========================= CURSOR OVERRIDES ========================= */ body, body * { cursor: default; } /* Cursor interactivo solo en el menú */ .nox-menu a { cursor: pointer; } /* Flechas de navegación de la galería */ .nox-nav { cursor: pointer; } html, body { /* Saca el margen blanco que los navegadores meten por defecto alrededor de la página. */ margin: 0; /* Evita rellenos fantasma que puedan empujar el contenido. */ padding: 0; /* Asegura que el body no sea más ancho que la pantalla (esto evita desbordes raros). */ width: 100%; /* mata el scroll horizontal cuando algo se pasa 1px. */ overflow-x: hidden; } body, button, input, textarea { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }