Spaces:
Running
Running
| /* ChainLink Tokenization Demo Styles */ | |
| .chainlink-demo { | |
| 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 */ | |
| .chainlink-demo.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 */ | |
| .demo-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); | |
| } | |
| .demo-title { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .demo-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; | |
| } | |
| .demo-subtitle { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| } | |
| .token-stats { | |
| display: flex; | |
| gap: 20px; | |
| } | |
| .token-price, .token-market-cap { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| background-color: rgba(255, 255, 255, 0.05); | |
| padding: 8px 12px; | |
| border-radius: 8px; | |
| border: 1px solid rgba(0, 224, 255, 0.2); | |
| } | |
| .price-label, .cap-label { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| } | |
| .price-value, .cap-value { | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: #00E0FF; | |
| } | |
| .price-change { | |
| font-size: 14px; | |
| font-weight: 600; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| } | |
| .price-change.positive { | |
| background-color: rgba(53, 242, 219, 0.2); | |
| color: #35F2DB; | |
| } | |
| .price-change.negative { | |
| background-color: rgba(255, 85, 85, 0.2); | |
| color: #FF5555; | |
| } | |
| /* Navigation */ | |
| .demo-navigation { | |
| display: flex; | |
| gap: 2px; | |
| background-color: rgba(20, 20, 30, 0.5); | |
| padding: 0 20px; | |
| overflow-x: auto; | |
| scrollbar-width: none; | |
| } | |
| .demo-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 */ | |
| .demo-content { | |
| padding: 20px; | |
| min-height: calc(100vh - 200px); | |
| } | |
| /* Overview Tab */ | |
| .overview-tab { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 30px; | |
| } | |
| .network-stats { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| } | |
| .stats-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .stats-card h3 { | |
| margin: 0 0 20px 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .token-supply-chart { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 20px; | |
| } | |
| .supply-chart-container { | |
| width: 200px; | |
| height: 200px; | |
| } | |
| .supply-chart { | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .supply-segment { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| transform-origin: center; | |
| } | |
| .supply-segment.circulating { | |
| background-color: #00E0FF; | |
| } | |
| .supply-segment.reserved { | |
| background-color: rgba(255, 255, 255, 0.2); | |
| } | |
| .supply-inner { | |
| position: absolute; | |
| top: 25%; | |
| left: 25%; | |
| width: 50%; | |
| height: 50%; | |
| background-color: #0B0B0F; | |
| border-radius: 50%; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .supply-value { | |
| font-size: 18px; | |
| font-weight: 700; | |
| color: #00E0FF; | |
| } | |
| .supply-label { | |
| font-size: 12px; | |
| opacity: 0.7; | |
| } | |
| .supply-legend { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| width: 100%; | |
| } | |
| .legend-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .legend-color { | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 4px; | |
| } | |
| .legend-color.circulating { | |
| background-color: #00E0FF; | |
| } | |
| .legend-color.reserved { | |
| background-color: rgba(255, 255, 255, 0.2); | |
| } | |
| .legend-label { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| } | |
| .legend-value { | |
| margin-left: auto; | |
| font-size: 14px; | |
| font-weight: 600; | |
| } | |
| .metrics-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 20px; | |
| } | |
| .metric-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| padding: 15px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .metric-icon { | |
| font-size: 24px; | |
| margin-bottom: 10px; | |
| } | |
| .metric-value { | |
| font-size: 20px; | |
| font-weight: 700; | |
| margin-bottom: 5px; | |
| background: linear-gradient(90deg, #00E0FF, #35F2DB); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .metric-label { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| } | |
| .token-distribution { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .token-distribution h3 { | |
| margin: 0 0 20px 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .distribution-chart { | |
| display: flex; | |
| gap: 30px; | |
| flex-wrap: wrap; | |
| } | |
| .pie-chart-container { | |
| width: 200px; | |
| height: 200px; | |
| flex-shrink: 0; | |
| } | |
| .pie-chart { | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .pie-segment { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| transform-origin: center; | |
| } | |
| .pie-inner { | |
| position: absolute; | |
| top: 25%; | |
| left: 25%; | |
| width: 50%; | |
| height: 50%; | |
| background-color: #0B0B0F; | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .pie-icon { | |
| font-size: 24px; | |
| } | |
| .distribution-legend { | |
| flex: 1; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 10px; | |
| } | |
| .token-utility { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .token-utility h3 { | |
| margin: 0 0 20px 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .utility-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| } | |
| .utility-card { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 15px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .utility-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 10px; | |
| } | |
| .utility-icon { | |
| font-size: 20px; | |
| color: #00E0FF; | |
| } | |
| .utility-card h4 { | |
| margin: 0; | |
| font-size: 16px; | |
| font-weight: 600; | |
| } | |
| .utility-card p { | |
| margin: 0; | |
| font-size: 14px; | |
| opacity: 0.8; | |
| line-height: 1.5; | |
| } | |
| .value-drivers { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .value-drivers h3 { | |
| margin: 0 0 20px 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .drivers-table { | |
| width: 100%; | |
| overflow-x: auto; | |
| } | |
| .table-header { | |
| display: flex; | |
| background-color: rgba(0, 0, 0, 0.2); | |
| padding: 10px; | |
| border-radius: 8px 8px 0 0; | |
| font-weight: 600; | |
| font-size: 14px; | |
| } | |
| .table-row { | |
| display: flex; | |
| padding: 10px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .table-row:last-child { | |
| border-bottom: none; | |
| } | |
| .table-row:nth-child(even) { | |
| background-color: rgba(255, 255, 255, 0.02); | |
| } | |
| .driver-column { | |
| width: 25%; | |
| padding: 0 10px; | |
| } | |
| .impact-column { | |
| width: 15%; | |
| padding: 0 10px; | |
| font-weight: 600; | |
| } | |
| .impact-high { | |
| color: #35F2DB; | |
| } | |
| .impact-medium { | |
| color: #FFC107; | |
| } | |
| .impact-low { | |
| color: #FF5555; | |
| } | |
| .description-column { | |
| flex: 1; | |
| padding: 0 10px; | |
| font-size: 14px; | |
| opacity: 0.8; | |
| } | |
| /* Wallet Tab */ | |
| .wallet-tab { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 30px; | |
| } | |
| .wallet-overview { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| } | |
| .wallet-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .wallet-card.balance { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| } | |
| .wallet-icon { | |
| font-size: 36px; | |
| margin-bottom: 15px; | |
| } | |
| .wallet-balance { | |
| 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; | |
| } | |
| .wallet-label { | |
| font-size: 16px; | |
| opacity: 0.7; | |
| margin-bottom: 10px; | |
| } | |
| .wallet-value { | |
| font-size: 18px; | |
| font-weight: 600; | |
| color: #00E0FF; | |
| } | |
| .staking-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| } | |
| .staking-header h3 { | |
| margin: 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .staking-apy { | |
| background-color: rgba(53, 242, 219, 0.2); | |
| color: #35F2DB; | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| font-size: 14px; | |
| font-weight: 600; | |
| } | |
| .staking-metrics { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 15px; | |
| margin-bottom: 20px; | |
| } | |
| .staking-metric { | |
| text-align: center; | |
| } | |
| .metric-label { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| margin-bottom: 5px; | |
| } | |
| .metric-value { | |
| font-size: 18px; | |
| font-weight: 600; | |
| margin-bottom: 2px; | |
| } | |
| .metric-value-usd { | |
| font-size: 14px; | |
| color: #00E0FF; | |
| } | |
| .staking-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; | |
| } | |
| .staking-button:hover { | |
| background-color: rgba(0, 224, 255, 0.2); | |
| } | |
| .wallet-card.actions h3 { | |
| margin: 0 0 15px 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .action-buttons { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| } | |
| .action-button { | |
| 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; | |
| } | |
| .action-button:hover { | |
| background-color: rgba(0, 224, 255, 0.1); | |
| } | |
| .action-button.active { | |
| background-color: rgba(0, 224, 255, 0.2); | |
| border-color: #00E0FF; | |
| color: #00E0FF; | |
| } | |
| .token-action-form { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 15px; | |
| border: 1px solid rgba(0, 224, 255, 0.2); | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .form-header h4 { | |
| margin: 0 0 15px 0; | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: #00E0FF; | |
| } | |
| .form-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .amount-selector { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .amount-selector label { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| } | |
| .amount-controls { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .amount-button { | |
| width: 30px; | |
| height: 30px; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| border-radius: 4px; | |
| color: white; | |
| font-size: 16px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| cursor: pointer; | |
| } | |
| .amount-button:hover:not(:disabled) { | |
| background-color: rgba(0, 224, 255, 0.1); | |
| } | |
| .amount-button:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .amount-controls input { | |
| width: 60px; | |
| height: 30px; | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 4px; | |
| color: white; | |
| font-size: 14px; | |
| text-align: center; | |
| margin: 0 10px; | |
| } | |
| .conversion-preview { | |
| background-color: rgba(0, 0, 0, 0.2); | |
| border-radius: 8px; | |
| padding: 10px; | |
| } | |
| .conversion-detail { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 8px; | |
| } | |
| .conversion-detail:last-child { | |
| margin-bottom: 0; | |
| padding-top: 8px; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .detail-label { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| } | |
| .detail-value { | |
| font-size: 14px; | |
| font-weight: 600; | |
| } | |
| .confirm-action-button { | |
| background: linear-gradient(90deg, #00E0FF, #35F2DB); | |
| border: none; | |
| border-radius: 8px; | |
| padding: 10px; | |
| color: #0B0B0F; | |
| font-size: 14px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .confirm-action-button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(0, 224, 255, 0.3); | |
| } | |
| .transaction-history { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .transaction-history h3 { | |
| margin: 0 0 20px 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .history-tabs { | |
| display: flex; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| overflow-x: auto; | |
| scrollbar-width: none; | |
| } | |
| .history-tabs::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .history-tab { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 8px; | |
| padding: 8px 15px; | |
| color: white; | |
| font-size: 14px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| white-space: nowrap; | |
| } | |
| .history-tab:hover { | |
| background-color: rgba(0, 224, 255, 0.1); | |
| } | |
| .history-tab.active { | |
| background-color: rgba(0, 224, 255, 0.2); | |
| border-color: #00E0FF; | |
| color: #00E0FF; | |
| } | |
| .history-table { | |
| width: 100%; | |
| overflow-x: auto; | |
| } | |
| .date-column { | |
| width: 120px; | |
| padding: 0 10px; | |
| } | |
| .type-column { | |
| flex: 1; | |
| padding: 0 10px; | |
| } | |
| .amount-column { | |
| width: 120px; | |
| padding: 0 10px; | |
| text-align: right; | |
| } | |
| .status-column { | |
| width: 100px; | |
| padding: 0 10px; | |
| text-align: right; | |
| } | |
| .table-row.acquisition .amount-column { | |
| color: #35F2DB; | |
| } | |
| .table-row.usage .amount-column { | |
| color: #FF5555; | |
| } | |
| /* Ownership Tab */ | |
| .ownership-tab { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 30px; | |
| } | |
| .ownership-overview { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| } | |
| .ownership-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .ownership-card h3 { | |
| margin: 0 0 20px 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .ownership-percentage { | |
| text-align: center; | |
| margin-bottom: 20px; | |
| } | |
| .percentage-value { | |
| font-size: 36px; | |
| font-weight: 700; | |
| margin-bottom: 5px; | |
| background: linear-gradient(90deg, #00E0FF, #35F2DB); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .percentage-label { | |
| font-size: 16px; | |
| opacity: 0.7; | |
| } | |
| .ownership-details { | |
| background-color: rgba(0, 0, 0, 0.2); | |
| border-radius: 8px; | |
| padding: 15px; | |
| } | |
| .detail-item { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 10px; | |
| } | |
| .detail-item:last-child { | |
| margin-bottom: 0; | |
| } | |
| .detail-label { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| } | |
| .detail-value { | |
| font-size: 14px; | |
| font-weight: 600; | |
| } | |
| .returns-chart { | |
| height: 200px; | |
| margin-bottom: 15px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: flex-end; | |
| } | |
| .chart-bars { | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| justify-content: space-around; | |
| align-items: flex-end; | |
| } | |
| .chart-bar-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| height: 100%; | |
| width: 60px; | |
| } | |
| .bar-label { | |
| margin-bottom: 10px; | |
| font-size: 12px; | |
| opacity: 0.7; | |
| } | |
| .bar-wrapper { | |
| width: 40px; | |
| height: 80%; | |
| display: flex; | |
| align-items: flex-end; | |
| } | |
| .bar { | |
| width: 100%; | |
| background: linear-gradient(180deg, #00E0FF, #35F2DB); | |
| border-radius: 4px 4px 0 0; | |
| transition: height 0.5s ease; | |
| } | |
| .bar-value { | |
| margin-top: 10px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: #00E0FF; | |
| } | |
| .returns-note { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| text-align: center; | |
| } | |
| .asset-holdings { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .asset-holdings h3 { | |
| margin: 0 0 20px 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .holdings-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| } | |
| .holding-card { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 15px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .holding-card.operational { | |
| border-color: rgba(53, 242, 219, 0.3); | |
| } | |
| .holding-card.construction { | |
| border-color: rgba(255, 193, 7, 0.3); | |
| } | |
| .holding-card.planning { | |
| border-color: rgba(0, 224, 255, 0.3); | |
| } | |
| .holding-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| } | |
| .holding-header h4 { | |
| margin: 0; | |
| font-size: 16px; | |
| font-weight: 600; | |
| } | |
| .holding-status { | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| } | |
| .holding-status.operational { | |
| background-color: rgba(53, 242, 219, 0.2); | |
| color: #35F2DB; | |
| } | |
| .holding-status.construction { | |
| background-color: rgba(255, 193, 7, 0.2); | |
| color: #FFC107; | |
| } | |
| .holding-status.planning { | |
| background-color: rgba(0, 224, 255, 0.2); | |
| color: #00E0FF; | |
| } | |
| .holding-details { | |
| margin-bottom: 15px; | |
| } | |
| .holding-item { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 8px; | |
| } | |
| .holding-item:last-child { | |
| margin-bottom: 0; | |
| } | |
| .item-label { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| } | |
| .item-value { | |
| font-size: 14px; | |
| font-weight: 600; | |
| } | |
| .holding-actions { | |
| text-align: center; | |
| } | |
| .view-details-button { | |
| width: 100%; | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 8px; | |
| padding: 8px; | |
| color: white; | |
| font-size: 14px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .view-details-button:hover { | |
| background-color: rgba(0, 224, 255, 0.1); | |
| } | |
| .network-growth { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .network-growth h3 { | |
| margin: 0 0 20px 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .opportunities-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| } | |
| .opportunity-card { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 20px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .opportunity-icon { | |
| font-size: 28px; | |
| margin-bottom: 10px; | |
| } | |
| .opportunity-card h4 { | |
| margin: 0 0 10px 0; | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .opportunity-card p { | |
| margin: 0 0 15px 0; | |
| font-size: 14px; | |
| opacity: 0.8; | |
| line-height: 1.5; | |
| flex-grow: 1; | |
| } | |
| .opportunity-metrics { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 15px; | |
| } | |
| .metric { | |
| text-align: center; | |
| } | |
| .metric-label { | |
| font-size: 12px; | |
| opacity: 0.7; | |
| margin-bottom: 5px; | |
| } | |
| .metric-value { | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: #00E0FF; | |
| } | |
| .opportunity-button { | |
| background-color: rgba(0, 224, 255, 0.1); | |
| border: 1px solid rgba(0, 224, 255, 0.2); | |
| border-radius: 8px; | |
| padding: 8px; | |
| color: #00E0FF; | |
| font-size: 14px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .opportunity-button:hover { | |
| background-color: rgba(0, 224, 255, 0.2); | |
| } | |
| /* Market Tab */ | |
| .market-tab { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 30px; | |
| } | |
| .market-overview { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| } | |
| .market-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .market-card h3 { | |
| margin: 0 0 20px 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .current-price { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| } | |
| .price-value { | |
| 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-change { | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| font-size: 14px; | |
| font-weight: 600; | |
| } | |
| .price-chart { | |
| height: 200px; | |
| position: relative; | |
| padding-bottom: 30px; | |
| } | |
| .chart-lines { | |
| width: 100%; | |
| height: 100%; | |
| position: relative; | |
| } | |
| .chart-point { | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| } | |
| .point-dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background-color: #00E0FF; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| } | |
| .point-line { | |
| height: 2px; | |
| background-color: #00E0FF; | |
| position: absolute; | |
| top: 5px; | |
| left: 0; | |
| } | |
| .chart-labels { | |
| display: flex; | |
| justify-content: space-between; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| } | |
| .chart-label { | |
| position: absolute; | |
| font-size: 12px; | |
| opacity: 0.7; | |
| transform: translateX(-50%); | |
| } | |
| .volume-chart { | |
| height: 200px; | |
| display: flex; | |
| justify-content: space-around; | |
| align-items: flex-end; | |
| } | |
| .volume-bar-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| width: 60px; | |
| } | |
| .bar-wrapper { | |
| width: 40px; | |
| height: 150px; | |
| display: flex; | |
| align-items: flex-end; | |
| } | |
| .volume-bar { | |
| width: 100%; | |
| background: linear-gradient(180deg, #FFC107, #FF9800); | |
| border-radius: 4px 4px 0 0; | |
| transition: height 0.5s ease; | |
| } | |
| .price-projections { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .price-projections h3 { | |
| margin: 0 0 20px 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .projections-chart { | |
| height: 250px; | |
| margin-bottom: 20px; | |
| } | |
| .projection-bar-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| width: 80px; | |
| } | |
| .projection-range { | |
| width: 20px; | |
| background-color: rgba(0, 224, 255, 0.2); | |
| border-radius: 10px; | |
| position: absolute; | |
| } | |
| .projection-line { | |
| width: 40px; | |
| height: 2px; | |
| background-color: #00E0FF; | |
| position: absolute; | |
| } | |
| .range-values { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| margin-top: 10px; | |
| } | |
| .high-value, .low-value { | |
| font-size: 12px; | |
| font-weight: 600; | |
| } | |
| .high-value { | |
| color: #35F2DB; | |
| } | |
| .low-value { | |
| color: #00E0FF; | |
| margin-top: 5px; | |
| } | |
| .projections-note { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| text-align: center; | |
| line-height: 1.5; | |
| } | |
| .market-insights { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .market-insights h3 { | |
| margin: 0 0 20px 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .insights-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| } | |
| .insight-card { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 15px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .insight-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 15px; | |
| } | |
| .insight-icon { | |
| font-size: 24px; | |
| } | |
| .insight-header h4 { | |
| margin: 0; | |
| font-size: 16px; | |
| font-weight: 600; | |
| } | |
| .insight-list { | |
| margin: 0; | |
| padding-left: 20px; | |
| } | |
| .insight-list li { | |
| margin-bottom: 8px; | |
| font-size: 14px; | |
| opacity: 0.8; | |
| line-height: 1.5; | |
| } | |
| /* Token Flow Tab */ | |
| .token-flow-tab { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 30px; | |
| } | |
| .flow-visualization { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .flow-visualization h3 { | |
| margin: 0 0 20px 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .flow-container { | |
| height: 400px; | |
| position: relative; | |
| margin-bottom: 20px; | |
| } | |
| .flow-diagram { | |
| width: 100%; | |
| height: 100%; | |
| position: relative; | |
| } | |
| .flow-node { | |
| position: absolute; | |
| width: 120px; | |
| height: 120px; | |
| border-radius: 50%; | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| text-align: center; | |
| padding: 10px; | |
| } | |
| .flow-node.subscribers { | |
| top: 50px; | |
| left: 50px; | |
| } | |
| .flow-node.network { | |
| top: 50px; | |
| right: 50px; | |
| } | |
| .flow-node.infrastructure { | |
| bottom: 50px; | |
| right: 50px; | |
| } | |
| .flow-node.revenue { | |
| bottom: 50px; | |
| left: 50px; | |
| } | |
| .node-icon { | |
| font-size: 24px; | |
| margin-bottom: 5px; | |
| } | |
| .node-label { | |
| font-size: 14px; | |
| font-weight: 600; | |
| margin-bottom: 5px; | |
| } | |
| .node-value { | |
| font-size: 12px; | |
| opacity: 0.7; | |
| } | |
| .flow-path { | |
| position: absolute; | |
| height: 2px; | |
| background-color: rgba(255, 255, 255, 0.2); | |
| transform-origin: left center; | |
| } | |
| .flow-path.subscription { | |
| top: 110px; | |
| left: 170px; | |
| width: calc(100% - 340px); | |
| } | |
| .flow-path.redemption { | |
| top: 170px; | |
| left: 170px; | |
| width: calc(100% - 340px); | |
| transform: rotate(90deg); | |
| } | |
| .flow-path.investment { | |
| bottom: 110px; | |
| left: 170px; | |
| width: calc(100% - 340px); | |
| } | |
| .flow-path.returns { | |
| bottom: 170px; | |
| left: 170px; | |
| width: calc(100% - 340px); | |
| transform: rotate(90deg); | |
| } | |
| .path-label { | |
| position: absolute; | |
| top: -20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| font-size: 12px; | |
| opacity: 0.7; | |
| white-space: nowrap; | |
| } | |
| .token-particle { | |
| position: absolute; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background-color: #00E0FF; | |
| top: -3px; | |
| } | |
| .flow-diagram.animate .token-particle { | |
| animation: moveParticle 5s infinite linear; | |
| } | |
| @keyframes moveParticle { | |
| 0% { | |
| left: 0; | |
| opacity: 0; | |
| } | |
| 10% { | |
| opacity: 1; | |
| } | |
| 90% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| left: 100%; | |
| opacity: 0; | |
| } | |
| } | |
| .flow-diagram.animate .flow-path.subscription .token-particle:nth-child(1) { | |
| animation-delay: 0s; | |
| } | |
| .flow-diagram.animate .flow-path.subscription .token-particle:nth-child(2) { | |
| animation-delay: 1.5s; | |
| } | |
| .flow-diagram.animate .flow-path.subscription .token-particle:nth-child(3) { | |
| animation-delay: 3s; | |
| } | |
| .flow-diagram.animate .flow-path.redemption .token-particle:nth-child(1) { | |
| animation-delay: 0.5s; | |
| } | |
| .flow-diagram.animate .flow-path.redemption .token-particle:nth-child(2) { | |
| animation-delay: 2.5s; | |
| } | |
| .flow-diagram.animate .flow-path.investment .token-particle:nth-child(1) { | |
| animation-delay: 1s; | |
| } | |
| .flow-diagram.animate .flow-path.investment .token-particle:nth-child(2) { | |
| animation-delay: 2s; | |
| } | |
| .flow-diagram.animate .flow-path.investment .token-particle:nth-child(3) { | |
| animation-delay: 3.5s; | |
| } | |
| .flow-diagram.animate .flow-path.returns .token-particle:nth-child(1) { | |
| animation-delay: 1.5s; | |
| } | |
| .flow-diagram.animate .flow-path.returns .token-particle:nth-child(2) { | |
| animation-delay: 3.5s; | |
| } | |
| .flow-controls { | |
| text-align: center; | |
| } | |
| .animate-flow-button { | |
| background-color: rgba(0, 224, 255, 0.1); | |
| border: 1px solid rgba(0, 224, 255, 0.2); | |
| border-radius: 8px; | |
| padding: 10px 20px; | |
| color: #00E0FF; | |
| font-size: 14px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .animate-flow-button:hover { | |
| background-color: rgba(0, 224, 255, 0.2); | |
| } | |
| .flow-explanation { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .flow-explanation h3 { | |
| margin: 0 0 20px 0; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .explanation-steps { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .step { | |
| display: flex; | |
| gap: 15px; | |
| } | |
| .step-number { | |
| width: 30px; | |
| height: 30px; | |
| background-color: rgba(0, 224, 255, 0.2); | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: #00E0FF; | |
| flex-shrink: 0; | |
| } | |
| .step-content { | |
| flex: 1; | |
| } | |
| .step-content h4 { | |
| margin: 0 0 10px 0; | |
| font-size: 16px; | |
| font-weight: 600; | |
| } | |
| .step-content p { | |
| margin: 0; | |
| font-size: 14px; | |
| opacity: 0.8; | |
| line-height: 1.5; | |
| } | |
| .token-benefits { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .token-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; | |
| } | |
| /* Token Confirmation Modal */ | |
| .token-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: 400px; | |
| 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-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); | |
| } | |
| /* Footer */ | |
| .demo-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) { | |
| .demo-header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 15px; | |
| } | |
| .token-stats { | |
| width: 100%; | |
| justify-content: space-between; | |
| } | |
| .metrics-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .distribution-chart { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .utility-grid, .insights-grid, .benefits-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .wallet-overview, .ownership-overview, .market-overview { | |
| grid-template-columns: 1fr; | |
| } | |
| .action-buttons { | |
| grid-template-columns: 1fr; | |
| } | |
| .holdings-grid, .opportunities-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .flow-node { | |
| width: 80px; | |
| height: 80px; | |
| } | |
| .flow-node.subscribers { | |
| top: 30px; | |
| left: 30px; | |
| } | |
| .flow-node.network { | |
| top: 30px; | |
| right: 30px; | |
| } | |
| .flow-node.infrastructure { | |
| bottom: 30px; | |
| right: 30px; | |
| } | |
| .flow-node.revenue { | |
| bottom: 30px; | |
| left: 30px; | |
| } | |
| .flow-path.subscription { | |
| top: 70px; | |
| left: 110px; | |
| width: calc(100% - 220px); | |
| } | |
| .flow-path.redemption { | |
| top: 110px; | |
| left: 110px; | |
| width: calc(100% - 220px); | |
| } | |
| .flow-path.investment { | |
| bottom: 70px; | |
| left: 110px; | |
| width: calc(100% - 220px); | |
| } | |
| .flow-path.returns { | |
| bottom: 110px; | |
| left: 110px; | |
| width: calc(100% - 220px); | |
| } | |
| .step { | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .confirmation-actions { | |
| flex-direction: column; | |
| } | |
| .demo-footer { | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .footer-links { | |
| width: 100%; | |
| justify-content: space-between; | |
| } | |
| } | |