/* Não é CSS do legado — sistema de largura, padronização de UI * (2026-08-25, ver docs/23-PADRONIZACAO-UI.md). Substitui um hack pontual: * * `wide-container-fix.css` sobrescrevia o seletor `.container` bruto do * Bootstrap, então uma página inteira entrava ou ficava de fora da largura * larga (link por página). Aqui vira classe — `.container-wide` — porque a * home tem um único `.container` envolvendo blocos que devem alargar * (grades de imagem) e blocos que não devem (about/quem somos/parceiros); * o resto do site (`/atlas`, `/contents`, `/collections`, `/ml/[slug]`) * troca o `` duplicado em cada página por esta classe no `.container` * que já tinham. * * Carrega globalmente em `(public)/layout.tsx`, depois do CSS legado — * mesmo padrão de arquivo de correção de `header-polish.css`. * * O grid de coluna de `.material-box`/`.material-box-item` que morava * aqui saiu — docs/34-AUDITORIA-INTERFACE.md, achados 6/7/8/9: a coluna * do Bootstrap 3 em `.material-box-item` (`col-lg-3`/`col-md-4`/`col-xs-8 * col-xs-offset-2`) sobrevivia ao reset de `width`/`float`/`padding` daqui * porque nada zerava o `margin-left: 16.667%` do `col-xs-offset-2` — * Bootstrap só zera esse offset em `col-md-offset-0` (≥992px), então * abaixo disso o item ficava 100% de largura MAIS 16.667% de margem, * estourando o viewport (medido: +14px em 768px, +44px em 390px). Migrado * pra Tailwind puro: `material-box-item.tsx`/o duplo em `case-view.tsx` * perderam toda classe de coluna do Bootstrap, e cada `.material-box` que * os envolve ganhou `grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4` (+ * `min-[1600px]:grid-cols-5` no desktop bem largo) direto no className — * sem folha nova. Precisava sair daqui, não só ganhar companhia: as * `` deste layout carregam sem `@layer`, e regra sem camada sempre * vence utilitário do Tailwind (que nasce em `@layer utilities`), * `src/app/globals.css:255-275` já documenta o mesmo mecanismo — as * classes `grid-cols-*` novas ficariam mortas se esta folha continuasse * declarando `display:grid`/`grid-template-columns` pro mesmo seletor. */ @media (min-width: 1200px) { .container.container-wide { width: 92%; max-width: var(--content-max-width-wide, 1920px); } } /* Pedido do Gustavo, 2026-09-14: "melhore os espaçamentos e arejamentos * das páginas de arquivos" (`/atlas//...`). Achado ao vivo: o maior * problema não era falta de respiro — era `.material-box-item{min-height: * 519px}` (`atlas.legacy.css`), um chão fixo bem maior que o conteúdo real * do card (imagem + título + 4-6 linhas de tag) nunca precisa, sobrando * ~150-200px de vazio embaixo de cada card e lendo como grade quebrada, não * como espaço intencional — piorou depois do teto de 3 colunas (pedido * separado do Gustavo, `case-result-groups.tsx`): cards mais largos, ainda * mais vazio sobrando. `.box-containers .container-right .material-box * .material-box-item` é a cadeia de seletor específica das grades de * RESULTADO (Atlas/Collections, `docs/34`) — não mexe no `.material-box` * da home (370px, `home.legacy.css`) nem no "Associated Images" do * `/ml/[slug]` (`case-sidebar-polish.css`), escopos próprios, não citados * no pedido. */ .box-containers .container-right .material-box .material-box-item { min-height: 0; } /* Pedido do Gustavo, 2026-09-15: "já pedi isso: todos os cards devem * seguir este padrão" — a cor e o espaçamento das duas linhas de tag do * `MaterialBoxItem` (M/P/Ap/Cd azul, Cm/Df verde) nunca foram globais: * `.text-blue`/`.text-green` e o `display:block` de cada tag (uma por * linha) só existiam em `atlas.legacy.css`/`collections.legacy.css`/ * `view-material.legacy.css` — cada um carregado só na própria página. * Achado ao vivo (screenshot do Gustavo, home): como `home.legacy.css` * nunca definiu nenhum dos dois, os cards da home (Featured/Most Recent) * renderizavam as tags tudo em preto, numa linha corrida sem separação * ("Unalloyed TitaniumP - Blade" grudado). `MaterialBoxItem` virou * componente universal nesta mesma leva de correções — a cor/espaçamento * precisa ser tão universal quanto o componente, não depender de qual * folha vendorizada a página de destino carrega. Movido pra cá (global, * `(public)/layout.tsx`) em vez de duplicar em `home.legacy.css`: mesmos * valores das três folhas de origem, sem ancestral — aplica em qualquer * `MaterialBoxItem`, em qualquer página. */ .text-blue { color: #22ace3; } .text-green { color: #00ca80; } .ml-properties, .image-properties { padding: 10px 0; font-size: 12px; } .ml-properties span, .image-properties span { display: block; } /* Pedido do Gustavo, 2026-09-15: "algo errado nos cards de exibição da * página do Atlas" — screenshot mostrando "From the archive" (modo * navegação do `/atlas`, sem `q`/faceta) com a imagem quadrada (não * circular) e o overlay de hover (olho + views + botão VIEW) sempre * visível, empilhado embaixo da imagem em vez de por cima dela ao * passar o mouse. Mesma família do achado de `.text-blue`/`.text-green` * acima: `.material-box-pic`/`.item-thumb`/`.item-img-ovelay`/ * `.material-box-button` (o mecanismo INTEIRO de imagem circular + * overlay escondido por padrão, só em `:hover`) só existia em * `home.legacy.css` (sem ancestral) e nas versões escopadas * `.box-containers .container-right ...` de `atlas.legacy.css`/ * `collections.legacy.css`/`view-material.legacy.css` — o branch "modo * navegação" do `/atlas` (`atlas/page.tsx`, onde "From the archive" * mora) nunca carregou NENHUMA das duas: só 3 folhas de ícone, sem * `atlas.legacy.css` nem `home.legacy.css`. Sem regra nenhuma pra * `.item-thumb`/`.item-img-ovelay`, o navegador renderiza os dois em * fluxo normal (`display` padrão), exatamente o que o screenshot * mostra. Valores copiados de `home.legacy.css` (a versão sem * ancestral, mais próxima do uso daqui). */ .material-box .material-box-item .material-box-pic { position: relative; } .material-box .material-box-item .material-box-pic:hover .item-thumb { background-color: #000; opacity: 0.65; } .material-box .material-box-item .material-box-pic:hover .item-img-ovelay { display: block; } .material-box .material-box-item .material-box-pic .item-thumb { width: 100%; border-radius: 50%; } .material-box .material-box-item .material-box-pic .item-img-ovelay { font-weight: 800; font-family: 'Helvetica Neue', sans-serif; width: 98%; height: 10%; position: absolute; top: -60px; bottom: 0; margin: auto; display: none; } .material-box .material-box-item .material-box-pic .item-img-ovelay img { width: 50px; } .material-box .material-box-item .material-box-pic .item-img-ovelay span { font-size: 12px; color: #727272; background-color: #fff; border-radius: 50%; padding: 10px 0 0 0; width: 35px; display: inline-block; height: 35px; } .material-box .material-box-item .material-box-pic .item-img-ovelay .material-box-button { margin-top: 5px; } .material-box .material-box-item .material-box-pic .item-img-ovelay .material-box-button a { text-transform: uppercase; font-size: 12px; background: #fff; padding: 9px 25px; border-radius: 30px; color: #727272; } .material-box .material-box-item .material-box-pic .item-img-ovelay .material-box-button a:hover { background: #deff02; } /* Pedido do Gustavo, 2026-09-15: "o card ainda mostra o ML + data numa * cor diferente... quero que siga o padrão cinza claro do card da home * em todo o site" — mesma família dos achados anteriores nesta folha: * `.mb-item-info`/`.title1 span`/`.title2 span` (o cinza claro do * código/data, e o cinza escuro do título) também só existiam em * `home.legacy.css`/nas versões escopadas `.box-containers .container- * right ...`, nunca globais — em qualquer `MaterialBoxItem` fora desses * escopos (From the archive, Associated Images), o código/data caía no * preto padrão do navegador em vez do #c9c9c9 cinza claro. */ .material-box .material-box-item .mb-item-info { margin-top: 15px; } .material-box .material-box-item .mb-item-info .title1 span { color: #c9c9c9; font-size: 13px; } .material-box .material-box-item .mb-item-info .title2 span { font-family: 'Helvetica Neue', sans-serif; font-size: 16px; color: #222; margin-top: 5px; }