/* * corvin.css — Tema Corvin Partners (Story 4.1) * Versao do contrato: 1.0.0 * Fonte normativa: C:/Desenvolvimento/projetos/CorvinPartners/brand/DESIGN.md * Fonte operacional: docs/ux-spec.md §5 (tokens_mapped: true) * * Decisao registrada: dark por CLASSE .corvin-dark, nao por prefers-color-scheme. * O modo e decidido pelo PRODUTO (Hub sempre dark editorial; relatorio sempre * light canonico) — media query entregaria o modo errado em um dos dois * consumidores. O Hub aplica .corvin-dark no na Story 4.4; o relatorio * nunca ativa a classe (covers usam tokens brand invariantes --navy/--gold). * * Estrutura em camadas: * 1. Tokens (custom properties) — :root light + .corvin-dark override * 2. Base a11y — :focus-visible universal + prefers-reduced-motion * 3. Componentes base (ux-spec §6.1–6.6) — tudo sobre var(--...) * * Offline-first (NFR9): zero @import, zero url() remota, zero @font-face com * fonte externa. Fontes declaradas apenas como stacks com fallback (font_rule: * "If unavailable, use the declared fallbacks without blocking implementation"). * Vendoring de webfont e decisao da Story 4.2 se a fidelidade tipografica * for insuficiente com as fontes do sistema. */ /* ========================================================================== CAMADA 1 — TOKENS (custom properties) ========================================================================== */ /* -------------------------------------------------------------------------- :root — modo light canonico (baseline do relatorio HTML standalone) -------------------------------------------------------------------------- */ :root { /* Cores — base/light (ux-spec §5.1) */ --navy: #0F172A; --navy-deep: #070C19; --navy-soft: #1E293B; --gold: #C9A04F; --gold-bright: #E5C58B; --gold-deep: #A8852F; --text-accent-on-light: #7B6027; --text-accent-on-light-strong: #5D481E; --background: #F8FAFC; --foreground: #0F172A; --card: #FFFFFF; --muted: #F1F5F9; --muted-foreground: #64748B; --paper-warm: #FAF8F2; --border: #CBD5E1; --border-subtle: #E2E8F0; --ring: rgba(201,160,79,0.40); --success: #10B981; --warning: #F59E0B; --danger: #DC2626; --info: #0EA5E9; /* Tipografia — stacks e escala (ux-spec §5.2) */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', Consolas, 'Courier New', monospace; --text-display: clamp(2.5rem, 4vw + 1rem, 6rem); --text-h1: clamp(2rem, 3vw + .5rem, 3rem); --text-h2: 2.25rem; --text-h3: 1.5rem; --text-lead: 1.125rem; --text-body: 1rem; --text-sm: 0.875rem; --text-eyebrow: 0.75rem; /* Trackings POSITIVOS (lei do sistema — negativo e bug) */ --tracking-display: 0.015em; --tracking-h1: 0.015em; --tracking-h2: 0.02em; --tracking-h3: 0.025em; --word-spacing-title: 0.1em; --tracking-eyebrow: 0.2em; --tracking-btn: 0.12em; /* Geometria (ux-spec §5.3) */ --radius-button: 4px; --radius-input: 4px; --radius-card: 6px; --radius-pill: 9999px; --nav-height: 64px; --container-max: 1280px; --section-pady: 96px; --section-padx: 80px; /* Espacamento — escala 4px */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Sombras light (ux-spec §5.3) */ --shadow-sm: 0 1px 2px rgba(15,23,42,0.06); --shadow-md: 0 4px 12px rgba(15,23,42,0.08); --shadow-lg: 0 1px 2px rgba(15,23,42,0.04), 0 12px 32px rgba(15,23,42,0.10); --shadow-gold: 0 1px 3px rgba(15,23,42,0.05), 0 12px 32px rgba(201,160,79,0.18); --shadow-inner-gold: inset 0 0 0 1px rgba(201,160,79,0.25); --shadow-focus: 0 0 0 3px var(--ring); /* Motion (ux-spec §5.3) */ --duration-fast: 200ms; --duration-base: 300ms; --duration-cinema: 800ms; --ease-executive: cubic-bezier(0.2, 0.7, 0.2, 1); --press: translateY(-1px); } /* -------------------------------------------------------------------------- .corvin-dark — modo dark editorial (baseline do Hub, ativado na Story 4.4) Sobrescreve APENAS os tokens que divergem do light (coluna "Hub dark" §5.1 + sombras dark §5.3). O Hub aplica esta classe no ; o relatorio nunca a ativa (covers usam --navy/--gold que sao invariantes nos dois modos). -------------------------------------------------------------------------- */ .corvin-dark { --background: #0F172A; --foreground: #F8FAFC; --card: #1E293B; --muted: #070C19; --muted-foreground: #94A3B8; --border: rgba(255,255,255,0.18); --border-subtle: rgba(255,255,255,0.12); --ring: rgba(201,160,79,0.25); --success: #34D399; --warning: #FBBF24; --danger: #F87171; --info: #38BDF8; /* Sombras dark */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.32); --shadow-md: 0 4px 12px rgba(0,0,0,0.40); --shadow-lg: 0 1px 2px rgba(0,0,0,0.20), 0 12px 32px rgba(0,0,0,0.45); } /* ========================================================================== CAMADA 2 — BASE A11Y ========================================================================== */ /* Focus ring universal — ouro em todos os interativos (ux-spec §10.2) */ :focus-visible { outline: none; box-shadow: var(--shadow-focus); outline-offset: 2px; } /* Desativa pulso/transicoes/smooth-scroll para usuarios com preferencia de movimento reduzido (ux-spec §10.6) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto !important; } .status--processing::before { animation: none !important; } } /* ========================================================================== CAMADA 3 — COMPONENTES BASE (ux-spec §6.1–6.6) Todas as declaracoes usam var(--...) — zero hex literal nesta camada. ========================================================================== */ /* -------------------------------------------------------------------------- §6.1 Botoes -------------------------------------------------------------------------- */ /* Base */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 14px 28px; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: var(--tracking-btn); border-radius: var(--radius-button); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color var(--duration-fast) var(--ease-executive), color var(--duration-fast) var(--ease-executive), border-color var(--duration-fast) var(--ease-executive), box-shadow var(--duration-fast) var(--ease-executive), transform var(--duration-fast) var(--ease-executive); } /* Primario: gold/navy — CTA principal */ .btn--primary { background-color: var(--gold); color: var(--navy); border-color: var(--gold); } .btn--primary:hover { background-color: var(--gold-bright); border-color: var(--gold-bright); transform: var(--press); box-shadow: var(--shadow-gold); } .btn--primary:active { background-color: var(--gold-deep); border-color: var(--gold-deep); transform: none; } /* Focus ring interno para garantir visibilidade sobre gold (ux-spec §10.2) */ .btn--primary:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; box-shadow: var(--shadow-focus); } /* Secundario: navy/branco */ .btn--secondary { background-color: var(--navy); color: var(--card); border-color: var(--navy); } .btn--secondary:hover { background-color: var(--navy-soft); border-color: var(--navy-soft); transform: var(--press); } .btn--secondary:active { transform: none; } /* Modo dark: secundario usa navy-soft com borda alpha e texto ice (§6.1 — sem este override o botao seria navy sobre navy no Hub) [QA fix 4.1] */ .corvin-dark .btn--secondary { background-color: var(--navy-soft); color: var(--foreground); border-color: var(--border); } .corvin-dark .btn--secondary:hover { background-color: var(--navy-soft); border-color: var(--border); filter: brightness(1.06); } /* Outline: transparente com borda gold */ .btn--outline { background-color: transparent; color: var(--text-accent-on-light); border-color: var(--gold); } .btn--outline:hover { background-color: rgba(201,160,79,0.10); } .btn--outline:active { background-color: rgba(201,160,79,0.18); } /* Modo dark: outline usa gold-bright para texto */ .corvin-dark .btn--outline { color: var(--gold-bright); } /* Compacto: 36px para sidebar T2 e modos compactos */ .btn--compact { min-height: 36px; padding: 8px 16px; } /* -------------------------------------------------------------------------- §6.2 Chips de categoria -------------------------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 4px 10px; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; line-height: 1.4; border: 1px solid transparent; cursor: default; transition: background-color var(--duration-fast) var(--ease-executive), border-color var(--duration-fast) var(--ease-executive), color var(--duration-fast) var(--ease-executive); } /* Validada: fundo translucido ouro, borda gold solida, texto accent */ .chip--validated { background-color: rgba(201,160,79,0.16); border-color: var(--gold); color: var(--text-accent-on-light); } .corvin-dark .chip--validated { color: var(--gold-bright); } /* Sugerida: borda tracejada silver, texto muted — distinção nao e so por cor */ .chip--suggested { background-color: transparent; border: 1px dashed var(--muted-foreground); color: var(--muted-foreground); } /* Toggle marcado (T3 — sera persistida) */ .chip[aria-pressed="true"] { background-color: var(--gold); border-color: var(--gold); color: var(--navy); cursor: pointer; } /* Toggle desmarcado (T3 — sera descartada) */ .chip[aria-pressed="false"] { background-color: transparent; border: 1px dashed var(--muted-foreground); color: var(--muted-foreground); cursor: pointer; } /* Filtro ativo na sidebar */ .chip--active { background-color: var(--gold); border-color: var(--gold); color: var(--navy); } /* Chips clicaveis: hover + focus */ .chip[aria-pressed]:hover, .chip--active:hover { filter: brightness(1.1); } .chip[aria-pressed]:focus-visible { box-shadow: var(--shadow-focus); outline-offset: 2px; } /* -------------------------------------------------------------------------- §6.3 Badges de status do pipeline -------------------------------------------------------------------------- */ .status { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; } /* Ponto de status (comum) */ .status::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* done */ .status--done::before { background-color: var(--success); } /* processing — pulso; desativado por prefers-reduced-motion (acima) */ .status--processing::before { background-color: var(--info); animation: status-pulse 1.2s ease-in-out infinite; } @keyframes status-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* queued — ponto vazado */ .status--queued::before { background-color: transparent; border: 2px solid var(--muted-foreground); } /* failed — pill com fundo semântico */ .status--failed { padding: 2px 8px; border-radius: var(--radius-pill); background-color: rgba(220,38,38,0.14); color: var(--danger); } .corvin-dark .status--failed { background-color: rgba(248,113,113,0.14); color: var(--danger); } .status--failed::before { background-color: var(--danger); } /* -------------------------------------------------------------------------- §6.4 Input de busca -------------------------------------------------------------------------- */ .search-input { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: 44px; padding: 0 var(--space-3); font-family: var(--font-body); font-size: var(--text-body); color: var(--foreground); background-color: var(--navy-soft); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-input); transition: border-color var(--duration-fast) var(--ease-executive), box-shadow var(--duration-fast) var(--ease-executive); } .search-input:focus-visible, .search-input:focus { outline: none; border-color: var(--gold); box-shadow: var(--shadow-focus); } .search-input::placeholder { color: var(--muted-foreground); } /* -------------------------------------------------------------------------- §6.5 Tooltip de rationale (T3) -------------------------------------------------------------------------- */ .tooltip { position: relative; display: inline-block; } .tooltip__content { position: absolute; bottom: calc(100% + var(--space-2)); left: 50%; transform: translateX(-50%); z-index: 100; min-width: 200px; max-width: 320px; padding: var(--space-3) var(--space-4); background-color: var(--navy-deep); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-card); box-shadow: var(--shadow-lg); font-family: var(--font-body); font-size: 0.8125rem; color: var(--foreground); line-height: 1.5; pointer-events: none; opacity: 0; transition: opacity var(--duration-fast) var(--ease-executive); } /* Seta do tooltip */ .tooltip__content::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: var(--navy-deep); } /* Abre em hover e focus (delay 150ms — ux-spec §6.5) */ .tooltip:hover .tooltip__content, .tooltip__trigger:focus-visible + .tooltip__content, .tooltip__trigger:focus + .tooltip__content { opacity: 1; transition-delay: 150ms; } .tooltip__trigger { /* [QA fix 4.1] declaracao duplicada de cursor removida (help vencia pointer) */ cursor: help; background: none; border: none; color: var(--muted-foreground); font-family: var(--font-body); font-size: var(--text-sm); padding: 2px 4px; border-radius: var(--radius-button); } .tooltip__trigger:focus-visible { box-shadow: var(--shadow-focus); outline-offset: 2px; } /* -------------------------------------------------------------------------- §6.6 Toast -------------------------------------------------------------------------- */ .toast { position: fixed; bottom: var(--space-6); right: var(--space-6); z-index: 9999; min-width: 280px; max-width: 480px; padding: var(--space-4) var(--space-6); background-color: var(--navy-deep); border-left: 3px solid var(--success); border-radius: var(--radius-card); /* [QA fix 4.1] sombra via token multi-layer (era literal single-layer); §5.3 nao tokeniza shadow-xl — --shadow-lg e o popover/hover tokenizado */ box-shadow: var(--shadow-lg); font-family: var(--font-body); font-size: var(--text-sm); color: var(--foreground); line-height: 1.5; transform: translateY(var(--space-2)); opacity: 0; transition: transform var(--duration-fast) var(--ease-executive), opacity var(--duration-fast) var(--ease-executive); } .toast--visible { transform: translateY(0); opacity: 1; } .toast--danger { border-left-color: var(--danger); } /* Regiao aria-live para acessibilidade */ .toast-region { position: fixed; bottom: var(--space-6); right: var(--space-6); z-index: 9999; display: flex; flex-direction: column; gap: var(--space-3); pointer-events: none; } .toast-region .toast { position: static; pointer-events: auto; }