/* ========================================================================== SpeakPro — Página de vendas, DOBRA 1 opção C (capa de vendas) Depende de brand.css e de vendas-b.css (benefícios, time, teste, botões). ========================================================================== */ /* -------------------------------------------------------------------------- Topo: faixa da oferta + barra branca enxuta -------------------------------------------------------------------------- */ .topbar { background: var(--navy); color: #c3c3e6; text-align: center; font-size: var(--t-xs); letter-spacing: .02em; padding: 8px var(--gutter); display: flex; flex-direction: column; gap: 3px; } .topbar__linha { line-height: 1.45; } .topbar b { color: var(--white); font-weight: 700; } .topbar a { color: #ffb489; text-decoration: none; border-bottom: 1px solid rgba(255,180,137,.5); } .topbar a:hover { color: var(--white); border-color: var(--white); } .site-header--venda .site-nav { gap: 14px; } .site-header--venda .site-nav a:not(.btn):not(.nav-aluno) { color: var(--navy); font-weight: 600; font-size: var(--t-sm); padding: 6px 2px; border-radius: 0; border-bottom: 2px solid transparent; } .site-header--venda .site-nav a:not(.btn):not(.nav-aluno):hover { background: transparent; color: var(--royal); border-bottom-color: var(--orange); } .site-header--venda .btn, .site-header--venda .site-nav .btn { background: var(--orange); border-color: var(--orange); color: var(--white); padding: 12px 24px; } .site-header--venda .btn:hover, .site-header--venda .site-nav .btn:hover { background: #e04e00; border-color: #e04e00; color: var(--white); } /* -------------------------------------------------------------------------- Fundo da dobra -------------------------------------------------------------------------- */ .hc { position: relative; overflow: hidden; background: radial-gradient(80% 90% at 50% -8%, #33338a 0%, rgba(51, 51, 138, 0) 60%), radial-gradient(70% 80% at 100% 62%, rgba(75, 75, 255, .34) 0%, rgba(75, 75, 255, 0) 62%), var(--navy); color: #d5d5ee; padding-bottom: clamp(52px, 6vw, 92px); } .hc::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 1px, transparent 1px 14px); pointer-events: none; } .hc > * { position: relative; } /* -------------------------------------------------------------------------- A chamada -------------------------------------------------------------------------- */ .hc__head { display: flex; flex-direction: column; align-items: center; gap: 15px; text-align: center; padding-top: clamp(30px, 4vw, 50px); padding-bottom: clamp(28px, 3.5vw, 44px); } .hc .eyebrow { color: #9a9aff; letter-spacing: .12em; align-items: baseline; } .hc .eyebrow::before { transform: translateY(-.28em); } .hc h1 { color: var(--white); font-size: clamp(2rem, 1.1rem + 3.2vw, 3.7rem); line-height: 1.07; letter-spacing: -.03em; } .hc h1 .mark { line-height: 1.2; } .hc__promise { font-size: clamp(.9375rem, .86rem + .38vw, 1.25rem); line-height: 1.4; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #a9a9ff; margin-top: 2px; } /* Chapéu, título e promessa dividem a mesma medida de linha. */ .hc__head > * { width: 100%; max-width: 660px; } /* -------------------------------------------------------------------------- A capa: nós de um lado e do outro, o vídeo no meio -------------------------------------------------------------------------- */ .hc__band { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.5fr) minmax(0, .62fr); gap: 10px; align-items: stretch; width: min(100% - 2 * var(--gutter), 1280px); margin-inline: auto; } .hc__foto { margin: 0; overflow: hidden; border-radius: var(--r-md); background: #2b2b62; } .hc__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform .5s cubic-bezier(.22, .8, .3, 1); } .hc__foto:hover img { transform: scale(1.04); } .hc__video { display: flex; flex-direction: column; gap: 10px; justify-content: center; } .hc__video .vcall { align-self: center; } .hc__video .video { border-radius: var(--r-md); border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 22px 70px rgba(0, 0, 0, .5); } /* -------------------------------------------------------------------------- A faixa de palavras -------------------------------------------------------------------------- */ .hc__palavras { margin-top: clamp(22px, 3vw, 34px); padding-block: 14px; background: transparent; border-block: 1px solid rgba(255, 255, 255, .13); } .hc__palavras .marquee__track { gap: 0; } .hc__palavras .marquee__item { padding: 0 0 0 4px; border: 0; border-radius: 0; color: #8f8fff; font-size: var(--t-sm); font-weight: 700; letter-spacing: .06em; } .hc__palavras .marquee__item::after { content: "\2022"; color: var(--orange); margin-inline: 18px 14px; } /* -------------------------------------------------------------------------- Dor, solução e botão -------------------------------------------------------------------------- */ .hc__pain { font-size: var(--t-md); line-height: 1.7; color: #c3c3e6; max-width: 56ch; margin-top: 4px; } .hc__pain b { color: var(--white); font-weight: 700; } .hc__solve { font-size: var(--t-sm); line-height: 1.7; color: #a8a8d2; max-width: 52ch; text-align: left; padding-left: 16px; border-left: 3px solid var(--orange); } .hc__solve strong { color: var(--white); font-weight: 700; } .hc__cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 6px; } .hc__micro { font-size: var(--t-xs); line-height: 1.6; color: #9494bd; text-align: center; } .hc .hb__benefits { margin-top: clamp(36px, 4.5vw, 62px); } /* -------------------------------------------------------------------------- Botão turquesa, pro teste (Turquesa Med do manual) -------------------------------------------------------------------------- */ .btn--teal { background: transparent; color: var(--teal); border: 2px solid var(--teal); } .btn--teal:hover { background: var(--teal); color: #05302a; border-color: var(--teal); } .hb__teste--teal { background: linear-gradient(120deg, rgba(0, 200, 160, .16), rgba(0, 200, 160, .04)); border-color: rgba(0, 200, 160, .45); } .hb__teste--teal .hb__teste-tag { color: var(--teal); } /* -------------------------------------------------------------------------- Responsivo -------------------------------------------------------------------------- */ @media (max-width: 900px) { .hc h1 { max-width: none; } .hc__band { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "video video" "esq dir"; } .hc__video { grid-area: video; } .hc__foto--esq { grid-area: esq; aspect-ratio: 1 / 1; } .hc__foto--dir { grid-area: dir; aspect-ratio: 1 / 1; } .hc__cta { width: 100%; } .hc__cta .btn { width: 100%; } } @media (max-width: 620px) { .topbar { font-size: .75rem; } .site-header--venda .site-nav .btn { width: 100%; } } /* -------------------------------------------------------------------------- Peso da fonte: o manual vai de Light (300) a ExtraBold (800). Não existe 900. -------------------------------------------------------------------------- */ .hc h1, .hb h1 { font-weight: 800; } /* -------------------------------------------------------------------------- "Já sou aluno" no menu -------------------------------------------------------------------------- */ .site-header--venda .site-nav a.nav-aluno { color: var(--grey-1); font-weight: 600; font-size: var(--t-sm); padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); } .site-header--venda .site-nav a.nav-aluno:hover { color: var(--navy); border-color: var(--navy); background: var(--paper); } /* -------------------------------------------------------------------------- Barra fixa, sempre visível -------------------------------------------------------------------------- */ .sticky-cta--sempre { display: flex; } body.has-sticky-cta { padding-bottom: 92px; } .sticky-cta--sempre .sticky-cta__price strong { color: var(--white); } @media (min-width: 761px) { .sticky-cta--sempre { left: auto; right: 22px; bottom: 22px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .2); padding: 10px 12px 10px 22px; gap: 18px; box-shadow: 0 18px 44px rgba(0, 0, 0, .38); } .sticky-cta--sempre .btn { max-width: none; white-space: nowrap; } body.has-sticky-cta { padding-bottom: 0; } } @media (max-width: 760px) { .zap { left: 14px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); width: 48px; height: 48px; } .zap svg { width: 26px; height: 26px; } .sticky-cta--sempre { gap: 10px; padding-inline: 14px; } .sticky-cta--sempre .sticky-cta__price { font-size: .6875rem; line-height: 1.25; } .sticky-cta--sempre .sticky-cta__price strong { font-size: 1.0625rem; } .sticky-cta--sempre .btn { flex: 1 1 auto; max-width: none; font-size: .6875rem; letter-spacing: .06em; padding: 13px 12px; white-space: nowrap; } } /* -------------------------------------------------------------------------- Ícones dos benefícios nas cores do manual -------------------------------------------------------------------------- */ .benef__ico--azul { background: rgba(75, 75, 255, .22); color: #9a9aff; } .benef__ico--teal { background: rgba(0, 200, 160, .18); color: var(--teal); } .benef__ico--violeta { background: rgba(140, 70, 220, .26); color: #c79bff; } .benef__ico--laranja { background: rgba(255, 90, 0, .18); color: #ffb489; } .benef__item:hover { border-color: rgba(255, 255, 255, .3); } /* ========================================================================== Entenda a metodologia ========================================================================== */ .hc__metodo { padding-bottom: clamp(14px, 2vw, 24px); } .hc__metodo-head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin-bottom: 0; } .hc__metodo-head h2 { color: var(--white); font-size: var(--t-2xl); font-weight: 800; letter-spacing: -.025em; } .hc__metodo .hc__band { width: 100%; } /* ========================================================================== Quem treina você ========================================================================== */ .hb__bt--time { width: 100%; margin-bottom: 4px; } .hc .hb__time { margin-top: clamp(38px, 4.5vw, 62px); } /* ========================================================================== Responsivo ========================================================================== */ @media (max-width: 900px) { .hc__story { grid-template-columns: 1fr; gap: 26px; } .stream { height: 300px; order: -1; } .typewriter { min-height: 0; } } @media (prefers-reduced-motion: reduce) { .stream__track { animation: none; } .btn--brilho::after { animation: none; display: none; } .zap { animation: none; } .typewriter .cursor::after { animation: none; opacity: 0; } } /* Botão secundário do teste, logo abaixo do principal */ /* ========================================================================== A história: dor digitando, curso passando, solução digitando ========================================================================== */ .hc__story { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; padding-block: clamp(18px, 2.5vw, 30px); } .hc__story--fim { padding-bottom: clamp(30px, 4vw, 52px); } .typewriter { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; } .hc__story .hc__pain { font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem); line-height: 1.85; color: #c9c9ea; max-width: 74ch; margin: 0; text-wrap: balance; } .hc__story .hc__pain b { color: var(--white); font-weight: 700; } .hc__story .hc__solve { font-size: var(--t-base); line-height: 1.7; color: #a8a8d2; max-width: 62ch; min-height: 4.7em; text-align: left; padding-left: 18px; border-left: 3px solid var(--orange); margin: 0; } .hc__story .hc__solve b { color: var(--white); font-weight: 700; } /* ---- A barra de digitação ---- */ .cursor::after { content: ""; display: inline-block; width: 3px; height: 1.05em; margin-left: 3px; vertical-align: -.16em; background: var(--orange); border-radius: 1px; animation: piscacursor .78s steps(1) infinite; } @keyframes piscacursor { 0%, 52% { opacity: 1; } 53%, 100% { opacity: 0; } } /* ========================================================================== Faixa de imagens do curso, passando na horizontal ========================================================================== */ .faixa { overflow: hidden; padding-block: clamp(6px, 1.4vw, 16px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .faixa__track { display: flex; width: max-content; gap: 16px; animation: correfaixa 58s linear infinite; } .faixa:hover .faixa__track { animation-play-state: paused; } .faixa img { flex: none; height: clamp(148px, 17vw, 232px); width: auto; border-radius: var(--r-md); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 14px 38px rgba(0, 0, 0, .38); } @keyframes correfaixa { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ========================================================================== Botão principal: halo girando, brilho passando, respiração ========================================================================== */ @property --ang { syntax: ""; initial-value: 0deg; inherits: false; } .cta-halo { position: relative; display: inline-block; isolation: isolate; } /* brilho difuso atrás do botão */ .cta-halo::before { content: ""; position: absolute; inset: -6px; border-radius: var(--r-pill); background: conic-gradient( from var(--ang), var(--orange), #ff9a5a, var(--teal), var(--electric), var(--royal), var(--orange) ); filter: blur(14px); opacity: .55; z-index: -2; animation: giralho 7s linear infinite; } /* fio fino de cor na borda */ .cta-halo::after { content: ""; position: absolute; inset: -2px; border-radius: var(--r-pill); background: conic-gradient( from var(--ang), var(--orange), #ff9a5a, var(--teal), var(--electric), var(--royal), var(--orange) ); z-index: -1; animation: giralho 7s linear infinite; } @keyframes giralho { to { --ang: 360deg; } } .cta-halo .btn--big { position: relative; animation: none; } .cta-halo .btn--big:hover { transform: translateY(-2px); } .btn--brilho { position: relative; overflow: hidden; } .btn--brilho::after { content: ""; position: absolute; top: 0; left: -140%; width: 55%; height: 100%; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%); transform: skewX(-18deg); animation: brilho 4.2s ease-in-out infinite; pointer-events: none; } @keyframes brilho { 0%, 66% { left: -140%; } 94%, 100% { left: 170%; } } /* ---- Botão do teste ---- */ .hc__alt { padding: 12px 26px; font-size: .75rem; letter-spacing: .06em; } /* ========================================================================== Responsivo ========================================================================== */ @media (max-width: 900px) { .hc__story .hc__pain, .hc__story .hc__solve { min-height: 0; } .hc__story .hc__solve { max-width: none; } .hc__cta .cta-halo { width: 100%; } .hc__cta .cta-halo .btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .faixa__track { animation: none; } .btn--brilho::after { display: none; } .cta-halo::before, .cta-halo::after { animation: none; } .cta-halo .btn--big { animation: none; } .zap { animation: none; } .cursor::after { animation: none; opacity: 0; } } /* -------------------------------------------------------------------------- Marcadores de texto: violeta do manual + atraso individual na "pintura" -------------------------------------------------------------------------- */ .mark--wipe { animation-delay: var(--d, .5s); } .hc__story .hc__pain .mark { line-height: 1.5; } /* -------------------------------------------------------------------------- No celular o "Mais informações" sobe pra não encostar na barra da oferta -------------------------------------------------------------------------- */ /* ========================================================================== Topo sempre visível: faixa da oferta + menu ========================================================================== */ .topo { position: sticky; top: 0; z-index: 60; } .topo .site-header { position: static; } /* Chapéu sem o traço laranja */ .eyebrow--limpo::before { display: none; } .eyebrow--limpo { gap: 0; } /* ========================================================================== Chamada do teste ========================================================================== */ .hc__teste-chamada { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 8px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .13); width: min(100%, 560px); } .hc__teste-chamada p { font-size: var(--t-sm); line-height: 1.55; color: #a8a8d2; } .hc__teste-chamada p b { color: var(--white); font-weight: 700; } /* ========================================================================== Ações fixas no canto direito ========================================================================== */ .acoes { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 44px); z-index: 70; display: flex; align-items: stretch; gap: 12px; } .acoes .sticky-cta { position: static; display: flex; align-items: center; gap: 18px; padding: 10px 12px 10px 22px; border-radius: var(--r-pill); background: var(--navy); border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 18px 44px rgba(0, 0, 0, .4); } .acoes .sticky-cta .btn { flex: none; max-width: none; white-space: nowrap; padding: 14px 22px; } .acoes { gap: 0; } .acoes .sticky-cta__price strong { color: var(--white); } .zap-flutua { position: fixed; left: auto; right: 22px; bottom: 22px; z-index: 71; display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px 10px 10px; border-radius: var(--r-pill); background: var(--teal); color: #05302a; font-size: var(--t-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; box-shadow: 0 18px 40px rgba(0, 200, 160, .3); transition: transform .18s ease, box-shadow .18s ease; } .zap-flutua:hover { transform: translateY(-3px); color: #05302a; box-shadow: 0 22px 48px rgba(0, 200, 160, .45); } .zap-flutua__ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .45); } .zap-flutua__ico svg { width: 22px; height: 22px; } /* ========================================================================== Ações no celular: uma barra só, o WhatsApp na ponta direita ========================================================================== */ @media (max-width: 860px) { .acoes { left: 0; right: 0; bottom: 0; transform: none; width: auto; max-width: none; gap: 8px; align-items: center; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--navy); border-top: 1px solid rgba(255, 255, 255, .14); } .acoes .sticky-cta { flex: 1; padding: 0; gap: 10px; background: transparent; border: 0; box-shadow: none; border-radius: 0; justify-content: space-between; } .acoes .sticky-cta .sticky-cta__price { font-size: .6875rem; line-height: 1.25; } .acoes .sticky-cta .sticky-cta__price strong { font-size: 1.0625rem; } .acoes .sticky-cta .btn { font-size: .6875rem; padding: 12px 14px; } .zap-flutua { right: 12px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); padding: 8px; border-radius: 50%; box-shadow: 0 6px 16px rgba(0, 200, 160, .34); } .zap-flutua__txt { display: none; } .zap-flutua__ico { width: 30px; height: 30px; background: transparent; } .zap-flutua__ico svg { width: 26px; height: 26px; } body.has-sticky-cta { padding-bottom: 86px; } } @media (min-width: 861px) { body.has-sticky-cta { padding-bottom: 0; } } @media (max-width: 700px) { .topbar__extra { display: none; } .topbar { padding-block: 6px; gap: 2px; } } /* -------------------------------------------------------------------------- "Já sou aluno" ao lado do botão Menu, no celular -------------------------------------------------------------------------- */ .nav-aluno--mobile { display: none; } @media (max-width: 1150px) { .site-header--venda .site-header__inner { gap: 10px; } /* mesmo desenho do botão Menu */ .nav-aluno--mobile { display: block; margin-left: auto; padding: 10px 14px; background: transparent; border: 2px solid var(--line); border-radius: var(--r-sm); color: var(--navy); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; } .nav-aluno--mobile:hover { color: var(--royal); border-color: var(--royal); } /* a versão de dentro do menu some, pra não repetir */ .site-nav .nav-aluno { display: none; } } @media (max-width: 620px) { .site-header--venda .site-header__logo img { width: 116px; } .nav-aluno--mobile, .site-header--venda .nav-toggle { padding: 8px 11px; font-size: .6875rem; } .site-header--venda .site-header__inner { gap: 8px; min-height: 62px; } } /* O chapéu é um flex; sem isso ele encosta na esquerda em vez de centralizar */ .hc__head .eyebrow { display: flex; justify-content: center; text-align: center; } /* -------------------------------------------------------------------------- Menu do celular: painel que abre por cima, sem empurrar o cabeçalho -------------------------------------------------------------------------- */ @media (max-width: 1150px) { /* o menu vira botão bem antes do celular, porque os links agora são frases */ .site-header--venda { position: relative; } .site-header--venda .nav-toggle { display: block; margin-left: 0; } .site-header--venda .site-nav { display: none; } .site-header--venda .site-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 2px; } .site-header--venda .site-header__inner { flex-wrap: nowrap; } .site-header--venda .site-nav { position: absolute; top: 100%; left: 0; right: 0; width: auto; margin: 0; padding: 8px var(--gutter) 16px; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 20px 38px rgba(20, 20, 46, .16); z-index: 5; } .site-header--venda .site-nav a:not(.btn) { padding: 13px 0; border-bottom: 1px solid var(--line); border-radius: 0; } .site-header--venda .site-nav a:not(.btn):last-of-type { border-bottom: 0; } .site-header--venda .site-nav .btn { margin-top: 12px; width: 100%; } } /* Links mais compactos no computador, porque agora são frases */ /* ========================================================================== Cabeçalho simples: logo, Já sou aluno, Menu e o botão da oferta ========================================================================== */ .site-header__acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; } .site-header--venda .nav-toggle { display: block; margin-left: 0; } .site-header--venda a.nav-aluno { display: block; padding: 10px 14px; background: transparent; border: 2px solid var(--line); border-radius: var(--r-sm); color: var(--navy); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; } .site-header--venda a.nav-aluno:hover { color: var(--royal); border-color: var(--royal); background: transparent; } .btn--topo { white-space: nowrap; } .btn--nomenu { display: none; } /* O menu abre como painel, em qualquer tamanho de tela */ .site-header--venda .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; width: auto; margin: 0; padding-block: 8px 16px; padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 20px 38px rgba(20, 20, 46, .16); z-index: 5; } .site-header--venda .site-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 2px; } .site-header--venda .site-nav a:not(.btn) { width: auto; max-width: none; font-size: var(--t-base); font-weight: 700; color: var(--navy); padding: 15px 0; border-bottom: 1px solid var(--line); border-radius: 0; text-align: right; } .site-header--venda .site-nav a:not(.btn):hover { color: var(--royal); background: transparent; } .site-header--venda .site-nav a:not(.btn):last-of-type { border-bottom: 0; } @media (max-width: 900px) { .btn--topo { display: none; } .btn--nomenu { display: inline-flex; width: 100%; margin-top: 12px; } } @media (max-width: 620px) { .site-header--venda a.nav-aluno, .site-header--venda .nav-toggle { padding: 8px 11px; font-size: .6875rem; } .site-header__acoes { gap: 8px; } } /* ========================================================================== Cartão do teste ========================================================================== */ .cartao-teste { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(14px, 2vw, 24px); width: min(100%, 720px); margin-top: 10px; padding: 20px clamp(18px, 2.4vw, 26px); border-radius: var(--r-lg); background: linear-gradient(120deg, rgba(0, 200, 160, .17), rgba(0, 200, 160, .04)); border: 1px solid rgba(0, 200, 160, .45); text-decoration: none; text-align: left; transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease; } .cartao-teste:hover { transform: translateY(-3px); border-color: var(--teal); box-shadow: 0 18px 40px rgba(0, 200, 160, .22); } .cartao-teste__ico { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 200, 160, .2); color: var(--teal); } .cartao-teste__ico svg { width: 28px; height: 28px; } .cartao-teste__texto { display: flex; flex-direction: column; gap: 4px; } .cartao-teste__tag { font-size: .6875rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); } .cartao-teste__titulo { font-size: var(--t-md); font-weight: 700; line-height: 1.4; color: var(--white); letter-spacing: -.01em; } .cartao-teste__titulo b { color: var(--teal); font-weight: 800; } .cartao-teste__linha { font-size: var(--t-sm); line-height: 1.55; color: #a8a8d2; } .cartao-teste__botao { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: var(--r-pill); background: var(--teal); color: #05302a; font-size: var(--t-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; } .cartao-teste__botao span { transition: transform .18s ease; } .cartao-teste:hover .cartao-teste__botao span { transform: translateX(4px); } @media (max-width: 720px) { .cartao-teste { grid-template-columns: auto minmax(0, 1fr); row-gap: 16px; } .cartao-teste__botao { grid-column: 1 / -1; justify-content: center; } } /* ========================================================================== A faixa do vídeo com os três mentores ========================================================================== */ /* Jonathan à esquerda, a Laissa embaixo do vídeo, o Christopher à direita */ .hc__video { justify-content: flex-start; } .hc__foto--meio { height: 158px; } .hc__foto--meio img { object-position: center 26%; } .hc__micro--antes { margin-bottom: clamp(16px, 2vw, 24px); } @media (max-width: 900px) { .hc__band { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "video video video" "esq meio dir"; } .hc__video { grid-area: video; display: block; } .hc__foto--esq { grid-area: esq; } .hc__foto--meio { grid-area: meio; height: auto; } .hc__foto--dir { grid-area: dir; } .hc__band .hc__foto { aspect-ratio: 1 / 1; } } /* ========================================================================== Vídeo, garantias e nós três ========================================================================== */ .hc__fecho { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: clamp(26px, 3.5vw, 44px); } /* a chamada e a seta ficam coladas no vídeo */ .hc__chamada-video + .hc__fecho { padding-top: clamp(2px, 0.6vw, 8px); } .hc__fecho .hc__video { width: min(100%, 740px); } .hc__fecho .video { border-radius: var(--r-md); border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 22px 70px rgba(0, 0, 0, .5); } .hc__trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; margin-top: clamp(8px, 1.5vw, 16px); } .hc__trio .hc__foto { aspect-ratio: 4 / 3; } .hc__trio .hc__foto img { object-position: center 18%; } @media (max-width: 620px) { .hc__trio { gap: 8px; } .hc__trio .hc__foto { aspect-ratio: 1 / 1; } } /* ========================================================================== Separar bem a venda do teste gratuito ========================================================================== */ .hc__risco { display: block; width: min(100%, 720px); height: 1px; margin-top: clamp(22px, 3vw, 34px); background: rgba(255, 255, 255, .16); } /* o cartão do teste vira uma superfície clara: outra natureza, outra cor */ .cartao-teste { background: var(--white); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0, 0, 0, .3); margin-top: 4px; } .cartao-teste:hover { background: var(--white); border-color: var(--teal); box-shadow: 0 22px 50px rgba(0, 200, 160, .26); } .cartao-teste__ico { background: rgba(0, 200, 160, .16); color: #00a385; } .cartao-teste__tag { color: #00916f; } .cartao-teste__titulo { color: var(--navy); } .cartao-teste__titulo b { color: #00916f; } .cartao-teste__linha { color: var(--grey-1); } .cartao-teste__botao { background: var(--teal); color: #05302a; } /* ========================================================================== Cartão do teste: fundo branco, turquesa do manual (#00c8a0) nos detalhes ========================================================================== */ .cartao-teste { background: var(--white); border: 1px solid var(--line); border-left: 5px solid var(--teal); box-shadow: 0 16px 42px rgba(0, 0, 0, .3); margin-top: clamp(30px, 3.9vw, 55px); } .cartao-teste:hover { background: var(--white); border-color: var(--line); border-left-color: var(--teal); box-shadow: 0 22px 54px rgba(0, 200, 160, .3); } .cartao-teste__ico { background: var(--teal); color: var(--white); } .cartao-teste__tag { color: var(--teal); font-weight: 800; } .cartao-teste__titulo { color: var(--navy); } .cartao-teste__titulo b { color: var(--teal); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .cartao-teste__linha { color: var(--grey-1); } .cartao-teste__botao { background: var(--teal); color: #05302a; } .cartao-teste:hover .cartao-teste__botao { background: #00b391; } /* ========================================================================== Chamada do vídeo, embaixo das palavras ========================================================================== */ .hc__chamada-video { margin-top: 0; margin-bottom: clamp(8px, 1.2vw, 14px); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: var(--t-sm); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9a9aff; } /* ========================================================================== Ajustes do cartão do teste ========================================================================== */ .mark--teal { background: var(--teal); color: var(--navy); } .cartao-teste__titulo b { color: var(--navy); text-decoration: none; } .cartao-teste__texto { gap: 8px; } /* ========================================================================== Palavras com destaque, em pastilhas ========================================================================== */ .hc__palavras { padding-block: 12px; } .hc__palavras .marquee__track { gap: 12px; } .hc__palavras .marquee__item { padding: 9px 20px; border: 1px solid rgba(143, 143, 255, .42); border-radius: var(--r-pill); background: rgba(75, 75, 255, .14); color: #b9b9ff; font-size: var(--t-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .hc__palavras .marquee__item::after { content: none; } /* ========================================================================== O bloco do treinamento, destacado do resto da dobra ========================================================================== */ .hc__bloco { margin-top: clamp(12px, 1.6vw, 22px); padding-block: clamp(30px, 4vw, 52px) clamp(10px, 1.5vw, 18px); background: rgba(8, 8, 32, .34); border-top: 1px solid rgba(255, 255, 255, .12); border-bottom: 1px solid rgba(255, 255, 255, .12); } .hc__bloco .hc__palavras { border-block-color: rgba(255, 255, 255, .1); } /* as fotos já vêm recortadas em 4:3, não precisa deslocar */ .hc__trio .hc__foto img { object-position: center center; } /* ========================================================================== "E ainda": os extras com ícone ========================================================================== */ .extras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); } .extras li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--t-sm); line-height: 1.5; color: #9494bd; } /* a linha inteira em negrito, não só o trecho destacado */ .extras__txt { min-width: 0; font-weight: 700; color: #d5d5ee; } .extras li b { color: #d5d5ee; font-weight: 700; } .extras li > span:first-child { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, .07); color: #9a9aff; } .extras li > span:first-child svg { width: 18px; height: 18px; } @media (max-width: 940px) { .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .extras { grid-template-columns: 1fr; gap: 10px; } } /* ========================================================================== Hover do Menu e do Já sou aluno ========================================================================== */ .site-header--venda .nav-toggle, .site-header--venda a.nav-aluno { transition: color .18s ease, border-color .18s ease, background-color .18s ease; } .site-header--venda .nav-toggle:hover, .site-header--venda a.nav-aluno:hover { color: var(--royal); border-color: var(--royal); background: var(--paper); } .site-header--venda .nav-toggle[aria-expanded="true"] { color: var(--white); background: var(--navy); border-color: var(--navy); } /* ========================================================================== A oferta ========================================================================== */ .oferta { position: relative; overflow: hidden; background: radial-gradient(70% 90% at 15% 0%, #33338a 0%, rgba(51, 51, 138, 0) 58%), radial-gradient(70% 90% at 100% 100%, rgba(255, 90, 0, .22) 0%, rgba(255, 90, 0, 0) 60%), var(--navy); color: #d5d5ee; padding-block: clamp(46px, 6vw, 92px); border-top: 1px solid rgba(255, 255, 255, .12); } .oferta__inner { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4.5vw, 64px); align-items: center; } .oferta__vitrine { margin: 0; } .oferta__vitrine img { width: 100%; border-radius: var(--r-lg); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 26px 70px rgba(0, 0, 0, .5); } .oferta__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .oferta h2 { color: var(--white); font-size: var(--t-2xl); font-weight: 800; letter-spacing: -.025em; line-height: 1.12; } .oferta__lista { display: flex; flex-direction: column; gap: 11px; width: 100%; } .oferta__lista li { position: relative; padding-left: 30px; font-size: var(--t-sm); line-height: 1.6; color: #a8a8d2; } .oferta__lista li b { color: var(--white); font-weight: 700; } .oferta__lista li::before { content: ""; position: absolute; left: 0; top: .34em; width: 17px; height: 17px; border-radius: 50%; background: var(--teal); box-shadow: inset 0 0 0 2px var(--navy), inset 0 0 0 3px var(--teal); } .oferta__lista li::after { content: ""; position: absolute; left: 5px; top: .66em; width: 7px; height: 4px; border-left: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(-45deg); } .oferta__preco { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); width: 100%; } .oferta__de { font-size: var(--t-xs); color: #9494bd; letter-spacing: .04em; } .oferta__de b { color: #d5d5ee; font-weight: 700; } .oferta__valor { color: var(--white); font-size: clamp(2.6rem, 1.6rem + 3vw, 4rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; } .oferta__valor span { font-size: .42em; font-weight: 700; margin-right: .18em; vertical-align: .32em; color: #b9b9ff; } .oferta__btn { width: 100%; max-width: 560px; } .oferta__garantia { display: flex; align-items: center; gap: 10px; font-size: var(--t-sm); line-height: 1.55; color: #a8a8d2; } .oferta__garantia b { color: var(--white); font-weight: 700; } .oferta__garantia > span { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 200, 160, .18); color: var(--teal); } .oferta__garantia > span svg { width: 19px; height: 19px; } .oferta__ancora { font-size: var(--t-sm); line-height: 1.6; color: #9494bd; padding-left: 16px; border-left: 3px solid var(--orange); } .oferta__ancora b { color: var(--white); font-weight: 700; } /* a âncora de preço agora abre o bloco, logo abaixo do título */ .oferta__ancora--topo { margin: 14px 0 22px; } @media (max-width: 860px) { .oferta__inner { grid-template-columns: 1fr; } .oferta__vitrine { max-width: 380px; margin-inline: auto; } .oferta__btn { max-width: none; } } /* ========================================================================== Redes sociais no rodapé ========================================================================== */ .redes__titulo { margin-top: 22px; } .redes { display: flex; flex-direction: column; gap: 8px; } .redes a { display: inline-flex; align-items: center; gap: 8px; color: #c6c6e4; font-weight: 600; text-decoration: none; } .redes a:hover { color: var(--white); } .redes a span { font-weight: 400; color: #9494bd; font-size: var(--t-sm); } .redes a:hover span { color: #c6c6e4; } /* a bolinha com o ícone de cada rede */ .redes__ico { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: #c6c6e4; transition: background-color .18s ease, border-color .18s ease, color .18s ease; } .redes__ico svg { width: 17px; height: 17px; } .redes a:hover .redes__ico { background: var(--orange); border-color: var(--orange); color: var(--white); } /* ========================================================================== A conversa: cada frase chega como uma mensagem ========================================================================== */ .zapchat { --ava: 42px; --gutter: calc(var(--ava) + 10px); display: flex; align-items: flex-start; gap: 10px; width: min(100%, 640px); margin-inline: auto; padding-right: var(--gutter); /* espaço pra bolinha de quem responde */ text-align: left; } .zapchat__avatar { flex: none; width: var(--ava); height: var(--ava); border-radius: 50%; overflow: hidden; background: var(--white); border: 1px solid rgba(255, 255, 255, .22); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .34); } .zapchat__avatar img { width: 100%; height: 100%; object-fit: cover; } .zapchat__fluxo { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } /* ---- Balão ---- */ .zapbolha { display: none; width: 100%; /* todas as caixas com a mesma largura */ padding: 8px 13px 5px; border-radius: 14px; background: #1f2c33; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); } .zapbolha.is-in { display: block; animation: bolhaentra .3s cubic-bezier(.18, .9, .32, 1.25) both; } /* o rabinho fica só no primeiro balão, como no WhatsApp */ .zapbolha:first-of-type { position: relative; border-top-left-radius: 4px; } .zapbolha:first-of-type::before { content: ""; position: absolute; left: -8px; top: 0; width: 0; height: 0; border-right: 10px solid #1f2c33; border-bottom: 10px solid transparent; } @keyframes bolhaentra { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } } .zapbolha__nome { display: block; font-size: var(--t-xs); font-weight: 700; color: #53bdeb; margin-bottom: 1px; } .zapbolha p { margin: 0; font-size: var(--t-base); line-height: 1.5; color: #e9edef; } .zapbolha p b { color: var(--white); font-weight: 700; } .zapbolha__hora { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 1px; font-size: .625rem; color: #8696a0; } .zapbolha__hora svg { width: 14px; height: 10px; color: #53bdeb; } .zapchat .cursor::after { background: #53bdeb; width: 2px; } /* ---- "digitando..." ---- */ .zapchat__dots { display: none; align-items: center; gap: 5px; padding: 12px 14px; border-radius: 14px; background: #1f2c33; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); } .zapchat__dots.is-on { display: inline-flex; animation: bolhaentra .24s ease both; } .zapchat__dots i { width: 7px; height: 7px; border-radius: 50%; background: #8696a0; animation: pulapontos 1.25s infinite ease-in-out; } .zapchat__dots i:nth-child(2) { animation-delay: .18s; } .zapchat__dots i:nth-child(3) { animation-delay: .36s; } @keyframes pulapontos { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } } @media (prefers-reduced-motion: reduce) { .zapbolha.is-in { animation: none; } .zapchat__dots i { animation: none; } .zapresposta__brilho { display: none; } .zapresposta::before { animation: none; } } @media (max-width: 620px) { .zapchat { --ava: 34px; } .zapbolha p { font-size: var(--t-sm); } } /* ========================================================================== O botão da oferta vive dentro do menu ========================================================================== */ .btn--menu { display: inline-flex; width: 100%; margin-top: 14px; } /* ========================================================================== A resposta: o botão é a mensagem que VOCÊ manda ========================================================================== */ .zapchat__fluxo > * { align-self: flex-start; } .zapchat__fluxo > [data-saida], .zapchat__dots--saida { align-self: flex-end; } .zapsaida { display: none; align-items: flex-start; gap: 10px; margin-top: 8px; /* invade a calha da direita pra ficar da mesma largura dos outros balões */ width: calc(100% + var(--gutter)); margin-right: calc(var(--gutter) * -1); isolation: isolate; /* prende o brilho aqui, atras do balao */ } .zapsaida.is-in { display: flex; animation: bolhaentra .3s cubic-bezier(.18, .9, .32, 1.25) both; } .zapresposta { position: relative; flex: 1; min-width: 0; display: block; padding: 13px 20px 8px; border-radius: 16px; border-top-right-radius: 4px; background: linear-gradient(135deg, var(--royal) 0%, #4a1ab0 52%, var(--violet) 100%); color: var(--white); text-decoration: none; overflow: visible; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; } /* a luz que atravessa o balão de tempos em tempos, sem precisar de mouse */ .zapresposta__brilho { position: absolute; inset: 0; border-radius: 16px; border-top-right-radius: 4px; overflow: hidden; pointer-events: none; } .zapresposta__brilho::before { content: ""; position: absolute; top: -60%; bottom: -60%; width: 34%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .17), transparent); transform: translateX(-240%) rotate(9deg); animation: passabrilho 6.2s ease-in-out infinite; } @keyframes passabrilho { 0%, 70% { transform: translateX(-240%) rotate(9deg); } 100% { transform: translateX(430%) rotate(9deg); } } .zapresposta { cursor: pointer; } .zapresposta:hover, .zapresposta:focus-visible { background: linear-gradient(135deg, #3333cc 0%, #5c22c8 52%, #7a18cf 100%); color: var(--white); box-shadow: 0 10px 24px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .38); } .zapresposta:active { transform: none; } /* dica de que dá pra clicar */ .zapresposta__toque { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); } .zapresposta:hover .zapresposta__toque { color: var(--white); } /* o rabinho do lado direito */ .zapresposta::after { content: ""; position: absolute; right: -8px; top: 0; width: 0; height: 0; border-left: 10px solid var(--violet); border-bottom: 10px solid transparent; z-index: 1; } .zapresposta:hover::after { border-left-color: #7a18cf; } .zapresposta:hover::before { opacity: 1; } /* o brilho fica só em volta, devagar e discreto */ .zapresposta::before { content: ""; position: absolute; inset: -2px; border-radius: 18px; background: conic-gradient( from var(--ang), #7a18cf, #b070ff, #8a2fe0, #d0a0ff, #7a18cf ); filter: blur(9px); opacity: .8; z-index: -1; animation: giralho 8s linear infinite; transition: opacity .2s ease; } .zapresposta__texto { display: block; font-size: var(--t-sm); font-weight: 800; letter-spacing: .05em; line-height: 1.35; text-transform: uppercase; } .zapresposta__hora { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 3px; font-size: .625rem; color: rgba(255, 255, 255, .78); } .zapresposta__hora svg { width: 14px; height: 10px; color: #bde8ff; } .zapresposta .cursor::after { background: var(--white); } @media (max-width: 620px) { .zapresposta__texto { font-size: .8125rem; } } /* A promessa é digitada e o cursor laranja fica piscando no fim */ .hc__promise { min-height: 1.4em; } .hc__promise .cursor::after { background: var(--orange); width: 3px; height: 1em; } @media (max-width: 760px) { .hc__promise { min-height: 2.8em; } } /* ========================================================================== Detalhes novos ========================================================================== */ /* palavras-chave da promessa */ .hl-laranja { color: var(--orange); font-weight: 800; } /* ========================================================================== A trilha do método: listening, understanding, connecting words, speaking, communicating. Os ícones ficam cinza, como no manual, e a luz passa de um pro outro sozinha. ========================================================================== */ .trilha { display: flex; align-items: flex-start; justify-content: center; gap: clamp(16px, 3.6vw, 52px); margin: clamp(24px, 3.6vw, 44px) auto clamp(14px, 2vw, 22px); width: min(100%, 900px); padding-inline: 16px; padding-bottom: 12px; } .trilha__passo { flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; width: clamp(72px, 9.6vw, 120px); animation: trilhazoom 11s ease-in-out infinite; animation-delay: calc(var(--i) * 2.2s); } /* o zoom vai e volta, e a cor firma junto */ .trilha__ico { width: clamp(38px, 4.6vw, 50px); aspect-ratio: 1; background-color: var(--grey-2); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; animation: trilhacor 11s ease-in-out infinite; animation-delay: calc(var(--i) * 2.2s); } /* os desenhos vão embutidos aqui pra página funcionar até aberta direto do disco */ .trilha__ico--ouvido { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .trilha__ico--mente { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .trilha__ico--encaixe { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .trilha__ico--voz { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .trilha__ico--fala { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .trilha__nome { font-size: .5rem; font-style: normal; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.35; text-align: center; color: var(--grey-2); animation: trilhanome 11s ease-in-out infinite; animation-delay: calc(var(--i) * 2.2s); } /* o zoom percorre a trilha, um passo de cada vez */ @keyframes trilhazoom { 0%, 26%, 100% { transform: scale(1); } 10%, 16% { transform: scale(1.22); } } /* o desenho firma no branco enquanto cresce */ @keyframes trilhacor { 0%, 26%, 100% { background-color: var(--grey-2); } 10%, 16% { background-color: var(--white); } } /* o nome sai do cinza e firma no azul da marca */ @keyframes trilhanome { 0%, 26%, 100% { color: var(--grey-2); } 10%, 16% { color: var(--teal); } } @media (max-width: 680px) { .trilha { gap: 8px; padding-inline: 8px; } .trilha__passo { width: auto; flex: 1; } .trilha__nome { font-size: .4375rem; letter-spacing: .04em; } } @media (prefers-reduced-motion: reduce) { .trilha__passo, .trilha__ico, .trilha__nome { animation: none; } } /* ícone e avatar da resposta */ .zapresposta__linha { display: flex; align-items: baseline; gap: 0; } /* a "foto" de quem responde: a bolinha do usuário, como a da SpeakPro */ .zapsaida__avatar { flex: none; align-self: flex-start; width: var(--ava); height: var(--ava); border-radius: 50%; display: grid; place-items: center; background: linear-gradient(150deg, var(--electric), var(--royal)); box-shadow: 0 4px 14px rgba(0, 0, 0, .34); color: var(--white); } .zapsaida__avatar svg { width: 22px; height: 22px; } @media (max-width: 620px) { .zapsaida__avatar svg { width: 18px; height: 18px; } } .zapbolha__forte { text-transform: uppercase; letter-spacing: .04em; color: var(--white); } /* ========================================================================== Cartão do teste: os dois destaques em verde e o botão com vida própria ========================================================================== */ .cartao-teste__titulo .mark--teal { background: var(--teal); color: var(--navy); font-weight: 800; text-decoration: none; padding: 0 .28em; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* o botão respira sozinho e a luz passa por dentro dele */ .cartao-teste__botao { position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 0 0 0 rgba(0, 200, 160, .55); animation: pulsoteste 3.4s ease-out infinite; } .cartao-teste__botao > * { position: relative; z-index: 1; } .cartao-teste__brilho { position: absolute; top: -60%; bottom: -60%; left: 0; width: 30%; z-index: 0; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34), transparent); transform: translateX(-220%) rotate(9deg); animation: passabrilho 4.6s ease-in-out infinite; } @keyframes pulsoteste { 0% { box-shadow: 0 0 0 0 rgba(0, 200, 160, .5); } 70% { box-shadow: 0 0 0 12px rgba(0, 200, 160, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 200, 160, 0); } } .cartao-teste__seta { display: inline-block; transition: transform .18s ease; } .cartao-teste:hover .cartao-teste__seta { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .cartao-teste__botao { animation: none; } .cartao-teste__brilho { display: none; } } /* ========================================================================== Palavras que se explicam: passe o mouse e a pastilha conta o que é ========================================================================== */ .hc__palavras .marquee__item { cursor: default; transition: background-color .22s ease, border-color .22s ease, color .22s ease; } .hc__palavras .marquee__item:hover, .hc__palavras .marquee__item:focus-visible, .hc__palavras .marquee__item.is-aberta { background: var(--electric); border-color: var(--electric); color: var(--white); outline: none; } /* a linha embaixo, onde a explicação aparece */ .hc__palavras-dica { min-height: 2.9em; margin: 6px auto 0; width: min(100%, 740px); padding-inline: 20px; text-align: center; font-size: var(--t-xs); line-height: 1.45; color: rgba(255, 255, 255, .34); font-style: italic; transition: color .2s ease, opacity .2s ease; } .hc__palavras-dica.is-on { color: #d3d3f5; font-style: normal; animation: dicaentra .26s ease both; } @keyframes dicaentra { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } /* no toque, a faixa para quando a pessoa escolhe uma palavra */ .marquee.is-parada .marquee__track { animation-play-state: paused; } @media (max-width: 620px) { .hc__palavras-dica { min-height: 4.4em; } } /* ========================================================================== Sem a luz passando por cima dos botões: só o efeito por fora ========================================================================== */ .zapresposta__brilho, .cartao-teste__brilho, .btn--brilho::after { display: none; } /* ========================================================================== O "toque para iniciar a mudança" só entra depois que a mensagem termina, pisca três vezes e fica. ========================================================================== */ .zapresposta__toque { opacity: 0; } .zapsaida.is-escrito .zapresposta__toque { animation: piscatoque 4.6s cubic-bezier(.45, 0, .55, 1) both; animation-delay: .25s; } /* cinco respiradas, subindo e descendo devagar, e fica aceso no fim */ @keyframes piscatoque { 0% { opacity: 0; } 9% { opacity: 1; } 18% { opacity: .18; } 27% { opacity: 1; } 36% { opacity: .18; } 45% { opacity: 1; } 54% { opacity: .18; } 63% { opacity: 1; } 72% { opacity: .18; } 81% { opacity: 1; } 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .zapresposta__toque { opacity: 1; } .zapsaida.is-escrito .zapresposta__toque { animation: none; } } /* ========================================================================== "Como nós fazemos?" em blocos que abrem: só os títulos aparecem ========================================================================== */ .benef--dobra { align-items: start; gap: 12px; } .benef--dobra .benef__item { display: block; padding: 0; gap: 0; overflow: hidden; background: #1b1b3f; border-color: rgba(255, 255, 255, .17); } .benef--dobra .benef__item:hover { transform: none; } .benef__box { width: 100%; } .benef__topo { display: flex; align-items: center; gap: 12px; padding: 15px 16px; cursor: pointer; list-style: none; user-select: none; } .benef__topo::-webkit-details-marker { display: none; } .benef__topo::marker { content: ""; } .benef--dobra .benef__ico { flex: none; width: 34px; height: 34px; margin-bottom: 0; border-radius: 9px; } .benef--dobra .benef__ico svg { width: 19px; height: 19px; } .benef--dobra .benef__item b { flex: 1; min-width: 0; font-size: var(--t-base); line-height: 1.3; } .benef__mais { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); color: #9a9aff; transition: transform .3s ease, color .2s ease, background-color .2s ease, border-color .2s ease; } .benef__mais svg { width: 13px; height: 13px; } .benef__topo:hover .benef__mais { color: var(--white); background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); } /* aberto: o mais vira um menos */ .benef__box[open] .benef__mais { transform: rotate(135deg); } .benef__texto { margin: 0; padding: 0 16px 16px 62px; font-size: var(--t-sm); line-height: 1.6; color: #a8a8d2; animation: abrebenef .26s ease both; } @keyframes abrebenef { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } } /* aberto: só reforça a borda e a sombra, o fundo já é sólido */ .benef--dobra .benef__item:has(.benef__box[open]) { border-color: rgba(255, 255, 255, .3); box-shadow: 0 18px 44px rgba(0, 0, 0, .42); } .benef--dobra .benef__item:hover { border-color: rgba(255, 255, 255, .3); } .benef__box[open] .benef__texto { color: #d7d7ee; } @media (max-width: 860px) { .benef--dobra { grid-template-columns: 1fr; } .benef__texto { padding-left: 62px; } } @media (prefers-reduced-motion: reduce) { .benef__texto { animation: none; } } /* a setinha que leva o olho até o vídeo */ .hc__chamada-seta { display: grid; place-items: center; width: 30px; height: 30px; color: #9a9aff; animation: desceseta 2s ease-in-out infinite; } .hc__chamada-seta svg { width: 22px; height: 22px; } @keyframes desceseta { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(6px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .hc__chamada-seta { animation: none; opacity: .9; } } /* ========================================================================== A barra fixa virou só o botão, centralizado ========================================================================== */ .acoes .sticky-cta { display: none; } .acoes__btn { max-width: none; white-space: nowrap; padding: 16px 30px; box-shadow: 0 18px 44px rgba(0, 0, 0, .4); } @media (max-width: 480px) { .acoes__btn { white-space: normal; text-align: center; padding: 14px 20px; font-size: .6875rem; letter-spacing: .05em; } } /* ========================================================================== A conversa não empurra a página: uma cópia invisível segura o espaço ========================================================================== */ .zapchat__pilha { flex: 1; min-width: 0; display: grid; align-items: start; } .zapchat__pilha > * { grid-area: 1 / 1; } .zapchat__fantasma { visibility: hidden; pointer-events: none; } .zapchat__fantasma .zapresposta::before { display: none; } /* ========================================================================== "Quero ser aluno" no cabeçalho, ao lado do "Já sou aluno" ========================================================================== */ .site-header--venda a.nav-quero { display: block; padding: 10px 16px; border-radius: var(--r-sm); border: 2px solid var(--orange); background: var(--orange); color: var(--white); font-size: var(--t-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color .18s ease, border-color .18s ease; } .site-header--venda a.nav-quero:hover { background: #e04e00; border-color: #e04e00; color: var(--white); } @media (max-width: 720px) { /* em tela estreita o "já sou aluno" vai pro menu, pra caber */ .site-header--venda .site-header__acoes a.nav-aluno { display: none; } } @media (max-width: 620px) { .site-header--venda a.nav-quero { padding: 8px 11px; font-size: .6875rem; } } /* o "já sou aluno" dentro do menu só aparece quando sai do cabeçalho */ .site-header--venda .site-nav a.nav-aluno--nomenu { display: none; } @media (max-width: 720px) { .site-header--venda .site-nav a.nav-aluno--nomenu { display: block; width: auto; max-width: none; font-size: var(--t-base); font-weight: 700; color: var(--navy); padding: 15px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; text-align: right; text-transform: none; letter-spacing: normal; } .site-header--venda .site-nav a.nav-aluno--nomenu:hover { color: var(--royal); background: transparent; } } /* ========================================================================== Quem já passou por aqui ========================================================================== */ .perfil { margin-top: clamp(22px, 3vw, 36px); padding-top: clamp(20px, 2.6vw, 30px); border-top: 1px solid rgba(255, 255, 255, .12); text-align: center; } .perfil__titulo { margin: 0 auto 16px; width: min(100%, 760px); font-size: var(--t-lg); font-weight: 800; line-height: 1.25; letter-spacing: -.02em; text-transform: none; color: var(--white); } .perfil__titulo b { color: var(--white); font-weight: 800; } .perfil__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; } .perfil__lista li { padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); font-size: var(--t-sm); font-weight: 600; color: #c6c6e4; transition: border-color .2s ease, color .2s ease, background-color .2s ease; } .perfil__lista li:hover { border-color: rgba(0, 200, 160, .55); background: rgba(0, 200, 160, .1); color: var(--white); } @media (max-width: 620px) { .perfil__lista { gap: 6px; } .perfil__lista li { padding: 7px 12px; font-size: .75rem; } } /* a faixa de perfis rola sozinha, sem interação */ .perfil { margin-bottom: clamp(14px, 2vw, 20px); } .perfil__titulo { margin-bottom: 0; } .perfil__faixa { padding-block: 4px; border: 0; background: transparent; pointer-events: none; } .perfil__faixa + .perfil__faixa { margin-top: 10px; } .perfil__faixa .marquee__track { gap: 10px; } .perfil__faixa--a .marquee__track { animation-duration: 52s; } .perfil__faixa--b .marquee__track { animation-duration: 46s; animation-direction: reverse; } .perfil__faixa:hover .marquee__track { animation-play-state: running; } /* as mesmas pastilhas das palavras (confidence, clarity, communication) */ .perfil__faixa .marquee__item { padding: 9px 20px; border-radius: var(--r-pill); border: 1px solid rgba(143, 143, 255, .42); background: rgba(75, 75, 255, .14); color: #b9b9ff; font-size: var(--t-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .perfil__faixa .marquee__item::after { content: none; } @media (max-width: 620px) { .perfil__faixa .marquee__item { padding: 8px 14px; font-size: .8125rem; } .perfil__faixa--a .marquee__track { animation-duration: 40s; } .perfil__faixa--b .marquee__track { animation-duration: 35s; } } /* ========================================================================== O fecho da oferta: a chamada, o cadeado e o botão ========================================================================== */ .oferta__clique { margin: 18px 0 12px; font-size: var(--t-base); line-height: 1.5; color: #c6c6e4; } .oferta__clique b { color: var(--white); font-weight: 800; } .oferta__btn small { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .oferta__cadeado { display: inline-grid; place-items: center; width: 14px; height: 14px; } .oferta__cadeado svg { width: 13px; height: 13px; } /* ========================================================================== "Como nós fazemos?" é outro capítulo: ganha painel próprio ========================================================================== */ .hc .hb__benefits { margin-top: clamp(30px, 4vw, 54px); margin-bottom: clamp(18px, 2.4vw, 30px); padding: clamp(26px, 3.4vw, 44px) clamp(20px, 2.8vw, 38px) clamp(24px, 3vw, 38px); border: 1px solid rgba(255, 255, 255, .13); border-top: 1px solid rgba(255, 255, 255, .13); border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(75, 75, 255, .1), rgba(100, 0, 175, .07) 55%, transparent 90%), rgba(8, 8, 32, .3); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); position: relative; } /* o chapéu diz que começou outra coisa */ .hb__chapeu { margin: 0 0 8px; font-size: var(--t-xs); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #8f8fff; } .hc .hb__benefits .hb__bt { margin-bottom: 22px; } /* o "E ainda" fica separado por dentro do painel */ .hc .hb__benefits .extras { margin-top: clamp(22px, 2.8vw, 32px); padding-top: clamp(18px, 2.2vw, 26px); border-top: 1px solid rgba(255, 255, 255, .11); } /* ========================================================================== Depoimentos: vídeos e prints ========================================================================== */ .depo { position: relative; padding-block: clamp(40px, 5.5vw, 78px) clamp(30px, 4vw, 52px); background: radial-gradient(70% 60% at 50% 0%, rgba(75, 75, 255, .16), transparent 70%), radial-gradient(50% 50% at 90% 100%, rgba(100, 0, 175, .16), transparent 70%), #101030; border-top: 1px solid rgba(255, 255, 255, .12); border-bottom: 1px solid rgba(255, 255, 255, .12); } .depo__head { text-align: center; margin-bottom: clamp(26px, 3.4vw, 42px); } .depo__head h2 { color: var(--white); font-size: var(--t-lg); letter-spacing: -.02em; margin: 6px 0 12px; } .depo__linha { margin: 0 auto; width: min(100%, 620px); font-size: var(--t-sm); line-height: 1.6; color: #a8a8d2; } /* os prints, num mural */ .depo__sub { margin: clamp(30px, 4vw, 50px) auto clamp(14px, 1.8vw, 20px); text-align: center; font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9a9aff; } .prints { position: relative; } /* fixa: como está sempre "na tela", o foco nela não rola a página */ .prints__ctrl { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .prints__mural { columns: 3; column-gap: 16px; } /* fechado: só as seis primeiras */ .prints__mural .zapcard:nth-of-type(n+7) { display: none; } /* o estado vem do :has, então a caixinha pode ficar junto do botão e a página não pula mais pro topo quando ele recebe o foco */ .prints:has(.prints__ctrl:checked) .prints__mural .zapcard { display: block; } .prints__item { margin: 0 0 20px; break-inside: avoid; } /* cada print vira um cartão de conversa */ .zapcard { margin: 0 0 18px; break-inside: avoid; border-radius: var(--r-md); overflow: hidden; background: #17173c; border: 1px solid rgba(255, 255, 255, .13); box-shadow: 0 14px 34px rgba(0, 0, 0, .34); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .zapcard:hover { transform: translateY(-3px); border-color: rgba(75, 75, 255, .55); box-shadow: 0 22px 48px rgba(0, 0, 0, .46); } .zapcard__topo { display: flex; align-items: center; gap: 9px; padding: 9px 12px; background: linear-gradient(90deg, #232350, #2a2a63); border-bottom: 1px solid rgba(255, 255, 255, .09); } .zapcard__ava { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(150deg, var(--electric), var(--royal)); color: var(--white); } .zapcard__ava svg { width: 15px; height: 15px; } .zapcard__quem { flex: 1; min-width: 0; font-size: var(--t-xs); font-weight: 700; letter-spacing: .02em; line-height: 1.35; color: #c6c6e4; /* descrições compridas quebram em duas linhas em vez de estourar */ overflow-wrap: break-word; } .zapcard__check { flex: none; width: 16px; height: 11px; color: #53bdeb; } .zapcard__foto { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; line-height: 0; } .zapcard__tela { position: relative; display: block; } .zapcard__foto img { display: block; width: 100%; height: auto; } .zapcard__lupa { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(17, 27, 33, .82); border: 1px solid rgba(255, 255, 255, .28); color: var(--white); opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; } .zapcard__lupa svg { width: 17px; height: 17px; } .zapcard:hover .zapcard__lupa, .zapcard__foto:focus-visible .zapcard__lupa { opacity: 1; transform: none; } /* o marca-texto por cima da própria mensagem */ .realce { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: 3px; background: rgba(255, 138, 48, .62); mix-blend-mode: multiply; pointer-events: none; transition: background-color .2s ease; } .realce--escuro { background: rgba(255, 110, 20, .5); mix-blend-mode: screen; } .zapcard:hover .realce { background: rgba(255, 120, 20, .78); } .zapcard:hover .realce--escuro { background: rgba(255, 110, 20, .62); } /* a caixa de leitura */ .lupa { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 26px); padding: clamp(16px, 3vw, 40px); background: rgba(6, 6, 20, .88); backdrop-filter: blur(6px); animation: lupaentra .2s ease both; } .lupa[hidden] { display: none; } @keyframes lupaentra { from { opacity: 0; } to { opacity: 1; } } .lupa__meio { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: min(100%, 560px); max-height: 100%; } .lupa[data-tipo="video"] .lupa__meio { max-width: min(100%, 960px); width: 100%; } .lupa__palco { width: 100%; max-height: calc(100vh - 150px); overflow: auto; border-radius: var(--r-md); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); } .lupa[data-tipo="video"] .lupa__palco { overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); } .lupa__pe { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 14px; text-align: center; font-size: var(--t-sm); line-height: 1.5; color: #c6c6e4; } .lupa__conta { font-size: var(--t-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8f8fbf; } .lupa__palco .zapcard__foto { cursor: default; } .lupa__palco .zapcard { margin: 0; } .lupa__palco .zapcard:hover { transform: none; } .lupa__palco .zapcard__lupa { display: none; } .lupa__fechar, .lupa__seta { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .08); color: var(--white); cursor: pointer; transition: background-color .18s ease, border-color .18s ease; } .lupa__fechar:hover, .lupa__seta:hover { background: var(--orange); border-color: var(--orange); } .lupa__fechar svg, .lupa__seta svg { width: 20px; height: 20px; } .lupa__fechar { position: absolute; top: 18px; right: 18px; } @media (max-width: 620px) { .lupa { padding: 12px; gap: 6px; } .lupa__fechar, .lupa__seta { width: 38px; height: 38px; } } .prints__mais { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 14px auto 0; padding: 11px 22px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #c6c6e4; font-size: var(--t-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: border-color .2s ease, color .2s ease, background-color .2s ease; } .prints__mais svg { width: 14px; height: 14px; } /* o + fica numa pastilha redonda, pra dar um destaque discreto */ .prints__sinal { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(75, 75, 255, .28); color: #d5d5ff; transition: background-color .2s ease, color .2s ease; } /* só um pouquinho de destaque: borda e fundo em azul, não em branco */ .prints__mais { border-color: rgba(75, 75, 255, .5); background: rgba(75, 75, 255, .12); color: #cfcfff; } .prints__mais:hover { color: var(--white); border-color: var(--electric); background: rgba(75, 75, 255, .24); } .prints__mais:hover .prints__sinal { background: var(--electric); color: var(--white); } .prints__mais--fecha { display: none; } .prints:has(.prints__ctrl:checked) .prints__mais--abre { display: none; } .prints:has(.prints__ctrl:checked) .prints__mais--fecha { display: flex; } @media (max-width: 980px) { .prints__mural { columns: 2; } } @media (max-width: 560px) { .prints__mural { columns: 1; max-height: 520px; } } .depo__nota { margin: clamp(16px, 2vw, 24px) auto 0; width: min(100%, 620px); padding-inline: 20px; text-align: center; font-size: var(--t-xs); line-height: 1.6; color: #7f7fa8; } /* ========================================================================== Galeria de depoimentos em vídeo ========================================================================== */ .gal { width: min(100%, 1140px); margin-inline: auto; } .gal__lista { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); } .gal__item { display: block; padding: 0; border: 1px solid rgba(255, 255, 255, .13); border-radius: var(--r-md); overflow: hidden; background: #17173c; box-shadow: 0 14px 34px rgba(0, 0, 0, .32); cursor: pointer; text-align: left; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .gal__item:hover, .gal__item:focus-visible { transform: translateY(-4px); border-color: rgba(255, 90, 0, .6); box-shadow: 0 22px 48px rgba(0, 0, 0, .45); outline: none; } .gal__capa { position: relative; display: block; aspect-ratio: 16 / 9; background: #232350 center / cover no-repeat; } .gal__capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 16, 48, .1) 45%, rgba(16, 16, 48, .55)); transition: background-color .2s ease; } .gal__play { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: rgba(255, 255, 255, .92); transition: transform .22s cubic-bezier(.2, .9, .3, 1.3), color .2s ease; } .gal__play svg { width: clamp(30px, 3.2vw, 42px); height: clamp(30px, 3.2vw, 42px); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .65)); } .gal__item:hover .gal__play { transform: scale(1.16); color: var(--orange); } .gal__corpo { display: block; padding: 12px 14px 15px; } .gal__nome { display: block; font-size: var(--t-base); font-weight: 800; letter-spacing: -.01em; color: var(--white); } .gal__sobre { display: block; margin-top: 4px; font-size: var(--t-xs); line-height: 1.5; color: #9494bd; } @media (max-width: 1080px) { .gal__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 680px) { .gal__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 430px) { .gal__lista { grid-template-columns: 1fr; } } /* o título da parte dos vídeos */ .depo__head--video { margin-top: clamp(38px, 5vw, 64px); margin-bottom: clamp(20px, 2.6vw, 30px); } .depo__head--video h3 { margin: 0; font-size: var(--t-lg); font-weight: 800; line-height: 1.25; letter-spacing: -.02em; color: var(--white); } /* ========================================================================== Quem treina você e o teste, agora em seções próprias ========================================================================== */ .time-sec { padding-block: clamp(36px, 4.6vw, 66px); } .teste-sec { padding-block: clamp(30px, 4vw, 54px) clamp(40px, 5vw, 70px); } .time-sec .hb__time, .teste-sec .hb__teste { margin-top: 0; } /* ========================================================================== Mensagem comprida: o cartão mostra o começo e convida a abrir ========================================================================== */ .zapcard.is-cortado .zapcard__foto { max-height: 360px; overflow: hidden; } .zapcard.is-cortado .zapcard__foto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 130px; background: linear-gradient(180deg, rgba(23, 23, 60, 0), rgba(23, 23, 60, .96)); pointer-events: none; } .zapcard__pe { display: none; } .zapcard.is-cortado .zapcard__pe { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2; display: block; text-align: center; font-size: var(--t-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .72); pointer-events: none; transition: color .2s ease; } .zapcard:hover .zapcard__pe { color: var(--white); } /* na caixa grande a mensagem aparece inteira */ .lupa__palco .zapcard.is-cortado .zapcard__foto { max-height: none; } .lupa__palco .zapcard.is-cortado .zapcard__foto::after, .lupa__palco .zapcard__pe { display: none; } /* ========================================================================== A conversa ganha companhia: o Christopher do lado, olhando pra ela ========================================================================== */ .zapzona { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: end; gap: clamp(20px, 3.2vw, 48px); width: min(100%, 1040px); margin-inline: auto; } .zapzona__foto { margin: 0; align-self: end; border-radius: var(--r-md); overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 26px 60px rgba(0, 0, 0, .46); position: relative; } .zapzona__foto img { display: block; width: 100%; height: auto; } /* um véu pra foto conversar com o fundo em vez de brigar com ele */ .zapzona__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 16, 48, 0) 55%, rgba(16, 16, 48, .55)); } /* a conversa fica maior */ .zapzona .zapchat { width: 100%; } .zapzona .zapbolha p { font-size: var(--t-md); } .zapzona .zapresposta__texto { font-size: var(--t-base); } @media (max-width: 900px) { .zapzona { grid-template-columns: 1fr; } .zapzona__foto { display: none; } .zapzona .zapbolha p { font-size: var(--t-base); } } /* o dedo que aponta pra frase, e a foto na altura da conversa */ .zapresposta__dedo { font-size: 1rem; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4)); } .zapzona { align-items: stretch; } .zapzona__foto { align-self: stretch; } .zapzona__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: transform .5s cubic-bezier(.22, .8, .3, 1); } /* o mesmo zoom das outras fotos: a moldura fica parada, a foto cresce por dentro */ .zapzona__foto:hover img { transform: scale(1.06); } .zapzona__foto::after { transition: opacity .5s ease; } .zapzona__foto:hover::after { opacity: .55; } @media (prefers-reduced-motion: reduce) { .zapzona__foto img { transition: none; } .zapzona__foto:hover img { transform: none; } } /* ========================================================================== O foguete: chega junto com a última letra, ensaia a decolagem e sobe ========================================================================== */ .zapresposta__linha { flex-wrap: wrap; } .zapresposta__foguete { display: inline-block; margin-left: 7px; font-size: 1.1em; line-height: 1; opacity: 0; will-change: transform, opacity; } .zapsaida.is-escrito .zapresposta__foguete { animation: decola 3s cubic-bezier(.3, .1, .3, 1) .2s both, pairando 3.4s ease-in-out 3.3s infinite; } @keyframes decola { 0% { opacity: 0; transform: translate(-8px, 8px) scale(.5) rotate(-24deg); } 10% { opacity: 1; transform: none; } /* o motor esquenta */ 38% { transform: translate(0, 0) rotate(0); } 43% { transform: translate(-1px, 1px) rotate(-7deg); } 48% { transform: translate(1px, -1px) rotate(5deg); } 53% { transform: translate(-1px, 1px) rotate(-5deg); } 58% { transform: translate(1px, -1px) rotate(4deg); } 63% { transform: none; } /* e sobe */ 78% { opacity: 1; transform: translate(22px, -34px) rotate(16deg) scale(1.12); } 85% { opacity: 0; transform: translate(52px, -84px) rotate(24deg) scale(.7); } /* volta por baixo, como se tivesse dado a volta */ 86% { opacity: 0; transform: translate(-10px, 16px) rotate(-20deg) scale(.5); } 100% { opacity: 1; transform: none; } } @keyframes pairando { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-7deg); } } @media (prefers-reduced-motion: reduce) { .zapsaida.is-escrito .zapresposta__foguete { animation: none; opacity: 1; } } /* a linha da solução fecha o bloco da dor, com um respiro e mais presença */ .hc__pain--solucao { margin-top: clamp(24px, 3.2vw, 40px); color: var(--white); text-align: center; font-size: clamp(1.25rem, 1.05rem + .75vw, 1.75rem); font-weight: 700; line-height: 1.45; letter-spacing: -.01em; max-width: 24ch; margin-inline: auto; } /* ========================================================================== A dor em tópicos: cada pergunta é um item ========================================================================== */ .dor { list-style: none; margin: 0; padding: 0; width: min(100%, 700px); margin-inline: auto; text-align: left; } .dor__item { display: flex; align-items: flex-start; gap: clamp(12px, 1.6vw, 18px); padding: clamp(14px, 1.8vw, 20px) 0; border-bottom: 1px solid rgba(255, 255, 255, .1); } .dor__item:last-child { border-bottom: 0; } /* a bolinha de interrogação */ .dor__marca { flex: none; width: 30px; height: 30px; margin-top: 2px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(255, 90, 0, .55); background: rgba(255, 90, 0, .12); color: var(--orange); font-size: var(--t-base); font-weight: 800; line-height: 1; } .dor__item p { margin: 0; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.7; color: #c9c9ea; } .dor__item .mark { line-height: 1.5; } @media (max-width: 620px) { .dor__marca { width: 26px; height: 26px; font-size: var(--t-sm); } .dor__item { gap: 11px; padding-block: 13px; } } /* ========================================================================== As perguntas em cartões claros: cada uma no seu box ========================================================================== */ .dor--claro { width: min(100%, 780px); display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 18px); padding: 0; background: none; box-shadow: none; overflow: visible; } .dor--claro .dor__item { position: relative; align-items: center; padding: clamp(16px, 2.1vw, 24px) clamp(18px, 2.4vw, 28px); border: 0; border-left: 4px solid var(--electric); border-radius: var(--r-md); background: linear-gradient(140deg, #ffffff 0%, #eeeef9 100%); box-shadow: 0 16px 38px rgba(0, 0, 0, .34); overflow: hidden; transition: transform .5s cubic-bezier(.22, .8, .3, 1), box-shadow .5s cubic-bezier(.22, .8, .3, 1); } .dor--claro .dor__item:hover, .dor--claro .dor__item:focus-within { transform: translateY(-3px) scale(1.035); box-shadow: 0 26px 56px rgba(0, 0, 0, .46); z-index: 2; } /* o cartão inteiro respira junto: o texto e a marca dão um zoom leve */ .dor--claro .dor__item p, .dor--claro .dor__marca { transition: transform .5s cubic-bezier(.22, .8, .3, 1); } .dor--claro .dor__item:hover p { transform: scale(1.02); } .dor--claro .dor__item:hover .dor__marca { transform: scale(1.12) rotate(-6deg); } @media (prefers-reduced-motion: reduce) { .dor--claro .dor__item, .dor--claro .dor__item p, .dor--claro .dor__marca { transition: none; } .dor--claro .dor__item:hover, .dor--claro .dor__item:hover p, .dor--claro .dor__item:hover .dor__marca { transform: none; } } /* o texto em azul, não em preto */ .dor--claro .dor__item p { color: var(--royal); font-weight: 700; } .dor--claro .dor__marca { background: var(--orange); border: 0; margin-top: 0; color: var(--white); box-shadow: 0 6px 16px rgba(255, 90, 0, .4); } /* o dedo que leva o olho pra conversa logo abaixo */ .hc__aponta { display: block; margin-top: 14px; font-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem); line-height: 1; animation: descededo 2s ease-in-out infinite; } @keyframes descededo { 0%, 100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(6px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .hc__aponta { animation: none; opacity: .9; } } /* as perguntas em azul elétrico, sem fundo e num corpo menor */ .dor--claro .mark { background: none; color: inherit; padding: 0; animation: none; } .dor--claro .mark::before, .dor--claro .mark::after { content: none; } .dor--claro .dor__item p { color: var(--electric); font-size: clamp(.7rem, .64rem + .24vw, .8rem); line-height: 1.6; /* cada pergunta quebra em duas linhas: a faixa fica mais estreita */ max-width: 40ch; text-wrap: balance; } /* ========================================================================== A promessa não pula enquanto é digitada: a caixa já nasce do tamanho final ========================================================================== */ .hc__promise-caixa { display: inline-block; text-align: left; text-wrap: balance; max-width: 100%; } .hc__promise-caixa::before { content: attr(data-full); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 800; /* garante que a caixa nunca cresça durante a digitação */ } /* a barra pisca por uns segundos e some */ .hc__promise .cursor::after { animation: piscacursor .9s steps(1, end) infinite; } /* a barra some, mas o espaço dela continua reservado */ .hc__promise .cursor.acabou::after { animation: none; opacity: 0; } /* ========================================================================== As perguntas com a foto ao lado ========================================================================== */ .dorzona { display: grid; /* a coluna da foto encolhe junto com a tela em vez de sumir cedo */ grid-template-columns: minmax(0, 1fr) clamp(110px, 32%, 240px); align-items: stretch; gap: clamp(12px, 2.6vw, 40px); width: min(100%, 680px); margin-inline: auto; } .dorzona .dor--claro { width: 100%; } .dorzona__foto { margin: 0; height: 100%; border-radius: var(--r-md); overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 26px 60px rgba(0, 0, 0, .46); position: relative; } /* a foto não tem altura própria: ela assume a da coluna dos cartões */ .dorzona__foto img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; transition: transform .5s cubic-bezier(.22, .8, .3, 1); } /* o mesmo zoom das três fotos lá embaixo */ .dorzona__foto:hover img { transform: scale(1.06); } .dorzona__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 16, 48, 0) 55%, rgba(16, 16, 48, .5)); transition: opacity .5s ease; } .dorzona__foto:hover::after { opacity: .55; } @media (prefers-reduced-motion: reduce) { .dorzona__foto img { transition: none; } .dorzona__foto:hover img { transform: none; } } /* nas telas médias a foto continua do lado, só que menor e sem esticar */ @media (max-width: 760px) { .dorzona { align-items: center; } .dorzona__foto { height: auto; aspect-ratio: 3 / 4; align-self: center; } } /* só no celular estreito ela sai e os cartões ocupam tudo */ @media (max-width: 520px) { .dorzona { grid-template-columns: 1fr; } .dorzona__foto { display: none; } } /* ========================================================================== O teste ganha a sua própria dobra: pergunta em cima, cartão e foto embaixo ========================================================================== */ /* a única dobra clara da página: mesma textura de riscas das dobras escuras, só que invertida e puxada pro turquesa, a cor do teste. o leitor sente que trocou de sala sem sair da casa */ .teste-topo { --corte: clamp(26px, 3.4vw, 54px); position: relative; padding-block: calc(clamp(52px, 6.5vw, 92px) + var(--corte)); background: #101030; } /* a transição é um corte reto na diagonal, no mesmo sentido das riscas: a faixa clara entra e sai inclinada, sem esfumado nenhum */ .teste-topo::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(35, 35, 80, .045) 0 1px, transparent 1px 14px), radial-gradient(78% 62% at 50% 0%, rgba(0, 200, 160, .22), transparent 62%), radial-gradient(58% 60% at 90% 100%, rgba(75, 75, 255, .16), transparent 66%), linear-gradient(180deg, #f4f7ff 0%, #e7edff 55%, #f5f8ff 100%); clip-path: polygon( 0 var(--corte), 100% 0, 100% calc(100% - var(--corte)), 0 100% ); pointer-events: none; } /* um fio turquesa acompanhando o corte de cima, pra marcar a entrada */ .teste-topo::after { content: ""; position: absolute; inset: 0; background: var(--teal); clip-path: polygon( 0 var(--corte), 100% 0, 100% 3px, 0 calc(var(--corte) + 3px) ); pointer-events: none; } .teste-topo > .wrap { position: relative; z-index: 1; } /* a pergunta fica em cima do cartão, na mesma coluna dele */ .testezona__lado { display: flex; flex-direction: column; gap: clamp(16px, 2.2vw, 26px); min-width: 0; } .teste-topo__pergunta { margin: 0; color: var(--white); font-size: clamp(1.25rem, 1.05rem + .85vw, 1.875rem); font-weight: 800; line-height: 1.3; letter-spacing: -.015em; text-wrap: balance; } /* a pergunta em turquesa, com os destaques em fundo turquesa e letra branca */ .mark--verde { background: var(--teal); color: var(--white); } /* no fundo claro a pergunta fica em navy */ .teste-topo__pergunta { color: var(--navy); } .teste-topo__pergunta .mark--verde { color: var(--white); font-weight: 800; } /* a foto vem primeiro e maior: o Jonathan é a cara desta dobra */ .testezona { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: stretch; gap: clamp(20px, 3.2vw, 44px); width: min(100%, 940px); margin-inline: auto; } .testezona .cartao-teste { width: 100%; margin-top: 0; } /* o cartão empilha o conteúdo: fica alto do lado da foto, não achatado */ .cartao-teste--pilha { grid-template-columns: auto minmax(0, 1fr); align-content: center; row-gap: clamp(16px, 2.2vw, 24px); padding: clamp(24px, 3vw, 34px) clamp(22px, 2.6vw, 30px); } .cartao-teste--pilha .cartao-teste__botao { grid-column: 1 / -1; justify-content: center; } .cartao-teste--pilha .cartao-teste__linha { font-size: var(--t-base); } /* a foto assume exatamente a altura da coluna da pergunta + cartão */ .testezona__foto { margin: 0; position: relative; min-height: 300px; border-color: rgba(255, 255, 255, .7); box-shadow: 0 22px 46px rgba(35, 35, 80, .22); border-radius: var(--r-md); overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 26px 60px rgba(0, 0, 0, .46); } .testezona__foto img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 8%; transition: transform .5s cubic-bezier(.22, .8, .3, 1); } /* num fundo claro o véu escuro não faz sentido: fica só um toque */ .testezona__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 16, 48, 0) 65%, rgba(16, 16, 48, .22)); transition: opacity .5s ease; } /* o mesmo zoom das outras fotos */ .testezona__foto:hover img { transform: scale(1.06); } .testezona__foto:hover::after { opacity: .55; } /* embaixo de 860px a foto vai pro topo, mas continua aparecendo */ @media (max-width: 860px) { .testezona { grid-template-columns: 1fr; justify-items: center; } .testezona__foto { width: min(100%, 320px); min-height: 0; aspect-ratio: 4 / 3; } .testezona__foto img { object-position: center 20%; } .cartao-teste--pilha { grid-template-columns: auto minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .testezona__foto img { transition: none; } .testezona__foto:hover img { transform: none; } } /* o cartão do teste na dobra clara: precisa de contorno, não de sombra pesada */ .teste-topo .cartao-teste { border-color: rgba(35, 35, 80, .12); border-left-color: var(--teal); box-shadow: 0 18px 44px rgba(35, 35, 80, .18); } .teste-topo .cartao-teste:hover { border-color: rgba(0, 200, 160, .5); border-left-color: var(--teal); box-shadow: 0 24px 54px rgba(0, 200, 160, .28); } /* ========================================================================== A metodologia por dentro vira um painel claro dentro da dobra escura: é onde o leitor mais lê, então é onde a leitura tem que ser mais fácil ========================================================================== */ .hc .hb__benefits { border-color: rgba(35, 35, 80, .1); background: linear-gradient(165deg, #ffffff 0%, #f0f3ff 62%, #e9eeff 100%); box-shadow: 0 26px 64px rgba(4, 4, 24, .42); } .hb__benefits .hb__chapeu { color: var(--royal); } .hb__benefits .hb__bt { color: var(--navy); } /* cada pergunta da sanfona: cartão branco com contorno, não caixa escura */ .hb__benefits .benef--dobra .benef__item { background: var(--white); border-color: rgba(35, 35, 80, .12); box-shadow: 0 6px 18px rgba(35, 35, 80, .06); } .hb__benefits .benef--dobra .benef__item:hover { border-color: rgba(75, 75, 255, .4); } .hb__benefits .benef--dobra .benef__item:has(.benef__box[open]) { border-color: rgba(75, 75, 255, .45); box-shadow: 0 16px 38px rgba(35, 35, 80, .16); } .hb__benefits .benef--dobra .benef__item b { color: var(--navy); } .hb__benefits .benef__texto { color: var(--grey-1); } .hb__benefits .benef__box[open] .benef__texto { color: var(--grey-1); } .hb__benefits .benef__mais { border-color: rgba(35, 35, 80, .2); color: var(--royal); } .hb__benefits .benef__topo:hover .benef__mais { color: var(--white); background: var(--electric); border-color: var(--electric); } /* os ícones mantêm a cor de cada tema, só que em versão legível no claro */ .hb__benefits .benef__ico--azul { background: rgba(75, 75, 255, .14); color: var(--royal); } .hb__benefits .benef__ico--teal { background: rgba(0, 200, 160, .18); color: #00916f; } .hb__benefits .benef__ico--violeta { background: rgba(100, 0, 175, .13); color: var(--violet); } .hb__benefits .benef__ico--laranja { background: rgba(255, 90, 0, .15); color: #cc4800; } /* a lista do "e ainda" embaixo */ .hc .hb__benefits .extras { border-top-color: rgba(35, 35, 80, .13); } .hb__benefits .extras li { color: var(--grey-1); } .hb__benefits .extras .extras__txt, .hb__benefits .extras li b { color: var(--navy); } .hb__benefits .extras li > span:first-child { background: rgba(75, 75, 255, .1); color: var(--royal); } /* a linha que fechava os depoimentos batia bem em cima do corte diagonal */ .depo { border-bottom: 0; } /* o "quem treina com você" estava sem fundo próprio: caía no branco do documento e o texto claro sumia. agora ele fecha o corte da dobra do teste */ .time-sec { position: relative; background: radial-gradient(60% 60% at 12% 0%, rgba(100, 0, 175, .15), transparent 70%), radial-gradient(62% 60% at 96% 100%, rgba(75, 75, 255, .15), transparent 70%), #101030; } /* ========================================================================== O perfil das 800 pessoas ganha uma faixa própria: um azul mais fundo, encaixado na dobra, pra separar do painel claro que vem logo acima ========================================================================== */ .perfilzona { position: relative; margin-top: clamp(30px, 4vw, 52px); /* a faixa fecha a dobra: encosta direto nos depoimentos */ margin-bottom: calc(clamp(52px, 6vw, 92px) * -1); padding-block: clamp(26px, 3.4vw, 42px); background: radial-gradient(58% 130% at 50% 50%, rgba(100, 0, 175, .26), transparent 72%), radial-gradient(40% 110% at 8% 50%, rgba(75, 75, 255, .2), transparent 70%), #14143a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -1px 0 rgba(255, 255, 255, .09); } /* o título já é o começo da faixa: não precisa mais do fio em cima */ .perfilzona .perfil { margin-top: 0; padding-top: 0; border-top: 0; } /* ========================================================================== A pergunta toda em azul, com o turquesa só no fundo do destaque ========================================================================== */ .teste-topo__pergunta .mark--verde { background: var(--teal); color: var(--navy); } /* ========================================================================== O cartão do 360º Check-up: a única superfície colorida da dobra clara, pra puxar o olho depois da pergunta ========================================================================== */ .teste-topo .cartao-teste { position: relative; border: 0; background: linear-gradient(135deg, #00c8a0 0%, #1f8fd0 42%, var(--royal) 78%, var(--electric) 100%); box-shadow: 0 22px 50px rgba(40, 40, 180, .38), 0 6px 16px rgba(0, 200, 160, .26); overflow: hidden; isolation: isolate; } .teste-topo .cartao-teste:hover { border: 0; box-shadow: 0 28px 60px rgba(40, 40, 180, .48), 0 8px 20px rgba(0, 200, 160, .34); } /* um brilho que passa devagar por cima do gradiente */ .teste-topo .cartao-teste::before { content: ""; position: absolute; inset: -40%; z-index: -1; background: radial-gradient(38% 46% at 18% 14%, rgba(255, 255, 255, .34), transparent 62%), radial-gradient(44% 50% at 88% 86%, rgba(0, 200, 160, .42), transparent 66%); animation: brilhacard 9s ease-in-out infinite alternate; } @keyframes brilhacard { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.06); } } @media (prefers-reduced-motion: reduce) { .teste-topo .cartao-teste::before { animation: none; } } /* tudo dentro vira branco: o cartão agora é a superfície escura da dobra */ .teste-topo .cartao-teste__tag { color: rgba(255, 255, 255, .92); } .teste-topo .cartao-teste__linha { color: rgba(255, 255, 255, .94); } .teste-topo .cartao-teste__linha b { color: var(--white); font-weight: 800; } .teste-topo .cartao-teste__ico { background: rgba(255, 255, 255, .92); color: var(--royal); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); } /* o botão inverte: branco no cartão colorido */ .teste-topo .cartao-teste__botao { background: var(--white); color: var(--navy); box-shadow: 0 10px 24px rgba(0, 0, 0, .2); } .teste-topo .cartao-teste:hover .cartao-teste__botao { background: #f2f4ff; } .teste-topo .cartao-teste__brilho { display: none; } /* ========================================================================== Quem treina você: fotos retangulares e um + que abre a bio e o vídeo ========================================================================== */ .mentores__head { text-align: center; margin-bottom: clamp(22px, 3vw, 34px); } .mentores__head .hb__bt { margin: 0 0 6px; } .mentores__sub { margin: 0; font-size: var(--t-md); font-weight: 600; color: #a8a8d2; } .mentores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(14px, 2vw, 22px); list-style: none; margin: 0; padding: 0; } .mentor__box { border-radius: var(--r-md); border: 1px solid rgba(255, 255, 255, .15); background: #1b1b3f; overflow: hidden; transition: border-color .22s ease, box-shadow .22s ease; } .mentor__box:hover { border-color: rgba(255, 255, 255, .32); } .mentor__box[open] { border-color: rgba(75, 75, 255, .55); box-shadow: 0 20px 48px rgba(0, 0, 0, .42); } .mentor__topo { display: block; position: relative; cursor: pointer; list-style: none; } .mentor__topo::-webkit-details-marker { display: none; } .mentor__topo::marker { content: ""; } .mentor__foto { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #2b2b62; } .mentor__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform .5s cubic-bezier(.22, .8, .3, 1); } .mentor__box:hover .mentor__foto img { transform: scale(1.05); } .mentor__id { display: block; padding: 14px 52px 16px 16px; } .mentor__nome { display: block; font-size: var(--t-md); font-weight: 800; color: var(--white); letter-spacing: -.01em; } .mentor__cargo { display: block; margin-top: 4px; font-size: var(--t-xs); line-height: 1.45; color: #a8a8d2; } .mentor__mais { position: absolute; right: 14px; top: 16px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .24); color: #9a9aff; transition: transform .3s ease, background-color .2s ease, color .2s ease, border-color .2s ease; } .mentor__mais svg { width: 13px; height: 13px; } .mentor__topo:hover .mentor__mais { background: var(--electric); border-color: var(--electric); color: var(--white); } .mentor__box[open] .mentor__mais { transform: rotate(135deg); } .mentor__corpo { padding: 0 16px 16px; animation: abrebenef .26s ease both; } .mentor__bio { margin: 0 0 12px; font-size: var(--t-sm); line-height: 1.6; color: #c6c6e4; } .mentor__corpo .video { border-radius: var(--r-sm); overflow: hidden; } @media (max-width: 860px) { .mentores { grid-template-columns: 1fr; } .mentor__foto { aspect-ratio: 16 / 9; } } .time-sec .hb__time-txt { margin: clamp(22px, 3vw, 32px) auto 0; text-align: center; } /* o botão do teste volta pro turquesa: no trecho azul do cartão ele grita */ .teste-topo .cartao-teste__botao { background: var(--teal); color: #05302a; box-shadow: 0 12px 28px rgba(0, 200, 160, .45), 0 0 0 4px rgba(255, 255, 255, .22); } .teste-topo .cartao-teste:hover .cartao-teste__botao { background: #16e0b6; box-shadow: 0 16px 34px rgba(0, 200, 160, .55), 0 0 0 5px rgba(255, 255, 255, .3); } .teste-topo .cartao-teste__brilho { display: block; } /* o + desce pro lado do nome, em vez de ficar boiando sobre a foto */ .mentor__mais { top: auto; bottom: 14px; background: rgba(75, 75, 255, .28); border-color: rgba(154, 154, 255, .45); color: #d5d5ff; } /* o fecho da seção dos mentores: a frase de posicionamento e o que é o treino */ .mentores__fecho { width: min(100%, 720px); margin: clamp(24px, 3.2vw, 36px) auto 0; text-align: center; } .mentores__frase { margin: 0 0 10px; font-size: var(--t-md); font-weight: 700; line-height: 1.4; color: var(--white); } .mentores__frase b { color: #b9b9ff; font-weight: 800; } .mentores__texto { margin: 0; font-size: var(--t-sm); line-height: 1.65; color: #a8a8d2; } .mentores__texto b { color: #d5d5ee; font-weight: 700; } /* a pergunta respira: mais ar entre as duas linhas */ .teste-topo__pergunta { line-height: 1.85; } .teste-topo__pergunta .mark--verde { padding-block: .1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* sem o brilho espelhado atravessando o botão: fica só o anel e o turquesa */ .teste-topo .cartao-teste__brilho { display: none; } /* o cabeçalho dos mentores no mesmo padrão das primeiras dobras: chapéu pequeno em caixa alta e o título grande com o destaque azul */ .mentores__head .hb__chapeu { margin: 0 0 6px; } .mentores__head .hb__bt { margin: 0; } /* a descrição fica sempre visível no cartão; o + abre só o vídeo */ .mentor__bio { display: block; margin-top: 10px; font-size: var(--t-sm); line-height: 1.6; color: #c6c6e4; } .mentor__id { padding-bottom: 46px; } .mentor__corpo { padding-top: 2px; } /* ========================================================================== A lupa do check-up lendo a voz ao vivo: as barras dentro da lente sobem e descem em tempos diferentes, como um medidor de áudio ========================================================================== */ .lupa-viva__ondas line { transform-box: fill-box; transform-origin: center; animation: lupaonda 1.5s ease-in-out infinite; } .lupa-viva__ondas line:nth-child(1) { animation-delay: 0s; } .lupa-viva__ondas line:nth-child(2) { animation-delay: .25s; } .lupa-viva__ondas line:nth-child(3) { animation-delay: .5s; } .lupa-viva__ondas line:nth-child(4) { animation-delay: .12s; } @keyframes lupaonda { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1.35); } } /* e a pastilha respira junto, bem de leve */ .teste-topo .cartao-teste__ico { animation: lupapulso 3.2s ease-in-out infinite; } @keyframes lupapulso { 0%, 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, .18), 0 0 0 0 rgba(255, 255, 255, .34); } 60% { box-shadow: 0 6px 18px rgba(0, 0, 0, .18), 0 0 0 10px rgba(255, 255, 255, 0); } } @media (prefers-reduced-motion: reduce) { .lupa-viva__ondas line, .teste-topo .cartao-teste__ico { animation: none; } } /* a descrição agora vive dentro do painel, acima do vídeo */ .mentor__id { padding-bottom: 46px; } .mentor__bio { display: block; margin: 0 0 12px; font-size: var(--t-sm); line-height: 1.6; color: #c6c6e4; } .mentor__mais { top: auto; bottom: 14px; } /* o degradê do cartão usa só as duas cores dos destaques das palavras: o turquesa do "precisa melhorar" e o azul elétrico das pastilhas */ .teste-topo .cartao-teste { background: linear-gradient(135deg, var(--teal) 0%, #18a8c8 34%, #2f6ae6 68%, var(--electric) 100%); } .teste-topo .cartao-teste::before { background: radial-gradient(38% 46% at 16% 12%, rgba(255, 255, 255, .26), transparent 62%), radial-gradient(44% 50% at 90% 88%, rgba(75, 75, 255, .32), transparent 66%); } /* o rótulo na mesma cor da pergunta */ .teste-topo .cartao-teste__tag { color: var(--navy); } /* o link da barra de topo: laranja da marca e sem o sublinhado */ .topbar a { color: var(--orange); border-bottom: 0; font-weight: 700; } .topbar a:hover { color: #ff7a2f; border-bottom: 0; } /* ========================================================================== A dobra das perguntas passa a ter a mesma largura total da conversa de WhatsApp: 1040px, com a foto ocupando uma coluna maior ========================================================================== */ .dorzona { width: min(100%, 1040px); grid-template-columns: minmax(0, 1fr) clamp(180px, 38%, 390px); gap: clamp(20px, 3.2vw, 48px); } .dor--claro .dor__item p { max-width: 46ch; } /* ========================================================================== Dúvidas frequentes: painel claro no fim da página, onde a pessoa lê mais ========================================================================== */ .faq-sec { position: relative; padding-block: clamp(34px, 4.4vw, 62px); background: radial-gradient(60% 60% at 15% 0%, rgba(100, 0, 175, .14), transparent 70%), radial-gradient(62% 60% at 92% 100%, rgba(75, 75, 255, .14), transparent 70%), #101030; } .faq__painel { width: min(100%, 820px); margin-inline: auto; padding: clamp(26px, 3.4vw, 44px) clamp(20px, 2.8vw, 38px) clamp(24px, 3vw, 38px); border: 1px solid rgba(35, 35, 80, .1); border-radius: var(--r-lg); background: linear-gradient(165deg, #ffffff 0%, #f0f3ff 62%, #e9eeff 100%); box-shadow: 0 26px 64px rgba(4, 4, 24, .42); } .faq__painel .hb__chapeu { margin: 0 0 6px; color: var(--royal); } .faq__painel .hb__bt { margin: 0 0 clamp(18px, 2.4vw, 26px); color: var(--navy); } .faq { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .faq__box { border: 1px solid rgba(35, 35, 80, .12); border-radius: var(--r-md); background: var(--white); box-shadow: 0 6px 18px rgba(35, 35, 80, .06); overflow: hidden; transition: border-color .22s ease, box-shadow .22s ease; } .faq__box:hover { border-color: rgba(75, 75, 255, .4); } .faq__box[open] { border-color: rgba(75, 75, 255, .45); box-shadow: 0 16px 38px rgba(35, 35, 80, .16); } .faq__topo { display: flex; align-items: center; gap: 14px; padding: 15px 18px; cursor: pointer; list-style: none; } .faq__topo::-webkit-details-marker { display: none; } .faq__topo::marker { content: ""; } .faq__pergunta { flex: 1; min-width: 0; font-size: var(--t-base); font-weight: 700; line-height: 1.35; color: var(--navy); letter-spacing: -.01em; } .faq__mais { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(35, 35, 80, .2); color: var(--royal); transition: transform .3s ease, background-color .2s ease, color .2s ease, border-color .2s ease; } .faq__mais svg { width: 13px; height: 13px; } .faq__topo:hover .faq__mais { background: var(--electric); border-color: var(--electric); color: var(--white); } .faq__box[open] .faq__mais { transform: rotate(135deg); } .faq__resposta { padding: 0 18px 18px; animation: abrebenef .26s ease both; } .faq__resposta p { margin: 0 0 10px; font-size: var(--t-sm); line-height: 1.7; color: var(--grey-1); } .faq__resposta p:last-child { margin-bottom: 0; } .faq__fecho { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(22px, 2.8vw, 32px); } .btn--faq-zap { background: transparent; color: var(--royal); border: 1px solid rgba(40, 40, 180, .35); } .btn--faq-zap:hover { background: rgba(75, 75, 255, .08); border-color: var(--electric); color: var(--royal); } @media (max-width: 560px) { .faq__topo { gap: 10px; padding: 14px; } .faq__resposta { padding: 0 14px 14px; } .faq__fecho .btn { width: 100%; justify-content: center; } } /* as perguntas maiores e os cartões mais altos: menos vazio em volta do texto */ .dor--claro .dor__item { padding: clamp(24px, 3vw, 34px) clamp(20px, 2.6vw, 30px); } .dor--claro .dor__item p { font-size: clamp(.9375rem, .85rem + .35vw, 1.125rem); max-width: 41ch; } /* as regras responsivas da dobra das perguntas precisam vir depois da largura nova, senão a coluna da foto continua reservando espaço no celular */ @media (max-width: 760px) { .dorzona { align-items: center; } .dorzona__foto { height: auto; aspect-ratio: 3 / 4; align-self: center; } } @media (max-width: 520px) { .dorzona { grid-template-columns: 1fr; } .dorzona__foto { display: none; } .dor--claro .dor__item p { max-width: 100%; } } /* os três grupos do FAQ */ .faq__grupo { margin: clamp(22px, 2.8vw, 30px) 0 10px; font-size: var(--t-xs); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--royal); } .faq__grupo:first-of-type { margin-top: 0; } .faq__link { color: var(--royal); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; } .faq__link:hover { color: var(--electric); } /* ========================================================================== O botão que abre o vídeo "por dentro", dentro do painel da metodologia ========================================================================== */ .pordentro { margin-top: clamp(16px, 2.2vw, 22px); border-radius: var(--r-md); overflow: hidden; } .pordentro__botao { display: flex; align-items: center; gap: 14px; padding: 15px 18px; cursor: pointer; list-style: none; border-radius: var(--r-md); border: 1px solid rgba(75, 75, 255, .4); background: linear-gradient(135deg, rgba(75, 75, 255, .12), rgba(100, 0, 175, .1)); transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease; } .pordentro__botao::-webkit-details-marker { display: none; } .pordentro__botao::marker { content: ""; } .pordentro__botao:hover { border-color: var(--electric); box-shadow: 0 12px 30px rgba(75, 75, 255, .2); } .pordentro__ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--electric); color: var(--white); box-shadow: 0 6px 16px rgba(75, 75, 255, .4); } .pordentro__ico svg { width: 16px; height: 16px; margin-left: 2px; } .pordentro__txt { flex: 1; min-width: 0; font-size: var(--t-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; color: var(--royal); } .pordentro__mais { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(35, 35, 80, .2); color: var(--royal); transition: transform .3s ease, background-color .2s ease, color .2s ease, border-color .2s ease; } .pordentro__mais svg { width: 13px; height: 13px; } .pordentro__botao:hover .pordentro__mais { background: var(--electric); border-color: var(--electric); color: var(--white); } .pordentro[open] .pordentro__mais { transform: rotate(135deg); } .pordentro__corpo { padding-top: 12px; animation: abrebenef .26s ease both; } .pordentro__corpo .video { border-radius: var(--r-md); overflow: hidden; box-shadow: 0 16px 40px rgba(35, 35, 80, .2); } @media (max-width: 560px) { .pordentro__botao { gap: 10px; padding: 13px 14px; } } /* ========================================================================== Os dois botões de vídeo embaixo do "100% online": parte 2 e mais conteúdos ========================================================================== */ .videomais { width: min(100%, 740px); margin: clamp(18px, 2.4vw, 26px) auto 0; display: grid; gap: 10px; } .videomais__box { border-radius: var(--r-md); } .videomais__botao { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; list-style: none; border-radius: var(--r-md); border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease; } .videomais__botao::-webkit-details-marker { display: none; } .videomais__botao::marker { content: ""; } .videomais__botao:hover { border-color: rgba(154, 154, 255, .6); background: rgba(75, 75, 255, .14); box-shadow: 0 12px 30px rgba(0, 0, 0, .3); } .videomais__ico { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--electric); color: var(--white); box-shadow: 0 6px 16px rgba(75, 75, 255, .4); } .videomais__ico svg { width: 15px; height: 15px; margin-left: 2px; } .videomais__ico--teal { background: var(--teal); color: #05302a; box-shadow: 0 6px 16px rgba(0, 200, 160, .34); } .videomais__ico--teal svg { margin-left: 0; } .videomais__txt { flex: 1; min-width: 0; font-size: var(--t-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; color: #d5d5ee; } .videomais__mais { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .24); color: #9a9aff; transition: transform .3s ease, background-color .2s ease, color .2s ease, border-color .2s ease; } .videomais__mais svg { width: 13px; height: 13px; } .videomais__botao:hover .videomais__mais { background: var(--electric); border-color: var(--electric); color: var(--white); } .videomais__box[open] .videomais__mais { transform: rotate(135deg); } .videomais__corpo { padding-top: 12px; animation: abrebenef .26s ease both; } .videomais__corpo .video { border-radius: var(--r-md); overflow: hidden; box-shadow: 0 18px 44px rgba(0, 0, 0, .44); } .videomais__dupla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .videomais__item { margin: 0; } .videomais__item figcaption { margin-top: 8px; font-size: var(--t-xs); line-height: 1.5; color: #a8a8d2; } .videomais__item figcaption b { color: #d5d5ee; font-weight: 700; } @media (max-width: 620px) { .videomais__botao { gap: 10px; padding: 13px 14px; } .videomais__dupla { grid-template-columns: 1fr; } } /* ========================================================================== As redes, depois do checkout: quem não comprou agora sai seguindo ========================================================================== */ .redes-sec { position: relative; padding-block: clamp(36px, 4.6vw, 64px); background: radial-gradient(60% 60% at 18% 0%, rgba(100, 0, 175, .16), transparent 70%), radial-gradient(60% 60% at 88% 100%, rgba(75, 75, 255, .16), transparent 70%), #101030; } .redes-sec__head { text-align: center; width: min(100%, 640px); margin: 0 auto clamp(24px, 3vw, 34px); } .redes-sec__head .hb__chapeu { margin: 0 0 6px; } .redes-sec__head .hb__bt { margin: 0 0 12px; } .redes-sec__linha { margin: 0; font-size: var(--t-sm); line-height: 1.65; color: #a8a8d2; } .redes-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 18px); width: min(100%, 1040px); margin-inline: auto; } .redecard { display: flex; align-items: flex-start; gap: 14px; height: 100%; padding: clamp(18px, 2.2vw, 24px); border-radius: var(--r-md); border: 1px solid rgba(255, 255, 255, .15); background: #1b1b3f; text-decoration: none; transition: transform .5s cubic-bezier(.22, .8, .3, 1), border-color .22s ease, box-shadow .22s ease; } .redecard:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .34); box-shadow: 0 20px 44px rgba(0, 0, 0, .42); } .redecard__ico { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--white); } .redecard__ico svg { width: 22px; height: 22px; } .redecard--ig .redecard__ico { background: linear-gradient(135deg, var(--violet), var(--orange)); } .redecard--th .redecard__ico { background: linear-gradient(135deg, var(--navy), var(--electric)); } .redecard--yt .redecard__ico { background: linear-gradient(135deg, var(--orange), #ff8a45); } .redecard__corpo { flex: 1; min-width: 0; } .redecard__nome { display: block; font-size: var(--t-md); font-weight: 800; color: var(--white); letter-spacing: -.01em; } .redecard__user { display: block; margin-top: 2px; font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; color: #9a9aff; } .redecard__txt { display: block; margin-top: 10px; font-size: var(--t-sm); line-height: 1.6; color: #a8a8d2; } .redecard__seta { flex: none; color: #9a9aff; font-size: 1.1rem; transition: transform .22s ease, color .2s ease; } .redecard:hover .redecard__seta { transform: translateX(4px); color: var(--white); } @media (max-width: 860px) { .redes-cards { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .redecard { transition: none; } .redecard:hover { transform: none; } } /* ========================================================================== Os reels do Instagram: o embed oficial, numa grade com a cara da página ========================================================================== */ .reels { list-style: none; margin: 0 auto clamp(26px, 3.2vw, 38px); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 18px); width: min(100%, 1040px); } .reels__item { min-width: 0; border-radius: var(--r-md); overflow: hidden; background: #1b1b3f; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 18px 44px rgba(0, 0, 0, .38); } /* o embed do Instagram vem com largura e margem próprias: aqui ele obedece */ .reels__item .instagram-media { min-width: 0 !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* enquanto o script não processa, o bloco é só um link legível */ .reels__item blockquote:not(.instagram-media-rendered) { display: grid; place-items: center; min-height: 180px; padding: 20px; } .reels__item blockquote a { color: #9a9aff; font-size: var(--t-sm); font-weight: 700; text-decoration: none; } .reels__item blockquote a:hover { color: var(--white); } @media (max-width: 900px) { .reels { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .reels { grid-template-columns: 1fr; } } /* uma linha de três reels; o botão revela os outros três */ .reels { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0; } .reels__item--extra { display: none; } .reels.is-aberta .reels__item--extra { display: block; } .reels__fecho { display: flex; justify-content: center; margin-top: clamp(18px, 2.2vw, 26px); } .reels__mais { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; border-radius: var(--r-pill); border: 1px solid rgba(75, 75, 255, .5); background: rgba(75, 75, 255, .12); color: #cfcfff; font-family: inherit; font-size: var(--t-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: border-color .2s ease, color .2s ease, background-color .2s ease; } .reels__mais:hover { color: var(--white); border-color: var(--electric); background: rgba(75, 75, 255, .24); } .reels__sinal { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(75, 75, 255, .28); color: #d5d5ff; transition: background-color .2s ease, color .2s ease; } .reels__sinal svg { width: 13px; height: 13px; } .reels__mais:hover .reels__sinal { background: var(--electric); color: var(--white); } /* ========================================================================== O botão fixo pulsa igual à pastilha do check-up: um anel translúcido que abre e some, sem mexer no tamanho do botão nem no layout ========================================================================== */ .acoes__btn { animation: pulsacta 3.2s ease-in-out infinite; } @keyframes pulsacta { 0%, 100% { box-shadow: 0 18px 44px rgba(0, 0, 0, .4), 0 0 0 0 rgba(255, 90, 0, .55); } 60% { box-shadow: 0 18px 44px rgba(0, 0, 0, .4), 0 0 0 18px rgba(255, 90, 0, 0); } } /* no hover o anel para: a pessoa já achou o botão */ .acoes__btn:hover { animation: none; } @media (prefers-reduced-motion: reduce) { .acoes__btn { animation: none; } } /* ========================================================================== O foguete volta pro lado da palavra "inglês": a linha deixa de ser flex, então ele flui junto com a última palavra em vez de cair pra linha de baixo ========================================================================== */ .zapresposta__linha { display: block; flex-wrap: initial; } .zapresposta__texto { display: inline; } /* a lupa na mesma cor do rótulo SPEAKPRO 360º CHECK-UP */ .teste-topo .cartao-teste__ico { color: var(--navy); } /* o foguete cola na última palavra: o espaço inquebrável antes dele impede que ele caia sozinho pra linha de baixo */ .zapresposta__foguete { margin-left: 0; } /* o botão do vídeo por dentro fica centralizado, ícone junto do texto */ .pordentro__botao { justify-content: center; } .pordentro__txt { flex: 0 1 auto; text-align: center; } .pordentro__mais { margin-left: 6px; } /* mais ar entre as linhas do título das redes */ .redes-sec__head .hb__bt { line-height: 1.55; } .redes-sec__head .hb__bt .mark { padding-block: .1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* ========================================================================== No desktop as quatro âncoras ficam visíveis na barra; o painel MENU continua existindo só no celular ========================================================================== */ @media (min-width: 1340px) { .site-header--venda .nav-toggle { display: none; } .site-header--venda .site-nav { display: flex; flex-direction: row; align-items: center; position: static; order: 2; width: auto; margin: 0 20px 0 auto; padding: 0; gap: 20px; background: transparent; border-top: 0; box-shadow: none; } .site-header__acoes { order: 3; margin-left: 0; } .site-header--venda .site-nav a:not(.btn) { width: auto; padding: 6px 2px; font-size: var(--t-sm); font-weight: 600; text-align: center; border-bottom: 2px solid transparent; border-radius: 0; white-space: nowrap; } .site-header--venda .site-nav a:not(.btn):hover { color: var(--royal); border-bottom-color: var(--orange); } .site-header--venda .site-nav a:not(.btn):last-of-type { border-bottom: 2px solid transparent; } /* no desktop os dois botões já estão na barra: no painel eles são repetição */ .site-header--venda .site-nav .nav-aluno--nomenu, .site-header--venda .site-nav .btn--menu { display: none; } } /* ========================================================================== A barra do topo é fixa: sem isso, todo salto de âncora esconde o começo da seção atrás dela. A margem reserva a altura da barra mais um respiro. ========================================================================== */ #video, #beneficios, #depoimentos, #teste, #mentores, #oferta, #redes, #faq { scroll-margin-top: 148px; } @media (max-width: 620px) { #video, #beneficios, #depoimentos, #teste, #mentores, #oferta, #redes, #faq { scroll-margin-top: 124px; } } /* ========================================================================== A logo do treinamento, fixa no canto da tela ========================================================================== */ .logo-flutua { position: fixed; left: 22px; bottom: 22px; z-index: 69; display: block; padding: 12px 14px; border-radius: 18px; background: var(--white); box-shadow: 0 16px 38px rgba(9, 9, 40, .28); line-height: 0; transition: transform .2s ease, box-shadow .2s ease; } .logo-flutua img { display: block; width: 104px; height: auto; } .logo-flutua:hover { transform: translateY(-3px); box-shadow: 0 22px 46px rgba(9, 9, 40, .34); } /* nas telas menores a barra de ações ocupa a base inteira */ @media (max-width: 1120px) { .logo-flutua { display: none; } } /* ========================================================================== O cabeçalho da venda leva a logo do treinamento, então ele cresce ========================================================================== */ .logo-flutua { display: none; } .site-header--venda .site-header__inner { min-height: 108px; padding-block: 10px; } .site-header--venda .site-header__logo img { width: 126px; height: auto; } @media (max-width: 1150px) { .site-header--venda .site-header__inner { min-height: 96px; } .site-header--venda .site-header__logo img { width: 110px; } } @media (max-width: 620px) { .site-header--venda .site-header__inner { min-height: 78px; } .site-header--venda .site-header__logo img { width: 88px; } } /* o cabeçalho cresceu, as âncoras acompanham */ #video, #beneficios, #depoimentos, #teste, #mentores, #oferta, #redes, #faq { scroll-margin-top: 186px; } @media (max-width: 1150px) { #video, #beneficios, #depoimentos, #teste, #mentores, #oferta, #redes, #faq { scroll-margin-top: 176px; } } @media (max-width: 620px) { #video, #beneficios, #depoimentos, #teste, #mentores, #oferta, #redes, #faq { scroll-margin-top: 152px; } } /* ========================================================================== A logo do treinamento pede fundo azul escuro, então o cabeçalho fica escuro ========================================================================== */ .site-header--venda.site-header--branco { background: #1b1b42; border-bottom: 1px solid rgba(255, 255, 255, .12); } .site-header--venda.site-header--branco::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: rgba(255, 255, 255, .08); } /* os links do menu */ .site-header--venda.site-header--branco .site-nav a:not(.btn):not(.nav-aluno) { color: #e4e4ff; } .site-header--venda.site-header--branco .site-nav a:not(.btn):not(.nav-aluno):hover { color: var(--white); } /* "já sou aluno" e o botão Menu, contornos claros */ .site-header--venda.site-header--branco a.nav-aluno, .site-header--venda.site-header--branco .nav-aluno--mobile, .site-header--venda.site-header--branco .nav-toggle { color: #e4e4ff; border-color: rgba(255, 255, 255, .34); background: transparent; } .site-header--venda.site-header--branco a.nav-aluno:hover, .site-header--venda.site-header--branco .nav-aluno--mobile:hover, .site-header--venda.site-header--branco .nav-toggle:hover { color: var(--white); border-color: var(--white); } /* o painel do menu no celular */ @media (max-width: 1150px) { .site-header--venda.site-header--branco .site-nav { background: #1b1b42; border-top: 1px solid rgba(255, 255, 255, .12); } .site-header--venda.site-header--branco .site-nav a:not(.btn) { color: #e4e4ff; border-bottom-color: rgba(255, 255, 255, .1); } .site-header--venda.site-header--branco .site-nav a:not(.btn):hover { color: var(--white); } } /* um respiro a mais em cima, pra logo ficar centrada de verdade */ .site-header--venda .site-header__logo { margin-top: 5px; } #video, #beneficios, #depoimentos, #teste, #mentores, #oferta, #redes, #faq { scroll-margin-top: 191px; } @media (max-width: 1150px) { #video, #beneficios, #depoimentos, #teste, #mentores, #oferta, #redes, #faq { scroll-margin-top: 181px; } } @media (max-width: 620px) { #video, #beneficios, #depoimentos, #teste, #mentores, #oferta, #redes, #faq { scroll-margin-top: 157px; } } /* a barra de cima ficou com uma linha só, as âncoras acompanham */ #video, #beneficios, #depoimentos, #teste, #mentores, #oferta, #redes, #faq { scroll-margin-top: 169px; } @media (max-width: 1150px) { #video, #beneficios, #depoimentos, #teste, #mentores, #oferta, #redes, #faq { scroll-margin-top: 159px; } } @media (max-width: 620px) { #video, #beneficios, #depoimentos, #teste, #mentores, #oferta, #redes, #faq { scroll-margin-top: 137px; } } /* ========================================================================== A oferta: título de abertura, imagem com os tópicos, preço e botão ========================================================================== */ /* a frase de ancoragem virou o título da dobra, encostada na esquerda */ .oferta .oferta__titulo { max-width: 940px; margin: 0 0 clamp(26px, 3.4vw, 46px); padding-left: clamp(14px, 1.6vw, 20px); border-left: 4px solid var(--orange); color: #c0c0e2; font-size: clamp(1.1875rem, .92rem + 1.35vw, 1.875rem); font-weight: 400; line-height: 1.32; letter-spacing: -.015em; } .oferta .oferta__titulo b { color: var(--white); font-weight: 800; } /* a imagem e os tópicos, lado a lado */ .oferta__inner { align-items: center; } .oferta__copy { gap: 0; } /* o fecho: preço, botão e as informações extras */ .oferta__fecho { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; max-width: 660px; margin-top: clamp(34px, 4.2vw, 58px); padding-top: clamp(26px, 3vw, 38px); border-top: 1px solid rgba(255, 255, 255, .14); } .oferta__fecho .oferta__preco { align-items: center; width: auto; padding-top: 0; border-top: 0; } .oferta__fecho .oferta__clique { margin: 16px 0 18px; } .oferta__fecho .oferta__btn { width: 100%; max-width: 520px; animation: pulsacta 3.2s ease-in-out infinite; } .oferta__fecho .oferta__btn:hover { animation: none; } /* pagamento seguro e garantia, juntos, como informação extra */ .oferta__selos { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; text-align: left; } .oferta__selos li { display: flex; align-items: center; gap: 11px; font-size: var(--t-sm); line-height: 1.55; color: #a8a8d2; } .oferta__selos li b { color: var(--white); font-weight: 700; } .oferta__selo-ico { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 200, 160, .18); color: var(--teal); } .oferta__selo-ico svg { width: 18px; height: 18px; } @media (max-width: 560px) { .oferta__selos li { align-items: flex-start; } .oferta__selo-ico { width: 28px; height: 28px; margin-top: 2px; } .oferta__selo-ico svg { width: 16px; height: 16px; } } .oferta__selo-txt { display: block; } /* o CSS da Hotmart entra junto com o widget: os nossos botões seguem nossos */ a.hotmart-fb { background-image: none; text-indent: 0; } a.hotmart-fb img { display: none; } /* ========================================================================== A oferta, segunda volta: a foto acompanha a altura da coluna de texto ========================================================================== */ .oferta__inner { align-items: stretch; } .oferta__vitrine { height: 100%; } .oferta__vitrine img { height: 100%; object-fit: cover; object-position: center 22%; } .oferta__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 0; } .oferta__copy .oferta__preco { align-items: flex-start; width: 100%; margin-top: clamp(20px, 2.4vw, 30px); padding-top: clamp(16px, 2vw, 22px); border-top: 1px solid rgba(255, 255, 255, .14); } .oferta__copy .oferta__clique { margin: 14px 0 16px; text-align: left; } .oferta__copy .oferta__btn { width: 100%; max-width: 460px; animation: pulsacta 3.2s ease-in-out infinite; } .oferta__copy .oferta__btn:hover { animation: none; } /* o fecho agora é só a informação extra, depois da barrinha */ .oferta__fecho { display: block; max-width: none; text-align: left; margin-top: clamp(30px, 3.6vw, 48px); padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid rgba(255, 255, 255, .14); } .oferta__fecho .oferta__selos { flex-direction: row; flex-wrap: wrap; gap: 14px 40px; margin-top: 0; } .oferta__fecho .oferta__selos li { flex: 1 1 300px; } @media (max-width: 860px) { .oferta__vitrine { height: auto; } .oferta__vitrine img { height: auto; object-fit: fill; } .oferta__copy .oferta__btn { max-width: none; } } /* o título da oferta em duas linhas */ .oferta .oferta__titulo span { display: block; } .oferta .oferta__titulo span + span { margin-top: .28em; } /* a foto da oferta reserva a própria altura antes de carregar */ @media (max-width: 860px) { .oferta__vitrine img { aspect-ratio: 720 / 1040; height: auto; } } /* o título cabe em uma linha por frase nas telas largas */ .oferta .oferta__titulo { max-width: 1120px; font-size: clamp(1.1875rem, .92rem + 1.15vw, 1.75rem); } .oferta__fecho .oferta__selos li { flex: 0 1 auto; } /* ========================================================================== Texto selecionado: azul elétrico com letra branca, o destaque da marca ========================================================================== */ ::selection { background: var(--electric); color: var(--white); text-shadow: none; } ::-moz-selection { background: var(--electric); color: var(--white); text-shadow: none; } /* onde o fundo já é elétrico, laranja ou turquesa, a seleção vira navy */ .mark::selection, .mark *::selection, .btn::selection, .btn *::selection, .zap-flutua::selection, .zap-flutua *::selection, .cartao-teste__botao::selection, .cartao-teste__botao *::selection, .perfilzona .pilula::selection, .perfilzona .pilula *::selection { background: var(--navy); color: var(--white); } .mark::-moz-selection, .mark *::-moz-selection, .btn::-moz-selection, .btn *::-moz-selection { background: var(--navy); color: var(--white); } /* os botões de compra em negrito, sempre */ .oferta__btn, .acoes__btn, .btn--menu, .nav-quero { font-weight: 800; } /* ========================================================================== O preço em destaque ========================================================================== */ .oferta__copy .oferta__preco { align-items: flex-start; gap: 6px; width: 100%; margin-top: clamp(20px, 2.4vw, 30px); padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 26px); border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--r-md); background: linear-gradient(135deg, rgba(75, 75, 255, .22) 0%, rgba(0, 200, 160, .12) 100%), rgba(255, 255, 255, .04); } .oferta__copy .oferta__de { font-size: var(--t-sm); color: #d5d5ee; letter-spacing: .01em; } .oferta__copy .oferta__de b { color: var(--white); font-weight: 800; } .oferta__copy .oferta__valor { font-size: clamp(3rem, 1.9rem + 3.4vw, 4.5rem); text-shadow: 0 6px 24px rgba(0, 0, 0, .35); } .oferta__copy .oferta__valor span { color: var(--teal); } .site-header--venda .site-nav .btn--menu { font-weight: 800; } /* ========================================================================== O preço: a parcela em destaque, o à vista logo abaixo ========================================================================== */ .oferta__copy .oferta__preco { gap: 4px; } .oferta__parcela { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .35em; color: var(--white); line-height: 1; } .oferta__vezes { font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem); font-weight: 700; color: #d5d5ee; } .oferta__num { font-size: clamp(3.25rem, 2rem + 3.8vw, 5rem); font-weight: 800; letter-spacing: -.03em; text-shadow: 0 6px 24px rgba(0, 0, 0, .35); } .oferta__cifra { font-size: .42em; font-weight: 700; margin-right: .14em; vertical-align: .9em; color: var(--teal); } .oferta__avista { margin-top: 6px; font-size: clamp(1rem, .92rem + .35vw, 1.1875rem); color: #c6c6e4; } .oferta__avista b { color: var(--white); font-weight: 800; } /* ========================================================================== O botão da oferta com a cara da resposta do WhatsApp: degradê royal pro violeta, o halo girando em volta e o foguete ========================================================================== */ .oferta__copy a.oferta__btn--zap { position: relative; isolation: isolate; overflow: visible; border: 0; border-radius: 16px; background: linear-gradient(135deg, var(--royal) 0%, #4a1ab0 52%, var(--violet) 100%); color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); font-weight: 800; letter-spacing: .05em; animation: none; } .oferta__copy a.oferta__btn--zap::before { content: ""; position: absolute; inset: -2px; border-radius: 18px; background: conic-gradient(from var(--ang), #7a18cf, #b070ff, #8a2fe0, #d0a0ff, #7a18cf); filter: blur(9px); opacity: .8; z-index: -1; animation: giralho 8s linear infinite; transition: opacity .2s ease; } .oferta__copy a.oferta__btn--zap:hover, .oferta__copy a.oferta__btn--zap:focus-visible { background: linear-gradient(135deg, #3333cc 0%, #5c22c8 52%, #7a18cf 100%); color: var(--white); box-shadow: 0 10px 24px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .38); } .oferta__copy a.oferta__btn--zap:hover::before { opacity: 1; } .oferta__btn-txt { display: inline; } /* o foguete paira, esquenta o motor, decola e volta */ .oferta__btn-foguete { display: inline-block; font-size: 1.15em; line-height: 1; will-change: transform, opacity; animation: foguetebotao 7s cubic-bezier(.3, .1, .3, 1) 1s infinite; } @keyframes foguetebotao { 0%, 12%, 24%, 36% { opacity: 1; transform: translateY(0) rotate(0); } 6%, 18%, 30% { transform: translateY(-3px) rotate(-7deg); } /* o motor esquenta */ 42% { transform: translate(-1px, 1px) rotate(-7deg); } 46% { transform: translate(1px, -1px) rotate(5deg); } 50% { transform: translate(-1px, 1px) rotate(-5deg); } 54% { transform: none; } /* e sobe */ 66% { opacity: 1; transform: translate(22px, -30px) rotate(16deg) scale(1.12); } 72% { opacity: 0; transform: translate(48px, -70px) rotate(24deg) scale(.7); } /* volta por baixo */ 73% { opacity: 0; transform: translate(-10px, 14px) rotate(-20deg) scale(.5); } 84%, 100% { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .oferta__btn-foguete { animation: none; } .oferta__copy a.oferta__btn--zap::before { animation: none; } } /* o halo fica atrás do botão, não por cima do degradê */ .oferta__copy { position: relative; isolation: isolate; } .oferta__copy a.oferta__btn--zap { isolation: auto; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; } .oferta__cifra { vertical-align: .75em; } /* o menu fica no meio: mesma distância até a logo e até o "Já sou aluno" */ @media (min-width: 1024px) { .site-header--venda .site-nav { margin: 0 auto; } .site-header--venda .site-header__acoes { margin-left: 0; } } /* ========================================================================== O preço, terceira volta: parcela à esquerda, à vista à direita ========================================================================== */ .oferta__copy .oferta__preco { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0; padding: clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 30px); } .oferta__parcela { display: flex; flex-direction: column; gap: 2px; padding-right: clamp(20px, 2.6vw, 34px); } .oferta__rotulo { font-size: clamp(1rem, .9rem + .4vw, 1.25rem); font-weight: 700; color: #d5d5ee; line-height: 1.2; } .oferta__num { display: flex; align-items: baseline; gap: .12em; color: var(--white); font-size: clamp(3.25rem, 2.2rem + 3.2vw, 4.75rem); font-weight: 800; letter-spacing: -.03em; line-height: .95; text-shadow: 0 6px 24px rgba(0, 0, 0, .35); } .oferta__num .oferta__cifra { font-size: .38em; font-weight: 800; letter-spacing: 0; vertical-align: baseline; margin: 0; color: var(--teal); } .oferta__copy .oferta__avista { display: flex; flex-direction: column; justify-content: center; align-self: stretch; gap: 2px; margin: 0; padding-left: clamp(20px, 2.6vw, 34px); border-left: 1px solid rgba(255, 255, 255, .2); font-size: clamp(.9375rem, .88rem + .25vw, 1.0625rem); line-height: 1.25; color: #c6c6e4; } .oferta__copy .oferta__avista b { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; letter-spacing: -.02em; color: var(--white); } @media (max-width: 420px) { .oferta__copy .oferta__preco { grid-template-columns: 1fr; } .oferta__parcela { padding-right: 0; } .oferta__copy .oferta__avista { flex-direction: row; align-items: baseline; gap: .35em; margin-top: 12px; padding: 12px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .2); } .oferta__copy .oferta__avista b { font-size: 1.25rem; } } /* o botão da oferta: letra maior, menos folga até a borda */ .oferta__copy a.oferta__btn--zap { max-width: 540px; padding: 15px 22px; font-size: clamp(1rem, .92rem + .35vw, 1.1875rem); letter-spacing: .04em; } @media (max-width: 420px) { .oferta__copy .oferta__avista { justify-content: flex-start; } } /* ========================================================================== O preço, quarta volta: duas metades iguais, os números na mesma linha ========================================================================== */ .oferta__copy .oferta__preco { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; align-items: center; justify-items: center; gap: 2px 0; width: 100%; max-width: 540px; padding: clamp(16px, 1.8vw, 22px) clamp(16px, 2vw, 24px); text-align: center; } /* a barra que separa as duas informações */ .oferta__copy .oferta__preco::after { content: ""; position: absolute; left: 50%; top: 18%; bottom: 18%; width: 1px; background: rgba(255, 255, 255, .22); } .oferta__rot { font-size: clamp(.8125rem, .78rem + .15vw, .9375rem); font-weight: 600; letter-spacing: .02em; line-height: 1.2; color: #c6c6e4; } .oferta__rot--topo { grid-column: 1; grid-row: 1; } .oferta__rot--base { grid-column: 2; grid-row: 3; } .oferta__copy .oferta__num { display: flex; align-items: baseline; gap: .14em; color: var(--white); font-size: clamp(2.5rem, 1.9rem + 2vw, 3.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; text-shadow: 0 6px 24px rgba(0, 0, 0, .35); } .oferta__num--esq { grid-column: 1; grid-row: 2; } .oferta__num--dir { grid-column: 2; grid-row: 2; } .oferta__copy .oferta__num .oferta__cifra { font-size: .4em; font-weight: 800; letter-spacing: 0; margin: 0; vertical-align: baseline; color: var(--teal); } /* o botão com o foguete mais perto da frase */ .oferta__copy a.oferta__btn--zap { gap: 5px; } /* pagamento seguro e garantia: na coluna da direita, embaixo do botão, com o texto centralizado */ .oferta__fecho { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(28px, 4.5vw, 64px); } .oferta__fecho .oferta__selos { grid-column: 2; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 540px; text-align: center; } .oferta__fecho .oferta__selos li { flex: none; justify-content: center; align-items: center; text-align: center; } @media (max-width: 860px) { .oferta__fecho { grid-template-columns: 1fr; } .oferta__fecho .oferta__selos { grid-column: 1; max-width: none; } } @media (max-width: 560px) { .oferta__fecho .oferta__selos li { align-items: center; } } .oferta__fecho { max-width: var(--wrap); } /* o R$ do mesmo tamanho do número, e o "à vista" em cima do 250 */ .oferta__copy .oferta__preco { grid-template-rows: auto auto; } .oferta__rot--base { grid-column: 2; grid-row: 1; } .oferta__copy .oferta__num { gap: .22em; font-size: clamp(2.125rem, 1.5rem + 2.1vw, 3.25rem); } .oferta__copy .oferta__num .oferta__cifra { font-size: 1em; letter-spacing: -.03em; } /* os valores em laranja, R$ e número */ .oferta__copy .oferta__num, .oferta__copy .oferta__num .oferta__cifra { color: var(--orange); } /* pagamento seguro e garantia: centralizados na página, numa linha só */ .oferta__fecho { display: block; } .oferta__fecho .oferta__selos { flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 12px 36px; max-width: none; margin-inline: auto; } .oferta__fecho .oferta__selos li { flex: none; white-space: nowrap; } @media (max-width: 1100px) { .oferta__fecho .oferta__selos { flex-wrap: wrap; } .oferta__fecho .oferta__selos li { white-space: normal; } } @media (max-width: 1100px) { .oferta__fecho .oferta__selos li { flex: 0 1 auto; max-width: 100%; } } .oferta__copy .oferta__num { text-shadow: none; } /* quando as duas frases empilham: o bloco fica no centro, mas ícones e começo das frases alinhados na mesma vertical */ @media (max-width: 1100px) { .oferta__fecho .oferta__selos { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; width: fit-content; max-width: 100%; margin-inline: auto; } .oferta__fecho .oferta__selos li { justify-content: flex-start; text-align: left; } } /* ========================================================================== Certificado, acesso, pagamento e garantia: card próprio, logo abaixo do painel da metodologia, com a mesma largura e a mesma cara clara ========================================================================== */ .hc .extras-card { margin-bottom: clamp(18px, 2.4vw, 30px); padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.8vw, 38px); border: 1px solid rgba(35, 35, 80, .1); border-radius: var(--r-lg); background: linear-gradient(165deg, #ffffff 0%, #f0f3ff 62%, #e9eeff 100%); box-shadow: 0 26px 64px rgba(4, 4, 24, .42); } .extras-card .extras { margin: 0; padding: 0; border: 0; align-items: center; } .extras-card .extras li { align-items: center; color: var(--grey-1); } .extras-card .extras .extras__txt, .extras-card .extras li b { color: var(--navy); } .extras-card .extras li > span:first-child { background: rgba(75, 75, 255, .1); color: var(--royal); } /* ========================================================================== O preço em card branco, borda no azul elétrico da seleção ========================================================================== */ .oferta__copy .oferta__preco { background: var(--white); border: 2px solid var(--electric); box-shadow: 0 18px 40px rgba(0, 0, 0, .28); } .oferta__copy .oferta__preco::after { background: rgba(35, 35, 80, .16); } .oferta__copy .oferta__rot { color: var(--electric); font-weight: 700; } /* o mesmo halo girando do botão, agora em volta do preço */ .oferta__copy .oferta__preco::before { content: ""; position: absolute; inset: -2px; border-radius: calc(var(--r-md) + 2px); background: conic-gradient(from var(--ang), #7a18cf, #b070ff, #8a2fe0, #d0a0ff, #7a18cf); filter: blur(9px); opacity: .8; z-index: -1; animation: giralho 8s linear infinite; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .oferta__copy .oferta__preco::before { animation: none; } } /* um respiro menor entre a garantia e a próxima dobra */ .oferta { padding-bottom: calc(clamp(46px, 6vw, 92px) - 15px); } /* o rodapé ganha um pé maior pra última linha não ficar embaixo do botão fixo e do WhatsApp */ .site-footer { padding-bottom: 112px; } @media (max-width: 860px) { .site-footer { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 860px) { .site-footer { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); } } /* o espaço de baixo fica todo no rodapé (azul), não no body (branco) */ body.has-sticky-cta { padding-bottom: 0; } @media (max-width: 860px) { .site-footer { padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); } } /* "inglês" e o foguete andam juntos: o foguete é inline-block (pra poder decolar) e isso deixava o navegador quebrar a linha antes dele */ .zapresposta__cola { white-space: nowrap; } /* o brilho do canto inferior direito da oferta vira roxo, não laranja */ .oferta { background: radial-gradient(70% 90% at 15% 0%, #33338a 0%, rgba(51, 51, 138, 0) 58%), radial-gradient(70% 90% at 100% 100%, rgba(100, 0, 175, .34) 0%, rgba(100, 0, 175, 0) 60%), var(--navy); } /* ========================================================================== "Quero ser aluno": o laranja enche o botão de baixo pra cima e a seta entra ========================================================================== */ .site-header--venda a.nav-quero { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 0; transition: transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .24s ease, border-color .24s ease; } /* a onda que sobe por dentro no hover */ .site-header--venda a.nav-quero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, #ff7a2f 0%, var(--orange) 45%, #e04e00 100%); transform: translateY(101%); transition: transform .34s cubic-bezier(.2, .8, .3, 1); } .site-header--venda a.nav-quero:hover::before, .site-header--venda a.nav-quero:focus-visible::before { transform: translateY(0); } .site-header--venda a.nav-quero:hover, .site-header--venda a.nav-quero:focus-visible { background: var(--orange); border-color: #ff7a2f; color: var(--white); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255, 90, 0, .45), 0 0 0 4px rgba(255, 90, 0, .16); } /* a seta só aparece quando o mouse chega */ .nav-quero__seta { display: inline-block; max-width: 0; opacity: 0; transform: translateX(-6px); overflow: hidden; transition: max-width .28s cubic-bezier(.2, .8, .3, 1), opacity .22s ease, transform .28s cubic-bezier(.2, .8, .3, 1), margin-left .28s cubic-bezier(.2, .8, .3, 1); } .site-header--venda a.nav-quero:hover .nav-quero__seta, .site-header--venda a.nav-quero:focus-visible .nav-quero__seta { max-width: 1.6em; margin-left: .45em; opacity: 1; transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .site-header--venda a.nav-quero, .site-header--venda a.nav-quero::before, .nav-quero__seta { transition: none; } .site-header--venda a.nav-quero:hover { transform: none; } } /* a seta já reserva o lugar dela, pra largura do botão não pular no hover */ .nav-quero__seta { max-width: 1.6em; margin-left: .45em; opacity: 0; transform: translateX(-4px); } .site-header--venda a.nav-quero:hover .nav-quero__seta, .site-header--venda a.nav-quero:focus-visible .nav-quero__seta { opacity: 1; transform: translateX(0); } /* ========================================================================== A trilha do método: mesma largura do bloco das perguntas e ícones maiores ========================================================================== */ .trilha { width: min(100%, 1040px); justify-content: space-between; align-items: flex-start; gap: clamp(10px, 1.8vw, 28px); padding-inline: 0; } .trilha__passo { flex: 1 1 0; width: auto; min-width: 0; gap: 12px; } .trilha__ico { width: clamp(44px, 5.8vw, 74px); } .trilha__nome { font-size: clamp(.5rem, .34rem + .42vw, .78rem); } @media (max-width: 680px) { .trilha { gap: 6px; padding-inline: 0; } .trilha__ico { width: clamp(34px, 9vw, 52px); } .trilha__nome { font-size: clamp(.4375rem, .36rem + .5vw, .625rem); letter-spacing: .04em; } } .trilha { width: min(calc(100% - var(--gutter) * 2), 1040px); } .trilha__nome { max-width: 100%; overflow-wrap: anywhere; } /* no celular o botão é compacto: a seta sairia da tela */ @media (max-width: 620px) { .nav-quero__seta { display: none; } } /* ========================================================================== A dobra da oferta 20% mais baixa: tudo encolhe junto, na mesma proporção ========================================================================== */ .oferta { padding-top: clamp(34px, 4.6vw, 70px); padding-bottom: calc(clamp(34px, 4.6vw, 70px) - 12px); } .oferta .oferta__titulo { margin-bottom: clamp(18px, 2.4vw, 32px); font-size: clamp(1.0625rem, .88rem + .95vw, 1.5rem); line-height: 1.28; } .oferta__lista { gap: 7px; } .oferta__lista li { padding-left: 26px; font-size: clamp(.8125rem, .78rem + .16vw, .9375rem); line-height: 1.45; } .oferta__lista li::before { width: 15px; height: 15px; top: .28em; } .oferta__lista li::after { left: 4px; top: .58em; } .oferta__copy .oferta__preco { margin-top: clamp(14px, 1.8vw, 22px); padding: clamp(12px, 1.4vw, 17px) clamp(14px, 1.8vw, 22px); } .oferta__copy .oferta__num { font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.6rem); } .oferta__copy .oferta__rot { font-size: clamp(.75rem, .72rem + .12vw, .8125rem); } .oferta__copy .oferta__clique { margin: 10px 0 11px; font-size: clamp(.875rem, .84rem + .16vw, 1rem); } .oferta__copy a.oferta__btn--zap { padding: 12px 20px; font-size: clamp(.9375rem, .88rem + .26vw, 1.0625rem); } .oferta__fecho { margin-top: clamp(20px, 2.4vw, 32px); padding-top: clamp(14px, 1.8vw, 22px); } .oferta__selos li { font-size: clamp(.8125rem, .78rem + .16vw, .9375rem); } .oferta__selo-ico { width: 28px; height: 28px; } .oferta__selo-ico svg { width: 16px; height: 16px; } /* a foto da oferta ocupa uma coluna mais estreita, pra dobra ficar mais baixa */ .oferta__inner { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); } /* telas bem estreitas: o cabeçalho aperta os botões pra não vazar */ @media (max-width: 360px) { .site-header--venda a.nav-quero { padding: 7px 9px; font-size: .625rem; } .site-header--venda .nav-toggle { padding: 7px 9px; font-size: .625rem; } } /* mais respiro entre os cards das perguntas e "Nós temos a solução" */ p.hc__pain.hc__pain--solucao { margin-top: 30px; } /* ========================================================================== A oferta encolhe mais 20%: mesma proporção em tudo ========================================================================== */ .oferta { padding-top: clamp(26px, 3.5vw, 52px); padding-bottom: calc(clamp(26px, 3.5vw, 52px) - 10px); } .oferta .oferta__titulo { margin-bottom: clamp(12px, 1.7vw, 22px); font-size: clamp(.9375rem, .82rem + .72vw, 1.28rem); line-height: 1.26; border-left-width: 3px; } .oferta__lista { gap: 5px; } .oferta__lista li { padding-left: 22px; font-size: clamp(.75rem, .73rem + .1vw, .84rem); line-height: 1.38; } .oferta__lista li::before { width: 13px; height: 13px; top: .24em; } .oferta__lista li::after { left: 3.5px; top: .5em; width: 6px; height: 3px; } .oferta__copy .oferta__preco { margin-top: clamp(10px, 1.3vw, 16px); padding: clamp(9px, 1.1vw, 13px) clamp(12px, 1.5vw, 18px); } .oferta__copy .oferta__num { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.1rem); } .oferta__copy .oferta__rot { font-size: clamp(.6875rem, .67rem + .08vw, .75rem); } .oferta__copy .oferta__clique { margin: 7px 0 8px; font-size: clamp(.8125rem, .79rem + .12vw, .9375rem); } .oferta__copy a.oferta__btn--zap { padding: 10px 18px; font-size: clamp(.875rem, .85rem + .14vw, 1rem); } .oferta__fecho { margin-top: clamp(14px, 1.7vw, 22px); padding-top: clamp(11px, 1.3vw, 16px); } .oferta__selos li { font-size: clamp(.75rem, .73rem + .1vw, .84rem); } .oferta__selo-ico { width: 24px; height: 24px; } .oferta__selo-ico svg { width: 14px; height: 14px; } /* a foto acompanha a altura da coluna de texto sem puxar a dobra pra baixo */ .oferta__vitrine { position: relative; overflow: hidden; min-height: 240px; border-radius: var(--r-lg); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 26px 70px rgba(0, 0, 0, .5); } .oferta__vitrine img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; border: 0; border-radius: 0; box-shadow: none; } @media (max-width: 860px) { .oferta__vitrine { position: relative; min-height: 0; aspect-ratio: 720 / 1040; height: auto; } .oferta__vitrine img { position: absolute; height: 100%; aspect-ratio: auto; object-fit: cover; } } /* a coluna da foto fica do tamanho exato do cartaz, pra não cortar a marca */ .oferta__inner { grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr); } .oferta__vitrine img { object-position: center center; } /* ========================================================================== O mesmo halo do botão em volta do card do SpeakPro 360º Check-up ========================================================================== */ .cartao-teste__moldura { position: relative; width: min(100%, 720px); margin-top: 10px; } .teste-topo .cartao-teste__moldura::before { content: ""; position: absolute; inset: 7px -3px -3px; border-radius: calc(var(--r-lg) + 3px); background: conic-gradient(from var(--ang), #7a18cf, #b070ff, #8a2fe0, #d0a0ff, #7a18cf); filter: blur(11px); opacity: .75; z-index: 0; animation: giralho 8s linear infinite; pointer-events: none; } .cartao-teste__moldura .cartao-teste { position: relative; z-index: 1; width: 100%; margin-top: 0; } @media (prefers-reduced-motion: reduce) { .teste-topo .cartao-teste__moldura::before { animation: none; } } /* ========================================================================== "Quero ser aluno": sem seta, com o laranja subindo e o halo atrás ========================================================================== */ .nav-quero__seta { display: none; } .site-header--venda a.nav-quero { overflow: visible; isolation: auto; } .site-header--venda a.nav-quero::before { border-radius: calc(var(--r-sm) - 2px); z-index: 0; } .nav-quero__txt { position: relative; z-index: 1; } .site-header--venda a.nav-quero::after { content: ""; position: absolute; inset: -3px; border-radius: calc(var(--r-sm) + 3px); background: conic-gradient(from var(--ang), #ff5a00, #ffb27a, #e04e00, #ff9a4d, #ff5a00); filter: blur(9px); opacity: .75; z-index: -1; animation: giralho 8s linear infinite; pointer-events: none; transition: opacity .24s ease; } .site-header--venda a.nav-quero:hover::after { opacity: 1; } @media (prefers-reduced-motion: reduce) { .site-header--venda a.nav-quero::after { animation: none; } } /* o preenchimento cresce de baixo pra cima sem escapar do botão */ .site-header--venda a.nav-quero::before { transform: scaleY(0); transform-origin: bottom; transition: transform .34s cubic-bezier(.2, .8, .3, 1); } .site-header--venda a.nav-quero:hover::before, .site-header--venda a.nav-quero:focus-visible::before { transform: scaleY(1); } /* a frase fica centralizada em cima do botão */ .oferta__copy .oferta__clique { width: 100%; max-width: 540px; text-align: center; } /* a fumaça em volta do "quero ser aluno" fica um pouco mais aberta */ .site-header--venda a.nav-quero::after { inset: -5px; filter: blur(11px); opacity: .9; } /* sem isto o fundo do cabeçalho passa por cima da fumaça do botão */ .site-header--venda .site-header__acoes { position: relative; isolation: isolate; } /* o "quero ser aluno" volta ao simples: sem fumaça, sem preenchimento */ .site-header--venda a.nav-quero::before, .site-header--venda a.nav-quero::after { content: none; display: none; } .site-header--venda a.nav-quero { transform: none; box-shadow: none; transition: background-color .18s ease, border-color .18s ease; } .site-header--venda a.nav-quero:hover, .site-header--venda a.nav-quero:focus-visible { background: #e04e00; border-color: #e04e00; color: var(--white); transform: none; box-shadow: none; } /* a quebra só vale onde a linha caberia inteira */ @media (max-width: 900px) { br.quebra-larga { display: none; } } /* o preço, a frase e o botão ficam centralizados dentro da coluna */ .oferta__copy .oferta__preco, .oferta__copy .oferta__clique, .oferta__copy a.oferta__btn--zap { margin-inline: auto; } .oferta__fecho .oferta__selos { margin-inline: auto; } /* a lista também fica centralizada como bloco, com o texto à esquerda */ .oferta__copy .oferta__lista { width: fit-content; max-width: 100%; margin-inline: auto; } /* a fumaça do card do check-up nas cores da casa: azul elétrico e turquesa */ .teste-topo .cartao-teste__moldura::before { background: conic-gradient(from var(--ang), var(--teal), var(--electric), #18a8c8, var(--royal), var(--teal)); opacity: .8; } /* "quero ser aluno": no hover vira o azul da SpeakPro */ .site-header--venda a.nav-quero:hover, .site-header--venda a.nav-quero:focus-visible { background: var(--electric); border-color: var(--electric); color: var(--white); } /* a foto e a lista mais juntas, e a dobra inteira mais estreita */ .oferta__inner { width: min(100%, 900px); margin-inline: auto; gap: clamp(16px, 2.2vw, 30px); grid-template-columns: minmax(0, .56fr) minmax(0, 1.44fr); } .oferta .oferta__titulo { width: min(100%, 900px); max-width: none; margin-inline: auto; } .oferta__fecho { width: min(100%, 900px); margin-inline: auto; } /* a coluna da foto um pouco maior, pra não cortar as laterais do cartaz */ .oferta__inner { grid-template-columns: minmax(0, .64fr) minmax(0, 1.36fr); } /* em vez da fumaça, o card do check-up pulsa como o botão "fazer o teste" */ .teste-topo .cartao-teste__moldura::before { display: none; } .teste-topo .cartao-teste__moldura { border-radius: var(--r-lg); animation: pulsocheckup 3.8s ease-out infinite; } @keyframes pulsocheckup { 0% { box-shadow: 0 0 0 0 rgba(0, 200, 160, .45), 0 0 0 0 rgba(75, 75, 255, .32); } 70% { box-shadow: 0 0 0 18px rgba(0, 200, 160, 0), 0 0 0 30px rgba(75, 75, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 200, 160, 0), 0 0 0 0 rgba(75, 75, 255, 0); } } @media (prefers-reduced-motion: reduce) { .teste-topo .cartao-teste__moldura { animation: none; } } /* o foguete do botão da oferta mais afastado da frase */ .oferta__copy a.oferta__btn--zap { gap: 25px; } /* a resposta do WhatsApp cabe numa linha só, com o foguete junto */ @media (min-width: 901px) { .zapzona .zapresposta__linha { white-space: nowrap; } .zapzona .zapresposta__texto { font-size: 1rem; letter-spacing: .04em; } } /* entre 900 e 1100 a frase encolhe um pouco pra continuar numa linha só */ @media (min-width: 901px) { .zapzona .zapresposta__texto { font-size: min(1rem, 1.5vw); } } /* ========================================================================== Celular: depoimentos, vídeos e reels em coluna, com "ver mais" ========================================================================== */ /* a caixinha que guarda o estado do "ver mais vídeos" fica invisível, colada no botão, igual à dos prints */ .gal__ctrl { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .gal__mais { display: none; } @media (max-width: 560px) { /* prints: uma lista simples, sem altura travada. A altura travada com colunas fazia o navegador criar colunas extras pra direita, que escapavam da tela e passavam por cima dos vídeos */ .prints__mural { columns: auto; column-count: 1; max-height: none; } .prints:not(:has(.prints__ctrl:checked)) .prints__mural .zapcard:nth-of-type(n+4) { display: none; } /* vídeos: dois de cada vez */ .gal:not(:has(.gal__ctrl:checked)) .gal__lista .gal__item:nth-of-type(n+3) { display: none; } .gal__mais--abre { display: flex; } .gal:has(.gal__ctrl:checked) .gal__mais--abre { display: none; } .gal:has(.gal__ctrl:checked) .gal__mais--fecha { display: flex; } .gal__mais { margin-top: 18px; } } /* reels do Instagram: uma coluna no celular, três visíveis e o resto no "ver mais". A regra de três colunas estava depois das de celular e passava por cima delas */ @media (max-width: 760px) { .reels { grid-template-columns: minmax(0, 1fr); gap: 16px; } .reels__item { max-width: 420px; width: 100%; margin-inline: auto; } } /* ========================================================================== Celular: a oferta volta a ser uma coluna só. A regra de duas colunas do desktop estava depois da de celular e vencia, e a foto caía em cima do texto ========================================================================== */ @media (max-width: 860px) { .oferta__inner { grid-template-columns: minmax(0, 1fr); width: 100%; gap: 24px; } .oferta__vitrine { width: 100%; max-width: 280px; height: auto; min-height: 0; margin-inline: auto; aspect-ratio: 720 / 1040; } .oferta__vitrine img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .oferta__copy .oferta__lista { width: 100%; } .oferta .oferta__titulo { width: 100%; } } /* ========================================================================== Celular: o botão fixo "quero transformar meu inglês" no meio da barra ========================================================================== */ @media (max-width: 860px) { .acoes { justify-content: center; } .acoes__btn { width: min(100%, 360px); justify-content: center; text-align: center; } } /* a foto do teste: largura toda no celular, com reserva de altura mesmo em navegador antigo que não entende aspect-ratio */ @media (max-width: 860px) { .testezona__foto { width: min(100%, 440px); } @supports not (aspect-ratio: 4 / 3) { .testezona__foto { height: 0; padding-top: 75%; } } } /* ========================================================================== Ajustes de leitura no celular ========================================================================== */ /* as frases que são digitadas quebram sempre no mesmo lugar, senão as linhas ficam dançando enquanto o texto aparece */ br.quebra-fone { display: none; } @media (max-width: 900px) { br.quebra-fone { display: inline; } } /* a trilha não parte palavra no meio: antes quebrava "understand-ing" */ .trilha__nome { overflow-wrap: normal; word-break: keep-all; hyphens: none; } @media (max-width: 420px) { .trilha { gap: 4px; } .trilha__nome { font-size: clamp(.375rem, .3rem + .4vw, .5rem); letter-spacing: .02em; } } /* ========================================================================== O vídeo ganha um halo em volta, que some quando a pessoa dá play ========================================================================== */ .video--facade { animation: halovideo 7s linear infinite; } @keyframes halovideo { 0% { filter: drop-shadow(0 0 7px rgba(122, 24, 207, .85)) drop-shadow(0 0 26px rgba(122, 24, 207, .55)); } 25% { filter: drop-shadow(0 0 7px rgba(75, 75, 255, .9)) drop-shadow(0 0 28px rgba(75, 75, 255, .6)); } 50% { filter: drop-shadow(0 0 7px rgba(40, 40, 180, .9)) drop-shadow(0 0 28px rgba(40, 40, 180, .6)); } 75% { filter: drop-shadow(0 0 7px rgba(176, 112, 255, .85)) drop-shadow(0 0 28px rgba(176, 112, 255, .55)); } 100% { filter: drop-shadow(0 0 7px rgba(122, 24, 207, .85)) drop-shadow(0 0 26px rgba(122, 24, 207, .55)); } } .video--tocando { animation: none; filter: none; background-image: none; } @media (prefers-reduced-motion: reduce) { .video--facade { animation: none; filter: drop-shadow(0 0 12px rgba(75, 75, 255, .45)); } } /* a terceira faixa de perfis */ .perfil__faixa--c .marquee__track { animation-duration: 58s; } @media (max-width: 620px) { .perfil__faixa--c .marquee__track { animation-duration: 44s; } } /* ========================================================================== O halo sai do vídeo de "por dentro" e vai pro botão que abre ele ========================================================================== */ .pordentro .video--facade { animation: none; filter: none; } .pordentro__botao { position: relative; animation: halovideo 7s linear infinite; } .pordentro[open] .pordentro__botao { animation: none; filter: none; } /* a capa do vídeo preenche a moldura inteira, sem sobra nas bordas */ .video--facade { background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; background-color: #10102c; } /* no painel claro o halo precisa ser mais fechado e mais saturado pra aparecer */ .pordentro__botao { animation-name: halobotao; animation-duration: 6s; } @keyframes halobotao { 0% { filter: drop-shadow(0 0 3px rgba(100, 0, 175, .6)) drop-shadow(0 0 14px rgba(100, 0, 175, .45)); } 33% { filter: drop-shadow(0 0 3px rgba(40, 40, 180, .65)) drop-shadow(0 0 16px rgba(75, 75, 255, .5)); } 66% { filter: drop-shadow(0 0 3px rgba(176, 112, 255, .6)) drop-shadow(0 0 16px rgba(176, 112, 255, .45)); } 100% { filter: drop-shadow(0 0 3px rgba(100, 0, 175, .6)) drop-shadow(0 0 14px rgba(100, 0, 175, .45)); } } @media (prefers-reduced-motion: reduce) { .pordentro__botao { animation: none; filter: drop-shadow(0 0 10px rgba(75, 75, 255, .45)); } } /* ========================================================================== O carrossel de fotos para no mouse: a foto apontada cresce e as outras recuam um pouco, pra deixar claro em qual delas você está ========================================================================== */ .faixa { padding-block: clamp(10px, 1.8vw, 22px); } .faixa img { position: relative; transition: transform .35s cubic-bezier(.22, .8, .3, 1), box-shadow .35s ease, border-color .35s ease, opacity .35s ease; } .faixa:hover img { opacity: .72; } .faixa img:hover { z-index: 2; opacity: 1; transform: scale(1.07); border-color: rgba(255, 255, 255, .42); box-shadow: 0 22px 50px rgba(0, 0, 0, .55); } @media (prefers-reduced-motion: reduce) { .faixa img, .faixa img:hover { transition: none; transform: none; } } /* ========================================================================== "Já sou aluno" sempre na barra Quem já comprou precisa achar o login sem abrir o menu. Então o botão volta pra barra em qualquer largura. Em tela estreita ele fica só com o ícone de entrada, pra não empurrar o "quero ser aluno" pra fora. ========================================================================== */ .site-header--venda .site-header__acoes a.nav-aluno { display: inline-flex; align-items: center; gap: 7px; } .nav-aluno__icone { width: 15px; height: 15px; flex: 0 0 auto; } /* no desktop o texto já diz tudo */ @media (min-width: 561px) { .nav-aluno__icone { display: none; } } @media (max-width: 720px) { .site-header--venda .site-header__acoes a.nav-aluno { display: inline-flex; } } @media (max-width: 560px) { .site-header--venda .site-header__acoes a.nav-aluno { gap: 0; padding: 8px 10px; } .site-header--venda .site-header__acoes a.nav-aluno .nav-aluno__txt { display: none; } .nav-aluno__icone { width: 18px; height: 18px; } .site-header__acoes { gap: 7px; } } @media (max-width: 400px) { .site-header--venda .site-header__logo img { width: 78px; } .site-header--venda a.nav-quero { padding: 8px 10px; letter-spacing: .03em; } .site-header__acoes { gap: 6px; } } /* dentro do painel o link só faz falta quando a barra mostra apenas o ícone */ @media (min-width: 561px) { .site-header--venda .site-nav a.nav-aluno--nomenu { display: none; } } /* telas bem estreitas, tipo iPhone SE antigo: tudo encolhe um pouco mais */ @media (max-width: 345px) { .site-header--venda .site-header__logo img { width: 68px; } .site-header--venda .nav-toggle { padding: 7px 8px; font-size: .625rem; } .site-header--venda .site-header__acoes a.nav-aluno { padding: 7px 8px; } .site-header--venda a.nav-quero { padding: 7px 8px; font-size: .625rem; letter-spacing: .02em; } .nav-aluno__icone { width: 16px; height: 16px; } .site-header__acoes { gap: 5px; } } /* ========================================================================== Abas do bloco de redes: vídeos do Instagram e posts do Threads Os dois formatos têm alturas muito diferentes, então em vez de misturar na mesma grade a pessoa escolhe o que quer ver. Sem JavaScript: são dois botões de rádio escondidos. ========================================================================== */ .redes-abas { position: relative; } .redes-abas__ctrl { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .redes-abas__botoes { display: flex; justify-content: center; gap: 6px; width: max-content; max-width: 100%; margin: 0 auto clamp(20px, 2.6vw, 32px); padding: 5px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); } .redes-abas__btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--r-pill); color: #b4b4dc; font-size: var(--t-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: color .18s ease, background-color .18s ease; } .redes-abas__btn:hover { color: var(--white); } .redes-abas__btn svg { width: 15px; height: 15px; flex: 0 0 auto; } .redes-abas:has(#aba-insta:checked) .redes-abas__btn[for="aba-insta"], .redes-abas:has(#aba-threads:checked) .redes-abas__btn[for="aba-threads"] { background: var(--electric); color: var(--white); } .redes-abas:has(#aba-insta:checked) .redes-abas__painel--threads, .redes-abas:has(#aba-threads:checked) .redes-abas__painel--insta { display: none; } #aba-insta:focus-visible ~ .redes-abas__botoes .redes-abas__btn[for="aba-insta"], #aba-threads:focus-visible ~ .redes-abas__botoes .redes-abas__btn[for="aba-threads"] { outline: 2px solid var(--white); outline-offset: 2px; } @media (max-width: 420px) { .redes-abas__btn { padding: 9px 14px; font-size: .625rem; letter-spacing: .05em; } } /* a lista de posts do Threads */ .threads { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: minmax(0, 1fr); width: min(100%, 980px); } @media (min-width: 761px) { .threads { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .threads__item { min-width: 0; } .threads__item blockquote { margin: 0 !important; min-width: 0 !important; max-width: 100% !important; } /* enquanto o script da Meta não converte, o bloco é só um link: com cara de cartão, pra não parecer coisa quebrada */ .threads__item .text-post-media { display: block; padding: 20px; border-radius: var(--r-md); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .16); color: #b4b4dc; font-size: var(--t-sm); } .threads__item .text-post-media a { color: #9a9aff; font-weight: 700; text-decoration: underline; } .threads__item .text-post-media a:hover { color: var(--white); } .threads__fecho { margin-top: clamp(18px, 2.4vw, 26px); text-align: center; } /* post sozinho na última linha fica centralizado, não encostado à esquerda */ @media (min-width: 761px) { .threads__item:last-child:nth-child(odd) { grid-column: 1 / -1; width: min(100%, 480px); margin-inline: auto; } } .threads__fecho .reels__mais { text-decoration: none; } /* o link do cartão do Threads vira botão: lido de longe, sem sublinhado fino */ .threads__item .text-post-media { color: #d5d5ee; text-align: center; } .threads__item .text-post-media p { margin: 0 0 14px; font-size: var(--t-sm); line-height: 1.5; } .threads__item .text-post-media b { color: var(--white); font-weight: 700; } .threads__item .text-post-media a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: var(--r-pill); background: var(--electric); border: 2px solid var(--electric); color: var(--white); font-size: var(--t-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: background-color .18s ease, border-color .18s ease; } .threads__item .text-post-media a:hover, .threads__item .text-post-media a:focus-visible { background: var(--royal); border-color: var(--white); color: var(--white); } /* ========================================================================== O CARTÃO DO THREADS QUANDO O EMBED NÃO CONVERTE O script da Meta troca o
por um iframe. Quando ele não dá conta de um post (ou demora, ou o navegador bloqueia), o que fica na tela é o conteúdo cru do blockquote. O estilo de botão estava preso em `.text-post-media a`, e a Meta às vezes mexe nesse wrapper no meio do caminho: aí o link voltava a ser texto azul sublinhado em cima de fundo escuro, que é o que estava ilegível. Aqui o estilo passa a valer pra qualquer link dentro do item, com o seletor do pai pra ganhar das regras da Meta. Quando o iframe carrega direito não sobra link nenhum solto, então nada disso aparece. ========================================================================== */ .threads__item a:not(.reels__mais) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; padding: 11px 20px; border-radius: var(--r-pill); background: var(--electric); border: 2px solid var(--electric); color: var(--white); font-family: inherit; font-size: var(--t-xs); font-weight: 800; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; text-decoration: none; text-align: center; transition: background-color .18s ease, border-color .18s ease; } .threads__item a:not(.reels__mais):hover, .threads__item a:not(.reels__mais):focus-visible { background: var(--royal); border-color: var(--white); color: var(--white); } /* o cartão não encolhe pra nada enquanto o embed decide o que fazer, pra a grade não pular de altura no meio do carregamento */ .threads__item .text-post-media { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 150px; } .threads__item .text-post-media p { margin: 0; } @media (prefers-reduced-motion: reduce) { .threads__item a:not(.reels__mais) { transition: none; } }