/* ================================================ GARANTIA - OBRIGADO EM ESTILO REELS Template de página WordPress. Todo o conteúdo próprio fica escopado sob .gz-obrigado pra não vazar pro header/rodapé/Elementor do tema (mesmo padrão da home, ver ../home/home-garantia.css). Prefixo de classes do conteúdo: obg- Tipografia oficial: Gotham + Arista (via /wp-content/uploads/fonts/) ================================================ */ /* ---- Tokens do Design System (fonte: ../../_shared/design-system/tokens.css) Este arquivo não importava tokens.css; os valores usados aqui foram copiados literalmente da fonte de verdade em 2026-07-10 (migração visual-neutra). --cinza-500 e --tinta já nascem "mais escuros" no tokens.css oficial (pedido do Ian) — ver NOTAs pontuais abaixo. ---- */ :root { --vermelho: #E60000; --branco: #FFFFFF; --tinta: #111115; /* colapsa #111/#1a1a1a/#222 deste arquivo */ --preto: #0A0A0A; /* colapsa #050505 deste arquivo (ver NOTA na media query desktop) */ --cinza-500: #54555C; /* colapsa #555 deste arquivo — era #62636A na proposta; mais escuro por pedido do Ian */ --raio-sm: 8px; --raio-pill: 999px; --raio-circulo: 50%; } /* ---- Fontes: global e sem escopo de propósito (@font-face não pode ser escopado por seletor; precisa ficar disponível pro documento) ---- */ @font-face { font-family: 'Gotham'; src: url('/wp-content/uploads/fonts/Gotham-Book.otf') format('opentype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Gotham'; src: url('/wp-content/uploads/fonts/Gotham-Medium.otf') format('opentype'); font-weight: 500 600; font-display: swap; } @font-face { font-family: 'Gotham'; src: url('/wp-content/uploads/fonts/Gotham-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Gotham'; src: url('/wp-content/uploads/fonts/Gotham-Black.otf') format('opentype'); font-weight: 800 900; font-display: swap; } @font-face { font-family: 'Arista'; src: url('/wp-content/uploads/fonts/Arista2.0Alternate.ttf') format('truetype'); font-weight: 400; font-display: swap; } /* ---- Scroll do documento ---- scroll-snap-type precisa viver no elemento realmente rolável. Nesta página o scroll é o do (o conteúdo está dentro de
, que não é o container que rola), então esta regra NÃO dá pra escopar sob .gz-obrigado. É seguro deixar sem prefixo porque este CSS só é enfileirado nesta página (ver page-obrigado-garantia.php). */ html, body { overflow: hidden !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } /* Snap forte (mandatory + scroll-snap-stop: always em .obg-reel, abaixo): ao rolar, pula direto de um reel pro próximo, sem parar no meio. Se o header do tema (Elementor) virar fixed e cobrir o topo dos reels, ajustar scroll-padding-top no html (ou esconder o header nesta página) pra o snap não parar com o vídeo coberto. */ /* ---- Reset (escopado: sem isso, zeraria margin/padding do header/rodapé do tema, que também está nesta página) ---- */ .gz-obrigado, [class^="obg-"], [class^="obg-"] *, [class^="obg-"] *::before, [class^="obg-"] *::after { box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; } .gz-obrigado { font-family: 'Gotham', -apple-system, BlinkMacSystemFont, sans-serif !important; overflow-x: hidden !important; -webkit-font-smoothing: antialiased !important; background: var(--preto) !important; height: 100dvh !important; width: 100vw !important; overflow-y: scroll !important; scroll-snap-type: y mandatory !important; scroll-behavior: smooth !important; -webkit-overflow-scrolling: touch !important; } .gz-obrigado::-webkit-scrollbar { display: none !important; } .gz-obrigado.is-free-scroll { scroll-snap-type: none !important; } .gz-obrigado :not(footer):not(.elementor-location-footer) > button { font-family: inherit !important; background: none !important; border: none !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; } .gz-obrigado :not(footer):not(.elementor-location-footer) > img, .gz-obrigado :not(footer):not(.elementor-location-footer) > video { display: block !important; max-width: 100% !important; } /* Página de obrigado sem header padrão do tema */ .elementor-location-header, header.elementor-location-header, .elementor-location-header .elementor { display: none !important; } /* Remover botao whats (OBRIGATÓRIO) */ #elementor-popup-modal-607 { display: none !important; visibility: hidden !important; } /* ================================================ TELA 0 - CONFIRMAÇÃO (fundo branco) ================================================ */ .gz-obrigado .obg-screen0 { position: relative !important; background: var(--branco) !important; display: flex !important; flex-direction: column !important; padding: 5vh 5% 3vh !important; scroll-snap-align: start !important; } /* ---- Logo no topo ---- */ .gz-obrigado .obg-logo-area { text-align: center !important; padding-bottom: 1.5vh !important; } .gz-obrigado .obg-logo { max-height: 111px !important; width: auto !important; margin: 0 auto !important; animation: obgFade 0.5s ease both !important; } /* ---- Conteúdo principal ---- */ .gz-obrigado .obg-content { flex: 1 !important; width: 100% !important; max-width: 440px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; justify-content: center !important; padding: 2vh 0 !important; } /* ---- Check wrapper (idêntico ao obrigado.html atual) ---- */ .gz-obrigado .obg-check-wrap { position: relative !important; width: 90px !important; height: 90px !important; margin: 0 auto 20px !important; } .gz-obrigado .obg-ripple { position: absolute !important; inset: 0 !important; border-radius: var(--raio-circulo) !important; border: 2px solid var(--vermelho) !important; opacity: 0 !important; animation: rippleOut 1.5s ease-out forwards !important; } .gz-obrigado .obg-ripple.r1 { animation-delay: 0.30s !important; } .gz-obrigado .obg-ripple.r2 { animation-delay: 0.75s !important; } /* @keyframes não pode ser escopado por seletor (não existe ".gz-obrigado @keyframes"): o nome é global no documento. O risco de colisão é baixo porque os nomes já são específicos deste componente (rippleOut, checkPop, textRise, obgFade, obgArrowBounce), então ficam sem prefixo. */ @keyframes rippleOut { 0% { transform: scale(1); opacity: 0.65; } 100% { transform: scale(2.4); opacity: 0; } } .gz-obrigado .obg-circle { position: relative !important; width: 90px !important; height: 90px !important; border-radius: var(--raio-circulo) !important; background: var(--vermelho) !important; display: flex !important; align-items: center !important; justify-content: center !important; animation: checkPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both !important; animation-delay: 0.05s !important; box-shadow: 0 6px 28px rgba(230, 0, 0, 0.30) !important; } @keyframes checkPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 80% { transform: scale(0.93); } 100% { transform: scale(1); opacity: 1; } } /* ---- Textos ---- */ .gz-obrigado .obg-title { width: 100% !important; font-family: 'Arista', 'Gotham', sans-serif !important; font-size: 1.85rem !important; font-weight: 400 !important; color: var(--tinta) !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; line-height: 1.15 !important; margin-bottom: 8px !important; animation: textRise 0.5s ease both !important; animation-delay: 0.55s !important; } .gz-obrigado .obg-subtitle { width: 100% !important; font-size: 1.05rem !important; font-weight: 700 !important; color: var(--vermelho) !important; letter-spacing: -0.01em !important; line-height: 1.3 !important; margin-bottom: 10px !important; animation: textRise 0.5s ease both !important; animation-delay: 0.70s !important; } /* Marca "Garantia" sempre em Arista 2.0, em qualquer texto visível */ .gz-obrigado .obg-brand { font-family: 'Arista', 'Gotham', sans-serif !important; } .gz-obrigado .obg-sub { width: 100% !important; font-size: 0.9rem !important; font-weight: 500 !important; color: var(--cinza-500) !important; line-height: 1.65 !important; animation: textRise 0.5s ease both !important; animation-delay: 0.88s !important; } @keyframes textRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes obgFade { from { opacity: 0; } to { opacity: 1; } } /* ---- Nudge de scroll ---- */ .gz-obrigado .obg-nudge { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important; width: 100% !important; padding-top: 1vh !important; animation: obgFade 0.6s ease both !important; animation-delay: 1.1s !important; } .gz-obrigado .obg-nudge__text { font-size: 0.82rem !important; font-weight: 600 !important; color: var(--tinta) !important; letter-spacing: 0.01em !important; } .gz-obrigado .obg-nudge__arrow { display: flex !important; animation: obgArrowBounce 1.6s ease-in-out infinite !important; } @keyframes obgArrowBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } /* ================================================ FEED DE REELS (fundo preto) ================================================ */ .gz-obrigado .obg-feed { background: var(--preto) !important; } .gz-obrigado .obg-reel { position: relative !important; height: 100dvh !important; width: 100vw !important; scroll-snap-align: start !important; scroll-snap-stop: always !important; /* snap forte: nunca pula por cima de um reel sem parar nele */ scroll-margin-top: 0 !important; /* se o header do tema virar fixed, ajustar (ver nota no topo do arquivo) */ overflow: hidden !important; background: var(--preto) !important; flex-shrink: 0 !important; } .gz-obrigado .obg-reel__video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; background: var(--preto) !important; } /* Gradiente pra legibilidade da placa. Não intercepta toque: o toque passa pro vídeo. */ .gz-obrigado .obg-reel__gradient { position: absolute !important; inset: 0 !important; background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,0.75) 100%) !important; pointer-events: none !important; } /* Botão de play manual (reduced-motion / save-data) */ .gz-obrigado .obg-reel__playbtn { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 64px !important; height: 64px !important; border-radius: var(--raio-circulo) !important; background: rgba(0, 0, 0, 0.55) !important; border: 2px solid rgba(255, 255, 255, 0.85) !important; display: none !important; align-items: center !important; justify-content: center !important; z-index: 20 !important; } /* A classe obg-no-autoplay é adicionada em document.body (pelo JS), não dentro de .gz-obrigado — por isso o seletor combina "body.classe" como ancestral de ".gz-obrigado", em vez de ".gz-obrigado body.classe". */ body.obg-no-autoplay .gz-obrigado .obg-reel__playbtn { display: flex !important; } body.obg-no-autoplay .gz-obrigado .obg-reel__playbtn.obg-played { display: none !important; } /* Botão de som */ .gz-obrigado .obg-reel button.obg-reel__sound { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 50px !important; height: 50px !important; background-color: rgba(0, 0, 0, 0.5) !important; background-image: none !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; border-radius: var(--raio-circulo) !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 30 !important; pointer-events: none !important; /* Deixa o clique passar pro vídeo */ transition: opacity 0.3s ease !important; } .gz-obrigado .obg-reel button.obg-reel__sound.is-hidden { opacity: 0 !important; pointer-events: none !important; } .gz-obrigado .obg-reel__sound svg { width: 20px !important; height: 20px !important; fill: none !important; stroke: var(--branco) !important; } .gz-obrigado .obg-reel__sound .obg-icon-on { display: none !important; } .gz-obrigado .obg-reel__sound.is-unmuted .obg-icon-off { display: none !important; } .gz-obrigado .obg-reel__sound.is-unmuted .obg-icon-on { display: block !important; } /* Opcional: Se quiser que ele suma após ativar o som, descomente abaixo. Como o usuário pediu para alternar os ícones, vamos mantê-lo visível no canto! */ /* .gz-obrigado .obg-reel__sound.is-unmuted { opacity: 0 !important; } */ /* Placa de nome + legenda */ .gz-obrigado .obg-reel__plate { position: absolute !important; left: 18px !important; right: 70px !important; bottom: calc(20px + env(safe-area-inset-bottom)) !important; z-index: 10 !important; pointer-events: none !important; } .gz-obrigado .obg-reel__name { display: none !important; } .gz-obrigado .obg-reel__profile { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 8px !important; text-decoration: none !important; pointer-events: auto !important; } .gz-obrigado .obg-reel__avatar { width: 36px !important; height: 36px !important; border-radius: var(--raio-circulo) !important; object-fit: cover !important; border: 2px solid var(--branco) !important; } .gz-obrigado .obg-reel__author { color: var(--branco) !important; font-size: 1.05rem !important; font-weight: 700 !important; text-shadow: 0 1px 6px rgba(0,0,0,0.5) !important; } .gz-obrigado .obg-reel__caption { color: rgba(255, 255, 255, 0.9) !important; font-size: 0.9rem !important; font-weight: 500 !important; } /* Ações laterais (Reels) */ .gz-obrigado .obg-reel__actions { position: absolute !important; right: 14px !important; bottom: calc(30px + env(safe-area-inset-bottom)) !important; display: flex !important; flex-direction: column !important; gap: 20px !important; z-index: 20 !important; } .gz-obrigado .obg-reel__action { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; color: var(--branco) !important; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)) !important; transition: transform 0.2s ease !important; } .gz-obrigado .obg-reel__action:active { transform: scale(0.9) !important; } .gz-obrigado .obg-reel__action svg { width: 32px !important; height: 32px !important; } .gz-obrigado .obg-reel__action.is-liked svg { fill: var(--vermelho) !important; stroke: var(--vermelho) !important; } .gz-obrigado .obg-action-count { font-size: 0.85rem !important; font-weight: 600 !important; text-shadow: 0 1px 4px rgba(0,0,0,0.6) !important; } /* ================================================ MURO DE FOTOS ================================================ */ .gz-obrigado .obg-wall { background: var(--preto) !important; padding: 8vh 5% 7vh !important; scroll-snap-align: start !important; } .gz-obrigado .obg-wall__title { font-family: 'Arista', 'Gotham', sans-serif !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; color: var(--branco) !important; font-size: 1.2rem !important; text-align: center !important; margin-bottom: 4vh !important; } .gz-obrigado .obg-wall__grid { max-width: 560px !important; margin: 0 auto !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .gz-obrigado .obg-wall__card { position: relative !important; aspect-ratio: 3 / 4 !important; overflow: hidden !important; border-radius: var(--raio-sm) !important; /* NOTA: era 6px, aproximado para --raio-sm (8px), vizinho mais próximo da escala */ background: var(--tinta) !important; } .gz-obrigado .obg-wall__img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .gz-obrigado .obg-wall__overlay { position: absolute !important; inset: 0 !important; background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.8) 100%) !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; padding: 10px !important; } .gz-obrigado .obg-wall__name { color: var(--branco) !important; font-size: 0.82rem !important; font-weight: 700 !important; line-height: 1.2 !important; } .gz-obrigado .obg-wall__caption { color: rgba(255, 255, 255, 0.88) !important; font-size: 0.74rem !important; font-weight: 500 !important; margin-top: 2px !important; } /* ================================================ TELA FINAL - FECHAMENTO (fundo preto) ================================================ */ .gz-obrigado .obg-final { background: var(--preto) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 4vh 7% 10vh !important; } .gz-obrigado .obg-final__inner { max-width: 420px !important; margin: 0 auto !important; } .gz-obrigado .obg-final__title { font-family: 'Arista', 'Gotham', sans-serif !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; color: var(--branco) !important; font-size: 1.7rem !important; line-height: 1.2 !important; margin-bottom: 14px !important; } .gz-obrigado .obg-final__text { color: rgba(255, 255, 255, 0.72) !important; font-size: 0.92rem !important; font-weight: 500 !important; line-height: 1.6 !important; margin-bottom: 32px !important; } .gz-obrigado .obg-cta { display: inline-flex !important; align-items: center !important; gap: 9px !important; background: var(--vermelho) !important; color: var(--branco) !important; font-size: 0.95rem !important; font-weight: 700 !important; padding: 14px 28px !important; border-radius: var(--raio-pill) !important; text-decoration: none !important; box-shadow: 0 8px 24px rgba(230, 0, 0, 0.35) !important; } /* ================================================ DESKTOP / TABLET (Modo App) ================================================ */ @media (min-width: 768px) { body { background-color: var(--preto) !important; /* NOTA: era #050505 (levemente mais escuro que --preto #0A0A0A); colapsado no token por tokens.css */ } .gz-obrigado { /* Largura calculada exatamente na proporção 9:16 de um vídeo em pé (100dvh * 9/16) */ width: calc(100dvh * 0.5625) !important; max-width: 100vw !important; margin: 0 auto !important; border-left: 1px solid var(--tinta) !important; border-right: 1px solid var(--tinta) !important; position: relative !important; box-shadow: 0 0 40px rgba(0,0,0,0.8) !important; } .gz-obrigado .obg-reel { width: 100% !important; /* Override 100vw */ } /* Força o footer do Elementor a empilhar as colunas (layout mobile) já que ele está preso num container de 450px no desktop */ .gz-obrigado footer .elementor-container, .gz-obrigado .elementor-location-footer .elementor-container { flex-wrap: wrap !important; } .gz-obrigado footer .elementor-column, .gz-obrigado .elementor-location-footer .elementor-column, .gz-obrigado footer .elementor-widget-wrap, .gz-obrigado .elementor-location-footer .elementor-widget-wrap { width: 100% !important; display: block !important; } }