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 {