/* ========================================================================== Fastmove — Sign-up page styles -------------------------------------------------------------------------- Architecture note: this project uses the Tailwind CDN build, which has no build step and therefore can't read a separate tailwind.config.js or process @apply in an external stylesheet. The theme extension (colors, fonts, shadows) lives inline in index.html for that reason. Theming: every color token below is an RGB triplet ("R G B", no commas) so it can be consumed both as a Tailwind color (theme.extend.colors maps each token to `rgb(var(--x-rgb) / )`) and directly in this file via `rgb(var(--x-rgb) / alpha)`. [data-theme='light'] on overrides the dark (default) values — see theme-init in index.html for how the attribute gets set before first paint. This file holds everything the CDN build can't do for us: - the design tokens (light + dark) - the font imports' fallback stack - keyframe animations (entrance, ambient background, button sweep) - a couple of small reusable component classes (.btn-primary, .link-accent) so the markup doesn't repeat long gradient/transition declarations on every link - browser-quirk fixes (autofill, scrollbar, selection) - the prefers-reduced-motion override ========================================================================== */ :root { --canvas-rgb: 9 9 11; /* zinc-950 — page background */ --surface-rgb: 24 24 27; /* zinc-900 — card background */ --surface-2-rgb: 39 39 42; /* zinc-800 — borders / hairlines */ --inset-rgb: 9 9 11; /* recessed input background */ --accent-from-rgb: 99 102 241; /* indigo-500 */ --accent-to-rgb: 139 92 246; /* violet-500 */ --ink-rgb: 250 250 250; /* zinc-50 — headings */ --body-rgb: 244 244 245; /* zinc-100 — body text */ --muted-rgb: 161 161 170; /* zinc-400 — secondary text */ --faint-rgb: 113 113 122; /* zinc-500 — labels / placeholders */ --faint2-rgb: 82 82 91; /* zinc-600 — dimmest text */ } [data-theme='light'] { --canvas-rgb: 248 248 250; --surface-rgb: 255 255 255; --surface-2-rgb: 228 228 231; /* zinc-200 */ --inset-rgb: 244 244 245; /* zinc-100 */ --ink-rgb: 9 9 11; /* zinc-950 */ --body-rgb: 39 39 42; /* zinc-800 */ --muted-rgb: 82 82 91; /* zinc-600 */ --faint-rgb: 113 113 122; /* zinc-500 */ --faint2-rgb: 161 161 170; /* zinc-400 */ } /* ---- Base ---------------------------------------------------------- */ html { font-family: Roboto, ui-sans-serif, system-ui, sans-serif; } ::selection { background-color: rgb(var(--accent-from-rgb)); color: #fff; } /* Custom dark scrollbar, since the default light scrollbar breaks the theme */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: rgb(var(--canvas-rgb)); } ::-webkit-scrollbar-thumb { background-color: rgb(var(--surface-2-rgb)); border-radius: 8px; border: 2px solid rgb(var(--canvas-rgb)); } ::-webkit-scrollbar-thumb:hover { background-color: rgb(var(--muted-rgb)); } /* Chrome/Safari force a light background on autofilled inputs by default — override so autofilled fields keep the current theme. */ input:-webkit-autofill { -webkit-text-fill-color: rgb(var(--body-rgb)); -webkit-box-shadow: 0 0 0px 1000px rgb(var(--inset-rgb) / 0.6) inset; caret-color: rgb(var(--body-rgb)); transition: background-color 5000s ease-in-out 0s; } /* ---- Ambient background -------------------------------------------- */ /* Two soft, asymmetric glows that drift slowly — meant to read as motion blur trailing off the top-left corner rather than a centered halo. */ .bg-blob { position: fixed; z-index: 0; border-radius: 9999px; filter: blur(90px); pointer-events: none; } .bg-blob-1 { top: -12%; left: -10%; width: 60vw; height: 60vw; max-width: 620px; max-height: 620px; background: radial-gradient(circle at 30% 30%, rgb(var(--accent-from-rgb)) 0%, transparent 70%); opacity: 0.16; animation: drift-1 18s ease-in-out infinite alternate; } .bg-blob-2 { bottom: -16%; right: -12%; width: 50vw; height: 50vw; max-width: 520px; max-height: 520px; background: radial-gradient(circle at 70% 70%, rgb(var(--accent-to-rgb)) 0%, transparent 70%); opacity: 0.14; animation: drift-2 22s ease-in-out infinite alternate; } [data-theme='light'] .bg-blob-1 { opacity: 0.10; } [data-theme='light'] .bg-blob-2 { opacity: 0.09; } @keyframes drift-1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(3%, 4%) scale(1.06); } } @keyframes drift-2 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-3%, -4%) scale(1.05); } } /* ---- Card entrance ---------------------------------------------------- */ .animate-fade-up { animation: fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ---- Primary button --------------------------------------------------- The one deliberately "bold" interactive moment on the page: a gradient that sweeps on hover via a background-position shift, plus a soft glow. ------------------------------------------------------------------------ */ .btn-primary { background-image: linear-gradient(135deg, rgb(var(--accent-from-rgb)) 0%, rgb(var(--accent-to-rgb)) 100%); background-size: 180% 180%; background-position: 0% 0%; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.06) inset; transition: background-position 450ms ease, box-shadow 250ms ease, transform 150ms ease; } .btn-primary:hover:not(:disabled) { background-position: 100% 0%; box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.4), 0 10px 30px -8px rgba(139, 92, 246, 0.55); } .btn-primary:active:not(:disabled) { transform: scale(0.985); } .btn-primary:focus-visible { outline: 2px solid rgb(var(--accent-from-rgb)); outline-offset: 2px; } .btn-primary:disabled { opacity: 0.65; cursor: not-allowed; } /* ---- Google auth button ----------------------------------------------- */ .btn-google { border: 1px solid rgb(var(--surface-2-rgb) / 0.85); background: rgb(var(--inset-rgb) / 0.18); transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease; } .btn-google:hover { border-color: rgb(var(--muted-rgb) / 0.42); background: rgb(var(--surface-2-rgb) / 0.32); } .btn-google:active { transform: scale(0.985); } .btn-google:focus-visible { outline: 2px solid rgb(var(--accent-from-rgb)); outline-offset: 2px; } /* ---- Inline links ---------------------------------------------------- */ .link-accent { color: #a5b4fc; /* indigo-300 */ text-underline-offset: 3px; text-decoration-line: underline; text-decoration-color: transparent; transition: color 150ms ease, text-decoration-color 150ms ease; } .link-accent:hover, .link-accent:focus-visible { color: #c4b5fd; /* violet-300 */ text-decoration-color: currentColor; } [data-theme='light'] .link-accent { color: #4338ca; /* indigo-700 — pastel indigo-300 has no contrast on a light card */ } [data-theme='light'] .link-accent:hover, [data-theme='light'] .link-accent:focus-visible { color: #6d28d9; /* violet-700 */ } /* ---- Badge/alert text contrast on light backgrounds ------------------------ Pastel-300 text (designed to pop on a near-black card) reads as nearly invisible on a light card, since the tinted /10–/15 background it sits on is itself pale. Remap to a darker -700 shade only when light is active. ------------------------------------------------------------------------ */ [data-theme='light'] .text-emerald-300, [data-theme='light'] .text-emerald-400 { color: #047857; } [data-theme='light'] .text-amber-300, [data-theme='light'] .text-amber-400 { color: #b45309; } [data-theme='light'] .text-indigo-300, [data-theme='light'] .text-indigo-400 { color: #4338ca; } [data-theme='light'] .text-rose-300, [data-theme='light'] .text-rose-400 { color: #be123c; } /* ---- Theme toggle -------------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; height: 2.25rem; width: 2.25rem; border-radius: 0.65rem; border: 1px solid rgb(var(--surface-2-rgb) / 0.85); background: rgb(var(--inset-rgb) / 0.18); color: rgb(var(--muted-rgb)); cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease; } .theme-toggle:hover { border-color: rgb(var(--muted-rgb) / 0.42); background: rgb(var(--surface-2-rgb) / 0.32); color: rgb(var(--body-rgb)); } .theme-toggle:focus-visible { outline: 2px solid rgb(var(--accent-from-rgb)); outline-offset: 2px; } .theme-toggle .icon-sun, .theme-toggle .icon-moon { height: 1.1rem; width: 1.1rem; } [data-theme='dark'] .theme-toggle .icon-sun { display: none; } [data-theme='light'] .theme-toggle .icon-moon { display: none; } /* ---- Reduced motion ---------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .bg-blob, .animate-fade-up, .btn-primary { animation: none !important; transition: none !important; } }