Inital Commit

src/routes/layout.css

@@ -0,0 +1,165 @@
+@import 'tailwindcss';
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+
+:root {
+	/* Color Palette - Cyberpunk/Futuristic Dark */
+	--bg-deep: #0a0a0c;
+	--bg-card: #131318;
+	--bg-glass: rgba(19, 19, 24, 0.7);
+
+	--primary: #6366f1; /* Indigo */
+	--primary-glow: rgba(99, 102, 241, 0.4);
+	--accent: #ec4899; /* Pink */
+	--accent-glow: rgba(236, 72, 153, 0.4);
+
+	--text-main: #ffffff;
+	--text-muted: #9ca3af;
+
+	--border-subtle: rgba(255, 255, 255, 0.1);
+
+	--font-sans: 'Inter', sans-serif;
+}
+
+body {
+	background-color: var(--bg-deep);
+	color: var(--text-main);
+	font-family: var(--font-sans);
+	margin: 0;
+	min-height: 100vh;
+	background-image:
+		radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 20%),
+		radial-gradient(circle at 90% 80%, rgba(236, 72, 153, 0.15) 0%, transparent 20%);
+	background-attachment: fixed;
+}
+
+/* Typography */
+h1,
+h2,
+h3,
+h4 {
+	font-weight: 700;
+	letter-spacing: -0.02em;
+	margin-top: 0;
+}
+
+/* Glassmorphism Utilities */
+.glass-panel {
+	background: var(--bg-glass);
+	backdrop-filter: blur(12px);
+	-webkit-backdrop-filter: blur(12px);
+	border: 1px solid var(--border-subtle);
+	border-radius: 16px;
+	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
+}
+
+.glass-input {
+	background: rgba(255, 255, 255, 0.05);
+	border: 1px solid var(--border-subtle);
+	color: white;
+	padding: 0.75rem 1rem;
+	border-radius: 8px;
+	transition: all 0.2s ease;
+	width: 100%;
+}
+
+.glass-input:focus {
+	outline: none;
+	border-color: var(--primary);
+	background: rgba(255, 255, 255, 0.1);
+	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
+}
+
+/* Button Styles */
+.btn-primary {
+	background: linear-gradient(135deg, var(--primary), #4f46e5);
+	color: white;
+	border: none;
+	padding: 0.75rem 1.5rem;
+	border-radius: 8px;
+	font-weight: 600;
+	cursor: pointer;
+	transition:
+		transform 0.1s ease,
+		box-shadow 0.2s ease;
+	text-transform: uppercase;
+	font-size: 0.875rem;
+	letter-spacing: 0.05em;
+}
+
+.btn-primary:hover {
+	transform: translateY(-1px);
+	box-shadow: 0 4px 20px var(--primary-glow);
+}
+
+.btn-primary:active {
+	transform: translateY(0);
+}
+
+.btn-secondary {
+	background: transparent;
+	border: 1px solid var(--border-subtle);
+	color: var(--text-muted);
+	padding: 0.75rem 1.5rem;
+	border-radius: 8px;
+	font-weight: 600;
+	cursor: pointer;
+	transition: all 0.2s ease;
+}
+
+.btn-secondary:hover {
+	border-color: var(--text-main);
+	color: var(--text-main);
+	background: rgba(255, 255, 255, 0.05);
+}
+
+/* Layout Utilities */
+.container {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 2rem;
+}
+
+.grid-cols-2 {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 2rem;
+}
+
+@media (min-width: 768px) {
+	.grid-cols-2 {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+.section-title {
+	font-size: 1.5rem;
+	margin-bottom: 1.5rem;
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.gradient-text {
+	background: linear-gradient(to right, var(--primary), var(--accent));
+	-webkit-background-clip: text;
+	background-clip: text;
+	-webkit-text-fill-color: transparent;
+}
+
+/* Loading Spinner */
+.loader {
+	width: 20px;
+	height: 20px;
+	border: 2px solid rgba(255, 255, 255, 0.3);
+	border-radius: 50%;
+	border-top-color: white;
+	animation: spin 1s ease-in-out infinite;
+	display: inline-block;
+}
+
+@keyframes spin {
+	to {
+		transform: rotate(360deg);
+	}
+}