Spaces:
Sleeping
Sleeping
| /* ===================================================== | |
| ASSETQR ENTERPRISE | |
| Premium Gold & White Theme | |
| All Text Black | |
| ===================================================== */ | |
| :root{ | |
| --primary:#C89B3C; | |
| --primary-dark:#8B6914; | |
| --primary-light:#E0C36D; | |
| --white:#FFFFFF; | |
| --off-white:#F4EFE3; | |
| --section:#ECE5D6; | |
| --border:#D8CFBE; | |
| --text:#000000; | |
| --muted:#555555; | |
| } | |
| /* ======================= | |
| Global | |
| ======================= */ | |
| html{ | |
| scroll-behavior:smooth; | |
| } | |
| body{ | |
| background:var(--off-white); | |
| color:var(--text); | |
| font-family:"Segoe UI",sans-serif; | |
| overflow-x:hidden; | |
| } | |
| section{ | |
| background:var(--section); | |
| padding:80px 0; | |
| } | |
| .container{ | |
| position:relative; | |
| z-index:2; | |
| } | |
| /* ======================= | |
| Typography | |
| ======================= */ | |
| h1,h2,h3,h4,h5,h6{ | |
| color:#000 ; | |
| font-weight:700; | |
| } | |
| p, | |
| span, | |
| label, | |
| small, | |
| strong, | |
| li{ | |
| color:#000 ; | |
| } | |
| .text-muted, | |
| .text-light, | |
| .text-white, | |
| .text-muted-light, | |
| .text-navy{ | |
| color:#444 ; | |
| } | |
| /* ======================= | |
| Links | |
| ======================= */ | |
| a{ | |
| color:#000; | |
| transition:.3s; | |
| text-decoration:none; | |
| } | |
| a:hover{ | |
| color:var(--primary-dark); | |
| } | |
| /* ======================= | |
| Navbar | |
| ======================= */ | |
| /* ====================================== | |
| Premium Golden Navbar | |
| ====================================== */ | |
| .premium-nav{ | |
| background:linear-gradient(135deg,#D4AF37,#B8860B); | |
| padding:15px 0; | |
| box-shadow:0 8px 25px rgba(184,134,11,.35); | |
| border-bottom:none; | |
| } | |
| /* Brand */ | |
| .navbar-brand{ | |
| color:#fff ; | |
| font-size:28px; | |
| font-weight:700; | |
| } | |
| .brand-highlight{ | |
| color:#fff; | |
| } | |
| /* Navigation */ | |
| .navbar-nav{ | |
| gap:12px; | |
| } | |
| /* Default Tabs */ | |
| .nav-link{ | |
| color:#fff ; | |
| font-weight:600; | |
| padding:10px 22px ; | |
| border-radius:50px; | |
| transition:.35s ease; | |
| } | |
| /* Hover */ | |
| .nav-link:hover{ | |
| background:rgba(255,255,255,.20); | |
| color:#fff ; | |
| transform:translateY(-2px); | |
| } | |
| /* Active Tab */ | |
| .nav-link.active{ | |
| background:#fff; | |
| color:var(--primary-dark) ; | |
| font-weight:700; | |
| box-shadow:0 8px 20px rgba(0,0,0,.15); | |
| } | |
| /* Active Hover */ | |
| .nav-link.active:hover{ | |
| background:#fff; | |
| color:var(--primary-dark); | |
| } | |
| /* ======================= | |
| Hero | |
| ======================= */ | |
| .hero-section{ | |
| background:linear-gradient(180deg,#ffffff,#FFF8EA); | |
| min-height:80vh; | |
| display:flex; | |
| align-items:center; | |
| margin-top:30px; /* Space after navbar */ | |
| padding-top:100px; | |
| } | |
| .hero-section::before, | |
| .hero-section::after{ | |
| display:none; | |
| } | |
| .text-gradient{ | |
| color:var(--primary-dark); | |
| background:none; | |
| -webkit-text-fill-color:inherit; | |
| } | |
| /* ======================= | |
| Cards | |
| ======================= */ | |
| .glass-card, | |
| .edge-card, | |
| .feature-box, | |
| .partner-card, | |
| .counter-card, | |
| .service-panel, | |
| .contact-form-card{ | |
| background:#fff; | |
| border:1px solid var(--border); | |
| border-radius:18px; | |
| backdrop-filter:none; | |
| box-shadow:var(--shadow); | |
| color:#000; | |
| transition:var(--transition); | |
| } | |
| .glass-card:hover, | |
| .edge-card:hover, | |
| .feature-box:hover, | |
| .partner-card:hover, | |
| .counter-card:hover, | |
| .service-panel:hover{ | |
| transform:translateY(-8px); | |
| border-color:var(--primary); | |
| box-shadow:0 15px 35px rgba(200,155,60,.25); | |
| } | |
| /* ======================= | |
| Icons | |
| ======================= */ | |
| .icon-wrap{ | |
| width:60px; | |
| height:60px; | |
| border-radius:14px; | |
| background:#FFF6DA; | |
| color:var(--primary-dark); | |
| display:flex; | |
| align-items:center; | |
| justify-content:center; | |
| font-size:24px; | |
| } | |
| .glass-card:hover .icon-wrap{ | |
| background:var(--primary); | |
| color:#fff; | |
| } | |
| /* ======================= | |
| Buttons | |
| ======================= */ | |
| .btn-premium-primary{ | |
| background:linear-gradient(135deg,#D4AF37,#B8860B); | |
| color:#fff; | |
| border:none; | |
| padding:14px 34px; | |
| border-radius:10px; | |
| font-weight:600; | |
| } | |
| .btn-premium-primary:hover{ | |
| background:#A67C1A; | |
| color:#fff; | |
| transform:translateY(-3px); | |
| } | |
| .btn-premium-outline{ | |
| background:#fff; | |
| border:2px solid var(--primary); | |
| color:#000; | |
| } | |
| .btn-premium-outline:hover{ | |
| background:var(--primary); | |
| color:#fff; | |
| } | |
| /* ======================= | |
| Forms | |
| ======================= */ | |
| .form-control, | |
| .form-select{ | |
| background:#fff; | |
| border:1px solid #ddd; | |
| color:#000; | |
| border-radius:10px; | |
| padding:12px; | |
| } | |
| .form-control::placeholder{ | |
| color:#777; | |
| } | |
| .form-control:focus, | |
| .form-select:focus{ | |
| border-color:var(--primary); | |
| box-shadow:0 0 0 .2rem rgba(200,155,60,.15); | |
| } | |
| /* ======================= | |
| Tables | |
| ======================= */ | |
| .table{ | |
| background:#fff; | |
| color:#000; | |
| border-radius:12px; | |
| overflow:hidden; | |
| } | |
| .table thead{ | |
| background:var(--primary); | |
| color:#fff; | |
| } | |
| .table th{ | |
| color:#fff; | |
| } | |
| /* ======================= | |
| QR Scanner | |
| ======================= */ | |
| .scanner-ui-frame{ | |
| background:#fff; | |
| border:2px solid var(--primary); | |
| border-radius:18px; | |
| box-shadow:var(--shadow); | |
| } | |
| .scanner-laser{ | |
| background:linear-gradient(to right,transparent,var(--primary),transparent); | |
| } | |
| /* ======================= | |
| Contact Section | |
| ======================= */ | |
| .contact-card, | |
| .contact-form-card{ | |
| background:#fff; | |
| border:1px solid var(--border); | |
| border-radius:22px; | |
| padding:35px; | |
| height:100%; | |
| box-shadow:0 12px 30px rgba(0,0,0,.08); | |
| } | |
| /* Contact Information */ | |
| .contact-item{ | |
| display:flex; | |
| align-items:flex-start; | |
| gap:18px; | |
| margin-bottom:30px; | |
| } | |
| .contact-item i{ | |
| width:52px; | |
| height:52px; | |
| display:flex; | |
| align-items:center; | |
| justify-content:center; | |
| border-radius:14px; | |
| background:linear-gradient(135deg,#D4AF37,#B8860B); | |
| color:#fff; | |
| font-size:20px; | |
| flex-shrink:0; | |
| } | |
| .contact-item h5{ | |
| margin-bottom:5px; | |
| font-weight:700; | |
| } | |
| .contact-item p{ | |
| margin:0; | |
| color:#666 ; | |
| } | |
| /* Form */ | |
| .contact-form-card label{ | |
| color:#000; | |
| font-weight:600; | |
| margin-bottom:8px; | |
| } | |
| .contact-form-card .form-control, | |
| .contact-form-card .form-select{ | |
| height:52px; | |
| border-radius:12px; | |
| } | |
| .contact-form-card textarea{ | |
| min-height:180px; | |
| resize:none; | |
| } | |
| /* Google Map */ | |
| .map-box{ | |
| margin-top:30px; | |
| overflow:hidden; | |
| border-radius:18px; | |
| border:3px solid var(--primary); | |
| } | |
| .map-box iframe{ | |
| width:100%; | |
| height:320px; | |
| border:0; | |
| } | |
| /* ======================= | |
| Footer | |
| ======================= */ | |
| footer{ | |
| background:#fff; | |
| color:#000; | |
| border-top:3px solid var(--primary); | |
| padding:40px 0; | |
| } | |
| /* ======================= | |
| Utilities | |
| ======================= */ | |
| .bg-soft-primary{ | |
| background:#FFF5D7; | |
| color:#8A6500; | |
| border:1px solid var(--primary); | |
| } | |
| .bg-success-soft{ | |
| background:#EAF7EE; | |
| color:#198754; | |
| } | |
| .dot{ | |
| background:#198754; | |
| } | |
| /* =========================== | |
| Image Responsive Fix | |
| =========================== */ | |
| img{ | |
| max-width:100%; | |
| height:auto; | |
| display:block; | |
| } | |
| /* Card Images */ | |
| .card img, | |
| .edge-card img, | |
| .glass-card img, | |
| .feature-box img, | |
| .partner-card img{ | |
| width:100%; | |
| height:220px; | |
| object-fit:cover; | |
| border-radius:12px; | |
| } | |
| /* Team Images */ | |
| .team-image{ | |
| height:240px; | |
| overflow:hidden; | |
| border-radius:16px; | |
| } | |
| .team-image img{ | |
| width:100%; | |
| height:100%; | |
| object-fit:cover; | |
| } | |
| /* Partner Logos */ | |
| .partner-image{ | |
| display:flex; | |
| justify-content:center; | |
| align-items:center; | |
| height:120px; | |
| } | |
| .partner-image img{ | |
| width:auto; | |
| max-width:180px; | |
| max-height:90px; | |
| object-fit:contain; | |
| } | |
| /* Hero Image */ | |
| .hero-image img, | |
| .hero-preview-card img{ | |
| width:100%; | |
| max-width:500px; | |
| height:auto; | |
| margin:auto; | |
| object-fit:contain; | |
| } | |
| /* QR Images */ | |
| .qr-placeholder img{ | |
| width:180px; | |
| height:180px; | |
| object-fit:contain; | |
| } | |
| /* Gallery Images */ | |
| .gallery img{ | |
| width:100%; | |
| height:250px; | |
| object-fit:cover; | |
| border-radius:15px; | |
| } | |
| .partner-image img{ | |
| max-width:160px; | |
| max-height:80px; | |
| width:auto; | |
| height:auto; | |
| object-fit:contain; | |
| } | |
| img{ | |
| max-width:100%; | |
| height:auto; | |
| object-fit:contain; | |
| } | |
| /* ===================================== | |
| Launch Scanner Button | |
| ===================================== */ | |
| .btn-premium-sm{ | |
| position: relative; | |
| overflow: hidden; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 12px 28px; | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| color: var(--white) ; | |
| font-weight: 600; | |
| font-size: 15px; | |
| letter-spacing: .5px; | |
| border: 2px solid var(--primary); | |
| border-radius: 50px; | |
| box-shadow: 0 8px 25px rgba(200,155,60,.30); | |
| transition: all .35s ease; | |
| } | |
| /* Shine Effect */ | |
| .btn-premium-sm::before{ | |
| content:""; | |
| position:absolute; | |
| top:0; | |
| left:-120%; | |
| width:60%; | |
| height:100%; | |
| background:linear-gradient( | |
| 120deg, | |
| transparent, | |
| rgba(255,255,255,.7), | |
| transparent | |
| ); | |
| transition:.7s; | |
| } | |
| .btn-premium-sm:hover::before{ | |
| left:140%; | |
| } | |
| /* Hover */ | |
| .btn-premium-sm:hover{ | |
| background: var(--white); | |
| color: var(--primary-dark) ; | |
| border-color: var(--primary-dark); | |
| transform: translateY(-4px); | |
| box-shadow: 0 15px 35px rgba(200,155,60,.40); | |
| } | |
| /* Active */ | |
| .btn-premium-sm:active{ | |
| transform: scale(.96); | |
| } | |
| /* Focus */ | |
| .btn-premium-sm:focus{ | |
| box-shadow: 0 0 0 .25rem rgba(200,155,60,.25); | |
| } | |
| /* Icon */ | |
| .btn-premium-sm i{ | |
| margin-right:8px; | |
| transition:.35s; | |
| } | |
| .btn-premium-sm:hover i{ | |
| transform:translateX(3px); | |
| } | |
| .company-logo{ | |
| height:60px; | |
| width:auto; | |
| transition:.35s; | |
| } | |
| .company-logo:hover{ | |
| transform:scale(1.05); | |
| } | |
| /* =============================== | |
| QR Scanner Animation | |
| ================================ */ | |
| .scanner-container{ | |
| display:flex; | |
| justify-content:center; | |
| align-items:center; | |
| margin:25px 0; | |
| } | |
| .scanner-frame{ | |
| width:220px; | |
| height:220px; | |
| position:relative; | |
| border-radius:18px; | |
| background:#fff; | |
| border:2px solid #D4AF37; | |
| overflow:hidden; | |
| } | |
| /* QR */ | |
| .scanner-qr{ | |
| width:150px; | |
| height:150px; | |
| object-fit:contain; | |
| position:absolute; | |
| left:50%; | |
| top:50%; | |
| transform:translate(-50%,-50%); | |
| } | |
| /* Scanner Line */ | |
| .scan-line{ | |
| position:absolute; | |
| left:0; | |
| width:100%; | |
| height:4px; | |
| background:linear-gradient( | |
| 90deg, | |
| transparent, | |
| #00E5FF, | |
| transparent | |
| ); | |
| box-shadow:0 0 18px #00E5FF; | |
| animation:scanMove 2.5s linear infinite; | |
| } | |
| @keyframes scanMove{ | |
| 0%{ | |
| top:0; | |
| } | |
| 50%{ | |
| top:210px; | |
| } | |
| 100%{ | |
| top:0; | |
| } | |
| } | |
| /* Scanner Corners */ | |
| .scanner-corners{ | |
| position:absolute; | |
| width:28px; | |
| height:28px; | |
| border:4px solid #00E5FF; | |
| } | |
| .corner-tl{ | |
| left:8px; | |
| top:8px; | |
| border-right:none; | |
| border-bottom:none; | |
| } | |
| .corner-tr{ | |
| right:8px; | |
| top:8px; | |
| border-left:none; | |
| border-bottom:none; | |
| } | |
| .corner-bl{ | |
| left:8px; | |
| bottom:8px; | |
| border-right:none; | |
| border-top:none; | |
| } | |
| .corner-br{ | |
| right:8px; | |
| bottom:8px; | |
| border-left:none; | |
| border-top:none; | |
| } | |
| /* ===================================================== | |
| ASSETQR ENTERPRISE | |
| Premium Gold & White Theme | |
| All Text Black | |
| ===================================================== */ | |
| :root{ | |
| --primary:#C89B3C; | |
| --primary-dark:#8B6914; | |
| --primary-light:#E0C36D; | |
| --white:#FFFFFF; | |
| --off-white:#F4EFE3; | |
| --section:#ECE5D6; | |
| --border:#D8CFBE; | |
| --text:#000000; | |
| --muted:#555555; | |
| } | |
| /* ======================= | |
| Global | |
| ======================= */ | |
| html{ | |
| scroll-behavior:smooth; | |
| } | |
| body{ | |
| background:var(--off-white); | |
| color:var(--text); | |
| font-family:"Segoe UI",sans-serif; | |
| overflow-x:hidden; | |
| } | |
| section{ | |
| background:var(--section); | |
| padding:80px 0; | |
| } | |
| .container{ | |
| position:relative; | |
| z-index:2; | |
| } | |
| /* ======================= | |
| Typography | |
| ======================= */ | |
| h1,h2,h3,h4,h5,h6{ | |
| color:#000 ; | |
| font-weight:700; | |
| } | |
| p, | |
| span, | |
| label, | |
| small, | |
| strong, | |
| li{ | |
| color:#000 ; | |
| } | |
| .text-muted, | |
| .text-light, | |
| .text-white, | |
| .text-muted-light, | |
| .text-navy{ | |
| color:#444 ; | |
| } | |
| /* ======================= | |
| Links | |
| ======================= */ | |
| a{ | |
| color:#000; | |
| transition:.3s; | |
| text-decoration:none; | |
| } | |
| a:hover{ | |
| color:var(--primary-dark); | |
| } | |
| /* ======================= | |
| Navbar | |
| ======================= */ | |
| /* ====================================== | |
| Premium Golden Navbar | |
| ====================================== */ | |
| .premium-nav{ | |
| background:linear-gradient(135deg,#D4AF37,#B8860B); | |
| padding:15px 0; | |
| box-shadow:0 8px 25px rgba(184,134,11,.35); | |
| border-bottom:none; | |
| } | |
| /* Brand */ | |
| .navbar-brand{ | |
| color:#fff ; | |
| font-size:28px; | |
| font-weight:700; | |
| } | |
| .brand-highlight{ | |
| color:#fff; | |
| } | |
| /* Navigation */ | |
| .navbar-nav{ | |
| gap:12px; | |
| } | |
| /* Default Tabs */ | |
| .nav-link{ | |
| color:#fff ; | |
| font-weight:600; | |
| padding:10px 22px ; | |
| border-radius:50px; | |
| transition:.35s ease; | |
| } | |
| /* Hover */ | |
| .nav-link:hover{ | |
| background:rgba(255,255,255,.20); | |
| color:#fff ; | |
| transform:translateY(-2px); | |
| } | |
| /* Active Tab */ | |
| .nav-link.active{ | |
| background:#fff; | |
| color:var(--primary-dark) ; | |
| font-weight:700; | |
| box-shadow:0 8px 20px rgba(0,0,0,.15); | |
| } | |
| /* Active Hover */ | |
| .nav-link.active:hover{ | |
| background:#fff; | |
| color:var(--primary-dark); | |
| } | |
| /* ======================= | |
| Hero | |
| ======================= */ | |
| .hero-section{ | |
| background:linear-gradient(180deg,#ffffff,#FFF8EA); | |
| min-height:80vh; | |
| display:flex; | |
| align-items:center; | |
| margin-top:30px; /* Space after navbar */ | |
| padding-top:100px; | |
| } | |
| .hero-section::before, | |
| .hero-section::after{ | |
| display:none; | |
| } | |
| .text-gradient{ | |
| color:var(--primary-dark); | |
| background:none; | |
| -webkit-text-fill-color:inherit; | |
| } | |
| /* ======================= | |
| Cards | |
| ======================= */ | |
| .glass-card, | |
| .edge-card, | |
| .feature-box, | |
| .partner-card, | |
| .counter-card, | |
| .service-panel, | |
| .contact-form-card{ | |
| background:#fff; | |
| border:1px solid var(--border); | |
| border-radius:18px; | |
| backdrop-filter:none; | |
| box-shadow:var(--shadow); | |
| color:#000; | |
| transition:var(--transition); | |
| } | |
| .glass-card:hover, | |
| .edge-card:hover, | |
| .feature-box:hover, | |
| .partner-card:hover, | |
| .counter-card:hover, | |
| .service-panel:hover{ | |
| transform:translateY(-8px); | |
| border-color:var(--primary); | |
| box-shadow:0 15px 35px rgba(200,155,60,.25); | |
| } | |
| /* ======================= | |
| Icons | |
| ======================= */ | |
| .icon-wrap{ | |
| width:60px; | |
| height:60px; | |
| border-radius:14px; | |
| background:#FFF6DA; | |
| color:var(--primary-dark); | |
| display:flex; | |
| align-items:center; | |
| justify-content:center; | |
| font-size:24px; | |
| } | |
| .glass-card:hover .icon-wrap{ | |
| background:var(--primary); | |
| color:#fff; | |
| } | |
| /* ======================= | |
| Buttons | |
| ======================= */ | |
| .btn-premium-primary{ | |
| background:linear-gradient(135deg,#D4AF37,#B8860B); | |
| color:#fff; | |
| border:none; | |
| padding:14px 34px; | |
| border-radius:10px; | |
| font-weight:600; | |
| } | |
| .btn-premium-primary:hover{ | |
| background:#A67C1A; | |
| color:#fff; | |
| transform:translateY(-3px); | |
| } | |
| .btn-premium-outline{ | |
| background:#fff; | |
| border:2px solid var(--primary); | |
| color:#000; | |
| } | |
| .btn-premium-outline:hover{ | |
| background:var(--primary); | |
| color:#fff; | |
| } | |
| /* ======================= | |
| Forms | |
| ======================= */ | |
| .form-control, | |
| .form-select{ | |
| background:#fff; | |
| border:1px solid #ddd; | |
| color:#000; | |
| border-radius:10px; | |
| padding:12px; | |
| } | |
| .form-control::placeholder{ | |
| color:#777; | |
| } | |
| .form-control:focus, | |
| .form-select:focus{ | |
| border-color:var(--primary); | |
| box-shadow:0 0 0 .2rem rgba(200,155,60,.15); | |
| } | |
| /* ======================= | |
| Tables | |
| ======================= */ | |
| .table{ | |
| background:#fff; | |
| color:#000; | |
| border-radius:12px; | |
| overflow:hidden; | |
| } | |
| .table thead{ | |
| background:var(--primary); | |
| color:#fff; | |
| } | |
| .table th{ | |
| color:#fff; | |
| } | |
| /* ======================= | |
| QR Scanner | |
| ======================= */ | |
| .scanner-ui-frame{ | |
| background:#fff; | |
| border:2px solid var(--primary); | |
| border-radius:18px; | |
| box-shadow:var(--shadow); | |
| } | |
| .scanner-laser{ | |
| background:linear-gradient(to right,transparent,var(--primary),transparent); | |
| } | |
| /* ======================= | |
| Contact Section | |
| ======================= */ | |
| .contact-card, | |
| .contact-form-card{ | |
| background:#fff; | |
| border:1px solid var(--border); | |
| border-radius:22px; | |
| padding:35px; | |
| height:100%; | |
| box-shadow:0 12px 30px rgba(0,0,0,.08); | |
| } | |
| /* Contact Information */ | |
| .contact-item{ | |
| display:flex; | |
| align-items:flex-start; | |
| gap:18px; | |
| margin-bottom:30px; | |
| } | |
| .contact-item i{ | |
| width:52px; | |
| height:52px; | |
| display:flex; | |
| align-items:center; | |
| justify-content:center; | |
| border-radius:14px; | |
| background:linear-gradient(135deg,#D4AF37,#B8860B); | |
| color:#fff; | |
| font-size:20px; | |
| flex-shrink:0; | |
| } | |
| .contact-item h5{ | |
| margin-bottom:5px; | |
| font-weight:700; | |
| } | |
| .contact-item p{ | |
| margin:0; | |
| color:#666 ; | |
| } | |
| /* Form */ | |
| .contact-form-card label{ | |
| color:#000; | |
| font-weight:600; | |
| margin-bottom:8px; | |
| } | |
| .contact-form-card .form-control, | |
| .contact-form-card .form-select{ | |
| height:52px; | |
| border-radius:12px; | |
| } | |
| .contact-form-card textarea{ | |
| min-height:180px; | |
| resize:none; | |
| } | |
| /* Google Map */ | |
| .map-box{ | |
| margin-top:30px; | |
| overflow:hidden; | |
| border-radius:18px; | |
| border:3px solid var(--primary); | |
| } | |
| .map-box iframe{ | |
| width:100%; | |
| height:320px; | |
| border:0; | |
| } | |
| /* ========================== | |
| Footer Section | |
| ========================== */ | |
| .footer-section{ | |
| background:#ffffff; | |
| border-top:3px solid #D4AF37; | |
| padding:50px 0 25px; | |
| overflow:hidden; | |
| } | |
| /* Remove Bootstrap negative margin issue */ | |
| .footer-section .row{ | |
| margin-left:0; | |
| margin-right:0; | |
| } | |
| /* Footer Cards */ | |
| .footer-card{ | |
| background:#fff; | |
| border:2px solid #D4AF37; | |
| border-radius:18px; | |
| padding:20px; | |
| height:100%; | |
| box-shadow:0 8px 20px rgba(212,175,55,.12); | |
| transition:.3s; | |
| } | |
| .footer-card:hover{ | |
| transform:translateY(-4px); | |
| box-shadow:0 15px 35px rgba(212,175,55,.25); | |
| } | |
| /* Heading */ | |
| .footer-card h5{ | |
| margin-bottom:18px; | |
| font-weight:700; | |
| } | |
| /* Text */ | |
| .footer-card p{ | |
| margin-bottom:10px; | |
| line-height:1.7; | |
| } | |
| /* Links */ | |
| .footer-links{ | |
| list-style:none; | |
| padding:0; | |
| margin:0; | |
| } | |
| .footer-links li{ | |
| margin-bottom:12px; | |
| } | |
| .footer-links a{ | |
| color:#333; | |
| text-decoration:none; | |
| } | |
| .footer-links a:hover{ | |
| color:#C89B3C; | |
| } | |
| /* Social Icons */ | |
| .social-icons{ | |
| display:flex; | |
| gap:12px; | |
| margin-bottom:20px; | |
| flex-wrap:wrap; | |
| } | |
| .social-icon{ | |
| width:44px; | |
| height:44px; | |
| display:flex; | |
| justify-content:center; | |
| align-items:center; | |
| border-radius:50%; | |
| background:linear-gradient(135deg,#FFD54F,#D4AF37,#B8860B); | |
| color:#fff ; | |
| } | |
| .social-icon i{ | |
| color:#fff ; | |
| font-size:18px; | |
| line-height:1; | |
| display:flex; | |
| align-items:center; | |
| justify-content:center; | |
| } | |
| /* Fix only the email icon */ | |
| .social-icon .fa-envelope{ | |
| position:relative; | |
| top:-1px; /* adjust between -1px and -2px if needed */ | |
| left:0; | |
| } | |
| /* Mobile */ | |
| @media(max-width:991px){ | |
| .footer-card{ | |
| margin-bottom:20px; | |
| } | |
| } | |
| .footer-section p i{ | |
| color:#C89B3C; | |
| } | |
| .footer-section hr{ | |
| border-color:#d9c48a; | |
| } | |
| /* ========================== | |
| Compact Premium Footer Cards | |
| ========================== */ | |
| .footer-card{ | |
| background:#ffffff; | |
| border:2px solid #D4AF37; | |
| border-radius:16px; | |
| padding:18px 20px; /* Reduced padding */ | |
| height:100%; | |
| box-shadow:0 6px 18px rgba(212,175,55,.12); | |
| transition:.3s; | |
| } | |
| .footer-card:hover{ | |
| transform:translateY(-3px); | |
| border-color:#B8860B; | |
| box-shadow:0 10px 25px rgba(212,175,55,.22); | |
| } | |
| /* Headings */ | |
| .footer-card h4, | |
| .footer-card h5{ | |
| margin-bottom:12px; | |
| font-size:22px; | |
| color:#000; | |
| } | |
| /* Paragraphs */ | |
| .footer-card p{ | |
| margin-bottom:8px; | |
| line-height:1.5; | |
| font-size:15px; | |
| } | |
| /* Quick Links */ | |
| .footer-links{ | |
| margin:0; | |
| padding:0; | |
| } | |
| .footer-links li{ | |
| margin-bottom:8px; | |
| } | |
| .footer-links a{ | |
| color:#444; | |
| text-decoration:none; | |
| font-size:15px; | |
| } | |
| .footer-links i{ | |
| color:#D4AF37; | |
| margin-right:8px; | |
| } | |
| /* Social Icons */ | |
| .social-icons{ | |
| display:flex; | |
| gap:10px; | |
| flex-wrap:wrap; | |
| margin-bottom:15px; | |
| } | |
| .social-icon{ | |
| width:42px; | |
| height:42px; | |
| border-radius:50%; | |
| display:flex; | |
| align-items:center; | |
| justify-content:center; | |
| background:linear-gradient(135deg,#FFD54F,#D4AF37,#B8860B); | |
| color:#fff ; | |
| font-size:17px; | |
| transition:.3s; | |
| } | |
| .social-icon:hover{ | |
| transform:translateY(-3px); | |
| } | |
| /* Contact */ | |
| .footer-card .fa-phone, | |
| .footer-card .fa-envelope, | |
| .footer-card .fa-globe{ | |
| color:#D4AF37; | |
| margin-right:8px; | |
| } | |
| .footer-card p:last-child{ | |
| margin-bottom:0; | |
| } | |
| /* ======================= | |
| Utilities | |
| ======================= */ | |
| .bg-soft-primary{ | |
| background:#FFF5D7; | |
| color:#8A6500; | |
| border:1px solid var(--primary); | |
| } | |
| .bg-success-soft{ | |
| background:#EAF7EE; | |
| color:#198754; | |
| } | |
| .dot{ | |
| background:#198754; | |
| } | |
| /* =========================== | |
| Image Responsive Fix | |
| =========================== */ | |
| img{ | |
| max-width:100%; | |
| height:auto; | |
| display:block; | |
| } | |
| /* Card Images */ | |
| .card img, | |
| .edge-card img, | |
| .glass-card img, | |
| .feature-box img, | |
| .partner-card img{ | |
| width:100%; | |
| height:220px; | |
| object-fit:cover; | |
| border-radius:12px; | |
| } | |
| /* Team Images */ | |
| .team-image{ | |
| height:240px; | |
| overflow:hidden; | |
| border-radius:16px; | |
| } | |
| .team-image img{ | |
| width:100%; | |
| height:100%; | |
| object-fit:cover; | |
| } | |
| /* Partner Logos */ | |
| .partner-image{ | |
| display:flex; | |
| justify-content:center; | |
| align-items:center; | |
| height:120px; | |
| } | |
| .partner-image img{ | |
| width:auto; | |
| max-width:180px; | |
| max-height:90px; | |
| object-fit:contain; | |
| } | |
| /* Hero Image */ | |
| .hero-image img, | |
| .hero-preview-card img{ | |
| width:100%; | |
| max-width:500px; | |
| height:auto; | |
| margin:auto; | |
| object-fit:contain; | |
| } | |
| /* QR Images */ | |
| .qr-placeholder img{ | |
| width:180px; | |
| height:180px; | |
| object-fit:contain; | |
| } | |
| /* Gallery Images */ | |
| .gallery img{ | |
| width:100%; | |
| height:250px; | |
| object-fit:cover; | |
| border-radius:15px; | |
| } | |
| .partner-image img{ | |
| max-width:160px; | |
| max-height:80px; | |
| width:auto; | |
| height:auto; | |
| object-fit:contain; | |
| } | |
| img{ | |
| max-width:100%; | |
| height:auto; | |
| object-fit:contain; | |
| } | |
| /* ===================================== | |
| Launch Scanner Button | |
| ===================================== */ | |
| .btn-premium-sm{ | |
| position: relative; | |
| overflow: hidden; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 12px 28px; | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| color: var(--white) ; | |
| font-weight: 600; | |
| font-size: 15px; | |
| letter-spacing: .5px; | |
| border: 2px solid var(--primary); | |
| border-radius: 50px; | |
| box-shadow: 0 8px 25px rgba(200,155,60,.30); | |
| transition: all .35s ease; | |
| } | |
| /* Shine Effect */ | |
| .btn-premium-sm::before{ | |
| content:""; | |
| position:absolute; | |
| top:0; | |
| left:-120%; | |
| width:60%; | |
| height:100%; | |
| background:linear-gradient( | |
| 120deg, | |
| transparent, | |
| rgba(255,255,255,.7), | |
| transparent | |
| ); | |
| transition:.7s; | |
| } | |
| .btn-premium-sm:hover::before{ | |
| left:140%; | |
| } | |
| /* Hover */ | |
| .btn-premium-sm:hover{ | |
| background: var(--white); | |
| color: var(--primary-dark) ; | |
| border-color: var(--primary-dark); | |
| transform: translateY(-4px); | |
| box-shadow: 0 15px 35px rgba(200,155,60,.40); | |
| } | |
| /* Active */ | |
| .btn-premium-sm:active{ | |
| transform: scale(.96); | |
| } | |
| /* Focus */ | |
| .btn-premium-sm:focus{ | |
| box-shadow: 0 0 0 .25rem rgba(200,155,60,.25); | |
| } | |
| /* Icon */ | |
| .btn-premium-sm i{ | |
| margin-right:8px; | |
| transition:.35s; | |
| } | |
| .btn-premium-sm:hover i{ | |
| transform:translateX(3px); | |
| } | |
| .company-logo{ | |
| height:60px; | |
| width:auto; | |
| transition:.35s; | |
| } | |
| .company-logo:hover{ | |
| transform:scale(1.05); | |
| } | |
| /* =============================== | |
| QR Scanner Animation | |
| ================================ */ | |
| .scanner-container{ | |
| display:flex; | |
| justify-content:center; | |
| align-items:center; | |
| margin:25px 0; | |
| } | |
| .scanner-frame{ | |
| width:220px; | |
| height:220px; | |
| position:relative; | |
| border-radius:18px; | |
| background:#fff; | |
| border:2px solid #D4AF37; | |
| overflow:hidden; | |
| } | |
| /* QR */ | |
| .scanner-qr{ | |
| width:150px; | |
| height:150px; | |
| object-fit:contain; | |
| position:absolute; | |
| left:50%; | |
| top:50%; | |
| transform:translate(-50%,-50%); | |
| } | |
| /* Scanner Line */ | |
| .scan-line{ | |
| position:absolute; | |
| left:0; | |
| width:100%; | |
| height:4px; | |
| background:linear-gradient( | |
| 90deg, | |
| transparent, | |
| #00E5FF, | |
| transparent | |
| ); | |
| box-shadow:0 0 18px #00E5FF; | |
| animation:scanMove 2.5s linear infinite; | |
| } | |
| @keyframes scanMove{ | |
| 0%{ | |
| top:0; | |
| } | |
| 50%{ | |
| top:210px; | |
| } | |
| 100%{ | |
| top:0; | |
| } | |
| } | |
| /* Scanner Corners */ | |
| .scanner-corners{ | |
| position:absolute; | |
| width:28px; | |
| height:28px; | |
| border:4px solid #00E5FF; | |
| } | |
| .corner-tl{ | |
| left:8px; | |
| top:8px; | |
| border-right:none; | |
| border-bottom:none; | |
| } | |
| .corner-tr{ | |
| right:8px; | |
| top:8px; | |
| border-left:none; | |
| border-bottom:none; | |
| } | |
| .corner-bl{ | |
| left:8px; | |
| bottom:8px; | |
| border-right:none; | |
| border-top:none; | |
| } | |
| .corner-br{ | |
| right:8px; | |
| bottom:8px; | |
| border-left:none; | |
| border-top:none; | |
| } | |
| /* ========================== | |
| Dashboard Bar Graph | |
| ========================== */ | |
| .mockup-chart-container{ | |
| height:300px; | |
| width:100%; | |
| display:flex; | |
| align-items:flex-end; | |
| justify-content:space-around; | |
| gap:20px; | |
| padding:20px; | |
| background:#fff; | |
| border-radius:15px; | |
| border:1px solid #ddd; | |
| } | |
| .chart-bar{ | |
| width:60px; | |
| background:#C89B3C; | |
| border-radius:10px 10px 0 0; | |
| display:block; | |
| min-height:20px; | |
| } | |
| .chart-bar:nth-child(1){height:120px ;} | |
| .chart-bar:nth-child(2){height:200px ;} | |
| .chart-bar:nth-child(3){height:260px ;} | |
| .chart-bar:nth-child(4){height:170px ;} | |
| .chart-bar:nth-child(5){height:230px ;} | |
| .chart-bar:nth-child(6){height:150px ;} | |
| /* ===================================== | |
| MSME Badge | |
| ===================================== */ | |
| .msme-badge{ | |
| display:inline-flex; | |
| align-items:center; | |
| gap:16px; | |
| background:#ffffff; | |
| border:2px solid #D4AF37; | |
| border-radius:16px; | |
| padding:14px 22px; | |
| box-shadow:0 10px 25px rgba(212,175,55,.18); | |
| transition:.35s; | |
| } | |
| .msme-badge:hover{ | |
| transform:translateY(-3px); | |
| box-shadow:0 15px 35px rgba(212,175,55,.30); | |
| } | |
| .msme-badge i{ | |
| font-size:34px; | |
| color:#D4AF37; | |
| } | |
| .msme-badge strong{ | |
| display:block; | |
| font-size:16px; | |
| color:#000; | |
| } | |
| .msme-badge small{ | |
| display:block; | |
| color:#666; | |
| margin-top:3px; | |
| } | |
| /* ===================================== | |
| MSME Recognition Section | |
| ===================================== */ | |
| .msme-section{ | |
| background:linear-gradient( | |
| 135deg, | |
| #FFFDF8 0%, | |
| #FFF9EC 50%, | |
| #FFFDF8 100% | |
| ); | |
| border:2px solid #D4AF37; | |
| border-radius:25px; | |
| padding:45px; | |
| position:relative; | |
| overflow:hidden; | |
| box-shadow: | |
| 0 0 20px rgba(212,175,55,.18), | |
| 0 15px 40px rgba(0,0,0,.08); | |
| transition:.4s; | |
| } | |
| .msme-section:hover{ | |
| transform:translateY(-5px); | |
| box-shadow: | |
| 0 0 30px rgba(212,175,55,.30), | |
| 0 20px 50px rgba(0,0,0,.10); | |
| } | |
| .msme-section::before{ | |
| content:""; | |
| position:absolute; | |
| inset:0; | |
| border-radius:25px; | |
| padding:2px; | |
| background:linear-gradient( | |
| 135deg, | |
| #FFD54F, | |
| #D4AF37, | |
| #B8860B, | |
| #FFD54F | |
| ); | |
| -webkit-mask: | |
| linear-gradient(#fff 0 0) content-box, | |
| linear-gradient(#fff 0 0); | |
| -webkit-mask-composite:xor; | |
| mask-composite:exclude; | |
| animation:borderGlow 4s linear infinite; | |
| } | |
| @keyframes borderGlow{ | |
| 0%{ | |
| filter:hue-rotate(0deg); | |
| } | |
| 100%{ | |
| filter:hue-rotate(25deg); | |
| } | |
| } | |
| .msme-icon{ | |
| width:120px; | |
| height:120px; | |
| margin:auto; | |
| border-radius:50%; | |
| display:flex; | |
| justify-content:center; | |
| align-items:center; | |
| background:linear-gradient(135deg,#FFD54F,#B8860B); | |
| color:#fff; | |
| font-size:55px; | |
| box-shadow:0 0 25px rgba(212,175,55,.45); | |
| } | |
| .info-box{ | |
| background:#fafafa; | |
| border-left:5px solid #D4AF37; | |
| border-radius:12px; | |
| padding:18px; | |
| margin-top:10px; | |
| font-size:16px; | |
| box-shadow:0 6px 15px rgba(0,0,0,.05); | |
| } | |