/* ============================================================ Landing — camada de COMPACTAÇÃO MOBILE (≤820px). Port de mobile-v4.css do design. É o ÚLTIMO da landing (app/Views/home.php) de propósito: empata em especificidade com home.css / compare-demo.css / value-calc.css e ganha na ordem. O design controlava cada bloco por uma classe no (.om-m-compact / .om-m-anim / .om-m-nobar / .om-m-cta2link) — era o painel de Tweaks do protótipo, que NÃO existe em produção. Aqui os PADRÕES do design entram diretos, sem prefixo: compact = ON → demo compacta aplicada anim = OFF → fundo pesado do hero fora, bob do #zero pausado cta2link = ON → CTA secundário vira link nobar = OFF → a barra .cq-bar CONTINUA visível (é conversão) Tokens (:root) vivem em layout.css — nenhum token novo aqui. ============================================================ */ @media (max-width: 820px) { /* ---- performance: animação cara sai por padrão ---- .om-hero-mesh / .om-blob / .om-hero-glow / .om-hero-grid do design NÃO entram: o backdrop é injetado por home-motion.js em `.om-hero`, seletor que não existe mais na landing v4 (o hero é .cq-hero) — regra pra nó que nunca nasce é lixo. Sobra o bob do arquivo do #zero, esse existe. */ .om-zero-file { animation-play-state: paused; } /* companheira OBRIGATÓRIA da linha acima: o selo "pronto ✓" pisca no MESMO ciclo do arquivo; congelar só o arquivo deixa o selo a meio fade. Resolve igual ao bloco prefers-reduced-motion de home.css:1487 — estado final. */ .om-zero-done { animation: none; opacity: 1; } /* ---- ritmo: seções mais curtas ---- */ .om-section { padding: 52px 16px; } .om-h2 { margin-bottom: 28px; } .om-hero-stats { margin-top: 40px; row-gap: 24px; } .om-stat-l { line-height: 1.45; } .om-hero-meta { font-size: 10px; line-height: 1.5; padding: 5px 9px; } .om-hero-sub { margin-top: 16px; } .cq-hero-ctas { margin-top: 22px; } .cq-foot-note { line-height: 1.5; } /* CTA secundário: link quieto embaixo do primário */ .cq-hero-ctas .cq-cta-calc { flex: 0 0 auto; align-self: center; min-height: 44px; border: 0; background: none; box-shadow: none; padding: 10px 14px; font-size: 15px; font-weight: 500; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; border-radius: 8px; } .cq-hero-ctas .cq-cta-calc:active { background: color-mix(in oklab, var(--brand) 8%, transparent); } /* ---- demo compacta ---- */ /* documentos: 4 linhas empilhadas viram trilho horizontal de chips */ .cq-docs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 10px; } .cq-docs::-webkit-scrollbar { display: none; } .cq-docs-l { flex-basis: auto; margin-bottom: 0; } .cq-doc { flex: 0 0 auto; max-width: 210px; } /* o design cortava por posição (`> :nth-child(2)`); em produção a hora tem classe própria — mesmo alvo, seletor grep-ável */ .cq-doc .cq-doc-t { display: none; } .cq-live { flex-basis: auto; white-space: nowrap; } /* planos: 2×2 vira trilho horizontal com snap */ .cq-chips { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; padding-bottom: 4px; } .cq-chips::-webkit-scrollbar { display: none; } .cq-chip { flex: 0 0 auto; min-width: 148px; scroll-snap-align: start; } /* ordens: cards altos viram linhas; botões de export (mortos no site) saem */ .cq-orders { display: flex; flex-direction: column; gap: 8px; } /* ⚠️ `display` só fora do `hidden`: o SSR e o refreshOrders() de compare-demo.js escondem a ordem do fornecedor sem item pelo ATRIBUTO, e um `display:grid` incondicional venceria o [hidden]{display:none} do UA. */ .cq-order:not([hidden]) { display: grid; } .cq-order { grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 10px 12px; } .cq-order-hd { grid-column: 1; } .cq-order-v { grid-column: 2; grid-row: 1 / span 2; font-size: 17px; align-self: center; } .cq-order-s { grid-column: 1; margin-top: 0; } .cq-order-exp { display: none; } .cq-order.is-total { border-width: 1.5px; } .cq-order.is-total .cq-order-v { font-size: 20px; } /* menu aberto = tela inteira: o overlay `#omNav.om-nav-links` de home.css (fixed, top 56px → bottom 0, background var(--bg)) JÁ é isso; do design sobra só a folga do notch, que produção não tinha. */ .om-nav nav { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } /* números nunca quebram linha dentro dos cards do mapa */ .cq-card-sel-v, .cq-tile-v, .cq-order-v { white-space: nowrap; } /* ---- seções reusadas da v3, apertadas ---- */ .om-icp-grid { grid-template-columns: 1fr 1fr; gap: 0 16px; } .om-icp-grid .om-sec-name { font-size: 16px; } .om-icp-grid .om-sec-sub { font-size: 12.5px; line-height: 1.5; } .om-icp-grid .om-sec-cell { padding: 14px 0; } /* ---- hero: ênfase acima da dobra ---- gradiente ESTÁTICO na linha serifada + halo que deriva atrás do título. ⚠️ o gradiente NÃO sai de dentro do @supports: `-webkit-text-fill-color: transparent` apaga o glifo, então sem gradiente a manchete fica INVISÍVEL (era o bug em prod, visto no PostHog no mobile). E fallback por cascata não salva: o `background` usa var(), então num navegador sem color-mix() ele não morre no parse — fica inválido no tempo de computação (IACVT) e cai pro valor inicial `none`, que vence qualquer `background:` anterior. Fora do @supports a linha fica no `color: var(--brand)` de home.css:104. Cores LITERAIS na condição porque @supports não avalia var(); as duas grafias do recorte porque Chrome <120 e Firefox <117 só aceitam a com prefixo `-webkit-`. ⚠️ estático de propósito: `background-position` animado sobre `background-clip: text` dispara um bug de composição do WebKit/iOS com o MESMO sintoma (manchete invisível). Não medido aqui — o Playwright pinado não tem binário do webkit — então fica como limitação conhecida. */ @supports (background-image: linear-gradient(100deg, #1B59F0 0%, color-mix(in oklab, #1B59F0 45%, #67e8f9) 28%, #1B59F0 55%)) and ((-webkit-background-clip: text) or (background-clip: text)) { .cq-hero .om-hero-h .om-serif { background: linear-gradient(100deg, var(--brand) 0%, color-mix(in oklab, var(--brand) 45%, #67e8f9) 28%, var(--brand) 55%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } } /* ⚠️ OBRIGATÓRIO junto com o brilho acima: o splitWords() de home-motion.js quebra a manchete em com animação de transform, e descendente animado por transform sai da camada onde o `background-clip:text` do pai pinta — a linha serifada some INTEIRA (provado no 390px). O stagger é justamente a animação cara que a camada mobile do design corta; aqui ele cede lugar ao recorte do gradiente. */ .cq-hero .om-hero-h .om-word { animation: none; } .cq-hero { position: relative; } .cq-hero::before { content: ''; position: absolute; top: -40px; left: 8%; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--brand) 14%, transparent) 0%, transparent 65%); pointer-events: none; animation: cqDrift 16s ease-in-out infinite alternate; z-index: 0; } /* o wrapper da barra fica de fora: dar `position:relative` nele mataria o `position:sticky` que a faz acompanhar o rodapé enquanto o hero rola */ .cq-hero > :not(.cq-barwrap):not(.oa-stage) { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .cq-hero::before { animation: none; } } .cq-hero .om-hero-h { font-size: clamp(30px, 9.2vw, 38px); line-height: 1.08; letter-spacing: -.02em; } .cq-hero .om-hero-meta { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* o design tinha um `` dentro de um

só; aqui o sub é um

POR parágrafo (loop do partial) */ .cq-hero .om-hero-sub:not(:first-of-type) { display: none; } .cq-hero .om-hero-sub { font-size: 15.5px; line-height: 1.55; } .cq-hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; } .cq-hero-ctas .om-btn-primary { width: 100%; justify-content: center; min-height: 52px; font-size: 16.5px; } .cq-cta-note { text-align: center; margin-top: 2px; } .om-hero-stats { grid-template-columns: 1fr 1fr; margin-top: 32px; } .om-hero-stats .om-stat-n { font-size: 26px; } .om-hero-stats .om-stat-l { font-size: 11.5px; } /* ---- pricing: mais curto ---- */ .om-trial { padding: 52px 16px; } .om-trial-orb { display: none; } .om-trial-inner { grid-template-columns: 1fr; gap: 24px; } /* `columns:1` do design não vale aqui: .om-trial-feat é GRID (home.css:732), e o 900px já a deixa em 1 coluna — sobra a margem */ .om-trial-feat { margin-top: 14px; } .om-trial-feat li { padding: 4px 0; font-size: 13.5px; } .pricing-header { margin-bottom: 24px; } .billing-toggle-wrapper { padding: 10px 12px; gap: 8px; } .pricing-cards { grid-template-columns: 1fr; } .features-list .feature-item { font-size: 13px; } /* .enterprise-inner é FLEX em produção (home.css:592), não grid */ .enterprise-inner { gap: 16px; } /* ---- calculadora: 1 coluna densa ---- */ .oq-calc-grid { grid-template-columns: 1fr; gap: 18px; } .oq-calc-ins { gap: 14px; } .oq-ledger { padding: 0; } .oq-lrow { padding: 11px 16px; } .oq-lrow-d { font-size: 11px; line-height: 1.45; margin-top: 3px; } .oq-lrow-plan { padding: 14px 16px; align-items: center; } .oq-lrow-plan .oq-lrow-l { gap: 7px; } .oq-lrow-plan .oq-lrow-d { margin-top: 0; } .oq-ltotal { padding: 20px 16px; row-gap: 6px; align-items: center; } .oq-ltotal-v { font-size: 26px; } .oq-ltotal-v i { margin-left: 6px; } .oq-ltotal-y { margin-top: 2px; } .oq-roi, .oq-low { padding: 13px 16px; } .oq-calc-cta { margin-top: 22px; flex-direction: column; gap: 8px; } .oq-calc-cta .om-btn { width: 100%; justify-content: center; } .oq-honest { grid-template-columns: 1fr; gap: 20px; margin-top: 36px; } /* sem `display:grid`: .oq-over é escondido pelo ATRIBUTO hidden (SSR e JS) */ .oq-over { padding: 20px 16px; } .card-inner { padding: 24px 18px; } .om-token-manifesto { padding: 52px 16px; } /* ---- handoff calculadora→Enterprise sempre visível no mobile ---- O selo sai do absoluto (com .card-inner em 24px de topo ele passaria por cima do .plan-name) e entra no fluxo. SEM `display`: value-calc.js acende e apaga o selo pelo atributo `hidden`. `align-self` faz o papel do inline-block do design (o card é flex-column, que blocaria o inline mesmo assim), e a margem esquerda alinha com o padding do .card-inner. */ .plan-match-badge { position: static; align-self: flex-start; max-width: 100%; margin: 24px 0 0 18px; } .oq-over .om-btn { width: 100%; justify-content: center; } /* ---- tipografia: escala única da página ---- display: h2 26–32 · título de bloco 20–22 · body 14–15.5 · legenda 12.5–13.5 · mono-label 10.5 */ .om-h2 { font-size: clamp(26px, 7vw, 32px); line-height: 1.12; letter-spacing: -.02em; } .om-section-sub, .oq-calc-sub { font-size: 15px; line-height: 1.55; } .oq-honest-h, .oq-over-h { font-size: 21px; line-height: 1.2; } .oq-honest-d, .oq-over-d { font-size: 14px; line-height: 1.55; } .om-sec-name { font-size: 20px; } .om-sec-sub { font-size: 13px; line-height: 1.5; } .om-icp-grid .om-sec-name { font-size: 17px; } /* o design somava `.om-plan-name` a esta régua de mono-label; em produção `.plan-name` é o TÍTULO do plano (20px sans) — vira ilegível. Fica fora. */ .om-eyebrow, .oq-honest-eb, .oq-over-eb { font-size: 10.5px; letter-spacing: .1em; } .om-stat-n { font-size: 26px; } .om-stat-l { font-size: 10.5px; } .price-value { font-size: 30px; } .om-step-t { font-size: 17px; } .om-step-d, .om-trial-sub, .enterprise-line { font-size: 14px; line-height: 1.55; } /* ---- áreas restantes mais curtas ---- */ .om-logo-strip { padding: 28px 16px; } .om-steps { gap: 20px; } .om-step { padding: 16px 0; } .om-token-manifesto p { font-size: 15px; line-height: 1.6; } .om-footer { padding: 40px 16px 28px; } .om-footer-cols { gap: 22px 16px; } } @keyframes cqDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(90px, 50px) scale(1.25); } } @media (max-width: 350px) { .om-icp-grid { grid-template-columns: 1fr; } }