/* Fonts are loaded (preconnect + preload) in _includes/head.html to avoid a render-blocking @import. Host Grotesk = body/UI, Story Script = accent. */ /* Theme tokens. Light is the default (:root); the `.dark` class on flips them. Consumed by the Tailwind color tokens (base/surface/fg/muted/line/brand) in _layouts/default.html. */ :root { --bg: 0 0% 100%; /* page background */ --surface: 240 5% 96%; /* cards / alternating sections */ --fg: 0 0% 10%; /* primary text */ --muted: 0 0% 38%; /* secondary text */ --line: 0 0% 0%; /* borders & subtle fills (used at low alpha) */ --brand: 38 82% 40%; /* gold, darkened for contrast on light backgrounds */ --radius: 0.75rem; } .dark { --bg: 0 0% 0%; --surface: 0 0% 9%; --fg: 0 0% 100%; --muted: 0 0% 65%; --line: 0 0% 100%; --brand: 41 76% 53%; /* logo gold */ } * { margin: 0; padding: 0; box-sizing: border-box; /* No blue/grey flash when tapping links & buttons on touch devices */ -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; /* Offset anchor jumps so sections clear the fixed header */ scroll-padding-top: 6rem; } body { background-color: hsl(var(--bg)); color: hsl(var(--fg)); font-family: 'Host Grotesk', system-ui, -apple-system, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.3s ease, color 0.3s ease; } /* Animations */ @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes fade-in-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .animate-spin-slow { animation: spin-slow 20s linear infinite; } .fade-in-up { animation: fade-in-up 0.6s ease-out; } .animate-marquee { animation: marquee 60s linear infinite; } .opacity-fade { opacity: 0; transform: translateY(30px); } .opacity-fade.visible { opacity: 1; transform: translateY(0); transition: all 0.7s ease-out; } /* Utilities */ .container { width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; } @media (max-width: 768px) { .container { padding-left: 1rem; padding-right: 1rem; } } .bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); } .from-black-80 { --tw-gradient-from: rgba(0, 0, 0, 0.8); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0)); } .via-black-90 { --tw-gradient-via: rgba(0, 0, 0, 0.9); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to, rgba(0, 0, 0, 0)); } .to-black { --tw-gradient-to: rgb(0, 0, 0); } .scroll-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 3rem; height: 3rem; background-color: hsl(var(--brand)); color: hsl(0 0% 8%); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.3s ease; z-index: 40; } .scroll-to-top.visible { opacity: 1; } .scroll-to-top:hover { transform: scale(1.1); }