/* * The shared door's stylesheet (ADR-0001): the dawn, the dusk and the flight's chrome, carried from Orbit's * flight.css and the site's own. One copy, pulled into Orbit unchanged; the host loads it before its own sheet. * * What it asks of the host (the theme contract): * --star-far, --star-near the stars' fills (the host's theme packs; the drawn defaults are the dark packs') * --display, --mono the type: the name and the gate (display), the flight's subtitle (mono) * html.rich the lit look: the ring and the name lit by the dawn, the way in a dark glass pill * body.loading / .lit first light (dawn.js); body.showdawn, .showwarp, .launching, .bare, .instrument, * .withdrawing, .dispersing, .showdusk, .farewell the journey's beats (journey.js) * #door.shown, #dusk the surfaces shown; #warp, #launchname the flight's canvas and the name on the void * #dusk.asdawn the goodbye dressed as the sign-in (duskMarkup({ asDawn: true }), a host option: Orbit's). * Every rule for it hangs off that one class, so a dusk without it matches none of them. It * takes the dawn's measures and lit look (the dawn's rules above and below, widened to it), * follows html.rich as the dawn does, and needs no more of the host than the dawn does * .release the release tag under the wordmark (dawnMarkup/duskMarkup({ tag })): `.release[data-channel]` * with an optional `.build` span; styled to the name's measure (--R, where the surface sets it) * What it gives the host: the keyframes driftf, driftn (a tiled sky's drift) and spinback (a lap of the ring), * which the site's own sky and hub also use. */ /* ══ THE DOOR: the sign-in's dawn ═══════════════════════════════════════ */ @keyframes driftf{to{transform:translateX(calc(-1 * var(--tile,1600px)))}} @keyframes driftn{to{transform:translateX(calc(-1 * var(--tile,1600px)))}} #door{position:fixed;inset:0;z-index:36;background:#04060e;overflow:hidden;opacity:0;transition:opacity .7s ease;pointer-events:none} #door.shown,body.showdawn #door{opacity:1;pointer-events:auto} body.showdawn #door{pointer-events:none} #door .dsky,#dusk .dsky{position:absolute;inset:-4%;overflow:hidden} #door .dsky svg,#dusk .dsky svg,#door .world .wl,#dusk .world .wl{position:absolute;inset:0;width:100%;height:100%} #door .dsky svg,#dusk .dsky svg{will-change:transform;overflow:visible} #door .world,#dusk .world{position:absolute;inset:0} /* the live door (door3d.js): the Earth drawn as it is, in the band at the door's foot; the picture and the limb give way to it once its first frame is drawn */ #door .world canvas.live{opacity:0;transition:opacity 1.2s ease} #door .world.live canvas.live{opacity:1} #door .world.live .wl.earth,#door .world.live .wl.limb{opacity:0;transition:opacity 1.2s ease} .world .defs{width:0;height:0;position:absolute} .world .dawnlayer,.world .rays,.world .sunpt{position:absolute;inset:0} #door .dsky .far{animation:driftf 360s linear infinite} #door .dsky .tws{animation:driftf 360s linear infinite,skytwinkle 4.5s ease-in-out var(--tw,0s) infinite alternate} #door .dsky .near{animation:driftn 180s linear infinite} #dusk .dsky .far{animation:recede 360s linear infinite} #dusk .dsky .tws{animation:recede 360s linear infinite,skytwinkle 4.5s ease-in-out var(--tw,0s) infinite alternate} #dusk .dsky .near{animation:recede 180s linear infinite} @keyframes recede{from{transform:translateX(calc(-1 * var(--tile,1600px)))}to{transform:translateX(0)}} @keyframes skytwinkle{from{opacity:1}to{opacity:.55}} /* first light: dawn breaks once on load, exactly as the login does it */ .dawnlayer{opacity:0;transition:opacity 2s ease} body.lit .dawnlayer{opacity:1} .rim{opacity:0;transition:opacity 2.2s ease .3s} body.lit .rim{opacity:1} .shimmer{stroke-dasharray:3 97;animation:sweep 22s linear infinite;opacity:0;transition:opacity 2s ease 1.5s} body.lit .shimmer{opacity:.9} /* the Earth: each picture fades in when it has arrived, and the sun comes up with the first light; the drawn limb under it is the stand-in until then */ #door .earth image{opacity:0;transition:opacity 1.2s ease} #door .earth image.in{opacity:1} #door .earth .up.in{opacity:0;transition:opacity 2.2s cubic-bezier(.4,0,.3,1) .3s} body.lit #door .earth .up.in{opacity:1} #door .world.earthy .limb .rim{opacity:0} @keyframes sweep{to{stroke-dashoffset:-100}} .sunpt{opacity:0;transition:opacity 2.1s ease .4s} body.lit .sunpt{opacity:1} .world .breath{animation:breathe-world 9s ease-in-out infinite alternate;will-change:opacity} @keyframes breathe-world{from{opacity:.84}to{opacity:1}} @keyframes breathe-sun{from{opacity:.8}to{opacity:1}} .rays{transform-origin:var(--ox,50%) var(--oy,92%);opacity:0;transform:scale(1,.55);transition:opacity 2.2s ease .3s,transform 2.6s cubic-bezier(.2,.7,.2,1) .3s} body.lit .rays{opacity:1;transform:scale(1,1)} /* the fans are pictures rotating, so each rides its own compositing layer */ .rays .sway1{transform-origin:var(--ox,50%) var(--oy,92%);will-change:transform;animation:sway1 41s ease-in-out infinite alternate} .rays .sway2{transform-origin:var(--ox,50%) var(--oy,92%);will-change:transform;animation:sway2 63s ease-in-out infinite alternate} @keyframes sway1{from{transform:rotate(-1.8deg)}to{transform:rotate(2.1deg)}} @keyframes sway2{from{transform:rotate(1.5deg)}to{transform:rotate(-1.3deg)}} @keyframes breathe-band{from{opacity:.8}to{opacity:1}} @keyframes zbreathe{from{opacity:.55}to{opacity:.95}} .loginchrome{position:absolute;inset:0;z-index:3;display:grid;place-items:center; transition:opacity .8s ease,transform 1s cubic-bezier(.3,.7,.3,1)} .loginchrome .lockup{position:relative;display:inline-grid;place-items:center;text-align:center} /* first light, staged, once the type and the Earth are in: the sky and the Earth are already there; then the ring is drawn, the name comes up through it, the way in, the planets on their orbits, the foot. Nothing is shown before it is ready, so nothing changes its face as it arrives */ /* the ring is drawn as one dash; once it is round, the dash is dropped, so the circle closes on itself rather than meeting end to end, where the two square ends leave a hairline gap at three o'clock */ #door .lockup .ring{stroke-dasharray:100 100;stroke-dashoffset:100} body.lit #door .lockup .ring{animation:draw-ring 1.6s .15s both} /* while the dawn's first pieces are still coming (main.js: showDoor), the ring is a light running its circle: an arc that opens and closes as it goes round, each lap ending as a point at the ring's start, where its drawing begins */ /* it is only turned, never redrawn, so the compositor keeps it going even while the page itself is busy (a browser that compiles shaders on the page's own thread stands the page still meanwhile): a comet of light on the ring's line, its tail fading behind it, each lap easing out to the ring's start at three o'clock, where the drawing begins */ #door .lockup .glyph .runner{position:absolute;left:13.5%;top:13.5%;width:73%;height:73%;border-radius:50%;pointer-events:none;opacity:0; background:conic-gradient(from 90deg,rgba(135,145,179,0) 0turn,rgba(135,145,179,0) .45turn,rgba(170,178,207,.5) .85turn,rgba(233,237,248,.95) .995turn,rgba(233,237,248,0) 1turn); -webkit-mask:radial-gradient(closest-side,transparent 96.9%,#000 97.4%,#000 99.5%,transparent 100%);mask:radial-gradient(closest-side,transparent 96.9%,#000 97.4%,#000 99.5%,transparent 100%); filter:drop-shadow(0 0 3px rgba(200,210,240,.35));transition:opacity .4s ease;will-change:transform,opacity} body.loading #door .lockup .glyph .runner{opacity:1;animation:runner 1.8s cubic-bezier(.45,.05,.55,.95) infinite} @keyframes runner{to{transform:rotate(1turn)}} @media (prefers-reduced-motion:reduce){body.loading #door .lockup .glyph .runner{animation:none}} @keyframes draw-ring{from{stroke-dasharray:100 100;stroke-dashoffset:100;animation-timing-function:cubic-bezier(.45,0,.2,1)}99.9%{stroke-dasharray:100 100;stroke-dashoffset:0}to{stroke-dasharray:none;stroke-dashoffset:0}} #door .lockup .name{opacity:0;transform:translateY(8px);filter:blur(6px);transition:opacity 1.1s ease .7s,transform 1.3s cubic-bezier(.2,.7,.2,1) .7s,filter 1.1s ease .7s} body.lit #door .lockup .name{opacity:1;transform:none;filter:none} #door .dsky{opacity:0;transition:opacity 1.2s ease} #door.shown .dsky{opacity:1} .loginchrome .lockup .glyph{grid-area:1/1;line-height:0} .loginchrome .lockup .glyph svg{width:min(420px,84vw);height:auto;overflow:visible} /* the door's measure: the ring's width sets where everything under it goes, so the line and the command clear the outermost orbit and its name */ #door,#dusk.asdawn{--R:min(400px,80vw,46svh);--lift:4svh} @media (max-width:599.98px),(max-height:479.98px){ #door,#dusk.asdawn{--R:min(420px,68vw,46svh);--lift:2svh} } #door .loginchrome,#dusk.asdawn .loginchrome{padding-bottom:calc(var(--lift) * 2)} /* one measure for the whole lockup: the name, the way in and the gap between them are all fractions of the ring, so they keep their proportions on every screen. The name sits at the ring's centre with room to breathe (about three fifths of its width); the way in sits below the outermost orbit, outside the system, so no planet ever crosses it; and the lockup is centred as a whole, which lifts the ring a little */ #door .lockup .name,#dusk.asdawn .lockup .name{font-size:calc(var(--R) * .145);letter-spacing:.01em} #door .gate-wrap,#dusk.asdawn .gate-wrap{grid-area:2/1;transform:none;margin-top:calc(var(--R) * .2)} #door .gate,#dusk.asdawn .gate{font-size:clamp(12px,calc(var(--R) * .04),16px);padding:.86em 2.3em;letter-spacing:.05em} #door .loginchrome .lockup .glyph svg,#dusk.asdawn .loginchrome .lockup .glyph svg{width:var(--R)} .loginchrome .lockup .glyph .tr{animation:spinback 40s linear infinite;transform-origin:100px 100px} #login-glyph{position:relative} @keyframes spinback{to{transform:rotate(360deg)}} .loginchrome .lockup .name{grid-area:1/1;font:600 clamp(48px,14vw,72px) var(--display);letter-spacing:.015em;line-height:1;color:#e9edf8} /* the gate is over everything in the lockup: no planet (z 5), label (6) or world (5) ever passes over it */ .gate-wrap{grid-area:1/1;align-self:center;justify-self:center;transform:translateY(min(74px,15vw));z-index:7} .gate{font:600 .75rem var(--display);color:#04060e;background:#d8b45a;border:0;border-radius:99px;padding:11px 30px;cursor:pointer; letter-spacing:.04em;text-decoration:none;display:inline-block;line-height:normal; box-shadow:0 0 28px rgba(216,180,90,.22);opacity:0;transform:translateY(10px); transition:opacity 1.2s ease 1.25s,transform 1.2s cubic-bezier(.2,.7,.2,1) 1.25s,filter .35s ease,box-shadow .3s ease} /* the gate shows once the flight is ready to begin (main.js: openWays), not before */ body.lit.ready-flight .gate{opacity:1;transform:none} .gate:hover{filter:brightness(1.08)} .gate.flash{filter:brightness(1.25);box-shadow:0 0 0 6px rgba(216,180,90,.22),0 0 60px rgba(216,180,90,.6)} /* ══ THE DUSK: the goodbye ══════════════════════════════════════════════ */ #dusk{position:fixed;inset:0;z-index:36;background:#03050b;overflow:hidden;opacity:0;transition:opacity .7s ease} body.showdusk #dusk{opacity:1} #dusk .lockup .name{color:#e9edf8} #dusk .lockup .glyph .tr{animation:spinforth 40s linear infinite} @keyframes spinforth{to{transform:rotate(-360deg)}} #dusk .gate{transition:opacity .9s ease .6s,transform .9s ease .6s,filter .35s ease} body.farewell #dusk .gate{opacity:1;transform:none} #dusk .afterglow{animation:breathe-ember 12s ease-in-out infinite alternate;will-change:opacity} @keyframes breathe-ember{from{opacity:.85}to{opacity:1}} #dusk .belt{animation:zbreathe 13s ease-in-out infinite alternate;will-change:opacity} #dusk .shimmer{stroke-dasharray:3 97;animation:sweepback 34s linear infinite;opacity:.7;transition:none} @keyframes sweepback{to{stroke-dashoffset:100}} #dusk .farewell{position:absolute;left:0;right:0;bottom:calc(50% - 240px);text-align:center;z-index:3; opacity:0;transform:translateY(9px);transition:opacity .9s ease .3s,transform .9s ease .3s} body.farewell #dusk .farewell{opacity:1;transform:none} #dusk .farewell .said{font:600 .9375rem var(--display);color:#cfd3e4;letter-spacing:.01em} #dusk .farewell .sub{font:.6875rem var(--mono);color:#7e819a;margin-top:9px;letter-spacing:.06em} /* ══ THE FLIGHT (Orbit's flight.css, verbatim where the site has the part): the canvas between the surfaces, and the name on the void ══ */ #warp,#warpgl{position:fixed;inset:0;z-index:38;opacity:0;pointer-events:none;transition:opacity 1.7s cubic-bezier(.45,.05,.55,.95)} body.showwarp #warp,body.showwarp #warpgl{opacity:1;transition:opacity .45s ease} #launchname{position:fixed;left:0;right:0;top:26%;z-index:39;text-align:center;pointer-events:none;opacity:0;transition:opacity .55s ease; font:600 .8125rem var(--display);letter-spacing:.62em;text-transform:uppercase;color:#dfe6f7;text-shadow:0 0 30px rgba(216,180,90,.4)} #launchname.on{opacity:1} #launchname i{display:block;font:.625rem var(--mono);font-style:normal;letter-spacing:.3em;color:#8791b3;margin-top:11px;text-transform:uppercase} @media (prefers-reduced-motion:reduce){#launchname,#warp,#warpgl{display:none!important}} /* ══ THE DOOR, LIT (html.rich): the ring lit from the sunrise below, the name lit from beneath, the way in a dark glass pill ringed like the logo (the earlier, plainer door is kept on the site's classic-door branch) ══ */ #door .lux,#dusk.asdawn .lux{display:none} html.rich #door .lux,html.rich #dusk.asdawn .lux{display:inline} html.rich #door .ring:not(.lux){stroke:url(#ringlit);stroke-width:1.6} html.rich #dusk.asdawn .ring:not(.lux){stroke:url(#d-ringlit);stroke-width:1.6} /* the ring and the name are pictures: a planet behind them is still under the pointer */ html.rich #door .lockup .glyph{position:relative;z-index:2;pointer-events:none} html.rich #door .lockup .name{position:relative;z-index:4;pointer-events:none} /* the name, lit from below by the dawn, with a little of its light round it */ /* the way in, in the rich look: not a slab of gold but a dark glass pill ringed like the logo, its edge cool at the top and lit gold from the dawn below, a spark of the gold world running round it the way the gold world runs round the ring; reached, it fills with warm light */ @property --ga{syntax:"";inherits:false;initial-value:0deg} html.rich #door .gate,html.rich #dusk.asdawn .gate{color:#f3e5c4;border:1.5px solid transparent;letter-spacing:.07em; background:linear-gradient(180deg,#0d0d13,#19130e) padding-box, conic-gradient(from var(--ga),rgba(255,214,140,0) 0deg 230deg,rgba(255,218,150,.9) 340deg,#fff4dc 356deg,rgba(255,214,140,0) 360deg) border-box, linear-gradient(180deg,rgba(150,160,198,.45),rgba(240,212,160,.85)) border-box; box-shadow:0 14px 34px -16px rgba(255,186,100,.6),inset 0 -12px 20px -14px rgba(255,196,120,.35); animation:gate-orbit 7s linear infinite} html.rich #door .gate:hover,html.rich #door .gate:focus-visible,html.rich #dusk.asdawn .gate:hover,html.rich #dusk.asdawn .gate:focus-visible{filter:none;color:#fffaf0;outline:0; background:linear-gradient(180deg,#3d2d16,#6e4f22) padding-box, conic-gradient(from var(--ga),rgba(255,214,140,0) 0deg 230deg,rgba(255,218,150,.9) 340deg,#fff4dc 356deg,rgba(255,214,140,0) 360deg) border-box, linear-gradient(180deg,rgba(255,228,180,.7),#f3d39a) border-box; box-shadow:0 16px 40px -14px rgba(255,186,100,.75),0 0 36px rgba(255,200,120,.25)} @keyframes gate-orbit{to{--ga:360deg}} @media (prefers-reduced-motion:reduce){html.rich #door .gate,html.rich #dusk.asdawn .gate{animation:none}} html.rich #door .lockup .name{background:linear-gradient(180deg,#fdfbf7 12%,#f2e7d3 60%,#dcbd80 100%);-webkit-background-clip:text;background-clip:text;color:transparent; filter:blur(6px) drop-shadow(0 0 0 rgba(255,206,140,0))} html.rich body.lit #door .lockup .name{filter:blur(0) drop-shadow(0 0 calc(var(--R) * .045) rgba(255,206,140,.2))} /* the goodbye dressed as the sign-in: the name's gradient and its settled glow, but not its blur-in (the goodbye's words come with the beat, not with a first light) */ html.rich #dusk.asdawn .lockup .name{background:linear-gradient(180deg,#fdfbf7 12%,#f2e7d3 60%,#dcbd80 100%);-webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 calc(var(--R) * .045) rgba(255,206,140,.2))} /* ══ THE GOODBYE AS THE SIGN-IN (#dusk.asdawn, a host option: duskMarkup({ asDawn: true })) ═════════════════════════ The measures and the lit look are the dawn's, above, widened to this one class. What is new is here: the planet waits for the farewell beat, the Earth lies under the ember rim, and the farewell hangs off the way back in (inside the ring on a phone). Orbit's flight.css and door-phone.css, with the dawn's gate margin (.2R) where Orbit's was .03R */ #dusk.asdawn .gate-wrap{position:relative} /* the gold world keeps upright as its group turns: the same turn the other way round its own centre */ #dusk.asdawn .lockup .glyph .world{transform-origin:163px 63.5px;animation:spinforth 40s linear infinite reverse} /* the planet and its wake are not on the screen until the farewell has set down (a goodbye standing alone shows them) */ #dusk.asdawn .lockup .glyph .tr{transition:opacity .4s ease} body.showdusk:not(.farewell) #dusk.asdawn .lockup .glyph .tr{opacity:0} /* the Earth: each picture fades in when it has come, and the crisp rim gives way to the first (dawn.js: mountDusk) */ #dusk.asdawn .earth image{opacity:0;transition:opacity 1.2s ease} #dusk.asdawn .earth image.in{opacity:1} #dusk.asdawn .crisp{transition:opacity 1s ease} #dusk.asdawn .world.earthy .crisp{opacity:0} #dusk.asdawn .gate{transition:opacity .9s ease .6s,transform .9s ease .6s,filter .35s ease,box-shadow .3s ease} /* the farewell hangs off the way back in's own box (the wrapper is position:relative, the farewell its last child and out of flow), so it is the same gap under the pill at any height and the lockup is centred as the sign-in's is. Centring is in `transform`, not `translate`: a lone translate is dropped by a build that lowers CSS */ #dusk.asdawn .farewell{position:absolute;top:100%;left:50%;right:auto;bottom:auto;margin-top:22px;width:max-content;max-width:92vw;text-align:center; opacity:0;transform:translate(-50%,9px)} body.farewell #dusk.asdawn .farewell{opacity:1;transform:translateX(-50%)} @media (prefers-reduced-motion:reduce){ #dusk.asdawn .lockup .glyph .tr,#dusk.asdawn .lockup .glyph .world{animation:none} #dusk.asdawn .earth image{transition:none} #dusk.asdawn .world.earthy .crisp{transition:none} } /* A phone: the ring holds the farewell where it held the word, and the second line and the way back in stand in one column under it, on the axis: the line 26px under the ring, the way back in 24px under the line (two lines of .8125rem, 13px at the default root, at 1.7 are 44.2px). The ring stands where the sign-in's does: the line is out of flow and the way back in is moved by `top`, not by a margin. The wrapper's top is m R under the glyph (m the gate's margin, .2), so the ring's centre is (.5 + m)R above it and the ring's foot (.14 + m)R above it */ @media (max-width:599.98px),(max-height:479.98px){ #dusk.asdawn .lockup .name{visibility:hidden} #dusk.asdawn .farewell{top:0;margin-top:0;width:min(calc(100vw - 32px),376px)} #dusk.asdawn .farewell .said{position:absolute;left:50%;top:calc(var(--R) * -.7);transform:translate(-50%,-50%);width:calc(var(--R) * .6); font:600 min(22px,calc(var(--R) * .078))/1.2 var(--display);letter-spacing:.005em;color:#e9edf8} html.rich #dusk.asdawn .farewell .said{background:linear-gradient(180deg,#fdfbf7 12%,#f2e7d3 60%,#dcbd80 100%);-webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 11px rgba(255,206,140,.2))} #dusk.asdawn .farewell .sub{position:absolute;left:0;right:0;top:calc(26px - var(--R) * .34);margin:0; font-size:.8125rem;line-height:1.7;letter-spacing:.04em;color:#9aa0b8;text-shadow:0 1px 5px rgba(4,6,14,.9)} #dusk.asdawn .gate{position:relative;top:calc(26px + 2 * .8125rem * 1.7 + 24px - var(--R) * .34)} } /* ══ THE RELEASE TAG (#63; a host option: dawnMarkup({ tag }) / duskMarkup({ tag })): a word under the name ══ */ .lockup .release{grid-area:1/1;align-self:start;justify-self:center;position:relative;z-index:4;pointer-events:none;white-space:nowrap;text-align:center; font:500 clamp(11px,calc(var(--R,400px) * .036),13px) var(--mono);line-height:1;letter-spacing:.2em;text-transform:lowercase;color:#9aa0b8;text-shadow:0 1px 6px rgba(4,6,14,.85); max-width:calc(var(--R,400px) * .5);overflow:hidden;text-overflow:ellipsis; padding:8px;margin:-8px;transform:translateY(calc(var(--R,400px) * .615))} /* (the 8px of padding, taken back by the same negative margin, is room for the glyphs' descenders and the glow inside the clip) */ /* a test build: the channel on one line, the short commit on the line under it (owner, 2026-10-15) */ .lockup .release .build{display:block;margin:calc(.6em - 8px) -8px -8px;padding:8px;letter-spacing:.14em;overflow:hidden;text-overflow:ellipsis} /* it comes up with the name, a beat behind it */ #door .lockup .release{opacity:0;transition:opacity 1.1s ease .9s} body.lit #door .lockup .release{opacity:1} /* the site's plain goodbye has no --R and keeps its way back in inside the ring: the tag sits tight under the name and the way back in drops 18px to make room */ #dusk:not(.asdawn) .lockup .release{font-size:.6875rem;max-width:calc(min(420px,84vw) * .55);transform:translateY(calc(min(420px,84vw) * .5 + clamp(24px,7vw,36px) + 7px))} #dusk:not(.asdawn) .lockup:has(.release) .gate-wrap{transform:translateY(min(94px,20vw))} /* (and keeps the tag on one line: with the way back in inside the ring there is no room for two on a phone) */ #dusk:not(.asdawn) .lockup .release .build{display:inline;margin:0 0 0 .6em;padding:0;overflow:visible} /* a phone's goodbye-as-sign-in puts the farewell where the name was: the tag goes with the name */ @media (max-width:599.98px),(max-height:479.98px){#dusk.asdawn .lockup .release{visibility:hidden}}