/* ───────────────────────────────────────────── ROOT TOKENS ───────────────────────────────────────────── */ /*noinspection CssUnresolvedCustomProperty*/ :root { --za-void: #000000; --za-deep: rgba(6, 8, 16, 0.82); --za-nebula-a: rgba(17, 4, 34, 0.45); --za-nebula-b: rgba(9, 20, 41, 0.40); --za-nebula-c: rgba(6, 27, 17, 0.50); --za-aurora-a: rgba(var(--ZFrame-primary-r), var(--ZFrame-primary-g), var(--ZFrame-primary-b), 0.06); --za-aurora-b: rgba(56, 189, 248, 0.05); --za-aurora-c: rgba(124, 58, 237, 0.07); --za-star: rgba(255, 255, 255, 0.85); --za-grid: rgba(255, 183, 0, 0.2); } /* ───────────────────────────────────────────── BASE BODY — deep space foundation ───────────────────────────────────────────── */ body { background-color: var(--za-void); background-attachment: fixed; position: relative; overflow-x: hidden; } /* ───────────────────────────────────────────── BACKGROUND WRAPPER LAYERS We stack three fixed pseudo-layers using a dedicated .za-bg element placed as the first child of . Each sub-layer is a ::before / ::after or a child div. ───────────────────────────────────────────── */ /* --- Layer container --------------------------------- */ .za-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; } /* All real page content must sit above z-index: 0 */ body > *:not(.za-bg) { position: relative; z-index: 1; } /* ───────────────────────────────────────────── NEBULA DRIFT LAYER Two overlapping radial blobs that slowly pan across the viewport on independent timings. ───────────────────────────────────────────── */ .za-nebula { position: absolute; inset: -20%; width: 140%; height: 140%; background: radial-gradient(ellipse 60% 40% at 20% 30%, var(--za-nebula-a) 0%, transparent 60%), radial-gradient(ellipse 50% 55% at 75% 70%, var(--za-nebula-b) 0%, transparent 60%), radial-gradient(ellipse 40% 35% at 55% 15%, var(--za-nebula-c) 0%, transparent 55%), radial-gradient(ellipse 70% 50% at 10% 80%, var(--za-nebula-b) 0%, transparent 65%); animation: nebula-drift 140s ease-in-out infinite alternate; will-change: transform, opacity; } .za-nebula-secondary { position: absolute; inset: -30%; width: 160%; height: 160%; background: radial-gradient(ellipse 55% 45% at 80% 20%, var(--za-nebula-a) 0%, transparent 55%), radial-gradient(ellipse 45% 60% at 30% 75%, var(--za-nebula-c) 0%, transparent 60%), radial-gradient(ellipse 35% 40% at 65% 55%, var(--za-nebula-b) 0%, transparent 50%); animation: nebula-drift-reverse 155s ease-in-out infinite alternate; opacity: 0.7; will-change: transform, opacity; } @keyframes nebula-drift { 0% { transform: translate(0%, 0%) scale(1); opacity: 0.9; } 25% { transform: translate(3%, -2%) scale(1.03); opacity: 1; } 50% { transform: translate(-2%, 4%) scale(0.98); opacity: 0.85; } 75% { transform: translate(5%, 2%) scale(1.04); opacity: 0.95; } 100% { transform: translate(-3%, -4%) scale(1.01); opacity: 0.9; } } @keyframes nebula-drift-reverse { 0% { transform: translate(0%, 0%) scale(1.02); opacity: 0.7; } 30% { transform: translate(-4%, 3%) scale(0.97); opacity: 0.8; } 60% { transform: translate(3%, -5%) scale(1.05); opacity: 0.65; } 100% { transform: translate(-2%, 4%) scale(0.99); opacity: 0.75; } } /* ───────────────────────────────────────────── AURORA SHIMMER LAYER A wide, slow-moving conic gradient that breathes across the top of the viewport — like a northern lights wash. ───────────────────────────────────────────── */ .za-aurora { position: absolute; top: -40%; left: -20%; width: 140%; height: 80%; background: conic-gradient( from 200deg at 50% 0%, transparent 0deg, var(--za-aurora-c) 40deg, var(--za-aurora-b) 90deg, var(--za-aurora-a) 140deg, transparent 180deg, var(--za-aurora-b) 220deg, var(--za-aurora-c) 270deg, transparent 360deg ); filter: blur(60px); animation: aurora-flow 125s ease-in-out infinite alternate; mix-blend-mode: screen; will-change: transform, opacity; } @keyframes aurora-flow { 0% { transform: rotate(-8deg) translateY(0%) scaleX(1); opacity: 0.8; } 20% { transform: rotate(-4deg) translateY(-3%) scaleX(1.05); opacity: 1; } 50% { transform: rotate(6deg) translateY(5%) scaleX(0.95); opacity: 0.7; } 80% { transform: rotate(2deg) translateY(-2%) scaleX(1.08); opacity: 0.9; } 100% { transform: rotate(-6deg) translateY(4%) scaleX(1.02); opacity: 0.75; } } /* Secondary bottom aurora for depth */ .za-aurora-bottom { position: absolute; bottom: -30%; left: -10%; width: 120%; height: 60%; background: conic-gradient( from 30deg at 50% 100%, transparent 0deg, var(--za-aurora-a) 50deg, var(--za-aurora-c) 100deg, transparent 160deg, var(--za-aurora-b) 210deg, transparent 300deg ); filter: blur(80px); animation: aurora-flow-bottom 135s ease-in-out infinite alternate; mix-blend-mode: screen; opacity: 0.6; will-change: transform, opacity; } @keyframes aurora-flow-bottom { 0% { transform: rotate(5deg) translateY(0%) scaleX(1); opacity: 0.5; } 40% { transform: rotate(-3deg) translateY(4%) scaleX(1.1); opacity: 0.7; } 70% { transform: rotate(8deg) translateY(-3%) scaleX(0.92); opacity: 0.45; } 100% { transform: rotate(-5deg) translateY(2%) scaleX(1.05); opacity: 0.6; } } /* ───────────────────────────────────────────── STAR FIELD — CSS-only particles We use a single element with layered box-shadows to create hundreds of stars. Three size classes: tiny, small, medium. ───────────────────────────────────────────── */ .za-stars-small, .za-stars-medium, .za-stars-large { position: absolute; top: 0; left: 0; width: 1px; height: 1px; border-radius: 50%; background: transparent; } /* --- Tiny stars (most abundant, slowest) ------------ */ .za-stars-small { box-shadow: 120px 340px var(--za-star), 250px 80px var(--za-star), 430px 610px var(--za-star), 670px 190px var(--za-star), 780px 450px var(--za-star), 890px 30px var(--za-star), 960px 720px var(--za-star), 110px 540px var(--za-star), 330px 270px var(--za-star), 510px 810px var(--za-star), 640px 130px var(--za-star), 820px 380px var(--za-star), 990px 560px var(--za-star), 70px 410px var(--za-star), 200px 690px var(--za-star), 380px 50px var(--za-star), 490px 930px var(--za-star), 730px 310px var(--za-star), 860px 650px var(--za-star), 940px 200px var(--za-star), 160px 760px var(--za-star), 290px 480px var(--za-star), 460px 160px var(--za-star), 600px 890px var(--za-star), 740px 70px var(--za-star), 850px 520px var(--za-star), 1050px 300px var(--za-star), 1100px 680px var(--za-star), 1200px 140px var(--za-star), 1320px 460px var(--za-star), 1400px 750px var(--za-star), 1480px 90px var(--za-star), 1560px 590px var(--za-star), 40px 870px var(--za-star), 310px 620px var(--za-star), 575px 350px var(--za-star), 710px 980px var(--za-star), 1010px 430px var(--za-star), 1250px 820px var(--za-star), 1380px 180px var(--za-star), 1500px 640px var(--za-star), 1620px 370px var(--za-star), 90px 230px var(--za-star), 450px 710px var(--za-star), 800px 260px var(--za-star), 1080px 50px var(--za-star), 1190px 570px var(--za-star), 1330px 900px var(--za-star); animation: star-drift-slow 220s linear infinite; will-change: transform; } .za-stars-small::after { content: ''; position: absolute; top: 900px; left: 0; width: 1px; height: 1px; border-radius: 50%; box-shadow: inherit; } /* --- Medium stars ------------------------------------ */ .za-stars-medium { width: 2px; height: 2px; box-shadow: 145px 290px var(--za-star), 370px 560px var(--za-star), 620px 120px var(--za-star), 810px 740px var(--za-star), 1030px 340px var(--za-star), 1240px 610px var(--za-star), 1420px 190px var(--za-star), 1590px 780px var(--za-star), 270px 450px var(--za-star), 490px 870px var(--za-star), 700px 30px var(--za-star), 920px 500px var(--za-star), 1110px 660px var(--za-star), 1300px 80px var(--za-star), 60px 600px var(--za-star), 400px 180px var(--za-star), 760px 920px var(--za-star), 1050px 240px var(--za-star), 1370px 530px var(--za-star), 1610px 410px var(--za-star); animation: star-drift-medium 290s linear infinite; will-change: transform; } .za-stars-medium::after { content: ''; position: absolute; top: 900px; left: 0; width: 2px; height: 2px; border-radius: 50%; box-shadow: inherit; } /* --- Large/bright stars (fewest, occasional twinkle) - */ .za-stars-large { width: 3px; height: 3px; box-shadow: 230px 140px var(--za-star), 580px 480px var(--za-star), 930px 780px var(--za-star), 1160px 260px var(--za-star), 1450px 590px var(--za-star), 340px 820px var(--za-star), 710px 60px var(--za-star), 1070px 430px var(--za-star), 1380px 870px var(--za-star), 100px 650px var(--za-star), 520px 310px var(--za-star), 870px 140px var(--za-star); animation: star-drift-fast 260s linear infinite, star-twinkle 22s ease-in-out 2s infinite; will-change: transform, opacity; } .za-stars-large::after { content: ''; position: absolute; top: 900px; left: 0; width: 3px; height: 3px; border-radius: 50%; box-shadow: inherit; } /* --- Star drift animations (continuous upward slow drift) */ @keyframes star-drift-slow { from { transform: translateY(0); } to { transform: translateY(-900px); } } @keyframes star-drift-medium { from { transform: translateY(0); } to { transform: translateY(-900px); } } @keyframes star-drift-fast { from { transform: translateY(0); } to { transform: translateY(-900px); } } @keyframes star-twinkle { 0%, 100% { opacity: 1; } 30% { opacity: 0.3; } 60% { opacity: 0.8; } 80% { opacity: 0.2; } } /* ───────────────────────────────────────────── PERSPECTIVE GRID OVERLAY A subtle gold/brand-coloured receding grid that adds the "developer / tech" feeling. ───────────────────────────────────────────── */ .za-grid { position: absolute; bottom: 0; left: -20%; width: 140%; height: 65%; background-image: linear-gradient(var(--za-grid) 1px, transparent 1px), linear-gradient(90deg, var(--za-grid) 1px, transparent 1px); background-size: 60px 60px; transform: perspective(600px) rotateX(55deg); transform-origin: bottom center; animation: grid-pulse 8s ease-in-out infinite alternate; mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.15) 40%, transparent 80%); -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.15) 40%, transparent 80%); will-change: opacity; } @keyframes grid-pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.5; } } /* ───────────────────────────────────────────── FLOATING ORB — slow bokeh glow balls Two large, extremely soft blurred circles that drift very slowly — adds depth. ───────────────────────────────────────────── */ .za-orb { position: absolute; border-radius: 50%; filter: blur(90px); mix-blend-mode: screen; will-change: transform, opacity; } .za-orb-1 { width: 500px; height: 500px; top: 10%; left: -10%; background: radial-gradient(circle, rgba(124, 58, 237, 0.12) 0%, transparent 70%); animation: orb-float-1 30s ease-in-out infinite alternate; } .za-orb-2 { width: 600px; height: 600px; top: 40%; right: -15%; background: radial-gradient(circle, rgba(255, 183, 0, 0.08) 0%, transparent 70%); animation: orb-float-2 40s ease-in-out infinite alternate; } .za-orb-3 { width: 400px; height: 400px; bottom: 5%; left: 35%; background: radial-gradient(circle, rgba(56, 189, 248, 0.09) 0%, transparent 70%); animation: orb-float-3 35s ease-in-out infinite alternate; } @keyframes orb-float-1 { 0% { transform: translate(0px, 0px) scale(1); opacity: 0.8; } 33% { transform: translate(60px, -40px) scale(1.1); opacity: 1; } 66% { transform: translate(-30px, 70px) scale(0.95); opacity: 0.7; } 100% { transform: translate(80px, 30px) scale(1.05); opacity: 0.9; } } @keyframes orb-float-2 { 0% { transform: translate(0px, 0px) scale(1); opacity: 0.7; } 40% { transform: translate(-70px, 50px) scale(1.08); opacity: 0.9; } 80% { transform: translate(40px, -60px) scale(0.92); opacity: 0.6; } 100% { transform: translate(-50px, 30px) scale(1.03); opacity: 0.8; } } @keyframes orb-float-3 { 0% { transform: translate(0px, 0px) scale(1); opacity: 0.6; } 50% { transform: translate(50px, -40px) scale(1.12); opacity: 0.85; } 100% { transform: translate(-40px, 60px) scale(0.9); opacity: 0.65; } } /* ───────────────────────────────────────────── SECTION BLEED — stop sections looking flat against the animated backdrop by adding a very subtle glassmorphism feel to all Bulma sections. ───────────────────────────────────────────── */ .section { background-color: rgba(5, 6, 15, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .hero { background-color: transparent !important; } .hero.is-fullheight-with-navbar .hero-body { background-color: rgba(5, 6, 15, 0.0); } /* ───────────────────────────────────────────── CARD GLASS EFFECT Cards get a very faint frosted glass look to lift them off the cosmic background. ───────────────────────────────────────────── */ /*noinspection CssUnresolvedCustomProperty*/ .card { background-color: rgba(12, 14, 30, 0.87); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(var(--ZFrame-primary-r), var(--ZFrame-primary-g), var(--ZFrame-primary-b), 0.08); box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03); } /*noinspection CssUnresolvedCustomProperty*/ .card:hover { border-color: rgba(var(--ZFrame-primary-r), var(--ZFrame-primary-g), var(--ZFrame-primary-b), 0.2); box-shadow: 0 8px 48px rgba(0, 0, 0, 0.6), 0 0 24px rgba(var(--ZFrame-primary-r), var(--ZFrame-primary-g), var(--ZFrame-primary-b), 0.06); transition: border-color 0.4s ease, box-shadow 0.4s ease; } /* ───────────────────────────────────────────── REDUCED MOTION ───────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .za-nebula, .za-nebula-secondary, .za-aurora, .za-aurora-bottom, .za-stars-small, .za-stars-medium, .za-stars-large, .za-grid, .za-orb-1, .za-orb-2, .za-orb-3 { animation: none; } .za-stars-small, .za-stars-medium, .za-stars-large { opacity: 0.4; } }