/* ========================================================================== ABERTURA TIPOGRÁFICA — prefixo abt- Olho, frase em corpo de display alinhada à coluna, apoio curto. Nada mais. Tokens LIDOS: --accent itálico de marca do , via o parafuso --abt-em --sec-gap ritmo vertical — é dele que sai o respiro dos dois lados --pad --max via .wrap, que este arquivo não toca (contrato §4) Tokens ESCRITOS (parafusos de primitiva do core, ver core/base.css): --display-xl corpo da frase, alimentado aqui por --abt-corpo --display-xl-lh entrelinha dela A cor do texto não aparece neste arquivo além do : vem do escopo de tom da seção, pelas classes .display-xl, .eyebrow e .sec-lead do core. O ARQUIVO É CURTO DE PROPÓSITO, e isso é o resultado, não a preguiça. A frase é a primitiva .display-xl, o olho é .eyebrow, o apoio é .sec-lead e a coluna é .wrap. Sobram QUATRO decisões, e são elas que fazem a peça: 1. O RITMO ASSIMÉTRICO (.abt). É a única razão estrutural de a peça não ser .sec-pad. Ver o comentário do padding-block. 2. O CORPO DA LETRA (--abt-corpo). Uma abertura tem de ser maior que um h2.sec-title (40px no teto) e menor que um manifesto de uma palavra (104px, o padrão da .display-xl). 3. O EM CORPO DE DISPLAY. O core pinta o itálico de marca só em h2.sec-title em; .display-xl não tem regra para . 4. A DEVOLUÇÃO DA QUEBRA no mobile. Se algum dia o core ganhar uma primitiva de abertura, o que sobe é 1 e 3; 2 e 4 são calibração de copy e continuam aqui. ========================================================================== */ .abt{ /* Corpo da frase. Calibrado pela FRAÇÃO DA COLUNA que a linha mais longa ocupa, não pelo número — é o princípio que a própria .display-xl do core documenta. Medido no tema liberta-wealth (que cai em Manrope, porque a Qanelas é licenciada e não está no repositório), com a frase de exemplo de 10 palavras: 1920 corpo 50.0px linha 981 / coluna 1096 89.5% 1440 corpo 49.0px linha 961 / coluna 1096 87.7% 1200 corpo 40.8px linha 801 / coluna 1065 75.2% 1024 corpo 34.8px linha 683 / coluna 907 75.3% 900 corpo 30.6px linha 601 / coluna 795 75.6% 390 corpo 28.0px linha 337 / coluna 350 96.3% (quebra automática) A faixa útil é de 75% a 90%: abaixo de 75% a frase deixa de ser peça gráfica e volta a parecer um rótulo grande; acima de 90% ela encosta na borda e a segunda linha fica solta no meio do nada. O 96% do celular é outro regime — lá a quebra é automática e balanceada, e encher a coluna é o certo. O teto de 50px é alcançado a 1471px de viewport e não sobe depois, de propósito: a coluna PARA de crescer em --max (1240px), e um corpo que continuasse subindo por vw estouraria a linha em tela grande. Trocar a display do tema muda os números e não muda o alvo: uma face condensada precisa de corpo MAIOR para desenhar os mesmos 87%. Quem trocar a copy remede — a linha longa é a que manda, e é ela que decide também o ponto de corte do mobile, lá embaixo. */ --abt-corpo:clamp(28px,3.4vw,50px); --display-xl:var(--abt-corpo); /* 1.06, e não o .95 padrão da primitiva: aquele serve a título de uma ou duas palavras, sem descendente para colidir. Aqui são duas linhas de frase inteira, com "p" e "ç" de uma encontrando o "C" e o "l" da outra, e o em itálico ainda inclina o descendente para dentro da linha seguinte. */ --display-xl-lh:1.06; /* Cor do realce. Existe como parafuso porque o valor CERTO depende do escopo de tom, e a conta está no comentário de .abt-frase em. */ --abt-em:var(--accent); /* RITMO ASSIMÉTRICO, e é a razão de esta peça não usar .sec-pad. Uma abertura pertence ao capítulo que ela abre: solta-se da dobra densa que veio antes e gruda no que vem depois. .sec-pad é padding:var(--sec-gap) 0 — simétrico por definição, e sobrescrever só um lado dele empataria em especificidade e passaria a depender de qual folha carregou primeiro (§6.4). Então a peça escreve o próprio respiro, sempre DERIVADO de --sec-gap, que continua a fonte única do ritmo (§4). Nada de clamp solto aqui. A conta que importa é a SOMA com o vizinho, porque cada dobra traz o próprio --sec-gap: em cima 1 + 1 = 2 vãos, o ritmo normal da casa; embaixo .4 + 1 = 1.4 vãos, 30% mais perto. Medido a 1440x900, onde --sec-gap resolve em 126px: 252px acima contra 176px abaixo. É esse desequilíbrio que o olho lê como "começou um assunto novo aqui". QUEM PUSER ESTA PEÇA ENTRE DUAS DOBRAS SEM PADDING PRÓPRIO tem de subir os dois parafusos: sem vizinho para somar, .4 de vão fecha demais e a abertura encosta no que vem depois. */ --abt-antes:var(--sec-gap); --abt-depois:calc(var(--sec-gap) * .4); padding-block:var(--abt-antes) var(--abt-depois); } /* ---------------------------------------------------------------- frase */ /* Só as margens. O desenho é a primitiva .display-xl do core. POR QUE OS DOIS VÃOS MORAM NA FRASE, e não um margin-top no olho e outro no apoio: o .sec-lead já nasce com margin-top:18px e o h2 do reset nasce com margin:0. Uma regra .abt-apoio{margin-top:…} empataria com .sec-lead em especificidade (0,1,0) e passaria a depender da ordem das folhas (§6.4). Pendurados na frase — que não tem margem para disputar — não há empate. E AQUI ESTÁ A ARMADILHA: o vão de baixo COLAPSA com o margin-top:18px do .sec-lead. Margens verticais de irmãos adjacentes colapsam no MAIOR dos dois, não somam. Medido a 1440: margin-bottom 27.4px, vão real 28px (a 390px: 15.7px de margem, vão real 18px — a primitiva mandando). Consequência prática — abaixo de 18px este parafuso não faz nada, e quem o baixar tentando fechar o bloco vai jurar que o CSS não está carregando. Para fechar de verdade abaixo de 18px é preciso mexer na primitiva, e não se mexe na primitiva (§10.5): use outro componente. Em em, e não em px: os dois vãos são função do corpo da frase, e o corpo é um clamp. Em px eles ficariam largos demais em celular e apertados em tela grande, e pedir um segundo clamp para acompanhar o primeiro é escrever a mesma curva duas vezes. */ .abt-frase{margin-block:.5em .56em} /* O ITÁLICO DE MARCA, e a regra existe porque o core não a tem. h2.sec-title em pinta o realce; .display-xl não pinta nada — o dentro dela sai em itálico da própria cor, e a palavra que carrega a ideia da abertura se perde. Os valores são os mesmos da regra do core, de propósito: numa página que use as duas, o realce tem de ser o MESMO realce. O tracking relaxa de -.02em para -.01em porque o itálico já inclina a letra para dentro da vizinha. Elemento como descendente do prefixo, em prosa: é o que o §6.3 permite, e é o que o precedente .ent-brand em do conteudo/grid-entidades faz. O CONTRASTE DEPENDE DO ESCOPO, e é por isso que a cor é parafuso. Medido no tema liberta-wealth (--accent sage #c6ceaa, --accent-2 tan #af9274), contra o fundo de cada escopo: --accent --accent-2 --fg .sec-dark 12.08 6.78 17.39 .sec-deep 10.83 6.08 15.60 .sec-paper 1.36 2.42 14.62 .sec-light 1.36 2.42 15.23 Nos dois escuros o realce é confortável e é o padrão. Nos dois claros a sage some (1.36:1) e o tan também não fecha os 3:1 de texto grande — então o escopo claro pede --abt-em:var(--fg), e o itálico sozinho passa a marcar a palavra. O itálico é o que carrega o realce em qualquer escopo; a cor é reforço, nunca a única pista. Ver ficha, Variações. */ .abt-frase em{ font-style:italic; font-weight:700; letter-spacing:-.01em; color:var(--abt-em,var(--accent)); } /* ---------------------------------------------------------------- variação centrada */ /* Monumento em vez de porta de entrada — ver ficha, Variações. O .sec-lead nasce com max-width e alinhado à esquerda da caixa; num bloco centrado ele precisa do margin-inline. Não há empate aqui (a primitiva não declara margin-inline), mas o seletor é composto pelo mesmo motivo do .fall-head .sec-lead do midia/colunas-cascata: a regra tem de vencer independentemente da ordem das folhas. */ .abt-centro{text-align:center} .abt-centro .abt-apoio{margin-inline:auto} /* ---------------------------------------------------------------- mobile */ /* A QUEBRA VOLTA A SER AUTOMÁTICA, e isto é o oposto de desistir. A linha do
foi escrita para a coluna larga; onde ela não cabe, o navegador a quebra por dentro e o
passa a produzir um TOCO. Medido a 601px (corpo já no piso de 28px, coluna de 526): três linhas de 453, *92* e 364px — o 92 é a sobra da primeira linha, e ninguém escreveria isso. Apagando o
, a frase volta ao text-wrap:balance, que é a opinião do próprio core (declarada no reset de h1..h4 e desligada pela .display-xl justamente para o
valer). Aqui o
saiu; a opinião volta. Medido a 390px: 3 linhas de 288/337/284 numa coluna de 350, contra 4 linhas de 288/257/226/*133* sem a regra. Nem um caso nem o outro estoura a coluna — o defeito é a linha órfã, não o overflow. O CORTE EM 720px É FUNÇÃO DA COPY E DA FONTE, não um breakpoint de dispositivo. A linha mais longa mede 549px no piso de 28px; a coluna vale 0.9 × viewport enquanto --pad está em 5vw, então ela só cabe acima de ~610px. 720 dá 18% de folga, que é o que absorve uma display mais larga no tema do cliente ou uma palavra a mais na frase. Medido: a 719px a frase sai balanceada em duas linhas de 453 e 461px; a 721px a linha ocupa 86.6% da coluna e não há toco; a 601px, com o corte em 600, havia. QUEM TROCAR A COPY REMEDE ESTE NÚMERO — é o único valor deste arquivo que não se deriva de token nem de token de primitiva. O seletor da primeira regra é duplo de propósito: .abt-frase e .display-xl empatam em especificidade (0,1,0), e sem o ancestral quem venceria seria a folha que carregou por último — o §6.4 proíbe depender disso. */ @media(max-width:720px){ .abt .abt-frase{text-wrap:balance} .abt-quebra{display:none} }