/* ============================================================================ DESIGN SYSTEM · TOKENS (2026-10-02; escala de texto, recuo e quebras: 2026-10-03; voz tipográfica, texto fluido --ds-fl-* e classes .ds-em / .ds-display: 2026-10-03) Medidas tiradas da área do aluno de referência em 1512 px, logado (_dev/g4-spec.md). Só valores e base: cores, tipos, espaços, raios, sombras, pontos de quebra. Componentes ficam em ds-componentes.css. Nada aqui copia código da G4. ========================================================================== */ :root{ /* cores */ --ds-navy:#001F35; /* topo, rodapé, botão principal */ --ds-navy-2:#0A2D47; /* navy um passo acima (hover) */ --ds-papel:#F5F4F3; /* fundo das páginas */ --ds-branco:#FFFFFF; /* 2026-10-02 (dono): "retire a cor vermelha e coloque outra mais congruente nossa". O coral e o tijolo viraram o bronze e o navy da marca (logo dourado #C69C6D). Os nomes dos tokens ficam (todo o CSS usa eles); só o valor mudou. */ --ds-coral:#0A2D47; /* navy da marca: títulos de seção, botão de destaque (o bronze parecia laranja: dono, 2026-10-02) */ --ds-coral-2:#1B4468; /* navy claro: fim do gradiente */ --ds-coral-claro:#E8EDF2; /* fundo de etiqueta (navy sobre ele) */ --ds-tijolo:#0A2D47; /* navy da marca: capa INICIAR, certificado trancado, fase ativa */ --ds-tijolo-2:#001F35; --ds-dourado:#B9915B; /* detalhe da marca */ --ds-tinta:#233140; /* texto corrido */ --ds-tinta-2:#4A5765; /* texto secundário */ --ds-cinza:#8A949E; /* meta, ícones apagados */ --ds-cinza-fase:#B5BCC6; /* bolinha de fase inativa */ --ds-linha:#E3E1DE; /* bordas e divisórias */ --ds-lateral:#F5F5F5; /* barra lateral do player */ --ds-campo:#F8F8F8; /* fundo dos campos */ --ds-ok:#2E6B57; /* acerto/concluído: verde fechado, combina com o navy (branco 6,3:1) */ --ds-erro:#8C3B33; /* erro/resposta errada: vinho fechado, só para erro (nunca coral; branco 7,5:1) */ /* PALETA DA MARCA (dono, 2026-10-02: "deixe todas as cores congruentes" e "cores que de fato fazem sentido"). Só estas cores entram no site. Motivo de cada grupo: navy ........ estrutura (topo, rodapé, cards, botões, títulos) — cor de fundo das capas ouro ........ detalhe da marca (logo, cadeado, linhas, ícone sobre o navy) — cor da logo claros ...... fundos e etiquetas ok / erro ... SÓ estado de acerto/concluído e de erro (feedback), em tom fechado */ --ds-navy-3:#12395A; --ds-navy-4:#1B4468; --ds-navy-claro:#E8EDF2; /* fundo de etiqueta e de destaque claro */ --ds-ouro:#C69C6D; /* dourado da logo: só sobre navy (6,7:1) ou como detalhe */ --ds-ouro-claro:#F1E6D6; /* creme dourado: fundo de destaque (navy sobre ele 11,5:1) */ --ds-creme:#F7F2E8; --ds-ok-claro:#E7F1EC; --ds-erro-claro:#F6ECEA; --ds-gradiente-card:linear-gradient(93deg, #001F35 25%, #12395A 100%); /* cards do início: navy da marca, texto branco */ /* ---------- FAMÍLIAS (2026-10-03, voz tipográfica do modelo: _dev/g4-startups-spec.md §1) ---------- Só fontes locais e livres (assets/fonts, declaradas em fontes.css). Use SEMPRE o token, nunca o nome da fonte. --ds-fonte ......... Manrope 400/600/800: TODO texto de interface, títulos de seção, botões, topo, rodapé. --ds-fonte-titulo .. Manrope (era Montserrat até 2026-10-03; Montserrat saiu de uso). O nome fica porque o CSS da aula e dos cards usa ele. --ds-fonte-card .... Libre Baskerville: título de card e de curso, nome de pessoa. --ds-fonte-serifa .. Libre Baskerville: realce .ds-em (itálico 400), nomes, números grandes. --ds-fonte-display . Marcellus 400 MAIÚSCULO: só título de vitrine (classe .ds-display). Pesos da voz: título de seção 400 (leve) + 1 trecho em .ds-em · título de item 600 · botão 800. */ --ds-fonte:'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --ds-fonte-titulo:'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --ds-fonte-card:'Libre Baskerville', Georgia, 'Times New Roman', Times, serif; --ds-fonte-serifa:'Libre Baskerville', Georgia, 'Times New Roman', Times, serif; --ds-fonte-display:'Marcellus', 'Libre Baskerville', Georgia, 'Times New Roman', serif; /* só no editor de JSON do ADM (campo de código). Nenhum texto de tela usa. */ --ds-fonte-codigo:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ds-peso-titulo:400; /* título de seção */ --ds-peso-item:600; /* título de item de lista */ --ds-peso-botao:800; /* botão */ /* ---------- TEXTO FLUIDO (2026-10-03, tabela do modelo: _dev/g4-startups-spec.md §1) ---------- O texto cresce com a largura da tela (vw) entre um piso e um teto: sem salto entre faixas. Pisos: leitura ≥ 14 px, rótulo ≥ 11 px. Uso: font-size:var(--ds-fl-secao); ou font:var(--ds-f-fl-secao); token regra 320–1200 1512 1920 2560 onde usar --ds-fl-display clamp(26px, 2vw + 6px, 44px) 26–30 36,2 44 44 título de vitrine (.ds-display) --ds-fl-sub clamp(22px, 2vw, 40px) 22–24 30,2 38,4 40 subtítulo da vitrine --ds-fl-secao clamp(22px, 1.7vw, 34px) 22 25,7 32,6 34 título de seção --ds-fl-cartao clamp(20px, 1.8vw, 34px) 20–21,6 27,2 34 34 título de cartão --ds-fl-item clamp(15px, 1vw, 19px) 15 15,1 19 19 título de item (peso 600) --ds-fl-texto clamp(15px, 1vw, 18px) 15 15,1 18 18 texto de item, lh 1,5 --ds-fl-dado clamp(14px, .9vw, 16px) 14 14 16 16 faixa de dados (o modelo desce a 13; nosso piso é 14) --ds-fl-menu clamp(14px, .9vw, 16px) 14 14 16 16 link de menu --ds-fl-rotulo clamp(11px, .75vw, 13px) 11 11,3 13 13 etiqueta-pílula MAIÚSCULA (nunca texto de leitura) */ --ds-fl-display:clamp(26px, calc(2vw + 6px), 44px); --ds-fl-sub:clamp(22px, 2vw, 40px); --ds-fl-secao:clamp(22px, 1.7vw, 34px); --ds-fl-cartao:clamp(20px, 1.8vw, 34px); --ds-fl-item:clamp(15px, 1vw, 19px); --ds-fl-texto:clamp(15px, 1vw, 18px); --ds-fl-dado:clamp(14px, .9vw, 16px); --ds-fl-menu:clamp(14px, .9vw, 16px); --ds-fl-rotulo:clamp(11px, .75vw, 13px); --ds-lh-fl-display:1; --ds-lh-fl-titulo:1.2; --ds-lh-fl-texto:1.5; /* atalhos fluidos para a propriedade font */ --ds-f-fl-display:var(--ds-peso-titulo) var(--ds-fl-display)/var(--ds-lh-fl-display) var(--ds-fonte-display); --ds-f-fl-sub:var(--ds-peso-titulo) var(--ds-fl-sub)/var(--ds-lh-fl-titulo) var(--ds-fonte); --ds-f-fl-secao:var(--ds-peso-titulo) var(--ds-fl-secao)/var(--ds-lh-fl-titulo) var(--ds-fonte); --ds-f-fl-cartao:var(--ds-peso-titulo) var(--ds-fl-cartao)/1.15 var(--ds-fonte-card); --ds-f-fl-item:var(--ds-peso-item) var(--ds-fl-item)/1.35 var(--ds-fonte); --ds-f-fl-texto:400 var(--ds-fl-texto)/var(--ds-lh-fl-texto) var(--ds-fonte); --ds-f-fl-dado:400 var(--ds-fl-dado)/var(--ds-lh-fl-texto) var(--ds-fonte); --ds-f-fl-menu:400 var(--ds-fl-menu)/1.4 var(--ds-fonte); /* ---------- ESCALA DE TEXTO POR FAIXA (2026-10-03) ---------- A referência declara o texto em rem e muda a raiz por faixa de largura: ≥ 991 ............ 100 % (desktop e tablet deitado) 768 – 990.98 ..... 90 % (tablet em pé) 501 – 767.98 ..... 80 % (celular deitado) ≤ 500.98 ......... 100 % (celular em pé usa o MESMO tamanho do desktop) Aqui a raiz não muda (o site é em px): cada token multiplica por --ds-escala. Pisos (contrato §0.6 e D2): texto de leitura nunca < 14 px, rótulo nunca < 11 px. Uso: font-size:var(--ds-fs-texto); line-height:var(--ds-lh-texto); (ou font:var(--ds-f-texto)) Valores em 1512 → nome do token → onde aparece na referência (o peso 700 dos títulos e dos botões desta tabela é o da medida antiga: hoje o peso vem de --ds-peso-titulo / --ds-peso-item / --ds-peso-botao): 50/700/1.25 --ds-fs-titulo-xg título muito grande 42/700/1.25 --ds-fs-titulo-g "Sua Jornada…" (= --ds-fs-h2) 34/700/1.25 --ds-fs-titulo-m "O início da sua jornada", "Cursos Complementares" 34/700/1.35 --ds-fs-destaque linha da palavra digitando 23/700/1.35 --ds-fs-secao "Minhas Formações", títulos de seção 26/700/1.4 --ds-fs-curso título da página do curso 18/700/1.4 --ds-fs-h3 "Canais" do rodapé 18/400/1.55 --ds-fs-h4 descrição do curso (no cartão: 700) 26/400/1.35 --ds-fs-texto-xg texto ao lado do vídeo 22/400/1.6 --ds-fs-texto-g texto grande 17/400/1.65 --ds-fs-texto texto corrido, links do topo (= --ds-fs-ui) 15/400/1.65 --ds-fs-texto-p links do rodapé, © 13/400/1.7 --ds-fs-texto-pp "Voltar ao programa" do player (piso de rótulo) 26/400/1.55 --ds-fs-citacao título da faixa "Acessar" (com 700) 16/400/1.55 --ds-fs-sobre sobre-título MAIÚSCULO, ls .5px (piso 14) 12/400/1.55 --ds-fs-rotulo "54% CONCLUIR" do card, MAIÚSCULO, ls .5px 18/700 --ds-fs-botao botão grande (padding 15×40) 14/400 --ds-fs-botao-p botão pequeno (padding 11×32) */ --ds-escala:1; --ds-fs-titulo-xg:calc(50px * var(--ds-escala)); --ds-fs-titulo-g:calc(42px * var(--ds-escala)); --ds-fs-titulo-m:calc(34px * var(--ds-escala)); --ds-fs-destaque:calc(34px * var(--ds-escala)); --ds-fs-secao:calc(23px * var(--ds-escala)); --ds-fs-curso:calc(26px * var(--ds-escala)); --ds-fs-h3:calc(18px * var(--ds-escala)); --ds-fs-h4:calc(18px * var(--ds-escala)); --ds-fs-texto-xg:calc(26px * var(--ds-escala)); --ds-fs-texto-g:calc(22px * var(--ds-escala)); --ds-fs-texto:max(14px, calc(17px * var(--ds-escala))); --ds-fs-texto-p:max(14px, calc(15px * var(--ds-escala))); --ds-fs-texto-pp:max(11px, calc(13px * var(--ds-escala))); --ds-fs-citacao:calc(26px * var(--ds-escala)); --ds-fs-sobre:max(14px, calc(16px * var(--ds-escala))); /* piso 14: costuma ser

(o medidor conta

como leitura) */ --ds-fs-rotulo:max(11px, calc(12px * var(--ds-escala))); --ds-fs-botao:max(14px, calc(18px * var(--ds-escala))); --ds-fs-botao-p:max(11px, calc(14px * var(--ds-escala))); --ds-ls-sobre:.5px; /* alturas de linha (sem unidade: acompanham o tamanho) */ --ds-lh-titulo:1.25; --ds-lh-destaque:1.35; --ds-lh-h3:1.4; --ds-lh-h4:1.55; --ds-lh-texto-xg:1.35; --ds-lh-texto-g:1.6; --ds-lh-texto:1.65; --ds-lh-texto-pp:1.7; --ds-lh-citacao:1.55; --ds-lh-sobre:1.55; /* atalhos para a propriedade font (peso tamanho/linha família). 2026-10-03 (voz do modelo): os de título usam --ds-peso-titulo (400), o h3 usa --ds-peso-item (600) e os de botão usam --ds-peso-botao (800). Os tamanhos não mudaram. */ --ds-f-titulo-xg:var(--ds-peso-titulo) var(--ds-fs-titulo-xg)/var(--ds-lh-titulo) var(--ds-fonte); --ds-f-titulo-g:var(--ds-peso-titulo) var(--ds-fs-titulo-g)/var(--ds-lh-titulo) var(--ds-fonte); --ds-f-titulo-m:var(--ds-peso-titulo) var(--ds-fs-titulo-m)/var(--ds-lh-titulo) var(--ds-fonte); --ds-f-destaque:var(--ds-peso-titulo) var(--ds-fs-destaque)/var(--ds-lh-destaque) var(--ds-fonte); --ds-f-secao:var(--ds-peso-titulo) var(--ds-fs-secao)/var(--ds-lh-destaque) var(--ds-fonte); --ds-f-curso:var(--ds-peso-titulo) var(--ds-fs-curso)/var(--ds-lh-h3) var(--ds-fonte-card); --ds-f-h3:var(--ds-peso-item) var(--ds-fs-h3)/var(--ds-lh-h3) var(--ds-fonte); --ds-f-h4:400 var(--ds-fs-h4)/var(--ds-lh-h4) var(--ds-fonte); --ds-f-texto-xg:400 var(--ds-fs-texto-xg)/var(--ds-lh-texto-xg) var(--ds-fonte); --ds-f-texto-g:400 var(--ds-fs-texto-g)/var(--ds-lh-texto-g) var(--ds-fonte); --ds-f-texto:400 var(--ds-fs-texto)/var(--ds-lh-texto) var(--ds-fonte); --ds-f-texto-p:400 var(--ds-fs-texto-p)/var(--ds-lh-texto) var(--ds-fonte); --ds-f-texto-pp:400 var(--ds-fs-texto-pp)/var(--ds-lh-texto-pp) var(--ds-fonte); --ds-f-citacao:400 var(--ds-fs-citacao)/var(--ds-lh-citacao) var(--ds-fonte); --ds-f-sobre:400 var(--ds-fs-sobre)/var(--ds-lh-sobre) var(--ds-fonte); --ds-f-botao:var(--ds-peso-botao) var(--ds-fs-botao)/1.2 var(--ds-fonte); --ds-f-botao-p:var(--ds-peso-botao) var(--ds-fs-botao-p)/1.65 var(--ds-fonte); /* nomes antigos (continuam valendo; agora seguem a escala) */ --ds-fs-meta:max(11px, calc(13px * var(--ds-escala))); /* meta do card de curso: 13 px */ --ds-fs-corpo:16px; /* tamanho base do (não escala: o ADM usa) */ --ds-fs-ui:var(--ds-fs-texto); --ds-fs-aula:24px; /* título da aula no player: 24/700/30 (pacote da aula não escala) */ --ds-fs-h2:var(--ds-fs-titulo-g); --ds-lh:1.65; /* ---------- ESPAÇOS E LARGURAS (2026-10-03) ---------- Contêiner da referência: 1170 px com recuo de 25 px de cada lado em TODAS as larguras → coluna útil 1120 (x 196 em 1512). Abaixo de 1170: conteúdo = largura − 50. Grade de 12: span 3 = 23,8 %, 4 = 32,26 %, 6 = 49,2 %, 9 = 74,6 %; espaço entre colunas 1,6 %. Pontos de quebra (use estes números nas @media; variável não entra em @media): (max-width:500.98px) · (min-width:501px) and (max-width:767.98px) · (min-width:768px) and (max-width:990.98px) · (min-width:991px) and (max-width:1366.98px) · (min-width:1367px) */ --ds-largura:1120px; /* coluna de conteúdo */ --ds-gutter:25px; --ds-col-espaco:1.6%; --ds-col-3:23.8%; --ds-col-4:32.26%; --ds-col-6:49.2%; --ds-col-9:74.6%; --ds-linha-cards:40px; /* espaço vertical entre linhas de cards e entre colunas empilhadas */ --ds-topo:70px; --ds-lateral-w:408px; --ds-secao-y:50px; /* raios e sombras */ --ds-r-card:16px; --ds-r-pilula:100px; --ds-r-campo:4px; --ds-r-peq:8px; --ds-sombra-card:0 2px 6px rgba(0,31,53,.06), 0 10px 24px -12px rgba(0,31,53,.18); --ds-sombra-botao:0 6px 14px -6px rgba(0,31,53,.45); --ds-sombra-banner:0 24px 48px -20px rgba(0,31,53,.28); /* movimento */ --ds-ease:cubic-bezier(.2,.7,.2,1); --ds-t:.2s; /* camadas */ --ds-z-topo:50; --ds-z-gaveta:80; --ds-z-modal:120; } /* ---------- base ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; } body.ds{ margin:0; background:var(--ds-papel); color:var(--ds-tinta); font-family:var(--ds-fonte); font-size:var(--ds-fs-corpo); line-height:var(--ds-lh); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } @supports (overflow:clip){ body.ds{ overflow-x:clip; } } body.ds img, body.ds video, body.ds svg{ max-width:100%; } body.ds img{ height:auto; } body.ds a{ color:inherit; } body.ds button{ font:inherit; } body.ds :focus-visible{ outline:3px solid var(--ds-coral); outline-offset:3px; } body.ds [hidden]{ display:none !important; } /* escala de texto por faixa (ver o bloco ESCALA no :root) */ @media (min-width:768px) and (max-width:990.98px){ :root{ --ds-escala:.9; } } @media (min-width:501px) and (max-width:767.98px){ :root{ --ds-escala:.8; } } /* coluna de conteúdo: 1170 com recuo de 25 em todas as larguras (o recuo de 16 px no celular saiu em 2026-10-03) */ .ds-wrap{ width:100%; max-width:calc(var(--ds-largura) + 2*var(--ds-gutter)); margin:0 auto; padding-inline:var(--ds-gutter); } /* ---------- VOZ TIPOGRÁFICA GLOBAL (2026-10-03) ---------- Valem em TODA página (este arquivo entra em todas; ds-componentes.css não entra). .ds-em ........ realce dentro do título: serifada itálica 400. .g4-em = nome antigo. .ds-display ... título de vitrine: Marcellus 400 MAIÚSCULO, altura de linha 1, espaçamento .01em. .ds-etiqueta .. etiqueta-pílula em cima do título de vitrine (borda de 1 px, texto MAIÚSCULO de rótulo). .ds-fio ....... linha fina dourada que some nas pontas (só sobre navy). */ .ds-em, .g4-em{ font-family:var(--ds-fonte-serifa); font-style:italic; font-weight:400; letter-spacing:0; } .ds-display{ font-family:var(--ds-fonte-display); font-weight:400; font-size:var(--ds-fl-display); line-height:1; letter-spacing:.01em; text-transform:uppercase; text-wrap:balance; } .ds-etiqueta{ display:inline-flex; align-items:center; justify-content:center; gap:8px; max-width:100%; min-height:28px; padding:5px 14px; border:1px solid currentColor; border-radius:var(--ds-r-pilula); font-family:var(--ds-fonte); font-size:12px; font-weight:600; line-height:1.3; letter-spacing:.08em; text-transform:uppercase; text-align:center; } .ds-fio{ display:block; width:100%; height:1px; border:0; margin:0; background:linear-gradient(90deg, transparent 0%, var(--ds-ouro) 50%, transparent 100%); } /* ícone de contorno (modelo §2): 24 de grade, traço 2, pontas e cantos redondos, uma cor só */ .ds-ico{ flex:none; width:1.25em; height:1.25em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.22em; } /* leitores de tela */ .ds-sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* pontos de quebra da referência: 500.98 · 767.98 · 990.98 · 1366.98 (ver ESPAÇOS E LARGURAS no :root) */ @media (prefers-reduced-motion:reduce){ body.ds *, body.ds *::before, body.ds *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* foco sobre fundo navy: o anel navy sumiria; nessas áreas ele fica dourado (6,7:1 sobre navy) */ body.ds #dsTopo :focus-visible, body.ds #dsRodape :focus-visible, body.ds .ds-topo :focus-visible, body.ds .ds-rodape :focus-visible, body.ds .ds-faixa :focus-visible, body.ds .ds-gaveta :focus-visible, body.ds .tl-mais-trava :focus-visible{ outline-color:#C69C6D; }