(the engine's markup) No markup, global or event of its own, no images, no fonts (hand the serif token yours). The sky is night: a host on light paper wants its copy light over it (see tools/work/midnight-atlas.css). WHAT YOU SEE: listed back to front at the top of midnight-atlas.js (the night, the milky way, the chart, the rose, the gears, the lamp and its glory, the shade under host words, the brass plate, the lamp's pool and reflections, the globes and their cartouches, the constellation, the clicks). This file adds the featured tool: when a stage (backdrop-orbits-stage) puts .is-featured on a tool, it is the brightest star on the chart: the globe a size up in a lamp-lit bezel with an aureole of fine gold rays, no haze over it, its cartouche struck in gold leaf with the name in navy, its arm lit and the stage's beam a gold rule cased in night. TOKENS (declared below at zero specificity; set any of them anywhere up the tree) colour night, night-hi, night-deep (the paper), ink (the gold-ink linework), ivory (highlights, tooltip text), gold, gold-hi, gold-dark (foil, stars), brass, brass-light, brass-dark (the instrument), lamp (reflections, packets), glow (light seen on the night), card (cartouches), haze (the night air laid over a far tool: cool and lighter than the paper), gem-1 .. gem-6 (enamel, cycled in order) type serif size gem (a globe across), gem-small (under 700 px wide: globes alone), far-size (a tool at the very back, as a fraction of its size, on top of perspective), reach (constellation lines, as a fraction of the outer ring) structure band (1 = 3% of the outer orbit, at most 18 px), zodiac (its width; 0 leaves it out), numerals (0 leaves out the lettering). Read when the plate is drawn: at the start and on a resize; to apply a change at runtime, set data-backdrop-skin away and back. chart pole-x, pole-y (the graticule's pole, as fractions of the root); rose (none hides it), rose-x, rose-y, rose-size, rose-small (under 560 px wide) words shade (0 to 1, default 1): how much night is laid under host words the tools pass behind (content in data-backdrop-avoid whose zone is switched off) and over a globe behind them. 0 leaves the orbit unfaded behind the words, for a host that keeps its words legible with a halo of its own (the /work stage layout); read on a resize or refresh() Written by the skin, setting them does nothing: --backdrop-orbits-midnight-atlas-paint-gem (per tool), -paint-from, -paint-to (a pen bead's path), -paint-ray, -paint-s0..s2, -paint-from, -paint-delay (a meridian's), and the attributes data-backdrop-midnight-atlas-paint-pair and -paint-on (on each line). Classes it sets: -near (the tool nearest the pointer), -behind (under the anchor, not front mode), -under (behind host words: dimmed), -tucked (a moon over content), -crossing (an arm over content), and on the finder is-on, is-west, is-north, is-hush (no room for its reading off the rose). It styles the stage add-on's .is-featured (on a tool and its spoke) and its -stage-beam and -stage-packet. MOTION AND COST Only transforms and opacity move, on layers of their own. Everything engraved is drawn once per size in idle slices (the brass, then the chart, then the milky way) and fades in once on its own layer ("printed"): an animation inside the engraving repainted all of it every frame (the atlas's trap 13). The brass, the pool, the reflections, the light and the wave live inside the engine's plane, so they take its 3D transform for free; the lettering in the plane is cut as strokes, never text (the orrery's trap 8: text in a layer that moves in 3D is re-rastered every frame). At rest nothing of this skin animates for ever: the gears and the hub's rete tick (midnight-atlas.js writes `rotate` every few seconds, on the gears' own layers, so nothing is painted; lite mode holds them), the needle settles. What shows now and then is not drawn until it shows (trap 12). The featured look moves only opacity and scale, once, as a tool is featured. The click effects get a layer only while they run and let go of it after. The clicks' own animations finish the moment motion stops, so a held frame is never caught mid-wave; reduced motion shows the finished frame and the clicks answer without travel. THE TRAPS (each from a parent, kept; and the ones hit building this) 1. The parents' fixes, all kept: no SVG text in the plane; the plate on a layer of its own inside the plane; print-in on that layer, gated on motion, never replayed; the card padded above the globe by the label's height so the globe sits on the tool's point; lines, satellites, spokes, the finder and the dividers kept off the host's content; a stop finishes what is in flight; the flash and the halo styled (else they wear the engine's blue); filings drawn on ::before (a rotate on the bit turns its flight); the packet sized inside the engine's wrapper. 2. A gradient to transparent black is a gradient through grey (the engine's trap 12), and on night paper through a dirty brown: every gold fade here ends in the same gold at zero alpha. 3. Gold on navy at the ink weights of the ivory atlas glared: every line of the chart is drawn at about half the parent's ink, and the plate's lettering sits in the brass's shadow copy (a dark cut a fraction below each gold stroke) so it reads as engraved, not printed on top. 4. The milky way as engine particles was a uniform haze over the copy. It is a band drawn once on a CPU-backed canvas (willReadFrequently: a GPU canvas made at load can wait on a busy GPU), thinned to a fifth inside 40 px of the host's copy. 5. Night laid over a far tool, the ivory atlas's fade turned dark, made the back of the system murky: a topaz globe went brown and its navy cartouche sank into the navy paper. Distance on a night chart is a cool haze, lighter than the paper (the haze token). 6. A transition on a shadow that depends on depth ran for ever: the engine steps --backdrop-orbits-paint-depth every few hundred ms per tool, and every step started a new box-shadow transition on the globe and the cartouche (six running at any moment, at rest). Only colours and opacity transition here. 7. The gears and the rete turned as CSS animations for ever (three or four running animations, restyled on every frame the page drew). They tick now; see midnight-atlas.js. 8. A circle of rays as wide as the system is taller than the hero: the glory ran up under the masthead and striped the whole right side. It is laid in the plane (an ellipse) and stops just past the outer orbit, at half strength there. 9. Ticking gears with no layer of their own were squashed into one 700 by 560 px layer and painted again at every write of `rotate`: two paints a sky click (the clunk and its settle), eight a hub click (the escapement's race), 22 to 29 paints of 0.4 Mpx in 12 clicks. Each gear has a layer of its own now (will-change), turned by the compositor: none. 10. The shade under host words is a fade behind the copy. Where a host floats its copy over the orbit with a halo of its own (the /work stage layout, the founder: obscured, not faded) it laid a dark patch under every line of the copy and the caption. The shade token turns it, the dimming of a globe behind the words and the fading of an arm across them off; moons still tuck away. 11. The aureole is an svg in the icon, so selectors for the tool's own icon name the child svg that is neither the globe nor the aureole (a descendant selector gave the aureole the icon's size, white stroke and drop shadow). 12. A layer kept for what shows now and then costs all the time: the light, the wave, the pool and the flare at opacity 0 on layers, the chart and the milky way on theirs after printing, made /work draw 84 Mpx of layers at 1440x900 (the atlas 62), all rasterised and walked by every frame's paint and layerize. Now 68: the four are display: none until lit (.is-on), the two give theirs up once printed (and are rasterised again into the sky's layer then, once). The reflections keep theirs (they turn with the idle drift; in the plate's layer each step repainted the plate). */ /* tokens a host may set (anywhere up the tree; declared here at zero specificity) */ :where(:root) { --backdrop-orbits-midnight-atlas-night: #0A1430; --backdrop-orbits-midnight-atlas-night-hi: #172852; --backdrop-orbits-midnight-atlas-night-deep: #050A1C; --backdrop-orbits-midnight-atlas-ink: #E3C988; /* pale gold ink: lines, letters, the chart */ --backdrop-orbits-midnight-atlas-ivory: #F7F0DF; --backdrop-orbits-midnight-atlas-gold: #C9A04E; /* gold leaf */ --backdrop-orbits-midnight-atlas-gold-hi: #F3DA9A; --backdrop-orbits-midnight-atlas-gold-dark: #7A5620; --backdrop-orbits-midnight-atlas-brass: #C99A45; --backdrop-orbits-midnight-atlas-brass-light: #F2DA9A; --backdrop-orbits-midnight-atlas-brass-dark: #6B4712; --backdrop-orbits-midnight-atlas-lamp: #FFEBC2; /* the lamp: reflections on the brass, packets */ --backdrop-orbits-midnight-atlas-glow: #F0A63C; /* light seen on the night: pool, wave, comets */ --backdrop-orbits-midnight-atlas-card: #0E1A3A; /* the cartouches */ --backdrop-orbits-midnight-atlas-haze: #5E71A4; /* the night air over a far tool: cool, lighter than the paper */ --backdrop-orbits-midnight-atlas-gem-1: #2F5BC4; /* sapphire */ --backdrop-orbits-midnight-atlas-gem-2: #138C66; /* emerald */ --backdrop-orbits-midnight-atlas-gem-3: #AE2A4A; /* garnet */ --backdrop-orbits-midnight-atlas-gem-4: #6E46B4; /* amethyst */ --backdrop-orbits-midnight-atlas-gem-5: #C9741A; /* topaz */ --backdrop-orbits-midnight-atlas-gem-6: #18929E; /* turquoise */ --backdrop-orbits-midnight-atlas-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif; --backdrop-orbits-midnight-atlas-pole-x: 1.12; --backdrop-orbits-midnight-atlas-pole-y: -.62; --backdrop-orbits-midnight-atlas-reach: .62; --backdrop-orbits-midnight-atlas-gem: 46px; --backdrop-orbits-midnight-atlas-gem-small: 26px; --backdrop-orbits-midnight-atlas-far-size: .84; --backdrop-orbits-midnight-atlas-band: .6; --backdrop-orbits-midnight-atlas-zodiac: 1; --backdrop-orbits-midnight-atlas-numerals: 1; --backdrop-orbits-midnight-atlas-rose: block; --backdrop-orbits-midnight-atlas-rose-x: 8cqw; --backdrop-orbits-midnight-atlas-rose-y: 84cqh; --backdrop-orbits-midnight-atlas-rose-size: 22cqmin; --backdrop-orbits-midnight-atlas-rose-small: none; --backdrop-orbits-midnight-atlas-shade: 1; } /* ---------- the night paper: lit in the middle, gold chain lines, grain ---------- */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-sky { background: var(--backdrop-orbits-midnight-atlas-night); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-night { background: radial-gradient(125% 100% at 58% 44%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-night-deep) 0%, transparent) 52%, var(--backdrop-orbits-midnight-atlas-night-deep) 100%), radial-gradient(56% 62% at var(--backdrop-orbits-x) var(--backdrop-orbits-y), var(--backdrop-orbits-midnight-atlas-night-hi), color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-night-hi) 0%, transparent) 100%); } /* laid paper: chain lines every few centimetres and the faintest laid lines. Close up only. */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-laid { background: repeating-linear-gradient(90deg, transparent 0 140px, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 7%, transparent) 141px, transparent 142.5px), repeating-linear-gradient(0deg, transparent 0 2px, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 2.5%, transparent) 2px 3px); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-grain { opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .8 0 0 0 0 .55 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } /* the milky way's canvas (midnight-atlas.js sizes it: the sky's box) and the chart: a layer of their own only while they print in, then in the sky's layer (trap 12). The chart is clipped to the sky's box (the root clips inside it anyway): unclipped, its graticule stretched the sky's layer to 1987 by 1990 px */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-sky-decor > .backdrop-orbits-midnight-atlas-milky { inset: auto; left: 0; top: 0; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-chart { width: 100%; height: 100%; overflow: hidden; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"]:not(.is-still) .backdrop-orbits-midnight-atlas-chart.is-printing { animation: backdrop-orbits-midnight-atlas-print .9s ease both; will-change: opacity; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"]:not(.is-still) .backdrop-orbits-midnight-atlas-milky.is-printing { animation: backdrop-orbits-midnight-atlas-print 1.4s ease both; will-change: opacity; } /* ---------- gold ink: the shared line weights (about half the ivory atlas's: gold on navy glares) ---------- */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] svg { overflow: visible; max-width: none; max-height: none; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-hair { fill: none; stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 40%, transparent); stroke-width: .7; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-ticks { fill: none; stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 58%, transparent); stroke-width: .8; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-dots { fill: none; stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 52%, transparent); stroke-width: 1.5; stroke-dasharray: .01 3.8; stroke-linecap: round; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-grat { fill: none; stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 30%, transparent); stroke-width: 1.1; stroke-dasharray: .01 4.4; stroke-linecap: round; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-grat-major { fill: none; stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 15%, transparent); stroke-width: .75; } /* gradient stops, coloured from the tokens */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-st-gdark { stop-color: var(--backdrop-orbits-midnight-atlas-gold-dark); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-st-gold { stop-color: var(--backdrop-orbits-midnight-atlas-gold); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-st-ghi { stop-color: var(--backdrop-orbits-midnight-atlas-gold-hi); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-st-dark { stop-color: var(--backdrop-orbits-midnight-atlas-brass-dark); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-st-deep { stop-color: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-brass-dark) 62%, var(--backdrop-orbits-midnight-atlas-brass)); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-st-brass { stop-color: var(--backdrop-orbits-midnight-atlas-brass); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-st-light { stop-color: var(--backdrop-orbits-midnight-atlas-brass-light); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-st-hi { stop-color: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-brass-light) 40%, var(--backdrop-orbits-midnight-atlas-lamp)); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-st-flame { stop-color: var(--backdrop-orbits-midnight-atlas-glow); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-st-spark { stop-color: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-lamp) 40%, #fff); } /* ---------- the chart: graticule, stars in gold leaf, letters, asterisms and their names ---------- */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-stars path { fill: var(--backdrop-orbits-midnight-atlas-gold-hi); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-star-rings circle { fill: none; stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 62%, transparent); stroke-width: .75; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-letters text { font: italic 400 10px/1 var(--backdrop-orbits-midnight-atlas-serif); fill: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 68%, transparent); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-asterism { fill: none; stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 40%, transparent); stroke-width: .85; stroke-dasharray: 3 2.6; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-label { font: 400 9.5px/1 var(--backdrop-orbits-midnight-atlas-serif); letter-spacing: .06em; fill: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 46%, transparent); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-label-mid { text-anchor: middle; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-label-sup { font-size: 7px; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-name { font: italic 400 12px/1 var(--backdrop-orbits-midnight-atlas-serif); letter-spacing: .24em; text-anchor: middle; fill: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 52%, transparent); } /* ---------- the compass rose, at an edge (in the sky, so it moves with the paper) ---------- */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-rose { display: var(--backdrop-orbits-midnight-atlas-rose); inset: auto; left: calc(40px + var(--backdrop-orbits-midnight-atlas-rose-x)); top: calc(40px + var(--backdrop-orbits-midnight-atlas-rose-y)); width: var(--backdrop-orbits-midnight-atlas-rose-size); height: var(--backdrop-orbits-midnight-atlas-rose-size); translate: -50% -50%; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-rose-art { position: absolute; inset: 0; width: 100%; height: 100%; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-rose-dark { fill: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold) 92%, transparent); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-rose-light { fill: var(--backdrop-orbits-midnight-atlas-night); stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 74%, transparent); stroke-width: .9; stroke-linejoin: round; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-rose-hub { fill: var(--backdrop-orbits-midnight-atlas-night); stroke: var(--backdrop-orbits-midnight-atlas-ink); stroke-width: 1.1; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-rose-letters text { font: 600 19px/1 var(--backdrop-orbits-midnight-atlas-serif); fill: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 84%, transparent); text-anchor: middle; dominant-baseline: central; } /* the needle: gold to the north, ivory to the south; the script turns it toward the pointer */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-needle { position: absolute; inset: auto; left: calc(50% - 5px); top: 15%; width: 10px; height: 70%; transform-origin: 50% 50%; will-change: transform; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-needle svg { display: block; width: 100%; height: 100%; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-needle-n { fill: var(--backdrop-orbits-midnight-atlas-gold-hi); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-needle-n2 { fill: var(--backdrop-orbits-midnight-atlas-gold-dark); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-needle-s { fill: var(--backdrop-orbits-midnight-atlas-ivory); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-needle-s2 { fill: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ivory) 62%, var(--backdrop-orbits-midnight-atlas-night)); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-needle-edge { fill: none; stroke: var(--backdrop-orbits-midnight-atlas-night-deep); stroke-width: .9; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-needle-pin { fill: var(--backdrop-orbits-midnight-atlas-gold); stroke: var(--backdrop-orbits-midnight-atlas-night-deep); stroke-width: .9; vector-effect: non-scaling-stroke; } /* ---------- gears engraved in gold line at the edges (sizes in cqmin; the sky overhangs the root by 40px) ---------- They tick: midnight-atlas.js writes `rotate` every few seconds (b meshes with a, 20 teeth to 36, so it turns 36/20 as far, the other way). Each is a layer of its own, so a tick, a clunk and a burst's race are compositor updates: without one the three were squashed into one 700 by 560 px layer and painted again at every write (22 to 29 times in 12 clicks on the sky or the hub; none with the layers) */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-gear { position: absolute; inset: auto; overflow: visible; opacity: .36; will-change: transform; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-gear-a { width: 46cqmin; height: 46cqmin; left: calc(100% - 40px - 27cqmin); top: calc(100% - 40px - 17cqmin); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-gear-b { width: 25.56cqmin; height: 25.56cqmin; left: calc(100% - 40px - 47.69cqmin); top: calc(100% - 40px - 15.64cqmin); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-gear-c { width: 24cqmin; height: 24cqmin; left: calc(100% - 40px - 9cqmin); top: calc(40px - 10cqmin); opacity: .3; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-gear * { vector-effect: non-scaling-stroke; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-gear-body { fill: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold) 7%, transparent); stroke: var(--backdrop-orbits-midnight-atlas-ink); stroke-width: 1; stroke-linejoin: round; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-gear-spoke { fill: none; stroke: var(--backdrop-orbits-midnight-atlas-ink); stroke-width: 1; stroke-linecap: round; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-gear-line { fill: none; stroke: var(--backdrop-orbits-midnight-atlas-ink); stroke-width: .9; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-gear-rule { fill: none; stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 55%, transparent); stroke-width: .6; stroke-dasharray: 1.5 2.5; } /* ---------- the lamp over the instrument (the decor layer: it follows the system at .9 of its parallax) ---------- */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-lamp { inset: auto; left: var(--backdrop-orbits-x); top: var(--backdrop-orbits-y); width: 0; height: 0; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-lamp > * { position: absolute; left: 0; top: 0; display: block; translate: -50% -50%; max-width: none; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-lamp-light { width: calc(var(--backdrop-orbits-r1) * 4.4); height: calc(var(--backdrop-orbits-r1) * 3.1); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-lamp) 15%, transparent), color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 7%, transparent) 48%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 0%, transparent)); } /* the glory: 2.4 outer orbits across (the engine's -paint-rmax), laid into the orbits' plane with the plane's own perspective, roll and tilt (static: drawn once on a layer of its own), so its long rays end just past the outer orbit (its gradient, in midnight-atlas.js, halves them there) */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-glory { width: calc(var(--backdrop-orbits-paint-rmax, 300px) * 2.4); height: calc(var(--backdrop-orbits-paint-rmax, 300px) * 2.4); transform: perspective(var(--backdrop-orbits-perspective, 1500px)) rotate(var(--backdrop-orbits-roll, 0deg)) rotateX(var(--backdrop-orbits-tilt, 60deg)); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-glory path { fill: none; stroke-width: .55; } /* the hub's burst lights the lamp: a warm flare behind the instrument (its own layer) */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-flare { width: calc(var(--backdrop-orbits-r1) * 2.6); height: calc(var(--backdrop-orbits-r1) * 2.2); border-radius: 50%; opacity: 0; will-change: opacity; background: radial-gradient(closest-side, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 38%, transparent), color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 16%, transparent) 45%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 0%, transparent)); } /* ---------- the plane: the engine's rings give way to the brass ---------- */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-disc { background: radial-gradient(closest-side, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-lamp) 8%, transparent), color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-night-hi) 40%, transparent) 60%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-night-hi) 0%, transparent)); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-ring-line { stroke: none; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-ring-glow { display: none; } /* the engine's wave starts at the hub, which on /work is under the showpiece: ours starts at its edge */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-wave { display: none; } /* each band catches the light as the wave crosses it: a bare gold line (a glow on a ring the size of the plane is rasterised again each time a burst starts its fade: the orrery's trap 12) */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-flash { border: 1.8px solid color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold-hi) 70%, #fff); } /* the burst round a covered hub (a click on the showpiece): gilt rules leave its edge, a bright gold rule with a finer one outside it (no blur: the halo is the showpiece's size) */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-halo { border-radius: 14px; border: 2px solid color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold-hi) 88%, #fff); outline: 1.2px solid color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold) 70%, transparent); outline-offset: 5px; box-shadow: none; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-ripple { border: 1.6px solid var(--backdrop-orbits-midnight-atlas-gold-hi); } /* ---------- our layers INSIDE the plane (they take its 3D transform; midnight-atlas.js only turns them) ---------- */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform, opacity; pointer-events: none; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-layer > svg { position: absolute; max-width: none; max-height: none; overflow: visible; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-light, .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-wave, .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-pool { opacity: 0; } /* not drawn until midnight-atlas.js lights one (.is-on, while it shows): trap 12 */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-light:not(.is-on), .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-wave:not(.is-on), .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-pool:not(.is-on), .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-flare:not(.is-on) { display: none; } /* printed in: the first time the brass is drawn it fades in as one layer; the base style is the finished plate (held still, reduced, printed already: nothing animates) */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"]:not(.is-still) .backdrop-orbits-midnight-atlas-plate.is-printing { animation: backdrop-orbits-midnight-atlas-print 1.15s cubic-bezier(.3, .1, .3, 1) .1s both; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"]:not(.is-still) .backdrop-orbits-midnight-atlas-spec.is-printing { animation: backdrop-orbits-midnight-atlas-print 1.4s ease .4s both; } /* the lamp's pool of light on the brass, under the pointer */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-pool > i { position: absolute; display: block; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-lamp) 34%, transparent), color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 30%, transparent) 14%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 14%, transparent) 40%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 5%, transparent) 68%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 0%, transparent)); } /* the brass and its engraving */ /* no fill by default, inherited, so a fill attribute (the rivets' gradient on their group) still wins */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-plate-art, .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-light-art, .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-wave-art { fill: none; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-band { stroke: var(--backdrop-orbits-midnight-atlas-brass); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-shadow { stroke: rgb(1 3 12 / .42); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-edge { stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-brass-dark) 70%, #000); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-bevel { stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-lamp) 80%, transparent); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-rule { stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 36%, transparent); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-rule-soft { stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 24%, transparent); } /* ticks and pits cut into the brass are dark; on the night beside it they are gold */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-tick { stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-brass-dark) 75%, #000); stroke-opacity: .75; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-zodiac .backdrop-orbits-midnight-atlas-tick { stroke: var(--backdrop-orbits-midnight-atlas-ink); stroke-opacity: .5; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-pit { stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-brass-dark) 70%, #000); stroke-opacity: .6; stroke-linecap: round; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-star { stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 30%, transparent); stroke-width: .7; stroke-linejoin: round; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-chequer { stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 46%, transparent); stroke-dasharray: 1 1; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-sector { stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 36%, transparent); stroke-width: .6; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-rope { stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 34%, transparent); stroke-width: .7; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-hatch { stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 50%, transparent); stroke-width: .7; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-foil { stroke-width: 2; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-foil-fine { stroke-width: 1.3; } /* the lettering is single strokes (cut in midnight-atlas.js): its shadow a fraction below, then the gold cut */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-cut, .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-num, .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-lo { stroke-linecap: round; stroke-linejoin: round; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-cut { stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 78%, transparent); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-num { stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 70%, transparent); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-lo { stroke: rgb(1 3 12 / .55); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-hours path { stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 76%, transparent); stroke-linecap: butt; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-num-thick { stroke-width: 1.3; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-num-thin { stroke-width: .6; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-strut { stroke-linecap: round; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-strut-edge { stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-brass-dark) 70%, #000); stroke-linecap: round; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-strut-shadow { stroke: rgb(1 3 12 / .38); stroke-linecap: round; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-rivets circle { stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-brass-dark) 70%, #000); stroke-width: .6; } /* the lamp in the brass; the light (a glow on every band and a comet on each); the wave */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-spec-art path { fill: none; stroke-linecap: round; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-bloom { stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 22%, transparent); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-beam { stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 60%, #fff); stroke-opacity: .8; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-comet { stroke-linecap: round; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-light-art .backdrop-orbits-midnight-atlas-comet-head { fill: #fff; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-wave-bloom { stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 22%, transparent); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-wave-band { stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 70%, transparent); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-wave-echo { stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold-hi) 55%, transparent); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-wave-core { stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-lamp) 45%, #fff); } /* ---------- arms, shadows, moons ---------- */ /* an arm is a thin brass rod, drawn on the spoke's ::before (the engine owns the spoke's opacity, so a spoke crossing the host's content fades its rod: midnight-atlas.js); a lit one carries light out */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-spoke { height: 2.2px; margin-top: -1.1px; background: none; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-spoke::before { content: ""; position: absolute; inset: 0; border-radius: 2px; opacity: .78; transition: opacity .3s ease; background: linear-gradient(180deg, var(--backdrop-orbits-midnight-atlas-brass-dark), var(--backdrop-orbits-midnight-atlas-brass-light) 42%, var(--backdrop-orbits-midnight-atlas-brass) 64%, var(--backdrop-orbits-midnight-atlas-brass-dark)); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-spoke::after { content: ""; position: absolute; inset: -.6px 0; border-radius: 3px; transform-origin: 0 50%; opacity: 0; transform: scaleX(0); transition: opacity .8s ease, transform 0s linear .8s; background: linear-gradient(90deg, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 0%, transparent) 6%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 80%, transparent) 55%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-lamp) 70%, #fff)); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-spoke.is-lit::after { opacity: 1; transform: scaleX(1); transition: opacity .12s ease, transform .5s cubic-bezier(.3, .6, .3, 1); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-spoke.backdrop-orbits-midnight-atlas-crossing::before, .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-spoke.backdrop-orbits-midnight-atlas-crossing::after { opacity: 0; transition: opacity .25s ease; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-shadow { width: 82px; height: 82px; margin: -41px 0 0 -41px; border-radius: 50%; background: radial-gradient(closest-side, rgb(1 3 12 / .55), rgb(1 3 12 / .22) 55%, rgb(1 3 12 / 0)); } /* satellites: small moons, half lit; the moon is the ::before, and that is what tucks away (a scale on the satellite itself, placed with transform, scales its position too) */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-satellite { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: none; box-shadow: none; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-satellite::before { content: ""; position: absolute; inset: 0; border-radius: 50%; transition: scale .45s ease; background: linear-gradient(90deg, var(--backdrop-orbits-midnight-atlas-night) 50%, var(--backdrop-orbits-midnight-atlas-gold-hi) 50%); box-shadow: 0 0 0 1px var(--backdrop-orbits-midnight-atlas-gold), 0 0 0 3px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-night) 70%, transparent); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-satellite.backdrop-orbits-midnight-atlas-tucked::before { scale: 0; } /* ---------- the tools: enamel globes in brass bezels, a navy cartouche hung below ---------- */ /* The card's box holds the globe and the cartouche, padded above the globe by exactly the cartouche's height (8 px hanger + 22 px) so the box is centred on the GLOBE and the globe sits on the tool's point, and scaled by depth round it. Only the globe and the cartouche take the pointer. */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-card { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 30px 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--backdrop-orbits-midnight-atlas-ivory); pointer-events: none; transform-origin: 50% 50%; transform: scale(calc(var(--backdrop-orbits-midnight-atlas-far-size) + (1 - var(--backdrop-orbits-midnight-atlas-far-size)) * var(--backdrop-orbits-paint-depth, 1))); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-body:not(.is-avoided) .backdrop-orbits-icon, .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-body:not(.is-avoided) .backdrop-orbits-name { pointer-events: auto; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-icon { position: relative; width: var(--backdrop-orbits-midnight-atlas-gem); height: var(--backdrop-orbits-midnight-atlas-gem); border-radius: 50%; /* the bezel: a ring of polished brass */ background: conic-gradient(from 200deg, var(--backdrop-orbits-midnight-atlas-brass-dark), var(--backdrop-orbits-midnight-atlas-brass-light) 14%, #FFF4D2 19%, var(--backdrop-orbits-midnight-atlas-brass) 30%, var(--backdrop-orbits-midnight-atlas-brass-dark) 48%, var(--backdrop-orbits-midnight-atlas-brass) 64%, var(--backdrop-orbits-midnight-atlas-brass-light) 78%, var(--backdrop-orbits-midnight-atlas-brass) 90%, var(--backdrop-orbits-midnight-atlas-brass-dark)); /* the nearer the globe, the further and darker its shadow */ box-shadow: 0 0 0 1px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-brass-dark) 70%, #000), 0 calc(5px + 9px * var(--backdrop-orbits-paint-depth, 1)) calc(8px + 10px * var(--backdrop-orbits-paint-depth, 1)) calc(-3px - 1px * var(--backdrop-orbits-paint-depth, 1)) rgb(1 3 12 / calc(.4 + .3 * var(--backdrop-orbits-paint-depth, 1))); } /* the enamel: a deep sphere lit from above left, with warm light bounced up from the brass */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-icon::before { content: ""; position: absolute; inset: 11.4%; border-radius: 50%; background: radial-gradient(circle at 68% 86%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-brass-light) 50%, transparent), color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-brass-light) 0%, transparent) 36%), radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-paint-gem, #2F5BC4) 52%, #fff), var(--backdrop-orbits-midnight-atlas-paint-gem, #2F5BC4) 50%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-paint-gem, #2F5BC4) 48%, #000) 100%); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .3), inset 0 -3px 5px rgb(0 0 0 / .3); } /* aerial perspective on a night chart: the further back a globe is, the more of the night's own haze lies over it, cool and a little lighter than the paper, so a far tool recedes into the sky (night laid over it, as the ivory atlas lays paper, turned a topaz globe brown and sank its cartouche into the paper). The cartouche keeps its words: gold-hi through the haze reads at about 5:1 on the hazed navy */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-icon::after, .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-name::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: 4; background: var(--backdrop-orbits-midnight-atlas-haze); opacity: calc((1 - var(--backdrop-orbits-paint-depth, 1)) * .4); } /* a globe passing behind host words (midnight-atlas.js: the shaded lines) dims under them, so the letters over it keep their contrast (as strong as the shade token says; at 0 nothing is dimmed) */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-body.backdrop-orbits-midnight-atlas-under .backdrop-orbits-icon::after, .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-body.backdrop-orbits-midnight-atlas-under .backdrop-orbits-name::after { background: var(--backdrop-orbits-midnight-atlas-night-deep); opacity: calc(.64 * clamp(0, var(--backdrop-orbits-midnight-atlas-shade), 1)); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-icon svg.backdrop-orbits-midnight-atlas-globe { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; fill: none; stroke: none; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-icon > svg:not(.backdrop-orbits-midnight-atlas-globe):not(.backdrop-orbits-midnight-atlas-aureole) { position: relative; z-index: 2; width: 38%; height: 38%; fill: none; stroke: #FFF8E6; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 0 rgb(0 0 0 / .4)); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-globe-grid { fill: none; stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold-hi) 46%, transparent); stroke-width: .5; transition: stroke .25s ease; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-globe-shine { fill: #fff; opacity: .7; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-globe-rim { fill: none; stroke: rgb(0 0 0 / .45); stroke-width: .8; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-globe-horizon { fill: none; stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-brass-dark) 70%, #000); stroke-width: .7; stroke-dasharray: .01 1.6; stroke-linecap: round; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-globe-edge { fill: none; stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold-hi) 55%, transparent); stroke-width: .5; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-globe-claws circle { stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-brass-dark) 70%, #000); stroke-width: .45; } /* the lamp on the enamel: midnight-atlas.js shifts it a few pixels with the pointer */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-glint { position: absolute; left: 24%; top: 20%; width: 30%; height: 20%; z-index: 3; border-radius: 50%; rotate: -28deg; pointer-events: none; background: radial-gradient(closest-side, rgb(255 255 255 / .85), rgb(255 255 255 / .3) 55%, rgb(255 255 255 / 0)); } /* the cartouche: 22 px tall, 8 px below the globe (the card's top padding is the sum); navy enamel in a gold rule, the name in gold small caps. It swings from its hanger's top. */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-name { position: relative; box-sizing: border-box; height: 22px; margin-top: 8px; padding: 3px 9px 4px; border-radius: 1.5px; transform-origin: 50% -8px; font: 600 13.5px/13px var(--backdrop-orbits-midnight-atlas-serif); font-variant-caps: all-small-caps; letter-spacing: .12em; color: var(--backdrop-orbits-midnight-atlas-gold-hi); background: var(--backdrop-orbits-midnight-atlas-card); border: 1px solid color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold) 78%, transparent); box-shadow: inset 0 0 0 2px var(--backdrop-orbits-midnight-atlas-card), inset 0 0 0 2.6px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold) 38%, transparent), 0 calc(3px + 4px * var(--backdrop-orbits-paint-depth, 1)) 10px -5px rgb(1 3 12 / calc(.4 + .25 * var(--backdrop-orbits-paint-depth, 1))); transition: border-color .25s ease, color .25s ease, opacity .3s ease; } /* the hanger: a brass wire from the globe to its cartouche. Its box is wider than the wire and fills the gap (it is part of the cartouche, so it takes the pointer): moving from the globe down to the label never crosses the card's empty padding, which would un-hover the tool between the two */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-name::before { content: ""; position: absolute; left: calc(50% - 16px); bottom: 100%; width: 32px; height: 9px; background: linear-gradient(90deg, transparent 15.4px, var(--backdrop-orbits-midnight-atlas-brass) 15.4px 16.6px, transparent 16.6px) 0 0 / 100% 8px no-repeat; } /* the globe is behind the anchor (not front mode): its cartouche goes too (midnight-atlas.js) */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-body.backdrop-orbits-midnight-atlas-behind .backdrop-orbits-name { opacity: 0; } /* hit pulse: a gold ring round the globe (the globe starts below the card's padding) */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-ping { inset: auto; left: calc(50% - var(--backdrop-orbits-midnight-atlas-gem) / 2 - 5px); top: 25px; width: calc(var(--backdrop-orbits-midnight-atlas-gem) + 10px); height: calc(var(--backdrop-orbits-midnight-atlas-gem) + 10px); border-radius: 50%; border: 1.5px solid var(--backdrop-orbits-midnight-atlas-gold-hi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 30%, transparent); } /* hover: the bezel catches the lamp, the meridians turn to gold leaf, the cartouche's rule brightens */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-body.is-hover .backdrop-orbits-icon, .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-body.is-hit .backdrop-orbits-icon { box-shadow: 0 0 0 1px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-brass-dark) 70%, #000), 0 0 0 3.5px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-lamp) 62%, transparent), 0 0 20px 4px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 42%, transparent), 0 14px 20px -6px rgb(1 3 12 / .7); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-body.is-hover .backdrop-orbits-midnight-atlas-globe-grid { stroke: var(--backdrop-orbits-midnight-atlas-gold-hi); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-body.is-hover .backdrop-orbits-name, .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-body.is-hit .backdrop-orbits-name { color: var(--backdrop-orbits-midnight-atlas-ivory); border-color: var(--backdrop-orbits-midnight-atlas-gold-hi); box-shadow: inset 0 0 0 2px var(--backdrop-orbits-midnight-atlas-card), inset 0 0 0 2.6px var(--backdrop-orbits-midnight-atlas-gold), 0 8px 14px -6px rgb(1 3 12 / .65); } /* the tool nearest the pointer catches the lamp (midnight-atlas.js) */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-body.backdrop-orbits-midnight-atlas-near .backdrop-orbits-icon { box-shadow: 0 0 0 1px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-brass-dark) 70%, #000), 0 0 0 2.5px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold-hi) 70%, transparent), 0 0 14px 2px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 30%, transparent), 0 calc(5px + 9px * var(--backdrop-orbits-paint-depth, 1)) calc(8px + 10px * var(--backdrop-orbits-paint-depth, 1)) calc(-3px - 1px * var(--backdrop-orbits-paint-depth, 1)) rgb(1 3 12 / calc(.4 + .3 * var(--backdrop-orbits-paint-depth, 1))); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-body.backdrop-orbits-midnight-atlas-near .backdrop-orbits-midnight-atlas-globe-grid { stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold-hi) 80%, transparent); } /* front mode: a tool passing in front of the host's picture is drawn over it. The enamel, the bezel and the cartouche are opaque already; a deeper shadow seats them on the picture */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-body.is-front .backdrop-orbits-icon { box-shadow: 0 0 0 1px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-brass-dark) 70%, #000), 0 14px 22px -8px rgb(4 8 22 / .6), 0 3px 6px -1px rgb(4 8 22 / .45); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"].is-front .backdrop-orbits-name { background-color: var(--backdrop-orbits-midnight-atlas-card); } /* ---------- the featured tool: a stage (backdrop-orbits-stage) shows its example ---------- The brightest star on the chart: the globe a size up in a lamp-lit bezel, an aureole of fine gold rays round it (midnight-atlas.js draws it once per tool; here it fades in and opens out), its meridians in gold leaf, no night haze over it wherever it is on its orbit, and its cartouche struck in gold leaf with the name in navy (reversed, as a chart prints its title). These rules come after hover, near and front so the featured look holds through them; none of its shadows follows the depth (a transition on one that did would restart at every depth step: trap 6), and only opacity and scale move. */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-body.is-featured .backdrop-orbits-card { filter: none; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-icon { transition: scale .55s cubic-bezier(.2, .7, .2, 1); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-body.is-featured .backdrop-orbits-icon { scale: 1.14; box-shadow: 0 0 0 1px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-brass-dark) 70%, #000), 0 0 0 2.4px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-lamp) 85%, transparent), 0 0 0 3.6px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold) 75%, transparent), 0 0 24px 6px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 42%, transparent), 0 14px 20px -6px rgb(1 3 12 / .7); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-body.is-featured:not(.backdrop-orbits-midnight-atlas-under) .backdrop-orbits-icon::after, .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-body.is-featured:not(.backdrop-orbits-midnight-atlas-under) .backdrop-orbits-name::after { opacity: 0; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-body.is-featured .backdrop-orbits-midnight-atlas-globe-grid { stroke: var(--backdrop-orbits-midnight-atlas-gold-hi); } /* the aureole: behind the bezel and the cartouche (z-index -1 in the card's stacking context), 2.3 globes across. Not displayed until the tool is featured: the engine steps each tool's depth, an inherited property, a few times a second, and every step restyled the ten nodes of all eight aureoles too (idle restyles up 17%); a subtree that is not displayed is not styled. It fades in from @starting-style and out with display's discrete transition (a browser without them shows and hides it at once) */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-icon > svg.backdrop-orbits-midnight-atlas-aureole { position: absolute; left: 50%; top: 50%; z-index: -1; width: 230%; height: 230%; translate: -50% -50%; pointer-events: none; display: none; opacity: 0; scale: .7; transition: opacity .45s ease, scale .8s cubic-bezier(.2, .7, .2, 1), display .45s allow-discrete; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-body.is-featured .backdrop-orbits-icon > svg.backdrop-orbits-midnight-atlas-aureole { display: block; opacity: 1; scale: 1; } @starting-style { .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-body.is-featured .backdrop-orbits-icon > svg.backdrop-orbits-midnight-atlas-aureole { opacity: 0; scale: .7; } } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-aureole path { fill: none; stroke-linecap: round; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-aureole-long { stroke-width: .8; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-aureole-fine { stroke-width: .5; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-aureole-rule { fill: none; stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 66%, transparent); stroke-width: .5; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-aureole-beads { fill: none; stroke: var(--backdrop-orbits-midnight-atlas-gold-hi); stroke-width: 1.3; stroke-dasharray: 0 1; stroke-linecap: round; } /* the cartouche struck in gold leaf, the name in navy, a fine navy rule inside its edge */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-body.is-featured .backdrop-orbits-name { color: var(--backdrop-orbits-midnight-atlas-card); border-color: var(--backdrop-orbits-midnight-atlas-gold-dark); background: linear-gradient(180deg, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold-hi) 70%, #fff), var(--backdrop-orbits-midnight-atlas-gold-hi) 34%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold) 70%, var(--backdrop-orbits-midnight-atlas-gold-hi))); outline: .6px solid color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-card) 55%, transparent); outline-offset: -3.2px; box-shadow: inset 0 1px 0 rgb(255 252 240 / .55), 0 0 16px -2px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 55%, transparent), 0 8px 14px -6px rgb(1 3 12 / .65); text-shadow: 0 1px 0 rgb(255 250 232 / .5); } /* its arm: the brass rod lit full, and the stage's beam as a gold rule cased in night, a bead of lamplight running along it into the stage (the add-on's elements, in the tool's spoke) */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-spoke.is-featured::before { opacity: 1; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-stage-beam { --backdrop-orbits-stage-beam: 2.4px; background: linear-gradient(90deg, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold) 0%, transparent) 6%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold) 75%, transparent) 36%, var(--backdrop-orbits-midnight-atlas-gold-hi) 78%, var(--backdrop-orbits-midnight-atlas-lamp)); box-shadow: 0 0 0 .8px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-night-deep) 85%, transparent), 0 0 10px 1px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 40%, transparent); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-stage-packet { background: radial-gradient(closest-side, #fff, var(--backdrop-orbits-midnight-atlas-lamp) 42%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 0%, transparent)); } /* held still or reduced: the featured look arrives as a plain fade, nothing grows */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"].is-still .backdrop-orbits-icon { transition: none; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"].is-still .backdrop-orbits-icon > svg.backdrop-orbits-midnight-atlas-aureole { scale: 1; transition: opacity .16s ease, display .16s allow-discrete; } /* ---------- the hub: a gold seal in a turning rete ---------- */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-hub-glow { width: calc(var(--backdrop-orbits-r1) * 1.1); height: calc(var(--backdrop-orbits-r1) * .8); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-lamp) 26%, transparent), color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 10%, transparent) 50%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 0%, transparent)); } /* the rete ticks with the gears (midnight-atlas.js writes its `rotate`), and holds where the anchor covers the hub (on /work, at every size but a phone's) */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-rete { position: absolute; left: 0; top: 0; width: 104px; height: 104px; translate: -50% -50%; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-rete-star { fill: none; stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 60%, transparent); stroke-width: .75; stroke-linejoin: round; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-hub-core { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: var(--backdrop-orbits-midnight-atlas-night); background: radial-gradient(closest-side, transparent 0 63%, var(--backdrop-orbits-midnight-atlas-night) 64% 67%, transparent 68%), radial-gradient(circle at 38% 32%, var(--backdrop-orbits-midnight-atlas-gold-hi), var(--backdrop-orbits-midnight-atlas-gold) 52%, var(--backdrop-orbits-midnight-atlas-gold-dark) 100%); box-shadow: inset 0 0 0 1.2px var(--backdrop-orbits-midnight-atlas-gold-dark), inset 0 1px 0 3px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-lamp) 35%, transparent), 0 0 0 1px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold-hi) 40%, transparent), 0 12px 24px -10px rgb(1 3 12 / .8); transition: box-shadow .3s ease; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-hub-core svg { width: 20px; height: 20px; fill: var(--backdrop-orbits-midnight-atlas-night); stroke: var(--backdrop-orbits-midnight-atlas-night); stroke-width: .8; stroke-linejoin: round; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"].is-hub-hover .backdrop-orbits-hub-core, .backdrop-orbits[data-backdrop-skin="midnight-atlas"].is-burst .backdrop-orbits-hub-core { box-shadow: inset 0 0 0 1.2px var(--backdrop-orbits-midnight-atlas-gold-dark), inset 0 1px 0 3px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-lamp) 50%, transparent), 0 0 0 4px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold-hi) 40%, transparent), 0 0 30px 6px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 45%, transparent), 0 12px 24px -10px rgb(1 3 12 / .8); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-hub-ping { inset: -7px; border: 1.5px solid var(--backdrop-orbits-midnight-atlas-gold-hi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 30%, transparent); } /* ---------- work on its way: a bead of lamplight with a dotted gold trail ---------- */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-packet { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: radial-gradient(circle, #fff 0 22%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-lamp) 85%, #fff) 38%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 65%, transparent) 56%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-glow) 0%, transparent) 74%); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-packet::before { content: ""; position: absolute; right: 70%; top: 50%; width: 52px; height: 5px; margin-top: -2.5px; background: radial-gradient(circle at 92% 50%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold-hi) 90%, transparent) 0 1.6px, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold-hi) 0%, transparent) 2.1px), radial-gradient(circle at 75% 50%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold-hi) 70%, transparent) 0 1.4px, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold-hi) 0%, transparent) 1.9px), radial-gradient(circle at 58% 50%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold) 55%, transparent) 0 1.2px, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold) 0%, transparent) 1.7px), radial-gradient(circle at 41% 50%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold) 40%, transparent) 0 1px, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold) 0%, transparent) 1.5px), radial-gradient(circle at 24% 50%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold) 26%, transparent) 0 .85px, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold) 0%, transparent) 1.35px), radial-gradient(circle at 7% 50%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold) 14%, transparent) 0 .7px, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold) 0%, transparent) 1.2px); } /* sized round its own middle: the engine places the wrapper (.backdrop-orbits-packet-at), this is its child */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-packet.is-ambient { scale: .78; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-packet.is-select { scale: 1.25; } /* ---------- the result: an engraved brass plaque with two screws (in the overlay, placed by the engine, hanging up from its anchor: translate -50% -100%, which the engine counts on) ---------- */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-chip-text { display: flex; align-items: center; gap: 8px; translate: -50% -100%; padding: 6px 10px 7px; border-radius: 3px; white-space: nowrap; font: 700 12px/1 var(--backdrop-orbits-midnight-atlas-serif); font-variant-caps: all-small-caps; letter-spacing: .1em; color: #2A1A05; text-shadow: 0 1px 0 rgb(255 246 214 / .7); background: linear-gradient(180deg, rgb(255 255 255 / .5), rgb(255 255 255 / 0) 42%, rgb(0 0 0 / 0) 58%, rgb(60 34 4 / .16)), linear-gradient(100deg, var(--backdrop-orbits-midnight-atlas-brass) 0, var(--backdrop-orbits-midnight-atlas-brass-light) 30%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-brass-light) 50%, #fff) 44%, var(--backdrop-orbits-midnight-atlas-brass-light) 58%, var(--backdrop-orbits-midnight-atlas-brass) 100%); box-shadow: 0 0 0 1px var(--backdrop-orbits-midnight-atlas-brass-dark), inset 0 0 0 2px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-brass-light) 60%, transparent), inset 0 0 0 2.75px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-brass-dark) 45%, transparent), 0 14px 24px -10px rgb(1 3 12 / .8); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-chip-text::before, .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-chip-text::after { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: linear-gradient(135deg, transparent 43%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-brass-dark) 85%, transparent) 43% 57%, transparent 57%), radial-gradient(circle at 35% 30%, #FFF6D8, var(--backdrop-orbits-midnight-atlas-brass) 60%, var(--backdrop-orbits-midnight-atlas-brass-dark)); box-shadow: 0 0 0 .5px var(--backdrop-orbits-midnight-atlas-brass-dark), 0 1px 0 rgb(255 246 214 / .6); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-chip-text::after { rotate: 70deg; } /* ---------- the tooltip: a navy cartouche in a double gold rule ---------- */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-tip { width: max-content; max-width: 244px; padding: 11px 15px 12px; border-radius: 2px; background: var(--backdrop-orbits-midnight-atlas-card); color: var(--backdrop-orbits-midnight-atlas-ivory); border: 1px solid color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold) 85%, transparent); box-shadow: inset 0 0 0 3px var(--backdrop-orbits-midnight-atlas-card), inset 0 0 0 3.7px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold) 45%, transparent), 0 22px 40px -18px rgb(1 3 12 / .75), 0 3px 8px -3px rgb(1 3 12 / .5); font: italic 400 14px/1.42 var(--backdrop-orbits-midnight-atlas-serif); } /* the pointer of a cartouche beside its tool (the engine centres it on the tool's row) */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-tip::before { content: ""; position: absolute; left: -6px; top: 50%; width: 10px; height: 10px; margin-top: -5px; rotate: 45deg; background: inherit; border: inherit; border-width: 0 0 1px 1px; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-tip.is-flip::before { left: auto; right: -6px; border-width: 1px 1px 0 0; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-tip.is-above::before, .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-tip.is-below::before { display: none; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-tip-name { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font: 600 14.5px/1.15 var(--backdrop-orbits-midnight-atlas-serif); font-style: normal; font-variant-caps: all-small-caps; letter-spacing: .12em; color: var(--backdrop-orbits-midnight-atlas-gold-hi); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-tip-name::before { content: ""; flex: none; width: 12px; height: 12px; background: radial-gradient(closest-side, var(--backdrop-orbits-midnight-atlas-gold-hi) 0 24%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold-hi) 0%, transparent) 46%), linear-gradient(90deg, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold) 0%, transparent), var(--backdrop-orbits-midnight-atlas-gold) 50%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold) 0%, transparent)) center / 100% 16% no-repeat, linear-gradient(color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold) 0%, transparent), var(--backdrop-orbits-midnight-atlas-gold) 50%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold) 0%, transparent)) center / 16% 100% no-repeat; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-tip-line { display: block; color: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ivory) 88%, var(--backdrop-orbits-midnight-atlas-card)); } /* ---------- the engine's spark (only when a host skips this skin's construction) and the bits ---------- */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-spark-head { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #fff 0 25%, var(--backdrop-orbits-midnight-atlas-gold-hi) 45%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold) 0%, transparent) 72%); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-spark-tail { height: 2px; margin-top: -1px; background: linear-gradient(90deg, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold) 0%, transparent), var(--backdrop-orbits-midnight-atlas-gold-hi)); } /* gold filings and glints when a packet lands; the diamond is turned on ::before (a rotate on the bit, which the engine moves with transform, turns its whole flight) */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-bit { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 0; background: none; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-bit::before { content: ""; position: absolute; inset: 0; border-radius: 1px; rotate: 45deg; background: linear-gradient(135deg, #FFF6D8, var(--backdrop-orbits-midnight-atlas-brass-light) 35%, var(--backdrop-orbits-midnight-atlas-brass) 65%, var(--backdrop-orbits-midnight-atlas-brass-dark)); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-bit.is-glint::before { content: none; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-bit.is-glint { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: radial-gradient(closest-side, #fff 0 16%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-lamp) 0%, transparent) 52%), linear-gradient(90deg, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold-hi) 0%, transparent), var(--backdrop-orbits-midnight-atlas-gold-hi) 50%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold-hi) 0%, transparent)) center / 100% 12% no-repeat, linear-gradient(color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold-hi) 0%, transparent), var(--backdrop-orbits-midnight-atlas-gold-hi) 50%, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold-hi) 0%, transparent)) center / 12% 100% no-repeat; } /* ---------- this skin's own layers: constellation lines, the clicks' drawing, the finder ---------- */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-ink, .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-fx { position: absolute; inset: 0; pointer-events: none; } /* a line has a layer only while it shows (midnight-atlas.js sets will-change with its visibility) */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-line { position: absolute; left: 0; top: 0; width: 100px; height: 1.4px; margin-top: -.7px; transform-origin: 0 50%; background: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 72%, transparent); } /* the shade under host words the tools pass behind: a soft patch of deeper night, placed by midnight-atlas.js where the words cross the instrument (over the plate, the arms and the lines, under the tools), painted once */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-shades { position: absolute; inset: 0; pointer-events: none; opacity: clamp(0, var(--backdrop-orbits-midnight-atlas-shade), 1); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-shade { position: absolute; display: block; border-radius: 12px; background: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-night-deep) 72%, transparent); box-shadow: 0 0 10px 5px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-night-deep) 72%, transparent); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-line.is-near { background: var(--backdrop-orbits-midnight-atlas-gold-hi); } /* front mode: the lines are drawn over the showpiece too (in the overlay), so they are cased in night, as a map cases a road: a gold line on the light picture reads */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"].is-front .backdrop-orbits-midnight-atlas-line { box-shadow: 0 0 0 .9px color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-night) 80%, transparent); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-line.is-lit, .backdrop-orbits[data-backdrop-skin="midnight-atlas"].is-burst .backdrop-orbits-midnight-atlas-line { height: 1.9px; margin-top: -.95px; background: linear-gradient(90deg, var(--backdrop-orbits-midnight-atlas-gold-dark), var(--backdrop-orbits-midnight-atlas-gold-hi) 30%, var(--backdrop-orbits-midnight-atlas-gold) 55%, var(--backdrop-orbits-midnight-atlas-gold-hi) 80%, var(--backdrop-orbits-midnight-atlas-gold-dark)); } /* the compass mark where empty sky was clicked */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-mark { position: absolute; left: 0; top: 0; width: 60px; height: 60px; margin: -30px 0 0 -30px; opacity: 0; transition: opacity .6s ease; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-mark svg { display: block; width: 100%; height: 100%; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-mark circle { fill: none; stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 80%, transparent); stroke-width: 1.1; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-mark .backdrop-orbits-midnight-atlas-mark-out { stroke: var(--backdrop-orbits-midnight-atlas-gold-hi); stroke-width: 1.3; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-mark .backdrop-orbits-midnight-atlas-mark-dots { stroke-dasharray: .01 3; stroke-linecap: round; stroke-width: 1.5; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-mark-ticks { fill: none; stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 66%, transparent); stroke-width: .9; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-mark-star { fill: var(--backdrop-orbits-midnight-atlas-gold-hi); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-mark.is-on { opacity: .92; transition: opacity .12s ease; } /* the mark fades; its svg is pressed down onto the paper (the press scales the svg: the mark is placed with transform, and a scale on it would scale its position too) */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"]:not(.is-still) .backdrop-orbits-midnight-atlas-mark.is-on { animation: backdrop-orbits-midnight-atlas-stamp 2s cubic-bezier(.2, .7, .3, 1) both; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"]:not(.is-still) .backdrop-orbits-midnight-atlas-mark.is-on svg { animation: backdrop-orbits-midnight-atlas-press .3s cubic-bezier(.2, .7, .3, 1) both; } /* the same keyframes under another name: switching names restarts them without a layout read */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"]:not(.is-still) .backdrop-orbits-midnight-atlas-mark.is-on.is-alt { animation-name: backdrop-orbits-midnight-atlas-stamp-b; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"]:not(.is-still) .backdrop-orbits-midnight-atlas-mark.is-on.is-alt svg { animation-name: backdrop-orbits-midnight-atlas-press-b; } /* the dividers construction: leg, dividers, arc, the stretch of orbit inked in gold, a star where it lands */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-cons { position: absolute; left: 0; top: 0; overflow: visible; opacity: 0; transition: opacity .55s ease; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-cons.is-on { opacity: 1; transition: opacity .1s ease; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-cons path { fill: none; stroke-dasharray: 100 100; stroke-linecap: round; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-cons-leg { stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 72%, transparent); stroke-width: 1.1; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-cons-dividers { stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 42%, transparent); stroke-width: .8; stroke-linejoin: round; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-cons-arc { stroke: var(--backdrop-orbits-midnight-atlas-ivory); stroke-width: 1.2; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-cons-orbit { stroke: var(--backdrop-orbits-midnight-atlas-gold-hi); stroke-width: 2.6; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-cons-pivot { fill: var(--backdrop-orbits-midnight-atlas-night); stroke: var(--backdrop-orbits-midnight-atlas-gold-hi); stroke-width: 1.1; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-cons-hinge { fill: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 70%, transparent); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-cons .backdrop-orbits-midnight-atlas-cons-star { fill: var(--backdrop-orbits-midnight-atlas-gold-hi); stroke: var(--backdrop-orbits-midnight-atlas-gold-dark); stroke-width: .7; stroke-dasharray: none; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"]:not(.is-still) .backdrop-orbits-midnight-atlas-cons.is-on { animation: backdrop-orbits-midnight-atlas-cons 2.3s linear both; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"]:not(.is-still) .backdrop-orbits-midnight-atlas-cons.is-on.is-alt { animation-name: backdrop-orbits-midnight-atlas-cons-b; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"]:not(.is-still) .backdrop-orbits-midnight-atlas-cons.is-on .backdrop-orbits-midnight-atlas-cons-leg { animation: backdrop-orbits-midnight-atlas-draw .42s cubic-bezier(.4, .1, .3, 1) .05s both; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"]:not(.is-still) .backdrop-orbits-midnight-atlas-cons.is-on .backdrop-orbits-midnight-atlas-cons-dividers { animation: backdrop-orbits-midnight-atlas-draw .4s ease-out both; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"]:not(.is-still) .backdrop-orbits-midnight-atlas-cons.is-on .backdrop-orbits-midnight-atlas-cons-arc { animation: backdrop-orbits-midnight-atlas-draw .5s cubic-bezier(.4, .1, .3, 1) .3s both; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"]:not(.is-still) .backdrop-orbits-midnight-atlas-cons.is-on .backdrop-orbits-midnight-atlas-cons-orbit { animation: backdrop-orbits-midnight-atlas-draw .55s cubic-bezier(.3, .6, .3, 1) .95s both; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"]:not(.is-still) .backdrop-orbits-midnight-atlas-cons.is-on .backdrop-orbits-midnight-atlas-cons-star { animation: backdrop-orbits-midnight-atlas-pop .5s cubic-bezier(.3, 1.6, .5, 1) .95s both; transform-box: fill-box; transform-origin: center; } /* the bead of light that runs down the leg: from the click (-paint-from) to the orbit (-paint-to) */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-pen { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; opacity: 0; background: radial-gradient(circle, #fff 0 24%, var(--backdrop-orbits-midnight-atlas-lamp) 42%, var(--backdrop-orbits-midnight-atlas-gold) 70%); box-shadow: 0 0 0 1.5px var(--backdrop-orbits-midnight-atlas-night), 0 0 0 2.6px var(--backdrop-orbits-midnight-atlas-gold-hi); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"]:not(.is-still) .backdrop-orbits-midnight-atlas-pen.is-on { animation: backdrop-orbits-midnight-atlas-pen .82s cubic-bezier(.45, .05, .3, 1) .26s both; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"]:not(.is-still) .backdrop-orbits-midnight-atlas-pen.is-on.is-alt { animation-name: backdrop-orbits-midnight-atlas-pen-b; } /* gold meridians ruled outward from the hub on a burst, each along the line the script writes, drawn only from where it leaves the anchor (the -paint-from fraction), staggered */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-ray { position: absolute; left: 0; top: 0; width: 100px; height: 1.6px; margin-top: -.8px; transform-origin: 0 50%; opacity: 0; transform: var(--backdrop-orbits-midnight-atlas-paint-ray, none) scaleX(var(--backdrop-orbits-midnight-atlas-paint-s2, 1)); background: linear-gradient(90deg, color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-gold) 0%, transparent) calc(var(--backdrop-orbits-midnight-atlas-paint-from, 0) * 100%), color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 70%, transparent) calc(var(--backdrop-orbits-midnight-atlas-paint-from, 0) * 100% + 6%), color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 80%, transparent) 84%, var(--backdrop-orbits-midnight-atlas-gold-hi) 95%, #fff); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"]:not(.is-still) .backdrop-orbits-midnight-atlas-ray.is-on { animation: backdrop-orbits-midnight-atlas-ray 1.5s cubic-bezier(.2, .65, .3, 1) var(--backdrop-orbits-midnight-atlas-paint-delay, 0s) both; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"]:not(.is-still) .backdrop-orbits-midnight-atlas-ray.is-on.is-alt { animation-name: backdrop-orbits-midnight-atlas-ray-b; } /* the star finder: a gold ring round the pointer over the chart, reading off the sky */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-finder { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .25s ease; } /* a layer only while it follows the pointer; the click effects get theirs from their animations, and let go */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-finder.is-on { opacity: 1; will-change: transform, opacity; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-finder svg { position: absolute; left: -34px; top: -34px; width: 68px; height: 68px; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-finder-ring { fill: none; stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 66%, transparent); stroke-width: 1; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-finder-dots { fill: none; stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 52%, transparent); stroke-width: 1.3; stroke-dasharray: .01 3.2; stroke-linecap: round; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-finder-ticks { fill: none; stroke: color-mix(in srgb, var(--backdrop-orbits-midnight-atlas-ink) 60%, transparent); stroke-width: .85; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-finder-cross { fill: none; stroke: var(--backdrop-orbits-midnight-atlas-gold-hi); stroke-width: 1.1; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-finder-read { position: absolute; left: 30px; top: 24px; display: grid; gap: 2px; white-space: nowrap; font: italic 400 12.5px/1.15 var(--backdrop-orbits-midnight-atlas-serif); color: var(--backdrop-orbits-midnight-atlas-ivory); letter-spacing: .02em; text-shadow: 0 0 2px var(--backdrop-orbits-midnight-atlas-night), 0 0 4px var(--backdrop-orbits-midnight-atlas-night), 0 0 8px var(--backdrop-orbits-midnight-atlas-night); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-finder.is-west .backdrop-orbits-midnight-atlas-finder-read { left: auto; right: 30px; text-align: right; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-finder.is-north .backdrop-orbits-midnight-atlas-finder-read { top: auto; bottom: 24px; } /* no room for the reading clear of the rose and the sheet's edges: the ring alone */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-finder.is-hush .backdrop-orbits-midnight-atlas-finder-read { visibility: hidden; } /* ---------- small roots (a container query: the root is the container) ---------- */ @container (max-width: 560px) { .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-rose { display: var(--backdrop-orbits-midnight-atlas-rose-small); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-chequer { display: none; } } @container (max-width: 700px) { /* the globe alone: no cartouche, so no padding to balance it */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-card { padding-top: 0; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-name { display: none; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-icon { width: var(--backdrop-orbits-midnight-atlas-gem-small); height: var(--backdrop-orbits-midnight-atlas-gem-small); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-icon > svg:not(.backdrop-orbits-midnight-atlas-globe):not(.backdrop-orbits-midnight-atlas-aureole) { width: 42%; height: 42%; stroke-width: 1.9; } /* the aureole round a small globe: the long rays alone, a size heavier */ .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-aureole-fine { display: none; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-aureole-long { stroke-width: 1.6; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-aureole-beads { stroke-width: 2.4; stroke-dasharray: 0 2; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-aureole-rule { stroke-width: 1; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-ping { top: -5px; left: calc(50% - var(--backdrop-orbits-midnight-atlas-gem-small) / 2 - 5px); width: calc(var(--backdrop-orbits-midnight-atlas-gem-small) + 10px); height: calc(var(--backdrop-orbits-midnight-atlas-gem-small) + 10px); } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-shadow { width: 50px; height: 50px; margin: -25px 0 0 -25px; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-hub-core { width: 40px; height: 40px; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-hub-core svg { width: 14px; height: 14px; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-rete { width: 70px; height: 70px; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-gear-c { display: none; } } /* forced colours: the engine draws a quiet line drawing; the night, the gold and the brass go with it */ @media (forced-colors: active) { .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-layer, .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-milky, .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-gears, .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-lamp, .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-grain, .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-glint, .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-icon::before, .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-icon::after, .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-midnight-atlas-aureole { display: none !important; } .backdrop-orbits[data-backdrop-skin="midnight-atlas"] .backdrop-orbits-icon svg { stroke: CanvasText; filter: none; } } @keyframes backdrop-orbits-midnight-atlas-print { from { opacity: 0; } } @keyframes backdrop-orbits-midnight-atlas-draw { from { stroke-dashoffset: 100; } } @keyframes backdrop-orbits-midnight-atlas-pop { from { opacity: 0; scale: .2; } } @keyframes backdrop-orbits-midnight-atlas-stamp { 0% { opacity: 0; } 10% { opacity: .92; } 65% { opacity: .8; } 100% { opacity: 0; } } @keyframes backdrop-orbits-midnight-atlas-stamp-b { 0% { opacity: 0; } 10% { opacity: .92; } 65% { opacity: .8; } 100% { opacity: 0; } } @keyframes backdrop-orbits-midnight-atlas-press { from { scale: 1.7; } } @keyframes backdrop-orbits-midnight-atlas-press-b { from { scale: 1.7; } } @keyframes backdrop-orbits-midnight-atlas-cons { 0% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 0; } } @keyframes backdrop-orbits-midnight-atlas-cons-b { 0% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 0; } } @keyframes backdrop-orbits-midnight-atlas-pen { 0% { transform: var(--backdrop-orbits-midnight-atlas-paint-from) scale(.4); opacity: 0; } 12% { transform: var(--backdrop-orbits-midnight-atlas-paint-from) scale(1); opacity: 1; } 82% { transform: var(--backdrop-orbits-midnight-atlas-paint-to) scale(1); opacity: 1; } 100% { transform: var(--backdrop-orbits-midnight-atlas-paint-to) scale(2.4); opacity: 0; } } @keyframes backdrop-orbits-midnight-atlas-pen-b { 0% { transform: var(--backdrop-orbits-midnight-atlas-paint-from) scale(.4); opacity: 0; } 12% { transform: var(--backdrop-orbits-midnight-atlas-paint-from) scale(1); opacity: 1; } 82% { transform: var(--backdrop-orbits-midnight-atlas-paint-to) scale(1); opacity: 1; } 100% { transform: var(--backdrop-orbits-midnight-atlas-paint-to) scale(2.4); opacity: 0; } } @keyframes backdrop-orbits-midnight-atlas-ray { 0% { transform: var(--backdrop-orbits-midnight-atlas-paint-ray) scaleX(var(--backdrop-orbits-midnight-atlas-paint-s0)); opacity: 0; } 12% { transform: var(--backdrop-orbits-midnight-atlas-paint-ray) scaleX(var(--backdrop-orbits-midnight-atlas-paint-s1)); opacity: .95; } 55% { transform: var(--backdrop-orbits-midnight-atlas-paint-ray) scaleX(var(--backdrop-orbits-midnight-atlas-paint-s2)); opacity: .85; } 100% { transform: var(--backdrop-orbits-midnight-atlas-paint-ray) scaleX(var(--backdrop-orbits-midnight-atlas-paint-s2)); opacity: 0; } } @keyframes backdrop-orbits-midnight-atlas-ray-b { 0% { transform: var(--backdrop-orbits-midnight-atlas-paint-ray) scaleX(var(--backdrop-orbits-midnight-atlas-paint-s0)); opacity: 0; } 12% { transform: var(--backdrop-orbits-midnight-atlas-paint-ray) scaleX(var(--backdrop-orbits-midnight-atlas-paint-s1)); opacity: .95; } 55% { transform: var(--backdrop-orbits-midnight-atlas-paint-ray) scaleX(var(--backdrop-orbits-midnight-atlas-paint-s2)); opacity: .85; } 100% { transform: var(--backdrop-orbits-midnight-atlas-paint-ray) scaleX(var(--backdrop-orbits-midnight-atlas-paint-s2)); opacity: 0; } }