/*! * site-shell.css — CASCO das páginas públicas do sistema: base, topo e rodapé. * * Usado pela landing (`/`), por `/termos` e por `/privacidade` — e pela futura `/sobre`. Nasceu * para a landing e a `/precos`, que tinham cada uma o seu cabeçalho: a /precos abria com * "SC — Sistema Campeonato" em texto e paleta azul-royal, de uma época anterior ao site atual. * Duas versões do mesmo cabeçalho divergem sempre. A /precos foi aposentada em 2026-08-02 * (virou redirect), mas o casco continua valendo — só mudaram as páginas que o vestem. * * As CORES vêm de variáveis emitidas pelo servidor (partials/site_vars), porque dependem da * marca configurada no Master. Aqui ficam só as regras. */ /* ── Base ────────────────────────────────────────────────────────────────── */ html { scroll-behavior: smooth } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } } /* o topo é sticky (66px) — sem isto a âncora para embaixo dele */ section[id] { scroll-margin-top: 70px } body { margin:0; font-family:var(--sans); color:var(--ink); background:var(--paper); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased } h1,h2,h3,p { margin:0 } a { color:inherit; text-decoration:none } img { max-width:100% } .wrap { max-width:var(--wrap); margin:0 auto; padding:0 24px } .eyebrow { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.16em; color:var(--eyebrow,var(--red)) } .eyebrow.on-dark { color:var(--eyebrow,#ff5a63) } .btn { display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:15px; padding:13px 22px; border-radius:9px; border:1.5px solid transparent; cursor:pointer; transition:transform .12s, background .15s; white-space:nowrap } .btn:active { transform:translateY(1px) } .btn-red { background:var(--red); color:#fff; box-shadow:0 10px 24px -12px rgba(229,2,14,.8) } .btn-red:hover { background:var(--red-2) } .btn-ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.28) } .btn-ghost:hover { border-color:#fff; background:rgba(255,255,255,.06) } .btn-outline { background:transparent; color:var(--navy); border-color:#cfd8e6 } .btn-outline:hover { background:var(--ice) } /* ── Topo ────────────────────────────────────────────────────────────────── */ /* cinza NEUTRO nas bordas/hover: branco translúcido some em barra clara, preto some em barra escura — a cor da barra é do organizador, então nenhum dos dois pode ser assumido */ header.nav { position:sticky; top:0; z-index:40; border-bottom:1px solid rgba(128,128,128,.22) } /* o desfoque mora numa CAMADA PRÓPRIA, não no header: `backdrop-filter` num ancestral faz `position:fixed` dos descendentes se ancorar nele em vez de na janela — foi o que prendeu a gaveta do menu dentro da altura da barra */ .navbg { position:absolute; inset:0; backdrop-filter:saturate(1.2) blur(10px); pointer-events:none } .nav .wrap { display:flex; align-items:center; gap:26px; height:var(--nav-h); position:relative; z-index:1 } .logo { display:inline-flex; align-items:center; gap:9px; color:#fff; font-weight:800; font-size:19px } .logo img { height:30px; width:auto } /* (`.logo .wm b` saiu em 2026-08-10: nenhum `.wm` tem dentro. Era de quando o nome da marca vinha partido no blade, com a segunda palavra em negrito — hoje é `{{ $sh['brandName'] }}`, texto puro vindo de Configurações, e o negrito parcial não teria onde cair.) */ .nav nav { display:flex; gap:20px; margin-left:14px; min-width:0; flex-wrap:nowrap } .nav nav a { color:var(--nav-fg); opacity:.85; font-weight:600; font-size:14px; white-space:nowrap } .nav nav a:hover { opacity:1 } .nav nav a i { display:none } /* no desktop o menu é só texto */ .nav .sp { flex:1 } .btn-nav { padding:9px 17px; font-size:14px } .navtoggle { display:none; position:relative; width:38px; height:38px; background:none; border:0; padding:0; border-radius:9px; color:var(--nav-fg); cursor:pointer; transition:background .15s } .navtoggle:hover { background:rgba(128,128,128,.18) } .navtoggle .bar { position:absolute; left:9px; width:20px; height:2px; border-radius:2px; background:currentColor; transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .2s } .navtoggle .bar:nth-child(1) { top:12px } .navtoggle .bar:nth-child(2) { top:18px } .navtoggle .bar:nth-child(3) { top:24px } .navtoggle.open .bar:nth-child(1) { transform:translateY(6px) rotate(45deg) } .navtoggle.open .bar:nth-child(2) { opacity:0 } .navtoggle.open .bar:nth-child(3) { transform:translateY(-6px) rotate(-45deg) } @media (max-width:1120px) { .nav nav { gap:15px; font-size:13.5px } } @media (max-width:980px) { /* mobile: hambúrguer à esquerda, LOGO CENTRALIZADO, CTA à direita. GRADE, não `position:absolute`: fora do fluxo o logo não empurra nada e passava por cima do botão em telas estreitas. Aqui ele centraliza DENTRO da coluna do meio, que é exatamente o espaço livre entre os dois controles — não há como invadir. */ .nav .wrap { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px } .navtoggle { display:inline-flex; align-items:center; justify-self:start } .nav .sp { display:none } .logo { justify-self:center; min-width:0 } /* `object-fit:contain` é obrigatório aqui: com altura fixa + `max-width`, em tela estreita o logo era ESPREMIDO na horizontal (499x92 renderizando 113x26) em vez de encolher */ .logo img { max-width:100%; object-fit:contain } /* Painel que desce a partir da barra. Anima por `max-height`/`opacity` — `display:none` não tem o que animar. `visibility` sai junto para os links não serem alcançáveis por teclado enquanto fechado; `overflow:hidden` é o que faz o conteúdo ser revelado. */ .nav nav { position:absolute; top:100%; left:0; right:0; margin:0; padding:0; z-index:41; flex-direction:column; gap:0; background:var(--nav-solid); border-top:1px solid rgba(128,128,128,.22); box-shadow:0 26px 44px -26px rgba(0,0,0,.45); overflow:hidden; max-height:0; opacity:0; visibility:hidden; transition:max-height .45s cubic-bezier(.4,0,.2,1), opacity .3s ease, visibility .45s } .nav nav.open { max-height:min(78vh,560px); opacity:1; visibility:visible; overflow-y:auto } .nav nav a { display:flex; align-items:center; gap:13px; padding:13px 24px; font-size:15.5px; opacity:1 } .nav nav a:hover { background:rgba(128,128,128,.16) } /* largura fixa alinha os rótulos numa coluna só, mesmo com ícones de larguras diferentes */ .nav nav a i { display:inline-flex; justify-content:center; width:22px; font-size:17px; color:var(--nav-icon); opacity:.95 } } @media (prefers-reduced-motion:reduce) { .nav nav, .navtoggle .bar { transition:none } } @media (max-width:640px) { :root { --nav-h:60px } .nav-entrar { display:none } .nav .wrap { gap:10px } .btn-nav { padding:8px 13px } .logo img { height:26px } } /* ── Rodapé ──────────────────────────────────────────────────────────────── */ /* Cores do rodapé: editáveis em Master → Site (grupo Rodapé). O estilo inline do