/* QR Rapido Custom Theme */ :root { --qr-primary: #007BFF; --qr-secondary: #28A745; --qr-accent: #FF6B35; --qr-warning: #FFC107; --qr-success: #28A745; --qr-danger: #DC3545; --qr-dark: #343A40; --qr-light: #F8F9FA; } /* Global Styles */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; } .bg-gradient-primary { background: linear-gradient(135deg, var(--qr-primary) 0%, #0056B3 100%); } /* Generation Timer Styles */ .generation-timer { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem; background: #f8f9fa; border-radius: 20px; border: 2px solid var(--qr-primary); transition: all 0.3s ease; } .generation-timer.active { background: var(--qr-primary); color: white; animation: pulse 1.5s infinite; } /* Speed Badge Animation */ .speed-badge { animation: slideInRight 0.5s ease-out; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes slideInRight { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* QR Preview Placeholder */ .placeholder-qr { border: 2px dashed #dee2e6; border-radius: 8px; transition: all 0.3s ease; background: #f8f9fa; } .placeholder-qr:hover { border-color: var(--qr-primary); background: #e3f2fd; } /* Logo and Branding */ .navbar-brand svg { filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.1)); transition: transform 0.3s ease; } .navbar-brand:hover svg { transform: scale(1.05); } /* QR Preview Image */ #qr-preview img { border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease; max-width: 100%; height: auto; } #qr-preview img:hover { transform: scale(1.02); } /* Card Hover Effects */ .card { transition: all 0.3s ease; border-radius: 12px; } .card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.1); transform: translateY(-2px); } /* Button Styles */ .btn-check:checked + .btn { background-color: var(--qr-primary); border-color: var(--qr-primary); color: white; } .btn-primary { background: linear-gradient(135deg, var(--qr-primary) 0%, #0056B3 100%); border: none; transition: all 0.3s ease; } .btn-primary:hover { background: linear-gradient(135deg, #0056B3 0%, var(--qr-primary) 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3); } /* Form Controls */ .form-control:focus, .form-select:focus { border-color: var(--qr-primary); box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .form-control-lg { border-radius: 8px; } /* Speed Statistics Cards */ .card.border-success { border-color: var(--qr-success) !important; } .card.border-primary { border-color: var(--qr-primary) !important; } .card.border-warning { border-color: var(--qr-warning) !important; } /* Generation Stats Animation */ .generation-stats { animation: slideInRight 0.5s ease-out; } /* Ad Container Styles */ .ad-container { text-align: center; margin: 20px 0; padding: 15px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; position: relative; } .ad-label { font-size: 11px; color: #6c757d; margin-bottom: 8px; text-transform: uppercase; font-weight: 500; letter-spacing: 0.5px; } .ad-free-notice { text-align: center; border-left: 4px solid var(--qr-success); background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%); border-radius: 8px; } .ad-free-notice .fas { color: var(--qr-warning); } /* Loading Animations */ .spinner-border-sm { width: 1rem; height: 1rem; } /* Progress Bar for QR Generation */ .progress { height: 4px; border-radius: 2px; background-color: #e9ecef; } .progress-bar { background: linear-gradient(90deg, var(--qr-primary), var(--qr-accent)); } /* Speed Tips */ .list-unstyled li { padding: 0.25rem 0; transition: all 0.2s ease; } .list-unstyled li:hover { padding-left: 0.5rem; color: var(--qr-primary); } /* Responsive Design */ @media (max-width: 768px) { .generation-timer { font-size: 0.875rem; padding: 0.2rem 0.5rem; } .speed-badge .badge { font-size: 0.75rem; } .placeholder-qr { padding: 2rem 1rem; } .card-body { padding: 1rem; } .ad-container { margin: 10px 0; padding: 10px; } } /* Premium Features Styling */ .premium-feature { background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%); border-left: 4px solid var(--qr-warning); padding: 1rem; border-radius: 8px; margin: 1rem 0; } .premium-badge { background: linear-gradient(135deg, var(--qr-warning) 0%, #f39c12 100%); color: var(--qr-dark); border-radius: 20px; padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } /* Accordion Customization */ .accordion-button { background: var(--qr-light); border: none; border-radius: 8px !important; } .accordion-button:not(.collapsed) { background: var(--qr-primary); color: white; } .accordion-button:focus { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } /* Footer Styling */ footer { background: linear-gradient(135deg, var(--qr-dark) 0%, #2c3e50 100%); } footer a { text-decoration: none; transition: color 0.3s ease; } footer a:hover { color: var(--qr-primary) !important; } /* Language Selector */ .dropdown-toggle::after { margin-left: 0.5rem; } .dropdown-menu { border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border: none; } .dropdown-item { transition: all 0.2s ease; border-radius: 4px; margin: 2px 4px; } .dropdown-item:hover { background: var(--qr-primary); color: white; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; } ::-webkit-scrollbar-thumb { background: var(--qr-primary); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #0056b3; } /* Utility Classes */ .text-gradient { background: linear-gradient(135deg, var(--qr-primary) 0%, var(--qr-accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .shadow-custom { box-shadow: 0 8px 25px rgba(0, 123, 255, 0.15); } .border-gradient { border: 2px solid; border-image: linear-gradient(135deg, var(--qr-primary) 0%, var(--qr-accent) 100%) 1; } /* Print Styles */ @media print { .ad-container, .btn, .navbar, footer { display: none !important; } #qr-preview img { max-width: 300px; max-height: 300px; } } /* Dark Mode Support (future enhancement) */ @media (prefers-color-scheme: dark) { .card { background-color: #2d3748; color: #e2e8f0; } .placeholder-qr { background: #4a5568; border-color: #718096; } .form-control, .form-select { background-color: #4a5568; border-color: #718096; color: #e2e8f0; } }