/* AITK Info Portal — refreshed visual system. * * Tokens flow through `[data-theme]` attributes on so the JS theme * toggle can override the OS preference without re-running CSS. The default * `auto` value applies the system-preference branch below. * * Design direction (Refero-informed): * Light — Stellate / Linear / Stripe: warm-neutral bg, crisp cards, indigo * accent, subtle elevation, fine borders. * Dark — Linear / Wealthsimple / Resend: deep slate (#0a0d12) with soft * elevated surfaces, periwinkle accent, restrained contrast for * long reading sessions. * * Fonts stay on the system stack — no external requests, so the CSP * `font-src 'self'` policy is preserved. */ :root, :root[data-theme="auto"] { color-scheme: light dark; --color-bg: #f7f8fb; --color-bg-elev: #ffffff; --color-bg-soft: #eef1f6; --color-bg-tint: #f1f4fa; --color-fg: #0b1220; --color-fg-muted: #475569; --color-fg-subtle: #525d70; --color-accent: #3a5bf2; --color-accent-strong: #2945e0; --color-accent-soft: #e3e9ff; --color-link: var(--color-accent); --color-link-visited: #6b3aa8; --color-border: #e4e8ef; --color-border-strong: #cdd4df; --color-code-bg: #f1f4f9; --color-code-fg: #0f172a; --color-cap: #6b3aa8; --color-success: #1d6f42; --color-warning: #b46300; --color-danger: #b3261e; --hero-gradient: radial-gradient(120% 100% at 0% 0%, rgba(58, 91, 242, 0.10) 0%, transparent 55%), radial-gradient(120% 100% at 100% 0%, rgba(146, 90, 215, 0.08) 0%, transparent 55%), linear-gradient(180deg, var(--color-bg-elev) 0%, var(--color-bg) 100%); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.16); --shadow-lift: 0 1px 2px rgba(15, 23, 42, 0.06), 0 16px 40px -20px rgba(15, 23, 42, 0.28); --shadow-modal: 0 32px 80px -28px rgba(15, 23, 42, 0.45); --radius-xs: 3px; --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", "Menlo", "Consolas", monospace; --content-max: 78ch; --shell-max: 1440px; --rail-left-w: 17rem; --rail-right-w: 17rem; --rail-gap: 2.25rem; --header-h: 3.75rem; } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --color-bg: #0a0d12; --color-bg-elev: #11151c; --color-bg-soft: #161b24; --color-bg-tint: #131822; --color-fg: #e6edf6; --color-fg-muted: #a3adba; --color-fg-subtle: #7c8597; --color-accent: #7aa2ff; --color-accent-strong: #a3c0ff; --color-accent-soft: rgba(122, 162, 255, 0.14); --color-link: var(--color-accent); --color-link-visited: #c39bff; --color-border: #1c232f; --color-border-strong: #2e3645; --color-code-bg: #0c1118; --color-code-fg: #d6deeb; --color-cap: #c39bff; --color-success: #6ed29c; --color-warning: #f0b96b; --color-danger: #ff8a85; --hero-gradient: radial-gradient(140% 100% at 0% 0%, rgba(122, 162, 255, 0.16) 0%, transparent 55%), radial-gradient(120% 100% at 100% 0%, rgba(195, 155, 255, 0.10) 0%, transparent 55%), linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-bg) 100%); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px -20px rgba(0, 0, 0, 0.6); --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 50px -24px rgba(0, 0, 0, 0.7); --shadow-modal: 0 36px 90px -32px rgba(0, 0, 0, 0.75); } } :root[data-theme="dark"] { color-scheme: dark; --color-bg: #0a0d12; --color-bg-elev: #11151c; --color-bg-soft: #161b24; --color-bg-tint: #131822; --color-fg: #e6edf6; --color-fg-muted: #a3adba; --color-fg-subtle: #7c8597; --color-accent: #7aa2ff; --color-accent-strong: #a3c0ff; --color-accent-soft: rgba(122, 162, 255, 0.14); --color-link: var(--color-accent); --color-link-visited: #c39bff; --color-border: #1c232f; --color-border-strong: #2e3645; --color-code-bg: #0c1118; --color-code-fg: #d6deeb; --color-cap: #c39bff; --color-success: #6ed29c; --color-warning: #f0b96b; --color-danger: #ff8a85; --hero-gradient: radial-gradient(140% 100% at 0% 0%, rgba(122, 162, 255, 0.16) 0%, transparent 55%), radial-gradient(120% 100% at 100% 0%, rgba(195, 155, 255, 0.10) 0%, transparent 55%), linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-bg) 100%); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px -20px rgba(0, 0, 0, 0.6); --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 50px -24px rgba(0, 0, 0, 0.7); --shadow-modal: 0 36px 90px -32px rgba(0, 0, 0, 0.75); } :root[data-theme="light"] { color-scheme: light; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-padding-top: calc(var(--header-h) + 1rem); } body { font-family: var(--font-sans); color: var(--color-fg); background: var(--color-bg); line-height: 1.62; font-size: 15.5px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01", "ss03"; } img { max-width: 100%; height: auto; } a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--color-link) 35%, transparent); transition: color 80ms ease, text-decoration-color 80ms ease; } a:hover, a:focus { text-decoration-thickness: 2px; text-decoration-color: var(--color-link); } a:visited { color: var(--color-link-visited); } a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 3px; } p { margin: 0 0 1rem; } h1, h2, h3, h4, h5, h6 { margin: 2rem 0 0.75rem; line-height: 1.22; font-weight: 650; letter-spacing: -0.012em; color: var(--color-fg); } h1 { font-size: 2.15rem; letter-spacing: -0.022em; font-weight: 700; } h2 { font-size: 1.5rem; margin-top: 2.5rem; padding-top: 0.5rem; letter-spacing: -0.015em; } h3 { font-size: 1.18rem; } h4 { font-size: 1.0rem; color: var(--color-fg-muted); text-transform: none; } .heading-anchor { color: var(--color-fg-subtle); margin-left: 0.45rem; text-decoration: none; font-weight: 400; opacity: 0; transition: opacity 120ms ease; } h1:hover .heading-anchor, h2:hover .heading-anchor, h3:hover .heading-anchor, h4:hover .heading-anchor, .heading-anchor:focus { opacity: 1; } code, pre { font-family: var(--font-mono); font-size: 0.9em; } :not(pre) > code { background: var(--color-code-bg); color: var(--color-code-fg); padding: 0.12em 0.4em; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent); } pre { background: var(--color-code-bg); color: var(--color-code-fg); padding: 1rem 1.1rem; overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--color-border); position: relative; font-size: 0.86rem; line-height: 1.55; box-shadow: var(--shadow-sm); } pre code { background: transparent; color: inherit; padding: 0; border: 0; } table { border-collapse: collapse; width: 100%; margin: 1.25rem 0; font-size: 0.92rem; } th, td { border-bottom: 1px solid var(--color-border); padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; } thead th { border-bottom: 1px solid var(--color-border-strong); } th { background: var(--color-bg-soft); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-fg-muted); } tbody tr:hover td { background: color-mix(in srgb, var(--color-accent) 4%, transparent); } blockquote { border-left: 3px solid var(--color-accent); margin: 1.25rem 0; padding: 0.6rem 1rem; background: var(--color-bg-soft); color: var(--color-fg-muted); border-radius: 0 var(--radius-md) var(--radius-md) 0; } hr { border: 0; border-top: 1px solid var(--color-border); margin: 2rem 0; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-accent); color: white; padding: 0.6rem 0.9rem; border-radius: 0 0 var(--radius-md) 0; z-index: 100; } .skip-link:focus { left: 0; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- Site header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--color-bg) 78%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--color-border); } .site-header__row { max-width: var(--shell-max); margin: 0 auto; display: flex; align-items: center; gap: 1rem; padding: 0.65rem 1.5rem; height: var(--header-h); } .site-title { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 700; color: var(--color-fg); text-decoration: none; font-size: 0.95rem; } .site-title:hover { text-decoration: none; color: var(--color-fg); } .site-title__mark { background: linear-gradient(135deg, var(--color-accent) 0%, color-mix(in srgb, var(--color-accent) 60%, #b89bff) 100%); color: white; padding: 0.18rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.78rem; letter-spacing: 0.06em; font-weight: 700; box-shadow: 0 1px 2px rgba(58, 91, 242, 0.3); } .site-title__label { font-size: 0.92rem; color: var(--color-fg-muted); font-weight: 500; } .primary-nav { margin-left: 0.75rem; } .primary-nav__list { display: flex; flex-wrap: wrap; gap: 0.15rem 0.25rem; list-style: none; margin: 0; padding: 0; } .primary-nav__link { display: inline-block; color: var(--color-fg-muted); text-decoration: none; padding: 0.42rem 0.7rem; border-radius: var(--radius-md); font-size: 0.9rem; font-weight: 500; transition: background-color 80ms ease, color 80ms ease; } .primary-nav__link:hover, .primary-nav__link:focus { color: var(--color-fg); background: var(--color-bg-soft); text-decoration: none; } .primary-nav__item.is-current .primary-nav__link { color: var(--color-accent-strong); background: var(--color-accent-soft); font-weight: 600; } .site-header__tools { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; } .site-header__search-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-fg-muted); text-decoration: none; padding: 0.4rem 0.7rem 0.4rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-elev); font-size: 0.85rem; min-width: 14rem; box-shadow: var(--shadow-sm); transition: border-color 80ms ease, color 80ms ease; } .site-header__search-link:hover { color: var(--color-fg); border-color: var(--color-border-strong); text-decoration: none; } .site-header__search-icon { opacity: 0.7; } .site-header__search-text { flex: 1; } .theme-toggle { background: var(--color-bg-elev); border: 1px solid var(--color-border); color: var(--color-fg-muted); padding: 0.4rem 0.55rem; border-radius: var(--radius-md); cursor: pointer; font-size: 0.95rem; line-height: 1; box-shadow: var(--shadow-sm); transition: border-color 80ms ease, color 80ms ease, transform 80ms ease; } .theme-toggle:hover { color: var(--color-fg); border-color: var(--color-border-strong); } .theme-toggle:active { transform: scale(0.96); } .nav-toggle { display: none; background: var(--color-bg-elev); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.5rem; cursor: pointer; } .nav-toggle__bar { display: block; width: 16px; height: 2px; background: var(--color-fg-muted); margin: 3px 0; border-radius: 2px; } /* ---------- Page shell ---------- */ .page-shell { max-width: var(--shell-max); margin: 0 auto; display: grid; grid-template-columns: var(--rail-left-w) minmax(0, 1fr) var(--rail-right-w); gap: var(--rail-gap); padding: 2.25rem 1.5rem 4rem; align-items: start; } .left-rail { position: sticky; top: calc(var(--header-h) + 1rem); max-height: calc(100vh - var(--header-h) - 2rem); overflow-y: auto; padding-right: 0.5rem; scrollbar-width: thin; } .left-rail::-webkit-scrollbar { width: 6px; } .left-rail::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; } .right-rail { position: sticky; top: calc(var(--header-h) + 1rem); max-height: calc(100vh - var(--header-h) - 2rem); overflow-y: auto; font-size: 0.88rem; color: var(--color-fg-muted); scrollbar-width: thin; } .right-rail::-webkit-scrollbar { width: 6px; } .right-rail::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; } main { max-width: var(--content-max); min-width: 0; grid-column: 2; } .page-shell:not(:has(> .left-rail)) > main { grid-column: 1 / span 2; } .page-shell:not(:has(> .right-rail)) > main { grid-column: span 2; } .page-shell:not(:has(> .left-rail)):not(:has(> .right-rail)) > main { grid-column: 1 / -1; max-width: 1080px; margin: 0 auto; } main.full-width { max-width: none; } /* Section nav (left rail) */ .section-nav__title { text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.7rem; color: var(--color-fg-subtle); margin: 0 0 0.6rem; font-weight: 600; } .section-nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.08rem; } .section-nav__link { display: block; padding: 0.42rem 0.65rem; border-radius: var(--radius-md); color: var(--color-fg-muted); text-decoration: none; font-size: 0.9rem; line-height: 1.35; border-left: 2px solid transparent; transition: background-color 80ms ease, color 80ms ease, border-color 80ms ease; } .section-nav__link:hover { background: var(--color-bg-soft); color: var(--color-fg); text-decoration: none; } .section-nav__item.is-current .section-nav__link { background: var(--color-accent-soft); color: var(--color-accent-strong); border-left-color: var(--color-accent); font-weight: 600; } /* Page TOC (right rail) */ .page-toc__title { text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.7rem; color: var(--color-fg-subtle); margin: 0 0 0.6rem; font-weight: 600; } .page-toc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.05rem; border-left: 1px solid var(--color-border); padding-left: 0.85rem; } .page-toc__link { display: block; color: var(--color-fg-muted); text-decoration: none; font-size: 0.83rem; line-height: 1.45; padding: 0.22rem 0; } .page-toc__link:hover, .page-toc__link:focus { color: var(--color-fg); text-decoration: none; } .page-toc__item--depth-3 { padding-left: 0.85rem; font-size: 0.8rem; } .page-toc__item--depth-4 { padding-left: 1.7rem; font-size: 0.78rem; } /* ---------- Breadcrumbs ---------- */ .breadcrumbs { font-size: 0.82rem; color: var(--color-fg-subtle); margin-bottom: 1.2rem; } .breadcrumbs__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; } .breadcrumbs__sep { margin: 0 0.35rem; color: var(--color-fg-subtle); opacity: 0.7; } .breadcrumbs a { color: var(--color-fg-muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--color-accent); } /* ---------- Doc article ---------- */ .doc { padding-bottom: 3rem; } .doc__header { border-bottom: 1px solid var(--color-border); padding-bottom: 1.25rem; margin-bottom: 1.5rem; } .doc__eyebrow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); margin: 0 0 0.55rem; font-weight: 600; } .doc__title { margin: 0; font-size: 2.1rem; letter-spacing: -0.022em; font-weight: 700; } .doc__title--lg { font-size: 2.6rem; line-height: 1.1; } .doc__summary { color: var(--color-fg-muted); font-size: 1.05rem; margin: 0.6rem 0 0; max-width: 62ch; line-height: 1.55; } .doc__summary--lg { font-size: 1.18rem; } .doc__body > *:first-child { margin-top: 0; } .doc__body :where(h2, h3) { scroll-margin-top: calc(var(--header-h) + 1rem); } .doc__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 0; } .doc__cta { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.05rem; border-radius: var(--radius-md); border: 1px solid var(--color-border-strong); text-decoration: none; color: var(--color-fg); background: var(--color-bg-elev); font-size: 0.92rem; font-weight: 500; box-shadow: var(--shadow-sm); transition: border-color 80ms ease, color 80ms ease, background-color 80ms ease, transform 80ms ease; } .doc__cta:hover { border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; transform: translateY(-1px); } .doc__cta--primary { background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-strong) 100%); border-color: var(--color-accent-strong); color: white; box-shadow: 0 1px 2px rgba(58, 91, 242, 0.3), 0 6px 18px -6px rgba(58, 91, 242, 0.45); } .doc__cta--primary:hover { border-color: var(--color-accent-strong); color: white; filter: brightness(1.05); } .doc__cta--primary:visited { color: white; } /* ---------- Home page ---------- */ .doc--home .doc__header--home { background: var(--hero-gradient); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 2.5rem 2.25rem; margin-bottom: 2rem; box-shadow: var(--shadow-card); } .doc--home .doc__header--home .doc__title { font-size: 2.75rem; background: linear-gradient(180deg, var(--color-fg) 0%, color-mix(in srgb, var(--color-fg) 80%, var(--color-accent)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .doc--home .doc__summary { font-size: 1.15rem; max-width: 68ch; } .hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem; margin-top: 1.5rem; } .hero-stat { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.85rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-bg-elev) 80%, transparent); text-decoration: none; color: inherit; transition: border-color 80ms ease, transform 80ms ease; } .hero-stat:hover { border-color: var(--color-accent); transform: translateY(-1px); text-decoration: none; } .hero-stat__value { font-size: 1.65rem; font-weight: 700; letter-spacing: -0.02em; color: var(--color-fg); line-height: 1.1; } .hero-stat__label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-fg-subtle); font-weight: 600; } .home-grid { display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 2rem; } .home-grid__card { display: block; padding: 1.15rem 1.2rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-elev); text-decoration: none; color: inherit; box-shadow: var(--shadow-card); position: relative; overflow: hidden; transition: border-color 100ms ease, transform 100ms ease, box-shadow 100ms ease; } .home-grid__card::after { content: "→"; position: absolute; top: 1.15rem; right: 1.15rem; color: var(--color-fg-subtle); font-size: 1.1rem; opacity: 0; transform: translateX(-4px); transition: opacity 120ms ease, transform 120ms ease, color 120ms ease; } .home-grid__card:hover { border-color: var(--color-accent); transform: translateY(-2px); box-shadow: var(--shadow-lift); text-decoration: none; } .home-grid__card:hover::after { opacity: 1; transform: translateX(0); color: var(--color-accent); } .home-grid__title { display: block; font-weight: 650; color: var(--color-fg); font-size: 1.02rem; letter-spacing: -0.005em; } .home-grid__desc { display: block; color: var(--color-fg-muted); margin-top: 0.3rem; font-size: 0.9rem; line-height: 1.5; } /* ---------- API reference styling ---------- */ .api-method { display: inline-block; padding: 0.2rem 0.6rem; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.04em; font-family: var(--font-mono); color: white; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12); } .api-method--get { background: #1d6f42; } .api-method--post { background: #2945e0; } .api-method--put { background: #b06b00; } .api-method--delete { background: #b3261e; } .api-method--patch { background: #6d3a8a; } .api-endpoint { background: var(--color-code-bg); color: var(--color-code-fg); padding: 0.18rem 0.55rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-family: var(--font-mono); font-size: 0.88em; } .api-capabilities { list-style: none; padding: 0; margin: 0.85rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem; } .api-capabilities__item code { background: color-mix(in srgb, var(--color-cap) 16%, transparent); color: var(--color-cap); padding: 0.18rem 0.5rem; border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 500; border: 1px solid color-mix(in srgb, var(--color-cap) 30%, transparent); } /* ---------- Catalog ---------- */ .catalog-filters { margin: 1rem 0 1.5rem; padding: 1.1rem 1.15rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-elev); box-shadow: var(--shadow-sm); } .catalog-filters__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; flex-wrap: wrap; } .catalog-filters__search { flex: 1 1 220px; min-width: 0; position: relative; } .catalog-filters__search input { width: 100%; padding: 0.55rem 0.85rem 0.55rem 2.1rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-fg); font-size: 0.92rem; font-family: inherit; } .catalog-filters__search input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-accent); } .catalog-filters__search::before { content: "⌕"; position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--color-fg-subtle); font-size: 0.95rem; pointer-events: none; } .catalog-filters__count { margin: 0; color: var(--color-fg-muted); font-size: 0.85rem; } .catalog-filters__count strong { color: var(--color-fg); font-weight: 650; } .catalog-filters__clear { background: transparent; border: 1px solid var(--color-border-strong); color: var(--color-fg-muted); padding: 0.35rem 0.7rem; font-size: 0.8rem; border-radius: var(--radius-md); cursor: pointer; font-weight: 500; transition: border-color 80ms ease, color 80ms ease; } .catalog-filters__clear:hover { color: var(--color-accent); border-color: var(--color-accent); } .catalog-filters__groups { display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .catalog-filter { border: 0; padding: 0; margin: 0; min-width: 0; } .catalog-filter__legend { font-weight: 600; padding: 0 0 0.4rem; color: var(--color-fg-subtle); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; } .catalog-filter__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; } .catalog-filter__item label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.83rem; color: var(--color-fg-muted); cursor: pointer; padding: 0.32rem 0.7rem; background: var(--color-bg-soft); border: 1px solid transparent; border-radius: var(--radius-pill); user-select: none; transition: background-color 80ms ease, color 80ms ease, border-color 80ms ease; } .catalog-filter__item label:hover { color: var(--color-fg); background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg-soft)); } .catalog-filter__item input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border: 1px solid var(--color-border-strong); border-radius: 3px; background: var(--color-bg); cursor: pointer; position: relative; flex-shrink: 0; transition: border-color 60ms ease, background-color 60ms ease; } .catalog-filter__item input[type="checkbox"]:checked { background: var(--color-accent); border-color: var(--color-accent); } .catalog-filter__item input[type="checkbox"]:checked::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml;utf8,") center / 10px 10px no-repeat; } .catalog-filter__item label:has(input:checked) { color: var(--color-accent-strong); background: var(--color-accent-soft); border-color: color-mix(in srgb, var(--color-accent) 30%, transparent); font-weight: 600; } .catalog-filter__count { color: var(--color-fg-subtle); font-size: 0.76rem; font-variant-numeric: tabular-nums; } .catalog-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; } .catalog-list__item { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-elev); box-shadow: var(--shadow-sm); transition: border-color 80ms ease, transform 80ms ease, box-shadow 80ms ease; } .catalog-list__item:hover { border-color: var(--color-accent); transform: translateY(-1px); box-shadow: var(--shadow-card); } .catalog-list__item[hidden] { display: none !important; } .catalog-list__link { display: block; padding: 0.85rem 1.1rem; text-decoration: none; color: inherit; position: relative; } .catalog-list__link:hover { text-decoration: none; } .catalog-list__title { display: block; font-weight: 650; color: var(--color-fg); font-size: 1rem; letter-spacing: -0.005em; } .catalog-list__subtitle { display: inline-block; color: var(--color-fg-muted); font-size: 0.8rem; margin-top: 0.2rem; font-family: var(--font-mono); background: var(--color-code-bg); padding: 0.1rem 0.45rem; border-radius: var(--radius-sm); } .catalog-list__summary { display: block; color: var(--color-fg-muted); font-size: 0.9rem; margin-top: 0.4rem; line-height: 1.5; } .catalog-empty { padding: 1.25rem; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); color: var(--color-fg-muted); background: var(--color-bg-soft); text-align: center; } .catalog-empty button { margin-left: 0.5rem; background: transparent; border: 1px solid var(--color-border-strong); padding: 0.2rem 0.6rem; border-radius: var(--radius-md); cursor: pointer; color: var(--color-fg); } .catalog-empty button:hover { color: var(--color-accent); border-color: var(--color-accent); } /* ---------- Search ---------- */ .search-shell { padding: 1rem 0; } .search-shell__label { display: block; font-weight: 600; margin-bottom: 0.4rem; color: var(--color-fg-muted); font-size: 0.88rem; } .search-shell__input { width: 100%; padding: 0.85rem 1.1rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg-elev); color: var(--color-fg); font-size: 1rem; font-family: inherit; box-shadow: var(--shadow-sm); } .search-shell__input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-accent); } .search-shell__hint { color: var(--color-fg-subtle); font-size: 0.83rem; margin: 0.45rem 0 0; } .search-shell__results { margin-top: 1.5rem; min-height: 200px; } .search-shell__empty { color: var(--color-fg-muted); } .search-results { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; } .search-result { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-elev); box-shadow: var(--shadow-sm); transition: border-color 80ms ease, transform 80ms ease; } .search-result:hover { border-color: var(--color-accent); transform: translateY(-1px); } .search-result__link { display: block; padding: 0.75rem 1rem; text-decoration: none; color: inherit; } .search-result__link:hover { text-decoration: none; } .search-result__title { display: block; font-weight: 650; color: var(--color-fg); font-size: 0.96rem; } .search-result__meta { display: inline-block; color: var(--color-fg-subtle); font-size: 0.7rem; margin-top: 0.25rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.1rem 0.5rem; background: var(--color-bg-soft); border-radius: var(--radius-pill); font-weight: 600; } .search-result__excerpt { display: block; color: var(--color-fg-muted); font-size: 0.9rem; margin-top: 0.35rem; line-height: 1.5; } .search-result__excerpt mark { background: color-mix(in srgb, var(--color-accent) 25%, transparent); color: var(--color-fg); padding: 0 0.15rem; border-radius: 2px; } .site-header__kbd { display: inline-block; margin-left: auto; padding: 0.1rem 0.4rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font-size: 0.7rem; color: var(--color-fg-subtle); background: var(--color-bg-soft); font-family: var(--font-mono); font-weight: 600; } /* ---------- Search modal ---------- */ .search-modal { padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-elev); color: var(--color-fg); width: min(680px, 92vw); top: 10vh; max-height: 80vh; box-shadow: var(--shadow-modal); } .search-modal::backdrop { background: rgba(8, 12, 20, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .search-modal__inner { padding: 1.1rem 1.2rem; display: grid; gap: 0.7rem; } .search-modal__row { display: flex; align-items: center; gap: 0.5rem; } .search-modal__input { flex: 1; padding: 0.75rem 1rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-fg); font-size: 1rem; font-family: inherit; } .search-modal__input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-accent); } .search-modal__close { background: transparent; border: 1px solid var(--color-border); color: var(--color-fg-muted); padding: 0.45rem 0.75rem; border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; } .search-modal__close:hover { color: var(--color-accent); border-color: var(--color-accent); } .search-modal__hint { color: var(--color-fg-subtle); font-size: 0.78rem; margin: 0; } .search-modal__results { max-height: 60vh; overflow-y: auto; padding-right: 0.25rem; } kbd { font-family: var(--font-mono); border: 1px solid var(--color-border-strong); padding: 0 0.35rem; border-radius: var(--radius-sm); font-size: 0.78em; background: var(--color-bg-soft); color: var(--color-fg-muted); font-weight: 600; } /* ---------- Source backlink ---------- */ .source-backlink { margin-top: 2.5rem; padding: 1.1rem 1.2rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-soft); } .source-backlink__title { margin: 0 0 0.55rem; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--color-fg-subtle); text-transform: uppercase; font-weight: 600; } .source-backlink__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; } .source-backlink__item { font-size: 0.9rem; } .source-backlink__label { color: var(--color-fg-muted); margin-right: 0.4rem; } .source-backlink__path { padding: 0.12rem 0.4rem; background: var(--color-bg-elev); border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-family: var(--font-mono); font-size: 0.85em; } .source-backlink__meta { color: var(--color-fg-subtle); margin-left: 0.4rem; font-size: 0.82rem; } /* ---------- Copy button (injected by ui.js) ---------- */ .code-copy { position: absolute; top: 0.55rem; right: 0.55rem; padding: 0.25rem 0.6rem; font-size: 0.72rem; font-weight: 600; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-bg-elev); color: var(--color-fg-muted); cursor: pointer; opacity: 0; transition: opacity 80ms ease, color 80ms ease, border-color 80ms ease; font-family: var(--font-sans); } pre:hover .code-copy, .code-copy:focus { opacity: 1; } .code-copy:hover { color: var(--color-accent); border-color: var(--color-accent); } .code-copy.is-copied { color: var(--color-success); border-color: var(--color-success); } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--color-border); padding: 2rem 1.5rem; color: var(--color-fg-muted); font-size: 0.88rem; background: var(--color-bg-soft); } .site-footer__row { max-width: var(--shell-max); margin: 0 auto; } .site-footer__copy { margin: 0; line-height: 1.55; } .site-footer__meta { margin: 0.4rem 0 0; color: var(--color-fg-subtle); font-size: 0.82rem; } /* ---------- 404 ---------- */ .page-404 main { max-width: 56ch; margin: 4rem auto; padding: 0 1.5rem; } /* ---------- Responsive ---------- */ @media (max-width: 1180px) { :root { --rail-left-w: 15rem; --rail-right-w: 14rem; --rail-gap: 1.75rem; } } @media (max-width: 1100px) { .page-shell { grid-template-columns: var(--rail-left-w) minmax(0, 1fr); } .right-rail { position: static; max-height: none; border-top: 1px solid var(--color-border); margin-top: 2.5rem; padding-top: 1.25rem; } main + .right-rail { grid-column: 2; } } @media (max-width: 880px) { :root { --rail-gap: 1rem; } .nav-toggle { display: inline-flex; } .primary-nav { position: fixed; top: var(--header-h); right: 0; left: 0; background: var(--color-bg-elev); border-bottom: 1px solid var(--color-border); padding: 0.75rem 1rem; transform: translateY(-110%); transition: transform 160ms ease; z-index: 40; } .primary-nav.is-open { transform: translateY(0); box-shadow: var(--shadow-card); } .primary-nav__list { flex-direction: column; gap: 0.25rem; } .page-shell { grid-template-columns: 1fr; padding: 1.5rem 1.1rem 3rem; } .left-rail { position: static; max-height: none; padding-right: 0; border-bottom: 1px solid var(--color-border); padding-bottom: 1rem; margin-bottom: 1.25rem; } main + .right-rail { grid-column: auto; } .doc__title { font-size: 1.7rem; } .doc__title--lg { font-size: 2rem; } .doc--home .doc__header--home { padding: 1.75rem 1.5rem; } .doc--home .doc__header--home .doc__title { font-size: 2.1rem; } .site-header__search-link { min-width: 0; } .site-header__search-text { display: none; } .site-header__kbd { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }