/* ===================================================================== signature.css — Vanessa · camada de motion (web-nativo, ADITIVO) Clima: doce & materno + premium & clean + vivo. Intensidade: equilibrada. 1) Pétalas/corações flutuando no hero 2) Aurora suave respirando 3) Phone flutua + inclina no cursor 4) Hover-lift + stagger nos cards 5) Coração batendo + fruta flutuando no slider Namespaced sig-. O movimento toca por padrão (pedido do dono); o único interruptor é [data-anim="off"] no . NÃO edita historia.css. Carregar por último (depois de historia.js). ===================================================================== */ /* ============================================================ 1. PÉTALAS / CORAÇÕES FLUTUANDO (doce & materno) Dentro do .hero (overflow:hidden, recorta sozinho). Sobe devagar com leve balanço e some nas pontas. ============================================================ */ .sig-petals{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; /* acima do bg/float-shape(-1), abaixo do conteúdo (.hero-grid) */ } .sig-petal{ position:absolute; bottom:-10%; left:var(--x, 50%); width:var(--s, 10px); height:var(--s, 10px); border-radius:50%; background:var(--c, var(--brand-soft)); opacity:0; will-change:transform, opacity; animation: sig-rise var(--d, 22s) linear var(--delay, 0s) infinite; } .sig-petal:not(.is-heart){ box-shadow:0 0 16px color-mix(in srgb, var(--c, #fff) 70%, transparent); } .sig-petal.is-heart{ background:none; border-radius:0; box-shadow:none; filter:drop-shadow(0 2px 4px rgba(225,29,72,.18)); } .sig-petal.is-heart svg{ width:100%; height:100%; display:block; color:var(--c, var(--brand)); } html[data-anim="off"] .sig-petals{ display:none; } @keyframes sig-rise{ 0% { transform: translate3d(0,0,0) rotate(0deg); opacity:0; } 12% { opacity: var(--o, .25); } 50% { transform: translate3d(var(--sway, 24px), -56vh, 0) rotate(180deg); opacity: var(--o, .25); } 88% { opacity: var(--o, .25); } 100% { transform: translate3d(0, -112vh, 0) rotate(360deg); opacity:0; } } /* ============================================================ 2. AURORA SUAVE (mesh) — respira devagar atrás do hero + card final. Cores via color-mix dos tokens -> recolore por paleta [data-pal]. ============================================================ */ .sig-mesh{ position:absolute; inset:0; z-index:-1; /* mesma faixa do .float-shape, atrás de tudo do hero */ pointer-events:none; overflow:hidden; border-radius:inherit; contain:layout paint style; } .sig-mesh__blob{ position:absolute; width:64%; height:80%; border-radius:50%; filter:blur(60px); opacity:.42; will-change:transform; transform:translate3d(0,0,0) scale(1); background:radial-gradient(closest-side, color-mix(in srgb, var(--brand) 64%, transparent) 0%, color-mix(in srgb, var(--brand) 26%, transparent) 46%, transparent 72%); } .sig-mesh__blob--a{ top:-16%; left:-8%; width:72%; height:90%; opacity:.40; animation: sig-aurora-a 34s var(--ease, ease-in-out) infinite; background:radial-gradient(closest-side, color-mix(in srgb, var(--peach) 76%, transparent) 0%, color-mix(in srgb, var(--peach) 32%, var(--brand-soft)) 44%, transparent 70%); } .sig-mesh__blob--b{ top:4%; right:-12%; left:auto; width:66%; height:84%; opacity:.30; animation: sig-aurora-b 28s var(--ease, ease-in-out) infinite; background:radial-gradient(closest-side, color-mix(in srgb, var(--brand) 50%, transparent) 0%, color-mix(in srgb, var(--brand-soft) 58%, transparent) 48%, transparent 74%); } .sig-mesh__blob--c{ bottom:-20%; left:26%; top:auto; width:58%; height:74%; opacity:.26; animation: sig-aurora-c 40s var(--ease, ease-in-out) infinite; background:radial-gradient(closest-side, color-mix(in srgb, var(--surface) 68%, var(--brand-tint)) 0%, color-mix(in srgb, var(--bg-warm) 48%, transparent) 50%, transparent 76%); } /* No card final (fundo --grad-brand) o mesh vira um sopro branco suave */ .sig-mesh--final{ opacity:.7; mix-blend-mode:soft-light; } .sig-mesh--final .sig-mesh__blob{ filter:blur(48px); opacity:.5; } .sig-mesh--final .sig-mesh__blob--c{ background:radial-gradient(closest-side, color-mix(in srgb,#fff 58%,transparent) 0%, color-mix(in srgb,#fff 20%,transparent) 46%, transparent 72%); } html[data-anim="sutil"] .sig-mesh__blob{ animation-duration:52s !important; } html[data-anim="off"] .sig-mesh__blob{ animation:none !important; } @keyframes sig-aurora-a{ 0%,100%{transform:translate3d(0,0,0) scale(1); opacity:.40;} 50%{transform:translate3d(5%,4%,0) scale(1.12); opacity:.48;} } @keyframes sig-aurora-b{ 0%,100%{transform:translate3d(0,0,0) scale(1.04); opacity:.30;} 50%{transform:translate3d(-6%,3%,0) scale(.92); opacity:.40;} } @keyframes sig-aurora-c{ 0%,100%{transform:translate3d(0,0,0) scale(1); opacity:.26;} 50%{transform:translate3d(3%,-5%,0) scale(1.1); opacity:.34;} } /* ============================================================ 3. PHONE — flutua devagar (wrapper) + inclina no cursor (#heroPhone via JS). ============================================================ */ .sig-phone-float{ display:inline-block; will-change:transform; animation: sig-float 6.5s ease-in-out infinite; } html[data-anim="off"] .sig-phone-float{ animation:none !important; } @keyframes sig-float{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} } /* #heroPhone recebe transform de tilt inline via JS; transição suave: */ #heroPhone{ transition: transform .35s var(--ease, ease); } /* ============================================================ 4. HOVER-LIFT (premium) + STAGGER dos itens ao entrar (vivo) ============================================================ */ .fitem, .tcard, .step, .fruit-card{ transition: transform .38s var(--ease, ease), box-shadow .38s var(--ease, ease), border-color .38s var(--ease, ease); } .fitem .fic{ transition: transform .38s var(--ease, ease); } .gplay, .btn-primary, .btn-ghost{ transition: transform .25s var(--ease, ease), box-shadow .25s var(--ease, ease); } .fitem:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line-2); } .fitem:hover .fic{ transform:scale(1.1) rotate(-3deg); } .tcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); } .step:hover{ transform:translateY(-3px); } .fruit-card:hover{ transform:translateY(-4px) scale(1.01); box-shadow:var(--shadow-lg); } .gplay:hover, .btn-primary:hover, .btn-ghost:hover{ transform:translateY(-2px); } /* ====== REVEAL universal BIDIRECIONAL ====== Todo bloco aparece ao rolar para baixo e some ao subir. Implementado por estilo INLINE via signature.js (opacity/transform), para vencer qualquer regra herdada do reveal antigo sem briga de especificidade. Ver seção 4 do JS. */ /* ============================================================ 5. BPM vivo — o coração do .heartbeat bate no BPM exibido (#wkBpm), + fruta (#wkEmoji) flutua/respira. Aditivo (não toca initWeekSlider). ============================================================ */ .heartbeat{ --sig-beat:0.42s; } .heartbeat svg{ transform-origin:50% 55%; } .heartbeat.sig-beating svg{ animation: sig-lubdub var(--sig-beat) var(--ease, ease) infinite; } .sig-emoji-wrap{ display:inline-block; line-height:0; transform:translateZ(0); will-change:transform; animation: sig-emoji-float 6.5s ease-in-out infinite; } .sig-emoji-wrap > #wkEmoji{ animation: sig-emoji-breathe 6.5s ease-in-out infinite; } html[data-anim="sutil"] .sig-emoji-wrap, html[data-anim="sutil"] .sig-emoji-wrap > #wkEmoji{ animation-duration:9s; } html[data-anim="off"] .heartbeat svg, html[data-anim="off"] .sig-emoji-wrap, html[data-anim="off"] .sig-emoji-wrap > #wkEmoji{ animation:none !important; } @keyframes sig-lubdub{ 0%{transform:scale(1);} 8%{transform:scale(1.22);} 16%{transform:scale(1);} 24%{transform:scale(1.13);} 32%{transform:scale(1);} 100%{transform:scale(1);} } @keyframes sig-emoji-float{ 0%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-7px) rotate(-1.2deg);} 100%{transform:translateY(0) rotate(0deg);} } @keyframes sig-emoji-breathe{ 0%,100%{filter:drop-shadow(0 14px 24px rgba(0,0,0,.14));} 50%{filter:drop-shadow(0 22px 30px rgba(0,0,0,.20));} } /* ============================================================ HERO upgrades — prova social, "cuidada" gradiente+traço, "App Store em breve", legenda do carrossel, grão/vinheta. ============================================================ */ /* 2. "cuidada": texto em gradiente da marca + traço que se desenha ao carregar */ .hero h1 em{ font-style:italic; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; position:relative; padding-bottom:.02em; } .hero h1 em::after{ /* bottom:.20em sobe o traço para junto de "cuidada" — line-height:1.04 do h1 é apertado, então bottom:0 caía na linha de baixo ("não"/"anotada"). */ content:""; position:absolute; left:.04em; right:.10em; bottom:.28em; height:.06em; border-radius:3px; background:var(--grad-brand); transform:scaleX(0); transform-origin:left center; animation: sig-underline 1s var(--ease, ease) .5s forwards; } html[data-anim="off"] .hero h1 em::after{ animation:none; transform:scaleX(1); } @keyframes sig-underline{ to{ transform:scaleX(1); } } /* 1. Prova social — avatares + estrelas + texto */ .hero-social{ display:flex; align-items:center; gap:12px; margin:0 0 22px; flex-wrap:wrap; } .hero-avatars{ display:flex; } .hero-avatars span{ width:34px; height:34px; border-radius:50%; border:2.5px solid var(--bg); margin-left:-11px; display:grid; place-items:center; font-size:13px; font-weight:700; color:#fff; box-shadow:0 2px 5px rgba(120,70,55,.18); } .hero-avatars span:first-child{ margin-left:0; } .hero-avatars span{ position:relative; overflow:hidden; } .hero-avatars span img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .hero-social-tx{ display:flex; flex-direction:column; gap:1px; } .hero-stars{ display:flex; gap:1.5px; color:#F5A623; } .hero-stars svg{ width:14px; height:14px; display:block; } .hero-social-tx b{ font-size:13.5px; font-weight:600; color:var(--ink-2); letter-spacing:-.005em; } /* Mobile/tablet (single-column, < desktop): prova social acima do título, estrelas e texto na mesma linha (centrado), avatares ocultos (só desktop). */ @media (max-width:980px){ .hero-copy{ display:flex; flex-direction:column; } .hero-tag{ order:-2; } .hero-social{ order:-1; justify-content:center; margin:0 0 16px; } .hero-avatars{ display:none; } .hero-social-tx{ flex-direction:row; align-items:center; gap:8px; } .hero-stars{ flex-shrink:0; } } /* 3. App Store "em breve" — badge no formato do hero (.gplay), preto = cores da App Store, não clicável (sem lift no hover). O ícone apple herda branco do .gplay. */ /* claramente "disponível em breve" (não é botão ativo): badge claro/contornado vs o preto sólido do Google Play; ícone/texto suaves e "EM BREVE NA" em coral. */ .gplay-soon{ cursor:default; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 16%, transparent); } .gplay-soon .gplay-ic{ color: var(--ink-2); opacity:.6; } .gplay-soon .gplay-tx small{ color: var(--brand); font-weight:700; opacity:1; letter-spacing:.1em; } .gplay-soon:hover{ transform:none; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 16%, transparent); } /* 6. Legenda do carrossel (acima dos dots) */ .hero-caption{ font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); text-align:center; margin-bottom:9px; min-height:14px; }