/* ============================================================================
shark-web · BASE
----------------------------------------------------------------------------
Esqueleto de pagina: superficie, container, secao, grade e prosa.
Tudo aqui e ESCOPADO em .sw-page ou nas classes sw-. Nao existe seletor
universal, nao existe reset global, e nenhuma regra atinge tag pelada fora
do escopo. O motivo e pratico: o acervo tem que poder ser colado dentro de
uma pagina que ja tem CSS proprio sem reformatar o que ja estava la.
A unica excecao e o bloco de overflow no , e ele esta comentado
embaixo com o porque.
========================================================================== */
/* --- overflow horizontal ---------------------------------------------------
Vai no , NUNCA no . Com overflow no body, o body vira o scroll
container da pagina e window.scrollY para de mexer: todo listener de scroll,
todo ScrollTrigger e o proprio tracker do site quebram juntos, em silencio.
Ja aconteceu aqui; esta registrado no DESIGN-NOTES.md §4. */
html:has(.sw-page) {
overflow-x: hidden;
}
/* ============================================================================
SUPERFICIE
========================================================================== */
.sw-page {
background: var(--sw-fundo);
color: var(--sw-tinta-1);
font-family: var(--ds-body, "Manrope", system-ui, sans-serif);
font-size: var(--sw-fs-body);
line-height: var(--sw-lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.sw-page *,
.sw-page *::before,
.sw-page *::after {
box-sizing: border-box;
}
/* ============================================================================
CONTAINER
----------------------------------------------------------------------------
O gutter e clamp, entao a margem lateral no celular nunca fica de 40px
comendo metade da tela nem de 8px colando o texto na borda.
========================================================================== */
.sw-container {
width: 100%;
max-width: calc(var(--sw-w) + var(--sw-gutter) * 2);
margin-inline: auto;
padding-inline: var(--sw-gutter);
}
.sw-container--estreito { max-width: calc(var(--sw-w-estreito) + var(--sw-gutter) * 2); }
.sw-container--largo { max-width: calc(var(--sw-w-largo) + var(--sw-gutter) * 2); }
/* ============================================================================
SECAO
----------------------------------------------------------------------------
O ritmo vertical vem do token, e o token vem do registro. Uma secao de
repouso respira quase o dobro de uma de conversao sem nenhuma classe extra.
========================================================================== */
.sw-secao {
position: relative;
padding-block: var(--sw-secao-y);
/* O fallback resolve NA SECAO, nao no :root — e por isso que ele acompanha o
registro. Ver o comentario de --sw-secao-bg em shark-web.tokens.css. */
background: var(--sw-secao-bg, var(--sw-fundo));
}
.sw-secao--densa { padding-block: calc(var(--sw-secao-y) * 0.62); }
.sw-secao--ar { padding-block: calc(var(--sw-secao-y) * 1.35); }
/* Secao alternada: grafite sobre preto puro. A separacao e o contraste entre
as duas superficies. Nao ha borda, e a ausencia e deliberada: fio de 1px
atravessando a pagina inteira le como moldura, e moldura fecha a pagina. */
.sw-secao--alt { background: var(--sw-secao-bg-alt); }
/* Divisa: quando duas secoes do mesmo tom se encostam e o corte precisa
existir. Um fio que nasce e morre transparente, nunca de ponta a ponta. */
.sw-secao--divisa::before {
content: "";
position: absolute;
inset-inline: 0;
top: 0;
height: 1px;
background: linear-gradient(90deg,
transparent,
var(--sw-linha-fraca) 22%,
var(--sw-linha-fraca) 78%,
transparent);
}
/* Cabecalho de secao: kicker, titulo e lead, ja com a medida certa. */
.sw-secao-topo {
display: flex;
flex-direction: column;
gap: var(--sw-gap-sm);
margin-bottom: var(--sw-bloco-y);
}
.sw-secao-topo--centro {
align-items: center;
text-align: center;
}
.sw-secao-topo--centro .sw-lead { margin-inline: auto; }
/* ============================================================================
GRADE
========================================================================== */
.sw-grade {
display: grid;
gap: var(--sw-gap);
grid-template-columns: repeat(var(--sw-cols, 1), minmax(0, 1fr));
}
.sw-grade--2 { --sw-cols: 2; }
.sw-grade--3 { --sw-cols: 3; }
.sw-grade--4 { --sw-cols: 4; }
/* minmax(0, 1fr) no lugar de 1fr resolve o estouro classico: item de grade tem
min-width auto por padrao, entao conteudo largo (tabela, , palavra
comprida) empurra a coluna e a pagina inteira ganha scroll horizontal. */
@media (max-width: 1023px) {
.sw-grade--3,
.sw-grade--4 { --sw-cols: 2; }
}
@media (max-width: 640px) {
.sw-grade--2,
.sw-grade--3,
.sw-grade--4 { --sw-cols: 1; }
}
/* Duas colunas alternando o lado do visual a cada bloco. E o ritmo de
"feature deep-dive": texto e prova trocando de lado conforme a pagina desce. */
.sw-duo {
display: grid;
gap: var(--sw-gap-lg);
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
}
.sw-duo + .sw-duo { margin-top: var(--sw-bloco-y); }
.sw-duo--inverso > :first-child { order: 2; }
@media (max-width: 860px) {
.sw-duo { grid-template-columns: minmax(0, 1fr); }
.sw-duo--inverso > :first-child { order: 0; }
}
/* ============================================================================
PROSA E MEDIDA
----------------------------------------------------------------------------
Densidade de informacao so fica leve quando a linha tem tamanho de leitura.
E o unico truque real por tras de "rico em informacao e gostoso de navegar".
========================================================================== */
.sw-medida { max-width: var(--sw-medida); }
.sw-medida--curta { max-width: var(--sw-medida-curta); }
.sw-prose {
max-width: var(--sw-medida);
color: var(--sw-tinta-2);
}
.sw-prose > * + * { margin-top: 1.1em; }
.sw-prose > * + h2,
.sw-prose > * + h3 { margin-top: 2em; }
.sw-prose h2,
.sw-prose h3 { color: var(--sw-tinta-1); }
.sw-prose a {
color: var(--sw-acento);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
text-decoration-color: color-mix(in srgb, var(--sw-acento) 40%, transparent);
transition: text-decoration-color var(--sw-dur-1) var(--sw-ease);
}
.sw-prose a:hover { text-decoration-color: var(--sw-acento); }
.sw-prose strong { color: var(--sw-tinta-1); font-weight: 700; }
/* ============================================================================
AUXILIARES
========================================================================== */
.sw-pilha {
display: flex;
flex-direction: column;
gap: var(--sw-gap-sm);
}
.sw-linha-h {
display: flex;
align-items: center;
gap: var(--sw-gap-sm);
flex-wrap: wrap;
}
/* Sangria controlada: conteudo que passa da largura do container de proposito
(imagem larga, carrossel), sem virar scroll horizontal na pagina. */
.sw-bleed {
margin-inline: calc(var(--sw-gutter) * -1);
padding-inline: var(--sw-gutter);
overflow-x: auto;
scrollbar-width: none;
}
.sw-bleed::-webkit-scrollbar { display: none; }
/* Visualmente escondido, mas continua no fluxo de leitura e no leitor de tela.
Usado nos rotulos que a marcacao precisa ter e o desenho nao mostra.
Nao use display:none aqui: isso remove do leitor de tela tambem. */
.sw-sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Anel de foco unico do acervo. Nunca remova outline sem repor isto: navegar a
teclado sem foco visivel e a falha de acessibilidade mais facil de cometer. */
.sw-page :focus-visible {
outline: 2px solid var(--sw-acento);
outline-offset: 3px;
border-radius: var(--ds-r-xs, 6px);
}
/* ============================================================================
DUO EM CONTRASTE
----------------------------------------------------------------------------
Dois cards lado a lado com o CHAO INVERTIDO entre eles: um escuro, um claro.
O acervo ja alternava chao por SECAO; isto alterna dentro da mesma linha.
Serve para o par "afirmacao + ferramenta": o card escuro carrega o numero e a
lista (o argumento), o claro carrega a coisa interativa (a verificacao). O
contraste faz o olho entender que sao papeis diferentes antes de ler.
O card claro NAO herda o registro. Ele declara o proprio conjunto semantico,
pela mesma lei dos registros — quem troca o chao pinta o chao E a tinta, ou o
texto fica branco sobre papel. Essa e a falha que o auditor pegou 340 vezes
na v2, e o motivo de isto estar escrito aqui.
========================================================================== */
.sw-duo--contraste {
align-items: stretch;
gap: var(--sw-gap);
}
.sw-duo-lado {
display: flex;
flex-direction: column;
gap: var(--sw-gap-sm);
padding: var(--sw-gap-lg) var(--sw-gap);
border-radius: var(--ds-r-xl, 24px);
background: var(--sw-superficie);
color: var(--sw-tinta-1);
}
/* O lado ESCURO no registro claro, e vice-versa: em vez de "claro" e "escuro"
fixos, o modificador diz INVERTIDO — o que muda conforme o registro em volta,
e continua sendo um par contrastante nos quatro. */
.sw-duo-lado--invertido {
--sw-superficie: #fbfaf8;
--sw-superficie-2: #f2f1ed;
--sw-poco: #e8e6e1;
--sw-tinta-1: #14161a;
/* 0,74 e 0,64, e nao os 0,68/0,62 do registro editorial. Nao e capricho: o
editorial calibra contra o papel #e8e6e1, e este card usa #fbfaf8, que e
mais CLARO. Chao mais claro exige MAIS tinta para o mesmo contraste — com
os valores do editorial estas duas linhas davam 4,37:1 e reprovavam.
Copiar valor calibrado para outro fundo e o erro que o auditor pega. */
--sw-tinta-2: rgba(20, 22, 26, 0.74);
--sw-tinta-3: rgba(20, 22, 26, 0.64);
--sw-tinta-4: rgba(20, 22, 26, 0.22);
--sw-veu-1: rgba(20, 22, 26, 0.05);
--sw-veu-2: rgba(20, 22, 26, 0.08);
--sw-veu-3: rgba(20, 22, 26, 0.12);
--sw-veu-4: rgba(20, 22, 26, 0.20);
--sw-linha: rgba(20, 22, 26, 0.13);
--sw-linha-fraca: rgba(20, 22, 26, 0.07);
/* O acento tambem: o verde neon da marca (#00ff5f) sobre papel da 1,4:1 e
simplesmente nao se le. #006625 e o MESMO matiz e a mesma saturacao com a
luminosidade em 20%, e da 5,73:1 — e o valor que o registro editorial ja
usa, repetido aqui de proposito.
Literal, e nao `var(--ds-green-deep)`: esse token NAO existe no dash-shark.
Uma variavel inexistente com fallback funciona, mas mente sobre a origem do
valor — e no dia em que alguem criar `--ds-green-deep` com outro tom, esta
regra mudaria sozinha sem ninguem pedir. */
--sw-acento: #006625;
--sw-acento-tinta: #fbfaf8;
background: var(--sw-superficie);
color: var(--sw-tinta-1);
}
/* ----------------------------------------------------------------------------
INVERTER CONTRA O AMBIENTE, E NAO CONTRA O PRETO
----------------------------------------------------------------------------
O bloco acima transforma o lado invertido em PAPEL. Isso so e uma inversao
enquanto o registro em volta e escuro.
No registro EDITORIAL o chao ja e papel: `--sw-superficie` vale #f2f1ed e o
lado "invertido" vale #fbfaf8. Medido, sao 1,08:1 entre os dois painetis —
contra 18,77:1 no repouso. Era esse o defeito relatado como "as variantes
estao muito parecidas": no editorial elas nao estavam parecidas, estavam
praticamente iguais.
E a MESMA familia de falha que ja custou quatro correcoes neste acervo — um
valor calibrado para um contexto usado noutro. So que aqui o valor errado nao
e a tinta: e a propria ideia de "invertido", escrita como se o ambiente fosse
sempre escuro.
O auditor de contraste nao pegava, e nao e falha dele: cada painel esta
perfeitamente legivel sobre o proprio chao. O que faltava era contraste ENTRE
os dois, que nenhuma medicao de texto ve.
Consertar e dizer o que "invertido" significa em cada ambiente. Nos registros
escuros, papel — o bloco acima. No editorial, grafite. O bloco abaixo
reescreve o conjunto semantico inteiro de novo, porque metade nunca basta. */
[data-registro="editorial"] .sw-duo-lado--invertido {
--sw-superficie: #16181a;
--sw-superficie-2: #101113;
--sw-poco: #060707;
--sw-tinta-1: #fefefe;
--sw-tinta-2: rgba(254, 254, 254, 0.64);
--sw-tinta-3: rgba(254, 254, 254, 0.52);
--sw-tinta-4: rgba(254, 254, 254, 0.22);
--sw-veu-1: rgba(254, 254, 254, 0.05);
--sw-veu-2: rgba(254, 254, 254, 0.08);
--sw-veu-3: rgba(254, 254, 254, 0.12);
--sw-veu-4: rgba(254, 254, 254, 0.20);
--sw-linha: rgba(254, 254, 254, 0.14);
--sw-linha-fraca: rgba(254, 254, 254, 0.06);
/* De volta ao verde neon: sobre grafite ele da 15,3:1, e o #006625 do papel
daria 2,4:1. O acento acompanha o chao, sempre. */
--sw-acento: var(--ds-green, #00ff5f);
--sw-acento-tinta: #001b0a;
background: var(--sw-superficie);
color: var(--sw-tinta-1);
}
/* ----------------------------------------------------------------------------
O SEGUNDO SINAL: MATERIAL, E NAO SO CHAO
----------------------------------------------------------------------------
Chao trocado resolve o caso extremo. Nao resolve a leitura rapida: dois
retangulos arredondados lado a lado continuam parecendo a mesma peca pintada
de duas cores, e e assim que a pagina e vista antes de ser lida.
Entao os dois lados passam a ser materiais diferentes:
o lado base chapado, sem contorno — e o BLOCO, ele afirma
o lado invertido contorno visivel e um degrau de luz no topo — e o
PAINEL, ele e o instrumento onde se mexe
O contorno e `inset`, nao `border`: borda participa da caixa e empurra o
conteudo em 1px, o que basta para as duas colunas desalinharem na linha de
base do primeiro texto.
`--sw-linha` e nao um valor literal: ele ja e reescrito pelos dois blocos de
inversao acima, entao o fio sai escuro no painel de papel e claro no painel
de grafite sem uma segunda regra. */
.sw-duo-lado--invertido {
box-shadow: inset 0 0 0 1px var(--sw-linha);
}
/* O numero que abre o lado escuro. Escala de display, porque e ele que carrega
o argumento — o resto da coluna e nota de rodape do numero. */
.sw-duo-numero {
display: flex;
align-items: baseline;
gap: 10px;
font-family: var(--ds-display, "Space Grotesk", system-ui, sans-serif);
font-size: clamp(44px, 6.5vw, 78px);
font-weight: 700;
line-height: 0.94;
letter-spacing: -0.045em;
font-variant-numeric: tabular-nums;
color: var(--sw-tinta-1);
margin: 0;
}
.sw-duo-numero small {
font-size: var(--sw-fs-body);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--sw-tinta-2);
}
.sw-duo-nota {
margin: 0;
font-size: var(--sw-fs-sm);
color: var(--sw-tinta-3);
}
@media (max-width: 860px) {
.sw-duo--contraste { gap: var(--sw-gap-sm); }
}
/* --- a conta, linha a linha ------------------------------------------------
O que mostra de onde vem o total. E o par natural do .sw-duo-lado
invertido: o lado escuro afirma, este verifica.
e nao : sao pares rotulo/valor, nao uma matriz. Tabela de uma
coluna e uma tabela mentindo, e o leitor de tela anuncia "tabela com 1
coluna e 4 linhas" antes de qualquer conteudo.
AVISO DE ESCOPO: isto mostra CUSTO. A referencia de onde a peca veio tem um
controle deslizante que projeta receita — e aqui isso vira simulador de
retorno, ou seja, promessa de resultado. Reprova na revisao do Meta e e o
mesmo problema que travou o lancamento de copy trading. Mostrar o que a
pessoa PAGA pode; mostrar o que ela GANHARIA, nao. */
.sw-linha-conta {
margin: 4px 0 0;
display: grid;
gap: 0;
}
.sw-linha-conta > div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sw-gap-sm);
padding: 12px 0;
box-shadow: inset 0 -1px 0 var(--sw-linha);
}
.sw-linha-conta dt {
font-size: var(--sw-fs-sm);
color: var(--sw-tinta-2);
}
.sw-linha-conta dd {
margin: 0;
font-family: var(--ds-mono, ui-monospace, monospace);
font-size: var(--sw-fs-sm);
font-variant-numeric: tabular-nums;
color: var(--sw-tinta-1);
}
/* O total perde a linha de baixo e ganha peso: e o unico valor que a pessoa
leva embora da leitura. */
.sw-linha-conta > div.is-total {
box-shadow: none;
padding-top: 16px;
}
.sw-linha-conta > div.is-total dt { font-weight: 700; color: var(--sw-tinta-1); }
.sw-linha-conta > div.is-total dd {
font-family: var(--ds-display, "Space Grotesk", system-ui, sans-serif);
font-size: clamp(22px, 3vw, 30px);
font-weight: 700;
letter-spacing: -0.03em;
}
/* ============================================================================
O ESTADO DE REPOUSO DO