/* ========================================================================== Type. Two voices, both deterministic. -------------------------------------------------------------------------- The first draft shipped `"Archivo", "Helvetica Neue", system-ui, Arial` and `ui-serif, Georgia, serif` and loaded neither, so every visitor saw whatever their operating system happened to own: DejaVu here, Arial and Georgia on Windows, Helvetica and Georgia on a Mac. Three different pieces, no typographic decision surviving any of them. Noto Sans is self-hosted at two weights, under the Apache 2.0 licence the font ships with (assets/fonts/NOTO-SANS-LICENSE.txt). The serif is gone entirely: prose, display and controls are one family at different sizes, weights and tracking, and the monospace is reserved for instrument readouts — timestamps, coordinates, percentages — where its fixed advance is doing a job rather than a style. ========================================================================== */ @font-face{ font-family:"Moon Sans"; src:url("../assets/fonts/notosans-400.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:"Moon Sans"; src:url("../assets/fonts/notosans-600.woff2") format("woff2"); font-weight:600;font-style:normal;font-display:block; } /* ========================================================================== moon.css — one hierarchy, five states ========================================================================== R2 was a collection of fixed islands: a masthead, a HUD, a mode rail, a time bar, a deck, two panels. Each was fine and together they were a dashboard with a Moon behind it. R3 has one rail, one caption, one console, one drawer and one advanced panel, and at any moment most of them are not there. The layout is driven entirely by two attributes on : data-state loading | entry | opening | act1 | act2 | act3 | observatory data-mode phase | reveal | surface (free observatory only) Motion tokens, used everywhere and nowhere else: --ease-ui interface enter and exit, under 300ms --ease-move moving between compositions --ease-sheet drawers and sheets ========================================================================== */ :root{ color-scheme:dark; /* NIGHTGLASS is a NEUTRAL near-black, not a navy. R4's ground was #040405 -- blue is more than three times red in that value, and across a full screen it reads as a wash. These are near-neutral with a whisper of cool so the silver Moon still reads as the warmest thing on screen. */ --void:#040405; --deep:#08090c; --ink:#eef1f3; --dim:#a4aeb6; /* #9aa4ad, up from #7f8992. Most of this palette is measured against a dark panel, where the old value was a comfortable 5.5:1. But --mute is also the colour of the rail buttons, .con-when and .con-zone, and those sit on translucent chrome over the LIVE RENDER -- so their real background is sometimes a lit lunar surface, where the old value measured 3.05:1 against a 4.5 requirement. This reads 3.9:1 over a lit limb and 7.6:1 over the dark, which is the trade in the right direction: the failing case improves by a quarter and the passing case stays far above the line. text-shadow does not count toward contrast and was never the answer here. */ --mute:#9aa4ad; --rule:rgba(255,255,255,.35); --rule-soft:rgba(255,255,255,.22); --accent:#8fd3c7; /* measurements, never controls: renderer.js states the rule and the interface was breaking it in four places */ --data:#9fb6c4; --accent-deep:#2f5f58; --warm:#ffd9a8; --warn:#e0a15c; --panel:rgba(9,10,13,.74); --panel-solid:rgba(9,10,13,.95); --panel-blur:blur(18px) saturate(130%); --f-display:"Moon Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; --f-body:"Moon Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"DejaVu Sans Mono",monospace; --ease-ui:cubic-bezier(.23,1,.32,1); --ease-move:cubic-bezier(.77,0,.175,1); --ease-sheet:cubic-bezier(.32,.72,0,1); --t-press:120ms; --t-ui:260ms; --t-move:520ms; --rail-h:56px; --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px); --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px); } *{box-sizing:border-box} html,body{height:100%} html{overflow-x:clip;-webkit-text-size-adjust:100%;scrollbar-width:none} html::-webkit-scrollbar{display:none} body{ margin:0;background:var(--void);color:var(--ink); font-family:var(--f-body);font-size:16px;line-height:1.62;letter-spacing:.004em; -webkit-font-smoothing:antialiased;overflow-x:clip; } h1,h2,h3{font-family:var(--f-display);font-weight:600;letter-spacing:-.022em;line-height:1.08;margin:0;text-wrap:balance} h1{font-size:clamp(30px,4.6vw,56px);letter-spacing:-.035em} h2{font-size:clamp(21px,2.4vw,30px);letter-spacing:-.026em} h3{font-size:12.5px;font-family:var(--f-display);font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--accent);margin:22px 0 9px} p{margin:0 0 11px;max-width:62ch;text-wrap:pretty} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .small{font-size:13.5px;color:var(--dim);line-height:1.6;max-width:56ch} .credit{font-size:13px;color:var(--mute)} .mark{font-family:var(--f-display);font-weight:600;font-size:10.5px;letter-spacing:.24em; text-transform:uppercase;color:var(--dim);margin:0 0 14px} .skiplink{position:fixed;left:-9999px;top:8px;z-index:400;background:var(--accent);color:#04120f; padding:13px 18px;min-height:44px;display:inline-flex;align-items:center;border-radius:4px; font-family:var(--f-display);font-weight:600;font-size:13px;text-decoration:none} .skiplink:focus{left:8px} /* The ring needs a dark outer edge or it disappears over a lit lunar surface, which is exactly what is behind the rail in Explore the surface. Measured there without it: 1.07:1. */ :where(a,button,input,select,summary,[tabindex]):focus-visible{ outline:2px solid var(--accent);outline-offset:3px; box-shadow:0 0 0 5px rgba(4,4,5,.92);border-radius:3px} /* -- buttons --------------------------------------------------------------- One family. Primary is the single dominant action in any state; .btn is secondary; .quiet is tertiary and never competes. ------------------------------------------------------------------------- */ .btn{ font-family:var(--f-display);font-weight:600;font-size:12.5px;letter-spacing:.085em;text-transform:uppercase; padding:12px 17px;min-height:44px;min-width:44px;border:1px solid var(--rule);border-radius:4px; background:rgba(255,255,255,.045);color:var(--ink);cursor:pointer;white-space:nowrap; transition:background-color var(--t-press) var(--ease-ui),border-color var(--t-press) var(--ease-ui), color var(--t-press) var(--ease-ui),transform var(--t-press) var(--ease-ui),opacity var(--t-ui) var(--ease-ui); } .btn:hover{border-color:var(--accent-deep);color:var(--accent)} .btn:active{transform:scale(.97)} .btn.primary{ background:var(--accent);border-color:var(--accent);color:#04120f;font-weight:600; padding:13px 22px;box-shadow:0 6px 30px -12px rgba(143,211,199,.7); } .btn.primary:hover{background:#a3ded3;border-color:#a3ded3;color:#04120f} .btn.quiet{background:transparent;border-color:transparent;color:var(--mute);padding:11px 12px} .btn.quiet:hover{color:var(--ink)} .btn.small{font-size:11px;padding:10px 12px;letter-spacing:.08em} .btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#04120f} .btn.round{width:52px;height:52px;min-width:52px;border-radius:50%;padding:0;display:grid;place-items:center} .btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:default} .play-glyph{width:0;height:0;border-left:12px solid currentColor;border-top:8px solid transparent; border-bottom:8px solid transparent;margin-left:3px;transition:none} [data-playing="true"] .play-glyph{width:12px;height:14px;border:0;margin-left:0; background:linear-gradient(to right,currentColor 0 4px,transparent 4px 8px,currentColor 8px 12px)} /* -- the stage ------------------------------------------------------------- */ #stage{position:fixed;inset:0;z-index:0;background:var(--void)} #moon{display:block;width:100%;height:100%;touch-action:pan-y} [data-mode="surface"] #moon,[data-state="act3"] #moon{touch-action:none;cursor:grab} [data-mode="surface"] #moon:active,[data-state="act3"] #moon:active{cursor:grabbing} /* Optical layer: vignette and a static sensor grain. No animation, no time uniform, no cost: it is one painted element that never repaints. */ /* One vignette, at z-index 1, below every control. An earlier draft ran this at .46 AND left the loading veil's own radial gradient above the interface, so the frame was multiplied down twice and the UI was crushed with it. */ #optics{position:fixed;inset:0;z-index:1;pointer-events:none; background: radial-gradient(125% 100% at 50% 46%,transparent 52%,rgba(0,0,0,.20) 82%,rgba(0,0,0,.42) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); background-size:auto,140px 140px; mix-blend-mode:normal;opacity:.34} #fallback[hidden]{display:none} #fallback{position:absolute;inset:0;display:grid;place-content:center;gap:14px;justify-items:center;padding:24px;text-align:center;z-index:2} #fallback img{max-width:min(520px,80vw);height:auto;border-radius:4px;opacity:.9} #fallback p{font-family:var(--f-mono);font-size:13px;color:var(--dim);max-width:46ch} /* the gesture cue: one dot, one line of text, gone forever after the first drag */ #gesture{position:fixed;left:50%;top:56%;transform:translate(-50%,0);z-index:6;pointer-events:none; font-family:var(--f-display);font-weight:600;font-size:12.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--ink); display:flex;align-items:center;gap:10px;opacity:0;transition:opacity var(--t-ui) var(--ease-ui); text-shadow:0 2px 14px rgba(0,0,0,.9)} #gesture[data-on="1"]{opacity:.9} .ges-dot{width:26px;height:26px;border:1px solid var(--ink);border-radius:50%;position:relative;display:block} .ges-dot::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--ink); animation:gesSwipe 2.6s var(--ease-move) infinite} @keyframes gesSwipe{0%,12%{transform:translateX(-7px)}50%{transform:translateX(7px)}88%,100%{transform:translateX(-7px)}} /* -- loading and entry ----------------------------------------------------- */ /* ========================================================================== THE OPENING ========================================================================== The Moon assembles out of particles. That is the event, and the job of everything on this screen is to stay out of its way and then arrive as if it belongs to the same light. Deleted from the previous revision, deliberately: the concentric target rings, the crosshair ticks, the corner brackets, the full-width sight line and the per-letter wordmark animation. Together they read as a targeting HUD borrowed from another product, and they competed with the one thing worth looking at. Nothing replaces them. The forming Moon is the only thing on this screen. An "aureole" was tried and rejected by Aarush -- see the note further down about why a 2D disc over the canvas can never be the right answer here. ========================================================================== */ /* The wordmark resolves once, out of the same softness the particles come from: it rises a little, it sharpens, and it stops. No letter dances on its own. */ /* Bigger, and tracked TIGHTER rather than looser. 58px of display type at +0.055em reads thin and spaced -- the tracking that helps a 10px label hurts a 70px one. Large type wants negative tracking; the letters are already far apart at that size and the word should read as one shape. This is the single change that makes the mark feel set rather than typed, and it costs nothing. */ .veil-title{ font-family:var(--f-display);font-weight:600; font-size:clamp(38px,7.4vw,76px);letter-spacing:-.012em; line-height:.98;margin:0 0 18px;color:#f1f4f6; animation:mark-resolve 2000ms cubic-bezier(.17,.84,.24,1) 620ms both} @keyframes mark-resolve{ from{opacity:0;letter-spacing:.26em;filter:blur(9px);transform:translateY(7px)} 55% {opacity:1;filter:blur(1.4px)} to {opacity:1;letter-spacing:-.012em;filter:blur(0);transform:none} } .veil-line{ animation:line-rise 1500ms var(--ease-ui) 1500ms both; color:var(--dim);margin:0 0 30px;font-size:15.5px;letter-spacing:.005em} @keyframes line-rise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} /* The choices arrive last, after the Moon has finished becoming one. */ #entry{animation:entry-rise 1100ms var(--ease-ui) both} @keyframes entry-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ .veil-title,.veil-line,#entry{animation:none;opacity:1;filter:none;transform:none;letter-spacing:.055em} } [data-motion="reduced"] .veil-title, [data-motion="reduced"] .veil-line, [data-motion="reduced"] #entry{animation:none;opacity:1;filter:none;transform:none;letter-spacing:.055em} #veil{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px; background:radial-gradient(120% 100% at 50% 42%,rgba(4,4,5,.35) 0%,rgba(4,4,5,.86) 62%,rgba(4,4,5,.97) 100%); transition:opacity 620ms var(--ease-ui),visibility 620ms} #veil[hidden]{display:grid} /* we fade, never cut */ [data-state="opening"] #veil,[data-state="act1"] #veil,[data-state="act2"] #veil, [data-state="act3"] #veil,[data-state="observatory"] #veil{ opacity:0;visibility:hidden;pointer-events:none;background:none} .veil-inner{text-align:center;max-width:min(560px,92vw);position:relative} /* Once the entry copy is on screen the reticle steps well back and well out: its lines were crossing the sentences and the buttons. */ [data-veil="entry"] .veil-title{margin:0 0 10px} .veil-line{font-size:clamp(15px,1.5vw,18px);color:var(--dim);margin:0 auto 26px;max-width:34ch} #loadState{transition:opacity 300ms var(--ease-ui)} [data-veil="entry"] #loadState{opacity:0;height:0;overflow:hidden;margin:0} .loadbar{width:min(300px,70vw);height:2px;background:rgba(255,255,255,.10);margin:0 auto 12px;overflow:hidden;border-radius:2px} .loadbar i{display:block;height:100%;width:0%;background:var(--accent);transition:width 420ms var(--ease-ui)} #loadLabel{font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.18em; text-transform:uppercase;color:var(--mute);margin:0} #entry{opacity:0;transform:translateY(8px);transition:opacity 520ms var(--ease-ui) 120ms,transform 520ms var(--ease-ui) 120ms} /* display:none, not display:block. This was `display:block;pointer-events:none`, which left the entry block in flow for the whole loading state -- pushing the acquisition bar up into the Moon -- and, worse, VISIBLE: `#entry{animation:entry-rise 1100ms both}` is unconditional, so once that animation finished at 1100ms its `to{opacity:1}` filled forward and beat the `opacity:0` on this rule. That is the ghost in the reduced-motion capture, where the third button painted at its final position with its siblings missing. Hidden means out of flow and unpainted; the reveal is entry-rise, which now plays when the element appears. */ #entry[hidden]{display:none} [data-veil="entry"] #entry{opacity:1;transform:none;pointer-events:auto} .entry-note{font-size:15px;color:var(--dim);max-width:46ch;margin:0 auto 24px} .entry-actions{display:flex;flex-direction:column;align-items:center;gap:10px} .entry-actions .btn{min-width:270px} /* -- the opening title beat ------------------------------------------------ */ /* Placed to the left, where the Moon is not: during the opening the disc sweeps in from the lower right, so the words never sit on top of it. */ #openingTitle{position:fixed;left:max(24px,var(--safe-l));top:50%;transform:translateY(-46%);z-index:26; max-width:min(430px,44vw);text-align:left;pointer-events:none;opacity:0; transition:opacity 900ms var(--ease-ui),transform 1400ms var(--ease-move);transform:translateY(6px)} #openingTitle[data-on="1"]{opacity:1;transform:translateY(-50%)} .ot-title{font-size:clamp(34px,6vw,72px);letter-spacing:-.04em;margin:0 0 12px; text-shadow:0 4px 60px rgba(0,0,0,.9)} .ot-line{font-size:clamp(15px,1.6vw,19px);color:var(--dim);margin:0;max-width:30ch; text-shadow:0 2px 24px rgba(0,0,0,.9)} /* -- reduced-motion cross-fade -------------------------------------------- */ /* A cross-fade, not a blackout. An earlier draft ran a full-opacity 260 ms wipe in each direction, which under reduced motion produced a one-second black screen — precisely the kind of effect the preference exists to avoid. */ #fade{position:fixed;inset:0;z-index:50;background:var(--void);opacity:0;pointer-events:none; transition:opacity 180ms linear} #fade[data-on="1"]{opacity:.72} [data-motion="reduced"] #fade{transition-duration:.12s} .stepper{display:flex;flex-wrap:wrap;gap:6px} .stepper .btn{flex:1 1 auto;min-width:72px} /* -- the rail -------------------------------------------------------------- Quiet by construction: one row, one weight of type, no boxes. ------------------------------------------------------------------------- */ #rail{position:fixed;top:0;left:0;right:0;z-index:30;height:calc(var(--rail-h) + var(--safe-t)); padding:var(--safe-t) max(14px,var(--safe-r)) 0 max(14px,var(--safe-l)); display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px; /* deeper at the top and carried further down: the rail's controls sit over the live render, so their real background can be a lit lunar surface. The old .72->0 ramp left the labels on close to bare Moon by the time the gradient had faded, which is where the contrast measurement failed. */ background:linear-gradient(to bottom,rgba(4,4,5,.94) 0%,rgba(4,4,5,.72) 68%,rgba(4,4,5,0) 100%); opacity:0;transform:translateY(-6px);visibility:hidden; transition:opacity 500ms var(--ease-ui),transform 500ms var(--ease-ui),visibility 500ms; pointer-events:none} [data-state="act1"] #rail,[data-state="act2"] #rail,[data-state="act3"] #rail, [data-state="observatory"] #rail{opacity:1;transform:none;pointer-events:auto;visibility:visible} .rail-mark{margin:0;font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.2em; text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:9px} .rail-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:.85} #progress{display:flex;gap:4px;justify-self:center} /* a plain [hidden] loses to the rule above, and the rail then wraps */ #progress[hidden],#railMode[hidden]{display:none} #progress button{background:transparent;border:0;cursor:pointer;color:var(--mute); font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.12em; padding:8px 12px;min-height:44px;min-width:44px; display:flex;align-items:center;gap:8px;border-radius:4px; transition:color var(--t-press) var(--ease-ui),background-color var(--t-press) var(--ease-ui)} #progress button em{font-style:normal;font-size:10.5px;letter-spacing:.06em;color:var(--mute);opacity:0; max-width:0;overflow:hidden;white-space:nowrap;transition:opacity var(--t-ui) var(--ease-ui),max-width var(--t-ui) var(--ease-ui)} #progress button:hover{color:var(--ink);background:rgba(255,255,255,.05)} #progress button:hover em{opacity:.8;max-width:130px} #progress button[aria-pressed="true"]{color:var(--ink);background:transparent; box-shadow:inset 0 -2px 0 var(--accent)} #progress button[aria-pressed="true"] em{opacity:1;max-width:150px;color:var(--dim)} #progress button[data-visited="1"]{color:var(--dim)} #railMode{margin:0;justify-self:center;font-family:var(--f-display);font-weight:600;font-size:11px; letter-spacing:.18em;text-transform:uppercase;color:var(--dim)} /* graphics quality: a real listbox, because a native s until this revision: an opened system dropdown paints a white menu across a near-black exhibit and cannot be styled out of it. */ .pop{position:relative;display:inline-flex} .pop > ul{position:absolute;left:0;top:calc(100% + 7px);z-index:50;margin:0;padding:5px; list-style:none;min-width:250px;max-width:min(320px,86vw);border-radius:11px; border:1px solid var(--rule);background:var(--panel-solid); backdrop-filter:var(--panel-blur);-webkit-backdrop-filter:var(--panel-blur); box-shadow:0 18px 44px -18px rgba(0,0,0,.92)} .pop > ul[hidden]{display:none} .pop > ul li{display:grid;gap:1px;padding:9px 11px;border-radius:7px;cursor:pointer; min-height:44px;align-content:center} .pop > ul li b{font-family:var(--f-display);font-size:12.5px;font-weight:600;color:var(--ink)} .pop > ul li em{font-style:normal;font-size:11px;color:var(--mute);line-height:1.35} .pop > ul li:hover{background:rgba(255,255,255,.055)} .pop > ul li[aria-selected="true"]{background:rgba(255,255,255,.08); box-shadow:inset 3px 0 0 var(--accent)} .pop > ul li[aria-selected="true"] b{color:var(--accent)} .pop > ul li:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} /* Advanced is narrow; its popovers open to the right edge if they would clip */ #covRangeMenu{max-height:min(46vh,320px);overflow-y:auto} /* Its own line, under the control it describes. It used to be a sibling in a flex row, so at 821px it was laid alongside the speed button and the two overlapped. It is also short-lived: it says what a press just did. */ .speed-hint{margin:5px 0 0;font-size:11px;color:var(--mute);letter-spacing:.01em; min-height:1em;flex-basis:100%} .speed-hint:empty{display:none} /* `#advanced ul` (1,0,1) out-specifies `.pop > ul[hidden]` (0,2,1), so inside the Science Lab the popovers were laid out as grids and never actually closed -- an invisible-looking menu sat over the step buttons and swallowed their clicks. Found by the control-truth suite, because it clicks the real thing. Hidden means hidden, and it must out-specify the layout rule. */ #advanced .pop > ul[hidden], .pop > ul[hidden]{display:none !important} #advanced .pop > ul{display:block;gap:0} #advanced .pop > ul li{display:grid;gap:1px} /* The entry column is a column, and it sits on the optical centre rather than the geometric one -- the Moon occupies the right third, so the copy wants to be a little left and a little high of dead centre. */ @media (min-width:861px){ /* -6vw, not -4vw. At POSES.entry the disc sits at shift -0.21 with a radius of 0.415 * short / 2, which puts its left limb at about 58% of the width; a 560px column offset by 4vw still grazed it. Measured, not guessed: the startup suite asserts the clearance rather than the offset. */ /* -9vw, not -6vw. The R6 wordmark is set at up to 76px instead of 58, which widened the copy column by about 40px -- enough for its right edge to reach the Moon's left limb at 1440x900 under reduced motion, where the entry pose arrives as a cut rather than a move. Measured, not guessed: the startup gate hit-tests the disc and named the box. */ #veil .veil-inner{transform:translate(-9vw,-3vh)} } /* ========================================================================== The Science Lab ========================================================================== The panel was a flat stack of eight blocks in the order they were written, which put "Observation data" -- twelve rows of raw numbers -- above the controls a person actually reaches for. It is five named groups now, in the order someone would want them, with the raw values collapsed by default.
/ rather than a hand-built accordion: the open state, the keyboard behaviour and the screen-reader semantics are the browser's, and they are correct. */ .adv-group{border-bottom:1px solid var(--rule-soft)} .adv-group:last-of-type{border-bottom:0} .adv-group > summary{ cursor:pointer;list-style:none;padding:14px 2px 12px;display:grid;gap:2px; min-height:44px;align-content:center;position:relative} .adv-group > summary::-webkit-details-marker{display:none} .adv-group > summary::after{ content:"";position:absolute;right:4px;top:50%;width:7px;height:7px; border-right:1.5px solid var(--mute);border-bottom:1.5px solid var(--mute); transform:translateY(-70%) rotate(45deg);transition:transform 220ms var(--ease-ui)} .adv-group[open] > summary::after{transform:translateY(-30%) rotate(-135deg)} .adv-group > summary:hover .adv-group-name{color:var(--accent)} .adv-group > summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} .adv-group-name{font-family:var(--f-display);font-size:13.5px;font-weight:600; color:var(--ink);letter-spacing:-.004em} .adv-group-blurb{font-size:11.5px;color:var(--mute);line-height:1.4;padding-right:18px} .adv-group .adv-block{border:0;padding-top:0} .adv-group .adv-block h3{font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--mute);margin-top:14px} .adv-group .adv-block:first-of-type h3{margin-top:2px} /* --- arriving from the House --------------------------------------------- The wordmark, the tagline and the acquisition bar are an introduction. A visitor who came through the terrace has had it: they read MIND OF AARUSH on the approach, walked to the Moon, and pressed Enter NIGHTGLASS under a composed frame. Showing them a title card now would be the site introducing itself to someone already inside it -- and it would put type across the face of the disc in the first second after a match cut, which is the one second that has to stay clean. The three doors remain, and they are all that remains. */ [data-entry="house"] .veil-title, [data-entry="house"] .veil-line, [data-entry="house"] #loadState{display:none} [data-entry="house"] #veil{background:transparent;backdrop-filter:none} [data-entry="house"] .veil-inner{animation:none} /* The doors go under the Moon rather than across it. The camera is holding the handoff composition -- disc centred at 0.46 of the short side -- so the clear space is the bottom of the frame, and that is where the choice belongs. */ [data-entry="house"] #veil{align-content:safe end;padding-bottom:calc(7vh + var(--safe-b))} [data-entry="house"] #entry{animation:entry-arrive 620ms var(--ease-ui) both} @keyframes entry-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* --- the entry screen's own hierarchy ------------------------------------- .entry-third was in the markup with no rule behind it at all, so the fine print inherited body copy -- 16px of --ink at 17:1, the second-loudest thing on the first screen a visitor ever sees, louder than both of the choices it was describing -- and the third door rendered flush against the second with no margin, reading as its caption rather than as a way in. Loudness here has to follow importance: primary choice, alternative, third way out, then the note. */ .entry-third{margin-top:16px;font-size:11px} /* --- the location status line in the dock --------------------------------- */ /* .con-note now lives inside
; it is never a permanent block in the console. Its layout is defined with .con-why above. */ /* --- the loading state: the Moon is the event, so the copy gets out of it --- The offset above is correct for the ENTRY state, where the camera has moved to POSES.entry (shift -0.21) and the disc genuinely does occupy the right third. It is wrong for the 3.4 seconds before that. During loading the camera is approaching POSES.forming -- shift 0, lift 0, disc dead centre at 0.46 of the short side -- so a copy column offset by 4vw is still inside the disc, and the wordmark, the tagline and the acquisition bar sat across the Moon's face for the entire formation. The one moment Aarush singled out as the thing he likes played as the background of a title card. So during loading the copy goes under the disc, where there is real room: at fill 0.46 the limb clears the lower ~27% of the frame, and the loading column (wordmark, one line, a 2px bar and a label) is much shorter than that. The phone already did this -- it is the better composition of the two, and this is only extending it to the viewport that needed it more. */ /* the loading column is short -- a bar and a label -- so it only needs to clear the disc, not to be pushed to the floor */ #veil[data-veil="loading"]{align-content:safe end;padding-bottom:5.5vh} #veil[data-veil="loading"] .veil-inner{transform:none} /* And the wordmark waits. Moving the copy column to the bottom is not enough on its own: wordmark + tagline + bar is 399px tall at 1440x900, and the clear space under a disc at 0.46 of the short side is 268px. Something had to give, and it is not going to be the Moon. So the loading state shows only what the loading state is for -- a thin bar and the name of what is being acquired -- and NIGHTGLASS introduces itself once the Moon is whole and the camera has stepped off-axis, where there is room for it beside the disc rather than across it. The mark-resolve animation then plays at the moment it means something instead of over the formation. "The Moon is the event; everything else defers to it" is the instruction; a title card that waits its turn is what deferring looks like. */ #veil[data-veil="loading"] .veil-title, #veil[data-veil="loading"] .veil-line{display:none} /* --- the relief label, because the article promises one --------------------- #read says of the exaggerated terrain: "I kept the exaggeration as a teaching aid, and it is labelled wherever it is on." Nothing read [data-relief], so that sentence pointed at a label that did not exist -- in a project whose whole argument is that its claims are measured. Either the sentence goes or the label arrives; the label is the better answer, because the claim is the right one to make. */ #reliefBadge{position:fixed;z-index:24;left:max(18px,var(--safe-l));bottom:calc(18px + var(--safe-b)); font-family:var(--f-display);font-weight:600;font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--warn);background:rgba(4,4,5,.72);border:1px solid rgba(255,255,255,.14); border-radius:999px;padding:5px 10px;pointer-events:none;opacity:0; transition:opacity 320ms var(--ease-ui)} [data-relief="exaggerated"] #reliefBadge{opacity:1} @media (max-width:860px){#reliefBadge{font-size:9px;padding:4px 8px}} /* --- H7: the caption's backing must be as wide as the caption --------------- #capScrim is a 64vw radial anchored bottom-left, centred at 20% of its own width. That is right on a desktop, where #caption is a column in the lower left. On a phone the compact block makes the caption full-bleed (left:12px;right:12px), and the scrim was never re-scoped -- so at 390px the scrim covered 250px of a 366px caption and the last third of every line was set on bare render. Over a lit limb --dim measures 1.30:1, which is not text. A phone gets a full-width bottom ramp instead of a corner glow, because the caption it has to back is a full-width block. */ @media (max-width:860px){ #capScrim{width:100%;height:min(70svh,560px); background:linear-gradient(to top,rgba(4,4,5,.94) 0%,rgba(4,4,5,.86) 28%, rgba(4,4,5,.62) 55%,rgba(4,4,5,.24) 78%,rgba(4,4,5,0) 100%)} } /* --- there is no aureole, and that is the correction ------------------------ Aarush rejected the startup because it showed "a strange black circle with a white glow in front of the real forming Moon ... like two overlapping Moons or an eclipse." He was looking at this element. #aureole was a DOM circle sized in MOON RADII and painted with a radial-gradient whose stops are fractions of closest-side -- that is, of HALF the element. Sized at 2.9 * mr, half is 1.45 * mr, so a stop written at 35% intending "the limb" landed at 0.51 * mr: a bright annulus drawn straight across the middle of the Moon's face, with a transparent hole inside it that read as a second, smaller, hard-edged black disc in front of the real one. It is not tuned, softened, resized or moved. It is GONE, along with the element, so that no arrangement of stops can ever put a second silhouette in front of the Moon again. The particle formation and the real WebGL Moon are the only things on screen during startup, which is what he asked for and is also cheaper: one fewer composited layer over a full-screen canvas. If glow is ever wanted back, it belongs in the WebGL scene behind the real Moon, derived from the real rendered limb -- never as a 2D disc over it. */ /* --- arriving from the House: the doors go in a row ------------------------- The camera is holding the handoff composition, so the disc is centred at 0.46 of the short side and the only clear ground is the strip beneath it -- 216 px at 1280x800. The default entry block is a column: two stacked buttons, a third below them and a note, about 200 px before padding, which put the choice across the Moon's lower limb in the first second after the cut. A row is the right shape for this state anyway. There is no wordmark above it competing for the eye, the three doors are peers, and laying them out along the bottom reads as a footer to the arrival rather than as a card dropped on top of it. The phone keeps the column, where there is already room. */ @media (min-width:861px){ [data-entry="house"] .veil-inner{max-width:min(940px,94vw);transform:none} [data-entry="house"] .entry-actions{flex-direction:row;justify-content:center;gap:12px} [data-entry="house"] .entry-actions .btn{min-width:210px} [data-entry="house"] #entry{display:flex;flex-direction:row;align-items:center; justify-content:center;flex-wrap:wrap;gap:12px} [data-entry="house"] .entry-third{margin-top:0} } /* --- the small-laptop window, placed after the phone rules on purpose ------ 760-860px is a real and awkward size -- a small laptop window, and the exact 821x605 Aarush reviews at. The phone rules start at 860px and move the actions into their own full-width row, which is right on a 390px phone with 844px of height and wrong here: it spends vertical space this viewport does not have. Between 760 and 860 the head keeps its own actions and the phone row stands down, so the console is two rows shorter. */ /* `and (min-height:501px)`, matching the phone block's own guard. Without it this block also matched 844x390 -- a landscape phone -- and, being last in the file, beat the landscape rules. Two things broke together there: the Lab went back to docking LEFT, straight over a console that is itself a left column; and the three-column console head was forced into a 400px panel, so its columns overflowed and pushed the transport to x = -89, off the screen entirely. This block is about a small LAPTOP WINDOW. A viewport 390px tall is not that, and it has its own rules further up. */ @media (min-width:760px) and (max-width:860px) and (min-height:501px){ #console .con-actions{display:flex} .con-extra-row{display:none} .con-head{ grid-template-columns:auto minmax(9rem,1fr) auto; grid-template-areas: "play ident actions" "play local status"} /* The phone rules turn .con-speed into a full-width flex row so the button can span the screen. At this size that squeezed "Speed" and "Guided" on top of each other and laid the hint alongside. It is a block again, at its own width, with the hint on the line below where it belongs. */ .con-speed{display:block;flex:0 0 auto;min-width:0} #btnSpeed{width:auto} #console .con-modes #btnResetView{display:inline-flex} /* THE LAB DOCKS HERE; IT DOES NOT COVER THE CONSOLE. The phone rules turn Advanced into a full-width sheet from the bottom, capped at 72svh "so the Moon is never wholly replaced by a settings panel". That cap protects the Moon and says nothing about the console. At 821x605 -- 605px tall -- 72svh is 436px of sheet over a console that starts at 266px, so opening the Lab hid the transport, the phase, the city, the date and the whole timeline. Measured: the Play button was underneath an

. At this width there is room for the docked panel the desktop uses: 380px of Lab still leaves 441px of Moon, and the console keeps its own space underneath. A panel you open to study something must not hide the thing it is studying, or the readout describing it. */ #advanced{ left:8px;right:auto;width:min(380px,calc(100vw - 16px)); border-left:1px solid var(--rule);border-radius:12px; top:calc(var(--rail-h) + var(--safe-t) + 8px); bottom:calc(var(--console-h,150px) + clamp(14px,2.6vh,24px) + var(--safe-b) + 8px); max-height:none;transform:translateX(calc(-100% - 16px))} #advanced[data-on="1"]{transform:none} } /* --- opening the Lab on a short screen --------------------------------------- At 821x605 -- the size Aarush reviews at -- the rail takes 48px and the console 339, which leaves 218 for the Science Lab. A 218px panel is not an instrument, it is a sliver; measured, it showed one group heading and nothing else. There is no arrangement that gives both panels everything on a screen this short, so the console gives up the parts you did not open the Lab to use: the timeline, the mode switch and the phone action row stand down, and the HEAD stays -- transport, phase, illumination, city, date and the status badge. Everything needed to know what you are looking at and to start or stop time is still there, and CLOSE brings the rest straight back. This is a deliberate focus state, not a layout failure: it is keyed on the Lab being open, it is fully reversible, and the console never becomes unusable, which is the requirement. */ @media (max-height:760px){ [data-adv="1"] #console .con-time, [data-adv="1"] #console .con-modes{display:none} } /* The phone's action row STAYS. It carries "Science Lab" on a phone, so hiding it while the Lab was open removed the control that had just been used and left the panel's own CLOSE as the only way back. A focus state may put things aside; it may not take away the way out. */ /* --- the smallest phone still in the matrix --------------------------------- 375x667. Measured, the console needed 383px of a 374px budget and the action row's bottom edge sat nine pixels past the fold. Every row is load-bearing -- the transport and readout, the timeline, the three modes, the three actions -- so nothing is dropped; the nine pixels come out of the gaps between them and the timeline's own bottom padding, which were tuned on taller phones. */ @media (max-width:400px) and (max-height:700px){ #console{gap:6px;padding:9px 12px 10px} #console .con-time{padding-bottom:15px} .con-modes{gap:5px} } /* ========================================================================== R6 — the startup, composed with the Moon rather than laid over it ========================================================================== R5.2 fixed the right things: the fake aureole and the paragraph are gone. What it left was plain — a centred wordmark and two buttons on black, with no relationship to the one thing on screen worth looking at. The direction here is a single idea, not three: THE MOON LIGHTS THE WORDS, AND THE WORDS ARRIVE AFTER IT. Nothing is drawn over the disc, nothing is attached to it, and no new object exists that could ever be mistaken for a second Moon. The only new relationship is illumination -- which is the subject of the whole exhibit. `--mx` / `--my` / `--mr` are the disc's real projected centre and radius, written every frame while the veil is up. They already exist; this reads them. */ /* 1 -- TYPE THAT CATCHES THE MOON'S LIGHT. `background-attachment: fixed` puts the gradient in VIEWPORT coordinates, so `circle at var(--mx) var(--my)` is genuinely the Moon's position on screen, not a position inside the text box. background-clip:text then shows it only through the glyphs. As the disc forms and the camera settles, the highlight travels across the letters, brightest on the side facing the Moon. It degrades honestly: without the custom properties the gradient falls back to 50%/45% and the wordmark is simply a light grey, which is what R5.2 had. */ @supports (background-clip: text) or (-webkit-background-clip: text) { [data-veil] .veil-title{ color:transparent; background-image:radial-gradient( circle at var(--mx, 50%) var(--my, 45%), #ffffff 0, #f6f9fb calc(var(--mr, 180px) * 1.15), #cdd6de calc(var(--mr, 180px) * 2.6), #8d98a3 calc(var(--mr, 180px) * 4.6), #6b757f 100%); background-attachment:fixed; -webkit-background-clip:text; background-clip:text; } } /* 2 -- BEATS, NOT A SIMULTANEOUS CARD. The controls used to appear all at once at a fixed 3400ms. They now arrive after the Moon is substantially formed, in three separate moments, so the screen is composed in time as well as in space: the Moon, then its name, then what it says, then the way in. Each beat is short; the whole ladder is under a second and a half once the formation has finished. */ #veil[data-beat="mark"] .veil-line, #veil[data-beat="mark"] #entry, #veil[data-beat="line"] #entry{opacity:0;pointer-events:none} #veil[data-beat="line"] .veil-line{opacity:1} /* 3 -- A CINEMATIC FRAME, NOT A GRAPHIC. Slightly deeper at the top and bottom than at the sides, which is what a wide lens does and what a HUD never does. It is a full-screen wash: it has no edge, no radius and no centre of its own that could read as an object. The startup gate distinguishes exactly this from a shape by extent. */ #veil[data-veil="loading"], #veil[data-veil="entry"]{ background: linear-gradient(to bottom, rgba(2,2,3,.55) 0%, rgba(2,2,3,0) 26%, rgba(2,2,3,0) 74%, rgba(2,2,3,.62) 100%), radial-gradient(128% 104% at 50% 44%, rgba(4,4,5,.20) 0%, rgba(4,4,5,.80) 64%, rgba(4,4,5,.96) 100%); } /* the light on the type is a still image when motion is reduced */ @media (prefers-reduced-motion:reduce){ [data-veil] .veil-title{background-attachment:scroll} }