/* SkillVerify theme — Connection Inc. design system (Trent spec v1.1). Brand "chrome" is themeable via data-theme on (slate / green / graphite); the emerald verification green is a CONSTANT semantic signal — verified/pass only, never used as chrome. Default theme is GREEN (the shipping direction). */ :root { /* Semantic verification green — constant across every theme (verified/pass only) */ --sv-verify: #1E9E57; --sv-verify-ink: #136A3A; --sv-verify-wash: #E8F5ED; --sv-verify-line: #BFE4CC; /* Shared neutrals */ --sv-ink: #1A1D21; --sv-ink-2: #5A626C; --sv-ink-3: #8A929C; --sv-line: #E4E7EB; --sv-surface: #FFFFFF; /* Radii */ --sv-r: 14px; --sv-r-sm: 9px; /* Default chrome = GREEN (logo olive, shipping direction) */ --sv-chrome: #60902A; --sv-chrome-rgb: 96, 144, 42; --sv-chrome-deep: #3F5F1C; --sv-chrome-wash: #EFF4EA; --sv-chrome-line: #D6E2C8; --sv-canvas: #F8FAF5; } /* Themeable brand chrome — set data-theme on */ [data-theme="slate"] { --sv-chrome: #2C3A52; --sv-chrome-rgb: 44, 58, 82; --sv-chrome-deep: #1C2738; --sv-chrome-wash: #EDF1F6; --sv-chrome-line: #D6DEEA; --sv-canvas: #F6F8FA; } [data-theme="green"] { --sv-chrome: #60902A; --sv-chrome-rgb: 96, 144, 42; --sv-chrome-deep: #3F5F1C; --sv-chrome-wash: #EFF4EA; --sv-chrome-line: #D6E2C8; --sv-canvas: #F8FAF5; } [data-theme="graphite"] { --sv-chrome: #2B2F36; --sv-chrome-rgb: 43, 47, 54; --sv-chrome-deep: #15181D; --sv-chrome-wash: #ECEDEF; --sv-chrome-line: #D4D7DB; --sv-canvas: #F4F5F6; } /* ---- Map Bootstrap to the design tokens ---- */ :root { --bs-primary: var(--sv-chrome); --bs-primary-rgb: var(--sv-chrome-rgb); --bs-success: var(--sv-verify); --bs-success-rgb: 30, 158, 87; --bs-body-color: var(--sv-ink); --bs-border-color: var(--sv-line); --bs-link-color: var(--sv-chrome); --bs-link-color-rgb: var(--sv-chrome-rgb); --bs-link-hover-color: var(--sv-chrome-deep); } body { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--sv-ink); background: var(--sv-canvas); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .navbar-brand, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-family: "Space Grotesk", Inter, system-ui, sans-serif; letter-spacing: -0.015em; } .fw-black { font-weight: 700; } .text-white-75 { color: rgba(255, 255, 255, .75); } /* JetBrains Mono — the credential / data-line motif */ .text-mono, .sv-mono, code, kbd { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; } a { text-decoration: none; } /* ---- Buttons ---- */ .btn { border-radius: var(--sv-r-sm); } .btn-primary { --bs-btn-bg: var(--sv-chrome); --bs-btn-border-color: var(--sv-chrome); --bs-btn-hover-bg: var(--sv-chrome-deep); --bs-btn-hover-border-color: var(--sv-chrome-deep); --bs-btn-active-bg: var(--sv-chrome-deep); --bs-btn-active-border-color: var(--sv-chrome-deep); --bs-btn-disabled-bg: var(--sv-chrome); --bs-btn-disabled-border-color: var(--sv-chrome); } .btn-outline-primary { --bs-btn-color: var(--sv-chrome); --bs-btn-border-color: var(--sv-chrome); --bs-btn-hover-bg: var(--sv-chrome); --bs-btn-hover-border-color: var(--sv-chrome); --bs-btn-active-bg: var(--sv-chrome); --bs-btn-active-border-color: var(--sv-chrome); } .btn-success { --bs-btn-bg: var(--sv-verify); --bs-btn-border-color: var(--sv-verify); --bs-btn-hover-bg: var(--sv-verify-ink); --bs-btn-hover-border-color: var(--sv-verify-ink); } .text-primary { color: var(--sv-chrome) !important; } .bg-primary { background-color: var(--sv-chrome) !important; } .text-success, .text-verify { color: var(--sv-verify) !important; } .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: rgba(var(--sv-chrome-rgb), .45); box-shadow: 0 0 0 .25rem rgba(var(--sv-chrome-rgb), .16); } .form-check-input:checked { background-color: var(--sv-chrome); border-color: var(--sv-chrome); } /* Verified pill — the one place the emerald belongs */ .sv-verified { display: inline-flex; align-items: center; gap: .35rem; color: var(--sv-verify-ink); background: var(--sv-verify-wash); border: 1px solid var(--sv-verify-line); border-radius: 999px; padding: .15rem .55rem; font-size: .8rem; font-weight: 600; } /* ---- App shell ---- */ .sv-app { background: var(--sv-canvas); } .sv-sidebar { width: 17rem; background: linear-gradient(180deg, var(--sv-chrome-deep), #14171b); box-shadow: 0 1rem 3rem rgba(15, 23, 42, .18); } @media (min-width: 992px) { .sv-sidebar { position: fixed; inset: 0 auto 0 0; transform: none !important; visibility: visible !important; } .sv-content { margin-left: 17rem; min-width: 0; transition: margin-left .18s ease; } body.sv-sidebar-collapsed .sv-sidebar { width: 5.5rem; } body.sv-sidebar-collapsed .sv-content { margin-left: 5.5rem; } body.sv-sidebar-collapsed .sv-sidebar .nav-link span, body.sv-sidebar-collapsed .sv-sidebar .small, body.sv-sidebar-collapsed .sv-sidebar-collapse { display: none !important; } } .sv-sidebar-logo { width: 8.75rem; height: auto; filter: brightness(0) invert(1); } .sv-sidebar .nav-link { color: rgba(255, 255, 255, .74); border-radius: .7rem; display: flex; align-items: center; gap: .75rem; font-weight: 600; padding: .72rem .8rem; } .sv-sidebar .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .10); } .sv-sidebar .nav-link.active { background: var(--sv-chrome); color: #fff; box-shadow: 0 .6rem 1.3rem rgba(var(--sv-chrome-rgb), .45); } /* graphite's chrome is near-black → give the active pill contrast on the dark rail */ [data-theme="graphite"] .sv-sidebar .nav-link.active { background: #4a515b; box-shadow: none; } .sv-topbar { min-height: 4.5rem; box-shadow: 0 .125rem .75rem rgba(15, 23, 42, .04); } .sv-avatar { width: 2rem; height: 2rem; border-radius: 50%; display: inline-grid; place-items: center; background: var(--sv-chrome-wash); color: var(--sv-chrome-deep); } /* ---- Cards / tables ---- */ .card { border-color: rgba(15, 23, 42, .08); border-radius: var(--sv-r); box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .035); } .card-header { background: rgba(255, 255, 255, .75); border-color: rgba(15, 23, 42, .08); border-top-left-radius: var(--sv-r) !important; border-top-right-radius: var(--sv-r) !important; } .sv-stat-card { transition: transform .16s ease, box-shadow .16s ease; } .sv-stat-card:hover { transform: translateY(-2px); box-shadow: 0 .8rem 1.8rem rgba(15, 23, 42, .08); } .sv-stat-icon { width: 3.25rem; height: 3.25rem; border-radius: var(--sv-r-sm); display: inline-grid; place-items: center; font-size: 1.35rem; } .table > :not(caption) > * > * { padding: .9rem 1rem; } .table thead th { color: var(--sv-ink); font-size: .82rem; background: var(--sv-chrome-wash); } .badge { font-weight: 700; } .progress { height: .5rem; background: #e9eef5; } .progress-bar { background-color: var(--sv-chrome); } .page-link { color: var(--sv-chrome); } .page-item.active .page-link { background-color: var(--sv-chrome); border-color: var(--sv-chrome); } .sv-search { max-width: 28rem; } /* ---- Auth / login (chrome gradient) ---- */ .sv-login { background: radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .12), transparent 22%), linear-gradient(135deg, var(--sv-chrome), var(--sv-chrome-deep)); overflow: hidden; position: relative; } .sv-login:before, .sv-login:after { content: ""; position: absolute; border-radius: 50%; border: 5rem solid rgba(255, 255, 255, .07); pointer-events: none; } .sv-login:before { width: 28rem; height: 28rem; left: -12rem; top: -10rem; } .sv-login:after { width: 34rem; height: 34rem; right: -14rem; bottom: -16rem; } .sv-login > .container { position: relative; z-index: 1; } .sv-login-logo { max-width: 15rem; filter: brightness(0) invert(1); } .sv-card-logo { max-width: 13rem; } .sv-login-card { backdrop-filter: blur(12px); }