/* Arte Pronta — site público.
Sobrescreve a cor primaria padrao do Vuexy (roxo, definido em
app-assets/css/bootstrap.min.css) para o teal da paleta do Arte Pronta.
O admin NAO carrega este arquivo — mantem o roxo nativo (ver cores-admin.css),
decisao que diferencia visualmente as duas areas.
Fonte da paleta: docs/Arte Pronta/Referências/2026-07-13-inspiracao-visual.md */
:root {
--bs-primary: #2BBFA0;
--bs-primary-rgb: 43, 191, 160;
/* Acento (badges de destaque/promocao no catalogo) */
--arte-pronta-coral: #FF6F61;
--arte-pronta-coral-rgb: 255, 111, 97;
}
/* Corrige colapso do layout publico em telas < 576px (Task 1, follow-up;
revisitado na Fase 11 de responsividade mobile pra cobrir o banner de cookies).
O bootstrap.min.css vendorizado (Bootstrap 5.1.0) define `.container{max-width:0}`
incondicionalmente, so sobrescrito a partir de `@media (min-width:576px)`. O admin nao
sofre com isso porque usa `.container-fluid` no wrapper de conteudo, mas o layout publico
(resources/views/layouts/app.blade.php) envolve o conteudo em `.container` dentro de
`.content`, o rodape (resources/views/partials/footer.blade.php) tambem usa `.container`,
e o banner de consentimento de cookies (partials/cookie-consent.blade.php, fixed-bottom)
igualmente — todos ficam com width ~0 abaixo do breakpoint sm (confirmado via Playwright:
`.container` do banner de cookies media 28px de largura a 390px/320px, com o texto e o
botao "Aceitar" vazando por cima do resto da pagina). Escopo restrito a esses wrappers
do site publico para nao alterar `.container` em nenhum outro lugar do projeto.
Ampliado em 2026-07-20 pra incluir `.navbar-container` (mesmo colapso confirmado via
Playwright: 28px de largura a 375px, quando a classe "container" foi adicionada ao header
pra centralizar as informacoes — ver navbar.blade.php e o "margin-left: auto" logo acima
neste arquivo). */
@media (max-width: 575.98px) {
.content .container,
.footer .container,
#aviso-cookies .container,
.navbar-container.container {
max-width: 100%;
}
}
/* Rodape nao fica colado no fim da viewport em paginas com pouco conteudo (ex.:
pedidos/{id}/confirmacao logo apos o pagamento — achado do usuario 2026-07-21,
confirmado via Playwright simulando conteudo curto: o rodape parava em ~495px de altura
mas a pagina continuava com ~405px de espaco em branco vazio abaixo dele). Causa: o
Vuexy vendorizado ja define `body{min-height:100%}` (via html{height:100%} em
components.min.css), o que faz a `` esticar ate preencher a viewport quando o
conteudo e curto — mas como a `` continua em `display:block` (fluxo normal), nada
dentro dela cresce para acompanhar esse esticamento: o rodape fica onde o conteudo
termina, e a sobra de altura vira espaco vazio DEPOIS do rodape em vez do rodape descer
ate o fim. O mecanismo nativo do Vuexy pra isso (".footer-static .content-area-wrapper"
com altura calc(100vh - navbar - footer) em components.min.css) nao se aplica aqui: o
layout publico (resources/views/layouts/app.blade.php) usa `.content-wrapper` puro, sem
a classe `.content-area-wrapper` que esse calculo exige. Fix classico de sticky footer
via flexbox na ``, com a area de conteudo crescendo (`flex: 1 0 auto`) pra empurrar
o rodape pro fim. Escopado a `body.footer-static` (classe presente no `` do layout
publico) — seguro mesmo que o admin use a mesma classe, pois cores-publico.css nao e
carregado no admin (ver comentario no topo deste arquivo). */
body.footer-static {
display: flex;
min-height: 100vh;
flex-direction: column;
}
body.footer-static > .app-content.content {
flex: 1 0 auto;
}
body.footer-static > .footer {
flex-shrink: 0;
}
/* Logo do card de login/cadastro (Fase 11, responsividade mobile). A tag
em resources/views/auth/{login,cadastro}.blade.php mantem o aspect ratio original do
arquivo (846x150), rendendo ~338px de largura sempre que height=60 — largura fixa que
independe do viewport. O .card-body de .auth-basic cabe essa largura em telas >= ~424px,
mas abaixo disso (confirmado via Playwright em 390px e 320px) a imagem vaza pra fora do
card (fica invisivel por causa do `body{overflow-x:hidden}` global, mas corta visualmente
o final da palavra "Pronta"). Escopo restrito ao breakpoint sm pra nao alterar o tamanho
da logo em telas maiores, onde ela ja cabe do jeito que foi desenhada (height=60 fixo). */
@media (max-width: 575.98px) {
.auth-wrapper .brand-logo img {
max-width: 100%;
height: auto;
}
}
/* bootstrap.min.css grava .btn-primary/.btn-outline-primary/a{color} com um hex
fixo em vez de referenciar var(--bs-primary) — redefinir a variavel acima nao
e suficiente para essas classes. Overrides explicitos abaixo, incluindo
hover/focus/active para nao "piscar" na interacao.
!important e necessario: colors.min.css (carregado antes deste arquivo) ja
declara .btn-primary/.btn-outline-primary com !important no hex roxo nativo,
entao sem !important aqui o roxo do colors.min.css vence mesmo carregando
por ultimo — !important sempre bate especificidade/ordem de cascata. */
.btn-primary,
.btn-primary:focus,
.btn-primary:hover {
background-color: #2BBFA0 !important;
border-color: #2BBFA0 !important;
color: #FFF !important;
}
.btn-primary:hover {
background-color: #23A88C !important;
border-color: #1F9880 !important;
}
.btn-primary:focus,
.btn-check:checked + .btn-primary:focus,
.btn-check:focus + .btn-primary,
.btn-primary.active:focus,
.btn-primary:active:focus,
.show > .btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .5) !important;
}
.btn-outline-primary {
color: #2BBFA0 !important;
border-color: #2BBFA0 !important;
}
.btn-outline-primary:hover,
.btn-check:checked + .btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show,
.btn-outline-primary:active {
color: #FFF !important;
background-color: #2BBFA0 !important;
border-color: #2BBFA0 !important;
}
.btn-outline-primary:focus,
.btn-check:checked + .btn-outline-primary:focus,
.btn-check:focus + .btn-outline-primary,
.btn-outline-primary.active:focus,
.btn-outline-primary.dropdown-toggle.show:focus,
.btn-outline-primary:active:focus,
.btn-outline-primary:focus {
box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .5) !important;
}
/* Achado (Importante) do review cruzado de UX/acessibilidade (2026-07-22): navegação por
teclado (Tab) não mostrava indicador de foco visível em botões/links fora do
.btn-primary/.btn-outline-primary (ex: .btn-outline-secondary, .btn-outline-danger, os
do menu/rodapé) -- falha de WCAG 2.4.7. O Vuexy vendorizado zera outline/box-shadow
sem repor nada; regra genérica via :focus-visible cobre o que os overrides acima (que
já existiam só pro primary) não cobriam, sem alterar a aparência de mouse/toque (só
dispara quando o foco vem do teclado). */
a:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
outline: .15rem solid #2BBFA0 !important;
outline-offset: .1rem;
}
a {
color: #2BBFA0;
}
/* Rodape (spec backlog 2026-07-19): fundo alterado para cinza medio
rgb(102,102,102), pedido do usuario. `.footer-light` do Vuexy e o `text-muted`/
cor de link herdada do `a{color}` acima (teal, pensado pra fundo claro) ficam
com contraste ruim nesse fundo escuro — overrides de texto/link em branco
escopados a `.footer` abaixo substituem a regra teal que havia aqui antes
(o `.footer .nav-link` tinha especificidade maior que `a` e vencia o roxo
nativo do Vuexy; agora cumpre o mesmo papel de "vencer a cascata", so que em
branco em vez de teal, e junto com `.footer a` cobre tambem os links fora do
`