/* ========================================================= MozJobs — Design System (Dark Premium · Vercel/Linear style) Activado quando (ou via ) ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* === MozJobs paleta oficial — alinhada com o logotipo (azul-petróleo + verde) === */ --mz-bg: #08252E; /* fundo principal — azul-petróleo muito escuro */ --mz-bg-2: #0E3540; /* fundo secção — azul-petróleo médio */ --mz-bg-3: #144553; /* fundo elevado */ --mz-line: rgba(255,255,255,0.08); --mz-line-strong: rgba(255,255,255,0.15); --mz-text: #E5E7EB; --mz-text-2: #CBD5E1; --mz-muted: #94A3B8; --mz-dim: #64748B; /* Accent verde da pasta do logo */ --mz-accent: #6FB342; /* verde principal */ --mz-accent-2: #88CC58; /* hover/brilhante */ --mz-accent-3: #4E8C28; /* pressed/escuro */ --mz-accent-glow: rgba(111,179,66,0.45); /* Azul-petróleo da letra do logo */ --mz-primary: #1A4B5B; --mz-primary-2: #225D72; --mz-primary-3: #103744; /* Cores complementares semânticas (mantêm-se inalteradas) */ --mz-success: #10B981; --mz-warning: #F59E0B; /* amber — só para badges de "aguarda" / warning */ --mz-danger: #EF4444; --mz-info: #3B82F6; --mouse-x: 50%; --mouse-y: 50%; } /* ============================================================ 1. RESET / OVERRIDES sobre Tailwind quando body tem .mz-dark ============================================================ */ body.mz-dark { background: var(--mz-bg) !important; color: var(--mz-text) !important; } body.mz-dark a { color: inherit; } /* Top bar e Nav transparente com blur (estilo Vercel) */ body.mz-dark > div.bg-primary.text-white.text-sm { background: rgba(5,8,23,0.5) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--mz-line); } body.mz-dark > nav.bg-white { background: rgba(5,8,23,0.72) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--mz-line); box-shadow: none !important; } body.mz-dark > nav .text-primary { color: #fff !important; } body.mz-dark > nav .text-gray-700, body.mz-dark > nav .text-gray-500 { color: var(--mz-muted) !important; } body.mz-dark > nav a.text-gray-700:hover { color: #fff !important; } body.mz-dark > nav .bg-primary.rounded-lg { background: rgba(111,179,66,0.12) !important; border: 1px solid rgba(111,179,66,0.3); } body.mz-dark > nav .text-accent { color: var(--mz-accent) !important; } /* Footer mantém-se escuro mas alinhado com o tema */ body.mz-dark footer { background: var(--mz-bg-2) !important; } body.mz-dark footer .border-t { border-color: var(--mz-line) !important; } /* Heading defaults dentro de mz-dark */ body.mz-dark main { color: var(--mz-text); } /* ============================================================ 2. TIPOGRAFIA ============================================================ */ .mz-display { letter-spacing: -0.04em; line-height: 0.98; font-weight: 600; } .mz-h2 { letter-spacing: -0.03em; line-height: 1.05; font-weight: 600; color: #fff; } .mz-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mz-accent); } .mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } .mz-rule { display: inline-block; height: 1px; width: 36px; background: linear-gradient(90deg, var(--mz-accent), transparent); vertical-align: middle; margin-right: 0.75rem; } .mz-rule-reverse { background: linear-gradient(-90deg, var(--mz-accent), transparent); margin-left: 0.75rem; margin-right: 0; } .mz-glow-line { height: 1px; background: linear-gradient(90deg, transparent, var(--mz-accent), transparent); opacity: 0.6; } /* ============================================================ 3. BACKGROUNDS — aurora, grid, spotlight ============================================================ */ .mz-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(60% 50% at 75% 20%, rgba(111,179,66,0.18) 0%, transparent 60%), radial-gradient(50% 50% at 15% 80%, rgba(96,165,250,0.18) 0%, transparent 55%), radial-gradient(40% 40% at 50% 0%, rgba(168,85,247,0.10) 0%, transparent 55%); animation: mzAurora 18s ease-in-out infinite alternate; } @keyframes mzAurora { 0% { transform: translate3d(0,0,0); opacity: 0.9; } 50% { transform: translate3d(-2%, 2%, 0) scale(1.05); opacity: 1; } 100% { transform: translate3d(2%,-2%, 0); opacity: 0.85; } } .mz-grid-bg { background-image: linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 50%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 50%, transparent 100%); } .mz-spotlight { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(111,179,66,0.12), transparent 40%); transition: background 0.2s ease; } /* ============================================================ 4. BOTÕES ============================================================ */ .mz-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.5rem; border-radius: 8px; font-weight: 600; font-size: 0.9375rem; transition: all 0.25s cubic-bezier(0.16,1,0.3,1); position: relative; } .mz-btn-primary { background: var(--mz-accent); color: var(--mz-primary); box-shadow: 0 0 0 0 var(--mz-accent-glow); } .mz-btn-primary:hover { background: var(--mz-accent-2); box-shadow: 0 0 0 6px rgba(111,179,66,0.15), 0 16px 32px -8px var(--mz-accent-glow); transform: translateY(-1px); } .mz-btn-ghost { color: #fff; border: 1px solid var(--mz-line-strong); background: rgba(255,255,255,0.02); } .mz-btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.35); transform: translateY(-1px); } .mz-btn-sm { padding: 0.5rem 0.875rem; font-size: 0.825rem; } /* ============================================================ 5. CARDS com hover spotlight ============================================================ */ .mz-card { background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%); border: 1px solid var(--mz-line); border-radius: 12px; transition: all 0.3s cubic-bezier(0.16,1,0.3,1); position: relative; overflow: hidden; } .mz-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(400px circle at var(--card-x, 50%) var(--card-y, 50%), rgba(111,179,66,0.08), transparent 40%); opacity: 0; transition: opacity 0.3s; pointer-events: none; } .mz-card:hover { border-color: rgba(111,179,66,0.35); transform: translateY(-3px); box-shadow: 0 24px 48px -16px rgba(0,0,0,0.6), 0 0 0 1px rgba(111,179,66,0.1); } .mz-card:hover::before { opacity: 1; } .mz-card-plain { background: var(--mz-bg-2); border: 1px solid var(--mz-line); border-radius: 12px; } /* ============================================================ 6. INPUTS / FORMS ============================================================ */ .mz-input, .mz-input-select { width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--mz-line); color: var(--mz-text); padding: 0.625rem 0.875rem; border-radius: 8px; font-size: 0.9375rem; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; outline: none; } .mz-input:focus, .mz-input-select:focus { border-color: var(--mz-accent); background: rgba(111,179,66,0.03); box-shadow: 0 0 0 3px rgba(111,179,66,0.12); } .mz-input::placeholder { color: var(--mz-dim); } .mz-input-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394A3B8'%3e%3cpath d='M5.5 7l4.5 5 4.5-5z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1.25em; padding-right: 2.25rem; } .mz-label { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mz-muted); margin-bottom: 0.4rem; } .mz-textarea { width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--mz-line); color: var(--mz-text); padding: 0.75rem 0.875rem; border-radius: 8px; font-size: 0.9375rem; font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; outline: none; resize: vertical; } .mz-textarea:focus { border-color: var(--mz-accent); box-shadow: 0 0 0 3px rgba(111,179,66,0.12); } /* File input estilizado */ .mz-file { display: block; width: 100%; font-size: 0.875rem; color: var(--mz-muted); } .mz-file::file-selector-button { margin-right: 0.75rem; padding: 0.5rem 0.875rem; border-radius: 6px; border: 0; background: rgba(111,179,66,0.12); color: var(--mz-accent); font-weight: 600; font-size: 0.8125rem; cursor: pointer; transition: background 0.15s; } .mz-file::file-selector-button:hover { background: rgba(111,179,66,0.2); } /* ============================================================ 7. PILLS / BADGES / STATUS ============================================================ */ .mz-pill { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(255,255,255,0.06); color: var(--mz-text-2); border: 1px solid var(--mz-line); letter-spacing: 0.02em; } .mz-pill-accent { background: rgba(111,179,66,0.15); color: var(--mz-accent); border-color: rgba(111,179,66,0.3); } .mz-pill-success { background: rgba(16,185,129,0.15); color: #34D399; border-color: rgba(16,185,129,0.3); } .mz-pill-danger { background: rgba(239,68,68,0.15); color: #F87171; border-color: rgba(239,68,68,0.3); } .mz-pill-info { background: rgba(59,130,246,0.15); color: #60A5FA; border-color: rgba(59,130,246,0.3); } .mz-pill-amber { background: rgba(245,158,11,0.15); color: var(--mz-warning); border-color: rgba(245,158,11,0.3); } .mz-pill-purple { background: rgba(168,85,247,0.15); color: #C084FC; border-color: rgba(168,85,247,0.3); } .mz-pill-teal { background: rgba(20,184,166,0.15); color: #2DD4BF; border-color: rgba(20,184,166,0.3); } /* ============================================================ 8. ALERTAS / NOTAS ============================================================ */ .mz-alert { border-left: 3px solid var(--mz-accent); background: rgba(111,179,66,0.08); color: var(--mz-text); padding: 0.875rem 1rem; border-radius: 0 8px 8px 0; font-size: 0.875rem; } .mz-alert-info { border-color: #60A5FA; background: rgba(59,130,246,0.08); } .mz-alert-success { border-color: #34D399; background: rgba(16,185,129,0.08); } .mz-alert-error { border-color: #F87171; background: rgba(239,68,68,0.08); } .mz-alert-warning { border-color: var(--mz-accent); background: rgba(111,179,66,0.08); } /* ============================================================ 9. HERO PHOTO + BADGES FLUTUANTES ============================================================ */ .mz-hero-photo { position: relative; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); box-shadow: 0 50px 100px -20px rgba(111,179,66,0.25), 0 30px 60px -30px rgba(0,0,0,0.8); } .mz-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .mz-hero-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(5,8,23,0.85) 100%); } .mz-hero-badge { position: absolute; padding: 0.5rem 0.875rem; border-radius: 10px; background: rgba(5,8,23,0.85); backdrop-filter: blur(10px); border: 1px solid var(--mz-line); color: #fff; font-size: 0.8125rem; display: inline-flex; align-items: center; gap: 0.5rem; box-shadow: 0 8px 24px rgba(0,0,0,0.4); animation: mzFloat 4s ease-in-out infinite; } @keyframes mzFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* ============================================================ 10. MARQUEE infinito (logos) ============================================================ */ .mz-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .mz-marquee-track { display: flex; gap: 3rem; animation: mzMarquee 30s linear infinite; width: max-content; } .mz-marquee:hover .mz-marquee-track { animation-play-state: paused; } @keyframes mzMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .mz-logo-item { font-weight: 700; color: rgba(255,255,255,0.5); font-size: 1rem; white-space: nowrap; transition: color 0.2s; } .mz-logo-item:hover { color: #fff; } /* ============================================================ 11. NÚMEROS ANIMADOS (counters) ============================================================ */ .mz-stat-num { font-family: 'JetBrains Mono', monospace; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.5) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============================================================ 12. REVEAL ON SCROLL ============================================================ */ .mz-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); } .mz-reveal.is-in { opacity: 1; transform: translateY(0); } .mz-reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .mz-reveal-stagger.is-in > * { opacity: 1; transform: translateY(0); } .mz-reveal-stagger.is-in > *:nth-child(1) { transition-delay: 60ms; } .mz-reveal-stagger.is-in > *:nth-child(2) { transition-delay: 120ms; } .mz-reveal-stagger.is-in > *:nth-child(3) { transition-delay: 180ms; } .mz-reveal-stagger.is-in > *:nth-child(4) { transition-delay: 240ms; } .mz-reveal-stagger.is-in > *:nth-child(5) { transition-delay: 300ms; } .mz-reveal-stagger.is-in > *:nth-child(6) { transition-delay: 360ms; } .mz-reveal-stagger.is-in > *:nth-child(7) { transition-delay: 420ms; } .mz-reveal-stagger.is-in > *:nth-child(8) { transition-delay: 480ms; } /* ============================================================ 13. DASHBOARD (sidebar + topbar) dark ============================================================ */ body.mz-dark aside { background: var(--mz-bg-2) !important; border-right: 1px solid var(--mz-line); } body.mz-dark aside .border-b, body.mz-dark aside .border-t { border-color: var(--mz-line) !important; } body.mz-dark aside a.text-gray-300 { color: var(--mz-muted) !important; } body.mz-dark aside a.text-gray-300:hover { color: #fff !important; background: rgba(255,255,255,0.04) !important; } body.mz-dark aside .bg-white\/10 { background: rgba(111,179,66,0.12) !important; } body.mz-dark aside .text-accent { color: var(--mz-accent) !important; } body.mz-dark aside .bg-white { background: var(--mz-accent) !important; } body.mz-dark > div.flex.h-screen > div.flex-1 > header.bg-white { background: rgba(5,8,23,0.72) !important; backdrop-filter: blur(14px); border-bottom: 1px solid var(--mz-line) !important; } body.mz-dark header.bg-white .text-primary { color: #fff !important; } body.mz-dark header.bg-white .text-gray-600 { color: var(--mz-muted) !important; } body.mz-dark header.bg-white .text-gray-900 { color: #fff !important; } body.mz-dark header.bg-white .text-gray-500 { color: var(--mz-dim) !important; } body.mz-dark header.bg-white .border-l { border-color: var(--mz-line) !important; } body.mz-dark main { background: transparent; } body.mz-dark main > div.bg-gray-100, body.mz-dark main { background: var(--mz-bg) !important; } /* Tabelas dentro do dashboard */ body.mz-dark .bg-white { background: var(--mz-bg-2) !important; } body.mz-dark .bg-white.rounded-2xl, body.mz-dark .bg-white.rounded-xl, body.mz-dark .bg-white.rounded-lg { background: var(--mz-bg-2) !important; border: 1px solid var(--mz-line); } body.mz-dark table thead.bg-gray-50 { background: rgba(255,255,255,0.02) !important; } body.mz-dark table tbody tr.hover\:bg-gray-50:hover { background: rgba(111,179,66,0.04) !important; } body.mz-dark table tbody tr { border-color: var(--mz-line) !important; } body.mz-dark table thead th { color: var(--mz-muted) !important; } body.mz-dark table td { color: var(--mz-text) !important; } body.mz-dark .text-primary { color: #fff !important; } body.mz-dark .text-gray-900 { color: #fff !important; } body.mz-dark .text-gray-800 { color: var(--mz-text) !important; } body.mz-dark .text-gray-700 { color: var(--mz-text-2) !important; } body.mz-dark .text-gray-600 { color: var(--mz-muted) !important; } body.mz-dark .text-gray-500 { color: var(--mz-dim) !important; } body.mz-dark .text-gray-400 { color: var(--mz-dim) !important; } body.mz-dark .divide-gray-100 > * + * { border-color: var(--mz-line) !important; } body.mz-dark .border-gray-100, body.mz-dark .border-gray-200, body.mz-dark .border-gray-300 { border-color: var(--mz-line) !important; } body.mz-dark .bg-gray-50 { background: rgba(255,255,255,0.02) !important; } body.mz-dark .bg-gray-100 { background: rgba(255,255,255,0.04) !important; } body.mz-dark .bg-gray-200 { background: rgba(255,255,255,0.06) !important; } /* Inputs default Tailwind dentro de dashboards ficam alinhados */ body.mz-dark input[type=text], body.mz-dark input[type=email], body.mz-dark input[type=password], body.mz-dark input[type=tel], body.mz-dark input[type=number], body.mz-dark input[type=date], body.mz-dark input[type=time], body.mz-dark input[type=url], body.mz-dark input[type=search], body.mz-dark input[type=month], body.mz-dark select, body.mz-dark textarea { background: rgba(255,255,255,0.03) !important; border: 1px solid var(--mz-line) !important; color: var(--mz-text) !important; } body.mz-dark input:focus, body.mz-dark select:focus, body.mz-dark textarea:focus { border-color: var(--mz-accent) !important; box-shadow: 0 0 0 3px rgba(111,179,66,0.12) !important; } body.mz-dark input::placeholder, body.mz-dark textarea::placeholder { color: var(--mz-dim) !important; } /* Forçar branco em botões com tema accent claro do dashboard */ body.mz-dark .bg-primary { background: var(--mz-bg-2) !important; } body.mz-dark .bg-primary.text-white { background: rgba(111,179,66,0.12) !important; color: var(--mz-accent) !important; border: 1px solid rgba(111,179,66,0.3); } body.mz-dark .bg-primary.hover\:bg-primary\/90:hover { background: rgba(111,179,66,0.2) !important; } /* Status badges nas tabelas (suspende cores do tailwind) */ body.mz-dark .bg-green-100 { background: rgba(16,185,129,0.15) !important; } body.mz-dark .text-green-700, body.mz-dark .text-green-800 { color: #34D399 !important; } body.mz-dark .bg-blue-100 { background: rgba(59,130,246,0.15) !important; } body.mz-dark .text-blue-700, body.mz-dark .text-blue-800 { color: #60A5FA !important; } body.mz-dark .bg-red-100 { background: rgba(239,68,68,0.15) !important; } body.mz-dark .text-red-700, body.mz-dark .text-red-800 { color: #F87171 !important; } body.mz-dark .bg-amber-100, body.mz-dark .bg-yellow-100 { background: rgba(245,158,11,0.15) !important; } body.mz-dark .text-amber-700, body.mz-dark .text-amber-800, body.mz-dark .text-yellow-700 { color: var(--mz-warning) !important; } body.mz-dark .bg-purple-100 { background: rgba(168,85,247,0.15) !important; } body.mz-dark .text-purple-700, body.mz-dark .text-purple-800 { color: #C084FC !important; } body.mz-dark .bg-teal-100 { background: rgba(20,184,166,0.15) !important; } body.mz-dark .text-teal-700 { color: #2DD4BF !important; } body.mz-dark .bg-orange-100 { background: rgba(249,115,22,0.15) !important; } body.mz-dark .text-orange-700 { color: #FB923C !important; } body.mz-dark .bg-pink-100 { background: rgba(236,72,153,0.15) !important; } body.mz-dark .text-pink-700 { color: #F472B6 !important; } body.mz-dark .bg-indigo-100 { background: rgba(99,102,241,0.15) !important; } body.mz-dark .text-indigo-700 { color: #818CF8 !important; } /* Cards de welcome gradientes do dashboard ficam mais escuros */ body.mz-dark .bg-gradient-to-r.from-green-500, body.mz-dark .bg-gradient-to-r.from-green-600 { background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(5,8,23,0.5)) !important; } body.mz-dark .bg-gradient-to-r.from-blue-600 { background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(5,8,23,0.5)) !important; } body.mz-dark .bg-gradient-to-r.from-primary { background: linear-gradient(135deg, rgba(111,179,66,0.15), rgba(5,8,23,0.5)) !important; } /* ============================================================ 14. SCROLLBAR estilizado ============================================================ */ body.mz-dark ::-webkit-scrollbar { width: 10px; height: 10px; } body.mz-dark ::-webkit-scrollbar-track { background: var(--mz-bg); } body.mz-dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 5px; } body.mz-dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); } /* ============================================================ 15. ACESSIBILIDADE — prefers-reduced-motion ============================================================ */ @media (prefers-reduced-motion: reduce) { .mz-aurora, .mz-marquee-track, .mz-hero-badge { animation: none !important; } .mz-reveal, .mz-reveal-stagger > * { opacity: 1 !important; transform: none !important; } } /* ============================================================ 16. AUTH-CARD — caixa central de login/registo ============================================================ */ .mz-auth-wrap { min-height: 100vh; padding: 2rem 1rem; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: var(--mz-bg); } .mz-auth-card { width: 100%; max-width: 480px; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); border: 1px solid var(--mz-line); border-radius: 16px; padding: 2rem; backdrop-filter: blur(20px); box-shadow: 0 32px 64px -16px rgba(0,0,0,0.5); position: relative; z-index: 1; } .mz-auth-card-wide { max-width: 640px; } /* ============================================================ 17. ECOSSISTEMA — nodes do diagrama ============================================================ */ .mz-eco { position: relative; } .mz-eco-node { position: relative; z-index: 2; background: var(--mz-bg-2); border: 1px solid var(--mz-line); border-radius: 12px; padding: 1.25rem; transition: all 0.3s; } .mz-eco-node:hover { border-color: rgba(111,179,66,0.4); box-shadow: 0 0 0 4px rgba(111,179,66,0.08); transform: translateY(-2px); } .mz-eco-node .num { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--mz-accent); letter-spacing: 0.1em; } .mz-eco-node h4 { color: #fff; font-weight: 600; margin: 0.5rem 0 0.25rem; } .mz-eco-node p { font-size: 0.78rem; color: var(--mz-muted); line-height: 1.55; } .mz-eco-final { background: linear-gradient(135deg, #6FB342 0%, #4E8C28 100%); border-color: rgba(111,179,66,0.5); } .mz-eco-final h4, .mz-eco-final .num { color: var(--mz-primary) !important; } .mz-eco-final p { color: rgba(11,27,63,0.8) !important; }