/* ============================================================ CULTURA MARGINAL — SISTEMA DE DESIGN Um arquivo só (menos requisições = site mais rápido). Escrito celular-primeiro: o layout base é o do celular e vai ganhando colunas conforme a tela cresce. ============================================================ */ :root{ /* Paleta da marca */ --tinta:#0A0A0A; --base:#FFFFFF; --voz:#B5533C; --voz-claro:#D9775F; --apoio-a:#E6DC7A; --apoio-b:#79C7CC; /* Azul do símbolo — a barra da logo. Entra como cor de detalhe e de interação. O tom claro é o da marca (bom sobre preto e como preenchimento); o tom tinta é a versão escurecida, legível como texto sobre branco. */ --azul:#37C6DD; --azul-tinta:#0B7A8C; --azul-veu:rgba(55,198,221,.14); /* Neutros derivados */ --papel:#F7F5F1; --linha:#E2DDD4; --linha-forte:#C9C2B6; --texto-medio:#33312E; --texto-suave:#6B665F; --escuro-suave:#C9C6C1; /* Tipografia */ --f-display:'Archivo Black','Archivo Black Fallback',system-ui,sans-serif; --f-texto:'Archivo','Segoe UI',system-ui,-apple-system,sans-serif; /* Escala fluida — cresce junto com a tela, sem quebras bruscas */ --t-micro:clamp(10px,2.4vw,11.5px); --t-pequeno:clamp(13px,3vw,14px); --t-corpo:clamp(15.5px,3.6vw,17px); --t-medio:clamp(17px,4vw,19px); --t-grande:clamp(20px,4.6vw,24px); --t-h3:clamp(19px,4.4vw,23px); --t-h2:clamp(26px,6.4vw,40px); --t-h1:clamp(34px,9vw,68px); --t-hero:clamp(38px,10.5vw,84px); /* Espaçamento */ --gutter:clamp(18px,5vw,40px); --secao-y:clamp(44px,9vw,84px); --gap:clamp(16px,3.4vw,28px); --maxw:1180px; --maxw-texto:68ch; /* Blocos escuros de propósito (rodapé, barra do tocador, caixa preta, capa de vídeo). No tema claro são o inverso da página; no escuro continuam escuros, um tom acima do fundo, pra ainda se destacarem. */ --escuro-fundo:var(--tinta); --escuro-texto:var(--base); --raio:6px; --transicao:180ms cubic-bezier(.2,.7,.3,1); } /* ============================================================ TEMA ESCURO ============================================================ Duas portas: a preferência do sistema da pessoa e o botão no cabeçalho, que grava data-tema no e sempre ganha do sistema. Só as cores mudam — o layout é exatamente o mesmo. */ @media (prefers-color-scheme:dark){ :root:not([data-tema="claro"]){ --tinta:#F2F0EC; --base:#0E0E10; --papel:#17171A; --linha:#2B2B30; --linha-forte:#3E3E45; --texto-medio:#CFCBC4; --texto-suave:#9A958D; --voz:#D9775F; --voz-claro:#E89C87; --azul-tinta:#4FD5EA; --azul-veu:rgba(55,198,221,.12); --escuro-fundo:#17171A; --escuro-texto:#F2F0EC; color-scheme:dark; } } :root[data-tema="escuro"]{ --tinta:#F2F0EC; --base:#0E0E10; --papel:#17171A; --linha:#2B2B30; --linha-forte:#3E3E45; --texto-medio:#CFCBC4; --texto-suave:#9A958D; --voz:#D9775F; --voz-claro:#E89C87; --azul-tinta:#4FD5EA; --azul-veu:rgba(55,198,221,.12); --escuro-fundo:#17171A; --escuro-texto:#F2F0EC; color-scheme:dark; } :root[data-tema="claro"]{color-scheme:light} *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:90px; } body{ margin:0; background:var(--base); color:var(--tinta); font-family:var(--f-texto); font-size:var(--t-corpo); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } body.nav-aberto{overflow:hidden} img,svg,video,audio,iframe{max-width:100%} img,svg,video{display:block;height:auto} a{color:inherit} p{margin:0} ul{margin:0;padding:0;list-style:none} button,input,select,textarea{font-family:inherit;font-size:inherit} button{cursor:pointer} h1,h2,h3,h4{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:-0.015em; line-height:0.98; margin:0; text-wrap:balance; overflow-wrap:break-word; } h1{font-size:var(--t-h1)} h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3)} :focus-visible{outline:3px solid var(--azul-tinta);outline-offset:3px;border-radius:2px} /* ---------- utilitários ---------- */ .container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .campo-oculto{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .pular-para-conteudo{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--tinta);color:var(--base); padding:12px 20px;text-decoration:none;font-weight:600; } .pular-para-conteudo:focus{left:12px;top:12px} .rotulo{ font:600 var(--t-micro)/1.3 var(--f-texto); letter-spacing:.18em; text-transform:uppercase; margin:0; } .rotulo.destaque{color:var(--voz)} .eyebrow{ display:flex;align-items:center;gap:12px; margin:0 0 16px; } .eyebrow .barra{width:32px;height:5px;background:var(--azul);flex:none;border-radius:2px} .secao{padding-block:var(--secao-y)} .secao + .secao{padding-top:0} .secao-titulo{ display:flex;align-items:baseline;justify-content:space-between; gap:12px;flex-wrap:wrap;margin-bottom:clamp(20px,4vw,32px); border-top:2px solid var(--tinta);padding-top:18px; } .secao-titulo h2{flex:1 1 auto;min-width:0} .secao-titulo .link-secao{ font:600 var(--t-micro)/1 var(--f-texto); letter-spacing:.12em;text-transform:uppercase; text-decoration:none;color:var(--voz);white-space:nowrap; padding:6px 0;border-bottom:2px solid transparent; transition:border-color var(--transicao); } .secao-titulo .link-secao:hover{border-bottom-color:var(--azul);color:var(--azul-tinta)} /* No tema escuro o terracota some no preto; o azul da marca lê muito melhor. */ @media (prefers-color-scheme:dark){ :root:not([data-tema="claro"]) .secao-titulo .link-secao, :root:not([data-tema="claro"]) .rotulo.destaque{color:var(--azul)} } :root[data-tema="escuro"] .secao-titulo .link-secao, :root[data-tema="escuro"] .rotulo.destaque{color:var(--azul)} .texto-longo{max-width:var(--maxw-texto);color:var(--texto-medio)} .texto-longo p{margin-bottom:1.1em} .texto-longo p:last-child{margin-bottom:0} .pequeno{font-size:var(--t-pequeno);color:var(--texto-suave)} /* ---------- botões ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:48px; padding:13px 24px; font:600 var(--t-pequeno)/1 var(--f-texto); letter-spacing:.12em;text-transform:uppercase; text-decoration:none;text-align:center; border:2px solid var(--tinta);border-radius:var(--raio); background:transparent;color:var(--tinta); transition:background var(--transicao),color var(--transicao),transform var(--transicao),border-color var(--transicao); } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn-solido{background:var(--tinta);color:var(--base)} .btn-solido:hover{background:var(--voz);border-color:var(--voz);color:#fff} .btn-contorno:hover{background:var(--tinta);color:var(--base)} .btn-solido.negativo{background:var(--escuro-texto);color:var(--escuro-fundo);border-color:var(--escuro-texto)} .btn-solido.negativo:hover{background:var(--voz);border-color:var(--voz);color:#fff} .btn-contorno.negativo{border-color:var(--escuro-texto);color:var(--escuro-texto)} .btn-contorno.negativo:hover{background:var(--escuro-texto);color:var(--escuro-fundo)} .btn-pequeno{min-height:42px;padding:10px 16px;font-size:var(--t-micro)} .grupo-botoes{display:flex;flex-wrap:wrap;gap:12px} /* ---------- barra de notícias ---------- Faixa decorativa que rola sozinha (Painel → Textos das páginas → Barra de notícias liga/desliga). É pura CSS: a lista de itens é repetida uma vez (ver partials/barra-noticias.php) e a animação translada a fita até a metade do seu próprio comprimento — como a segunda metade é idêntica à primeira, o corte é invisível e o loop parece infinito. Fica ACIMA do cabeçalho e não é fixa: rola junto com a página, pra não ocupar tela depois que a pessoa já viu a novidade. */ /* Ao contrário do rodapé/tocador (sempre escuros, ver --escuro-fundo), a faixa usa --tinta/--base direto: essas duas INVERTEM de tema pra tema, então a faixa fica preta-com-texto-branco no claro e branca-com-texto-preto no escuro — sempre no extremo oposto do fundo da página, pra se destacar em vez de ficar preta em cima de qualquer coisa nos dois temas. */ .barra-noticias{ background:var(--tinta);color:var(--base); display:flex;align-items:stretch; position:relative;overflow:hidden; } .barra-noticias-pista{ flex:1 1 auto;min-width:0;overflow:hidden; /* Some suavemente nas duas pontas, em vez de cortar o texto no meio. */ -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent); } .barra-noticias-lista{ display:flex;align-items:stretch;width:max-content; list-style:none;margin:0;padding:0; animation:barra-rolar var(--barra-duracao,20s) linear infinite; } /* Só a PISTA (o texto que rola) pausa por hover/foco — nunca a faixa inteira. O botão de pausar fica fora da pista mas dentro de .barra-noticias: se o gatilho fosse o container todo, o próprio botão ficaria com foco depois do clique (comportamento padrão do navegador ao clicar num