/* ============================================================
CloudCrest Security — Shared Brand Stylesheet
============================================================
Single source of truth for ARIA, Control Vault, NCA CCC Assessment,
Shadow Sentinel, and all future CCS Innovation Labs platforms.
Usage:
Font loading (add to BEFORE this stylesheet):
RULES (do not break these):
- #00B4D8 (cyan) is BORDER/DECORATION ONLY. Never text, never fill on
interactive elements, never used as an accent color for UI states.
- Primary brand color is #1F3A93 (navy) — matches the official CCS
logo file exactly. This superseded an earlier #2E6DA4 steel blue;
if you see #2E6DA4 anywhere in old app code, it should be migrated.
- NCA CCC Assessment platform is EXEMPT from this stylesheet's color/
font tokens (it uses a deliberate "Audit Office" off-white/serif
theme for its report aesthetic). It should still use the shared
logo assets and, where sensible, the shared component structure.
============================================================ */
:root {
/* ---- Brand Colors ---- */
--ccs-navy: #1F3A93; /* primary brand color — logo, primary actions, headers */
--ccs-navy-dark: #162970; /* hover/active state for primary */
--ccs-navy-light: #E8EBF7; /* tints, selected row backgrounds */
--ccs-cyan-decorative: #00B4D8; /* BORDERS & DECORATION ONLY — never text/fill on UI */
--ccs-black: #000000;
--ccs-white: #FFFFFF;
/* ---- Neutrals ---- */
--ccs-gray-950: #111318;
--ccs-gray-900: #1A1D24;
--ccs-gray-700: #3F4451;
--ccs-gray-500: #6B7280;
--ccs-gray-300: #D1D5DB;
--ccs-gray-100: #F3F4F6;
--ccs-gray-50: #FAFAFB;
/* ---- Semantic / Status Colors ---- */
--ccs-success: #1F9D55;
--ccs-success-bg: #E6F6EC;
--ccs-warning: #B7791F;
--ccs-warning-bg: #FDF3E0;
--ccs-danger: #C0392B;
--ccs-danger-bg: #FBEAE8;
--ccs-info: var(--ccs-navy);
--ccs-info-bg: var(--ccs-navy-light);
/* ---- Compliance/Score Scale (Level 1–5, e.g. DCAM/maturity scoring) ---- */
--ccs-score-1: #C0392B; /* ad hoc */
--ccs-score-2: #D97706; /* repeatable */
--ccs-score-3: #B7A81F; /* defined */
--ccs-score-4: #4E9D2F; /* managed */
--ccs-score-5: #1F9D55; /* optimized */
/* ---- Typography ---- */
--ccs-font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--ccs-font-mono: "IBM Plex Mono", "SF Mono", Consolas, monospace;
--ccs-text-xs: 0.75rem;
--ccs-text-sm: 0.875rem;
--ccs-text-base: 1rem;
--ccs-text-lg: 1.125rem;
--ccs-text-xl: 1.375rem;
--ccs-text-2xl: 1.75rem;
--ccs-text-3xl: 2.25rem;
--ccs-weight-normal: 400;
--ccs-weight-medium: 500;
--ccs-weight-semibold: 600;
--ccs-weight-bold: 700;
--ccs-line-tight: 1.25;
--ccs-line-normal: 1.5;
/* ---- Spacing scale ---- */
--ccs-space-1: 4px;
--ccs-space-2: 8px;
--ccs-space-3: 12px;
--ccs-space-4: 16px;
--ccs-space-5: 24px;
--ccs-space-6: 32px;
--ccs-space-8: 48px;
--ccs-space-10: 64px;
/* ---- Radii & Shadows ---- */
--ccs-radius-sm: 4px;
--ccs-radius-md: 8px;
--ccs-radius-lg: 12px;
--ccs-radius-full: 9999px;
--ccs-shadow-sm: 0 1px 2px rgba(17, 19, 24, 0.06);
--ccs-shadow-md: 0 4px 12px rgba(17, 19, 24, 0.08);
--ccs-shadow-lg: 0 12px 32px rgba(17, 19, 24, 0.12);
--ccs-border: 1px solid var(--ccs-gray-300);
--ccs-transition: 150ms ease;
}
/* ============================================================
Reset & Base
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--ccs-font-sans);
font-size: var(--ccs-text-base);
font-weight: var(--ccs-weight-normal);
line-height: var(--ccs-line-normal);
color: var(--ccs-gray-900);
background: var(--ccs-gray-50);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--ccs-font-sans);
font-weight: var(--ccs-weight-bold);
line-height: var(--ccs-line-tight);
color: var(--ccs-gray-950);
margin: 0 0 var(--ccs-space-3);
}
h1 { font-size: var(--ccs-text-3xl); }
h2 { font-size: var(--ccs-text-2xl); }
h3 { font-size: var(--ccs-text-xl); }
h4 { font-size: var(--ccs-text-lg); font-weight: var(--ccs-weight-semibold); }
p { margin: 0 0 var(--ccs-space-3); }
a {
color: var(--ccs-navy);
text-decoration: none;
}
a:hover { color: var(--ccs-navy-dark); text-decoration: underline; }
code, pre, .ccs-mono {
font-family: var(--ccs-font-mono);
}
/* ============================================================
Logo Lockup
============================================================ */
.ccs-logo {
display: inline-flex;
align-items: center;
gap: var(--ccs-space-3);
text-decoration: none;
}
.ccs-logo img,
.ccs-logo svg {
height: 32px;
width: auto;
display: block;
}
.ccs-logo-icon-only img,
.ccs-logo-icon-only svg { height: 28px; }
/* ============================================================
Layout: App Shell / Nav
============================================================ */
.ccs-topbar {
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
padding: 0 var(--ccs-space-5);
background: var(--ccs-white);
border-bottom: var(--ccs-border);
}
.ccs-sidebar {
width: 240px;
background: var(--ccs-gray-950);
color: var(--ccs-gray-100);
padding: var(--ccs-space-5) var(--ccs-space-3);
display: flex;
flex-direction: column;
gap: var(--ccs-space-1);
}
.ccs-sidebar .ccs-logo { color: var(--ccs-white); margin-bottom: var(--ccs-space-5); padding: 0 var(--ccs-space-2); }
.ccs-nav-item {
display: flex;
align-items: center;
gap: var(--ccs-space-3);
padding: var(--ccs-space-3) var(--ccs-space-3);
border-radius: var(--ccs-radius-md);
color: var(--ccs-gray-300);
font-size: var(--ccs-text-sm);
font-weight: var(--ccs-weight-medium);
cursor: pointer;
transition: background var(--ccs-transition), color var(--ccs-transition);
}
.ccs-nav-item:hover { background: rgba(255,255,255,0.06); color: var(--ccs-white); }
.ccs-nav-item.active { background: var(--ccs-navy); color: var(--ccs-white); }
/* ============================================================
Buttons
============================================================ */
.ccs-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ccs-space-2);
font-family: var(--ccs-font-sans);
font-size: var(--ccs-text-sm);
font-weight: var(--ccs-weight-semibold);
padding: var(--ccs-space-2) var(--ccs-space-4);
border-radius: var(--ccs-radius-md);
border: 1px solid transparent;
cursor: pointer;
transition: background var(--ccs-transition), border-color var(--ccs-transition), color var(--ccs-transition);
line-height: 1;
}
.ccs-btn-primary { background: var(--ccs-navy); color: var(--ccs-white); }
.ccs-btn-primary:hover { background: var(--ccs-navy-dark); }
.ccs-btn-secondary { background: var(--ccs-white); color: var(--ccs-navy); border-color: var(--ccs-navy); }
.ccs-btn-secondary:hover { background: var(--ccs-navy-light); }
.ccs-btn-ghost { background: transparent; color: var(--ccs-gray-700); }
.ccs-btn-ghost:hover { background: var(--ccs-gray-100); }
.ccs-btn-danger { background: var(--ccs-danger); color: var(--ccs-white); }
.ccs-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* ============================================================
Cards
============================================================ */
.ccs-card {
background: var(--ccs-white);
border: var(--ccs-border);
border-radius: var(--ccs-radius-lg);
padding: var(--ccs-space-5);
box-shadow: var(--ccs-shadow-sm);
}
.ccs-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--ccs-space-4);
padding-bottom: var(--ccs-space-3);
border-bottom: var(--ccs-border);
}
/* Decorative top border accent — cyan permitted here (structural, not text) */
.ccs-card-accent {
border-top: 3px solid var(--ccs-cyan-decorative);
}
/* ============================================================
Status & Score Badges
============================================================ */
.ccs-badge {
display: inline-flex;
align-items: center;
gap: var(--ccs-space-1);
font-size: var(--ccs-text-xs);
font-weight: var(--ccs-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 3px var(--ccs-space-2);
border-radius: var(--ccs-radius-full);
}
.ccs-badge-success { background: var(--ccs-success-bg); color: var(--ccs-success); }
.ccs-badge-warning { background: var(--ccs-warning-bg); color: var(--ccs-warning); }
.ccs-badge-danger { background: var(--ccs-danger-bg); color: var(--ccs-danger); }
.ccs-badge-info { background: var(--ccs-info-bg); color: var(--ccs-info); }
.ccs-badge-neutral { background: var(--ccs-gray-100); color: var(--ccs-gray-700); }
/* Maturity/compliance score badges (1-5 scale, e.g. DCAM, ISO controls) */
.ccs-score {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 28px;
padding: 0 var(--ccs-space-2);
border-radius: var(--ccs-radius-sm);
font-family: var(--ccs-font-mono);
font-weight: var(--ccs-weight-semibold);
font-size: var(--ccs-text-sm);
color: var(--ccs-white);
}
.ccs-score-1 { background: var(--ccs-score-1); }
.ccs-score-2 { background: var(--ccs-score-2); }
.ccs-score-3 { background: var(--ccs-score-3); color: var(--ccs-gray-950); }
.ccs-score-4 { background: var(--ccs-score-4); }
.ccs-score-5 { background: var(--ccs-score-5); }
/* ============================================================
Tables
============================================================ */
.ccs-table {
width: 100%;
border-collapse: collapse;
font-size: var(--ccs-text-sm);
}
.ccs-table th {
text-align: left;
font-weight: var(--ccs-weight-semibold);
color: var(--ccs-gray-700);
text-transform: uppercase;
font-size: var(--ccs-text-xs);
letter-spacing: 0.03em;
padding: var(--ccs-space-3) var(--ccs-space-4);
border-bottom: 2px solid var(--ccs-gray-300);
}
.ccs-table td {
padding: var(--ccs-space-3) var(--ccs-space-4);
border-bottom: 1px solid var(--ccs-gray-100);
}
.ccs-table tbody tr:hover { background: var(--ccs-gray-50); }
/* ============================================================
Forms
============================================================ */
.ccs-label {
display: block;
font-size: var(--ccs-text-sm);
font-weight: var(--ccs-weight-medium);
color: var(--ccs-gray-700);
margin-bottom: var(--ccs-space-1);
}
.ccs-input, .ccs-select, .ccs-textarea {
width: 100%;
font-family: var(--ccs-font-sans);
font-size: var(--ccs-text-sm);
padding: var(--ccs-space-2) var(--ccs-space-3);
border: var(--ccs-border);
border-radius: var(--ccs-radius-md);
background: var(--ccs-white);
color: var(--ccs-gray-900);
transition: border-color var(--ccs-transition), box-shadow var(--ccs-transition);
}
.ccs-input:focus, .ccs-select:focus, .ccs-textarea:focus {
outline: none;
border-color: var(--ccs-navy);
box-shadow: 0 0 0 3px var(--ccs-navy-light);
}
/* ============================================================
Utility Classes
============================================================ */
.ccs-text-navy { color: var(--ccs-navy); }
.ccs-bg-navy { background: var(--ccs-navy); }
.ccs-border-cyan { border-color: var(--ccs-cyan-decorative); } /* decorative use only */
.ccs-flex { display: flex; }
.ccs-flex-col { display: flex; flex-direction: column; }
.ccs-items-center { align-items: center; }
.ccs-justify-between { justify-content: space-between; }
.ccs-gap-2 { gap: var(--ccs-space-2); }
.ccs-gap-3 { gap: var(--ccs-space-3); }
.ccs-gap-4 { gap: var(--ccs-space-4); }