Update static/css/style.css

static/css/style.css

@@ -1,668 +1,264 @@
-/* ==========================================================================
-   1. Core Variables & Elite Design Tokens
-   ========================================================================== */
-:root {
-    /* Corporate Palette Matrix */
-    --navy-primary: #0A192F;
-    --navy-dark: #020C1B;
-    --navy-light: #112240;
-    --blue-accent: #0071E3;
-    --blue-glow: rgba(0, 113, 227, 0.4);
-    --grey-light: #F4F6F9;
-    --grey-text: #64748B;
-    
-    /* True Glassmorphism Structural Specs */
-    --glass-bg: rgba(255, 255, 255, 0.03);
-    --glass-bg-hover: rgba(255, 255, 255, 0.07);
-    --glass-border: rgba(255, 255, 255, 0.08);
-    --glass-border-hover: rgba(255, 255, 255, 0.18);
-    --glass-glow: 0 8px 32px 0 rgba(2, 12, 27, 0.37);
-
-    /* Animation Curve Definitions */
-    --transition-premium: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
-}
+:root{
 
-/* ==========================================================================
-   2. Micro-Typography & Global Scaffolding
-   ========================================================================== */
-html,
-body{
-    margin:0;
-    padding:0;
-    overflow-x:hidden;
-}
+    /* Primary Colors */
+    --primary:#C89B3C;
+    --primary-dark:#A67C1A;
+    --primary-light:#E6C56D;
 
-.navbar-nav{
-    list-style:none !important;
-    padding-left:0 !important;
-}
+    /* Backgrounds */
+    --bg:#FAFAF7;
+    --bg-light:#FFFFFF;
+    --bg-soft:#FFF8EA;
 
-.navbar-toggler{
-    border:none;
-    box-shadow:none !important;
-}
+    /* Text */
+    --text:#222222;
+    --text-light:#555555;
+    --text-muted:#777777;
 
-.hero-section{
-    position:relative;
-    min-height:100vh;
-    display:flex;
-    align-items:center;
-}
+    /* Borders */
+    --border:#E5E5E5;
 
-.hero-preview-card{
-    border-radius:24px;
-}
+    /* Cards */
+    --card:#FFFFFF;
+    --card-hover:#FFFDF7;
 
-.qr-placeholder{
-    height:220px;
-    border-radius:20px;
-    background:rgba(255,255,255,.04);
-    border:1px solid rgba(255,255,255,.08);
-}
+    /* Status */
+    --success:#198754;
+    --warning:#F0AD4E;
+    --danger:#DC3545;
 
-.feature-box{
-    transition:.35s ease;
-}
+    /* Shadow */
+    --shadow:0 8px 25px rgba(0,0,0,.08);
 
-.feature-box:hover{
-    transform:translateY(-10px);
-    box-shadow:0 20px 40px rgba(0,113,227,.15);
-}
+    /* Radius */
+    --radius:16px;
 
-/* ==========================================================================
-   3. Navigation Interface Ecosystem
-   ========================================================================== */
-.premium-nav {
-    background: rgba(2, 12, 27, 0.75);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-    padding: 18px 0;
-    transition: var(--transition-premium);
+    /* Transition */
+    --transition:.35s ease;
 }
+body{
 
-.navbar-brand {
-    font-weight: 700;
-    font-size: 1.25rem;
-    letter-spacing: -0.5px;
-    color: #FFFFFF !important;
-}
+background:var(--bg);
 
-.brand-highlight {
-    color: var(--blue-accent);
-    position: relative;
-    text-shadow: 0 0 15px var(--blue-glow);
-}
+color:var(--text);
 
-.nav-link {
-    color: rgba(255, 255, 255, 0.75) !important;
-    font-size: 0.875rem;
-    font-weight: 500;
-    margin-left: 20px;
-    position: relative;
-    transition: var(--transition-premium);
-}
+font-family:"Segoe UI",sans-serif;
 
-.nav-link:hover, 
-.nav-link.active {
-    color: #FFFFFF !important;
 }
+.premium-nav{
 
-/* Modern Minimalist Link Indicator */
-.nav-link::after {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 2px;
-    bottom: -4px;
-    left: 0;
-    background-color: var(--blue-accent);
-    box-shadow: 0 0 8px var(--blue-accent);
-    transition: var(--transition-premium);
-}
+background:white;
 
-.nav-link:hover::after,
-.nav-link.active::after {
-    width: 100%;
-}
+border-bottom:3px solid var(--primary);
 
-/* ==========================================================================
-   4. High-End SaaS Hero & Kinetic Backgrounds
-   ========================================================================== */
-.hero-section {
-    min-height: 100vh;
-    background: radial-gradient(circle at 90% 10%, var(--navy-light) 0%, var(--navy-dark) 100%);
-    padding-top: 120px;
-}
+box-shadow:0 3px 18px rgba(0,0,0,.08);
 
-.animated-bg {
-    position: absolute;
-    top: -25%;
-    left: -25%;
-    width: 150%;
-    height: 150%;
-    background: radial-gradient(circle, rgba(0, 113, 227, 0.12) 0%, transparent 50%);
-    animation: floatingMesh 20s infinite alternate ease-in-out;
-    z-index: 1;
-    pointer-events: none;
 }
 
-@keyframes floatingMesh {
-    0% { transform: translate(0, 0) scale(1); }
-    100% { transform: translate(5%, 8%) scale(1.1); }
-}
+.navbar-brand{
 
-/* Typography Gradient Layering */
-.text-gradient {
-    background: linear-gradient(135deg, #FFFFFF 20%, #8AB4F8 50%, #0071E3 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-size: 200% auto;
-    animation: shineText 6s linear infinite;
-}
+color:var(--primary-dark)!important;
 
-@keyframes shineText {
-    to { background-position: 200% center; }
-}
+font-weight:700;
 
-.text-muted-light {
-    color: #A8B2D1;
-    font-weight: 400;
-    line-height: 1.6;
 }
 
-.bg-soft-primary {
-    background: rgba(0, 113, 227, 0.15);
-    color: #8AB4F8;
-    border: 1px solid rgba(0, 113, 227, 0.25);
-    padding: 6px 16px;
-    font-size: 0.8rem;
-    letter-spacing: 1px;
-    text-transform: uppercase;
-    font-weight: 600;
-    border-radius: 30px;
-}
+.nav-link{
 
-/* ==========================================================================
-   5. Micro-Interaction Utilities & Premium Components
-   ========================================================================== */
-.btn-premium-primary {
-    background: linear-gradient(135deg, #0071E3 0%, #005BB5 100%);
-    color: #FFFFFF;
-    font-weight: 600;
-    font-size: 0.9rem;
-    padding: 14px 32px;
-    border-radius: 8px;
-    border: none;
-    box-shadow: 0 4px 14px rgba(0, 113, 227, 0.3);
-    transition: var(--transition-premium);
-}
+color:#333!important;
 
-.btn-premium-primary:hover {
-    color: #FFFFFF;
-    transform: translateY(-3px);
-    box-shadow: 0 8px 24px var(--blue-glow);
-}
+font-weight:600;
 
-.btn-premium-outline {
-    background: transparent;
-    color: #FFFFFF;
-    font-weight: 600;
-    font-size: 0.9rem;
-    padding: 14px 32px;
-    border-radius: 8px;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    transition: var(--transition-premium);
 }
 
-.btn-premium-outline:hover {
-    background: rgba(255, 255, 255, 0.05);
-    border-color: #FFFFFF;
-    color: #FFFFFF;
-    transform: translateY(-3px);
-}
+.nav-link:hover{
 
-.btn-premium-sm {
-    background: rgba(255, 255, 255, 0.08);
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    backdrop-filter: blur(8px);
-    color: #FFFFFF;
-    font-size: 0.8rem;
-    padding: 10px 22px;
-    border-radius: 6px;
-    font-weight: 600;
-    transition: var(--transition-premium);
-}
+color:var(--primary)!important;
 
-.btn-premium-sm:hover {
-    background: var(--blue-accent);
-    border-color: var(--blue-accent);
-    color: #FFFFFF;
-    box-shadow: 0 4px 12px var(--blue-glow);
 }
 
-/* ==========================================================================
-   6. True Glassmorphism Architecture
-   ========================================================================== */
-.glass-card {
-    background: var(--glass-bg);
-    backdrop-filter: blur(16px);
-    -webkit-backdrop-filter: blur(16px);
-    border: 1px solid var(--glass-border);
-    border-radius: 16px;
-    box-shadow: var(--glass-glow);
-    transition: var(--transition-premium);
-}
+.nav-link.active{
 
-.glass-card:hover {
-    background: var(--glass-bg-hover);
-    border-color: var(--glass-border-hover);
-    transform: translateY(-5px);
-    box-shadow: 0 12px 40px 0 rgba(2, 12, 27, 0.5);
-}
+color:var(--primary)!important;
 
-.dynamic-dark-section {
-    background: #030E1E;
-    position: relative;
 }
+.hero-section{
 
-.icon-wrap {
-    width: 50px;
-    height: 50px;
-    background: rgba(0, 113, 227, 0.1);
-    border: 1px solid rgba(0, 113, 227, 0.2);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 10px;
-    color: var(--blue-accent);
-    transition: var(--transition-premium);
-}
+background:
 
-.glass-card:hover .icon-wrap {
-    background: var(--blue-accent);
-    color: #FFFFFF;
-    box-shadow: 0 0 15px var(--blue-accent);
-}
+linear-gradient(
 
-/* ==========================================================================
-   7. Interactive Hardware & Mock UI Components
-   ========================================================================== */
-.scanner-ui-frame {
-    background: #01060F;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8), 0 20px 40px rgba(0,0,0,0.4);
-    min-height: 380px;
-}
+135deg,
 
-/* Glowing Target Crosshairs Laser */
-.scanner-laser {
-    position: absolute;
-    width: 100%;
-    height: 3px;
-    background: linear-gradient(to right, transparent, var(--blue-accent), #00D2FF, var(--blue-accent), transparent);
-    box-shadow: 0 0 12px 2px #0071E3;
-    top: 0;
-    left: 0;
-    animation: scanningEffect 3s infinite ease-in-out;
-}
+#ffffff,
 
-@keyframes scanningEffect {
-    0% { top: 0%; opacity: 0.3; }
-    50% { top: 100%; opacity: 1; }
-    100% { top: 0%; opacity: 0.3; }
-}
+#FFF8EA
 
-.qr-target-box {
-    position: relative;
-    transition: var(--transition-premium);
-}
-.qr-target-box i.text-info {
-    color: var(--blue-accent) !important;
-    filter: drop-shadow(0 0 8px var(--blue-accent));
-}
+);
 
-/* ==========================================================================
-   8. Analytics Visualizer Panels
-   ========================================================================== */
-.mockup-chart-container {
-    height: 220px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    padding: 0 10px;
-    display: flex;
-    align-items: flex-end;
-}
+min-height:90vh;
 
-.chart-bar {
-    width: 10%;
-    background: linear-gradient(180deg, var(--blue-accent) 0%, rgba(0, 113, 227, 0.1) 100%);
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    position: relative;
-    box-shadow: 0 0 15px rgba(0, 113, 227, 0.2);
 }
+.btn-premium-primary{
 
-.chart-bar:hover {
-    background: linear-gradient(180deg, #00D2FF 0%, var(--blue-accent) 100%);
-    filter: drop-shadow(0 0 10px var(--blue-accent));
-}
+background:linear-gradient(
 
-/* ==========================================================================
-   9. Clean Corporate Cards System
-   ========================================================================== */
-.edge-card {
-    border: none !important;
-    border-radius: 16px;
-    background: #FFFFFF;
-    box-shadow: 0 4px 20px rgba(10, 25, 47, 0.04);
-    transition: var(--transition-premium);
-    overflow: hidden;
-}
+135deg,
 
-.edge-card:hover {
-    transform: translateY(-8px);
-    box-shadow: 0 20px 40px rgba(10, 25, 47, 0.08);
-}
+#D4AF37,
 
-.card-img-placeholder {
-    background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-dark) 100%) !important;
-    border-bottom: 3px solid var(--blue-accent);
-}
+#B8860B
 
-/* ==========================================================================
-   10. Global Modern Shifters (Hover Effects)
-   ========================================================================== */
-.transition-up {
-    transition: var(--transition-premium);
-}
+);
 
-.transition-up:hover {
-    transform: translateY(-6px);
-    box-shadow: 0 20px 40px rgba(2, 12, 27, 0.05) !important;
-    border-color: rgba(0, 113, 227, 0.2) !important;
-}
+border:none;
 
-/* Custom Status Indicator Ring */
-.bg-success-soft {
-    background: rgba(46, 204, 113, 0.1);
-    color: #2ECC71;
-    border: 1px solid rgba(46, 204, 113, 0.2);
-    padding: 6px 14px;
-    border-radius: 30px;
-    font-size: 0.75rem;
-    font-weight: 600;
-}
-.dot {
-    height: 8px;
-    width: 8px;
-    background-color: #2ECC71;
-    border-radius: 50%;
-    display: inline-block;
-    margin-right: 6px;
-    box-shadow: 0 0 8px #2ECC71;
-}
+color:white;
 
-/* Corporate Partner Labels Configuration */
-.client-logos div {
-    font-size: 0.85rem !important;
-    letter-spacing: 2px;
-    font-weight: 700;
-    color: #8892B0 !important;
-    transition: var(--transition-premium);
-}
-.client-logos div:hover {
-    color: var(--blue-accent) !important;
-    text-shadow: 0 0 10px rgba(0, 113, 227, 0.1);
-}
-/* ===== GLOBAL DARK PAGES ===== */
+font-weight:600;
 
-.page-dark{
-    background:#020C1B;
-    color:white;
-}
+padding:14px 34px;
 
-.page-dark section{
-    background:transparent !important;
-}
+border-radius:10px;
 
-.page-dark h1,
-.page-dark h2,
-.page-dark h3,
-.page-dark h4,
-.page-dark h5{
-    color:#ffffff !important;
-}
+transition:.3s;
 
-.page-dark p{
-    color:#A8B2D1 !important;
 }
 
-/* About Cards */
+.btn-premium-primary:hover{
 
-.page-dark .edge-card{
-    background:rgba(255,255,255,.03);
-    border:1px solid rgba(255,255,255,.08) !important;
-    backdrop-filter:blur(16px);
-}
+transform:translateY(-3px);
 
-.page-dark .edge-card:hover{
-    transform:translateY(-8px);
-    border-color:#0071E3 !important;
-    box-shadow:0 20px 40px rgba(0,113,227,.2);
-}
+box-shadow:0 12px 25px rgba(212,175,55,.35);
 
-.page-dark .card-body h5{
-    color:#fff !important;
 }
+.glass-card{
 
-.page-dark .card-img-placeholder{
-    background:linear-gradient(
-        135deg,
-        #07152f,
-        #0c2347
-    ) !important;
-}
+background:white;
 
-/* Services */
+border:1px solid #EFE6CF;
 
-.service-panel{
-    background:rgba(255,255,255,.03);
-    border:1px solid rgba(255,255,255,.08) !important;
-    backdrop-filter:blur(12px);
-    color:white;
-    transition:.35s ease;
-}
+border-radius:18px;
 
-.service-panel:hover{
-    transform:translateY(-8px);
-    border-color:#0071E3 !important;
-    box-shadow:0 15px 40px rgba(0,113,227,.25);
-}
+box-shadow:0 8px 30px rgba(0,0,0,.08);
 
-.service-panel h5{
-    color:white !important;
-}
+backdrop-filter:none;
 
-.service-panel p{
-    color:#A8B2D1 !important;
 }
 
-/* Contact Form */
+.glass-card:hover{
 
-.page-dark .form-control,
-.page-dark .form-select{
-    background:rgba(255,255,255,.04);
-    border:1px solid rgba(255,255,255,.08);
-    color:white;
-}
+transform:translateY(-8px);
 
-.page-dark .form-control:focus,
-.page-dark .form-select:focus{
-    background:rgba(255,255,255,.06);
-    border-color:#0071E3;
-    box-shadow:0 0 20px rgba(0,113,227,.25);
-    color:white;
-}
+border-color:#D4AF37;
 
-.page-dark textarea::placeholder,
-.page-dark input::placeholder{
-    color:#94A3B8;
 }
+.feature-box{
 
-/* Footer */
+background:white;
 
-footer{
-    background:#020C1B !important;
-    border-top:1px solid rgba(255,255,255,.08);
-}
+border-radius:18px;
 
-/* Hero */
+padding:35px;
 
-.hero-section{
-    min-height:60vh;
-    display:flex;
-    align-items:center;
-    position:relative;
-    overflow:hidden;
-}
+border:1px solid #F1E6C8;
 
-.hero-section::before{
-    content:'';
-    position:absolute;
-    width:600px;
-    height:600px;
-    background:#0071E3;
-    filter:blur(180px);
-    opacity:.12;
-    top:-250px;
-    right:-150px;
-}
+transition:.35s;
 
-.hero-section::after{
-    content:'';
-    position:absolute;
-    width:500px;
-    height:500px;
-    background:#00D2FF;
-    filter:blur(180px);
-    opacity:.08;
-    bottom:-250px;
-    left:-150px;
 }
-/* Contact Form Card */
-.contact-form-card{
-    background:#14284a;
-    border:none !important;
-    outline:none !important;
 
-    border-radius:24px;
-    padding:32px;
+.feature-box:hover{
 
-    box-shadow:
-        0 10px 30px rgba(0,0,0,.35),
-        0 0 40px rgba(0,113,227,.08);
+transform:translateY(-8px);
 
-    height:100%;
-}
+box-shadow:0 18px 40px rgba(212,175,55,.20);
 
-.contact-form-card h4{
-    color:#fff !important;
 }
+.icon-wrap{
 
-.contact-form-card label{
-    color:#fff !important;
-    font-weight:600;
-}
+width:60px;
 
-.contact-form-card .form-control,
-.contact-form-card .form-select{
-    background:rgba(255,255,255,.05);
-    border:1px solid rgba(255,255,255,.12);
-    color:#fff;
-    border-radius:12px;
-}
+height:60px;
 
-.contact-form-card .form-control::placeholder{
-    color:#8fa6c6;
-}
+background:#FFF4D6;
 
-.contact-form-card .form-control:focus,
-.contact-form-card .form-select:focus{
-    background:rgba(255,255,255,.08);
-    color:#fff;
-    border-color:#0071E3;
-    box-shadow:0 0 20px rgba(0,113,227,.25);
-}
+color:#C89B3C;
 
-.contact-form-card textarea{
-    min-height:180px;
-}
-.col-lg-7 > div{
-    background:#14284a !important;
-    border:none !important;
-    box-shadow:
-        0 10px 30px rgba(0,0,0,.35) !important;
-}
-.team-image{
-    height:280px;
-    overflow:hidden;
-    position:relative;
-}
+border-radius:15px;
 
-.team-image img{
-    width:100%;
-    height:100%;
-    object-fit:cover;
-    transition:.5s;
-}
+display:flex;
+
+align-items:center;
+
+justify-content:center;
+
+font-size:26px;
 
-.edge-card:hover .team-image img{
-    transform:scale(1.08);
 }
-/* Force Same Background Everywhere */
+.form-control{
+
+border-radius:12px;
+
+border:1px solid #DDD;
+
+padding:12px;
 
-.bg-white,
-.bg-light-grey{
-    background: #030E1E !important;
 }
 
-section{
-    background: #030E1E;
+.form-control:focus{
+
+border-color:#D4AF37;
+
+box-shadow:0 0 0 .2rem rgba(212,175,55,.18);
+
 }
+.table thead{
 
-/* White section headings fix */
+background:#C89B3C;
+
+color:white;
 
-.text-navy{
-    color: #ffffff !important;
 }
 
-.text-muted{
-    color: #A8B2D1 !important;
+.table{
+
+background:white;
+
+border-radius:12px;
+
+overflow:hidden;
+
 }
+footer{
 
-/* Light cards -> Glass cards */
+background:#ffffff;
+
+border-top:3px solid #D4AF37;
+
+color:#444;
 
-.feature-box,
-.workflow-steps .bg-light,
-.border.rounded-4.p-4.bg-light,
-.bg-white.p-4{
-    background: rgba(255,255,255,0.03) !important;
-    border: 1px solid rgba(255,255,255,0.08) !important;
-    backdrop-filter: blur(16px);
-    color: white;
 }
+.scanner-ui-frame{
+
+background:white;
 
-/* Analytics counters */
+border:2px solid #D4AF37;
+
+border-radius:20px;
+
+box-shadow:0 15px 40px rgba(0,0,0,.08);
 
-.counter-card,
-.bg-white.p-4.shadow-sm{
-    background: rgba(255,255,255,0.03) !important;
-    color: white !important;
 }
+.dashboard-card{
+
+background:white;
+
+border-left:5px solid #D4AF37;
+
+padding:25px;
+
+border-radius:18px;
 
-/* Partner cards same style */
+box-shadow:0 10px 30px rgba(0,0,0,.08);
 
-.partner-card{
-    background: rgba(255,255,255,0.03) !important;
-    border: 1px solid rgba(255,255,255,0.08) !important;
 }