/* =================================================================
NorthStar Compass — Brand Stylesheet
The single source of truth for colors, typography, and components.
Mirrors the northstar-web skill brand system.
================================================================= */
/* Google Fonts — load in of every page:
*/
:root {
/* Primary brand colors */
--cream: #F2EFE6;
--deep-navy: #202839;
--slate-blue: #4C5E6E;
--warm-taupe: #9C9989;
/* Neutrals */
--black: #000000;
--white: #FFFFFF;
/* Functional mappings */
--bg-primary: var(--cream);
--bg-dark: var(--deep-navy);
--bg-section-alt: var(--white);
--text-primary: var(--deep-navy);
--text-light: var(--cream);
--text-muted: var(--slate-blue);
--accent: var(--slate-blue);
--border-subtle: rgba(156, 153, 137, 0.3);
/* Compass-specific */
--status-pending: #C9A96E;
--status-success: #4C5E6E;
--status-error: #8B3A3A;
--status-info: #9C9989;
--surface-tint: rgba(156, 153, 137, 0.08);
--slider-track: rgba(76, 94, 110, 0.2);
--slider-thumb: var(--slate-blue);
--slider-fill: var(--deep-navy);
/* Typography */
--font-headline: 'Forum', 'Georgia', 'Times New Roman', serif;
--font-body: 'Nunito Sans', 'Avenir', 'Helvetica Neue', Arial, sans-serif;
/* Spacing scale */
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-5: 48px;
--space-6: 64px;
--space-7: 96px;
--space-8: 140px;
/* Layout */
--content-max: 1200px;
--content-wide: 1400px;
--header-height: 72px;
/* Animation */
--ease-luxury: cubic-bezier(0.16, 1, 0.3, 1);
--duration-quick: 0.3s;
--duration-base: 0.5s;
--duration-slow: 0.8s;
}
/* =================================================================
RESET + BASE
================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
font-family: var(--font-body);
color: var(--text-primary);
background: var(--bg-primary);
line-height: 1.7;
font-size: 17px;
font-weight: 400;
}
img, svg { display: block; max-width: 100%; }
a {
color: var(--text-primary);
text-decoration: none;
transition: color var(--duration-quick) ease;
}
a:hover { color: var(--accent); }
/* =================================================================
TYPOGRAPHY
================================================================= */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-headline);
text-transform: uppercase;
letter-spacing: 0.03em;
font-weight: normal;
color: var(--text-primary);
margin: 0 0 var(--space-3);
line-height: 1.15;
}
h1 { font-size: clamp(40px, 5vw, 64px); letter-spacing: 0.04em; }
h2 { font-size: clamp(32px, 3.5vw, 48px); }
h3 { font-size: clamp(24px, 2.5vw, 32px); }
h4 { font-size: 22px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }
p { margin: 0 0 var(--space-2); }
.subline {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: 600;
font-size: 13px;
color: var(--text-muted);
margin-bottom: var(--space-2);
}
.eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.18em;
font-weight: 700;
font-size: 12px;
color: var(--accent);
margin-bottom: var(--space-1);
}
.metadata, .caption {
font-size: 13px;
font-weight: 300;
color: var(--text-muted);
}
/* =================================================================
LAYOUT
================================================================= */
.container {
width: 100%;
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--space-3);
}
.container-wide {
max-width: var(--content-wide);
}
.section {
padding: var(--space-8) 0;
}
.section-tight {
padding: var(--space-6) 0;
}
.section-dark {
background: var(--bg-dark);
color: var(--text-light);
}
.section-dark h1, .section-dark h2, .section-dark h3,
.section-dark h4, .section-dark h5, .section-dark h6 {
color: var(--text-light);
}
.section-dark .subline {
color: var(--warm-taupe);
}
.section-alt {
background: var(--bg-section-alt);
}
@media (max-width: 768px) {
.section { padding: var(--space-6) 0; }
body { font-size: 16px; }
}
/* =================================================================
BUTTONS
================================================================= */
.btn {
display: inline-block;
font-family: var(--font-body);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 14px;
padding: 18px 36px;
border: 1.5px solid transparent;
cursor: pointer;
transition: background var(--duration-quick) ease,
color var(--duration-quick) ease,
transform var(--duration-quick) ease;
text-align: center;
text-decoration: none;
/* No border-radius — flat, square corners throughout */
}
.btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.btn-primary {
background: var(--deep-navy);
color: var(--cream);
border-color: var(--deep-navy);
}
.btn-primary:hover:not(:disabled) {
background: var(--slate-blue);
border-color: var(--slate-blue);
transform: translateY(-1px);
}
.btn-secondary {
background: transparent;
color: var(--deep-navy);
border-color: var(--deep-navy);
}
.btn-secondary:hover:not(:disabled) {
background: var(--deep-navy);
color: var(--cream);
}
.btn-ghost {
background: transparent;
color: var(--text-muted);
border-color: transparent;
padding: 14px 24px;
letter-spacing: 0.1em;
}
.btn-ghost:hover:not(:disabled) {
color: var(--deep-navy);
}
.btn-large { padding: 22px 48px; font-size: 15px; }
.btn-small { padding: 12px 22px; font-size: 13px; }
/* =================================================================
FORMS
================================================================= */
label {
display: block;
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-muted);
margin-bottom: var(--space-1);
}
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="date"],
textarea, select {
width: 100%;
font-family: var(--font-body);
font-size: 16px;
padding: 14px 16px;
border: 1.5px solid var(--border-subtle);
background: var(--white);
color: var(--text-primary);
transition: border-color var(--duration-quick) ease;
/* No border-radius */
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--slate-blue);
}
textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.field { margin-bottom: var(--space-3); }
.field-help {
font-size: 13px;
color: var(--text-muted);
margin-top: var(--space-1);
}
.field-error {
font-size: 13px;
color: var(--status-error);
margin-top: var(--space-1);
}
/* =================================================================
CARDS
================================================================= */
.card {
background: var(--white);
border: 1px solid var(--border-subtle);
padding: var(--space-4);
/* No box-shadow. No border-radius. */
}
.card-dark {
background: var(--deep-navy);
border-color: var(--slate-blue);
color: var(--cream);
}
.card-dark h1, .card-dark h2, .card-dark h3, .card-dark h4 {
color: var(--cream);
}
/* =================================================================
COMPASS SLIDER (tier selector — the central interaction)
================================================================= */
.compass-slider {
--thumb-size: 28px;
--track-height: 4px;
width: 100%;
position: relative;
margin: var(--space-4) 0 var(--space-3);
user-select: none;
}
.compass-slider .track {
position: relative;
height: var(--track-height);
background: var(--slider-track);
cursor: pointer;
}
.compass-slider .fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: var(--slider-fill);
pointer-events: none;
transition: width var(--duration-quick) var(--ease-luxury);
}
.compass-slider .thumb {
width: var(--thumb-size);
height: var(--thumb-size);
background: var(--slate-blue);
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
cursor: grab;
transition: left var(--duration-quick) var(--ease-luxury),
transform var(--duration-quick) ease;
/* Square thumb — no border-radius */
}
.compass-slider .thumb:hover {
background: var(--deep-navy);
transform: translate(-50%, -50%) scale(1.1);
}
.compass-slider .thumb:active,
.compass-slider .thumb.dragging {
cursor: grabbing;
background: var(--deep-navy);
}
.compass-slider .stops {
display: flex;
justify-content: space-between;
margin-top: var(--space-2);
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.15em;
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
}
.compass-slider .stop {
cursor: pointer;
padding: 4px 8px;
transition: color var(--duration-quick) ease;
}
.compass-slider .stop:hover { color: var(--deep-navy); }
.compass-slider .stop.active { color: var(--deep-navy); font-weight: 700; }
/* =================================================================
STATUS BADGES
================================================================= */
.badge {
display: inline-block;
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 11px;
padding: 6px 12px;
border: 1px solid currentColor;
background: transparent;
}
.badge-pending { color: var(--status-pending); }
.badge-success { color: var(--status-success); }
.badge-error { color: var(--status-error); }
.badge-info { color: var(--status-info); }
.badge-discovery, .badge-designing, .badge-pricing, .badge-tuning {
color: var(--status-pending);
}
.badge-pending_audit, .badge-pending_admin {
color: var(--accent);
}
.badge-audit_failed { color: var(--status-error); }
.badge-delivered { color: var(--status-success); }
/* =================================================================
NAVIGATION
================================================================= */
.nav {
position: sticky;
top: 0;
z-index: 100;
height: var(--header-height);
background: rgba(242, 239, 230, 0.96);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-subtle);
}
.nav-inner {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
max-width: var(--content-wide);
margin: 0 auto;
padding: 0 var(--space-3);
}
.nav-logo {
height: 32px;
display: flex;
align-items: center;
}
.nav-logo img { height: 100%; width: auto; }
.nav-links {
display: flex;
gap: var(--space-5);
list-style: none;
margin: 0;
padding: 0;
}
.nav-links a {
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-primary);
}
@media (max-width: 768px) {
.nav-links { display: none; }
}
/* =================================================================
ADMIN NAV — extracted partial (ui/js/admin-nav.js).
Grouped sections with subtle separators, active-page highlight,
responsive hamburger below 1100px.
================================================================= */
.admin-nav .nav-links-wrap {
display: flex;
align-items: center;
gap: var(--space-3);
}
.admin-nav .nav-group {
display: flex;
gap: var(--space-2);
list-style: none;
margin: 0;
padding: 0;
}
.admin-nav .nav-group .nav-link {
font-family: var(--font-body);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-primary);
padding: 6px 4px;
border-bottom: 2px solid transparent;
transition: color var(--duration-quick) ease, border-color var(--duration-quick) ease;
}
.admin-nav .nav-group .nav-link:hover {
color: var(--accent);
}
.admin-nav .nav-group .nav-link.active {
color: var(--accent);
border-bottom-color: var(--accent);
}
.admin-nav .nav-group .nav-link-subtle {
color: var(--text-muted);
font-weight: 400;
letter-spacing: 0.1em;
}
.admin-nav .nav-sep {
color: var(--border-subtle);
font-size: 18px;
user-select: none;
}
.admin-nav .nav-toggle {
display: none;
background: transparent;
border: 1px solid var(--border-subtle);
width: 40px;
height: 40px;
cursor: pointer;
padding: 8px;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
}
.admin-nav .nav-toggle span {
display: block;
height: 2px;
background: var(--text-primary);
transition: transform var(--duration-quick) ease;
}
@media (max-width: 1100px) {
.admin-nav .nav-toggle { display: flex; }
.admin-nav .nav-links-wrap {
display: none;
position: absolute;
top: var(--header-height);
left: 0;
right: 0;
background: rgba(242, 239, 230, 0.98);
backdrop-filter: blur(12px);
flex-direction: column;
align-items: flex-start;
padding: var(--space-3);
gap: var(--space-2);
border-bottom: 1px solid var(--border-subtle);
}
.admin-nav .nav-links-wrap.open {
display: flex;
}
.admin-nav .nav-group {
flex-direction: column;
gap: var(--space-1);
width: 100%;
}
.admin-nav .nav-sep {
display: none;
}
}
/* =================================================================
CONVERSATIONAL UI (Scout questionnaire)
================================================================= */
.conversation {
max-width: 720px;
margin: 0 auto;
padding: var(--space-5) var(--space-3);
}
.bubble {
margin-bottom: var(--space-3);
animation: fade-in-up var(--duration-base) var(--ease-luxury);
}
.bubble.scout {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.bubble.user {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.bubble-content {
max-width: 80%;
padding: var(--space-2) var(--space-3);
font-size: 16px;
line-height: 1.65;
/* No border-radius */
}
.bubble.scout .bubble-content {
background: var(--white);
border: 1px solid var(--border-subtle);
color: var(--text-primary);
}
.bubble.user .bubble-content {
background: var(--deep-navy);
color: var(--cream);
}
.bubble-meta {
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: var(--space-1);
}
.compose {
position: sticky;
bottom: 0;
background: var(--bg-primary);
padding: var(--space-3) 0;
border-top: 1px solid var(--border-subtle);
}
.compose-row {
display: flex;
gap: var(--space-2);
}
.compose textarea {
flex: 1;
min-height: 56px;
max-height: 200px;
}
/* =================================================================
ANIMATIONS
================================================================= */
@keyframes fade-in-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity var(--duration-slow) var(--ease-luxury),
transform var(--duration-slow) var(--ease-luxury);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.stagger > .reveal:nth-child(2) { transition-delay: 0.1s; }
.stagger > .reveal:nth-child(3) { transition-delay: 0.2s; }
.stagger > .reveal:nth-child(4) { transition-delay: 0.3s; }
.stagger > .reveal:nth-child(5) { transition-delay: 0.4s; }
/* Loading dots for Scout thinking */
.thinking-dots {
display: inline-flex;
gap: 6px;
padding: var(--space-2) var(--space-3);
}
.thinking-dots span {
width: 6px; height: 6px;
background: var(--text-muted);
animation: pulse 1.4s ease-in-out infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulse {
0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
40% { opacity: 1; transform: scale(1); }
}
/* =================================================================
UTILITIES
================================================================= */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: var(--space-1); } .mb-1 { margin-bottom: var(--space-1); }
.mt-2 { margin-top: var(--space-2); } .mb-2 { margin-bottom: var(--space-2); }
.mt-3 { margin-top: var(--space-3); } .mb-3 { margin-bottom: var(--space-3); }
.mt-4 { margin-top: var(--space-4); } .mb-4 { margin-bottom: var(--space-4); }
.mt-5 { margin-top: var(--space-5); } .mb-5 { margin-bottom: var(--space-5); }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-col { display: flex; flex-direction: column; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.muted { color: var(--text-muted); }
.numeric { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.hr {
border: 0;
border-top: 1px solid var(--border-subtle);
margin: var(--space-4) 0;
}