/* ============================================================ 4Rooms Help Center — single stylesheet Light + dark themes via CSS variables on . ============================================================ */ :root { --brand: #14507a; --brand-strong: #0d3a5c; /* headings, active text */ --accent: #e8f1f8; /* selected/hover wash */ --text: #1f2933; --text-soft: #5f6b76; --border: #dde3e8; --bg: #ffffff; --bg-soft: #f6f8fa; --bg-elev: #ffffff; /* menus, cards, inputs */ --header-bg: #14507a; --header-text: #ffffff; --green: #1a7f4b; --red: #b3261e; --amber-bg: #fff8e1; --amber-border: #f0c36d; --danger-bg: #fdf3f2; --shadow: 0 8px 28px rgba(15, 30, 45, .18); --radius: 8px; --sidebar-w: 280px; --toc-w: 200px; --rail-w: 46px; } /* Dark theme — explicit user choice */ html[data-theme="dark"] { --brand: #5aa4d6; --brand-strong: #8ec4e8; --accent: rgba(90, 164, 214, .14); --text: #e2e9ef; --text-soft: #97a5b1; --border: #2b3540; --bg: #10151a; --bg-soft: #171e25; --bg-elev: #1d2630; --header-bg: #0d2436; --header-text: #e2e9ef; --green: #4cc38a; --red: #e5786f; --amber-bg: #2e2812; --amber-border: #6b5a1e; --danger-bg: #2c1a18; --shadow: 0 8px 28px rgba(0, 0, 0, .55); } /* Dark theme — OS preference, unless the user explicitly chose light */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="dark"]) { --brand: #5aa4d6; --brand-strong: #8ec4e8; --accent: rgba(90, 164, 214, .14); --text: #e2e9ef; --text-soft: #97a5b1; --border: #2b3540; --bg: #10151a; --bg-soft: #171e25; --bg-elev: #1d2630; --header-bg: #0d2436; --header-text: #e2e9ef; --green: #4cc38a; --red: #e5786f; --amber-bg: #2e2812; --amber-border: #6b5a1e; --danger-bg: #2c1a18; --shadow: 0 8px 28px rgba(0, 0, 0, .55); } } * { box-sizing: border-box; } /* The hidden attribute must always win, even over display:flex components */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } /* ---- motion: one smooth standard everywhere ---- */ .menu-item, .sidebar .row, .rail button, .rail a, .icon-btn, .btn-link, .user-btn, .lang-switch a, .feedback-btn, .card, .prev-next a, .split-main, .split-caret, .suggest-list li a, .toc nav a, .toc-hide, .copy-code, .toc-restore, .nav-toggle, .login-card button[type="submit"] { transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .1s ease, opacity .18s ease; } /* gentle press feedback on real buttons */ .menu-item:active, .rail button:active, .icon-btn:active, .user-btn:active, .feedback-btn:active, .split-main:active, .split-caret:active, .copy-code:active, .toc-restore:active { transform: scale(.96); } /* dropdowns and suggestions ease in instead of popping */ @keyframes hcMenuIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } } .menu:not([hidden]), .suggest-list:not([hidden]) { animation: hcMenuIn .16s ease; transform-origin: top right; } /* nested tree levels fade in when a branch opens */ @keyframes hcFadeIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } } .sidebar details[open] > ul { animation: hcFadeIn .18s ease; } /* Cross-document view transitions: page-to-page navigation crossfades instead of flashing (progressive enhancement — older browsers just load normally). */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation-duration: .14s; } ::view-transition-new(root) { animation-duration: .14s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } @view-transition { navigation: none; } } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.65; color: var(--text); background: var(--bg); } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; } /* ============================================================ Header ============================================================ */ .site-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: .9rem; padding: 0 1rem; height: 56px; background: var(--header-bg); color: var(--header-text); } .brand { display: flex; align-items: center; gap: .55rem; color: var(--header-text); font-weight: 600; font-size: 1rem; white-space: nowrap; } .brand img { display: block; width: 30px; height: 30px; } .brand span { opacity: .9; } .brand:hover { text-decoration: none; } /* theme-dependent image variants (mirrors the color-token logic) */ .only-dark { display: none; } html[data-theme="dark"] .only-light { display: none; } html[data-theme="dark"] .only-dark { display: block; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="dark"]) .only-light { display: none; } html:not([data-theme="light"]):not([data-theme="dark"]) .only-dark { display: block; } } .nav-toggle { display: none; background: none; border: 0; color: var(--header-text); font-size: 1.35rem; cursor: pointer; padding: .25rem .45rem; } .search-box { position: relative; flex: 1; max-width: 460px; } .search-box input[type="search"] { width: 100%; padding: .45rem .95rem; border: 0; border-radius: 20px; font-size: .95rem; color: #1f2933; background: rgba(255,255,255,.92); } .search-box input[type="search"]:focus { outline: 2px solid #fff; background: #fff; } .suggest-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: .3rem 0; list-style: none; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); max-height: 330px; overflow-y: auto; z-index: 60; } .suggest-list li a { display: block; padding: .45rem .95rem; color: var(--text); } .suggest-list li a:hover, .suggest-list li a:focus { background: var(--accent); text-decoration: none; } .suggest-list .suggest-path { display: block; font-size: .78rem; color: var(--text-soft); } .header-right { margin-left: auto; display: flex; align-items: center; gap: .55rem; white-space: nowrap; } .lang-switch { display: flex; gap: .1rem; } .lang-switch a { color: var(--header-text); opacity: .65; font-size: .8rem; padding: .15rem .4rem; border-radius: 10px; } .lang-switch a:hover { opacity: 1; text-decoration: none; background: rgba(255,255,255,.12); } .lang-switch a.active { opacity: 1; font-weight: 700; background: rgba(255,255,255,.18); } .icon-btn { background: none; border: 0; color: var(--header-text); font-size: 1.05rem; line-height: 1; cursor: pointer; padding: .35rem .45rem; border-radius: 8px; } .icon-btn:hover { background: rgba(255,255,255,.14); } .btn-link { background: none; border: 0; cursor: pointer; color: var(--header-text); font-size: .9rem; padding: .3rem .5rem; border-radius: 8px; } .btn-link:hover { background: rgba(255,255,255,.14); text-decoration: none; } /* ---- user dropdown ---- */ .user-btn { display: flex; align-items: center; gap: .45rem; background: rgba(255,255,255,.12); border: 0; color: var(--header-text); font: inherit; font-size: .88rem; padding: .28rem .7rem .28rem .32rem; border-radius: 18px; cursor: pointer; } .user-btn:hover { background: rgba(255,255,255,.22); } .avatar { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--brand-strong); font-size: .78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; text-transform: uppercase; } html[data-theme="dark"] .avatar { background: #2f4c63; color: #cfe6f6; } /* ============================================================ Dropdown menus (header + page actions) ============================================================ */ .dropdown { position: relative; } .menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 250px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: .35rem; z-index: 70; } .menu-head { padding: .5rem .8rem .55rem; border-bottom: 1px solid var(--border); margin-bottom: .3rem; color: var(--text); font-weight: 600; font-size: .9rem; } .menu-head small { display: block; font-weight: 400; color: var(--text-soft); font-size: .78rem; } .menu-item { display: flex; align-items: flex-start; gap: .65rem; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: .5rem .7rem; font: inherit; font-size: .88rem; color: var(--text); cursor: pointer; text-decoration: none; } .menu-item:hover { background: var(--accent); text-decoration: none; } .menu-item .mi-icon { width: 1.25rem; text-align: center; flex: none; color: var(--text-soft); padding-top: .05rem; } .menu-item strong { display: block; font-weight: 600; } .menu-item small { display: block; color: var(--text-soft); font-size: .77rem; line-height: 1.35; } .menu-sep { border: 0; border-top: 1px solid var(--border); margin: .3rem 0; } /* ============================================================ Layout: rail + sidebar + content ============================================================ */ .page { display: flex; min-height: calc(100vh - 56px); } /* Floating icon rail — always available, even with the tree hidden */ .rail { width: var(--rail-w); flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .6rem 0; border-right: 1px solid var(--border); background: var(--bg-soft); position: sticky; top: 56px; height: calc(100vh - 56px); z-index: 20; } .rail button, .rail a { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: .95rem; border: 0; border-radius: 8px; background: none; color: var(--text-soft); cursor: pointer; text-decoration: none; } .rail button:hover, .rail a:hover { background: var(--accent); color: var(--brand); text-decoration: none; } .rail a.active { background: var(--accent); color: var(--brand); } .rail .rail-sep { width: 20px; border-top: 1px solid var(--border); margin: .25rem 0; } body.sidebar-hidden .rail-tree-tools { display: none; } .sidebar { width: var(--sidebar-w); min-width: 180px; max-width: 50vw; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--bg-soft); padding: .7rem 0 1rem; overflow-y: auto; position: sticky; top: 56px; height: calc(100vh - 56px); } body.sidebar-hidden .sidebar { display: none; } /* ---- tree ---- */ .sidebar ul { list-style: none; margin: 0; padding: 0; } .sidebar .row { display: flex; align-items: center; gap: .15rem; padding: .34rem .55rem; border-left: 3px solid transparent; color: var(--text); font-size: .92rem; cursor: pointer; text-decoration: none; } .sidebar .row:hover { background: var(--accent); text-decoration: none; } .sidebar .row.active { background: var(--accent); border-left-color: var(--brand); color: var(--brand-strong); font-weight: 600; } .sidebar .row a { flex: 1; color: inherit; min-width: 0; overflow-wrap: anywhere; } .sidebar .row a:hover { text-decoration: none; } /* chevron: visible on parents, blank spacer on leaves — keeps text aligned */ .sidebar .row::before { content: '▸'; width: 1.05rem; flex: none; text-align: center; color: var(--text-soft); font-size: .78rem; transition: transform .15s ease; visibility: hidden; } .sidebar summary.row::before { visibility: visible; } .sidebar details[open] > summary.row::before { transform: rotate(90deg); } .sidebar summary { list-style: none; } .sidebar summary::-webkit-details-marker { display: none; } /* indentation per depth (supports up to 6 levels) */ .sidebar .d0 { padding-left: .55rem; } .sidebar .d1 { padding-left: 1.55rem; } .sidebar .d2 { padding-left: 2.55rem; } .sidebar .d3 { padding-left: 3.55rem; } .sidebar .d4 { padding-left: 4.55rem; } .sidebar .d5 { padding-left: 5.55rem; } .sidebar .child-count { font-size: .68rem; color: var(--text-soft); background: var(--border); border-radius: 10px; padding: 0 .45rem; margin-left: .3rem; line-height: 1.5; flex: none; } /* Drag handle between sidebar and content */ .resize-handle { width: 5px; flex-shrink: 0; cursor: col-resize; position: sticky; top: 56px; height: calc(100vh - 56px); margin-left: -5px; z-index: 30; } .resize-handle:hover, .resize-handle.dragging { background: var(--brand); opacity: .35; } body.sidebar-hidden .resize-handle { display: none; } /* mobile drawer backdrop */ .backdrop { position: fixed; inset: 56px 0 0; background: rgba(0,0,0,.45); z-index: 35; border: 0; padding: 0; } /* ============================================================ Content column ============================================================ */ /* One reading container, always centered in whatever space the open panels leave. The article flexes inside it, so every combination of open/closed panels stays balanced with no dead zones. */ .content { flex: 1; min-width: 0; padding: 1.2rem 2.5rem 3rem; max-width: 1220px; margin: 0 auto; } .article-wrap { display: flex; gap: 1.5rem; align-items: flex-start; } .article-body { flex: 1; min-width: 0; } /* ---- breadcrumbs + actions row ---- */ .content-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .breadcrumbs { font-size: .85rem; color: var(--text-soft); } .breadcrumbs span { margin: 0 .35rem; } /* GitBook-style split button */ .page-actions { display: flex; } .split-main, .split-caret { font: inherit; font-size: .82rem; padding: .3rem .75rem; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); cursor: pointer; } .split-main { border-radius: 16px 0 0 16px; border-right: 0; } .split-caret { border-radius: 0 16px 16px 0; padding: .3rem .55rem; color: var(--text-soft); } .split-main:hover, .split-caret:hover { background: var(--accent); color: var(--brand); } .split-main.done { background: var(--accent); color: var(--green); } .page-actions .menu { min-width: 270px; top: calc(100% + 6px); } /* ============================================================ Article typography & blocks ============================================================ */ .article-body h1 { font-size: 1.9rem; line-height: 1.25; margin: 0 0 .6rem; color: var(--brand-strong); } .article-body h2 { font-size: 1.35rem; margin: 2rem 0 .6rem; padding-top: .5rem; border-top: 1px solid var(--border); color: var(--brand-strong); } .article-body h3 { font-size: 1.1rem; margin: 1.4rem 0 .4rem; } .article-body p.lead { font-size: 1.1rem; color: var(--text-soft); margin-top: 0; } .article-body table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .93rem; } .article-body th, .article-body td { border: 1px solid var(--border); padding: .5rem .7rem; text-align: left; } .article-body th { background: var(--bg-soft); } .article-body code, .article-body kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 4px; padding: .1em .35em; } .article-body kbd { box-shadow: 0 1px 0 var(--border); } ol.steps { counter-reset: step; list-style: none; padding-left: 0; } ol.steps > li { counter-increment: step; position: relative; padding: 0 0 1rem 3rem; } ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: .9rem; } html[data-theme="dark"] ol.steps > li::before { color: #0d2436; } .note, .notice, .warning, .tip { border-radius: var(--radius); padding: .8rem 1rem; margin: 1rem 0; border: 1px solid var(--border); background: var(--bg-soft); } .note { border-left: 4px solid var(--brand); } .tip { border-left: 4px solid var(--green); } .warning { border-left: 4px solid var(--red); background: var(--danger-bg); } .notice-fallback { background: var(--amber-bg); border-color: var(--amber-border); } .notice-error { background: var(--danger-bg); border-color: var(--red); color: var(--red); } figure.screenshot { margin: 1.2rem 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); } figure.screenshot img { display: block; max-width: 100%; height: auto; } figure.screenshot figcaption { padding: .5rem .9rem; font-size: .85rem; color: var(--text-soft); border-top: 1px solid var(--border); } .img-placeholder { display: flex; align-items: center; justify-content: center; height: 220px; color: var(--text-soft); font-size: .9rem; } .article-meta { color: var(--text-soft); font-size: .82rem; margin-top: 2.5rem; } /* ---- badges / pills ---- */ .badge { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; line-height: 1.6; padding: 0 .5rem; border-radius: 10px; vertical-align: middle; background: var(--accent); color: var(--brand); border: 1px solid var(--brand); } .badge-success { background: transparent; color: var(--green); border-color: var(--green); } .badge-warn { background: var(--amber-bg); color: inherit; border-color: var(--amber-border); } .badge-danger { background: transparent; color: var(--red); border-color: var(--red); } /* ---- definition list (glossary terms) ---- */ .article-body dl { margin: 1rem 0; } .article-body dt { font-weight: 700; margin-top: .7rem; } .article-body dd { margin: .1rem 0 0 1.2rem; color: var(--text-soft); } /* ---- blockquote (templates, guest-facing wording) ---- */ .article-body blockquote { margin: 1.2rem 0; padding: .8rem 1.1rem; border-left: 4px solid var(--border); background: var(--bg-soft); border-radius: 0 var(--radius) var(--radius) 0; color: var(--text-soft); font-style: italic; } .article-body blockquote p { margin: .3rem 0; } /* ---- collapsible sections (FAQ / optional detail) ---- */ .accordion { border: 1px solid var(--border); border-radius: var(--radius); margin: .7rem 0; background: var(--bg-soft); overflow: hidden; } .accordion > summary { list-style: none; cursor: pointer; padding: .7rem 1rem .7rem 2.3rem; font-weight: 600; position: relative; transition: background-color .18s ease; } .accordion > summary::-webkit-details-marker { display: none; } .accordion > summary::before { content: '▸'; position: absolute; left: 1rem; color: var(--text-soft); transition: transform .15s ease; } .accordion[open] > summary::before { transform: rotate(90deg); } .accordion > summary:hover { background: var(--accent); } .accordion > :not(summary) { margin-left: 1rem; margin-right: 1rem; } .accordion > p:last-child, .accordion > ul:last-child, .accordion > ol:last-child { margin-bottom: 1rem; } /* ---- Do / Don't comparison ---- */ .do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.2rem 0; } .do-dont .do, .do-dont .dont { border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem 1rem; background: var(--bg-soft); } .do-dont .do { border-top: 3px solid var(--green); } .do-dont .dont { border-top: 3px solid var(--red); } .do-dont .dd-head { display: block; margin-bottom: .4rem; } .do-dont .do .dd-head { color: var(--green); } .do-dont .dont .dd-head { color: var(--red); } .do-dont ul { margin: 0; padding-left: 1.2rem; } .do-dont li { margin: .25rem 0; } @media (max-width: 640px) { .do-dont { grid-template-columns: 1fr; } } /* ---- file / download link ---- */ .file-link { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem .95rem; margin: .3rem 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); color: var(--text); font-weight: 600; transition: background-color .18s ease, border-color .18s ease; } .file-link:hover { border-color: var(--brand); background: var(--accent); text-decoration: none; } .file-link small { font-weight: 400; color: var(--text-soft); } /* ---- wide-table wrapper (desktop horizontal scroll) ---- */ .table-scroll { overflow-x: auto; margin: 1rem 0; } .table-scroll table { margin: 0; } .table-scroll th, .table-scroll td { white-space: nowrap; } /* ---- code / JSON viewer (dark in both themes) ---- */ .article-body pre { position: relative; background: #0f1b26; color: #dbe7f0; border: 1px solid #22384c; border-radius: var(--radius); padding: 1rem 1.1rem; overflow-x: auto; font-size: .85rem; line-height: 1.55; } .article-body pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; } .copy-code { position: absolute; top: .5rem; right: .5rem; font: inherit; font-size: .72rem; padding: .15rem .55rem; border: 1px solid rgba(255,255,255,.25); border-radius: 10px; background: rgba(255,255,255,.08); color: #dbe7f0; cursor: pointer; } .copy-code:hover { background: rgba(255,255,255,.2); } .copy-code.done { border-color: #4cc38a; color: #8fe0b4; } /* ---- tabbed code viewer (same snippet in several languages) ---- */ .code-tabs { margin: 1rem 0; } .ct-bar { display: flex; gap: .2rem; flex-wrap: wrap; background: #0b141d; border: 1px solid #22384c; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; padding: .4rem .5rem 0; } .ct-tab { font: inherit; font-size: .78rem; padding: .35rem .85rem; border: 0; border-radius: 6px 6px 0 0; background: none; color: #93a1ad; cursor: pointer; transition: background-color .18s ease, color .18s ease; } .ct-tab:hover { color: #dbe7f0; } .ct-tab.active { background: #0f1b26; color: #dbe7f0; } .code-tabs pre { margin: 0; border-radius: 0 0 var(--radius) var(--radius); } .article-body video { display: block; max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius); margin: 1.2rem 0; background: #000; } /* ---- image gallery grid ---- */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin: 1.2rem 0; } .gallery figure.screenshot { margin: 0; } /* article images zoom on click */ .article-body figure.screenshot img, .gallery img { cursor: zoom-in; } /* ---- lightbox ---- */ .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(8, 12, 16, .92); display: flex; align-items: center; justify-content: center; } .lightbox img { max-width: 92vw; max-height: 82vh; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.6); cursor: default; } .lb-caption { position: absolute; bottom: 4.2rem; left: 0; right: 0; text-align: center; color: #dbe7f0; font-size: .92rem; padding: 0 2rem; } .lb-count { position: absolute; bottom: 1.6rem; left: 0; right: 0; text-align: center; color: #93a1ad; font-size: .8rem; } .lb-close, .lb-prev, .lb-next { position: absolute; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #dbe7f0; font-size: 1.3rem; line-height: 1; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color .18s ease; } .lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.22); } .lb-close { top: 1.2rem; right: 1.2rem; } .lb-prev { left: 1.2rem; top: 50%; transform: translateY(-50%); } .lb-next { right: 1.2rem; top: 50%; transform: translateY(-50%); } @keyframes hcLbIn { from { opacity: 0; } to { opacity: 1; } } .lightbox:not([hidden]) { animation: hcLbIn .18s ease; } @media (max-width: 640px) { .lb-prev { left: .5rem; } .lb-next { right: .5rem; } .lightbox img { max-width: 96vw; } } /* ============================================================ TOC (right panel) + floating restore ============================================================ */ .toc { width: var(--toc-w); min-width: 140px; max-width: 40vw; flex-shrink: 0; position: sticky; top: 76px; border-left: 2px solid var(--border); padding-left: .9rem; font-size: .85rem; } body.toc-hidden .toc { display: none !important; } .toc-head { display: flex; align-items: center; justify-content: space-between; } .toc-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); margin: 0 0 .5rem; } .toc-hide { background: none; border: 0; cursor: pointer; color: var(--text-soft); font-size: 1rem; line-height: 1; padding: 0 0 .4rem .4rem; } .toc-hide:hover { color: var(--red); } .toc nav a { display: block; padding: .15rem 0; color: var(--text-soft); } .toc nav a.toc-h3 { padding-left: 1rem; } .toc nav a:hover { color: var(--brand); } .toc-resize { position: absolute; left: -3px; top: 0; width: 6px; height: 100%; cursor: col-resize; } .toc-resize:hover, .toc-resize.dragging { background: var(--brand); opacity: .35; } /* Floating restore button when the TOC is hidden */ .toc-restore { display: none; position: fixed; right: 14px; bottom: 22px; z-index: 40; width: 42px; height: 42px; align-items: center; justify-content: center; font-size: 1.05rem; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-elev); color: var(--text-soft); cursor: pointer; box-shadow: var(--shadow); } body.toc-hidden .toc-restore.available { display: flex; } .toc-restore:hover { color: var(--brand); border-color: var(--brand); } /* ============================================================ Prev/next, feedback ============================================================ */ .prev-next { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); } .prev-next a { padding: .6rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); max-width: 48%; } .prev-next a:hover { background: var(--accent); text-decoration: none; } .feedback { margin-top: 2rem; padding: 1rem; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); } .feedback-q { font-weight: 600; margin-right: .8rem; } .feedback-btn { font: inherit; font-size: .9rem; padding: .35rem .9rem; margin-right: .4rem; border: 1px solid var(--border); border-radius: 20px; background: var(--bg-elev); color: var(--text); cursor: pointer; } .feedback-btn:hover { border-color: var(--brand); } .feedback-comment { margin-top: .8rem; } .feedback-comment textarea { width: 100%; font: inherit; font-size: .92rem; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); color: var(--text); resize: vertical; margin-bottom: .5rem; } .feedback-thanks { color: var(--green); font-weight: 600; } /* ============================================================ Home cards, search results, directory, stats ============================================================ */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin: 1.5rem 0; } .card { display: block; padding: 1.1rem 1.2rem; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); background: var(--bg-soft); } .card:hover { border-color: var(--brand); text-decoration: none; background: var(--accent); } .card strong { display: block; color: var(--brand-strong); margin-bottom: .25rem; } .card-count { font-size: .82rem; color: var(--text-soft); } .search-summary { color: var(--text-soft); } .search-results { list-style: none; padding: 0; } .search-results li { padding: .9rem 0; border-bottom: 1px solid var(--border); } .search-results li a { font-size: 1.05rem; font-weight: 600; } .search-results .result-path { display: block; font-size: .8rem; color: var(--text-soft); } .search-results p { margin: .3rem 0 0; font-size: .92rem; color: var(--text-soft); } .directory-page .dir-list { list-style: none; padding-left: 0; } .directory-page .dir-list .dir-list { padding-left: 1.6rem; border-left: 2px solid var(--border); margin: .3rem 0 .6rem; } .directory-page .dir-list > li { padding: .3rem 0; } .directory-page .dir-list a { font-weight: 600; } .dir-summary { display: block; font-size: .85rem; color: var(--text-soft); } .dir-badge { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--green); border: 1px solid var(--green); border-radius: 10px; padding: 0 .45rem; margin-left: .4rem; vertical-align: middle; } .stats-page table { border-collapse: collapse; width: 100%; margin: .6rem 0 1.6rem; font-size: .9rem; } .stats-page th, .stats-page td { border: 1px solid var(--border); padding: .4rem .6rem; text-align: left; } .stats-page th { background: var(--bg-soft); } /* ============================================================ Login page ============================================================ */ .login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--header-bg); } .login-card { width: 100%; max-width: 380px; background: var(--bg-elev); border-radius: 12px; padding: 2rem 2.2rem 2.2rem; box-shadow: var(--shadow); } .login-logo { margin: 0 0 1.4rem; text-align: center; } .login-logo img { width: 150px; height: auto; margin: 0 auto; } .login-card label { display: block; font-size: .88rem; font-weight: 600; margin: .9rem 0 .25rem; color: var(--text); } .login-card input { width: 100%; font: inherit; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); } .login-card input:focus { outline: 2px solid var(--brand); border-color: var(--brand); } .login-card button[type="submit"] { width: 100%; margin-top: 1.3rem; font: inherit; font-weight: 600; padding: .6rem; color: #fff; background: var(--brand); border: 0; border-radius: var(--radius); cursor: pointer; } .login-card button[type="submit"]:hover { filter: brightness(1.1); } .login-back { display: block; text-align: center; margin-top: 1.1rem; font-size: .88rem; color: var(--text-soft); transition: color .18s ease; } .login-back:hover { color: var(--brand); text-decoration: none; } html[data-theme="dark"] .login-card button[type="submit"] { color: #0d2436; } /* ============================================================ Responsive — tablet & mobile ============================================================ */ @media (max-width: 1100px) { .toc { display: none !important; } .toc-restore { display: none !important; } .content { padding: 1.2rem 1.6rem 2.5rem; } } @media (max-width: 800px) { .nav-toggle { display: block; } .rail { display: none; } .resize-handle { display: none; } .sidebar { position: fixed; left: 0; top: 56px; /* at least 75% of the screen, never narrower than 340px, never edge-to-edge */ width: min(90vw, max(75vw, 340px)) !important; height: calc(100dvh - 56px); transform: translateX(-100%); transition: transform .2s ease; z-index: 40; box-shadow: 4px 0 16px rgba(0,0,0,.25); display: block !important; /* drawer works even if desktop-hidden */ } .sidebar.open { transform: translateX(0); } .content { padding: 1rem 1rem 2.5rem; } .content-top { flex-direction: row; } .brand span { display: none; } .user-btn .user-name { display: none; } .search-box { max-width: none; } .article-body h1 { font-size: 1.5rem; } .article-body h2 { font-size: 1.2rem; } /* wide tables scroll instead of breaking the layout */ .article-body table { display: block; overflow-x: auto; white-space: nowrap; } .prev-next { flex-direction: column; } .prev-next a { max-width: none; } .menu { min-width: 230px; max-width: calc(100vw - 24px); } ol.steps > li { padding-left: 2.6rem; } } @media (max-width: 480px) { .site-header { gap: .5rem; padding: 0 .6rem; } .lang-switch a { padding: .15rem .3rem; font-size: .75rem; } .search-box input[type="search"] { font-size: .88rem; padding: .4rem .75rem; } .card-grid { grid-template-columns: 1fr; } } /* larger touch targets on coarse pointers */ @media (pointer: coarse) { .sidebar .row { padding-top: .55rem; padding-bottom: .55rem; } .menu-item { padding: .65rem .7rem; } .tool-btn, .split-main, .split-caret { padding: .45rem .85rem; } } /* ============================================================ PRINT — clean article output for SOP binders ============================================================ */ @media print { .no-print, .site-header, .rail, .sidebar, .resize-handle, .toc, .feedback, .prev-next, .breadcrumbs, .suggest-list, .backdrop { display: none !important; } body { font-size: 11pt; color: #000; background: #fff; } .page { display: block; } .content { padding: 0; max-width: none; } .article-body { max-width: none; } .article-body a { color: #000; } .article-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #444; } h1, h2, h3 { page-break-after: avoid; break-after: avoid; color: #000; } figure, table, ol.steps > li { page-break-inside: avoid; break-inside: avoid; } figure.screenshot { border: 1pt solid #999; } .note, .tip, .warning { border: 1pt solid #999; background: none; } .article-body pre { background: #f4f4f4; color: #000; border: 1pt solid #999; } .copy-code, .toc-restore, video, .lightbox, .ct-bar { display: none !important; } .code-tabs pre { display: block !important; margin-bottom: .5cm; } .article-meta { display: block; margin-top: 1.5cm; font-size: 9pt; color: #555; } }