/*
* CJP Command Center — Shared Design System
* ops.mrktnginnvtn.com
*
* HOW TO USE IN ANY PAGE:
* (from root pages)
* (from sub-folders)
*
* PWA HEAD TEMPLATE — paste into every page's :
*
*
*
*
*
*
*/
/* ============================================================
FONTS
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&display=swap');
/* ============================================================
CSS CUSTOM PROPERTIES — Light Mode (default)
============================================================ */
:root {
/* Text */
--color-text-primary: #1A202C;
--color-text-secondary: #4A5568;
--color-text-tertiary: #718096;
--color-text-inverse: #FFFFFF;
/* Backgrounds */
--color-background-primary: #FFFFFF;
--color-background-secondary: #F7FAFC;
--color-background-tertiary: #EDF2F7;
/* Borders */
--color-border-primary: #CBD5E0;
--color-border-tertiary: #E2E8F0;
/* Brand — always the same regardless of mode */
--color-brand-navy: #1A2F4A;
--color-brand-gold: #C8922A;
--color-brand-gold-light: #FDF3E3;
--color-brand-gold-dark: #9A5F00;
/* Semantic */
--color-success-bg: #F0FFF4;
--color-success-border: #9AE6B4;
--color-success-text: #276749;
--color-warning-bg: #FFFBEB;
--color-warning-border: #F6AD55;
--color-warning-text: #744210;
--color-danger-bg: #FFF5F5;
--color-danger-border: #FC8181;
--color-danger-text: #742A2A;
--color-info-bg: #EBF8FF;
--color-info-border: #90CDF4;
--color-info-text: #2C5282;
/* Zone accent colors */
--color-zone-growthvalet: #C8922A;
--color-zone-growthvalet-bg: #FDF3E3;
--color-zone-mrktnginnvtn: #2B6CB0;
--color-zone-mrktnginnvtn-bg: #EBF8FF;
--color-zone-books: #2C7A7B;
--color-zone-books-bg: #E6FFFA;
--color-zone-brainpunches: #6B46C1;
--color-zone-brainpunches-bg: #FAF5FF;
--color-zone-infra: #4A5568;
--color-zone-infra-bg: #EDF2F7;
/* Spacing */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 12px;
--space-lg: 16px;
--space-xl: 24px;
--space-2xl: 32px;
--space-3xl: 48px;
/* Typography */
--font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'DM Mono', 'SF Mono', 'Fira Mono', monospace;
/* Radius */
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 10px;
--radius-xl: 14px;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px rgba(0,0,0,0.10);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
}
/* ============================================================
DARK MODE OVERRIDES
============================================================ */
@media (prefers-color-scheme: dark) {
:root {
--color-text-primary: #F7FAFC;
--color-text-secondary: #CBD5E0;
--color-text-tertiary: #A0AEC0;
--color-text-inverse: #1A202C;
--color-background-primary: #0F1923;
--color-background-secondary: #1A2535;
--color-background-tertiary: #243044;
--color-border-primary: #2D3748;
--color-border-tertiary: #2D3748;
--color-brand-gold-light: rgba(200,146,42,0.15);
--color-brand-gold-dark: #F6AD55;
--color-success-bg: rgba(39,103,73,0.2);
--color-success-border: #276749;
--color-success-text: #9AE6B4;
--color-warning-bg: rgba(116,66,16,0.2);
--color-warning-border: #744210;
--color-warning-text: #F6AD55;
--color-danger-bg: rgba(116,42,42,0.2);
--color-danger-border: #742A2A;
--color-danger-text: #FC8181;
--color-info-bg: rgba(44,82,130,0.2);
--color-info-border: #2C5282;
--color-info-text: #90CDF4;
--color-zone-growthvalet-bg: rgba(200,146,42,0.12);
--color-zone-mrktnginnvtn-bg: rgba(43,108,176,0.12);
--color-zone-books-bg: rgba(44,122,123,0.12);
--color-zone-brainpunches-bg: rgba(107,70,193,0.12);
--color-zone-infra-bg: rgba(74,85,104,0.12);
}
}
/* ============================================================
RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.5;
color: var(--color-text-primary);
background: var(--color-background-primary);
-webkit-font-smoothing: antialiased;
}
a { color: var(--color-brand-gold); text-decoration: none; }
a:hover { text-decoration: underline; }
/* ============================================================
PAGE SHELL — wraps every page
============================================================ */
.page { max-width: 1100px; margin: 0 auto; padding: var(--space-xl) var(--space-lg); }
/* ============================================================
SITE HEADER (top of every page)
============================================================ */
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-md) var(--space-xl);
background: var(--color-brand-navy);
color: var(--color-text-inverse);
position: sticky;
top: 0;
z-index: 50;
}
.site-header .site-logo {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-brand-gold);
}
.site-header .site-nav {
display: flex;
gap: var(--space-xl);
font-size: 12px;
font-weight: 500;
}
.site-header .site-nav a {
color: rgba(255,255,255,0.7);
transition: color 0.15s;
}
.site-header .site-nav a:hover { color: #fff; text-decoration: none; }
/* ============================================================
BREADCRUMB
============================================================ */
.breadcrumb {
font-size: 11px;
color: var(--color-text-tertiary);
margin-bottom: var(--space-lg);
display: flex;
align-items: center;
gap: var(--space-xs);
}
.breadcrumb a { color: var(--color-text-tertiary); }
.breadcrumb a:hover { color: var(--color-brand-gold); text-decoration: none; }
.breadcrumb .sep { opacity: 0.4; }
/* ============================================================
PAGE HEADER (title block on sub-pages)
============================================================ */
.page-header {
border-bottom: 3px solid var(--color-brand-gold);
padding-bottom: var(--space-md);
margin-bottom: var(--space-xl);
}
.page-header .zone-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-brand-gold);
margin-bottom: var(--space-xs);
}
.page-header h1 {
font-size: 22px;
font-weight: 700;
color: var(--color-text-primary);
line-height: 1.2;
}
.page-header .subtitle {
font-size: 13px;
color: var(--color-text-secondary);
margin-top: var(--space-xs);
}
.page-header .meta-row {
display: flex;
align-items: center;
gap: var(--space-md);
margin-top: var(--space-sm);
}
/* ============================================================
PANELS (the workhorse card)
============================================================ */
.panel {
background: var(--color-background-secondary);
border: 0.5px solid var(--color-border-tertiary);
border-radius: var(--radius-lg);
padding: var(--space-md) var(--space-lg);
}
.panel-title {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--color-text-secondary);
margin-bottom: var(--space-sm);
}
.panel + .panel { margin-top: var(--space-sm); }
/* ============================================================
GRIDS
============================================================ */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.full { grid-column: 1 / -1; }
/* ============================================================
NUMBERED STEPS (inherited from KB job aid)
============================================================ */
.steps { list-style: none; counter-reset: steps; }
.steps li {
counter-increment: steps;
display: flex;
gap: var(--space-sm);
align-items: flex-start;
padding: var(--space-xs) 0;
border-bottom: 0.5px solid var(--color-border-tertiary);
font-size: 12px;
line-height: 1.45;
}
.steps li:last-child { border-bottom: none; }
.steps li::before {
content: counter(steps);
min-width: 20px;
height: 20px;
background: var(--color-brand-navy);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
flex-shrink: 0;
margin-top: 1px;
}
.step-main { font-weight: 500; color: var(--color-text-primary); }
.step-sub { color: var(--color-text-secondary); font-size: 11px; margin-top: 2px; }
/* ============================================================
REFERENCE TABLE (inherited from KB job aid)
============================================================ */
.rtable { width: 100%; border-collapse: collapse; font-size: 11px; }
.rtable th {
background: var(--color-brand-navy);
color: #fff;
padding: 5px 8px;
text-align: left;
font-weight: 500;
font-size: 10px;
letter-spacing: 0.03em;
}
.rtable td {
padding: 4px 8px;
border-bottom: 0.5px solid var(--color-border-tertiary);
vertical-align: top;
line-height: 1.4;
color: var(--color-text-secondary);
}
.rtable tr:nth-child(even) td { background: var(--color-background-tertiary); }
.rtable td:first-child { font-weight: 500; color: var(--color-text-primary); }
.rtable tr:last-child td { border-bottom: none; }
/* ============================================================
WARNING / INFO CALLOUTS (inherited from KB job aid)
============================================================ */
.warn {
background: var(--color-warning-bg);
border: 0.5px solid var(--color-warning-border);
border-left: 3px solid var(--color-warning-border);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
padding: 6px 10px;
font-size: 11px;
line-height: 1.45;
color: var(--color-text-primary);
}
.warn strong { color: var(--color-warning-text); }
.info-callout {
background: var(--color-info-bg);
border: 0.5px solid var(--color-info-border);
border-left: 3px solid var(--color-info-border);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
padding: 6px 10px;
font-size: 11px;
line-height: 1.45;
}
/* ============================================================
BADGES & PILLS (inherited from KB job aid)
============================================================ */
.badge {
display: inline-block;
border-radius: var(--radius-sm);
padding: 2px 6px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.badge-gold { background: var(--color-brand-gold-light); color: var(--color-brand-gold-dark); border: 1px solid var(--color-brand-gold); }
.badge-navy { background: var(--color-brand-navy); color: #fff; }
.badge-green { background: var(--color-success-bg); color: var(--color-success-text); border: 0.5px solid var(--color-success-border); }
.badge-amber { background: var(--color-warning-bg); color: var(--color-warning-text); border: 0.5px solid var(--color-warning-border); }
.badge-red { background: var(--color-danger-bg); color: var(--color-danger-text); border: 0.5px solid var(--color-danger-border); }
.badge-grey { background: var(--color-background-tertiary);color: var(--color-text-secondary); }
.pill {
display: inline-block;
font-size: 10px;
font-weight: 500;
padding: 2px 8px;
border-radius: var(--radius-full);
}
.pill-navy { background: #E8EDF2; color: var(--color-brand-navy); }
.pill-gold { background: var(--color-brand-gold-light); color: var(--color-brand-gold-dark); }
.pill-red { background: var(--color-danger-bg); color: var(--color-danger-text); }
/* ============================================================
INLINE CODE
============================================================ */
code {
font-family: var(--font-mono);
font-size: 10px;
background: var(--color-background-tertiary);
padding: 1px 5px;
border-radius: var(--radius-sm);
color: #1E6B7A;
white-space: nowrap;
}
pre {
font-family: var(--font-mono);
font-size: 11px;
background: var(--color-background-tertiary);
border: 0.5px solid var(--color-border-tertiary);
border-radius: var(--radius-md);
padding: var(--space-md);
overflow-x: auto;
line-height: 1.6;
}
/* ============================================================
STATUS DOT (live indicators)
============================================================ */
.status-dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.status-dot.green { background: #38A169; box-shadow: 0 0 0 2px rgba(56,161,105,0.25); }
.status-dot.amber { background: #D69E2E; box-shadow: 0 0 0 2px rgba(214,158,46,0.25); }
.status-dot.red { background: #E53E3E; box-shadow: 0 0 0 2px rgba(229,62,62,0.25); }
.status-dot.grey { background: #A0AEC0; }
/* ============================================================
DIVIDER
============================================================ */
.divider { height: 0.5px; background: var(--color-border-tertiary); margin: var(--space-sm) 0; }
/* ============================================================
HUB — INITIATIVE CARDS (index.html only)
============================================================ */
.hub-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
margin-bottom: var(--space-2xl);
}
.initiative-card {
background: var(--color-background-secondary);
border: 1px solid var(--color-border-tertiary);
border-top: 4px solid var(--zone-color, var(--color-brand-gold));
border-radius: var(--radius-xl);
padding: var(--space-lg);
transition: box-shadow 0.2s, transform 0.2s;
cursor: pointer;
text-decoration: none;
display: block;
color: var(--color-text-primary);
}
.initiative-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
text-decoration: none;
color: var(--color-text-primary);
}
.initiative-card .card-zone {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--zone-color, var(--color-brand-gold));
margin-bottom: var(--space-xs);
}
.initiative-card .card-title {
font-size: 16px;
font-weight: 700;
color: var(--color-text-primary);
margin-bottom: var(--space-xs);
}
.initiative-card .card-desc {
font-size: 12px;
color: var(--color-text-secondary);
margin-bottom: var(--space-md);
line-height: 1.45;
}
.initiative-card .card-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 3px;
}
.initiative-card .card-links li a {
font-size: 11px;
font-weight: 500;
color: var(--zone-color, var(--color-brand-gold));
display: flex;
align-items: center;
gap: var(--space-xs);
}
.initiative-card .card-links li a:hover { text-decoration: underline; }
.initiative-card .card-links li a::before { content: '→'; opacity: 0.6; }
/* ============================================================
TODAY STRIP (hub dashboard top bar)
============================================================ */
.today-strip {
background: var(--color-brand-navy);
color: rgba(255,255,255,0.9);
border-radius: var(--radius-lg);
padding: var(--space-md) var(--space-xl);
margin-bottom: var(--space-2xl);
display: flex;
align-items: center;
gap: var(--space-xl);
flex-wrap: wrap;
}
.today-strip .today-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-brand-gold);
flex-shrink: 0;
}
.today-strip .today-item {
font-size: 12px;
display: flex;
align-items: center;
gap: var(--space-xs);
}
/* ============================================================
QUICK LINKS (external link rows)
============================================================ */
.quick-link-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-sm) 0;
border-bottom: 0.5px solid var(--color-border-tertiary);
font-size: 12px;
}
.quick-link-row:last-child { border-bottom: none; }
.quick-link-row .link-label { font-weight: 500; color: var(--color-text-primary); }
.quick-link-row .link-meta { font-size: 11px; color: var(--color-text-tertiary); }
.quick-link-row a.link-btn {
font-size: 11px;
font-weight: 600;
background: var(--color-brand-gold);
color: white;
padding: 4px 12px;
border-radius: var(--radius-sm);
white-space: nowrap;
}
.quick-link-row a.link-btn:hover { opacity: 0.85; text-decoration: none; }
/* ============================================================
PIPELINE FLOW (scout-pipeline.html)
============================================================ */
.pipeline-flow {
display: flex;
align-items: flex-start;
gap: 0;
overflow-x: auto;
padding: var(--space-md) 0;
}
.flow-stage {
background: var(--color-background-secondary);
border: 1px solid var(--color-border-tertiary);
border-radius: var(--radius-lg);
padding: var(--space-md);
min-width: 160px;
flex-shrink: 0;
position: relative;
}
.flow-stage .stage-system {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: var(--space-xs);
}
.flow-stage .stage-name {
font-size: 13px;
font-weight: 700;
color: var(--color-text-primary);
margin-bottom: var(--space-xs);
}
.flow-stage .stage-steps {
font-size: 10px;
color: var(--color-text-secondary);
line-height: 1.6;
list-style: none;
}
.flow-stage .stage-steps li::before { content: '· '; }
.flow-arrow {
display: flex;
align-items: center;
padding: 0 var(--space-xs);
color: var(--color-text-tertiary);
font-size: 18px;
align-self: center;
flex-shrink: 0;
margin-top: -20px;
}
/* ============================================================
FOOTER
============================================================ */
.site-footer {
border-top: 1px solid var(--color-brand-navy);
margin-top: var(--space-3xl);
padding: var(--space-lg) var(--space-xl);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 10px;
color: var(--color-text-tertiary);
}
.site-footer .footer-brand { color: var(--color-brand-gold); font-weight: 500; }
/* ============================================================
RESPONSIVE — TABLET (iPad portrait 768px+)
============================================================ */
@media (max-width: 1024px) {
.hub-grid { grid-template-columns: repeat(2, 1fr); }
.grid3 { grid-template-columns: 1fr 1fr; }
.site-header .site-nav { gap: var(--space-lg); }
}
/* ============================================================
RESPONSIVE — TABLET PORTRAIT / LARGE PHONE (768px)
============================================================ */
@media (max-width: 768px) {
body { font-size: 15px; }
.page { padding: var(--space-lg) var(--space-md); }
.hub-grid { grid-template-columns: 1fr; gap: var(--space-md); }
.grid { grid-template-columns: 1fr; }
.grid3 { grid-template-columns: 1fr; }
.full { grid-column: 1; }
/* Larger tap targets on mobile */
.steps li { padding: var(--space-sm) 0; min-height: 44px; align-items: center; }
.steps li::before { min-width: 24px; height: 24px; font-size: 11px; }
.quick-link-row { flex-wrap: wrap; gap: var(--space-xs); }
.quick-link-row a.link-btn { min-height: 36px; display: flex; align-items: center; }
.site-header .site-nav { display: none; } /* collapsed on mobile — hamburger future state */
.site-header { padding: var(--space-md); }
.today-strip { gap: var(--space-md); padding: var(--space-md); }
.pipeline-flow { flex-direction: column; }
.flow-arrow { transform: rotate(90deg); align-self: flex-start; margin-left: 70px; }
.page-header h1 { font-size: 20px; }
.initiative-card { padding: var(--space-lg); }
.rtable { font-size: 12px; }
.rtable td, .rtable th { padding: 6px 8px; }
}
/* ============================================================
RESPONSIVE — SMALL PHONE (< 480px)
============================================================ */
@media (max-width: 480px) {
.page { padding: var(--space-md) var(--space-sm); }
.panel { padding: var(--space-sm) var(--space-md); }
code { font-size: 11px; white-space: normal; word-break: break-all; }
.badge { font-size: 11px; padding: 3px 7px; }
}
/* ============================================================
PRINT (clean output if ever needed)
============================================================ */
@media print {
.site-header, .site-footer, .breadcrumb { display: none; }
.page { max-width: 100%; padding: 0; }
.panel { border: 1px solid #ccc; }
a[href]::after { content: ' (' attr(href) ')'; font-size: 9px; color: #666; }
}