— os estilos de link/span do Astra/Elementor têm
especificidade igual ou maior e ganhavam por ordem no bundle
(padding/font-weight do chip ativo ignorados, __dot saindo 0×0
porque `display:inline-block` virava `inline`). Fix: encadear pela
ESTRUTURA REAL do widget (`.pht-m-chips > .pht-m-chips__rail >
a.pht-m-chip > span.pht-m-chip__dot`) — 3+ classes sempre, sem
exceção nenhuma. Toda propriedade de layout permanece declarada
explicitamente (regra geral desde a M5.2.1.2). */
.pht-m .pht-m-chips.pht-m-chips {
position: relative;
}
/* M5.2.1.2 — achado real: quando o trilho vive DENTRO do header (que É
um .e-con), o padding do Elementor vaza para .pht-m-chips por falta
de declaração explícita nossa. */
.pht-m .pht-m-header .pht-m-chips {
padding: 0;
}
.pht-m .pht-m-chips .pht-m-chips__rail {
display: flex;
align-items: center;
gap: 10px;
height: 62px;
padding: 12px 20px;
overflow-x: auto;
scrollbar-width: none;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
touch-action: pan-x;
cursor: grab;
}
.pht-m .pht-m-chips .pht-m-chips__rail::-webkit-scrollbar {
display: none;
}
.pht-m .pht-m-chips .pht-m-chips__rail.is-dragging {
cursor: grabbing;
}
.pht-m-chips .pht-m-chips__rail .pht-m-chip {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 6px;
height: 38px;
padding: 8px 16px;
border-radius: 9999px;
border: 1px solid var(--pht-border);
background: transparent;
color: var(--pht-text-2);
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 14px;
line-height: 20px;
font-weight: 500;
white-space: nowrap;
text-decoration: none;
box-sizing: border-box;
}
.pht-m-chips .pht-m-chips__rail .pht-m-chip:hover {
color: var(--pht-text);
}
/* Estado ativo: combinar com a elevação do Kit (elev-1) no markup do
Elementor, ex.: class="pht-m-chip is-active elev-1" — nunca
redeclarada aqui (M5.2.0 §1: nunca duplicar o que já vive no Kit). */
.pht-m-chips .pht-m-chips__rail .pht-m-chip.is-active {
display: flex;
gap: 6px;
padding: 8px 16px 8px 12px;
font-weight: 600;
background: var(--pht-chip-active-color, var(--pht-accent));
border-color: transparent;
color: #fff;
box-sizing: border-box;
}
.pht-m-chips .pht-m-chips__rail .pht-m-chip.is-home.is-active {
background: var(--pht-grad-sunset);
}
.pht-m-chips .pht-m-chips__rail .pht-m-chip .pht-m-chip__dot {
display: block;
height: 8px;
width: 8px;
border-radius: 9999px;
flex-shrink: 0;
box-sizing: border-box;
}
/* M5.2.4 — chip "Início" do trilho: selo PeakHome (18px) + peso
semibold + recuo esquerdo p/ o ícone (pl-3 do protótipo), mesmo
inativo. Ativo já herda o fundo sunset de `.is-home.is-active`. */
.pht-m-chips .pht-m-chips__rail .pht-m-chip.is-home {
padding: 8px 16px 8px 12px;
font-weight: 600;
color: var(--pht-text);
}
.pht-m-chips .pht-m-chips__rail .pht-m-chip .pht-m-chip__home {
display: block;
height: 18px;
width: 18px;
flex-shrink: 0;
}
/* ===== DRAWER (M5.2.4 — widget peak-altitude-mobile-header) =====
Overlay `fixed` renderizado como IRMÃO do `.pht-m-header` (nunca
dentro: o `backdrop-filter` do header viraria bloco de contenção do
`fixed`). Fechado = invisível por `visibility` (transição atrasada
p/ o painel terminar de sair antes de sumir); aberto por `.is-open`
(animação 100% CSS). Medidas do protótipo (site-header.tsx, drawer):
painel 82% / máx 320px, cabeçalho px-5 py-4, linhas px-5 py-3.5,
rodapé p-5, backdrop #070d18/60, elevação via `.elev-3` do Kit. */
.pht-m .pht-m-drawer.pht-m-drawer {
position: fixed;
inset: 0;
z-index: 50;
visibility: hidden;
transition: visibility 0s linear 300ms;
}
.pht-m .pht-m-drawer.pht-m-drawer.is-open {
visibility: visible;
transition: visibility 0s;
}
.pht-m .pht-m-drawer .pht-m-drawer__backdrop {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
background: rgb(7 13 24 / 0.6);
opacity: 0;
transition: opacity 300ms;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.pht-m .pht-m-drawer.is-open .pht-m-drawer__backdrop {
opacity: 1;
}
.pht-m .pht-m-drawer .pht-m-drawer__panel {
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
height: 100%;
height: 100dvh;
width: 82%;
max-width: 320px;
background: var(--pht-surface);
transform: translateX(-100%);
transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
box-sizing: border-box;
}
.pht-m .pht-m-drawer.is-open .pht-m-drawer__panel {
transform: translateX(0);
}
.pht-m .pht-m-drawer .pht-m-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--pht-border);
padding: 16px 20px;
box-sizing: border-box;
}
.pht-m .pht-m-drawer .pht-m-drawer__logo {
display: flex;
align-items: center;
}
.pht-m .pht-m-drawer .pht-m-drawer__logo img {
height: 32px;
width: auto;
display: block;
}
.pht-m .pht-m-drawer .pht-m-drawer__logo-dark.pht-m-drawer__logo-dark {
display: none !important;
}
html[data-theme='dark'] .pht-m .pht-m-drawer .pht-m-drawer__logo-light.pht-m-drawer__logo-light {
display: none !important;
}
html[data-theme='dark'] .pht-m .pht-m-drawer .pht-m-drawer__logo-dark.pht-m-drawer__logo-dark {
display: block !important;
}
.pht-m .pht-m-drawer .pht-m-drawer__close {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
width: 40px;
border-radius: 9999px;
padding: 0;
border: 0;
background: transparent;
color: var(--pht-text);
cursor: pointer;
box-sizing: border-box;
}
.pht-m .pht-m-drawer .pht-m-drawer__close:active {
background: var(--pht-surface-sunken);
}
.pht-m .pht-m-drawer .pht-m-drawer__close svg {
height: 20px;
width: 20px;
display: block;
}
.pht-m .pht-m-drawer .pht-m-drawer__theme {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--pht-border);
padding: 14px 20px;
box-sizing: border-box;
}
.pht-m .pht-m-drawer .pht-m-drawer__theme-label {
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: var(--pht-text-2);
}
.pht-m .pht-m-drawer .pht-m-drawer__list {
flex: 1;
overflow-y: auto;
list-style: none;
margin: 0;
padding: 8px 0;
box-sizing: border-box;
/* Barra de rolagem discreta, na paleta do site (M5.2.4.2): trilho
invisível, polegar no mesmo cinza-slate das bordas. Puramente
cosmético e por token — troca sozinho no tema escuro, e onde o
navegador ignorar (iOS/overlay) o scroll segue normal. */
scrollbar-width: thin;
scrollbar-color: var(--pht-border-strong) transparent;
}
.pht-m .pht-m-drawer .pht-m-drawer__list::-webkit-scrollbar {
width: 6px;
}
.pht-m .pht-m-drawer .pht-m-drawer__list::-webkit-scrollbar-track {
background: transparent;
}
.pht-m .pht-m-drawer .pht-m-drawer__list::-webkit-scrollbar-thumb {
background: var(--pht-border-strong);
border-radius: 9999px;
}
.pht-m .pht-m-drawer .pht-m-drawer__list::-webkit-scrollbar-thumb:hover {
background: var(--pht-text-3);
}
.pht-m .pht-m-drawer .pht-m-drawer__link {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 20px;
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 16px;
line-height: 24px;
font-weight: 500;
color: var(--pht-text);
text-decoration: none;
box-sizing: border-box;
}
.pht-m .pht-m-drawer .pht-m-drawer__link.is-home {
gap: 12px;
font-weight: 600;
}
.pht-m .pht-m-drawer .pht-m-drawer__link.is-active {
color: var(--pht-accent);
}
.pht-m .pht-m-drawer .pht-m-drawer__link:active {
background: var(--pht-surface-sunken);
}
.pht-m .pht-m-drawer .pht-m-drawer__home-icon {
display: block;
height: 20px;
width: 20px;
flex-shrink: 0;
}
.pht-m .pht-m-drawer .pht-m-drawer__dot {
display: block;
height: 10px;
width: 10px;
border-radius: 9999px;
flex-shrink: 0;
box-sizing: border-box;
}
.pht-m .pht-m-drawer .pht-m-drawer__divider {
list-style: none;
height: 0;
margin: 6px 20px;
padding: 0;
border-top: 1px solid var(--pht-border);
}
.pht-m .pht-m-drawer .pht-m-drawer__foot {
border-top: 1px solid var(--pht-border);
padding: 20px;
box-sizing: border-box;
}
/* ===== CONTA / ENTRAR COM GOOGLE (M5.9.4) =====
Fica acima do botão da newsletter, no rodapé do menu. Estilo NEUTRO de
propósito (superfície + borda): o gradiente sunset é a chamada principal
e não pode ter dois CTAs disputando atenção — Regra do Horizonte.
O "G" mantém as cores oficiais do Google; o resto segue os tokens. */
.pht-m .pht-m-drawer .pht-m-drawer__login {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 48px;
margin-bottom: 10px;
border: 1px solid var(--pht-border-strong);
border-radius: 9999px;
background: var(--pht-surface);
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 14px;
line-height: 20px;
font-weight: 700;
color: var(--pht-text);
text-decoration: none;
box-sizing: border-box;
}
.pht-m .pht-m-drawer .pht-m-drawer__login:active {
background: var(--pht-surface-sunken);
}
.pht-m .pht-m-drawer .pht-m-drawer__login-icon {
display: block;
width: 18px;
height: 18px;
flex-shrink: 0;
}
.pht-m .pht-m-drawer .pht-m-drawer__account {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.pht-m .pht-m-drawer .pht-m-drawer__avatar {
display: flex;
align-items: center;
justify-content: center;
height: 36px;
width: 36px;
flex-shrink: 0;
border-radius: 9999px;
background: var(--pht-grad-sunset);
font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
font-size: 13px;
line-height: 1;
font-weight: 700;
color: #fff;
box-sizing: border-box;
}
.pht-m .pht-m-drawer .pht-m-drawer__account-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.pht-m .pht-m-drawer .pht-m-drawer__account-name {
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 14px;
line-height: 18px;
font-weight: 700;
color: var(--pht-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pht-m .pht-m-drawer .pht-m-drawer__logout {
margin-top: 2px;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 12px;
line-height: 14.4px;
font-weight: 500;
letter-spacing: 0.96px;
text-transform: uppercase;
color: var(--pht-text-3);
text-decoration: none;
}
.pht-m .pht-m-drawer .pht-m-drawer__newsletter {
display: block;
border-radius: 9999px;
background: var(--pht-grad-sunset);
padding: 14px 16px;
text-align: center;
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 14px;
line-height: 20px;
font-weight: 700;
color: #fff;
text-decoration: none;
box-sizing: border-box;
}
/* ===== BUSCA (M5.2.4.1 — overlay do widget peak-altitude-mobile-header) =====
Tela cheia sobre o canvas, IRMÃO do `.pht-m-header` pelo mesmo motivo do
drawer (o `backdrop-filter` do header capturaria um `fixed` filho).
Medidas do protótipo (site-header.tsx, bloco searchOpen): container
máx. 720px / px-5 pt-5, campo h-12 raio 12px, ícone 20px, cancelar
14px semibold no accent, rótulos mono 12px, chips pill 14px,
recentes 15px semibold com divisor. */
/* M5.2.4.4 — vidro fosco: o overlay deixa a página entrever por trás, com
desfoque, em vez do fundo sólido do V2. É um DESVIO deliberado do
protótipo (lá o `bg-canvas` é opaco), pedido do autor — e combina com
o próprio header, que já usa backdrop-filter. Opacidade e desfoque
saem por variável para virarem controle no painel. */
.pht-m .pht-m-search.pht-m-search {
position: fixed;
inset: 0;
z-index: 50;
background: var(--pht-search-bg, color-mix(in srgb, var(--pht-canvas) 82%, transparent));
backdrop-filter: blur(var(--pht-search-blur, 20px));
-webkit-backdrop-filter: blur(var(--pht-search-blur, 20px));
overflow-y: auto;
visibility: hidden;
opacity: 0;
transition: opacity 150ms, visibility 0s linear 150ms;
box-sizing: border-box;
scrollbar-width: thin;
scrollbar-color: var(--pht-border-strong) transparent;
}
.pht-m .pht-m-search.pht-m-search::-webkit-scrollbar {
width: 6px;
}
.pht-m .pht-m-search.pht-m-search::-webkit-scrollbar-track {
background: transparent;
}
.pht-m .pht-m-search.pht-m-search::-webkit-scrollbar-thumb {
background: var(--pht-border-strong);
border-radius: 9999px;
}
.pht-m .pht-m-search.pht-m-search.is-open {
visibility: visible;
opacity: 1;
transition: opacity 150ms, visibility 0s;
}
.pht-m .pht-m-search .pht-m-search__inner {
margin: 0 auto;
width: 100%;
max-width: 720px;
padding: 20px 20px 40px;
box-sizing: border-box;
}
.pht-m .pht-m-search .pht-m-search__row {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
}
.pht-m .pht-m-search .pht-m-search__field {
display: flex;
flex: 1;
align-items: center;
gap: 12px;
height: 48px;
min-width: 0;
border-radius: 12px;
border: 1px solid var(--pht-border);
background: var(--pht-surface);
padding: 0 16px;
box-sizing: border-box;
}
.pht-m .pht-m-search .pht-m-search__icon {
display: block;
height: 20px;
width: 20px;
flex-shrink: 0;
color: var(--pht-text-3);
}
.pht-m .pht-m-search .pht-m-search__input {
height: 100%;
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
outline: none;
background: transparent;
box-shadow: none;
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 16px;
line-height: 24px;
color: var(--pht-text);
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
}
.pht-m .pht-m-search .pht-m-search__input::placeholder {
color: var(--pht-text-3);
opacity: 1;
}
.pht-m .pht-m-search .pht-m-search__input::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
.pht-m .pht-m-search .pht-m-search__cancel {
flex-shrink: 0;
margin: 0;
padding: 0;
border: 0;
background: transparent;
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 14px;
line-height: 20px;
font-weight: 600;
color: var(--pht-accent);
white-space: nowrap;
cursor: pointer;
}
.pht-m .pht-m-search .pht-m-search__label {
margin: 32px 0 0;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 12px;
line-height: 14.4px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.96px; /* 0.08em sobre 12px */
color: var(--pht-text-3);
}
.pht-m .pht-m-search .pht-m-search__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.pht-m .pht-m-search .pht-m-search__chip {
display: inline-flex;
align-items: center;
border-radius: 9999px;
border: 1px solid var(--pht-border);
background: var(--pht-surface);
padding: 8px 16px;
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: var(--pht-text-2);
text-decoration: none;
white-space: nowrap;
box-sizing: border-box;
}
.pht-m .pht-m-search .pht-m-search__chip:hover {
border-color: var(--pht-border-strong);
}
.pht-m .pht-m-search .pht-m-search__list {
list-style: none;
margin: 8px 0 0;
padding: 0;
box-sizing: border-box;
}
.pht-m .pht-m-search .pht-m-search__list li {
border-bottom: 1px solid var(--pht-border);
}
.pht-m .pht-m-search .pht-m-search__list li:last-child {
border-bottom: 0;
}
.pht-m .pht-m-search .pht-m-search__item {
display: block;
padding: 14px 0;
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 15px;
line-height: 20.625px; /* leading-snug (1.375) sobre 15px */
font-weight: 600;
color: var(--pht-text);
text-decoration: none;
}
/* ---- Resultados ao vivo (M5.2.4.5) ----
Mesma anatomia do card "trilha" (miniatura + corpo), em escala menor
para caber vários na tela sem rolar: 56px em vez de 96px. Título com
recorte em 2 linhas para nenhum resultado empurrar os outros. */
.pht-m .pht-m-search .pht-m-search__results {
margin-top: 24px;
}
.pht-m .pht-m-search .pht-m-search__hits {
list-style: none;
margin: 8px 0 0;
padding: 0;
box-sizing: border-box;
}
.pht-m .pht-m-search .pht-m-search__hits li {
border-bottom: 1px solid var(--pht-border);
}
.pht-m .pht-m-search .pht-m-search__hits li:last-child {
border-bottom: 0;
}
.pht-m .pht-m-search .pht-m-search__hit {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
text-decoration: none;
box-sizing: border-box;
}
.pht-m .pht-m-search .pht-m-search__hit:active {
opacity: 0.7;
}
.pht-m .pht-m-search .pht-m-search__hit-thumb {
display: block;
position: relative;
height: 56px;
width: 56px;
flex-shrink: 0;
border-radius: 12px;
overflow: hidden;
background: var(--pht-surface-sunken);
box-sizing: border-box;
}
.pht-m .pht-m-search .pht-m-search__hit-thumb img {
height: 100%;
width: 100%;
object-fit: cover;
display: block;
}
.pht-m .pht-m-search .pht-m-search__hit-body {
display: block;
min-width: 0;
flex: 1;
}
.pht-m .pht-m-search .pht-m-search__hit-cat {
display: block;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 11px;
line-height: 13.2px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.88px; /* 0.08em sobre 11px */
color: var(--pht-text-3);
}
.pht-m .pht-m-search .pht-m-search__hit-title {
display: -webkit-box;
margin-top: 3px;
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 15px;
line-height: 20.625px;
font-weight: 600;
color: var(--pht-text);
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pht-m .pht-m-search .pht-m-search__all {
display: block;
margin-top: 16px;
border-radius: 9999px;
border: 1px solid var(--pht-border);
padding: 12px 16px;
text-align: center;
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 14px;
line-height: 20px;
font-weight: 600;
color: var(--pht-accent);
text-decoration: none;
box-sizing: border-box;
}
.pht-m .pht-m-search .pht-m-search__empty {
margin: 32px 0 0;
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 15px;
line-height: 22px;
color: var(--pht-text-2);
text-align: center;
}
/* ===== FOOTER ===== */
.pht-m .pht-m-footer.pht-m-footer {
background: var(--pht-footer);
color: #fff;
box-sizing: border-box;
}
.pht-m .pht-m-footer .pht-m-footer__inner {
display: block;
padding: 40px 20px 32px;
box-sizing: border-box;
}
.pht-m .pht-m-footer .pht-m-footer__brand-logo {
height: 36px;
width: auto;
display: block;
}
.pht-m .pht-m-footer .pht-m-footer__brand-text {
margin-top: 16px;
max-width: 320px;
font-size: 14px;
line-height: 22.75px; /* leading-relaxed (1.625) sobre 14px */
color: rgb(255 255 255 / 0.6);
}
.pht-m .pht-m-footer .pht-m-footer__social-link {
display: flex;
align-items: center;
gap: 12px;
border-radius: 12px;
background: rgb(255 255 255 / 0.1);
padding: 12px 16px;
text-decoration: none;
color: #fff;
box-sizing: border-box;
}
.pht-m .pht-m-footer .pht-m-footer__social-link:active {
background: rgb(255 255 255 / 0.2);
}
.pht-m .pht-m-footer .pht-m-footer__nav-title {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 12px;
line-height: 14.4px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.96px; /* 0.08em sobre 12px */
color: var(--pht-sunset-orange, #ff7a3c);
margin-bottom: 16px;
}
.pht-m .pht-m-footer .pht-m-footer__nav-link {
display: block;
font-size: 14px;
line-height: 20px;
color: rgb(255 255 255 / 0.75);
text-decoration: none;
}
.pht-m .pht-m-footer .pht-m-footer__nav-link:hover {
color: #fff;
}
.pht-m .pht-m-footer .pht-m-footer__legal {
display: flex;
align-items: center;
gap: 12px;
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid rgb(255 255 255 / 0.1);
}
.pht-m .pht-m-footer .pht-m-footer__legal-text {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 12px;
line-height: 16.8px; /* leading-normal aprox. */
color: rgb(255 255 255 / 0.45);
}
/* Wrapper externo (fora do fundo escuro): só o espaçamento antes do
horizonte — o próprio `.pht-m-ridge` (M5.2.2) já resolve a cor para
var(--pht-footer) por padrão, então o "vale" (canvas) aparece atrás
da silhueta e o escuro só começa dentro de `.pht-m-footer`. */
/* M5.9 — o "vale" antes da cordilheira agora é PINTADO pelo próprio
wrapper, com `padding-top` em vez de `margin-top`.
Achado real (31/07, print em aparelho): no protótipo o vale funciona
porque a página inteira tem o canvas atrás; no WordPress o footer é
injetado no `wp_footer`, FORA do `#page`, então o que aparecia atrás da
margem era o fundo do `body` — branco. Resultado: faixa branca gritante
acima da cordilheira em TODAS as páginas no tema escuro.
`margin-top` nunca poderia resolver: área de margem fica FORA do fundo
do elemento. Com `padding-top` + `background`, o vale é sempre o canvas,
nos dois temas, independente do que o tema/plugins façam com o body.
Altura ajustável pelo controle do widget (`--pht-footer-gap`). */
.pht-m .pht-m-footer__root.pht-m-footer__root {
display: block;
margin-top: 0;
padding-top: var(--pht-footer-gap, 64px);
background: var(--pht-canvas);
}
.pht-m .pht-m-footer .pht-m-footer__socials {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 24px;
}
.pht-m .pht-m-footer .pht-m-footer__social-icon {
display: block;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.pht-m .pht-m-footer .pht-m-footer__social-text {
display: flex;
flex-direction: column;
line-height: 1.25;
}
.pht-m .pht-m-footer .pht-m-footer__social-name {
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 14px;
line-height: 17.5px;
font-weight: 700;
}
.pht-m .pht-m-footer .pht-m-footer__social-handle {
display: block;
margin-top: 2px;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 12px;
line-height: 14.4px;
color: rgb(255 255 255 / 0.6);
}
.pht-m .pht-m-footer .pht-m-footer__social-arrow {
display: block;
width: 16px;
height: 16px;
flex-shrink: 0;
margin-left: auto;
color: rgb(255 255 255 / 0.6);
}
/* Espaçamento entre seções empilhadas (categorias / institucional+legal /
em alta agora) — sempre 40px no mobile (o v2 zera isso só no desktop
via grid, que não existe aqui). */
.pht-m .pht-m-footer .pht-m-footer__nav {
display: block;
margin-top: 40px;
}
.pht-m .pht-m-footer .pht-m-footer__inst-legal {
display: flex;
flex-direction: column;
gap: 32px;
}
.pht-m .pht-m-footer .pht-m-footer__nav-list {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.pht-m .pht-m-footer .pht-m-footer__cat-link {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 14px;
line-height: 20px;
color: rgb(255 255 255 / 0.75);
text-decoration: none;
}
.pht-m .pht-m-footer .pht-m-footer__cat-link:hover {
color: #fff;
}
.pht-m .pht-m-footer .pht-m-footer__cat-dot {
display: block;
width: 6px;
height: 6px;
flex-shrink: 0;
border-radius: 9999px;
}
.pht-m .pht-m-footer .pht-m-footer__trending-list {
display: flex;
flex-direction: column;
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
.pht-m .pht-m-footer .pht-m-footer__trending-link {
display: block;
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 14px;
line-height: 19.25px;
font-weight: 600;
color: rgb(255 255 255 / 0.85);
text-decoration: none;
}
.pht-m .pht-m-footer .pht-m-footer__trending-link:hover {
color: #fff;
}
.pht-m .pht-m-footer .pht-m-footer__contact {
display: flex;
align-items: center;
gap: 10px;
margin-top: 28px;
border: 1px solid rgb(255 255 255 / 0.1);
border-radius: 12px;
background: rgb(255 255 255 / 0.05);
padding: 12px 16px;
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: rgb(255 255 255 / 0.9);
text-decoration: none;
box-sizing: border-box;
}
.pht-m .pht-m-footer .pht-m-footer__contact:hover {
background: rgb(255 255 255 / 0.1);
}
.pht-m .pht-m-footer .pht-m-footer__contact-icon {
display: block;
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--pht-sunset-orange, #ff7a3c);
}
.pht-m .pht-m-footer .pht-m-footer__legal-mark {
display: block;
width: 20px;
height: 20px;
flex-shrink: 0;
opacity: 0.6;
}
/* ===== CARDS ===== */
.pht-m .pht-m-card-trilha.pht-m-card-trilha {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px 0;
text-decoration: none;
box-sizing: border-box;
}
.pht-m .pht-m-card-trilha .pht-m-card-trilha__body {
min-width: 0;
flex: 1;
}
.pht-m .pht-m-card-trilha .pht-m-card-trilha__title {
margin-top: 6px;
font-size: 16px;
line-height: 22px; /* leading-snug (1.375) sobre 16px */
font-weight: 700;
color: var(--pht-text);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pht-m .pht-m-card-trilha .pht-m-card-trilha__thumb {
position: relative;
flex-shrink: 0;
height: 96px;
width: 96px;
border-radius: 12px; /* rounded-xl do V2 — medido; não é --radius-card (16px) */
overflow: hidden;
box-sizing: border-box;
}
.pht-m .pht-m-card-trilha .pht-m-card-trilha__thumb img {
height: 100%;
width: 100%;
object-fit: cover;
display: block;
}
/* M5.2.6.2 — "Continue a trilha" com identidade ALTITUDE: categoria na cor
da família com marcador de PICO (a assinatura das montanhas), revelação
ao rolar (levantada) e micro-interação no hover (zoom da miniatura +
título vai pro acento). Estilo COMPACTO/limpo (lista dividida), como o V2
e o print pedido. */
.pht-m .pht-m-card-trilha .pht-m-card-trilha__body {
display: flex;
flex-direction: column;
}
.pht-m .pht-m-card-trilha .pht-m-card-trilha__cat {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 12px;
line-height: 1.2;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.96px;
}
.pht-m .pht-m-card-trilha .pht-m-card-trilha__cat::before {
content: '';
width: 10px;
height: 8px;
flex-shrink: 0;
background-color: currentColor;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.pht-m .pht-m-card-trilha .pht-m-card-trilha__meta {
margin-top: 8px;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 12px;
line-height: 1.2;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.96px;
color: var(--pht-text-3);
}
.pht-m .pht-m-card-trilha .pht-m-card-trilha__title {
transition: color 180ms ease;
}
.pht-m .pht-m-card-trilha .pht-m-card-trilha__thumb img {
transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
.pht-m .pht-m-card-trilha.pht-m-card-trilha:hover .pht-m-card-trilha__thumb img {
transform: scale(1.05);
}
.pht-m .pht-m-card-trilha.pht-m-card-trilha:hover .pht-m-card-trilha__title {
color: var(--pht-accent);
}
}
/* ===== CARD CUME (M5.2.6.1) — cards de DESTAQUE dos relacionados
("Continue a trilha"). Imagem no topo (16:9), elevação Mirante,
micro-interação no hover (sobe + zoom sutil na imagem) e revelação ao
entrar na viewport. Identidade ALTITUDE: cor de família na categoria,
tipografia display no título, escada .elev-*. ==================== */
.pht-m .pht-m-card-cume.pht-m-card-cume {
display: block;
overflow: hidden;
border-radius: var(--radius-card, 16px);
background: var(--pht-surface);
box-shadow: 0 4px 16px rgb(2 8 23 / 0.08);
text-decoration: none;
transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease;
box-sizing: border-box;
}
html[data-theme='dark'] .pht-m .pht-m-card-cume.pht-m-card-cume {
background: var(--pht-surface-raised);
box-shadow: 0 0 0 1px var(--pht-border);
}
.pht-m .pht-m-card-cume.pht-m-card-cume:active {
transform: scale(0.99);
}
@media (hover: hover) {
.pht-m .pht-m-card-cume.pht-m-card-cume:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgb(2 8 23 / 0.16);
}
html[data-theme='dark'] .pht-m .pht-m-card-cume.pht-m-card-cume:hover {
box-shadow: 0 0 0 1px var(--pht-border-strong);
}
}
.pht-m .pht-m-card-cume .pht-m-card-cume__media {
display: block;
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--pht-surface-sunken);
}
.pht-m .pht-m-card-cume .pht-m-card-cume__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
.pht-m .pht-m-card-cume.pht-m-card-cume:hover .pht-m-card-cume__img {
transform: scale(1.04);
}
}
.pht-m .pht-m-card-cume .pht-m-card-cume__body {
display: block;
padding: 18px 20px 20px;
}
.pht-m .pht-m-card-cume .pht-m-card-cume__cat.pht-m-card-cume__cat {
display: block;
margin: 0;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 12px;
line-height: 1.2;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.96px;
}
.pht-m .pht-m-card-cume .pht-m-card-cume__title {
display: block;
margin: 8px 0 0;
font-family: var(--font-display, 'Bricolage Grotesque', var(--font-sans, 'Inter'), sans-serif);
font-size: 18px;
line-height: 1.3;
font-weight: 650;
letter-spacing: -0.01em;
color: var(--pht-text);
text-wrap: pretty;
}
.pht-m .pht-m-card-cume .pht-m-card-cume__excerpt {
display: -webkit-box;
margin: 8px 0 0;
font-size: 14px;
line-height: 1.5;
color: var(--pht-text-2);
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pht-m .pht-m-card-cume .pht-m-card-cume__meta.pht-m-card-cume__meta {
display: block;
margin: 10px 0 0;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 12px;
line-height: 1.2;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.96px;
color: var(--pht-text-3);
}
/* Scroll-reveal — só esconde quando o JS (com IntersectionObserver)
marcou com `pht-reveal-ready`. Sem JS/sem IO → sempre visível.
Ver initReveal() em altitude-behaviors.js. */
html.pht-reveal-ready .pht-m .pht-m-reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity 560ms cubic-bezier(0.22, 1, 0.36, 1),
transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
html.pht-reveal-ready .pht-m .pht-m-reveal.is-revealed {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
html.pht-reveal-ready .pht-m .pht-m-reveal {
opacity: 1;
transform: none;
transition: none;
}
}
.pht-m .pht-m-card-cume.pht-m-card-cume {
display: block;
overflow: hidden;
border-radius: var(--radius-card, 16px);
background: var(--pht-surface);
text-decoration: none;
box-sizing: border-box;
}
.pht-m .pht-m-card-cume .pht-m-card-cume__media {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.pht-m .pht-m-card-cume .pht-m-card-cume__media img {
height: 100%;
width: 100%;
object-fit: cover;
display: block;
}
.pht-m .pht-m-card-cume .pht-m-card-cume__score {
position: absolute;
top: 12px;
right: 12px;
border-radius: 9999px;
background: rgb(7 13 24 / 0.8);
padding: 4px 10px;
color: #fff;
font-size: 14px;
line-height: 20px;
font-weight: 600;
backdrop-filter: blur(4px);
}
.pht-m .pht-m-card-cume .pht-m-card-cume__body {
padding: 20px;
box-sizing: border-box;
}
.pht-m .pht-m-card-cume .pht-m-card-cume__title {
margin-top: 8px;
color: var(--pht-text);
}
.pht-m .pht-m-card-cume .pht-m-card-cume__excerpt {
margin-top: 8px;
font-size: 14px;
line-height: 22.75px; /* leading-relaxed */
color: var(--pht-text-2);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pht-m .pht-m-card-meta.pht-m-card-meta {
margin-top: 8px;
color: var(--pht-text-3);
}
/* ===== SECTION HEADER ===== */
.pht-m .pht-m-section-header.pht-m-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
.pht-m .pht-m-section-header .pht-m-section-header__title {
display: flex;
align-items: center;
gap: 12px;
color: var(--pht-text);
}
.pht-m .pht-m-section-header .pht-m-section-header__bar {
height: 20px;
width: 6px;
border-radius: 9999px;
background: var(--pht-section-color, var(--pht-accent));
flex-shrink: 0;
}
.pht-m .pht-m-section-header .pht-m-section-header__cta {
display: flex;
align-items: center;
gap: 2px;
flex-shrink: 0;
font-size: 14px;
line-height: 20px;
font-weight: 700;
color: var(--pht-section-color, var(--pht-accent));
text-decoration: none;
}
.pht-m .pht-m-section-header .pht-m-section-header__cta-icon {
height: 16px;
width: 16px;
flex-shrink: 0;
}
/* ===== PÁGINAS INSTITUCIONAIS ===== */
.pht-m .pht-m-inst-breadcrumb.pht-m-inst-breadcrumb {
padding: 20px 20px 0;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 12px;
line-height: 14.4px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.96px;
color: var(--pht-text-3);
box-sizing: border-box;
}
.pht-m .pht-m-inst-breadcrumb.pht-m-inst-breadcrumb a {
color: inherit;
text-decoration: none;
}
.pht-m .pht-m-inst-breadcrumb.pht-m-inst-breadcrumb a:hover {
color: var(--pht-text);
}
.pht-m .pht-m-inst-hero.pht-m-inst-hero {
position: relative;
overflow: hidden;
padding: 24px 20px 8px;
box-sizing: border-box;
}
.pht-m .pht-m-inst-hero .pht-m-inst-hero__contour {
position: absolute;
top: -32px;
right: -32px;
height: 192px;
width: 192px;
color: var(--pht-text-3);
opacity: 0.07;
pointer-events: none;
}
.pht-m .pht-m-inst-hero .pht-m-inst-hero__eyebrow {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 12px;
line-height: 14.4px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.96px;
color: var(--pht-cat-pink);
}
.pht-m .pht-m-inst-hero .pht-m-inst-hero__eyebrow-mark {
height: 16px;
width: 16px;
flex-shrink: 0;
}
.pht-m .pht-m-inst-hero .pht-m-inst-hero__title {
margin-top: 8px;
font-family: var(--font-display, 'Bricolage Grotesque', var(--font-sans, 'Inter'), sans-serif);
font-size: 28px;
line-height: 33.6px;
font-weight: 750;
letter-spacing: -0.3px;
color: var(--pht-text);
}
.pht-m .pht-m-inst-hero .pht-m-inst-hero__intro {
margin-top: 12px;
max-width: 58ch;
font-size: 16px;
line-height: 26px; /* leading-relaxed */
color: var(--pht-text-2);
}
.pht-m .pht-m-inst-hero .pht-m-inst-hero__rule {
margin-top: 20px;
height: 4px;
width: 40px;
border-radius: 9999px;
background: var(--pht-grad-sunset);
}
.pht-m .pht-m-inst-links.pht-m-inst-links {
padding: 0 20px 0; /* espaço ANTES deste widget já vem do flex_gap do container — dobrava aqui */
box-sizing: border-box;
}
.pht-m .pht-m-inst-links .pht-m-inst-links__eyebrow {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 12px;
line-height: 14.4px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.96px;
color: var(--pht-text-3);
}
.pht-m .pht-m-inst-links .pht-m-inst-links__title {
margin-top: 6px;
color: var(--pht-text);
}
.pht-m .pht-m-inst-links .pht-m-inst-links__grid {
margin-top: 16px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.pht-m .pht-m-inst-links .pht-m-inst-links__item {
display: flex;
align-items: center;
gap: 14px;
border-radius: var(--radius-card, 16px);
border: 1px solid var(--pht-border);
background: var(--pht-surface);
padding: 16px;
text-decoration: none;
box-sizing: border-box;
transition: transform 150ms;
}
.pht-m .pht-m-inst-links .pht-m-inst-links__item:active {
transform: scale(0.98);
}
.pht-m .pht-m-inst-links .pht-m-inst-links__icon {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
width: 40px;
flex-shrink: 0;
border-radius: 12px;
background: var(--pht-surface-sunken);
color: var(--pht-accent);
}
.pht-m .pht-m-inst-links .pht-m-inst-links__icon-svg {
height: 20px;
width: 20px;
}
.pht-m .pht-m-inst-links .pht-m-inst-links__name {
display: block;
font-size: 15px;
line-height: 21.75px;
font-weight: 700;
color: var(--pht-text);
}
.pht-m .pht-m-inst-links .pht-m-inst-links__short {
display: block;
margin-top: 2px;
font-size: 12px;
line-height: 16.5px; /* leading-snug */
color: var(--pht-text-3);
}
.pht-m .pht-m-inst-links .pht-m-inst-links__body {
min-width: 0;
flex: 1;
}
.pht-m .pht-m-inst-links .pht-m-inst-links__arrow {
display: block;
margin-left: auto;
height: 16px;
width: 16px;
flex-shrink: 0;
color: var(--pht-text-3);
}
/* ===== EXPLORADOR DE CATEGORIAS (M5.2.2 — widget pht-category-explorer) =====
Reaproveita .pht-m-card-trilha/.pht-m-card-cume (já com especificidade
correta) para as famílias pink/blue/reviews — só as 3 anatomias
realmente distintas (timeline/guides/tier) ganham classe própria. */
.pht-m .pht-m-explorer.pht-m-explorer {
display: block;
padding: 32px 20px 0;
box-sizing: border-box;
}
.pht-m .pht-m-explorer .pht-m-explorer__eyebrow {
color: var(--pht-text-3);
}
.pht-m .pht-m-explorer .pht-m-explorer__title {
margin-top: 6px;
color: var(--pht-text);
}
.pht-m .pht-m-explorer .pht-m-explorer__chips {
display: flex;
gap: 10px;
overflow-x: auto;
padding-bottom: 4px;
margin-top: 16px;
box-sizing: border-box;
}
/* M5.7 — achado real: o Explorador reaproveitava o NOME de classe
`.pht-m-chip` do trilho do header, mas o CSS de pill vivia só sob o
ancestral `.pht-m-chips .pht-m-chips__rail`, que o Explorador nunca
renderiza (ele usa `.pht-m-explorer__chips`) — os botões saíam sem
estilo nenhum (bug #3, mesmo padrão já visto nos institucionais).
Regra própria, encadeada pela estrutura REAL deste widget. */
.pht-m .pht-m-explorer .pht-m-explorer__chips .pht-m-chip {
flex-shrink: 0;
display: inline-flex;
align-items: center;
height: 38px;
padding: 8px 16px;
border-radius: 9999px;
border: 1px solid var(--pht-border);
background: transparent;
color: var(--pht-text-2);
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 14px;
line-height: 20px;
font-weight: 500;
white-space: nowrap;
box-sizing: border-box;
cursor: pointer;
}
.pht-m .pht-m-explorer .pht-m-explorer__chips .pht-m-chip.is-active {
font-weight: 600;
background: var(--pht-chip-color, var(--pht-accent));
border-color: transparent;
color: #fff;
}
.pht-m .pht-m-explorer .pht-m-explorer__panel {
display: none;
margin-top: 24px;
}
.pht-m .pht-m-explorer .pht-m-explorer__panel.is-active {
display: block;
}
.pht-m .pht-m-explorer .pht-m-explorer__heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin-bottom: 12px;
}
.pht-m .pht-m-explorer .pht-m-explorer__heading-main {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.pht-m .pht-m-explorer .pht-m-explorer__link {
display: flex;
align-items: center;
gap: 2px;
flex-shrink: 0;
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 14px;
font-weight: 700;
color: var(--pht-explorer-color, var(--pht-accent));
text-decoration: none;
}
.pht-m .pht-m-explorer .pht-m-explorer__link .pht-m-explorer__link-icon {
height: 16px;
width: 16px;
flex-shrink: 0;
}
.pht-m .pht-m-explorer .pht-m-explorer__radar-label {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 16px;
color: var(--pht-cat-pink);
}
.pht-m .pht-m-explorer .pht-m-explorer__bar {
height: 20px;
width: 6px;
border-radius: 9999px;
flex-shrink: 0;
background: var(--pht-explorer-color, var(--pht-accent));
}
.pht-m .pht-m-explorer .pht-m-explorer__empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 48px 24px;
border: 1px dashed var(--pht-border-strong);
border-radius: var(--radius-card, 16px);
box-sizing: border-box;
}
/* radar (pink) — dot pulsante sobre o rótulo, cards vêm de .pht-m-card-cume/trilha */
.pht-m .pht-m-explorer .pht-m-explorer__radar-dot {
display: inline-block;
height: 8px;
width: 8px;
border-radius: 9999px;
background: var(--pht-cat-pink);
flex-shrink: 0;
}
/* timeline (neutral) — manchete + plantão compacto sem imagem */
.pht-m .pht-m-explorer .pht-m-explorer__timeline-lead {
display: block;
text-decoration: none;
}
.pht-m .pht-m-explorer .pht-m-explorer__timeline-lead-title {
margin-top: 8px;
font-size: 19px;
line-height: 25px;
font-weight: 650;
color: var(--pht-text);
}
.pht-m .pht-m-explorer .pht-m-explorer__timeline-item {
display: block;
border-left: 2px solid var(--pht-cat-neutral);
padding: 14px 0 14px 16px;
text-decoration: none;
box-sizing: border-box;
}
.pht-m .pht-m-explorer .pht-m-explorer__timeline-item-title {
margin-top: 4px;
font-size: 15px;
line-height: 20.7px;
font-weight: 700;
color: var(--pht-text);
}
/* guides (green) — marcador de pico */
.pht-m .pht-m-explorer .pht-m-explorer__guide-item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px 0;
text-decoration: none;
box-sizing: border-box;
}
.pht-m .pht-m-explorer .pht-m-explorer__guide-marker {
display: flex;
align-items: center;
justify-content: center;
height: 36px;
width: 36px;
flex-shrink: 0;
border-radius: 12px;
background: color-mix(in srgb, var(--pht-cat-green) 12%, transparent);
box-sizing: border-box;
}
.pht-m .pht-m-explorer .pht-m-explorer__guide-title {
margin-top: 4px;
font-size: 15px;
line-height: 20.7px;
font-weight: 700;
color: var(--pht-text);
}
/* tier (orange) — lista numerada */
.pht-m .pht-m-explorer .pht-m-explorer__tier-item {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 0;
text-decoration: none;
box-sizing: border-box;
}
.pht-m .pht-m-explorer .pht-m-explorer__tier-rank {
display: block;
width: 48px;
flex-shrink: 0;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 30px;
line-height: 36px;
font-weight: 600;
color: var(--pht-text-3);
}
.pht-m .pht-m-explorer .pht-m-explorer__tier-rank.is-first {
color: var(--pht-cat-orange);
}
.pht-m .pht-m-explorer .pht-m-explorer__tier-title {
margin-top: 2px;
font-size: 15px;
line-height: 20.7px;
font-weight: 700;
color: var(--pht-text);
}
/* ===== RIDGE (M5.2.2 — widget pht-ridge) ===== */
.pht-m .pht-m-ridge.pht-m-ridge {
display: block;
width: 100%;
height: 24px;
color: var(--pht-ridge-color, var(--pht-footer));
}
.pht-m .pht-m-ridge.pht-m-ridge.is-flipped {
transform: scaleY(-1);
}
/* ===== PÁGINA DE POST (M5.2.5 — widget peak-altitude-post) =====
Port de post/[slug]/page.tsx. O bloco `.pht-m-prose` é o coração:
estiliza o HTML CRU que o editor do WordPress gera (h2/p/blockquote/
ul/tabela/imagem) por SELETOR DESCENDENTE — o autor escreve normal e
o texto sai ALTITUDE, sem formatar nada, em todo post. Valores em px
(regra do Astra); títulos em clamp px+vw (imune ao encolhimento da
raiz). Escala tipográfica idêntica ao globals.css do V2. */
/* Altímetro de leitura — barra 3px sunset + marcador de pico na ponta. */
.pht-m .pht-m-progress.pht-m-progress {
position: fixed;
inset-inline: 0;
top: 0;
z-index: 50;
height: 3px;
pointer-events: none;
}
.pht-m .pht-m-progress .pht-m-progress__fill {
position: absolute;
inset: 0;
transform-origin: left;
transform: scaleX(0);
background: var(--pht-grad-sunset);
transition: transform 75ms linear;
}
.pht-m .pht-m-progress .pht-m-progress__peak {
position: absolute;
top: 3px;
left: 0;
height: 8px;
width: 10px;
transform: translateX(-50%);
}
/* Coluna do artigo — 720px centrados. */
.pht-m .pht-m-post.pht-m-post {
display: block;
margin: 0 auto;
width: 100%;
max-width: 720px;
padding-bottom: 16px;
box-sizing: border-box;
}
.pht-m .pht-m-post .pht-m-post__crumb {
padding: 20px 20px 0;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 12px;
line-height: 14.4px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.96px;
color: var(--pht-text-3);
}
.pht-m .pht-m-post .pht-m-post__crumb a {
color: inherit;
text-decoration: none;
}
.pht-m .pht-m-post .pht-m-post__crumb a:hover {
color: var(--pht-text);
}
.pht-m .pht-m-post .pht-m-post__crumb-sep {
margin: 0 6px;
color: color-mix(in srgb, var(--pht-text-3) 50%, transparent);
}
.pht-m .pht-m-post .pht-m-post__head {
padding: 20px 20px 0;
box-sizing: border-box;
}
.pht-m .pht-m-post .pht-m-post__badge {
display: inline-block;
border-radius: 9999px;
padding: 6px 12px;
color: #fff;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 12px;
line-height: 14.4px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.96px;
}
.pht-m .pht-m-post .pht-m-post__title {
margin: 16px 0 0;
font-family: var(--font-display, 'Bricolage Grotesque', var(--font-sans, 'Inter'), sans-serif);
font-size: clamp(26px, 16px + 2.4vw, 36px);
line-height: 1.18;
font-weight: 750;
letter-spacing: -0.015em; /* .type-h1 do V2 — títulos mais fechados/firmes */
color: var(--pht-text);
text-wrap: pretty;
}
.pht-m .pht-m-post .pht-m-post__author {
display: flex;
align-items: center;
gap: 14px;
margin-top: 20px;
}
.pht-m .pht-m-post .pht-m-post__avatar {
display: flex;
height: 44px;
width: 44px;
flex-shrink: 0;
align-items: center;
justify-content: center;
border-radius: 9999px;
background: var(--pht-grad-sunset);
padding: 2px;
box-sizing: border-box;
}
.pht-m .pht-m-post .pht-m-post__avatar--lg {
height: 48px;
width: 48px;
}
.pht-m .pht-m-post .pht-m-post__avatar-in {
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
border-radius: 9999px;
background: var(--pht-surface);
font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
font-size: 14px;
font-weight: 700;
color: var(--pht-text);
}
html[data-theme='dark'] .pht-m .pht-m-post .pht-m-post__avatar-in {
background: var(--pht-surface-raised);
}
.pht-m .pht-m-post .pht-m-post__author-name {
margin: 0;
font-size: 14px;
line-height: 20px;
font-weight: 700;
color: var(--pht-text);
}
.pht-m .pht-m-post .pht-m-post__meta {
margin: 2px 0 0;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 12px;
line-height: 14.4px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.96px;
color: var(--pht-text-3);
}
.pht-m .pht-m-post .pht-m-post__cover {
padding: 24px 20px 0;
box-sizing: border-box;
}
.pht-m .pht-m-post .pht-m-post__cover img {
display: block;
width: 100%;
height: auto;
border-radius: 16px;
box-shadow: 0 4px 16px rgb(2 8 23 / 0.08); /* elev-2 do V2 */
}
html[data-theme='dark'] .pht-m .pht-m-post .pht-m-post__cover img {
filter: brightness(0.92);
box-shadow: 0 0 0 1px var(--pht-border);
}
.pht-m .pht-m-post .pht-m-post__body {
padding: 8px 20px 0;
box-sizing: border-box;
}
/* "O essencial" */
.pht-m .pht-m-post .pht-m-post__essential {
margin: 32px 0;
border: 1px solid var(--pht-border-strong);
border-radius: 16px;
background: var(--pht-surface);
padding: 20px;
box-sizing: border-box;
}
html[data-theme='dark'] .pht-m .pht-m-post .pht-m-post__essential {
background: var(--pht-surface-raised);
}
.pht-m .pht-m-post .pht-m-post__essential-label {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 12px;
line-height: 14.4px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.96px;
color: var(--pht-text-3);
}
.pht-m .pht-m-post .pht-m-post__essential-label svg {
height: 8px;
width: 10px;
flex-shrink: 0;
}
.pht-m .pht-m-post .pht-m-post__essential-list {
list-style: none;
margin: 14px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.pht-m .pht-m-post .pht-m-post__essential-list li {
display: flex;
align-items: flex-start;
gap: 12px;
}
.pht-m .pht-m-post .pht-m-post__essential-list li svg {
margin-top: 7px;
height: 8px;
width: 10px;
flex-shrink: 0;
}
.pht-m .pht-m-post .pht-m-post__essential-list li span {
font-size: 15px;
line-height: 24.375px; /* leading-relaxed (1.625) sobre 15px — medido no V2 */
font-weight: 500;
color: var(--pht-text);
}
.pht-m .pht-m-post .pht-m-post__essential-text {
font-size: 15px;
line-height: 24.375px;
color: var(--pht-text-2);
}
/* Sanfona (M5.2.5.2) — "O essencial" abre/fecha. Animação de altura por
grid-template-rows 1fr↔0fr (suave, sem medir altura no JS) + chevron
que gira. Padrão: aberto. */
.pht-m .pht-m-post .pht-m-post__essential-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
margin: 0;
padding: 0;
border: 0;
background: transparent;
text-align: left;
cursor: pointer;
}
.pht-m .pht-m-post .pht-m-post__essential-chevron {
height: 18px;
width: 18px;
flex-shrink: 0;
color: var(--pht-text-3);
transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pht-m .pht-m-post .pht-m-post__essential.is-collapsed .pht-m-post__essential-chevron {
transform: rotate(-90deg);
}
.pht-m .pht-m-post .pht-m-post__essential-panel {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pht-m .pht-m-post .pht-m-post__essential.is-collapsed .pht-m-post__essential-panel {
grid-template-rows: 0fr;
}
.pht-m .pht-m-post .pht-m-post__essential-panelinner {
overflow: hidden;
min-height: 0;
}
/* ---- PROSA: o HTML do editor vira ALTITUDE ---- */
.pht-m .pht-m-post .pht-m-prose {
color: var(--pht-text-2);
}
.pht-m .pht-m-post .pht-m-prose > :first-child {
margin-top: 0;
}
.pht-m .pht-m-post .pht-m-prose h2 {
margin: 44px 0 16px;
font-family: var(--font-display, 'Bricolage Grotesque', var(--font-sans, 'Inter'), sans-serif);
font-size: clamp(22px, 17.6px + 1vw, 26px);
line-height: 1.25;
font-weight: 700;
letter-spacing: -0.01em; /* .type-h2 do V2 */
color: var(--pht-text);
scroll-margin-top: 96px;
}
.pht-m .pht-m-post .pht-m-prose h3 {
margin: 32px 0 12px;
font-family: var(--font-display, 'Bricolage Grotesque', var(--font-sans, 'Inter'), sans-serif);
font-size: 19px;
line-height: 1.3;
font-weight: 650;
color: var(--pht-text);
scroll-margin-top: 96px;
}
.pht-m .pht-m-post .pht-m-prose h4 {
margin: 28px 0 10px;
font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
font-size: 17px;
line-height: 1.35;
font-weight: 650;
color: var(--pht-text);
}
.pht-m .pht-m-post .pht-m-prose p {
margin: 0 0 20px;
font-size: 17px;
line-height: 1.75;
color: var(--pht-text-2);
}
.pht-m .pht-m-post .pht-m-prose strong {
color: var(--pht-text);
font-weight: 700;
}
.pht-m .pht-m-post .pht-m-prose a {
color: var(--pht-accent);
font-weight: 600;
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--pht-accent) 40%, transparent);
}
.pht-m .pht-m-post .pht-m-prose a:hover {
text-decoration-color: var(--pht-accent);
}
.pht-m .pht-m-post .pht-m-prose blockquote {
position: relative;
margin: 32px 0;
padding-left: 20px;
font-size: 18px;
line-height: 1.6;
font-weight: 600;
font-style: italic;
color: var(--pht-text);
}
.pht-m .pht-m-post .pht-m-prose blockquote::before {
content: '';
position: absolute;
top: 4px;
bottom: 4px;
left: 0;
width: 4px;
border-radius: 9999px;
background: var(--pht-grad-sunset);
}
.pht-m .pht-m-post .pht-m-prose ul,
.pht-m .pht-m-post .pht-m-prose ol {
margin: 0 0 20px;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.pht-m .pht-m-post .pht-m-prose ol {
counter-reset: pht-ol;
}
.pht-m .pht-m-post .pht-m-prose li {
position: relative;
padding-left: 28px;
font-size: 16px;
line-height: 1.6;
color: var(--pht-text-2);
}
/* marcador de pico (montanha) — a assinatura das listas ALTITUDE */
.pht-m .pht-m-post .pht-m-prose ul > li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
height: 8px;
width: 10px;
background-color: var(--pht-accent);
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.pht-m .pht-m-post .pht-m-prose ol > li {
counter-increment: pht-ol;
}
.pht-m .pht-m-post .pht-m-prose ol > li::before {
content: counter(pht-ol) '.';
position: absolute;
left: 0;
top: 0;
width: 22px;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--pht-accent);
}
.pht-m .pht-m-post .pht-m-prose img {
display: block;
max-width: 100%;
height: auto;
border-radius: 12px;
}
.pht-m .pht-m-post .pht-m-prose figure {
margin: 32px 0;
}
html[data-theme='dark'] .pht-m .pht-m-post .pht-m-prose img {
filter: brightness(0.92);
}
.pht-m .pht-m-post .pht-m-prose figcaption {
margin-top: 10px;
text-align: center;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 12px;
line-height: 1.4;
color: var(--pht-text-3);
}
.pht-m .pht-m-post .pht-m-prose .wp-block-table,
.pht-m .pht-m-post .pht-m-prose .pht-m-prose__tablewrap {
margin: 32px 0;
overflow-x: auto;
border: 1px solid var(--pht-border);
border-radius: 12px;
}
.pht-m .pht-m-post .pht-m-prose table {
width: 100%;
min-width: 520px;
border-collapse: collapse;
text-align: left;
font-size: 14px;
}
.pht-m .pht-m-post .pht-m-prose th {
background: var(--pht-surface-sunken);
padding: 12px 16px;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.96px;
color: var(--pht-text-3);
}
.pht-m .pht-m-post .pht-m-prose td {
padding: 12px 16px;
border-top: 1px solid var(--pht-border);
color: var(--pht-text-2);
}
/* Tags */
.pht-m .pht-m-post .pht-m-post__tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 36px;
}
.pht-m .pht-m-post .pht-m-post__tag {
border-radius: 9999px;
background: var(--pht-surface-sunken);
padding: 8px 14px;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 12px;
line-height: 1.2;
color: var(--pht-text-2);
text-decoration: none;
}
/* Compartilhar (inline) */
.pht-m .pht-m-post .pht-m-post__share {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 36px;
border-top: 1px solid var(--pht-border);
padding-top: 28px;
}
.pht-m .pht-m-post .pht-m-post__share-label {
margin-right: 4px;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.96px;
color: var(--pht-text-3);
}
.pht-m .pht-m-post .pht-m-post__share-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
border-radius: 9999px;
border: 1px solid var(--pht-border);
background: var(--pht-surface);
padding: 0 20px;
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 14px;
font-weight: 700;
color: var(--pht-text);
text-decoration: none;
cursor: pointer;
box-sizing: border-box;
}
html[data-theme='dark'] .pht-m .pht-m-post .pht-m-post__share-btn {
background: var(--pht-surface-raised);
}
.pht-m .pht-m-post .pht-m-post__share-btn .pht-m-ico {
height: 16px;
width: 16px;
}
.pht-m .pht-m-post .pht-m-post__share-btn.is-wa .pht-m-ico {
color: #1faf57;
}
.pht-m .pht-m-post .pht-m-post__share-btn.is-copied {
color: var(--pht-cat-green);
}
/* Caixa do autor */
.pht-m .pht-m-post .pht-m-post__authorbox {
display: flex;
align-items: flex-start;
gap: 16px;
margin-top: 36px;
border: 1px solid var(--pht-border);
border-radius: 16px;
background: var(--pht-surface);
padding: 20px;
box-sizing: border-box;
}
html[data-theme='dark'] .pht-m .pht-m-post .pht-m-post__authorbox {
background: var(--pht-surface-raised);
}
.pht-m .pht-m-post .pht-m-post__authorbox-eyebrow {
margin: 0;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.96px;
color: var(--pht-text-3);
}
.pht-m .pht-m-post .pht-m-post__authorbox-name {
margin: 2px 0 0;
font-size: 15px;
font-weight: 700;
color: var(--pht-text);
}
.pht-m .pht-m-post .pht-m-post__authorbox-bio {
margin: 6px 0 0;
font-size: 14px;
line-height: 1.6;
color: var(--pht-text-2);
}
/* ===== LEGIBILIDADE NO ESCURO + FUNDO DA PÁGINA (M5.2.6.2) =====
Achado real (25/07, prints do celular): no escuro o CORPO da prosa saía
escuro demais (ilegível) — o texto herdava a cor global do Elementor
(--e-global-color-text: #7A7A7A) porque os tokens ALTITUDE vivem escopados
em `.pht-m` e a herança do Elementor vencia nos do the_content(). E o
header de vidro (85%) parecia "apagado"/claro demais porque assentava
sobre um fundo de body claro, não sobre o canvas escuro do V2.
Correção à prova de herança (especificidade alta + valor fixo):
(a) fundo do body escuro no mobile → o header de 85% assenta no escuro;
(b) corpo do texto legível; títulos/negrito no branco-gelo do V2. */
html[data-theme='dark'] body {
background-color: #0b1220;
}
/* M5.9.1 — a cor do texto do post TROCA com o tema, e é AJUSTÁVEL.
O valor do V2 (#a7b4c7) tem contraste 8,8:1 sobre o canvas escuro —
tecnicamente AAA —, mas na leitura longa em celular ficou apagado.
Agora o corpo no escuro nasce mais claro (#cbd5e5, ~12:1) e ambos os
temas passam por custom property, então os controles "Cor do texto"
do widget de Post mandam sem `!important` e sem disputa. */
.pht-m .pht-m-post .pht-m-prose,
.pht-m .pht-m-post .pht-m-prose p,
.pht-m .pht-m-post .pht-m-prose li,
.pht-m .pht-m-post .pht-m-prose td,
.pht-m .pht-m-post .pht-m-prose blockquote {
color: var(--pht-prose-ink, var(--pht-text-2));
}
html[data-theme='dark'] .pht-m-post .pht-m-prose,
html[data-theme='dark'] .pht-m-post .pht-m-prose p,
html[data-theme='dark'] .pht-m-post .pht-m-prose li,
html[data-theme='dark'] .pht-m-post .pht-m-prose td,
html[data-theme='dark'] .pht-m-post .pht-m-prose blockquote {
color: var(--pht-prose-ink-dark, #cbd5e5);
}
.pht-m .pht-m-post .pht-m-prose strong,
.pht-m .pht-m-post .pht-m-prose h2,
.pht-m .pht-m-post .pht-m-prose h3,
.pht-m .pht-m-post .pht-m-prose h4 {
color: var(--pht-prose-head, var(--pht-text));
}
html[data-theme='dark'] .pht-m-post .pht-m-prose strong,
html[data-theme='dark'] .pht-m-post .pht-m-prose h2,
html[data-theme='dark'] .pht-m-post .pht-m-prose h3,
html[data-theme='dark'] .pht-m-post .pht-m-prose h4 {
color: var(--pht-prose-head-dark, #f2f6fb);
}
/* M5.9.2 — A CAUSA REAL do texto ilegível no escuro.
Achado (31/07, HTML ao vivo): os parágrafos dos posts trazem
`has-black-color has-text-color` — cor PRETA fixada no editor de blocos
(83 parágrafos só no post do Sonnet 5). O WordPress emite essas classes
com `!important`, então nenhuma regra por especificidade jamais venceria:
no tema escuro dava preto sobre fundo quase preto.
Aqui o `!important` é DEFENSIVO (anula outro `!important`), não um
travamento de design: o VALOR continua sendo a custom property, então os
controles "Cor do texto do artigo" do widget seguem mandando.
`:not(a)` preserva a cor de link. Vale só no escopo `.pht-m-prose` do
mobile — o conteúdo no desktop continua exatamente como está. */
.pht-m .pht-m-post .pht-m-prose .has-text-color:not(a) {
color: var(--pht-prose-ink, var(--pht-text-2)) !important;
}
html[data-theme='dark'] .pht-m-post .pht-m-prose .has-text-color:not(a) {
color: var(--pht-prose-ink-dark, #cbd5e5) !important;
}
.pht-m .pht-m-post .pht-m-prose h2.has-text-color,
.pht-m .pht-m-post .pht-m-prose h3.has-text-color,
.pht-m .pht-m-post .pht-m-prose h4.has-text-color,
.pht-m .pht-m-post .pht-m-prose .has-text-color strong,
.pht-m .pht-m-post .pht-m-prose strong.has-text-color {
color: var(--pht-prose-head, var(--pht-text)) !important;
}
html[data-theme='dark'] .pht-m-post .pht-m-prose h2.has-text-color,
html[data-theme='dark'] .pht-m-post .pht-m-prose h3.has-text-color,
html[data-theme='dark'] .pht-m-post .pht-m-prose h4.has-text-color,
html[data-theme='dark'] .pht-m-post .pht-m-prose .has-text-color strong,
html[data-theme='dark'] .pht-m-post .pht-m-prose strong.has-text-color {
color: var(--pht-prose-head-dark, #f2f6fb) !important;
}
/* Fundo fixo do editor também some no mobile — um bloco com fundo branco
"cravado" ficaria como retângulo claro no tema escuro. */
html[data-theme='dark'] .pht-m-post .pht-m-prose p.has-background,
html[data-theme='dark'] .pht-m-post .pht-m-prose li.has-background {
background-color: transparent !important;
}
/* ===== LINKS INTERNOS × EXTERNOS (M5.9.3) =====
O PHP marca cada link do artigo (`mark_links()`): `--int` para o próprio
site, `--ext` para fora. Aqui cada um ganha sua cor, automaticamente, sem
o autor marcar nada ao escrever.
Interno nasce no rosa da marca (Peak): #d81b60 no claro — tom aprofundado
para passar em contraste sobre o canvas (≈5:1) — e o rosa claro da família
no escuro. Externo continua no azul de sempre.
`!important` aqui é DEFENSIVO, para vencer o `has-text-color`/`has-link-color`
que o editor de blocos crava com `!important`; o VALOR segue nas custom
properties, então os controles do widget continuam mandando. */
.pht-m .pht-m-post .pht-m-prose a.pht-m-link--int {
color: var(--pht-link-int, #d81b60) !important;
}
html[data-theme='dark'] .pht-m-post .pht-m-prose a.pht-m-link--int {
color: var(--pht-link-int-dark, var(--pht-cat-pink)) !important;
}
.pht-m .pht-m-post .pht-m-prose a.pht-m-link--ext {
color: var(--pht-link-ext, var(--pht-accent)) !important;
}
html[data-theme='dark'] .pht-m-post .pht-m-prose a.pht-m-link--ext {
color: var(--pht-link-ext-dark, var(--pht-accent)) !important;
}
/* O sublinhado acompanha a cor do próprio link, seja qual for. */
.pht-m .pht-m-post .pht-m-prose a.pht-m-link--int,
.pht-m .pht-m-post .pht-m-prose a.pht-m-link--ext {
text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.pht-m .pht-m-post .pht-m-prose a.pht-m-link--int:hover,
.pht-m .pht-m-post .pht-m-prose a.pht-m-link--ext:hover {
text-decoration-color: currentColor;
}
/* Relacionados */
.pht-m .pht-m-post .pht-m-post__related {
padding: 56px 20px 0;
box-sizing: border-box;
}
.pht-m .pht-m-post .pht-m-post__related-title {
font-family: var(--font-display, 'Bricolage Grotesque', var(--font-sans, 'Inter'), sans-serif);
font-size: clamp(22px, 17.6px + 1vw, 26px);
line-height: 1.25;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--pht-text);
}
.pht-m .pht-m-post .pht-m-post__related-list {
margin-top: 6px;
}
.pht-m .pht-m-post .pht-m-post__related-list .pht-m-card-trilha {
border-top: 1px solid var(--pht-border);
}
.pht-m .pht-m-post .pht-m-post__related-list .pht-m-card-trilha:first-child {
border-top: 0;
}
/* =====================================================================
"MAIS CONTEÚDOS" (M5.12) — trilho horizontal.
Seção IRMÃ de "Continue a trilha" logo acima, com desenho de propósito
OPOSTO: lá é lista vertical compacta, tema em profundidade; aqui é capa
grande em trilho com encaixe, para descoberta do que é novo. Se as duas
tivessem a mesma forma, o leitor leria como repetição.
TODO o movimento vive em elementos INTERNOS do cartão. O cartão em si é
governado pelo sistema de revelação (`html.pht-reveal-ready .pht-m
.pht-m-reveal`, especificidade 0,3,1 e 0,4,1 no estado revelado), que
controla `transform` — animar o cartão aqui perderia a disputa e o
toque simplesmente não responderia. Zoom na imagem contorna isso sem
!important e sem depender de ordem de declaração.
===================================================================== */
.pht-m .pht-m-post .pht-m-post__more {
box-sizing: border-box;
margin: 32px 0 0;
}
.pht-m .pht-m-post .pht-m-post__more-head {
box-sizing: border-box;
padding: 0 20px;
}
.pht-m .pht-m-post .pht-m-post__more-eyebrow {
margin: 0 0 6px;
line-height: 1.2;
color: var(--pht-accent);
}
.pht-m .pht-m-post .pht-m-post__more-title {
margin: 0;
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 28px;
letter-spacing: -0.01em;
color: var(--pht-text);
}
.pht-m .pht-m-post .pht-m-post__more-ridge {
display: block;
width: 96px;
height: 14px;
margin: 10px 0 0;
color: var(--pht-accent);
opacity: 0.45;
}
/* Trilho.
`touch-action: pan-x` — o MESMO valor do trilho de chips (linha ~310),
que já funciona no site. A v0.19.0 saiu com `pan-y pinch-zoom` e o
arrasto lateral simplesmente não respondia: `pan-y` declara que este
elemento só lida com gesto VERTICAL, o que proíbe justamente o
horizontal que o trilho precisa. Foi a regra de carrossel-por-JS
aplicada a um rolador NATIVO, onde ela faz o oposto do pretendido.
O gesto vertical continua rolando a página normalmente: direções que
este elemento não consome sobem para os ancestrais.
O JS `drag-scroll` não entra nisso — ele ignora ponteiro que não seja
mouse (`if (e.pointerType !== 'mouse') return`), servindo só ao arrasto
de desktop; no celular quem rola é o navegador. */
.pht-m .pht-m-post .pht-m-post__more-rail {
display: flex;
gap: 14px;
box-sizing: border-box;
margin: 18px 0 0;
padding: 4px 20px 10px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
touch-action: pan-x;
}
.pht-m .pht-m-post .pht-m-post__more-rail::-webkit-scrollbar {
display: none;
}
/* Respiro no fim do trilho: sem isso o último cartão encosta na borda e
parece cortado em vez de terminado. */
.pht-m .pht-m-post .pht-m-post__more-rail::after {
content: '';
flex: 0 0 6px;
}
.pht-m .pht-m-post .pht-m-post__more-card {
display: flex;
flex: 0 0 232px;
flex-direction: column;
box-sizing: border-box;
width: 232px;
border: 1px solid var(--pht-border);
border-radius: var(--radius-card, 16px);
background: var(--pht-surface);
overflow: hidden;
scroll-snap-align: start;
text-decoration: none;
}
.pht-m .pht-m-post .pht-m-post__more-cover {
position: relative;
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--pht-surface-sunken);
}
.pht-m .pht-m-post .pht-m-post__more-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.01);
transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pht-m .pht-m-post .pht-m-post__more-card:active .pht-m-post__more-img {
transform: scale(1.07);
}
.pht-m .pht-m-post .pht-m-post__more-scrim {
position: absolute;
inset: 0;
background: var(--pht-scrim);
pointer-events: none;
}
.pht-m .pht-m-post .pht-m-post__more-badge {
position: absolute;
left: 10px;
bottom: 10px;
display: inline-block;
padding: 4px 10px;
border-radius: 9999px;
background: var(--pht-more-color, var(--pht-accent));
color: #fff;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 600;
line-height: 14px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.pht-m .pht-m-post .pht-m-post__more-body {
display: flex;
flex-direction: column;
gap: 6px;
box-sizing: border-box;
padding: 12px 14px 14px;
}
.pht-m .pht-m-post .pht-m-post__more-name {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 15px;
font-weight: 650;
line-height: 20px;
color: var(--pht-text);
/* Teto de 3 linhas: num trilho horizontal os cartões precisam de altura
previsível, senão um título longo desalinha a fileira inteira. */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pht-m .pht-m-post .pht-m-post__more-meta {
color: var(--pht-text-3);
line-height: 1.2;
}
@media (prefers-reduced-motion: reduce) {
.pht-m .pht-m-post .pht-m-post__more-img,
.pht-m .pht-m-post .pht-m-post__more-card:active .pht-m-post__more-img {
transform: none;
transition: none;
}
}
/* A grade antiga (bloco Essential Blocks dentro do TEXTO do post) some no
mobile junto com o título dela — a seção acima já mostra os mesmos posts,
e manter as duas seria duplicar. `:has()` alcança o