/*
Theme Name: Vinci Hair Clinic — Landing Page
Theme URI: https://www.vincihairclinic.com/
Author: Vinci Medical Group
Description: Tema da landing page da Vinci Hair Clinic. Réplica fiel do design do Figma, com os dados da cidade (nome, endereço, telefone, clínicas) no Customizer — clonar para uma nova cidade é trocar as opções, não o código.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vinci
Tags: landing-page, one-page, custom-colors
Este arquivo contém a versão DESKTOP (1440px), fiel ao Figma.
A versão mobile vive em mobile.css, exclusivamente em blocos @media (max-width),
carregado depois deste. Nenhuma regra daqui deve ser alterada na etapa mobile.
*/
/* ==========================================================================
1. FONTES — Myriad Pro embarcada no tema
========================================================================== */
/*
* Os três "-override" abaixo são o que faz o texto cair na mesma linha do Figma.
*
* O Myriad Pro traz dois jogos de métricas verticais: typo (750/-250, soma 100%)
* e win (952..989/250, soma 120..124%). O Figma posiciona a baseline pelas typo;
* o Chrome no Windows usa as win. Sem correção o texto desce de 2px (16px) a
* 7px (72px) — e os três pesos desalinham até entre si, porque cada um tem um
* winAscent diferente. Normalizando para 75/25/0 o cálculo de half-leading do
* navegador passa a ser idêntico ao do Figma.
*/
@font-face {
font-family: "Myriad Pro";
src: url("assets/fonts/myriadpro-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
ascent-override: 75%;
descent-override: 25%;
line-gap-override: 0%;
}
@font-face {
font-family: "Myriad Pro";
src: url("assets/fonts/myriadpro-semibold.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
ascent-override: 75%;
descent-override: 25%;
line-gap-override: 0%;
}
@font-face {
font-family: "Myriad Pro";
src: url("assets/fonts/myriadpro-bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
ascent-override: 75%;
descent-override: 25%;
line-gap-override: 0%;
}
/* ==========================================================================
2. TOKENS — extraídos nó a nó do Figma
========================================================================== */
:root {
/* Marca */
--c-brown: #503629;
--c-brown-dark: #53382B;
--c-brown-mid: #845D32;
--c-gold: #BC955C;
--c-amber: #FFB71B;
--c-sand: #F9DCB5;
/* Fundos */
--c-cream: #F1E9DD;
--c-cream-50: #FAF7F2;
--c-cream-100: #F8F4EC;
--c-off-white: #F8F8F5;
--c-white: #FFFFFF;
/* Texto e traços */
--c-ink: #101820;
--c-gray: #636569;
--c-gray-light: #9E9E9E;
--c-line: rgba(0, 0, 0, 0.05);
--c-line-white: rgba(255, 255, 255, 0.15);
/* Semânticas */
--c-red: #941413;
--c-green: #00B67A;
/* Layout */
--page-w: 1440px;
--content-w: 1216px;
--gutter: 112px;
--pad-x: max(24px, (100% - 1216px) / 2);
/* Raios */
--r-8: 8px;
--r-12: 12px;
--r-16: 16px;
--r-pill: 9999px;
/* Sombra de card — pilha de 4 camadas do Figma */
--shadow-card:
0 2.77px 2.21px rgba(0, 0, 0, 0.02),
0 6.65px 5.32px rgba(0, 0, 0, 0.03),
0 12.52px 10.02px rgba(0, 0, 0, 0.04),
0 22.34px 17.87px rgba(0, 0, 0, 0.04);
/* Design System — rampas nomeadas (página Colors, 1431:298). As cores de
marca acima são as mesmas; estes nomes são os que o DS usa nos estados. */
--c-primary-900: #503629;
--c-primary-700: #845D32;
--c-primary-500: #BC955C;
--c-primary-300: #D6D1CA;
--c-primary-100: #F8F4EC;
--c-gray-200: #D9D9D9;
--c-gray-500: #9E9E9E;
/* Design System — movimento (página Motion & Interaction, 1423:11959). */
--dur-instant: 0ms;
--dur-fast: 100ms;
--dur-normal: 200ms;
--dur-slow: 300ms;
--dur-deliberate: 500ms;
--ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
--ease-in: cubic-bezier(0.42, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.58, 1);
--ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
/* Tipografia */
--font: "Myriad Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
}
/* ==========================================================================
3. RESET
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--font);
font-size: 18px;
line-height: 1.4;
font-weight: 400;
color: var(--c-brown);
background: var(--c-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
/* O navegador esconde [hidden] com display:none, mas qualquer regra de autor
com display vence essa. Sem este !important, todo bloco que use flex ou grid
continua visível mesmo com o atributo posto — foi o que aconteceu com o
campo condicional "¿Cuál?". Vale para o tema inteiro, de uma vez. */
[hidden] {
display: none !important;
}
/* -- peças que só existem no mobile --------------------------------------
Ficam sempre no HTML e somem no desktop. Não ocupam caixa nenhuma aqui, e
por isso não alteram em nada o desenho aprovado. */
img,
svg,
video {
display: block;
max-width: 100%;
}
img {
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
margin: 0;
}
button {
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
/* ==========================================================================
4. PRIMITIVOS DE LAYOUT
========================================================================== */
.v-page {
overflow-x: clip;
/* Reserva o lugar das duas barras fixas: a do topo (38px) e a de CTA no
rodapé da tela (80px). No Figma as duas são filhas FIXED do frame, e o
conteúdo que rola termina exatamente onde a barra de CTA começa. */
padding-top: 38px;
padding-bottom: 80px;
}
/* A página de obrigado não tem barra de CTA (quem chegou ali já é lead), então
o recuo de baixo viraria uma faixa vazia no fim da rolagem. */
body.page-template-page-thank-you .v-page,
body.page-template-page-thank-you.v-page {
padding-bottom: 0;
}
/* Âncoras do menu param abaixo das barras fixas, não atrás delas. */
[id] {
scroll-margin-top: 118px;
}
/* Seção full-bleed com conteúdo travado em 1216px e centralizado.
Em 1440px o recuo resolve exatamente 112px, como no Figma. */
.v-section {
padding-inline: var(--pad-x);
}
.v-inner {
width: 100%;
max-width: var(--content-w);
margin-inline: auto;
}
.v-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Foco visível para teclado, sem poluir o clique do mouse. */
:focus-visible {
outline: 2px solid var(--c-gold);
outline-offset: 2px;
}
/*
* Quebras de linha e trechos que só existem numa das larguras.
*
* O Figma escreve à mão a quebra de vários títulos, e ela cai em pontos
* diferentes no desenho de 1440 e no de 390. O template marca cada uma com a
* largura a que pertence e o CSS decide qual vale — aqui ficam os padrões do
* desktop, e o mobile.css inverte os dois.
*
* Sem esta regra, toda `br--narrow` do mobile também quebra no desktop: era o
* que fazia "Our Manchester Clinic" sair em duas linhas num título de 800px
* onde o texto ocupa 608. Vale para o ``: o desktop
* mostra o trecho longo e esconde o curto.
*/
br.br--narrow,
.so-narrow {
display: none;
}
br.br--wide {
display: inline;
}
/* ==========================================================================
5. BOTÕES — componente "Button" do Design System (BN7zJUzBLSLErbnVk779Eu,
página 1453:2)
========================================================================== */
/*
* O Design System define QUATRO tipos, TRÊS tamanhos e QUATRO estados, e a LP
* só usa instâncias desse componente. Tudo aqui sai da página "Buttons":
*
* tamanho altura rótulo recuo lateral vão classe
* Large 48px 16 / 140% 24 8 .btn--lg
* Medium 40px 14 / 140% 16 8 .btn--md
* Small 32px 12 / 140% 12 4 .btn--sm
*
* tipo padrão hover pressed disabled
* Primary fundo Primary/pure fundo Primary/medium fundo Primary/dark fundo Gray/200, texto Gray/500
* texto branco
* Secondary fundo branco, traço fundo Primary/ fundo Primary/light traço Gray/200, texto Gray/500
* e texto Primary/pure lightest, texto texto Primary/dark
* Primary/medium
* Tertiary só texto Primary/pure igual ao Secondary, igual ao Secondary, texto Gray/500
* Ghost (idem) sem traço sem traço
*
* Movimento (página 1423:11959): hover em 100ms ease-out, só fundo e cor;
* pressionar é instantâneo, scale(0.98) e o fundo mais escuro; o anel de foco
* aparece sem transição. Com prefers-reduced-motion nada se move.
*
* Largura sempre HUG: o rótulo vem do Customizer ou da tradução, e uma
* largura fixa estouraria em outro idioma.
*
* .btn--gold e .btn--outline são os nomes antigos de Primary e Secondary. Ficam
* como apelidos porque o plugin Vinci Form e páginas já publicadas os usam.
*/
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 0;
border-radius: var(--r-pill);
/*
* Rótulo no centro ÓTICO da pílula.
*
* Com as métricas do Myriad Pro normalizadas em 75/25 (bloco 1), a linha
* de 140% põe a baseline a 95% do corpo e a altura de maiúscula (0,674em)
* termina a 27,6% — o miolo das letras fica 0,087em ACIMA do meio da
* caixa. O Figma desenha assim, com o texto "subindo" 1,4px no Large.
*
* Um recuo de 0,174em só no topo, com altura fixa e align-items:center,
* desce o rótulo exatamente metade disso: 1,39px no Large, 1,22 no Medium,
* 1,04 no Small. Em em, e não em px, para acompanhar qualquer tamanho.
*/
padding-top: 0.174em;
padding-bottom: 0;
white-space: nowrap;
text-align: center;
font-weight: 600;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
/* Impede que o flex da seção encolha o botão. */
flex-shrink: 0;
transition:
background-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
/* Pressionar é instantâneo — o DS pede "instant scale(0.98)". */
.btn:active:not(:disabled):not([aria-disabled="true"]) {
transform: scale(0.98);
transition-duration: 0ms;
}
/* O anel de foco não anima: aparece de uma vez. */
.btn:focus-visible {
outline: 2px solid var(--c-primary-500);
outline-offset: 2px;
}
.btn:disabled,
.btn[aria-disabled="true"] {
cursor: not-allowed;
transform: none;
}
/* Quem pediu menos movimento vê só a troca de cor, sem transição nem escala. */
@media (prefers-reduced-motion: reduce) {
.btn {
transition: none;
}
.btn:active:not(:disabled):not([aria-disabled="true"]) {
transform: none;
}
}
/* -- tamanhos ---------------------------------------------------------- */
.btn--lg {
height: 48px;
gap: 8px;
padding-inline: 24px;
font-size: 16px;
line-height: 22.4px;
}
.btn--md {
height: 40px;
gap: 8px;
padding-inline: 16px;
font-size: 14px;
line-height: 19.6px;
}
.btn--sm {
height: 32px;
gap: 4px;
padding-inline: 12px;
font-size: 12px;
line-height: 16.8px;
}
/* -- tipos ------------------------------------------------------------- */
.btn--primary,
.btn--gold {
background-color: var(--c-primary-500);
color: var(--c-white);
}
.btn--primary:hover,
.btn--gold:hover {
background-color: var(--c-primary-700);
}
.btn--primary:active,
.btn--gold:active {
background-color: var(--c-primary-900);
}
/*
* O traço do Figma é INSIDE: se virasse `border`, a caixa cresceria 2px e o
* botão deixaria de ter 48. Por isso inset shadow.
*/
.btn--secondary,
.btn--outline {
background-color: var(--c-white);
box-shadow: inset 0 0 0 1px var(--c-primary-500);
color: var(--c-primary-500);
}
.btn--secondary:hover,
.btn--outline:hover {
background-color: var(--c-primary-100);
color: var(--c-primary-700);
}
.btn--secondary:active,
.btn--outline:active {
background-color: var(--c-primary-300);
color: var(--c-primary-900);
}
.btn--tertiary,
.btn--ghost {
background-color: transparent;
color: var(--c-primary-500);
}
.btn--tertiary:hover,
.btn--ghost:hover {
background-color: var(--c-primary-100);
color: var(--c-primary-700);
}
.btn--tertiary:active,
.btn--ghost:active {
background-color: var(--c-primary-300);
color: var(--c-primary-900);
}
/* -- desabilitado (vale para os quatro tipos) --------------------------- */
.btn--primary:disabled,
.btn--primary[aria-disabled="true"],
.btn--gold:disabled,
.btn--gold[aria-disabled="true"] {
background-color: var(--c-gray-200);
color: var(--c-gray-500);
}
.btn--secondary:disabled,
.btn--secondary[aria-disabled="true"],
.btn--outline:disabled,
.btn--outline[aria-disabled="true"] {
background-color: var(--c-white);
box-shadow: inset 0 0 0 1px var(--c-gray-200);
color: var(--c-gray-500);
}
.btn--tertiary:disabled,
.btn--tertiary[aria-disabled="true"],
.btn--ghost:disabled,
.btn--ghost[aria-disabled="true"] {
background-color: transparent;
color: var(--c-gray-500);
}
/* Caixa de ícone.
O Figma exporta o SVG no limite do traço, não no da moldura em que o ícone
está desenhado. Impor largura e altura à estica o desenho — o play do
"Ver Vídeo" chegava a 1,64x. Aqui a caixa fica com a medida do Figma e o
SVG desenha no tamanho natural. */
.v-ico {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
}
.v-ico > svg {
flex: none;
}
.v-ico--20 {
width: 20px;
height: 20px;
}
/* O play não é centrado na moldura: no Figma o triângulo fica a 6px da
esquerda, para compensar o vazio que a própria forma deixa à direita. */
.btn__play {
width: 18px;
height: 18px;
justify-content: flex-start;
padding-left: 5.6px;
}
/* ==========================================================================
6. SEÇÃO 1 — barra superior (Figma 1259:11891, 1440x38)
========================================================================== */
/*
* Os 38px são 8 de padding + a linha de 22px + 8. O Figma escreve
* padding: 8px 152px, mas o conteúdo é centralizado e cabe folgado nas duas
* larguras — o padding lateral nunca entra em jogo, então aqui basta centrar.
*/
.topbar {
position: fixed;
z-index: 60;
top: 0;
right: 0;
left: 0;
height: 38px;
background: var(--c-cream-50);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* 22px é a altura da linha de texto; o pin de 15px se centraliza dentro dela. */
.topbar__card {
display: flex;
align-items: center;
height: 22px;
gap: 4px;
}
.topbar__pin {
width: 12px;
height: 15px;
flex: none;
margin-inline: 3px;
}
.topbar__address {
font-size: 16px;
line-height: 22.4px;
font-weight: 600;
color: var(--c-brown-mid);
}
/* ==========================================================================
7. SEÇÃO 2 — hero (Figma 1286:9888, 1440x831)
========================================================================== */
.hero {
position: relative;
height: 831px;
background: var(--c-white);
overflow: hidden;
}
/* A foto (1286:9893) entra no Figma com 1452x1570 em @(-6,-484) sobre a fonte
de 2308x2500: o hero mostra dela a fatia x 9,5..2298,3 / y 770,7..2094,0.
O arquivo do tema passou a ser exatamente essa fatia (2289x1323, recortada
da fonte do design), e por isso aqui basta `cover` centrado: a proporção da
foto (1,730) é a mesma da caixa (1440/831 = 1,733) e não sobra recorte para
escolher. O `50% 66%` de antes vinha de uma conta feita para a foto INTEIRA
(1440x1560); o arquivo, porém, já era um recorte de 2290x1383, e o resultado
era a foto 17px abaixo do desenho. */
.hero__bg {
position: absolute;
inset: 0;
}
.hero__bg picture {
display: block;
width: 100%;
height: 100%;
}
.hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
/* O vídeo do YouTube entra por cima da foto e só aparece depois de carregado,
para nunca piscar um quadro preto sobre o design.
pointer-events:none é obrigatório: sem isso o iframe captura o clique e o
YouTube abre seus próprios controles e o link "assistir no YouTube" por
cima da primeira dobra. */
.hero__yt {
position: absolute;
inset: 0;
overflow: hidden;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-deliberate) var(--ease-out);
}
.hero__yt.is-playing {
opacity: 1;
}
/* O iframe é sempre 16:9 e a primeira dobra não é; o JS dá a ele o tamanho
que cobre a área, e daqui ele fica centrado com o excesso cortado. */
.hero__yt iframe {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 0;
max-width: none;
pointer-events: none;
}
/* Véu 1286:9894, fill #503629A3. No Figma ele transborda o hero de todos os
lados; com o clip da seção, `inset: 0` dá exatamente a mesma mancha. */
.hero__scrim {
position: absolute;
inset: 0;
background: rgba(80, 54, 41, 0.64);
}
/* -- cabeçalho sobreposto ------------------------------------------------
1286:9937 — 1440x80, logo à esquerda e, à direita, exatamente dois blocos:
os links (1286:10179) e o botão dourado (1286:10189), com 40 de vão.
Não há seletor de idioma: o site é só inglês. */
/* Fixo logo abaixo da barra superior. Continua transparente sobre a foto do
hero, como no Figma, e ganha fundo assim que passa a flutuar sobre as
seções claras — senão o texto branco desapareceria. */
.hero__header {
position: fixed;
z-index: 55;
top: 38px;
right: 0;
left: 0;
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: var(--pad-x);
}
/* Marrom da marca: mantém o logo e os links brancos legíveis, sem trocar
nenhum arquivo, e é a cor escura dominante do projeto. */
.hero__header.is-stuck {
background: var(--c-brown);
box-shadow: 0 2px 20px rgba(30, 20, 14, 0.22);
}
@media (prefers-reduced-motion: no-preference) {
.hero__header {
transition:
background-color var(--dur-normal) var(--ease-default),
box-shadow var(--dur-normal) var(--ease-default);
}
}
.hero__logo svg {
width: 104px;
height: 40px;
}
.hero__actions {
display: flex;
align-items: center;
height: 48px;
gap: 40px;
}
/* 1286:10179 — 730x22, seis links mais o telefone, gap 32.
A largura vai fixa nos 730 do Figma, e não em HUG, porque o Myriad Pro do
navegador desenha os sete rótulos 3,7px mais estreitos que o Figma: em HUG
essa sobra some toda no primeiro vão e empurra "Results" 4px para a direita
(a faixa é ancorada à direita, pelo botão dourado). Com a caixa travada em
730 e `space-between`, a diferença se reparte pelos seis vãos e cada item
cai a menos de 1px do x do desenho. O `gap` fica como piso. */
.hero__nav {
display: flex;
align-items: center;
justify-content: space-between;
width: 730px;
height: 22px;
gap: 32px;
}
.hero__nav-link,
.hero__phone span {
font-size: 16px;
line-height: 22.4px;
font-weight: 600;
color: var(--c-white);
}
.hero__nav-link:hover {
color: var(--c-sand);
}
.hero__phone {
display: flex;
align-items: center;
gap: 8px;
}
/* 1286:10187 — 28x14. O arquivo sai de vinci_flag_url(), que o escolhe pelo
campo "País (sigla)" do Customizer. */
.hero__flag {
width: 28px;
height: 14px;
flex: none;
object-fit: cover;
}
/* O botão do cabeçalho é Primary Medium (I3044:9965) nas duas larguras; o
tamanho vem inteiro de .btn--md. */
/* -- coluna de texto -----------------------------------------------------
1286:10194 — 592x561 @(112,136). */
.hero__copy {
position: absolute;
z-index: 1;
top: 136px;
left: var(--pad-x);
width: 592px;
}
.hero__copy-inner {
display: flex;
flex-direction: column;
}
.hero__title-block {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
}
/* Badge de financiamento 1286:10200 — 338x32 no desktop, 220x32 no mobile
(o texto encurta). Largura HUG nos dois casos. O BACKGROUND_BLUR 22 do
Figma é raio 11 em CSS. */
.hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
height: 32px;
padding: 0 12px 0 4px;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--r-pill);
background: rgba(255, 255, 255, 0.10);
-webkit-backdrop-filter: blur(11px);
backdrop-filter: blur(11px);
}
/* Pílula 1286:10202 — 47x24 = 31 do texto mais 8 de cada lado. O recuo
vertical de 8 do Figma é nominal: com a altura travada em 24 e a entrelinha
de 22.4, só o horizontal muda a caixa. */
.hero__eyebrow-pill {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 8px;
border-radius: var(--r-pill);
background: var(--c-cream-50);
font-size: 16px;
line-height: 22.4px;
font-weight: 600;
color: var(--c-brown-mid);
}
.hero__eyebrow-text {
font-size: 16px;
line-height: 22.4px;
font-weight: 600;
color: var(--c-white);
}
.hero__title {
font-size: 72px;
line-height: 79.2px;
font-weight: 700;
color: var(--c-white);
}
.hero__lede {
margin-top: 8px;
font-size: 20px;
line-height: 28px;
font-weight: 400;
color: var(--c-white);
}
/* Só o mobile tem trechos em 600 (1259:9472); no desktop o lede é todo 400. */
.hero__lede strong {
font-weight: 600;
}
/* 1286:10208 — LINE 592x0, traço 1px CENTER: no Figma ela tem altura ZERO e
os 24 de vão contam a partir do y da linha. Uma é a coluna e os
* filhos são cabeçalho, grade e selo.
* 112 + 253 + 72 + 703 + 72 + 105 + 112 = 1429.
*/
section.pricing {
display: flex;
flex-direction: column;
align-items: center;
gap: 72px;
/* Sem recuo lateral: a grade de 1215px se centra sozinha. */
padding: 112px 0;
background: var(--c-cream-50);
}
.pricing__header {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
width: 100%;
}
/* A .sec-label do tema trava a altura em 12px (a mancha da letra) para o que
vem abaixo não escorregar. Aqui o Figma mede os 24px até o título a partir da
caixa inteira de 25px, então o rótulo recupera a altura de linha. Vale também
no mobile: o .sec-label geral de lá (13px) tem menos especificidade. */
.pricing .sec-label {
height: 25px;
line-height: 25.2px;
}
.pricing__tagline {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 100%;
}
.pricing__title {
width: 100%;
text-align: center;
}
.pricing__lede {
width: 100%;
text-align: center;
}
/* No desktop o Figma não destaca nada no lede. O está no HTML por
causa do mobile, onde "£70 per month" vem em 600 — aqui volta a 400. */
.pricing__lede strong {
font-weight: 400;
}
/*
* A grade é um grid de duas linhas, não uma linha de flex.
*
* A primeira linha (52px) é o espaço por onde a fita "Most Popular" sobe; a
* segunda é o corpo dos cartões. Os cartões 1 e 3 ocupam só a linha 2 e esticam
* juntos até a altura do mais alto (651); o do meio ocupa as duas (52 + 651 =
* 703), gasta 48 com a fita e sobram 655 para o corpo. É daí que vem o "corpo do
* popular tem 4px a mais" que o Figma traz sem causa aparente — com o grid ele
* deixa de ser número mágico.
*
* 394 + 16 + 395 + 16 + 394 = 1215. Não são os 1216 de --content-w.
*/
.pricing .pplans {
display: grid;
/* minmax(0, …): em 1440 as colunas têm as medidas do Figma; entre 1024 e
1279, onde a coluna de conteúdo é mais estreita que 1215, as três
encolhem por igual em vez de empurrar a página para o lado. */
grid-template-columns: minmax(0, 394px) minmax(0, 395px) minmax(0, 394px);
grid-template-rows: 52px auto;
column-gap: 16px;
width: 1215px;
max-width: 100%;
}
.pplan {
display: flex;
flex-direction: column;
grid-row: 2;
}
.pplan--popular {
grid-row: 1 / span 2;
}
/* Gradiente do Figma com handles (0.5,1) -> (0.5,0): sobe, de #845D32 para
#BC955C. O traço é INSIDE, por isso inset e não border — com border a fita
passaria de 48px e o rótulo sairia do centro. */
.pplan__flag {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 48px;
padding: 12px 8px 8px;
background: linear-gradient(to top, var(--c-brown-mid) 0%, var(--c-gold) 100%);
border-radius: var(--r-16) var(--r-16) 0 0;
box-shadow: inset 0 0 0 1px var(--c-brown-mid);
font-size: 20px;
line-height: 28px;
font-weight: 600;
color: var(--c-white);
}
/* Mesmo motivo do traço em inset: com border, os 32px de recuo passariam a
medir de fora e o miolo do cartão encolheria 2px. */
.pplan__body {
display: flex;
flex-direction: column;
flex: 1;
padding: 32px;
background: var(--c-white);
border-radius: var(--r-16);
box-shadow: inset 0 0 0 1px var(--c-cream);
}
.pplan--popular .pplan__body {
border-radius: 0 0 var(--r-16) var(--r-16);
box-shadow: inset 0 0 0 1px var(--c-brown-mid);
}
.pplan__inner {
display: flex;
flex-direction: column;
gap: 24px;
}
/*
* O cartão do meio desce o conteúdo. No Figma o corpo dele é o único com
* cross:MAX (alinha embaixo) e o wrapper interno tem a altura travada em 563:
* dos 591 disponíveis sobram 28 em cima e 13 embaixo. É ruído do arquivo, mas
* está no PNG aprovado — os 28 saem do margin-top:auto e os 13 da margem de
* baixo. Apagar estas duas linhas alinha os três cartões pelo topo.
*/
.pplan--popular .pplan__inner {
margin-top: auto;
margin-bottom: 13px;
}
.pplan__title {
font-size: 20px;
line-height: 28px;
font-weight: 600;
color: var(--c-brown);
}
/* O fio de baixo também é INSIDE no Figma: o bloco tem 227px COM ele, não 228.
Por isso a sombra em vez de border-bottom. */
.pplan__price-block {
display: flex;
flex-direction: column;
gap: 8px;
padding-bottom: 32px;
box-shadow: inset 0 -1px 0 var(--c-off-white);
}
.pplan__from {
font-size: 18px;
line-height: 25.2px;
font-weight: 400;
color: var(--c-gray);
}
.pplan__price-inner {
display: flex;
flex-direction: column;
gap: 16px;
}
/* No desktop o preço e a parcela ficam a 16px um do outro; no mobile, a 4. */
.pplan__amount {
display: flex;
flex-direction: column;
gap: 16px;
}
.pplan__price {
font-size: 56px;
line-height: 61.6px;
font-weight: 600;
color: var(--c-brown);
}
.pplan__month {
font-size: 20px;
line-height: 28px;
font-weight: 600;
color: #000;
}
/* Primary Medium (.btn--md) com largura FILL: ocupa a coluna do cartão. */
.pplan__cta {
width: 100%;
}
.pplan__features {
display: flex;
flex-direction: column;
gap: 12px;
}
/* flex-start, não center: no Figma o check encosta no topo da linha de 25px. */
.pplan__feature {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 18px;
line-height: 25.2px;
font-weight: 400;
color: #000;
}
/* Caixa de 18x19 com recuo de 4 no Figma; o vetor de 12,23x9,02 fica centrado. */
.pplan__check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 19px;
flex: none;
}
.pplan__check svg {
flex: none;
}
.pplan__feature-text {
flex: 1 1 auto;
}
/* Só o número de enxertos vem em 600 ("Up to 1,500 Grafts"); o resto fica 400. */
.pplan__feature strong {
font-weight: 600;
}
.pplan__note {
font-size: 18px;
line-height: 25.2px;
font-weight: 600;
color: var(--c-brown);
}
/*
* Decisão registrada (a spec deixou em aberto): o Figma trava a nota dos
* cartões 1 e 2 em 256px e deixa a do cartão 3 com a largura toda (330), o que
* muda onde a frase quebra. É inconsistência do arquivo, mas é o que está no PNG
* aprovado — seguimos o Figma e amarramos os 256px à posição na grade. No mobile
* os três voltam a 100%.
*/
.pplan:nth-child(-n+2) .pplan__note {
width: 256px;
}
.pricing__seal {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
width: 189.23px;
}
.pricing__seal-label {
font-size: 18px;
line-height: 25.2px;
font-weight: 400;
color: #000;
text-align: center;
}
/* A caixa fica reservada mesmo enquanto o SVG do regulador não estiver em
assets/icons: sem ela a seção encolheria 56px e o que vem abaixo subiria. */
.pricing__seal-logo {
display: flex;
align-items: center;
justify-content: center;
width: 189.23px;
height: 56px;
}
/* ==========================================================================
12. SEÇÃO 6 — faixa de financiamento (Figma 1259:11298, 1440x176)
========================================================================== */
.financing {
position: relative;
height: 176px;
background: var(--c-gold);
overflow: hidden;
}
.financing__content {
position: absolute;
top: 72px;
left: var(--pad-x);
display: flex;
align-items: center;
gap: 16px;
height: 32px;
}
/*
* O quadrado de 32px atrás do glifo é arredondado só no canto superior
* esquerdo (radius 16/0/0/0 no Figma) — não é um círculo. E o fundo dele muda
* com a largura: branco no desktop, creme no mobile. Por isso a cor mora aqui
* e não dentro do arquivo SVG, que é o mesmo nas duas telas.
*/
/* "financing-banner / inner" (I1259:11298;1259:21296): círculo branco de 32
com o glifo credit_score de 16 no centro. No mobile a moldura é outra
(mobile.css). */
.financing__icon {
display: grid;
place-items: center;
width: 32px;
height: 32px;
flex: none;
border-radius: var(--r-pill);
background: var(--c-white);
}
.financing__text {
font-size: 18px;
line-height: 25.2px;
font-weight: 600;
color: var(--c-white);
}
/* Este botão não se alinha à margem de 112px: no Figma a borda direita cai em
1254 de 1440, ou seja, 74px para dentro da margem.
A largura é HUG, nunca fixa: com 200px o rótulo inglês ("Start Your Journey
Today", 221px) já não cabia. */
.financing__cta {
position: absolute;
top: 60px;
right: calc(var(--pad-x) + 74px);
}
/* ==========================================================================
13. SEÇÃO 7 — simulador de linha capilar (Figma 1259:11299, 1440x812)
========================================================================== */
/* A altura é HUG no Figma — 112 de topo + 588 de conteúdo + 112 de base = 812.
Por isso o padding manda e não existe height fixo: se o rótulo de um passo
crescer em outro idioma, a seção acompanha em vez de cortar.
O recuo do frame é 152, mas quem decide a mancha é o filho de 1008 centrado:
(1440 − 1008) / 2 = 216 de margem visual. Não é --content-w (1216) — esta
seção é a única com 1008. */
.hairline {
position: relative;
padding: 112px 152px;
overflow: hidden;
}
.hairline__bg {
position: absolute;
inset: 0;
}
.hairline__bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* São duas camadas de fill no Figma: a foto e um #503629 com opacity 0.64.
O mesmo 0.64 vale no mobile — não há véu mais fechado lá. */
.hairline__scrim {
position: absolute;
inset: 0;
background: rgba(80, 54, 41, 0.64);
}
.hairline__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 64px;
max-width: 1008px;
margin-inline: auto;
}
.hairline__logo svg {
width: 166px;
height: 64px;
}
.hairline__title-block {
width: 800px;
text-align: center;
}
.hairline__title {
font-size: 72px;
line-height: 79.2px;
font-weight: 700;
color: var(--c-white);
}
.hairline__lede {
margin-top: 8px;
font-size: 20px;
line-height: 28px;
font-weight: 400;
color: var(--c-white);
}
/* SPACE_BETWEEN: o itemSpacing: 80 declarado no Figma é ignorado pelo próprio
Figma. Os três passos somam 201 + 355 + 352 = 908 dos 1008, então o vão real
é (1008 − 908) / 2 = 50. Daí space-between sem gap. */
.hairline__steps {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 62px;
}
.hairline__step {
display: flex;
align-items: center;
gap: 24px;
height: 62px;
}
/* Traço do Figma: branco puro (alpha 1, não 0,32), 1px, INSIDE e só à esquerda.
Vai como inset shadow, não border, porque INSIDE não pode engordar a caixa —
com border cada passo ficaria 1px mais largo e os vãos do space-between
cairiam de 50 para 49,5. */
.hairline__step--divided {
padding-left: 80px;
box-shadow: inset 1px 0 0 var(--c-white);
}
/* flex: none para o numeral nunca encolher: no mobile o rótulo tem largura
fixa e transborda a linha, e sem isto o algarismo é quem cederia espaço. */
.hairline__step-num {
flex: none;
font-size: 56px;
line-height: 61.6px;
font-weight: 600;
color: var(--c-white);
}
/*
* Sufixo do ordinal no desktop ("st", "nd", "rd"). Medido no PNG do Figma:
* as letras têm 18px de altura-x (= Myriad Pro em 36px) e a base delas fica
* 16px acima da base do algarismo. `position: relative` ergue sem mexer na
* altura da linha, que continua sendo os 61,6 do numeral.
*
* No desenho o numeral inteiro assenta 4px abaixo do que o Myriad Pro põe
* sozinho (o Figma mediu a linha com o glifo sobrescrito da fonte reserva);
* o `top` do .so-wide devolve essa posição sem mudar a altura do passo.
*/
.hairline__step-num .so-wide {
position: relative;
top: 4px;
display: inline-block;
}
/* Caixas dos três ordinais no Figma: 63, 77 e 69px. Piso, não largura fixa —
um ordinal mais longo em outro idioma continua cabendo. */
.hairline__step:nth-child(1) .hairline__step-num .so-wide {
min-width: 63px;
}
.hairline__step:nth-child(2) .hairline__step-num .so-wide {
min-width: 77px;
}
.hairline__step:nth-child(3) .hairline__step-num .so-wide {
min-width: 69px;
}
.hairline__ord {
position: relative;
top: -16px;
margin-left: -1px;
font-size: 36px;
}
.hairline__step-text {
font-size: 20px;
line-height: 28px;
font-weight: 600;
color: var(--c-white);
}
/* ==========================================================================
14. SEÇÃO 8 — clínicas (Figma 1278:9962, 1440x1639)
========================================================================== */
/*
* A seção saiu de 1176 e foi para 1639. O que entrou:
* - a grade de clínicas virou 4x2 (era uma fileira só), com vão 16 entre
* colunas e 56 entre as duas fileiras;
* - a caixa que contém abas + grade passou a RECORTAR em 780px, e um véu
* branco de 294px esmaece a segunda fileira ("há mais, clique para ver");
* - embaixo entrou o link "Show entire list of locations", que solta o
* recorte.
* 112 + 466 (rótulo/título 131 + 72 + faixa 263) + 72 + 780 + 72 + 25 + 112
* = 1639.
*
* Saiu o height:1176 travado — a seção agora mede o que o conteúdo pede (1639
* exatos com o conteúdo do Figma) e ainda precisa poder crescer quando o
* visitante abre a lista inteira.
*
* Saiu também o margin-top:11px: aquele vão era do desenho de Málaga. No frame
* do Manchester a seção anterior (design-your-hairline) termina em 5311 e esta
* começa em 5311 — não há vão nenhum.
*
* Aviso de nomenclatura: os nós do Figma se chamam map-section, map-inner,
* map-pins-hq e map-bg, mas NÃO existe mapa nesta seção — são nomes herdados.
* map-pins-hq é a grade de cartões e map-bg é o retângulo de gradiente.
*/
.locations {
display: flex;
flex-direction: column;
align-items: center;
gap: 72px;
padding: 112px 0;
background: var(--c-white);
overflow: hidden;
}
.locations__content {
display: flex;
flex-direction: column;
gap: 72px;
width: 100%;
}
.locations__header {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
/* O rótulo desta seção não é o de 12px das outras: o Figma empilha quatro
frames (o de fora com 29px de altura, o texto com 25) e recua 4px em cima.
29 + 32 + 70 = 131, a altura do cabeçalho. */
.locations .sec-label {
height: 29px;
padding-top: 4px;
line-height: 25.2px;
}
/* O nó do título é 800x70 (1278:9970) — 70, não os 70.4 da entrelinha. Sem a
altura escrita, a caixa fecha em 70.41 e empurra a faixa de fotos 0,4px para
baixo; com ela o cabeçalho volta a medir 29 + 32 + 70 = 131 e a seção inteira
fecha nos 1639 do frame. */
.locations__title {
width: 800px;
height: 70px;
font-size: 64px;
line-height: 70.4px;
font-weight: 600;
color: #000;
text-align: center;
}
/* Carrossel sangrado: a faixa tem 2014px e começa 287px à esquerda da tela.
390 x 5 + 16 x 4 = 2014. */
.locations__photos {
height: 263px;
background: var(--c-white);
overflow: hidden;
}
.locations__marquee {
display: flex;
align-items: center;
gap: 16px;
width: max-content;
margin-left: -287px;
}
.locations__track {
display: flex;
align-items: center;
gap: 16px;
width: 2014px;
height: 263px;
}
.locphoto {
position: relative;
width: 390px;
height: 263px;
flex: none;
margin: 0;
border-radius: var(--r-16);
background: var(--c-cream-100);
overflow: hidden;
}
/*
* O retângulo interno do Figma (I3073:13011;1278:9976 e irmãos) tem 431x287
* numa janela de 390x263, recuado -21/-12 — ou seja, CENTRADO e 10,5% MAIOR
* que a janela. Era isso que faltava: com width/height 100% o object-fit:cover
* escala a foto em 0,4574 (263/575) e o Figma escala em 0,5 (431/862). A foto
* saía 9% menos aproximada que o desenho, e as cinco erravam ao mesmo tempo —
* a faixa inteira media MAE 31-43.
*
* Escrevendo a caixa de 431x287 e centrando-a, o cover interno cai exatamente
* em 0,5 e o enquadramento passa a ser o do nó. Uma imagem trocada no painel
* continua entrando pelo mesmo recorte.
*/
.locphoto img {
position: absolute;
left: 50%;
top: 50%;
/* max-width:none é obrigatório: o reset do bloco 2 dá max-width:100% a toda
img e ele cortaria os 431 de volta para os 390 da janela. */
max-width: none;
width: 431px;
height: 287px;
transform: translate(-50%, -50%);
object-fit: cover;
}
/*
* "map-section": 1216x780 com clip. É esta caixa que corta a lista.
* max-height em vez de height porque uma região com poucas clínicas não pode
* ficar com 300px de branco embaixo — com as oito do Figma o conteúdo mede 788
* e o recorte vale; com menos, a caixa encolhe e o JS tira o véu e o link.
* position:relative existe por causa do véu, que é absoluto.
*/
.locations__map {
position: relative;
width: 100%;
max-width: var(--content-w);
max-height: 780px;
margin-inline: auto;
overflow: hidden;
}
/* "map-inner": abas (64) + 72 + grade (652) = 788, 4px acima do topo do
recorte e 4px abaixo do fundo — na prática, centrado. */
.locations__map-inner {
display: flex;
flex-direction: column;
gap: 72px;
margin-top: -4px;
}
/*
* "map-bg": gradiente de branco opaco embaixo a transparente em cima, 1216x294
* encostado no fundo do recorte — cobre exatamente a segunda fileira (486→780).
* pointer-events:none é obrigatório: sem isso o véu engoliria o clique dos
* cartões que ele esmaece.
*/
.locations__fade {
position: absolute;
inset-inline: 0;
bottom: 0;
height: 294px;
background: linear-gradient(to top, var(--c-white) 0%, rgba(255, 255, 255, 0) 100%);
pointer-events: none;
}
/*
* "Show entire list of locations" (3044:9977) é Tertiary Small, mas a LP
* sobrescreve o rótulo para 16/22,4 — o nó mede 214x30: 4 + 22,4 + 4, com
* altura HUG em vez dos 32 do Small. Cor e estados vêm de .btn--tertiary.
*/
.locations__more {
height: 30px;
font-size: 16px;
line-height: 22.4px;
}
/* Quando a lista já cabe inteira (região com uma fileira só), não há o que
esmaecer nem o que abrir: o JS marca .is-fit e as duas peças somem. */
.locations.is-fit .locations__fade,
.locations.is-fit .locations__more {
display: none;
}
/* Lista aberta: cai o recorte, cai o véu e o link se retira. */
.locations.is-open .locations__map {
max-height: none;
overflow: visible;
}
.locations.is-open .locations__map-inner {
margin-top: 0;
}
.locations.is-open .locations__fade {
display: none;
}
/* Os dois rótulos do botão: "Show entire list of locations" fechado,
"Show less" aberto. Mesmo padrão do "Show more" dos cirurgiões — os dois
ficam no HTML e passam pela tradução; o CSS mostra um de cada vez. */
.locations__more-txt--close {
display: none;
}
.locations__more[aria-expanded="true"] .locations__more-txt--open {
display: none;
}
.locations__more[aria-expanded="true"] .locations__more-txt--close {
display: inline;
}
.locations__regions {
display: flex;
justify-content: center;
height: 64px;
}
/*
* Cinco abas de 243.2px (1216/5). O fio das inativas é #00000029 no Figma —
* três vezes mais forte que o --c-line (rgba(0,0,0,0.05)) que estava aqui. Não
* há token para esse valor em :root, então ele vai cru, com o hex ao lado.
* display:flex para que o recuo de 32 da aba ativa (abaixo) não desloque o
* rótulo: com a altura travada em 64 a centragem tem de ser explícita.
*/
.locregion {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 0;
height: 64px;
/* Mesmo motivo do traço do cartão: o stroke do Figma é INSIDE. Com
border-bottom a caixa de conteúdo cai para 63 (ou 62 na ativa, que tem 2)
e o rótulo de 28px se centra 1px acima do nó, que o põe a 18 do topo dos
64. Em inset box-shadow o fio pinta por dentro e a centragem fecha. */
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.161); /* #00000029 */
font-size: 20px;
line-height: 28px;
font-weight: 400;
color: rgba(0, 0, 0, 0.161); /* #00000029 */
text-align: center;
}
/*
* O recuo de 32/0 que o Figma dá à ativa é inócuo LÁ (altura travada em 64 e
* conteúdo centrado), mas aqui não era: com box-sizing:border-box, 32 + 32 + 2
* de traço somam 66 e a aba ficava 2px mais alta que as outras — o fio de baixo
* caía 2px abaixo da linha das inativas. Sai o recuo, fica a altura do nó.
*/
.locregion.is-active {
box-shadow: inset 0 -2px 0 var(--c-brown-mid);
border-radius: var(--r-12) var(--r-12) 0 0;
background: var(--c-cream-50);
font-weight: 600;
color: var(--c-brown-mid);
}
/*
* "map-pins-hq": duas fileiras de quatro cartões. Grade, não flex: 292x4 + 16x3
* = 1216 na horizontal e 298 + 56 + 298 = 652 na vertical, e uma região com
* cinco ou nove clínicas continua quebrando de quatro em quatro sozinha.
* align-items:start para o cartão não esticar até a altura da fileira.
*/
.locations__cards {
display: none;
grid-template-columns: repeat(4, 292px);
justify-content: center;
align-items: start;
column-gap: 16px;
row-gap: 56px;
}
.locations__cards.is-active {
display: grid;
}
.locations__empty,
.faq__empty {
font-size: 20px;
line-height: 28px;
color: var(--c-gray-light);
}
/* O aviso de região vazia ocupa a fileira inteira da grade, senão fica
espremido na primeira coluna de 292px. (Só o de locations: o do FAQ divide a
regra de cima, mas a lista dele não é grade.) */
.locations__empty {
grid-column: 1 / -1;
}
.loccard:is(a):hover {
box-shadow: inset 0 0 0 1px var(--c-gold);
}
/* O traço do cartão é #00000029 no Figma, o mesmo das abas inativas. Continua
em inset box-shadow, e não em border, para que os 292px e o recuo de 12
sigam medindo por fora, como no nó. */
.loccard {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
width: 292px;
flex: none;
padding: 12px 12px 24px;
border-radius: var(--r-16);
background: var(--c-white);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.161); /* #00000029 */
}
.loccard__image {
position: relative;
width: 268px;
height: 152px;
border-radius: var(--r-12);
background: var(--c-white);
overflow: hidden;
}
/*
* Mesma armadilha da faixa: o retângulo do Figma (I…;1259:19817) tem 276x184
* numa janela de 268x152, em -4/-16 — centrado e maior que a janela. Com
* 100%/100% o cover escalava a foto em 0,4855 e cortava 32,75px de topo; o nó
* escala em 0,5 e corta 36. Os oito cartões erravam juntos.
*/
.loccard__image img {
position: absolute;
left: 50%;
top: 50%;
max-width: none;
width: 276px;
height: 184px;
transform: translate(-50%, -50%);
object-fit: cover;
}
/* 28 (nome) + 8 + 50 (endereço em duas linhas) = 86. 12 + 152 + 24 + 86 + 24
= 298, a altura do cartão. */
.loccard__body {
display: flex;
flex-direction: column;
gap: 8px;
width: 244px;
height: 86px;
justify-content: center;
overflow: hidden;
}
.loccard__name {
font-size: 20px;
line-height: 28px;
font-weight: 600;
color: #000;
}
/* O qualificador ("(Surgical center)", "(Consultation)") só existe no mobile:
no desktop o Figma mostra apenas a cidade. */
.loccard__type {
display: none;
}
/* No Figma o endereço traz a quebra escrita ("130 Harley Street, London,\n
W1G 7JU"). O campo do CPT é um textarea: com pre-line, a quebra que o editor
digitar vale, e sem quebra nenhuma o texto continua se ajeitando nos 244px. */
.loccard__address {
font-size: 18px;
line-height: 25.2px;
font-weight: 400;
color: var(--c-gray);
white-space: pre-line;
}
/* ==========================================================================
15. SEÇÃO 9 — nossa equipe (Figma #1259:11392, 1440x1199)
========================================================================== */
/*
* O bloco inteiro é novo: no lugar do perfil de uma médica (bio à esquerda,
* foto em moldura com o cartão do LinkedIn e a bandeira à direita) entra a
* fileira de quatro cirurgiões. Morreram com o desenho antigo .doctor__row,
* .doctor__photo-frame, .doctor__li-card e .doctor__flag — e com eles todas
* as alturas travadas (925, 573, 563, 640, 476, 428). Aqui nada é travado em
* altura: 112 + 253 + 72 + 530 + 72 + 48 + 112 fecha os 1199 do Figma sozinho.
*/
.team {
display: flex;
flex-direction: column;
align-items: center;
gap: 72px;
padding: 112px var(--pad-x);
background: var(--c-cream-50);
}
/* -- cabeçalho: título à esquerda, setas à direita ------------------------- */
/* cross:MAX no Figma: a base das setas alinha com a base do bloco de texto. */
.team__header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 152px;
width: 100%;
}
.team__intro {
display: flex;
flex-direction: column;
gap: 24px;
width: 600px;
flex: none;
}
/* Aqui o rótulo ocupa a caixa de texto inteira (75x25 no Figma), não os 12px
de mancha que a .sec-label trava para as outras seções: são os 25 + 24 de
vão que põem o título em y=49. */
.team .sec-label {
height: auto;
line-height: 25.2px;
}
.team__title-group {
display: flex;
flex-direction: column;
gap: 8px;
}
/* A caixa de 600px quebra a frase em duas linhas sozinha ("Our Resident Hair"
/ "Transplant Surgeons"), sem quebra escrita — 2 x 70.4 = 140.8. */
.team__title {
font-size: 64px;
line-height: 70.4px;
font-weight: 600;
color: #000;
}
.team__lede {
font-size: 20px;
line-height: 28px;
font-weight: 400;
color: var(--c-gray);
}
/* -- setas do carrossel ---------------------------------------------------- */
/* A caixa do Figma é 120x76 com 20 de recuo embaixo: as setas ficam 20px acima
da base do cabeçalho, e é isso que as alinha com a última linha do texto. */
.team__nav {
display: flex;
gap: 8px;
padding-bottom: 20px;
flex: none;
}
/* A aparência é fixa por direção, não por estado. No JSON do Figma
"Slider Control / Previous" e "Slider Control / Next" são dois frames
distintos, cada um com o seu próprio fill preso a uma variável de cor: o
anterior é dourado sólido com o chevron branco, o seguinte é creme com traço
#F1E9DD e o chevron dourado. Não são variantes de um componente — se fossem,
o desenho mostraria o anterior apagado no primeiro cartão, e mostra o
contrário. Quem marca o botão sem uso é a opacidade, que não desfaz a cor. */
.team__nav-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
flex: none;
padding: 0;
border: 0;
border-radius: var(--r-pill);
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-out);
}
.team__nav-btn[data-team-nav="prev"] {
background: var(--c-gold);
color: var(--c-white);
}
/* Traço INSIDE do Figma (#F1E9DD 1px): inset, para o botão continuar 56x56. */
.team__nav-btn[data-team-nav="next"] {
background: var(--c-cream-50);
box-shadow: inset 0 0 0 1px var(--c-cream);
color: var(--c-gold);
}
.team__nav-btn[data-team-nav="prev"]:hover:not(:disabled) {
background: #A9834B;
}
.team__nav-btn[data-team-nav="next"]:hover:not(:disabled) {
background: var(--c-cream);
}
/* O desenho não tem estado desabilitado: mostra a seta anterior em dourado
cheio já no primeiro cartão. Quem apaga é só o chevron — assim o círculo
mantém a cor do desenho e a seta sem uso continua legível como tal. */
.team__nav-btn:disabled {
cursor: default;
}
.team__nav-btn:disabled svg {
opacity: 0.4;
}
.team__nav-btn svg {
display: block;
width: 24px;
height: 24px;
}
/* -- trilho dos cartões ---------------------------------------------------- */
/* Com quatro cirurgiões 4 x 292 + 3 x 16 = 1216 e não sobra nada para rolar;
o contêiner rola assim mesmo porque o painel pode cadastrar um quinto. */
.team__viewport {
width: 100%;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.team__viewport::-webkit-scrollbar {
display: none;
}
/* O Figma alinha os cartões pelo centro, o que dá no mesmo enquanto os quatro
têm 530: pelo topo, abrir um "Show more" cresce só aquele cartão em vez de
deslocar os outros três para cima. */
.team__track {
display: flex;
align-items: flex-start;
gap: 16px;
}
/* -- cartão do cirurgião: 292x530 ------------------------------------------ */
.docard {
display: flex;
flex-direction: column;
gap: 24px;
width: 292px;
flex: none;
}
/* O #D9D9D9 é o fundo da caixa da foto no Figma: só aparece se um cirurgião
for cadastrado sem imagem destacada. O traço de 1px é inset para a foto não
passar de 292x362. */
.docard__photo {
position: relative;
width: 292px;
height: 362px;
border-radius: var(--r-16);
background: #D9D9D9;
box-shadow: inset 0 0 0 1px var(--c-off-white);
overflow: hidden;
}
/* O Figma NÃO usa cover: pinta cada foto no tamanho natural dela (o arquivo 2x
dividido por 2) e a arrasta à mão dentro da caixa. Medido cartão a cartão, o
desenho fica maior que o cover em 27% (Gatej), 16% (Odiase), 6% (Umeh) e 2%
(Bhatia) — e no Gatej ainda empilha o padrão "VINCI HAIR CLINIC" atrás de um
recorte com fundo removido. Reproduzir isso em CSS exigiria um enquadramento
escrito por médico, e o médico vem do painel. Por isso os quatro arquivos de
assets/img já saem achatados no recorte 292x362 do desenho (584x724, o
dobro): aqui o cover só confirma o que a imagem já traz. Os 42% continuam
valendo para um retrato novo, enviado pelo painel em outra proporção — eles
mantêm o rosto no terço superior. */
.docard__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 42%;
}
/* Véu escuro do Figma: retângulo de 288 encostado na base, transparente até
66% e preto no fim, a 70% de opacidade. */
.docard__scrim {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 288px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 1) 100%);
opacity: 0.7;
pointer-events: none;
}
/* 24px da esquerda e da base nos quatro. O Figma varia entre 24 e 25 e, no
cartão da Bhatia, sobe o degradê para 41% — variações de arrasto, não de
desenho: com o cartão vindo do painel os quatro seguem a mesma regra.
pre-line: a quebra ("Hair Transplant" / "Surgeon") vem do campo do painel. */
.docard__role {
position: absolute;
bottom: 24px;
left: 24px;
white-space: pre-line;
font-size: 18px;
line-height: 25.2px;
font-weight: 600;
color: var(--c-white);
}
/* Bloco de texto: 28 + 8 + 75 + 8 + 25 = 144. */
.docard__info {
display: flex;
flex-direction: column;
gap: 8px;
padding-inline: 8px;
}
.docard__name {
font-size: 20px;
line-height: 28px;
font-weight: 600;
color: #000;
}
.docard__bio-wrap {
position: relative;
}
/* Três linhas de 25.2. O Figma sobrepõe o véu ao texto com um vão de -75; aqui
o véu é absoluto sobre o mesmo retângulo, que dá no mesmo e não depende de
gap negativo. */
.docard__bio {
max-height: 75px;
overflow: hidden;
font-size: 18px;
line-height: 25.2px;
font-weight: 400;
color: var(--c-gray);
}
.docard__fade {
position: absolute;
inset: 0;
background: linear-gradient(to top, var(--c-cream-50) 0%, rgba(250, 247, 242, 0) 100%);
pointer-events: none;
}
.docard.is-open .docard__bio {
max-height: none;
}
.docard.is-open .docard__fade {
display: none;
}
.docard__more {
display: inline-flex;
align-items: center;
gap: 4px;
width: max-content;
padding: 0;
border: 0;
background: none;
cursor: pointer;
font-family: inherit;
font-size: 18px;
line-height: 25.2px;
font-weight: 600;
color: var(--c-brown-mid);
}
.docard__more-txt--close {
display: none;
}
.docard__more[aria-expanded="true"] .docard__more-txt--open {
display: none;
}
.docard__more[aria-expanded="true"] .docard__more-txt--close {
display: inline;
}
/* O componente do Figma é o CaretRight, mas o vetor desenhado (10x5, largo e
baixo) aponta para BAIXO: o mesmo caretright.svg do tema, girado. */
.docard__caret {
display: inline-flex;
width: 16px;
height: 16px;
}
.docard__caret svg {
display: block;
width: 16px;
height: 16px;
transform: rotate(90deg);
transition: transform var(--dur-normal) var(--ease-out);
}
.docard__more[aria-expanded="true"] .docard__caret svg {
transform: rotate(-90deg);
}
/* O botão final é a instância Large do Figma (199x48, rótulo 16/22.4): a
.btn--lg .btn--gold do tema já o reproduz, aqui só sobra a centralização,
que vem do align-items da seção. */
/* ==========================================================================
16. SEÇÃO 10 — prêmios e reconhecimento (Figma 1259:11393, 1440x1276)
========================================================================== */
/* 1276 = 112 + 1052 + 112. A altura não é travada: o texto em inglês pode
ocupar uma linha a mais que o desenho e a seção tem clip. */
.awards {
padding: 112px var(--pad-x);
background: var(--c-white);
overflow: hidden;
}
.awards__wrapper {
display: flex;
flex-direction: column;
gap: 72px;
max-width: var(--content-w);
margin-inline: auto;
}
/* awards / top-row: 1216 de largura com 600 + 384 dentro. O itemSpacing do
Figma diz 152, mas o SPACE_BETWEEN abre 232 de verdade — por isso o gap
entra só como mínimo. cross:MAX encosta o cartão do certificado na base da
linha, não no topo. */
.awards__top {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 152px;
}
/* awards / top-row-left, 600x380, col gap 32. */
.awards__top-left {
display: flex;
flex-direction: column;
gap: 32px;
width: 600px;
flex: none;
}
.awards__tagline {
display: flex;
flex-direction: column;
gap: 24px;
}
/* O rótulo desta seção é uma caixa de 284x25 (1259:11398 no desktop,
1259:10040 no mobile), com a entrelinha inteira de 25,2px. A .sec-label do
tema trava 12px de mancha (13 no mobile) para outras seções, e era daí que
vinham os 12px que faltavam na altura da seção nas duas larguras: o vão de
24px até o título o Figma mede a partir da caixa cheia, não da mancha.
Mesma correção que .pricing, .team e .locations já fazem. Os dois nomes de
classe valem também no mobile: a .sec-label de lá tem menos especificidade. */
.awards .sec-label {
height: 25px;
line-height: 25.2px;
}
/* O Figma escreve "1ˢᵗ" com os sobrescritos do Unicode. Em HTML é , e
com line-height:0 ele não estica a linha de 25,2px do rótulo. */
.awards__label sup {
font-size: 0.65em;
line-height: 0;
vertical-align: super;
}
.awards__title-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.awards__title {
font-size: 64px;
line-height: 70.4px;
font-weight: 600;
color: #000;
}
.awards__lede {
font-size: 20px;
line-height: 28px;
font-weight: 400;
color: var(--c-gray);
}
/* Largura HUG: sem o align-self o esticaria os 600px da coluna e a área
clicável passaria muito do rótulo de 228px do Figma. */
.awards__link {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 4px;
height: 25px;
font-size: 18px;
line-height: 25.2px;
font-weight: 600;
color: var(--c-brown-mid);
}
.awards__link-caret {
width: 16px;
height: 16px;
flex: none;
}
/* -- cartão do certificado (1259:11405, 384x150) ------------------------- */
/* Componente novo do Manchester: não existia na LP de Málaga. Só no desktop —
o Figma mobile não o traz.
A sombra de seis camadas é token do Figma (aparece também nos dois logos de
avaliação da seção de depoimentos), mas não está no :root; fica aqui, junto
do componente, até uma segunda seção precisar dela. O traço de 1px vai como
inset porque no Figma é INSIDE: com border a caixa passaria de 384. */
.awards__certificate {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
width: 384px;
flex: none;
padding: 16px 8px 8px;
border-radius: var(--r-16);
background: var(--c-cream-50);
box-shadow:
inset 0 0 0 1px var(--c-cream),
0 2.77px 2.21px rgba(0, 0, 0, 0.02),
0 6.65px 5.32px rgba(0, 0, 0, 0.03),
0 12.52px 10.02px rgba(0, 0, 0, 0.04),
0 22.34px 17.87px rgba(0, 0, 0, 0.04),
0 41.78px 33.42px rgba(0, 0, 0, 0.05),
0 100px 80px rgba(0, 0, 0, 0.07);
}
.awards__certificate-label {
font-size: 16px;
line-height: 22.4px;
font-weight: 600;
color: var(--c-brown-mid);
}
/* 8 + 72 + 8 = 88 de altura, que com 16 + 22 + 16 + 8 fecha os 150 do cartão. */
.awards__certificate-inner {
display: flex;
align-items: center;
gap: 12px;
width: 368px;
padding: 8px 16px;
border-radius: var(--r-12);
background: var(--c-white);
box-shadow: 0 4px 8px -4px rgba(108, 117, 125, 0.5);
overflow: hidden;
}
.awards__certificate-seal {
width: 58px;
height: 72px;
flex: none;
object-fit: cover;
}
.awards__certificate-text {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
/* #1C1C1C e #5D5D5D não estão em 00-tokens.md: são cores locais deste cartão,
não tokens do sistema. Ficam em hexadecimal cru de propósito. */
.awards__certificate-title {
font-size: 16px;
line-height: 22.4px;
font-weight: 600;
color: #1C1C1C;
}
.awards__certificate-sub {
font-size: 16px;
line-height: 22.4px;
font-weight: 400;
color: #5D5D5D;
}
/* -- mosaico (1259:11413, 1216x600) -------------------------------------- */
/* 4 colunas de 292px, 2 linhas de 292px, vão de 16px. */
.awards__mosaic {
display: grid;
grid-template-columns: repeat(4, 292px);
grid-template-rows: repeat(2, 292px);
gap: 16px;
width: 1216px;
height: 600px;
}
.awards__cell {
position: relative;
border-radius: var(--r-16);
overflow: hidden;
}
.awards__cell--award {
grid-column: 1 / 3;
grid-row: 1;
background: var(--c-cream-50);
box-shadow: inset 0 0 0 1px var(--c-cream);
}
.awards__cell--center {
grid-column: 3;
grid-row: 1 / 3;
background: var(--c-red);
}
.awards__cell--top-right {
grid-column: 4;
grid-row: 1;
background: var(--c-red);
}
.awards__cell--team {
grid-column: 1;
grid-row: 2;
background: var(--c-red);
}
.awards__cell--global {
grid-column: 2;
grid-row: 2;
background: var(--c-gold);
box-shadow: inset 0 0 0 1px var(--c-cream);
}
.awards__cell--figures {
grid-column: 4;
grid-row: 2;
background: var(--c-cream-50);
box-shadow: inset 0 0 0 1px var(--c-cream);
}
.awards__photo {
position: absolute;
max-width: none;
object-fit: cover;
/* O recorte de cada foto vem do Figma e muda de uma largura para a outra.
Fica em variáveis — e nesta folha, não no style="" da tag: declaração
inline vence qualquer regra, e o mobile não conseguiria trocá-la. */
left: var(--foto-x);
top: var(--foto-y);
width: var(--foto-w);
height: var(--foto-h);
}
.awards__cell--center .awards__photo {
--foto-x: -164px;
--foto-y: 0px;
--foto-w: 958px;
--foto-h: 639px;
}
.awards__cell--top-right .awards__photo {
--foto-x: -140px;
--foto-y: -49px;
--foto-w: 510px;
--foto-h: 341px;
}
.awards__cell--team .awards__photo {
--foto-x: -78px;
--foto-y: -5px;
--foto-w: 450px;
--foto-h: 300px;
}
/* -- célula do prêmio (1259:11472, 600x292) ------------------------------ */
/* No Figma a caixa do texto tem 98px travados. Aqui a altura fica solta: com
o país por extenso ({country_full}) a frase pode ocupar três linhas em vez
de duas, e os logos abaixo começam só em 148px. */
.awards__card-text {
position: absolute;
top: 24px;
left: 24px;
display: flex;
flex-direction: column;
gap: 8px;
width: 527px;
}
.awards__card-title {
font-size: 20px;
line-height: 28px;
font-weight: 600;
color: #000;
}
.awards__card-title--light {
color: var(--c-cream-50);
}
.awards__card-desc {
font-size: 18px;
line-height: 25.2px;
font-weight: 400;
color: var(--c-gray);
}
.awards__card-desc--light {
color: var(--c-cream);
}
.awards__logo-lux {
position: absolute;
top: 148px;
left: 24px;
width: 129px;
height: 120px;
}
.awards__logo-vinci {
position: absolute;
top: 180px;
left: 185px;
width: 132px;
height: 56px;
}
/* -- cartão de perfil sobre a foto (3247:14703, 244x56) ------------------ */
/* 56 de altura = 8 + 40 + 8: as duas linhas de 20 coladas, sem vão entre o
nome e a segunda linha (o Figma corrigido tirou os 8px de antes). */
.awards__handle-card {
position: absolute;
top: 520px;
left: 24px;
display: flex;
align-items: center;
gap: 8px;
width: 244px;
height: 56px;
padding: 8px;
border-radius: var(--r-12);
background: var(--c-white);
box-shadow: 0 2px 6px -4px rgba(108, 117, 125, 0.5);
overflow: hidden;
}
/* Moldura do avatar, 40x40 radius 8, usada tanto pelo cartão da foto quanto
pelas linhas de figuras públicas. O #E6E6E6 é a cor de segurança que o
Figma põe atrás da foto; não é token, é local desta seção. */
.awards__avatar {
position: relative;
width: 40px;
height: 40px;
flex: none;
border-radius: var(--r-8);
background: #E6E6E6;
overflow: hidden;
}
/* O recorte de cada foto tem deslocamento próprio (a do Thor desce 5px, as
outras ficam em 0). O valor vem em style="" no PHP porque é dado da linha,
não regra de folha — e sobrepõe este top:0. */
.awards__avatar img {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
object-fit: cover;
}
/* 20 + 20 = 40, sem vão: nome e segunda linha colados, como no Figma
corrigido (3247:14707). Largura fixa de 180: no mobile o cartão é mais
largo, mas o bloco de texto continua com 180. */
.awards__handle-info {
display: flex;
flex-direction: column;
gap: 0;
width: 180px;
height: 40px;
flex: none;
}
.awards__handle-name {
display: flex;
align-items: center;
gap: 4px;
height: 20px;
font-size: 14px;
line-height: 19.6px;
font-weight: 700;
color: #000;
}
.awards__verified {
width: 12px;
height: 11px;
flex: none;
}
.awards__handle-sub {
height: 20px;
font-size: 14px;
line-height: 19.6px;
font-weight: 400;
color: var(--c-gray);
}
/* -- célula "Global expertise" (3247:14746, 292x292) --------------------- */
/* top:25 e não 24: o cross:CENTER do Figma centra os 266 do conteúdo nos 268
que sobram depois do recuo de 24 no topo. Título e texto formam o
"global-header", com 8 entre eles (o 24 do Figma separa o cabeçalho do
resto da célula, não o título do texto). */
.awards__global-inner {
position: absolute;
z-index: 1;
top: 25px;
left: 24px;
display: flex;
flex-direction: column;
gap: 8px;
width: 244px;
}
/* O mapa sangra pela base da célula; quem corta é o overflow de .awards__cell.
A imagem é o vetor do Figma (3247:14753) rasterizado em 3x: pontos brancos
sólidos, sem a transparência que o deixava apagado. */
.awards__map {
position: absolute;
top: 155px;
left: 0;
width: 292px;
height: 280.77px;
}
/* -- célula "Trusted by public figures" (1259:11433, 292x292) ------------ */
/* 111 (cabeçalho) + 20 + 116 (lista) = 247, um a mais que os 244 disponíveis:
o cross:CENTER do Figma estoura 1,5px para cada lado, e é daí que vem o
top de 22,5. */
.awards__figures-inner {
position: absolute;
top: 22.5px;
left: 24px;
display: flex;
flex-direction: column;
gap: 20px;
width: 244px;
height: 247px;
}
.awards__figures-header {
display: flex;
flex-direction: column;
gap: 8px;
}
/* 56 + 4 + 56 = 116. */
.awards__figures-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.awards__figure {
display: flex;
align-items: center;
gap: 8px;
width: 244px;
height: 56px;
padding: 8px;
border-radius: var(--r-12);
background: var(--c-white);
box-shadow: inset 0 0 0 1px var(--c-off-white);
}
/* ==========================================================================
17. SEÇÃO 11 — depoimentos (Figma 1288:11296, 1440x2146)
========================================================================== */
/* 328 (cabeçalho) + 1818 (cartões) = 2146. */
.tsm {
height: 2146px;
padding-inline: var(--pad-x);
background: var(--c-white);
overflow: hidden;
}
/* O filho mais alto do cabeçalho são os vídeos (216); com os 112 de recuo de
baixo fecha os 328 do Figma. */
.tsm__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
height: 328px;
max-width: var(--content-w);
margin-inline: auto;
padding-bottom: 112px;
/* Aqui o Figma usa o off-white opaco, não o traço translúcido (var(--c-line))
que as outras seções usam. */
border-bottom: 1px solid var(--c-off-white);
}
/* 25 (rótulo) + 24 (vão) + 140 (duas linhas de 70.4) = 189. */
.tsm__header-left {
width: 384px;
height: 189px;
flex: none;
}
/* Nesta seção o rótulo ocupa a entrelinha inteira (25px), não os 12px de
mancha do padrão da seção 8.
ENTRELINHA DE 25, NÃO 25.2 — vale para toda a seção. O estilo do Figma diz
140% de 18px = 25.2px, mas o Figma DIAGRAMA com a entrelinha arredondada:
todo bloco de texto de 18px do desenho mede um múltiplo exato de 25 (o
depoimento de 6 linhas tem 150, o de 12 tem 300, o de 13 tem 325, o de 15
tem 375; no desktop, 9 linhas = 225). Com 25.2px o Chrome soma 0,2px por
linha e cada cartão fica 1 a 3px mais alto que o do desenho — no mobile,
onde o cartão é HUG, o erro se acumula e a lista termina 9,3px abaixo.
O mesmo raciocínio vale para 70.4 -> 70 nos títulos de 64px (o Figma
declara o título de uma linha com 70 de altura, e o de duas com 140). */
.tsm .sec-label {
height: 25px;
line-height: 25px;
}
/* A largura travada em 384 é o que quebra o título em "Hear From / Our
Patients" — no Figma não há quebra escrita. */
.tsm__title {
width: 384px;
margin-top: 24px;
font-size: 64px;
line-height: 70px;
font-weight: 600;
color: #000;
}
.tsm__videos {
display: flex;
align-items: center;
gap: 16px;
height: 216px;
}
.tsm__video {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 384px;
height: 216px;
flex: none;
border-radius: var(--r-16);
/* Colors/BG/warm: só aparece se o vídeo ficar sem capa. */
background: var(--c-cream);
overflow: hidden;
}
.tsm__video img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.tsm__play {
position: relative;
width: 80px;
height: 80px;
}
/* 72 + 135 (selo e título) + 72 + 1419 (cartões) + 72 + 48 (botão) = 1818. */
.tsm__body {
display: flex;
flex-direction: column;
align-items: center;
gap: 72px;
max-width: var(--content-w);
margin-inline: auto;
padding-top: 72px;
}
/* Altura travada em 135 como no Figma (o conteúdo mede 135.63): sem isso a
seção soma 1px a mais que os 2146 e o recorte come a base do botão. */
.tsm__subtitle {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
width: 100%;
height: 135px;
}
.tsm__rating {
display: flex;
align-items: center;
gap: 12px;
height: 33.63px;
}
/* O SVG exportado tem 225x215 porque inclui a margem da sombra; o desenho
começa em (80,0). A caixa ocupa o tamanho real e o SVG é deslocado para
encaixar, deixando a sombra transbordar como no Figma. */
.tsm__rating-badge {
position: relative;
display: block;
width: 63.26px;
height: 33.63px;
flex: none;
}
.tsm__rating-logos {
position: absolute;
top: 0;
left: -80px;
width: 225px;
height: 215px;
max-width: none;
}
/* O recuo de 4 no topo é o do wrapper do Figma (1288:11328): sem ele o rótulo
fica 2px acima dos selos, que são um pouco mais altos. */
.tsm__rating-label {
padding-top: 4px;
font-size: 18px;
line-height: 25px;
font-weight: 600;
color: var(--c-brown-mid);
}
/* O rótulo do selo e o título da nota são OUTRAS frases no mobile, não as
mesmas em outro corpo — os dois pares ficam no HTML e cada largura mostra o
seu. O display:none vive aqui, e não na lista de peças-só-do-mobile do fim
do arquivo, porque nenhuma regra posterior toca nestas classes. */
.tsm__rating-label--wide,
.tsm__subtitle-title--wide {
display: inline;
}
.tsm__rating-label--narrow,
.tsm__subtitle-title--narrow {
display: none;
}
/* Largura travada em 800 e centrada nos 1216 (o Figma põe o texto em x=208). */
.tsm__subtitle-title {
width: 100%;
max-width: 800px;
font-size: 64px;
line-height: 70px;
font-weight: 600;
color: #000;
text-align: center;
}
/* A caixa recorta as três colunas: 1419 é a altura da mais alta (col-2). */
.tsm__columns {
position: relative;
display: flex;
align-items: flex-start;
gap: 16px;
width: 100%;
height: 1419px;
}
/* Invólucro do laço: não muda o layout, existe para o JS medir a faixa. */
.tsm__marquee {
display: contents;
}
/* 394.67 cada uma: (1216 − 32) / 3. */
.tsm__column {
flex: 1 1 0;
min-width: 0;
overflow: hidden;
}
.tsm__column-track {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Os quatro depoimentos que só existem no Figma mobile (1259:10362). Ficam
dentro da mesma caixa recortada — é ela que o "See more" abre. */
.tsm__narrow {
display: none;
}
/* Véus brancos que esmaecem o topo e a base da caixa de depoimentos. */
.tsm__fade {
position: absolute;
left: 0;
width: 100%;
height: 192px;
pointer-events: none;
}
.tsm__fade--top {
top: 0;
background: linear-gradient(180deg, var(--c-white) 0%, rgba(255, 255, 255, 0) 100%);
}
/* 1419 − 192: o véu de baixo encosta na base da caixa. */
.tsm__fade--bottom {
top: 1227px;
background: linear-gradient(0deg, var(--c-white) 0%, rgba(255, 255, 255, 0) 100%);
}
/* O "See more" (.tsm__more) é peça só do mobile — o Figma de 1440 não o traz —
e por isso quem o esconde é a lista do §22, no fim do arquivo, junto de .pexp.
Fica registrado aqui porque ele NÃO é decorativo no desktop: enquanto esteve
solto, o somava 41px de altura mais os 72 de vão do .tsm__body e
empurrava o botão dourado para y=2211 — fora dos 2146 que a seção recorta, ou
seja, o CTA do desktop simplesmente não aparecia. Escondido, o corpo volta aos
1818 do Figma (72 + 135 + 72 + 1419 + 72 + 48) e o botão cai em 2098. */
.tcard {
padding: 32px;
/* Off-white opaco, como o traço do cabeçalho — no mobile o Figma escurece
esta borda (ver mobile.css). */
border: 1px solid var(--c-off-white);
border-radius: var(--r-16);
background: var(--c-white);
}
/* Nenhum dos 17 cartões do Figma tem trecho em negrito: o texto é um bloco só,
400/18. A entrelinha é 25 (ver .tsm .sec-label): é ela que faz a caixa do
texto fechar em 225 nas 9 linhas do primeiro cartão do desktop e em
150/300/325/375 nos quatro do mobile, exatamente como o Figma. */
.tcard__text {
font-size: 18px;
line-height: 25px;
font-weight: 400;
color: var(--c-gray);
}
.tcard__meta {
display: flex;
align-items: center;
gap: 12px;
height: 50px;
margin-top: 20px;
}
/* Radius 16 e recuo de 4 como no Figma. O redondo que se vê é da imagem: os
WebP são 90x90 com canal alfa e já trazem o recorte circular e o selinho do
Google embutidos — por isso o retângulo de 48 não leva radius próprio. */
.tcard__avatar {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
flex: none;
padding: 4px;
border-radius: var(--r-16);
background: linear-gradient(180deg, rgba(157, 157, 157, 0.06) 0%, rgba(0, 0, 0, 0.06) 100%);
overflow: hidden;
}
/* 48x48 FIXOS dentro do quadro de 50 com recuo 4: no Figma a foto é maior
que a área útil (42) e fica centrada, 1px para dentro de cada borda. Sem o
flex:none o flex a espremia para 42x48 e o object-fit cortava as laterais
do círculo — era o avatar "estranho". */
.tcard__avatar img {
flex: none;
width: 48px;
height: 48px;
max-width: none;
object-fit: cover;
}
/* 25 (nome) + 4 + 25 (linha de nota) = 54; transborda 2px do autor de 50, como
no Figma. */
.tcard__info {
display: flex;
flex-direction: column;
gap: 4px;
justify-content: center;
height: 54px;
}
.tcard__name {
font-size: 18px;
line-height: 25px;
font-weight: 600;
color: #000;
}
/* A linha tem 25 de caixa com as estrelas de 14 centradas dentro. */
.tcard__stars-row {
display: flex;
align-items: center;
gap: 12px;
height: 25px;
}
/* 5 estrelas de 14 com vão de 4 = 86. */
.tcard__stars {
width: 86px;
height: 14px;
flex: none;
}
.tcard__when {
font-size: 18px;
line-height: 25px;
font-weight: 400;
color: var(--c-gray-light);
}
/* ==========================================================================
18. SEÇÃO 12 — perguntas frequentes (Figma 1259:11887, 1440x1330)
========================================================================== */
/*
* A régua da seção é o gap 64 uniforme entre os quatro filhos de .faq__content:
* 112 (recuo) + 201 (cabeçalho) + 64 + 64 (abas) + 64 + 512 (itens) + 64 + 25
* ("Still have questions?") + 64 + 48 (botão) + 112 = 1330.
*
* A altura era fixa em 1322px. Além de não bater com o Figma, altura fixa não
* sobrevive a um item aberto: o acordeão empurra o que vem abaixo.
*/
.faq {
padding: 112px var(--pad-x);
background: var(--c-white);
overflow: hidden;
}
.faq__content {
display: flex;
flex-direction: column;
align-items: center;
gap: 64px;
max-width: var(--content-w);
margin-inline: auto;
}
/* 562px é a caixa HUG do Figma — a largura da linha mais larga do título de
64px com a quebra forçada. Os 720px de antes não vinham de node nenhum. */
.faq__header {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
width: 562px;
}
/*
* Aqui o rótulo NÃO usa a "mancha" de 12px que o resto do tema aplica: o
* cabeçalho do Figma soma 201px (29 + 32 + 140) e isso só fecha com a caixa de
* linha real de 25,2px mais o recuo superior de 4px que o wrapper
* "faq / header-text" declara. Com a mancha o cabeçalho encolheria para 188.
*/
.faq .sec-label {
height: 29px;
padding-top: 4px;
line-height: 25.2px;
}
.faq__title {
font-size: 64px;
line-height: 70.4px;
font-weight: 600;
color: #000;
text-align: center;
}
.faq__tabs {
display: flex;
width: 100%;
height: 64px;
}
/* As duas abas em 600: no Figma só a COR muda entre ativa e inativa — a
inativa não é peso 400. O cinza é #D9D9D9 sólido, não um preto a 15%. */
.faq__tab {
flex: 1 1 0;
height: 64px;
border-bottom: 1px solid var(--c-off-white);
font-size: 20px;
line-height: 28px;
font-weight: 600;
color: #D9D9D9;
text-align: center;
}
.faq__tab.is-active {
border-bottom: 2px solid var(--c-brown-mid);
border-radius: var(--r-12) var(--r-12) 0 0;
background: var(--c-cream-50);
color: var(--c-brown-mid);
}
.faq__list {
display: none;
flex-direction: column;
gap: 16px;
width: 100%;
}
.faq__list.is-active {
display: flex;
}
.faq__item {
border: 1px solid var(--c-off-white);
border-radius: var(--r-16);
background: var(--c-white);
}
/* 70px + 1px de borda em cima e embaixo = os 72px do item no Figma. O recuo
vertical de 32 que o node declara não produz altura (h:FIXED 72 com o
conteúdo centrado), então o que sobra dele é o recuo lateral. */
.faq__question {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
width: 100%;
height: 70px;
padding-inline: 32px;
font-size: 18px;
line-height: 25.2px;
font-weight: 600;
/* Preto nas duas larguras — é o que o Figma traz nos dois frames. */
color: #000;
text-align: left;
}
/* O Figma fixa o texto em 1064px e joga o + para a direita pelo
space-between; aqui ele ocupa o que sobra, o que dá no mesmo com a pergunta
em uma linha e continua certo em qualquer largura. */
.faq__question > span {
flex: 1 1 auto;
min-width: 0;
}
.faq__icon {
width: 20px;
height: 20px;
flex: none;
transition: transform var(--dur-normal) var(--ease-out);
}
.faq__item.is-open .faq__icon {
transform: rotate(45deg);
}
/* O estado ABERTO não consta no Figma — os seis itens estão fechados nos dois
frames. Recuo, tipografia e cor da resposta são decisão do tema. */
.faq__answer {
padding: 0 32px 26px;
font-size: 18px;
line-height: 25.2px;
font-weight: 400;
color: var(--c-gray);
}
.faq__answer p {
margin-bottom: 12px;
}
.faq__answer p:last-child {
margin-bottom: 0;
}
.faq__question--static {
cursor: default;
}
/*
* "Still have questions?" (I1259:11887;3043:12285) é Tertiary com o rótulo
* da LP em 16/22,4 e recuo 4/12: 165x30 no desktop. No mobile volta ao Small
* de 12px (mobile.css). Cor e estados vêm de .btn--tertiary.
*/
.faq__more {
height: 30px;
font-size: 16px;
line-height: 22.4px;
}
/* ==========================================================================
19. SEÇÃO 13 — galeria de tricoscopia (Figma 1259:11888, 1440x336)
========================================================================== */
/*
* Full-bleed: "procedure-gallery / content" é w:FILL nos 1440 inteiros, sem
* --pad-x e sem o container de 1216. As três células são adjacentes
* (x = 0 / 480 / 960), logo gap 0.
*
* Sem height: no Figma a seção é h:HUG — quem carrega os 336 são as células,
* que são h:FIXED. Sem overflow também: o clip do Figma está na célula, e um
* container da mesma altura das células não tem o que cortar.
*/
.gallery {
display: flex;
background: var(--c-white);
}
/* No Figma as três imagens ocupam a largura inteira da página (3x480 = 1440).
Com flex:1 elas continuam dividindo a largura em três em telas mais largas,
em vez de deixar sobra à direita: é o w:FILL do content com w:FIXED nas
células — as três crescem juntas, a altura fica em 336 e o clip passa a
cortar mais das laterais. */
.gallery__item {
flex: 1 1 0;
min-width: 0;
height: 336px;
margin: 0;
background: var(--c-white);
overflow: hidden;
}
/* é inline por padrão e carrega o espaço de descida da linha de
base. Dentro de uma célula overflow:hidden de altura travada isso empurra a
foto alguns px para baixo e come a base do enquadramento — justamente onde
a foto 2 está ancorada no rodapé da célula (top -19, bottom 0 no Figma).
Por isso a regra é global, e não só do mobile como era antes. */
.gallery__item picture {
display: block;
width: 100%;
height: 100%;
}
/* gallery-N.webp já é a janela exata do Figma (960x672 = 480x336 @2x), de
proporção idêntica à da célula: em 1440 o cover não corta nada, ele só entra
em ação acima de 1440, quando a célula alarga. Cortar por CSS a partir do
full-size exigiria a ampliação extra do Figma (+8,6% / +5,7% / +5,1%) e a
foto 2 ancorada embaixo — o recorte pronto evita isso. */
.gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ==========================================================================
20. SEÇÃO 14 — rodapé (Figma #797:30117, 1440x775)
========================================================================== */
.ftr {
height: 775px;
padding: 112px var(--pad-x);
background: var(--c-cream-50);
overflow: hidden;
}
.ftr__content {
display: flex;
flex-direction: column;
gap: 72px;
max-width: var(--content-w);
margin-inline: auto;
}
.ftr__row {
display: flex;
align-items: flex-start;
gap: 104px;
height: 367px;
}
.ftr__brand {
width: 384px;
height: 316px;
flex: none;
}
.ftr__logo {
width: 166.4px;
height: 64px;
}
.ftr__logo svg {
width: 166.4px;
height: 64px;
}
.ftr__brand-text {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 40px;
}
.ftr__brand-line {
font-size: 18px;
line-height: 25.2px;
font-weight: 400;
color: #000;
}
.ftr__brand-line--strong {
font-weight: 600;
color: var(--c-brown);
}
.ftr__cta {
margin-top: 40px;
}
/* No Figma as três colunas somam 559px em 728px: o space-between distribui
84,5px entre elas. Um gap fixo de 104px estouraria e encolheria as colunas. */
.ftr__columns {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 728px;
flex: none;
}
.ftr__col {
display: flex;
flex-direction: column;
gap: 16px;
flex: none;
}
.ftr__col--menu {
width: 174px;
height: 367px;
}
/* Figma: 174 + 181 + 192 em 728, ou seja vão de 90,5 do space-between. Com
193 a coluna do meio nascia 6px à esquerda de x=864,5. A altura é HUG: o
endereço de Manchester é mais longo que o de Londres do desenho. */
.ftr__col--contact {
width: 181px;
height: auto;
}
.ftr__col--social {
width: 192px;
height: 72px;
}
.ftr__col-title {
height: 22px;
font-size: 20px;
line-height: 24px;
font-weight: 600;
color: #000;
}
/* "Redes Sociales." tem descendente e ocupa 24px no Figma, não 22. */
.ftr__col--social .ftr__col-title {
height: 24px;
}
.ftr__list {
display: flex;
flex-direction: column;
gap: 16px;
font-size: 18px;
line-height: 25.2px;
font-weight: 400;
color: var(--c-gray);
}
.ftr__list a:hover {
color: var(--c-brown-mid);
}
.ftr__list li {
height: 22px;
}
/* Dos nove itens do menu só "Pricing" está em HUG no Figma (25, não 22): é
por isso que "Hair Simulator" cai em 117 e não em 114, e a lista fecha em
329 e não em 326. */
.ftr__list--menu li:nth-child(3) {
height: 25px;
}
/* As quatro linhas do Figma medem 25 / 25 / 25 / 50 e começam em 0, 41, 82 e
123. Os 20 e 18 de antes encurtavam os passos e, com o endereço centrado
numa caixa de 62 menor que o texto, a primeira linha do endereço subia por
cima da linha do WhatsApp. O endereço fica em HUG: Manchester ocupa cinco
linhas onde o desenho (Londres) usa duas. */
.ftr__list--contact li:nth-child(1) {
height: 25px;
}
.ftr__list--contact li:nth-child(2) {
height: 25px;
}
.ftr__list--contact li:nth-child(3) {
height: 25px;
}
.ftr__list--contact li:nth-child(4) {
height: auto;
}
.ftr__email {
text-decoration: underline;
}
.ftr__contact-row {
display: flex;
align-items: center;
gap: 8px;
}
.ftr__contact-row--address {
align-items: center;
}
.ftr__icon-20 {
width: 20px;
height: 20px;
flex: none;
}
.ftr__icon-18 {
width: 18px;
height: 18px;
flex: none;
margin-inline: 1px;
}
.ftr__social {
display: flex;
align-items: center;
gap: 8px;
height: 32px;
}
.ftr__social-link svg {
width: 32px;
height: 32px;
}
.ftr__rule {
height: 1px;
margin: 0;
border: 0;
background: var(--c-line);
}
/*
* O segundo : abre o modal. O reset tira o visual de botão e o que sobra
é o cartão. */
.tvideo {
display: block;
width: 100%;
text-align: left;
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
.tvideo__frame {
position: relative;
display: block;
aspect-ratio: 16 / 9;
border-radius: var(--r-12);
background: #000;
overflow: hidden;
}
.tvideo__frame img {
width: 100%;
height: 100%;
object-fit: cover;
/* A capa clareia no hover para o play ganhar contraste. */
filter: brightness(0.88);
}
.tvideo__play {
position: absolute;
top: 50%;
left: 50%;
display: grid;
place-items: center;
width: 64px;
height: 64px;
margin: -32px 0 0 -32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: var(--c-brown);
box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
}
/* O triângulo não é centrado na moldura: o vazio à direita da forma pede
2px de compensação para ele parecer no meio. */
.tvideo__play svg {
margin-left: 2px;
}
/* Os cartões ficam da mesma altura mesmo com legendas de uma ou duas linhas:
sem isto, a fileira desalinha na base e parece desmontada. */
.thanks__video-row {
align-items: start;
}
.tvideo {
display: flex;
flex-direction: column;
height: 100%;
}
.tvideo__name {
display: block;
margin-top: 18px;
font-size: 18px;
line-height: 25.2px;
font-weight: 600;
color: #000;
}
.tvideo__text {
display: block;
margin-top: 4px;
font-size: 16px;
line-height: 22.4px;
font-weight: 400;
color: var(--c-gray);
}
/* -- faixa 3: ações e redes ---------------------------------------------- */
.thanks__foot {
padding: 72px var(--pad-x) 96px;
background: var(--c-cream-50);
text-align: center;
}
.thanks__foot-inner {
max-width: 720px;
margin-inline: auto;
}
.thanks__foot-title {
font-size: 24px;
line-height: 33.6px;
font-weight: 600;
color: #000;
}
.thanks__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
margin-top: 24px;
}
.thanks__wa-icon {
width: 20px;
height: 20px;
flex: none;
}
/* O ícone do WhatsApp vem com o marrom da marca no arquivo; sobre o dourado
do botão ele precisa ser branco como o rótulo ao lado. */
.thanks__wa .thanks__wa-icon path {
fill: currentColor;
}
.thanks__social {
margin-top: 56px;
padding-top: 40px;
border-top: 1px solid var(--c-line);
}
.thanks__social-label {
font-size: 16px;
line-height: 22.4px;
font-weight: 400;
color: var(--c-gray);
}
.thanks__social-row {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 20px;
}
.thanks__social-link {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--c-white);
color: var(--c-brown);
box-shadow: inset 0 0 0 1px var(--c-cream);
}
.thanks__social-link:hover {
background: var(--c-gold);
color: var(--c-white);
box-shadow: inset 0 0 0 1px var(--c-gold);
}
/*
* Os cinco arquivos vêm do rodapé do Figma, onde cada ícone é um botão com
* moldura própria: dentro deles há um de traço #F0E4D0 e raio 7,5.
* Aqui a moldura é o círculo do CSS, então o quadrado do arquivo aparecia por
* dentro dele e cada ícone ficava com dois contornos.
*
* A cor é mirada pelo valor (#845D32) e não por `path`: o LinkedIn tem um
* `fill="#fff"` dentro de , num clipPath que não é desenhado, e trocá-lo
* não faria mal mas também não faz sentido. Passando a currentColor, o glifo
* acompanha o branco do hover, que antes não mudava nada.
*/
.thanks__social-link svg > rect {
display: none;
}
.thanks__social-link path[fill="#845d32"] {
fill: currentColor;
}
.thanks__extra {
margin-top: 40px;
font-size: 16px;
line-height: 22.4px;
color: var(--c-gray);
}
/* ==========================================================================
26. MOVIMENTO REDUZIDO
O Design System pede que toda animação respeite prefers-reduced-motion.
Os laços e as entradas já vivem em "no-preference"; esta guarda pega as
transições curtas que ficam fora dele (cor de hover, giro de ícone) e a
rolagem suave das âncoras.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
transition-duration: 0ms !important;
animation-duration: 0ms !important;
animation-iteration-count: 1 !important;
}
}
/* ==========================================================================
27. FAIXA ENTRE 1024 E 1279
O Figma tem dois frames: 1440 (desktop) e 390 (mobile, que vale até 1023).
O layout de desktop fecha bem até 1280 — é onde a coluna de 1216 ainda cabe
com o recuo mínimo de 32. Abaixo disso as seções, que têm larguras fixas do
desenho, passavam da tela (mosaico de prêmios, certificado, menu).
Em vez de um terceiro layout que o Figma não desenhou, a página inteira é
reduzida em degraus: com zoom z, a largura de layout vira largura / z, e
cada degrau garante no mínimo 1280. Em 1024 tudo fica a 80% — o mesmo
desenho de 1280, menor.
========================================================================== */
@media (min-width: 1024px) and (max-width: 1087.98px) {
html {
zoom: 0.8;
}
}
@media (min-width: 1088px) and (max-width: 1151.98px) {
html {
zoom: 0.85;
}
}
@media (min-width: 1152px) and (max-width: 1215.98px) {
html {
zoom: 0.9;
}
}
@media (min-width: 1216px) and (max-width: 1279.98px) {
html {
zoom: 0.95;
}
}