Spaces:
Running
Running
| ```css | |
| /* ========================================================================== | |
| PREMIUM GYM WEBSITE - COMPLETE CSS | |
| Dark Theme with Premium Accents & Advanced Animations | |
| ========================================================================== */ | |
| /* ========================================================================== | |
| CSS CUSTOM PROPERTIES (VARIABLES) | |
| ========================================================================== */ | |
| :root { | |
| /* Primary Colors */ | |
| --color-primary: #ff6b35; | |
| --color-primary-light: #ff8559; | |
| --color-primary-dark: #e55a2b; | |
| --color-primary-gradient: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%); | |
| /* Secondary Colors */ | |
| --color-secondary: #00d4ff; | |
| --color-secondary-light: #33ddff; | |
| --color-secondary-dark: #00bde6; | |
| --color-secondary-gradient: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%); | |
| /* Neutral Colors */ | |
| --color-dark-primary: #0a0a0a; | |
| --color-dark-secondary: #1a1a1a; | |
| --color-dark-tertiary: #2a2a2a; | |
| --color-dark-light: #3a3a3a; | |
| --color-gray-dark: #4a4a4a; | |
| --color-gray: #6a6a6a; | |
| --color-gray-light: #8a8a8a; | |
| --color-white: #ffffff; | |
| --color-white-soft: #f8f8f8; | |
| /* Accent Colors */ | |
| --color-gold: #ffd700; | |
| --color-gold-gradient: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%); | |
| --color-success: #00ff88; | |
| --color-warning: #ffaa00; | |
| --color-error: #ff4444; | |
| /* Background Gradients */ | |
| --bg-gradient-primary: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%); | |
| --bg-gradient-secondary: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); | |
| --bg-gradient-hero: linear-gradient(135deg, rgba(10, 10, 10, 0.9) 0%, rgba(26, 26, 26, 0.8) 50%, rgba(42, 42, 42, 0.9) 100%); | |
| /* Glass Effects */ | |
| --glass-bg: rgba(255, 255, 255, 0.05); | |
| --glass-border: rgba(255, 255, 255, 0.1); | |
| --glass-backdrop: blur(20px); | |
| /* Shadows */ | |
| --shadow-small: 0 2px 10px rgba(0, 0, 0, 0.3); | |
| --shadow-medium: 0 5px 25px rgba(0, 0, 0, 0.4); | |
| --shadow-large: 0 10px 40px rgba(0, 0, 0, 0.5); | |
| --shadow-glow: 0 0 30px rgba(255, 107, 53, 0.3); | |
| --shadow-glow-secondary: 0 0 30px rgba(0, 212, 255, 0.3); | |
| /* Typography */ | |
| --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| --font-heading: 'Montserrat', 'Inter', sans-serif; | |
| --font-size-xs: 0.75rem; | |
| --font-size-sm: 0.875rem; | |
| --font-size-base: 1rem; | |
| --font-size-lg: 1.125rem; | |
| --font-size-xl: 1.25rem; | |
| --font-size-2xl: 1.5rem; | |
| --font-size-3xl: 1.875rem; | |
| --font-size-4xl: 2.25rem; | |
| --font-size-5xl: 3rem; | |
| --font-size-6xl: 4rem; | |
| /* Spacing */ | |
| --spacing-xs: 0.25rem; | |
| --spacing-sm: 0.5rem; | |
| --spacing-md: 1rem; | |
| --spacing-lg: 1.5rem; | |
| --spacing-xl: 2rem; | |
| --spacing-2xl: 3rem; | |
| --spacing-3xl: 4rem; | |
| --spacing-4xl: 6rem; | |
| /* Border Radius */ | |
| --radius-sm: 0.375rem; | |
| --radius-md: 0.5rem; | |
| --radius-lg: 0.75rem; | |
| --radius-xl: 1rem; | |
| --radius-2xl: 1.5rem; | |
| --radius-full: 9999px; | |
| /* Transitions */ | |
| --transition-fast: 0.2s ease-in-out; | |
| --transition-normal: 0.3s ease-in-out; | |
| --transition-slow: 0.5s ease-in-out; | |
| --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); | |
| /* Z-index */ | |
| --z-dropdown: 1000; | |
| --z-sticky: 1020; | |
| --z-fixed: 1030; | |
| --z-modal: 1040; | |
| --z-popover: 1050; | |
| --z-tooltip: 1060; | |
| } | |
| /* ========================================================================== | |
| RESET & BASE STYLES | |
| ========================================================================== */ | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html { | |
| font-size: 16px; | |
| scroll-behavior: smooth; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--color-primary) var(--color-dark-tertiary); | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--color-dark-tertiary); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--color-primary-gradient); | |
| border-radius: var(--radius-full); | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--color-primary-light); | |
| } | |
| body { | |
| font-family: var(--font-primary); | |
| font-size: var(--font-size-base); | |
| line-height: 1.6; | |
| color: var(--color-white); | |
| background: var(--bg-gradient-primary); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| /* ========================================================================== | |
| TYPOGRAPHY | |
| ========================================================================== */ | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: var(--font-heading); | |
| font-weight: 700; | |
| line-height: 1.2; | |
| margin-bottom: var(--spacing-md); | |
| } | |
| h1 { font-size: var(--font-size-5xl); } | |
| h2 { font-size: var(--font-size-4xl); } | |
| h3 { font-size: var(--font-size-3xl); } | |
| h4 { font-size: var(--font-size-2xl); } | |
| h5 { font-size: var(--font-size-xl); } | |
| h6 { font-size: var(--font-size-lg); } | |
| p { | |
| margin-bottom: var(--spacing-md); | |
| color: var(--color-gray-light); | |
| } | |
| a { | |
| color: var(--color-primary); | |
| text-decoration: none; | |
| transition: var(--transition-fast); | |
| } | |
| a:hover { | |
| color: var(--color-primary-light); | |
| text-shadow: 0 0 10px var(--color-primary); | |
| } | |
| /* ========================================================================== | |
| LAYOUT UTILITIES | |
| ========================================================================== */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 var(--spacing-md); | |
| } | |
| .container-fluid { | |
| max-width: 100%; | |
| padding: 0 var(--spacing-md); | |
| } | |
| .row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| margin: 0 -var(--spacing-sm); | |
| } | |
| .col { | |
| flex: 1; | |
| padding: 0 var(--spacing-sm); | |
| } | |
| .col-6 { flex: 0 0 50%; } | |
| .col-4 { flex: 0 0 33.333333%; } | |
| .col-3 { flex: 0 0 25%; } | |
| .text-center { text-align: center; } | |
| .text-left { text-align: left; } | |
| .text-right { text-align: right; } | |
| .d-flex { display: flex; } | |
| .align-items-center { align-items: center; } | |
| .justify-content-center { justify-content: center; } | |
| .justify-content-between { justify-content: space-between; } | |
| /* ========================================================================== | |
| NAVIGATION | |
| ========================================================================== */ | |
| .navbar { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: var(--z-sticky); | |
| padding: var(--spacing-md) 0; | |
| background: rgba(10, 10, 10, 0.1); | |
| backdrop-filter: var(--glass-backdrop); | |
| border-bottom: 1px solid var(--glass-border); | |
| transition: var(--transition-normal); | |
| } | |
| .navbar.scrolled { | |
| padding: var(--spacing-sm) 0; | |
| background: rgba(10, 10, 10, 0.95); | |
| box-shadow: var(--shadow-medium); | |
| } | |
| .navbar .container { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .navbar-brand { | |
| font-family: var(--font-heading); | |
| font-size: var(--font-size-2xl); | |
| font-weight: 900; | |
| color: var(--color-white); | |
| background: var(--color-primary-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| text-shadow: none; | |
| } | |
| .navbar-nav { | |
| display: flex; | |
| list-style: none; | |
| gap: var(--spacing-xl); | |
| } | |
| .nav-link { | |
| color: var(--color-white); | |
| font-weight: 500; | |
| padding: var(--spacing-sm) var(--spacing-md); | |
| border-radius: var(--radius-md); | |
| position: relative; | |
| overflow: hidden; | |
| transition: var(--transition-normal); | |
| } | |
| .nav-link::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: var(--color-primary-gradient); | |
| transition: var(--transition-normal); | |
| z-index: -1; | |
| } | |
| .nav-link:hover::before, | |
| .nav-link.active::before { | |
| left: 0; | |
| } | |
| .nav-link:hover, | |
| .nav-link.active { | |
| color: var(--color-white); | |
| transform: translateY(-2px); | |
| } | |
| /* Mobile Menu Toggle */ | |
| .mobile-toggle { | |
| display: none; | |
| flex-direction: column; | |
| cursor: pointer; | |
| padding: var(--spacing-sm); | |
| gap: 4px; | |
| } | |
| .mobile-toggle span { | |
| width: 25px; | |
| height: 3px; | |
| background: var(--color-primary-gradient); | |
| border-radius: var(--radius-sm); | |
| transition: var(--transition-normal); | |
| } | |
| .mobile-toggle.active span:nth-child(1) { | |
| transform: rotate(45deg) translate(5px, 5px); | |
| } | |
| .mobile-toggle.active span:nth-child(2) { | |
| opacity: 0; | |
| } | |
| .mobile-toggle.active span:nth-child(3) { | |
| transform: rotate(-45deg) translate(7px, -6px); | |
| } | |
| /* ========================================================================== | |
| HERO SECTION | |
| ========================================================================== */ | |
| .hero { | |
| height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| background: linear-gradient(135deg, rgba(10, 10, 10, 0.7) 0%, rgba(26, 26, 26, 0.5) 100%), | |
| url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="gym-pattern" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="2" fill="%23ff6b35" opacity="0.1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23gym-pattern)"/></svg>'); | |
| background-size: cover; | |
| background-position: center; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: var(--bg-gradient-hero); | |
| z-index: 1; | |
| } | |
| .hero-content { | |
| position: relative; | |
| z-index: 2; | |
| text-align: center; | |
| max-width: 800px; | |
| padding: 0 var(--spacing-md); | |
| } | |
| .hero-title { | |
| font-size: var(--font-size-6xl); | |
| font-weight: 900; | |
| margin-bottom: var(--spacing-lg); | |
| background: linear-gradient(135deg, var(--color-white) 0%, var(--color-primary) 50%, var(--color-secondary) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| animation: fadeInUp 1s ease-out; | |
| } | |
| .hero-subtitle { | |
| font-size: var(--font-size-xl); | |
| color: var(--color-gray-light); | |
| margin-bottom: var(--spacing-2xl); | |
| animation: fadeInUp 1s ease-out 0.2s both; | |
| } | |
| .hero-buttons { | |
| display: flex; | |
| gap: var(--spacing-lg); | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| animation: fadeInUp 1s ease-out 0.4s both; | |
| } | |
| /* Floating Elements */ | |
| .hero-float-1, | |
| .hero-float-2, | |
| .hero-float-3 { | |
| position: absolute; | |
| background: var(--glass-bg); | |
| border: 1px solid var(--glass-border); | |
| backdrop-filter: var(--glass-backdrop); | |
| border-radius: var(--radius-xl); | |
| padding: var(--spacing-md); | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .hero-float-1 { | |
| top: 20%; | |
| left: 10%; | |
| animation-delay: 0s; | |
| } | |
| .hero-float-2 { | |
| top: 60%; | |
| right: 10%; | |
| animation-delay: 2s; | |
| } | |
| .hero-float-3 { | |
| bottom: 20%; | |
| left: 15%; | |
| animation-delay: 4s; | |
| } | |
| /* ========================================================================== | |
| BUTTONS | |
| ========================================================================== */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--spacing-sm); | |
| padding: var(--spacing-md) var(--spacing-xl); | |
| font-size: var(--font-size-base); | |
| font-weight: 600; | |
| text-decoration: none; | |
| border-radius: var(--radius-lg); | |
| border: 2px solid transparent; | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| transition: var(--transition-normal); | |
| z-index: 1; | |
| } | |
| .btn::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); | |
| transition: var(--transition-slow); | |
| z-index: -1; | |
| } | |
| .btn:hover::before { | |
| left: 100%; | |
| } | |
| .btn-primary { | |
| background: var(--color-primary-gradient); | |
| color: var(--color-white); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 40px rgba(255, 107, 53, 0.5); | |
| color: var(--color-white); | |
| } | |
| .btn-secondary { | |
| background: transparent; | |
| color: var(--color-white); | |
| border-color: var(--color-secondary); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--color-secondary-gradient); | |
| color: var(--color-white); | |
| transform: translateY(-3px); | |
| box-shadow: var(--shadow-glow-secondary); | |
| } | |
| .btn-outline { | |
| background: transparent; | |
| color: var(--color-primary); | |
| border-color: var(--color-primary); | |
| } | |
| .btn-outline:hover { | |
| background: var(--color-primary-gradient); | |
| color: var(--color-white); | |
| transform: translateY(-3px); | |
| } | |
| .btn-lg { | |
| padding: var(--spacing-lg) var(--spacing-2xl); | |
| font-size: var(--font-size-lg); | |
| } | |
| .btn-sm { | |
| padding: var(--spacing-sm) var(--spacing-md); | |
| font-size: var(--font-size-sm); | |
| } | |
| /* ========================================================================== | |
| CARDS & GLASSMORPHISM | |
| ========================================================================== */ | |
| .card { | |
| background: var(--glass-bg); | |
| border: 1px solid var(--glass-border); | |
| backdrop-filter: var(--glass-backdrop); | |
| border-radius: var(--radius-xl); | |
| padding: var(--spacing-xl); | |
| box-shadow: var(--shadow-medium); | |
| transition: var(--transition-normal); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 4px; | |
| background: var(--color-primary-gradient); | |
| transform: translateX(-100%); | |
| transition: var(--transition-normal); | |
| } | |
| .card:hover::before { | |
| transform: translateX(0); | |
| } | |
| .card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: var(--shadow-large); | |
| border-color: rgba(255, 107, 53, 0.3); | |
| } | |
| .card-header { | |