/** * Turok Trading — Globe Background * * A subtle, editorial-aesthetic spinning globe positioned behind * the masthead/hero/market clock area. Adapted from the user's * original Dead World Records design, with the following changes: * * - Dark cyan/glow palette → oxblood + ink palette (matches brand) * - Background: black → cream paper (matches site) * - Reduced overall opacity to keep text readable * - Slower rotation (120s vs 90s) — less distracting in editorial context * - Sized for desktop and gracefully reduced on mobile * * Usage: include globe.css and the

...

markup * just inside . The globe is fixed-position and behind everything. */ .globe-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* Subtle radial wash — replaces the dark gradient from the original */ .globe-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 25% 15%, rgba(184, 51, 31, 0.06), transparent 35%), radial-gradient(circle at 75% 85%, rgba(30, 77, 58, 0.04), transparent 35%); } /* The rotating sphere */ .globe-bg .sphere { position: absolute; left: 50%; top: 32%; width: 920px; height: 920px; transform: translate(-50%, -50%); opacity: 0.55; animation: globe-spin 120s linear infinite; border-radius: 50%; background: radial-gradient( circle at 35% 35%, rgba(184, 51, 31, 0.05), rgba(244, 241, 234, 0) 55%, transparent 70% ); } .globe-bg .sphere svg { position: absolute; inset: 0; width: 100%; height: 100%; } /* Make sure all real content sits above the globe */ body > *:not(.globe-bg) { position: relative; z-index: 1; } @keyframes globe-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* Reduce on smaller screens — keep performance reasonable + reduce visual noise */ @media (max-width: 900px) { .globe-bg .sphere { width: 700px; height: 700px; opacity: 0.4; } } @media (max-width: 600px) { .globe-bg .sphere { width: 520px; height: 520px; opacity: 0.32; } } /* Respect users who don't want motion */ @media (prefers-reduced-motion: reduce) { .globe-bg .sphere { animation: none; } }