/* Estoque: composições de marketing, operação e loja. Fundação e identidade permanecem em tokens.css + app.css. */ body { min-height: 100dvh; display: flex; flex-direction: column; } main { flex: 1; min-width: 0; } header.shell .desktop-navigation { margin-left: auto; } .mobile-navigation { display: none; } .mobile-navigation summary { padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); font-weight: 600; } .hero { width: min(100%, calc(var(--container-max) + 2 * var(--page-gutter))); padding: var(--section-space) var(--page-gutter); margin-inline: auto; } .hero > p { max-width: var(--measure); } .hero > h2 { margin-top: var(--space-8); } .hero h1 { max-width: var(--measure); } body[data-surface="marketing"] .hero h1 { font-size: var(--text-display); } body[data-surface="marketing"] .hero > p { font-size: 1rem; line-height: 1.65; } body[data-surface="marketing"] .hero:not(.marketing-home) { max-width: calc(1064px + 2 * var(--page-gutter)); } .marketing-intro { max-width: var(--measure); padding-bottom: var(--space-8); } .marketing-intro h1 { font-size: var(--text-display); font-weight: 500; line-height: 1.08; } .marketing-intro .slogan { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; margin-block: var(--space-5); } .hero-lead { font-size: 1.125rem; line-height: 1.65; max-width: 42rem; } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-block: var(--space-6) 0; } .hero-actions > a:last-child { min-height: 44px; display: inline-flex; align-items: center; } .movements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); list-style: none; margin: 0 0 var(--space-8); padding: var(--space-8) 0; border-block: 1px solid var(--border-subtle); } .movements li { padding-left: var(--space-4); border-left: 2px solid var(--brand-orange); font-weight: 500; } .coverage { color: var(--ink-muted); font-size: var(--text-sm); } .faq { max-width: var(--measure); margin-top: var(--space-8); } .faq details { border-bottom: 1px solid var(--border-subtle); padding-block: var(--space-4); } .faq summary { font-weight: 500; } .faq p { padding-block: var(--space-3); line-height: 1.65; } /* O app mantém os mesmos destinos, com trilho lateral apenas onde há espaço. */ body[data-surface="app"][data-authenticated="true"] { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: 1fr auto; background: var(--brand-gray-100); } body[data-surface="app"][data-authenticated="true"] header.shell { grid-row: 1 / -1; align-content: start; align-items: flex-start; padding: var(--space-6) var(--space-5); background: var(--brand-white); border-right: 1px solid var(--border-subtle); } body[data-surface="app"] header.shell .desktop-navigation { margin: 0; } body[data-surface="app"][data-authenticated="true"] header.shell nav { flex-direction: column; gap: var(--space-1); width: 100%; } body[data-surface="app"][data-authenticated="true"] header.shell nav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); } body[data-surface="app"][data-authenticated="true"] header.shell nav a[aria-current] { background: var(--brand-orange); } body[data-surface="app"] .hero { padding-block: var(--space-6); padding-inline: var(--space-6); } body[data-surface="app"] .hero > form { background: var(--brand-white); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-5); margin-block: var(--space-5); } body[data-surface="app"] .table-scroll { background: var(--brand-white); border-radius: var(--radius-md); } body[data-surface="app"][data-authenticated="false"] .hero { max-width: calc(640px + 2 * var(--page-gutter)); padding-block: var(--section-space); } .hero form p { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-4); } .hero form label:not(:has(input[type="checkbox"], input[type="radio"])) { display: inline-flex; flex-direction: column; gap: var(--space-2); max-width: 100%; font-weight: 500; } .hero form label input:not([type="checkbox"]):not([type="radio"]), .hero form label select, .hero form label textarea { width: 100%; } .hero form textarea { min-height: 7rem; } .hero[data-operational="identity"] form label { width: 100%; } .card-metric { min-width: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-5); background: var(--brand-white); } .card-metric h2 { font-size: var(--text-sm); font-weight: 500; margin: 0 0 var(--space-3); } .card-metric p { margin: 0; font-size: var(--text-title); font-weight: 600; font-variant-numeric: tabular-nums; } .skeleton { background: var(--brand-gray-100); } .preview-desktop, .preview-mobile { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); margin: var(--space-4) 0; } .preview-mobile { max-width: 22rem; } .partner-content { font-family: var(--font-sans); } .type-preview h1 { font-weight: 700; } .type-preview h2 { font-weight: 600; } /* Vitrine: busca e quantidades continuam disponíveis em telas pequenas. */ .search { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; flex: 1 1 60%; } .search label { margin: 0; font-size: var(--text-sm); } .search input { flex: 1 1 180px; } .cart-link { color: var(--brand-blue); display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; } .store-title { font-weight: 600; } .promo { flex-basis: 100%; background: var(--brand-beige); color: var(--brand-blue); font-weight: 500; padding: var(--space-3) var(--space-4); margin: 0; border-radius: var(--radius-sm); } .promo[data-promo-color="navy"] { background: var(--brand-blue); color: var(--brand-white); } .promo[data-promo-color="sand"] { background: var(--brand-beige); color: var(--brand-blue); } .combo { font-weight: 700; } body[data-surface="storefront"] .hero { padding-block: var(--space-8); } body[data-surface="storefront"] .card { display: flex; flex-direction: column; } body[data-surface="storefront"] .card form { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; } body[data-surface="storefront"] .card input[type="number"] { width: 6rem; } body[data-surface="storefront"] .card form label { margin: 0; } body[data-surface="storefront"] .card .btn { width: 100%; } #cart-drawer { border-top: 1px solid var(--border-subtle); padding: var(--space-6) max(var(--page-gutter), calc((100% - var(--container-max)) / 2)); } .cart-inner { max-width: var(--measure); } .cart-inner ul { padding: 0; list-style: none; } .cart-inner li { padding-block: var(--space-5); border-bottom: 1px solid var(--border-subtle); } .cart-inner form { margin-block: var(--space-3); } .cart-inner .inline { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; } .cart-inner input[type="number"] { width: 6rem; } .cart-inner [data-cart-total] { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; } .chat-widget { display: block; background: var(--brand-white); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); width: min(calc(100% - 2 * var(--page-gutter)), 40rem); margin: var(--space-5) var(--page-gutter); } .chat-widget summary { font-weight: 600; color: var(--brand-blue); } .chat-panel { margin-top: var(--space-3); } .chat-panel textarea { width: 100%; min-height: 5rem; } #age-gate { border: 2px solid var(--brand-blue); border-radius: var(--radius-md); background: var(--brand-white); color: var(--brand-blue); padding: var(--space-5); max-width: calc(100% - 2rem); } #age-gate::backdrop { background: transparent; } .list { columns: 2; column-gap: var(--space-8); padding-left: var(--space-5); } .list li { break-inside: avoid; padding-block: var(--space-2); } .inline { display: inline; } .empty { padding: var(--space-6); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); grid-column: 1 / -1; } @media (min-width: 768px) { body[data-surface="marketing"] .hero-actions .btn { min-height: 48px; } } @media (min-width: 1280px) { body[data-surface="marketing"] .hero-actions .btn { min-height: 52px; } } @media (max-width: 1279px) { header.shell .desktop-navigation { display: none; } .mobile-navigation { display: block; margin-left: auto; } .mobile-navigation[open] { flex-basis: 100%; } .mobile-navigation nav { padding-top: var(--space-4); } } @media (min-width: 1024px) { body[data-surface="app"][data-authenticated="true"] .desktop-navigation { display: flex; } body[data-surface="app"][data-authenticated="true"] .mobile-navigation { display: none; } } @media (max-width: 1023px) { body[data-surface="app"][data-authenticated="true"] { display: flex; } body[data-surface="app"][data-authenticated="true"] header.shell { align-items: center; padding: var(--space-4) var(--page-gutter); } body[data-surface="app"][data-authenticated="true"] .mobile-navigation nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } body[data-surface="app"] .hero { padding-inline: var(--page-gutter); } } @media (max-width: 767px) { header.shell { gap: var(--space-3); padding-block: var(--space-4); } header.shell .brand-word { flex-basis: calc(100% - 176px); } .movements { grid-template-columns: 1fr; gap: var(--space-5); } .list { columns: 1; } .hero form p { align-items: stretch; } .hero form label:not(:has(input[type="checkbox"], input[type="radio"])) { width: 100%; margin-right: 0; } .hero .card form label:not(:has(input[type="checkbox"], input[type="radio"])) { width: auto; } .hero form button { align-self: end; } } /* ========================================================================== Camada premium — reconcilia o Estoque com o contrato compartilhado. No fim do arquivo para vencer as regras legadas por ordem, sem !important. Decisões: docs/ui-premium/CONTRACT.md. ========================================================================== */ /* Eyebrow igual à dos outros dois produtos. */ .eyebrow { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-soft); text-transform: uppercase; letter-spacing: var(--tracking-wide); } .eyebrow::before { content: ""; width: var(--space-5); height: 2px; background: var(--brand-orange); flex: none; } /* --- Cabeçalho e busca da vitrine ---------------------------------------- */ header.shell { box-shadow: var(--shadow-1); } header.shell .search { display: flex; align-items: end; gap: var(--space-2); flex-wrap: wrap; } header.shell .search input { border-radius: var(--radius-field); } .cart-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-min-height); padding-inline: var(--space-3); border-radius: var(--radius-control); text-decoration: none; font-weight: 600; transition: background-color var(--dur-state) var(--ease-standard); } .cart-link:hover { background: var(--surface-sunken); } /* A contagem é um dado, não um enfeite: lida junto do rótulo. */ .cart-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding-inline: var(--space-1); border-radius: var(--radius-pill); background: var(--brand-orange); color: var(--brand-blue); font-size: var(--text-caption); font-weight: 700; font-variant-numeric: tabular-nums; } body[data-header="blue"] .cart-link:hover { background: color-mix(in srgb, var(--brand-white) 14%, transparent); } /* --- Superfícies ---------------------------------------------------------- */ .card { border-radius: var(--radius-card); transition: box-shadow var(--dur-state) var(--ease-standard); } .card:hover { box-shadow: var(--shadow-2); } .flash, .error { border-radius: var(--radius-control); display: flex; align-items: center; gap: var(--space-2); } .table-scroll { border-radius: var(--radius-card); } .promo { border-radius: var(--radius-control); } /* --- Densidade operacional do painel do lojista --------------------------- */ body[data-density="operational"] h1 { font-size: var(--text-op-title); } body[data-density="operational"] .cards { gap: var(--space-4); } /* --- Overlays: diálogo de idade e carrinho -------------------------------- */ #age-gate { padding: var(--space-6); } #cart-drawer { border-radius: var(--radius-card) var(--radius-card) 0 0; } .chat-widget { border-radius: var(--radius-card); } .chat-widget .chat-panel { border-radius: 0 0 var(--radius-card) var(--radius-card); } /* --- Listas que são grades não carregam marcador ------------------------- */ .cards, .grid { list-style: none; padding-inline-start: 0; } /* --- Mobile: alvos confortáveis e sem estouro ----------------------------- */ @media (max-width: 767px) { header.shell .search { width: 100%; } header.shell .search input { flex: 1 1 12rem; } header.shell .search .btn { flex: 0 0 auto; } .cart-link { margin-left: auto; } } /* --- Painel do lojista: indicadores, passos e atalhos --------------------- */ .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3); margin-block: var(--space-5); } .metric { padding: var(--space-4) var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--brand-white); box-shadow: var(--shadow-1); } .metric p { margin: 0 0 var(--space-1); color: var(--ink-muted); font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; } /* Valor não quebra no meio: "R$ 545,26" partido em duas linhas engana. */ .metric strong { display: block; font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; white-space: nowrap; } .next-steps { margin-block: var(--space-5); } .next-steps h2 { margin-top: 0; font-size: 1.0625rem; } .checklist { margin: 0; padding-inline-start: var(--space-5); color: var(--ink-muted); font-size: var(--text-sm); } .checklist li { margin-block: var(--space-2); } .quick-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-5); } .quick-links a { display: inline-flex; align-items: center; min-height: 40px; padding-inline: var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; text-decoration: none; transition: background-color var(--dur-state) var(--ease-standard); } .quick-links a:hover { background: var(--surface-sunken); } /* ========================================================================== Estoque — reconstrução de 2026-09-12. Mesma gramática de Portfólio e Financeiro (docs/ui-premium/CONTRACT.md): grade assimétrica, contraste real de escala, campo de cor da marca e entrada coordenada via [data-reveal]. Sem matiz novo — só var(--brand-*). ========================================================================== */ /* --- Marketing: herói com âncora ------------------------------------------ */ .hero.marketing-home { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(var(--space-6), 4vw, var(--space-9)); /* A dobra anterior era só texto com metade da largura vazia. */ min-height: min(72vh, 660px); max-width: none; padding-block: var(--density-section); padding-inline: max(var(--page-gutter), calc((100% - var(--container-max)) / 2)); } .marketing-intro { max-width: none; padding-bottom: 0; } .marketing-intro h1 { max-width: 15ch; font-weight: 600; letter-spacing: var(--tracking-tighter); } .marketing-intro .slogan { color: var(--ink-soft); } .marketing-intro .hero-lead { max-width: 44ch; color: var(--ink-muted); } .link-quiet { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: var(--text-sm); font-weight: 600; } .link-quiet svg { transition: transform var(--dur-state) var(--ease-standard); } .link-quiet:hover svg { transform: translateX(3px); } /* Painel da operação: superfície grande, raio grande, elevação real. Clara porque representa a interface do catálogo, que é clara. */ .ops-preview { display: grid; gap: var(--space-5); min-width: 0; padding: clamp(var(--space-5), 2.2vw, var(--space-7)); border: 1px solid var(--border-subtle); border-radius: var(--radius-media); background: var(--brand-white); box-shadow: var(--shadow-3); } .ops-head { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); } .ops-head strong { display: block; font-size: var(--text-sm); } .ops-head span span, .ops-head div span { display: block; margin-top: var(--space-1); color: var(--ink-muted); font-size: var(--text-xs); } .ops-mark { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-control); background: var(--brand-blue); color: var(--brand-white); } .ops-rows { display: grid; margin: 0; padding-inline-start: 0; list-style: none; } .ops-rows li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); } .ops-rows li:last-child { border-bottom: 0; } .ops-name { font-weight: 500; } .ops-name small { display: block; margin-top: 2px; color: var(--ink-muted); font-size: var(--text-xs); font-weight: 400; } /* Estado por ÍCONE + texto + cor, nunca só cor. */ .ops-stock { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; font-size: var(--text-xs); font-weight: 600; } .ops-stock svg { flex: none; } .ops-stock[data-level="ok"] { color: var(--brand-blue); } .ops-stock[data-level="low"] { color: color-mix(in srgb, var(--brand-orange) 82%, var(--brand-blue)); } .ops-stock[data-level="out"] { color: var(--ink-soft); } .ops-flow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-control); background: var(--surface-sunken); font-size: var(--text-xs); font-weight: 600; } .ops-flow > span { display: inline-flex; align-items: center; gap: var(--space-2); } .ops-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--ink-soft); font-size: var(--text-caption); line-height: 1.45; } .ops-note svg { flex: none; margin-top: 2px; } .campaign-note { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--page-gutter); color: var(--ink-muted); font-size: var(--text-sm); } /* --- Seções do marketing -------------------------------------------------- */ .section { max-width: var(--container-max); margin-inline: auto; padding-block: var(--density-section); padding-inline: var(--page-gutter); } .section-head-est { margin-bottom: var(--space-7); } .section-head-est h2 { max-width: 20ch; font-size: var(--text-title); font-weight: 600; line-height: var(--leading-title); letter-spacing: var(--tracking-tight); } /* Cinco movimentos numa grade de 3 colunas deixavam uma célula solta na segunda linha. Lista editorial aceita cinco itens sem buraco. */ .movements-section .movements { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; border-block: 0; } .movements-section .movements li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: baseline; gap: var(--space-5); padding: 0; padding-block: var(--space-5); border-left: 0; border-top: 1px solid var(--border-strong); font-weight: 400; } .movements-section .movements li:last-child { border-bottom: 1px solid var(--border-strong); } .movements-section .mv-n { color: var(--brand-orange); font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; } .movements-section .movements p { margin: 0; font-size: 1.0625rem; font-weight: 500; } .movements-section .coverage { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-6); } .movements-section .coverage svg { flex: none; margin-top: 2px; } /* --- FAQ: o
deixa de parecer elemento quebrado ------------------ */ .faq-section-est { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(var(--space-6), 5vw, var(--space-9)); align-items: start; } .faq-intro-est h2 { font-size: var(--text-title); font-weight: 600; line-height: var(--leading-title); letter-spacing: var(--tracking-tight); } .faq-section-est .faq { max-width: none; margin-top: 0; } .faq-section-est .faq details { padding-block: 0; border-bottom: 1px solid var(--border-strong); } .faq-section-est .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; padding-block: var(--space-4); list-style: none; font-size: 1.0625rem; font-weight: 500; cursor: pointer; } .faq-section-est .faq summary::-webkit-details-marker { display: none; } .faq-section-est .faq summary svg { flex: none; color: var(--brand-orange); transition: transform var(--dur-overlay) var(--ease-standard); } /* O "+" vira "×" ao abrir: mesmo glifo Hugeicons, girado. */ .faq-section-est .faq details[open] summary svg { transform: rotate(45deg); } .faq-section-est .faq details > p { margin: 0; padding-block: 0 var(--space-5); max-width: 62ch; color: var(--ink-muted); line-height: var(--leading-body); } @media (max-width: 900px) { .faq-section-est { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { .hero.marketing-home { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-inline: var(--page-gutter); } .marketing-intro h1 { max-width: 100%; } .movements-section .movements li { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-4); } } /* --- Vitrine (loja demonstrativa) ---------------------------------------- Três defeitos reais, todos de apresentação — corrigidos sem tocar no markup, porque o e2e assere `.banners` com os títulos e `[data-home-section="categorias"]` visível: 1. Os banners saíam como