/* ============================================================ INOVA DESIGN SYSTEM · Foundation -------------------------------------------------------------- Tokens globais (cores, espaços, tipografia, sombras, motion) Light padrão · Dark via [data-theme="dark"] no Cor âncora: #c8102e (vermelho oficial Rede Inova) Tipografia: Inter (UI) · Geist (números) · JetBrains Mono (code) ============================================================ */ /* ===== Fonts (CDN — pode trocar pra self-host depois) ===== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap'); @import url('/css/design-overrides.css'); /* ===== TOKENS — LIGHT (padrão) ===== */ :root { /* ── Paleta primária (Inova red, ancorada em #c8102e) ── */ --p-50: #FDF2F4; --p-100: #FCE4E8; --p-200: #F8C2CC; --p-300: #F18EA1; --p-400: #E84B6E; --p-500: #c8102e; /* ★ oficial */ --p-600: #B30E29; --p-700: #960B22; --p-800: #75081B; --p-900: #4F0612; /* ── Neutros LIGHT (cinza-azulado quente · menos cansativo) ── */ --n-0: #FCFCFD; /* surface · não puro branco */ --n-50: #E7E9EE; /* bg principal · cinza-pérola */ --n-100: #DCDFE5; /* bg-sunken · seções */ --n-200: #C4C9D3; /* border · contraste visível */ --n-300: #A8B0BE; /* border-strong */ --n-400: #7C8493; /* text-subtle */ --n-500: #5C6573; /* text-muted secundário */ --n-600: #3D4451; /* text-muted */ --n-700: #232830; /* text base */ --n-800: #161A20; /* text strong */ --n-900: #0D1116; /* text emphasis */ --n-950: #050608; /* bg dark mode */ /* ── Estados ── */ --success: #16A34A; --success-bg: #DCFCE7; --success-fg: #166534; --warning: #F59E0B; --warning-bg: #FEF3C7; --warning-fg: #92400E; --danger: #DC2626; --danger-bg: #FEE2E2; --danger-fg: #991B1B; --info: #2563EB; --info-bg: #DBEAFE; --info-fg: #1E40AF; /* ── Canais (badges/ícones de origem da mensagem) ── */ --whatsapp: #25D366; --instagram: #E1306C; --facebook: #1877F2; --webchat: #6366F1; --telegram: #229ED9; /* ── Semânticas (substitua estas nos componentes) ── */ --bg: var(--n-50); --bg-elevated: var(--n-0); --bg-sunken: var(--n-100); --bg-overlay: rgba(15, 23, 42, .55); --surface: var(--n-0); --surface-hover: var(--n-100); --surface-active: var(--n-200); --border: var(--n-200); --border-strong: var(--n-300); --border-focus: var(--p-500); --text: var(--n-900); --text-muted: var(--n-600); --text-subtle: var(--n-500); --text-inverse: var(--n-0); --brand: var(--p-500); --brand-hover: var(--p-600); --brand-active: var(--p-700); --brand-soft: var(--p-50); --brand-ring: color-mix(in srgb, var(--p-500) 22%, transparent); /* ── Sombras (mais sutis no light) ── */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04); --shadow: 0 4px 6px -1px rgba(15, 23, 42, .08), 0 2px 4px -2px rgba(15, 23, 42, .04); --shadow-md: 0 10px 15px -3px rgba(15, 23, 42, .10), 0 4px 6px -4px rgba(15, 23, 42, .06); --shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, .10), 0 8px 10px -6px rgba(15, 23, 42, .08); --shadow-xl: 0 25px 50px -12px rgba(15, 23, 42, .20); --ring: 0 0 0 3px var(--brand-ring); /* ── Radius ── */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-full: 9999px; /* ── Spacing (escala 4px) ── */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; /* ── Tipografia ── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-num: 'Geist', 'Inter', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --fs-xs: 13px; --lh-xs: 18px; --fs-sm: 14px; --lh-sm: 20px; --fs-base: 15px; --lh-base: 22px; --fs-md: 16px; --lh-md: 24px; --fs-lg: 17px; --lh-lg: 26px; --fs-xl: 19px; --lh-xl: 28px; --fs-2xl: 23px; --lh-2xl: 32px; --fs-3xl: 29px; --lh-3xl: 38px; --fs-4xl: 38px; --lh-4xl: 46px; /* ── Motion ── */ --t-fast: 120ms cubic-bezier(.4, 0, .2, 1); --t-base: 200ms cubic-bezier(.4, 0, .2, 1); --t-slow: 320ms cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* ── Layout ── */ --sidebar-w: 240px; --sidebar-w-collapsed: 64px; --topbar-h: 56px; --rightpanel-w: 320px; /* ── Z-index scale ── */ --z-base: 1; --z-dropdown: 1000; --z-sticky: 1100; --z-overlay: 1200; --z-modal: 1300; --z-toast: 1400; --z-tooltip: 1500; } /* ===== TOKENS — DARK ===== */ [data-theme="dark"] { --bg: var(--n-950); --bg-elevated: var(--n-900); --bg-sunken: #000; --bg-overlay: rgba(0, 0, 0, .65); --surface: var(--n-900); --surface-hover: var(--n-800); --surface-active: var(--n-700); --border: var(--n-800); --border-strong: var(--n-700); --text: var(--n-50); --text-muted: var(--n-300); --text-subtle: var(--n-400); --text-inverse: var(--n-900); --brand-soft: color-mix(in srgb, var(--p-500) 14%, var(--n-900)); --brand-ring: color-mix(in srgb, var(--p-400) 30%, transparent); /* Sombras quase imperceptíveis no dark — usa borda no lugar */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45); --shadow: 0 4px 6px rgba(0, 0, 0, .50); --shadow-md: 0 10px 15px rgba(0, 0, 0, .55); --shadow-lg: 0 20px 25px rgba(0, 0, 0, .60); --shadow-xl: 0 25px 50px rgba(0, 0, 0, .70); --success-bg: color-mix(in srgb, var(--success) 18%, var(--n-900)); --warning-bg: color-mix(in srgb, var(--warning) 18%, var(--n-900)); --danger-bg: color-mix(in srgb, var(--danger) 18%, var(--n-900)); --info-bg: color-mix(in srgb, var(--info) 18%, var(--n-900)); } /* ===== Modern Reset ===== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html, body { height: 100%; } html { -webkit-text-size-adjust: 100%; tab-size: 4; } body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; position: relative; min-height: 100vh; } /* Aurora global SUTIL — visível em todas as telas admin sem competir com conteúdo */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 1400px 900px at 0% 0%, color-mix(in srgb, var(--brand) 6%, transparent), transparent 60%), radial-gradient(ellipse 1000px 700px at 100% 100%, color-mix(in srgb, var(--info) 5%, transparent), transparent 60%); } [data-theme="dark"] body::before { background: radial-gradient(ellipse 1400px 900px at 0% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 55%), radial-gradient(ellipse 1000px 700px at 100% 100%, color-mix(in srgb, #0ea5e9 9%, transparent), transparent 55%); } /* Textura noise leve global */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: .2; mix-blend-mode: overlay; } [data-theme="dark"] body::after { opacity: .3; mix-blend-mode: soft-light; } /* Garante que conteúdo fica POR CIMA das pseudo-camadas */ body > * { position: relative; z-index: 1; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; } /* ===== Top loading bar — feedback visual em navegação ===== *
injetado uma vez via JS (ver inova-ds-bootstrap) * .loading: barra crescendo (90% em 1.2s). .done: completa+fade. */ #page-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 70%, #fff) 50%, var(--brand) 100%); transform-origin: left center; transform: scaleX(0); z-index: 99999; pointer-events: none; box-shadow: 0 0 8px color-mix(in srgb, var(--brand) 60%, transparent); opacity: 0; } #page-progress.loading { animation: page-progress-grow 1.2s ease-out forwards; } #page-progress.done { transform: scaleX(1); opacity: 0; transition: opacity 200ms ease-out 100ms; } @keyframes page-progress-grow { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(0.7); opacity: 1; } 100% { transform: scaleX(0.9); opacity: 1; } } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-xs); } /* ===== Tipografia base ===== */ h1, .h1 { font-size: var(--fs-4xl); line-height: var(--lh-4xl); font-weight: 700; letter-spacing: -0.02em; } h2, .h2 { font-size: var(--fs-3xl); line-height: var(--lh-3xl); font-weight: 700; letter-spacing: -0.015em; } h3, .h3 { font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: 600; letter-spacing: -0.01em; } h4, .h4 { font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: 600; } h5, .h5 { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 600; } h6, .h6 { font-size: var(--fs-md); line-height: var(--lh-md); font-weight: 600; } .text-xs { font-size: var(--fs-xs); line-height: var(--lh-xs); } .text-sm { font-size: var(--fs-sm); line-height: var(--lh-sm); } .text-base { font-size: var(--fs-base); line-height: var(--lh-base); } .text-md { font-size: var(--fs-md); line-height: var(--lh-md); } .text-lg { font-size: var(--fs-lg); line-height: var(--lh-lg); } .text-muted { color: var(--text-muted); } .text-subtle { color: var(--text-subtle); } .text-brand { color: var(--brand); } .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-danger { color: var(--danger); } .font-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: 'cv11', 'ss01'; } .font-mono { font-family: var(--font-mono); } .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } /* ===== Utilitários atômicos (poucos, propositais) ===== */ .row { display: flex; align-items: center; } .col { display: flex; flex-direction: column; } .grow { flex: 1 1 auto; min-width: 0; } .shrink-0 { flex-shrink: 0; } .gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); } .gap-6 { gap: var(--s-6); } .p-2 { padding: var(--s-2); } .p-3 { padding: var(--s-3); } .p-4 { padding: var(--s-4); } .p-6 { padding: var(--s-6); } .px-3 { padding-left: var(--s-3); padding-right: var(--s-3); } .px-4 { padding-left: var(--s-4); padding-right: var(--s-4); } .py-2 { padding-top: var(--s-2); padding-bottom: var(--s-2); } .py-3 { padding-top: var(--s-3); padding-bottom: var(--s-3); } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Scroll customizado discreto (light & dark) */ .scroll-pretty { scrollbar-width: thin; scrollbar-color: var(--n-300) transparent; } .scroll-pretty::-webkit-scrollbar { width: 8px; height: 8px; } .scroll-pretty::-webkit-scrollbar-thumb { background: var(--n-300); border-radius: var(--r-full); } .scroll-pretty::-webkit-scrollbar-thumb:hover { background: var(--n-400); } [data-theme="dark"] .scroll-pretty { scrollbar-color: var(--n-700) transparent; } [data-theme="dark"] .scroll-pretty::-webkit-scrollbar-thumb { background: var(--n-700); } [data-theme="dark"] .scroll-pretty::-webkit-scrollbar-thumb:hover { background: var(--n-600); } /* Animações reutilizáveis */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } @keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } .anim-fade { animation: fade-in var(--t-base) var(--ease-out); } .anim-slide-up { animation: slide-up var(--t-base) var(--ease-out); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }