/* ═══════════════════════════════════════════════════════════════ Perihelion X — Global resets and shared tokens Imported by all pages. Page-specific styles in their own files. ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #080810; --white: #ffffff; --off-white: #e8e8f0; --font: 'Space Grotesk', sans-serif; /* Planet accent colours */ --color-sun: #FDB813; --color-mercury: #9B9B9B; --color-venus: #E8C46A; --color-earth: #4B9CD3; --color-mars: #C1440E; --color-jupiter: #C88B3A; --color-saturn: #E4D191; --color-uranus: #7DE8E8; --color-neptune: #3F54BA; } html { background-color: var(--bg); color: var(--white); font-family: var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { min-height: 100vh; } img { display: block; max-width: 100%; } button { font-family: inherit; } a { color: inherit; } /* ── Universal focus ring ────────────────────────────────────── */ :focus { outline: none; } :focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 3px; border-radius: 2px; } /* ── Custom glowing cursor (A8) ─────────────────────────────── */ /* Hidden by default; cursor.js appends these to */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 50%; /* Offset so the centre of the element sits on the mouse position */ margin-left: -4px; margin-top: -4px; } .cursor-dot { width: 8px; height: 8px; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, 0.8); transition: transform 0.05s ease; } .cursor-ring { width: 36px; height: 36px; margin-left: -18px; margin-top: -18px; border: 1px solid rgba(255, 255, 255, 0.4); transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), margin 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease, box-shadow 0.3s ease; } .cursor-ring.is-hovering { width: 52px; height: 52px; margin-left: -26px; margin-top: -26px; border-color: var(--cursor-accent, rgba(255, 255, 255, 0.7)); box-shadow: 0 0 8px var(--cursor-accent, rgba(255, 255, 255, 0.3)), inset 0 0 8px var(--cursor-accent, rgba(255, 255, 255, 0.05)); } .cursor-ring.is-pressed { width: 28px; height: 28px; margin-left: -14px; margin-top: -14px; } /* DISABLED: custom cursor (cursor.js) is currently disabled. Restore by re-enabling cursor.js script tags and uncommenting this block. @media (pointer: fine) { body:has(.cursor-dot) { cursor: none !important; } body:has(.cursor-dot) a, body:has(.cursor-dot) button, body:has(.cursor-dot) [role="button"], body:has(.cursor-dot) [tabindex], body:has(.cursor-dot) .body-item { cursor: none !important; } } */ /* AUDIO DISABLED: hide mute button. Remove this line to restore audio. */ .mute-toggle { display: none !important; } /* ── Audio visualiser pulse on mute toggle (C6) ──────────────── */ .mute-toggle::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0); pointer-events: none; transition: border-color 0.4s ease; } .mute-toggle.is-playing::after { border-color: rgba(255, 255, 255, 0.18); animation: muteAuraPulse 2.2s ease-in-out infinite; } @keyframes muteAuraPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: 0.5; } } /* ── Reduced motion ──────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }