/** Shopify CDN: Minification failed
Line 345:50 Expected identifier but found whitespace
Line 345:67 Unexpected "6"
**/
/* ==========================================================================
GVSX Mod — Modo claro (light mode)
Arquivo: assets/gvsx-light-mode.css
Tema: Shrine Pro 1.3.0
Revisao 17 — o brilho dos titulos passa a aparecer tambem no modo
escuro. Ele sempre rodou la; era invisivel porque a faixa era branca
sobre texto branco. Agora a cor da faixa e escolhida por contraste com
a cor do texto, e nao por modo.
Da rev.12: grades laterais no lugar dos orbes (removidos), brilho nas
palavras em destaque dos titulos, icone de chat no botao flutuante e a
sombra da imagem do produto.
Historico do "sombra cortada", que teve tres causas somadas:
1. empilhamento — secoes posicionadas pintando por cima (rev.7);
2. fundos opacos redundantes das secoes (rev.8);
3. overflow: hidden nas proprias secoes .gvsx- e nos carrosseis (rev.9
e rev.10), que recortava a sombra dos cards de dentro.
Diagnosticada e conferida no DOM da loja publicada + export de 09/09/2026.
ATENCAO AO NOME DO ARQUIVO
Ate a revisao 5 este arquivo mexia SO no modo claro. A partir da 6 ele
tambem carrega regras do modo escuro e regras comuns aos dois, entao o
nome "light-mode" ficou estreito. Mantive o nome para voce nao precisar
editar o theme.liquid de novo; se preferir renomear, lembre de atualizar
a linha {{ 'gvsx-light-mode.css' | asset_url | stylesheet_tag }}.
ORGANIZACAO
PARTE A (blocos 1-10) modo claro — html[data-gvsx-theme='light']
PARTE B (blocos 11-12) os dois modos — sem condicao
PARTE C (bloco 13) modo escuro — html:not([data-gvsx-theme='light'])
COMO REVERTER
Apagar este arquivo e as 3 linhas inseridas em theme.liquid /
header.liquid. Continua sendo isso, mesmo com as partes B e C.
ESPECIFICIDADE
O tema declara as cores em ':root' (0,1,0). Aqui usamos
'html[data-gvsx-theme=...]' (0,1,1), que vence por especificidade,
independente da ordem de carregamento.
Os !important do arquivo estao todos justificados no comentario ao lado.
Sao dois motivos, e nenhum deles e "para forcar":
- o valor concorrente tambem e !important (bloco 4.3b, que vem do seu
proprio Liquid personalizado do ticker);
- o valor concorrente esta no atributo style= do elemento, e
declaracao inline so perde para !important do autor (bloco 5.1, o
canvas das particulas; bloco 8, o titulo com destaque; e o z-index
do canvas no bloco 12.0).
INDICE
PARTE A — modo claro
1 Tokens do modo claro (cores, elevacao e vidro)
2 Paleta base do tema
3 Botao de alternancia
4 Superficies, elevacao e vidro nas secoes nativas
5 Hero de video + particulas flutuantes
6 Secoes em Liquid personalizado (.gvsx-)
7 Contador (.gvsx-cd) e faixa de prazo (.gvsx-pdp)
8 Titulos com destaque branco
9 Logo
10 Verificado e nao alterado
PARTE B — os dois modos
11 Cards do Trustpilot com a mesma altura
12 Empilhamento (glow por cima da secao de baixo) e movimento
14 Grades laterais (estilo AbacatePay)
16 Brilho passando nos titulos
17 Botao flutuante: icone de chat
15 Pagina de produto: sombra na imagem e nos botoes
PARTE C — modo escuro
13 Sombra verde
========================================================================== */
/* ##########################################################################
PARTE A — MODO CLARO
Tudo daqui ate o bloco 10 depende de html[data-gvsx-theme='light'].
########################################################################## */
/* ==========================================================================
1. TOKENS DO MODO CLARO
Um lugar so para ajustar a "temperatura" do tema claro. Mudou aqui,
mudou no site inteiro.
========================================================================== */
html[data-gvsx-theme='light'] {
/* Fundo da pagina e das secoes. NAO e branco puro de proposito:
#FFFFFF em tela cheia cansa a vista e nao deixa nada "subir". */
--gvsx-l-page: #f4f5f4;
/* Superficie dos blocos que ficam por cima do fundo */
--gvsx-l-surface: #ffffff;
--gvsx-l-surface-2: #fafbfa;
/* Linhas e bordas — cinza levemente esverdeado, combina com a marca */
--gvsx-l-line: rgba(16, 24, 20, 0.11);
--gvsx-l-line-soft: rgba(16, 24, 20, 0.06);
/* Texto. O "muted" foi calibrado em 0.62 e nao no 0.55 do original:
abaixo disso o texto secundario cai para 4,4:1 e reprova no WCAG AA.
O "faint" e so para elemento decorativo (o ":" do relogio). */
--gvsx-l-ink: #1a1a1a;
--gvsx-l-muted: rgba(16, 24, 20, 0.62);
--gvsx-l-faint: rgba(16, 24, 20, 0.45);
/* Verde da marca em versao legivel sobre claro.
#00E676 sobre #F4F5F4 da 1,6:1 e some. #00781C da 5,4:1 (WCAG AA). */
--gvsx-l-green: #00781c;
--gvsx-l-green-rgb: 0, 120, 28;
/* --- ELEVACAO ---
Tres niveis. Cada sombra e composta por camadas com raios diferentes:
uma curta de contato, uma media que da corpo e (no nivel flutuante)
uma larguissima que simula luz ambiente. Sombra de uma camada so
sempre parece adesivo colado; e a soma que da a sensacao de altura. */
/* Cor da sombra no modo claro. Na rev.7 foi puxada para um verde de
verdade (0, 105, 42) e as opacidades subiram, a pedido: agora a sombra
le como halo verde, nao como cinza.
Para calibrar sem mexer em mais nada:
- menos verde / mais neutra ..... 16, 24, 20
- verde discreto (rev.6) ........ 10, 46, 24
- verde atual ................... 0, 105, 42
Para mais ou menos intensidade, mexa nas opacidades logo abaixo. */
--gvsx-l-shade: 0, 105, 42;
/* Nivel 1 — blocos de conteudo (cards, itens de FAQ) */
--gvsx-l-shadow: 0 1px 2px rgba(var(--gvsx-l-shade), 0.1), 0 12px 26px -10px rgba(var(--gvsx-l-shade), 0.3);
--gvsx-l-shadow-hi: 0 2px 6px rgba(var(--gvsx-l-shade), 0.12), 0 24px 44px -14px rgba(var(--gvsx-l-shade), 0.4);
/* Nivel 2 — "flutuante": hero, midias, faixas e blocos grandes */
--gvsx-l-float:
0 2px 4px rgba(var(--gvsx-l-shade), 0.1),
0 16px 32px -8px rgba(var(--gvsx-l-shade), 0.28),
0 44px 72px -26px rgba(var(--gvsx-l-shade), 0.44);
--gvsx-l-float-hi:
0 4px 10px rgba(var(--gvsx-l-shade), 0.14),
0 26px 48px -10px rgba(var(--gvsx-l-shade), 0.36),
0 70px 110px -34px rgba(var(--gvsx-l-shade), 0.55);
/* --- LIQUID GLASS ---
Brilho especular no topo: a "borda de luz" que o iOS desenha na quina
superior de cada painel. So aparece sobre superficie colorida ou
escura — sobre branco ele some, entao nao e aplicado nos cards brancos.
Como e inset, tambem fica ESCONDIDO atras de filhos, por
isso nao entra nos containers de midia. */
--gvsx-l-rim: inset 0 1px 0 rgba(255, 255, 255, 0.5);
/* Vidro de verdade (backdrop-filter). Usado com parcimonia: so funciona
onde existe conteudo ATRAS para desfocar, e cada elemento com
backdrop-filter custa uma camada de composicao no navegador. */
--gvsx-l-glass-blur: saturate(180%) blur(18px);
--gvsx-l-glass-edge: rgba(255, 255, 255, 0.6);
}
/* ==========================================================================
2. PALETA BASE DO TEMA
As 8 variaveis das quais todos os esquemas do Shrine derivam
(.color-background-1, .color-background-2, .color-inverse,
.color-accent-1, .color-accent-2).
========================================================================== */
html[data-gvsx-theme='light'] {
--color-base-text: 26, 26, 26;
--color-shadow: 16, 24, 20;
/* Fundo 1 = fundo da pagina (cinza), nao mais branco */
--color-base-background-1: 244, 245, 244;
/* Fundo 2 passa a ser o BRANCO. No modo escuro ele era #f3f3f3 e servia
de "ilha clara"; no modo claro o papel se inverte e ele vira a
superficie elevada. Isso conserta de quebra o contraste das paginas
/search, /404, blog e lista de colecoes. */
--color-base-background-2: 255, 255, 255;
--color-base-solid-button-labels: 255, 255, 255;
/* Links e botoes outline: #00BC0D sobre claro da 2,4:1 e reprova. */
--color-base-outline-button-labels: 0, 120, 28;
/* Verde dos botoes solidos — mantido, e a cor da marca (5,4:1) */
--color-base-accent-1: 0, 120, 28;
/* Acento 2: #00AFC7 com rotulo branco da 2,6:1 e reprova */
--color-base-accent-2: 0, 128, 143;
--gradient-base-background-1: #f4f5f4;
--gradient-base-background-2: #ffffff;
--payment-terms-background-color: #f4f5f4;
}
/* --gradient-base-accent-1 (#00781C) e --gradient-base-accent-2 (o gradiente
azul/verde) nao sao tocados: funcionam nos dois modos. */
/* ==========================================================================
3. BOTAO DE ALTERNANCIA (vale nos DOIS modos)
========================================================================== */
.header__icon--gvsx-theme {
background: none;
border: none;
cursor: pointer;
font: inherit;
}
.header__icon--gvsx-theme .icon {
stroke: currentColor;
fill: none;
}
/* Modo escuro mostra o sol (= clique para clarear) */
.header__icon--gvsx-theme .icon-gvsx-moon {
display: none;
}
/* Modo claro mostra a lua (= clique para escurecer) */
html[data-gvsx-theme='light'] .header__icon--gvsx-theme .icon-gvsx-sun {
display: none;
}
html[data-gvsx-theme='light'] .header__icon--gvsx-theme .icon-gvsx-moon {
display: block;
}
/* ==========================================================================
4. SUPERFICIES E SOMBRAS DAS SECOES NATIVAS
Com o fundo cinza, os cards do proprio Shrine precisam voltar ao branco
para continuarem se destacando.
========================================================================== */
/* Cards de produto e de colecao. Em settings_data.json card_style = "card",
entao quem carrega o esquema de cor e o elemento .card--card. */
html[data-gvsx-theme='light'] .card--card,
html[data-gvsx-theme='light'] .card--standard .card__inner {
--color-background: 255, 255, 255;
--gradient-background: #ffffff;
}
/* O tema ja desenha a sombra dos cards com --color-shadow e
card_shadow_opacity = 10%, entao ela aparece sozinha no modo claro. */
/* ---- 4.1 Cabecalho: barra apoiada sobre o conteudo ---- */
html[data-gvsx-theme='light'] .header-wrapper {
border-bottom: 1px solid var(--gvsx-l-line-soft);
box-shadow: 0 1px 0 rgba(var(--gvsx-l-shade), 0.05), 0 10px 28px -14px rgba(var(--gvsx-l-shade), 0.24);
}
/* ==========================================================================
4.2 BLOCOS FLUTUANTES: midia
Estes elementos tem como filho ocupando 100% da caixa,
entao NAO levam o brilho especular (o inset ficaria escondido atras da
midia) — so a sombra de tres camadas.
ATENCAO — dois problemas reais, diagnosticados no DOM da loja publicada
(rev.5). Na revisao 4 a sombra da midia e do hero simplesmente nao
aparecia, por motivos DIFERENTES:
a) HERO. A sombra estava em .hero-slide__background, que fica DENTRO de
.parallax-hero — e esse pai tem overflow:hidden. overflow corta a
sombra dos DESCENDENTES, entao ela nunca era desenhada.
Solucao: aplicar a sombra no proprio .parallax-hero. O overflow de um
elemento nao corta a sombra DELE MESMO, e a geometria e a mesma
(mesma caixa, mesmo raio de 22px, e o pai .shopify-section nao corta).
b) MIDIA DO MULTIROW. O tema tem em base.css:
.image-with-text:not(.image-with-text--overlap)
.image-with-text__media-item > * { box-shadow: none; }
Especificidade (0,3,0). A regra da rev.4 tinha (0,2,1) e PERDIA.
Solucao: subir a especificidade para (0,4,1) percorrendo a mesma
estrutura. Sem !important.
========================================================================== */
html[data-gvsx-theme='light'] .parallax-hero,
html[data-gvsx-theme='light'] .comparison-slider {
box-shadow: var(--gvsx-l-float);
}
html[data-gvsx-theme='light']
.image-with-text
.image-with-text__media-item
> .image-with-text__media {
box-shadow: var(--gvsx-l-float);
}
/* ==========================================================================
4.3 BLOCOS FLUTUANTES: superficies coloridas
Faixa do ticker (verde), cards do Trustpilot (verde) e o bloco da
newsletter (gradiente). Aqui o fundo do proprio elemento aparece na quina
de cima, entao o brilho especular do liquid glass funciona.
========================================================================== */
html[data-gvsx-theme='light'] .horizontal-ticker,
html[data-gvsx-theme='light'] .trustpilot-review,
html[data-gvsx-theme='light'] .newsletter__wrapper {
box-shadow: var(--gvsx-l-rim), var(--gvsx-l-float);
}
html[data-gvsx-theme='light'] .trustpilot-review:hover {
box-shadow: var(--gvsx-l-rim), var(--gvsx-l-float-hi);
}
/* Elevacao no hover dos blocos que flutuam (o movimento em si esta no
bloco 12, que vale nos dois modos) */
html[data-gvsx-theme='light'] .parallax-hero:hover,
html[data-gvsx-theme='light'] .comparison-slider:hover,
html[data-gvsx-theme='light']
.image-with-text
.image-with-text__media-item
> .image-with-text__media:hover {
box-shadow: var(--gvsx-l-float-hi);
}
/* ---- 4.3b Destravando os cortes que escondiam essas duas sombras ----
TICKER. A secao que envolve a faixa recebe overflow:hidden do SEU proprio
Liquid personalizado (bloco "ARREDONDAMENTO REFORCADO do ticker"), com
!important. Isso cortava a sombra da faixa.
O clipe da secao e redundante: a propria .horizontal-ticker ja tem
border-radius 22px + overflow:hidden, que e o que arredonda a faixa.
Por isso da para liberar a secao sem perder o arredondamento. Precisa de
!important porque o valor concorrente tambem e !important.
TRUSTPILOT. Os cards ficam dentro de .splide__track, que tem
overflow:hidden (necessario para o carrossel) e altura exatamente igual a
dos cards — a sombra de baixo era cortada rente.
Em vez de desligar o clipe (o que quebraria o carrossel), aumentamos a
area de recorte com padding vertical e devolvemos o espaco com margin
negativa. O layout fica identico, o recorte lateral do carrossel continua
funcionando e a sombra passa a caber.
Escopo restrito ao carrossel do Trustpilot: conferido que o outro
carrossel da loja (colecao em destaque) ja tem overflow:visible e nao
precisa disso. */
Estas duas regras NAO sao presas ao modo claro: desde a revisao 6 o modo
escuro tambem tem sombra (verde), entao os dois precisam do espaco. */
.shopify-section:has(.horizontal-ticker) {
overflow: visible !important;
}
/* QUANTO ESPACO E PRECISO
Uma sombra se estende para baixo em: deslocamento + desfoque/2 + spread.
Nos carrosseis o pior caso e o hover:
claro 0 70px 110px -34px -> 70 + 55 - 34 = 91px
escuro 0 66px 104px -38px -> 66 + 52 - 38 = 80px
O valor abaixo e 180px, o dobro do pior caso. Nao e desperdicio: como o
padding e devolvido por margin negativa, a altura final da secao nao
muda nem um pixel — sobra so area de recorte. Preferi folga grande a
ficar calibrando no limite, porque se voce aumentar as sombras depois,
isso continua funcionando sem precisar voltar aqui.
Se algum dia mexer nas sombras, a conta e a de cima. */
.trustpilot-reviews .splide__track {
padding-top: 40px;
padding-bottom: 180px;
margin-top: -40px;
margin-bottom: -180px;
}
/* ---- 4.4 VIDRO DE VERDADE (backdrop-filter) ----
Aplicado so em elementos que ficam POR CIMA de outro conteudo, unico
caso em que o desfoque tem o que desfocar:
- os rotulos "Original" / "GVSX Mod", que flutuam sobre as fotos;
- o botao de voltar ao topo, que flutua sobre a pagina.
O verde da marca e mantido, so fica translucido. */
html[data-gvsx-theme='light'] .comparison-slider__before-text,
html[data-gvsx-theme='light'] .comparison-slider__after-text {
background-color: rgba(var(--gvsx-l-green-rgb), 0.68);
-webkit-backdrop-filter: var(--gvsx-l-glass-blur);
backdrop-filter: var(--gvsx-l-glass-blur);
box-shadow: var(--gvsx-l-rim), 0 6px 18px -6px rgba(var(--gvsx-l-shade), 0.42);
}
html[data-gvsx-theme='light'] .scroll-to-top-btn {
background-color: rgba(255, 255, 255, 0.55);
-webkit-backdrop-filter: var(--gvsx-l-glass-blur);
backdrop-filter: var(--gvsx-l-glass-blur);
border: 1px solid var(--gvsx-l-glass-edge);
box-shadow: var(--gvsx-l-rim), 0 8px 22px -6px rgba(var(--gvsx-l-shade), 0.32);
color: var(--gvsx-l-ink);
}
/* Navegador sem backdrop-filter (ou com transparencia reduzida no sistema):
os mesmos elementos viram superficie solida, para o texto nunca ficar
ilegivel por cima da foto. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html[data-gvsx-theme='light'] .comparison-slider__before-text,
html[data-gvsx-theme='light'] .comparison-slider__after-text {
background-color: var(--gvsx-l-green);
}
html[data-gvsx-theme='light'] .scroll-to-top-btn {
background-color: #ffffff;
}
}
@media (prefers-reduced-transparency: reduce) {
html[data-gvsx-theme='light'] .comparison-slider__before-text,
html[data-gvsx-theme='light'] .comparison-slider__after-text {
background-color: var(--gvsx-l-green);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
html[data-gvsx-theme='light'] .scroll-to-top-btn {
background-color: #ffffff;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
/* ==========================================================================
5. HERO DE VIDEO (secao parallax-hero)
O video e escuro e tem overlay preto a 25%. Sem isto, no modo claro o
texto ficaria quase preto sobre video escuro.
========================================================================== */
html[data-gvsx-theme='light'] .hero-slide__content {
--color-foreground: 255, 255, 255;
}
/* ==========================================================================
5.1 PARTICULAS FLUTUANTES NO MODO CLARO
Diagnostico (encontrado no DOM da loja publicada — o efeito nao estava no
export que voce me mandou, foi adicionado depois):
preso ao body, com
position: fixed; z-index: 0; opacity: .45; mix-blend-mode: screen
desenhando pontos em rgba(0,230,118,a) e rgba(0,140,204,a).
Por que sumiam no claro: 'screen' e um modo de mesclagem que SO CLAREIA.
A conta e resultado = 1 - (1-fundo)(1-particula). Sobre fundo quase
preto, a particula verde clareia e aparece. Sobre fundo quase branco, o
resultado tende a 1 (branco) qualquer que seja a cor — ou seja, some.
Nao e questao de opacidade nem de z-index: e matematica do blend.
Correcao: no modo claro trocar para 'multiply', que e o espelho de
'screen' (so escurece). A particula verde passa a escurecer o fundo
claro na direcao do verde, e reaparece com a mesma identidade.
A opacidade sobe um pouco porque multiply sobre cinza claro rende menos
contraste que screen sobre preto.
O !important e obrigatorio: o script escreve esses valores no atributo
style= do proprio canvas, e inline so perde para !important do autor.
========================================================================== */
html[data-gvsx-theme='light'] #gvsx-particles {
mix-blend-mode: multiply !important;
/* rev.11: subiu de 0.55 para 0.9 e ganhou um filtro que escurece a
particula ANTES de mesclar. Com 'multiply', quanto mais escura a cor,
mais forte o efeito — entao brightness(.7) rende mais contraste que
so aumentar a opacidade. O saturate compensa a perda de vivacidade.
Para calibrar: brightness menor = particula mais forte. */
opacity: 0.9 !important;
filter: saturate(1.3) brightness(0.7);
}
/* ==========================================================================
6. SECOES EM LIQUID PERSONALIZADO (prefixo .gvsx-)
Estas secoes tem cores fixas no CSS proprio e nao respondem as variaveis
do tema. Cada regra abaixo espelha uma regra existente.
========================================================================== */
/* ---- 6.1 Fundo e texto das secoes ---- */
/* Só a cor do texto. O fundo destas seções é deixado transparente no bloco
12.0 para não cobrir o halo da seção vizinha — a cor da página vem do
body, que já é --gvsx-l-page. */
html[data-gvsx-theme='light'] .gvsx-compare,
html[data-gvsx-theme='light'] .gvsx-reviews,
html[data-gvsx-theme='light'] .gvsx-steps,
html[data-gvsx-theme='light'] .gvsx-faq-section {
color: var(--gvsx-l-ink);
}
/* ---- 6.2 Divisores e halos decorativos ----
As linhas de 1px e o halo radial usam verde a 4%–20% de alfa. Sobre preto
isso brilha; sobre claro desaparece. Alfa aumentado e verde escurecido. */
html[data-gvsx-theme='light'] .gvsx-steps::before,
html[data-gvsx-theme='light'] .gvsx-reviews::before,
html[data-gvsx-theme='light'] .gvsx-faq-section::before {
background: linear-gradient(90deg, transparent, rgba(var(--gvsx-l-green-rgb), 0.38), transparent);
}
html[data-gvsx-theme='light'] .gvsx-compare::before {
background: radial-gradient(circle, rgba(var(--gvsx-l-green-rgb), 0.07) 0%, transparent 70%);
}
html[data-gvsx-theme='light'] .gvsx-compare-footer-glow {
background: linear-gradient(90deg, transparent, rgba(var(--gvsx-l-green-rgb), 0.55), transparent);
}
html[data-gvsx-theme='light'] .gvsx-step-icon-glow {
background: radial-gradient(circle, rgba(var(--gvsx-l-green-rgb), 0.16) 0%, transparent 70%);
}
/* ---- 6.3 Verde usado como TEXTO ---- */
html[data-gvsx-theme='light'] .gvsx-compare-badge,
html[data-gvsx-theme='light'] .gvsx-compare-title span,
html[data-gvsx-theme='light'] .gvsx-compare-row-header .gvsx-compare-us,
html[data-gvsx-theme='light'] .gvsx-compare-footer h3 span,
html[data-gvsx-theme='light'] .gvsx-check,
html[data-gvsx-theme='light'] .gvsx-reviews-badge,
html[data-gvsx-theme='light'] .gvsx-reviews-count strong,
html[data-gvsx-theme='light'] .gvsx-review-verified,
html[data-gvsx-theme='light'] .gvsx-reviews-btn:hover,
html[data-gvsx-theme='light'] .gvsx-steps-badge,
html[data-gvsx-theme='light'] .gvsx-faq-badge,
html[data-gvsx-theme='light'] .gvsx-faq-item.gvsx-faq-open .gvsx-faq-question,
html[data-gvsx-theme='light'] .gvsx-faq-icon-q,
html[data-gvsx-theme='light'] .gvsx-faq-answer-inner strong {
color: var(--gvsx-l-green);
}
/* Os icones dos cards de "Como funciona" trazem stroke="#00e676" como
atributo do — sao os unicos do tema com cor fixa no proprio SVG
(conferido: as outras secoes usam currentColor). Atributo de apresentacao
perde para qualquer regra CSS, entao uma linha basta. */
html[data-gvsx-theme='light'] .gvsx-step-icon svg {
stroke: var(--gvsx-l-green);
}
/* ---- 6.4 Textos que eram #fff ---- */
html[data-gvsx-theme='light'] .gvsx-compare-label,
html[data-gvsx-theme='light'] .gvsx-review-title,
html[data-gvsx-theme='light'] .gvsx-review-name,
html[data-gvsx-theme='light'] .gvsx-reviews-btn,
html[data-gvsx-theme='light'] .gvsx-step-name,
html[data-gvsx-theme='light'] .gvsx-faq-question {
color: var(--gvsx-l-ink);
}
html[data-gvsx-theme='light'] .gvsx-compare-us {
color: rgba(16, 24, 20, 0.85);
}
html[data-gvsx-theme='light'] .gvsx-compare-them {
color: var(--gvsx-l-muted);
}
/* ---- 6.5 BLOCOS: superficie branca + sombra ----
Onde o original usava um veu branco sobre preto, no claro entra
superficie solida com elevacao. E o "sombra abaixo de cada bloco". */
html[data-gvsx-theme='light'] .gvsx-review-card,
html[data-gvsx-theme='light'] .gvsx-step-card,
html[data-gvsx-theme='light'] .gvsx-faq-item {
background: var(--gvsx-l-surface);
border-color: var(--gvsx-l-line);
box-shadow: var(--gvsx-l-shadow);
}
/* A tabela comparativa e um bloco grande e unico: vai para o nivel
flutuante, junto com o hero e as midias. */
html[data-gvsx-theme='light'] .gvsx-compare-table {
background: var(--gvsx-l-surface);
border-color: var(--gvsx-l-line);
box-shadow: var(--gvsx-l-float);
}
html[data-gvsx-theme='light'] .gvsx-step-card:hover,
html[data-gvsx-theme='light'] .gvsx-review-card:hover,
html[data-gvsx-theme='light'] .gvsx-faq-item:hover {
background: var(--gvsx-l-surface);
border-color: rgba(var(--gvsx-l-green-rgb), 0.28);
box-shadow: var(--gvsx-l-shadow-hi);
}
html[data-gvsx-theme='light'] .gvsx-faq-item.gvsx-faq-open {
background: var(--gvsx-l-surface);
border-color: rgba(var(--gvsx-l-green-rgb), 0.35);
box-shadow: var(--gvsx-l-shadow-hi);
}
/* Divisorias internas da tabela comparativa */
html[data-gvsx-theme='light'] .gvsx-compare-row {
border-bottom-color: var(--gvsx-l-line-soft);
}
html[data-gvsx-theme='light'] .gvsx-compare-icon {
background: rgba(16, 24, 20, 0.05);
}
html[data-gvsx-theme='light'] .gvsx-review-author {
border-top-color: var(--gvsx-l-line-soft);
}
html[data-gvsx-theme='light'] .gvsx-faq-cta-wrap {
border-top-color: var(--gvsx-l-line-soft);
}
html[data-gvsx-theme='light'] .gvsx-reviews-btn {
background: var(--gvsx-l-surface);
border-color: var(--gvsx-l-line);
box-shadow: var(--gvsx-l-shadow);
}
html[data-gvsx-theme='light'] .gvsx-faq-plus::before,
html[data-gvsx-theme='light'] .gvsx-faq-plus::after {
background: var(--gvsx-l-muted);
}
html[data-gvsx-theme='light'] .gvsx-faq-item.gvsx-faq-open .gvsx-faq-plus::before {
background: var(--gvsx-l-green);
}
/* ---- 6.6 TINTES VERDES reforcados ----
Todos usavam a base 0,230,118 com alfa baixo, calibrada para brilhar
sobre preto. Trocada pela base escura 0,120,28 com alfa maior. */
html[data-gvsx-theme='light'] .gvsx-steps-badge,
html[data-gvsx-theme='light'] .gvsx-faq-badge,
html[data-gvsx-theme='light'] .gvsx-reviews-badge,
html[data-gvsx-theme='light'] .gvsx-compare-badge {
background: rgba(var(--gvsx-l-green-rgb), 0.1);
border-color: rgba(var(--gvsx-l-green-rgb), 0.3);
}
/* Numeros gigantes 01–04 atras dos cards: 8% de verde claro some
completamente sobre branco. */
html[data-gvsx-theme='light'] .gvsx-step-number {
color: rgba(var(--gvsx-l-green-rgb), 0.18);
}
html[data-gvsx-theme='light'] .gvsx-step-card:hover .gvsx-step-number {
color: rgba(var(--gvsx-l-green-rgb), 0.32);
}
html[data-gvsx-theme='light'] .gvsx-step-icon {
background: rgba(var(--gvsx-l-green-rgb), 0.1);
border-color: rgba(var(--gvsx-l-green-rgb), 0.28);
}
html[data-gvsx-theme='light'] .gvsx-step-card:hover .gvsx-step-icon {
background: rgba(var(--gvsx-l-green-rgb), 0.16);
border-color: rgba(var(--gvsx-l-green-rgb), 0.42);
box-shadow: 0 0 20px rgba(var(--gvsx-l-green-rgb), 0.16);
}
html[data-gvsx-theme='light'] .gvsx-step-dot,
html[data-gvsx-theme='light'] .gvsx-review-dot.active {
background: var(--gvsx-l-green);
box-shadow: 0 0 12px rgba(var(--gvsx-l-green-rgb), 0.4);
}
html[data-gvsx-theme='light'] .gvsx-review-dot {
background: rgba(16, 24, 20, 0.18);
}
html[data-gvsx-theme='light'] .gvsx-check {
background: rgba(var(--gvsx-l-green-rgb), 0.14);
box-shadow: none;
}
html[data-gvsx-theme='light'] .gvsx-cross {
background: rgba(198, 40, 40, 0.1);
color: #c62828;
}
html[data-gvsx-theme='light'] .gvsx-review-verified {
background: rgba(var(--gvsx-l-green-rgb), 0.09);
border-color: rgba(var(--gvsx-l-green-rgb), 0.26);
}
html[data-gvsx-theme='light'] .gvsx-faq-icon-q {
background: rgba(var(--gvsx-l-green-rgb), 0.1);
}
html[data-gvsx-theme='light'] .gvsx-faq-item.gvsx-faq-open .gvsx-faq-icon-q {
background: rgba(var(--gvsx-l-green-rgb), 0.18);
box-shadow: none;
}
html[data-gvsx-theme='light'] .gvsx-reviews-btn:hover {
background: rgba(var(--gvsx-l-green-rgb), 0.1);
border-color: rgba(var(--gvsx-l-green-rgb), 0.35);
box-shadow: var(--gvsx-l-shadow-hi);
}
/* Tabela comparativa: cabecalho, coluna "nos" e coluna "eles" */
html[data-gvsx-theme='light'] .gvsx-compare-row-header {
background: linear-gradient(135deg, rgba(var(--gvsx-l-green-rgb), 0.14) 0%, rgba(0, 90, 140, 0.09) 100%);
}
html[data-gvsx-theme='light'] .gvsx-compare-row:not(.gvsx-compare-row-header):hover {
background: rgba(var(--gvsx-l-green-rgb), 0.05);
}
html[data-gvsx-theme='light'] .gvsx-compare-us {
border-left-color: rgba(var(--gvsx-l-green-rgb), 0.16);
border-right-color: rgba(var(--gvsx-l-green-rgb), 0.16);
background: rgba(var(--gvsx-l-green-rgb), 0.04);
}
/* ---- 6.7 Mobile (max-width 768px) ----
Nessa faixa a tabela muda de layout e o rotulo ganha um veu branco. */
@media (max-width: 768px) {
html[data-gvsx-theme='light'] .gvsx-compare-label {
background: rgba(16, 24, 20, 0.03);
}
html[data-gvsx-theme='light'] .gvsx-compare-us {
border-left-color: rgba(var(--gvsx-l-green-rgb), 0.45);
}
html[data-gvsx-theme='light'] .gvsx-compare-them {
border-left-color: rgba(198, 40, 40, 0.3);
}
}
/* ==========================================================================
7. CONTADOR DE PRECO (.gvsx-cd) E FAIXA DE PRAZO (.gvsx-pdp)
Estas duas ja declaram variaveis proprias, entao a maior parte do trabalho
e so trocar o valor delas.
========================================================================== */
/* ---- 7.1 Contador / cupom do Discord (home) ---- */
html[data-gvsx-theme='light'] .gvsx-cd {
--cd-base: var(--gvsx-l-page);
--cd-surface: var(--gvsx-l-surface);
--cd-hair: var(--gvsx-l-line);
--cd-muted: var(--gvsx-l-muted);
}
html[data-gvsx-theme='light'] .gvsx-cd__card {
background:
radial-gradient(120% 140% at 50% 0%, rgba(var(--gvsx-l-green-rgb), 0.07), rgba(0, 0, 0, 0) 62%),
var(--gvsx-l-surface);
border-color: rgba(var(--gvsx-l-green-rgb), 0.2);
box-shadow: var(--gvsx-l-float-hi);
}
/* Verde como texto */
html[data-gvsx-theme='light'] .gvsx-cd__badge,
html[data-gvsx-theme='light'] .gvsx-cd__title span,
html[data-gvsx-theme='light'] .gvsx-cd__tile--sec .gvsx-cd__num,
html[data-gvsx-theme='light'] .gvsx-cd__now strong {
color: var(--gvsx-l-green);
text-shadow: none;
}
html[data-gvsx-theme='light'] .gvsx-cd__badge {
background: rgba(var(--gvsx-l-green-rgb), 0.1);
border-color: rgba(var(--gvsx-l-green-rgb), 0.3);
}
/* Textos fixos em branco */
html[data-gvsx-theme='light'] .gvsx-cd__title,
html[data-gvsx-theme='light'] .gvsx-cd__num,
html[data-gvsx-theme='light'] .gvsx-cd__btn--ghost {
color: var(--gvsx-l-ink);
}
html[data-gvsx-theme='light'] .gvsx-cd__sep {
color: var(--gvsx-l-faint);
}
/* Blocos do relogio */
html[data-gvsx-theme='light'] .gvsx-cd__tile {
background: var(--gvsx-l-surface-2);
border-color: var(--gvsx-l-line);
box-shadow: var(--gvsx-l-shadow);
}
html[data-gvsx-theme='light'] .gvsx-cd__tile--sec {
background: linear-gradient(180deg, rgba(var(--gvsx-l-green-rgb), 0.12), rgba(var(--gvsx-l-green-rgb), 0.04));
border-color: rgba(var(--gvsx-l-green-rgb), 0.34);
}
html[data-gvsx-theme='light'] .gvsx-cd__btn--ghost {
border-color: var(--gvsx-l-line);
background: var(--gvsx-l-surface);
box-shadow: var(--gvsx-l-shadow);
}
html[data-gvsx-theme='light'] .gvsx-cd__btn--ghost:hover {
border-color: rgba(var(--gvsx-l-green-rgb), 0.45);
background: rgba(var(--gvsx-l-green-rgb), 0.08);
}
html[data-gvsx-theme='light'] .gvsx-cd__arrow {
background: linear-gradient(90deg, rgba(16, 24, 20, 0.12), var(--gvsx-l-green));
}
/* Mantido de proposito: o botao solido (texto #04140A sobre gradiente verde,
11,3:1) funciona nos dois modos. */
/* ---- 7.2 Faixa de prazo da pagina de produto ----
--pdp-green e usada em exatamente 3 lugares (relogio, seta e bolinha) e
os tres precisam escurecer, entao uma linha resolve. */
html[data-gvsx-theme='light'] .gvsx-pdp {
--pdp-green: #00781c;
}
html[data-gvsx-theme='light'] .gvsx-pdp__row {
background: rgba(var(--gvsx-l-green-rgb), 0.07);
border-color: rgba(var(--gvsx-l-green-rgb), 0.28);
box-shadow: var(--gvsx-l-shadow);
}
html[data-gvsx-theme='light'] .gvsx-pdp__row--link:hover {
background: rgba(var(--gvsx-l-green-rgb), 0.12);
border-color: rgba(var(--gvsx-l-green-rgb), 0.45);
}
html[data-gvsx-theme='light'] .gvsx-pdp__label {
color: var(--gvsx-l-muted);
}
/* As letras de unidade ("h", "m") sao texto de verdade, entao usam o tom
secundario e nao o decorativo. */
html[data-gvsx-theme='light'] .gvsx-pdp__time i {
color: var(--gvsx-l-muted);
}
html[data-gvsx-theme='light'] .gvsx-pdp__dot {
box-shadow: 0 0 8px rgba(var(--gvsx-l-green-rgb), 0.5);
}
/* ==========================================================================
8. TITULOS COM DESTAQUE BRANCO
Diagnostico: em sections/multirow.liquid (linha 141) o tema renderiza
e em base.css:
.title-with-highlight strong { color: var(--hightlight-color); }
O titulo "O upgrade grafico que seu EA FC precisa!" esta 100% dentro de
com destaque #ffffff, entao fica branco nos dois modos.
Escurece SOMENTE os destaques configurados como branco. Roxo (#6d388b) e
verde (#00781c) continuam intactos.
O !important e obrigatorio: o valor concorrente esta no atributo style=
do elemento, e declaracao inline so perde para !important do autor.
ALTERNATIVA SEM CODIGO: tirar o negrito do titulo no personalizador.
Em base.css o usa font-weight: var(--font-heading-weight), o
mesmo peso que o ja tem — remover o negrito nao muda nada
visualmente, so devolve o controle da cor ao tema.
========================================================================== */
html[data-gvsx-theme='light'] .title-with-highlight[style*='#ffffff' i] {
--hightlight-color: #1a1a1a !important;
}
/* ==========================================================================
9. LOGO DIFERENTE NO MODO CLARO
========================================================================== */
/* ---- 9.1 Cabecalho ----
CORRECAO (rev.4). Na revisao anterior estas regras escondiam o logo
principal SEMPRE no modo claro. Como o campo "Secondary logo" esta vazio
(conferido no DOM da loja: nao existe .header__heading-logo--secondary),
o resultado era um cabecalho SEM logo nenhum. Era um erro meu.
Agora a troca so acontece se a segunda imagem existir de fato, graças ao
:has(). Sem logo secundario, o principal continua visivel — comportamento
identico ao do tema sem este arquivo.
As duas regras usam :has() de proposito: se algum navegador nao suportar,
ele descarta AS DUAS juntas e cai no comportamento seguro (logo principal
visivel), em vez de mostrar os dois logos ao mesmo tempo.
Para trocar de verdade: Personalizar > Configuracoes do tema > Logo >
Secondary logo, e suba a versao escura. */
html[data-gvsx-theme='light']
.header__heading-link.media:has(.header__heading-logo--secondary)
.header__heading-logo--main {
display: none;
}
html[data-gvsx-theme='light']
.header__heading-link.media:has(.header__heading-logo--secondary)
.header__heading-logo--secondary {
display: inline-block;
}
/* ---- 9.1b Paliativo enquanto nao existe logo escuro ----
O logo atual e feito para fundo escuro: 62% dos pixels opacos sao claros
(media RGB 128,192,151 — verde claro), medido no proprio arquivo. Sobre
#F4F5F4 ele fica lavado.
O filtro abaixo escurece a imagem sem trocar o arquivo. NAO e a solucao
certa (filtro distorce cor de marca), e por isso vem desativado. Se
quiser testar, remova os marcadores de comentario. A solucao correta e
subir um PNG escuro no campo "Secondary logo". */
/*
html[data-gvsx-theme='light']
.header__heading-link.media:not(:has(.header__heading-logo--secondary))
.header__heading-logo--main {
filter: brightness(0.45) saturate(1.6);
}
*/
/* ---- 9.2 Logo do rodape ----
No export de 09/09/2026 o bloco de imagem do rodape (image_pP4kRT) esta
com "disabled": true — a logo do rodape esta DESLIGADA. Enquanto
continuar assim, este bloco nao tem o que fazer.
PARA ATIVAR (se voce reativar o bloco): suba a logo escura em
Conteudo > Arquivos, copie o link, cole no lugar de COLE_AQUI_A_URL e
remova os marcadores de comentario das 6 linhas abaixo. */
/*
html[data-gvsx-theme='light'] .footer-block-image img {
opacity: 0;
}
html[data-gvsx-theme='light'] .footer-block-image .footer-block__image-wrapper {
background: url('COLE_AQUI_A_URL') center / contain no-repeat;
}
*/
/* ==========================================================================
10. VERIFICADO E DELIBERADAMENTE NAO ALTERADO
.gvsx-rgb-wrap / .gvsx-rgb-line (linha RGB abaixo do cabecalho)
Gradiente arco-iris, legivel sobre fundo claro ou escuro.
Secao "newsletter"
Unica secao do tema com esquema "custom" (fundo #ffffff, texto
#0a0a0a). Com o fundo da pagina agora em #F4F5F4, ela passa a se
destacar sozinha como bloco branco.
Rodape: o campo "custom_image_background" esta preenchido, mas o rodape
usa o esquema background-1 — a imagem so seria aplicada com esquema
"custom". Hoje ela nao tem efeito em nenhum dos dois modos.
Preferencia do sistema (prefers-color-scheme)
Nao e tratada aqui. Quem decide o padrao da primeira visita e o script
do theme.liquid, que tem uma linha comentada para isso. Hoje o padrao
e SEMPRE escuro ate o visitante clicar.
========================================================================== */
/* ##########################################################################
PARTE B — REGRAS QUE VALEM NOS DOIS MODOS
Tudo acima depende de html[data-gvsx-theme='light']. Daqui para baixo,
nao. Continua valendo que apagar este arquivo desfaz tudo.
########################################################################## */
/* ==========================================================================
11. CARDS DO TRUSTPILOT COM A MESMA ALTURA
Diagnostico: nao e efeito deste arquivo — e o comportamento padrao do
carrossel do tema. Em base.css:
.splide--ltr .splide__list { align-items: flex-start; }
Com os slides alinhados no topo, cada card fica com a altura do proprio
texto — quem tem uma linha a menos fica mais baixo.
O tema ja tem a solucao pronta para outras secoes:
.grid--stretch ul.splide__list { align-items: stretch; }
.grid--stretch .splide__slide__container { height: 100%; }
mas a secao do Trustpilot nao expoe a opcao "mesma altura" no
personalizador, entao a classe nunca e aplicada.
Abaixo repetimos exatamente o que o .grid--stretch faz, restrito ao
carrossel do Trustpilot. O seletor tem uma classe a mais que o do tema
(0,3,0 contra 0,2,0), entao vence sem depender de ordem de carregamento.
Conferido no DOM da loja: antes 1173/976/995/1011/798 px; depois, os
cinco cards com 1173 px.
========================================================================== */
.trustpilot-reviews .splide .splide__list {
align-items: stretch;
}
.trustpilot-reviews .splide__slide__container {
height: 100%;
}
.trustpilot-reviews .trustpilot-review {
height: 100%;
}
/* ==========================================================================
12. MOVIMENTO: FLUTUACAO CONTINUA + ELEVACAO NO HOVER
Duas camadas de movimento que NAO brigam entre si:
- a flutuacao usa a propriedade 'transform' (via @keyframes);
- o hover usa 'translate' e 'scale', que sao propriedades independentes
e se COMPOEM com o transform da animacao.
Se as duas usassem 'transform', a animacao venceria e o hover nao teria
efeito nenhum. Por isso a separacao.
No hover a flutuacao tambem e pausada (animation-play-state), o que
importa principalmente no comparador antes/depois: ninguem consegue
arrastar direito um elemento que fica subindo e descendo.
As amplitudes e duracoes sao diferentes por elemento e ha atrasos
negativos, para os blocos nao subirem e descerem todos juntos — movimento
sincronizado parece defeito, nao design.
========================================================================== */
/* ==========================================================================
12.0 O GLOW NAO PODE SER COBERTO PELA SECAO DE BAIXO
Diagnostico (medido no DOM da loja): as secoes em Liquid personalizado
(.gvsx-compare, .gvsx-steps, .gvsx-reviews, .gvsx-faq-section) sao
'position: relative' com fundo OPACO #0A0A0A e z-index auto.
Pela ordem de pintura do CSS, elemento posicionado com z-index auto e
pintado na mesma etapa que os demais, e entre iguais vence quem vem
depois no HTML. Ou seja: a secao seguinte pintava por cima do halo que
transbordava da secao anterior — e o glow aparecia cortado numa linha
reta, exatamente onde a proxima secao comeca.
Solucao: colocar os blocos que emitem halo em z-index 2. Como as secoes
estao todas em z-index auto (= 0) no contexto raiz, qualquer coisa em 2
passa a pintar acima de TODAS elas, independente da ordem no HTML.
Por que 2 e nao 999: o cabecalho fixo do tema esta em z-index 5
(conferido na loja). Ficando em 2, o halo passa por cima do conteudo mas
continua por baixo do cabecalho, que e o comportamento correto.
========================================================================== */
/* Camada 1 — o proprio bloco.
Resolve os casos em que nenhum ancestral confina o empilhamento
(hero, ticker, newsletter). */
.parallax-hero,
.image-with-text .image-with-text__media-item > .image-with-text__media,
.comparison-slider,
.horizontal-ticker,
.trustpilot-review,
.newsletter__wrapper,
.gvsx-step-card {
position: relative;
z-index: 2;
}
/* Camada 2 — a secao inteira.
So o bloco nao basta em tres casos, medidos no DOM da loja:
.image-with-text__media fica dentro de .image-with-text__media-item
(z-index 2) e de .image-with-text (filter +
z-index 0);
.comparison-slider fica dentro de .content-and-comparison-slider
(z-index 0);
.trustpilot-review fica dentro de .splide__list (transform).
Cada um desses ancestrais cria um CONTEXTO DE EMPILHAMENTO, e z-index de
filho nao escapa do contexto do pai — o 2 do bloco vale so la dentro,
enquanto o conjunto continua valendo 0 la fora. Por isso a secao inteira
tambem sobe. */
.shopify-section:has(.parallax-hero),
.shopify-section:has(.image-with-text__media),
.shopify-section:has(.comparison-slider),
.shopify-section:has(.horizontal-ticker),
.shopify-section:has(.newsletter__wrapper) {
position: relative;
z-index: 2;
}
/* Camada 3 — TIRAR O CARIMBO OPACO DAS SECOES (rev.8)
z-index sozinho nao resolvia tudo, e o motivo e simples: entre DUAS
secoes que emitem halo, as duas ficam em z-index 2 — e entre iguais
vence quem vem depois no HTML. A secao de baixo continuava carimbando
seu fundo opaco por cima do halo da de cima. Na home isso acontece tres
vezes seguidas: multirow -> comparador -> multirow.
A saida nao e brigar por z-index, e perceber uma coisa que eu medi no
DOM: o fundo dessas secoes e EXATAMENTE a mesma cor do body.
No escuro, body e wrappers de secao pintam rgb(12,12,12); no claro,
ambos pintam a cor da pagina. Ou seja, esses fundos sao redundantes —
estao ali repintando por cima de uma cor identica.
Deixando os wrappers de secao transparentes, a pagina fica visualmente
igual (a mesma cor aparece, vinda do body) e nao existe mais nada opaco
entre um halo e o olho. A sombra fica inteira, independente de ordem no
HTML ou de z-index — que era exatamente o pedido.
Escopo: so wrappers no nivel da secao. Cards nunca sao filhos diretos de
.shopify-section, entao nao sao afetados; ainda assim os dois nomes de
classe de card estao excluidos por seguranca.
Uma nota honesta: as secoes .gvsx- pintavam #0A0A0A e o body pinta
#0C0C0C. Sao 2 pontos de diferenca em 255 — imperceptivel a olho, mas
nao e zero. Se voce notar, e so remover as classes .gvsx- da regra.
========================================================================== */
.shopify-section > .gradient.color-background-1:not(.card--card):not(.card__inner),
.shopify-section > * > .gradient.color-background-1:not(.card--card):not(.card__inner),
.shopify-section > .multirow,
.shopify-section > .content-and-comparison-slider {
background-color: transparent;
}
/* As secoes em Liquid personalizado precisam do 'html' na frente.
MOTIVO — era o bug que deixou faixas escuras no modo claro: o CSS delas
mora num