/**
* sadc-design-system.css
* SADC Brand Design System
* Primary Palette:
* Reflex Blue — PANTONE Reflex Blue CVC — #001C84
* Green — PANTONE 354 CVC — #00B551
* Gold — PANTONE 11 C — #FFD700
*
* Usage: Include in BEFORE any page-specific styles.
*
*/
/* ═══════════════════════════════════════════════════════════════════════════
CSS CUSTOM PROPERTIES (Design Tokens)
═══════════════════════════════════════════════════════════════════════════ */
:root {
/* ── Brand colours ───────────────────────────────────────────────────── */
--sadc-blue: #001C84; /* PANTONE Reflex Blue CVC — primary */
--sadc-blue-light: #0028B8; /* Hover / interactive states */
--sadc-blue-pale: #E8EBF8; /* Backgrounds, selected rows */
--sadc-blue-dark: #001060; /* Active states, pressed buttons */
--sadc-green: #00B551; /* PANTONE 354 CVC — success / confirm */
--sadc-green-light: #00D460; /* Hover on green elements */
--sadc-green-pale: #E6F9EE; /* Success alert backgrounds */
--sadc-green-dark: #008A3D; /* Active green */
--sadc-gold: #FFD700; /* PANTONE 11 C — accent / highlight */
--sadc-gold-light: #FFE44D; /* Hover on gold elements */
--sadc-gold-pale: #FFFBE6; /* Warning backgrounds */
--sadc-gold-dark: #C9A900; /* Active gold / text on white */
/* ── Neutrals ────────────────────────────────────────────────────────── */
--sadc-white: #FFFFFF;
--sadc-off-white: #F5F6FA;
--sadc-border: #D0D5E8;
--sadc-border-focus: #001C84;
--sadc-text-primary: #0D1240;
--sadc-text-secondary:#4A5080;
--sadc-text-muted: #8890B0;
--sadc-text-on-blue: #FFFFFF;
--sadc-text-on-gold: #001C84;
/* ── Semantic colours ────────────────────────────────────────────────── */
--sadc-danger: #D32F2F;
--sadc-danger-pale: #FFEBEE;
--sadc-warning: #FFD700;
--sadc-warning-pale: #FFFBE6;
--sadc-success: #00B551;
--sadc-success-pale: #E6F9EE;
--sadc-info: #001C84;
--sadc-info-pale: #E8EBF8;
/* ── Spacing scale ───────────────────────────────────────────────────── */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
/* ── Typography ──────────────────────────────────────────────────────── */
--font-heading: 'Barlow Condensed', 'Trebuchet MS', sans-serif;
--font-body: 'Source Sans 3', 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'Courier New', monospace;
/* ── Radii & shadows ─────────────────────────────────────────────────── */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-pill: 999px;
--shadow-sm: 0 1px 3px rgba(0,28,132,0.08), 0 1px 2px rgba(0,28,132,0.06);
--shadow-md: 0 4px 12px rgba(0,28,132,0.12), 0 2px 4px rgba(0,28,132,0.08);
--shadow-lg: 0 8px 24px rgba(0,28,132,0.16), 0 4px 8px rgba(0,28,132,0.10);
--shadow-focus:0 0 0 3px rgba(0,28,132,0.20);
/* ── Transitions ─────────────────────────────────────────────────────── */
--transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ═══════════════════════════════════════════════════════════════════════════
BASE RESET (scoped to .sadc- components)
═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
/* ═══════════════════════════════════════════════════════════════════════════
FORM CARD WRAPPER
Usage: ...
═══════════════════════════════════════════════════════════════════════════ */
.sadc-form-card {
background: var(--sadc-white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
border: 1px solid var(--sadc-border);
overflow: hidden;
}
.sadc-form-card__header {
background: var(--sadc-blue);
padding: var(--space-lg) var(--space-xl);
border-bottom: 3px solid var(--sadc-gold);
display: flex;
align-items: center;
gap: var(--space-md);
}
.sadc-form-card__header-icon {
width: 40px;
height: 40px;
background: rgba(255,215,0,0.15);
border: 1px solid rgba(255,215,0,0.3);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
color: var(--sadc-gold);
font-size: 18px;
flex-shrink: 0;
}
.sadc-form-card__title {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 600;
letter-spacing:0.5px;
color: var(--sadc-white);
margin: 0;
text-transform:uppercase;
}
.sadc-form-card__subtitle {
font-family: var(--font-body);
font-size: 13px;
color: rgba(255,255,255,0.65);
margin: 2px 0 0;
}
.sadc-form-card__body {
padding: var(--space-xl);
}
.sadc-form-card__footer {
padding: var(--space-lg) var(--space-xl);
background: var(--sadc-off-white);
border-top: 1px solid var(--sadc-border);
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-sm);
}
/* ═══════════════════════════════════════════════════════════════════════════
FORM SECTIONS (grouped fieldsets)
═══════════════════════════════════════════════════════════════════════════ */
.sadc-form-section {
margin-bottom: var(--space-xl);
}
.sadc-form-section__title {
font-family: var(--font-heading);
font-size: 13px;
font-weight: 700;
letter-spacing:1.5px;
text-transform:uppercase;
color: var(--sadc-blue);
padding-bottom:var(--space-sm);
border-bottom: 2px solid var(--sadc-gold);
margin-bottom: var(--space-lg);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.sadc-form-section__title::before {
content: '';
display: inline-block;
width: 4px;
height: 16px;
background: var(--sadc-green);
border-radius: var(--radius-sm);
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════════════════════
FORM GRID
═══════════════════════════════════════════════════════════════════════════ */
.sadc-form-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--space-lg) var(--space-xl);
}
.sadc-form-grid--2col { grid-template-columns: repeat(2, 1fr); }
.sadc-form-grid--3col { grid-template-columns: repeat(3, 1fr); }
.sadc-form-grid--full { grid-column: 1 / -1; }
@media (max-width: 768px) {
.sadc-form-grid,
.sadc-form-grid--2col,
.sadc-form-grid--3col { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════════════════
FORM FIELDS
═══════════════════════════════════════════════════════════════════════════ */
.sadc-field {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.sadc-field__label {
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--sadc-text-secondary);
}
.sadc-field__label .required {
color: var(--sadc-danger);
margin-left: 2px;
}
.sadc-field__input,
.sadc-field__select,
.sadc-field__textarea {
font-family: var(--font-body);
font-size: 14px;
color: var(--sadc-text-primary);
background: var(--sadc-white);
border: 1.5px solid var(--sadc-border);
border-radius: var(--radius-md);
padding: 10px var(--space-md);
transition: var(--transition);
width: 100%;
outline: none;
appearance: none;
-webkit-appearance: none;
}
.sadc-field__input:hover,
.sadc-field__select:hover,
.sadc-field__textarea:hover {
border-color: var(--sadc-blue-light);
}
.sadc-field__input:focus,
.sadc-field__select:focus,
.sadc-field__textarea:focus {
border-color: var(--sadc-blue);
box-shadow: var(--shadow-focus);
background: var(--sadc-blue-pale);
}
.sadc-field__input::placeholder,
.sadc-field__textarea::placeholder {
color: var(--sadc-text-muted);
font-style: italic;
}
.sadc-field__input--error,
.sadc-field__select--error,
.sadc-field__textarea--error {
border-color: var(--sadc-danger);
}
.sadc-field__input--error:focus,
.sadc-field__select--error:focus {
box-shadow: 0 0 0 3px rgba(211,47,47,0.15);
}
/* Select custom arrow */
.sadc-field__select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23001C84' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
cursor: pointer;
}
.sadc-field__textarea {
resize: vertical;
min-height: 100px;
line-height: 1.6;
}
.sadc-field__hint {
font-size: 11px;
color: var(--sadc-text-muted);
font-style: italic;
}
.sadc-field__error {
font-size: 11px;
color: var(--sadc-danger);
font-weight: 600;
display: flex;
align-items: center;
gap: 4px;
}
/* Input with icon prefix */
.sadc-field__input-wrap {
position: relative;
}
.sadc-field__input-wrap .sadc-field__input {
padding-left: 40px;
}
.sadc-field__input-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--sadc-text-muted);
font-size: 14px;
pointer-events: none;
}
/* Readonly / disabled */
.sadc-field__input:disabled,
.sadc-field__select:disabled,
.sadc-field__textarea:disabled {
background: var(--sadc-off-white);
color: var(--sadc-text-muted);
cursor: not-allowed;
border-color:var(--sadc-border);
}
.sadc-field__input[readonly] {
background: var(--sadc-off-white);
cursor: default;
}
/* ═══════════════════════════════════════════════════════════════════════════
CHECKBOX & RADIO
═══════════════════════════════════════════════════════════════════════════ */
.sadc-check {
display: flex;
align-items: center;
gap: var(--space-sm);
cursor: pointer;
}
.sadc-check__input {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
border: 2px solid var(--sadc-border);
border-radius: var(--radius-sm);
background: var(--sadc-white);
cursor: pointer;
flex-shrink: 0;
transition: var(--transition);
position: relative;
}
.sadc-check__input[type="radio"] {
border-radius: 50%;
}
.sadc-check__input:checked {
background: var(--sadc-blue);
border-color: var(--sadc-blue);
}
.sadc-check__input:checked::after {
content: '';
display: block;
position: absolute;
top: 3px; left: 5px;
width: 5px; height: 9px;
border: 2px solid white;
border-top: none;
border-left: none;
transform: rotate(45deg);
}
.sadc-check__input[type="radio"]:checked::after {
top: 3px; left: 3px;
width: 8px; height: 8px;
border: none;
background: white;
border-radius: 50%;
transform: none;
}
.sadc-check__label {
font-family: var(--font-body);
font-size: 14px;
color: var(--sadc-text-primary);
user-select: none;
}
/* ═══════════════════════════════════════════════════════════════════════════
BUTTONS
═══════════════════════════════════════════════════════════════════════════ */
.sadc-btn {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.3px;
padding: 10px var(--space-lg);
border-radius: var(--radius-md);
border: 2px solid transparent;
cursor: pointer;
transition: var(--transition);
display: inline-flex;
align-items: center;
gap: var(--space-sm);
text-decoration:none;
white-space: nowrap;
outline: none;
}
.sadc-btn:focus-visible {
box-shadow: var(--shadow-focus);
}
/* Primary — Blue */
.sadc-btn--primary {
background: var(--sadc-blue);
color: var(--sadc-white);
border-color:var(--sadc-blue);
}
.sadc-btn--primary:hover {
background: var(--sadc-blue-light);
border-color:var(--sadc-blue-light);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.sadc-btn--primary:active {
background: var(--sadc-blue-dark);
transform: translateY(0);
}
/* Success — Green */
.sadc-btn--success {
background: var(--sadc-green);
color: var(--sadc-white);
border-color:var(--sadc-green);
}
.sadc-btn--success:hover {
background: var(--sadc-green-light);
border-color:var(--sadc-green-light);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
/* Accent — Gold */
.sadc-btn--accent {
background: var(--sadc-gold);
color: var(--sadc-text-on-gold);
border-color:var(--sadc-gold);
}
.sadc-btn--accent:hover {
background: var(--sadc-gold-light);
border-color:var(--sadc-gold-light);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
/* Outline */
.sadc-btn--outline {
background: transparent;
color: var(--sadc-blue);
border-color:var(--sadc-blue);
}
.sadc-btn--outline:hover {
background: var(--sadc-blue-pale);
}
/* Ghost / cancel */
.sadc-btn--ghost {
background: transparent;
color: var(--sadc-text-secondary);
border-color:var(--sadc-border);
}
.sadc-btn--ghost:hover {
background: var(--sadc-off-white);
color: var(--sadc-text-primary);
}
/* Danger */
.sadc-btn--danger {
background: var(--sadc-danger);
color: var(--sadc-white);
border-color:var(--sadc-danger);
}
/* Sizes */
.sadc-btn--sm { font-size:12px; padding:6px var(--space-md); }
.sadc-btn--lg { font-size:16px; padding:14px var(--space-xl); }
.sadc-btn--full { width:100%; justify-content:center; }
.sadc-btn:disabled {
opacity:0.5;
cursor:not-allowed;
transform:none;
box-shadow:none;
}
/* ═══════════════════════════════════════════════════════════════════════════
ALERTS / FLASH MESSAGES
═══════════════════════════════════════════════════════════════════════════ */
.sadc-alert {
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-md);
border-left: 4px solid transparent;
font-family: var(--font-body);
font-size: 14px;
display: flex;
align-items: flex-start;
gap: var(--space-sm);
margin-bottom: var(--space-md);
}
.sadc-alert--success {
background: var(--sadc-success-pale);
border-color:var(--sadc-green);
color: var(--sadc-green-dark);
}
.sadc-alert--danger {
background: var(--sadc-danger-pale);
border-color:var(--sadc-danger);
color: var(--sadc-danger);
}
.sadc-alert--warning {
background: var(--sadc-warning-pale);
border-color:var(--sadc-gold-dark);
color: var(--sadc-gold-dark);
}
.sadc-alert--info {
background: var(--sadc-info-pale);
border-color:var(--sadc-blue);
color: var(--sadc-blue);
}
/* ═══════════════════════════════════════════════════════════════════════════
TABLE (data grid)
═══════════════════════════════════════════════════════════════════════════ */
.sadc-table-wrap {
overflow-x: auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
border: 1px solid var(--sadc-border);
}
.sadc-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-body);
font-size: 14px;
}
.sadc-table thead {
background: var(--sadc-blue);
color: var(--sadc-white);
}
.sadc-table thead th {
padding: var(--space-md) var(--space-lg);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.8px;
text-transform: uppercase;
text-align: left;
white-space: nowrap;
border-bottom: 3px solid var(--sadc-gold);
}
.sadc-table tbody tr {
transition: background var(--transition);
border-bottom: 1px solid var(--sadc-border);
}
.sadc-table tbody tr:last-child {
border-bottom: none;
}
.sadc-table tbody tr:hover {
background: var(--sadc-blue-pale);
}
.sadc-table tbody tr:nth-child(even) {
background: var(--sadc-off-white);
}
.sadc-table tbody tr:nth-child(even):hover {
background: var(--sadc-blue-pale);
}
.sadc-table tbody td {
padding: var(--space-md) var(--space-lg);
color: var(--sadc-text-primary);
vertical-align: middle;
}
/* ═══════════════════════════════════════════════════════════════════════════
BADGES / STATUS PILLS
═══════════════════════════════════════════════════════════════════════════ */
.sadc-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: var(--radius-pill);
font-size: 11px;
font-weight: 700;
letter-spacing:0.5px;
text-transform:uppercase;
white-space: nowrap;
}
.sadc-badge--blue { background:var(--sadc-blue-pale); color:var(--sadc-blue); }
.sadc-badge--green { background:var(--sadc-green-pale); color:var(--sadc-green-dark); }
.sadc-badge--gold { background:var(--sadc-gold-pale); color:var(--sadc-gold-dark); }
.sadc-badge--danger { background:var(--sadc-danger-pale); color:var(--sadc-danger); }
.sadc-badge--solid-blue { background:var(--sadc-blue); color:var(--sadc-white); }
.sadc-badge--solid-green { background:var(--sadc-green); color:var(--sadc-white); }
.sadc-badge--solid-gold { background:var(--sadc-gold); color:var(--sadc-text-on-gold); }
/* ═══════════════════════════════════════════════════════════════════════════
PAGE HEADER (section title bar)
═══════════════════════════════════════════════════════════════════════════ */
.sadc-page-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-lg) var(--space-xl);
background: var(--sadc-white);
border-radius: var(--radius-lg);
border-left: 4px solid var(--sadc-gold);
box-shadow: var(--shadow-sm);
margin-bottom: var(--space-xl);
flex-wrap: wrap;
gap: var(--space-md);
}
.sadc-page-header__title {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 700;
color: var(--sadc-blue);
letter-spacing:0.5px;
text-transform:uppercase;
margin: 0;
}
.sadc-page-header__breadcrumb {
font-size: 12px;
color: var(--sadc-text-muted);
margin-top: 2px;
}
/* ═══════════════════════════════════════════════════════════════════════════
UTILITY CLASSES
═══════════════════════════════════════════════════════════════════════════ */
.text-blue { color: var(--sadc-blue) !important; }
.text-green { color: var(--sadc-green) !important; }
.text-gold { color: var(--sadc-gold-dark) !important; }
.text-danger { color: var(--sadc-danger) !important; }
.text-muted { color: var(--sadc-text-muted) !important;}
.bg-blue { background: var(--sadc-blue) !important; }
.bg-green { background: var(--sadc-green) !important; }
.bg-gold { background: var(--sadc-gold) !important; }
.bg-blue-pale { background: var(--sadc-blue-pale) !important; }
.border-gold { border-color: var(--sadc-gold) !important; }
.border-blue { border-color: var(--sadc-blue) !important; }
.border-green { border-color: var(--sadc-green) !important;}
/* Divider with gold accent */
.sadc-divider {
border: none;
border-top: 2px solid var(--sadc-gold);
margin: var(--space-xl) 0;
opacity: 0.4;
}