/** * variables.css * ----------------------------------------------------------------------- * DESIGN TOKENS — E2A Repair Centro de Capacitação * ----------------------------------------------------------------------- * Este é o ÚNICO arquivo que deve ser alterado para trocar a identidade * visual do sistema (cores, tipografia, espaçamento, raios, sombras). * Nenhuma outra folha de estilo deve declarar cores "soltas" — sempre * referenciar estas variáveis com var(--nome-da-variavel). * * Paleta atual: PROVISÓRIA (tech/premium). Será substituída quando a * identidade visual oficial da E2A Repair for enviada. * ----------------------------------------------------------------------- */ :root { /* --------------------------------------------------------------- * Cores de marca * --------------------------------------------------------------- */ --primary-color: #0057FF; /* azul elétrico — ações primárias, links, destaques */ --primary-color-dark: #0041C4; --primary-color-light: #4D85FF; --secondary-color: #0B1220; /* grafite/azul-marinho quase preto — headers, footer, hero */ --secondary-color-light: #16233B; --accent-color: #00D3AB; /* verde-tecnológico — CTAs de destaque, badges positivos */ --accent-color-dark: #00A886; /* --------------------------------------------------------------- * Superfícies e texto * --------------------------------------------------------------- */ --background-color: #F5F7FA; /* fundo geral do site/admin */ --surface-color: #FFFFFF; /* cards, painéis, formulários */ --surface-alt-color: #EEF1F6; /* zebra de tabelas, seções alternadas */ --text-color: #101828; /* texto principal */ --text-muted: #5A6472; /* texto secundário */ --text-on-dark: #F5F7FA; /* texto sobre fundo escuro (hero, footer) */ --border-color: #E1E5EB; /* --------------------------------------------------------------- * Cores semânticas (status) * --------------------------------------------------------------- */ --success-color: #12B76A; --success-bg: #E9F9F0; --warning-color: #F79009; --warning-bg: #FFF6E9; --danger-color: #F04438; --danger-bg: #FDECEA; --info-color: #0BA5EC; --info-bg: #E8F8FF; /* --------------------------------------------------------------- * Tipografia * --------------------------------------------------------------- */ --font-heading: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.375rem; /* 22px */ --text-2xl: 1.75rem; /* 28px */ --text-3xl: 2.25rem; /* 36px */ --text-4xl: 3rem; /* 48px */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.7; /* --------------------------------------------------------------- * Espaçamento (escala base 4px) * --------------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ /* --------------------------------------------------------------- * Raio de borda — moderado, nada "excessivamente arredondado" * --------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px; /* --------------------------------------------------------------- * Sombras * --------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08); --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12); /* --------------------------------------------------------------- * Layout * --------------------------------------------------------------- */ --container-max-width: 1200px; --header-height: 76px; --sidebar-width: 260px; --transition-fast: 150ms ease; --transition-base: 250ms ease; /* --------------------------------------------------------------- * Z-index * --------------------------------------------------------------- */ --z-header: 100; --z-modal: 1000; --z-toast: 1100; } /* Preferência futura por tema escuro (estrutura pronta, não ativado) */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { /* Reservado para evolução futura — não aplicado por padrão para manter consistência de marca enquanto a identidade oficial não chega. */ } } /* ========================================================================= * ETAPA 11 — Tokens exclusivos do REDESIGN DO SITE PÚBLICO * ------------------------------------------------------------------------- * Bloco 100% ADITIVO: nenhuma variável acima foi removida, renomeada ou * alterada. Estes tokens só são referenciados em assets/css/site.css * (o site.css só é carregado pelas páginas públicas — ver * includes/partials/head.php). Admin, Portal do Professor e Área do Aluno * continuam usando exclusivamente os tokens originais acima, sem nenhuma * mudança visual. * * RC2 (Etapa 11 — ajuste visual): paleta redefinida a partir da logo * OFICIAL da E2A Repair (arquivo enviado pelo cliente, analisado e com * cores extraídas por amostragem de pixel — ver docs/ETAPA-11-RC2- * IDENTIDADE-VISUAL.md). Direção anterior era "dark tech premium" (preto * quase puro + azul + ciano, fundo escuro em quase toda a página nova * direção: BRANCO/OFF-WHITE como fundo padrão das seções + AZUL E2A da * logo como cor de marca + AZUL-MARINHO (extraído do gradiente do * "visor" do smartphone no símbolo da logo) reservado só para áreas * aprovadas (Plataforma E2A, CTAs, Footer, componentes premium * pequenos). Verde/ciano deixou de ser cor decorativa dominante — os * tokens semânticos (--success-color etc., linhas ~45-52 acima) NÃO * foram tocados e continuam sendo a única fonte de verde do sistema. * ========================================================================= */ :root { /* NAVY — extraído da logo oficial (rgb médio do degradê do visor do smartphone no símbolo "E2A"). Fundo das superfícies escuras APROVADAS (Plataforma E2A, CTA final, Footer, drawer mobile, lightbox, painel institucional do Login) — nunca mais preto puro. */ --pub-navy: #052B46; --pub-navy-light: #0F3E60; --pub-bg: #052B46; /* alias de --pub-navy (mantido pelo nome já usado em dezenas de seletores) */ --pub-bg-soft: #0A3452; --pub-surface-dark: #0C3B5C; --pub-surface-dark-2: #123F63; --pub-border-dark: rgba(255, 255, 255, 0.12); --pub-border-dark-strong: rgba(255, 255, 255, 0.20); /* BACKGROUND / SURFACE — tratamento PADRÃO do site público a partir da rc2 (Hero, Header, Indicadores, Cursos, Curso individual e todas as seções ".pub-section--light/--tint"). Valores muito próximos de --background-color/--surface-color (tokens compartilhados, INTOCADOS) — de propósito, para manter unidade visual com o Admin sem depender deles diretamente (regra §45: tokens exclusivos do público). */ --pub-background: #F6F8FB; --pub-background-alt: #EDF2F7; --pub-surface: #FFFFFF; --pub-surface-alt: #F3F6FA; --pub-surface-light: #FFFFFF; /* alias de --pub-surface */ --pub-surface-light-alt: #EDF2F7; /* alias de --pub-background-alt */ --pub-border-light: #DCE4EC; --pub-border: #DCE4EC; /* alias de --pub-border-light */ --pub-border-strong: #B9C6D4; --pub-text-soft: #647689; /* texto terciário sobre fundo claro (breadcrumb, legendas) — RC2 auditoria WCAG: ajustado de #8996A6 (3.01:1, reprovado) para 4.67:1 (AA) sobre --pub-surface */ /* Texto sobre fundo escuro/navy (headline branca do Footer, CTA, Plataforma E2A, painel do Login etc.) */ --pub-text: #F3F7FC; --pub-text-dim: rgba(243, 247, 252, 0.72); --pub-text-faint: rgba(243, 247, 252, 0.62); /* RC2 auditoria WCAG: ajustado de 0.5 (3.9-4.5:1, reprovava em --pub-surface-dark) para >=4.5:1 AA em todas as superfícies escuras */ /* Texto sobre fundo claro: propositalmente NÃO redefinido aqui — usa os tokens --text-color / --text-muted já existentes acima (compartilhados com o Admin, intocados), que já correspondem a TEXT/TEXT MUTED do novo Design Tokens table. */ /* Marca — AZUL E2A extraído da logo oficial (rgb médio da cor "2A" e dos ícones técnicos do símbolo) */ --pub-primary: #0364E0; --pub-primary-dark: #024BAE; --pub-primary-light: #4F93F0; --pub-primary-soft: #E7F0FE; --pub-primary-glow: rgba(3, 100, 224, 0.38); --pub-accent: #2AA7FF; --pub-accent-soft: #E3F5FF; --pub-accent-glow: rgba(42, 167, 255, 0.30); /* Gradientes e texturas — versão CLARA (Hero, Header translúcido) */ --pub-gradient-hero: radial-gradient(120% 140% at 85% -10%, #E7F0FE 0%, transparent 55%), radial-gradient(90% 120% at -10% 110%, #EDF6FF 0%, transparent 50%), linear-gradient(180deg, #FFFFFF 0%, #F8FAFD 55%, #F6F8FB 100%); --pub-grid-line: rgba(5, 43, 70, 0.06); /* Gradiente NAVY — usado só nas zonas escuras aprovadas que precisam de textura de fundo (hero compacto de /plataforma via .pub-hero--dark) */ --pub-gradient-navy: radial-gradient(120% 140% at 85% -10%, #0F3E60 0%, transparent 55%), radial-gradient(90% 120% at -10% 110%, #0A3452 0%, transparent 50%), linear-gradient(180deg, #052B46 0%, #062F4C 60%, #0A3452 100%); /* Tipografia display exclusiva do site público (headings de seção, hero, cards de destaque) — carregada só em includes/partials/head.php. --font-heading / --font-body originais permanecem intocados. */ --pub-font-display: 'Space Grotesk', var(--font-heading); /* Sombras/realces — neutras o bastante para funcionar tanto sobre fundo claro (cards brancos) quanto sobre navy (mockups/premium) */ --pub-shadow-glow-primary: 0 0 0 1px rgba(3, 100, 224, 0.20), 0 20px 60px -20px rgba(3, 100, 224, 0.45); --pub-shadow-card: 0 1px 2px rgba(5, 43, 70, 0.10), 0 20px 40px -24px rgba(5, 43, 70, 0.35); /* Header sticky com transição de estado (topo transparente -> rolado). RC2: aumentado de 84px para 96px (desktop) para acomodar a logo do cabeçalho ampliada — ver overrides responsivos em site.css (.site-header, media queries de 1080px/480px). */ --pub-header-height: 96px; }