Spaces:
Runtime error
Runtime error
| @tailwind base; | |
| @tailwind components; | |
| @tailwind utilities; | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| min-height: 100%; | |
| font-family: 'Plus Jakarta Sans', sans-serif; | |
| background-color: #fdf8f8; | |
| overflow-x: hidden; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| .font-headline { | |
| font-family: 'Newsreader', serif; | |
| } | |
| .hairline { | |
| border-width: 0.5px; | |
| } | |
| .shadow-none { | |
| box-shadow: none ; | |
| } | |
| .glass-card { | |
| background: rgba(255, 255, 255, 0.8); | |
| backdrop-filter: blur(8px); | |
| } | |
| @keyframes page-in { | |
| from { | |
| opacity: 0; | |
| transform: translateY(12px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .page-enter { | |
| animation: page-in 420ms ease both; | |
| } | |
| .material-symbols-outlined { | |
| font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; | |
| vertical-align: middle; | |
| } | |
| .headline-font { | |
| font-family: 'Newsreader', serif; | |
| } | |
| .no-scrollbar::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .no-scrollbar { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| .step-completed { | |
| background-color: #004880; | |
| } | |
| .step-active { | |
| background-color: #005ea4; | |
| } | |
| .step-inactive { | |
| background-color: #e5e2e1; | |
| } | |
| .onboarding-spinner { | |
| border: 2px solid transparent; | |
| border-top-color: #005ea4; | |
| border-radius: 50%; | |
| width: 80px; | |
| height: 80px; | |
| animation: onboarding-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; | |
| } | |
| @keyframes onboarding-spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @keyframes subtle-pulse { | |
| 0%, | |
| 100% { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| 50% { | |
| opacity: 0.85; | |
| transform: scale(0.98); | |
| } | |
| } | |
| .animate-subtle-pulse { | |
| animation: subtle-pulse 4s ease-in-out infinite; | |
| } | |
| .tag-selected { | |
| background-color: #005ea4; | |
| color: #ffffff; | |
| border-color: #005ea4; | |
| } | |
| .flat-card { | |
| background-color: #ffffff; | |
| border: 0.5px solid rgba(0, 0, 0, 0.08); | |
| border-radius: 6px; | |
| } | |
| .btn-primary-ui { | |
| background-color: #005ea4; | |
| color: #ffffff; | |
| border-radius: 6px; | |
| transition: all 0.2s ease; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| .btn-primary-ui:hover { | |
| opacity: 0.92; | |
| } | |
| .btn-primary-ui:active { | |
| transform: scale(0.98); | |
| } | |
| .btn-outline-ui { | |
| border: 1px solid rgba(0, 0, 0, 0.08); | |
| border-radius: 6px; | |
| background: transparent; | |
| transition: all 0.2s ease; | |
| cursor: pointer; | |
| } | |
| .btn-outline-ui:hover { | |
| background-color: #f6f3f2; | |
| } | |
| .toast-enter { | |
| animation: toast-slide-up 0.3s ease forwards; | |
| } | |
| .leaflet-container { | |
| z-index: 1; | |
| font-family: inherit; | |
| } | |
| @keyframes toast-slide-up { | |
| from { | |
| transform: translateY(100%); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| .reveal { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1); | |
| } | |
| .reveal.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .glass-nav { | |
| transition: all 0.3s ease; | |
| } | |
| .glass-nav.scrolled { | |
| padding-top: 0.5rem; | |
| padding-bottom: 0.5rem; | |
| background: rgba(255, 255, 255, 0.85); | |
| backdrop-filter: blur(12px); | |
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05); | |
| } | |
| .orb { | |
| position: absolute; | |
| filter: blur(80px); | |
| opacity: 0.4; | |
| z-index: -1; | |
| animation: orb-pulse 10s infinite alternate; | |
| } | |
| @keyframes orb-pulse { | |
| 0% { transform: scale(1); } | |
| 100% { transform: scale(1.2); } | |
| } | |
| .cursor-glow { | |
| width: 400px; | |
| height: 400px; | |
| background: radial-gradient(circle, rgba(0, 94, 164, 0.08) 0%, transparent 70%); | |
| pointer-events: none; | |
| position: fixed; | |
| transform: translate(-50%, -50%); | |
| z-index: 100; | |
| transition: width 0.3s, height 0.3s; | |
| } | |
| .bento-stagger > div { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| .bento-stagger.active > div { | |
| opacity: 1; | |
| transform: translateY(0); | |
| transition: all 0.6s ease-out; | |
| } | |
| .bento-stagger.active > div:nth-child(1) { transition-delay: 0.1s; } | |
| .bento-stagger.active > div:nth-child(2) { transition-delay: 0.2s; } | |
| .bento-stagger.active > div:nth-child(3) { transition-delay: 0.3s; } | |
| .bento-stagger.active > div:nth-child(4) { transition-delay: 0.4s; } | |
| .bento-stagger.active > div:nth-child(5) { transition-delay: 0.5s; } | |
| .bento-stagger.active > div:nth-child(6) { transition-delay: 0.6s; } | |
| .grain-overlay { | |
| background-image: url("https://www.transparenttextures.com/patterns/felt.png"); | |
| opacity: 0.05; | |
| pointer-events: none; | |
| } | |
| .hairline-input { | |
| border: 0.5px solid rgba(0, 0, 0, 0.12); | |
| } | |
| .hairline-input:focus { | |
| border-color: #00467c; | |
| box-shadow: 0 0 0 1px rgba(0, 70, 124, 0.1); | |
| } | |
| @keyframes subtle-float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-5px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .float-anim { | |
| animation: subtle-float 6s ease-in-out infinite; | |
| } | |
| .fade-in-up { | |
| animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; | |
| opacity: 0; | |
| } | |
| @keyframes fadeInUp { | |
| from { transform: translateY(30px); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| .stagger-1 { animation-delay: 0.1s; } | |
| .stagger-2 { animation-delay: 0.2s; } | |
| .stagger-3 { animation-delay: 0.3s; } | |
| .stagger-4 { animation-delay: 0.4s; } | |
| .stagger-5 { animation-delay: 0.5s; } | |
| @keyframes fade-in { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-fade-in { | |
| animation: fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; | |
| } | |
| .font-newsreader { | |
| font-family: 'Newsreader', serif; | |
| } | |
| .serif { | |
| font-family: 'Newsreader', serif; | |
| } | |
| ::-webkit-scrollbar { | |
| width: 4px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #e0e0e0; | |
| border-radius: 10px; | |
| } | |