/* Основные стили для PhotoPlaces */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overflow: hidden; background: #000; } #map-container { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: 1; } .welcome-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1000; background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%); pointer-events: none; } .welcome-content { text-align: center; color: white; z-index: 1001; pointer-events: auto; } h1 { font-size: 3.5rem; margin-bottom: 1rem; text-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.3), 2px 2px 4px rgba(0, 0, 0, 0.8); font-weight: 300; letter-spacing: 2px; } .subtitle { font-size: 1.2rem; margin-bottom: 3rem; opacity: 0.9; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); } .login-button { padding: 18px 50px; font-size: 1.3rem; font-weight: 600; color: white; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4), 0 0 20px rgba(102, 126, 234, 0.2); text-transform: uppercase; letter-spacing: 1px; position: relative; overflow: hidden; } .login-button::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; } .login-button:hover::before { width: 300px; height: 300px; } .login-button:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6), 0 0 30px rgba(102, 126, 234, 0.3); } .login-button:active { transform: translateY(-1px); } .login-button span { position: relative; z-index: 1; } /* Модальные окна */ .modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); } .modal-content { background-color: #1a1a1a; margin: 15% auto; padding: 30px; border-radius: 15px; width: 90%; max-width: 400px; color: white; position: relative; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; position: absolute; right: 20px; top: 15px; } .close:hover { color: white; } .modal-content h2 { margin-bottom: 20px; text-align: center; } .modal-content input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #333; border-radius: 5px; background: #2a2a2a; color: white; } .modal-content button { width: 100%; padding: 12px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 5px; cursor: pointer; margin-top: 10px; } .modal-content a { color: #667eea; text-decoration: none; } .modal-content a:hover { text-decoration: underline; } /* Карточка места */ .place-card { background: white; border-radius: 10px; padding: 20px; max-width: 300px; } .place-card h3 { color: #333; margin-bottom: 10px; } .place-card p { color: #666; margin-bottom: 5px; } /* Адаптивность */ @media (max-width: 768px) { h1 { font-size: 2.5rem; } .subtitle { font-size: 1rem; margin-bottom: 2rem; } .login-button { padding: 15px 40px; font-size: 1.1rem; } .modal-content { margin: 20% auto; width: 95%; padding: 20px; } }