From 340a182e8ab56e26f92aaff417d798edb95b8a97 Mon Sep 17 00:00:00 2001 From: Meta Vens Date: Fri, 2 Oct 2026 19:14:46 +0200 Subject: [PATCH] Wash home only: --gamecult-wash scales every ground radial; 1 on / and 0.5 elsewhere body declares --gamecult-wash: 0.5 and body[data-slug="index"] sets it to 1. The three body radials and the three ritual-essay radials keep their literal alphas, multiplied by the token, so the home ground is unchanged and every other page is half. The brand note shows the calc form and names the token. Co-Authored-By: Claude Opus 5.5 --- docs/brand-design-language.md | 10 +++++++--- site/quartz/styles/custom.scss | 18 ++++++++++++------ 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/docs/brand-design-language.md b/docs/brand-design-language.md index 353fb0e..02e477b 100644 --- a/docs/brand-design-language.md +++ b/docs/brand-design-language.md @@ -72,12 +72,16 @@ background, so it does not borrow a host page's ground. three coloured radials over a vertical gradient: ```scss -radial-gradient(circle at 78% 14%, rgba(255,138,42,.18), transparent 18%) // orange -radial-gradient(circle at 18% 10%, rgba(109,96,255,.16), transparent 24%) // violet -radial-gradient(circle at 52% 0%, rgba( 89,183,255,.14), transparent 28%) // blue +radial-gradient(circle at 78% 14%, rgb(255 138 42 / calc(.18 * var(--gamecult-wash))), transparent 18%) // orange +radial-gradient(circle at 18% 10%, rgb(109 96 255 / calc(.16 * var(--gamecult-wash))), transparent 24%) // violet +radial-gradient(circle at 52% 0%, rgb( 89 183 255 / calc(.14 * var(--gamecult-wash))), transparent 28%) // blue linear-gradient(180deg, #03070d 0%, #07111a 44%, #09141f 100%) ``` +The radials' intensity is `--gamecult-wash` on `body`: 1 on `/` and 0.5 +elsewhere. A page never sets its own radial alpha; the CSS wash is the fallback +ground if a shader ever paints it. + Note the violet `#6d60ff` appears **only** here — it is not a config token, and it is the reason the top of the page reads warmer and more atmospheric than a flat navy would. Reproducing the brand with a flat `#07111a` background loses diff --git a/site/quartz/styles/custom.scss b/site/quartz/styles/custom.scss index 88d1279..272c582 100644 --- a/site/quartz/styles/custom.scss +++ b/site/quartz/styles/custom.scss @@ -11,23 +11,29 @@ body { background: radial-gradient( circle at 78% 14%, - rgba(255, 138, 42, 0.18), + rgb(255 138 42 / calc(0.18 * var(--gamecult-wash))), transparent 18% ), radial-gradient( circle at 18% 10%, - rgba(109, 96, 255, 0.16), + rgb(109 96 255 / calc(0.16 * var(--gamecult-wash))), transparent 24% ), radial-gradient( circle at 52% 0%, - rgba(89, 183, 255, 0.14), + rgb(89 183 255 / calc(0.14 * var(--gamecult-wash))), transparent 28% ), linear-gradient(180deg, #03070d 0%, #07111a 44%, #09141f 100%); color: var(--darkgray); /* The hairline the site groups with, on the top edge of a section or row. */ --gamecult-rule: rgba(148, 163, 184, 0.22); + /* The ground's radial intensity; 1 on the home page. */ + --gamecult-wash: 0.5; +} + +body[data-slug="index"] { + --gamecult-wash: 1; } .page { @@ -119,9 +125,9 @@ body[data-slug="Blog/witness-authoritative-networking"] { --ritual-paper-glow: #e9f5ff; background: - radial-gradient(circle at 78% 8%, rgba(255, 178, 30, 0.15), transparent 24rem), - radial-gradient(circle at 18% 4%, rgba(49, 88, 255, 0.22), transparent 30rem), - radial-gradient(circle at 44% 20%, rgba(91, 54, 184, 0.19), transparent 34rem), + radial-gradient(circle at 78% 8%, rgb(255 178 30 / calc(0.15 * var(--gamecult-wash))), transparent 24rem), + radial-gradient(circle at 18% 4%, rgb(49 88 255 / calc(0.22 * var(--gamecult-wash))), transparent 30rem), + radial-gradient(circle at 44% 20%, rgb(91 54 184 / calc(0.19 * var(--gamecult-wash))), transparent 34rem), linear-gradient(180deg, #030414, #070b24 42%, #040514); .page > #quartz-body {