/* ==========================================================================
Curso de Fundamentos do Design — estilos da página
Depende de styles.css (tokens, .cta, .eyebrow, .faq, motion, cursor).
Tudo aqui é prefixado com .fd- para não interferir na landing do Festival.
========================================================================== */
:root {
--fd-ink: #0b0b0b;
--fd-surface: #f5f4f2;
--fd-line: #d9d6d1;
--fd-header-h: calc(64 * var(--fd-u));
--fd-tags-h: calc(40 * var(--fd-u)); /* faixa preta do documento: 45px em 1920 */
--fd-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
/*
* Unidade de escala da página — o único botão de ajuste do tamanho.
* Todas as seções são full width e escalam com a viewport a partir daqui.
*
* A escala é amortecida: cresce com a largura, mas bem menos que 1:1, para
* não ficar gigante em monitor grande.
*
* A reta está calibrada para dar **exatamente 1** em 1440 — a largura da
* prancheta. Antes dava 0,8896 ali, ou seja, a página inteira saía 11 %
* menor que o desenho, em todas as seções ao mesmo tempo.
* 1024 → 0,896 · 1280 → 0,96 · 1440 → 1,000 · 1600 → 1,04 · 1920+ → 1,12
*
* Para deixar tudo maior ou menor de uma vez, mexa só nesta linha.
*/
--fd-u: clamp(0.86px, calc(0.64px + 0.025vw), 1.12px);
/*
* Largura travada das seções que no Figma têm um frame de conteúdo
* centrado: 1216 px em "Como funciona" e na FAQ, 1344 px no rodapé.
* Hero, faixa de temas, tese, método e aula gratuita continuam sangrando.
*/
--fd-max: 1216px;
--fd-max-wide: 1344px;
}
:root:has(body.fd-page) {
scroll-padding-top: calc(var(--fd-header-h) + 16px);
}
.fd-page {
background: var(--white);
}
.fd-wrap {
width: 100%;
padding-inline: max(calc(48 * var(--fd-u)), calc((100% - var(--fd-max)) / 2));
}
.fd-skip {
position: absolute;
top: -60px;
left: 16px;
z-index: 60;
padding: 12px 18px;
color: var(--white);
background: var(--blue);
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
}
.fd-skip:focus {
top: 12px;
}
/* --- Estados comerciais: data-cart="open" | "closed" --------------------- */
html[data-cart="open"] .fd-when-closed,
html[data-cart="closed"] .fd-when-open {
display: none !important;
}
/* --- Blocos de texto compartilhados ------------------------------------- */
.fd-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 20px;
color: var(--gray-600);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.16em;
line-height: 1;
text-transform: uppercase;
}
.fd-eyebrow__dot {
width: 10px;
height: 10px;
flex: 0 0 10px;
background: var(--blue);
border-radius: 50%;
}
.fd-eyebrow--light {
color: rgba(255, 255, 255, 0.66);
}
.fd-eyebrow--light .fd-eyebrow__dot {
background: var(--yellow);
}
.fd-sechead {
max-width: 760px;
margin-bottom: 56px;
}
.fd-sechead h2 {
font-size: clamp(44px, 6vw, 84px);
line-height: 0.86;
letter-spacing: 0.01em;
}
.fd-sechead__sub {
max-width: 560px;
margin-top: 20px;
color: var(--gray-600);
font-size: 17px;
line-height: 1.55;
}
.fd-sechead--row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
max-width: none;
}
.fd-sechead--center {
max-width: 1080px;
margin-inline: auto;
text-align: center;
}
.fd-sechead--center .fd-eyebrow {
justify-content: center;
}
.fd-lead {
color: var(--gray-700);
font-size: 20px;
line-height: 1.55;
}
.fd-pullquote {
margin: 32px 0 0;
padding: 6px 0 6px 26px;
border-left: 3px solid var(--blue);
color: var(--ink);
font-size: clamp(18px, 2vw, 21px);
font-style: italic;
line-height: 1.45;
}
.fd-textlink {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 28px;
padding-bottom: 4px;
border-bottom: 2px solid currentColor;
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
transition: gap 160ms ease;
}
.fd-textlink img {
width: 18px;
height: 18px;
filter: brightness(0) invert(1);
}
.fd-textlink:hover {
gap: 16px;
}
.fd-checklist {
display: grid;
gap: 22px;
margin: 0;
padding: 0;
list-style: none;
}
.fd-checklist li {
display: flex;
align-items: flex-start;
gap: 14px;
font-size: 18px;
line-height: 1.5;
}
.fd-checklist img {
width: 24px;
height: 24px;
flex: 0 0 24px;
margin-top: 3px;
}
.fd-checklist--tight {
gap: 14px;
}
.fd-checklist--tight li {
font-size: 16px;
}
.cta-ghost {
color: var(--white);
background: transparent;
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
}
.cta-ghost .cta-icon {
filter: brightness(0) invert(1);
}
.cta-ghost:hover {
background: rgba(255, 255, 255, 0.08);
filter: none;
}
/* --- Botões e rótulos do frame [DESKTOP]Curso Fundamentos ----------------
Todas as medidas abaixo vêm da prancheta de 1440 px do Figma e são
escritas em `var(--fd-u)`, então a seção inteira escala com a viewport.
------------------------------------------------------------------------ */
.fd-btn {
display: inline-flex;
align-items: center;
gap: calc(12 * var(--fd-u));
padding: calc(12 * var(--fd-u)) calc(12 * var(--fd-u)) calc(12 * var(--fd-u)) calc(20 * var(--fd-u));
font-size: calc(14 * var(--fd-u));
font-weight: 500;
line-height: 1;
text-transform: uppercase;
transition: transform 160ms ease, filter 160ms ease;
}
.fd-btn img {
width: calc(20 * var(--fd-u));
height: calc(20 * var(--fd-u));
flex: 0 0 auto;
}
/*
* ESTADOS DE HOVER
* --------------------------------------------------------------------------
* `.motion-enabled .motion-reveal.is-visible` fixa `transform` e `filter` no
* elemento com especificidade maior que `:hover`, então o estado não pode
* depender dessas duas propriedades no botão. Ele é feito com cor de fundo e
* cor de texto; o movimento fica por conta da seta, que não é `.motion-reveal`.
*
* A escolha da cor depende da **superfície**, não do botão: inverter para
* preto só funciona sobre fundo claro. Sobre fundo escuro o botão sumiria.
*/
.fd-btn,
.fd-page .cta {
transition: background-color 200ms ease, color 200ms ease;
}
.fd-btn img,
.fd-page .cta-icon {
transition: transform 200ms ease;
}
/* A seta anda no eixo dela: ↗ sobe à direita, ↘ desce à direita. */
.fd-btn:hover img[src$="icon-arrow.svg"],
.fd-btn:hover img[src$="icon-arrow-upright.svg"],
.fd-page .cta:hover img[src$="icon-arrow-upright.svg"] {
transform: translate(2px, -2px);
}
.fd-btn:hover img[src$="icon-arrow-downright.svg"],
.fd-btn:hover img[src$="icon-arrow-downright-white.svg"],
.fd-page .cta:hover img[src$="icon-arrow-downright.svg"] {
transform: translate(2px, 2px);
}
/* O ícone de play não tem direção: cresce um pouco em vez de deslizar. */
.fd-btn:hover img[src$="icon-arrow-black.svg"] {
transform: scale(1.08);
}
/*
* A seta tem a cor do texto, também no hover. Os ícones são SVGs de cor fixa
* numa , que não herda `color`: no verde que vira preto a seta preta
* sumia, e no azul que vira preto a branca destoava do texto azul-claro.
*
* O próprio SVG vira máscara: a caixa pinta `currentColor` no formato do ícone
* e a imagem original sai do quadro pelo `object-position`. A cor segue a
* transição do texto. O `filter: none` desfaz a inversão para branco que o
* `.cta-blue` aplica na seta.
*/
.fd-btn img[src*="icon-arrow"],
.fd-page .cta-icon[src*="icon-arrow"] {
object-position: -9999px 0;
background-color: currentColor;
filter: none;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.fd-btn img[src$="/icon-arrow.svg"] {
-webkit-mask-image: url("./assets/icon-arrow.svg");
mask-image: url("./assets/icon-arrow.svg");
}
.fd-btn img[src$="/icon-arrow-upright.svg"],
.fd-page .cta-icon[src$="/icon-arrow-upright.svg"] {
-webkit-mask-image: url("./assets/icon-arrow-upright.svg");
mask-image: url("./assets/icon-arrow-upright.svg");
}
.fd-btn img[src$="/icon-arrow-downright.svg"],
.fd-page .cta-icon[src$="/icon-arrow-downright.svg"] {
-webkit-mask-image: url("./assets/icon-arrow-downright.svg");
mask-image: url("./assets/icon-arrow-downright.svg");
}
.fd-btn img[src$="/icon-arrow-downright-white.svg"] {
-webkit-mask-image: url("./assets/icon-arrow-downright-white.svg");
mask-image: url("./assets/icon-arrow-downright-white.svg");
}
.fd-btn img[src$="/icon-arrow-black.svg"] {
-webkit-mask-image: url("./assets/icon-arrow-black.svg");
mask-image: url("./assets/icon-arrow-black.svg");
}
/* --- Sobre fundo claro: inverte para preto, texto na cor da peça --- */
.fd-hero__waitlist .fd-btn--green:hover,
.fd-page .faq .fd-btn--green:hover {
color: var(--green);
background-color: var(--black);
}
/*
* Azul base em preto fica em 2,2:1. Na inversão o texto usa o azul claro,
* que passa de 5:1.
*/
.fd-page .cta-blue:hover {
color: var(--blue-light);
background-color: var(--black);
}
/* --- Sobre fundo escuro: o preto some, então o caminho é o oposto --- */
/* Botão verde sobre #222 → branco com texto preto. */
.fd-page .fd-pricecard__cta:hover {
color: var(--black);
background-color: var(--white);
}
/* Botão branco sobre escuro → verde, a cor de CTA da marca. */
.fd-free .fd-btn--white:hover,
.fd-page .fd-guests__cta:hover,
.fd-page .fd-scholarship__cta:hover {
color: var(--black);
background-color: var(--green);
}
.fd-page .cta-pink:hover {
color: var(--pink);
background-color: var(--black);
}
.fd-btn:focus-visible {
outline: 3px solid var(--blue);
outline-offset: 4px;
}
.fd-btn--green { color: var(--black); background: var(--green); }
.fd-btn--white { color: var(--black); background: var(--white); }
.fd-btn--black {
color: var(--white);
background: var(--black);
font-size: calc(16 * var(--fd-u));
padding: calc(18 * var(--fd-u)) calc(18 * var(--fd-u)) calc(18 * var(--fd-u)) calc(26 * var(--fd-u));
}
/*
* Preto sobre fundo branco não pode inverter para preto. Vai para o azul da
* marca: mantém o texto e a seta brancos — a seta é um SVG branco fixo, e no
* verde ela sumiria.
*/
.fd-plans .fd-btn--black:hover {
background-color: var(--blue);
}
.fd-btn--block {
width: 100%;
justify-content: space-between;
padding: calc(14 * var(--fd-u)) calc(14 * var(--fd-u)) calc(14 * var(--fd-u)) calc(22 * var(--fd-u));
}
/* ==========================================================================
Hover dos cartões — uma convenção, não efeitos avulsos
São 15 seções: cinco gestos diferentes viram ruído. Então há só dois, e a
escolha entre eles é a mesma pergunta em todo lugar: o cartão tem foto?
· Sem foto → sobe 4. O desenho é chapado, sem sombra, então a translação
é o único jeito honesto de dar profundidade.
· Com foto → a foto cresce 4 % dentro da própria máscara, e o cartão fica
parado. É o gesto natural de quem já tem uma imagem.
Mesma duração e mesma curva do numeral dos planos, para a página inteira
responder no mesmo tempo.
========================================================================== */
/*
* Cartão chapado: o filete verde engrossa para dentro. É `box-shadow: inset`
* e não `border-width` porque borda mexe no layout — o cartão inteiro cresceria
* e empurraria a grade.
*
* A lista de `transition-property` repete as três propriedades da entrada
* porque estes cartões carregam `motion-reveal`, e a regra dela — mais
* específica que um seletor de classe simples — dita a `transition`. Sem
* repetir, o hover herdaria os 600ms **e o atraso do escalonamento**: o quarto
* cartão reagiria 240ms depois do primeiro. A curva não precisa ser repetida:
* `--motion-ease-out` já é a mesma que o numeral usa.
*/
.motion-enabled .fd-method__cards li,
.motion-enabled .fd-module {
transition-property: opacity, transform, filter, box-shadow;
transition-duration: 600ms, 600ms, 600ms, 240ms;
transition-delay: var(--motion-delay, 0ms), var(--motion-delay, 0ms), var(--motion-delay, 0ms), 0ms;
}
.fd-method__cards li:hover,
.fd-module:hover {
box-shadow: inset 0 calc(-5 * var(--fd-u)) 0 var(--green);
}
/* Cartão com foto: quem reage é a imagem, dentro da máscara que já existe. */
.fd-work__media img,
.fd-guests__list img,
.fd-bonuscard__media img {
transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fd-work:hover .fd-work__media img,
.fd-guests__list li:hover img,
.fd-bonuscard:hover .fd-bonuscard__media img {
transform: scale(1.04);
}
.fd-tag {
display: inline-flex;
align-items: center;
white-space: nowrap;
gap: calc(6 * var(--fd-u));
padding: calc(10 * var(--fd-u)) calc(16 * var(--fd-u));
color: var(--white);
background: var(--black);
font-size: calc(12 * var(--fd-u));
font-weight: 500;
line-height: 1;
text-transform: uppercase;
transition: background 160ms ease;
}
/*
* Chip claro do canto do menu. Os botões do canto são NEUTROS em todas as
* páginas (os mesmos cinzas do menu do site.css): nunca a cor do curso. O
* hover é o amarelo da marca, igual ao das outras páginas.
*/
.fd-tag--gray {
color: var(--black);
background: var(--gray-200);
}
/*
* Botão quadrado da área do aluno: só o ícone, e o rótulo abre no hover.
*
* O texto mora sempre no DOM — antes havia só um `aria-label`, sem nada
* visível, e duas versões do mesmo rótulo para manter em dia. A animação é de
* `max-width` e não de `width` porque `auto` não é interpolável.
*/
.fd-tag--square {
gap: 0;
padding: calc(8 * var(--fd-u));
background: var(--gray-700);
transition:
background 160ms ease,
color 160ms ease,
gap 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fd-tag--square span {
display: block;
max-width: 0;
overflow: hidden;
transition: max-width 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fd-tag img {
width: calc(16 * var(--fd-u));
height: calc(16 * var(--fd-u));
}
.fd-tag:hover {
background: var(--gray-700);
}
.fd-tag--gray:hover {
color: var(--black);
background: var(--yellow);
}
/*
* Precisa vir depois de `.fd-tag:hover`: as duas regras têm a mesma
* especificidade, então quem ganha é a última. Enquanto o bloco do quadrado
* ficava antes, o hover dele nunca valeu.
*
* No amarelo o texto é preto — por isso o `invert` no ícone, que é um
* traço branco e sumiria.
*/
.fd-tag--square:hover {
gap: calc(8 * var(--fd-u));
color: var(--black);
background: var(--yellow);
}
.fd-tag--square:hover span {
/* "Área do aluno" mede 93u; 106u mantém a folga de ~14 % sem sobra grande —
com teto muito acima da largura real a transição termina antes do fim. */
max-width: calc(106 * var(--fd-u));
}
.fd-tag--square:hover img {
filter: invert(1);
}
/* Rótulo em chip: quadrado colorido + texto (tese e aula gratuita) */
/*
* `width: fit-content` em vez de `align-self: flex-start`: o chip não estica
* nos blocos alinhados à esquerda (tese, aula gratuita) e ainda obedece ao
* `align-items: center` do cabeçalho do conteúdo do curso.
*/
.fd-label {
--fd-label-u: var(--fd-u);
display: inline-flex;
align-items: center;
width: fit-content;
max-width: 100%;
margin: 0;
background: var(--gray-100);
}
.fd-label img {
width: calc(32 * var(--fd-label-u));
height: calc(32 * var(--fd-label-u));
flex: 0 0 auto;
}
.fd-label span {
padding: 0 calc(12 * var(--fd-label-u));
color: var(--black);
font-size: calc(14 * var(--fd-label-u));
font-weight: 500;
line-height: 1;
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
}
/* Tamanho único acima de 981: a aula gratuita é seção livre, com unidade até 1,12. */
@media (min-width: 981px) {
.fd-label { --fd-label-u: 1px; }
}
/* ==========================================================================
Seções de largura travada
--------------------------------------------------------------------------
Estas seções param de crescer em 1216 (ou 1344 no rodapé). Dentro delas
1 unidade = 1 px, sem escala.
O motivo: `--fd-u` cresce até 1,12 acima de 1440, mas o contêiner destas
seções é fixo em px. A tipografia crescia 12 % dentro de uma caixa que não
crescia — e as quebras de linha saíam do desenho. O caso visível era a
frase da Tese, que passava a quebrar "FAZER COM / ELA.".
As seções que sangram (hero, faixa de temas, método e aula gratuita)
continuam escalando, porque nelas a caixa acompanha a tela.
========================================================================== */
@media (min-width: 981px) {
.fd-thesis,
.fd-plans,
.fd-syllabus,
.fd-works,
.fd-bonus,
.fd-price,
.fd-warranty,
.fd-testimonials,
.fd-scholarship,
.fd-teacher,
.fd-guests,
.fd-page .faq,
.fd-footer {
--fd-u: 1px;
}
}
/* --- Header (594:34213) -------------------------------------------------- */
.fd-topbar {
position: sticky;
top: 0;
z-index: 50;
min-height: calc(64 * var(--fd-u));
display: flex;
align-items: stretch;
background: var(--white);
}
.fd-topbar__by {
display: grid;
place-items: center;
padding: calc(16 * var(--fd-u)) calc(28 * var(--fd-u));
background: var(--red);
}
.fd-topbar__by img {
width: calc(121 * var(--fd-u));
height: calc(20 * var(--fd-u));
}
.fd-topbar__mark-tall,
.fd-footer__wordmark--tall {
display: none;
}
.fd-topbar__course {
display: flex;
align-items: center;
width: calc(210 * var(--fd-u));
padding: 0 calc(12 * var(--fd-u));
border-bottom: calc(3 * var(--fd-u)) solid var(--green);
}
.fd-topbar__course img {
width: calc(144.015 * var(--fd-u));
height: calc(40 * var(--fd-u));
}
/* O vão do menu leva a trama de pontos; os botões ficam por cima. */
.fd-topbar__actions {
position: relative;
display: flex;
flex: 1;
align-items: center;
justify-content: flex-end;
gap: calc(8 * var(--fd-u));
padding: calc(16 * var(--fd-u)) calc(20 * var(--fd-u));
overflow: hidden;
}
/*
* Malha de pontos do documento: passo de 7 e ponto de 1,9 numa faixa de 67 de
* altura. O nosso cabeçalho tem 72, daí o passo de 8 — em `u`, para acompanhar
* a altura, que também sai de `--fd-u`.
*
* O ponto é preto no próprio arquivo, sem `filter` nem `opacity`: a tinta
* medida no documento é 5,1 % da área, e um ponto sólido de 2,04 num tile de
* 8,03 dá 5,07 %. Antes era uma cruz branca invertida a 14 %.
*/
.fd-topbar__actions::before {
content: "";
position: absolute;
inset: 0;
background-image: url("./assets/texture-pontos-menu.svg");
background-size: calc(7.17 * var(--fd-u)) calc(7.17 * var(--fd-u));
}
.fd-topbar__actions > * {
position: relative;
}
/*
* Bloco preto atrás dos botões, como no documento. As margens negativas
* cancelam o padding do vão para a faixa encostar no topo, no rodapé e na
* borda direita; os 217 de recuo à esquerda são a folga preta que o documento
* deixa antes do botão cinza (228 no recorte de 1800).
*
* Só a partir de 981: abaixo disso o botão cinza some e sobra o quadrado, que
* numa faixa preta ficaria solto.
*/
.fd-topbar__cta {
display: flex;
align-items: center;
gap: calc(8 * var(--fd-u));
}
@media (min-width: 981px) {
.fd-topbar__cta {
align-self: stretch;
margin: calc(-16 * var(--fd-u)) calc(-20 * var(--fd-u)) calc(-16 * var(--fd-u)) 0;
padding: 0 calc(20 * var(--fd-u)) 0 calc(217 * var(--fd-u));
background: var(--black);
}
}
/* --- Hero (594:34212) ---------------------------------------------------- */
/*
* Cabeçalho + hero + faixa de temas preenchem a primeira dobra. O `max()`
* garante que numa tela baixa a seção cresça em vez de espremer o conteúdo,
* e o `padding-top` reserva uma faixa mínima de foto para o bloco branco não
* sufocar a imagem quando a tela é pequena e o texto quebra em mais linhas.
*/
.fd-hero {
position: relative;
isolation: isolate;
min-height: calc(725 * var(--fd-u));
min-height: calc(100dvh - var(--fd-header-h) - var(--fd-tags-h));
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-top: clamp(120px, 26vh, 320px);
overflow: hidden;
}
.fd-hero__bg {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
/*
* Só vale sem JavaScript e no primeiro quadro: no desktop quem enquadra a
* foto é o `enquadrarFotoDoHero` do curso-fundamentos.js, pelas variáveis do
* bloco abaixo. 70 % é o valor fixo mais próximo do resultado dele nas telas
* comuns. Abaixo de 981 a foto vira faixa no topo, com posição própria.
*/
object-position: 50% 70%;
}
/*
* A frase do rasgo da caixa ("DESIGN PEDE BASE, DESIGNER TAMBÉM.") tem que
* aparecer inteira acima do painel branco em qualquer desktop. Nenhum
* `object-position` fixo resolve: a altura do painel muda com a largura e com
* a quebra do texto, e a sobra de foto para cortar muda com a altura da tela.
* Medido em nove telas, de 1100x800 a 2560x1300, cada uma pedia um valor — e
* nas estreitas nenhum servia, porque em `cover` a foto não sobe o bastante.
*
* Por isso o JS mede o painel e publica tamanho e posição da foto: o mais
* baixo possível com a frase livre (sobra topo para a marca "Fd" da tampa),
* ampliando além do `cover` só quando nem subindo tudo a frase aparece.
*/
@media (min-width: 981px) {
.fd-hero__bg {
top: var(--fd-foto-topo, auto);
left: var(--fd-foto-esquerda, 0);
width: var(--fd-foto-largura, 100%);
height: var(--fd-foto-altura, 100%);
}
}
.fd-hero__row {
display: flex;
align-items: flex-end;
width: 100%;
}
.fd-hero__panel {
display: flex;
flex-direction: column;
gap: calc(40 * var(--fd-u));
width: 60%;
padding: calc(48 * var(--fd-u));
background: var(--white);
}
.fd-hero h1 {
margin: 0;
font-size: calc(68 * var(--fd-u));
line-height: 1;
letter-spacing: 0;
}
.fd-hero__cols {
display: flex;
gap: calc(16 * var(--fd-u));
margin-top: calc(-16 * var(--fd-u));
}
/*
* Corpo e entrelinha vêm do documento: 14,97 de corpo e 19,9 de passo em 1920,
* ou seja 13,4u e 1,33. Com os 14u e 1,5 que estavam aqui o segundo parágrafo
* quebrava em quatro linhas em vez de três, e o bloco ficava 18 % mais alto.
*/
.fd-hero__cols p {
flex: 1;
color: var(--gray-600);
font-size: calc(13.4 * var(--fd-u));
line-height: 1.33;
}
.fd-proof {
display: flex;
flex-wrap: wrap;
gap: calc(32 * var(--fd-u));
margin: 0;
padding: 0;
list-style: none;
}
.fd-proof li {
display: flex;
align-items: center;
gap: calc(8 * var(--fd-u));
}
.fd-proof img {
width: calc(24 * var(--fd-u));
height: calc(24 * var(--fd-u));
flex: 0 0 auto;
}
.fd-proof span {
color: var(--gray-700);
font-size: calc(12 * var(--fd-u));
font-weight: 500;
line-height: 1.2;
}
/*
* --- Painel do hero, arranjo do documento da cliente -----------------------
* Só em tela grande, a pedido: abaixo de 981 o empilhamento atual continua.
*
* O painel vira grade: o título ocupa a linha inteira e, embaixo, os dois
* parágrafos empilhados à esquerda e os quatro selos em 2x2 à direita.
* Antes os parágrafos ficavam lado a lado e os selos numa fileira só.
*
* Medidas tiradas do documento (1920 de largura, onde 1u = 1,12px):
* coluna de texto 537px -> 480u
* vão até os selos 114px -> 102u
* passo dos selos 173px na horizontal e 87px na vertical
* O passo vira `gap` porque a largura das colunas é ditada pelo conteúdo:
* 173 - 147 do item mais largo = 26px -> 24u.
*/
@media (min-width: 981px) {
.fd-hero__panel {
display: grid;
grid-template-columns: calc(480 * var(--fd-u)) auto;
justify-content: start;
column-gap: calc(102 * var(--fd-u));
row-gap: calc(40 * var(--fd-u));
}
.fd-hero__panel > h1 {
grid-column: 1 / -1;
}
.fd-hero__cols {
flex-direction: column;
gap: calc(24 * var(--fd-u));
margin-top: 0;
}
.fd-hero__cols p {
flex: none;
}
.fd-proof {
display: grid;
grid-template-columns: repeat(2, auto);
align-content: start;
column-gap: calc(24 * var(--fd-u));
row-gap: calc(48 * var(--fd-u));
}
/*
* O card nunca fica mais estreito que o arranjo de duas colunas pede: 480u
* de texto + 102u de vão + ~253u de selos + 96u de padding. Com 60 % fixos
* isso só cabia a partir de ~1660px e, abaixo, os selos passavam da borda
* branca. Em 1920 continuam valendo os 60 % do documento (1146 > 1053).
*/
.fd-hero__panel {
width: max(60%, calc(940 * var(--fd-u)));
container-type: inline-size;
}
/*
* O título nunca passa da largura útil do card: a linha mais longa mede
* 11,28 vezes o corpo, e 8,6cqi deixa ~3 % de respiro. Em 1920 o limite nem
* age (daria 89px contra os 76 do documento); entre 981 e ~1450 o título
* vazava até 174px para fora do branco.
*/
.fd-hero h1 {
font-size: min(calc(68 * var(--fd-u)), 8.6cqi);
}
}
/*
* --- Painel do hero entre 981 e 1279 ----------------------------------------
* Aqui as duas colunas não cabem ao lado do bloco da lista de espera (a linha
* pede ~1271u). O card vira uma coluna: título, os dois parágrafos lado a lado
* e os quatro selos numa fileira embaixo deles. Lado a lado os parágrafos ficam
* com ~50 caracteres por linha e o card sai mais baixo do que empilhados — e
* card mais baixo é menos zoom na foto (ver `enquadrarFotoDoHero`).
*/
@media (min-width: 981px) and (max-width: 1279px) {
.fd-hero__panel {
grid-template-columns: minmax(0, 1fr);
width: 68%;
}
.fd-hero__cols {
flex-direction: row;
gap: calc(32 * var(--fd-u));
}
.fd-hero__cols p {
flex: 1;
}
.fd-proof {
grid-template-columns: repeat(4, auto);
justify-content: start;
column-gap: calc(32 * var(--fd-u));
}
}
/* O bloco encosta na direita; o conteúdo dentro dele continua alinhado à esquerda. */
.fd-hero__aside {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
padding: calc(48 * var(--fd-u));
}
/* Oculta durante as vendas (atributo `hidden` no HTML); o `display: flex` abaixo o anularia. */
.fd-hero__waitlist[hidden] {
display: none;
}
.fd-hero__waitlist {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: calc(18 * var(--fd-u));
width: calc(244 * var(--fd-u));
}
.fd-hero__seal {
width: calc(79 * var(--fd-u));
height: calc(78 * var(--fd-u));
animation: fd-spin 14s linear infinite;
}
.fd-hero__aside p {
color: var(--black);
font-size: calc(14 * var(--fd-u));
line-height: 1.5;
}
/*
* O `from` explícito é obrigatório. Sem ele o valor de partida vem de
* `.motion-reveal.is-visible` (`translateY(0) scale(1)`), as listas de funções
* não batem, o navegador cai para interpolação de matriz — e a matriz de
* `rotate(360deg)` é a identidade. Resultado: o selo ficava parado.
*/
/*
* Anti-horário. O texto do selo é assentado no sentido horário, então girar
* para o mesmo lado faz as palavras fugirem da leitura; ao contrário, cada
* palavra sobe para o topo na ordem em que se lê. Usado só pelo selo do hero.
*/
@keyframes fd-spin {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
/* --- Faixa de temas (594:34264) ------------------------------------------ */
/*
* Fundo de listras diagonais finas. O passo é fixo em px de propósito: a 2,8px
* de período, escalar com --fd-u faria a trama entrar em moiré.
*/
/*
* Entrada da foto do hero: só `transform`. A opacidade fica intocada de
* propósito — a foto é o maior elemento pintado da página, e começar em
* `opacity: 0` adiaria a marca de LCP. Escalar não adia: ela já pinta no
* primeiro quadro, só um pouco maior. O `overflow: hidden` da seção corta a
* sobra.
*/
.motion-enabled .fd-hero__bg {
transform: scale(1.05);
transition: transform 1400ms var(--motion-ease-scale);
}
.motion-enabled.motion-loaded .fd-hero__bg {
transform: scale(1);
}
.fd-tags {
height: var(--fd-tags-h);
display: flex;
align-items: center;
overflow: hidden;
background-color: var(--black);
}
/*
* `flex: 0 0 auto` é obrigatório: a faixa virou container flex quando ganhou
* altura própria, e como item flex a fita encolhia por padrão — os chips se
* espremiam e o texto vazava para fora do fundo cinza.
*/
.fd-tags__track {
flex: 0 0 auto;
display: flex;
width: max-content;
animation: fd-marquee 60s linear infinite;
}
.fd-tags:hover .fd-tags__track {
animation-play-state: paused;
}
.fd-tags__list {
flex: 0 0 auto;
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
.fd-tags__list li {
flex: 0 0 auto;
display: flex;
align-items: center;
/* o vão entre os itens: em `margin`, para o -50% do marquee fechar */
margin-right: calc(18 * var(--fd-u));
gap: calc(6 * var(--fd-u));
color: var(--white);
font-size: calc(12 * var(--fd-u));
font-weight: 500;
line-height: 1;
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
}
/* O "+" é caractere, não ícone: no documento a faixa é só texto sobre preto. */
.fd-tags__list li::before {
content: "+";
}
/*
* Marquee infinito. A fita tem duas listas idênticas e anda exatamente -50%,
* ou seja, o comprimento de uma lista: no fim do ciclo a segunda está onde a
* primeira estava e a emenda não aparece.
*
* Para -50% ser exato, o espaçamento tem que estar em `margin-right` de cada
* item — nunca em `gap` da fita ou da lista. Com `gap: G` entre as duas listas
* a fita mede 2L+G e -50% dá L+G/2, meio vão a mais a cada volta: a fita
* pulava G/2 px por ciclo. E um `padding-right` na lista somava ao `gap`,
* deixando a emenda com o dobro do vão dos outros cards.
*/
@keyframes fd-marquee {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
/* --- Tese (616:37588) ---------------------------------------------------- */
.fd-thesis {
display: flex;
justify-content: center;
padding-block: calc(140 * var(--fd-u));
padding-inline: max(calc(112 * var(--fd-u)), calc((100% - var(--fd-max)) / 2));
background: var(--ink);
}
/*
* Grid em vez de flex: com `flex: 1` e `box-sizing: border-box`, o padding do
* painel entra na base e as duas colunas saem desiguais (651 x 509). Com
* `1fr 1fr` elas ficam exatamente iguais, como no Figma (588 cada).
*/
.fd-thesis__inner {
display: grid;
grid-template-columns: 1fr 1fr;
/*
* A linha tem os 506 do frame `616:37589`. A frase da direita tem 522 de
* texto e transborda 16 por baixo — é assim na prancheta, e sem travar a
* altura a seção inteira crescia esses 16.
*/
grid-template-rows: calc(506 * var(--fd-u));
align-items: stretch;
gap: calc(40 * var(--fd-u));
width: 100%;
}
.fd-thesis__panel {
display: flex;
flex-direction: column;
justify-content: center;
gap: calc(32 * var(--fd-u));
min-width: 0;
/* 80 em cima, embaixo e à esquerda; zero à direita (nó 616:37590). */
padding: calc(80 * var(--fd-u)) 0 calc(80 * var(--fd-u)) calc(80 * var(--fd-u));
background-color: var(--black);
/*
* Medido no nó 616:37590: listras "/" com passo de 9 px na horizontal,
* 2 px de espessura e tom ~#1b1b1b sobre preto. Em gradiente o passo e a
* espessura são perpendiculares à faixa, daí o fator sen(45°).
*/
background-image: repeating-linear-gradient(
-45deg,
rgba(255, 255, 255, 0.106) 0 calc(1.41 * var(--fd-u)),
transparent calc(1.41 * var(--fd-u)) calc(6.36 * var(--fd-u))
);
}
.fd-thesis__copy {
display: flex;
flex-direction: column;
gap: calc(18 * var(--fd-u));
width: calc(391 * var(--fd-u));
color: var(--white);
}
.fd-thesis h2 {
font-size: calc(48 * var(--fd-u));
line-height: 1;
}
.fd-thesis__copy p {
font-size: calc(14 * var(--fd-u));
line-height: 1.5;
}
.fd-thesis__statement {
min-width: 0;
margin: 0;
color: var(--gray-700);
font-family: var(--display);
font-size: calc(98.8 * var(--fd-u));
line-height: 0.88;
text-transform: uppercase;
}
.fd-thesis__statement em {
color: var(--gray-400);
font-style: normal;
}
/*
* Desktop estreito (981 a 1279). A Tese está na lista de largura travada
* (`--fd-u: 1px`), então a frase fica com os 98,8px da prancheta enquanto a
* coluna encolhe para 353px em 981. Palavra não quebra: "FERRAMENTA." mede 496px
* e passava 143px da coluna — até ~1030 isso virava rolagem horizontal da
* página (30px em 981). Com a frase em oito a dez linhas, ela ainda descia até
* 243px abaixo da seção, e o texto de 391px do painel passava 118px da borda
* preta. A partir de 1280 tudo cabe e nada aqui vale.
*
* · A frase acompanha a coluna: a palavra mais longa mede 5,02 vezes o corpo, e
* a coluna é metade da grade menos metade do vão — 50cqi − 20px. O divisor
* 5,1 deixa ~1,5 % de folga. Em 1279 o resultado já encosta nos 98,8.
* · O texto do painel fica no máximo da largura do painel.
* · A linha trava em 506 como mínimo, não como altura: aqui o conteúdo precisa
* de mais, e crescer é melhor que vazar por cima da seção seguinte.
*/
@media (min-width: 981px) and (max-width: 1279px) {
.fd-thesis__inner {
container-type: inline-size;
grid-template-rows: minmax(calc(506 * var(--fd-u)), auto);
}
.fd-thesis__copy {
width: min(calc(391 * var(--fd-u)), 100%);
}
.fd-thesis__statement {
font-size: min(calc(98.8 * var(--fd-u)), calc((50cqi - 20px) / 5.1));
}
}
/* --- Para quem é esse curso (documento da cliente) -----------------------
Geometria medida no documento (1920 → 1u = 1,12px): seção 697, título de
corpo fixo 208,6 começando no topo, parágrafo a 61 % da largura, faixa de
cartões com 271 de altura e faixa de losangos com 148 — ambas no rodapé.
------------------------------------------------------------------------ */
.fd-method {
position: relative;
height: calc(697 * var(--fd-u));
overflow: hidden;
color: var(--white);
background: var(--blue);
}
.fd-method__band {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: calc(148 * var(--fd-u));
background:
/* Fio em cor sólida: com preto translúcido o cruzamento dos fios somava e ficava mais escuro. */
repeating-linear-gradient(45deg, transparent 0 calc(22 * var(--fd-u)), #000714 calc(22 * var(--fd-u)) calc(26 * var(--fd-u))),
repeating-linear-gradient(-45deg, transparent 0 calc(22 * var(--fd-u)), #000714 calc(22 * var(--fd-u)) calc(26 * var(--fd-u))),
var(--blue);
}
/*
* Colunas em porcentagem, não em px: a 2ª linha do título ocupa sempre a mesma
* fração da seção (59,2 %), então travar a coluna do parágrafo em 61,8 % —
* x=1172 no documento de 1920 — mantém a folga em qualquer largura. Em px ela
* invadiria o título quando `--fd-u` bate no piso.
*/
.fd-method__head {
position: relative;
display: grid;
grid-template-columns: 61.8% minmax(0, 1fr);
align-items: start;
padding-top: calc(2 * var(--fd-u));
padding-inline: calc(48 * var(--fd-u));
}
/*
* Corpo fixo, não mais ajustado por medição: no documento o título para em
* 59,2 % da largura, não sangra até a borda. `margin-left` só cancela o
* padding do bloco, de modo que a caixa do texto comece em x=0 — a folga de
* ~7px que aparece no documento é o próprio lateral bearing do "P".
*
* O teto em vw guarda a faixa de 981 a 1920: abaixo de 1920 o corpo em `u`
* ficaria proporcionalmente mais largo que no documento e a segunda linha
* alcançaria a coluna do parágrafo. Com `min()` ela para sempre em 59,2 %.
*/
.fd-method h2 {
grid-column: 1 / -1;
grid-row: 1;
/*
* Em `em` de propósito: sobe a caixa até o topo da maiúscula encostar no
* topo da seção (y=9 no documento). Como o valor acompanha o corpo, o
* encaixe se mantém quando o teto em vw entra em cena.
*/
margin-top: -0.129em;
margin-left: calc(-48 * var(--fd-u));
color: var(--white);
font-size: min(calc(208.6 * var(--fd-u)), 12.25vw);
line-height: 0.886;
}
.fd-method h2 span {
display: block;
width: max-content;
}
/*
* O parágrafo mora no vão aberto pela segunda linha do título. Como o título
* é ajustado para cobrir a largura, a linha 2 termina sempre na mesma fração
* da tela — então a coluna do grid (x = 860, y = 173 no Figma) já garante o
* encaixe, sem depender de medição.
*/
.fd-method__lead {
grid-column: 2;
grid-row: 1;
justify-self: start;
align-self: start;
width: 100%;
max-width: calc(472 * var(--fd-u));
/*
* Deslocamento fixo agora que o título tem corpo previsível: no documento a
* primeira linha do parágrafo tem o topo em y=234 da seção.
*/
margin-top: calc(203 * var(--fd-u));
font-size: calc(18 * var(--fd-u));
line-height: 1.5;
}
/* Ancorada no rodapé: 740 − 271 = 469, exatamente o y da prancheta. */
.fd-method__cards {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: calc(271 * var(--fd-u));
display: flex;
align-items: center;
gap: calc(16 * var(--fd-u));
width: min(100%, 1440px);
margin: 0 auto;
padding: calc(48 * var(--fd-u));
list-style: none;
}
.fd-method__cards li {
flex: 1;
height: calc(175 * var(--fd-u));
display: flex;
flex-direction: column;
gap: calc(24 * var(--fd-u));
padding: calc(24 * var(--fd-u));
background: var(--white);
border-bottom: calc(5 * var(--fd-u)) solid var(--green);
}
.fd-method__cards img {
width: calc(32 * var(--fd-u));
height: calc(32 * var(--fd-u));
}
.fd-method__cards p {
color: var(--black);
font-size: calc(16 * var(--fd-u));
line-height: 1.4;
}
/* --- Como o conteúdo é organizado (616:37475) ---------------------------- */
.fd-plans {
position: relative;
overflow: hidden;
background: var(--white);
}
.fd-plans__inner {
position: relative;
padding-block: calc(120 * var(--fd-u));
padding-inline: max(calc(112 * var(--fd-u)), calc((100% - var(--fd-max)) / 2));
}
.fd-plans h2 {
max-width: calc(493 * var(--fd-u));
font-size: calc(48 * var(--fd-u));
line-height: 1;
}
.fd-plans__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: calc(18 * var(--fd-u));
margin-top: calc(60 * var(--fd-u));
}
.fd-plan {
display: flex;
flex-direction: column;
gap: calc(10 * var(--fd-u));
min-height: calc(420 * var(--fd-u));
/* Corta a parte de cima do numeral, que sobe além da borda do cartão. */
overflow: hidden;
}
.fd-plan--green { background: var(--green); }
.fd-plan--gray { background: var(--gray-400); }
.fd-plan--blue { background: var(--blue); }
.fd-plan__top {
flex: 1;
display: flex;
align-items: flex-start;
justify-content: flex-end;
/* Alinhado com a borda direita do cartão branco de baixo. */
padding-right: calc(12 * var(--fd-u));
}
/*
* Numeral do documento: entra pelo topo do cartão e é cortado ali. No
* documento a maiúscula do dígito sobe 24,4 % da própria altura acima da
* borda — como tudo aqui está em `em`, o encaixe segue o corpo.
*/
.fd-plan__num {
margin-top: -0.328em;
color: var(--white);
font-family: var(--sans);
font-size: calc(202 * var(--fd-u));
font-weight: 400;
line-height: 1;
}
/*
* Os algarismos são proporcionais, não tabulares: o "1" tem lateral bearing
* maior que o "2" e o "3". Sem esta correção o "01" pararia 14 px antes dos
* outros dois, e no documento as três tintas terminam na mesma vertical.
*/
.fd-plan--green .fd-plan__num { margin-right: -0.069em; }
.fd-plan--gray .fd-plan__num { margin-right: -0.031em; }
.fd-plan--blue .fd-plan__num { margin-right: -0.040em; }
/*
* Hover: o numeral cresce um pouco e tomba no sentido horário. A origem fica
* na direita, não no centro: assim a tinta continua alinhada com a borda do
* cartão branco de baixo — com a origem no centro ela avançaria 12 e encostaria
* na borda do cartão — e o crescimento vai para o cinza vazio, à esquerda.
*
* O cartão já tem `overflow: hidden`, então o que sobe além do topo é cortado,
* do mesmo jeito que no estado parado.
*/
.fd-plan__num {
transform-origin: 100% 50%;
transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fd-plan:hover .fd-plan__num {
transform: rotate(4deg) scale(1.1);
}
.fd-plan__card {
margin: calc(12 * var(--fd-u));
display: flex;
flex-direction: column;
gap: calc(16 * var(--fd-u));
padding: calc(16 * var(--fd-u));
background: var(--white);
}
.fd-plan h3 {
color: var(--ink);
font-family: var(--sans);
font-size: calc(26 * var(--fd-u));
font-weight: 500;
line-height: 1.3;
text-transform: none;
}
.fd-plan ul {
display: grid;
gap: calc(6 * var(--fd-u));
margin: 0;
padding: 0;
list-style: none;
}
.fd-plan li {
display: flex;
align-items: center;
gap: calc(12 * var(--fd-u));
color: var(--ink);
font-size: calc(14 * var(--fd-u));
line-height: 1.5;
}
.fd-plan li img {
width: calc(13 * var(--fd-u));
height: calc(12 * var(--fd-u));
flex: 0 0 auto;
}
.fd-plans__foot {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: calc(18 * var(--fd-u));
margin-top: calc(60 * var(--fd-u));
}
.fd-plans__foot .fd-btn {
justify-content: space-between;
}
/*
* Faixa de chevrons na terceira coluna do rodapé (743:454), usada aqui e no
* rodapé do bônus — as duas colunas têm os mesmos 393 x 56. Largura em 100 %
* da coluna e altura automática: acima de 981 a coluna mede exatamente os 393
* do desenho, e abaixo disso a faixa acompanha a coluna sem distorcer.
*/
.fd-plans__chevrons,
.fd-bonus__texture {
grid-column: 3;
align-self: center;
width: 100%;
max-width: calc(393 * var(--fd-u));
height: auto;
}
/* --- Aula gratuita (595:35113) ------------------------------------------- */
.fd-free {
position: relative;
isolation: isolate;
min-height: calc(670 * var(--fd-u));
display: flex;
padding: calc(48 * var(--fd-u));
overflow: hidden;
background: var(--gray-100);
}
/*
* Fundo em vídeo (1920x1080, sem áudio, em loop). Duas coisas do quadro mandam
* no enquadramento, medidas com o Vision do macOS em 45 quadros (vídeo trocado
* em 16/09/2026):
* · o rosto da professora vai de 37 % a 63 % da largura e de 15 % a 59 % da
* altura — e tem que ficar sempre à vista;
* · a legenda está gravada na imagem, de 87 % a 96 % da altura, e não pode
* aparecer.
*
* Por isso o vídeo ancora no topo e, no desktop, a caixa dele é 18 % mais alta
* que a seção: a legenda começa em 0,869 x 1,18 = 102 % e fica sempre abaixo do
* corte do `overflow: hidden`, mesmo quando o vídeo é dimensionado pela altura
* (entre 981 e ~1400). Com o texto à esquerda e o botão à direita, o rosto cai
* no vão do meio. Abaixo de 981 a regra é outra: ver o bloco empilhado.
*
* Passar da base também tapa o filete claro do rodapé, que antes pedia
* `height: calc(100% + 1px)`.
*/
.fd-free__bg {
position: absolute;
top: 0;
left: 0;
z-index: -2;
width: 100%;
height: 118%;
object-fit: cover;
object-position: 50% 0%;
}
.fd-free::before {
content: "";
position: absolute;
inset: 0 0 -1px;
z-index: -1;
background: rgba(0, 0, 0, 0.6);
}
/* Seção cinza: o chip vai a branco — cinza sobre cinza sumia. */
.fd-free .fd-label {
background: var(--white);
}
.fd-free__inner {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
gap: calc(48 * var(--fd-u));
}
.fd-free__row {
display: flex;
align-items: flex-end;
gap: calc(60 * var(--fd-u));
}
.fd-free__row > div {
flex: 1;
display: flex;
flex-direction: column;
gap: calc(16 * var(--fd-u));
}
.fd-free h2 {
color: var(--white);
font-size: calc(48 * var(--fd-u));
line-height: 1;
}
.fd-free__row p {
max-width: calc(464 * var(--fd-u));
color: var(--gray-100);
font-size: calc(18 * var(--fd-u));
line-height: 1.5;
}
/* --- Conteúdo do curso (595:35467) --------------------------------------- */
.fd-syllabus {
padding-block: calc(120 * var(--fd-u));
padding-inline: max(calc(112 * var(--fd-u)), calc((100% - var(--fd-max)) / 2));
color: var(--white);
background: var(--black);
}
.fd-syllabus__head {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(18 * var(--fd-u));
max-width: calc(800 * var(--fd-u));
margin-inline: auto;
text-align: center;
}
.fd-label--dark {
background: var(--ink);
}
.fd-label--dark span {
color: var(--gray-100);
}
.fd-syllabus h2 {
font-size: calc(48 * var(--fd-u));
line-height: 1;
}
.fd-syllabus__sub {
max-width: calc(590 * var(--fd-u));
color: var(--gray-400);
font-size: calc(16 * var(--fd-u));
line-height: 1.5;
}
.fd-syllabus__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: calc(18 * var(--fd-u));
margin: calc(60 * var(--fd-u)) 0 0;
padding: 0;
list-style: none;
}
/*
* Cartão do documento da cliente: sem foto, cinza de ponta a ponta, etiqueta
* no topo e o texto ancorado embaixo, sobre um filete verde. Os valores saem
* das proporções medidas no documento (cartão de 407 x 514) aplicadas ao
* cartão daqui, que tem 393 de largura — a seção é de largura travada, então
* `--fd-u` vale 1 acima de 981 e os números são px na prática.
*/
.fd-module {
display: flex;
flex-direction: column;
min-height: calc(497 * var(--fd-u));
background: #e2e2e2;
border-bottom: calc(5 * var(--fd-u)) solid var(--green);
}
/* Módulo 10 ocupa a linha inteira; o resto do cartão é igual aos outros. */
.fd-module--wide {
grid-column: 1 / -1;
}
/*
* Só aqui o título fica em uma linha: "Masterclasses" é uma palavra e o cartão
* tem a largura toda, então a caixa de 6,3em dos outros não faz sentido.
*/
.fd-module--wide .fd-module__body h3 {
max-width: none;
}
.fd-module__badge {
position: relative;
align-self: flex-start;
display: inline-flex;
align-items: stretch;
height: calc(43 * var(--fd-u));
margin: calc(24 * var(--fd-u)) 0 0 calc(15 * var(--fd-u));
background: var(--white);
font-size: calc(18 * var(--fd-u));
font-weight: 500;
line-height: 1;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.fd-module__badge span {
display: flex;
align-items: center;
padding: 0 calc(19 * var(--fd-u));
color: var(--black);
}
.fd-module__badge b {
width: calc(43 * var(--fd-u));
display: grid;
place-items: center;
color: var(--white);
background: var(--blue);
font-weight: 500;
}
/* `margin-top: auto` encosta o bloco de texto no rodapé do cartão. */
.fd-module__body {
display: flex;
flex-direction: column;
gap: calc(11 * var(--fd-u));
margin-top: auto;
padding: 0 calc(33 * var(--fd-u)) calc(38 * var(--fd-u));
}
/*
* `max-width` em `em`, não em px: assim o ponto de quebra acompanha o corpo do
* título e não a largura do cartão. É o que mantém os nove títulos em duas
* linhas em qualquer largura — 6,3em é a caixa do documento (341 para um corpo
* de 54). Sem isso, em telas menores o cartão fica proporcionalmente mais
* largo que o texto e títulos como "O que é design" voltam para uma linha só.
*/
.fd-module__body h3 {
max-width: 6.3em;
color: var(--black);
font-family: var(--sans);
font-size: calc(52 * var(--fd-u));
font-weight: 400;
line-height: 0.96;
text-transform: none;
}
.fd-module__body p {
color: var(--black);
font-size: calc(20 * var(--fd-u));
line-height: 1.21;
}
/* --- Carrosséis ---------------------------------------------------------- */
.fd-carousel {
display: flex;
gap: 24px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 20px;
scrollbar-width: none;
}
.fd-carousel::-webkit-scrollbar {
display: none;
}
.fd-carousel:focus-visible {
outline: 3px solid var(--blue);
outline-offset: 6px;
}
.fd-carousel > * {
scroll-snap-align: start;
}
.fd-carousel__nav {
display: flex;
gap: 8px;
flex: 0 0 auto;
}
.fd-carousel__nav button {
position: relative;
width: 46px;
height: 46px;
padding: 0;
background: var(--white);
border: 1px solid var(--black);
cursor: pointer;
transition: background 160ms ease, color 160ms ease;
}
.fd-carousel__nav button::before {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 10px;
height: 10px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
}
.fd-carousel__nav button[data-dir="prev"]::before {
transform: translateX(2px) rotate(-135deg);
}
.fd-carousel__nav button[data-dir="next"]::before {
transform: translateX(-2px) rotate(45deg);
}
.fd-carousel__nav button:hover {
color: var(--white);
background: var(--black);
}
.fd-carousel__nav button[disabled] {
opacity: 0.3;
cursor: default;
}
.fd-carousel__nav button[disabled]:hover {
color: inherit;
background: var(--white);
}
/* --- Trabalhos dos Leiauteiros (595:36444) ------------------------------- */
.fd-works {
padding-block: calc(120 * var(--fd-u));
background: var(--white);
}
.fd-works__head {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: calc(18 * var(--fd-u));
align-items: start;
padding-inline: max(calc(112 * var(--fd-u)), calc((100% - var(--fd-max)) / 2));
}
.fd-works__head > div:first-child {
grid-column: 1 / span 2;
display: flex;
flex-direction: column;
gap: calc(6 * var(--fd-u));
}
.fd-works h2 {
font-size: calc(48 * var(--fd-u));
line-height: 1;
}
.fd-works__head p {
color: var(--ink);
font-size: calc(16 * var(--fd-u));
line-height: 1.5;
}
.fd-works__nav {
grid-column: 3;
display: flex;
justify-content: flex-end;
gap: calc(6 * var(--fd-u));
}
.fd-works__nav button {
width: calc(32 * var(--fd-u));
height: calc(32 * var(--fd-u));
padding: 0;
background: none;
border: 0;
cursor: pointer;
transition: transform 160ms ease, opacity 160ms ease;
}
.fd-works__nav img {
width: 100%;
height: 100%;
}
.fd-works__nav button:hover {
transform: translateY(-2px);
}
.fd-works__nav button[disabled] {
opacity: 0.3;
cursor: default;
transform: none;
}
.fd-works__nav button:focus-visible {
outline: 3px solid var(--blue);
outline-offset: 3px;
}
.fd-works__track {
margin-top: calc(48 * var(--fd-u));
}
.fd-works .fd-carousel {
gap: calc(16 * var(--fd-u));
padding-inline: max(calc(112 * var(--fd-u)), calc((100% - var(--fd-max)) / 2));
/* sem isso o scroll-snap encosta o 1º cartão na borda e come o padding */
scroll-padding-inline: max(calc(112 * var(--fd-u)), calc((100% - var(--fd-max)) / 2));
padding-bottom: 0;
}
.fd-work {
flex: 0 0 calc(292 * var(--fd-u));
display: flex;
flex-direction: column;
background: var(--gray-100);
}
.fd-work__media {
height: calc(320 * var(--fd-u));
overflow: hidden;
}
.fd-work__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.fd-work__body {
display: flex;
align-items: center;
gap: calc(12 * var(--fd-u));
padding: calc(16 * var(--fd-u));
}
.fd-work__avatar {
width: calc(34 * var(--fd-u));
height: calc(34 * var(--fd-u));
flex: 0 0 auto;
object-fit: cover;
background: var(--gray-200);
}
.fd-work__name {
color: var(--ink);
font-size: calc(16 * var(--fd-u));
font-weight: 500;
line-height: 1;
}
.fd-work__handle {
color: var(--ink);
font-size: calc(12 * var(--fd-u));
line-height: 1.5;
}
/* --- Professores convidados ---------------------------------------------- */
.fd-guests {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(60 * var(--fd-u));
overflow: hidden;
padding-top: calc(80 * var(--fd-u));
color: var(--white);
background: var(--blue);
}
.fd-guests__head {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(18 * var(--fd-u));
width: min(100%, calc(800 * var(--fd-u)));
padding-inline: calc(24 * var(--fd-u));
}
.fd-guests h2 {
width: min(100%, calc(532 * var(--fd-u)));
margin: 0;
color: var(--white);
font-family: var(--display);
font-size: calc(48 * var(--fd-u));
font-weight: 400;
line-height: 1;
text-align: center;
text-transform: uppercase;
}
/* Fita corrida: os cartões sangram os dois lados da tela, como na prancheta. */
.fd-guests__track {
width: 100%;
overflow: hidden;
}
.fd-guests__rail {
display: flex;
width: max-content;
animation: fd-marquee 52s linear infinite;
}
.fd-guests__track:hover .fd-guests__rail {
animation-play-state: paused;
}
.fd-guests__list {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
.fd-guests__list li {
position: relative;
flex: 0 0 auto;
width: calc(208 * var(--fd-u));
height: calc(260 * var(--fd-u));
margin-right: calc(16 * var(--fd-u));
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
}
.fd-guests__list img {
position: absolute;
inset: 0;
width: 100%;
height: calc(100% + 1px);
object-fit: cover;
}
.fd-guests__list div {
position: relative;
display: flex;
flex-direction: column;
gap: calc(2 * var(--fd-u));
padding: calc(17.7 * var(--fd-u));
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
}
.fd-guests__list h3 {
margin: 0;
color: var(--white);
font-family: var(--display);
font-size: calc(22 * var(--fd-u));
font-weight: 400;
line-height: 1;
text-transform: uppercase;
}
.fd-guests__list p {
margin: 0;
color: var(--gray-400);
font-size: calc(12 * var(--fd-u));
font-weight: 500;
line-height: 1;
}
.fd-guests__cta {
min-height: calc(52 * var(--fd-u));
gap: calc(20 * var(--fd-u));
width: calc(258 * var(--fd-u));
padding: calc(18 * var(--fd-u)) calc(18 * var(--fd-u)) calc(18 * var(--fd-u)) calc(26 * var(--fd-u));
font-size: calc(16 * var(--fd-u));
white-space: nowrap;
}
.fd-guests__cta .cta-icon {
width: calc(20 * var(--fd-u));
height: calc(20 * var(--fd-u));
flex: 0 0 calc(20 * var(--fd-u));
}
/* Trama de losangos que fecha a seção. */
.fd-guests__band {
width: 100%;
height: calc(62 * var(--fd-u));
background-color: var(--blue);
background-image:
repeating-linear-gradient(45deg, var(--black) 0 calc(4 * var(--fd-u)), transparent calc(4 * var(--fd-u)) calc(21 * var(--fd-u))),
repeating-linear-gradient(-45deg, var(--black) 0 calc(4 * var(--fd-u)), transparent calc(4 * var(--fd-u)) calc(21 * var(--fd-u)));
}
/* --- Bônus (616:38335) --------------------------------------------------- */
.fd-bonus {
padding-block: calc(120 * var(--fd-u));
padding-inline: max(calc(112 * var(--fd-u)), calc((100% - var(--fd-max)) / 2));
background: var(--gray-100);
}
.fd-bonus__inner {
display: flex;
flex-direction: column;
gap: calc(60 * var(--fd-u));
}
.fd-bonus__head {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: calc(18 * var(--fd-u));
align-items: start;
}
.fd-bonus h2 {
grid-column: 1 / 3;
max-width: calc(533 * var(--fd-u));
margin: 0;
color: var(--black);
font-family: var(--display);
font-size: calc(48 * var(--fd-u));
font-weight: 400;
line-height: 1;
text-transform: uppercase;
}
.fd-bonus h2 em {
color: var(--blue);
font-style: normal;
}
.fd-bonus__lead {
grid-column: 3;
max-width: calc(391 * var(--fd-u));
margin: 0;
color: var(--gray-600);
font-size: calc(16 * var(--fd-u));
line-height: 1.5;
}
.fd-bonus__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: calc(18 * var(--fd-u));
}
.fd-bonuscard {
display: flex;
flex-direction: column;
min-width: 0;
background: var(--ink);
}
.fd-bonuscard__media {
position: relative;
height: calc(320 * var(--fd-u));
/*
* Arredonda para pixel inteiro. Com a altura fracionária, quando o cartão
* vira camada composta (a animação de entrada aplica transform), o
* compositor reamostra a borda e vaza uma linha clara na emenda com o corpo.
*/
height: round(calc(320 * var(--fd-u)), 1px);
display: flex;
align-items: flex-end;
overflow: hidden;
}
.fd-bonuscard__media img {
position: absolute;
inset: 0;
width: 100%;
/* 1px a mais: a última linha reamostrada da foto fica fora do overflow. */
height: calc(100% + 1px);
object-fit: cover;
/*
* As fotos são verticais (4:5) e o cartão é deitado, então sobra altura para
* cortar. Sem isto o corte sai do centro, e em várias fotos o assunto não
* está no centro: a pilha de livros fica embaixo, o notebook da cadeira fica
* em cima. Cada cartão diz onde ancorar pelo `--fd-bonus-foco`, no HTML, com
* o enquadramento da referência que a cliente mandou. 0% = topo da foto,
* 100% = base.
*/
object-position: center var(--fd-bonus-foco, 50%);
}
/*
* Aba com o canto chanfrado. É UMA forma só: a caixa reserva 32 à direita para
* o chanfro e o `clip-path` corta a diagonal. Fazer com retângulo + triângulo
* separados abre um filete claro na emenda quando as duas caixas caem em
* pixels fracionários diferentes.
*/
.fd-bonuscard__tab {
position: relative;
margin: 0;
padding: calc(10 * var(--fd-u)) calc(48 * var(--fd-u)) calc(10 * var(--fd-u)) calc(16 * var(--fd-u));
color: var(--gray-200);
font-family: var(--fd-mono);
font-size: calc(12 * var(--fd-u));
line-height: 1;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
background: var(--ink);
clip-path: polygon(0 0, calc(100% - 32 * var(--fd-u)) 0, 100% 100%, 0 100%);
}
/*
* O corpo sobe 1 px sobre a foto. Em zoom fracionado do navegador as duas
* caixas podem cair em pixels diferentes e abrir um filete claro na emenda;
* a sobreposição elimina isso sem mudar o desenho.
*/
.fd-bonuscard__body {
position: relative;
/*
* Sobreposição de 2px. Em zoom fracionado (90 %, 110 %) ou DPR 1,25 um pixel
* CSS não é um pixel do dispositivo, e 1px de folga ainda deixava passar a
* borda reamostrada da foto.
*/
margin-top: -2px;
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
gap: calc(16 * var(--fd-u));
min-height: calc(180 * var(--fd-u));
padding: calc(16 * var(--fd-u));
/* Fundo próprio: sem ele a margem negativa não cobre nada. */
background: var(--ink);
}
.fd-bonuscard__copy {
display: flex;
flex-direction: column;
gap: calc(8 * var(--fd-u));
}
.fd-bonuscard h3 {
margin: 0;
color: var(--white);
font-family: var(--sans);
font-size: calc(26 * var(--fd-u));
font-weight: 500;
line-height: 1.3;
letter-spacing: 0;
text-transform: none;
}
.fd-bonuscard__copy p {
margin: 0;
color: var(--gray-200);
font-size: calc(14 * var(--fd-u));
line-height: 1.5;
}
.fd-chips {
display: flex;
flex-wrap: wrap;
gap: calc(8 * var(--fd-u));
margin: 0;
padding: 0;
list-style: none;
}
.fd-chips li {
padding: calc(6 * var(--fd-u)) calc(8 * var(--fd-u));
color: var(--gray-400);
font-family: var(--fd-mono);
font-size: calc(10 * var(--fd-u));
font-weight: 500;
line-height: 1;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
border: 1px solid var(--gray-400);
border-radius: 600px;
}
.fd-bonus__foot {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: calc(18 * var(--fd-u));
align-items: stretch;
}
.fd-bonus__cta {
grid-column: 1;
min-height: calc(56 * var(--fd-u));
gap: calc(20 * var(--fd-u));
min-width: 0;
padding: calc(18 * var(--fd-u)) calc(18 * var(--fd-u)) calc(18 * var(--fd-u)) calc(26 * var(--fd-u));
font-size: calc(16 * var(--fd-u));
white-space: nowrap;
}
.fd-bonus__cta .cta-icon {
width: calc(20 * var(--fd-u));
height: calc(20 * var(--fd-u));
flex: 0 0 calc(20 * var(--fd-u));
}
/*
* Mesma peça da seção "Como o conteúdo é organizado" — a regra está lá, com as
* duas seções agrupadas. A coluna do rodapé do bônus tem os mesmos 393 x 56.
*/
/* --- Preço (619:39377) --------------------------------------------------- */
.fd-price {
position: relative;
overflow: hidden;
padding-bottom: 0;
color: var(--white);
background: var(--blue);
}
/*
* Display sangrado: o JS mede a linha e ajusta o corpo para preencher a tela.
*
* No frame 619:39377 a palavra tem 1454px de largura numa seção de 1440 — ela
* sangra 7px de cada lado — e a caixa de texto tem 139px de altura. A tinta da
* ABC Gravity nesse corpo mede 144,5px, ou seja, sobra mais do que a caixa: o
* Figma corta ~2,5px no TOPO (a borda da seção) e deixa a base das letras
* inteira, passando ~3px por baixo da caixa.
*
* Por isso as medidas aqui estão em `em` e não em `--fd-u`: o corpo do título
* acompanha a largura da tela, então altura e deslocamento precisam acompanhar
* junto. Travados em pixel, o corte cresce com a tela — era o que cortava a
* base das letras em telas largas.
*
* As constantes vêm da métrica da ABC Gravity Extra Condensed com line-height 1:
* tinta ......................... 0.7247em
* topo da tinta na caixa de linha 0.2212em
* caixa do Figma (139/199,34) ... 0.6973em
* sangria no topo (2,5/199,34) .. 0.0125em
* Daí: margem = -(0.0125 + 0.2212) = -0.2337em.
*/
.fd-price__display {
height: 0.6973em;
margin: 0;
/*
* `flow-root` no lugar do antigo `overflow: hidden`. O que subia o título
* era a margem negativa do span, e ela só funciona se o h2 for um contexto
* de formatação próprio — senão a margem colapsa para fora e arrasta o h2
* inteiro em vez de mover o texto dentro dele. `overflow: hidden` criava
* esse contexto de brinde, mas junto vinha o corte na base das letras.
*/
display: flow-root;
overflow: visible;
color: rgba(255, 255, 255, 0.2);
font-family: var(--display);
font-size: var(--fd-price-title-size, 13.6vw);
font-weight: 400;
line-height: 1;
text-transform: uppercase;
}
/*
* O display virou fita infinita.
*
* Quem recorta é a seção, que já tem `overflow: hidden` — o h2 precisa seguir
* com `overflow: visible`, porque `overflow-x: hidden` com `overflow-y:
* visible` não existe em CSS: assim que um eixo deixa de ser `visible`, o
* outro vira `auto`, e a base das letras voltaria a ser cortada.
*
* A margem negativa que segura a altura mudou de lugar: agora mora na fita, que
* é quem ocupa a caixa do h2.
*
* Regra de fita que já valia nas outras três da página: o espaçamento vive no
* `margin-right` de cada item, nunca em `gap` da fita ou da fila. Em `gap`, a
* emenda entre as duas filas fica com o dobro do vão e o laço passa do ponto.
*/
.fd-price__fita {
display: flex;
width: max-content;
margin-top: -0.2337em;
animation: fd-marquee 45s linear infinite;
}
.fd-price__fita:hover {
animation-play-state: paused;
}
.fd-price__fila {
display: flex;
}
.fd-price__fila i {
margin-right: 0.28em;
font-style: normal;
white-space: nowrap;
}
.fd-price__inner {
display: grid;
grid-template-columns: 321.375fr 440fr 321.375fr;
gap: calc(53 * var(--fd-u));
align-items: center;
width: min(100%, calc(1188.75 * var(--fd-u)));
margin: 0 auto;
padding-top: calc(40 * var(--fd-u));
}
/* Depoimento alinhado à direita, encostando no cartão. */
.fd-price__quote {
display: flex;
flex-direction: column;
gap: calc(60 * var(--fd-u));
min-width: 0;
margin: 0;
text-align: right;
}
.fd-price__quote blockquote {
margin: 0;
color: var(--white);
font-size: calc(16 * var(--fd-u));
line-height: 1.5;
}
.fd-price__quote figcaption {
display: flex;
align-items: center;
justify-content: flex-end;
gap: calc(12 * var(--fd-u));
}
.fd-price__who {
display: flex;
flex-direction: column;
gap: calc(2 * var(--fd-u));
}
.fd-price__who strong {
font-size: calc(16 * var(--fd-u));
font-weight: 500;
line-height: 1.125;
}
.fd-price__who small {
color: var(--gray-200);
font-size: calc(12 * var(--fd-u));
line-height: 1.5;
}
.fd-price__quote img {
width: calc(38 * var(--fd-u));
height: calc(38 * var(--fd-u));
flex: 0 0 auto;
object-fit: cover;
}
/* --- Cartão de preço ----------------------------------------------------- */
.fd-pricecard {
display: flex;
flex-direction: column;
min-width: 0;
background: var(--ink);
}
.fd-pricecard__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(16 * var(--fd-u));
padding: calc(16 * var(--fd-u));
background: var(--gray-100);
}
.fd-pricecard__logo {
width: calc(158.414 * var(--fd-u));
height: calc(44 * var(--fd-u));
}
.fd-pricecard__badge {
display: inline-flex;
align-items: stretch;
margin: 0;
color: var(--white);
text-transform: uppercase;
background: var(--gray-700);
}
.fd-pricecard__badge span:first-child {
display: grid;
place-items: center;
width: calc(32 * var(--fd-u));
height: calc(32 * var(--fd-u));
font-size: calc(14 * var(--fd-u));
font-weight: 500;
line-height: 1;
letter-spacing: 0.02em;
background: var(--blue);
}
.fd-pricecard__badge span:last-child {
display: grid;
place-items: center;
padding-inline: calc(12 * var(--fd-u));
font-size: calc(12 * var(--fd-u));
font-weight: 500;
line-height: 1;
letter-spacing: 0.02em;
}
.fd-pricecard__body {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: center;
gap: calc(60 * var(--fd-u));
padding: calc(60 * var(--fd-u)) calc(32 * var(--fd-u)) calc(32 * var(--fd-u));
}
.fd-pricecard__amount {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(8 * var(--fd-u));
text-align: center;
}
.fd-pricecard__label {
margin: 0;
font-size: calc(18 * var(--fd-u));
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.03em;
}
.fd-pricecard__value {
margin: 0;
font-family: var(--display);
font-size: calc(88 * var(--fd-u));
font-weight: 400;
line-height: 1;
text-transform: uppercase;
}
.fd-pricecard__cash {
margin: 0;
font-size: calc(16 * var(--fd-u));
font-weight: 500;
line-height: 1;
letter-spacing: 0.03em;
}
.fd-pricecard__action {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(16 * var(--fd-u));
width: min(100%, calc(358 * var(--fd-u)));
}
.fd-pricecard__cta {
min-height: calc(58 * var(--fd-u));
gap: calc(20 * var(--fd-u));
width: 100%;
padding: calc(20 * var(--fd-u)) calc(20 * var(--fd-u)) calc(20 * var(--fd-u)) calc(28 * var(--fd-u));
font-size: calc(18 * var(--fd-u));
white-space: nowrap;
}
.fd-pricecard__cta .cta-icon {
width: calc(20 * var(--fd-u));
height: calc(20 * var(--fd-u));
flex: 0 0 calc(20 * var(--fd-u));
}
.fd-pricecard__flags {
width: calc(197.995 * var(--fd-u));
height: calc(18 * var(--fd-u));
}
/* Faixa final com a trama de cruzes atrás do selo de pagamento. */
.fd-pricecard__safe {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: calc(24 * var(--fd-u));
background-color: var(--ink);
}
/*
* Malha larga do rodapé do cartão de preço, medida no frame 619:39387 num
* export 4x: passo de 25,24, cruz de 8 com traço de 1, branco a 20%.
*
* `background-position: center` é o que faz a malha "encaixar". Ancorada no
* canto (o padrão, 0% 0%), a primeira cruz nasce a 12,7px da borda esquerda e
* a última sobra irregular do outro lado. Centrada, a grade fica simétrica na
* caixa: em 440px de largura dá 17 colunas com 18,2px de margem dos dois
* lados, e nos 84px de altura dá 3 linhas com 16,8px em cima e embaixo —
* exatamente as posições do Figma. Como a tag também é centrada, as bordas do
* fundo dela caem sempre no mesmo ponto entre duas colunas.
*/
.fd-pricecard__safe::before {
content: "";
position: absolute;
inset: 0;
background-image: url("./assets/texture-plus-wide.svg");
background-position: center;
background-size: calc(25.24 * var(--fd-u)) calc(25.24 * var(--fd-u));
opacity: 0.2;
}
.fd-pricecard__safe span {
position: relative;
display: inline-flex;
align-items: center;
gap: calc(10 * var(--fd-u));
padding: calc(8 * var(--fd-u));
color: var(--white);
font-size: calc(14 * var(--fd-u));
line-height: 1;
letter-spacing: 0.03em;
background: var(--ink);
}
.fd-pricecard__safe img {
width: calc(20 * var(--fd-u));
height: calc(20 * var(--fd-u));
flex: 0 0 auto;
}
/* --- Lista do plano ------------------------------------------------------ */
.fd-price__list {
display: flex;
flex-direction: column;
gap: calc(8 * var(--fd-u));
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
}
.fd-price__list li {
display: flex;
align-items: center;
gap: calc(14 * var(--fd-u));
min-height: calc(25.6 * var(--fd-u));
color: var(--gray-200);
font-size: calc(14 * var(--fd-u));
line-height: 1.2;
letter-spacing: 0.03em;
}
.fd-price__list img {
width: calc(22 * var(--fd-u));
height: calc(22 * var(--fd-u));
flex: 0 0 auto;
}
/* --- Garantia (619:39516) ------------------------------------------------ */
.fd-warranty {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(32 * var(--fd-u));
padding-bottom: calc(120 * var(--fd-u));
color: var(--white);
background: var(--blue);
}
.fd-warranty__seal {
width: calc(222 * var(--fd-u));
height: calc(363 * var(--fd-u));
}
/*
* Selo da garantia: uma peça só no arquivo, três animações diferentes.
*
* O SVG está embutido na marcação justamente por isso — como `` a fita e o
* disco só podiam se mover juntos, e girar a fita não tem nada de natural.
*
* · fita — desenrola de cima para baixo, como se descesse por trás do cartão.
* Sem rotação nenhuma.
* · disco — entra depois que a fita termina.
* · texto — gira sozinho, no sentido anti-horário, para o rótulo ser lido na
* ordem em que passa pelo topo.
*
* `transform-box: fill-box` faz a origem ser o centro da própria peça, sem
* precisar de coordenada mágica do viewBox.
*/
.motion-enabled .fd-warranty__fita {
clip-path: inset(0 0 100% 0);
transition: clip-path 900ms var(--motion-ease-scale);
}
.motion-enabled .fd-warranty__seal.is-visible .fd-warranty__fita {
clip-path: inset(0);
}
.motion-enabled .fd-warranty__disco {
opacity: 0;
scale: 0.94;
transform-box: fill-box;
transform-origin: center;
transition:
opacity 620ms var(--motion-ease-out) 560ms,
scale 620ms var(--motion-ease-scale) 560ms;
}
.motion-enabled .fd-warranty__seal.is-visible .fd-warranty__disco {
opacity: 1;
scale: 1;
}
@keyframes fd-selo-giro {
to { rotate: -360deg; }
}
.motion-enabled .fd-warranty__giro {
transform-box: fill-box;
transform-origin: center;
animation: fd-selo-giro 20s linear infinite;
}
.fd-warranty__text {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(18 * var(--fd-u));
padding-inline: calc(24 * var(--fd-u));
text-align: center;
}
.fd-warranty h2 {
margin: 0;
color: var(--white);
font-family: var(--display);
font-size: calc(48 * var(--fd-u));
font-weight: 400;
line-height: 1;
text-transform: uppercase;
}
.fd-warranty__text p {
width: min(100%, calc(590 * var(--fd-u)));
margin: 0;
color: var(--gray-200);
font-size: calc(16 * var(--fd-u));
line-height: 1.5;
}
/* --- Depoimentos em vídeo (568:2866) ------------------------------------- */
/*
* Modo escuro, na disposição da referência de "cases": rótulo e título à
* esquerda, setas no canto direito na altura da última linha do título, e o
* carrossel começando na margem do conteúdo e correndo até a borda da tela. No
* celular as setas descem para baixo do carrossel.
*
* A seção é uma grade de quatro colunas — margem, cabeçalho, setas, margem — em
* vez de padding nos filhos: `%` no padding de um item de grade mediria a área
* dele, não a seção, e a margem sairia errada.
* Os cartões são os do wireframe `568:2866`, no mesmo formato, em versão escura.
*
* O fundo é um cinza entre `--ink` e o preto — #111, misturado dos dois tokens —,
* não preto puro, porque os cartões são pretos. O brilho no alto é branco a 7 %.
* Nenhuma cor nova.
*/
.fd-testimonials {
--fd-depo-margem: max(calc(112 * var(--fd-u)), calc((100% - var(--fd-max)) / 2));
--fd-depo-card: calc(800 * var(--fd-u));
display: grid;
grid-template-columns: var(--fd-depo-margem) minmax(0, 1fr) auto var(--fd-depo-margem);
grid-template-areas:
". head nav ."
"track track track track";
row-gap: calc(56 * var(--fd-u));
padding-block: calc(120 * var(--fd-u));
overflow: hidden;
color: var(--white);
background:
radial-gradient(ellipse 55% 80% at 28% 0%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 70%),
var(--ink);
/* sem `color-mix` o navegador fica na linha de cima, com o `--ink` */
background:
radial-gradient(ellipse 55% 80% at 28% 0%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 70%),
color-mix(in srgb, var(--ink) 50%, var(--black));
}
.fd-testimonials__head {
grid-area: head;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: calc(24 * var(--fd-u));
padding-right: calc(32 * var(--fd-u));
}
/* O chip escuro é `--ink`, quase a cor do fundo daqui: em preto ele se destaca. */
.fd-testimonials .fd-label--dark {
background: var(--black);
}
.fd-testimonials h2 {
max-width: calc(640 * var(--fd-u));
color: var(--white);
font-size: calc(48 * var(--fd-u));
line-height: 1;
text-align: left;
text-transform: uppercase;
}
/* No alto à direita, com a base na linha da base do título. */
.fd-testimonials__nav {
grid-area: nav;
align-self: end;
}
/* Setas do carrossel genérico, invertidas para o escuro. */
.fd-testimonials .fd-carousel__nav {
gap: calc(8 * var(--fd-u));
}
.fd-testimonials .fd-carousel__nav button {
width: calc(48 * var(--fd-u));
height: calc(48 * var(--fd-u));
color: var(--white);
background: transparent;
border-color: rgba(255, 255, 255, 0.4);
}
.fd-testimonials .fd-carousel__nav button:hover {
color: var(--black);
background: var(--white);
border-color: var(--white);
}
.fd-testimonials .fd-carousel__nav button[disabled],
.fd-testimonials .fd-carousel__nav button[disabled]:hover {
color: var(--white);
background: transparent;
border-color: rgba(255, 255, 255, 0.4);
}
/*
* As larguras abaixo de 981 saem em `cqw`, a largura da faixa: `%` num
* `flex-basis` mede a caixa de conteúdo do carrossel, que já desconta o padding.
*/
.fd-testimonials__track {
grid-area: track;
container-type: inline-size;
}
.fd-testimonials .fd-carousel {
gap: calc(24 * var(--fd-u));
padding-inline: var(--fd-depo-margem);
/* sem isso o scroll-snap encosta o 1º cartão na borda e come a margem */
scroll-padding-inline: var(--fd-depo-margem);
padding-bottom: 0;
}
/*
* Cartão de 800u: texto de 390u, vão de 48u e miniatura de 280x373u (3:4), com
* 41u e 49u de respiro. Escuro: preto sobre o cinza da seção.
*/
.fd-testimonial {
flex: 0 0 var(--fd-depo-card);
display: grid;
grid-template-columns: minmax(0, 1fr) calc(280 * var(--fd-u));
column-gap: calc(48 * var(--fd-u));
padding: calc(49 * var(--fd-u)) calc(41 * var(--fd-u));
background: var(--black);
}
.fd-testimonial__text {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: calc(32 * var(--fd-u));
margin: 0;
padding-top: calc(12 * var(--fd-u));
}
.fd-testimonial__quote {
margin: 0;
}
.fd-testimonial__quote p {
color: var(--white);
font-size: calc(20 * var(--fd-u));
font-weight: 500;
line-height: 1.5;
}
.fd-testimonial__person {
display: flex;
align-items: center;
gap: calc(16 * var(--fd-u));
}
.fd-testimonial__avatar {
width: calc(48 * var(--fd-u));
height: calc(48 * var(--fd-u));
flex: 0 0 auto;
object-fit: cover;
}
.fd-testimonial__name,
.fd-testimonial__role {
display: block;
line-height: 1.5;
}
.fd-testimonial__name {
color: var(--white);
font-size: calc(16 * var(--fd-u));
font-weight: 700;
}
.fd-testimonial__role {
color: var(--gray-400);
font-size: calc(14 * var(--fd-u));
}
/*
* A miniatura inteira é o link. Sem JS ele leva ao YouTube; com JS o vídeo abre
* aqui mesmo, no `