/* =========================================================================== OMEGA LIGHT — DESIGN SYSTEM Núcleo: tokens, tipografia, shell de layout e componentes. Ordem de carregamento esperada: 1. omega-ds.css (este arquivo — tokens + shell + componentes) 2. style.css (grid, utilitários e compatibilidade legada) 3. toasts.css Regras da marca aplicadas aqui: · Fundos claros, azul petróleo para hierarquia e destaque · Sem gradientes chamativos, sem roxo, sem laranja, sem neon · Sombras suaves azuladas — nunca pretas pesadas · Grid base 4px · Container 1240px · Botões pill · Cards radius 16px =========================================================================== */ /* --------------------------------------------------------------------------- 1. TIPOGRAFIA Futura PT é a fonte oficial (Adobe Fonts, requer licença/kit). Para ativá-la, inclua o kit no do base.html: Enquanto o kit não estiver ativo, Jost (Google Fonts) assume — é a fallback geométrica homologada, com o mesmo desenho de base. --------------------------------------------------------------------------- */ :root { --ol-font: "Futura PT", "Jost", "Segoe UI", system-ui, -apple-system, sans-serif; --ol-font-mono: "IBM Plex Mono", "Consolas", "Courier New", monospace; /* Escala tipográfica */ --ol-fs-display: 1.75rem; --ol-fs-h1: 1.375rem; --ol-fs-h2: 1.125rem; --ol-fs-h3: 1rem; --ol-fs-body: 0.9375rem; --ol-fs-sm: 0.8125rem; --ol-fs-xs: 0.75rem; --ol-fs-overline: 0.6875rem; --ol-lh-tight: 1.2; --ol-lh-body: 1.55; --ol-track-display: 0.045em; --ol-track-overline: 0.16em; --ol-track-label: 0.08em; /* ----------------------------------------------------------------------- 2. COR — paleta oficial ----------------------------------------------------------------------- */ --ol-petrol-01: #0F363F; /* Azul Petróleo Principal */ --ol-petrol-02: #144E5B; /* Azul Petróleo 02 */ --ol-petrol-03: #186077; /* Azul Petróleo 03 */ --ol-petrol-04: #1D7192; /* Azul Petróleo 04 */ /* Tints derivadas — superfícies e estados */ --ol-petrol-05: #2A88A8; --ol-petrol-wash: #F0F5F7; --ol-petrol-wash-2: #E4EEF2; --ol-petrol-line: #C9DCE4; --ol-petrol-a06: rgba(29, 113, 146, 0.06); --ol-petrol-a10: rgba(29, 113, 146, 0.10); --ol-petrol-a16: rgba(29, 113, 146, 0.16); --ol-petrol-a24: rgba(29, 113, 146, 0.24); /* Neutros */ --ol-bg: #F5F5F5; /* Fundo principal */ --ol-surface: #FFFFFF; --ol-surface-muted: #FAFAFA; --ol-surface-sunken: #F0F1F2; --ol-border: #DCDEDF; /* Bordas */ --ol-border-strong: #C3C8CA; --ol-border-soft: #E8EAEB; --ol-text: #0C2127; /* Texto principal */ --ol-text-2: #3B4F57; /* Texto secundário */ --ol-text-3: #69797F; /* Texto de apoio / muted */ --ol-text-on-petrol: #FFFFFF; --ol-text-on-petrol-2: rgba(255, 255, 255, 0.82); --ol-text-on-petrol-3: rgba(255, 255, 255, 0.64); /* Semânticos — contidos, sem neon, sem laranja, sem amarelo vibrante */ --ol-success: #1F7A4D; --ol-success-bg: #E9F4EE; --ol-success-border: #BCDDCB; --ol-warning: #8A6320; /* Ocre profundo, não laranja */ --ol-warning-bg: #F7F1E4; --ol-warning-border: #E2D3B4; --ol-danger: #A72820; --ol-danger-bg: #F9ECEB; --ol-danger-border: #E9C5C2; --ol-info: var(--ol-petrol-03); --ol-info-bg: #E8F1F5; --ol-info-border: #C4DBE4; --ol-neutral: #69797F; --ol-neutral-bg: #F1F2F3; --ol-neutral-border: #DCDEDF; /* ----------------------------------------------------------------------- 2.1 COR DE DADOS (gráficos) Passos próprios — marcas de gráfico precisam de separação mútua, enquanto texto e badges precisam de contraste. Não reaproveite um pelo outro. Séries únicas (barras nominais, linhas de uma série) usam SEMPRE --ol-chart-1. Nunca colora barras nominais pelo valor: isso gasta o canal de identidade repetindo o que o comprimento da barra já mostra. O conjunto de status abaixo foi validado em superfície branca: banda de luminosidade, piso de croma, separação sob protanopia e deuteranopia (pior par ΔE 11,3) e piso de visão normal (ΔE 15,2). O ocre fica em 2,62:1 de contraste — por isso todo gráfico que o use precisa de rótulos visíveis ou legenda (nunca cor sozinha). ----------------------------------------------------------------------- */ --ol-chart-1: #186077; /* série única / slot 1 */ --ol-chart-grid: #E8EAEB; --ol-chart-axis: #69797F; --ol-chart-ok: #237F52; --ol-chart-alerta: #C29B22; --ol-chart-critico: #D14A32; --ol-chart-atrasado: #94241A; --ol-chart-neutro: #8A9599; /* "sem data" — acromático de propósito */ /* ----------------------------------------------------------------------- 3. FORMA ----------------------------------------------------------------------- */ --ol-radius-card: 16px; --ol-radius-input: 8px; --ol-radius-sm: 6px; --ol-radius-pill: 999px; /* Sombras suaves azuladas — nunca pretas pesadas, nunca neumorphism */ --ol-shadow-xs: 0 1px 2px rgba(15, 54, 63, 0.05); --ol-shadow-sm: 0 1px 2px rgba(15, 54, 63, 0.04), 0 2px 8px rgba(15, 54, 63, 0.05); --ol-shadow-md: 0 2px 4px rgba(15, 54, 63, 0.04), 0 8px 24px rgba(15, 54, 63, 0.07); --ol-shadow-lg: 0 4px 8px rgba(15, 54, 63, 0.05), 0 16px 40px rgba(15, 54, 63, 0.10); --ol-shadow-focus: 0 0 0 3px rgba(29, 113, 146, 0.18); /* ----------------------------------------------------------------------- 4. ESPAÇO — grid base 4px ----------------------------------------------------------------------- */ --ol-1: 4px; --ol-2: 8px; --ol-3: 12px; --ol-4: 16px; --ol-5: 20px; --ol-6: 24px; --ol-8: 32px; --ol-10: 40px; --ol-12: 48px; --ol-16: 64px; --ol-container: 1240px; --ol-header-h: 64px; --ol-sidebar-w: 248px; --ol-sidebar-w-collapsed: 64px; /* ----------------------------------------------------------------------- 5. MOTION — 120ms a 320ms, apenas fade / slide / lift ----------------------------------------------------------------------- */ --ol-dur-fast: 120ms; --ol-dur: 200ms; --ol-dur-slow: 320ms; --ol-ease: cubic-bezier(0.2, 0.6, 0.3, 1); /* ----------------------------------------------------------------------- 6. TEXTURA — linhas do globo Omega, uso extremamente sutil, exclusivo de áreas em azul petróleo. ----------------------------------------------------------------------- */ --ol-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Ccircle cx='140' cy='140' r='122'/%3E%3Cellipse cx='140' cy='140' rx='46' ry='122'/%3E%3Cellipse cx='140' cy='140' rx='86' ry='122'/%3E%3Cellipse cx='140' cy='140' rx='122' ry='46'/%3E%3Cellipse cx='140' cy='140' rx='122' ry='86'/%3E%3Cline x1='18' y1='140' x2='262' y2='140'/%3E%3Cline x1='140' y1='18' x2='140' y2='262'/%3E%3C/g%3E%3C/svg%3E"); } /* --------------------------------------------------------------------------- 7. COMPATIBILIDADE Nomes de variáveis do tema anterior remapeados para a paleta Omega Light. Mantém telas ainda não migradas coerentes com o novo sistema. --------------------------------------------------------------------------- */ :root { --bg-body: var(--ol-bg); --bg-main: var(--ol-bg); --bg-sidebar: var(--ol-surface); --bg-card: var(--ol-surface); --bg-card-soft: var(--ol-surface-muted); --border-strong: var(--ol-border-strong); --border-soft: var(--ol-border); --accent: var(--ol-petrol-04); --accent-2: var(--ol-petrol-03); --accent-3: var(--ol-petrol-02); --text-primary: var(--ol-text); --text-muted: var(--ol-text-2); --text-soft: var(--ol-text-3); --danger: var(--ol-danger); --warning: var(--ol-warning); --success: var(--ol-success); --radius-xl: var(--ol-radius-card); --radius-lg: var(--ol-radius-card); --radius-pill: var(--ol-radius-pill); --shadow-heavy: var(--ol-shadow-md); --shadow-soft: var(--ol-shadow-sm); --shadow-accent: var(--ol-shadow-md); } /* =========================================================================== 8. RESET E BASE =========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } html, body { margin: 0; padding: 0; min-height: 100%; } body { font-family: var(--ol-font); font-size: var(--ol-fs-body); line-height: var(--ol-lh-body); color: var(--ol-text); background: var(--ol-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--ol-petrol-03); text-decoration: none; transition: color var(--ol-dur-fast) var(--ol-ease); } a:hover { color: var(--ol-petrol-01); text-decoration: underline; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; line-height: var(--ol-lh-tight); color: var(--ol-text); } /* Em superfícies azul petróleo os títulos herdam o branco do contêiner */ .ol-header h1, .ol-header h2, .ol-header h3, .ol-auth-aside h1, .ol-auth-aside h2, .ol-auth-aside h3, .ol-card-petrol h1, .ol-card-petrol h2, .ol-card-petrol h3, .ol-card-petrol h4, .ol-card-petrol h5, .ol-card-petrol h6, .card-dark h1, .card-dark h2, .card-dark h3, .card-dark h4, .card-dark h5, .card-dark h6 { color: inherit; } p { margin: 0 0 var(--ol-3); } hr { border: 0; border-top: 1px solid var(--ol-border); margin: var(--ol-5) 0; } code, pre, kbd, samp { font-family: var(--ol-font-mono); font-size: 0.875em; } ::selection { background: var(--ol-petrol-a24); color: var(--ol-text); } /* Barra de rolagem discreta */ * { scrollbar-width: thin; scrollbar-color: var(--ol-border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--ol-border-strong); border-radius: var(--ol-radius-pill); border: 3px solid var(--ol-bg); } *::-webkit-scrollbar-thumb:hover { background: var(--ol-text-3); } /* Foco visível e consistente em toda a aplicação */ :focus-visible { outline: 2px solid var(--ol-petrol-04); outline-offset: 2px; border-radius: var(--ol-radius-sm); } /* Ícones Lucide — outline, sem preenchimento */ svg.lucide, .ol-icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; flex-shrink: 0; } .ol-icon-sm { width: 16px; height: 16px; } .ol-icon-lg { width: 24px; height: 24px; } /* =========================================================================== 9. TIPOGRAFIA — classes de hierarquia =========================================================================== */ .ol-display { font-size: var(--ol-fs-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ol-track-display); line-height: var(--ol-lh-tight); } .ol-h1 { font-size: var(--ol-fs-h1); font-weight: 500; } .ol-h2 { font-size: var(--ol-fs-h2); font-weight: 500; } .ol-h3 { font-size: var(--ol-fs-h3); font-weight: 500; } /* Overline — assinatura visual LIGHT do logotipo */ .ol-overline { display: block; font-size: var(--ol-fs-overline); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ol-track-overline); color: var(--ol-text-3); line-height: 1.4; } .ol-overline-on-petrol { color: var(--ol-text-on-petrol-3); } .ol-lead { font-size: var(--ol-fs-body); color: var(--ol-text-2); } .ol-muted { color: var(--ol-text-3); } /* =========================================================================== 10. SHELL DE LAYOUT Header fixo azul petróleo · Sidebar opcional · Conteúdo · Footer discreto =========================================================================== */ .ol-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--ol-bg); } /* ── 10.1 HEADER FIXO ── */ .ol-header { position: fixed; top: 0; left: 0; right: 0; height: var(--ol-header-h); z-index: 100; background: var(--ol-petrol-01); color: var(--ol-text-on-petrol); display: flex; align-items: center; box-shadow: 0 1px 0 rgba(12, 33, 39, 0.08), 0 2px 12px rgba(15, 54, 63, 0.10); } /* Textura das linhas do globo — extremamente sutil */ .ol-header::before { content: ""; position: absolute; inset: 0; background-image: var(--ol-globe); background-repeat: no-repeat; background-position: right -96px center; background-size: 280px 280px; opacity: 0.07; pointer-events: none; } .ol-header-inner { position: relative; z-index: 1; width: 100%; height: 100%; padding: 0 var(--ol-6); display: flex; align-items: center; gap: var(--ol-4); } .ol-brand { display: flex; align-items: center; gap: var(--ol-3); text-decoration: none; color: inherit; flex-shrink: 0; } .ol-brand:hover { text-decoration: none; color: inherit; } .ol-brand-logo { height: 26px; width: auto; display: block; } .ol-brand-divider { width: 1px; height: 24px; background: rgba(255, 255, 255, 0.18); flex-shrink: 0; } .ol-brand-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; } .ol-brand-name { font-size: var(--ol-fs-sm); font-weight: 500; letter-spacing: 0.02em; color: var(--ol-text-on-petrol); white-space: nowrap; } .ol-brand-sub { font-size: var(--ol-fs-overline); text-transform: uppercase; letter-spacing: var(--ol-track-overline); color: var(--ol-text-on-petrol-3); white-space: nowrap; } .ol-header-spacer { flex: 1; } .ol-header-actions { display: flex; align-items: center; gap: var(--ol-2); flex-shrink: 0; } /* Botão de ícone sobre o header petróleo */ .ol-header-icon-btn { width: 36px; height: 36px; border-radius: var(--ol-radius-pill); border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; color: var(--ol-text-on-petrol-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background var(--ol-dur-fast) var(--ol-ease), color var(--ol-dur-fast) var(--ol-ease), border-color var(--ol-dur-fast) var(--ol-ease); } .ol-header-icon-btn:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.32); color: var(--ol-text-on-petrol); } /* Chip de ambiente / contexto no header */ .ol-chip { display: inline-flex; align-items: center; gap: var(--ol-1); height: 26px; padding: 0 var(--ol-3); border-radius: var(--ol-radius-pill); font-size: var(--ol-fs-overline); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ol-track-label); white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.22); color: var(--ol-text-on-petrol-2); background: rgba(255, 255, 255, 0.06); } .ol-chip-prod { border-color: rgba(255, 255, 255, 0.28); color: var(--ol-text-on-petrol); background: rgba(255, 255, 255, 0.12); } .ol-chip-homolog { border-color: rgba(226, 211, 180, 0.55); color: #F0E3C8; background: rgba(226, 211, 180, 0.14); } /* Aliases dos nomes emitidos pelo context processor do app.py */ .mode-prod { border-color: rgba(255, 255, 255, 0.28); color: var(--ol-text-on-petrol); background: rgba(255, 255, 255, 0.12); } .mode-homolog { border-color: rgba(226, 211, 180, 0.55); color: #F0E3C8; background: rgba(226, 211, 180, 0.14); } /* Pílula de usuário */ .ol-user { display: flex; align-items: center; gap: var(--ol-2); height: 36px; padding: 0 var(--ol-3) 0 var(--ol-1); border-radius: var(--ol-radius-pill); border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); max-width: 260px; } .ol-user-avatar { width: 28px; height: 28px; border-radius: var(--ol-radius-pill); background: var(--ol-petrol-04); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: var(--ol-fs-xs); font-weight: 500; letter-spacing: 0.02em; flex-shrink: 0; } .ol-user-info { display: flex; flex-direction: column; gap: 0; line-height: 1.25; min-width: 0; } .ol-user-name { font-size: var(--ol-fs-xs); color: var(--ol-text-on-petrol); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ol-user-role { font-size: 0.625rem; text-transform: uppercase; letter-spacing: var(--ol-track-label); color: var(--ol-text-on-petrol-3); white-space: nowrap; } /* ── 10.2 CORPO: SIDEBAR + CONTEÚDO ── */ .ol-body { display: flex; flex: 1; padding-top: var(--ol-header-h); min-height: 100vh; } .ol-sidebar { width: var(--ol-sidebar-w); min-width: var(--ol-sidebar-w); background: var(--ol-surface); border-right: 1px solid var(--ol-border); padding: var(--ol-5) var(--ol-3); display: flex; flex-direction: column; gap: var(--ol-1); position: sticky; top: var(--ol-header-h); align-self: flex-start; height: calc(100vh - var(--ol-header-h)); overflow-y: auto; overflow-x: hidden; transition: width var(--ol-dur) var(--ol-ease), min-width var(--ol-dur) var(--ol-ease), padding var(--ol-dur) var(--ol-ease); } .ol-sidebar.collapsed { width: var(--ol-sidebar-w-collapsed); min-width: var(--ol-sidebar-w-collapsed); padding-left: var(--ol-2); padding-right: var(--ol-2); } .ol-nav-section { margin: var(--ol-5) 0 var(--ol-1); padding: 0 var(--ol-3); font-size: var(--ol-fs-overline); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ol-track-overline); color: var(--ol-text-3); white-space: nowrap; transition: opacity var(--ol-dur-fast) var(--ol-ease); } .ol-nav-section:first-child { margin-top: 0; } .ol-sidebar.collapsed .ol-nav-section { opacity: 0; height: 0; margin: var(--ol-2) 0; overflow: hidden; } .ol-nav-link { display: flex; align-items: center; gap: var(--ol-3); padding: var(--ol-2) var(--ol-3); border-radius: var(--ol-radius-input); font-size: var(--ol-fs-sm); color: var(--ol-text-2); text-decoration: none; white-space: nowrap; position: relative; border: 1px solid transparent; transition: background var(--ol-dur-fast) var(--ol-ease), color var(--ol-dur-fast) var(--ol-ease); } .ol-nav-link:hover { background: var(--ol-petrol-wash); color: var(--ol-petrol-01); text-decoration: none; } .ol-nav-link.active { background: var(--ol-petrol-01); color: var(--ol-text-on-petrol); font-weight: 500; } .ol-nav-link.active:hover { background: var(--ol-petrol-02); color: var(--ol-text-on-petrol); } .ol-nav-link .ol-icon { width: 18px; height: 18px; } .ol-nav-label { overflow: hidden; transition: opacity var(--ol-dur-fast) var(--ol-ease); } .ol-sidebar.collapsed .ol-nav-link { justify-content: center; padding: var(--ol-2); } .ol-sidebar.collapsed .ol-nav-label { opacity: 0; width: 0; } /* Tooltip quando recolhida */ .ol-sidebar.collapsed .ol-nav-link:hover::after { content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--ol-petrol-01); color: var(--ol-text-on-petrol); font-size: var(--ol-fs-xs); padding: var(--ol-1) var(--ol-2); border-radius: var(--ol-radius-sm); white-space: nowrap; z-index: 200; box-shadow: var(--ol-shadow-md); pointer-events: none; } .ol-nav-footer { margin-top: auto; padding-top: var(--ol-3); border-top: 1px solid var(--ol-border); display: flex; flex-direction: column; gap: var(--ol-1); } /* ── 10.3 ÁREA PRINCIPAL ── */ .ol-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ol-container { width: 100%; max-width: var(--ol-container); margin: 0 auto; padding: var(--ol-6); } .ol-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ol-4); margin-bottom: var(--ol-6); flex-wrap: wrap; } .ol-page-title { font-size: var(--ol-fs-h1); font-weight: 500; color: var(--ol-text); margin: 0; } .ol-page-sub { font-size: var(--ol-fs-sm); color: var(--ol-text-3); margin-top: var(--ol-1); } .ol-page-actions { display: flex; align-items: center; gap: var(--ol-2); flex-wrap: wrap; } /* ── 10.4 FOOTER DISCRETO ── */ .ol-footer { border-top: 1px solid var(--ol-border); background: var(--ol-surface); margin-top: auto; } .ol-footer-inner { max-width: var(--ol-container); margin: 0 auto; padding: var(--ol-5) var(--ol-6); display: flex; align-items: center; justify-content: space-between; gap: var(--ol-4); flex-wrap: wrap; font-size: var(--ol-fs-xs); color: var(--ol-text-3); } .ol-footer a { color: var(--ol-text-3); } .ol-footer a:hover { color: var(--ol-petrol-03); } /* =========================================================================== 11. CARDS =========================================================================== */ .card, .ol-card { background: var(--ol-surface); border: 1px solid var(--ol-border); border-radius: var(--ol-radius-card); box-shadow: var(--ol-shadow-sm); margin-bottom: var(--ol-4); overflow: hidden; transition: box-shadow var(--ol-dur) var(--ol-ease), border-color var(--ol-dur) var(--ol-ease); } .ol-card-hover:hover { box-shadow: var(--ol-shadow-md); border-color: var(--ol-petrol-line); } .card-header, .ol-card-header { padding: var(--ol-4) var(--ol-5); border-bottom: 1px solid var(--ol-border); background: var(--ol-surface); font-size: var(--ol-fs-h3); font-weight: 500; color: var(--ol-text); display: flex; align-items: center; justify-content: space-between; gap: var(--ol-3); } .card-body, .ol-card-body { padding: var(--ol-5); font-size: var(--ol-fs-sm); color: var(--ol-text-2); } .card-footer, .ol-card-footer { padding: var(--ol-3) var(--ol-5); border-top: 1px solid var(--ol-border); background: var(--ol-surface-muted); font-size: var(--ol-fs-sm); color: var(--ol-text-3); } .card-title, .ol-card-title { font-size: var(--ol-fs-h3); font-weight: 500; color: var(--ol-text); margin: 0 0 var(--ol-1); } .card-subtitle, .ol-card-subtitle { font-size: var(--ol-fs-sm); color: var(--ol-text-3); } /* Card em azul petróleo — para blocos de destaque */ .card-dark, .ol-card-petrol { background: var(--ol-petrol-01); border-color: var(--ol-petrol-01); color: var(--ol-text-on-petrol); position: relative; } .ol-card-petrol::before { content: ""; position: absolute; inset: 0; background-image: var(--ol-globe); background-repeat: no-repeat; background-position: right -80px top -80px; background-size: 280px 280px; opacity: 0.06; pointer-events: none; } .card-dark .card-header, .card-dark .ol-card-header, .ol-card-petrol .card-header, .ol-card-petrol .ol-card-header { background: transparent; border-bottom-color: rgba(255, 255, 255, 0.14); color: var(--ol-text-on-petrol); position: relative; z-index: 1; } .card-dark .card-body, .card-dark .ol-card-body, .ol-card-petrol .card-body, .ol-card-petrol .ol-card-body { color: var(--ol-text-on-petrol-2); position: relative; z-index: 1; } .card-dark .card-footer, .ol-card-petrol .card-footer { background: transparent; border-top-color: rgba(255, 255, 255, 0.14); color: var(--ol-text-on-petrol-3); position: relative; z-index: 1; } .card-dark a, .ol-card-petrol a { color: #FFFFFF; text-decoration: underline; } /* a textura do globo também vale para o card legado .card-dark */ .card-dark { position: relative; } .card-dark::before { content: ""; position: absolute; inset: 0; background-image: var(--ol-globe); background-repeat: no-repeat; background-position: right -80px top -80px; background-size: 280px 280px; opacity: 0.06; pointer-events: none; } /* Título de seção */ .section-title, .ol-section-title { display: inline-flex; align-items: center; gap: var(--ol-2); font-weight: 500; font-size: var(--ol-fs-h3); color: var(--ol-text); } .section-dot { width: 28px; height: 28px; border-radius: var(--ol-radius-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--ol-petrol-wash); color: var(--ol-petrol-03); border: 1px solid var(--ol-petrol-line); flex-shrink: 0; } /* =========================================================================== 12. BOTÕES — formato pill, labels em caixa alta =========================================================================== */ .btn, .ol-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ol-2); height: 40px; padding: 0 var(--ol-5); border-radius: var(--ol-radius-pill); border: 1.5px solid transparent; font-family: var(--ol-font); font-size: var(--ol-fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ol-track-label); line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap; background: transparent; color: var(--ol-text); transition: background var(--ol-dur-fast) var(--ol-ease), color var(--ol-dur-fast) var(--ol-ease), border-color var(--ol-dur-fast) var(--ol-ease), box-shadow var(--ol-dur-fast) var(--ol-ease), transform var(--ol-dur-fast) var(--ol-ease); } .btn:hover, .ol-btn:hover { text-decoration: none; } .btn:disabled, .ol-btn:disabled, .btn.disabled, .ol-btn.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } .btn .ol-icon, .ol-btn .ol-icon { width: 16px; height: 16px; } /* Primário */ .btn-primary, .ol-btn-primary { background: var(--ol-petrol-01); border-color: var(--ol-petrol-01); color: #FFFFFF; box-shadow: var(--ol-shadow-xs); } .btn-primary:hover, .ol-btn-primary:hover { background: var(--ol-petrol-02); border-color: var(--ol-petrol-02); color: #FFFFFF; box-shadow: var(--ol-shadow-sm); transform: translateY(-1px); } .btn-primary:active, .ol-btn-primary:active { transform: translateY(0); background: var(--ol-petrol-01); } /* Secundário — outline azul petróleo */ .btn-secondary, .btn-outline-primary, .btn-outline-light, .btn-outline-secondary, .ol-btn-secondary { background: transparent; border-color: var(--ol-petrol-01); color: var(--ol-petrol-01); } .btn-secondary:hover, .btn-outline-primary:hover, .btn-outline-light:hover, .btn-outline-secondary:hover, .ol-btn-secondary:hover { background: var(--ol-petrol-wash); border-color: var(--ol-petrol-01); color: var(--ol-petrol-01); transform: translateY(-1px); } /* Ghost — somente texto */ .btn-ghost, .ol-btn-ghost { background: transparent; border-color: transparent; color: var(--ol-text-2); } .btn-ghost:hover, .ol-btn-ghost:hover { background: var(--ol-surface-sunken); color: var(--ol-petrol-01); } /* Destrutivo */ .btn-danger, .btn-outline-danger, .ol-btn-danger { background: transparent; border-color: var(--ol-danger); color: var(--ol-danger); } .btn-danger:hover, .btn-outline-danger:hover, .ol-btn-danger:hover { background: var(--ol-danger-bg); color: var(--ol-danger); transform: translateY(-1px); } /* Atenção — ocre, nunca laranja */ .btn-warning, .btn-outline-warning { background: transparent; border-color: var(--ol-warning); color: var(--ol-warning); } .btn-warning:hover, .btn-outline-warning:hover { background: var(--ol-warning-bg); color: var(--ol-warning); transform: translateY(-1px); } /* Tamanhos */ .btn-sm, .ol-btn-sm { height: 32px; padding: 0 var(--ol-4); font-size: 0.6875rem; } .btn-lg, .ol-btn-lg { height: 48px; padding: 0 var(--ol-6); font-size: var(--ol-fs-sm); } .btn-block, .ol-btn-block { display: flex; width: 100%; } /* Botão apenas ícone */ .ol-btn-icon { width: 36px; height: 36px; padding: 0; border-radius: var(--ol-radius-pill); border-color: var(--ol-border); color: var(--ol-text-2); background: var(--ol-surface); } .ol-btn-icon:hover { border-color: var(--ol-petrol-04); color: var(--ol-petrol-01); background: var(--ol-petrol-wash); } /* =========================================================================== 13. FORMULÁRIOS =========================================================================== */ .form-label, .ol-label { display: block; margin-bottom: var(--ol-1); font-size: var(--ol-fs-xs); font-weight: 500; color: var(--ol-text-2); letter-spacing: 0.01em; } .ol-label-overline { text-transform: uppercase; letter-spacing: var(--ol-track-label); font-size: var(--ol-fs-overline); color: var(--ol-text-3); } /* Os seletores de elemento vão dentro de :where() para ficarem com especificidade zero — assim qualquer classe de tela sobrepõe o padrão sem precisar de !important. */ .form-control, .form-select, .ol-input, :where(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea) { width: 100%; min-height: 40px; padding: var(--ol-2) var(--ol-3); font-family: var(--ol-font); font-size: var(--ol-fs-sm); color: var(--ol-text); background: var(--ol-surface); border: 1.5px solid var(--ol-border); border-radius: var(--ol-radius-input); outline: none; transition: border-color var(--ol-dur-fast) var(--ol-ease), box-shadow var(--ol-dur-fast) var(--ol-ease); } :where(textarea) { min-height: 96px; line-height: var(--ol-lh-body); resize: vertical; } :where(select), .form-select { appearance: none; -webkit-appearance: none; padding-right: var(--ol-8); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2369797F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--ol-3) center; cursor: pointer; } .form-control:hover, .ol-input:hover, :where(input:hover:not([disabled]):not([readonly]), select:hover:not([disabled]), textarea:hover:not([disabled]):not([readonly])) { border-color: var(--ol-border-strong); } .form-control:focus, .form-select:focus, .ol-input:focus, :where(input:focus, select:focus, textarea:focus) { border-color: var(--ol-petrol-04); box-shadow: var(--ol-shadow-focus); outline: none; } .form-control::placeholder, .ol-input::placeholder, :where(input, textarea)::placeholder { color: var(--ol-text-3); opacity: 1; } .form-control[readonly], .form-control.readonly, :where(input[readonly], textarea[readonly]) { background: var(--ol-surface-sunken); color: var(--ol-text-2); border-color: var(--ol-border-soft); cursor: default; } .form-control[disabled], :where(input[disabled], select[disabled], textarea[disabled]) { background: var(--ol-surface-sunken); color: var(--ol-text-3); border-color: var(--ol-border-soft); cursor: not-allowed; } .form-control-sm, .ol-input-sm { min-height: 32px; padding: var(--ol-1) var(--ol-2); font-size: var(--ol-fs-xs); } .form-check, .ol-check { display: flex; align-items: center; gap: var(--ol-2); font-size: var(--ol-fs-sm); color: var(--ol-text-2); } .form-check-input, :where(input[type="checkbox"], input[type="radio"]) { width: 16px; height: 16px; min-height: 0; padding: 0; accent-color: var(--ol-petrol-01); cursor: pointer; flex-shrink: 0; } .form-check-label { cursor: pointer; } .ol-help { display: block; margin-top: var(--ol-1); font-size: var(--ol-fs-xs); color: var(--ol-text-3); } .ol-error { display: block; margin-top: var(--ol-1); font-size: var(--ol-fs-xs); color: var(--ol-danger); } .ol-input-error, .form-control.is-invalid { border-color: var(--ol-danger); } .ol-input-error:focus, .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(167, 40, 32, 0.14); } /* Painel de filtros */ .filter-panel, .ol-filters { background: var(--ol-surface); border: 1px solid var(--ol-border); border-radius: var(--ol-radius-card); box-shadow: var(--ol-shadow-sm); padding: var(--ol-5); margin-bottom: var(--ol-4); } .filter-label, .ol-filter-label { display: block; margin-bottom: var(--ol-1); font-size: var(--ol-fs-overline); text-transform: uppercase; letter-spacing: var(--ol-track-label); color: var(--ol-text-3); } /* =========================================================================== 14. TABELAS =========================================================================== */ .table-responsive { width: 100%; overflow-x: auto; border-radius: var(--ol-radius-card); } table, .ol-table { width: 100%; border-collapse: collapse; font-size: var(--ol-fs-sm); background: var(--ol-surface); } thead tr { background: var(--ol-surface-muted); } th { padding: var(--ol-3) var(--ol-4); text-align: left; font-size: var(--ol-fs-overline); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ol-track-label); color: var(--ol-text-3); border-bottom: 1px solid var(--ol-border); white-space: nowrap; } td { padding: var(--ol-3) var(--ol-4); color: var(--ol-text-2); border-bottom: 1px solid var(--ol-border-soft); vertical-align: middle; } tbody tr { background: var(--ol-surface); transition: background var(--ol-dur-fast) var(--ol-ease); } tbody tr:nth-child(odd) { background: var(--ol-surface); } tbody tr:nth-child(even) { background: var(--ol-surface); } tbody tr:last-child td { border-bottom: 0; } .table-hover tbody tr:hover, tbody tr:hover { background: var(--ol-petrol-wash); } .table-hover tbody tr:hover td { background: transparent !important; } .table-dark { color: var(--ol-text-2); } /* Faixa de risco na borda esquerda da linha */ .row-risk-atrasado td:first-child { box-shadow: inset 3px 0 0 var(--ol-danger); } .row-risk-critico td:first-child { box-shadow: inset 3px 0 0 #C25A2E; } .row-risk-alerta td:first-child { box-shadow: inset 3px 0 0 var(--ol-warning); } .row-risk-ok td:first-child { box-shadow: inset 3px 0 0 var(--ol-success); } .row-risk-sem_data td:first-child { box-shadow: inset 3px 0 0 var(--ol-border-strong); } /* Estado vazio */ .ol-empty { padding: var(--ol-12) var(--ol-6); text-align: center; color: var(--ol-text-3); } .ol-empty .ol-icon { width: 32px; height: 32px; color: var(--ol-border-strong); margin-bottom: var(--ol-3); } .ol-empty-title { font-size: var(--ol-fs-h3); font-weight: 500; color: var(--ol-text-2); margin-bottom: var(--ol-1); } /* =========================================================================== 15. BADGES, PÍLULAS E STATUS =========================================================================== */ .badge, .ol-badge { display: inline-flex; align-items: center; gap: var(--ol-1); padding: var(--ol-1) var(--ol-3); border-radius: var(--ol-radius-pill); font-size: var(--ol-fs-overline); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ol-track-label); line-height: 1.4; white-space: nowrap; border: 1px solid transparent; } .badge-risk-ok, .ol-badge-success { background: var(--ol-success-bg); color: var(--ol-success); border-color: var(--ol-success-border); } .badge-risk-alerta, .ol-badge-warning { background: var(--ol-warning-bg); color: var(--ol-warning); border-color: var(--ol-warning-border); } .badge-risk-critico { background: #F7EDE7; color: #A8471F; border-color: #E5CBBC; } .badge-risk-atrasado, .ol-badge-danger { background: var(--ol-danger-bg); color: var(--ol-danger); border-color: var(--ol-danger-border); } .badge-risk-sem_data, .ol-badge-neutral { background: var(--ol-neutral-bg); color: var(--ol-neutral); border-color: var(--ol-neutral-border); } .ol-badge-info { background: var(--ol-info-bg); color: var(--ol-info); border-color: var(--ol-info-border); } .pill-status { display: inline-flex; align-items: center; padding: var(--ol-1) var(--ol-3); border-radius: var(--ol-radius-pill); font-size: var(--ol-fs-overline); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ol-track-label); white-space: nowrap; border: 1px solid transparent; } .pill-open { background: var(--ol-success-bg); color: var(--ol-success); border-color: var(--ol-success-border); } .pill-closed { background: var(--ol-neutral-bg); color: var(--ol-neutral); border-color: var(--ol-neutral-border); } .pill-count { min-width: 32px; padding: var(--ol-1) var(--ol-2); border-radius: var(--ol-radius-pill); text-align: center; font-size: var(--ol-fs-xs); font-weight: 500; color: var(--ol-petrol-01); background: var(--ol-petrol-wash-2); border: 1px solid var(--ol-petrol-line); } .bg-success { background: var(--ol-success-bg) !important; color: var(--ol-success) !important; border: 1px solid var(--ol-success-border) !important; } /* =========================================================================== 16. AVISOS (FLASH / ALERT) =========================================================================== */ .flash-container { margin-bottom: var(--ol-4); display: flex; flex-direction: column; gap: var(--ol-2); } .flash, .ol-alert { display: flex; align-items: flex-start; gap: var(--ol-3); padding: var(--ol-3) var(--ol-4); border-radius: var(--ol-radius-input); border: 1px solid var(--ol-border); background: var(--ol-surface); font-size: var(--ol-fs-sm); color: var(--ol-text-2); animation: ol-fade-in var(--ol-dur) var(--ol-ease); } .flash .ol-icon, .ol-alert .ol-icon { width: 18px; height: 18px; margin-top: 1px; } .flash-success, .ol-alert-success { background: var(--ol-success-bg); border-color: var(--ol-success-border); color: var(--ol-success); } .flash-info, .ol-alert-info { background: var(--ol-info-bg); border-color: var(--ol-info-border); color: var(--ol-info); } .flash-warning, .ol-alert-warning { background: var(--ol-warning-bg); border-color: var(--ol-warning-border); color: var(--ol-warning); } .flash-danger, .flash-error, .ol-alert-danger { background: var(--ol-danger-bg); border-color: var(--ol-danger-border); color: var(--ol-danger); } /* =========================================================================== 17. KPI / MÉTRICAS Diferenciação por acento sutil — nunca por fundo saturado. =========================================================================== */ .ol-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--ol-4); margin-bottom: var(--ol-6); } .kpi-card, .ol-kpi { background: var(--ol-surface); border: 1px solid var(--ol-border); border-radius: var(--ol-radius-card); box-shadow: var(--ol-shadow-sm); padding: var(--ol-5); position: relative; overflow: hidden; transition: box-shadow var(--ol-dur) var(--ol-ease), border-color var(--ol-dur) var(--ol-ease), transform var(--ol-dur) var(--ol-ease); } .kpi-card:hover, .ol-kpi:hover { box-shadow: var(--ol-shadow-md); border-color: var(--ol-petrol-line); transform: translateY(-2px); } /* Acento lateral esquerdo — o único diferenciador cromático */ .kpi-card::before, .ol-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ol-petrol-04); } .kpi-label, .ol-kpi-label { font-size: var(--ol-fs-overline); text-transform: uppercase; letter-spacing: var(--ol-track-overline); color: var(--ol-text-3); margin-bottom: var(--ol-2); } .kpi-value, .ol-kpi-value { font-size: var(--ol-fs-display); font-weight: 700; line-height: 1; color: var(--ol-text); letter-spacing: -0.01em; } .kpi-hint, .ol-kpi-hint { margin-top: var(--ol-2); font-size: var(--ol-fs-xs); color: var(--ol-text-3); } .kpi-icon, .ol-kpi-icon { position: absolute; top: var(--ol-4); right: var(--ol-4); width: 32px; height: 32px; border-radius: var(--ol-radius-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--ol-petrol-wash); color: var(--ol-petrol-03); border: 1px solid var(--ol-petrol-line); } /* Variantes — a escala petróleo cobre o que era azul/ciano/índigo/teal/roxo. Roxo e laranja não existem no sistema; foram reconduzidos. */ .kpi-card-blue::before { background: var(--ol-petrol-04); } .kpi-card-cyan::before { background: var(--ol-petrol-03); } .kpi-card-indigo::before { background: var(--ol-petrol-02); } .kpi-card-teal::before { background: var(--ol-petrol-03); } .kpi-card-purple::before { background: var(--ol-petrol-02); } .kpi-card-green::before { background: var(--ol-success); } .kpi-card-red::before { background: var(--ol-danger); } .kpi-card-orange::before { background: var(--ol-warning); } .kpi-card-green .kpi-value { color: var(--ol-success); } .kpi-card-red .kpi-value { color: var(--ol-danger); } .kpi-card-orange .kpi-value { color: var(--ol-warning); } .kpi-card-green .kpi-icon { background: var(--ol-success-bg); color: var(--ol-success); border-color: var(--ol-success-border); } .kpi-card-red .kpi-icon { background: var(--ol-danger-bg); color: var(--ol-danger); border-color: var(--ol-danger-border); } .kpi-card-orange .kpi-icon { background: var(--ol-warning-bg); color: var(--ol-warning); border-color: var(--ol-warning-border); } /* =========================================================================== 18. LISTAS DE INSIGHT =========================================================================== */ .status-item, .supplier-item, .ol-list-item { display: flex; align-items: center; justify-content: space-between; gap: var(--ol-3); padding: var(--ol-3) var(--ol-4); border-radius: var(--ol-radius-input); border: 1px solid var(--ol-border); background: var(--ol-surface); text-decoration: none; color: inherit; transition: border-color var(--ol-dur-fast) var(--ol-ease), background var(--ol-dur-fast) var(--ol-ease), transform var(--ol-dur-fast) var(--ol-ease); } .status-item:hover, .supplier-item:hover, .ol-list-item:hover { border-color: var(--ol-petrol-line); background: var(--ol-petrol-wash); transform: translateX(2px); text-decoration: none; } .status-label, .supplier-label { color: var(--ol-text); font-size: var(--ol-fs-sm); } /* =========================================================================== 19. PAGINAÇÃO =========================================================================== */ .pagination { display: flex; list-style: none; gap: var(--ol-1); margin: 0; padding: 0; } .page-item .page-link { display: flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 var(--ol-3); border-radius: var(--ol-radius-input); border: 1px solid var(--ol-border); background: var(--ol-surface); color: var(--ol-text-2); font-size: var(--ol-fs-sm); text-decoration: none; line-height: 1; transition: border-color var(--ol-dur-fast) var(--ol-ease), background var(--ol-dur-fast) var(--ol-ease), color var(--ol-dur-fast) var(--ol-ease); } .page-item .page-link:hover { border-color: var(--ol-petrol-04); background: var(--ol-petrol-wash); color: var(--ol-petrol-01); text-decoration: none; } .page-item.active .page-link { background: var(--ol-petrol-01); border-color: var(--ol-petrol-01); color: #FFFFFF; } .page-item.disabled .page-link { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* =========================================================================== 20. SOBREPOSIÇÕES (LOADING / MODAL) =========================================================================== */ .ol-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(12, 33, 39, 0.45); display: flex; align-items: center; justify-content: center; animation: ol-fade-in var(--ol-dur-fast) var(--ol-ease); } .ol-overlay-panel { background: var(--ol-surface); border: 1px solid var(--ol-border); border-radius: var(--ol-radius-card); box-shadow: var(--ol-shadow-lg); padding: var(--ol-5) var(--ol-6); display: flex; align-items: center; gap: var(--ol-3); font-size: var(--ol-fs-sm); color: var(--ol-text-2); } .ol-spinner { width: 18px; height: 18px; border: 2px solid var(--ol-border); border-top-color: var(--ol-petrol-04); border-radius: 50%; animation: ol-spin 720ms linear infinite; flex-shrink: 0; } /* =========================================================================== 21. MOTION — fade, slide, lift. Sem bounce, sem spring. =========================================================================== */ @keyframes ol-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ol-slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes ol-spin { to { transform: rotate(360deg); } } .ol-animate-in { animation: ol-slide-up var(--ol-dur-slow) var(--ol-ease); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* =========================================================================== 22. TELAS DE AUTENTICAÇÃO =========================================================================== */ .ol-auth { min-height: 100vh; display: flex; background: var(--ol-bg); } /* Painel esquerdo em azul petróleo com a textura do globo */ .ol-auth-aside { flex: 0 0 44%; max-width: 560px; background: var(--ol-petrol-01); color: var(--ol-text-on-petrol); padding: var(--ol-12) var(--ol-10); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .ol-auth-aside::before { content: ""; position: absolute; right: -120px; bottom: -120px; width: 520px; height: 520px; background-image: var(--ol-globe); background-size: contain; background-repeat: no-repeat; opacity: 0.05; pointer-events: none; } .ol-auth-aside > * { position: relative; z-index: 1; } .ol-auth-headline { color: var(--ol-text-on-petrol); font-size: var(--ol-fs-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ol-track-display); line-height: 1.15; margin: 0 0 var(--ol-4); } .ol-auth-text { font-size: var(--ol-fs-sm); color: var(--ol-text-on-petrol-2); max-width: 42ch; } .ol-auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--ol-8) var(--ol-6); } .ol-auth-card { width: 100%; max-width: 400px; } @media (max-width: 900px) { .ol-auth { flex-direction: column; } .ol-auth-aside { flex: none; max-width: none; padding: var(--ol-8) var(--ol-6); } } /* =========================================================================== 23. RESPONSIVO =========================================================================== */ @media (max-width: 1100px) { .ol-sidebar { width: var(--ol-sidebar-w-collapsed); min-width: var(--ol-sidebar-w-collapsed); padding-left: var(--ol-2); padding-right: var(--ol-2); } .ol-sidebar .ol-nav-label { opacity: 0; width: 0; overflow: hidden; } .ol-sidebar .ol-nav-link { justify-content: center; padding: var(--ol-2); } .ol-sidebar .ol-nav-section { opacity: 0; height: 0; margin: var(--ol-2) 0; overflow: hidden; } } @media (max-width: 780px) { :root { --ol-header-h: 56px; } .ol-sidebar { display: none; } .ol-container { padding: var(--ol-4); } .ol-header-inner { padding: 0 var(--ol-4); } .ol-user-info { display: none; } .ol-user { padding: 0; border: 0; background: transparent; } .ol-brand-sub { display: none; } .ol-page-head { flex-direction: column; align-items: flex-start; } .ol-footer-inner { padding: var(--ol-4); flex-direction: column; align-items: flex-start; gap: var(--ol-2); } } /* =========================================================================== 24. IMPRESSÃO =========================================================================== */ @media print { .ol-header, .ol-sidebar, .ol-footer, .ol-page-actions, .btn, .ol-btn { display: none !important; } .ol-body { padding-top: 0; } .card, .ol-card { box-shadow: none; border-color: #CCC; break-inside: avoid; } body { background: #FFF; } }