318 lines
8.0 KiB
CSS
318 lines
8.0 KiB
CSS
/* FDSA Design System — All Pages
|
|
Dark, sharp, typography-driven. Mechanical oranges on near-black. */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700;9..40,800&family=DM+Mono:wght@400;500&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0,0&display=swap');
|
|
|
|
:root {
|
|
--vp-c-bg: #0a0a0a;
|
|
--vp-c-bg-soft: #111;
|
|
--vp-c-bg-mute: #181818;
|
|
--vp-c-bg-alt: #080808;
|
|
--vp-c-bg-elv: #141414;
|
|
--vp-c-divider: #1a1a1a;
|
|
--vp-c-border: #222;
|
|
--vp-c-gutter: #141414;
|
|
--vp-c-text-1: #e8e8e8;
|
|
--vp-c-text-2: #888;
|
|
--vp-c-text-3: #555;
|
|
--vp-c-brand-1: #d95c41;
|
|
--vp-c-brand-2: #e87d2f;
|
|
--vp-c-brand-3: #b8432a;
|
|
--vp-c-brand-soft: rgba(217, 92, 65, 0.08);
|
|
--vp-font-family-base: 'DM Sans', ui-sans-serif, sans-serif;
|
|
--vp-font-family-mono: 'DM Mono', ui-monospace, monospace;
|
|
}
|
|
|
|
/* Light mode (toggle - keep as is, most users see dark) */
|
|
:root:not(.dark) {
|
|
--vp-c-bg: #f8f8f5;
|
|
--vp-c-bg-soft: #fff;
|
|
--vp-c-bg-mute: #efeee9;
|
|
--vp-c-bg-alt: #f0efea;
|
|
--vp-c-bg-elv: #fff;
|
|
--vp-c-divider: #dddcd5;
|
|
--vp-c-border: #d0cfc8;
|
|
--vp-c-text-1: #1a1a1a;
|
|
--vp-c-text-2: #555;
|
|
--vp-c-text-3: #888;
|
|
--vp-c-brand-1: #c44a30;
|
|
--vp-c-brand-2: #d95c41;
|
|
}
|
|
|
|
/* Material Icons global */
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
display: inline-block;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* Base */
|
|
body {
|
|
font-family: var(--vp-font-family-base);
|
|
font-weight: 400;
|
|
-webkit-font-smoothing: antialiased;
|
|
background: var(--vp-c-bg);
|
|
color: var(--vp-c-text-1);
|
|
}
|
|
|
|
::selection { background: var(--vp-c-brand-1); color: #fff; }
|
|
|
|
/* === TOP NAV === */
|
|
.VPNav {
|
|
border-bottom: 1px solid var(--vp-c-divider) !important;
|
|
background: rgba(10,10,10,0.85) !important;
|
|
backdrop-filter: blur(16px) !important;
|
|
}
|
|
/* FDSA brand in nav — orange terminal icon */
|
|
.VPNavBarTitle .title {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
gap: 8px !important;
|
|
font-family: 'DM Sans', sans-serif !important;
|
|
font-size: 20px !important;
|
|
font-weight: 800 !important;
|
|
letter-spacing: -0.5px !important;
|
|
color: #e8e8e8 !important;
|
|
}
|
|
.VPNavBarTitle .title::before {
|
|
content: 'terminal';
|
|
font-family: 'Material Symbols Outlined';
|
|
font-size: 22px;
|
|
color: #d95c41;
|
|
}
|
|
.VPNavBarTitle .logo {
|
|
display: none !important;
|
|
}
|
|
/* Nav link hover */
|
|
.VPNavBarMenuLink:hover, .VPNavBarMenuLink.active {
|
|
color: var(--vp-c-brand-1) !important;
|
|
}
|
|
|
|
/* === SIDEBAR — FDSA style === */
|
|
.VPSidebar {
|
|
background: var(--vp-c-bg-alt) !important;
|
|
border-right: 1px solid var(--vp-c-divider) !important;
|
|
width: 240px !important;
|
|
padding-top: 8px !important;
|
|
}
|
|
.VPSidebar .item .text {
|
|
font-size: 13px !important;
|
|
font-weight: 500 !important;
|
|
transition: color 0.15s !important;
|
|
}
|
|
.VPSidebar .item .text:hover {
|
|
color: var(--vp-c-brand-1) !important;
|
|
}
|
|
.VPSidebar .group + .group {
|
|
border-top: 1px solid var(--vp-c-divider) !important;
|
|
margin-top: 8px !important;
|
|
padding-top: 8px !important;
|
|
}
|
|
/* Active sidebar item */
|
|
.VPSidebar .item.active .text {
|
|
color: var(--vp-c-brand-1) !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
/* Sidebar link hover bg */
|
|
.VPSidebar .item:hover {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* === CONTENT AREA === */
|
|
.VPContent {
|
|
padding-left: 240px;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.VPContent { padding-left: 0; }
|
|
}
|
|
|
|
/* === DOC PAGES — glass card wrapper === */
|
|
.VPDoc:not(.VPDoc--blank) > .container > .content {
|
|
background: rgba(17,17,17,0.5) !important;
|
|
backdrop-filter: blur(8px) !important;
|
|
border: 1px solid rgba(255,255,255,0.04) !important;
|
|
border-radius: 12px !important;
|
|
padding: 0 32px !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.vp-doc {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 32px 0 48px;
|
|
}
|
|
|
|
.vp-doc h1 {
|
|
font-size: 2.25rem !important;
|
|
font-weight: 800 !important;
|
|
letter-spacing: -0.5px !important;
|
|
line-height: 1.1 !important;
|
|
margin-bottom: 24px !important;
|
|
color: var(--vp-c-text-1) !important;
|
|
}
|
|
|
|
.vp-doc h2 {
|
|
font-size: 1.375rem !important;
|
|
font-weight: 700 !important;
|
|
letter-spacing: -0.3px !important;
|
|
padding-top: 32px !important;
|
|
margin-top: 40px !important;
|
|
margin-bottom: 16px !important;
|
|
border-top: 1px solid var(--vp-c-divider) !important;
|
|
color: var(--vp-c-text-1) !important;
|
|
}
|
|
|
|
.vp-doc h3 {
|
|
font-size: 1.0625rem !important;
|
|
font-weight: 600 !important;
|
|
margin-top: 28px !important;
|
|
margin-bottom: 12px !important;
|
|
color: var(--vp-c-text-1) !important;
|
|
}
|
|
|
|
.vp-doc p {
|
|
font-size: 0.9375rem !important;
|
|
line-height: 1.7 !important;
|
|
color: var(--vp-c-text-1) !important;
|
|
margin-bottom: 16px !important;
|
|
}
|
|
|
|
/* Links */
|
|
.vp-doc a {
|
|
color: var(--vp-c-brand-1) !important;
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
transition: color 0.2s;
|
|
}
|
|
.vp-doc a:hover { color: var(--vp-c-brand-2) !important; }
|
|
|
|
/* Code blocks — glass cards */
|
|
.vp-doc div[class*='language-'] {
|
|
border-radius: 10px !important;
|
|
border: 1px solid var(--vp-c-border) !important;
|
|
background: rgba(17,17,17,0.85) !important;
|
|
backdrop-filter: blur(12px) !important;
|
|
margin: 24px 0 !important;
|
|
}
|
|
|
|
.vp-code {
|
|
font-family: 'DM Mono', ui-monospace, monospace !important;
|
|
font-size: 13px !important;
|
|
line-height: 1.7 !important;
|
|
}
|
|
|
|
/* Inline code */
|
|
.vp-doc code {
|
|
font-family: 'DM Mono', ui-monospace, monospace !important;
|
|
font-size: 0.8125rem !important;
|
|
background: var(--vp-c-bg-mute) !important;
|
|
border: 1px solid var(--vp-c-border) !important;
|
|
padding: 2px 8px !important;
|
|
border-radius: 6px !important;
|
|
color: var(--vp-c-text-1) !important;
|
|
}
|
|
|
|
/* Tables */
|
|
.vp-doc table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
border: 1px solid var(--vp-c-border);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
font-size: 0.875rem !important;
|
|
margin: 24px 0 !important;
|
|
}
|
|
.vp-doc th {
|
|
background: var(--vp-c-bg-mute);
|
|
font-weight: 600;
|
|
font-size: 0.75rem !important;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--vp-c-text-2);
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--vp-c-border);
|
|
}
|
|
.vp-doc td {
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--vp-c-divider);
|
|
font-size: 0.875rem !important;
|
|
}
|
|
.vp-doc tr:last-child td { border-bottom: none; }
|
|
.vp-doc tr:hover td { background: var(--vp-c-bg-soft); }
|
|
|
|
/* Blockquotes */
|
|
.vp-doc blockquote {
|
|
border-left: 3px solid var(--vp-c-brand-1) !important;
|
|
background: var(--vp-c-brand-soft) !important;
|
|
padding: 16px 24px !important;
|
|
border-radius: 0 10px 10px 0 !important;
|
|
margin: 24px 0 !important;
|
|
}
|
|
.vp-doc blockquote p {
|
|
font-size: 0.875rem !important;
|
|
color: var(--vp-c-text-2) !important;
|
|
font-style: italic !important;
|
|
}
|
|
|
|
/* Images */
|
|
.vp-doc img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 10px;
|
|
margin: 24px 0;
|
|
border: 1px solid var(--vp-c-border);
|
|
}
|
|
|
|
/* Lists */
|
|
.vp-doc ul, .vp-doc ol {
|
|
font-size: 0.9375rem !important;
|
|
line-height: 1.7 !important;
|
|
padding-left: 1.5em !important;
|
|
margin-bottom: 16px !important;
|
|
}
|
|
.vp-doc li { margin: 6px 0 !important; }
|
|
|
|
/* Dividers */
|
|
.vp-doc hr {
|
|
border: none;
|
|
border-top: 1px solid var(--vp-c-divider);
|
|
margin: 48px 0;
|
|
}
|
|
|
|
/* Custom blocks (tips, warnings) */
|
|
.custom-block {
|
|
border-radius: 10px !important;
|
|
border: 1px solid var(--vp-c-border) !important;
|
|
padding: 16px 20px !important;
|
|
margin: 24px 0 !important;
|
|
}
|
|
.custom-block.tip {
|
|
border-color: rgba(217,92,65,0.3) !important;
|
|
background: rgba(217,92,65,0.06) !important;
|
|
}
|
|
|
|
/* Footer */
|
|
.VPFooter {
|
|
border-top: 1px solid var(--vp-c-divider) !important;
|
|
background: var(--vp-c-bg-alt) !important;
|
|
padding: 24px 0 !important;
|
|
}
|
|
.VPFooter .message {
|
|
font-size: 13px !important;
|
|
color: var(--vp-c-text-3) !important;
|
|
}
|
|
|
|
/* === RESPONSIVE === */
|
|
@media (max-width: 768px) {
|
|
.vp-doc { padding: 24px 16px; }
|
|
.vp-doc h1 { font-size: 1.75rem !important; }
|
|
.vp-doc h2 { font-size: 1.125rem !important; }
|
|
.vp-doc div[class*='language-'] { margin: 16px 0; }
|
|
}
|
|
|
|
/* Print */
|
|
@media print {
|
|
.VPNav, .VPSidebar, .VPFooter { display: none !important; }
|
|
}
|