/* * AdPlusMedia - Documentation Stylesheet (v2) * Standalone. Does not depend on /front/css/style.css (that file is a frozen * Tailwind v3 dump whose utility set cannot be extended). * * Theming: the inline script in the docs layout stamps data-theme="light|dark" * on before first paint. Every color below resolves through the token * blocks here, so components never hard-code a color. Code panels are always * dark in both themes on purpose. */ :root { color-scheme: light; --brand: #685dd8; --brand-hover: #574bc9; --brand-light: #8a81e3; --brand-bg: #f1efff; --brand-bg-deep: #e2deff; --brand-glow: rgba(104, 93, 216, .16); --brand-soft: rgba(104, 93, 216, .09); --text: #16161d; --text-secondary: #4a4e5c; --text-muted: #6a7080; --text-faint: #9aa0b0; --bg: #ffffff; --bg-subtle: #fafafc; --bg-sunken: #f5f5f8; --border: #eaeaef; --border-strong: #dedee7; --header-bg: rgba(255, 255, 255, .85); --backdrop: rgba(16, 16, 32, .4); --tab-active: #ffffff; /* Code panels are midnight-indigo in BOTH themes. */ --code-bg: #141623; --code-head-bg: #1a1d2f; --code-border: #272b42; --code-text: #dfe2f2; --hero-bg: linear-gradient(180deg, #f4f2ff 0%, #ffffff 78%); --hero-border: #e6e2fb; --hero-grid: rgba(104, 93, 216, .09); --hero-glow: rgba(104, 93, 216, .22); --header-h: 64px; --sidebar-w: 288px; --toc-w: 240px; --content-max: 768px; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --shadow-sm: 0 1px 2px rgba(16, 16, 32, .04); --shadow: 0 4px 16px rgba(16, 16, 32, .07); --shadow-lg: 0 20px 40px -12px var(--brand-glow); } :root[data-theme="dark"] { color-scheme: dark; --brand: #8f85f5; --brand-hover: #a49bff; --brand-light: #6f65e0; --brand-bg: rgba(143, 133, 245, .12); --brand-bg-deep: rgba(143, 133, 245, .28); --brand-glow: rgba(143, 133, 245, .2); --brand-soft: rgba(143, 133, 245, .16); --text: #edeef4; --text-secondary: #b4b8c8; --text-muted: #8b90a5; --text-faint: #61667c; --bg: #0d0e15; --bg-subtle: #12131c; --bg-sunken: #181a26; --border: #212330; --border-strong: #2d2f40; --header-bg: rgba(13, 14, 21, .82); --backdrop: rgba(4, 4, 10, .65); --tab-active: #262941; --code-bg: #12131e; --code-head-bg: #171927; --code-border: #23263a; --code-text: #dfe2f2; --hero-bg: linear-gradient(180deg, #181a30 0%, #0d0e15 82%); --hero-border: #262845; --hero-grid: rgba(143, 133, 245, .09); --hero-glow: rgba(143, 133, 245, .28); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow: 0 4px 20px rgba(0, 0, 0, .45); --shadow-lg: 0 20px 44px -12px rgba(0, 0, 0, .6); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body.docs-body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Public Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; } .docs-body ::selection { background: var(--brand-bg-deep); color: var(--text); } /* The logo PNG is brand-purple on transparent; flip it to white on dark. */ :root[data-theme="dark"] .docs-brand img, :root[data-theme="dark"] .docs-hero-logo { filter: brightness(0) invert(1); opacity: .95; } /* ========================================================================== Header ========================================================================== */ .docs-header { position: sticky; top: 0; z-index: 60; height: var(--header-h); background: var(--header-bg); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } .docs-header-inner { height: 100%; max-width: 1600px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 20px; } .docs-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; } .docs-brand img { display: block; height: 26px; width: auto; transition: opacity .18s ease; } .docs-brand:hover img { opacity: .78; } .docs-brand-divider { width: 1px; height: 20px; background: var(--border-strong); } .docs-brand-tag { font-size: 12.5px; font-weight: 650; color: var(--brand); background: var(--brand-bg); padding: 3px 10px; border-radius: 100px; letter-spacing: .01em; line-height: 1.5; } .docs-header-spacer { flex: 1; } /* Search trigger */ .docs-search { position: relative; width: 100%; max-width: 380px; } .docs-search-input { width: 100%; height: 38px; padding: 0 68px 0 38px; font: inherit; font-size: 14px; color: var(--text); background: var(--bg-sunken); border: 1px solid transparent; border-radius: var(--radius); outline: none; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; } .docs-search-input::placeholder { color: var(--text-faint); } .docs-search-input:focus { background: var(--bg); border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .docs-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-faint); pointer-events: none; } .docs-search-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; gap: 3px; pointer-events: none; } .docs-search-kbd kbd { font-family: inherit; font-size: 11px; font-weight: 600; color: var(--text-faint); background: var(--bg); border: 1px solid var(--border-strong); border-radius: 5px; padding: 2px 5px; line-height: 1.2; } /* Search results dropdown */ .docs-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: 60vh; overflow-y: auto; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 6px; display: none; } .docs-search-results.is-open { display: block; } .docs-search-result { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text); font-size: 14px; } .docs-search-result:hover, .docs-search-result.is-active { background: var(--brand-bg); color: var(--brand); } .docs-search-result-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 7px; background: var(--bg-sunken); color: var(--text-muted); } .docs-search-result:hover .docs-search-result-icon, .docs-search-result.is-active .docs-search-result-icon { background: var(--bg); color: var(--brand); } .docs-search-result-body { min-width: 0; } .docs-search-result-body strong { display: block; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .docs-search-result-body span { display: block; font-size: 12px; color: var(--text-faint); margin-top: 1px; } .docs-search-empty { padding: 16px 12px; font-size: 14px; color: var(--text-muted); text-align: center; } .docs-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .docs-btn { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px; font-size: 14px; font-weight: 600; border-radius: var(--radius); text-decoration: none; white-space: nowrap; border: 1px solid transparent; transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .docs-btn-ghost { color: var(--text-secondary); } .docs-btn-ghost:hover { background: var(--bg-sunken); color: var(--text); } .docs-btn-primary { gap: 6px; color: #fff; background: linear-gradient(180deg, #7468e0 0%, #5f53d6 100%); box-shadow: 0 1px 2px rgba(70, 60, 180, .35), inset 0 1px 0 rgba(255, 255, 255, .16); } .docs-btn-primary:hover { color: #fff; background: linear-gradient(180deg, #8075e8 0%, #6a5edd 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(70, 60, 180, .35), inset 0 1px 0 rgba(255, 255, 255, .16); } .docs-btn-outline { gap: 7px; color: var(--text); background: var(--bg); border-color: var(--border-strong); } .docs-btn-outline:hover { border-color: var(--brand-light); color: var(--brand); } .docs-menu-toggle, .docs-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg); color: var(--text-secondary); cursor: pointer; flex-shrink: 0; transition: color .18s ease, border-color .18s ease; } .docs-menu-toggle { display: none; } .docs-theme-toggle:hover { color: var(--brand); border-color: var(--brand-light); } .docs-theme-toggle svg { width: 17px; height: 17px; } .docs-theme-toggle .docs-theme-sun { display: none; } .docs-theme-toggle .docs-theme-moon { display: block; } :root[data-theme="dark"] .docs-theme-toggle .docs-theme-sun { display: block; } :root[data-theme="dark"] .docs-theme-toggle .docs-theme-moon { display: none; } /* ========================================================================== Shell ========================================================================== */ .docs-shell { max-width: 1600px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w); gap: 48px; align-items: start; } /* ========================================================================== Sidebar ========================================================================== */ .docs-sidebar { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; padding: 28px 8px 64px 0; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .docs-sidebar::-webkit-scrollbar { width: 7px; } .docs-sidebar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 100px; } .docs-sidebar::-webkit-scrollbar-track { background: transparent; } .docs-nav-group { margin-bottom: 24px; } .docs-nav-title { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .075em; color: var(--text-faint); padding: 0 10px; margin: 0 0 7px; } .docs-nav-title-icon { color: var(--brand-light); flex-shrink: 0; } .docs-nav-list { list-style: none; margin: 0; padding: 0 0 0 10px; border-left: 1px solid var(--border); } .docs-nav-link { position: relative; display: flex; align-items: center; gap: 9px; padding: 7px 10px; margin-bottom: 1px; font-size: 14.5px; font-weight: 500; color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-sm); transition: background .15s ease, color .15s ease; } /* Rail marker aligned to the group's left border. */ .docs-nav-link::before { content: ''; position: absolute; left: -11px; top: 50%; width: 2px; height: 0; background: var(--brand); border-radius: 2px; transform: translateY(-50%); transition: height .2s ease; } .docs-nav-icon { display: flex; flex-shrink: 0; color: var(--text-faint); transition: color .15s ease; } .docs-nav-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .docs-nav-link:hover { background: var(--bg-sunken); color: var(--text); } .docs-nav-link:hover .docs-nav-icon { color: var(--text-muted); } .docs-nav-link.is-active { background: var(--brand-bg); color: var(--brand); font-weight: 600; } .docs-nav-link.is-active::before { height: 18px; } .docs-nav-link.is-active .docs-nav-icon { color: var(--brand); } /* ========================================================================== Content ========================================================================== */ .docs-main { min-width: 0; padding: 40px 0 96px; max-width: var(--content-max); } .docs-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-faint); margin-bottom: 16px; } .docs-breadcrumb a { color: var(--text-faint); text-decoration: none; } .docs-breadcrumb a:hover { color: var(--brand); } .docs-breadcrumb-current { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); background: var(--brand-bg); padding: 2px 10px 2px 8px; border-radius: 100px; font-weight: 600; } .docs-article h1 { font-size: 40px; line-height: 1.15; font-weight: 800; letter-spacing: -.025em; color: var(--text); margin: 0 0 14px; text-wrap: balance; } /* ---- Landing hero ---- */ .docs-hero { position: relative; overflow: hidden; padding: 40px 38px 42px; margin: 0 0 40px; border: 1px solid var(--hero-border); border-radius: 20px; background: var(--hero-bg); } /* Faint blueprint grid, faded toward the bottom-left. */ .docs-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--hero-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(130% 110% at 100% 0%, #000 25%, transparent 72%); mask-image: radial-gradient(130% 110% at 100% 0%, #000 25%, transparent 72%); pointer-events: none; } /* Brand glow anchored to the top-right corner. */ .docs-hero::after { content: ''; position: absolute; top: -140px; right: -120px; width: 420px; height: 380px; background: radial-gradient(closest-side, var(--hero-glow), transparent 70%); pointer-events: none; } .docs-hero > * { position: relative; z-index: 1; } .docs-hero-logo { display: block; height: 29px; width: auto; margin-bottom: 22px; } .docs-hero h1 { font-size: 38px; margin-bottom: 12px; } .docs-hero .docs-lead { margin-bottom: 24px; max-width: 60ch; color: var(--text-secondary); } .docs-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; } .docs-lead { font-size: 18px; line-height: 1.65; color: var(--text-muted); margin: 0 0 36px; } .docs-article h2 { font-size: 25px; line-height: 1.3; font-weight: 700; letter-spacing: -.018em; color: var(--text); margin: 52px 0 16px; padding-top: 8px; scroll-margin-top: calc(var(--header-h) + 24px); } .docs-article h3 { font-size: 19px; line-height: 1.4; font-weight: 650; letter-spacing: -.012em; color: var(--text); margin: 36px 0 12px; scroll-margin-top: calc(var(--header-h) + 24px); } .docs-article h4 { font-size: 16px; font-weight: 650; color: var(--text); margin: 28px 0 10px; scroll-margin-top: calc(var(--header-h) + 24px); } .docs-article p { margin: 0 0 18px; color: var(--text-secondary); } .docs-article a { color: var(--brand); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--brand-bg-deep); transition: border-color .15s ease; } .docs-article a:hover { border-bottom-color: var(--brand); } .docs-article strong { color: var(--text); font-weight: 650; } .docs-article ul, .docs-article ol { margin: 0 0 18px; padding-left: 24px; color: var(--text-secondary); } .docs-article li { margin-bottom: 8px; } .docs-article li::marker { color: var(--brand-light); } .docs-article hr { border: 0; height: 1px; background: var(--border); margin: 48px 0; } /* Anchor link on headings */ .docs-anchor { opacity: 0; margin-left: 8px; font-weight: 400; color: var(--text-faint) !important; border: 0 !important; text-decoration: none; transition: opacity .15s ease; } h2:hover .docs-anchor, h3:hover .docs-anchor { opacity: 1; } /* Inline code */ .docs-article :not(pre) > code { font-family: 'Geist Mono', ui-monospace, 'SFMono-Regular', source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: .875em; font-weight: 600; color: var(--brand); background: var(--brand-bg); padding: 2px 6px; border-radius: 5px; white-space: nowrap; } /* ========================================================================== Code blocks — always dark, in both themes ========================================================================== */ .docs-code { margin: 0 0 24px; background: var(--code-bg); border: 1px solid var(--code-border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); } .docs-code-head { display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 14px; background: var(--code-head-bg); border-bottom: 1px solid var(--code-border); } /* macOS-style window dots: one element, two shadows. */ .docs-code-head::before { content: ''; flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: #f16a5e; box-shadow: 16px 0 0 #f5bf4f, 32px 0 0 #58c064; margin-right: 28px; opacity: .9; } .docs-code-lang { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #8d93b8; } .docs-copy { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font: inherit; font-size: 12px; font-weight: 600; color: #b0b5cf; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-sm); padding: 4px 9px; cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; } .docs-copy:hover { color: #fff; border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); } .docs-copy.is-copied { color: #6fdb96; border-color: rgba(111, 219, 150, .45); } .docs-copy svg { width: 13px; height: 13px; } .docs-code pre { margin: 0; padding: 16px; overflow-x: auto; background: transparent; scrollbar-width: thin; scrollbar-color: #333852 transparent; } .docs-code pre::-webkit-scrollbar { height: 8px; } .docs-code pre::-webkit-scrollbar-thumb { background: #333852; border-radius: 100px; } .docs-code pre::-webkit-scrollbar-track { background: transparent; } .docs-code code { font-family: 'Geist Mono', ui-monospace, 'SFMono-Regular', source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13.5px; line-height: 1.75; color: var(--code-text); white-space: pre; tab-size: 4; } /* Syntax tokens tuned for the dark panel (identical in both themes). */ .tok-str { color: #82d9a2; } .tok-num { color: #ff92a7; } .tok-key { color: #b3a7ff; font-weight: 600; } .tok-com { color: #6d738f; font-style: italic; } .tok-prop { color: #82c3ff; } .tok-var { color: #ffbe7d; } /* ========================================================================== Hints / callouts ========================================================================== */ .docs-hint { display: flex; gap: 12px; padding: 14px 16px; margin: 0 0 24px; border-radius: var(--radius); border: 1px solid; font-size: 15px; line-height: 1.65; } .docs-hint p { margin: 0 0 10px; color: inherit; } .docs-hint p:last-child { margin-bottom: 0; } .docs-hint ul { margin: 0; color: inherit; } .docs-hint-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; } .docs-hint-info { background: var(--brand-bg); border-color: var(--brand-bg-deep); color: #3f3a7a; } .docs-hint-info .docs-hint-icon { color: var(--brand); } .docs-hint-warning { background: #fff8ec; border-color: #fbe3bd; color: #7a5410; } .docs-hint-warning .docs-hint-icon { color: #d98a04; } .docs-hint-danger { background: #fef3f3; border-color: #fbd5d5; color: #8a2a2a; } .docs-hint-danger .docs-hint-icon { color: #dc3545; } .docs-hint-success { background: #f0fdf6; border-color: #c3ecd6; color: #1a6640; } .docs-hint-success .docs-hint-icon { color: #0f9d58; } :root[data-theme="dark"] .docs-hint-info { background: rgba(143, 133, 245, .1); border-color: rgba(143, 133, 245, .3); color: #c6c1f2; } :root[data-theme="dark"] .docs-hint-info .docs-hint-icon { color: #a49bff; } :root[data-theme="dark"] .docs-hint-warning { background: rgba(233, 168, 38, .09); border-color: rgba(233, 168, 38, .3); color: #ecc78a; } :root[data-theme="dark"] .docs-hint-warning .docs-hint-icon { color: #eaa63a; } :root[data-theme="dark"] .docs-hint-danger { background: rgba(235, 87, 87, .09); border-color: rgba(235, 87, 87, .3); color: #eda3a3; } :root[data-theme="dark"] .docs-hint-danger .docs-hint-icon { color: #f16a6a; } :root[data-theme="dark"] .docs-hint-success { background: rgba(64, 192, 120, .09); border-color: rgba(64, 192, 120, .3); color: #9adbb5; } :root[data-theme="dark"] .docs-hint-success .docs-hint-icon { color: #4ecb81; } /* ========================================================================== Tables ========================================================================== */ .docs-table-wrap { margin: 0 0 24px; border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; box-shadow: var(--shadow-sm); } .docs-table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .docs-table th { text-align: left; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .045em; color: var(--text-muted); background: var(--bg-sunken); padding: 10px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; } .docs-table td { padding: 12px 16px; color: var(--text-secondary); border-bottom: 1px solid var(--border); vertical-align: top; } .docs-table tr:last-child td { border-bottom: 0; } .docs-table tbody tr:hover td { background: var(--bg-subtle); } .docs-table code { white-space: nowrap; } /* ========================================================================== Tabs ========================================================================== */ .docs-tabs { margin: 0 0 24px; } .docs-tabs-nav { display: flex; gap: 4px; padding: 4px; background: var(--bg-sunken); border-radius: var(--radius); margin-bottom: 14px; overflow-x: auto; } .docs-tab-btn { font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-muted); background: transparent; border: 0; border-radius: var(--radius-sm); padding: 7px 14px; cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease; } .docs-tab-btn:hover { color: var(--text); } .docs-tab-btn.is-active { background: var(--tab-active); color: var(--brand); box-shadow: var(--shadow-sm); } .docs-tab-panel { display: none; } .docs-tab-panel.is-active { display: block; } .docs-tab-panel > :last-child { margin-bottom: 0; } /* ========================================================================== HTTP method badges + endpoint ========================================================================== */ .docs-endpoint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; margin: 0 0 24px; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius); font-family: 'Geist Mono', ui-monospace, 'SFMono-Regular', source-code-pro, Menlo, Monaco, Consolas, monospace; font-size: 13.5px; color: var(--text); word-break: break-all; } .docs-method { display: inline-flex; align-items: center; font-family: 'Bricolage Grotesque', 'Public Sans', system-ui, sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: #fff; padding: 3px 9px; border-radius: 5px; flex-shrink: 0; } .docs-method-get { background: #109d67; } .docs-method-post { background: var(--brand); } .docs-method-any { background: #6b7280; } /* ========================================================================== Cards (landing) ========================================================================== */ .docs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 0 0 32px; } .docs-card { display: block; padding: 22px 20px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 16px; text-decoration: none !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease; } .docs-card:hover { transform: translateY(-3px); background: var(--bg); border-color: var(--brand-light); box-shadow: var(--shadow-lg); } .docs-card-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--brand-bg) 0%, var(--brand-bg-deep) 100%); color: var(--brand); margin-bottom: 14px; box-shadow: inset 0 0 0 1px var(--brand-soft); transition: background .25s ease, color .25s ease, box-shadow .25s ease; } .docs-card:hover .docs-card-icon { background: linear-gradient(135deg, #7468e0 0%, #5f53d6 100%); color: #fff; box-shadow: 0 6px 14px -4px var(--brand-glow); } .docs-card h3 { font-size: 15.5px !important; font-weight: 650; color: var(--text); margin: 0 0 5px !important; } .docs-card p { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin: 0; } /* ========================================================================== Steps ========================================================================== */ .docs-steps { counter-reset: docstep; list-style: none; padding: 0; margin: 0 0 24px; } .docs-steps > li { counter-increment: docstep; position: relative; padding: 0 0 26px 46px; margin: 0; border-left: 1px solid var(--border); margin-left: 15px; } .docs-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; } .docs-steps > li::before { content: counter(docstep); position: absolute; left: -15px; top: -2px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, var(--brand-bg) 0%, var(--brand-bg-deep) 100%); color: var(--brand); font-size: 13px; font-weight: 700; border-radius: 50%; border: 3px solid var(--bg); box-shadow: inset 0 0 0 1px var(--brand-soft); } .docs-steps h4 { margin: 0 0 8px !important; } .docs-steps > li > :last-child { margin-bottom: 0; } /* ========================================================================== Prev / next ========================================================================== */ .docs-pagenav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--border); } .docs-pagenav-link { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none !important; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } .docs-pagenav-link:hover { border-color: var(--brand-light); box-shadow: var(--shadow); background: var(--bg-subtle); } .docs-pagenav-body { flex: 1; min-width: 0; } .docs-pagenav-arrow { flex-shrink: 0; color: var(--text-faint); transition: color .2s ease, transform .2s ease; } .docs-pagenav-link:not(.is-next) .docs-pagenav-arrow { transform: rotate(180deg); } .docs-pagenav-link:hover .docs-pagenav-arrow { color: var(--brand); } .docs-pagenav-link.is-next:hover .docs-pagenav-arrow { transform: translateX(3px); } .docs-pagenav-link:not(.is-next):hover .docs-pagenav-arrow { transform: rotate(180deg) translateX(3px); } .docs-pagenav-link.is-next { grid-column: 2; text-align: right; } .docs-pagenav-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; } .docs-pagenav-title { display: block; font-size: 15px; font-weight: 650; color: var(--brand); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================================== Right TOC ========================================================================== */ .docs-toc { position: sticky; top: var(--header-h); max-height: calc(100vh - var(--header-h)); overflow-y: auto; padding: 44px 0 64px; scrollbar-width: none; } .docs-toc::-webkit-scrollbar { display: none; } .docs-toc-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); margin: 0 0 12px; } .docs-toc ul { list-style: none; margin: 0; padding: 0; } .docs-toc a { display: block; padding: 5px 0 5px 12px; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); text-decoration: none; border-left: 2px solid var(--border); transition: color .15s ease, border-color .15s ease; } .docs-toc a:hover { color: var(--text); } .docs-toc a.is-active { color: var(--brand); border-left-color: var(--brand); font-weight: 600; } .docs-toc a.is-sub { padding-left: 24px; font-size: 13px; } .docs-toc-foot { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); } .docs-toc-foot a { border: 0; padding: 4px 0; font-size: 13.5px; font-weight: 500; color: var(--text-muted); display: flex; align-items: center; gap: 8px; transition: color .15s ease; } .docs-toc-foot a:hover { color: var(--brand); } .docs-toc-foot svg { flex-shrink: 0; } /* ========================================================================== Footer ========================================================================== */ .docs-footer { border-top: 1px solid var(--border); background: var(--bg-subtle); padding: 28px 24px; } .docs-footer-inner { max-width: 1600px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--text-muted); } .docs-footer a { color: var(--text-muted); text-decoration: none; } .docs-footer a:hover { color: var(--brand); } .docs-footer-links { display: flex; gap: 20px; flex-wrap: wrap; } /* ========================================================================== Mobile backdrop ========================================================================== */ .docs-backdrop { display: none; position: fixed; inset: 0; background: var(--backdrop); z-index: 50; } .docs-backdrop.is-open { display: block; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1279px) { .docs-shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); gap: 40px; } .docs-toc { display: none; } } @media (max-width: 1023px) { .docs-shell { grid-template-columns: minmax(0, 1fr); gap: 0; } .docs-menu-toggle { display: inline-flex; } .docs-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 86vw; height: 100%; background: var(--bg); border-right: 1px solid var(--border); padding: 20px 12px 40px; z-index: 55; transform: translateX(-100%); transition: transform .25s ease; } .docs-sidebar.is-open { transform: translateX(0); } .docs-main { padding: 28px 0 72px; max-width: none; } .docs-article h1 { font-size: 32px; } .docs-header-inner { padding: 0 16px; gap: 12px; } .docs-shell { padding: 0 16px; } .docs-btn-ghost { display: none; } } @media (max-width: 767px) { .docs-search { max-width: none; } .docs-search-kbd { display: none; } .docs-brand-tag, .docs-brand-divider { display: none; } .docs-pagenav { grid-template-columns: 1fr; } .docs-pagenav-link.is-next { grid-column: 1; } .docs-article h1 { font-size: 28px; } .docs-lead { font-size: 16px; } .docs-hero { padding: 26px 22px 28px; border-radius: 16px; } .docs-hero h1 { font-size: 28px; } .docs-hero-logo { height: 24px; margin-bottom: 18px; } .docs-hero-actions .docs-btn { flex: 1 1 auto; justify-content: center; } .docs-code-head::before { display: none; } } @media (max-width: 600px) { .docs-header-actions .docs-btn-primary { padding: 0 12px; } .docs-brand img { height: 22px; } .docs-theme-toggle { width: 34px; } } /* ========================================================================== Motion preferences ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .docs-card:hover { transform: none; } .docs-btn-primary:hover { transform: none; } .docs-pagenav-link:hover .docs-pagenav-arrow { transform: none; } .docs-pagenav-link:not(.is-next):hover .docs-pagenav-arrow { transform: rotate(180deg); } } /* ========================================================================== Focus visibility ========================================================================== */ .docs-body a:focus-visible, .docs-body button:focus-visible, .docs-body input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-sm); }