/* ========================================================================== Illustrated Physics — 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 deliberately the inverse of matpic's warm paper and burnt orange: a cool, instrument-panel neutral with a blue primary and an amber secondary. Blue reads as the thing under discussion — a body, a ray, a field line — and amber as energy, heat and light, which is the distinction physics figures need most often. ========================================================================== */ :root { --paper: #f6f8fa; --paper-2: #eceff4; --paper-3: #e0e6ee; --ink: #0f141a; --ink-2: #3d4956; --ink-3: #5a6775; --rule: #cbd3dd; --rule-2: #dfe4ec; --c-a: #0b6bb0; /* the subject: a body, a ray, a field line */ --c-b: #a8541a; /* energy, heat, light */ --c-c: #0f7355; --c-d: #6d28d9; --c-e: #b21e46; --c-warn: #b3261e; --fig-ink: var(--ink); --fig-soft: #4d5a68; --fig-faint: #bcc6d2; --tint: 15%; --tint-strong: 26%; --font-body: Charter, "Bitstream Charter", "Sitka Text", Cambria, 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: 6px; --shadow: 0 1px 2px rgb(15 20 26 / 7%), 0 8px 24px -12px rgb(15 20 26 / 18%); color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #0d1117; --paper-2: #141b24; --paper-3: #1c252f; --ink: #e8edf4; --ink-2: #a8b6c6; --ink-3: #8896a6; --rule: #26313e; --rule-2: #1d2530; --c-a: #4cb8f5; --c-b: #f0a63a; --c-c: #34d3a0; --c-d: #b79cf7; --c-e: #f5738f; --c-warn: #f87171; --fig-ink: #dbe3ec; --fig-soft: #8d9baa; --fig-faint: #2e3947; --tint: 20%; --tint-strong: 34%; --shadow: 0 1px 2px rgb(0 0 0 / 34%), 0 10px 30px -14px rgb(0 0 0 / 66%); } } /* The toggle stamps data-theme on and must win in both directions. */ :root[data-theme="dark"] { --paper: #0d1117; --paper-2: #141b24; --paper-3: #1c252f; --ink: #e8edf4; --ink-2: #a8b6c6; --ink-3: #8896a6; --rule: #26313e; --rule-2: #1d2530; --c-a: #4cb8f5; --c-b: #f0a63a; --c-c: #34d3a0; --c-d: #b79cf7; --c-e: #f5738f; --c-warn: #f87171; --fig-ink: #dbe3ec; --fig-soft: #8d9baa; --fig-faint: #2e3947; --tint: 20%; --tint-strong: 34%; --shadow: 0 1px 2px rgb(0 0 0 / 34%), 0 10px 30px -14px rgb(0 0 0 / 66%); } /* --- site-specific roles -------------------------------------------------- Physics figures need a few named parts the shared base has no opinion about. */ .fig-svg .body { fill: color-mix(in oklab, var(--c-a) 26%, var(--paper-2)); stroke: var(--fig-ink); stroke-width: 1.6; } .fig-svg .ground { stroke: var(--fig-ink); stroke-width: 2; } .fig-svg .hatch { stroke: var(--fig-faint); stroke-width: 1; } .fig-svg .force { stroke: var(--c-a); } .fig-svg .force-alt { stroke: var(--c-b); } .fig-svg .velocity { stroke: var(--c-c); } .fig-svg .fieldline { stroke: var(--c-a); fill: none; stroke-width: 1.4; } .fig-svg .ray { stroke: var(--c-b); fill: none; stroke-width: 1.8; } .fig-svg .lens { fill: color-mix(in oklab, var(--c-a) 14%, var(--paper-2)); stroke: var(--c-a); stroke-width: 1.6; } .fig-svg .optical-axis { stroke: var(--fig-soft); stroke-dasharray: 6 5; } .fig-svg .lightcone { fill: color-mix(in oklab, var(--c-b) 16%, var(--paper-2)); stroke: var(--c-b); stroke-width: 1.4; } .fig-svg .worldline { stroke: var(--c-a); fill: none; stroke-width: 2.4; } .fig-svg .charge-pos { fill: color-mix(in oklab, var(--c-e) 70%, var(--paper)); stroke: var(--fig-ink); stroke-width: 1.2; } .fig-svg .charge-neg { fill: color-mix(in oklab, var(--c-a) 70%, var(--paper)); stroke: var(--fig-ink); stroke-width: 1.2; } .fig-svg .spring { stroke: var(--fig-soft); fill: none; stroke-width: 1.6; } /* A faint instrument-panel rule under section headings, which reads as physics-adjacent without becoming decoration. */ .section-head::after { border-top-style: solid; }