/* ============================================================================= Sky Relics — DESIGN TOKENS. The single source of truth for every theme-dependent value, shared by BOTH the site stylesheet (site.css) and the media viewers (media_viewers/*.css), so the lightbox and the 360/3D viewer follow the same light/dark theme as the page and read as one product. ----------------------------------------------------------------------------- The whole theme system is the three blocks below: :root → the DARK defaults @media (prefers-color-scheme: light) :root:not([data-theme="dark"]) → light for a system-light visitor, UNLESS the page pins itself dark [data-theme="light"] → light, pinned, in any OS A page that pins data-theme="dark" is excluded from the light block, so it stays dark in any OS. There is nothing else to keep in sync and nothing that can leak. Loaded as its own BEFORE site.css (parallel fetch — an @import here would serialise the requests and block rendering). ============================================================================= */ @layer reset, tokens, base, layout, components, chrome, engine, utilities; @layer tokens { :root { color-scheme: dark; /* DARK is the default skin */ /* colours — DARK defaults (the light block overrides these same names) */ /* SOLID greys, not translucent white. Opacity let a busy backdrop bleed through the letterforms, which is what hurt legibility; these are the SAME perceived lightness (0.92 / 0.64 / 0.5 white composited over the page ground) but fully opaque, so copy stays visible over any backdrop. */ --text-color: #ececec; --text-color-soft: #a9a9a9; --text-color-faint: #888888; --heading-color: #ffffff; --heading-text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5); --hairline-color: rgba(255, 255, 255, 0.14); --panel-background: rgba(255, 255, 255, 0.08); --panel-background-subtle: rgba(255, 255, 255, 0.04); --page-background: #0e1013; --hero-image-veil: rgba(14, 16, 19, 0.6); /* uniform dark wash over a contained hero photo so its text reads */ --reading-halo: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 0, 0, 0.45); /* soft glow lifting body copy off a busy backdrop */ --pano-caption-background: #1c1f24; /* solid caption strip, lifted from the page */ --accent-color: #5a8a5a; /* fixed brand green */ /* PROSE LINKS. Three states, because a link in the middle of a paragraph has to answer three questions: is this a link, is my pointer on it, and have I been here before. Measured, not chosen by eye. A link is text, so it must clear 4.5:1 against the page it sits on — the rest colour manages 4.73:1 here. It cannot be told apart from the body copy by COLOUR alone, though: against near-black body text on the light theme there is literally no colour in the sRGB gamut that is both readable on the page and 3:1 distinct from the prose around it — the two requirements pull in opposite directions and the window between them is empty. That is why the underline is not decoration. It is the part that actually says "link". */ --link-color: #5cc45c; /* brand green, brighter + saturated (47%) — 8.62:1 */ --link-color-hover: #d9f5d9; /* near-white under the pointer, faint green cast — 16.3:1 */ --link-color-visited: #9ac94a; /* been there — a YELLOW-green (hue 82°), distinct from the rest green, 9.8:1 */ --button-background: rgba(255, 255, 255, 0.08); --button-background-hover: rgba(255, 255, 255, 0.16); --button-text-color: #ffffff; /* fluid type scale — one clamp() per named size, no breakpoints required */ --font-size-small: clamp(0.78rem, 0.74rem + 0.18vw, 0.86rem); --font-size-base: clamp(1rem, 0.96rem + 0.2vw, 1.12rem); --font-size-medium: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); --font-size-large: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); --font-size-xlarge: clamp(2.2rem, 1.6rem + 3vw, 3.8rem); --font-size-display: clamp(2.8rem, 1.8rem + 5vw, 6rem); /* fluid spacing scale — named sizes, used for gaps and padding everywhere */ --spacing-tiny: clamp(0.4rem, 0.35rem + 0.2vw, 0.6rem); --spacing-small: clamp(0.7rem, 0.6rem + 0.4vw, 1rem); --spacing-medium: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem); --spacing-large: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); --spacing-xlarge: clamp(2.4rem, 1.7rem + 3vw, 4.5rem); --spacing-huge: clamp(3.5rem, 2.4rem + 5vw, 7.5rem); /* shape + type family */ --reading-column-width: 66ch; /* comfortable line length for body text */ --content-max-width: 1100px; /* outer bound for centred content */ --corner-radius: 8px; --panel-blur: blur(8px); --font-family-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-family-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; } /* LIGHT skin — applies to a system-light visitor UNLESS the page forces dark, and to any page that explicitly asks for light. Same token NAMES, light values. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --text-color: #2a2a2a; --text-color-soft: #686766; --text-color-faint: #878684; --heading-color: #1a1a1a; --heading-text-shadow: none; --hairline-color: rgba(0, 0, 0, 0.14); --panel-background: rgba(0, 0, 0, 0.05); --panel-background-subtle: rgba(0, 0, 0, 0.03); --page-background: #f6f4f0; --hero-image-veil: rgba(246, 244, 240, 0.66); /* uniform light wash over a contained hero photo */ --reading-halo: 0 1px 2px rgba(248, 246, 242, 0.75), 0 0 12px rgba(248, 246, 242, 0.6); /* soft glow lifting body copy off a busy backdrop */ --pano-caption-background: #e7e2d9; /* solid caption strip, a touch darker than the page */ /* A light page needs a DARKER green — the brand green is only 3.66:1 on this background, which is not readable body text. These are 5.66 / 8.11 / 4.54:1. */ --link-color: #1b6b2a; /* darker + saturated (60%) — 6.01:1 */ --link-color-hover: #124f1d; /* darker still under the pointer — 8.84:1 */ --link-color-visited: #567718; /* been there — a dark YELLOW-green (hue 81°), distinct hue, 4.7:1 */ --button-background: #111111; --button-background-hover: #000000; --button-text-color: #ffffff; } } [data-theme="light"] { color-scheme: light; --pano-caption-background: #e7e2d9; /* solid caption strip, a touch darker than the page */ /* A light page needs a DARKER green — the brand green is only 3.66:1 here, which is not readable body text. These are 5.66 / 8.11 / 4.54:1 against this background. */ --link-color: #1b6b2a; /* darker + saturated (60%) — 6.01:1 */ --link-color-hover: #124f1d; /* darker still under the pointer — 8.84:1 */ --link-color-visited: #567718; /* been there — a dark YELLOW-green (hue 81°), distinct hue, 4.7:1 */ --text-color: #2a2a2a; --text-color-soft: #686766; --text-color-faint: #878684; --heading-color: #1a1a1a; --heading-text-shadow: none; --hairline-color: rgba(0, 0, 0, 0.14); --panel-background: rgba(0, 0, 0, 0.05); --panel-background-subtle: rgba(0, 0, 0, 0.03); --page-background: #f6f4f0; --hero-image-veil: rgba(246, 244, 240, 0.66); /* uniform light wash over a contained hero photo */ --reading-halo: 0 1px 2px rgba(248, 246, 242, 0.75), 0 0 12px rgba(248, 246, 242, 0.6); /* soft glow lifting body copy off a busy backdrop */ --button-background: #111111; --button-background-hover: #000000; --button-text-color: #ffffff; } /* (No [data-theme="dark"] block is needed: dark is the :root default, and the @media light block above already excludes a forced-dark page — so a page that asks for dark stays dark in any operating-system theme.) */ } @layer tokens { :root { --backdrop-veil: linear-gradient(to bottom, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.55) 30%, rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 0.72)); --logo-filter: invert(1); /* The band's wide glass and its hairline are GRADIENTS that fade to nothing at both edges. The fade-out stop must be a zero-alpha version of the tint's OWN colour (rgba(255,255,255,0)), never the `transparent` keyword — `transparent` means rgba(0,0,0,0), so fading a white tint to it interpolates through grey and dirties the fade. That is why these are stored as whole gradients, not just colours. */ --navigation-band-glass: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.16) 18%, rgba(0, 0, 0, 0.16) 82%, rgba(0, 0, 0, 0)); --navigation-band-hairline: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.07) 18%, rgba(255, 255, 255, 0.07) 82%, rgba(255, 255, 255, 0)); --navigation-background: rgba(0, 0, 0, 0.38); /* the inner pill — sits ON the band's own tint, so it needs to go properly dark or it reads washed out */ --navigation-hover-fill: rgba(255, 255, 255, 0.08); --navigation-hover-edge: rgba(255, 255, 255, 0.12); --navigation-link-color: #c4c4c4; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --backdrop-veil: linear-gradient(to bottom, rgba(248, 246, 242, 0.9), rgba(248, 246, 242, 0.82) 30%, rgba(248, 246, 242, 0.82) 70%, rgba(248, 246, 242, 0.92)); --logo-filter: none; --navigation-band-glass: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3) 18%, rgba(255, 255, 255, 0.3) 82%, rgba(255, 255, 255, 0)); --navigation-band-hairline: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.07) 18%, rgba(0, 0, 0, 0.07) 82%, rgba(0, 0, 0, 0)); --navigation-background: rgba(255, 255, 255, 0.3); --navigation-hover-fill: rgba(255, 255, 255, 0.42); --navigation-hover-edge: rgba(0, 0, 0, 0.08); --navigation-link-color: #333333; } } [data-theme="light"] { --backdrop-veil: linear-gradient(to bottom, rgba(248, 246, 242, 0.9), rgba(248, 246, 242, 0.82) 30%, rgba(248, 246, 242, 0.82) 70%, rgba(248, 246, 242, 0.92)); --logo-filter: none; --navigation-band-glass: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3) 18%, rgba(255, 255, 255, 0.3) 82%, rgba(255, 255, 255, 0)); --navigation-band-hairline: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.07) 18%, rgba(0, 0, 0, 0.07) 82%, rgba(0, 0, 0, 0)); --navigation-background: rgba(255, 255, 255, 0.3); --navigation-hover-fill: rgba(255, 255, 255, 0.42); --navigation-hover-edge: rgba(0, 0, 0, 0.08); --navigation-link-color: #333333; } }