/* ============================================================
Instituto Olam — Tema base (Bootstrap 5)
Paleta da marca + modo claro/escuro + mapeamento Bootstrap
------------------------------------------------------------
Como usar:
1. Importe as fontes (Google Fonts) no ou via @import abaixo.
2. Carregue o Bootstrap 5 ANTES deste arquivo.
3. Inclua este CSS depois do Bootstrap para sobrescrever as variáveis.
4. Alterne o tema com data-bs-theme="light" | "dark" no .
============================================================ */
/* ---- Fontes da marca (alternativa ao no head) ---- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Raleway:wght@400;500;600;700&display=swap');
/* ============================================================
1. CORES DA MARCA (valores fixos, não mudam entre temas)
============================================================ */
:root {
--olam-borgonha: #9f0043;
--olam-cinza-azulado: #4d5a6f;
--olam-dourado: #d4af37;
--olam-off-white: #f2f2f2;
--olam-quase-preto: #2c2c2c;
--olam-borgonha-rgb: 159, 0, 67;
--olam-cinza-azulado-rgb: 77, 90, 111;
--olam-dourado-rgb: 212, 175, 55;
--olam-off-white-rgb: 242, 242, 242;
--olam-quase-preto-rgb: 44, 44, 44;
/* Variações úteis (hover, foco, bordas) */
--olam-borgonha-escuro: color-mix(in srgb, var(--olam-borgonha) 82%, var(--olam-quase-preto));
--olam-borgonha-claro: color-mix(in srgb, var(--olam-borgonha) 68%, var(--olam-off-white));
--olam-dourado-claro: color-mix(in srgb, var(--olam-dourado) 78%, var(--olam-off-white));
--olam-cinza-azulado-escuro: color-mix(in srgb, var(--olam-cinza-azulado) 76%, var(--olam-quase-preto));
--olam-cinza-azulado-claro: color-mix(in srgb, var(--olam-cinza-azulado) 70%, var(--olam-off-white));
/* Tipografia da marca */
--olam-font-titulo: 'Playfair Display', Georgia, serif;
--olam-font-corpo: 'Raleway', system-ui, -apple-system, sans-serif;
/* Raio e sombra padrão dos cards */
--olam-radius: 0.5rem;
--olam-shadow: 0 0.75rem 1.8rem rgba(var(--olam-quase-preto-rgb), 0.10);
--olam-shadow-hover: 0 1rem 2.25rem rgba(var(--olam-quase-preto-rgb), 0.14);
--olam-shadow-soft: 0 0.45rem 1.2rem rgba(var(--olam-quase-preto-rgb), 0.08);
--olam-control-shadow: 0 0.35rem 1rem rgba(var(--olam-quase-preto-rgb), 0.06);
}
/* ============================================================
2. TEMA CLARO (data-bs-theme="light" ou padrão)
Mapeia a paleta sobre as variáveis do Bootstrap 5.
============================================================ */
[data-bs-theme="light"],
:root {
--bs-primary: var(--olam-borgonha);
--bs-primary-rgb: 159, 0, 67;
--bs-secondary: var(--olam-cinza-azulado);
--bs-secondary-rgb: 77, 90, 111;
--bs-body-bg: var(--olam-off-white);
--bs-body-color: var(--olam-quase-preto);
--bs-emphasis-color: var(--olam-quase-preto);
--bs-link-color: var(--olam-borgonha);
--bs-link-hover-color: var(--olam-borgonha-escuro);
--bs-border-color: color-mix(in srgb, var(--olam-cinza-azulado) 22%, var(--olam-off-white));
/* Superfícies */
--olam-surface: var(--olam-off-white);
--olam-surface-2: var(--olam-off-white);
--olam-surface-muted: color-mix(in srgb, var(--olam-off-white) 86%, var(--olam-cinza-azulado));
--olam-text-muted: color-mix(in srgb, var(--olam-cinza-azulado) 78%, var(--olam-quase-preto));
}
/* ============================================================
3. TEMA ESCURO (data-bs-theme="dark")
Superfícies derivadas do quase-preto + acentos ajustados.
============================================================ */
[data-bs-theme="dark"] {
--bs-primary: var(--olam-borgonha-claro); /* mais luminoso p/ contraste */
--bs-primary-rgb: 198, 77, 128;
--bs-secondary: var(--olam-cinza-azulado-claro);
--bs-secondary-rgb: 107, 118, 137;
--bs-body-bg: color-mix(in srgb, var(--olam-quase-preto) 78%, var(--olam-cinza-azulado));
--bs-body-color: var(--olam-off-white);
--bs-emphasis-color: var(--olam-off-white);
--bs-link-color: var(--olam-borgonha-claro);
--bs-link-hover-color: color-mix(in srgb, var(--olam-borgonha) 56%, var(--olam-off-white));
--bs-border-color: color-mix(in srgb, var(--olam-cinza-azulado) 46%, var(--olam-quase-preto));
/* Superfícies */
--olam-surface: color-mix(in srgb, var(--olam-quase-preto) 78%, var(--olam-cinza-azulado));
--olam-surface-2: color-mix(in srgb, var(--olam-quase-preto) 84%, var(--olam-cinza-azulado));
--olam-surface-muted: color-mix(in srgb, var(--olam-quase-preto) 88%, var(--olam-cinza-azulado));
--olam-text-muted: color-mix(in srgb, var(--olam-off-white) 65%, var(--olam-cinza-azulado));
--olam-dourado: var(--olam-dourado-claro); /* dourado mais claro no escuro */
--olam-shadow: 0 0.75rem 1.8rem rgba(var(--olam-quase-preto-rgb), 0.10);
--olam-shadow-hover: 0 1rem 2.25rem rgba(var(--olam-quase-preto-rgb), 0.14);
--olam-shadow-soft: 0 0.45rem 1.2rem rgba(var(--olam-quase-preto-rgb), 0.08);
--olam-control-shadow: 0 0.35rem 1rem rgba(var(--olam-quase-preto-rgb), 0.06);
}
/* ============================================================
4. TIPOGRAFIA
============================================================ */
body {
font-family: var(--olam-font-corpo);
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
}
h1, h2, h3, .h1, .h2, .h3, .olam-titulo {
font-family: var(--olam-font-titulo);
font-weight: 600;
letter-spacing: 0.2px;
}
.text-muted-olam { color: var(--olam-text-muted) !important; }
/* ============================================================
5. COMPONENTES
============================================================ */
.btn {
border-radius: 50px !important;
padding: 10px 15px !important;
box-shadow: rgb(50 50 93 / .25) 0 6px 12px -2px, rgb(0 0 0 / .3) 0 3px 7px -3px !important;
}
/* Cards modernos */
.card {
background-color: var(--olam-surface);
border: 0;
border-radius: var(--olam-radius);
box-shadow: var(--olam-shadow);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover { box-shadow: var(--olam-shadow-hover); }
.form-control,
.form-select {
background-color: var(--olam-surface);
border-color: transparent;
border-radius: var(--olam-radius);
box-shadow: var(--olam-control-shadow);
color: var(--bs-body-color);
}
.form-control:focus,
.form-select:focus {
background-color: var(--olam-surface);
border-color: rgba(var(--olam-borgonha-rgb), 0.36);
box-shadow: 0 0 0 0.2rem rgba(var(--olam-borgonha-rgb), 0.14), var(--olam-control-shadow);
}
.form-check-input {
border-color: rgba(var(--olam-cinza-azulado-rgb), 0.35);
}
.form-check-input:checked {
background-color: var(--olam-borgonha);
border-color: var(--olam-borgonha);
}
.alert {
border: 0;
border-radius: var(--olam-radius);
box-shadow: var(--olam-shadow-soft);
}
/* Botões primários (borgonha com parcimônia) */
.btn-primary,
.btn.btn-primary {
--bs-btn-bg: var(--olam-borgonha);
--bs-btn-border-color: var(--olam-borgonha);
--bs-btn-hover-bg: var(--olam-borgonha-escuro);
--bs-btn-hover-border-color: var(--olam-borgonha-escuro);
--bs-btn-active-bg: var(--olam-borgonha-escuro);
--bs-btn-color: #ffffff;
--bs-btn-hover-color: #ffffff;
background-color: var(--olam-borgonha);
border-color: var(--olam-borgonha);
box-shadow: 0 0.5rem 1.2rem rgba(var(--olam-borgonha-rgb), 0.22);
font-weight: 600;
}
.btn-primary:hover,
.btn.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:focus {
background-color: var(--olam-borgonha-escuro);
border-color: var(--olam-borgonha-escuro);
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #ffffff; --bs-btn-hover-color: #ffffff; }
.btn-secondary,
.btn.btn-secondary {
--bs-btn-bg: var(--olam-cinza-azulado);
--bs-btn-border-color: var(--olam-cinza-azulado);
--bs-btn-hover-bg: var(--olam-cinza-azulado-escuro);
--bs-btn-hover-border-color: var(--olam-cinza-azulado-escuro);
--bs-btn-color: var(--olam-off-white);
--bs-btn-hover-color: var(--olam-off-white);
box-shadow: var(--olam-control-shadow);
font-weight: 600;
}
.btn-outline-primary,
.btn.btn-outline-primary {
--bs-btn-color: var(--olam-borgonha);
--bs-btn-border-color: rgba(var(--olam-borgonha-rgb), 0.32);
--bs-btn-hover-bg: var(--olam-borgonha);
--bs-btn-hover-border-color: var(--olam-borgonha);
--bs-btn-hover-color: var(--olam-off-white);
--bs-btn-active-bg: var(--olam-borgonha);
--bs-btn-active-border-color: var(--olam-borgonha);
box-shadow: var(--olam-control-shadow);
}
.btn-outline-secondary,
.btn.btn-outline-secondary {
--bs-btn-color: var(--olam-cinza-azulado);
--bs-btn-border-color: rgba(var(--olam-cinza-azulado-rgb), 0.28);
--bs-btn-hover-bg: var(--olam-cinza-azulado);
--bs-btn-hover-border-color: var(--olam-cinza-azulado);
--bs-btn-hover-color: var(--olam-off-white);
--bs-btn-active-bg: var(--olam-cinza-azulado);
--bs-btn-active-border-color: var(--olam-cinza-azulado);
background-color: var(--olam-surface);
box-shadow: var(--olam-control-shadow);
font-weight: 600;
}
[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .btn.btn-outline-primary {
--bs-btn-color: var(--olam-borgonha-claro);
--bs-btn-border-color: rgba(var(--olam-borgonha-rgb), 0.42);
--bs-btn-hover-bg: var(--olam-borgonha-claro);
--bs-btn-hover-border-color: var(--olam-borgonha-claro);
--bs-btn-hover-color: var(--olam-quase-preto);
}
[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .btn.btn-outline-secondary {
--bs-btn-color: var(--olam-off-white);
--bs-btn-border-color: rgba(var(--olam-off-white-rgb), 0.18);
--bs-btn-hover-bg: var(--olam-cinza-azulado-claro);
--bs-btn-hover-border-color: var(--olam-cinza-azulado-claro);
--bs-btn-hover-color: var(--olam-quase-preto);
}
/* Badge dourado — acento de prestígio, uso pontual */
.badge-olam-dourado {
background-color: var(--olam-dourado);
color: var(--olam-quase-preto);
font-weight: 600;
}
/* ---- Sidebar estrutural (cinza-azulado) ---- */
.olam-sidebar {
background-color: var(--olam-cinza-azulado);
color: var(--olam-off-white);
min-height: 100vh;
box-shadow: 0.75rem 0 1.8rem rgba(var(--olam-quase-preto-rgb), 0.10);
}
[data-bs-theme="dark"] .olam-sidebar { background-color: var(--olam-surface-2); }
.olam-sidebar .nav-link {
color: var(--olam-off-white);
border-radius: 0.5rem;
margin: 0.15rem 0.5rem;
padding: 0.6rem 0.9rem;
transition: background-color 0.15s ease, color 0.15s ease;
}
.olam-sidebar .nav-link:hover {
background-color: rgba(var(--olam-off-white-rgb), 0.08);
color: var(--olam-off-white);
}
/* Item ativo destacado em borgonha */
.olam-sidebar .nav-link.active {
background-color: var(--olam-borgonha);
color: var(--olam-off-white);
box-shadow: 0 0.45rem 1rem rgba(var(--olam-borgonha-rgb), 0.24);
}
/* ---- Cards do Kanban: borda lateral = cor do cliente ---- */
.kanban-card {
background-color: var(--olam-surface);
border-radius: var(--olam-radius);
box-shadow: var(--olam-shadow);
border-left: 4px solid var(--cliente-cor, var(--olam-cinza-azulado));
padding: 0.85rem 1rem;
margin-bottom: 0.75rem;
cursor: grab;
}
.kanban-card:hover { box-shadow: var(--olam-shadow-hover); }
/* Uso: */
/* Badges de complexidade */
.badge-complexidade-alta { background-color: var(--olam-borgonha); color:var(--olam-off-white); }
.badge-complexidade-media { background-color: var(--olam-dourado); color: var(--olam-quase-preto); }
.badge-complexidade-baixa { background-color: var(--olam-cinza-azulado); color:var(--olam-off-white); }
/* Indicador de SLA */
.sla-no-prazo { color: var(--olam-cinza-azulado); }
.sla-atencao { color: var(--olam-dourado); }
.sla-estourado { color: var(--olam-borgonha); font-weight: 600; }
.olam-urgent-badge {
background-color: var(--olam-borgonha);
color: var(--olam-off-white);
}
.olam-error-text,
.olam-icon-accent {
color: var(--olam-borgonha) !important;
}
.olam-success-text {
color: var(--olam-cinza-azulado) !important;
}
.text-primary,
.text-danger,
.text-success,
.text-warning,
.text-info {
color: var(--olam-borgonha) !important;
}
.text-bg-danger,
.bg-danger,
.btn-danger,
.btn.btn-danger {
background-color: var(--olam-borgonha) !important;
border-color: var(--olam-borgonha) !important;
color: var(--olam-off-white) !important;
}
.alert-info,
.alert-success,
.alert-warning,
.alert-danger {
background-color: rgba(var(--olam-dourado-rgb), 0.16);
color: var(--olam-quase-preto);
}
[data-bs-theme="dark"] .alert-info,
[data-bs-theme="dark"] .alert-success,
[data-bs-theme="dark"] .alert-warning,
[data-bs-theme="dark"] .alert-danger {
background-color: rgba(var(--olam-dourado-rgb), 0.20);
color: var(--olam-off-white);
}
/* Tabelas de relatório limpas */
.table-olam thead th {
background-color: var(--olam-cinza-azulado);
color: var(--olam-off-white);
font-weight: 600;
border: none;
}
.table-olam tbody tr:nth-child(even) { background-color: rgba(var(--olam-cinza-azulado-rgb), 0.06); }
.table-olam td { border-color: transparent; }
[data-bs-theme="dark"] .table-olam tbody tr:nth-child(even) { background-color: rgba(var(--olam-off-white-rgb), 0.035); }
/* ============================================================
6. WIDGET DE ACESSIBILIDADE
============================================================ */
.olam-a11y-toggle {
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
width: 3rem;
height: 3rem;
border-radius: 50%;
background-color: var(--olam-borgonha);
color: var(--olam-off-white);
border: none;
box-shadow: var(--olam-shadow-hover);
z-index: 1080;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.olam-a11y-panel {
position: fixed;
right: 1.25rem;
bottom: 5rem;
width: 16rem;
background-color: var(--olam-surface);
color: var(--bs-body-color);
border: 0;
border-radius: var(--olam-radius);
box-shadow: var(--olam-shadow-hover);
padding: 1rem;
z-index: 1080;
}
.olam-a11y-panel:focus {
outline: none;
}
.olam-a11y-actions .btn {
align-items: center;
display: inline-flex;
justify-content: flex-start;
}
.olam-a11y-actions .btn.active {
background-color: var(--olam-borgonha);
border-color: var(--olam-borgonha);
color: var(--olam-off-white);
}
.olam-a11y-font-grid {
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.olam-a11y-close {
height: 2rem;
justify-content: center !important;
padding: 0;
width: 2rem;
}
/* Classes aplicadas pelo widget (via JS) na tag */
.olam-fonte-grande { font-size: 1.125rem; }
.olam-fonte-maior { font-size: 1.25rem; }
/* Alto contraste */
.olam-alto-contraste {
--bs-body-bg: var(--olam-quase-preto);
--bs-body-color: var(--olam-off-white);
--olam-surface: var(--olam-quase-preto);
--olam-surface-muted: var(--olam-quase-preto);
--bs-border-color: var(--olam-off-white);
--bs-primary: var(--olam-borgonha);
}
.olam-alto-contraste .card,
.olam-alto-contraste .kanban-card { border: 2px solid var(--olam-off-white); }
/* Reduzir animações (respeita a preferência do sistema também) */
.olam-sem-animacao *,
.olam-sem-animacao *::before,
.olam-sem-animacao *::after {
animation: none !important;
transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}
/* Foco visível (acessibilidade por teclado) */
a:focus-visible,
button:focus-visible,
.form-control:focus-visible,
.nav-link:focus-visible {
outline: 3px solid var(--olam-dourado);
outline-offset: 2px;
}