/* ============================================================================ acordes-page.css — o visual da PÁGINA SATÉLITE dos acordes (satelite-acordes.template.html · docs/SATELITE-ACORDES-PLANO.md) 🔴 ESQUELETO do Claude principal (o build tem de nascer verde antes dos agentes). O agente de design & moldura é o dono deste arquivo a partir daí. ORDEM DE CARGA, e ela importa: css/styles.css → os tokens da casa (--color-*, --space-*, --radius-*…) css/satelite.css → as regras `.toy-*`, COMUNS a toda satélite css/acordes-page.css (este) → a moldura com prefixo `cp-` + os NÚMEROS 🔴 NENHUMA regra `.toy-*` mora aqui. As classes que a base dos brinquedos cria (`.toy-card`, `.toy-stage`, `.toy-controls`, `.toy-btn`, `.toy-field`, `.toy-readout`, `.toy-hit`, o `[role="slider"]` do drag()) são as mesmas em toda satélite e vivem num arquivo só — divergiram uma vez e cada conserto ficou preso na página em que foi feito (auditoria de 07/set). O que esta página manda sobre o brinquedo são MEDIDAS: os `--sat-*` da seção 1. Guardado por `satelite-test [M]`. CINCO COISAS QUE ESTE ARQUIVO GARANTE, e por quê: 1. 🔴 ALVO DE DEDO 44×44 px na moldura — e isso é compromisso de LARGURA também. Já aconteceu neste projeto de 44 px a mais estourarem uma linha num celular de 390 dentro de um `overflow-x` que corta EM SILÊNCIO (nenhum erro, nenhuma barra de rolagem — o conteúdo some pela direita). 2. 🔴 ZERO ROLAGEM HORIZONTAL DA PÁGINA, de 320 px para cima. Conteúdo largo rola dentro do próprio contêiner (`.toy-stage` no comum, `.cp-index-track` aqui). 3. 🔴 SEM BRAVURA. A fonte musical pesa 945 KB e o css/styles.css garante que a landing nunca a baixa. O desenho desta página são contornos embutidos no bundle (StaffGlyphs). 4. 🔴 NÃO PINTA NOTAÇÃO. Nenhuma regra daqui toca em `fill`/`stroke` do que o brinquedo desenha. As cores das NOTAS na decoração da abertura não são invenção: são `IntervalToy.C.root` (a fundamental) e `ChordToy.C.others` (as outras), as mesmas que a pessoa reencontra ao revelar a resposta no jogo de Acordes (invariante 21). 5. 🔴 A TINTA E O ANEL SE LEEM. Esta é a página ÂMBAR, e âmbar é justamente o token da casa em que o branco reprova: 2,15:1. Daí os dois tokens que esta página acrescenta à família do `--sec` — `--sec-ink` (a tinta que vai EM CIMA da cor da seção) e `--sec-ring` (o anel de foco, que é do sistema e não da seção). Os números e a régua estão na seção 1. ========================================================================== */ /* =========================================================================== 1. TOKENS DA PÁGINA O accent geral é o --color-warning, e a escolha não é estética: é o accent do jogo de Acordes em `GAME_PAGES` — a página veste a cor do lugar para onde ela manda. (Na satélite dos intervalos o accent é o índigo pela mesma razão.) Cada seção sobrescreve --sec/--sec-soft: é o FIO CONDUTOR visual da rolagem, e ele conta a mesma história que o texto — 01 três notas âmbar a cor do jogo: a página abre vestindo o destino 02 terça sobre terça índigo a cor da satélite dos INTERVALOS: esta seção é a ponte declarada entre as duas páginas 03 maior e menor azul a comparação, duas coisas lado a lado 04 a quinta verde a família fechada (as quatro tríades) 05 a sétima vermelho tensão — e é literalmente a seção da tensão 06 na pauta tinta o preto da notação, que é o assunto da seção 07 explorar índigo escuro a mesa que junta tudo, um tom mais fundo Todos esses valores JÁ EXISTEM em styles.css — nada de paleta nova. 🔴 As duas cores das NOTAS (`--cp-root`/`--cp-other`) não são da paleta da casa e nem poderiam ser: são `IntervalToy.C.root` e `ChordToy.C.others`, copiadas do jogo. Índigo é a fundamental, violeta são as outras notas, aqui e lá. NUNCA verde/vermelho de acerto: esta página não cobra resposta de ninguém. 🔴 `--sec-ink` — A TINTA QUE VAI **EM CIMA** DE `--sec`, e ela não é sempre branca. Esta é a página ÂMBAR (o accent é o do jogo de Acordes), e âmbar é justamente o token da casa em que o branco não se lê. Medido com a fórmula de contraste da WCAG, branco sobre cada `--sec` desta página: âmbar #f59e0b → 2,15:1 ← reprova até o piso de 3:1 de componente verde #10b981 → 2,54:1 ← idem azul #3b82f6 → 3,68:1 vermelho#ef4444 → 3,76:1 índigo #6366f1 → 4,47:1 índigo escuro #4f46e5 → 6,29:1 tinta #1f2937 → 14,68:1 A régua adotada é o piso de 3:1 (o de COMPONENTE da WCAG 2.1, que é o que um número dentro de um disco e um chip de navegação são): abaixo dele a tinta passa a ser a da casa — `#1f2937` sobre âmbar dá **6,83:1** e sobre verde **5,79:1**. Acima dele o branco fica, senão metade dos sete discos ficaria escura e o índice viraria uma colcheia de exceções. 🔴 A variável segue o MESMO contrato de `--sec`/`--sec-soft`: **quem declara é a página, quem consome é a regra**. Consomem, hoje: o disco do número e o chip corrente (aqui) e o `.toy-btn--primary` (no `css/satelite.css`, que passou a ler `var(--sec-ink, #fff)` em 08/set — a linha é aditiva, então irmã que não declara segue branca). O botão ▶ das seções 01 e 04 já sai com tinta. 🔴 O QUE AINDA NÃO SE LÊ, e é do COMUM (relatado, NÃO contornado aqui — cópia de regra `.toy-*` neste arquivo é a segunda verdade que o `satelite-test [M]` existe para impedir): • `.toy-btn[aria-pressed="true"]/.is-on` pinta `color: var(--sec)` sobre `background: var(--sec-soft)` → âmbar sobre âmbar-claro **1,93:1** e verde sobre verde-claro **2,24:1**. É o botão de escolha aceso ("3", "Maior"). • `.toy-btn:focus-visible` usa `outline: 3px solid var(--sec)` → o mesmo problema que a moldura daqui resolveu com `--sec-ring`: anel âmbar sobre o cartão branco é 2,15:1. Nos dois casos `--sec-ink` NÃO é o remédio (não é tinta sobre a cor cheia); o remédio é um `--sec-strong`/`--sec-ring` da mesma família. Vale para a satélite dos intervalos também (seções 03 e 04 dela). =========================================================================== */ .cp-main { --sec: var(--color-warning); --sec-soft: var(--color-warning-bg); --sec-ink: var(--color-text); /* âmbar: branco daria 2,15:1 */ /* 🔴 `--sec-ring` — O ANEL DE FOCO É DO SISTEMA, NÃO DA SEÇÃO. Ele era `var(--sec)`, e num teclado isso dava anel ÂMBAR sobre a barra branca do índice (2,15:1) no chip 01 e anel VERDE (2,54:1) no chip 04 — abaixo dos 3:1 que a WCAG 2.1/2.2 pede de um indicador de foco contra o que está em volta. Fotografado: o anel do primeiro chip praticamente sumia. Índigo escuro dá 6,29:1 sobre o branco e 5,62:1 sobre o fundo do CTA; na faixa final (gradiente índigo) o anel é branco, 4,47:1 — declarado lá. Um foco que muda de cor sete vezes também não ajuda ninguém a reconhecê-lo. */ --sec-ring: var(--color-primary-dark); /* 🔴 `--sec-strong` — A TINTA SOBRE O FUNDO SUAVE (o botão de escolha ACESO, `.toy-btn.is-on`). É problema DIFERENTE do `--sec-ink`: lá a tinta vai sobre a cor cheia, aqui sobre a clara. Medido: a cor da seção sobre o fundo suave dela dá âmbar 1,93 · verde 2,24 · azul 3,01 · vermelho 3,08 · índigo 3,63 — e rótulo de botão é TEXTO, cujo piso é 4,5:1. As CINCO reprovam, então aqui não há lista de exceções: vale para as sete seções, e a tinta da casa dá de 11,9 a 13,2 sobre esses fundos. O acento fica na BORDA, que continua `var(--sec)`, e no próprio fundo suave. */ --sec-strong: var(--color-text); --cp-prose: 42rem; /* largura de leitura (~680px, padrão da casa) */ --cp-card: 48rem; /* cartão de brinquedo */ --cp-card-wide: 64rem; /* o ChordExplorer: um teclado pede largura */ /* As notas do acorde — cópia declarada (docs/SATELITE-ACORDES-PLANO §5.2). */ --cp-root: #6366f1; /* = IntervalToy.C.root (a fundamental) */ --cp-other: #8b5cf6; /* = ChordToy.C.others = ChordGame.COLOR_REVEAL */ /* 🔴 AS MEDIDAS DO BRINQUEDO SÃO DESTA PÁGINA; as REGRAS são comuns (css/satelite.css). O palco repete os 38rem das irmãs (a pauta da seção 6 tem o mesmo problema de legibilidade: espremida, não se lê). O largo é o da irmã dos intervalos porque o que rola ali é a mesma coisa — um teclado, e cada branca a mais é uma nota alcançável sem rolar. */ --sat-card: var(--cp-card); --sat-card-wide: var(--cp-card-wide); --sat-stage: 38rem; --sat-stage-wide: 56rem; width: 100%; min-width: 0; /* body é flex; sem isto o filho não encolhe */ } /* 🔴 `overflow-x: clip` no lugar do `hidden` que o styles.css põe no body. MEDIDO nas satélites irmãs: `overflow-x: hidden` faz o overflow-y computar `auto`, o body vira CONTÊINER DE ROLAGEM, e todo `position: sticky` de dentro dele para de colar — é por isso que o header do site não gruda em nenhuma página estática hoje. `clip` corta igual (nada vaza, nada de "samba" no iOS) mas NÃO cria contêiner de rolagem, então o header e o índice desta página grudam de verdade. Navegador antigo que não conhece `clip` ignora a linha e cai no comportamento de hoje (barra não gruda) — degrada, não quebra. Vale SÓ nesta página: quem carrega este arquivo é a satélite dos acordes. */ body { overflow-x: clip; } /* A tabela das sete seções. A 3ª coluna é a TINTA de cima (`--sec-ink`): ela só deixa de ser branca onde o branco reprova (âmbar 2,15:1 · verde 2,54:1). */ .cp-section--tres-notas { --sec: var(--color-warning); --sec-soft: var(--color-warning-bg); --sec-ink: var(--color-text); } .cp-section--tercas { --sec: var(--color-primary); --sec-soft: var(--color-primary-bg); --sec-ink: #fff; } .cp-section--maior-menor { --sec: var(--color-info); --sec-soft: var(--color-info-bg); --sec-ink: #fff; } .cp-section--quinta { --sec: var(--color-success); --sec-soft: var(--color-success-bg); --sec-ink: var(--color-text); } .cp-section--setima { --sec: var(--color-error); --sec-soft: var(--color-error-bg); --sec-ink: #fff; } .cp-section--na-pauta { --sec: var(--color-text); --sec-soft: var(--color-border-light);--sec-ink: #fff; } .cp-section--explorar { --sec: var(--color-primary-dark); --sec-soft: var(--color-primary-bg); --sec-ink: #fff; } /* =========================================================================== 2. ABERTURA =========================================================================== */ .cp-hero { padding: var(--space-12) var(--container-padding) var(--space-8); text-align: center; background: linear-gradient(180deg, var(--color-warning-bg) 0%, var(--color-bg) 100%); } .cp-hero-inner { max-width: 46rem; margin: 0 auto; } .cp-kicker { font-size: 2.75rem; line-height: 1; margin: 0 0 var(--space-3); } .cp-h1 { font-family: var(--font-display); font-weight: var(--font-extrabold); font-size: clamp(1.875rem, 6vw, 3rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 var(--space-4); text-wrap: balance; } /* O lead é onde mora a RESPOSTA. A busca por IA lê o HTML visível e o rich snippet do Google sai daqui — por isso ele é grande e vem antes de tudo. */ .cp-lead { font-size: clamp(1.0625rem, 2.6vw, 1.25rem); line-height: 1.65; color: var(--color-text-secondary); margin: 0 auto var(--space-6); max-width: 38rem; } .cp-scroll-hint { display: flex; flex-wrap: wrap; /* 🔴 a decoração + a frase em ES não cabem numa linha de 320: quebram, não vazam */ justify-content: center; align-items: center; gap: var(--space-2) var(--space-3); max-width: 100%; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-muted); margin: 0; } /* ------------------------------------------- a tese, em três bolinhas e uma cifra A satélite do ritmo abre com quatro pontos pulsando (pulso); a da leitura, com uma cabeça subindo entre cinco linhas (altura); a dos intervalos, com duas notas e o vão entre elas (distância). Aqui a abertura mostra o EIXO DESTA página: **três notas empilhadas, a do meio decide, e o NOME muda junto**. As de fora ficam paradas; a do meio desce um degrau e a cifra ao lado passa de `C` para `Cm`. É a página inteira num gesto de 4,8 s — e é o que faz esta abertura não ser a da irmã dos intervalos recolorida. 🔴 DECORAÇÃO ABSTRATA, não gravura: três círculos e duas letras. Sem pauta, sem clave, sem haste — a página decidiu não inventar gravura no CSS (a boa vem dos contornos da Bravura no bundle). 🔴 A CIFRA PODE SER TEXTO NO TEMPLATE porque cifra é a MESMA coisa nos três idiomas (plano §8: "C", "Cm", vindos de `Chord.CHART_SUFFIX`) — é a única string desta página que não passa pelo `pages-acordes.json`, e passa só porque traduzir "C" é traduzir nada. Nome de acorde ("Maior"/"Major"/"Mayor") NUNCA entraria aqui. 🔴 SEM CHROME (nada de pílula, nada de moldura). O `css/satelite.css` já pagou essa lição no `.toy-readout`: "blob do tamanho de botão a pessoa tenta apertar". Isto não é clicável e não pode parecer. 🔴 É MUDA. Som só por gesto (invariante 3). 🔴 GEOMETRIA MEDIDA, não estimada: três bolas de 14 px numa caixa de 44 px deixavam 1 px entre elas, e o degrau de 4 px da terça ENTRAVA na fundamental (era o desenho do esqueleto: as três se tocavam e a do meio invadia a de baixo). Hoje são 11 px com 6 px de folga e o degrau consome 4 — sobra 2. */ .cp-hero-chord { position: relative; /* 52 px = 21 (a coluna de bolas + a folga) + 27 ("Cm", a cifra MAIS LARGA das duas, medida a 1rem em Plus Jakarta 800) + 4 de respiro. A caixa é FIXA: com ela elástica, a troca de "C" (12 px) por "Cm" (27 px) reposicionaria a frase inteira a cada 2,4 s, porque o `.cp-scroll-hint` é centralizado. */ width: 52px; height: 44px; flex: 0 0 auto; } .cp-hero-chord b { position: absolute; left: 0; width: 11px; height: 11px; border-radius: 50%; } /* De baixo para cima: fundamental, terça, quinta. A de baixo é a referência e NÃO se mexe — sem uma parada, o desenho vira três bolas dançando e a ideia de "empilhado sobre uma fundamental" se perde. */ .cp-hero-chord b:nth-of-type(1) { top: 33px; background: var(--cp-root); } .cp-hero-chord b:nth-of-type(2) { top: 16px; background: var(--cp-other); animation: cp-third 4.8s ease-in-out infinite; } .cp-hero-chord b:nth-of-type(3) { top: 0; background: var(--cp-other); } /* As duas cifras ocupam o MESMO lugar e trocam por opacidade — nada de trocar o texto de um nó só: "C" e "Cm" têm larguras diferentes e o desenho pularia de lado a cada 2,4 s. Peso de display para ler como cifra, e cor secundária para não competir com o h1 que está logo acima. */ .cp-hero-chord i { position: absolute; left: 21px; top: 0; display: flex; align-items: center; height: 44px; font-family: var(--font-display); font-style: normal; font-weight: var(--font-extrabold); font-size: 1rem; letter-spacing: -0.01em; color: var(--color-text-secondary); white-space: nowrap; } .cp-hero-chord i:nth-of-type(1) { animation: cp-sym-maj 4.8s ease-in-out infinite; } .cp-hero-chord i:nth-of-type(2) { opacity: 0; animation: cp-sym-min 4.8s ease-in-out infinite; } /* Maior → menor → maior. O degrau é pequeno de propósito: é UM semitom, e a página inteira insiste que a diferença é mínima e mesmo assim se ouve. 🔴 A cifra troca DE UMA VEZ, e exatamente nos dois instantes em que a terça CHEGA (44%) e VOLTA (88%) — o nome segue a nota, nunca ao contrário. Com opacidade cruzada (a 1ª versão) as duas letras se sobrepõem por meio segundo e o "C" some pela metade no meio da travessia: fotografado a 320 px, o desenho parecia um borrão de impressão. Corte seco não tem esse estado intermediário — e é o que um nome faz mesmo: ou é dó maior, ou é dó menor. */ @keyframes cp-third { 0%, 30% { transform: translateY(0); } 44%, 74% { transform: translateY(4px); } 88%, 100% { transform: translateY(0); } } @keyframes cp-sym-maj { 0%, 43.9% { opacity: 1; } 44%, 87.9%{ opacity: 0; } 88%, 100% { opacity: 1; } } @keyframes cp-sym-min { 0%, 43.9% { opacity: 0; } 44%, 87.9%{ opacity: 1; } 88%, 100% { opacity: 0; } } /* =========================================================================== 3. ÍNDICE GRUDENTO (âncoras) Gruda LOGO ABAIXO do header (que já é sticky, z-index 100). --cp-header-h é MEDIDA em JS pelo template: o header encolhe no celular (.logo-text some abaixo de 560px) e um px fixo aqui erraria a conta. No celular a fileira rola DENTRO de si — a página nunca rola de lado. =========================================================================== */ .cp-index { position: sticky; top: var(--cp-header-h, 61px); z-index: 90; /* abaixo do header (100), acima do miolo */ background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border-light); } .cp-index-track { display: flex; gap: var(--space-2); align-items: center; max-width: var(--container-max); margin: 0 auto; padding: var(--space-2) var(--container-padding); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; overscroll-behavior-x: contain; /* não empurra o histórico do navegador */ scrollbar-width: none; /* 🔴 `safe center` e não `center` seco: com sete rótulos longos (o ES é o pior caso) um `center` puro em contêiner que rola ESCONDE o começo da fileira, e não há como rolar até ele. `safe` cai para o início quando não cabe. Navegador que não entende a palavra descarta a linha inteira e fica em flex-start, que é justamente o comportamento seguro. */ justify-content: safe center; } .cp-index-track::-webkit-scrollbar { display: none; } /* 🔴 44px de altura mesmo sendo "só" um chip de navegação: é alvo de dedo. */ .cp-chip { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--space-4); border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: var(--font-semibold); white-space: nowrap; text-decoration: none; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } .cp-chip:hover { color: var(--sec); border-color: var(--sec); } /* O chip da seção corrente veste a cor DAQUELA seção — o índice conta a mesma história de cor que a rolagem. */ .cp-chip.is-current { background: var(--sec); border-color: var(--sec); /* 🔴 Aqui o texto não é decoração — é o rótulo da seção em que a pessoa está. Branco sobre o âmbar do chip 01 dá 2,15:1; a tinta da casa dá 6,83:1. A régua e os números estão na seção 1 deste arquivo. */ color: var(--sec-ink, #fff); } /* 🔴 Os SETE declaram a tinta, inclusive os que a querem branca: o índice mora FORA de `.cp-sections`, então ele não herda o `--sec-ink` de seção nenhuma — herda o PADRÃO do `.cp-main`, que é a tinta escura (a página é a âmbar). Deixar cinco linhas caladas pintaria de tinta o chip índigo, e o defeito só apareceria no chip que estivesse aceso na hora do screenshot. */ .cp-chip[data-sec="tres-notas"] { --sec: var(--color-warning); --sec-ink: var(--color-text); } .cp-chip[data-sec="tercas"] { --sec: var(--color-primary); --sec-ink: #fff; } .cp-chip[data-sec="maior-menor"] { --sec: var(--color-info); --sec-ink: #fff; } .cp-chip[data-sec="quinta"] { --sec: var(--color-success); --sec-ink: var(--color-text); } .cp-chip[data-sec="setima"] { --sec: var(--color-error); --sec-ink: #fff; } .cp-chip[data-sec="na-pauta"] { --sec: var(--color-text); --sec-ink: #fff; } .cp-chip[data-sec="explorar"] { --sec: var(--color-primary-dark); --sec-ink: #fff; } /* =========================================================================== 4. SEÇÕES =========================================================================== */ .cp-sections { padding: var(--space-4) 0 0; } .cp-section { max-width: var(--cp-card-wide); margin: 0 auto; padding: var(--space-10) var(--container-padding) var(--space-6); /* A âncora tem de parar ABAIXO do header + do índice, os dois grudentos. */ scroll-margin-top: calc(var(--cp-header-h, 61px) + var(--cp-index-h, 56px) + 12px); } .cp-sec-head { display: flex; align-items: center; gap: var(--space-4); max-width: var(--cp-card); margin: 0 auto var(--space-6); } /* O número em cor cheia marca a jornada: 01 três notas → 07 a mesa inteira. */ .cp-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--sec); color: var(--sec-ink, #fff); /* 🔴 âmbar/verde pedem tinta, não branco */ font-family: var(--font-display); font-weight: var(--font-extrabold); font-size: 0.8125rem; letter-spacing: 0.02em; box-shadow: 0 4px 12px rgb(0 0 0 / 0.12); } .cp-h2 { font-family: var(--font-display); font-weight: var(--font-bold); font-size: clamp(1.375rem, 4.4vw, 1.875rem); line-height: 1.25; letter-spacing: -0.01em; margin: 0; min-width: 0; /* sem isto o h2 longo empurra o badge p/ fora */ } /* Fio de cor que sobra à direita do título — some quando não há espaço. */ .cp-sec-head::after { content: ""; flex: 1 1 0; min-width: 0; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--sec), transparent); opacity: 0.5; } .cp-prose { max-width: var(--cp-prose); margin: var(--space-6) auto 0; } .cp-prose p { font-size: 1.0625rem; line-height: 1.75; color: var(--color-text-secondary); margin: 0 0 var(--space-4); } .cp-prose p:last-child { margin-bottom: 0; } .cp-prose strong { color: var(--color-text); font-weight: var(--font-semibold); } .cp-prose a { color: var(--sec); font-weight: var(--font-semibold); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.09em; } .cp-prose a:hover { text-decoration-thickness: 0.16em; } /* A dica: uma linha curta, tingida com a cor da seção. Sem ícone — a barra de cor à esquerda já diz "isto é um à parte", e não repete gravura sete vezes. */ .cp-tip { max-width: var(--cp-prose); margin: var(--space-5) auto 0; padding: var(--space-4) var(--space-5); background: var(--sec-soft); border-left: 3px solid var(--sec); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; font-size: 0.9375rem; line-height: 1.6; color: var(--color-text); } /* =========================================================================== 5. O BRINQUEDO — as regras moram em css/satelite.css 🔴 As classes `.toy-*` nascem no JS da BASE dos brinquedos e são as MESMAS em toda satélite. O bloco inteiro vive em `css/satelite.css`, carregado ANTES deste arquivo pelo token `__SAT_CSS_LINK__` — e **NENHUM `-page.css` volta a defini-las**. Divergiram uma vez (auditoria de 07/set: 12 seletores iguais com corpo diferente) e o conserto feito numa página ficou só nela. O que a PÁGINA continua mandando são NÚMEROS: os `--sat-*` da seção 1. =========================================================================== */ /* O anel de foco da MOLDURA desta página. O do `.toy-btn` é comum e mora no css/satelite.css — a forma é a mesma de propósito. */ .cp-chip:focus-visible, .cp-btn:focus-visible, .cp-btn-ghost:focus-visible { /* Recuo para `--sec` de propósito: a forma é a mesma do `.toy-btn` do comum, e no dia em que o comum ler `--sec-ring` os dois passam a andar juntos. */ outline: 3px solid var(--sec-ring, var(--sec)); outline-offset: 2px; } /* =========================================================================== 6. SAÍDAS PARA O APP Três destinos, três pessoas (§6 do plano): o treino livre, a trilha ranqueada e o jogo de intervalos — o assunto de que este veio. =========================================================================== */ .cp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 var(--space-6); border-radius: var(--radius-full); background: var(--sec); color: #fff; font-weight: var(--font-bold); font-size: 1rem; text-decoration: none; text-align: center; box-shadow: 0 4px 14px rgb(0 0 0 / 0.14); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .cp-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(0 0 0 / 0.18); color: #fff; } .cp-btn--big { min-height: 3.25rem; padding: 0 var(--space-8); font-size: 1.0625rem; } .cp-btn-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 var(--space-5); border-radius: var(--radius-full); border: 1px solid currentColor; color: inherit; font-weight: var(--font-semibold); text-align: center; text-decoration: none; opacity: 0.9; transition: opacity var(--transition-fast), background var(--transition-fast); } .cp-btn-ghost:hover { opacity: 1; background: rgb(255 255 255 / 0.14); color: inherit; } /* CTA no meio da rolagem. */ .cp-inline-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); max-width: var(--cp-card); margin: var(--space-6) auto var(--space-4); padding: var(--space-5) var(--space-6); background: var(--color-primary-bg); border-radius: var(--radius-xl); /* 🔴 O CTA vive ENTRE seções e herda o --sec da última que passou, o que deixaria o botão depois da seção 6 PRETO (a seção da pauta é tinta). Ele reancora no índigo do app: um botão de CTA quer dizer "entre no app". 🔴 A TINTA VIAJA COM A COR, sempre no mesmo par: sem a 2ª linha, este bloco herdaria o `--sec-ink` escuro que é o PADRÃO desta página (ela é a âmbar) e qualquer regra que passasse a ler a tinta pintaria letra escura sobre índigo — 3,29:1 contra os 4,47:1 do branco. */ --sec: var(--color-primary); --sec-ink: #fff; } .cp-inline-cta-text { flex: 1 1 16rem; min-width: 0; margin: 0; font-size: 1rem; font-weight: var(--font-semibold); line-height: 1.5; color: var(--color-text); } .cp-inline-cta .cp-btn { flex: 0 0 auto; } /* Bloco final: a única faixa de sangria total da página — é o fim da jornada. */ .cp-final { margin-top: var(--space-12); padding: var(--space-16) var(--container-padding); background: var(--gradient-primary); color: #fff; /* 🔴 Nesta faixa a "cor da seção" É o branco: ela está fora das sete seções e herdaria o âmbar padrão do `.cp-main` — e âmbar sobre o gradiente índigo/violeta dá 2,07:1, abaixo dos 3:1 que um anel de foco precisa ter. Declarando o par aqui, o `:focus-visible` lá de cima (que é `var(--sec)`) já sai branco, 4,47:1 sobre o índigo do gradiente, sem regra extra. */ --sec: #fff; --sec-ink: var(--color-primary-dark); --sec-ring: #fff; /* 4,47:1 sobre o índigo do gradiente */ text-align: center; scroll-margin-top: calc(var(--cp-header-h, 61px) + var(--cp-index-h, 56px) + 12px); } .cp-final-inner { max-width: 40rem; margin: 0 auto; } .cp-final-h2 { font-family: var(--font-display); font-weight: var(--font-extrabold); font-size: clamp(1.5rem, 5vw, 2.25rem); line-height: 1.2; margin: 0 0 var(--space-4); text-wrap: balance; } .cp-final-p { font-size: 1.0625rem; line-height: 1.7; margin: 0 auto var(--space-8); max-width: 34rem; color: rgb(255 255 255 / 0.92); } /* Três destinos: o primário (a trilha) e DOIS fantasmas (livre · intervalos). Eles quebram em linha antes de espremer — três pílulas de 44 px lado a lado não cabem em 320. */ .cp-final-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-3) var(--space-4); margin: 0; } /* O botão principal inverte: branco sobre o gradiente. */ .cp-final .cp-btn { background: var(--color-surface); color: var(--color-primary-dark); } .cp-final .cp-btn:hover { color: var(--color-primary-dark); } /* =========================================================================== 7. LIVRO · FAQ · CONHEÇA TAMBÉM =========================================================================== */ /* A página não compete com livro: ela desperta. A nota diz isso, e por isso é discreta — não é anúncio, é honestidade. */ .cp-book { max-width: var(--cp-prose); margin: var(--space-10) auto 0; padding: 0 var(--container-padding); font-size: var(--text-sm); line-height: 1.7; color: var(--color-text-muted); text-align: center; } .cp-faq { max-width: var(--cp-prose); margin: var(--space-12) auto 0; padding: 0 var(--container-padding); scroll-margin-top: calc(var(--cp-header-h, 61px) + var(--cp-index-h, 56px) + 12px); } .cp-faq-h2 { font-family: var(--font-display); font-weight: var(--font-bold); font-size: clamp(1.375rem, 4vw, 1.75rem); margin: 0 0 var(--space-6); text-align: center; } /* 🔴 Respostas SEMPRE visíveis (nada de
fechado): é este texto que a busca por IA lê e o que alimenta o FAQPage do JSON-LD. */ .cp-faq-list { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: var(--space-2) var(--space-6); } .cp-faq-item { padding: var(--space-5) 0; border-top: 1px solid var(--color-border-light); } .cp-faq-item:first-child { border-top: 0; } .cp-faq-item h3 { font-family: var(--font-display); font-size: 1.0625rem; font-weight: var(--font-bold); line-height: 1.4; margin: 0 0 var(--space-2); color: var(--color-text); } .cp-faq-item p { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--color-text-secondary); } .cp-others { max-width: var(--cp-prose); margin: var(--space-12) auto var(--space-16); padding: 0 var(--container-padding); } .cp-others h2 { font-size: var(--text-xl); font-weight: var(--font-bold); margin: 0 0 var(--space-4); } .cp-others-links { display: flex; flex-wrap: wrap; gap: var(--space-3); } /* 🔴 44 px de alvo aqui também. MEDIDO na irmã: com `display:inline-block` + padding de 0.5rem estes chips davam 42 px de altura nos 3 idiomas — dois px abaixo do piso da casa, e são o maior bloco de alvos de dedo da página (todas as páginas de jogo, as tools e as satélites irmãs). */ .cp-others-links a { display: inline-flex; align-items: center; min-height: 2.75rem; max-width: 100%; padding: 0 var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); color: inherit; font-weight: var(--font-semibold); font-size: 0.9375rem; text-decoration: none; transition: border-color var(--transition-fast), background var(--transition-fast); } .cp-others-links a:hover { border-color: var(--color-primary); background: var(--color-primary-bg); } /* =========================================================================== 8. RESPONSIVO — mobile-first de verdade, de 320px para cima =========================================================================== */ @media (max-width: 768px) { .cp-hero { padding: var(--space-8) var(--container-padding) var(--space-6); } /* O chip continua com 44px de alvo; quem encolhe é a FOLGA da barra. Header + índice já comem 1/7 da tela de um celular — cada px conta. */ .cp-index-track { padding: var(--space-1) var(--container-padding); } .cp-section { padding: var(--space-8) var(--container-padding) var(--space-4); } .cp-final { padding: var(--space-12) var(--container-padding); } .cp-sec-head { gap: var(--space-3); margin-bottom: var(--space-5); } .cp-badge { width: 2.25rem; height: 2.25rem; font-size: 0.75rem; } .cp-faq-list { padding: var(--space-1) var(--space-5); } } @media (max-width: 480px) { /* A barra de controles do brinquedo (que é quem estoura a linha num celular de 390) quebra no css/satelite.css — regra comum, não desta página. */ .cp-inline-cta { padding: var(--space-4); } .cp-inline-cta .cp-btn { flex: 1 1 100%; } .cp-final-actions .cp-btn, .cp-final-actions .cp-btn-ghost { flex: 1 1 100%; } .cp-chip { padding: 0 var(--space-3); } .cp-kicker { font-size: 2.25rem; } .cp-others-links a { padding: 0 var(--space-4); } } @media (min-width: 1024px) { .cp-hero { padding: var(--space-16) var(--container-padding) var(--space-10); } .cp-section { padding: var(--space-16) var(--container-padding) var(--space-8); } } /* =========================================================================== 9. MOVIMENTO REDUZIDO O styles.css já zera transições globalmente; aqui garantimos que a decoração PRÓPRIA desta página (a terça que desce) também para — e que a rolagem por âncora não vire um voo. Brinquedo parado continua com o ▶ funcionando: quem cuida disso é o StaffToy (invariante 6). =========================================================================== */ @media (prefers-reduced-motion: reduce) { /* Parado, o acorde fica MAIOR — é o estado que a página apresenta primeiro e o mesmo que o cartão de OG fotografa (repouso do ChordExplorer: Dó maior, cifra "C", plano invariante 26). 🔴 A cifra tem de parar NO MESMO estado das bolinhas: com a terça em cima e o "Cm" aceso, o desenho diria uma coisa e a letra, outra. */ .cp-hero-chord b:nth-of-type(2) { animation: none; transform: translateY(0); } .cp-hero-chord i:nth-of-type(1) { animation: none; opacity: 1; } .cp-hero-chord i:nth-of-type(2) { animation: none; opacity: 0; } .cp-index-track { scroll-behavior: auto; } .cp-btn:hover { transform: none; } }