/* ============================================================================= Ctech galaxy theme — shared tokens + animated background. Derived from the tesseract product so the two feel like one family. Load this first on every page; page CSS builds on these variables. ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=Newsreader:ital,wght@0,400;0,600;1,400;1,600&display=swap'); :root { /* surfaces */ --bg: #0a0f1f; --fg: #f4f7ff; --muted: #8aa0c4; --card: rgba(20, 28, 54, 0.55); --card-solid: rgba(20, 28, 54, 0.85); --border: rgba(120, 170, 255, 0.18); --border-strong: rgba(120, 170, 255, 0.35); --input-bg: rgba(255, 255, 255, 0.05); /* brand */ --primary: #4f8cff; --primary-2: #6aa8ff; --glow: #4f8cff; /* feedback */ --danger: #ff6363; --danger-soft: rgba(255, 80, 80, 0.08); --success: #44d49b; --warning: #ffce5a; /* shape + type */ --radius: 1rem; --radius-sm: 0.6rem; --font-sans: "Inter", system-ui, -apple-system, sans-serif; --font-serif: "Newsreader", Georgia, serif; } *, *::before, *::after { box-sizing: border-box; } /* Base colour lives on only. stays transparent so the fixed galaxy layer (z-index:-1) shows through the WHOLE viewport — not just the empty area below short content. A solid body background would paint over a negative-z-index layer and hide it behind the content box. */ html { background: var(--bg); } html, body { margin: 0; min-height: 100%; color: var(--fg); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } a { color: var(--primary-2); } /* Utility — CSP-safe hide (no inline style attributes anywhere). */ .is-hidden { display: none !important; } /* ---- Galaxy background (decorative, aria-hidden in markup) --------------- */ .galaxy { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; } .galaxy .nebula, .galaxy .stars, .galaxy .stars-2, .galaxy .stars-3, .galaxy .vignette { position: absolute; inset: 0; } .galaxy .nebula { background: radial-gradient(ellipse 60% 50% at 20% 20%, rgba(110, 80, 220, 0.40), transparent 60%), radial-gradient(ellipse 50% 60% at 80% 30%, rgba(70, 140, 255, 0.40), transparent 60%), radial-gradient(ellipse 70% 50% at 50% 95%, rgba(90, 60, 200, 0.45), transparent 65%), radial-gradient(ellipse 40% 40% at 90% 80%, rgba(80, 180, 255, 0.30), transparent 60%); filter: blur(20px); animation: nebula-drift 22s ease-in-out infinite; } .galaxy .stars { background-image: radial-gradient(1.2px 1.2px at 20px 30px, #eaf0ff 50%, transparent 100%), radial-gradient(1px 1px at 80px 90px, #d8e4ff 50%, transparent 100%), radial-gradient(1.5px 1.5px at 140px 60px, #ffffff 50%, transparent 100%), radial-gradient(1px 1px at 200px 150px, #c5d6ff 50%, transparent 100%), radial-gradient(1.2px 1.2px at 260px 40px, #eaf0ff 50%, transparent 100%); background-size: 360px 220px; animation: stars-drift 120s linear infinite; opacity: 0.8; } .galaxy .stars-2 { background-image: radial-gradient(1.8px 1.8px at 50px 80px, #d4e2ff 50%, transparent 100%), radial-gradient(2px 2px at 180px 30px, #ffffff 50%, transparent 100%), radial-gradient(1.5px 1.5px at 280px 200px, #c1d3ff 50%, transparent 100%); background-size: 480px 280px; animation: stars-drift 200s linear infinite, twinkle 4s ease-in-out infinite; opacity: 0.7; } .galaxy .stars-3 { background-image: radial-gradient(2.5px 2.5px at 100px 100px, #c8d8ff 50%, transparent 100%), radial-gradient(3px 3px at 350px 250px, #ffffff 50%, transparent 100%); background-size: 700px 400px; animation: stars-drift 300s linear infinite, twinkle 6s ease-in-out infinite alternate; opacity: 0.9; } .galaxy .vignette { /* Darken the edges only — keep the centre clear so the galaxy reads as depth, not a flat band of solid colour at the bottom. */ background: radial-gradient(ellipse 90% 70% at 50% 30%, transparent 45%, rgba(5, 7, 18, 0.75) 100%); } @keyframes nebula-drift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 33% { transform: translate3d(-4%, 3%, 0) scale(1.1); } 66% { transform: translate3d(3%, -2%, 0) scale(1.05); } } @keyframes stars-drift { from { background-position: 0 0; } to { background-position: -1000px 600px; } } @keyframes twinkle { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.55; } } /* Respect users who prefer no motion. */ @media (prefers-reduced-motion: reduce) { .galaxy .nebula, .galaxy .stars, .galaxy .stars-2, .galaxy .stars-3 { animation: none; } }