Spaces:
Runtime error
Runtime error
| :root { | |
| /* Light Theme Variables (SmartPark Light Mode) */ | |
| --background: #ffffff; | |
| --foreground: #0f172a; | |
| --primary: #008c85; /* SmartPark Light Accent */ | |
| --primary-foreground: #ffffff; | |
| --secondary: #f8fafc; | |
| --muted: #f1f5f9; | |
| --muted-foreground: #475569; | |
| --border: rgba(0, 0, 0, 0.08); | |
| --card: #ffffff; | |
| --neon: #00c2b8; /* SmartPark Main Teal */ | |
| --neon-soft: rgba(0, 194, 184, 0.8); | |
| --navy-deep: #05080f; | |
| --accent-gradient: linear-gradient(135deg, #00c2b8, #1a6bff); | |
| --hero-gradient: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%); | |
| --shadow-glow: 0 8px 24px rgba(0, 140, 133, 0.3); | |
| --shadow-card: 0 20px 40px rgba(0, 0, 0, 0.05); | |
| } | |
| .dark { | |
| /* Dark Theme Variables (SmartPark Dark Mode) */ | |
| --background: #05080f; | |
| --foreground: #f8fafc; | |
| --primary: #00c2b8; /* SmartPark Dark Accent */ | |
| --primary-foreground: #05080f; | |
| --secondary: #1e293b; | |
| --muted: #0f172a; | |
| --muted-foreground: #94a3b8; | |
| --border: #1e293b; | |
| --card: #0f172a; | |
| --neon: #00c2b8; | |
| --neon-soft: rgba(0, 194, 184, 0.8); | |
| --navy-deep: #05080f; | |
| --accent-gradient: linear-gradient(135deg, #00c2b8, #1a6bff); | |
| --hero-gradient: linear-gradient(135deg, #0f172a 0%, #00c2b8 100%); | |
| --shadow-glow: 0 8px 24px rgba(0, 194, 184, 0.3); | |
| --shadow-card: 0 20px 40px rgba(0, 0, 0, 0.2); | |
| } | |
| body { | |
| background-color: var(--background); | |
| color: var(--foreground); | |
| transition: background-color 0.3s, color 0.3s; | |
| } | |
| .bg-accent-gradient { background: var(--accent-gradient); } | |
| .bg-hero-gradient { background: var(--hero-gradient); } | |
| .shadow-glow { box-shadow: var(--shadow-glow); } | |
| .shadow-card { box-shadow: var(--shadow-card); } | |
| .text-gradient { | |
| background: var(--accent-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| /* Simple Reveal Animation */ | |
| .reveal { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: all 0.8s ease-out; | |
| } | |
| .reveal.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| @media screen and (max-width: 768px) { | |
| /* الكود ده هيخلي الصور متخرجش برة شاشة الموبايل */ | |
| img { | |
| max-width: 100% ; | |
| height: auto ; | |
| } | |
| } | |