/* ============================================================ MAIS — Biblioteca de Componentes WEB (camada 6) Depende de: tokens/core.css + web/web.css (importar ANTES). Ordem no : core.css → web.css → components.css Consome tokens do core: semânticos primeiro; primitivas de camada B (derivadas) apenas para estados (hover, disabled, fundos suaves). Nenhum valor de cor hardcoded — se faltar, crie token novo em core.css (identidade) ou web.css (web). ============================================================ */ /* ------------------------------------------------------------ BOTÃO — pílula, Poppins 500. 5 variações (primário, campanha, secundário, texto, claro) + modificadores --sm/--block, 5 estados. ------------------------------------------------------------ */ .btn { --btn-fundo: var(--cor-acento); --btn-texto: var(--cor-texto-sobre-acento); /* carvão: AA 5,1:1 sobre coral */ display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; /* alvo de toque mínimo */ padding: 12px var(--space-4); border: 2px solid transparent; border-radius: var(--radius-pill); font-family: var(--fonte-texto); font-weight: var(--peso-medium); font-size: var(--fs-body); line-height: 1; text-decoration: none; cursor: pointer; background: var(--btn-fundo); color: var(--btn-texto); transition: background var(--transicao), box-shadow var(--transicao), transform var(--transicao), border-color var(--transicao); } .btn:hover { background: var(--cor-acento-hover); box-shadow: var(--shadow-md); } .btn:focus-visible{ outline: none; box-shadow: var(--anel-foco); } .btn:active { transform: translateY(1px); box-shadow: var(--shadow-sm); } .btn:disabled, .btn[aria-disabled="true"] { background: var(--taupe-300); color: var(--cor-superficie); box-shadow: none; cursor: not-allowed; transform: none; } /* Primário = default acima (coral) */ .btn--primario { background: var(--cor-acento); color: var(--cor-texto-sobre-acento); } /* Campanha/LP = pílula coral BOLD MAIÚSCULA (padrão extraído da LP) */ .btn--campanha { text-transform: uppercase; font-weight: var(--peso-semibold); letter-spacing: .04em; line-height: 1.2; } /* Secundário = contorno oliva */ .btn--secundario { background: transparent; color: var(--cor-marca); border-color: var(--cor-marca); } .btn--secundario:hover { background: var(--oliva-100); box-shadow: var(--shadow-sm); } .btn--secundario:disabled, .btn--secundario[aria-disabled="true"] { background: transparent; color: var(--taupe-300); border-color: var(--taupe-300); } /* Texto = link discreto, underline no hover */ .btn--texto { background: transparent; color: var(--oliva-700); /* AA 7,6:1 — coral não passa em texto pequeno */ padding: var(--space-2); border-color: transparent; } .btn--texto:hover { background: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: 3px; } .btn--texto:active{ transform: none; } .btn--texto:disabled, .btn--texto[aria-disabled="true"] { background: transparent; color: var(--taupe-300); } /* Tamanho compacto (ex.: CTA da navbar) */ .btn--sm { min-height: 36px; padding: var(--space-2) var(--space-3); font-size: var(--fs-caption); } /* Em tela de toque o compacto volta aos 44px. Os 36px existem para densidade no desktop, onde o alvo é um ponteiro de 1px; no dedo, 36px é erro de toque. `pointer: coarse` pergunta pelo APARELHO de apontar, não pela largura — pega tablet em paisagem (que é largo e mesmo assim é dedo) e não pune uma janela estreita no notebook. */ @media (pointer: coarse) { .btn--sm { min-height: 44px; } } /* ------------------------------------------------------------ CARD — superfície branca sobre creme, cantos grandes, sombra suave. ------------------------------------------------------------ */ .card { display: flex; flex-direction: column; gap: var(--space-3); background: var(--cor-superficie); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-5); } .card__titulo { font-family: var(--fonte-texto); font-weight: var(--peso-semibold); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--cor-texto); margin: 0; } .card__texto { font-family: var(--fonte-texto); font-weight: var(--peso-light); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--cor-texto-suave); margin: 0; } /* Ícone em círculo (estilo brand guide): oliva com detalhe coral */ .card__icone { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--radius-full); background: var(--oliva-100); color: var(--cor-marca); } .card__icone svg { width: 32px; height: 32px; } /* Card clicável (link/artigo interativo): reage a hover/foco */ .card--link { text-decoration: none; transition: transform var(--transicao), box-shadow var(--transicao); } .card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .card--link:focus-visible{ outline: none; box-shadow: var(--anel-foco); } .card--link:active { transform: translateY(-1px); box-shadow: var(--shadow-md); } /* Card orgânico (retrato / autoridade) — raio 104px assimétrico */ .card--organico { border-radius: var(--radius-organico) var(--radius-organico) var(--radius-lg) var(--radius-organico); } /* ------------------------------------------------------------ INPUT / CAMPO — label acima, borda taupe, foco coral. ------------------------------------------------------------ */ /* `min-width: 0` é obrigatório aqui: item de grid/flex tem largura mínima automática igual ao conteúdo, e o