Spaces:
Sleeping
Sleeping
| /** | |
| * WelcomePage Styles | |
| */ | |
| .welcome-page .hero-icon { | |
| margin-bottom: 32px; | |
| } | |
| .welcome-page .hero-title { | |
| font-size: 36px; | |
| font-weight: 700; | |
| color: #202124; | |
| text-align: center; | |
| margin: 0 0 16px 0; | |
| line-height: 1.3; | |
| } | |
| .welcome-page .hero-description { | |
| font-size: 16px; | |
| color: #5F6368; | |
| text-align: center; | |
| max-width: 600px; | |
| margin: 0 0 32px 0; | |
| line-height: 1.7; | |
| } | |
| .welcome-page .hero-description strong { | |
| color: #4285F4; | |
| } | |
| .welcome-page .feature-grid { | |
| display: flex; | |
| justify-content: center; | |
| gap: 16px; | |
| margin-bottom: 32px; | |
| flex-wrap: wrap; | |
| } | |
| .welcome-page .feature-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 16px; | |
| background: #f4f4f4; | |
| border-radius: 8px; | |
| font-size: 14px; | |
| color: #5F6368; | |
| } | |
| .welcome-page .feature-icon { | |
| font-size: 18px; | |
| } | |
| /* Popup/Modal styles */ | |
| .popup-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.6); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 1000; | |
| backdrop-filter: blur(5px); | |
| } | |
| .popup-content { | |
| background: #ffffff; | |
| padding: 2rem; | |
| border-radius: 16px; | |
| max-width: 600px; | |
| width: 90%; | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); | |
| animation: popup-fade-in 0.3s ease-out; | |
| } | |
| @keyframes popup-fade-in { | |
| from { | |
| opacity: 0; | |
| transform: scale(0.95); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| } | |
| .popup-content h2 { | |
| font-size: 24px; | |
| font-weight: 600; | |
| color: #202124; | |
| margin-top: 0; | |
| margin-bottom: 16px; | |
| } | |
| .popup-content p { | |
| font-size: 15px; | |
| line-height: 1.6; | |
| color: #5F6368; | |
| margin-bottom: 16px; | |
| } | |
| .popup-button { | |
| display: block; | |
| width: 100%; | |
| padding: 12px; | |
| font-size: 16px; | |
| font-weight: 500; | |
| color: #fff; | |
| background-color: #0B57D0; | |
| border: none; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: background-color 0.2s; | |
| } | |
| .popup-button:hover { | |
| background-color: #194FBB; | |
| } |