/* ========================================================================== OBSIDIAN SQUAD - design system v11 "Deep Space" (Oct 2026 redesign) Futuristic sci-fi in the squad's own colours, refined: ion blue (the default) and plasma red (body.theme-alt), glowing on deep space navy. A starfield and nebula sit behind every page; panels are holographic glass with thin glowing edges, cut corners and bracket marks. Titles and readouts are Oxanium, reading text is Exo 2, small labels and numbers are Geist Mono. The navigation is a glass side rail on the left (v12; a top bar and slide-in drawer on phones and tablets, css/nav.css). Themes: Ion (default, blue), Plasma (body.theme-alt, red) and High contrast (body.theme-contrast). HOW TO COLOUR THINGS - always use these tokens, never a raw colour: --paper the page --sheet a panel / card --sheet-2 an inset or hover --ink text --ink-2 secondary text --ink-3 quiet text, hints --rule glowing edges --rule-soft hairlines inside panels --accent ion blue / plasma red, the main action (text on it: --on-accent) --solid a lit selection, pale theme colour (text on it: --on-solid) --link links and highlighted words --good / --warn / --bad status colours --crt / --phosphor number readouts (.crt) Older names (--s1..--s4, --stripes-h, --main-colour1, --highlight-colour, --gradient-main ...) still work and point at sensible colours: the "stripes" are now a 1px accent line. Plain words, no em dashes (site rule). ========================================================================== */ @font-face { font-family: 'Oxanium'; src: url('../fonts/oxanium-var.woff2') format('woff2-variations'), url('../fonts/oxanium-var.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Exo 2'; src: url('../fonts/exo2-var.woff2') format('woff2-variations'), url('../fonts/exo2-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Exo 2'; src: url('../fonts/exo2-var-i.woff2') format('woff2-variations'), url('../fonts/exo2-var-i.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('../fonts/geist-mono-var.woff2') format('woff2-variations'), url('../fonts/geist-mono-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* The squad's own heading face (brought back 18 Oct 2026, Matt: "bring back the obsidian font for all the main headers"). One weight, letters and numbers only: the weight range stops browsers faking a bold, and anything it has no glyph for (- & ' : .) falls through to Oxanium. */ @font-face { font-family: 'Obsidian'; src: url('Obsidian.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } :root, body { color-scheme: dark; /* ---- v11 palette: Ion (the squad blue) ---- */ --paper: #050A14; --sheet: rgba(12, 24, 44, 0.74); --sheet-2: rgba(20, 38, 66, 0.82); --sheet-3: rgba(28, 52, 88, 0.86); --ink: #E6F1FF; --ink-2: #A3BAD8; --ink-3: #6E89AE; --rule: rgba(79, 195, 255, 0.38); --rule-soft: rgba(79, 195, 255, 0.14); --accent: #4FC3FF; --accent-hi: #8AD8FF; --accent-soft: rgba(79, 195, 255, 0.14); --on-accent: #02111F; --solid: #8AD8FF; --solid-hi: #B5E7FF; --on-solid: #02111F; --link: #7FD3FF; --good: #4BE3A0; --warn: #FFC85A; --bad: #FF4D5E; --crt: rgba(2, 10, 22, 0.82); --phosphor: #BFE8FF; --phosphor-dim: #6E9CC6; --console: rgba(4, 10, 22, 0.72); --console-2: rgba(20, 38, 66, 0.85); --console-ink: #E6F1FF; --console-ink-2: #8FA9CC; --glow: 0 0 20px rgba(79, 195, 255, 0.35); --glow-cyan: 0 0 20px rgba(79, 195, 255, 0.35); --shadow: 0 0 0 1px var(--rule-soft), 0 12px 32px -14px rgba(0, 0, 0, 0.8); --lift: 0 0 24px -6px rgba(79, 195, 255, 0.35); --nebula-1: rgba(40, 110, 220, 0.22); --nebula-2: rgba(120, 60, 220, 0.14); --s1: #8AD8FF; --s2: #4FC3FF; --s3: #2E8FE0; --s4: #1B5FA8; --stripes-h: linear-gradient(180deg, var(--accent) 0 1px, transparent 1px); --stripes-v: linear-gradient(90deg, transparent calc(100% - 1px), var(--rule) calc(100% - 1px)); --sunset: linear-gradient(var(--accent), var(--accent)); --rail-w: 252px; --rail-w-min: 68px; --page-w: 1280px; --gutter: clamp(1rem, 3vw, 2.5rem); --r-panel: 0px; --r-inset: 0px; --r-pill: 0px; --cut: 12px; --chamfer: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); /* ---- older names ---- */ --main-colour1: #0E3A66; --main-colour2: #135089; --border-colour: rgba(79, 195, 255, 0.38); --highlight-colour: var(--link); --glow-colour: rgba(79, 195, 255, 0.45); --background-dark: var(--paper); --background-mid: var(--sheet-2); --background-card: var(--sheet); --text: var(--ink); --gradient-main: linear-gradient(var(--sheet), var(--sheet)); --gradient-accent: linear-gradient(var(--accent), var(--accent)); --gradient-accent-transparent: linear-gradient(var(--sheet-2), var(--sheet-2)); --gradient-dark: linear-gradient(var(--sheet-2), var(--sheet-2)); --gradient-light: linear-gradient(var(--sheet), var(--sheet)); --radius1: 0px; --radius2: 0px; --font-display: 'Oxanium', 'Exo 2', system-ui, sans-serif; --font-head: 'Obsidian', 'Oxanium', 'Exo 2', system-ui, sans-serif; /* h1-h3 and the wordmarks */ --font-body: 'Exo 2', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-crt: 'Oxanium', 'Geist Mono', ui-monospace, monospace; --font-mono: 'Geist Mono', ui-monospace, "Cascadia Mono", Consolas, monospace; --muted: var(--ink-2); --line: var(--rule-soft); --control-h: 42px; --label-size: 0.8rem; } /* Plasma: the squad red. */ body.theme-alt { --paper: #0C0508; --sheet: rgba(40, 12, 18, 0.74); --sheet-2: rgba(60, 18, 26, 0.82); --sheet-3: rgba(84, 24, 34, 0.86); --ink: #FFEDEF; --ink-2: #D9A9B0; --ink-3: #A87079; --rule: rgba(255, 77, 94, 0.4); --rule-soft: rgba(255, 77, 94, 0.15); --accent: #FF4D5E; --accent-hi: #FF8A96; --accent-soft: rgba(255, 77, 94, 0.15); --on-accent: #1C0206; --solid: #FF8A96; --solid-hi: #FFB0B8; --on-solid: #1C0206; --link: #FF8A96; --crt: rgba(18, 2, 6, 0.82); --phosphor: #FFD3D8; --phosphor-dim: #C47A84; --console: rgba(18, 4, 8, 0.72); --console-2: rgba(60, 18, 26, 0.85); --console-ink: #FFEDEF; --console-ink-2: #CC9AA2; --glow: 0 0 20px rgba(255, 77, 94, 0.35); --lift: 0 0 24px -6px rgba(255, 77, 94, 0.35); --nebula-1: rgba(220, 40, 70, 0.2); --nebula-2: rgba(160, 40, 140, 0.13); --s1: #FF8A96; --s2: #FF4D5E; --s3: #D9293D; --s4: #9C1626; --main-colour1: #5A1420; --main-colour2: #7A1A2A; --border-colour: rgba(255, 77, 94, 0.4); --glow-colour: rgba(255, 77, 94, 0.45); } /* High contrast: black, white and yellow. Picked from the Theme menu (js/os-theme.js), or by itself when the computer asks for more contrast and nothing was picked. */ body.theme-contrast { color-scheme: dark; --paper: #000000; --sheet: #000000; --sheet-2: #111111; --sheet-3: #222222; --ink: #FFFFFF; --ink-2: #FFFFFF; --ink-3: #FFFFFF; --rule: #FFFFFF; --rule-soft: #FFFFFF; --s1: #FFE000; --s2: #FFE000; --s3: #FFE000; --s4: #FFE000; --accent: #FFE000; --accent-hi: #FFE000; --accent-soft: #000000; --on-accent: #000000; --solid: #FFFFFF; --solid-hi: #FFE000; --on-solid: #000000; --link: #FFE000; --good: #FFE000; --warn: #FFE000; --bad: #FFE000; --phosphor: #FFE000; --phosphor-dim: #FFFFFF; --console: #000000; --console-2: #000000; --console-ink: #FFFFFF; --console-ink-2: #FFFFFF; --main-colour1: #0033A0; --main-colour2: #0033A0; --border-colour: #FFFFFF; --glow-colour: transparent; --muted: #FFFFFF; --sc-card: #000000; --sc-card-2: #000000; --sc-muted: #FFFFFF; --sc-line: rgba(255, 255, 255, 0.75); --shadow: none; --lift: none; --r-panel: 0px; background: #000000; color: #FFFFFF; } .theme-contrast, .theme-contrast * { text-shadow: none !important; } .theme-contrast :focus-visible { outline: 3px solid #FFE000 !important; outline-offset: 2px !important; } .theme-contrast main p a:not([class*="btn"]), .theme-contrast main li a:not([class*="btn"]), .theme-contrast main td a:not([class*="btn"]), .theme-contrast footer a { text-decoration: underline; } /* ---------------------------------------------------------------- base */ /* Space: three layers of stars, a nebula in the theme colour, deep navy. */ html { height: 100%; margin: 0; padding: 0; -webkit-text-size-adjust: 100%; background-color: #050A14; background-image: radial-gradient(1.8px 1.8px at 231px 286px, rgba(255, 255, 255, 0.8) 50%, transparent 52%), radial-gradient(0.8px 0.8px at 260px 300px, rgba(190, 220, 255, 0.5) 50%, transparent 52%), radial-gradient(1.2px 1.2px at 243px 322px, rgba(255, 255, 255, 0.5) 50%, transparent 52%), radial-gradient(0.8px 0.8px at 228px 155px, rgba(190, 220, 255, 0.35) 50%, transparent 52%), radial-gradient(1.4px 1.4px at 414px 355px, rgba(190, 220, 255, 0.35) 50%, transparent 52%), radial-gradient(1.4px 1.4px at 202px 231px, rgba(190, 220, 255, 0.95) 50%, transparent 52%), radial-gradient(0.6px 0.6px at 80px 319px, rgba(255, 255, 255, 0.95) 50%, transparent 52%), radial-gradient(0.8px 0.8px at 60px 36px, rgba(190, 220, 255, 0.5) 50%, transparent 52%), radial-gradient(1px 1px at 30px 475px, rgba(190, 220, 255, 0.8) 50%, transparent 52%), radial-gradient(0.8px 0.8px at 200px 531px, rgba(255, 255, 255, 0.65) 50%, transparent 52%), radial-gradient(1px 1px at 4px 87px, rgba(255, 255, 255, 0.65) 50%, transparent 52%), radial-gradient(1px 1px at 85px 260px, rgba(190, 220, 255, 0.5) 50%, transparent 52%), radial-gradient(0.6px 0.6px at 295px 30px, rgba(255, 255, 255, 0.95) 50%, transparent 52%), radial-gradient(1.8px 1.8px at 410px 110px, rgba(255, 255, 255, 0.65) 50%, transparent 52%), radial-gradient(1.8px 1.8px at 68px 17px, rgba(255, 255, 255, 0.35) 50%, transparent 52%), radial-gradient(1px 1px at 214px 53px, rgba(190, 220, 255, 0.8) 50%, transparent 52%), radial-gradient(0.6px 0.6px at 406px 429px, rgba(190, 220, 255, 0.95) 50%, transparent 52%), radial-gradient(1px 1px at 203px 691px, rgba(255, 255, 255, 0.65) 50%, transparent 52%), radial-gradient(0.6px 0.6px at 318px 340px, rgba(255, 255, 255, 0.8) 50%, transparent 52%), radial-gradient(1.4px 1.4px at 137px 252px, rgba(255, 255, 255, 0.35) 50%, transparent 52%), radial-gradient(1.8px 1.8px at 61px 476px, rgba(255, 255, 255, 0.8) 50%, transparent 52%), radial-gradient(0.8px 0.8px at 698px 572px, rgba(190, 220, 255, 0.8) 50%, transparent 52%), radial-gradient(1px 1px at 195px 134px, rgba(255, 255, 255, 0.8) 50%, transparent 52%), radial-gradient(0.8px 0.8px at 404px 430px, rgba(255, 255, 255, 0.35) 50%, transparent 52%), radial-gradient(1100px 700px at 85% -10%, rgba(40, 110, 220, 0.22), transparent 70%), radial-gradient(900px 600px at -10% 110%, rgba(120, 60, 220, 0.14), transparent 70%), linear-gradient(180deg, #050A14 0%, #071226 100%); background-size: 419px 419px, 419px 419px, 419px 419px, 419px 419px, 419px 419px, 419px 419px, 419px 419px, 557px 557px, 557px 557px, 557px 557px, 557px 557px, 557px 557px, 557px 557px, 557px 557px, 557px 557px, 733px 733px, 733px 733px, 733px 733px, 733px 733px, 733px 733px, 733px 733px, 733px 733px, 733px 733px, 733px 733px, auto, auto, auto; background-attachment: fixed; } html:has(> body.theme-alt) { background-color: #0C0508; background-image: radial-gradient(1px 1px at 411px 303px, rgba(255, 255, 255, 0.35) 50%, transparent 52%), radial-gradient(1.8px 1.8px at 95px 201px, rgba(255, 210, 215, 0.95) 50%, transparent 52%), radial-gradient(0.6px 0.6px at 295px 51px, rgba(255, 255, 255, 0.5) 50%, transparent 52%), radial-gradient(0.6px 0.6px at 226px 132px, rgba(255, 255, 255, 0.95) 50%, transparent 52%), radial-gradient(0.6px 0.6px at 151px 197px, rgba(255, 255, 255, 0.35) 50%, transparent 52%), radial-gradient(1.4px 1.4px at 106px 298px, rgba(255, 255, 255, 0.5) 50%, transparent 52%), radial-gradient(1px 1px at 307px 188px, rgba(255, 255, 255, 0.95) 50%, transparent 52%), radial-gradient(1.8px 1.8px at 130px 495px, rgba(255, 255, 255, 0.95) 50%, transparent 52%), radial-gradient(1.4px 1.4px at 395px 187px, rgba(255, 255, 255, 0.5) 50%, transparent 52%), radial-gradient(1.4px 1.4px at 233px 255px, rgba(255, 255, 255, 0.5) 50%, transparent 52%), radial-gradient(1px 1px at 201px 397px, rgba(255, 255, 255, 0.95) 50%, transparent 52%), radial-gradient(0.6px 0.6px at 431px 48px, rgba(255, 255, 255, 0.35) 50%, transparent 52%), radial-gradient(0.8px 0.8px at 524px 261px, rgba(255, 255, 255, 0.8) 50%, transparent 52%), radial-gradient(1px 1px at 430px 502px, rgba(255, 255, 255, 0.95) 50%, transparent 52%), radial-gradient(0.8px 0.8px at 70px 129px, rgba(255, 210, 215, 0.8) 50%, transparent 52%), radial-gradient(1.2px 1.2px at 669px 630px, rgba(255, 255, 255, 0.35) 50%, transparent 52%), radial-gradient(1.4px 1.4px at 217px 208px, rgba(255, 255, 255, 0.35) 50%, transparent 52%), radial-gradient(1px 1px at 275px 421px, rgba(255, 255, 255, 0.5) 50%, transparent 52%), radial-gradient(1px 1px at 47px 180px, rgba(255, 210, 215, 0.65) 50%, transparent 52%), radial-gradient(0.6px 0.6px at 585px 134px, rgba(255, 255, 255, 0.65) 50%, transparent 52%), radial-gradient(1.4px 1.4px at 461px 338px, rgba(255, 210, 215, 0.95) 50%, transparent 52%), radial-gradient(0.6px 0.6px at 143px 604px, rgba(255, 255, 255, 0.35) 50%, transparent 52%), radial-gradient(1px 1px at 366px 717px, rgba(255, 255, 255, 0.35) 50%, transparent 52%), radial-gradient(0.6px 0.6px at 612px 651px, rgba(255, 255, 255, 0.8) 50%, transparent 52%), radial-gradient(1100px 700px at 85% -10%, rgba(220, 40, 70, 0.2), transparent 70%), radial-gradient(900px 600px at -10% 110%, rgba(160, 40, 140, 0.13), transparent 70%), linear-gradient(180deg, #0C0508 0%, #16070C 100%); background-size: 419px 419px, 419px 419px, 419px 419px, 419px 419px, 419px 419px, 419px 419px, 419px 419px, 557px 557px, 557px 557px, 557px 557px, 557px 557px, 557px 557px, 557px 557px, 557px 557px, 557px 557px, 733px 733px, 733px 733px, 733px 733px, 733px 733px, 733px 733px, 733px 733px, 733px 733px, 733px 733px, 733px 733px, auto, auto, auto; } html:has(> body.theme-contrast) { background: #000; } body { min-height: 100%; margin: 0; padding: 0; display: flex; flex-direction: column; font-family: var(--font-body); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant-numeric: tabular-nums; background: transparent; color: var(--ink); } ::selection { background: var(--accent); color: var(--on-accent); } a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } button, input, select, textarea { font-family: inherit; } .site-content { flex: 1; width: 100%; min-width: 0; } h1, h2, h3 { font-family: var(--font-head); } h4 { font-family: var(--font-display); } h1, h2, h3, h4 { font-weight: 600; line-height: 1.08; letter-spacing: 0.02em; color: var(--ink); text-wrap: balance; } h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); } h3 { font-size: 1.15rem; } h4 { font-size: 1rem; } :where(h2.os-h1) { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-block: 0.5em; } p, li, ul { font-size: 1rem; } p { text-wrap: pretty; } b, strong { font-weight: 700; } code, kbd { font-family: var(--font-crt); font-size: 0.88em; } kbd { padding: 0.1em 0.45em; border: 1px solid var(--rule); border-radius: 0; background: var(--sheet-2); color: var(--ink-2); } hr { border: 0; border-top: 1px solid var(--rule); } table { border-collapse: collapse; } .fade-in { opacity: 0; animation: fadeIn 0.8s ease forwards; } .fade-in.delay-1 { animation-delay: 0.4s; } .fade-in.delay-2 { animation-delay: 0.8s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Reduce motion: see "Reduce motion" further down (one rule for the whole site). */ @media (prefers-reduced-motion: reduce) { .fade-in { opacity: 1; } } * { scrollbar-color: var(--rule) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--rule); } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* ------------------------------------------------------------------ PAGE HEADERS 1. Plain: the page's

straight under
followed by a

(or .os-page-title / .os-page-sub). Large, tight, left aligned, with a hairline under the subtitle. 2. Picture band (.bg-container: About, Officers, Guides ...): the picture in a rounded frame, fading to black, title low on the left. ------------------------------------------------------------------ */ main.site-content > h1, .os-page-title { box-sizing: border-box; width: 100%; max-width: var(--page-w); margin: clamp(1.8rem, 4vw, 3rem) auto 0; padding: 0 var(--gutter); font-family: var(--font-head); font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 700; letter-spacing: 0.04em; line-height: 1; text-align: left; text-transform: uppercase; color: var(--ink); text-shadow: 0 0 28px var(--glow-colour); } main.site-content > h1 + p, .os-page-sub { position: relative; box-sizing: border-box; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--page-w) - 2 * var(--gutter)); margin: 0.8rem auto clamp(1.6rem, 3.4vw, 2.6rem); padding: 0 0 1rem; border: 0; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-2); text-align: left; text-transform: uppercase; letter-spacing: 0.08em; } main.site-content > h1 + p::before, .os-page-sub::before { content: "> "; color: var(--accent); } /* A scan line under every plain page header, bright in the middle. */ main.site-content > h1 + p::after, .os-page-sub::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--accent), var(--rule) 40%, transparent); box-shadow: 0 0 8px var(--glow-colour); } /* The picture band: a viewscreen with bracket corners. */ .bg-container { position: relative; box-sizing: border-box; display: flex; align-items: flex-end; justify-content: flex-start; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--page-w) - 2 * var(--gutter)); height: clamp(240px, 40vh, 420px); margin: clamp(1.2rem, 3vw, 2rem) auto clamp(1.4rem, 3vw, 2.4rem); background-color: #02060E; background-position: center 40%; background-repeat: no-repeat; background-size: cover; border: 1px solid var(--rule); box-shadow: 0 0 40px -10px var(--glow-colour); clip-path: var(--chamfer); filter: none; overflow: hidden; isolation: isolate; } .bg-container::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(3, 8, 18, 0.92) 0%, rgba(3, 8, 18, 0.2) 60%, transparent 100%), linear-gradient(90deg, rgba(3, 8, 18, 0.6) 0%, transparent 60%); pointer-events: none; } .bg-container-text { box-sizing: border-box; width: 100%; max-width: 100%; padding: 0 1.6rem 1.4rem; display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: none; } .bg-container-text h1 { margin: 0; font-size: clamp(2.2rem, 5.4vw, 4.2rem); font-weight: 700; letter-spacing: 0.04em; line-height: 1; text-align: left; text-transform: uppercase; color: #FFFFFF; text-shadow: 0 0 24px var(--glow-colour); } .bg-container-text p { margin: 0.6rem 0 0; padding: 0; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; text-align: left; text-transform: uppercase; color: var(--ink-2); background: none; border-radius: 0; } .bg-container-text p::before { content: "> "; color: var(--accent); } .bg-container .scroll-cue, .scroll-cue { display: none; } /* 22 Oct 2026 (speed on phones and slower connections): the banner pictures come from images/bg/ - 1920 px wide copies (900 px on phones) of the full-size photos in images/webp/ (those stay for the gallery). 8.4 MB of banners became 0.7 MB (0.2 MB on phones). */ .bg-joinUs { background-image: url('../images/bg/49-1920.webp'); } .bg-about { background-image: url('../images/bg/49-1920.webp'); } .bg-gallery { background-image: url('../images/bg/10-1920.webp'); } .bg-officers1 { background-image: url('../images/bg/66-1920.webp'); } .bg-acknowledgements { background-image: url('../images/bg/202-1920.webp'); } .bg-guides { background-image: url('../images/bg/193-1920.webp'); } .bg-timeline { background-image: url('../images/bg/233-1920.webp'); } @media (max-width: 700px) { .bg-joinUs, .bg-about { background-image: url('../images/bg/49-900.webp'); } .bg-gallery { background-image: url('../images/bg/10-900.webp'); } .bg-officers1 { background-image: url('../images/bg/66-900.webp'); } .bg-acknowledgements { background-image: url('../images/bg/202-900.webp'); } .bg-guides { background-image: url('../images/bg/193-900.webp'); } .bg-timeline { background-image: url('../images/bg/233-900.webp'); } } /* ========================================================================== Tab filters (.os-tabs / .os-tab) - added 21 Sep 2026 Shared by the Trade page and the Members Dashboard so the two look and behave identically. Lives in root.css because those pages load different stylesheets otherwise (commodities.css vs members_dashboard_layout_default.css) and a duplicated component is how the two drift apart later. All colour comes from tokens, so the alt theme follows automatically. ========================================================================== */ .os-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; /* width:100% matters: inside a centred flex column (the homepage's .home-linkgroup) the row would otherwise shrink to fit its content, so each tab collapsed to min-width and "ABOUT US" broke onto two lines. */ width: 100%; box-sizing: border-box; max-width: 46rem; margin: 1.3rem auto .6rem; padding: 0 1rem; } /* flex-basis 0 + min-width shares the row evenly and wraps cleanly on a phone rather than overflowing - the 375px overflow already on the parked list is this exact failure, so it is designed for rather than fixed later. */ .os-tab { flex: 1 1 0; min-width: 8rem; max-width: 15rem; background: transparent; border: 1px solid var(--border-colour); border-radius: var(--radius1); color: var(--muted); cursor: pointer; font: inherit; font-size: clamp(.9rem, 2.2vw, 1.1rem); letter-spacing: .14em; text-transform: none; padding: .85rem 1rem; /* A label never breaks mid-word; the whole row wraps instead. */ white-space: nowrap; transition: color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; } .os-tab:hover { color: var(--ink); border-color: var(--highlight-colour); } /* The brighter state marks the active filter. */ .os-tab.is-active { background: var(--gradient-accent); border-color: var(--highlight-colour); color: var(--ink); box-shadow: 0 0 18px color-mix(in srgb, var(--glow-colour) 45%, transparent); } .os-tab:focus-visible { outline: 2px solid var(--glow-colour); outline-offset: 2px; } /* !important is deliberate and scoped: each page's own stylesheet loads after this one and may give a tab panel a grid or flex display, which would otherwise beat a plain [hidden] rule and leave every panel on screen. */ .os-tabpanel[hidden] { display: none !important; } /* ========================================================================== Components - 21 Sep 2026 consistency pass The canonical versions, taken from the Supply Chain pages the site owner picked. New markup should use these classes; older pages' own rules have been brought into line with the same values. ========================================================================== */ /* Button: dark gradient, bright border, display font ("Log product to warehouse", the dashboard card buttons). */ .os-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: var(--control-h); padding: 0.45rem 1rem; background: var(--gradient-main); color: var(--ink); border: 0.125rem solid var(--highlight-colour); border-radius: var(--radius1); font-family: var(--font-display); font-size: 0.95rem; text-decoration: none; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .os-btn:hover:not([disabled]) { transform: scale(1.03); box-shadow: 0 0 10px var(--glow-colour); } .os-btn[disabled] { opacity: 0.45; cursor: not-allowed; } /* Form label: small, bold, muted blue, sentence case ("Product", "Quantity"). */ .os-label { display: block; margin-bottom: 0.3rem; font-size: var(--label-size); font-weight: bold; color: var(--muted); } /* Stat tile: small uppercase label above a large number ("MATERIAL LOTS 0"). */ .os-stat { padding: 0.9rem 1rem; background: var(--background-dark); border: 1px solid var(--border-colour); border-radius: var(--radius1); text-align: center; } /* ============================================================ LAYERING - what sits in front of what (2026-09-24) Anything position:fixed on this site belongs somewhere on this scale. It was not written down anywhere before, so a new overlay picked a number out of the air and either landed under the nav or tied with an existing one - and an equal z-index is settled by document order, which depends on which popup the member happened to open first. That is a bug which only shows up for some people some of the time, which is the worst kind. 990 Battle Stations' "Placing " bar (battlestations.css): over the page, under the nav and the phones' bottom bar 999 nav drop-down (nav.css) 1000 the site nav: console rail, phone top bar and drawer (nav.css) 1050 the phones' bottom dock for members (.os-mobile-bar): over the page, under full-page panels and popups 1100 full-page detail panels and their backdrops: the Supply Chain blueprint panel, the Ship Codex panel (1101 is the panel itself, sitting on its own backdrop) 1200 popups: .sc-notify-overlay (every Supply Chain modal), .mining-lightbox, the Retrofitter's modal (1201 is its modal above its own backdrop), Recommended Gear's chart zoom (.gear-zoom) 1250 .os-offer-overlay - the aUEC offer popup, the one popup that opens ON TOP of another popup 1300 in-page toasts that have to clear a popup (.sc-toast and the Retrofitter's loader box) 1500 Pledge Rain, which takes over the whole screen 2900 .os-upload.is-floating - an upload's progress bar from a popup 3000 .os-toasts - the site's notifications, always in front Below 100 is for things inside a card (combo drop-downs and the like): they sit in their own stacking context and do not compete. ============================================================ */ /* ============================================================ NOTIFICATIONS (2026-09-22) - js/os-toast.js The one notification style for the whole site: the small black box bottom-right that the Retrofitter's SCM / Nav switch introduced. Errors get a red border and stay up longer; click any to dismiss. ============================================================ */ .os-toasts { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 3000; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; max-width: min(420px, calc(100vw - 2.4rem)); pointer-events: none; } .os-toast { pointer-events: auto; box-sizing: border-box; max-width: 100%; padding: 0.7rem 0.9rem; background: #000; border: 1px solid var(--highlight-colour); border-radius: 8px; color: var(--ink); font-family: var(--font-body); font-size: 0.9rem; line-height: 1.4; text-align: left; overflow-wrap: anywhere; cursor: pointer; opacity: 0; transform: translateY(8px); transition: opacity 0.22s ease, transform 0.22s ease; } .os-toast.show { opacity: 1; transform: none; } .os-toast.is-error { border-color: var(--bad); } @media (prefers-reduced-motion: reduce) { .os-toast { transition: none; transform: none; } } /* Server flash messages become toasts - hide them in the page so they don't show for a frame first (only when the script has run). */ .os-js p.error:not([role]):not([data-no-toast]), .os-js p.info:not([role]):not([data-no-toast]) { display: none; } /* Screen-reader / search-engine text that takes no space on screen (22 Sep 2026, used by the data pages' first view - scripts/seo_prerender.php). */ .os-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------------- 2026-09-23: bug or suggestion ---------------- Used on the Feedback page and on the admin dashboard, which do not share a stylesheet - hence here rather than in either of them. */ /* Which kind an item is, on its card in the Active / In Progress lists. */ .bug-kind { display: inline-block; margin-right: 0.45rem; padding: 0.05rem 0.5rem; border-radius: 999px; border: 1px solid currentColor; font-family: var(--font-body); font-size: 0.68rem; font-weight: bold; letter-spacing: 0.06em; text-transform: none; vertical-align: middle; } .bug-kind.is-bug { color: var(--bad); } .bug-kind.is-suggestion { color: var(--good); } /* BACK button (2026-10-01) - scripts/back_link.php. Top left of a sub-page, just under the logo, and scrolls away with the page like its heading. */ .os-back-bar { width: 100%; margin: 0; padding: 0.75rem 1rem 0; /* the nav's own side padding: lines up under the logo */ box-sizing: border-box; text-align: left; } .os-back { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.8rem; border: 0.125rem solid var(--border-colour); border-radius: var(--radius1); background: var(--sheet); color: var(--highlight-colour); font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: none; text-decoration: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .os-back:hover, .os-back:focus-visible { border-color: var(--highlight-colour); box-shadow: 0 0 8px var(--glow-colour); outline: none; } .os-back .fa { font-size: 0.7rem; } /* The page title straight after it sits a little closer. */ main.site-content > .os-back-bar + h1, main.site-content > .os-back-bar + .os-page-title { margin-top: 0.5rem; } /* Pages whose

has its own padding (the Supply Chain look: Supply Chain, Meets, Task List) - pull the BACK bar back so it lines up under the logo like everywhere else. */ main.supply-chain-page > .os-back-bar { margin: -1rem 0 0 -1.5rem; width: calc(100% + 1.5rem); } /* Phone tidy-up (12 Oct 2026): the "Filters" button made by js/os-filters.js. On a phone the parts of a filter box marked .os-more fold away behind it; on a computer the button is hidden and everything shows. */ .os-more-btn { display: none; } @media (max-width: 700px) { .os-more-btn { display: flex; align-items: center; gap: 0.55rem; width: 100%; min-height: 44px; box-sizing: border-box; grid-column: 1 / -1; flex: 1 1 100%; margin: 0.25rem 0; padding: 0.55rem 0.9rem; border: 1px solid var(--border-colour); border-radius: var(--radius1, 8px); background: var(--sheet); color: var(--ink); font: inherit; font-size: 1rem; text-align: left; cursor: pointer; } .os-more-btn:hover, .os-more-btn:focus-visible { border-color: var(--highlight-colour); outline: none; } .os-more-btn .fa-sliders { color: var(--highlight-colour); } .os-more-btn .os-more-chev { margin-left: auto; transition: transform 0.2s ease; } .os-more-btn[aria-expanded="true"] .os-more-chev { transform: rotate(180deg); } html:not(.os-filters-open) [data-os-filters] .os-more { display: none !important; } } /* "How this works" (12 Oct 2026): a short, folded help box near the top of the harder pages (Supply Chain, Mining Board, Loadout Builder). */ details.os-howto { max-width: 900px; margin: 0.5rem auto 1rem; border: 1px solid var(--border-colour); border-radius: var(--radius1, 8px); background: var(--sheet); text-align: left; } details.os-howto > summary { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.5rem 0.9rem; color: var(--highlight-colour); font-weight: bold; cursor: pointer; list-style: none; } details.os-howto > summary::-webkit-details-marker { display: none; } details.os-howto > summary .os-howto-chev { margin-left: auto; transition: transform 0.2s ease; } details.os-howto[open] > summary .os-howto-chev { transform: rotate(180deg); } details.os-howto > summary:focus-visible { outline: 2px solid var(--highlight-colour); outline-offset: 2px; } details.os-howto ol { margin: 0; padding: 0 1.2rem 0.9rem 2.3rem; color: var(--ink); font-size: 0.98rem; line-height: 1.5; } details.os-howto li { margin: 0.3rem 0; text-align: left; } details.os-howto b { color: var(--highlight-colour); } /* Editing "How this works" (12 Oct 2026, howto.edit): the Edit button inside the box and the popup made by js/os-howto.js. */ details.os-howto p.os-howto-tools { margin: 0; padding: 0 1.2rem 0.9rem; text-align: right; } .os-howto-edit { min-height: 36px; padding: 0.35rem 0.8rem; border: 1px solid var(--border-colour); border-radius: var(--radius1, 8px); background: transparent; color: var(--highlight-colour); font: inherit; font-size: 0.9rem; cursor: pointer; } .os-howto-edit:hover, .os-howto-edit:focus-visible { border-color: var(--highlight-colour); outline: none; } .os-howto-modal { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 1rem; background: rgba(10, 2, 24, 0.6); } .os-howto-modal[hidden] { display: none; } .os-howto-card { position: relative; width: min(640px, 100%); max-height: calc(100vh - 2rem); overflow: auto; box-sizing: border-box; padding: 1.3rem 1.4rem; border: 1px solid var(--highlight-colour); border-radius: var(--radius2, 1rem); background: var(--sheet); color: var(--ink); text-align: left; } .os-howto-card h2 { margin: 0 2rem 0.6rem 0; font-size: 1.15rem; text-align: left; color: var(--highlight-colour); } .os-howto-card p { text-align: left; } .os-howto-card p.os-howto-note { margin: 0 0 0.8rem; font-size: 0.92rem; color: var(--ink-2); } .os-howto-card .os-howto-lbl { display: block; margin: 0.6rem 0 0.3rem; font-size: 0.85rem; font-weight: bold; color: var(--ink-2); } .os-howto-card textarea { width: 100%; box-sizing: border-box; padding: 0.6rem 0.7rem; border: 1px solid var(--border-colour); border-radius: var(--radius1, 8px); background: var(--sheet); color: var(--ink); font: inherit; font-size: 0.95rem; line-height: 1.45; resize: vertical; } .os-howto-card textarea:focus { outline: none; border-color: var(--highlight-colour); } .os-howto-card ol.os-howto-preview { margin: 0; padding: 0.6rem 0.8rem 0.6rem 2rem; border: 1px dashed var(--border-colour); border-radius: var(--radius1, 8px); font-size: 0.95rem; line-height: 1.5; } .os-howto-card ol.os-howto-preview b { color: var(--highlight-colour); } .os-howto-card p.os-howto-err { margin: 0.7rem 0 0; color: var(--bad); } .os-howto-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .os-howto-btn { min-height: 40px; padding: 0.45rem 1rem; border: 1px solid var(--highlight-colour); border-radius: var(--radius1, 8px); background: transparent; color: var(--ink); font: inherit; cursor: pointer; } .os-howto-btn.primary { background: var(--gradient-main); } .os-howto-btn[hidden] { display: none; } .os-howto-x { position: absolute; top: 0.6rem; right: 0.7rem; width: 36px; height: 36px; border: 0; background: transparent; color: var(--ink); font-size: 1.5rem; cursor: pointer; } .os-howto-card ol.os-howto-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; counter-reset: howto-step; } .os-howto-card ol.os-howto-steps li { display: flex; gap: 0.4rem; align-items: flex-start; counter-increment: howto-step; } .os-howto-card ol.os-howto-steps li::before { content: counter(howto-step); flex: 0 0 1.6rem; padding-top: 0.6rem; color: var(--highlight-colour); font-weight: bold; text-align: center; } .os-howto-card ol.os-howto-steps textarea { overflow: hidden; resize: none; } .os-howto-card ol.os-howto-steps textarea { flex: 1 1 auto; min-width: 0; } .os-howto-row-tools { display: flex; flex-direction: column; gap: 0.25rem; } .os-howto-row-tools button { width: 34px; height: 30px; border: 1px solid var(--border-colour); border-radius: var(--radius1, 8px); background: transparent; color: var(--highlight-colour); cursor: pointer; } .os-howto-row-tools button:disabled { opacity: 0.35; cursor: default; } .os-howto-row-tools button[data-howto-act="remove"] { color: var(--bad); } .os-howto-card .os-howto-add { margin-top: 0.6rem; } /* Quick wins (12 Oct 2026): the same room above the footer on every page (it was 0 on About, Officers, Timeline, Join Us, Trade and Login, 12px on the Supply Chain). Pledge Rain (a full-screen game) and the splash page are left alone. */ body:not([data-page="pledge-rain"]):not(.home-page) > main.site-content { padding-bottom: 3rem; } /* Quick wins (12 Oct 2026): no text smaller than about 13px. */ .os-back { font-size: 0.85rem; } /* Quick wins (12 Oct 2026): a long subtitle (over about 60 letters) reads in normal case - a long line of spaced-out capitals is hard to read. Short ones keep the uppercase look. */ main.site-content > h1 + p.os-sub-long, .os-page-sub.os-sub-long { /* v7: a long subtitle reads like any other, left aligned on the page width. */ text-transform: none; letter-spacing: 0; max-width: var(--page-w); margin-left: auto; margin-right: auto; } /* Look and layout (12 Oct 2026): one content width (1200px) on the list and reading pages that used the whole screen (Ship Codex, Org Fleet, public Blueprints, Errors and Crashes, Recommended Gear - 16 Oct, Matt; Keybind Editor - 17 Oct, Matt: "it should match the rest of site containers"; Mining and FAQ - 22 Oct; Executive Hangar Timer and Downloads - 26 Oct; Merch - 26 Oct, Matt: "too wide and not following the site width rules"; Missions, Task List, the FAQ editor and the admin console pages - 27 Oct). Tools that need room (Trade, Loadout Builder, the Supply Chain, Battle Stations) keep their own wider layouts. A NEW page goes in this list too. One starting line (27 Oct 2026, tracker #15): every page heading, and the content under it, starts on the same line: the side gutter on a laptop or phone, the left edge of the centred 1200px column on a wide screen. These pages used to put the main's 24px padding AND the heading's own gutter in front of the title (it started 24 to 40px further in than everywhere else). Now the page has the gutter, and the title has none of its own. */ main.site-content:is(.ship-page, .bp-public-page, .crash-page, .gear-page, .kb-page, .mining-page, .merch-page, .faq-page, .rsistatus-page, .exechangar-page, .downloads-page, .missions-page, .tasks-page, .fqe-page, .ls-page) { /* main.site-content: stronger than supply_chain.css's own padding. */ padding-left: var(--gutter); padding-right: var(--gutter); } main:is(.ship-page, .bp-public-page, .crash-page, .gear-page, .kb-page, .mining-page, .merch-page, .faq-page, .rsistatus-page, .exechangar-page, .downloads-page, .missions-page, .tasks-page, .fqe-page, .ls-page) > :not(.os-back-bar):not(.ship-backdrop) { box-sizing: border-box; max-width: 1200px; margin-left: auto; margin-right: auto; } main:is(.ship-page, .bp-public-page, .crash-page, .gear-page, .kb-page, .mining-page, .merch-page, .faq-page, .rsistatus-page, .exechangar-page, .downloads-page, .missions-page, .tasks-page, .fqe-page, .ls-page) > :is(h1, h1 + p, .os-page-title, .os-page-sub, .os-data-age) { width: 100%; padding-left: 0; padding-right: 0; } main.site-content:is(.ship-page, .bp-public-page, .crash-page, .gear-page, .kb-page, .mining-page, .merch-page, .faq-page, .rsistatus-page, .exechangar-page, .downloads-page, .missions-page, .tasks-page, .fqe-page, .ls-page) > .os-back-bar { /* The BACK button sits on the starting line too, as on Events, the Supply Chain and the admin pages. */ box-sizing: border-box; width: 100%; max-width: 1200px; margin: -1rem auto 0; padding: 1.2rem 0 0; } /* Look and layout (12 Oct 2026): the art banner on the inner pages (About, Officers, Timeline, Gallery, Acknowledgements, Guides, Join Us) is about half as tall, so the content starts on the first screen of a laptop. Home keeps its full banner. */ .bg-container:not(.bg-home) { height: clamp(200px, 30vh, 300px); } .bg-container:not(.bg-home) .bg-container-text h1 { font-size: clamp(2rem, 5.4vw, 4.2rem); } .bg-container:not(.bg-home) .bg-container-text p { margin-top: 0.8rem; } @media (max-width: 768px) { .bg-container:not(.bg-home) { height: 170px; } .bg-container:not(.bg-home) .bg-container-text h1 { font-size: clamp(1.5rem, 8.5vw, 2.6rem); overflow-wrap: anywhere; } .bg-container:not(.bg-home) .bg-container-text p { padding: 0.3rem 0.8rem; } } /* Look and layout (12 Oct 2026): grey placeholder cards while a list loads, instead of the word "Loading...". Screen readers still hear "Loading". */ .os-skel { display: grid; gap: 0.75rem; width: 100%; } /* 27 Oct 2026 (CSS clear-out): this was two rules, the second with !important, and that !important also stopped the shine moving (an !important background wins over an animation). Merged into one rule that looks exactly as the placeholders always have: a still gradient. */ .os-skel-card { height: 72px; border-radius: 0; border: 1px solid var(--rule-soft); background: linear-gradient(100deg, var(--sheet) 30%, var(--sheet-2) 50%, var(--sheet) 70%); background-size: 300% 100%; } .os-skel-card:nth-child(3) { opacity: 0.7; } .os-skel-card:nth-child(4) { opacity: 0.45; } /* Look and layout (12 Oct 2026): one bright "main" button per page (Add lot, Post Request, + Add task, Submit, Create Competition...), the same accent fill as Log In; every other button keeps the darker or outlined look. */ button.is-primary, a.is-primary, .form-container-item button.is-primary, .competition-form-grid button.is-primary, .sc-btn.is-primary, .os-btn.is-primary, .supply-chain-page .sc-btn.is-primary, .mining-form button.primary { /* v7: the one orange main action. */ background: var(--accent); border-color: var(--rule); color: var(--on-accent); } /* Show-password eye (js/os-password.js, 12 Oct 2026), inside the right end of any password box: Login, Create account, Account, Reset password. */ .os-pw { position: relative; display: flex; } .os-pw input { flex: 1; min-width: 0; padding-right: 3rem; } /* Centred without transform: the page's own "button:hover { scale }" rules would otherwise replace it and the eye jumped down on hover (Matt, 12 Oct). */ .form-container-item .os-pw-eye, .os-pw-eye { position: absolute; top: 0; bottom: 0; right: 0.25rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin: auto 0; padding: 0; background: transparent; border: 0; border-radius: var(--radius1); box-shadow: none; color: var(--ink-2); font-size: 1.1rem; cursor: pointer; } /* No box on hover (Matt, 12 Oct): only the eye changes colour. Keyboard focus gets the same colour plus a soft glow on the icon, still no box. */ .os-panels .form-container-item .os-pw .os-pw-eye:hover, .form-container-item .os-pw .os-pw-eye:hover, .os-pw-eye:hover, .os-pw-eye:focus, .os-pw-eye:focus-visible { transform: none !important; background: transparent; border: 0; box-shadow: none; outline: none; color: var(--highlight-colour); } .os-pw-eye:focus-visible i { text-shadow: none; } /* The Account page's panel buttons are bigger and filled; the eye stays a plain little icon there too. */ .os-panels .form-container-item .os-pw .os-pw-eye, .form-container-item .os-pw .os-pw-eye { width: 2.5rem; height: 2.5rem; min-height: 0; padding: 0; background: transparent; border: 0; box-shadow: none; font-size: 1.1rem; } .os-pw-eye[aria-pressed="true"] { color: var(--highlight-colour); } /* "You will be logged out soon" box (js/os-session.js, 12 Oct 2026). Sits at the bottom of the screen, above everything, without blocking the page. */ .os-session-warn { position: fixed; left: 50%; bottom: 1rem; z-index: 5000; width: min(26rem, calc(100% - 2rem)); padding: 1rem 1.2rem; transform: translateX(-50%); background: rgba(6, 14, 28, 0.95); border: 1px solid var(--rule); border-radius: 0; box-shadow: 0 0 40px -8px var(--glow-colour); color: var(--ink); } .os-session-warn[hidden] { display: none; } .os-session-warn p { margin: 0 0 0.6rem; } .os-session-warn .os-session-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--highlight-colour); } .os-session-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; } /* Filters in use, as chips with a cross (12 Oct 2026, Data Hub round): Blueprints and Missions. */ .os-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.6rem 0; } .os-chips-lbl { margin-right: 0.2rem; color: var(--muted); font-size: 0.9rem; } .os-chip { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 32px; padding: 0.15rem 0.7rem; background: color-mix(in srgb, var(--highlight-colour) 15%, transparent); border: 1px solid var(--highlight-colour); border-radius: 999px; color: var(--ink); font: inherit; font-size: 0.9rem; cursor: pointer; } .os-chip span { font-size: 1.1rem; line-height: 1; color: var(--highlight-colour); } .os-chip:hover, .os-chip:focus-visible { background: color-mix(in srgb, var(--highlight-colour) 35%, transparent); } .os-chip.os-chip-all { background: transparent; border-style: dashed; color: var(--muted); } /* New-password strength hint and "they match" (js/os-password.js, 12 Oct 2026). */ .os-pw-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.5rem; margin-top: 0.35rem; font-size: 0.88rem; font-weight: normal; text-align: left; color: var(--muted); } .os-pw-hint[hidden] { display: none; } .os-pw-hint b { color: var(--ink); } .os-pw-bar { display: inline-flex; gap: 3px; } .os-pw-bar i { width: 22px; height: 6px; border-radius: 3px; background: var(--border-colour); } .os-pw-hint[data-level="0"] b { color: var(--bad); } .os-pw-hint[data-level="1"] b { color: var(--s2); } .os-pw-hint[data-level="2"] b { color: var(--warn); } .os-pw-hint[data-level="3"] b { color: var(--good); } .os-pw-hint[data-level="1"] .os-pw-bar i:nth-child(-n+1) { background: var(--s2); } .os-pw-hint[data-level="2"] .os-pw-bar i:nth-child(-n+2) { background: var(--warn); } .os-pw-hint[data-level="3"] .os-pw-bar i { background: var(--good); } /* ========================================================================== Phones round (12 Oct 2026): bigger tap targets. On a phone every button and link that stands on its own is at least 44px tall (the comfortable size for a finger); links inside running text are left alone. Only the size changes, so !important is used to win over each page's own sizes. ========================================================================== */ @media (max-width: 700px) { .os-back, .site-footer .footer-groups a, .footer-item-text-refcode, .route-copy, .sc-btn.sm, .sc-filter-pill, .os-chip, .os-howto-edit, .competition-tab-btn, .message-format-toolbar button, .dash-recent-clear, .admin-new-message-link, .admin-requests-container .current, .gal-nav, .guide-close-x, .my-stats-link, .admin-activity-page-size select { min-height: 44px !important; box-sizing: border-box; } .os-back, .site-footer .footer-groups a, .footer-item-text-refcode, .my-stats-link { display: inline-flex !important; align-items: center; } /* The site's usual 40px controls become 44px on a phone. */ :root { --control-h: 44px; } button, select, input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"], input[type="date"], input[type="datetime-local"], input[type="url"], input[type="file"], input:not([type]), .sc-btn, .os-btn, a.ack-link, .gal-btn { min-height: 44px !important; } /* Small round or square icon buttons stay that shape, just bigger. */ .sc-qty-edit button { min-width: 44px; } .guides-icon-btn, .guide-close-x, .gal-nav { min-width: 44px !important; min-height: 44px !important; width: 44px !important; height: 44px !important; } /* A fold-open heading: taller by padding, so its arrow stays. */ details > summary { min-height: 44px; padding-top: 0.75rem; padding-bottom: 0.75rem; box-sizing: border-box; } /* Legal pages: the contents list links get a full-height row each. */ #legal-toc a { display: inline-flex; align-items: center; min-height: 44px; } } /* The Back button is a little taller on a computer too (it was 28px). */ .os-back { min-height: 36px; box-sizing: border-box; } /* ========================================================================== Accessibility round (12 Oct 2026) ========================================================================== */ /* A clear outline on every button and link reached with the keyboard (Tab). Only for the keyboard (:focus-visible), so a mouse click shows nothing new. Text boxes keep their own glowing border. The show-password eye keeps its glow instead of a box (Matt, 12 Oct). */ a:focus-visible, button:focus-visible, summary:focus-visible, [role="button"]:focus-visible, [tabindex]:not([tabindex="-1"]):not(input):not(textarea):not(select):focus-visible { outline: 2px solid var(--highlight-colour) !important; outline-offset: 2px !important; } .os-pw-eye:focus-visible { outline: none !important; } /* "Reduce motion" (the phone's or computer's own setting): no lifting tiles, glowing pulses, slides or smooth scrolling; changes happen at once, on every page (Pledge Rain's CSS too; Rave Mode also has its own calm mode in js/os-rave.js). Until 27 Oct this was two rules: one for everything and a second that left Pledge Rain and Rave out, which the first rule overrode anyway. !important so a page's own animation can't win over the visitor's setting. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } /* No lifting or growing on hover. */ html:not(.os-rave) .os-btn:hover, html:not(.os-rave) .sc-btn:hover, html:not(.os-rave) .dash-tile:hover, html:not(.os-rave) .dash-tile:focus-visible, html:not(.os-rave) .tile:hover, html:not(.os-rave) .form-container-item button:hover, html:not(.os-rave) .ack-link:hover, html:not(.os-rave) .gal-btn:hover, html:not(.os-rave) .toggle-theme-btn:hover, html:not(.os-rave) .nav-logo:hover, html:not(.os-rave) .nav-icon:hover img, html:not(.os-rave) .mining-form button:hover, html:not(.os-rave) .mining-actions button:hover { transform: none !important; scale: none !important; } } /* ============================================================ UPLOAD PROGRESS BAR (13 Oct 2026, Matt) - js/os-upload.js One bar for every upload on the site: a blue fill with the percentage and size under it, a gently moving full bar while the server saves, green when done, red when it failed. ============================================================ */ .os-upload { box-sizing: border-box; width: 100%; max-width: 420px; margin: 0.6rem auto 0; text-align: center; } .os-upload[hidden] { display: none; } .os-upload-track { position: relative; height: 0.7rem; overflow: hidden; border: 1px solid var(--border-colour); border-radius: 999px; background: var(--background-dark); } .os-upload-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--highlight-colour); background: linear-gradient(90deg, color-mix(in srgb, var(--highlight-colour) 55%, #000), var(--highlight-colour)); box-shadow: 0 0 8px var(--glow-colour); transition: width 0.2s linear; } .os-upload.is-saving .os-upload-fill { background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.22) 0 8px, transparent 8px 16px), linear-gradient(90deg, color-mix(in srgb, var(--highlight-colour) 55%, #000), var(--highlight-colour)); background-size: 32px 100%, 100% 100%; animation: os-upload-move 0.9s linear infinite; } .os-upload.is-done .os-upload-fill { background: var(--good); box-shadow: 0 0 8px transparent; } .os-upload.is-error .os-upload-track { border-color: var(--bad); } .os-upload.is-error .os-upload-fill { background: var(--bad); box-shadow: none; } p.os-upload-text { margin: 0.35rem 0 0; font-size: 0.85rem; line-height: 1.35; color: var(--ink-2); overflow-wrap: anywhere; } .os-upload.is-error p.os-upload-text { color: var(--bad); } /* Floating: for uploads with no form to sit in (Meets photos). Top middle, just under the nav, so it never covers the notifications (bottom right) or the phone bottom bar. In front of popups. */ .os-upload.is-floating { position: fixed; left: 50%; top: calc(var(--nav-height, 64px) + 0.75rem); z-index: 2900; width: min(420px, calc(100vw - 2rem)); margin: 0; padding: 0.7rem 0.9rem; transform: translateX(-50%); background: #000; border: 1px solid var(--highlight-colour); border-radius: 8px; } @keyframes os-upload-move { from { background-position: 0 0, 0 0; } to { background-position: 32px 0, 0 0; } } @media (prefers-reduced-motion: reduce) { .os-upload-fill { transition: none; } .os-upload.is-saving .os-upload-fill { animation: none; } } /* High contrast: hint text inside empty boxes stays readable. */ .theme-contrast ::placeholder { color: #c8c8c8; opacity: 1; } /* High contrast: a switched-off section is shown greyed, not faded away. */ .theme-contrast .pe-request.is-off { opacity: 0.8; } /* ============================================================ App mode (16 Oct 2026, js/os-pwa.js): the "Get the app" popup (layer 1200, popups) and the offline note on the Guides page. ============================================================ */ .os-pwa-pop { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(10, 2, 24, 0.6); } .os-pwa-pop[hidden] { display: none; } .os-pwa-card { position: relative; width: min(28rem, 100%); max-height: calc(100vh - 2rem); overflow: auto; padding: 1.4rem 1.3rem 1.1rem; border: 2px solid var(--border-colour); border-radius: var(--radius1); background: var(--gradient-light); color: var(--ink); text-align: left; } .os-pwa-card img { display: block; border-radius: 12px; } .os-pwa-card h2 { margin: 0.7rem 0 0.4rem; font-size: 1.3rem; text-align: left; } .os-pwa-card p, .os-pwa-card li { font-size: 1rem; text-align: left; } .os-pwa-card p { margin: 0 0 0.8rem; } .os-pwa-card ol { margin: 0 0 0.8rem; padding-left: 1.3rem; } .os-pwa-card p.os-pwa-small { color: var(--muted); font-size: 0.85rem; } .os-pwa-x { position: absolute; top: 0.5rem; right: 0.5rem; width: 40px; height: 40px; border: 0; background: none; color: var(--ink); font-size: 1.6rem; line-height: 1; cursor: pointer; } .os-pwa-install { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; margin: 0 0 0.9rem; padding: 0 1.2rem; border: 2px solid var(--highlight-colour); border-radius: 6px; background: var(--gradient-accent, var(--highlight-colour)); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; } .os-pwa-x:focus-visible, .os-pwa-install:focus-visible { outline: 3px solid var(--glow-colour); outline-offset: 2px; } main p.os-offline-note { width: min(1100px, 100% - 2rem); margin: 0.8rem auto; padding: 0.6rem 0.9rem; border-left: 3px solid var(--s1); border-radius: var(--radius1); background: var(--sheet-2); font-size: 0.95rem; text-align: left; } .theme-contrast .os-pwa-card { background: #000; border-color: #fff; } .theme-contrast main p.os-offline-note { background: #000; border: 2px solid #FFE000; } /* Member profiles (16 Oct 2026): a member's name that opens their profile (Org Fleet owners, Open Craft Requests, the Mining Board). Only names whose profile is on are links. */ a.os-profile-link { color: var(--highlight-colour); text-decoration: underline dotted; text-underline-offset: 3px; } a.os-profile-link:hover, a.os-profile-link:focus-visible { text-decoration-style: solid; } /* Popups hold the page still (17 Oct 2026, Matt: on the Loadout Builder's component popup you could scroll the page behind as well as the popup, which is confusing). While any popup is open the page itself doesn't scroll - only the popup does - and clicking outside it still closes it as before. scrollbar-gutter keeps the page from jumping sideways when its scrollbar goes away. The pages that already did this themselves (Meet Up photos, competition gallery, site search, Guides editor) are unchanged. */ html:has(.sc-notify-overlay:not([hidden])), html:has(.ship-backdrop:not([hidden])), html:has(.sc-bp-backdrop.open), html:has(.mining-lightbox.show), html:has(.retrofitter-page .modal-backdrop.open), html:has(.gear-zoom:not([hidden])), html:has(.os-howto-modal:not([hidden])), html:has(.guides-modal-overlay), html:has(.gal-frame.is-full) { overflow: hidden; scrollbar-gutter: stable; } /* ... and reaching the end of a popup's own list doesn't carry on into the page (phones and trackpads). */ .sc-notify-overlay, .sc-notify-card, .ship-backdrop, .ship-modal, .mining-lightbox, .mining-lightbox-box, .retrofitter-page .modal, .retrofitter-page .modal *, .gear-zoom, .os-howto-modal, .guides-modal-overlay { overscroll-behavior: contain; } /* ========================================================================== v11 COMPONENTS (Deep Space redesign, Oct 2026) Last in the file on purpose: they restyle the shared pieces above. ========================================================================== */ /* Form fields: quiet, hairline, rounded. :where() keeps the weight at zero so a page rule still wins. */ :where(main, .sc-notify-overlay, .os-offer-overlay, dialog) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]), select, textarea) { background-color: rgba(2, 8, 18, 0.6); color: var(--ink); border: 1px solid var(--rule); border-radius: 0; font-family: var(--font-body); font-size: 0.95rem; } :where(main, .sc-notify-overlay, .os-offer-overlay, dialog) :where(input, select, textarea):focus-visible { outline: 1px solid var(--accent); outline-offset: 0; box-shadow: 0 0 14px var(--glow-colour); } :where(main) ::placeholder { color: var(--ink-3); opacity: 1; } :where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) { accent-color: var(--accent); } /* Tabs: a HUD selector, the open one lit. */ .os-tabs { justify-content: flex-start; gap: 0.3rem; width: fit-content; max-width: calc(var(--page-w) - 2 * var(--gutter)); margin: 1rem auto 1.4rem; padding: 0.3rem; background: var(--sheet); border: 1px solid var(--rule-soft); border-radius: 0; box-sizing: border-box; backdrop-filter: blur(8px); } .os-tab { flex: 0 1 auto; min-width: 0; max-width: none; padding: 0.55rem 1.1rem; background: transparent; border: 1px solid transparent; border-radius: 0; color: var(--ink-2); font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: none; } .os-tab:hover { color: var(--ink); background: var(--accent-soft); } .os-tab.is-active { color: var(--accent-hi); background: var(--accent-soft); border-color: var(--rule); box-shadow: inset 0 -2px 0 var(--accent), 0 0 18px -6px var(--glow-colour); } .os-tab:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; } /* Buttons: cut-corner plates. Quiet ones are glass with a glowing edge; .is-primary / .is-accent / .os-btn--gold is lit in the theme colour; .is-solid is a light plate. */ .os-btn, .v7-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: var(--control-h); padding: 0.5rem 1.3rem; background: var(--accent-soft); color: var(--ink); border: 1px solid var(--rule); border-radius: 0; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer; box-shadow: none; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .os-btn:hover:not([disabled]), .v7-btn:hover { transform: none; background: color-mix(in srgb, var(--accent) 26%, transparent); color: #fff; border-color: var(--accent); box-shadow: inset 0 0 18px -4px var(--glow-colour); } .os-btn.is-primary, .os-btn--gold, .v7-btn.is-accent { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .os-btn.is-primary:hover:not([disabled]), .os-btn--gold:hover:not([disabled]), .v7-btn.is-accent:hover { background: var(--accent-hi); color: var(--on-accent); box-shadow: 0 0 24px var(--glow-colour); } .v7-btn.is-solid { background: var(--solid); color: var(--on-solid); border-color: var(--solid); } .v7-btn.is-solid:hover { background: var(--solid-hi); color: var(--on-solid); } .os-label { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); } .os-stat { background: var(--sheet); border: 1px solid var(--rule-soft); border-radius: 0; text-align: left; } /* Toasts */ .os-toast { padding: 0.75rem 1rem 0.75rem 1.2rem; background: rgba(6, 14, 28, 0.92); border: 1px solid var(--rule); border-radius: 0; color: var(--ink); font-family: var(--font-body); font-size: 0.92rem; box-shadow: 0 0 24px -6px var(--glow-colour); background-image: linear-gradient(90deg, var(--accent) 0 3px, transparent 3px); backdrop-filter: blur(10px); } .os-toast.is-error { background-image: linear-gradient(90deg, var(--bad) 0 3px, transparent 3px); } /* BACK link */ .os-back-bar { max-width: var(--page-w); margin: 0 auto; padding: 1.2rem var(--gutter) 0; } .os-back { gap: 0.4rem; padding: 0.3rem 0.8rem; border: 1px solid var(--rule-soft); border-radius: 0; background: transparent; color: var(--ink-2); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .os-back:hover, .os-back:focus-visible { border-color: var(--accent); color: var(--accent-hi); box-shadow: 0 0 14px -4px var(--glow-colour); } main.supply-chain-page > .os-back-bar { width: auto; max-width: none; margin: -0.4rem 0 0; padding: 0.6rem 0 0; } /* "How this works" boxes */ details.os-howto { background: var(--sheet); border: 1px solid var(--rule-soft); border-left: 2px solid var(--accent); border-radius: 0; backdrop-filter: blur(8px); } details.os-howto > summary { color: var(--ink); font-family: var(--font-mono); font-size: 0.85rem; font-weight: 500; text-transform: uppercase; } .os-howto-card, .os-pwa-card { color: var(--ink) !important; border: 1px solid var(--rule) !important; border-radius: 0 !important; background: rgba(6, 14, 28, 0.96) !important; box-shadow: 0 0 60px -10px var(--glow-colour); } .os-chip { border: 1px solid var(--rule); border-radius: 0; background: var(--sheet); color: var(--ink); font-family: var(--font-mono); } .bug-kind.is-bug { color: var(--bad); } .bug-kind.is-suggestion { color: var(--good); } /* ------------------------------------------------------------ new parts */ .v7-wrap { box-sizing: border-box; width: 100%; max-width: var(--page-w); margin: 0 auto; padding: 0 var(--gutter); } /* A small label above something. */ .v7-plate { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } /* A number readout: a holographic display. */ .crt { position: relative; box-sizing: border-box; padding: 0.7rem 0.95rem; background: linear-gradient(180deg, var(--accent-soft), transparent 80%), var(--crt); border-radius: 0; box-shadow: inset 0 0 0 1px var(--rule-soft), inset 0 1px 0 var(--rule); color: var(--phosphor); font-family: var(--font-display); font-size: 2.2rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1; text-shadow: 0 0 16px var(--glow-colour); overflow: hidden; } .crt::after { content: none; } .crt small { display: block; margin-top: 0.45rem; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--phosphor-dim); text-shadow: none; } .theme-contrast .crt { background: #000; box-shadow: inset 0 0 0 1px #fff; } /* The phone "Filters" button (js/os-filters.js). */ @media (max-width: 700px) { .os-more-btn { padding: 0.5rem 1rem; background: var(--sheet); color: var(--ink); border: 1px solid var(--rule); border-radius: 0; font-family: var(--font-mono); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; } .os-more-btn:hover, .os-more-btn:focus-visible { background: var(--sheet-3); border-color: var(--ink-3); } .os-more-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .os-more-btn .fa-sliders { color: var(--accent); } .os-more-btn[aria-expanded="true"] { background: var(--solid); color: var(--on-solid); } .os-more-btn[aria-expanded="true"] .fa-sliders { color: var(--on-solid); } } /* Tabs on a phone: one row that scrolls sideways. */ @media (max-width: 700px) { .os-tabs { flex-wrap: nowrap; max-width: calc(100% - 2 * var(--gutter)); overflow-x: auto; scrollbar-width: none; } .os-tabs::-webkit-scrollbar { display: none; } .os-tab { flex: 0 0 auto; white-space: nowrap; } } /* ---------------------------------------------------- HUD finishing */ .theme-contrast .os-btn, .theme-contrast .v7-btn, .theme-contrast .bg-container { clip-path: none; } /* The wordmarks wear the squad's heading face too (18 Oct 2026): the intro page, the rail brand and the footer. "body" only lifts these above the later page stylesheets that name the display face. */ body .boot-title, body .rail-word, body .foot-word { font-family: var(--font-head); } /* ------------------------------------------------ twinkling sky (18 Oct 2026) Matt: "can this be animated slightly to have the stars twinkle and maybe some shooting stars too". Two more fixed layers of slightly brighter stars sit between the space background (on html) and the page, each fading in and out on its own slow beat, so different stars brighten at different times. Only opacity animates, which the browser does on the graphics card. Shooting stars are added now and then by js/os-sky.js. Off for High contrast, in Pledge Rain (its own sky) and for anyone who asks their system for less motion. */ body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-repeat: repeat; opacity: 0; will-change: opacity; } body::before { animation: os-twinkle 5.5s ease-in-out infinite alternate; } body::after { animation: os-twinkle 7.9s ease-in-out -3s infinite alternate; } @keyframes os-twinkle { 0%, 20% { opacity: 0.05; } 55% { opacity: 0.9; } 100% { opacity: 0.25; } } body::before { background-image: radial-gradient(2px 2px at 363px 51px, rgba(190, 220, 255, 1) 50%, transparent 52%), radial-gradient(1.4px 1.4px at 112px 377px, rgba(190, 220, 255, 1) 50%, transparent 52%), radial-gradient(1.4px 1.4px at 110px 385px, rgba(190, 220, 255, 1) 50%, transparent 52%), radial-gradient(1.2px 1.2px at 275px 344px, rgba(190, 220, 255, 1) 50%, transparent 52%), radial-gradient(1.4px 1.4px at 26px 298px, rgba(190, 220, 255, 0.7) 50%, transparent 52%), radial-gradient(2px 2px at 186px 54px, rgba(190, 220, 255, 0.7) 50%, transparent 52%), radial-gradient(1.4px 1.4px at 318px 167px, rgba(190, 220, 255, 0.7) 50%, transparent 52%), radial-gradient(2px 2px at 7px 185px, rgba(190, 220, 255, 0.85) 50%, transparent 52%), radial-gradient(1.4px 1.4px at 62px 76px, rgba(190, 220, 255, 0.7) 50%, transparent 52%); background-size: 389px 389px; }} body::after { background-image: radial-gradient(1.4px 1.4px at 193px 6px, rgba(190, 220, 255, 1) 50%, transparent 52%), radial-gradient(1.2px 1.2px at 168px 411px, rgba(255, 255, 255, 1) 50%, transparent 52%), radial-gradient(1.4px 1.4px at 307px 247px, rgba(255, 255, 255, 0.7) 50%, transparent 52%), radial-gradient(1.4px 1.4px at 36px 578px, rgba(255, 255, 255, 0.85) 50%, transparent 52%), radial-gradient(1.4px 1.4px at 296px 490px, rgba(190, 220, 255, 1) 50%, transparent 52%), radial-gradient(1.4px 1.4px at 117px 59px, rgba(190, 220, 255, 0.7) 50%, transparent 52%), radial-gradient(2.2px 2.2px at 76px 563px, rgba(255, 255, 255, 0.85) 50%, transparent 52%), radial-gradient(1.6px 1.6px at 372px 236px, rgba(190, 220, 255, 0.85) 50%, transparent 52%), radial-gradient(2.2px 2.2px at 100px 130px, rgba(190, 220, 255, 0.7) 50%, transparent 52%); background-size: 611px 611px; }} body.theme-alt::before { background-image: radial-gradient(1.2px 1.2px at 121px 148px, rgba(255, 210, 215, 1) 50%, transparent 52%), radial-gradient(2px 2px at 49px 38px, rgba(255, 255, 255, 1) 50%, transparent 52%), radial-gradient(1.6px 1.6px at 131px 257px, rgba(255, 210, 215, 0.7) 50%, transparent 52%), radial-gradient(1.2px 1.2px at 110px 333px, rgba(255, 210, 215, 0.85) 50%, transparent 52%), radial-gradient(1.4px 1.4px at 194px 314px, rgba(255, 210, 215, 0.85) 50%, transparent 52%), radial-gradient(1.6px 1.6px at 132px 107px, rgba(255, 255, 255, 1) 50%, transparent 52%), radial-gradient(2px 2px at 359px 367px, rgba(255, 210, 215, 0.85) 50%, transparent 52%), radial-gradient(2px 2px at 270px 336px, rgba(255, 255, 255, 0.7) 50%, transparent 52%), radial-gradient(2px 2px at 278px 231px, rgba(255, 255, 255, 0.7) 50%, transparent 52%); background-size: 389px 389px; }} body.theme-alt::after { background-image: radial-gradient(1.2px 1.2px at 4px 388px, rgba(255, 255, 255, 1) 50%, transparent 52%), radial-gradient(1.2px 1.2px at 128px 288px, rgba(255, 255, 255, 0.85) 50%, transparent 52%), radial-gradient(1.4px 1.4px at 169px 531px, rgba(255, 255, 255, 1) 50%, transparent 52%), radial-gradient(1.4px 1.4px at 414px 356px, rgba(255, 255, 255, 0.85) 50%, transparent 52%), radial-gradient(1.4px 1.4px at 580px 555px, rgba(255, 210, 215, 0.85) 50%, transparent 52%), radial-gradient(2px 2px at 90px 250px, rgba(255, 255, 255, 0.85) 50%, transparent 52%), radial-gradient(1.4px 1.4px at 587px 357px, rgba(255, 255, 255, 1) 50%, transparent 52%), radial-gradient(1.2px 1.2px at 387px 17px, rgba(255, 210, 215, 0.7) 50%, transparent 52%), radial-gradient(2px 2px at 602px 102px, rgba(255, 210, 215, 0.85) 50%, transparent 52%); background-size: 611px 611px; }} body.theme-contrast::before, body.theme-contrast::after, body[data-page="pledge-rain"]::before, body[data-page="pledge-rain"]::after { content: none; } /* A shooting star: a short bright streak with a fading tail that crosses part of the sky and is gone in about a second (js/os-sky.js). */ .os-shooting-star { position: fixed; z-index: -1; top: 0; left: 0; width: 140px; height: 1.5px; pointer-events: none; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(190, 225, 255, 0.55) 70%, #fff); filter: drop-shadow(0 0 4px rgba(160, 215, 255, 0.9)); transform-origin: 100% 50%; opacity: 0; animation: os-shoot var(--dur, 1.1s) cubic-bezier(0.3, 0, 0.6, 1) forwards; } body.theme-alt .os-shooting-star { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 190, 200, 0.55) 70%, #fff); filter: drop-shadow(0 0 4px rgba(255, 140, 155, 0.9)); } @keyframes os-shoot { 0% { opacity: 0; transform: translate(var(--x0), var(--y0)) rotate(var(--ang)) scaleX(0.2); } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x1), var(--y1)) rotate(var(--ang)) scaleX(1); } } @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; opacity: 0.45; } .os-shooting-star { display: none; } } /* ------------------------------------------------ solid pop-ups (18 Oct 2026) Matt: "worth checking all pop out menus are not too transparent making their content hard to read". The glass colour (--sheet) is see-through on purpose for panels lying on the starfield, but a pop-up lies on other content, and that content showed through it. --pop is the same colour already mixed with the space behind it, so a pop-up looks like the rest of the glass but nothing shows through. !important because each page's own stylesheet (loaded after this one) names --sheet for its pop-up. */ :root, body { --pop: #0B172C; --pop-2: #12223D; } body.theme-alt { --pop: #200A10; --pop-2: #2E0F17; } body.theme-contrast { --pop: #000; --pop-2: #000; } .sc-notify-card, .sc-modal-card, .sc-bp-panel, .ship-modal, .mining-lightbox-box, .mt-lightbox-box, .gear-zoom-card, .guides-modal, .retrofitter-page .modal, .os-howto-card, .os-pwa-card, .cg-box, .theme-menu, .nav-bell-panel, .os-search-box, .os-toast { background-color: var(--pop) !important; } .sc-notify-card { background: var(--stripes-h) top / 100% 12px no-repeat, var(--pop) !important; } .sc-bp-panel, .ship-modal, .retrofitter-page .modal, .guides-modal, .os-howto-card, .os-pwa-card, .gear-zoom-card, .mt-lightbox-box, .cg-box, .theme-menu, .nav-bell-panel, .os-search-box { background-image: none !important; } .ship-modal-side { background: var(--pop-2); } /* "BETA" after a feature still being tried out (Matt, 21 Oct 2026: Keybind Editor in the menu, Home and its page, and its My sticks tab). Same look as the Beta tag after "Ship makers" in the Theme menu. */ .os-beta { display: inline-block; margin-left: 0.4em; padding: 0.08rem 0.38rem 0.04rem; border: 1px solid currentColor; border-radius: 0; /* the ship maker themes' readable accent (some accents are too dark for small text) */ color: var(--mf-accent-text, var(--accent)); font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; font-style: normal; letter-spacing: 0.12em; line-height: 1.2; text-transform: uppercase; text-shadow: none; vertical-align: 0.15em; white-space: nowrap; } h1 .os-beta { font-size: 0.8rem; vertical-align: 0.9em; } .kb-views button.active .os-beta, .theme-contrast .os-beta { color: inherit; } /* Home's Data Hub tiles style every span in them (.mc-mod span). */ .mc-mod b .os-beta { color: var(--accent); font-size: 0.62rem; line-height: 1.2; } /* The site's text editor (js/os-rich.js, 23 Oct 2026, Matt: "replace all other text editors on site with that style"): the FAQ editor's toolbar and text box for every