/* ========================================================================== Growmate · mobile.css — camada mobile CENTRALIZADA (aditiva) Linkada por último no de todas as páginas (via standardize_chrome.py), portanto vence o CSS inline por ordem de cascata. NÃO reescreve o inline. Seções: 0 Base · 1 Tipografia · 2 Nav · 3 Componentes · 4 Touch · 5 Perf ========================================================================== */ /* ── 0 · BASE (todas as larguras) ───────────────────────────────────────── */ html{ scroll-padding-top:84px; } /* âncoras não somem sob o nav fixo */ /* O cursor nativo é o fallback. O script compartilhado só libera o cursor custom quando há ponteiro fino, motion permitido e os dois elementos. */ html:not(.gm-custom-cursor) *{ cursor:auto !important; } img,video,svg,table{ max-width:100%; } .gm-sr-only{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; } .gm-honeypot{ position:absolute !important; left:-10000px !important; top:auto !important; width:1px !important; height:1px !important; overflow:hidden !important; } .gm-form-status{ min-height:1.5em; margin-top:14px; font-family:var(--mono,ui-monospace,monospace); font-size:11px; line-height:1.55; letter-spacing:.03em; color:var(--fg-3,#6f6c65); } .gm-form-status:empty{ min-height:0; margin-top:0; } .gm-form-status[data-state="error"]{ color:var(--acid,#d9361c); } .gm-form-status[data-state="success"]{ color:#147a45; } .gm-turnstile{ margin-top:18px; min-height:65px; } .gm-turnstile[hidden]{ display:none; min-height:0; } :where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{ outline:3px solid var(--acid,#FF4D2E) !important; outline-offset:3px !important; } /* FAQ: previne estouro de subpixel no summary */ .faq summary{ box-sizing:border-box !important; width:100% !important; padding:0 !important; } /* rede de segurança anti-clip: quebra só palavras que sozinhas estouram a linha (sem hyphens:auto, que hifeniza no meio e fica feio em títulos display) */ .hero-h1,.s-h2,.what-q,.cta-h,.foot-massive,.fw-pillar h3,.hero-quote,.post-head h1,.post-cta h3,.met .v,.divider h2,.fact .fnum{ overflow-wrap:break-word; } /* ── 1 · TIPOGRAFIA & RITMO (telefone) ──────────────────────────────────── */ @media (max-width:640px){ html,body{ font-size:15px; } .wrap{ padding:0 20px; } /* heros e títulos: o clamp original cai no piso (60–72px) e corta no mobile */ .hero-h1{ font-size:clamp(34px,9.4vw,52px) !important; line-height:0.98 !important; letter-spacing:-0.03em !important; } .s-h2{ font-size:clamp(29px,7.8vw,44px) !important; line-height:1.02 !important; } .what-q{ font-size:clamp(25px,6.8vw,38px) !important; } .cta-h{ font-size:clamp(34px,9.6vw,54px) !important; line-height:1.0 !important; } .foot-massive{ font-size:clamp(56px,20vw,108px) !important; } .fw-pillar h3{ font-size:clamp(29px,7.6vw,42px) !important; } .hero-quote{ font-size:18px !important; line-height:1.5 !important; } .met .v{ font-size:clamp(44px,13vw,72px) !important; } /* GrowAgents: piso original 80px */ .divider h2{ font-size:clamp(40px,13vw,64px) !important; } /* GrowSend: piso original 72px */ .fact .fnum{ font-size:clamp(40px,11vw,56px) !important; } /* Sobre: piso original 64px */ .address-l h3{ font-size:clamp(24px,8vw,36px) !important; line-height:1.1 !important; overflow-wrap:break-word !important; } /* Sobre: evita estouro do CEP a 320px */ /* ritmo vertical: menos respiro gigante de desktop */ .hero{ padding:104px 20px 56px !important; } .s{ padding:56px 0 !important; } .s-head{ gap:18px !important; } /* heros em grid → 1 coluna mais cedo (alguns só colapsam em 900/1024) */ .hero-inner,.hero-sub{ grid-template-columns:1fr !important; gap:32px !important; } .hero-stats{ gap:24px !important; } } /* ── 2 · NAVEGAÇÃO ──────────────────────────────────────────────────────── */ @media (max-width:900px){ /* hambúrguer com área de toque confortável (o ícone visual continua 28px) */ .nav-hbg{ width:44px !important; height:44px !important; align-items:center !important; } /* drawer respeita o notch e dá folga sob o nav */ .mob-nav{ padding-top:max(88px, calc(env(safe-area-inset-top) + 76px)) !important; padding-bottom:max(48px, calc(env(safe-area-inset-bottom) + 32px)) !important; } /* Tablet também é superfície touch: todos os controles de interface e links de navegação ganham pelo menos 44px sem transformar links comuns de prosa. */ button,.chip,.faq summary{ min-height:44px; } .nav .brand,.crumb a,.cat,.idx-h a,.f-meta a,.f-cnt a,.f-col a, .two .lk,.s a[style*="color:var(--acid)"],.ps-body a,.highlight-box a, a[href^="mailto:"],a[href^="tel:"]{ display:inline-flex; align-items:center; min-width:44px; min-height:44px; } .f-col a{ display:flex; width:100%; } .f-social a{ width:44px !important; height:44px !important; min-width:44px; min-height:44px; } .bub.template .qr a{ display:flex; align-items:center; justify-content:center; min-height:46px; } .cockpit-tb .tabs [data-tab]{ display:inline-flex; align-items:center; min-height:44px; } .cockpit-tb .tools button{ min-height:46px; min-width:46px; display:inline-flex; align-items:center; justify-content:center; } /* O círculo do “+” gira por pseudo-elemento; o summary não cresce além da própria largura quando a FAQ passa a usar a área touch completa. */ .faq summary{ gap:14px !important; justify-content:flex-start !important; width:100%; } .faq summary h3{ flex:1 1 0; min-width:0; overflow-wrap:anywhere; } .faq summary .pl{ flex:0 0 auto; transform:none !important; font-size:0 !important; } .faq summary .pl::before{ content:"+"; font-size:18px; line-height:1; transition:transform .3s; } .faq[open] summary .pl::before{ transform:rotate(45deg); } } /* ── 3 · COMPONENTES ────────────────────────────────────────────────────── */ @media (max-width:640px){ /* helper: filhos de grid/flex podem encolher (mata estouros de palavra longa) */ .hero-inner > *,.hero-sub > *,.f-col,.faq summary h3{ min-width:0; } /* RODAPÉ → 1 coluna (não colapsava: ficava 4 col cravadas em 390px) */ footer .f-grid{ grid-template-columns:1fr !important; gap:4px 0 !important; } footer .f-logo{ font-size:46px !important; margin-bottom:14px !important; } footer .f-col{ padding-top:20px; } /* SUITE / cards de produto (Home): pnm gigante cortava */ .prod-card .pnm{ font-size:40px !important; } .prod-card.feature .pnm{ font-size:48px !important; } /* GrowAgents: grade .prod com pnm 78px */ .prod .pnm{ font-size:42px !important; } /* HERO visuais (mockups) não devem empurrar a largura */ .hero-chat-wrap,.hero-vis,.dash-wrap,.anat,.hero-side{ max-width:100% !important; } .hero-stats{ gap:20px 24px !important; } /* GrowInsights: .persona .item com padding desktop pesado */ .persona .item{ padding:32px 22px !important; } /* GrowChat: bloco anatomia */ .anat{ padding:28px 18px !important; } /* Métricas/calculadora (CES/CSAT/NPS/PMF/eNPS): padding desktop estoura */ .calc{ padding:24px !important; } /* tabelas simples → rolagem horizontal como bloco (a .cmp é tratada à parte) */ table:not(.cmp){ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; } /* grades 2-col que viram 1-col mas têm filho largo */ .ai-grid > *{ min-width:0; max-width:100%; } /* CSAT heatmap */ .heat{ padding:26px !important; } /* Contato: form full-width e controles contidos */ .form-section{ padding:96px 0 !important; } .form-section input,.form-section textarea,.form-section select{ max-width:100%; } .form-r .fld input:not([type="hidden"]),.form-r .fld textarea,.form-r .fld select, .form-r .chips,.form-r .budget-wrap,.form-r .send-row,.form-r .helper, .form-r .fld-err,.form-r .brief-mini{ width:100% !important; max-width:100% !important; margin-left:0 !important; } .form-r .send-row{ align-items:stretch !important; } .form-r .btn-send{ justify-content:center; min-height:52px; width:100%; } .form-r .budget-row{ gap:12px; flex-wrap:wrap; } /* Newsletter: não espreme e-mail e botão em uma pílula de 320px. */ .newsletter .inner{ padding-left:20px !important; padding-right:20px !important; } .newsletter form{ flex-direction:column; align-items:stretch; gap:6px; border-radius:24px !important; } .newsletter form input[type="email"]{ width:100%; min-width:0; min-height:48px; } .newsletter form button{ width:100%; min-height:48px; justify-content:center; } /* A crumb vira scroller no telefone; a área touch vem da regra tablet. */ .crumb{ overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; padding-left:20px !important; padding-right:20px !important; } .crumb::-webkit-scrollbar{ display:none; } .crumb > *{ flex:0 0 auto; } /* GrowSend: palavras display não podem definir a largura mínima do grid. */ .prob{ width:100%; min-width:0; } .prob-cell{ min-width:0; max-width:100%; padding:40px 20px !important; } .prob-cell .num{ min-width:0; font-size:clamp(54px,19vw,76px) !important; overflow-wrap:anywhere; } .prereq .lb{ flex:1 1 auto !important; max-width:100%; white-space:normal; overflow-wrap:anywhere; } /* Endereço (Sobre): evita estouros horizontais a 320px */ .address{ grid-template-columns:1fr !important; gap:32px !important; width:100% !important; min-width:0 !important; } .address-l, .address-r{ width:100% !important; min-width:0 !important; } .address-r .ar-card{ padding:20px !important; } .address-r .ar-val{ font-size:18px !important; overflow-wrap:anywhere !important; } .address-l .place{ font-size:12px !important; } } /* GrowSend: tabela comparativa → rolagem horizontal (em vez de espremer) */ @media (max-width:720px){ .cmp-wrap{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; padding:28px 18px !important; } .cmp{ min-width:480px; } } /* GrowMetrics: tabs e cockpit roláveis; grades em 1 coluna */ @media (max-width:900px){ .cockpit-tb .tabs{ overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; } .cockpit-tb .tabs::-webkit-scrollbar{ display:none; } .cockpit-tb .tabs span{ white-space:nowrap; } .cockpit{ overflow-x:auto; -webkit-overflow-scrolling:touch; } } @media (max-width:640px){ .ai-grid{ grid-template-columns:1fr !important; } .ai-grid > *{ min-width:0; } .prereq ul{ min-width:min(300px,100%) !important; } /* GrowSend: 300px fixo estourava em 320 */ .persona{ grid-template-columns:1fr !important; } /* GrowInsights */ /* grid-column:auto: um item tem style="grid-column:span 2" inline, que força uma 2ª coluna implícita mesmo com template 1fr */ .persona .item{ padding:32px 20px !important; border-right:none !important; grid-column:auto !important; } .brain-grid > *{ min-width:0; } /* GrowLoop: coluna não encolhia */ .brain-stage{ flex-wrap:wrap; padding:18px 20px !important; gap:10px 16px !important; } .brain-stage .lt{ width:100% !important; } } /* telas estreitas (≤480): grids de 2 colunas viram 1 (em 320px cada célula ficava com ~100px úteis e o conteúdo mono uppercase estourava) */ @media (max-width:480px){ .tl{ grid-template-columns:1fr !important; } /* NPS/PMF/eNPS/Contato: timeline */ .tl-step{ border-right:none !important; min-height:0 !important; } .moments-row{ grid-template-columns:1fr !important; } /* CSAT: momentos da jornada */ .mom{ border-right:none !important; min-height:0 !important; } .proof-grid{ gap:10px !important; } /* Home: prova social 2-col apertada */ .proof-grid .cl{ padding:14px 12px !important; } .ai-card,.alerts{ padding:28px 20px !important; } /* GrowMetrics: 48px estourava em 320 */ .cluster .lbl{ flex-wrap:wrap; min-width:0; } } /* Home: barra de modos da matriz rolável; matriz com dica de swipe (tablet 721–900) */ @media (max-width:900px){ .fw-modes{ display:flex !important; max-width:100%; overflow-x:auto; scrollbar-width:none; } .fw-modes::-webkit-scrollbar{ display:none; } .fw-modes button{ padding:9px 13px !important; flex:0 0 auto; } .fw-matrix-scroll{ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); } } /* Home: telefone (≤720) — matriz colapsa em lista vertical pilar → produtos. Com flex-column, os grid-column/grid-row inline das células são ignorados; modos, cabeçalhos de jornada e células vazias somem; cada célula vira um card full-width com a faixa de fases (.pf) visível. JS dos modos fica inerte. */ @media (max-width:720px){ .fw-modes,.fw-fase-row,.fw-jhead,.fw-cell.empty{ display:none !important; } .fw-matrix-scroll{ overflow:visible; padding-bottom:0; -webkit-mask-image:none !important; mask-image:none !important; } .fw-matrix{ display:flex !important; flex-direction:column; min-width:0 !important; gap:10px; } /* pointer-events:none: sem a barra de modos, o tap no pilar dispararia o modo "dim" sem caminho de volta; aqui o label é só cabeçalho visual */ .fw-pi-label{ justify-content:flex-start; padding-right:0; margin-top:22px; pointer-events:none; } .fw-pi-label:first-of-type{ margin-top:0; } .fw-cell{ min-height:0; } .fw-cell .ar{ opacity:0.7; transform:none; } .fw-cell .pf{ display:block; } } /* ── 3b · TABLET (601–900px) ────────────────────────────────────────────── */ @media (min-width:601px) and (max-width:900px){ footer .f-grid{ grid-template-columns:1fr 1fr !important; gap:28px 32px !important; } } @media (max-width:820px){ .model-grid{ grid-template-columns:1fr !important; } /* evita estouro no iPad retrato (768) */ } /* ── 4 · TOUCH & ERGONOMIA ──────────────────────────────────────────────── */ @media (hover:none){ /* o cursor custom já é escondido no inline; aqui matamos hover "grudado" */ .prod-card:hover{ transform:none !important; } .prod-card:hover .par{ background:transparent !important; } a:hover,button:hover{ } } @media (pointer:coarse){ button,summary,input:not([type="hidden"]),select,.chip{ min-height:44px; } .faq summary{ min-height:44px; } .faq summary .pl,.f-social a{ width:44px !important; height:44px !important; min-width:44px; min-height:44px; } input[type="range"]{ min-height:44px; } a[class]:not(.f-home){ min-height:44px; } } @media (max-width:640px){ /* alvos de toque ≥44px nos links de listas/rodapé/meta */ footer .f-col a{ display:flex; align-items:center; min-height:44px; padding:6px 0 !important; } .f-meta a{ display:inline-flex; align-items:center; min-height:44px; } .nav .menu a{ padding:10px 0; } } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* ── 6 · BLOG / ARTIGOS (template post + vitrine) ───────────────────────── */ @media (max-width:640px){ /* breadcrumb não precisa repetir o título inteiro em 3 linhas */ .crumb{ font-size:10px; } .crumb .cur{ display:inline-block; max-width:50vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom; } /* título do artigo: mantém a escala original (clamp já cai em ~40px) sem hifenizar */ .post-head{ padding-top:32px !important; } /* leitura: medida e espaçamento confortáveis */ .post-body{ padding-top:40px !important; } .post-body blockquote{ font-size:21px !important; padding-left:18px !important; } .post-cover{ margin-top:32px !important; } .post-cover img{ border-radius:16px; } } /* ── 7 · COMPORTAMENTO 1024px (Tablet paisagem / Notebooks pequenos) ───── */ @media (max-width: 1024px) { /* GrowSend: colapsa o grid do problema para evitar que palavras display (ex: SEMDADO) estouram a tela */ .prob { grid-template-columns: 1fr !important; } .prob-cell { border-right: none !important; border-bottom: 1px solid var(--rule) !important; min-height: auto !important; } .prob-cell:last-child { border-bottom: none !important; } .prob-cell .num { font-size: clamp(64px, 10vw, 110px) !important; margin: 24px 0 16px !important; } }