/* brand.css — fonte única de design (ver brand.md na raiz do repo) Derivado do Manual da Marca Seu Elias Barber Day. Deve ser linkado ANTES de tv.css/mobile.css/estilos locais em toda superfície. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&family=Michroma&display=swap'); :root{ /* ── Neutros (escada do manual; preto da marca = #141414) ── */ --bg:#0C0C0C; --surface-1:#141414; --surface-2:#1C1C1C; --surface-3:#262626; --border:#2A2A2A; --border-strong:#3D3D3D; --text:#F2EDE4; /* creme da marca — nunca #fff em texto */ --text-2:#C9C5BD; --muted:#A3A19B; --muted-2:#807E79; /* cinza mais escuro permitido p/ texto */ /* ── Cartela primária (manual pág. 2) ── */ --purple-base:#9B62D5; --purple-400:#AE7EDE; --purple-300:#C6A4EA; --purple-950:#221333; --blue-base:#0058C0; --blue-400:#3D8DEB; --blue-300:#7AB2F2; --blue-950:#0A1B33; --green-base:#008957; --green-400:#17B87E; --green-300:#4FD6A4; --green-950:#07231A; --red-base:#FF3B3B; --red-400:#FF6B6B; --red-300:#FF9B9B; --red-950:#2E0F0F; --magenta-base:#D72977;--magenta-400:#E75694;--magenta-300:#F08BB6;--magenta-950:#2B0E1C; /* ── Semânticas (status de dado — nunca identidade de produto) ── */ --ok:var(--green-400); --ok-text:var(--green-300); --ok-bg:var(--green-950); --danger:var(--red-400); --danger-text:var(--red-300); --danger-bg:var(--red-950); --warn:#FFB020; --warn-text:#FFC95C; --warn-bg:#2B1D06; --warn-border:#5A3D10; /* ── Produtos (brand.md §3.3 — REGRA MESTRA, nunca realocar) ── */ --prod-educators:#9B62D5; --prod-educators-text:#C6A4EA; --prod-educators-bg:#221333; --prod-business:#008957; --prod-business-text:#4FD6A4; --prod-business-bg:#07231A; --prod-visage:#F2EDE4; --prod-visage-text:#F2EDE4; --prod-visage-bg:#26231C; --prod-academy:#FFFFFF; --prod-academy-text:#FFFFFF; --prod-academy-bg:#232323; /* ── Ranking ── */ --gold:#E8B84B; --gold-bg:#2B2208; --silver:#B8BCC4; --silver-bg:#232529; --bronze:#C98A4B; --bronze-bg:#291B0E; /* ── Tipografia ── */ --font-display:'Michroma','State Wide',sans-serif; --font-ui:'Inter','Neue Haas Grotesk Display Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; /* ── Forma ── */ --radius:12px; --radius-sm:8px; --radius-pill:999px; /* ── Acento default (login/admin/espelho = azul institucional) ── */ --accent:var(--blue-400); --accent-hi:var(--blue-300); --accent-bg:var(--blue-950); } /* Acento por tela (brand.md §3.4): a página declara */ body[data-tv="1"],body[data-tv="3"],body[data-tv="7"]{--accent:var(--blue-400);--accent-hi:var(--blue-300);--accent-bg:var(--blue-950)} body[data-tv="4"],body[data-tv="6"]{--accent:var(--purple-400);--accent-hi:var(--purple-300);--accent-bg:var(--purple-950)} body[data-tv="5"],body[data-tv="8"]{--accent:var(--magenta-400);--accent-hi:var(--magenta-300);--accent-bg:var(--magenta-950)} body[data-tv="2"]{--accent:var(--warn);--accent-hi:var(--warn-text);--accent-bg:var(--warn-bg)} body{font-variant-numeric:tabular-nums} /* Wordmark / título display (State Wide → Michroma) */ .brand-display{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em; font-weight:400; /* Michroma só tem 400 */ } /* ── Skeleton de loading ── */ .skeleton{ background:var(--surface-2); border-radius:var(--radius-sm); animation:sk-pulse 1.4s ease-in-out infinite; color:transparent!important; pointer-events:none; min-height:1em; } @keyframes sk-pulse{0%,100%{opacity:1}50%{opacity:.45}} /* ── Banner de erro com retry (mantém o último dado na tela) ── */ .err-banner{ display:flex;align-items:center;justify-content:center;gap:.6em; background:var(--danger-bg);border:1px solid #5A2020; color:var(--danger-text); padding:.45em 1em;border-radius:var(--radius-sm); font-size:.9em;font-weight:500; } .err-banner button{ background:transparent;border:1px solid var(--danger); color:var(--danger-text);font-family:inherit;font-size:.92em;font-weight:600; padding:.2em .8em;border-radius:var(--radius-pill);cursor:pointer; transition:background .15s; } .err-banner button:hover{background:var(--danger-bg)} /* ── Logo (brasão BDU) nos headers — injetada pelo shell.js ── */ .tv-header .hdr-logo{height:2.2cqw;width:auto;display:block;flex-shrink:0} .m-header .hdr-logo{height:26px;width:auto;vertical-align:middle;margin-right:8px} /* ── Ações do header das TVs (shell.js) ── */ .tv-header .hdr-btn{ background:none;border:1px solid var(--border-strong);color:var(--muted); padding:.15cqw .6cqw;border-radius:.3cqw;font-size:.75cqw;font-family:inherit; font-weight:600;cursor:pointer;margin-left:.5cqw; transition:color .15s,border-color .15s; } .tv-header .hdr-btn:hover{color:var(--accent-hi);border-color:var(--accent)} .tv-header .hdr-btn.hdr-btn-danger:hover{color:var(--danger);border-color:var(--danger)} .tv-header .hdr-btn:disabled{opacity:.6;cursor:default} /* ── Grafismo: arcos concêntricos da marca (login/estados vazios) ── */ .brand-arcs{ position:absolute;pointer-events:none; border:2px solid var(--surface-3);border-radius:50%; opacity:.6; }