feat(website): retheme to Deep Space design system with local fonts
Replace CSS variables, hardcoded colors, font families, syntax token colors, and banner styling. Swap Google Fonts for self-hosted Manrope and IBM Plex Mono woff2 files. Update theme-color meta tags and remove testing-banner--light variant across all 19 HTML files. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jason Staack
@@ -1,8 +1,17 @@
|
||||
/* Local font loading — no third-party requests */
|
||||
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/manrope-v20-latin-regular.woff2') format('woff2'); }
|
||||
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/manrope-v20-latin-500.woff2') format('woff2'); }
|
||||
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/manrope-v20-latin-600.woff2') format('woff2'); }
|
||||
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/manrope-v20-latin-700.woff2') format('woff2'); }
|
||||
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/manrope-v20-latin-800.woff2') format('woff2'); }
|
||||
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-mono-v20-latin-regular.woff2') format('woff2'); }
|
||||
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-mono-v20-latin-500.woff2') format('woff2'); }
|
||||
|
||||
/* ==========================================================================
|
||||
TOD - The Other Dude
|
||||
Fleet Management Platform for MikroTik RouterOS
|
||||
|
||||
Premium stylesheet — dark landing + light docs
|
||||
Premium stylesheet — Deep Space design system
|
||||
========================================================================== */
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
@@ -10,32 +19,32 @@
|
||||
-------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
/* Landing page (dark) */
|
||||
--bg-deep: #040810;
|
||||
--bg-primary: #0A1628;
|
||||
--bg-surface: #111B2E;
|
||||
--bg-elevated: #182438;
|
||||
--text-primary: #F1F5F9;
|
||||
--text-secondary: #94A3B8;
|
||||
--text-muted: #8494A7;
|
||||
--accent: #2A9D8F;
|
||||
--accent-hover: #3DB8A9;
|
||||
--accent-glow: rgba(42, 157, 143, 0.12);
|
||||
--accent-secondary: #8B1A1A;
|
||||
--border: rgba(148, 163, 184, 0.08);
|
||||
--border-accent: rgba(42, 157, 143, 0.2);
|
||||
/* Landing page — Deep Space */
|
||||
--bg-deep: #111113;
|
||||
--bg-primary: #111113;
|
||||
--bg-surface: #141420;
|
||||
--bg-elevated: #1A1A2E;
|
||||
--text-primary: #E4E4ED;
|
||||
--text-secondary: #8A8AA0;
|
||||
--text-muted: #62627F;
|
||||
--accent: #818CF8;
|
||||
--accent-hover: #6366F1;
|
||||
--accent-glow: rgba(129, 140, 248, 0.12);
|
||||
--accent-secondary: #2A9D8F;
|
||||
--border: rgba(255, 255, 255, 0.06);
|
||||
--border-accent: #24243D;
|
||||
|
||||
/* Docs page (light) — applied contextually under .docs-page */
|
||||
--docs-bg: #FAFBFC;
|
||||
--docs-surface: #FFFFFF;
|
||||
--docs-text: #1E293B;
|
||||
--docs-text-secondary: #475569;
|
||||
--docs-text-muted: #6B7B8D;
|
||||
--docs-border: #E2E8F0;
|
||||
--docs-accent: #1F7A6F;
|
||||
--docs-sidebar-bg: #F8FAFC;
|
||||
--docs-code-bg: #F1F5F9;
|
||||
--docs-code-border: #E2E8F0;
|
||||
/* Docs page — Deep Space */
|
||||
--docs-bg: #141420;
|
||||
--docs-surface: #1E1E35;
|
||||
--docs-text: #E4E4ED;
|
||||
--docs-text-secondary: #8A8AA0;
|
||||
--docs-text-muted: #62627F;
|
||||
--docs-border: #24243D;
|
||||
--docs-accent: #818CF8;
|
||||
--docs-sidebar-bg: #141420;
|
||||
--docs-code-bg: #111113;
|
||||
--docs-code-border: #24243D;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
@@ -57,7 +66,7 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary);
|
||||
@@ -70,8 +79,9 @@ body {
|
||||
|
||||
/* Testing / Early Access banner */
|
||||
.testing-banner {
|
||||
background: linear-gradient(90deg, #8B1A1A, #a82222);
|
||||
color: #F5E6C8;
|
||||
background: #1A1A2E;
|
||||
border-bottom: 1px solid #24243D;
|
||||
color: #8A8AA0;
|
||||
text-align: center;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
@@ -81,26 +91,18 @@ body {
|
||||
}
|
||||
|
||||
.testing-banner strong {
|
||||
color: #F59E0B;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.testing-banner--light {
|
||||
background: linear-gradient(90deg, #fef3cd, #fce8b2);
|
||||
color: #664d03;
|
||||
}
|
||||
|
||||
.testing-banner--light strong {
|
||||
color: #523e02;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
code, pre, kbd, samp {
|
||||
font-family: "Fira Code", "SF Mono", "Cascadia Code", "Consolas", monospace;
|
||||
font-family: "IBM Plex Mono", "SF Mono", "Cascadia Code", "Consolas", monospace;
|
||||
}
|
||||
|
||||
img {
|
||||
@@ -179,7 +181,7 @@ ul, ol {
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
font-family: "Outfit", sans-serif;
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
@@ -234,8 +236,8 @@ ul, ol {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: var(--accent);
|
||||
color: #0A1628;
|
||||
font-family: "Outfit", sans-serif;
|
||||
color: #111113;
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
padding: 8px 20px;
|
||||
@@ -350,7 +352,7 @@ ul, ol {
|
||||
border: 1px solid rgba(42, 157, 143, 0.2);
|
||||
border-radius: 9999px;
|
||||
padding: 6px 16px;
|
||||
font-family: "Outfit", sans-serif;
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.05em;
|
||||
@@ -359,7 +361,7 @@ ul, ol {
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-family: "Outfit", sans-serif;
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: clamp(3rem, 6vw, 5rem);
|
||||
line-height: 1.05;
|
||||
@@ -412,8 +414,8 @@ ul, ol {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: var(--accent);
|
||||
color: #0A1628;
|
||||
font-family: "Outfit", sans-serif;
|
||||
color: #111113;
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
padding: 14px 28px;
|
||||
@@ -441,7 +443,7 @@ ul, ol {
|
||||
gap: 8px;
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
font-family: "Outfit", sans-serif;
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
padding: 14px 28px;
|
||||
@@ -480,7 +482,7 @@ ul, ol {
|
||||
|
||||
.section-label {
|
||||
color: var(--accent);
|
||||
font-family: "Outfit", sans-serif;
|
||||
font-family: "Manrope", sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
@@ -489,7 +491,7 @@ ul, ol {
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: "Outfit", sans-serif;
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 2.5rem;
|
||||
color: var(--text-primary);
|
||||
@@ -560,7 +562,7 @@ ul, ol {
|
||||
}
|
||||
|
||||
.arch-flow-step {
|
||||
font-family: "Fira Code", "SF Mono", monospace;
|
||||
font-family: "IBM Plex Mono", "SF Mono", monospace;
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-deep);
|
||||
@@ -584,7 +586,7 @@ ul, ol {
|
||||
|
||||
.cta-closing-title {
|
||||
color: var(--text-primary);
|
||||
font-family: "Outfit", sans-serif;
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 8px;
|
||||
@@ -632,7 +634,7 @@ ul, ol {
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-family: "Outfit", sans-serif;
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 1.15rem;
|
||||
margin-bottom: 10px;
|
||||
@@ -743,7 +745,7 @@ ul, ol {
|
||||
}
|
||||
|
||||
.arch-node-label {
|
||||
font-family: 'Outfit', sans-serif;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: var(--text-primary);
|
||||
@@ -752,7 +754,7 @@ ul, ol {
|
||||
.arch-node-tech {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
font-family: 'Fira Code', monospace;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
}
|
||||
|
||||
.arch-connector {
|
||||
@@ -777,7 +779,7 @@ ul, ol {
|
||||
.arch-connector-label {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
font-family: 'Fira Code', monospace;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
@@ -801,7 +803,7 @@ ul, ol {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
font-family: "Outfit", sans-serif;
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
@@ -929,7 +931,7 @@ ul, ol {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-family: 'Outfit', sans-serif;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
@@ -942,7 +944,7 @@ ul, ol {
|
||||
margin-top: 12px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
font-family: 'Outfit', sans-serif;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -987,13 +989,13 @@ ul, ol {
|
||||
.code-title {
|
||||
margin-left: auto;
|
||||
color: var(--text-muted);
|
||||
font-family: "Fira Code", monospace;
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.code-body {
|
||||
padding: 24px;
|
||||
font-family: "Fira Code", monospace;
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
overflow-x: auto;
|
||||
@@ -1019,7 +1021,7 @@ ul, ol {
|
||||
}
|
||||
|
||||
.code-string {
|
||||
color: #7DD3FC;
|
||||
color: #2A9D8F;
|
||||
}
|
||||
|
||||
.code-flag {
|
||||
@@ -1049,7 +1051,7 @@ ul, ol {
|
||||
}
|
||||
|
||||
.cta-title {
|
||||
font-family: "Outfit", sans-serif;
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 2.5rem;
|
||||
color: var(--text-primary);
|
||||
@@ -1186,7 +1188,7 @@ ul, ol {
|
||||
|
||||
.sidebar-section-title {
|
||||
color: var(--docs-text);
|
||||
font-family: "Outfit", sans-serif;
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
@@ -1208,18 +1210,18 @@ ul, ol {
|
||||
}
|
||||
|
||||
.sidebar-link:hover {
|
||||
background: rgba(226, 232, 240, 0.5);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: var(--docs-text);
|
||||
}
|
||||
|
||||
.sidebar-link--active {
|
||||
background: rgba(2, 132, 199, 0.08);
|
||||
background: rgba(129, 140, 248, 0.08);
|
||||
color: var(--docs-accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sidebar-link--active:hover {
|
||||
background: rgba(2, 132, 199, 0.12);
|
||||
background: rgba(129, 140, 248, 0.12);
|
||||
color: var(--docs-accent);
|
||||
}
|
||||
|
||||
@@ -1234,7 +1236,7 @@ ul, ol {
|
||||
border: 1px solid var(--docs-border);
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
font-family: "DM Sans", sans-serif;
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-size: 14px;
|
||||
color: var(--docs-text);
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
@@ -1246,7 +1248,7 @@ ul, ol {
|
||||
|
||||
.docs-search input:focus {
|
||||
border-color: var(--docs-accent);
|
||||
box-shadow: 0 0 0 3px rgba(31, 122, 111, 0.15);
|
||||
box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
|
||||
outline: 2px solid var(--docs-accent);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
@@ -1262,7 +1264,7 @@ ul, ol {
|
||||
|
||||
/* Content typography */
|
||||
.docs-content h1 {
|
||||
font-family: "Outfit", sans-serif;
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 2.25rem;
|
||||
color: var(--docs-text);
|
||||
@@ -1278,7 +1280,7 @@ ul, ol {
|
||||
}
|
||||
|
||||
.docs-content h2 {
|
||||
font-family: "Outfit", sans-serif;
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 2rem;
|
||||
color: var(--docs-text);
|
||||
@@ -1296,7 +1298,7 @@ ul, ol {
|
||||
}
|
||||
|
||||
.docs-content h3 {
|
||||
font-family: "Outfit", sans-serif;
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
color: var(--docs-text);
|
||||
@@ -1306,7 +1308,7 @@ ul, ol {
|
||||
}
|
||||
|
||||
.docs-content h4 {
|
||||
font-family: "Outfit", sans-serif;
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 1.15rem;
|
||||
color: var(--docs-text);
|
||||
@@ -1324,7 +1326,7 @@ ul, ol {
|
||||
color: var(--docs-accent);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
text-decoration-color: rgba(2, 132, 199, 0.3);
|
||||
text-decoration-color: rgba(129, 140, 248, 0.3);
|
||||
transition: text-decoration-color 0.2s ease, opacity 0.2s ease;
|
||||
}
|
||||
|
||||
@@ -1338,7 +1340,7 @@ ul, ol {
|
||||
background: var(--docs-code-bg);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: "Fira Code", monospace;
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-size: 0.875em;
|
||||
color: var(--docs-text);
|
||||
border: 1px solid var(--docs-code-border);
|
||||
@@ -1346,7 +1348,7 @@ ul, ol {
|
||||
|
||||
/* Code blocks */
|
||||
.docs-content pre {
|
||||
background: #1E293B;
|
||||
background: #111113;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
overflow-x: auto;
|
||||
@@ -1371,7 +1373,7 @@ ul, ol {
|
||||
|
||||
.docs-content pre code {
|
||||
background: transparent;
|
||||
color: #E2E8F0;
|
||||
color: #E4E4ED;
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
@@ -1391,7 +1393,7 @@ ul, ol {
|
||||
background: var(--docs-code-bg);
|
||||
text-align: left;
|
||||
padding: 12px 16px;
|
||||
font-family: "Outfit", sans-serif;
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
border-bottom: 2px solid var(--docs-border);
|
||||
@@ -1491,7 +1493,7 @@ ul, ol {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 16px rgba(2, 132, 199, 0.3);
|
||||
box-shadow: 0 4px 16px rgba(129, 140, 248, 0.3);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
@@ -1503,7 +1505,7 @@ ul, ol {
|
||||
|
||||
.back-to-top:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 24px rgba(2, 132, 199, 0.4);
|
||||
box-shadow: 0 6px 24px rgba(129, 140, 248, 0.4);
|
||||
}
|
||||
|
||||
.back-to-top--visible {
|
||||
@@ -1695,7 +1697,7 @@ ul, ol {
|
||||
z-index: 9999;
|
||||
padding: 8px 16px;
|
||||
background: var(--accent);
|
||||
color: #0A1628;
|
||||
color: #111113;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
border-radius: 6px;
|
||||
@@ -1971,14 +1973,14 @@ ul, ol {
|
||||
22. Dark docs-page code syntax highlighting helpers
|
||||
-------------------------------------------------------------------------- */
|
||||
|
||||
.docs-content pre .token-keyword { color: #C084FC; }
|
||||
.docs-content pre .token-string { color: #7DD3FC; }
|
||||
.docs-content pre .token-comment { color: #64748B; font-style: italic; }
|
||||
.docs-content pre .token-function { color: #2A9D8F; }
|
||||
.docs-content pre .token-number { color: #FB923C; }
|
||||
.docs-content pre .token-operator { color: #94A3B8; }
|
||||
.docs-content pre .token-type { color: #8B1A1A; }
|
||||
.docs-content pre .token-variable { color: #F1F5F9; }
|
||||
.docs-content pre .token-keyword { color: #818CF8; }
|
||||
.docs-content pre .token-string { color: #2A9D8F; }
|
||||
.docs-content pre .token-comment { color: #62627F; font-style: italic; }
|
||||
.docs-content pre .token-function { color: #818CF8; }
|
||||
.docs-content pre .token-number { color: #F59E0B; }
|
||||
.docs-content pre .token-operator { color: #8A8AA0; }
|
||||
.docs-content pre .token-type { color: #F59E0B; }
|
||||
.docs-content pre .token-variable { color: #E4E4ED; }
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
23. Additional Section Variants
|
||||
@@ -2003,7 +2005,7 @@ ul, ol {
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-family: "Outfit", sans-serif;
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: 2.5rem;
|
||||
color: var(--accent);
|
||||
@@ -2031,7 +2033,7 @@ ul, ol {
|
||||
|
||||
.quote-card::before {
|
||||
content: "\201C";
|
||||
font-family: "Outfit", sans-serif;
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-size: 4rem;
|
||||
color: var(--accent);
|
||||
opacity: 0.3;
|
||||
@@ -2050,7 +2052,7 @@ ul, ol {
|
||||
}
|
||||
|
||||
.quote-author {
|
||||
font-family: "Outfit", sans-serif;
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
|
||||
Reference in New Issue
Block a user