Build a landing page with a retro-futuristic, people-focused aesthetic inspired by Googie architecture (The Jetsons, 50s/60s space age) and the architectural grandeur of The Talos Principle II's New Jerusalem (classical proportions with futuristic tech elements). Think: geometric patterns, dimensional shapes with depth, glowing accents, warm gradients, and optimistic space-age design—not flat, rounded rectangles.
f59dd05
verified
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;500;600&display=swap'); | |
| :root { | |
| --primary-blue: #3B82F6; | |
| --primary-green: #10B981; | |
| --warm-coral: #FF6B6B; | |
| --soft-peach: #FFA07A; | |
| --cream: #FFF8F0; | |
| --shadow-glow: 0 4px 20px rgba(59, 130, 246, 0.3); | |
| --organic-curve: 40% 60% 70% 30% / 60% 40% 30% 70%; | |
| } | |
| * { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| h1, h2, h3 { | |
| font-family: 'Orbitron', monospace; | |
| } | |
| body { | |
| position: relative; | |
| background-attachment: fixed; | |
| } | |
| /* Floating Orbs */ | |
| .floating-orb { | |
| position: fixed; | |
| border-radius: var(--organic-curve); | |
| opacity: 0.1; | |
| animation: float 20s infinite ease-in-out; | |
| z-index: 1; | |
| } | |
| .orb-1 { | |
| width: 300px; | |
| height: 300px; | |
| background: linear-gradient(135deg, #3B82F6, #8B5CF6); | |
| top: 10%; | |
| left: -150px; | |
| animation-delay: 0s; | |
| } | |
| .orb-2 { | |
| width: 200px; | |
| height: 200px; | |
| background: linear-gradient(135deg, #10B981, #3B82F6); | |
| top: 60%; | |
| right: -100px; | |
| animation-delay: 7s; | |
| } | |
| .orb-3 { | |
| width: 250px; | |
| height: 250px; | |
| background: linear-gradient(135deg, #FF6B6B, #FFA07A); | |
| bottom: 20%; | |
| left: 70%; | |
| animation-delay: 14s; | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translate(0, 0) rotate(0deg) scale(1); | |
| } | |
| 25% { | |
| transform: translate(30px, -30px) rotate(90deg) scale(1.1); | |
| } | |
| 50% { | |
| transform: translate(-20px, 20px) rotate(180deg) scale(0.9); | |
| } | |
| 75% { | |
| transform: translate(-30px, -20px) rotate(270deg) scale(1.05); | |
| } | |
| } | |
| .animate-float { | |
| animation: textFloat 6s ease-in-out infinite; | |
| } | |
| @keyframes textFloat { | |
| 0%, 100% { | |
| transform: translateY(0px); | |
| } | |
| 50% { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| .animate-spin-slow { | |
| animation: spin 20s linear infinite; | |
| } | |
| @keyframes spin { | |
| from { | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /* Organic Cards |