Spaces:
Running
Running
| /* ============================================================ | |
| Design tokens | |
| ============================================================ */ | |
| :root { | |
| --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; | |
| --accent: #4f46e5; | |
| --accent-contrast: #ffffff; | |
| --accent-soft: #eef2ff; | |
| --step-1: #2563eb; | |
| --step-2: #0f766e; | |
| --step-3: #c2410c; | |
| --step-4: #7c3aed; | |
| --step-ink: #ffffff; | |
| /* Description levels (Theoretical framework page): pigment tones, one per kind | |
| of information, so a level keeps its colour across every framework. */ | |
| --lvl-form: #3e5a7a; | |
| --lvl-generic: #5a7a4e; | |
| --lvl-specific: #a0731c; | |
| --lvl-abstract: #9e3b3b; | |
| --lvl-catalogue: #6e5a48; | |
| --bg: #ffffff; | |
| --bg-raised: #ffffff; | |
| --bg-sunken: #f8f9fb; | |
| --border: #e5e7eb; | |
| --border-strong: #d1d5db; | |
| --text: #111827; | |
| --text-muted: #6b7280; | |
| --text-faint: #9ca3af; | |
| --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); | |
| --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.08); | |
| --radius-sm: 8px; | |
| --radius-md: 12px; | |
| --radius-lg: 16px; | |
| --topbar-h: 60px; | |
| --sidebar-w: 272px; | |
| --sidebar-w-narrow: 200px; | |
| --toc-w: 220px; | |
| --content-max: 760px; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root:not([data-theme="light"]) { | |
| --accent: #818cf8; | |
| --accent-contrast: #111827; | |
| --accent-soft: rgba(129, 140, 248, 0.14); | |
| --step-1: #60a5fa; | |
| --step-2: #2dd4bf; | |
| --step-3: #fb923c; | |
| --step-4: #a78bfa; | |
| --step-ink: #0f1115; | |
| --lvl-form: #93acc9; | |
| --lvl-generic: #9dbb8e; | |
| --lvl-specific: #d8ae5e; | |
| --lvl-abstract: #d98b84; | |
| --lvl-catalogue: #b8a48f; | |
| --bg: #0f1115; | |
| --bg-raised: #15171d; | |
| --bg-sunken: #0b0c10; | |
| --border: #262932; | |
| --border-strong: #343842; | |
| --text: #e5e7eb; | |
| --text-muted: #9aa0ab; | |
| --text-faint: #6b7280; | |
| --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); | |
| --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); | |
| } | |
| } | |
| :root[data-theme="dark"] { | |
| --accent: #818cf8; | |
| --accent-contrast: #111827; | |
| --accent-soft: rgba(129, 140, 248, 0.14); | |
| --step-1: #60a5fa; | |
| --step-2: #2dd4bf; | |
| --step-3: #fb923c; | |
| --step-4: #a78bfa; | |
| --step-ink: #0f1115; | |
| --lvl-form: #93acc9; | |
| --lvl-generic: #9dbb8e; | |
| --lvl-specific: #d8ae5e; | |
| --lvl-abstract: #d98b84; | |
| --lvl-catalogue: #b8a48f; | |
| --bg: #0f1115; | |
| --bg-raised: #15171d; | |
| --bg-sunken: #0b0c10; | |
| --border: #262932; | |
| --border-strong: #343842; | |
| --text: #e5e7eb; | |
| --text-muted: #9aa0ab; | |
| --text-faint: #6b7280; | |
| --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); | |
| --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); | |
| } | |
| /* ============================================================ | |
| Reset & base | |
| ============================================================ */ | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, | |
| body { | |
| height: 100%; | |
| } | |
| body { | |
| margin: 0; | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: var(--font-sans); | |
| font-size: 15px; | |
| line-height: 1.6; | |
| -webkit-font-smoothing: antialiased; | |
| overflow-wrap: break-word; /* long words (e.g. headings) wrap instead of overflowing narrow columns */ | |
| } | |
| a { | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| button { | |
| font: inherit; | |
| color: inherit; | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| kbd { | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| border: 1px solid var(--border-strong); | |
| border-bottom-width: 2px; | |
| border-radius: 4px; | |
| padding: 1px 5px; | |
| color: var(--text-muted); | |
| background: var(--bg-sunken); | |
| } | |
| /* ============================================================ | |
| Topbar | |
| ============================================================ */ | |
| .topbar { | |
| position: sticky; | |
| top: 0; | |
| z-index: 40; | |
| height: var(--topbar-h); | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 0 16px; | |
| background: var(--bg-raised); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| flex-shrink: 1; | |
| min-width: 0; | |
| } | |
| .brand-mark { | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 8px; | |
| background: linear-gradient(135deg, var(--accent), var(--accent) 60%, transparent); | |
| background-color: var(--accent); | |
| flex-shrink: 0; | |
| } | |
| .brand-text { | |
| display: flex; | |
| flex-direction: column; | |
| line-height: 1.2; | |
| min-width: 0; | |
| } | |
| .brand-text strong, | |
| .brand-text small { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .brand-text strong { | |
| font-size: 14px; | |
| font-weight: 600; | |
| } | |
| .brand-text small { | |
| font-size: 11.5px; | |
| color: var(--text-muted); | |
| } | |
| @media (max-width: 640px) { | |
| .brand-text small { | |
| display: none; | |
| } | |
| } | |
| .search-trigger { | |
| flex: 1; | |
| min-width: 0; | |
| max-width: 420px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-left: auto; | |
| padding: 8px 12px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: var(--bg-sunken); | |
| color: var(--text-muted); | |
| font-size: 13.5px; | |
| } | |
| .search-trigger:hover { | |
| border-color: var(--border-strong); | |
| } | |
| .search-label { | |
| flex: 1; | |
| text-align: left; | |
| } | |
| .icon-btn { | |
| width: 34px; | |
| height: 34px; | |
| display: grid; | |
| place-items: center; | |
| border-radius: var(--radius-sm); | |
| flex-shrink: 0; | |
| } | |
| .icon-btn:hover { | |
| background: var(--bg-sunken); | |
| } | |
| /* Minimal inline icon glyphs (no external icon dependency for chrome UI) */ | |
| .search-icon::before { | |
| content: ""; | |
| display: block; | |
| width: 15px; | |
| height: 15px; | |
| border: 2px solid currentColor; | |
| border-radius: 50%; | |
| position: relative; | |
| } | |
| .search-icon::after { | |
| content: ""; | |
| position: absolute; | |
| } | |
| #theme-btn::before { | |
| content: "◐"; | |
| font-size: 16px; | |
| } | |
| /* ============================================================ | |
| Layout | |
| ============================================================ */ | |
| .layout { | |
| display: grid; | |
| grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w); | |
| } | |
| @media (max-width: 1200px) { | |
| .layout { | |
| grid-template-columns: var(--sidebar-w) minmax(0, 1fr); | |
| } | |
| .toc { | |
| display: none; | |
| } | |
| } | |
| @media (max-width: 860px) { | |
| .layout { | |
| grid-template-columns: var(--sidebar-w-narrow) minmax(0, 1fr); | |
| } | |
| .search-label { | |
| display: none; | |
| } | |
| .search-trigger kbd { | |
| display: none; | |
| } | |
| } | |
| /* ============================================================ | |
| Sidebar | |
| ============================================================ */ | |
| .sidebar { | |
| background: var(--bg-sunken); | |
| border-right: 1px solid var(--border); | |
| height: calc(100vh - var(--topbar-h)); | |
| position: sticky; | |
| top: var(--topbar-h); | |
| overflow-y: auto; | |
| } | |
| .sidebar-inner { | |
| padding: 20px 12px 40px; | |
| } | |
| @media (max-width: 860px) { | |
| .sidebar-inner { | |
| padding: 16px 8px 32px; | |
| } | |
| .nav-link { | |
| font-size: 13px; | |
| padding: 7px 8px; | |
| } | |
| } | |
| .nav-group { | |
| margin-bottom: 4px; | |
| } | |
| .nav-group-label { | |
| display: block; | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| color: var(--text-faint); | |
| padding: 14px 10px 6px; | |
| } | |
| .nav-link { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 7px 10px; | |
| border-radius: var(--radius-sm); | |
| font-size: 13.5px; | |
| color: var(--text-muted); | |
| line-height: 1.4; | |
| } | |
| .nav-link:hover { | |
| background: var(--bg-raised); | |
| color: var(--text); | |
| } | |
| .nav-link.active { | |
| background: var(--accent-soft); | |
| color: var(--accent); | |
| font-weight: 600; | |
| } | |
| a.nav-group-label { | |
| border-radius: var(--radius-sm); | |
| } | |
| a.nav-group-label:hover, | |
| a.nav-group-label.active { | |
| color: var(--accent); | |
| } | |
| .step-badge { | |
| flex-shrink: 0; | |
| min-width: 20px; | |
| height: 20px; | |
| padding: 0 5px; | |
| border-radius: 999px; | |
| display: grid; | |
| place-items: center; | |
| font-size: 11px; | |
| font-weight: 700; | |
| line-height: 1; | |
| color: var(--accent-contrast); | |
| background: var(--step-color, var(--text-faint)); | |
| } | |
| .step-1 { --step-color: var(--accent); } | |
| .step-2 { --step-color: var(--accent); } | |
| .step-3 { --step-color: var(--accent); } | |
| .step-4 { --step-color: var(--accent); } | |
| .nav-children { | |
| margin-left: 14px; | |
| padding-left: 10px; | |
| border-left: 1px solid var(--border); | |
| } | |
| .nav-toggle { | |
| width: 16px; | |
| height: 16px; | |
| flex-shrink: 0; | |
| display: grid; | |
| place-items: center; | |
| color: var(--text-faint); | |
| transition: transform 0.15s ease; | |
| } | |
| .nav-toggle.collapsed { | |
| transform: rotate(-90deg); | |
| } | |
| .nav-children.collapsed { | |
| display: none; | |
| } | |
| /* ============================================================ | |
| Main | |
| ============================================================ */ | |
| .main { | |
| min-width: 0; | |
| padding: 28px 40px 80px; | |
| } | |
| @media (max-width: 600px) { | |
| .main { | |
| padding: 20px 16px 60px; | |
| } | |
| } | |
| .breadcrumbs { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 12.5px; | |
| color: var(--text-muted); | |
| margin-bottom: 18px; | |
| } | |
| .breadcrumbs a:hover { | |
| color: var(--text); | |
| } | |
| .breadcrumbs .sep { | |
| color: var(--text-faint); | |
| } | |
| .breadcrumbs .current { | |
| color: var(--text); | |
| } | |
| .page-head { | |
| max-width: var(--content-max); | |
| margin-bottom: 24px; | |
| } | |
| .page-head .step-label { | |
| display: inline-block; | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--step-color, var(--accent)); | |
| background: color-mix(in srgb, var(--step-color, var(--accent)) 14%, transparent); | |
| padding: 3px 9px; | |
| border-radius: 999px; | |
| margin-bottom: 10px; | |
| } | |
| .page-head h1 { | |
| margin: 0 0 8px; | |
| font-size: 28px; | |
| letter-spacing: -0.01em; | |
| } | |
| .page-head .summary { | |
| margin: 0; | |
| color: var(--text-muted); | |
| font-size: 15px; | |
| } | |
| .page-head .chips { | |
| display: flex; | |
| gap: 8px; | |
| margin-top: 12px; | |
| } | |
| .chip { | |
| font-size: 11.5px; | |
| font-weight: 600; | |
| padding: 3px 9px; | |
| border-radius: 999px; | |
| border: 1px solid var(--border); | |
| color: var(--text-muted); | |
| } | |
| .content { | |
| max-width: var(--content-max); | |
| overflow-x: auto; /* wide elements (e.g. tables) scroll here instead of the whole page */ | |
| } | |
| /* ============================================================ | |
| Section card grid (overview pages) | |
| ============================================================ */ | |
| .children { | |
| max-width: var(--content-max); | |
| margin-top: 8px; | |
| } | |
| .card-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); | |
| gap: 14px; | |
| margin-top: 16px; | |
| } | |
| .card { | |
| display: block; | |
| padding: 16px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| background: var(--bg-raised); | |
| transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; | |
| } | |
| .card:hover { | |
| border-color: var(--border-strong); | |
| box-shadow: var(--shadow-sm); | |
| transform: translateY(-1px); | |
| } | |
| .card-icon { | |
| width: 32px; | |
| height: 32px; | |
| display: grid; | |
| place-items: center; | |
| border-radius: 8px; | |
| background: var(--accent-soft); | |
| color: var(--accent); | |
| margin-bottom: 10px; | |
| font-size: 15px; | |
| } | |
| .card h3 { | |
| margin: 0 0 4px; | |
| font-size: 14.5px; | |
| } | |
| .card p { | |
| margin: 0; | |
| font-size: 13px; | |
| color: var(--text-muted); | |
| } | |
| /* Stepper for Part II overview */ | |
| .stepper { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0; | |
| margin-top: 20px; | |
| max-width: var(--content-max); | |
| } | |
| .step { | |
| display: flex; | |
| gap: 14px; | |
| padding: 14px 0; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .step:last-child { | |
| border-bottom: none; | |
| } | |
| .step-index { | |
| flex-shrink: 0; | |
| min-width: 28px; | |
| height: 28px; | |
| padding: 0 6px; | |
| border-radius: 999px; | |
| display: grid; | |
| place-items: center; | |
| font-size: 12.5px; | |
| font-weight: 600; | |
| background: var(--bg-sunken); | |
| border: 1px solid var(--border); | |
| color: var(--text-muted); | |
| } | |
| .step-index[class*="step-"] { | |
| background: var(--step-color); | |
| border-color: var(--step-color); | |
| color: var(--accent-contrast); | |
| } | |
| .step-body { | |
| min-width: 0; | |
| } | |
| .step-body h3 { | |
| margin: 0 0 2px; | |
| font-size: 14.5px; | |
| } | |
| .step-body p { | |
| margin: 0; | |
| font-size: 13px; | |
| color: var(--text-muted); | |
| } | |
| .step-body a { | |
| color: var(--accent); | |
| font-weight: 600; | |
| font-size: 13px; | |
| } | |
| /* ============================================================ | |
| Pager (prev/next) | |
| ============================================================ */ | |
| .pager { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 16px; | |
| margin-top: 40px; | |
| max-width: var(--content-max); | |
| } | |
| .pager-link { | |
| flex: 1; | |
| min-width: 0; | |
| max-width: 48%; | |
| padding: 14px 16px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| } | |
| .pager-link:hover { | |
| border-color: var(--border-strong); | |
| background: var(--bg-sunken); | |
| } | |
| .pager-link.next { | |
| text-align: right; | |
| margin-left: auto; | |
| } | |
| .pager-direction { | |
| display: block; | |
| font-size: 11.5px; | |
| color: var(--text-faint); | |
| margin-bottom: 2px; | |
| } | |
| .pager-title { | |
| font-size: 13.5px; | |
| font-weight: 600; | |
| overflow-wrap: break-word; | |
| } | |
| /* ============================================================ | |
| Table of contents (right rail) | |
| ============================================================ */ | |
| .toc { | |
| padding: 28px 20px; | |
| position: sticky; | |
| top: var(--topbar-h); | |
| height: calc(100vh - var(--topbar-h)); | |
| overflow-y: auto; | |
| font-size: 12.5px; | |
| } | |
| .toc-label { | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| color: var(--text-faint); | |
| margin-bottom: 10px; | |
| } | |
| .toc ul { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| border-left: 1px solid var(--border); | |
| } | |
| .toc li a { | |
| display: block; | |
| padding: 5px 0 5px 14px; | |
| color: var(--text-muted); | |
| border-left: 2px solid transparent; | |
| margin-left: -1px; | |
| } | |
| .toc li.toc-h3 a { | |
| padding-left: 24px; | |
| } | |
| .toc li a:hover { | |
| color: var(--text); | |
| } | |
| .toc li a.active { | |
| color: var(--accent); | |
| border-left-color: var(--accent); | |
| font-weight: 600; | |
| } | |
| /* ============================================================ | |
| Search dialog | |
| ============================================================ */ | |
| .search-dialog { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 100; | |
| background: rgba(15, 17, 21, 0.35); | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: center; | |
| padding-top: 12vh; | |
| } | |
| .search-dialog[hidden] { | |
| display: none; | |
| } | |
| .search-panel { | |
| width: min(560px, 90vw); | |
| max-height: 70vh; | |
| display: flex; | |
| flex-direction: column; | |
| background: var(--bg-raised); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow-md); | |
| overflow: hidden; | |
| } | |
| .search-field { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 14px 16px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .search-field input { | |
| flex: 1; | |
| border: none; | |
| outline: none; | |
| background: none; | |
| color: var(--text); | |
| font: inherit; | |
| font-size: 15px; | |
| } | |
| .search-results { | |
| list-style: none; | |
| margin: 0; | |
| padding: 8px; | |
| overflow-y: auto; | |
| } | |
| .search-results li a { | |
| display: block; | |
| padding: 10px 12px; | |
| border-radius: var(--radius-sm); | |
| } | |
| .search-results li a:hover, | |
| .search-results li a.active { | |
| background: var(--bg-sunken); | |
| } | |
| .search-result-title { | |
| font-size: 13.5px; | |
| font-weight: 600; | |
| } | |
| .search-result-path { | |
| font-size: 11.5px; | |
| color: var(--text-faint); | |
| } | |
| .search-result-excerpt { | |
| font-size: 12.5px; | |
| color: var(--text-muted); | |
| margin-top: 2px; | |
| } | |
| .search-empty { | |
| padding: 24px 16px; | |
| text-align: center; | |
| color: var(--text-muted); | |
| font-size: 13.5px; | |
| } | |
| /* ============================================================ | |
| Not found | |
| ============================================================ */ | |
| .not-found { | |
| max-width: var(--content-max); | |
| padding: 40px 0; | |
| } | |
| .not-found a { | |
| color: var(--accent); | |
| font-weight: 600; | |
| } | |
| /* ============================================================ | |
| Footer | |
| ============================================================ */ | |
| .site-footer { | |
| border-top: 1px solid var(--border); | |
| background: var(--bg-sunken); | |
| } | |
| .footer-inner { | |
| max-width: 1440px; | |
| margin: 0 auto; | |
| padding: 18px 40px; | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| font-size: 12.5px; | |
| color: var(--text-muted); | |
| } | |
| .footer-title { | |
| font-weight: 600; | |
| color: var(--text); | |
| } | |
| .footer-links { | |
| display: flex; | |
| gap: 16px; | |
| margin-right: auto; | |
| } | |
| .footer-links a:hover, | |
| .footer-top:hover { | |
| color: var(--text); | |
| } | |
| .footer-top { | |
| flex-shrink: 0; | |
| } | |
| @media (max-width: 600px) { | |
| .footer-inner { | |
| padding: 16px; | |
| flex-wrap: wrap; | |
| } | |
| .footer-links { | |
| order: 3; | |
| width: 100%; | |
| margin-right: 0; | |
| } | |
| } | |