/* Autoproperty documents · grounds (lab/grounds.html, kit/parts/grounds.json). Load after ap-doc.css. Light is the brand's material. Every ground is the Ember's construction: one base colour and at most three soft radial glows, all from the DS ramps in library/tokens.css (DS docs/02, Gradients README). Since the round-5 finish (BRIEF § 11.14.3) every ground has one placeable light: glow 1 is the light and glow 2 its same-hue core, both centred at --light-x/--light-y with radii --light-w/--light-h (default about 76 % 46 %, radii 35 % 44 %: the right half, clear of the left text column and the foot band); glow 3 is an ink shade on dark grounds and nothing on light ones (no floor glows). Put the light behind the page's subject and keep words out of it; `.is-flip` mirrors it. Glows interpolate in oklab (hex mixes in gamma sRGB otherwise and the middle goes grey) and ease their alpha over nine stops, so there is no ring and no hard rim. Glow boxes are whole pixels after the page zoom (`round()` of the size times `--pz`, with the plain value first as the fallback): Chromium's PDF output rasterises a gradient whose printed box is fractional (1459,2 px) and keeps a whole one (1440 px) as vector shading. Every ground has a matching `.on-` palette with the whole token set, so text, lines, the logo's knob, charts and the accent stay right in any theme and in print. Grounds go on covers, chapter openers, moments and the close; never under a chart, a table or text to read closely. Markup:
…
A ground inside a card (an island on any page):
… Every ground names its light (`--ground-light`); .apd-glow and .apd-halo take the light of the ground they sit on. */ :root { --ground-light: #e9d3b8; --glow-a: 80%; --red-a: 90%; } /* warm ochre on paper (never blush or coral on light pages) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground-light: #c79a60; --glow-a: 46%; --red-a: 55%; } } :root[data-theme="dark"] { --ground-light: #c79a60; --glow-a: 46%; --red-a: 55%; } /* warm on the dark page; red only with .is-red */ @media print { :root, :root:not([data-theme="x"]), :root[data-theme] { --ground-light: #e9d3b8; --glow-a: 80%; --red-a: 90%; } } /* ---------- modifiers for any ground (including the kit's Ember and Haze) ---------- */ /* .is-flip mirrors each glow's offsets (left ↔ right) so the light sits on the other side; no transform (a transformed layer is what dropped bands in the PDF). */ /* Grain: a 128 px grey noise tile (PNG, seed 1101) at 3,5 %. It dithers the 8-bit steps of a slow dark ramp on screen and in PDF viewers; the PDF keeps the glows as vector shading and embeds the tile once (about 38 KB). An SVG feTurbulence grain was rasterised to a full-page image instead (1,4 MB a page), so it is not used. */ :root { --apd-noise: url("data:image/png;base64,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"); } .apd-ground.is-grain::after { content: ""; position: absolute; inset: 0; z-index: 2; opacity: var(--grain, .035); background-size: 128px 128px; background-image: var(--apd-noise); } /* The kit's Ember (ap-doc.css): its DS geometry and colours stay (the brand ground for covers and the ask; red light, so never under good news). Round 5: its stone floor glow goes (a grey smudge), and .is-flip mirrors its two lights. */ .apd-ground.ember i:nth-child(3) { display: none; } .apd-ground.ember.is-flip i:nth-child(1) { left: -32%; right: auto; } .apd-ground.ember.is-flip i:nth-child(2) { left: -24%; right: auto; } /* ---------- dark grounds ---------- */ /* Ink glow: the website's night, for needs-you chapters. Ink with the Ember's light on the subject: a red-800 field and an ember-glow core. Light at --light-x/--light-y (default 76 % 46 %), radii --light-w/--light-h (default 35 % 44 %). */ .apd-ground.ink-glow { background: #0a0a0a; } .apd-ground.ink-glow i:nth-child(1) { width: calc(var(--light-w, 35%) * 2.0); width: calc(round(calc(calc(var(--light-w, 35%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 44%) * 2.0); height: calc(round(calc(calc(var(--light-h, 44%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 76%) - var(--light-w, 35%) * 1.0); top: calc(var(--light-y, 46%) - var(--light-h, 44%) * 1.0); background: radial-gradient(closest-side in oklab, rgb(115 41 38 / 0.85), rgb(115 41 38 / 0.748) 10%, rgb(115 41 38 / 0.578) 22%, rgb(79 26 24 / 0.5) 40%, rgb(79 26 24 / 0.36) 54%, rgb(79 26 24 / 0.22) 68%, rgb(79 26 24 / 0.1) 82%, rgb(79 26 24 / 0.03) 93%, rgb(79 26 24 / 0) 100%); } .apd-ground.ink-glow.is-flip i:nth-child(1) { left: calc(100% - var(--light-x, 76%) - var(--light-w, 35%) * 1.0); } .apd-ground.ink-glow i:nth-child(2) { width: calc(var(--light-w, 35%) * 1.04); width: calc(round(calc(calc(var(--light-w, 35%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 44%) * 1.04); height: calc(round(calc(calc(var(--light-h, 44%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 76%) - var(--light-w, 35%) * 0.52); top: calc(var(--light-y, 46%) - var(--light-h, 44%) * 0.52); background: radial-gradient(closest-side in oklab, rgb(223 105 92 / 0.6), rgb(223 105 92 / 0.528) 10%, rgb(223 105 92 / 0.408) 22%, rgb(181 74 70 / 0.28) 40%, rgb(181 74 70 / 0.202) 54%, rgb(181 74 70 / 0.123) 68%, rgb(181 74 70 / 0.056) 82%, rgb(181 74 70 / 0.017) 93%, rgb(181 74 70 / 0) 100%); } .apd-ground.ink-glow.is-flip i:nth-child(2) { left: calc(100% - var(--light-x, 76%) - var(--light-w, 35%) * 0.52); } .apd-ground.ink-glow i:nth-child(3) { width: 80%; width: calc(round(calc(80% * var(--pz, 1)), 1px) / var(--pz, 1)); aspect-ratio: 1; height: auto; left: -30%; bottom: -52%; top: auto; right: auto; background: radial-gradient(closest-side in oklab, rgb(10 10 10 / 0.55), rgb(10 10 10 / 0.484) 10%, rgb(10 10 10 / 0.374) 22%, rgb(10 10 10 / 0.275) 40%, rgb(10 10 10 / 0.198) 54%, rgb(10 10 10 / 0.121) 68%, rgb(10 10 10 / 0.055) 82%, rgb(10 10 10 / 0.017) 93%, rgb(10 10 10 / 0) 100%); } .apd-ground.ink-glow.is-flip i:nth-child(3) { left: auto; right: -30%; } /* Ember dawn: first light. Ink with one warm gold sun low right (ochre in oklch, no green cast, no red). Light at --light-x/--light-y (default 78 % 62 %), radii --light-w/--light-h (default 35 % 42 %). */ .apd-ground.ember-dawn { background: #0a0a0a; } .apd-ground.ember-dawn i:nth-child(1) { width: calc(var(--light-w, 35%) * 2.0); width: calc(round(calc(calc(var(--light-w, 35%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 42%) * 2.0); height: calc(round(calc(calc(var(--light-h, 42%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 78%) - var(--light-w, 35%) * 1.0); top: calc(var(--light-y, 62%) - var(--light-h, 42%) * 1.0); background: radial-gradient(closest-side in oklab, rgb(153 101 22 / 0.78), rgb(153 101 22 / 0.686) 10%, rgb(153 101 22 / 0.53) 22%, rgb(95 61 4 / 0.5) 40%, rgb(95 61 4 / 0.36) 54%, rgb(95 61 4 / 0.22) 68%, rgb(95 61 4 / 0.1) 82%, rgb(95 61 4 / 0.03) 93%, rgb(95 61 4 / 0) 100%); } .apd-ground.ember-dawn.is-flip i:nth-child(1) { left: calc(100% - var(--light-x, 78%) - var(--light-w, 35%) * 1.0); } .apd-ground.ember-dawn i:nth-child(2) { width: calc(var(--light-w, 35%) * 1.04); width: calc(round(calc(calc(var(--light-w, 35%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 42%) * 1.04); height: calc(round(calc(calc(var(--light-h, 42%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 78%) - var(--light-w, 35%) * 0.52); top: calc(var(--light-y, 62%) - var(--light-h, 42%) * 0.52); background: radial-gradient(closest-side in oklab, rgb(218 183 142 / 0.55), rgb(218 183 142 / 0.484) 10%, rgb(218 183 142 / 0.374) 22%, rgb(177 127 59 / 0.3) 40%, rgb(177 127 59 / 0.216) 54%, rgb(177 127 59 / 0.132) 68%, rgb(177 127 59 / 0.06) 82%, rgb(177 127 59 / 0.018) 93%, rgb(177 127 59 / 0) 100%); } .apd-ground.ember-dawn.is-flip i:nth-child(2) { left: calc(100% - var(--light-x, 78%) - var(--light-w, 35%) * 0.52); } .apd-ground.ember-dawn i:nth-child(3) { width: 80%; width: calc(round(calc(80% * var(--pz, 1)), 1px) / var(--pz, 1)); aspect-ratio: 1; height: auto; left: -30%; bottom: -52%; top: auto; right: auto; background: radial-gradient(closest-side in oklab, rgb(10 10 10 / 0.55), rgb(10 10 10 / 0.484) 10%, rgb(10 10 10 / 0.374) 22%, rgb(10 10 10 / 0.275) 40%, rgb(10 10 10 / 0.198) 54%, rgb(10 10 10 / 0.121) 68%, rgb(10 10 10 / 0.055) 82%, rgb(10 10 10 / 0.017) 93%, rgb(10 10 10 / 0) 100%); } .apd-ground.ember-dawn.is-flip i:nth-child(3) { left: auto; right: -30%; } /* Fjord night: Bergen after dark. Fjord-950 with the sky's fjord light on the subject. Light at --light-x/--light-y (default 76 % 46 %), radii --light-w/--light-h (default 35 % 44 %). */ .apd-ground.fjord-night { background: #0d222c; } .apd-ground.fjord-night i:nth-child(1) { width: calc(var(--light-w, 35%) * 2.0); width: calc(round(calc(calc(var(--light-w, 35%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 44%) * 2.0); height: calc(round(calc(calc(var(--light-h, 44%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 76%) - var(--light-w, 35%) * 1.0); top: calc(var(--light-y, 46%) - var(--light-h, 44%) * 1.0); background: radial-gradient(closest-side in oklab, rgb(51 97 120 / 0.85), rgb(51 97 120 / 0.748) 10%, rgb(51 97 120 / 0.578) 22%, rgb(37 74 93 / 0.42) 40%, rgb(37 74 93 / 0.302) 54%, rgb(37 74 93 / 0.185) 68%, rgb(37 74 93 / 0.084) 82%, rgb(37 74 93 / 0.025) 93%, rgb(37 74 93 / 0) 100%); } .apd-ground.fjord-night.is-flip i:nth-child(1) { left: calc(100% - var(--light-x, 76%) - var(--light-w, 35%) * 1.0); } .apd-ground.fjord-night i:nth-child(2) { width: calc(var(--light-w, 35%) * 1.04); width: calc(round(calc(calc(var(--light-w, 35%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 44%) * 1.04); height: calc(round(calc(calc(var(--light-h, 44%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 76%) - var(--light-w, 35%) * 0.52); top: calc(var(--light-y, 46%) - var(--light-h, 44%) * 0.52); background: radial-gradient(closest-side in oklab, rgb(68 121 148 / 0.55), rgb(68 121 148 / 0.484) 10%, rgb(68 121 148 / 0.374) 22%, rgb(51 97 120 / 0.3) 40%, rgb(51 97 120 / 0.216) 54%, rgb(51 97 120 / 0.132) 68%, rgb(51 97 120 / 0.06) 82%, rgb(51 97 120 / 0.018) 93%, rgb(51 97 120 / 0) 100%); } .apd-ground.fjord-night.is-flip i:nth-child(2) { left: calc(100% - var(--light-x, 76%) - var(--light-w, 35%) * 0.52); } .apd-ground.fjord-night i:nth-child(3) { width: 80%; width: calc(round(calc(80% * var(--pz, 1)), 1px) / var(--pz, 1)); aspect-ratio: 1; height: auto; left: -30%; bottom: -52%; top: auto; right: auto; background: radial-gradient(closest-side in oklab, rgb(10 10 10 / 0.55), rgb(10 10 10 / 0.484) 10%, rgb(10 10 10 / 0.374) 22%, rgb(10 10 10 / 0.275) 40%, rgb(10 10 10 / 0.198) 54%, rgb(10 10 10 / 0.121) 68%, rgb(10 10 10 / 0.055) 82%, rgb(10 10 10 / 0.017) 93%, rgb(10 10 10 / 0) 100%); } .apd-ground.fjord-night.is-flip i:nth-child(3) { left: auto; right: -30%; } /* Moss dusk: growth at the end of the day. Moss-950 with its last moss light. Light at --light-x/--light-y (default 76 % 46 %), radii --light-w/--light-h (default 35 % 44 %). */ .apd-ground.moss-dusk { background: #182311; } .apd-ground.moss-dusk i:nth-child(1) { width: calc(var(--light-w, 35%) * 2.0); width: calc(round(calc(calc(var(--light-w, 35%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 44%) * 2.0); height: calc(round(calc(calc(var(--light-h, 44%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 76%) - var(--light-w, 35%) * 1.0); top: calc(var(--light-y, 46%) - var(--light-h, 44%) * 1.0); background: radial-gradient(closest-side in oklab, rgb(94 124 79 / 0.72), rgb(94 124 79 / 0.634) 10%, rgb(94 124 79 / 0.49) 22%, rgb(74 99 60 / 0.4) 40%, rgb(74 99 60 / 0.288) 54%, rgb(74 99 60 / 0.176) 68%, rgb(74 99 60 / 0.08) 82%, rgb(74 99 60 / 0.024) 93%, rgb(74 99 60 / 0) 100%); } .apd-ground.moss-dusk.is-flip i:nth-child(1) { left: calc(100% - var(--light-x, 76%) - var(--light-w, 35%) * 1.0); } .apd-ground.moss-dusk i:nth-child(2) { width: calc(var(--light-w, 35%) * 1.04); width: calc(round(calc(calc(var(--light-w, 35%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 44%) * 1.04); height: calc(round(calc(calc(var(--light-h, 44%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 76%) - var(--light-w, 35%) * 0.52); top: calc(var(--light-y, 46%) - var(--light-h, 44%) * 0.52); background: radial-gradient(closest-side in oklab, rgb(119 148 104 / 0.5), rgb(119 148 104 / 0.44) 10%, rgb(119 148 104 / 0.34) 22%, rgb(94 124 79 / 0.3) 40%, rgb(94 124 79 / 0.216) 54%, rgb(94 124 79 / 0.132) 68%, rgb(94 124 79 / 0.06) 82%, rgb(94 124 79 / 0.018) 93%, rgb(94 124 79 / 0) 100%); } .apd-ground.moss-dusk.is-flip i:nth-child(2) { left: calc(100% - var(--light-x, 76%) - var(--light-w, 35%) * 0.52); } .apd-ground.moss-dusk i:nth-child(3) { width: 80%; width: calc(round(calc(80% * var(--pz, 1)), 1px) / var(--pz, 1)); aspect-ratio: 1; height: auto; left: -30%; bottom: -52%; top: auto; right: auto; background: radial-gradient(closest-side in oklab, rgb(10 10 10 / 0.55), rgb(10 10 10 / 0.484) 10%, rgb(10 10 10 / 0.374) 22%, rgb(10 10 10 / 0.275) 40%, rgb(10 10 10 / 0.198) 54%, rgb(10 10 10 / 0.121) 68%, rgb(10 10 10 / 0.055) 82%, rgb(10 10 10 / 0.017) 93%, rgb(10 10 10 / 0) 100%); } .apd-ground.moss-dusk.is-flip i:nth-child(3) { left: auto; right: -30%; } /* Ochre lamplight: a lamp in a dark room. Ochre-950 with an ochre lamp. Light at --light-x/--light-y (default 76 % 40 %), radii --light-w/--light-h (default 35 % 44 %). */ .apd-ground.ochre-lamplight { background: #2e1a00; } .apd-ground.ochre-lamplight i:nth-child(1) { width: calc(var(--light-w, 35%) * 2.0); width: calc(round(calc(calc(var(--light-w, 35%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 44%) * 2.0); height: calc(round(calc(calc(var(--light-h, 44%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 76%) - var(--light-w, 35%) * 1.0); top: calc(var(--light-y, 40%) - var(--light-h, 44%) * 1.0); background: radial-gradient(closest-side in oklab, rgb(199 154 96 / 0.5), rgb(199 154 96 / 0.44) 10%, rgb(199 154 96 / 0.34) 22%, rgb(153 101 22 / 0.28) 40%, rgb(153 101 22 / 0.202) 54%, rgb(153 101 22 / 0.123) 68%, rgb(153 101 22 / 0.056) 82%, rgb(153 101 22 / 0.017) 93%, rgb(153 101 22 / 0) 100%); } .apd-ground.ochre-lamplight.is-flip i:nth-child(1) { left: calc(100% - var(--light-x, 76%) - var(--light-w, 35%) * 1.0); } .apd-ground.ochre-lamplight i:nth-child(2) { width: calc(var(--light-w, 35%) * 1.04); width: calc(round(calc(calc(var(--light-w, 35%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 44%) * 1.04); height: calc(round(calc(calc(var(--light-h, 44%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 76%) - var(--light-w, 35%) * 0.52); top: calc(var(--light-y, 40%) - var(--light-h, 44%) * 0.52); background: radial-gradient(closest-side in oklab, rgb(218 183 142 / 0.4), rgb(218 183 142 / 0.352) 10%, rgb(218 183 142 / 0.272) 22%, rgb(199 154 96 / 0.22) 40%, rgb(199 154 96 / 0.158) 54%, rgb(199 154 96 / 0.097) 68%, rgb(199 154 96 / 0.044) 82%, rgb(199 154 96 / 0.013) 93%, rgb(199 154 96 / 0) 100%); } .apd-ground.ochre-lamplight.is-flip i:nth-child(2) { left: calc(100% - var(--light-x, 76%) - var(--light-w, 35%) * 0.52); } .apd-ground.ochre-lamplight i:nth-child(3) { width: 80%; width: calc(round(calc(80% * var(--pz, 1)), 1px) / var(--pz, 1)); aspect-ratio: 1; height: auto; left: -30%; bottom: -52%; top: auto; right: auto; background: radial-gradient(closest-side in oklab, rgb(10 10 10 / 0.55), rgb(10 10 10 / 0.484) 10%, rgb(10 10 10 / 0.374) 22%, rgb(10 10 10 / 0.275) 40%, rgb(10 10 10 / 0.198) 54%, rgb(10 10 10 / 0.121) 68%, rgb(10 10 10 / 0.055) 82%, rgb(10 10 10 / 0.017) 93%, rgb(10 10 10 / 0) 100%); } .apd-ground.ochre-lamplight.is-flip i:nth-child(3) { left: auto; right: -30%; } /* Heather evening: the manager's chapter. Heather-950 with heather light. Light at --light-x/--light-y (default 76 % 46 %), radii --light-w/--light-h (default 35 % 44 %). */ .apd-ground.heather-evening { background: #2b1923; } .apd-ground.heather-evening i:nth-child(1) { width: calc(var(--light-w, 35%) * 2.0); width: calc(round(calc(calc(var(--light-w, 35%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 44%) * 2.0); height: calc(round(calc(calc(var(--light-h, 44%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 76%) - var(--light-w, 35%) * 1.0); top: calc(var(--light-y, 46%) - var(--light-h, 44%) * 1.0); background: radial-gradient(closest-side in oklab, rgb(116 76 99 / 0.85), rgb(116 76 99 / 0.748) 10%, rgb(116 76 99 / 0.578) 22%, rgb(90 57 76 / 0.42) 40%, rgb(90 57 76 / 0.302) 54%, rgb(90 57 76 / 0.185) 68%, rgb(90 57 76 / 0.084) 82%, rgb(90 57 76 / 0.025) 93%, rgb(90 57 76 / 0) 100%); } .apd-ground.heather-evening.is-flip i:nth-child(1) { left: calc(100% - var(--light-x, 76%) - var(--light-w, 35%) * 1.0); } .apd-ground.heather-evening i:nth-child(2) { width: calc(var(--light-w, 35%) * 1.04); width: calc(round(calc(calc(var(--light-w, 35%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 44%) * 1.04); height: calc(round(calc(calc(var(--light-h, 44%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 76%) - var(--light-w, 35%) * 0.52); top: calc(var(--light-y, 46%) - var(--light-h, 44%) * 0.52); background: radial-gradient(closest-side in oklab, rgb(143 97 123 / 0.55), rgb(143 97 123 / 0.484) 10%, rgb(143 97 123 / 0.374) 22%, rgb(116 76 99 / 0.3) 40%, rgb(116 76 99 / 0.216) 54%, rgb(116 76 99 / 0.132) 68%, rgb(116 76 99 / 0.06) 82%, rgb(116 76 99 / 0.018) 93%, rgb(116 76 99 / 0) 100%); } .apd-ground.heather-evening.is-flip i:nth-child(2) { left: calc(100% - var(--light-x, 76%) - var(--light-w, 35%) * 0.52); } .apd-ground.heather-evening i:nth-child(3) { width: 80%; width: calc(round(calc(80% * var(--pz, 1)), 1px) / var(--pz, 1)); aspect-ratio: 1; height: auto; left: -30%; bottom: -52%; top: auto; right: auto; background: radial-gradient(closest-side in oklab, rgb(10 10 10 / 0.55), rgb(10 10 10 / 0.484) 10%, rgb(10 10 10 / 0.374) 22%, rgb(10 10 10 / 0.275) 40%, rgb(10 10 10 / 0.198) 54%, rgb(10 10 10 / 0.121) 68%, rgb(10 10 10 / 0.055) 82%, rgb(10 10 10 / 0.017) 93%, rgb(10 10 10 / 0) 100%); } .apd-ground.heather-evening.is-flip i:nth-child(3) { left: auto; right: -30%; } /* Fjord streak: a deep monochrome beam (idea 5). A diagonal ink → fjord-950 → fjord-900 → fjord-500 ramp on the base and a fjord-400 core at the beam's end. Light at --light-x/--light-y (default 82 % 66 %), radii --light-w/--light-h (default 30 % 36 %). */ .apd-ground.fjord-streak { background: linear-gradient(150deg in oklab, #0a0a0a 0%, #0a0a0a 36%, #0d222c 50%, #173443 62%, #254a5d 74%, #447994 88%, #5f91ab 100%), #0a0a0a; right: auto; bottom: auto; width: calc(round(calc(100% * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(round(calc(100% * var(--pz, 1)), 1px) / var(--pz, 1)); } .apd-ground.fjord-streak i:nth-child(1) { width: calc(var(--light-w, 30%) * 2.0); width: calc(round(calc(calc(var(--light-w, 30%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 36%) * 2.0); height: calc(round(calc(calc(var(--light-h, 36%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 82%) - var(--light-w, 30%) * 1.0); top: calc(var(--light-y, 66%) - var(--light-h, 36%) * 1.0); background: radial-gradient(closest-side in oklab, rgb(68 121 148 / 0.5), rgb(68 121 148 / 0.44) 10%, rgb(68 121 148 / 0.34) 22%, rgb(51 97 120 / 0.3) 40%, rgb(51 97 120 / 0.216) 54%, rgb(51 97 120 / 0.132) 68%, rgb(51 97 120 / 0.06) 82%, rgb(51 97 120 / 0.018) 93%, rgb(51 97 120 / 0) 100%); } .apd-ground.fjord-streak.is-flip i:nth-child(1) { left: calc(100% - var(--light-x, 82%) - var(--light-w, 30%) * 1.0); } .apd-ground.fjord-streak i:nth-child(2) { width: calc(var(--light-w, 30%) * 1.04); width: calc(round(calc(calc(var(--light-w, 30%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 36%) * 1.04); height: calc(round(calc(calc(var(--light-h, 36%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 82%) - var(--light-w, 30%) * 0.52); top: calc(var(--light-y, 66%) - var(--light-h, 36%) * 0.52); background: radial-gradient(closest-side in oklab, rgb(126 170 194 / 0.5), rgb(126 170 194 / 0.44) 10%, rgb(126 170 194 / 0.34) 22%, rgb(68 121 148 / 0.26) 40%, rgb(68 121 148 / 0.187) 54%, rgb(68 121 148 / 0.114) 68%, rgb(68 121 148 / 0.052) 82%, rgb(68 121 148 / 0.016) 93%, rgb(68 121 148 / 0) 100%); } .apd-ground.fjord-streak.is-flip i:nth-child(2) { left: calc(100% - var(--light-x, 82%) - var(--light-w, 30%) * 0.52); } .apd-ground.fjord-streak i:nth-child(3) { width: 80%; width: calc(round(calc(80% * var(--pz, 1)), 1px) / var(--pz, 1)); aspect-ratio: 1; height: auto; left: -30%; bottom: -52%; top: auto; right: auto; background: radial-gradient(closest-side in oklab, rgb(10 10 10 / 0.55), rgb(10 10 10 / 0.484) 10%, rgb(10 10 10 / 0.374) 22%, rgb(10 10 10 / 0.275) 40%, rgb(10 10 10 / 0.198) 54%, rgb(10 10 10 / 0.121) 68%, rgb(10 10 10 / 0.055) 82%, rgb(10 10 10 / 0.017) 93%, rgb(10 10 10 / 0) 100%); } .apd-ground.fjord-streak.is-flip i:nth-child(3) { left: auto; right: -30%; } /* Arctic: the fjord ramp as a poster ground (idea 8). Fjord-900 with a fjord-600 light and a fjord-500 core. Light at --light-x/--light-y (default 72 % 60 %), radii --light-w/--light-h (default 38 % 42 %). */ .apd-ground.arctic { background: #173443; } .apd-ground.arctic i:nth-child(1) { width: calc(var(--light-w, 38%) * 2.0); width: calc(round(calc(calc(var(--light-w, 38%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 42%) * 2.0); height: calc(round(calc(calc(var(--light-h, 42%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 72%) - var(--light-w, 38%) * 1.0); top: calc(var(--light-y, 60%) - var(--light-h, 42%) * 1.0); background: radial-gradient(closest-side in oklab, rgb(68 121 148 / 0.9), rgb(68 121 148 / 0.792) 10%, rgb(68 121 148 / 0.612) 22%, rgb(51 97 120 / 0.5) 40%, rgb(51 97 120 / 0.36) 54%, rgb(51 97 120 / 0.22) 68%, rgb(51 97 120 / 0.1) 82%, rgb(51 97 120 / 0.03) 93%, rgb(51 97 120 / 0) 100%); } .apd-ground.arctic.is-flip i:nth-child(1) { left: calc(100% - var(--light-x, 72%) - var(--light-w, 38%) * 1.0); } .apd-ground.arctic i:nth-child(2) { width: calc(var(--light-w, 38%) * 1.04); width: calc(round(calc(calc(var(--light-w, 38%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 42%) * 1.04); height: calc(round(calc(calc(var(--light-h, 42%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 72%) - var(--light-w, 38%) * 0.52); top: calc(var(--light-y, 60%) - var(--light-h, 42%) * 0.52); background: radial-gradient(closest-side in oklab, rgb(95 145 171 / 0.5), rgb(95 145 171 / 0.44) 10%, rgb(95 145 171 / 0.34) 22%, rgb(68 121 148 / 0.26) 40%, rgb(68 121 148 / 0.187) 54%, rgb(68 121 148 / 0.114) 68%, rgb(68 121 148 / 0.052) 82%, rgb(68 121 148 / 0.016) 93%, rgb(68 121 148 / 0) 100%); } .apd-ground.arctic.is-flip i:nth-child(2) { left: calc(100% - var(--light-x, 72%) - var(--light-w, 38%) * 0.52); } .apd-ground.arctic i:nth-child(3) { width: 80%; width: calc(round(calc(80% * var(--pz, 1)), 1px) / var(--pz, 1)); aspect-ratio: 1; height: auto; left: -30%; bottom: -52%; top: auto; right: auto; background: radial-gradient(closest-side in oklab, rgb(10 10 10 / 0.55), rgb(10 10 10 / 0.484) 10%, rgb(10 10 10 / 0.374) 22%, rgb(10 10 10 / 0.275) 40%, rgb(10 10 10 / 0.198) 54%, rgb(10 10 10 / 0.121) 68%, rgb(10 10 10 / 0.055) 82%, rgb(10 10 10 / 0.017) 93%, rgb(10 10 10 / 0) 100%); } .apd-ground.arctic.is-flip i:nth-child(3) { left: auto; right: -30%; } /* Jade: the moss ramp as a poster ground (idea 7). Moss-900 with a moss-600 light and a moss-500 core. Light at --light-x/--light-y (default 72 % 36 %), radii --light-w/--light-h (default 38 % 40 %). */ .apd-ground.jade { background: #26361d; } .apd-ground.jade i:nth-child(1) { width: calc(var(--light-w, 38%) * 2.0); width: calc(round(calc(calc(var(--light-w, 38%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 40%) * 2.0); height: calc(round(calc(calc(var(--light-h, 40%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 72%) - var(--light-w, 38%) * 1.0); top: calc(var(--light-y, 36%) - var(--light-h, 40%) * 1.0); background: radial-gradient(closest-side in oklab, rgb(94 124 79 / 0.9), rgb(94 124 79 / 0.792) 10%, rgb(94 124 79 / 0.612) 22%, rgb(74 99 60 / 0.5) 40%, rgb(74 99 60 / 0.36) 54%, rgb(74 99 60 / 0.22) 68%, rgb(74 99 60 / 0.1) 82%, rgb(74 99 60 / 0.03) 93%, rgb(74 99 60 / 0) 100%); } .apd-ground.jade.is-flip i:nth-child(1) { left: calc(100% - var(--light-x, 72%) - var(--light-w, 38%) * 1.0); } .apd-ground.jade i:nth-child(2) { width: calc(var(--light-w, 38%) * 1.04); width: calc(round(calc(calc(var(--light-w, 38%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 40%) * 1.04); height: calc(round(calc(calc(var(--light-h, 40%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 72%) - var(--light-w, 38%) * 0.52); top: calc(var(--light-y, 36%) - var(--light-h, 40%) * 0.52); background: radial-gradient(closest-side in oklab, rgb(119 148 104 / 0.5), rgb(119 148 104 / 0.44) 10%, rgb(119 148 104 / 0.34) 22%, rgb(94 124 79 / 0.26) 40%, rgb(94 124 79 / 0.187) 54%, rgb(94 124 79 / 0.114) 68%, rgb(94 124 79 / 0.052) 82%, rgb(94 124 79 / 0.016) 93%, rgb(94 124 79 / 0) 100%); } .apd-ground.jade.is-flip i:nth-child(2) { left: calc(100% - var(--light-x, 72%) - var(--light-w, 38%) * 0.52); } .apd-ground.jade i:nth-child(3) { width: 80%; width: calc(round(calc(80% * var(--pz, 1)), 1px) / var(--pz, 1)); aspect-ratio: 1; height: auto; left: -30%; bottom: -52%; top: auto; right: auto; background: radial-gradient(closest-side in oklab, rgb(10 10 10 / 0.55), rgb(10 10 10 / 0.484) 10%, rgb(10 10 10 / 0.374) 22%, rgb(10 10 10 / 0.275) 40%, rgb(10 10 10 / 0.198) 54%, rgb(10 10 10 / 0.121) 68%, rgb(10 10 10 / 0.055) 82%, rgb(10 10 10 / 0.017) 93%, rgb(10 10 10 / 0) 100%); } .apd-ground.jade.is-flip i:nth-child(3) { left: auto; right: -30%; } /* Warm ink glow (.apd-ground.ink-glow.is-warm): the same night and placement with a gold light (ochre-600 field, ochre-300 core), for good-news chapters: keys, lettings, fixed, growth. Red ink glow is for needs-you pages only. */ .apd-ground.ink-glow.is-warm i:nth-child(1) { background: radial-gradient(closest-side in oklab, rgb(153 101 22 / 0.78), rgb(153 101 22 / 0.686) 10%, rgb(153 101 22 / 0.53) 22%, rgb(95 61 4 / 0.5) 40%, rgb(95 61 4 / 0.36) 54%, rgb(95 61 4 / 0.22) 68%, rgb(95 61 4 / 0.1) 82%, rgb(95 61 4 / 0.03) 93%, rgb(95 61 4 / 0) 100%); } .apd-ground.ink-glow.is-warm i:nth-child(2) { background: radial-gradient(closest-side in oklab, rgb(218 183 142 / 0.55), rgb(218 183 142 / 0.484) 10%, rgb(218 183 142 / 0.374) 22%, rgb(177 127 59 / 0.3) 40%, rgb(177 127 59 / 0.216) 54%, rgb(177 127 59 / 0.132) 68%, rgb(177 127 59 / 0.06) 82%, rgb(177 127 59 / 0.018) 93%, rgb(177 127 59 / 0) 100%); } .on-ink-glow:has(> .apd-ground.ink-glow.is-warm) { --ground-light: #c79a60; } /* ---------- light grounds ---------- */ /* Haze, documents: paper with one warm light (ochre-200 → ochre-100), no coral or blush on light pages (BRIEF § 11.14.3). The DS's coral Haze stays the DS asset; documents use this warm form. Light at --light-x/--light-y (default 76 % 46 %), radii --light-w/--light-h (default 35 % 44 %). */ .apd-ground.haze { background: #fbf9f5; } .apd-ground.haze i:nth-child(1) { width: calc(var(--light-w, 35%) * 2.0); width: calc(round(calc(calc(var(--light-w, 35%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 44%) * 2.0); height: calc(round(calc(calc(var(--light-h, 44%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 76%) - var(--light-w, 35%) * 1.0); top: calc(var(--light-y, 46%) - var(--light-h, 44%) * 1.0); background: radial-gradient(closest-side in oklab, rgb(233 211 184 / 0.85), rgb(233 211 184 / 0.748) 10%, rgb(233 211 184 / 0.578) 22%, rgb(244 232 217 / 0.65) 40%, rgb(244 232 217 / 0.468) 54%, rgb(244 232 217 / 0.286) 68%, rgb(244 232 217 / 0.13) 82%, rgb(244 232 217 / 0.039) 93%, rgb(244 232 217 / 0) 100%); } .apd-ground.haze.is-flip i:nth-child(1) { left: calc(100% - var(--light-x, 76%) - var(--light-w, 35%) * 1.0); } .apd-ground.haze i:nth-child(2) { width: calc(var(--light-w, 35%) * 1.04); width: calc(round(calc(calc(var(--light-w, 35%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 44%) * 1.04); height: calc(round(calc(calc(var(--light-h, 44%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 76%) - var(--light-w, 35%) * 0.52); top: calc(var(--light-y, 46%) - var(--light-h, 44%) * 0.52); background: radial-gradient(closest-side in oklab, rgb(233 211 184 / 0.55), rgb(233 211 184 / 0.484) 10%, rgb(233 211 184 / 0.374) 22%, rgb(244 232 217 / 0.4) 40%, rgb(244 232 217 / 0.288) 54%, rgb(244 232 217 / 0.176) 68%, rgb(244 232 217 / 0.08) 82%, rgb(244 232 217 / 0.024) 93%, rgb(244 232 217 / 0) 100%); } .apd-ground.haze.is-flip i:nth-child(2) { left: calc(100% - var(--light-x, 76%) - var(--light-w, 35%) * 0.52); } .apd-ground.haze i:nth-child(3) { display: none; } /* no floor glow */ /* Fjord mist: a grey Bergen morning. Fjord-50 with fjord light. Light at --light-x/--light-y (default 76 % 46 %), radii --light-w/--light-h (default 35 % 44 %). */ .apd-ground.fjord-mist { background: #f1f7fa; } .apd-ground.fjord-mist i:nth-child(1) { width: calc(var(--light-w, 35%) * 2.0); width: calc(round(calc(calc(var(--light-w, 35%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 44%) * 2.0); height: calc(round(calc(calc(var(--light-h, 44%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 76%) - var(--light-w, 35%) * 1.0); top: calc(var(--light-y, 46%) - var(--light-h, 44%) * 1.0); background: radial-gradient(closest-side in oklab, rgb(163 195 213 / 1), rgb(163 195 213 / 0.88) 10%, rgb(163 195 213 / 0.68) 22%, rgb(197 219 230 / 0.85) 40%, rgb(197 219 230 / 0.612) 54%, rgb(197 219 230 / 0.374) 68%, rgb(197 219 230 / 0.17) 82%, rgb(197 219 230 / 0.051) 93%, rgb(197 219 230 / 0) 100%); } .apd-ground.fjord-mist.is-flip i:nth-child(1) { left: calc(100% - var(--light-x, 76%) - var(--light-w, 35%) * 1.0); } .apd-ground.fjord-mist i:nth-child(2) { width: calc(var(--light-w, 35%) * 1.04); width: calc(round(calc(calc(var(--light-w, 35%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 44%) * 1.04); height: calc(round(calc(calc(var(--light-h, 44%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 76%) - var(--light-w, 35%) * 0.52); top: calc(var(--light-y, 46%) - var(--light-h, 44%) * 0.52); background: radial-gradient(closest-side in oklab, rgb(197 219 230 / 0.8), rgb(197 219 230 / 0.704) 10%, rgb(197 219 230 / 0.544) 22%, rgb(224 236 243 / 0.6) 40%, rgb(224 236 243 / 0.432) 54%, rgb(224 236 243 / 0.264) 68%, rgb(224 236 243 / 0.12) 82%, rgb(224 236 243 / 0.036) 93%, rgb(224 236 243 / 0) 100%); } .apd-ground.fjord-mist.is-flip i:nth-child(2) { left: calc(100% - var(--light-x, 76%) - var(--light-w, 35%) * 0.52); } .apd-ground.fjord-mist i:nth-child(3) { display: none; } /* no floor glow */ /* Moss morning: the road ahead. Moss-50 with moss light fading to white (green → white). Light at --light-x/--light-y (default 76 % 46 %), radii --light-w/--light-h (default 35 % 44 %). */ .apd-ground.moss-morning { background: #f3f7f2; } .apd-ground.moss-morning i:nth-child(1) { width: calc(var(--light-w, 35%) * 2.0); width: calc(round(calc(calc(var(--light-w, 35%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 44%) * 2.0); height: calc(round(calc(calc(var(--light-h, 44%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 76%) - var(--light-w, 35%) * 1.0); top: calc(var(--light-y, 46%) - var(--light-h, 44%) * 1.0); background: radial-gradient(closest-side in oklab, rgb(177 197 167 / 0.8), rgb(177 197 167 / 0.704) 10%, rgb(177 197 167 / 0.544) 22%, rgb(207 220 200 / 0.8) 40%, rgb(207 220 200 / 0.576) 54%, rgb(207 220 200 / 0.352) 68%, rgb(207 220 200 / 0.16) 82%, rgb(207 220 200 / 0.048) 93%, rgb(207 220 200 / 0) 100%); } .apd-ground.moss-morning.is-flip i:nth-child(1) { left: calc(100% - var(--light-x, 76%) - var(--light-w, 35%) * 1.0); } .apd-ground.moss-morning i:nth-child(2) { width: calc(var(--light-w, 35%) * 1.04); width: calc(round(calc(calc(var(--light-w, 35%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 44%) * 1.04); height: calc(round(calc(calc(var(--light-h, 44%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 76%) - var(--light-w, 35%) * 0.52); top: calc(var(--light-y, 46%) - var(--light-h, 44%) * 0.52); background: radial-gradient(closest-side in oklab, rgb(207 220 200 / 0.8), rgb(207 220 200 / 0.704) 10%, rgb(207 220 200 / 0.544) 22%, rgb(229 236 226 / 0.6) 40%, rgb(229 236 226 / 0.432) 54%, rgb(229 236 226 / 0.264) 68%, rgb(229 236 226 / 0.12) 82%, rgb(229 236 226 / 0.036) 93%, rgb(229 236 226 / 0) 100%); } .apd-ground.moss-morning.is-flip i:nth-child(2) { left: calc(100% - var(--light-x, 76%) - var(--light-w, 35%) * 0.52); } .apd-ground.moss-morning i:nth-child(3) { display: none; } /* no floor glow */ /* Ochre linen: people at home. Linen with an ochre light. Light at --light-x/--light-y (default 76 % 46 %), radii --light-w/--light-h (default 35 % 44 %). */ .apd-ground.ochre-linen { background: #f8f2ed; } .apd-ground.ochre-linen i:nth-child(1) { width: calc(var(--light-w, 35%) * 2.0); width: calc(round(calc(calc(var(--light-w, 35%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 44%) * 2.0); height: calc(round(calc(calc(var(--light-h, 44%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 76%) - var(--light-w, 35%) * 1.0); top: calc(var(--light-y, 46%) - var(--light-h, 44%) * 1.0); background: radial-gradient(closest-side in oklab, rgb(218 183 142 / 1), rgb(218 183 142 / 0.88) 10%, rgb(218 183 142 / 0.68) 22%, rgb(233 211 184 / 0.8) 40%, rgb(233 211 184 / 0.576) 54%, rgb(233 211 184 / 0.352) 68%, rgb(233 211 184 / 0.16) 82%, rgb(233 211 184 / 0.048) 93%, rgb(233 211 184 / 0) 100%); } .apd-ground.ochre-linen.is-flip i:nth-child(1) { left: calc(100% - var(--light-x, 76%) - var(--light-w, 35%) * 1.0); } .apd-ground.ochre-linen i:nth-child(2) { width: calc(var(--light-w, 35%) * 1.04); width: calc(round(calc(calc(var(--light-w, 35%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 44%) * 1.04); height: calc(round(calc(calc(var(--light-h, 44%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 76%) - var(--light-w, 35%) * 0.52); top: calc(var(--light-y, 46%) - var(--light-h, 44%) * 0.52); background: radial-gradient(closest-side in oklab, rgb(233 211 184 / 0.7), rgb(233 211 184 / 0.616) 10%, rgb(233 211 184 / 0.476) 22%, rgb(244 232 217 / 0.5) 40%, rgb(244 232 217 / 0.36) 54%, rgb(244 232 217 / 0.22) 68%, rgb(244 232 217 / 0.1) 82%, rgb(244 232 217 / 0.03) 93%, rgb(244 232 217 / 0) 100%); } .apd-ground.ochre-linen.is-flip i:nth-child(2) { left: calc(100% - var(--light-x, 76%) - var(--light-w, 35%) * 0.52); } .apd-ground.ochre-linen i:nth-child(3) { display: none; } /* no floor glow */ /* Heather blush: the manager's morning. Heather-50 with heather light. Light at --light-x/--light-y (default 76 % 46 %), radii --light-w/--light-h (default 35 % 44 %). */ .apd-ground.heather-blush { background: #faf4f7; } .apd-ground.heather-blush i:nth-child(1) { width: calc(var(--light-w, 35%) * 2.0); width: calc(round(calc(calc(var(--light-w, 35%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 44%) * 2.0); height: calc(round(calc(calc(var(--light-h, 44%) * 2.0) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 76%) - var(--light-w, 35%) * 1.0); top: calc(var(--light-y, 46%) - var(--light-h, 44%) * 1.0); background: radial-gradient(closest-side in oklab, rgb(211 179 196 / 0.8), rgb(211 179 196 / 0.704) 10%, rgb(211 179 196 / 0.544) 22%, rgb(229 208 219 / 0.8) 40%, rgb(229 208 219 / 0.576) 54%, rgb(229 208 219 / 0.352) 68%, rgb(229 208 219 / 0.16) 82%, rgb(229 208 219 / 0.048) 93%, rgb(229 208 219 / 0) 100%); } .apd-ground.heather-blush.is-flip i:nth-child(1) { left: calc(100% - var(--light-x, 76%) - var(--light-w, 35%) * 1.0); } .apd-ground.heather-blush i:nth-child(2) { width: calc(var(--light-w, 35%) * 1.04); width: calc(round(calc(calc(var(--light-w, 35%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(var(--light-h, 44%) * 1.04); height: calc(round(calc(calc(var(--light-h, 44%) * 1.04) * var(--pz, 1)), 1px) / var(--pz, 1)); right: auto; bottom: auto; aspect-ratio: auto; left: calc(var(--light-x, 76%) - var(--light-w, 35%) * 0.52); top: calc(var(--light-y, 46%) - var(--light-h, 44%) * 0.52); background: radial-gradient(closest-side in oklab, rgb(229 208 219 / 0.8), rgb(229 208 219 / 0.704) 10%, rgb(229 208 219 / 0.544) 22%, rgb(242 230 236 / 0.6) 40%, rgb(242 230 236 / 0.432) 54%, rgb(242 230 236 / 0.264) 68%, rgb(242 230 236 / 0.12) 82%, rgb(242 230 236 / 0.036) 93%, rgb(242 230 236 / 0) 100%); } .apd-ground.heather-blush.is-flip i:nth-child(2) { left: calc(100% - var(--light-x, 76%) - var(--light-w, 35%) * 0.52); } .apd-ground.heather-blush i:nth-child(3) { display: none; } /* no floor glow */ /* Mesh: soft pastel blobs fading to paper (idea 6, our hues: moss-200, fjord-200, fjord-100; neighbours, so they never meet in grey), along the right edge; the left column and the foot stay paper. */ .apd-ground.mesh { background: #fbf9f5; } .apd-ground.mesh i:nth-child(1) { width: 46%; width: calc(round(calc(46% * var(--pz, 1)), 1px) / var(--pz, 1)); aspect-ratio: 1; right: -12%; top: -34%; background: radial-gradient(closest-side in oklab, rgb(207 220 200 / 0.95), rgb(207 220 200 / 0.836) 10%, rgb(207 220 200 / 0.646) 22%, rgb(229 236 226 / 0.6) 40%, rgb(229 236 226 / 0.432) 54%, rgb(229 236 226 / 0.264) 68%, rgb(229 236 226 / 0.12) 82%, rgb(229 236 226 / 0.036) 93%, rgb(229 236 226 / 0) 100%); } .apd-ground.mesh.is-flip i:nth-child(1) { left: -12%; right: auto; } .apd-ground.mesh i:nth-child(2) { width: 40%; width: calc(round(calc(40% * var(--pz, 1)), 1px) / var(--pz, 1)); aspect-ratio: 1; right: -16%; top: 18%; background: radial-gradient(closest-side in oklab, rgb(197 219 230 / 0.95), rgb(197 219 230 / 0.836) 10%, rgb(197 219 230 / 0.646) 22%, rgb(224 236 243 / 0.6) 40%, rgb(224 236 243 / 0.432) 54%, rgb(224 236 243 / 0.264) 68%, rgb(224 236 243 / 0.12) 82%, rgb(224 236 243 / 0.036) 93%, rgb(224 236 243 / 0) 100%); } .apd-ground.mesh.is-flip i:nth-child(2) { left: -16%; right: auto; } .apd-ground.mesh i:nth-child(3) { width: 34%; width: calc(round(calc(34% * var(--pz, 1)), 1px) / var(--pz, 1)); aspect-ratio: 1; right: 4%; bottom: -26%; background: radial-gradient(closest-side in oklab, rgb(224 236 243 / 0.95), rgb(224 236 243 / 0.836) 10%, rgb(224 236 243 / 0.646) 22%, rgb(224 236 243 / 0.475) 40%, rgb(224 236 243 / 0.342) 54%, rgb(224 236 243 / 0.209) 68%, rgb(224 236 243 / 0.095) 82%, rgb(224 236 243 / 0.028) 93%, rgb(224 236 243 / 0) 100%); } .apd-ground.mesh.is-flip i:nth-child(3) { left: 4%; right: auto; } /* ---------- small grounds: one light behind the subject (cards, islands and tiles of about 300–500 px) ---------- At card size the three page glows keep their alpha but lose their area, so the ground reads flat. `.is-small` on the island (or on the ground itself, in any positioned card) hides them and draws one stronger light: an eased oklab ellipse centred behind the card's subject, an icon, a shape or a photo (--light-x/--light-y, default 86 % 16 %, the top-right corner) with radii --light-w/--light-h (default 42 % 46 %), so its tail ends before the lower-left text zone where the number and its line sit (round 5: radii of 100 % reached the numbers). Never behind text. */ :is(.apd-island.is-small > .apd-ground, .apd-ground.is-small) i { display: none; } :is(.apd-island.is-small > .apd-ground, .apd-ground.is-small) { right: auto; bottom: auto; width: calc(round(calc(100% * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(round(calc(100% * var(--pz, 1)), 1px) / var(--pz, 1)); } .apd-island.is-small > .apd-ground.ember, .apd-ground.ember.is-small { background: radial-gradient(ellipse var(--light-w, 42%) var(--light-h, 46%) at var(--light-x, 86%) var(--light-y, 16%) in oklab, rgb(223 105 92 / 0.62), rgb(223 105 92 / 0.546) 10%, rgb(223 105 92 / 0.422) 22%, rgb(181 74 70 / 0.34) 40%, rgb(181 74 70 / 0.245) 54%, rgb(181 74 70 / 0.15) 68%, rgb(181 74 70 / 0.068) 82%, rgb(181 74 70 / 0.02) 93%, rgb(181 74 70 / 0) 100%), #0a0a0a; } .apd-island.is-small > .apd-ground.haze, .apd-ground.haze.is-small { background: radial-gradient(ellipse var(--light-w, 42%) var(--light-h, 46%) at var(--light-x, 86%) var(--light-y, 16%) in oklab, rgb(218 183 142 / 0.7), rgb(218 183 142 / 0.616) 10%, rgb(218 183 142 / 0.476) 22%, rgb(233 211 184 / 0.6) 40%, rgb(233 211 184 / 0.432) 54%, rgb(233 211 184 / 0.264) 68%, rgb(233 211 184 / 0.12) 82%, rgb(233 211 184 / 0.036) 93%, rgb(233 211 184 / 0) 100%), #fbf9f5; } .apd-island.is-small > .apd-ground.ink-glow, .apd-ground.ink-glow.is-small { background: radial-gradient(ellipse var(--light-w, 42%) var(--light-h, 46%) at var(--light-x, 86%) var(--light-y, 16%) in oklab, rgb(223 105 92 / 0.6), rgb(223 105 92 / 0.528) 10%, rgb(223 105 92 / 0.408) 22%, rgb(181 74 70 / 0.32) 40%, rgb(181 74 70 / 0.23) 54%, rgb(181 74 70 / 0.141) 68%, rgb(181 74 70 / 0.064) 82%, rgb(181 74 70 / 0.019) 93%, rgb(181 74 70 / 0) 100%), #0a0a0a; } .apd-island.is-small > .apd-ground.ember-dawn, .apd-ground.ember-dawn.is-small { background: radial-gradient(ellipse var(--light-w, 42%) var(--light-h, 46%) at var(--light-x, 86%) var(--light-y, 16%) in oklab, rgb(199 154 96 / 0.62), rgb(199 154 96 / 0.546) 10%, rgb(199 154 96 / 0.422) 22%, rgb(153 101 22 / 0.36) 40%, rgb(153 101 22 / 0.259) 54%, rgb(153 101 22 / 0.158) 68%, rgb(153 101 22 / 0.072) 82%, rgb(153 101 22 / 0.022) 93%, rgb(153 101 22 / 0) 100%), #0a0a0a; } .apd-island.is-small > .apd-ground.fjord-night, .apd-ground.fjord-night.is-small { background: radial-gradient(ellipse var(--light-w, 42%) var(--light-h, 46%) at var(--light-x, 86%) var(--light-y, 16%) in oklab, rgb(68 121 148 / 0.78), rgb(68 121 148 / 0.686) 10%, rgb(68 121 148 / 0.53) 22%, rgb(51 97 120 / 0.5) 40%, rgb(51 97 120 / 0.36) 54%, rgb(51 97 120 / 0.22) 68%, rgb(51 97 120 / 0.1) 82%, rgb(51 97 120 / 0.03) 93%, rgb(51 97 120 / 0) 100%), #0d222c; } .apd-island.is-small > .apd-ground.moss-dusk, .apd-ground.moss-dusk.is-small { background: radial-gradient(ellipse var(--light-w, 42%) var(--light-h, 46%) at var(--light-x, 86%) var(--light-y, 16%) in oklab, rgb(119 148 104 / 0.7), rgb(119 148 104 / 0.616) 10%, rgb(119 148 104 / 0.476) 22%, rgb(94 124 79 / 0.42) 40%, rgb(94 124 79 / 0.302) 54%, rgb(94 124 79 / 0.185) 68%, rgb(94 124 79 / 0.084) 82%, rgb(94 124 79 / 0.025) 93%, rgb(94 124 79 / 0) 100%), #182311; } .apd-island.is-small > .apd-ground.ochre-lamplight, .apd-ground.ochre-lamplight.is-small { background: radial-gradient(ellipse var(--light-w, 42%) var(--light-h, 46%) at var(--light-x, 86%) var(--light-y, 16%) in oklab, rgb(199 154 96 / 0.55), rgb(199 154 96 / 0.484) 10%, rgb(199 154 96 / 0.374) 22%, rgb(153 101 22 / 0.36) 40%, rgb(153 101 22 / 0.259) 54%, rgb(153 101 22 / 0.158) 68%, rgb(153 101 22 / 0.072) 82%, rgb(153 101 22 / 0.022) 93%, rgb(153 101 22 / 0) 100%), #2e1a00; } .apd-island.is-small > .apd-ground.heather-evening, .apd-ground.heather-evening.is-small { background: radial-gradient(ellipse var(--light-w, 42%) var(--light-h, 46%) at var(--light-x, 86%) var(--light-y, 16%) in oklab, rgb(143 97 123 / 0.78), rgb(143 97 123 / 0.686) 10%, rgb(143 97 123 / 0.53) 22%, rgb(116 76 99 / 0.5) 40%, rgb(116 76 99 / 0.36) 54%, rgb(116 76 99 / 0.22) 68%, rgb(116 76 99 / 0.1) 82%, rgb(116 76 99 / 0.03) 93%, rgb(116 76 99 / 0) 100%), #2b1923; } .apd-island.is-small > .apd-ground.fjord-mist, .apd-ground.fjord-mist.is-small { background: radial-gradient(ellipse var(--light-w, 42%) var(--light-h, 46%) at var(--light-x, 86%) var(--light-y, 16%) in oklab, rgb(163 195 213 / 1), rgb(163 195 213 / 0.88) 10%, rgb(163 195 213 / 0.68) 22%, rgb(197 219 230 / 0.95) 40%, rgb(197 219 230 / 0.684) 54%, rgb(197 219 230 / 0.418) 68%, rgb(197 219 230 / 0.19) 82%, rgb(197 219 230 / 0.057) 93%, rgb(197 219 230 / 0) 100%), #f1f7fa; } .apd-island.is-small > .apd-ground.moss-morning, .apd-ground.moss-morning.is-small { background: radial-gradient(ellipse var(--light-w, 42%) var(--light-h, 46%) at var(--light-x, 86%) var(--light-y, 16%) in oklab, rgb(177 197 167 / 1), rgb(177 197 167 / 0.88) 10%, rgb(177 197 167 / 0.68) 22%, rgb(207 220 200 / 0.95) 40%, rgb(207 220 200 / 0.684) 54%, rgb(207 220 200 / 0.418) 68%, rgb(207 220 200 / 0.19) 82%, rgb(207 220 200 / 0.057) 93%, rgb(207 220 200 / 0) 100%), #f3f7f2; } .apd-island.is-small > .apd-ground.ochre-linen, .apd-ground.ochre-linen.is-small { background: radial-gradient(ellipse var(--light-w, 42%) var(--light-h, 46%) at var(--light-x, 86%) var(--light-y, 16%) in oklab, rgb(218 183 142 / 1), rgb(218 183 142 / 0.88) 10%, rgb(218 183 142 / 0.68) 22%, rgb(233 211 184 / 0.9) 40%, rgb(233 211 184 / 0.648) 54%, rgb(233 211 184 / 0.396) 68%, rgb(233 211 184 / 0.18) 82%, rgb(233 211 184 / 0.054) 93%, rgb(233 211 184 / 0) 100%), #f8f2ed; } .apd-island.is-small > .apd-ground.heather-blush, .apd-ground.heather-blush.is-small { background: radial-gradient(ellipse var(--light-w, 42%) var(--light-h, 46%) at var(--light-x, 86%) var(--light-y, 16%) in oklab, rgb(211 179 196 / 1), rgb(211 179 196 / 0.88) 10%, rgb(211 179 196 / 0.68) 22%, rgb(229 208 219 / 0.95) 40%, rgb(229 208 219 / 0.684) 54%, rgb(229 208 219 / 0.418) 68%, rgb(229 208 219 / 0.19) 82%, rgb(229 208 219 / 0.057) 93%, rgb(229 208 219 / 0) 100%), #faf4f7; } .apd-island.is-small > .apd-ground.fjord-streak, .apd-ground.fjord-streak.is-small { background: radial-gradient(ellipse var(--light-w, 42%) var(--light-h, 46%) at var(--light-x, 86%) var(--light-y, 16%) in oklab, rgb(95 145 171 / 0.72), rgb(95 145 171 / 0.634) 10%, rgb(95 145 171 / 0.49) 22%, rgb(68 121 148 / 0.42) 40%, rgb(68 121 148 / 0.302) 54%, rgb(68 121 148 / 0.185) 68%, rgb(68 121 148 / 0.084) 82%, rgb(68 121 148 / 0.025) 93%, rgb(68 121 148 / 0) 100%), #0a0a0a; } .apd-island.is-small > .apd-ground.arctic, .apd-ground.arctic.is-small { background: radial-gradient(ellipse var(--light-w, 42%) var(--light-h, 46%) at var(--light-x, 86%) var(--light-y, 16%) in oklab, rgb(95 145 171 / 0.78), rgb(95 145 171 / 0.686) 10%, rgb(95 145 171 / 0.53) 22%, rgb(68 121 148 / 0.46) 40%, rgb(68 121 148 / 0.331) 54%, rgb(68 121 148 / 0.202) 68%, rgb(68 121 148 / 0.092) 82%, rgb(68 121 148 / 0.028) 93%, rgb(68 121 148 / 0) 100%), #173443; } .apd-island.is-small > .apd-ground.jade, .apd-ground.jade.is-small { background: radial-gradient(ellipse var(--light-w, 42%) var(--light-h, 46%) at var(--light-x, 86%) var(--light-y, 16%) in oklab, rgb(119 148 104 / 0.78), rgb(119 148 104 / 0.686) 10%, rgb(119 148 104 / 0.53) 22%, rgb(94 124 79 / 0.46) 40%, rgb(94 124 79 / 0.331) 54%, rgb(94 124 79 / 0.202) 68%, rgb(94 124 79 / 0.092) 82%, rgb(94 124 79 / 0.028) 93%, rgb(94 124 79 / 0) 100%), #26361d; } .apd-island.is-small > .apd-ground.mesh, .apd-ground.mesh.is-small { background: radial-gradient(ellipse var(--light-w, 42%) var(--light-h, 46%) at var(--light-x, 86%) var(--light-y, 16%) in oklab, rgb(197 219 230 / 1), rgb(197 219 230 / 0.88) 10%, rgb(197 219 230 / 0.68) 22%, rgb(224 236 243 / 0.9) 40%, rgb(224 236 243 / 0.648) 54%, rgb(224 236 243 / 0.396) 68%, rgb(224 236 243 / 0.18) 82%, rgb(224 236 243 / 0.054) 93%, rgb(224 236 243 / 0) 100%), #fbf9f5; } /* Warm ink glow: the same night with a gold light, for good-news chapters (keys, fixed, growth). Red ink glow is for needs-you pages only. */ .apd-island.is-small > .apd-ground.ink-glow.is-warm, .apd-ground.ink-glow.is-warm.is-small { background: radial-gradient(ellipse var(--light-w, 42%) var(--light-h, 46%) at var(--light-x, 86%) var(--light-y, 16%) in oklab, rgb(199 154 96 / 0.62), rgb(199 154 96 / 0.546) 10%, rgb(199 154 96 / 0.422) 22%, rgb(153 101 22 / 0.36) 40%, rgb(153 101 22 / 0.259) 54%, rgb(153 101 22 / 0.158) 68%, rgb(153 101 22 / 0.072) 82%, rgb(153 101 22 / 0.022) 93%, rgb(153 101 22 / 0) 100%), #0a0a0a; } /* In a small dark island the light is close to every line, so secondary text takes the body colour (4,7–5,9 : 1 at the peak). */ .apd-island.is-small:is(.on-ember, .on-ink-glow, .on-ember-dawn, .on-fjord-night, .on-moss-dusk, .on-ochre-lamplight, .on-heather-evening, .on-fjord-streak, .on-arctic, .on-jade) { --text-secondary: var(--text-body); } /* ---------- palettes: each ground carries the whole token set (like .on-ember and .on-haze in ap-doc.css) ---------- */ .on-ember { --ground-light: #df695c; --glow-a: 50%; --accent: #df7f78; --red-a: 55%; } .on-haze { --ground-light: #e9d3b8; --glow-a: 80%; --accent: #df7f78; --red-a: 90%; } /* warm on light pages (§ 11.14.3); its secondary #4b433d lives in ap-doc.css */ /* its secondary #4b433d now lives in ap-doc.css */ /* shared by the dark grounds */ .on-ink-glow, .on-ember-dawn, .on-fjord-night, .on-moss-dusk, .on-ochre-lamplight, .on-heather-evening, .on-fjord-streak, .on-arctic, .on-jade { --line: rgba(255,255,255,.18); --text-primary: #ffffff; --mark: #ffffff; --lk-knob: #1c1c1c; --link: #a3c3d5; --accent: #df7f78; --accent-ink: #f1a8a2; --glow-a: 50%; --red-a: 55%; --needs-you: #e3857d; --needs-you-bg: #2a1513; --waiting: #dab78e; --waiting-bg: #2a2113; --done: #b1c5a7; --done-bg: #18211a; --info: #a3c3d5; --info-bg: #131c22; --chart-grid: rgba(255,255,255,.08); --data-1: #409ac5; --data-2: #bf8532; --data-3: #b36b95; --data-4: #638e4c; --seq-1: #173443; --seq-2: #254a5d; --seq-3: #336178; --seq-4: #447994; --seq-5: #5f91ab; --seq-6: #7eaac2; --seq-7: #a3c3d5; --seq-8: #c5dbe6; --div-neg: #c79a60; --div-pos: #7eaac2; --ord-1: #4b433d; --ord-2: #797068; --ord-3: #aaa19a; --ord-4: #ffffff; color-scheme: dark; color: var(--text-body); } .apd-page.on-ink-glow, .on-ink-glow { --page: #0a0a0a; --sunken: #201e1a; --tint-1: #171513; --tint-2: #2a2925; --line-strong: #797068; --text-body: #efe9e4; --text-secondary: #b9b1a8; --mark-on: #0a0a0a; --ground-light: #df695c; --chart-quiet: #615952; --chart-axis: #615952; --div-mid: #2a2925; background: #0a0a0a; } .apd-page.on-ember-dawn, .on-ember-dawn { --page: #0a0a0a; --sunken: #201e1a; --tint-1: #171513; --tint-2: #2a2925; --line-strong: #797068; --text-body: #efe9e4; --text-secondary: #b9b1a8; --mark-on: #0a0a0a; --ground-light: #c79a60; --chart-quiet: #615952; --chart-axis: #615952; --div-mid: #2a2925; background: #0a0a0a; } .apd-page.on-fjord-night, .on-fjord-night { --page: #0d222c; --sunken: #173443; --tint-1: #173443; --tint-2: #254a5d; --line-strong: #5f91ab; --text-body: #e0ecf3; --text-secondary: #c5dbe6; --mark-on: #0d222c; --ground-light: #5f91ab; --chart-quiet: #336178; --chart-axis: #447994; --div-mid: #254a5d; background: #0d222c; } .apd-page.on-moss-dusk, .on-moss-dusk { --page: #182311; --sunken: #26361d; --tint-1: #26361d; --tint-2: #384c2c; --line-strong: #779468; --text-body: #e5ece2; --text-secondary: #cfdcc8; --mark-on: #182311; --ground-light: #779468; --chart-quiet: #4a633c; --chart-axis: #5e7c4f; --div-mid: #384c2c; background: #182311; } .apd-page.on-ochre-lamplight, .on-ochre-lamplight { --page: #2e1a00; --sunken: #452a00; --tint-1: #452a00; --tint-2: #5f3d04; --line-strong: #b17f3b; --text-body: #f4e8d9; --text-secondary: #e9d3b8; --mark-on: #2e1a00; --ground-light: #c79a60; --chart-quiet: #7c5004; --chart-axis: #996516; --div-mid: #5f3d04; background: #2e1a00; } .apd-page.on-heather-evening, .on-heather-evening { --page: #2b1923; --sunken: #402735; --tint-1: #402735; --tint-2: #5a394c; --line-strong: #a87a93; --text-body: #f2e6ec; --text-secondary: #e5d0db; --mark-on: #2b1923; --ground-light: #a87a93; --chart-quiet: #5a394c; --chart-axis: #744c63; --div-mid: #5a394c; background: #2b1923; } .apd-page.on-fjord-streak, .on-fjord-streak { --page: #0a0a0a; --sunken: #173443; --tint-1: #0d222c; --tint-2: #173443; --line-strong: #447994; --text-body: #e0ecf3; --text-secondary: #c5dbe6; --mark-on: #0a0a0a; --ground-light: #5f91ab; --chart-quiet: #336178; --chart-axis: #447994; --div-mid: #254a5d; background: #0a0a0a; } .apd-page.on-arctic, .on-arctic { --page: #173443; --sunken: #254a5d; --tint-1: #254a5d; --tint-2: #336178; --line-strong: #7eaac2; --text-body: #e0ecf3; --text-secondary: #c5dbe6; --mark-on: #173443; --ground-light: #7eaac2; --chart-quiet: #447994; --chart-axis: #5f91ab; --div-mid: #336178; background: #173443; } .apd-page.on-jade, .on-jade { --page: #26361d; --sunken: #384c2c; --tint-1: #384c2c; --tint-2: #4a633c; --line-strong: #92ac85; --text-body: #e5ece2; --text-secondary: #cfdcc8; --mark-on: #26361d; --ground-light: #92ac85; --chart-quiet: #5e7c4f; --chart-axis: #779468; --div-mid: #4a633c; background: #26361d; } /* shared by the light grounds (fixed light: they stay light in the dark theme and in print) */ .on-fjord-mist, .on-moss-morning, .on-ochre-linen, .on-heather-blush, .on-mesh { --line: rgba(10,10,10,.12); --mark-on: #ffffff; --lk-knob: #f8f2ed; --link: #336178; --accent: #df7f78; --accent-ink: #953835; --glow-a: 75%; --red-a: 90%; --needs-you: #b54a46; --needs-you-bg: #fff2f1; --waiting: #7c5004; --waiting-bg: #f4e8d9; --done: #4a633c; --done-bg: #e5ece2; --info: #336178; --info-bg: #e0ecf3; --data-1: #1178a1; --data-2: #cc9140; --data-3: #8d4871; --data-4: #699552; --seq-1: #e0ecf3; --seq-2: #c5dbe6; --seq-3: #a3c3d5; --seq-4: #7eaac2; --seq-5: #5f91ab; --seq-6: #447994; --seq-7: #336178; --seq-8: #254a5d; --div-neg: #b17f3b; --div-pos: #447994; --ord-1: #aaa19a; --ord-2: #797068; --ord-3: #4b433d; --ord-4: #0a0a0a; color-scheme: light; color: var(--text-body); } .apd-page.on-fjord-mist, .on-fjord-mist { --page: #f1f7fa; --sunken: #e0ecf3; --tint-1: #ffffff; --tint-2: #e0ecf3; --line-strong: #5f91ab; --text-primary: #0d222c; --text-body: #173443; --text-secondary: #254a5d; --mark: #0d222c; --ground-light: #a3c3d5; --chart-quiet: #a3c3d5; --chart-grid: #e0ecf3; --chart-axis: #a3c3d5; --div-mid: #e0ecf3; background: #f1f7fa; } .apd-page.on-moss-morning, .on-moss-morning { --page: #f3f7f2; --sunken: #e5ece2; --tint-1: #ffffff; --tint-2: #e5ece2; --line-strong: #779468; --text-primary: #182311; --text-body: #26361d; --text-secondary: #384c2c; --mark: #182311; --ground-light: #cfdcc8; --chart-quiet: #b1c5a7; --chart-grid: #e5ece2; --chart-axis: #b1c5a7; --div-mid: #e5ece2; background: #f3f7f2; } .apd-page.on-ochre-linen, .on-ochre-linen { --page: #f8f2ed; --sunken: #f4e8d9; --tint-1: #fbf9f5; --tint-2: #f4e8d9; --line-strong: #b17f3b; --text-primary: #0a0a0a; --text-body: #352f2a; --text-secondary: #5f3d04; --mark: #0a0a0a; --ground-light: #e9d3b8; --accent-ink: #b54a46; --chart-quiet: #d3ccc3; --chart-grid: #efe9e4; --chart-axis: #d3ccc3; --div-mid: #efe9e4; background: #f8f2ed; } .apd-page.on-heather-blush, .on-heather-blush { --page: #faf4f7; --sunken: #f2e6ec; --tint-1: #ffffff; --tint-2: #f2e6ec; --line-strong: #a87a93; --text-primary: #2b1923; --text-body: #402735; --text-secondary: #5a394c; --mark: #2b1923; --ground-light: #e5d0db; --chart-quiet: #d3b3c4; --chart-grid: #f2e6ec; --chart-axis: #d3b3c4; --div-mid: #f2e6ec; background: #faf4f7; } .apd-page.on-mesh, .on-mesh { --page: #fbf9f5; --sunken: #efe9e4; --tint-1: #ffffff; --tint-2: #efe9e4; --line-strong: #918880; --text-primary: #0a0a0a; --text-body: #352f2a; --text-secondary: #4b433d; --mark: #0a0a0a; --ground-light: #c5dbe6; --chart-quiet: #c4bcb5; --chart-grid: #efe8e3; --chart-axis: #c4bcb5; --div-mid: #efe9e4; background: #fbf9f5; } /* ---------- small things with light in them ---------- */ /* Island: a ground inside a card, so a light page can hold one dark, lit place (the Ember island). */ .apd-island { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--b-r, var(--radius-card)); background: var(--page); color: var(--text-body); } /* Its edge: a 1 px inset hairline in the island's own ink at 18 % (white on dark islands, ink on light ones), drawn on ::after so it sits above the ground. A dark island on a dark page fell to 1,09 : 1 without it; with it the edge holds about 1,5 : 1 against the page. */ .apd-island::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--text-primary) 18%, transparent); } /* Everything after the ground sits above it, at zero specificity (as in ap-doc.css), so a part that must stay absolute just says so, or adds .apd-abs. */ :where(.apd-island > .apd-ground ~ :not(.apd-abs, .apd-sample, .apd-ground)) { position: relative; } /* Lit: red as light, not paint. A deep red base (Bryggen red → red-800 → ember-deep, oklab) and its light from the top-right corner (ember-glow), drawn as a centred closest-side glow on ::before: a corner-anchored radial on the element itself printed with a black corner in macOS Preview/PDFKit (its transparent stops lost their mask). Text sits on the deep half: white 10,1 : 1 on red-800, 5,2 on Bryggen red; see lit-recipe. Works on light and dark pages. */ .apd-lit, .apd-bento > .b.apd-lit { position: relative; overflow: hidden; isolation: isolate; color: var(--text-body); background: linear-gradient(200deg in oklab, #b54a46 0%, #953835 26%, #732926 52%, #541a19 76%, #4f1a18 100%); --text-primary: #ffffff; --text-body: #fff2f1; --text-secondary: #fee2e0; --mark: #ffffff; --mark-on: #4f1a18; --line: rgba(255,255,255,.24); --lk-knob: #4f1a18; } .apd-lit::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 10%; top: -80%; width: 180%; height: 160%; width: calc(round(calc(180% * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(round(calc(160% * var(--pz, 1)), 1px) / var(--pz, 1)); background: radial-gradient(closest-side in oklab, rgb(223 105 92 / .95), rgb(223 105 92 / .84) 10%, rgb(223 105 92 / .64) 22%, rgb(223 105 92 / .4) 40%, rgb(223 105 92 / .26) 54%, rgb(223 105 92 / .14) 68%, rgb(223 105 92 / .05) 82%, rgb(223 105 92 / .015) 93%, rgb(223 105 92 / 0)); } /* Lit coral: the dark-page box (ink on coral, 7,0 : 1) with its light from the top-left corner (blush), the same way. */ .apd-lit.is-coral, .apd-bento > .b.apd-lit.is-coral { background: linear-gradient(160deg in oklab, #df7f78 0%, #df7f78 38%, #df695c 100%); --text-primary: #0a0a0a; --text-body: #0a0a0a; --text-secondary: #390f0e; --mark: #0a0a0a; --mark-on: #df7f78; --line: rgba(10,10,10,.2); --lk-knob: #df7f78; } .apd-lit.is-coral::before { left: -80%; top: -90%; width: 160%; height: 180%; width: calc(round(calc(160% * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(round(calc(180% * var(--pz, 1)), 1px) / var(--pz, 1)); background: radial-gradient(closest-side in oklab, rgb(234 171 165 / .9), rgb(234 171 165 / .76) 12%, rgb(234 171 165 / .5) 30%, rgb(234 171 165 / .26) 52%, rgb(234 171 165 / .1) 72%, rgb(234 171 165 / .02) 88%, rgb(234 171 165 / 0)); } /* Glow: a large, soft light behind a subject, an illustration, a photo or a shape (BRIEF § 11.2): its box is about twice the subject, so its radius is at least about 60 % of the subject's short side, with a long eased falloff. Never behind text or a number: on a text element (span, p, headings, b, strong, em, small) the glow is inert, so an old use simply loses its light. Light by meaning: .is-red needs you (on dark pages only, decision 11.1), .is-done moss, .is-warm ochre. */ .apd-glow { position: relative; isolation: isolate; } /* No transform on the pseudo-element: Chromium's PDF dropped a band of a translated glow; offsets print whole. */ .apd-glow::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: calc((100% - var(--glow-w, 190%)) / 2); top: calc((100% - var(--glow-h, 220%)) / 2); width: var(--glow-w, 190%); height: var(--glow-h, 220%); width: calc(round(calc(var(--glow-w, 190%) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(round(calc(var(--glow-h, 220%) * var(--pz, 1)), 1px) / var(--pz, 1)); background: radial-gradient(closest-side in oklab, color-mix(in oklab, var(--ground-light) var(--glow-a), transparent), color-mix(in oklab, var(--ground-light) calc(var(--glow-a) * .62), transparent) 30%, color-mix(in oklab, var(--ground-light) calc(var(--glow-a) * .28), transparent) 58%, color-mix(in oklab, var(--ground-light) calc(var(--glow-a) * .08), transparent) 82%, transparent); } /* Light by meaning (WORLD.md, BRIEF § 8.1): red = needs you or broken now; moss = fixed, done; warm ochre = comfort, a lived-in home. */ .apd-glow.is-red, .apd-halo.is-red { --ground-light: #df695c; } /* Red glow with no box around a subject (G, decision 11.1: dark pages only): stronger and flatter than the other glows so it reads as light around the broken thing; 55 % on dark grounds (90 % only where a light palette is forced). */ .apd-glow.is-red { --glow-a: var(--red-a, 90%); } .apd-glow.is-red::before { background: radial-gradient(closest-side in oklab, color-mix(in oklab, var(--ground-light) var(--glow-a), transparent), color-mix(in oklab, var(--ground-light) calc(var(--glow-a) * .92), transparent) 22%, color-mix(in oklab, var(--ground-light) calc(var(--glow-a) * .62), transparent) 46%, color-mix(in oklab, var(--ground-light) calc(var(--glow-a) * .3), transparent) 68%, color-mix(in oklab, var(--ground-light) calc(var(--glow-a) * .1), transparent) 86%, transparent); } :is(span, p, h1, h2, h3, b, strong, em, small, a).apd-glow::before { content: none; } /* deprecated: light behind text */ .apd-glow.is-done, .apd-halo.is-done { --ground-light: #92ac85; } .apd-glow.is-warm, .apd-halo.is-warm { --ground-light: #c79a60; } /* Halo: a soft light around one focal element (a person's circle, a home's hexagon, a spot). Wrap exactly one element; `.is-ring` adds the website's hairline orbit. */ .apd-halo { position: relative; display: inline-grid; place-items: center; } :where(.apd-halo > :not(.apd-abs)) { position: relative; } /* paints after the glow; no isolation layer (an isolated halo around the hexagon's SVG clip printed with a straight seam through the light) */ .apd-halo::before { content: ""; position: absolute; left: calc(var(--halo, 38%) * -1); top: calc(var(--halo, 38%) * -1); border-radius: 50%; pointer-events: none; width: calc(100% + 2 * var(--halo, 38%)); height: calc(100% + 2 * var(--halo, 38%)); width: calc(round(calc((100% + 2 * var(--halo, 38%)) * var(--pz, 1)), 1px) / var(--pz, 1)); height: calc(round(calc((100% + 2 * var(--halo, 38%)) * var(--pz, 1)), 1px) / var(--pz, 1)); background: radial-gradient(closest-side in oklab, color-mix(in oklab, var(--ground-light) var(--glow-a), transparent) 50%, color-mix(in oklab, var(--ground-light) calc(var(--glow-a) * .55), transparent) 62%, color-mix(in oklab, var(--ground-light) calc(var(--glow-a) * .22), transparent) 78%, color-mix(in oklab, var(--ground-light) calc(var(--glow-a) * .06), transparent) 90%, transparent); } .apd-halo.is-ring::after { content: ""; position: absolute; inset: calc(var(--ring, 16%) * -1); border-radius: 50%; border: 1px solid color-mix(in oklab, var(--text-primary) 28%, transparent); pointer-events: none; } /* ---------- quiet textures for grounds (BRIEF § 11.4): on the ground element, above its glows, below everything else ---- One texture a ground. Each is measured quiet: its lines differ from the ground beneath by about 1,1–1,2 : 1 (grid and contours) and the grain by under 2 levels. Grounds only: covers, openers, moments. Small text means anything under 24 design px on slides and posters (labels, steps, captions): no texture under it; contours may run where no text sits. Markup:
*/ .apd-ground:is(.apd-texture-grid, .apd-texture-contours) { isolation: isolate; } .apd-ground:is(.apd-texture-grid, .apd-texture-contours)::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* A faint grid of 1 px lines in the ground's ink at 7 % (ideas 7, 8); --grid sets the step (default 64 px at slide size). */ .apd-ground.apd-texture-grid::before { --gl: color-mix(in oklab, var(--text-primary) 7%, transparent); background: repeating-linear-gradient(90deg, var(--gl) 0 1px, transparent 1px var(--grid, 64px)), repeating-linear-gradient(0deg, var(--gl) 0 1px, transparent 1px var(--grid, 64px)); } /* Hairline contours: rings around the light (--ring-x/--ring-y, default 78 % 24 %) every 40 px, ink at 8 %. */ .apd-ground.apd-texture-contours::before { --cl: color-mix(in oklab, var(--text-primary) 8%, transparent); background: repeating-radial-gradient(circle at var(--ring-x, 78%) var(--ring-y, 24%), transparent 0 39px, var(--cl) 39px 40px); } /* Grain under its texture name (the same 128 px tile as .is-grain). */ .apd-ground.apd-texture-grain::after { content: ""; position: absolute; inset: 0; z-index: 2; opacity: var(--grain, .035); background-size: 128px 128px; pointer-events: none; background-image: var(--apd-noise); }