/* ── Space suite — page & tool styles ──────────────────────────────── Builds on css/shared.css (tokens, header, footer, Orbitron). Family look: dark accent icon-chip hero + card/section/faq/trust pattern. The hub uses the suite violet; each tool sets for its own accent. The ISS tracker plots a live position on the same first-party inline SVG world map used across LK Forge (js/worldmap.js) — no map tiles, no external map requests. The asteroid tracker reads the keyless JPL/CNEOS close-approach feed via the same-origin /api/cad proxy (CORS shim); the ISS tracker reads wheretheiss.at directly. */ main { max-width: 940px; margin: 0 auto; padding: 20px; } /* ── Tool hero: dark accent icon chip + Orbitron h1 + subtitle ──── */ .tool-hero { max-width: 940px; margin: 0 auto; padding: 36px 20px 4px; } .tool-hero .hero-head { display: flex; align-items: center; gap: 16px; } .tool-hero .hero-icon { flex-shrink: 0; width: 56px; height: 56px; border-radius: 14px; background: #0f0e1d; display: flex; align-items: center; justify-content: center; } .tool-hero .hero-icon svg { width: 30px; height: 30px; stroke: var(--accent); fill: none; } .tool-hero .subtitle { color: var(--muted); font-size: 1.02rem; margin-top: 12px; max-width: 720px; } .tool-hero .subtitle a { color: var(--accent); font-weight: 600; text-decoration: none; } .tool-hero .subtitle a:hover { color: var(--accent-h); text-decoration: none; } /* ── Card ───────────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 24px; margin-top: 24px; } .card + .card { margin-top: 16px; } .card-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 14px; } /* ── Buttons ────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 20px; font-family: inherit; font-size: .95rem; font-weight: 700; border: none; border-radius: var(--radius); cursor: pointer; background: var(--accent); color: #fff; transition: background .15s, transform .1s; white-space: nowrap; } .btn:hover { background: var(--accent-h); } .btn:active { transform: scale(.98); } .btn svg { width: 16px; height: 16px; } .btn-ghost { background: var(--surface); color: var(--text); border: 1.5px solid var(--border); } .btn-ghost:hover { background: var(--surface2); border-color: var(--muted); } /* ── Trust row ──────────────────────────────────────────────────── */ .trust-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); } .trust-item { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 600; color: var(--muted); } .trust-item svg { width: 16px; height: 16px; stroke: var(--accent); fill: none; flex-shrink: 0; } /* ── Content sections (how-it-works / faq) ──────────────────────── */ .section { max-width: 940px; margin: 16px auto; padding: 24px 20px; } .section > h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 8px; } .section > .section-sub { color: var(--muted); margin-bottom: 20px; } .steps { display: grid; gap: 14px; } .step { display: flex; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); } .step-num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-bg); color: var(--accent-fg); font-weight: 800; display: flex; align-items: center; justify-content: center; } .step-body h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; } .step-body p { font-size: .92rem; color: var(--muted); line-height: 1.6; } .step-body a { color: var(--accent); } .faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; } .faq summary { cursor: pointer; padding: 16px 18px; font-weight: 700; font-size: .98rem; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; float: right; color: var(--accent); font-weight: 700; } .faq details[open] summary::after { content: '\2013'; } .faq .faq-body { padding: 0 18px 16px; font-size: .92rem; color: var(--muted); line-height: 1.7; } .faq .faq-body a { color: var(--accent); } /* ── Info banner (data-source / not-a-warning notes) ────────────── */ .info-note { display: flex; gap: 12px; align-items: flex-start; background: #fff7ed; border: 1px solid #fdba74; border-radius: var(--radius-lg); padding: 14px 18px; margin-top: 24px; } .info-note svg { flex-shrink: 0; width: 22px; height: 22px; stroke: #c2410c; fill: none; margin-top: 1px; } .info-note p { font-size: .9rem; color: #7c2d12; line-height: 1.6; } .info-note a { color: #9a3412; font-weight: 700; text-decoration: underline; } /* ── Hub grid (landing cards + tool cross-links) ────────────────── */ .hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(264px, 1fr)); gap: 18px; margin-top: 8px; } .hub-card { display: block; text-decoration: none; position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); transition: transform .18s, border-color .18s, box-shadow .18s; } .hub-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-lg); text-decoration: none; } .hub-card .hub-icon { width: 48px; height: 48px; border-radius: 12px; background: #0f0e1d; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .hub-card .hub-icon svg { width: 25px; height: 25px; stroke: var(--accent); fill: none; } .hub-card h2 { font-size: 1.15rem; color: var(--text); margin-bottom: 6px; } .hub-card p { font-size: .9rem; color: var(--muted); line-height: 1.6; margin-bottom: 14px; } .hub-card .hub-open { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 700; color: var(--accent); } .hub-card .hub-tag { position: absolute; top: 18px; right: 18px; font-size: .72rem; font-weight: 700; color: var(--accent-fg); background: var(--accent-bg); padding: 2px 9px; border-radius: 999px; } /* Per-card accents so each tool keeps its colour on the hub. */ .hub-card.t-asteroids { --accent:#ea580c; --accent-bg:#ffedd5; --accent-fg:#9a3412; } .hub-card.t-iss { --accent:#0891b2; --accent-bg:#cffafe; --accent-fg:#155e75; } .hub-card.t-sky { --accent:#c026d3; --accent-bg:#fae8ff; --accent-fg:#86198f; } /* "Coming soon" card — muted, non-interactive. */ .hub-card.is-soon { opacity: .72; cursor: default; } .hub-card.is-soon:hover { transform: none; border-color: var(--border); box-shadow: var(--shadow); } /* ── Shared controls (selects + actions) ────────────────────────── */ .sp-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .sp-field { display: flex; flex-direction: column; gap: 5px; } .sp-field label { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .sp-select { font-family: inherit; font-size: .95rem; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); outline: none; min-height: 44px; cursor: pointer; transition: border-color .15s, box-shadow .15s; } .sp-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--ring),.14); } .sp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; } .sp-status { min-height: 20px; margin-top: 14px; font-size: .88rem; font-weight: 600; color: var(--muted); } .sp-status.error { color: #b42318; } .sp-summary { margin-top: 18px; font-size: 1rem; color: var(--text); } .sp-summary strong { font-weight: 700; color: var(--accent-fg); } /* ── World map (shared with worldmap.js, used by the ISS tracker) ─ */ .sp-map-wrap { margin-top: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: #0b1020; } .sp-map { display: block; width: 100%; height: auto; background: radial-gradient(120% 140% at 50% 0%, #16203f 0%, #0b1020 70%); } .sp-map .sp-land { fill: #2a3566; stroke: #3a4788; stroke-width: .3; } .sp-map .sp-grid { stroke: #2c3560; stroke-width: .25; fill: none; } .sp-map .sp-track { fill: none; stroke: var(--accent); stroke-width: .7; stroke-dasharray: 2 2; opacity: .8; } .sp-map .sp-footprint { fill: rgba(8,145,178,.16); stroke: var(--accent); stroke-width: .5; } .sp-map .sp-iss { fill: var(--accent); stroke: #fff; stroke-width: .8; } .sp-map .sp-iss-ring { fill: none; stroke: var(--accent); stroke-width: .6; opacity: .7; } /* ── ISS: live position readout ─────────────────────────────────── */ .iss-readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; } .iss-stat { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; } .iss-stat .lbl { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .iss-stat .val { font-family: var(--mono); font-size: 1.18rem; font-weight: 600; color: var(--text); margin-top: 4px; } .iss-stat .val small { font-size: .72rem; color: var(--muted); font-family: 'Outfit', sans-serif; } .live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #16a34a; margin-right: 7px; vertical-align: 1px; box-shadow: 0 0 0 0 rgba(22,163,74,.6); animation: livePulse 2s infinite; } @keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.55); } 70% { box-shadow: 0 0 0 7px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } } @media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } } /* ── Asteroid Tracker: results list ─────────────────────────────── */ .ast-list { display: grid; gap: 10px; margin-top: 18px; } .ast-item { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow); } .ast-item.is-close { border-left: 4px solid var(--accent); } .ast-size { flex-shrink: 0; width: 56px; height: 56px; border-radius: 14px; background: var(--accent-bg); color: var(--accent-fg); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; } .ast-size .num { font-family: 'Orbitron', sans-serif; font-size: 1rem; font-weight: 900; } .ast-size .unit { font-size: .55rem; font-weight: 700; letter-spacing: .04em; margin-top: 2px; opacity: .9; } .ast-body { min-width: 0; flex: 1 1 auto; } .ast-name { font-weight: 700; font-size: 1rem; line-height: 1.3; } .ast-name .close-tag { display: inline-block; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-fg); background: var(--accent-bg); padding: 1px 7px; border-radius: 999px; margin-left: 8px; vertical-align: 1px; } .ast-meta { font-size: .84rem; color: var(--muted); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px 14px; } .ast-meta .mono { font-family: var(--mono); } .ast-meta .ld { color: var(--accent-fg); font-weight: 600; } .ast-when { flex-shrink: 0; text-align: right; font-size: .82rem; color: var(--muted); } .ast-when .mono { font-family: var(--mono); font-weight: 600; color: var(--text); } /* ── Empty / loading states ─────────────────────────────────────── */ .sp-empty { text-align: center; color: var(--muted); padding: 28px 16px; font-size: .95rem; } .sp-empty p { margin: 0 auto; max-width: 460px; line-height: 1.6; } .sp-empty .btn { margin-top: 16px; } /* ── Sky Explorer: Aladin Lite embed + jump-to controls ─────────── */ .sky-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .sky-jump .btn { min-height: 40px; padding: 8px 14px; font-size: .88rem; } .sky-embed { position: relative; width: 100%; height: 68vh; min-height: 440px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: #0b1020; } /* Aladin's fullscreen sets the embed to position:fixed but leaves z-index:auto, so the page's cards (position:relative, later in the DOM) paint over it. Lift it above everything (header is z-index 100) and drop the framing for a clean edge-to-edge view. */ .sky-embed.aladin-fullscreen { z-index: 1000; border: 0; border-radius: 0; } .sky-embed .aladin-container { width: 100%; height: 100%; } .sky-credit { font-size: .82rem; color: var(--muted); margin-top: 10px; } .sky-credit a { color: var(--accent); } /* ── Per-tool accents ───────────────────────────────────────────── */ body[data-tool="asteroids"] { --accent:#ea580c; --accent-h:#c2410c; --accent-bg:#ffedd5; --accent-fg:#9a3412; --ring:234,88,12; } body[data-tool="iss"] { --accent:#0891b2; --accent-h:#0e7490; --accent-bg:#cffafe; --accent-fg:#155e75; --ring:8,145,178; } body[data-tool="sky"] { --accent:#c026d3; --accent-h:#a21caf; --accent-bg:#fae8ff; --accent-fg:#86198f; --ring:192,38,211; } @media (max-width: 620px) { .tool-hero .hero-icon { width: 48px; height: 48px; } .tool-hero .hero-icon svg { width: 26px; height: 26px; } .sp-actions { margin-left: 0; width: 100%; } .ast-when { display: none; } }