Spaces:
Running
Running
| @tailwind base; | |
| @tailwind components; | |
| @tailwind utilities; | |
| :root { | |
| --theme-primary: #ff0000; | |
| --theme-secondary: #dc2626; | |
| --theme-accent: #ff6666; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: "Orbitron", monospace; | |
| background: #000000; | |
| color: #ffffff; | |
| overflow-x: hidden; | |
| line-height: 1.6; | |
| } | |
| .app { | |
| min-height: 100vh; | |
| position: relative; | |
| } | |
| /* Theme utility classes */ | |
| .theme-primary-text { | |
| color: var(--theme-primary); | |
| } | |
| .theme-secondary-text { | |
| color: var(--theme-secondary); | |
| } | |
| .theme-accent-text { | |
| color: var(--theme-accent); | |
| } | |
| .theme-primary-bg { | |
| background-color: var(--theme-primary); | |
| } | |
| .theme-secondary-bg { | |
| background-color: var(--theme-secondary); | |
| } | |
| .theme-accent-bg { | |
| background-color: var(--theme-accent); | |
| } | |
| /* Background Effects */ | |
| .background-effects { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| .red-particles { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: radial-gradient(3px 3px at 20px 30px, var(--theme-primary), transparent), | |
| radial-gradient(3px 3px at 40px 70px, var(--theme-secondary), transparent), | |
| radial-gradient(2px 2px at 90px 40px, var(--theme-accent), transparent), | |
| radial-gradient(2px 2px at 130px 80px, var(--theme-primary), transparent), | |
| radial-gradient(3px 3px at 160px 30px, var(--theme-secondary), transparent), | |
| radial-gradient(1px 1px at 200px 100px, var(--theme-accent), transparent), | |
| radial-gradient(2px 2px at 250px 150px, var(--theme-primary), transparent); | |
| background-repeat: repeat; | |
| background-size: 300px 400px; | |
| animation: particles-fall 20s linear infinite; | |
| opacity: 0.6; | |
| } | |
| .gradient-orb { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(150px); | |
| opacity: 0.2; | |
| } | |
| .orb-1 { | |
| width: 600px; | |
| height: 600px; | |
| background: radial-gradient(circle, var(--theme-primary) 0%, var(--theme-secondary) 50%, transparent 70%); | |
| top: -10%; | |
| left: -20%; | |
| animation: float 25s ease-in-out infinite; | |
| } | |
| .orb-2 { | |
| width: 500px; | |
| height: 500px; | |
| background: radial-gradient(circle, var(--theme-secondary) 0%, var(--theme-primary) 50%, transparent 70%); | |
| bottom: -10%; | |
| right: -20%; | |
| animation: float 30s ease-in-out infinite reverse; | |
| } | |
| @keyframes particles-fall { | |
| 0% { | |
| transform: translateY(-100px); | |
| } | |
| 100% { | |
| transform: translateY(calc(100vh + 100px)); | |
| } | |
| } | |
| @keyframes float { | |
| 0%, | |
| 100% { | |
| transform: translateY(0px) translateX(0px) rotate(0deg); | |
| } | |
| 33% { | |
| transform: translateY(-50px) translateX(40px) rotate(120deg); | |
| } | |
| 66% { | |
| transform: translateY(40px) translateX(-40px) rotate(240deg); | |
| } | |
| } | |
| /* Navigation */ | |
| .navbar { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 100; | |
| background: rgba(0, 0, 0, 0.95); | |
| backdrop-filter: blur(20px); | |
| border-bottom: 3px solid var(--theme-primary); | |
| box-shadow: 0 5px 30px rgba(255, 0, 0, 0.4); | |
| } | |
| .nav-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| height: 80px; | |
| } | |
| .nav-logo { | |
| font-size: 2.5rem; | |
| font-weight: 900; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .logo-text { | |
| background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent), var(--theme-primary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| text-shadow: 0 0 40px var(--theme-primary); | |
| filter: drop-shadow(0 0 20px var(--theme-primary)); | |
| } | |
| .nav-logo:hover { | |
| transform: scale(1.1); | |
| filter: drop-shadow(0 0 30px var(--theme-primary)); | |
| } | |
| .nav-buttons { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .theme-button { | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 2px solid var(--theme-accent); | |
| color: var(--theme-accent); | |
| padding: 0.5rem; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| backdrop-filter: blur(10px); | |
| } | |
| .theme-button:hover { | |
| background: rgba(255, 255, 255, 0.15); | |
| box-shadow: 0 0 15px var(--theme-accent); | |
| transform: scale(1.05); | |
| } | |
| .discord-button { | |
| background: rgba(114, 137, 218, 0.2); | |
| border: 2px solid #7289da; | |
| color: #7289da; | |
| padding: 0.5rem; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| backdrop-filter: blur(10px); | |
| } | |
| .discord-button:hover { | |
| background: rgba(114, 137, 218, 0.3); | |
| box-shadow: 0 0 15px rgba(114, 137, 218, 0.4); | |
| transform: scale(1.05); | |
| } | |
| .menu-button { | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 2px solid var(--theme-primary); | |
| color: var(--theme-primary); | |
| padding: 0.5rem; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| backdrop-filter: blur(10px); | |
| } | |
| .menu-button:hover { | |
| background: rgba(255, 255, 255, 0.15); | |
| box-shadow: 0 0 15px var(--theme-primary); | |
| transform: scale(1.02); | |
| } | |
| /* Theme Menu */ | |
| .theme-overlay { | |
| position: fixed; | |
| top: 80px; | |
| right: 0; | |
| width: 350px; | |
| height: calc(100vh - 80px); | |
| background: rgba(0, 0, 0, 0.95); | |
| backdrop-filter: blur(15px); | |
| z-index: 200; | |
| border-left: 2px solid var(--theme-primary); | |
| animation: slideIn 0.3s ease; | |
| overflow-y: auto; | |
| } | |
| .theme-content { | |
| padding: 1.5rem; | |
| height: 100%; | |
| } | |
| .theme-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 2rem; | |
| padding-bottom: 1rem; | |
| border-bottom: 2px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .theme-title { | |
| font-size: 1.5rem; | |
| font-weight: 800; | |
| background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .theme-close { | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 2px solid var(--theme-primary); | |
| color: var(--theme-primary); | |
| padding: 0.5rem; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .theme-close:hover { | |
| background: rgba(255, 255, 255, 0.15); | |
| box-shadow: 0 0 15px var(--theme-primary); | |
| transform: scale(1.05); | |
| } | |
| .theme-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 1rem; | |
| } | |
| .theme-option { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 2px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 12px; | |
| padding: 1rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| backdrop-filter: blur(10px); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.8rem; | |
| } | |
| .theme-option:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-color: rgba(255, 255, 255, 0.3); | |
| transform: translateY(-2px); | |
| } | |
| .theme-option-active { | |
| border-color: var(--theme-primary); | |
| background: rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); | |
| } | |
| .theme-preview { | |
| display: flex; | |
| gap: 0.3rem; | |
| align-items: center; | |
| } | |
| .theme-preview-primary, | |
| .theme-preview-secondary, | |
| .theme-preview-accent { | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| border: 2px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .theme-preview-primary { | |
| background: var(--preview-primary); | |
| } | |
| .theme-preview-secondary { | |
| background: var(--preview-secondary); | |
| } | |
| .theme-preview-accent { | |
| background: var(--preview-accent); | |
| } | |
| .theme-name { | |
| color: #ffffff; | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| font-family: "Orbitron", monospace; | |
| } | |
| /* Menu Overlay */ | |
| .menu-overlay { | |
| position: fixed; | |
| top: 80px; | |
| right: 0; | |
| width: 300px; | |
| height: calc(100vh - 80px); | |
| background: rgba(0, 0, 0, 0.95); | |
| backdrop-filter: blur(15px); | |
| z-index: 200; | |
| border-left: 2px solid var(--theme-primary); | |
| animation: slideIn 0.3s ease; | |
| overflow-y: auto; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| transform: translateX(100%); | |
| } | |
| to { | |
| transform: translateX(0); | |
| } | |
| } | |
| .menu-content { | |
| padding: 1.5rem; | |
| height: 100%; | |
| } | |
| .menu-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 2rem; | |
| padding-bottom: 1rem; | |
| border-bottom: 2px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .menu-title { | |
| font-size: 1.5rem; | |
| font-weight: 800; | |
| background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .menu-close { | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 2px solid var(--theme-primary); | |
| color: var(--theme-primary); | |
| padding: 0.5rem; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .menu-close:hover { | |
| background: rgba(255, 255, 255, 0.15); | |
| box-shadow: 0 0 15px var(--theme-primary); | |
| transform: scale(1.05); | |
| } | |
| .menu-items { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .menu-item { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 2px solid rgba(255, 255, 255, 0.1); | |
| color: #ffffff; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| padding: 1rem; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| backdrop-filter: blur(10px); | |
| font-family: "Orbitron", monospace; | |
| text-align: center; | |
| } | |
| .menu-item:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-color: var(--theme-primary); | |
| box-shadow: 0 5px 20px rgba(255, 255, 255, 0.1); | |
| transform: translateY(-2px); | |
| } | |
| .menu-item-active { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-color: var(--theme-primary); | |
| box-shadow: 0 5px 20px rgba(255, 255, 255, 0.2); | |
| } | |
| /* Main Content */ | |
| .main-content { | |
| position: relative; | |
| z-index: 10; | |
| padding-top: 80px; | |
| min-height: calc(100vh - 80px); | |
| } | |
| .page-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 4rem 2rem; | |
| } | |
| .page-header { | |
| text-align: center; | |
| margin-bottom: 4rem; | |
| } | |
| .page-title { | |
| font-size: clamp(2.5rem, 5vw, 4rem); | |
| font-weight: 900; | |
| margin-bottom: 1rem; | |
| background: linear-gradient(135deg, #ffffff, var(--theme-accent), #ffffff); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| text-shadow: 0 0 40px rgba(255, 255, 255, 0.5); | |
| filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3)); | |
| } | |
| /* Download Page Styles */ | |
| .download-center { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 50vh; | |
| gap: 2rem; | |
| } | |
| .platform-dropdown { | |
| position: relative; | |
| width: 300px; | |
| } | |
| .dropdown-toggle { | |
| width: 100%; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 2px solid rgba(255, 255, 255, 0.2); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| backdrop-filter: blur(10px); | |
| } | |
| .dropdown-toggle:hover { | |
| border-color: var(--theme-primary); | |
| background: rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 5px 20px rgba(255, 255, 255, 0.1); | |
| } | |
| .dropdown-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| width: 100%; | |
| } | |
| .dropdown-text { | |
| color: #ffffff; | |
| font-weight: 600; | |
| font-size: 1.1rem; | |
| font-family: "Orbitron", monospace; | |
| } | |
| .dropdown-arrow { | |
| color: var(--theme-primary); | |
| font-size: 1.2rem; | |
| transition: transform 0.3s ease; | |
| } | |
| .dropdown-arrow-up { | |
| transform: rotate(180deg); | |
| } | |
| .dropdown-menu { | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| right: 0; | |
| background: rgba(0, 0, 0, 0.95); | |
| border: 2px solid rgba(255, 255, 255, 0.2); | |
| border-radius: 12px; | |
| margin-top: 0.5rem; | |
| backdrop-filter: blur(15px); | |
| z-index: 50; | |
| animation: dropdownSlide 0.3s ease; | |
| } | |
| @keyframes dropdownSlide { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .dropdown-item { | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| padding: 1rem 1.5rem; | |
| background: transparent; | |
| border: none; | |
| color: #ffffff; | |
| font-weight: 600; | |
| font-family: "Orbitron", monospace; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .dropdown-item:last-child { | |
| border-bottom: none; | |
| border-radius: 0 0 10px 10px; | |
| } | |
| .dropdown-item:first-child { | |
| border-radius: 10px 10px 0 0; | |
| } | |
| .dropdown-item:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| color: var(--theme-accent); | |
| } | |
| .dropdown-icon { | |
| width: 1.5rem; | |
| height: 1.5rem; | |
| color: var(--theme-primary); | |
| } | |
| .main-download-button { | |
| background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)); | |
| border: none; | |
| color: white; | |
| font-weight: 800; | |
| font-size: 1.2rem; | |
| padding: 1.5rem 3rem; | |
| border-radius: 12px; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2); | |
| font-family: "Orbitron", monospace; | |
| } | |
| .main-download-button:hover:not(:disabled) { | |
| background: linear-gradient(135deg, var(--theme-secondary), var(--theme-primary)); | |
| transform: translateY(-3px); | |
| box-shadow: 0 15px 40px rgba(255, 255, 255, 0.3); | |
| } | |
| .main-download-button:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| transform: none; | |
| box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1); | |
| } | |
| /* Script Page - Inline Layout */ | |
| .scripts-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| } | |
| .script-item { | |
| display: flex; | |
| align-items: center; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 2px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 16px; | |
| padding: 1.5rem; | |
| transition: all 0.3s ease; | |
| backdrop-filter: blur(10px); | |
| position: relative; | |
| overflow: hidden; | |
| gap: 2rem; | |
| } | |
| .script-item::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent); | |
| transition: left 0.5s ease; | |
| z-index: 1; | |
| } | |
| .script-item:hover::before { | |
| left: 100%; | |
| } | |
| .script-item:hover { | |
| transform: translateY(-3px); | |
| border-color: var(--theme-primary); | |
| box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1); | |
| } | |
| .script-disabled { | |
| opacity: 0.6; | |
| filter: grayscale(0.5); | |
| } | |
| .script-image-small { | |
| position: relative; | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| flex-shrink: 0; | |
| z-index: 2; | |
| } | |
| .script-image-small img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.3s ease; | |
| } | |
| .script-item:hover .script-image-small img { | |
| transform: scale(1.1); | |
| } | |
| .coming-soon-badge { | |
| position: absolute; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.8); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| backdrop-filter: blur(5px); | |
| z-index: 3; | |
| } | |
| .coming-soon-badge span { | |
| color: var(--theme-accent); | |
| font-weight: 700; | |
| font-size: 0.8rem; | |
| text-shadow: 0 0 10px var(--theme-accent); | |
| } | |
| .script-info { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| z-index: 2; | |
| } | |
| .script-title { | |
| font-size: 1.4rem; | |
| font-weight: 700; | |
| color: #ffffff; | |
| margin: 0; | |
| text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); | |
| } | |
| .script-status-available { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .script-status-unavailable { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .script-status-unavailable span { | |
| color: #888888; | |
| font-style: italic; | |
| font-weight: 600; | |
| } | |
| .keyless-indicator { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| color: #fbbf24; | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| text-shadow: 0 0 10px rgba(251, 191, 36, 0.5); | |
| } | |
| .script-actions-inline { | |
| display: flex; | |
| gap: 1rem; | |
| align-items: center; | |
| z-index: 2; | |
| } | |
| .copy-btn-small { | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 2px solid var(--theme-primary); | |
| color: var(--theme-primary); | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| padding: 0.6rem 1.2rem; | |
| border-radius: 8px; | |
| font-size: 0.9rem; | |
| } | |
| .copy-btn-small:hover { | |
| background: rgba(255, 255, 255, 0.15); | |
| border-color: var(--theme-accent); | |
| box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1); | |
| transform: translateY(-2px); | |
| } | |
| .development-btn-small { | |
| background: rgba(128, 128, 128, 0.2); | |
| border: 2px solid rgba(128, 128, 128, 0.5); | |
| color: #888888; | |
| font-weight: 600; | |
| padding: 0.6rem 1.2rem; | |
| border-radius: 8px; | |
| font-size: 0.9rem; | |
| cursor: not-allowed; | |
| } | |
| /* GetKey Page */ | |
| .steps-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | |
| gap: 2.5rem; | |
| margin-bottom: 4rem; | |
| } | |
| .step-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 2px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 16px; | |
| padding: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 1.5rem; | |
| transition: all 0.3s ease; | |
| backdrop-filter: blur(10px); | |
| } | |
| .step-card:hover { | |
| transform: translateY(-5px); | |
| border-color: var(--theme-primary); | |
| box-shadow: 0 10px 25px rgba(255, 255, 255, 0.1); | |
| } | |
| .step-number { | |
| width: 60px; | |
| height: 60px; | |
| background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| font-weight: 900; | |
| color: white; | |
| box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2); | |
| animation: pulse 2s infinite; | |
| text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); | |
| } | |
| .step-content h3 { | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| margin-bottom: 0.5rem; | |
| color: #ffffff; | |
| } | |
| .step-content p { | |
| color: #cccccc; | |
| line-height: 1.6; | |
| font-size: 0.9rem; | |
| } | |
| .key-info { | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .info-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 3px solid rgba(255, 193, 7, 0.6); | |
| border-radius: 20px; | |
| padding: 3rem; | |
| text-align: center; | |
| max-width: 600px; | |
| backdrop-filter: blur(15px); | |
| } | |
| .info-card h3 { | |
| font-size: 1.8rem; | |
| font-weight: 800; | |
| margin: 1.5rem 0; | |
| color: #fbbf24; | |
| text-shadow: 0 0 15px rgba(251, 191, 36, 0.5); | |
| } | |
| .info-card p { | |
| color: #cccccc; | |
| line-height: 1.8; | |
| font-size: 1.1rem; | |
| } | |
| /* Premiums Page */ | |
| .premium-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); | |
| gap: 2.5rem; | |
| max-width: 900px; | |
| margin: 0 auto; | |
| } | |
| .premium-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 2px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| backdrop-filter: blur(10px); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .premium-card::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent); | |
| transition: left 0.5s ease; | |
| } | |
| .premium-card:hover::before { | |
| left: 100%; | |
| } | |
| .premium-card:hover { | |
| transform: translateY(-8px); | |
| border-color: var(--theme-primary); | |
| box-shadow: 0 15px 30px rgba(255, 255, 255, 0.1); | |
| } | |
| .premium-featured { | |
| border-color: var(--theme-primary); | |
| background: rgba(255, 255, 255, 0.1); | |
| transform: scale(1.05); | |
| box-shadow: 0 25px 50px rgba(255, 255, 255, 0.2); | |
| } | |
| .premium-tier { | |
| font-size: 1.5rem; | |
| font-weight: 800; | |
| margin-bottom: 1rem; | |
| color: #ffffff; | |
| } | |
| .premium-price { | |
| font-size: 2.5rem; | |
| font-weight: 900; | |
| color: var(--theme-primary); | |
| text-shadow: 0 0 20px var(--theme-primary); | |
| } | |
| .premium-features { | |
| margin-bottom: 2.5rem; | |
| text-align: left; | |
| } | |
| .feature-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| margin-bottom: 1.2rem; | |
| color: #ffffff; | |
| font-weight: 600; | |
| font-size: 1rem; | |
| } | |
| .premium-button { | |
| width: 100%; | |
| font-weight: 800; | |
| font-size: 1.2rem; | |
| padding: 1.5rem 2rem; | |
| border-radius: 12px; | |
| transition: all 0.3s ease; | |
| } | |
| .premium-upgrade { | |
| background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)); | |
| border: none; | |
| color: white; | |
| box-shadow: 0 15px 40px rgba(255, 255, 255, 0.2); | |
| text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); | |
| } | |
| .premium-upgrade:hover { | |
| background: linear-gradient(135deg, var(--theme-secondary), var(--theme-primary)); | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 50px rgba(255, 255, 255, 0.3); | |
| } | |
| /* Footer */ | |
| .footer { | |
| background: rgba(0, 0, 0, 0.95); | |
| border-top: 3px solid var(--theme-primary); | |
| padding: 3rem 0; | |
| margin-top: 5rem; | |
| position: relative; | |
| z-index: 10; | |
| } | |
| .footer-content { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 1.5rem; | |
| } | |
| .footer-left p { | |
| color: #cccccc; | |
| font-weight: 600; | |
| font-size: 1rem; | |
| } | |
| .footer-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| } | |
| .footer-right p { | |
| color: #cccccc; | |
| font-weight: 600; | |
| font-size: 1rem; | |
| } | |
| .discord-link { | |
| display: flex; | |
| align-items: center; | |
| color: var(--theme-primary); | |
| text-decoration: none; | |
| font-weight: 700; | |
| transition: all 0.3s ease; | |
| padding: 0.5rem 1rem; | |
| border-radius: 8px; | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .discord-link:hover { | |
| color: var(--theme-accent); | |
| text-shadow: 0 0 15px var(--theme-accent); | |
| background: rgba(255, 255, 255, 0.1); | |
| border-color: var(--theme-primary); | |
| } | |
| /* Mobile Responsive */ | |
| @media (max-width: 768px) { | |
| .nav-container { | |
| padding: 0 1rem; | |
| } | |
| .nav-logo { | |
| font-size: 2rem; | |
| } | |
| .nav-buttons { | |
| gap: 0.5rem; | |
| } | |
| .discord-button, | |
| .theme-button, | |
| .menu-button { | |
| padding: 0.4rem; | |
| } | |
| .theme-overlay { | |
| width: 280px; | |
| } | |
| .theme-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .menu-overlay { | |
| width: 250px; | |
| } | |
| .page-container { | |
| padding: 2rem 1rem; | |
| } | |
| .script-item { | |
| flex-direction: column; | |
| text-align: center; | |
| gap: 1rem; | |
| padding: 1.5rem; | |
| } | |
| .script-image-small { | |
| width: 60px; | |
| height: 60px; | |
| } | |
| .script-info { | |
| align-items: center; | |
| } | |
| .script-title { | |
| font-size: 1.2rem; | |
| } | |
| .script-actions-inline { | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| gap: 0.8rem; | |
| } | |
| .copy-btn-small, | |
| .development-btn-small { | |
| padding: 0.5rem 1rem; | |
| font-size: 0.8rem; | |
| } | |
| .steps-container { | |
| grid-template-columns: 1fr; | |
| gap: 2rem; | |
| } | |
| .step-card { | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| .premium-grid { | |
| grid-template-columns: 1fr; | |
| gap: 2rem; | |
| } | |
| .premium-featured { | |
| transform: none; | |
| } | |
| .footer-content { | |
| flex-direction: column; | |
| text-align: center; | |
| gap: 1.5rem; | |
| } | |
| .footer-right { | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .page-title { | |
| font-size: 2rem; | |
| } | |
| .script-item { | |
| padding: 1rem; | |
| } | |
| .script-image-small { | |
| width: 50px; | |
| height: 50px; | |
| } | |
| .script-title { | |
| font-size: 1rem; | |
| } | |
| .script-actions-inline { | |
| flex-direction: column; | |
| width: 100%; | |
| } | |
| .copy-btn-small, | |
| .development-btn-small { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| .theme-overlay { | |
| width: 250px; | |
| } | |
| .menu-overlay { | |
| width: 200px; | |
| } | |
| .platform-dropdown { | |
| width: 250px; | |
| } | |
| .dropdown-toggle { | |
| padding: 1rem; | |
| } | |
| .dropdown-text { | |
| font-size: 0.9rem; | |
| } | |
| .main-download-button { | |
| padding: 1rem 2rem; | |
| font-size: 1rem; | |
| } | |
| } | |