/* =============================================================================
GHEYS BRAND -- Design System
-----------------------------------------------------------------------------
Single source of truth for all visual styling across Gheys applications.
Changing this file updates the entire application theme.
How to use in a new project:
1. Link this file before your app-specific CSS:
2. Use CSS variables in your own styles (e.g. color: var(--accent))
3. Bootstrap overrides at the bottom make Bootstrap components match.
4. Load fonts in for full fidelity:
File structure:
1. Design Tokens -- all variables
2. Typography -- base, headings, links, code
3. Buttons -- primary, navy, outline, sizes
4. Forms -- inputs, selects, labels
5. Cards -- card, card-header, stat-card
6. Tables -- th, td, hover
7. Badges -- all variants
8. Alerts -- all variants
9. Modals -- container, header, body, footer
10. Bootstrap overrides -- bring Bootstrap in line with brand
============================================================================= */
/* =============================================================================
1. DESIGN TOKENS
============================================================================= */
:root {
/* -- Gheys blauw (primair -- buttons, links, focus rings) -------------- */
--color-primary: #005f9e;
--color-primary-dark: #004a7c;
--color-primary-darker: #003a61;
--color-primary-light: #e0eef7;
--color-primary-rgb: 0, 95, 158;
/* -- Gheys rood (brand accent -- logo, hero, decoratief) --------------- */
--color-red: #d10a11;
--color-red-dark: #a8080e;
--color-red-light: #fde8e8;
/* -- Navy (donkere achtergronden, sidebar, hero) ----------------------- */
--color-navy: #0b2846;
--color-navy-mid: #163d67;
--color-navy-light: #1e4f82;
/* -- Semantisch -------------------------------------------------------- */
--color-success: #22c55e;
--color-success-bg: #dcfce7;
--color-success-text: #15803d;
--color-danger: #ef4444;
--color-danger-bg: #fee2e2;
--color-danger-text: #b91c1c;
--color-warning: #f59e0b;
--color-warning-bg: #fef9c3;
--color-warning-text: #92400e;
--color-info-bg: #e0eef7;
--color-info-text: #004a7c;
/* -- Neutraal ---------------------------------------------------------- */
--color-bg: #f4f6f8;
--color-surface: #ffffff;
--color-surface-muted: #f8fafc;
--color-border: #dde3e8;
--color-border-light: #eef1f4;
--color-text: #1a1a2e;
--color-text-muted: #666666;
--color-text-faint: #9ca3af;
/* -- Typografie -------------------------------------------------------- */
--font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-family-heading: 'Titillium Web', 'Nunito Sans', sans-serif;
--font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
--font-size-base: 15px;
--font-size-sm: .8rem;
--font-size-xs: .72rem;
--font-size-lg: 1rem;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* -- Spacing ----------------------------------------------------------- */
--space-1: .25rem;
--space-2: .5rem;
--space-3: .75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
/* -- Border radius ----------------------------------------------------- */
--radius-sm: 4px;
--radius-base: 6px;
--radius-md: 8px;
--radius-lg: 10px;
--radius-xl: 14px;
--radius-pill: 99px;
/* -- Shadows ----------------------------------------------------------- */
--shadow-sm: 0 1px 3px rgba(0,0,0,.07);
--shadow-md: 0 4px 14px rgba(0,0,0,.09);
--shadow-lg: 0 20px 60px rgba(0,0,0,.18);
/* -- Transition -------------------------------------------------------- */
--transition: all .15s ease;
/* -- Convenience aliases ----------------------------------------------- */
--accent: var(--color-primary);
--accent-dark: var(--color-primary-dark);
--accent-light: var(--color-primary-light);
--bg: var(--color-bg);
--surface: var(--color-surface);
--border: var(--color-border);
--text: var(--color-text);
--muted: var(--color-text-muted);
--success: var(--color-success);
--danger: var(--color-danger);
--warning: var(--color-warning);
}
/* =============================================================================
2. TYPOGRAPHY
============================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body {
font-family: var(--font-family);
font-size: var(--font-size-base);
color: var(--color-text);
background: var(--color-bg);
height: 100%;
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-heading);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
margin-bottom: var(--space-2);
letter-spacing: .01em;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; }
h5 { font-size: .95rem; }
h6 { font-size: .85rem; }
p { margin-bottom: var(--space-3); line-height: 1.65; }
a {
color: var(--color-primary);
text-decoration: none;
transition: var(--transition);
}
a:hover { color: var(--color-primary-dark); }
code {
font-family: var(--font-family-mono);
font-size: .8em;
background: var(--color-primary-light);
color: var(--color-primary-dark);
padding: .1em .35em;
border-radius: var(--radius-sm);
}
pre {
font-family: var(--font-family-mono);
font-size: .8rem;
border-radius: var(--radius-md);
background: var(--color-navy);
color: #e2e8f0;
padding: var(--space-4);
overflow-x: auto;
}
small, .text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.text-muted { color: var(--color-text-muted) !important; }
.text-faint { color: var(--color-text-faint); }
.text-accent { color: var(--color-primary); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
/* =============================================================================
3. BUTTONS
Usage:
============================================================================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
font-family: var(--font-family);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
letter-spacing: .03em;
text-transform: uppercase;
line-height: 1.4;
border-radius: var(--radius-base);
padding: .5rem 1rem;
border: 1px solid transparent;
cursor: pointer;
transition: var(--transition);
text-decoration: none;
white-space: nowrap;
}
.btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .25);
}
/* Sizes */
.btn-lg { padding: .65rem 1.3rem; font-size: .85rem; }
.btn-sm { padding: .3rem .7rem; font-size: .7rem; }
/* Primary blue */
.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: var(--color-primary);
--bs-btn-border-color: var(--color-primary);
--bs-btn-hover-bg: var(--color-primary-dark);
--bs-btn-hover-border-color: var(--color-primary-dark);
--bs-btn-active-bg: var(--color-primary-darker);
background-color: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
.btn-primary:hover { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.btn-primary:active { background-color: var(--color-primary-darker); }
/* Navy */
.btn-navy {
background-color: var(--color-navy);
border-color: var(--color-navy);
color: #fff;
}
.btn-navy:hover { background-color: var(--color-navy-mid); border-color: var(--color-navy-mid); color: #fff; }
/* Outline primary */
.btn-outline-primary {
--bs-btn-color: var(--color-primary);
--bs-btn-border-color: var(--color-primary);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: var(--color-primary);
color: var(--color-primary);
border-color: var(--color-primary);
background: transparent;
}
.btn-outline-primary:hover { background-color: var(--color-primary); color: #fff; }
/* Outline secondary */
.btn-outline-secondary {
color: var(--color-text-muted);
border-color: var(--color-border);
background: transparent;
}
.btn-outline-secondary:hover { background: var(--color-surface-muted); color: var(--color-text); }
/* Danger */
.btn-danger {
background-color: var(--color-danger);
border-color: var(--color-danger);
color: #fff;
}
.btn-danger:hover { background-color: #dc2626; color: #fff; }
/* =============================================================================
4. FORMS
Usage:
============================================================================= */
.form-control, .form-select {
font-family: var(--font-family);
font-size: .88rem;
color: var(--color-text);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-base);
padding: .5rem .75rem;
transition: border-color .15s, box-shadow .15s;
width: 100%;
}
.form-control:focus, .form-select:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .15);
outline: none;
}
.form-control::placeholder { color: var(--color-text-faint); }
.form-control-sm, .form-select-sm {
font-size: .8rem;
padding: .3rem .6rem;
border-radius: var(--radius-sm);
}
.form-label {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
margin-bottom: .35rem;
}
.form-text { font-size: .75rem; color: var(--color-text-muted); margin-top: .25rem; }
textarea.form-control { resize: vertical; }
/* Validation */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--color-success); }
.invalid { outline: 1px solid var(--color-danger); }
.validation-message { color: var(--color-danger); font-size: .78rem; margin-top: .2rem; }
/* =============================================================================
5. CARDS
Usage:
...
(rode top border)
============================================================================= */
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
/* Rode accent top border -- voor prominente secties */
.card-accent { border-top: 3px solid var(--color-primary); }
.card-header {
background: transparent;
border-bottom: 1px solid var(--color-border);
padding: .6rem 1rem;
font-family: var(--font-family-heading);
font-size: .82rem;
font-weight: var(--font-weight-semibold);
letter-spacing: .02em;
}
.card-body { padding: .9rem 1rem; }
.card-footer {
background: transparent;
border-top: 1px solid var(--color-border);
padding: .6rem 1rem;
}
/* Stat card -- dashboard widgets */
.stat-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: .55rem .85rem;
display: flex;
align-items: center;
gap: .6rem;
transition: var(--transition);
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-card .stat-icon {
width: 28px; height: 28px;
border-radius: var(--radius-base);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.stat-card .stat-value {
font-family: var(--font-family-heading);
font-size: 1.15rem;
font-weight: var(--font-weight-bold);
line-height: 1;
margin-bottom: .1rem;
}
.stat-card .stat-label {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: .05em;
}
/* Dashboard stat cards — gekleurde teller-kaarten (bv. OrdersMain) */
.dashboard-card { border: 0; color: #fff; }
.dashboard-card .card-header { background: transparent; border-bottom: 0; padding: 1.25rem 1.5rem; }
.dashboard-card .card-footer {
background: rgba(0,0,0,.13);
border-top: 0;
color: #fff;
text-decoration: none;
font-size: var(--font-size-sm);
transition: var(--transition);
}
.dashboard-card .card-footer:hover { background: rgba(0,0,0,.24); color: #fff; }
.dashboard-card .dashboard-amount {
font-family: var(--font-family-heading);
font-size: 2.25rem;
font-weight: 700;
line-height: 1.1;
}
.dashboard-primary { background: var(--color-primary); }
.dashboard-success { background: var(--color-success); }
.dashboard-danger { background: var(--color-danger); }
.dashboard-navy { background: var(--color-navy); }
.dashboard-red { background: var(--color-red); }
.dashboard-info { background: var(--color-navy-mid); }
.dashboard-warning { background: var(--color-warning); color: var(--color-text) !important; }
.dashboard-warning .card-footer { color: var(--color-text) !important; }
.dashboard-warning .card-footer:hover { background: rgba(0,0,0,.12); color: var(--color-text) !important; }
.dashboard-muted { background: var(--color-text-muted); }
/* Pagination */
.pagination .page-link { color: var(--color-primary); border-color: var(--color-border); font-size: var(--font-size-sm); padding: .4rem .7rem; background: var(--color-surface); transition: var(--transition); }
.pagination .page-link:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }
.pagination .page-item.active .page-link { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pagination .page-item.disabled .page-link { color: var(--color-text-faint); background: var(--color-surface-muted); border-color: var(--color-border); }
/* Step wizard */
.step-wizard { display: flex; align-items: center; padding: .75rem 0; }
.step-wizard-item { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--color-border); color: var(--color-text-muted); font-family: var(--font-family-heading); font-weight: 700; font-size: .85rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: var(--transition); }
.step-label { font-family: var(--font-family-heading); font-size: .8rem; font-weight: 600; color: var(--color-text-muted); line-height: 1.2; }
.step-label small { display: block; font-size: .7rem; font-weight: 400; color: var(--color-text-faint); }
.step-wizard-item.active .step-num { background: var(--color-primary); color: #fff; }
.step-wizard-item.active .step-label { color: var(--color-primary); }
.step-wizard-item.done .step-num { background: var(--color-success); color: #fff; }
.step-connector { flex: 1; height: 2px; background: var(--color-border); margin: 0 .75rem; min-width: 2rem; }
.step-connector.done { background: var(--color-success); }
/* =============================================================================
6. TABLES
Usage:
============================================================================= */
.table {
font-size: .85rem;
border-collapse: separate;
border-spacing: 0;
width: 100%;
}
.table th {
font-family: var(--font-family-heading);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: .08em;
color: var(--color-text-muted);
background: var(--color-surface-muted);
padding: .65rem .9rem;
border-bottom: 2px solid var(--color-primary);
white-space: nowrap;
}
.table td {
padding: .7rem .9rem;
border-bottom: 1px solid var(--color-border-light);
vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table-hover tbody tr:hover { background: var(--color-primary-light); }
.table-sm th, .table-sm td { padding: .45rem .7rem; }
/* =============================================================================
7. BADGES
Usage: Done
============================================================================= */
.badge {
display: inline-flex;
align-items: center;
font-size: .68rem;
font-weight: var(--font-weight-semibold);
padding: .3em .65em;
border-radius: var(--radius-sm);
letter-spacing: .04em;
text-transform: uppercase;
white-space: nowrap;
line-height: 1;
}
.badge-primary { background: var(--color-primary-light); color: var(--color-primary-dark); }
.badge-navy { background: #e8f0f8; color: var(--color-navy); }
.badge-blue { background: var(--color-primary-light); color: var(--color-primary-dark); }
.badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-danger { background: var(--color-danger-bg); color: var(--color-danger-text); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-info { background: var(--color-info-bg); color: var(--color-info-text); }
.badge-secondary { background: #f1f5f9; color: #64748b; }
/* =============================================================================
8. ALERTS
Usage: Er is iets fout gegaan.
============================================================================= */
.alert {
border-radius: var(--radius-md);
font-size: .83rem;
border-left: 3px solid;
padding: .75rem 1rem;
line-height: 1.5;
}
.alert-success { background: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success); }
.alert-danger { background: var(--color-danger-bg); color: var(--color-danger-text); border-color: var(--color-danger); }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: var(--color-warning); }
.alert-info { background: var(--color-info-bg); color: var(--color-info-text); border-color: var(--color-primary); }
/* =============================================================================
9. MODALS
============================================================================= */
.modal { animation: gheys-fadeIn .15s ease; }
.modal-content {
border-radius: var(--radius-xl);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.modal-header {
background: var(--color-navy);
padding: 1.1rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-title {
font-family: var(--font-family-heading);
font-size: 1rem;
font-weight: var(--font-weight-semibold);
letter-spacing: .03em;
color: #fff;
margin: 0;
}
.modal-body { padding: 1.5rem; }
.modal-footer {
border-top: 1px solid var(--color-border);
padding: 1rem 1.5rem;
gap: .5rem;
}
/* =============================================================================
10. LOGO UTILITIES
Usage: 
(CSS filter)
============================================================================= */
/* Force any logo to white -- for colored/dark backgrounds */
.logo-white { filter: brightness(0) invert(1); }
/* Force any logo to the brand navy -- for light backgrounds */
.logo-navy { filter: brightness(0) saturate(100%) invert(12%) sepia(50%) saturate(800%) hue-rotate(185deg); }
/* Force any logo to pure black */
.logo-dark { filter: brightness(0); }
/* Standard size helpers */
.logo-sm { height: 28px; width: auto; }
.logo-md { height: 40px; width: auto; }
.logo-lg { height: 64px; width: auto; }
.logo-xl { height: 100px; width: auto; }
/* =============================================================================
11. BRAND HERO
Usage:
GHEYS
Handling your plastics
============================================================================= */
.brand-hero {
position: relative;
min-height: 320px;
display: flex;
align-items: center;
overflow: hidden;
background-color: var(--color-navy);
background-image: var(--hero-img, none);
background-size: cover;
background-position: center;
}
/* Gradient overlay: navy links, doorzichtig rechts */
.brand-hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
105deg,
rgba(11, 40, 70, 0.92) 0%,
rgba(11, 40, 70, 0.75) 40%,
rgba(0, 95, 158, 0.45) 70%,
rgba(11, 40, 70, 0.25) 100%
);
z-index: 1;
}
/* Subtiele rode decoratieve lijn links */
.brand-hero::after {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--color-red);
z-index: 2;
}
.brand-hero-inner {
position: relative;
z-index: 3;
padding: 2.5rem 3rem;
max-width: 600px;
}
.brand-hero-logo {
display: block;
margin-bottom: 1.25rem;
opacity: .95;
}
.brand-hero-title {
font-family: var(--font-family-heading);
font-size: 2.4rem;
font-weight: 700;
color: #fff;
letter-spacing: .06em;
margin: 0 0 .4rem;
line-height: 1.1;
text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.brand-hero-sub {
font-family: var(--font-family-heading);
font-size: .85rem;
color: rgba(255, 255, 255, .65);
letter-spacing: .15em;
text-transform: uppercase;
margin: 0 0 1.5rem;
}
.brand-hero-title .hero-accent { color: var(--color-red); }
/* Size variants */
.brand-hero-sm { min-height: 180px; }
.brand-hero-lg { min-height: 480px; }
/* =============================================================================
12. BOOTSTRAP OVERRIDES
============================================================================= */
:root {
--bs-primary: var(--color-primary);
--bs-primary-rgb: var(--color-primary-rgb);
--bs-link-color: var(--color-primary);
--bs-link-color-rgb: var(--color-primary-rgb);
--bs-link-hover-color: var(--color-primary-dark);
--bs-border-radius: var(--radius-base);
--bs-border-color: var(--color-border);
--bs-body-font-family: var(--font-family);
--bs-body-font-size: var(--font-size-base);
--bs-body-color: var(--color-text);
--bs-body-bg: var(--color-bg);
}
/* Animations */
@keyframes gheys-fadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
.fade-in { animation: gheys-fadeIn .2s ease; }