/* ============================================================ Talk Hub — Sistema de Design (WHITELABEL, com modo claro/escuro) Os NOMES das variáveis (--ink, --ivory etc.) ficam iguais nos dois temas, só o VALOR muda - assim qualquer estilo que já usa var(--ink-2) funciona nos dois modos automaticamente, sem precisar caçar cor espalhada pelo código. Padrão = modo claro (fundo branco). Modo escuro é opcional, via botão, e ativado com . Pra trocar de hotel: troque só --accent e --accent-bright. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap'); :root { /* Base - MODO CLARO (padrão) */ --ink: #FFFFFF; --ink-2: #F6F7F8; --ink-3: #EBEDEF; --ink-4: #DCE0E3; /* Texto - MODO CLARO */ --ivory: #1A2226; --ivory-dim: #4A545C; --ivory-faint: #737E86; /* Acentos (mesma cor nos dois temas) */ --accent: #2D7D74; --accent-bright: #1F5F58; --moss: #3F7A4C; --brick: #A24E3D; /* Bordas - MODO CLARO */ --border: rgba(20,30,35,0.10); --border-strong: rgba(20,30,35,0.18); --overlay-fraca: rgba(20,30,35,0.035); --overlay-media: rgba(20,30,35,0.06); --font-display: 'Fraunces', Georgia, serif; --font-body: 'IBM Plex Sans', -apple-system, sans-serif; } /* MODO ESCURO - ativado via */ :root[data-theme="dark"] { --ink: #121A22; --ink-2: #1A232C; --ink-3: #232F3A; --ink-4: #2C3A46; --ivory: #F1EAD9; --ivory-dim: #B8AE99; --ivory-faint: #7C7566; --accent: #2D7D74; --accent-bright: #4CB8AC; --moss: #7C9179; --brick: #B06450; --border: rgba(241,234,217,0.10); --border-strong: rgba(241,234,217,0.20); --overlay-fraca: rgba(241,234,217,0.025); --overlay-media: rgba(241,234,217,0.06); } * , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--ink); color: var(--ivory); font-family: var(--font-body); font-size: 14px; line-height: 1.55; } h1, h2, h3, .display { font-family: var(--font-display); font-weight: 600; color: var(--ivory); letter-spacing: -0.01em; } /* ---------- Rótulo pequeno de seção (substitui o "EYEBROW ALL-CAPS") ---------- */ .tag-label { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-body); font-size: 12.5px; font-weight: 500; color: var(--accent); } .tag-label::before { content: ''; width: 14px; height: 1.5px; background: var(--accent); display: inline-block; } /* ---------- Botões ---------- */ .btn { font-family: var(--font-body); font-size: 13px; font-weight: 600; border: none; border-radius: 4px; padding: 9px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .btn-primary { background: var(--accent); color: var(--ink); } .btn-primary:hover { background: var(--accent-bright); } .btn-ghost { background: transparent; color: var(--ivory-dim); border: 1px solid var(--border-strong); } .btn-ghost:hover { color: var(--ivory); border-color: var(--accent); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ---------- Painel elevado (uso reservado: edição, destaque, resumo) ---------- */ .panel { background: var(--ink-2); border: 1px solid var(--border); border-radius: 6px; } /* ---------- Linha de livro-razão (uso: listas — hóspedes, mensagens, conversas) ---------- */ .ledger-row { border-bottom: 1px solid var(--border); padding: 14px 0; } .ledger-row:hover { background: var(--overlay-fraca); } /* ---------- Campo de formulário ---------- */ .field label { display: block; font-size: 12px; color: var(--ivory-faint); margin-bottom: 5px; } .field input, .field textarea, .field select { width: 100%; background: var(--ink); border: 1px solid var(--border-strong); border-radius: 4px; padding: 9px 11px; color: var(--ivory); font-family: var(--font-body); font-size: 13.5px; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); } /* ---------- Etiqueta/tag ---------- */ .pill { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 500; padding: 3px 10px; border-radius: 3px; border: 1px solid var(--border-strong); color: var(--ivory-dim); } .pill-brass { border-color: var(--accent); color: var(--accent-bright); } .pill-moss { border-color: var(--moss); color: var(--moss); } .pill-brick { border-color: var(--brick); color: var(--brick); } /* ---------- Estrutura de topo compartilhada ---------- */ .topbar { background: var(--ink-2); border-bottom: 1px solid var(--border); padding: 18px 28px; display: flex; justify-content: space-between; align-items: center; } .topbar .brand { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--ivory); } .topbar nav { display: flex; gap: 4px; } .topbar nav a { color: var(--ivory-faint); text-decoration: none; font-size: 13px; padding: 7px 13px; border-radius: 4px; font-weight: 500; } .topbar nav a:hover { color: var(--ivory); } .topbar nav a.ativo { color: var(--ink); background: var(--accent); } .topo-usuario { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--ivory-faint); } /* ---------- Barra lateral (layout de app, whitelabel) ---------- */ .app-shell { display: flex; height: 100vh; overflow: hidden; } .sidebar { width: 216px; background: var(--ink-2); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; } .sidebar-brand { padding: 22px 20px 26px; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ivory); display: flex; align-items: center; gap: 9px; } .sidebar-nav { flex: 1; padding: 0 12px; } .sidebar-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 5px; color: var(--ivory-faint); text-decoration: none; font-size: 13.5px; font-weight: 500; margin-bottom: 2px; } .sidebar-nav a:hover { color: var(--ivory); background: var(--overlay-fraca); } .sidebar-nav a.ativo { color: var(--ink); background: var(--accent); font-weight: 600; } .sidebar-footer { padding: 16px 20px; border-top: 1px solid var(--border); font-size: 12px; color: var(--ivory-faint); } .sidebar-footer .btn { width: 100%; justify-content: center; margin-top: 10px; } /* ---------- Barra lateral recolhida (só ícone) ---------- */ .sidebar.recolhida { width: 60px; } .sidebar.recolhida .sidebar-brand { flex-direction: column; gap: 10px; padding: 18px 8px; align-items: center; } .sidebar.recolhida .sidebar-brand img { display: none; } .sidebar.recolhida .sidebar-brand span, .sidebar.recolhida .sidebar-nav a span, .sidebar.recolhida .sidebar-footer .texto-usuario, .sidebar.recolhida .sidebar-footer .btn span, .sidebar.recolhida .sidebar-footer .theme-toggle-btn span { display: none; } .sidebar.recolhida .sidebar-toggle-btn { margin-left: 0; width: 32px; height: 32px; font-size: 16px; } .sidebar.recolhida .sidebar-nav a { justify-content: center; padding: 10px; } .sidebar.recolhida .sidebar-footer { display: flex; flex-direction: column; align-items: center; } .sidebar.recolhida .sidebar-footer .btn { width: 36px; height: 36px; padding: 0; } .sidebar.recolhida .theme-toggle-btn { width: 36px; height: 36px; padding: 0; } .sidebar-toggle-btn { background: transparent; border: 1px solid var(--border-strong); color: var(--ivory-faint); border-radius: 4px; width: 26px; height: 26px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; margin-left: auto; } .sidebar-toggle-btn:hover { color: var(--ivory); border-color: var(--accent); } /* ---------- Botão de alternar tema claro/escuro ---------- */ .theme-toggle-btn { background: var(--ink-3); border: 1px solid var(--border-strong); color: var(--ivory-dim); border-radius: 4px; padding: 7px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-family: var(--font-body); width: 100%; margin-top: 10px; } .theme-toggle-btn:hover { color: var(--ivory); border-color: var(--accent); } .app-main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-width: 0; } .app-header { padding: 20px 28px; border-bottom: 1px solid var(--border); background: var(--ink-2); } .app-header h1 { font-family: var(--font-display); font-size: 22px; font-weight: 600; } /* ---------- Abas dentro de uma página (ex: Dashboard) ---------- */ .tabs-row { display: flex; gap: 4px; border-bottom: 1px solid var(--border); padding: 0 28px; background: var(--ink-2); } .tab-btn { background: transparent; border: none; color: var(--ivory-faint); font-family: var(--font-body); font-size: 13.5px; font-weight: 500; padding: 14px 16px; cursor: pointer; border-bottom: 2px solid transparent; } .tab-btn:hover { color: var(--ivory); } .tab-btn.ativo { color: var(--accent-bright); border-bottom-color: var(--accent); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--ink); } ::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 5px; }