/* ==========================================================================
vsl.css — o VSL (video sales letter) da AFRITRONIC
--------------------------------------------------------------------------
Pedido do dono, 26/09/2026: «quero que eleve o nivel Futuristicamente com VSL
na pagina! tanto na catalogo mas como na /estoque/ Principalmente».
UMA FOLHA, DUAS PAGINAS. Este ficheiro vive em /estoque/css/ e o catalogo
(raiz) chama-o por caminho absoluto. Nao e' uma dependencia nova: o catalogo
ja' aponta 382 vezes para /estoque/ (a juncao de 25/09). O VIDEO e o POSTER
ficam ao lado dele, em /estoque/imgs/estoque/vsl/.
ADITIVA: reverter = tirar o . Nenhuma regra usa
`!important`.
AUTO-CONTIDO DE PROPOSITO. As duas paginas carregam camadas diferentes — a
loja tem `nivel.css`, o catalogo tem `vitrine.css`. Se este componente
herdasse os tokens de uma delas, partia-se na outra. Por isso define os seus
(`--vsl-*`) com valores literais, iguais aos da lingua da casa (navy #000015,
azul #1A5FFF, verde #34D399). Se amanha a paleta mudar, muda aqui tambem.
O AUTOPLAY E' CONDICIONADO — e essa e' a decisao que importa. O video pesa
3,55 MB. Em Angola os dados moveis sao caros, e um hero que arranca sozinho
gasta o saldo do cliente sem ele pedir. O `app.js` da loja ja' respeita
`saveData`/2G; aqui faz-se o mesmo: o `` NAO tem `autoplay` no HTML —
quem lho poe e' o JS, e so' com ligacao que aguente. Sem isso, o poster e o
botao de play ficam la', e o cliente ve na mesma o que se vende.
Indice:
1. Tokens
2. A seccao (palco + lado do texto)
3. O palco: moldura, brilho, selo «ao vivo», botao de play
4. O lado do texto: titulo, provas, CTA
5. Ecra largo (>=900px): duas colunas
6. Acessibilidade e impressao
========================================================================== */
/* ------------------------------------------------------------- 1. Tokens */
.vsl {
--vsl-navy: #000015;
--vsl-navy-2: #000a30;
--vsl-glass: rgba(0, 12, 40, .72);
--vsl-fio: rgba(0, 64, 224, .20);
--vsl-fio-2: rgba(0, 64, 224, .38);
--vsl-azul: #1A5FFF;
--vsl-azul-2: #7EA2FF;
--vsl-verde: #34D399;
--vsl-texto: #E0E0E0;
--vsl-suave: #9AAACB;
--vsl-raio: 18px;
}
/* ------------------------------------------------------------- 2. A seccao */
.vsl {
position: relative;
margin: 1.25rem 0 1.75rem;
padding: 1rem;
border-radius: var(--vsl-raio);
background:
radial-gradient(115% 130% at 78% -18%, rgba(26, 95, 255, .22) 0%, transparent 60%),
linear-gradient(158deg, var(--vsl-navy) 0%, var(--vsl-navy-2) 100%);
border: 1px solid var(--vsl-fio);
overflow: hidden;
color: var(--vsl-texto);
}
/* A grelha tecnica da casa, por baixo do conteudo. */
.vsl::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
linear-gradient(to right, var(--vsl-fio) 1px, transparent 1px),
linear-gradient(to bottom, var(--vsl-fio) 1px, transparent 1px);
background-size: 64px 64px;
opacity: .55;
-webkit-mask-image: radial-gradient(ellipse 78% 66% at 50% 30%, #000 0%, transparent 80%);
mask-image: radial-gradient(ellipse 78% 66% at 50% 30%, #000 0%, transparent 80%);
}
.vsl > * { position: relative; z-index: 1; }
/* -------------------------------------------------------------- 3. O palco */
.vsl-palco {
position: relative;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--vsl-fio-2);
background: #000;
box-shadow: 0 18px 48px rgba(0, 0, 21, .55), 0 0 0 1px rgba(26, 95, 255, .12);
aspect-ratio: 16 / 9;
}
.vsl-palco > video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
background: #000;
}
/* Botao de play: cobre o palco enquanto o video nao arranca. Esconde-se com
`.a-tocar` no pai, posta pelo JS — e o MESMO gesto que liga o video, para
nao haver estado em que o botao desaparece e nada toca. */
.vsl-play {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .75rem;
width: 100%;
border: 0;
cursor: pointer;
background: linear-gradient(0deg, rgba(0, 0, 21, .62), rgba(0, 0, 21, .28));
color: #fff;
font: inherit;
transition: background .25s ease;
}
.vsl-play:hover { background: linear-gradient(0deg, rgba(0, 0, 21, .5), rgba(0, 0, 21, .18)); }
.vsl-play-icone {
display: flex;
align-items: center;
justify-content: center;
width: 74px;
height: 74px;
padding-left: 5px; /* o triangulo parece descentrado sem isto */
border-radius: 50%;
background: rgba(26, 95, 255, .92);
box-shadow: 0 0 0 10px rgba(26, 95, 255, .16), 0 10px 30px rgba(0, 0, 21, .5);
font-size: 1.6rem;
}
.vsl-play-texto {
font-size: .9375rem;
font-weight: 700;
letter-spacing: .01em;
text-shadow: 0 2px 12px rgba(0, 0, 21, .9);
}
.vsl.a-tocar .vsl-play { display: none; }
/* Selo «ao vivo»: o mesmo verde que marca o preco e o stock em todo o site. */
.vsl-selo {
position: absolute;
top: .6rem;
left: .6rem;
z-index: 2;
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .25rem .6rem;
border-radius: 999px;
background: rgba(0, 8, 32, .78);
border: 1px solid rgba(52, 211, 153, .34);
color: #d6fff0;
font-size: .625rem;
font-weight: 800;
letter-spacing: .07em;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.vsl-selo i {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--vsl-verde);
animation: vsl-pulsa 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
/* -------------------------------------------------------- 4. Lado do texto */
.vsl-lado { padding: 1.1rem .25rem .25rem; }
.vsl-kicker {
margin: 0 0 .4rem;
font-size: .6875rem;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--vsl-azul-2);
}
.vsl-titulo {
margin: 0 0 .85rem;
font-size: clamp(1.25rem, 5.4vw, 1.875rem);
font-weight: 800;
line-height: 1.22;
color: #fff;
letter-spacing: -.01em;
}
.vsl-titulo b { color: var(--vsl-verde); font-weight: 800; }
.vsl-provas {
margin: 0 0 1.1rem;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: .45rem;
}
.vsl-provas li {
position: relative;
padding-left: 1.5rem;
font-size: .875rem;
line-height: 1.45;
color: var(--vsl-suave);
}
.vsl-provas li::before {
content: "";
position: absolute;
left: .15rem;
top: .5em;
width: .5rem;
height: .28rem;
border-left: 2px solid var(--vsl-verde);
border-bottom: 2px solid var(--vsl-verde);
transform: rotate(-45deg);
}
.vsl-cta {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
min-height: 48px; /* alvo de toque */
padding: .85rem 1.5rem;
border-radius: 999px;
background: linear-gradient(135deg, var(--vsl-verde), #0f9d63);
color: #00160d;
font-weight: 800;
font-size: .9375rem;
text-decoration: none;
letter-spacing: .01em;
box-shadow: 0 10px 26px rgba(15, 157, 99, .28);
transition: filter .2s ease, transform .2s ease;
}
.vsl-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.vsl-nota {
margin: .6rem 0 0;
font-size: .75rem;
color: var(--vsl-suave);
text-align: center;
}
/* ------------------------------------------------------- 5. Ecra largo */
@media (min-width: 900px) {
/* Card mais PEQUENO (ordem do dono, 28/09/2026: «diminua o card do VSL»).
Antes: 1.35fr/1fr a toda a largura do contentor (1232 px de grelha → o
palco saía com ~693×390 px). Agora o card é limitado a 960 px e centrado,
e o palco desce para ~489×275 px — ~29 % mais baixo.
Só se encolhe a partir dos 900 px: abaixo disso o card já empilha e
ocupa a largura do telemóvel, onde o tamanho é alvo de toque, não estética. */
.vsl {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 1.5rem;
align-items: center;
padding: 1.25rem;
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
.vsl-lado { padding: .25rem 0; }
.vsl-nota { text-align: left; }
.vsl-cta { display: inline-flex; }
}
/* --------------------------------------------- 6. Acessibilidade / impressao */
@keyframes vsl-pulsa {
0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .60); }
70% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
@media (prefers-reduced-motion: reduce) {
.vsl-selo i { animation: none; }
.vsl-cta:hover { transform: none; }
}
.vsl-play:focus-visible,
.vsl-cta:focus-visible {
outline: 3px solid var(--vsl-azul-2);
outline-offset: 3px;
}
@media print {
.vsl { display: none; }
}
/* ---------------------------------------------------------------------------
Botao de PAUSA (acrescentado 26/09/2026 — WCAG 2.2 SC 2.2.2)
Defeito medido no ficheiro: `vsl.js` faz `v.removeAttribute('controls')` e
`.vsl.a-tocar .vsl-play{display:none}` esconde o unico botao. Somados, davam
isto — um video em autoplay de 35 s, com `loop`, que o utilizador NAO podia
parar. A norma exige um mecanismo de pausar, parar ou esconder sempre que o
movimento arranca sozinho, dura mais de 5 s e coexiste com outro conteudo.
As tres condicoes valiam.
Aditivo: nao muda nada do que existia. O botao so' e' mostrado no estado
`a-tocar` — o mesmo que ja' escondia o botao grande.
--------------------------------------------------------------------------- */
.vsl-pausa {
display: none;
position: absolute; top: 12px; right: 12px; z-index: 3;
align-items: center; gap: 7px;
padding: 7px 13px 7px 11px;
border: 0; border-radius: 999px; cursor: pointer;
font: 600 12px/1 Inter, "Segoe UI", system-ui, sans-serif;
letter-spacing: .04em; color: #EAF0FF;
background: rgba(0, 0, 21, .62);
backdrop-filter: blur(6px);
transition: background .18s, color .18s;
}
.vsl.a-tocar .vsl-pausa { display: inline-flex; }
.vsl-pausa:hover { background: rgba(0, 64, 224, .82); color: #fff; }
.vsl-pausa-icone { font-size: 10px; letter-spacing: 1px; }
.vsl-pausa:focus-visible { outline: 2px solid #1A5FFF; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
/* Com movimento reduzido o video nao arranca sozinho — o botao nunca aparece.
Fica a regra explicita para o caso de o utilizador o pedir a mao. */
.vsl-pausa { transition: none; }
}