/* ========================================================================== Astronomy & Celestial Mechanics — tokens. ========================================================================== The structural stylesheet is essay-kit's base.css, loaded first. Everything below is this site's identity and nothing else. The palette is a star atlas rather than an instrument panel. Light mode is the paper of an engraved celestial chart: warm ivory, indigo-black ink, and a deep indigo primary for anything that moves — an orbit, a body, a radius vector. Dark mode is the sky itself, near-black with a violet cast, and the same primary lifts to periwinkle. The secondary is star gold in both, reserved strictly for light: rays, illuminated limbs, spectra, luminosity. Nothing else is allowed to be gold, which is what makes the distinction legible at a glance across a hundred figures. ========================================================================== */ :root { --paper: #fbf8f1; --paper-2: #f3efe4; --paper-3: #e8e2d3; --ink: #16162b; --ink-2: #3f3f5c; --ink-3: #5d5d78; --rule: #d5cdba; --rule-2: #e6dfcf; --c-a: #35357f; /* anything that moves: orbit, body, radius vector */ --c-b: #96690d; /* light: rays, lit limbs, spectra, luminosity */ --c-c: #16665f; /* velocity and the vectors that are not positions */ --c-d: #7a2a86; /* the second body, when one is not enough */ --c-e: #a32547; /* the measured thing: an angle, a residual, a datum */ --c-warn: #ab2118; --fig-ink: var(--ink); --fig-soft: #4e4e6b; --fig-faint: #c4bca8; --tint: 14%; --tint-strong: 25%; /* An old-atlas serif rather than a screen serif — the site's typography is the one part of the identity that is not a colour. */ --font-body: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif; --font-display: var(--font-body); --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --measure: 34rem; --radius: 3px; --shadow: 0 1px 2px rgb(22 22 43 / 8%), 0 8px 26px -14px rgb(22 22 43 / 24%); color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #0a0b16; --paper-2: #111324; --paper-3: #1a1d33; --ink: #e9e7f4; --ink-2: #aeabc8; --ink-3: #8d8aa8; --rule: #262a45; --rule-2: #1b1e34; --c-a: #8f9dff; --c-b: #f0c04c; --c-c: #45d3bd; --c-d: #cfa2f2; --c-e: #f57b9d; --c-warn: #f6746a; --fig-ink: #ddd9ee; --fig-soft: #9491b0; --fig-faint: #2d3150; --tint: 20%; --tint-strong: 34%; --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 12px 34px -16px rgb(0 0 0 / 72%); } } /* The toggle stamps data-theme on and must win in both directions. */ :root[data-theme="dark"] { --paper: #0a0b16; --paper-2: #111324; --paper-3: #1a1d33; --ink: #e9e7f4; --ink-2: #aeabc8; --ink-3: #8d8aa8; --rule: #262a45; --rule-2: #1b1e34; --c-a: #8f9dff; --c-b: #f0c04c; --c-c: #45d3bd; --c-d: #cfa2f2; --c-e: #f57b9d; --c-warn: #f6746a; --fig-ink: #ddd9ee; --fig-soft: #9491b0; --fig-faint: #2d3150; --tint: 20%; --tint-strong: 34%; --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 12px 34px -16px rgb(0 0 0 / 72%); } /* --- site-specific roles -------------------------------------------------- Astronomy figures need a vocabulary the shared base has no opinion about. Every one of these is a *role*, not a colour: a generator asks for `.star` and gets whatever star means in the current theme. */ /* Bodies. The primary is the moving thing; the secondary body is violet so that a two-body figure never needs a legend to be read. */ .fig-svg .body { fill: color-mix(in oklab, var(--c-a) 30%, var(--paper-2)); stroke: var(--fig-ink); stroke-width: 1.5; } .fig-svg .body-alt { fill: color-mix(in oklab, var(--c-d) 30%, var(--paper-2)); stroke: var(--fig-ink); stroke-width: 1.5; } .fig-svg .star { fill: color-mix(in oklab, var(--c-b) 62%, var(--paper)); stroke: var(--c-b); stroke-width: 1.4; } .fig-svg .planet { fill: color-mix(in oklab, var(--c-a) 46%, var(--paper-2)); stroke: var(--fig-ink); stroke-width: 1.3; } .fig-svg .moon { fill: color-mix(in oklab, var(--fig-soft) 28%, var(--paper-2)); stroke: var(--fig-ink); stroke-width: 1.2; } /* Paths. An orbit is solid; an auxiliary construction is dashed and faint, so a figure can show both the curve and the geometry that produced it. */ .fig-svg .orbit { fill: none; stroke: var(--c-a); stroke-width: 2.2; } .fig-svg .orbit-alt { fill: none; stroke: var(--c-d); stroke-width: 2; } .fig-svg .orbit-ghost { fill: none; stroke: var(--fig-faint); stroke-width: 1.5; stroke-dasharray: 5 4; } .fig-svg .aux { fill: none; stroke: var(--fig-soft); stroke-width: 1.1; stroke-dasharray: 4 4; } .fig-svg .radius-vec { stroke: var(--c-e); stroke-width: 1.6; } .fig-svg .swept { fill: color-mix(in oklab, var(--c-e) var(--tint), var(--paper-2)); stroke: var(--c-e); stroke-width: 1.2; } .fig-svg .focus { fill: var(--c-e); stroke: none; } /* Light and shadow. Gold is light; shadow is a tint of the paper, never black, so it stays a shadow in dark mode instead of a hole. */ .fig-svg .light-ray { fill: none; stroke: var(--c-b); stroke-width: 1.6; } .fig-svg .lit { fill: color-mix(in oklab, var(--c-b) 55%, var(--paper)); stroke: var(--fig-ink); stroke-width: 1.2; } .fig-svg .unlit { fill: color-mix(in oklab, var(--fig-soft) 34%, var(--paper-2)); stroke: var(--fig-ink); stroke-width: 1.2; } .fig-svg .umbra { fill: color-mix(in oklab, var(--ink) 34%, var(--paper-2)); stroke: none; } .fig-svg .penumbra { fill: color-mix(in oklab, var(--ink) 13%, var(--paper-2)); stroke: none; } /* The sky as seen from inside it. */ .fig-svg .sphere { fill: none; stroke: var(--fig-soft); stroke-width: 1.3; } .fig-svg .sphere-grid { fill: none; stroke: var(--fig-faint); stroke-width: 1; } .fig-svg .horizon { stroke: var(--fig-ink); stroke-width: 2; } .fig-svg .below { fill: color-mix(in oklab, var(--ink) 8%, var(--paper-2)); stroke: none; } .fig-svg .meridian { fill: none; stroke: var(--c-c); stroke-width: 1.5; stroke-dasharray: 6 4; } /* Measurement: the angle, the baseline, the datum. */ .fig-svg .baseline { stroke: var(--c-c); stroke-width: 2; } .fig-svg .sightline { fill: none; stroke: var(--c-e); stroke-width: 1.3; stroke-dasharray: 7 4; } .fig-svg .datum { fill: var(--c-e); stroke: none; } .fig-svg .band { stroke: none; } /* A hairline rule under section headings, engraved rather than printed. */ .section-head::after { border-top-style: solid; }