/* ========================================================================= Nudox landing — foundation + header Aesthetic: cyberpunk · futuristic · digital renaissance Palette: 071E3D · 1F4287 · 278EA5 · 21E6C1 (1F4287 is brand palette but unused in this sheet, so it carries no token.) ========================================================================= */ :root { /* core palette */ --navy: #071e3d; --teal: #278ea5; --neon: #21e6c1; --amber: #ffb020; /* about page — team clearance accent, person 2 */ --violet: #7c8cff; /* about page — team clearance accent, person 3 */ --magenta: #ff4fa3; /* about page — team clearance accent, person 4 */ --red: #ff5470; /* landing #benefits — the "without Nudox" trajectory */ /* derived tokens */ --bg-deep: #040d1c; /* darker floor for the body gradient */ --text: #c4dae6; /* default body / nav text */ --text-bright: #eafffb; /* hover / emphasis */ --ink: #04121f; /* dark text for use on bright fills */ --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace; --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --header-h: 4.5rem; --wrap-pad: clamp(1rem, 4vw, 2.5rem); --ease: cubic-bezier(.22, 1, .36, 1); --constellation-blur: 4px; /* softness of the site-wide graph backdrop */ } /* --- minimal base --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* The page gradient lives on , not , and this is load-bearing. The root element's background is what paints the canvas, and the canvas is painted before negative-z-index children — so .constellation (z-index: -2) draws on top of it and stays visible. Move this to and the gradient becomes an ordinary element background, which paints *after* negative-z-index descendants and buries the constellation entirely. Keeping it here also means the root has a background from the first frame, so no stage of loading or overscroll exposes the white default canvas. */ html { -webkit-text-size-adjust: 100%; color-scheme: dark; /* dark scrollbars/controls; see also the meta tag in base.html */ background: radial-gradient(120% 80% at 50% -10%, rgba(31, 66, 135, .35), transparent 60%), linear-gradient(180deg, var(--navy) 0%, var(--bg-deep) 100%); background-attachment: fixed; } body { margin: 0; min-height: 100vh; font-family: "Tenor Sans", system-ui, -apple-system, sans-serif; color: var(--text); } img { max-width: 100%; display: block; } /* ========================================================================= Header — sticky, full width, transparent → frosted glass on scroll NOTE: this and `footer` below are bare ELEMENT selectors, so they hit any