/* ========================================================= Custom stylesheet - Premium enterprise dashboard theme All colors, radii and spacing are driven by CSS variables so the design system can be tuned from one place. ========================================================= */ :root { --color-primary: #2563EB; --color-primary-dark: #1D4ED8; --color-primary-light: #60A5FA; --color-sidebar-start: #0F172A; --color-sidebar-end: #1E293B; --color-sidebar-text: #94A3B8; --color-sidebar-text-active: #FFFFFF; --color-success: #16A34A; --color-warning: #F59E0B; --color-danger: #DC2626; --color-bg: #F8FAFC; --color-surface: #FFFFFF; --color-border: #E7EAF0; --color-text: #0F172A; --color-text-muted: #64748B; --gradient-primary: linear-gradient(135deg, #2563EB 0%, #4F46E5 100%); --gradient-sidebar: linear-gradient(180deg, var(--color-sidebar-start) 0%, var(--color-sidebar-end) 100%); --sidebar-width: 268px; --navbar-height: 72px; --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.25rem; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --shadow-md: 0 8px 20px rgba(15, 23, 42, 0.08); --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.14); --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --color-navbar-bg: rgba(255, 255, 255, 0.85); --color-glass-bg: rgba(255, 255, 255, 0.65); --color-glass-border: rgba(226, 232, 240, 0.8); --color-scrollbar-thumb: rgba(15, 23, 42, 0.18); } /* --------------------------------------------------------- Dark theme palette (activated via [data-bs-theme="dark"] on , set by the theme toggle in the navbar; see custom.js initThemeToggle()) --------------------------------------------------------- */ [data-bs-theme="dark"] { --color-sidebar-start: #05070D; --color-sidebar-end: #10192E; --color-bg: #0B1220; --color-surface: #131B2C; --color-border: #263041; --color-text: #E2E8F0; --color-text-muted: #94A3B8; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.45); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55); --color-navbar-bg: rgba(19, 27, 44, 0.85); --color-glass-bg: rgba(19, 27, 44, 0.6); --color-glass-border: rgba(148, 163, 184, 0.16); --color-scrollbar-thumb: rgba(226, 232, 240, 0.2); } /* --------------------------------------------------------- Base / typography --------------------------------------------------------- */ html, body { height: 100%; } body { background-color: var(--color-bg); color: var(--color-text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 0.95rem; -webkit-font-smoothing: antialiased; } a { text-decoration: none; } h1, h2, h3, h4, h5, h6 { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; letter-spacing: -0.01em; } ::selection { background-color: rgba(37, 99, 235, 0.18); } /* Slim, unobtrusive scrollbars */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background-color: var(--color-scrollbar-thumb); border-radius: 999px; } ::-webkit-scrollbar-track { background: transparent; } /* --------------------------------------------------------- Animations --------------------------------------------------------- */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* --------------------------------------------------------- Layout shell: fixed sidebar + sticky navbar + main content --------------------------------------------------------- */ .app-shell { display: flex; min-height: 100vh; } .app-main { flex: 1 1 auto; margin-left: var(--sidebar-width); display: flex; flex-direction: column; min-height: 100vh; } .app-content { padding: 2.25rem 2.5rem; flex: 1 1 auto; animation: fadeInUp 0.45s cubic-bezier(0.4, 0, 0.2, 1); } @media (max-width: 991.98px) { .app-main { margin-left: 0; } .app-content { padding: 1.5rem; } } /* --------------------------------------------------------- Sidebar --------------------------------------------------------- */ .app-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); background: var(--gradient-sidebar); display: flex; flex-direction: column; z-index: 1030; transition: transform var(--transition-base); box-shadow: 4px 0 24px rgba(15, 23, 42, 0.06); } .app-sidebar__brand { display: flex; align-items: center; gap: 0.75rem; height: var(--navbar-height); padding: 0 1.5rem; color: #fff; font-weight: 600; font-size: 1.02rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .app-sidebar__brand-icon { width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35); } .app-sidebar__brand-text strong { font-weight: 800; } .app-sidebar__nav { padding: 1.25rem 1rem; overflow-y: auto; } .app-sidebar__link { position: relative; display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 1rem; margin-bottom: 0.35rem; border-radius: var(--radius-md); color: var(--color-sidebar-text); font-size: 0.9rem; font-weight: 500; overflow: hidden; transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); } .app-sidebar__link::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 0; border-radius: 0 4px 4px 0; background: #fff; transition: height var(--transition-base); } .app-sidebar__link i { font-size: 1.15rem; width: 1.25rem; text-align: center; transition: transform var(--transition-fast); } .app-sidebar__link:hover { background-color: rgba(255, 255, 255, 0.06); color: var(--color-sidebar-text-active); transform: translateX(3px); } .app-sidebar__link:hover i { transform: scale(1.1); } .app-sidebar__link.active { background: var(--gradient-primary); color: #fff; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3); } .app-sidebar__link.active::before { height: 60%; } .app-sidebar__footer { margin-top: auto; padding: 1.1rem 1.5rem; color: var(--color-sidebar-text); font-size: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } /* --------------------------------------------------------- Navbar --------------------------------------------------------- */ .app-navbar { position: sticky; top: 0; height: var(--navbar-height); background-color: var(--color-navbar-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1.75rem; z-index: 1020; } .app-navbar__left { display: flex; align-items: center; gap: 1rem; min-width: 0; } .app-navbar__toggle { border: none; background: transparent; font-size: 1.4rem; color: var(--color-text); display: none; flex-shrink: 0; } .app-navbar__heading { min-width: 0; } .app-navbar__title { font-size: 1.15rem; font-weight: 700; color: var(--color-text); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-navbar__subtitle { font-size: 0.8rem; color: var(--color-text-muted); } .app-navbar__right { display: flex; align-items: center; gap: 0.9rem; flex-shrink: 0; } .app-navbar__search { position: relative; width: 260px; } .app-navbar__search i { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); font-size: 0.9rem; } .app-navbar__search .form-control { border-radius: 999px; background-color: var(--color-bg); border: 1px solid var(--color-border); padding-left: 2.4rem; font-size: 0.875rem; transition: box-shadow var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast); } .app-navbar__search .form-control:focus { background-color: var(--color-surface); border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); } .app-navbar__clock { flex-direction: column; align-items: flex-end; line-height: 1.25; padding-right: 0.75rem; border-right: 1px solid var(--color-border); } .app-navbar__date { font-size: 0.72rem; color: var(--color-text-muted); } .app-navbar__time { font-size: 0.85rem; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; } .app-navbar__icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-border); background-color: var(--color-surface); color: var(--color-text); display: flex; align-items: center; justify-content: center; transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } .app-navbar__icon-btn:hover { background-color: var(--color-bg); box-shadow: var(--shadow-sm); transform: translateY(-1px); } .app-navbar__profile { display: flex; align-items: center; gap: 0.6rem; font-weight: 500; font-size: 0.875rem; } .app-navbar__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--gradient-primary); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3); } @media (max-width: 991.98px) { .app-navbar__toggle { display: inline-flex; } .app-sidebar { transform: translateX(-100%); } .app-sidebar.show { transform: translateX(0); box-shadow: var(--shadow-lg); } } @media (max-width: 767.98px) { .app-navbar__search { display: none !important; } .app-navbar { padding: 0 1rem; gap: 0.5rem; } .app-navbar__right { gap: 0.5rem; } } @media (max-width: 420px) { .app-navbar__title { font-size: 1rem; } .app-navbar__right .app-navbar__icon-btn:first-of-type { display: none; } } /* --------------------------------------------------------- Messages --------------------------------------------------------- */ .messages-stack { margin-bottom: 1.5rem; } .messages-stack .alert { border: none; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } /* --------------------------------------------------------- Page header / hero --------------------------------------------------------- */ .page-header { margin-bottom: 1.75rem; } .page-header__title { font-size: 1.85rem; font-weight: 800; color: var(--color-text); margin-bottom: 0.3rem; letter-spacing: -0.02em; } .page-header__subtitle { font-size: 0.95rem; color: var(--color-text-muted); } .dashboard-hero { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 2rem; } /* --------------------------------------------------------- Cards --------------------------------------------------------- */ .card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base); } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: rgba(37, 99, 235, 0.18); } .card-header { background-color: transparent; border-bottom: 1px solid var(--color-border); font-weight: 600; padding: 1.1rem 1.4rem; } .card-body { padding: 1.4rem; } /* --------------------------------------------------------- Stat cards --------------------------------------------------------- */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; margin-bottom: 2rem; } .stat-card { border-radius: var(--radius-lg); padding: 1.4rem 1.6rem; display: flex; align-items: flex-start; gap: 1.1rem; background-color: var(--color-surface); } .stat-card__icon { width: 52px; height: 52px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; flex-shrink: 0; box-shadow: var(--shadow-sm); } .stat-card__value { font-size: 1.75rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; } .stat-card__label { font-size: 0.82rem; color: var(--color-text-muted); font-weight: 500; margin-bottom: 0.35rem; } .stat-card__trend { font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; } .bg-icon-primary { background: var(--gradient-primary); } .bg-icon-success { background-color: var(--color-success); } .bg-icon-warning { background-color: var(--color-warning); } .bg-icon-danger { background-color: var(--color-danger); } /* --------------------------------------------------------- Category cards --------------------------------------------------------- */ .category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; } .category-card .card-body { display: flex; flex-direction: column; gap: 0.6rem; } .category-card__icon { width: 54px; height: 54px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.55rem; color: #fff; margin-bottom: 0.4rem; box-shadow: var(--shadow-sm); } .category-card__title { font-size: 1.1rem; font-weight: 700; margin: 0; } .category-card__count { font-size: 0.8rem; font-weight: 600; color: var(--color-primary); margin: 0; } .category-card__desc { font-size: 0.85rem; margin: 0 0 0.5rem; } /* --------------------------------------------------------- Buttons --------------------------------------------------------- */ .btn { border-radius: var(--radius-md); font-weight: 600; font-size: 0.875rem; padding: 0.55rem 1.2rem; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-lg { padding: 0.8rem 1.75rem; font-size: 0.95rem; } .btn-sm { padding: 0.4rem 0.9rem; font-size: 0.8rem; } .btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); } .btn-primary:hover { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25); } .btn-gradient { background: var(--gradient-primary); border: none; color: #fff; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3); } .btn-gradient:hover { color: #fff; box-shadow: 0 12px 28px rgba(37, 99, 235, 0.4); } .btn-success { background-color: var(--color-success); border-color: var(--color-success); } .btn-warning { background-color: var(--color-warning); border-color: var(--color-warning); color: #fff; } .btn-danger { background-color: var(--color-danger); border-color: var(--color-danger); } .btn-outline-primary { color: var(--color-primary); border-color: var(--color-primary); } .btn-outline-primary:hover { background-color: var(--color-primary); border-color: var(--color-primary); } .btn-outline-success { color: var(--color-success); border-color: var(--color-success); } .btn-outline-success:hover { background-color: var(--color-success); border-color: var(--color-success); } .btn-outline-warning { color: var(--color-warning); border-color: var(--color-warning); } .btn-outline-warning:hover { background-color: var(--color-warning); border-color: var(--color-warning); color: #fff; } .btn-outline-danger { color: var(--color-danger); border-color: var(--color-danger); } .btn-outline-danger:hover { background-color: var(--color-danger); border-color: var(--color-danger); } /* --------------------------------------------------------- Tables --------------------------------------------------------- */ .table-container { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); background-color: var(--color-surface); } .table-container .table { margin-bottom: 0; } .table-container .table thead th { position: sticky; top: 0; background-color: var(--color-bg); color: var(--color-text-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; border-bottom: 1px solid var(--color-border); z-index: 1; } .table-container .table tbody tr { position: relative; transition: background-color var(--transition-fast), box-shadow var(--transition-fast); } .table-container .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(37, 99, 235, 0.025); } .table-container .table tbody tr:hover { background-color: rgba(37, 99, 235, 0.07); box-shadow: inset 3px 0 0 0 var(--color-primary); } .table-container .table td, .table-container .table th { padding: 0.9rem 1.2rem; vertical-align: middle; border-bottom-color: var(--color-border); } @media (max-width: 767.98px) { .table-container { overflow-x: auto; } } /* Avatar + badge used inside tables */ .avatar-circle { width: 34px; height: 34px; border-radius: 50%; background: var(--gradient-primary); color: #fff; font-weight: 700; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; text-transform: uppercase; } .badge-category { display: inline-block; padding: 0.3rem 0.75rem; border-radius: 999px; background-color: rgba(37, 99, 235, 0.1); color: var(--color-primary); font-size: 0.75rem; font-weight: 600; } /* --------------------------------------------------------- Forms --------------------------------------------------------- */ .form-label { font-weight: 600; font-size: 0.875rem; color: var(--color-text); margin-bottom: 0.4rem; } .form-control, .form-select { border-radius: var(--radius-md); border: 1px solid var(--color-border); padding: 0.65rem 0.9rem; font-size: 0.9rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-base), color var(--transition-base); } .form-control:focus, .form-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); } .form-section .card-header { display: flex; align-items: center; font-size: 0.95rem; } .wallet-row .form-control { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.85rem; } .address-text { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.85rem; word-break: break-all; } /* --------------------------------------------------------- Search --------------------------------------------------------- */ .search-box__input-group { display: flex; align-items: center; gap: 0.75rem; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.5rem 0.5rem 0.5rem 1.4rem; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-fast), border-color var(--transition-fast); } .search-box__input-group:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); } .search-box__input-group i { color: var(--color-text-muted); font-size: 1.1rem; } .search-box__input-group .form-control { border: none; box-shadow: none; font-size: 1rem; padding: 0.55rem 0; } .search-box__input-group .form-control:focus { box-shadow: none; } /* --------------------------------------------------------- Empty state --------------------------------------------------------- */ .empty-state { text-align: center; padding: 4rem 1.5rem; border: 1px dashed var(--color-border); border-radius: var(--radius-lg); background-color: var(--color-surface); animation: fadeIn 0.4s ease; } .empty-state i { font-size: 2.75rem; color: var(--color-primary-light); margin-bottom: 1rem; display: inline-block; } .empty-state h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.35rem; } /* --------------------------------------------------------- Footer --------------------------------------------------------- */ .app-footer { padding: 1.1rem 2.5rem; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.8rem; background-color: var(--color-surface); } @media (max-width: 991.98px) { .app-footer { padding: 1rem 1.5rem; } } /* --------------------------------------------------------- Landing page --------------------------------------------------------- */ .landing-nav { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 2.5rem; background-color: var(--color-navbar-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); } .landing-nav__brand { display: flex; align-items: center; gap: 0.65rem; font-weight: 800; font-size: 1.05rem; color: var(--color-text); } .landing-nav__brand-icon { width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--gradient-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35); } .landing-nav__actions { display: flex; align-items: center; gap: 0.75rem; } .landing-hero { position: relative; padding: 6rem 2rem 7rem; text-align: center; color: #fff; background: linear-gradient(135deg, #0F172A 0%, #1E293B 45%, #2563EB 100%); overflow: hidden; } .landing-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(79, 70, 229, 0.35), transparent 40%), radial-gradient(circle at 80% 30%, rgba(37, 99, 235, 0.35), transparent 45%); pointer-events: none; } .landing-hero__content { position: relative; max-width: 720px; margin: 0 auto; animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .landing-hero__title { font-size: 3rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 1rem; } .landing-hero__subtitle { font-size: 1.1rem; color: rgba(255, 255, 255, 0.75); margin-bottom: 2.25rem; } .landing-hero__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .landing-section { padding: 5rem 2rem; max-width: 1180px; margin: 0 auto; } .landing-section__header { text-align: center; max-width: 640px; margin: 0 auto 3rem; } .landing-section__title { font-size: 2rem; font-weight: 800; margin-bottom: 0.6rem; letter-spacing: -0.02em; } .landing-section__subtitle { color: var(--color-text-muted); } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; } .feature-card { border-radius: var(--radius-xl); padding: 2rem 1.75rem; background: var(--color-glass-bg); border: 1px solid var(--color-glass-border); backdrop-filter: blur(6px); box-shadow: var(--shadow-sm); transition: transform var(--transition-base), box-shadow var(--transition-base); } .feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .feature-card__icon { width: 56px; height: 56px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff; background: var(--gradient-primary); margin-bottom: 1.25rem; box-shadow: var(--shadow-sm); } .feature-card__title { font-weight: 700; font-size: 1.05rem; margin-bottom: 0.5rem; } .feature-card__desc { color: var(--color-text-muted); font-size: 0.9rem; margin: 0; } .landing-stats { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .landing-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; } .landing-stat-card { text-align: center; padding: 2rem 1rem; border-radius: var(--radius-xl); background: var(--gradient-primary); color: #fff; box-shadow: var(--shadow-md); transition: transform var(--transition-base); } .landing-stat-card:hover { transform: translateY(-4px); } .landing-stat-card__value { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.02em; } .landing-stat-card__label { font-size: 0.8rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.06em; } .landing-footer { padding: 2rem; text-align: center; color: var(--color-text-muted); font-size: 0.85rem; border-top: 1px solid var(--color-border); } @media (max-width: 767.98px) { .landing-hero { padding: 4rem 1.25rem 5rem; } .landing-hero__title { font-size: 2.1rem; } .landing-section { padding: 3.5rem 1.25rem; } .landing-nav { padding: 1rem 1.25rem; flex-wrap: wrap; gap: 0.75rem; } .landing-nav__actions { flex-wrap: wrap; gap: 0.5rem; } } @media (max-width: 420px) { .landing-nav__brand span { font-size: 0.9rem; } } /* --------------------------------------------------------- Blockchain scanner --------------------------------------------------------- */ .scan-address-row .form-select, .scan-address-row .form-control { background-color: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); } .scan-result-card { animation: fadeInUp 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .scan-result-card.is-error { border-left: 3px solid var(--color-danger); } .scan-status-badge { display: inline-flex; align-items: center; font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); } .scan-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; } .scan-metric { border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-surface); padding: 1rem 1.1rem; } .scan-metric__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--color-text-muted); margin-bottom: 0.35rem; } .scan-metric__value { font-size: 1.1rem; font-weight: 800; color: var(--color-text); } .scan-metric__sub { margin-top: 0.2rem; font-size: 0.8rem; color: var(--color-text-muted); } .scan-chart-wrap { position: relative; height: 320px; } .scan-counterparty-pagination .btn { border-radius: 999px; } /* --------------------------------------------------------- Theme transition (kept last so it wins the cascade and layers color/background transitions on top of each component's own hover-transform transitions without dropping them) --------------------------------------------------------- */ body, .app-sidebar { transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), transform var(--transition-base); } .app-navbar, .app-footer, .landing-nav { transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base); } .card { transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base), background-color var(--transition-base), color var(--transition-base); } .table-container, .empty-state { transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base); } .feature-card { transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base), border-color var(--transition-base); } /* --------------------------------------------------------- Page loading bar --------------------------------------------------------- */ #page-loading-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--gradient-primary); z-index: 2000; opacity: 0; transition: width 0.35s ease, opacity 0.2s ease; } #page-loading-bar.is-active { opacity: 1; } /* --------------------------------------------------------- Breadcrumb --------------------------------------------------------- */ .breadcrumb-nav { margin-bottom: 1.5rem; } .breadcrumb-nav .breadcrumb { font-size: 0.825rem; margin-bottom: 0; } .breadcrumb-nav .breadcrumb-item a { color: var(--color-text-muted); font-weight: 500; } .breadcrumb-nav .breadcrumb-item a:hover { color: var(--color-primary); } .breadcrumb-nav .breadcrumb-item.active { color: var(--color-text); font-weight: 600; } /* --------------------------------------------------------- Wallet network badges --------------------------------------------------------- */ .badge-network { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; } .badge-network-btc { background-color: rgba(247, 147, 26, 0.14); color: #F7931A; } .badge-network-eth { background-color: rgba(98, 126, 234, 0.14); color: #627EEA; } .badge-network-trc20, .badge-network-trx, .badge-network-tron { background-color: rgba(220, 38, 38, 0.14); color: #DC2626; } .badge-network-ton { background-color: rgba(0, 152, 234, 0.14); color: #0098EA; } .badge-network-ltc { background-color: rgba(148, 158, 168, 0.18); color: #7A8794; } .badge-network-bsc, .badge-network-bnb { background-color: rgba(240, 185, 11, 0.16); color: #B7860B; } .badge-network-other { background-color: rgba(100, 116, 139, 0.14); color: var(--color-text-muted); } [data-bs-theme="dark"] .badge-network-ltc { color: #CBD5E1; } [data-bs-theme="dark"] .badge-network-bsc, [data-bs-theme="dark"] .badge-network-bnb { color: #F0B90B; } /* --------------------------------------------------------- Copy-to-clipboard button --------------------------------------------------------- */ .js-copy-address { border: 1px solid var(--color-border); background-color: transparent; color: var(--color-text-muted); width: 32px; height: 32px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); } .js-copy-address:hover { background-color: var(--color-primary); color: #fff; border-color: var(--color-primary); transform: translateY(-1px); } /* --------------------------------------------------------- Extra hover polish --------------------------------------------------------- */ .btn:not(:disabled):hover { filter: brightness(1.03); } .btn:disabled { transform: none; } @media (max-width: 575.98px) { .app-content { padding: 1.1rem; } .stats-grid, .category-grid, .feature-grid { grid-template-columns: 1fr; } .dashboard-hero { flex-direction: column; align-items: flex-start; } .dashboard-hero .btn { width: 100%; } .wallet-row { flex-wrap: wrap; } .wallet-row .form-select { max-width: 100% !important; flex: 1 1 100%; } } @media (min-width: 576px) and (max-width: 991.98px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .category-grid, .feature-grid { grid-template-columns: repeat(2, 1fr); } } /* ========================================================= UZ BLOCKCHAIN INTELLIGENCE additions ========================================================= */ :root { /* Risk bands. Bootstrap has no "orange" variant and the specification requires four bands, so they are defined here and referenced by both the CSS classes below and the graph renderer (see intel/contracts.py BANDS, which carries the same hex values for chart and node colouring). */ --risk-low: #1a7f4e; --risk-medium: #b8860b; --risk-high: #d2691e; --risk-critical: #b3261e; --risk-unknown: #64748B; --color-classification: #b3261e; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } [data-bs-theme="dark"] { /* Lightened so the bands keep adequate contrast on the dark surface. */ --risk-low: #34d399; --risk-medium: #fbbf24; --risk-high: #fb923c; --risk-critical: #f87171; } /* --- Sidebar additions ---------------------------------- */ .app-sidebar__section { padding: 1.25rem 1.5rem 0.4rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(148, 163, 184, 0.65); } .app-sidebar__badge { margin-inline-start: auto; min-width: 1.35rem; padding: 0.1rem 0.4rem; border-radius: 999px; background: var(--color-danger); color: #fff; font-size: 0.68rem; font-weight: 700; text-align: center; } .app-sidebar__classification { display: inline-block; margin-bottom: 0.4rem; padding: 0.1rem 0.5rem; border: 1px solid var(--color-classification); border-radius: var(--radius-sm); color: var(--color-classification); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; } /* --- Navbar additions ----------------------------------- */ .app-navbar__badge { position: absolute; top: 2px; inset-inline-end: 2px; min-width: 1.05rem; padding: 0 0.25rem; border-radius: 999px; background: var(--color-danger); color: #fff; font-size: 0.62rem; font-weight: 700; line-height: 1.05rem; text-align: center; } .app-navbar__profile { display: flex; align-items: center; gap: 0.6rem; padding: 0.25rem 0.5rem; border: 0; border-radius: var(--radius-md); background: transparent; color: inherit; transition: background var(--transition-fast); } .app-navbar__profile:hover { background: rgba(148, 163, 184, 0.14); } /* --- Risk band presentation ----------------------------- */ .risk-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; color: #fff; } .risk-badge--low { background: var(--risk-low); } .risk-badge--medium { background: var(--risk-medium); } .risk-badge--high { background: var(--risk-high); } .risk-badge--critical { background: var(--risk-critical); } .risk-badge--unknown { background: var(--risk-unknown); } .text-risk-low { color: var(--risk-low) !important; } .text-risk-medium { color: var(--risk-medium) !important; } .text-risk-high { color: var(--risk-high) !important; } .text-risk-critical { color: var(--risk-critical) !important; } /* --- Risk badge foreground ------------------------------- * * Bootstrap ships no "orange" utility, yet intel/contracts.py names 'orange' * as the High band's colour and intel/services/risk/base.py does the same for * SEV_HIGH, so templates render `badge text-bg-orange` (risk_detail.html:109, * :258, :417 and rule_catalog.html:184). With no such class Bootstrap's .badge * still applied color:#fff over a transparent background, so the High band - * the one between Medium and Critical - was invisible on a light card. * * The foregrounds below are measured, not chosen. White on #d2691e is 3.63:1 * and on the dark theme's #fb923c only 2.26:1, both under the 4.5:1 WCAG AA * floor for text this size. Dark ink on the warm bands and white on the deep * ones clears it everywhere: * light low 5.01 medium 6.45 high 5.78 critical 6.54 * dark low 10.9 medium 11.2 high 9.28 critical 7.59 * Every band is lightened for the dark surface, which is why all four want * dark ink there. */ :root { --risk-low-fg: #fff; --risk-medium-fg: #111827; --risk-high-fg: #111827; --risk-critical-fg: #fff; --risk-unknown-fg: #fff; } [data-bs-theme="dark"] { --risk-low-fg: #111827; --risk-medium-fg: #111827; --risk-high-fg: #111827; --risk-critical-fg: #111827; --risk-unknown-fg: #fff; } .text-bg-orange { background-color: var(--risk-high) !important; color: var(--risk-high-fg) !important; } /* .risk-badge sets color:#fff for all bands; these override it per band. */ .risk-badge--low { color: var(--risk-low-fg); } .risk-badge--medium { color: var(--risk-medium-fg); } .risk-badge--high { color: var(--risk-high-fg); } .risk-badge--critical { color: var(--risk-critical-fg); } .risk-badge--unknown { color: var(--risk-unknown-fg); } /* Bootstrap's .text-secondary is a fixed grey (#6c757d) in both themes - about 3.5:1 on our dark surface. It carries the qualifying prose next to risk scores, which is exactly the text that must not be hard to read, so point it at the theme-aware token the rest of this file already uses (6.4:1 dark). */ .text-secondary { color: var(--color-text-muted) !important; } /* Used on dashboard.html:124 to let a flex child shrink so a long address can truncate instead of forcing the row wide. It was never defined. */ .min-w-0 { min-width: 0; } /* --- Band colour as a token, not a literal ---------------------------- * * risk_detail.html used to inline band_meta.hex straight out of * intel/contracts.py. Those hexes are the light-theme palette and the chart * colours, so in dark mode a Critical score painted #b3261e on a dark card * (about 2.4:1) directly beside a correctly theme-aware badge - two different * reds for the same band on one screen, and the app's own --risk-* tokens * bypassed entirely. contracts.py keeps its hexes for the offline * case_report.html export, which has no stylesheet to inherit from. */ .is-band-low { --band-color: var(--risk-low); } .is-band-medium { --band-color: var(--risk-medium); } .is-band-high { --band-color: var(--risk-high); } .is-band-critical { --band-color: var(--risk-critical); } .is-band-unknown { --band-color: var(--risk-unknown); } .gauge-value { stroke: var(--band-color, var(--risk-unknown)); } .gauge-score { color: var(--band-color, var(--risk-unknown)); } .band-scale > div { background: var(--band-color, var(--risk-unknown)); opacity: 0.25; } .band-scale > div.is-current { opacity: 1; } /* Insurance for a blocked CDN. Bootstrap's own CSS carries these rules, so they change nothing normally - but when bootstrap.min.css fails to load, the delete dialog in base.html and any queued toast would otherwise render as plain content in the middle of every page. */ .modal { display: none; } .toast:not(.show) { display: none; } /* Score dial. --score (0-100) and --band-color are set inline by the template. */ .risk-gauge { --score: 0; --band-color: var(--risk-unknown); position: relative; width: 148px; height: 148px; border-radius: 50%; background: conic-gradient(var(--band-color) calc(var(--score) * 1%), rgba(148, 163, 184, 0.18) 0); display: grid; place-items: center; } .risk-gauge::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--color-surface); } .risk-gauge__inner { position: relative; z-index: 1; text-align: center; } .risk-gauge__score { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--band-color); } .risk-gauge__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); } /* Data-quality notice. Incomplete coverage must never be mistaken for a clean result, so it is styled as a warning rather than as neutral chrome. */ .coverage-notice { border-inline-start: 3px solid var(--color-warning); background: rgba(245, 158, 11, 0.08); border-radius: var(--radius-sm); padding: 0.6rem 0.85rem; font-size: 0.82rem; } .heuristic-notice { border-inline-start: 3px solid var(--color-text-muted); background: rgba(100, 116, 139, 0.08); border-radius: var(--radius-sm); padding: 0.6rem 0.85rem; font-size: 0.82rem; } .address-mono { font-family: var(--font-mono); font-size: 0.84rem; word-break: break-all; } .pii-masked { font-family: var(--font-mono); letter-spacing: 0.06em; color: var(--color-text-muted); } /* --- Sign-in and other unauthenticated pages ------------ */ .auth-body { min-height: 100vh; margin: 0; background: radial-gradient(1100px 520px at 12% -12%, rgba(37, 99, 235, 0.20), transparent 62%), radial-gradient(900px 460px at 88% 112%, rgba(79, 70, 229, 0.18), transparent 60%), var(--gradient-sidebar); } .auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; } .auth-card { width: 100%; max-width: 412px; padding: 2.25rem; border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-lg); } .auth-brand { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.75rem; } .auth-brand__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--gradient-primary); color: #fff; font-size: 1.3rem; flex: none; } .auth-brand__name { font-size: 0.95rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; } .auth-brand__sub { font-size: 0.72rem; color: var(--color-text-muted); } .auth-footer { margin-top: 1.25rem; text-align: center; font-size: 0.75rem; color: rgba(148, 163, 184, 0.75); } /* --- Metric tiles --------------------------------------- */ .metric-tile { position: relative; height: 100%; } .metric-tile__value { font-size: 1.75rem; font-weight: 800; line-height: 1.1; } .metric-tile__label { font-size: 0.78rem; color: var(--color-text-muted); } /* A metric we cannot honestly compute is shown as unavailable rather than as zero. A fabricated zero on a law-enforcement dashboard reads as "nothing to see", which is the most dangerous thing a missing number can say. */ .metric-tile--unavailable .metric-tile__value { color: var(--color-text-muted); font-size: 1.1rem; font-weight: 600; } .metric-tile__provenance { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); } /* AI-draft output. Set apart from platform findings on purpose: a reader must never mistake generated prose for a deterministic result. */ .copilot-output { padding-inline-start: 0.9rem; border-inline-start: 2px solid var(--color-primary-light); font-size: 0.94rem; } .copilot-output p:last-child { margin-bottom: 0; }