{siteTitle || brand.siteName}
@@ -37,15 +40,10 @@ const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute;
}
.docs-mark {
- display: inline-flex;
+ display: block;
flex: none;
- width: 30px;
- height: 30px;
- color: var(--gold);
- }
-
- :global(:root[data-theme='light']) .docs-mark {
- color: var(--light-gold);
+ width: 32px;
+ height: 32px;
}
span:last-child {
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 045a5cf..9137add 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,11 +1,20 @@
---
import { brand } from '../lib/brand.mjs';
-import Mark from '../assets/placeholder-mark.svg?raw';
/**
* The marketing header. The docs get Starlight's own header, themed to match in
* `src/styles/starlight.css` — one site, two chromes, the same lockup.
*
+ * The mark is the product's real emblem (D11), served from the brand mount rather than
+ * imported: the same artwork as the website's own logo and the Android launcher icon, so
+ * the three surfaces read as one product. Phase 1's placeholder glyph is gone.
+ *
+ * It is an `
-
+ 
{brand.siteName}
@@ -42,8 +59,9 @@ const isCurrent = (href: string) =>
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index f8d042e..2dab2c3 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -35,6 +35,10 @@ const canonical = new URL(Astro.url.pathname, Astro.site);
+
+
+
+
+
+
+
+
+
+
+
+
+
.` — the header and hero variants. */
+const SIZED = /^logo-(\d{1,4})\.(webp|avif|png)$/;
+
+/**
+ * Describes what a requested name means, or returns null if it means nothing.
+ * Names are flat by construction: a `/` or a `..` never reaches here (see `parseName`).
+ */
+export function classify(name) {
+ if (STATIC_FILES.has(name)) return { kind: 'static', name };
+ if (NAMED_DERIVATIVES[name]) return { kind: 'derived', name, ...NAMED_DERIVATIVES[name] };
+
+ const sized = SIZED.exec(name);
+ if (sized) {
+ const size = Number(sized[1]);
+ if (DERIVABLE_SIZES.has(size)) return { kind: 'derived', name, size, format: sized[2] };
+ }
+
+ return null;
+}
+
+/**
+ * Rejects anything that is not a single flat filename.
+ *
+ * Path traversal is the obvious reason, and it is not the only one: this route reads from
+ * a directory an operator controls but does not audit, so "one segment, lowercase, from
+ * the allowlist" is a much smaller thing to be sure of than "no `..` anywhere".
+ */
+export function parseName(rest) {
+ const name = (rest || '').replace(/^\/+/, '');
+ if (!name || !/^[a-z0-9][a-z0-9._-]*$/.test(name) || name.includes('..')) return null;
+ return name;
+}
+
+async function statOrNull(file) {
+ try {
+ const info = await stat(file);
+ return info.isFile() ? info : null;
+ } catch {
+ return null;
+ }
+}
+
+/**
+ * Where a given file comes from, mount first. Returns null when neither directory has it —
+ * which for a derivable name is not an error, it just means "derive it".
+ */
+async function locate(name) {
+ const mounted = path.join(MOUNT_DIR, name);
+ const info = await statOrNull(mounted);
+ if (info) return { file: mounted, info, source: 'mount' };
+
+ const fallback = path.join(DEFAULT_DIR, name);
+ const defaultInfo = await statOrNull(fallback);
+ if (defaultInfo) return { file: fallback, info: defaultInfo, source: 'default' };
+
+ return null;
+}
+
+/**
+ * The raster every derivative descends from.
+ *
+ * `logo.svg` is second rather than first because it is the rarer case and the PNG is what
+ * §7's table calls the emblem; an operator who mounts both means the PNG. An operator who
+ * mounts only the SVG gets it rasterised, which is better than getting the stock mark.
+ */
+async function locateSource() {
+ for (const candidate of ['logo.png', 'logo.svg']) {
+ const mounted = path.join(MOUNT_DIR, candidate);
+ const info = await statOrNull(mounted);
+ if (info) return { file: mounted, info, source: 'mount' };
+ }
+
+ const fallback = path.join(DEFAULT_DIR, 'logo.png');
+ const info = await statOrNull(fallback);
+ return info ? { file: fallback, info, source: 'default' } : null;
+}
+
+/**
+ * A cache key that changes when the file behind it changes.
+ *
+ * §7 says a rebrand is a file copy and a restart, and a restart empties this map — so
+ * strictly the mtime is redundant. It is here because the failure it prevents is the
+ * confusing one: an operator who copies a new logo in without restarting should see either
+ * the old mark or the new one, never a header showing the new mark beside a favicon still
+ * derived from the old.
+ */
+function signature({ file, info }) {
+ return `${file}:${info.mtimeMs}:${info.size}`;
+}
+
+/** name -> { bytes, etag, type, source } */
+const cache = new Map();
+
+const etagOf = (bytes) => `"${createHash('sha256').update(bytes).digest('base64url').slice(0, 24)}"`;
+
+/**
+ * Minimal ICO container.
+ *
+ * `favicon.ico` is in §7's table and sharp cannot write the format, but an .ico is barely a
+ * format: a six-byte header, a sixteen-byte directory entry per image, and — since Vista —
+ * ordinary PNG payloads. Writing those forty bytes is cheaper than a dependency, and it is
+ * what lets `/favicon.ico`, which browsers request whether or not a page links it, answer
+ * with the operator's mark rather than a 404.
+ */
+function encodeIco(images) {
+ const header = Buffer.alloc(6);
+ header.writeUInt16LE(0, 0); // reserved
+ header.writeUInt16LE(1, 2); // 1 = icon
+ header.writeUInt16LE(images.length, 4);
+
+ const directory = Buffer.alloc(16 * images.length);
+ let offset = header.length + directory.length;
+
+ images.forEach(({ size, bytes }, i) => {
+ const at = i * 16;
+ directory.writeUInt8(size >= 256 ? 0 : size, at); // 0 means 256
+ directory.writeUInt8(size >= 256 ? 0 : size, at + 1);
+ directory.writeUInt8(0, at + 2); // palette size, 0 for truecolour
+ directory.writeUInt8(0, at + 3); // reserved
+ directory.writeUInt16LE(1, at + 4); // colour planes
+ directory.writeUInt16LE(32, at + 6); // bits per pixel
+ directory.writeUInt32LE(bytes.length, at + 8);
+ directory.writeUInt32LE(offset, at + 12);
+ offset += bytes.length;
+ });
+
+ return Buffer.concat([header, directory, ...images.map((image) => image.bytes)]);
+}
+
+/**
+ * Rasterise at the target size. An SVG source needs the density raised to match, otherwise
+ * librsvg renders it at its nominal size and sharp scales the result up.
+ */
+async function rasterise(source, size) {
+ const isSvg = source.file.endsWith('.svg');
+ const bytes = await readFile(source.file);
+
+ if (!isSvg) return sharp(bytes).resize(size, size, { fit: 'contain', background: TRANSPARENT });
+
+ const nominal = (await sharp(bytes).metadata()).width || size;
+ return sharp(bytes, { density: Math.min(2400, Math.max(72, (72 * size) / nominal)) })
+ .resize(size, size, { fit: 'contain', background: TRANSPARENT });
+}
+
+const TRANSPARENT = { r: 0, g: 0, b: 0, alpha: 0 };
+
+async function derive(spec, source) {
+ if (spec.name === 'favicon.ico') {
+ const images = await Promise.all(
+ [16, 32, 48].map(async (size) => ({
+ size,
+ bytes: await (await rasterise(source, size)).png({ compressionLevel: 9 }).toBuffer(),
+ }))
+ );
+ return encodeIco(images);
+ }
+
+ const pipeline = await rasterise(source, spec.size);
+
+ if (spec.format === 'webp') return pipeline.webp({ quality: 90, effort: 5 }).toBuffer();
+ if (spec.format === 'avif') return pipeline.avif({ quality: 62, effort: 4 }).toBuffer();
+ return pipeline.png({ compressionLevel: 9 }).toBuffer();
+}
+
+/**
+ * Resolve a brand file to bytes: mount, then defaults, then derivation.
+ *
+ * Returns null for a name that is not a brand file at all, so the caller answers 404
+ * rather than leaking which of the three steps failed.
+ */
+export async function resolveBrandFile(name) {
+ const spec = classify(name);
+ if (!spec) return null;
+
+ const found = await locate(name);
+
+ // A mounted or stock file always wins over a derivation. An operator who has produced a
+ // hand-tuned 32px favicon should get theirs, not one this code resized.
+ if (found) {
+ const key = `file:${signature(found)}`;
+ const hit = cache.get(name);
+ if (hit?.key === key) return hit;
+
+ const bytes = await readFile(found.file);
+ const entry = {
+ key,
+ bytes,
+ etag: etagOf(bytes),
+ type: CONTENT_TYPES[path.extname(name)] || 'application/octet-stream',
+ source: found.source,
+ };
+ cache.set(name, entry);
+ return entry;
+ }
+
+ if (spec.kind !== 'derived') return null;
+
+ const source = await locateSource();
+ if (!source) return null;
+
+ const key = `derive:${signature(source)}`;
+ const hit = cache.get(name);
+ if (hit?.key === key) return hit;
+
+ const bytes = await derive(spec, source);
+ const entry = {
+ key,
+ bytes,
+ etag: etagOf(bytes),
+ type: CONTENT_TYPES[path.extname(name)] || 'application/octet-stream',
+ source: `derived:${source.source}`,
+ };
+ cache.set(name, entry);
+ return entry;
+}
+
+/**
+ * The variants every page requests, derived ahead of the first visitor.
+ *
+ * Called when the route module is first loaded, not at process start — Astro loads a route
+ * lazily — so in practice the first request to anything under `/brand/` pays for its own
+ * file and warms the rest in the background. That is the difference between one slow
+ * request and eight.
+ */
+export function warmCache() {
+ const names = [
+ 'logo-40.webp',
+ 'logo-80.webp',
+ 'logo-120.webp',
+ 'favicon-32.png',
+ 'favicon.ico',
+ 'apple-touch-icon.png',
+ ];
+ return Promise.allSettled(names.map((name) => resolveBrandFile(name)));
+}
+
+/** For the checks and the smoke test, which assert on what a request WOULD produce. */
+export const brandDirs = { mount: MOUNT_DIR, defaults: DEFAULT_DIR };
diff --git a/src/pages/brand/[...file].ts b/src/pages/brand/[...file].ts
new file mode 100644
index 0000000..1006e1b
--- /dev/null
+++ b/src/pages/brand/[...file].ts
@@ -0,0 +1,72 @@
+import type { APIRoute } from 'astro';
+
+import { parseName, resolveBrandFile, warmCache } from '../../lib/brandAssets.mjs';
+
+/**
+ * `GET /brand/*` — the bind-mounted branding (PLAN.md §7).
+ *
+ * This is one of exactly two routes on the site that execute per request; the other is the
+ * beta signup in phase 5. Everything else is prerendered, which is why the config comment
+ * in `astro.config.mjs` describes opting OUT rather than in.
+ *
+ * It has to be dynamic. The whole point of §7 is that these bytes come from a directory
+ * that did not exist when the image was built, so there is nothing to prerender: a build
+ * that baked them in would be a build that has to be repeated to change a logo.
+ */
+export const prerender = false;
+
+// Warm the variants every page asks for, so the first visitor pays for one derivation
+// rather than eight. Fire and forget: a failure here is a cache miss, not an error.
+void warmCache();
+
+export const GET: APIRoute = async ({ params, request }) => {
+ const name = parseName(params.file);
+ if (!name) return new Response('Not found', { status: 404 });
+
+ let file;
+ try {
+ file = await resolveBrandFile(name);
+ } catch (error) {
+ // A mounted file that is not what it claims to be — a truncated PNG, a text file named
+ // logo.png — must not take the page down with it. The brand is decoration; the site
+ // still works without it, and the operator gets a log line naming the file.
+ console.error(`[brand] could not serve ${name}:`, error);
+ return new Response('Not found', { status: 404 });
+ }
+
+ if (!file) return new Response('Not found', { status: 404 });
+
+ // Revalidation is what makes the short TTL affordable: browsers keep the bytes and ask
+ // only whether they changed, so the common case is a 304 with no body.
+ if (request.headers.get('if-none-match') === file.etag) {
+ return new Response(null, {
+ status: 304,
+ headers: { ETag: file.etag, 'Cache-Control': CACHE_CONTROL },
+ });
+ }
+
+ return new Response(file.bytes, {
+ status: 200,
+ headers: {
+ 'Content-Type': file.type,
+ 'Content-Length': String(file.bytes.length),
+ ETag: file.etag,
+ 'Cache-Control': CACHE_CONTROL,
+ // Which of the three resolution steps answered. The mount is the one part of this
+ // site an operator configures by hand and cannot see the result of from the outside;
+ // this turns "the logo did not change" from a guess into one curl.
+ 'X-Brand-Source': file.source,
+ },
+ });
+};
+
+/**
+ * Five minutes, not a year.
+ *
+ * These URLs are deliberately unhashed (§7 — a fingerprinted filename could never be
+ * replaced by a mounted file), so a long max-age would mean an operator swapping a logo and
+ * being told by every already-warm browser that nothing had happened. Five minutes plus
+ * revalidation costs one conditional request per asset per five minutes and bounds how
+ * wrong a stale cache can be.
+ */
+const CACHE_CONTROL = 'public, max-age=300, must-revalidate';
diff --git a/src/pages/manifest.webmanifest.ts b/src/pages/manifest.webmanifest.ts
new file mode 100644
index 0000000..5a64b71
--- /dev/null
+++ b/src/pages/manifest.webmanifest.ts
@@ -0,0 +1,45 @@
+import type { APIRoute } from 'astro';
+
+import { brand } from '../lib/brand.mjs';
+import { token } from '../lib/tokens.mjs';
+
+/**
+ * The web app manifest.
+ *
+ * It exists because §7's table lists `icon-192.png` and `icon-512.png` as brand files, and
+ * without a manifest nothing ever asks for them — an installed-icon size that no document
+ * references is a file the operator maintains for nobody.
+ *
+ * Prerendered like every other page: the icon URLs it points at are stable and unhashed, so
+ * the manifest does not change when the icons behind them do. The two strings that CAN
+ * change — the name and the description — are handled the same way as the HTML, by
+ * `scripts/applyBrand.mjs` at boot, which is why that script rewrites `.webmanifest` as
+ * well as `.html`.
+ */
+export const GET: APIRoute = () =>
+ new Response(
+ JSON.stringify(
+ {
+ name: brand.siteName,
+ short_name: brand.siteName,
+ description: brand.tagline,
+ start_url: '/',
+ scope: '/',
+ display: 'standalone',
+ background_color: token('--bg'),
+ theme_color: token('--bg'),
+ icons: [
+ { src: '/brand/icon-192.png', sizes: '192x192', type: 'image/png' },
+ { src: '/brand/icon-512.png', sizes: '512x512', type: 'image/png' },
+ // `purpose: maskable` is a promise that the mark survives being cropped to a
+ // circle or a squircle. `buildBrandAssets.mjs` insets the emblem inside its
+ // canvas for exactly this, but the promise is only true for the STOCK logo — an
+ // operator who mounts edge-to-edge artwork would get it clipped on Android, so
+ // the declaration stays off until the site can know what it is shipping.
+ ],
+ },
+ null,
+ 2
+ ),
+ { headers: { 'Content-Type': 'application/manifest+json; charset=utf-8' } }
+ );
diff --git a/src/styles/global.css b/src/styles/global.css
index 19e3221..214abc8 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -168,8 +168,8 @@ svg {
}
.brand-lockup__mark {
- width: 32px;
- height: 32px;
+ width: 40px;
+ height: 40px;
flex: none;
}
@@ -332,3 +332,22 @@ svg {
border-color: color-mix(in srgb, var(--mode-live) 55%, transparent);
color: var(--mode-live);
}
+
+/* ---- The demo slot -------------------------------------------------------
+ PLAN.md §15 / D12. A public demo instance is planned and out of scope, but
+ the site is built so that gaining one is a line in the mounted brand.json
+ rather than a rebuild — the same class of change as swapping a logo (§7).
+
+ Anything carrying `data-demo-url` is hidden while that attribute is empty,
+ which is the state a stock build ships in. `scripts/applyBrand.mjs` fills
+ both the attribute and the adjacent empty `href` at boot when the mount sets
+ `demoUrl`, and the element appears. The markup contract is:
+
+ See it running
+
+ Written here, before phase 3 writes that markup, because the rule and the
+ rewrite have to agree and they live in different files. */
+
+[data-demo-url=''] {
+ display: none;
+}
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index 893708c..b557495 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -17,113 +17,133 @@
concepts line up, so a theme written for a Runic Gateway deployment is
legible here and vice versa (§7, §11).
+
+ ----------------------------------------------------------------------------
+ WHY EVERYTHING BELOW IS INSIDE `@layer tokens`
+
+ The mounted `theme.css` beats these definitions because they are in a cascade
+ layer and it is not: unlayered CSS wins over layered CSS no matter which one
+ the browser saw first.
+
+ The first version relied on the `` order instead, and it did not work.
+ Astro emits its own bundled stylesheet AFTER the links written in the page's
+ head, so the site's tokens landed after the operator's and every override was
+ silently a no-op. Depending on the order of two `:root` blocks of identical
+ specificity was the fragile part; the layer removes the dependency.
+
+ Only this file is layered. The rest of the stylesheet consumes these values
+ through `var()` and never competes with them.
+ ----------------------------------------------------------------------------
-------------------------------------------------------------------------- */
-:root {
- /* ---- Ground and panels -------------------------------------------------
- Taken unchanged from the product's token file. Same bytes, same names. */
- --bg: #0e1318;
- --bg-deep: #0b0f14;
- --panel-a: #192231;
- --panel-b: #141a21;
- --panel-flat: #11161d;
- --line: #2a3544;
- --line-soft: #1d2733;
+@layer tokens {
- /* ---- Interface and type ------------------------------------------------
- Also the product's, unchanged. `--accent` is the steel blue that carries
- links and interface emphasis across both sites. */
- --accent: #7f99bd;
- --accent-bright: #cdd9e8;
- --ink: #eef3f8;
- --head: #e6edf6;
- --text: #c4cdd8;
- --muted: #aeb8c4;
- --dim: #6f7d8e;
- --blue: #13243c;
+ :root {
+ /* ---- Ground and panels -------------------------------------------------
+ Taken unchanged from the product's token file. Same bytes, same names. */
+ --bg: #0e1318;
+ --bg-deep: #0b0f14;
+ --panel-a: #192231;
+ --panel-b: #141a21;
+ --panel-flat: #11161d;
+ --line: #2a3544;
+ --line-soft: #1d2733;
- /* ---- Status ------------------------------------------------------------
- Reused verbatim from the product so a status pill means the same thing on
- both sites (§11). */
- --mode-live: #5fb98a;
- --mode-maint: #e6c26a;
+ /* ---- Interface and type ------------------------------------------------
+ Also the product's, unchanged. `--accent` is the steel blue that carries
+ links and interface emphasis across both sites. */
+ --accent: #7f99bd;
+ --accent-bright: #cdd9e8;
+ --ink: #eef3f8;
+ --head: #e6edf6;
+ --text: #c4cdd8;
+ --muted: #aeb8c4;
+ --dim: #6f7d8e;
+ --blue: #13243c;
- /* ---- The emblem's own palette ------------------------------------------
- §11: gold and cyan as the accent pair, "derived from the artwork by
- sampling, not guessed, and both held to WCAG AA against the ground".
+ /* ---- Status ------------------------------------------------------------
+ Reused verbatim from the product so a status pill means the same thing on
+ both sites (§11). */
+ --mode-live: #5fb98a;
+ --mode-maint: #e6c26a;
- Sampled from `runic-emblem.png` (1024x1024, 494,059 opaque pixels) by
- binning every saturated pixel by hue and taking the mean of each bin. The
- contrast ratio after each value is measured against `--bg` (#0e1318).
- AA wants 4.5:1 for body text and 3:1 for large text and UI boundaries, so
- the annotation is also the usage rule. Nothing here was nudged for taste;
- where a sampled value fails a ratio it is restricted, not brightened. */
+ /* ---- The emblem's own palette ------------------------------------------
+ §11: gold and cyan as the accent pair, "derived from the artwork by
+ sampling, not guessed, and both held to WCAG AA against the ground".
- /* Hue 25-45deg — the ring. 65% of the emblem's saturated pixels. */
- --gold-deep: #946b3c; /* 3.94:1 — rules, borders, UI edges. NEVER text. */
- --gold: #c8a368; /* 7.91:1 — emphasis text, headings, the mark. */
- --gold-bright: #e4cb90; /* 11.77:1 — highlights on gold surfaces. */
+ Sampled from `runic-emblem.png` (1024x1024, 494,059 opaque pixels) by
+ binning every saturated pixel by hue and taking the mean of each bin. The
+ contrast ratio after each value is measured against `--bg` (#0e1318).
+ AA wants 4.5:1 for body text and 3:1 for large text and UI boundaries, so
+ the annotation is also the usage rule. Nothing here was nudged for taste;
+ where a sampled value fails a ratio it is restricted, not brightened. */
- /* Hue 180-210deg — the portal and its glow. */
- --portal-deep: #0b6398; /* 2.89:1 — glow fills and gradients only. */
- --portal: #15b4de; /* 7.66:1 — the live-state signal, diagram lines. */
- --portal-bright: #1bd6f1; /* 10.61:1 — the portal core, focus rings. */
+ /* Hue 25-45deg — the ring. 65% of the emblem's saturated pixels. */
+ --gold-deep: #946b3c; /* 3.94:1 — rules, borders, UI edges. NEVER text. */
+ --gold: #c8a368; /* 7.91:1 — emphasis text, headings, the mark. */
+ --gold-bright: #e4cb90; /* 11.77:1 — highlights on gold surfaces. */
- /* Hue 0deg — the ruby set into the ring. The only red in the artwork, so it
- is the honest source for a destructive/error colour. */
- --danger: #ff4e43; /* 5.71:1 */
+ /* Hue 180-210deg — the portal and its glow. */
+ --portal-deep: #0b6398; /* 2.89:1 — glow fills and gradients only. */
+ --portal: #15b4de; /* 7.66:1 — the live-state signal, diagram lines. */
+ --portal-bright: #1bd6f1; /* 10.61:1 — the portal core, focus rings. */
- /* ---- Type --------------------------------------------------------------
- Both self-hosted (§11), so §6's `default-src 'self'` needs no exception.
- Cinzel is the project's display face and is already the Android app's;
- it is confined to the wordmark and hero. Inter carries everything else. */
- --display: 'Cinzel Variable', Georgia, 'Times New Roman', serif;
- --sans: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
- --mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
+ /* Hue 0deg — the ruby set into the ring. The only red in the artwork, so it
+ is the honest source for a destructive/error colour. */
+ --danger: #ff4e43; /* 5.71:1 */
- /* ---- Radius ------------------------------------------------------------
- Named by the kind of surface rather than the pixel value, matching the
- product's promotion of the same four tokens. */
- --radius-pill: 999px;
- --radius-panel: 12px;
- --radius-card: 10px;
- --radius-input: 8px;
+ /* ---- Type --------------------------------------------------------------
+ Both self-hosted (§11), so §6's `default-src 'self'` needs no exception.
+ Cinzel is the project's display face and is already the Android app's;
+ it is confined to the wordmark and hero. Inter carries everything else. */
+ --display: 'Cinzel Variable', Georgia, 'Times New Roman', serif;
+ --sans: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
+ --mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
- /* ---- Elevation and surface treatments ---------------------------------- */
- --shadow-card: 0 14px 34px rgb(0 0 0 / 30%);
- --shadow-raised: 0 22px 48px rgb(0 0 0 / 38%);
- --panel-grad: linear-gradient(180deg, var(--panel-a), var(--panel-b));
- --glow-portal: 0 0 32px rgb(21 180 222 / 22%);
+ /* ---- Radius ------------------------------------------------------------
+ Named by the kind of surface rather than the pixel value, matching the
+ product's promotion of the same four tokens. */
+ --radius-pill: 999px;
+ --radius-panel: 12px;
+ --radius-card: 10px;
+ --radius-input: 8px;
- /* ---- Layout ------------------------------------------------------------
- Here rather than in global.css so a theme can widen the measure without
- touching the stylesheet. */
- --measure: 68ch;
- --page-max: 1180px;
- --gutter: 24px;
- --header-h: 68px;
-}
-
-/* ---- Light mode, docs only ----------------------------------------------
- §11: marketing pages are single-theme by design; the docs honour the
- reader's light/dark preference. Starlight ships an accessible light theme,
- so this is not a second palette — it is the four brand colours restated at
- the lightness a white ground needs, plus the surfaces Starlight tints.
-
- Same hues as the dark set, darkened rather than re-picked, with the
- contrast against `--light-bg` measured the same way. They live here, in the
- token file, because that is the rule: a literal anywhere else fails
- `checkTokens.mjs`, and a bind-mounted `theme.css` must be able to reach
- these too. */
-:root {
- --light-bg: #f6f8fb;
- --light-panel: #ffffff;
- --light-line: #d6dee9;
- --light-ink: #16202c;
- --light-text: #33414f;
- --light-muted: #5a6875;
-
- --light-accent: #3c5f8f; /* 6.12:1 — the steel blue, darkened for links */
- --light-gold: #7a5a24; /* 5.95:1 — the ring, darkened for emphasis */
- --light-portal: #0a5f80; /* 6.67:1 — the portal, darkened for diagrams */
+ /* ---- Elevation and surface treatments ---------------------------------- */
+ --shadow-card: 0 14px 34px rgb(0 0 0 / 30%);
+ --shadow-raised: 0 22px 48px rgb(0 0 0 / 38%);
+ --panel-grad: linear-gradient(180deg, var(--panel-a), var(--panel-b));
+ --glow-portal: 0 0 32px rgb(21 180 222 / 22%);
+
+ /* ---- Layout ------------------------------------------------------------
+ Here rather than in global.css so a theme can widen the measure without
+ touching the stylesheet. */
+ --measure: 68ch;
+ --page-max: 1180px;
+ --gutter: 24px;
+ --header-h: 68px;
+ }
+
+ /* ---- Light mode, docs only ----------------------------------------------
+ §11: marketing pages are single-theme by design; the docs honour the
+ reader's light/dark preference. Starlight ships an accessible light theme,
+ so this is not a second palette — it is the four brand colours restated at
+ the lightness a white ground needs, plus the surfaces Starlight tints.
+
+ Same hues as the dark set, darkened rather than re-picked, with the
+ contrast against `--light-bg` measured the same way. They live here, in the
+ token file, because that is the rule: a literal anywhere else fails
+ `checkTokens.mjs`, and a bind-mounted `theme.css` must be able to reach
+ these too. */
+ :root {
+ --light-bg: #f6f8fb;
+ --light-panel: #ffffff;
+ --light-line: #d6dee9;
+ --light-ink: #16202c;
+ --light-text: #33414f;
+ --light-muted: #5a6875;
+
+ --light-accent: #3c5f8f; /* 6.12:1 — the steel blue, darkened for links */
+ --light-gold: #7a5a24; /* 5.95:1 — the ring, darkened for emphasis */
+ --light-portal: #0a5f80; /* 6.67:1 — the portal, darkened for diagrams */
+ }
}
{brand.siteName}
@@ -42,8 +59,9 @@ const isCurrent = (href: string) =>
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index f8d042e..2dab2c3 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -35,6 +35,10 @@ const canonical = new URL(Astro.url.pathname, Astro.site);
+
+
+
+
+
+
+
+
+
+
+
+
+