/* ========================================================================== R10 EXPERIENCE — style.css Fonte primária do design: "Articulat CF" (fonte paga/licenciada, NÃO incluída neste projeto). Enquanto a licença não for adicionada, usamos 'Montserrat'/system sans-serif como fallback visual aproximado. Ver README/aviso enviado no chat para detalhes. ========================================================================== */ /* Montserrat agora é carregada via no do index.html (mais rápido e confiável que @import — importante pra Safari/iOS em navegadores in-app como o do WhatsApp, onde @import pode atrasar e causar fallback pro fallback do sistema, que é mais largo e quebra o layout). */ :root { /* Cores extraídas do Figma (get_variable_defs + valores inline) */ --color-bg: #0d0d0d; --color-white: #fafdff; --color-gold: #f2b90c; --color-green: #68a629; --color-neutral-300: #d5d5d5; --color-neutral-600: #6d6d6d; --color-neutral-c7: #c7c7c7; --color-neutral-cd: #cdcdcd; --havelock-blue-50: #fafdff; --havelock-blue-400: #45b8ff; --havelock-blue-950: #031d2f; --polo-blue-50: #fafdff; --polo-blue-400: #a1bad5; --polo-blue-500: #8caac9; --accent-red: #ff383c; --font-display: 'Articulat CF', 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --font-body: 'DM Sans', sans-serif; --font-alt: 'Poppins', sans-serif; /* Referências de largura usadas para escala fluida (vw) */ --desktop-ref: 2560; --mobile-ref: 430; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--color-bg); color: var(--color-white); font-family: var(--font-body); overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; border: none; background: none; } h1, h2, h3, p { margin: 0; } main { position: relative; } .dobra { position: relative; width: 100%; } .u-mobile-only { display: none; } .u-desktop-only { display: none; } @media (max-width: 1023px) { .u-mobile-only { display: block; } } @media (min-width: 1024px) { .u-desktop-only { display: block; } } /* ========================================================================== Seletor de idioma (PT / EN / ES) ========================================================================== */ .lang-switch { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; gap: 10px; background: rgba(13, 13, 13, 0.55); border: 1px solid rgba(242, 185, 12, 0.35); border-radius: 999px; padding: 8px 10px; backdrop-filter: blur(6px); } .lang-switch__btn { width: 28px; height: 28px; padding: 0; border-radius: 50%; overflow: hidden; opacity: 0.55; transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s; } .lang-switch__btn img { width: 100%; height: 100%; object-fit: cover; } .lang-switch__btn:hover { opacity: 0.85; transform: scale(1.08); } .lang-switch__btn.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--color-gold); } /* ========================================================================== DOBRA 1 — HERO ========================================================================== */ .dobra-1 { background: var(--color-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; /* contém a imagem do hero mobile, que é intencionalmente mais larga que a viewport */ } .dobra-1__hero { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; z-index: 0; } .dobra-1__hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .dobra-1__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } .dobra-1__logo { object-fit: contain; } .dobra-1__title { font-family: var(--font-display); font-weight: 700; color: var(--color-white); text-align: center; } .dobra-1__title-line { display: block; line-height: 1.114; } /* "RONALDINHO" em duas camadas empilhadas (mesma técnica já usada em .dobra-7__title-highlight, pelo mesmo motivo): texto com gradiente via background-clip:text pode perder detalhes finos do glifo — no caso do "O", o arco de baixo — dependendo de alinhamento de sub-pixel, que muda com a largura exata da janela e com qual fonte está ativa (fallback antes da Montserrat carregar, ou a Montserrat em si). Ajustar só line-height não resolve isso porque não é falta de espaço na caixa da linha, é o próprio recorte do gradiente perdendo pixels do glifo. A camada sólida por baixo (.dobra-1__title-highlight-fallback) só aparece nos pixels que a camada de cima (gradiente) eventualmente não pintar — em todo o resto fica 100% coberta, sem mudar o visual. grid-area (em vez de position:absolute) garante que as duas camadas ocupem exatamente a mesma caixa. */ .dobra-1__title-highlight-wrap { display: inline-grid; } .dobra-1__title-highlight-fallback, .dobra-1__title-highlight { grid-area: 1 / 1; line-height: 1.35; } .dobra-1__title-highlight-fallback { color: var(--color-gold); } .dobra-1__title-highlight { background: linear-gradient(to right, var(--color-gold), var(--color-green)); -webkit-background-clip: text; background-clip: text; color: transparent; } .dobra-1__info-box { display: flex; align-items: center; justify-content: center; /* flex-wrap:wrap é a rede de segurança contra a troca de fonte (FOUT): a página carrega primeiro com a fonte de fallback do sistema enquanto a Montserrat baixa, e fallback ≠ Montserrat em largura — o texto (que já cabia por poucos pixels) passava do limite da caixa e vazava pela borda nesse instante. Com wrap, se não couber numa fonte mais larga, os itens (ícone+data, separador, ícone+local) quebram pra uma segunda linha em vez de vazar; white-space:nowrap nos (herdado) evita que cada frase quebre no meio. min-height (não height) deixa a caixa crescer se precisar de 2 linhas. */ flex-wrap: wrap; border: 1px solid var(--color-gold); border-radius: 3px; font-family: var(--font-display); font-weight: 700; color: var(--color-white); white-space: nowrap; } .dobra-1__info-icon { flex-shrink: 0; } .dobra-1__info-sep { display: inline-block; width: 1px; background: var(--color-white); flex-shrink: 0; } .dobra-1__cta { position: relative; z-index: 1; /* 100% CSS, sem imagem nenhuma de fundo: o preenchimento é um linear-gradient, o arredondado é border-radius, e o "anel" translúcido ao redor do texto (que no Figma é uma borda) é feito com um box-shadow INSET em vez de `border` de verdade — ver os box-shadow por breakpoint abaixo. O motivo de não usar `border`: com border-radius menor que a espessura da borda (9px de raio vs 8px de borda aqui), o `border` do CSS soma frescor produz cortes/falhas visuais nos cantos em alguns navegadores. box-shadow inset dá o mesmo visual (anel colorido encostado na borda arredondada) sem esse problema de renderização, porque não é uma borda de verdade — e como inset não ocupa espaço no box model (ao contrário de border), o padding de cada breakpoint foi aumentado no valor exato que a borda tinha, pra manter o botão do mesmo tamanho. */ background: linear-gradient(to right, var(--color-gold), var(--color-green)); border-radius: 9px; color: var(--color-bg); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; white-space: nowrap; } /* -------------------------------------------------------------------------- MOBILE (< 1024px) — valores fixos exatos do frame mobile (375-430px). pt-266 posiciona o bloco de texto logo abaixo do rosto (sobre o peito), exatamente como no frame mobile do Figma. -------------------------------------------------------------------------- */ @media (max-width: 1023px) { /* gap/padding-bottom maiores (pedido do cliente): o bloco de logo+textos+ botão estava muito colado no topo, com espaço vazio sobrando embaixo antes da Dobra 2 em telas mais altas. Espaçamento interno maior deixa o bloco mais alto (preenchendo melhor a tela) sem perder a sobreposição do logo com a foto. */ .dobra-1 { padding: 266px 24px 56px; gap: 40px; min-height: 660px; } /* dobra1-hero-mobile-v2.jpg já é o recorte mobile certo (exportado do frame mobile do Figma, 375x385), então em vez de uma altura fixa em px (que precisa de object-fit:cover pra caber e varia quanto corta dependendo da largura real do aparelho) uso aspect-ratio: a imagem inteira sempre aparece, sem cortar nada, em qualquer largura de tela — igual ao Figma. */ .dobra-1__hero { width: 100%; aspect-ratio: 375 / 385; height: auto; left: 50%; transform: translateX(-50%); } .dobra-1__content { gap: 16px; width: 100%; max-width: 342px; } .dobra-1__logo { width: 164px; height: 62px; } .dobra-1__title { width: 100%; max-width: 342px; } .dobra-1__title-line { font-size: 27px; } /* 33.144px no Figma; reduzido com margem extra p/ funcionar em qualquer navegador/fonte fallback (testado até no Safari iOS) */ .dobra-1__title-highlight-wrap { display: grid; font-size: 40px; } /* 53px no Figma; idem */ .dobra-1__info-box { width: 100%; max-width: 342px; min-height: 29px; padding: 0 12px; /* 10px (11.888px no Figma): reduzido pra caber numa linha só com folga real em telas estreitas (~360px, comuns em Android) — com 11px o texto ficava exatamente no limite da caixa (0px de margem) nessa largura, e o flex-wrap (rede de segurança contra a troca de fonte) acabava disparando mesmo com a fonte final carregada, quebrando pra 2 linhas sem necessidade. */ font-size: 10px; gap: 6px; border-radius: 2px; } .dobra-1__info-icon.dobra-1__info-icon--cal { width: 13px; height: 14px; } .dobra-1__info-icon.dobra-1__info-icon--pin { width: 11px; height: 14px; } .dobra-1__info-sep { height: 14px; } .dobra-1__cta { /* 14+5 e 27+5: padding original + espessura do "anel" (5px), já que ele agora é box-shadow inset (não ocupa espaço) em vez de border. */ padding: 19px 32px; border-radius: 6px; font-size: 14px; /* sombra simplificada p/ mobile: os blurs enormes do Figma (171px/110px/62px), proporcionais à tela cheia do desktop, causavam artefatos visuais ("riscos"/faixas) em navegadores mobile (Safari/iOS) num botão pequeno. O primeiro item (inset) é o "anel" translúcido, no lugar da border. */ box-shadow: inset 0 0 0 5px rgba(104, 166, 41, 0.09), 0px 10px 24px 0px rgba(104, 166, 41, 0.35), 0px 3px 8px 0px rgba(242, 185, 12, 0.3); } } /* -------------------------------------------------------------------------- DESKTOP (>= 1024px) — tamanhos FIXOS (valores exatos do frame desktop 2560px do Figma, sem escala fluida). O bloco de texto fica ancorado à esquerda com uma margem fixa — não encolhe/realinha ao redimensionar a janela ou dar zoom no navegador, só rola o que não couber. -------------------------------------------------------------------------- */ @media (min-width: 1024px) { .dobra-1 { align-items: flex-start; padding: 130px 100px 90px; gap: 56px; min-height: 760px; } .dobra-1__content { gap: 15px; width: 959px; max-width: calc(100vw - 220px); align-items: flex-start; text-align: left; } .dobra-1__logo { width: 224px; height: 85px; } .dobra-1__title { width: 468px; max-width: 100%; text-align: left; } /* 38px (45px no Figma): reduzido pra "INESQUECÍVEL COM" caber junto na 2ª linha (2 linhas no total, como no mobile) em vez de "COM" quebrar sozinho pra uma 3ª linha — em telas onde a fonte renderiza um pouco mais larga que no ambiente de teste, 45px não dava essa margem. Esse span usa cor sólida (sem gradiente/background-clip:text), então não tem risco do bug de corte de glifo que afeta o "RONALDINHO" abaixo. */ .dobra-1__title-line { font-size: 38px; } .dobra-1__title-highlight-wrap { font-size: 73px; } /* height fixo (min-height agora) — em zoom de navegador abaixo de 100% a caixa ficava mais baixa que o conteúdo precisava, e como a caixa não tem overflow:hidden, o texto/ícones vazavam visualmente por cima da borda. min-height deixa a caixa crescer se precisar, sem cortar nem vazar. */ .dobra-1__info-box { width: 468px; max-width: 100%; min-height: 40px; padding: 0 16px; /* 14px (16px no Figma): reduzido pra dar margem real e a linha caber inteira em telas onde a fonte renderiza um pouco mais larga que no ambiente de teste (16px estava no limite, quebrando "Rio de Janeiro, Brasil" pra uma 2ª linha em alguns casos). O flex-wrap continua como rede de segurança (quebra organizado em vez de vazar) se mesmo assim não couber em algum cenário extremo. */ font-size: 14px; gap: 8px; border-width: 1.35px; border-radius: 3px; } .dobra-1__info-icon.dobra-1__info-icon--cal { width: 18px; height: 19px; } .dobra-1__info-icon.dobra-1__info-icon--pin { width: 15px; height: 20px; } .dobra-1__info-sep { height: 19px; } .dobra-1__cta { gap: 11px; /* 20+8 e 40+8: padding original + espessura do "anel" (8px) — ver explicação na regra base de .dobra-1__cta. */ padding: 28px 48px; border-radius: 9px; font-size: 20px; /* sombra exata do frame desktop. O primeiro item (inset) é o "anel" translúcido, no lugar da border. */ box-shadow: inset 0 0 0 8px rgba(104, 166, 41, 0.09), 0px 250px 70px 0px rgba(242, 185, 12, 0.01), 0px 160px 64px 0px rgba(104, 166, 41, 0.05), 0px 90px 54px 0px rgba(242, 185, 12, 0.18), 0px 40px 40px 0px rgba(104, 166, 41, 0.3), 0px 10px 22px 0px rgba(242, 185, 12, 0.34); } } /* ========================================================================== DOBRA 2 — VÍDEO (VSL) ========================================================================== */ .dobra-2 { background: var(--color-bg); display: flex; flex-direction: column; align-items: center; } .dobra-2__only-mobile { display: none; } .dobra-2__only-desktop { display: none; } .dobra-2__topbar { position: relative; width: 100%; border: 1px solid var(--color-gold); background: linear-gradient(to right, rgba(242, 185, 12, 0), rgba(104, 166, 41, 0)); box-shadow: 0px 57px 17px rgba(0, 0, 0, 0.05), 0px 25px 12.5px rgba(0, 0, 0, 0.09), 0px 6px 7px rgba(0, 0, 0, 0.1); } .dobra-2__pill { display: flex; align-items: center; justify-content: center; background: rgba(104, 166, 41, 0.06); border: 1px solid rgba(242, 185, 12, 0.3); } .dobra-2__pill-text { font-family: var(--font-display); font-weight: 700; color: var(--color-white); white-space: nowrap; } .dobra-2__pill-logo { flex-shrink: 0; } .dobra-2__pill-arrow { flex-shrink: 0; align-items: center; justify-content: center; } .dobra-2__pill-arrow img { transform: scaleY(-1); } .dobra-2__back-icon img { transform: scaleY(-1); } /* Só existe player VERTICAL cadastrado (Converte.ai/SmartPlayer) — não há versão horizontal. Por isso a moldura larga (1040x593) do mockup do Figma foi substituída por uma moldura que abraça o player vertical (9:16), centralizada, tanto no desktop quanto no mobile. Combinado com o cliente. */ .dobra-2__player-frame { position: relative; width: 100%; max-width: 420px; margin: 0 auto; padding: 10px; border: 1.87px solid rgba(255, 255, 255, 0.5); border-radius: 28px; background: linear-gradient(to bottom, rgba(104, 166, 41, 0.05), rgba(242, 185, 12, 0.05)); box-shadow: 0px 25px 40px rgba(0, 0, 0, 0.35); } .dobra-2__player-embed { width: 100%; } /* -------------------------------------------------------------------------- MOBILE (< 1024px) -------------------------------------------------------------------------- */ @media (max-width: 1023px) { .dobra-2__only-mobile { display: flex; } .dobra-2 { padding: 34px 16px; gap: 7px; } .dobra-2__topbar { width: fit-content; max-width: calc(100% - 32px); display: flex; align-items: center; justify-content: center; gap: 12px; padding: 11px 26px; border-radius: 17px; } .dobra-2__pill-logo { width: 58px; height: 22px; flex-shrink: 0; } .dobra-2__pill { width: fit-content; max-width: 100%; gap: 8px; padding: 11px 17px; border-radius: 711px; justify-content: center; } .dobra-2__pill-text { font-size: 11px; } .dobra-2__pill-arrow { width: 14px; height: 14px; } .dobra-2__pill-arrow img { width: 14px; height: 14px; } .dobra-2__player-frame { max-width: 300px; border-radius: 22px; padding: 8px; } } /* -------------------------------------------------------------------------- DESKTOP (>= 1024px) -------------------------------------------------------------------------- */ @media (min-width: 1024px) { .dobra-2__only-desktop { display: flex; } .dobra-2 { padding: 96px 24px; gap: 20px; } .dobra-2__topbar { max-width: 1040px; height: 82px; border-radius: 24px; } .dobra-2__back-icon { position: absolute; left: 150px; top: 50%; transform: translateY(-50%); width: 33px; height: 33px; align-items: center; justify-content: center; } .dobra-2__back-icon img { width: 33px; height: 33px; } .dobra-2__pill { position: absolute; left: 360px; top: 50%; transform: translateY(-50%); width: 313px; padding: 16px 24px; border-radius: 1000px; } .dobra-2__pill-text { font-size: 16px; } .dobra-2__topbar-logo { position: absolute; left: 820px; top: 50%; transform: translateY(-50%); width: 102px; height: 39px; } .dobra-2__player-frame { max-width: 420px; border-radius: 28px; } } /* ========================================================================== DOBRA 3 — MARQUEE (faixa animada em loop infinito) ========================================================================== */ .marquee { background-image: url('assets/dobra3-bg.png'); background-repeat: repeat-x; background-size: auto 100%; overflow: hidden; box-shadow: inset 0 8px 16px rgba(165, 165, 165, 0.04), inset 0 -8px 16px rgba(255, 255, 255, 0.04); } .marquee__track { display: flex; width: max-content; animation: marquee-scroll 32s linear infinite; } .marquee__group { display: flex; align-items: center; flex-shrink: 0; } .marquee__item { display: flex; align-items: center; white-space: nowrap; font-family: var(--font-alt); font-weight: 400; color: #0d0d0d; flex-shrink: 0; } .marquee__icon { flex-shrink: 0; display: block; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } } @media (max-width: 1023px) { .marquee { padding: 6px 0; } .marquee__group { gap: 10px; } .marquee__item { gap: 10px; font-size: 13px; } .marquee__icon { width: 13px; height: 12px; } .marquee__track { animation-duration: 22s; } } @media (min-width: 1024px) { .marquee { padding: 10px 0; } .marquee__group { gap: 18px; } .marquee__item { gap: 18px; font-size: 24px; } .marquee__icon { width: 24px; height: 22px; } .marquee__track { animation-duration: 34s; } } /* ========================================================================== DOBRA 4 — VOCÊ NA RESENHA DO BRUXO ========================================================================== */ .dobra-4 { background: var(--color-bg); overflow: hidden; display: flex; } .dobra-4__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .dobra-4__bg-img { display: block; } .dobra-4__content { position: relative; z-index: 1; display: flex; flex-direction: column; } .dobra-4__logo { object-fit: contain; } .dobra-4__title { font-family: var(--font-display); font-weight: 700; color: #ffffff; margin: 0; } .dobra-4__title-line { display: block; } .dobra-4__divider { height: 1px; } .dobra-4__subtitle { font-family: var(--font-display); font-weight: 700; color: #ffffff; margin: 0; } .dobra-4__subtitle-highlight { background: linear-gradient(to right, var(--color-gold), var(--color-green)); -webkit-background-clip: text; background-clip: text; color: transparent; } .dobra-4__text { font-family: var(--font-body); font-weight: 500; color: #ffffff; margin: 0; } /* -------------------------------------------------------------------------- MOBILE (< 1024px) -------------------------------------------------------------------------- */ @media (max-width: 1023px) { .dobra-4 { align-items: center; justify-content: center; padding: 363px 16px 40px; min-height: 698px; } /* width:139%/left:-34% era um zoom+deslocamento calibrado só pro arquivo antigo (uma foto larga de desktop reaproveitada, sem recorte mobile próprio) — aplicado na imagem nova (dobra4-bg-mobile-v2.jpg, já exportada do frame mobile certo do Figma) ele estourava o zoom e cortava gente/bola nas bordas. Com width:100%/left:0 a imagem nova aparece na largura real, sem zoom extra. */ .dobra-4__bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 68.38%; max-width: none; object-fit: cover; object-position: center top; } .dobra-4__content { align-items: center; text-align: center; gap: 8px; width: 100%; max-width: 386px; } .dobra-4__logo { width: 138px; height: 52px; } .dobra-4__title { font-size: 36px; line-height: 1.08; letter-spacing: -1.08px; max-width: 386px; } .dobra-4__divider { width: 133px; } .dobra-4__subtitle { font-size: 19px; letter-spacing: -0.19px; max-width: 358px; } .dobra-4__text { font-size: 12px; letter-spacing: -0.12px; max-width: 335px; } } /* -------------------------------------------------------------------------- DESKTOP (>= 1024px) — mesma abordagem da Dobra 1: tamanhos fixos exatos do frame desktop, ancorado à esquerda com margem fixa de 100px. -------------------------------------------------------------------------- */ @media (min-width: 1024px) { .dobra-4 { align-items: center; padding: 130px 100px; min-height: 720px; } .dobra-4__bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .dobra-4__content { align-items: flex-start; text-align: left; gap: 15px; } .dobra-4__logo { width: 239px; height: 91px; } .dobra-4__title { font-size: 68px; line-height: 1.08; letter-spacing: -2.04px; width: 465px; max-width: 100%; } .dobra-4__divider { width: 231px; } .dobra-4__subtitle { font-size: 31px; letter-spacing: -0.31px; width: 310px; max-width: 100%; } .dobra-4__text { font-size: 16px; letter-spacing: -0.16px; width: 331px; max-width: 100%; } } /* ========================================================================== DOBRA 5 — BANNER (imagem estática com texto embutido, 1 arquivo por idioma) ========================================================================== */ .dobra-5 { background: var(--color-bg); line-height: 0; overflow: hidden; } .dobra-5__banner-pic { display: block; width: 100%; } .dobra-5__banner { width: 100%; display: block; } @media (max-width: 1023px) { .dobra-5__banner { height: 92.8vw; /* proporção exata do frame mobile do Figma (375x348) */ max-height: 400px; object-fit: cover; object-position: 50% center; } } @media (min-width: 1024px) { .dobra-5__banner { height: auto; } } /* ========================================================================== DOBRA 7 — MUITO MAIS QUE UM CHURRASCO ========================================================================== */ .dobra-7 { background: var(--color-bg); } .dobra-7__inner { margin: 0 auto; display: flex; flex-direction: column; } .dobra-7__title { font-family: var(--font-display); font-weight: 700; color: var(--color-white); text-align: center; margin: 0; } /* O texto do highlight é desenhado em duas camadas sobrepostas: .dobra-7__title-highlight-fallback (cor sólida, embaixo) e .dobra-7__title-highlight (gradiente via background-clip:text, em cima). Motivo: em alguns navegadores, texto com gradiente via background-clip:text perde detalhes muito finos do glifo (ex.: o acento circunflexo de "Ê" em "ROLÊ") nesses tamanhos de fonte. A camada sólida por trás só fica visível exatamente nesses pixels perdidos — em todo o resto ela fica 100% coberta pela camada do gradiente, então o visual não muda. */ /* grid + grid-area (em vez de position:absolute/inset:0) garante que as duas camadas ocupem exatamente a mesma caixa, com o mesmo modelo de layout — com absolute/inset:0 a camada de baixo virava um bloco esticado enquanto a de cima seguia o fluxo inline normal, e essa diferença de caixa deixava as duas levemente desalinhadas (aparecendo como uma sombra/glow dourada atrás do texto). */ .dobra-7__title-highlight-wrap { display: inline-grid; } .dobra-7__title-highlight-fallback, .dobra-7__title-highlight { grid-area: 1 / 1; } .dobra-7__title-highlight-fallback { color: var(--color-gold); } .dobra-7__title-highlight { background: linear-gradient(to right, var(--color-gold), var(--color-green)); -webkit-background-clip: text; background-clip: text; color: transparent; } .dobra-7__subtitle { font-family: var(--font-display); font-weight: 400; color: var(--color-white); text-align: center; margin: 0; } .dobra-7__body { display: flex; } .dobra-7__photo { border: 2px solid var(--color-gold); flex: 1 0 0; overflow: hidden; /* proporção retangular (retrato) do frame do Figma nas duas versões — sem isso a altura ficava dependendo de outros elementos e a foto saía quadrada no mobile em vez de retangular. */ aspect-ratio: 337.16 / 539.287; } .dobra-7__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .dobra-7__features { display: grid; } .dobra-7__feature { display: flex; align-items: center; background: rgba(242, 185, 12, 0.13); } .dobra-7__feature-icon { flex-shrink: 0; display: block; } .dobra-7__feature span { font-family: var(--font-display); font-weight: 500; color: var(--color-white); } /* -------------------------------------------------------------------------- MOBILE (< 1024px) -------------------------------------------------------------------------- */ @media (max-width: 1023px) { .dobra-7 { padding: 56px 20px; } .dobra-7__inner { max-width: 368px; margin: 0 auto; gap: 18px; } .dobra-7__header { display: flex; flex-direction: column; gap: 7px; } /* 21px (não 22.5px do Figma): em telas menores e comuns (~360px, ex.: a maioria dos Android), 22px+ fazia "MUITO MAIS QUE UM CHURRASCO," não caber numa linha só e quebrar em duas — diferente do Figma, que assume uma largura de referência maior. 21px é o maior valor que ainda cabe numa linha só até 360px de viewport. */ .dobra-7__title { font-size: 21px; line-height: 1.3; letter-spacing: -0.9px; } .dobra-7__title-highlight-wrap { font-size: 30px; line-height: 1.3; display: grid; margin-top: 2px; padding-top: 3px; } .dobra-7__subtitle { font-size: 12px; letter-spacing: -0.34px; } .dobra-7__body { flex-direction: column; gap: 13px; } .dobra-7__photo { flex: none; width: 100%; border-radius: 9px; border-width: 1px; } .dobra-7__features { grid-template-columns: 1fr; gap: 6px; width: 100%; } .dobra-7__feature { gap: 13px; padding: 10px 18px; border-radius: 7px; } .dobra-7__feature-icon { width: 14px; height: 14px; } .dobra-7__feature span { font-size: 13px; letter-spacing: -0.3px; line-height: 1.5; } } /* -------------------------------------------------------------------------- DESKTOP (>= 1024px) -------------------------------------------------------------------------- */ @media (min-width: 1024px) { .dobra-7 { padding: 90px 24px; } .dobra-7__inner { max-width: 1032px; gap: 52px; } .dobra-7__header { display: flex; flex-direction: column; align-items: center; gap: 19px; } .dobra-7__title { font-size: 41px; line-height: 1.3; letter-spacing: -1.65px; max-width: 700px; } .dobra-7__title-highlight-wrap { font-size: 41px; } .dobra-7__subtitle { font-size: 18px; letter-spacing: -0.55px; max-width: 700px; } .dobra-7__body { gap: 52px; align-items: stretch; } .dobra-7__photo { border-radius: 29px; } /* align-content:space-between (em vez de start) distribui os 9 itens ao longo de toda a altura esticada (igual à altura da foto, via align-items:stretch acima), em vez de ficarem agrupados no topo com espaço vazio sobrando embaixo — que era a causa de os itens não baterem com a altura da imagem. */ .dobra-7__features { flex: 1 0 0; grid-template-columns: 1fr; gap: 18px; align-content: space-between; } .dobra-7__feature { gap: 19px; padding: 15px 26px; border-radius: 10px; } .dobra-7__feature-icon { width: 19px; height: 19px; } .dobra-7__feature span { font-size: 21px; letter-spacing: -0.64px; line-height: 1.5; min-width: 0; } /* 21.35px/1.5 no Figma — valor original restaurado (a redução anterior deixou proporção errada, quebrando menos linhas que o Figma) */ } /* ========================================================================== DOBRA 8 — TICKETS / VALORES ========================================================================== */ .dobra-8 { background: var(--color-bg); display: flex; flex-direction: column; align-items: center; } .dobra-8__title { font-family: var(--font-display); font-weight: 700; color: var(--color-white); text-align: center; text-transform: uppercase; margin: 0; } .dobra-8__tickets { display: flex; } .ticket-card { border: 2px solid var(--color-gold); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; } .ticket-card--1 { background: rgba(104, 166, 41, 0.32); } .ticket-card--2 { background: linear-gradient(to bottom, rgba(242, 185, 12, 0.32), rgba(104, 166, 41, 0.32)); } .ticket-card--3 { background: rgba(242, 185, 12, 0.32); } .ticket-card__body { display: flex; flex-direction: column; align-items: center; } .ticket-card__badge { position: absolute; top: 20px; left: 20px; background: linear-gradient(127deg, #81ff00 0%, #ffc000 99.997%); font-family: var(--font-display); font-weight: 800; color: #0d0d0d; white-space: nowrap; } .ticket-card__img { display: block; } .ticket-card__qty { font-family: 'Inter', sans-serif; font-weight: 800; color: var(--color-white); white-space: nowrap; margin: 0; } /* text-align:center: sem isso, quando o preço + a notinha (ex.: "de contado" no ES, mais longo que "à vista"/"upfront") não cabem numa linha só e a nota quebra pra linha de baixo, ela ficava alinhada à esquerda em vez de centralizada como o resto do card. */ .ticket-card__price { margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--color-white); text-align: center; } /* nowrap evita que "a und." quebre entre as duas palavras em larguras intermediárias (ex.: MacBook Pro) — se não couber ao lado do preço, a nota inteira pula pra próxima linha em vez de partir "und." sozinho. */ .ticket-card__price-note { font-weight: 500; white-space: nowrap; } .ticket-card__sub { font-family: 'Inter', sans-serif; font-weight: 400; color: #ababab; text-align: center; margin: 0; } /* Botão "COMPRE AGORA": reaproveita o componente .dobra-8__cta (mesmo visual/CSS já usado no CTA de WhatsApp), só com margem própria pra não ficar colado no texto de parcelamento acima — .ticket-card__body não tem gap entre os itens, então isso não mexe no espaçamento já existente entre imagem/quantidade/preço/parcelamento. */ .ticket-card__buy-cta { margin-top: 20px; } /* animação de entrada dos tickets (scroll reveal, com leve atraso escalonado) */ .ticket-card[data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity 0.7s ease, transform 0.7s ease; } .ticket-card[data-reveal].is-visible { opacity: 1; transform: translateY(0); } .ticket-card--1[data-reveal] { transition-delay: 0s; } .ticket-card--2[data-reveal] { transition-delay: 0.15s; } .ticket-card--3[data-reveal] { transition-delay: 0.3s; } @media (prefers-reduced-motion: reduce) { .ticket-card[data-reveal] { opacity: 1; transform: none; transition: none; } } .dobra-8__cta-block { display: flex; flex-direction: column; align-items: center; } .dobra-8__disclaimer { font-family: var(--font-display); font-weight: 700; color: var(--color-neutral-c7); text-align: center; margin: 0; } .dobra-8__disclaimer span { display: block; } .dobra-8__cta { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; text-decoration: none; /* Mesma técnica de .dobra-1__cta: sem border real (o anel translúcido é um box-shadow inset, nos box-shadow por breakpoint abaixo), pra evitar o artefato visual nos cantos que border-radius pequeno + border grossa causava. Padding de cada breakpoint já inclui a espessura que a border tinha, pra manter o botão do mesmo tamanho. */ background: linear-gradient(to right, var(--color-gold), var(--color-green)); cursor: pointer; } .dobra-8__cta-text { font-family: var(--font-display); font-weight: 800; color: #0d0d0d; text-transform: uppercase; text-align: center; } .dobra-8__cta-text span { display: block; white-space: nowrap; } .dobra-8__cta-arrow { display: block; transform: rotate(45deg); flex-shrink: 0; } .dobra-8__note { font-family: var(--font-display); font-weight: 400; color: var(--color-white); text-align: center; margin: 0; } /* -------------------------------------------------------------------------- MOBILE (< 1024px) -------------------------------------------------------------------------- */ @media (max-width: 1023px) { .dobra-8 { padding: 40px 20px 48px; gap: 22px; } .dobra-8__title { font-size: 26px; line-height: 1.2; max-width: 320px; } .dobra-8__tickets { flex-direction: column; gap: 24px; width: 100%; max-width: 337px; } .ticket-card { width: 100%; padding: 24px; border-radius: 16px; gap: 12px; } .ticket-card--1 { padding-top: 24px; } .ticket-card__badge { font-size: 13px; padding: 6px 12px; border-radius: 40px; margin-bottom: -4px; } .ticket-card__img { width: 260px; max-width: 100%; } .ticket-card__qty { font-size: 26px; } .ticket-card__price-main { font-size: 30px; } .ticket-card__price-note { font-size: 16px; } .ticket-card__sub { font-size: 14px; } .dobra-8__cta-block { gap: 10px; width: 100%; max-width: 337px; } .dobra-8__disclaimer { font-size: 9px; line-height: 1.35; letter-spacing: -0.09px; } /* 16+5 e 20+5: padding original + espessura do anel (5px), agora inset. */ .dobra-8__cta { width: 100%; gap: 10px; padding: 21px 25px; border-radius: 10px; box-shadow: inset 0 0 0 5px rgba(104, 166, 41, 0.09), 0px 10px 24px rgba(104, 166, 41, 0.35), 0px 3px 8px rgba(242, 185, 12, 0.3); } .dobra-8__cta-text { font-size: 14px; } .dobra-8__cta-arrow { width: 12px; height: 12px; } .dobra-8__note { font-size: 11px; } } /* -------------------------------------------------------------------------- DESKTOP (>= 1024px) -------------------------------------------------------------------------- */ @media (min-width: 1024px) { .dobra-8 { padding: 80px 24px; gap: 32px; } .dobra-8__title { font-size: 34px; } .dobra-8__tickets { gap: 20px; max-width: 1038px; align-items: stretch; } .ticket-card { width: 333px; padding: 39px; border-radius: 19px; gap: 16px; } .ticket-card__badge { font-size: 15px; padding: 7px 13px; border-radius: 60px; margin-bottom: -6px; } .ticket-card__img { width: 289px; } .ticket-card__qty { font-size: 32px; } .ticket-card__price-main { font-size: 38px; } .ticket-card__price-note { font-size: 20px; } .ticket-card__sub { font-size: 17px; } .dobra-8__cta-block { gap: 14px; max-width: 950px; } .dobra-8__disclaimer { font-size: 16px; } /* 18+8 e 36+8: padding original + espessura do anel (8px), agora inset. */ .dobra-8__cta { gap: 14px; padding: 26px 44px; border-radius: 9px; box-shadow: inset 0 0 0 8px rgba(104, 166, 41, 0.09), 0px 10px 22px rgba(242, 185, 12, 0.34); } .dobra-8__cta-text { font-size: 18px; white-space: nowrap; } .dobra-8__cta-text span { display: inline; white-space: normal; } .dobra-8__cta-arrow { width: 15px; height: 15px; } .dobra-8__note { font-size: 15px; } } /* ========================================================================== DOBRA 9 — PROCESSO DE PARTICIPAÇÃO ========================================================================== */ .dobra-9 { background: var(--color-bg); display: flex; flex-direction: column; align-items: center; } .dobra-9__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; text-align: center; background: linear-gradient(to bottom, var(--color-green), var(--color-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; } .dobra-9__steps { display: flex; align-items: center; } .step-card { border: 1px solid var(--color-gold); display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; flex-shrink: 0; } .step-card__num { font-family: 'DM Sans', sans-serif; font-weight: 700; color: var(--color-white); margin: 0; } .step-card__title { font-family: var(--font-display); font-weight: 700; color: var(--color-white); margin: 0; } .step-card__desc { font-family: var(--font-display); font-weight: 500; color: var(--color-white); margin: 0; } .step-connector { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .step-connector img { max-width: none; } /* animação de entrada dos steps, mesma pegada dos tickets: 01 -> 02 -> 03 */ .step-card[data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity 0.7s ease, transform 0.7s ease; } .step-card[data-reveal].is-visible { opacity: 1; transform: translateY(0); } .step-card:nth-of-type(1)[data-reveal] { transition-delay: 0s; } .step-card:nth-of-type(2)[data-reveal] { transition-delay: 0.15s; } .step-card:nth-of-type(3)[data-reveal] { transition-delay: 0.3s; } @media (prefers-reduced-motion: reduce) { .step-card[data-reveal] { opacity: 1; transform: none; transition: none; } } .dobra-9__guarantee { position: relative; display: flex; align-items: center; } .guarantee-badge { position: relative; flex-shrink: 0; z-index: 1; } .guarantee-badge__circulos { display: block; width: 100%; height: 100%; } .guarantee-badge__vector, .guarantee-badge__seven, .guarantee-badge__circletext { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .dobra-9__guarantee-text { position: relative; z-index: 1; display: flex; flex-direction: column; } .dobra-9__guarantee-title { border-left: 2px solid var(--color-gold); font-family: var(--font-display); font-weight: 700; color: var(--color-white); margin: 0; } .dobra-9__guarantee-highlight { background: linear-gradient(to right, var(--color-gold), var(--color-green)); -webkit-background-clip: text; background-clip: text; color: transparent; } .dobra-9__guarantee-box { background: rgba(24, 168, 255, 0.04); border: 1px solid var(--color-green); overflow: hidden; } .dobra-9__guarantee-box p { font-family: var(--font-display); font-weight: 400; color: var(--color-white); margin: 0; } /* -------------------------------------------------------------------------- MOBILE (< 1024px) -------------------------------------------------------------------------- */ @media (max-width: 1023px) { .dobra-9 { padding: 48px 20px; gap: 30px; } .dobra-9__title { font-size: 20px; letter-spacing: -0.6px; max-width: 340px; } .dobra-9__steps { flex-direction: column; } /* min-height (não height fixo) + padding vertical maior: no card "02" (CONFIRMAÇÃO), o texto é bem mais longo que nos cards 01/03 e colava na borda inferior com a altura fixa de 249px. Assim o card cresce só o necessário pra caber com folga, mantendo 01/03 do tamanho do Figma. */ .step-card { width: 225px; min-height: 249px; border-radius: 24px; padding: 20px 12px; gap: 8px; justify-content: center; } .step-card__num { font-size: 56px; letter-spacing: -1.7px; } .step-card__title { font-size: 22px; letter-spacing: -0.66px; } .step-card__desc { font-size: 11px; letter-spacing: -0.1px; max-width: 195px; } .step-connector { height: 40px; } .step-connector img { width: 2px; height: 40px; } .dobra-9__guarantee { flex-direction: column; gap: 17px; padding-top: 20px; } .guarantee-badge { width: 164px; height: 164px; } .guarantee-badge__vector { width: 77px; height: 77px; } .guarantee-badge__seven { width: 32px; } .guarantee-badge__circletext { width: 132px; height: 135px; } .dobra-9__guarantee-text { align-items: center; gap: 9px; width: 100%; max-width: 340px; } .dobra-9__guarantee-title { font-size: 23px; letter-spacing: -0.69px; text-align: center; padding-left: 10px; width: auto; } .dobra-9__guarantee-box { border-radius: 12px; padding: 12px; width: 100%; } .dobra-9__guarantee-box p { font-size: 10px; line-height: 1.4; } } /* -------------------------------------------------------------------------- DESKTOP (>= 1024px) -------------------------------------------------------------------------- */ @media (min-width: 1024px) { .dobra-9 { padding: 90px 24px; gap: 70px; } .dobra-9__title { font-size: 30px; letter-spacing: -0.9px; margin-bottom: -30px; } .step-card { width: 289px; height: 320px; border-radius: 30px; padding: 24px; gap: 10px; justify-content: center; } .step-card__num { font-size: 60px; letter-spacing: -1.8px; } .step-card__title { font-size: 27px; letter-spacing: -0.8px; } .step-card__desc { font-size: 13px; letter-spacing: -0.13px; max-width: 240px; } .step-connector img { width: 50px; } .dobra-9__guarantee { gap: 60px; max-width: 1040px; justify-content: center; padding-left: 60px; } .guarantee-badge { width: 280px; height: 280px; } .guarantee-badge__vector { width: 132px; height: 132px; } .guarantee-badge__seven { width: 54px; } .guarantee-badge__circletext { width: 226px; height: 231px; } .dobra-9__guarantee-text { gap: 18px; width: 428px; } .dobra-9__guarantee-title { font-size: 32px; padding-left: 14px; } .dobra-9__guarantee-box { border-radius: 20px; padding: 20px; backdrop-filter: blur(4px); } .dobra-9__guarantee-box p { font-size: 18px; line-height: 1.31; } } /* ========================================================================== DOBRA 10 — RONALDINHO: CLUBES E TÍTULOS ========================================================================== */ .dobra-10 { background: var(--color-bg); overflow: hidden; display: flex; flex-direction: column; align-items: center; } .dobra-10__bg { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #fff 29%, #fff 90.3%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #fff 29%, #fff 90.3%, transparent 100%); } .dobra-10__bg-img { width: 100%; height: 127%; object-fit: cover; object-position: center top; position: absolute; top: -2%; left: 0; } .dobra-10__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; } .dobra-10__title { text-align: center; color: var(--color-white); font-family: var(--font-display); font-weight: 800; } .dobra-10__title-main, .dobra-10__title-sub { display: block; } .dobra-10__box { display: flex; align-items: stretch; background: rgba(104, 166, 41, 0.07); border: 1px solid var(--color-green); } .dobra-10__col { display: flex; flex-direction: column; align-items: center; flex: 1; } .dobra-10__col-title { font-family: var(--font-display); font-weight: 700; color: var(--color-white); text-align: center; position: relative; } .dobra-10__col-title::after { content: ''; display: block; margin: 0 auto; height: 1px; background: var(--color-white); } .dobra-10__divider { align-self: stretch; width: 1px; background: linear-gradient(to bottom, var(--color-green), var(--color-gold)); } .dobra-10__list, .dobra-10__sublist { list-style: none; margin: 0; padding: 0; width: 100%; } .dobra-10__list { color: var(--color-white); font-family: var(--font-display); font-weight: 700; } .dobra-10__list > li, .dobra-10__sublist > li { position: relative; } .dobra-10__list > li::before, .dobra-10__sublist > li::before { content: '•'; color: var(--color-white); } .dobra-10__list--titulos > li { display: flex; flex-direction: column; } .dobra-10__sublist { font-weight: 600; } /* -------------------------------------------------------------------------- MOBILE (< 1024px) -------------------------------------------------------------------------- */ @media (max-width: 1023px) { .dobra-10 { padding: 44px 20px 48px; gap: 20px; } .dobra-10__bg { height: 190px; } /* height:127%/top:-2% (regra base) era um zoom calibrado só pro arquivo desktop antigo. dobra10-photo-mobile-v2.jpg já vem no recorte mobile certo do Figma, então no mobile volta pro 100%/0% — sem esse reset o topo da foto cortava mais do que devia. Desktop não é afetado (fora deste media query, continua com o arquivo e o zoom antigos). */ .dobra-10__bg-img { height: 100%; top: 0; } .dobra-10__content { gap: 14px; } .dobra-10__title { padding-top: 150px; } .dobra-10__title-main { font-size: 28px; letter-spacing: -0.28px; text-shadow: 0 1px 2px rgba(0,0,0,0.39); } .dobra-10__title-sub { font-size: 14px; letter-spacing: -0.14px; margin-top: 2px; text-shadow: 0 1px 2px rgba(0,0,0,0.39); } .dobra-10__box { width: 100%; max-width: 345px; border-radius: 8px; } .dobra-10__col { padding: 8px 5px; gap: 0; width: 172px; } .dobra-10__col-title { font-size: 15px; line-height: 1.3; padding-bottom: 10px; } .dobra-10__col-title::after { width: 91px; } .dobra-10__list { font-size: 10px; line-height: 1.9; } .dobra-10__list > li, .dobra-10__sublist > li { padding-left: 12px; } .dobra-10__list > li::before, .dobra-10__sublist > li::before { position: absolute; left: 0; font-size: 9px; top: 0.5em; } .dobra-10__list--titulos > li { gap: 0; } .dobra-10__list--titulos > li > span { padding-left: 12px; position: relative; display: block; } .dobra-10__list--titulos > li > span::before { content: '•'; position: absolute; left: 0; font-size: 9px; top: 0.5em; } .dobra-10__sublist { font-size: 8px; line-height: 1.9; padding-left: 8px; } } /* -------------------------------------------------------------------------- DESKTOP (>= 1024px) -------------------------------------------------------------------------- */ @media (min-width: 1024px) { .dobra-10 { padding: 90px 24px 100px; gap: 32px; } .dobra-10__bg { height: 500px; } .dobra-10__content { gap: 20px; } .dobra-10__title { padding-top: 330px; } .dobra-10__title-main { font-size: 75px; letter-spacing: -0.75px; text-shadow: 0 3px 4px rgba(0,0,0,0.39); } .dobra-10__title-sub { font-size: 38px; letter-spacing: -0.38px; margin-top: 6px; text-shadow: 0 3px 4px rgba(0,0,0,0.39); } .dobra-10__box { width: 910px; max-width: 100%; border-radius: 21px; } .dobra-10__col { padding: 21px 13px; gap: 0; width: 455px; } .dobra-10__col-title { font-size: 40px; line-height: 1.31; padding-bottom: 20px; } .dobra-10__col-title::after { width: 239px; } .dobra-10__list { font-size: 28px; line-height: 1.97; } .dobra-10__list > li, .dobra-10__sublist > li { padding-left: 30px; } .dobra-10__list > li::before, .dobra-10__sublist > li::before { position: absolute; left: 0; font-size: 22px; top: 0.5em; } .dobra-10__list--titulos > li { gap: 0; } .dobra-10__list--titulos > li > span { padding-left: 30px; position: relative; display: block; } .dobra-10__list--titulos > li > span::before { content: '•'; position: absolute; left: 0; font-size: 22px; top: 0.5em; } .dobra-10__sublist { font-size: 21px; line-height: 1.97; padding-left: 20px; } } /* ========================================================================== DOBRA 11 — FAQ (DÚVIDAS MAIS FREQUENTES) ========================================================================== */ .dobra-11 { background: var(--color-bg); display: flex; flex-direction: column; align-items: center; } .dobra-11__title { font-family: var(--font-display); font-weight: 700; color: var(--color-white); text-align: center; width: 100%; } .dobra-11__grid { display: flex; flex-wrap: wrap; width: 100%; } .faq-card { display: flex; flex-direction: column; background: linear-gradient(to bottom, rgba(242, 185, 12, 0.16), rgba(104, 166, 41, 0.16)); } .faq-card__icon { flex-shrink: 0; } .faq-card__body { display: flex; flex-direction: column; width: 100%; } .faq-card__q { font-family: var(--font-display); font-weight: 700; color: var(--color-neutral-300); line-height: 1.25; } .faq-card__a { font-family: var(--font-body); font-weight: 400; color: var(--color-neutral-600); line-height: 1.3; } /* -------------------------------------------------------------------------- MOBILE (< 1024px) -------------------------------------------------------------------------- */ @media (max-width: 1023px) { .dobra-11 { padding: 44px 18px 48px; gap: 18px; } .dobra-11__title { font-size: 18px; } .dobra-11__grid { gap: 8px; justify-content: center; max-width: 345px; margin: 0 auto; } .faq-card { border-radius: 8px; padding: 10px; gap: 10px; } .faq-card--wide { width: 100%; } .faq-card--half { width: calc(50% - 4px); } .faq-card__icon { width: 15px; height: 15px; } .faq-card__body { gap: 4px; } .faq-card__q { font-size: 11px; } .faq-card__a { font-size: 9px; } .dobra-11 .dobra-8__cta-block { margin-top: 4px; } } /* -------------------------------------------------------------------------- DESKTOP (>= 1024px) -------------------------------------------------------------------------- */ @media (min-width: 1024px) { .dobra-11 { padding: 96px 24px; gap: 40px; } .dobra-11__title { font-size: 44px; max-width: 950px; } .dobra-11__grid { gap: 18px; max-width: 950px; } .faq-card { border-radius: 18px; padding: 24px; gap: 24px; } .faq-card--wide { width: 100%; } .faq-card--half { width: calc(50% - 9px); } .faq-card__icon { width: 36px; height: 36px; } .faq-card__body { gap: 9px; } .faq-card__q { font-size: 24px; } .faq-card__a { font-size: 18px; } } /* ========================================================================== FOOTER ========================================================================== */ .site-footer { position: relative; border-top: 3px solid var(--color-gold); background-color: var(--color-bg); background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; justify-content: center; } .site-footer__card { display: flex; flex-wrap: wrap; align-items: center; width: 100%; background: rgba(13, 13, 13, 0.41); border: 1px solid rgba(242, 185, 12, 0.21); box-shadow: 0px 14px 23.5px rgba(0, 0, 0, 0.2); } .site-footer__badge { display: flex; align-items: center; flex-shrink: 0; background: rgba(255, 232, 24, 0.29); border: 1px solid rgba(104, 166, 41, 0.24); } .site-footer__logo { display: block; } .site-footer__copy { text-align: center; } .site-footer__line1 { font-family: var(--font-display); color: var(--color-neutral-cd); } .site-footer__line1 strong { color: var(--color-white); font-weight: 700; } .site-footer__line2 { font-family: var(--font-display); font-weight: 400; color: var(--color-neutral-cd); } .site-footer__top-btn { display: flex; align-items: center; flex-shrink: 0; background: var(--color-gold); border: 3px solid rgba(103, 197, 255, 0.09); border-radius: 500px; color: var(--havelock-blue-950); font-family: var(--font-display); font-weight: 500; text-transform: uppercase; text-decoration: none; white-space: nowrap; } .site-footer__top-icon { flex-shrink: 0; display: block; } /* -------------------------------------------------------------------------- MOBILE (< 1024px) -------------------------------------------------------------------------- */ @media (max-width: 1023px) { .site-footer { padding: 18px 20px; background-image: url('assets/footer-bg-mobile.png'); } .site-footer__card { max-width: 345px; margin: 0 auto; border-radius: 10px; padding: 12px 10px; gap: 8px; justify-content: center; } .site-footer__badge { order: 1; padding: 5px 9px; border-radius: 11px; margin-right: auto; } .site-footer__logo { width: 58px; height: 22px; } .site-footer__top-btn { order: 2; gap: 6px; padding: 7px 14px; } .site-footer__top-icon { width: 11px; height: 11px; } .site-footer__top-btn span { font-size: 8px; } .site-footer__copy { order: 3; width: 100%; display: flex; flex-direction: column; gap: 3px; } .site-footer__line1 { font-size: 9px; line-height: 1.4; } .site-footer__line2 { font-size: 9px; line-height: 1.4; } } /* -------------------------------------------------------------------------- DESKTOP (>= 1024px) -------------------------------------------------------------------------- */ @media (min-width: 1024px) { .site-footer { padding: 56px 24px; background-image: url('assets/footer-bg-desktop.png'); } .site-footer__card { max-width: 1040px; border-radius: 25px; padding: 16px 20px; gap: 24px; justify-content: space-between; } .site-footer__badge { order: 1; padding: 7px 13px; border-radius: 17px; } .site-footer__logo { width: 90px; height: 34px; } .site-footer__copy { order: 2; flex: 1; display: flex; flex-direction: column; gap: 4px; } .site-footer__line1 { font-size: 16px; } .site-footer__line2 { font-size: 13px; } .site-footer__top-btn { order: 3; gap: 9px; padding: 10px 20px; } .site-footer__top-icon { width: 16.5px; height: 16.5px; } .site-footer__top-btn span { font-size: 12px; } }