/* Theme Name: Blocksy Child Theme URI: https://example.com Description: Tema filho do Blocksy Author: Marcelo Araldi Author URI: https://marceloaraldi.com Template: blocksy Version: 1.0.0 Text Domain: blocksy-child */ /* Adicione suas personalizações de CSS abaixo desta linha */ /* ========================================================================== SISTEMA DE ANIMAÇÕES — novo.marceloaraldi.com v5 — ranges baseados em cover; timeline do pai só no split de título 0. Tokens e estado base 5. Publicações 1. Estrutura 6. Ajustes mobile 2. Keyframes 7. Rolagem suave 3. Hero (por tempo) 8. Movimento reduzido 4. Scroll-driven ========================================================================== */ /* -------------------------------------------------------------------------- 0. TOKENS E ESTADO BASE -------------------------------------------------------------------------- */ :root{ --e-soft: cubic-bezier(.22,.61,.36,1); --e-out: cubic-bezier(.16,.84,.44,1); --hero-t0: .10s; --hero-step: .045s; --img-r: 10px; --mv-y: .5em; /* títulos, por palavra */ --mv-x: 32px; /* listas */ --mv-blur: 8px; /* só títulos */ --mv-fade-y: 40px; /* parágrafos */ --mv-card: .90; --mv-zoom: 1.18; /* zoom interno das fotos */ --mv-btn-y: 14px; } @media (max-width: 768px){ :root{ --hero-step: .03s; --mv-y: .3em; --mv-x: 10px; --mv-blur: 0px; --mv-fade-y: 10px; --mv-card: .95; --mv-zoom: 1.08; --mv-btn-y: 10px; } } .hero-anim-eyebrow, .hero-anim-text, .hero-anim-btn, .hero-anim-img, .hero-title .w, .anim-title, .anim-split .w, .anim-eyebrow, .anim-text, .anim-meta, .anim-img, .anim-btn, .anim-card, .anim-address, .anim-map, .credenciais-item, .consultorio-item, .motives_list p > *, .anim-faq .wp-block-accordion-item{ opacity: 1; } /* -------------------------------------------------------------------------- 1. ESTRUTURA NÃO adicionamos pseudo-elementos nem overflow em .motives_list: isso conflitava com o marcador e o spotlight já existentes. -------------------------------------------------------------------------- */ .hero-eyebrow, .anim-eyebrow{ display: block; } .split{ display: block; } .split .w{ display: inline-block; } .anim-img{ overflow: clip; /*border-radius: var(--img-r);*/ } .anim-img img{ display: block; width: 100%; } .anim-faq .wp-block-accordion-item{ transform-origin: top center; } /* -------------------------------------------------------------------------- 2. KEYFRAMES -------------------------------------------------------------------------- */ /* Títulos — único lugar com blur */ @keyframes wordIn{ from{ opacity:0; transform:translateY(var(--mv-y)); filter:blur(var(--mv-blur)); } to { opacity:1; transform:translateY(0); filter:blur(0); } } @keyframes wordInFlat{ from{ opacity:0; transform:translateY(var(--mv-y)); } to { opacity:1; transform:translateY(0); } } @keyframes heroWordIn{ from{ opacity:0; transform:translateY(var(--mv-y)); filter:blur(var(--mv-blur)); } to { opacity:1; transform:translateY(0); filter:blur(0); } } @keyframes heroWordInFlat{ from{ opacity:0; transform:translateY(var(--mv-y)); } to { opacity:1; transform:translateY(0); } } /* Eyebrow — aparece INTEIRO, descendo de cima. Contraponto: é o único elemento do site que vem de cima para baixo. */ @keyframes eyebrowIn{ from{ opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } } /* Parágrafos — fade, agora perceptível */ @keyframes softFade{ from{ opacity:0; transform:translateY(var(--mv-fade-y)); } to { opacity:1; transform:translateY(0); } } /* Hero: elementos não-título */ @keyframes heroIn{ from{ opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } /* Listas — lateral, sem pseudo-elemento */ @keyframes listIn{ from{ opacity:0; transform:translateX(calc(-1 * var(--mv-x))); } to { opacity:1; transform:translateX(0); } } /* Fotos — cortina + zoom + P&B que solta a cor no fim */ @keyframes curtain{ from{ clip-path: inset(0 0 100% 0 round var(--img-r)); } to { clip-path: inset(0 0 0 0 round var(--img-r)); } } @keyframes photoInner{ 0% { transform:scale(var(--mv-zoom)); filter:grayscale(1) contrast(1.06) brightness(.96); } 55% { filter:grayscale(.8) contrast(1.04) brightness(.98); } 100%{ transform:scale(1); filter:grayscale(0) contrast(1) brightness(1); } } @keyframes photoInnerFlat{ /* capas, logos: preserva a cor */ from{ transform:scale(var(--mv-zoom)); } to { transform:scale(1); } } /* Cards — só escala */ @keyframes cardScale{ from{ opacity:0; transform:scale(var(--mv-card)); } to { opacity:1; transform:scale(1); } } /* FAQ — desdobra */ @keyframes faqUnfold{ from{ opacity:0; transform:perspective(900px) rotateX(-10deg) translateY(14px); } to { opacity:1; transform:perspective(900px) rotateX(0) translateY(0); } } /* Botões — gesto próprio */ @keyframes buttonPop{ from{ opacity:0; transform:translateY(var(--mv-btn-y)) scale(.92); } to { opacity:1; transform:translateY(0) scale(1); } } /* Mapa */ @keyframes mapColor{ from{ opacity:.45; transform:scale(.98); filter:grayscale(1) saturate(.3); } to { opacity:1; transform:scale(1); filter:grayscale(0) saturate(1); } } /* Parallax do fundo do hero */ @keyframes heroDrift{ from{ transform:translate3d(0,0,0) scale(1.08); } to { transform:translate3d(0,7%,0) scale(1.08); } } /* -------------------------------------------------------------------------- 3. HERO — por TEMPO (view() não serve above the fold) -------------------------------------------------------------------------- */ .hero-title .w{ animation: heroWordIn .55s var(--e-soft) both; will-change: opacity, transform, filter; } .hero-title .split .w:nth-child(1) { animation-delay: calc(var(--hero-t0) + 0 * var(--hero-step)); } .hero-title .split .w:nth-child(2) { animation-delay: calc(var(--hero-t0) + 1 * var(--hero-step)); } .hero-title .split .w:nth-child(3) { animation-delay: calc(var(--hero-t0) + 2 * var(--hero-step)); } .hero-title .split .w:nth-child(4) { animation-delay: calc(var(--hero-t0) + 3 * var(--hero-step)); } .hero-title .split .w:nth-child(5) { animation-delay: calc(var(--hero-t0) + 4 * var(--hero-step)); } .hero-title .split .w:nth-child(6) { animation-delay: calc(var(--hero-t0) + 5 * var(--hero-step)); } .hero-title .split .w:nth-child(7) { animation-delay: calc(var(--hero-t0) + 6 * var(--hero-step)); } .hero-title .split .w:nth-child(8) { animation-delay: calc(var(--hero-t0) + 7 * var(--hero-step)); } .hero-title .split .w:nth-child(9) { animation-delay: calc(var(--hero-t0) + 8 * var(--hero-step)); } .hero-title .split .w:nth-child(10){ animation-delay: calc(var(--hero-t0) + 9 * var(--hero-step)); } .hero-title .split .w:nth-child(11){ animation-delay: calc(var(--hero-t0) + 10 * var(--hero-step)); } .hero-title .split .w:nth-child(12){ animation-delay: calc(var(--hero-t0) + 11 * var(--hero-step)); } .hero-title .split .w:nth-child(13){ animation-delay: calc(var(--hero-t0) + 12 * var(--hero-step)); } .hero-title .split .w:nth-child(14){ animation-delay: calc(var(--hero-t0) + 13 * var(--hero-step)); } .hero-title .split .w:nth-child(15){ animation-delay: calc(var(--hero-t0) + 14 * var(--hero-step)); } .hero-title .split .w:nth-child(16){ animation-delay: calc(var(--hero-t0) + 15 * var(--hero-step)); } .hero-anim-img, .hero-anim-text, .hero-anim-btn{ animation: heroIn .6s var(--e-soft) both; } .hero-anim-img { animation-delay: .18s; } .hero-anim-text { animation-delay: .66s; } .hero-anim-btn { animation-delay: .78s; } /* eyebrow: último do título, aparecendo inteiro */ .hero-anim-eyebrow{ animation: eyebrowIn .5s var(--e-soft) .55s both; } /* -------------------------------------------------------------------------- 4. SCROLL-DRIVEN Ranges terminam em "cover": a animação progride enquanto o elemento sobe para o centro da tela. Ranges só com "entry" rodam na faixa colada à base da viewport — tecnicamente corretos, visualmente invisíveis. -------------------------------------------------------------------------- */ @supports (animation-timeline: view()){ /* 4.1 TÍTULOS COM SPLIT — sem timeline nomeada. Cada palavra observa sua própria visibilidade (igual ao resto do site); o escalonamento vem do deslocamento manual dos ranges por nth-child. */ .anim-split .w{ animation-name: wordIn; animation-duration: 1s; animation-timing-function: var(--e-soft); animation-fill-mode: both; animation-timeline: view(); } .anim-split .split .w:nth-child(1) { animation-range: cover 8% cover 25%; } .anim-split .split .w:nth-child(2) { animation-range: cover 10% cover 27%; } .anim-split .split .w:nth-child(3) { animation-range: cover 12% cover 29%; } .anim-split .split .w:nth-child(4) { animation-range: cover 14% cover 31%; } .anim-split .split .w:nth-child(5) { animation-range: cover 16% cover 33%; } .anim-split .split .w:nth-child(6) { animation-range: cover 18% cover 35%; } .anim-split .split .w:nth-child(7) { animation-range: cover 20% cover 37%; } .anim-split .split .w:nth-child(8) { animation-range: cover 22% cover 39%; } .anim-split .split .w:nth-child(9) { animation-range: cover 24% cover 41%; } .anim-split .split .w:nth-child(10){ animation-range: cover 26% cover 43%; } .anim-split .split .w:nth-child(11){ animation-range: cover 28% cover 45%; } .anim-split .split .w:nth-child(12){ animation-range: cover 30% cover 47%; } .anim-split .anim-eyebrow{ animation: eyebrowIn var(--e-soft) both; animation-timeline: view(); animation-range: cover 40% cover 88%; } /* 4.2 TÍTULOS SEM SPLIT */ .anim-title{ animation: wordIn var(--e-soft) both; animation-timeline: view(); animation-range: entry 15% cover 37%; } /* 4.3 PARÁGRAFOS */ .anim-text{ animation: softFade var(--e-out) both; animation-timeline: view(); animation-range: entry 40% cover 55%; } /* 4.4 METADADOS */ .anim-meta{ animation: softFade var(--e-out) both; animation-timeline: view(); animation-range: entry 15% cover 32%; } /* 4.5 LISTA DE MOTIVOS — anima os filhos (ícone + texto), não o

. O

fica livre para o spotlight de hover controlar sua opacidade. As duas opacidades se multiplicam na composição visual. */ .motives_list p > *{ animation: listIn var(--e-out) both; animation-timeline: view(); animation-range: entry 10% cover 28%; } .motives_list p:nth-child(2) > *{ animation-range: entry 14% cover 32%; } .motives_list p:nth-child(3) > *{ animation-range: entry 18% cover 36%; } .motives_list p:nth-child(4) > *{ animation-range: entry 22% cover 40%; } .motives_list p:nth-child(5) > *{ animation-range: entry 26% cover 44%; } .motives_list p:nth-child(6) > *{ animation-range: entry 30% cover 48%; } .motives_list p:nth-child(7) > *{ animation-range: entry 34% cover 52%; } .motives_list p:nth-child(8) > *{ animation-range: entry 38% cover 56%; } /* 4.6 FOTOS */ .anim-img{ animation: curtain var(--e-soft) both; animation-timeline: view(); animation-range: entry 5% cover 25%; } .anim-img img{ animation: photoInner linear both; animation-timeline: view(); animation-range: entry 5% cover 40%; } .anim-img--flat img{ animation-name: photoInnerFlat; } /* 4.7 CREDENCIAIS / CONSULTÓRIO — view() individual. Se a classe estiver no