/* Elpis CRM — design tokens + base styles A premium, monochrome-forest aesthetic with subtle glass and a single sage accent. */ /* Fonts — SELF-HOSTED (woff2 local) com font-display:optional. Antes vinha do @import do Google Fonts com display=swap → o navegador renderizava em Times/system, baixava a fonte e TROCAVA (FOUT), causando reflow global (a "flicada" do splash: "Elpis." em Times → Fraunces ⇒ +13.5px de largura ⇒ o cluster centralizado pulava). `font-display: optional` dá uma janela curtíssima de bloqueio; se a fonte não chegar a tempo, usa o fallback NAQUELE load e NUNCA troca no meio — zero layout shift. Variable fonts → uma face com range de peso. */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: optional; src: url('/fonts/self/fraunces-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; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: optional; src: url('/fonts/self/fraunces-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: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 700; font-display: optional; src: url('/fonts/self/schibsted-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; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 700; font-display: optional; src: url('/fonts/self/schibsted-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: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: optional; src: url('/fonts/self/jetbrainsmono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: optional; src: url('/fonts/self/jetbrainsmono-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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; } :root { /* Type stacks */ --font-display: 'Fraunces', 'Times New Roman', serif; --font-ui: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Brand palette - monochrome forest */ --el-bg: #050605; --el-bg-elev: #0a0c0a; --el-surface: rgba(255, 255, 255, 0.035); --el-surface-2: rgba(255, 255, 255, 0.06); --el-line: rgba(255, 255, 255, 0.085); --el-line-soft: rgba(255, 255, 255, 0.05); --el-line-strong: rgba(255, 255, 255, 0.16); --el-fg: #ffffff; --el-fg-mid: rgba(255, 255, 255, 0.6); --el-fg-dim: rgba(255, 255, 255, 0.4); --el-mid: #a8c4ad; /* sage accent — used very sparingly */ /* Status tones */ --el-status-active: #a8c4ad; --el-status-warning: #e8d4a0; --el-status-hot: #e8b89a; --el-status-neutral: #c4c4c4; /* Radii */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px; /* Escala tipográfica — 8 níveis. Telas devem usar APENAS estes valores em vez de cravar fontSize:11/12/13 etc. (sweep de auditoria: havia 18 valores diferentes). */ --fs-9: 9px; /* eyebrow ultra-pequeno (status, micro-meta) */ --fs-10: 10px; /* eyebrow padrão */ --fs-11: 11px; /* badges, caption */ --fs-12: 12px; /* UI body pequeno */ --fs-13: 13px; /* UI body padrão */ --fs-14: 14px; /* UI body destacado */ --fs-16: 16px; /* subtítulos */ --fs-18: 18px; /* heading pequeno */ --fs-24: 24px; /* heading médio */ --fs-32: 32px; /* display */ --fs-stat: 24px; /* número de KPI/destaque — UM tamanho (mata o 22/23/24/25/26/28/30/34) */ --fs-h1: 40px; /* H1 de tela — UM tamanho (mata o 36/40/48/52) */ /* Espaçamento — escala única (mata os números mágicos 14/16/18/20/22/24/28/32/36) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --w-content: 1320px; /* largura máxima de conteúdo das telas */ /* Cores que estavam hardcoded em hex em muitas telas. Bosque Cuidado. */ --el-cream: #f4efe4; /* texto/destaque claro (66 ocorrências hardcoded antes) */ --el-status-sold: #c4a8a8; /* rosa-empoeirada — perdido/vendido/cancelado */ --el-shadow-soft: 0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 48px -24px rgba(0,0,0,0.6); /* Elevação estrutural (DESIGN.md): sombra grande+suave+baixa opacidade + realce de 1px no topo (a luz da manhã na borda). Cards SOBEM da noite. */ --el-elev-1: 0 1px 2px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05); --el-elev-2: 0 12px 32px -12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06); --el-elev-3: 0 28px 64px -16px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.07); --el-glow-vivo: 0 0 28px -6px rgba(168,196,173,0.35); } /* === TEMA "NOVO" (roupagem da landing) — só ativo com . O :root acima (Legacy) fica 100% intocado. 1ª passada: warm-dark da landing + cream/sage + vidro, raios maiores, glow. Como tudo usa as variáveis, as 14 telas herdam. Iterável; o Legacy continua a 1 toggle de distância. === */ [data-design="novo"] { --el-bg: #08090b; /* IGUAL ao da landing (#08090b) — dark tech, não cream */ --el-bg-elev: #11141a; /* Superfície do card = CINZA NEUTRO (R≈G≈B), NÃO o slate azulado de antes (#252b35 tinha B dominante). Fonte única: muda aqui e TODO card do Novo muda. Harmoniza com o cream/sage da landing. */ --el-card-1: #232324; /* topo */ --el-card-2: #151516; /* base */ --el-card-grad: linear-gradient(180deg, var(--el-card-1), var(--el-card-2)); /* TODO card herda isto */ --el-modal-bg: #11141a; /* superfície de modal = MESMO cinza do --el-bg-elev. Era o verde #16201a (herdado do hardcode do espelho) → modais divergiam (lead cinza × unidade verde); padronizado no cinza a pedido do dono (2026-07-07). */ --el-surface: rgba(244,239,228,0.045); --el-surface-2: rgba(244,239,228,0.07); --el-line: rgba(244,239,228,0.10); --el-line-soft: rgba(244,239,228,0.055); --el-line-strong: rgba(244,239,228,0.18); --el-fg: #f4efe4; --el-fg-mid: rgba(244,239,228,0.62); --el-fg-dim: rgba(244,239,228,0.42); --el-fg-faint: rgba(244,239,228,0.35); /* legenda/copyright */ /* ACENTO — sage claro (#a8c4ad, o verde da landing). O dono TESTOU o dourado quente (#e8d4a0) e REVERTEU em 2026-07-07 (não gostou; o sage é a identidade). 1 var repinta os ~190 usos de var(--el-accent) de uma vez. */ --el-accent: #a8c4ad; --el-accent-soft: rgba(168,196,173,0.14); --el-accent-line: rgba(168,196,173,0.45); --el-beam-gold: #e8d4a0; /* exclusivo do BorderBeam, NÃO é acento de UI */ /* tipografia da landing: o DISPLAY vira Schibsted Grotesk (sans) — não mais Fraunces (serif). A Schibsted já está carregada (é a --font-ui), então é só apontar. */ --font-display: var(--font-ui); /* hero titles AGRESSIVOS estilo landing — era 40px fixo, agora grande e responsivo */ --fs-h1: clamp(42px, 4.8vw, 68px); --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-2xl: 34px; --el-elev-1: 0 1px 2px rgba(0,0,0,0.5), inset 0 1px 0 rgba(244,239,228,0.06); --el-elev-2: 0 16px 40px -14px rgba(0,0,0,0.65), inset 0 1px 0 rgba(244,239,228,0.07); --el-elev-3: 0 32px 72px -18px rgba(0,0,0,0.75), inset 0 1px 0 rgba(244,239,228,0.08); --el-glow-vivo: 0 0 28px -10px rgba(244,239,228,0.16); /* era sage (verde feio) -> cream sutil */ /* receita ÚNICA do card de relevo (matar as 3 cópias inline divergentes) */ --el-elev-card: inset 0 1px 0 rgba(255,255,255,0.15), 0 3px 6px rgba(0,0,0,0.5), 0 28px 52px -12px rgba(0,0,0,0.82); --el-glow-accent: 0 0 70px -12px rgba(168,196,173,0.45); /* glow sage — RESERVADO ao card herói */ /* CORES VIVAS (Apple, dark mode) — só ACENTOS SEMÂNTICOS sobre a base escura. verde=ok/pronto/conectado · amarelo=esperando/atenção · vermelho=frio/urgente · laranja=quente(calor) */ --el-green: #30d158; --el-yellow: #ffd60a; --el-red: #ff453a; --el-orange: #ff9f0a; --el-blue: #0a84ff; --el-green-soft: rgba(48, 209, 88, 0.14); --el-yellow-soft: rgba(255, 214, 10, 0.14); --el-red-soft: rgba(255, 69, 58, 0.14); --el-orange-soft: rgba(255, 159, 10, 0.15); } /* === modo NOVO · VIDRO LÍQUIDO nos cards (roupagem da landing) === No Legacy o card é opaco (--el-bg-elev). No Novo vira superfície translúcida cream + backdrop-blur (frosted glass), como o GlassSurface da landing. O blur pega a aurora/glow do fundo. Só no modo novo; o :root (Legacy) fica intocado. */ [data-design="novo"] .el-surface-card, [data-design="novo"] .el-glass-strong { position: relative; /* ALTO RELEVO: card SÓLIDO que FLUTUA à frente do fundo (o dono quis que os cards PULEM, não vidro transparente que se mistura). Topo pega luz, sombra forte embaixo = relevo. */ background: linear-gradient(180deg, var(--el-card-1) 0%, var(--el-card-2) 100%); border: 1px solid rgba(255, 255, 255, 0.05); border-top-color: rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 3px 6px rgba(0, 0, 0, 0.5), 0 28px 52px -12px rgba(0, 0, 0, 0.82); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease; } /* NEUMORFISMO ANIMADO: a luz do relevo SEGUE o cursor (cream sutil, --mx/--my no utils.js). Parado = luz no topo. Com o cursor = a fonte de luz se move → o relevo "respira". Sem verde. */ [data-design="novo"] .el-surface-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; /* só o brilho da borda do vidro no topo — estático e limpo (sem luz que segue o cursor) */ background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 22%); } [data-design="novo"] .el-surface-card:hover, [data-design="novo"] .el-glass-strong:hover { /* hover: o relevo APROFUNDA (flutua um tico mais alto) — sem levantar/transform */ border-top-color: rgba(255, 255, 255, 0.20); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 2px 4px rgba(0, 0, 0, 0.45), 0 30px 58px -14px rgba(0, 0, 0, 0.85); } /* damas veladas / decorativas — SÓ no Legacy (o dono pediu fora do novo) */ [data-design="novo"] .el-veil { display: none !important; } [data-design="novo"] [style*="elpis-sisters"], [data-design="novo"] [style*="elpis-veil"], [data-design="novo"] [style*="elpis-hope"] { background-image: none !important; } /* (brilho-cursor verde REMOVIDO — agora é tilt 3D no utils.js + sheen neutro no ::after acima) */ /* === modo NOVO · ORBE VIVO (SVG que MORFA) — substitui a estátua no Oráculo === */ .el-morph-orb { display: none; } [data-design="novo"] .el-morph-orb { display: block; position: absolute; pointer-events: none; filter: blur(30px) saturate(1.35); } [data-design="novo"] .el-morph-orb--hero { display: none; } /* orbe verde removido — gooey no lugar */ /* === modo NOVO · GOOEY MORPH — blobs cream que se FUNDEM/morfam (filtro SVG) === */ .el-gooey { display: none; } [data-design="novo"] .el-gooey { display: block; position: absolute; pointer-events: none; } [data-design="novo"] .el-gooey-stage { position: relative; width: 100%; height: 100%; filter: url(#elGooeyFilter); } [data-design="novo"] .el-gooey-blob { position: absolute; top: 38%; left: 38%; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(245, 241, 232, 0.9), rgba(200, 190, 172, 0.45)); } [data-design="novo"] .el-gooey-b1 { width: 120px; height: 120px; animation: elGooeyA 11s ease-in-out infinite; } [data-design="novo"] .el-gooey-b2 { width: 100px; height: 100px; animation: elGooeyB 14s ease-in-out infinite; } [data-design="novo"] .el-gooey-b3 { width: 82px; height: 82px; animation: elGooeyC 17s ease-in-out infinite; } @keyframes elGooeyA { 0%,100%{transform:translate(-34px,-22px)} 33%{transform:translate(52px,18px)} 66%{transform:translate(2px,58px)} } @keyframes elGooeyB { 0%,100%{transform:translate(42px,28px)} 33%{transform:translate(-30px,-12px)} 66%{transform:translate(60px,48px)} } @keyframes elGooeyC { 0%,100%{transform:translate(58px,-12px)} 50%{transform:translate(-12px,50px)} } [data-design="novo"] .el-gooey--hero { top: -85px; right: -55px; width: 250px; height: 240px; z-index: 1; opacity: 0.4; } /* === LIQUID CHROME — fundo de metal líquido VIVO (WebGL); só no modo novo === */ .el-liquid-bg { display: none; } [data-design="novo"] .el-liquid-bg { display: block; } /* === Fase 2 · handle de resize do bento (react-grid-layout) — canto ┘ visível no modo editar === */ [data-design="novo"] .react-resizable-handle { background-image: none !important; width: 22px; height: 22px; right: 0; bottom: 0; padding: 0; } [data-design="novo"] .react-resizable-handle::after { content: ''; position: absolute; right: 6px; bottom: 6px; width: 10px; height: 10px; border-right: 2px solid rgba(244, 239, 228, 0.5); border-bottom: 2px solid rgba(244, 239, 228, 0.5); border-bottom-right-radius: 3px; transition: border-color 0.18s ease; } [data-design="novo"] .react-grid-item:hover .react-resizable-handle::after { border-color: rgba(168, 196, 173, 0.95); } /* placeholder (a sombra de onde o card vai cair) — na cor da marca, não azul */ [data-design="novo"] .react-grid-item.react-grid-placeholder { background: rgba(168, 196, 173, 0.18) !important; border-radius: var(--r-xl); } /* === Fase 2 · GRIDSTACK — sem o bg padrão dele (vale o el-surface-card) + handle ┘ grande + placeholder sage === */ [data-design="novo"] .grid-stack-item-content { background: transparent !important; box-shadow: none; inset: 0; overflow: hidden !important; } [data-design="novo"] .grid-stack-item > .ui-resizable-se { width: 26px; height: 26px; right: 1px; bottom: 1px; background-image: none; transform: none; } [data-design="novo"] .grid-stack-item > .ui-resizable-se::after { content: ''; position: absolute; right: 6px; bottom: 6px; width: 11px; height: 11px; border-right: 2.5px solid rgba(168, 196, 173, 0.6); border-bottom: 2.5px solid rgba(168, 196, 173, 0.6); border-bottom-right-radius: 4px; } [data-design="novo"] .grid-stack-item:hover > .ui-resizable-se::after { border-color: rgba(168, 196, 173, 0.95); } [data-design="novo"] .grid-stack-placeholder > .placeholder-content { background: rgba(168, 196, 173, 0.15); border: 1px dashed rgba(168, 196, 173, 0.5); border-radius: var(--r-xl); margin: 0; } /* === SAMPLE · LIQUID GLASS — vidro fosco que REFRATA uma aurora atrás (estilo Apple/Reagle) === */ [data-design="novo"] .el-dash-aurora { /* aurora num SUSSURRO, espalhada e EVEN — pra TODOS os cards refratarem igual (não um blob no hero) */ background: radial-gradient(70% 58% at 22% -5%, rgba(168, 196, 173, 0.22), transparent 60%), radial-gradient(64% 56% at 88% 105%, rgba(170, 158, 200, 0.16), transparent 60%); } [data-design="novo"] .el-glass-liquid { /* o herói usa o MESMO relevo dos outros (um tico mais pronunciado por ser o maior) — coeso */ background: var(--el-card-grad) !important; /* era slate azulado #272d37 — agora cinza neutro */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-top-color: rgba(255, 255, 255, 0.18) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 3px 6px rgba(0, 0, 0, 0.5), 0 34px 64px -12px rgba(0, 0, 0, 0.84) !important; } /* === EFEITOS PORTADOS DA LANDING (o "brilho") === .shiny = shimmer cream do wordmark/heading (globals.css da landing). .caret = cursor piscante. */ [data-design="novo"] .el-shiny { background: linear-gradient(110deg, #c4cfc6 35%, #ffffff 50%, #c4cfc6 65%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: elShine 4.5s linear infinite; } @keyframes elShine { 0% { background-position: 150%; } 100% { background-position: -150%; } } [data-design="novo"] .el-caret { color: var(--el-accent); font-weight: 400; animation: elCaret 0.7s steps(1) infinite; } @keyframes elCaret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } /* BorderBeam — feixe que percorre a borda (portado da landing, magic-ui). RESERVADO ao card herói. */ @property --el-beam-a { syntax: ''; inherits: false; initial-value: 0deg; } [data-design="novo"] .el-borderbeam { box-shadow: var(--el-glow-accent), var(--el-elev-card); } [data-design="novo"] .el-borderbeam::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: 3; pointer-events: none; background: conic-gradient(from var(--el-beam-a), transparent 0 72%, var(--el-accent) 84%, var(--el-beam-gold) 91%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: elBeamRot 7s linear infinite; } @keyframes elBeamRot { to { --el-beam-a: 360deg; } } @media (prefers-reduced-motion: reduce) { [data-design="novo"] .el-borderbeam::before { animation: none; } } /* === modo NOVO · BOTÃO animado (spinner do morph + sheen + setinha que desliza no hover) === */ .el-btn-spinner { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; border-top-color: transparent; opacity: 0.9; animation: elBtnSpin 0.6s linear infinite; } @keyframes elBtnSpin { to { transform: rotate(360deg); } } [data-design="novo"] .el-btn-primary, [data-design="novo"] .el-btn-ghost { position: relative; overflow: hidden; } [data-design="novo"] .el-btn-primary svg, [data-design="novo"] .el-btn-ghost svg { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } [data-design="novo"] .el-btn-primary:hover svg, [data-design="novo"] .el-btn-ghost:hover svg { transform: translateX(2px); } /* === BOTÕES LIMPOS (estilo landing/Apple) — pílula sólida, hover sutil. SEM clay, SEM sheen. === */ [data-design="novo"] .el-btn-primary { border-radius: 14px; border: none; padding: 12px 22px; font-size: 14px; font-weight: 600; background: #f3eee3; color: #15181d; box-shadow: 0 1px 1px rgba(0,0,0,0.3), 0 12px 26px -12px rgba(0,0,0,0.55); transition: transform 0.22s cubic-bezier(0.16,1,0.3,1), box-shadow 0.22s ease, background 0.22s ease; } [data-design="novo"] .el-btn-primary:hover { background: #fdfbf6; transform: translateY(-1px); box-shadow: 0 2px 3px rgba(0,0,0,0.3), 0 18px 34px -12px rgba(0,0,0,0.6); } [data-design="novo"] .el-btn-ghost { border-radius: 14px; padding: 12px 22px; font-size: 14px; font-weight: 600; background: rgba(255,255,255,0.05); color: #efeada; border: 1px solid rgba(255,255,255,0.11); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); transition: transform 0.22s cubic-bezier(0.16,1,0.3,1), background 0.22s ease, border-color 0.22s ease; } [data-design="novo"] .el-btn-ghost:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.18); transform: translateY(-1px); } /* === modo NOVO · AURORA do fundo — a profundidade atmosférica da landing (glows radiais sutis, fixos atrás do conteúdo). O vidro dos cards pega esse glow no blur. === */ /* aurora de fundo NEUTRALIZADA (o verde/azul ficava feio + era coberta pelo .el-screen-stack) */ [data-design="novo"] body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(55% 45% at 20% -5%, rgba(255, 255, 255, 0.018), transparent 60%); } /* === modo NOVO · SIDEBAR animada (nav lateral, expand-on-hover via CSS) === Fininha (72px) só com ícones; abre (234px) no hover mostrando os rótulos. Vidro. Só no modo novo; o Legacy fica com a nav no topo, intocado. */ .el-sidebar { display: none; } [data-design="novo"] .el-sidebar { display: flex; flex-direction: column; position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; width: 72px; padding: 16px 12px; overflow: hidden; background: rgba(244, 239, 228, 0.05); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); border-right: 1px solid var(--el-line); transition: width 0.30s cubic-bezier(0.32, 0.72, 0, 1); } [data-design="novo"] .el-sidebar:hover { width: 234px; } [data-design="novo"] .el-sidebar-logo { display: flex; align-items: center; height: 38px; padding-left: 7px; margin-bottom: 16px; color: #f4efe4; } [data-design="novo"] .el-sidebar-nav { display: flex; flex-direction: column; gap: 3px; } [data-design="novo"] .el-sidebar-item { display: flex; align-items: center; gap: 15px; width: 100%; padding: 10px 9px; border-radius: var(--r-md); border: 1px solid transparent; background: transparent; color: var(--el-fg-mid); cursor: pointer; font-family: var(--font-ui); font-size: 14px; font-weight: 500; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s cubic-bezier(0.32, 0.72, 0, 1); } [data-design="novo"] .el-sidebar-item:hover { background: rgba(244, 239, 228, 0.06); color: var(--el-fg); box-shadow: inset 0 1px 0 rgba(244, 239, 228, 0.05); } [data-design="novo"] .el-sidebar-item:active { transform: scale(0.975); } [data-design="novo"] .el-sidebar-item.is-active { background: rgba(244, 239, 228, 0.06); color: #f4efe4; border-color: rgba(244, 239, 228, 0.10); /* relevo neumórfico CREAM — pílula que sobe (sem o contorno verde feio) */ box-shadow: inset 0 1px 0 rgba(244, 239, 228, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.3), -3px -4px 12px rgba(244, 239, 228, 0.02), 5px 7px 18px -4px rgba(0, 0, 0, 0.55); } [data-design="novo"] .el-sidebar-ico { display: grid; place-items: center; width: 24px; flex-shrink: 0; } [data-design="novo"] .el-sidebar-item.is-active .el-sidebar-ico { color: #a8c4ad; } [data-design="novo"] .el-sidebar-label { opacity: 0; transition: opacity 0.2s ease; } [data-design="novo"] .el-sidebar:hover .el-sidebar-label { opacity: 1; } [data-design="novo"] .el-sidebar-subs { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 5px 32px; } [data-design="novo"] .el-sidebar-sub { display: flex; align-items: center; padding: 7px 10px; border-radius: var(--r-sm); background: transparent; border: none; color: var(--el-fg-dim); cursor: pointer; font-family: var(--font-ui); font-size: 13px; text-align: left; white-space: nowrap; } [data-design="novo"] .el-sidebar-sub:hover { color: var(--el-fg-mid); } [data-design="novo"] .el-sidebar-sub.is-active { color: #a8c4ad; font-weight: 600; } /* === modo NOVO · DOCK macOS (flutuante, vertical; ícones magnificam perto do cursor) === Substituiu a sidebar. Pílula de vidro flutuando na lateral; o JS escala/empurra os .el-dock-btn (origin left center). Subs e rótulos aparecem em flyout à direita. */ [data-design="novo"] .el-dock { position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; display: flex; align-items: center; padding-left: 12px; pointer-events: none; } [data-design="novo"] .el-dock-inner { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 8px; border-radius: 26px; background: rgba(244, 239, 228, 0.05); backdrop-filter: blur(26px) saturate(1.4); -webkit-backdrop-filter: blur(26px) saturate(1.4); border: 1px solid var(--el-line); box-shadow: inset 0 1px 0 rgba(244, 239, 228, 0.07), 0 24px 55px -18px rgba(0, 0, 0, 0.72); transition: padding 0.3s cubic-bezier(0.32, 0.72, 0, 1), gap 0.3s cubic-bezier(0.32, 0.72, 0, 1); } /* dock DINÂMICO: a pílula respira (cresce) quando o mouse está em cima */ [data-design="novo"] .el-dock:hover .el-dock-inner { padding: 14px 10px; gap: 7px; } [data-design="novo"] .el-dock-logo { display: grid; place-items: center; width: 46px; height: 40px; margin-bottom: 4px; background: none; border: none; color: #f4efe4; cursor: pointer; } [data-design="novo"] .el-dock-nav, [data-design="novo"] .el-dock-footer { display: flex; flex-direction: column; align-items: center; gap: 5px; } [data-design="novo"] .el-dock-footer { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--el-line-soft); width: 100%; } [data-design="novo"] .el-dock-item { position: relative; display: flex; } [data-design="novo"] .el-dock-btn { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; /* tile com fundo CREME (cor da landing) atrás de cada ícone — pedido do dono */ position: relative; z-index: 1; background: rgba(244, 239, 228, 0.10); border: 1px solid rgba(244, 239, 228, 0.07); box-shadow: inset 0 1px 0 rgba(244, 239, 228, 0.06); color: var(--el-fg-mid); cursor: pointer; transform-origin: left center; transition: transform 0.12s ease-out, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } [data-design="novo"] .el-dock-btn:hover { color: #f4efe4; background: rgba(244, 239, 228, 0.16); } /* selecionado = tile CREME SÓLIDO (não transparente) com glifo escuro; z-index passa por cima da linha */ [data-design="novo"] .el-dock-btn.is-active { color: #26312a; background: #e7e0d0; border-color: rgba(244, 239, 228, 0.28); z-index: 2; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 5px 7px 18px -4px rgba(0, 0, 0, 0.55); } [data-design="novo"] .el-dock-dot { display: block; width: 10px; height: 10px; border-radius: 999px; } [data-design="novo"] .el-dock-avatar { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: #f4efe4; background: linear-gradient(135deg, #2f332e, #0a0c0a); border: 1px solid rgba(168, 196, 173, 0.30); } [data-design="novo"] .el-dock-flyout { position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 5px; min-width: 152px; z-index: 90; padding: 2px 0; } /* o filtro goo PERSISTE enquanto o flyout está aberto (JS) — funde as cápsulas como líquido (metaball, conectadas pelos "pescoços"); o feComposite atop mantém o texto/cápsula nítidos. */ [data-design="novo"] .el-dock-flyout.is-gooing { filter: url(#el-goo); } @keyframes elDockFly { from { opacity: 0; transform: translateY(-50%) translateX(-6px); } to { opacity: 1; transform: translateY(-50%) translateX(0); } } [data-design="novo"] .el-dock-flyout-sub { padding: 10px 16px; border-radius: 13px; border: none; cursor: pointer; background: rgba(20, 23, 29, 0.98); color: var(--el-fg-mid); font-family: var(--font-ui); font-size: 13.5px; font-weight: 500; text-align: left; white-space: nowrap; box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.7); animation: elGooSub 0.44s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; animation-delay: var(--d, 0s); } @keyframes elGooSub { from { opacity: 0; transform: translateY(-26px) scale(0.4); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes elGooOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-16px) scale(0.35); } } [data-design="novo"] .el-dock-flyout-sub:hover { background: rgba(38, 44, 52, 0.99); color: #f4efe4; } [data-design="novo"] .el-dock-flyout-sub.is-active { color: #a8c4ad; font-weight: 600; } /* SAÍDA gooey: as cápsulas retraem (não somem secas) — flyout e menu */ [data-design="novo"] .el-dock-flyout.is-closing .el-dock-flyout-sub { animation: elGooOut 0.22s cubic-bezier(0.4, 0, 1, 1) forwards; animation-delay: 0s; } [data-design="novo"] .el-dock-menu { position: absolute; left: calc(100% + 16px); bottom: 0; width: 232px; z-index: 90; overflow: hidden; padding: 6px; border-radius: 14px; background: rgba(18, 21, 27, 0.97); border: 1px solid var(--el-line-strong); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(244, 239, 228, 0.06), 0 28px 60px -16px rgba(0, 0, 0, 0.7); transform-origin: bottom left; animation: elMenuIn 0.2s cubic-bezier(0.32, 0.72, 0, 1); } [data-design="novo"] .el-dock-menu.is-closing { animation: elMenuOut 0.16s ease-in forwards; } @keyframes elMenuIn { from { opacity: 0; transform: translateY(10px) scale(0.94); } to { opacity: 1; transform: none; } } @keyframes elMenuOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px) scale(0.96); } } [data-design="novo"] .el-dock-menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--el-line-soft); margin-bottom: 4px; } [data-design="novo"] .el-dock-menu-name { font-size: 13px; font-weight: 600; color: #f4efe4; } [data-design="novo"] .el-dock-menu-mail { font-size: 11px; color: var(--el-fg-mid); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-design="novo"] .el-dock-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px; background: transparent; border: none; color: var(--el-fg); cursor: pointer; font-family: var(--font-ui); font-size: 13px; text-align: left; } [data-design="novo"] .el-dock-menu-item:hover { background: rgba(244, 239, 228, 0.06); } [data-design="novo"] .el-dock-menu-item.is-danger { color: #e8b89a; } [data-design="novo"] .el-dock-menu-sep { height: 1px; background: var(--el-line-soft); margin: 4px 0; } /* menu de conta: ícone com FUNDO CREME e glifo escuro (pedido do dono) */ [data-design="novo"] .el-dock-menu-item { gap: 11px; } [data-design="novo"] .el-dock-menu-ico { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; background: #f4efe4; color: #161812; } [data-design="novo"] .el-dock-menu-ico.is-danger { background: #e8b89a; color: #2a1812; } [data-design="novo"] .el-dock-theme { color: var(--el-fg-mid); } [data-design="novo"] .el-dock-theme:hover { color: var(--el-cream); background: rgba(244, 239, 228, 0.06); } /* === View Transitions: reveal circular ao trocar o tema (o JS anima o clip-path) === */ ::view-transition-old(root) { animation: none; z-index: 1; } ::view-transition-new(root) { animation: none; z-index: 2; } /* === TEMA CLARO (v1) — flip dos tokens do modo Novo. . === v1: pega bg/superfícies/texto/sombras via tokens. Cápsulas escuras (dock-menu, flyout) e pastéis seguem; refinar com prints depois. */ [data-theme="light"] { --el-cream: #1b1d18; } [data-design="novo"][data-theme="light"] { --el-bg: #f3efe6; --el-bg-elev: #ffffff; --el-card-1: #ffffff; --el-card-2: #f5f2ec; --el-modal-bg: #ffffff; --el-surface: rgba(22, 24, 18, 0.04); --el-surface-2: rgba(22, 24, 18, 0.07); --el-line: rgba(22, 24, 18, 0.12); --el-line-soft: rgba(22, 24, 18, 0.07); --el-line-strong: rgba(22, 24, 18, 0.2); --el-fg: #1b1d18; --el-fg-mid: rgba(27, 29, 24, 0.6); --el-fg-dim: rgba(27, 29, 24, 0.42); --el-fg-faint: rgba(27, 29, 24, 0.3); --el-accent: #5f8268; --el-accent-soft: rgba(95, 130, 104, 0.16); --el-accent-line: rgba(95, 130, 104, 0.5); --el-elev-1: 0 1px 2px rgba(22,24,18,0.10), inset 0 1px 0 rgba(255,255,255,0.7); --el-elev-2: 0 16px 40px -14px rgba(22,24,18,0.16), inset 0 1px 0 rgba(255,255,255,0.8); --el-elev-3: 0 32px 72px -18px rgba(22,24,18,0.2), inset 0 1px 0 rgba(255,255,255,0.9); --el-glow-vivo: 0 0 28px -10px rgba(22,24,18,0.08); --el-elev-card: inset 0 1px 0 rgba(255,255,255,0.9), 0 3px 6px rgba(22,24,18,0.08), 0 28px 52px -12px rgba(22,24,18,0.16); --el-shadow-soft: 0 1px 0 rgba(255,255,255,0.5) inset, 0 24px 48px -24px rgba(22,24,18,0.18); } [data-design="novo"][data-theme="light"] body { background: var(--el-bg); color: var(--el-fg); } [data-design="novo"][data-theme="light"] .el-dock-inner { background: rgba(22, 24, 18, 0.05); border-color: rgba(22, 24, 18, 0.10); /* sombra ESCURA pesada (do escuro) virava uma faixa cinza no claro — parecia um "sidebar" cortando a tela. No claro: sombra leve, dock flutua sobre o creme contínuo. */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 30px -16px rgba(22, 24, 18, 0.14); } /* html ficava #020403 (escuro) no claro — aparecia em over-scroll. Flipa pro creme. */ [data-design="novo"][data-theme="light"] { background: var(--el-bg); } /* Cápsulas ESCURAS do dock (flyout/menu) seguem escuras no claro (popover dark de propósito) — mas o texto usa tokens que flipam pra escuro e SOME na cápsula escura. Força texto CLARO. */ [data-design="novo"][data-theme="light"] .el-dock-flyout-sub { color: rgba(244, 239, 228, 0.72); } [data-design="novo"][data-theme="light"] .el-dock-menu-mail { color: rgba(244, 239, 228, 0.58); } [data-design="novo"][data-theme="light"] .el-dock-menu-item { color: rgba(244, 239, 228, 0.88); } [data-design="novo"][data-theme="light"] .el-dock-menu-head { border-bottom-color: rgba(244, 239, 228, 0.12); } [data-design="novo"][data-theme="light"] .el-dock-menu-sep { background: rgba(244, 239, 228, 0.10); } [data-design="novo"][data-theme="light"] .el-dock-menu-item:hover { background: rgba(244, 239, 228, 0.07); } /* Σ do dock (logo) era #f4efe4 (claro) → escurece no claro pra não sumir. */ [data-design="novo"][data-theme="light"] .el-dock-logo { color: rgba(22, 24, 18, 0.5); } /* Avatar tem FUNDO escuro nos 2 temas (gradiente) — a inicial precisa ficar CREME. Mas o override acima do .el-dock-btn (escuro) pegava ele tb → inicial escura sobre fundo escuro = sumia. */ [data-design="novo"][data-theme="light"] .el-dock-btn.el-dock-avatar { color: #f4efe4; background: #20241f; border-color: rgba(22, 24, 18, 0.25); } /* Botões no claro: ghost tinha texto/borda CLAROS (sumia — ex.: "Iniciar QR"); primary era pílula creme sobre fundo creme (sem contraste). Ghost vira escuro sutil; primary vira pílula ESCURA com texto creme (espelho do modo escuro = contraste alto). */ [data-design="novo"][data-theme="light"] .el-btn-ghost { background: rgba(22, 24, 18, 0.04); color: rgba(22, 24, 18, 0.78); border-color: rgba(22, 24, 18, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); } [data-design="novo"][data-theme="light"] .el-btn-ghost:hover { background: rgba(22, 24, 18, 0.07); border-color: rgba(22, 24, 18, 0.2); } [data-design="novo"][data-theme="light"] .el-btn-primary { background: #1f2420; color: #f4efe4; box-shadow: 0 1px 1px rgba(22, 24, 18, 0.12), 0 12px 26px -12px rgba(22, 24, 18, 0.28); } /* Vinheta do hero (ex.: tela de conectar WhatsApp): escura no dark (vinheta de foco). No claro, o rgba(0,0,0,0.85) das bordas virava a "faixa cinza" (#88) — deixa BEM sutil. */ [data-design="novo"] .el-hero-vignette { background: radial-gradient(ellipse 80% 60% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.85) 100%); } [data-design="novo"][data-theme="light"] .el-hero-vignette { background: radial-gradient(ellipse 90% 70% at 50% 50%, transparent 55%, rgba(22, 24, 18, 0.05) 100%); } /* Paintings/backdrops decorativos (ForestPainting/ScreenBackdrop graphite) são ESCUROS — no claro viram a "faixa cinza" cobrindo o conteúdo (#94, dashboard/equipe/leads). Some no claro (limpo/flat). */ [data-design="novo"][data-theme="light"] .el-paint { display: none !important; } /* Inputs no claro: rgba(0,0,0,0.3) virava CINZA sobre creme + texto branco sumia (#100). Fundo ESCURO (charcoal) + texto creme = alto contraste pra escrever/ler (pedido do dono). */ [data-design="novo"][data-theme="light"] .el-input { background: #232722; color: #f4efe4; border-color: rgba(22, 24, 18, 0.16); } [data-design="novo"][data-theme="light"] .el-input::placeholder { color: rgba(244, 239, 228, 0.52); } [data-design="novo"][data-theme="light"] .el-input:focus { background: #2b302a; border-color: rgba(168, 196, 173, 0.6); } /* Badge/pill (ex.: "Integração oficial WhatsApp Business") tinha texto branco 75% — some no claro (#101). */ [data-design="novo"][data-theme="light"] .el-badge { background: rgba(22, 24, 18, 0.05); color: rgba(22, 24, 18, 0.64); border-color: rgba(22, 24, 18, 0.14); } [data-design="novo"][data-theme="light"] .el-dock-btn:hover { background: rgba(22, 24, 18, 0.06); color: #1b1d18; } [data-design="novo"][data-theme="light"] .el-dock-btn.is-active { background: rgba(22, 24, 18, 0.08); color: #4e6f55; border-color: rgba(22, 24, 18, 0.1); } [data-design="novo"][data-theme="light"] .el-dock-btn { color: rgba(22, 24, 18, 0.5); } /* ícones legíveis no claro (eram claros) */ /* Texto gradiente (saudação) — no escuro o gradiente é CLARO; no claro precisa ser ESCURO senão some. */ [data-design="novo"][data-theme="light"] .el-shiny { background: linear-gradient(110deg, #1b1d18 35%, #5f8268 50%, #1b1d18 65%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; } /* Vidro translúcido era branco (some no fundo claro). No claro: superfície CLARA distinta do fundo creme (era escuro-sutil demais e os cards sumiam — ex.: calculadora #96). */ [data-design="novo"][data-theme="light"] .el-glass { background: rgba(255, 255, 255, 0.66); border-color: rgba(22, 24, 18, 0.09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(22, 24, 18, 0.04); } /* Cards: no claro precisam de SEPARAÇÃO (borda + sombra suave) — branco-sobre-creme some. */ [data-design="novo"][data-theme="light"] .el-surface-card, [data-design="novo"][data-theme="light"] .el-glass-strong { border-color: rgba(22, 24, 18, 0.10); box-shadow: 0 1px 2px rgba(22, 24, 18, 0.05), 0 18px 40px -22px rgba(22, 24, 18, 0.16); } /* === SCROLL escondido em TODAS as páginas (mantém a rolagem, só some a barra) === */ * { scrollbar-width: none !important; -ms-overflow-style: none !important; } *::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } /* === FADE WHILE SCROLL — conteúdo esmaece nas bordas ao rolar (estilo Skiper87) === */ .el-fade-scroll { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 28px), transparent 100%); } /* ⚠️ REMOVIDO o fade AUTOMÁTICO via [style*="overflow..."] (caça ao arrasto, dono 2026-07-17): (a) mask-image em todo scroller = re-raster da lista INTEIRA a cada frame de rolagem (Lenis = muitos frames); (b) seletor de substring em style é re-avaliado a cada mutação inline — e o Framer muta style TODO frame de TODA animação. O fade agora é OPT-IN: adicione a classe .el-fade-scroll na lista. */ /* === LINK ANIMADO no hover (sublinhado limpa da esquerda + seta sobe) — Skiper40 === */ .el-link-row .el-link-label { position: relative; } .el-link-row .el-link-label::after { content: ''; position: absolute; left: 0; bottom: -1.5px; height: 1.5px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .el-link-row:hover .el-link-label::after { transform: scaleX(1); transform-origin: left center; } .el-link-row .el-link-arrow { opacity: 0; transform: translateY(3px); transition: opacity 0.3s ease, transform 0.3s ease; } .el-link-row:hover .el-link-arrow { opacity: 1; transform: translateY(0); } /* footer da sidebar: WhatsApp + avatar + menu de conta (colado embaixo) */ [data-design="novo"] .el-sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: 3px; padding-top: 10px; border-top: 1px solid var(--el-line-soft); position: relative; } [data-design="novo"] .el-sidebar-dot { display: block; width: 9px; height: 9px; border-radius: 999px; } [data-design="novo"] .el-sidebar-avatar { width: 26px; height: 26px; border-radius: 999px; font-size: 11px; background: linear-gradient(135deg, #2f332e, #0a0c0a); border: 1px solid rgba(168, 196, 173, 0.30); display: grid; place-items: center; color: #f4efe4; font-family: var(--font-display); font-weight: 700; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(244, 239, 228, 0.10); } [data-design="novo"] .el-sidebar-menu { position: fixed; left: 14px; bottom: 118px; width: 234px; z-index: 80; background: rgba(18, 21, 27, 0.97); border: 1px solid var(--el-line-strong); border-radius: var(--r-lg); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(244, 239, 228, 0.06), 0 28px 60px -16px rgba(0, 0, 0, 0.7); overflow: hidden; padding: 6px; transform-origin: bottom left; animation: elMenuMorphIn 0.24s cubic-bezier(0.32, 0.72, 0, 1); } @keyframes elMenuMorphIn { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } } [data-design="novo"] .el-sidebar-menu-sep { height: 1px; background: var(--el-line-soft); margin: 6px 4px; } [data-design="novo"] .el-sidebar-menu-head { padding: 11px 12px; border-bottom: 1px solid var(--el-line-soft); margin: -6px -6px 6px; } [data-design="novo"] .el-sidebar-menu-name { font-size: 13.5px; color: #f4efe4; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-design="novo"] .el-sidebar-menu-mail { font-size: 11px; color: var(--el-fg-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-design="novo"] .el-sidebar-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border-radius: var(--r-sm); background: transparent; border: none; color: var(--el-fg-mid); cursor: pointer; font-family: var(--font-ui); font-size: 13px; text-align: left; transition: background 0.18s ease, color 0.18s ease, transform 0.18s cubic-bezier(0.32, 0.72, 0, 1); } [data-design="novo"] .el-sidebar-menu-item:hover { background: rgba(244, 239, 228, 0.05); color: var(--el-fg); transform: translateX(3px); } [data-design="novo"] .el-sidebar-menu-item.is-danger { color: #c4a8a8; } /* No modo novo: a nav do TOPO some (logo/grupos/sub) e o conteúdo desloca pra dar lugar à sidebar (72px colapsada; ela expande POR CIMA, sem reflow). */ [data-design="novo"] .el-topnav-main, [data-design="novo"] .el-topnav-sub, [data-design="novo"] .el-topnav-logo { display: none !important; } /* No modo novo a barra do TOPO some inteira (WhatsApp/avatar foram pra base da sidebar); o conteúdo sobe pro topo e desloca pra direita da sidebar. */ [data-design="novo"] .el-app-header { display: none; } /* PADDING (não margin) de propósito — dois tons de preto (dono 2026-07-16): a máscara do .el-fade-scroll pinta só o border box do stack; com margin-left o box começava em 88px e o wash fixed do ScreenBackdrop era APAGADO na faixa do dock (aparecia o body cru, mais escuro). Com padding o box cobre a tela toda → um preto só, de ponta a ponta. */ /* ⚠️ SEM transition de padding aqui (caça ao arrasto): animar padding do stack = relayout da TELA INTEIRA por frame (com máscara ligada). A regra de hover da .el-sidebar era MORTA (o nav é .el-dock) e foi removida junto. */ [data-design="novo"] .el-screen-stack { padding-left: 88px; top: 0; } /* Cards compactos de add-on (billing): levantam no hover; borda/sombra são inline. */ .el-addon-mini:hover { transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .el-addon-mini:hover { transform: none; } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; /* color-scheme dark: canvas nativo/overscroll/tiles do Chrome ficam ESCUROS — sem isso, frame perdido em transição pisca BRANCO (dono viu, 2026-07-10). */ color-scheme: dark; background: var(--el-bg); color: var(--el-fg); font-family: var(--font-ui); font-feature-settings: 'ss01', 'ss02', 'cv01', 'cv11'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } button { font-family: inherit; } input, textarea, select { font-family: inherit; color: inherit; } /* ===== Type system ===== */ .t-display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.04em; line-height: 0.96; font-style: normal; text-wrap: balance; } /* Hero titles AGRESSIVOS no modo Novo (estilo ELPIS landing): pesado + tracking apertado. Mira SÓ nos títulos de tela (font-size: var(--fs-h1) inline), não nos números do dashboard. !important vence o fontWeight inline de alguns heros (ex.: "Sua agenda" = 600). */ [data-design="novo"] [style*="font-size: var(--fs-h1)"] { font-weight: 800 !important; letter-spacing: -0.045em !important; } .t-display-2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.035em; line-height: 1; } .t-headline { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; } .t-eyebrow { font-family: var(--font-ui); font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; } .t-mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.005em; font-feature-settings: 'tnum', 'zero'; } .el-num { font-feature-settings: 'tnum', 'zero', 'ss01'; font-variant-numeric: tabular-nums; } /* ===== Buttons ===== */ .el-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--el-line); background: var(--el-surface); color: var(--el-fg); font-family: var(--font-ui); font-weight: 500; font-size: 13px; letter-spacing: -0.005em; cursor: pointer; transition: background 220ms cubic-bezier(0.16, 1, 0.3, 1), color 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms cubic-bezier(0.16, 1, 0.3, 1), transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms cubic-bezier(0.16, 1, 0.3, 1); white-space: nowrap; user-select: none; } .el-btn:hover { background: var(--el-surface-2); border-color: var(--el-line-strong); } .el-btn-primary { background: #fff; color: #0a0a0a; border-color: rgba(0, 0, 0, 0.1); font-weight: 600; } .el-btn-primary:hover { background: #f0f0f0; transform: translateY(-1px); box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.55); } .el-btn-ghost { background: transparent; color: rgba(255, 255, 255, 0.75); } .el-btn-ghost:hover { background: var(--el-surface); color: #fff; } .el-btn-dark { background: rgba(0, 0, 0, 0.5); border-color: var(--el-line); } /* ===== Inputs ===== */ .el-input { width: 100%; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--el-line); border-radius: var(--r-md); color: #fff; padding: 12px 14px; font-size: 14px; font-family: var(--font-ui); outline: none; transition: background 200ms, border-color 200ms, box-shadow 200ms, color 200ms; } .el-input::placeholder { color: rgba(255, 255, 255, 0.35); } .el-input:focus { border-color: rgba(168, 196, 173, 0.5); background: rgba(0, 0, 0, 0.5); } /* input "nu": busca inline SEM fundo/borda (vive sobre uma superfície). Texto e placeholder seguem os tokens (flipam no claro/escuro) — não cream-fixo como o .el-input. */ .el-bare-input { background: transparent; border: none; outline: none; color: var(--el-fg); font-family: var(--font-ui); font-size: var(--fs-14, 14px); } .el-bare-input::placeholder { color: var(--el-fg-dim); } /* DS-01 (auditoria #3): foco de teclado VISÍVEL e consistente. Vários elementos tiram o outline (.el-input, botões) e não devolvem nada — quem navega por teclado ficava perdido (a11y). :focus-visible só dispara na navegação por teclado (não no clique do mouse), então NÃO polui o visual no uso normal com mouse/touch. */ a:focus-visible, button:focus-visible, select:focus-visible, textarea:focus-visible, input:not(.el-busca-neo-in):focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible { outline: 2px solid rgba(168, 196, 173, 0.75); outline-offset: 2px; border-radius: var(--r-sm, 6px); /* ⚠️ este border-radius 6px QUADRA elementos redondos no foco (o Chrome marca :focus-visible em campo de texto até no clique) — a busca neumórfica ficou de fora (a expansão + relevo interno já são o indicador de foco dela). */ } /* ===== Badge ===== */ .el-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--el-line); color: rgba(255, 255, 255, 0.75); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; } /* ===== Glass surfaces ===== */ .el-glass { background: rgba(255, 255, 255, 0.025); border: 1px solid var(--el-line); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); /* Elevação leve: a superfície sobe um pouco da noite (realce de luz no topo). */ box-shadow: var(--el-elev-1); } .el-glass-strong { /* Superfície elevada da noite: opaca-esverdeada + sombra estrutural elev-2 (grande, suave, baixa opacidade) + luz de 1px no topo. Sobe de verdade. */ background: rgba(10, 12, 10, 0.72); border: 1px solid var(--el-line); backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4); box-shadow: var(--el-elev-2); } /* ===== Superfície elevada estrutural (a noite que sobe) ===== Substitui o vidro plano onde queremos hierarquia física real. */ .el-surface-card { background: var(--el-bg-elev); border: 1px solid var(--el-line); box-shadow: var(--el-elev-2); } .el-elev-1 { box-shadow: var(--el-elev-1); } .el-elev-2 { box-shadow: var(--el-elev-2); } .el-elev-3 { box-shadow: var(--el-elev-3); } /* ===== Aurora cinematográfica do Oráculo ===== A noite glow-a faintly green atrás do hero — respira e deriva devagar. Sage como atmosfera (não elemento sólido); a régua do broto continua valendo pros elementos de UI. Parallax no scroll é aplicado via transform (JS). */ @keyframes elAuroraDrift { 0% { transform: translate3d(-3%, -2%, 0) scale(1.05); opacity: 0.7; } 50% { transform: translate3d(5%, 4%, 0) scale(1.18); opacity: 1; } 100% { transform: translate3d(-3%, -2%, 0) scale(1.05); opacity: 0.7; } } .el-aurora { position: absolute; inset: -30% -12% auto -12%; height: 165%; background: radial-gradient(56% 66% at 26% 16%, rgba(168,196,173,0.34), transparent 62%), radial-gradient(46% 58% at 84% 30%, rgba(168,196,173,0.16), transparent 66%), radial-gradient(40% 50% at 60% 0%, rgba(242,234,211,0.06), transparent 60%); filter: blur(46px); animation: elAuroraDrift 18s ease-in-out infinite; pointer-events: none; will-change: transform, opacity; } /* Faixa de instrumentos (pulso da operação) — divisor hairline entre leituras */ .el-instr-sep { width: 1px; align-self: stretch; background: var(--el-line); flex-shrink: 0; } /* Seletor de lista (avatar vira tick): tátil, com glow sage quando marcado. Usado em Leads e Disparo pra seleção em massa (mesma linguagem). */ .el-pick { transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), border-color 180ms ease, box-shadow 180ms ease; } .el-pick:active { transform: scale(0.94); } .el-pick.is-on { box-shadow: var(--el-glow-vivo); } @media (hover: hover) and (pointer: fine) { .el-pick:not(.is-on):hover { border-color: rgba(168, 196, 173, 0.55) !important; box-shadow: 0 0 16px -5px rgba(168, 196, 173, 0.45); } } /* Linha de lista selecionável: hover desliza levemente + realça. */ .el-pick-row { transition: background 180ms ease, transform 180ms cubic-bezier(0.23,1,0.32,1); } @media (hover: hover) and (pointer: fine) { .el-pick-row:hover { transform: translateX(3px); } } /* Ação por-linha (ex: "já falei" no disparo): escondida, revela no hover da linha. Antes aparecia em TODAS as linhas (poluição). No touch (sem hover) fica discreta. */ .el-row-action { opacity: 0; transition: opacity 160ms ease; } @media (hover: hover) and (pointer: fine) { .el-pick-row:hover .el-row-action, .el-row-action:focus-visible { opacity: 1; } } @media (hover: none) { .el-row-action { opacity: 0.55; } } @media (prefers-reduced-motion: reduce) { .el-aurora { animation: none; } } /* ===== Cursor-follow glow card ===== */ .el-glow { position: relative; overflow: hidden; } .el-glow::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.03), transparent 42%); opacity: 0; transition: opacity 280ms; pointer-events: none; } .el-glow:hover::before { opacity: 1; } /* ===== Arrow link ===== */ .el-arrow-link { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.85); text-decoration: none; cursor: pointer; transition: gap 220ms; } .el-arrow-link:hover { gap: 10px; color: #fff; } /* ===== Animations ===== */ @keyframes elKenBurns { 0% { transform: scale(1.05) translate(0, 0); } 100% { transform: scale(1.18) translate(-2%, -1%); } } @keyframes elPulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } @keyframes elPing { 0% { transform: scale(0.6); opacity: 0.7; } 80%, 100% { transform: scale(2.4); opacity: 0; } } @keyframes elFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes elSlideIn { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes elScan { 0%, 100% { top: 30px; opacity: 0; } 10% { opacity: 1; } 50% { top: calc(100% - 32px); opacity: 1; } 60% { opacity: 0; } } /* ─── Header global (TopBar) ───────────────────────────────────────────── Fica fixo no topo, fora do swipe. So um header pra toda a aplicacao. */ :root { --header-h: 66px; } .el-app-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); border-bottom: 1px solid var(--el-line); } /* Remove o sticky duplicado do TopBar interno (era 'sticky top:0' antes) */ .el-app-header > header { position: static !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: none !important; } /* ─── Swipe entre abas (estilo celular) ───────────────────────────────────── Cada tela vira um "card" fixo que ocupa a area ABAIXO DO HEADER e durante a transicao a antiga sai pro lado enquanto a nova entra pelo lado oposto. "forward" = nova vem da direita, antiga sai pra esquerda. "backward" = nova vem da esquerda, antiga sai pra direita. */ /* Troca de aba em curso (classe no , ligada pelo app.jsx enquanto o card-stack voa): o VIDRO vira tinta sólida — backdrop-filter re-amostra a cada frame sob transform e era o custo nº1 do "arrastado"; em movimento o olho não sente falta do blur. SEM gate (Legacy também). */ .el-em-transicao .el-screen-stack, .el-em-transicao .el-screen-stack * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .el-em-transicao .el-screen-stack { pointer-events: none; } .el-screen-stack { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; overflow-y: auto; overflow-x: hidden; /* ⚠️ SEM will-change/transform fixo aqui (regra antiga, violada e re-caçada 2026-07-10): promove o scroller de TELA INTEIRA a camada permanente → re-raster nas transições (arrastado) + tile não-pintado = flash claro. */ scrollbar-gutter: stable; /* opaco: na troca (card stack) a tela que sobe cobre a que recua atrás */ background: var(--el-bg); } /* Login não tem o header global do app — a tela ocupa o topo inteiro (sem a faixa preta de 84px reservada pro header). O login tem o próprio header glass. */ .el-screen-stack.is-login { top: 0; } /* ============================================================================ MOBILE — "só pra não quebrar" (≤760px). NÃO é um layout mobile-first; é uma degradação graciosa pra um corretor que abrir o link no celular: nada de overflow horizontal, conteúdo empilha e fica legível. Mira os estilos inline (grids/flex) sem precisar reescrever cada tela. ========================================================================== */ /* Bolinhas macOS (vermelho/amarelo/verde): o glyph aparece no HOVER do cluster. Via CSS :hover (não JS) — robusto contra iframe de PDF que rouba o mouseleave e "congela" o ícone. O cluster leva a classe .el-mac-dots; os glyphs ficam sempre no DOM, e o CSS controla a opacidade. */ .el-mac-dots button > svg, .el-mac-dots button > span { opacity: 0; transition: opacity 130ms ease; } .el-mac-dots:hover button:not(:disabled) > svg, .el-mac-dots:hover button:not(:disabled) > span { opacity: 1; } /* Barra de navegação no mobile: rola na horizontal, sem mostrar scrollbar (a nav nunca empilha nem empurra o avatar pra fora da tela). */ .el-nav-scroll { scrollbar-width: none; -ms-overflow-style: none; } .el-nav-scroll::-webkit-scrollbar { display: none; } .el-nav-scroll nav { flex-wrap: nowrap !important; } /* Grafo de fluxo do dashboard (PipelineFlowGraph): em tela estreita a jornada rola na horizontal, sem mostrar scrollbar (a metáfora linear continua limpa). */ .el-pipeflow-row::-webkit-scrollbar { display: none; } /* ── BENTO FIXO do dashboard — TAMANHOS NOMEADOS (cada nome = UM footprint, resolve "G com 2 medidas") ── CSS Grid de 12 col. Cada tamanho tem largura (col) E altura próprias e ÚNICAS: szHero = 8col × alto · szTall = 4col × alto (par: 8+4=12, mesma altura) szG = 8col × médio · szP = 4col × médio (par: 8+4=12, mesma altura) szM = 6col × médio (par M+M = 12) · szWide = 12col × baixo (faixa) "G" é SEMPRE 8×médio; o card largo-e-alto é "Hero", não um "G esticado". Linhas pareadas alinham. Altura é min (cresce com conteúdo, nunca corta). Mobile: tudo vira coluna. */ .el-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; align-items: stretch; } .el-bento-cell { display: flex; min-width: 0; position: relative; } .el-bento-cell > * { flex: 1; min-width: 0; } .el-bento-cell.szHero { grid-column: span 8; min-height: 330px; } .el-bento-cell.szTall { grid-column: span 4; min-height: 330px; } .el-bento-cell.szG { grid-column: span 8; min-height: 214px; } .el-bento-cell.szM { grid-column: span 6; min-height: 214px; } .el-bento-cell.szP { grid-column: span 4; min-height: 214px; } .el-bento-cell.szWide { grid-column: span 12; min-height: 150px; } @media (max-width: 980px) { .el-bento-cell { grid-column: 1 / -1 !important; min-height: 0 !important; } } /* ── BENTO DE TELA CHEIA (layout do dono, sem scroll) — grid-template-areas ── Herói grande em cima-esq (mira), trilho ALTO na direita (conv), centro empilhado (jorn/funil), linha do meio (taxa/chart/perf), rodapé (camp/quem). Ocupa a viewport. */ [data-design="novo"] .el-bento--screen { /* linha 3 (stats) AFINADA (dono 2026-07-10): a régua de números não precisa de 1fr — a folga vai pro herói (globo-teia com mais presença). */ grid-template-rows: 1.18fr 1.18fr 0.5fr 1fr 1fr 1fr; grid-template-areas: "mira mira mira mira mira mira insight insight insight canais canais canais" "mira mira mira mira mira mira insight insight insight canais canais canais" "stats stats stats stats stats stats stats stats stats canais canais canais" "comissao comissao comissao comissao calen calen calen calen calen aquis aquis aquis" "alguma alguma alguma alguma calen calen calen calen calen aquis aquis aquis" "alguma alguma alguma alguma calen calen calen calen calen aquis aquis aquis"; gap: 12px; height: calc(100vh - 24px); } .el-bento--screen .el-bento-cell { min-height: 0; overflow: hidden; } .el-bento--screen .el-bento-cell > * { height: 100%; overflow: hidden; } /* o card herói (mira) pode mostrar o feixe; o trilho de conversas rola por dentro */ .el-bento--screen .el-bento-cell.ar-conv .el-relpanel-body, .el-bento--screen .el-bento-cell.ar-conv > * { overflow: hidden; } @media (max-width: 980px) { [data-design="novo"] .el-bento--screen { grid-template-areas: none; grid-template-rows: none; height: auto; } .el-bento--screen .el-bento-cell { overflow: visible; } .el-bento--screen .el-bento-cell > * { height: auto; } } /* ── GRADE DE DESENVOLVIMENTO (Shift+G) — só pra visualizar tamanhos, TEMP ── */ .el-bento.el-devgrid .el-bento-cell { outline: 1px dashed rgba(168,196,173,.45); outline-offset: -1px; border-radius: 18px; } .el-devgrid-badge { position: absolute; top: 8px; left: 8px; z-index: 7; pointer-events: none; font: 700 10.5px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .01em; color: #0b0d10; background: #a8c4ad; border-radius: 7px; padding: 4px 7px; box-shadow: 0 2px 10px -2px rgba(0,0,0,.7); } .el-devgrid-hint { position: fixed; bottom: 16px; right: 18px; z-index: 50; pointer-events: none; font-size: 11.5px; color: #0b0d10; background: #a8c4ad; border-radius: 999px; padding: 7px 13px; box-shadow: 0 8px 24px -8px rgba(0,0,0,.7); } @media (max-width: 768px) { /* Mata a barra/scroll horizontal que corta o conteúdo no celular. Fica DENTRO do media query (não toca o desktop) e mira o , não o , pra não interferir no position: fixed do header / .el-screen-stack. */ html { overflow-x: hidden; } body { overflow-x: hidden; max-width: 100vw; } /* Multi-coluna (hero do login, zonas do Oráculo, 3 painéis do Disparo, 2 colunas do Inbox, tabela de Leads…) passa a empilhar. */ [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* A nav rola na horizontal — todas as abas ficam alcançáveis deslizando, sem empilhar junto com o resto e sem empurrar o avatar pra fora da tela. */ .el-nav-scroll { overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; } .el-nav-scroll::-webkit-scrollbar { display: none; } /* Linhas flex (botões do hero, chips, ações) quebram pra próxima linha em vez de serem cortadas na borda. */ [style*="display: flex"] { flex-wrap: wrap; } /* Telas de altura fixa (ex.: Disparo = 100vh, overflow hidden) passam a fluir e rolar a página, senão os painéis empilhados seriam cortados. */ main[style*="100vh"] { height: auto !important; overflow: visible !important; } [style*="height: 100%"] { height: auto !important; } /* Respiro lateral menor + nada estoura a largura. */ main { padding-left: 16px !important; padding-right: 16px !important; } img, video { max-width: 100%; height: auto; } } @keyframes elScreenZoomIn { from { opacity: 0; transform: scale(0.975); } to { opacity: 1; transform: scale(1); } } @keyframes elScreenZoomOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.015); } } .el-screen-enter-forward, .el-screen-enter-backward { animation: elScreenZoomIn 320ms cubic-bezier(0.32, 0.72, 0, 1) both; z-index: 2; } .el-screen-leave-forward, .el-screen-leave-backward { animation: elScreenZoomOut 300ms ease-out both; z-index: 1; } /* Fade in inicial pra primeira tela (sem swipe) — bem rapido */ @keyframes elScreenIn { from { opacity: 0; } to { opacity: 1; } } .el-screen-fade { animation: elScreenIn 200ms ease-out; } /* Preloader: logo Elpis surge com blur clearing + scale */ @keyframes elPreloaderIn { 0% { opacity: 0; transform: scale(0.96) translateY(8px); filter: blur(12px); } 100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); } } /* Linha de progresso do preloader — gradient deslizando lateralmente */ @keyframes elPreloaderShine { 0% { transform: translateX(-100%); } 100% { transform: translateX(450%); } } /* Shimmer pra skeletons (gradient deslizando) — mais polido que pulse simples */ @keyframes elShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .el-skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 100%); background-size: 200% 100%; animation: elShimmer 1.6s linear infinite; border-radius: 6px; } /* Reveal de conteúdo: o dado real entra com fade suave quando substitui o skeleton — mascara o "pop-in". Só opacity (GPU), ease-out forte. */ @keyframes elFadeIn { from { opacity: 0; } to { opacity: 1; } } .el-fade-in { animation: elFadeIn 260ms cubic-bezier(0.23, 1, 0.32, 1) both; } @media (prefers-reduced-motion: reduce) { .el-fade-in { animation-duration: 1ms; } .el-skeleton { animation: none; } } @keyframes elReveal { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } .el-reveal { opacity: 0; } .el-reveal.is-in { animation: elReveal 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } /* Scrollbars */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.16); } /* Selection */ ::selection { background: rgba(168, 196, 173, 0.4); color: #fff; } /* === Preview de mídia (Quick Look) === */ @keyframes elpisPreviewOverlayIn { from { opacity: 0; } to { opacity: 1; } } @keyframes elpisPreviewOverlayOut { from { opacity: 1; } to { opacity: 0; } } @keyframes elpisPreviewCardIn { from { opacity: 0; transform: scale(0.965) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes elpisPreviewCardOut { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.97) translateY(6px); } } .elpis-preview-overlay-in { animation: elpisPreviewOverlayIn 220ms cubic-bezier(0.16, 1, 0.3, 1) both; } .elpis-preview-overlay-out { animation: elpisPreviewOverlayOut 180ms cubic-bezier(0.4, 0, 0.85, 0.32) both; } .elpis-preview-card-in { animation: elpisPreviewCardIn 260ms cubic-bezier(0.16, 1, 0.3, 1) both; } .elpis-preview-card-out { animation: elpisPreviewCardOut 180ms cubic-bezier(0.4, 0, 0.85, 0.32) both; } /* Bolha de mensagem ENTRANDO — entrada suave (escala + leve blur "gooey fraco"), não seca. Roda uma vez quando a mensagem aparece (mount). === */ @keyframes elMsgIn { from { opacity: 0; transform: scale(0.92) translateY(8px); filter: blur(2.5px); } to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); } } .el-msg-in { animation: elMsgIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; } /* Typing — 3 pontinhos pulsando (indicador "digitando…") */ @keyframes elTypingDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.35; } 30% { transform: translateY(-4px); opacity: 1; } } .el-typing-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--el-fg-mid); animation: elTypingDot 1.2s infinite ease-in-out; } /* === RIPPLE — bolinha verde com efeito de ONDA: anéis concêntricos pulsando em cascata (stagger) + núcleo sólido no centro. Status do WhatsApp no dock. Cor via --ripple-color (verde on / âmbar QR / vermelho off). Sem logo. inset = centrado/simétrico. === */ .el-ripple { position: relative; aspect-ratio: 1; flex-shrink: 0; } .el-ripple .el-ripple-box { position: absolute; border-radius: 50%; background: color-mix(in srgb, var(--ripple-color, #30d158) 15%, transparent); border-top: 1px solid var(--ripple-color, #30d158); box-shadow: rgba(0,0,0,0.35) 0 3px 5px -2px; animation: elRipple var(--ripple-dur, 2.2s) infinite ease-in-out; } .el-ripple .el-ripple-box:nth-child(1) { inset: 38%; z-index: 5; background: var(--ripple-color, #30d158); border-top-color: var(--ripple-color, #30d158); box-shadow: 0 0 6px color-mix(in srgb, var(--ripple-color, #30d158) 60%, transparent); } .el-ripple .el-ripple-box:nth-child(2) { inset: 28%; z-index: 4; border-top-color: color-mix(in srgb, var(--ripple-color, #30d158) 80%, transparent); animation-delay: 0.18s; } .el-ripple .el-ripple-box:nth-child(3) { inset: 18%; z-index: 3; border-top-color: color-mix(in srgb, var(--ripple-color, #30d158) 60%, transparent); animation-delay: 0.36s; } .el-ripple .el-ripple-box:nth-child(4) { inset: 9%; z-index: 2; border-top-color: color-mix(in srgb, var(--ripple-color, #30d158) 40%, transparent); animation-delay: 0.54s; } .el-ripple .el-ripple-box:nth-child(5) { inset: 0%; z-index: 1; border-top-color: color-mix(in srgb, var(--ripple-color, #30d158) 24%, transparent); animation-delay: 0.72s; } @keyframes elRipple { 0%, 100% { transform: scale(1); box-shadow: rgba(0,0,0,0.35) 0 3px 5px -2px; } 50% { transform: scale(1.24); box-shadow: rgba(0,0,0,0.35) 0 7px 8px -2px; } } /* === CALENDÁRIO "Marcar visita" — grade de dias com seleção animada (verde da marca), hover que levanta, tap que afunda, ponto de disponibilidade. === */ .el-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .el-cal-dow { text-align: center; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: var(--el-fg-dim); padding: 6px 0; border-radius: 8px; background: var(--el-line-soft); } .el-cal-day { position: relative; aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--el-line); background: rgba(10,12,10,0.35); color: var(--el-fg-mid); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; transition: transform 160ms cubic-bezier(0.22,1,0.36,1), border-color 160ms ease, background 200ms ease, box-shadow 220ms ease, color 160ms ease; } .el-cal-day:hover:not(.muted):not(.sel) { border-color: var(--el-accent-line); transform: translateY(-1px); color: var(--el-cream); } .el-cal-day:active:not(.muted) { transform: scale(0.93); } .el-cal-day.muted { opacity: 0.28; cursor: default; } .el-cal-day.sel { border-color: var(--el-accent); background: var(--el-accent-soft); color: var(--el-accent); box-shadow: 0 0 0 1px var(--el-accent-line), 0 8px 20px -8px var(--el-accent); transform: translateY(-1px); } .el-cal-day .el-cal-dot { position: absolute; top: 5px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--el-accent); box-shadow: 0 0 5px var(--el-accent); } .el-cal-nav { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 9px; border: 1px solid var(--el-line); background: transparent; color: var(--el-fg-mid); cursor: pointer; transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; } .el-cal-nav:hover { border-color: var(--el-accent-line); color: var(--el-accent); background: var(--el-accent-soft); } .el-cal-slot { padding: 7px 12px; border-radius: var(--r-pill); font-size: var(--fs-12); font-weight: 600; cursor: pointer; border: 1px solid var(--el-line); background: transparent; color: var(--el-fg-mid); transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease; } .el-cal-slot:hover { border-color: var(--el-accent-line); color: var(--el-cream); transform: translateY(-1px); } .el-cal-slot.sel { border-color: var(--el-accent); background: var(--el-accent-soft); color: var(--el-accent); } /* === CALENDÁRIO da aba Agenda (estilo SubscriptionCalendar) — headers em PÍLULA, células QUADRADAS GRANDES com número no topo + indicador de visita, dia selecionado em VERDE que CRESCE (expansão tipo card da disponibilidade). Paleta da marca. === */ .el-subcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } .el-subcal-dow { text-align: center; padding: 9px 0; border-radius: 999px; background: var(--el-line-soft); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--el-fg-mid); } .el-subcal-day { position: relative; height: clamp(52px, 8.4vh, 84px); overflow: hidden; border-radius: 15px; border: 1px solid var(--el-line); background: rgba(255,255,255,0.02); padding: 9px 12px; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; color: var(--el-cream); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; transition: border-color 180ms ease, color 180ms ease; } .el-subcal-day.empty { background: transparent; border-color: transparent; cursor: default; } .el-subcal-day:hover:not(.muted):not(.sel):not(.empty) { border-color: var(--el-accent-line); transform: translateY(-2px); } .el-subcal-day:active:not(.muted):not(.empty) { transform: scale(0.97); } .el-subcal-day.muted { color: var(--el-fg-faint); opacity: 0.38; cursor: default; } .el-subcal-day.today { border-color: var(--el-accent-line); } .el-subcal-day.sel { color: #25312a; border-color: transparent; z-index: 2; } .el-subcal-day.sel .el-subcal-vis { color: #2a382e; } .el-subcal-day.sel .el-subcal-ind { background: #2a382e; box-shadow: none; } .el-subcal-day > span { position: relative; z-index: 1; } /* PÍLULA PASTEL que DESLIZA de um dia pro outro (Framer Motion layoutId — efeito líquido). inset deixa uma folga, virando uma "pílula" dentro da célula. */ .el-gooey-blob { position: absolute; inset: 4px; z-index: 0; border-radius: 11px; background: var(--el-cal-pastel, #c6dcc2); } .el-subcal-ind { position: absolute; top: 10px; right: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--el-accent); box-shadow: 0 0 7px var(--el-accent); z-index: 1; } .el-subcal-vis { margin-top: auto; font-size: 11px; font-weight: 700; color: var(--el-accent); letter-spacing: 0.02em; } .el-subcal-add { width: 52px; height: 34px; border-radius: 999px; background: var(--el-accent); color: var(--el-bg); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 18px var(--el-accent-line); transition: transform 160ms ease; } .el-subcal-add:hover { transform: scale(1.06); } .el-subcal-add:active { transform: scale(0.94); } /* Toast: feedback breve no canto sup-direito */ @keyframes elpisToastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes elpisToastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } } .elpis-toast-in { animation: elpisToastIn 240ms cubic-bezier(0.16, 1, 0.3, 1) both; } .elpis-toast-out { animation: elpisToastOut 200ms cubic-bezier(0.4, 0, 0.85, 0.32) both; } /* Word (docx-preview): mantém o "papel" branco do documento legível no preview escuro. */ .elpis-docx { background: #fff; color: #1a241c; border-radius: 6px; } .elpis-docx .docx-wrapper { padding: 0; background: transparent; } .elpis-docx .docx { margin: 0 auto; } /* Excel (SheetJS sheet_to_html): tabela on-brand no dark theme. */ .elpis-xlsx table { border-collapse: collapse; font-family: 'Schibsted Grotesk', system-ui, sans-serif; font-size: 12.5px; color: #fff; } .elpis-xlsx th, .elpis-xlsx td { border: 1px solid rgba(255, 255, 255, 0.08); padding: 7px 11px; background: rgba(255, 255, 255, 0.02); white-space: nowrap; font-variant-numeric: tabular-nums; } .elpis-xlsx tr:nth-child(even) td { background: rgba(255, 255, 255, 0.035); } .elpis-xlsx tr:hover td { background: rgba(168, 196, 173, 0.07); } .elpis-xlsx td[data-t="n"] { text-align: right; color: #c6dac9; } .elpis-xlsx td[data-t="s"] { color: #fff; } /* ═══════════════════ CAMADA FLUIDA (2026-07-07) ═══════════════════ Pedido do dono: "nada deve ser seco... transição LÍQUIDA entre as coisas, fluido" (o princípio de 06-25: vivo + soft + morfando). Regras GLOBAIS do modo novo — pegam TAMBÉM os controles com estilo inline (chips, toggles), que não têm :hover próprio: • todo botão respira: hover ERGUE com brilho, press AFUNDA com mola (cubic-bezier com overshoot = a sensação "líquida"); • toda barra de escrita EXPANDE no foco (anel sage que floresce + leve crescimento) e RETRAI ao sair. O dock fica de fora (tem magnetismo/gooey próprio via JS — não brigar). .el-grafo-no TAMBÉM (2026-07-11): são os nós de grafo dirigidos por FÍSICA (rAF muda o transform a cada frame — a transição perseguindo o alvo deixa o nó eternamente ~70% do caminho e ele DESCOLA da aresta do SVG). */ [data-design="novo"] button:not(.el-dock *):not(.el-grafo-no) { /* !important: MUITOS controles têm `transition` inline (estilo React) que venceria esta regra — e o efeito morreria (foi o "não vi diferença" do dono). */ transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.34s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease, opacity 0.22s ease !important; } [data-design="novo"] button:not(.el-dock *):not(.el-grafo-no):not(.el-estatico):not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.6), 0 0 16px -6px var(--el-accent-soft); } [data-design="novo"] button:not(.el-dock *):not(.el-grafo-no):not(.el-estatico):not(:disabled):active { transform: translateY(0.5px) scale(0.94); transition-duration: 0.11s; /* o afundar é rápido; o voltar usa a mola */ } /* .el-estatico (2026-07-14): botão que NÃO eleva no hover nem afunda (translateY) e mantém a MESMA COR. O movimento vem de DENTRO (ex.: o "+" do anexo que GIRA pra "×"). Ganha só um "sling" tátil no clique: encolhe rápido e VOLTA na mola (o transition base 1364 tem overshoot cubic-bezier(...1.56...) → passa de 1 e assenta = o "aumenta depois"). Dono: "diminui e aumenta depois, bem leve e bem rápido, mais imersivo". */ [data-design="novo"] button.el-estatico:not(:disabled):active { transform: scale(0.9); transition-duration: 0.09s; /* encolhe rápido; a volta usa a mola do transition base (overshoot) */ } /* Barras de escrita: florescem no foco, retraem no blur. O !important vence o border inline dos componentes (estilo inline não anima foco sozinho). */ [data-design="novo"] .el-input, [data-design="novo"] textarea, [data-design="novo"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.el-busca-globo):not(.el-busca-neo-in) { transition: border-color 0.22s ease, background-color 0.22s ease, box-shadow 0.38s cubic-bezier(0.16, 1, 0.3, 1), transform 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* REGRA GERAL (dono, 2026-07-09): foco de MOUSE nunca ganha halo/glow verde — só a borda acende. (Já tinha incomodado mais de uma vez; o foco de TECLADO continua visível via :focus-visible, que é a11y e não dispara no clique.) */ [data-design="novo"] .el-input:focus, [data-design="novo"] textarea:focus, [data-design="novo"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.el-busca-globo):not(.el-busca-neo-in):focus { border-color: var(--el-accent-line) !important; box-shadow: none; } /* ── BUSCA NEUMÓRFICA (asset canônico do dono, 2026-07-11) — bolinha 40px com a lupa DENTRO à esquerda; expande no foco e FICA aberta enquanto tem texto (truque required + :not(:invalid)); relevo pra fora fechada, pra dentro aberta. Componente: window.ElpisBuscaNeo (elpis-base). Vale pra TODAS as áreas de busca do produto. Variante .esq ancora na DIREITA e cresce pra esquerda (a lupa viaja com a borda do pill) — Cérebro/Oráculo usam. ── */ .el-busca-neo { position: relative; --neo-size: 40px; --neo-aberta: 200px; color: #fff; height: var(--neo-size); flex-shrink: 0; } .el-busca-neo-in { /* padding SÓ à esquerda (exato ao asset): com border-box, qualquer padding direito estoura a largura fechada e o círculo vira pílula com calombo */ padding: 0 0 0 var(--neo-size); height: var(--neo-size); border: none; font-size: calc(var(--neo-size) * 0.38); color: var(--el-cream); outline: none; width: var(--neo-size); transition: all ease 0.3s; background-color: #191A1E; box-sizing: border-box; font-family: inherit; box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e; border-radius: 50px; cursor: pointer; } .el-busca-neo-in::placeholder { color: var(--el-fg-dim); } .el-busca-neo-in:focus, .el-busca-neo-in:not(:invalid) { width: var(--neo-aberta); cursor: text; box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 1.5px 1.5px 3px #0e0e0e, inset -1.5px -1.5px 3px #5f5e5e; } .el-busca-neo-ico { position: absolute; width: var(--neo-size); height: var(--neo-size); top: 0; left: 0; padding: calc(var(--neo-size) * 0.25); box-sizing: border-box; pointer-events: none; color: rgba(244, 239, 228, 0.6); /* lupa SUAVE (dono: "branca demais") */ transition: all ease 0.3s; } .el-busca-neo-ico svg { width: 100%; height: 100%; display: block; } /* variante ESQUERDA: o container ocupa só a bolinha; o input ancora na direita e cresce por cima do espaço vazio; a lupa acompanha a borda esquerda. */ .el-busca-neo.esq { width: var(--neo-size); } .el-busca-neo.esq .el-busca-neo-in { position: absolute; right: 0; top: 0; } .el-busca-neo.esq .el-busca-neo-ico { left: auto; right: 0; } .el-busca-neo.esq .el-busca-neo-in:focus ~ .el-busca-neo-ico, .el-busca-neo.esq .el-busca-neo-in:not(:invalid) ~ .el-busca-neo-ico { right: calc(var(--neo-aberta) - var(--neo-size)); } /* ── LOADER DOMINÓS (asset do dono, 2026-07-11): peças caindo em cascata. Componente: window.ElpisLoaderDominos. Usar em toda espera visível. ── */ .el-dominos { position: relative; width: 110px; height: 60px; } .el-dominos span { position: absolute; top: 50%; left: var(--dl, 10px); width: 35px; height: 7px; background: #f4efe4; animation: elDominos 1s ease infinite; box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.9); } .el-dominos span:nth-child(1) { --dl: 80px; animation-delay: 0.125s; } .el-dominos span:nth-child(2) { --dl: 70px; animation-delay: 0.3s; } .el-dominos span:nth-child(3) { --dl: 60px; animation-delay: 0.425s; } .el-dominos span:nth-child(4) { --dl: 50px; animation-delay: 0.54s; } .el-dominos span:nth-child(5) { --dl: 40px; animation-delay: 0.665s; } .el-dominos span:nth-child(6) { --dl: 30px; animation-delay: 0.79s; } .el-dominos span:nth-child(7) { --dl: 20px; animation-delay: 0.915s; } .el-dominos span:nth-child(8) { --dl: 10px; } @keyframes elDominos { 50% { opacity: 0.7; } 75% { transform: rotate(90deg); } 80% { opacity: 1; } } /* Acessibilidade: quem pede menos movimento, recebe menos movimento. */ @media (prefers-reduced-motion: reduce) { [data-design="novo"] button:not(.el-dock *), [data-design="novo"] .el-input, [data-design="novo"] textarea, [data-design="novo"] input { transition: none !important; } /* :not(.el-grafo-no) também aqui (auditoria 2026-07-13): sem a exclusão, o transform:none teleportava os nós dos globos (posicionados por style inline) pro centro-âncora a cada hover em quem tem "reduzir movimento" ligado. */ [data-design="novo"] button:not(.el-dock *):not(.el-grafo-no):hover, [data-design="novo"] button:not(.el-dock *):not(.el-grafo-no):active, [data-design="novo"] .el-input:focus, [data-design="novo"] textarea:focus { transform: none !important; } } /* Entrada dos painéis do Cérebro (nota E editor) — global porque o editor e a nota nunca coexistem, então o @keyframes inline de um sumia pro outro. */ @keyframes cerebroNotaEntra { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } } /* ═══ LIXEIRA (dono 2026-07-14): círculo FIXO — NÃO expande, NÃO empurra os vizinhos. No hover a TAMPA abre (e fecha ao sair), tudo CONTIDO no círculo. Só troca a cor. Uso: ═══ */ [data-design="novo"] .el-trash-btn { position: relative; width: 34px; height: 34px; border-radius: 50%; background: rgb(20, 20, 20); border: 1px solid var(--el-line-soft); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; padding: 0; transition: background-color 0.22s ease, border-color 0.22s ease; } [data-design="novo"] .el-trash-btn svg { color: #fff; overflow: visible; } [data-design="novo"] .el-trash-btn .el-trash-lid { transform-origin: 4px 6.5px; /* pivô na ponta ESQUERDA da tampa (barra em y≈6-7) */ transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); } [data-design="novo"] .el-trash-btn:hover { background: rgb(214, 58, 58); border-color: transparent; } [data-design="novo"] .el-trash-btn:hover .el-trash-lid { transform: rotate(-24deg) translateY(-0.5px); } @media (prefers-reduced-motion: reduce) { [data-design="novo"] .el-trash-btn .el-trash-lid { transition: none !important; } } /* GooeyBusca: dentro do filtro goo, sombra/lift do hover viram artefato — a pílula fica quieta. */ [data-design="novo"] .el-goo-busca-pill:hover { transform: none !important; box-shadow: none !important; } /* GooeyBusca: o ✕ AZUL nativo do WebKit (search-cancel) foge da identidade — fora. */ [data-design="novo"] input[type="search"]::-webkit-search-cancel-button, [data-design="novo"] input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; } /* Menus/dropdowns: entrada LÍQUIDA (pop com mola + blur-in — params das referências). */ [data-design="novo"] .el-menu-pop { transform-origin: top center; animation: elMenuPop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes elMenuPop { /* SEM filter:blur — borrava bordas/texto do menu inteiro ("blur estranho", dono). */ from { opacity: 0; transform: translateY(-7px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } } /* DERRAME líquido do dropdown (o painel escorre da gota-ponte pelo filtro goo). */ [data-design="novo"] .el-menu-derrame { transform-origin: top center; animation: elMenuDerrame 0.5s cubic-bezier(0.3, 1.25, 0.5, 1) both; } @keyframes elMenuDerrame { from { transform: scaleY(0.12) scaleX(0.72); } to { transform: scale(1); } } [data-design="novo"] .el-menu-conteudo { animation: elMenuConteudo 0.32s ease-out 0.1s both; } @keyframes elMenuConteudo { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { [data-design="novo"] .el-menu-derrame, [data-design="novo"] .el-menu-conteudo { animation: none; } } @media (prefers-reduced-motion: reduce) { [data-design="novo"] .el-menu-pop { animation: none; } } /* Inputs EMBUTIDOS em pílulas que já morfam (caneta-nomear, busca goo): o anel de foco da camada fluida vazava DENTRO da pílula ("pílula dentro da pílula", dono). A pílula-mãe já sinaliza o foco; o input interno fica nu. */ [data-design="novo"] input.el-nu:focus { box-shadow: none !important; border-color: transparent !important; transform: none !important; } /* ═══ LIQUID SWITCH (referência liquid-3 do dono, invertida pro dark) ═══ A gota ESCURA atravessa o trilho claro derretendo (blur+contrast = metaball). Inversão: trilho claro + gota/halo PRETOS + mix-blend LIGHTEN → o halo some no fundo escuro (na referência era branco+darken pra página clara). O contrast(18) força quase-P&B — por isso o trilho é branco, não cream (limitação da técnica). */ [data-design="novo"] .el-liquid-sw { --tempo: 0.6s; appearance: none; -webkit-appearance: none; position: relative; cursor: pointer; flex-shrink: 0; width: 46px; aspect-ratio: 2 / 1; border-radius: 999px; margin: 0; background: #fff; box-shadow: 0 0 0 12px #000; filter: blur(4px) contrast(18); mix-blend-mode: lighten; transform: translateX(0.25px); transition: transform var(--tempo) cubic-bezier(0.75, 0, 0.75, 50); overflow: hidden; } [data-design="novo"] .el-liquid-sw::before { content: ""; position: absolute; width: 200%; height: 100%; left: 50%; top: 50%; transform: translate(-25%, -50%); background: radial-gradient(closest-side circle at 12.5% 50%, #000 50%, #0000 0), radial-gradient(closest-side circle at 87.5% 50%, #000 50%, #0000 0); transition: transform var(--tempo) cubic-bezier(0.75, 0, 0.75, 1.3); } [data-design="novo"] .el-liquid-sw:checked { transform: translateX(-0.25px); } [data-design="novo"] .el-liquid-sw:checked::before { transform: translate(-75%, -50%); } @media (prefers-reduced-motion: reduce) { [data-design="novo"] .el-liquid-sw, [data-design="novo"] .el-liquid-sw::before { transition: none; } } /* Ponto do E.AI: sage por padrão; sobre o CREAM do botão ativo do dock, o sage claro sumia ("muito tímido", dono) → sage PROFUNDO, mesma família, contrasta. */ .el-eai-dot { color: var(--el-accent); } [data-design="novo"] .el-dock-btn.is-active .el-eai-dot { color: #33523c; } [data-design="novo"] .el-dock-btn:hover .el-eai-dot { color: #b9d4bf; } /* ═══ MODAL QUE NASCE (nada seco, regra do dono): pop com blur-in + overlay fade. Reutilizável: classes .el-overlay-fade (no backdrop) e .el-modal-pop (no card). */ @keyframes elModalPop { from { opacity: 0; transform: scale(0.94) translateY(12px); } to { opacity: 1; transform: none; } } [data-design="novo"] .el-modal-pop { animation: elModalPop 0.38s cubic-bezier(0.34, 1.35, 0.5, 1); } @keyframes elOverlayFade { from { opacity: 0; } } [data-design="novo"] .el-overlay-fade { animation: elOverlayFade 0.22s ease; } [data-design="novo"] .el-nova-row:hover { background: rgba(244, 239, 228, 0.05); } @media (prefers-reduced-motion: reduce) { [data-design="novo"] .el-modal-pop, [data-design="novo"] .el-overlay-fade { animation: none; } } /* Botões QUIETOS: sem o levitar da camada fluida — em ícones pequenos (34px) o salto ficou estranho (dono, 2026-07-08). O press ainda afunda (feedback). */ [data-design="novo"] button.el-quieto:hover { transform: none !important; box-shadow: none !important; filter: brightness(1.12); } [data-design="novo"] button.el-quieto:active { transform: scale(0.92) !important; } /* ═══ COCKPIT DO GERENTE: objetos vivos (dono: 'nada de estático feio') ═══ */ .el-tile-vivo { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; } .el-tile-vivo:hover { transform: translateY(-4px) scale(1.03); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 14px 28px -10px rgba(0,0,0,0.6); } @keyframes elFeedIn { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } } .el-feed-item { animation: elFeedIn 0.45s cubic-bezier(0.34, 1.2, 0.4, 1) both; } /* pulso por OPACIDADE num pseudo-elemento (compositor) — animar box-shadow repintava o card inteiro a 60fps e ENGASGAVA a tela (dono sentiu) */ .el-card-alerta { position: relative; } .el-card-alerta::after { content: ''; position: absolute; inset: -6px; border-radius: inherit; box-shadow: 0 10px 34px -8px rgba(255,69,58,0.4); opacity: 0; animation: elAlertaPulsa 2.4s ease-in-out infinite; pointer-events: none; will-change: opacity; } @keyframes elAlertaPulsa { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .el-tile-vivo, .el-feed-item, .el-card-alerta { animation: none; transition: none; } } /* PROTÓTIPO card-Equipe → explode em cards por corretor (ref. Skiper3) */ @keyframes elCardPop { from { opacity: 0; transform: scale(0.55) translateY(18px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } } .el-card-pop { animation: elCardPop 0.5s cubic-bezier(0.34, 1.45, 0.5, 1) both; } @media (prefers-reduced-motion: reduce) { .el-card-pop { animation: none; } } /* Widget Equipe (referência VoiceChat do dono): morph pílula→painel com o bezier assinatura (0.32,0.72,0,1); avatares empilhados; cards em cascata. */ .el-equipe-morph { transition: width 0.5s cubic-bezier(0.32, 0.72, 0, 1), height 0.5s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.5s cubic-bezier(0.32, 0.72, 0, 1), background 0.3s ease; } .el-equipe-fade { transition: opacity 0.45s cubic-bezier(0.32, 0.72, 0, 1), transform 0.45s cubic-bezier(0.32, 0.72, 0, 1); } /* gráfico do cockpit: as áreas SE DESENHAM (wipe esq→dir) na entrada e a cada troca de período/corretor (key remonta e replay) */ @keyframes elChartReveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } .el-chart-reveal { animation: elChartReveal 0.9s cubic-bezier(0.32, 0.72, 0, 1) both; } @media (prefers-reduced-motion: reduce) { .el-chart-reveal { animation: none; } } /* ── Sino de notificações + cards goo da Equipe (2026-07-09) ───────────────── SEM gate [data-design] de propósito: animação nova precisa rodar no Legacy (pegadinha documentada — gateado, o dono nunca vê o movimento). */ @keyframes elSinoBalanca { 0%, 76%, 100% { transform: rotate(0deg); } 80% { transform: rotate(13deg); } 84% { transform: rotate(-11deg); } 88% { transform: rotate(8deg); } 92% { transform: rotate(-5deg); } 96% { transform: rotate(2deg); } } @keyframes elGooPop { 0% { opacity: 0; transform: translateY(-14px) scale(0.55); } 60% { opacity: 1; transform: translateY(2px) scale(1.05); } 100% { opacity: 1; transform: none; } } @keyframes elFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes elListaPop { 0% { opacity: 0; transform: translateY(-14px) scale(0.92); } 65% { opacity: 1; transform: translateY(2px) scale(1.02); } 100% { opacity: 1; transform: none; } } /* Ping do dot de status (etiquetas estilo kibo/shadcn Status): anel que expande e some. SEM gate. */ @keyframes elPing { 75%, 100% { transform: scale(2.4); opacity: 0; } } /* E.AI "digitando…" — os 3 pontinhos do card do gerente. SEM gate. */ @keyframes elEaiPonto { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } /* Linha viva do gráfico do cockpit: revelação esquerda→direita por CLIP (nunca dash+pathLength — o viewBox esticado picota os traços no Chrome), energia = gradiente varrendo (SMIL no SVG) e ponta pulsando. SEM gate. */ @keyframes elRevelaX { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -8% 0 0); } } @keyframes elPontoPulsa { 0% { box-shadow: 0 0 10px rgba(207,227,211,0.9), 0 0 0 0 rgba(207,227,211,0.35); } 70%, 100% { box-shadow: 0 0 10px rgba(207,227,211,0.9), 0 0 0 9px rgba(207,227,211,0); } } /* Troca de mês dos calendários (Oráculo + Equipe) — entrada lateral sensível à direção. SEM gate [data-design]. */ @keyframes elMesDir { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } } @keyframes elMesEsq { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } } /* ── BUSCA DO GLOBO: estilo vive INLINE no React (determinístico); a folha só guarda o cosmético do placeholder. ── */ .el-busca-globo::placeholder { color: var(--el-fg-faint); } /* "+" do globo: gira 90° no hover SEM deslocar (o hover global do tema sobe os botões 2px — aqui o !important segura o rotate puro, sem translateY). */ /* "+" PARADO no hover (dono 2026-07-11: nada de erguer/girar no hover); o giro de 90° acontece SÓ no clique (:active), estilo do asset dele. */ .el-mais-globo { transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important; } .el-mais-globo:hover { transform: none !important; box-shadow: none !important; } .el-mais-globo:active { transform: rotate(90deg) !important; } .el-mais-globo.aberto, .el-mais-globo.aberto:hover { transform: rotate(45deg) !important; } /* Quando o botão TAMBÉM é .el-quieto (o "+" da Equipe), as regras de modo novo do el-quieto (0-3-1) venciam as de cima e o X aberto voltava a "+" no hover / não girava no clique. Estas, mais específicas (0-4-1), restauram o asset. */ [data-design="novo"] button.el-mais-globo:active { transform: rotate(90deg) !important; } [data-design="novo"] button.el-mais-globo.aberto, [data-design="novo"] button.el-mais-globo.aberto:hover { transform: rotate(45deg) !important; }