/* ============================================================ consola-planets.css — the procedural CSS planet renderer. Extracted verbatim out of consola.css (FOX-95) so a world's planet can be drawn anywhere the app needs one, not only on the marketing landing. consola.css is the landing's whole stylesheet (it restyles `a`, `.wrap`, the hero, pricing …) and cannot be loaded on an app surface; this file is only the planet. Drives everything off ONE custom property, `--cc`, the world's colour token. Assign it on an ancestor and the planet exists:
<- optional override
Archetypes: ringed / cratered / continents / icy / banded, plus an opt-in `.orbit .moon`. `--tilt` rotates the ring and orbit. The `planet-img` slot is an OVERRIDE, not a requirement: with a real `src` the image shows and the CSS art auto-hides; remove the src and the CSS art comes back. That is what makes an eighth world cost a colour token rather than a generated asset (ADR-0022, asset identity budget). Loaded by: layouts/consola (the landing), layouts/prototype_*. ============================================================ */ .planet { position: relative; width: 66px; height: 66px; flex: none; } .planet .body { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; box-shadow: inset -6px -8px 14px rgb(0 0 0 / 42%), 0 0 26px -7px var(--cc); background: radial-gradient(circle at 33% 27%, color-mix(in srgb, var(--cc) 42%, #fff), var(--cc) 52%, color-mix(in srgb, var(--cc) 58%, #000) 100%); } /* terminator shadow on every world for sphericity */ .planet .body::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 24%, transparent 38%, rgb(0 0 0 / 28%) 100%); } /* dashed survey orbit + moon (only on worlds that opt in) Sized in percentages and centred with translate(), the same idiom .ring below already uses, so the orbit tracks whatever size the planet is set to. It was 124x46px with matching negative margins against a 66px planet, which meant every caller that shrank a planet had to hand-write a matching orbit override or watch it overflow — it clipped the launcher row at 52px. The percentages are the old ratios exactly (124/66, 46/66), so a 66px planet renders identically. Call sites that want a deliberately different ratio still override and still win. */ .planet .orbit { position: absolute; left: 50%; top: 50%; width: 187.9%; height: 69.7%; border: 1px dashed color-mix(in srgb, var(--cc) 60%, transparent); border-radius: 50%; transform: translate(-50%, -50%) rotate(var(--tilt, -20deg)); opacity: 0.7; z-index: 4; } .planet .orbit .moon { position: absolute; left: 2.4%; top: 44%; width: 5.6%; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--cc) 30%, #fff); box-shadow: 0 0 8px var(--cc); } /* ── archetype: RINGED (Saturn) — back arc behind, front arc over ── */ .planet.ringed .ring { position: absolute; left: 50%; top: 50%; width: 132%; height: 46%; transform: translate(-50%,-50%) rotate(var(--tilt, -18deg)); border-radius: 50%; border: 3px solid color-mix(in srgb, var(--cc) 42%, #fff); border-bottom-color: color-mix(in srgb, var(--cc) 45%, #000); } .planet.ringed .ring.back { z-index: 0; } .planet.ringed .body { z-index: 1; } .planet.ringed .ring.front { z-index: 2; clip-path: inset(48% 0 0 0); } /* ── archetype: CRATERED rocky world ── */ .planet.cratered .body { background: radial-gradient(circle at 62% 64%, color-mix(in srgb, var(--cc) 60%, #000) 0 11%, transparent 12%), radial-gradient(circle at 38% 72%, color-mix(in srgb, var(--cc) 60%, #000) 0 7%, transparent 8%), radial-gradient(circle at 72% 40%, color-mix(in srgb, var(--cc) 60%, #000) 0 5.5%, transparent 6.5%), radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--cc) 30%, #fff) 0 4%, transparent 5%), radial-gradient(circle at 33% 27%, color-mix(in srgb, var(--cc) 42%, #fff), var(--cc) 52%, color-mix(in srgb, var(--cc) 60%, #000) 100%); } /* ── archetype: CONTINENTS lush world ── */ .planet.continents .body { background: radial-gradient(ellipse 30% 20% at 60% 38%, color-mix(in srgb, var(--cc) 55%, #000) 0 60%, transparent 64%), radial-gradient(ellipse 24% 16% at 34% 62%, color-mix(in srgb, var(--cc) 55%, #000) 0 60%, transparent 64%), radial-gradient(ellipse 18% 12% at 70% 70%, color-mix(in srgb, var(--cc) 50%, #000) 0 60%, transparent 64%), radial-gradient(ellipse 16% 10% at 26% 32%, color-mix(in srgb, var(--cc) 35%, #fff) 0 60%, transparent 64%), radial-gradient(circle at 33% 27%, color-mix(in srgb, var(--cc) 45%, #fff), var(--cc) 52%, color-mix(in srgb, var(--cc) 58%, #000) 100%); } /* ── archetype: ICY world with polar caps + swirl ── */ .planet.icy .body { background: radial-gradient(ellipse 64% 24% at 50% 3%, rgb(255 255 255 / 92%) 0 60%, transparent 75%), radial-gradient(ellipse 54% 20% at 50% 99%, rgb(255 255 255 / 82%) 0 60%, transparent 78%), radial-gradient(ellipse 26% 10% at 42% 52%, rgb(255 255 255 / 50%) 0 60%, transparent 70%), radial-gradient(circle at 33% 27%, color-mix(in srgb, var(--cc) 38%, #fff), var(--cc) 52%, color-mix(in srgb, var(--cc) 60%, #000) 100%); } /* ── archetype: BANDED gas giant + storm spot ── */ .planet.banded .body { background: radial-gradient(ellipse 22% 14% at 68% 60%, color-mix(in srgb, var(--cc) 30%, #fff) 0 55%, color-mix(in srgb, var(--cc) 50%, #000) 60%, transparent 64%), repeating-linear-gradient(2deg, color-mix(in srgb, var(--cc) 58%, #000) 0 6px, color-mix(in srgb, var(--cc) 22%, #fff) 6px 12px), radial-gradient(circle at 33% 27%, color-mix(in srgb, var(--cc) 40%, #fff), var(--cc) 100%); } .planet.banded .body::before { background: radial-gradient(circle at 30% 24%, transparent 30%, rgb(0 0 0 / 32%) 100%); } @media (width <= 600px){ .planet { transform: scale(0.92); } } .planet .planet-img { display: none; } .planet .planet-img[src] { display: block; position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: contain; z-index: 6; } .planet:has(.planet-img[src]) .body, .planet:has(.planet-img[src]) .ring, .planet:has(.planet-img[src]) .orbit { display: none; }