/* ============================================================================ Festividades — TOMADA SAZONAL da vitrine Vendou ("encha os olhos"). 3 camadas, ligadas por [data-fest] no : 1) GRANDE ENTRADA (.fest-splash): cortina temática + chuva de ícones + saudação que dá um "pop". Toca por X segundos e se dissolve. 2) AMBIENTE (.fest-ambient + .fest-bg): moldura/vinheta temática nas bordas, partículas lentas e esparsas que ficam vivas o tempo todo. 3) FAIXA + GUIRLANDA (.fest-ribbon/.fest-garland): a chamada no topo. Conteúdo (cards/preços/botões) continua 100% legível: a cor de marca dos CTAs é preservada e a vinheta só tinge as BORDAS. Respeita reduced-motion. ========================================================================== */ /* ── Paleta por tema ────────────────────────────────────────────────────── --rib-* faixa | --fest-accent acento | --edge vinheta de borda --sp1/--sp2 cortina da grande entrada | --glow brilho do herói */ [data-fest="ano_novo"] { --rib-from:#0b1530; --rib-to:#caa53d; --rib-text:#fff; --fest-accent:#caa53d; --edge:rgba(202,165,61,.30); --sp1:#0b1026; --sp2:#1a2550; --glow:#ffd86b; } [data-fest="carnaval"] { --rib-from:#ff1493; --rib-to:#8e44ad; --rib-mid:#ffd700; --rib-text:#fff; --fest-accent:#8e44ad; --edge:rgba(142,68,173,.26); --sp1:#7b2ff7; --sp2:#ff1493; --glow:#ffe14d; } [data-fest="pascoa"] { --rib-from:#b39ddb; --rib-to:#ffe082; --rib-text:#4a3b00; --fest-accent:#9575cd; --edge:rgba(149,117,205,.22); --sp1:#caa6e6; --sp2:#ffe6a8; --glow:#fff3c4; } [data-fest="futebol"] { --rib-from:#009c3b; --rib-to:#ffcc00; --rib-mid:#0d47a1; --rib-text:#fff; --fest-accent:#009c3b; --edge:rgba(0,156,59,.26); --sp1:#00611f; --sp2:#0d6a2a; --glow:#ffe14d; } [data-fest="sao_joao"] { --rib-from:#c62828; --rib-to:#f9a825; --rib-mid:#1e88e5; --rib-text:#fff; --fest-accent:#c62828; --edge:rgba(198,40,40,.26); --sp1:#7a1f12; --sp2:#c0392b; --glow:#ffd24d; } [data-fest="namorados"] { --rib-from:#e0115f; --rib-to:#ff69b4; --rib-text:#fff; --fest-accent:#e0115f; --edge:rgba(224,17,95,.26); --sp1:#a1063f; --sp2:#e0245e; --glow:#ffb3cd; } [data-fest="maes"] { --rib-from:#ec407a; --rib-to:#f8bbd0; --rib-text:#5a0026; --fest-accent:#ec407a; --edge:rgba(236,64,122,.24); --sp1:#d81b75; --sp2:#ff9ec4; --glow:#ffd9ea; } [data-fest="pais"] { --rib-from:#1f3a5f; --rib-to:#42a5f5; --rib-text:#fff; --fest-accent:#1f3a5f; --edge:rgba(31,58,95,.28); --sp1:#13294b; --sp2:#2f6db5; --glow:#9fd0ff; } [data-fest="criancas"] { --rib-from:#ff7043; --rib-to:#29b6f6; --rib-mid:#ffca28; --rib-text:#fff; --fest-accent:#ff7043; --edge:rgba(41,182,246,.24); --sp1:#ff6f3c; --sp2:#22c1c3; --glow:#ffe14d; } [data-fest="independencia"] { --rib-from:#009c3b; --rib-to:#002776; --rib-mid:#ffdf00; --rib-text:#fff; --fest-accent:#009c3b; --edge:rgba(0,39,118,.28); --sp1:#00611f; --sp2:#002776; --glow:#ffe14d; } [data-fest="halloween"] { --rib-from:#1a1024; --rib-to:#ff7518; --rib-text:#fff; --fest-accent:#ff7518; --edge:rgba(255,117,24,.30); --sp1:#160b22; --sp2:#3a1d05; --glow:#ff9a3c; } [data-fest="black_friday"] { --rib-from:#000000; --rib-to:#1f1f1f; --rib-mid:#ffd200; --rib-text:#fff; --fest-accent:#ffd200; --edge:rgba(255,210,0,.28); --sp1:#000000; --sp2:#1a1a1a; --glow:#ffe14d; } [data-fest="natal"] { --rib-from:#c8102e; --rib-to:#1e5631; --rib-mid:#d4af37; --rib-text:#fff; --fest-accent:#1e5631; --edge:rgba(200,16,46,.26); --sp1:#7d1220; --sp2:#0f3d22; --glow:#ffe39a; } /* Toques de marca temáticos (não afetam contraste de conteúdo) */ [data-fest] ::selection { background:var(--fest-accent,#7c3aed); color:#fff; } [data-fest] ::-moz-selection { background:var(--fest-accent,#7c3aed); color:#fff; } /* ══ CAMADA 2 — MOLDURA/VINHETA TEMÁTICA (bordas) ════════════════════════ */ .fest-bg { position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(120% 60% at 50% -10%, var(--edge,transparent) 0%, transparent 42%), radial-gradient(140% 90% at 50% 115%, var(--edge,transparent) 0%, transparent 48%); opacity:.9; } [data-intensity="off"] .fest-bg { display:none; } /* ══ CAMADA 2 — PARTÍCULAS DE AMBIENTE (lentas, esparsas, sempre vivas) ═══ */ .fest-ambient { position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; } .fest-ambient span { position:absolute; top:-8%; left:var(--x,50%); font-size:var(--sz,1.4rem); opacity:.5; will-change:transform; animation:fest-drift var(--d,9s) linear var(--del,0s) infinite; } [data-intensity="low"] .fest-ambient span:nth-child(n+5){ display:none; } [data-motion="off"] .fest-ambient { display:none; } @keyframes fest-drift { 0% { transform:translateY(-10vh) translateX(0) rotate(0deg); opacity:0; } 10% { opacity:.55; } 90% { opacity:.55; } 100% { transform:translateY(112vh) translateX(var(--drift,20px)) rotate(var(--rot,180deg)); opacity:0; } } /* ══ CAMADA 1 — GRANDE ENTRADA (a hora do "uau") ═════════════════════════ */ .fest-splash { position:fixed; inset:0; z-index:99997; overflow:hidden; /* abaixo de modais reais (99999) e aceite (99998) */ display:grid; place-items:center; text-align:center; background:radial-gradient(ellipse at 50% 38%, var(--sp2,#222) 0%, var(--sp1,#000) 78%); opacity:1; transition:opacity .8s ease, visibility .8s ease; /* FAIL-OPEN: se o JS não rodar (CSP/erro/extensão), a cortina some sozinha por CSS depois de ~14s — nunca trava a loja. visibility:hidden tira do hit-test (vira clicável-através) sem brigar com o fade por opacity do JS. */ animation:fest-splash-safety 14s forwards; } @keyframes fest-splash-safety { to { visibility:hidden; } } .fest-splash.is-hiding { opacity:0; visibility:hidden; pointer-events:none; } .fest-splash::after { /* brilho central */ content:""; position:absolute; width:70vmin; height:70vmin; left:50%; top:38%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, var(--glow,#fff) 0%, transparent 60%); opacity:.22; filter:blur(8px); animation:fest-pulse 2.4s ease-in-out infinite; } @keyframes fest-pulse { 0%,100%{transform:translate(-50%,-50%) scale(.92);opacity:.16} 50%{transform:translate(-50%,-50%) scale(1.06);opacity:.30} } .fest-splash__rain { position:absolute; inset:0; pointer-events:none; } .fest-splash__rain span { position:absolute; top:-12vh; left:var(--x,50%); font-size:var(--sz,2rem); opacity:0; will-change:transform,opacity; animation:fest-splash-fall var(--d,3.2s) cubic-bezier(.4,.05,.55,1) var(--del,0s) infinite; } @keyframes fest-splash-fall { 0% { transform:translateY(-12vh) translateX(0) rotate(0deg) scale(var(--scl,1)); opacity:0; } 8% { opacity:1; } 92% { opacity:1; } 100% { transform:translateY(116vh) translateX(var(--drift,30px)) rotate(var(--rot,360deg)) scale(var(--scl,1)); opacity:.85; } } .fest-splash__hero { position:relative; z-index:2; color:#fff; padding:0 22px; animation:fest-hero-pop 1s cubic-bezier(.18,.9,.24,1.2) both; } .fest-splash__emoji { font-size:clamp(64px,18vmin,140px); line-height:1; filter:drop-shadow(0 8px 22px rgba(0,0,0,.45)); animation:fest-hero-bob 2.6s ease-in-out 1s infinite; } .fest-splash__title { font-size:clamp(26px,6vw,52px); font-weight:900; letter-spacing:-.5px; margin-top:10px; text-shadow:0 4px 24px rgba(0,0,0,.45); } .fest-splash__sub { font-size:clamp(13px,3.4vw,18px); font-weight:600; opacity:.9; margin-top:6px; } @keyframes fest-hero-pop { 0%{transform:scale(.55) translateY(16px);opacity:0} 62%{transform:scale(1.07)} 100%{transform:scale(1);opacity:1} } @keyframes fest-hero-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} } .fest-splash__skip { position:absolute; right:16px; bottom:16px; z-index:3; border:1px solid rgba(255,255,255,.45); background:rgba(255,255,255,.12); color:#fff; font-weight:700; font-size:.82rem; padding:7px 14px; border-radius:999px; cursor:pointer; backdrop-filter:blur(4px); transition:background .15s; } .fest-splash__skip:hover { background:rgba(255,255,255,.28); } /* ══ FAIXA FESTIVA (topo) ════════════════════════════════════════════════ */ .fest-ribbon { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; padding:9px 16px; font-size:.92rem; font-weight:600; line-height:1.3; text-align:center; color:var(--rib-text,#fff); background:linear-gradient(90deg,var(--rib-from,#333),var(--rib-mid,var(--rib-to,#666)),var(--rib-to,#666)); background-size:200% 100%; position:relative; z-index:40; } [data-motion="on"] .fest-ribbon { animation:fest-shimmer 9s ease infinite; } @keyframes fest-shimmer { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} } .fest-ribbon a { color:inherit; font-weight:800; text-decoration:underline; text-underline-offset:2px; white-space:nowrap; } .fest-ribbon-close { position:absolute; right:10px; top:50%; transform:translateY(-50%); border:0; background:rgba(255,255,255,.25); color:inherit; width:22px; height:22px; border-radius:999px; cursor:pointer; font-size:.8rem; line-height:1; display:grid; place-items:center; } .fest-ribbon-close:hover { background:rgba(255,255,255,.45); } @media (max-width:520px){ .fest-ribbon{ font-size:.82rem; padding:8px 30px 8px 12px; } } /* ══ GUIRLANDA DO TOPO ═══════════════════════════════════════════════════ */ .fest-garland { width:100%; display:none; pointer-events:none; line-height:0; position:relative; z-index:39; } [data-intensity="low"] .fest-garland, [data-intensity="medium"] .fest-garland, [data-intensity="high"] .fest-garland { display:flex; } .fest-garland--junina { height:22px; } .fest-garland--junina i { flex:1 1 auto; height:20px; display:block; clip-path:polygon(0 0,100% 0,50% 100%); filter:drop-shadow(0 1px 1px rgba(0,0,0,.15)); } .fest-garland--junina i:nth-child(5n+1){background:#e53935} .fest-garland--junina i:nth-child(5n+2){background:#fdd835} .fest-garland--junina i:nth-child(5n+3){background:#1e88e5} .fest-garland--junina i:nth-child(5n+4){background:#43a047} .fest-garland--junina i:nth-child(5n+5){background:#fb8c00} .fest-garland--flags { height:22px; } .fest-garland--flags i { flex:1 1 auto; height:20px; display:block; clip-path:polygon(0 0,100% 0,50% 100%); filter:drop-shadow(0 1px 1px rgba(0,0,0,.15)); } .fest-garland--flags i:nth-child(3n+1){background:#009c3b} .fest-garland--flags i:nth-child(3n+2){background:#ffdf00} .fest-garland--flags i:nth-child(3n+3){background:#002776} .fest-garland--lights { height:18px; gap:14px; justify-content:center; padding:0 8px; } .fest-garland--lights i { width:9px; height:9px; border-radius:999px; display:block; align-self:flex-start; } .fest-garland--lights i:nth-child(4n+1){background:#e53935; box-shadow:0 0 7px #e53935} .fest-garland--lights i:nth-child(4n+2){background:#ffd54f; box-shadow:0 0 7px #ffd54f} .fest-garland--lights i:nth-child(4n+3){background:#43a047; box-shadow:0 0 7px #43a047} .fest-garland--lights i:nth-child(4n+4){background:#42a5f5; box-shadow:0 0 7px #42a5f5} @media (prefers-reduced-motion: no-preference) { [data-motion="on"] .fest-garland--lights i { animation:fest-twinkle 1.8s ease-in-out infinite; } [data-motion="on"] .fest-garland--lights i:nth-child(2n){ animation-delay:.9s } } .fest-garland--streamers { height:16px; } .fest-garland--streamers i { flex:1 1 auto; height:14px; display:block; } .fest-garland--streamers i:nth-child(6n+1){background:#ff1493} .fest-garland--streamers i:nth-child(6n+2){background:#ffd700} .fest-garland--streamers i:nth-child(6n+3){background:#1abc9c} .fest-garland--streamers i:nth-child(6n+4){background:#8e44ad} .fest-garland--streamers i:nth-child(6n+5){background:#ff7f11} .fest-garland--streamers i:nth-child(6n+6){background:#2ecc71} @keyframes fest-twinkle { 0%,100%{opacity:.35; transform:scale(.85)} 50%{opacity:1; transform:scale(1.12)} } /* ══ ACESSIBILIDADE / DESLIGADOS ═════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .fest-ambient, .fest-splash__rain { display:none !important; } .fest-splash__emoji, .fest-splash__hero, .fest-splash::after { animation:none !important; } } [data-motion="off"] .fest-splash__rain, [data-motion="off"] .fest-ambient { display:none; } [data-intensity="off"] .fest-ambient, [data-intensity="off"] .fest-splash { display:none; } /* ══ MOBILE ══════════════════════════════════════════════════════════════ */ @media (max-width:640px) { .fest-ambient span:nth-child(n+7){ display:none; } }