/* ========================================================================== spa-shell.css — overrides do redesign aplicados ao SPA atual -------------------------------------------------------------------------- Princípio: ZERO mudança em HTML/JS. Reestiliza sidebar/topbar/main-content do index.html via seletores específicos, mantendo TODOS os IDs e classes intactos pra que os 11 módulos JS continuem funcionando normalmente. Carregado DEPOIS de tokens.css/components.css/legacy CSS pra ter precedência. Importar no do index.html APÓS tudo o resto. ESTRATÉGIA DE OVERRIDE: 1. Sobrescrever variáveis do flat.css (--c-*) com valores do redesign. flat.css tem 1628 !important com seletor body.nyvvo-app-shell, então mexer NA VARIÁVEL é a maneira mais limpa — todos os 1628 herdam. 2. Aumentar especificidade dos seletores body usando body.nyvvo-app-shell pra empatar com a especificidade do flat.css. ========================================================================== */ /* ─── Sobrescreve variáveis do flat.css com tokens do redesign ──────────── */ /* O flat.css define --c-* e usa em 1628 lugares com !important. Em vez de brigar regra-por-regra, redefinimos as variáveis aqui. Resultado: todo o flat.css automaticamente herda a paleta dark warm + emerald. */ :root, body.nyvvo-app-shell, body.nyvvo-admin-shell { /* Surfaces */ --c-chrome: oklch(0.16 0.008 250); /* bg-0 */ --c-chrome-elevated: oklch(0.19 0.008 250); /* bg-1 */ --c-chrome-hover: oklch(0.22 0.009 250); /* bg-2 */ --c-chrome-border: oklch(0.28 0.010 250 / 0.5); --c-chrome-border-strong: oklch(0.32 0.012 250 / 0.6); --c-data-bg: oklch(0.16 0.008 250); /* bg-0 (canvas) */ --c-data-card: oklch(0.19 0.008 250); /* bg-1 (card) */ --c-data-elevated: oklch(0.22 0.009 250); /* bg-2 (raised) */ --c-data-border: oklch(0.28 0.010 250 / 0.5); --c-data-border-strong: oklch(0.32 0.012 250 / 0.6); /* Text on dark */ --c-text-on-dark: oklch(0.97 0.005 250); /* text-1 */ --c-text-on-dark-soft: oklch(0.78 0.012 250); /* text-2 */ --c-text-on-dark-muted: oklch(0.62 0.012 250); /* text-3 */ --c-text-on-dark-subtle: oklch(0.48 0.010 250); /* text-4 */ /* Accent — flat.css usava azul; troca pra emerald do redesign */ --c-accent: oklch(0.74 0.16 152); --c-accent-hover: oklch(0.80 0.17 152); } /* ─── Body / app shell — específico pra body.nyvvo-app-shell ─────────── */ body, body.nyvvo-app-shell { font-family: var(--font-sans) !important; background: var(--bg-0) !important; color: var(--text-1) !important; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ─── Sidebar ───────────────────────────────────────────────────────────── */ #sidebar { background: var(--bg-0) !important; border-right: 1px solid var(--border-subtle) !important; width: 232px !important; padding: 16px 12px !important; display: flex !important; flex-direction: column !important; /* nav vai crescer; footer fica no rodape via margin-top:auto */ } #sidebar > nav { margin-bottom: auto; } /* Brand area no topo (alinhado com .side-head do demo) */ .sidebar-brand-container { padding: 4px 4px 18px !important; display: flex !important; align-items: center !important; gap: 8px !important; border-bottom: 0 !important; background: transparent !important; } .brand-icon { width: 18px; height: 18px; display: grid; place-items: center; flex-shrink: 0; } .brand-icon svg { width: 100%; height: 100%; display: block; } .brand-name { font: 600 15px/1 var(--font-display); letter-spacing: -0.02em; color: var(--text-1); } .brand-info { display: flex; align-items: center; } /* Toggle button do sidebar */ #sidebar-toggle-btn { background: transparent !important; color: var(--text-3) !important; border-radius: 6px !important; transition: all 120ms ease !important; } #sidebar-toggle-btn:hover { background: var(--bg-2) !important; color: var(--text-1) !important; } /* Nav list */ #sidebar-nav-list { display: flex !important; flex-direction: column !important; gap: 2px !important; margin: 0 !important; padding: 0 !important; } #sidebar-nav-list > li { list-style: none !important; } /* Sidebar nav-count chips (12, 3 etc) -------------------------------------- */ .sidebar-nav-count { margin-left: auto; font: 600 10px/1 var(--font-sans); padding: 3px 7px; border-radius: 999px; background: var(--accent-soft, oklch(0.74 0.16 152 / 0.15)); color: var(--accent-strong, var(--accent)); border: 1px solid oklch(0.74 0.16 152 / 0.25); } #sidebar.collapsed .sidebar-nav-count { display: none !important; } /* Section label (Principal, Ferramentas) */ .sidebar-nav-section-label { padding: 12px 8px 6px !important; font: 500 10px/1 var(--font-sans) !important; letter-spacing: 0.08em; text-transform: uppercase !important; color: var(--text-4) !important; } /* Nav items (#nav-li-dashboard etc) — anchor é o clicável. ATENÇÃO: sidebar.css tem ~150 regras de override por módulo (dashboard verde, gps emerald, acompanhamento cyan, progresso amarelo etc — cada um com glow/border colorida). Aqui NEUTRALIZAMOS TUDO pra unificar no padrão do redesign: items neutros, ativo em accent. Usamos seletores altamente específicos pra ganhar especificidade do sidebar.css. */ body #sidebar #sidebar-nav-list > li > a, body #sidebar nav li a { display: flex !important; align-items: center !important; gap: 10px !important; height: 36px !important; padding: 0 10px !important; border-radius: 8px !important; color: var(--text-2) !important; font: 500 13px/1 var(--font-sans) !important; cursor: pointer; transition: all 120ms ease !important; border: 1px solid transparent !important; text-decoration: none !important; background: transparent !important; box-shadow: none !important; letter-spacing: -0.005em; } body #sidebar #sidebar-nav-list > li > a:hover, body #sidebar nav li a:hover { background: var(--bg-2) !important; color: var(--text-1) !important; border-color: transparent !important; box-shadow: none !important; } body #sidebar #sidebar-nav-list > li.active > a, body #sidebar nav li.active a { background: var(--bg-2) !important; color: var(--text-1) !important; border-color: var(--border-soft) !important; box-shadow: var(--shadow-sm) !important; } /* Reseta o gradient/shimmer ::before do sidebar.css */ body #sidebar nav li a::before, body #sidebar nav li a::after { display: none !important; background: none !important; content: none !important; } /* ÍCONES: força cor única (text-3 padrão, accent só no ativo) — desliga o rainbow per-módulo e o drop-shadow glow do sidebar.css */ body #sidebar nav li a .lucide, body #sidebar nav li a [data-lucide], body #sidebar nav li a > span:first-child { width: 18px !important; height: 18px !important; flex-shrink: 0; color: var(--text-3) !important; filter: none !important; transform: none !important; transition: color 120ms ease !important; } body #sidebar nav li a:hover .lucide, body #sidebar nav li a:hover [data-lucide] { color: var(--text-1) !important; transform: none !important; filter: none !important; } body #sidebar nav li.active a .lucide, body #sidebar nav li.active a [data-lucide] { color: var(--accent) !important; filter: none !important; transform: none !important; } /* Texto do item — reseta cores per-módulo */ body #sidebar nav li a span.sidebar-text { color: inherit !important; font: 500 13px/1 var(--font-sans) !important; letter-spacing: -0.005em; } /* Reseta ::before/::after decorativos do brand container */ body #sidebar .sidebar-brand-container::before, body #sidebar .sidebar-brand-container::after { display: none !important; content: none !important; background: none !important; } body #sidebar::before, body #sidebar::after { display: none !important; content: none !important; background: none !important; animation: none !important; } /* Divider */ .sidebar-nav-divider { height: 1px !important; background: var(--border-subtle) !important; margin: 8px 4px !important; list-style: none !important; } /* Premium CTA preservado mas com cores do tema novo */ #nav-li-premium > a { background: var(--accent) !important; color: var(--accent-fg) !important; font-weight: 600 !important; border: 1px solid oklch(0.74 0.16 152 / 0.4) !important; box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.2) inset, 0 8px 20px oklch(0.74 0.16 152 / 0.18) !important; } #nav-li-premium > a:hover { background: var(--accent-strong) !important; } #nav-li-premium [data-lucide="sparkles"] { color: var(--accent-fg) !important; } /* ─── Sidebar footer (sequência + perfil) ────────────────────────────────── */ .sidebar-footer { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 10px; } /* Timer ativo no sidebar — visivel apenas quando ha sessao em andamento. */ .sidebar-timer { position: relative; padding: 10px 12px 12px; background: linear-gradient(135deg, oklch(0.74 0.16 152 / 0.10), oklch(0.6 0.14 200 / 0.06)); border: 1px solid oklch(0.74 0.16 152 / 0.32); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; } .sidebar-timer::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 1px oklch(0.74 0.16 152 / 0.18) inset; } .sidebar-timer[data-state="paused"] { background: linear-gradient(135deg, oklch(0.78 0.15 75 / 0.10), oklch(0.6 0.14 60 / 0.06)); border-color: oklch(0.78 0.15 75 / 0.4); } .sidebar-timer[data-state="paused"] .sidebar-timer-pulse { animation: none; opacity: 0.55; background: oklch(0.78 0.15 75); } .sidebar-timer[data-state="paused"] .sidebar-timer-clock { color: oklch(0.85 0.13 75); } .sidebar-timer[data-state="paused"] .sidebar-timer-eyebrow { color: oklch(0.85 0.13 75); } .sidebar-timer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sidebar-timer-eyebrow { display: inline-flex; align-items: center; gap: 6px; font: 600 10px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-strong, var(--accent)); } .sidebar-timer-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-strong, var(--accent)); box-shadow: 0 0 0 0 oklch(0.74 0.16 152 / 0.55); animation: sidebar-timer-pulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite; flex-shrink: 0; } @keyframes sidebar-timer-pulse { 0% { box-shadow: 0 0 0 0 oklch(0.74 0.16 152 / 0.55); } 70% { box-shadow: 0 0 0 8px oklch(0.74 0.16 152 / 0); } 100% { box-shadow: 0 0 0 0 oklch(0.74 0.16 152 / 0); } } .sidebar-timer-clock { font: 700 16px/1 var(--font-mono, "Geist Mono", ui-monospace, monospace); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--text-1); } .sidebar-timer-info { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: transparent; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; width: 100%; font-family: inherit; color: inherit; min-width: 0; } .sidebar-timer-info:hover .sidebar-timer-discipline { color: var(--text-1); } .sidebar-timer-discipline { font: 600 12px/1.2 var(--font-sans); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; transition: color 120ms ease; } .sidebar-timer-topic { font: 400 11px/1.3 var(--font-sans); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } .sidebar-timer-actions { display: flex; gap: 6px; } .sidebar-timer-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 26px; padding: 0 8px; background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 6px; color: var(--text-2); font: 500 11px/1 var(--font-sans); cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .sidebar-timer-btn[hidden] { display: none; /* display:inline-flex acima venceria o atributo hidden sem isso */ } .sidebar-timer-btn:hover { background: var(--bg-3); border-color: oklch(0.74 0.16 152 / 0.4); color: var(--text-1); } .sidebar-timer-btn--stop:hover { background: oklch(0.55 0.18 27 / 0.18); border-color: oklch(0.6 0.18 27 / 0.5); color: oklch(0.85 0.13 27); } #sidebar.collapsed .sidebar-timer { padding: 8px 6px; align-items: center; } #sidebar.collapsed .sidebar-timer-info, #sidebar.collapsed .sidebar-timer-actions, #sidebar.collapsed .sidebar-timer-eyebrow > span:not(.sidebar-timer-pulse) { display: none !important; } #sidebar.collapsed .sidebar-timer-head { justify-content: center; gap: 4px; } #sidebar.collapsed .sidebar-timer-clock { font-size: 11px; } .sidebar-streak { padding: 10px 12px; background: var(--bg-1); border: 1px solid var(--border-soft); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; } .sidebar-streak-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sidebar-streak-eyebrow { font: 600 10px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .sidebar-streak-flame { display: inline-flex; align-items: center; gap: 4px; } .sidebar-streak-bars { display: flex; gap: 3px; } .sidebar-streak-bars > div { flex: 1; height: 4px; border-radius: 2px; background: var(--bg-3); transition: background 160ms ease; } .sidebar-streak-bars > div.is-on { background: var(--accent); } .sidebar-streak-bars > div.is-today { background: var(--accent-strong, var(--accent)); } .sidebar-streak-meta { font: 500 11px/1.3 var(--font-sans); color: var(--text-3); } /* Modo colapsado da sidebar (sidebar-text some) */ #sidebar.collapsed .sidebar-streak-meta, #sidebar.collapsed .sidebar-streak-eyebrow { display: none !important; } #sidebar.collapsed .sidebar-footer { padding: 8px 0; } #sidebar.collapsed .sidebar-streak { padding: 6px; align-items: center; } /* Modo Fantasma (admin) */ #ghost-mode-container { background: var(--bg-2) !important; border-bottom: 1px solid var(--border-soft) !important; border-radius: var(--r-md) !important; margin: 8px 4px !important; padding: 12px !important; } #ghost-mode-container p { color: var(--text-3) !important; } #exit-ghost-btn { background: var(--accent) !important; color: var(--accent-fg) !important; } /* ─── Main content / topbar ─────────────────────────────────────────────── */ #main-content { background: var(--bg-0) !important; position: relative; } /* Topbar do main */ #main-content > header { height: 56px !important; background: oklch(0.16 0.008 250 / 0.7) !important; border-bottom: 1px solid var(--border-subtle) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 0 24px !important; box-shadow: none !important; } /* Page title — força tamanho conservador (era enorme por estilos legacy) */ body #main-content > header #page-title, body #page-title, #main-content > header h2#page-title { font: 600 14px/1.25 var(--font-display) !important; letter-spacing: -0.005em; color: var(--text-1) !important; margin: 0 !important; padding: 0 !important; } /* Breadcrumb da topbar (page-title › suffix) */ .topbar-breadcrumb { display: flex; align-items: center; gap: 8px; min-width: 0; } .topbar-breadcrumb-sep { color: var(--text-4); font-size: 13px; font-weight: 400; user-select: none; } .topbar-breadcrumb-leaf { font: 500 13px/1.25 var(--font-sans); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 720px) { .topbar-breadcrumb-sep, .topbar-breadcrumb-leaf { display: none; } } /* Badge do concurso ativo (GPS "Concurso Ativo") — visível em qualquer módulo pra não se perder ao navegar enquanto estuda pra mais de um concurso ao mesmo tempo. Ver frontend/js/main.js updateTopbarContextoBadge. */ .topbar-breadcrumb-contexto { font: 600 12px/1.25 var(--font-sans); color: #052e1c; background: #6ee7b7; border: 1px solid #34d399; border-radius: 99px; padding: 3px 10px; white-space: nowrap; margin-left: 4px; } @media (max-width: 720px) { .topbar-breadcrumb-contexto { display: none; } } /* CTA "+ Nova missão" da topbar */ .topbar-cta-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font: 500 12px/1 var(--font-sans); background: var(--accent); color: var(--accent-fg, oklch(0.16 0.008 250)); border: 1px solid oklch(0.74 0.16 152 / 0.4); border-radius: 8px; cursor: pointer; transition: background 120ms ease, transform 120ms ease; } .topbar-cta-btn:hover { background: var(--accent-strong, var(--accent)); transform: translateY(-1px); } .topbar-cta-btn:active { transform: translateY(0); } @media (max-width: 720px) { .topbar-cta-label { display: none; } .topbar-cta-btn { padding: 7px; } } /* Sync status pill */ #sync-status-pill { background: var(--bg-2) !important; border-color: var(--border-soft) !important; color: var(--text-2) !important; border-radius: 999px !important; } /* User button */ #header-user-btn { background: transparent !important; border: 1px solid transparent !important; border-radius: var(--r-md) !important; padding: 6px 10px !important; transition: all 120ms ease !important; } #header-user-btn:hover { background: var(--bg-2) !important; border-color: var(--border-soft) !important; } #header-user-name-mobile { font: 600 12px/1.2 var(--font-display) !important; color: var(--text-1) !important; } #header-user-plan-mobile { font: 500 9px/1 var(--font-mono) !important; letter-spacing: 0.08em; color: var(--accent) !important; } /* A letra/foto fica transparente — a COR vem do container .nv-avatar (--avatar-bg, setado por usuário no JS). Texto branco pra contraste na cor vibrante. */ #header-user-avatar, #header-user-initial, #dropdown-user-avatar, #dropdown-user-initial { background: transparent !important; color: #fff !important; } /* ── Avatar com inicial em cor sólida vibrante (Material-style) ───────────── */ .nv-avatar { --avatar-bg: oklch(0.62 0.2 25); position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 999px; background: var(--avatar-bg); color: #fff; font: 700 15px/1 var(--font-display); overflow: hidden; box-shadow: 0 1px 2px oklch(0 0 0 / 0.35), inset 0 1px 0 oklch(1 0 0 / 0.12); } .nv-avatar--sm { width: 34px; height: 34px; font-size: 13px; } .nv-avatar--lg { width: 46px; height: 46px; font-size: 18px; } .nv-avatar > img { width: 100%; height: 100%; object-fit: cover; } .nv-avatar > img.hidden { display: none; } /* ── User dropdown (menu de perfil) — Material-style, denso e alinhado ────── */ #header-user-dropdown.nv-usermenu { width: 290px !important; padding: 0 !important; overflow: hidden !important; background: var(--bg-1) !important; border: 1px solid var(--border-soft) !important; border-radius: 16px !important; box-shadow: var(--shadow-lg) !important; } .nv-usermenu-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; border-bottom: 1px solid var(--border-subtle); } .nv-usermenu-head-text { min-width: 0; display: flex; flex-direction: column; } .nv-usermenu-name { font: 600 14px/1.25 var(--font-display); color: var(--text-1); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nv-usermenu-email { font: 400 12px/1.3 var(--font-sans); color: var(--text-3); margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nv-usermenu-badge { align-self: flex-start; margin-top: 6px; font: 700 9.5px/1 var(--font-mono); letter-spacing: 0.08em; color: var(--accent); background: var(--accent-soft); border: 1px solid oklch(0.74 0.16 152 / 0.28); padding: 3px 8px; border-radius: 999px; text-transform: uppercase; } .nv-usermenu-list { padding: 6px; } .nv-usermenu-item { display: flex !important; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; color: var(--text-2); text-decoration: none !important; transition: background 120ms ease, color 120ms ease; } /* Nenhum item fica "grudado" realçado — só hover/foco (sem sublinhado). O item focado ao abrir o menu é o primeiro (Minha Conta), com realce de fundo limpo. */ .nv-usermenu-item:hover, .nv-usermenu-item:focus, .nv-usermenu-item:focus-visible { background: var(--bg-2); color: var(--text-1); outline: none; } .nv-usermenu-item:hover .nv-usermenu-title, .nv-usermenu-item:focus .nv-usermenu-title { color: var(--text-1); } .nv-usermenu-item .nv-usermenu-title, .nv-usermenu-item .nv-usermenu-sub { text-decoration: none !important; } .nv-usermenu-icon { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; color: var(--text-3); transition: color 120ms ease; } .nv-usermenu-item:hover .nv-usermenu-icon { color: var(--text-1); } .nv-usermenu-icon svg { width: 19px; height: 19px; } .nv-usermenu-text { display: flex; flex-direction: column; min-width: 0; } .nv-usermenu-title { font: 500 13px/1.35 var(--font-sans); color: var(--text-1); } .nv-usermenu-sub { font: 400 11px/1.3 var(--font-sans); color: var(--text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nv-usermenu-divider { height: 1px; background: var(--border-subtle); margin: 6px 8px; } /* Ações destrutivas (Resetar, Sair) */ .nv-usermenu-item--danger .nv-usermenu-title { color: oklch(0.7 0.18 25); } .nv-usermenu-item--danger .nv-usermenu-icon { color: oklch(0.7 0.18 25); } .nv-usermenu-item--danger:hover { background: oklch(0.7 0.18 25 / 0.12); } .nv-usermenu-item--danger:hover .nv-usermenu-title, .nv-usermenu-item--danger:hover .nv-usermenu-icon { color: oklch(0.78 0.18 25); } /* Custom scrollbar nas áreas do shell */ .custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; } .custom-scrollbar::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 4px; } .custom-scrollbar::-webkit-scrollbar-track { background: transparent; } /* ─── Conteúdo dos módulos: bg do canvas ────────────────────────────────── */ .module { background: var(--bg-0) !important; } /* H1/h2 dos módulos: tipografia display */ .module h1, .module > .module-header h1, [id^="module-"] > h1 { font: 600 24px/1.15 var(--font-display) !important; letter-spacing: -0.02em; color: var(--text-1) !important; } .module h2, [id^="module-"] h2 { font: 600 18px/1.2 var(--font-display) !important; letter-spacing: -0.015em; color: var(--text-1) !important; } /* -------------------------------------------------------------------- Rodapé da sidebar COLAPSADA: timer e sequência compactos e centrados. Antes: relógio hh:mm:ss estourava a largura (~68px) e as 7 barrinhas do streak viravam ruído esmagado. -------------------------------------------------------------------- */ #sidebar.collapsed .sidebar-footer { padding: 8px 6px 10px; gap: 8px; } #sidebar.collapsed .sidebar-timer { padding: 7px 3px; gap: 2px; } #sidebar.collapsed .sidebar-timer-pulse { display: none; } #sidebar.collapsed .sidebar-timer-clock { font-size: 10.5px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; width: 100%; text-align: center; } #sidebar.collapsed .sidebar-streak { padding: 7px 3px; gap: 2px; } #sidebar.collapsed .sidebar-streak-bars { display: none; } #sidebar.collapsed .sidebar-streak-row { justify-content: center; }