/* ========================================================================== PÁGINA OBRIGADO — CSS próprio POR QUE ESTE ARQUIVO EXISTE E NÃO UM BLOCO NO styles.css O macOS bloqueou a escrita nos arquivos que já existiam nesta pasta, então o `assets/styles.css` não pôde ser atualizado — ele ainda tem a PRIMEIRA versão deste bloco (hero vermelho desenhado em CSS, botão outline, hero de 75vh). Este arquivo carrega DEPOIS do styles.css no da obrigado.html e reescreve tudo o que mudou; as regras antigas que sobraram lá miram elementos que não existem mais no HTML (.obrigado-hero-bg, .obrigado-hero-waves, .btn-outline) e ficam inertes. QUANDO DER PARA EDITAR O styles.css DE NOVO: apague de lá o bloco "PÁGINA OBRIGADO — hero de confirmação" inteiro, cole este conteúdo no lugar e remova o deste arquivo na obrigado.html. ========================================================================== */ /* ========================================================================== PÁGINA OBRIGADO — hero de confirmação Fundo igual ao da highschool.html: a foto `hero-curso-ingles-1.webp` no `.hero-bg` e o `--hero-overlay` padrão no `.hero-overlay` (aquele bloco tem especificidade maior que qualquer `.hero--x .hero-overlay`, então é ele que pinta o degradê nas duas páginas — não há nada a declarar aqui). `min-height` (e não `height`) porque o bloco "HERO — nunca deixar o conteúdo passar por cima da seção seguinte" força `height:auto!important` no desktop; o piso continua valendo e o hero cresce se o conteúdo precisar. ========================================================================== */ body.page-obrigado .hero--obrigado { background: #000; min-height: 62vh; justify-content: center; } @supports (height: 62svh) { body.page-obrigado .hero--obrigado { min-height: 62svh; } } body.page-obrigado .hero--obrigado .hero-bg { background-image: url('https://australiancentre.com.br/wp-content/uploads/2026/08/hero-curso-ingles-1.webp'); background-position: center 42%; background-size: cover; background-repeat: no-repeat; opacity: 1; } /* Tipografia do hero: os três textos são bem maiores que o padrão das outras páginas, e as proporções entre eles é que dão o desenho — eyebrow ~0,50 e subtítulo ~0,62 do tamanho do título. Por isso os três clamps têm a mesma inclinação em vw: crescem juntos e a relação se mantém em qualquer largura. */ body.page-obrigado .hero--obrigado .hero-body { max-width: 1180px; padding: 118px 24px 74px; } body.page-obrigado .hero--obrigado .support-hero-kicker { font-size: clamp(20px, 2.6vw, 40px); font-weight: 600; letter-spacing: .01em; line-height: 1.1; margin: 0 0 10px; } body.page-obrigado .hero-title-obrigado { font-size: clamp(32px, 5.2vw, 80px); font-weight: 800; line-height: 1.04; max-width: 1120px; margin: 0 auto 6px; text-shadow: 0 4px 22px rgba(20, 0, 3, .38); } body.page-obrigado .obrigado-hero-sub { color: #fff; font-size: clamp(20px, 3.25vw, 50px); font-weight: 700; text-transform: uppercase; letter-spacing: .005em; line-height: 1.1; max-width: 1120px; margin: 0 auto 26px; text-shadow: 0 3px 18px rgba(20, 0, 3, .34); } /* A seção do podcast sobe por cima do hero com o canto arredondado padrão (mesmo recurso da .contato-intro). Vence o `.sec-video.parapara{margin-top:-56px}` por especificidade, não por ordem. O `padding-bottom` extra é por causa da foto do microfone: a `.blog-mic-wrap` sobe 290px para invadir a seção anterior e na home ela cai sobre a seção de escolas, que fica entre o podcast e o blog. Aqui o blog vem logo depois do podcast, então ela caía em cima do card do vídeo. Com 280px a foto passa a entrar ~130px abaixo do card. */ body.page-obrigado main > section.sec-video { background: repeating-linear-gradient(90deg, rgba(255,255,255,.34) 0 1px, rgba(255,255,255,0) 1px 118px), repeating-linear-gradient(180deg, rgba(255,255,255,.34) 0 1px, rgba(255,255,255,0) 1px 118px), #e9e9e9; border-radius: var(--radius) var(--radius) 0 0; margin-top: calc(var(--radius) * -1); padding-bottom: 280px !important; } /* O FAQ e o hero desta página não têm formulário para onde apontar: o parágrafo e o CTA do componente levam a `#form-cta`, que aqui seria uma âncora morta. Mesmo tratamento que a .page-sobre dá ao cabeçalho do blog. */ body.page-obrigado .faq-left p, body.page-obrigado .faq-left .btn-red { display: none; } @media (max-width: 768px) { body.page-obrigado .hero--obrigado { min-height: 58svh; } body.page-obrigado .hero--obrigado .hero-body { padding: 112px 18px 58px; max-width: 460px; } /* `!important` para vencer o clamp global de h1 mobile (`body:not(.page-home) .hero-body h1`), que também usa !important. */ body.page-obrigado .hero-title-obrigado { font-size: clamp(26px, 7.6vw, 40px) !important; max-width: 100% !important; margin-bottom: 6px !important; } body.page-obrigado .hero--obrigado .support-hero-kicker { font-size: clamp(14px, 3.8vw, 20px); font-weight: 600; } body.page-obrigado .obrigado-hero-sub { font-size: clamp(15px, 4.7vw, 25px); max-width: 100%; margin-bottom: 22px; } body.page-obrigado main > section.sec-video { background-size: 84px 84px, 84px 84px, auto; border-radius: var(--radius-mobile) var(--radius-mobile) 0 0; margin-top: calc(var(--radius-mobile) * -1); padding-bottom: 120px !important; } }