@import './fonts/fonts.css'; @import './tokens/colors.css'; @import './tokens/typography.css'; *{box-sizing:border-box} html,body{height:100%} body{ margin:0; background:var(--surface-page); color:var(--text-body); overflow:hidden; } /* ---- Stage: the reel fills the viewport ---- */ .stage{position:fixed;inset:0;overflow:hidden} /* The reel is a canvas drawn by reel.js, not a video element. */ .reel{position:absolute;inset:0;width:100%;height:100%;display:block} /* Green Accent Glow — the manual's signature treatment, rising off the bottom edge of the imagery. */ /* Opacity on the layer, not a change to --glow-gradient: under a field of dust the accent read much heavier than it did under sparse hairlines, but the gradient itself is a design-system token and stays as the system defines it. */ .glow{position:absolute;inset:0;background:var(--glow-gradient);pointer-events:none;opacity:.45} /* ---- Lockup ---- Single official vector from the design system (assets/orbit-lockup-vertical-on-black.svg, 260x260): ring with ORBIT and ARTIST GROUP set inside it. This replaced an earlier composition of ring-above-wordmark built from the older guidelines/brand-ring.html; the system's own lockup supersedes it. */ .lockup{ position:absolute;top:50%;left:50%; transform:translate(-50%,-50%); margin:0; width:clamp(140px,17vw,230px); } .lockup .mark--lockup{width:100%;height:auto;display:block} /* Text-only wordmark — shown when reel.js stamps data-mark on . The source SVG uses fill="currentColor", so it is masked and painted rather than placed as an image. Aspect is the file's own 256.983 / 122.714. */ .mark--wordmark{display:none} :root[data-mark="wordmark"] .mark--lockup{display:none} :root[data-mark="wordmark"] .mark--wordmark{ display:block;width:100%;aspect-ratio:256.983/122.714; background-color:var(--orbit-white); -webkit-mask:url('/assets/orbit-wordmark.svg') center/contain no-repeat; mask:url('/assets/orbit-wordmark.svg') center/contain no-repeat; } /* The wordmark is wide where the lockup is square, so it wants its own width. */ :root[data-mark="wordmark"] .lockup{width:clamp(120px,16vw,215px)} /* The statements reel draws the lockup into the canvas so text can pass behind it. Hidden with visibility, not display — the renderer still measures this element's box to size and place the mark it draws. */ :root[data-mark="canvas"] .lockup{visibility:hidden} /* ---- Edge chrome ---- .corner carries placement only. The legal line takes its type from the design system's own .orbit-caption (tokens/typography.css) so future token changes reach it; the contact line is site-specific and keeps its own treatment. */ .corner{position:fixed} /* Legal line: .orbit-caption supplies 12px / 400 / -0.01em / Stone 500. The source string is already all-caps, as the system's brand-legal card has it, so no text-transform is applied here either. */ .corner--legal{left:clamp(20px,4vw,56px);bottom:clamp(20px,4vw,44px)} /* Contact: same .orbit-caption type as the legal line. Casing lives in the markup, not in CSS, matching how the system sets its own all-caps strings. The one deliberate departure is the link colour: Stone 300 rather than the caption's Stone 500, so the page's only call to action sits above the legal boilerplate rather than level with it. */ .corner--contact{ right:clamp(20px,4vw,56px);bottom:clamp(20px,4vw,44px);text-align:right; } .info-trigger{ font:inherit; /* .orbit-caption on the parent */ color:var(--orbit-stone-300); background:none; border:0; text-decoration:none; /* it is an so the mailto survives no-JS */ border-bottom:1px solid var(--border-subtle); padding:0 0 2px; cursor:pointer; transition:color 120ms linear,border-color 120ms linear; } .info-trigger:hover{color:var(--orbit-white);border-color:var(--border-strong)} .info-trigger:focus-visible{outline:1px solid var(--border-strong);outline-offset:4px} /* The page's own corner chrome would otherwise ghost through the overlay and double up with its legal line. The lockup is left showing — at this scrim density it reads as depth rather than clutter. */ .info-open body > .corner{opacity:0;pointer-events:none} /* Deliberately not transitioned. Once the modal is open the document outside it is inert and the browser does not drive the transition, so the chrome would sit at full opacity for as long as the overlay is up. Applied instantly instead — which matches the overlay itself, which does not fade. */ /* ---- Information overlay ---- Full-bleed surface over the page. The scrim eases off toward the bottom so the design system's own --glow-gradient has room to register; held flat at 90% it swallowed the accent entirely. Emerald therefore still appears only as a glow rising from the bottom edge, per the manual. */ .info{ /* One source for the statement size: the desktop gaps are multiples of it, so type and spacing cannot drift apart at any width. */ --stmt-size:clamp(19px,2.5vw,33px); position:fixed;inset:0; width:100%;max-width:none;height:100%;max-height:none; margin:0;padding:0;border:0; background:linear-gradient(180deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.93) 52%, rgba(0,0,0,.72) 100%); color:var(--orbit-white); font-family:var(--font-sans); overflow:hidden; } .info::backdrop{background:rgba(0,0,0,.6)} .info::after{ content:'';position:absolute;inset:0;pointer-events:none; background:var(--glow-gradient); } /* CLOSE — design system Button, `secondary` at size sm: transparent fill, 1px border, square corners, 400 weight, 120ms opacity on hover. */ .info__close{ position:absolute;z-index:2; top:clamp(28px,4vw,54px);right:clamp(28px,5vw,74px); background:transparent; color:var(--text-body); border:1px solid var(--border-strong); border-radius:0; font:var(--weight-book) 13px/100% var(--font-sans); letter-spacing:.08em; padding:9px 20px; cursor:pointer; transition:opacity 120ms ease,border-color 120ms ease; } .info__close:hover{opacity:.8;border-color:var(--orbit-stone-300)} .info__close:focus-visible{outline:1px solid #fff;outline-offset:4px} /* Manual grid: content stacked from a generous left margin, legal bottom-left. */ .info__inner{ position:absolute;z-index:2; left:clamp(28px,5vw,74px);right:clamp(28px,5vw,74px); top:50%;transform:translateY(-50%); display:flex;flex-direction:column; gap:clamp(34px,5.5vh,64px); } .info__statement{ margin:0;max-width:19ch; color:var(--text-secondary); /* label gray #9C9C9C — the tone the system's own Dialog uses for body */ font-weight:var(--weight-light); font-size:var(--stmt-size); line-height:126%; letter-spacing:.005em; } .info__inquiries{ margin:clamp(18px,4vh,44px) 0 0; font-weight:var(--weight-light); font-size:clamp(13px,1.05vw,15px); letter-spacing:.06em; color:var(--text-secondary); /* label gray #9C9C9C */ } .info__inquiries a{ color:var(--text-body); text-decoration:none; border-bottom:1px solid var(--border-strong); padding-bottom:3px; transition:color 120ms linear,border-color 120ms linear; } .info__inquiries a:hover{color:var(--orbit-white);border-color:var(--orbit-stone-300)} /* Desktop leading. The statements are set tight — 108%, against the 126% the narrow layout keeps. The copy is all-caps, so there are no descenders to collide with the next line's cap-heights, and at 33px the lines lock into a solid declarative block rather than reading as loose separate lines. The two surrounding gaps come in with it, but keyed to the TYPE rather than to the viewport. Scaling their old clamps by the same factor was the obvious move and it was wrong: the type clamp bottoms out at 19px around 760px wide while a vh-based gap keeps tracking the window, so the gap-to-leading ratio drifted from 1.18x at 1440px to 1.82x at 700px — the lines tightened and the space between the paragraphs did not follow. Multiples of --stmt-size hold that ratio at 1.19x across every desktop width by construction. Scoped to desktop; below 640px the modal keeps its own smaller type, its own 126% leading and its own fixed 30px gap. */ @media (min-width:641px){ .info__statement{line-height:108%} .info__inner{gap:calc(var(--stmt-size) * 1.28)} .info__inquiries{margin-top:calc(var(--stmt-size) * 0.93)} } /* The overlay is itself a surface, so it carries the legal line — the page's own line sits underneath it. */ /* Star field. Static rather than animated: the reel is paused while the overlay is open, and a second animating canvas would give that saving straight back. */ .info__stars{position:absolute;inset:0;z-index:1;pointer-events:none;display:block} @media (max-width:640px){ .info__inner{gap:30px} .info__statement{font-size:20px;max-width:none} } @media (max-width:640px){ .lockup{width:min(44vw,180px)} /* Stacked and centred, and handed the full viewport width instead of a corner inset. That width — not a smaller size — is what keeps the legal line on one line; it stays at the 12px .orbit-caption size the wide layout uses. It fits on one line down to about 325px and wraps to two centred lines below that, which is the correct behaviour on a 320px device rather than a bug. */ .corner--contact,.corner--legal{ left:0;right:0;text-align:center;padding:0 16px; } .corner--legal{bottom:max(18px,env(safe-area-inset-bottom))} .corner--contact{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 34px)} } /* Reduced motion should cost the motion, not the image: the reel is held on its first frame (see the pause script in index.html) rather than hidden. */