/* Reeco Knowledge Base — shared stylesheet (SINGLE SOURCE OF TRUTH). Linked by BOTH knowledge/index.html AND the dynamic .md article renderer (_render_knowledge_html in reeco_v4_backend/main.py). Editing here changes every KB surface at once, so the index, the pretty pages' successors, and the dynamic .md pages can never drift apart. Dark theme is the brand default; a light theme is available via the header toggle (data-theme on ). */ :root { --bg-main-dark: #050816; --bg-main-light: #f5f7fb; --text-main-dark: #ffffff; --text-main-light: #1a1a1a; --text-soft-dark: #c0c4d8; --text-soft-light: #666; --accent: #32e0c4; --accent-strong: #0a5c4a; --card-dark: #101623; --card-light: #f0faf6; --border-soft-dark: rgba(255, 255, 255, 0.12); } /* ---------- base (light) ---------- */ body { font-family: Georgia, serif; max-width: 780px; margin: 0 auto; padding: 2rem; color: var(--text-main-light); line-height: 1.75; } h1 { font-size: 2rem; line-height: 1.2; margin-bottom: 0.5rem; } h2 { font-size: 1.3rem; margin-top: 2.5rem; color: var(--accent-strong); } h3 { font-size: 1.05rem; color: var(--accent-strong); } p { margin: 0 0 1rem; } ul { padding-left: 1.5rem; } li { margin-bottom: 0.4rem; } .meta { color: var(--text-soft-light); font-size: 0.9rem; margin-bottom: 2rem; } .highlight { font-weight: bold; color: var(--accent-strong); } /* Answer capsule: the hand-authored .answer-capsule class AND markdown blockquotes (the `> ...` lead paragraphs in every article .md) render as the same call-out box — this is what gives the dynamic .md pages visual parity. */ .answer-capsule, .kb-article blockquote { background: var(--card-light); border-left: 4px solid var(--accent-strong); padding: 1rem 1.5rem; margin: 1.5rem 0; font-size: 1.05rem; } .kb-article blockquote > :last-child { margin-bottom: 0; } /* Tables */ table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95rem; } th { background: var(--accent-strong); color: #fff; padding: 0.6rem 1rem; text-align: left; } td { padding: 0.6rem 1rem; border-bottom: 1px solid #e0e0e0; } tr:nth-child(even) td { background: #f9f9f9; } /* Index cards */ .article { margin-bottom: 1.5rem; padding: 1.2rem 1.5rem; border-left: 4px solid var(--accent-strong); background: var(--card-light); } .article h3 { margin: 0 0 0.4rem; font-size: 1.05rem; } .article p { margin: 0 0 0.6rem; font-size: 0.95rem; color: #444; } .langs { font-size: 0.85rem; color: var(--text-soft-light); } .langs a { color: var(--accent-strong); margin-right: 0.5rem; text-decoration: none; } .langs a:hover { text-decoration: underline; } /* FAQ */ .faq { margin-top: 3rem; } .faq-item { margin-bottom: 2rem; } .faq-item h3 { font-size: 1.05rem; color: var(--accent-strong); } /* ---------- "Back to Knowledge Base" control (article pages) ---------- */ .kb-backlink { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; color: var(--accent-strong); text-decoration: none; margin-bottom: 1.5rem; } .kb-backlink::before { content: "\2190"; font-size: 1.1em; line-height: 1; } /* left arrow */ [dir="rtl"] .kb-backlink::before { content: "\2192"; } /* flips for RTL */ .kb-backlink:hover { text-decoration: underline; } .kb-backlink.bottom { margin: 2.5rem 0 0; } /* ---------- dark theme ---------- */ /* The theme background lives on (the canvas) so it always fills the whole viewport. The content is a centered max-width column: if it owned the page background, a white/blank gutter would show beside it. The root element's background is painted over the entire canvas (no background-attachment: fixed — that clips oddly under browser zoom). min-height keeps it filled on short pages. */ html { min-height: 100%; } html[data-theme="light"] { background-color: var(--bg-main-light); } html[data-theme="dark"] { /* Solid base fills the entire canvas at any zoom/DPR (a large radial-gradient image can under-paint under fractional browser zoom); the gradient sits on top for depth. Its outer stop matches the base, so the seam is invisible. */ background-color: #050816; background-image: radial-gradient(circle at top, #0c1220 0, #050816 52%, #02040b 100%); } html[data-theme="light"] body { background: transparent; color: var(--text-main-light); } html[data-theme="dark"] body { background: transparent; color: var(--text-main-dark); } html[data-theme="dark"] .meta, html[data-theme="dark"] .langs { color: var(--text-soft-dark); } html[data-theme="dark"] h1, html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] td, html[data-theme="dark"] th, html[data-theme="dark"] strong, html[data-theme="dark"] a { color: var(--text-main-dark); } html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] .highlight, html[data-theme="dark"] .langs a, html[data-theme="dark"] .article h3 a, html[data-theme="dark"] .kb-backlink { color: var(--accent) !important; } html[data-theme="dark"] .article, html[data-theme="dark"] .answer-capsule, html[data-theme="dark"] .kb-article blockquote { background: var(--card-dark); border-left-color: var(--accent); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] table { border-color: var(--border-soft-dark); } html[data-theme="dark"] th { background: #113e37; } html[data-theme="dark"] td { border-bottom-color: var(--border-soft-dark); } html[data-theme="dark"] tr:nth-child(even) td { background: rgba(255, 255, 255, 0.03); } /* ---------- theme toggle ---------- */ .theme-toggle { position: fixed; top: 16px; right: 16px; width: 50px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; padding: 3px; cursor: pointer; border: 1px solid; z-index: 1000; transition: background 0.22s ease-out, border-color 0.22s ease-out; } html[data-theme="dark"] .theme-toggle { background: rgba(9, 13, 24, 0.98); border-color: rgba(255, 255, 255, 0.18); } html[data-theme="light"] .theme-toggle { background: rgba(255, 255, 255, 0.96); border-color: rgba(15, 23, 42, 0.16); } .theme-toggle-thumb { width: 20px; height: 20px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; transition: transform 0.22s ease-out, background 0.22s ease-out, color 0.22s ease-out; } html[data-theme="dark"] .theme-toggle-thumb { transform: translateX(0); background: #111827; color: #ffffff; } html[data-theme="light"] .theme-toggle-thumb { transform: translateX(22px); background: #fbbf24; color: #000000; } /* In RTL the toggle lives on the left and the thumb travels the other way */ [dir="rtl"] .theme-toggle { right: auto; left: 16px; } /* ---------- landing (home) icon — used by the index ---------- */ .landing-link { position: fixed; top: 16px; left: 16px; width: 54px; height: 54px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid; z-index: 1000; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; } .landing-link img { width: 42px; height: 42px; object-fit: contain; display: block; } html[data-theme="dark"] .landing-link { background: rgba(9, 13, 24, 0.98); border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); } html[data-theme="light"] .landing-link { background: rgba(255, 255, 255, 0.96); border-color: rgba(15, 23, 42, 0.16); box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16); } .landing-link:hover { transform: translateY(-1px) scale(1.02); } [dir="rtl"] .landing-link { left: auto; right: 16px; } @media (max-width: 640px) { .landing-link { width: 46px; height: 46px; top: 12px; left: 12px; } [dir="rtl"] .landing-link { left: auto; right: 12px; } .landing-link img { width: 34px; height: 34px; } .theme-toggle { top: 12px; right: 12px; } [dir="rtl"] .theme-toggle { right: auto; left: 12px; } }