/* ===================================
VSVSV - Main Stylesheet
=================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');
/* ===== CSS Variables ===== */
:root {
/* Brand palette — VSVSV (see docs/brand-guidelines.md) */
--brand-navy: #002D62; /* primary */
--brand-navy-dark: #001B3D; /* deeper navy for gradients/footer */
--brand-crimson: #A6192E; /* energy / accent */
--brand-crimson-dark: #7d1322;
--brand-sky: #6AAAD7; /* light accent on light backgrounds */
--brand-sky-light: #A9CFE8; /* accent on dark backgrounds (better contrast) */
/* Semantic aliases (kept so existing rules don't need renaming) */
--ncc-green: var(--brand-navy); /* legacy name → now navy */
--military-olive: var(--brand-crimson); /* legacy name → now crimson */
--gold-accent: var(--brand-sky-light); /* legacy name → now light sky */
/* Secondary Colors */
--white: #ffffff;
--light-gray: #f5f5f5;
--dark-gray: #1f2937;
--text-gray: #4a5a6e; /* was #5b6b7f: 3.15:1 on white, below the 4.5:1 AA floor */
/* Status Colors */
--success: #1e8e5a;
--warning: #c98a00;
--danger: var(--brand-crimson);
--info: var(--brand-sky);
/* Typography */
--font-heading: 'Montserrat', system-ui, sans-serif;
--font-body: 'Montserrat', system-ui, sans-serif;
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 2rem;
--spacing-lg: 3rem;
--spacing-xl: 4rem;
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
/* Shadows */
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
/* Transitions */
--transition: all 0.3s ease;
}
/* ===== Reset & Base Styles ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
/* Brand-navy on so the brief blank-screen phase between page
navigations matches the navy navbar instead of flashing pure white.
The body sits on top of html and carries the white content background,
so this is only visible during the cross-page paint gap. */
background-color: var(--brand-navy);
}
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--dark-gray);
background-color: var(--white);
overflow-x: hidden;
}
/* ─────────────────────────────────────────────────────────────────────────
Soft cross-page navigation (View Transitions API).
Modern Chromium (126+) and Safari (18+) animate a cross-fade between
pages when this is opted in. Browsers without support silently ignore
the rule — no JS shim required. The navbar gets a transition-name so it
appears to persist (rather than re-paint) between pages in supporting
browsers. Paired with the html navy background above, the visual jump
from page to page becomes a soft fade instead of a white "burst".
───────────────────────────────────────────────────────────────────────── */
@view-transition {
navigation: auto;
}
@media (prefers-reduced-motion: no-preference) {
.navbar {
view-transition-name: site-navbar;
}
.footer {
view-transition-name: site-footer;
}
}
/* CSS-only fade-in for content cards. Previously this was scripted in
main.js by setting `opacity: 0` after page paint and animating to 1 —
that caused a visible blink (paint → JS-snap-invisible → fade). Doing
it in CSS via @starting-style + @keyframes keeps the cards visible from
first paint and animates the entry without a snap. Browsers without
@starting-style support just see the cards appear without animation —
never invisible. */
@keyframes nccFadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
.feature-card,
.course-card,
.update-card,
.stat-card {
animation: nccFadeUp 0.5s ease-out both;
}
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
color: var(--ncc-green);
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }
p {
margin-bottom: 1rem;
color: var(--text-gray);
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition);
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* ===== Accessibility Utilities ===== */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
ul {
list-style: none;
}
/* ===== Container ===== */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
/* ===== Buttons ===== */
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 600;
text-align: center;
border-radius: var(--radius-md);
cursor: pointer;
border: 2px solid transparent;
transition: var(--transition);
white-space: nowrap;
}
.btn i {
margin-right: 0.5rem;
}
.btn-primary {
background-color: var(--ncc-green);
color: var(--white);
border-color: var(--ncc-green);
}
.btn-primary:hover {
background-color: var(--military-olive);
border-color: var(--military-olive);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-secondary {
background-color: var(--military-olive);
color: var(--white);
border-color: var(--military-olive);
}
.btn-secondary:hover {
background-color: var(--ncc-green);
border-color: var(--ncc-green);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-outline {
background-color: transparent;
color: var(--white);
border-color: var(--white);
}
.btn-outline:hover {
background-color: var(--white);
color: var(--ncc-green);
}
/* .btn-outline-on-light — same outline shape as .btn-outline but with navy
ink + navy border so it stays visible when placed on a white/light card.
Use this instead of .btn-outline inside .course-card / .spec-card. */
.btn-outline-on-light,
.course-card .btn-outline,
.spec-card .btn-outline {
background-color: transparent;
color: var(--brand-navy);
border-color: var(--brand-navy);
}
/* One-time course price shown on catalog cards (courses.html + index live grid). */
.course-price {
font-size: 1.35rem;
font-weight: 700;
color: var(--brand-navy);
margin: 6px 0 12px;
}
.course-price .course-price-note {
font-size: 0.8rem;
font-weight: 500;
color: #5b6b7f;
}
.course-price-free {
color: #1a7f4b;
}
.btn-outline-on-light:hover,
.course-card .btn-outline:hover,
.spec-card .btn-outline:hover {
background-color: var(--brand-navy);
color: var(--white);
}
/* "Coming soon" course-card: visually clear it is not purchasable. */
.course-card-comingsoon {
opacity: 0.78;
border: 1px dashed rgba(0, 45, 98, 0.35);
}
.course-card-comingsoon .course-badge {
background: #6b7280;
color: #fff;
}
.course-card-empty {
grid-column: 1 / -1;
text-align: center;
padding: 2rem;
}
.btn-light {
background-color: var(--white);
color: var(--ncc-green);
border-color: var(--white);
}
.btn-light:hover {
background-color: var(--brand-crimson);
color: var(--white);
border-color: var(--brand-crimson);
}
.btn-sm {
padding: 0.5rem 1rem;
font-size: 0.9rem;
}
.btn-lg {
padding: 1rem 2rem;
font-size: 1.1rem;
}
/* ===== Header & Navigation ===== */
.header {
background-color: var(--ncc-green);
box-shadow: var(--shadow-md);
position: sticky;
top: 0;
z-index: 1000;
}
.navbar {
padding: 1rem 0;
/* Make every navbar variant lay out as a single horizontal row at
desktop widths. Without this, pages using the
pattern (about/login/register/courses/forgot-pw/course-detail/404)
stack the brand and the menu on separate lines because