/* ========================================================== EcoMentores Design System — theme.css Versão 3.0 (2026) Princípios: - Tokens centralizados em :root — nada hardcoded fora daqui - Dark mode via [data-theme="dark"] no - Inter como fonte principal (carregada no ) - Zero inline style permitido — toda classe utilitária fica aqui - Organização: Tokens → Base → Typography → Layout → Components → Utilities → Dark mode → Responsive ========================================================== */ /* ============================================================ 0. GOOGLE FONTS (Inter) Importado aqui para garantir que qualquer arquivo que incluir theme.css tenha a fonte disponível. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); /* ============================================================ 1. DESIGN TOKENS — Light (padrão) ============================================================ */ :root { /* ── Brand ─────────────────────────────────────────────── */ /* Definidas por theme-runtime.php (valores do painel admin): */ /* --brand, --brand-2, --brand-dark, --brand-ink, */ /* --brand-tint, --brand-ring, --sidebar-from, --sidebar-to */ /* --bg, --text */ /* ── Surface ────────────────────────────────────────────── */ --bg-2: #eef1f5; --surface: #ffffff; --surface-2: #f9fafb; --surface-3: #f1f3f6; /* ── Text ───────────────────────────────────────────────── */ --text-2: #2d3748; --text-muted: #637083; --text-faint: #9aa3b0; /* ── Border ─────────────────────────────────────────────── */ --border: rgba(12, 19, 36, .09); --border-2: rgba(12, 19, 36, .14); /* ── Status ─────────────────────────────────────────────── */ --success: #22c55e; --success-bg: rgba(34, 197, 94, .10); --warning: #f59e0b; --warning-bg: rgba(245, 158, 11, .10); --danger: #ef4444; --danger-bg: rgba(239, 68, 68, .10); --info: #3b82f6; --info-bg: rgba(59, 130, 246, .10); /* ── Shadow ─────────────────────────────────────────────── */ --shadow-xs: 0 2px 8px rgba(12, 19, 36, .06); --shadow-sm: 0 4px 16px rgba(12, 19, 36, .08); --shadow-md: 0 8px 28px rgba(12, 19, 36, .11); --shadow-lg: 0 16px 48px rgba(12, 19, 36, .14); --shadow-xl: 0 28px 80px rgba(12, 19, 36, .16); /* ── Radius ─────────────────────────────────────────────── */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px; --r-2xl: 34px; --r-full: 9999px; /* ── Spacing ────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ── Layout ─────────────────────────────────────────────── */ --sidebar-w: 240px; --sidebar-w-mini: 72px; --header-h: 64px; --content-pad: 24px; /* ── Typography ─────────────────────────────────────────── */ --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'Fira Code', 'Cascadia Mono', monospace; /* ── Motion ─────────────────────────────────────────────── */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-soft: cubic-bezier(.25, .46, .45, .94); --dur-fast: 100ms; --dur-base: 160ms; --dur-slow: 260ms; /* ── Focus ring ─────────────────────────────────────────── */ --ring: 0 0 0 3px var(--brand-ring); /* ── Sidebar (gradient definido por theme-runtime.php) ──── */ --sidebar-text: rgba(255,255,255,.95); --sidebar-icon-size: 22px; } /* ============================================================ 2. DARK MODE TOKENS [data-theme="dark"] ============================================================ */ [data-theme="dark"] { --bg: #0f1117; --bg-2: #161b24; --surface: #1a2030; --surface-2: #1f2538; --surface-3: #252c40; --text: #f0f6fb; --text-2: #c5d0dd; --text-muted: #94a3b5; --text-faint: #64748b; --border: rgba(255, 255, 255, .08); --border-2: rgba(255, 255, 255, .12); --shadow-xs: 0 2px 8px rgba(0, 0, 0, .30); --shadow-sm: 0 4px 16px rgba(0, 0, 0, .35); --shadow-md: 0 8px 28px rgba(0, 0, 0, .40); --shadow-lg: 0 16px 48px rgba(0, 0, 0, .45); --shadow-xl: 0 28px 80px rgba(0, 0, 0, .50); --success-bg: rgba(34, 197, 94, .14); --warning-bg: rgba(245, 158, 11, .14); --danger-bg: rgba(239, 68, 68, .14); --info-bg: rgba(59, 130, 246, .14); } /* ============================================================ 3. BASE RESET E GLOBAL ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { height: 100%; font-size: 16px; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { height: 100%; margin: 0; font-family: var(--font-sans); font-size: 14.5px; line-height: 1.6; color: var(--text); background-color: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--dur-slow) var(--ease-soft), color var(--dur-slow) var(--ease-soft); } a { color: inherit; text-decoration: none; } img, svg { max-width: 100%; display: block; } button { cursor: pointer; } ::selection { background: var(--brand-tint); color: var(--brand-ink); } :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================================ 4. TYPOGRAPHY ============================================================ */ .t-display-1 { font-size: clamp(40px, 5vw, 64px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; } .t-display-2 { font-size: clamp(32px, 4vw, 48px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; } .t-heading-1 { font-size: clamp(24px, 3vw, 36px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; } .t-heading-2 { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; } .t-heading-3 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; } .t-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } .t-body { font-size: 14.5px; font-weight: 400; line-height: 1.6; } .t-body-sm { font-size: 13px; font-weight: 400; line-height: 1.55; } .t-label { font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; } .t-caption { font-size: 11.5px; font-weight: 500; color: var(--text-muted); } .t-mono { font-family: var(--font-mono); font-size: 13px; } .text-brand { color: var(--brand); } .text-muted { color: var(--text-muted) !important; } .text-faint { color: var(--text-faint); } /* ============================================================ 5. BOOTSTRAP OVERRIDES ============================================================ */ /* Container */ .container, .container-fluid { padding-inline: var(--content-pad); } /* Card */ .card { background: color-mix(in srgb, var(--surface) 96%, var(--brand-tint) 4%); border: 1px solid color-mix(in srgb, var(--border) 88%, transparent); border-radius: var(--r-xl); box-shadow: 0 12px 28px rgba(10, 26, 30, 0.09); transition: background var(--dur-slow) var(--ease-soft), border-color var(--dur-base) var(--ease-soft); } .card.border-0 { border-color: transparent !important; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 44px; padding: 0 22px; border-radius: var(--r-full); font-family: var(--font-sans); font-weight: 600; font-size: 14px; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), filter var(--dur-fast) ease, background var(--dur-base) ease, border-color var(--dur-base) ease; } .btn:focus-visible { outline: none !important; box-shadow: var(--ring) !important; } .btn:active { transform: translateY(1px) scale(.99); } .btn-primary { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); border: 1px solid rgba(48,215,163,.30); box-shadow: 0 4px 20px var(--brand-ring); color: #fff !important; } .btn-primary:hover { filter: brightness(1.05); box-shadow: 0 8px 32px var(--brand-ring); transform: translateY(-1px); color: #fff !important; } .btn-outline-primary { border: 1px solid var(--border-2); color: var(--text) !important; background: var(--surface); } .btn-outline-primary:hover { background: var(--brand-tint); border-color: rgba(48,215,163,.40); transform: translateY(-1px); box-shadow: var(--shadow-xs); } .btn-outline-secondary { border: 1px solid var(--border); color: var(--text-muted) !important; background: transparent; } .btn-outline-secondary:hover { background: var(--surface-3); border-color: var(--border-2); } .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff !important; } .btn-outline-danger { border-color: var(--danger); color: var(--danger) !important; background: transparent; } .btn-outline-danger:hover { background: var(--danger-bg); } .btn-ghost { background: transparent; border: 1px solid transparent; color: var(--text-muted); } .btn-ghost:hover { background: var(--surface-3); color: var(--text); } .btn-sm { height: 36px; padding: 0 16px; font-size: 13px; } .btn-lg { height: 52px; padding: 0 32px; font-size: 15.5px; } /* Forms */ .form-label { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: var(--space-2); } .form-control, .form-select { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-md); color: var(--text); font-family: var(--font-sans); font-size: 14px; transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease, background var(--dur-slow) ease; } .form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: var(--ring); background: var(--surface); color: var(--text); outline: none; } .form-control::placeholder { color: var(--text-faint); } .form-control:disabled, .form-select:disabled { background: var(--surface-3); opacity: .7; } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background: var(--surface-2); color: var(--text); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background: var(--surface); } .input-group-text { background: var(--surface-3); border: 1px solid var(--border-2); color: var(--text-muted); border-radius: var(--r-md); font-size: 14px; } /* Alerts */ .alert { border-radius: var(--r-lg); border-width: 1px; font-size: 13.5px; background: var(--surface); } .alert-danger { background: var(--danger-bg); border-color: rgba(239,68,68,.25); color: #c53030; } .alert-success { background: var(--success-bg); border-color: rgba(34,197,94,.25); color: #166534; } .alert-warning { background: var(--warning-bg); border-color: rgba(245,158,11,.25); color: #92400e; } .alert-info { background: var(--info-bg); border-color: rgba(59,130,246,.25); color: #1e40af; } [data-theme="dark"] .alert-danger { color: #fca5a5; } [data-theme="dark"] .alert-success { color: #86efac; } [data-theme="dark"] .alert-warning { color: #fcd34d; } [data-theme="dark"] .alert-info { color: #93c5fd; } /* Badges */ .badge { font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: 0.02em; border-radius: var(--r-full); padding: 3px 8px; } .badge.bg-success { background: var(--success-bg) !important; color: #166534 !important; border: 1px solid rgba(34,197,94,.25); } .badge.bg-warning { background: var(--warning-bg) !important; color: #92400e !important; border: 1px solid rgba(245,158,11,.25); } .badge.bg-danger { background: var(--danger-bg) !important; color: #c53030 !important; border: 1px solid rgba(239,68,68,.25); } .badge.bg-info { background: var(--info-bg) !important; color: #1e40af !important; border: 1px solid rgba(59,130,246,.25); } .badge.bg-light { background: var(--surface-3) !important; color: var(--text-muted) !important; border: 1px solid var(--border); } .badge.bg-primary { background: var(--brand-tint) !important; color: var(--brand-ink) !important; border: 1px solid rgba(48,215,163,.25); } [data-theme="dark"] .badge.bg-success { color: #86efac !important; } [data-theme="dark"] .badge.bg-warning { color: #fcd34d !important; } [data-theme="dark"] .badge.bg-danger { color: #fca5a5 !important; } [data-theme="dark"] .badge.bg-info { color: #93c5fd !important; } [data-theme="dark"] .badge.bg-light { background: var(--surface-2) !important; color: var(--text-muted) !important; border-color: var(--border); } /* Tables */ .table { --bs-table-bg: transparent; --bs-table-striped-bg: transparent; color: var(--text); border-color: var(--border); font-size: 14px; } .table th { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); background: var(--surface-2); border-bottom: 1px solid var(--border-2) !important; padding: 10px 16px; } .table td { vertical-align: middle; padding: 12px 16px; border-color: var(--border); color: var(--text); } .table > tbody > tr:last-child > td { border-bottom: 0; } .table-hover > tbody > tr:hover > * { background: var(--brand-tint); --bs-table-hover-bg: transparent; } .table-responsive { border-radius: var(--r-xl); overflow: hidden; } [data-theme="dark"] .table th { background: var(--surface-3); } [data-theme="dark"] .table-hover > tbody > tr:hover > * { background: rgba(48,215,163,.08); } /* Dropdown */ .dropdown-menu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--space-2); font-size: 13.5px; } .dropdown-item { border-radius: var(--r-sm); font-weight: 500; color: var(--text); padding: 8px 12px; transition: background var(--dur-fast) ease; } .dropdown-item:hover { background: var(--brand-tint); color: var(--text); } .dropdown-item.text-danger:hover { background: var(--danger-bg); } .dropdown-divider { border-color: var(--border); margin: var(--space-2) 0; } [data-theme="dark"] .dropdown-menu { background: var(--surface-2); } [data-theme="dark"] .dropdown-item { color: var(--text); } [data-theme="dark"] .dropdown-item:hover { background: rgba(48,215,163,.12); } /* Modals */ .modal-content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-xl); } .modal-header { border-bottom: 1px solid var(--border); padding: var(--space-6); } .modal-footer { border-top: 1px solid var(--border); padding: var(--space-5) var(--space-6); } .modal-body { padding: var(--space-6); } .modal-title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); } .modal-backdrop { background: rgba(10, 14, 26, .72) !important; } .modal-backdrop.show { opacity: 1 !important; } .modal-backdrop { z-index: 99990 !important; } .modal { z-index: 99999 !important; } .offcanvas-backdrop { z-index: 100000 !important; } .offcanvas { z-index: 100010 !important; } [data-theme="dark"] .modal-content { background: var(--surface-2); } [data-theme="dark"] .btn-close { filter: invert(1); } /* Offcanvas */ .offcanvas { background: var(--surface) !important; color: var(--text); } .offcanvas-header { border-bottom: 1px solid var(--border); } [data-theme="dark"] .offcanvas { background: var(--surface-2) !important; } /* Nav tabs */ .nav-tabs { border-bottom: 1px solid var(--border); gap: var(--space-1); } .nav-tabs .nav-link { border: none; border-bottom: 2px solid transparent; border-radius: 0; color: var(--text-muted); font-size: 13.5px; font-weight: 600; padding: 8px 14px; transition: color var(--dur-base) ease; } .nav-tabs .nav-link:hover { color: var(--text); } .nav-tabs .nav-link.active { color: var(--brand-dark); border-bottom-color: var(--brand); background: transparent; } /* List group */ .list-group-item { background: var(--surface); border-color: var(--border); color: var(--text); font-size: 14px; } .list-group-item:hover { background: var(--surface-2); } .list-group-item.active { background: var(--brand-tint); border-color: rgba(48,215,163,.30); color: var(--brand-ink); } [data-theme="dark"] .list-group-item { background: var(--surface-2); } [data-theme="dark"] .list-group-item:hover { background: var(--surface-3); } [data-theme="dark"] .list-group-item.active { color: var(--brand); } /* Pagination */ .page-link { background: var(--surface); border-color: var(--border); color: var(--text-muted); border-radius: var(--r-sm) !important; font-size: 13px; font-weight: 600; } .page-link:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-2); } .page-item.active .page-link { background: var(--brand); border-color: var(--brand); color: #fff; } /* Tooltip */ .tooltip-inner { background: var(--text); color: var(--bg); border-radius: var(--r-sm); font-size: 12px; font-weight: 500; padding: 5px 10px; } [data-theme="dark"] .tooltip-inner { background: var(--surface-3); color: var(--text); } /* Progress */ .progress { background: var(--surface-3); border-radius: var(--r-full); height: 6px; } .progress-bar { background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: var(--r-full); } /* ============================================================ 6. GLOBAL NAVBAR (público) ============================================================ */ .ec-navbar { background: rgba(255,255,255,.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1000; transition: background var(--dur-slow) ease; } .ec-navbar .navbar-brand { font-weight: 800; font-size: 18px; letter-spacing: -0.03em; color: var(--text); } .ec-navbar .nav-link { font-size: 13.5px; font-weight: 600; color: var(--text-muted); padding: 6px 12px; border-radius: var(--r-full); transition: color var(--dur-base) ease, background var(--dur-base) ease; } .ec-navbar .nav-link:hover { color: var(--text); background: var(--surface-3); } .ec-navbar .navbar-toggler { border-color: color-mix(in srgb, var(--border-2) 92%, transparent); color: var(--text); } .ec-navbar .navbar-toggler:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-ring) 58%, transparent); } .ec-navbar .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(1.8); opacity: .92; } [data-theme="dark"] .ec-navbar { background: rgba(26, 32, 48, .90); } /* ============================================================ 7. APP SHELL ============================================================ */ .app-shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); grid-template-rows: var(--header-h) minmax(0, 1fr) auto; grid-template-areas: "sidebar header" "sidebar main" "sidebar footer"; min-height: 100vh; transition: grid-template-columns var(--dur-slow) var(--ease-out); } [data-sidebar="mini"] .app-shell { grid-template-columns: var(--sidebar-w-mini) minmax(0, 1fr); } /* ── Sidebar ─────────────────────────────────────────────── */ .app-sidebar { grid-area: sidebar; position: sticky; top: 0; height: 100vh; width: var(--sidebar-w); background: radial-gradient(180% 120% at 80% 20%, var(--sidebar-from), transparent), linear-gradient(180deg, var(--sidebar-from) 0%, var(--sidebar-to) 100%); border-right: 1px solid color-mix(in srgb, rgba(255,255,255,.06) 88%, transparent); display: flex; flex-direction: column; overflow: hidden; z-index: 20; transition: width var(--dur-slow) var(--ease-out); box-shadow: 12px 0 36px rgba(2, 10, 15, 0.12); } [data-sidebar="mini"] .app-sidebar { width: var(--sidebar-w-mini); } /* Sidebar head (logo + platform name) */ .app-sb-head { display: flex; align-items: center; gap: 10px; padding: 16px 14px 14px; flex-shrink: 0; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.08); white-space: nowrap; text-decoration: none; } .app-sb-logo { width: 36px; height: 36px; border-radius: var(--r-md); background: rgba(255,255,255,.22); border: 1.5px solid rgba(255,255,255,.30); overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .app-sb-logo img { width: 100%; height: 100%; object-fit: contain; } .app-sb-logo__text { font-size: 12px; font-weight: 800; color: #fff; letter-spacing: -0.03em; } /* Logo imagem personalizada — sem caixa, sem borda */ .app-sb-logo-img { display: block; max-height: 36px; max-width: 140px; width: auto; height: auto; object-fit: contain; flex-shrink: 0; } [data-sidebar="mini"] .app-sb-logo-img { max-width: 36px; } .app-sb-platform { font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,.95); letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; max-width: 170px; transition: opacity var(--dur-base) ease, max-width var(--dur-slow) var(--ease-out); } [data-sidebar="mini"] .app-sb-platform { opacity: 0; max-width: 0; } /* Sidebar user block */ .app-sb-user { display: flex; align-items: center; gap: 10px; padding: 12px 14px; flex-shrink: 0; overflow: hidden; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,.08); } .app-sb-avatar { width: 34px; height: 34px; border-radius: var(--r-full); background: rgba(255,255,255,.22); border: 2px solid rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden; } .app-sb-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-full); } .app-sb-user-info { overflow: hidden; max-width: 170px; transition: opacity var(--dur-base) ease, max-width var(--dur-slow) var(--ease-out); } [data-sidebar="mini"] .app-sb-user-info { opacity: 0; max-width: 0; } .app-sb-user-name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.95); overflow: hidden; text-overflow: ellipsis; } .app-sb-role-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.65); text-transform: capitalize; letter-spacing: 0.02em; margin-top: 2px; } /* Sidebar nav */ .app-sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; scrollbar-width: none; } .app-sb-nav::-webkit-scrollbar { display: none; } .sn-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,.40); padding: 10px 10px 3px; white-space: nowrap; overflow: hidden; max-height: 30px; transition: opacity var(--dur-base) ease, max-height var(--dur-base) ease, padding var(--dur-base) ease; } [data-sidebar="mini"] .sn-label { opacity: 0; max-height: 0; padding: 0; } .sn-item { display: flex; align-items: center; gap: 10px; padding: 0 10px; height: 44px; border-radius: var(--r-md); color: var(--sidebar-text); background: transparent; border: 1px solid transparent; text-decoration: none; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; transition: background var(--dur-base) ease, border-color var(--dur-base) ease, padding var(--dur-slow) var(--ease-out), transform var(--dur-fast) ease; letter-spacing: -0.01em; } .sn-item i { font-size: 19px; flex-shrink: 0; width: 22px; text-align: center; } .sn-item-label { overflow: hidden; text-overflow: ellipsis; max-width: 150px; transition: opacity var(--dur-base) ease, max-width var(--dur-slow) var(--ease-out); } [data-sidebar="mini"] .sn-item { justify-content: center; padding: 0; } [data-sidebar="mini"] .sn-item-label { opacity: 0; max-width: 0; } .sn-item:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.16); } [data-sidebar="mini"] .sn-item:hover { transform: scale(1.06); } .sn-item.active { background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.26); box-shadow: 0 2px 14px rgba(0,0,0,.12); } .sn-item.active i { opacity: 1; } /* Sidebar footer */ .app-sb-foot { padding: 8px; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid rgba(255,255,255,.08); flex-shrink: 0; } .sb-btn { display: flex; align-items: center; gap: 10px; padding: 0 10px; height: 40px; border-radius: var(--r-md); color: var(--sidebar-text); background: transparent; border: 1px solid transparent; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; cursor: pointer; text-decoration: none; width: 100%; transition: background var(--dur-base) ease, border-color var(--dur-base) ease; letter-spacing: -0.01em; } .sb-btn i { font-size: 17px; flex-shrink: 0; width: 22px; text-align: center; } .sb-btn-label { overflow: hidden; text-overflow: ellipsis; max-width: 150px; transition: opacity var(--dur-base) ease, max-width var(--dur-slow) var(--ease-out); } [data-sidebar="mini"] .sb-btn { justify-content: center; padding: 0; } [data-sidebar="mini"] .sb-btn-label { opacity: 0; max-width: 0; } .sb-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.14); } .sb-btn--danger { color: rgba(255,190,190,.9); } .sb-btn--danger:hover { background: rgba(239,68,68,.20); border-color: rgba(239,68,68,.26); } /* sidebar theme toggle override */ .app-sb-foot .btn-theme-toggle { width: 100%; height: 40px; border-radius: var(--r-md); border-color: transparent; background: transparent; color: var(--sidebar-text); justify-content: flex-start; padding: 0 10px; gap: 10px; font-size: 13px; font-weight: 600; } .app-sb-foot .btn-theme-toggle i { font-size: 17px; width: 22px; text-align: center; flex-shrink: 0; } [data-sidebar="mini"] .app-sb-foot .btn-theme-toggle { justify-content: center; padding: 0; } .app-sb-foot .btn-theme-toggle:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.14); transform: none; } /* sidebar collapse btn arrow */ .sb-collapse-icon { transition: transform var(--dur-slow) var(--ease-out); } [data-sidebar="mini"] .sb-collapse-icon { transform: rotate(180deg); } /* ── Header ──────────────────────────────────────────────── */ .app-header { grid-area: header; position: sticky; top: 0; z-index: 9000; background: rgba(var(--bg-rgb, 245, 247, 250), .88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent); display: flex; align-items: stretch; overflow: visible !important; transition: background var(--dur-slow) ease; box-shadow: 0 2px 16px rgba(10, 26, 30, 0.06); } [data-theme="dark"] .app-header { background: rgba(15, 17, 23, .92); } .app-header-inner { height: var(--header-h); width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 0 var(--content-pad); position: relative; z-index: 9001; overflow: visible !important; } .app-page-title { min-width: 0; flex: 1; } .app-page-title h1 { margin: 0; font-size: clamp(18px, 2vw, 22px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--text); } .app-page-title .subtitle { margin-top: 1px; font-size: 12px; font-weight: 500; color: var(--text-muted); } .app-header-actions { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; position: relative; z-index: 9002; overflow: visible; } .app-header-actions .dropdown { position: relative; z-index: 9003; } .app-header-actions .dropdown-menu { z-index: 9999 !important; } /* Icon action buttons in header */ .app-hdr-btn { width: 38px; height: 38px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; position: relative; flex-shrink: 0; transition: background var(--dur-base) ease, color var(--dur-base) ease, transform var(--dur-fast) ease; } .app-hdr-btn:hover { background: var(--surface-3); color: var(--text); transform: scale(1.05); } .app-hdr-dot { position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; background: var(--brand); border-radius: 50%; border: 2px solid var(--bg); } /* User avatar in header */ .user-avatar { width: 38px; height: 38px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); color: #fff; font-size: 13px; font-weight: 700; border: 2px solid var(--surface); box-shadow: var(--shadow-sm); flex-shrink: 0; cursor: pointer; transition: box-shadow var(--dur-base) ease, transform var(--dur-fast) ease; overflow: hidden; } .user-avatar:hover { transform: scale(1.04); box-shadow: var(--shadow-md); } .user-avatar img { width: 100%; height: 100%; border-radius: var(--r-full); object-fit: cover; } /* Theme toggle (header / offcanvas) */ .btn-theme-toggle { width: 38px; height: 38px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); display: flex; align-items: center; justify-content: center; padding: 0; transition: background var(--dur-base) ease, color var(--dur-base) ease, border-color var(--dur-base) ease, transform var(--dur-fast) ease; flex-shrink: 0; } .btn-theme-toggle:hover { background: var(--surface-3); color: var(--text); transform: scale(1.05); } .btn-theme-toggle .icon-sun { display: none; } .btn-theme-toggle .icon-moon { display: block; } [data-theme="dark"] .btn-theme-toggle .icon-sun { display: block; } [data-theme="dark"] .btn-theme-toggle .icon-moon { display: none; } /* Sidebar theme toggle icon visibility */ .app-sb-foot .btn-theme-toggle .icon-moon { display: block; } .app-sb-foot .btn-theme-toggle .icon-sun { display: none; } [data-theme="dark"] .app-sb-foot .btn-theme-toggle .icon-sun { display: block; } [data-theme="dark"] .app-sb-foot .btn-theme-toggle .icon-moon { display: none; } /* ── Main + content ──────────────────────────────────────── */ .app-main { grid-area: main; padding: var(--content-pad); min-width: 0; } .app-content { min-width: 0; } /* ── Footer ──────────────────────────────────────────────── */ .app-footer { grid-area: footer; padding: 0 var(--content-pad) 20px; } .app-footer-bar { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: 11px 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: var(--text-muted); font-size: 12px; font-weight: 500; } .app-footer-links { display: flex; align-items: center; gap: 16px; } .app-footer-links a { color: var(--text-muted); text-decoration: none; font-size: 12px; transition: color var(--dur-base) ease; } .app-footer-links a:hover { color: var(--brand); } .app-footer-sep { color: var(--border-2); } /* ============================================================ 8. KPI / STAT CARDS ============================================================ */ .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--space-6); box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) ease; position: relative; overflow: hidden; } .stat-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(280px 180px at 0% 0%, var(--brand-tint), transparent 70%); pointer-events: none; } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .stat-icon { width: 48px; height: 48px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; background: var(--brand-tint); border: 1px solid rgba(48,215,163,.18); color: var(--brand-dark); font-size: 22px; flex-shrink: 0; } .stat-icon.stat-icon--warning { background: var(--warning-bg); border-color: rgba(245,158,11,.20); color: var(--warning); } .stat-icon.stat-icon--danger { background: var(--danger-bg); border-color: rgba(239,68,68,.20); color: var(--danger); } .stat-icon.stat-icon--info { background: var(--info-bg); border-color: rgba(59,130,246,.20); color: var(--info); } .stat-icon.stat-icon--success { background: var(--success-bg); border-color: rgba(34,197,94,.20); color: var(--success); } .stat-value { font-size: 30px; font-weight: 800; letter-spacing: -0.04em; color: var(--text); line-height: 1; margin-top: var(--space-3); } .stat-label { font-size: 12px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.03em; text-transform: uppercase; margin-top: var(--space-1); } .stat-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-full); margin-top: var(--space-2); } .stat-trend--up { background: var(--success-bg); color: var(--success); } .stat-trend--down { background: var(--danger-bg); color: var(--danger); } /* ============================================================ 9. PAGE HEADER (dentro das páginas do app) ============================================================ */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-6); } .page-header-title { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); margin: 0; line-height: 1.1; } .page-header-sub { font-size: 13px; font-weight: 500; color: var(--text-muted); margin-top: var(--space-1); } .page-header-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } /* ============================================================ 10. SECTION CARD (container de seção) ============================================================ */ .section-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); overflow: hidden; } .section-card-header { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .section-card-title { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); margin: 0; } .section-card-body { padding: var(--space-6); } .section-card-footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); background: var(--surface-2); } /* ============================================================ 11. DATA TABLE (dentro de section-card) ============================================================ */ .ec-table-wrap { overflow-x: auto; } .ec-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .ec-table th { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); background: var(--surface-2); border-bottom: 1px solid var(--border-2); padding: 10px 16px; white-space: nowrap; } .ec-table td { vertical-align: middle; padding: 13px 16px; border-bottom: 1px solid var(--border); color: var(--text); } .ec-table tr:last-child td { border-bottom: 0; } .ec-table tbody tr { transition: background var(--dur-fast) ease; } .ec-table tbody tr:hover td { background: var(--brand-tint); } [data-theme="dark"] .ec-table th { background: var(--surface-3); } [data-theme="dark"] .ec-table tbody tr:hover td { background: rgba(48,215,163,.08); } /* ============================================================ 12. FORM SECTIONS ============================================================ */ .form-section { margin-bottom: var(--space-8); } .form-section-title { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); } /* ============================================================ 13. AVATAR (usuário) ============================================================ */ .avatar { border-radius: var(--r-full); object-fit: cover; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--surface-2); color: var(--brand); } .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .avatar-sm { width: 32px; height: 32px; font-size: 15px; } .avatar-md { width: 54px; height: 54px; font-size: 22px; } .avatar-lg { width: 60px; height: 60px; font-size: 26px; } .avatar-xl { width: 80px; height: 80px; font-size: 32px; } .avatar-2xl { width: 110px; height: 110px; font-size: 42px; } .avatar-initials { display: flex; align-items: center; justify-content: center; border-radius: var(--r-full); background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font-weight: 700; font-family: var(--font-sans); flex-shrink: 0; } .avatar-initials.avatar-sm { width: 32px; height: 32px; font-size: 12px; } .avatar-initials.avatar-md { width: 44px; height: 44px; font-size: 15px; } .avatar-initials.avatar-lg { width: 60px; height: 60px; font-size: 20px; } .avatar-initials.avatar-xl { width: 80px; height: 80px; font-size: 26px; } .avatar-initials.avatar-2xl { width: 110px; height: 110px; font-size: 36px; } /* ============================================================ 14. CHIP / TAG ============================================================ */ .ec-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-full); background: var(--surface-3); border: 1px solid var(--border); color: var(--text-2); font-size: 12px; font-weight: 600; line-height: 1; transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease; } .ec-chip:hover { background: var(--brand-tint); border-color: rgba(48,215,163,.25); color: var(--brand-ink); } .ec-chip--active { background: var(--brand-tint); border-color: rgba(48,215,163,.30); color: var(--brand-ink); } /* ============================================================ 15. OFFER CARD (selecionável) ============================================================ */ .ec-offer-card { width: 100%; text-align: left; border: 2px solid var(--border); border-radius: var(--r-xl); padding: var(--space-5); background: var(--surface); box-shadow: var(--shadow-xs); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) ease, border-color var(--dur-base) ease; cursor: pointer; } .ec-offer-card:hover { transform: translateY(-2px); border-color: rgba(48,215,163,.35); box-shadow: var(--shadow-md); } .ec-offer-card.is-selected { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring), var(--shadow-md); background: var(--brand-tint); } .ec-offer-card:focus-visible { outline: none; box-shadow: var(--ring); } /* Offer card inner elements */ .ec-offer-title { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -.01em; } .ec-offer-meta { display: flex; gap: 10px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; margin-top: 4px; } .ec-offer-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; } .ec-offer-price-col { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; } .ec-offer-price { font-size: 18px; font-weight: 800; color: var(--brand); white-space: nowrap; letter-spacing: -.02em; } .ec-offer-check { font-size: 18px; color: var(--brand); display: none !important; margin-top: 4px; } .ec-offer-card.is-selected .ec-offer-check { display: block !important; } /* ============================================================ 16. SLOT BUTTON (agendamento) ============================================================ */ .ec-slot { width: 100%; border-radius: var(--r-md); padding: 10px 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform var(--dur-fast) ease, box-shadow var(--dur-base) ease, border-color var(--dur-base) ease, background var(--dur-base) ease, color var(--dur-base) ease; } .ec-slot:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: var(--shadow-sm); } .ec-slot:focus-visible { outline: none; box-shadow: var(--ring); } .ec-slot.is-selected { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); border-color: var(--brand); color: #fff; box-shadow: 0 4px 16px var(--brand-ring); } .ec-slot:disabled, .ec-slot.is-disabled { cursor: not-allowed; opacity: .45; transform: none !important; box-shadow: none !important; } .ec-slot-time { font-size: 15px; font-weight: 800; letter-spacing: -.02em; line-height: 1; } .ec-slot-dur { font-size: 10px; font-weight: 600; color: var(--text-muted); line-height: 1; } .ec-slot.is-selected .ec-slot-dur { color: rgba(255,255,255,.75); } .ec-slot-check { font-size: 13px; display: none !important; } .ec-slot.is-selected .ec-slot-check { display: block !important; } /* ============================================================ 17. AUTH PAGES (login / register split) ============================================================ */ .ec-auth-body { min-height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr; background: var(--bg); } .ec-auth-panel-left { background: linear-gradient(150deg, var(--sidebar-from) 0%, var(--sidebar-to) 100%); display: flex; align-items: center; justify-content: center; padding: var(--space-12) var(--space-10); position: relative; overflow: hidden; } .ec-auth-panel-left::after { content: ""; position: absolute; width: 600px; height: 600px; right: -300px; top: -300px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 70%); border-radius: 50%; animation: ecFloat 12s var(--ease-soft) infinite; pointer-events: none; } .ec-auth-panel-left-inner { width: 100%; max-width: 420px; text-align: center; color: #fff; position: relative; z-index: 2; } .ec-auth-headline { font-size: clamp(30px, 3.5vw, 44px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; text-shadow: 0 4px 24px rgba(0,0,0,.18); margin: var(--space-6) 0 var(--space-3); } .ec-auth-subline { font-size: 15px; line-height: 1.6; opacity: .88; max-width: 380px; margin: 0 auto; } .ec-auth-panel-right { display: flex; align-items: center; justify-content: center; padding: var(--space-12) var(--space-10); background: var(--bg); } .ec-auth-form-wrap { width: 100%; max-width: 440px; } .ec-auth-form-title { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); margin-bottom: var(--space-6); } .ec-auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-md); padding: var(--space-6); } .ec-auth-field { display: flex; align-items: center; border: 1px solid var(--border-2); border-radius: var(--r-md); background: var(--surface); overflow: hidden; transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease; } .ec-auth-field:focus-within { border-color: var(--brand); box-shadow: var(--ring); } .ec-auth-field-icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; color: var(--text-faint); border-right: 1px solid var(--border); background: var(--surface-3); flex-shrink: 0; } .ec-auth-field input { border: 0 !important; box-shadow: none !important; height: 46px; padding: 0 var(--space-4); font-size: 14px; background: transparent !important; color: var(--text); flex: 1; min-width: 0; font-family: var(--font-sans); } .ec-auth-field input:focus { outline: none; } .ec-auth-field input::placeholder { color: var(--text-faint); } [data-theme="dark"] .ec-auth-field { background: var(--surface-2); } [data-theme="dark"] .ec-auth-field-icon { background: var(--surface-3); } .ec-auth-btn { width: 100%; height: 48px; border-radius: var(--r-full); background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); color: #fff !important; font-weight: 700; font-size: 14.5px; border: none; box-shadow: 0 4px 20px var(--brand-ring); transition: transform var(--dur-fast) ease, box-shadow var(--dur-base) ease, filter var(--dur-fast) ease; display: flex; align-items: center; justify-content: center; gap: var(--space-2); } .ec-auth-btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 8px 32px var(--brand-ring); color: #fff !important; } .ec-auth-link { font-size: 13px; font-weight: 600; color: var(--brand-dark); } .ec-auth-link:hover { text-decoration: underline; } /* Responsivo auth */ @media (max-width: 991.98px) { .ec-auth-body { grid-template-columns: 1fr; } .ec-auth-panel-left { padding: var(--space-8) var(--space-5); min-height: 240px; } .ec-auth-panel-right { padding: var(--space-6) var(--space-5); } .ec-auth-panel-left::after { display: none; } } /* ============================================================ 18. PUBLIC HOME PAGE ============================================================ */ /* ── Navbar tweaks for home ── */ .ec-navbar { padding: 0; } .ec-navbar .container { min-height: 64px; } [data-theme="dark"] .ec-navbar { border-bottom-color: var(--border); } /* ── Hero ─────────────────────────────────────────────────── */ .ec-home-hero { position: relative; overflow: hidden; padding: 80px 0 72px; background: linear-gradient(135deg, #0b1f2e 0%, #0f3244 45%, #0d2e1c 100%); } .ec-home-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 70% at 80% 40%, rgba(48,215,163,.13) 0%, transparent 65%), radial-gradient(ellipse 50% 60% at 10% 90%, rgba(78,187,193,.09) 0%, transparent 55%); pointer-events: none; } .ec-home-hero__orb { position: absolute; border-radius: 50%; filter: blur(72px); pointer-events: none; } .ec-home-hero__orb--1 { width: 520px; height: 520px; background: var(--brand); opacity: .11; top: -200px; right: -80px; } .ec-home-hero__orb--2 { width: 320px; height: 320px; background: var(--brand-2); opacity: .09; bottom: -100px; left: 8%; } .ec-home-kicker { display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: var(--r-full); background: rgba(48,215,163,.12); border: 1px solid rgba(48,215,163,.26); color: var(--brand); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--space-6); } .ec-home-title { font-size: clamp(32px, 5.5vw, 58px); font-weight: 900; letter-spacing: -0.045em; line-height: 1.04; color: #fff; margin-bottom: var(--space-5); } .ec-home-sub { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.82); max-width: 520px; margin-bottom: var(--space-8); } .ec-home-cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-10); } .btn-ghost-white { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20); color: #fff; font-weight: 700; backdrop-filter: blur(8px); transition: background var(--dur-base) ease, border-color var(--dur-base) ease; } .btn-ghost-white:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); color: #fff; } .ec-home-stats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); } .ec-home-stat-num { font-size: 30px; font-weight: 900; letter-spacing: -0.04em; color: #fff; line-height: 1; } .ec-home-stat-label { font-size: 11.5px; color: rgba(255,255,255,.68); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; } .ec-home-stat-divider { width: 1px; height: 32px; background: rgba(255,255,255,.14); flex-shrink: 0; } /* ── Search card ── */ .ec-home-search { background: var(--surface); border-radius: var(--r-2xl); padding: var(--space-8); box-shadow: 0 40px 80px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.06); position: relative; z-index: 2; } .ec-home-search-title { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); margin-bottom: var(--space-1); } .ec-home-search-sub { font-size: 13px; color: #94a3b8; margin-bottom: var(--space-5); } .ec-home-search .input-group-text { background: var(--surface-2); border-color: var(--border-2); color: var(--text-muted); border-right: 0; } .ec-home-search .form-control, .ec-home-search .form-select { height: 48px; font-size: 14px; border-color: var(--border-2); border-left: 0; } .ec-home-search .form-control:focus, .ec-home-search .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); } .ec-home-search-btn { height: 52px; border-radius: var(--r-lg) !important; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; } .ec-tag-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--border); font-size: 11.5px; font-weight: 600; color: var(--text-muted); } [data-theme="dark"] .ec-home-search { background: var(--surface-2); box-shadow: 0 40px 80px rgba(0,0,0,.6), 0 0 0 1px var(--border); } /* ── Section headers ── */ .ec-section-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: var(--brand-dark); margin-bottom: var(--space-2); } .ec-section-title { font-size: clamp(24px, 3.2vw, 36px); font-weight: 800; letter-spacing: -0.035em; color: var(--text); margin-bottom: 0; } .ec-section-desc { font-size: 15px; color: #a8b5c5; max-width: 580px; margin-left: auto; margin-right: auto; } .ec-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); flex-wrap: wrap; } /* ── Category grid & cards ─────────────────────────────────── */ .ec-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-4); } .ec-cat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--space-5); text-decoration: none; display: block; cursor: pointer; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) ease, border-color var(--dur-base) ease; } .ec-cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(48,215,163,.30); text-decoration: none; } .ec-cat-icon { width: 48px; height: 48px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; background: var(--brand-tint); border: 1px solid rgba(48,215,163,.18); font-size: 22px; color: var(--brand-dark); margin-bottom: var(--space-3); transition: background var(--dur-base) ease, color var(--dur-base) ease, border-color var(--dur-base) ease; } .ec-cat-icon--lg { width: 64px; height: 64px; font-size: 1.75rem; border-radius: var(--r-lg); margin-bottom: 0; } .ec-hero-tint { background: var(--brand-tint); } .ec-hero-subtitle { max-width: 520px; } .ec-status-dot { font-size: 0.4rem; color: var(--brand); align-self: center; line-height: 1; } .ec-step-title { font-size: 13.5px; font-weight: 600; color: var(--text); } .ec-cat-card:hover .ec-cat-icon { background: var(--brand); color: #fff; border-color: var(--brand); } .ec-cat-name { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; margin-bottom: var(--space-1); } .ec-cat-count { font-size: 12px; color: var(--text-muted); font-weight: 500; } /* ── Mentor home cards ─────────────────────────────────────── */ .ec-mentor-home-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) ease, border-color var(--dur-base) ease; } .ec-mentor-home-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(48,215,163,.24); } .ec-mentor-home-card__photo-wrap { position: relative; width: 100%; aspect-ratio: 4 / 3; padding: 12px; overflow: hidden; background: radial-gradient(140% 120% at 50% 20%, var(--brand-tint), transparent), linear-gradient(to right, color-mix(in srgb, var(--surface) 96%, var(--brand) 4%), var(--surface)); border-radius: 20px; flex-shrink: 0; } .ec-mentor-home-card__photo-wrap img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; transition: transform .4s var(--ease-out); border-radius: 12px; background: color-mix(in srgb, var(--surface) 94%, #ffffff 6%); box-shadow: 0 4px 12px rgba(10, 26, 30, 0.08); } .ec-mentor-home-card:hover .ec-mentor-home-card__photo-wrap img { transform: scale(1.04); } .ec-mentor-home-card__photo-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 52px; color: var(--brand); background: var(--brand-tint); } .ec-mentor-home-card__badge { position: absolute; top: var(--space-3); right: var(--space-3); background: rgba(0,0,0,.52); backdrop-filter: blur(8px); border-radius: var(--r-full); padding: 4px 11px; font-size: 11px; font-weight: 700; color: #fff; display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,.12); } .ec-mentor-home-card__body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; } .ec-mentor-home-card__name { font-size: 17px; font-weight: 800; letter-spacing: -0.025em; color: var(--text); margin-bottom: 4px; line-height: 1.2; } .ec-mentor-home-card__title { font-size: 13px; color: var(--text-muted); line-height: 1.45; margin-bottom: var(--space-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ec-mentor-home-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); flex: 1; align-content: flex-start; } .ec-mentor-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--border); font-size: 11.5px; font-weight: 600; color: var(--text-2); text-decoration: none; transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease; } .ec-mentor-tag:hover, a.ec-mentor-tag:hover { background: var(--brand-tint); border-color: rgba(48,215,163,.35); color: var(--brand-dark); text-decoration: none; } .ec-mentor-tag--brand { background: var(--brand-tint); border-color: rgba(48,215,163,.25); color: var(--brand-dark); } .ec-mentor-home-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: auto; } .ec-mentor-home-card__actions .btn { font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 5px; } /* ── How it works ── */ .ec-home-how-section { background: var(--surface-2); } [data-theme="dark"] .ec-home-how-section { background: var(--surface-2); } .ec-step { position: relative; padding: var(--space-6); background: var(--surface); border-radius: var(--r-xl); border: 1px solid var(--border); height: 100%; overflow: hidden; transition: box-shadow var(--dur-base) ease, border-color var(--dur-base) ease; } .ec-step:hover { box-shadow: var(--shadow-md); border-color: rgba(48,215,163,.22); } .ec-step__num { position: absolute; top: var(--space-4); right: var(--space-5); font-size: 52px; font-weight: 900; color: var(--brand); opacity: .10; line-height: 1; letter-spacing: -0.05em; pointer-events: none; font-variant-numeric: tabular-nums; } .ec-step__icon { width: 48px; height: 48px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; background: var(--brand-tint); color: var(--brand-dark); font-size: 22px; margin-bottom: var(--space-4); } .ec-step__title { font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); margin-bottom: var(--space-2); } .ec-step__desc { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; margin: 0; } /* ── Rules + CTA cards ── */ .ec-rules-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--space-6); height: 100%; } .ec-rules-card--cta { background: linear-gradient(135deg, var(--brand-tint) 0%, var(--surface) 100%); border-color: rgba(48,215,163,.22); } .ec-rules-card__head { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; } .ec-rules-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); } .ec-rules-list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 13.5px; color: var(--text-2); line-height: 1.45; } .ec-rules-list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex-shrink: 0; margin-top: 5px; } /* ── Footer ── */ .ec-home-footer { border-top: 1px solid var(--border); padding: var(--space-12) 0 var(--space-8); background: var(--surface); } .ec-home-footer-brand { font-size: 16px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); margin-bottom: var(--space-2); } .ec-home-footer-desc { font-size: 13px; color: var(--text-muted); line-height: 1.55; max-width: 280px; } .ec-home-footer-heading { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-4); } .ec-home-footer-link { font-size: 13.5px; color: var(--text-2); text-decoration: none; font-weight: 500; transition: color var(--dur-fast) ease; display: block; } .ec-home-footer-link:hover { color: var(--brand-dark); text-decoration: none; } .ec-home-footer-bottom { font-size: 12.5px; color: var(--text-faint); } .shadow-soft { box-shadow: var(--shadow-sm); } /* min-height hero on small screens */ @media (max-width: 991.98px) { .ec-home-hero { padding: 56px 0 52px; } .ec-home-title { letter-spacing: -0.035em; } .ec-home-search { margin-top: var(--space-6); } } @media (max-width: 575.98px) { .ec-home-hero { padding: 44px 0 40px; } .ec-home-stats { gap: var(--space-4); } .ec-home-stat-divider { display: none; } } /* Mentor cards image — old class from prev version */ .mentor-avatar { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center top; display: block; } /* ============================================================ 19. EMPTY STATE ============================================================ */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-16) var(--space-6); gap: var(--space-4); } .empty-state-icon { width: 64px; height: 64px; border-radius: var(--r-xl); display: flex; align-items: center; justify-content: center; background: var(--surface-3); border: 1px solid var(--border); font-size: 28px; color: var(--text-faint); } .empty-state-title { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); margin: 0; } .empty-state-text { font-size: 13.5px; color: var(--text-muted); max-width: 380px; margin: 0; } /* ============================================================ 20. LOADING SKELETON ============================================================ */ @keyframes shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } } .skeleton { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%); background-size: 600px 100%; animation: shimmer 1.6s infinite linear; } .skeleton-text { height: 14px; width: 100%; } .skeleton-text--sm { height: 12px; width: 60%; } .skeleton-circle { border-radius: var(--r-full); } /* ============================================================ 21. QUILL EDITOR (integrado ao sistem) ============================================================ */ .ql-toolbar.ql-snow { border: 1px solid var(--border-2) !important; border-radius: var(--r-md) var(--r-md) 0 0 !important; background: var(--surface-2) !important; font-family: var(--font-sans) !important; } .ql-container.ql-snow { border: 1px solid var(--border-2) !important; border-top: 0 !important; border-radius: 0 0 var(--r-md) var(--r-md) !important; min-height: 160px; background: var(--surface) !important; font-family: var(--font-sans) !important; font-size: 14px; color: var(--text); } .ql-editor { padding: var(--space-4) !important; } .ql-editor.ql-blank::before { color: var(--text-faint) !important; } [data-theme="dark"] .ql-toolbar.ql-snow { background: var(--surface-3) !important; border-color: var(--border) !important; } [data-theme="dark"] .ql-container.ql-snow { background: var(--surface-2) !important; border-color: var(--border) !important; } [data-theme="dark"] .ql-snow .ql-stroke { stroke: var(--text-muted); } [data-theme="dark"] .ql-snow .ql-fill { fill: var(--text-muted); } /* ============================================================ 22. NOTIFICATION TOAST ============================================================ */ .ec-toast-wrap { position: fixed; bottom: var(--space-6); right: var(--space-6); z-index: 99999; display: flex; flex-direction: column; gap: var(--space-3); pointer-events: none; } .ec-toast { pointer-events: all; display: flex; align-items: flex-start; gap: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xl); padding: var(--space-4) var(--space-5); min-width: 280px; max-width: 360px; animation: toastIn var(--dur-slow) var(--ease-out); } @keyframes toastIn { from { opacity: 0; transform: translateX(24px) scale(.96); } to { opacity: 1; transform: translateX(0) scale(1); } } .ec-toast-icon { flex-shrink: 0; font-size: 20px; } .ec-toast-icon--success { color: var(--success); } .ec-toast-icon--danger { color: var(--danger); } .ec-toast-icon--warning { color: var(--warning); } .ec-toast-title { font-size: 13.5px; font-weight: 700; color: var(--text); } .ec-toast-message { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; } /* ============================================================ 23. ANIMATIONS GLOBAIS ============================================================ */ @keyframes ecFloat { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(10px, -8px, 0) rotate(1.5deg) scale(1.02); } 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .anim-fade-in { animation: fadeIn var(--dur-slow) var(--ease-out) both; } /* Staggered */ .anim-stagger > * { animation: fadeIn var(--dur-slow) var(--ease-out) both; } .anim-stagger > *:nth-child(1) { animation-delay: 40ms; } .anim-stagger > *:nth-child(2) { animation-delay: 80ms; } .anim-stagger > *:nth-child(3) { animation-delay: 120ms; } .anim-stagger > *:nth-child(4) { animation-delay: 160ms; } .anim-stagger > *:nth-child(5) { animation-delay: 200ms; } .anim-stagger > *:nth-child(6) { animation-delay: 240ms; } /* ============================================================ 24. UTILITY CLASSES (substituem inline styles) ============================================================ */ /* Backgrounds */ .bg-surface { background: var(--surface); } .bg-surface-2 { background: var(--surface-2); } .bg-surface-3 { background: var(--surface-3); } .bg-brand { background: var(--brand); } .bg-brand-tint{ background: var(--brand-tint); } /* Text */ .text-brand-dark { color: var(--brand-dark); } .text-text { color: var(--text); } .text-text-2 { color: var(--text-2); } /* Border */ .border-brand { border-color: rgba(48,215,163,.35) !important; } /* Radius (utilitários do Boostrap sobrescrevendo rounding) */ .rounded-xl { border-radius: var(--r-xl) !important; } .rounded-2xl { border-radius: var(--r-2xl) !important; } .rounded-full { border-radius: var(--r-full) !important; } .rounded-lg { border-radius: var(--r-lg) !important; } .rounded-md { border-radius: var(--r-md) !important; } /* Shadows */ .shadow-none { box-shadow: none !important; } .shadow-xs { box-shadow: var(--shadow-xs) !important; } .shadow-sm { box-shadow: var(--shadow-sm) !important; } .shadow-md { box-shadow: var(--shadow-md) !important; } .shadow-lg { box-shadow: var(--shadow-lg) !important; } /* Font weight */ .fw-500 { font-weight: 500 !important; } .fw-600 { font-weight: 600 !important; } .fw-700 { font-weight: 700 !important; } .fw-800 { font-weight: 800 !important; } /* Letter spacing */ .ls-tight { letter-spacing: -0.03em; } .ls-normal { letter-spacing: 0; } /* ============================================================ 25. RESPONSIVE (App Shell) ============================================================ */ @media (max-width: 991.98px) { .app-shell { display: block; } .app-sidebar { display: none !important; } .app-header-inner { padding: 0 var(--space-4); } .app-main { padding: var(--space-4); } .app-footer { padding: 0 var(--space-4) var(--space-4); } .stat-value { font-size: 24px; } .page-header-title { font-size: 22px; } } @media (max-width: 575.98px) { .ec-cat-grid { grid-template-columns: repeat(2, 1fr); } .ec-search-bar { flex-wrap: wrap; } } /* ============================================================ 26. MODAL / OFFCANVAS z-index overrides finais ============================================================ */ body.modal-open { overflow: hidden !important; } .modal-backdrop { position: fixed !important; inset: 0 !important; } .modal { position: fixed !important; inset: 0 !important; isolation: isolate !important; } /* ============================================================ 27. SCROLLBAR (Webkit) ============================================================ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: var(--r-full); } ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); } /* ============================================================ 28. MENTOR PROFILE PAGE ============================================================ */ .ec-profile-header { background: linear-gradient(135deg, #0b1f2e 0%, #0d2e1c 100%); padding: 52px 0 44px; position: relative; overflow: hidden; } .ec-profile-header::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 80% at 90% 50%, rgba(48,215,163,.10), transparent 60%); pointer-events: none; } .ec-profile-avatar { width: 120px; height: 120px; border-radius: var(--r-xl); object-fit: cover; object-position: center top; border: 3px solid rgba(255,255,255,.18); box-shadow: 0 16px 40px rgba(0,0,0,.36); flex-shrink: 0; } @media (max-width: 575.98px) { .ec-profile-header { padding: 36px 0 32px; } .ec-profile-avatar { width: 80px; height: 80px; border-radius: var(--r-lg); } } .ec-profile-name { font-size: clamp(22px, 3.5vw, 32px); font-weight: 800; letter-spacing: -0.035em; color: #fff; margin: 0 0 6px; line-height: 1.1; } .ec-profile-headline { font-size: 15px; color: rgba(255,255,255,.65); margin: 0 0 16px; line-height: 1.4; } .ec-profile-stat { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: var(--r-full); background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.85); font-size: 12.5px; font-weight: 600; } .ec-profile-stat i { color: var(--brand); } .ec-action-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-md); padding: 1.5rem; position: sticky; top: 80px; } .ec-action-card-title { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.25rem; } .ec-section-box { background: color-mix(in srgb, var(--surface) 96%, var(--brand-tint) 4%); border: 1px solid color-mix(in srgb, var(--border) 88%, transparent); border-radius: var(--r-xl); box-shadow: 0 12px 28px rgba(10, 26, 30, 0.09); padding: 1.5rem; } .ec-section-box + .ec-section-box { margin-top: 1.25rem; } .ec-section-box-title { font-size: 1rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; margin: 0 0 1rem; display: flex; align-items: center; gap: 8px; } .ec-section-box-icon { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--brand-tint); color: var(--brand-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .ec-badge-soft { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--r-full); padding: 5px 12px; font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; } .ec-info-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: .85rem 1rem; height: 100%; } .ec-info-card .k { color: var(--text-faint); font-size: .8rem; margin-bottom: .25rem; } .ec-info-card .v { font-weight: 700; color: var(--text); font-size: .9rem; } .ec-bio p { margin-bottom: .9rem; color: var(--text-muted); font-size: .9375rem; line-height: 1.75; } .ec-bio p:last-child { margin-bottom: 0; } .ec-bio ul, .ec-bio ol { padding-left: 1.25rem; color: var(--text-muted); font-size: .9375rem; line-height: 1.75; margin-bottom: .9rem; } [data-theme="dark"] .ec-badge-soft { background: var(--surface-2); } [data-theme="dark"] .ec-info-card { background: var(--surface-2); } [data-theme="dark"] .ec-action-card { background: var(--surface); } [data-theme="dark"] .ec-section-box { background: var(--surface); } /* ============================================================ 29. MENTORES LISTING PAGE ============================================================ */ .ec-filter-sidebar { position: sticky; top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); padding: 1.25rem; } .ec-filter-link { text-decoration: none; } .ec-filter-link:hover .badge { border-color: var(--brand) !important; } .ec-filter-badge { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--r-lg); padding: .5rem .75rem; font-size: .82rem; font-weight: 500; white-space: nowrap; width: 100%; display: flex; align-items: center; } .ec-filter-badge.active { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); } .ec-mentor-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .2s, box-shadow .2s; height: 100%; } .ec-mentor-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .ec-mentor-card-body { padding: 1.25rem; } .ec-mentor-card-avatar { width: 80px; height: 80px; border-radius: 18px; object-fit: cover; box-shadow: 0 6px 18px rgba(15,23,42,.1); border: 2px solid var(--surface-2); flex-shrink: 0; } .ec-mentor-card-name { font-weight: 700; font-size: 1rem; color: var(--text); line-height: 1.25; } .ec-mentor-card-title { font-size: .82rem; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ec-mentor-card-actions .btn { font-weight: 700; font-size: 13.5px; } /* ============================================================ 30. AGENDA / BOOKING PAGE ============================================================ */ /* — Hero strip — */ .ec-booking-hero { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); padding: var(--space-6) 0; } .ec-booking-mentor-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: center top; border: 3px solid rgba(255,255,255,.40); flex-shrink: 0; } .ec-booking-mentor-name { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -.03em; line-height: 1.2; } .ec-booking-mentor-title { font-size: 13px; color: rgba(255,255,255,.80); margin-top: 3px; } .ec-booking-trust-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.15); color: rgba(255,255,255,.92); font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-full); border: 1px solid rgba(255,255,255,.20); white-space: nowrap; } /* — Booking grid — */ .ec-booking-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 992px) { .ec-booking-grid { grid-template-columns: 7fr 5fr; grid-template-rows: auto auto; } .ec-booking-grid-c1 { grid-column: 1; grid-row: 1; } .ec-booking-grid-c2 { grid-column: 1; grid-row: 2; } .ec-booking-grid-c3 { grid-column: 2; grid-row: 1 / 3; } } /* — Booking cards — */ .ec-booking-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; } .ec-booking-card-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 20px 0; } .ec-booking-card-body { padding: 16px 20px 20px; flex: 1; } /* — Step badge — */ .ec-step-badge { width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .ec-booking-card-title { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.01em; line-height: 1.2; } .ec-booking-card-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 3px; } /* — Date strip — */ .ec-booking-dates { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } .ec-booking-dates::-webkit-scrollbar { display: none; } .ec-booking-date { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 12px; border-radius: var(--r-md); border: 1.5px solid var(--border); background: var(--surface); text-decoration: none; flex-shrink: 0; min-width: 58px; transition: border-color var(--dur-base) ease, background var(--dur-base) ease, box-shadow var(--dur-base) ease, transform var(--dur-fast) ease; } .ec-booking-date:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .ec-booking-date.is-active { background: var(--brand); border-color: var(--brand); box-shadow: 0 4px 16px var(--brand-ring); transform: translateY(-2px); } .ec-booking-date-wd, .ec-booking-date-mo { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); } .ec-booking-date-num { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -.03em; line-height: 1; } .ec-booking-date.is-active .ec-booking-date-wd, .ec-booking-date.is-active .ec-booking-date-mo { color: rgba(255,255,255,.75); } .ec-booking-date.is-active .ec-booking-date-num { color: #fff; } /* — Slots grid — */ .ec-booking-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; } /* — Empty state — */ .ec-booking-empty { text-align: center; padding: var(--space-8) var(--space-4); color: var(--text-muted); font-size: 13.5px; } /* — Sidebar sticky — */ .ec-booking-sidebar-inner { display: flex; flex-direction: column; gap: 16px; } @media (min-width: 992px) { /* sticky removed: col is now stretch-height flex so sticky clips inside it */ } /* — Summary card — */ .ec-booking-summary-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-xl); padding: 20px; box-shadow: var(--shadow-sm); } .ec-booking-summary-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .ec-booking-summary-row:last-of-type { border-bottom: none; } .ec-booking-summary-icon { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--brand-tint); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .ec-booking-summary-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-bottom: 2px; } .ec-booking-summary-value { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.2; } .ec-booking-summary-value.is-empty { color: var(--text-faint); font-weight: 400; font-style: italic; font-size: 12px; } /* — Summary card full-width variant — */ .ec-booking-summary-card--full { background: linear-gradient(135deg, var(--brand-tint) 0%, var(--surface) 65%); border: 2px solid var(--brand); box-shadow: 0 4px 24px var(--brand-ring); } .ec-booking-summary-inner { display: flex; flex-direction: column; gap: 16px; } .ec-booking-summary-heading { font-size: 13px; font-weight: 700; letter-spacing: -.01em; color: var(--brand); display: flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap; } .ec-booking-summary-items { display: flex; flex-direction: column; flex: 1; min-width: 0; } .ec-booking-summary-action { flex-shrink: 0; } @media (min-width: 992px) { .ec-booking-summary-inner { flex-direction: row; align-items: center; } .ec-booking-summary-items { flex-direction: row; } .ec-booking-summary-card--full .ec-booking-summary-row { flex: 1; border-bottom: none; border-right: 1px solid var(--border); padding: 0 20px; } .ec-booking-summary-card--full .ec-booking-summary-row:first-child { padding-left: 0; } .ec-booking-summary-card--full .ec-booking-summary-row:last-of-type { border-right: none; } } [data-theme="dark"] .ec-booking-summary-card--full { background: linear-gradient(135deg, var(--brand-tint) 0%, var(--surface) 65%); } /* — Mobile sticky CTA bar — */ .ec-booking-mobile-bar { position: fixed; bottom: 0; left: 0; right: 0; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); padding: 14px 20px; box-shadow: 0 -4px 24px rgba(0,0,0,.15); z-index: 900; } @media (min-width: 992px) { .ec-booking-mobile-bar { display: none !important; } } @media (max-width: 991.98px) { body.has-mobile-cta { padding-bottom: 72px; } } /* Dark mode */ [data-theme="dark"] .ec-booking-card { background: var(--surface); } [data-theme="dark"] .ec-booking-summary-card { background: var(--surface); } [data-theme="dark"] .ec-booking-date { background: var(--surface-2); } /* Legacy aliases (keep for backward compat) */ .ec-booking-step-title { font-weight: 700; font-size: 1rem; color: var(--text); letter-spacing: -0.02em; } .ec-booking-summary { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 1.25rem; } .ec-package-card { background: var(--surface-2); border: 2px solid var(--border); border-radius: var(--r-xl); padding: 1.25rem; cursor: pointer; transition: border-color .15s, background .15s; } .ec-package-card:hover, .ec-package-card.selected { border-color: var(--brand); background: var(--brand-tint); } .ec-package-price { font-size: 1.5rem; font-weight: 800; color: var(--brand); } [data-theme="dark"] .ec-booking-summary { background: var(--surface-2); } /* ============================================================ 31. CHECKOUT PAGE ============================================================ */ /* Timer bar */ .ec-checkout-timer-bar { background: var(--brand-tint); color: var(--brand); border-bottom: 1px solid var(--brand); text-align: center; font-size: 13px; font-weight: 600; padding: 10px 16px; } .ec-checkout-timer-bar.ec-timer-urgent { background: #fff3cd; color: #856404; border-color: #ffc107; } .ec-checkout-timer-bar.ec-timer-expired { background: #f8d7da; color: #842029; border-color: #f5c2c7; } [data-theme="dark"] .ec-checkout-timer-bar { background: rgba(var(--brand-rgb, 48,215,163),.12); } /* Main layout */ .ec-checkout-main { padding-top: 2rem; padding-bottom: 3rem; } .ec-checkout-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 992px) { .ec-checkout-layout { grid-template-columns: 1fr 380px; align-items: start; } } /* Cards */ .ec-checkout-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); padding: 1.5rem; } .ec-checkout-card-title { font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 10px; } .ec-checkout-card-title .ec-step-badge { width: 24px; height: 24px; font-size: 11px; } /* Logged-in user row */ .ec-checkout-user-row { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--brand-tint); border-radius: var(--r-md); margin-bottom: 1rem; } .ec-checkout-user-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Payment method buttons */ .ec-pay-methods { display: flex; gap: 12px; flex-wrap: wrap; } .ec-pay-method-btn { flex: 1; min-width: 140px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px; border-radius: var(--r-lg); border: 2px solid var(--border); background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; color: var(--text); } .ec-pay-method-btn i { font-size: 22px; color: var(--text-muted); transition: color .15s; } .ec-pay-method-btn span { font-size: 14px; font-weight: 600; } .ec-pay-method-btn small { font-size: 11px; color: var(--text-muted); } .ec-pay-method-btn:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); } .ec-pay-method-btn.is-active { border-color: var(--brand); background: var(--brand-tint); box-shadow: 0 0 0 3px var(--brand-ring); } .ec-pay-method-btn.is-active i { color: var(--brand); } .ec-pay-method-btn.is-active small { color: var(--brand); } /* Pay button */ .ec-checkout-pay-btn { width: 100%; height: 52px; margin-top: 1.25rem; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); color: #fff; border: none; border-radius: var(--r-lg); font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .15s, box-shadow .15s; box-shadow: 0 4px 16px var(--brand-ring); } .ec-checkout-pay-btn:hover { opacity: .92; box-shadow: 0 6px 24px var(--brand-ring); } .ec-checkout-pay-btn:disabled { opacity: .6; cursor: not-allowed; } /* Trust line */ .ec-checkout-trust { text-align: center; margin-top: .75rem; font-size: 11px; color: var(--text-muted); } /* Summary card */ .ec-checkout-summary { position: sticky; top: 80px; } .ec-checkout-summary-title { font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 1rem; } .ec-checkout-summary-mentor { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); } .ec-checkout-summary-mentor-name { font-weight: 700; font-size: 15px; color: var(--text); } .ec-checkout-summary-mentor-role { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .ec-checkout-summary-rows { display: flex; flex-direction: column; gap: 14px; margin-bottom: 1.25rem; } .ec-checkout-summary-row { display: flex; align-items: flex-start; gap: 12px; } .ec-checkout-summary-row-icon { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--brand-tint); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; margin-top: 1px; } .ec-checkout-summary-row-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 700; margin-bottom: 2px; } .ec-checkout-summary-row-value { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; } .ec-checkout-total { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0 .75rem; border-top: 1.5px solid var(--border); margin-top: .5rem; font-size: 14px; font-weight: 600; color: var(--text-muted); } .ec-checkout-total-value { font-size: 22px; font-weight: 800; color: var(--brand); letter-spacing: -.02em; } .ec-checkout-trust-mini { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .5rem; } .ec-checkout-trust-mini span { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; } .ec-checkout-trust-mini i { color: var(--brand); } /* PIX panel */ .ec-pix-card { text-align: center; } .ec-pix-header { display: flex; align-items: center; gap: 14px; text-align: left; margin-bottom: 1.5rem; } .ec-pix-icon { font-size: 2rem; color: var(--brand); flex-shrink: 0; } .ec-pix-title { font-size: 17px; font-weight: 700; color: var(--text); } .ec-pix-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .ec-pix-qr-wrap { display: flex; justify-content: center; margin-bottom: 1.5rem; } .ec-pix-qr-img { width: 200px; height: 200px; border-radius: var(--r-lg); border: 4px solid var(--brand); box-shadow: 0 4px 20px var(--brand-ring); object-fit: contain; } .ec-pix-copy-wrap { margin-bottom: 1.5rem; } .ec-pix-copy-row { display: flex; gap: 8px; align-items: center; } .ec-pix-copy-btn { flex-shrink: 0; } .ec-pix-status-wrap { text-align: center; } .ec-pix-status-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-full); font-size: 13px; font-weight: 600; } .ec-pix-status-waiting { background: var(--brand-tint); color: var(--brand); } .ec-pix-status-paid { background: #d1fae5; color: #065f46; } .ec-pix-status-expired { background: #fee2e2; color: #991b1b; } .ec-pix-status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulse-dot 1.2s ease-in-out infinite; } .ec-pix-status-paid .ec-pix-status-dot, .ec-pix-status-expired .ec-pix-status-dot { animation: none; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } /* Legacy aliases */ .ec-checkout-title { font-weight: 800; font-size: 1.2rem; color: var(--text); margin-bottom: 1.25rem; } .ec-checkout-price { font-size: 2rem; font-weight: 800; color: var(--brand); letter-spacing: -.03em; } /* ============================================================ 32. CONFIRMATION PAGE ============================================================ */ .ec-confirm-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl); box-shadow: var(--shadow-md); padding: 2.5rem 2rem; max-width: 540px; margin: 0 auto; } .ec-confirm-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); font-size: 2rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; } .ec-confirm-icon--warn { background: var(--bs-warning-bg-subtle, #fff3cd); color: #856404; } /* Dark overrides for new public page classes */ [data-theme="dark"] .ec-badge-soft { background: var(--surface-3, rgba(255,255,255,.06)); } [data-theme="dark"] .ec-info-card { background: var(--surface-2); } [data-theme="dark"] .ec-chip { background: var(--surface-2); } [data-theme="dark"] .ec-filter-badge { background: var(--surface-2); } [data-theme="dark"] .ec-mentor-card { background: var(--surface); } [data-theme="dark"] .ec-slot { background: var(--surface-2); } [data-theme="dark"] .ec-package-card { background: var(--surface-2); } [data-theme="dark"] .ec-booking-summary { background: var(--surface-2); } [data-theme="dark"] .ec-checkout-card { background: var(--surface); } [data-theme="dark"] .ec-confirm-card { background: var(--surface); } [data-theme="dark"] .ec-review-card { background: var(--surface); } /* ───────────────────────────────────────────────────────────── 33. REVIEWS ───────────────────────────────────────────────────────────── */ .ec-reviews-header { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .ec-rating-avg { font-size: clamp(2.5rem, 5vw, 3.25rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--text); } .ec-rating-count { font-size: 13px; color: var(--text-muted); margin-top: 4px; } .ec-review-stars { display: inline-flex; gap: 2px; font-size: 15px; color: #ffc107; } .ec-review-stars .empty { color: var(--border); } .ec-review-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.125rem 1.25rem; } .ec-review-card + .ec-review-card { margin-top: 0.75rem; } .ec-review-author { font-weight: 600; font-size: 14px; color: var(--text); } .ec-review-date { font-size: 12px; color: var(--text-muted); } .ec-review-comment { font-size: 14px; color: var(--text-muted); margin-top: 0.5rem; line-height: 1.65; } /* Star input (5-star rating form field) */ .ec-star-field { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 6px; width: fit-content; } .ec-star-field input { display: none; } .ec-star-field label { font-size: 2.25rem; color: var(--border); cursor: pointer; transition: color 0.1s ease; line-height: 1; } .ec-star-field label:hover, .ec-star-field label:hover ~ label, .ec-star-field input:checked ~ label { color: #ffc107; } .ec-star-hint { font-size: 13px; color: var(--text-muted); margin-top: 6px; } /* ========================================================= 34 — Admin: category/chip picker (mentor_edit) ========================================================= */ .ec-chip { border-radius: 999px; padding: .4rem .75rem; font-size: 13px; font-weight: 600; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; display: inline-flex; gap: .4rem; align-items: center; user-select: none; line-height: 1.4; } .btn-check:checked + .ec-chip { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-dark); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); } .ec-cat-card { border: 1px solid var(--border); border-radius: 18px; padding: 14px; background: var(--surface); transition: border-color .15s; } .ec-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px; } .ec-cat-title { display: flex; align-items: center; gap: 10px; min-width: 0; } .ec-cat-name { font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ec-sub-wrap { display: flex; flex-wrap: wrap; gap: .5rem; } [data-theme="dark"] .ec-chip { background: var(--surface-2); } [data-theme="dark"] .ec-cat-card { background: var(--surface-2); border-color: var(--border); } /* ========================================================= 35 — Admin: tables, page layout, visual polish ========================================================= */ /* Table hover rows */ .table > tbody > tr { transition: background var(--dur-base) ease; } .table > tbody > tr:hover { background: var(--brand-tint) !important; } /* Admin container spacing inside app-content */ .app-content .container-fluid { padding-left: 0; padding-right: 0; } /* ec-section-box used as p-0 wrapper for tables */ .ec-section-box.p-0 { padding: 0 !important; overflow: hidden; } .ec-section-box.p-0 .table-responsive { border-radius: 0; } /* table inside ec-section-box: first/last row radius */ .ec-section-box.p-0 tbody tr:last-child td:first-child { border-bottom-left-radius: var(--r-xl); } .ec-section-box.p-0 tbody tr:last-child td:last-child { border-bottom-right-radius: var(--r-xl); } /* Filter form inside section-box: clean padding */ .ec-section-box.mb-3 { margin-bottom: 1rem !important; } /* Stat-card secondary (compact variant) */ .stat-card[style*="padding:1rem"] .stat-trend { margin-top: .5rem; } /* Admin page-level breadcrumb nav */ .ec-admin-breadcrumb { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; } .ec-admin-breadcrumb .ec-admin-bc-title { font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; } .ec-admin-breadcrumb .ec-admin-bc-sub { font-size: 13px; color: var(--text-muted); } /* Sidebar role badge fix (small dot before label) */ .app-sb-role-badge i.bi-circle-fill { vertical-align: middle; } /* Chart.js canvas inside ec-section-box */ .ec-section-box canvas { max-height: 220px; } /* Dark mode: table thead */ [data-theme="dark"] .table-light th { background: var(--surface-2) !important; color: var(--text-muted); } [data-theme="dark"] .table > tbody > tr:hover { background: rgba(48,215,163,.06) !important; } [data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--text); } [data-theme="dark"] .table > :not(caption) > * > * { border-bottom-color: var(--border); } /* ========================================================= 36 - Visual Refresh 2026 (global override layer) ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap'); :root { --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Sora', 'Manrope', ui-sans-serif, system-ui, sans-serif; --bg-2: #edf3f1; --surface: #ffffff; --surface-2: #f6faf8; --surface-3: #eef5f2; --text: #13252b; --text-2: #21414a; --text-muted: #52717a; --text-faint: #8da5ad; --border: rgba(14, 38, 44, 0.1); --border-2: rgba(14, 38, 44, 0.16); --shadow-sm: 0 10px 28px rgba(10, 31, 36, 0.08); --shadow-md: 0 18px 44px rgba(10, 31, 36, 0.12); --shadow-lg: 0 28px 64px rgba(10, 31, 36, 0.14); --r-xl: 24px; --r-2xl: 32px; } [data-theme="dark"] { --bg: #0a1418; --bg-2: #101c22; --surface: #122027; --surface-2: #162730; --surface-3: #1a2f38; --text: #e7f3f0; --text-2: #c0d5d0; --text-muted: #8ea5a0; --text-faint: #6d837e; --border: rgba(212, 243, 234, 0.09); --border-2: rgba(212, 243, 234, 0.16); --shadow-sm: 0 12px 28px rgba(0, 0, 0, 0.34); --shadow-md: 0 18px 44px rgba(0, 0, 0, 0.42); --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.5); } body { background: radial-gradient(1300px 780px at 6% -12%, rgba(67, 208, 156, 0.14), transparent 65%), radial-gradient(980px 620px at 95% 0%, rgba(24, 170, 255, 0.1), transparent 60%), linear-gradient(180deg, var(--bg-2), var(--bg)); color: var(--text); } h1, h2, h3, h4, .ec-home-title, .ec-section-title, .app-page-title h1, .ec-auth-form-title { font-family: var(--font-display); } .card, .ec-section-box, .ec-mentor-card, .ec-mentor-home-card, .ec-filter-sidebar, .ec-auth-card, .ec-action-card, .ec-rules-card, .ec-step, .empty-state { border: 1px solid var(--border); box-shadow: var(--shadow-sm); background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, #ffffff 12%), var(--surface)); border-radius: var(--r-xl); } [data-theme="dark"] .card, [data-theme="dark"] .ec-section-box, [data-theme="dark"] .ec-mentor-card, [data-theme="dark"] .ec-mentor-home-card, [data-theme="dark"] .ec-filter-sidebar, [data-theme="dark"] .ec-auth-card, [data-theme="dark"] .ec-action-card, [data-theme="dark"] .ec-rules-card, [data-theme="dark"] .ec-step, [data-theme="dark"] .empty-state { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, #ffffff 10%), var(--surface)); } .btn { border-radius: 16px; } .btn-primary { background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 84%, #00b8ff 16%), color-mix(in srgb, var(--brand-2) 86%, #0f7ab8 14%)); border-color: transparent; box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-ring) 65%, transparent); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px color-mix(in srgb, var(--brand-ring) 75%, transparent); } .btn-outline-primary, .btn-ghost { background: color-mix(in srgb, var(--surface) 84%, #ffffff 16%); } .ec-navbar { margin: 10px 14px 0; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); box-shadow: 0 10px 26px rgba(8, 26, 31, 0.08); top: 10px; } .ec-navbar.is-scrolled { box-shadow: 0 14px 30px rgba(6, 20, 24, 0.14); border-color: color-mix(in srgb, var(--brand) 22%, var(--border)); } .ec-navbar .container { min-height: 70px; } .ec-navbar .nav-link { font-size: 13px; letter-spacing: 0.01em; } .ec-home-hero { border-radius: 0 0 42px 42px; overflow: hidden; background: linear-gradient(130deg, color-mix(in srgb, var(--brand-dark) 76%, #0f2b2c 24%) 0%, color-mix(in srgb, var(--brand) 80%, #0f6f8b 20%) 48%, color-mix(in srgb, var(--brand-2) 84%, #0e4774 16%) 100%); } .ec-home-title, .ec-home-sub, .ec-home-kicker, .ec-home-stat-label, .ec-home-stat-num { color: rgba(248, 255, 252, 0.96); } .ec-home-kicker, .ec-tag-badge, .ec-profile-stat, .ec-chip, .ec-badge-soft, .ec-filter-badge { border-radius: 999px; } .ec-home-search { border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 24px 50px rgba(5, 22, 25, 0.28); backdrop-filter: blur(8px); } .ec-home-search .form-control, .ec-home-search .form-select, .ec-home-search .input-group-text { border-radius: 12px; } .ec-home-highlight { background: transparent; } .ec-mentor-home-card, .ec-mentor-card, .ec-step, .ec-cat-card, .ec-action-card, .ec-review-card { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) ease; } .ec-mentor-home-card:hover, .ec-mentor-card:hover, .ec-step:hover, .ec-cat-card:hover, .ec-action-card:hover, .ec-review-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--brand) 36%, var(--border)); } .ec-filter-sidebar { position: sticky; top: 98px; } .ec-profile-header { background: radial-gradient(640px 260px at 12% 10%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 68%), linear-gradient(160deg, color-mix(in srgb, var(--surface-2) 76%, transparent), color-mix(in srgb, var(--surface) 86%, transparent)); border-bottom: 1px solid var(--border); } .ec-auth-body { background: radial-gradient(820px 520px at 0% 0%, rgba(45, 205, 158, 0.18), transparent 60%), linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%); } .ec-auth-panel-left { background: linear-gradient(160deg, color-mix(in srgb, var(--brand-dark) 82%, #08292f 18%) 0%, color-mix(in srgb, var(--brand) 86%, #0d5e6f 14%) 100%); } .ec-home-footer { margin-top: 24px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(6px); } .app-sidebar { box-shadow: 10px 0 42px rgba(2, 10, 15, 0.24); } .sn-item, .sb-btn, .app-sb-foot .btn-theme-toggle { border-radius: 14px; } .sn-item.active, .sb-btn:hover, .app-sb-foot .btn-theme-toggle:hover { background: rgba(255, 255, 255, 0.18); } .app-header { border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent); box-shadow: 0 4px 20px rgba(6, 20, 24, 0.06); } .app-main { padding-top: 6px; } .app-hdr-btn, .btn-theme-toggle, .user-avatar, .ec-auth-field, .ec-home-search, .app-footer-bar { border-color: var(--border); } .app-footer { padding-bottom: 18px; } .app-footer-bar { border-radius: 16px; background: color-mix(in srgb, var(--surface) 88%, transparent); } .app-user-dropdown-btn { cursor: pointer; } .app-icon-lg { font-size: 20px; } .app-icon-md { font-size: 15px; } .app-chevron { font-size: 10px; color: var(--text-muted); } .app-user-name { font-size: 13px; font-weight: 600; color: var(--text); } .app-user-email { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; } .app-user-menu { min-width: 220px; } .app-user-menu-name { font-size: 13px; font-weight: 600; color: var(--text); } .app-user-menu-email { font-size: 12px; color: var(--text-muted); } .app-footer-copy { color: var(--text-muted); } .app-footer-home-icon { font-size: 11px; } .app-sb-role-dot { font-size: .42rem; color: rgba(255, 255, 255, .55); } .app-sb-theme-label { font-size: 13px; font-weight: 600; color: var(--sidebar-text); margin-left: 2px; } .app-mobile-nav { width: 280px; background: linear-gradient(180deg, var(--sidebar-from) 0%, var(--sidebar-to) 100%); } .app-mobile-nav-header { padding: 16px; border-bottom: 1px solid rgba(255, 255, 255, .1); } .app-mobile-platform { font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, .95); letter-spacing: -0.02em; } .app-mobile-nav-body { overflow-y: auto; } .app-mobile-user-card { background: rgba(255, 255, 255, .1); } .app-mobile-user-name { font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .95); } .app-mobile-user-role { font-size: 11px; color: rgba(255, 255, 255, .6); } .app-mobile-footer-actions { border-top: 1px solid rgba(255, 255, 255, .1); } .app-mobile-action-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; } .app-mobile-logout-link { background: rgba(255, 255, 255, .06); color: rgba(255, 180, 180, .9); font-size: 13px; font-weight: 600; } .app-mobile-footer-actions .btn-theme-toggle { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .9); font-size: 13px; font-weight: 600; } .app-mobile-footer-actions .btn-theme-toggle:hover, .app-mobile-logout-link:hover { background: rgba(255, 255, 255, .13); color: #fff; } .ec-brand-logo { height: 40px; width: auto; object-fit: contain; } .ec-footer-logo { height: 36px; width: auto; object-fit: contain; } .ec-footer-row { padding-bottom: 2.5rem; } .ec-home-footer-bottom-line { border-top: 1px solid var(--border); } .ec-delay-100 { animation-delay: 100ms; } .ec-z2 { z-index: 2; } .ec-profile-review-count { opacity: .7; font-weight: 500; } .ec-auth-logo { height: 52px; width: auto; object-fit: contain; margin: 0 auto var(--space-5); } .ec-auth-brand-text { font-size: 22px; letter-spacing: -0.03em; } .ec-clickable { cursor: pointer; } .ec-auth-muted { color: var(--text-muted); } @media (max-width: 991.98px) { .ec-navbar { margin: 8px 10px 0; top: 8px; } .ec-home-hero { border-radius: 0 0 28px 28px; } .ec-filter-sidebar { position: static; } } @media (max-width: 767.98px) { .ec-brand-logo { height: 34px; } .ec-navbar .container { min-height: 62px; } .btn { height: 42px; } } /* ========================================================= 37 - Visual Refinement Pass (LP + App UI) ========================================================= */ :root { --surface-soft: color-mix(in srgb, var(--surface) 86%, #ffffff 14%); --surface-hero: color-mix(in srgb, var(--surface) 42%, transparent); } body { background: radial-gradient(860px 460px at 4% -10%, rgba(36, 187, 141, 0.1), transparent 64%), radial-gradient(980px 520px at 100% 0%, rgba(42, 137, 199, 0.08), transparent 66%), linear-gradient(180deg, var(--bg-2), var(--bg)); } .ec-navbar { margin: 0; border-radius: 0; border-left: 0; border-right: 0; top: 0; box-shadow: 0 10px 24px rgba(7, 20, 24, 0.08); } .ec-navbar .container { min-height: 74px; } .ec-home-hero { border-radius: 0; padding-top: 72px; padding-bottom: 72px; background: radial-gradient(620px 320px at 10% 8%, rgba(255, 255, 255, 0.16), transparent 70%), linear-gradient(130deg, color-mix(in srgb, var(--brand-dark) 80%, #10353b 20%) 0%, color-mix(in srgb, var(--brand) 86%, #0f5d70 14%) 56%, color-mix(in srgb, var(--brand-2) 86%, #0f5071 14%) 100%); } .ec-home-search { background: color-mix(in srgb, var(--surface) 92%, #ffffff 8%); border: 1px solid color-mix(in srgb, var(--border) 88%, transparent); box-shadow: 0 24px 48px rgba(6, 22, 25, 0.24); } .ec-home-search .form-control, .ec-home-search .form-select, .ec-home-search .input-group-text { border-color: color-mix(in srgb, var(--border-2) 78%, transparent); background: color-mix(in srgb, var(--surface) 84%, #ffffff 16%); } /* LP: evita corte agressivo das fotos dos mentores */ .ec-mentor-home-card__photo-wrap { aspect-ratio: 4 / 3; padding: 12px; background: radial-gradient(220px 120px at 12% 10%, color-mix(in srgb, var(--brand-tint) 70%, transparent), transparent 74%), color-mix(in srgb, var(--surface-2) 82%, #ffffff 18%); } .ec-mentor-home-card__photo-wrap img { width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: 16px; background: color-mix(in srgb, var(--surface) 94%, #ffffff 6%); padding: 4px; } .ec-mentor-home-card:hover .ec-mentor-home-card__photo-wrap img { transform: scale(1.01); } .ec-mentor-home-card__badge { backdrop-filter: blur(4px); } /* Lista de mentores: reduz recorte de avatar */ .ec-mentor-card-avatar { object-fit: contain; background: color-mix(in srgb, var(--surface) 90%, #ffffff 10%); padding: 3px; } /* Sistema interno: visual mais premium e limpo */ .app-sidebar { background: radial-gradient(260px 120px at 8% 0%, rgba(255, 255, 255, 0.08), transparent 70%), linear-gradient(180deg, #10252d 0%, #0b1d24 100%); border-right: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 12px 0 36px rgba(2, 10, 15, 0.28); } .app-header { background: color-mix(in srgb, var(--surface) 78%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent); box-shadow: 0 6px 18px rgba(8, 20, 24, 0.08); } [data-theme="dark"] .app-header { background: color-mix(in srgb, var(--surface) 78%, transparent); } .app-main { padding: 28px; } .app-content > .container, .app-content > .container-fluid { max-width: 1380px; } .card, .ec-section-box, .stat-card, .ec-filter-sidebar, .ec-action-card, .ec-auth-card, .table-responsive, .modal-content { background: var(--surface-soft); border: 1px solid color-mix(in srgb, var(--border) 88%, transparent); box-shadow: 0 12px 28px rgba(10, 26, 30, 0.09); } .btn { border-radius: 14px; } .btn-primary { box-shadow: 0 8px 22px color-mix(in srgb, var(--brand-ring) 66%, transparent); } .btn-outline-primary { border-color: color-mix(in srgb, var(--border-2) 88%, transparent); } .form-control, .form-select, .input-group-text { border-radius: 12px; border-color: color-mix(in srgb, var(--border-2) 84%, transparent); } .app-footer-bar { background: color-mix(in srgb, var(--surface) 90%, transparent); border-color: color-mix(in srgb, var(--border) 88%, transparent); } .sn-item, .sb-btn, .app-sb-foot .btn-theme-toggle { border-radius: 12px; } .sn-item:hover, .sb-btn:hover, .app-sb-foot .btn-theme-toggle:hover { background: rgba(255, 255, 255, 0.14); } @media (max-width: 991.98px) { .ec-home-hero { padding-top: 54px; padding-bottom: 56px; } .app-main { padding: 18px; } } @media (max-width: 767.98px) { .ec-navbar .container { min-height: 66px; } .ec-home-search { padding: 20px; border-radius: 22px; } .ec-mentor-home-card__photo-wrap { aspect-ratio: 1 / 1; padding: 10px; } .app-main { padding: 14px; } } /* ========================================================= 38 - Public Visual + Architecture Consistency ========================================================= */ .ec-public-body { background: radial-gradient(860px 420px at -6% -8%, rgba(18, 102, 118, 0.1), transparent 66%), radial-gradient(920px 480px at 108% 2%, rgba(29, 150, 133, 0.08), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--bg) 86%, #dfe9ef 14%), var(--bg)); } [data-theme="dark"] .ec-public-body { background: radial-gradient(900px 460px at -10% -12%, rgba(22, 129, 141, 0.16), transparent 64%), radial-gradient(960px 500px at 108% 0%, rgba(20, 106, 126, 0.13), transparent 70%), linear-gradient(180deg, #0c1720 0%, #0d1d2a 100%); } .ec-logo-theme { display: inline-flex; align-items: center; } .ec-brand-logo--dark { display: none; } [data-theme="dark"] .ec-brand-logo--light { display: none; } [data-theme="dark"] .ec-brand-logo--dark { display: block; } .ec-navbar .container { padding-top: 10px; padding-bottom: 10px; } .ec-navbar .navbar-brand { padding-top: 2px; padding-bottom: 2px; } .ec-home-hero { background: radial-gradient(620px 260px at 14% 12%, rgba(255, 255, 255, 0.09), transparent 68%), linear-gradient(130deg, #143248 0%, #11506a 52%, #1c6660 100%); } [data-theme="dark"] .ec-home-hero { background: radial-gradient(640px 290px at 12% 10%, rgba(255, 255, 255, 0.06), transparent 70%), linear-gradient(130deg, #102634 0%, #0f3e56 56%, #124841 100%); } #categorias, .ec-home-highlight, .ec-home-how-section { background: transparent; } .ec-home-footer { margin-top: 52px; padding: 54px 0 22px; } .ec-footer-row { padding-bottom: 2rem; } .ec-home-footer-bottom { padding-top: 1rem; margin-top: 0.5rem; } .ec-home-footer.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .ec-auth-logo-wrap { display: inline-flex; align-items: center; justify-content: center; margin: 0 auto var(--space-5); } @media (max-width: 991.98px) { .ec-navbar .container { padding-top: 8px; padding-bottom: 8px; } .ec-home-footer { margin-top: 40px; padding: 42px 0 18px; } } /* ========================================================= 39 - Dark Only + Mentor Image Zoom Fit ========================================================= */ .ec-public-body, .ec-public-body[data-theme="light"], .ec-public-body[data-theme="dark"] { color-scheme: dark; --bg: #0f1117; --bg-2: #161b24; --surface: #1a2030; --surface-2: #1f2538; --surface-3: #252c40; --text: #f0f6fb; --text-2: #c5d0dd; --text-muted: #94a3b5; --text-faint: #64748b; --border: rgba(255, 255, 255, .08); --border-2: rgba(255, 255, 255, .12); --shadow-xs: 0 2px 8px rgba(0, 0, 0, .30); --shadow-sm: 0 4px 16px rgba(0, 0, 0, .35); --shadow-md: 0 8px 28px rgba(0, 0, 0, .40); --shadow-lg: 0 16px 48px rgba(0, 0, 0, .45); --shadow-xl: 0 28px 80px rgba(0, 0, 0, .50); } .ec-public-body .btn-theme-toggle { display: none !important; } .ec-public-body .ec-navbar .nav-link { color: #d7e2ef !important; } .ec-public-body .ec-navbar .nav-link:hover, .ec-public-body .ec-navbar .nav-link.active { color: #f3f8fc !important; background: rgba(255, 255, 255, 0.12); } .ec-mentor-home-card__photo-wrap { aspect-ratio: 1 / 1; padding: 0; overflow: hidden; } .ec-mentor-home-card__photo-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; padding: 0; border-radius: 0; transform: scale(1.08); } .ec-mentor-home-card:hover .ec-mentor-home-card__photo-wrap img { transform: scale(1.12); } .ec-mentor-card-avatar { object-fit: cover; object-position: center; padding: 0; } /* ========================================================= 40 - Text Legibility + Contrast Optimization ========================================================= */ .ec-cat-name, .ec-step-title { color: #f0f6fb; font-weight: 700; } .ec-home-search-title, .ec-section-title, .page-header-title, h1, h2, h3, h4, h5, h6 { color: #f1f8fc; } .page-header-sub, .section-card-title { color: #a8b5c5; } .ec-mentor-home-card__name, .ec-mentor-home-card__title, .ec-mentor-card-name, .ec-mentor-card-title { color: #f0f6fb; } .form-label { color: #c5d0dd; font-weight: 600; } .ec-tag-badge { color: #a8b5c8; background: rgba(26, 32, 48, 0.6); } .btn-outline-primary, .btn-outline-secondary { color: #f0f6fb !important; } .btn-outline-secondary { border-color: #475569; } .btn-outline-secondary:hover { background: rgba(148, 163, 181, 0.14); border-color: #94a3b5; color: #f0f6fb !important; } .ec-rules-card, .ec-action-card, .ec-step { background: #1f2538; } .ec-rules-card h6, .ec-action-card h6, .ec-step h6 { color: #f0f6fb; } .ec-rules-card p, .ec-action-card p, .ec-step p { color: #cbd5e1; } .text-muted { color: #94a3b5 !important; } /* ─── Button overrides — forma pill + dark mode ─── */ /* Todos os botões: pill shape */ .btn { border-radius: var(--r-full) !important; font-weight: 500; letter-spacing: .01em; } /* btn-primary usa --brand */ .btn-primary { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; } .btn-primary:hover, .btn-primary:focus { filter: brightness(1.1); } /* btn-outline-primary usa --brand */ .btn-outline-primary { color: var(--brand) !important; border-color: var(--brand) !important; background: transparent !important; } .btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--brand) !important; color: #fff !important; } /* btn-outline-secondary — funciona em dark e light */ .btn-outline-secondary { color: var(--text-muted) !important; border-color: var(--border-2) !important; background: transparent !important; } .btn-outline-secondary:hover, .btn-outline-secondary:focus { background: var(--surface-3) !important; color: var(--text) !important; border-color: var(--border-2) !important; } /* btn-outline-danger */ .btn-outline-danger { color: var(--danger) !important; border-color: var(--danger) !important; background: transparent !important; } .btn-outline-danger:hover, .btn-outline-danger:focus { background: var(--danger-bg) !important; } /* btn-outline-warning */ .btn-outline-warning { color: var(--warning) !important; border-color: var(--warning) !important; background: transparent !important; } .btn-outline-warning:hover, .btn-outline-warning:focus { background: var(--warning-bg) !important; } /* btn-success */ .btn-success { background: var(--success) !important; border-color: var(--success) !important; color: #fff !important; } /* hero: botão branco translúcido */ .ec-mentor-hero .btn { color: #fff !important; } /* ─── Mentor hero banner ─── */ .ec-mentor-hero { background: linear-gradient(135deg, var(--sidebar-from, #0b3a66) 0%, var(--sidebar-to, #175499) 60%, var(--brand, #1e7dd6) 100%); border-radius: 16px; padding: 1.75rem 2rem; color: #fff; position: relative; overflow: hidden; min-height: 100px; } .ec-mentor-hero::before { content: ''; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,0.06); pointer-events: none; } .ec-mentor-hero::after { content: ''; position: absolute; bottom: -60px; left: 40%; width: 300px; height: 200px; border-radius: 50%; background: rgba(5,217,154,0.10); pointer-events: none; } .ec-mentor-avatar { width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); object-fit: cover; flex-shrink: 0; } .ec-mentor-avatar-initials { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.18); border: 2px solid rgba(255,255,255,0.35); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 700; color: #fff; flex-shrink: 0; }