/* ===================================================================== Lab Chemicals — Premium Theme (site-wide) Scoped stylesheet (loads AFTER styles.css, namespaced under .lc-premium) Applied to every page via . Homepage-only sections (hero slider, trust strip) simply no-op elsewhere. ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap'); /* ---------- Design Tokens ---------- */ .lc-premium { --h-ink: #0a1330; /* deep navy text/bg */ --h-slate: #475569; /* body text */ --h-slate-l: #64748b; /* muted */ --h-line: #e6ebf5; /* borders */ --h-bg: #ffffff; --h-bg-soft: #f5f8ff; /* soft section bg */ --h-bg-tint: #eef4ff; --h-blue: #1463ff; /* primary electric blue */ --h-blue-d: #0b3fb8; --h-blue-l: #e8f0ff; --h-cyan: #06b6d4; --h-amber: #f59e0b; --h-teal: #14b8a6; --h-purple: #7c3aed; --h-grad: linear-gradient(135deg, #1463ff 0%, #06b6d4 100%); --h-grad-deep: linear-gradient(150deg, #0a1330 0%, #0e2a6b 55%, #1463ff 130%); --h-grad-warm: linear-gradient(135deg, #f59e0b 0%, #ef5e8c 100%); --h-font: 'Inter', 'Segoe UI', system-ui, sans-serif; --h-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --h-r-sm: 10px; --h-r-md: 16px; --h-r-lg: 24px; --h-r-xl: 32px; --h-sh-sm: 0 2px 8px rgba(13, 38, 90, .06); --h-sh-md: 0 12px 30px rgba(13, 38, 90, .10); --h-sh-lg: 0 24px 60px rgba(13, 38, 90, .16); --h-sh-blue: 0 18px 40px rgba(20, 99, 255, .28); --h-ease: cubic-bezier(.16,.84,.44,1); font-family: var(--h-font); color: var(--h-ink); background: var(--h-bg); -webkit-font-smoothing: antialiased; } .lc-premium .container { max-width: 1240px; } .lc-premium h1, .lc-premium h2, .lc-premium h3, .lc-premium h4 { font-family: var(--h-display); letter-spacing: -.02em; } /* Reusable section eyebrow + heading */ .lc-premium .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--h-blue); background: var(--h-blue-l); padding: 7px 14px; border-radius: 100px; margin-bottom: 18px; } .lc-premium .eyebrow i { font-size: .8rem; } .lc-premium .section-header { max-width: 720px; } .lc-premium .section-title { font-size: clamp(1.9rem, 3.4vw, 2.85rem); font-weight: 800; line-height: 1.1; color: var(--h-ink); margin-bottom: 16px; } .lc-premium .section-title .accent { background: var(--h-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .lc-premium .section-subtitle { font-size: 1.06rem; line-height: 1.7; color: var(--h-slate); } /* ===================================================================== 1. TOP ACTION BAR ===================================================================== */ .lc-premium .topbar { background: var(--h-grad-deep) !important; padding: 9px 0 !important; font-size: 13px !important; border-bottom: 1px solid rgba(255,255,255,.08); } .lc-premium .topbar .container { gap: 14px; } .lc-premium .topbar a { color: rgba(255,255,255,.85); } .lc-premium .topbar a:hover { color: #fff; } .lc-premium .topbar .tb-item { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.9); } .lc-premium .topbar .tb-item i { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.12); font-size: 11px; } .lc-premium .topbar .tb-socials { display: flex; gap: 8px; } .lc-premium .topbar .tb-socials a { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.1); transition: .25s var(--h-ease); } .lc-premium .topbar .tb-socials a:hover { background: var(--h-blue); transform: translateY(-2px); } /* ===================================================================== 2. HEADER / NAV (glassmorphism, sticky) ===================================================================== */ .lc-premium .header { background: rgba(255,255,255,.72); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid rgba(230,235,245,.9); box-shadow: none; position: sticky; } .lc-premium .header.scrolled { background: rgba(255,255,255,.92); box-shadow: 0 6px 24px rgba(13,38,90,.08); } .lc-premium .header-inner { padding: 12px 0; } .lc-premium .nav-menu { gap: 4px; } .lc-premium .nav-link { font-family: var(--h-font); font-size: .95rem; font-weight: 600; color: #25324d; padding: 9px 14px; border-radius: 10px; transition: .2s var(--h-ease); } .lc-premium .nav-link::after { display: none; } .lc-premium .nav-link:hover { color: var(--h-blue); background: var(--h-blue-l); } .lc-premium .nav-link.active { color: var(--h-blue); background: var(--h-blue-l); } .lc-premium .nav-dropdown-content { border: 1px solid var(--h-line); border-radius: 14px; box-shadow: var(--h-sh-md); padding: 8px; margin-top: 8px; min-width: 230px; animation: hpDrop .22s var(--h-ease); } @keyframes hpDrop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .lc-premium .nav-dropdown-content a { border-radius: 9px; padding: 10px 14px; font-weight: 500; color: #34405c; } .lc-premium .nav-dropdown-content a:hover { background: var(--h-blue-l); color: var(--h-blue); } /* Header CTA button */ .lc-premium .nav-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--h-grad); color: #fff !important; font-weight: 700; font-size: .92rem; padding: 11px 20px; border-radius: 11px; margin-left: 8px; box-shadow: var(--h-sh-blue); transition: .25s var(--h-ease); } .lc-premium .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 22px 46px rgba(20,99,255,.36); color:#fff; } .lc-premium .nav-cta::after { display:none; } .lc-premium .menu-toggle span { background: var(--h-blue); } /* ===================================================================== 3. HERO SLIDER (premium full-bleed) ===================================================================== */ .lc-premium .hero-slider { height: clamp(560px, 82vh, 760px); background: var(--h-ink); } .lc-premium .slide { background-blend-mode: normal; } /* Darker cinematic overlay applied via layered gradient on top of inline bg */ .lc-premium .slide::after { content: ''; position: absolute; inset: 0; background: radial-gradient(1200px 600px at 15% 20%, rgba(20,99,255,.20), transparent 60%), linear-gradient(90deg, rgba(7,14,40,.86) 0%, rgba(7,14,40,.55) 45%, rgba(7,14,40,.28) 100%); z-index: 0; } .lc-premium .slide .container { position: relative; z-index: 2; } .lc-premium .slide .hero-content { text-align: left; max-width: 760px; margin: 0; text-shadow: none !important; padding: 40px 0; } .lc-premium .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px); color: #eaf2ff; font-size: .8rem; font-weight: 600; letter-spacing: .04em; padding: 8px 16px; border-radius: 100px; margin-bottom: 24px; animation: hpUp .7s var(--h-ease) both; } .lc-premium .hero-eyebrow .pip { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,.25); } .lc-premium .hero-title { font-family: var(--h-display); font-size: clamp(2.4rem, 5.4vw, 4.2rem) !important; font-weight: 800; line-height: 1.05; color: #fff !important; letter-spacing: -.03em; text-shadow: none !important; margin-bottom: 20px; animation: hpUp .7s .08s var(--h-ease) both; } .lc-premium .hero-title span { background: linear-gradient(120deg, #5ad1ff, #7c9bff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #5ad1ff; } .lc-premium .hero-subtitle { font-size: clamp(1.02rem, 1.6vw, 1.22rem) !important; color: rgba(255,255,255,.86) !important; line-height: 1.65; max-width: 600px; margin: 0 0 32px 0 !important; text-shadow: none !important; animation: hpUp .7s .16s var(--h-ease) both; } .lc-premium .hero-buttons { justify-content: flex-start; gap: 14px; animation: hpUp .7s .24s var(--h-ease) both; } /* Premium hero buttons */ .lc-premium .hero-buttons .btn { border-radius: 13px; padding: 15px 28px; font-size: .98rem; } .lc-premium .hero-buttons .btn-primary { background: var(--h-grad); color: #fff; border: none; box-shadow: var(--h-sh-blue); } .lc-premium .hero-buttons .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 24px 50px rgba(20,99,255,.42); color:#fff; } .lc-premium .hero-buttons .btn-secondary { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.4); color: #fff; backdrop-filter: blur(8px); } .lc-premium .hero-buttons .btn-secondary:hover { background: #fff; color: var(--h-ink); } @keyframes hpUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } } /* Slider arrows + dots refined */ .lc-premium .slider-arrow { width: 54px; height: 54px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(10px); } .lc-premium .slider-arrow:hover { background: var(--h-blue); border-color: var(--h-blue); } .lc-premium .slider-dots { bottom: 34px; gap: 10px; } .lc-premium .dot { width: 10px; height: 10px; background: rgba(255,255,255,.4); } .lc-premium .dot.active { background: #fff; width: 30px; border-radius: 6px; transform: none; } /* Scroll cue */ .lc-premium .hero-scrollcue { position: absolute; bottom: 30px; right: 38px; z-index: 3; display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.75); font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .lc-premium .hero-scrollcue .line { width: 1px; height: 40px; background: linear-gradient(rgba(255,255,255,.6), transparent); animation: hpScroll 1.8s var(--h-ease) infinite; transform-origin: top; } @keyframes hpScroll { 0%,100% { transform: scaleY(.4); opacity:.4 } 50% { transform: scaleY(1); opacity:1 } } /* ===================================================================== 4. TRUST STRIP (overlapping glass card) ===================================================================== */ .lc-premium .trust-strip { position: relative; margin-top: -56px; z-index: 5; padding-bottom: 10px; } .lc-premium .trust-card { background: #fff; border: 1px solid var(--h-line); border-radius: var(--h-r-lg); box-shadow: var(--h-sh-lg); display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; } .lc-premium .trust-item { display: flex; align-items: center; gap: 16px; padding: 26px 28px; border-right: 1px solid var(--h-line); } .lc-premium .trust-item:last-child { border-right: none; } .lc-premium .trust-item .t-ico { width: 50px; height: 50px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; font-size: 1.25rem; color: #fff; background: var(--h-grad); box-shadow: var(--h-sh-blue); } .lc-premium .trust-item:nth-child(2) .t-ico { background: linear-gradient(135deg,#14b8a6,#06b6d4); box-shadow: 0 14px 30px rgba(20,184,166,.3); } .lc-premium .trust-item:nth-child(3) .t-ico { background: var(--h-grad-warm); box-shadow: 0 14px 30px rgba(245,158,11,.3); } .lc-premium .trust-item:nth-child(4) .t-ico { background: linear-gradient(135deg,#7c3aed,#a855f7); box-shadow: 0 14px 30px rgba(124,58,237,.3); } .lc-premium .trust-item h4 { font-size: 1.02rem; font-weight: 700; color: var(--h-ink); margin-bottom: 3px; } .lc-premium .trust-item p { font-size: .85rem; color: var(--h-slate-l); margin: 0; } /* ===================================================================== Generic premium section paddings (override styles.css) ===================================================================== */ .lc-premium .section { padding: 84px 0; } .lc-premium .section::before { display: none; } .lc-premium .features { padding: 96px 0 84px; } /* Light sections */ .lc-premium .bg-soft { background: var(--h-bg-soft); } /* ===================================================================== 5. WHY CHOOSE US (Features grid — numbered premium cards) ===================================================================== */ .lc-premium .features-grid { gap: 26px; } .lc-premium .feature-card { background: #fff; border: 1px solid var(--h-line); border-radius: var(--h-r-lg); padding: 34px 28px; text-align: left; box-shadow: var(--h-sh-sm); transition: .35s var(--h-ease); overflow: hidden; } .lc-premium .feature-card::before { display: none; } .lc-premium .feature-card::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--h-grad); transform: scaleX(0); transform-origin: left; transition: .35s var(--h-ease); } .lc-premium .feature-card:hover { transform: translateY(-8px); border-color: transparent; box-shadow: var(--h-sh-lg); } .lc-premium .feature-card:hover::after { transform: scaleX(1); } .lc-premium .feature-icon { width: 62px; height: 62px; border-radius: 16px; background: var(--h-blue-l); color: var(--h-blue); font-size: 1.5rem; margin: 0 0 22px; transition: .35s var(--h-ease); } .lc-premium .feature-card:hover .feature-icon { background: var(--h-grad); color: #fff; transform: rotate(-6deg) scale(1.05); box-shadow: var(--h-sh-blue); } .lc-premium .feature-title { font-size: 1.18rem; font-weight: 700; color: var(--h-ink); margin-bottom: 10px; } .lc-premium .feature-text { color: var(--h-slate); font-size: .96rem; line-height: 1.7; } /* ===================================================================== 6. PRODUCT RANGE (premium image cards) ===================================================================== */ .lc-premium .products-grid { gap: 28px; } .lc-premium .product-card { background: #fff; border: 1px solid var(--h-line); border-radius: var(--h-r-lg); box-shadow: var(--h-sh-sm); transition: .4s var(--h-ease); overflow: hidden; } .lc-premium .product-card::before { display: none; } .lc-premium .product-card:hover { transform: translateY(-10px); box-shadow: var(--h-sh-lg); border-color: var(--h-blue-l); } .lc-premium .product-image { height: 230px; position: relative; } .lc-premium .product-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10,19,48,.45) 100%); opacity: 0; transition: .4s var(--h-ease); } .lc-premium .product-card:hover .product-image::after { opacity: 1; } .lc-premium .product-image::before { z-index: 2; /* keep the shine sweep from styles.css above gradient */ } .lc-premium .product-content { padding: 24px 24px 26px; } .lc-premium .product-category { display: inline-block; background: var(--h-blue-l); color: var(--h-blue); padding: 5px 12px; border-radius: 100px; font-size: .72rem; letter-spacing: .06em; margin-bottom: 14px; } .lc-premium .product-title { font-size: 1.2rem; font-weight: 700; color: var(--h-ink); margin-bottom: 10px; } .lc-premium .product-description { color: var(--h-slate); font-size: .94rem; line-height: 1.65; margin-bottom: 18px; } .lc-premium .product-link { color: var(--h-blue); font-weight: 700; font-size: .92rem; padding-top: 14px; border-top: 1px solid var(--h-line); width: 100%; } .lc-premium .product-link i { transition: .25s var(--h-ease); } .lc-premium .product-card:hover .product-link i { transform: translateX(5px); } /* Buttons (shared) refined for home */ .lc-premium .btn-primary { background: var(--h-grad); color: #fff; border: none; border-radius: 13px; padding: 14px 28px; box-shadow: var(--h-sh-blue); } .lc-premium .btn-primary:hover { transform: translateY(-3px); color: #fff; box-shadow: 0 24px 50px rgba(20,99,255,.4); background: var(--h-grad); } /* ===================================================================== 7. ABOUT (image collage + content) ===================================================================== */ .lc-premium .about-grid { gap: 64px; } .lc-premium .about-image { padding: 0 24px 24px 0; } .lc-premium .about-image-main { height: 460px; border-radius: var(--h-r-lg); box-shadow: var(--h-sh-lg); background-size: cover !important; background-position: center !important; opacity: 1; } .lc-premium .about-image::before { content: ''; position: absolute; top: -22px; left: -22px; width: 150px; height: 150px; border-radius: 20px; background: var(--h-grad); opacity: .14; z-index: -1; } .lc-premium .about-image-accent { width: auto; height: auto; bottom: -4px; right: 0; background: #fff; border: 1px solid var(--h-line); border-radius: 20px; padding: 22px 26px; box-shadow: var(--h-sh-lg); display: flex; align-items: center; gap: 16px; } .lc-premium .about-image-accent i { font-size: 2.2rem !important; color: var(--h-amber) !important; height: auto !important; } .lc-premium .about-badge-num { font-family: var(--h-display); font-size: 2.1rem; font-weight: 800; color: var(--h-ink); line-height: 1; } .lc-premium .about-badge-lbl { font-size: .82rem; color: var(--h-slate-l); } .lc-premium .about-content h2 { font-size: clamp(1.8rem,3vw,2.5rem); color: var(--h-ink); margin-bottom: 18px; } .lc-premium .about-content p { color: var(--h-slate); font-size: 1rem; line-height: 1.8; } .lc-premium .about-content p strong { color: var(--h-ink); } .lc-premium .about-features { gap: 14px; margin-top: 26px; } .lc-premium .about-feature { background: var(--h-bg-soft); border: 1px solid var(--h-line); border-radius: 12px; padding: 14px 16px; font-weight: 600; color: var(--h-ink); font-size: .95rem; } .lc-premium .about-feature i { color: var(--h-teal); font-size: 1.1rem; } /* ===================================================================== 8. STATS (gradient band, animated counters) ===================================================================== */ .lc-premium .stats { background: var(--h-grad-deep); padding: 76px 0; position: relative; overflow: hidden; } .lc-premium .stats::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 300px at 85% 15%, rgba(6,182,212,.25), transparent 60%), radial-gradient(500px 280px at 10% 90%, rgba(20,99,255,.3), transparent 60%); } .lc-premium .stats-grid { position: relative; gap: 24px; } .lc-premium .stat-item { padding: 28px 18px; border-radius: var(--h-r-md); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); transition: .35s var(--h-ease); } .lc-premium .stat-item:hover { background: rgba(255,255,255,.1); transform: translateY(-6px); } .lc-premium .stat-number { font-family: var(--h-display); font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 800; background: linear-gradient(120deg,#fff,#9cc4ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .lc-premium .stat-label { font-size: .98rem; opacity: .85; font-weight: 500; letter-spacing: .02em; } /* ===================================================================== 9. INDUSTRIES ===================================================================== */ .lc-premium .industries-grid { gap: 24px; } .lc-premium .industry-card { background: #fff; border: 1px solid var(--h-line); border-radius: var(--h-r-lg); padding: 28px; box-shadow: var(--h-sh-sm); transition: .35s var(--h-ease); align-items: flex-start; } .lc-premium .industry-card::before { display: none; } .lc-premium .industry-card:hover { transform: translateY(-6px); box-shadow: var(--h-sh-md); border-color: var(--h-blue-l); } .lc-premium .industry-icon { width: 58px; height: 58px; border-radius: 15px; background: var(--h-blue-l); color: var(--h-blue); font-size: 1.45rem; transition: .35s var(--h-ease); } .lc-premium .industry-card:hover .industry-icon { background: var(--h-grad); color: #fff; box-shadow: var(--h-sh-blue); } .lc-premium .industry-content h3 { font-size: 1.12rem; font-weight: 700; color: var(--h-ink); } .lc-premium .industry-content p { color: var(--h-slate); font-size: .92rem; } /* ===================================================================== 10. WHY CHOOSE US (6 items) + section-alt re-theme Original section-alt is dark; we re-theme as a clean light-premium band. ===================================================================== */ .lc-premium .section-alt { background: var(--h-bg-soft) !important; color: var(--h-ink) !important; } .lc-premium .section-alt .section-title { color: var(--h-ink) !important; } .lc-premium .section-alt .section-subtitle { color: var(--h-slate) !important; } .lc-premium .section-alt .feature-card, .lc-premium .section-alt .product-card { background: #fff !important; color: var(--h-ink) !important; } .lc-premium .section-alt .feature-title, .lc-premium .section-alt .product-title { color: var(--h-ink) !important; } .lc-premium .section-alt .feature-text, .lc-premium .section-alt .product-description { color: var(--h-slate) !important; } .lc-premium .why-choose-grid { gap: 26px; } .lc-premium .why-choose-item { background: #fff !important; border: 1px solid var(--h-line); border-radius: var(--h-r-lg); padding: 36px 28px; text-align: left; box-shadow: var(--h-sh-sm); transition: .35s var(--h-ease); } .lc-premium .why-choose-item::before { display: none; } .lc-premium .why-choose-item:hover { transform: translateY(-8px); box-shadow: var(--h-sh-lg); } .lc-premium .why-choose-icon { width: 64px; height: 64px; border-radius: 18px; background: var(--h-grad); margin: 0 0 22px; box-shadow: var(--h-sh-blue); font-size: 1.6rem; } .lc-premium .why-choose-item:nth-child(2) .why-choose-icon { background: linear-gradient(135deg,#14b8a6,#06b6d4); box-shadow:0 14px 30px rgba(20,184,166,.3); } .lc-premium .why-choose-item:nth-child(3) .why-choose-icon { background: var(--h-grad-warm); box-shadow:0 14px 30px rgba(245,158,11,.3); } .lc-premium .why-choose-item:nth-child(4) .why-choose-icon { background: linear-gradient(135deg,#7c3aed,#a855f7); box-shadow:0 14px 30px rgba(124,58,237,.3); } .lc-premium .why-choose-item:nth-child(5) .why-choose-icon { background: linear-gradient(135deg,#ef4444,#f97316); box-shadow:0 14px 30px rgba(239,68,68,.3); } .lc-premium .why-choose-item:nth-child(6) .why-choose-icon { background: linear-gradient(135deg,#0ea5e9,#1463ff); box-shadow:0 14px 30px rgba(14,165,233,.3); } .lc-premium .why-choose-item h3 { font-size: 1.16rem; font-weight: 700; color: var(--h-ink) !important; margin-bottom: 10px; } .lc-premium .why-choose-item p { color: var(--h-slate) !important; font-size: .95rem; line-height: 1.7; } /* ===================================================================== 11. TESTIMONIAL (premium quote) ===================================================================== */ .lc-premium .testimonial-card { background: var(--h-grad-deep) !important; color: #fff !important; border: none !important; border-radius: var(--h-r-xl) !important; padding: 60px 56px !important; position: relative; overflow: hidden; box-shadow: var(--h-sh-lg); max-width: 920px !important; } .lc-premium .testimonial-card::before { content: '\201C'; position: absolute; top: -30px; left: 30px; font-family: Georgia, serif; font-size: 16rem; line-height: 1; color: rgba(255,255,255,.07); } .lc-premium .testimonial-card .fa-quote-left { color: #5ad1ff !important; } .lc-premium .testimonial-card p:first-of-type { color: #eaf2ff !important; font-size: 1.5rem !important; font-weight: 500; font-style: normal !important; line-height: 1.6 !important; } .lc-premium .testimonial-card p:last-of-type { color: rgba(255,255,255,.7) !important; } .lc-premium .testi-stars { color: var(--h-amber); font-size: 1.05rem; margin-bottom: 20px; display: flex; gap: 5px; justify-content: center; } /* ===================================================================== 12. CTA BAND ===================================================================== */ .lc-premium .cta-band { background: var(--h-grad-deep) !important; position: relative; overflow: hidden; border-radius: 0; } .lc-premium .cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(500px 280px at 80% 0%, rgba(6,182,212,.28), transparent 60%), radial-gradient(420px 240px at 12% 100%, rgba(20,99,255,.32), transparent 60%); } .lc-premium .cta-band .container { position: relative; z-index: 2; } .lc-premium .cta-band .section-title { color: #fff !important; } .lc-premium .cta-band .section-subtitle { color: rgba(255,255,255,.88) !important; } .lc-premium .cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .lc-premium .cta-band .btn { background: #fff; color: var(--h-blue); border: none; border-radius: 13px; padding: 15px 30px; font-weight: 700; box-shadow: 0 14px 30px rgba(0,0,0,.2); } .lc-premium .cta-band .btn:hover { transform: translateY(-3px); color: var(--h-blue-d); } .lc-premium .cta-band .btn.btn-ghost { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.4); box-shadow: none; } .lc-premium .cta-band .btn.btn-ghost:hover { background: rgba(255,255,255,.18); color: #fff; } /* ===================================================================== 13. FOOTER ===================================================================== */ .lc-premium .footer { background: #060c22; padding: 72px 0 26px; } .lc-premium .footer-grid { gap: 48px; } .lc-premium .footer-brand p { color: rgba(255,255,255,.6); } .lc-premium .footer-title { font-family: var(--h-display); font-weight: 700; } .lc-premium .footer-title::after { background: var(--h-grad); width: 36px; height: 3px; border-radius: 3px; } .lc-premium .footer-links a { color: rgba(255,255,255,.62); } .lc-premium .footer-links a:hover { color: #fff; } .lc-premium .footer-social a { border-radius: 11px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); } .lc-premium .footer-social a:hover { background: var(--h-grad); border-color: transparent; transform: translateY(-3px); } .lc-premium .footer-bottom { border-top: 1px solid rgba(255,255,255,.08); } .lc-premium .footer-bottom p { color: rgba(255,255,255,.5); } /* ===================================================================== Reveal-on-scroll ===================================================================== */ .lc-premium .reveal { opacity: 0; transform: translateY(34px); transition: .7s var(--h-ease); } .lc-premium .reveal.in { opacity: 1; transform: translateY(0); } /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width: 1024px) { .lc-premium .trust-card { grid-template-columns: 1fr 1fr; } .lc-premium .trust-item:nth-child(2) { border-right: none; } .lc-premium .trust-item:nth-child(1), .lc-premium .trust-item:nth-child(2) { border-bottom: 1px solid var(--h-line); } .lc-premium .about-grid { gap: 40px; } .lc-premium .about-image-main { height: 380px; } } @media (max-width: 860px) { .lc-premium .nav-cta { display: none; } } @media (max-width: 768px) { .lc-premium .section { padding: 60px 0; } .lc-premium .features { padding: 64px 0 56px; } .lc-premium .topbar .tb-hours { display: none; } .lc-premium .slide .hero-content { text-align: center; margin: 0 auto; padding: 24px 0; } .lc-premium .hero-buttons { justify-content: center; } .lc-premium .hero-subtitle { margin-left: auto !important; margin-right: auto !important; } .lc-premium .trust-strip { margin-top: -30px; } .lc-premium .trust-card { grid-template-columns: 1fr; } .lc-premium .trust-item { border-right: none !important; border-bottom: 1px solid var(--h-line); } .lc-premium .trust-item:last-child { border-bottom: none; } .lc-premium .about-image { padding: 0; } .lc-premium .hero-scrollcue { display: none; } .lc-premium .testimonial-card { padding: 40px 26px !important; } .lc-premium .testimonial-card p:first-of-type { font-size: 1.2rem !important; } } @media (max-width: 480px) { .lc-premium .nav-menu { gap: 4px; } .lc-premium .about-features { grid-template-columns: 1fr; } .lc-premium .stat-item { padding: 22px 12px; } } /* ===================================================================== ============ INNER PAGES (about, products, contact, etc.) ========= ===================================================================== */ /* ---------- Generic secondary button (visible on light + colored bg) ---- */ .lc-premium .btn-secondary { background: #fff; color: var(--h-blue); border: 2px solid var(--h-blue-l); } .lc-premium .btn-secondary:hover { background: var(--h-blue-l); color: var(--h-blue-d); border-color: var(--h-blue-l); transform: translateY(-2px); } /* Hero variant keeps its glass treatment (higher specificity below) */ .lc-premium .hero-buttons .btn-secondary { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.4); color: #fff; } .lc-premium .hero-buttons .btn-secondary:hover { background: #fff; color: var(--h-ink); border-color:#fff; } /* ---------- Premium Page Header (banner on every inner page) ---------- */ .lc-premium .page-header { padding: 78px 0 70px; background: var(--h-grad-deep); position: relative; overflow: hidden; } .lc-premium .page-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(620px 320px at 82% 18%, rgba(6,182,212,.30), transparent 60%), radial-gradient(520px 300px at 8% 95%, rgba(20,99,255,.34), transparent 60%); opacity: 1; background-size: auto; } .lc-premium .page-header::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 22px 22px; height: 100%; opacity: .6; } .lc-premium .page-header .container { position: relative; z-index: 2; } .lc-premium .page-header h1 { font-family: var(--h-display); font-size: clamp(2.1rem, 4.4vw, 3.2rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 16px; text-shadow: none; animation: hpUp .6s var(--h-ease) both; } .lc-premium .page-header .breadcrumb { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); padding: 9px 18px; border-radius: 100px; font-size: .9rem; animation: hpUp .6s .1s var(--h-ease) both; } .lc-premium .page-header .breadcrumb a { color: #fff; font-weight: 600; } .lc-premium .page-header .breadcrumb a:hover { color: #9cd2ff; } .lc-premium .page-header .breadcrumb span { color: rgba(255,255,255,.65); } /* ---------- Category Filter Buttons (products / catalogue) ---------- */ .lc-premium .products-categories { gap: 12px; margin-bottom: 44px; } .lc-premium .category-btn { background: #fff; border: 1.5px solid var(--h-line); border-radius: 100px; padding: 11px 22px; font-family: var(--h-font); font-weight: 600; font-size: .92rem; color: #34405c; box-shadow: var(--h-sh-sm); transition: .25s var(--h-ease); } .lc-premium .category-btn:hover { border-color: var(--h-blue); color: var(--h-blue); transform: translateY(-2px); } .lc-premium .category-btn.active { background: var(--h-grad); border-color: transparent; color: #fff; box-shadow: var(--h-sh-blue); } /* ---------- Industry cards with nested lists (industries.html) ---------- */ .lc-premium .industry-card ul { margin-top: 14px; display: grid; gap: 9px; } .lc-premium .industry-card ul li { position: relative; padding-left: 26px; font-size: .92rem; color: var(--h-slate); line-height: 1.5; } .lc-premium .industry-card ul li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: 1px; color: var(--h-teal); font-size: .82rem; } /* ---------- Contact page ---------- */ .lc-premium .contact-card { background: #fff; border: 1px solid var(--h-line); border-radius: var(--h-r-md); box-shadow: var(--h-sh-sm); transition: .3s var(--h-ease); } .lc-premium .contact-card:hover { transform: translateY(-4px); box-shadow: var(--h-sh-md); border-color: var(--h-blue-l); } .lc-premium .contact-icon { background: var(--h-grad); border-radius: 13px; box-shadow: var(--h-sh-blue); } .lc-premium .contact-details h4 { font-size: 1.02rem; font-weight: 700; color: var(--h-ink); } .lc-premium .contact-details p { color: var(--h-slate); } .lc-premium .contact-form-wrapper { background: #fff; border: 1px solid var(--h-line); border-radius: var(--h-r-lg); box-shadow: var(--h-sh-md); } .lc-premium .contact-form h3 { font-family: var(--h-display); color: var(--h-ink); } .lc-premium .form-group label { color: var(--h-ink); font-weight: 600; } .lc-premium .form-group input, .lc-premium .form-group select, .lc-premium .form-group textarea { border: 1.5px solid var(--h-line); border-radius: 11px; padding: 13px 15px; font-family: var(--h-font); background: var(--h-bg-soft); transition: .2s var(--h-ease); } .lc-premium .form-group input:focus, .lc-premium .form-group select:focus, .lc-premium .form-group textarea:focus { border-color: var(--h-blue); background: #fff; box-shadow: 0 0 0 4px rgba(20,99,255,.12); } .lc-premium .contact-form .btn, .lc-premium .contact-form button[type="submit"] { background: var(--h-grad); color: #fff; border: none; border-radius: 13px; padding: 15px 30px; box-shadow: var(--h-sh-blue); width: 100%; justify-content: center; } .lc-premium .contact-form .btn:hover, .lc-premium .contact-form button[type="submit"]:hover { transform: translateY(-2px); } /* ---------- Award / success-story / leadership feature cards keep the premium feature-card look already defined; ensure left text alignment reads well and section-alt CTA bands stay legible ---------- */ .lc-premium .feature-card[style*="border-top"] { border-top-width: 4px !important; } /* ---------- Inner-page inline CTA bands (blue gradient sections) ------- These use inline style backgrounds; ensure inner buttons & text pop ---- */ .lc-premium .section[style*="gradient"] .section-title, .lc-premium .section[style*="gradient"] .section-subtitle { color: #fff !important; } .lc-premium .section[style*="gradient"] .btn { background: #fff; color: var(--h-blue); border: none; box-shadow: 0 12px 26px rgba(0,0,0,.18); } .lc-premium .section[style*="gradient"] .btn:hover { transform: translateY(-2px); color: var(--h-blue-d); } /* Inner-page about-image accent (single icon, no number badge) */ .lc-premium .about-image-accent:has(> i:only-child) { padding: 22px; }