LS_Technologies / static /css /style.css
ministerchief's picture
Update static/css/style.css
23755df verified
Raw
History Blame Contribute Delete
32.2 kB
/* =====================================================
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 !important;
font-weight:700;
}
p,
span,
label,
small,
strong,
li{
color:#000 !important;
}
.text-muted,
.text-light,
.text-white,
.text-muted-light,
.text-navy{
color:#444 !important;
}
/* =======================
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 !important;
font-size:28px;
font-weight:700;
}
.brand-highlight{
color:#fff;
}
/* Navigation */
.navbar-nav{
gap:12px;
}
/* Default Tabs */
.nav-link{
color:#fff !important;
font-weight:600;
padding:10px 22px !important;
border-radius:50px;
transition:.35s ease;
}
/* Hover */
.nav-link:hover{
background:rgba(255,255,255,.20);
color:#fff !important;
transform:translateY(-2px);
}
/* Active Tab */
.nav-link.active{
background:#fff;
color:var(--primary-dark) !important;
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)!important;
}
/* =======================
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)!important;
background:none!important;
-webkit-text-fill-color:inherit;
}
/* =======================
Cards
======================= */
.glass-card,
.edge-card,
.feature-box,
.partner-card,
.counter-card,
.service-panel,
.contact-form-card{
background:#fff!important;
border:1px solid var(--border)!important;
border-radius:18px;
backdrop-filter:none!important;
box-shadow:var(--shadow);
color:#000!important;
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)!important;
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!important;
border:1px solid #ddd;
color:#000!important;
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!important;
}
/* =======================
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 !important;
}
/* 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!important;
color:#000!important;
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) !important;
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) !important;
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 !important;
font-weight:700;
}
p,
span,
label,
small,
strong,
li{
color:#000 !important;
}
.text-muted,
.text-light,
.text-white,
.text-muted-light,
.text-navy{
color:#444 !important;
}
/* =======================
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 !important;
font-size:28px;
font-weight:700;
}
.brand-highlight{
color:#fff;
}
/* Navigation */
.navbar-nav{
gap:12px;
}
/* Default Tabs */
.nav-link{
color:#fff !important;
font-weight:600;
padding:10px 22px !important;
border-radius:50px;
transition:.35s ease;
}
/* Hover */
.nav-link:hover{
background:rgba(255,255,255,.20);
color:#fff !important;
transform:translateY(-2px);
}
/* Active Tab */
.nav-link.active{
background:#fff;
color:var(--primary-dark) !important;
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)!important;
}
/* =======================
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)!important;
background:none!important;
-webkit-text-fill-color:inherit;
}
/* =======================
Cards
======================= */
.glass-card,
.edge-card,
.feature-box,
.partner-card,
.counter-card,
.service-panel,
.contact-form-card{
background:#fff!important;
border:1px solid var(--border)!important;
border-radius:18px;
backdrop-filter:none!important;
box-shadow:var(--shadow);
color:#000!important;
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)!important;
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!important;
border:1px solid #ddd;
color:#000!important;
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!important;
}
/* =======================
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 !important;
}
/* 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 !important;
}
.social-icon i{
color:#fff !important;
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 !important;
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) !important;
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) !important;
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 !important;}
.chart-bar:nth-child(2){height:200px !important;}
.chart-bar:nth-child(3){height:260px !important;}
.chart-bar:nth-child(4){height:170px !important;}
.chart-bar:nth-child(5){height:230px !important;}
.chart-bar:nth-child(6){height:150px !important;}
/* =====================================
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);
}