/*----------------------------------------------------------------------------------- LIONEX — Mining Equipment Supplier lionex.ae Author: Roman Version: 2.0 — Full redesign & SEO/UX upgrade -----------------------------------------------------------------------------------*/ /* =================================================================== BASE =================================================================== */ body { margin: 0; padding: 0; background: #0B0D10; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .page-container { overflow: hidden; } a, button { transition: background .3s ease-in-out, color .3s ease-in-out; outline: none !important; } a:hover { text-decoration: none; cursor: pointer; } .scroll-fx-lock-init { position: fixed !important; top: 0; bottom: 0; left: 0; right: 0; z-index: 99999; } .blocs-grid-container { display: grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; column-gap: 1.5rem; row-gap: 1.5rem; } nav .dropdown-menu .nav-link { color: rgba(0,0,0,.6) !important; } [data-bs-theme="dark"] nav .dropdown-menu .nav-link { color: var(--bs-dropdown-link-color) !important; } /* =================================================================== PRELOADER =================================================================== */ .page-preloader { position: fixed; top: 0; bottom: 0; width: 100%; z-index: 100000; background: #0B0D10 url("img/pageload-spinner.gif") no-repeat center center; animation-name: preloader-fade; animation-delay: 2s; animation-duration: .5s; animation-fill-mode: both; } .preloader-complete { animation-delay: .1s; } @keyframes preloader-fade { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } /* =================================================================== WEB FONTS =================================================================== */ @font-face { font-family: 'Tektur-Regular'; src: url('./fonts/Tektur-Regular/Tektur-VariableFont_wdthwght.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'MatechRegular'; src: url('./fonts/MatechRegular/matech.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } /* PT Sans & PT Sans Narrow are loaded via Google Fonts in */ /* =================================================================== COLOUR TOKENS =================================================================== */ :root { --lnx-bg: #0B0D10; --lnx-bg-deep: #070810; --lnx-bg-card: #12151a; --lnx-accent: #DEFF4C; --lnx-accent-dim:rgba(222,255,76,.15); --lnx-text: rgba(255,255,255,.7); --lnx-muted: #AEAFA8; --lnx-border: rgba(255,255,255,.08); --lnx-nav-h: 68px; /* legacy Blocs tokens */ --swatch-var-6741: #0B0D10; --swatch-var-2732: #F2F2F2; --swatch-var-543: #D1D5DB; --swatch-var-4748: #B5B9C0; --swatch-var-3794: rgba(255,255,255,1.0); --swatch-var-127: rgba(174,175,168,1.00); } /* =================================================================== BLOCS LAYOUT =================================================================== */ .bloc { width: 100%; clear: both; background: 50% 50% no-repeat; padding: 0 20px; background-size: cover; position: relative; display: flex; } .bloc .container { padding-left: 0; padding-right: 0; position: relative; } .bloc-lg { padding: 100px 20px; } /* Background colour utilities */ .bgc-6741 { background-color: var(--swatch-var-6741); } .bgc-deep { background-color: var(--lnx-bg-deep); } /* Text colour */ .tc-4748 { color: var(--swatch-var-4748) !important; } /* =================================================================== BACKGROUND TEXTURES & PARALLAX =================================================================== */ .bloc-bg-texture::before { content: ""; background-size: 2px 2px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .texture-darken-strong::before { background: rgba(0,0,0,.8); } .parallax__container { clip: rect(0, auto, auto, 0); height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; z-index: -1; } .parallax { position: fixed; top: 0; transform: translate3d(0,0,0); transform-style: preserve-3d; width: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } /* Bloc image backgrounds */ .bg-316f52c82f0b6fb3207e8ab7140ae8223d4999357f4cc8e06f54ffcc84877b6f { background-image: url("img/316f52c82f0b6fb3207e8ab7140ae8223d4999357f4cc8e06f54ffcc84877b6f.jpeg"); background-image: image-set( url("img/316f52c82f0b6fb3207e8ab7140ae8223d4999357f4cc8e06f54ffcc84877b6f.webp") 1x, url("img/316f52c82f0b6fb3207e8ab7140ae8223d4999357f4cc8e06f54ffcc84877b6f.webp") 2x ); } .bg-c5908c0b4e34c7fb2a67232413871ecde9edff66a9c6d1d49d48016be50193e4 { background-image: url("img/c5908c0b4e34c7fb2a67232413871ecde9edff66a9c6d1d49d48016be50193e4.jpeg"); background-image: image-set( url("img/c5908c0b4e34c7fb2a67232413871ecde9edff66a9c6d1d49d48016be50193e4.webp") 1x, url("img/c5908c0b4e34c7fb2a67232413871ecde9edff66a9c6d1d49d48016be50193e4.webp") 2x ); } /* =================================================================== DARK BLOC BASE STYLES =================================================================== */ .d-bloc { color: rgba(255,255,255,.7); } .d-bloc button:hover { color: rgba(255,255,255,.9); } .d-bloc .a-btn, .d-bloc .navbar a, .d-bloc a .icon-sm, .d-bloc a .icon-md, .d-bloc a .icon-lg, .d-bloc a .icon-xl, .d-bloc h1 a, .d-bloc h2 a, .d-bloc h3 a, .d-bloc h4 a, .d-bloc h5 a, .d-bloc h6 a, .d-bloc p a { color: rgba(255,255,255,.6); } .d-bloc .a-btn:hover, .d-bloc .navbar a:hover, .d-bloc h1 a:hover, .d-bloc h2 a:hover, .d-bloc h3 a:hover, .d-bloc h4 a:hover, .d-bloc h5 a:hover, .d-bloc h6 a:hover, .d-bloc p a:hover { color: rgba(255,255,255,1); } .d-bloc .btn-wire, .d-bloc .btn-wire:hover { color: rgba(255,255,255,1); border-color: rgba(255,255,255,1); } /* =================================================================== NAVBAR =================================================================== */ .svg-menu-icon { fill: none; stroke: rgba(0,0,0,.5); stroke-width: 2px; fill-rule: evenodd; } .navbar-dark .svg-menu-icon { stroke: rgba(255,255,255,.5); } .menu-icon-rounded-bars { stroke-width: 3px; stroke-linecap: round; } .navbar-toggler-icon { background: none !important; pointer-events: none; width: 33px; height: 33px; } /* Main nav */ .lnx-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 9000; height: var(--lnx-nav-h); background: rgba(11,13,16,.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--lnx-border); transition: background .3s, box-shadow .3s; } .lnx-nav-scrolled { background: rgba(11,13,16,.97) !important; box-shadow: 0 2px 20px rgba(0,0,0,.5); } /* Brand */ .lnx-brand { font-family: 'Tektur-Regular', sans-serif; font-size: 22px; letter-spacing: .04em; text-decoration: none; } .brand-lion { color: #D1D5DB; } .brand-ex { color: var(--lnx-accent); } .lnx-brand:hover .brand-lion { color: #fff; } /* Nav links */ .lnx-nav-link { font-family: 'Tektur-Regular', sans-serif; font-size: 13.5px; letter-spacing: .05em; color: rgba(255,255,255,.65) !important; transition: color .2s; padding: 6px 14px !important; } .lnx-nav-link:hover { color: var(--lnx-accent) !important; } /* Footer brand reuse */ .lnx-footer-brand { font-family: 'Tektur-Regular', sans-serif; font-size: 24px; letter-spacing: .04em; } /* =================================================================== BUTTONS =================================================================== */ .btn-d, .btn-d:hover, .btn-d:focus { color: #FFF; background: rgba(0,0,0,.3); } button { outline: none !important; } .lnx-btn-primary { background-color: var(--lnx-accent); color: #0B0D10 !important; font-family: 'Tektur-Regular', sans-serif; font-weight: 700; font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; border: 2px solid var(--lnx-accent); border-radius: 4px; padding: 10px 24px; transition: background .25s, color .25s, box-shadow .25s; } .lnx-btn-primary:hover { background-color: #f0ff70; border-color: #f0ff70; color: #0B0D10 !important; box-shadow: 0 0 18px rgba(222,255,76,.35); } .lnx-btn-outline { background: transparent; color: var(--lnx-accent) !important; font-family: 'Tektur-Regular', sans-serif; font-weight: 700; font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; border: 2px solid var(--lnx-accent); border-radius: 4px; padding: 10px 24px; transition: background .25s, color .25s; } .lnx-btn-outline:hover { background: var(--lnx-accent); color: #0B0D10 !important; } .lnx-btn-lg { padding: 13px 32px; font-size: 14px; } /* =================================================================== SCROLL FX =================================================================== */ .scroll-fx-in-range { will-change: opacity; } /* =================================================================== SCROLL-TO-TOP =================================================================== */ .scrollToTop { width: 36px; height: 36px; padding: 5px; position: fixed; bottom: 20px; right: 20px; opacity: 0; z-index: 999; transition: all .3s ease-in-out; pointer-events: none; } .showScrollTop { opacity: 1; pointer-events: all; } .scroll-to-top-btn-icon { fill: none; stroke: #fff; stroke-width: 2px; fill-rule: evenodd; stroke-linecap: round; } /* =================================================================== TYPOGRAPHY — Shared =================================================================== */ h1, h2, h3, h4, h5, h6, p, label, .btn, a { font-family: "Tektur-Regular", sans-serif; } .container { max-width: 1140px; } .h1-style { font-size: 50px; margin-top: 5px; margin-bottom: 5px; text-align: left; text-transform: none; font-family: "Tektur-Regular", sans-serif; color: var(--swatch-var-127) !important; } .h2-style { font-size: 31px; font-family: "MatechRegular", sans-serif; font-weight: bold; text-align: center; color: #D1D5DB !important; } .h3-style { font-family: "PT Sans Narrow", sans-serif; font-weight: 700; color: #AEAFA8 !important; } /* paragraph base */ .p-style { font-family: "PT Sans", sans-serif; font-weight: normal; text-align: left; color: #AEAFA8 !important; } /* Large paragraph (hero sub, about) */ .p-1-style { font-size: 17px; font-family: "Tektur-Regular", sans-serif; color: #AEAFA8 !important; line-height: 1.7; } .lnx-hero-sub { font-family: "PT Sans", sans-serif; font-size: 16px; color: rgba(181,185,192,.85); line-height: 1.7; max-width: 520px; } .lnx-section-intro { font-family: "PT Sans", sans-serif; font-size: 16px; color: rgba(181,185,192,.85); line-height: 1.7; max-width: 620px; } /* Heading modifiers */ .h3-bloc-0-style { font-family: "MatechRegular", sans-serif; } .h3-bloc-3-style { font-family: "Tektur-Regular", sans-serif; } .h3-bloc-4-style { font-family: "Tektur-Regular", sans-serif; } .h3-3-style { font-family: "Tektur-Regular", sans-serif; color: #AEAFA8 !important; } .h3-4-style { font-family: "Tektur-Regular", sans-serif; color: #AEAFA8 !important; } .h3-3-bloc-4-style{ font-family: "Tektur-Regular", sans-serif; } .h3-4-bloc-3-style{ font-family: "Tektur-Regular", sans-serif; color: #AEAFA8 !important; } .h3-5-bloc-3-style{ font-family: "Tektur-Regular", sans-serif; color: #AEAFA8 !important; } .h3-6-style { font-family: "Tektur-Regular", sans-serif; color: #AEAFA8 !important; } .h3-4-bloc-4-style{ font-family: "Tektur-Regular", sans-serif; } .h3-5-style { font-family: "Tektur-Regular", sans-serif; } .h2-contact-us-style { font-family: "MatechRegular", sans-serif; } /* Consolidated paragraph colour classes — all identical, kept for Blocs compat */ .p-bloc-2-style, .p-3-style, .p-4-style, .p-bloc-4-style, .p-6-style, .p-7-style, .p-8-style, .p-bloc-3-style, .p-10-style, .p-11-style { font-family: "Tektur-Regular", sans-serif; color: #AEAFA8 !important; line-height: 1.65; } /* Accent / gradient text */ .text-gradient { color: var(--lnx-accent) !important; } .gradient-background { background-color: #AEAFA8; } /* =================================================================== HERO =================================================================== */ .lnx-hero { padding-top: var(--lnx-nav-h); } /* =================================================================== STATS STRIP =================================================================== */ .lnx-stats-strip { background: #0a0c0f; border-top: 1px solid var(--lnx-border); border-bottom: 1px solid var(--lnx-border); } .lnx-stat-item { padding: 36px 20px; border-right: 1px solid var(--lnx-border); } .lnx-stat-item:last-child { border-right: none; } .lnx-stat-number { font-family: "Tektur-Regular", sans-serif; font-size: 42px; font-weight: 700; line-height: 1; margin-bottom: 6px; } .lnx-stat-label { font-family: "PT Sans", sans-serif; font-size: 13px; color: rgba(181,185,192,.7); text-transform: uppercase; letter-spacing: .1em; } /* =================================================================== FEATURE CARDS (What We Do / Why Choose) =================================================================== */ .lnx-feature-card { background: var(--lnx-bg-card); border: 1px solid var(--lnx-border); border-radius: 6px; padding: 28px 24px; height: 100%; transition: border-color .3s, box-shadow .3s; } .lnx-feature-card:hover { border-color: rgba(222,255,76,.3); box-shadow: 0 4px 30px rgba(222,255,76,.07); } .lnx-icon { display: flex; align-items: center; } /* =================================================================== CAPABILITY CARDS =================================================================== */ .lnx-capability-card { background: var(--lnx-bg-card); border: 1px solid var(--lnx-border); border-radius: 6px; padding: 24px; height: 100%; transition: border-color .3s; } .lnx-capability-card:hover { border-color: rgba(222,255,76,.25); } .lnx-cap-img { border-radius: 4px; width: 100%; height: 180px; object-fit: cover; } /* =================================================================== REGION CARDS =================================================================== */ .lnx-region-card { background: var(--lnx-bg-card); border: 1px solid var(--lnx-border); border-radius: 6px; padding: 22px 16px; transition: border-color .3s, transform .2s; } .lnx-region-card:hover { border-color: rgba(222,255,76,.35); transform: translateY(-3px); } .lnx-region-icon { display: flex; justify-content: center; } .lnx-region-name { font-family: "Tektur-Regular", sans-serif; font-size: 14px; font-weight: 700; color: #D1D5DB; margin-bottom: 4px; } .lnx-region-sub { font-family: "PT Sans", sans-serif; font-size: 12px; color: rgba(181,185,192,.65); } /* =================================================================== CONTACT FORM =================================================================== */ .lnx-contact-info { display: flex; flex-direction: column; gap: 16px; } .lnx-contact-item { display: flex; align-items: flex-start; gap: 10px; color: var(--lnx-muted); font-family: "PT Sans", sans-serif; font-size: 15px; line-height: 1.5; } .lnx-contact-item svg { flex-shrink: 0; margin-top: 2px; } .lnx-contact-link { color: var(--lnx-accent) !important; text-decoration: none; } .lnx-contact-link:hover { color: #f0ff70 !important; text-decoration: underline; } .lnx-form { background: var(--lnx-bg-card); border: 1px solid var(--lnx-border); border-radius: 8px; padding: 32px; } .lnx-label { display: block; font-family: "Tektur-Regular", sans-serif; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(181,185,192,.8); margin-bottom: 6px; } .lnx-input { display: block; width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 4px; color: #D1D5DB; font-family: "PT Sans", sans-serif; font-size: 14.5px; padding: 10px 14px; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; } .lnx-input::placeholder { color: rgba(181,185,192,.4); } .lnx-input:focus { outline: none; border-color: var(--lnx-accent); box-shadow: 0 0 0 3px rgba(222,255,76,.12); background: rgba(255,255,255,.06); } .lnx-select { cursor: pointer; } .lnx-select option { background: #1a1e25; color: #D1D5DB; } .lnx-textarea { resize: vertical; min-height: 110px; } .lnx-form-note { font-family: "PT Sans", sans-serif; font-size: 12px; color: rgba(181,185,192,.5); text-align: center; margin-bottom: 0; } /* =================================================================== FOOTER =================================================================== */ .lnx-footer { background: #070810; border-top: 1px solid var(--lnx-border); padding: 70px 20px 0; } .lnx-footer-text { font-family: "PT Sans", sans-serif; font-size: 14px; color: rgba(181,185,192,.6); line-height: 1.65; } .lnx-footer-heading { font-family: "Tektur-Regular", sans-serif; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 14px; } .lnx-footer-list { list-style: none; padding: 0; margin: 0; } .lnx-footer-list li { font-family: "PT Sans", sans-serif; font-size: 14px; color: rgba(181,185,192,.6); margin-bottom: 8px; line-height: 1.4; } .lnx-footer-list a { color: rgba(181,185,192,.65) !important; text-decoration: none; transition: color .2s; } .lnx-footer-list a:hover { color: var(--lnx-accent) !important; } .lnx-footer-contact li { line-height: 1.5; } .lnx-footer-bottom { border-top: 1px solid var(--lnx-border); padding: 22px 0 24px; margin-top: 10px; } .lnx-footer-copy { font-family: "PT Sans", sans-serif; font-size: 13px; color: rgba(181,185,192,.4); } .lnx-footer-badge { display: inline-block; font-family: "Tektur-Regular", sans-serif; font-size: 11px; letter-spacing: .06em; color: rgba(181,185,192,.4); border: 1px solid rgba(255,255,255,.08); border-radius: 3px; padding: 3px 8px; margin-left: 6px; } .lnx-social-links { display: flex; gap: 12px; } .lnx-social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); color: rgba(181,185,192,.7) !important; transition: border-color .25s, color .25s, background .25s; } .lnx-social-link:hover { border-color: var(--lnx-accent); color: var(--lnx-accent) !important; background: var(--lnx-accent-dim); } /* =================================================================== LANGUAGE SWITCHER =================================================================== */ .lnx-lang-switch { display: flex; align-items: center; gap: 2px; border: 1px solid rgba(255,255,255,.12); border-radius: 4px; overflow: hidden; } .lnx-lang { font-family: 'Tektur-Regular', sans-serif; font-size: 11px; letter-spacing: .08em; color: rgba(255,255,255,.45) !important; text-decoration: none !important; padding: 5px 9px; transition: background .2s, color .2s; line-height: 1; } .lnx-lang:hover { color: var(--lnx-accent) !important; background: rgba(222,255,76,.07); } .lnx-lang-active { color: var(--lnx-accent) !important; background: rgba(222,255,76,.1); } /* Separator lines between lang options */ .lnx-lang + .lnx-lang { border-left: 1px solid rgba(255,255,255,.1); } /* =================================================================== WHATSAPP FLOATING BUTTON =================================================================== */ .lnx-whatsapp-float { position: fixed; bottom: 64px; right: 20px; width: 54px; height: 54px; background: #25d366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(37,211,102,.45); z-index: 998; transition: background .25s, transform .25s, box-shadow .25s; text-decoration: none !important; } .lnx-whatsapp-float:hover { background: #20bb5a; transform: scale(1.08); box-shadow: 0 6px 22px rgba(37,211,102,.55); } /* =================================================================== CARD & MASONARY (legacy Blocs) =================================================================== */ .card-sq, .card-sq .card-header, .card-sq .card-footer { border-radius: 0; } .card-rd { border-radius: 30px; } .card-rd .card-header { border-radius: 29px 29px 0 0; } .card-rd .card-footer { border-radius: 0 0 29px 29px; } .card-columns .card { margin-bottom: .75rem; } @media (min-width: 576px) { .card-columns { column-count: 3; column-gap: 1.25rem; orphans: 1; widows: 1; } .card-columns .card { display: inline-block; width: 100%; } } /* =================================================================== DROPDOWN NAVIGATION (multi-level Blocs) =================================================================== */ .dropdown-menu .dropdown-menu { border: none; } @media (min-width: 576px) { .navbar-expand-sm .dropdown-menu .dropdown-menu { border: 1px solid rgba(0,0,0,.15); position: absolute; left: 100%; top: -7px; } .navbar-expand-sm .dropdown-menu .submenu-left { right: 100%; left: auto; } } @media (min-width: 768px) { .navbar-expand-md .dropdown-menu .dropdown-menu { border: 1px solid rgba(0,0,0,.15); position: absolute; left: 100%; top: -7px; } .navbar-expand-md .dropdown-menu .submenu-left { right: 100%; left: auto; } } @media (min-width: 992px) { .navbar-expand-lg .dropdown-menu .dropdown-menu { border: 1px solid rgba(0,0,0,.15); position: absolute; left: 100%; top: -7px; } .navbar-expand-lg .dropdown-menu .submenu-left { right: 100%; left: auto; } } /* =================================================================== BLOC PADDING MULTI-BREAKPOINT =================================================================== */ @media (min-width: 576px) { .bloc-xxl-sm { padding: 200px 20px; } .bloc-xl-sm { padding: 150px 20px; } .bloc-lg-sm { padding: 100px 20px; } .bloc-md-sm { padding: 50px 20px; } .bloc-sm-sm { padding: 20px; } .bloc-no-padding-sm { padding: 0 20px; } } @media (min-width: 768px) { .bloc-xxl-md { padding: 200px 20px; } .bloc-xl-md { padding: 150px 20px; } .bloc-lg-md { padding: 100px 20px; } .bloc-md-md { padding: 50px 20px; } .bloc-sm-md { padding: 20px; } .bloc-no-padding-md { padding: 0 20px; } } @media (min-width: 992px) { .bloc-xxl-lg { padding: 200px 20px; } .bloc-xl-lg { padding: 150px 20px; } .bloc-lg-lg { padding: 100px 20px; } .bloc-md-lg { padding: 50px 20px; } .bloc-sm-lg { padding: 20px; } .bloc-no-padding-lg { padding: 0 20px; } } /* =================================================================== RESPONSIVE =================================================================== */ @media (max-width: 1024px) { .bloc.full-width-bloc, .bloc-tile-2.full-width-bloc .container, .bloc-tile-3.full-width-bloc .container, .bloc-tile-4.full-width-bloc .container { padding-left: 0; padding-right: 0; } } @media (max-width: 991px) { .container { width: 100%; } .bloc { padding-left: constant(safe-area-inset-left); padding-right: constant(safe-area-inset-right); } .bloc-group, .bloc-group .bloc { display: block; width: 100%; } } @media (max-width: 767px) { .bloc-tile-2 .container, .bloc-tile-3 .container, .bloc-tile-4 .container { padding-left: 0; padding-right: 0; } .btn-dwn { display: none; } .voffset { margin-top: 5px; } .voffset-md { margin-top: 20px; } .voffset-lg { margin-top: 30px; } form { padding: 5px; } .lnx-form { padding: 20px 16px; } } /* Mobile type scaling */ @media (max-width: 575px) { .h1-style { font-size: 38px; } .lnx-hero-sub { font-size: 15px; } .lnx-stat-number { font-size: 32px; } .lnx-stat-item { padding: 24px 12px; } } /* Stat strip: remove borders on small screens */ @media (max-width: 575px) { .lnx-stat-item { border-right: none; border-bottom: 1px solid var(--lnx-border); } .lnx-stat-item:last-child { border-bottom: none; } } /* Compact footer badges on mobile */ @media (max-width: 576px) { .lnx-footer-badge { margin-left: 0; margin-top: 4px; display: inline-block; } }