/* ========================================================================== Intranet-IC — Theme layer (Fase 0) -------------------------------------------------------------------------- Camada aditiva sobre NiceAdmin 2.2.2 / Bootstrap 5.1.3. Carregada por ÚLTIMO no header.htm (depois de style.css e custom.css), então vence por ordem de cascata em especificidade igual. Direção: "super NiceAdmin" — hairline-first, denso, dessaturado. Assinatura (única ousadia): item de menu ativo como PROMPT de terminal + cursor de digitação teal + números monoespaçados/tabulares. NÃO usar elevação difusa (Material), pills, ALL-CAPS+ripple. TIPOGRAFIA (decisão: limitar o impacto da fonte nova ao painel): - CONTEÚDO (área principal à direita): fontes ORIGINAIS do NiceAdmin (Open Sans / Nunito / Poppins), vindas do style.css — o theme.css não as sobrescreve. Assim a leitura de tabelas/formulários fica fiel ao que o usuário já conhece. - PAINEL esquerdo (.sidebar): mantém a tipografia moderna — marca em Raleway (--font-display), itens de menu em Lato (--font-body, fixado em .sidebar) e o caret ▸ em Fira Code (--font-mono). - NÚMEROS/identificadores (.mono/.font-mono, tabelas): seguem em Fira Code tabular — escolha funcional (alinha colunas), vale no conteúdo. Reversível: basta remover o de theme.css no header.htm. TODO (theming futuro por usuário): o servidor pode injetar class="accent-slate" (etc.) no ou data-theme no para trocar os tokens abaixo. Ganchos já preparados no fim do arquivo. ========================================================================== */ :root { /* Tipografia */ --font-display: "Raleway", "Segoe UI", system-ui, sans-serif; --font-body: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "Fira Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Superfícies */ --app-bg: #f8f6f1; --surface: #ffffff; --hairline: #e9e3d7; --hairline-strong: #d7cbb7; /* Texto */ --text: #2f2923; --text-muted: #706659; --text-faint: #9f9489; /* ==== ACCENT — avaliando AZUL COBALTO x AMBER ========================== Para alternar: mantenha UM dos dois blocos ativo e comente o outro (accent + o --glow-sun logo abaixo andam juntos, use o mesmo tom). */ /* --- Opção ATIVA: amber --------------------------------------------- */ --accent: #f59e0b; --accent-hover: #d97706; --accent-ink: #b45309; /* links/texto — contraste AA sobre branco */ --accent-soft: rgba(245, 158, 11, 0.10); --accent-softer: rgba(245, 158, 11, 0.05); --glow-sun: radial-gradient( circle 680px at 220px 14%, rgba(245, 158, 11, 0.14), rgba(245, 158, 11, 0.07) 32%, rgba(245, 158, 11, 0.03) 56%, rgba(245, 158, 11, 0) 76% ); /* --- Opção COMENTADA: azul cobalto (descomente este e comente o de cima) --accent: #1f66c2; --accent-hover: #1a56a3; --accent-ink: #1a5299; --accent-soft: rgba(31, 102, 194, 0.10); --accent-softer: rgba(31, 102, 194, 0.05); --glow-sun: radial-gradient( circle 680px at 220px 14%, rgba(31, 102, 194, 0.14), rgba(31, 102, 194, 0.07) 32%, rgba(31, 102, 194, 0.03) 56%, rgba(31, 102, 194, 0) 76% ); ---------------------------------------------------------------------- */ /* Forma */ --radius: 10px; --radius-sm: 8px; --radius-xs: 6px; /* Sombra — borda-primeiro, uma camada tímida (nada de elevação Material) */ --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05); --shadow: 0 1px 3px rgba(16, 24, 40, 0.07); /* Cursor de digitação teal — eco subliminar da assinatura */ caret-color: var(--accent); } /* -------------------------------------------------------------------------- Base / tipografia -------------------------------------------------------------------------- */ body { /* fonte de corpo: ORIGINAL (Open Sans via style.css) — não sobrescrever aqui. A fonte moderna (Lato) fica restrita ao painel (.sidebar), mais abaixo. */ background-color: var(--app-bg); background-image: var(--glow-sun); background-repeat: no-repeat; background-attachment: fixed; color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Títulos do CONTEÚDO ficam nas fontes ORIGINAIS (Nunito h1-h6 / Poppins .card-title, via style.css). O theme.css não impõe mais Raleway aqui — Raleway agora vive só na marca do painel (.brand-name / .brand-ic). */ a { color: var(--accent-ink); } a:hover { color: var(--accent-hover); } /* Números como assinatura: figuras tabulares alinham colunas */ .table, .pagination, .dataTables_info { font-variant-numeric: tabular-nums; } /* Utilitário mono para identificadores (matrícula, ramal, protocolo, valores). Fase 2: aplicar via hooks de coluna nas tabelas montadas por JS. */ .mono, .font-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } /* -------------------------------------------------------------------------- Página / título -------------------------------------------------------------------------- */ .pagetitle h1 { font-size: 1.5rem; font-weight: 600; color: var(--text); } #hr_breadcrumb { border-color: var(--hairline); opacity: 1; } .breadcrumb { font-size: 0.8125rem; color: var(--text-muted); } .breadcrumb a { color: var(--text-muted); } .breadcrumb a:hover { color: var(--accent-ink); } .breadcrumb-item.active { color: var(--text); } /* -------------------------------------------------------------------------- Cards — hairline-first, sombra tímida (troca a sombra azul difusa) -------------------------------------------------------------------------- */ .card { border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: none; /* borda tênue basta; sem sombra "flutuando" */ } .card-title { font-size: 0.95rem; font-weight: 500; /* menos negrito */ color: var(--text); } /* -------------------------------------------------------------------------- Header REMOVIDO — brand + usuário logado agora vivem na sidebar (o painel). Sem topbar: a sidebar começa no topo e o conteúdo não reserva espaço p/ header. -------------------------------------------------------------------------- */ .sidebar { top: 0; } /* Header removido: encosta o conteúdo no topo e enxuga a faixa do breadcrumb+hr (que na home é só o ícone de casa) — era ela o "vão branco" no topo. */ #main { margin-top: 0; padding-top: 10px; font-size: 0.92rem; } #main > .row:first-child { margin-bottom: 0; } .breadcrumb { line-height: 1.2; } #hr_breadcrumb { margin-top: 4px; margin-bottom: 12px; } /* Cabeçalho do painel: logo + wordmark + hambúrguer de recolher */ .sidebar-brand { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 4px 2px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--hairline); } .brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; min-width: 0; } .brand-logo { max-height: 26px; } .brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.04rem; letter-spacing: -0.01em; color: var(--text); } .brand-ic { font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.06em; color: #fff; background: var(--accent); padding: 0.14rem 0.42rem; border-radius: 999px; line-height: 1; } /* Usuário logado dentro do painel */ .sidebar-user { display: flex; align-items: center; gap: 0.4rem; padding: 4px 6px; margin-bottom: 4px; background: var(--accent-softer); border-radius: var(--radius-sm); text-decoration: none; transition: background-color 0.15s ease; } .sidebar-user:hover { background: var(--accent-soft); } .sidebar-nav { margin-top: 0; padding-top: 6px; } .sidebar-user-id { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; font-size: 0.8rem; color: var(--text); } .sidebar-user-photo { width: 22px; height: 22px; border-radius: 50%; } .sidebar-user-photo-wrap { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: 0 0 22px; } .sidebar-user-photo-img { object-fit: cover; } .sidebar-user-photo-fallback { display: inline-flex; align-items: center; justify-content: center; background: #e7ecef; color: #6b7280; border: 1px solid var(--hairline); flex: 0 0 22px; } .sidebar-user-photo-fallback .bi-person-fill { font-size: 0.72rem; line-height: 1; } .sidebar-user-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Hambúrguer de recolher, no cabeçalho do painel */ .sidebar .toggle-sidebar-btn { flex: 0 0 auto; font-size: 20px; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 4px 6px; border-radius: var(--radius-sm); } .sidebar .toggle-sidebar-btn:hover { background: var(--accent-softer); color: var(--accent); } /* Puxador com seta: aparece quando o menu está recolhido, para reexpandir */ .sidebar-expand-btn { display: none; position: fixed; top: 12px; left: 0; z-index: 998; width: 22px; height: 46px; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--hairline); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface); color: var(--accent); box-shadow: var(--shadow); cursor: pointer; } .sidebar-expand-btn:hover { background: var(--accent-soft); } /* Desktop: o puxador só aparece quando recolhido */ @media (min-width: 1200px) { body.toggle-sidebar .sidebar-expand-btn { display: flex; } } /* Mobile: padrão já é recolhido → puxador visível; some quando abre */ @media (max-width: 1199px) { .sidebar-expand-btn { display: flex; } body.toggle-sidebar .sidebar-expand-btn { display: none; } } /* -------------------------------------------------------------------------- Sidebar / menu — item ativo = PROMPT (sem pill), hover sutil -------------------------------------------------------------------------- */ /* Sidebar enxuta: mais estreita, menos padding, sem linha divisória (feedback: "ocupa muito espaço"). #main/#footer sincronizados. */ .sidebar { /* Fonte moderna fica confinada AO PAINEL: fixa Lato em tudo aqui dentro (menu, headings, usuário). A marca (.brand-name/.brand-ic → Raleway) e o caret ▸ (.nav-link::before → Fira Code) vencem por regra própria. */ font-family: var(--font-body); background-color: var(--surface); background-image: var(--glow-sun); background-repeat: no-repeat; background-attachment: fixed; border-right: 0; width: 220px; padding: 12px 10px; box-shadow: none; transition: width 0.2s ease, padding 0.2s ease; } @media (min-width: 1200px) { #main, #footer { margin-left: 220px; transition: margin-left 0.2s ease; } } @media (max-width: 1199px) { .sidebar { left: -220px; } } @media (min-width: 1200px) { .toggle-sidebar .sidebar { left: -220px; } } /* densidade + menos peso (feedback: "muito negrito") */ .sidebar-nav .nav-item { margin-bottom: 1px; } .sidebar-nav .nav-link, .sidebar-nav .nav-content a { color: var(--text-muted); font-weight: 500; font-size: 0.83rem; padding: 6px 8px; border-radius: var(--radius-sm); transition: background-color 0.15s ease, color 0.15s ease; } .sidebar-nav .nav-link i, .sidebar-nav .nav-content a i { color: var(--text-faint); font-size: 14px; margin-right: 6px; } /* hover sutil — não preenche, só um toque */ .sidebar-nav .nav-link:hover, .sidebar-nav .nav-content a:hover { background: var(--accent-softer); color: var(--text); } .sidebar-nav .nav-link:hover i, .sidebar-nav .nav-content a:hover i { color: var(--accent); } /* Item ativo = prompt (sem pill, peso contido) */ .sidebar-nav .nav-link:not(.collapsed) { position: relative; color: var(--accent-ink); font-weight: 600; background: transparent; padding-left: 18px; } .sidebar-nav .nav-link:not(.collapsed) i { color: var(--accent); } /* o caret mono teal — a assinatura, estático, no vão à esquerda */ .sidebar-nav .nav-link:not(.collapsed)::before { content: "\25B8"; /* ▸ */ font-family: var(--font-mono); color: var(--accent); position: absolute; left: 5px; top: 50%; transform: translateY(-50%); font-size: 0.7rem; line-height: 1; } /* item de submenu ativo (child dentro de .nav-content) */ .sidebar-nav .nav-content { padding-left: 8px; } .sidebar-nav .nav-content a.active { color: var(--accent-ink); font-weight: 600; } /* -------------------------------------------------------------------------- Tabelas + DataTables — hairlines leves, controles calmos -------------------------------------------------------------------------- */ .table { color: var(--text); border-color: #f3ecdf; } /* grade bem tênue (feedback: menos linhas) */ .table > :not(caption) > * > * { border-bottom-color: #f3ecdf; } /* Cabeçalho de tabela no espírito do SuSy (datatables-susy.css): rótulo em maiúsculas pequenas, muted, leve tinta do accent, padding generoso, régua de 2px embaixo e cantos superiores arredondados. */ .table thead th { background: var(--accent-softer); color: var(--text-muted); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.75rem 0.75rem; border-bottom: 2px solid var(--hairline-strong); vertical-align: middle; white-space: nowrap; } .table thead th:first-child { border-top-left-radius: var(--radius-xs); } .table thead th:last-child { border-top-right-radius: var(--radius-xs); } /* Linhas mais folgadas nas DataTables (o corpo respira, como no SuSy) */ table.dataTable > tbody > tr > td { padding-top: 0.6rem; padding-bottom: 0.6rem; vertical-align: middle; } /* Ícones de ordenação no estilo SuSy: um glyph por estado (⇅ sem ordenação · ▲ ascendente · ▼ descendente). A build dt-1.12.1 bs5 usa ▴ no ::before e ▾ no ::after — escondemos o ::before e reaproveitamos o ::after. !important porque o CSS do CDN carrega depois do theme.css. */ table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > td.sorting:before, table.dataTable thead > tr > td.sorting_asc:before, table.dataTable thead > tr > td.sorting_desc:before { display: none !important; } table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > td.sorting:after, table.dataTable thead > tr > td.sorting_asc:after, table.dataTable thead > tr > td.sorting_desc:after { top: 50% !important; bottom: auto !important; right: 0.6rem !important; transform: translateY(-50%) !important; line-height: 1 !important; font-size: 0.72rem !important; opacity: 0.35; color: var(--text-muted); } table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > td.sorting:after { content: "\21C5" !important; /* ⇅ */ opacity: 0.35; } table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > td.sorting_asc:after { content: "\25B2" !important; /* ▲ */ opacity: 1; color: var(--accent); } table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > td.sorting_desc:after { content: "\25BC" !important; /* ▼ */ opacity: 1; color: var(--accent); } /* Alternância de linhas (zebra) em TODA .table — não só DataTables — via o mecanismo nativo do BS5 (--bs-table-accent-bg, que respeita o box-shadow das células). Exclui linhas com classe semântica (ex.: home .tr_fl*) para não cobrir as cores de legenda. */ .table > tbody > tr:nth-of-type(even):not([class*="tr_"]) > * { --bs-table-accent-bg: #fcf9f4; /* zebra bem sutil — não brigar com a linha branca */ } /* hover mantém o amber, via DOIS mecanismos distintos: (a) tabelas .table comuns (BS5) pintam o hover pela variável --bs-table-accent-bg; (b) o DataTables NÃO lê essa variável — aplica box-shadow inset DIRETO (cinza rgba(0,0,0,.075)) em `table.dataTable.table-hover`, seletor mais específico e carregado DEPOIS do theme.css. Só resolve sobrescrevendo o próprio box-shadow (com !important, como nos glyphs de ordenação acima). */ .table > tbody > tr:not([class*="tr_"]):hover > * { --bs-table-accent-bg: var(--accent-soft) !important; } table.dataTable.table-hover > tbody > tr:hover > * { box-shadow: inset 0 0 0 9999px var(--accent-soft) !important; } .table-bordered, .table-bordered > :not(caption) > * > * { border-color: #ede2cd; } .dataTables_wrapper .dataTables_filter input { border: 1px solid var(--hairline-strong); border-radius: 999px; padding: 0.3rem 0.7rem 0.3rem 2rem; font-size: 0.8125rem; background: #f3ecdf url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239f9489' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5l3.5 3.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0.6rem center; background-size: 0.85rem; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .dataTables_wrapper .dataTables_filter input:focus { outline: none; background-color: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length { color: var(--text-muted); font-size: 0.8125rem; } /* Paginação (harmoniza com custom.css) */ .page-link { color: var(--text-muted); border-radius: var(--radius-xs); border-color: var(--hairline); } .page-link:hover { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--hairline-strong); } .page-item.active .page-link { background-color: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; } /* Botões de export das DataTables */ .dt-buttons .buttons-html5 { border-radius: var(--radius-xs) !important; } /* -------------------------------------------------------------------------- Formulários — hairline, foco teal, cursor teal -------------------------------------------------------------------------- */ .form-control, .form-select { border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); color: var(--text); caret-color: var(--accent); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .form-control::placeholder { color: var(--text-faint); } .form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .form-switch .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } /* label flutuante dos icforms */ label .bg-white, .form-label { color: var(--text-muted); } .msg_info { color: var(--text-muted); } /* -------------------------------------------------------------------------- Botões — raio, foco visível, sentence case (sem CAIXA-ALTA/ripple) -------------------------------------------------------------------------- */ .btn { border-radius: var(--radius-sm); font-weight: 500; } .btn:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); } .btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-hover); --bs-btn-hover-border-color: var(--accent-hover); --bs-btn-active-bg: var(--accent-hover); --bs-btn-active-border-color: var(--accent-hover); } .btn-outline-primary { --bs-btn-color: var(--accent-ink); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); --bs-btn-active-bg: var(--accent-hover); } /* harmoniza com o hover que custom.css já define */ .btn-outline-primary:hover { color: #fff !important; background-color: var(--accent) !important; } /* -------------------------------------------------------------------------- Abas (ex.: ramais) — vira SEGMENTED CONTROL / chips clicáveis: trilho cinza + segmento ativo = chip branco com sombra tênue e texto teal. -------------------------------------------------------------------------- */ .nav-tabs-bordered { border-bottom: 0; gap: 4px; padding: 4px; background: #f3ecdf; border-radius: var(--radius); } .nav-tabs-bordered .nav-link { margin-bottom: 0; border: 0; border-radius: var(--radius-xs); color: var(--text-muted); font-weight: 500; padding: 0.4rem 0.9rem; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .nav-tabs-bordered .nav-link:hover, .nav-tabs-bordered .nav-link:focus { color: var(--accent-ink); background: rgba(255, 255, 255, 0.55); border: 0; } .nav-tabs-bordered .nav-link.active { background: #fff; color: var(--accent-ink); font-weight: 600; border: 0; box-shadow: var(--shadow-sm); } /* -------------------------------------------------------------------------- Chips / badges — estilo chip moderno: fundo suave + texto colorido. Só os `.bg-*` padrão do Bootstrap; badges custom das views (badge-afast, badge-fer, …) ficam intactos (mantêm suas cores de legenda). -------------------------------------------------------------------------- */ .badge { font-weight: 500; border-radius: 999px; padding: 0.34em 0.7em; letter-spacing: 0; } .badge.bg-primary { background: var(--accent-soft) !important; color: var(--accent-ink) !important; } .badge.bg-secondary { background: #ede2cd !important; color: var(--text-muted) !important; } .badge.bg-success { background: #e6f4ec !important; color: #1a7f47 !important; } .badge.bg-danger { background: #fbe9e9 !important; color: #c02b2b !important; } .badge.bg-warning { background: #fdf3e0 !important; color: #9a6a00 !important; } .badge.bg-info { background: #e6f1f8 !important; color: #1466a0 !important; } .badge.bg-dark { background: #ede2cd !important; color: var(--text) !important; } /* -------------------------------------------------------------------------- Modais — hairline, cantos, sombra tímida -------------------------------------------------------------------------- */ .modal-content { border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--shadow); } .modal-header, .modal-footer { border-color: var(--hairline); } /* -------------------------------------------------------------------------- Accordion (home / comunicados) -------------------------------------------------------------------------- */ .accordion-button:not(.collapsed) { color: var(--accent-ink); background-color: var(--accent-soft); box-shadow: none; } .accordion-button:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* -------------------------------------------------------------------------- Back-to-top — accent (era preto) -------------------------------------------------------------------------- */ .back-to-top { background: var(--accent); border-radius: var(--radius-sm); } .back-to-top:hover { background: var(--accent-hover); } /* -------------------------------------------------------------------------- Piso de qualidade -------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* -------------------------------------------------------------------------- Ganchos de theming futuro (inertes até o servidor injetar a classe) Ex.: troca só o accent, mantendo o resto. -------------------------------------------------------------------------- */ body.accent-slate { --accent: #3b4a6b; --accent-hover: #2f3c58; --accent-ink: #33436a; --accent-soft: rgba(59, 74, 107, 0.10); --accent-softer: rgba(59, 74, 107, 0.05); } body.accent-violet { --accent: #6c5ce0; --accent-hover: #5a4bc4; --accent-ink: #5a4bc4; --accent-soft: rgba(108, 92, 224, 0.10); --accent-softer: rgba(108, 92, 224, 0.05); } /* Esqueleto de dark mode — futuro (ativar via :root[data-theme="dark"]) */ /* -------------------------------------------------------------------------- Resíduos de azul do template de terceiros (style.css) sem equivalente prévio aqui no theme.css — seletores mais específicos que os já cobertos acima, então ainda vazavam o azul original mesmo com --accent trocado. -------------------------------------------------------------------------- */ .dropdown-menu .dropdown-divider { color: var(--hairline-strong); } .accordion-flush .accordion-button:not(.collapsed) { color: var(--accent-ink); } .dashboard .filter .icon:hover, .dashboard .filter .icon:focus { color: var(--accent); } .dashboard .sales-card .card-icon { color: var(--accent); background: var(--accent-softer); } .dashboard .news h4 a:hover { color: var(--accent); } .faq .basic h6 { color: var(--accent); } .contact .info-box i { color: var(--accent); } .contact .php-email-form input:focus, .contact .php-email-form textarea:focus { border-color: var(--accent); } .contact .php-email-form button[type=submit] { background: var(--accent); } .contact .php-email-form button[type=submit]:hover { background: var(--accent-hover); } .error-404 h1 { color: var(--accent); }