first commit

2026-07-16 20:48:43 -03:00
commit 5696cee264
1111 changed files with 322270 additions and 0 deletions
@@ -0,0 +1,147 @@
+.cardContainer {
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 0 20px;
+}
+
+.contentWrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.title {
+    font-size: 48px;
+    font-weight: 800;
+    color: #ffffff;
+    margin: 0 0 20px 0;
+    font-family: 'Inter', -apple-system, sans-serif;
+    line-height: 1.1;
+    letter-spacing: -1.5px;
+    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+}
+
+.description {
+    font-size: 20px;
+    color: #9ca3af;
+    margin: 0 0 40px 0;
+    font-weight: 400;
+    line-height: 1.6;
+    max-width: 600px;
+}
+
+.inputArea {
+    width: 100%;
+    max-width: 600px;
+    margin-bottom: 40px;
+}
+
+.actionArea {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+}
+
+.nextButton {
+    background: linear-gradient(135deg, var(--wine-red) 0%, #600018 100%);
+    color: #ffffff;
+    padding: 16px 40px;
+    font-size: 18px;
+    font-weight: 600;
+    border-radius: 12px;
+    text-transform: none;
+    box-shadow: 0 4px 14px 0 rgba(128, 0, 32, 0.4);
+    transition: all 0.2s ease;
+    width: max-content;
+    border: none;
+    cursor: pointer;
+    outline: none;
+    appearance: none;
+    -webkit-appearance: none;
+}
+
+.nextButton:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(128, 0, 32, 0.3);
+}
+.pressEnterText {
+    font-size: 13px;
+    color: #6b7280;
+    font-weight: 400;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    opacity: 0.8;
+}
+
+.pressEnterText strong {
+    font-weight: 700;
+    color: #9ca3af;
+    background: rgba(255,255,255,0.1);
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+}
+
+.topAccessory {
+    margin-bottom: 30px;
+    animation: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+/* Animations for entering - Staggered */
+.animateEnter {
+    animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.title {
+    animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
+}
+.description {
+    animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
+}
+.inputArea {
+    animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
+}
+.actionArea {
+    animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
+}
+
+@keyframes slideUpFade {
+    0% {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes scaleIn {
+    0% {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .title {
+        font-size: 36px;
+        letter-spacing: -1px;
+    }
+    .description {
+        font-size: 18px;
+    }
+}