/* ============================================================================ NEXO BARBER — TEMPORADAS Una capa encima del tema, no un tema aparte. La barbería conserva su identidad (fondo, tipografía, radios, sombras) y la temporada solo le cambia el acento y le pone adornos quietos. Se activa con data-nx-temp="navidad|carnaval|halloween|neon" en . Sin ese atributo, este archivo no hace absolutamente nada. Dos reglas que este archivo respeta: 1. ALTO CONTRASTE NO SE TOCA. Es el tema de accesibilidad; cambiarle el acento por uno festivo rompe justo lo que lo hace útil. Solo recibe los adornos, que son decoración y no llevan información. 2. NADA SE MUEVE. Ni nieve, ni confeti cayendo, ni luces parpadeando. En un teléfono viejo eso se traba y el cliente abandona la reserva. Todos los contrastes de acento están verificados AA (>= 4.5:1). ========================================================================= */ /* ===================== NAVIDAD ===================== */ [data-nx-temp="navidad"] { --temp-ic: "🎄"; } [data-nx-temp="navidad"][data-nx-mode="dark"]:not([data-nx-theme="alto"]) { --accent:#C62330; --accent-hover:#A81C27; --accent-text:#F2707A; --accent-on:#FFFFFF; --accent-rgb: 198 35 48; --accent-2:#35A96A; --focus:#F2707A; --sh-accent: 0 0 0 1px rgb(var(--accent-rgb)/.30), 0 8px 24px rgb(var(--accent-rgb)/.22); } [data-nx-temp="navidad"][data-nx-mode="dark"] { --temp-1:#C62330; --temp-2:#1E8A4E; --temp-3:#D4A24C; } [data-nx-temp="navidad"][data-nx-mode="light"]:not([data-nx-theme="alto"]) { --accent:#A81622; --accent-hover:#8C111C; --accent-text:#A81622; --accent-on:#FFFFFF; --accent-rgb: 168 22 34; --accent-2:#0F6B3C; --focus:#A81622; --sh-accent: 0 0 0 1px rgb(var(--accent-rgb)/.30), 0 8px 24px rgb(var(--accent-rgb)/.22); } [data-nx-temp="navidad"][data-nx-mode="light"] { --temp-1:#A81622; --temp-2:#0F6B3C; --temp-3:#9A7420; } /* ===================== CARNAVAL ===================== */ [data-nx-temp="carnaval"] { --temp-ic: "🎉"; } [data-nx-temp="carnaval"][data-nx-mode="dark"]:not([data-nx-theme="alto"]) { --accent:#C2186F; --accent-hover:#A31059; --accent-text:#F274B4; --accent-on:#FFFFFF; --accent-rgb: 194 24 111; --accent-2:#12B5CB; --focus:#F274B4; --sh-accent: 0 0 0 1px rgb(var(--accent-rgb)/.30), 0 8px 24px rgb(var(--accent-rgb)/.22); } [data-nx-temp="carnaval"][data-nx-mode="dark"] { --temp-1:#E0348B; --temp-2:#F2C230; --temp-3:#12B5CB; } [data-nx-temp="carnaval"][data-nx-mode="light"]:not([data-nx-theme="alto"]) { --accent:#A8125E; --accent-hover:#8A0D4C; --accent-text:#A8125E; --accent-on:#FFFFFF; --accent-rgb: 168 18 94; --accent-2:#0A7C8C; --focus:#A8125E; --sh-accent: 0 0 0 1px rgb(var(--accent-rgb)/.30), 0 8px 24px rgb(var(--accent-rgb)/.22); } [data-nx-temp="carnaval"][data-nx-mode="light"] { --temp-1:#A8125E; --temp-2:#B07A00; --temp-3:#0A7C8C; } /* ===================== HALLOWEEN ===================== */ [data-nx-temp="halloween"] { --temp-ic: "🎃"; } [data-nx-temp="halloween"][data-nx-mode="dark"]:not([data-nx-theme="alto"]) { --accent:#F0821F; --accent-hover:#D46E12; --accent-text:#F5A153; --accent-on:#241004; --accent-rgb: 240 130 31; --accent-2:#9B6BF2; --focus:#F5A153; --sh-accent: 0 0 0 1px rgb(var(--accent-rgb)/.30), 0 8px 24px rgb(var(--accent-rgb)/.22); } [data-nx-temp="halloween"][data-nx-mode="dark"] { --temp-1:#F0821F; --temp-2:#6D28D9; --temp-3:#2A2A32; } [data-nx-temp="halloween"][data-nx-mode="light"]:not([data-nx-theme="alto"]) { --accent:#A34D07; --accent-hover:#8A3F04; --accent-text:#A34D07; --accent-on:#FFFFFF; --accent-rgb: 163 77 7; --accent-2:#5B21B6; --focus:#A34D07; --sh-accent: 0 0 0 1px rgb(var(--accent-rgb)/.30), 0 8px 24px rgb(var(--accent-rgb)/.22); } [data-nx-temp="halloween"][data-nx-mode="light"] { --temp-1:#A34D07; --temp-2:#5B21B6; --temp-3:#3F3F46; } /* ===================== NEÓN ===================== */ [data-nx-temp="neon"] { --temp-ic: "💖"; } [data-nx-temp="neon"][data-nx-mode="dark"]:not([data-nx-theme="alto"]) { --accent:#FF3D8F; --accent-hover:#E82A7B; --accent-text:#FF7AB5; --accent-on:#1A0410; --accent-rgb: 255 61 143; --accent-2:#22D3EE; --focus:#FF7AB5; --sh-accent: 0 0 0 1px rgb(var(--accent-rgb)/.30), 0 8px 24px rgb(var(--accent-rgb)/.22); } [data-nx-temp="neon"][data-nx-mode="dark"] { --temp-1:#FF3D8F; --temp-2:#22D3EE; --temp-3:#A855F7; } [data-nx-temp="neon"][data-nx-mode="light"]:not([data-nx-theme="alto"]) { --accent:#BE1259; --accent-hover:#9E0C49; --accent-text:#BE1259; --accent-on:#FFFFFF; --accent-rgb: 190 18 89; --accent-2:#0E7490; --focus:#BE1259; --sh-accent: 0 0 0 1px rgb(var(--accent-rgb)/.30), 0 8px 24px rgb(var(--accent-rgb)/.22); } [data-nx-temp="neon"][data-nx-mode="light"] { --temp-1:#BE1259; --temp-2:#0E7490; --temp-3:#7E22CE; } /* ============================================================================ ADORNOS — todos quietos, todos con pseudo-elementos, cero JavaScript. ========================================================================= */ /* ---------- 1. La guirnalda sobre la portada ---------- Una cinta de 8px cruzando el borde de arriba. Es lo primero que ve el cliente y basta para que diga «se pusieron navideños». */ [data-nx-temp] .hero { position: relative; } [data-nx-temp] .hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; z-index: 3; background: repeating-linear-gradient(90deg, var(--temp-1) 0 14px, var(--temp-2) 14px 28px, var(--temp-3) 28px 42px); } /* Alto contraste: la cinta se separa del contenido con un borde propio, porque ahí no hay degradados que la ayuden a leerse. */ [data-nx-temp][data-nx-theme="alto"] .hero::before { height: 10px; border-bottom: 2px solid var(--text); } /* Neo tiene borde duro; la cinta lo acompaña. */ [data-nx-temp][data-nx-theme="neo"] .hero::before { height: 10px; border-bottom: 2px solid var(--text); } /* ---------- 2. El logo con su distintivo ---------- El emoji de la temporada en la esquina del logo de la barbería. Nunca tapa la inicial: se sienta fuera, abajo a la derecha. */ [data-nx-temp] .hero .logo { position: relative; overflow: visible; } [data-nx-temp] .hero .logo::after { content: var(--temp-ic, ""); position: absolute; right: -8px; bottom: -6px; font-size: 20px; line-height: 1; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .45)); pointer-events: none; } /* ---------- 3. La franja promocional ---------- Un filo de temporada a la izquierda. Discreto: la franja ya es publicidad, no hace falta gritar dos veces. */ [data-nx-temp] .strip { border-left: 4px solid var(--temp-1); padding-left: calc(var(--sp-4) - 2px); } [data-nx-temp] .strip .si::after { content: var(--temp-ic, ""); margin-left: 3px; font-size: 13px; } /* ---------- 4. Las franjas de la portada ---------- Ya usan --accent y --accent-2, así que se tiñen solas. Solo les subimos un punto la presencia para que la temporada se note en la foto. */ [data-nx-temp] .hero .cover::before { opacity: .22; } [data-nx-temp][data-nx-theme="neo"] .hero .cover::before { opacity: .34; } /* ---------- 5. Neón: el brillo ---------- Es la única que pide luz, porque es lo que la define. Sigue siendo estática: un resplandor fijo, no un parpadeo. */ [data-nx-temp="neon"][data-nx-mode="dark"]:not([data-nx-theme="alto"]) .hero .logo { box-shadow: 0 0 0 1px rgb(var(--accent-rgb)/.5), 0 0 22px rgb(var(--accent-rgb)/.45); } [data-nx-temp="neon"][data-nx-mode="dark"]:not([data-nx-theme="alto"]) .btn-primary { box-shadow: 0 0 18px rgb(var(--accent-rgb)/.40); } /* ---------- 6. Respeto por quien pidió menos movimiento ---------- Aquí no hay animación que apagar, pero si algún día se agrega, este bloque ya está puesto. */ @media (prefers-reduced-motion: reduce) { [data-nx-temp] * { animation: none !important; transition: none !important; } }