/* ========================= SAN VALENTÍN (modo AMOR INDECENTE) Activa con: body.sanvalentin ========================= */ body.sanvalentin { /* Paleta más viva */ --vday-hotpink: #ff2ea6; --vday-rose: #ff3d5a; --vday-red: #ff1744; --vday-violet: #b026ff; --vday-candy: #ff66cc; --vday-glow: 0 0 18px rgba(255, 46, 166, .55); --vday-glow-strong: 0 0 28px rgba(255, 46, 166, .65); /* Halo romántico sutil (no invade) */ background-image: radial-gradient(circle at 15% 15%, rgba(255, 46, 166, .12), transparent 55%), radial-gradient(circle at 85% 25%, rgba(255, 23, 68, .10), transparent 58%), radial-gradient(circle at 50% 90%, rgba(176, 38, 255, .08), transparent 62%); background-attachment: fixed; } /* ========================= GUÍRNALDA SUPERIOR (header) ========================= */ body.sanvalentin header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: linear-gradient(90deg, rgba(255, 46, 166, 1), rgba(255, 23, 68, .98), rgba(176, 38, 255, .92), rgba(255, 46, 166, 1)); opacity: .95; filter: blur(.25px); box-shadow: 0 0 26px rgba(255, 46, 166, .30); pointer-events: none; } /* ========================= CARDS: brillo + hover ========================= */ body.sanvalentin article, body.sanvalentin .card, body.sanvalentin .panel, body.sanvalentin .box { box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 18px 50px rgba(0, 0, 0, .60); } body.sanvalentin article:hover, body.sanvalentin .card:hover, body.sanvalentin .panel:hover, body.sanvalentin .box:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 22px 70px rgba(0, 0, 0, .72), var(--vday-glow); } /* ========================= BLOBS: más “caramelo” (si usás xmas-blob-1/2/3) ========================= */ body.sanvalentin .xmas-blob-1, body.sanvalentin .xmas-blob-2, body.sanvalentin .xmas-blob-3 { animation: vdayBlobs 3.6s ease-in-out infinite; will-change: background-color, opacity, filter, transform; } @keyframes vdayBlobs { 0% { background-color: rgba(255, 46, 166, .22); opacity: .55; filter: blur(62px) saturate(170%); transform: scale(1); } 33% { background-color: rgba(255, 23, 68, .18); opacity: .70; filter: blur(56px) saturate(190%); transform: scale(1.03); } 66% { background-color: rgba(176, 38, 255, .16); opacity: .55; filter: blur(64px) saturate(175%); transform: scale(.99); } 100% { background-color: rgba(255, 46, 166, .22); opacity: .55; filter: blur(62px) saturate(170%); transform: scale(1); } } /* ========================= BOTONES: “amor indecente” Apunta a tus botones comunes ========================= */ /* Links con glow */ body.sanvalentin a:hover { filter: drop-shadow(0 0 10px rgba(255, 46, 166, .45)); } /* Botones en general */ body.sanvalentin button, body.sanvalentin .btn { position: relative; } /* Botones "importantes" con gradiente sexy */ body.sanvalentin button#openRegister, body.sanvalentin button#openVhost, body.sanvalentin .btn-primary, body.sanvalentin .btn-success { background-image: linear-gradient(90deg, #ff2ea6, #ff1744, #b026ff) !important; color: #0b0b12 !important; box-shadow: 0 10px 26px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .10); } body.sanvalentin button#openRegister:hover, body.sanvalentin button#openVhost:hover, body.sanvalentin .btn-primary:hover, body.sanvalentin .btn-success:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0, 0, 0, .45), var(--vday-glow-strong); } /* Chips/badges */ body.sanvalentin .badge, body.sanvalentin .chip, body.sanvalentin .vhost-badge { background: rgba(255, 46, 166, .12); border: 1px solid rgba(255, 46, 166, .28); box-shadow: 0 0 16px rgba(255, 46, 166, .22); } /* ========================= LLUVIA SUTIL DE "EMOJIS" (POCA, NO TAPIZA) Usamos el mismo contenedor .snow pero lo convertimos en overlay suave ========================= */ /* Apaga nieve real si existiera */ body.sanvalentin .snow { background: none !important; } /* Capa suave: pocos corazones, más “emoji vibe” */ body.sanvalentin .snow::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 40; /* Muy sutil */ opacity: .22; mix-blend-mode: screen; /* Corazones tipo “emoji”: más redondeados y con colores vivos */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff2ea6' d='M12 21s-7-4.6-9.5-8.4C.5 9.1 2.1 6 5.6 6c1.9 0 3.1 1.1 3.9 2.1C10.3 7.1 11.6 6 13.4 6c3.5 0 5.1 3.1 3.1 6.6C19 16.4 12 21 12 21z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff1744' d='M12 21s-7-4.6-9.5-8.4C.5 9.1 2.1 6 5.6 6c1.9 0 3.1 1.1 3.9 2.1C10.3 7.1 11.6 6 13.4 6c3.5 0 5.1 3.1 3.1 6.6C19 16.4 12 21 12 21z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23b026ff' d='M12 21s-7-4.6-9.5-8.4C.5 9.1 2.1 6 5.6 6c1.9 0 3.1 1.1 3.9 2.1C10.3 7.1 11.6 6 13.4 6c3.5 0 5.1 3.1 3.1 6.6C19 16.4 12 21 12 21z'/%3E%3C/svg%3E"); background-repeat: repeat; /* MUCHOS MENOS: tiles grandes = menos repetición */ background-size: 180px 180px, 260px 260px, 360px 360px; background-position: 0 0, 60px 120px, 140px 40px; /* movimiento suave (no “tormenta”) */ animation: vdayDrift 26s linear infinite; /* blur suave para que parezca “bokeh” */ filter: blur(1.2px) drop-shadow(0 0 6px rgba(255, 46, 166, .22)); } /* Un velo romántico (muy leve) */ body.sanvalentin .snow::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 39; opacity: .18; background: radial-gradient(circle at 25% 20%, rgba(255, 46, 166, .12), transparent 55%), radial-gradient(circle at 75% 65%, rgba(255, 23, 68, .10), transparent 60%); mix-blend-mode: screen; } @keyframes vdayDrift { from { transform: translateY(-80px); } to { transform: translateY(260px); } } /* ========================= ACCESIBILIDAD ========================= */ @media (prefers-reduced-motion: reduce) { body.sanvalentin .xmas-blob-1, body.sanvalentin .xmas-blob-2, body.sanvalentin .xmas-blob-3, body.sanvalentin .snow::before { animation: none; } }