/* ============================================================================= capability.css : o que só existe na PÁGINA INDIVIDUAL de uma capacidade (/capabilities//). Carregada DEPOIS de capabilities.css, que continua sendo a fonte dos tokens, do reset, dos botões, da nav, do footer, do seletor de idioma, do toggle de tema e da compactação por altura de viewport. Contrato: CAPABILITY-PAGE-SPEC.md. As 9 páginas usam só as classes daqui. Quem escreve markup NÃO escreve CSS: se faltar um estado, pede, não inventa. Regras herdadas que valem aqui também: - todo font-size em rem (o html{font-size} dos degraus de altura encolhe tudo); - padding de pílula/chip/campo em em (a caixa encolhe junto com o texto); - ritmo vertical sempre por --section-pad / --h2 / --lead-size; - foco = UMA borda primary, nunca borda + anel; - nada de prefixo -webkit- escrito à mão. Cuidado de colisão: capabilities.css já define .cap-card, .cap-code, .cap-name, .cap-desc, .cap-dep, .cap-top, .cap-foot, .cap-go, .cap-hit, .cap-problem e .cat-grid para os cards de capacidade. Aqui esses nomes só são tocados quando ESCOPADOS dentro de uma seção (.cap-hero .cap-code, .cap-related .cat-grid…), nunca no seletor cru, senão o catálogo muda de aparência. ÍNDICE 0 ritmo de seção + cabeçalho de seção 1 .cap-hero herói com a tela real .cap-window moldura de janela (usada no herói e na galeria) 2 .cap-facts ficha técnica 3 .cap-overview visão geral 4 .cap-screens telas reais 5 .cap-flow como funciona 6 .cap-data dados necessários 7 .cap-plant onde atua na fábrica 8 .cap-outcomes resultados entregues 9 .cap-uses casos de uso 10 .cap-roles benefícios por papel 11 .cap-integrations integrações (reusa .cat-grid/.cap-card) 12 .cap-related relacionadas (reusa .cat-grid/.cap-card) 13 .cap-cta CTA final 14 .cap-illo campo de ilustração: fallback de quem não tem captura 15 light mode 16 responsivo ============================================================================= */ /* ============================================================================= 0 · RITMO DE SEÇÃO Cada seção paga só o espaço ACIMA dela. Assim não existe soma de paddings entre seções vizinhas, o herói cola na ficha técnica e o footer (que já tem margin-top:var(--section-pad)) fecha a página sozinho. ============================================================================= */ .cap-facts, .cap-overview, .cap-screens, .cap-flow, .cap-data, .cap-plant, .cap-outcomes, .cap-uses, .cap-roles, .cap-integrations, .cap-related, .cap-cta{padding-block:calc(var(--section-pad) * .62) 0} /* a ficha técnica é a continuação do herói, não uma seção nova */ .cap-facts{padding-top:calc(var(--section-pad) * .40)} /* cabeçalho de seção: eyebrow + h2 + lead opcional */ .cap-head, .cap-sec-head{display:flex;flex-direction:column;gap:0.5rem;max-width:64ch;margin-bottom:clamp(20px,2.5vw,38px)} .cap-head h2, .cap-sec-head h2{font-size:var(--h2)} .cap-head .lead, .cap-sec-head .lead{max-width:62ch} /* parágrafo auxiliar pequeno, serve em qualquer seção */ .cap-note{font-size:0.8125rem;line-height:1.55;color:var(--muted)} /* ============================================================================= 1 · HERÓI Duas colunas: texto curto à esquerda, TELA REAL grande à direita. A tela entra acima da dobra de propósito: é o que comunica o produto. ============================================================================= */ .cap-hero{position:relative;overflow:hidden;padding:calc(var(--hero-pt) + var(--nav-h)) 0 0} /* único brilho da página: dá profundidade atrás da janela sem virar gradiente */ .cap-hero::before{content:"";position:absolute;top:calc(var(--nav-h) * -1.4);right:-8%;width:min(60rem,78%);height:min(40rem,150%);border-radius:50%;background:radial-gradient(closest-side,rgba(227,82,39,.16),rgba(227,82,39,0) 72%);pointer-events:none} .cap-hero-grid, .cap-hero-inner{position:relative;display:grid;grid-template-columns:minmax(0,26em) minmax(0,1fr);gap:clamp(26px,3.4vw,64px);align-items:center} .cap-hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--hero-gap) * .5);min-width:0} .cap-hero h1{font-size:var(--hero-h1);line-height:1.08;letter-spacing:-.02em} .cap-hero .ctas{margin-top:0.4rem} /* migalha: volta pro catálogo sem depender do botão do navegador */ .cap-crumb{display:flex;align-items:center;gap:0.5em;font-size:0.75rem;color:var(--muted-2)} .cap-crumb a{color:var(--muted);font-weight:600;transition:color .16s} .cap-crumb a:hover{color:var(--primary-2)} .cap-crumb .ic{width:12px;height:12px;flex:0 0 auto;opacity:.7} .cap-crumb strong{font-weight:600;color:var(--fg)} /* identidade: ícone + sigla. A sigla é tag, o nome do trabalho é o h1. */ .cap-id{display:flex;align-items:center;gap:0.7em} .cap-id .ic-box{width:2.75rem;height:2.75rem;border-radius:14px} .cap-id .ic-box .ic{width:1.5rem;height:1.5rem} /* .cap-code existe em capabilities.css como pílula cinza do card: no herói ela é a sigla da capacidade e leva o acento. Só escopado, nunca no seletor cru. */ .cap-hero .cap-code{padding:0.3333em 0.75em;border-radius:8px;background:rgba(227,82,39,.14);color:var(--primary-2);font-size:0.75rem;font-weight:700;letter-spacing:.06em} /* o problema: régua laranja, sem caixa. É a frase que o visitante reconhece. */ .cap-hero .cap-problem{padding-left:1em;border-left:2px solid var(--primary);font-size:calc(var(--lead-size) * 1.06);line-height:1.5;color:var(--fg);max-width:46ch} .cap-problem-k{display:block;font-size:0.625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:0.35rem} /* ---------- moldura de janela (herói e galeria) ---------- */ .cap-window{position:relative;margin:0;min-width:0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--hair-strong);background:#181615;box-shadow:0 30px 70px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07)} .cap-chrome{display:flex;align-items:center;gap:0.8em;padding:0.7em 1em;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)} .cap-dots{display:flex;gap:0.4em;flex:0 0 auto} .cap-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.15)} .cap-chrome-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:0.75rem;font-weight:600;color:var(--muted)} .cap-chrome-tag{margin-left:auto;flex:0 0 auto;padding:0.35em 0.7em;border-radius:7px;border:1px solid rgba(227,82,39,.3);background:rgba(227,82,39,.12);color:var(--primary-2);font-size:0.6875rem;font-weight:700;letter-spacing:.02em;white-space:nowrap} /* a captura: 1440x900 do app real. aspect-ratio evita salto de layout. */ .shot{display:block;width:100%;height:auto;aspect-ratio:1440/900;object-fit:cover;object-position:top center} .shot-light{display:none} :root[data-theme="light"] .shot-dark{display:none} :root[data-theme="light"] .shot-light{display:block} /* clique amplia: para o PNG, sem lightbox em JS. Um por tema, o CSS esconde o do tema errado (as classes do continuam mandando na imagem). */ .cap-zoom{display:block;cursor:zoom-in} .cap-zoom-light{display:none} :root[data-theme="light"] .cap-zoom-dark{display:none} :root[data-theme="light"] .cap-zoom-light{display:block} /* legenda dentro da moldura: rótulo da tela + convite para ampliar */ .cap-window-cap{display:flex;align-items:center;justify-content:space-between;gap:0.8em;padding:0.75em 1em;border-top:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);font-size:0.8125rem;font-weight:600;color:var(--fg)} .cap-window-cap em{font-style:normal;flex:0 0 auto;font-size:0.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);transition:color .18s} .cap-window:hover .cap-window-cap em{color:var(--primary-2)} /* ============================================================================= 2 · FICHA TÉCNICA Uma barra, quatro campos, hairline entre eles. Dado que precisa, áreas da operação, integra com, como ativa. ============================================================================= */ .cap-facts-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:var(--radius);border:1px solid var(--hair);background:rgba(255,255,255,.035);overflow:hidden} .cap-fact{display:flex;flex-direction:column;gap:0.45rem;min-width:0;padding:1.05rem 1.25rem;border-left:1px solid var(--hair)} .cap-fact:first-child{border-left:0} .cap-fact-k{font-size:0.6562rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2)} .cap-fact-v{display:flex;align-items:flex-start;gap:0.5em;min-width:0;font-size:0.9375rem;font-weight:600;line-height:1.4;color:var(--fg)} .cap-fact-v .ic{width:1rem;height:1rem;flex:0 0 auto;margin-top:.15em;color:var(--primary-2)} /* ============================================================================= 3 · VISÃO GERAL Duas colunas: h2 + lead à esquerda, as três entregas em lista com régua. ============================================================================= */ .cap-overview-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,3.4vw,72px);align-items:start} .cap-overview-copy{display:flex;flex-direction:column;gap:0.9rem;min-width:0} .cap-overview-copy h2{font-size:var(--h2)} .cap-lede{font-size:calc(var(--lead-size) * 1.12);line-height:1.55;color:var(--fg);max-width:44ch} .cap-delivers{list-style:none;display:grid;gap:0.95rem;min-width:0} .cap-delivers li{display:flex;align-items:flex-start;gap:0.8em;padding-top:0.95rem;border-top:1px solid var(--hair);font-size:0.9375rem;line-height:1.5;color:var(--fg)} /* o tique é desenhado com borda: não gasta ícone nem SVG */ .cap-delivers li::before{content:"";flex:0 0 auto;width:0.42em;height:0.72em;margin-top:0.3em;border-right:2px solid var(--primary-2);border-bottom:2px solid var(--primary-2);rotate:45deg} /* se o markup trouxe ícone próprio, o tique desenhado sai de cena */ .cap-delivers li:has(> .ic)::before{display:none} .cap-delivers .ic{width:1rem;height:1rem;flex:0 0 auto;margin-top:.2em;color:var(--primary-2)} /* ============================================================================= 4 · TELAS REAIS Galeria de molduras. Nada de aspecto decorativo: é o produto. ============================================================================= */ .cap-screens-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,26em),1fr));gap:clamp(18px,2.2vw,34px)} /* ============================================================================= 5 · COMO FUNCIONA Quatro passos numerados num trilho contínuo. Sem card: o conector é a única estrutura, e o número tampa o trilho onde ele começa. ============================================================================= */ .cap-flow-steps{--flow-g:clamp(18px,2.2vw,34px);list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--flow-g)} .cap-step{position:relative;display:flex;flex-direction:column;gap:0.5rem;min-width:0} .cap-step::before{content:"";position:absolute;top:0.9375rem;left:0.9375rem;right:calc(var(--flow-g) * -1);height:1px;background:var(--hair)} .cap-step:last-child::before{display:none} .cap-step-n{position:relative;z-index:1;display:inline-grid;place-items:center;width:1.875rem;height:1.875rem;border-radius:999px;border:1px solid var(--hair-strong);background:var(--page-bg);color:var(--primary-2);font-size:0.75rem;font-weight:700} .cap-step h3{margin-top:0.3rem;font-size:1rem;line-height:1.3} .cap-step p{font-size:0.875rem;line-height:1.55;color:var(--muted)} /* ============================================================================= 6 · DADOS NECESSÁRIOS Cartão do requisito duro + checklist do que a fábrica precisa ter. O checklist não é cartão de propósito: caixa dentro de caixa não ajuda ninguém a ler. ============================================================================= */ .cap-data-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(22px,3vw,56px);align-items:start} .cap-data-hard{display:flex;flex-direction:column;gap:0.7rem;padding:1.4rem;border-radius:var(--radius);border:1px solid rgba(227,82,39,.32);background:rgba(227,82,39,.06)} .cap-data-hard .ic-box{width:2.125rem;height:2.125rem;border-radius:10px} .cap-data-hard .ic-box .ic{width:1.125rem;height:1.125rem} .cap-data-label{font-size:0.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)} .cap-data-val{font-size:1.125rem;font-weight:700;line-height:1.25;color:var(--primary-2)} .cap-data-side{display:flex;flex-direction:column;gap:1rem;min-width:0} .cap-check{list-style:none;display:grid;gap:0.8rem;min-width:0} .cap-check li{display:flex;align-items:flex-start;gap:0.75em;padding-bottom:0.8rem;border-bottom:1px solid var(--hair);font-size:0.9375rem;line-height:1.5;color:var(--fg)} .cap-check li:last-child{padding-bottom:0;border-bottom:0} .cap-check .ic{width:1rem;height:1rem;flex:0 0 auto;margin-top:.2em;color:var(--primary-2)} /* ============================================================================= 7 · ONDE ATUA NA FÁBRICA Consumidor do componente compartilhado /capabilities/plant-map.js:
Sem o script, o div fica vazio e a seção inteira sai da página (nada de moldura vazia antes do footer). O div é só hospedeiro: o componente traz a própria moldura (.pm / .pm-frame, com o overflow-x do mapa). Enquadrar aqui de novo daria caixa dentro de caixa. ============================================================================= */ .cap-plant-map{position:relative;min-width:0} .cap-plant-map:empty{display:none} .cap-plant:has(.cap-plant-map:empty){display:none} /* ============================================================================= 8 · RESULTADOS ENTREGUES O que passa a ser possível. Régua laranja em cima, sem preenchimento: são afirmações, não cartões de produto. ============================================================================= */ .cap-outcomes-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(14em,17vw,19em),1fr));gap:clamp(18px,2.4vw,38px)} .cap-outcome{display:flex;flex-direction:column;gap:0.5rem;min-width:0;padding-top:0.95rem;border-top:2px solid rgba(227,82,39,.55);font-size:0.9375rem;line-height:1.5;color:var(--fg)} .cap-outcome b{font-size:1rem;font-weight:700;line-height:1.3} .cap-outcome p{font-size:0.875rem;line-height:1.55;color:var(--muted)} /* ============================================================================= 9 · CASOS DE USO Régua laranja à esquerda, também sem caixa. ============================================================================= */ .cap-uses-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(15em,20vw,22em),1fr));gap:clamp(20px,2.6vw,44px)} .cap-use{display:flex;flex-direction:column;gap:0.5rem;min-width:0;padding-left:1.15em;border-left:2px solid var(--primary)} .cap-use h3{font-size:1rem;line-height:1.3} .cap-use p{font-size:0.875rem;line-height:1.55;color:var(--muted)} /* ============================================================================= 10 · BENEFÍCIOS POR PAPEL Aqui o cartão faz sentido: são três recortes paralelos do mesmo produto. ============================================================================= */ .cap-roles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(15em,20vw,21em),1fr));gap:0.875rem} .cap-role{display:flex;flex-direction:column;gap:0.7rem;min-width:0;padding:1.3rem;border-radius:var(--radius);border:1px solid var(--hair);background:rgba(255,255,255,.04)} .cap-role .ic-box{width:2.25rem;height:2.25rem;border-radius:11px} .cap-role .ic-box .ic{width:1.125rem;height:1.125rem} .cap-role h3{font-size:1rem;line-height:1.25} .cap-role p{font-size:0.875rem;line-height:1.55;color:var(--muted)} /* ============================================================================= 11 e 12 · INTEGRAÇÕES E RELACIONADAS Grade e cartão vêm de capabilities.css (.cat-grid / .cap-card), que existem de propósito para estas duas seções. Aqui só o encaixe. ============================================================================= */ .cap-integrations .cat-grid, .cap-related .cat-grid{margin-top:0} /* sem as pílulas de área (que carregam o margin-top:auto no catálogo), o rodapé do cartão precisa empurrar sozinho para as três alturas fecharem alinhadas */ .cap-integrations .cap-foot, .cap-related .cap-foot{margin-top:auto} /* "Abrir capacidade" no rodapé do cartão de integração */ .cap-open{display:flex;align-items:center;gap:0.45em;min-width:0;color:var(--muted-2);font-size:0.75rem;font-weight:700;transition:color .2s} .cap-open .ic{width:13px;height:13px;flex:0 0 auto} .cap-card:hover .cap-open, .cap-card:focus-within .cap-open{color:var(--primary-2)} /* ============================================================================= 13 · CTA FINAL ============================================================================= */ .cap-cta{padding-bottom:0} .cap-cta-box, .cap-cta .box{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;padding:clamp(30px,4vw,56px);border-radius:var(--radius-lg);border:1px solid rgba(227,82,39,.32);background:rgba(227,82,39,.06)} .cap-cta-box h2, .cap-cta .box h2{font-size:var(--cta-h2);max-width:26ch} .cap-cta-box .lead, .cap-cta .box .lead{max-width:60ch} .cap-cta-box .ctas, .cap-cta .box .ctas{margin-top:0.6rem;justify-content:center} /* ============================================================================= 14 · CAMPO DE ILUSTRAÇÃO Fallback de quem ainda não tem captura (hoje: QCP). Entra NO LUGAR da .cap-window do herói, com a mesma proporção, e a seção 4 sai da página. ============================================================================= */ .cap-illo{position:relative;overflow:hidden;display:grid;place-items:center;aspect-ratio:1440/900;border-radius:var(--radius-lg);border:1px solid var(--hair);background:var(--ground-2)} .cap-illo-glow{position:absolute;width:58%;height:104%;border-radius:50%;background:radial-gradient(closest-side,rgba(227,82,39,.30),rgba(227,82,39,0) 72%)} .cap-illo-lines{position:absolute;inset:-25%;background:repeating-linear-gradient(115deg,rgba(240,130,78,.13) 0 1px,rgba(240,130,78,0) 1px 52px)} .cap-illo-mark{position:relative;width:clamp(56px,7vw,96px);height:clamp(56px,7vw,96px);color:var(--primary-2);opacity:.55} .cap-illo-mark .ic{width:100%;height:100%} .cap-illo-code{position:absolute;top:1em;right:1em;padding:0.45em 0.8em;border-radius:8px;border:1px solid var(--hair-strong);background:rgba(255,255,255,.07);color:var(--fg);font-size:0.7188rem;font-weight:700;letter-spacing:.06em} .cap-illo-wm{position:absolute;left:0.7em;bottom:0.1em;font-size:clamp(4rem,8vw,7.5rem);font-weight:700;letter-spacing:-.04em;line-height:.8;color:var(--fg);opacity:.045;user-select:none;pointer-events:none} /* ============================================================================= 15 · LIGHT MODE : só as superfícies que usam fill branco cru ============================================================================= */ :root[data-theme="light"] .cap-hero::before{opacity:.6} :root[data-theme="light"] .cap-hero .cap-code{background:rgba(227,82,39,.14);color:var(--primary)} :root[data-theme="light"] .cap-window{background:var(--ground-2);border-color:rgba(35,33,32,.14);box-shadow:0 24px 60px rgba(35,33,32,.16),inset 0 1px 0 rgba(255,255,255,.6)} :root[data-theme="light"] .cap-chrome{background:rgba(35,33,32,.03);border-bottom-color:rgba(35,33,32,.1)} :root[data-theme="light"] .cap-dots i{background:rgba(35,33,32,.16)} :root[data-theme="light"] .cap-window-cap{background:rgba(35,33,32,.03);border-top-color:rgba(35,33,32,.1)} :root[data-theme="light"] .cap-facts-bar, :root[data-theme="light"] .cap-role{background:rgba(35,33,32,.045)} :root[data-theme="light"] .cap-data-hard{background:rgba(227,82,39,.07)} :root[data-theme="light"] .cap-cta-box, :root[data-theme="light"] .cap-cta .box{background:rgba(227,82,39,.07)} :root[data-theme="light"] .cap-illo-glow{opacity:.55} :root[data-theme="light"] .cap-illo-lines{opacity:.7} :root[data-theme="light"] .cap-illo-code{background:rgba(35,33,32,.06)} :root[data-theme="light"] .cap-illo-wm{opacity:.06} /* ============================================================================= 16 · RESPONSIVO Nada transborda na horizontal: toda coluna é minmax(0,…) e toda captura é width:100% com aspect-ratio. ============================================================================= */ @media(max-width:1100px){ .cap-hero-grid, .cap-hero-inner{grid-template-columns:minmax(0,22em) minmax(0,1fr);gap:clamp(22px,2.6vw,40px)} } @media(max-width:900px){ .cap-hero-grid, .cap-hero-inner{grid-template-columns:1fr;gap:clamp(24px,4vw,36px);align-items:start} .cap-hero::before{width:120%;right:-30%} .cap-hero .cap-problem{max-width:none} .cap-lede{max-width:none} /* 2x2: a régua vertical vira grade, sem virar lista solta */ .cap-facts-bar{grid-template-columns:repeat(2,minmax(0,1fr))} .cap-fact{border-left:0;border-top:1px solid var(--hair)} .cap-fact:nth-child(2n){border-left:1px solid var(--hair)} .cap-fact:nth-child(-n+2){border-top:0} .cap-overview-grid, .cap-data-grid{grid-template-columns:1fr} /* o trilho do fluxo só existe na fileira de quatro */ .cap-flow-steps{grid-template-columns:repeat(2,minmax(0,1fr))} .cap-step::before{display:none} } @media(max-width:640px){ .cap-facts-bar{grid-template-columns:1fr} .cap-fact{border-left:0;border-top:1px solid var(--hair)} .cap-fact:nth-child(2n){border-left:0} .cap-fact:first-child{border-top:0} .cap-flow-steps{grid-template-columns:1fr} .cap-outcomes-grid, .cap-uses-grid{gap:1.25rem} } /* Abaixo de 1520px o seletor de idioma e o toggle de tema descem para baixo da barra (ver capabilities.css), então o herói ganha a mesma folga para os controles não pousarem em cima do conteúdo, que aqui é a janela com a tela do produto. */ @media(max-width:1519px){ .cap-hero{padding-top:calc(var(--hero-pt) + var(--nav-h) + 40px)} }