..

public/css/comingsoon.css

@@ -0,0 +1,171 @@
+/* Base layout */
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+    background:
+        radial-gradient(circle at top left, rgba(0, 81, 255, 0.35), transparent 55%),
+        radial-gradient(circle at bottom right, rgba(200, 203, 208, 0.25), transparent 55%),
+        #0b0b0d;
+    color: #FFFFFF;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Page wrapper */
+.page {
+    position: relative;
+    width: 100%;
+    max-width: 960px;
+    padding: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Subtle background glow */
+.glow {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background:
+        radial-gradient(circle at 10% 10%, rgba(0, 81, 255, 0.35), transparent 55%),
+        radial-gradient(circle at 90% 90%, rgba(3, 193, 96, 0.20), transparent 50%);
+    opacity: 0.75;
+    z-index: 0;
+}
+
+/* Card container */
+.card {
+    position: relative;
+    z-index: 1;
+    max-width: 720px;
+    width: 100%;
+    padding: 32px 32px 28px;
+    border-radius: 18px;
+    background: linear-gradient(
+        135deg,
+        rgba(26, 26, 26, 0.96),
+        rgba(11, 11, 13, 0.98)
+    );
+    box-shadow:
+        0 18px 45px rgba(0, 0, 0, 0.65),
+        0 0 0 1px rgba(200, 203, 208, 0.08);
+    text-align: left;
+    overflow: hidden;
+}
+
+/* Accent bar oben */
+.card::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 12%;
+    right: 12%;
+    height: 3px;
+    border-radius: 999px;
+    background: linear-gradient(90deg, #0051FF, #03C160);
+    opacity: 0.9;
+}
+
+/* Logo */
+.logo {
+    display: block;
+    max-width: 260px;
+    width: 60%;
+    margin-bottom: 24px;
+    filter:
+        drop-shadow(0 8px 24px rgba(0, 0, 0, 0.6))
+        drop-shadow(0 0 14px rgba(200, 203, 208, 0.45));
+}
+
+/* Heading & text */
+h1 {
+    font-family: 'Montserrat', system-ui, sans-serif;
+    font-weight: 700; /* Montserrat Bold */
+    font-size: clamp(2.1rem, 2.6vw, 2.6rem);
+    margin: 0 0 12px;
+    letter-spacing: 0.04em;
+    color: #FFFFFF;
+}
+
+.lead {
+    margin: 0 0 22px;
+    font-size: 1.05rem;
+    line-height: 1.7;
+    color: #F4F4F4;
+}
+
+/* Pills / Badges */
+.pill-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+.pill {
+    display: inline-flex;
+    align-items: center;
+    padding: 6px 12px;
+    border-radius: 999px;
+    font-size: 0.82rem;
+    font-family: 'Montserrat', system-ui, sans-serif;
+    font-weight: 600; /* Montserrat SemiBold */
+    letter-spacing: 0.02em;
+    border: 1px solid rgba(200, 203, 208, 0.28);
+    background: rgba(26, 26, 26, 0.85);
+    color: #FFFFFF;
+    backdrop-filter: blur(8px);
+}
+
+.pill-safe {
+    border-color: rgba(3, 193, 96, 0.55);
+    box-shadow: 0 0 12px rgba(3, 193, 96, 0.45);
+}
+
+.pill-size {
+    border-color: rgba(0, 81, 255, 0.6);
+    box-shadow: 0 0 12px rgba(0, 81, 255, 0.45);
+}
+
+.pill-fake {
+    border-color: rgba(230, 57, 70, 0.6);
+    box-shadow: 0 0 12px rgba(230, 57, 70, 0.45);
+}
+
+/* Footer note */
+.note {
+    margin: 0;
+    font-size: 0.9rem;
+    line-height: 1.6;
+    color: #C8CBD0; /* silver */
+}
+
+/* Responsive tweaks */
+@media (max-width: 640px) {
+    .card {
+        padding: 24px 20px 22px;
+        text-align: left;
+    }
+
+    .card::before {
+        left: 16px;
+        right: 16px;
+    }
+
+    .logo {
+        max-width: 220px;
+        width: 70%;
+        margin-bottom: 20px;
+    }
+
+    .pill-row {
+        flex-direction: row;
+    }
+}