/* Circumstellar — a dark, cartographic, deliberately quiet page. Committed to a single dark look: this is a game about deep space and a light theme would be a lie. No external fonts, no trackers, no requests off this host. */ :root { --ink: #05070d; --ink-2: #080b13; --paper: #d9dee8; --paper-dim: #8b95a8; --paper-faint:#5c6577; --gold: #e2b27c; --ice: #8fb6d8; --rule: rgba(217, 222, 232, 0.13); --measure: 34rem; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ink); color: var(--paper); font-family: ui-serif, Iowan Old Style, Palatino, Georgia, "Times New Roman", serif; font-size: 18px; line-height: 1.68; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ---------- backdrop ---------- */ #stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 50% 0%, rgba(60, 92, 140, 0.16), transparent 62%), radial-gradient(90% 70% at 50% 105%, rgba(226, 178, 124, 0.07), transparent 60%); } header, main, footer { position: relative; z-index: 2; } /* ---------- hero ---------- */ .hero { /* The orbit rings are deliberately wider than a phone, so they read as an arc rather than a complete ellipse. Clip them here: overflow-x on body alone does not stop reporting — and offering — the scroll. */ overflow: hidden; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6rem 1.5rem 5rem; position: relative; } .hero-rings { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(143, 182, 216, 0.18); pointer-events: none; } .hero-rings svg { width: min(150vh, 135vw); height: auto; transform: rotate(-8deg); } .hero-inner { position: relative; max-width: 46rem; } .wordmark { width: min(560px, 82vw); height: auto; display: block; margin: 0 auto 2.4rem; filter: drop-shadow(0 0 30px rgba(143, 182, 216, 0.22)); } .lede { font-size: clamp(1.35rem, 3.4vw, 1.9rem); line-height: 1.35; margin: 0 0 1.3rem; color: var(--paper); font-style: italic; } .sub { margin: 0 auto; max-width: 30rem; color: var(--paper-dim); font-size: 1.02rem; line-height: 1.7; } /* The store row replaces the old status pip. Logos are inline SVG so they inherit currentColor and need no extra request; sized in em so they track the label rather than a fixed pixel value. */ .stores { margin: 2.6rem 0 0; display: flex; align-items: center; justify-content: center; gap: 1.15rem; flex-wrap: wrap; } .stores-label { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper-faint); } .store-list { display: flex; align-items: center; gap: 1.35rem; margin: 0; padding: 0; list-style: none; } .store-logo { display: block; /* Both icons are square 24x24 viewBoxes whose glyphs fill the box, so equal width and height renders them at matching optical weight. */ width: 1.6rem; height: 1.6rem; fill: var(--paper-dim); opacity: 0.85; } .scroll-cue { position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%); width: 1px; height: 46px; background: linear-gradient(to bottom, transparent, var(--rule)); display: block; } .scroll-cue span { position: absolute; left: -2px; top: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--ice); animation: fall 3.4s ease-in-out infinite; } @keyframes fall { 0% { top: 0; opacity: 0; } 25% { opacity: 1; } 100% { top: 42px; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .scroll-cue span { animation: none; top: 20px; } } /* ---------- panels ---------- */ .panel { max-width: var(--measure); margin: 0 auto; padding: 7rem 1.5rem; border-top: 1px solid var(--rule); } .panel:first-of-type { border-top: none; } .panel-alt { max-width: 40rem; } .panel-wide { max-width: 48rem; } .panel-close { padding-bottom: 9rem; } .eyebrow { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin: 0 0 1.6rem; opacity: 0.85; } h2 { font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 300; font-size: clamp(1.7rem, 4.4vw, 2.5rem); line-height: 1.18; letter-spacing: -0.01em; margin: 0 0 1.8rem; max-width: 20ch; } .body { margin: 0 0 1.4rem; max-width: 34rem; color: rgba(217, 222, 232, 0.86); } .footnote { margin: 2rem 0 0; font-size: 0.86rem; color: var(--paper-faint); font-style: italic; } .pull { margin: 2.6rem 0; padding: 0 0 0 1.6rem; border-left: 2px solid var(--gold); font-size: 1.22rem; line-height: 1.5; font-style: italic; color: var(--paper); } /* ---------- the concept plates ---------- */ /* Three source crops with different aspect ratios, so the box is pinned and the image covers it. Without that the row goes ragged and the grid stops reading as a set. One column below the panel width, where a third of a phone is not enough picture to be worth showing. */ /* The plates break out wider than the measure they sit in. Centring a wider block inside a narrower one needs the 50%-then-translate pair; clamping the width against the viewport is what stops it becoming a horizontal scrollbar on a phone. */ .plates-wrap { width: min(62rem, calc(100vw - 3rem)); margin: 3.4rem 0 0 50%; transform: translateX(-50%); } .plates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .plates figure { margin: 0; } .plates img { display: block; width: 100%; /* height:auto is load-bearing. The width/height attributes on are presentational hints that set the width and height properties, and a specified height beats aspect-ratio, so without this the plates render at their natural 398px and overflow the column. */ height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--rule); filter: saturate(0.9) contrast(1.03); } .plate-note { margin: 0.9rem 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.63rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-faint); } /* ---------- footer ---------- */ footer { border-top: 1px solid var(--rule); padding: 3.5rem 1.5rem 5rem; text-align: center; color: var(--paper-faint); font-size: 0.86rem; } .foot-title { font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: 0.34em; text-transform: uppercase; font-size: 0.74rem; color: var(--paper-dim); margin: 0 0 1rem; } .foot-line { margin: 0.3rem 0; } footer a { color: var(--ice); text-decoration: none; border-bottom: 1px solid var(--rule); } footer a:hover { color: var(--gold); border-bottom-color: var(--gold); } /* ---------- preview auto-update badge ---------- */ .livebadge { position: fixed; z-index: 40; bottom: 1rem; right: 1rem; display: flex; align-items: center; gap: 0.5rem; padding: 0.42rem 0.8rem; border: 1px solid var(--rule); background: rgba(5, 7, 13, 0.86); backdrop-filter: blur(6px); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.63rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-faint); } .livebadge[hidden] { display: none; } .livebadge .dot { width: 6px; height: 6px; border-radius: 50%; background: #6bbf7a; box-shadow: 0 0 8px #6bbf7a; } .livebadge.updating .dot { background: var(--gold); box-shadow: 0 0 8px var(--gold); } @media (max-width: 640px) { body { font-size: 17px; } .panel { padding: 4.5rem 1.4rem; } } @media (max-width: 46rem) { .plates { grid-template-columns: 1fr; } }