/* ===== mcp-tutorial site — Claude-style theme ===== * Light + Dark modes via [data-theme="dark|light"] on . * Default respects prefers-color-scheme, in-page toggle overrides it. * * Visual rules the layout follows: * - Reading is the priority. Lines stay a comfortable width; spacing does * the grouping; borders/surfaces stay subtle so content leads. * - Light mode is warm cream (Claude-ish), low contrast surface; dark mode * is warm near-black with desaturated accent — both easy on long sessions. * - The theme toggle floats top-right of the viewport, never inside the * scrolling sidebar. */ :root, :root[data-theme="light"] { /* Claude-ish warm palette */ --bg: #faf9f5; --bg-elev: #ffffff; --bg-soft: #f3f1ec; --bg-code: #f6f5f1; --border: #ece8df; --border-strong: #d9d4c5; --text: #2b2a27; --text-soft: #514f4a; --text-muted: #8a8778; --accent: #c15f3c; /* Claude coral/terracotta accent */ --accent-hover: #a84a2c; --accent-soft: #fbeee6; --h1-underline: #d96846; /* Reading column + slightly wider figure column so PlantUML stays legible. */ --maxw: 820px; --maxw-figure: 980px; --sidebar-w: 252px; --font-sans: "Charter", "Iowan Old Style", "Apple Garamond", "Source Serif Pro", "Noto Serif", "Cormorant", "Times New Roman", Georgia, "PingFang SC", "Microsoft YaHei", serif; --font-mono: ui-monospace, "JetBrains Mono", "Cascadia Code", "SF Mono", Consolas, "Courier New", monospace; --radius: 10px; --shadow: 0 1px 0 rgba(0,0,0,.03); --topbar-bg: rgba(250, 249, 245, .72); --diagram-bg: #ffffff; --diagram-filter: none; --content-pad-x: 40px; /* Syntax tokens — light theme (readable on cream code bg) */ --hl-fg: #3a3834; --hl-comment: #8a8678; --hl-keyword: #a84a2c; --hl-string: #3d7a4a; --hl-number: #b07a12; --hl-title: #c15f3c; --hl-meta: #6b675c; --hl-built: #2f6f7a; --hl-params: #5c564c; } :root[data-theme="dark"] { /* * Balanced dark: soft enough for night, bright enough for daytime rooms. * Target sits between the old near-white #ece9e2 (glare) and the * over-dimmed #b5b0a6 pass (hard to read in daylight). */ --bg: #12100e; --bg-elev: #1c1a16; --bg-soft: #17150f; --bg-code: #17150f; --border: #2e2a24; --border-strong: #423b32; --text: #d4cfc4; /* ~mid: readable by day, not a flashlight at night */ --text-soft: #a9a399; --text-muted: #807a70; --accent: #d4a07e; --accent-hover: #e2b696; --accent-soft: #2a1d15; --h1-underline: #b87355; --shadow: 0 1px 0 rgba(0,0,0,.4); --topbar-bg: rgba(18, 16, 14, .78); /* Warm board + mild dim — cut glare without greying the diagram out. */ --diagram-bg: #ebe6dc; --diagram-filter: brightness(0.90) contrast(0.96) saturate(0.94); /* Syntax tokens — muted but still distinct in daylight */ --hl-fg: #cdc7bc; --hl-comment: #807a70; --hl-keyword: #d4a098; --hl-string: #a3c08a; --hl-number: #d4b06a; --hl-title: #d4a07e; --hl-meta: #a09a90; --hl-built: #8fbf9a; --hl-params: #c0ae92; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); color: var(--text); background: var(--bg); line-height: 1.75; /* generous vertical rhythm for long reads */ font-size: 16.5px; font-feature-settings: "kern" 1, "liga" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; } /* So smoothness doesn't break user motion preferences. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ===== Layout ===== */ .layout { display: flex; min-height: 100vh; } .sidebar { position: sticky; top: 0; width: var(--sidebar-w); height: 100vh; overflow-y: auto; border-right: 1px solid var(--border); background: var(--bg-soft); padding: 28px 18px 24px; flex-shrink: 0; } .brand { font-size: 1.02rem; font-weight: 600; margin: 0 0 2px; letter-spacing: .3px; } .brand-sub { font-size: .78rem; color: var(--text-muted); margin: 0 0 20px; } .sidebar nav { display: flex; flex-direction: column; gap: 1px; } .sidebar nav a { display: block; padding: 6px 11px; border-radius: 7px; color: var(--text-soft); font-size: .9rem; font-family: var(--font-mono); letter-spacing: -.1px; border-left: 2px solid transparent; } .sidebar nav a:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; } .sidebar nav a.sub { padding-left: 22px; font-size: .8rem; color: var(--text-muted); } .sidebar nav a.active { background: var(--accent-soft); color: var(--accent); border-left-color: var(--accent); font-weight: 600; text-decoration: none; } /* scrollbar in sidebar kept thin and not flashy */ .sidebar::-webkit-scrollbar { width: 8px; } .sidebar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; } /* ===== Floating top-right controls (theme + back-to-top) ===== * Lives outside