@charset "UTF-8"; /* =================================================================== Dropsolid Support — premade design realised on MkDocs Material Source: "Dropsolid support redesign" Claude Design project. Reproduces the design's markup (overrides/*.html) + tokens here. Dark-first with a light/dark toggle. Loaded LAST in extra_css. =================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Atkinson+Hyperlegible:wght@400;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { --ds-font-display: 'Archivo', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ds-font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ds-font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 9999px; --ease: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); --dur-fast: 140ms; --dur: 240ms; --grad-hero: linear-gradient(120deg, #1787FF 0%, #0B3A8C 44%, #041A72 68%, #7A2E12 100%); } /* ---- DARK tokens (default + slate) ---- */ :root, [data-md-color-scheme="slate"] { --brand:#1787FF; --brand-deep:#0F5FB8; --brand-bright:#4FA3FF; --accent-soft:rgba(23,135,255,.14); --accent-line:rgba(23,135,255,.30); --bg:#0E0F12; --surface:#16181C; --surface-2:#1C1F25; --surface-3:#22262E; --sidebar-bg:#111317; --header-bg:#16181C; --text:#F5F5F4; --text-muted:#A8A8A6; --text-dim:#8C8C8C; /* dim raised for AA (4.5:1) */ --border:#2A2E36; --border-strong:#3A3F49; --hover:#1F2229; --link:var(--brand-bright); --link-hover:#9FC8FF; --on-brand:#06121f; --shadow-card: 0 8px 30px rgba(0,0,0,.35); } /* ---- LIGHT tokens ---- */ [data-md-color-scheme="default"] { /* Platform behaviour: ORANGE accent in light (sky-blue is dark-only) */ --brand:#F55C1A; --brand-deep:#C13F08; --brand-bright:#C13F08; /* deepened for AA on light bg */ --accent-soft:rgba(245,92,26,.10); --accent-line:rgba(245,92,26,.30); --grad-hero: linear-gradient(120deg, #F55C1A 0%, #9A3A12 48%, #041A72 100%); --bg:#FAFAF9; --surface:#FFFFFF; --surface-2:#F4F6FA; --surface-3:#E9EDF3; --sidebar-bg:#FFFFFF; --header-bg:#FFFFFF; --text:#1A1A1A; --text-muted:#565B62; --text-dim:#6A6F76; /* dim raised for AA (4.5:1) */ --border:#E4E8EF; --border-strong:#CDD3DD; --hover:#F4F2EF; --link:var(--brand-deep); --link-hover:#8A2D06; --on-brand:#FFFFFF; --shadow-card: 0 8px 24px rgba(20,30,50,.08); } /* ---- Legacy + Material var maps ---- These MUST live on the scheme selectors (which sit on ), not :root (): var(--surface-2) etc. resolve at the declaring element, and the scheme attribute is on — declaring on :root bakes in the dark value for both schemes. */ :root { --color-white:#fff; } [data-md-color-scheme="slate"], [data-md-color-scheme="default"] { --color-white:#fff; --color-primary:var(--brand); --color-primary-dark:var(--brand-deep); --color-primary-light:var(--surface-2); --color-primary-light-2:var(--surface-2); --color-secondary:var(--brand); --color-secondary-light:var(--brand-bright); --color-secondary-light-2:var(--surface-2); --color-secondary-dark:var(--text-muted); --color-tertiary:var(--brand-bright); --md-default-bg-color:var(--bg); --md-default-fg-color:var(--text); --md-default-fg-color--light:var(--text-muted); --md-default-fg-color--lighter:var(--text-dim); --md-default-fg-color--lightest:var(--border); --md-code-bg-color:var(--surface-2); --md-code-fg-color:var(--text); --md-typeset-a-color:var(--link); --md-primary-fg-color:var(--header-bg); --md-primary-bg-color:var(--text); --md-primary-bg-color--light:var(--text-muted); --md-accent-fg-color:var(--brand); --md-footer-bg-color:var(--sidebar-bg); --md-footer-fg-color:var(--text); } /* =================================================================== Base =================================================================== */ html, body { background-color: var(--bg); } body { font-family: var(--ds-font-body); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .md-grid { max-width: 88rem; } .md-typeset { font-size: .8rem; color: var(--text); } h1,h2,h3,h4,h5,h6, .md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4, .md-typeset h5, .md-typeset h6 { font-family: var(--ds-font-display); color: var(--text); letter-spacing:-0.015em; } .md-typeset h1 { font-weight:500; letter-spacing:-0.02em; } .md-typeset h2 { font-weight:600; } .md-typeset p, .md-typeset li { color: var(--text-muted); } /* Content links. !important is needed to beat Material's accent:blue (--md-accent-fg-color = #526cfe, which fails AA — esp. on hover) and the legacy normalize.css --color-secondary rules. Base + hover both use brand tokens that stay readable in light AND dark. */ .md-typeset a, .md-typeset a:visited { color: var(--link) !important; text-underline-offset:2px; } .md-typeset a:hover, .md-typeset a:focus { color: var(--link-hover) !important; text-decoration:underline; } .md-typeset code, .md-typeset pre, code, kbd { font-family: var(--ds-font-mono); } /* =================================================================== Header (.ds-topbar) + tabs =================================================================== */ .md-header.ds-topbar { position: sticky; top:0; z-index:40; background: var(--header-bg); color: var(--text); border-bottom: 1px solid var(--border); box-shadow:none; display:block; height:auto; } /* match the content grid (.md-grid is 88rem) + 20px inset so the logo lines up with the sidebar nav text, which sits 20px inside the grid edge. */ .ds-topbar__inner { position:relative; display:flex; align-items:center; gap:20px; height:70px; padding:0 20px; max-width:88rem; margin:0 auto; } .ds-burger { display:none; color:var(--text); } .ds-brand { display:flex; align-items:center; gap:13px; text-decoration:none; flex:1 1 0; min-width:0; } .ds-brand .branding__image--header { height:43px; width:auto; display:block; flex-shrink:0; } /* inlined header logo (animatable); currentColor drives the fill per scheme */ .ds-brand .ds-logo-svg { height:43px; width:auto; display:block; overflow:visible; flex-shrink:0; } [data-md-color-scheme="slate"] .ds-logo-svg { color:#fff; } [data-md-color-scheme="default"] .ds-logo-svg { color:#1A1A1A; } .ds-brand__divider { width:1px; height:38px; background:var(--border-strong); } .ds-brand__label { font-family:var(--ds-font-display); font-weight:600; font-size:18px; color:var(--text-muted); letter-spacing:.01em; white-space:nowrap; } [data-md-color-scheme="slate"] .branding__image--header--light { display:none; } [data-md-color-scheme="default"] .branding__image--header--dark { display:none; } /* ---- Logo intro animation (plays once per session; gated in header.html) ---- The emblem's arcs spring out from the centre as a staggered wave, then the wordmark surfaces. Only runs when .play-intro is present, so the static logo is the default (and the no-JS / reduced-motion fallback). */ .ds-logo-svg .ring { transform-box:view-box; transform-origin:31.6px 35.8px; } .ds-logo-svg .word { transform-box:fill-box; transform-origin:left center; } .ds-logo-svg.play-intro .ring, .ds-logo-svg.play-intro .word { opacity:0; } .ds-logo-svg.play-intro .ring { animation:dsLogoFade .55s ease both, dsLogoSpring 1s ease-out both; } .ds-logo-svg.play-intro .ring.k0 { animation-delay:.05s; } .ds-logo-svg.play-intro .ring.k1 { animation-delay:.25s; } .ds-logo-svg.play-intro .ring.k2 { animation-delay:.45s; } .ds-logo-svg.play-intro .ring.k3 { animation-delay:.65s; } .ds-logo-svg.play-intro .word { animation:dsLogoWord .7s cubic-bezier(.2,.7,.2,1) .95s both; } @keyframes dsLogoFade { from{opacity:0} to{opacity:1} } @keyframes dsLogoSpring { /* one smooth bounce: overshoot, dip, settle */ 0% {transform:scale(.35)} 48% {transform:scale(1.2)} 70% {transform:scale(.93)} 86% {transform:scale(1.03)} 100%{transform:scale(1)} } @keyframes dsLogoWord { from{opacity:0; transform:translateX(-8px)} to{opacity:1; transform:translateX(0)} } @media (prefers-reduced-motion:reduce){ .ds-logo-svg.play-intro .ring, .ds-logo-svg.play-intro .word { opacity:1 !important; transform:none !important; animation:none !important; } } /* Search centered via equal flex sides; grows on focus while staying centred. NOTE: do NOT use transform/absolute to centre it — a transformed ancestor becomes the containing block for Material's position:fixed search overlay, trapping the overlay in the search column instead of the viewport. */ .ds-search-slot { flex:0 1 480px; max-width:calc(100% - 380px); display:flex; justify-content:center; transition:flex-basis var(--dur) var(--ease-out); } .ds-search-slot:focus-within { flex-basis:640px; } .ds-topbar__actions { display:flex; align-items:center; gap:6px; flex:1 1 0; justify-content:flex-end; } .ds-themetoggle { color:var(--text-muted); border-radius:var(--radius-pill); } .ds-themetoggle:hover { background:var(--hover); color:var(--text); } /* ---- Header search: centered pill, Material-native behaviour, themed ---- IMPORTANT: do NOT override Material's position/float on __inner/__output, or the active (expanded) state breaks. Colour + idle width only. */ .ds-search-slot .md-search { width:100%; } .ds-search-slot .md-search__inner { float:none; width:100% !important; } .ds-search-slot .md-search__output { width:100% !important; left:0 !important; } .md-search__form { height:42px; border-radius:var(--radius-md); box-shadow:none; overflow:hidden; background:var(--surface-2); border:1px solid var(--border-strong); transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .md-search__form:hover { background:var(--surface-3); } /* Active: top corners rounded, no bottom border → merges into the dropdown */ .md-search:focus-within .md-search__form { background:var(--surface); border-color:var(--brand); border-radius:var(--radius-md) var(--radius-md) 0 0; border-bottom-color:transparent; } .md-search__input { color:var(--text); font-family:var(--ds-font-body); background:transparent; } .md-search__input:hover { background:transparent; } .md-search__input::placeholder, .md-search__input::-webkit-input-placeholder { color:var(--text-muted); opacity:1; } .md-search__icon { color:var(--text-muted); } .md-search__icon:hover { color:var(--text); } /* Material pins both icons at top:.3rem/.6rem (assumes its default form height); our form is 42px, so stretch each to the full height and flex-centre their contents — robust regardless of form height or icon count. */ .md-search__icon[for=__search], .md-search__options { top:0; bottom:0; height:auto; transform:none; display:flex; align-items:center; } /* Result-row icon: a Feather "file-text" outline (stroke 1.8) so it matches the family of the 6 Feather icons on the homepage cards. */ :root { --md-search-result-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOCI+PHBhdGggZD0iTTE0IDJINmEyIDIgMCAwIDAtMiAydjE2YTIgMiAwIDAgMCAyIDJoMTJhMiAyIDAgMCAwIDItMlY4eiIvPjxwb2x5bGluZSBwb2ludHM9IjE0IDIgMTQgOCAyMCA4Ii8+PGxpbmUgeDE9IjE2IiB5MT0iMTMiIHgyPSI4IiB5Mj0iMTMiLz48bGluZSB4MT0iMTYiIHkxPSIxNyIgeDI9IjgiIHkyPSIxNyIvPjxwb2x5bGluZSBwb2ludHM9IjEwIDkgOSA5IDggOSIvPjwvc3ZnPg=="); } /* Results panel + rows — colour only; Material owns the positioning */ .md-search__output { border-radius:0 0 var(--radius-md) var(--radius-md); box-shadow:0 24px 60px rgba(0,0,0,.4); } /* Mobile full-screen search: md-search__inner is position:fixed; z-index:2 but sits inside the header's stacking context (z-index:40). Chrome composites it within the header's group at z-index:2, placing it behind the header's own background and logo. Raise it above z-index:40 and give it an opaque background so the logo cannot bleed through. Also correct the output top offset to match our 42px form (Material defaults to 2.4rem = 38.4px). */ @media screen and (max-width: 59.984375em) { [data-md-toggle=search]:checked ~ .md-header .md-search__inner { z-index: 50; background: var(--surface); pointer-events: auto; } [data-md-toggle=search]:checked ~ .md-header .md-search__output { top: 42px; } } .md-search__scrollwrap { background:var(--surface); } .md-search-result__meta { background:var(--surface-2); color:var(--text-dim); font-family:var(--ds-font-display); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding-top:.5rem; padding-bottom:.3rem; /* breathing room above "N matching documents" */ } .md-search-result__link { color:var(--text); } .md-search-result__link:is(:hover,[data-md-state=active]) { background:var(--hover); } .md-search-result__title { color:var(--text); font-family:var(--ds-font-display); font-weight:600; } .md-search-result__teaser { color:var(--text-muted); } .md-search-result mark { color:var(--brand-bright); background:transparent; } /* Tabs row */ .ds-tabs { border-top:1px solid var(--border); } .ds-tabs__inner { display:flex; gap:2px; max-width:88rem; margin:0 auto; padding:0 20px; overflow-x:auto; } /* pull the first tab's text out to the 20px inset so it aligns with the logo and sidebar (the tab's own 14px padding would otherwise push it inward). */ .ds-tabs__inner .ds-tab:first-child { margin-left:-14px; } /* :visited included so visited nav items don't turn blue via the global a:visited rule — header tabs shouldn't carry a visited state. */ .ds-tab, .ds-tab:visited { padding:13px 14px; font-family:var(--ds-font-display); font-weight:500; font-size:14px; color:var(--text-muted); text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent; transition:color var(--dur-fast) var(--ease); } .ds-tab:hover { color:var(--text); } .ds-tab.is-active, .ds-tab.is-active:visited { color:var(--text); border-bottom-color:var(--brand); } /* =================================================================== Home — hero =================================================================== */ .ds-home { display:block; } .ds-hero { position:relative; overflow:hidden; border-bottom:1px solid var(--border); background:var(--bg); } .ds-hero__glow1 { position:absolute; inset:0; background:radial-gradient(120% 90% at 50% -20%, var(--accent-soft) 0%, rgba(23,135,255,.05) 38%, transparent 62%); pointer-events:none; } .ds-hero__glow2 { position:absolute; left:50%; top:-180px; transform:translateX(-50%); width:760px; height:360px; background:var(--grad-hero); filter:blur(120px); opacity:.30; pointer-events:none; } .ds-hero__inner { position:relative; max-width:900px; margin:0 auto; padding:84px 24px 72px; text-align:center; } .ds-hero__eyebrow { font-family:var(--ds-font-display); font-weight:700; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--brand-bright); margin-bottom:18px; } .ds-hero__title { font-family:var(--ds-font-display); font-weight:500; font-size:52px; line-height:1.08; letter-spacing:-.02em; color:var(--text); margin:0 0 16px; } .ds-hero__sub { font-family:var(--ds-font-body); font-size:18px; line-height:1.6; color:var(--text-muted); max-width:560px; margin:0 auto 32px; } .ds-herosearch { display:flex; align-items:center; gap:14px; width:100%; max-width:620px; height:60px; margin:0 auto; padding:0 10px 0 22px; background:var(--surface); border:1px solid var(--border-strong); border-radius:16px; cursor:pointer; box-shadow:var(--shadow-card); transition:border-color var(--dur-fast) var(--ease); } .ds-herosearch:hover { border-color:var(--brand); } .ds-herosearch__ph { flex:1; text-align:left; font-family:var(--ds-font-body); font-size:17px; color:var(--text-muted); } .ds-kbd { display:inline-flex; align-items:center; justify-content:center; font-family:var(--ds-font-mono); font-size:14px; color:var(--text-muted); background:var(--surface-2); border:1px solid var(--border); border-radius:7px; padding:6px 12px; } .ds-chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:20px; } .ds-chip { font-family:var(--ds-font-body); font-size:13px; color:var(--text-muted); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-pill); padding:6px 14px; cursor:pointer; } .ds-chip:hover { color:var(--text); border-color:var(--border-strong); } /* =================================================================== Home — browse cards =================================================================== */ .ds-browse { max-width:1180px; margin:0 auto; padding:64px 24px 24px; } .ds-browse__head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:28px; } .ds-browse__title { font-family:var(--ds-font-display); font-weight:600; font-size:24px; letter-spacing:-.01em; color:var(--text); margin:0; } .ds-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .ds-card { display:flex; flex-direction:column; gap:14px; padding:26px; background:var(--surface); border:1px solid var(--border); border-radius:12px; cursor:pointer; text-decoration:none; transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease); } .ds-card:hover { transform:translateY(-3px); border-color:var(--brand); } .ds-card__top { display:flex; align-items:center; justify-content:space-between; } .ds-card__icon { width:44px; height:44px; border-radius:10px; background:var(--accent-soft); display:inline-flex; align-items:center; justify-content:center; color:var(--brand-bright); } .ds-card__num { font-family:var(--ds-font-mono); font-size:13px; color:var(--text-dim); } .ds-card__title { font-family:var(--ds-font-display); font-weight:600; font-size:20px; color:var(--text); } .ds-card__desc { font-family:var(--ds-font-body); font-size:14.5px; line-height:1.6; color:var(--text-muted); margin:0; flex:1; } .ds-card__more { display:inline-flex; align-items:center; gap:8px; font-family:var(--ds-font-display); font-weight:600; font-size:14px; color:var(--brand-bright); } .ds-card__arrow { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--brand); color:var(--on-brand); } /* =================================================================== Home — CTA =================================================================== */ .ds-cta-wrap { max-width:1180px; margin:0 auto; padding:40px 24px 80px; } .ds-cta { position:relative; overflow:hidden; border-radius:16px; border:1px solid var(--border); background:var(--surface); } .ds-cta__bg { position:absolute; inset:0; background:linear-gradient(100deg, transparent 40%, rgba(23,135,255,.10) 70%, rgba(245,92,26,.18) 100%); pointer-events:none; } .ds-cta__row { position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:34px 36px; flex-wrap:wrap; } .ds-cta__text { max-width:560px; } .ds-cta__eyebrow { font-family:var(--ds-font-display); font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-bright); margin-bottom:10px; } .ds-cta__title { font-family:var(--ds-font-display); font-weight:600; font-size:24px; color:var(--text); margin:0 0 8px; } .ds-cta__sub { font-family:var(--ds-font-body); font-size:15px; line-height:1.6; color:var(--text-muted); margin:0; } .ds-cta__actions { display:flex; gap:12px; flex-wrap:wrap; } .ds-btn { display:inline-flex; align-items:center; gap:10px; height:46px; padding:0 22px; border-radius:var(--radius-pill); font-family:var(--ds-font-display); font-weight:600; font-size:14px; line-height:1; text-decoration:none; cursor:pointer; transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .ds-btn svg { display:block; flex:0 0 auto; } .ds-btn--solid { background:var(--text); color:var(--bg); border:1px solid var(--text); } .ds-btn--solid:hover { background:var(--brand); border-color:var(--brand); color:var(--on-brand); } .ds-btn--ghost { background:transparent; border:1px solid var(--border-strong); color:var(--text); } .ds-btn--ghost:hover { border-color:var(--brand); color:var(--brand-bright); } /* =================================================================== Docs layout — content chrome =================================================================== */ .ds-crumbs { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-family:var(--ds-font-body); font-size:13px; color:var(--text-dim); margin-bottom:22px; } .ds-crumbs__item { display:inline-flex; align-items:center; gap:8px; } .ds-crumbs a { color:var(--text-dim); text-decoration:none; } .ds-crumbs a:hover { color:var(--text); } .ds-crumbs__sep { color:var(--text-dim); } .ds-crumbs__cur { color:var(--text-muted); } /* Collapsed deep paths (set by extra.js): hide the middle crumbs and reveal a “…” toggle that expands them inline. */ .ds-crumbs__item--hidden { display:none; } .ds-crumbs__more { display:inline-flex; align-items:center; gap:8px; } .ds-crumbs__more-btn { font:inherit; color:var(--text-dim); cursor:pointer; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-pill); padding:1px 9px; line-height:1.5; letter-spacing:.04em; } .ds-crumbs__more-btn:hover { color:var(--text); border-color:var(--border-strong); background:var(--surface-3); } .ds-prevnext { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:48px; padding-top:28px; border-top:1px solid var(--border); } .ds-prevnext__item { display:flex; flex-direction:column; gap:4px; padding:16px 20px; border:1px solid var(--border); border-radius:10px; text-decoration:none; transition:border-color var(--dur) var(--ease); } .ds-prevnext__item:hover { border-color:var(--brand); background:var(--surface); } /* these are card buttons, not inline links — cancel the global a:hover underline (selector out-specifies .md-typeset a:hover). */ .md-typeset a.ds-prevnext__item:hover, .md-typeset a.ds-prevnext__item:focus { text-decoration:none; } .ds-prevnext__item:hover .ds-prevnext__t { color:var(--brand-bright); } .ds-prevnext__item--next { align-items:flex-end; text-align:right; } .ds-prevnext__lbl { font-family:var(--ds-font-body); font-size:12px; color:var(--text-dim); } .ds-prevnext__t { font-family:var(--ds-font-display); font-weight:600; font-size:15px; color:var(--text); } /* =================================================================== Sidebars — kill old styles.css light backgrounds, match design =================================================================== */ .md-nav { font-size:.72rem; } .md-nav__title { font-family:var(--ds-font-display); color:var(--text); background:transparent; box-shadow:none; } /* hide the redundant site-name label at the top of the primary nav (the "Dropsolid AI - Documentation" text) in both the desktop sidebar and the mobile drawer — only the direct child title, not nested section headers. */ .md-nav--primary > .md-nav__title { display:none; } .md-sidebar__inner { background:transparent; } @media screen and (min-width: 60em) { .md-sidebar--secondary .md-sidebar__inner { background:transparent; border-left:1px solid var(--border); border-radius:0; padding:1.4rem 0 2rem 1.25rem; } .md-sidebar--secondary .md-nav__title { color:var(--text-dim); text-transform:uppercase; letter-spacing:.12em; font-size:.6rem; } .md-sidebar--secondary .md-nav__link, .md-sidebar--secondary .md-nav__link:visited { color:var(--text-muted); } .md-sidebar--secondary .md-nav__link:hover, .md-sidebar--secondary .md-nav__link--active, .md-sidebar--secondary .md-nav__link--active:visited { color:var(--brand-bright); } } @media screen and (min-width: 76.1875em) { /* wider sidebar — the nav is deeply nested */ .md-sidebar--primary { width: 16.5rem; } .md-nav--primary { background:transparent; border-radius:0; padding:1.2rem .8rem 2rem .8rem; } /* kill the inner wrapper's huge right padding + legacy list/link indents so items use the full sidebar width */ .md-sidebar--primary .md-sidebar__inner { padding:0 .35rem 0 0 !important; } .md-nav--primary .md-nav__list { border-bottom:0; padding-left:0 !important; } .md-nav--primary .md-nav__item { border-top:0; padding:0 !important; margin:1px 0; } .md-nav--primary .md-nav__item:first-child a::before { display:none; } .md-nav--primary .md-nav__link, .md-nav--primary .md-nav__link:visited { color:var(--text-muted); border-radius:8px; padding:.42rem .7rem !important; margin:0 !important; white-space:normal; overflow-wrap:anywhere; line-height:1.35; } .md-nav--primary .md-nav__link:hover { color:var(--text); background:var(--hover); } /* Ancestors of the current page (the path) stay PLAIN — no pill, no bar. !important to beat legacy styles.css nested-active rules. */ .md-nav--primary .md-nav__item--active > .md-nav__link:not(.md-nav__link--active) { background:transparent !important; box-shadow:none !important; color:var(--text) !important; font-weight:500 !important; } /* ONLY the current page (leaf) gets the accent pill + left bar */ .md-nav--primary .md-nav__link--active, .md-nav--primary .md-nav__link--active:visited, .md-nav--primary .md-nav__link--active:hover { color:var(--text) !important; font-weight:700 !important; background:var(--accent-soft) !important; box-shadow:inset 3px 0 0 var(--brand) !important; border-radius:0 8px 8px 0 !important; padding:.42rem .7rem !important; } /* nested groups: indent only, NO guide line (matches the Platform) */ .md-nav--primary .md-nav__item--nested .md-nav__list { border-left:0 !important; margin:1px 0 6px .85rem; padding-left:0 !important; } .md-nav--primary label.md-nav__link { font-family:var(--ds-font-display); font-weight:600; color:var(--text); } } /* Only the deepest (current-page) item gets the accent pill + bar. Active ancestors — including the top section — stay plain (handled by the .md-nav__item--active > .md-nav__link:not(--active) rule above). A top-level item that is itself the current page still gets the pill via .md-nav__link--active. */ /* =================================================================== Section overview pages (.section-tree / .article-list — Confluence) =================================================================== */ .page__subtitle--overview { color:var(--text-dim); text-transform:uppercase; letter-spacing:.12em; font-size:.7rem; font-family:var(--ds-font-display); margin-bottom:.5rem; } .section-tree-title, .md-typeset .section-tree-title { color:var(--text); font-family:var(--ds-font-display); font-weight:600; } .section-tree-title a, .section-tree-title a:visited, .section-tree-title a:hover { color:var(--text); } .article-list-item a { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:none; color:var(--text); font-weight:600; transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease); } .article-list-item a:hover, .article-list-item a:active { background:var(--surface); color:var(--text); border-color:var(--brand); transform:translateY(-2px); } .article-list-item .icon--arrow { display:none; } .article-list-item a::after { content:"→"; position:absolute; right:1.1rem; top:50%; transform:translateY(-50%); color:var(--brand-bright); font-weight:400; } .section-list-item, .section-list-item:first-child { border-color:var(--border); } .section-list-item a { color:var(--text-muted); } .section-list-item a:hover { color:var(--brand-bright); } /* =================================================================== Content — code, tables, admonitions =================================================================== */ .md-typeset code { background:var(--surface-2); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-sm); } .md-typeset pre > code { display:block; border-radius:var(--radius-md); } .highlight, .md-typeset pre { background:var(--surface-2); border-radius:var(--radius-md); } .md-typeset table:not([class]) { border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; } .md-typeset table:not([class]) th { background:var(--surface-2); color:var(--text-muted); font-family:var(--ds-font-display); font-weight:700; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; } .md-typeset table:not([class]) td { color:var(--text-muted); } /* grid lines in the subtle outer-border colour (not the harsh light gray) */ .md-typeset table:not([class]) th, .md-typeset table:not([class]) td, .md-typeset__table thead th, .md-typeset__table tbody td, .md-typeset__table tbody th { border-left:0; border-top:0; border-right:1px solid var(--border); border-bottom:1px solid var(--border); } .md-typeset table:not([class]) tr > *:last-child, .md-typeset__table tr > *:last-child { border-right:0; } /* Neutral body surface; the per-type title tint + coloured left border (from Material's per-type rules) carry the meaning, so the body no longer clashes with the orange brand accent. --brand left border is only a fallback for untyped notes — Material's per-type border-color out-specifies it. */ .md-typeset .admonition, .md-typeset details { background:var(--surface); border:0; border-left:3px solid var(--brand); border-radius:0 var(--radius-md) var(--radius-md) 0; color:var(--text); } .md-typeset .admonition-title { background:transparent; color:var(--text); } .md-typeset .admonition-title::before { background-color:var(--brand-bright); } /* Release-note label lists (built by extra.js) — theme the hardcoded #eaeaea borders */ .md-typeset .label-list, .label-list { border:1px solid var(--border) !important; border-radius:var(--radius-md); overflow:hidden; } .md-typeset .label-list__item, .label-list__item { border:0 !important; border-bottom:1px solid var(--border) !important; } .md-typeset .label-list__item:last-child, .label-list__item:last-child { border-bottom:0 !important; } .md-typeset .label-list__item:nth-child(odd), .label-list__item:nth-child(odd) { background-color:var(--surface-2); } /* =================================================================== Footer =================================================================== */ .md-footer { display:none; } /* hide default Material footer (nav + meta) */ .ds-footer { border-top:1px solid var(--border); background:var(--sidebar-bg); } .ds-footer__inner { max-width:1680px; margin:0 auto; padding:32px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .ds-footer__brand { display:flex; align-items:center; gap:14px; } .ds-footer__logo { height:20px; width:auto; opacity:.55; display:block; } /* line-height:1 so the copy's glyphs centre on the logo (the default tall line box left the text sitting low next to it). */ .ds-footer__copy { font-family:var(--ds-font-body); font-size:13px; line-height:1; color:var(--text-dim); } .ds-footer__links { display:flex; align-items:center; gap:22px; } .ds-footer__link { display:inline-flex; align-items:center; gap:6px; font-family:var(--ds-font-body); font-size:13px; color:var(--text-muted); text-decoration:none; } .ds-footer__link:hover { color:var(--text); } /* =================================================================== Cookie consent =================================================================== */ .md-consent__inner { background:var(--surface); color:var(--text); border:1px solid var(--border-strong); border-radius:var(--radius-lg); } .md-consent__inner .md-typeset, .md-consent__inner .md-typeset h1 { color:var(--text); } .md-consent .md-button { border-radius:var(--radius-pill); border-color:var(--border-strong); color:var(--text); font-family:var(--ds-font-display); } .md-consent .md-button--primary, .md-consent .md-button:hover, .md-consent .md-button:focus { background:var(--brand); border-color:var(--brand); color:var(--on-brand); } /* =================================================================== Responsive =================================================================== */ /* When Material switches the nav into the hamburger drawer, show the burger and hide the horizontal tabs so they don't overlap the drawer. */ @media (max-width: 76.1875em) { .ds-burger { display:inline-flex; align-items:center; } .ds-tabs { display:none; } .ds-brand__divider, .ds-brand__label { display:none; } /* Pin the drawer below the 64px topbar so it never slides behind it. */ .md-sidebar--primary { top:70px; height:calc(100% - 70px); } .md-sidebar--primary .md-sidebar__scrollwrap { padding-top: 0; } } @media (max-width: 900px) { .ds-cards { grid-template-columns:1fr; } .ds-hero__title { font-size:38px; } /* Collapse the slot to 0 width without display:none or position:absolute. display:none suppresses position:fixed children; position:absolute + overflow:hidden can clip them in Chrome/Safari, pushing md-search__inner behind the header. A non-positioned flex item with overflow:hidden is safe: it hides the search pill visually while leaving the fixed overlay intact. */ .ds-search-slot { flex:0 0 0; max-width:0; overflow:hidden; pointer-events:none; } .ds-prevnext { grid-template-columns:1fr; } } ::selection { background: var(--accent-line); color: var(--text); } /* =================================================================== Accessibility =================================================================== */ /* Visible keyboard focus everywhere (WCAG 2.4.7). Only triggers for keyboard users (:focus-visible), not mouse clicks. Guarantees a branded ring even on the legacy forms.css controls that set outline:none / rely only on a faint box-shadow. The explicit .form-field rules out-specify those resets. */ :focus-visible { outline:2px solid var(--brand); outline-offset:2px; } .form-field input:focus-visible, .form-field input[type="text"]:focus-visible, .form-field textarea:focus-visible, .form-field .nesty-input:focus-visible, .form-field .hc-multiselect-toggle:focus-visible { outline:2px solid var(--brand); outline-offset:2px; box-shadow:none; } /* Respect reduced-motion: neutralise transitions/animations (e.g. card hover transforms, smooth scroll) for users who ask for less motion. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }