/*
* Velocity Blue — Precision Navigator Design System
* Outomatiko / rentassist_v4
* Synced from: projects/9614636004660503154 / assets/7dd0416fb5e74fb28e331bd7c001fc0a
* Last updated: 2026-03-27
*
* Usage:
*
* This file is ADDITIVE — it does not override the dark theme in app.css.
* All VB tokens live under --vb-* to avoid name collisions.
* Component classes (.ds-card, .ds-btn-primary, etc.) use VB tokens only.
* For full light-mode pages, add class="vb-page" to .
*/
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap");
/* ── VB Token Variables ─────────────────────────────────────────────── */
:root {
--vb-font-headline: "Manrope", sans-serif;
--vb-font-body: "Inter", sans-serif;
/* Primary — Midnight Blue */
--vb-primary: #001a38;
--vb-primary-container: #002e5d;
--vb-primary-fixed: #d5e3ff;
--vb-on-primary: #ffffff;
--vb-on-primary-container: #7497d0;
/* Secondary — Action Blue */
--vb-secondary: #0060a8;
--vb-secondary-container: #47a1ff;
--vb-on-secondary: #ffffff;
--vb-on-secondary-container: #003663;
/* Tertiary — Ignition Orange */
--vb-ignition-orange: #f86a00;
--vb-tertiary-container: #521e00;
--vb-on-tertiary-container: #f86a00;
/* Error */
--vb-error: #ba1a1a;
--vb-error-container: #ffdad6;
--vb-on-error-container: #93000a;
/* Surface Hierarchy */
--vb-surface: #f7f9fc;
--vb-surface-container-lowest: #ffffff;
--vb-surface-container-low: #f2f4f7;
--vb-surface-container: #eceef1;
--vb-surface-container-high: #e6e8eb;
--vb-surface-container-highest: #e0e3e6;
--vb-on-surface: #191c1e;
--vb-on-surface-variant: #43474f;
--vb-outline: #747781;
--vb-outline-variant: #c4c6d1;
/* Semantic */
--vb-cta-gradient: linear-gradient(135deg, #001a38, #002e5d);
--vb-ghost-border: rgba(196, 198, 209, 0.15);
--vb-shadow-card: 0 2px 8px rgba(0, 26, 56, 0.08);
--vb-shadow-modal: 0 12px 48px rgba(0, 26, 56, 0.06);
--vb-shadow-float: 0 8px 32px rgba(0, 26, 56, 0.12);
/* Chips */
--vb-chip-available-bg: #47a1ff;
--vb-chip-available-fg: #003663;
--vb-alert-urgent-bg: #521e00;
--vb-alert-urgent-fg: #f86a00;
/* Corner Radius */
--vb-radius-sm: 0.375rem;
--vb-radius-md: 0.75rem;
--vb-radius-lg: 1rem;
--vb-radius-xl: 1.5rem;
--vb-radius-full: 9999px;
/* Spacing */
--vb-space-1: 0.25rem;
--vb-space-2: 0.5rem;
--vb-space-3: 0.75rem;
--vb-space-4: 1rem;
--vb-space-6: 1.5rem;
--vb-space-8: 2rem;
--vb-space-10: 2.5rem;
--vb-space-12: 3rem;
/* Glassmorphism */
--vb-glass-bg: rgba(255, 255, 255, 0.8);
--vb-glass-blur: blur(24px);
--vb-glass-border: rgba(196, 198, 209, 0.15);
}
/* ── Full Light-Mode Page ───────────────────────────────────────────── */
/* Apply class="vb-page" to for full Velocity Blue light mode */
body.vb-page {
background: var(--vb-surface);
color: var(--vb-on-surface);
font-family: var(--vb-font-body);
}
/* ── Typography Utilities ───────────────────────────────────────────── */
.vb-display-lg {
font-family: var(--vb-font-headline);
font-size: 3.5rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--vb-on-surface);
}
.vb-display-md {
font-family: var(--vb-font-headline);
font-size: 2.75rem;
font-weight: 700;
color: var(--vb-on-surface);
}
.vb-headline-lg {
font-family: var(--vb-font-headline);
font-size: 2rem;
font-weight: 700;
color: var(--vb-on-surface);
}
.vb-headline-md {
font-family: var(--vb-font-headline);
font-size: 1.75rem;
font-weight: 700;
color: var(--vb-on-surface);
}
.vb-headline-sm {
font-family: var(--vb-font-headline);
font-size: 1.5rem;
font-weight: 600;
color: var(--vb-on-surface);
}
.vb-title-lg {
font-family: var(--vb-font-body);
font-size: 1.125rem;
font-weight: 600;
color: var(--vb-on-surface);
}
.vb-title-md {
font-family: var(--vb-font-body);
font-size: 1rem;
font-weight: 600;
color: var(--vb-on-surface);
}
.vb-title-sm {
font-family: var(--vb-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--vb-on-surface);
}
.vb-body-lg {
font-family: var(--vb-font-body);
font-size: 1rem;
font-weight: 400;
color: var(--vb-on-surface);
}
.vb-body-md {
font-family: var(--vb-font-body);
font-size: 0.875rem;
font-weight: 400;
color: var(--vb-on-surface-variant);
}
.vb-label-lg {
font-family: var(--vb-font-body);
font-size: 0.875rem;
font-weight: 500;
}
.vb-label-md {
font-family: var(--vb-font-body);
font-size: 0.75rem;
font-weight: 500;
}
.vb-label-sm {
font-family: var(--vb-font-body);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.04em;
}
/* ── Card ───────────────────────────────────────────────────────────── */
/* surface-container-lowest on surface-container-low — No-Line Rule */
.ds-card {
background: var(--vb-surface-container-lowest);
border-radius: var(--vb-radius-xl);
box-shadow: var(--vb-shadow-card);
border: none;
padding: var(--vb-space-6);
}
.ds-card-section {
background: var(--vb-surface-container-low);
border-radius: var(--vb-radius-xl);
padding: var(--vb-space-6);
}
/* ── KPI / Stat Card ────────────────────────────────────────────────── */
.ds-kpi-card {
background: var(--vb-surface-container-lowest);
border-radius: var(--vb-radius-xl);
box-shadow: var(--vb-shadow-card);
border: none;
padding: var(--vb-space-6);
display: flex;
flex-direction: column;
gap: var(--vb-space-2);
}
.ds-kpi-label {
font-family: var(--vb-font-body);
font-size: 0.75rem;
font-weight: 500;
color: var(--vb-on-surface-variant);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.ds-kpi-value {
font-family: var(--vb-font-headline);
font-size: 2rem;
font-weight: 800;
color: var(--vb-primary);
letter-spacing: -0.02em;
}
.ds-kpi-sub {
font-family: var(--vb-font-body);
font-size: 0.75rem;
font-weight: 400;
color: var(--vb-on-surface-variant);
}
/* ── Buttons ────────────────────────────────────────────────────────── */
.ds-btn-primary {
background: var(--vb-cta-gradient);
color: var(--vb-on-primary);
font-family: var(--vb-font-body);
font-weight: 600;
font-size: 0.875rem;
border: none;
border-radius: var(--vb-radius-md);
padding: var(--vb-space-4) var(--vb-space-8);
cursor: pointer;
transition: opacity 0.2s;
display: inline-flex;
align-items: center;
gap: var(--vb-space-2);
}
.ds-btn-primary:hover {
opacity: 0.9;
}
.ds-btn-secondary {
background: var(--vb-surface-container-high);
color: var(--vb-on-surface);
font-family: var(--vb-font-body);
font-weight: 600;
font-size: 0.875rem;
border: none;
border-radius: var(--vb-radius-md);
padding: var(--vb-space-3) var(--vb-space-6);
cursor: pointer;
transition: background 0.2s;
}
.ds-btn-secondary:hover {
background: var(--vb-surface-container-highest);
}
.ds-btn-ghost {
background: transparent;
color: var(--vb-secondary);
font-family: var(--vb-font-body);
font-weight: 600;
font-size: 0.875rem;
border: 1px solid var(--vb-ghost-border);
border-radius: var(--vb-radius-md);
padding: var(--vb-space-3) var(--vb-space-6);
cursor: pointer;
transition: background 0.2s;
}
.ds-btn-ghost:hover {
background: var(--vb-primary-fixed);
}
/* ── Chips ──────────────────────────────────────────────────────────── */
.ds-chip-available {
background: var(--vb-chip-available-bg);
color: var(--vb-chip-available-fg);
font-family: var(--vb-font-body);
font-size: 0.6875rem;
font-weight: 700;
padding: 0.2rem 0.625rem;
border-radius: var(--vb-radius-full);
display: inline-block;
white-space: nowrap;
}
.ds-chip-urgent {
background: var(--vb-alert-urgent-bg);
color: var(--vb-alert-urgent-fg);
font-family: var(--vb-font-body);
font-size: 0.6875rem;
font-weight: 700;
padding: 0.2rem 0.625rem;
border-radius: var(--vb-radius-full);
display: inline-block;
white-space: nowrap;
}
.ds-chip-active {
background: var(--vb-secondary-container);
color: var(--vb-on-secondary-container);
font-family: var(--vb-font-body);
font-size: 0.6875rem;
font-weight: 700;
padding: 0.2rem 0.625rem;
border-radius: var(--vb-radius-full);
display: inline-block;
white-space: nowrap;
}
.ds-chip-neutral {
background: var(--vb-surface-container-high);
color: var(--vb-on-surface-variant);
font-family: var(--vb-font-body);
font-size: 0.6875rem;
font-weight: 600;
padding: 0.2rem 0.625rem;
border-radius: var(--vb-radius-full);
display: inline-block;
white-space: nowrap;
}
/* ── Text Input ─────────────────────────────────────────────────────── */
.ds-input {
background: var(--vb-surface-container-lowest);
border: 1px solid var(--vb-ghost-border);
border-radius: var(--vb-radius-md);
color: var(--vb-on-surface);
font-family: var(--vb-font-body);
font-size: 0.875rem;
padding: var(--vb-space-3) var(--vb-space-4);
transition:
background 0.2s,
border-color 0.2s;
outline: none;
width: 100%;
}
.ds-input:focus {
background: rgba(213, 227, 255, 0.1);
border-color: var(--vb-secondary);
}
.ds-input::placeholder {
color: var(--vb-on-surface-variant);
opacity: 0.6;
}
.ds-input-group {
display: flex;
flex-direction: column;
gap: var(--vb-space-1);
}
.ds-input-label {
font-family: var(--vb-font-body);
font-size: 0.75rem;
font-weight: 500;
color: var(--vb-on-surface-variant);
}
/* ── Select ─────────────────────────────────────────────────────────── */
.ds-select {
background: var(--vb-surface-container-lowest);
border: 1px solid var(--vb-ghost-border);
border-radius: var(--vb-radius-md);
color: var(--vb-on-surface);
font-family: var(--vb-font-body);
font-size: 0.875rem;
padding: var(--vb-space-3) var(--vb-space-4);
outline: none;
cursor: pointer;
width: 100%;
}
.ds-select:focus {
border-color: var(--vb-secondary);
}
/* ── Glass Panel ────────────────────────────────────────────────────── */
.ds-glass {
background: var(--vb-glass-bg);
backdrop-filter: var(--vb-glass-blur);
-webkit-backdrop-filter: var(--vb-glass-blur);
border: 1px solid var(--vb-glass-border);
border-radius: var(--vb-radius-xl);
}
/* ── Status Bar (Rental Tracker) ────────────────────────────────────── */
.ds-status-bar {
height: 8px;
border-radius: var(--vb-radius-full);
background: var(--vb-surface-container-high);
overflow: hidden;
}
.ds-status-bar-fill {
height: 100%;
border-radius: var(--vb-radius-full);
transition: width 0.4s ease;
}
.ds-status-bar-fill-active {
background: var(--vb-secondary);
}
.ds-status-bar-fill-overdue {
background: var(--vb-tertiary-container);
}
.ds-status-bar-fill-available {
background: var(--vb-chip-available-bg);
}
/* ── Table ──────────────────────────────────────────────────────────── */
.ds-table {
width: 100%;
border-collapse: collapse;
font-family: var(--vb-font-body);
font-size: 0.875rem;
}
.ds-table thead th {
background: var(--vb-surface-container-low);
color: var(--vb-on-surface-variant);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: var(--vb-space-3) var(--vb-space-4);
text-align: left;
border: none;
}
.ds-table thead th:first-child {
border-radius: var(--vb-radius-md) 0 0 var(--vb-radius-md);
}
.ds-table thead th:last-child {
border-radius: 0 var(--vb-radius-md) var(--vb-radius-md) 0;
}
.ds-table tbody tr {
border-bottom: none;
transition: background 0.15s;
}
.ds-table tbody tr:hover {
background: var(--vb-surface-container-low);
}
.ds-table tbody td {
padding: var(--vb-space-3) var(--vb-space-4);
color: var(--vb-on-surface);
border: none;
vertical-align: middle;
}
/* ── Nav Sidebar (VB flavour) ───────────────────────────────────────── */
.ds-nav {
background: var(--vb-primary);
display: flex;
flex-direction: column;
gap: var(--vb-space-1);
padding: var(--vb-space-6) var(--vb-space-4);
}
.ds-nav-item {
display: flex;
align-items: center;
gap: var(--vb-space-3);
padding: var(--vb-space-3) var(--vb-space-4);
border-radius: var(--vb-radius-md);
color: rgba(255, 255, 255, 0.65);
font-family: var(--vb-font-body);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition:
background 0.15s,
color 0.15s;
text-decoration: none;
}
.ds-nav-item:hover,
.ds-nav-item.active {
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
}
/* ── Page Header ────────────────────────────────────────────────────── */
.ds-page-header {
padding: var(--vb-space-10) var(--vb-space-10) var(--vb-space-6);
background: var(--vb-surface-container-low);
}
.ds-page-header-title {
font-family: var(--vb-font-headline);
font-size: 1.75rem;
font-weight: 700;
color: var(--vb-primary);
}
.ds-page-header-sub {
font-family: var(--vb-font-body);
font-size: 0.875rem;
color: var(--vb-on-surface-variant);
margin-top: var(--vb-space-1);
}
/* ── Section Label ──────────────────────────────────────────────────── */
.ds-section-label {
font-family: var(--vb-font-body);
font-size: 0.6875rem;
font-weight: 600;
color: var(--vb-on-surface-variant);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: var(--vb-space-3);
}
/* ── Divider (background shift — No-Line Rule) ──────────────────────── */
/* Use margin + background change instead of
. */
/* Ghost divider allowed only for accessibility contexts: */
.ds-divider {
height: 1px;
background: var(--vb-ghost-border);
border: none;
margin: var(--vb-space-4) 0;
}
/* ── Alert Banner ───────────────────────────────────────────────────── */
.ds-alert {
border-radius: var(--vb-radius-md);
padding: var(--vb-space-3) var(--vb-space-4);
font-family: var(--vb-font-body);
font-size: 0.875rem;
}
.ds-alert-error {
background: var(--vb-error-container);
color: var(--vb-on-error-container);
}
.ds-alert-urgent {
background: var(--vb-tertiary-container);
color: var(--vb-on-tertiary-container);
}
.ds-alert-info {
background: var(--vb-primary-fixed);
color: var(--vb-primary);
}
/* ── Responsive Grid Utilities ──────────────────────────────────────── */
.ds-grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--vb-space-4);
}
.ds-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--vb-space-4);
}
.ds-grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--vb-space-4);
}
@media (max-width: 900px) {
.ds-grid-4 {
grid-template-columns: repeat(2, 1fr);
}
.ds-grid-3 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.ds-grid-4,
.ds-grid-3,
.ds-grid-2 {
grid-template-columns: 1fr;
}
}