/* ============================================================================ uncapped docs — design-system shell, docs layout. Tokens are the LOCKED brand set (brand/branding-package/palette/tokens.css); shell tokens mirror brand/design-system/design-system.css (light default, dark via prefers-color-scheme, either forced with ). ============================================================================ */ /* ---------- 1 · brand tokens (locked) ---------- */ :root { --ink: #111111; --paper: #F4EBDD; --ignition: #F59E0B; /* uncapped dot, dark mode */ --ignition-light: #D97706; /* uncapped dot, light mode */ --vermilion: #C23A2B; --jade: #3E7D5D; --grey: #6B6660; } /* ---------- 2 · shell tokens (mode-dependent) ---------- */ :root { --bg: #F9F2E4; --fg: var(--ink); --muted: #6B6660; --card: #FDFAF2; --card-line: #E2D8C4; --rule: var(--ink); --pill-bg: #EAE0CC; --dot: var(--ignition-light); --code-bg: #F1E7D3; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0C0C0C; --fg: var(--paper); --muted: #A79E8F; --card: #171717; --card-line: #2C2A25; --rule: var(--paper); --pill-bg: #26231E; --dot: var(--ignition); --code-bg: #1B1A17; } } :root[data-theme="dark"] { --bg: #0C0C0C; --fg: var(--paper); --muted: #A79E8F; --card: #171717; --card-line: #2C2A25; --rule: var(--paper); --pill-bg: #26231E; --dot: var(--ignition); --code-bg: #1B1A17; } /* mode-swapped brand images (!important so later layout rules can't re-show both) */ .only-dark { display: none !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .only-dark { display: inline-block !important; } :root:not([data-theme="light"]) .only-light { display: none !important; } } :root[data-theme="dark"] .only-dark { display: inline-block !important; } :root[data-theme="dark"] .only-light { display: none !important; } /* ---------- 3 · base ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--fg); line-height: 1.6; font-size: 15px; } a { color: inherit; } code { font-family: ui-monospace, Menlo, monospace; font-size: 0.9em; background: var(--code-bg); border: 1px solid var(--card-line); border-radius: 4px; padding: 0.08em 0.35em; } /* ---------- 4 · masthead ---------- */ .mast { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1180px; margin: 0 auto; padding: 18px 24px 14px; border-bottom: 2px solid var(--rule); } .brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; } .brand img { display: inline-block; } .brand-name { font-weight: 800; font-size: 17px; letter-spacing: -0.2px; } .brand-suffix { color: var(--muted); font-weight: 600; font-size: 13px; letter-spacing: 0.3px; } .mast-right { display: flex; align-items: center; gap: 16px; } .mast-link { font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; } .mast-link:hover { color: var(--fg); } .theme { cursor: pointer; background: var(--pill-bg); color: var(--fg); border: 1px solid var(--card-line); border-radius: 4px; font: inherit; font-size: 11px; font-weight: 700; padding: 3px 9px; letter-spacing: 0.4px; } /* ---------- 5 · layout: sidebar + doc ---------- */ .layout { max-width: 1180px; margin: 0 auto; padding: 0 24px 90px; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 44px; } .side { padding-top: 30px; } .docs-nav { position: sticky; top: 22px; } .docs-nav summary { display: none; } .nav-group { margin-bottom: 22px; } .nav-label { font-size: 11px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; } .docs-nav ul { list-style: none; } .docs-nav li a { display: block; padding: 4px 10px; font-size: 13.5px; font-weight: 500; color: var(--muted); text-decoration: none; border-left: 2px solid var(--card-line); } .docs-nav li a:hover { color: var(--fg); } .docs-nav li a[aria-current="page"] { color: var(--fg); font-weight: 700; border-left-color: var(--dot); } /* ---------- 6 · article ---------- */ .doc { padding-top: 30px; min-width: 0; } article { max-width: 760px; } .page-head { margin-bottom: 26px; } .page-head h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; } .page-head .sub { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--muted); } article h2 { font-size: 19px; font-weight: 800; letter-spacing: 0.2px; border-bottom: 2px solid var(--rule); padding-bottom: 7px; margin: 40px 0 14px; } article h3 { font-size: 15.5px; font-weight: 700; margin: 28px 0 10px; } article h4 { font-size: 14px; font-weight: 700; margin: 22px 0 8px; color: var(--muted); } article h2 .anchor, article h3 .anchor, article h4 .anchor { text-decoration: none; color: var(--muted); opacity: 0; font-weight: 500; margin-left: 4px; } article h2:hover .anchor, article h3:hover .anchor, article h4:hover .anchor { opacity: 0.7; } article p { margin: 0 0 14px; } article hr { border: none; border-top: 1px solid var(--card-line); margin: 30px 0; } article ul, article ol { margin: 0 0 16px; padding-left: 26px; } article li { margin-bottom: 8px; } article li > ul, article li > ol { margin: 8px 0 4px; } article ol > li::marker { font-weight: 700; } article blockquote { margin: 0 0 16px; padding: 10px 16px; border-left: 3px solid var(--dot); background: var(--card); font-size: 13.5px; line-height: 1.6; } article blockquote p:last-child { margin-bottom: 0; } article pre { background: var(--code-bg); border: 1px solid var(--card-line); border-radius: 6px; padding: 12px 14px; margin: 0 0 16px; overflow-x: auto; position: relative; } article pre code { background: none; border: none; padding: 0; font-size: 12.5px; line-height: 1.55; } article li pre { margin-top: 8px; } pre .copy { position: absolute; top: 7px; right: 7px; cursor: pointer; background: var(--pill-bg); color: var(--fg); border: 1px solid var(--card-line); border-radius: 4px; font: inherit; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; padding: 2px 8px; opacity: 0.85; } pre .copy:hover { opacity: 1; } .table-wrap { overflow-x: auto; margin: 0 0 16px; } article table { border-collapse: collapse; font-size: 13px; min-width: 480px; } article th, article td { border: 1px solid var(--card-line); padding: 7px 11px; text-align: left; vertical-align: top; } article th { background: var(--card); font-weight: 700; } /* screenshot placeholder slots */ .shot { margin: 6px 0 16px; } article li .shot { margin-top: 10px; } .shot-frame { border: 1.5px dashed var(--card-line); border-radius: 8px; background: var(--card); color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; text-align: center; padding: 26px 14px; } .shot figcaption { margin-top: 6px; font-size: 12.5px; color: var(--muted); } /* ---------- 7 · prev/next + footer ---------- */ .prevnext { display: flex; justify-content: space-between; gap: 14px; max-width: 760px; margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--card-line); font-size: 13.5px; font-weight: 700; } .prevnext a { text-decoration: none; background: var(--card); border: 1px solid var(--card-line); border-radius: 6px; padding: 10px 14px; max-width: 46%; } .prevnext a:hover { border-color: var(--dot); } .prevnext a span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; } .prevnext .next { text-align: right; margin-left: auto; } .foot { max-width: 760px; margin-top: 56px; font-size: 12.5px; color: var(--muted); } .foot a { color: inherit; } /* ---------- 8 · mobile ---------- */ @media (max-width: 840px) { .layout { grid-template-columns: 1fr; gap: 0; padding: 0 18px 70px; } .mast { padding: 14px 18px 12px; } .side { padding-top: 18px; } .docs-nav { position: static; background: var(--card); border: 1px solid var(--card-line); border-radius: 8px; padding: 10px 14px; } .docs-nav summary { display: list-item; cursor: pointer; font-size: 13px; font-weight: 800; letter-spacing: 0.4px; } .docs-nav[open] summary { margin-bottom: 12px; } .doc { padding-top: 24px; } .page-head h1 { font-size: 24px; } .prevnext a { max-width: 100%; } }