style: improve container

components/Container.tsx

@@ -27,7 +27,7 @@ export default function AppContainer({
 			<div className={styles.overlay}>
 				<div className={styles.card}>
 					<h1 className={styles.title}>Hex: Unlocked</h1>
-					<p className={styles.subtitle}>Awaiting unlocker connection</p>
+					<p className={styles.subtitle}>Awaiting WebSocket connection</p>
 
 					<div className={styles.spinner}></div>
 

styles/AppContainer.module.css

@@ -5,22 +5,29 @@
 	justify-content: center;
 	height: 100vh;
 	width: 100vw;
-	background: #000000;
+	background: radial-gradient(circle at center, #111111 0%, #000000 100%);
 	color: #ffffff;
 	font-family: 'Roboto Condensed', sans-serif;
 	text-align: center;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 9999;
 }
 
 .card {
-	background: #050505;
+	background: rgba(13, 13, 13, 0.85);
+	backdrop-filter: blur(10px);
 	border: 1px solid #1a1a1a;
 	border-top: 3px solid #a30000;
 	padding: 3rem 4rem;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
+	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(163, 0, 0, 0.1);
+	border-radius: 4px;
 	min-width: 400px;
+	animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }
 
 .title {
@@ -29,7 +36,7 @@
 	color: #ffffff;
 	letter-spacing: 0.05em;
 	margin: 0 0 0.5rem 0;
-	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
+	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8), 0 0 10px rgba(163, 0, 0, 0.3);
 	font-family: 'Oswald', sans-serif;
 }
 
@@ -42,22 +49,28 @@
 }
 
 .spinner {
-	width: 36px;
-	height: 36px;
-	border: 3px solid #1a1a1a;
+	width: 48px;
+	height: 48px;
+	border: 3px solid rgba(26, 26, 26, 0.5);
 	border-top: 3px solid #a30000;
 	border-radius: 50%;
-	animation: spin 1s linear infinite;
+	animation: spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
 	margin-bottom: 2rem;
+	box-shadow: 0 0 15px rgba(163, 0, 0, 0.2);
 }
 
 .helpText {
-	color: #555555;
+	color: #888888;
 	font-size: 0.85rem;
 	margin-top: 1rem;
 	letter-spacing: 0.05em;
 	text-transform: uppercase;
 	animation: fadeIn 1s ease-in;
+	background: #080808;
+	padding: 1rem;
+	border: 1px solid #1a1a1a;
+	border-radius: 4px;
+	width: 100%;
 }
 
 .link {
@@ -65,6 +78,20 @@
 	text-decoration: none;
 	font-weight: bold;
 	transition: all 0.2s ease;
+	position: relative;
+}
+
+.link::after {
+	content: '';
+	position: absolute;
+	width: 100%;
+	height: 1px;
+	bottom: -2px;
+	left: 0;
+	background-color: #a30000;
+	transform: scaleX(0);
+	transform-origin: bottom right;
+	transition: transform 0.25s ease-out;
 }
 
 .link:hover {
@@ -72,6 +99,12 @@
 	text-shadow: 0 0 10px rgba(163, 0, 0, 0.4);
 }
 
+.link:hover::after {
+	transform: scaleX(1);
+	transform-origin: bottom left;
+	background-color: #ff0000;
+}
+
 @keyframes spin {
 	0% {
 		transform: rotate(0deg);
@@ -84,8 +117,21 @@
 @keyframes fadeIn {
 	from {
 		opacity: 0;
+		transform: translateY(10px);
 	}
 	to {
 		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@keyframes slideUp {
+	from {
+		opacity: 0;
+		transform: translateY(30px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
 	}
 }