Spaces:
Running
Running
| /* ======================================== | |
| COMPONENTS - Modern Clean UI Elements | |
| ======================================== */ | |
| /* Form Layout */ | |
| .form-section { | |
| margin-bottom: var(--space-8); | |
| } | |
| .form-group { | |
| margin-bottom: var(--space-6); | |
| } | |
| .form-group label { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| font-weight: 500; | |
| font-size: 0.875rem; | |
| color: var(--color-gray-600); | |
| margin-bottom: var(--space-3); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| /* Input Field */ | |
| .input-wrapper { | |
| position: relative; | |
| } | |
| .input-wrapper svg { | |
| position: absolute; | |
| left: var(--space-4); | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 20px; | |
| height: 20px; | |
| color: var(--color-gray-400); | |
| pointer-events: none; | |
| transition: color var(--duration-fast) var(--ease-out); | |
| } | |
| .input-wrapper:focus-within svg { | |
| color: var(--color-primary); | |
| } | |
| input[type="text"] { | |
| width: 100%; | |
| padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12); | |
| background: var(--color-white); | |
| border: 1.5px solid var(--color-gray-200); | |
| border-radius: var(--radius-md); | |
| font-size: 1rem; | |
| font-family: inherit; | |
| color: var(--color-gray-800); | |
| transition: all var(--duration-fast) var(--ease-out); | |
| } | |
| input[type="text"]:hover { | |
| border-color: var(--color-gray-300); | |
| } | |
| input[type="text"]:focus { | |
| outline: none; | |
| border-color: var(--color-primary); | |
| box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); | |
| } | |
| input[type="text"]::placeholder { | |
| color: var(--color-gray-400); | |
| } | |
| /* File Upload Zone */ | |
| .file-input-container { | |
| position: relative; | |
| border: 2px dashed var(--color-gray-200); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-8) var(--space-6); | |
| text-align: center; | |
| background: var(--color-gray-50); | |
| cursor: pointer; | |
| transition: all var(--duration-normal) var(--ease-out); | |
| } | |
| .file-input-container:hover { | |
| border-color: var(--color-primary-light); | |
| background: rgba(99, 102, 241, 0.02); | |
| } | |
| .file-input-container.dragover { | |
| border-color: var(--color-primary); | |
| background: rgba(99, 102, 241, 0.05); | |
| transform: scale(1.01); | |
| } | |
| .file-input-container .upload-icon { | |
| width: 48px; | |
| height: 48px; | |
| margin: 0 auto var(--space-4); | |
| color: var(--color-gray-300); | |
| transition: all var(--duration-normal) var(--ease-out); | |
| } | |
| .file-input-container:hover .upload-icon { | |
| color: var(--color-primary); | |
| transform: translateY(-2px); | |
| } | |
| .file-input-container .upload-label { | |
| display: block; | |
| font-weight: 500; | |
| color: var(--color-gray-700); | |
| margin-bottom: var(--space-2); | |
| cursor: pointer; | |
| transition: all var(--duration-normal) var(--ease-out); | |
| } | |
| .file-input-container:hover .upload-label { | |
| color: var(--color-primary); | |
| transform: translateY(-2px); | |
| } | |
| .file-input-container .file-info { | |
| display: block; | |
| font-size: 0.8125rem; | |
| color: var(--color-gray-400); | |
| transition: all var(--duration-normal) var(--ease-out); | |
| } | |
| .file-input-container:hover .file-info { | |
| color: var(--color-primary-light); | |
| transform: translateY(-2px); | |
| } | |
| .file-input-container .supported-formats { | |
| display: flex; | |
| justify-content: center; | |
| gap: var(--space-2); | |
| margin-top: var(--space-3); | |
| flex-wrap: wrap; | |
| } | |
| .file-input-container .format-badge { | |
| font-size: 0.6875rem; | |
| font-weight: 600; | |
| padding: var(--space-1) var(--space-2); | |
| background: var(--color-gray-100); | |
| color: var(--color-gray-500); | |
| border-radius: var(--radius-sm); | |
| text-transform: uppercase; | |
| letter-spacing: 0.3px; | |
| transition: all var(--duration-normal) var(--ease-out); | |
| } | |
| .file-input-container:hover .format-badge { | |
| transform: translateY(-2px); | |
| } | |
| input[type="file"] { | |
| display: none; | |
| } | |
| /* File Name Tag */ | |
| .file-name { | |
| display: none; | |
| align-items: center; | |
| gap: var(--space-2); | |
| margin-top: var(--space-3); | |
| padding: var(--space-3) var(--space-4); | |
| background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08)); | |
| color: var(--color-primary-dark); | |
| border-radius: var(--radius-md); | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| } | |
| .file-name.visible { | |
| display: flex; | |
| } | |
| /* Primary Button */ | |
| .btn-primary { | |
| position: relative; | |
| width: 100%; | |
| padding: var(--space-4) var(--space-6); | |
| background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); | |
| color: var(--color-white); | |
| border: none; | |
| border-radius: var(--radius-md); | |
| font-size: 1rem; | |
| font-weight: 600; | |
| font-family: inherit; | |
| cursor: pointer; | |
| overflow: hidden; | |
| transition: all var(--duration-normal) var(--ease-out); | |
| } | |
| .btn-primary::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%); | |
| opacity: 0; | |
| transition: opacity var(--duration-fast); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35); | |
| } | |
| .btn-primary:hover::before { | |
| opacity: 1; | |
| } | |
| .btn-primary:active { | |
| transform: translateY(0); | |
| } | |
| .btn-primary:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| transform: none; | |
| box-shadow: none; | |
| } | |
| /* Action Buttons */ | |
| .btn-action { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--space-2); | |
| padding: var(--space-3) var(--space-5); | |
| background: var(--color-white); | |
| color: var(--color-gray-700); | |
| border: 1.5px solid var(--color-gray-200); | |
| border-radius: var(--radius-md); | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| font-family: inherit; | |
| text-decoration: none; | |
| cursor: pointer; | |
| transition: all var(--duration-fast) var(--ease-out); | |
| } | |
| .btn-action:hover { | |
| background: var(--color-gray-50); | |
| border-color: var(--color-gray-300); | |
| transform: translateY(-1px); | |
| } | |
| .btn-action.btn-download { | |
| background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); | |
| color: var(--color-white); | |
| border: none; | |
| } | |
| .btn-action.btn-download:hover { | |
| box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3); | |
| } | |
| /* Loading Spinner */ | |
| .loading-spinner { | |
| display: inline-block; | |
| width: 18px; | |
| height: 18px; | |
| border: 2px solid rgba(255,255,255,0.3); | |
| border-radius: 50%; | |
| border-top-color: white; | |
| animation: spin 0.8s linear infinite; | |
| margin-right: var(--space-2); | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Messages */ | |
| .message { | |
| padding: var(--space-4) var(--space-5); | |
| border-radius: var(--radius-md); | |
| font-weight: 500; | |
| font-size: 0.9375rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--space-2); | |
| } | |
| .message-success { | |
| background: linear-gradient(135deg, var(--color-success) 0%, #16a34a 100%); | |
| color: var(--color-white); | |
| margin-bottom: var(--space-6); | |
| } | |
| .message-error { | |
| background: linear-gradient(135deg, var(--color-error) 0%, #dc2626 100%); | |
| color: var(--color-white); | |
| margin-top: var(--space-5); | |
| } | |
| /* QR Display Card */ | |
| .qr-display { | |
| background: var(--color-white); | |
| border-radius: var(--radius-xl); | |
| padding: var(--space-8); | |
| box-shadow: var(--shadow-lg); | |
| text-align: center; | |
| } | |
| .qr-code { | |
| max-width: 280px; | |
| width: 100%; | |
| height: auto; | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow-md); | |
| margin-bottom: var(--space-6); | |
| } | |
| /* QR Info */ | |
| .qr-info { | |
| background: var(--color-gray-50); | |
| padding: var(--space-4); | |
| border-radius: var(--radius-md); | |
| margin-bottom: var(--space-6); | |
| text-align: left; | |
| } | |
| .qr-info-label { | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| color: var(--color-gray-400); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| margin-bottom: var(--space-2); | |
| } | |
| .qr-info .text-content { | |
| font-family: var(--font-mono); | |
| font-size: 0.8125rem; | |
| background: var(--color-white); | |
| padding: var(--space-3); | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--color-gray-100); | |
| word-break: break-all; | |
| color: var(--color-gray-700); | |
| } | |
| /* Download Section */ | |
| .download-section { | |
| display: flex; | |
| gap: var(--space-3); | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| /* ======================================== | |
| DONATION MODAL | |
| ======================================== */ | |
| /* Modal Overlay */ | |
| .modal-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.5); | |
| backdrop-filter: blur(4px); | |
| z-index: 1000; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: var(--space-4); | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all var(--duration-normal) var(--ease-out); | |
| } | |
| .modal-overlay.visible { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| /* Modal Container */ | |
| .modal-container { | |
| background: var(--color-white); | |
| border-radius: var(--radius-xl); | |
| box-shadow: var(--shadow-xl); | |
| width: 100%; | |
| max-width: 480px; | |
| max-height: 90vh; | |
| display: flex; | |
| flex-direction: column; | |
| transform: scale(0.95) translateY(20px); | |
| transition: transform var(--duration-normal) var(--ease-out); | |
| overflow: hidden; | |
| } | |
| .modal-overlay.visible .modal-container { | |
| transform: scale(1) translateY(0); | |
| } | |
| /* Modal Header */ | |
| .modal-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: var(--space-5) var(--space-6); | |
| border-bottom: 1px solid var(--color-gray-100); | |
| background: var(--color-white); | |
| flex-shrink: 0; | |
| } | |
| .modal-title { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| font-size: 1.125rem; | |
| font-weight: 600; | |
| color: var(--color-gray-800); | |
| } | |
| .modal-title svg { | |
| width: 20px; | |
| height: 20px; | |
| color: #ef4444; | |
| } | |
| .modal-close { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 32px; | |
| height: 32px; | |
| background: transparent; | |
| border: none; | |
| border-radius: var(--radius-sm); | |
| color: var(--color-gray-400); | |
| cursor: pointer; | |
| transition: all var(--duration-fast) var(--ease-out); | |
| } | |
| .modal-close:hover { | |
| background: var(--color-gray-100); | |
| color: var(--color-gray-600); | |
| } | |
| .modal-close svg { | |
| width: 18px; | |
| height: 18px; | |
| } | |
| /* Modal Body */ | |
| .modal-body { | |
| padding: var(--space-6); | |
| overflow-y: auto; | |
| flex: 1; | |
| } | |
| .modal-description { | |
| text-align: center; | |
| color: var(--color-gray-500); | |
| font-size: 0.9375rem; | |
| margin-bottom: var(--space-6); | |
| line-height: 1.6; | |
| } | |
| /* Donation Section */ | |
| .donation-section { | |
| margin-bottom: var(--space-6); | |
| } | |
| .donation-section:last-child { | |
| margin-bottom: 0; | |
| } | |
| .donation-section-title { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| font-size: 0.9375rem; | |
| font-weight: 600; | |
| color: var(--color-gray-700); | |
| margin-bottom: var(--space-3); | |
| } | |
| .donation-section-title svg { | |
| width: 18px; | |
| height: 18px; | |
| color: inherit; | |
| } | |
| /* Donation Card */ | |
| .donation-card { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: var(--space-4); | |
| background: var(--color-gray-50); | |
| border: 1.5px solid var(--color-gray-100); | |
| border-radius: var(--radius-md); | |
| margin-bottom: var(--space-3); | |
| cursor: pointer; | |
| text-decoration: none; | |
| color: inherit; | |
| transition: all var(--duration-fast) var(--ease-out); | |
| } | |
| .donation-card:last-child { | |
| margin-bottom: 0; | |
| } | |
| .donation-card:hover { | |
| background: var(--color-white); | |
| border-color: var(--color-primary-light); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .donation-card-content { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .donation-icon { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 40px; | |
| height: 40px; | |
| background: rgba(99, 102, 241, 0.1); | |
| border-radius: var(--radius-md); | |
| flex-shrink: 0; | |
| transition: background var(--duration-fast) var(--ease-out); | |
| } | |
| .donation-card:hover .donation-icon { | |
| background: rgba(99, 102, 241, 0.15); | |
| } | |
| .donation-icon svg { | |
| width: 20px; | |
| height: 20px; | |
| } | |
| .donation-icon.bitcoin { color: #f7931a; } | |
| .donation-icon.ethereum { color: #627eea; } | |
| .donation-icon.sui { color: #4da2ff; } | |
| .donation-icon.kofi { color: #ff5e5b; } | |
| .donation-icon.trakteer { color: #be1e2d; } | |
| .donation-icon.qris { color: var(--color-primary); } | |
| .donation-info { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .donation-name { | |
| font-weight: 500; | |
| color: var(--color-gray-800); | |
| margin-bottom: 2px; | |
| } | |
| .donation-label { | |
| font-size: 0.8125rem; | |
| color: var(--color-gray-400); | |
| } | |
| .donation-address { | |
| font-family: var(--font-mono); | |
| font-size: 0.75rem; | |
| color: var(--color-gray-400); | |
| word-break: break-all; | |
| line-height: 1.4; | |
| } | |
| .donation-action { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 32px; | |
| height: 32px; | |
| color: var(--color-gray-400); | |
| flex-shrink: 0; | |
| transition: color var(--duration-fast) var(--ease-out); | |
| } | |
| .donation-card:hover .donation-action { | |
| color: var(--color-primary); | |
| } | |
| .donation-action svg { | |
| width: 16px; | |
| height: 16px; | |
| } | |
| /* Copy Badge */ | |
| .copy-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--space-1); | |
| padding: 2px var(--space-2); | |
| background: rgba(34, 197, 94, 0.1); | |
| color: var(--color-success); | |
| border-radius: var(--radius-sm); | |
| font-size: 0.6875rem; | |
| font-weight: 600; | |
| margin-left: var(--space-2); | |
| animation: fadeInScale 0.2s var(--ease-out); | |
| } | |
| @keyframes fadeInScale { | |
| from { | |
| opacity: 0; | |
| transform: scale(0.8); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| } | |
| /* Thank You Message */ | |
| .modal-thank-you { | |
| text-align: center; | |
| padding: var(--space-4); | |
| color: var(--color-gray-500); | |
| font-size: 0.875rem; | |
| } | |
| /* Donation Button in Footer */ | |
| .btn-donate { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--space-2); | |
| padding: var(--space-3) var(--space-5); | |
| background: rgba(255, 255, 255, 0.15); | |
| color: var(--color-white); | |
| border: 1.5px solid rgba(255, 255, 255, 0.3); | |
| border-radius: var(--radius-md); | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| font-family: inherit; | |
| cursor: pointer; | |
| transition: all var(--duration-fast) var(--ease-out); | |
| margin-bottom: var(--space-5); | |
| } | |
| .btn-donate:hover { | |
| background: rgba(255, 255, 255, 0.25); | |
| border-color: rgba(255, 255, 255, 0.5); | |
| transform: translateY(-2px); | |
| } | |
| .btn-donate svg { | |
| width: 16px; | |
| height: 16px; | |
| } | |
| /* QRIS Modal */ | |
| #qris-modal { | |
| z-index: 1001; | |
| } | |
| .qris-modal-container { | |
| max-width: 400px; | |
| } | |
| .qris-modal-body { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: var(--space-6); | |
| } | |
| .qris-image { | |
| width: 100%; | |
| max-width: 320px; | |
| height: auto; | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow-lg); | |
| margin-bottom: var(--space-6); | |
| } | |
| .btn-qris-download { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--space-2); | |
| padding: var(--space-3) var(--space-6); | |
| background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); | |
| color: var(--color-white); | |
| border: none; | |
| border-radius: var(--radius-md); | |
| font-size: 0.9375rem; | |
| font-weight: 500; | |
| font-family: inherit; | |
| text-decoration: none; | |
| cursor: pointer; | |
| transition: all var(--duration-fast) var(--ease-out); | |
| } | |
| .btn-qris-download:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35); | |
| } | |
| .btn-qris-download svg { | |
| width: 18px; | |
| height: 18px; | |
| } | |
| /* Responsive Modal */ | |
| @media (max-width: 640px) { | |
| .modal-container { | |
| max-height: 85vh; | |
| } | |
| .modal-body { | |
| padding: var(--space-4); | |
| } | |
| .donation-address { | |
| font-size: 0.6875rem; | |
| } | |
| .qris-image { | |
| max-width: 280px; | |
| } | |
| } |