/* ============================================================= EIXO4 Theme ยท client (portal cliente) Aplicado em todas as paginas /clients. Suporta dark mode via [data-portal-theme="dark"] no . ============================================================= */ body { font-family: var(--eixo4-font-sans); background: var(--bg); color: var(--ink-700); } /* === Top bar do portal === */ .navbar-default, header.top-portal, header#header { background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; box-shadow: var(--sh-1) !important; } .navbar-brand { font-weight: 700; color: var(--brand-navy) !important; letter-spacing: 0.04em; } .navbar-default .navbar-nav > li > a { color: var(--ink-700) !important; font-weight: 500; } .navbar-default .navbar-nav > .active > a { background: rgba(245,158,11,0.08) !important; color: var(--brand-orange-deep) !important; } /* === Hero institucional reutilizavel === */ .eixo4-portal-hero { background: linear-gradient(135deg, #0B1B3D 0%, #142a5c 100%); border-radius: var(--r); padding: 24px; color: #fff; position: relative; overflow: hidden; } .eixo4-portal-hero::before { content: ''; position: absolute; top: -80px; right: -40px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(252,184,20,0.18), transparent 60%); pointer-events: none; } .eixo4-portal-hero__kicker { font-size: 10px; color: var(--brand-amber); text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; position: relative; } .eixo4-portal-hero__title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 8px 0 12px; position: relative; } .eixo4-portal-hero__metrics { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .eixo4-portal-hero__metric { border-left: 1px solid rgba(255,255,255,0.14); padding-left: 12px; } .eixo4-portal-hero__metric-label { font-size: 10px; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; } .eixo4-portal-hero__metric-value { font-family: var(--eixo4-font-mono); font-size: 20px; font-weight: 700; } /* === Quick access tile === */ .eixo4-quick-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 14px; display: flex; gap: 10px; align-items: center; box-shadow: var(--sh-1); text-decoration: none; color: inherit; transition: box-shadow .15s ease; } .eixo4-quick-tile:hover { box-shadow: var(--sh-2); text-decoration: none; } .eixo4-quick-tile__icon { width: 38px; height: 38px; border-radius: 8px; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .eixo4-quick-tile__title { font-size: 13px; font-weight: 700; color: var(--ink-900); } .eixo4-quick-tile__sub { font-size: 11px; color: var(--ink-400); } /* === Panels nativos do portal === */ .panel, .panel-default { border-radius: var(--r) !important; border-color: var(--border) !important; box-shadow: var(--sh-1); } .panel-default > .panel-heading { background: var(--surface) !important; border-bottom: 1px solid var(--hairline) !important; } /* === Buttons === */ .btn-primary, .btn-info { background: var(--brand-gradient) !important; border-color: transparent !important; color: #fff !important; font-weight: 700; box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 1px 2px rgba(224,123,0,0.4), 0 4px 12px rgba(245,158,11,0.25) !important; } .btn-primary:hover, .btn-info:hover { filter: brightness(1.05); } /* === Forms === */ .form-control { border-radius: var(--r-sm); border-color: var(--border-strong); } .form-control:focus { border-color: var(--brand-orange) !important; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgba(245,158,11,0.25) !important; } /* === Dark mode portal === */ [data-portal-theme="dark"] body { background: var(--bg); color: var(--ink-700); } [data-portal-theme="dark"] .navbar-default { background: var(--surface) !important; border-bottom-color: var(--border) !important; } [data-portal-theme="dark"] .panel, [data-portal-theme="dark"] .panel-default { background: var(--surface) !important; border-color: var(--border) !important; } [data-portal-theme="dark"] .panel-default > .panel-heading { background: var(--surface-2) !important; } [data-portal-theme="dark"] .form-control { background: var(--surface-2) !important; border-color: var(--border-strong) !important; color: var(--ink-700); }