/* ClipeArena — design system. Tokens + componentes. Identidade própria (esportiva, moderna), não template genérico. As cores viram CSS vars, sobrescritas por arena. */ /* Tipografia própria (auto-hospedada) — display com caráter + corpo neutro legível. */ @font-face{font-family:'Bricolage Grotesque';font-weight:700;font-style:normal;font-display:swap; src:url(/assets/fonts/bricolage-700.woff2) format('woff2')} @font-face{font-family:'Hanken Grotesk';font-weight:400;font-style:normal;font-display:swap; src:url(/assets/fonts/hanken-400.woff2) format('woff2')} @font-face{font-family:'Hanken Grotesk';font-weight:600;font-style:normal;font-display:swap; src:url(/assets/fonts/hanken-600.woff2) format('woff2')} :root{ --bg:#080d18; --surface:#111a2e; --surface2:#16213c; --line:#243252; --line-soft:rgba(255,255,255,.06); --line-strong:rgba(255,255,255,.17); --txt:#E6EAF2; --muted:#8A97B1; --primary:#0EA5E9; --secondary:#22D3EE; --accent:#38F5B5; --danger:#F97066; --warn:#FBBF24; --live:#F4553E; --radius:18px; --radius-sm:11px; --shadow:0 18px 50px -18px rgba(0,0,0,.65); --glow:0 0 0 1px rgba(34,211,238,.06),0 18px 50px -20px rgba(14,165,233,.35); --sig-grad:linear-gradient(120deg,var(--primary),var(--secondary) 55%,var(--primary)); /* assinatura de transmissão (borda-gradiente) — usa a paleta da arena */ --glass:rgba(19,28,50,.55); --input-bg:#0c1526; --card-shadow:0 24px 60px -34px rgba(0,0,0,.9); --maxw:1100px; --fd:'Bricolage Grotesque',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --fb:'Hanken Grotesk',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --body-bg: radial-gradient(1100px 560px at 82% -12%,rgba(34,211,238,.13),transparent 60%), radial-gradient(900px 500px at 8% 8%,rgba(56,245,181,.08),transparent 55%), linear-gradient(180deg,#0a1120,var(--bg) 40%); } /* Tema claro do subsite — override no nível de token (a marca --primary/--secondary permanece; o dono também repinta --bg/--txt e o tema claro os substitui por neutros claros). O é decidido pela luminância do fundo da arena e alternável pelo visitante. */ :root[data-theme="light"]{ --bg:#EDF1F8; --surface:#FFFFFF; --surface2:#F4F7FC; --line:rgba(8,28,58,.12); --line-soft:rgba(8,28,58,.09); --line-strong:rgba(8,28,58,.22); --txt:#0E1B30; --muted:#556483; --glass:rgba(255,255,255,.72); --accent:#0A7A52; /* menta neon (#38F5B5) é ilegível em fundo claro → verde legível no tema claro */ --input-bg:#F4F7FC; --card-shadow:0 20px 44px -30px rgba(12,32,66,.42); --glow:0 0 0 1px rgba(2,76,153,.06),0 18px 50px -22px rgba(2,76,153,.22); --body-bg:linear-gradient(180deg,#FFFFFF,var(--bg) 46%); } *{box-sizing:border-box} html{scroll-behavior:smooth} html,body{margin:0} body{ background:var(--body-bg); background-attachment:fixed; color:var(--txt);font-family:var(--fb); line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh; transition:background-color .35s ease,color .35s ease; } @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} a{color:var(--secondary);text-decoration:none} a:hover{opacity:.9} img{max-width:100%} h1,h2,h3{font-family:var(--fd);font-weight:700;letter-spacing:-.02em;line-height:1.15} h1{letter-spacing:-.03em} /* Assinatura de transmissão — borda-gradiente por máscara. Aplique .ca-sig num elemento com border-radius próprio; ajuste com --sig-grad (padrão: paleta da arena), --sig-w, --sig-op. Usada na barra e no ícone de busca; o destaque (.frame.bcast) e o live (.frame.islive) são variantes. */ .ca-sig{position:relative} .ca-sig::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:var(--sig-w,1.5px); pointer-events:none;opacity:var(--sig-op,1);background:var(--sig-grad); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude} .wrap{max-width:var(--maxw);margin:0 auto;padding:24px} .muted{color:var(--muted)} .tag{display:inline-block;font-size:12px;color:var(--secondary);border:1px solid var(--line);border-radius:999px;padding:4px 10px} .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em} .brand .dot{width:12px;height:12px;border-radius:50%;flex:none; background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 0 18px var(--secondary)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; background:var(--btn-bg,linear-gradient(135deg,var(--primary),var(--secondary)));color:var(--btn-ink,#04121c);font-weight:700; border:0;border-radius:12px;padding:12px 18px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease; font-size:15px;text-align:center} .btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px -10px var(--secondary)} .btn:active{transform:translateY(0)} .btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--line);box-shadow:none} .btn.ghost:hover{background:var(--surface)} .btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none} .linkbtn{background:none;border:0;color:var(--danger);cursor:pointer;font:inherit;padding:0} .linkbtn:hover{text-decoration:underline} .inline{display:inline} .card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent),var(--glass); border:1px solid var(--line-soft);border-radius:var(--radius);padding:22px; backdrop-filter:blur(12px) saturate(1.1);box-shadow:var(--shadow);animation:rise .35s ease both} .card>h3:first-child,.card>h2:first-child{margin-top:0} a.card{display:block;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease} a.card:hover{transform:translateY(-3px);border-color:rgba(34,211,238,.5);box-shadow:var(--glow);opacity:1} .grid{display:grid;gap:16px} @media(min-width:720px){.grid.cols-2{grid-template-columns:repeat(2,1fr)}.grid.cols-3{grid-template-columns:repeat(3,1fr)}} label{display:block;font-size:14px;color:var(--muted);margin:14px 0 6px} input,select,textarea{width:100%;background:var(--input-bg);border:1px solid var(--line);color:var(--txt); border-radius:var(--radius-sm);padding:12px 14px;font-size:15px;font-family:inherit} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--secondary);box-shadow:0 0 0 3px rgba(34,211,238,.18)} /* radios/checkboxes não são campos de texto: não devem herdar o width:100%/padding acima */ input[type=radio],input[type=checkbox]{width:auto;flex:none;padding:0;box-shadow:none;accent-color:var(--secondary);cursor:pointer} :focus-visible{outline:2px solid var(--secondary);outline-offset:2px} .alert{background:rgba(249,112,102,.12);border:1px solid var(--danger);color:#ffd7d3;border-radius:var(--radius-sm);padding:12px 14px;margin:12px 0} .topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 24px;border-bottom:1px solid var(--line)} .kpi{font-size:32px;font-weight:800;letter-spacing:-.02em} .badge{font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);white-space:nowrap} .badge.ativa,.badge.online,.badge.ativo{color:var(--accent);border-color:var(--accent)} .badge.bloqueada,.badge.erro{color:var(--danger);border-color:var(--danger)} .badge.offline,.badge.pendente{color:var(--muted)} table{width:100%;border-collapse:collapse} th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line)} th{color:var(--muted);font-size:13px;font-weight:600} tr:hover td{background:rgba(255,255,255,.02)} .toast{border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:18px;border:1px solid var(--line)} .toast.ok{background:rgba(56,245,181,.10);border-color:var(--accent);color:#bff7e4} .toast.erro{background:rgba(249,112,102,.12);border-color:var(--danger);color:#ffd7d3} /* utilidades de layout dos painéis */ .shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh} .shell .side{background:linear-gradient(180deg,rgba(19,28,50,.7),rgba(10,17,32,.7));backdrop-filter:blur(14px); border-right:1px solid var(--line-soft);padding:20px 14px;position:sticky;top:0;height:100vh; overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent} .shell .side::-webkit-scrollbar{width:8px} .shell .side::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px} .shell .side .brand{padding:6px 10px 14px} .shell .side .grp{font-size:10px;color:var(--muted);font-weight:800;text-transform:uppercase; letter-spacing:.09em;padding:14px 12px 6px;opacity:.6} .shell .side .grp:first-of-type{padding-top:2px} .shell .side a{display:block;color:var(--muted);padding:9px 12px;border-radius:var(--radius-sm);margin-bottom:2px;font-weight:600;font-size:14px;transition:background .12s ease} .shell .side a:hover{background:var(--surface);color:var(--txt)} .shell .side a.on{background:linear-gradient(135deg,rgba(14,165,233,.22),rgba(34,211,238,.10));color:#fff; border:1px solid rgba(34,211,238,.28);box-shadow:0 0 18px -6px rgba(34,211,238,.5)} .shell .main{padding:26px 30px;min-width:0} .shell .main .head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px} /* abas dos painéis (ex.: detalhe da arena) — barra é o componente .tabs (acima) */ .tabpane{display:none} .tabpane.on{display:grid;gap:16px} /* .tabs — menu de abas (navegação entre seções da página): trilho inferior + aba ativa sublinhada. Distinto do .seg (toggle em pílula). Reaproveita .tabpane/.tabpane.on pro conteúdo. */ .tabs{display:flex;gap:2px;align-items:stretch;border-bottom:1px solid var(--line);margin:16px 0 20px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tabs a{position:relative;display:inline-flex;align-items:center;gap:7px;padding:11px 18px;color:var(--muted);font-weight:700;font-size:14.5px;line-height:1;white-space:nowrap;cursor:pointer;border-radius:10px 10px 0 0;transition:color .15s ease,background .15s ease} .tabs a:hover{color:var(--txt);background:var(--glass)} .tabs a.on{color:var(--txt)} .tabs a.on::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2.5px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,var(--primary),var(--secondary));box-shadow:0 1px 12px -1px var(--secondary)} .tabs a svg{width:16px;height:16px;flex:none;opacity:.85} @media(max-width:720px){.shell{grid-template-columns:1fr}.shell .side{display:flex;gap:6px;overflow:auto;height:auto}.shell .side .grp{display:none}.shell .main{padding:20px 16px}} /* ── estatísticas / gráficos ─────────────────────────────────────────────── */ .stat-grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)} @media(min-width:820px){.stat-grid{grid-template-columns:repeat(4,1fr)}} .stat{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent),var(--glass); border:1px solid var(--line-soft);border-radius:var(--radius);padding:16px 16px 12px; backdrop-filter:blur(12px);box-shadow:var(--shadow);animation:rise .4s ease both;transition:transform .18s ease,box-shadow .18s ease} .stat:hover{transform:translateY(-2px);box-shadow:var(--glow)} .stat::after{content:"";position:absolute;inset:0 0 auto 0;height:2px; background:linear-gradient(90deg,transparent,var(--secondary),transparent);opacity:.6} .stat-top{display:flex;justify-content:space-between;align-items:center;gap:8px} .stat-label{font-size:13px;color:var(--muted);font-weight:600} .delta{font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap;border:1px solid transparent} .delta.up{color:var(--accent);background:rgba(56,245,181,.10);border-color:rgba(56,245,181,.25)} .delta.down{color:var(--danger);background:rgba(249,112,102,.10);border-color:rgba(249,112,102,.25)} .delta.flat{color:var(--muted);background:rgba(255,255,255,.04)} .stat-val{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:2px 0 2px} .stat-spark{height:34px;margin:2px -4px 2px} .stat-sub{font-size:12px} .card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:-2px 0 12px} .card-head h3{margin:0;font-size:16px} .chart{display:block;overflow:visible} .spark{display:block} .chart-legend{display:flex;gap:16px;font-size:12px;color:var(--muted);margin-bottom:6px} .chart-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:middle} .tbl{width:100%;border-collapse:collapse} .tbl th,.tbl td{padding:10px 8px;border-bottom:1px solid var(--line);font-size:14px} .bar-track{height:8px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden} .bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--accent))} .link-card{color:var(--txt)} .link-card h3{margin-top:0;font-size:16px} .page-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 16px;flex-wrap:wrap} .seg{display:inline-flex;background:var(--glass);border:1px solid var(--line-soft);border-radius:999px;padding:3px;backdrop-filter:blur(8px)} .seg a{padding:6px 14px;border-radius:999px;color:var(--muted);font-weight:700;font-size:13px;transition:.15s ease} .seg a:hover{color:var(--txt)} .seg a.on{background:var(--btn-bg,linear-gradient(135deg,var(--primary),var(--secondary)));color:var(--btn-ink,#04121c);box-shadow:0 4px 14px -6px var(--secondary)} /* ── Logo: base comum às marcas (o símbolo vem de Core/views/logo/.php) ── */ .logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;line-height:1} /* o brilho sai da cor da marca — com rgba() cravado (era o ciano da ClipeArena) toda marca ganhava um halo azul em volta do símbolo dela. */ .logo-mark{flex:none;overflow:visible;transform-origin:center; filter:drop-shadow(0 3px 12px color-mix(in srgb,var(--secondary) 30%,transparent))} .lg-shield{stroke-dasharray:150;stroke-dashoffset:150;animation:lg-draw 1s cubic-bezier(.6,.05,.2,1) forwards} .lg-cam{opacity:0;transform-box:fill-box;transform-origin:center; animation:lg-pop .5s cubic-bezier(.34,1.56,.64,1) .5s forwards} .lg-play{transform-box:fill-box;transform-origin:center;opacity:0; animation:lg-pop .45s cubic-bezier(.34,1.56,.64,1) .68s forwards, lg-breathe 3.4s ease-in-out 1.6s infinite} .lg-spark{transform-box:view-box;transform-origin:24px 25px; animation:lg-orbit 1.1s cubic-bezier(.5,0,.3,1) .55s 2 both, lg-spark-out .4s ease 2.75s forwards} .logo:hover .logo-mark{animation:lg-spin .7s cubic-bezier(.6,.05,.2,1)} .logo-word{display:inline-flex;font-size:calc(var(--mk,30px)*.6);animation:lg-word .6s ease .5s both} .logo-word .w1{color:var(--txt)} .logo-word .w2{background:linear-gradient(120deg,var(--primary),var(--accent),var(--secondary),var(--accent)); /* impeccable-disable-next-line gradient-text -- logo/wordmark: identidade de marca, confirmado intencional */ background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent; animation:lg-shine 6s linear infinite} .logo-sub{font-size:11px;color:var(--muted);font-weight:600;text-transform:lowercase; border:1px solid var(--line-soft);padding:2px 8px;border-radius:999px;margin-left:2px} @keyframes lg-draw{to{stroke-dashoffset:0}} @keyframes lg-orbit{from{transform:rotate(0)}to{transform:rotate(360deg)}} @keyframes lg-spark-out{to{opacity:0}} @keyframes lg-pop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.14)}100%{transform:scale(1);opacity:1}} @keyframes lg-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}} @keyframes lg-spin{to{transform:rotate(360deg)}} @keyframes lg-word{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} @keyframes lg-shine{to{background-position:220% 0}} @media (prefers-reduced-motion:reduce){ .lg-shield{stroke-dashoffset:0;animation:none} .lg-cam{opacity:1;animation:none} .lg-play{opacity:1;animation:none} .lg-spark{opacity:0;animation:none} .logo:hover .logo-mark{animation:none} .logo-word,.logo-word .w2{animation:none} .logo-word .w2{background-position:0 0} } /* ── Símbolo Lancea: o arremesso ────────────────────────────────────────────── Verbo próprio, de propósito diferente do da ClipeArena: lá o escudo se DESENHA e o play RESPIRA (emblema que se monta); aqui a marca é ARREMESSADA e crava. Duas marcas no mesmo mercado não podem se mover igual — o movimento também é assinatura. */ .mk-lancea{--mk-a:var(--primary);--mk-b:var(--secondary)} /* halo puxado do --primary, não do --secondary: o lima claro (#BEF264) é luminoso demais e vira bloom em volta da marca nos tamanhos grandes. */ .mk-lancea .logo-mark{filter:drop-shadow(0 3px 11px color-mix(in srgb,var(--primary) 24%,transparent))} /* No tema claro o lima some no fundo — mesma lógica que o --accent já usa. Medido sobre o --bg claro (#EDF1F8): #BEF264 dá 1.4:1 e o próprio #84CC16 dá 1.75:1, abaixo do piso de 3:1 pra elemento gráfico. Nestas misturas os extremos ficam em 4.4:1 e 3.1:1 — o gradiente achata, e é o certo: no claro a marca é quase sólida, como o --accent. Só a Lancea; o escudo da ClipeArena fica exatamente como está. */ :root[data-theme="light"] .mk-lancea{ --mk-a:color-mix(in srgb,var(--primary) 54%,#0E1B30); --mk-b:color-mix(in srgb,var(--primary) 70%,#0E1B30); } /* Sem `both`/`backwards` e sem delay de propósito: com eles o estado ANTES da animação é o quadro inicial (opacity:0), e aí quem não roda animação — aba em segundo plano, renderizador headless, robô de captura — recebe a marca invisível. O repouso é o estado natural; a animação só passa por cima. */ .ln-body{transform-box:view-box;transform-origin:center; animation:ln-throw .6s cubic-bezier(.16,1,.3,1)} /* Riscos de velocidade: desenham junto com a entrada e somem. O símbolo parado fica limpo — a 22px dois riscos a mais viram sujeira. */ .ln-trail path{fill:none;stroke:var(--mk-a);stroke-width:3.6;stroke-linecap:round; stroke-dasharray:16;stroke-dashoffset:16; animation:ln-streak .42s cubic-bezier(.16,1,.3,1) .04s forwards, ln-vanish .26s ease .46s forwards} .ln-trail path:nth-child(2){stroke-width:2.6;animation-delay:.12s,.54s} .ln-glint{fill:#fff;opacity:.42;transform-box:view-box; animation:ln-glint 6s cubic-bezier(.5,0,.3,1) 1.4s infinite} .logo:hover .ln-body{animation:ln-thrust .5s cubic-bezier(.16,1,.3,1)} /* Wordmark entra atrás do símbolo, como se a lança a tivesse puxado. Sólida e com tracking mais fechado: a ClipeArena já usa wordmark bicolor com brilho, então aqui o contraste entre as marcas vem do silêncio da tipografia. */ /* a espera de 0,24s virou pausa DENTRO do keyframe (0%,32%) em vez de animation-delay, pelo mesmo motivo do .ln-body: delay + backwards deixaria a palavra invisível pra quem não roda animação. */ .mk-lancea .logo-word{letter-spacing:-.045em; animation:ln-word .74s cubic-bezier(.16,1,.3,1)} @keyframes ln-throw{from{opacity:0;transform:translate(-14px,14px) scale(.88)} to{opacity:1;transform:none}} @keyframes ln-streak{to{stroke-dashoffset:0}} @keyframes ln-vanish{to{opacity:0}} @keyframes ln-thrust{0%{transform:none}40%{transform:translate(4px,-4px)}100%{transform:none}} @keyframes ln-glint{0%,88%{transform:translateX(0)}100%{transform:translateX(96px)}} @keyframes ln-word{0%,32%{opacity:0;transform:translateX(-7px)}100%{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ .ln-body{animation:none;opacity:1;transform:none} .ln-trail{display:none} .ln-glint{animation:none;opacity:0} .logo:hover .ln-body{animation:none} .mk-lancea .logo-word{animation:none;opacity:1;transform:none} } /* ── Chaveamento de torneio (bracket) ─────────────────────────────────────── */ .bracket{display:flex;gap:22px;overflow-x:auto;padding:6px 2px 12px} .bround{display:flex;flex-direction:column;justify-content:space-around;gap:14px;min-width:210px} .brtit{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px} .bmatch{background:#0c1526;border:1px solid var(--line);border-radius:10px;padding:8px 10px} .brow{display:flex;justify-content:space-between;gap:10px;padding:3px 0} .brow b{font-variant-numeric:tabular-nums;color:var(--muted)} .brow.win{color:var(--accent);font-weight:700} .brow.win b{color:var(--accent)} .bscore{display:flex;align-items:center;gap:6px;margin-top:8px;border-top:1px dashed var(--line);padding-top:8px} .bscore input{width:52px;padding:6px 8px;text-align:center} .champ{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,rgba(56,245,181,.12),transparent);border:1px solid var(--accent);border-radius:12px;padding:12px 16px;margin-bottom:14px;font-weight:700} .bwatch{display:block;font-size:12px;margin-top:8px;color:var(--secondary);border-top:1px dashed var(--line);padding-top:6px} .jogos{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px} /* Reduzir movimento: quem pediu no sistema não recebe pulso do AO VIVO, entrada dos cards, shine/pop do logo nem transições longas. Neutraliza animação e transição globalmente (inclui as animações inline de home.php como lhpulse). PRODUCT.md exige respeitar isto. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }