/* ========================================================================== SPIPRINT — identidade sobre o template base -------------------------------------------------------------------------- Paleta CMYK, com o preto (Key) como cor principal. Preto (Key) #201F1F principal Ciano #00B0F0 secundária Magenta #ED2790 destaque Amarelo #FFF215 destaque REGRAS DE CONTRASTE (medidas, WCAG AA exige 4,5:1 para texto normal): fundo #201F1F + texto branco ......... 16,44:1 ✔ fundo #00B0F0 + texto #201F1F ........ 6,63:1 ✔ fundo #FFF215 + texto #201F1F ........ 14,06:1 ✔ texto #201F1F sobre branco ........... 16,44:1 ✔ fundo #00B0F0 + texto branco ......... 2,48:1 ✘ fundo #FFF215 + texto branco ......... 1,17:1 ✘ texto #00B0F0 sobre branco ........... 2,48:1 ✘ magenta como fundo, qualquer texto .... < 4,5:1 ✘ Daí o sistema: ciano e amarelo SÓ carregam texto escuro; nunca são usados como cor de texto sobre branco. O magenta não forma par legível com texto nenhum — fica restrito a elementos não textuais (foco, filetes, marca), onde o mínimo é 3:1. Este arquivo não substitui main.css: corrige o que muda quando a cor base deixa de ser clara e passa a ser quase preta. ========================================================================== */ :root { --sp-preto: #201F1F; --sp-ciano: #00B0F0; /* marca: fundos e ícones */ --sp-ciano-texto: #007BA8; /* mesma matiz, escurecida para texto sobre claro */ --sp-magenta: #ED2790; --sp-amarelo: #FFF215; --sp-preto-claro: #353433; /* hover sobre o preto */ --sp-tinta: #201F1F; /* texto sobre ciano e amarelo */ --sp-cinza: #6B6A69; } /* -------------------------------------------------------------------------- 0. Escala neutra da marca -------------------------------------------------------------------------- O template traz títulos em azul-marinho (217 33% 17%) e corpo em cinza azulado. Com o preto #201F1F como cor principal, essa frieza destoa: a marca é neutra, não azulada. Redefinimos os tokens em HSL, no formato que o main.css espera ("H S% L%", sem a função hsl()). -------------------------------------------------------------------------- */ :root { --heading-color: 0 2% 12%; /* #201F1F — o preto da marca */ --body-color: 0 2% 32%; /* mesma matiz, mais claro, para leitura */ } /* -------------------------------------------------------------------------- 1. Fundo preto exige texto branco -------------------------------------------------------------------------- */ .btn--base, .btn--base:focus, .banner-section .banner-btn__link, .btn-outline--base.active, .btn-outline--base:hover, .btn-outline--base:focus { color: hsl(var(--white)) !important; } .btn--base:hover, .banner-section .banner-btn__link:hover { background-color: var(--sp-preto-claro) !important; color: hsl(var(--white)) !important; } .btn--base i, .banner-section .banner-btn__link i { color: inherit !important; } /* -------------------------------------------------------------------------- 2. Fundo ciano e amarelo exigem texto escuro -------------------------------------------------------------------------- */ .btn--base-two, .btn--base-two:focus, .btn-outline--base-two.active, .btn-outline--base-two:hover, .btn-outline--base-two:focus, .features-item.active, .blog-item__date, .bg--base-two { color: var(--sp-tinta) !important; } .btn--base-two:hover { background-color: #0098CE !important; /* ciano um passo mais escuro */ color: var(--sp-tinta) !important; } .btn--base-two i, .blog-item__date i { color: inherit !important; } /* -------------------------------------------------------------------------- 3. Ciano como TEXTO -------------------------------------------------------------------------- O template usa --base-two como cor de texto em quase vinte seletores — inclusive no preço do produto e na palavra destacada do banner. O ciano da marca sobre branco dá 2,48:1 e reprova. Em vez de descartar a cor, escurecemos a MESMA MATIZ (196°) até passar: #00B0F0 L 47% -> 2,48:1 ✘ (marca, para fundos e ícones) #007BA8 L 33% -> 4,77:1 ✔ (texto sobre claro) Assim o texto continua lendo como ciano da identidade, e é legível. -------------------------------------------------------------------------- */ .text--base-two, .banner-section .title-styled, .product-info__price-amount, .alert__title, .alert__desc, .blog-item__title a:hover, .blog-item__title a:focus, .setting-content__preview-url:hover, .contact-info__item:hover .icon, .contact-info__social-item:hover, .contact-info__social-item:focus, .design-area__footer-item:not(.active):hover { color: var(--sp-ciano-texto) !important; } .text--base { color: var(--sp-preto) !important; } /* Sobre fundo escuro, aí sim o ciano cheio funciona (6,63:1). */ .bg--dark .text--base-two, .footer-section .text--base-two, [class*='bg--base'] .text--base-two, .bg--dark .banner-section .title-styled { color: var(--sp-ciano) !important; } /* -------------------------------------------------------------------------- 4. Magenta e amarelo como destaque não textual -------------------------------------------------------------------------- */ .section-heading__title::after, .title-styled__top::before { background-color: var(--sp-magenta) !important; } /* Preço promocional: amarelo de fundo com texto escuro. */ .product-item__price .discount, .badge--sale { background-color: var(--sp-amarelo) !important; color: var(--sp-tinta) !important; } /* -------------------------------------------------------------------------- 5. Acabamento moderno -------------------------------------------------------------------------- */ .btn--base, .btn--base-two, .btn-outline--base, .btn-outline--base-two, .banner-section .banner-btn__link { border-radius: 8px; font-weight: 600; letter-spacing: .2px; transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease; } .btn--base:hover, .btn--base-two:hover, .banner-section .banner-btn__link:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -6px rgba(32, 31, 31, .45); } .product-item, .catalog-item, .blog-item { border-radius: 12px; transition: transform .2s ease, box-shadow .2s ease; } .product-item:hover, .catalog-item:hover, .blog-item:hover { transform: translateY(-3px); box-shadow: 0 14px 32px -18px rgba(32, 31, 31, .40); } /* -------------------------------------------------------------------------- 6. Menu do topo -------------------------------------------------------------------------- O item ativo recebe fundo --base sem definir cor de texto e herdaria o azul escuro dos títulos. Sobre o preto da marca, sumiria. -------------------------------------------------------------------------- */ .header .nav-item .nav-link.active .nav-link__text, .header .nav-item.active .nav-link .nav-link__text { color: hsl(var(--white)) !important; border-radius: 6px; padding-inline: 12px; } .header .nav-item .nav-link:hover:not(.active) .nav-link__text { color: var(--sp-preto) !important; } .header .nav-item .nav-link.active i, .header .nav-item.active .nav-link i { color: inherit !important; } /* -------------------------------------------------------------------------- 7. Acessibilidade -------------------------------------------------------------------------- O magenta é a única cor da paleta que se destaca tanto do branco quanto do preto. Como anel de foco não é texto, o mínimo é 3:1 — e ele passa (3,97:1). -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible { outline: 2px solid var(--sp-magenta); outline-offset: 2px; } /* -------------------------------------------------------------------------- 8. Rodapé -------------------------------------------------------------------------- */ .footer-section a:hover, .footer-item__list-link:hover { color: var(--sp-ciano) !important; } /* -------------------------------------------------------------------------- 9. Detalhes -------------------------------------------------------------------------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #EFEFEE; } ::-webkit-scrollbar-thumb { background: var(--sp-preto); border-radius: 6px; border: 2px solid #EFEFEE; } ::-webkit-scrollbar-thumb:hover { background: var(--sp-preto-claro); } ::selection { background: var(--sp-amarelo); color: var(--sp-tinta); } /* -------------------------------------------------------------------------- Vistos das telas de conta -------------------------------------------------------------------------- O template crava `color: #a1cf9e` em `.account-content__icon` (main.css, linha 9941) — o mesmo verde do fundo da ilustração que acompanha essas telas. Trocada a ilustração para ciano, os três vistos ficavam sendo a única coisa verde da coluna. A cor usada é o ciano ESCURECIDO (#007BA8), não o ciano puro: o visto é um glifo escuro sobre o círculo branco, e ali vale o mínimo de 3:1 para elemento não textual. O ciano puro sobre branco dá 2,48:1; o escurecido dá 4,77:1 e passa com folga. -------------------------------------------------------------------------- */ .account-content__icon { color: var(--sp-ciano-texto); } /* ========================================================================== Correções de layout do cabeçalho — auditoria de 04/09/2026 ========================================================================== Três defeitos que só aparecem no desktop estreito (992–1199 px), que é a largura de notebook e de janela não maximizada. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Palavra quebrando letra por letra no menu -------------------------------------------------------------------------- `body { word-break: break-word }` (main.css, linha 327) é herdado por todo link. Enquanto o item de menu tem folga, ninguém percebe; quando o container aperta, "Início" vira "In/í/cio" e "Blog" vira "B/l/o/g". A regra do body NÃO é removida: ela existe para o corpo de texto, onde quebrar uma URL longa é o comportamento certo. O que muda é o escopo — em navegação, botão e rótulo curto, palavra não se parte. -------------------------------------------------------------------------- */ /* `white-space: nowrap` vale só onde o rótulo é curto e a largura é conhecida: navegação e botões do cabeçalho. Estendê-lo a `.btn` inteiro fazia o botão "Ver o que serve no meu veículo" transbordar a própria caixa no seletor da home — botão de ação com frase longa precisa poder quebrar. */ .nav-menu .nav-link, .account-list a, .account-list .btn, .header .btn, .sp-familias__link, .sp-mega__titulo { word-break: keep-all; overflow-wrap: normal; white-space: nowrap; } /* Fora do cabeçalho, a palavra continua inteira — só a FRASE pode quebrar. */ .btn, .sp-card__nome, .sp-veiculo__rotulo, .footer-menu__link { word-break: keep-all; overflow-wrap: normal; } /* -------------------------------------------------------------------------- 2. Cabeçalho sem largura entre 992 e 1199 px -------------------------------------------------------------------------- O `.container` do Bootstrap só chega a 1140 px a partir de 1200 px. Abaixo disso ele trava em 960 px, e dentro deles precisam caber logotipo (180), menu (339), busca (221) e conta (148) — 888 px de conteúdo em 936 de espaço útil. Os itens de menu eram espremidos para 47–66 px cada. O cabeçalho e a barra de famílias passam a usar a largura da janela, com respiro fixo nas bordas. As duas juntas, para não desalinharem. -------------------------------------------------------------------------- */ /* A largura extra vale para a PÁGINA INTEIRA nessa faixa, e não só para o cabeçalho: um cabeçalho mais largo que o conteúdo embaixo dele desalinha tudo. Acima de 1200 px o Bootstrap já dá 1140/1320 px, que é a medida com que o site foi desenhado — ali não se mexe. */ @media (min-width: 992px) and (max-width: 1199px) { .container { max-width: calc(100% - 2rem); } } @media (min-width: 992px) { /* A busca cede espaço primeiro: ela encolhe sem perder função, o menu não. */ .sp-busca { max-width: 280px; margin: 0 16px; } } /* -------------------------------------------------------------------------- Marca do cabeçalho: 10% maior. O template dimensiona a marca por `max-width` em cinco degraus, um por faixa de tela. Mexer só no primeiro deixaria o logotipo maior no desktop e idêntico no celular — a escada existe justamente porque a barra aperta, e ela precisa subir inteira para o crescimento ser proporcional. A ordem aqui não é decorativa. A regra sem media query vale em qualquer largura, então ela vem PRIMEIRO: colocada depois dos degraus, venceria todos eles por ser a última de mesma especificidade. Os degraus seguem em largura decrescente, como no template. O cabeçalho não muda de altura: a 220 px a marca tem 42,5 px de altura, e a barra já tem cerca de 60 px definidos pelos itens de menu. -------------------------------------------------------------------------- */ .header .navbar-brand.logo img { max-width: 220px; } @media screen and (max-width: 1199px) { .header .navbar-brand.logo img { max-width: 198px; } } @media screen and (max-width: 575px) { .header .navbar-brand.logo img { max-width: 165px; } } @media screen and (max-width: 415px) { .header .navbar-brand.logo img { max-width: 143px; } } @media screen and (max-width: 374px) { .header .navbar-brand.logo img { max-width: 132px; } } /* Entre 992 e 1199 px ainda é apertado mesmo com a largura da janela: o respiro dos botões, da busca e dos itens de menu encolhe, nessa ordem. O rótulo dos botões continua escrito — trocar "Entrar" por um ícone economiza 40 px e custa a clareza de onde se entra na conta. */ @media (min-width: 992px) and (max-width: 1199px) { .header .btn { padding: 9px 14px; font-size: 14px; } .sp-busca { max-width: 190px; margin: 0 8px; } .sp-busca__campo { height: 42px; padding: 0 12px; } .nav-menu .nav-link { padding-inline: 8px; font-size: 15px; } .header .navbar-brand.logo img { max-width: 165px; } .account-list { gap: 8px; } } /* Os itens do cabeçalho podem ENCOLHER, mas não podem embrulhar. A primeira tentativa foi deixar a barra quebrar em duas linhas quando não coubesse. O efeito colateral: numa janela em que o menu quase cabe, uma diferença de poucos pixels — a fonte da marca ainda carregando, por exemplo — fazia o cabeçalho dobrar de altura (81 px para 130 px), e a barra de famílias, que gruda logo abaixo dele, descia junto. Um cabeçalho que muda de altura sozinho é pior do que um botão apertado. */ @media (min-width: 992px) { .header .navbar { flex-wrap: nowrap; } .header .navbar > * { min-width: 0; } } /* -------------------------------------------------------------------------- 3. Dois elementos sticky brigando pelo topo -------------------------------------------------------------------------- `.header.fixed-header` (main.css) e `.sp-familias` (spiprint-loja.css) grudavam os dois em `top: 0`. Como a barra de famílias vem depois no DOM e tem z-index maior, ela cobria o cabeçalho: medido em rolagem, `header.getBoundingClientRect().top = -33px`. Agora eles se empilham: o cabeçalho no topo, a barra logo abaixo dele. A altura do cabeçalho é medida em JavaScript e publicada em `--sp-header-h` (spiprint-loja.js), porque ela muda com a largura da janela e com o tamanho do logotipo. O valor abaixo é só o ponto de partida até a medida chegar. O cabeçalho passa a ser sticky SEMPRE, e não a partir de 300 px de rolagem: a busca e o acesso à conta moram nele, e some-los no meio da página é o que fazia a barra de famílias parecer a única navegação do site. -------------------------------------------------------------------------- */ :root { --sp-header-h: 76px; } .header, .header.fixed-header { position: sticky; top: 0; z-index: 60; } /* A animação de descida existia para o momento em que o cabeçalho aparecia do nada aos 300 px. Ele não desaparece mais; a animação viraria um solavanco. */ .header.fixed-header { -webkit-animation: none; animation: none; } @media screen and (max-width: 991px) { /* O template fixava o cabeçalho no celular. `sticky` faz o mesmo sem tirar o elemento do fluxo — e sem exigir compensação de altura no corpo. */ .header.fixed-header { position: sticky; } } /* -------------------------------------------------------------------------- 4. object-fit: fill nas fotos de moldura -------------------------------------------------------------------------- `fill` estica a imagem para preencher a caixa. Enquanto os espaços estão com placeholder na proporção exata, ninguém nota; na primeira foto real com proporção diferente, a peça deforma — e deformar a foto de um produto é deformar o produto. `cover` recorta em vez de esticar, e `aspect-ratio` na caixa garante que o recorte seja sempre o mesmo. -------------------------------------------------------------------------- */ .banner-right__thumb img, .banner-right__demo img, .gallery-thumb__item img, .features-section__thumb-item img, .cta-section__thumb img, .cta-two__thumb img { object-fit: cover; object-position: center; } /* -------------------------------------------------------------------------- 5. A moldura de "seleção" da segunda palavra do H1 -------------------------------------------------------------------------- O template desenha, em volta da segunda palavra do título, uma caixa inclinada com quatro alças — o visual de objeto selecionado num editor. A geometria dela está em PIXELS (`height: calc(100% - 3px)`, `top: -2px`, `--size: 10px`), calibrada para o tamanho de fonte do tema. O H1 do hero tem `font-size: 9.375rem` e `line-height: 0.8`. Com a linha MENOR que a fonte, "100%" é 0,8em — mais curto que as próprias letras. Os 3 px de desconto, que sumiam num título pequeno, viram um corte visível na base da palavra; e as alças, presas a offsets fixos, deixam de encostar nos cantos da caixa. A correção troca pixel por em: a moldura passa a acompanhar o tamanho da fonte em qualquer breakpoint, e as alças passam a ser posicionadas pela própria caixa, e não pelo texto. -------------------------------------------------------------------------- */ .banner-section .title-styled { --size: 0.08em; /* Sem isto, a palavra seguinte encosta na moldura: a caixa avança meio `--size` para fora da palavra, e o espaço normal não dá conta. */ margin-inline-end: 0.1em; } .banner-section .title-styled:before { height: calc(100% + 0.02em); top: -0.07em; } /* As alças passam a morar na mesma caixa da moldura. Antes elas herdavam `inset: 0` — a caixa do TEXTO — e ficavam desencontradas da moldura em qualquer tamanho diferente do original. */ .banner-section .title-styled__top, .banner-section .title-styled__bottom { inset: -0.07em calc(var(--size) / -2) auto; height: calc(100% + 0.02em); } .banner-section .title-styled__top:before, .banner-section .title-styled__top:after, .banner-section .title-styled__bottom:before, .banner-section .title-styled__bottom:after { width: 9px; height: 9px; } .banner-section .title-styled__top:before { top: -4px; left: -4px; } .banner-section .title-styled__top:after { top: -4px; right: -4px; } .banner-section .title-styled__bottom:before { top: auto; bottom: -4px; left: -4px; } .banner-section .title-styled__bottom:after { top: auto; bottom: -4px; right: -4px; } /* -------------------------------------------------------------------------- 6. A faixa de promoção vazia -------------------------------------------------------------------------- `.header-top` é a tarja do tema para anúncio no topo da página. O texto dela nunca foi preenchido, e ela ia ao ar como 20 px de preto sem nada escrito dentro, em cima de todas as páginas do site. Esconder por CSS resolveria o sintoma; o Blade passou a não renderizar o bloco sem texto, que é a correção de verdade. Esta regra fica como rede: se alguém cadastrar só espaço em branco, a tarja não volta. -------------------------------------------------------------------------- */ .header-top:not(:has(.header-top__text:not(:empty))) { display: none; } /* -------------------------------------------------------------------------- 7. Os degraus de espaçamento que faltavam -------------------------------------------------------------------------- As seções da SPIPRINT usam `pt-40`, `pb-40`, `mb-30`, `mb-40` e `mb-50` — vinte ocorrências ao todo. **Nenhuma dessas classes existe.** O template define 30, 60, 80 e 120, e nunca definiu os degraus intermediários. O efeito era invisível na revisão de código e evidente na tela: a seção do carrossel declara `pt-40 pb-40` e ia ao ar SEM espaçamento nenhum, colada na seção automotiva logo abaixo. Como as duas usam o mesmo cinza #F7F6F5, o cartão do carrossel e a faixa do automotivo viravam um bloco cinza só. Os degraus abaixo seguem a mesma progressão responsiva do template: o valor cheio no desktop, um degrau abaixo em tablet, outro em telefone pequeno. -------------------------------------------------------------------------- */ .pt-40 { padding-top: 40px; } .pb-40 { padding-bottom: 40px; } .mb-30 { margin-bottom: 30px; } .mb-40 { margin-bottom: 40px; } .mb-50 { margin-bottom: 50px; } @media screen and (max-width: 991px) { .pt-40 { padding-top: 30px; } .pb-40 { padding-bottom: 30px; } .mb-30 { margin-bottom: 24px; } .mb-40 { margin-bottom: 30px; } .mb-50 { margin-bottom: 36px; } } @media screen and (max-width: 424px) { .pt-40 { padding-top: 24px; } .pb-40 { padding-bottom: 24px; } .mb-30 { margin-bottom: 20px; } .mb-40 { margin-bottom: 24px; } .mb-50 { margin-bottom: 28px; } } /* Duas faixas do mesmo cinza, uma encostada na outra, leem como um bloco só mesmo com respiro entre elas. O filete diz onde uma termina. */ .sp-automotivo { border-top: 1px solid #E7E6E5; border-bottom: 1px solid #E7E6E5; } /* -------------------------------------------------------------------------- 8. A foto do banner preenche o quadro -------------------------------------------------------------------------- O template desenha, atrás da imagem do hero, um retângulo arredondado com um gradiente da cor base (`.banner-right__bg`, `inset: 0`). Ele existia para dar fundo a uma ilustração recortada, com fundo transparente. Com fotografia, esse fundo vira sobra: `.banner-right__thumb` tem `padding-top: 40px` e a imagem tem altura fixa, então o gradiente aparecia como uma faixa cinza acima da foto e, dependendo da proporção, também nas laterais. A correção não mexe na ALTURA do bloco: o quadro continua com os mesmos 740 px (os 40 do respiro mais os 700 da imagem). O que muda é quem ocupa esse espaço — a foto passa a preenchê-lo de ponta a ponta, com o mesmo arredondamento do fundo que ela cobre. `object-fit: cover` recorta o excedente em vez de esticar; sem ele a foto deformaria para caber, e deformar a foto de uma peça é deformar o produto. -------------------------------------------------------------------------- */ .banner-section .banner-right__thumb { padding-top: 0; height: 740px; border-radius: 25px; overflow: hidden; } .banner-section .banner-right__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } @media screen and (max-width: 991px) { .banner-section .banner-right__thumb { height: 620px; } } @media screen and (max-width: 575px) { .banner-section .banner-right__thumb { height: 480px; } } /* -------------------------------------------------------------------------- 9. O título do painel de autenticação, em duas linhas -------------------------------------------------------------------------- O campo `heading` é uma caixa de texto simples no admin, e o Blade imprime com `{{ }}` — que escapa o HTML. Então não dá para pôr um
no conteúdo, e nem se quer: texto de interface não deveria carregar marcação. `pre-line` resolve pelo CSS: a quebra de linha digitada no admin vira quebra na tela, e os espaços em excesso continuam colapsando como sempre. É o que permite "SPIPRINT" ficar sozinho na primeira linha sem tocar no template. -------------------------------------------------------------------------- */ .account-content__title { white-space: pre-line; } /* -------------------------------------------------------------------------- Botão preto, texto branco. A cor base do SPIPRINT é #201F1F — quase preto. O template original foi escrito supondo que a base fosse um acento claro e vivo, então ele pinta fundo na cor base e escreve por cima em tom ESCURO: `--heading-color`, `--dark`, `--black`, `--body-color`. Com a base clara aquilo funcionava. Com a base preta, vira preto no preto. Não é um caso isolado: pega o botão principal do site inteiro (`.btn--base` — "Adicionar ao carrinho", "Pedir agora", "Pagar agora", "Confirmar pagamento"), o botão nativo de escolher arquivo, a paginação, o item ativo da barra lateral do painel, as setas do carrossel e a própria seleção de texto. Todas as regras abaixo foram conferidas uma a uma em main.css: fundo opaco na cor base, texto declarado em tom escuro. O `!important` é necessário porque o template também usa `!important` nessas cores. -------------------------------------------------------------------------- */ .btn--base, .btn--base:hover, .btn--base:focus, .btn--base:focus-visible, .btn--base:active, .btn-outline--base.active, .btn-outline--base:active, .btn-outline--base:hover, .btn-outline--base:focus, .btn-outline--base:focus-visible, .scroll-top, .scroll-top:hover, .scroll-top:focus, .cart-btn:hover, .cart-btn:focus, .social-list__link.active, .social-list__link:hover, .social-list__link:focus, .pagination .page-item.active .page-link, .pagination .page-item .page-link:hover, .slick-arrow, .slick-arrow:hover, .dashboard .sidebar-menu__link.active, .sidebar-collapse__icon, .sidebar-collapse__icon:hover, .setting-sidebar__item.active, .product-info__start-design, .product-info__start-design:hover, .order-management .nav-tabs .btn.active, .product-info__details-tab .btn.active, .banner-section .banner-btn__link, .add-new-product__step-number, .table-dropdown .dropdown-item:active { color: hsl(var(--white)) !important; } /* O botão nativo do `input[type=file]`. O template o pinta de preto e escreve em `--body-color`, os dois com `!important` — daí a mesma especificidade aqui, com o seletor de atributo incluído. */ .form--control[type=file]::file-selector-button, .form-control[type=file]::file-selector-button, .form--control[type=file]::file-selector-button:hover, .form-control[type=file]::file-selector-button:hover { background-color: hsl(var(--base)) !important; color: hsl(var(--white)) !important; border-color: hsl(var(--base)) !important; cursor: pointer; } .form--control[type=file]::-webkit-file-upload-button, .form-control[type=file]::-webkit-file-upload-button, .form--control[type=file]::-webkit-file-upload-button:hover, .form-control[type=file]::-webkit-file-upload-button:hover { background-color: hsl(var(--base)) !important; color: hsl(var(--white)) !important; cursor: pointer; } /* Seleção de texto: fundo na cor base, então o texto selecionado é branco. */ ::selection { background-color: hsl(var(--base)); color: hsl(var(--white)); } ::-moz-selection { background-color: hsl(var(--base)); color: hsl(var(--white)); }