/* ============================================================ WeClass — Design Tokens themes/weclass/variables.css Fonte unica de verdade da identidade visual do tema. Carregado ANTES de style.css pelo shortcode [theme_css]. Os valores vem do design system da propria plataforma (apps/web/src/index.css do repositorio weclass), para o site institucional e o app terem a mesma marca. Ao mudar a paleta la, mude aqui tambem — e rode `npm run build` depois, porque o bloco @theme de src/input.css referencia estes tokens. Paleta oficial: laranja #FF9802 coruja, "we" da logo, preenchimento e CTAs degrade #FF9802 (0%) -> #FF0000 (71%) apenas destaques marinho #0F1B2D rodape, versao escura, TEXTO SOBRE LARANJA grafite #1F2937 texto principal, "class" da logo branco #FFFFFF fundo padrao ============================================================ */ :root { /* --- Cor: laranja da marca ------------------------------- A 500 e o #FF9802 exato da spec; os demais tons sao derivados para hover, foco, fundo suave e texto sobre claro. */ --wc-brand-50: #fff8ed; --wc-brand-100: #ffefd4; --wc-brand-200: #ffdaa8; --wc-brand-300: #ffc071; --wc-brand-400: #ffa438; --wc-brand-500: #ff9802; --wc-brand-600: #e07d00; --wc-brand-700: #b96002; --wc-brand-800: #934b08; --wc-brand-900: #783f0b; --wc-brand: var(--wc-brand-500); --wc-brand-soft: var(--wc-brand-600); /* --- Cor: azul marinho ----------------------------------- */ --wc-navy-50: #f2f5f9; --wc-navy-100: #e3e9f1; --wc-navy-200: #c7d3e4; --wc-navy-300: #9db2ce; --wc-navy-400: #6c8ab3; --wc-navy-500: #4a6b99; --wc-navy-600: #3a5480; --wc-navy-700: #2f4468; --wc-navy-800: #1d2c46; --wc-navy-900: #0f1b2d; /* Fim do degrade. Isolado porque vermelho puro nunca e cor de texto nem de botao — so parada de gradiente. */ --wc-accent-red: #ff0000; --wc-accent: var(--wc-accent-red); /* --- Contraste: a regra que nao pode ser quebrada --------- Medicoes sobre fundo branco (do design system da plataforma): brand-500 2,16:1 reprova brand-600 2,96:1 reprova brand-700 4,43:1 so titulo grande brand-800 6,46:1 passa navy-400 3,54:1 reprova navy-500 5,45:1 passa Regra: laranja vibrante em PREENCHIMENTO, laranja escuro em TEXTO. Branco sobre #FF9802 da 2,16:1 e reprova em qualquer tamanho; o marinho da 8,02:1 — por isso o botao primario e laranja com texto marinho, a mesma escolha que a Amazon faz nos botoes amarelos. */ --wc-brand-contrast: var(--wc-navy-900); /* texto SOBRE laranja chapado */ --wc-on-fill: #ffffff; /* texto sobre degrade e vermelho */ --wc-link: var(--wc-brand-800); /* laranja legivel em texto */ --wc-accent-contrast: #ffffff; /* --- Cor: superficie e texto ----------------------------- */ --wc-bg: #ffffff; --wc-bg-alt: #f7f8fa; /* canvas: cinza levemente azulado */ --wc-surface: #ffffff; --wc-border: var(--wc-navy-100); --wc-text: #1f2937; /* grafite: "class" da logo */ --wc-text-muted: var(--wc-navy-500); --wc-text-invert: #ffffff; /* --- Cor: gradiente de assinatura ------------------------ Degrade oficial: #FF9802 em 0% -> #FF0000 em 71%. Reservado a AREAS de destaque (faixas, CTA final, texto do H1). Em superficie grande usamos a variante --wc-gradient-surface: o degrade oficial chega a vermelho puro em 71%, e vermelho tomando um bloco inteiro le como erro, nao como marca. */ --wc-gradient: linear-gradient( 90deg, var(--wc-brand-500) 0%, var(--wc-accent-red) 71% ); --wc-gradient-surface: linear-gradient( 135deg, var(--wc-brand-400) 0%, var(--wc-brand-600) 55%, var(--wc-accent-red) 130% ); --wc-hero-tint-a: color-mix(in srgb, var(--wc-brand-400) 28%, transparent); --wc-hero-tint-b: color-mix(in srgb, var(--wc-accent-red) 14%, transparent); /* --- Cor: rodape (bloco escuro) -------------------------- */ --wc-footer-bg: var(--wc-navy-900); --wc-footer-text: var(--wc-navy-300); --wc-footer-strong: #ffffff; --wc-footer-line: rgba(255, 255, 255, 0.10); /* --- Cor: estado ----------------------------------------- */ --wc-success: #14794a; --wc-danger: #b42318; --wc-focus: var(--wc-brand-800); /* --- Tipografia ----------------------------------------- Instrument Sans e a fonte da plataforma. O fallback repete a pilha de sistema para o texto nao pular de largura se a Google Fonts demorar. */ --wc-font-display: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --wc-font-body: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --wc-font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Code', monospace; /* Escala tipografica fluida (clamp: mobile -> desktop) */ --wc-text-xs: 0.75rem; --wc-text-sm: 0.875rem; --wc-text-base: 1rem; --wc-text-lg: 1.125rem; --wc-text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); --wc-text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); --wc-text-3xl: clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem); --wc-text-4xl: clamp(2.25rem, 1.6rem + 3.2vw, 4rem); --wc-leading-tight: 1.12; --wc-leading-snug: 1.35; --wc-leading-body: 1.65; /* --- Espacamento / ritmo --------------------------------- */ --wc-space-1: 0.25rem; --wc-space-2: 0.5rem; --wc-space-3: 0.75rem; --wc-space-4: 1rem; --wc-space-6: 1.5rem; --wc-space-8: 2rem; --wc-space-12: 3rem; --wc-space-16: 4rem; --wc-space-24: 6rem; --wc-section-y: clamp(3rem, 2rem + 5vw, 7rem); /* --- Layout ---------------------------------------------- */ --wc-container: 1200px; /* Duas larguras para pagina de texto, nao uma. --text e a MEDIDA DE LEITURA: quantos caracteres cabem numa linha. Linha muito longa faz o olho perder o retorno ao comecar a proxima, entao ela nao acompanha o tamanho da tela. 76ch fica no teto da faixa confortavel (45-75 costuma ser a recomendacao) sem sacrificar legibilidade. --prose e a largura do BLOCO. Tabela, imagem e bloco de codigo usam ela e extrapolam a coluna de texto — sao conteudo que se le varrendo, nao linha a linha, e espremer isso em 76ch e o que fazia a pagina parecer apertada. */ --wc-container-text: 76ch; --wc-container-prose: 1040px; --wc-gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem); /* --- Forma ----------------------------------------------- */ --wc-radius-sm: 0.25rem; --wc-radius: 0.5rem; /* radius-card da plataforma */ --wc-radius-lg: 0.75rem; /* --- Elevacao ------------------------------------------- Duas camadas de proposito: a primeira, curta e quase opaca, define a aresta; a segunda, larga e diluida, da o descolamento do fundo. Uma sombra so nunca faz as duas coisas bem. */ --wc-shadow-sm: 0 1px 2px 0 rgb(15 27 45 / 0.04); --wc-shadow: 0 1px 2px 0 rgb(15 27 45 / 0.04), 0 4px 12px -2px rgb(15 27 45 / 0.05); --wc-shadow-lg: 0 24px 60px -12px rgb(15 27 45 / 0.22); /* --- Movimento ------------------------------------------- */ /* Micro-interacao (hover, foco, abrir menu): curta e seca. */ --wc-ease: cubic-bezier(0.2, 0, 0, 1); --wc-duration: 180ms; /* Entrada dos blocos ao rolar: longa e com saida exponencial. A curva comeca rapido e desacelera por muito tempo — e essa cauda longa que da a sensacao de deslize em vez de "aparecer". Curva curta com duracao longa nao resolve: fica so lenta. Estes dois valores sao o lugar para calibrar a velocidade da animacao de entrada do site inteiro. */ --wc-anim-duration: 1350ms; --wc-anim-ease: cubic-bezier(0.16, 1, 0.3, 1); --wc-anim-stagger: 120ms; /* Entrada do HERO: mais lenta e coreografada que o resto do site. E a primeira impressao, e ali o movimento nao serve para "avisar que chegou conteudo" — serve para dar acabamento. Por isso ele tem tokens proprios em vez de herdar os de cima: step = intervalo entre um elemento e o seguinte da coluna de texto duration = tempo de cada elemento do texto visual = tempo dos mockups, que percorrem mais distancia */ --wc-hero-step: 150ms; --wc-hero-duration: 1500ms; --wc-hero-visual-duration:1900ms; /* --- Camadas --------------------------------------------- */ --wc-z-header: 50; --wc-z-menu: 60; } /* Motion e opcional: quem pediu menos animacao nao recebe nenhuma. */ @media (prefers-reduced-motion: reduce) { :root { --wc-duration: 0ms; --wc-anim-duration: 0ms; --wc-anim-stagger: 0ms; --wc-hero-step: 0ms; --wc-hero-duration: 0ms; --wc-hero-visual-duration: 0ms; } }