@charset "UTF-8";
/* =============================================================================
FORJA — CSS de fundação
TREINE · REGISTRE · EVOLUA
-----------------------------------------------------------------------------
CSS puro moderno: custom properties, sem framework, sem build, sem Tailwind.
Tema escuro único. Mobile-first (viewport de referência 390 × 844).
Ordem do arquivo:
1. Fontes (Google Fonts + fallback com size-adjust, sem CLS)
2. Tokens (:root)
3. Reset e base
4. Tipografia
5. Safe area do iOS e esqueleto de tela
6. Acento por módulo (lima / laranja / ciano / roxo)
7. Componentes
8. Utilitários
9. Movimento reduzido e preferências do sistema
Convenção de nomes: prefixo `fj-`, blocos em português, modificador `--`,
estado em `.is-*`. Cor de módulo entra por `data-modulo`, nunca por hex inline.
============================================================================= */
/* =============================================================================
1. FONTES
-----------------------------------------------------------------------------
Inter v4 é variável e tem o eixo `opsz` (optical size) de 14 a 32. Não existe
um arquivo separado chamado "Inter Display" no Google Fonts: o Display é o
MESMO arquivo com `font-variation-settings: "opsz" 32`. É o que
`--fj-fonte-display` faz. Quem precisar do nome literal pode usar a família
`"Inter Display"` — ela está aliasada aqui para a mesma fonte.
Em produção (VPS atrás do Traefik, PWA offline) troque este @import por
.woff2 self-hosted e mantenha os mesmos @font-face de fallback abaixo.
No HTML, para não encadear requisições:
============================================================================= */
/* O @import do Google Fonts foi TROCADO nesta cópia de produção pelos .woff2
servidos do próprio domínio, em /fonts/, como o DESIGN-SYSTEM recomenda para
o VPS. Motivos, os três reais:
1. a CSP do servidor (app/main.py) é `font-src 'self'` e `style-src
'self'`: um para fonts.googleapis.com é bloqueado em silêncio
e o app roda para sempre no fallback métrico;
2. offline de verdade: o service worker pré-cacheia /fonts/ junto com o
shell, coisa que não dá para fazer com a resposta opaca do Google;
3. app privado não precisa avisar um terceiro cada vez que abre.
São os mesmos arquivos e subsets (latin e latin-ext) que o Google serve para
`Inter:opsz,wght@14..32,400..800` e `Space+Grotesk:wght@500;700`, ambos sob
a SIL Open Font License. Os @font-face de fallback métrico logo abaixo
continuam valendo. */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("/fonts/inter-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("/fonts/inter-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Space Grotesk é variável no eixo de peso: um arquivo cobre 500 e 700. */
@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url("/fonts/space-grotesk-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* --- Fallbacks métricos ------------------------------------------------------
`size-adjust` + os três `*-override` fazem a fonte do sistema ocupar
exatamente a mesma caixa da fonte web. Resultado: quando a Inter/Space Grotesk
chega, nada se move — CLS zero na troca (`font-display: swap`).
Valores derivados de unitsPerEm/ascender/descender de cada família. */
@font-face {
font-family: "Inter Fallback";
src: local("Arial"), local("Helvetica Neue"), local("Segoe UI"), local("Roboto");
ascent-override: 90.00%;
descent-override: 22.43%;
line-gap-override: 0.00%;
size-adjust: 107.12%;
}
@font-face {
font-family: "Space Grotesk Fallback";
src: local("Arial"), local("Helvetica Neue"), local("Segoe UI"), local("Roboto");
ascent-override: 95.53%;
descent-override: 26.50%;
line-gap-override: 0.00%;
size-adjust: 103.00%;
}
/* "Inter Display" como apelido: mesmo arquivo, opsz travado no topo da escala. */
@font-face {
font-family: "Inter Display";
src: local("Inter");
font-weight: 100 900;
font-variation-settings: "opsz" 32;
ascent-override: 96.88%;
descent-override: 24.15%;
line-gap-override: 0.00%;
}
/* =============================================================================
2. TOKENS
============================================================================= */
:root {
color-scheme: dark;
/* ---------------------------------------------------------------------------
2.1 SUPERFÍCIES
Escada de elevação: quanto mais alto o elemento, mais claro o violeta.
------------------------------------------------------------------------ */
--fj-fundo: #0B0714; /* fundo de tela cheia */
--fj-folha: #120C22; /* bottom sheet / folha modal (telas 06, 14) */
--fj-superficie: #1A1233; /* cartão, campo, botão de ícone */
--fj-superficie-2: #221845; /* cartão elevado: sugestão do coach, chip de série */
--fj-superficie-3: #2A1F52; /* pressionado / hover sobre a superfície 2 */
--fj-superficie-neutra: #17131F; /* botão fantasma neutro (compartilhar, filtro) */
--fj-superficie-chip: #1C1824; /* chip de ação rápida, pílula neutra */
--fj-superficie-baixa: #110B20; /* cartão "desligado"/bloqueado */
--fj-tabbar: #0D081B; /* fundo da tab bar */
--fj-trilho: #312A47; /* trilho de barra de progresso e segmentos apagados */
--fj-grabber: #464152; /* alça da folha modal */
/* ---------------------------------------------------------------------------
2.2 BORDAS E SEPARADORES
Todas em branco com alpha: funcionam sobre qualquer superfície da escada.
------------------------------------------------------------------------ */
--fj-borda: rgba(255, 255, 255, .08); /* padrão de cartão/campo */
--fj-borda-sutil: rgba(255, 255, 255, .05); /* divisória interna de cartão-lista */
--fj-borda-forte: rgba(255, 255, 255, .14); /* hover de campo, borda "acesa" */
--fj-borda-clara: rgba(255, 255, 255, .28); /* trilho sobre gradiente */
--fj-fio-luz: rgba(255, 255, 255, .06); /* inset no topo da folha */
/* ---------------------------------------------------------------------------
2.3 TEXTO
⚠ Hierarquia auditada contra WCAG AA. Ver a tabela em DESIGN-SYSTEM.md.
--fj-txt-4 (#7C709F) é a cor do mock e REPROVA AA para texto
(3,97:1 sobre a superfície). Ela sobreviveu como token, mas SÓ para
glifos e divisores decorativos (alvo 3:1 de componente gráfico).
Qualquer texto legível usa --fj-txt-2 ou --fj-txt-3.
------------------------------------------------------------------------ */
--fj-txt-1: #FFFFFF; /* títulos, números, texto primário 19,9 / 17,8 */
--fj-txt-2: #C4BBDE; /* corpo secundário, texto de bolha 10,9 / 9,8 */
--fj-txt-3: #9186B4; /* rótulos, legendas, unidades, placeholder 6,0 / 5,3 */
--fj-txt-4: #7C709F; /* ⚠ NÃO-TEXTO: chevron, glifo, divisor 4,4 / 4,0 */
--fj-txt-desativado: #938DA4; /* item desabilitado/bloqueado 6,2 / 5,6 */
--fj-txt-inverso: #0B0714; /* tinta escura sobre acento claro */
--fj-txt-inverso-2: #140A24; /* variante violácea da tinta escura (mock) */
--fj-txt-sobre-grad: rgba(255, 255, 255, .88); /* só com scrim — ver §2.6 */
/* ---------------------------------------------------------------------------
2.4 MARCA
------------------------------------------------------------------------ */
--fj-violeta: #7C3AED; /* ⚠ preenchimento apenas: 3,1:1 — nunca como texto */
--fj-magenta: #EC2D7B; /* preenchimento, borda, gradiente */
--fj-grad-ini: #8B5CF6;
--fj-grad-fim: #FF7A1A;
/* Gradiente da marca em tela cheia (ângulo medido na splash: 143°). */
--fj-grad-marca: linear-gradient(143deg,
#8B5CF6 0%,
#B845BC 26%,
#EC2D7B 57%,
#F45B52 74%,
#FF7A1A 100%);
/* Mesma marca em peça quadrada (ícone, ladrilho, FAB): 135°. */
--fj-grad-marca-quad: linear-gradient(135deg, #8B5CF6 0%, #EC2D7B 50%, #FF7A1A 100%);
/* Halo branco da splash. */
--fj-halo: radial-gradient(30% 22% at 50% 39%,
rgba(255, 255, 255, .18) 0%,
rgba(255, 255, 255, .12) 45%,
rgba(255, 255, 255, .05) 72%,
rgba(255, 255, 255, 0) 100%);
/* --- Gradiente de AÇÃO (CTA) ---------------------------------------------
O gradiente da marca NÃO é o gradiente do botão: o CTA vai de violeta a
magenta e nunca chega ao laranja.
⚠ As paradas do mock (#7C3AED → #C026D3 → #EC2D7B) deixam o texto branco
em 4,02:1 na ponta magenta — reprova AA para um rótulo de 17px/700.
As paradas abaixo estão ~10% mais profundas: branco fica em 5,7 / 6,3 /
5,5:1 e a leitura de cor não muda. `--fj-grad-cta-mock` guarda o
original para uso decorativo (sem texto por cima). */
--fj-grad-cta: linear-gradient(97deg, #7C3AED 0%, #A21CAF 50%, #C91C63 100%);
--fj-grad-cta-mock: linear-gradient(97deg, #7C3AED 0%, #C026D3 50%, #EC2D7B 100%);
/* Scrim obrigatório quando texto pequeno cai sobre o gradiente da marca. */
--fj-scrim-grad: linear-gradient(to top, rgba(11, 7, 20, .55) 0%, rgba(11, 7, 20, 0) 60%);
--fj-scrim-midia: linear-gradient(to top, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 45%);
--fj-scrim-rodape: linear-gradient(to bottom, rgba(11, 7, 20, 0) 0%, var(--fj-fundo) 70%);
/* ---------------------------------------------------------------------------
2.5 COR POR MÓDULO
lima = treino/séries/volume · laranja = refeições/macros
ciano = peso/medidas · roxo = Coach IA
Cada módulo tem 3 tons: base (texto/ícone), -hi e -lo (paradas do gradiente).
------------------------------------------------------------------------ */
--fj-lima: #B8FF2E; --fj-lima-hi: #D2FD68; --fj-lima-lo: #94E220;
--fj-laranja: #FF7A1A; --fj-laranja-hi: #FFA93F; --fj-laranja-lo: #FF5A12;
--fj-ciano: #17D4FF; --fj-ciano-hi: #5BD9FF; --fj-ciano-lo: #1195FF;
--fj-roxo: #A855F7; --fj-roxo-hi: #BC7DFB; --fj-roxo-lo: #8A48EF;
--fj-grad-treino: linear-gradient(135deg, var(--fj-lima-hi) 0%, var(--fj-lima-lo) 100%);
--fj-grad-dieta: linear-gradient(135deg, var(--fj-laranja-hi) 0%, var(--fj-laranja-lo) 100%);
--fj-grad-peso: linear-gradient(135deg, var(--fj-ciano-hi) 0%, var(--fj-ciano-lo) 100%);
--fj-grad-coach: linear-gradient(135deg, var(--fj-roxo-hi) 0%, var(--fj-roxo-lo) 100%);
/* ---------------------------------------------------------------------------
2.6 SEMÂNTICA
⚠ Variantes `-txt` existem porque a cor cheia reprova AA como TEXTO:
magenta 4,44:1 e roxo 4,50:1 sobre a superfície. A cor cheia continua
válida para preenchimento, borda e gradiente.
------------------------------------------------------------------------ */
--fj-sucesso: #22E39A; /* 11,9 / 10,6 — ok como texto */
--fj-alerta: #FFB020; /* 10,9 / 9,8 — ok como texto */
--fj-perigo: #EC2D7B; /* preenchimento/borda de erro e ação destrutiva */
--fj-perigo-txt: #FF5C93; /* 6,8 / 6,1 — texto de erro e "Sair da conta" */
--fj-magenta-txt: #FF5C93; /* link/ação de texto em magenta */
--fj-roxo-txt: #C084FC; /* 7,5 / 6,8 — Coach IA como texto */
--fj-sucesso-veu: color-mix(in srgb, var(--fj-sucesso) 16%, transparent);
--fj-alerta-veu: color-mix(in srgb, var(--fj-alerta) 14%, transparent);
--fj-perigo-veu: color-mix(in srgb, var(--fj-perigo) 12%, transparent);
/* ---------------------------------------------------------------------------
2.7 FOCO E ESTADOS
Anel branco: 19,9:1 contra o fundo e 17,8:1 contra a superfície — o único
valor que passa sobre TODAS as superfícies e sobre todos os acentos.
------------------------------------------------------------------------ */
--fj-foco: #FFFFFF;
--fj-foco-largura: 2px;
--fj-foco-folga: 2px;
--fj-foco-interno: rgba(11, 7, 20, .85); /* anel escuro por dentro, sobre acento claro */
--fj-desativado-opacidade: .45;
--fj-pressionado: .985; /* scale do :active */
/* ---------------------------------------------------------------------------
2.8 TIPOGRAFIA
------------------------------------------------------------------------ */
--fj-fonte-ui: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
--fj-fonte-display: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
--fj-fonte-num: "Space Grotesk", "Space Grotesk Fallback", "Inter", ui-monospace, monospace;
/* Escala (px, base 390 de largura — todos os valores vieram das 16 specs) */
--fj-fs-3xs: 10px; /* rótulo de tab bar */
--fj-fs-2xs: 11px; /* rótulo de seção, eyebrow, selo */
--fj-fs-xs: 12px; /* legenda, chip, rodapé de métrica */
--fj-fs-sm: 13px; /* subtítulo, unidade, meta de item */
--fj-fs-md: 14px; /* corpo, título de item compacto */
--fj-fs-lg: 15px; /* corpo de bolha, título de lista, texto de apoio */
--fj-fs-xl: 16px; /* botão, título de cartão */
--fj-fs-2xl: 17px; /* campo, título de linha, botão primário */
--fj-fs-3xl: 20px; /* título de tela empilhada */
--fj-fs-4xl: 22px; /* valor de métrica */
--fj-fs-5xl: 26px; /* título de tela raiz, título de herói */
--fj-fs-6xl: 32px; /* H1 de onboarding/login */
--fj-fs-7xl: 44px; /* número herói (peso) */
--fj-fs-8xl: 54px; /* nota da semana, logotipo */
/* Entrelinha */
--fj-lh-1: 1; /* números e display */
--fj-lh-apert: 1.15; /* títulos de 2 linhas */
--fj-lh-normal: 1.35; /* rótulos e itens */
--fj-lh-corpo: 1.45; /* parágrafos, passos, mensagens do coach */
/* Peso */
--fj-w-normal: 400;
--fj-w-medio: 500;
--fj-w-semi: 600;
--fj-w-forte: 700;
--fj-w-display: 800;
/* Tracking */
--fj-ls-apertado: -0.02em; /* títulos display */
--fj-ls-leve: -0.01em;
--fj-ls-zero: 0;
--fj-ls-rotulo: 0.12em; /* rótulo de seção em caixa alta */
--fj-ls-rotulo-lg: 0.14em;
--fj-ls-assinatura: 0.24em; /* TREINE · REGISTRE · EVOLUA */
/* ---------------------------------------------------------------------------
2.9 ESPAÇAMENTO — escala de 4, com os degraus de 14/18 que as telas usam
------------------------------------------------------------------------ */
--fj-e-0: 0;
--fj-e-1: 2px;
--fj-e-2: 4px;
--fj-e-3: 6px;
--fj-e-4: 8px;
--fj-e-5: 10px;
--fj-e-6: 12px;
--fj-e-7: 14px;
--fj-e-8: 16px;
--fj-e-9: 18px;
--fj-e-10: 20px;
--fj-e-11: 24px;
--fj-e-12: 28px;
--fj-e-13: 32px;
--fj-e-14: 40px;
--fj-e-15: 48px;
--fj-gutter: 20px; /* margem lateral única do app inteiro */
--fj-largura: 390px; /* viewport de referência */
--fj-largura-max: 430px; /* trava em tablet/desktop */
/* ---------------------------------------------------------------------------
2.10 RAIOS
------------------------------------------------------------------------ */
--fj-r-xs: 8px; /* selo, badge de passo, chip retangular */
--fj-r-sm: 10px; /* chip de data sobre foto */
--fj-r-md: 12px; /* botão de ícone pequeno, ladrilho */
--fj-r-lg: 14px; /* botão de ícone 42, ladrilho 46, item compacto */
--fj-r-xl: 18px; /* cartão de lista, CTA, campo de busca */
--fj-r-2xl: 20px; /* cartão padrão, item de exercício */
--fj-r-3xl: 24px; /* cartão herói, cartão de perfil */
--fj-r-4xl: 28px; /* cartão de calendário, cartão de relatório */
--fj-r-folha: 32px; /* topo da bottom sheet */
--fj-r-pill: 999px;
/* ---------------------------------------------------------------------------
2.11 SOMBRAS E BRILHOS
Sombra preta é rara no FORJA. O que separa os planos é o brilho colorido.
------------------------------------------------------------------------ */
--fj-sombra-card: 0 8px 24px rgba(0, 0, 0, .35);
--fj-sombra-folha: 0 -12px 32px rgba(0, 0, 0, .55);
--fj-sombra-play: 0 10px 32px rgba(0, 0, 0, .35);
--fj-brilho-cta: 0 10px 28px -6px rgba(236, 45, 123, .55), 0 4px 14px -4px rgba(124, 58, 237, .45);
--fj-brilho-hero: 0 18px 48px -8px rgba(236, 45, 123, .45);
--fj-brilho-fab: 0 10px 30px -4px rgba(236, 45, 123, .55), 0 0 40px rgba(168, 85, 247, .25);
--fj-brilho-treino: 0 8px 28px rgba(184, 255, 46, .32);
--fj-brilho-dieta: 0 8px 28px rgba(255, 122, 26, .32);
--fj-brilho-peso: 0 8px 28px rgba(23, 212, 255, .32);
--fj-brilho-coach: 0 8px 28px rgba(168, 85, 247, .32);
/* Brilho de ambiente do topo — usado na Home, Histórico e Relatório. */
--fj-ambiente-topo:
radial-gradient(120% 100% at 0% 0%, rgba(139, 92, 246, .10), transparent 62%),
radial-gradient(120% 100% at 100% 0%, rgba(236, 45, 123, .11), transparent 62%);
/* ---------------------------------------------------------------------------
2.12 MOVIMENTO
------------------------------------------------------------------------ */
--fj-dur-instante: 120ms; /* :active, feedback de toque */
--fj-dur-rapida: 180ms; /* toggle, seleção, hover */
--fj-dur-media: 240ms; /* barra de progresso, troca de aba */
--fj-dur-lenta: 320ms; /* entrada de bloco, barras de macro */
--fj-dur-cena: 420ms; /* transição de tela */
--fj-ease-saida: cubic-bezier(.2, .8, .2, 1);
--fj-ease-entrada: cubic-bezier(.4, 0, 1, 1);
--fj-ease-mola: cubic-bezier(.22, 1, .36, 1);
/* ---------------------------------------------------------------------------
2.13 ALTURAS DE TOQUE E CAIXAS
44px é o piso absoluto de qualquer alvo interativo (WCAG 2.5.8 / HIG).
------------------------------------------------------------------------ */
--fj-toque: 44px; /* PISO — nunca reduzir */
--fj-h-icon-btn: 42px; /* caixa VISUAL do botão de ícone (o alvo é 44 via ::after) */
--fj-h-chip: 32px;
--fj-h-chip-sm: 26px;
--fj-h-campo: 52px;
--fj-h-btn: 54px;
--fj-h-btn-lg: 56px;
--fj-h-btn-xl: 64px;
--fj-h-linha: 60px; /* linha de cartão-lista */
--fj-h-item: 68px; /* item de lista com miniatura */
--fj-h-item-lg: 76px;
--fj-h-tabbar: 60px;
--fj-h-fab: 56px;
--fj-h-barra: 8px; /* barra de progresso padrão */
--fj-h-barra-sm: 4px; /* barra de macro */
/* ---------------------------------------------------------------------------
2.14 SAFE AREA
------------------------------------------------------------------------ */
--fj-safe-topo: env(safe-area-inset-top, 0px);
--fj-safe-base: env(safe-area-inset-bottom, 0px);
--fj-safe-esq: env(safe-area-inset-left, 0px);
--fj-safe-dir: env(safe-area-inset-right, 0px);
/* Acento padrão do documento (sobrescrito por [data-modulo]). */
--fj-acento: var(--fj-magenta);
--fj-acento-hi: var(--fj-grad-ini);
--fj-acento-lo: var(--fj-magenta);
--fj-acento-txt: var(--fj-magenta-txt);
--fj-acento-grad: var(--fj-grad-cta);
--fj-acento-glow: var(--fj-brilho-cta);
--fj-acento-tinta: var(--fj-txt-1);
}
/* O FORJA é dark-only por decisão de marca. A declaração abaixo existe só para
deixar isso explícito e impedir que o navegador force o modo claro. */
@media (prefers-color-scheme: light) {
:root { color-scheme: dark; }
}
/* =============================================================================
3. RESET E BASE
============================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation; /* mata o delay de 300ms e o zoom por toque duplo */
}
body {
min-height: 100dvh;
background-color: var(--fj-fundo);
color: var(--fj-txt-1);
font-family: var(--fj-fonte-ui);
font-size: var(--fj-fs-lg);
font-weight: var(--fj-w-normal);
line-height: var(--fj-lh-corpo);
font-synthesis-weight: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overscroll-behavior-y: none; /* sem bounce branco no iOS */
}
img, svg, video, canvas, picture {
display: block;
max-width: 100%;
}
img, video { height: auto; }
svg { flex-shrink: 0; }
button, input, select, textarea {
font: inherit;
color: inherit;
letter-spacing: inherit;
}
button {
background: none;
border: 0;
padding: 0;
cursor: pointer;
color: inherit;
text-align: inherit;
}
a { color: var(--fj-acento-txt); text-decoration: none; }
ul[class], ol[class] { list-style: none; padding: 0; }
table { border-collapse: collapse; }
hr {
border: 0;
border-top: 1px solid var(--fj-borda);
margin: 0;
}
::selection {
background: color-mix(in srgb, var(--fj-magenta) 45%, transparent);
color: var(--fj-txt-1);
}
/* --- Foco visível, sempre ---------------------------------------------------
Regra dura do projeto: nada perde o anel. `:focus-visible` cobre teclado e
navegação assistiva sem poluir o toque. */
:focus-visible {
outline: var(--fj-foco-largura) solid var(--fj-foco);
outline-offset: var(--fj-foco-folga);
border-radius: inherit;
}
/* Sobre acento claro (lima, ciano, branco) o anel branco some. Aí o anel é
escuro por dentro + branco por fora. */
.fj-foco-invertido:focus-visible {
outline-color: var(--fj-foco-interno);
box-shadow: 0 0 0 calc(var(--fj-foco-largura) + var(--fj-foco-folga) + 2px) var(--fj-foco);
}
/* Barra de rolagem discreta onde ela aparece (desktop / preview). */
* { scrollbar-width: thin; scrollbar-color: var(--fj-trilho) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: var(--fj-trilho); border-radius: var(--fj-r-pill); }
*::-webkit-scrollbar-track { background: transparent; }
/* =============================================================================
4. TIPOGRAFIA
============================================================================= */
h1, h2, h3, h4 {
font-family: var(--fj-fonte-display);
font-variation-settings: "opsz" 32;
font-weight: var(--fj-w-display);
line-height: var(--fj-lh-apert);
letter-spacing: var(--fj-ls-apertado);
color: var(--fj-txt-1);
text-wrap: balance;
}
h1 { font-size: var(--fj-fs-5xl); }
h2 { font-size: var(--fj-fs-3xl); }
h3 { font-size: var(--fj-fs-xl); font-weight: var(--fj-w-forte); }
h4 { font-size: var(--fj-fs-lg); font-weight: var(--fj-w-forte); }
p { text-wrap: pretty; }
small { font-size: var(--fj-fs-xs); }
strong, b { font-weight: var(--fj-w-forte); }
/* --- Papéis de texto --------------------------------------------------------
Use estas classes em vez de repetir font-size/weight/color nas telas. */
.fj-display {
font-family: var(--fj-fonte-display);
font-variation-settings: "opsz" 32;
font-weight: var(--fj-w-display);
letter-spacing: var(--fj-ls-apertado);
line-height: var(--fj-lh-apert);
}
.fj-titulo-tela { /* "Peso", "Exercícios", "Configurações" */
font-family: var(--fj-fonte-display);
font-variation-settings: "opsz" 32;
font-size: var(--fj-fs-5xl);
font-weight: var(--fj-w-display);
line-height: var(--fj-lh-1);
letter-spacing: var(--fj-ls-apertado);
color: var(--fj-txt-1);
}
.fj-titulo-tela--sm { font-size: var(--fj-fs-3xl); } /* tela empilhada compacta */
.fj-subtitulo { /* "Hoje · 12:40", "214 movimentos · 12 grupos" */
font-size: var(--fj-fs-sm);
font-weight: var(--fj-w-medio);
line-height: var(--fj-lh-normal);
color: var(--fj-txt-3);
}
.fj-lead { /* promessa do login, texto de apoio */
font-size: var(--fj-fs-xl);
font-weight: var(--fj-w-normal);
line-height: var(--fj-lh-corpo);
color: var(--fj-txt-2);
}
.fj-corpo {
font-size: var(--fj-fs-md);
font-weight: var(--fj-w-normal);
line-height: var(--fj-lh-corpo);
color: var(--fj-txt-2);
}
/* Rótulo de seção / eyebrow: caixa alta por CSS, texto natural no HTML.
Leitor de tela lê "Últimos treinos", não "Ú-L-T-I-M-O-S". */
.fj-rotulo {
font-size: var(--fj-fs-2xs);
font-weight: var(--fj-w-forte);
line-height: var(--fj-lh-normal);
letter-spacing: var(--fj-ls-rotulo);
text-transform: uppercase;
color: var(--fj-txt-3);
}
.fj-rotulo--lg { letter-spacing: var(--fj-ls-rotulo-lg); font-size: var(--fj-fs-xs); }
.fj-rotulo--acento { color: var(--fj-acento-txt); }
/* Números e métricas: Space Grotesk + tabular para não "dançar" ao atualizar. */
.fj-num {
font-family: var(--fj-fonte-num);
font-weight: var(--fj-w-forte);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
letter-spacing: var(--fj-ls-leve);
color: var(--fj-txt-1);
}
.fj-unidade { /* "kg", "reps", "/24" — cola no número pela baseline */
font-family: var(--fj-fonte-num);
font-size: var(--fj-fs-sm);
font-weight: var(--fj-w-semi);
color: var(--fj-txt-3);
}
/* Logotipo e assinatura da marca (splash e login). */
.fj-logotipo {
font-family: var(--fj-fonte-display);
font-variation-settings: "opsz" 32;
font-size: var(--fj-fs-8xl);
font-weight: var(--fj-w-display);
line-height: var(--fj-lh-1);
letter-spacing: .02em;
color: #FFFFFF;
}
.fj-assinatura {
font-family: var(--fj-fonte-ui);
font-size: var(--fj-fs-md);
font-weight: var(--fj-w-forte); /* 700, não 600: sobe o contraste sobre o gradiente */
line-height: var(--fj-lh-1);
letter-spacing: var(--fj-ls-assinatura);
padding-left: var(--fj-ls-assinatura); /* compensa o tracking do último glifo */
text-transform: uppercase;
white-space: nowrap;
color: rgba(255, 255, 255, .92);
}
/* =============================================================================
5. SAFE AREA DO iOS E ESQUELETO DE TELA
-----------------------------------------------------------------------------
Exige no :
============================================================================= */
.fj-tela {
position: relative;
min-height: 100dvh;
width: 100%;
max-width: var(--fj-largura-max);
margin-inline: auto;
display: flex;
flex-direction: column;
background-color: var(--fj-fundo);
padding-top: var(--fj-safe-topo);
padding-bottom: var(--fj-safe-base);
padding-left: var(--fj-safe-esq);
padding-right: var(--fj-safe-dir);
/* `clip`, e não `hidden`: `overflow-x: hidden` obriga o navegador a
computar `overflow-y: auto`, o que transforma a tela num contêiner de
rolagem que nunca rola (ela cresce com o conteúdo). Isso prende o rodapé
`sticky` na base do formulário, fora da vista, em vez da base da tela.
`clip` corta na horizontal sem criar contêiner de rolagem. */
overflow-x: clip;
}
/* Brilho de ambiente no topo (Home, Histórico, Relatório, Refeição). */
.fj-tela--ambiente::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 180px;
pointer-events: none;
z-index: 0;
background: var(--fj-ambiente-topo);
}
.fj-tela > * { position: relative; z-index: 1; }
/* Coluna de conteúdo: o gutter de 20px do app inteiro. */
.fj-conteudo {
width: 100%;
padding-inline: var(--fj-gutter);
}
/* Área rolável com espaço reservado para tab bar / barra de ação. */
.fj-rolagem {
flex: 1;
padding-bottom: calc(var(--fj-h-tabbar) + var(--fj-safe-base) + var(--fj-e-11));
}
/* 🚨 Quem rola é o DOCUMENTO. A `.fj-rolagem` só vira contêiner de rolagem
dentro de uma tela de ALTURA FIXA (`.fj-tela--fixa`, hoje só o chat do
Coach). Antes ela tinha `overflow-y: auto` + `overscroll-behavior: contain`
em toda tela: como ela cresce com o conteúdo, nunca tinha o que rolar, e o
`contain` impedia o gesto de passar para a página. No celular, o dedo
arrastava e nada acontecia; só a pinça (zoom) mexia a tela. Não volte isso. */
.fj-tela--fixa .fj-rolagem {
min-block-size: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* Dissolve o conteúdo antes da barra fixa, em vez de cortá-lo em linha reta. */
.fj-rolagem--fade {
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%);
mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%);
}
.fj-scrim-rodape {
position: fixed;
inset: auto 0 0 0;
height: 96px;
pointer-events: none;
z-index: 5;
background: var(--fj-scrim-rodape);
}
/* Rodapé de ação fixo (registrar série, salvar refeição, registrar peso). */
.fj-rodape-acao {
position: sticky;
bottom: 0;
z-index: 10;
display: flex;
align-items: center;
gap: var(--fj-e-5);
padding: var(--fj-e-6) var(--fj-gutter) calc(var(--fj-e-6) + var(--fj-safe-base));
background: linear-gradient(to top, var(--fj-fundo) 55%, transparent);
}
/* Home indicator — só no protótipo de navegador; no PWA quem desenha é o iOS. */
.fj-home-indicator {
width: 140px;
height: 5px;
margin: var(--fj-e-5) auto;
border-radius: var(--fj-r-pill);
background: rgba(255, 255, 255, .35);
flex: none;
}
/* =============================================================================
6. ACENTO POR MÓDULO
-----------------------------------------------------------------------------
`` repinta todos os componentes filhos.
REGRA DURA: a cor nunca é o único portador de significado. Todo bloco
colorido carrega também um rótulo textual (.fj-rotulo), um ícone com forma
própria ou um selo com texto. As classes abaixo fornecem a cor; o conteúdo
textual é obrigação do HTML.
============================================================================= */
[data-modulo="treino"] {
--fj-acento: var(--fj-lima);
--fj-acento-hi: var(--fj-lima-hi);
--fj-acento-lo: var(--fj-lima-lo);
--fj-acento-txt: var(--fj-lima); /* 16,5 / 14,8 — passa cheio */
--fj-acento-grad: var(--fj-grad-treino);
--fj-acento-glow: var(--fj-brilho-treino);
--fj-acento-tinta: var(--fj-txt-inverso); /* tinta ESCURA sobre lima */
}
[data-modulo="dieta"] {
--fj-acento: var(--fj-laranja);
--fj-acento-hi: var(--fj-laranja-hi);
--fj-acento-lo: var(--fj-laranja-lo);
--fj-acento-txt: var(--fj-laranja); /* 7,6 / 6,8 — passa */
--fj-acento-grad: var(--fj-grad-dieta);
--fj-acento-glow: var(--fj-brilho-dieta);
--fj-acento-tinta: var(--fj-txt-inverso);
}
[data-modulo="peso"] {
--fj-acento: var(--fj-ciano);
--fj-acento-hi: var(--fj-ciano-hi);
--fj-acento-lo: var(--fj-ciano-lo);
--fj-acento-txt: var(--fj-ciano); /* 11,3 / 10,1 — passa cheio */
--fj-acento-grad: var(--fj-grad-peso);
--fj-acento-glow: var(--fj-brilho-peso);
--fj-acento-tinta: var(--fj-txt-inverso);
}
[data-modulo="coach"] {
--fj-acento: var(--fj-roxo);
--fj-acento-hi: var(--fj-roxo-hi);
--fj-acento-lo: var(--fj-roxo-lo);
--fj-acento-txt: var(--fj-roxo-txt); /* ⚠ #C084FC: o roxo cheio dá 4,50 */
--fj-acento-grad: var(--fj-grad-coach);
--fj-acento-glow: var(--fj-brilho-coach);
--fj-acento-tinta: var(--fj-txt-1); /* tinta BRANCA sobre roxo (3,96 — só glifo) */
}
[data-modulo="marca"] {
--fj-acento: var(--fj-magenta);
--fj-acento-txt: var(--fj-magenta-txt);
--fj-acento-grad: var(--fj-grad-cta);
--fj-acento-glow: var(--fj-brilho-cta);
--fj-acento-tinta: var(--fj-txt-1);
}
/* Ladrilho de ícone por módulo (46 × 46 nas listas, 40 × 40 nas configurações). */
.fj-ladrilho {
flex: none;
display: grid;
place-items: center;
inline-size: 46px;
block-size: 46px;
border-radius: var(--fj-r-lg);
background: var(--fj-acento-grad);
color: var(--fj-acento-tinta);
}
.fj-ladrilho--sm { inline-size: 40px; block-size: 40px; border-radius: var(--fj-r-md); }
.fj-ladrilho--xs { inline-size: 34px; block-size: 34px; border-radius: 11px; }
.fj-ladrilho svg { inline-size: 24px; block-size: 24px; }
.fj-ladrilho--sm svg, .fj-ladrilho--xs svg { inline-size: 20px; block-size: 20px; }
/* Variante "véu": fundo translúcido do acento + glifo na cor do acento. */
.fj-ladrilho--veu {
background: color-mix(in srgb, var(--fj-acento) 16%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fj-acento) 18%, transparent);
color: var(--fj-acento);
}
/* =============================================================================
7. COMPONENTES
============================================================================= */
/* -----------------------------------------------------------------------------
7.1 BOTÕES
Base comum + três variantes pedidas: primário com gradiente, secundário e
botão lima de ação. Todos com normal / :hover / :focus-visible / :active /
:disabled / .is-carregando.
-------------------------------------------------------------------------- */
.fj-btn {
--_altura: var(--fj-h-btn);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--fj-e-5);
min-block-size: var(--_altura);
min-inline-size: var(--fj-toque);
padding-inline: var(--fj-e-11);
border-radius: var(--fj-r-xl);
font-family: var(--fj-fonte-display);
font-variation-settings: "opsz" 32;
font-size: var(--fj-fs-2xl);
font-weight: var(--fj-w-forte);
line-height: var(--fj-lh-1);
letter-spacing: var(--fj-ls-leve);
text-align: center;
white-space: nowrap;
user-select: none;
transition:
transform var(--fj-dur-instante) var(--fj-ease-saida),
box-shadow var(--fj-dur-rapida) var(--fj-ease-saida),
background var(--fj-dur-rapida) var(--fj-ease-saida),
opacity var(--fj-dur-rapida) var(--fj-ease-saida),
filter var(--fj-dur-rapida) var(--fj-ease-saida);
}
.fj-btn--bloco { display: flex; inline-size: 100%; }
.fj-btn--lg { --_altura: var(--fj-h-btn-lg); border-radius: var(--fj-r-2xl); }
.fj-btn--xl { --_altura: var(--fj-h-btn-xl); border-radius: var(--fj-r-xl); }
.fj-btn--sm { --_altura: var(--fj-toque); font-size: var(--fj-fs-lg); padding-inline: var(--fj-e-8); border-radius: var(--fj-r-md); }
.fj-btn svg { inline-size: 20px; block-size: 20px; }
.fj-btn:active:not(:disabled):not(.is-carregando) {
transform: scale(var(--fj-pressionado));
}
.fj-btn:disabled,
.fj-btn[aria-disabled="true"] {
cursor: not-allowed;
background: var(--fj-superficie);
color: var(--fj-txt-desativado);
box-shadow: none;
filter: none;
}
/* Carregando: o botão NÃO muda de tamanho — o texto some e entra o spinner. */
.fj-btn.is-carregando {
cursor: progress;
pointer-events: none;
color: transparent;
}
.fj-btn.is-carregando > * { visibility: hidden; }
.fj-btn.is-carregando::after {
content: "";
position: absolute;
inline-size: 20px;
block-size: 20px;
border-radius: 50%;
border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
border-top-color: var(--_spinner, #FFFFFF);
animation: fj-girar .7s linear infinite;
visibility: visible;
}
@keyframes fj-girar { to { transform: rotate(360deg); } }
/* --- Primário com gradiente ------------------------------------------------
Gradiente de AÇÃO (violeta → magenta), nunca o gradiente da marca.
Paradas escurecidas para o branco passar AA — ver §2.4. */
.fj-btn--primario {
background: var(--fj-grad-cta);
color: #FFFFFF;
box-shadow: var(--fj-brilho-cta);
--_spinner: #FFFFFF;
}
.fj-btn--primario:hover:not(:disabled):not(.is-carregando) { filter: brightness(1.06); }
.fj-btn--primario:active:not(:disabled):not(.is-carregando) {
box-shadow: 0 6px 18px -6px rgba(236, 45, 123, .40), 0 3px 10px -4px rgba(124, 58, 237, .32);
}
.fj-btn--primario:disabled,
.fj-btn--primario[aria-disabled="true"] { background: var(--fj-superficie); }
/* --- Secundário -------------------------------------------------------------
Superfície neutra + borda. Usado para "Tentar de novo", Apple/Google,
"Cancelar" e qualquer ação que não seja a principal da tela. */
.fj-btn--secundario {
background: var(--fj-superficie-chip);
color: var(--fj-txt-1);
border: 1px solid var(--fj-borda);
--_spinner: #FFFFFF;
}
.fj-btn--secundario:hover:not(:disabled) {
background: var(--fj-superficie-2);
border-color: var(--fj-borda-forte);
}
.fj-btn--secundario:active:not(:disabled) { background: var(--fj-superficie-3); }
.fj-btn--secundario:disabled { opacity: var(--fj-desativado-opacidade); }
/* Fantasma: só contorno, sobre superfície colorida ou mídia. */
.fj-btn--fantasma {
background: transparent;
border: 1px solid var(--fj-borda-clara);
color: var(--fj-txt-1);
}
.fj-btn--fantasma:hover:not(:disabled) { background: rgba(255, 255, 255, .08); }
/* --- Botão de ação do módulo (lima por padrão) -----------------------------
É o CTA de dentro de um módulo: "Registrar série" (lima), "Salvar refeição"
(lima da dieta é laranja — troque com data-modulo no ancestral).
A tinta é sempre a `--fj-acento-tinta`: escura sobre lima/laranja/ciano
(12–17:1) e branca sobre roxo. */
.fj-btn--acao {
background: var(--fj-acento-grad);
color: var(--fj-acento-tinta);
box-shadow: var(--fj-acento-glow);
font-weight: var(--fj-w-display);
--_spinner: var(--fj-acento-tinta);
}
.fj-btn--acao:hover:not(:disabled):not(.is-carregando) { filter: brightness(1.05); }
.fj-btn--acao:active:not(:disabled):not(.is-carregando) {
box-shadow: 0 4px 14px rgba(184, 255, 46, .20);
}
.fj-btn--acao:disabled,
.fj-btn--acao[aria-disabled="true"] {
background: var(--fj-superficie);
color: var(--fj-txt-desativado);
box-shadow: none;
}
/* Sobre acento claro o anel branco desaparece: usa o foco invertido. */
.fj-btn--acao:focus-visible {
outline-color: var(--fj-foco-interno);
box-shadow: var(--fj-acento-glow), 0 0 0 6px var(--fj-foco);
}
/* --- Botão destrutivo ------------------------------------------------------ */
.fj-btn--perigo {
background: var(--fj-perigo-veu);
border: 1px solid color-mix(in srgb, var(--fj-perigo) 35%, transparent);
color: var(--fj-perigo-txt);
}
.fj-btn--perigo:active:not(:disabled) { background: color-mix(in srgb, var(--fj-perigo) 18%, transparent); }
/* --- Botão de ícone (42 visual, 44 de alvo) -------------------------------- */
.fj-icon-btn {
position: relative;
display: grid;
place-items: center;
inline-size: var(--fj-h-icon-btn);
block-size: var(--fj-h-icon-btn);
border-radius: var(--fj-r-lg);
background: var(--fj-superficie);
border: 1px solid var(--fj-borda);
color: var(--fj-txt-1);
transition: background var(--fj-dur-rapida) var(--fj-ease-saida),
transform var(--fj-dur-instante) var(--fj-ease-saida);
}
/* Estica o alvo para 44 × 44 sem mexer no desenho. */
.fj-icon-btn::after {
content: "";
position: absolute;
inset: 50% auto auto 50%;
translate: -50% -50%;
inline-size: var(--fj-toque);
block-size: var(--fj-toque);
}
.fj-icon-btn svg { inline-size: 20px; block-size: 20px; }
.fj-icon-btn:hover { background: var(--fj-superficie-2); }
.fj-icon-btn:active { transform: scale(.94); }
.fj-icon-btn:disabled { opacity: var(--fj-desativado-opacidade); cursor: not-allowed; }
.fj-icon-btn--neutro { background: var(--fj-superficie-neutra); }
.fj-icon-btn--fantasma { background: transparent; }
.fj-icon-btn--lg { inline-size: 48px; block-size: 48px; border-radius: var(--fj-r-xl); }
/* Sobre mídia/gradiente: escurece e desfoca o que está atrás. */
.fj-icon-btn--sobre-midia {
background: rgba(0, 0, 0, .45);
border-color: rgba(255, 255, 255, .12);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* Ponto de notificação. */
.fj-icon-btn__ponto {
position: absolute;
inset-block-start: 9px;
inset-inline-end: 8px;
inline-size: 8px;
block-size: 8px;
border-radius: 50%;
background: var(--fj-magenta);
box-shadow: 0 0 0 2px var(--fj-superficie);
}
/* --- Ação em texto (sem caixa): "Editar", "Ver tudo" ----------------------- */
.fj-acao-txt {
display: inline-flex;
align-items: center;
min-block-size: var(--fj-toque); /* alvo de 44 sem alterar a tinta */
padding-block: var(--fj-e-6);
font-size: var(--fj-fs-sm);
font-weight: var(--fj-w-forte);
line-height: var(--fj-lh-1);
color: var(--fj-magenta-txt); /* ⚠ #FF5C93, não #EC2D7B — ver tabela */
transition: opacity var(--fj-dur-rapida) var(--fj-ease-saida);
}
.fj-acao-txt:hover { opacity: .82; }
.fj-acao-txt:active { opacity: .7; }
.fj-acao-txt:disabled { opacity: var(--fj-desativado-opacidade); cursor: not-allowed; }
/* -----------------------------------------------------------------------------
7.2 CARTÃO
-------------------------------------------------------------------------- */
.fj-card {
position: relative;
display: block;
inline-size: 100%;
padding: var(--fj-e-10);
border-radius: var(--fj-r-2xl);
background: var(--fj-superficie);
border: 1px solid var(--fj-borda);
color: var(--fj-txt-1);
}
.fj-card--compacto { padding: var(--fj-e-9); }
.fj-card--lg { border-radius: var(--fj-r-4xl); }
.fj-card--midia { padding: 0; overflow: hidden; border: 0; }
/* Cartão clicável: só ele ganha :active e :hover. */
.fj-card--acao {
cursor: pointer;
text-align: left;
transition: transform var(--fj-dur-instante) var(--fj-ease-saida),
background var(--fj-dur-rapida) var(--fj-ease-saida);
}
.fj-card--acao:hover { background: var(--fj-superficie-2); }
.fj-card--acao:active { transform: scale(.97); }
/* Cartão herói: gradiente do módulo + ornamento circular + brilho externo. */
.fj-card--heroi {
border: 0;
border-radius: var(--fj-r-3xl);
overflow: hidden;
background: var(--fj-grad-cta);
box-shadow: var(--fj-brilho-hero);
color: #FFFFFF;
}
.fj-card--heroi::after {
content: "";
position: absolute;
inline-size: 221px;
block-size: 221px;
inset-block-start: 62%;
inset-inline-start: 82%;
border-radius: 50%;
background: rgba(255, 255, 255, .10);
pointer-events: none;
}
/* Herói "tingido": superfície escura com véu do módulo + borda colorida.
É o padrão de FOCO do app (tela 05). */
.fj-card--tingido {
background:
linear-gradient(135deg,
color-mix(in srgb, var(--fj-acento) 12%, transparent),
color-mix(in srgb, var(--fj-acento) 2%, transparent)),
var(--fj-fundo);
border: 1px solid color-mix(in srgb, var(--fj-acento) 30%, transparent);
box-shadow: none;
}
/* Cartão-lista: agrupa linhas com divisórias internas de ponta a ponta. */
.fj-card--lista { padding: 0; overflow: hidden; border-radius: var(--fj-r-xl); }
.fj-card--lista > * + * { border-top: 1px solid var(--fj-borda-sutil); }
/* -----------------------------------------------------------------------------
7.3 CARTÃO DE MÉTRICA
rótulo em caixa alta · número em Space Grotesk · rodapé semântico
-------------------------------------------------------------------------- */
.fj-metrica {
display: flex;
flex-direction: column;
gap: var(--fj-e-3);
padding: var(--fj-e-7) var(--fj-e-8);
border-radius: var(--fj-r-xl);
background: var(--fj-superficie);
border: 1px solid var(--fj-borda);
text-align: left;
}
.fj-metrica__rotulo {
display: flex;
align-items: center;
gap: var(--fj-e-5);
font-size: var(--fj-fs-2xs);
font-weight: var(--fj-w-forte);
line-height: var(--fj-lh-1);
letter-spacing: var(--fj-ls-rotulo);
text-transform: uppercase;
color: var(--fj-txt-3);
}
.fj-metrica__rotulo svg {
inline-size: 18px;
block-size: 18px;
color: var(--fj-acento);
}
.fj-metrica__valor {
display: flex;
align-items: baseline;
gap: var(--fj-e-1);
font-family: var(--fj-fonte-num);
font-size: var(--fj-fs-4xl);
font-weight: var(--fj-w-forte);
line-height: var(--fj-lh-1);
letter-spacing: var(--fj-ls-leve);
font-variant-numeric: tabular-nums;
color: var(--fj-txt-1);
}
.fj-metrica__unidade {
font-family: var(--fj-fonte-num);
font-size: var(--fj-fs-sm);
font-weight: var(--fj-w-semi);
color: var(--fj-txt-3);
}
/* Rodapé: o TEXTO carrega o estado; a cor só reforça (regra dura do projeto). */
.fj-metrica__rodape {
font-size: var(--fj-fs-xs);
font-weight: var(--fj-w-forte);
line-height: var(--fj-lh-1);
color: var(--fj-txt-3);
}
.fj-metrica__rodape--ok { color: var(--fj-sucesso); }
.fj-metrica__rodape--alerta { color: var(--fj-alerta); }
.fj-metrica__rodape--perigo { color: var(--fj-perigo-txt); }
.fj-metrica__rodape--neutro { color: var(--fj-txt-3); }
/* Métrica herói: número de 44px com unidade na baseline. */
.fj-metrica--heroi .fj-metrica__valor { font-size: var(--fj-fs-7xl); font-weight: 800; }
.fj-metrica--heroi .fj-metrica__unidade { font-size: var(--fj-fs-3xl); }
/* Divisor vertical entre métricas de uma mesma faixa. */
.fj-metrica-divisor {
inline-size: 1px;
align-self: stretch;
background: var(--fj-borda-clara);
flex: none;
}
/* Grade de 3 (Home, Histórico, Peso). */
.fj-grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fj-e-5); }
.fj-grade-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--fj-e-6); }
/* -----------------------------------------------------------------------------
7.4 CHIP / FILTRO
Pílula de 32px de altura com alvo real de 44 via ::after.
-------------------------------------------------------------------------- */
.fj-chip {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--fj-e-3);
block-size: var(--fj-h-chip);
padding-inline: var(--fj-e-8);
border-radius: var(--fj-r-pill);
background: var(--fj-superficie-chip);
border: 1px solid var(--fj-borda);
color: var(--fj-txt-2);
font-size: var(--fj-fs-md);
font-weight: var(--fj-w-semi);
line-height: var(--fj-lh-1);
white-space: nowrap;
transition: background var(--fj-dur-rapida) var(--fj-ease-saida),
color var(--fj-dur-rapida) var(--fj-ease-saida),
border-color var(--fj-dur-rapida) var(--fj-ease-saida),
transform var(--fj-dur-instante) var(--fj-ease-saida);
}
.fj-chip::after {
content: "";
position: absolute;
inset: 50% auto auto 50%;
translate: -50% -50%;
inline-size: 100%;
block-size: var(--fj-toque);
min-inline-size: var(--fj-toque);
}
.fj-chip svg { inline-size: 16px; block-size: 16px; }
/* Hover só onde existe mouse. No celular o navegador deixa o `:hover` GRUDADO
no botão depois do toque, e esta regra (mais específica que a do chip
selecionado) pintava o texto de branco sobre a pílula branca: o chip
selecionado ficava ilegível. Visto em produção no onboarding, 21/09/2026. */
@media (hover: hover) and (pointer: fine) {
.fj-chip:hover:not(:disabled):not([aria-pressed="true"]):not([aria-selected="true"]):not(.is-ativo) {
border-color: var(--fj-borda-forte);
color: var(--fj-txt-1);
}
}
.fj-chip:active:not(:disabled) { transform: scale(.97); }
.fj-chip:disabled { opacity: var(--fj-desativado-opacidade); cursor: not-allowed; }
/* Ativo: pílula branca, tinta escura (19,1:1). */
.fj-chip[aria-selected="true"],
.fj-chip[aria-pressed="true"],
.fj-chip.is-ativo {
background: #FFFFFF;
border-color: transparent;
color: var(--fj-txt-inverso-2);
font-weight: var(--fj-w-forte);
}
.fj-chip[aria-selected="true"]:focus-visible,
.fj-chip.is-ativo:focus-visible {
outline-color: var(--fj-foco-interno);
box-shadow: 0 0 0 6px var(--fj-foco);
}
/* Variantes de estado. Cada uma exige texto próprio — a cor não fala sozinha. */
.fj-chip--acento {
background: color-mix(in srgb, var(--fj-acento) 16%, transparent);
border-color: color-mix(in srgb, var(--fj-acento) 40%, transparent);
color: var(--fj-acento-txt);
}
.fj-chip--sobre-grad {
background: rgba(255, 255, 255, .22);
border-color: transparent;
color: #FFFFFF;
font-weight: var(--fj-w-display);
font-size: var(--fj-fs-2xs);
letter-spacing: .06em;
text-transform: uppercase;
}
.fj-chip--ia {
background: rgba(0, 0, 0, .62);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-color: transparent;
color: var(--fj-lima);
font-weight: var(--fj-w-forte);
}
.fj-chip--sm { block-size: var(--fj-h-chip-sm); font-size: var(--fj-fs-xs); padding-inline: var(--fj-e-6); }
.fj-chip--divisor { background: var(--fj-superficie-neutra); color: var(--fj-txt-2); }
/* Chip estático (rótulo, não botão): sem alvo estendido nem interação. */
.fj-chip--estatico { pointer-events: none; }
.fj-chip--estatico::after { content: none; }
/* -----------------------------------------------------------------------------
7.5 CAMPO DE FORMULÁRIO
-------------------------------------------------------------------------- */
.fj-campo {
position: relative;
display: flex;
align-items: center;
gap: var(--fj-e-6);
inline-size: 100%;
min-block-size: var(--fj-h-campo);
padding-inline: var(--fj-e-8);
border-radius: var(--fj-r-lg);
background: var(--fj-superficie);
border: 1px solid var(--fj-borda);
transition: border-color var(--fj-dur-rapida) var(--fj-ease-saida),
box-shadow var(--fj-dur-rapida) var(--fj-ease-saida),
background var(--fj-dur-rapida) var(--fj-ease-saida);
}
.fj-campo:hover { border-color: var(--fj-borda-forte); }
.fj-campo__icone {
flex: none;
display: grid;
place-items: center;
inline-size: 20px;
block-size: 20px;
color: var(--fj-txt-3);
transition: color var(--fj-dur-rapida) var(--fj-ease-saida);
}
.fj-campo:focus-within .fj-campo__icone { color: var(--fj-txt-2); }
.fj-input {
flex: 1;
min-inline-size: 0;
/* `stretch` (e não `block-size:100%`) porque o pai centraliza os filhos:
sem isso o input encolhe para ~22px e o alvo de toque fica abaixo de 44. */
align-self: stretch;
min-block-size: var(--fj-toque);
background: transparent;
border: 0;
outline: none;
font-family: var(--fj-fonte-ui);
font-size: var(--fj-fs-2xl);
font-weight: var(--fj-w-semi);
color: var(--fj-txt-1);
}
.fj-input::placeholder {
color: var(--fj-txt-3); /* ⚠ #9186B4: o #6E6688 do mock dá 3,3:1 e reprova */
font-weight: var(--fj-w-medio);
opacity: 1; /* Firefox aplica opacity .54 por padrão */
}
.fj-input[type="password"]:not(:placeholder-shown) { letter-spacing: .18em; }
.fj-input:-webkit-autofill,
.fj-input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--fj-txt-1);
-webkit-box-shadow: 0 0 0 1000px var(--fj-superficie) inset;
caret-color: var(--fj-txt-1);
}
/* Botão dentro do campo (olho da senha, limpar busca, microfone). */
.fj-campo__acao {
position: relative;
flex: none;
display: grid;
place-items: center;
inline-size: var(--fj-toque);
block-size: var(--fj-toque);
margin-inline-end: calc(var(--fj-e-4) * -1);
border-radius: var(--fj-r-md);
color: var(--fj-txt-3);
}
.fj-campo__acao:hover { color: var(--fj-txt-1); }
.fj-campo__acao svg { inline-size: 20px; block-size: 20px; }
/* Foco: anel magenta + brilho externo (é o desenho do mock) e o anel de
acessibilidade em cima, para quem navega por teclado. */
.fj-campo:focus-within {
border-color: var(--fj-magenta);
border-width: 1.5px;
box-shadow: 0 0 0 3px rgba(236, 45, 123, .14), 0 0 18px rgba(236, 45, 123, .20);
}
.fj-campo:has(:focus-visible) {
outline: var(--fj-foco-largura) solid var(--fj-foco);
outline-offset: var(--fj-foco-folga);
}
/* Erro: NUNCA só pela borda — a mensagem abaixo é obrigatória. */
.fj-campo.is-erro {
border-color: var(--fj-perigo);
border-width: 1.5px;
box-shadow: 0 0 0 3px rgba(236, 45, 123, .12);
}
.fj-campo.is-erro .fj-campo__icone { color: var(--fj-perigo-txt); }
.fj-campo-erro {
display: block;
min-block-size: 20px; /* reserva a linha: o layout não pode saltar */
margin-block-start: var(--fj-e-3);
font-size: var(--fj-fs-sm);
font-weight: var(--fj-w-semi);
line-height: var(--fj-lh-normal);
color: var(--fj-perigo-txt);
}
.fj-campo-erro:empty { min-block-size: 20px; }
.fj-campo.is-carregando { pointer-events: none; }
.fj-campo.is-carregando .fj-input { color: var(--fj-txt-3); }
.fj-campo:has(:disabled),
.fj-campo.is-desativado {
opacity: var(--fj-desativado-opacidade);
pointer-events: none;
}
/* Campo de busca: mais alto, raio maior, foco violeta. */
.fj-campo--busca {
min-block-size: 56px;
border-radius: var(--fj-r-xl);
font-size: var(--fj-fs-xl);
}
.fj-campo--busca:focus-within {
border-color: var(--fj-grad-ini);
box-shadow: 0 0 0 3px rgba(124, 58, 237, .18);
}
.fj-campo--busca .fj-input { font-size: var(--fj-fs-xl); font-weight: var(--fj-w-normal); }
/* Textarea (observação da refeição, mensagem do coach). */
.fj-textarea {
inline-size: 100%;
min-block-size: 84px;
padding: var(--fj-e-8) var(--fj-e-9);
border-radius: var(--fj-r-xl);
background: var(--fj-superficie);
border: 1px solid var(--fj-borda);
color: var(--fj-txt-2);
font-family: var(--fj-fonte-ui);
font-size: var(--fj-fs-md);
line-height: var(--fj-lh-corpo);
resize: vertical;
}
.fj-textarea::placeholder { color: var(--fj-txt-3); opacity: 1; }
.fj-textarea:focus-within, .fj-textarea:focus { outline-offset: var(--fj-foco-folga); }
/* Rótulo visualmente oculto mas acessível. */
.fj-sr {
position: absolute !important;
inline-size: 1px; block-size: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* -----------------------------------------------------------------------------
7.6 ITEM DE LISTA
Duas formas: `.fj-item` (miniatura + 2 linhas + ação) e `.fj-linha`
(linha de cartão-lista, 60px, com toggle ou chevron).
-------------------------------------------------------------------------- */
.fj-item {
position: relative;
display: flex;
align-items: center;
gap: var(--fj-e-7);
inline-size: 100%;
min-block-size: var(--fj-h-item);
padding: var(--fj-e-6) var(--fj-e-7);
border-radius: var(--fj-r-2xl);
background: var(--fj-superficie);
border: 1px solid var(--fj-borda);
text-align: left;
color: var(--fj-txt-1);
transition: background var(--fj-dur-rapida) var(--fj-ease-saida),
transform var(--fj-dur-instante) var(--fj-ease-saida),
box-shadow var(--fj-dur-rapida) var(--fj-ease-saida);
}
.fj-item:hover { background: var(--fj-superficie-2); }
.fj-item:active { transform: scale(.985); }
.fj-item__corpo { flex: 1; min-inline-size: 0; }
.fj-item__titulo {
display: block;
font-size: var(--fj-fs-lg);
font-weight: var(--fj-w-forte);
line-height: var(--fj-lh-normal);
letter-spacing: var(--fj-ls-leve);
color: var(--fj-txt-1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fj-item__meta {
display: block;
margin-block-start: var(--fj-e-1);
font-size: var(--fj-fs-sm);
font-weight: var(--fj-w-medio);
line-height: var(--fj-lh-normal);
color: var(--fj-txt-3);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fj-item__acao {
flex: none;
display: grid;
place-items: center;
min-inline-size: var(--fj-toque);
min-block-size: var(--fj-toque);
color: var(--fj-txt-4); /* glifo decorativo: alvo 3:1, não texto */
}
.fj-item__acao svg { inline-size: 18px; block-size: 18px; }
/* Miniatura quadrada com o gradiente do módulo/grupo. */
.fj-item__thumb {
flex: none;
inline-size: 52px;
block-size: 52px;
border-radius: var(--fj-r-xl);
background: var(--fj-grad-marca-quad);
overflow: hidden;
object-fit: cover;
}
.fj-item__thumb--sm { inline-size: 46px; block-size: 46px; border-radius: 15px; }
/* Item ATIVO: borda do acento + véu. O rótulo textual (ex.: "Série 3 de 4")
é obrigatório — o estado não pode viver só na cor. */
.fj-item--ativo {
background:
linear-gradient(135deg,
color-mix(in srgb, var(--fj-acento) 6%, transparent),
color-mix(in srgb, var(--fj-acento) 1%, transparent)),
var(--fj-fundo);
border-color: color-mix(in srgb, var(--fj-acento) 50%, transparent);
}
.fj-item--ativo .fj-item__meta { color: var(--fj-acento-txt); font-weight: var(--fj-w-forte); }
/* Item CONCLUÍDO: rebaixado, mas com o selo de check (forma + texto no aria). */
.fj-item--concluido { background: var(--fj-superficie-baixa); }
.fj-item--concluido .fj-item__titulo { color: var(--fj-txt-2); }
.fj-item--concluido .fj-item__meta { color: var(--fj-txt-3); }
/* Item compacto (48px, checkbox + nome + meta à direita). */
.fj-item--compacto {
min-block-size: 48px;
padding: 0 var(--fj-e-8) 0 var(--fj-e-8);
border-radius: var(--fj-r-lg);
gap: var(--fj-e-6);
}
.fj-item--compacto .fj-item__titulo { font-size: var(--fj-fs-lg); }
.fj-item:disabled,
.fj-item[aria-disabled="true"] {
opacity: var(--fj-desativado-opacidade);
pointer-events: none;
}
/* --- Linha de cartão-lista (configurações, perfil) ------------------------- */
.fj-linha {
display: flex;
align-items: center;
gap: var(--fj-e-6);
inline-size: 100%;
min-block-size: var(--fj-h-linha);
padding: var(--fj-e-5) var(--fj-e-7);
background: transparent;
text-align: left;
color: var(--fj-txt-1);
transition: background var(--fj-dur-rapida) var(--fj-ease-saida);
}
.fj-linha:hover:not([aria-disabled="true"]) { background: rgba(255, 255, 255, .03); }
.fj-linha:active:not([aria-disabled="true"]) { background: rgba(255, 255, 255, .06); }
.fj-linha__corpo { flex: 1; min-inline-size: 0; }
.fj-linha__titulo {
display: block;
font-size: var(--fj-fs-2xl);
font-weight: var(--fj-w-forte);
line-height: var(--fj-lh-normal);
letter-spacing: var(--fj-ls-leve);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fj-linha__sub {
display: block;
margin-block-start: var(--fj-e-1);
font-size: var(--fj-fs-sm);
font-weight: var(--fj-w-medio);
line-height: var(--fj-lh-normal);
color: var(--fj-txt-3);
}
.fj-linha__fim { flex: none; display: flex; align-items: center; gap: var(--fj-e-4); }
.fj-linha--perigo .fj-linha__titulo { color: var(--fj-perigo-txt); }
.fj-linha--perigo:active { background: color-mix(in srgb, var(--fj-perigo) 8%, transparent); }
/* Chevron de navegação (glifo decorativo). */
.fj-chevron {
flex: none;
inline-size: 18px;
block-size: 18px;
color: var(--fj-txt-4);
}
/* -----------------------------------------------------------------------------
7.7 BARRA DE PROGRESSO
Um único componente: trilho + preenchimento, dirigido por --fj-valor (0–1).
A cor vem do módulo; o valor acessível vem de aria-valuenow.
-------------------------------------------------------------------------- */
.fj-barra {
inline-size: 100%;
block-size: var(--fj-h-barra);
border-radius: var(--fj-r-pill);
background: var(--fj-trilho);
overflow: hidden;
}
.fj-barra__fill {
block-size: 100%;
border-radius: inherit;
inline-size: calc(clamp(0, var(--fj-valor, 0), 1) * 100%);
background: var(--fj-acento-grad);
transition: inline-size var(--fj-dur-media) var(--fj-ease-saida),
background var(--fj-dur-media) var(--fj-ease-saida);
}
.fj-barra--sm { block-size: var(--fj-h-barra-sm); }
.fj-barra--clara { background: rgba(255, 255, 255, .30); }
.fj-barra--clara .fj-barra__fill { background: #FFFFFF; }
.fj-barra--sucesso .fj-barra__fill { background: var(--fj-sucesso); }
.fj-barra--erro .fj-barra__fill { background: var(--fj-magenta); }
/* Barra segmentada: passos do onboarding, RPE, aderência. */
.fj-segbar {
display: flex;
gap: var(--fj-e-3);
inline-size: 100%;
}
.fj-segbar__seg {
flex: 1;
block-size: 5px;
border-radius: var(--fj-r-pill);
background: var(--fj-trilho);
transition: background var(--fj-dur-rapida) var(--fj-ease-saida);
}
.fj-segbar__seg.is-ativo { background: var(--fj-grad-cta); }
.fj-segbar--modulo .fj-segbar__seg.is-ativo { background: var(--fj-acento); }
.fj-segbar--alta .fj-segbar__seg { block-size: 9px; border-radius: 4.5px; }
/* Barra de macro: rótulo + valor + barrinha de 4px com cor própria.
⚠ A cor de macro NÃO é a cor de módulo — ver DESIGN-SYSTEM.md §"Macros". */
.fj-macro--kcal { --fj-acento: var(--fj-laranja); --fj-acento-grad: var(--fj-laranja); }
.fj-macro--proteina { --fj-acento: var(--fj-lima); --fj-acento-grad: var(--fj-lima); }
.fj-macro--carbo { --fj-acento: var(--fj-ciano); --fj-acento-grad: var(--fj-ciano); }
.fj-macro--gordura { --fj-acento: var(--fj-roxo); --fj-acento-grad: var(--fj-roxo); }
/* -----------------------------------------------------------------------------
7.8 TAB BAR INFERIOR COM BOTÃO CENTRAL (FAB)
-------------------------------------------------------------------------- */
.fj-tabbar {
position: fixed;
inset: auto 0 0 0;
z-index: 20;
display: grid;
grid-template-columns: repeat(5, 1fr);
align-items: start;
inline-size: 100%;
max-inline-size: var(--fj-largura-max);
margin-inline: auto;
block-size: calc(var(--fj-h-tabbar) + var(--fj-safe-base));
padding-block-start: var(--fj-e-4);
padding-block-end: var(--fj-safe-base);
padding-inline: var(--fj-e-5);
background: color-mix(in srgb, var(--fj-tabbar) 88%, transparent);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-top: 1px solid var(--fj-borda-sutil);
}
.fj-tabbar__item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: var(--fj-e-2);
min-block-size: var(--fj-toque);
padding-block-start: var(--fj-e-1);
color: var(--fj-txt-3);
font-size: var(--fj-fs-3xs);
font-weight: var(--fj-w-semi);
line-height: var(--fj-lh-1);
transition: color var(--fj-dur-rapida) var(--fj-ease-saida);
}
.fj-tabbar__item svg { inline-size: 24px; block-size: 24px; }
.fj-tabbar__item:hover { color: var(--fj-txt-2); }
/* Ativo: cor + peso + um traço de 3px. Nunca só a cor. */
.fj-tabbar__item[aria-current="page"],
.fj-tabbar__item.is-ativo {
color: var(--fj-txt-1);
font-weight: var(--fj-w-forte);
}
.fj-tabbar__item[aria-current="page"]::before,
.fj-tabbar__item.is-ativo::before {
content: "";
position: absolute;
inset-block-start: -8px;
inline-size: 18px;
block-size: 3px;
border-radius: var(--fj-r-pill);
background: currentColor;
}
/* O slot central fica vazio na grade; o FAB flutua por cima dele. */
.fj-tabbar__vazio { pointer-events: none; }
.fj-fab {
position: fixed;
z-index: 21; /* SEMPRE acima do scrim e da tab bar */
inset: auto auto calc(var(--fj-safe-base) + 22px) 50%;
translate: -50% 0;
display: grid;
place-items: center;
inline-size: var(--fj-h-fab);
block-size: var(--fj-h-fab);
border-radius: 22px;
background: var(--fj-grad-marca-quad);
color: #FFFFFF;
box-shadow: var(--fj-brilho-fab);
transition: transform var(--fj-dur-instante) var(--fj-ease-saida),
box-shadow var(--fj-dur-rapida) var(--fj-ease-saida);
}
.fj-fab svg { inline-size: 24px; block-size: 24px; }
.fj-fab:hover { filter: brightness(1.06); }
/* `scale` separado de `translate` — se virasse `transform` cancelaria o centro. */
.fj-fab:active { scale: .94; }
.fj-fab:focus-visible { outline-offset: 4px; }
/* -----------------------------------------------------------------------------
7.9 CABEÇALHO DE TELA
Duas formas: empilhada (voltar + título + ação) e raiz (título grande +
subtítulo + ação).
-------------------------------------------------------------------------- */
.fj-cabecalho {
display: flex;
align-items: center;
gap: var(--fj-e-7);
inline-size: 100%;
min-block-size: var(--fj-h-icon-btn);
padding-block: var(--fj-e-6);
padding-inline: var(--fj-gutter);
}
.fj-cabecalho__corpo { flex: 1; min-inline-size: 0; }
.fj-cabecalho__titulo {
font-family: var(--fj-fonte-display);
font-variation-settings: "opsz" 32;
font-size: var(--fj-fs-3xl);
font-weight: var(--fj-w-display);
line-height: var(--fj-lh-apert);
letter-spacing: var(--fj-ls-leve);
color: var(--fj-txt-1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fj-cabecalho__sub {
margin-block-start: var(--fj-e-1);
font-size: var(--fj-fs-sm);
font-weight: var(--fj-w-medio);
line-height: var(--fj-lh-normal);
color: var(--fj-txt-3);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fj-cabecalho__fim { flex: none; display: flex; align-items: center; gap: var(--fj-e-4); }
/* Cabeçalho de tela raiz: título de 26px, alinhado à esquerda. */
.fj-cabecalho--raiz { align-items: flex-start; }
.fj-cabecalho--raiz .fj-cabecalho__titulo { font-size: var(--fj-fs-5xl); letter-spacing: var(--fj-ls-apertado); }
/* Fixo ao rolar: fundo translúcido com blur (só quando `.is-fixo` for ligado). */
.fj-cabecalho--fixo {
position: sticky;
inset-block-start: 0;
z-index: 15;
background: transparent;
transition: background var(--fj-dur-rapida) var(--fj-ease-saida),
box-shadow var(--fj-dur-rapida) var(--fj-ease-saida);
}
.fj-cabecalho--fixo.is-fixo {
background: color-mix(in srgb, var(--fj-fundo) 82%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 1px 0 var(--fj-borda-sutil);
}
/* Cabeçalho de seção: rótulo + ação/contador à direita. */
.fj-secao {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--fj-e-6);
inline-size: 100%;
margin-block: var(--fj-e-11) var(--fj-e-6);
}
/* -----------------------------------------------------------------------------
7.10 EMBLEMA / ETIQUETA
`.fj-selo` = pílula/retângulo com texto (grupo muscular, status, faixa).
`.fj-check` = selo quadrado com o ✓ sobre o acento.
`.fj-ponto` = bolinha de status; SEMPRE acompanhada de rótulo textual.
-------------------------------------------------------------------------- */
.fj-selo {
display: inline-flex;
align-items: center;
gap: var(--fj-e-3);
block-size: 24px;
padding-inline: var(--fj-e-6);
border-radius: var(--fj-r-xs);
background: var(--fj-superficie-2);
color: var(--fj-txt-2);
font-size: var(--fj-fs-2xs);
font-weight: var(--fj-w-display);
line-height: var(--fj-lh-1);
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
}
.fj-selo svg { inline-size: 14px; block-size: 14px; }
.fj-selo--acento {
background: color-mix(in srgb, var(--fj-acento) 16%, transparent);
color: var(--fj-acento-txt);
}
.fj-selo--sucesso { background: var(--fj-sucesso-veu); color: var(--fj-sucesso); }
.fj-selo--alerta { background: var(--fj-alerta-veu); color: var(--fj-alerta); }
.fj-selo--perigo { background: var(--fj-perigo-veu); color: var(--fj-perigo-txt); }
.fj-selo--sobre-midia {
background: rgba(11, 7, 20, .72);
color: #FFFFFF;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: var(--fj-r-sm);
letter-spacing: 0;
text-transform: none;
font-weight: var(--fj-w-forte);
font-size: var(--fj-fs-sm);
}
.fj-selo--destacado {
background: var(--fj-acento);
color: var(--fj-acento-tinta);
}
/* Selo de check (exercício concluído, item marcado). */
.fj-check {
display: grid;
place-items: center;
flex: none;
inline-size: 22px;
block-size: 22px;
border-radius: 7px;
background: var(--fj-acento-grad);
color: var(--fj-acento-tinta);
}
.fj-check svg { inline-size: 13px; block-size: 13px; }
/* Ponto de status — precisa de rótulo ao lado, sempre. */
.fj-ponto {
display: inline-flex;
align-items: center;
gap: var(--fj-e-3);
font-size: var(--fj-fs-sm);
font-weight: var(--fj-w-forte);
line-height: var(--fj-lh-1);
color: var(--fj-sucesso);
}
.fj-ponto::before {
content: "";
inline-size: 6px;
block-size: 6px;
border-radius: 50%;
background: currentColor;
flex: none;
}
.fj-ponto--offline { color: var(--fj-txt-3); }
.fj-ponto--alerta { color: var(--fj-alerta); }
/* Faixa de aviso (offline, erro, dica) — ícone + texto + ação opcional. */
.fj-faixa {
display: flex;
align-items: center;
gap: var(--fj-e-7);
inline-size: 100%;
min-block-size: 46px;
padding: var(--fj-e-6) var(--fj-e-9);
border-radius: var(--fj-r-pill);
background: rgba(255, 255, 255, .04);
border: 1px solid var(--fj-borda);
font-size: var(--fj-fs-md);
font-weight: var(--fj-w-semi);
color: var(--fj-txt-2);
}
.fj-faixa svg { inline-size: 20px; block-size: 20px; flex: none; }
.fj-faixa__fim { margin-inline-start: auto; color: var(--fj-txt-3); font-size: var(--fj-fs-md); }
.fj-faixa--sucesso { background: var(--fj-sucesso-veu); border-color: color-mix(in srgb, var(--fj-sucesso) 32%, transparent); color: var(--fj-txt-1); }
.fj-faixa--sucesso svg { color: var(--fj-sucesso); }
.fj-faixa--alerta { background: var(--fj-alerta-veu); border-color: color-mix(in srgb, var(--fj-alerta) 32%, transparent); color: var(--fj-txt-1); }
.fj-faixa--alerta svg { color: var(--fj-alerta); }
.fj-faixa--perigo { background: var(--fj-perigo-veu); border-color: color-mix(in srgb, var(--fj-perigo) 35%, transparent); color: var(--fj-txt-1); }
.fj-faixa--perigo svg { color: var(--fj-perigo-txt); }
/* -----------------------------------------------------------------------------
7.11 ESQUELETO DE CARREGAMENTO
Regra: esqueleto = ausência de dado. `0` e `—` são informação e nunca podem
aparecer no lugar de um esqueleto.
-------------------------------------------------------------------------- */
.fj-esqueleto {
--_alt: 16px;
display: block;
inline-size: 100%;
block-size: var(--_alt);
border-radius: var(--fj-r-xs);
background:
linear-gradient(90deg,
rgba(255, 255, 255, .04) 0%,
rgba(255, 255, 255, .09) 50%,
rgba(255, 255, 255, .04) 100%);
background-size: 200% 100%;
animation: fj-shimmer 1.2s linear infinite;
pointer-events: none;
user-select: none;
}
.fj-esqueleto--texto { --_alt: 14px; border-radius: 4px; }
.fj-esqueleto--titulo { --_alt: 22px; }
.fj-esqueleto--num { --_alt: 26px; inline-size: 72px; }
.fj-esqueleto--card { --_alt: 88px; border-radius: var(--fj-r-2xl); }
.fj-esqueleto--heroi { --_alt: 130px; border-radius: var(--fj-r-3xl); }
.fj-esqueleto--circulo{ --_alt: 44px; inline-size: 44px; border-radius: 50%; }
.fj-esqueleto--60 { inline-size: 60%; }
.fj-esqueleto--40 { inline-size: 40%; }
@keyframes fj-shimmer {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
/* Container em carregamento: apaga interações e anuncia via aria-busy. */
[aria-busy="true"] .fj-btn,
[aria-busy="true"] .fj-item { pointer-events: none; }
/* -----------------------------------------------------------------------------
7.12 EXTRAS RECORRENTES (aparecem em 4+ telas)
-------------------------------------------------------------------------- */
/* --- Interruptor (toggle) — trilho lima com knob ESCURO (assinatura FORJA) -- */
.fj-switch {
position: relative;
flex: none;
display: inline-block;
inline-size: 48px;
block-size: 28px;
}
/* O input é o alvo real: 44px de altura, estourando a caixa visual de 28px. */
.fj-switch input {
position: absolute;
inset-block: calc((var(--fj-toque) - 28px) / -2);
inset-inline: 0;
inline-size: 100%;
block-size: var(--fj-toque);
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.fj-switch__trilho {
display: block;
inline-size: 100%;
block-size: 100%;
border-radius: var(--fj-r-pill);
background: rgba(255, 255, 255, .10);
border: 1px solid var(--fj-borda);
transition: background var(--fj-dur-rapida) var(--fj-ease-saida),
box-shadow var(--fj-dur-rapida) var(--fj-ease-saida);
}
.fj-switch__trilho::after {
content: "";
position: absolute;
inset-block-start: 3px;
inset-inline-start: 3px;
inline-size: 22px;
block-size: 22px;
border-radius: 50%;
background: var(--fj-txt-3);
transition: translate var(--fj-dur-rapida) var(--fj-ease-saida),
background var(--fj-dur-rapida) var(--fj-ease-saida);
}
.fj-switch input:checked + .fj-switch__trilho {
background: linear-gradient(135deg, #C9FF4D, #A6F01E);
border-color: transparent;
box-shadow: 0 0 14px rgba(184, 255, 46, .32);
}
.fj-switch input:checked + .fj-switch__trilho::after {
translate: 20px 0;
background: var(--fj-fundo);
}
.fj-switch input:focus-visible + .fj-switch__trilho {
outline: var(--fj-foco-largura) solid var(--fj-foco);
outline-offset: var(--fj-foco-folga);
}
.fj-switch input:disabled + .fj-switch__trilho { opacity: var(--fj-desativado-opacidade); }
.fj-switch input:disabled { cursor: not-allowed; }
/* --- Controle segmentado (Fotos/Medidas/Marcos, Diário/Semanal/...) -------- */
.fj-segmented {
position: relative;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
inline-size: 100%;
block-size: 48px;
padding: 5px;
border-radius: var(--fj-r-pill);
background: rgba(255, 255, 255, .05);
border: 1px solid var(--fj-borda);
}
.fj-segmented__opt {
position: relative;
z-index: 1;
display: grid;
place-items: center;
/* A caixa visual tem 38px (48 do trilho − 2×5 de padding). O alvo real sobe
para 44 pelo ::after abaixo, sem mexer no desenho da pílula. */
min-block-size: 38px;
border-radius: var(--fj-r-xl);
font-size: var(--fj-fs-lg);
font-weight: var(--fj-w-semi);
line-height: var(--fj-lh-1);
color: var(--fj-txt-3);
white-space: nowrap;
transition: color var(--fj-dur-rapida) var(--fj-ease-saida);
}
.fj-segmented__opt::after {
content: "";
position: absolute;
inset: 50% auto auto 50%;
translate: -50% -50%;
inline-size: 100%;
block-size: var(--fj-toque);
}
.fj-segmented__opt[aria-selected="true"],
.fj-segmented__opt[aria-checked="true"] {
color: var(--fj-txt-inverso-2);
font-weight: var(--fj-w-forte);
}
.fj-segmented__pilula {
position: absolute;
z-index: 0;
inset-block: 5px;
inline-size: var(--fj-seg-largura, 33.333%);
translate: var(--fj-seg-x, 0) 0;
border-radius: var(--fj-r-xl);
background: #FFFFFF;
box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
transition: translate var(--fj-dur-media) var(--fj-ease-mola),
inline-size var(--fj-dur-media) var(--fj-ease-mola);
}
.fj-segmented__opt:focus-visible {
outline-color: var(--fj-foco);
outline-offset: -2px;
}
/* --- Stepper numérico (carga, reps, porção) -------------------------------- */
.fj-stepper {
display: grid;
grid-template-columns: var(--fj-toque) 1fr var(--fj-toque);
align-items: center;
gap: var(--fj-e-6);
inline-size: 100%;
padding: var(--fj-e-8);
border-radius: var(--fj-r-2xl);
background: var(--fj-superficie);
border: 1px solid var(--fj-borda);
}
.fj-stepper__rotulo { grid-column: 1 / -1; }
.fj-stepper__btn {
display: grid;
place-items: center;
inline-size: var(--fj-toque);
block-size: var(--fj-toque);
border-radius: var(--fj-r-lg);
border: 1px solid var(--fj-borda);
background: transparent;
color: var(--fj-txt-2);
font-size: 20px;
line-height: 1;
transition: background var(--fj-dur-rapida) var(--fj-ease-saida),
transform var(--fj-dur-instante) var(--fj-ease-saida);
}
.fj-stepper__btn--solido {
background: #2C2057;
border-color: #3F3466;
color: var(--fj-txt-1);
}
.fj-stepper__btn:hover:not(:disabled) { background: rgba(255, 255, 255, .06); }
.fj-stepper__btn:active:not(:disabled) { transform: scale(.92); }
.fj-stepper__btn:disabled { opacity: var(--fj-desativado-opacidade); cursor: not-allowed; }
.fj-stepper__valor {
display: flex;
align-items: baseline;
justify-content: center;
gap: var(--fj-e-2);
font-family: var(--fj-fonte-num);
font-size: 30px;
font-weight: var(--fj-w-forte);
line-height: var(--fj-lh-1);
letter-spacing: var(--fj-ls-apertado);
font-variant-numeric: tabular-nums;
color: var(--fj-txt-1);
}
/* --- Folha modal (bottom sheet) ------------------------------------------- */
.fj-folha {
position: relative;
inline-size: 100%;
padding: var(--fj-e-10) var(--fj-gutter) calc(var(--fj-e-10) + var(--fj-safe-base));
border-radius: var(--fj-r-folha) var(--fj-r-folha) 0 0;
background: var(--fj-folha);
box-shadow: var(--fj-sombra-folha), inset 0 1px 0 var(--fj-fio-luz);
}
.fj-folha__grabber {
inline-size: 42px;
block-size: 5px;
margin: 0 auto var(--fj-e-9);
border-radius: var(--fj-r-pill);
background: var(--fj-grabber);
}
/* --- Bolha de conversa ----------------------------------------------------- */
.fj-bolha {
inline-size: fit-content;
max-inline-size: 85%;
padding: var(--fj-e-7) var(--fj-e-8);
font-size: var(--fj-fs-lg);
font-weight: var(--fj-w-normal);
line-height: var(--fj-lh-corpo);
color: var(--fj-txt-1);
}
.fj-bolha--coach {
align-self: flex-start;
border-radius: 20px 20px 20px 6px;
background: var(--fj-superficie);
border: 1px solid var(--fj-borda);
}
.fj-bolha--usuario {
align-self: flex-end;
border-radius: 20px 20px 6px 20px;
background: var(--fj-grad-cta);
color: #FFFFFF;
}
/* --- Botão tracejado (adicionar item) -------------------------------------- */
.fj-btn-tracejado {
display: flex;
align-items: center;
gap: var(--fj-e-6);
inline-size: 100%;
min-block-size: var(--fj-toque);
padding-inline: var(--fj-e-9);
border-radius: var(--fj-r-lg);
border: 1.5px dashed var(--fj-borda-forte);
background: transparent;
color: var(--fj-txt-3);
font-size: var(--fj-fs-md);
font-weight: var(--fj-w-semi);
transition: border-color var(--fj-dur-rapida) var(--fj-ease-saida),
color var(--fj-dur-rapida) var(--fj-ease-saida);
}
.fj-btn-tracejado:hover { border-color: var(--fj-acento); color: var(--fj-txt-2); }
/* --- Caixa de seleção (itens identificados na refeição) -------------------- */
.fj-checkbox {
position: relative;
flex: none;
inline-size: 22px;
block-size: 22px;
}
.fj-checkbox input {
position: absolute;
inset: -11px; /* alvo de 44 × 44 */
inline-size: var(--fj-toque);
block-size: var(--fj-toque);
margin: 0;
opacity: 0;
cursor: pointer;
}
.fj-checkbox__caixa {
display: grid;
place-items: center;
inline-size: 100%;
block-size: 100%;
border-radius: 6px;
border: 1.5px solid var(--fj-borda-forte);
background: transparent;
color: transparent;
transition: background var(--fj-dur-rapida) var(--fj-ease-saida),
border-color var(--fj-dur-rapida) var(--fj-ease-saida),
transform var(--fj-dur-instante) var(--fj-ease-mola);
}
.fj-checkbox input:checked + .fj-checkbox__caixa {
background: var(--fj-acento-grad);
border-color: transparent;
color: var(--fj-acento-tinta);
}
.fj-checkbox input:active + .fj-checkbox__caixa { transform: scale(.9); }
.fj-checkbox input:focus-visible + .fj-checkbox__caixa {
outline: var(--fj-foco-largura) solid var(--fj-foco);
outline-offset: var(--fj-foco-folga);
}
.fj-checkbox__caixa svg { inline-size: 14px; block-size: 14px; }
/* =============================================================================
8. UTILITÁRIOS (mínimos — o resto é componente)
============================================================================= */
.fj-flex { display: flex; }
.fj-col { display: flex; flex-direction: column; }
.fj-centro { display: flex; align-items: center; }
.fj-entre { display: flex; align-items: center; justify-content: space-between; }
.fj-cresce { flex: 1; min-inline-size: 0; }
.fj-nada { flex: none; }
.fj-g-2 { gap: var(--fj-e-2); }
.fj-g-4 { gap: var(--fj-e-4); }
.fj-g-6 { gap: var(--fj-e-6); }
.fj-g-8 { gap: var(--fj-e-8); }
.fj-g-10 { gap: var(--fj-e-10); }
.fj-mt-4 { margin-block-start: var(--fj-e-4); }
.fj-mt-6 { margin-block-start: var(--fj-e-6); }
.fj-mt-8 { margin-block-start: var(--fj-e-8); }
.fj-mt-10 { margin-block-start: var(--fj-e-10); }
.fj-mt-12 { margin-block-start: var(--fj-e-12); }
.fj-txt-1 { color: var(--fj-txt-1); }
.fj-txt-2 { color: var(--fj-txt-2); }
.fj-txt-3 { color: var(--fj-txt-3); }
.fj-acento-cor { color: var(--fj-acento-txt); }
.fj-ok { color: var(--fj-sucesso); }
.fj-alerta { color: var(--fj-alerta); }
.fj-perigo { color: var(--fj-perigo-txt); }
.fj-uma-linha { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fj-duas-linhas {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Faixa rolável horizontal sem barra (chips, linha do tempo, conquistas). */
.fj-trilha {
display: flex;
gap: var(--fj-e-4);
overflow-x: auto;
scrollbar-width: none;
scroll-snap-type: x proximity;
padding-inline: var(--fj-gutter);
scroll-padding-inline: var(--fj-gutter);
margin-inline: calc(var(--fj-gutter) * -1);
}
.fj-trilha::-webkit-scrollbar { display: none; }
.fj-trilha > * { scroll-snap-align: start; }
/* Garante o alvo de 44 em qualquer elemento visualmente menor. */
.fj-toque-44 { position: relative; }
.fj-toque-44::after {
content: "";
position: absolute;
inset: 50% auto auto 50%;
translate: -50% -50%;
inline-size: max(100%, var(--fj-toque));
block-size: max(100%, var(--fj-toque));
}
.fj-oculto { display: none !important; }
[hidden] { display: none !important; }
/* Gradiente da marca como preenchimento e como texto. */
.fj-fundo-marca { background: var(--fj-halo), var(--fj-grad-marca); }
.fj-txt-grad {
background: var(--fj-grad-cta);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Scrim obrigatório para texto pequeno sobre o gradiente da marca. */
.fj-sobre-grad { position: relative; }
.fj-sobre-grad::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: var(--fj-scrim-grad);
}
.fj-sobre-grad > * { position: relative; }
/* =============================================================================
9. PREFERÊNCIAS DO SISTEMA
============================================================================= */
/* --- Movimento reduzido -----------------------------------------------------
Desliga toda decoração. O que é INFORMAÇÃO (barra de progresso, cronômetro)
continua atualizando, só sem interpolação longa. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.fj-esqueleto { animation: none !important; background: rgba(255, 255, 255, .06); }
.fj-btn:active, .fj-item:active, .fj-card--acao:active, .fj-chip:active { transform: none !important; }
/* Exceções: continuam animando, só que curto — são leitura de estado. */
.fj-barra__fill,
.fj-segmented__pilula { transition-duration: 120ms !important; }
.fj-btn.is-carregando::after { animation: fj-girar 1.2s linear infinite !important; }
}
/* --- Mais contraste ---------------------------------------------------------
Quem pede contraste alto recebe bordas visíveis e texto secundário mais claro. */
@media (prefers-contrast: more) {
:root {
--fj-txt-2: #E4DEF3;
--fj-txt-3: #B7ADD6;
--fj-txt-4: #9186B4;
--fj-borda: rgba(255, 255, 255, .22);
--fj-borda-sutil: rgba(255, 255, 255, .16);
--fj-borda-forte: rgba(255, 255, 255, .34);
--fj-foco-largura: 3px;
}
.fj-card, .fj-item, .fj-campo, .fj-metrica { border-width: 1px; }
.fj-tabbar { border-top-color: var(--fj-borda-forte); }
}
/* --- Transparência reduzida ------------------------------------------------- */
@media (prefers-reduced-transparency: reduce) {
.fj-tabbar,
.fj-cabecalho--fixo.is-fixo,
.fj-chip--ia,
.fj-selo--sobre-midia,
.fj-icon-btn--sobre-midia {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.fj-tabbar { background: var(--fj-tabbar); }
.fj-cabecalho--fixo.is-fixo { background: var(--fj-fundo); }
}
/* --- Telas baixas (iPhone SE) ------------------------------------------------ */
@media (max-height: 700px) {
:root { --fj-h-btn: 50px; --fj-h-btn-lg: 52px; }
.fj-secao { margin-block: var(--fj-e-8) var(--fj-e-5); }
}
/* --- Acima da largura do celular: trava a moldura --------------------------- */
@media (min-width: 480px) {
body { background: var(--fj-fundo); }
.fj-tela { box-shadow: 0 0 0 1px var(--fj-borda-sutil); }
}
/* --- Impressão (exportar relatório) ------------------------------------------ */
@media print {
.fj-tabbar, .fj-fab, .fj-scrim-rodape, .fj-rodape-acao { display: none !important; }
.fj-esqueleto { animation: none; }
}
/* =============================================================================
10. CSS DE TELA DO SHELL (splash, login, camadas, placeholder)
-----------------------------------------------------------------------------
⚠ TUDO ACIMA DESTA LINHA É CÓPIA EXATA de `design/forja.css` (só o @import
das fontes saiu, porque o index.html já carrega as fontes por , como o
DESIGN-SYSTEM manda). NÃO edite nada acima: se o design system mudar, a
forma de atualizar é copiar o arquivo de novo e colar este bloco de volta
no fim.
Por que este bloco mora aqui e não num arquivo separado: o forja.css é
fundação (tokens e componentes) e não traz layout de tela, por decisão do
próprio design system. O shell precisa de layout para três telas (splash,
login e o placeholder das telas ainda não construídas) e de duas peças de
navegação (camada e faixa de rede). São ~180 linhas que não justificam uma
segunda requisição no boot, que é justamente o momento mais caro do app.
Regra mantida: nenhum hex solto, tudo em token.
============================================================================= */
/* --- Raiz do app ----------------------------------------------------------- */
.fj-raiz {
display: block;
min-block-size: 100dvh;
}
/* A tela montada recebe foco a cada troca de rota, para o leitor de tela
anunciar a tela nova. Foco programático não aciona `:focus-visible`, então
nada de anel branco piscando a cada navegação; ainda assim, deixo explícito. */
.fj-raiz > [tabindex="-1"]:focus { outline: none; }
/* Container das camadas. Não posiciona nada: quem se posiciona é a `.fj-camada`,
que é `fixed`. Existe como ponto de montagem e como lugar óbvio para procurar. */
.fj-camadas { display: contents; }
/* --- Faixa de rede (offline) ------------------------------------------------
Fica no topo, acima de tudo menos da splash, e some sozinha ao voltar a rede. */
.fj-faixa-rede {
position: fixed;
z-index: 50;
inset-block-start: calc(var(--fj-safe-topo) + var(--fj-e-4));
inset-inline: var(--fj-gutter);
/* `auto` vence o `inline-size: 100%` do `.fj-faixa`: com os dois insets e
100% a caixa fica maior que o espaço e as margens automáticas a empurram
para fora da tela pela esquerda. */
inline-size: auto;
max-inline-size: calc(var(--fj-largura-max) - var(--fj-gutter) * 2);
margin-inline: auto;
box-shadow: var(--fj-sombra-card);
}
/* A faixa é fixa, então o conteúdo desce a altura dela. Sem isso ela cobre o
título da tela, que é justamente o que o usuário precisa ler para saber
onde está. */
:root[data-rede="offline"] .fj-raiz { padding-block-start: 58px; }
:root[data-rede="offline"] .fj-tela { min-block-size: calc(100dvh - 58px); }
.fj-noscript {
padding: var(--fj-e-14) var(--fj-gutter);
text-align: center;
color: var(--fj-txt-2);
}
/* --- Símbolo da marca ------------------------------------------------------- */
.fj-simbolo {
inline-size: 80px;
block-size: 103px;
}
/* Marca quadrada do login: o gradiente é o token de peça quadrada (135°),
nunca o de tela cheia (143°). */
.fj-app-logo {
display: grid;
place-items: center;
inline-size: 57px;
block-size: 57px;
border-radius: var(--fj-r-xl);
background: var(--fj-grad-marca-quad);
box-shadow: var(--fj-brilho-hero);
}
.fj-app-logo .fj-simbolo {
inline-size: 24px;
block-size: 31px;
}
/* --- Splash (tela 01) -------------------------------------------------------
Vem pronta no HTML e é removida pelo app.js quando o boot termina. */
.fj-splash {
position: fixed;
inset: 0;
z-index: 60;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--fj-safe-topo) var(--fj-safe-dir) var(--fj-safe-base) var(--fj-safe-esq);
color: var(--fj-txt-1);
overflow: hidden;
transition: opacity var(--fj-dur-media) var(--fj-ease-entrada),
scale var(--fj-dur-media) var(--fj-ease-entrada);
}
/* Saída: fade + leve avanço, como se a tela passasse por cima da que vem. */
.fj-splash.is-saindo {
opacity: 0;
scale: 1.04;
pointer-events: none;
}
.fj-splash__marca {
display: flex;
flex-direction: column;
align-items: center;
/* line-height 1 + margens fixas: o ritmo vertical não depende da métrica da
fonte, então a troca da fonte web não mexe em nada de lugar. */
margin-block-start: calc(var(--fj-e-15) * -1);
}
.fj-splash__marca .fj-logotipo { margin-block-start: 66px; }
.fj-splash__marca .fj-assinatura { margin-block-start: 22px; }
.fj-splash__rodape {
position: absolute;
inset-block-end: calc(var(--fj-safe-base) + 30px);
inset-inline: 0;
display: flex;
flex-direction: column;
align-items: center;
padding-inline: var(--fj-gutter);
}
.fj-splash__barra {
inline-size: 120px;
block-size: 4px;
border-radius: var(--fj-r-pill);
background: rgba(255, 255, 255, .28);
overflow: hidden;
}
/* `--fj-valor` (0 a 1) é escrito pelo app.js com style.setProperty. A barra só
anda quando uma etapa de boot termina de verdade, e nunca anda para trás. */
.fj-splash__fill {
block-size: 100%;
inline-size: calc(var(--fj-valor, 0) * 100%);
border-radius: inherit;
background: var(--fj-txt-1);
transition: inline-size var(--fj-dur-media) var(--fj-ease-saida),
background var(--fj-dur-rapida) var(--fj-ease-saida);
}
/* Boot que falhou: a barra para onde estava e fica magenta. */
.fj-splash.is-erro .fj-splash__fill { background: var(--fj-perigo); }
.fj-splash__rotulo {
margin-block-start: var(--fj-e-6);
color: rgba(255, 255, 255, .92);
}
.fj-splash__erro {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--fj-e-4);
margin-block-start: var(--fj-e-9);
text-align: center;
animation: fj-surgir var(--fj-dur-rapida) var(--fj-ease-saida);
}
.fj-splash__erro-titulo { color: rgba(255, 255, 255, .92); }
.fj-splash__erro-linha {
max-inline-size: 280px;
font-size: var(--fj-fs-md);
line-height: var(--fj-lh-corpo);
color: rgba(255, 255, 255, .92);
}
.fj-splash__erro .fj-btn { margin-block-start: var(--fj-e-2); }
@keyframes fj-surgir {
from { opacity: 0; translate: 0 6px; }
to { opacity: 1; translate: 0 0; }
}
/* --- Login (tela 02) --------------------------------------------------------- */
/* Soma a safe area ao próprio respiro: `.fj-tela` já aplica os quatro insets,
mas as linhas abaixo sobrescrevem o padding dela, então os insets voltam
aqui dentro do calc. */
.fj-login {
min-block-size: 100dvh;
justify-content: flex-start;
padding-block: calc(var(--fj-safe-topo) + var(--fj-e-13))
calc(var(--fj-safe-base) + var(--fj-e-13));
padding-inline: calc(var(--fj-safe-esq) + var(--fj-gutter))
calc(var(--fj-safe-dir) + var(--fj-gutter));
}
.fj-login__titulo {
margin-block-start: var(--fj-e-12);
font-size: var(--fj-fs-6xl);
line-height: 38px;
}
.fj-login__lead {
margin-block-start: var(--fj-e-8);
max-inline-size: 330px;
color: var(--fj-txt-3);
}
.fj-login__form {
display: flex;
flex-direction: column;
margin-block-start: var(--fj-e-12);
}
.fj-login__form .fj-campo + .fj-campo { margin-block-start: var(--fj-e-6); }
.fj-login__acoes {
display: flex;
justify-content: flex-end;
margin-block-start: var(--fj-e-1);
}
.fj-login__form .fj-btn--primario { margin-block-start: var(--fj-e-6); }
.fj-login__aviso {
margin-block-start: var(--fj-e-6);
font-size: var(--fj-fs-sm);
line-height: var(--fj-lh-corpo);
color: var(--fj-txt-3);
}
.fj-login__rodape {
margin-block-start: var(--fj-e-13);
font-size: var(--fj-fs-sm);
color: var(--fj-txt-3);
text-align: center;
}
.fj-espacador { flex: 1; min-block-size: var(--fj-e-15); }
/* Teclado aberto: some com a marca e com a promessa para o botão Entrar não
ficar embaixo do teclado. 560px é a altura útil medida com o teclado do iOS
aberto num iPhone 13. */
@media (max-height: 560px) {
.fj-login__marca,
.fj-login__lead { display: none; }
.fj-login__titulo { margin-block-start: 0; font-size: var(--fj-fs-5xl); line-height: var(--fj-lh-apert); }
.fj-login { padding-block-start: var(--fj-e-10); }
}
/* Erro de credencial: além da borda e da mensagem, um tranco curto. */
.fj-campo.is-tremendo { animation: fj-tremor 220ms var(--fj-ease-saida); }
@keyframes fj-tremor {
0%, 100% { translate: 0 0; }
20% { translate: -6px 0; }
40% { translate: 5px 0; }
60% { translate: -3px 0; }
80% { translate: 2px 0; }
}
/* Sucesso do login: o botão vira ✓ por ~350ms antes de trocar de tela. */
.fj-btn--primario.is-ok {
background: var(--fj-sucesso);
color: var(--fj-txt-inverso);
box-shadow: none;
}
/* --- Camada (câmera, folhas, confirmações) ----------------------------------
Cobre a tela atual SEM mexer no histórico. O porquê está em app.js. */
.fj-camada {
position: fixed;
inset: 0;
z-index: 40;
display: flex;
flex-direction: column;
max-inline-size: var(--fj-largura-max);
margin-inline: auto;
padding: calc(var(--fj-safe-topo) + var(--fj-e-4)) var(--fj-gutter)
calc(var(--fj-safe-base) + var(--fj-e-10));
background: var(--fj-fundo);
animation: fj-camada-entra var(--fj-dur-lenta) var(--fj-ease-saida);
}
.fj-camada__topo {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--fj-e-6);
}
.fj-camada__corpo {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--fj-e-6);
text-align: center;
}
@keyframes fj-camada-entra {
from { opacity: 0; scale: .98; }
to { opacity: 1; scale: 1; }
}
/* --- Placeholder das telas ainda não construídas ------------------------------
Honesto de propósito: diz o nome da tela, o que ela vai fazer e por onde se
chega nela. Nada de tela falsa com dado inventado. */
.fj-emconstrucao {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--fj-e-6);
padding: var(--fj-e-14) var(--fj-e-10);
text-align: center;
}
.fj-emconstrucao__rota {
font-family: var(--fj-fonte-num);
font-size: var(--fj-fs-xs);
color: var(--fj-txt-3);
}
.fj-emconstrucao svg,
.fj-camada__corpo svg {
inline-size: 36px;
block-size: 36px;
color: var(--fj-txt-3);
}
.fj-emconstrucao__texto {
max-inline-size: 300px;
font-size: var(--fj-fs-md);
line-height: var(--fj-lh-corpo);
color: var(--fj-txt-2);
}