/* ========================================================= ORBIT GROUP — Deep-space editorial-luxe theme ========================================================= */ :root { /* Palette */ --bg: #07080f; --bg-2: #0a0c16; --surface: rgba(255, 255, 255, 0.025); --surface-2: rgba(255, 255, 255, 0.05); --line: rgba(255, 255, 255, 0.09); --line-2: rgba(255, 255, 255, 0.16); --text: #E9ECF3; --muted: #9094a6; --muted-2: #6a6e80; /* Monochrome brand accent + subtle cool glow */ --accent: #ffffff; --accent-2: #cdd6f5; --accent-3: #aab6e6; --accent-soft: rgba(150, 170, 255, 0.14); --glow: rgba(150, 170, 255, 0.55); /* Cool glow, used sparingly */ --cool: #9fb0ff; --maxw: 1240px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-2: cubic-bezier(0.22, 1, 0.36, 1); --font-display: "Fraunces", Georgia, serif; --font-body: "Manrope", system-ui, sans-serif; --font-mono: "Space Mono", ui-monospace, monospace; } /* ========================================================= Light theme — opt-in "daylight orbit" Dark stays the default brand identity; this redefines the same tokens for a warm, paper-light palette. Set via (boot script in index.html ). ========================================================= */ :root[data-theme="light"] { --bg: #f4f1ea; --bg-2: #ece7db; --surface: rgba(18, 22, 40, 0.035); --surface-2: rgba(18, 22, 40, 0.07); --line: rgba(18, 22, 40, 0.12); --line-2: rgba(18, 22, 40, 0.20); --text: #1b1d26; --muted: #565a6b; --muted-2: #82869a; /* "Max-contrast" accent flips to near-black; cool blue stays the through-line */ --accent: #1b1d26; --accent-2: #2f3a82; --accent-3: #4150a0; --accent-soft: rgba(80, 100, 200, 0.12); --glow: rgba(90, 110, 210, 0.28); --cool: #4c5fd6; } /* ---- Light-theme component corrections (where the dark theme hardcoded values) ---- */ :root[data-theme="light"] ::selection { background: var(--accent); color: var(--bg); } :root[data-theme="light"] .btn-solid { color: var(--bg); } :root[data-theme="light"] .btn-solid:hover { background: var(--accent-3); } /* Light --glow is lower-alpha than dark, so give the hover halo a touch more spread/blur to stay clearly visible on the pale background. */ :root[data-theme="light"] .btn:hover { box-shadow: 0 0 26px 2px var(--glow), 0 0 12px var(--accent-soft); } :root[data-theme="light"] .nav.scrolled { background: rgba(244, 241, 234, 0.82); } :root[data-theme="light"] .nav.menu-open { background: rgba(244, 241, 234, 0.96); } :root[data-theme="light"] .imsg.out .imsg-bubble { color: #fff; } /* The terminal stays a dark "island" in both themes (terminals read as dark by convention). Re-pin the tokens it consumes so its text stays legible in light. */ :root[data-theme="light"] .terminal { --text: #E9ECF3; --muted: #9094a6; --muted-2: #6a6e80; --accent: #ffffff; --accent-2: #cdd6f5; --cool: #9fb0ff; --glow: rgba(150, 170, 255, 0.5); --line: rgba(255, 255, 255, 0.09); --line-2: rgba(255, 255, 255, 0.16); --surface: rgba(255, 255, 255, 0.04); } /* ---- Atmosphere in light mode: a daytime sky ---- */ /* Stars belong to night; hide them. Agents (rockets) still fly by day — darken so they read against a pale background. */ /* Daytime sky: drop the twinkling background dots, but keep the occasional shooting-star streak (recolored below so it reads on the pale background). */ :root[data-theme="light"] .starfield .star { display: none; } :root[data-theme="light"] .starfield .shooting-star { background: var(--accent-3); box-shadow: 0 0 6px 1px var(--glow); filter: drop-shadow(0 0 5px var(--glow)); } :root[data-theme="light"] .starfield .shooting-star::before { background: linear-gradient(270deg, var(--accent-3), rgba(76, 95, 214, 0)); } :root[data-theme="light"] .grain { opacity: 0.02; } :root[data-theme="light"] .space-rockets .rocket { filter: brightness(0.4) saturate(1.5) drop-shadow(0 0 5px var(--glow)); } :root[data-theme="light"] body::before { background: radial-gradient(900px 700px at 78% -5%, rgba(90, 110, 210, 0.10), transparent 60%), radial-gradient(800px 800px at 8% 8%, rgba(120, 140, 235, 0.07), transparent 55%), radial-gradient(1000px 900px at 50% 120%, rgba(150, 160, 200, 0.08), transparent 60%), linear-gradient(180deg, var(--bg), var(--bg-2)); } /* The faint CTA symbol watermark is a white PNG — flip it dark for light mode */ :root[data-theme="light"] .cta-watermark { filter: invert(1); } /* ---- Orbital system in light mode ---- */ /* The hero orbit was tuned for deep space (white sun/dots, white rings). Re-tone it so the planets, rings, and sun read on a pale background. */ :root[data-theme="light"] .sun-core { background: radial-gradient(circle at 35% 30%, var(--cool), var(--accent-3)); } :root[data-theme="light"] .orbit-4 { border-color: rgba(18, 22, 40, 0.10); } :root[data-theme="light"] .planet-spin::before { box-shadow: 0 0 14px var(--accent-soft); } :root[data-theme="light"] .planet-1 .planet-spin::before { background: var(--accent-3); box-shadow: 0 0 16px var(--glow); } /* planet-2 (--cool) and planet-3 (--accent-2) already resolve to readable blues via the light tokens; planet-4 uses --text (dark). */ :root[data-theme="light"] .planet-tag { background: rgba(244, 241, 234, 0.75); color: var(--muted); border-color: var(--line); } /* Hover in light mode: the shared hover rule hardcodes a near-black tag background with var(--text) (dark) text — unreadable on a pale page. Re-pin it to a pale tag with accent text/border so the label stays legible, and drop the brightness() that washes out the dark-blue dots — let the box-shadow + scale do the "light up" instead. */ :root[data-theme="light"] .planet:hover .planet-tag, :root[data-theme="light"] .planet:focus-visible .planet-tag { background: rgba(244, 241, 234, 0.92); color: var(--accent-2); border-color: var(--accent-2); } :root[data-theme="light"] .planet:hover .planet-spin::before, :root[data-theme="light"] .planet:focus-visible .planet-spin::before { filter: none; box-shadow: 0 0 32px 4px var(--glow); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-weight: 400; line-height: 1.6; letter-spacing: 0.01em; overflow-x: hidden; cursor: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Background gradient atmosphere */ body::before { content: ""; position: fixed; inset: 0; z-index: -3; background: radial-gradient(900px 700px at 78% -5%, rgba(150, 170, 255, 0.10), transparent 60%), radial-gradient(800px 800px at 8% 8%, rgba(124, 140, 255, 0.06), transparent 55%), radial-gradient(1000px 900px at 50% 120%, rgba(180, 190, 220, 0.06), transparent 60%), linear-gradient(180deg, var(--bg), var(--bg-2)); } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } em { font-style: italic; } ::selection { background: var(--accent); color: #07080f; } /* ========================================================= Texture & atmosphere layers ========================================================= */ .grain { position: fixed; inset: -50%; z-index: 9998; pointer-events: none; opacity: 0.045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grainShift 8s steps(6) infinite; } @keyframes grainShift { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -4%); } 60% { transform: translate(-3%, -2%); } 80% { transform: translate(2%, 4%); } } .starfield { position: fixed; inset: 0; z-index: -2; pointer-events: none; } .starfield .star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: var(--o, 0.5); animation: twinkle var(--d, 4s) ease-in-out infinite alternate; } @keyframes twinkle { to { opacity: 0.05; transform: scale(0.4); } } /* Shooting stars — rare, fast streaks. Brighter than the twinkle stars, with a trailing tail. Created/removed in JS (js/main.js) and gated on reduced-motion. Travel vector (--dx/--dy) and trail angle (--angle) are set per-instance. */ .starfield .shooting-star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: 0; will-change: transform, opacity; box-shadow: 0 0 6px 1px var(--glow), 0 0 2px 0 #fff; filter: drop-shadow(0 0 6px var(--glow)); animation: shoot var(--d, 900ms) linear forwards; } .starfield .shooting-star::before { content: ""; position: absolute; top: 50%; right: 0; width: 90px; height: 1.5px; transform-origin: right center; transform: translateY(-50%) rotate(var(--angle, 0deg)); background: linear-gradient(270deg, var(--cool), rgba(159, 176, 255, 0)); border-radius: 2px; } @keyframes shoot { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(var(--dx, 400px), var(--dy, 300px)); opacity: 0; } } /* Ambient rockets — drift faintly over content as "live agents"; catchable on hover. Layer sits above content (z 40) but below nav (1000)/grain/cursor; it's click-through except for each rocket's own .rocket-hit circle. */ .space-rockets { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; } .space-rockets .rocket { position: absolute; will-change: transform; opacity: var(--o, 0.5); filter: drop-shadow(0 0 6px var(--glow)); transition: opacity .3s var(--ease), filter .3s var(--ease); } /* Inner wrapper owns the idle bob so it doesn't fight the JS scroll/rotate transform on .rocket */ .space-rockets .rocket-bob { position: relative; display: block; animation: rocketBob var(--bob, 5s) ease-in-out infinite alternate; } .space-rockets .rocket svg { display: block; transition: transform .3s var(--ease); } .rocket-flame { position: absolute; bottom: -5px; left: 50%; width: 5px; height: 9px; transform: translateX(-50%); transform-origin: top center; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; background: linear-gradient(180deg, #ffffff, var(--cool), transparent); filter: drop-shadow(0 0 5px var(--glow)); animation: rocketFlame .28s ease-in-out infinite alternate; } @keyframes rocketFlame { to { transform: translateX(-50%) scaleY(1.5); opacity: 0.6; } } @keyframes rocketBob { to { transform: translateY(-4px); } } /* Transparent circular catch-area centered on the sprite (rotation-invariant) */ .rocket-hit { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: auto; cursor: none; } /* Caught: brighten + lock (freeze the bob/flame, enlarge the ship) */ .space-rockets .rocket.is-caught { opacity: 1; filter: drop-shadow(0 0 12px var(--glow)) brightness(1.25); } .space-rockets .rocket.is-caught .rocket-bob, .space-rockets .rocket.is-caught .rocket-flame { animation-play-state: paused; } .space-rockets .rocket.is-caught svg { transform: scale(1.3); } /* Agent bubble — small popover anchored beside a caught rocket */ .agent-bubble { position: fixed; z-index: 1100; width: max-content; /* shrink-wrap to the text… */ max-width: 325px; /* …but wrap once it gets this wide */ padding: 0.9rem 2.1rem 0.95rem 1.1rem; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 18px 50px -12px rgba(0,0,0,0.6), 0 0 30px -10px var(--glow); pointer-events: auto; opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; } .agent-bubble.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .agent-bubble-eyebrow { display: flex; align-items: center; gap: 0.4em; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cool); margin-bottom: 0.45rem; } .agent-bubble-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; animation: agentLive 1.4s ease-in-out infinite; } @keyframes agentLive { 50% { opacity: 0.35; } } .agent-bubble-line { margin: 0; color: var(--text); font-size: 1.05rem; line-height: 1.4; font-weight: 400; } .agent-bubble-line strong { font-weight: 400; color: inherit; } .agent-bubble-line span { color: inherit; } .agent-bubble-close { position: absolute; top: 5px; right: 6px; background: none; border: 0; color: var(--muted-2); font-size: 0.85rem; line-height: 1; padding: 5px; cursor: none; transition: color .2s var(--ease); } .agent-bubble-close:hover { color: var(--accent); } /* Arrow pointing back at the rocket — side (left/right) or vertical (up/down). JS sets --arrow-x / --arrow-y so it aims at the rocket even when the bubble is clamped to a screen edge. */ .agent-bubble::after { content: ""; position: absolute; width: 0; height: 0; } .agent-bubble.arrow-left::after, .agent-bubble.arrow-right::after { top: var(--arrow-y, 50%); transform: translateY(-50%); border-top: 7px solid transparent; border-bottom: 7px solid transparent; } .agent-bubble.arrow-left::after { right: 100%; border-right: 8px solid var(--line-2); } .agent-bubble.arrow-right::after { left: 100%; border-left: 8px solid var(--line-2); } .agent-bubble.arrow-up::after, .agent-bubble.arrow-down::after { left: var(--arrow-x, 50%); transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; } .agent-bubble.arrow-up::after { bottom: 100%; border-bottom: 8px solid var(--line-2); } .agent-bubble.arrow-down::after { top: 100%; border-top: 8px solid var(--line-2); } /* Touch / coarse pointers: bigger tap target so a moving rocket is grabbable, and drop the per-element filters — drop-shadow on a moving foreground layer forces main-thread repaints on mobile (stutter). */ @media (pointer: coarse) { .rocket-hit { width: 66px; height: 66px; cursor: auto; } .space-rockets .rocket { filter: none; } .space-rockets .rocket.is-caught { filter: brightness(1.3); } .rocket-flame { filter: none; } } /* ========================================================= Custom cursor ========================================================= */ .cursor, .cursor-dot { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); will-change: transform; } .cursor { width: 36px; height: 36px; border: 1px solid var(--line-2); transition: width .3s var(--ease), height .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); } .cursor-dot { width: 5px; height: 5px; background: var(--accent); } .cursor.is-hover { width: 64px; height: 64px; background: var(--accent-soft); border-color: transparent; } /* While a modal is open the cursor is promoted into the top layer via the Popover API (js/main.js) so it can paint above a native . A shown popover gets UA chrome (centered via inset/margin, padding, opaque background, dot border) — strip it back to a clean ring + dot. Only applies in the :popover-open state. */ .cursor:popover-open, .cursor-dot:popover-open { inset: auto; top: 0; left: 0; margin: 0; padding: 0; overflow: visible; } .cursor:popover-open { background: transparent; } .cursor-dot:popover-open { background: var(--accent); border: 0; } @media (hover: none) { .cursor, .cursor-dot { display: none; } body { cursor: auto; } } /* ========================================================= Scroll progress ========================================================= */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, var(--cool), #ffffff); z-index: 10000; box-shadow: 0 0 14px var(--glow); } /* ========================================================= Reusable bits ========================================================= */ .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 0.7em; } .eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--glow); animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 50% { opacity: 0.3; transform: scale(0.7); } } .btn { position: relative; display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.95em 1.6em; border-radius: 100px; border: 1px solid transparent; /* Reset native