/* ======================================== ASITUR DEMO THEME The shared components are driven by --brand-* tokens. Most colours arrive through site_settings as inline values; the remaining tokens are completed here to match the current Asitur sales-demo visual language. Most --brand-* colours are not settled here: site_settings emits them as an inline style attribute on (build_theme_style), which beats any stylesheet. Those live in DEFAULT_BRAND_VALUES in site_settings/services.py. This file remains the project-owned override layer; rauda_core is not modified. ======================================== */ :root { --brand-accent-variant: #56c5f2; --brand-grey: #c6dce8; --brand-accent-border-soft: rgba(0, 148, 217, 0.35); --brand-accent-ring: rgba(0, 148, 217, 0.16); --brand-shadow-sm: 0 1px 2px rgba(0, 79, 123, 0.08); --brand-shadow-md: 0 10px 24px rgba(0, 79, 123, 0.08); --brand-shadow-lg: 0 18px 48px rgba(0, 79, 123, 0.14); --brand-shadow-btn: 0 0.5rem 1rem rgba(0, 148, 217, 0.18); --brand-shadow-sidebar: 0.75rem 0 2rem rgba(0, 79, 123, 0.12); --brand-shadow-logo: 0 0.5rem 1rem rgba(0, 79, 123, 0.16); } .navbar-brand-custom { display: flex; align-items: baseline; text-decoration: none; } .navbar-brand-custom .brand-name { font-weight: 700; letter-spacing: -0.02em; font-size: 1.15rem; color: var(--brand-black); } .navbar-brand-custom .brand-by { font-weight: 400; color: #94a3b8; font-size: 0.85rem; margin-left: 0.4rem; } .brand-name { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--brand-black); } .brand-by { color: var(--brand-grey-text); font-size: 0.9rem; font-weight: 400; margin-left: 0.5rem; } /* ======================================== ASITUR SIDEBAR ======================================== */ .brand-theme .navbar-vertical { background-color: var(--brand-white) !important; border-right: 1px solid var(--brand-grey-light) !important; } .brand-theme .navbar-vertical .nav-link { border-radius: var(--brand-radius-lg); color: var(--brand-grey-text) !important; font-weight: 500; margin: 0.125rem var(--brand-space-3); padding-inline: var(--brand-space-3); } .brand-theme .navbar-vertical .nav-link-title, .brand-theme .navbar-vertical .nav-link-icon, .brand-theme .navbar-vertical .nav-link-icon .ti { color: inherit !important; } .brand-theme .navbar-vertical .nav-link:hover { color: var(--brand-black) !important; background-color: rgba(0, 148, 217, 0.08) !important; } .brand-theme .navbar-vertical .nav-item.active .nav-link, .brand-theme .navbar-vertical .nav-link.active { color: var(--brand-accent) !important; background-color: rgba(0, 148, 217, 0.12) !important; } .brand-theme .navbar-vertical .navbar-collapse .nav-item.active::after { display: none !important; } .brand-theme .navbar-vertical .border-top { border-color: var(--brand-grey-light) !important; } .brand-theme .navbar-vertical .text-secondary { color: var(--brand-grey-text) !important; } .brand-theme .navbar-vertical .nav-section-title { color: var(--brand-grey-text); } .brand-theme .navbar-vertical .sidebar-user-email { color: var(--brand-black); } .brand-theme .navbar-vertical .dropdown-menu { background: transparent; border: 0; padding: var(--brand-space-1) 0; } .brand-theme .navbar-vertical .dropdown-item { color: var(--brand-grey-text) !important; border-radius: var(--brand-radius-lg); font-size: var(--brand-text-sm); font-weight: 500; margin: 0.125rem var(--brand-space-3); padding: var(--brand-space-1) var(--brand-space-3) var(--brand-space-1) 2.25rem !important; } .brand-theme .navbar-vertical .dropdown-item:hover { background-color: rgba(0, 148, 217, 0.08) !important; color: var(--brand-black) !important; } .brand-theme .navbar-vertical .dropdown-item.active { background-color: rgba(0, 148, 217, 0.12) !important; color: var(--brand-accent) !important; } .brand-theme .navbar-brand img { max-height: 60px !important; max-width: 100% !important; height: auto !important; width: auto !important; } /* ======================================== LAZY FRAGMENT SKELETONS — shape modifiers for Bootstrap's .placeholder, used inside a .placeholder-glow wrapper to sketch the block a lazy-loaded fragment (see lazy_fragment.js) will replace. ======================================== */ .placeholder-block { display: block; width: 100%; border-radius: var(--brand-radius-md); } .placeholder-block--card { height: 5.5rem; } .placeholder-block--chart { height: 280px; } .placeholder-block--row { height: 2.5rem; } .placeholder-block--pill { width: 6rem; height: 2rem; } /* ======================================== ASITUR COMPONENT REFINEMENTS ======================================== */ .brand-theme .card-header { padding-inline: var(--brand-space-6); } .brand-theme .card-header .card-title { color: var(--brand-black); font-size: var(--brand-text-lg) !important; font-weight: 500 !important; } .brand-theme .card .table > :not(caption) > * > :first-child { padding-left: var(--brand-space-6); } .brand-theme .card .table > :not(caption) > * > :last-child { padding-right: var(--brand-space-6); } .brand-theme .page-link { border-color: var(--brand-grey-light); color: var(--brand-grey-text); } .brand-theme .page-item.active .page-link { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--brand-white); } /* ======================================== SHARED DATE RANGE PICKER ======================================== */ .date-range-form { min-width: 0; } .date-picker-btn, input.date-picker-btn { display: inline-flex; align-items: center; min-width: 200px; padding: 0.3125rem 2.25rem 0.3125rem 2rem; background-color: var(--brand-white); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235E7182' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); background-position: 0.75rem center; background-repeat: no-repeat; border: 1px solid var(--brand-grey-light); border-radius: var(--brand-radius-lg); color: var(--brand-grey-text); cursor: pointer; font-family: var(--brand-font-sans); font-size: var(--brand-text-sm); font-weight: 500; transition: border-color var(--brand-transition-fast), color var(--brand-transition-fast), box-shadow var(--brand-transition-fast); } .date-picker-btn:hover, input.date-picker-btn:hover { border-color: var(--brand-accent); color: var(--brand-accent); } .date-picker-btn.is-active, input.date-picker-btn.is-active { background-color: rgba(0, 148, 217, 0.05); border-color: var(--brand-accent); color: var(--brand-black); } .date-picker-clear { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--brand-grey-light); color: var(--brand-grey-text); text-decoration: none; transition: background var(--brand-transition-fast), color var(--brand-transition-fast); } .date-picker-clear:hover { background: rgba(214, 57, 57, 0.15); color: var(--brand-danger); } /* ======================================== AUTHENTICATION ======================================== */ .signin-logo-img { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto var(--brand-space-2); } /* Rauda Intelligence: project-owned adaptation of Clara's HTML reference. Keep these overrides here; the upstream rauda-core theme remains shared. */ body.rauda-intelligence { --brand-accent:#080e9a !important; --brand-accent-hover:#060b7a !important; --brand-black:#00045b !important; --brand-blue-text:#00045b !important; --brand-grey-text:#5a5c88 !important; --brand-background:#f7f7f7 !important; --brand-grey-light:#eaecf8 !important; --brand-grey:#d0d4f0 !important; --brand-white:#fff !important; --brand-sidebar:#080e9a !important; --brand-accent-border-soft:rgba(8,14,154,.25); --brand-accent-ring:rgba(8,14,154,.12); --tblr-body-bg:#f7f7f7; --tblr-body-color:#00045b; --tblr-primary:#080e9a; --tblr-primary-rgb:8,14,154; --tblr-link-color:#080e9a; font-family:'IBM Plex Sans',sans-serif; color:#00045b; background:#f7f7f7; } .rauda-intelligence .navbar-vertical {background:#080e9a !important; border:0 !important; box-shadow:none !important;} .rauda-intelligence .navbar-vertical .container-fluid {padding:0 12px;} .intelligence-brand {display:flex;flex-direction:column;gap:7px;padding:20px 16px 14px;text-decoration:none;} .intelligence-brand img {width:72px;height:auto;object-fit:contain;object-position:left;} .intelligence-brand span {font-size:10px;letter-spacing:.19em;color:#d0d4f0;} .intelligence-client {margin:0 12px 20px;padding:16px 0;border-top:1px solid #ffffff30;color:#fff;font-size:14px;font-weight:500;} .intelligence-client small {display:block;color:#d0d4f0;font-size:11px;font-weight:400;margin-top:4px;} .rauda-intelligence .navbar-vertical .nav-section-title {color:#d0d4f0;font-size:9px;letter-spacing:.11em;padding:8px 14px;text-transform:uppercase;} .rauda-intelligence .navbar-vertical .nav-link {color:#ffffffd6 !important;margin:3px 0;padding:11px 14px;border-radius:5px;font-size:14px;font-weight:400;} .rauda-intelligence .navbar-vertical .nav-link-icon {font-size:19px;margin-right:12px;} .rauda-intelligence .navbar-vertical .nav-link:hover {background:#ffffff15 !important;color:#fff !important;} .rauda-intelligence .navbar-vertical .nav-item.active .nav-link {background:#ffffff30 !important;color:#fff !important;font-weight:500;} .rauda-intelligence .navbar-vertical .sidebar-user-email, .rauda-intelligence .navbar-vertical .text-secondary {color:#d0d4f0 !important;} .rauda-intelligence .navbar-vertical .sidebar-user {border-color:#ffffff30 !important;} .intelligence-header {display:flex;justify-content:space-between;gap:24px;background:#fff;border-bottom:1px solid #eaecf8;padding:26px 28px 22px;} .intelligence-eyebrow {font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:#5a5c88;margin-bottom:7px;} .intelligence-header h1 {font-size:26px;line-height:1.2;font-weight:500;margin:0 0 6px;color:#00045b;} .intelligence-header p {color:#5a5c88;font-size:12px;margin:0;max-width:440px;} .intelligence-period {display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:flex-end;gap:8px;max-width:505px;flex-shrink:0;} .intelligence-period label {display:block;font-size:10px;color:#5a5c88;margin-bottom:3px;} .intelligence-period input,.intelligence-period select {border:1px solid #d0d4f0;border-radius:4px;padding:6px 8px;font-size:11px;color:#00045b;background:#fff;height:33px;} .intelligence-period .btn {height:33px;border-radius:4px;} .intelligence-period small {font-size:10px;color:#5a5c88;flex-basis:100%;text-align:right;} .intelligence-content {padding:24px 28px 40px;max-width:1600px;margin:0 auto;} .intelligence-metrics {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px;} .intelligence-metric {display:flex;flex-direction:column;gap:12px;min-height:156px;padding:20px;background:#fff;border:1px solid #eaecf8;border-radius:7px;color:#00045b;transition:border-color .15s;} .intelligence-metric:hover {border-color:#080e9a;text-decoration:none;color:#00045b;} .intelligence-metric>span {color:#5a5c88;font-size:13px;} .intelligence-metric strong {font-family:'IBM Plex Mono',monospace;font-size:36px;line-height:1.25;font-weight:400;margin-top:4px;} .intelligence-metric em {font-size:14px;color:#5a5c88;font-style:normal;margin-left:5px;} .intelligence-metric small {font-size:11px;line-height:1.6;color:#5a5c88;margin-top:auto;} .intelligence-metric small i {float:right;} .intelligence-panel {background:#fff;border:1px solid #eaecf8;border-radius:7px;overflow:hidden;margin-bottom:20px;} .intelligence-panel-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 22px;border-bottom:1px solid #eaecf8;} .intelligence-panel-heading h2 {font-size:15px;font-weight:500;margin:0;display:flex;gap:9px;align-items:center;} .intelligence-panel-heading>a {font-size:11px;white-space:nowrap;} .intelligence-panel-body {padding:20px 22px;} .intelligence-attention {display:flex;align-items:center;gap:20px;padding:18px 22px;border-bottom:1px solid #eaecf8;color:#00045b;} .intelligence-attention:last-child {border-bottom:0;} .intelligence-attention:hover,.intelligence-evidence:hover,.intelligence-improvement:hover {background:#f8f8fd;text-decoration:none;color:#00045b;} .attention-marker {width:3px;align-self:stretch;background:#e47535;border-radius:2px;flex-shrink:0;} .intelligence-attention .intelligence-eyebrow {font-size:9px;margin-bottom:4px;} .intelligence-attention h3,.intelligence-evidence h3,.intelligence-improvement h3 {font-size:13px;line-height:1.5;margin:0 0 4px;font-weight:500;} .intelligence-attention p,.intelligence-evidence p,.intelligence-improvement p {font-size:11px;color:#5a5c88;line-height:1.6;margin:0;} .attention-number {text-align:right;flex-shrink:0;min-width:80px;} .attention-number strong {font-family:'IBM Plex Mono',monospace;font-size:20px;font-weight:400;} .attention-number small {font-size:9px;display:block;color:#5a5c88;} .intelligence-status {display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:400;padding:4px 7px;border-radius:4px;background:#eaecf8;color:#5a5c88;white-space:normal;line-height:1.4;} .status-danger {background:#f9eded;color:#af3636;}.status-warning {background:#fff2e8;color:#9b4b19;}.status-success {background:#edf7ef;color:#267437;}.ink-warning {color:#bc642c;} .intelligence-columns {display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;} .intelligence-topic {display:block;color:#00045b;margin-bottom:20px;} .intelligence-topic:last-child {margin-bottom:0;} .intelligence-topic:hover {text-decoration:none;color:#080e9a;} .intelligence-topic>div {display:flex;justify-content:space-between;gap:16px;font-size:12px;margin-bottom:9px;} .intelligence-topic small {display:inline-block;color:#5a5c88;margin-left:12px;min-width:44px;text-align:right;} .rauda-intelligence meter {width:100%;height:6px;display:block;border:0;border-radius:8px;background:#eaecf8;} .rauda-intelligence meter::-webkit-meter-bar {background:#eaecf8;border:0;height:6px;} .rauda-intelligence meter::-webkit-meter-optimum-value {background:#080e9a;border-radius:8px;} .rauda-intelligence meter::-moz-meter-bar {background:#080e9a;border-radius:8px;} .intelligence-improvement {display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px 22px;color:#00045b;border-bottom:1px solid #eaecf8;} .intelligence-context-note {display:flex;gap:10px;font-size:11px;color:#5a5c88;padding:18px 22px;line-height:1.6;background:#fafafe;} .intelligence-footnote {font-size:10px;line-height:1.7;color:#5a5c88;} .intelligence-tabs {display:flex;gap:22px;border-bottom:1px solid #d0d4f0;margin-bottom:22px;overflow:auto;} .intelligence-tabs a {font-size:12px;color:#5a5c88;white-space:nowrap;padding:0 0 13px;border-bottom:2px solid transparent;} .intelligence-tabs a.active {color:#080e9a;border-bottom-color:#080e9a;font-weight:500;} .intelligence-tabs.compact {margin:0;border:0;gap:14px;} .intelligence-tabs.compact a {padding:5px 0;} .intelligence-table {margin:0;--tblr-table-color:#00045b;} .intelligence-table thead th {font-size:10px;text-transform:none;letter-spacing:0;background:#fafafe;color:#5a5c88;padding:13px 20px;font-weight:500;} .intelligence-table tbody td {padding:17px 20px;font-size:12px;vertical-align:middle;border-color:#eaecf8;} .intelligence-table tbody tr:last-child td {border-bottom:0;} .intelligence-table tbody tr:hover {background:#fafafe;} .intelligence-table td small {font-size:10px;margin-top:4px;} .intelligence-table meter {margin-top:6px;max-width:105px;} .intelligence-detector-name {font-weight:500;color:#00045b;} .intelligence-back {display:inline-block;font-size:12px;margin-bottom:20px;} .intelligence-detector-summary {display:grid;grid-template-columns:1fr 1fr 1fr;padding:26px;gap:28px;} .intelligence-detector-summary p {font-size:11px;color:#5a5c88;margin:10px 0 0;line-height:1.6;} .intelligence-big-number {font-family:'IBM Plex Mono',monospace;font-size:36px;font-weight:400;} .intelligence-evidence {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;border-bottom:1px solid #eaecf8;color:#00045b;} .intelligence-evidence h3 {margin-top:10px;} .intelligence-evidence small {font-size:10px;color:#5a5c88;display:inline-block;margin-top:9px;} .intelligence-evidence .intelligence-status {margin-left:12px;} .intelligence-evidence>div>.font-mono {font-size:11px;} .intelligence-empty {padding:48px 24px;text-align:center;color:#5a5c88;} .intelligence-empty>i {font-size:28px;display:block;margin-bottom:12px;} .intelligence-empty h3 {font-size:15px;color:#00045b;font-weight:500;} .intelligence-empty p {font-size:12px;margin:0;} .intelligence-pagination {display:flex;justify-content:center;align-items:center;gap:25px;padding:20px;font-size:12px;} .intelligence-search {display:flex;gap:10px;align-items:center;margin-bottom:20px;font-size:12px;} .intelligence-search input[type=search] {border:1px solid #d0d4f0;background:#fff;border-radius:4px;padding:9px 12px;max-width:430px;flex:1;min-width:0;color:#00045b;} .catalog-description {max-width:360px;min-width:180px;white-space:normal;line-height:1.6;font-size:12px;margin:12px 0;} .rauda-intelligence .card {box-shadow:none;border-color:#eaecf8;border-radius:7px;} .rauda-intelligence .page-header {padding:24px 0;background:#fff;margin-top:0;border-bottom:1px solid #eaecf8;} .rauda-intelligence .page-title {font-weight:500 !important;font-size:24px !important;} .rauda-intelligence a:focus-visible,.rauda-intelligence button:focus-visible,.rauda-intelligence summary:focus-visible {outline:2px solid #6cc4ff;outline-offset:4px;} @media(min-width:992px) { .rauda-intelligence .navbar-vertical {width:232px;} .rauda-intelligence .navbar-vertical~.page-wrapper {margin-left:232px;} .rauda-intelligence .navbar-vertical .navbar-collapse {width:100%;} .rauda-intelligence .navbar-vertical .container-fluid {align-items:stretch;} } @media(max-width:1200px) {.intelligence-header {flex-wrap:wrap;}.intelligence-period {justify-content:flex-start;max-width:none;}.intelligence-period small {text-align:left;}} @media(max-width:991px) {.intelligence-brand {padding:14px;}.intelligence-brand img {width:60px;}.intelligence-client {display:none;}.rauda-intelligence .navbar-toggler {color:white;}.intelligence-metrics {gap:12px;}} @media(max-width:700px) { .intelligence-content {padding:18px 14px;}.intelligence-header {padding:20px 14px;}.intelligence-period {max-width:100%;flex-shrink:1;} .intelligence-metrics {grid-template-columns:repeat(2,minmax(0,1fr));}.intelligence-metric {padding:15px;min-height:145px;}.intelligence-metric strong {font-size:28px;} .intelligence-columns,.intelligence-detector-summary {grid-template-columns:1fr;}.intelligence-attention {gap:10px;padding:16px 14px;flex-wrap:wrap;}.intelligence-attention .flex-fill {flex-basis:70%;} .intelligence-panel-heading {padding:16px 14px;flex-wrap:wrap;}.intelligence-evidence {padding:18px 14px;} } @media print { .rauda-intelligence .navbar-vertical,.intelligence-period,.intelligence-search {display:none !important;} .rauda-intelligence .page-wrapper {margin:0 !important;}.intelligence-panel,.intelligence-metric {break-inside:avoid;box-shadow:none;} .intelligence-content {padding:10px 0;}.intelligence-header {padding:10px 0;}.intelligence-metrics {gap:8px;} .intelligence-attention,.intelligence-evidence {break-inside:avoid;}.rauda-intelligence {background:#fff !important;print-color-adjust:exact;} } /* Override the shared template's important heading scale for compact analysis. */ .rauda-intelligence .intelligence-header h1 {font-size:26px !important;font-weight:500 !important;line-height:1.25 !important;} .rauda-intelligence .intelligence-panel-heading h2 {font-size:15px !important;font-weight:500 !important;line-height:1.4 !important;color:#00045b !important;} .rauda-intelligence .intelligence-attention h3,.rauda-intelligence .intelligence-evidence h3,.rauda-intelligence .intelligence-improvement h3 {font-size:13px !important;font-weight:500 !important;line-height:1.5 !important;color:#00045b !important;} .rauda-intelligence .intelligence-empty h3 {font-size:15px !important;font-weight:500 !important;} .rauda-intelligence .navbar-vertical .nav-section-title {color:#d0d4f0 !important;font-size:9px !important;font-weight:400 !important;} .rauda-intelligence .navbar-vertical .navbar-nav {padding-top:0 !important;}