/* ============================================================================
sc-docs.css — Space Cadets Shared Docs Stylesheet
Repo: SC-SalesMarketing (canonical) / SC-Automation (bootstrap origin)
Hosted: docs.srv1271694.hstgr.cloud/sc-docs.css
============================================================================ */
/* ── Brand Tokens ──────────────────────────────────────────────────────────── */
:root {
/* Core palette */
--sc-black: #000000;
--sc-white: #FFFFFF;
--sc-yellow: #F7B700; /* Primary accent */
--sc-blue: #003158; /* Secondary accent */
/* Yellow tints */
--sc-yellow-light: #FFF8E0;
--sc-yellow-faint: #FEF3C7;
/* Greys */
--sc-grey: #F2F2F2;
--sc-grey-light: #E5E5E5;
--sc-grey-mid: #6B6B6B;
--sc-grey-dark: #4A4A4A;
/* Semantic status */
--sc-green: #065F46;
--sc-green-light: #ECFDF5;
--sc-red: #991B1B;
--sc-red-light: #FEF2F2;
--sc-blue-light: #EFF6FF;
/* Typography */
--sc-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
--sc-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
--sc-font-mono: 'DM Mono', 'Courier New', monospace;
}
/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* ── Site Navigation Bar ───────────────────────────────────────────────────── */
/*
Usage: Add as the first element inside on every page.
Add this script before to close the dropdown on outside clicks:
*/
.sc-sitenav {
position: sticky;
top: 0;
z-index: 200;
background: var(--sc-black);
border-bottom: 2px solid var(--sc-yellow);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1.5rem;
height: 48px;
font-family: var(--sc-font-sans);
}
.sc-sitenav-brand {
font-size: 0.875rem;
font-weight: 700;
color: var(--sc-yellow);
text-decoration: none;
letter-spacing: 0.01em;
flex-shrink: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.sc-sitenav-logo {
height: 28px;
width: 28px;
display: block;
flex-shrink: 0;
}
/* ── Right-side nav (Home + Menu dropdown) ── */
.sc-sitenav-right {
display: flex;
align-items: center;
gap: 0.5rem;
}
.sc-sitenav-home {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
padding: 0.3rem 0.65rem;
border-radius: 4px;
transition: color 0.15s ease, background 0.15s ease;
white-space: nowrap;
}
.sc-sitenav-home:hover {
color: var(--sc-white);
background: rgba(255, 255, 255, 0.08);
}
.sc-sitenav-home.active {
color: var(--sc-yellow);
font-weight: 600;
}
/* ── Dropdown menu ── */
.sc-sitenav-menu {
position: relative;
}
.sc-sitenav-menu-btn {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.6);
font-family: inherit;
font-size: 0.8rem;
padding: 0.3rem 0.75rem;
border-radius: 4px;
cursor: pointer;
transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
white-space: nowrap;
line-height: 1.4;
}
.sc-sitenav-menu-btn:hover,
.sc-sitenav-menu.open .sc-sitenav-menu-btn {
color: var(--sc-yellow);
background: rgba(247, 183, 0, 0.08);
border-color: rgba(247, 183, 0, 0.3);
}
.sc-sitenav-menu-dropdown {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 0;
background: #111111;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
min-width: 200px;
padding: 0.4rem 0;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
z-index: 300;
}
.sc-sitenav-menu.open .sc-sitenav-menu-dropdown {
display: block;
}
.sc-sitenav-menu-dropdown a {
display: block;
padding: 0.55rem 1rem;
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 0.8rem;
transition: background 0.12s ease, color 0.12s ease;
}
.sc-sitenav-menu-dropdown a:hover {
background: rgba(247, 183, 0, 0.08);
color: var(--sc-yellow);
}
.sc-sitenav-menu-dropdown a.active {
color: var(--sc-yellow);
font-weight: 600;
}
/* Legacy flat links (backward compat) */
.sc-sitenav-links {
display: flex;
align-items: center;
gap: 0.1rem;
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
.sc-sitenav-links::-webkit-scrollbar { display: none; }
.sc-sitenav-links a {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
padding: 0.3rem 0.65rem;
border-radius: 4px;
transition: color 0.15s ease, background 0.15s ease;
white-space: nowrap;
}
.sc-sitenav-links a:hover {
color: var(--sc-white);
background: rgba(255, 255, 255, 0.08);
}
.sc-sitenav-links a.active {
color: var(--sc-yellow);
font-weight: 600;
}
.sc-sitenav-sep {
color: rgba(255, 255, 255, 0.2);
font-size: 0.7rem;
padding: 0 0.15rem;
user-select: none;
}
@media (max-width: 640px) {
.sc-sitenav { padding: 0 1rem; height: 44px; }
.sc-sitenav-brand { font-size: 0.8rem; }
.sc-sitenav-logo { height: 24px; width: 24px; }
.sc-sitenav-home { font-size: 0.72rem; padding: 0.25rem 0.45rem; }
.sc-sitenav-menu-btn { font-size: 0.72rem; }
.sc-sitenav-links a { font-size: 0.72rem; padding: 0.25rem 0.45rem; }
}
/* ── Site Footer ───────────────────────────────────────────────────────────── */
/*
Usage: Add before on every page.