Spaces:
Running
Running
| /* Subscription Portal Styles */ | |
| .subscription-portal { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| background-color: #0B0B0F; | |
| color: #ffffff; | |
| min-height: 100vh; | |
| position: relative; | |
| } | |
| /* Loading Screen */ | |
| .subscription-portal.loading { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| } | |
| .loading-logo { | |
| width: 150px; | |
| height: 150px; | |
| margin-bottom: 20px; | |
| position: relative; | |
| } | |
| .loading-logo img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: contain; | |
| } | |
| .loading-pulse { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| border-radius: 50%; | |
| border: 2px solid #00E0FF; | |
| animation: pulse 1.5s infinite ease-in-out; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(0.95); | |
| opacity: 1; | |
| } | |
| 70% { | |
| transform: scale(1.2); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: scale(0.95); | |
| opacity: 0; | |
| } | |
| } | |
| /* Header */ | |
| .portal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 20px; | |
| background-color: rgba(20, 20, 30, 0.8); | |
| backdrop-filter: blur(10px); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .portal-title { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .portal-title h1 { | |
| margin: 0; | |
| font-size: 28px; | |
| font-weight: 700; | |
| background: linear-gradient(90deg, #00E0FF, #35F2DB); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| letter-spacing: 1px; | |
| } | |
| .portal-subtitle { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| } | |
| .user-profile { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .profile-avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| overflow: hidden; | |
| border: 2px solid #00E0FF; | |
| } | |
| .profile-avatar img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .profile-info { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .profile-name { | |
| font-size: 14px; | |
| font-weight: 600; | |
| } | |
| .profile-plan { | |
| font-size: 12px; | |
| opacity: 0.7; | |
| } | |
| /* Navigation */ | |
| .portal-navigation { | |
| display: flex; | |
| gap: 2px; | |
| background-color: rgba(20, 20, 30, 0.5); | |
| padding: 0 20px; | |
| overflow-x: auto; | |
| scrollbar-width: none; | |
| } | |
| .portal-navigation::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .nav-button { | |
| padding: 16px 20px; | |
| background: transparent; | |
| border: none; | |
| color: white; | |
| font-size: 16px; | |
| cursor: pointer; | |
| position: relative; | |
| white-space: nowrap; | |
| } | |
| .nav-button.active { | |
| color: #00E0FF; | |
| } | |
| .nav-button.active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: linear-gradient(90deg, #00E0FF, #35F2DB); | |
| border-radius: 3px 3px 0 0; | |
| } | |
| /* Main Content */ | |
| .portal-content { | |
| padding: 20px; | |
| min-height: calc(100vh - 200px); | |
| } | |
| /* Plans Tab */ | |
| .plans-tab { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 30px; | |
| } | |
| .current-plan-banner { | |
| background: linear-gradient(135deg, rgba(0, 224, 255, 0.1), rgba(53, 242, 219, 0.05)); | |
| border-radius: 16px; | |
| padding: 20px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border: 1px solid rgba(0, 224, 255, 0.2); | |
| flex-wrap: wrap; | |
| gap: 20px; | |
| } | |
| .banner-content h3 { | |
| margin: 0 0 8px 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .banner-content p { | |
| margin: 0; | |
| opacity: 0.7; | |
| font-size: 14px; | |
| } | |
| .banner-button { | |
| background-color: rgba(0, 224, 255, 0.2); | |
| border: 1px solid rgba(0, 224, 255, 0.3); | |
| border-radius: 8px; | |
| padding: 10px 20px; | |
| color: #00E0FF; | |
| font-size: 14px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .banner-button:hover { | |
| background-color: rgba(0, 224, 255, 0.3); | |
| } | |
| /* Billing Toggle */ | |
| .billing-toggle { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 15px; | |
| margin-bottom: 20px; | |
| } | |
| .billing-option { | |
| font-size: 16px; | |
| opacity: 0.7; | |
| position: relative; | |
| } | |
| .billing-option.active { | |
| opacity: 1; | |
| font-weight: 600; | |
| color: #00E0FF; | |
| } | |
| .discount-badge { | |
| position: absolute; | |
| top: -15px; | |
| right: -30px; | |
| background-color: rgba(255, 193, 7, 0.2); | |
| color: #FFC107; | |
| font-size: 10px; | |
| padding: 2px 6px; | |
| border-radius: 10px; | |
| font-weight: 600; | |
| } | |
| /* Toggle Switch */ | |
| .toggle-switch { | |
| position: relative; | |
| display: inline-block; | |
| width: 50px; | |
| height: 24px; | |
| } | |
| .toggle-switch input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .toggle-slider { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| transition: .4s; | |
| border-radius: 24px; | |
| } | |
| .toggle-slider:before { | |
| position: absolute; | |
| content: ""; | |
| height: 16px; | |
| width: 16px; | |
| left: 4px; | |
| bottom: 4px; | |
| background-color: white; | |
| transition: .4s; | |
| border-radius: 50%; | |
| } | |
| input:checked + .toggle-slider { | |
| background-color: rgba(0, 224, 255, 0.5); | |
| } | |
| input:checked + .toggle-slider:before { | |
| transform: translateX(26px); | |
| background-color: #00E0FF; | |
| } | |
| /* Subscription Tiers */ | |
| .subscription-tiers { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| } | |
| .tier-card { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| } | |
| .tier-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); | |
| } | |
| .tier-card.selected { | |
| border-color: #00E0FF; | |
| box-shadow: 0 0 15px rgba(0, 224, 255, 0.3); | |
| } | |
| .tier-card.popular { | |
| border-color: #FFC107; | |
| } | |
| .popular-badge { | |
| position: absolute; | |
| top: 15px; | |
| right: 15px; | |
| background-color: rgba(255, 193, 7, 0.2); | |
| color: #FFC107; | |
| font-size: 12px; | |
| padding: 4px 8px; | |
| border-radius: 20px; | |
| font-weight: 600; | |
| } | |
| .tier-header { | |
| padding: 20px; | |
| text-align: center; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .tier-name { | |
| margin: 0 0 10px 0; | |
| font-size: 24px; | |
| font-weight: 700; | |
| } | |
| .tier-price { | |
| display: flex; | |
| justify-content: center; | |
| align-items: baseline; | |
| margin-bottom: 5px; | |
| } | |
| .price-amount { | |
| font-size: 36px; | |
| font-weight: 700; | |
| background: linear-gradient(90deg, #00E0FF, #35F2DB); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .price-period { | |
| font-size: 16px; | |
| opacity: 0.7; | |
| margin-left: 5px; | |
| } | |
| .annual-savings { | |
| font-size: 14px; | |
| color: #FFC107; | |
| margin-top: 5px; | |
| } | |
| .tier-description { | |
| padding: 20px; | |
| text-align: center; | |
| font-size: 14px; | |
| opacity: 0.8; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .tier-features { | |
| padding: 20px; | |
| list-style-type: none; | |
| margin: 0; | |
| } | |
| .tier-features li { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 12px; | |
| font-size: 14px; | |
| } | |
| .tier-features li:last-child { | |
| margin-bottom: 0; | |
| } | |
| .feature-icon { | |
| margin-right: 10px; | |
| font-size: 16px; | |
| min-width: 20px; | |
| text-align: center; | |
| } | |
| .tier-features li.included .feature-icon { | |
| color: #35F2DB; | |
| } | |
| .tier-features li.excluded { | |
| opacity: 0.5; | |
| } | |
| .feature-details { | |
| font-size: 12px; | |
| opacity: 0.7; | |
| } | |
| .tier-action { | |
| padding: 20px; | |
| text-align: center; | |
| } | |
| .select-plan-button, .current-plan-button { | |
| width: 100%; | |
| padding: 12px; | |
| border-radius: 8px; | |
| font-size: 16px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| border: none; | |
| } | |
| .select-plan-button { | |
| color: white; | |
| } | |
| .select-plan-button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); | |
| } | |
| .current-plan-button { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| color: white; | |
| cursor: default; | |
| } | |
| /* Add-Ons Section */ | |
| .add-ons-section { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| margin-bottom: 30px; | |
| } | |
| .add-ons-section h3 { | |
| margin: 0 0 20px 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .add-ons-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 15px; | |
| } | |
| .add-on-card { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 15px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .add-on-card:hover { | |
| background-color: rgba(0, 224, 255, 0.05); | |
| } | |
| .add-on-card.selected { | |
| border-color: #00E0FF; | |
| background-color: rgba(0, 224, 255, 0.1); | |
| } | |
| .add-on-checkbox { | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 4px; | |
| border: 2px solid rgba(255, 255, 255, 0.3); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| flex-shrink: 0; | |
| } | |
| .add-on-card.selected .add-on-checkbox { | |
| border-color: #00E0FF; | |
| background-color: rgba(0, 224, 255, 0.2); | |
| } | |
| .add-on-card.selected .checkbox-inner { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 2px; | |
| background-color: #00E0FF; | |
| } | |
| .add-on-details { | |
| flex: 1; | |
| } | |
| .add-on-name { | |
| margin: 0 0 5px 0; | |
| font-size: 16px; | |
| font-weight: 600; | |
| } | |
| .add-on-description { | |
| margin: 0; | |
| font-size: 12px; | |
| opacity: 0.7; | |
| } | |
| .add-on-price { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: #00E0FF; | |
| } | |
| /* Subscription Summary */ | |
| .subscription-summary { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .subscription-summary h3 { | |
| margin: 0 0 20px 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .summary-details { | |
| margin-bottom: 20px; | |
| } | |
| .summary-item { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 10px 0; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .summary-total { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 15px 0; | |
| font-weight: 600; | |
| font-size: 18px; | |
| margin-top: 10px; | |
| } | |
| .total-price { | |
| color: #00E0FF; | |
| } | |
| .summary-action { | |
| text-align: center; | |
| margin-top: 20px; | |
| } | |
| .subscribe-button { | |
| background: linear-gradient(90deg, #00E0FF, #35F2DB); | |
| border: none; | |
| border-radius: 8px; | |
| padding: 12px 30px; | |
| color: #0B0B0F; | |
| font-size: 16px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .subscribe-button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(0, 224, 255, 0.3); | |
| } | |
| .subscribe-button:disabled { | |
| background: rgba(255, 255, 255, 0.1); | |
| color: rgba(255, 255, 255, 0.5); | |
| cursor: not-allowed; | |
| transform: none; | |
| box-shadow: none; | |
| } | |
| /* Confirmation Modal */ | |
| .confirmation-modal { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: rgba(0, 0, 0, 0.8); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 1000; | |
| backdrop-filter: blur(5px); | |
| } | |
| .modal-content { | |
| background-color: #0B0B0F; | |
| border-radius: 16px; | |
| padding: 30px; | |
| border: 1px solid rgba(0, 224, 255, 0.3); | |
| width: 90%; | |
| max-width: 500px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); | |
| animation: modalFadeIn 0.3s ease; | |
| } | |
| @keyframes modalFadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .modal-content h3 { | |
| margin: 0 0 20px 0; | |
| font-size: 24px; | |
| font-weight: 600; | |
| text-align: center; | |
| } | |
| .confirmation-details { | |
| margin-bottom: 20px; | |
| } | |
| .confirmation-item { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 10px 0; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .confirmation-item.total { | |
| font-weight: 600; | |
| font-size: 18px; | |
| margin-top: 10px; | |
| } | |
| .item-value { | |
| font-weight: 600; | |
| } | |
| .payment-method { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border-radius: 8px; | |
| padding: 15px; | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| } | |
| .payment-label { | |
| opacity: 0.7; | |
| margin-right: 10px; | |
| } | |
| .payment-value { | |
| flex: 1; | |
| font-weight: 600; | |
| } | |
| .change-payment { | |
| background: none; | |
| border: none; | |
| color: #00E0FF; | |
| cursor: pointer; | |
| font-size: 14px; | |
| } | |
| .confirmation-actions { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 15px; | |
| } | |
| .cancel-button, .confirm-button { | |
| flex: 1; | |
| padding: 12px; | |
| border-radius: 8px; | |
| font-size: 16px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .cancel-button { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| color: white; | |
| } | |
| .confirm-button { | |
| background: linear-gradient(90deg, #00E0FF, #35F2DB); | |
| border: none; | |
| color: #0B0B0F; | |
| } | |
| .cancel-button:hover, .confirm-button:hover { | |
| transform: translateY(-2px); | |
| } | |
| /* Account Tab */ | |
| .account-tab { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 30px; | |
| } | |
| .account-overview { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| } | |
| .account-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .account-card h3 { | |
| margin: 0 0 20px 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .profile-details { | |
| margin-bottom: 20px; | |
| } | |
| .profile-item { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 10px 0; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .item-label { | |
| opacity: 0.7; | |
| } | |
| .item-value { | |
| font-weight: 600; | |
| } | |
| .edit-profile-button { | |
| width: 100%; | |
| background-color: rgba(0, 224, 255, 0.1); | |
| border: 1px solid rgba(0, 224, 255, 0.2); | |
| border-radius: 8px; | |
| padding: 10px; | |
| color: #00E0FF; | |
| font-size: 14px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .edit-profile-button:hover { | |
| background-color: rgba(0, 224, 255, 0.2); | |
| } | |
| .balance-items { | |
| display: flex; | |
| justify-content: space-around; | |
| margin-bottom: 20px; | |
| } | |
| .balance-item { | |
| text-align: center; | |
| } | |
| .balance-icon { | |
| font-size: 24px; | |
| margin-bottom: 10px; | |
| } | |
| .balance-amount { | |
| font-size: 32px; | |
| font-weight: 700; | |
| margin-bottom: 5px; | |
| background: linear-gradient(90deg, #00E0FF, #35F2DB); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .balance-label { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| } | |
| .balance-actions { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .balance-action { | |
| flex: 1; | |
| background-color: rgba(0, 224, 255, 0.1); | |
| border: 1px solid rgba(0, 224, 255, 0.2); | |
| border-radius: 8px; | |
| padding: 10px; | |
| color: #00E0FF; | |
| font-size: 14px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .balance-action:hover { | |
| background-color: rgba(0, 224, 255, 0.2); | |
| } | |
| .payment-details { | |
| margin-bottom: 20px; | |
| } | |
| .payment-method-item { | |
| display: flex; | |
| align-items: center; | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border-radius: 8px; | |
| padding: 15px; | |
| margin-bottom: 20px; | |
| } | |
| .card-icon { | |
| font-size: 24px; | |
| margin-right: 15px; | |
| } | |
| .card-details { | |
| flex: 1; | |
| } | |
| .card-type { | |
| font-weight: 600; | |
| margin-bottom: 5px; | |
| } | |
| .billing-date { | |
| font-size: 12px; | |
| opacity: 0.7; | |
| } | |
| .edit-payment-button { | |
| background: none; | |
| border: none; | |
| color: #00E0FF; | |
| cursor: pointer; | |
| font-size: 14px; | |
| } | |
| .payment-history h4 { | |
| margin: 0 0 15px 0; | |
| font-size: 16px; | |
| font-weight: 600; | |
| } | |
| .payment-history-item { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 10px 0; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| font-size: 14px; | |
| } | |
| .payment-date { | |
| width: 100px; | |
| } | |
| .payment-description { | |
| flex: 1; | |
| padding: 0 15px; | |
| } | |
| .payment-amount { | |
| font-weight: 600; | |
| } | |
| .view-all-button { | |
| width: 100%; | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 8px; | |
| padding: 10px; | |
| color: white; | |
| font-size: 14px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| margin-top: 15px; | |
| } | |
| .view-all-button:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .preferences-list { | |
| margin-bottom: 20px; | |
| } | |
| .preference-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 15px 0; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .preference-label { | |
| font-size: 14px; | |
| } | |
| .save-preferences-button { | |
| width: 100%; | |
| background-color: rgba(0, 224, 255, 0.1); | |
| border: 1px solid rgba(0, 224, 255, 0.2); | |
| border-radius: 8px; | |
| padding: 10px; | |
| color: #00E0FF; | |
| font-size: 14px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .save-preferences-button:hover { | |
| background-color: rgba(0, 224, 255, 0.2); | |
| } | |
| /* Usage Tab */ | |
| .usage-tab { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 30px; | |
| } | |
| .usage-overview { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| } | |
| .usage-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .usage-card h3 { | |
| margin: 0 0 20px 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .usage-chart { | |
| height: 200px; | |
| margin-bottom: 20px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: flex-end; | |
| } | |
| .chart-placeholder { | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: flex-end; | |
| } | |
| .bar-chart { | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| justify-content: space-around; | |
| align-items: flex-end; | |
| } | |
| .chart-bar { | |
| width: 40px; | |
| background: linear-gradient(180deg, #00E0FF, #35F2DB); | |
| border-radius: 4px 4px 0 0; | |
| position: relative; | |
| transition: height 0.5s ease; | |
| } | |
| .chart-bar.current { | |
| background: linear-gradient(180deg, #FFC107, #FFD54F); | |
| } | |
| .bar-label { | |
| position: absolute; | |
| bottom: -25px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| font-size: 12px; | |
| opacity: 0.7; | |
| } | |
| .usage-summary { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 15px; | |
| } | |
| .summary-item { | |
| text-align: center; | |
| } | |
| .summary-label { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| margin-bottom: 5px; | |
| } | |
| .summary-value { | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .token-balance { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| } | |
| .token-icon { | |
| font-size: 36px; | |
| margin-bottom: 10px; | |
| } | |
| .token-amount { | |
| font-size: 48px; | |
| font-weight: 700; | |
| margin-bottom: 5px; | |
| background: linear-gradient(90deg, #00E0FF, #35F2DB); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .token-label { | |
| font-size: 16px; | |
| opacity: 0.7; | |
| } | |
| .token-details { | |
| margin-bottom: 20px; | |
| } | |
| .token-detail { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 10px 0; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .detail-label { | |
| opacity: 0.7; | |
| } | |
| .detail-value { | |
| font-weight: 600; | |
| } | |
| .token-actions { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .token-action { | |
| flex: 1; | |
| background-color: rgba(0, 224, 255, 0.1); | |
| border: 1px solid rgba(0, 224, 255, 0.2); | |
| border-radius: 8px; | |
| padding: 10px; | |
| color: #00E0FF; | |
| font-size: 14px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .token-action:hover { | |
| background-color: rgba(0, 224, 255, 0.2); | |
| } | |
| .usage-history-section { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .usage-history-section h3 { | |
| margin: 0 0 20px 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .activity-list { | |
| margin-bottom: 20px; | |
| } | |
| .activity-item { | |
| display: flex; | |
| padding: 15px 0; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .activity-date { | |
| width: 120px; | |
| font-size: 14px; | |
| opacity: 0.7; | |
| } | |
| .activity-details { | |
| flex: 1; | |
| } | |
| .activity-type { | |
| font-weight: 600; | |
| margin-bottom: 5px; | |
| } | |
| .activity-vehicle, .activity-location { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| } | |
| .activity-cost { | |
| text-align: right; | |
| min-width: 100px; | |
| } | |
| .credit-cost { | |
| color: #FF5555; | |
| font-weight: 600; | |
| } | |
| .token-cost { | |
| color: #FFC107; | |
| font-weight: 600; | |
| } | |
| .view-all-activity { | |
| width: 100%; | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 8px; | |
| padding: 10px; | |
| color: white; | |
| font-size: 14px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .view-all-activity:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .usage-insights { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .usage-insights h3 { | |
| margin: 0 0 20px 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .insights-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 20px; | |
| } | |
| .insight-card { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 20px; | |
| text-align: center; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .insight-icon { | |
| font-size: 28px; | |
| margin-bottom: 10px; | |
| } | |
| .insight-title { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| margin-bottom: 10px; | |
| } | |
| .insight-value { | |
| font-size: 24px; | |
| font-weight: 700; | |
| margin-bottom: 5px; | |
| background: linear-gradient(90deg, #00E0FF, #35F2DB); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .insight-detail { | |
| font-size: 12px; | |
| opacity: 0.7; | |
| } | |
| /* Compare Tab */ | |
| .compare-tab { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 30px; | |
| } | |
| .feature-comparison { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .feature-comparison h3 { | |
| margin: 0 0 20px 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .comparison-table { | |
| width: 100%; | |
| overflow-x: auto; | |
| } | |
| .comparison-header { | |
| display: flex; | |
| background-color: rgba(0, 0, 0, 0.2); | |
| padding: 15px; | |
| border-radius: 8px 8px 0 0; | |
| font-weight: 600; | |
| } | |
| .comparison-row { | |
| display: flex; | |
| padding: 15px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .comparison-row:nth-child(even) { | |
| background-color: rgba(255, 255, 255, 0.02); | |
| } | |
| .feature-name { | |
| width: 200px; | |
| flex-shrink: 0; | |
| } | |
| .tier-column { | |
| flex: 1; | |
| min-width: 120px; | |
| text-align: center; | |
| } | |
| .feature-included { | |
| color: #35F2DB; | |
| } | |
| .check-icon { | |
| margin-right: 5px; | |
| } | |
| .feature-details { | |
| font-size: 12px; | |
| opacity: 0.7; | |
| display: block; | |
| } | |
| .feature-excluded { | |
| opacity: 0.5; | |
| } | |
| .plan-benefits { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .plan-benefits h3 { | |
| margin: 0 0 20px 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .benefits-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| } | |
| .benefit-card { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 20px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .benefit-icon { | |
| font-size: 28px; | |
| margin-bottom: 10px; | |
| } | |
| .benefit-card h4 { | |
| margin: 0 0 10px 0; | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .benefit-card p { | |
| margin: 0; | |
| font-size: 14px; | |
| opacity: 0.8; | |
| line-height: 1.5; | |
| } | |
| .faq-section { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .faq-section h3 { | |
| margin: 0 0 20px 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .faq-item { | |
| margin-bottom: 15px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| padding-bottom: 15px; | |
| } | |
| .faq-item:last-child { | |
| margin-bottom: 0; | |
| border-bottom: none; | |
| padding-bottom: 0; | |
| } | |
| .faq-question { | |
| font-size: 16px; | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| color: #00E0FF; | |
| } | |
| .faq-answer { | |
| font-size: 14px; | |
| opacity: 0.8; | |
| line-height: 1.5; | |
| } | |
| /* Footer */ | |
| .portal-footer { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 20px; | |
| background-color: rgba(20, 20, 30, 0.8); | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| margin-top: 30px; | |
| } | |
| .footer-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| } | |
| .footer-info span { | |
| font-size: 12px; | |
| opacity: 0.7; | |
| } | |
| .footer-links { | |
| display: flex; | |
| gap: 20px; | |
| } | |
| .footer-link { | |
| font-size: 12px; | |
| opacity: 0.7; | |
| text-decoration: none; | |
| color: white; | |
| transition: all 0.2s ease; | |
| } | |
| .footer-link:hover { | |
| opacity: 1; | |
| color: #00E0FF; | |
| } | |
| /* Responsive Adjustments */ | |
| @media (max-width: 768px) { | |
| .portal-header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 15px; | |
| } | |
| .current-plan-banner { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| .subscription-tiers { | |
| grid-template-columns: 1fr; | |
| } | |
| .add-ons-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .confirmation-actions { | |
| flex-direction: column; | |
| } | |
| .account-overview { | |
| grid-template-columns: 1fr; | |
| } | |
| .usage-overview { | |
| grid-template-columns: 1fr; | |
| } | |
| .insights-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .benefits-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .portal-footer { | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .footer-links { | |
| width: 100%; | |
| justify-content: space-between; | |
| } | |
| } | |