/* ========================================================================== myHAB — presentation site ========================================================================== */ /* --- Tokens ------------------------------------------------------------- */ /* Light is the default palette. The dark palette below overrides only the tokens; no component rule knows which theme is active. */ :root { --bg: #f7f9fc; --bg-2: #eef2f8; --surface: #ffffff; --surface-2: #f4f7fb; --panel: #eef2f8; --card-a: #ffffff; --card-b: #f6f9fc; --border: #dbe3ee; --border-soft: #e7edf5; --border-hover: #b9c8db; --text: #1b2534; --text-dim: #4d5c72; --text-faint: #74839a; --heading: #0b1220; --teal: #0d9488; --teal-dim: #0f766e; --indigo: #4f46e5; --amber: #b45309; --rose: #e11d48; --sky: #0284c7; --accent: var(--teal); --accent-2: #0891b2; --accent-ink: #ffffff; --accent-glow: rgba(13, 148, 136, .45); --accent-glow-strong: rgba(13, 148, 136, .6); --accent-ring: rgba(13, 148, 136, .16); --select: rgba(13, 148, 136, .2); --hover: rgba(15, 23, 42, .05); --hover-strong: rgba(15, 23, 42, .08); --subtle: rgba(15, 23, 42, .035); --subtle-2: rgba(15, 23, 42, .04); --row-hover: rgba(15, 23, 42, .022); --code-bg: #eef2f8; --code-text: #0f766e; --pre-bg: #f3f6fa; --pre-text: #31405a; --pre-border: #dbe3ee; --copy-bg: #ffffff; --copy-border: #cfd9e6; --copy-text: #64748b; --header-bg: rgba(247, 249, 252, .85); --grid-line: rgba(15, 23, 42, .045); --scrim: rgba(15, 23, 42, .72); --mesh-a: rgba(13, 148, 136, .15); --mesh-b: rgba(99, 102, 241, .13); --mesh-c: rgba(2, 132, 199, .1); --cta-bg: linear-gradient(135deg, #eafaf7 0%, #eef0fe 55%, #f9f0fa 100%); --tint: 7%; --wash: 11%; --edge: 30%; --radius: 14px; --radius-sm: 9px; --radius-lg: 22px; --maxw: 1180px; --header-h: 64px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --shadow: 0 18px 40px -20px rgba(15, 23, 42, .28); --shadow-lg: 0 40px 80px -34px rgba(15, 23, 42, .3); --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; color-scheme: light; } /* Dark palette. The inline script in each page's sets this attribute before first paint from the visitor's stored choice. */ :root[data-theme="dark"] { --bg: #070a11; --bg-2: #0b101a; --surface: #10161f; --surface-2: #151d29; --panel: #0d131d; --card-a: #10161f; --card-b: #0d131c; --border: #212b3b; --border-soft: #1a2331; --border-hover: #2d3a4f; --text: #e9eff8; --text-dim: #a4b1c4; --text-faint: #6f7d92; --heading: #ffffff; --teal: #2dd4bf; --teal-dim: #14b8a6; --indigo: #818cf8; --amber: #fbbf24; --rose: #fb7185; --sky: #38bdf8; --accent-2: #22c3d6; --accent-ink: #04211d; --accent-glow: rgba(45, 212, 191, .8); --accent-glow-strong: rgba(45, 212, 191, .95); --accent-ring: rgba(45, 212, 191, .18); --select: rgba(45, 212, 191, .28); --hover: rgba(255, 255, 255, .05); --hover-strong: rgba(255, 255, 255, .07); --subtle: rgba(255, 255, 255, .035); --subtle-2: rgba(255, 255, 255, .04); --row-hover: rgba(255, 255, 255, .015); --code-bg: #0e1520; --code-text: #a5e8dc; --pre-bg: #0a0f17; --pre-text: #cdd9e8; --pre-border: #212b3b; --copy-bg: #131b26; --copy-border: #2a3648; --copy-text: #8b9ab1; --header-bg: rgba(7, 10, 17, .82); --grid-line: rgba(255, 255, 255, .028); --scrim: rgba(3, 5, 9, .92); --mesh-a: rgba(45, 212, 191, .17); --mesh-b: rgba(129, 140, 248, .16); --mesh-c: rgba(56, 189, 248, .09); --cta-bg: linear-gradient(135deg, #0e1a21 0%, #101322 55%, #17111f 100%); --tint: 8%; --wash: 12%; --edge: 26%; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5); --shadow: 0 18px 40px -18px rgba(0, 0, 0, .85); --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, .9); color-scheme: dark; } /* --- Reset -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: var(--teal); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4, h5 { margin: 0 0 .6em; line-height: 1.2; letter-spacing: -.02em; font-weight: 650; color: var(--heading); } h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); letter-spacing: -.035em; } h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); letter-spacing: -.03em; } h3 { font-size: 1.24rem; } h4 { font-size: 1.02rem; } p { margin: 0 0 1.1em; } ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; } li { margin: .3em 0; } hr { border: 0; border-top: 1px solid var(--border-soft); margin: 3rem 0; } code { font-family: var(--mono); font-size: .87em; background: var(--code-bg); border: 1px solid var(--border-soft); border-radius: 5px; padding: .12em .4em; color: var(--code-text); } pre { margin: 0 0 1.4em; background: var(--pre-bg); border: 1px solid var(--pre-border); border-radius: var(--radius); padding: 1.05rem 1.15rem; overflow-x: auto; font-size: .855rem; line-height: 1.6; box-shadow: var(--shadow-sm); color: var(--pre-text); } pre code { background: none; border: 0; padding: 0; font-size: inherit; color: var(--pre-text); } ::selection { background: var(--select); } /* --- Layout primitives -------------------------------------------------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; } .container-narrow { max-width: 860px; } .section { padding: 84px 0; } .section-tight { padding: 52px 0; } .section-alt { background: var(--bg-2); border-block: 1px solid var(--border-soft); } .eyebrow { display: inline-block; font-size: .74rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin-bottom: .85rem; } .section-head { max-width: 720px; margin-bottom: 46px; } .section-head.center { margin-inline: auto; text-align: center; } .section-head p { color: var(--text-dim); font-size: 1.06rem; margin-bottom: 0; } .lead { font-size: 1.13rem; color: var(--text-dim); } .muted { color: var(--text-dim); } .small { font-size: .875rem; } /* --- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; gap: .5em; padding: .68em 1.25em; border-radius: 10px; border: 1px solid transparent; font-size: .93rem; font-weight: 600; line-height: 1.2; cursor: pointer; transition: transform .12s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; white-space: nowrap; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: linear-gradient(135deg, var(--teal) 0%, var(--accent-2) 100%); color: var(--accent-ink); box-shadow: 0 10px 26px -12px var(--accent-glow); } .btn-primary:hover { box-shadow: 0 14px 32px -12px var(--accent-glow-strong); } .btn-ghost { background: var(--subtle); border-color: var(--border); color: var(--text); } .btn-ghost:hover { background: var(--hover-strong); border-color: var(--border-hover); } .btn-lg { padding: .82em 1.55em; font-size: 1rem; } .btn-sm { padding: .48em .9em; font-size: .84rem; } .btn-row { display: flex; flex-wrap: wrap; gap: .8rem; } /* --- Header ------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 60; height: var(--header-h); display: flex; align-items: center; background: var(--header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-soft); } .site-header .container { display: flex; align-items: center; gap: 1.4rem; max-width: 1320px; } .brand { display: inline-flex; align-items: center; gap: .58rem; font-weight: 700; font-size: 1.06rem; color: var(--heading); letter-spacing: -.02em; } .brand:hover { text-decoration: none; } .brand svg, .brand img { width: 26px; height: 26px; flex: none; } .brand b { color: var(--teal); font-weight: 700; } .main-nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; } .main-nav a { padding: .45em .72em; border-radius: 8px; color: var(--text-dim); font-size: .91rem; font-weight: 520; } .main-nav a:hover { color: var(--text); background: var(--hover); text-decoration: none; } .main-nav a.active { color: var(--teal); } .header-actions { display: flex; align-items: center; gap: .55rem; margin-left: .6rem; } .nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: .4em .6em; cursor: pointer; } .icon-link { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; color: var(--text-dim); border: 1px solid var(--border); background: none; padding: 0; cursor: pointer; flex: none; } .icon-link:hover { color: var(--text); background: var(--hover-strong); } .icon-link svg { width: 17px; height: 17px; } /* Theme switch — shows the icon of the theme it would switch to. */ .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* --- Hero --------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; padding: 96px 0 72px; border-bottom: 1px solid var(--border-soft); } .hero::before { content: ""; position: absolute; inset: -40% -10% auto -10%; height: 720px; background: radial-gradient(46% 52% at 22% 32%, var(--mesh-a), transparent 70%), radial-gradient(40% 46% at 78% 18%, var(--mesh-b), transparent 72%), radial-gradient(34% 40% at 58% 62%, var(--mesh-c), transparent 75%); pointer-events: none; } .hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(70% 60% at 50% 20%, #000 20%, transparent 100%); -webkit-mask-image: radial-gradient(70% 60% at 50% 20%, #000 20%, transparent 100%); pointer-events: none; } .hero .container { position: relative; z-index: 1; } .hero-inner { max-width: 780px; } .hero h1 { margin-bottom: .5em; } .hero h1 .grad { background: linear-gradient(100deg, var(--teal) 10%, var(--sky) 48%, var(--indigo) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p.lead { font-size: clamp(1.05rem, 2vw, 1.24rem); max-width: 660px; } .pill { display: inline-flex; align-items: center; gap: .5em; padding: .34em .8em .34em .45em; border: 1px solid var(--border); background: var(--subtle); border-radius: 999px; font-size: .82rem; color: var(--text-dim); margin-bottom: 1.5rem; } .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px var(--accent-ring); margin-left: .35em; } .pill strong { color: var(--text); font-weight: 600; } .hero-meta { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 2.6rem; color: var(--text-faint); font-size: .86rem; } .hero-meta div strong { display: block; color: var(--text); font-size: 1.24rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.3; } /* --- Browser frame ------------------------------------------------------ */ .frame { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-lg); } .frame-bar { display: flex; align-items: center; gap: .45rem; padding: .6rem .85rem; background: var(--panel); border-bottom: 1px solid var(--border); } .frame-bar i { width: 10px; height: 10px; border-radius: 50%; display: block; } .frame-bar i:nth-child(1) { background: #ef5f57; } .frame-bar i:nth-child(2) { background: #febc2e; } .frame-bar i:nth-child(3) { background: #28c840; } .frame-bar span { margin-left: .7rem; font-family: var(--mono); font-size: .73rem; color: var(--text-faint); } .frame img { display: block; width: 100%; } .hero-shot { margin-top: 58px; position: relative; z-index: 1; } /* --- Cards / grids ------------------------------------------------------ */ .grid { display: grid; gap: 20px; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .card { background: linear-gradient(180deg, var(--card-a) 0%, var(--card-b) 100%); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; position: relative; transition: border-color .2s ease, transform .2s ease; } .card:hover { border-color: var(--border-hover); transform: translateY(-2px); } .card h3 { font-size: 1.06rem; margin-bottom: .45em; } .card p { color: var(--text-dim); font-size: .93rem; margin-bottom: 0; } .card p + p { margin-top: .8em; } .card-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 16px; background: color-mix(in srgb, var(--teal) var(--wash), transparent); border: 1px solid color-mix(in srgb, var(--teal) var(--edge), transparent); color: var(--teal); } .card-icon svg { width: 19px; height: 19px; } .card-icon.i { background: color-mix(in srgb, var(--indigo) var(--wash), transparent); border-color: color-mix(in srgb, var(--indigo) var(--edge), transparent); color: var(--indigo); } .card-icon.a { background: color-mix(in srgb, var(--amber) var(--wash), transparent); border-color: color-mix(in srgb, var(--amber) var(--edge), transparent); color: var(--amber); } .card-icon.s { background: color-mix(in srgb, var(--sky) var(--wash), transparent); border-color: color-mix(in srgb, var(--sky) var(--edge), transparent); color: var(--sky); } .card-icon.r { background: color-mix(in srgb, var(--rose) var(--wash), transparent); border-color: color-mix(in srgb, var(--rose) var(--edge), transparent); color: var(--rose); } .card-link { display: inline-flex; align-items: center; gap: .35em; margin-top: 1em; font-size: .88rem; font-weight: 600; } a.card { color: inherit; display: block; } a.card:hover { text-decoration: none; } /* --- Alternating feature rows ------------------------------------------- */ .feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 54px; align-items: center; padding: 58px 0; border-bottom: 1px solid var(--border-soft); } .feature:last-child { border-bottom: 0; } .feature.rev .feature-text { order: 2; } .feature.rev .feature-media { order: 1; } .feature h3 { font-size: 1.6rem; letter-spacing: -.025em; } .feature p { color: var(--text-dim); } .feature ul { color: var(--text-dim); padding-left: 1.1em; } .feature ul li::marker { color: var(--teal); } .feature-media img { border-radius: var(--radius); } .tagset { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.2rem; } .tag { font-size: .76rem; font-family: var(--mono); padding: .25em .6em; border-radius: 6px; background: var(--subtle-2); border: 1px solid var(--border-soft); color: var(--text-dim); } /* --- Screenshot gallery ------------------------------------------------- */ .shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .shots.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .shots.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .shot { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); cursor: zoom-in; transition: border-color .2s ease, transform .2s ease; } .shot:hover { border-color: var(--teal); transform: translateY(-3px); } .shot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; width: 100%; } .shot.tall img { aspect-ratio: 3 / 4; object-fit: contain; background: var(--surface-2); } /* In the docs, screenshots are evidence — show them whole rather than cropped to a uniform gallery tile. */ .docs-main .shot img { aspect-ratio: auto; object-fit: contain; } .docs-main .shot { margin: 0 0 1.8em; } .shot figcaption { padding: .7rem .9rem .8rem; font-size: .85rem; color: var(--text-dim); border-top: 1px solid var(--border-soft); } .shot figcaption b { display: block; color: var(--text); font-weight: 600; font-size: .9rem; } /* --- Lightbox ----------------------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; background: var(--scrim); backdrop-filter: blur(6px); padding: 28px; cursor: zoom-out; } .lightbox.open { display: grid; } .lightbox img { max-width: min(1500px, 96vw); max-height: 88vh; width: auto; border-radius: 10px; border: 1px solid var(--border); box-shadow: var(--shadow-lg); } .lightbox p { text-align: center; color: #cbd5e1; margin: 1rem 0 0; font-size: .9rem; } /* --- Tables ------------------------------------------------------------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1.5em; background: var(--surface); } table { border-collapse: collapse; width: 100%; font-size: .9rem; } th, td { text-align: left; padding: .72rem .95rem; border-bottom: 1px solid var(--border-soft); vertical-align: top; } th { background: var(--panel); color: var(--heading); font-weight: 600; font-size: .82rem; letter-spacing: .02em; white-space: nowrap; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: var(--row-hover); } td code { white-space: nowrap; } /* --- Callouts ----------------------------------------------------------- */ .callout { border: 1px solid var(--border); border-left: 3px solid var(--teal); background: color-mix(in srgb, var(--teal) var(--tint), transparent); border-radius: var(--radius-sm); padding: 1rem 1.15rem; margin: 0 0 1.5em; font-size: .93rem; } .callout p:last-child { margin-bottom: 0; } .callout strong:first-child { color: var(--heading); } .callout.warn { border-left-color: var(--amber); background: color-mix(in srgb, var(--amber) var(--tint), transparent); } .callout.info { border-left-color: var(--sky); background: color-mix(in srgb, var(--sky) var(--tint), transparent); } .callout.danger { border-left-color: var(--rose); background: color-mix(in srgb, var(--rose) var(--tint), transparent); } /* --- Code block with copy ---------------------------------------------- */ .codeblock { position: relative; margin-bottom: 1.4em; } .codeblock pre { margin: 0; } .codeblock .copy { position: absolute; top: 9px; right: 9px; background: var(--copy-bg); border: 1px solid var(--copy-border); color: var(--copy-text); border-radius: 6px; font-size: .72rem; font-family: var(--font); font-weight: 600; padding: .3em .6em; cursor: pointer; opacity: 0; transition: opacity .15s ease, color .15s ease; } .codeblock:hover .copy { opacity: 1; } .codeblock .copy:hover { color: var(--teal); border-color: var(--teal); } .codeblock .copy.done { color: var(--teal); opacity: 1; } /* --- CTA band ----------------------------------------------------------- */ .cta { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--cta-bg); padding: 56px 44px; text-align: center; } .cta::before { content: ""; position: absolute; inset: -60% -20% auto -20%; height: 460px; background: radial-gradient(40% 60% at 30% 40%, var(--mesh-a), transparent 70%), radial-gradient(40% 60% at 72% 30%, var(--mesh-b), transparent 72%); pointer-events: none; } .cta > * { position: relative; } .cta h2 { margin-bottom: .4em; } .cta p { color: var(--text-dim); max-width: 560px; margin-inline: auto; } .cta .btn-row { justify-content: center; margin-top: 1.8rem; } .creds { display: inline-flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.6rem; } .cred { font-family: var(--mono); font-size: .8rem; padding: .35em .75em; border-radius: 8px; background: var(--subtle-2); border: 1px solid var(--border); color: var(--text-dim); } .cred b { color: var(--teal); font-weight: 500; } /* --- Footer ------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border-soft); background: var(--bg-2); padding: 54px 0 34px; margin-top: 0; font-size: .9rem; } .footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 34px; margin-bottom: 38px; } .footer-grid h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); margin-bottom: 1em; font-weight: 650; } .footer-grid ul { list-style: none; padding: 0; margin: 0; } .footer-grid li { margin: .45em 0; } .footer-grid a { color: var(--text-dim); } .footer-grid a:hover { color: var(--teal); } .footer-about p { color: var(--text-faint); max-width: 300px; margin-top: .9rem; font-size: .88rem; } .footer-bottom { border-top: 1px solid var(--border-soft); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; color: var(--text-faint); font-size: .85rem; } /* --- Docs layout -------------------------------------------------------- */ .docs-shell { display: grid; grid-template-columns: 244px minmax(0, 1fr) 200px; gap: 44px; max-width: 1320px; margin-inline: auto; padding: 40px 22px 90px; align-items: start; } .docs-side { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; padding-right: .5rem; font-size: .9rem; } .docs-side::-webkit-scrollbar { width: 6px; } .docs-side::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .docs-side h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .13em; color: var(--text-faint); margin: 1.7rem 0 .6rem; font-weight: 650; } .docs-side h4:first-child { margin-top: 0; } .docs-side ul { list-style: none; padding: 0; margin: 0; } .docs-side li { margin: 0; } .docs-side a { display: block; padding: .38em .7em; border-radius: 7px; color: var(--text-dim); border-left: 2px solid transparent; } .docs-side a:hover { color: var(--text); background: var(--hover); text-decoration: none; } .docs-side a.active { color: var(--teal); background: color-mix(in srgb, var(--teal) var(--tint), transparent); border-left-color: var(--teal); font-weight: 550; } .docs-main { min-width: 0; } .docs-main > h2 { margin-top: 2.6em; padding-top: .4em; font-size: 1.6rem; } .docs-main > h2:first-of-type { margin-top: 1.2em; } .docs-main > h3 { margin-top: 2em; } .docs-main img { border-radius: var(--radius); border: 1px solid var(--border); } .docs-toc { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; font-size: .84rem; } .docs-toc h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .13em; color: var(--text-faint); margin: 0 0 .7rem; font-weight: 650; } .docs-toc ul { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--border-soft); } .docs-toc a { display: block; padding: .3em 0 .3em .8rem; color: var(--text-faint); margin-left: -1px; border-left: 1px solid transparent; line-height: 1.45; } .docs-toc a:hover { color: var(--text-dim); text-decoration: none; } .docs-toc a.active { color: var(--teal); border-left-color: var(--teal); } .docs-header { border-bottom: 1px solid var(--border-soft); padding-bottom: 1.6rem; margin-bottom: .5rem; } .docs-header h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); margin-bottom: .3em; } .docs-header p { color: var(--text-dim); font-size: 1.05rem; margin-bottom: 0; } .breadcrumb { font-size: .82rem; color: var(--text-faint); margin-bottom: .9rem; } .breadcrumb a { color: var(--text-faint); } .breadcrumb a:hover { color: var(--teal); } .anchor { color: var(--text-faint); opacity: 0; margin-left: .35em; font-weight: 400; text-decoration: none; } h2:hover .anchor, h3:hover .anchor { opacity: 1; } .pager { display: flex; gap: 14px; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--border-soft); } .pager a { flex: 1; border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.15rem; color: var(--text); background: var(--surface); transition: border-color .18s ease; } .pager a:hover { border-color: var(--teal); text-decoration: none; } .pager span { display: block; font-size: .76rem; color: var(--text-faint); margin-bottom: .2em; } .pager .next { text-align: right; } /* --- Misc utilities ----------------------------------------------------- */ .center { text-align: center; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-3 { margin-top: 2rem; } .kv { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.2rem; font-size: .92rem; } .kv dt { color: var(--text-faint); } .kv dd { margin: 0; } .badge { display: inline-block; font-size: .7rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; padding: .2em .55em; border-radius: 5px; vertical-align: middle; } .badge.opt { background: color-mix(in srgb, var(--amber) var(--wash), transparent); color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) var(--edge), transparent); } .badge.core { background: color-mix(in srgb, var(--teal) var(--wash), transparent); color: var(--teal); border: 1px solid color-mix(in srgb, var(--teal) var(--edge), transparent); } .badge.beta { background: color-mix(in srgb, var(--indigo) var(--wash), transparent); color: var(--indigo); border: 1px solid color-mix(in srgb, var(--indigo) var(--edge), transparent); } /* --- Responsive --------------------------------------------------------- */ @media (max-width: 1080px) { .docs-shell { grid-template-columns: 220px minmax(0, 1fr); gap: 34px; } .docs-toc { display: none; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shots, .shots.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feature { grid-template-columns: 1fr; gap: 28px; padding: 42px 0; } .feature.rev .feature-text { order: 0; } .feature.rev .feature-media { order: 0; } } @media (max-width: 820px) { .main-nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg-2); border-bottom: 1px solid var(--border); padding: .6rem; box-shadow: var(--shadow); } .main-nav.open { display: flex; } .main-nav a { padding: .7em .9em; } .nav-toggle { display: block; } .header-actions { margin-left: .4rem; } .header-actions .btn { display: none; } .docs-shell { grid-template-columns: 1fr; padding-top: 24px; } .docs-side { position: static; max-height: none; border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; background: var(--surface); margin-bottom: 1.5rem; } } @media (max-width: 640px) { .section { padding: 58px 0; } .hero { padding: 62px 0 52px; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .shots { grid-template-columns: 1fr; } .shots.cols-3, .shots.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: 1fr; } .cta { padding: 40px 24px; } .pager { flex-direction: column; } .hero-meta { gap: 1.2rem 2rem; } }