/* ============================================================ Instituto Olam — Tema base (Bootstrap 5) Paleta da marca + modo claro/escuro + mapeamento Bootstrap ------------------------------------------------------------ Como usar: 1. Carregue o Bootstrap 5 ANTES deste arquivo. 2. Inclua este CSS depois do Bootstrap para sobrescrever as variáveis. 3. Mantenha as fontes locais em /vendor/fonts/olam. 4. Alterne o tema com data-bs-theme="light" | "dark" no . ============================================================ */ /* ---- Fontes da marca servidas localmente ---- */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('/vendor/fonts/olam/playfair-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('/vendor/fonts/olam/playfair-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('/vendor/fonts/olam/playfair-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('/vendor/fonts/olam/playfair-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/vendor/fonts/olam/raleway-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/vendor/fonts/olam/raleway-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/vendor/fonts/olam/raleway-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/vendor/fonts/olam/raleway-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/vendor/fonts/olam/raleway-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ 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; /* Variações úteis (hover, foco, bordas) */ --olam-borgonha-escuro: #7d0035; /* hover de botões no modo claro */ --olam-borgonha-claro: #c64d80; /* borgonha ajustado p/ modo escuro */ --olam-dourado-claro: #e2c45f; /* dourado ajustado p/ modo escuro */ --olam-cinza-azulado-escuro: #3a4456; --olam-cinza-azulado-claro: #6b7689; /* 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 (estilo clean/fluido, tipo Monday) */ --olam-radius: 1rem; --olam-radius-lg: 1.15rem; --olam-shadow: 0 1px 2px rgba(44, 44, 44, 0.04), 0 4px 16px rgba(44, 44, 44, 0.06); --olam-shadow-hover: 0 2px 6px rgba(44, 44, 44, 0.06), 0 12px 32px rgba(44, 44, 44, 0.10); } /* ============================================================ 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: #f7f8fa; --bs-body-color: var(--olam-quase-preto); --bs-emphasis-color: #000; --bs-link-color: var(--olam-borgonha); --bs-link-hover-color: var(--olam-borgonha-escuro); --bs-border-color: #dcdfe4; /* Superfícies */ --olam-surface: #ffffff; /* fundo de cards */ --olam-surface-2: #ffffff; /* fundo de sidebar */ --olam-text-muted: #6b7280; } /* ============================================================ 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: #1c2026; /* fundo geral escuro (base quase-preto) */ --bs-body-color: #e8eaed; --bs-emphasis-color: #fff; --bs-link-color: var(--olam-borgonha-claro); --bs-link-hover-color: #d97ba3; --bs-border-color: #353b45; /* Superfícies */ --olam-surface: #262b33; /* cards um degrau acima do fundo */ --olam-surface-2: #21262e; /* sidebar */ --olam-text-muted: #9aa3b0; --olam-dourado: var(--olam-dourado-claro); /* dourado mais claro no escuro */ --olam-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); --olam-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.55); } /* ============================================================ 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 ============================================================ */ /* Cards modernos (clean e fluido) */ .card { background-color: var(--olam-surface); border: 1px solid var(--bs-border-color); border-radius: var(--olam-radius-lg); box-shadow: var(--olam-shadow); transition: box-shadow 0.25s ease, transform 0.25s ease; } .card:hover { box-shadow: var(--olam-shadow-hover); transform: translateY(-2px); } /* Botões primários (borgonha com parcimônia) */ .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: #fff; --bs-btn-hover-color: #fff; } [data-bs-theme="dark"] .btn-primary { --bs-btn-color: #1c2026; --bs-btn-hover-color: #1c2026; } /* 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: #eef0f3; min-height: 100vh; box-shadow: 2px 0 18px rgba(44, 44, 44, 0.06); } [data-bs-theme="dark"] .olam-sidebar { background-color: var(--olam-surface-2); } .olam-sidebar .nav-link { color: #d7dbe2; 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(255,255,255,0.08); color: #fff; } /* Item ativo destacado em borgonha */ .olam-sidebar .nav-link.active { background-color: var(--olam-borgonha); color: #fff; } /* ---- 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.95rem 1rem; margin-bottom: 0.8rem; cursor: grab; transition: box-shadow 0.2s ease, transform 0.2s ease; } .kanban-card:hover { box-shadow: var(--olam-shadow-hover); transform: translateY(-2px); } /* Uso:
*/ /* Badges de complexidade */ .badge-complexidade-alta { background-color: var(--olam-borgonha); color:#fff; } .badge-complexidade-media { background-color: var(--olam-dourado); color: var(--olam-quase-preto); } .badge-complexidade-baixa { background-color: var(--olam-cinza-azulado); color:#fff; } /* Indicador de SLA */ .sla-no-prazo { color: #1f8a4c; } .sla-atencao { color: #c87f0a; } .sla-estourado { color: var(--olam-borgonha); font-weight: 600; } /* Tabelas de relatório limpas */ .table-olam thead th { background-color: var(--olam-cinza-azulado); color: #fff; font-weight: 600; border: none; } .table-olam tbody tr:nth-child(even) { background-color: rgba(77, 90, 111, 0.06); } /* ============================================================ 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: #fff; border: none; box-shadow: var(--olam-shadow-hover); z-index: 1080; cursor: pointer; } .olam-a11y-panel { position: fixed; right: 1.25rem; bottom: 5rem; width: 16rem; background-color: var(--olam-surface); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); border-radius: var(--olam-radius); box-shadow: var(--olam-shadow-hover); padding: 1rem; z-index: 1080; } /* 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: #000; --bs-body-color: #fff; --olam-surface: #000; --bs-border-color: #fff; --bs-primary: #ff5fa2; } .olam-alto-contraste .card, .olam-alto-contraste .kanban-card { border: 2px solid #fff; } /* 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; }