/* Palettes: the sqliteonline color themes (css/color), 0 = light, 10 = dark. Light-theme text/muted are darkened vs the original color-a/menu-ct: body text must reach >=4.5:1 on #E9ECEF (WCAG); the originals did not. */ :root { --bg: #E9ECEF; /* bgc-d */ --panel: #F8F9FA; /* bgc-e */ --text: #3a4753; /* color-a, darkened to ~7.5:1 */ --muted: #5c6b76; /* menu-ct, darkened to ~4.7:1 */ --line: #DEE2E6; /* bgc-c */ --accent: #006b7a; /* color-c, darkened for WCAG: teal links on the page bg needed >=4.5:1 (the original #007f91 gave 3.98). Dark theme keeps its own accent. */ --accent-hover: #2A6E88; /* cm-builtin */ --accent-soft: #E9ECEF; /* bgc-d */ --accent-2: #44a0b6; /* cm-variable */ --danger: #ca4334; /* color-d */ --btn-text: #F8F9FA; /* hover-el-color */ --radius: 12px; color-scheme: light; } /* Manual theme override: (js/localStorage). The same block is duplicated below for system dark without an override. */ :root[data-theme="dark"] { color-scheme: dark; /* native scrollbars/inputs in the dark theme */ --bg: #18191E; /* bgc-e */ --panel: #1C1D23; /* bgc-d */ --text: #c7cfcf; /* color-a */ --muted: #939ba3; /* color-b, lightened: secondary text ~6:1 */ --line: #3c3f41; /* bgc-a */ --accent: #CC7832; /* bgr-a */ --accent-hover: #FFC66D; /* color-c */ --accent-soft: #202228; /* bgc-c */ --accent-2: #FFC66D; /* color-c */ --danger: #c24c57; /* color-g */ --btn-text: #18191E; /* bgc-e: dark text on orange/yellow */ } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #18191E; --panel: #1C1D23; --text: #c7cfcf; --muted: #939ba3; --line: #3c3f41; --accent: #CC7832; --accent-hover: #FFC66D; --accent-soft: #202228; --accent-2: #FFC66D; --danger: #c24c57; --btn-text: #18191E; } } * { box-sizing: border-box } body { margin: 0; font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text); background: var(--bg); } h1 { font-size: 1.7rem; line-height: 1.25; letter-spacing: -.015em; margin: 1em 0 .5em } h2 { font-size: 1.45rem; letter-spacing: -.01em; margin: 2.4em 0 .5em } h3 { font-size: 1.02rem; margin: 0 0 .35em } h1, h2, h3 { text-wrap: balance } h1:first-child, .toolbar h1 { margin-top: .3em } p, ol, ul { margin: .7em 0 } a { color: var(--accent); text-decoration: none } a:hover { text-decoration: underline } a, button { touch-action: manipulation } /* Links embedded in a block of text carry an underline so they read as links without relying on colour alone (WCAG 1.4.1). Nav, buttons and card links are exempt: they are not surrounded by prose. */ .wrap :is(p, li, dd) a:not(.btn) { text-decoration: underline } /* Skip link: invisible until keyboard focus */ .skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 8px 14px; background: var(--accent); color: var(--btn-text); border-radius: 0 0 8px 0; } .skip:focus-visible { left: 0 } a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible, .linklike:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } code { font: .875em/1.5 ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; background: var(--accent-soft); padding: .12em .4em; border-radius: 5px; } pre { font: .82rem/1.55 ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; overflow-x: auto; } /* Copy button on example blocks (site.js wraps each pre in .pre-wrap): shows on hover/focus, always visible on touchscreens. */ .pre-wrap { position: relative; margin: .9em 0 } .pre-wrap pre { margin: 0 } .copy-btn { position: absolute; top: 8px; right: 8px; padding: 3px 10px; font: inherit; font-size: .78rem; font-weight: 600; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; opacity: 0; transition: opacity .12s; } .pre-wrap:hover .copy-btn, .copy-btn:focus-visible { opacity: 1 } .copy-btn:hover { color: var(--accent); border-color: var(--accent) } @media (hover: none) { .copy-btn { opacity: 1 } } @media (prefers-reduced-motion: reduce) { .copy-btn { transition: none } } /* Capitalize slugs used as headings/links (getting-started → Getting-started) */ .cap { display: inline-block } .cap::first-letter { text-transform: uppercase } /* ── Public site ─────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 10; background: var(--panel); background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } /* The bar spans the viewport, its content sits in the same 860px column as .wrap — the brand and the page text share one vertical axis. */ .nav-bar { max-width: 860px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 12px 20px; } .brand { font-weight: 800; font-size: 1.05rem; color: var(--text); letter-spacing: -.02em; margin-right: auto; } .brand span { color: var(--accent) } .brand:hover { text-decoration: none } /* Desktop: the nav box dissolves (display: contents) so its links become header flex items — then `order` puts the bulb BEFORE the Admin button while Admin still lives inside the nav (one DOM element; on mobile the nav is a real box again and Admin collapses into the burger with it). */ .site-header .nav-links { display: contents } .site-header .nav-links .btn { order: 2 } .site-header .dd { order: 1 } .site-header .burger { order: 3 } .site-header nav a { color: var(--muted); font-weight: 500 } .site-header nav a:hover { color: var(--accent); text-decoration: none } .site-header nav a.btn, .site-header nav a.btn:hover { color: var(--btn-text) } .wrap { max-width: 860px; margin: 28px auto 48px; padding: 0 20px } .site-footer { text-align: center; color: var(--muted); padding: 28px 16px; font-size: .85rem; border-top: 1px solid var(--line); } .crumbs { font-size: .85rem; color: var(--muted); margin: .4em 0 1.4em } .crumbs b { color: var(--text); font-weight: 600 } /* Theme switcher: a bulb button with a System/Light/Dark dropdown. It sits OUTSIDE the collapsing nav — always visible, desktop and mobile alike. */ .dd { position: relative; display: inline-flex } .pick-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; cursor: pointer; color: var(--text); background: transparent; border: none; border-radius: 8px; } .pick-btn:hover { color: var(--accent) } .pick-btn:active { transform: translateY(1px) } .dd-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 130px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(0 0 0 / .15); visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .15s ease-out, transform .15s ease-out, visibility .15s; } .dd.open .dd-menu { visibility: visible; opacity: 1; transform: none } .dd-menu button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; cursor: pointer; font: inherit; font-size: .9rem; text-align: left; color: var(--text); background: none; border: 0; border-radius: 6px; } .dd-menu button:hover { background: var(--accent-soft); color: var(--accent) } .dd-menu button[aria-selected="true"] { color: var(--accent); font-weight: 600 } .dd-menu button[aria-selected="true"]::after { content: "\2713"; font-size: .85em } /* Mobile: the nav links collapse into a burger; brand + bulb + burger stay. */ .burger { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; margin-right: -8px; cursor: pointer; color: var(--text); background: transparent; border: none; border-radius: 8px; } .burger:active { transform: translateY(1px) } .burger .i-close { display: none } .burger[aria-expanded="true"] .i-open { display: none } .burger[aria-expanded="true"] .i-close { display: block } @media (max-width: 640px) { .nav-bar { gap: 6px } .burger { display: inline-flex } .site-header .nav-links { display: none } .site-header .nav-links.open { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 100%; left: 0; right: 0; padding: 6px 20px 12px; background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: 0 8px 24px rgb(0 0 0 / .15); } .site-header .nav-links.open a { padding: 13px 0; border-top: 1px solid var(--line) } .site-header .nav-links.open a:first-child { border-top: none } .site-header .nav-links.open a.btn { align-self: flex-start; margin: 10px 0 4px; padding: 8px 14px; } } /* The "how it works" diagram on the landing */ .flow { display: flex; align-items: stretch; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 26px auto 20px; } .flow-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 18px; min-width: 180px; text-align: center; } .flow-box b { display: block; font-size: .95rem; letter-spacing: -.01em } .flow-box b code { background: none; padding: 0; font-size: 1em } .flow-box span { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px } .flow-arrow { align-self: center; color: var(--accent); font-weight: 700; font-size: 1.2rem } .flow-note { font-size: .85rem; max-width: 46em; margin: 0 auto } /* The fan-out row: one process, many isolated sites */ .flow-head { margin-bottom: 0 } .flow-fan { display: flex; justify-content: center; gap: 110px; margin: 4px 0; color: var(--accent); font-weight: 700; font-size: 1.1rem; } .flow-sites { margin-top: 0 } .flow-sites .flow-box { min-width: 150px } @media (max-width: 560px) { .flow { flex-direction: column; align-items: stretch } .flow-arrow { transform: rotate(90deg) } .flow-fan span:first-child, .flow-fan span:last-child { display: none } } /* ── Landing ─────────────────────────────────── */ .hero { padding: 44px 0 8px; text-align: center } .hero h1 { font-size: clamp(2rem, 5.5vw, 3.25rem); font-weight: 800; letter-spacing: -.025em; margin: 0 auto .4em; max-width: 21em; } .hero h1 em { font-style: normal; color: var(--accent) } .hero h1 code { font-size: .85em } .hero-sub { color: var(--muted); font-size: .95rem; font-weight: 600; letter-spacing: .04em; margin: 0 0 1.3em; } .lead { font-size: 1.1rem; max-width: 42em; margin: 0 auto; text-wrap: pretty } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 26px 0 20px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 } .chips span { font-size: .8rem; font-weight: 500; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 99px; padding: 3px 12px; white-space: nowrap; } /* Three big proofs + a compact list for the rest: varied hierarchy instead of nine identical cards. */ .proofs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; margin: 1.4em 0; } .proof { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; color: var(--text); transition: border-color .15s, transform .15s; } .proof:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-2px) } .proof h3 { color: var(--accent); font-size: 1.12rem } .proof p { margin: 0; font-size: .95rem } @media (prefers-reduced-motion: reduce) { .proof { transition: none } .proof:hover { transform: none } } .feature-list { display: grid; /* min(100%, …): the track minimum must never beat the container, or a narrow phone gets one 300px column and the page a horizontal scroll. */ grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 36px; margin: 1.4em 0 0; } .feature-list > div { padding: 13px 2px; border-top: 1px solid var(--line) } .feature-list dt { font-weight: 600 } .feature-list dt a { color: var(--text) } .feature-list dt a:hover { color: var(--accent); text-decoration: none } .feature-list dd { margin: 3px 0 0; font-size: .9rem; color: var(--muted) } /* ── Components ──────────────────────────────── */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin: 0 0 16px; } .card h1, .card h2 { margin-top: .2em } a.card { color: var(--text) } a.card:hover { border-color: var(--accent); text-decoration: none } .block { display: block; font-weight: 600 } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 14px; margin: 1em 0; } .cards .card { margin: 0 } .cards > .block { text-align: center; padding: 26px 16px } .group-card { display: flex; flex-direction: column; padding: 20px 22px } .group-card .block { font-size: 1.05rem } .group-card p { flex: 1; font-size: .9rem; margin: .4em 0 .8em } .go { color: var(--accent); font-weight: 600; font-size: .9rem } .doc-list { display: flex; flex-direction: column; gap: 10px; margin: 1.2em 0 } .doc-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding: 14px 20px; font-weight: 600; } .doc-link .doc-text { display: flex; flex-direction: column; gap: 2px } .doc-link .doc-text .muted { font-weight: 400; font-size: .88rem } .center-card { max-width: 460px; margin: 10vh auto 0; text-align: center } .form-card { max-width: 560px } .demo { padding: 16px 20px } .demo-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .demo-head code { font-size: .82rem } .demo p { font-size: .88rem; margin: .5em 0 0 } .demo-out { margin: 12px 0 4px; max-height: 340px; overflow: auto } .empty, .muted { color: var(--muted) } .muted { font-weight: 400 } .error { color: var(--danger); font-weight: 500 } .btn { display: inline-block; margin: 0; padding: 9px 18px; background: var(--accent); color: var(--btn-text); border: none; border-radius: 8px; font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; text-decoration: none; transition: background .15s, transform .1s; } .btn:hover { background: var(--accent-hover); text-decoration: none; color: var(--btn-text) } .btn:active { transform: translateY(1px) } .btn:disabled { opacity: .55; cursor: default; transform: none } .btn.small { padding: 5px 14px; font-size: .85rem } .btn.wide { width: 100% } .btn.ghost { background: var(--accent-soft); color: var(--accent) } .btn.ghost:hover { background: var(--line) } .btn.ghost.danger { color: var(--danger) } .btn.ghost.danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent) } /* Cursor pagination: the two arrows sit apart, and the row collapses entirely when a list fits on one page (no empty gap). */ .pager { display: flex; gap: 10px } .pager:empty { display: none } .linklike { background: none; border: none; padding: 0; color: var(--muted); cursor: pointer; font: inherit; text-align: left; transition: color .12s; } .linklike:hover { color: var(--accent) } .toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } /* Data tables: the .table class (admin) and bare inside articles, whose HTML comes from the docs table. */ .table-scroll { overflow-x: auto; margin: .8em 0 1.4em } .table-scroll table { margin: 0 } .table, .article table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: .8em 0 1.4em; } .table th, .table td, .article th, .article td { padding: 9px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-variant-numeric: tabular-nums; } .table th, .article th { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--bg); background: color-mix(in srgb, var(--bg) 55%, var(--panel)); } .table tr:last-child td, .article tr:last-child td { border-bottom: none } .table tbody tr:hover td { background: var(--accent-soft) } /* Edit/delete controls in table rows: real hit areas (30px boxes) instead of bare glyphs; delete tints toward danger so the two never read alike. */ .row-actions { white-space: nowrap; text-align: right } .row-actions a, .row-actions .linklike { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 30px; padding: 0 6px; border-radius: 7px; font-size: 1.05rem; transition: background .12s, color .12s; } .row-actions a:hover { background: var(--accent-soft); text-decoration: none } .row-actions .linklike:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); } .row-actions form { display: inline; margin-left: 4px } .article { padding: 26px 30px; max-width: 74ch; margin-inline: auto } .article h1 { margin: 0 0 .6em } .article p { text-wrap: pretty } .article ol { padding-left: 1.3em } .article ol li { margin: .5em 0; padding-left: .2em } .article img { max-width: 100%; height: auto; border-radius: 8px } /* Long share URLs: keep them on one line, cut with an ellipsis; the full value stays in the href (still copyable via right-click). */ .link-trunc { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } label { display: block; margin: 14px 0 5px; font-weight: 600; font-size: .92rem } .hint { font-size: .85rem; color: var(--muted); margin: -2px 0 8px } /* Text-like inputs everywhere (forms and JS-driven cards alike); checkboxes/radios keep their native box and only pick up the accent. */ input:where(:not([type="checkbox"], [type="radio"], [type="hidden"])), textarea, select { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; color: var(--text); background: var(--bg); transition: border-color .12s; } input:hover, textarea:hover, select:hover { border-color: var(--muted) } input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } input { accent-color: var(--accent) } .mono { font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; font-size: .92rem } .check { display: flex; align-items: center; gap: 8px } .hp { display: none } details summary { cursor: pointer; font-weight: 600; transition: color .12s } details summary:hover { color: var(--accent) } details[open] summary { margin-bottom: 8px } /* ── Admin (CMS) ─────────────────────────────── */ .cms-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; } .cms-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; padding: 18px 14px; background: var(--panel); border-right: 1px solid var(--line); } .cms-side .brand { padding: 4px 10px; margin-bottom: 12px; font-size: 1.05rem } .cms-side nav { display: flex; flex-direction: column; gap: 2px; flex: 1 } .cms-side nav a, .cms-side .side-link { display: block; padding: 8px 10px; border-radius: 8px; color: var(--muted); font-weight: 500; white-space: nowrap; transition: background .12s, color .12s; } .cms-side nav a:hover, .cms-side .side-link:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; } .cms-side nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } /* Bottom of the sidebar: theme switch + site link + sign out, separated from the nav by a hairline. */ .side-foot { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; } .cms-side .linklike { width: 100%; padding: 8px 10px } /* Theme: a three-way segmented control (system / light / dark); the selected segment lifts onto a panel chip in the site accent. */ .theme-pick { display: flex; gap: 2px; margin-bottom: 6px; padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; } .theme-pick button { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: 5px 0; color: var(--muted); background: none; border: 0; border-radius: 7px; cursor: pointer; transition: background .12s, color .12s; } .theme-pick button:hover { color: var(--accent) } .theme-pick button[aria-pressed="true"] { color: var(--accent); background: var(--panel); box-shadow: 0 1px 2px rgb(0 0 0 / .12); } .cms-main { padding: 22px 32px 48px; max-width: 960px; width: 100% } /* Dashboard quick actions: one primary, the rest quiet */ .quick { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.2em 0 1.8em } /* Key/value list (MCP token card): label column + wrapping value column */ .kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 1em 0 } .kv dt { font-weight: 600; font-size: .88rem; color: var(--muted) } .kv dd { margin: 0; overflow-wrap: anywhere } .auth-wrap { max-width: 400px; margin: 10vh auto 0; padding: 0 18px } .auth-wrap h1 { text-align: center } /* ── Mobile ──────────────────────────────────── */ @media (max-width: 720px) { .wrap { margin-top: 14px } .hero { padding-top: 18px } .hero-actions { flex-wrap: wrap } .cms-body { grid-template-columns: 1fr } .cms-side { position: sticky; top: 0; z-index: 10; height: auto; flex-direction: row; align-items: center; overflow-x: auto; padding: 8px 12px; border-right: none; border-bottom: 1px solid var(--line); } .cms-side .brand { margin: 0 6px 0 0 } .cms-side nav { flex-direction: row; flex: 1 } .side-foot { flex-direction: row; align-items: center; border-top: none; padding-top: 0; margin-top: 0; } .cms-side .linklike { width: auto } .theme-pick { margin-bottom: 0 } .theme-pick button { padding: 5px 7px } .cms-main { padding: 16px 16px 40px } .auth-wrap { margin-top: 6vh } } /* Sticky footer: the body fills the viewport and the footer sits at its bottom even when the content is short. The admin overrides display back to grid (.cms-body wins on specificity), auth pages center as before. */ body { display: flex; flex-direction: column; min-height: 100vh } .wrap { flex: 1; width: 100% } @media (prefers-reduced-motion: reduce) { .btn:active, .pick-btn:active, .burger:active { transform: none } }