/* WeCann.Care — Design Tokens
Framework-agnostic CSS custom properties.
Extracted from the live wireframe build (wireframe-wecann.vercel.app). */
:root {
/* ---------------------------------------------------------------
BRAND
The identity lives in a 4-stop gradient: blue -> coral -> amber.
Each stop also works as a standalone accent.
--------------------------------------------------------------- */
--wc-brand-blue: #588dff;
--wc-brand-blue-soft: #94b8f0;
--wc-brand-coral: #f36350;
--wc-brand-amber: #f3ac50;
--wc-brand-yellow: #fcd757;
/* Yellow taken down to a metallic value so it can end a gradient that
carries light text. #fcd757 at full strength reads as a highlighter and
leaves nothing for white to sit on; this is the same hue held two steps
darker. Only ever a gradient terminus — not an accent on its own. */
--wc-brand-gold: #e2c57b;
--wc-brand-navy: #131126;
--wc-brand-gradient: linear-gradient(
90deg,
#588dff 0%,
#94b8f0 28%,
#f36350 55%,
#fcd757 100%
);
/* CTA sweep. Runs the full identity — blue in, coral through the middle,
gold at the end — so a primary button reads as the brand and not just as
a warm chip.
The stops are positioned for a 135% background-size at position 0%, which
is how .sm-btn-primary paints it: only the first 74% of this gradient is
on screen at rest, and the remaining 26% is the runway the hover sweep
travels. Gold therefore lands at 74%, not at 100% — a stop written at
100% would sit entirely outside the resting window and appear only on
hover. It is then held flat to 100% so the sweep still has somewhere to
go. Anyone re-pointing this token at a 100%-wide box gets the same
gradient with a longer gold tail, which is harmless. */
--wc-brand-gradient-cta: linear-gradient(
100deg,
#588dff 0%,
#f36350 42%,
#e2c57b 74%,
#e2c57b 100%
);
/* Warmer variant used behind elevated surfaces */
--wc-brand-gradient-warm: linear-gradient(
90deg,
#588dff 10%,
#96adff 26%,
#f36350 58%,
#f3ac50 96%
);
/* ---------------------------------------------------------------
SUMMIT 2026 — a paleta da identidade do evento.
Estas cinco cores são a fonte, dadas pela Tiana. Substituem um conjunto
anterior ("aurora") que eu tinha derivado no olho a partir das artes de
referência e que estava errado: aquele conjunto tinha magenta (#c64298) e
vermelho-rosa (#ee3c59) como eixo quente, quando a identidade real passa
direto do malva para o coral e termina em amarelo. Nada daquilo sobreviveu
— o erro estava nos valores, não na estrutura.
Convivem com os tokens --wc-brand-* acima, que continuam sendo a rampa do
produto. Esta é a rampa de uma edição do evento e vive só no site do
Summit.
--------------------------------------------------------------- */
--wc-summit-blue: #6887e3;
--wc-summit-mauve: #af7aa5;
--wc-summit-coral: #ff8359;
--wc-summit-amber: #fcb25c;
/* Escrito pela Tiana em 2026-09-30, não amostrado. Era #ffd363 e saía
dourado demais: saturação cheia em HSL, o que puxava a ponta da rampa para
um ouro metálico em vez do amarelo claro da identidade. O matiz quase não
se mexeu (43° → 45°); o que mudou foi a saturação, de 100% para 68% —
ponta mais arenosa, menos joalheria.
Vale como preenchimento, não como tinta sobre papel: mede 1,55:1 no branco.
Ver a nota do --wc-summit-coral-deep abaixo. */
--wc-summit-yellow: #e7ce82;
/* O coral segurado mais escuro, para quando a cor precisa ser TINTA e não
preenchimento. Mesma lógica que já existe no --wc-brand-gold logo acima, e
pelo mesmo motivo: mesmo matiz e mesma saturação, valor baixado até
encostar nos 3:1 que a AA pede para texto grande. Na forma original o coral
mede 2,43:1 sobre papel branco e não serviria.
Azul e malva não aparecem aqui porque não precisam: os dois já medem
3,41:1 na forma original. Usar a cor base quando ela serve é o que mantém
a rampa reconhecível.
Âmbar e amarelo também não aparecem, e aqui a razão é outra — não é que
dispensem o tratamento, é que o tratamento não funciona neles. Medem 1,80:1
e 1,55:1, e o valor precisa cair tanto para chegar a 3:1 que os dois saem
do outro lado como bronze (#c38947 e #b09144), indistinguíveis entre si e
já sem parentesco com a ponta clara da identidade. Existiram como token até
2026-09-30, quando a Tiana viu os dois lado a lado nos numerais da grade de
features e recusou. A conclusão que fica: a ponta quente desta rampa é
preenchimento, não tinta sobre papel branco. Sobre navy ela serve — o
amarelo mede 11,93:1 lá. */
--wc-summit-coral-deep: #e47550;
/* Régua/faixa — a leitura direta da identidade, esquerda para direita. Uso:
réguas de 2px, faixas de seção, painéis.
As posições vêm do backdrop oficial do evento (o painel de credenciamento
VIP), medido coluna a coluna, e não são espaçamento decorativo: é o malva
que decide se a rampa lê como identidade ou como borrão. Com o malva aos
27% a metade esquerda inteira virava um roxo sujo e o azul mal existia
sozinho. Na arte o azul se sustenta limpo até cerca de um quinto da
largura, e o malva é uma travessia curta em vez de um terço do percurso.
Pelo mesmo motivo o amarelo para em 92%: no backdrop a ponta quente chega
antes da borda e fica chapada até o fim. Terminar em 100% deixava o
amarelo como um fio na quina. */
--wc-gradient-summit: linear-gradient(
90deg,
var(--wc-summit-blue) 0%,
var(--wc-summit-blue) 22%,
var(--wc-summit-mauve) 45%,
var(--wc-summit-coral) 60%,
var(--wc-summit-amber) 80%,
var(--wc-summit-yellow) 92%
);
/* A mesma rampa deitada na diagonal, para painéis altos. Mesmas cores e
mesmas posições da régua acima — só o ângulo muda, porque o CSS não sabe
girar um degradê já declarado e um painel alto precisa da rampa descendo,
não atravessando.
165° e não 180°: na arte de referência as faixas não são horizontais, elas
tombam um pouco, e o quente se concentra no canto inferior direito em vez
de na borda de baixo inteira. Os 15° de inclinação são o que separa isto
de um degradê vertical genérico.
Uso: fundo de card ou painel mais alto que largo. Num bloco largo e baixo
use a régua, que é a leitura canônica da identidade. */
--wc-gradient-summit-diagonal: linear-gradient(
165deg,
var(--wc-summit-blue) 0%,
var(--wc-summit-blue) 22%,
var(--wc-summit-mauve) 45%,
var(--wc-summit-coral) 60%,
var(--wc-summit-amber) 80%,
var(--wc-summit-yellow) 92%
);
/* CTA. Mesma geometria do --wc-brand-gradient-cta: os stops são posicionados
contra um background-size de 135% em position 0%, então só os primeiros
74% aparecem em repouso e os 26% restantes são a pista do hover.
O que esta rampa decide, e é a decisão mais importante da paleta: o rótulo
do botão é NAVY, não branco. Medido sobre os cinco stops, o branco vai de
3,41:1 no azul a 1,55:1 no amarelo — não passa em nenhum ponto, em nenhum
tamanho. O navy no mesmo percurso vai de 5,43:1 a 11,93:1 e passa em todos
(pior ponto da rampa interpolada: 5,27:1, na travessia azul→malva).
Uma rampa clara pede tinta escura; insistir no branco custaria escurecer
os cinco stops e aí não seria mais a identidade do evento. */
--wc-gradient-summit-cta: linear-gradient(
100deg,
var(--wc-summit-blue) 0%,
var(--wc-summit-mauve) 30%,
var(--wc-summit-coral) 58%,
var(--wc-summit-amber) 74%,
var(--wc-summit-yellow) 100%
);
/* Aura/orbe — brilho difuso para fundos de seção. Claro no centro, esfriando
para o azul numa ponta e esquentando para o amarelo na outra. */
--wc-gradient-summit-radial: radial-gradient(
120% 120% at 50% 40%,
var(--wc-summit-yellow) 0%,
var(--wc-summit-amber) 24%,
var(--wc-summit-coral) 46%,
var(--wc-summit-mauve) 72%,
var(--wc-summit-blue) 100%
);
/* ---------------------------------------------------------------
EXTERNAL BRANDS
Not part of the WeCann palette, and deliberately named so that is
obvious at the call site. A third-party mark is the one legitimate
reason to put an off-palette colour on screen: the whole point of a
WhatsApp affordance is that it is recognised before it is read.
The rule attached to this group: only ever on a control that opens
that third party, never as decoration, never as an accent, and never
mixed into a WeCann gradient.
--------------------------------------------------------------- */
--wc-external-whatsapp: #25d366;
/* ---------------------------------------------------------------
NEUTRALS
Deliberately warm — every step carries a touch of yellow/green
so large surfaces read as paper, never as cold grey.
--------------------------------------------------------------- */
--wc-neutral-50: #fafafa;
--wc-neutral-100: #f2f2f1;
--wc-neutral-200: #e7e7e5;
--wc-neutral-300: #d6d6d3;
--wc-neutral-400: #b5b5b1;
--wc-neutral-500: #8a8a85;
--wc-neutral-600: #62625e;
--wc-neutral-700: #444441;
--wc-neutral-800: #2a2a28;
--wc-neutral-900: #171717;
/* ---------------------------------------------------------------
SEMANTIC — SURFACE
--------------------------------------------------------------- */
--wc-surface-paper: #ffffff;
--wc-surface-paper-50: #fafafa;
--wc-surface-warm-bg: #ffffff;
--wc-surface-sunken: #f2f2f1;
--wc-surface-field: #fcfdff;
--wc-surface-inverse: #131126;
/* ---------------------------------------------------------------
SEMANTIC — TEXT
--------------------------------------------------------------- */
--wc-text-ink: #18181a;
--wc-text-navy: #131126;
--wc-text-secondary: #676867;
--wc-text-muted: #8a8a85;
--wc-text-subtle: #999999;
--wc-text-on-inverse: #ffffff;
--wc-text-highlight: #f36350;
--wc-text-link: #588dff;
/* ---------------------------------------------------------------
SEMANTIC — BORDER
--------------------------------------------------------------- */
--wc-border-default: #ededed;
--wc-border-soft: #ededed;
--wc-border-strong: #d6d6d3;
/* ---------------------------------------------------------------
STATE
Three-step emphasis ramp for icons, dividers and inactive UI.
--------------------------------------------------------------- */
--wc-state-soft: #9a9a95;
--wc-state-mid: #6b6b66;
--wc-state-hard: #2a2a28;
/* ---------------------------------------------------------------
TYPEFACES
Crimson Pro carries warmth and authority on headlines;
Inter does all the dense clinical UI work;
Roboto Mono is reserved for time, dosage and codes.
--------------------------------------------------------------- */
--wc-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--wc-font-display: "Crimson Pro", ui-serif, Georgia, serif;
--wc-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
/* ---------------------------------------------------------------
TYPE SCALE — major third (1.25)
1rem base, stepping 1 / 1.25² / 1.25⁴ / 1.25⁵ / 1.25⁶
--------------------------------------------------------------- */
--wc-text-display-xl: 3.815rem;
--wc-text-display-xl-lh: 1.05;
--wc-text-display-xl-ls: -0.02em;
--wc-text-display-l: 3.052rem;
--wc-text-display-l-lh: 1.08;
--wc-text-display-l-ls: -0.02em;
--wc-text-display-m: 2.441rem;
--wc-text-display-m-lh: 1.1;
--wc-text-display-m-ls: -0.01em;
/* 1.25³ — o degrau entre title e display-m, que existia na escala mas não na
rampa. Não é tamanho novo: este valor já estava escrito à mão no .sm-h2 do
mobile, porque display-m a 39px não cabe numa coluna de celular e title a
25px deixa de ser manchete. Era a rampa que não tinha onde pendurá-lo.
Serve também ao numeral grande — o ordinal que encima um card, que precisa
ler como marca antes de ler como número.
Entrelinha entre a de display-m (1.1) e a de title (1.2), que é onde ele
está na escala. */
--wc-text-display-s: 1.953rem;
--wc-text-display-s-lh: 1.15;
--wc-text-display-s-ls: -0.01em;
--wc-text-title: 1.563rem;
--wc-text-title-lh: 1.2;
--wc-text-body-l: 1.125rem;
--wc-text-body-l-lh: 1.5;
--wc-text-body: 1rem;
--wc-text-body-lh: 1.55;
--wc-text-caption: 0.875rem;
--wc-text-caption-lh: 1.4;
--wc-text-micro: 0.75rem;
--wc-text-micro-lh: 1.3;
--wc-text-micro-ls: 0.04em;
/* Weights */
--wc-weight-normal: 400;
--wc-weight-medium: 500;
--wc-weight-semibold: 600;
--wc-weight-bold: 700;
/* ---------------------------------------------------------------
SPACE — 4px base unit
--------------------------------------------------------------- */
--wc-space-unit: 0.25rem;
--wc-space-1: 0.25rem;
--wc-space-2: 0.5rem;
--wc-space-3: 0.75rem;
--wc-space-4: 1rem;
--wc-space-5: 1.25rem;
--wc-space-6: 1.5rem;
--wc-space-8: 2rem;
--wc-space-10: 2.5rem;
--wc-space-12: 3rem;
--wc-space-16: 4rem;
--wc-space-24: 6rem;
/* ---------------------------------------------------------------
RADIUS
`wire` (3px) is the wireframe-era hairline radius;
pill/full drives nav, chips and primary actions.
--------------------------------------------------------------- */
--wc-radius-wire: 3px;
--wc-radius-sm: 0.25rem;
--wc-radius-lg: 0.5rem;
--wc-radius-xl: 0.75rem;
--wc-radius-2xl: 1rem;
--wc-radius-card: 12px;
--wc-radius-panel: 20px;
--wc-radius-full: 9999px;
/* ---------------------------------------------------------------
ELEVATION
Shadows stay barely-there: this UI elevates with soft colour
bleed and hairline borders rather than dark drop shadows.
--------------------------------------------------------------- */
--wc-shadow-hairline: 0 0 0 1px #ededed;
--wc-shadow-float: 0 0 13.5px rgba(0, 0, 0, 0.05);
--wc-shadow-raised: 0 1px 2px rgba(23, 23, 23, 0.04),
0 8px 24px rgba(23, 23, 23, 0.06);
/* ---------------------------------------------------------------
BLUR — used for the ambient brand glows
--------------------------------------------------------------- */
--wc-blur-sm: 8px;
--wc-blur-lg: 20px;
--wc-blur-xl: 24px;
--wc-blur-2xl: 40px;
--wc-blur-3xl: 64px;
/* ---------------------------------------------------------------
MOTION
--------------------------------------------------------------- */
--wc-duration-fast: 150ms;
--wc-duration-base: 200ms;
--wc-duration-slow: 300ms;
--wc-duration-ambient: 700ms;
--wc-ease-out: cubic-bezier(0, 0, 0.2, 1);
--wc-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* ---------------------------------------------------------------
LAYOUT
--------------------------------------------------------------- */
--wc-container-max: 1240px;
--wc-gutter: 3vw;
}
/* WeCann Summit 2026 — landing page
Layout, section order and copy mirror the original site.
Everything visual is driven by the WeCann.Care design system. */
/* ============================================================ RESET */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--wc-surface-paper);
color: var(--wc-text-ink);
font-family: var(--wc-font-sans);
font-size: var(--wc-text-body);
line-height: var(--wc-text-body-lh);
-webkit-font-smoothing: antialiased;
}
img,
video,
svg {
display: block;
max-width: 100%;
}
h1,
h2,
h3,
p,
ul,
figure,
blockquote {
margin: 0;
}
ul {
padding: 0;
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
:focus-visible {
outline: 2px solid var(--wc-summit-blue);
outline-offset: 3px;
border-radius: var(--wc-radius-sm);
}
/* ============================================================ LAYOUT PRIMITIVES */
.sm-wrap {
width: min(100% - 2 * var(--wc-gutter), var(--wc-container-max));
margin-inline: auto;
}
.sm-wrap-narrow {
max-width: 968px;
}
.sm-center {
text-align: center;
}
/* Os dois passos do ritmo vertical da página, nomeados aqui e usados por todas
as regras de intervalo abaixo. Não são tokens novos: são apelidos locais para
degraus que já existem na rampa --wc-space, e existem só para que o ritmo
tenha um lugar único onde muda de tamanho — que é o @media no fim do arquivo.
Sem isso, encolher o ritmo no celular obrigaria a repetir as cinco regras de
adjacência dentro do media query. */
:root {
--sm-rhythm: var(--wc-space-24);
--sm-rhythm-tight: var(--wc-space-12);
}
.sm-section {
padding-block: var(--sm-rhythm);
}
.sm-section-tight {
padding-block: var(--sm-rhythm-tight);
}
/* Warm sunken band — the page's light/dark rhythm. */
.sm-sunken {
background: var(--wc-surface-sunken);
}
/* Faixa rebaixada em degradê, no lugar do cinza. Modificador e não substituto:
a seção continua .sm-sunken, porque é essa classe que o ritmo da página lê
para decidir o espaço entre vizinhas (.sm-sunken + .sm-sunken) e as margens
internas do texto. Aqui só a tinta de fundo muda.
O véu a 88% é o número, não um gosto. Sobre o cinza #f2f2f1 que estava aqui,
o texto secundário media 5,00:1; sobre este degradê lavado ele mede 4,94:1 no
pior ponto da faixa (a ponta azul) e 5,36:1 no melhor. Continua acima dos
4,5:1 da AA, e a perda contra o cinza é de 0,06. O texto muted, que é o mais
apertado, sai de 3,10:1 para 3,06:1 e segura os 3:1. Lavagens mais fracas
custam rápido: a 80% o muted cai a 2,81:1 e já não passa.
O degradê é horizontal e ancorado na seção, então duas faixas empilhadas
coincidem stop a stop e a emenda entre elas não aparece. É por isso que a
seção do texto e a dos dois cards podem dividir a mesma faixa sem costura. */
.sm-tinted {
--sm-tint-veil: color-mix(in srgb, var(--wc-surface-paper) 88%, transparent);
/* Papel por baixo para que um arquivo de tokens desatualizado deixe a faixa
apenas lisa, em vez de uma laje de cor ilegível. */
background-color: var(--wc-surface-paper);
background-image:
linear-gradient(var(--sm-tint-veil), var(--sm-tint-veil)),
var(--wc-gradient-summit);
}
/* Faixa rebaixada com a arte molecular da identidade, no lugar do cinza. Irmã
de .sm-tinted e escrita da mesma forma, pelos mesmos motivos: modificador e
não substituto, com papel opaco por baixo para degradar em liso caso o
arquivo suma.
O véu a 88% é o mesmo número do .sm-tinted, e também é medido: sobre o cinza
#f2f2f1 o texto secundário media 5,00:1, e sobre a arte lavada ele mede
4,58:1 no pior pixel da imagem inteira — acima dos 4,5:1 da AA. O navy dos
títulos fica em 15,13:1. Lavagens mais fracas custam rápido: a 80% o
secundário cai a 3,97:1 e já não passa.
Desde 2026-09-30 a faixa está na seção de garantias, e não mais na de
depoimentos: a Tiana pediu a troca. Lá caía o .sm-sub, texto secundário, e era
ele que consumia a folga do véu; aqui o único texto sobre a arte é o .sm-h2,
em navy. A margem, portanto, só cresceu — mas o número de 88% fica como está,
porque ele é o orçamento do modificador e não o da seção que o usa hoje.
E não é só orçamento: no mesmo dia a Tiana pediu a arte a 60% de opacidade
(véu de 40%) e desfez logo em seguida, olhando na tela. O contraste não era o
problema — o navy media 5,45:1 no pior pixel e passava a AA com folga. A
imagem é que não aguenta aparecer: com força, as moléculas viram desenho e
competem com os cards em vez de ficar atrás deles. A 12% de opacidade ela é
textura, e é isso que a faixa quer ser.
Nenhum texto muted cai sobre esta faixa: o corpo dos cards de garantia fica
sobre papel branco. Se algum dia cair, o número tem que ser outro — muted
mediria 2,84:1 aqui e não passaria.
A arte é decorativa e vive só no CSS: não tem alt, não entra na árvore de
acessibilidade, e some com a folha de estilo sem levar conteúdo junto. */
.sm-arted {
--sm-art-veil: color-mix(in srgb, var(--wc-surface-paper) 88%, transparent);
background-color: var(--wc-surface-paper);
background-image:
linear-gradient(var(--sm-art-veil), var(--sm-art-veil)),
url("https://summit.wecann.academy/wp-content/uploads/2026/10/bg-moleculas.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Vizinhas de mesmo fundo: só uma delas decide o espaço entre as duas.
Sem esta regra o intervalo entre duas seções é a soma de duas decisões
independentes — o padding-bottom de uma mais o padding-top da outra — e
ninguém nunca escolheu esse número. Dava 144px entre duas seções brancas e
192px entre duas de ritmo cheio. Quando o fundo muda no meio, esse tamanho se
justifica: é a faixa respirando, e a troca de cor prova que houve uma
fronteira ali. Quando o fundo não muda, não há nada no lugar para justificar
o vazio, e ele lê como buraco, não como respiro.
Zerar o de cima deixa o intervalo ser um passo do ritmo em vez de dois. Já
era o que a regra .sm-sunken + .sm-sunken fazia à mão para as duas faixas
rebaixadas; isto só estende o mesmo princípio ao branco, que é o fundo
padrão da página e por isso o caso mais frequente. */
.sm-sunken + .sm-sunken,
.sm-section:not(.sm-sunken) + .sm-section:not(.sm-sunken) {
padding-top: 0;
}
/* Exceção ao de cima. Uma seção de ritmo cheio logo depois de uma tight ficava
com 48px — o passo da vizinha menor, não o dela. O espaço entre duas seções
pertence à maior das duas, então o lado que sobrou devolve o passo cheio.
:has() aqui porque a dona do padding é a seção de cima e o seletor precisa
olhar para a de baixo. */
.sm-section-tight:not(.sm-sunken):has(
+ .sm-section:not(.sm-sunken):not(.sm-section-tight)
) {
padding-bottom: var(--sm-rhythm);
}
/* Troca de faixa. Aqui o fundo muda, então o intervalo tem o que o justifique e
as duas seções continuam pagando padding — mas não o passo inteiro as duas.
96+96 dava 192px, e o pior caso da página eram 208px entre o fim dos
depoimentos e o título dos passaportes: dois vazios empilhados com a emenda
no meio, que é justamente onde ela some. Quem entra na faixa nova é que cede,
porque o lado de baixo da emenda é o que já tem uma borda de cor para
segurar o olho; o de cima é só o fim de um bloco de conteúdo.
Meio passo e não zero porque o conteúdo que abre a faixa não pode encostar na
emenda — encostado, o título vira legenda da seção anterior.
O hero entra na lista porque é o caso mais forte de todos: ele termina em
vídeo escuro e a seção seguinte abre em branco. A troca de faixa ali é a mais
evidente da página, e mesmo assim as duas pagavam passo cheio. */
.sm-hero + .sm-section,
.sm-sunken + .sm-section:not(.sm-sunken),
.sm-section:not(.sm-sunken) + .sm-sunken {
padding-top: var(--sm-rhythm-tight);
}
/* ============================================================ TYPE ROLES
Crimson Pro carries display. Inter carries every dense UI string.
Roboto Mono is reserved for figures the reader compares across rows. */
.sm-h2 {
font-family: var(--wc-font-display);
font-size: var(--wc-text-display-m);
line-height: var(--wc-text-display-m-lh);
letter-spacing: var(--wc-text-display-m-ls);
font-weight: var(--wc-weight-semibold);
color: var(--wc-text-navy);
text-wrap: balance;
}
.sm-h3 {
font-family: var(--wc-font-display);
font-size: var(--wc-text-title);
line-height: var(--wc-text-title-lh);
font-weight: var(--wc-weight-semibold);
color: var(--wc-text-navy);
}
/* Modifier, not a type role: these two headings are plain .sm-h2 like every
other section title, and this only re-attaches the brand rule they carried
as kickers. A régua é uma das duas colocações sancionadas do degradê, então
sobrevive à promoção.
80×4 e não 40×2: a 2px a rampa inteira cabia em 40px e as cinco paradas
viravam uma mancha só — o degradê não se lia como degradê nesse tamanho. */
.sm-h2-rule::before {
content: "";
display: block;
width: 80px;
height: 4px;
/* A step more than the old kicker used: the title above it is now 39px
rather than 16px, and space-3 read as a collision at that size. */
margin-bottom: var(--wc-space-4);
border-radius: var(--wc-radius-full);
background: var(--wc-gradient-summit);
}
.sm-center .sm-h2-rule::before {
margin-inline: auto;
}
.sm-lede {
font-size: var(--wc-text-body-l);
line-height: var(--wc-text-body-l-lh);
color: var(--wc-text-secondary);
}
.sm-lede-center {
margin-inline: auto;
max-width: 68ch;
}
.sm-sub {
font-size: var(--wc-text-body-l);
color: var(--wc-text-secondary);
}
.sm-prose p {
font-size: var(--wc-text-body);
line-height: var(--wc-text-body-lh);
color: var(--wc-text-secondary);
}
.sm-prose p + p {
margin-top: var(--wc-space-5);
}
.sm-prose strong {
color: var(--wc-text-ink);
font-weight: var(--wc-weight-semibold);
}
/* ============================================================ BUTTONS */
/* O rótulo subiu de caption (14px) para body-l (18px). Os 4px pedidos caem
exatamente num degrau que a rampa já tinha, então o botão continua falando a
escala da página em vez de abrir uma medida só dele — que é a diferença
entre um ajuste e uma exceção.
O padding horizontal acompanha, de --wc-space-8 para --wc-space-10. Vertical
não: com line-height 1 a caixa do texto é o próprio corpo da fonte, então os
4px a mais já viram 4px de altura sozinhos (48 → 52px), que é altura cheia
de botão grande. Crescer o vertical junto levaria a 60px, e aí o botão
deixaria de ser um controle para virar um bloco. O horizontal é outra
história: é ele que dá a proporção da pílula, e mantido em 32px com um
rótulo 29% maior o botão fica curto nas pontas. 40px devolve a razão que
ele tinha. */
.sm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--wc-space-2);
padding: var(--wc-space-4) var(--wc-space-10);
border-radius: var(--wc-radius-full);
font-family: var(--wc-font-sans);
font-size: var(--wc-text-body-l);
line-height: 1;
font-weight: var(--wc-weight-semibold);
letter-spacing: 0.01em;
text-align: center;
cursor: pointer;
/* Nenhuma variante desenha borda — a página é de botões sem contorno. O 1px
transparente fica porque ele é a caixa: remover a declaração encolheria
todo botão em 2px nos dois eixos, e ninguém pediu para mudar tamanho de
botão. Também deixa a linha reservada para o anel de foco e para o dia em
que um contorno voltar, sem custo nenhum de layout. */
border: 1px solid transparent;
transition: background-position var(--wc-duration-base) var(--wc-ease-out),
background-color var(--wc-duration-base) var(--wc-ease-out),
color var(--wc-duration-base) var(--wc-ease-out),
transform var(--wc-duration-fast) var(--wc-ease-out);
}
/* Oversized and slid on hover, which shifts the sweep warmer without
introducing a second colour. The 135% is load-bearing twice over: it buys
the hover travel, and it is the frame the CTA gradient's stops are
positioned against — em repouso essa janela mostra do azul até o âmbar, e o
hover traz o amarelo. Changing this number silently re-crops the gradient,
so it moves together with the stops in --wc-gradient-summit-cta, never on
its own. */
.sm-btn-primary {
/* Coral por baixo para o botão sobreviver a um arquivo de tokens quebrado —
um var() não resolvido em background-image deixaria o botão sem
preenchimento nenhum. Coral e não azul ou amarelo porque é o stop do
meio: qualquer trecho da varredura que estivesse à vista, é a menor
mudança. O rótulo branco mede 2,43:1 sobre ele, na mesma faixa do resto da
rampa — o fallback não piora nada, só não conserta. */
background-color: var(--wc-summit-coral);
background-image: var(--wc-gradient-summit-cta);
background-size: 135% 100%;
background-position: 0% 50%;
/* Branco por decisão da Tiana, 2026-09-30, e fica registrado que é uma
escolha de marca contra o número: a rampa do evento é clara de ponta a
ponta, e o branco mede 3,41:1 no azul, 1,80:1 no âmbar e 1,55:1 no amarelo.
Não passa a AA em ponto nenhum da varredura, nem em texto grande. O navy
que estava aqui ia de 5,27:1 a 11,93:1 e passava em todos.
Medido em 2000 amostras ao longo da rampa, não só nos cinco stops: é entre
os stops que o contraste afunda, e é por isso que o pior ponto não coincide
com nenhuma cor da paleta.
Se um dia isto voltar atrás, o caminho é trocar esta linha por
--wc-text-navy — e nada mais, porque o degradê já está calibrado para ele. */
color: var(--wc-text-on-inverse);
}
.sm-btn-primary:hover {
background-position: 100% 50%;
transform: translateY(-1px);
}
/* ---- Os botões navy ---------------------------------------------------
São dois na página, e estão nos dois únicos lugares onde o .sm-btn-primary
não funcionaria: o passaporte Experience e o banner. Os dois ficam sobre
degradê da marca, e degradê sobre degradê não tem de onde se destacar. Navy
chapado é a única cor da paleta que não aparece em ponto nenhum da rampa, em
força nenhuma, então é o único preenchimento que não se dissolve no fundo
qualquer que seja o véu. De quebra dá o contraste máximo disponível: 18,5:1
do rótulo branco.
O degradê da identidade entra como borda inferior, a pedido da Tiana
(2026-10-01). É borda de verdade e não um traço posicionado por baixo: com a
largura em 1px/1px/3px o degradê acompanha o arredondamento da pílula e
afina até sumir nas pontas, em vez de atravessar reto sob a curva. O
preenchimento navy vira camada de background-image recortada em padding-box
para não cobrir essa faixa — e é por isso que o hover mexe no --sm-cta-fill
e não mais no background-color. O background-color continua declarado, mas
agora fica debaixo das duas camadas: é rede para o dia em que
--wc-gradient-summit não resolver, e nada mais.
Os 2px a mais embaixo levam o botão de 52px para 54px de altura. No card
Standard o .sm-btn-primary continua em 52 — a diferença cai na base dos dois
cards, que é a única borda deles que não alinha com nada. */
.sm-btn-solid {
--sm-cta-fill: var(--wc-surface-inverse);
background-color: var(--wc-surface-inverse);
border-width: 1px 1px 3px;
background-image:
linear-gradient(var(--sm-cta-fill), var(--sm-cta-fill)),
var(--wc-gradient-summit);
background-origin: border-box;
background-clip: padding-box, border-box;
color: var(--wc-text-on-inverse);
}
.sm-btn-solid:hover {
--sm-cta-fill: color-mix(in srgb, var(--wc-surface-inverse) 88%, var(--wc-surface-paper));
transform: translateY(-1px);
}
/* Verde do WhatsApp. Um botão que abre um app de terceiro é, junto com o
ícone, a coisa que a pessoa reconhece antes de ler — por isso a cor vem de
fora da paleta, e vem por um token marcado como externo em vez de um hex
solto, para que fique explícito que é exceção e não paleta nova.
Tinta navy, não branca, e essa é a decisão que vale explicar. O botão
canônico do WhatsApp é verde com glifo branco, mas branco sobre #25d366 mede
1,98:1 — num rótulo de 14px isso não é estilo, é ilegível. Navy sobre o mesmo
verde dá 9,32:1 e mantém o verde exato. É o padrão que o Spotify usa no
#1db954 pelo mesmo motivo, e lê como escolha, não como defeito.
Sem degradê e sem background-size aqui: o sweep do .sm-btn-primary não tem
para onde correr numa cor chapada, e a transição herdada de background-position
simplesmente não dispara. */
.sm-btn-whats {
background-color: var(--wc-external-whatsapp);
background-image: none;
color: var(--wc-text-navy);
}
.sm-btn-whats:hover {
/* Escurece em vez de deslizar. 12% de navy misturado no verde mantém a matiz
e dá o degrau de estado que o primário consegue com o sweep. */
background-color: color-mix(in srgb, var(--wc-external-whatsapp) 88%, var(--wc-text-navy));
transform: translateY(-1px);
}
/* Mesmos +4px, um degrau abaixo: micro (12px) vira body (16px). Aqui o
vertical fica onde está de propósito — este é o botão do header, que é
sticky, e cada pixel de altura dele é pixel roubado de toda a página em toda
rolagem. 38 → 42px é o que os 4px da fonte custam, e é o teto do que o
header aguenta sem reequilibrar a barra inteira. */
.sm-btn-sm {
padding: var(--wc-space-3) var(--wc-space-6);
font-size: var(--wc-text-body);
}
.sm-btn-block {
display: flex;
width: 100%;
}
/* ============================================================ HEADER */
.sm-header {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in srgb, var(--wc-surface-paper) 88%, transparent);
backdrop-filter: blur(var(--wc-blur-sm));
border-bottom: 1px solid var(--wc-border-default);
}
.sm-header-inner {
width: min(100% - 2 * var(--wc-gutter), var(--wc-container-max));
margin-inline: auto;
display: flex;
align-items: center;
gap: var(--wc-space-8);
min-height: 68px;
}
.sm-brand {
display: flex;
align-items: center;
flex-shrink: 0;
}
.sm-brand img {
display: block;
width: auto;
height: 40px;
}
.sm-nav {
display: flex;
align-items: center;
gap: var(--wc-space-6);
margin-left: auto;
}
.sm-nav a {
position: relative;
padding-block: var(--wc-space-5);
font-size: var(--wc-text-caption);
font-weight: var(--wc-weight-medium);
color: var(--wc-text-secondary);
transition: color var(--wc-duration-base) var(--wc-ease-out);
}
.sm-nav a:hover {
color: var(--wc-text-ink);
}
/* The 2px brand gradient rule — one of only two places the full
gradient is allowed to appear. */
.sm-nav a::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: 14px;
height: 2px;
border-radius: 2px;
background: var(--wc-gradient-summit);
opacity: 0;
transform: scaleX(0.4);
transition: opacity var(--wc-duration-base) var(--wc-ease-out),
transform var(--wc-duration-base) var(--wc-ease-out);
}
.sm-nav a:hover::after {
opacity: 1;
transform: scaleX(1);
}
.sm-header-end {
display: flex;
align-items: center;
gap: var(--wc-space-5);
flex-shrink: 0;
}
.sm-lang {
font-size: var(--wc-text-micro);
font-weight: var(--wc-weight-semibold);
letter-spacing: var(--wc-text-micro-ls);
color: var(--wc-text-muted);
}
.sm-lang:hover {
color: var(--wc-text-ink);
}
.sm-burger {
display: none;
margin-left: auto;
flex-direction: column;
justify-content: center;
gap: var(--wc-space-1);
width: 40px;
height: 40px;
padding: 0;
background: none;
border: 1px solid var(--wc-border-default);
border-radius: var(--wc-radius-full);
cursor: pointer;
}
.sm-burger span {
display: block;
width: 16px;
height: 1.5px;
margin-inline: auto;
border-radius: 2px;
background: var(--wc-text-ink);
}
.sm-drawer {
display: flex;
flex-direction: column;
padding: var(--wc-space-4) var(--wc-gutter) var(--wc-space-6);
border-top: 1px solid var(--wc-border-default);
}
.sm-drawer[hidden] {
display: none;
}
.sm-drawer a {
padding-block: var(--wc-space-3);
font-size: var(--wc-text-body);
font-weight: var(--wc-weight-medium);
color: var(--wc-text-secondary);
border-bottom: 1px solid var(--wc-border-default);
}
/* ============================================================ HERO */
.sm-hero {
position: relative;
isolation: isolate;
min-height: 640px;
display: grid;
place-items: center;
padding-block: var(--wc-space-24);
overflow: hidden;
background: var(--wc-surface-inverse);
}
.sm-hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
}
/* Navy veil so the display type keeps its contrast over moving footage. */
.sm-hero-veil {
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--wc-surface-inverse) 82%, transparent) 0%,
color-mix(in srgb, var(--wc-surface-inverse) 68%, transparent) 45%,
color-mix(in srgb, var(--wc-surface-inverse) 88%, transparent) 100%
);
}
.sm-hero-inner {
width: min(100% - 2 * var(--wc-gutter), 940px);
margin-inline: auto;
text-align: center;
color: var(--wc-text-on-inverse);
}
.sm-eyebrow-pill {
display: inline-block;
padding: var(--wc-space-2) var(--wc-space-4);
border-radius: var(--wc-radius-full);
border: 1px solid color-mix(in srgb, var(--wc-text-on-inverse) 28%, transparent);
font-size: var(--wc-text-micro);
line-height: var(--wc-text-micro-lh);
letter-spacing: var(--wc-text-micro-ls);
text-transform: uppercase;
font-weight: var(--wc-weight-semibold);
color: color-mix(in srgb, var(--wc-text-on-inverse) 88%, transparent);
}
.sm-hero-title {
margin-top: var(--wc-space-6);
font-family: var(--wc-font-display);
font-size: var(--wc-text-display-xl);
line-height: var(--wc-text-display-xl-lh);
letter-spacing: var(--wc-text-display-xl-ls);
font-weight: var(--wc-weight-semibold);
text-wrap: balance;
}
.sm-hero-meta {
display: flex;
justify-content: center;
gap: var(--wc-space-16);
margin-top: var(--wc-space-10);
}
.sm-hero-meta-item {
text-align: left;
}
.sm-meta-label {
font-size: var(--wc-text-micro);
line-height: var(--wc-text-micro-lh);
letter-spacing: var(--wc-text-micro-ls);
text-transform: uppercase;
font-weight: var(--wc-weight-semibold);
color: color-mix(in srgb, var(--wc-text-on-inverse) 58%, transparent);
}
/* Dates and venue are reference figures — mono keeps them scannable. */
.sm-meta-value {
margin-top: var(--wc-space-1);
font-family: var(--wc-font-mono);
font-size: var(--wc-text-caption);
line-height: var(--wc-text-caption-lh);
color: var(--wc-text-on-inverse);
}
.sm-hero-cta {
margin-top: var(--wc-space-10);
}
/* Parágrafo de apoio dentro do hero, no lugar que o CTA ocuparia. Peça própria
e não .sm-lede com modificador: o .sm-lede pinta --wc-text-secondary, que é
cor de papel e some sobre o véu, então um modificador teria de reescrever
cor e medida — ou seja, a regra inteira.
82% do branco, entre o .sm-meta-value (100%, dado que se lê) e o
.sm-hero-note (62%, aviso). É texto corrido de apoio: precisa recuar do
título sem virar legenda.
O número é medido, não escolhido: compondo a foto do hero com o véu na faixa
onde o parágrafo cai (76,3% de navy) e procurando o pixel mais claro atrás
do texto, 82% mede 6,97:1. Branco cheio daria 9,41:1 e apagaria a hierarquia
contra o título; 70% já cai para 5,60:1 e encosta na margem da AA se a foto
do hero for trocada por uma mais clara.
A medida de 68ch é a mesma do .sm-lede-center. O hero tem 940px de caixa e
o parágrafo tem três linhas: sem o teto ele encostaria nas duas bordas e
perderia a forma de bloco centrado que o título acima estabelece. */
.sm-hero-lede {
margin-top: var(--wc-space-10);
margin-inline: auto;
max-width: 68ch;
font-size: var(--wc-text-body-l);
line-height: var(--wc-text-body-l-lh);
color: color-mix(in srgb, var(--wc-text-on-inverse) 82%, transparent);
}
/* ---- Os três CTAs largos da página -----------------------------------
Hero, patrocínio e Ultravel saem do mesmo tamanho. São os três botões que
abrem sozinhos um bloco — não moram numa grade nem ao lado de um irmão que
lhes dê escala — e quando cada um se media pelo próprio rótulo eles saíam
com 302, 226 e 218px. Três pesos diferentes para três chamadas de mesma
importância, e a diferença lia como hierarquia onde não havia nenhuma.
Largura declarada, e não o padding-inline que o hero usava. Padding produz
largura a partir do rótulo, então três rótulos de tamanhos diferentes nunca
chegariam ao mesmo número — para igualar é preciso dizer o número. min-width
em vez de width porque o botão ainda pode crescer se um rótulo passar de
304px, em vez de estourar a caixa.
O valor é a largura que o hero já tinha (301,6px, do pedido de +2cm sobre os
226 originais) arredondada para a grade de 4px. Não é degrau da rampa de
espaço, e nem deveria ser: --wc-space vai até 96px e isto é medida de
componente. Fica como variável local, no mesmo espírito de --sm-rhythm. Se
uma segunda família de CTA largo aparecer no produto, aí sim vira token. */
:root {
--sm-cta-wide: 19rem;
}
.sm-hero-cta .sm-btn,
.sm-banner .sm-btn,
.sm-partner-text .sm-btn {
min-width: var(--sm-cta-wide);
/* Abaixo de ~344px de viewport 304px passa da coluna e cria rolagem
horizontal na página inteira. O teto deixa o botão encolher e o rótulo
quebrar em duas linhas num aparelho de 320px, que é feio mas é local — a
rolagem lateral não é. */
max-width: 100%;
}
.sm-hero-note {
margin-top: var(--wc-space-4);
font-size: var(--wc-text-micro);
line-height: var(--wc-text-micro-lh);
letter-spacing: var(--wc-text-micro-ls);
text-transform: uppercase;
font-weight: var(--wc-weight-medium);
color: color-mix(in srgb, var(--wc-text-on-inverse) 62%, transparent);
}
/* ============================================================ REALIZAÇÃO */
.sm-realizacao .sm-lede {
margin-top: var(--wc-space-5);
}
/* ============================================================ STATS */
.sm-stat-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--wc-space-6);
}
.sm-stat {
position: relative;
padding: var(--wc-space-8) var(--wc-space-6);
border: 1px solid var(--wc-border-default);
border-radius: var(--wc-radius-card);
background: var(--wc-surface-paper);
}
/* A aba em degradê que assoma acima de cada card, como se houvesse um segundo
card atrás deslocado para cima. Só a lasca aparece — e ela é o elemento
inteiro, não um recorte. Desenhar só a parte visível evita a briga de
empilhamento: um pseudo-elemento em z-index negativo pinta acima do fundo do
próprio pai, então um card "atrás" de verdade não ficaria atrás de nada.
Recuada 12px de cada lado, que é exatamente o --wc-radius-card: assim a base
da aba encosta no trecho reto da borda superior e não avança sobre a curva
dos cantos, onde sobraria um degrau. É o recuo que faz a peça ler como aba e
não como borda mal cortada.
Cada aba é um trecho da régua, não a régua inteira, e o trecho é o que sai da
cor do numeral daquele card — pedido da Tiana em 2026-09-30. Antes as quatro
abas eram idênticas (a régua completa repetida) e quem escalonava era só o
numeral; agora aba e numeral andam juntos e a fileira lê como quatro tempos da
mesma rampa, sem depender de os cards estarem lado a lado. Isso é o que faz o
recorte sobreviver ao mobile, onde a fileira vira coluna: cada card carrega o
seu pedaço da identidade em vez de um quarto de uma rampa que ali não existe.
A regra é uma só: a aba começa na cor exata do numeral e caminha para a cor
seguinte na régua. Por isso o terceiro card sai de coral-deep, e não do coral
da rampa — o numeral é que manda. O quarto repete o primeiro porque o numeral
também repete; o ciclo é de três cores em quatro posições.
Decorativa por construção: não há texto sobre ela, então não há razão de
contraste a cumprir aqui. É por isso que a aba pode usar âmbar, que os
numerais não podem — ver a nota deles logo abaixo. */
.sm-stat::before {
content: "";
position: absolute;
inset-inline: var(--wc-radius-card);
top: -6px;
height: 6px;
border-radius: var(--wc-radius-full) var(--wc-radius-full) 0 0;
background: var(--sm-stat-tab, var(--wc-gradient-summit));
}
/* Display, not mono. These are headline figures the reader takes in as a
statement, not values compared across rows — the case the mono role exists
to protect. At display-m they are far above the 18px floor Crimson Pro has,
so this is the display role used as intended. Matched to .sm-h2 exactly:
same family, same weight, same line-height and tracking tokens, which also
retires the raw 1.1 / -0.02em that were sitting here. */
.sm-stat-num {
font-family: var(--wc-font-display);
font-size: var(--wc-text-display-m);
line-height: var(--wc-text-display-m-lh);
font-weight: var(--wc-weight-semibold);
letter-spacing: var(--wc-text-display-m-ls);
color: var(--wc-summit-blue);
}
/* Cada numeral pega um stop diferente do degradê, na ordem em que eles
aparecem nele — a linha inteira lê como a régua da identidade aberta em
quatro tempos, em vez de quatro vezes a mesma tinta.
A rotação é de três cores, não de cinco, e a ponta quente da identidade não
entra aqui. O motivo é de contraste: estes números são conteúdo (não levam
aria-hidden), então cada um precisa dos 3:1 que a AA pede para texto grande.
Azul e malva passam na cor original, que já mede 3,41:1. Coral só passa na
versão -deep. Âmbar e amarelo não passam em forma nenhuma que ainda pareça
âmbar ou amarelo: segurados escuros o bastante para chegar a 3:1 eles viram
bronze (#c38947 e #b09144), e foi exatamente isso que a Tiana recusou em
2026-09-30 — a rampa do evento é clara, e forçar a ponta clara dela a virar
tinta sobre papel branco só produz dourado sujo.
Então a régua para no coral e volta ao azul no quarto. Quatro posições, três
cores: o azul reaparece no fim da linha, longe do começo, e a sequência lê
como ciclo. Mesma rotação que o .sm-care já usa.
Cada bloco abaixo traz o numeral e a aba do mesmo card juntos, e não em duas
listas separadas, justamente porque um agora depende do outro: mexer na cor de
um numeral sem mexer na aba quebra o pareamento que a Tiana pediu. O teto de
contraste vale só para o numeral — a aba é decoração e pode ir até o âmbar. */
.sm-stat:nth-child(1) {
--sm-stat-tab: linear-gradient(
90deg,
var(--wc-summit-blue),
var(--wc-summit-mauve)
);
}
.sm-stat:nth-child(1) .sm-stat-num {
color: var(--wc-summit-blue);
}
.sm-stat:nth-child(2) {
--sm-stat-tab: linear-gradient(
90deg,
var(--wc-summit-mauve),
var(--wc-summit-coral)
);
}
.sm-stat:nth-child(2) .sm-stat-num {
color: var(--wc-summit-mauve);
}
.sm-stat:nth-child(3) {
--sm-stat-tab: linear-gradient(
90deg,
var(--wc-summit-coral-deep),
var(--wc-summit-amber)
);
}
.sm-stat:nth-child(3) .sm-stat-num {
color: var(--wc-summit-coral-deep);
}
.sm-stat:nth-child(4) {
--sm-stat-tab: linear-gradient(
90deg,
var(--wc-summit-blue),
var(--wc-summit-mauve)
);
}
.sm-stat:nth-child(4) .sm-stat-num {
color: var(--wc-summit-blue);
}
.sm-stat-label {
margin-top: var(--wc-space-3);
font-size: var(--wc-text-caption);
line-height: var(--wc-text-caption-lh);
color: var(--wc-text-secondary);
}
/* ============================================================ A MEDICINA AVANÇOU */
.sm-sunken .sm-h2 + .sm-lede {
margin-top: var(--wc-space-6);
}
.sm-sunken .sm-lede + .sm-prose {
margin-top: var(--wc-space-8);
}
/* ============================================================ DUAS FRONTEIRAS */
.sm-duo {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--wc-space-6);
}
.sm-duo-card {
padding: var(--wc-space-10);
background: var(--wc-surface-paper);
border: 1px solid var(--wc-border-default);
border-radius: var(--wc-radius-panel);
}
/* Os dois únicos ícones em degradê da página. Traço e não preenchimento: um
glifo chapado nessa rampa clara vira uma mancha pastel de 48px sobre papel
branco — com 1,75 de traço o olho lê a forma pelo desenho, e a cor entra como
identidade, não como contraste. Por isso também não há regra de contraste
aqui: o ícone é decorativo (aria-hidden), o título ao lado é que informa.
O degradê mora inline no SVG, e isso é obrigatório, não preferência: um SVG
externo em ![]()
é um documento isolado e não enxerga os custom properties
desta folha — os stops resolveriam para nada. Inline, stop-color: var(--wc-…)
resolve contra o documento e a cor continua vindo do token. É a mesma razão
pela qual os .sm-guard-icon foram inlinados.
gradientUnits="userSpaceOnUse" porque o padrão, objectBoundingBox, aplica a
rampa inteira a cada path separadamente — cada traço ficaria com seu próprio
azul-ao-amarelo. Em userSpace a rampa é uma só, ancorada no viewBox, e
atravessa o ícone como atravessa a página. */
.sm-duo-icon {
display: block;
width: 48px;
height: 48px;
margin-bottom: var(--wc-space-6);
fill: none;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.sm-duo-card p {
margin-top: var(--wc-space-4);
font-size: var(--wc-text-body);
line-height: var(--wc-text-body-lh);
color: var(--wc-text-secondary);
}
/* ============================================================ PESSOAS */
.sm-h2-lead {
max-width: 46ch;
margin-inline: auto;
margin-bottom: var(--wc-space-12);
}
.sm-chair {
display: grid;
grid-template-columns: 340px 1fr;
gap: var(--wc-space-16);
align-items: start;
}
.sm-person {
border: 1px solid var(--wc-border-default);
border-radius: var(--wc-radius-card);
background: var(--wc-surface-paper);
overflow: hidden;
}
.sm-person-photo {
position: relative;
}
.sm-person-photo img {
width: 100%;
height: auto;
filter: grayscale(1);
}
.sm-person-lead .sm-person-photo img {
filter: none;
}
.sm-person-body {
padding: var(--wc-space-6);
}
.sm-person-role {
font-size: var(--wc-text-micro);
line-height: var(--wc-text-micro-lh);
letter-spacing: var(--wc-text-micro-ls);
text-transform: uppercase;
font-weight: var(--wc-weight-semibold);
color: var(--wc-text-muted);
margin-bottom: var(--wc-space-2);
}
.sm-person-name {
font-family: var(--wc-font-display);
font-size: var(--wc-text-title);
line-height: var(--wc-text-title-lh);
font-weight: var(--wc-weight-semibold);
color: var(--wc-text-navy);
}
.sm-person-bio {
margin-top: var(--wc-space-3);
font-size: var(--wc-text-caption);
line-height: var(--wc-text-caption-lh);
color: var(--wc-text-secondary);
}
/* Registration numbers sit in mono — they are codes, not prose. */
.sm-person-crm {
margin-top: var(--wc-space-3);
font-family: var(--wc-font-mono);
font-size: var(--wc-text-micro);
line-height: var(--wc-text-micro-lh);
color: var(--wc-text-muted);
}
.sm-chair-text .sm-prose {
margin-top: var(--wc-space-5);
}
.sm-chair-close {
margin-top: var(--wc-space-8);
padding-left: var(--wc-space-5);
border-left: 2px solid var(--wc-summit-blue);
font-family: var(--wc-font-display);
font-size: var(--wc-text-title);
line-height: var(--wc-text-title-lh);
font-style: italic;
color: var(--wc-text-navy);
}
.sm-person-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--wc-space-6);
}
/* ============================================================ APOIO INSTITUCIONAL */
.sm-apoio-logo {
margin: var(--wc-space-6) auto 0;
width: 260px;
height: 160px;
opacity: 0.8;
}
/* ============================================================ CARROSSEL */
.sm-carousel {
margin-top: var(--wc-space-10);
}
.sm-carousel-track {
display: flex;
gap: var(--wc-space-5);
overflow-x: auto;
/* Proximity, not mandatory: the track advances on its own and `mandatory`
fights the programmatic scroll, stuttering mid-slide. */
scroll-snap-type: x proximity;
scroll-behavior: smooth;
scrollbar-width: none;
padding-inline: max(var(--wc-gutter), (100vw - var(--wc-container-max)) / 2);
padding-bottom: var(--wc-space-2);
}
.sm-carousel-track::-webkit-scrollbar {
display: none;
}
.sm-slide {
flex: 0 0 clamp(260px, 30%, 380px);
scroll-snap-align: start;
border-radius: var(--wc-radius-card);
overflow: hidden;
border: 1px solid var(--wc-border-default);
}
.sm-slide img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 337 / 232;
}
/* ============================================================ FEATURES */
.sm-feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* 1fr nas linhas, não auto: com auto cada linha se media pelo card mais alto
dela, e as duas linhas da grade fechavam em alturas diferentes (279 e 304px
a 1440) por causa de uma frase a mais lá embaixo. Como fração, as duas
recebem a mesma altura — a do conteúdo mais alto dos seis —, e a grade fica
quadriculada de verdade. É o que faz os seis cards terem o mesmo tamanho
sem que ninguém precise declarar qual é esse tamanho. */
grid-auto-rows: 1fr;
gap: var(--wc-space-6);
}
/* Coluna flex dentro do card para que o parágrafo possa reivindicar a sobra
(ver .sm-feature p). Sem isto o card é um bloco e o texto para onde o texto
acaba. */
.sm-feature {
display: flex;
flex-direction: column;
padding: var(--wc-space-8);
background: var(--wc-surface-paper);
border: 1px solid var(--wc-border-default);
border-radius: var(--wc-radius-card);
}
/* 31 → 49px, dois degraus. Somados aos anteriores o numeral saiu de 25 para 49
nesta seção: deixou de ser um rótulo do tamanho de um título e virou o
elemento gráfico do card, quase o dobro do título que encabeça. É o tamanho
que a página usa nos preços, o segundo maior da rampa, e aqui ele cabe porque
esta seção não tem manchete própria — o numeral não disputa com ninguém.
Acima dele só resta display-xl, os 61px do título do hero. Esse é o teto, e
emprestá-lo a um ordinal de card seria dizer que os dois pesam o mesmo. */
.sm-feature-num {
display: block;
font-family: var(--wc-font-display);
font-size: var(--wc-text-display-l);
line-height: var(--wc-text-display-l-lh);
letter-spacing: var(--wc-text-display-l-ls);
font-weight: var(--wc-weight-semibold);
color: var(--wc-summit-blue);
}
/* A régua da identidade aberta em seis tempos: os cinco stops na ordem em que
aparecem no degradê, e o sexto voltando ao azul para fechar a volta. Numa
grade de três colunas o 06 cai embaixo do 03, não ao lado do 01, então a
repetição nunca encosta nela mesma.
As cinco entram na forma ORIGINAL, sem as versões -deep. É o que diferencia
esta régua da de estatísticas logo acima, e a razão é o aria-hidden: estes
ordinais são decorativos, o leitor de tela não os anuncia e a informação do
card não depende deles. Sem função de conteúdo não há piso de contraste a
cumprir, então não há motivo para escurecer a ponta quente — e escurecer era
justamente o que destruía essas cores. O 04 e o 05 chegaram a ser âmbar e
amarelo segurados até 3:1; viravam dois bronzes quase idênticos (#c38947 e
#b09144) e a Tiana recusou em 2026-09-30.
Consequência a manter em mente: o 05 (#e7ce82) mede 1,55:1 sobre o papel
branco do card e é, de propósito, o numeral mais apagado da grade. Se algum
dia estes ordinais deixarem de ser aria-hidden, esta régua inteira precisa
voltar para as três cores que servem como tinta. */
.sm-feature:nth-child(1) .sm-feature-num {
color: var(--wc-summit-blue);
}
.sm-feature:nth-child(2) .sm-feature-num {
color: var(--wc-summit-mauve);
}
.sm-feature:nth-child(3) .sm-feature-num {
color: var(--wc-summit-coral);
}
.sm-feature:nth-child(4) .sm-feature-num {
color: var(--wc-summit-amber);
}
.sm-feature:nth-child(5) .sm-feature-num {
color: var(--wc-summit-yellow);
}
.sm-feature:nth-child(6) .sm-feature-num {
color: var(--wc-summit-blue);
}
/* 18 → 25px em dois passos, e o segundo passa por cima do degrau intermediário
que eu tinha aberto: 20px (16 × 1.25, a primeira potência da escala) resolvia
a razão contra o texto mas não resolvia o que se via — a 20px o título ainda
lia como parágrafo em negrito, que é justamente o problema que ele tinha a
18. Título é o degrau seguinte da rampa e o primeiro tamanho que este bloco
lê como título; entre ele e os 20px não há nada, então o token do meio saiu
dos arquivos junto com esta edição em vez de ficar sem consumidor.
Altura natural, sem reserva de linhas — e aqui vale registrar por que ela
existiu e por que saiu, porque a pergunta volta toda vez que alguém olhar
estes cards.
A 25px, três dos seis títulos quebram em duas linhas e três não. São quatro
coisas que se gostaria de ver alinhadas na fileira: os números na mesma
altura, o mesmo intervalo entre número e título, o mesmo intervalo entre
título e texto, e os parágrafos começando na mesma altura. Com títulos de
alturas diferentes, três dessas quatro cabem ao mesmo tempo; a quarta é
sempre a conta que sobra, e a única escolha real é onde deixar a sobra.
Foi reservada em duas linhas e alinhada ao topo: a sobra caiu entre título e
texto. Depois foi para o pé da caixa: a sobra passou para o intervalo entre
número e título, e o "Networking curado" ficou visivelmente mais longe do 05
do que os vizinhos. As duas foram rejeitadas ao ver, que é o tribunal certo.
Sem reserva, a sobra vai para o único lugar onde ninguém repara: o fim do
parágrafo, dentro do branco que o card já tinha no pé. Número, título e texto
ficam rígidos entre si — 20px e 12px em todos os seis, sempre — e o preço é
que o parágrafo de um card de título curto começa uma linha acima do
parágrafo do vizinho. É a menos visível das quatro, porque um parágrafo não
tem com o que se alinhar do outro lado: o número tem, e o título tem. */
.sm-feature h3 {
margin-top: var(--wc-space-5);
font-family: var(--wc-font-display);
font-size: var(--wc-text-title);
line-height: var(--wc-text-title-lh);
font-weight: var(--wc-weight-semibold);
color: var(--wc-text-navy);
}
/* 14 → 16px: caption sobe para body. Era o menor texto corrido desta faixa da
página, e num card que o leitor atravessa inteiro isto é texto, não legenda —
a rampa já tem o nome certo para esse papel.
flex:1 é o que absorve a sobra da seção inteira. O parágrafo toma toda a
altura que resta no card depois do número e do título, e como as linhas da
grade estão em 1fr esse resto termina no mesmo lugar nos seis. É aqui que
mora a única desigualdade que sobrou — um parágrafo começa uma linha acima do
outro quando o título do vizinho quebra — e é de propósito que ela esteja
aqui: um bloco de texto corrido é a peça que menos denuncia um degrau, porque
não tem par do outro lado com que se comparar.
Um min-height em linhas fecharia isso numa largura só: o card mais longo tem
cinco linhas a 1440px e seis a 1100, então o número certo mudaria a cada
breakpoint e envelheceria a cada edição de texto. A fração não precisa saber
de nada disso. */
.sm-feature p {
flex: 1;
margin-top: var(--wc-space-3);
font-size: var(--wc-text-body);
line-height: var(--wc-text-body-lh);
color: var(--wc-text-secondary);
}
/* ============================================================ VENUE */
.sm-venue {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: var(--wc-radius-panel);
}
.sm-venue img {
width: 100%;
height: auto;
}
/* The photo already carries its own scrim, so no overlay is needed here. */
.sm-venue-caption {
position: absolute;
inset-inline: 0;
bottom: 0;
padding: var(--wc-space-8) var(--wc-space-10);
color: var(--wc-text-on-inverse);
}
.sm-venue-name {
font-family: var(--wc-font-display);
font-size: var(--wc-text-title);
line-height: var(--wc-text-title-lh);
font-weight: var(--wc-weight-semibold);
color: inherit;
}
.sm-venue-address {
margin-top: var(--wc-space-2);
font-family: var(--wc-font-mono);
font-size: var(--wc-text-caption);
line-height: var(--wc-text-caption-lh);
color: color-mix(in srgb, var(--wc-text-on-inverse) 78%, transparent);
}
/* ============================================================ QUEM CUIDA DE VOCÊ */
.sm-care-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--wc-space-6);
margin-top: var(--wc-space-12);
}
.sm-care {
position: relative;
padding: var(--wc-space-8);
border: 1px solid var(--wc-border-default);
border-radius: var(--wc-radius-card);
background: var(--wc-surface-paper);
text-align: left;
}
/* Mesma aba dos cards de estatística, pelas mesmas razões: um pseudo-elemento
não pode ficar atrás do fundo opaco do pai (z-index negativo pinta acima
dele), então desenha-se só a lasca que apareceria. O recuo é exatamente o
raio do card, para a base da aba nascer na aresta reta do topo.
Cada aba é um trecho da régua que sai da cor do numeral daquele card, igual
aos cards de estatística e pelo mesmo pedido da Tiana em 2026-09-30. Antes as
três abas eram a régua inteira repetida e só o numeral escalonava; agora aba e
numeral andam juntos. Não é um terço da rampa por card, que é coisa diferente
e não sobreviveria ao mobile — a fileira vira coluna e um degradê atravessando
os três deixa de existir. Aqui cada card carrega o seu pedaço inteiro.
A regra, como lá: a aba começa na cor exata do numeral e caminha para a cor
seguinte na régua. O terceiro sai de coral-deep, e não do coral da rampa,
porque quem manda é o numeral.
Decorativa: não há texto sobre ela, então não há contraste a cumprir aqui — é
por isso que a aba pode chegar ao âmbar, que o numeral não pode. */
.sm-care::before {
content: "";
position: absolute;
inset-inline: var(--wc-radius-card);
top: -6px;
height: 6px;
border-radius: var(--wc-radius-full) var(--wc-radius-full) 0 0;
background: var(--sm-care-tab, var(--wc-gradient-summit));
}
.sm-care-num {
font-family: var(--wc-font-display);
font-size: var(--wc-text-display-l);
line-height: var(--wc-text-display-l-lh);
/* Semibold, down from bold, because that is the weight every title on the
page carries — the ask was to match the titles, not merely the face. */
font-weight: var(--wc-weight-semibold);
letter-spacing: var(--wc-text-display-l-ls);
/* Still reserves the width of the widest value so the count-up doesn't
reflow. Crimson Pro ships tnum, so this survives the change of face. */
font-variant-numeric: tabular-nums;
}
/* Os três primeiros tempos da mesma régua dos cards de estatística. Estes
números são conteúdo, então cada um precisa dos 3:1 que a AA pede para texto
grande: azul e malva passam na cor original (3,41:1); o coral só passa na
versão -deep, porque na forma original mede 2,43:1.
Numeral e aba de cada card vêm no mesmo bloco, e não em duas listas, porque um
depende do outro: trocar a cor de um numeral sem trocar a aba quebra o
pareamento. O teto de contraste vale só para o numeral. */
.sm-care:nth-child(1) {
--sm-care-tab: linear-gradient(
90deg,
var(--wc-summit-blue),
var(--wc-summit-mauve)
);
}
.sm-care:nth-child(1) .sm-care-num {
color: var(--wc-summit-blue);
}
.sm-care:nth-child(2) {
--sm-care-tab: linear-gradient(
90deg,
var(--wc-summit-mauve),
var(--wc-summit-coral)
);
}
.sm-care:nth-child(2) .sm-care-num {
color: var(--wc-summit-mauve);
}
.sm-care:nth-child(3) {
--sm-care-tab: linear-gradient(
90deg,
var(--wc-summit-coral-deep),
var(--wc-summit-amber)
);
}
.sm-care:nth-child(3) .sm-care-num {
color: var(--wc-summit-coral-deep);
}
.sm-care-label {
margin-top: var(--wc-space-3);
font-size: var(--wc-text-body);
line-height: var(--wc-text-body-lh);
font-weight: var(--wc-weight-medium);
color: var(--wc-text-ink);
}
.sm-care-source {
margin-top: var(--wc-space-4);
padding-top: var(--wc-space-3);
border-top: 1px solid var(--wc-border-default);
font-family: var(--wc-font-mono);
font-size: var(--wc-text-micro);
line-height: var(--wc-text-micro-lh);
color: var(--wc-text-muted);
}
.sm-care-close {
max-width: 78ch;
margin: var(--wc-space-12) auto 0;
font-size: var(--wc-text-body-l);
line-height: var(--wc-text-body-l-lh);
color: var(--wc-text-secondary);
}
.sm-care-close b {
color: var(--wc-text-ink);
font-weight: var(--wc-weight-semibold);
}
/* ============================================================ DEPOIMENTOS */
.sm-quote {
flex: 0 0 clamp(280px, 30%, 400px);
scroll-snap-align: start;
display: flex;
flex-direction: column;
padding: var(--wc-space-8);
background: var(--wc-surface-paper);
border: 1px solid var(--wc-border-default);
border-radius: var(--wc-radius-card);
}
.sm-quote::before {
content: "\201C";
font-family: var(--wc-font-display);
font-size: var(--wc-text-display-m);
line-height: 0.6;
color: var(--wc-summit-blue);
}
.sm-quote p {
margin-top: var(--wc-space-6);
font-size: var(--wc-text-body);
line-height: var(--wc-text-body-lh);
color: var(--wc-text-ink);
}
.sm-quote footer {
margin-top: auto;
padding-top: var(--wc-space-6);
}
.sm-quote-name {
padding-top: var(--wc-space-5);
border-top: 1px solid var(--wc-border-default);
font-size: var(--wc-text-caption);
font-weight: var(--wc-weight-semibold);
color: var(--wc-text-ink);
}
.sm-quote-meta {
margin-top: var(--wc-space-1);
font-family: var(--wc-font-mono);
font-size: var(--wc-text-micro);
line-height: var(--wc-text-micro-lh);
color: var(--wc-text-muted);
}
/* ============================================================ PASSAPORTES */
/* stretch, e não o align-items:start que estava aqui. Com start cada card se
media pelo próprio conteúdo, e como o Experience lista doze itens contra
seis do Standard, os dois terminavam em alturas diferentes — preço, botão e
nota de pagamento seguro caíam em três alturas distintas de um card para o
outro, que são justamente as três linhas que o leitor compara lado a lado.
Esticados, os dois fecham na mesma base, e o margin-top:auto do
.sm-plan-foot faz o resto: o rodapé encosta no fundo do seu card, que agora
é o mesmo fundo nos dois. O alinhamento sai da geometria — sem altura fixa e
sem número mágico para manter em dia quando a lista mudar.
Funciona porque os dois rodapés são iguais em estrutura e a nota é a mesma
palavra por palavra, em colunas de mesma largura, logo mesma altura de
quebra. Se um dia as notas divergirem, o alinhamento de baixo para cima leva
junto o botão e o preço; aí é o rodapé que precisa de altura própria. */
.sm-plans {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--wc-space-6);
margin-top: var(--wc-space-12);
align-items: stretch;
}
.sm-plan {
display: flex;
flex-direction: column;
padding: var(--wc-space-10);
background: var(--wc-surface-paper);
border: 1px solid var(--wc-border-default);
border-radius: var(--wc-radius-panel);
}
/* ==================================================== PAINÉIS EM DEGRADÊ
Skin compartilhada dos três painéis que usam o degradê como fundo: o
passaporte Experience, o CTA de patrocínio e o CTA do WhatsApp. Uma skin em
vez de três, para que "painel em degradê" signifique exatamente uma coisa na
página.
A posição dela no arquivo é obrigatória, não arbitrária, e está espremida
entre duas exigências opostas. Todos os seletores envolvidos têm a mesma
especificidade, então quem vence é quem vem por último:
- precisa vir DEPOIS do .sm-plan, cujo `background:` é shorthand e zera o
background-image de quem vier antes. Com a skin acima, o Experience volta
a ser um card branco;
- precisa vir ANTES dos três painéis, porque é neles que --sm-veil e
--sm-panel-gradient são escolhidos. Com a skin abaixo, o padrão de 60%
desfaz a escolha de cada um.
Nos dois casos o erro não aparece como erro: aparece como um painel que
teimosamente continua pastel, ou branco. Se esta skin precisar mudar de
lugar, é este par de restrições que manda.
O que a skin fixa para todos é a estrutura: papel opaco por baixo, o degradê
do evento por cima, tinta navy. Duas coisas cada painel decide por conta
própria — a força, no --sm-veil, e a direção da rampa, no
--sm-panel-gradient. Variáveis em vez de declarações reescritas para que
trocar um painel não custe repetir a estrutura inteira.
60% é a lavagem para papel, na mesma lógica da esfera pastel da arte: o azul
lê #c0cbef, o malva #dcc6d6, o coral #fccab8, o amarelo #fceabc. Lavar para
papel e não para navy é o que faz isso funcionar — uma versão anterior com
véu navy batia o mesmo alvo de contraste mas arrastava a ponta quente para
marrom e oliva; o papel mantém todos os matizes reconhecíveis.
Hoje os três ficam no mesmo lugar, e nenhum é o padrão: véu de 40% de papel,
que é a rampa a 60% de opacidade. Os dois CTAs já foram crus e o Experience já
foi lavado a 60%; a Tiana pediu em 2026-09-30 que lessem igual. O padrão de 60%
de véu continua escrito aqui de propósito — um painel novo entra lavado e
precisa argumentar para sair —, mas o valor que a página usa hoje é 40%, e
é ele que um quarto painel deve copiar para não destoar.
A tinta é navy em qualquer força, e por isso não muda com o véu. Medido na rampa
ponto a ponto, não só nos stops: lavada a 60%, o navy vai de 11,91:1 a 15,59:1;
na força em uso, a 40% de véu, de 9,30:1 a 14,28:1; crua, de 5,30:1 a 11,93:1.
As três passam a AA inteiras, inclusive para texto corrido. O branco não passa
em nenhuma — 1,29:1 a 1,99:1 na força em uso, e no máximo 3,49:1 na crua.
O que a força cobra é outra coisa, e vale saber antes de mexer no véu de um
painel novo: qualquer cor da própria rampa usada como detalhe some. Sobre a
rampa crua o azul da paleta chega a 1,00:1 — o mesmo azul contra ele mesmo — e
lavá-la não resolve, porque a rampa e o detalhe clareiam juntos: a 60% de força
o mesmo azul ainda fica em 1,71:1. Detalhe dentro de painel em degradê é navy,
sem exceção. */
.sm-banner,
.sm-whats,
.sm-plan-featured {
--sm-veil: color-mix(in srgb, var(--wc-surface-paper) 60%, transparent);
--sm-panel-gradient: var(--wc-gradient-summit);
/* Paper underneath so a stale token file leaves the panel merely plain
rather than an unreadable slab of colour. */
background-color: var(--wc-surface-paper);
background-image:
linear-gradient(var(--sm-veil), var(--sm-veil)),
var(--sm-panel-gradient);
color: var(--wc-text-navy);
}
/* O fundo e a tinta deste card vêm da skin logo acima, reaproveitada em vez de
reescrita porque é o único tratamento de degradê-como-fundo que a página já
tem medido. Deste card vêm as duas variações que a skin permite.
A identidade a 60% da força da arte: véu de 40% de papel por cima, que é o
mesmo que dizer degradê a 60% de opacidade sobre branco. Foi aqui que essa
força apareceu primeiro — a identidade ainda lê como identidade, mas este é o
painel com mais texto corrido sobre degradê da página inteira e ele respira —
e depois os dois CTAs vieram para o mesmo valor. O navy vai de 9,30:1 a
14,28:1, folgado a AA nos doze itens de 16px da lista; o branco continua fora,
no máximo 1,99:1.
Diagonal em vez de régua, e isso é geometria do card, não gosto: ele é muito
mais alto que largo. A régua a 90° atravessa a coluna estreita e resolve a
rampa inteira em poucos centímetros, deixando cada linha de texto sobre uma
cor diferente da linha de cima. A 165° a rampa desce junto com a leitura — o
azul segura o cabeçalho, o quente chega no preço.
border-color transparente em vez de border: none — preserva a mesma caixa de
1px do card Standard ao lado, senão os dois saem 2px fora de registro. */
.sm-plan-featured {
--sm-veil: color-mix(in srgb, var(--wc-surface-paper) 40%, transparent);
--sm-panel-gradient: var(--wc-gradient-summit-diagonal);
position: relative;
border-color: transparent;
}
/* Halo ambiente a 10% e muito borrado. Nunca foi decoração: é a elevação deste
card, o que o separa do papel no lugar da hairline que o Standard tem. Sem
contexto de empilhamento aqui, então fica atrás do fundo opaco do card e só
vaza pelas bordas.
Herda a diagonal do próprio card em vez da régua a 90°: o halo só existe nas
bordas, e com ângulos diferentes o vazamento saía de uma cor e a borda ao
lado dele de outra. */
.sm-plan-featured::before {
content: "";
position: absolute;
inset: calc(-1 * var(--wc-space-6));
z-index: -1;
border-radius: inherit;
background: var(--wc-gradient-summit-diagonal);
opacity: 0.1;
filter: blur(var(--wc-blur-lg));
}
.sm-plan-lote {
font-size: var(--wc-text-micro);
line-height: var(--wc-text-micro-lh);
letter-spacing: var(--wc-text-micro-ls);
text-transform: uppercase;
font-weight: var(--wc-weight-semibold);
color: var(--wc-text-muted);
}
/* Navy cheio, não uma versão esmaecida — mesma decisão do parágrafo de
.sm-whats e pelo mesmo motivo: esta coluna atravessa três matizes do
degradê e uma tinta rebaixada afinaria de forma desigual ao longo dela.
Medido sobre a rampa a 60%, navy sustenta 9,30:1 no pior ponto e passa a AA
para texto normal; --wc-text-muted não chega perto. A hierarquia contra o
nome do passaporte continua vindo do tamanho, do caixa-alta e do peso. */
.sm-plan-featured .sm-plan-lote {
color: var(--wc-text-navy);
}
.sm-plan-name {
margin-top: var(--wc-space-2);
font-family: var(--wc-font-display);
font-size: var(--wc-text-display-m);
line-height: var(--wc-text-display-m-lh);
letter-spacing: var(--wc-text-display-m-ls);
font-weight: var(--wc-weight-semibold);
color: var(--wc-text-navy);
}
.sm-plan-list {
margin-top: var(--wc-space-8);
display: flex;
flex-direction: column;
gap: var(--wc-space-4);
}
/* 14 → 16px: caption sobe para body, e os 2px pedidos caem exatos num degrau da
rampa. É a mesma correção que os cards da seção de estrutura levaram — o que
estava escrito como legenda é, nos dois casos, a lista que decide a compra.
Doze itens em caption é justamente onde o tamanho pequeno mais cobra. */
.sm-plan-list li {
position: relative;
padding-left: var(--wc-space-6);
font-size: var(--wc-text-body);
line-height: var(--wc-text-body-lh);
color: var(--wc-text-secondary);
}
/* Sobe de --wc-text-secondary para navy porque o secundário não tem chance
sobre a rampa: mesmo a 60% ele fica entre 2,81:1 e 4,32:1 e não passa a AA
em ponto nenhum. Efeito colateral desejável: a lista do card em destaque
fica mais densa que a do Standard, que é justamente a leitura pretendida. */
.sm-plan-featured .sm-plan-list li {
color: var(--wc-text-navy);
}
/* O 0.42em que estava aqui foi calibrado para a caixa de linha de caption
(14px × 1.4). Em body (16 × 1.55) a caixa cresce de 19,6 para 24,8px e um
deslocamento fixo em em não acompanha: o ponto subiria para 2,7px acima do
meio da linha, que num marcador de 6px é metade dele fora de lugar.
Metade da caixa de linha menos o raio, que é o centro exato, e daí 1px para
cima — que é onde o ponto estava em relação à linha antes desta mudança. A
correção existe porque o meio geométrico da caixa não é o meio óptico do
texto: as descidas puxam a caixa para baixo, e um marcador centrado nela
parece baixo ao lado da primeira linha. Na unidade lh, acompanha qualquer
tamanho ou entrelinha que esta lista venha a ter. */
.sm-plan-list li::before {
content: "";
position: absolute;
left: 0;
top: calc(0.5lh - 4px);
width: 6px;
height: 6px;
border-radius: var(--wc-radius-full);
background: var(--wc-summit-blue);
}
/* Navy, e é o caso mais literal do problema que o degradê como fundo cria: o
topo deste card É o azul da paleta lavado, então um marcador azul ali mede
1,71:1 — praticamente a mesma cor contra ela mesma, doze pontos que somem. Com
o véu zerado eram 1,00:1 exatos; a 60% continua ilegível, então a regra fica.
Navy é a única saída que não inventa cor: é a tinta que o resto do card já
usa, e é a única da paleta que não aparece em ponto nenhum da rampa. O
Standard ao lado continua com o marcador azul, sobre papel, onde ele é
visível e onde a cor ainda diz alguma coisa. */
.sm-plan-featured .sm-plan-list li::before {
background: var(--wc-text-navy);
}
.sm-plan-foot {
margin-top: auto;
padding-top: var(--wc-space-10);
}
/* Price is the number the reader compares between the two cards. */
.sm-price {
display: flex;
align-items: baseline;
justify-content: center;
gap: var(--wc-space-1);
font-family: var(--wc-font-mono);
color: var(--wc-text-navy);
}
.sm-price-x {
font-size: var(--wc-text-body);
color: var(--wc-text-muted);
}
.sm-plan-featured .sm-price-x {
color: var(--wc-text-navy);
}
.sm-price-int {
font-size: var(--wc-text-display-xl);
line-height: 1;
font-weight: var(--wc-weight-medium);
letter-spacing: -0.03em;
}
.sm-price-cents {
font-size: var(--wc-text-body-l);
font-weight: var(--wc-weight-medium);
}
.sm-plan-foot .sm-btn {
margin-top: var(--wc-space-8);
}
.sm-plan-safe {
margin-top: var(--wc-space-4);
text-align: center;
font-size: var(--wc-text-micro);
line-height: var(--wc-text-micro-lh);
color: var(--wc-text-muted);
}
/* Masked rather than inlined so the icon colour follows the surrounding text,
which differs between the featured plan and the rest. The prefixed set is
required: Safari still needs -webkit-mask-* and renders nothing without it. */
.sm-plan-safe::before {
content: "";
display: inline-block;
vertical-align: -2px;
width: 12px;
height: 12px;
margin-right: var(--wc-space-2);
background: currentColor;
-webkit-mask-image: url("https://summit.wecann.academy/wp-content/uploads/2026/10/lock.svg");
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-image: url("https://summit.wecann.academy/wp-content/uploads/2026/10/lock.svg");
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
}
.sm-plan-featured .sm-plan-safe {
color: var(--wc-text-navy);
}
/* ============================================================ GARANTIAS */
.sm-guard-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--wc-space-6);
margin-top: var(--wc-space-12);
}
.sm-guard {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--wc-space-8) var(--wc-space-6);
background: var(--wc-surface-paper);
border: 1px solid var(--wc-border-default);
border-radius: var(--wc-radius-card);
}
/* Soft brand disc so the icon reads as an object, not a stray glyph. */
.sm-guard-icon {
display: grid;
place-items: center;
width: 64px;
height: 64px;
border-radius: var(--wc-radius-full);
background: color-mix(in srgb, var(--wc-summit-blue) 10%, transparent);
/* The inlined paths are currentColor, so this is what tints them. */
color: var(--wc-summit-blue);
}
/* Inlined rather than masked: these were mask-image on an external SVG whose
paths are fill="currentColor", which WebKit resolves to nothing, so the
mask came out empty and the icons vanished in Safari. Inline, currentColor
resolves against this element, so the colour still rides a token. */
.sm-guard-icon svg {
width: 32px;
height: 32px;
/* Each source viewBox has its own ratio; contain keeps them optically equal. */
object-fit: contain;
}
.sm-guard p {
margin-top: var(--wc-space-5);
font-size: var(--wc-text-body);
line-height: var(--wc-text-body-lh);
font-weight: var(--wc-weight-semibold);
color: var(--wc-text-navy);
text-wrap: balance;
}
/* ============================================================ BANNER PATROCÍNIO */
/* Fundo e tinta vêm da skin dos painéis em degradê, na seção de passaportes.
Mesma força do card Experience por decisão da Tiana, 2026-09-30: véu de 40%
de papel, que é dizer degradê a 60% de opacidade sobre branco. Este painel já
esteve em força total, com o argumento de que o bloco de patrocínio é o lugar
que vende a marca e por isso mostraria a identidade como ela é impressa. O
pedido foi o oposto — que os três painéis em degradê da página lessem igual —
e uniformidade entre painéis vence ênfase de um painel só.
Mantida a régua a 90°, e não a diagonal do Experience: aquele card é muito
mais alto que largo, este bloco é o contrário. A 165° num bloco largo e baixo
a rampa vira quase vertical e a leitura da identidade se perde; o próprio
token documenta a régua como a leitura canônica para bloco largo.
O botão continua .sm-btn-solid (ver a nota no fim da seção do WhatsApp) e o
título continua navy pela regra explícita mais abaixo — a lavagem só melhora
os dois casos. */
.sm-banner {
--sm-veil: color-mix(in srgb, var(--wc-surface-paper) 40%, transparent);
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--wc-space-8);
padding: var(--wc-space-16) var(--wc-space-8);
text-align: center;
border-radius: var(--wc-radius-panel);
overflow: hidden;
}
/* ======================================================== AMBIENT GLOW
A soft circular brand glow pooled against one edge of a section. This is the
ambient-glow placement the system sanctions for the gradient — diffuse, low
opacity, never a solid fill — so it stays inside the two-placements rule even
though it spans a full section.
Base + modificador de lado em vez de duas regras completas: o círculo é
radialmente simétrico, então virar de lado é só trocar a âncora e o sinal do
translate. Tudo que define a aparência mora um lugar só, e uma terceira
seção herda o mesmo degradê escolhendo a âncora.
Written as a utility rather than a section rule: hoje só a Comissão o usa,
depois que a Ultravel passou a se diferenciar pela faixa cinza e dispensou o
halo, mas o par continua como par — o lado esquerdo não é código morto, é a
metade da escolha que a próxima seção faz ao herdar. O layout específico de
cada bloco continua morando com o bloco. */
.sm-glow-left,
.sm-glow-right {
position: relative;
/* The glow is bled past the section edge; without this it would widen the
document and produce a horizontal scrollbar. */
overflow: hidden;
/* Keeps ::before behind the content without a negative z-index, which would
otherwise punch through the section's own background. */
isolation: isolate;
}
.sm-glow-left::before,
.sm-glow-right::before {
content: "";
position: absolute;
z-index: -1;
/* Anchored off-canvas so only the outer falloff of the circle reaches the
copy — the dense core never sits under text. O lado vem do modificador. */
top: 50%;
/* Sized off the section's own height, not a fixed width, so the circle never
reaches the top or bottom edge — overflow:hidden was otherwise cutting it
into a hard horizontal line, measured as a 12/255 step at both section
boundaries and plainly visible on white. min() keeps the cap so a tall
section gets a glow, not a wall. */
height: min(820px, 90%);
width: auto;
aspect-ratio: 1;
/* Blue core into coral, following the identity's own left-to-right order,
then out to nothing. Peaks at 20%/9% rather than the usual 10% because
blur() plus the radial falloff eats most of it before it reaches any
glyph. On paper the densest point still leaves --wc-text-secondary at
4.56:1 and navy at 15.1:1; sobre a faixa rebaixada o mesmo ponto denso cai
para 4.13:1, abaixo do mínimo AA.
É por isso que o halo só vai em seção de fundo branco. O número é o pior
caso — texto encostado na âncora — e a única seção que o usa hoje não
chega perto dele, mas ele é o teto que decide onde o halo pode ir.
Four stops, and alpha reaching zero at 100% rather than 70%, because a
short ramp ending inside the circle left a legible arc on the render —
the eye finds the boundary of a fill long before it finds the fill. */
/* closest-side, and no border-radius. This is the whole bug behind the rim
that kept showing up: a bare `circle` sizes to farthest-corner, so in a
square box the ramp only reaches ~71% of the way through by the time it
hits the mid-edge, and border-radius then clipped the shape at exactly
that point — a hard cut at ~4% alpha, measured as a 10/255 step. Sizing
the gradient to closest-side lands alpha 0 on the inscribed circle, so the
shape ends where the colour ends and no clip is needed at all. */
background-image: radial-gradient(
circle closest-side at 50% 50%,
color-mix(in srgb, var(--wc-summit-blue) 20%, transparent) 0%,
color-mix(in srgb, var(--wc-summit-mauve) 15%, transparent) 30%,
color-mix(in srgb, var(--wc-summit-coral) 10%, transparent) 55%,
color-mix(in srgb, var(--wc-summit-coral) 4%, transparent) 78%,
transparent 100%
);
/* No filter: blur(). It was compensating for a ramp that ended abruptly
inside the circle, and a blur spreads roughly 3x its radius past the
element box — which the clip above would then cut, reintroducing the edge
this rule exists to avoid. Five stops decaying to zero at the rim do the
same job with exact geometry and no raster layer. */
pointer-events: none;
}
/* Só a âncora. 32% do próprio diâmetro sai da seção, que é o que mantém o
núcleo denso fora da caixa de texto e deixa só a cauda entrar. */
.sm-glow-left::before {
left: 0;
transform: translate(-32%, -50%);
}
.sm-glow-right::before {
right: 0;
transform: translate(32%, -50%);
}
/* ============================================================ BRAND ORB
O orbe iridescente da identidade, exportado do Figma (assets/bg-orb.svg).
Diferente do .sm-glow acima em espécie, não só em grau: o glow é uma poça de
cor, isto é um objeto — tem uma esfera perolada legível no meio, com
highlight e sombra. Por isso mora numa classe própria em vez de virar mais um
modificador de lado do glow; trocar um pelo outro não é uma escolha de
posição, é uma escolha de composição.
SVG, não o PNG que veio junto: medido lado a lado com bg-degrade-desktop.png,
a diferença média é 0,41/255 (máx. 3) — visualmente idêntico — por 5,9 KB em
vez de 385 KB, e um arquivo só no lugar de um por breakpoint. Os filtros de
desfoque e os mix-blend-mode do export do Figma resolvem dentro do SVG porque
ele é rasterizado em contexto isolado quando entra por background-image. */
.sm-orb {
position: relative;
/* Sem overflow aqui de propósito. O ::before cobre exatamente a seção e o
sangramento acontece dentro do próprio background — a área de pintura já
recorta o que passa da caixa. Um overflow:hidden/clip só acrescentaria um
contêiner de rolagem e o risco de cortar anel de foco. */
isolation: isolate;
}
.sm-orb::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
/* Geometria do arquivo de origem, preservada, mas expressa como background de
uma caixa do tamanho da seção em vez de um elemento de 1692px centrado. O
desenho na tela é idêntico; a diferença é que agora 0% e 100% do elemento
são a borda de cima e a de baixo da seção, que é o que a máscara abaixo
precisa para se ancorar.
1713x1692 em -417px põe o centro da esfera em x=440 num viewport de 1440 —
à esquerda do eixo, que é a direção de arte do arquivo. Âncora em px, não
em %, para que em telas largas a esfera continue colada à esquerda em vez
de ser arrastada para o meio do texto. */
background-image: url("https://summit.wecann.academy/wp-content/uploads/2026/10/bg-orb.svg");
background-repeat: no-repeat;
background-position: -417px center;
background-size: 1713px 1692px;
/* O orbe é três vezes mais alto que a seção, então o recorte corta o meio
dele e as duas pontas viram linhas horizontais. Medido antes desta máscara:
degrau de 13/255 na borda de cima, contra 0 na mesma linha fora do orbe —
ou seja, artefato do corte, não a emenda entre seções. Mesmo defeito que já
tinha aparecido no .sm-glow, e visível pelo mesmo motivo: o olho encontra o
limite de um preenchimento muito antes de encontrar o preenchimento.
A dissolvida come 10% da altura em cada ponta. É a única licença que tomei
em relação ao arquivo de origem, que leva a cor até a borda — lá é uma
prancha isolada, aqui tem uma seção branca em cima e a faixa rebaixada
embaixo, e as duas mostrariam o corte.
black e transparent aqui não são cor, são opacidade: numa máscara só o
canal alfa conta e qualquer cor opaca daria o mesmo resultado. Por isso a
palavra-chave em vez de um token — nenhum --wc-* descreveria o que está
acontecendo, e um hex aqui pareceria uma escolha de paleta que não é. */
mask-image: linear-gradient(
to bottom,
transparent 0%,
black 10%,
black 90%,
transparent 100%
);
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0%,
black 10%,
black 90%,
transparent 100%
);
pointer-events: none;
}
/* ============================================================ ULTRAVEL */
/* Rebuilt from the source container's own values rather than re-invented:
Elementor had --display:flex, --flex-direction:row, --justify-content:
space-between, --align-items:center, --gap:0 and --min-height:545px. Flex
with space-between is the load-bearing part — it sizes both items to their
content and pushes them to opposite edges, which is why the original reads
as airy where a grid track kept stretching the copy.
O min-height de 545px do Elementor não veio junto, e essa é a única coisa que
larguei do container de origem. O conteúdo real do bloco mede ~370px, então o
mínimo forçava 174px de vazio, divididos pelo align-items:center em 87px em
cima e 87px embaixo — mais os 96px de padding da seção, o que dava quase
250px de nada abaixo do botão. Era o maior buraco branco da página, e não
aparecia em nenhuma medição de intervalo entre seções porque estava dentro de
uma. Quem dá respiro aqui é o padding da seção, que é o mesmo de todas as
outras; a altura agora é a do conteúdo. */
.sm-partner {
display: flex;
flex-direction: row;
/* Centre, not space-between. The source pushed the two sides to opposite
edges; the pair is now sized by its own content and set as one group in
the middle of the section, which is what the fixed gap below implies —
space-between would simply ignore it at any width above the content. */
justify-content: center;
align-items: center;
/* Specified as a physical measure rather than derived from the scale. Note
it sits 1.4px off the page's 4px spacing grid: CSS resolves 3cm as
113.39px at the fixed 96dpi it assumes, and the nearest grid step is
112px. If you want it back on the grid, 7rem is the value, and it would
want --wc-space-28 added to the ramp rather than written loose here. */
gap: 3cm;
}
/* Back to the semantic token. This had been forced to --wc-text-ink while the
section sat on the sunken band, where the glow dropped secondary to 4.13:1.
On paper the same glow leaves it at 4.56:1, so the override is no longer
buying anything and supporting copy should read as supporting copy. */
.sm-partner-text p {
margin-top: var(--wc-space-5);
font-size: var(--wc-text-body-l);
line-height: var(--wc-text-body-l-lh);
color: var(--wc-text-secondary);
}
.sm-partner-text .sm-btn {
margin-top: var(--wc-space-8);
}
/* Authored line breaks rather than
: as blocks these hold a title or a
paragraph na quebra escolhida, and the mobile rule below flips them back to
inline so narrow viewports rewrap naturally instead of inheriting breaks
chosen for a 1240px column.
Utilitário, não regra da Ultravel: o título dos passaportes usa a mesma
mecânica. Um
daria a mesma quebra no desktop e seria impossível de
desfazer no celular sem marcação extra — é essa reversibilidade que paga a
classe. */
.sm-line {
display: block;
}
/* No plate. The mark has an alpha channel, so it sits straight on the section,
and scale is what makes it read as a partner rather than a stray image —
200px in a box became 400px in the open. flex-shrink is off because
space-between would otherwise compress the mark before the copy. */
.sm-partner-logo {
flex: 0 0 auto;
width: clamp(260px, 30vw, 400px);
height: auto;
}
/* ============================================================ PATROCINADORES */
.sm-tier {
margin-top: var(--wc-space-10);
font-size: var(--wc-text-micro);
line-height: var(--wc-text-micro-lh);
letter-spacing: var(--wc-text-micro-ls);
text-transform: uppercase;
font-weight: var(--wc-weight-semibold);
color: var(--wc-text-muted);
}
.sm-logo-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
/* Linhas mais juntas que colunas. O intervalo horizontal separa marcas
vizinhas e precisa dos 48px; o vertical separa duas linhas da mesma cota,
que devem ler como um bloco só. Com 48px nos dois eixos a fileira Silver
abria quase 150px entre as linhas — as alturas dos logos variam de 37 a
107px e essa variação já soma ao intervalo — e as duas metades pareciam
cotas diferentes. */
gap: var(--wc-space-6) var(--wc-space-12);
margin-top: var(--wc-space-2);
}
/* Quebra de linha explícita para a fileira Silver, que passou de seis para
sete marcas e não cabe mais numa linha: 1.106px de logo mais seis intervalos
de 48px pedem 1.394px numa coluna de 1.240.
A quebra natural entregava 6+1 — a sétima marca sozinha embaixo,
centralizada, lendo como cota separada ou como sobra. Forçada aqui, a
fileira sai 4+3: Alma Lab, Remederi, Eurofarma e Sensia em cima; FQM, CR
Wellness e Biosativa embaixo.
Vale registrar que 4+3 não é a divisão mais equilibrada em mancha — dá
829px em cima contra 517px embaixo, enquanto um 3+4 daria 610/736. Os logos
não têm largura uniforme, então equilibrar por contagem desequilibra por
largura, e vice-versa. A escolha aqui foi por contagem: é o agrupamento
pedido, e tem a seu favor coincidir com a quebra natural entre 768 e 1024px,
o que dá à fileira o mesmo desenho em toda a faixa de desktop.
Um vão de flex com base 100% e altura zero, e não um contêiner por linha:
assim a fileira continua sendo uma lista só no HTML — a ordem das marcas não
fica presa a uma diagramação — e a regra se apaga sozinha no mobile, onde a
coluna estreita já reparte os logos por conta própria. Quando entrar a
oitava marca, é esta linha que sai. */
.sm-logo-break {
flex-basis: 100%;
height: 0;
}
/* Heights are per-logo because each file carries a different amount of its own
whitespace; these values equalise the optical mark, not the box. */
.sm-logo-row img {
width: auto;
height: 42px;
object-fit: contain;
}
.sm-logo-row img[src$="usahemp.svg"] {
height: 180px;
}
.sm-logo-row img[src$="ache.svg"] {
height: 58px;
}
.sm-logo-row img[src$="mantecorp.svg"] {
height: 38px;
}
.sm-logo-row img[src$="almalab.webp"] {
height: 60px;
}
.sm-logo-row img[src$="remederi.svg"] {
height: 80px;
}
.sm-logo-row img[src$="sensia.webp"] {
height: 37px;
}
.sm-logo-row img[src$="fqm.png"] {
height: 107px;
}
.sm-logo-row img[src$="biosativa.webp"] {
height: 52px;
}
/* ============================================================ FAQ */
.sm-faq {
margin-top: var(--wc-space-10);
display: flex;
flex-direction: column;
gap: var(--wc-space-3);
}
.sm-faq-item {
border: 1px solid var(--wc-border-default);
border-radius: var(--wc-radius-card);
background: var(--wc-surface-paper);
overflow: hidden;
}
.sm-faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wc-space-5);
padding: var(--wc-space-5) var(--wc-space-6);
font-size: var(--wc-text-body);
font-weight: var(--wc-weight-medium);
color: var(--wc-text-ink);
cursor: pointer;
list-style: none;
}
.sm-faq-item summary::-webkit-details-marker {
display: none;
}
.sm-faq-item summary::after {
content: "";
flex-shrink: 0;
width: 9px;
height: 9px;
border-right: 1.5px solid var(--wc-summit-blue);
border-bottom: 1.5px solid var(--wc-summit-blue);
transform: rotate(45deg) translateY(-2px);
transition: transform var(--wc-duration-base) var(--wc-ease-out);
}
.sm-faq-item[open] summary::after {
transform: rotate(-135deg) translateY(-2px);
}
.sm-faq-item[open] summary {
color: var(--wc-text-navy);
}
.sm-faq-body {
padding: 0 var(--wc-space-6) var(--wc-space-6);
}
.sm-faq-body p {
padding-top: var(--wc-space-5);
border-top: 1px solid var(--wc-border-default);
font-size: var(--wc-text-caption);
line-height: 1.6;
color: var(--wc-text-secondary);
}
/* ============================================================ WHATSAPP */
.sm-whats {
/* Mesma força do card Experience e do banner de patrocínio, por decisão da
Tiana em 2026-09-30: os três painéis em degradê da página leem igual, a 60%
de opacidade da rampa. Este painel já esteve em força total; o véu do skin
ser uma variável é o que faz a volta custar uma linha.
Navy no pior ponto: 9,30:1 aqui, contra 5,30:1 quando o degradê era cru.
Passava a AA nas duas forças, então a lavagem não foi acessibilidade — foi
uniformidade. Régua a 90°, não a diagonal do Experience, pelo mesmo motivo
do banner: bloco largo e baixo. */
--sm-veil: color-mix(in srgb, var(--wc-surface-paper) 40%, transparent);
position: relative;
isolation: isolate;
padding: var(--wc-space-16) var(--wc-space-10);
text-align: center;
border-radius: var(--wc-radius-panel);
overflow: hidden;
}
/* Navy, pelo mesmo motivo do .sm-whats abaixo: sobre esta rampa o branco não
existe como opção. Na força em uso, a 60% de opacidade, ele fica entre 1,29:1
e 1,99:1; mesmo crua a rampa só chegava a 3,41:1 no azul. Não passa em ponto
nenhum da faixa, nem como texto grande, em nenhuma das forças — ou seja, mexer
no véu nunca devolve o branco. Regra explícita para a intenção sobreviver. */
.sm-banner .sm-h2 {
color: var(--wc-text-navy);
}
/* O .sm-whats era branco. Voltou a navy, e a paleta nova é que obrigou: a rampa
do evento é clara de ponta a ponta. Na força em uso o branco fica entre 1,29:1
e 1,99:1, e lavar mais só piora — quanto mais papel, mais clara a rampa. Nem
os 3:1 de texto grande do título. O navy no mesmo percurso vai de 9,30:1 a
14,28:1 e passa inteiro, título e parágrafo.
Não é uma preferência trocada por outra: com esta rampa, branco aqui não é uma
opção que custa caro, é uma opção que não existe em força nenhuma. Degradê do
evento como fundo e texto legível só coexistem com tinta escura. */
.sm-whats .sm-h2 {
color: var(--wc-text-navy);
}
.sm-whats p {
max-width: 54ch;
margin: var(--wc-space-5) auto 0;
font-size: var(--wc-text-body-l);
line-height: var(--wc-text-body-l-lh);
/* Navy cheio, sem esmaecer: este parágrafo atravessa três matizes do degradê,
e uma tinta rebaixada afinaria de forma desigual ao longo dele. A
hierarquia contra o título vem da família e do tamanho, não de uma tinta
mais fraca. */
color: var(--wc-text-navy);
}
.sm-whats .sm-btn {
margin-top: var(--wc-space-8);
}
/* Nenhuma regra de botão aqui de propósito — os dois painéis escolhem a
variante no HTML e ela vale por si. O .sm-whats leva .sm-btn-whats, porque
ali o destino é o WhatsApp e isso manda na cor. O .sm-banner leva
.sm-btn-solid, e continua nele depois de o painel voltar a ser lavado.
O argumento é o mesmo do card Experience, que agora está na mesma força: o
.sm-btn-primary é a rampa do evento e o painel também é. Com as duas na mesma
escala de claridade a separação vira só saturação — da ordem de 1,5:1 a 2,3:1
quando o painel era pastel, e menos ainda agora que painel e botão caminham
juntos. Navy chapado é a única cor da paleta que não aparece em ponto nenhum
da rampa, em força nenhuma, então é o único preenchimento que não se dissolve
no fundo qualquer que seja o véu. Por isso a escolha não precisa ser revista
toda vez que a força do painel muda.
O .sm-whats continua sem esse conserto e continua sem borda: o verde fica
entre 1,00:1 e 1,53:1 contra a rampa lavada a 40% de véu, e 1,00 é literal —
existe um ponto na faixa âmbar em que o verde do WhatsApp e o fundo têm a
mesma luminância. Lavar não resolveu: cru era 1,00:1 a 1,76:1, ou seja, o teto
até caiu, porque a rampa clareia na direção do verde. Está abaixo dos 3:1 que
a 1.4.11 pede para o limite de um controle, e o que o segura na tela é matiz,
não luminância. Vale registrar que é isso, e não conformidade — se algum dia
precisar passar, a correção é uma borda navy de 2px, não uma cor nova. */
/* ============================================================ FOOTER */
/* A faixa rebaixada, a mesma que já marca o ritmo claro/escuro da página em
Depoimentos, Garantias e Ultravel — e não um cinza novo. O rodapé não é um
lugar especial o bastante para justificar um quarto tom de fundo; ele é só
mais um degrau do mesmo ritmo, agora no fim.
Funciona como fecho porque a seção do WhatsApp logo acima é branca: a troca
de faixa é o que diz que a página acabou, sem precisar de régua nem de
borda. A tinta continua navy, herdada de quando isto era degradê — sobre
#f2f2f1 ela mede 16,5:1, o número mais folgado que este texto já teve. */
.sm-footer {
padding-block: var(--wc-space-12);
background: var(--wc-surface-sunken);
color: var(--wc-text-navy);
}
.sm-footer-inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--wc-space-6);
}
.sm-footer-left p {
font-size: var(--wc-text-caption);
line-height: var(--wc-text-caption-lh);
}
/* De volta a uma tinta secundária. Esta linha esteve em navy cheio enquanto o
rodapé era degradê, e não por hierarquia: sobre um degradê tinta rebaixada
afina de forma desigual conforme atravessa os matizes, então não havia
escolha. Num fundo chapado a escolha volta, e um CNPJ é informação de
segunda ordem — deve parecer uma. Secondary sobre #f2f2f1 mede 5,2:1, com
folga para os 12px. */
.sm-footer-cnpj {
font-family: var(--wc-font-mono);
font-size: var(--wc-text-micro);
color: var(--wc-text-secondary);
}
.sm-footer-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--wc-space-3);
font-size: var(--wc-text-micro);
}
/* Sublinhado no hover, não mais um degrau de brilho. O estado anterior ia de
72% para 100% de branco — um passo de luminância, possível porque havia
para onde clarear sobre o navy. Num rodapé claro o link já está em navy
cheio, que é a tinta mais escura da paleta: não existe passo acima dele, e
qualquer mudança de cor andaria para trás no contraste. O sublinhado dá o
retorno sem depender de cor, o que também o torna o único estado de hover
da página que sobrevive ao modo de alto contraste. */
.sm-footer-links a:hover {
text-decoration: underline;
}
/* Separadores, não texto: podem ficar rebaixados, e devem — em navy cheio
competiriam com os próprios links que separam. O token de borda e não uma
mistura de navy, agora que o fundo é chapado: estas barras fazem o trabalho
de um divisor, e é esse o papel que --wc-border-strong nomeia. */
.sm-footer-links span {
color: var(--wc-border-strong);
}
/* ============================================================ FLOAT */
.sm-float {
position: fixed;
left: var(--wc-space-6);
bottom: var(--wc-space-6);
z-index: 60;
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: var(--wc-radius-full);
/* Verde, como o CTA do grupo, e não o degradê da marca: os dois abrem o mesmo
WhatsApp, e duas portas para o mesmo lugar pintadas de cores diferentes
custam ao leitor uma comparação que não leva a nada. Glifo em navy pela
mesma medição do .sm-btn-whats — branco aqui daria 1,98:1. */
background-color: var(--wc-external-whatsapp);
color: var(--wc-text-navy);
box-shadow: var(--wc-shadow-raised);
transition: transform var(--wc-duration-base) var(--wc-ease-out),
background-color var(--wc-duration-base) var(--wc-ease-out);
}
.sm-float:hover {
background-color: color-mix(in srgb, var(--wc-external-whatsapp) 88%, var(--wc-text-navy));
}
.sm-float:hover {
transform: translateY(-2px);
}
/* ============================================================ PALESTRANTES
A página de palestrantes. Tudo acima é compartilhado com a home — header,
hero, botões, footer, tokens — e o que fica aqui é só o que não existe lá:
a grade dos 55 cards e o mecanismo de "leia mais".
A grade NÃO reusa .sm-person-row. Aquela fileira é um trio fixo de três
colunas com bios de três linhas escritas sob medida; aqui são 55 pessoas com
bios que vão de duas linhas a uma lista de publicações, e o card precisa
abrir. São componentes diferentes que por acaso se parecem. */
/* O hero da home é um vídeo de 640px porque ele é a primeira coisa do site.
Aqui é cabeçalho de uma página interna: o conteúdo é a grade, e um hero de
altura cheia só empurraria os palestrantes para fora da primeira tela. */
.sm-hero-short {
min-height: 420px;
padding-block: var(--wc-space-16);
}
/* Mesmo lugar do vídeo na home, parado. Um arquivo de 12 MB para servir de
fundo a uma página de 55 fotos não se paga — o poster já é o primeiro quadro
do vídeo, então a página abre com a mesma imagem que a home. */
.sm-hero-still {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
}
.sm-speaker-grid {
display: grid;
/* Quatro por linha, como na página atual do WordPress. */
grid-template-columns: repeat(4, 1fr);
gap: var(--wc-space-6);
/* Cada card fecha na própria altura. Sem isto, abrir a bio de um estica os
dois vizinhos da mesma linha e pendura um vazio no pé dos dois. */
align-items: start;
}
.sm-speaker {
display: flex;
flex-direction: column;
border: 1px solid var(--wc-border-default);
border-radius: var(--wc-radius-card);
background: var(--wc-surface-paper);
overflow: hidden;
}
.sm-speaker-photo {
/* As 55 fotos vêm de origens diferentes mas todas chegaram em 4:5. A razão
fica declarada mesmo assim: é ela que garante que a próxima foto, vinda de
outro lugar, entre na grade em vez de desalinhar a linha inteira. */
aspect-ratio: 4 / 5;
overflow: hidden;
}
.sm-speaker-photo img {
width: 100%;
height: 100%;
object-fit: cover;
/* Sem grayscale aqui, ao contrário do .sm-person-photo da home: as 55 fotos
já chegam em preto e branco da origem. O único pixel colorido é a bandeira
do selo de país, e dessaturar ela apagaria justamente a informação que o
selo existe para dar. */
}
.sm-speaker-body {
display: flex;
flex-direction: column;
padding: var(--wc-space-6);
}
.sm-speaker-name {
font-family: var(--wc-font-display);
font-size: var(--wc-text-title);
line-height: var(--wc-text-title-lh);
font-weight: var(--wc-weight-semibold);
color: var(--wc-text-navy);
}
.sm-speaker-bio {
margin-top: var(--wc-space-3);
font-size: var(--wc-text-caption);
line-height: var(--wc-text-caption-lh);
color: var(--wc-text-secondary);
}
.sm-speaker-bio p + p,
.sm-speaker-bio p + .sm-speaker-pubs-label {
margin-top: var(--wc-space-3);
}
.sm-speaker-bio em {
font-style: italic;
}
.sm-speaker-bio a {
color: var(--wc-text-link);
text-decoration: underline;
text-underline-offset: 2px;
}
/* A lista de publicações. Cinco ou seis referências em parágrafos corridos
viram um bloco cinza em que nada começa nem termina; em lista cada entrada
tem borda, e é assim que uma referência se lê. */
.sm-speaker-pubs-label {
font-weight: var(--wc-weight-semibold);
color: var(--wc-text-ink);
}
.sm-speaker-pubs {
margin-top: var(--wc-space-3);
display: grid;
gap: var(--wc-space-3);
font-size: var(--wc-text-micro);
line-height: 1.5;
}
.sm-speaker-pubs li {
padding-left: var(--wc-space-3);
border-left: 2px solid var(--wc-border-strong);
}
/* ---- Leia mais -------------------------------------------------------
O recorte é aplicado pelo JS, não aqui: sem script a bio aparece inteira e a
página continua inteira. O botão também nasce com [hidden] no HTML e só
aparece nos cards cuja bio realmente transborda — 55 cards, e uns dez têm
bio de duas linhas, onde um "leia mais" não leva a lugar nenhum. */
.sm-speaker.is-clamped .sm-speaker-bio {
max-height: 11rem;
overflow: hidden;
/* Dissolve em vez de cortar. Num corte seco a última linha fica pela metade
e lê como defeito de renderização; dissolvida, ela diz que há mais texto —
que é exatamente o que o botão abaixo oferece. */
mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}
.sm-speaker-toggle {
align-self: flex-start;
margin-top: var(--wc-space-4);
padding: 0;
background: none;
border: 0;
font-family: var(--wc-font-sans);
font-size: var(--wc-text-micro);
line-height: var(--wc-text-micro-lh);
letter-spacing: var(--wc-text-micro-ls);
text-transform: uppercase;
font-weight: var(--wc-weight-semibold);
/* O coral segurado, que é o token feito para quando a rampa precisa ser
tinta sobre papel — o coral cheio mede 2,43:1 aqui e não serviria. */
color: var(--wc-summit-coral-deep);
cursor: pointer;
transition: color var(--wc-duration-base) var(--wc-ease-out);
}
.sm-speaker-toggle:hover {
color: var(--wc-text-navy);
background-color: inherit;
}
.sm-speaker-toggle[hidden] {
display: none;
}
/* Marca a página em que se está. A régua do hover já existe no .sm-nav a::after
e está em opacity 0; aqui ela só fica acesa, em vez de inventar um segundo
jeito de marcar estado na barra. */
.sm-nav a[aria-current="page"] {
color: var(--wc-text-ink);
}
.sm-nav a[aria-current="page"]::after {
opacity: 1;
transform: scaleX(1);
}
/* O fecho da página de palestrantes não tem regra nenhuma aqui, e é de
propósito: desde 2026-10-02 ele é o .sm-banner, o mesmo box em degradê do
bloco de patrocínio da home. Marcação idêntica — .sm-wrap, .sm-banner, um
.sm-h2 e um .sm-btn-solid —, então o painel já chega pronto com véu, raio,
padding e tinta navy.
Antes disso ele passou por .sm-tinted com véu forçado e por .sm-sunken liso,
e as classes .sm-closing-band e .sm-closing-cta que sustentavam essas duas
versões saíram junto. Se o fecho precisar divergir do bloco de patrocínio um
dia, é aqui que a diferença entra — mas enquanto os dois forem o mesmo box,
reescrever qualquer coisa é criar uma segunda fonte para a mesma decisão. */
/* ============================================================ PROGRAMAÇÃO
A grade tem duas escolhas, e elas não são do mesmo tipo. O dia é a escolha
de cima: existe programação nos cinco dias, mas só nos três do meio ela se
divide em palcos — o dia 1 é o jantar e o dia 5 é a corrida, e os dois são
um evento só para todo mundo. Por isso o dia governa o palco e não o
contrário: escolher 28 OUT ou 01 NOV faz o seletor de palco sair de cena,
porque ali não há o que escolher.
O site de origem resolvia isso repetindo as cinco abas de dia dentro de cada
palco — quatro réguas de dia idênticas, e o mesmo jantar escrito quatro
vezes. Aqui a régua de dia é uma só e os dois painéis compartilhados também,
o que além de encolher a página mantém o dia quando o leitor troca de palco:
comparar o que roda às 14h em duas salas é a pergunta que esta página existe
para responder, e no original ela custava duas trocas de aba. */
.sm-prog {
margin-top: var(--wc-space-12);
}
/* O seletor e a grade são um controle e a saída dele, mas moram em
irmãs — e cada uma trazia o respiro cheio da faixa, somando 136px entre a
sala escolhida e o primeiro horário. Encolher o rodapé da seção do seletor
deixa a margem da própria grade como única separação, e a escolha volta a
parecer ligada ao que ela abre. */
.sm-section:has(.sm-prog) {
padding-bottom: var(--wc-space-6);
}
/* ---------------------------------------------------- SELETOR DE DIA */
/* O padding-top abre o espaço da aba que cada pílula selecionada pendura 4px
acima de si. Mora aqui, e não no botão, porque no mobile esta régua vira um
contêiner de rolagem — e rolagem no eixo x recorta o eixo y junto, o que
decapitaria a aba se ela ficasse para fora da caixa. */
.sm-dias {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--wc-space-3);
padding-top: var(--wc-space-1);
}
.sm-dia {
position: relative;
display: flex;
align-items: baseline;
gap: var(--wc-space-3);
padding: var(--wc-space-3) var(--wc-space-5);
border: 1px solid var(--wc-border-default);
border-radius: var(--wc-radius-full);
background: var(--wc-surface-paper);
font: inherit;
cursor: pointer;
transition:
background var(--wc-duration-base) var(--wc-ease-out),
border-color var(--wc-duration-base) var(--wc-ease-out);
}
.sm-dia:hover {
border-color: var(--wc-border-strong);
}
/* Navy chapado no corpo: a régua de dia fica a 24px da régua de palco, que já
carrega um trecho do degradê em cada uma das quatro abas, e duas rampas
cheias nessa distância brigam. O degradê entra só como filete no topo, que é
a mesma marca que o palco selecionado usa — o dia e a sala passam a se
anunciar pelo mesmo gesto, em dois tamanhos. */
.sm-dia[aria-selected="true"] {
background: var(--wc-surface-inverse);
border-color: var(--wc-surface-inverse);
}
/* Aba por fora, como a dos .sm-stat: a lasca assoma acima da pílula em vez de
ser recortada por dentro dela. Recuada 24px de cada lado porque a pílula é
totalmente arredondada e, numa altura de 48px, o raio efetivo é metade
disso — é exatamente onde a borda de cima deixa de ser curva. Encostar antes
faria a aba avançar sobre o arco e sobrar um degrau.
Decorativa por construção: nenhum texto se apoia nela, que é a condição para
a ponta quente da rampa poder aparecer aqui. */
.sm-dia[aria-selected="true"]::before {
content: "";
position: absolute;
inset-inline: var(--wc-space-6);
top: -4px;
height: 12px;
border-radius: var(--wc-radius-full) var(--wc-radius-full) 0 0;
background: var(--wc-gradient-summit);
/* Atrás da pílula, não sobre ela: a lasca é mais alta do que a parte que
aparece, e o navy cobre os 8px de baixo. Assim o degradê emerge de trás da
borda em vez de encostar nela, e não há costura entre os dois.
Funciona porque .sm-dia tem position: relative mas z-index auto, ou seja,
não abre contexto de empilhamento — o -1 desce para o contexto da régua e
fica abaixo do fundo do botão. Dar z-index ao botão quebraria isto. */
z-index: -1;
}
.sm-dia-n {
font-size: var(--wc-text-caption);
color: var(--wc-text-secondary);
}
.sm-dia-d {
font-family: var(--wc-font-mono);
font-size: var(--wc-text-caption);
font-weight: var(--wc-weight-semibold);
letter-spacing: 0.04em;
color: var(--wc-text-navy);
}
.sm-dia[aria-selected="true"] .sm-dia-n {
color: color-mix(in srgb, var(--wc-text-on-inverse) 72%, transparent);
}
.sm-dia[aria-selected="true"] .sm-dia-d {
color: var(--wc-text-on-inverse);
}
/* ---------------------------------------------------- SELETOR DE PALCO */
.sm-palcos {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--wc-space-4);
margin-top: var(--wc-space-6);
}
/* Nos dias 1 e 5 não há palcos. O seletor sai do fluxo em vez de ficar
desabilitado: uma fileira de quatro botões cinzas sugeriria que existe uma
programação por sala naqueles dias e que ela está indisponível, que é o
oposto do que acontece. */
.sm-palcos[hidden] {
display: none;
}
/* As quatro cores dos palcos, declaradas uma vez e lidas por dois lugares: o
botão do seletor e a grade que ele abre. Por isso são classe e não estilo
inline — a mesma sala pinta a aba lá em cima e o ponto de cada palestrante
lá embaixo, e os dois têm de sair da mesma linha.
A sequência é a da régua do evento, uma passada completa em quatro tempos:
azul, malva, coral, âmbar. Cada aba sai da cor do seu palco e caminha para a
do palco seguinte, que é a regra que as abas do .sm-stat já seguem. */
.sm-palco-1 {
--sm-palco-ink: var(--wc-summit-blue);
--sm-palco-tab: linear-gradient(90deg, var(--wc-summit-blue), var(--wc-summit-mauve));
}
.sm-palco-2 {
--sm-palco-ink: var(--wc-summit-mauve);
--sm-palco-tab: linear-gradient(90deg, var(--wc-summit-mauve), var(--wc-summit-coral));
}
.sm-palco-3 {
--sm-palco-ink: var(--wc-summit-coral-deep);
--sm-palco-tab: linear-gradient(90deg, var(--wc-summit-coral-deep), var(--wc-summit-amber));
}
.sm-palco-4 {
--sm-palco-ink: var(--wc-summit-amber);
--sm-palco-tab: linear-gradient(90deg, var(--wc-summit-amber), var(--wc-summit-yellow));
}
.sm-palco {
position: relative;
display: flex;
flex-direction: column;
padding: 0;
text-align: left;
background: var(--wc-surface-paper);
border: 1px solid var(--wc-border-default);
border-radius: var(--wc-radius-card);
font: inherit;
cursor: pointer;
overflow: hidden;
transition:
background var(--wc-duration-base) var(--wc-ease-out),
border-color var(--wc-duration-base) var(--wc-ease-out),
transform var(--wc-duration-base) var(--wc-ease-out);
}
/* Mesma regra das abas do .sm-stat: cada palco carrega um trecho da régua, não
a régua inteira, e os quatro trechos lidos em sequência percorrem a rampa do
evento uma vez. Diferente de lá, a aba é interna à borda — o botão é
clicável e um filete pendurado 6px acima dele ficaria fora do alvo.
Decorativa por construção: não há texto sobre ela. É por isso que o quarto
palco pode usar âmbar e amarelo, que os rótulos não poderiam — a ponta
quente desta rampa é preenchimento, não tinta sobre papel. */
.sm-palco::before {
content: "";
position: absolute;
inset-inline: 0;
top: 0;
height: 4px;
background: var(--sm-palco-tab);
opacity: 0.4;
transition: opacity var(--wc-duration-base) var(--wc-ease-out);
}
.sm-palco[aria-selected="true"]::before {
opacity: 1;
}
.sm-palco:hover {
border-color: var(--wc-border-strong);
}
/* A tinta do estado selecionado é a cor do palco diluída a 6% no papel, nunca
a cor cheia. Com 6% o fundo sai entre #fbfafc e #fffaf7 conforme a sala, e o
texto secundário — o rótulo da trilha, que é o mais apertado dos dois — não
se mexe de forma mensurável contra o papel branco. A cor cheia aqui exigiria
inverter os dois rótulos, e aí âmbar e amarelo não teriam resposta. */
/* O crescimento é escala e não padding ou borda mais grossa: assim nada se
remede, o texto não reflui e as quatro caixas continuam ocupando a mesma
coluna da grade. 4% sobre ~288px dá ~6px de cada lado, dentro dos 16px de
gap — a sala escolhida avança sobre o vão, nunca sobre a vizinha. O z-index
é necessário porque a caixa à direita é pintada depois e sua borda cruzaria
a da selecionada. */
.sm-palco[aria-selected="true"] {
background: color-mix(in srgb, var(--sm-palco-ink) 6%, var(--wc-surface-paper));
border-color: color-mix(in srgb, var(--sm-palco-ink) 50%, var(--wc-border-default));
transform: scale(1.04);
z-index: 1;
}
/* Recorte 2:1 sobre um original de 337×232: sobram 168 das 232 linhas, o
suficiente para a sala continuar legível depois do corte. O 16:9 que seria o
padrão deixaria cada caixa com 262px de altura, e são quatro delas acima da
grade.
Dessaturada quando a sala não está escolhida. Sem isso as quatro fotos
disputam entre si e o estado selecionado — que é a cor do palco diluída a 6%
no papel — some: a diferença de fundo entre escolhida e não escolhida fica
atrás de uma foto colorida em cada uma. Aqui a sala aberta é a única em cor
cheia, e isso se lê de longe. */
.sm-palco-foto {
display: block;
width: 100%;
/* Os atributos width/height do ![]()
viram altura explícita, e altura
explícita vence aspect-ratio. Sem este auto a foto sai nos 232px nativos. */
height: auto;
aspect-ratio: 2 / 1;
object-fit: cover;
/* Puxado para cima do centro: nas quatro fotos o palco está na metade
superior e a plateia ocupa a inferior. Um recorte centrado devolve meia
faixa de nucas. */
object-position: 50% 35%;
filter: grayscale(0.7);
opacity: 0.7;
transition:
filter var(--wc-duration-base) var(--wc-ease-out),
opacity var(--wc-duration-base) var(--wc-ease-out);
}
.sm-palco:hover .sm-palco-foto {
opacity: 0.85;
}
.sm-palco[aria-selected="true"] .sm-palco-foto {
filter: none;
opacity: 1;
}
.sm-palco-txt {
display: flex;
flex-direction: column;
gap: var(--wc-space-2);
padding: var(--wc-space-5);
}
.sm-palco-name {
font-family: var(--wc-font-display);
font-size: var(--wc-text-title);
line-height: var(--wc-text-title-lh);
font-weight: var(--wc-weight-semibold);
color: var(--wc-text-secondary);
transition: color var(--wc-duration-base) var(--wc-ease-out);
}
/* Navy nos quatro, selecionado ou não — a cor do palco vive na aba e no fundo,
nunca no nome. Dois dos quatro (âmbar, amarelo) não medem 3:1 sobre papel em
nenhum tamanho, e colorir só os dois que passam deixaria a fileira
desigual sem que isso significasse nada. */
.sm-palco[aria-selected="true"] .sm-palco-name {
color: var(--wc-text-navy);
}
.sm-palco-track {
font-size: var(--wc-text-micro);
line-height: var(--wc-text-micro-lh);
letter-spacing: var(--wc-text-micro-ls);
text-transform: uppercase;
font-weight: var(--wc-weight-semibold);
color: var(--wc-text-muted);
}
/* ---------------------------------------------------- GRADE DE HORÁRIOS */
.sm-grade {
margin-top: var(--wc-space-10);
border: 1px solid var(--wc-border-default);
border-radius: var(--wc-radius-panel);
background: var(--wc-surface-paper);
overflow: hidden;
}
.sm-grade[hidden] {
display: none;
}
/* 150px na primeira coluna é a medida de "09:00 - 09:50" em Roboto Mono a
14px, com folga — a faixa inteira cabe numa linha e nenhuma hora quebra ao
meio. 280px na terceira é a medida de "Jose A. Martínez Orgado 🇪🇸", o nome
mais longo da grade, pelo mesmo motivo: um nome próprio partido em duas
linhas lê como dois palestrantes. */
/* As três colunas centradas entre si, não encostadas no topo. Só a do meio
cresce — quando ela tem subtítulo, o topo deixava a hora e o palestrante
pendurados na primeira linha e a linha perdia a leitura horizontal. */
.sm-slot {
display: grid;
grid-template-columns: 150px 1fr 280px;
column-gap: var(--wc-space-6);
row-gap: var(--wc-space-2);
align-items: center;
padding: var(--wc-space-4) var(--wc-space-6);
}
.sm-slot + .sm-slot {
border-top: 1px solid var(--wc-border-default);
}
.sm-slot-hora {
font-family: var(--wc-font-mono);
font-size: var(--wc-text-caption);
font-weight: var(--wc-weight-semibold);
letter-spacing: 0.01em;
color: var(--wc-text-navy);
white-space: nowrap;
}
/* Inter, não Crimson Pro. São 158 linhas na página e o leitor varre a coluna
procurando um tema, não lê um título de seção — é exatamente a "dense UI
string" que o papel do Inter descreve. O display aqui também esbarraria no
piso de 18px do Crimson Pro: no corpo que esta coluna pede ele sairia
apertado. */
.sm-slot-titulo {
font-size: var(--wc-text-body);
line-height: 1.35;
font-weight: var(--wc-weight-semibold);
color: var(--wc-text-navy);
}
.sm-slot-desc {
margin-top: var(--wc-space-1);
font-size: var(--wc-text-caption);
line-height: 1.45;
color: var(--wc-text-secondary);
}
.sm-slot-nomes {
display: flex;
flex-direction: column;
gap: var(--wc-space-2);
}
.sm-slot-nome {
position: relative;
padding-left: var(--wc-space-4);
font-size: var(--wc-text-caption);
line-height: 1.45;
color: var(--wc-text-ink);
}
/* O ponto é a única coisa na grade que muda de cor com o palco, e é o que faz
a sala escolhida continuar visível depois que o leitor rolou para longe do
seletor. Marcador de lista, não tinta: 5px de diâmetro, sem texto em cima. */
.sm-slot-nome::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 5px;
height: 5px;
border-radius: var(--wc-radius-full);
background: var(--sm-palco-ink);
}
/* --- mesa redonda / colóquio --- */
/* O destaque é um filete na borda interna e 5% de tinta no fundo, e não um
card dentro do card. A grade é uma pilha de linhas iguais; qualquer coisa
que mude o padding ou o raio de uma delas quebra a varredura vertical que é
a razão de a grade existir. */
.sm-slot-destaque {
background: color-mix(in srgb, var(--sm-palco-ink) 5%, var(--wc-surface-paper));
box-shadow: inset 3px 0 0 var(--sm-palco-ink);
}
/* --- pausas: almoço, coffee, happy hour, show de encerramento --- */
/* Toda linha que não é palestra leva a régua do evento lavada no fundo. As
duas classes existiam separadas quando o intervalo era liso e só o fecho do
dia tinha degradê; hoje pintam igual e o que as distingue é só o nome que
cada uma dá à pausa na marcação.
O véu de 88% é o número do .sm-tinted, e vale aqui pelo mesmo cálculo: é com
ele que o texto secundário mede 4,94:1 no pior ponto da faixa, acima dos
4,5:1 da AA. O texto desta linha é secundário, o mesmo caso medido lá.
Papel opaco por baixo para que um arquivo de tokens desatualizado deixe a
linha apenas lisa em vez de ilegível. */
.sm-slot-intervalo,
.sm-slot-encerramento {
--sm-tint-veil: color-mix(in srgb, var(--wc-surface-paper) 88%, transparent);
background-color: var(--wc-surface-paper);
background-image:
linear-gradient(var(--sm-tint-veil), var(--sm-tint-veil)),
var(--wc-gradient-summit);
}
.sm-slot-intervalo .sm-slot-titulo,
.sm-slot-encerramento .sm-slot-titulo {
font-weight: var(--wc-weight-medium);
color: var(--wc-text-secondary);
}
/* --- transmissão de outra sala --- */
/* Estas linhas chegam marcadas como destaque na origem, e continuam assim: a
faixa tintada é o que avisa, de longe, que aquele horário da sala não é
exclusivo dela. O que muda é só o tipo. Não é uma palestra com título — é um
aviso de sistema, e o mono em caixa alta diz isso antes de ser lido.
Modificador de .sm-slot-destaque, nunca sozinho: o fundo e o filete vêm de
lá, e só a tinta do rótulo mora aqui. */
.sm-slot-transmissao .sm-slot-titulo {
font-family: var(--wc-font-mono);
font-size: var(--wc-text-caption);
letter-spacing: 0.06em;
font-weight: var(--wc-weight-semibold);
color: var(--wc-text-secondary);
}
/* ---------------------------------------------------- DIAS SEM PALCO */
/* Os dois dias que não se dividem em salas. Painel largo em vez de grade,
porque não há horário a comparar: é um evento só, e a página deve dizer isso
pela forma antes de dizer pelo texto. */
.sm-prog-nota {
--sm-tint-veil: color-mix(in srgb, var(--wc-surface-paper) 88%, transparent);
margin-top: var(--wc-space-10);
padding: var(--wc-space-16) var(--wc-space-12);
border: 1px solid var(--wc-border-default);
border-radius: var(--wc-radius-panel);
background-color: var(--wc-surface-paper);
background-image:
linear-gradient(var(--sm-tint-veil), var(--sm-tint-veil)),
var(--wc-gradient-summit-diagonal);
text-align: center;
}
.sm-prog-nota[hidden] {
display: none;
}
.sm-prog-nota-tag {
display: inline-block;
padding: var(--wc-space-2) var(--wc-space-4);
border: 1px solid color-mix(in srgb, var(--wc-text-navy) 24%, transparent);
border-radius: var(--wc-radius-full);
font-size: var(--wc-text-micro);
line-height: var(--wc-text-micro-lh);
letter-spacing: var(--wc-text-micro-ls);
text-transform: uppercase;
font-weight: var(--wc-weight-semibold);
color: var(--wc-text-navy);
}
.sm-prog-nota h3 {
margin-top: var(--wc-space-5);
}
.sm-prog-nota p {
max-width: 68ch;
margin-inline: auto;
margin-top: var(--wc-space-5);
}
/* ============================================================ HOSPEDAGEM */
/* Sem grid-auto-rows: 1fr, ao contrário da .sm-feature-grid. Lá a fração é
necessária porque são seis cards em duas linhas e cada linha se mediria
sozinha; aqui são três numa linha só, e o stretch que a grade já faz por
padrão iguala as alturas de graça. A diferença aparece quando a grade cai
para duas colunas: com a fração, o card órfão da segunda linha herdaria a
altura da dupla de cima e penduraria vazio no pé. */
.sm-hotel-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--wc-space-6);
}
.sm-hotel {
display: flex;
flex-direction: column;
/* A foto encosta nas bordas do card; sem isto os cantos dela passariam por
cima do raio. */
overflow: hidden;
background: var(--wc-surface-paper);
border: 1px solid var(--wc-border-default);
border-radius: var(--wc-radius-card);
}
/* As três fotos vieram do site em tamanhos diferentes — 590×362 as duas
primeiras, 393×241 a terceira — e em proporções que só coincidem no segundo
decimal. A razão é declarada aqui e o recorte fica com o object-fit: é o que
faz a fileira ter uma linha de horizonte só, independentemente do arquivo que
entrar depois. */
/* height:auto não é decorativo e não pode sair: os ![]()
trazem width e height
do arquivo, e esses atributos viram um height definido em pixels. Com largura
e altura definidas, a razão declarada é ignorada e cada foto saía com a altura
do próprio arquivo. Soltando a altura, quem manda passa a ser o aspect-ratio.
Os três arquivos foram recortados em 16:10 exato (576x360, 576x360, 384x240),
então atributo e razão declarada concordam: mesmo que esta regra caia, a
fileira continua com uma linha de horizonte só. */
.sm-hotel-foto {
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.sm-hotel-corpo {
display: flex;
flex: 1;
flex-direction: column;
padding: var(--wc-space-8);
}
.sm-hotel-nome {
font-family: var(--wc-font-display);
font-size: var(--wc-text-title);
line-height: var(--wc-text-title-lh);
font-weight: var(--wc-weight-semibold);
color: var(--wc-text-navy);
}
/* A régua de estrelas é decorativa e está marcada como tal: a classificação já
está escrita no texto do card — "Resort 5 estrelas", "Hotel 4 estrelas",
"Hotel 3 estrelas" —, então o leitor de tela não perde nada por não ouvir as
formas, e elas não precisam cumprir piso de contraste. É a mesma leitura que
libera o âmbar nos ordinais da .sm-feature. Se a classificação algum dia sair
do texto corrido, estas estrelas viram conteúdo e a cor tem de ser revista. */
.sm-hotel-estrelas {
display: flex;
gap: var(--wc-space-1);
margin-top: var(--wc-space-3);
}
.sm-estrela {
width: 14px;
height: 14px;
background: var(--wc-border-strong);
clip-path: polygon(
50% 0%,
61% 35%,
98% 35%,
68% 57%,
79% 91%,
50% 70%,
21% 91%,
32% 57%,
2% 35%,
39% 35%
);
}
.sm-estrela-on {
background: var(--wc-summit-amber);
}
/* Toma a sobra do card, como o parágrafo da .sm-feature — é o que empurra a
linha de distância para o pé e faz as três réguas inferiores coincidirem. */
.sm-hotel-texto {
flex: 1;
margin-top: var(--wc-space-4);
font-size: var(--wc-text-body);
line-height: var(--wc-text-body-lh);
color: var(--wc-text-secondary);
}
/* "No mesmo complexo · 0 km" vinha grudado no fim do parágrafo na página de
origem. É o dado que o leitor compara entre os três cards, e dado que se
compara entre linhas é mono nesta identidade — a mesma regra que rege o
endereço do Royal Palm Hall e os horários da programação. Separado por
hairline porque deixa de ser frase e passa a ser ficha. */
.sm-hotel-dist {
margin-top: var(--wc-space-6);
padding-top: var(--wc-space-4);
border-top: 1px solid var(--wc-border-default);
font-family: var(--wc-font-mono);
font-size: var(--wc-text-caption);
line-height: var(--wc-text-caption-lh);
color: var(--wc-text-muted);
}
.sm-hotel-cta {
margin-top: var(--wc-space-12);
}
/* ============================================================ BREAKPOINTS */
/* Degrau só da grade de palestrantes, acima do corte geral de 1024px. Com
quatro colunas o card mede ~292px na coluna cheia de 1.240px; sem esta
parada ele chegaria a ~223px antes de o breakpoint seguinte agir, e aí a
foto 4:5 encolhe junto com a bio. Vem antes do bloco de 1024 de propósito:
as duas regras casam numa tela estreita e a última é que vale. */
@media (max-width: 1200px) {
.sm-speaker-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 1100px) {
.sm-nav,
.sm-header-end {
display: none;
}
/* A quebra calculada para a coluna de 1.240px sai daqui para baixo. A
fileira já reparte sozinha numa coluna estreita, e mantida a quebra ela
passaria a cortar no lugar errado — abaixo de ~800px a segunda linha
(736px de logo) não caberia e viraria uma terceira linha de um logo só,
que é exatamente o que esta regra existe para evitar. */
.sm-logo-break {
display: none;
}
.sm-burger {
display: flex;
}
/* O ritmo desce um degrau. Antes isto era um padding-block chapado em
.sm-section, e tinha dois efeitos colaterais: por vir depois no arquivo com
a mesma especificidade, ele ganhava de .sm-section-tight e apagava o passo
curto — abaixo de 1024px a página tinha um ritmo só, não dois — e ainda
desfazia o padding-bottom que as regras de adjacência calculam. Mexer na
variável em vez da propriedade encolhe o ritmo sem tocar em quem o
distribui. */
:root {
--sm-rhythm: var(--wc-space-16);
--sm-rhythm-tight: var(--wc-space-10);
}
.sm-hero-title {
font-size: var(--wc-text-display-l);
}
.sm-stat-row,
.sm-guard-row {
grid-template-columns: repeat(2, 1fr);
}
.sm-chair {
grid-template-columns: 1fr;
gap: var(--wc-space-10);
}
.sm-h2-lead {
max-width: none;
}
.sm-person-lead {
max-width: 340px;
}
.sm-feature-grid,
.sm-person-row,
.sm-care-row,
.sm-hotel-grid,
.sm-speaker-grid {
grid-template-columns: repeat(2, 1fr);
}
/* The source wrapped here too (--flex-wrap-mobile: wrap). O min-height: 0 que
ficava aqui saiu junto com o min-height do bloco base: a razão que valia só
para o empilhado — altura forçada em volta de conteúdo curto é vazio, não
respiro — acabou valendo para as duas larguras. */
.sm-partner {
flex-wrap: wrap;
/* Stacked, the pair runs the full width, so centring would leave the
left-aligned copy floating off the section's own gutter. */
justify-content: flex-start;
align-items: flex-start;
/* 3cm is a horizontal separation; carried into a vertical stack it reads
as a hole between the copy and the mark. */
gap: var(--wc-space-8);
}
/* Lado a lado a ordem do documento não é ordem de leitura: texto e marca
chegam juntos. Empilhado ela passa a ser, e a marca caía depois do botão —
a seção terminava numa logo solta, com o CTA no meio. Subindo-a, o bloco
lê como as outras seções do celular: quem assina, o que é, e a ação no fim.
order e não troca no HTML porque a ordem do documento é a que o desktop
quer. A logo é um ![]()
sem link, não entra na ordem de tabulação, então
o descasamento entre ordem visual e ordem do DOM não cria salto de foco. */
.sm-partner-logo {
order: -1;
}
/* Breaks authored for a 1240px column strand single words at this width;
inline lets the text rewrap to the measure it actually has. */
.sm-line {
display: inline;
}
/* Centred rather than pooled at an edge: stacked, the copy runs the full
width, so um glow encostado numa borda acenderia um lado e deixaria o
resto chapado. O recuo cai de 32% para 16% dos dois lados. */
.sm-glow-left::before {
width: 120%;
transform: translate(-16%, -50%);
}
.sm-glow-right::before {
width: 120%;
transform: translate(16%, -50%);
}
/* Dois por linha, não quatro. Abaixo de 1024px a coluna não comporta quatro
nomes de sala sem quebrar "Grotenhermen" ao meio. */
.sm-palcos {
grid-template-columns: repeat(2, 1fr);
}
/* Com duas colunas a caixa dobra de largura, e o 2:1 do desktop levaria a
foto a ~235px de altura. A faixa achata para manter a fileira inteira na
mesma altura de antes. */
.sm-palco-foto {
aspect-ratio: 3 / 1;
}
/* A coluna de nomes sai da linha e vai para baixo do tema, alinhada com ele.
A hora fica onde está: é por ela que o leitor varre, e mandá-la para cima
do tema custaria uma linha em cada um dos 158 horários. */
.sm-slot {
grid-template-columns: 130px 1fr;
gap: var(--wc-space-4) var(--wc-space-6);
}
.sm-slot-nomes {
grid-column: 2;
flex-direction: row;
flex-wrap: wrap;
gap: var(--wc-space-2) var(--wc-space-5);
}
.sm-prog-nota {
padding: var(--wc-space-12) var(--wc-space-8);
}
}
@media (max-width: 767px) {
:root {
--wc-gutter: 20px;
/* Mais um degrau abaixo do tablet. Espaço vertical não é medida absoluta,
é fração de tela: 96px são 11% de um desktop de 900px e quase o dobro
disso num celular, então o número que dá respiro lá vira parede aqui.
48/32 guardam a mesma proporção. Como todas as regras de intervalo leem
estas duas variáveis, este é o único lugar que precisa saber disso. */
--sm-rhythm: var(--wc-space-12);
--sm-rhythm-tight: var(--wc-space-8);
}
/* O orbe troca de lado e encolhe para menos da metade, como no arquivo de
origem. Vai para a direita porque empilhado o texto ocupa a largura toda:
à esquerda a esfera cairia atrás do início de cada linha, que é justamente
onde o olho pousa. O corte do arquivo original é 809px; aqui usa 767px, o
breakpoint que a página já tem, para não criar um terceiro. */
.sm-orb::before {
background-position: right -429px center;
background-size: 759px 750px;
}
.sm-hero {
min-height: 560px;
}
.sm-hero-title {
font-size: var(--wc-text-display-m);
}
.sm-hero-meta {
flex-direction: column;
align-items: center;
gap: var(--wc-space-6);
}
.sm-hero-meta-item {
text-align: center;
}
/* O valor que estava aqui em cru desde o começo. É o degrau 1.25³ da escala,
que agora tem nome na rampa; a entrelinha vem junto, 1.15 em vez do 1.1 que
vinha de display-m — pouco mais de um pixel por linha, e é a entrelinha que
o tamanho pede. */
.sm-h2 {
font-size: var(--wc-text-display-s);
line-height: var(--wc-text-display-s-lh);
}
.sm-stat-row,
.sm-guard-row,
.sm-duo,
.sm-feature-grid,
.sm-person-row,
.sm-care-row,
.sm-plans,
.sm-hotel-grid,
.sm-speaker-grid {
grid-template-columns: 1fr;
}
/* Empilhado, o card ocupa a largura da tela e a mesma bio cabe em bem menos
linhas — o recorte de 11rem passaria a cortar no meio do primeiro
parágrafo em vez de depois dele. */
.sm-speaker.is-clamped .sm-speaker-bio {
max-height: 8rem;
}
/* Empilhados, os seis cards não têm com quem se alinhar: cada um entra na
tela sozinho, e igualar alturas aqui só serve para pendurar espaço vazio no
pé dos textos curtos — o mesmo motivo pelo qual o .sm-partner larga a
altura forçada nesta faixa. Cada card fecha onde o texto acaba. */
.sm-feature-grid {
grid-auto-rows: auto;
}
.sm-feature p {
flex: none;
}
.sm-duo-card,
.sm-plan {
padding: var(--wc-space-8);
}
.sm-venue-name {
font-size: var(--wc-text-display-m);
}
.sm-price-int {
font-size: var(--wc-text-display-l);
}
.sm-slide,
.sm-quote {
flex-basis: 78%;
}
.sm-logo-row {
gap: var(--wc-space-8);
}
.sm-whats,
.sm-banner {
padding: var(--wc-space-10) var(--wc-space-6);
}
.sm-footer-inner {
flex-direction: column;
align-items: flex-start;
}
/* A régua de dia vira uma faixa rolável em vez de quebrar em duas linhas.
Cinco pílulas empilhadas em 2+3 escondem o dia 5 abaixo da dobra do
seletor e desalinham a contagem; deitadas, o gesto de arrastar já é o
esperado numa fileira de datas. O recuo negativo leva a faixa até a borda
da tela para que o corte da última pílula diga que há mais à direita. */
.sm-dias {
flex-wrap: nowrap;
/* Volta a ancorar à esquerda: centralizada, uma faixa que transborda
esconde a primeira pílula atrás da borda de rolagem. */
justify-content: flex-start;
overflow-x: auto;
scrollbar-width: none;
margin-inline: calc(-1 * var(--wc-gutter));
padding-inline: var(--wc-gutter);
}
.sm-dias::-webkit-scrollbar {
display: none;
}
.sm-dia {
flex: 0 0 auto;
}
.sm-palcos {
grid-template-columns: 1fr;
}
/* Numa coluna só, a foto vira miniatura ao lado do nome em vez de faixa sobre
ele: empilhada, uma faixa por caixa somaria ~1000px de seletor antes de a
grade começar. Assim as quatro salas continuam cabendo em uma tela. */
.sm-palco {
flex-direction: row;
}
/* Sem proporção fixa: a foto estica para a altura da caixa, que varia porque
"Sala Grotenhermen" quebra em duas linhas e as outras não. Travada em 1:1
sobraria papel acima e abaixo da miniatura só nessa. */
.sm-palco-foto {
flex: 0 0 auto;
width: 104px;
height: auto;
aspect-ratio: auto;
align-self: stretch;
}
.sm-palco-txt {
padding: var(--wc-space-4);
}
/* A hora sobe para cima do tema. Numa coluna de 320px os 130px da faixa de
horário deixam ~160px para o título, e aí cada tema vira seis linhas de
três palavras. */
.sm-slot {
grid-template-columns: 1fr;
gap: var(--wc-space-3);
padding: var(--wc-space-5);
}
.sm-slot-hora {
padding-top: 0;
color: var(--wc-text-secondary);
}
.sm-slot-nomes {
grid-column: auto;
}
.sm-prog-nota {
padding: var(--wc-space-10) var(--wc-space-6);
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.sm-carousel-track {
scroll-behavior: auto;
}
* {
transition-duration: 0.01ms !important;
}
}