/* ========================================================================== css/base.css Global reset, element defaults, body background, and shared animations. Depends on: variables.css (must load first) ========================================================================== */ /* -------------------------------------------------------------------------- Box model reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* -------------------------------------------------------------------------- HTML root The home page paints the gradient directly on so it fills the viewport before JS loads. Signup / thankyou pages paint it on instead. Both approaches share the same gradient values via variables. -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; min-height: 100%; background: var(--page-bg); background-color: #040907; zoom: 0.9; } /* -------------------------------------------------------------------------- Body -------------------------------------------------------------------------- */ body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top left, rgba(22, 137, 107, 0.24), transparent 34%), radial-gradient(circle at 88% 10%, rgba(134, 244, 209, 0.12), transparent 22%), radial-gradient(circle at 50% 100%, rgba(29, 198, 147, 0.08), transparent 32%), linear-gradient(180deg, #07120f 0%, #06100d 32%, #040907 100%); color: var(--text); font-family: var(--body); line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Grid overlay texture */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -2; background: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 88%); } /* Film-grain noise overlay */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- Element defaults -------------------------------------------------------------------------- */ img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, textarea { font: inherit; } /* -------------------------------------------------------------------------- Shared keyframes -------------------------------------------------------------------------- */ @keyframes float { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 22px, 0); } } /* -------------------------------------------------------------------------- Accessibility: respect user motion preference -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; transition-delay: 0ms !important; } }