/* styles/cloud/theme/style.css * * AnimatedBg + Vue step-transition CSS. Tailwind (CDN in phases A-D) * handles everything else; phase E swaps the CDN for a compiled * bundle and merges this file in. */ /* ────────────────────────────────────────────────────────────────── * Typography — Geist Sans + Geist Mono (Vercel's typeface) * * Loaded via Google Fonts in wizard.html. We override Tailwind's * default sans + mono stacks below so `font-sans` (the implicit * default on ) and `font-mono` (used for the eyebrow + "v1.0" * footer) both resolve to Geist without us touching Tailwind's * theme config (we're on the CDN; phase E swaps to a compiled build * where these go in tailwind.config.js). * ────────────────────────────────────────────────────────────────── */ html, body { height: 100%; margin: 0; background: #fafafa; font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-feature-settings: 'cv11', 'ss01'; /* Geist tabular numerals */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Tailwind's `font-mono` utility — override to Geist Mono. */ .font-mono, code, kbd, samp, pre { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; } #cloud-wizard { min-height: 100vh; } .cw-shell { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* ────────────────────────────────────────────────────────────────── * AnimatedBg — two soft drifting orbs + faint grid + corner vignette * * Pure CSS, GPU-cheap (transform-only animation). The grid is masked * with a radial gradient so it fades to the edges instead of running * hard into the viewport corners. * ────────────────────────────────────────────────────────────────── */ .cw-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(135deg, #fafafa 0%, #f4f4f5 100%); overflow: hidden; pointer-events: none; } .cw-bg-orb { position: absolute; border-radius: 9999px; filter: blur(96px); opacity: 0.55; will-change: transform; } .cw-bg-orb-1 { width: 640px; height: 640px; top: -160px; left: -180px; background: #c7d2fe; /* indigo-200 */ animation: cw-orb-1-drift 26s ease-in-out infinite alternate; } .cw-bg-orb-2 { width: 640px; height: 640px; bottom: -200px; right: -200px; background: #bae6fd; /* sky-200 */ animation: cw-orb-2-drift 32s ease-in-out infinite alternate; } @keyframes cw-orb-1-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(80px, 40px, 0) scale(1.08); } } @keyframes cw-orb-2-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-80px, -40px, 0) scale(1.05); } } .cw-bg-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.035) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.9) 30%, transparent 75%); mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.9) 30%, transparent 75%); } /* Respect prefers-reduced-motion — kill the drift, keep the gradients. */ @media (prefers-reduced-motion: reduce) { .cw-bg-orb-1, .cw-bg-orb-2, .cw-spinner { animation: none; } } /* Inline spinner used by the slug availability indicator. */ .cw-spinner { animation: cw-spin 0.9s linear infinite; transform-origin: 50% 50%; } @keyframes cw-spin { to { transform: rotate(360deg); } } /* ────────────────────────────────────────────────────────────────── * Vue step transition — fade + 8px y-translate per React reference * (initial y=8 -> 0, exit y=0 -> -8, opacity 0->1, 0.25s ease-out). * * Vue's runs leave fully before enter, so * the directions feel coherent: outgoing slides UP and fades out, * incoming slides UP into place and fades in. * ────────────────────────────────────────────────────────────────── */ .cw-step-enter-active, .cw-step-leave-active { transition: opacity 0.25s ease-out, transform 0.25s ease-out; } .cw-step-enter-from { opacity: 0; transform: translateY(8px); } .cw-step-leave-to { opacity: 0; transform: translateY(-8px); } .cw-step-enter-to, .cw-step-leave-from { opacity: 1; transform: translateY(0); }