/* ============================================================= ESPAÇO BABY — Folha de estilos principal ------------------------------------------------------------- Como este arquivo está organizado (use Ctrl+F nos títulos): 1. Tokens de design (cores, fontes, espaçamentos) 2. Reset/base 3. Componentes reutilizáveis (botões, tags, logo) 4. Header / menu 5. Hero (com foto da fachada em tela cheia) 6. Seções (bandas coloridas + painéis brancos, ver comentário na seção) 7. Blocos de conteúdo (stats, diferenciais, planos, etc.) 8. Contato + mapa 9. Footer / botão flutuante de WhatsApp 10. Animações de scroll 11. Responsivo (tablet/desktop) ============================================================= */ /* ------------------------------------------------------------- 1. TOKENS DE DESIGN Cores definidas pela cliente a partir do logo da creche. - "bg" -> cor de fundo principal do site (branco-nuvem azulado) - "blue" -> cor principal de marca (CTAs, links, destaques) - red / gold / green -> cores secundárias, usadas em detalhes pontuais: balões/blobs decorativos, ícones, badges, hovers. Centralizar tudo aqui facilita trocar a paleta no futuro sem precisar caçar cores espalhadas pelo arquivo. ------------------------------------------------------------- */ :root{ /* Cores principais */ --color-bg: #EBF3F3; /* fundo geral do site */ --color-blue: #29B9DF; /* azul de marca */ --color-blue-dark: #1C97B6; /* azul mais escuro p/ hover/active */ /* Cores secundárias (balões, ícones, efeitos) */ --color-red: #D13C3F; --color-gold: #D7B45D; --color-green: #90EE90; /* Neutros */ --color-dark: #2D2A26; /* texto principal e seções escuras */ --color-white: #FFFFFF; --color-tint: #DEF0F4; /* tom suave (derivado do azul) p/ cards dentro de painéis brancos */ --color-gray: #6B6760; /* texto secundário/legendas */ /* Tons suaves usados em detalhes pontuais (fundo de "pills", ícones em círculo, etc.) — não são mais usados como fundo de seção inteira. */ --band-blue: #DEF0F4; --band-gold: #FBF3E3; --band-green: #EAF8EA; --band-red: #FBEAEA; /* Tipografia: Baloo 2 (arredondada, lembra o logo) + Quicksand (leitura) */ --font-title: 'Baloo 2', system-ui, sans-serif; --font-body: 'Quicksand', system-ui, sans-serif; /* Espaçamento/forma reutilizados pelos componentes */ --radius: 22px; --shadow: 0 10px 30px rgba(45,42,38,.08); --shadow-panel: 0 18px 45px rgba(45,42,38,.10), 0 3px 10px rgba(45,42,38,.05); --container: 1180px; } /* ------------------------------------------------------------- 2. RESET / BASE ------------------------------------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } /* overflow-x:hidden só no body não é suficiente em vários navegadores mobile pra impedir rolagem horizontal — o .nav do menu (painel fora da tela, position:fixed) conta como "conteúdo" que estica a área rolável da página inteira nesses casos, aparecendo como uma faixa branca e um scroll horizontal indevido. Repetindo no (que é quem várias engines mobile realmente usam como "viewport rolável") resolve de forma mais confiável. */ html{ scroll-behavior:smooth; overflow-x:hidden; max-width:100vw; } /* Remove o "flash" cinza que alguns navegadores mobile mostram ao tocar em links/botões, pra manter só nossos próprios estados de hover/active. */ a, button{ -webkit-tap-highlight-color:transparent; } body{ margin:0; font-family:var(--font-body); color:var(--color-dark); background:var(--color-bg); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; max-width:100vw; /* evita scroll horizontal causado pelos blobs decorativos do hero e pelo painel do menu */ /* Compensa o .header ter virado position:fixed (saiu do fluxo do documento) — sem isso o topo da página ficaria escondido atrás do header. --header-height é calculado no JS (initHeaderShadow); o valor depois do "," é só um fallback antes do JS rodar. */ padding-top:var(--header-height, 80px); } /* Idem, mas para os links do menu (#sobre, #planos etc.): sem isso, ao clicar num link do menu o navegador rolaria o topo da seção pra ficar exatamente atrás do header fixo, escondendo o título. */ section[id], main#topo{ scroll-margin-top:var(--header-height, 80px); } img{ max-width:100%; display:block; } a{ text-decoration:none; color:inherit; } ul{ list-style:none; margin:0; padding:0; } h1,h2,h3{ font-family:var(--font-title); margin:0 0 .5em; line-height:1.15; } p{ margin:0 0 1em; } button{ font:inherit; } .container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; } /* ------------------------------------------------------------- 3. COMPONENTES REUTILIZÁVEIS ------------------------------------------------------------- */ /* Botões — use .btn + um modificador (--primary, --outline, --whatsapp) */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-title); font-weight:600; font-size:1rem; padding:14px 28px; border-radius:999px; border:2px solid transparent; cursor:pointer; transition:transform .25s ease, box-shadow .25s ease, background .25s ease; white-space:nowrap; -webkit-tap-highlight-color:transparent; } .btn:hover{ transform:translateY(-3px); } /* Contorno de foco próprio, afastado do texto: sem isso, o anel de foco padrão de alguns navegadores mobile "abraça" bem de perto o texto do botão (ex.: "Chamar no WhatsApp"), criando um halo colorido em cima das letras que deixa o texto ilegível. */ .btn:focus-visible{ outline:3px solid rgba(0,0,0,.4); outline-offset:4px; } .btn--primary{ background:var(--color-red); color:var(--color-white); box-shadow:0 8px 20px rgba(209,60,63,.35); } .btn--primary:hover{ background:#b6302f; } .btn--outline{ background:transparent; border-color:var(--color-blue); color:var(--color-blue-dark); } .btn--outline:hover{ background:var(--color-blue); color:var(--color-white); } .btn--whatsapp{ background:#25D366; color:var(--color-white); box-shadow:0 8px 20px rgba(37,211,102,.35); } .btn--whatsapp:hover{ background:#1ebc59; } .btn--instagram{ background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color:var(--color-white); box-shadow:0 8px 20px rgba(220,39,67,.35); } .btn--instagram:hover{ filter:brightness(1.08); } /* No hero, "Agende uma visita" fica ao lado do botão de Instagram — o vermelho do .btn--primary padrão ficava parecido demais com o gradiente do Instagram, então só aqui ele vira azul claro, com o efeito "neon" só enquanto o dedo/mouse está PRESSIONANDO o botão, apagando assim que solta — sem afetar os outros CTAs vermelhos do site (Sobre, Planos, Contato). Usamos a classe ".is-pressed" (controlada via JS em initHeroCtaGlow, script.js) em vez de só ":active": em iPhone/Android o ":active" de um link às vezes "gruda" quando o toque dispara a navegação (rolagem até a seção de Contato), então o JS garante que o brilho sempre apaga ao soltar/cancelar o toque, sem depender só do navegador. */ .hero__cta .btn--primary{ background:var(--color-blue); color:var(--color-white); box-shadow:0 8px 20px rgba(41,185,223,.4); transition:transform .25s ease, box-shadow .3s ease, background .25s ease; } .hero__cta .btn--primary.is-pressed{ background:#3fc6ea; box-shadow: 0 0 10px rgba(64,220,255,.9), 0 0 22px rgba(64,220,255,.75), 0 0 44px rgba(41,185,223,.6), 0 8px 20px rgba(41,185,223,.4); } .btn--nav{ padding:10px 22px; font-size:.9rem; } .btn--small{ padding:9px 18px; font-size:.82rem; } .btn .icon{ width:18px; height:18px; fill:currentColor; flex-shrink:0; } /* Selo/etiqueta pequena usado como "olho" no topo das seções */ .tag{ display:inline-block; font-family:var(--font-title); font-weight:600; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; background:rgba(41,185,223,.14); color:var(--color-blue-dark); padding:6px 16px; border-radius:999px; margin-bottom:14px; } .tag--center{ display:block; width:fit-content; margin-left:auto; margin-right:auto; } .highlight{ color:var(--color-red); position:relative; } /* Logo — imagem real fornecida pela cliente (PNG com fundo transparente, "LOGO ESPAÇO BABY PNG 1.png"), como uma marca-d'água/wordmark larga — por isso não é mais recortada em círculo/quadrado: exibimos na altura natural com largura automática, deixando a transparência se integrar direto no fundo do header/footer. */ .logo{ display:flex; align-items:center; flex-shrink:0; } .logo__img{ height:46px; width:auto; display:block; } .logo--footer{ margin-bottom:14px; } .logo__img--footer{ height:80px; width:auto; } /* ------------------------------------------------------------- 4. HEADER / MENU ------------------------------------------------------------- */ .header{ /* position:fixed em vez de "sticky": "sticky" + "transform" (usado pra esconder/mostrar o header ao rolar) tem bug conhecido em vários navegadores mobile — o elemento perde o comportamento "grudado" depois da primeira vez que o transform é aplicado, e o header some de vez. "fixed" não tem esse problema e é o padrão pra header que esconde/ mostra no scroll. Como ele sai do fluxo do documento, compensamos com "padding-top" no body (ver --header-height, calculado no JS). */ position:fixed; top:0; left:0; width:100%; z-index:100; /* Sem backdrop-filter aqui de propósito: um "backdrop-filter"/"filter" em qualquer elemento ancestral vira "containing block" para descendentes com position:fixed — e o .nav mobile (painel deslizante) é um deles. Isso quebrava a largura/posição do menu hambúrguer em telas pequenas (o menu abria "espremido", com uma letra por linha). Compensamos a opacidade do fundo pra manter a leitura de "vidro" sem o blur. */ background:rgba(235,243,243,.94); box-shadow:0 4px 18px rgba(45,42,38,.06); /* separa o header do conteúdo, igual ao efeito usado entre as seções */ transition:transform .3s ease, box-shadow .3s ease; } /* Ao rolar pra baixo, o header desliza pra fora da tela (ver initHeaderShadow() em script.js); ao rolar pra cima, volta — assim dá pra navegar de qualquer ponto da página sem precisar voltar ao topo. */ .header--hidden{ transform:translateY(-100%); } /* 3 zonas: logo (esquerda) | links de navegação (centro, no desktop) | grupo da direita (botão "Fale Conosco" no WhatsApp + hambúrguer). No mobile o .nav vira um painel deslizante (position:fixed), então ele sai do fluxo do flex e sobra só logo + header__right nas pontas. */ .header__inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 24px; gap:16px; } .header__right{ display:flex; align-items:center; gap:10px; flex-shrink:0; } .header__cta{ flex-shrink:0; } /* Ícone do Instagram no header, ao lado do CTA de WhatsApp — reaproveita as cores/estilo de ".social-btn" (seção Contato), só que menor para caber confortavelmente ao lado do menu e do botão de WhatsApp. */ .header__social{ width:36px; height:36px; } .header__social .icon{ width:17px; height:17px; } .nav__toggle{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; background:none; border:none; cursor:pointer; z-index:110; /* alguns navegadores mobile (Safari/Android) mantêm um "chrome" nativo de botão (fundo/relevo cinza-claro) mesmo com background/border zerados — appearance:none remove esse resquício, e tap-highlight-color evita o retângulo cinza que fica "grudado" um instante depois do toque. */ -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; } .nav__toggle span{ width:100%; height:3px; background:var(--color-dark); border-radius:3px; transition:.3s; } .nav__toggle.active span:nth-child(1){ transform:translateY(8px) rotate(45deg); } .nav__toggle.active span:nth-child(2){ opacity:0; } .nav__toggle.active span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); } .nav{ position:fixed; top:0; right:0; bottom:0; /* width fixo em vez de "inset" com % à esquerda: evita depender de como o navegador calcula o containing block do elemento fixed (mais robusto entre navegadores/telas), e o max-width evita um painel largo demais em phablets/telas maiores que ainda caem no breakpoint mobile. */ width:78%; max-width:320px; background:var(--color-white); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:22px; padding:24px 28px; /* overflow-x precisa ficar explícito: se só "overflow-y" for definido, o navegador computa o eixo oposto como "auto" também (regra da spec de overflow), o que criava uma barra de rolagem horizontal indesejada. */ overflow-x:hidden; overflow-y:auto; transform:translateX(100%); transition:transform .35s ease; z-index:105; } .nav.active{ transform:translateX(0); box-shadow:-10px 0 40px rgba(0,0,0,.15); } .nav__link{ font-family:var(--font-title); font-weight:600; font-size:1.3rem; color:var(--color-dark); } .nav__link:hover{ color:var(--color-blue-dark); } /* Em telas bem pequenas, esconde o texto do botão do header e mantém só o ícone do WhatsApp (em formato de círculo), pra não espremer contra a logo e o hambúrguer. */ @media (max-width:380px){ .header__cta{ padding:10px 14px; } .header__cta-label{ display:none; } .header__social{ width:32px; height:32px; } .header__social .icon{ width:15px; height:15px; } } /* Telas bem estreitas (celulares pequenos/antigos, ~360px ou menos, e janelas de navegador/preview bem estreitas): as grades de 2 colunas (estatísticas, planos, eventos, galeria) ficam apertadas demais — cada cartão vira 1 coluna só, ganhando largura de sobra para o texto/números não espremerem. */ @media (max-width:420px){ .container{ padding:0 16px; } .band{ padding:56px 12px; } .stats, .plans-grid, .events-grid, .gallery-grid{ grid-template-columns:1fr; } .stat-card__number{ font-size:2rem; } .testimonial-card{ width:82vw; max-width:250px; } } /* ------------------------------------------------------------- 5. HERO Foto real da fachada em tela cheia como fundo da seção, com o texto sobreposto por cima (não mais foto abaixo do texto) — formato inspirado em referência enviada pela cliente. Um degradê escuro (.hero__overlay) garante contraste do texto branco sobre a foto. ------------------------------------------------------------- */ .hero{ position:relative; min-height:82vh; display:flex; align-items:center; overflow:hidden; } .hero__bg{ position:absolute; inset:0; z-index:0; } .hero__bg img{ width:100%; height:100%; object-fit:cover; display:block; } /* Duas camadas de degradê: uma horizontal (escurece o lado onde o texto fica, mais forte no desktop) e uma vertical (escurece o rodapé, que é onde o texto cai no mobile, já que ali ele ocupa a largura toda). */ .hero__overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,18,15,.35) 0%, rgba(20,18,15,.3) 35%, rgba(20,18,15,.78) 100%), linear-gradient(90deg, rgba(20,18,15,.6) 0%, rgba(20,18,15,.3) 55%, rgba(20,18,15,.05) 100%); } .hero__inner{ position:relative; z-index:2; text-align:left; padding:120px 0 90px; } .hero__text{ max-width:640px; } .hero h1{ font-size:clamp(2rem, 6vw, 2.9rem); color:var(--color-white); } .hero__tag{ background:rgba(255,255,255,.16); color:var(--color-white); backdrop-filter:blur(4px); } .hero .highlight{ color:var(--color-gold); } .hero__subtitle{ font-size:1.05rem; color:rgba(255,255,255,.88); max-width:520px; margin:0 0 1em; } .hero__cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:flex-start; margin-top:24px; } .hero .hero__scroll span{ border-color:var(--color-white); } /* especificidade extra: .scroll-down span vem depois no arquivo (seção 10) e senão venceria */ /* ------------------------------------------------------------- 6. SEÇÕES — duas linguagens visuais diferentes de propósito ------------------------------------------------------------- Em vez de repetir sempre o mesmo "retângulo branco com sombra" para tudo (o que deixava o site sem hierarquia e sem dizer o que era cada parte), o site alterna dois tipos de seção — mas ambos compartilham o MESMO fundo do site inteiro (var(--color-bg)), sem blocos de cor cheia nem linhas divisórias: a diferenciação vem do layout interno (lista zigue-zague, "pills", cartões com barra colorida) e dos elementos decorativos (.deco-blob/.deco-emoji), não de retângulos de cor que cortam a imersão entre as seções. a) ".band" -> seção de largura total, sem moldura própria, usada em conteúdos "narrativos" (Sobre, Diferenciais, Atividades, Eventos). Pode receber balões/emoji decorativos (.deco-blob/.deco-emoji). b) ".section--panel" -> cartão branco flutuando sobre o fundo, reservado para conteúdos que pedem comparação lado a lado (Planos, Galeria) ou o fechamento do site (Contato, em versão escura). Essa alternância (banda / painel / banda / banda / painel / painel-escuro) já cria, por si só, ritmo e "respiro" entre as partes — sem precisar empilhar caixas idênticas nem usar cores de fundo diferentes por seção. ------------------------------------------------------------- */ /* --- a) Bandas de largura total (mesmo fundo do site) --- */ .band{ position:relative; /* sem overflow:hidden: deixamos os balões "vazarem" levemente para fora da banda — como o fundo é o mesmo do site inteiro, isso evita o efeito de bola cortada bem na borda e ajuda a conectar visualmente as seções. */ padding:64px 16px; } .band > .container{ position:relative; z-index:1; } /* fica acima dos balões decorativos */ /* --- b) Painéis brancos flutuantes --- */ .section{ padding:0 16px; margin:0; } .section--panel{ position:relative; padding:60px 16px; } .section--panel > .container{ background:var(--color-white); border-radius:32px; box-shadow:var(--shadow-panel); padding:56px 22px; } .section--panel.section--dark > .container{ background:var(--color-dark); color:var(--color-white); } .section--dark .section__lead{ color:rgba(255,255,255,.7); } .section__head{ text-align:center; max-width:640px; margin:0 auto 50px; } .section__lead{ color:var(--color-gray); font-size:1.05rem; } .section__note{ text-align:center; color:var(--color-gray); font-size:.85rem; margin-top:30px; font-style:italic; } /* ------------------------------------------------------------- Elementos decorativos (balões e bolhas) — dão um clima de "criança/bebê" às bandas coloridas, sem atrapalhar a leitura. São puramente visuais: position:absolute + aria-hidden. ------------------------------------------------------------- */ .deco-blob{ position:absolute; border-radius:50%; opacity:.35; pointer-events:none; z-index:0; } .deco-blob--sm{ width:90px; height:90px; } .deco-blob--md{ width:160px; height:160px; } .deco-blob--lg{ width:240px; height:240px; } .deco-blob--blue{ background:radial-gradient(circle, var(--color-blue) 0%, transparent 70%); } .deco-blob--gold{ background:radial-gradient(circle, var(--color-gold) 0%, transparent 70%); } .deco-blob--green{ background:radial-gradient(circle, var(--color-green) 0%, transparent 70%); } .deco-blob--red{ background:radial-gradient(circle, var(--color-red) 0%, transparent 70%); } .deco-blob--tl{ top:-40px; left:-40px; } .deco-blob--tr{ top:-30px; right:-50px; } .deco-blob--bl{ bottom:-50px; left:5%; } .deco-blob--br{ bottom:-40px; right:-30px; } .deco-blob--mid-right{ top:38%; right:-50px; } /* Emojis decorativos flutuantes (tema bebê/criança) — opacidade baixa para não competir com o conteúdo, escondidos em telas muito pequenas. */ .deco-emoji{ position:absolute; font-size:2.6rem; opacity:.2; pointer-events:none; z-index:0; display:none; } @media (min-width:600px){ .deco-emoji{ display:block; } } .deco-emoji--1{ top:14%; left:6%; transform:rotate(-12deg); } .deco-emoji--2{ bottom:10%; right:8%; transform:rotate(10deg); } .deco-emoji--3{ top:10%; right:10%; transform:rotate(8deg); } .deco-emoji--4{ bottom:14%; left:9%; transform:rotate(-10deg); } .deco-emoji--5{ top:12%; right:7%; transform:rotate(12deg); } .deco-emoji--6{ bottom:10%; left:10%; transform:rotate(-9deg); } .deco-emoji--7{ top:9%; left:8%; transform:rotate(-7deg); } .deco-emoji--8{ bottom:12%; right:9%; transform:rotate(11deg); } /* ------------------------------------------------------------- 7. BLOCOS DE CONTEÚDO ------------------------------------------------------------- */ /* Sobre — bloco de abertura em duas colunas: foto real recortada em "blob" orgânico (inspirado em referência enviada pela cliente) + texto/CTA ao lado. Empilha no mobile (foto em cima, texto embaixo). */ .about-grid{ display:grid; grid-template-columns:1fr; gap:36px; align-items:center; margin-bottom:56px; } .about-media{ position:relative; max-width:420px; margin:0 auto; } .about-media__bg{ position:absolute; inset:8% -8% -8% 10%; background:var(--color-gold); opacity:.4; border-radius:63% 37% 54% 46% / 55% 48% 52% 45%; z-index:0; } .about-media__blob{ position:relative; z-index:1; aspect-ratio:4/3.4; border-radius:63% 37% 54% 46% / 55% 48% 52% 45%; overflow:hidden; box-shadow:var(--shadow-panel); } .about-media__blob img{ width:100%; height:100%; object-fit:cover; display:block; } /* Selo circular com ícone de blocos de montar — inspirado no elemento "foto pequena no canto" da referência enviada pela cliente. Sem foto real de brinquedos disponível, usamos um emoji de blocos dentro de um círculo branco, no mesmo canto (inferior direito) da imagem principal. */ .about-media__badge{ position:absolute; z-index:2; right:-6px; bottom:6%; width:76px; height:76px; border-radius:50%; background:var(--color-white); box-shadow:var(--shadow-panel); display:flex; align-items:center; justify-content:center; font-size:2.1rem; } .about-content{ text-align:center; } .about-content .section__lead{ margin-bottom:22px; } /* Estatísticas (números animados via JS — ver animateCounter()). Cartões brancos para "saltarem" contra o fundo azulado da banda. */ .stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } .stat-card{ background:var(--color-white); border-radius:var(--radius); padding:28px 20px; text-align:center; box-shadow:var(--shadow); } .stat-card__number{ font-family:var(--font-title); font-size:2.4rem; font-weight:800; color:var(--color-blue-dark); } .stat-card__number--sm{ font-size:1.1rem; margin:0 2px; } .stat-card__suffix{ font-family:var(--font-title); font-weight:700; color:var(--color-red); margin-left:4px; } .stat-card p{ margin-top:8px; font-size:.88rem; color:var(--color-gray); } /* Diferenciais — lista "zigue-zague": ícone em círculo + texto ao lado, sem moldura própria (o conteúdo "respira" direto sobre a banda dourada). */ .feature-list{ display:flex; flex-direction:column; gap:34px; max-width:720px; margin:0 auto; } .feature-row{ display:flex; align-items:center; gap:20px; text-align:left; } .feature-row__icon{ flex-shrink:0; width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.7rem; background:var(--color-white); box-shadow:var(--shadow); } .feature-row__icon--blue{ background:var(--color-tint); } .feature-row__icon--gold{ background:var(--band-gold); } .feature-row__icon--green{ background:var(--band-green); } .feature-row__icon--red{ background:var(--band-red); } .feature-row__text h3{ font-size:1.1rem; margin-bottom:4px; } .feature-row__text p{ margin:0; color:var(--color-gray); font-size:.92rem; } /* Depoimentos — carrossel automático e contínuo (CSS puro, sem JS/lib externa), com avaliações de pais/responsáveis. A trilha (".testimonials__track") contém os mesmos cartões duas vezes seguidas; a animação desloca a trilha em exatamente -50% da sua largura total, então quando ela "recomeça" já está mostrando o grupo 2 (idêntico ao grupo 1) — o olho não percebe o corte e o efeito parece um loop infinito, sempre andando devagar para o mesmo lado (o primeiro cartão visível é sempre o do Fábio Gomes). Detalhe importante pro loop não "travar"/saltar no meio: o espaçamento entre os cartões é feito com "margin-right" em CADA cartão (inclusive o último), em vez do "gap" do flexbox. O "gap" só insere espaço ENTRE itens (não depois do último), então translateX(-50%) cairia meio "gap" antes do ponto certo — um salto pequeno, mas visível, a cada volta. Com margin-right em todos os cartões, cada um ocupa uma "fatia" idêntica da trilha, os dois grupos ficam com largura idêntica e o -50% alinha perfeitamente, sem travar. ".testimonials" quebra a largura do ".container" (vira 100vw) pra a "esteira" de cartões sair de ponta a ponta da tela, em vez de ficar presa à largura mais estreita do conteúdo — dá um efeito mais imersivo. A máscara nas bordas cria um fade suave de entrada/saída dos cartões. */ /* padding (não margin) de propósito: com margin no título, o espaço podia "colapsar" com o espaçamento da seção acima e ficar menor do que o definido — padding no wrapper garante a distância real na tela. */ .testimonials-wrap{ padding-top:160px; padding-bottom:60px; } .testimonials-title{ text-align:center; font-family:var(--font-title); font-size:2.3rem; font-weight:800; color:var(--color-blue-dark); letter-spacing:.01em; margin:0 0 28px; text-shadow:2px 3px 0 rgba(45,42,38,.18); } .testimonials{ width:100vw; margin-left:calc(50% - 50vw); overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } .testimonials__track{ display:flex; width:max-content; padding:4px 0; animation:testimonialsScroll 46s linear infinite; } /* Pausar no hover é só um "mimo" pra quem usa mouse conseguir parar e ler — em iPhone/Android (telas de toque) o CSS ":hover" fica "grudado" depois de um toque (não existe mouse pra "tirar" o hover), o que travava o carrossel pra sempre no celular. "(hover:hover) and (pointer:fine)" restringe essa regra só a dispositivos com mouse/trackpad de verdade. */ @media (hover:hover) and (pointer:fine){ .testimonials:hover .testimonials__track{ animation-play-state:paused; } } .testimonial-card{ flex-shrink:0; width:250px; margin-right:20px; background:#7EB6D9; border-radius:var(--radius); padding:26px 22px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px; } .testimonial-card__stars{ color:var(--color-white); font-size:1.05rem; letter-spacing:2px; } .testimonial-card__quote{ color:var(--color-white); font-size:.92rem; line-height:1.55; margin:0; flex-grow:1; } .testimonial-card__name{ color:var(--color-white); font-family:var(--font-title); font-weight:700; margin:0; } @keyframes testimonialsScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* Planos — pacotes por carga horária, SEM valores (a cliente prefere negociar o preço diretamente, por WhatsApp, em vez de deixá-lo público pra concorrência/clientes verem de cara). Em vez de cartões de preço, cada pacote vira um "chip" colorido e chamativo — o botão único abaixo da grade leva pro WhatsApp para consultar valores e condições. */ .plans-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } .plan-chip{ background:var(--color-white); border-radius:var(--radius); padding:26px 18px; text-align:center; box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease; cursor:pointer; /* flex em coluna + hint com margin-top:auto: garante que "Ver detalhes" fique sempre colado na base do quadrado, no mesmo nível em todos os cartões da linha — mesmo quando a descrição tem tamanhos diferentes (o grid já iguala a altura dos cartões da mesma linha). */ display:flex; flex-direction:column; align-items:center; height:100%; } .plan-chip:hover{ transform:translateY(-4px); box-shadow:var(--shadow-panel); } .plan-chip:focus-visible{ outline:3px solid var(--color-blue-dark); outline-offset:3px; } .plan-chip:nth-child(4n+1){ background:var(--color-white); } .plan-chip:nth-child(4n+2){ background:var(--band-gold); } .plan-chip:nth-child(4n+3){ background:var(--band-blue); } .plan-chip:nth-child(4n+4){ background:var(--band-red); } .plan-chip__icon{ display:flex; align-items:center; justify-content:center; margin:0 auto 12px; width:54px; height:54px; border-radius:50%; background:var(--color-white); font-size:1.5rem; box-shadow:var(--shadow); } .plan-chip h3{ font-size:1.1rem; margin-bottom:6px; color:var(--color-blue-dark); } .plan-chip p{ font-size:.86rem; color:var(--color-gray); margin:0; } /* Selinho "Ver detalhes" — deixa claro que o quadrado é clicável e abre mais informações sobre o pacote. */ .plan-chip__hint{ display:inline-flex; align-items:center; gap:4px; margin-top:auto; padding-top:14px; font-family:var(--font-title); font-size:.76rem; font-weight:700; color:var(--color-blue-dark); text-transform:uppercase; letter-spacing:.03em; } .plan-chip__hint::after{ content:'→'; transition:transform .2s ease; } .plan-chip:hover .plan-chip__hint::after, .plan-chip:focus-visible .plan-chip__hint::after{ transform:translateX(3px); } .plans-cta{ text-align:center; margin-top:36px; } /* ------------------------------------------------------------- Modal de detalhes do pacote (seção Planos) ------------------------------------------------------------- */ .plan-modal{ display:none; position:fixed; inset:0; z-index:200; align-items:center; justify-content:center; padding:24px; } .plan-modal.is-open{ display:flex; } .plan-modal__backdrop{ position:absolute; inset:0; background:rgba(45,42,38,.55); animation:planModalFade .2s ease; } .plan-modal__card{ position:relative; z-index:1; width:100%; max-width:420px; max-height:85vh; overflow-y:auto; background:var(--color-white); border-radius:var(--radius); box-shadow:var(--shadow-panel); padding:36px 28px 30px; text-align:center; animation:planModalPop .25s cubic-bezier(.2,.9,.3,1.3); } .plan-modal__close{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; border:none; background:var(--color-blue-dark); color:var(--color-white); font-size:1.4rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .2s ease, background .2s ease; } .plan-modal__close:hover{ background:var(--color-blue); transform:scale(1.08); } .plan-modal__icon{ display:flex; align-items:center; justify-content:center; margin:0 auto 14px; width:64px; height:64px; border-radius:50%; background:var(--band-blue); font-size:1.8rem; } .plan-modal__card h3{ font-size:1.3rem; color:var(--color-blue-dark); margin-bottom:8px; } .plan-modal__desc{ color:var(--color-gray); font-size:.92rem; margin:0 0 18px; } .plan-modal__list{ list-style:none; margin:0 0 24px; padding:0; text-align:left; display:flex; flex-direction:column; gap:10px; } .plan-modal__list li{ display:flex; align-items:flex-start; gap:8px; font-size:.9rem; color:var(--color-dark); } .plan-modal__list li::before{ content:'✓'; color:var(--color-blue-dark); font-weight:700; flex-shrink:0; } .plan-modal__cta{ width:100%; } @keyframes planModalFade{ from{ opacity:0; } to{ opacity:1; } } @keyframes planModalPop{ from{ opacity:0; transform:scale(.9) translateY(10px); } to{ opacity:1; transform:scale(1) translateY(0); } } @media (prefers-reduced-motion: reduce){ .plan-modal__backdrop, .plan-modal__card{ animation:none !important; } } /* Entrada com leve "zoom" via IntersectionObserver — classe genérica reaproveitada por atividades, eventos e fotos da galeria. */ .grow-on-scroll{ transform:scale(.85); opacity:0; transition:transform .5s ease, opacity .5s ease; } .grow-on-scroll.in-view{ transform:scale(1); opacity:1; } /* Atividades extracurriculares — "pills" coloridas em vez de cartões quadrados, com cores alternando entre as 4 cores da marca (nth-child), reforçando o clima leve e lúdico das atividades. */ .activities-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; max-width:760px; margin:0 auto; } .activity-card{ display:inline-flex; align-items:center; gap:10px; background:var(--color-white); border-radius:999px; padding:14px 24px; box-shadow:var(--shadow); } .activity-card:nth-child(4n+1){ background:var(--color-white); } .activity-card:nth-child(4n+2){ background:var(--band-gold); } .activity-card:nth-child(4n+3){ background:var(--band-blue); } .activity-card:nth-child(4n+4){ background:var(--band-red); } .activity-card__icon{ font-size:1.4rem; } .activity-card h3{ font-size:.96rem; margin:0; } /* Eventos — mantém grade de cartões, mas cada um ganha uma barra colorida no topo (alternando pelas 4 cores) para não parecerem todos idênticos. */ .events-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } .event-card{ background:var(--color-white); border-radius:var(--radius); padding:28px 16px; text-align:center; box-shadow:var(--shadow); border-top:5px solid var(--color-blue); } .event-card:nth-child(4n+1){ border-top-color:var(--color-blue); } .event-card:nth-child(4n+2){ border-top-color:var(--color-red); } .event-card:nth-child(4n+3){ border-top-color:var(--color-gold); } .event-card:nth-child(4n+4){ border-top-color:var(--color-green); } .event-card__icon{ font-size:2rem; display:block; margin-bottom:8px; } .event-card h3{ font-size:1rem; margin:0; } /* Galeria de fotos */ .gallery-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } .gallery-item{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); cursor:pointer; /* cada foto abre o lightbox (ver initGalleryLightbox() em script.js) */ } .gallery-item:focus-visible{ outline:3px solid var(--color-blue-dark); outline-offset:3px; } .gallery-item .photo-placeholder{ aspect-ratio:1/1; } .gallery-item img{ width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; display:block; transition:transform .4s ease; } .gallery-item:hover img{ transform:scale(1.06); } .gallery-item.grow-on-scroll{ transform:scale(.85); opacity:0; transition:transform .6s ease, opacity .6s ease; } .gallery-item.in-view{ transform:scale(1); opacity:1; } /* A foto da fachada só entra na grade no mobile — ela existe pra preencher o "buraco" que sobrava com 9 fotos em 2 colunas. No tablet/desktop (3 colunas) ela sobraria como uma 10ª foto solta numa linha própria, deixando um vão em branco enorme ao lado. Continua disponível no lightbox ("Ver mais fotos") mesmo escondida aqui, porque o JS lê as fotos direto do HTML, independente do CSS. */ @media (min-width:768px){ .gallery-item--mobile-only{ display:none; } } .gallery-cta{ text-align:center; margin-top:32px; } /* ------------------------------------------------------------- Lightbox da galeria — visualizador em tela cheia, no estilo do app de fotos de um celular: uma foto grande por vez, setas/swipe pra navegar, contador embaixo. Ver initGalleryLightbox() em script.js. ------------------------------------------------------------- */ .lightbox{ display:none; position:fixed; inset:0; z-index:300; align-items:center; justify-content:center; } .lightbox.is-open{ display:flex; } .lightbox__backdrop{ position:absolute; inset:0; background:rgba(10,9,8,.94); animation:planModalFade .2s ease; } .lightbox__figure{ position:relative; z-index:1; margin:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:70px 60px; gap:14px; } .lightbox__img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.5); animation:planModalPop .25s cubic-bezier(.2,.9,.3,1.3); user-select:none; -webkit-user-select:none; } .lightbox__counter{ color:rgba(255,255,255,.75); font-family:var(--font-title); font-weight:600; font-size:.85rem; } .lightbox__close, .lightbox__nav{ position:absolute; z-index:2; border:none; cursor:pointer; background:rgba(255,255,255,.12); color:var(--color-white); display:flex; align-items:center; justify-content:center; -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; transition:background .2s ease, transform .2s ease; } .lightbox__close:hover, .lightbox__nav:hover{ background:rgba(255,255,255,.24); } .lightbox__close{ top:16px; right:16px; width:44px; height:44px; border-radius:50%; font-size:1.6rem; line-height:1; } .lightbox__nav{ top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; font-size:1.8rem; line-height:1; } .lightbox__nav:hover{ transform:translateY(-50%) scale(1.06); } .lightbox__nav--prev{ left:10px; } .lightbox__nav--next{ right:10px; } /* Em telas pequenas, as fotos costumam ser verticais e ocupam a tela inteira — reduz o "respiro" ao redor e deixa as setas mais discretas (perto da borda) pra não roubar espaço da imagem. */ @media (max-width:600px){ .lightbox__figure{ padding:56px 14px 40px; } .lightbox__nav{ width:40px; height:40px; font-size:1.4rem; } .lightbox__nav--prev{ left:2px; } .lightbox__nav--next{ right:2px; } } /* Placeholder genérico usado enquanto uma foto real não é adicionada */ .photo-placeholder{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:linear-gradient(135deg, rgba(41,185,223,.18), rgba(144,238,144,.18)); color:var(--color-gray); font-family:var(--font-title); text-align:center; font-size:.95rem; } .photo-placeholder span{ font-size:2.4rem; } /* ------------------------------------------------------------- 8. CONTATO + MAPA ------------------------------------------------------------- */ /* Grid de contato: os 3 cartões têm a mesma altura (comportamento padrão do grid) e cada um é um flex column com a linha de botões empurrada para o fim via margin-top:auto — assim os botões ficam sempre alinhados na mesma altura, mesmo com textos de tamanhos diferentes acima. */ .contact-grid{ display:grid; grid-template-columns:1fr; gap:20px; } .contact-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); padding:28px 22px; text-align:center; display:flex; flex-direction:column; align-items:center; } .contact-card__icon{ font-size:2rem; display:block; margin-bottom:10px; } .contact-card h3{ font-size:1.05rem; } /* :not(.btn) é importante aqui: sem ele, essa regra (por ter um seletor a mais, ".contact-card a") vencia na especificidade do CSS sobre as cores próprias dos botões (.btn--whatsapp, .btn--ghost etc.) dentro do card, pintando o texto deles de dourado em vez de branco — só que dourado em cima do verde do WhatsApp fica com contraste ruim e difícil de ler. */ .contact-card a:not(.btn){ color:var(--color-gold); font-weight:600; } .contact-card a:not(.btn):hover{ text-decoration:underline; } /* Botões de redes sociais — círculos com ícone, em vez de links de texto. As cores de marca já aparecem direto (sem precisar de hover); o hover/ foco/clique só adiciona a escala + brilho, sinalizando que é clicável. */ .social-links{ display:flex; gap:12px; justify-content:center; margin-top:auto; padding-top:14px; } .social-btn{ display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; flex-shrink:0; transition:transform .25s ease, box-shadow .25s ease; } .social-btn .icon{ width:22px; height:22px; fill:var(--color-white); } .social-btn--instagram{ background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); } .social-btn--facebook{ background:#1877F2; } .social-btn:hover, .social-btn:focus-visible, .social-btn:active{ transform:scale(1.08); box-shadow:0 0 0 4px rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.18); } /* Frase curta pra preencher o espaço vazio entre o título "Redes sociais" e os botões circulares. */ .contact-card__subtitle{ font-size:.86rem; color:rgba(255,255,255,.6); margin:0 0 4px; max-width:220px; } /* Botões de endereço (copiar / ver no Maps) e WhatsApp do card de telefone — sempre a última coisa do cartão, empurrados para o fim com margin-top:auto. */ .contact-card__actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:auto; padding-top:14px; } .btn--ghost{ background:rgba(255,255,255,.1); color:var(--color-white); border-color:rgba(255,255,255,.35); } .btn--ghost:hover{ background:rgba(255,255,255,.2); } .btn--copied{ background:var(--color-green); border-color:var(--color-green); color:var(--color-dark); } /* Mapa incorporado do Google Maps */ .map-wrapper{ margin-top:36px; border-radius:28px; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:16/9; background:var(--color-tint); } .map-wrapper iframe{ width:100%; height:100%; border:0; display:block; } /* ------------------------------------------------------------- 9. FOOTER / WHATSAPP FLUTUANTE ------------------------------------------------------------- */ .footer{ background:var(--color-dark); color:rgba(255,255,255,.65); text-align:center; padding:48px 0 30px; } .footer__inner{ display:flex; flex-direction:column; align-items:center; } .footer__address{ font-size:.85rem; margin:0 0 20px; } .footer__divider{ width:44px; height:2px; background:rgba(255,255,255,.18); border-radius:2px; margin:0 0 20px; } .footer__copyright{ font-size:.8rem; margin:0 0 6px; color:rgba(255,255,255,.55); } .footer__credit{ font-size:.76rem; margin:0; letter-spacing:.02em; color:rgba(255,255,255,.38); } .footer__credit span{ color:rgba(255,255,255,.62); font-weight:600; } .whatsapp-float{ position:fixed; bottom:22px; right:22px; z-index:200; width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(37,211,102,.45); animation:pulse 2.4s infinite; } .whatsapp-float .icon{ width:30px; height:30px; fill:var(--color-white); } @keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.55); } 70%{ box-shadow:0 0 0 16px rgba(37,211,102,0); } 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); } } /* ------------------------------------------------------------- 10. ANIMAÇÕES DE SCROLL ------------------------------------------------------------- */ .scroll-down{ display:inline-block; margin-top:8px; } .scroll-down span{ display:block; width:22px; height:22px; border-right:3px solid var(--color-blue-dark); border-bottom:3px solid var(--color-blue-dark); transform:rotate(45deg); margin:0 auto; animation:bounce 1.6s infinite; } @keyframes bounce{ 0%,100%{ transform:rotate(45deg) translate(0,0);} 50%{ transform:rotate(45deg) translate(6px,6px);} } /* Fade/sobe ao entrar na tela — aplicado via classe .reveal + observer no JS */ .reveal{ opacity:0; transform:translateY(36px); transition:opacity .7s ease, transform .7s ease; } .reveal.in-view{ opacity:1; transform:translateY(0); } /* Cascata: itens dentro das grades (estatísticas, diferenciais, planos, atividades, eventos, galeria, contato) entram em sequência — não todos de uma vez — reforçando a sensação de "aparecendo com efeito" ao rolar a página. Como todos os cards de uma mesma linha cruzam o threshold do IntersectionObserver quase no mesmo instante, o delay é quem cria o espaçamento visual entre eles. */ .stats .stat-card:nth-child(1), .feature-list .feature-row:nth-child(1), .plans-grid .plan-chip:nth-child(1), .activities-grid .activity-card:nth-child(1), .events-grid .event-card:nth-child(1), .gallery-grid .gallery-item:nth-child(1), .contact-grid .contact-card:nth-child(1){ transition-delay:.03s; } .stats .stat-card:nth-child(2), .feature-list .feature-row:nth-child(2), .plans-grid .plan-chip:nth-child(2), .activities-grid .activity-card:nth-child(2), .events-grid .event-card:nth-child(2), .gallery-grid .gallery-item:nth-child(2), .contact-grid .contact-card:nth-child(2){ transition-delay:.11s; } .stats .stat-card:nth-child(3), .feature-list .feature-row:nth-child(3), .plans-grid .plan-chip:nth-child(3), .activities-grid .activity-card:nth-child(3), .events-grid .event-card:nth-child(3), .gallery-grid .gallery-item:nth-child(3), .contact-grid .contact-card:nth-child(3){ transition-delay:.19s; } .stats .stat-card:nth-child(4), .feature-list .feature-row:nth-child(4), .plans-grid .plan-chip:nth-child(4), .activities-grid .activity-card:nth-child(4), .events-grid .event-card:nth-child(4), .gallery-grid .gallery-item:nth-child(4), .contact-grid .contact-card:nth-child(4){ transition-delay:.27s; } .feature-list .feature-row:nth-child(5), .plans-grid .plan-chip:nth-child(5), .activities-grid .activity-card:nth-child(5), .events-grid .event-card:nth-child(5), .gallery-grid .gallery-item:nth-child(5){ transition-delay:.35s; } .feature-list .feature-row:nth-child(6), .plans-grid .plan-chip:nth-child(6), .activities-grid .activity-card:nth-child(6), .events-grid .event-card:nth-child(6), .gallery-grid .gallery-item:nth-child(6){ transition-delay:.43s; } .plans-grid .plan-chip:nth-child(7), .events-grid .event-card:nth-child(7), .gallery-grid .gallery-item:nth-child(7){ transition-delay:.51s; } .plans-grid .plan-chip:nth-child(8), .events-grid .event-card:nth-child(8), .gallery-grid .gallery-item:nth-child(8){ transition-delay:.59s; } .events-grid .event-card:nth-child(9), .gallery-grid .gallery-item:nth-child(9){ transition-delay:.67s; } .gallery-grid .gallery-item:nth-child(10){ transition-delay:.75s; } /* O bloco "Sobre" (foto blob + texto) entra em duas etapas: a foto primeiro, o texto logo em seguida. */ .about-media.reveal{ transition-delay:0s; } .about-content.reveal{ transition-delay:.12s; } /* Respeita usuários que pedem menos animação no sistema operacional */ @media (prefers-reduced-motion: reduce){ .reveal, .grow-on-scroll, .activity-card, .event-card, .gallery-item{ transition:none !important; opacity:1 !important; transform:none !important; } .testimonials__track{ animation:none !important; overflow-x:auto; } } /* ------------------------------------------------------------- 11. RESPONSIVO — Tablet (≥768px) e Desktop (≥1024px) ------------------------------------------------------------- */ @media (min-width:768px){ .section--panel{ padding:60px 32px; } .section--panel > .container{ padding:80px 48px; border-radius:40px; } .testimonial-card{ width:300px; } .nav__toggle{ display:none; } .nav{ position:static; height:auto; width:auto; max-width:none; overflow:visible; flex-direction:row; align-items:center; padding:0; transform:none; box-shadow:none; background:transparent; gap:28px; } /* Vira grid de 3 colunas pra centralizar de verdade os links no meio da barra, independente da largura da logo ou do botão da direita. */ .header__inner{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; } .nav{ justify-self:center; } .header__right{ justify-self:end; } .logo__img{ height:54px; } .about-grid{ grid-template-columns:1fr 1fr; gap:56px; text-align:left; } .about-media{ max-width:none; margin:0; } .about-content{ text-align:left; } .stats{ grid-template-columns:repeat(4,1fr); } .plans-grid{ grid-template-columns:repeat(4,1fr); } .events-grid{ grid-template-columns:repeat(3,1fr); } .gallery-grid{ grid-template-columns:repeat(3,1fr); } .contact-grid{ grid-template-columns:repeat(2,1fr); } /* Diferenciais em zigue-zague: a partir daqui as linhas pares invertem de lado, criando o efeito alternado mencionado na seção 7. */ .feature-row:nth-child(even){ flex-direction:row-reverse; text-align:right; } .band{ padding:90px 32px; } } @media (min-width:1024px){ .contact-grid{ grid-template-columns:repeat(4,1fr); } }