/* ============================================================ FIBRIC docs.css — the dark, Microsoft-Learn-style docs shell. Used by every page under /docs/. Pages set: and link tokens.css + base.css + docs.css (in that order). Shape: .docs__shell = [ rail | main | toc ] .docs__rail — left section nav (sections + links, aria-current) .docs__main — content column, measure ~760px .docs__toc — sticky right "On this page" Plus: breadcrumbs (.crumb), version pill, copy-able .code blocks, tables, callouts (.note/.warn/.tip), API method badges (.method), parameter tables, light/dark toggle. Dense, readable, professional. Honors the light theme too. ============================================================ */ /* ---- page frame -------------------------------------------------- */ body.docs-body { overflow-x: hidden; } /* top doc bar: brand + version pill + theme toggle live in the shared nav, but docs add a thin contextual sub-bar above the grid. */ .docs__bar{ position:sticky; top:52px; z-index:40; margin-top:62px; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding:.7rem var(--gutter); background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:blur(10px); border-block:1px solid var(--line); } .docs__bar .crumb{margin:0} .docs__bar-spacer{flex:1 1 auto} /* version pill */ .ver-pill{ font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; display:inline-flex; align-items:center; gap:.45rem; padding:.34rem .7rem; border-radius:var(--r-pill); border:1px solid var(--line); color:var(--ink-2); background:var(--card); } .ver-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%,transparent)} /* theme toggle button is base .theme-toggle; add icon spacing here */ .docs__bar .theme-toggle{display:inline-flex;align-items:center;gap:.45rem} /* ---- breadcrumbs ------------------------------------------------- */ .crumb{ font-family:var(--mono); font-size:.74rem; letter-spacing:.03em; color:var(--mid); display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; } .crumb a{color:var(--mid);transition:color .2s} .crumb a:hover{color:var(--ink)} .crumb .sep{color:var(--faint)} .crumb [aria-current]{color:var(--ink-2)} /* ---- the 3-column grid ------------------------------------------- */ .docs__shell{ max-width:1320px; margin-inline:auto; display:grid; grid-template-columns:248px minmax(0,1fr) 220px; gap:clamp(1.5rem,3vw,3rem); padding:2.2rem var(--gutter) 5rem; align-items:start; } /* ---- left rail --------------------------------------------------- */ .docs__rail{ position:sticky; top:4.4rem; align-self:start; max-height:calc(100vh - 5.5rem); overflow-y:auto; padding-right:.5rem; font-size:.93rem; scrollbar-width:thin; } .docs__rail::-webkit-scrollbar{width:8px} .docs__rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px} .rail-sec{margin-bottom:1.5rem} .rail-sec > .rail-h{ font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--faint); margin:0 0 .55rem .2rem; font-weight:500; } .docs__rail a{ display:block; color:var(--ink-2); padding:.4rem .7rem; border-radius:var(--r-sm); line-height:1.35; transition:background .15s,color .15s; border-left:2px solid transparent; } .docs__rail a:hover{background:var(--paper-2);color:var(--ink)} .docs__rail a[aria-current], .docs__rail a.is-active{ color:var(--ink); font-weight:600; background:var(--paper-2); border-left-color:var(--ink); } :root[data-theme="dark"] .docs__rail a[aria-current], :root[data-theme="dark"] .docs__rail a.is-active{ border-left-color:var(--lime); } /* ---- main content ------------------------------------------------ */ .docs__main{min-width:0; max-width:780px} .docs__main h1{ font-family:var(--display); font-weight:800; letter-spacing:-.025em; font-size:clamp(1.9rem,1.3rem+2vw,2.9rem); line-height:1.05; margin:.2rem 0 .5rem; color:var(--ink); } .docs__main h2{ font-family:var(--display); font-weight:800; letter-spacing:-.02em; font-size:clamp(1.35rem,1.05rem+1vw,1.8rem); line-height:1.15; margin:2.6rem 0 .7rem; padding-top:.4rem; color:var(--ink); scroll-margin-top:5rem; } .docs__main h3{ font-family:var(--display); font-weight:700; letter-spacing:-.01em; font-size:1.18rem; margin:1.8rem 0 .5rem; color:var(--ink); scroll-margin-top:5rem; } .docs__main h2 + h3{margin-top:1rem} .docs__lede{ font-size:var(--s1); line-height:1.5; color:var(--ink-2); max-width:62ch; margin:.4rem 0 1.6rem; font-weight:400; } .docs__main p{color:var(--ink-2); max-width:68ch; margin:0 0 1rem; line-height:1.65} .docs__main ul,.docs__main ol{margin:0 0 1.1rem 1.25rem; max-width:66ch; color:var(--ink-2)} .docs__main li{margin-bottom:.5rem; line-height:1.6} .docs__main li::marker{color:var(--faint)} .docs__main a:not(.pill):not(.anchor){ color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--faint); transition:text-decoration-color .2s; } .docs__main a:not(.pill):not(.anchor):hover{text-decoration-color:var(--ink)} :root[data-theme="dark"] .docs__main a:not(.pill):not(.anchor){text-decoration-color:var(--mid)} :root[data-theme="dark"] .docs__main a:not(.pill):not(.anchor):hover{text-decoration-color:var(--lime);color:#fff} /* heading anchor link (hover to reveal #) */ .docs__main h2,.docs__main h3{position:relative} .docs__main .anchor{ position:absolute; left:-1.2rem; top:50%; transform:translateY(-50%); color:var(--faint); opacity:0; font-weight:400; text-decoration:none; transition:opacity .15s; font-size:.9em; } .docs__main h2:hover .anchor,.docs__main h3:hover .anchor{opacity:1} /* inline code */ .docs__main :not(pre) > code, .docs__main code.inl{ font-family:var(--mono); font-size:.86em; background:var(--code-bg, #ecebe4); color:var(--ink); border:1px solid var(--code-line, var(--line)); border-radius:6px; padding:.1em .4em; white-space:nowrap; } :root[data-theme="dark"] .docs__main :not(pre) > code, :root[data-theme="dark"] .docs__main code.inl{color:var(--code-ink, #e6e9ef)} /* ---- code blocks (copyable) -------------------------------------- */ .code{ position:relative; margin:1.2rem 0 1.6rem; background:var(--code-bg, #0f1115); border:1px solid var(--code-line, #1c2026); border-radius:12px; overflow:hidden; } .code__head{ display:flex; align-items:center; gap:.6rem; padding:.5rem .8rem .5rem 1rem; border-bottom:1px solid var(--code-line, #1c2026); background:color-mix(in srgb, var(--code-bg,#0f1115) 80%, #000); } .code__lang{ font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); } .code__head-spacer{flex:1} .code__copy{ font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; color:var(--mid); background:transparent; border:1px solid var(--code-line, #1c2026); border-radius:var(--r-pill); padding:.32em .8em; cursor:pointer; transition:color .15s,border-color .15s,background .15s; } .code__copy:hover{color:var(--code-ink, #e6e9ef); border-color:var(--mid)} .code__copy.is-copied{color:#0b0c0e; background:var(--lime); border-color:var(--lime)} .code pre{ margin:0; padding:1rem 1.1rem; overflow-x:auto; font-family:var(--mono); font-size:.84rem; line-height:1.65; color:var(--code-ink, #e6e9ef); tab-size:2; } .code pre code{font:inherit;color:inherit;background:none;border:0;padding:0;white-space:pre} /* poor-man's token tint via spans the page can add */ .code .tok-key{color:#9b8cff} .code .tok-str{color:#9ad08a} .code .tok-num{color:#ffb24c} .code .tok-com{color:var(--faint);font-style:italic} .code .tok-fn{color:#6ab0ff} .code .tok-punc{color:var(--mid)} /* on light theme keep code dark for contrast (MS-Learn keeps code dark) */ :root:not([data-theme="dark"]) .code{--code-bg:#0f1115;--code-line:#1c2026;--code-ink:#e6e9ef} /* ---- callouts ---------------------------------------------------- */ .callout{ display:flex; gap:.85rem; align-items:flex-start; margin:1.3rem 0; padding:1rem 1.1rem; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); line-height:1.55; } .callout p{margin:0;max-width:none;color:inherit} .callout p + p{margin-top:.5rem} .callout__icon{ flex:none; width:24px; height:24px; border-radius:7px; display:grid; place-items:center; font-family:var(--mono); font-weight:600; font-size:.8rem; color:#0b0c0e; } .callout__body{min-width:0} .callout__label{ display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.25rem; color:var(--ink); } .callout.note{border-left:3px solid var(--sky)} .callout.note .callout__icon{background:var(--sky)} .callout.tip{border-left:3px solid var(--green)} .callout.tip .callout__icon{background:var(--green)} .callout.warn{border-left:3px solid var(--coral)} .callout.warn .callout__icon{background:var(--coral)} /* ---- tables ------------------------------------------------------ */ .docs__main table, .tbl{ width:100%; border-collapse:collapse; margin:1.2rem 0 1.6rem; font-size:.9rem; border:1px solid var(--line); border-radius:12px; overflow:hidden; } .docs__main thead th,.tbl thead th{ text-align:left; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--mid); background:var(--paper-2); padding:.7rem .9rem; border-bottom:1px solid var(--line); font-weight:500; } .docs__main tbody td,.tbl tbody td{ padding:.7rem .9rem; border-bottom:1px solid var(--line); color:var(--ink-2); vertical-align:top; line-height:1.5; } .docs__main tbody tr:last-child td,.tbl tbody tr:last-child td{border-bottom:0} .docs__main tbody tr:hover td,.tbl tbody tr:hover td{background:color-mix(in srgb,var(--paper-2) 60%,transparent)} .tbl td code,.docs__main td code{white-space:nowrap} /* ---- parameter tables (API params) ------------------------------- */ .params{margin:1.2rem 0 1.6rem; border-top:1px solid var(--line)} .param{ display:grid; grid-template-columns:minmax(150px,1fr) 3fr; gap:1rem 1.4rem; padding:1rem .2rem; border-bottom:1px solid var(--line); align-items:start; } .param__name{font-family:var(--mono); font-size:.86rem; color:var(--ink); word-break:break-word} .param__name .req{color:var(--coral); margin-left:.3rem; font-size:.75rem} .param__type{ display:block; font-family:var(--mono); font-size:.72rem; color:var(--faint); margin-top:.25rem; text-transform:lowercase; } .param__desc{color:var(--ink-2); line-height:1.55; font-size:.92rem} .param__desc p{margin:0 0 .4rem;max-width:none} @media(max-width:560px){.param{grid-template-columns:1fr;gap:.4rem}} /* ---- API method badge -------------------------------------------- */ .method{ font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#0b0c0e; padding:.28em .6em; border-radius:6px; display:inline-block; line-height:1; } .method.get{background:var(--green)} .method.post{background:var(--sky);color:#fff} .method.put{background:var(--lime)} .method.del{background:var(--coral);color:#fff} .method.patch{background:#c9a3ff} /* endpoint line */ .endpoint{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; font-family:var(--mono); font-size:.9rem; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.7rem .9rem; margin:1rem 0 1.4rem; } .endpoint .path{color:var(--ink-2);word-break:break-all} /* ---- right TOC --------------------------------------------------- */ .docs__toc{ position:sticky; top:4.4rem; align-self:start; max-height:calc(100vh - 5.5rem); overflow-y:auto; font-size:.82rem; } .docs__toc-h{ font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; color:var(--faint); margin-bottom:.7rem; } .docs__toc a{ display:block; color:var(--mid); padding:.28rem 0 .28rem .7rem; border-left:2px solid var(--line); line-height:1.35; transition:color .15s,border-color .15s; } .docs__toc a:hover{color:var(--ink)} .docs__toc a.lvl-3{padding-left:1.4rem; font-size:.78rem} .docs__toc a[aria-current]{color:var(--ink);border-left-color:var(--ink)} :root[data-theme="dark"] .docs__toc a[aria-current]{border-left-color:var(--lime);color:#fff} /* ---- footer nav within docs (prev/next) -------------------------- */ .docs__pager{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line); } .docs__pager a{ display:block; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:12px; transition:border-color .2s,background .2s; } .docs__pager a:hover{border-color:var(--ink-2);background:var(--card)} .docs__pager .dir{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)} .docs__pager .ttl{display:block;margin-top:.3rem;font-weight:700;color:var(--ink)} .docs__pager .next{text-align:right} /* ---- responsive collapse ----------------------------------------- */ @media(max-width:1080px){ .docs__shell{grid-template-columns:220px minmax(0,1fr)} .docs__toc{display:none} } @media(max-width:860px){ .docs__shell{grid-template-columns:1fr; padding-top:1.4rem} .docs__rail{ position:static; max-height:none; overflow:visible; border:1px solid var(--line); border-radius:12px; padding:1rem; margin-bottom:1.5rem; background:var(--card); } .docs__pager{grid-template-columns:1fr} .docs__pager .next{text-align:left} }