/* ========================================================= THEME VARIABLES (light + dark) ========================================================= */ :root { /* Page */ --bg: #ffffff; --text: #1f2937; --muted: #6b7280; --link: #2563eb; --card: #f9fafb; --border: #e5e7eb; /* Header */ --header-bg: #1f2a44; /* dark navy */ --header-text: #e5e7eb; /* light text */ --header-muted: #cbd5e1; /* lighter text on hover/active */ } /* Dark mode: applies if EITHER OR body.dark is present */ :root[data-theme="dark"], body.dark { --bg: #0f172a; --text: #e5e7eb; --muted: #a1a1aa; --link: #93c5fd; --card: #111827; --border: #1f2937; --header-bg: #111827; --header-text: #e5e7eb; --header-muted: #cbd5e1; } /* ========================================================= BASE ========================================================= */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font: 16px/1.65 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: var(--bg); color: var(--text); transition: background-color .18s ease, color .18s ease; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } .container { max-width: 1100px; margin: 0 auto; } /* ========================================================= HEADER (brand left, menu right) ========================================================= */ .site-header { background: var(--header-bg); color: var(--header-text); border-bottom: 1px solid rgba(0,0,0,.15); position: sticky; top: 0; z-index: 20; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; } .brand { font-weight: 700; text-decoration: none; color: var(--header-text); white-space: nowrap; flex-shrink: 0; } /* Top nav links */ .nav { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .nav a { color: var(--header-text); text-decoration: none; padding: .25rem .45rem; border-radius: 6px; font-weight: 600; letter-spacing: .02em; } .nav a:hover { color: var(--header-muted); } .nav a.active { color: var(--header-muted); } /* ========================================================= LAYOUT: left profile / center content / right TOC ========================================================= */ .layout { display: grid; grid-template-columns: 280px 1fr 200px; gap: 2rem; padding: 1.75rem 1rem 3rem; } /* Left profile */ .profile { position: sticky; top: 76px; align-self: start; } .avatar { width: 100%; max-width: 280px; height: auto; border-radius: 8px; display: block; box-shadow: 0 2px 6px rgba(0,0,0,.05); } .name { font-size: 2rem; line-height: 1.1; margin: 1rem 0 0.75rem; white-space: nowrap; } .buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; } .btn { display: inline-flex; align-items: center; gap: .35rem; padding: 0.35rem 0.6rem; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 6px; font-size: 0.9rem; } .btn .icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; } .btn .icon svg { width: 100%; height: 100%; fill: currentColor; } /* Center content */ .content h1, .content h2, .content h3 { margin: 0.6rem 0 0.4rem; } .content p { margin: 0 0 1rem 0; } /* Right TOC */ .toc { position: sticky; top: 76px; align-self: start; border-left: 1px solid var(--border); padding-left: 1rem; } .toc-title { font-weight: 700; margin-bottom: 0.5rem; } #tocList a { display: block; color: var(--link); padding: 0.15rem 0; } #tocList a.active { font-weight: 600; text-decoration: underline; } /* ========================================================= THEME SWITCH (toggle) ========================================================= */ .theme-switch { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 20px; position: relative; margin-left: .4rem; cursor: pointer; } .theme-switch input { display: none; } /* hide checkbox */ .switch-slider { width: 36px; height: 20px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.55); background: rgba(255,255,255,.12); position: relative; box-sizing: border-box; transition: background .18s ease-in-out, border-color .18s ease-in-out; } .switch-slider::before { content: ""; position: absolute; top: 50%; left: 2.5px; width: 14px; height: 14px; transform: translateY(-50%); border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); transition: transform .18s ease-in-out, background .18s ease-in-out; } .theme-switch input:checked + .switch-slider { background: rgba(255,255,255,.2); } .theme-switch input:checked + .switch-slider::before { transform: translate(18px, -50%); } /* Keep switch border readable in dark */ :root[data-theme="dark"] .switch-slider, body.dark .switch-slider { border-color: rgba(255,255,255,.6); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1024px) { .layout { grid-template-columns: 260px 1fr; } .toc { display: none; } } @media (max-width: 760px) { .layout { grid-template-columns: 1fr; gap: 1rem; } .profile { position: static; } .avatar { max-width: 420px; } .header-inner { flex-wrap: wrap; gap: .5rem; } .brand { flex: 1 1 100%; font-size: 1.06rem; } .nav { width: 100%; gap: .4rem; } .nav a { padding: .3rem .45rem; } } /* ===== CSS-only DARK MODE (works even if JS fails) ===== */ /* When the checkbox #themeSwitch is checked, switch all variables to dark */ :root:has(#themeSwitch:checked) { --bg: #0f172a; --text: #e5e7eb; --muted: #a1a1aa; --link: #93c5fd; --card: #111827; --border: #1f2937; --header-bg: #111827; --header-text: #e5e7eb; --header-muted: #cbd5e1; }