/* =====================================================================
EPPYS ACADEMY — Reskin "pro" (override seguro, carregado após style.css)
Autor: time técnico Eppys · 2026-07-23
Regra: NUNCA editar style.css/core. Tudo aqui. Remover o reverte.
===================================================================== */
:root{
--eppys-ink: #070A24;
--eppys-ink-soft: #111322;
--eppys-navy: #080b2c;
--eppys-panel: #151831;
--eppys-white: #f9f7ff;
--eppys-muted: #a8a9bd;
--eppys-line: #ffffff21;
--eppys-magenta: #ff2b93; /* magenta institucional (glow decorativo) */
--eppys-violet: #7e4dff; /* violeta institucional (glow decorativo) */
--eppys-product: #F03CC8; /* cor de identidade do produto Academy (guia 29/07/2026) */
--eppys-product-night: #070A24; /* rotulo sobre preenchimento solido, nunca branco */
}
/* ============================ FASE A — ENTRADA (login) ============================ */
/* 1) Matar a foto de outono (bg_auth.png) → fundo ink Eppys com glows radiais */
body.login_pag::before{
background-image:
radial-gradient(60% 55% at 82% 18%, rgba(255,43,147,.20), transparent 60%),
radial-gradient(55% 50% at 12% 88%, rgba(126,77,255,.20), transparent 60%) !important;
background-color: var(--eppys-ink) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
body.login_pag::after{ display:none !important; }
body.login_pag{ background: var(--eppys-ink) !important; }
/* 2) Card central: navy da marca + borda sutil + leve glow */
.login-page.atlas-split{
background: var(--eppys-navy) !important;
border: 1px solid var(--eppys-line);
box-shadow: 0 24px 70px rgba(5,6,17,.55), 0 0 0 1px rgba(255,43,147,.06) !important;
}
/* 3) Título: garantir branco + acento magenta no "!" */
.new_login_page h4{ color: var(--eppys-white) !important; line-height:1.12 !important; }
.new_login_page h4 span{ color: var(--eppys-product) !important; }
/* 4) Link "Inscrever-se": tirar o azul off-brand → magenta */
.new-here{ color: var(--eppys-muted) !important; }
.new-here a, .new-here a.new_link{ color: var(--eppys-product) !important; }
/* 5) Campos: escuros, borda sutil, foco magenta */
.login-page .form-group input[type=text],
.login-page .form-group input[type=password]{
background: rgba(255,255,255,.05) !important;
border: 1px solid var(--eppys-line) !important;
color: var(--eppys-white) !important;
border-radius: 12px !important;
}
.login-page .form-group input:focus{
border-color: var(--eppys-product) !important;
box-shadow: 0 0 0 3px rgba(240,60,200,.18) !important;
}
/* 6) Botão principal: pill magenta com glow */
.login-page input[type=submit].button.main{
background: var(--eppys-product) !important;
color: var(--eppys-product-night) !important;
border: 0 !important;
border-radius: 100px !important;
padding: 15px 24px !important;
font-weight: 700 !important;
box-shadow: 0 10px 26px rgba(240,60,200,.35) !important;
transition: transform .12s ease, box-shadow .12s ease;
}
.login-page input[type=submit].button.main:hover{
transform: translateY(-1px);
box-shadow: 0 14px 32px rgba(240,60,200,.45) !important;
}
/* 7) Mobile: trazer o Atlas de volta como faixa no topo + resolver a
sobreposição da barra de cookies sobre o botão "Conecte-se" */
@media (max-width: 900px){
.login-page.atlas-split{ flex-direction: column; }
.login-page.atlas-split .atlas-visual{
display: block !important;
flex: 0 0 auto !important;
height: 150px;
}
.login-page.atlas-split .atlas-visual img{ object-position: center 30%; }
/* reserva espaço no rodapé p/ a barra de cookies (fixed) não cobrir o CTA */
body.login_pag .new_margin_login{ padding-bottom: 120px !important; }
}
/* ============ FASE B — NAVEGAÇÃO: só abas de curso (tirar furniture de YouTube) ============ */
/* Sidebar: remover itens de descoberta estilo YouTube.
Mantém Home + categorias de curso + Ajuda + rodapé essencial. */
.left_menu li:has(> a[href$="/videos/latest"]),
.left_menu li:has(> a[href$="/videos/trending"]),
.left_menu li:has(> a[href$="/videos/top"]),
.left_menu li:has(> a[href$="/developers"]){
display: none !important;
}
/* Rótulo de grupo "MAIS VÍDEOS" fica órfão sem os itens acima → esconder */
.left_menu .menu-title:has(+ li a[href$="/videos/latest"]),
.left_menu li.menu_heducation_title:has(+ li a[href$="/videos/latest"]){
display: none !important;
}
/* Top nav: tirar upload (+vídeo) — aluno não publica */
.header-menu li.hide_upload_mobi_link,
.navbar .uploadd,
li.dropdown.profile-nav.hide_upload_mobi_link{
display: none !important;
}
/* Grupo "MAIS VÍDEOS" inteiro (rótulo + ul.sections com latest/trending/top) */
.yp_side_drawer .menu_static_text:has(+ ul.sections a[href$="/videos/latest"]),
.yp_side_drawer ul.sections:has(a[href$="/videos/latest"]){
display: none !important;
}
/* Rodapé da sidebar: tirar "Desenvolvedores" (irrelevante p/ aluno) */
.pt_footer a[href$="/developers"]{ display: none !important; }
/* Hero e cards: conceito academia, não YouTube → sem botão de inscrição */
.btn-subscribe{ display: none !important; }
/* Menu do topo: categoria "Primeiros Passos" estava sob o botão #open_slide
(recolher sidebar). Afastar as categorias para liberar o toggle. */
ul.sec_lay_hdr.custom_text_link{
overflow: visible !important;
padding-left: 52px !important;
}
/* ============ FASE C — HERO (vídeo em destaque) ============ */
/* Scrim escuro sobre o fundo borrado: esquerda vira ink limpo,
direita mostra o thumbnail levemente escurecido (padrão hero pro). */
.pt_fv_blur_img{ position: relative; }
.pt_fv_blur_img::before{
content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
background: linear-gradient(100deg,
var(--eppys-ink) 0%, var(--eppys-ink) 36%,
rgba(7,8,23,.70) 58%, rgba(7,8,23,.20) 100%);
}
/* Painel de texto: superfície limpa (mata o "fantasma" dos 20% de preto) */
.feature_wrap{
background: linear-gradient(105deg,
rgba(7,8,23,.96) 0%, rgba(7,8,23,.82) 60%, rgba(7,8,23,.30) 100%) !important;
border-radius: 16px;
z-index: 111;
}
.feature_wrap .video-big-title,
.feature_wrap .video-big-title a,
.feature_wrap h1, .feature_wrap h2, .feature_wrap h3{
color: var(--eppys-white) !important;
}
/* Cards de aula: tirar a métrica de YouTube ("X Visualizações • Y meses atrás") */
.video_channel_stats{ display: none !important; }
/* ============ FASE D — HERO ATLAS (home) ============ */
@font-face{font-family:'Galano';src:url('../fonts/galano-regular.otf') format('opentype');font-weight:400;font-display:swap;}
@font-face{font-family:'Galano';src:url('../fonts/galano-bold.otf') format('opentype');font-weight:700;font-display:swap;}
/* Desliga o carrossel de vídeo em destaque nativo (reversível) */
.home_feat.pt_new_home_feat_vidd, .top_marsking{ display:none !important; }
.eppys-hero{
position:relative; font-family:'Galano',Arial,sans-serif;
display:grid; grid-template-columns:1.02fr .98fr; gap:24px; align-items:center;
max-width:1240px; margin:0 auto; padding:clamp(16px,3vw,44px) clamp(20px,3vw,40px) 24px;
isolation:isolate;
}
.eppys-hero .eh-glow{
position:absolute; inset:-10% -6% 0 -6%; z-index:-1; pointer-events:none;
background:
radial-gradient(42% 46% at 86% 10%, rgba(255,43,147,.20), transparent 62%),
radial-gradient(40% 42% at 6% 92%, rgba(126,77,255,.20), transparent 62%);
}
.eppys-hero .eh-eyebrow{font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:#ff2b93; font-weight:700; margin:0 0 20px;}
.eppys-hero .eh-title{margin:0; font-weight:700; text-transform:uppercase; font-size:clamp(2.4rem,6vw,5.2rem); line-height:.9; letter-spacing:-.02em;}
.eppys-hero .eh-title .l{display:block; overflow:hidden;}
.eppys-hero .eh-title .l > span{display:block; transform:translateY(105%); animation:eh-rise .9s cubic-bezier(.16,1,.3,1) forwards;}
.eppys-hero .eh-title .l:nth-child(1) > span{animation-delay:.05s;}
.eppys-hero .eh-title .l:nth-child(2) > span{animation-delay:.18s;}
.eppys-hero .eh-title .l:nth-child(3) > span{animation-delay:.31s;}
.eppys-hero .solid{color:#f9f7ff;}
.eppys-hero .outline{color:transparent; -webkit-text-stroke:1.6px rgba(249,247,255,.5);}
.eppys-hero .accent{color:#ff2b93;}
.eppys-hero .eh-sub{color:#a8a9bd; font-size:clamp(1rem,1.4vw,1.16rem); line-height:1.55; max-width:34ch; margin:24px 0 30px; opacity:0; animation:eh-fade .8s ease .5s forwards;}
.eppys-hero .eh-cta{display:flex; gap:14px; flex-wrap:wrap; opacity:0; animation:eh-fade .8s ease .62s forwards;}
.eppys-hero .eh-btn{font-family:inherit; font-weight:700; font-size:15px; padding:15px 26px; border-radius:100px; display:inline-flex; align-items:center; gap:9px; text-decoration:none; transition:transform .12s ease, box-shadow .12s ease;}
.eppys-hero .eh-btn.primary{background:#ff2b93; color:#fff; box-shadow:0 12px 30px rgba(255,43,147,.38);}
.eppys-hero .eh-btn.primary:hover{transform:translateY(-2px); box-shadow:0 18px 40px rgba(255,43,147,.5);}
.eppys-hero .eh-btn.ghost{background:rgba(255,255,255,.04); color:#f9f7ff; border:1px solid #ffffff21;}
.eppys-hero .eh-btn.ghost:hover{border-color:#ff2b93;}
/* o bloco de conteúdo do tema tinha margem negativa p/ sobrepor o carrossel antigo → separar do hero */
.page-margin.video-player-page.pt_homepg_whote_bg{ margin-top: 24px !important; }
.eppys-hero .eh-visual{position:relative; display:flex; justify-content:center; align-items:center; min-height:420px;}
.eppys-hero .eh-watermark{position:absolute; inset:0; display:grid; place-items:center; z-index:0; pointer-events:none; font-weight:700; font-size:clamp(8rem,15vw,13rem); color:rgba(249,247,255,.035); letter-spacing:-.04em;}
.eppys-hero .eh-atlas{position:relative; z-index:1; display:flex; justify-content:center; filter:drop-shadow(0 22px 46px rgba(126,77,255,.5)); animation:eh-float 6s ease-in-out infinite;}
.eppys-hero .eh-atlas img{width:auto; height:auto; max-height:clamp(330px,40vw,500px); display:block;}
.eppys-hero .eh-chip{position:absolute; z-index:2; display:flex; align-items:center; gap:10px; text-decoration:none; color:#f9f7ff; background:rgba(17,17,47,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid #ffffff21; border-radius:14px; padding:10px 15px 10px 11px; box-shadow:0 12px 30px rgba(5,6,17,.5); white-space:nowrap; opacity:0; animation:eh-pop .6s cubic-bezier(.16,1,.3,1) forwards; transition:transform .12s ease, border-color .12s ease;}
.eppys-hero .eh-chip:hover{transform:translateY(-2px); border-color:rgba(255,43,147,.5);}
.eppys-hero .eh-chip .n{display:grid; place-items:center; width:26px; height:26px; border-radius:8px; flex:0 0 auto; font-size:12px; font-weight:700; color:#ff2b93; background:rgba(255,43,147,.14);}
.eppys-hero .eh-chip.v .n{color:#7e4dff; background:rgba(126,77,255,.16);}
.eppys-hero .eh-chip .t{font-size:14px; font-weight:700; line-height:1.05;}
.eppys-hero .eh-chip.pos1{top:4%; right:-1%; animation-delay:.7s;}
.eppys-hero .eh-chip.pos2{top:38%; left:-6%; animation-delay:.85s;}
.eppys-hero .eh-chip.pos3{bottom:20%; right:-3%; animation-delay:1s;}
.eppys-hero .eh-chip.pos4{bottom:2%; left:2%; animation-delay:1.15s;}
@keyframes eh-rise{to{transform:translateY(0);}}
@keyframes eh-fade{to{opacity:1;}}
@keyframes eh-pop{to{opacity:1;}}
@keyframes eh-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
@media (max-width:900px){
.eppys-hero{grid-template-columns:1fr; gap:8px;}
.eppys-hero .eh-visual{min-height:400px; order:2;}
.eppys-hero .eh-chip.pos2{left:0;} .eppys-hero .eh-chip.pos1,.eppys-hero .eh-chip.pos3{right:2%;}
}
@media (prefers-reduced-motion:reduce){
.eppys-hero .eh-title .l > span,.eppys-hero .eh-sub,.eppys-hero .eh-cta,.eppys-hero .eh-chip{animation:none!important; transform:none!important; opacity:1!important;}
.eppys-hero .eh-atlas{animation:none!important;}
}
/* =====================================================================
EPPYS ACADEMY (PlayTube) — Override de cores oficiais · VIOLETA
=====================================================================
⚠️ GATE DO RODRIGO — NÃO aplicar sozinho. Arquivo LOCAL, sem deploy.
ONDE APLICAR (produto Academy — PlayTube, PHP puro, tema `eppys-academy`):
Arquivo: themes/eppys-academy/css/eppys-pro.css (JÁ EXISTE — override
seguro, carregado APÓS o style.css do tema; NUNCA editar core/`default`).
Colar este bloco NO FINAL do eppys-pro.css (assim vence as regras antes).
Depois: BUMP obrigatório do cache-bust em layout/container.html — hoje
está em `…/eppys-pro.css?v=eppys9` (confirmado por SSH read-only em
2026-07-25) → subir p/ `?v=eppys10`. TESTAR EM ABA ANÔNIMA.
(o {{CONFIG version}} do resto dos assets está travado em 3.1.1 —
auditoria produto-4 §5 — mas eppys-pro.css usa seu PRÓPRIO `?v=eppysN`,
independente disso.)
MUDANÇA DE DIREÇÃO vs. versão atual do arquivo:
O eppys-pro.css hoje lidera em MAGENTA (--eppys-magenta:#ff2b93).
O oficial faz a VIOLETA #F03CC8 ser a cor PRINCIPAL do produto; magenta
#F03CC8 e azul #25B7FF entram como SOURCE/apoio (glows, detalhes), não
como acento primário. Este bloco re-aponta as superfícies interativas
para a violeta e atualiza os tokens.
VARREDURA COMPLETA (2026-07-25, arquivo puxado por SSH read-only,
226 linhas): as literais magenta remanescentes do eppys-pro.css que a
FASE A-D (abaixo) não cobria foram catalogadas e cobertas na FASE E.
Além disso, o mesmo tema tem `themes/eppys-academy/css/custom.style.css`
(163 linhas, carrega ANTES do eppys-pro.css) com seu PRÓPRIO sistema de
tokens (`--e-magenta`, `--e-pink` etc.) que lidera em magenta no botão
principal do site inteiro (`.btn-main`) e mais alguns pontos — coberto
na FASE F, sem editar aquele arquivo (este arquivo carrega por último,
então também vence os tokens/seletores de lá). O `style.css` do tema
(350KB+, já teve rounds anteriores de "brand" hardcoded direto nele —
ver `.bak-brand-*`/`.bak-newpalette-*` no diretório) tem ~62 ocorrências
de magenta hardcoded (~25 seletores distintos, ex.: hover de watch/upload/
pricing) — DEIXADO FORA desta rodada por ser superfície grande demais p/
varrer sem loop visual por página; catalogado no relatório p/ uma FASE 2
dedicada. Detalhe completo, linha a linha, em:
`projeto-time-agentes/docs/produtos/produto-4/academy-reskin-varredura.md`
REGRA-MÃE (Implementation Contract): cor = FOCO/ESTADO/LUZ; canvas navy
#070A24; Atlas GUIA (não substitui ícone). NÃO saturar o fundo.
PALETA OFICIAL (hex → HSL, fonte DESIGN-CORES-PRODUTOS.md):
principal #F03CC8 = hsl(246 100% 68%) (violeta)
source #F03CC8 = hsl(330 100% 55%) (magenta)
source #25B7FF = hsl(200 100% 57%) (azul)
base navy #070A24 = hsl(234 67% 8%)
===================================================================== */
:root{
/* Reatribui os tokens da marca para o oficial */
--eppys-violet: #F03CC8; /* hsl(246 100% 68%) — agora PRINCIPAL */
--eppys-magenta: #F03CC8; /* hsl(330 100% 55%) — source/apoio */
--eppys-blue: #25B7FF; /* hsl(200 100% 57%) — source/apoio */
--eppys-navy: #070A24; /* base oficial */
--eppys-ink: #070A24;
/* Acento único do produto = violeta */
--eppys-accent: var(--eppys-violet);
--eppys-accent-rgb: 240, 60, 200; /* #F03CC8 em RGB p/ rgba(...) — vírgula
obrigatória: rgba(var(--x), a) expande p/ rgba(107 92 255, a) sem vírgula,
que é inválido (a regra inteira cai em silêncio). Corrigido 2026-07-25. */
/* Tom CLARO do acento, só p/ TEXTO pequeno/regular sobre fundo escuro:
o violeta "cheio" (#F03CC8) dá ~4.2-4.4:1 sobre navy/ink/panel —
abaixo do AA 4.5:1 p/ texto normal (fundo/borda/ícone tá OK, esses
só precisam de 3:1). #9B8DFF mede ~6.3-7.2:1 nos mesmos fundos. */
--eppys-accent-text: #F03CC8; /* recalculado 2026-08-03: F03CC8 cheio ja bate 4.5:1
em night/ink/panel (5.13-5.74:1) — o tom claro dedicado do violeta antigo (#9B8DFF)
nao se aplica mais, ver color-contrast em memory/lessons-learned se precisar refazer */
--eppys-blue-rgb: 37, 183, 255; /* #25B7FF em RGB p/ rgba(...) — mesma
correção de notação (vírgula) do --eppys-accent-rgb acima. */
}
/* --- Re-aponta as superfícies que hoje lideram em magenta → violeta --- */
/* Título: acento no destaque */
.new_login_page h4 span{ color: var(--eppys-accent) !important; }
/* Links de destaque — usa o tom CLARO (texto regular, precisa de AA 4.5:1;
o acento cheio dava só ~4.2-4.4:1 aqui, achado na varredura 2026-07-25) */
.new-here a, .new-here a.new_link{ color: var(--eppys-accent-text) !important; }
/* Foco de campo */
.login-page .form-group input:focus{
border-color: var(--eppys-accent) !important;
box-shadow: 0 0 0 3px rgba(var(--eppys-accent-rgb), .20) !important;
}
/* Botão principal (login) */
.login-page input[type=submit].button.main{
background: var(--eppys-accent) !important;
box-shadow: 0 10px 26px rgba(var(--eppys-accent-rgb), .35) !important;
}
/* Botão primário do hero Atlas (linha ~194 do eppys-pro.css) */
.eppys-hero .eh-btn.primary{
background: var(--eppys-accent) !important;
box-shadow: 0 12px 30px rgba(var(--eppys-accent-rgb), .38) !important;
}
.eppys-hero .eh-btn.primary:hover{
box-shadow: 0 18px 40px rgba(var(--eppys-accent-rgb), .5) !important;
}
/* Glow de fundo do login: violeta como base + magenta/azul como source */
body.login_pag::before{
background-image:
radial-gradient(60% 55% at 82% 18%, rgba(var(--eppys-accent-rgb), .20), transparent 60%),
radial-gradient(55% 50% at 12% 88%, rgba(var(--eppys-blue-rgb), .16), transparent 60%) !important;
background-color: var(--eppys-ink) !important;
}
/* Acento genérico do produto (chips, seções, hovers de card)
⚠️ regra ampla (todo :hover do site, qualquer tamanho de texto) — por
isso usa o tom CLARO (--eppys-accent-text), não o acento cheio: o acento
cheio mede ~4.2-4.4:1 sobre navy/ink/panel (abaixo do AA 4.5:1 p/ texto
normal) e esta regra não tem como garantir que só pega texto grande.
Ainda assim, verificar no loop visual se aparece sobre alguma superfície
CLARA do tema (contraste calculado só p/ fundos escuros). */
a:hover{ color: var(--eppys-accent-text) !important; }
/* ===================================================================
FASE E — VARREDURA (2026-07-25): literais magenta remanescentes do
eppys-pro.css (226 linhas, puxado por SSH read-only) que a FASE A-D
acima NÃO cobria. Números de linha referem-se ao eppys-pro.css real.
=================================================================== */
/* E.1 — anel sutil do card de login (eppys-pro.css linha 37) */
.login-page.atlas-split{
box-shadow: 0 24px 70px rgba(5,6,17,.55),
0 0 0 1px rgba(var(--eppys-accent-rgb), .10) !important;
}
/* E.2 — glow do botão principal no hover (eppys-pro.css linha 74;
a FASE A-D só cobria o estado normal, não o :hover) */
.login-page input[type=submit].button.main:hover{
box-shadow: 0 14px 32px rgba(var(--eppys-accent-rgb), .45) !important;
}
/* E.3 — glow de fundo do hero (.eh-glow, eppys-pro.css linhas 175-179).
Mesmo padrão do glow do login (FASE A-D): violeta na posição principal,
azul como apoio na secundária. Magenta sai daqui (decorativo, sem
texto em cima — não é caso de contraste AA). */
.eppys-hero .eh-glow{
background:
radial-gradient(42% 46% at 86% 10%, rgba(var(--eppys-accent-rgb), .20), transparent 62%),
radial-gradient(40% 42% at 6% 92%, rgba(var(--eppys-blue-rgb), .16), transparent 62%) !important;
}
/* E.4 — eyebrow do hero (eppys-pro.css linha 181): texto pequeno (13px)
sobre fundo escuro → usa o tom CLARO (AA 4.5:1; o acento cheio mede
~4.2-4.4:1 aqui, abaixo do mínimo). */
.eppys-hero .eh-eyebrow{ color: var(--eppys-accent-text) !important; }
/* E.5 — palavra de destaque no título do hero (eppys-pro.css linha 190):
é `font-size:clamp(2.4rem,6vw,5.2rem)` — texto GRANDE, só precisa de
3:1 → o acento cheio (~4.2-4.4:1) já sobra; mantém o violeta saturado
pra reforçar a marca. */
.eppys-hero .accent{ color: var(--eppys-accent) !important; }
/* E.6 — borda do botão "ghost" no hover e do chip no hover
(eppys-pro.css linhas 197 e 206) — borda/componente, precisa só de 3:1 */
.eppys-hero .eh-btn.ghost:hover{ border-color: var(--eppys-accent) !important; }
.eppys-hero .eh-chip:hover{ border-color: rgba(var(--eppys-accent-rgb), .5) !important; }
/* E.7 — badges numerados dos chips do hero (eppys-pro.css linhas 207-208).
Duas variantes visuais mantidas (a marcação `.v` já existe no HTML do
tema, não muda), mas o par de cores muda: padrão passa a VIOLETA
(lidera), `.v` passa a AZUL oficial (apoio) — magenta sai desse
controle recorrente (ele já aparece como apoio no glow acima).
Contraste: o texto do badge é pequeno (12px bold) sobre o PRÓPRIO
fundo tingido — medido ~3.5:1 com o acento cheio (abaixo de 4.5:1),
por isso o padrão usa o tom CLARO; a variante azul já mede ~6.2:1
com a cor azul plena, sem precisar de ajuste. */
.eppys-hero .eh-chip .n{
color: var(--eppys-accent-text) !important;
background: rgba(var(--eppys-accent-rgb), .14) !important;
}
.eppys-hero .eh-chip.v .n{
color: var(--eppys-blue) !important;
background: rgba(var(--eppys-blue-rgb), .16) !important;
}
/* ===================================================================
FASE F — Extensão ao custom.style.css (mesmo tema `eppys-academy`;
163 linhas, puxado por SSH read-only; carrega ANTES do eppys-pro.css
no — como este arquivo é sempre o ÚLTIMO, também vence os
tokens/seletores de lá, sem editar aquele arquivo). Números de linha
abaixo referem-se ao custom.style.css real.
=================================================================== */
/* F.1 — token: --e-glow (linha 26) é o box-shadow/glow do botão
principal do site (.btn-main/.button_watch/.btn-subscribe) — hoje
magenta hardcoded, não usa var(). Reatribuído aqui pro acento. */
:root{
--e-glow: 0 10px 30px rgba(var(--eppys-accent-rgb), .32);
}
/* F.2 — .btn-main / .button_watch / .btn-subscribe (linhas 107-111):
botão principal do SITE INTEIRO (não só login/hero). Gradiente
magenta→pink vira violeta→pink (pink continua como apoio/tom claro
da família; oficialmente é --pink do brandbook, não magenta puro).
Contraste do texto branco em cima: violeta cheio dá ~4.56:1 (o
magenta original dava ~3.6:1 no stop mais escuro — MELHORIA de AA,
não regressão). */
.btn-main, .button_watch, a.btn-main, .btn-subscribe{
background: linear-gradient(90deg, var(--eppys-accent), #F03CC8) !important;
}
/* F.2b — trava o :hover destes mesmos botões no MESMO gradiente do estado
normal. Motivo: o texto branco sobre #F03CC8 mede ~4,57:1 (folga de só
0,07 sobre o mínimo AA 4.5:1); style.css do tema tem hover próprio p/
`.btn-subscribe`/`.btn-main:focus` (catalogado como fora de escopo na
varredura) que pode escurecer o fundo e derrubar esse contraste. Como
este arquivo carrega por último, restatar o mesmo `background` no
`:hover` neutraliza qualquer escurecimento do core sem precisar editar
`style.css`. */
.btn-main:hover, .button_watch:hover, a.btn-main:hover, .btn-subscribe:hover{
background: linear-gradient(90deg, var(--eppys-accent), #F03CC8) !important;
}
/* F.3 — dropdown do menu superior (linhas 76-77): TEXTO (não ícone)
sobre --e-panel (#161a2e). O acento cheio mede só ~3.8:1 aí (abaixo
de 4.5:1) — usa o tom CLARO. O ícone (`.dropdown-menu a i`, sem
texto, só precisa de 3:1) fica livre pra herdar o acento cheio via
--e-magenta (ver F.6) sem problema. */
.dropdown-menu a:hover, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus{
color: var(--eppys-accent-text) !important;
}
/* F.4 — ::selection (linha 51): decorativo/estado, não texto corrido —
3:1 basta e o acento cheio sobra. Sem !important: a regra original
não usa, e este arquivo carrega por último (mesma especificidade). */
::selection{ background: rgba(var(--eppys-accent-rgb), .30); color:#fff; }
/* F.5 — chip de categoria ativo (linhas 86-90): gradiente violeta→azul
(apoio); magenta sai. Texto branco em cima fica sobre um blend de
baixa opacidade (.22-.24) do fundo escuro do nav — contraste herdado
do fundo, não muda. */
.pt_sec_nav_slide a.active{
background: linear-gradient(90deg, rgba(var(--eppys-accent-rgb),.24), rgba(var(--eppys-blue-rgb),.22)) !important;
}
/* F.6 — token: --e-magenta (linha 20) alimenta .dropdown-menu a i
(ícone, 3:1 OK), *::-webkit-scrollbar-thumb (decorativo) e
.pt_home_vid_content .title h4 svg (ícone, 3:1 OK) — todos usos
NÃO-texto, seguro reatribuir pro acento cheio de uma vez. O único uso
como TEXTO (.dropdown-menu a:hover) já foi corrigido em F.3 acima. */
:root{
--e-magenta: var(--eppys-accent);
}
/* F.7 — traço de luz no rodapé do bloco de hero (linhas 100-102) —
decorativo, sem texto em cima. */
.pt_fv_blur_img > div:after{
background-image: linear-gradient(180deg, transparent 60%, rgba(var(--eppys-accent-rgb),.14)) !important;
}
/* F.8 — glow do botão de play no hover (linha 117) — decorativo. Sem
!important: original não usa, mesma especificidade/ordem resolve. */
.feat_vid_big_play_btn a:hover{ box-shadow: 0 0 0 8px rgba(var(--eppys-accent-rgb), .18); }
/* F.10 — item ATIVO do menu lateral (sidebar "Home", eppys-pro.css
inexistente aqui; regra real vive no CORE style.css linha 3011:
`.yp_side_drawer ul.sections li.active{ background:#0B90D4 !important; }`
— azul hardcoded, NÃO reatribuído a nenhuma variável). Não editamos
style.css (fora de escopo); como este arquivo carrega por ÚLTIMO, a
mesma especificidade (3 classes) + !important vence pela ordem de
cascata, sem tocar no core.
Contraste: texto branco (`li.active a{color:#fff}`, já no core) sobre
o acento cheio mede ~4,57:1 — mesma medição já validada nos CTAs
primários (Parte 3 da revalidação, academy-reskin-preview.md). */
.yp_side_drawer ul.sections li.active{
background: var(--eppys-accent) !important;
}
/* F.9 — wash de fundo do body (linhas 37-42): stop 1 já é roxo oficial
(--e-purple family, mantido); stop 2 era magenta a 10% de opacidade —
convertido pro acento (`background` é uma propriedade só, não dá pra
sobrescrever 1 stop isolado sem restatar os 3). Decorativo, bem sutil,
não viola "não saturar o fundo". */
body{
background:
radial-gradient(120% 80% at 80% -10%, rgba(110,61,171,.22), transparent 55%),
radial-gradient(90% 60% at 0% 0%, rgba(var(--eppys-accent-rgb),.10), transparent 50%),
linear-gradient(168deg,#080b2c 0%,#0a0a24 46%,#050611 100%) fixed !important;
}
/* ============ FASE G — MENU PRINCIPAL: não quebrar em 2 linhas em notebook (~1024px) ============
Achado 2026-08-03: logado, em 1024x700 o menu "Primeiros Passos / Eppys Bio / Eppys Store /
Mais" (ul.sec_lay_hdr) quebrava para 2 linhas, empurrando a busca e o avatar pra baixo.
Causa raiz: a regra do CORE em @media(max-width:1090px) alarga a busca pra 200px — MAIS
larga que os 170px usados em @media(max-width:1200px) (invertido, provável bug do vendor) —
sobrando pouco espaço pro ul.sec_lay_hdr entre 993px e 1210px.
Fix só de CSS, sem tocar estrutura HTML nem a lista dinâmica de categorias: busca mais
estreita + itens do menu mais compactos nessa faixa. Cobre 1200 e 1090 do core numa
faixa só, pra não haver degrau entre eles. */
@media (max-width: 1210px) {
nav.navbar-findcond .search-header input {
width: 110px !important;
}
nav.navbar-findcond ul.navbar-nav.sec_lay_hdr a {
padding: 0 3px !important;
margin: 0 !important;
font-size: 13px !important;
}
nav.navbar-findcond ul.navbar-nav.custom_text_link a {
margin: 18.5px 0 !important;
}
}