/* ============================================================================ K8s Path — "technical / terminal" theme Overrides docsify's vue.css (light) / dark.css (dark). Loaded AFTER both, so equal-specificity rules win by source order. Everything is keyed on `body.dark-theme` (the class the toggle stamps), so both modes are covered. Self-contained: system font stacks + inline SVG only, no external assets. ============================================================================ */ :root { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, "Liberation Mono", monospace; /* Light theme tokens */ --bg: #ffffff; --bg-elev: #f5f7fa; --bg-inset: #eef1f5; --text: #1c2128; --text-mut: #5a6674; --border: rgba(15, 23, 42, 0.10); --border-sf: rgba(15, 23, 42, 0.16); --accent: #326ce5; /* Kubernetes blue */ --accent-h: #2457c5; --accent-sf: rgba(50, 108, 229, 0.10); --habit: #b45309; /* amber — the 🔒 security callouts read warm */ --code-bg: #f4f6f9; --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 20px rgba(15, 23, 42, 0.06); --theme-color: var(--accent); /* docsify reads this for links/search focus */ --base-font-size: 15.5px; } /* The toggle stamps `.dark-theme` on BOTH and (see index.html). Defining the dark tokens on `.dark-theme` (not `body.dark-theme`) means they land on too, so the scroll canvas — painted by — goes dark along with everything else. Keying only on left reading the light :root tokens, which is why scrolling past the content showed white. */ .dark-theme { /* Dark theme tokens (the default the author prefers) */ --bg: #0d1117; --bg-elev: #131922; --bg-inset: #1b2230; --text: #c9d4e0; --text-mut: #8b98a9; --border: rgba(255, 255, 255, 0.09); --border-sf: rgba(255, 255, 255, 0.16); --accent: #58a6ff; --accent-h: #79c0ff; --accent-sf: rgba(88, 166, 255, 0.12); --habit: #e3b341; --code-bg: #161b22; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 28px rgba(0, 0, 0, 0.35); } /* ---------- base ---------- */ html, body { background: var(--bg) !important; color: var(--text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } .content { background: var(--bg) !important; } .markdown-section { color: var(--text); max-width: 52rem; } .markdown-section p, .markdown-section li { line-height: 1.72; } .markdown-section a { color: var(--accent); text-decoration: none; } .markdown-section a:hover { color: var(--accent-h); text-decoration: underline; } /* ---------- headings ---------- */ .markdown-section h1, .markdown-section h2, .markdown-section h3, .markdown-section h4 { color: var(--text); font-weight: 680; letter-spacing: -0.01em; } .markdown-section h1 { font-size: 2rem; } .markdown-section h2 { font-size: 1.45rem; margin-top: 2.4rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--border); } .markdown-section h3 { font-size: 1.15rem; margin-top: 1.8rem; } /* ---------- code ---------- */ .markdown-section code, .markdown-section pre { font-family: var(--font-mono); } .markdown-section p > code, .markdown-section li > code, .markdown-section td > code, .markdown-section a > code { background: var(--bg-inset); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 0.12em 0.4em; font-size: 0.86em; } .markdown-section pre { background: transparent; overflow-x: auto; } .markdown-section pre > code { background: var(--code-bg) !important; border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); color: var(--text); font-size: 0.86rem; line-height: 1.6; } /* copy-code button */ .docsify-copy-code-button { background: var(--bg-inset) !important; color: var(--text-mut) !important; border: 1px solid var(--border); border-radius: 0 10px 0 8px; font-family: var(--font-mono); font-size: 11px; } .docsify-copy-code-button:hover { color: var(--accent) !important; } /* ---------- blockquotes / callouts (🔒 security habits, ⏳ over-time) ---------- */ .markdown-section blockquote { background: var(--bg-elev); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; color: var(--text); margin: 1.3em 0; padding: 0.7em 1.1em; } .markdown-section blockquote p { margin: 0.3em 0; } /* a security-habit callout leads with 🔒 **Security habit.** — warm accent */ .markdown-section blockquote strong { color: var(--habit); } /* ---------- tables ---------- */ .markdown-section table { border-collapse: collapse; } .markdown-section th { background: var(--accent-sf); color: var(--text); font-weight: 640; border: 1px solid var(--border-sf); } .markdown-section td { border: 1px solid var(--border); } .markdown-section tr { background: transparent; } .markdown-section tbody tr:nth-child(2n) { background: color-mix(in srgb, var(--text) 4%, transparent); } /* ---------- sidebar ---------- */ .sidebar { background: var(--bg-elev) !important; border-right: 1px solid var(--border); } .sidebar > h1 { margin: 1.4rem 0 0.6rem; } .sidebar > h1 .app-name-link { color: var(--text); font-weight: 720; letter-spacing: -0.01em; } .sidebar-nav { line-height: 1.75; } .sidebar-nav a { color: var(--text-mut); transition: color 0.12s; } .sidebar-nav a:hover { color: var(--accent); text-decoration: none; } /* Part / Reference group headers: uppercase mono micro-caps */ .sidebar-nav > ul > li > p > strong, .sidebar-nav > ul > li > strong { display: block; margin: 0.9rem 0 0.15rem; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mut); opacity: 0.85; } /* active page: accent text + a left rule */ .sidebar-nav li.active > a, .sidebar-nav li.active > p > a, .sidebar-nav .active:not(.pg-done) { color: var(--accent) !important; font-weight: 600; } .sidebar-nav li.active > a { box-shadow: inset 2px 0 0 var(--accent); padding-left: 4px; } /* progress badge + checkboxes: recolor green → accent */ #pg-badge { border-bottom-color: var(--border) !important; } #pg-badge .pg-bar { background: var(--bg-inset) !important; } #pg-badge .pg-bar-fill { background: var(--accent) !important; } #pg-badge .pg-actions a:hover, .sidebar-nav a .pg-check:hover, .sidebar-nav a.pg-done .pg-check { color: var(--accent) !important; } /* search box */ .sidebar .search input { background: var(--bg-inset); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: var(--font-sans); } .sidebar .search { border-bottom: 1px solid var(--border); } .sidebar .search .results-panel { background: var(--bg-elev); } .sidebar .search .matching-post { border-bottom: 1px solid var(--border); } .sidebar .search p.search-keyword { color: var(--accent); } /* ---------- theme toggle button ---------- */ #theme-toggle { border: 1px solid var(--border-sf) !important; background: var(--bg-elev) !important; color: var(--text-mut) !important; border-radius: 8px; box-shadow: var(--shadow); } #theme-toggle:hover { color: var(--accent) !important; border-color: var(--accent) !important; } /* ---------- pagination ---------- */ .docsify-pagination-container { border-top: 1px solid var(--border); margin-top: 3rem; } .pagination-item-label { color: var(--accent); } .pagination-item-title { color: var(--text-mut); } /* ============================================================================ Hero landing page (home.md) ============================================================================ */ .hero { position: relative; overflow: hidden; margin: 0 0 2.5rem; padding: 3.2rem 2rem 2.8rem; border: 1px solid var(--border); border-radius: 18px; background: radial-gradient(120% 140% at 85% -10%, var(--accent-sf), transparent 60%), var(--bg-elev); box-shadow: var(--shadow); } .hero-badge { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); background: var(--accent-sf); border: 1px solid var(--border-sf); border-radius: 999px; padding: 0.3em 0.9em; margin-bottom: 1.1rem; } .hero-title { font-size: clamp(2.6rem, 6vw, 3.8rem); font-weight: 760; letter-spacing: -0.03em; line-height: 1.02; margin: 0 0 0.6rem; color: var(--text); } .hero-title .k { color: var(--accent); } .hero-tagline { font-size: clamp(1.02rem, 2.3vw, 1.25rem); color: var(--text-mut); max-width: 34rem; margin: 0 0 1.7rem; line-height: 1.5; } .hero-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; } .btn { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 580; font-size: 0.95rem; padding: 0.62em 1.15em; border-radius: 9px; border: 1px solid transparent; text-decoration: none !important; transition: transform 0.08s, background 0.15s, border-color 0.15s; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: #fff !important; } .btn-primary:hover { background: var(--accent-h); } .btn-ghost { background: transparent; color: var(--text) !important; border-color: var(--border-sf); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent) !important; } /* decorative hex emblem, top-right, non-interactive */ .hero-art { position: absolute; top: -28px; right: -24px; width: 220px; height: 220px; color: var(--accent); opacity: 0.16; pointer-events: none; } @media (max-width: 700px) { .hero-art { display: none; } } /* roadmap strip */ .roadmap { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.5rem; margin: 0 0 1.2rem; } .roadmap .rm { flex: 1 1 120px; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 11px; background: var(--bg-elev); text-decoration: none !important; transition: border-color 0.15s, transform 0.08s; } .roadmap .rm:hover { border-color: var(--accent); transform: translateY(-2px); } .roadmap .rm .rm-n { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .roadmap .rm .rm-t { display: block; margin-top: 0.2rem; color: var(--text); font-weight: 560; font-size: 0.92rem; } .roadmap .rm.hub { border-style: dashed; } /* "ways in" cards */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.9rem; margin: 1.1rem 0 2rem; } .card { display: block; padding: 1.15rem 1.2rem; border: 1px solid var(--border); border-radius: 13px; background: var(--bg-elev); text-decoration: none !important; transition: border-color 0.15s, transform 0.08s, box-shadow 0.15s; } .card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); } .card .card-k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .card .card-h { display: block; margin: 0.35rem 0 0.3rem; font-weight: 640; font-size: 1.05rem; color: var(--text); } .card .card-d { color: var(--text-mut); font-size: 0.9rem; line-height: 1.5; } /* small print row under the hero */ .hero-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-size: 0.86rem; color: var(--text-mut); margin: -0.6rem 0 2rem; } .hero-meta b { color: var(--text); font-weight: 620; } /* ============================================================================ Mobile (docsify already turns the sidebar into a hamburger under 768px; this tunes the parts that were still rough on a phone). ============================================================================ */ @media (max-width: 768px) { /* Wide comparison tables scroll INSIDE themselves instead of forcing the whole page to scroll sideways. */ .markdown-section table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Long inline code / URLs wrap rather than overflow. */ .markdown-section { overflow-wrap: break-word; word-wrap: break-word; } /* Tighter hero on small screens. */ .hero { padding: 1.9rem 1.15rem 1.6rem; border-radius: 12px; } .hero-cta { gap: 0.5rem; } .btn { font-size: 0.9rem; padding: 0.55em 1em; } /* The docsify hamburger: drop the white blob so it reads cleanly on the dark theme (its bars already use the accent color). */ .sidebar-toggle { background-color: transparent !important; } .sidebar-toggle span { background-color: var(--accent) !important; } }