/* ==========================================================================
UNIFIT | site v2 jul 2026
Design system unico. Fonte de verdade visual: UNIFIT_Identidade_Visual_Guia_Web.md
Mobile-first. Desktop e adaptacao.
Sumario
01. Fonte (Greycliff CF) 06. Sistema grafico
02. Tokens 07. Layout e secoes
03. Reset 08. Componentes
04. Tipografia 09. Placeholders de print
05. Botoes e CTA 10. Movimento e reduced-motion
========================================================================== */
/* ==========================================================================
01. FONTE
--------------------------------------------------------------------------
Greycliff CF e fonte comercial (Connary Fagen) e NAO esta neste projeto.
Enquanto os arquivos nao existirem, o site renderiza no fallback nativo
sem nenhuma requisicao externa e sem nenhum erro de rede.
PARA ATIVAR (2 passos, nenhuma outra alteracao de codigo):
1. Coloque os 5 WOFF2 em assets/fonts/ com estes nomes exatos:
GreycliffCF-Light.woff2 (300)
GreycliffCF-Regular.woff2 (400)
GreycliffCF-Medium.woff2 (500)
GreycliffCF-Demibold.woff2 (600)
GreycliffCF-Bold.woff2 (700)
2. Descomente o bloco @font-face abaixo E as tags
no de cada pagina HTML (estao marcadas com o mesmo aviso).
Subsetar para Latin Extended (acentuacao pt-BR) antes de subir.
========================================================================== */
/* ---- INICIO DO BLOCO @font-face (descomente quando os WOFF2 chegarem) ----
@font-face {
font-family: "Greycliff CF";
src: url("../assets/fonts/GreycliffCF-Light.woff2") format("woff2");
font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Greycliff CF";
src: url("../assets/fonts/GreycliffCF-Regular.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Greycliff CF";
src: url("../assets/fonts/GreycliffCF-Medium.woff2") format("woff2");
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Greycliff CF";
src: url("../assets/fonts/GreycliffCF-Demibold.woff2") format("woff2");
font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Greycliff CF";
src: url("../assets/fonts/GreycliffCF-Bold.woff2") format("woff2");
font-weight: 700; font-style: normal; font-display: swap;
}
------ FIM DO BLOCO @font-face ------------------------------------------- */
/* ==========================================================================
02. TOKENS
========================================================================== */
:root {
/* --- Cor oficial (IDV aprovado) --- */
--volt: #CEF726;
--navy: #000050;
--off-white: #F4F4F4;
--black: #000000;
/* --- Extensao funcional (guia secao 3.4) --- */
--volt-dark: #B5DC10;
--navy-800: #000154;
--navy-600: #1A1A6B;
--navy-400: #4D4D8C;
--gray-500: #8A8A96;
--gray-200: #E2E2E6;
--success: #1FA85C;
--error: #D92D20;
/* Token adicional derivado, ALEM da extensao da secao 3.4 do guia.
Precisa de aprovacao formal, esta anotado no README.
Motivo: gray-500 (#8A8A96) reprova como cor de texto corrido, 3,10:1
sobre off-white e 3,41:1 sobre branco, contra o minimo de 4,5:1 da
secao 3.3. gray-700 entrega 6,18:1 sobre off-white e 6,80:1 sobre branco.
gray-500 fica reservado para borda e placeholder, que e o papel que o
guia lhe da. */
--gray-700: #5A5A66;
/* --- Tipografia --- */
--font-brand: "Greycliff CF", "Figtree", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
--w-light: 300;
--w-regular: 400;
--w-medium: 500;
--w-demibold: 600;
--w-bold: 700;
/* Escala fluida: interpolada entre o valor mobile (375px) e o desktop
(1280px) da tabela 4.3 do guia. Trava nos dois extremos. */
--fs-display: clamp(2.25rem, 1.525rem + 3.094vw, 4rem); /* 36 -> 64 */
--fs-h2: clamp(1.75rem, 1.336rem + 1.768vw, 2.75rem); /* 28 -> 44 */
--fs-h3: clamp(1.375rem, 1.168rem + 0.884vw, 1.875rem); /* 22 -> 30 */
--fs-h4: clamp(1.125rem, 1.021rem + 0.442vw, 1.375rem); /* 18 -> 22 */
--fs-body-lg: clamp(1.0625rem, 0.985rem + 0.331vw, 1.25rem); /* 17 -> 20 */
--fs-body: clamp(1rem, 0.974rem + 0.11vw, 1.0625rem); /* 16 -> 17 */
--fs-small: clamp(0.8125rem, 0.786rem + 0.11vw, 0.875rem); /* 13 -> 14 */
--fs-eyebrow: clamp(0.75rem, 0.724rem + 0.11vw, 0.8125rem); /* 12 -> 13 */
--fs-metric: clamp(3.5rem, 2.463rem + 4.42vw, 6rem); /* 56 -> 96 */
--lh-display: 1.05;
--lh-h2: 1.15;
--lh-h3: 1.2;
--lh-h4: 1.3;
--lh-body: 1.6;
--lh-small: 1.5;
--lh-tight: 1.2;
--tr-display: -0.02em;
--tr-h2: -0.015em;
--tr-h3: -0.01em;
--tr-metric: -0.03em;
--tr-eyebrow: 0.08em;
/* --- Raio (guia secao 5.4). Raio 0 nao existe no sistema Unifit. --- */
--radius-sm: 12px;
--radius-md: 20px;
--radius-lg: 32px;
--radius-full: 999px;
/* --- Espacamento base 4px (guia secao 5.8) --- */
--space-1: 4px; --space-2: 8px; --space-3: 12px;
--space-4: 16px; --space-6: 24px; --space-8: 32px;
--space-12: 48px; --space-16: 64px; --space-24: 96px;
--space-32: 128px; --space-40: 160px;
/* Respiro vertical de secao: 64 no mobile, ate 160 no desktop */
--section-y: clamp(64px, 40px + 7.5vw, 160px);
--section-y-tight: clamp(48px, 32px + 5vw, 96px);
/* --- Layout --- */
--container: 1200px;
--container-narrow: 760px; /* 70 caracteres por linha em texto corrido */
--gutter: clamp(20px, 4vw, 48px);
/* --- Movimento (guia secao 8.4) --- */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--dur: 400ms;
/* --- Altura da barra de CTA fixa mobile, usada como padding de rodape --- */
--sticky-h: 72px;
}
/* Textura para blocos volt de grande area (guia secao 5.6).
feTurbulence, nao gradiente. Substitui a sombra de folhagem do impresso. */
:root {
--noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ==========================================================================
03. RESET
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* header fixo nao cobre o alvo da ancora */
scroll-padding-top: 88px;
}
body {
margin: 0;
font-family: var(--font-brand);
font-weight: var(--w-regular);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--navy);
background: var(--off-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
/* Foco de teclado visivel (guia secao 8.5). Volt sobre navy, navy sobre claro. */
:focus { outline: none; }
:focus-visible {
outline: 3px solid var(--navy);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
/* Contextos de fundo escuro: o outline vira volt (guia secao 8.5).
.hero e .store-modal tambem sao navy, e sem eles o foco ficava navy sobre
navy, ou seja invisivel, nos badges do hero, na pagina /download (cujo
usa a classe .hero) e dentro do modal de lojas. */
.on-dark :focus-visible,
.section--navy :focus-visible,
.section--black :focus-visible,
.hero :focus-visible,
.store-modal :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.sticky-cta :focus-visible {
outline-color: var(--volt);
}
::selection { background: var(--volt); color: var(--navy); }
.skip-link {
position: absolute;
left: var(--space-4);
top: var(--space-4);
z-index: 200;
padding: var(--space-3) var(--space-6);
background: var(--volt);
color: var(--navy);
font-weight: var(--w-demibold);
border-radius: var(--radius-full);
transform: translateY(-200%);
transition: transform 200ms var(--ease-out);
}
/* offset 0 para o contorno navy cair sobre a propria pilula volt (15,2:1).
Com offset positivo ele cairia sobre o navy do header e desapareceria. */
.skip-link:focus-visible {
transform: translateY(0);
outline-color: var(--navy);
outline-offset: 0;
}
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
04. TIPOGRAFIA
--------------------------------------------------------------------------
Titulos em sentence case. Caixa alta apenas em eyebrow e label curto.
========================================================================== */
.display, h1 {
font-size: var(--fs-display);
font-weight: var(--w-bold);
line-height: var(--lh-display);
letter-spacing: var(--tr-display);
text-wrap: balance;
}
.h2, h2 {
font-size: var(--fs-h2);
font-weight: var(--w-demibold);
line-height: var(--lh-h2);
letter-spacing: var(--tr-h2);
text-wrap: balance;
}
.h3, h3 {
font-size: var(--fs-h3);
font-weight: var(--w-demibold);
line-height: var(--lh-h3);
letter-spacing: var(--tr-h3);
}
.h4, h4 {
font-size: var(--fs-h4);
font-weight: var(--w-medium);
line-height: var(--lh-h4);
}
.body-lg {
font-size: var(--fs-body-lg);
line-height: var(--lh-body);
}
.small {
font-size: var(--fs-small);
font-weight: var(--w-medium);
line-height: var(--lh-small);
}
.eyebrow {
display: inline-block;
font-size: var(--fs-eyebrow);
font-weight: var(--w-demibold);
line-height: var(--lh-tight);
letter-spacing: var(--tr-eyebrow);
text-transform: uppercase;
}
/* Numero e elemento grafico na Unifit, nao so informacao (guia secao 4.3) */
.metric {
display: block;
font-size: var(--fs-metric);
font-weight: var(--w-bold);
line-height: 0.95;
letter-spacing: var(--tr-metric);
font-variant-numeric: tabular-nums;
}
/* Largura de leitura: maximo 70 caracteres por linha */
.measure { max-width: 62ch; }
.measure-narrow { max-width: 48ch; }
/* Cores de texto por contexto. Volt NUNCA como cor de texto em fundo claro. */
.t-navy { color: var(--navy); }
.t-white { color: var(--off-white); }
.t-volt { color: var(--volt); } /* apenas dentro de .on-dark */
.t-muted { color: var(--gray-500); }
.t-muted-dark { color: rgba(244, 244, 244, 0.72); }
/* ==========================================================================
05. BOTOES E CTA
--------------------------------------------------------------------------
CTA primario replica o app: volt, canto pill, texto navy (guia secao 7).
Hover escurece para --volt-dark. Sem escala, sem sombra.
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 52px;
padding: var(--space-4) var(--space-8);
border: 2px solid transparent;
border-radius: var(--radius-full);
font-size: var(--fs-body);
font-weight: var(--w-demibold);
line-height: 1;
text-align: center;
transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.btn--volt {
background: var(--volt);
color: var(--navy);
}
.btn--volt:hover { background: var(--volt-dark); }
.btn--navy {
background: var(--navy);
color: var(--off-white);
}
.btn--navy:hover { background: var(--navy-600); }
/* Contorno sobre fundo escuro */
.btn--ghost {
background: transparent;
border-color: var(--navy-400);
color: var(--off-white);
}
.btn--ghost:hover { border-color: var(--volt); color: var(--volt); }
/* Contorno sobre fundo claro */
.btn--outline {
background: transparent;
border-color: var(--navy);
color: var(--navy);
}
.btn--outline:hover { background: var(--navy); color: var(--off-white); }
.btn--block { display: flex; width: 100%; }
.btn--sm { min-height: 44px; padding: var(--space-3) var(--space-6); font-size: var(--fs-small); }
/* --- Badges oficiais das lojas ---------------------------------------------
Arquivos originais da Apple e do Google. Nunca redesenhar.
O badge do Google Play ja vem com area de respiro embutida (~9% acima e
abaixo), por isso e renderizado ~18% mais alto que o da Apple para que os
dois pareçam do mesmo tamanho optico.
-------------------------------------------------------------------------- */
.store-badges {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
}
.store-badge {
display: inline-block;
border-radius: var(--radius-sm);
transition: opacity 200ms var(--ease-out);
}
.store-badge:hover { opacity: 0.82; }
/* Alinhamento dos dois badges, medido nos arquivos oficiais:
Apple SVG 119,66 x 40 arte ocupa o viewBox inteiro, padding zero
Google PNG 646 x 250 arte ocupa 646 x 192, com 29px transparentes
em cima e embaixo e ZERO nas laterais
Logo: para os dois terem a mesma altura optica, o arquivo do Google e
renderizado 250/192 = 1,302 vez mais alto que o da Apple, e a diferenca e
recolhida com margem negativa VERTICAL. Nao existe margem horizontal: o PNG
nao tem padding lateral, e era justamente a margem lateral que desalinhava
a borda esquerda dos badges empilhados no rodape. */
.store-badge img { width: auto; display: block; }
.store-badge--apple img { height: 40px; }
.store-badge--google img { height: 52px; margin-block: -6px; } /* 52 x .768 = 40 */
@media (min-width: 768px) {
.store-badge--apple img { height: 48px; }
.store-badge--google img { height: 62px; margin-block: -7px; } /* 62 x .768 = 48 */
}
/* --- Selo de nota das lojas --- */
.rating-seal {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
font-size: var(--fs-small);
font-weight: var(--w-demibold);
white-space: nowrap;
}
.rating-seal--on-dark {
background: var(--navy-600);
border: 1px solid var(--navy-400);
color: var(--off-white);
}
.rating-seal--on-light {
background: var(--volt);
color: var(--navy);
}
.rating-seal__stars { color: var(--volt); letter-spacing: 0.05em; }
.rating-seal--on-light .rating-seal__stars { color: var(--navy); }
/* --- Bloco de download reutilizavel ---------------------------------------
Estrutura:
.download-block
.download-block__main (badges + selo de nota, empilhados)
.qr-card (desktop grande apenas, ao lado)
O QR estava dentro da mesma linha flex do selo de nota e da legenda de
plataforma, o que o jogava para uma terceira posicao aleatoria da linha e
fazia ele parecer solto. Agora ele e uma coluna propria, alinhada pelo topo
com os badges e separada por uma divisoria, como um bloco de servico.
-------------------------------------------------------------------------- */
.download-block {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-6);
}
.download-block__main {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.download-block__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
}
/* QR: so a partir de 1080px, quando existe folga real de largura.
Abaixo disso o usuario ja esta no celular e o QR nao faz sentido. */
.qr-card { display: none; }
@media (min-width: 1080px) {
.download-block {
flex-direction: row;
align-items: stretch;
gap: var(--space-6);
}
/* Os dois badges nunca devem quebrar linha no desktop. */
.download-block__main .download-block__row { flex-wrap: nowrap; }
/* Coluna estreita: codigo em cima, legenda embaixo. Na horizontal o QR
comia a largura da coluna do hero (546px no container de 1200) e obrigava
os dois badges a empilhar. Na vertical ele ocupa ~120px e os badges
continuam lado a lado. */
.qr-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding-left: var(--space-6);
flex: 0 0 auto;
}
/* Divisoria em vez de caixa: o QR deixa de parecer um card flutuante e
passa a ler como continuacao do bloco de download. */
.qr-card--on-dark { border-left: 1px solid var(--navy-400); }
.qr-card--on-light { border-left: 1px solid var(--gray-200); }
.qr-card__code {
width: 84px;
height: 84px;
flex: 0 0 auto;
padding: 6px;
background: var(--off-white);
border-radius: var(--radius-sm);
}
.qr-card__code img { width: 100%; height: 100%; }
.qr-card__text {
font-size: var(--fs-eyebrow);
font-weight: var(--w-medium);
line-height: 1.3;
max-width: 13ch;
text-align: center;
}
.qr-card--on-dark .qr-card__text { color: rgba(244, 244, 244, 0.72); }
}
/* ==========================================================================
06. SISTEMA GRAFICO
========================================================================== */
/* --- 1. Malha modular: REMOVIDA -----------------------------------------
O guia (secao 5.1) previa uma grade de linhas finas como textura em fundo
claro. Na revisao do cliente a grade foi reprovada: em tela cheia ela lia
como wireframe, nao como textura subliminar.
As secoes claras agora sao off-white limpo. A definicao vem da tipografia,
da borda dos cards e do respiro, nao de padrao de fundo.
Se um dia quiser textura de volta em fundo claro, o caminho fiel ao guia e
a marca d'agua do imagotipo (item 3 abaixo), nao uma grade.
------------------------------------------------------------------------ */
/* --- 2. Circulos volt sobrepostos: REMOVIDOS ----------------------------
O guia (secao 5.2) previa circulos volt sobrepostos com transparencia como
ornamento de fundo, e o item 8.4 previa a montagem deles como o unico
momento coreografado da pagina. Reprovado na revisao do cliente: em
quantidade, os circulos poluiam o hero e competiam com o conteudo.
Removidos de todas as paginas, junto com a animacao de entrada.
O acento volt agora aparece so onde tem funcao: botao, chip de icone,
bloco de CTA, barra de dado e destaque tipografico.
------------------------------------------------------------------------ */
/* --- 3. Marca d'agua do imagotipo em contraste minimo --- */
.watermark {
position: absolute;
pointer-events: none;
z-index: 0;
width: min(120%, 1400px);
aspect-ratio: 985.73 / 182.98;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.watermark--on-dark {
background-image: url("../assets/logo/LOGO_UNIFIT_HORZ_BRANCO.svg");
opacity: 0.05;
}
.watermark--on-light {
background-image: url("../assets/logo/LOGO_UNIFIT_HORZ_AZUL.svg");
opacity: 0.04;
}
.watermark--on-volt {
background-image: url("../assets/logo/LOGO_UNIFIT_HORZ_AZUL.svg");
opacity: 0.07;
}
/* --- 6. Textura de luz em blocos volt de grande area --- */
.noise { position: relative; }
.noise::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--noise);
background-size: 180px 180px;
opacity: 0.055;
mix-blend-mode: multiply;
z-index: 0;
}
/* A marca d'agua fica de fora para nao perder o position: absolute: um
seletor universal aqui a jogaria no fluxo e abriria uma faixa vazia no
topo da secao. */
.noise > *:not(.watermark) { position: relative; z-index: 1; }
/* --- 5. Repeticao do dominio como padrao tipografico --- */
.domain-strip {
display: flex;
gap: var(--space-6);
padding: var(--space-3) 0;
overflow: hidden;
font-size: var(--fs-eyebrow);
font-weight: var(--w-demibold);
letter-spacing: var(--tr-eyebrow);
text-transform: uppercase;
white-space: nowrap;
user-select: none;
}
.domain-strip span { flex: 0 0 auto; }
.domain-strip--on-dark { color: var(--navy-400); border-block: 1px solid var(--navy-600); }
.domain-strip--on-volt { color: var(--navy); opacity: 0.45; border-block: 1px solid rgba(0, 0, 80, 0.2); }
/* ==========================================================================
07. LAYOUT E SECOES
========================================================================== */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.section {
position: relative;
padding-block: var(--section-y);
overflow: hidden;
}
.section--tight { padding-block: var(--section-y-tight); }
.section--light { background: var(--off-white); color: var(--navy); }
.section--navy { background: var(--navy); color: var(--off-white); }
.section--black { background: var(--black); color: var(--off-white); }
.section--volt { background: var(--volt); color: var(--navy); }
/* Contexto escuro: habilita foco volt e texto volt */
.on-dark { color: var(--off-white); }
.section__head { margin-bottom: var(--space-12); }
.section__head .eyebrow { margin-bottom: var(--space-4); }
.section__head h2 { margin-bottom: var(--space-4); }
.section__head p { max-width: 62ch; }
.section--navy .section__head .eyebrow,
.section--black .section__head .eyebrow { color: var(--volt); }
.section--light .section__head .eyebrow { color: var(--navy); opacity: 0.6; }
.section--volt .section__head .eyebrow { color: var(--navy); opacity: 0.65; }
.section--light .section__head p { color: var(--gray-700); }
.section--navy .section__head p,
.section--black .section__head p { color: rgba(244, 244, 244, 0.72); }
/* Fecha a matriz de variantes. Antes esta cor vinha por style inline. */
.section--volt .section__head p { color: rgba(0, 0, 80, 0.72); }
/* Texto secundario sobre bloco volt (navy rebaixado, nunca volt sobre volt) */
.t-on-volt { color: rgba(0, 0, 80, 0.78); }
/* Link de texto sublinhado em contexto escuro. Volt como cor de texto aqui e
permitido porque o fundo e navy ou preto. Nunca usar em fundo claro. */
.link-volt {
color: var(--volt);
font-weight: var(--w-demibold);
text-decoration: underline;
text-underline-offset: 3px;
}
.link-volt:hover { color: var(--volt-dark); }
/* Grades */
.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) {
.grid { gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
}
/* --- 7. Colagem modular: blocos justapostos, encaixe perfeito, gap 0 --- */
.collage {
display: grid;
gap: 0;
border-radius: var(--radius-lg);
overflow: hidden;
}
.collage__cell {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--space-6);
min-height: 160px;
}
.collage__cell--volt { background: var(--volt); color: var(--navy); }
.collage__cell--navy { background: var(--navy-600); color: var(--off-white); }
.collage__cell--black { background: var(--black); color: var(--off-white); }
.collage__cell--light { background: var(--off-white); color: var(--navy); }
.collage__cell--flush { padding: 0; }
/* ==========================================================================
08. COMPONENTES
========================================================================== */
/* ------------------------------- HEADER ---------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--navy);
border-bottom: 1px solid var(--navy-600);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
min-height: 68px;
}
/* Espacamento entre isotipo e logotipo e fixo. O SVG oficial e usado
inteiro, sem recomposicao. Tamanho minimo web: 120px de largura. */
.site-header__logo { display: block; flex: 0 0 auto; }
.site-header__logo img { width: 128px; height: auto; }
@media (min-width: 768px) {
.site-header__inner { min-height: 84px; }
.site-header__logo img { width: 148px; }
}
.site-nav { display: none; }
@media (min-width: 1080px) {
.site-nav {
display: flex;
align-items: center;
gap: var(--space-8);
}
.site-nav a {
font-size: var(--fs-small);
font-weight: var(--w-medium);
color: rgba(244, 244, 244, 0.8);
transition: color 200ms var(--ease-out);
}
.site-nav a:hover { color: var(--volt); }
.site-nav a[aria-current="page"] { color: var(--volt); font-weight: var(--w-demibold); }
}
.site-header__actions { display: flex; align-items: center; gap: var(--space-2); }
.site-header__cta { display: none; }
@media (min-width: 768px) { .site-header__cta { display: inline-flex; } }
/* Menu mobile */
.nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
background: transparent;
border: 1px solid var(--navy-400);
border-radius: var(--radius-sm);
color: var(--off-white);
}
@media (min-width: 1080px) { .nav-toggle { display: none; } }
.nav-toggle__bars { display: block; width: 20px; height: 2px; background: currentColor; border-radius: var(--radius-full); position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
content: "";
position: absolute;
left: 0;
width: 20px;
height: 2px;
background: currentColor;
border-radius: var(--radius-full);
transition: transform 200ms var(--ease-out);
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }
.mobile-nav {
display: none;
background: var(--navy-800);
border-top: 1px solid var(--navy-600);
}
.mobile-nav[data-open="true"] { display: block; }
@media (min-width: 1080px) { .mobile-nav { display: none !important; } }
.mobile-nav ul {
display: flex;
flex-direction: column;
padding-block: var(--space-4);
}
.mobile-nav a {
display: block;
padding: var(--space-4) 0;
font-size: var(--fs-body-lg);
font-weight: var(--w-medium);
color: var(--off-white);
border-bottom: 1px solid var(--navy-600);
}
.mobile-nav li:last-child a { border-bottom: 0; }
.mobile-nav a[aria-current="page"] { color: var(--volt); }
/* -------------------------------- HERO ----------------------------------- */
.hero {
position: relative;
padding-block: var(--space-12) var(--space-16);
background: var(--navy);
color: var(--off-white);
overflow: hidden;
}
@media (min-width: 768px) {
.hero { padding-block: var(--space-16) var(--space-24); }
}
.hero__grid {
position: relative;
z-index: 1;
display: grid;
gap: var(--space-12);
align-items: center;
}
@media (min-width: 1080px) {
.hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-16); }
}
/* A pilula .hero__eyebrow, aquele selo arredondado com bolinha piscando e
texto tipo "Gratis na App Store e no Google Play" acima do titulo, foi
REMOVIDA das tres paginas na revisao do cliente. E um cliche de landing
page gerada, nao acrescenta informacao que o hero ja nao entregue (os
badges das lojas estao logo abaixo) e rouba a primeira linha de leitura
do H1. O hero comeca direto no titulo. */
.hero h1 { margin-bottom: var(--space-6); }
.hero h1 em { font-style: normal; color: var(--volt); }
.hero__sub {
margin-bottom: var(--space-8);
font-size: var(--fs-body-lg);
color: rgba(244, 244, 244, 0.78);
max-width: 54ch;
}
/* Tres capacidades: registrar, evoluir, conectar */
.hero__caps {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-8);
}
.hero__cap {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: rgba(206, 247, 38, 0.12);
border: 1px solid rgba(206, 247, 38, 0.32);
border-radius: var(--radius-full);
color: var(--volt);
font-size: var(--fs-small);
font-weight: var(--w-demibold);
}
/* ------------------------ BIFURCACAO DE PUBLICO -------------------------- */
.fork { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .fork { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }
.fork__card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-8);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.fork__card--navy { background: var(--navy); color: var(--off-white); }
.fork__card--navy:hover { background: var(--navy-800); }
.fork__card--volt { background: var(--volt); color: var(--navy); }
.fork__card--volt:hover { background: var(--volt-dark); }
.fork__card .eyebrow { opacity: 0.7; }
.fork__card--navy .eyebrow { color: var(--volt); opacity: 1; }
.fork__card h3 { margin-bottom: var(--space-1); }
.fork__card p { font-size: var(--fs-body); }
.fork__card--navy p { color: rgba(244, 244, 244, 0.75); }
.fork__card--volt p { color: rgba(0, 0, 80, 0.75); }
.fork__go {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-4);
font-weight: var(--w-demibold);
}
.fork__card--navy .fork__go { color: var(--volt); }
.fork__go svg { transition: transform 200ms var(--ease-out); }
.fork__card:hover .fork__go svg { transform: translateX(4px); }
/* --------------------------------- CARDS --------------------------------- */
.card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-6);
border-radius: var(--radius-md);
height: 100%;
}
.card--light { background: #FFFFFF; border: 1px solid var(--gray-200); color: var(--navy); }
.card--navy { background: var(--navy-600); border: 1px solid var(--navy-400); color: var(--off-white); }
.card--volt { background: var(--volt); color: var(--navy); }
.card h3 { font-size: var(--fs-h4); font-weight: var(--w-demibold); }
.card p { font-size: var(--fs-body); }
.card--light p { color: var(--gray-700); }
.card--navy p { color: rgba(244, 244, 244, 0.72); }
/* Icone com peso e cantos arredondados, coerente com o isotipo (guia, bloqueio 8).
Sao SVG inline proprios, nao emoji: emoji sao glifos multicoloridos da fonte
do sistema, variam por plataforma e jogariam dezenas de cores fora da paleta
dentro do chip volt de marca. O traco herda currentColor, entao o mesmo
arquivo serve navy sobre chip volt e volt sobre chip navy. */
.card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin-bottom: var(--space-2);
border-radius: var(--radius-sm);
line-height: 1;
flex: 0 0 auto;
}
.card__icon svg {
width: 26px;
height: 26px;
}
.card--light .card__icon { background: var(--volt); color: var(--navy); }
.card--navy .card__icon { background: var(--volt); color: var(--navy); }
.card--volt .card__icon { background: var(--navy); color: var(--volt); }
/* Lista de bullets dentro de card */
.card__list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.card__list li {
position: relative;
padding-left: var(--space-6);
font-size: var(--fs-small);
font-weight: var(--w-medium);
}
.card__list li::before {
content: "";
position: absolute;
left: 0; top: 0.45em;
width: 10px; height: 10px;
background: var(--volt);
border-radius: 50%;
}
.card--volt .card__list li::before { background: var(--navy); }
/* ------------------------------ METRICAS --------------------------------- */
.stats { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
.stat {
padding: var(--space-6);
border-radius: var(--radius-md);
background: var(--navy-600);
border: 1px solid var(--navy-400);
}
.stat .metric { color: var(--volt); margin-bottom: var(--space-2); }
.stat__label {
font-size: var(--fs-body);
font-weight: var(--w-demibold);
color: var(--off-white);
margin-bottom: var(--space-3);
}
.stat__body { font-size: var(--fs-small); color: rgba(244, 244, 244, 0.7); }
.stat__source {
display: block;
margin-top: var(--space-4);
padding-top: var(--space-3);
/* navy-400 e token de BORDA e divisor (guia secao 3.4), nao de texto.
Como texto sobre o navy-600 do card daria 1,96:1. Aqui fica so na borda. */
border-top: 1px solid var(--navy-400);
font-size: var(--fs-eyebrow);
color: rgba(244, 244, 244, 0.72); /* 7,60:1 sobre navy-600 */
}
/* Comparativo 2,07 vs 1,36 */
.compare {
display: grid;
gap: var(--space-4);
padding: var(--space-6);
border-radius: var(--radius-lg);
background: var(--navy-800);
border: 1px solid var(--navy-400);
}
@media (min-width: 768px) {
.compare { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); padding: var(--space-8); }
}
.compare__row { display: flex; flex-direction: column; gap: var(--space-3); }
.compare__label { font-size: var(--fs-small); font-weight: var(--w-demibold); color: rgba(244, 244, 244, 0.7); }
.compare__value { font-size: var(--fs-h2); font-weight: var(--w-bold); letter-spacing: var(--tr-metric); }
.compare__bar { height: 14px; border-radius: var(--radius-full); background: var(--navy-600); overflow: hidden; }
.compare__fill { height: 100%; border-radius: var(--radius-full); }
.compare__fill--base { width: 65.7%; background: var(--navy-400); } /* 1,36 / 2,07 */
.compare__fill--best { width: 100%; background: var(--volt); }
.compare__row--best .compare__value { color: var(--volt); }
.compare__unit { font-size: var(--fs-small); color: rgba(244, 244, 244, 0.6); }
/* ------------------------------ ACCORDION -------------------------------- */
.accordion { display: flex; flex-direction: column; gap: var(--space-3); }
.accordion__item {
border-radius: var(--radius-md);
overflow: hidden;
}
.accordion__item--on-light { background: #FFFFFF; border: 1px solid var(--gray-200); }
.accordion__item--on-dark { background: var(--navy-600); border: 1px solid var(--navy-400); }
.accordion__btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
width: 100%;
padding: var(--space-6);
background: transparent;
border: 0;
text-align: left;
font-size: var(--fs-h4);
font-weight: var(--w-demibold);
line-height: var(--lh-h4);
color: inherit;
}
.accordion__icon {
position: relative;
flex: 0 0 auto;
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
background: var(--volt);
transition: transform 300ms var(--ease-out);
}
.accordion__icon::before,
.accordion__icon::after {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 14px; height: 3px;
background: var(--navy);
border-radius: var(--radius-full);
transform: translate(-50%, -50%);
transition: opacity 200ms var(--ease-out);
}
.accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion__btn[aria-expanded="true"] .accordion__icon::after { opacity: 0; }
.accordion__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 320ms var(--ease-out);
}
.accordion__panel[data-open="true"] { grid-template-rows: 1fr; }
/* visibility, e nao apenas overflow: recorte geometrico com altura zero NAO
remove o conteudo da arvore de acessibilidade, e o leitor de tela continuava
lendo os paineis fechados enquanto o botao anunciava aria-expanded="false".
O delay mantem o texto visivel durante a animacao de fechamento. */
.accordion__panel > div {
overflow: hidden;
visibility: hidden;
transition: visibility 0s linear 320ms;
}
.accordion__panel[data-open="true"] > div {
visibility: visible;
transition-delay: 0s;
}
.accordion__panel p {
padding: 0 var(--space-6) var(--space-6);
font-size: var(--fs-body);
}
.accordion__item--on-light .accordion__panel p { color: var(--gray-700); }
.accordion__item--on-dark .accordion__panel p { color: rgba(244, 244, 244, 0.72); }
.accordion__panel p + p { padding-top: 0; }
.accordion__panel strong { color: inherit; font-weight: var(--w-demibold); }
.accordion__item--on-light .accordion__panel strong { color: var(--navy); }
.accordion__item--on-dark .accordion__panel strong { color: var(--volt); }
/* Fallback sem JavaScript: ver o bloco