| @tailwind base; |
| @tailwind components; |
| @tailwind utilities; |
|
|
| @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=IBM+Plex+Mono:ital,wght@0,400;0,600;1,400&family=Noto+Sans+Arabic:wght@400;500;700&display=swap'); |
|
|
| :root { |
| --bg: #050505; |
| --surface: rgba(20, 20, 20, 0.6); |
| --border: rgba(255, 255, 255, 0.06); |
| --text: #f8fafc; |
| --muted: #94a3b8; |
| --mono: "IBM Plex Mono", monospace; |
| --arabic: "Noto Sans Arabic", sans-serif; |
| } |
|
|
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } |
|
|
| body { |
| font-family: var(--arabic); |
| background: var(--bg); |
| color: var(--text); |
| min-height: 100vh; |
| overflow-x: hidden; |
| } |
|
|
| |
| .glass-card { |
| background: var(--surface); |
| backdrop-filter: blur(20px); |
| -webkit-backdrop-filter: blur(20px); |
| border: 1px solid var(--border); |
| border-radius: 16px; |
| padding: 24px; |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); |
| position: relative; |
| } |
|
|
| .sier-app { |
| width: 100%; |
| max-width: 600px; |
| margin: 0 auto; |
| padding: 24px 16px 80px; |
| } |
|
|
| |
| .tab-nav { |
| display: flex; |
| background: rgba(255, 255, 255, 0.03); |
| padding: 6px; |
| border-radius: 99px; |
| margin-bottom: 32px; |
| border: 1px solid var(--border); |
| } |
|
|
| .tab-btn { |
| flex: 1; |
| padding: 10px; |
| border-radius: 99px; |
| color: var(--muted); |
| font-size: 13px; |
| transition: all 0.3s ease; |
| text-align: center; |
| } |
|
|
| .tab-btn--active { |
| background: rgba(255,255,255,0.1); |
| color: white; |
| box-shadow: 0 4px 12px rgba(0,0,0,0.2); |
| } |
|
|
| @keyframes fadeUp { |
| from { opacity: 0; transform: translateY(15px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| |
| @keyframes heartPulse { |
| 0% { transform: scale(1); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); } |
| 30% { transform: scale(1.015); box-shadow: 0 16px 50px rgba(34, 197, 94, 0.15); } |
| 60% { transform: scale(1); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); } |
| } |
|
|
| .animate-heart-pulse { |
| animation: heartPulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; |
| } |
|
|
| |
| @keyframes glowPulse { |
| 0% { opacity: 0.3; transform: translate(-50%, 0) scale(1); } |
| 30% { opacity: 0.5; transform: translate(-50%, -5px) scale(1.2); } |
| 60% { opacity: 0.3; transform: translate(-50%, 0) scale(1); } |
| } |
|
|
| .animate-glow-pulse { |
| animation: glowPulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; |
| } |
|
|
| |
| @keyframes confettiFall { |
| 0% { transform: translateY(-20px) rotate(0deg); opacity: 1; } |
| 100% { transform: translateY(400px) rotate(720deg); opacity: 0; } |
| } |
|
|
| .animate-confetti-fall { |
| animation: confettiFall 3.5s linear both; |
| } |
|
|
| |
| @keyframes realBeat { |
| 0% { transform: scale(1); } |
| 15% { transform: scale(1.25); } |
| 30% { transform: scale(1); } |
| 45% { transform: scale(1.25); } |
| 60% { transform: scale(1); } |
| 100% { transform: scale(1); } |
| } |
|
|
| .animate-real-beat { |
| animation: realBeat 1.5s ease-in-out infinite; |
| } |
|
|
|
|
