/* ============================================================ GYM THINGS — LANDING DE LEADS Desktop (>1280px) permanece 100% intacto (layout aprovado @1920). Toda a responsividade vive em media queries max-width abaixo. ============================================================ */ /* ---------- Seção Localização + FAQ (SEO local + descoberta) ---------- */ .gt-local-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 70px); align-items: center; max-width: 1180px; margin: 0 auto; } .gt-faq { border-bottom: 1px solid rgba(54, 54, 54, 0.15); } .gt-faq summary { list-style: none; cursor: pointer; padding: 18px 0; font-family: var(--font-display), serif; font-weight: 200; font-stretch: condensed; font-size: clamp(21px, 3.4vw, 30px); letter-spacing: -0.01em; color: #363636; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .gt-faq summary::-webkit-details-marker { display: none; } .gt-faq summary::after { content: "+"; font-family: var(--font-mono), monospace; font-size: 22px; color: #586f4f; flex: none; } .gt-faq[open] summary::after { content: "\2013"; } .gt-faq summary:hover { color: #586f4f; } .gt-faq > div { padding: 0 0 20px; font-family: var(--font-sans), sans-serif; font-size: 15.5px; line-height: 1.6; color: #4a4136; max-width: 64ch; } .gt-faq > div a { color: #586f4f; } @media (max-width: 768px) { .gt-local-grid { grid-template-columns: 1fr; } } :root { --primary-bg: #f5f1ed; --primary-text: #363636; --accent-light: #d2c1aa; --accent-dark: #382b2d; --green: #586f4f; --dark-bg: #363636; --light-text: #f5f1ed; --border-light: rgba(54, 54, 54, 0.15); --border-medium: rgba(54, 54, 54, 0.2); --border-dark: rgba(54, 54, 54, 0.4); --text-muted: #8a8482; --text-secondary: #4a4136; --text-tertiary: #6f6250; } /* ---------- Reset full-bleed (remove a "bordinha" branca) ---------- */ /* A margem padrão do deixava a cor da página (branca) vazar nas bordas. Zeramos margem/padding e pintamos o fundo com o creme da marca para que qualquer overscroll continue no tom certo. */ html, body { margin: 0; padding: 0; background: #f5f1ed; } /* Rolagem suave ao clicar nos links do menu (âncoras). */ html { scroll-behavior: smooth; } /* Seções full-screen (1920×1080): encaixam no topo, preenchendo a tela toda — a nav flutua por cima (mesmo comportamento do hero). */ #clube, #experiencia { scroll-margin-top: 0; } /* Demais seções: compensam a nav flutuante para o conteúdo não ficar escondido sob o menu ao ancorar. */ #modalidades, #form, #contato { scroll-margin-top: 96px; } /* ---------- Utility classes (usadas no layout desktop) ---------- */ .gt-img { height: 400px; } .gt-mods > div:nth-child(1) .gt-img { height: 420px; } .gt-mods > div:nth-child(2) .gt-img { height: 300px; } .gt-mods > div:nth-child(3) .gt-img { height: 470px; } .gt-mods > div:nth-child(4) .gt-img { height: 340px; } .gt-crop { position: relative; padding: 11px; } .gt-crop::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#363636, #363636) 0 0 / 15px 1px no-repeat, linear-gradient(#363636, #363636) 0 0 / 1px 15px no-repeat, linear-gradient(#363636, #363636) 100% 0 / 15px 1px no-repeat, linear-gradient(#363636, #363636) 100% 0 / 1px 15px no-repeat, linear-gradient(#363636, #363636) 0 100% / 15px 1px no-repeat, linear-gradient(#363636, #363636) 0 100% / 1px 15px no-repeat, linear-gradient(#363636, #363636) 100% 100% / 15px 1px no-repeat, linear-gradient(#363636, #363636) 100% 100% / 1px 15px no-repeat; } .gt-gal2 { display: grid; grid-template-columns: 1fr 1fr; gap: 80px 70px; } .gt-gal2 > div:nth-child(even) { margin-top: 110px; } /* ---------- Menu mobile (hambúrguer + drawer lateral) ---------- */ /* Hambúrguer oculto no desktop; ativado só no mobile (≤768px). */ .gt-burger { display: none; } /* Logo: versão clara só aparece quando a nav está sobre fundo escuro (mobile, controlado por html[data-nav]). No desktop o pill é claro, então mostra sempre o logo escuro. */ .gt-nav .gt-logo-light { display: none !important; } /* Drawer só existe no DOM quando aberto (sc-if). Anima ao montar. */ .gt-menu-overlay { position: fixed; inset: 0; z-index: 70; } .gt-drawer-backdrop { position: absolute; inset: 0; background: rgba(54, 54, 54, 0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: gt-fade-in 0.28s ease both; } .gt-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(82vw, 340px); background: #f5f1ed; box-shadow: -20px 0 60px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; padding: 24px 28px 40px; animation: gt-drawer-in 0.28s ease both; } .gt-drawer-link { display: block; font-family: var(--font-display); font-weight: 200; font-stretch: condensed; font-size: 38px; line-height: 1.02; letter-spacing: -0.01em; text-transform: uppercase; color: #586f4f; padding: 10px 0; text-decoration: none; } .gt-drawer-eyebrow { display: block; font-family: var(--font-mono); font-weight: 300; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #8a8482; margin-bottom: 3px; } @keyframes gt-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes gt-fade-in { from { opacity: 0; } to { opacity: 1; } } /* ---------- Scroll reveal (somente desktop) — scroll-driven ---------- */ /* A animação é "presa" à posição de rolagem via animation-timeline:view(): o bloco revela conforme entra na viewport e pausa se você parar de rolar. Guardado por @supports — em navegadores sem suporte (ex.: Safari atual), nada é aplicado e o conteúdo aparece normalmente (nunca some). Curva: cubic-bezier(0.22, 1, 0.36, 1). */ @keyframes gt-reveal-in { from { opacity: 0; transform: translateY(32px) scale(0.98); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } } @media (min-width: 769px) and (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .gt-reveal { animation: gt-reveal-in both; animation-timeline: view(); /* completa cedo (75% da entrada) para garantir revelação total mesmo em blocos no rodapé da página */ animation-range: entry 0% entry 75%; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } /* leve stagger nos cards da coluna direita da galeria */ .gt-mods-grid .gt-mod-card:nth-child(2), .gt-mods-grid .gt-mod-card:nth-child(4) { animation-range: entry 8% entry 83%; } } } /* ============================================================ RESPONSIVIDADE Breakpoints: 1280 (laptop) · 900 (tablet) · 768 (mobile) · 480 (small) ============================================================ */ /* ------------------------------------------------------------ ≤ 1280px — LAPTOP / TABLET LARGE Ponto onde a galeria de modalidades (posicionamento absoluto em px) deixa de caber. Convertemos os cards para fluxo normal. ------------------------------------------------------------ */ @media (max-width: 1280px) { html, body { overflow-x: hidden; } /* --- Hero editorial: 4 colunas -> 2 colunas --- */ .gt-hero-grid { grid-template-columns: 1fr 1fr !important; gap: 48px 40px !important; } /* --- Modalidades V2: grid 2 col -> 1 col --- */ .gt-mods-grid { grid-template-columns: 1fr !important; gap: 64px !important; } /* Card: de "moldura absoluta" para coluna fluida */ .gt-mod-card { position: relative !important; height: auto !important; display: flex !important; flex-direction: column !important; } /* Foto: volta ao fluxo, largura total, altura fluida. O slot interno (inset:11px absoluto) preenche naturalmente. */ .gt-mod-photo { position: relative !important; left: auto !important; right: auto !important; top: auto !important; width: 100% !important; max-width: 520px !important; height: clamp(260px, 46vw, 440px) !important; margin: 0 0 24px !important; order: 1; } /* Título: sem coordenadas absolutas */ .gt-mod-title { position: static !important; left: auto !important; top: auto !important; width: auto !important; margin: 0 0 12px !important; font-size: clamp(34px, 6vw, 42px) !important; order: 2; } /* Texto: largura total com comprimento de linha legível */ .gt-mod-text { position: static !important; left: auto !important; top: auto !important; width: 100% !important; max-width: 62ch !important; margin: 0 !important; order: 3; } /* PNGs decorativos (equipamentos) só fazem sentido na composição absoluta do desktop — ocultos no fluxo empilhado. */ .gt-mod-png { display: none !important; } } /* ------------------------------------------------------------ ≤ 900px — TABLET Formulário e rodapé empilham; galeria mosaico (V1) empilha. ------------------------------------------------------------ */ @media (max-width: 900px) { /* --- Formulário: imagem em cima, form embaixo --- */ .gt-form-grid { grid-template-columns: 1fr !important; } .gt-form-media { min-height: 320px !important; } /* --- Rodapé: 3 colunas -> empilhado --- */ .gt-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; } /* --- Galeria V1 (mosaico): linhas viram coluna --- */ .gt-galv1-row { flex-direction: column !important; gap: 32px !important; } .gt-galv1-row > * { width: 100% !important; margin: 0 !important; } } /* ------------------------------------------------------------ ≤ 768px — MOBILE Nav enxuta, hero editorial empilhado, acentos decorativos off. ------------------------------------------------------------ */ @media (max-width: 768px) { /* --- Nav mobile: SEM caixinha. Logo à esquerda, risquinhos à direita. --- */ .gt-nav-link { display: none !important; } .gt-nav-cta { display: none !important; } header { padding: 0 22px !important; } .gt-nav { width: 100% !important; justify-content: space-between !important; background: none !important; border: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 0 !important; padding: 0 !important; } /* logo sem o margin-right que existia dentro do pill */ .gt-nav > a[href="#top"] { margin-right: 0 !important; } /* hambúrguer = só os 3 risquinhos (sem círculo), cor adapta ao fundo */ .gt-burger { display: inline-flex !important; background: none !important; border-radius: 0 !important; margin-left: 0 !important; color: #363636; } /* Troca de tema conforme a seção sob a nav (html[data-nav]) */ html[data-nav="light"] .gt-nav .gt-logo-dark { display: none !important; } html[data-nav="light"] .gt-nav .gt-logo-light { display: block !important; } html[data-nav="light"] .gt-burger { color: #f5f1ed; } /* --- Inputs a 16px evitam o zoom automático do iOS --- */ #form input { font-size: 16px !important; } /* --- Hero mobile: desloca a foto p/ a esquerda revelando o rosto da modelo (que fica à direita da imagem). O image-slot centraliza via transform translate(-50%,-50%); reposicionamos para -62%. --- */ #hero-full::part(image) { transform: translate(-62%, -50%) !important; } /* --- Hero editorial: uma coluna, títulos sem offset --- */ .gt-hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; margin-top: 32px !important; } .gt-hero-title { margin: 0 !important; text-align: left !important; height: auto !important; /* corrige "Club" (height:0) empilhado */ font-size: clamp(46px, 14vw, 96px) !important; } .gt-hero-thumb { display: none !important; /* thumb flutuante sobreporia o texto */ } /* --- Modalidades intro: fotos-acento saem, headline limpa --- */ .gt-mod-accent { display: none !important; } /* --- Modalidades V2: grid empilhado -> SLIDER lateral --- */ .gt-mods-grid { display: flex !important; grid-template-columns: none !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: 16px !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; /* sangra até as bordas da tela (cancela o padding lateral da seção) */ margin: 0 -24px !important; padding: 0 24px !important; scroll-padding: 0 24px !important; scrollbar-width: none !important; /* Firefox */ } .gt-mods-grid::-webkit-scrollbar { display: none !important; /* WebKit/Blink */ } /* Cada card vira um slide de ~84% da largura (mostra “espia” do próximo) */ .gt-mod-card { flex: 0 0 84% !important; scroll-snap-align: center !important; } .gt-mod-photo { max-width: none !important; /* foto ocupa o slide inteiro */ } /* --- Rodapé: coluna única --- */ .gt-footer-grid { grid-template-columns: 1fr !important; } /* Alvos de toque mais confortáveis nos links do rodapé */ footer a { display: inline-block; padding: 4px 0; } /* Reduz respiros verticais para telas curtas */ .gt-widget { padding: 40px 24px 40px !important; } /* Widget "Qual é a sua Gym Thing?": caixa retrato dimensionada para a seção inteira (título + iframe + padding) caber em ~uma tela. */ .gt-widget-frame { aspect-ratio: auto !important; width: 100% !important; height: min(72vh, 600px) !important; max-height: none !important; } .gt-mods-sec { padding: 56px 24px 72px !important; } } /* ------------------------------------------------------------ ≤ 480px — SMALL MOBILE Ajuste fino de laterais e tipografia grande. ------------------------------------------------------------ */ @media (max-width: 480px) { .gt-hero-ed { padding: 32px 22px 56px !important; } .gt-hero-title { font-size: clamp(42px, 15vw, 74px) !important; } .gt-mod-intro { padding: 64px 22px !important; } .gt-mod-photo { height: clamp(220px, 62vw, 360px) !important; } } /* ------------------------------------------------------------ Acessibilidade: respeita quem pediu menos movimento ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } .gt-drawer, .gt-drawer-backdrop { animation: none !important; } }