|
|
| Line 1: |
Line 1: |
| /* CSS placed here will be applied to all skins */ | | /* CSS placed here will be applied to all skins */ |
| /* HERO */
| |
| .hero-section {
| |
| background: linear-gradient(-45deg, #0f172a, #1e3a8a, #2563eb, #0f172a);
| |
| background-size: 400% 400%;
| |
| animation: gradientBG 12s ease infinite;
| |
| padding: 120px 20px;
| |
| text-align: center;
| |
| color: white;
| |
| border-radius: 12px;
| |
| }
| |
|
| |
| @keyframes gradientBG {
| |
| 0% { background-position: 0% 50%; }
| |
| 50% { background-position: 100% 50%; }
| |
| 100% { background-position: 0% 50%; }
| |
| }
| |
|
| |
| .hero-title {
| |
| font-size: 48px;
| |
| font-weight: 700;
| |
| animation: fadeDown 1.2s ease;
| |
| }
| |
|
| |
| .hero-subtitle {
| |
| font-size: 20px;
| |
| margin-top: 15px;
| |
| opacity: 0.9;
| |
| }
| |
|
| |
| /* BUTTON */
| |
| .hero-btn {
| |
| display: inline-block;
| |
| margin-top: 30px;
| |
| padding: 14px 32px;
| |
| background: white;
| |
| color: #1e293b;
| |
| border-radius: 8px;
| |
| font-weight: bold;
| |
| transition: 0.3s;
| |
| }
| |
|
| |
| .hero-btn:hover {
| |
| background: #e2e8f0;
| |
| transform: translateY(-4px);
| |
| }
| |
|
| |
| /* STATS */
| |
| .stats-section {
| |
| display: flex;
| |
| justify-content: space-around;
| |
| text-align: center;
| |
| margin-top: 40px;
| |
| }
| |
|
| |
| .stat-box h2 {
| |
| font-size: 32px;
| |
| color: #2563eb;
| |
| }
| |
|
| |
| /* CARDS */
| |
| .card-container {
| |
| display: flex;
| |
| justify-content: space-around;
| |
| gap: 20px;
| |
| }
| |
|
| |
| .card {
| |
| flex: 1;
| |
| padding: 25px;
| |
| border-radius: 12px;
| |
| background: white;
| |
| box-shadow: 0 10px 25px rgba(0,0,0,0.08);
| |
| transition: 0.3s;
| |
| }
| |
|
| |
| .card:hover {
| |
| transform: translateY(-8px);
| |
| }
| |
|
| |
| /* ANIMATION */
| |
| @keyframes fadeDown {
| |
| from {opacity:0; transform:translateY(-20px);}
| |
| to {opacity:1; transform:translateY(0);}
| |
| }
| |
Revision as of 21:22, 20 February 2026
/* CSS placed here will be applied to all skins */
