:root{--blue:#0758d8;--blue2:#0b78db;--deep:#062d7a;--green:#7bc51f;--lime:#b7e51c;--teal:#10a4b4;--ink:#0d1730;--muted:#5d6b84;--line:#e3eaf4;--soft:#f4f8ff;--white:#fff;--shadow:0 14px 45px rgba(17,55,110,.10)} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#f7faff;line-height:1.55}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 10% 30%,rgba(0,107,230,.035),transparent 28%),radial-gradient(circle at 90% 55%,rgba(120,210,40,.035),transparent 25%);z-index:-1}a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}img{max-width:100%;display:block}.container{width:min(1200px,94%);margin:auto}.page-loader{position:fixed;inset:0;background:#fff;z-index:9999;display:grid;place-items:center;opacity:1;pointer-events:none;animation:loaderOut .7s .35s forwards}.page-loader span{font-weight:900;font-size:26px;color:var(--deep);letter-spacing:3px}.page-loader i{position:absolute;width:90px;height:3px;background:linear-gradient(90deg,var(--blue),var(--lime));bottom:calc(50% - 42px);border-radius:9px}.site-header{position:sticky;top:0;z-index:1000;background:#fff;box-shadow:0 3px 22px rgba(10,40,100,.08)}.topbar{height:30px;background:linear-gradient(90deg,#062d73,#064caa);color:#fff;font-size:10px}.topbar-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}.welcome{display:flex;gap:7px;align-items:center}.welcome:first-letter{color:var(--lime)}.top-contact{display:flex;align-items:center;gap:17px}.top-contact a,.top-contact>span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.social-mini{display:flex;gap:6px}.social-mini a{width:19px;height:19px;border:1px solid rgba(255,255,255,.45);border-radius:50%;display:grid;place-items:center;font-size:8px}.top-quote{background:var(--lime);color:#173500!important;padding:7px 12px;border-radius:3px;font-weight:900;font-size:8px}.top-quote b{font-size:11px}.nav-shell{height:67px;background:#fff}.nav-wrap{height:100%;display:flex;align-items:center;justify-content:space-between}.brand img{width:154px;height:auto}.main-nav{display:flex;align-items:center;gap:25px;font-size:11px;font-weight:800;text-transform:uppercase}.main-nav>a,.drop-btn{position:relative}.main-nav>a:hover,.drop-btn:hover,.main-nav>a.active{color:var(--blue)}.main-nav>a.active:after{content:"";position:absolute;left:50%;bottom:-25px;width:22px;height:2px;background:var(--blue);transform:translateX(-50%)}.drop-btn{border:0;background:none;color:inherit;cursor:pointer;text-transform:uppercase;padding:0}.drop-btn span{font-size:12px;margin-left:2px}.nav-drop{position:relative;height:100%;display:flex;align-items:center}.mega-menu{position:absolute;left:50%;top:66px;width:min(1140px,94vw);transform:translate(-50%,12px);opacity:0;visibility:hidden;background:#fff;border-radius:0 0 13px 13px;box-shadow:0 22px 65px rgba(5,48,105,.18);border:1px solid var(--line);padding:14px 14px 0;display:grid;grid-template-columns:repeat(5,1fr) 1.08fr;gap:0;transition:.22s ease;overflow:hidden}.nav-drop:hover .mega-menu,.nav-drop:focus-within .mega-menu,.mega-menu.open{opacity:1;visibility:visible;transform:translate(-50%,0)}.mega-menu:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--teal),var(--lime))}.mega-col{padding:8px 13px 17px;border-right:1px solid #edf1f7;display:flex;flex-direction:column;gap:7px}.mega-icon{width:27px;height:27px;border:1px solid #dbe8ff;background:#f2f7ff;border-radius:8px;display:grid;place-items:center;color:var(--blue);font-size:14px;margin-bottom:2px}.mega-col h4{font-size:8px;color:var(--blue);margin:0 0 5px}.mega-col a{font-size:9px;color:#25324a;transition:.18s}.mega-col a:hover{color:var(--blue);transform:translateX(2px)}.mega-col .mega-more{color:var(--blue);font-weight:900;margin-top:auto}.mega-promo{background:linear-gradient(145deg,#061d5d,#0b5ed2);margin:0 0 0 10px;border-radius:10px 10px 0 0;min-height:220px;padding:12px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;position:relative;overflow:hidden}.mega-promo img{position:absolute;width:170px;right:-40px;top:-18px;opacity:.75}.mega-promo strong{font-size:15px;line-height:1.12;position:relative}.mega-promo small{font-size:8px;color:#dce9ff;display:block;margin:7px 0 12px;position:relative}.mega-promo>a{position:relative;background:var(--lime);color:#173300;border-radius:4px;padding:8px;font-size:7px;font-weight:900;text-align:center}.mega-strip{grid-column:1/-1;border-top:1px solid var(--line);min-height:40px;display:flex;align-items:center;gap:32px;font-size:8px;color:#596a83;padding:7px 2px}.mega-strip span{display:flex;gap:6px;align-items:center}.mega-strip span:first-letter{color:var(--blue)}.mega-strip a{margin-left:auto;color:var(--blue);font-weight:900}.simple-dropdown{position:absolute;top:66px;left:50%;transform:translate(-50%,10px);visibility:hidden;opacity:0;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:10px;min-width:170px;padding:10px;display:grid;gap:5px;transition:.2s}.nav-drop:hover .simple-dropdown,.nav-drop:focus-within .simple-dropdown{opacity:1;visibility:visible;transform:translate(-50%,0)}.simple-dropdown a{font-size:10px;padding:8px;border-radius:6px}.simple-dropdown a:hover{background:#f1f6ff;color:var(--blue)}.search-btn{border:0;background:none;font-size:22px;cursor:pointer;color:#0d172d;padding:0}.menu-toggle{display:none;border:0;background:none}.menu-toggle span{display:block;width:23px;height:2px;background:var(--deep);margin:5px;border-radius:2px} .hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#f8fbff,#eef5ff 70%,#f8fbff);min-height:470px;padding:42px 0 28px}.hero:after{content:"";position:absolute;width:460px;height:460px;border-radius:50%;right:-100px;top:-150px;background:radial-gradient(circle,rgba(0,115,240,.12),transparent 66%);pointer-events:none}.hero-grid{display:grid;grid-template-columns:46% 54%;align-items:center;min-height:420px}.hero-copy{padding-left:8px;position:relative;z-index:2}.eyebrow{display:inline-flex;align-items:center;gap:6px;background:#edf4ff;color:var(--blue);border-radius:20px;padding:6px 10px;font-size:8px;font-weight:900;letter-spacing:.7px}.pulse-dot{width:5px;height:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(183,229,28,.17)}.hero h1{font-size:clamp(37px,4.2vw,57px);line-height:1.03;letter-spacing:-2.2px;margin:17px 0 15px}.hero h1 span{background:linear-gradient(90deg,var(--blue),#1b8fbd,var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}.hero p{font-size:12px;color:#3d4d68;max-width:475px;margin:0}.actions{display:flex;gap:12px;margin:21px 0 24px}.primary,.outline,.lime,.cta-talk{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:11px 17px;border-radius:5px;font-size:9px;font-weight:900;letter-spacing:.25px;transition:.2s}.primary{background:linear-gradient(90deg,#064ed0,#075fe1);color:#fff;box-shadow:0 9px 22px rgba(7,88,216,.18)}.outline{background:#fff;border:1px solid #6a8dff;color:var(--blue)}.lime{background:var(--lime);color:#173200}.primary:hover,.outline:hover,.lime:hover,.cta-talk:hover{transform:translateY(-2px)}.trusted-label{font-size:9px;font-weight:700;color:#526078;margin-bottom:10px}.trusted-logos{display:flex;gap:24px;align-items:center;flex-wrap:wrap;font-size:11px;color:#202d42}.trusted-logos b:nth-child(1){color:#4285f4}.trusted-logos b:nth-child(2){color:#2671d9}.trusted-logos b:nth-child(3){font-size:13px}.trusted-logos b:nth-child(4){font-size:11px}.hero-visual{height:410px;position:relative;display:grid;place-items:center}.hero-orbit{width:min(550px,100%);opacity:.96;filter:drop-shadow(0 18px 30px rgba(0,83,180,.12));animation:floatOrb 8s ease-in-out infinite}.robot-halo{position:absolute;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle at 38% 38%,#fff 0 23%,#d9e9fa 24% 34%,#b4cde8 35% 42%,transparent 43%);opacity:.85;mix-blend-mode:multiply}.robot-head{position:absolute;width:112px;height:132px;border-radius:48% 48% 42% 42%;background:linear-gradient(135deg,#fff,#a9c3dd);box-shadow:inset -10px -10px 20px rgba(40,86,135,.22),0 20px 40px rgba(20,73,130,.2);transform:translate(4px,-5px) rotate(-7deg);z-index:2}.robot-head:before{content:"";position:absolute;left:18px;right:17px;top:48px;height:37px;border-radius:50%;background:#17263d;box-shadow:inset 0 0 18px #4b79a6}.robot-eye{position:absolute;width:13px;height:8px;border-radius:50%;background:#7eeaff;top:62px;box-shadow:0 0 9px #35caff}.robot-eye:first-child{left:29px}.robot-eye:nth-child(2){right:29px}.robot-head i{position:absolute;width:4px;height:22px;background:#4f78a1;right:-7px;top:47px;border-radius:5px}.hero-float{position:absolute;background:rgba(255,255,255,.97);border:1px solid #e1e9f4;border-radius:9px;box-shadow:0 12px 35px rgba(14,54,106,.12);padding:9px 12px;display:grid;grid-template-columns:25px 1fr;column-gap:6px;align-items:center;min-width:145px;font-size:9px;z-index:3}.hero-float>span{grid-row:span 2;width:25px;height:25px;border-radius:8px;background:#eef5ff;color:var(--blue);display:grid;place-items:center;font-size:13px}.hero-float strong{font-size:9px}.hero-float small{font-size:7px;color:#64738a}.float-ai{left:2%;top:18%}.float-strategy{left:3%;bottom:13%}.float-roi{right:0;top:27%}.float-growth{right:1%;bottom:17%}.hero-bg-dot{position:absolute;border-radius:50%;border:1px dashed rgba(15,105,210,.18)}.dot-one{width:230px;height:230px;right:12%;bottom:-130px}.dot-two{width:130px;height:130px;left:35%;top:-90px} .section{padding:45px 0}.heading{text-align:center;max-width:720px;margin:0 auto 28px}.heading small,.three-grid small,.blog-heading small,.cta-inner small,.mission-panel small,.process-panel small,.testimonial-panel small{font-size:8px;color:var(--blue);font-weight:900;letter-spacing:1.2px}.heading h2{font-size:27px;line-height:1.15;margin:7px 0 5px;letter-spacing:-.6px}.heading h2 span,.three-grid h2 span,.blog-heading h2 span,.cta-inner h2 span{color:var(--green)}.heading p{font-size:10px;color:var(--muted);margin:0}.qx-solutions{background:linear-gradient(180deg,#fff,#f7fbff)}.service-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.solution-card{background:#fff;border:1px solid #e2eaf5;border-radius:11px;min-height:145px;padding:13px 12px;box-shadow:0 7px 23px rgba(12,52,110,.06);transition:.25s}.solution-card:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(12,52,110,.11)}.solution-icon{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;font-size:15px;margin-bottom:7px}.solution-icon.blue{background:#eaf3ff;color:#0758d8}.solution-icon.purple{background:#f0ecff;color:#6045dc}.solution-icon.cyan{background:#e8faff;color:#068ab6}.solution-icon.pink{background:#ffedf3;color:#ef3f6f}.solution-icon.orange{background:#fff3e1;color:#ef8b00}.solution-icon.green{background:#ebfaed;color:#19934d}.solution-card h3{font-size:10px;margin:0 0 6px}.solution-card p{font-size:8px;line-height:1.55;color:#5d6b84;min-height:37px;margin:0 0 6px}.solution-card a{font-size:7px;color:#1b9a48;font-weight:900}.center-button{text-align:center;margin-top:15px}.small-btn{padding:8px 20px;font-size:7px;border-radius:4px} .qx-stats{padding:14px 0;background:linear-gradient(90deg,#0755c8,#0b81bc,#63a923)}.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;color:#fff}.stats-grid>div{min-height:50px;display:grid;grid-template-columns:42px auto auto;grid-template-rows:1fr 1fr;align-items:center;padding:4px 20px;border-right:1px solid rgba(255,255,255,.15)}.stats-grid>div:last-child{border-right:0}.stat-icon{grid-row:span 2;width:35px;height:35px;border-radius:50%;border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;font-size:17px}.stats-grid b{font-size:20px;line-height:1}.stats-grid strong{font-size:15px;align-self:end}.stats-grid small{grid-column:2/4;font-size:7px;opacity:.95;align-self:start} .qx-cases{background:#f7faff}.case-slider{position:relative;padding:0 43px}.case-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.case-card{background:#fff;border:1px solid #e4eaf3;border-radius:9px;overflow:hidden;box-shadow:0 7px 24px rgba(12,53,110,.07);transition:.25s}.case-card:hover{transform:translateY(-5px)}.case-image{height:112px;position:relative;overflow:hidden;background:#eaf2ff}.case-image img{width:100%;height:100%;object-fit:cover}.case-image em{position:absolute;left:7px;bottom:7px;background:#0758d8;color:#fff;font-size:6px;font-style:normal;font-weight:900;padding:4px 7px;border-radius:3px}.case-copy{padding:9px 11px 12px}.case-copy h3{font-size:9px;margin:0 0 3px}.case-copy p{font-size:7px;color:#63718a;margin:0 0 5px}.case-copy a{font-size:7px;color:var(--blue);font-weight:900}.slider-arrow{position:absolute;top:45%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid #dce6f3;color:var(--blue);font-size:22px;line-height:20px;box-shadow:0 5px 15px rgba(20,50,100,.08);z-index:2;cursor:pointer}.slider-arrow.prev{left:0}.slider-arrow.next{right:0} .qx-three{padding-top:20px;background:#f7faff}.three-grid{display:grid;grid-template-columns:1.1fr 1.4fr 1.1fr;gap:1px;background:#dfe7f3;border:1px solid #e0e7f2;border-radius:12px;overflow:hidden}.three-grid>article{background:#fff;padding:20px;min-height:215px;position:relative}.three-grid h2{font-size:20px;line-height:1.15;margin:5px 0 8px}.three-grid p{font-size:9px;color:var(--muted);max-width:270px}.mission-panel ul{list-style:none;padding:0;margin:9px 0 12px;display:grid;gap:5px}.mission-panel li{font-size:7px;color:#4f607b}.mission-panel li:before{content:"✓";color:#45a722;font-weight:900;margin-right:6px}.mission-orb{position:absolute;right:-7px;bottom:-12px;width:110px;height:90px;overflow:hidden;opacity:.8}.mission-orb img{width:150px}.tiny-btn{padding:7px 11px;font-size:7px}.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}.process-steps>div{position:relative}.process-steps>div:not(:last-child):after{content:"";position:absolute;top:14px;left:34px;width:calc(100% + 2px);height:1px;background:linear-gradient(90deg,#2c7af0,#7fc73a)}.process-steps b{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;border:1px solid var(--blue);background:#fff;display:grid;place-items:center;font-size:7px;color:#13255a;margin-bottom:7px}.process-steps strong{display:block;font-size:8px}.process-steps small{display:block;font-size:6.5px;color:#6b7890;letter-spacing:0;font-weight:500;margin-top:3px}.testimonial-panel{background:linear-gradient(135deg,#f0f6ff,#f8fbff)!important}.client-quote{margin-top:12px;padding-left:45px;position:relative}.client-avatar{position:absolute;left:0;top:0;width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#111b2f,#c5d9e8);color:#fff;font-size:8px;font-weight:900}.client-quote p{font-size:8px;line-height:1.65;margin:0 0 7px}.client-quote strong{font-size:7px;display:block}.client-quote small{font-size:6px;color:#758198;letter-spacing:0}.stars{color:#f2b300;letter-spacing:1px;font-size:8px;margin-top:4px}.dots{text-align:center;color:var(--blue);font-size:7px;margin-top:11px} .qx-blog{padding-top:28px;padding-bottom:36px}.blog-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:15px}.blog-heading h2{font-size:21px;margin:4px 0 0}.blog-heading>a{font-size:7px;color:var(--blue);font-weight:900}.blog-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.blog-card{background:#fff;border:1px solid #e1e8f2;border-radius:8px;overflow:hidden;box-shadow:0 7px 22px rgba(10,50,100,.06)}.blog-thumb{height:86px;background:linear-gradient(135deg,#062f83,#0b6fd7 60%,#74a922);color:#fff;padding:10px;font-size:7px;font-weight:900;display:flex;align-items:end}.blog-copy{padding:9px 11px}.blog-copy h3{font-size:9px;line-height:1.4;margin:0 0 5px}.blog-copy small{font-size:6.5px;color:#738097} .qx-cta{background:linear-gradient(100deg,#063c9b,#0760ce 55%,#2f8e47);color:#fff;overflow:hidden}.cta-inner{min-height:155px;display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative}.cta-inner small{color:#bce824}.cta-inner h2{font-size:27px;line-height:1.1;margin:5px 0}.cta-inner p{font-size:9px;color:#d9e8ff;margin:5px 0 0}.cta-actions{display:flex;gap:10px;position:relative;z-index:2}.cta-talk{border:1px solid rgba(255,255,255,.55);color:#fff}.cta-rocket{font-size:74px;opacity:.35;transform:rotate(-10deg);position:absolute;right:8%;bottom:-16px} .page-hero{background:linear-gradient(120deg,#eff6ff,#fff);padding:70px 0}.page-hero h1{font-size:48px;line-height:1.1;margin:8px 0}.page-hero p{color:var(--muted)}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px}.form-card,.card,.case,.testimonial,.blog-card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:25px}.form-card form{display:grid;gap:11px}.form-card input,.form-card select,.form-card textarea{width:100%;border:1px solid #dce5f1;border-radius:8px;padding:12px;outline:none}.success,.error{padding:11px;border-radius:7px;margin-bottom:12px;font-size:13px}.success{background:#eaf9ed;color:#237a37}.error{background:#fff0f0;color:#9c2d2d} @keyframes loaderOut{to{opacity:0;visibility:hidden}}@keyframes floatOrb{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(1deg)}} @media(max-width:1050px){ .top-contact{gap:10px} .main-nav{gap:15px} .mega-menu{width:96vw} .service-row{grid-template-columns:repeat(3,1fr)} .hero-grid{grid-template-columns:1fr 1fr} .three-grid{grid-template-columns:1fr 1fr} .testimonial-panel{grid-column:span 2} } @media(max-width:800px){ .topbar{height:auto;padding:7px 0} .topbar-inner{justify-content:center} .welcome{display:none} .top-contact{justify-content:center;flex-wrap:wrap;gap:7px} .top-contact>span{display:none} .nav-shell{height:62px} .brand img{width:138px} .menu-toggle{display:block;z-index:1002} .main-nav{ position:absolute; left:3%; right:3%; top:92px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); border-radius:10px; padding:10px 12px; display:none; flex-direction:column; align-items:stretch; gap:0; text-align:left; } .main-nav.open{ display:flex; } .main-nav>a, .drop-btn{ width:100%; min-height:43px; padding:12px 10px; display:flex; align-items:center; font-size:11px; line-height:1.2; font-weight:800; border-bottom:1px solid #eef2f7; } .main-nav>a{ justify-content:flex-start; text-align:left; } .drop-btn{ justify-content:space-between; text-align:left; } .drop-btn span{ font-size:12px; margin-left:2px; } .main-nav>a.active:after{ display:none; } .nav-drop{ height:auto; display:block; width:100%; } .drop-btn{ width:100%; text-align:left; } /* CONTACT NAV ITEM — MATCHES ALL OTHER MOBILE ITEMS */ .main-nav .nav-item{ width:100%; display:block; } .main-nav .nav-item .nav-link{ display:flex; align-items:center; justify-content:flex-start; width:100%; min-height:43px; padding:12px 10px; font-size:11px; line-height:1.2; font-weight:800; text-align:left; border-bottom:1px solid #eef2f7; } .mega-menu{ position:static; width:100%; transform:none!important; opacity:1; visibility:visible; display:none; grid-template-columns:1fr 1fr; padding:7px; box-shadow:none; border:0; border-radius:7px; } .nav-drop.menu-open .mega-menu{ display:grid; } .mega-col{ padding:9px; border-right:0; } .mega-promo{ display:none; } .mega-strip{ display:none; } .simple-dropdown{ position:static; transform:none!important; opacity:1; visibility:visible; display:none; box-shadow:none; border:0; } .nav-drop.menu-open .simple-dropdown{ display:grid; } .search-btn{ padding:11px 8px; text-align:left; } .hero{padding-top:28px} .hero-grid{grid-template-columns:1fr;min-height:0} .hero-copy{text-align:center} .hero p{margin:auto} .actions{justify-content:center} .trusted-logos{justify-content:center} .hero-visual{height:350px;margin-top:10px} .service-row{grid-template-columns:repeat(2,1fr)} .stats-grid{grid-template-columns:repeat(2,1fr)} .stats-grid>div{border-bottom:1px solid rgba(255,255,255,.15)} .stats-grid>div:last-child{grid-column:span 2} .case-grid{grid-template-columns:repeat(2,1fr)} .three-grid{grid-template-columns:1fr} .testimonial-panel{grid-column:auto} .blog-row{grid-template-columns:1fr} .cta-inner{padding:25px 0;flex-direction:column;align-items:flex-start} .page-hero h1{font-size:38px} } @media(max-width:520px){ .top-contact a span{display:none} .top-quote{display:none} .hero h1{font-size:39px;letter-spacing:-1.7px} .hero-visual{height:310px} .hero-float{transform:scale(.84)} .float-ai{left:-4%} .float-strategy{left:-5%} .float-roi{right:-5%} .float-growth{right:-4%} .service-row{grid-template-columns:1fr} .stats-grid{grid-template-columns:1fr} .stats-grid>div:last-child{grid-column:auto} .case-slider{padding:0 0} .case-grid{grid-template-columns:1fr} .slider-arrow{display:none} .three-grid{border-radius:8px} .process-steps{grid-template-columns:1fr 1fr} .process-steps>div:not(:last-child):after{display:none} .cta-actions{flex-direction:column;width:100%} } /* QNIX APPROVED VISUAL MEGA MENU */ .mega-menu-visual{width:min(920px,94vw);grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr);padding:0;background:#fff;border-radius:0 0 16px 16px;overflow:hidden} .mega-menu-visual .mega-preview{grid-column:1;grid-row:1;min-height:100%;height:100%;border-radius:0} .mega-menu-visual .mega-links{grid-column:2;grid-row:1;padding:22px 18px 18px 14px;display:flex;flex-direction:column;gap:4px;min-width:0} .mega-label{font-size:9px;font-weight:900;letter-spacing:1.5px;color:#0b57b9;padding:0 10px 10px} .mega-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;border:1px solid transparent;transition:all .2s ease;min-height:48px} .mega-item:hover,.mega-item.active{background:linear-gradient(90deg,#f1f7ff,#fff);border-color:#e2ebf8;transform:translateX(2px)} .mi-icon{flex:0 0 29px;width:29px;height:29px;border-radius:8px;display:grid;place-items:center;background:#eef5ff;color:#075ac2;font-size:8px;font-weight:900} .mega-item b{display:block;font-size:11px;line-height:1.25;color:#16243d} .mega-item small{display:block;font-size:8px;color:#718096;margin-top:2px;line-height:1.35} .mega-more-link{font-size:9px!important;font-weight:900;color:#075ac2!important;padding:9px 10px;margin-top:2px} .mega-preview{position:relative;min-height:305px;overflow:hidden;background:#0a2d67} .mega-preview-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform .55s ease,opacity .25s ease} .mega-preview:hover .mega-preview-img{transform:scale(1.04)} .preview-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,25,63,.08),rgba(3,21,57,.88))} .preview-copy{position:absolute;left:22px;right:20px;bottom:20px;color:#fff} .preview-copy span{font-size:8px;font-weight:900;letter-spacing:1.4px;color:#9ee83b} .preview-copy strong{display:block;font-size:22px;line-height:1.12;margin:7px 0 12px;letter-spacing:-.4px} .preview-copy a{display:inline-block;background:#9ee83b;color:#163100;padding:8px 11px;border-radius:5px;font-size:8px;font-weight:900} .mega-preview-blue{background:linear-gradient(145deg,#05266b,#0a68d8)} @media(min-width:801px){.mega-trigger:hover .mega-menu-visual,.mega-trigger:focus-within .mega-menu-visual{display:grid}.mega-trigger .mega-menu-visual{left:50%;top:66px}.main-nav{gap:22px}.main-nav>a,.drop-btn{font-size:11px}} @media(max-width:1050px) and (min-width:801px){.mega-menu-visual{width:min(900px,95vw)}.mega-item b{font-size:10px}.preview-copy strong{font-size:19px}} @media(max-width:800px){.mega-menu-visual{grid-template-columns:1fr;width:100%;padding:0;display:none}.mega-menu-visual .mega-preview{grid-column:1;grid-row:1;min-height:220px;height:220px;margin:0 8px 8px;border-radius:10px}.mega-menu-visual .mega-links{grid-column:1;grid-row:2;padding:10px}.nav-drop.menu-open .mega-menu-visual{display:grid}.preview-copy strong{font-size:18px}.mega-item{padding:9px 7px}.mega-item b{font-size:10px}.mega-item small{font-size:8px}.mega-label{padding:5px 7px 8px}} /* QNIX FINAL MENU + READABILITY POLISH */ @media(min-width:801px){ .mega-menu-visual{grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);width:min(1040px,94vw)} .mega-menu-visual .mega-links{grid-column:1;grid-row:1;padding:26px 20px 22px 18px} .mega-menu-visual .mega-preview{grid-column:2;grid-row:1;min-height:360px} .mega-item{padding:11px 12px;min-height:56px;gap:13px} .mega-item b{font-size:13px} .mega-item small{font-size:9px} .mega-label{font-size:10px;padding:0 12px 12px} .mi-icon{width:32px;height:32px;flex-basis:32px;font-size:9px} .preview-copy{left:24px;right:22px;bottom:24px} .preview-copy span{font-size:9px} .preview-copy strong{font-size:24px} .preview-copy a{font-size:9px;padding:9px 12px} /* Services keeps the original full text-only list: no preview image. */ .mega-menu-services{width:min(900px,92vw);grid-template-columns:1fr;padding:0 18px 18px} .mega-menu-services .mega-links{grid-column:1;grid-row:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 10px;padding:24px 4px 4px} .mega-menu-services .mega-label{grid-column:1/-1} .mega-menu-services .mega-item{min-height:58px} .mega-menu-services .mega-more-link{grid-column:1/-1} } /* Make the whole approved homepage feel larger and easier to read without changing its hierarchy. */ @media(min-width:801px){ .container{width:min(1240px,94%)} .topbar{height:36px;font-size:11px} .top-quote{font-size:9px;padding:8px 14px} .nav-shell{height:76px} .brand img{width:176px} .main-nav{gap:28px;font-size:13px} .main-nav>a,.drop-btn{font-size:13px} .drop-btn span{font-size:14px} .search-btn{font-size:25px} .hero{min-height:540px;padding:54px 0 38px} .hero-grid{min-height:480px} .hero h1{font-size:clamp(44px,4.6vw,64px)} .hero p{font-size:14px;max-width:530px} .eyebrow{font-size:10px;padding:7px 12px} .primary,.outline,.lime,.cta-talk{padding:13px 20px;font-size:10px} .trusted-label{font-size:10px} .trusted-logos{font-size:13px;gap:28px} .section{padding:58px 0} .heading{max-width:820px;margin-bottom:34px} .heading small,.three-grid small,.blog-heading small,.cta-inner small,.mission-panel small,.process-panel small,.testimonial-panel small{font-size:10px} .heading h2{font-size:34px} .heading p{font-size:12px} .solution-card{min-height:170px;padding:16px 15px} .solution-icon{width:36px;height:36px;font-size:17px} .solution-card h3{font-size:12px} .solution-card p{font-size:9.5px} .solution-card a{font-size:8.5px} .small-btn{font-size:9px;padding:10px 22px} .stats-grid b{font-size:24px} .stats-grid strong{font-size:17px} .stats-grid small{font-size:8px} .case-copy h3{font-size:11px} .case-copy p{font-size:8.5px} .case-copy a{font-size:8.5px} .three-grid h2{font-size:23px} .three-grid p{font-size:10.5px} .mission-panel li{font-size:8.5px} .process-steps strong{font-size:9.5px} .process-steps small{font-size:7.5px} .client-quote p{font-size:9.5px} .client-quote strong{font-size:8.5px} .blog-heading h2{font-size:25px} .blog-copy h3{font-size:11px} .blog-copy small{font-size:7.5px} .cta-inner h2{font-size:34px} .cta-inner p{font-size:10.5px} } @media(max-width:800px){ .mega-menu-services{grid-template-columns:1fr!important;width:100%;padding:7px} .mega-menu-services .mega-links{display:grid;grid-template-columns:1fr!important;grid-column:1;grid-row:1;padding:10px} .mega-menu-services .mega-label{grid-column:1} .mega-menu-services .mega-more-link{grid-column:1} .mega-menu-visual .mega-preview{grid-column:1;grid-row:1} .mega-menu-visual .mega-links{grid-column:1;grid-row:2} .brand img{width:150px} .main-nav>a,.drop-btn{font-size:12px} .mega-item b{font-size:11px} .mega-item small{font-size:8.5px} .heading h2{font-size:30px} .hero p{font-size:13px} } /* FINAL APPROVED VISUAL SCALE POLISH — preserve layout, increase readability */ @media (min-width: 801px){ .container{width:min(1280px,94%)} .brand img{width:174px} .main-nav{gap:30px;font-size:14px} .main-nav>a,.drop-btn{font-size:14px} .topbar{font-size:12px} .top-quote{font-size:10px;padding:9px 15px} .hero{min-height:540px;padding:54px 0 36px} .hero-grid{min-height:480px} .hero h1{font-size:clamp(48px,4.7vw,66px)} .hero p{font-size:14px;max-width:560px} .eyebrow{font-size:10px;padding:8px 13px} .primary,.outline,.lime,.cta-talk{padding:14px 21px;font-size:11px} .trusted-label{font-size:11px} .trusted-logos{font-size:14px;gap:30px} .section{padding:58px 0} .heading{max-width:800px;margin-bottom:34px} .heading small,.three-grid small,.blog-heading small,.cta-inner small,.mission-panel small,.process-panel small,.testimonial-panel small{font-size:11px} .heading h2{font-size:38px} .heading p{font-size:14px} .solution-card h3{font-size:14px} .solution-card p{font-size:11px} .solution-card a{font-size:10px} .stats-grid b{font-size:30px} .stats-grid strong{font-size:19px} .stats-grid small{font-size:9px} .case-copy h3{font-size:14px} .case-copy p{font-size:10.5px} .case-copy a{font-size:10px} .three-grid h2{font-size:28px} .three-grid p{font-size:12px} .mission-panel li{font-size:10px} .process-steps strong{font-size:11px} .process-steps small{font-size:9px} .client-quote p{font-size:11px} .client-quote strong{font-size:10px} .blog-heading h2{font-size:30px} .blog-copy h3{font-size:14px} .blog-copy small{font-size:9px} .cta-inner h2{font-size:40px} .cta-inner p{font-size:12px} /* visual dropdowns: text left, image right */ .mega-menu-visual{grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);width:min(1040px,94vw)} .mega-menu-visual .mega-links{grid-column:1;grid-row:1} .mega-menu-visual .mega-preview{grid-column:2;grid-row:1} .mega-item b{font-size:13px} .mega-item small{font-size:9px} .mega-label{font-size:10px} .preview-copy strong{font-size:24px} } /* FINAL APPROVED MEGA MENU POSITIONING Every desktop mega menu opens in the same centered position as the approved Corporate Info menu. Existing content, images and Services list are untouched. */ @media (min-width:801px){ .main-nav > .nav-drop > .mega-menu{ position:fixed !important; left:50vw !important; right:auto !important; top:112px !important; margin:0 !important; transform:translate(-50%,12px) !important; max-width:calc(100vw - 32px) !important; box-sizing:border-box; z-index:9999; } .main-nav > .nav-drop:hover > .mega-menu, .main-nav > .nav-drop:focus-within > .mega-menu, .main-nav > .nav-drop > .mega-menu.open{ transform:translate(-50%,0) !important; } /* Keep each existing menu's approved size; only prevent viewport clipping. */ .main-nav > .nav-drop > .mega-menu.mega-menu-visual{ width:min(1040px,calc(100vw - 32px)) !important; } .main-nav > .nav-drop > .mega-menu.mega-menu-services{ width:min(900px,calc(100vw - 32px)) !important; min-height:375px !important; } /* Approved layout: image LEFT / text RIGHT for Our Work, Blog and Contact only. */ .main-nav > .nav-drop > .mega-menu.work-menu.mega-menu-visual, .main-nav > .nav-drop > .mega-menu.blog-menu.mega-menu-visual, .main-nav > .nav-drop > .mega-menu.contact-menu.mega-menu-visual{ grid-template-columns:minmax(320px,.88fr) minmax(0,1.12fr) !important; } .main-nav > .nav-drop > .mega-menu.work-menu.mega-menu-visual .mega-preview, .main-nav > .nav-drop > .mega-menu.blog-menu.mega-menu-visual .mega-preview, .main-nav > .nav-drop > .mega-menu.contact-menu.mega-menu-visual .mega-preview{ grid-column:1 !important; grid-row:1 !important; } .main-nav > .nav-drop > .mega-menu.work-menu.mega-menu-visual .mega-links, .main-nav > .nav-drop > .mega-menu.blog-menu.mega-menu-visual .mega-links, .main-nav > .nav-drop > .mega-menu.contact-menu.mega-menu-visual .mega-links{ grid-column:2 !important; grid-row:1 !important; } } /* ========================================================= QNIX DIGITAL — SECTION 1 - HERO CSS Brand Palette: Blue #0758D8 Electric Blue #087EE7 Cyan #08A8CF Green #16B98A Lime #79C91C ========================================================= */ .qnx-final-hero { --qx-blue: #0758d8; --qx-blue2: #087ee7; --qx-cyan: #08a8cf; --qx-green: #16b98a; --qx-lime: #79c91c; --qx-ink: #0b2850; --qx-muted: #5e728b; position: relative; min-height: 650px; display: flex; align-items: center; overflow: hidden; isolation: isolate; background: radial-gradient( circle at 76% 42%, rgba(8,126,231,.13), transparent 29% ), radial-gradient( circle at 91% 78%, rgba(22,185,138,.10), transparent 25% ), linear-gradient( 135deg, #ffffff 0%, #f6faff 40%, #edf9fc 70%, #f5fbf3 100% ); } /* ========================================================= BACKGROUND GRID ========================================================= */ .qnx-hero-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient( rgba(7,88,216,.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(7,88,216,.035) 1px, transparent 1px ); background-size: 58px 58px; opacity: .55; mask-image: linear-gradient( to bottom, black 0%, rgba(0,0,0,.65) 58%, transparent 100% ); -webkit-mask-image: linear-gradient( to bottom, black 0%, rgba(0,0,0,.65) 58%, transparent 100% ); } /* ========================================================= BACKGROUND GLOWS ========================================================= */ .qnx-hero-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(60px); z-index: 0; } .qnx-glow-one { width: 330px; height: 330px; top: -150px; left: -100px; background: rgba(7,88,216,.075); } .qnx-glow-two { width: 380px; height: 380px; right: -170px; bottom: -180px; background: rgba(22,185,138,.09); } .qnx-glow-three { width: 210px; height: 210px; right: 34%; top: 8%; background: rgba(8,168,207,.065); animation: qnxAmbientGlow 7s ease-in-out infinite; } /* ========================================================= MAIN CONTAINER ========================================================= */ .qnx-hero-container { position: relative; z-index: 5; width: min( 1320px, calc(100% - 70px) ); margin: 0 auto; display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); align-items: center; gap: 20px; } /* ========================================================= LEFT CONTENT ========================================================= */ .qnx-hero-left { position: relative; z-index: 10; padding: 20px 0; } .qnx-hero-badge { display: inline-flex; align-items: center; gap: 11px; padding: 10px 17px; margin-bottom: 24px; border-radius: 50px; color: var(--qx-blue); font-size: 12px; font-weight: 800; letter-spacing: .55px; background: rgba(255,255,255,.82); border: 1px solid rgba(7,88,216,.14); box-shadow: 0 9px 28px rgba(7,70,150,.07); backdrop-filter: blur(14px); } .qnx-live-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: linear-gradient( 135deg, var(--qx-green), var(--qx-lime) ); box-shadow: 0 0 0 5px rgba(22,185,138,.10), 0 0 13px rgba(22,185,138,.45); animation: qnxLivePulse 2s ease-in-out infinite; } /* ========================================================= HEADING ========================================================= */ .qnx-hero-left h1 { margin: 0; max-width: 730px; color: var(--qx-ink); font-size: clamp( 52px, 5.15vw, 76px ); line-height: 1.015; letter-spacing: -3.2px; font-weight: 850; } .qnx-hero-left h1 span { display: inline-block; background: linear-gradient( 90deg, var(--qx-blue) 0%, var(--qx-blue2) 32%, var(--qx-cyan) 68%, var(--qx-green) 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ========================================================= DESCRIPTION ========================================================= */ .qnx-hero-description { max-width: 600px; margin: 27px 0 32px; color: var(--qx-muted); font-size: 17px; line-height: 1.75; font-weight: 500; } /* ========================================================= BUTTONS ========================================================= */ .qnx-hero-actions { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; } .qnx-hero-primary, .qnx-hero-secondary { min-height: 55px; padding: 0 23px; display: inline-flex; align-items: center; justify-content: center; gap: 15px; border-radius: 11px; text-decoration: none; font-size: 14px; font-weight: 750; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease; } .qnx-hero-primary { color: #fff; background: linear-gradient( 110deg, var(--qx-blue), var(--qx-blue2) 48%, var(--qx-green) ); box-shadow: 0 14px 34px rgba(7,88,216,.20); } .qnx-hero-primary b, .qnx-hero-secondary b { font-size: 18px; font-weight: 500; transition: transform .3s ease; } .qnx-hero-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 42px rgba(7,88,216,.28); } .qnx-hero-primary:hover b, .qnx-hero-secondary:hover b { transform: translateX(4px); } .qnx-hero-secondary { color: var(--qx-blue); background: rgba(255,255,255,.82); border: 1px solid rgba(7,88,216,.22); box-shadow: 0 8px 24px rgba(30,80,120,.045); } .qnx-hero-secondary:hover { transform: translateY(-3px); background: #fff; border-color: var(--qx-green); box-shadow: 0 13px 30px rgba(20,120,150,.10); } /* ========================================================= TRUST FEATURES ========================================================= */ .qnx-hero-features { display: flex; align-items: center; margin-top: 40px; } .qnx-feature { display: flex; align-items: center; gap: 11px; padding: 0 25px; border-right: 1px solid rgba(7,88,216,.13); } .qnx-feature:first-child { padding-left: 0; } .qnx-feature:last-child { border-right: 0; } .qnx-feature-icon { width: 38px; height: 38px; display: grid; place-items: center; flex-shrink: 0; border-radius: 10px; color: var(--qx-blue); background: linear-gradient( 145deg, rgba(7,88,216,.09), rgba(8,168,207,.06) ); border: 1px solid rgba(7,88,216,.10); font-size: 17px; } .qnx-feature strong { display: block; color: #173c62; font-size: 13px; font-weight: 800; } .qnx-feature small { display: block; margin-top: 4px; color: #7a8da3; font-size: 10px; } /* ========================================================= RIGHT AI VISUAL ========================================================= */ .qnx-hero-ai { position: relative; height: 580px; display: flex; align-items: center; justify-content: center; overflow: visible; } /* ========================================================= AI LIGHT ========================================================= */ .qnx-ai-light { position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient( circle, rgba(7,88,216,.13) 0%, rgba(8,168,207,.08) 34%, rgba(22,185,138,.055) 52%, transparent 72% ); filter: blur(15px); z-index: 1; animation: qnxAiGlow 5.5s ease-in-out infinite; } /* ========================================================= PREMIUM Q ========================================================= */ .qnx-ai-q { position: absolute; width: 450px; height: 450px; border-radius: 50%; background: conic-gradient( from 215deg, #0758d8 0deg, #087ee7 65deg, #08a8cf 135deg, #16b98a 215deg, #79c91c 285deg, #0758d8 360deg ); z-index: 2; opacity: .97; transform: translate(28px,-48px); box-shadow: 0 0 30px rgba(7,88,216,.24), 0 0 65px rgba(8,168,207,.17), 0 0 105px rgba(22,185,138,.10); filter: saturate(1.08); animation: qnxPremiumQMove 9s ease-in-out infinite; } /* Q hole */ .qnx-q-hole { position: absolute; width: 252px; height: 252px; top: 99px; left: 99px; border-radius: 50%; background: radial-gradient( circle at 42% 38%, #ffffff 0%, #f8fcff 52%, #edf8fb 100% ); box-shadow: inset 0 0 28px rgba(7,88,216,.055); z-index: 2; } /* Q tail */ .qnx-q-tail { position: absolute; width: 132px; height: 84px; right: 2px; bottom: 51px; border-radius: 0 33px 13px 12px; background: linear-gradient( 135deg, var(--qx-blue2), var(--qx-cyan) 48%, var(--qx-lime) ); transform: rotate(31deg); z-index: 3; box-shadow: 0 0 22px rgba(8,168,207,.24), 0 12px 30px rgba(20,140,130,.14); } /* ========================================================= Q LIGHT RINGS ========================================================= */ .qnx-ai-q::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: conic-gradient( from 220deg, transparent 0deg, rgba(8,126,231,.70) 55deg, transparent 105deg, transparent 180deg, rgba(22,185,138,.60) 250deg, transparent 310deg ); -webkit-mask: radial-gradient( farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px) ); mask: radial-gradient( farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px) ); opacity: .75; animation: qnxQLightRing 8s linear infinite; } /* Internal glow */ .qnx-ai-q::after { content: ""; position: absolute; width: 230px; height: 230px; top: 27px; left: 75px; border-radius: 50%; background: radial-gradient( circle, rgba(255,255,255,.30), rgba(80,190,255,.10) 38%, transparent 72% ); filter: blur(18px); opacity: .65; animation: qnxQInnerGlow 5s ease-in-out infinite; } /* ========================================================= ROBOT ========================================================= */ .qnx-robot-wrap { position: relative; z-index: 6; width: 585px; display: flex; align-items: center; justify-content: center; top: 35px; animation: qnxRobotFloat 6s ease-in-out infinite; } .qnx-robot { width: 100%; height: auto; display: block; object-fit: contain; filter: drop-shadow( 0 30px 42px rgba(10,65,125,.18) ) drop-shadow( 0 0 20px rgba(8,168,207,.10) ); } /* ========================================================= ORBITS ========================================================= */ .qnx-ai-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(7,88,216,.15); z-index: 3; pointer-events: none; } .qnx-orbit-a { width: 520px; height: 250px; transform: rotate(-18deg); animation: qnxOrbitA 13s linear infinite; } .qnx-orbit-b { width: 345px; height: 535px; transform: rotate(25deg); border-color: rgba(8,168,207,.13); animation: qnxOrbitB 16s linear infinite; } /* ========================================================= FLOATING CARDS ========================================================= */ .qnx-ai-card { position: absolute; z-index: 10; display: flex; align-items: center; gap: 11px; min-width: 190px; padding: 13px 16px; border-radius: 14px; background: rgba(255,255,255,.91); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 18px 42px rgba(18,73,125,.12); backdrop-filter: blur(16px); animation: qnxCardFloat 5s ease-in-out infinite; } .qnx-ai-card:hover { transform: translateY(-5px) scale(1.025); box-shadow: 0 23px 50px rgba(18,73,125,.17); } /* Icon */ .qnx-card-icon { width: 38px; height: 38px; display: grid; place-items: center; flex-shrink: 0; border-radius: 10px; color: #fff; background: linear-gradient( 135deg, var(--qx-blue), var(--qx-cyan), var(--qx-green) ); font-size: 16px; box-shadow: 0 7px 17px rgba(7,88,216,.18); } /* Text */ .qnx-card-info strong { display: block; color: #173d62; font-size: 12px; font-weight: 800; } .qnx-card-info small { display: block; margin-top: 4px; color: #8090a2; font-size: 10px; } /* Status */ .qnx-card-status { width: 7px; height: 7px; margin-left: auto; flex-shrink: 0; border-radius: 50%; background: var(--qx-green); box-shadow: 0 0 11px rgba(22,185,138,.65); } /* ========================================================= CARD POSITIONS ========================================================= */ .qnx-card-ai { top: 52px; left: 2px; } .qnx-card-auto { top: 188px; right: -8px; animation-delay: -1.5s; } .qnx-card-seo { bottom: 170px; left: 0; animation-delay: -2.7s; } .qnx-card-growth { bottom: 58px; right: 18px; animation-delay: -3.8s; } /* ========================================================= PARTICLES ========================================================= */ .qnx-particle { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--qx-green); box-shadow: 0 0 14px rgba(22,185,138,.75); z-index: 8; animation: qnxParticle 4s ease-in-out infinite; } .qnx-particle-1 { top: 80px; right: 27%; } .qnx-particle-2 { top: 220px; left: 13%; animation-delay: -1s; } .qnx-particle-3 { bottom: 130px; right: 15%; animation-delay: -2s; } .qnx-particle-4 { bottom: 265px; left: 30%; animation-delay: -3s; } .qnx-particle-5 { top: 130px; right: 8%; animation-delay: -1.5s; } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes qnxLivePulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .55; } } @keyframes qnxAiGlow { 0%,100% { transform: scale(.94); opacity: .62; } 50% { transform: scale(1.10); opacity: 1; } } @keyframes qnxAmbientGlow { 0%,100% { transform: scale(.90); opacity: .38; } 50% { transform: scale(1.18); opacity: .78; } } @keyframes qnxPremiumQMove { 0%,100% { transform: translate(28px,-48px) rotate(0deg) scale(1); } 50% { transform: translate(20px,-58px) rotate(3deg) scale(1.02); } } @keyframes qnxQLightRing { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes qnxQInnerGlow { 0%,100% { opacity: .42; transform: scale(.95); } 50% { opacity: .78; transform: scale(1.08); } } @keyframes qnxRobotFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes qnxCardFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes qnxOrbitA { from { transform: rotate(-18deg); } to { transform: rotate(342deg); } } @keyframes qnxOrbitB { from { transform: rotate(25deg); } to { transform: rotate(-335deg); } } @keyframes qnxParticle { 0%,100% { transform: translate(0,0) scale(1); opacity: .30; } 50% { transform: translate(12px,-20px) scale(1.6); opacity: 1; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1050px) { .qnx-final-hero { min-height: auto; padding: 65px 0 30px; } .qnx-hero-container { grid-template-columns: 1fr; text-align: center; gap: 0; } .qnx-hero-left { max-width: 780px; margin: auto; padding: 10px 0 0; } .qnx-hero-description { margin-left: auto; margin-right: auto; } .qnx-hero-actions { justify-content: center; } .qnx-hero-features { justify-content: center; } .qnx-hero-ai { width: 100%; max-width: 720px; margin: auto; margin-top: 15px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 650px) { .qnx-final-hero { padding: 55px 0 30px; } .qnx-hero-container { width: calc(100% - 30px); } .qnx-hero-left h1 { font-size: 42px; line-height: 1.045; letter-spacing: -1.7px; } .qnx-hero-description { font-size: 14px; line-height: 1.72; margin: 21px 0 27px; } .qnx-hero-actions { width: 100%; gap: 10px; } .qnx-hero-primary, .qnx-hero-secondary { width: 100%; min-height: 51px; } .qnx-hero-features { flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 31px; } .qnx-feature { padding: 0 10px; } .qnx-feature:first-child { padding-left: 10px; } .qnx-feature-icon { width: 35px; height: 35px; } .qnx-hero-ai { height: 470px; transform: scale(.78); transform-origin: center top; margin-bottom: -70px; } .qnx-ai-q { width: 350px; height: 350px; } .qnx-q-hole { width: 195px; height: 195px; top: 77px; left: 77px; } .qnx-robot-wrap { width: 520px; } .qnx-ai-card { min-width: 165px; } .qnx-card-ai { left: -5px; top: 45px; } .qnx-card-auto { right: -25px; top: 155px; } .qnx-card-seo { left: -25px; bottom: 145px; } .qnx-card-growth { right: -20px; bottom: 45px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .qnx-hero-left h1 { font-size: 39px; } .qnx-hero-ai { transform: scale(.70); } } /* ========================================================================================= QNIX DIGITAL — SECTION 1 - HERO CSS -(CONTINUE) QNIX DIGITAL — HERO FINAL OVERRIDE HERE - PURPOSE: ONLY HERO BACKGROUND / GLOW / GRID VISUAL TUNING KEEP: ALL ORIGINAL HERO STRUCTURE, SIZING, ROBOT, Q, CARDS & ANIMATIONS UNCHANGED STATUS: APPROVED FINAL DESIGN — DO NOT MODIFY OTHER HERO ELEMENTS ============================================================================================= */ .qnx-final-hero { background: radial-gradient( circle at 78% 38%, rgba(8,168,207,.28) 0%, rgba(8,168,207,.10) 30%, transparent 55% ), radial-gradient( circle at 88% 78%, rgba(22,185,138,.22) 0%, rgba(22,185,138,.08) 32%, transparent 58% ), radial-gradient( circle at 12% 15%, rgba(7,88,216,.25) 0%, transparent 45% ), linear-gradient( 135deg, #b9d7f4 0%, #a9cef0 34%, #a8dce5 67%, #b4dfd1 100% ) !important; } /* Stronger branded blue glow */ .qnx-final-hero .qnx-glow-one { background: rgba(7,88,216,.20) !important; filter: blur(70px) !important; } .qnx-final-hero .qnx-glow-two { background: rgba(22,185,138,.18) !important; filter: blur(70px) !important; } /* Cyan atmosphere around AI visual */ .qnx-final-hero .qnx-glow-three { background: rgba(8,168,207,.15) !important; filter: blur(55px) !important; } /* Stronger premium grid */ .qnx-final-hero .qnx-hero-grid { background-image: linear-gradient( rgba(7,88,216,.045) 1px, transparent 1px ), linear-gradient( 90deg, rgba(7,88,216,.035) 1px, transparent 1px ) !important; opacity: .38 !important; } /* Premium section separation */ .qnx-final-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100px; background: linear-gradient( to bottom, transparent 0%, rgba(7,88,216,.08) 35%, rgba(7,88,216,.18) 72%, rgba(8,168,207,.18) 100% ) !important; pointer-events: none; z-index: 4; } /* ========================================================= QNIX DIGITAL — PREMIUM SERVICES DARK AI / TECHNOLOGY LAYER ========================================================= */ .qnx-services { position: relative; overflow: hidden; padding: 115px 0 95px; background: radial-gradient( circle at 12% 18%, rgba(8, 110, 210, .14), transparent 30% ), radial-gradient( circle at 88% 78%, rgba(20, 180, 135, .10), transparent 32% ), linear-gradient( 135deg, #123452 0%, #164564 50%, #12504f 100% ); } /* ========================================================= SECTION TRANSITION ========================================================= */ .qnx-services-transition { position: absolute; top: -70px; left: -5%; width: 110%; height: 140px; background: linear-gradient( 180deg, rgba(255,255,255,.92), rgba(255,255,255,0) ); border-radius: 50%; pointer-events: none; } /* ========================================================= BACKGROUND GLOWS ========================================================= */ .qnx-services-bg { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(85px); z-index: 0; } .qnx-services-bg-1 { width: 330px; height: 330px; left: -160px; top: 280px; background: rgba(8, 110, 210, .13); } .qnx-services-bg-2 { width: 360px; height: 360px; right: -170px; bottom: 100px; background: rgba(20, 180, 135, .11); } /* ========================================================= CONTAINER ========================================================= */ .qnx-services-container { position: relative; z-index: 3; width: min(1240px, calc(100% - 60px)); margin: 0 auto; } /* ========================================================= HEADING ========================================================= */ .qnx-services-heading { max-width: 760px; margin: 0 auto 60px; text-align: center; } .qnx-services-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px; border-radius: 50px; color: #6fd9c0; background: rgba(24, 180, 135, .08); border: 1px solid rgba(90, 210, 185, .16); font-size: 11px; font-weight: 800; letter-spacing: .8px; } .qnx-services-eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: #1bc18d; box-shadow: 0 0 12px rgba(27,193,141,.75); animation: qnxServicesPulse 2s ease-in-out infinite; } .qnx-services-heading h2 { margin: 20px 0 17px; color: #ffffff; font-size: clamp(40px, 4vw, 56px); line-height: 1.08; letter-spacing: -2.1px; font-weight: 800; } .qnx-services-heading h2 strong { display: inline-block; background: linear-gradient( 90deg, #3c9eff 0%, #28c2d2 48%, #31d29d 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .qnx-services-heading p { max-width: 700px; margin: 0 auto; color: rgba(222, 237, 247, .70); font-size: 15px; line-height: 1.8; } /* ========================================================= MAIN SERVICE LAYOUT ========================================================= */ .qnx-services-layout { display: grid; grid-template-columns: 360px 1fr; gap: 20px; align-items: stretch; } /* ========================================================= FEATURED SERVICE ========================================================= */ .qnx-service-featured { position: relative; min-height: 570px; padding: 32px; overflow: hidden; border-radius: 24px; color: #ffffff; background: radial-gradient( circle at 85% 15%, rgba(65,210,190,.30), transparent 28% ), radial-gradient( circle at 20% 85%, rgba(30,100,220,.30), transparent 35% ), linear-gradient( 145deg, #075fc4 0%, #087ebf 43%, #07977e 100% ); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 25px 65px rgba(0, 30, 65, .30); transition: transform .4s ease, box-shadow .4s ease; } .qnx-service-featured:hover { transform: translateY(-7px); box-shadow: 0 32px 75px rgba(0, 30, 65, .40); } /* ========================================================= FEATURED TOP ========================================================= */ .qnx-service-featured-top { display: flex; align-items: center; justify-content: space-between; } .qnx-service-label { font-size: 10px; font-weight: 800; letter-spacing: .8px; color: rgba(255,255,255,.78); } .qnx-service-number { font-size: 34px; line-height: 1; font-weight: 800; color: rgba(255,255,255,.18); } /* ========================================================= FEATURED ICON ========================================================= */ .qnx-service-featured-icon { width: 65px; height: 65px; display: grid; place-items: center; margin-top: 55px; margin-bottom: 25px; border-radius: 17px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.20); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 28px; box-shadow: 0 15px 30px rgba(0,40,90,.14); } .qnx-service-featured h3 { margin: 0 0 18px; font-size: 31px; line-height: 1.1; letter-spacing: -1px; font-weight: 800; } .qnx-service-featured p { margin: 0; color: rgba(255,255,255,.80); font-size: 13px; line-height: 1.8; } /* ========================================================= FEATURED TAGS ========================================================= */ .qnx-service-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 25px; } .qnx-service-tags span { padding: 7px 10px; border-radius: 50px; color: rgba(255,255,255,.86); background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12); font-size: 9px; } /* ========================================================= FEATURED LINK ========================================================= */ .qnx-service-link { position: absolute; left: 32px; bottom: 30px; display: inline-flex; align-items: center; gap: 9px; color: #ffffff; text-decoration: none; font-size: 12px; font-weight: 750; } .qnx-service-link span { font-size: 18px; transition: transform .3s ease; } .qnx-service-link:hover span { transform: translateX(5px); } /* ========================================================= FEATURED ORBIT ========================================================= */ .qnx-service-orbit { position: absolute; width: 280px; height: 280px; right: -130px; bottom: -130px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 0 0 35px rgba(255,255,255,.025), 0 0 0 70px rgba(255,255,255,.018); animation: qnxServiceOrbit 12s linear infinite; } /* ========================================================= SERVICE GRID ========================================================= */ .qnx-services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } /* ========================================================= SERVICE CARD — DARK GLASS ========================================================= */ .qnx-service-card { position: relative; min-height: 275px; padding: 27px; overflow: hidden; border-radius: 18px; background: linear-gradient( 145deg, rgba(255,255,255,.075), rgba(255,255,255,.035) ); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 15px 40px rgba(0,20,45,.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease; } .qnx-service-card::before { content: ""; position: absolute; width: 150px; height: 150px; right: -75px; top: -75px; border-radius: 50%; background: radial-gradient( circle, rgba(40,160,220,.16), transparent 70% ); transition: transform .5s ease; } .qnx-service-card:hover { transform: translateY(-7px); border-color: rgba(75,190,215,.25); background: linear-gradient( 145deg, rgba(255,255,255,.10), rgba(255,255,255,.045) ); box-shadow: 0 25px 55px rgba(0,25,55,.27); } .qnx-service-card:hover::before { transform: scale(1.7); } /* ========================================================= SERVICE INDEX ========================================================= */ .qnx-service-index { position: absolute; top: 20px; right: 22px; color: rgba(255,255,255,.12); font-size: 27px; font-weight: 800; } /* ========================================================= SERVICE ICON ========================================================= */ .qnx-service-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 13px; color: #ffffff; background: linear-gradient( 135deg, #0874d4, #18ad86 ); box-shadow: 0 9px 22px rgba(15,120,185,.20); font-size: 17px; transition: transform .35s ease, box-shadow .35s ease; } .qnx-service-card:hover .qnx-service-icon { transform: rotate(-5deg) scale(1.05); box-shadow: 0 12px 28px rgba(20,160,190,.30); } /* ========================================================= SERVICE CONTENT ========================================================= */ .qnx-service-card h3 { margin: 0 0 11px; color: #ffffff; font-size: 18px; font-weight: 760; } .qnx-service-card p { margin: 0; color: rgba(220,235,245,.66); font-size: 12px; line-height: 1.75; } /* ========================================================= SERVICE LINK ========================================================= */ .qnx-service-card a { position: absolute; left: 27px; bottom: 22px; display: inline-flex; align-items: center; gap: 7px; color: #5bc4e5; text-decoration: none; font-size: 10px; font-weight: 800; } .qnx-service-card a span { font-size: 15px; transition: transform .3s ease; } .qnx-service-card:hover a span { transform: translateX(4px); } /* ========================================================= BOTTOM SERVICE STRIP ========================================================= */ .qnx-services-bottom { display: flex; align-items: center; justify-content: center; margin-top: 25px; padding: 19px 20px; border-radius: 15px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 10px 30px rgba(0,20,45,.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .qnx-services-bottom > div { display: flex; align-items: center; gap: 8px; padding: 0 22px; color: rgba(220,235,245,.72); font-size: 10px; font-weight: 750; border-right: 1px solid rgba(255,255,255,.10); } .qnx-services-bottom > div:last-child { border-right: 0; } .qnx-services-check { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: #ffffff; background: #18ad83; box-shadow: 0 0 12px rgba(24,173,131,.25); font-size: 9px; } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes qnxServiceOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes qnxServicesPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .65; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1050px) { .qnx-services { padding: 95px 0 80px; } .qnx-services-layout { grid-template-columns: 1fr; } .qnx-service-featured { min-height: 440px; } .qnx-services-grid { grid-template-columns: repeat(2, 1fr); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 650px) { .qnx-services { padding: 75px 0 60px; } .qnx-services-container { width: calc(100% - 30px); } .qnx-services-heading { margin-bottom: 40px; } .qnx-services-heading h2 { font-size: 36px; letter-spacing: -1.2px; } .qnx-services-heading p { font-size: 14px; } .qnx-services-layout { gap: 14px; } .qnx-service-featured { min-height: 470px; padding: 27px; } .qnx-service-featured h3 { font-size: 29px; } .qnx-services-grid { grid-template-columns: 1fr; gap: 14px; } .qnx-service-card { min-height: 260px; } .qnx-services-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 18px; } .qnx-services-bottom > div { padding: 0; border-right: 0; } .qnx-services-bottom > div:last-child { grid-column: 1 / -1; justify-content: center; } } /* ========================================================= QNIX DIGITAL PREMIUM AI SOLUTIONS SECTION COMPLETE CSS ========================================================= */ .qnx-ai-solutions { position: relative; overflow: hidden; padding: 105px 0 85px; background: linear-gradient( 135deg, #092b49 0%, #0a304b 46%, #084b4b 100% ); color: #fff; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); isolation: isolate; } /* ========================================================= BACKGROUND GRID ========================================================= */ .qnx-ai-bg-grid { position: absolute; inset: 0; opacity: .13; background-image: linear-gradient( rgba(105,200,225,.08) 1px, transparent 1px ), linear-gradient( 90deg, rgba(105,200,225,.08) 1px, transparent 1px ); background-size: 54px 54px; mask-image: linear-gradient( to bottom, transparent, black 18%, black 82%, transparent ); -webkit-mask-image: linear-gradient( to bottom, transparent, black 18%, black 82%, transparent ); pointer-events: none; } /* ========================================================= AMBIENT BACKGROUND GLOW ========================================================= */ .qnx-ai-glow { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; z-index: -1; } .qnx-ai-glow-left { width: 440px; height: 440px; left: -230px; top: 180px; background: rgba(0,115,225,.13); } .qnx-ai-glow-right { width: 400px; height: 400px; right: -200px; bottom: 80px; background: rgba(20,190,150,.11); } /* ========================================================= MAIN CONTAINER ========================================================= */ .qnx-ai-container { position: relative; width: min(1440px, calc(100% - 70px)); margin: 0 auto; z-index: 2; } /* ========================================================= SECTION HEADING ========================================================= */ .qnx-ai-heading { max-width: 760px; margin: 0 auto 65px; text-align: center; } .qnx-ai-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px; border: 1px solid rgba(83,210,195,.17); border-radius: 50px; color: #65d3d0; background: rgba(20,170,160,.055); font-size: 10px; font-weight: 800; letter-spacing: .9px; } .qnx-ai-eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: #28c99c; box-shadow: 0 0 12px rgba(40,201,156,.75); animation: qnxAiBlink 2s ease-in-out infinite; } .qnx-ai-heading h2 { margin: 20px 0 16px; font-size: clamp(42px, 4.5vw, 62px); line-height: 1.04; letter-spacing: -2.5px; font-weight: 850; color: #fff; } .qnx-ai-heading h2 strong { display: block; background: linear-gradient( 90deg, #3da6ff, #2cc8d0, #3bd39d ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .qnx-ai-heading p { max-width: 690px; margin: 0 auto; color: rgba(220,237,246,.67); font-size: 14px; line-height: 1.8; } /* ========================================================= MAIN GLASS PANEL ========================================================= */ .qnx-ai-main { display: grid; grid-template-columns: 280px minmax(500px, 1fr) 400px; align-items: center; gap: 28px; min-height: 465px; padding: 28px 26px; border: 1px solid rgba(255,255,255,.085); border-radius: 28px; background: linear-gradient( 135deg, rgba(255,255,255,.055), rgba(255,255,255,.018) ); box-shadow: 0 35px 90px rgba(0,12,35,.24); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* ========================================================= LEFT CONTENT ========================================================= */ .qnx-ai-left { position: relative; z-index: 5; } .qnx-ai-label { margin-bottom: 17px; color: #61cad8; font-size: 9px; font-weight: 800; letter-spacing: .85px; } .qnx-ai-left h3 { margin: 0 0 18px; font-size: 30px; line-height: 1.13; letter-spacing: -1.2px; font-weight: 850; } .qnx-ai-left h3 span { display: block; color: #50d0aa; } .qnx-ai-left > p { margin: 0; color: rgba(218,235,244,.62); font-size: 12px; line-height: 1.85; } /* ========================================================= AI BUTTON ========================================================= */ .qnx-ai-button { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding: 13px 18px; border-radius: 50px; color: #fff; text-decoration: none; background: linear-gradient( 90deg, #087bd8, #10ae91 ); box-shadow: 0 12px 30px rgba(10,140,190,.18); font-size: 10px; font-weight: 800; transition: transform .3s ease, box-shadow .3s ease; } .qnx-ai-button:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(10,140,190,.30); } .qnx-ai-button span { font-size: 15px; } /* ========================================================= STATS ========================================================= */ .qnx-ai-stats { display: flex; gap: 22px; margin-top: 35px; } .qnx-ai-stats div { display: flex; flex-direction: column; gap: 4px; } .qnx-ai-stats strong { font-size: 17px; line-height: 1; font-weight: 850; } .qnx-ai-stats small { color: rgba(210,230,240,.45); font-size: 8px; letter-spacing: .3px; } /* ========================================================= CENTER AI VISUAL ========================================================= */ .qnx-ai-visual { position: relative; height: 430px; min-width: 500px; display: flex; align-items: center; justify-content: center; } /* ========================================================= AI IMAGE CONTAINER ========================================================= */ .qnx-ai-image-wrap { position: relative; width: 270px; height: 270px; display: flex; align-items: center; justify-content: center; z-index: 5; overflow: visible; } /* ========================================================= AI IMAGE ATMOSPHERIC GLOW ========================================================= */ .qnx-ai-image-glow { position: absolute; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient( circle, rgba(35,155,255,.34) 0%, rgba(25,205,180,.18) 35%, rgba(20,150,210,.08) 55%, transparent 72% ); filter: blur(22px); z-index: 0; animation: qnxAiGlow 4s ease-in-out infinite; } /* ========================================================= QNIX AI — PREMIUM INTELLIGENT BUSINESS SYSTEMS Compact cards / large AI visual / premium layout ========================================================= */ .qnx-ai-section { position: relative; width: 100%; padding: 70px 22px; background: transparent; overflow: hidden; } .qnx-ai-inner { position: relative; max-width: 1880px; min-height: 810px; margin: 0 auto; display: grid; grid-template-columns: minmax(350px, 0.95fr) minmax(560px, 1.35fr) minmax(390px, 0.95fr); grid-template-rows: 1fr auto; gap: 20px 35px; padding: 70px 48px 45px; border: 1px solid rgba(116, 215, 255, 0.18); border-radius: 34px; background: radial-gradient( circle at 54% 50%, rgba(0, 111, 255, 0.10), transparent 30% ), radial-gradient( circle at 85% 70%, rgba(0, 205, 170, 0.08), transparent 35% ), linear-gradient( 120deg, rgba(8, 31, 54, 0.96), rgba(7, 43, 61, 0.94) ); box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 30px 90px rgba(0,0,0,0.12); } /* ========================================================= LEFT CONTENT ========================================================= */ .qnx-ai-copy { position: relative; z-index: 5; align-self: center; max-width: 520px; } .qnx-ai-eyebrow { display: inline-block; margin-bottom: 24px; font-size: 14px; font-weight: 800; letter-spacing: 1.7px; color: #42d4df; } .qnx-ai-copy h2 { margin: 0 0 25px; font-size: clamp(48px, 4.2vw, 72px); line-height: 0.98; letter-spacing: -3px; font-weight: 800; color: #ffffff; } .qnx-ai-copy h2 span { display: block; background: linear-gradient( 90deg, #28a9ff, #38d5c0, #65d987 ); -webkit-background-clip: text; background-clip: text; color: transparent; } .qnx-ai-copy p { max-width: 490px; margin: 0 0 30px; font-size: 17px; line-height: 1.7; color: rgba(215, 232, 245, 0.70); } .qnx-ai-btn { display: inline-flex; align-items: center; gap: 18px; padding: 16px 25px; border-radius: 50px; text-decoration: none; font-size: 15px; font-weight: 800; color: #ffffff; background: linear-gradient( 110deg, #087fe9, #11b9a1 ); box-shadow: 0 12px 35px rgba(0, 157, 255, 0.20); transition: transform .3s ease, box-shadow .3s ease; } .qnx-ai-btn span { font-size: 20px; transition: transform .3s ease; } .qnx-ai-btn:hover { transform: translateY(-3px); box-shadow: 0 18px 45px rgba(0, 180, 220, 0.28); } .qnx-ai-btn:hover span { transform: translateX(4px); } /* ========================================================= STATS ========================================================= */ .qnx-ai-stats { display: flex; align-items: stretch; margin-top: 48px; } .qnx-stat { min-width: 115px; padding-right: 25px; margin-right: 25px; border-right: 1px solid rgba(170, 220, 240, 0.18); } .qnx-stat:last-child { border-right: 0; } .qnx-stat strong { display: block; font-size: 28px; line-height: 1; color: #ffffff; } .qnx-stat small { display: block; margin-top: 9px; font-size: 12px; color: rgba(200, 224, 238, 0.52); } /* ========================================================= CENTER AI VISUAL ========================================================= */ .qnx-ai-visual { position: relative; min-height: 650px; display: flex; align-items: center; justify-content: center; } .qnx-ai-image-wrap { position: relative; width: 430px; height: 430px; display: flex; align-items: center; justify-content: center; z-index: 4; } .qnx-ai-image { position: relative; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; filter: drop-shadow(0 0 25px rgba(0, 133, 255, 0.38)) drop-shadow(0 0 65px rgba(0, 225, 210, 0.16)); animation: qnxAiFloat 6s ease-in-out infinite; } .qnx-ai-image-glow { position: absolute; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient( circle, rgba(0, 145, 255, 0.22), rgba(0, 214, 190, 0.08) 42%, transparent 72% ); filter: blur(15px); z-index: -1; animation: qnxGlowPulse 4s ease-in-out infinite; } /* ========================================================= ORBITS ========================================================= */ .qnx-ai-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(40, 203, 255, 0.13); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; } .orbit-one { width: 520px; height: 520px; animation: qnxOrbit 18s linear infinite; } .orbit-two { width: 650px; height: 300px; transform: translate(-50%, -50%) rotate(25deg); border-color: rgba(0, 205, 180, 0.10); animation: qnxOrbitReverse 22s linear infinite; } /* ========================================================= SMALL COMPACT AI CARDS ========================================================= */ .qnx-ai-mini-card { position: absolute; width: 245px; min-height: 105px; padding: 17px 18px; display: flex; align-items: center; gap: 15px; border-radius: 20px; border: 1px solid rgba(150, 220, 245, 0.20); background: linear-gradient( 135deg, rgba(35, 76, 105, 0.70), rgba(12, 48, 70, 0.64) ); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 16px 35px rgba(0,0,0,0.12); z-index: 8; transition: transform .35s ease, border-color .35s ease; } .qnx-ai-mini-card:hover { transform: translateY(-5px); border-color: rgba(61, 221, 230, 0.42); } .qnx-mini-icon { flex: 0 0 48px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 14px; font-size: 22px; font-weight: 700; color: #ffffff; background: linear-gradient( 135deg, #087fff, #0cc69d ); box-shadow: 0 7px 20px rgba(0, 150, 255, 0.20); } .qnx-mini-number { display: block; margin-bottom: 4px; font-size: 10px; font-weight: 800; color: #42d7e7; } .qnx-ai-mini-card strong { display: block; font-size: 15px; line-height: 1.2; color: #ffffff; } .qnx-ai-mini-card small { display: block; margin-top: 5px; font-size: 11px; color: rgba(201, 224, 237, 0.56); } /* POSITIONS */ .card-understand { top: 10%; left: 1%; } .card-automate { top: 10%; right: 1%; } .card-intelligence { bottom: 11%; left: 1%; } .card-grow { bottom: 11%; right: 1%; } /* ========================================================= CONNECTING NODES ========================================================= */ .qnx-ai-node { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #22e4db; box-shadow: 0 0 12px #18e4dc, 0 0 28px rgba(18, 220, 220, 0.55); z-index: 7; animation: qnxNodePulse 2.5s ease-in-out infinite; } .node-top { top: 8%; left: 50%; } .node-left { top: 50%; left: 3%; } .node-right { top: 50%; right: 3%; } .node-bottom { bottom: 8%; left: 50%; } /* ========================================================= RIGHT SERVICES — SMALLER & CLEANER ========================================================= */ .qnx-ai-services { position: relative; z-index: 6; display: flex; flex-direction: column; justify-content: center; gap: 14px; } .qnx-service-card { position: relative; min-height: 108px; padding: 17px 18px; display: flex; align-items: center; gap: 16px; border-radius: 20px; border: 1px solid rgba(150, 220, 240, 0.16); background: linear-gradient( 135deg, rgba(33, 77, 99, 0.56), rgba(18, 63, 73, 0.46) ); backdrop-filter: blur(16px); transition: transform .3s ease, background .3s ease, border-color .3s ease; } .qnx-service-card:hover { transform: translateX(-5px); border-color: rgba(56, 220, 220, 0.35); background: linear-gradient( 135deg, rgba(37, 92, 117, 0.68), rgba(19, 76, 78, 0.58) ); } .qnx-service-icon { flex: 0 0 46px; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 13px; font-size: 20px; color: #ffffff; background: linear-gradient( 135deg, rgba(10, 148, 220, 0.85), rgba(0, 179, 151, 0.72) ); border: 1px solid rgba(255,255,255,0.08); } .qnx-service-content { min-width: 0; flex: 1; } .qnx-service-content strong { display: block; margin-bottom: 5px; font-size: 15px; line-height: 1.25; color: #ffffff; } .qnx-service-content p { margin: 0; font-size: 11.5px; line-height: 1.45; color: rgba(206, 226, 237, 0.58); } .qnx-service-arrow { font-size: 18px; color: #38d7d5; transition: transform .3s ease; } .qnx-service-card:hover .qnx-service-arrow { transform: translateX(4px); } /* ========================================================= BOTTOM PROCESS ========================================================= */ .qnx-ai-process { grid-column: 2; align-self: end; justify-self: center; display: flex; align-items: center; gap: 25px; padding: 13px 25px; border-radius: 50px; border: 1px solid rgba(120, 215, 235, 0.18); background: rgba(10, 48, 67, 0.48); backdrop-filter: blur(14px); color: rgba(235, 246, 250, 0.82); font-size: 14px; } .qnx-ai-process strong { white-space: nowrap; } .qnx-ai-process i { font-style: normal; font-size: 23px; color: rgba(170, 215, 230, 0.45); } .qnx-ai-process > .active { color: #19d6df; font-size: 13px; text-shadow: 0 0 15px #1ddde1; } .qnx-ai-process .active-text { color: #35d6a5; } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes qnxAiFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes qnxGlowPulse { 0%, 100% { opacity: .65; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.06); } } @keyframes qnxOrbit { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes qnxOrbitReverse { from { transform: translate(-50%, -50%) rotate(25deg); } to { transform: translate(-50%, -50%) rotate(-335deg); } } @keyframes qnxNodePulse { 0%, 100% { opacity: .45; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.35); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1250px) { .qnx-ai-inner { grid-template-columns: 0.85fr 1.25fr; grid-template-rows: auto auto auto; } .qnx-ai-copy { max-width: 470px; } .qnx-ai-services { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); } .qnx-ai-process { grid-column: 1 / -1; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 850px) { .qnx-ai-section { padding: 35px 12px; } .qnx-ai-inner { display: flex; flex-direction: column; min-height: auto; padding: 45px 22px 30px; border-radius: 25px; } .qnx-ai-copy { max-width: none; } .qnx-ai-copy h2 { font-size: 48px; letter-spacing: -2px; } .qnx-ai-copy p { font-size: 15px; } .qnx-ai-visual { min-height: 520px; margin-top: 10px; } .qnx-ai-image-wrap { width: 340px; height: 340px; } .qnx-ai-mini-card { width: 205px; min-height: 90px; padding: 13px; } .qnx-mini-icon { width: 40px; height: 40px; flex-basis: 40px; } .card-understand { top: 2%; left: 0; } .card-automate { top: 2%; right: 0; } .card-intelligence { bottom: 4%; left: 0; } .card-grow { bottom: 4%; right: 0; } .qnx-ai-services { display: flex; } .qnx-ai-process { width: 100%; overflow-x: auto; justify-content: flex-start; gap: 18px; } } @media (max-width: 560px) { .qnx-ai-copy h2 { font-size: 39px; } .qnx-ai-visual { min-height: 450px; } .qnx-ai-image-wrap { width: 270px; height: 270px; } .qnx-ai-orbit { display: none; } .qnx-ai-mini-card { width: 145px; min-height: 72px; gap: 9px; padding: 10px; border-radius: 14px; } .qnx-mini-icon { width: 34px; height: 34px; flex-basis: 34px; font-size: 16px; } .qnx-ai-mini-card strong { font-size: 12px; } .qnx-ai-mini-card small { font-size: 9px; } .qnx-ai-stats { margin-top: 32px; } .qnx-service-card { min-height: 94px; } .qnx-service-content strong { font-size: 14px; } .qnx-service-content p { font-size: 10.5px; } .qnx-ai-process { display: none; } } /* ========================================================= QNIX FINAL BRAND COLOUR SYSTEM — LIGHT INTERNATIONAL COLOUR ONLY / EXISTING LAYOUT PRESERVED ========================================================= */ :root{ --blue:#0758D8; --blue2:#0B78DB; --deep:#102A43; --green:#A8D92F; --lime:#B7E51C; --teal:#12AFC4; --ink:#102A43; --muted:#60758A; --line:#DCE8F2; --soft:#F3F8FF; --white:#FFFFFF; --mint:#EAF8F3; --shadow:0 14px 45px rgba(7,88,216,.09); } /* Keep the approved hero/header/menu unchanged; only strengthen the brand palette. */ .qnx-final-hero{ background: radial-gradient(circle at 78% 42%,rgba(7,88,216,.10),transparent 30%), radial-gradient(circle at 92% 72%,rgba(18,175,196,.08),transparent 28%), linear-gradient(135deg,#F3F8FF 0%,#FFFFFF 48%,#EAF8F3 100%) !important; } /* AI SOLUTIONS — replace heavy dark block with premium light brand panel */ .qnx-ai-solutions{ background: radial-gradient(circle at 12% 18%,rgba(7,88,216,.08),transparent 30%), radial-gradient(circle at 88% 78%,rgba(18,175,196,.08),transparent 32%), linear-gradient(135deg,#F1F7FF 0%,#FFFFFF 48%,#EAF8F3 100%) !important; color:var(--ink) !important; border-top:1px solid #DCE8F2 !important; border-bottom:1px solid #DCE8F2 !important; } .qnx-ai-solutions h2, .qnx-ai-solutions h3, .qnx-ai-solutions strong{color:#102A43 !important} .qnx-ai-solutions p{color:#60758A !important} .qnx-ai-bg-grid{opacity:.35 !important;background-image:linear-gradient(rgba(7,88,216,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(18,175,196,.035) 1px,transparent 1px) !important} .qnx-ai-card{background:rgba(255,255,255,.92) !important;border-color:#DCE8F2 !important;box-shadow:0 18px 42px rgba(7,88,216,.10) !important} .qnx-ai-card small,.qnx-ai-card span{color:#60758A} /* SERVICES — bright Qnix blue/cyan/lime instead of dark teal */ .qnx-services{ background: radial-gradient(circle at 12% 18%,rgba(7,88,216,.08),transparent 30%), radial-gradient(circle at 88% 78%,rgba(18,175,196,.08),transparent 32%), linear-gradient(135deg,#F3F8FF 0%,#FFFFFF 52%,#EAF8F3 100%) !important; color:var(--ink) !important; } .qnx-services-heading h2{color:#102A43 !important} .qnx-services-heading p{color:#60758A !important} .qnx-services-eyebrow{color:#0758D8 !important;background:#EEF5FF !important;border-color:#D7E6F8 !important} .qnx-services-featured, .qnx-service-featured{ background:linear-gradient(145deg,#0758D8 0%,#12AFC4 55%,#A8D92F 100%) !important; color:#fff !important; border-color:rgba(255,255,255,.35) !important; box-shadow:0 25px 65px rgba(7,88,216,.16) !important; } .qnx-service-card{ background:rgba(255,255,255,.94) !important; border-color:#DCE8F2 !important; box-shadow:0 15px 40px rgba(7,88,216,.08) !important; backdrop-filter:blur(12px); } .qnx-service-card:hover{background:#fff !important;border-color:#BFD8F0 !important} .qnx-service-card h3{color:#102A43 !important} .qnx-service-card p{color:#60758A !important} .qnx-service-card a{color:#0758D8 !important} .qnx-services-bottom{background:rgba(255,255,255,.78) !important;border-color:#DCE8F2 !important;box-shadow:0 10px 30px rgba(7,88,216,.06)} .qnx-services-bottom>div{color:#60758A !important;border-color:#DCE8F2 !important} .qnx-services-check{background:#A8D92F !important;color:#173500 !important;box-shadow:0 0 12px rgba(168,217,47,.25) !important} /* PROCESS / HOW WE WORK — clean light technology timeline */ .qnx-process{ background: radial-gradient(circle at 15% 20%,rgba(7,88,216,.08),transparent 30%), radial-gradient(circle at 85% 75%,rgba(18,175,196,.07),transparent 28%), linear-gradient(135deg,#F3F8FF 0%,#FFFFFF 52%,#EAF8F3 100%) !important; color:#102A43 !important; } .qnx-process::before{background-image:linear-gradient(rgba(7,88,216,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(18,175,196,.035) 1px,transparent 1px) !important} .qnx-process h2{color:#102A43 !important} .qnx-process-step h3{color:#102A43 !important} .qnx-process-step p{color:#60758A !important} .qnx-process-mini{color:#0758D8 !important} .qnx-process-node{background:#fff !important;border-color:#BFD8F0 !important;box-shadow:0 0 0 8px rgba(7,88,216,.035),0 0 30px rgba(7,88,216,.08) !important} .qnx-process-node::before{background:#0758D8 !important} .qnx-process-bottom{background:rgba(255,255,255,.82) !important;border-color:#DCE8F2 !important;box-shadow:0 10px 30px rgba(7,88,216,.06)} .qnx-process-live{color:#60758A !important} /* RESULTS & TRUST — white cards on a soft branded background */ .qnx-results{ background: radial-gradient(circle at 78% 20%,rgba(18,175,196,.09),transparent 30%), radial-gradient(circle at 18% 75%,rgba(7,88,216,.07),transparent 32%), linear-gradient(135deg,#F3F8FF 0%,#FFFFFF 52%,#EAF8F3 100%) !important; color:#102A43 !important; } .qnx-results::before{opacity:.45 !important;background-image:linear-gradient(rgba(7,88,216,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(18,175,196,.035) 1px,transparent 1px) !important} .qnx-results-top h2{color:#102A43 !important} .qnx-results-top>p{color:#60758A !important} .qnx-results-label{color:#0758D8 !important} .qnx-result-card{background:rgba(255,255,255,.94) !important;border:1px solid #DCE8F2 !important;box-shadow:0 15px 40px rgba(7,88,216,.07) !important} .qnx-result-card:hover{background:#fff !important} .qnx-result-featured{background:linear-gradient(145deg,#EEF5FF,#EAF8F3) !important} .qnx-result-value{color:#0758D8 !important} .qnx-result-value span{color:#12AFC4 !important} .qnx-result-card h3{color:#102A43 !important} .qnx-result-card p{color:#60758A !important} .qnx-results-trust{background:rgba(255,255,255,.80) !important;border-color:#DCE8F2 !important} .qnx-results-trust p,.qnx-results-trust span{color:#60758A !important} .qnx-results-bottom{background:rgba(255,255,255,.82) !important;border-color:#DCE8F2 !important} .qnx-results-bottom-copy h3{color:#102A43 !important} .qnx-results-bottom-copy small{color:#0758D8 !important} .qnx-results-button{background:linear-gradient(135deg,#0758D8,#12AFC4) !important;color:#fff !important;border-color:#BFD8F0 !important} /* CLIENT PERSPECTIVE — premium light testimonial section */ .qnx-client-voice{ background: radial-gradient(circle at 18% 30%,rgba(7,88,216,.08),transparent 30%), radial-gradient(circle at 82% 65%,rgba(18,175,196,.08),transparent 32%), linear-gradient(145deg,#F3F8FF 0%,#FFFFFF 52%,#EAF8F3 100%) !important; color:#102A43 !important; } .qnx-client-grid-bg{opacity:.35 !important;background-image:linear-gradient(rgba(7,88,216,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(18,175,196,.035) 1px,transparent 1px) !important} .qnx-client-heading-wrap h2{color:#102A43 !important} .qnx-client-heading-wrap p{color:#60758A !important} .qnx-client-eyebrow{color:#0758D8 !important} .qnx-client-main{background:rgba(255,255,255,.94) !important;border-color:#DCE8F2 !important;box-shadow:0 25px 70px rgba(7,88,216,.08) !important} .qnx-client-editorial{border-color:#DCE8F2 !important} .qnx-client-editorial blockquote{color:#102A43 !important} .qnx-client-index,.qnx-client-person span{color:#60758A !important} .qnx-client-person strong{color:#102A43 !important} .qnx-client-visual{background:linear-gradient(135deg,#F3F8FF,#EAF8F3) !important} .qnx-client-core{background:linear-gradient(145deg,#FFFFFF,#EEF6FF) !important;border-color:#BFD8F0 !important;box-shadow:0 30px 80px rgba(7,88,216,.12),inset 0 0 60px rgba(18,175,196,.05) !important} .qnx-client-core-top,.qnx-client-core-bottom{color:#60758A !important} .qnx-client-core-text strong{color:#0758D8 !important} .qnx-client-core-text small{color:#60758A !important} .qnx-client-trust{background:rgba(255,255,255,.82) !important;border-color:#DCE8F2 !important} .qnx-client-trust-item strong{color:#102A43 !important} .qnx-client-trust-item span{color:#60758A !important} .qnx-client-footer{color:#60758A !important} /* FINAL CTA — light premium conversion panel, not dark */ .qnx-final-cta{ background: radial-gradient(circle at 72% 35%,rgba(18,175,196,.12),transparent 28%), radial-gradient(circle at 20% 70%,rgba(7,88,216,.10),transparent 30%), linear-gradient(135deg,#F0F7FF 0%,#FFFFFF 50%,#EAF8F3 100%) !important; color:#102A43 !important; } .qnx-final-cta-noise{opacity:.30 !important;background-image:linear-gradient(rgba(7,88,216,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(18,175,196,.035) 1px,transparent 1px) !important} .qnx-final-label{color:#0758D8 !important} .qnx-final-label span{background:#A8D92F !important;box-shadow:0 0 18px rgba(168,217,47,.45) !important} .qnx-final-heading h2{color:#102A43 !important} .qnx-final-heading p{color:#60758A !important} .qnx-final-button{background:linear-gradient(135deg,#0758D8,#12AFC4) !important;color:#fff !important;border-color:#BFD8F0 !important;box-shadow:0 15px 50px rgba(7,88,216,.16) !important} .qnx-final-note{color:#60758A !important} .qnx-final-services{border-color:#DCE8F2 !important;color:#60758A !important} .qnx-final-services b{color:#12AFC4 !important} .qnx-final-bottom{color:#60758A !important} /* Do not alter responsive sizing/layout. */ /* ========================================================= QNIX FINAL APPROVED BRAND ZONING Balanced light + medium-deep brand colour system. Layout, sizing, menu, logo and responsive rules untouched. ========================================================= */ /* Hero — clean ice-blue brand start */ .hero{ background: radial-gradient(circle at 78% 35%,rgba(18,175,196,.10),transparent 26%), radial-gradient(circle at 18% 70%,rgba(7,88,216,.08),transparent 30%), linear-gradient(135deg,#F2F8FF 0%,#FFFFFF 55%,#EAF8F3 100%) !important; } /* What We Do — soft mint zone */ .qx-solutions{ background: radial-gradient(circle at 12% 40%,rgba(168,217,47,.08),transparent 25%), linear-gradient(180deg,#F0FAF5 0%,#FFFFFF 100%) !important; } /* Digital Solutions — medium/deeper brand blue for visual separation */ .qx-solutions + .qx-stats, .qx-stats{ background:linear-gradient(105deg,#0758D8 0%,#0B78DB 48%,#12AFC4 100%) !important; } /* Selected Work — clean white / ice-blue */ .qx-cases{ background: radial-gradient(circle at 90% 20%,rgba(18,175,196,.07),transparent 25%), #F7FBFF !important; } /* More Than Digital / How We Work / Client Perspective */ .qx-three{ background: radial-gradient(circle at 8% 25%,rgba(7,88,216,.06),transparent 28%), radial-gradient(circle at 92% 75%,rgba(168,217,47,.06),transparent 28%), #F2F8FF !important; } .three-grid>article{ background:rgba(255,255,255,.90) !important; border-color:#DCE8F2 !important; } .testimonial-panel{ background:linear-gradient(135deg,#EAF8F3 0%,#F4FBFF 100%) !important; } /* Digital Work / Blog — return to white for breathing space */ .qx-blog{ background:#FFFFFF !important; } /* Featured AI/business block — controlled medium-deep brand area */ .qnx-intelligent, .intelligent-business, .business-smart-section{ background:linear-gradient(135deg,#0B469B 0%,#087F94 100%) !important; } /* Any existing dark AI panel: keep it branded, but not black/navy */ .qx-ai-section, .qx-ai-panel, .ai-solutions-panel{ background:linear-gradient(135deg,#0B469B 0%,#087F94 100%) !important; } /* Results & Trust — soft blue zone */ .qx-results, .results-trust, .qx-results-trust{ background: radial-gradient(circle at 80% 30%,rgba(18,175,196,.09),transparent 25%), linear-gradient(180deg,#EDF5FF 0%,#F8FBFF 100%) !important; } /* Results cards stay white */ .qx-results .card, .results-trust .card, .qx-results-trust .card{ background:rgba(255,255,255,.92) !important; border-color:#DCE8F2 !important; } /* Final CTA — deeper than body, but still premium and not dark */ .qx-final-cta{ background: radial-gradient(circle at 82% 28%,rgba(168,217,47,.15),transparent 24%), radial-gradient(circle at 20% 75%,rgba(18,175,196,.14),transparent 28%), linear-gradient(110deg,#EAF3FF 0%,#F7FBFF 46%,#EAF8F3 100%) !important; } .qx-final-button{ background:linear-gradient(135deg,#0758D8 0%,#087F94 100%) !important; } /* Subtle section transition line — brand colour, never dark */ .hero, .qx-solutions, .qx-cases, .qx-three, .qx-blog, .qx-final-cta{ position:relative; } .hero::after, .qx-solutions::after, .qx-cases::after, .qx-three::after, .qx-blog::after, .qx-final-cta::after{ opacity:.55; } /* Preserve mobile behaviour; only backgrounds change. */ @media(max-width:800px){ .hero{background:linear-gradient(145deg,#F2F8FF,#FFFFFF 55%,#EAF8F3) !important;} .qx-solutions{background:linear-gradient(180deg,#F0FAF5,#FFFFFF) !important;} .qx-stats{background:linear-gradient(105deg,#0758D8,#12AFC4) !important;} .qx-cases{background:#F7FBFF !important;} .qx-three{background:#F2F8FF !important;} .qx-blog{background:#FFFFFF !important;} .qx-final-cta{background:linear-gradient(135deg,#EAF3FF,#FFFFFF 52%,#EAF8F3) !important;} } /* ========================================================= QNIX FINAL SECTION DEPTH + INTELLIGENT SYSTEMS FIX Layout / typography / spacing untouched ========================================================= */ @media (min-width: 801px){ /* HERO */ .hero{ background: radial-gradient(circle at 82% 35%, rgba(7,88,216,.10), transparent 32%), linear-gradient(180deg,#eef6ff 0%,#e8f2ff 100%) !important; } /* BUILT FOR AMBITIOUS BUSINESSES */ .qx-solutions{ background: radial-gradient(circle at 15% 50%,rgba(16,164,180,.07),transparent 30%), linear-gradient(180deg,#e8f6f1 0%,#e1f2ed 100%) !important; } /* INTELLIGENT BUSINESS SYSTEMS Remove dark look completely */ .qx-solutions.dark, .intelligent-business-systems, .business-systems, .qx-intelligent, .qx-solutions.ai-section{ background: radial-gradient(circle at 82% 45%,rgba(16,164,180,.13),transparent 34%), radial-gradient(circle at 15% 60%,rgba(123,197,31,.08),transparent 28%), linear-gradient(135deg,#dcecff 0%,#e1f5f2 55%,#e7f5df 100%) !important; color:var(--ink) !important; } /* If Intelligent Business Systems uses the existing qx-solutions section directly */ section.qx-solutions{ color:var(--ink); } section.qx-solutions .solution-card, section.qx-solutions .system-card, section.qx-solutions .business-card{ background:rgba(255,255,255,.82) !important; border-color:rgba(7,88,216,.12) !important; box-shadow:0 12px 32px rgba(7,88,216,.08) !important; } /* SELECTED WORK */ .qx-cases{ background: radial-gradient(circle at 85% 20%,rgba(7,88,216,.07),transparent 30%), linear-gradient(180deg,#edf5ff 0%,#e5f0ff 100%) !important; } /* WHY QNIX / HOW WE WORK / CLIENT */ .qx-three{ background: radial-gradient(circle at 12% 50%,rgba(123,197,31,.06),transparent 28%), linear-gradient(180deg,#e9f4ff 0%,#e2f0f8 100%) !important; } .three-grid{ border-color:rgba(7,88,216,.10) !important; } .three-grid>article{ background:rgba(255,255,255,.78) !important; } /* BLOG */ .qx-blog{ background: radial-gradient(circle at 80% 30%,rgba(16,164,180,.06),transparent 28%), linear-gradient(180deg,#f0f6ff 0%,#e8f2ff 100%) !important; } /* CTA */ .qx-cta{ background: radial-gradient(circle at 85% 40%,rgba(123,197,31,.15),transparent 30%), linear-gradient(110deg,#dcecff 0%,#dff3f5 55%,#e7f5df 100%) !important; color:var(--ink) !important; } .qx-cta .cta-inner h2, .qx-cta .cta-inner p{ color:var(--ink) !important; } .qx-cta .cta-inner small{ color:var(--blue) !important; } .qx-cta .cta-talk{ background:var(--blue) !important; border-color:var(--blue) !important; color:#fff !important; } } /* ========================================================= MOBILE — SAME COLOUR ZONING, NO DARK SECTIONS ========================================================= */ @media (max-width:800px){ .hero{ background:linear-gradient(180deg,#eef6ff,#e8f2ff) !important; } .qx-solutions{ background:linear-gradient(180deg,#e8f6f1,#e1f2ed) !important; } .qx-cases{ background:linear-gradient(180deg,#edf5ff,#e5f0ff) !important; } .qx-three{ background:linear-gradient(180deg,#e9f4ff,#e2f0f8) !important; } .qx-blog{ background:linear-gradient(180deg,#f0f6ff,#e8f2ff) !important; } .qx-cta{ background:linear-gradient(110deg,#dcecff,#dff3f5,#e7f5df) !important; color:var(--ink) !important; } /* Remove dark Intelligent Systems background */ .qx-solutions.dark, .intelligent-business-systems, .business-systems, .qx-intelligent, .qx-solutions.ai-section{ background:linear-gradient( 135deg, #dcecff 0%, #e1f5f2 55%, #e7f5df 100% ) !important; color:var(--ink) !important; } } /* ========================================================= QNIX FINAL SECTION COLOUR FIX ACTUAL HOMEPAGE CLASSES ========================================================= */ /* 1. INTELLIGENT BUSINESS SYSTEMS Dark background completely removed */ .qnx-ai-section{ background:#e5f1f6 !important; } .qnx-ai-inner{ background: radial-gradient( circle at 52% 45%, rgba(7,88,216,.12), transparent 32% ), radial-gradient( circle at 85% 70%, rgba(123,197,31,.10), transparent 35% ), linear-gradient( 135deg, #dcecf8 0%, #e1f3f1 52%, #e6f4df 100% ) !important; border-color:rgba(7,88,216,.12) !important; box-shadow:0 25px 70px rgba(7,88,216,.08) !important; } /* Intelligent Business Systems text */ .qnx-ai-copy h2{ color:#0d2945 !important; } .qnx-ai-copy p{ color:#49657b !important; } /* AI cards */ .qnx-ai-card{ background:rgba(255,255,255,.88) !important; border-color:rgba(7,88,216,.12) !important; box-shadow:0 12px 35px rgba(7,88,216,.08) !important; } .qnx-card-info strong{ color:#123452 !important; } .qnx-card-info small{ color:#63798c !important; } /* 2. WHY QNIX Make the light background visibly deeper */ .qnx-why{ background: radial-gradient( circle at 50% 48%, rgba(7,88,216,.08), transparent 32% ), radial-gradient( circle at 8% 80%, rgba(123,197,31,.07), transparent 28% ), linear-gradient( 180deg, #eaf3fb 0%, #e3f0f7 55%, #edf6f1 100% ) !important; } /* 3. SELECTED WORK Slightly deeper so it clearly separates from other sections */ .qnx-selected-work{ background: radial-gradient( circle at 85% 25%, rgba(7,88,216,.07), transparent 30% ), linear-gradient( 180deg, #e5f0f5 0%, #dfecef 100% ) !important; } /* 4. Keep cards clean against the deeper background */ .qnx-why-feature, .qnx-selected-work .qnx-work-row{ background:rgba(255,255,255,.72) !important; border-color:rgba(7,88,216,.10) !important; } /* ========================================================= MOBILE ========================================================= */ @media(max-width:800px){ .qnx-ai-section{ background:#e5f1f6 !important; } .qnx-ai-inner{ background: linear-gradient( 135deg, #dcecf8 0%, #e1f3f1 52%, #e6f4df 100% ) !important; } .qnx-why{ background: linear-gradient( 180deg, #eaf3fb 0%, #e3f0f7 55%, #edf6f1 100% ) !important; } .qnx-selected-work{ background: linear-gradient( 180deg, #e5f0f5 0%, #dfecef 100% ) !important; } } /* FINAL HEADER HEIGHT — KEEP APPROVED SIZE */ @media (min-width: 801px) { .nav-shell { height: 88px !important; } .nav-wrap { height: 88px !important; align-items: center !important; } .brand { display: flex !important; align-items: center !important; flex-shrink: 0 !important; margin-right: 35px !important; } .brand img { width: 275px !important; height: auto !important; max-width: none !important; display: block !important; } .nav-drop { height: 88px !important; } .mega-menu, .simple-dropdown { top: 88px !important; } } /* MOBILE — DON'T CHANGE */ @media (max-width: 800px) { .nav-shell { height: 62px !important; } .nav-wrap { height: 62px !important; } .brand img { width: 150px !important; max-width: 100% !important; } } /* ========================================================= QNIX — ACTUAL HOMEPAGE BACKGROUND OVERRIDE FINAL BRAND DEPTH ========================================================= */ /* WHY QNIX */ section.qnx-why{ background: radial-gradient( circle at 50% 45%, rgba(7,88,216,.08), transparent 32% ), linear-gradient( 180deg, #e4f0fb 0%, #dcebf5 55%, #e5f1eb 100% ) !important; } /* INTELLIGENT BUSINESS SYSTEMS */ section.qnx-ai-section{ background:#dcebf3 !important; } section.qnx-ai-section .qnx-ai-inner{ background: radial-gradient( circle at 50% 40%, rgba(7,88,216,.13), transparent 32% ), radial-gradient( circle at 82% 70%, rgba(123,197,31,.10), transparent 35% ), linear-gradient( 135deg, #d3e7f8 0%, #d8eeee 52%, #e0efd3 100% ) !important; color:#0d2945 !important; } /* SELECTED WORK */ section.qnx-selected-work{ background: radial-gradient( circle at 85% 25%, rgba(7,88,216,.08), transparent 30% ), linear-gradient( 180deg, #dceaf4 0%, #d4e5ed 100% ) !important; } /* SERVICES — remove the dark background */ section.qnx-services{ background: radial-gradient( circle at 12% 18%, rgba(7,88,216,.13), transparent 30% ), radial-gradient( circle at 88% 78%, rgba(123,197,31,.10), transparent 32% ), linear-gradient( 135deg, #d8e9f8 0%, #d8eeee 52%, #dfefd2 100% ) !important; color:#123452 !important; } /* SERVICES TEXT */ section.qnx-services .qnx-services-heading h2, section.qnx-services .qnx-services-heading p, section.qnx-services .qnx-service-card h3, section.qnx-services .qnx-service-card p{ color:#123452 !important; } /* MOBILE */ @media(max-width:850px){ section.qnx-why{ background: linear-gradient( 180deg, #e4f0fb, #dcebf5, #e5f1eb ) !important; } section.qnx-ai-section{ background:#dcebf3 !important; } section.qnx-ai-section .qnx-ai-inner{ background: linear-gradient( 135deg, #d3e7f8, #d8eeee 52%, #e0efd3 ) !important; } section.qnx-selected-work{ background: linear-gradient( 180deg, #dceaf4, #d4e5ed ) !important; } section.qnx-services{ background: linear-gradient( 135deg, #d8e9f8, #d8eeee 52%, #dfefd2 ) !important; } } /* ========================================================= QNIX SERVICES MEGA MENU — ACTUAL MENU FIX ONLY SERVICES MENU ========================================================= */ @media (min-width: 801px){ /* Services menu is the nav-drop immediately after Corporate Info */ .main-nav > .nav-drop:nth-of-type(2) > .mega-menu{ width: min(1150px, calc(100vw - 32px)) !important; min-height: 400px !important; padding: 18px 18px 0 !important; grid-template-columns: repeat(5, 1fr) 1.08fr !important; } .main-nav > .nav-drop:nth-of-type(2) > .mega-menu .mega-col{ padding: 12px 14px 20px !important; gap: 9px !important; } .main-nav > .nav-drop:nth-of-type(2) > .mega-menu .mega-icon{ width: 34px !important; height: 34px !important; font-size: 16px !important; margin-bottom: 4px !important; } .main-nav > .nav-drop:nth-of-type(2) > .mega-menu .mega-col h4{ font-size: 10px !important; margin-bottom: 7px !important; } .main-nav > .nav-drop:nth-of-type(2) > .mega-menu .mega-col a{ font-size: 10px !important; line-height: 1.45 !important; } .main-nav > .nav-drop:nth-of-type(2) > .mega-menu .mega-more{ font-size: 9px !important; } .main-nav > .nav-drop:nth-of-type(2) > .mega-menu .mega-promo{ min-height: 260px !important; margin: 0 0 0 10px !important; padding: 15px !important; } .main-nav > .nav-drop:nth-of-type(2) > .mega-menu .mega-promo strong{ font-size: 17px !important; } .main-nav > .nav-drop:nth-of-type(2) > .mega-menu .mega-promo small{ font-size: 9px !important; } .main-nav > .nav-drop:nth-of-type(2) > .mega-menu .mega-strip{ min-height: 46px !important; font-size: 9px !important; } } /* ========================================================= QNIX DIGITAL — SECTION 1-1 - TRUST SCROLL BAR CSS ========================================================= */ .qnx-trust-bar { position: relative; width: 100%; min-height: 112px; display: flex; align-items: center; gap: 28px; padding: 18px 0 18px 5%; background: linear-gradient( 90deg, #f4f8ff 0%, #ffffff 22%, #ffffff 78%, #f4f8ff 100% ); border-top: 1px solid rgba(7, 88, 216, .08); border-bottom: 1px solid rgba(7, 88, 216, .08); overflow: hidden; } /* ========================================= TRUST LABEL ========================================= */ .qnx-trust-label { position: relative; z-index: 5; flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 13px 30px 13px 0; font-size: 11px; font-weight: 800; letter-spacing: 1.8px; color: #062d7a; white-space: nowrap; } /* PREMIUM GREEN SIGNAL */ .qnx-trust-dot { position: relative; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #7bc51f; box-shadow: 0 0 0 5px rgba(123,197,31,.10), 0 0 14px rgba(123,197,31,.28); } .qnx-trust-dot::after { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(123,197,31,.18); border-radius: 50%; animation: qnxTrustPulse 2.2s ease-in-out infinite; } @keyframes qnxTrustPulse { 0%,100% { transform: scale(.85); opacity: .35; } 50% { transform: scale(1.15); opacity: 1; } } /* ========================================= MOVING AREA ========================================= */ .qnx-trust-track-wrap { position: relative; flex: 1; min-width: 0; overflow: hidden; } /* PREMIUM FADE */ .qnx-trust-track-wrap::before, .qnx-trust-track-wrap::after { content: ""; position: absolute; top: 0; width: 90px; height: 100%; z-index: 4; pointer-events: none; } .qnx-trust-track-wrap::before { left: 0; background: linear-gradient( 90deg, #ffffff 0%, rgba(255,255,255,.92) 28%, rgba(255,255,255,0) 100% ); } .qnx-trust-track-wrap::after { right: 0; background: linear-gradient( 270deg, #ffffff 0%, rgba(255,255,255,.92) 28%, rgba(255,255,255,0) 100% ); } /* ========================================= CONTINUOUS TRACK ========================================= */ .qnx-trust-track { display: flex; align-items: center; width: max-content; gap: 48px; animation: qnxTrustMove 32s linear infinite; will-change: transform; } /* ========================================= IMAGE BOX ========================================= */ .qnx-trust-item { position: relative; width: 170px; height: 68px; flex: 0 0 170px; display: flex; align-items: center; justify-content: center; padding: 8px 15px; background: #ffffff; border: 1px solid rgba(7,88,216,.07); border-radius: 12px; box-shadow: 0 8px 24px rgba(17,55,110,.06); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } /* SMALL BLUE DETAIL */ .qnx-trust-item::before { content: ""; position: absolute; left: 12px; top: 12px; width: 3px; height: 18px; border-radius: 5px; background: linear-gradient( 180deg, #0758d8, #10a4b4 ); opacity: .65; } /* IMAGE — ORIGINAL COLOR ALWAYS */ .qnx-trust-item img { display: block; width: auto; height: auto; max-width: 145px; max-height: 50px; object-fit: contain; opacity: 1; filter: none; transition: transform .35s ease, opacity .35s ease; } /* HOVER */ .qnx-trust-item:hover { transform: translateY(-3px); border-color: rgba(7,88,216,.16); box-shadow: 0 14px 32px rgba(7,88,216,.10); } .qnx-trust-item:hover img { transform: scale(1.05); opacity: 1; } /* ========================================= CONTINUOUS LEFT SCROLL ========================================= */ @keyframes qnxTrustMove { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ========================================= TABLET ========================================= */ @media (max-width: 900px) { .qnx-trust-bar { min-height: 100px; padding-left: 25px; gap: 18px; } .qnx-trust-label { padding-right: 18px; font-size: 10px; } .qnx-trust-track { gap: 32px; animation-duration: 27s; } .qnx-trust-item { width: 145px; height: 60px; flex-basis: 145px; } .qnx-trust-item img { max-width: 125px; max-height: 44px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 600px) { .qnx-trust-bar { min-height: 82px; padding: 12px 0 12px 18px; gap: 12px; } .qnx-trust-label { padding-right: 10px; font-size: 8px; letter-spacing: 1.1px; } .qnx-trust-dot { width: 6px; height: 6px; flex-basis: 6px; } .qnx-trust-track { gap: 22px; animation-duration: 23s; } .qnx-trust-item { width: 125px; height: 52px; flex-basis: 125px; border-radius: 9px; padding: 6px 10px; } .qnx-trust-item img { max-width: 108px; max-height: 39px; } .qnx-trust-item::before { left: 8px; top: 9px; height: 14px; } } /* ACCESSIBILITY */ @media (prefers-reduced-motion: reduce) { .qnx-trust-track { animation: none; } .qnx-trust-dot::after { animation: none; } } /* ========================================================= QNIX DIGITAL — SECTION 2 - WHY QNIX DIGITAL CSS ========================================================= */ .qnx-s2-why{ position:relative; width:100%; overflow:hidden; background:#ffffff; color:#0d1730; padding:86px 28px 70px; isolation:isolate; } .qnx-s2-wrap{ width:min(1380px,100%); margin:0 auto; position:relative; z-index:2; } /* ========================================================= HEADING ========================================================= */ .qnx-s2-heading{ max-width:900px; margin:0 auto 52px; text-align:center; } .qnx-s2-eyebrow{ display:inline-flex; align-items:center; gap:10px; color:#0758d8; font-size:11px; font-weight:800; letter-spacing:2.4px; text-transform:uppercase; } .qnx-s2-eyebrow-line{ width:28px; height:2px; display:block; background:linear-gradient( 90deg, #0758d8, #08a8cf ); border-radius:20px; } .qnx-s2-heading h2{ margin:14px 0 14px; font-size:clamp(40px,4.7vw,66px); line-height:1.02; letter-spacing:-2.8px; font-weight:800; color:#0d1730; } .qnx-s2-heading h2 span{ display:block; background:linear-gradient( 90deg, #0758d8 0%, #08a8cf 52%, #16b98a 100% ); -webkit-background-clip:text; background-clip:text; color:transparent; } .qnx-s2-heading p{ max-width:700px; margin:0 auto; color:#5d6b84; font-size:15px; line-height:1.75; } /* ========================================================= MAIN GRID ========================================================= */ .qnx-s2-main{ display:grid; grid-template-columns:minmax(420px,0.94fr) minmax(520px,1.06fr); align-items:center; gap:78px; } /* ========================================================= IMAGE AREA ========================================================= */ .qnx-s2-visual{ position:relative; min-width:0; } .qnx-s2-image-frame{ position:relative; width:100%; height:540px; overflow:visible; border-radius:30px; } .qnx-s2-image-frame::before{ content:""; position:absolute; inset:-1px; border-radius:31px; background:linear-gradient( 135deg, rgba(7,88,216,.28), rgba(8,168,207,.12) 45%, rgba(22,185,138,.25) ); z-index:-1; } .qnx-s2-image-frame::after{ content:""; position:absolute; width:190px; height:190px; right:-34px; bottom:-34px; border-radius:50%; background:radial-gradient( circle, rgba(121,201,28,.20), rgba(121,201,28,0) 70% ); pointer-events:none; } .qnx-s2-image-frame img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; border-radius:30px; box-shadow: 0 28px 70px rgba(17,55,110,.14), 0 5px 18px rgba(17,55,110,.06); filter:saturate(.96) contrast(1.02); } .qnx-s2-image-overlay{ position:absolute; inset:0; border-radius:30px; background: linear-gradient( 180deg, rgba(7,88,216,0) 48%, rgba(7,45,122,.14) 100% ); pointer-events:none; } .qnx-s2-image-glow{ position:absolute; width:260px; height:260px; left:-80px; top:-75px; border-radius:50%; background:radial-gradient( circle, rgba(8,168,207,.12), transparent 70% ); filter:blur(8px); pointer-events:none; } /* ========================================================= IMAGE BADGE ========================================================= */ .qnx-s2-image-badge{ position:absolute; top:24px; left:24px; display:flex; align-items:center; gap:9px; padding:11px 15px; border:1px solid rgba(255,255,255,.50); border-radius:100px; background:rgba(255,255,255,.90); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); color:#0d1730; font-size:9px; font-weight:800; letter-spacing:1.4px; box-shadow:0 10px 28px rgba(17,55,110,.10); } .qnx-s2-badge-dot{ width:7px; height:7px; border-radius:50%; background:#16b98a; box-shadow:0 0 0 5px rgba(22,185,138,.12); animation:qnxS2Pulse 2.2s ease-in-out infinite; } /* ========================================================= FLOATING CARD ========================================================= */ .qnx-s2-experience-card{ position:absolute; right:-34px; bottom:32px; min-width:270px; display:flex; align-items:center; gap:15px; padding:17px 20px; border:1px solid rgba(227,234,244,.95); border-radius:18px; background:rgba(255,255,255,.96); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 18px 45px rgba(17,55,110,.13); } .qnx-s2-experience-card > strong{ display:flex; align-items:center; justify-content:center; width:42px; height:42px; flex:0 0 42px; border-radius:13px; background:linear-gradient( 135deg, #0758d8, #08a8cf ); color:#ffffff; font-size:15px; font-weight:800; } .qnx-s2-experience-card div{ display:flex; flex-direction:column; gap:3px; } .qnx-s2-experience-card b{ color:#0d1730; font-size:12px; font-weight:800; } .qnx-s2-experience-card span{ color:#5d6b84; font-size:9px; line-height:1.4; } /* ========================================================= RIGHT FEATURES ========================================================= */ .qnx-s2-content{ display:flex; flex-direction:column; gap:13px; } .qnx-s2-feature{ position:relative; display:grid; grid-template-columns:35px 48px minmax(0,1fr); align-items:start; gap:16px; padding:20px 21px; border:1px solid #e3eaf4; border-radius:20px; background:#ffffff; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease; } .qnx-s2-feature::before{ content:""; position:absolute; left:0; top:20px; bottom:20px; width:3px; border-radius:0 5px 5px 0; background:linear-gradient( 180deg, #0758d8, #08a8cf ); opacity:0; transition:opacity .3s ease; } .qnx-s2-feature:hover{ transform:translateX(5px); border-color:rgba(7,88,216,.18); box-shadow:0 18px 42px rgba(17,55,110,.09); background:linear-gradient( 135deg, #ffffff, #fbfdff ); } .qnx-s2-feature:hover::before{ opacity:1; } .qnx-s2-feature-number{ padding-top:5px; color:#b7c4d7; font-size:10px; font-weight:800; letter-spacing:1px; } .qnx-s2-feature-icon{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:15px; background:rgba(7,88,216,.08); color:#0758d8; font-size:20px; font-weight:700; transition: transform .3s ease, background .3s ease; } .qnx-s2-feature:hover .qnx-s2-feature-icon{ transform:translateY(-2px) rotate(4deg); background:rgba(7,88,216,.12); } .qnx-s2-icon-green{ color:#16b98a; background:rgba(22,185,138,.09); } .qnx-s2-icon-cyan{ color:#08a8cf; background:rgba(8,168,207,.09); } .qnx-s2-icon-lime{ color:#6fae17; background:rgba(121,201,28,.12); } .qnx-s2-feature-copy{ min-width:0; } .qnx-s2-feature-label{ display:block; margin-bottom:5px; color:#0758d8; font-size:9px; font-weight:800; letter-spacing:1.5px; } .qnx-s2-feature:nth-child(2) .qnx-s2-feature-label{ color:#16b98a; } .qnx-s2-feature:nth-child(3) .qnx-s2-feature-label{ color:#08a8cf; } .qnx-s2-feature:nth-child(4) .qnx-s2-feature-label{ color:#6fae17; } .qnx-s2-feature-copy h3{ margin:0 0 7px; color:#0d1730; font-size:18px; line-height:1.2; letter-spacing:-.45px; font-weight:800; } .qnx-s2-feature-copy h3 span{ color:#0758d8; } .qnx-s2-feature:nth-child(2) h3 span{ color:#16b98a; } .qnx-s2-feature:nth-child(3) h3 span{ color:#08a8cf; } .qnx-s2-feature:nth-child(4) h3 span{ color:#6fae17; } .qnx-s2-feature-copy p{ margin:0; max-width:570px; color:#5d6b84; font-size:11px; line-height:1.7; } /* ========================================================= BOTTOM TRUST BAR ========================================================= */ .qnx-s2-trust{ margin-top:44px; min-height:76px; display:flex; align-items:center; justify-content:center; padding:14px 22px; border:1px solid #e3eaf4; border-radius:20px; background:#ffffff; box-shadow:0 12px 35px rgba(17,55,110,.055); } .qnx-s2-trust-item{ min-width:120px; display:flex; align-items:baseline; justify-content:center; gap:5px; } .qnx-s2-trust-item strong{ color:#0758d8; font-size:15px; font-weight:800; letter-spacing:-.3px; } .qnx-s2-trust-item span{ color:#6a7890; font-size:9px; font-weight:600; } .qnx-s2-trust-item:nth-of-type(2) strong{ color:#08a8cf; } .qnx-s2-trust-item:nth-of-type(3) strong{ color:#16b98a; } .qnx-s2-trust-item:nth-of-type(4) strong{ color:#6fae17; } .qnx-s2-trust-item:nth-of-type(5) strong{ color:#0758d8; } .qnx-s2-trust-divider{ width:1px; height:24px; margin:0 14px; background:#e3eaf4; } /* ========================================================= REVEAL ANIMATION ========================================================= */ .qnx-s2-reveal{ opacity:0; transform:translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); } .qnx-s2-reveal.qnx-s2-visible{ opacity:1; transform:translateY(0); } .qnx-s2-feature:nth-child(1){ transition-delay:.05s; } .qnx-s2-feature:nth-child(2){ transition-delay:.12s; } .qnx-s2-feature:nth-child(3){ transition-delay:.19s; } .qnx-s2-feature:nth-child(4){ transition-delay:.26s; } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes qnxS2Pulse{ 0%, 100%{ transform:scale(1); box-shadow:0 0 0 5px rgba(22,185,138,.12); } 50%{ transform:scale(1.15); box-shadow:0 0 0 8px rgba(22,185,138,.04); } } /* ========================================================= TABLET ========================================================= */ @media(max-width:1100px){ .qnx-s2-why{ padding:75px 24px 60px; } .qnx-s2-main{ grid-template-columns:minmax(350px,.9fr) minmax(420px,1.1fr); gap:45px; } .qnx-s2-image-frame{ height:500px; } .qnx-s2-experience-card{ right:-15px; } .qnx-s2-feature{ grid-template-columns:28px 44px minmax(0,1fr); gap:13px; padding:17px; } .qnx-s2-feature-icon{ width:44px; height:44px; border-radius:13px; } .qnx-s2-feature-copy h3{ font-size:16px; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:800px){ .qnx-s2-why{ padding:68px 18px 52px; } .qnx-s2-heading{ margin-bottom:36px; } .qnx-s2-heading h2{ font-size:clamp(34px,9vw,48px); letter-spacing:-1.8px; } .qnx-s2-heading p{ font-size:13px; line-height:1.7; } .qnx-s2-main{ display:flex; flex-direction:column; gap:35px; } .qnx-s2-visual{ width:100%; } .qnx-s2-image-frame{ height:420px; } .qnx-s2-experience-card{ right:14px; bottom:18px; min-width:245px; } .qnx-s2-content{ width:100%; } .qnx-s2-feature{ grid-template-columns:30px 46px minmax(0,1fr); gap:12px; padding:17px 15px; } .qnx-s2-feature-copy h3{ font-size:17px; } .qnx-s2-feature-copy p{ font-size:10.5px; } .qnx-s2-trust{ margin-top:34px; display:grid; grid-template-columns:repeat(2,1fr); gap:0; padding:16px; } .qnx-s2-trust-item{ min-height:43px; } .qnx-s2-trust-divider{ display:none; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media(max-width:520px){ .qnx-s2-why{ padding:58px 14px 45px; } .qnx-s2-eyebrow{ font-size:9px; letter-spacing:1.8px; } .qnx-s2-eyebrow-line{ width:20px; } .qnx-s2-heading h2{ margin-top:12px; font-size:34px; line-height:1.05; } .qnx-s2-heading p{ font-size:12px; } .qnx-s2-image-frame{ height:340px; border-radius:22px; } .qnx-s2-image-frame img, .qnx-s2-image-overlay{ border-radius:22px; } .qnx-s2-image-badge{ top:15px; left:15px; padding:9px 12px; font-size:8px; } .qnx-s2-experience-card{ right:10px; bottom:12px; min-width:0; width:calc(100% - 28px); padding:13px; border-radius:15px; } .qnx-s2-experience-card > strong{ width:37px; height:37px; flex-basis:37px; border-radius:11px; font-size:13px; } .qnx-s2-feature{ grid-template-columns:25px 40px minmax(0,1fr); gap:10px; padding:15px 12px; border-radius:16px; } .qnx-s2-feature-number{ font-size:8px; } .qnx-s2-feature-icon{ width:40px; height:40px; border-radius:12px; font-size:17px; } .qnx-s2-feature-label{ font-size:7.5px; letter-spacing:1.15px; } .qnx-s2-feature-copy h3{ font-size:15px; margin-bottom:6px; } .qnx-s2-feature-copy p{ font-size:9.5px; line-height:1.6; } .qnx-s2-trust{ border-radius:16px; padding:12px 8px; } .qnx-s2-trust-item{ min-width:0; gap:3px; } .qnx-s2-trust-item strong{ font-size:13px; } .qnx-s2-trust-item span{ font-size:8px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce){ .qnx-s2-reveal{ opacity:1; transform:none; transition:none; } .qnx-s2-feature, .qnx-s2-feature-icon{ transition:none; } .qnx-s2-badge-dot{ animation:none; } } .qnx-s2-image-frame{ aspect-ratio: 3 / 2; height: auto; overflow: hidden; } .qnx-s2-image-frame img{ width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* =================================================================== QNIX DIGITAL — SECTION 3 - INTELLIGENT BUSINESS SYSTEMS CSS =================================================================== */ /* ========================================================= QNIX DIGITAL — SECTION 03 / COMMAND SYSTEM PREMIUM BRAND-MATCHED VERSION ========================================================= */ .qnx-s3-command{ position:relative; overflow:hidden; padding:76px 28px 60px; color:#fff; background: radial-gradient( circle at 50% 48%, rgba(16,164,180,.20), transparent 30% ), radial-gradient( circle at 12% 88%, rgba(123,197,31,.12), transparent 28% ), radial-gradient( circle at 88% 10%, rgba(11,120,219,.16), transparent 30% ), linear-gradient( 135deg, #0758d8 0%, #0868d4 34%, #10a4b4 68%, #7bc51f 100% ); isolation:isolate; } .qnx-s3-command-bg{ position:absolute; inset:0; pointer-events:none; background: radial-gradient( circle at 78% 18%, rgba(255,255,255,.09), transparent 27% ), radial-gradient( circle at 20% 30%, rgba(255,255,255,.045), transparent 25% ), linear-gradient( 180deg, rgba(255,255,255,.025), transparent 45%, rgba(6,45,122,.08) ); } .qnx-s3-command-grid{ position:absolute; inset:0; pointer-events:none; opacity:.15; background-image: linear-gradient( rgba(255,255,255,.09) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.09) 1px, transparent 1px ); background-size:48px 48px; mask-image:linear-gradient( to bottom, transparent, #000 16%, #000 84%, transparent ); -webkit-mask-image:linear-gradient( to bottom, transparent, #000 16%, #000 84%, transparent ); } .qnx-s3-command-glow{ position:absolute; border-radius:50%; pointer-events:none; filter:blur(85px); } .qnx-s3-command-glow-a{ width:500px; height:500px; right:-220px; top:80px; background:rgba(16,164,180,.17); } .qnx-s3-command-glow-b{ width:430px; height:430px; left:-240px; bottom:0; background:rgba(183,229,28,.09); } .qnx-s3-command-wrap{ position:relative; z-index:3; max-width:1420px; margin:0 auto; } /* ========================================================= HEADING ========================================================= */ .qnx-s3-command-heading{ max-width:850px; margin:0 auto 34px; text-align:center; } .qnx-s3-command-eyebrow{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:15px; color:#d8f77a; font-size:10px; font-weight:900; letter-spacing:2.5px; } .qnx-s3-command-eyebrow-line{ width:34px; height:1px; background:linear-gradient( 90deg, transparent, #d8f77a ); } .qnx-s3-command-eyebrow-line.right{ background:linear-gradient( 90deg, #d8f77a, transparent ); } .qnx-s3-command-heading h2{ margin:0; font-size:clamp(39px,4.5vw,61px); line-height:1.02; letter-spacing:-2.6px; font-weight:700; text-shadow:0 8px 35px rgba(6,45,122,.18); } .qnx-s3-command-heading h2 strong{ display:block; color:#d8f77a; font-weight:850; } .qnx-s3-command-heading p{ max-width:680px; margin:16px auto 0; color:rgba(255,255,255,.78); font-size:14px; line-height:1.7; } /* ========================================================= COMMAND STAGE ========================================================= */ .qnx-s3-command-stage{ position:relative; min-height:500px; max-width:1200px; margin:0 auto; } /* ========================================================= CONNECTION LINES ========================================================= */ .qnx-s3-command-lines{ position:absolute; inset:0; z-index:1; pointer-events:none; } .qnx-s3-line{ position:absolute; display:block; height:1px; transform-origin:left center; background:linear-gradient( 90deg, rgba(216,247,122,.65), rgba(16,164,180,.35), transparent ); box-shadow:0 0 8px rgba(16,164,180,.12); } .line-a{ width:210px; left:295px; top:190px; transform:rotate(18deg); } .line-b{ width:210px; right:295px; top:190px; transform:rotate(162deg); } .line-c{ width:210px; left:295px; bottom:170px; transform:rotate(-19deg); } .line-d{ width:210px; right:295px; bottom:170px; transform:rotate(199deg); } .line-e{ width:225px; left:50%; top:50%; transform:rotate(90deg); opacity:.27; } .line-f{ width:225px; left:50%; top:50%; transform:rotate(-90deg); opacity:.27; } /* ========================================================= FOUR MAIN CARDS ========================================================= */ .qnx-s3-module{ position:absolute; width:285px; min-height:198px; padding:22px; border:1px solid rgba(255,255,255,.20); border-radius:20px; background: linear-gradient( 145deg, rgba(255,255,255,.15), rgba(255,255,255,.055) ); box-shadow: 0 22px 60px rgba(6,45,122,.20), inset 0 1px 0 rgba(255,255,255,.14); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); z-index:4; transition: transform .4s ease, border-color .4s ease, background .4s ease, box-shadow .4s ease; } .qnx-s3-module:hover{ transform:translateY(-6px); border-color:rgba(216,247,122,.52); background: linear-gradient( 145deg, rgba(255,255,255,.18), rgba(255,255,255,.075) ); box-shadow: 0 28px 70px rgba(6,45,122,.28), 0 0 35px rgba(16,164,180,.13); } .module-strategy{ left:8px; top:28px; animation:qnxS3FloatA 5s ease-in-out infinite; } .module-ai{ right:8px; top:28px; animation:qnxS3FloatB 5.5s ease-in-out infinite; } .module-data{ left:8px; bottom:28px; animation:qnxS3FloatB 5.2s ease-in-out infinite; } .module-growth{ right:8px; bottom:28px; animation:qnxS3FloatA 5.7s ease-in-out infinite; } /* ========================================================= CARD CONTENT ========================================================= */ .qnx-s3-module-top{ display:flex; align-items:center; justify-content:space-between; } .qnx-s3-module-number{ color:#d8f77a; font-size:10px; font-weight:900; letter-spacing:1.5px; } .qnx-s3-module-status{ padding:4px 8px; border:1px solid rgba(216,247,122,.25); border-radius:30px; color:#d8f77a; background:rgba(216,247,122,.08); font-size:7px; font-weight:900; letter-spacing:1.2px; } .qnx-s3-module h3{ margin:12px 0 7px; color:#fff; font-size:18px; line-height:1.2; letter-spacing:-.35px; } .qnx-s3-module p{ margin:0; color:rgba(255,255,255,.67); font-size:11px; line-height:1.58; } /* ========================================================= STRATEGY VISUAL ========================================================= */ .qnx-s3-module-icon{ width:42px; height:42px; margin-top:14px; padding:9px; display:flex; align-items:flex-end; gap:4px; border:1px solid rgba(216,247,122,.25); border-radius:12px; background:rgba(216,247,122,.09); } .qnx-s3-module-icon span{ display:block; width:6px; border-radius:5px; background:linear-gradient( to top, #7bc51f, #d8f77a ); } .qnx-s3-module-icon span:nth-child(1){ height:11px; } .qnx-s3-module-icon span:nth-child(2){ height:19px; } .qnx-s3-module-icon span:nth-child(3){ height:26px; } .qnx-s3-mini-bar{ height:3px; margin-top:13px; overflow:hidden; border-radius:10px; background:rgba(255,255,255,.09); } .qnx-s3-mini-bar span{ display:block; width:78%; height:100%; border-radius:10px; background:linear-gradient( 90deg, #d8f77a, #10a4b4 ); } /* ========================================================= AI VISUAL ========================================================= */ .qnx-s3-ai-symbol{ position:relative; width:42px; height:42px; margin-top:14px; border:1px solid rgba(16,164,180,.45); border-radius:50%; box-shadow: 0 0 25px rgba(16,164,180,.18), inset 0 0 16px rgba(16,164,180,.08); } .qnx-s3-ai-symbol i{ position:absolute; width:6px; height:6px; border-radius:50%; background:#8be6ef; box-shadow:0 0 10px rgba(16,164,180,.75); } .qnx-s3-ai-symbol i:nth-child(1){ left:8px; top:17px; } .qnx-s3-ai-symbol i:nth-child(2){ left:18px; top:7px; } .qnx-s3-ai-symbol i:nth-child(3){ right:6px; top:18px; } .qnx-s3-ai-symbol i:nth-child(4){ left:18px; bottom:6px; } .qnx-s3-signal{ display:flex; align-items:flex-end; gap:3px; height:20px; margin-top:10px; } .qnx-s3-signal span{ width:4px; border-radius:4px; background:linear-gradient( to top, #10a4b4, #8be6ef ); animation:qnxS3Signal 1.8s ease-in-out infinite; } .qnx-s3-signal span:nth-child(1){ height:7px; } .qnx-s3-signal span:nth-child(2){ height:13px; animation-delay:.1s; } .qnx-s3-signal span:nth-child(3){ height:18px; animation-delay:.2s; } .qnx-s3-signal span:nth-child(4){ height:11px; animation-delay:.3s; } .qnx-s3-signal span:nth-child(5){ height:16px; animation-delay:.4s; } .qnx-s3-signal span:nth-child(6){ height:8px; animation-delay:.5s; } /* ========================================================= DATA VISUAL ========================================================= */ .qnx-s3-data-chart{ display:flex; align-items:flex-end; gap:6px; height:40px; margin-top:14px; } .qnx-s3-data-chart span{ display:block; width:9px; border-radius:5px 5px 2px 2px; background:linear-gradient( to top, #0758d8, #10a4b4 ); } .qnx-s3-data-chart span:nth-child(1){ height:14px; } .qnx-s3-data-chart span:nth-child(2){ height:22px; } .qnx-s3-data-chart span:nth-child(3){ height:17px; } .qnx-s3-data-chart span:nth-child(4){ height:29px; } .qnx-s3-data-chart span:nth-child(5){ height:37px; } .qnx-s3-data-chart b{ width:6px; height:6px; margin-bottom:37px; border-radius:50%; background:#d8f77a; box-shadow:0 0 14px rgba(216,247,122,.85); } .qnx-s3-data-value{ display:flex; align-items:baseline; gap:7px; margin-top:6px; } .qnx-s3-data-value strong{ color:#d8f77a; font-size:16px; } .qnx-s3-data-value small{ color:rgba(255,255,255,.48); font-size:8px; } /* ========================================================= GROWTH VISUAL ========================================================= */ .qnx-s3-growth-ring{ width:46px; height:46px; margin-top:12px; padding:3px; border-radius:50%; background:conic-gradient( #d8f77a 0deg, #d8f77a 265deg, rgba(255,255,255,.10) 265deg, rgba(255,255,255,.10) 360deg ); } .qnx-s3-growth-ring > div{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#0758d8; } .qnx-s3-growth-ring strong{ font-size:12px; } .qnx-s3-growth-ring small{ color:#d8f77a; font-size:7px; } /* ========================================================= CENTRAL DIGITAL INTELLIGENCE CORE ========================================================= */ .qnx-s3-command-core{ position:absolute; left:50%; top:50%; width:250px; height:250px; display:flex; align-items:center; justify-content:center; transform:translate(-50%,-50%); z-index:5; } .qnx-s3-core-halo{ position:absolute; inset:12px; border-radius:50%; background:radial-gradient( circle, rgba(16,164,180,.27), rgba(7,88,216,.10) 42%, transparent 70% ); filter:blur(16px); } .qnx-s3-core-ring{ position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.16); } .ring-one{ inset:5px; border-color:rgba(16,164,180,.40); animation:qnxS3CoreRotate 20s linear infinite; } .ring-two{ inset:19px; border-color:rgba(216,247,122,.34); border-style:dashed; animation:qnxS3CoreRotateReverse 27s linear infinite; } .qnx-s3-core-inner{ position:relative; width:168px; height:168px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:1px solid rgba(255,255,255,.28); border-radius:50%; background: radial-gradient( circle at 35% 25%, rgba(16,164,180,.36), transparent 48% ), linear-gradient( 145deg, rgba(6,45,122,.97), rgba(7,88,216,.92) ); box-shadow: 0 0 0 12px rgba(255,255,255,.025), 0 0 75px rgba(16,164,180,.28), inset 0 0 40px rgba(16,164,180,.13); } .qnx-s3-core-label{ color:rgba(255,255,255,.52); font-size:7px; font-weight:800; letter-spacing:2.2px; } .qnx-s3-core-inner strong{ margin-top:7px; color:#d8f77a; font-size:18px; line-height:1.05; letter-spacing:.7px; } .qnx-s3-core-inner > span{ max-width:125px; margin-top:8px; color:rgba(255,255,255,.56); font-size:7px; line-height:1.5; letter-spacing:.9px; } .qnx-s3-core-pulse{ width:6px; height:6px; margin-top:11px; border-radius:50%; background:#d8f77a; box-shadow:0 0 18px rgba(216,247,122,.95); animation:qnxS3Pulse 1.8s ease-in-out infinite; } /* ========================================================= FLOATING KPI CARDS ========================================================= */ .qnx-s3-floating-data{ position:absolute; display:grid; grid-template-columns:auto auto; column-gap:8px; align-items:center; padding:9px 12px; border:1px solid rgba(255,255,255,.17); border-radius:11px; background: linear-gradient( 145deg, rgba(6,45,122,.72), rgba(7,88,216,.58) ); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 13px 32px rgba(6,45,122,.20); z-index:7; } .qnx-s3-floating-data span{ grid-column:1 / -1; color:rgba(255,255,255,.48); font-size:6px; letter-spacing:1.4px; } .qnx-s3-floating-data strong{ margin-top:3px; color:#fff; font-size:12px; } .qnx-s3-floating-data i{ width:16px; height:16px; display:flex; align-items:center; justify-content:center; margin-top:3px; border-radius:50%; color:#d8f77a; background:rgba(216,247,122,.11); font-size:8px; font-style:normal; } .data-card-one{ left:305px; top:98px; } .data-card-two{ right:305px; top:98px; } .data-card-three{ left:50%; bottom:42px; transform:translateX(-50%); } .data-card-three i{ background:#d8f77a; color:#062d7a; box-shadow:0 0 11px rgba(216,247,122,.45); } /* ========================================================= BOTTOM PROCESS STRIP ========================================================= */ .qnx-s3-command-bottom{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:8px; padding-top:17px; border-top:1px solid rgba(255,255,255,.15); } .qnx-s3-command-bottom > div:not(.qnx-s3-command-bottom-message){ display:flex; align-items:center; gap:8px; } .qnx-s3-command-bottom strong{ color:#d8f77a; font-size:10px; letter-spacing:1px; } .qnx-s3-command-bottom span{ color:rgba(255,255,255,.55); font-size:9px; font-weight:800; letter-spacing:1.6px; } .qnx-s3-command-bottom > i{ width:4px; height:4px; border-radius:50%; background:#10a4b4; box-shadow:0 0 8px rgba(16,164,180,.55); } .qnx-s3-command-bottom-message{ display:flex; align-items:center; gap:8px; margin-left:10px; padding-left:18px; border-left:1px solid rgba(255,255,255,.12); } .qnx-s3-live-dot{ width:6px; height:6px; border-radius:50%; background:#d8f77a !important; box-shadow:0 0 12px rgba(216,247,122,.8); animation:qnxS3Pulse 1.6s ease-in-out infinite; } /* ========================================================= REVEAL ========================================================= */ .qnx-s3-command-reveal{ opacity:0; transform:translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); } .qnx-s3-command-reveal.qnx-s3-command-visible{ opacity:1; transform:translateY(0); } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes qnxS3FloatA{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } } @keyframes qnxS3FloatB{ 0%,100%{ transform:translateY(-2px); } 50%{ transform:translateY(6px); } } @keyframes qnxS3CoreRotate{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } @keyframes qnxS3CoreRotateReverse{ from{ transform:rotate(360deg); } to{ transform:rotate(0deg); } } @keyframes qnxS3Pulse{ 0%,100%{ transform:scale(1); opacity:.65; } 50%{ transform:scale(1.22); opacity:1; } } @keyframes qnxS3Signal{ 0%,100%{ opacity:.35; transform:scaleY(.7); } 50%{ opacity:1; transform:scaleY(1); } } /* ========================================================= TABLET ========================================================= */ @media(max-width:1100px){ .qnx-s3-command-stage{ min-height:620px; } .qnx-s3-module{ width:245px; } .module-strategy, .module-data{ left:4px; } .module-ai, .module-growth{ right:4px; } .data-card-one{ left:255px; } .data-card-two{ right:255px; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:760px){ .qnx-s3-command{ padding:66px 18px 56px; } .qnx-s3-command-heading{ margin-bottom:27px; } .qnx-s3-command-heading h2{ font-size:38px; letter-spacing:-2px; } .qnx-s3-command-heading p{ font-size:13px; line-height:1.65; } .qnx-s3-command-eyebrow{ font-size:9px; letter-spacing:1.8px; } .qnx-s3-command-stage{ min-height:760px; max-width:390px; } .qnx-s3-command-core{ top:325px; width:220px; height:220px; } .qnx-s3-core-inner{ width:148px; height:148px; } .qnx-s3-core-inner strong{ font-size:16px; } .qnx-s3-module{ width:160px; min-height:154px; padding:15px; border-radius:16px; } .qnx-s3-module h3{ font-size:13px; margin-top:9px; } .qnx-s3-module p{ font-size:9px; } .module-strategy{ left:0; top:0; } .module-ai{ right:0; top:0; } .module-data{ left:0; bottom:8px; } .module-growth{ right:0; bottom:8px; } .qnx-s3-module-icon, .qnx-s3-ai-symbol{ width:32px; height:32px; } .qnx-s3-data-chart{ height:30px; } .qnx-s3-floating-data{ padding:7px 9px; } .data-card-one{ left:50%; top:168px; transform:translateX(-120px); } .data-card-two{ right:auto; left:50%; top:168px; transform:translateX(14px); } .data-card-three{ bottom:190px; } .qnx-s3-command-lines{ opacity:.55; } .line-a, .line-b, .line-c, .line-d{ width:120px; } .line-a{ left:150px; top:180px; } .line-b{ right:150px; top:180px; } .line-c{ left:150px; bottom:174px; } .line-d{ right:150px; bottom:174px; } .qnx-s3-command-bottom{ gap:9px; flex-wrap:wrap; } .qnx-s3-command-bottom-message{ width:100%; justify-content:center; margin:7px 0 0; padding:13px 0 0; border-left:0; border-top:1px solid rgba(255,255,255,.10); } } /* ========================================================= SMALL MOBILE ========================================================= */ @media(max-width:420px){ .qnx-s3-command-heading h2{ font-size:33px; } .qnx-s3-command-stage{ min-height:735px; } .qnx-s3-module{ width:145px; min-height:150px; } .qnx-s3-command-core{ width:210px; height:210px; } .qnx-s3-core-inner{ width:140px; height:140px; } .data-card-one{ transform:translateX(-109px); } .data-card-two{ transform:translateX(8px); } .qnx-s3-command-bottom span{ font-size:8px; } } /* ========================================================= QNIX DIGITAL — SECTION 4 - WHAT WE DO CSS ========================================================= */ /* ========================================================= QNIX DIGITAL — SECTION 4 FINAL Replace ALL previous qnx-s4 / s4f / s4x Section 4 CSS ========================================================= */ .qnx-s4-final{ position:relative; min-height:1020px; overflow:hidden; padding:0 30px; background: radial-gradient(ellipse at 80% 35%,rgba(121,201,28,.14),transparent 27%), radial-gradient(ellipse at 43% 65%,rgba(8,168,207,.14),transparent 34%), radial-gradient(ellipse at 16% 58%,rgba(7,88,216,.08),transparent 30%), linear-gradient(135deg,#f2faff 0%,#fff 50%,#effcff 100%); } .qnx-s4-wrap{ position:relative; width:100%; max-width:1400px; height:1020px; margin:auto; } /* ---------- BACKGROUND ---------- */ .qnx-s4-bg{ position:absolute; inset:0; pointer-events:none; } .qnx-s4-bg:before{ content:""; position:absolute; left:-12%; top:47%; width:82%; height:270px; border-top:1px solid rgba(8,168,207,.10); border-bottom:1px solid rgba(7,88,216,.07); border-radius:50%; transform:rotate(12deg); } .qnx-s4-bg:after{ content:""; position:absolute; right:-8%; top:18%; width:520px; height:520px; border-radius:50%; background:radial-gradient( circle, rgba(121,201,28,.08), transparent 68% ); } /* ---------- LEFT CONTENT ---------- */ .qnx-s4-copy{ position:absolute; left:0; top:42px; z-index:20; width:650px; } .qnx-s4-label{ display:flex; align-items:center; gap:12px; color:#087ee7; font-size:12px; font-weight:800; letter-spacing:.22em; } .qnx-s4-label span, .qnx-s4-label i{ width:34px; height:2px; background:#0758d8; } .qnx-s4-label i{ background:#08a8cf; opacity:.6; } .qnx-s4-copy h2{ margin:18px 0 20px; color:#0d1730; font-size:52px; line-height:1.04; letter-spacing:-.045em; } .qnx-s4-copy h2 b{ background:linear-gradient(90deg,#0758d8,#087ee7,#08a8cf); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .qnx-s4-copy p{ max-width:510px; margin:0 0 23px; color:#41658f; font-size:15px; line-height:1.55; } .qnx-s4-btn{ display:inline-flex; align-items:center; gap:22px; padding:15px 23px 15px 25px; border-radius:30px; color:#fff; background:linear-gradient(90deg,#0758d8,#087ee7,#16b98a); box-shadow:0 12px 30px rgba(7,88,216,.20); text-decoration:none; font-size:10px; font-weight:800; letter-spacing:.11em; } .qnx-s4-btn strong{ font-size:21px; } /* ---------- TOP RIGHT TRUST ---------- */ .qnx-s4-trust{ position:absolute; right:0; top:38px; z-index:20; display:flex; align-items:center; gap:18px; } .qnx-s4-trust div{ display:flex; align-items:center; gap:10px; color:#245b9e; font-size:11px; line-height:1.4; } .qnx-s4-trust div span{ color:#08a8cf; font-size:28px; } .qnx-s4-trust>i{ width:1px; height:42px; background:linear-gradient(#08a8cf,transparent); } /* ---------- CENTRAL SYSTEM ---------- */ .qnx-s4-orbit{ position:absolute; left:58%; top:365px; width:850px; height:600px; transform:translateX(-50%); } /* ---------- ORBIT RINGS ---------- */ .qnx-s4-circle{ position:absolute; left:50%; top:50%; border:1px solid rgba(8,168,207,.23); border-radius:50%; transform:translate(-50%,-50%); } .qnx-s4-circle.c-a{ width:410px; height:410px; } .qnx-s4-circle.c-b{ width:510px; height:510px; border-color:rgba(121,201,28,.18); } /* ---------- SOFT ORBIT LIGHT ---------- */ .qnx-s4-orbit:before{ content:""; position:absolute; left:50%; top:50%; width:560px; height:470px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient( ellipse, rgba(8,168,207,.13), rgba(8,168,207,.035) 48%, transparent 73% ); pointer-events:none; } /* ---------- CENTER CORE ---------- */ .qnx-s4-core{ position:absolute; left:50%; top:50%; z-index:5; width:250px; height:250px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:2px solid rgba(255,255,255,.88); border-radius:50%; transform:translate(-50%,-50%); color:#fff; background: radial-gradient( circle at 62% 24%, #10a8cf 0%, #087ee7 31%, #0758d8 62%, #062d7a 100% ); box-shadow: 0 0 0 10px rgba(8,168,207,.08), 0 0 0 25px rgba(8,168,207,.045), 0 0 65px rgba(8,168,207,.38); } .qnx-s4-core:before{ content:""; position:absolute; inset:-32px; z-index:-1; border-radius:50%; background:radial-gradient( circle, rgba(8,168,207,.22), rgba(8,168,207,.05) 48%, transparent 72% ); } .qnx-s4-core strong{ font-size:23px; line-height:1; } .qnx-s4-core>b{ font-size:25px; line-height:1.1; } .qnx-s4-core small{ margin-top:12px; font-size:10px; } .qnx-s4-core i{ width:52px; height:4px; margin-top:15px; border-radius:5px; background:#08a8cf; } /* ---------- SERVICE CARDS ---------- */ .qnx-s4-card{ position:absolute; z-index:8; width:290px; min-height:205px; box-sizing:border-box; padding:20px 25px; overflow:hidden; border:1px solid rgba(103,202,232,.40); border-radius:24px 30px 22px 28px; background: linear-gradient( 145deg, rgba(255,255,255,.84), rgba(240,251,255,.60) ); box-shadow: 0 18px 42px rgba(30,100,145,.10), inset 0 1px 0 rgba(255,255,255,.90); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); text-decoration:none; opacity:1 !important; visibility:visible !important; transition:.35s ease; } .qnx-s4-card:after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background: linear-gradient( 135deg, rgba(255,255,255,.40), transparent 42%, rgba(8,168,207,.05) ); } .qnx-s4-card:hover{ transform:translateY(-6px); box-shadow: 0 24px 52px rgba(7,88,216,.15), inset 0 1px 0 rgba(255,255,255,.95); } .qnx-s4-card em{ display:block; color:#4b8bc5; font-size:11px; font-style:normal; font-weight:800; } .qnx-s4-card .ico{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; width:52px; height:52px; margin:0 0 12px 30px; border-radius:13px; color:#fff; font-size:23px; font-weight:700; box-shadow:0 8px 18px rgba(7,88,216,.16); } .qnx-s4-card .seo{ background:linear-gradient(135deg,#087ee7,#08a8cf); } .qnx-s4-card .auto, .qnx-s4-card .ppc{ background:linear-gradient(135deg,#16b98a,#79c91c); } .qnx-s4-card .web{ background:linear-gradient(135deg,#0758d8,#087ee7); } .qnx-s4-card .smo{ background:linear-gradient(135deg,#08a8cf,#087ee7); } .qnx-s4-card h3{ position:relative; z-index:2; margin:0 0 7px; color:#102b55; font-size:19px; line-height:1.15; } .qnx-s4-card p{ position:relative; z-index:2; margin:0 0 9px; color:#55749c; font-size:12px; line-height:1.42; } .qnx-s4-card>b{ position:relative; z-index:2; color:#0758d8; font-size:11px; } /* ---------- EXACT CARD POSITIONS ---------- */ .qnx-s4-card.card1{ left:50%; top:-125px; transform:translateX(-50%); } .qnx-s4-card.card2{ right:-18px; top:55px; } .qnx-s4-card.card3{ right:68px; bottom:-35px; width:310px; } .qnx-s4-card.card4{ left:48px; bottom:0; } .qnx-s4-card.card5{ left:-18px; top:78px; } /* ---------- ORBIT NODES ---------- */ .qnx-s4-node{ position:absolute; z-index:4; width:13px; height:13px; border-radius:50%; background:linear-gradient(135deg,#0758d8,#79c91c); box-shadow:0 0 15px rgba(8,168,207,.50); } .qnx-s4-node.n1{ left:27%; top:29%; } .qnx-s4-node.n2{ right:25%; top:28%; } .qnx-s4-node.n3{ right:48%; bottom:4%; } /* ---------- BOTTOM LEFT BLUE SHAPE ---------- */ .qnx-s4-growth{ position:absolute; left:0; bottom:28px; z-index:20; color:#fff; } .qnx-s4-growth:before{ content:""; position:absolute; left:-150px; bottom:-185px; z-index:-1; width:570px; height:400px; border-radius:0 100% 0 0; background: linear-gradient( 135deg, #0758d8 0%, #10a4b4 32%, #5dc43b 68%, #d8f77a 100% ); transform:rotate(5deg); } .qnx-s4-growth span{ display:block; width:36px; height:4px; margin-bottom:14px; background:linear-gradient(90deg,#79c91c,#08a8cf); } .qnx-s4-growth b{ font-size:11px; line-height:1.9; letter-spacing:.20em; } /* ---------- RIGHT IMPACT ---------- */ .qnx-s4-impact{ position:absolute; right:0; bottom:130px; z-index:20; color:#08a8cf; } .qnx-s4-impact strong{ display:block; font-size:34px; line-height:1; } .qnx-s4-impact b{ display:block; margin-top:8px; font-size:17px; line-height:1.1; } .qnx-s4-impact span{ display:block; width:40px; height:4px; margin-top:12px; border-radius:5px; background:#0758d8; } /* ========================================================= RESPONSIVE ========================================================= */ @media(max-width:1100px){ .qnx-s4-final{ min-height:1080px; } .qnx-s4-wrap{ height:1080px; } .qnx-s4-copy{ width:510px; } .qnx-s4-copy h2{ font-size:44px; } .qnx-s4-orbit{ top:455px; transform:translateX(-50%) scale(.82); transform-origin:top center; } } @media(max-width:800px){ .qnx-s4-final{ min-height:1180px; padding:55px 18px; } .qnx-s4-wrap{ height:1100px; } .qnx-s4-copy{ position:relative; left:auto; top:auto; width:100%; } .qnx-s4-copy h2{ font-size:38px; } .qnx-s4-trust{ position:relative; right:auto; top:auto; margin-top:28px; justify-content:space-between; } .qnx-s4-trust div{ flex-direction:column; text-align:center; font-size:9px; } .qnx-s4-trust>i{ display:none; } .qnx-s4-orbit{ top:500px; left:50%; transform:translateX(-50%) scale(.62); transform-origin:top center; } .qnx-s4-growth{ bottom:5px; } .qnx-s4-impact{ bottom:5px; } } @media(max-width:520px){ .qnx-s4-final{ min-height:1050px; } .qnx-s4-wrap{ height:970px; } .qnx-s4-copy h2{ font-size:33px; } .qnx-s4-orbit{ top:475px; transform:translateX(-50%) scale(.51); } .qnx-s4-growth b{ font-size:9px; } .qnx-s4-impact b{ font-size:12px; } } /* ========================================================= QNIX DIGITAL — SECTION 5 - HOW WE WORK CSS ========================================================= */ .qnx-how{ position:relative; overflow:hidden; padding:0; background: radial-gradient(circle at 84% 13%,rgba(255,255,255,.20),transparent 25%), radial-gradient(circle at 45% 48%,rgba(255,255,255,.11),transparent 25%), linear-gradient( 135deg, #0865c9 0%, #0758d8 34%, #10a4b4 66%, #72b92b 100% ); } .qnx-how:before{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(145deg,transparent 0 49%,rgba(255,255,255,.07) 49.1%,transparent 49.3%), linear-gradient(150deg,transparent 0 75%,rgba(7,88,216,.06) 75.1%,transparent 75.3%); } .qnx-how-inner{ position:relative; width:100%; max-width:1536px; height:960px; margin:auto; isolation:isolate; } /* ========================================================= LEFT CONTENT ========================================================= */ .qnx-how-intro{ position:absolute; z-index:10; left:6.2%; top:99px; width:470px; } .qnx-how-label{ display:flex; align-items:center; gap:14px; margin-bottom:16px; color:#0758d8; font-size:12px; font-weight:900; letter-spacing:.22em; } .qnx-how-label span{ display:block; width:54px; height:2px; border-radius:10px; background:#0758d8; } .qnx-how-label span:last-child{ width:55px; opacity:.75; } .qnx-how-intro h2{ margin:0; color:#062d7a; font-size:60px; line-height:.98; font-weight:800; letter-spacing:-.055em; } .qnx-how-intro h2 strong{ display:block; margin-top:9px; font-size:46px; line-height:1.02; font-weight:700; letter-spacing:-.045em; } .qnx-how-intro h2 em{ font-style:normal; background:linear-gradient(90deg,#0758d8,#087ee7,#10a4b4); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .qnx-how-intro p{ max-width:470px; margin:22px 0 26px; color:#244a68; font-size:16px; line-height:1.58; font-weight:500; } .qnx-how-btn{ display:inline-flex; align-items:center; gap:17px; min-width:200px; justify-content:center; padding:18px 25px; border-radius:40px; color:#fff; text-decoration:none; font-size:13px; font-weight:900; letter-spacing:.08em; background:linear-gradient(90deg,#0758d8,#087ee7,#10a4b4); box-shadow:0 15px 30px rgba(7,88,216,.25); transition:.3s ease; } .qnx-how-btn b{ font-size:23px; font-weight:400; line-height:0; } .qnx-how-btn:hover{ transform:translateY(-4px); box-shadow:0 22px 40px rgba(7,88,216,.32); } /* ========================================================= FLOW AREA ========================================================= */ .qnx-how-flow{ position:absolute; z-index:8; left:40.7%; top:126px; width:890px; height:735px; } /* ========================================================= CARDS ========================================================= */ .qnx-how-card{ position:absolute; box-sizing:border-box; width:278px; min-height:310px; padding:72px 28px 28px; border:1px solid rgba(255,255,255,.84); border-radius:28px; overflow:visible; background: radial-gradient(circle at 80% 5%,rgba(255,255,255,.40),transparent 35%), linear-gradient(145deg,rgba(255,255,255,.82),rgba(244,251,255,.50)); box-shadow: 0 20px 45px rgba(6,45,122,.14), inset 0 1px 0 rgba(255,255,255,.95); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:transform .35s ease,box-shadow .35s ease; } .qnx-how-card:before{ content:""; position:absolute; width:145px; height:145px; top:-72px; right:-55px; border-radius:50%; border:1px solid rgba(255,255,255,.32); background:rgba(255,255,255,.06); pointer-events:none; } .qnx-how-card:hover{ transform:translateY(-6px); box-shadow: 0 28px 52px rgba(6,45,122,.20), inset 0 1px 0 rgba(255,255,255,.96); } .qnx-how-card h3{ position:relative; z-index:2; margin:24px 0 13px; color:#062d7a; font-size:22px; line-height:1.12; letter-spacing:-.035em; } .qnx-how-card p{ position:relative; z-index:2; margin:0; color:#46627b; font-size:15px; line-height:1.48; } /* ========================================================= EXACT CARD POSITIONS ========================================================= */ .qnx-how-card-1{ left:0; top:0; transform:rotate(-1deg); } .qnx-how-card-2{ left:300px; top:8px; transform:rotate(.5deg); } .qnx-how-card-3{ left:600px; top:0; transform:rotate(-1deg); } .qnx-how-card-4{ left:70px; top:392px; transform:rotate(.5deg); } .qnx-how-card-5{ left:405px; top:392px; transform:rotate(-1deg); } /* ========================================================= STEP CIRCLES ========================================================= */ .qnx-step{ position:absolute; z-index:5; left:-4px; top:-19px; display:flex; align-items:center; justify-content:center; width:67px; height:67px; border:2px solid rgba(255,255,255,.78); border-radius:50%; color:#fff; font-size:22px; font-weight:800; box-shadow:0 10px 24px rgba(7,88,216,.24); } .step-blue{ background:linear-gradient(135deg,#0758d8,#087ee7,#10a4b4); } .step-teal{ background:linear-gradient(135deg,#10a4b4,#16b98a,#7bc51f); } /* ========================================================= ICONS ========================================================= */ .qnx-how-icon{ position:relative; z-index:3; display:flex; align-items:center; justify-content:center; width:76px; height:76px; border-radius:22px; border:1px solid rgba(255,255,255,.68); box-shadow:0 12px 28px rgba(7,88,216,.16); } .qnx-how-icon svg{ width:40px; height:40px; fill:none; stroke:currentColor; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; } .icon-blue{ color:#0758d8; background:linear-gradient(145deg,rgba(220,244,255,.95),rgba(181,222,246,.70)); } .icon-green{ color:#168f76; background:linear-gradient(145deg,rgba(232,255,235,.94),rgba(189,238,194,.70)); } /* ========================================================= CONNECTOR LINES ========================================================= */ .qnx-flow-line{ position:absolute; z-index:1; display:block; background:#087ee7; } .qnx-flow-line:after{ content:""; position:absolute; width:11px; height:11px; border-radius:50%; background:#0758d8; } /* 01 → 02 */ .line-1{ left:276px; top:151px; width:42px; height:1px; } .line-1:after{ right:-5px; top:-5px; } /* 02 → 03 */ .line-2{ left:578px; top:151px; width:43px; height:1px; } .line-2:after{ right:-5px; top:-5px; } /* 03 → 04 */ .line-3{ left:700px; top:315px; width:1px; height:87px; border-radius:0 0 55px 0; } .line-3:before{ content:""; position:absolute; left:-565px; bottom:-1px; width:565px; height:1px; background:#087ee7; } .line-3:after{ left:-5px; bottom:-5px; } /* 04 → 05 */ .line-4{ left:350px; top:502px; width:56px; height:1px; } .line-4:after{ right:-5px; top:-5px; } /* ========================================================= PHOTO — BOTTOM LEFT ========================================================= */ .qnx-how-photo{ position:absolute; z-index:7; left:0; bottom:0; width:640px; height:480px; overflow:hidden; border-radius:0 260px 0 0; background: linear-gradient(135deg,#0758d8,#10a4b4); } .qnx-how-photo:before{ content:""; position:absolute; z-index:2; inset:0; background: linear-gradient(145deg,rgba(7,88,216,.12),transparent 48%), linear-gradient(0deg,rgba(6,45,122,.15),transparent 55%); pointer-events:none; } .qnx-how-photo:after{ content:""; position:absolute; z-index:3; width:700px; height:440px; left:-100px; bottom:-260px; border-radius:50%; border:1px solid rgba(255,255,255,.55); pointer-events:none; } .qnx-how-photo img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; } /* ========================================================= DECORATIVE NOTES ========================================================= */ .qnx-how-note{ position:absolute; z-index:12; color:#0758d8; font-family:"Comic Sans MS","Segoe Print",cursive; font-size:27px; line-height:1.12; font-weight:500; } .note-left{ left:25%; bottom:265px; transform:rotate(-9deg); } .note-left span{ position:absolute; left:-42px; top:-8px; font-size:34px; } .note-right{ right:4%; bottom:20px; text-align:center; transform:rotate(-10deg); } .note-right span{ display:block; margin-top:12px; margin-left:-85px; font-size:45px; } /* ========================================================= RESPONSIVE ========================================================= */ @media(max-width:1450px){ .qnx-how-inner{ height:900px; } .qnx-how-intro{ left:4.5%; width:420px; } .qnx-how-intro h2{ font-size:53px; } .qnx-how-intro h2 strong{ font-size:41px; } .qnx-how-flow{ left:39%; transform:scale(.92); transform-origin:top left; } .qnx-how-photo{ width:540px; height:410px; } .note-left{ left:25%; bottom:225px; } } @media(max-width:1150px){ .qnx-how{ padding:80px 25px; } .qnx-how-inner{ height:auto; max-width:850px; } .qnx-how-intro{ position:relative; top:auto; left:auto; width:100%; text-align:center; margin-bottom:65px; } .qnx-how-label{ justify-content:center; } .qnx-how-intro p{ margin-left:auto; margin-right:auto; } .qnx-how-flow{ position:relative; left:auto; top:auto; width:100%; height:700px; transform:none; } .qnx-how-card{ width:29%; } .qnx-how-card-1{left:0;} .qnx-how-card-2{left:35%;} .qnx-how-card-3{left:70%;} .qnx-how-card-4{ left:17%; top:380px; } .qnx-how-card-5{ left:52%; top:380px; } .qnx-how-photo, .qnx-how-note{ display:none; } } @media(max-width:760px){ .qnx-how{ padding:70px 18px; } .qnx-how-intro h2{ font-size:42px; } .qnx-how-intro h2 strong{ font-size:34px; } .qnx-how-intro p{ font-size:14px; } .qnx-how-flow{ height:auto; display:grid; grid-template-columns:1fr; gap:20px; } .qnx-how-card, .qnx-how-card-1, .qnx-how-card-2, .qnx-how-card-3, .qnx-how-card-4, .qnx-how-card-5{ position:relative; left:auto; top:auto; width:100%; min-height:280px; transform:none; } .qnx-flow-line{ display:none; } .qnx-step{ left:15px; } .qnx-how-icon{ margin-top:0; } .qnx-how-card h3{ margin-top:22px; } } @media(max-width:430px){ .qnx-how-intro h2{ font-size:35px; } .qnx-how-intro h2 strong{ font-size:29px; } .qnx-how-card{ padding:64px 23px 25px; } .qnx-how-card p{ font-size:14px; } } /* ========================================================= QNIX DIGITAL — SECTION 6 - Selected Work CSS ========================================================= */ .qnx-selected-work{ --qnx-blue:#0758D8; --qnx-blue2:#087EE7; --qnx-cyan:#08A8CF; --qnx-green:#16B98A; --qnx-lime:#79C91C; --qnx-dark:#08396f; --qnx-text:#123e70; --qnx-muted:#6683a5; --qnx-line:rgba(7,88,216,.13); --qnx-soft:#f5fbff; position:relative; overflow:hidden; padding:64px 0 42px; background: radial-gradient( circle at 7% 24%, rgba(8,168,207,.08), transparent 28% ), radial-gradient( circle at 94% 78%, rgba(121,201,28,.07), transparent 27% ), #fff; } .qnx-sw-container{ width:min(1440px,calc(100% - 70px)); margin:0 auto; } /* ========================================================= HEADING ========================================================= */ .qnx-sw-heading{ display:flex; align-items:flex-end; justify-content:space-between; gap:35px; margin-bottom:27px; } .qnx-sw-title-wrap{ max-width:720px; } .qnx-sw-eyebrow{ display:inline-flex; align-items:center; gap:11px; color:var(--qnx-cyan); font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; margin-bottom:10px; } .qnx-sw-eyebrow i{ display:block; width:42px; height:2px; border-radius:10px; background:linear-gradient( 90deg, var(--qnx-cyan), var(--qnx-lime) ); } .qnx-sw-heading h2{ margin:0; color:var(--qnx-dark); font-size:clamp(35px,3.6vw,55px); line-height:.98; letter-spacing:-2.2px; font-weight:800; } .qnx-sw-heading h2 span{ display:block; background: linear-gradient( 90deg, var(--qnx-blue), var(--qnx-cyan), var(--qnx-green) ); -webkit-background-clip:text; background-clip:text; color:transparent; } .qnx-sw-heading p{ margin:11px 0 0; max-width:590px; color:var(--qnx-muted); font-size:13px; line-height:1.55; } .qnx-sw-heading-note{ display:flex; align-items:flex-start; gap:12px; padding-bottom:3px; } .qnx-sw-note-line{ width:2px; height:55px; border-radius:10px; background: linear-gradient( 180deg, var(--qnx-blue), var(--qnx-cyan), var(--qnx-lime) ); } .qnx-sw-heading-note p{ margin:0; color:var(--qnx-text); font-size:11px; font-weight:700; line-height:1.55; } /* ========================================================= TOP PHASE NAVIGATION ========================================================= */ .qnx-sw-tabs-wrap{ display:flex; align-items:center; gap:13px; margin-bottom:15px; } .qnx-sw-tabs{ flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .qnx-sw-tab{ position:relative; min-height:75px; display:flex; align-items:center; gap:12px; padding:11px 16px; border:1px solid var(--qnx-line); border-radius:15px; background:rgba(255,255,255,.92); color:var(--qnx-text); text-align:left; cursor:pointer; transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease; } .qnx-sw-tab:hover{ transform:translateY(-2px); border-color:rgba(8,126,231,.3); box-shadow:0 12px 28px rgba(7,88,216,.08); } .qnx-sw-tab.active{ border-color:transparent; color:#fff; background: linear-gradient( 105deg, var(--qnx-blue), var(--qnx-blue2) 45%, var(--qnx-green) ); box-shadow:0 12px 28px rgba(7,88,216,.17); } .qnx-sw-tab-icon{ flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; border-radius:11px; border:1px solid rgba(7,88,216,.12); background:rgba(8,168,207,.07); color:var(--qnx-blue2); font-size:20px; font-weight:700; } .qnx-sw-tab.active .qnx-sw-tab-icon{ color:#fff; border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.13); } .qnx-sw-tab strong{ display:block; font-size:14px; font-weight:800; } .qnx-sw-tab small{ display:block; margin-top:4px; font-size:10px; opacity:.68; } .qnx-sw-arrow{ flex:0 0 50px; width:50px; height:50px; display:grid; place-items:center; border:1px solid var(--qnx-line); border-radius:50%; background:#fff; color:var(--qnx-blue); font-size:21px; cursor:pointer; transition:.3s ease; } .qnx-sw-arrow:hover{ color:#fff; background:var(--qnx-blue); border-color:var(--qnx-blue); transform:scale(1.06); } /* ========================================================= SHOWCASE ========================================================= */ .qnx-sw-showcase{ position:relative; height:468px; min-height:468px; border:1px solid rgba(7,88,216,.12); border-radius:21px; background: linear-gradient( 135deg, rgba(255,255,255,.98), rgba(245,251,255,.94) ); box-shadow: 0 18px 55px rgba(7,88,216,.07); overflow:hidden; } .qnx-sw-showcase::before{ content:""; position:absolute; width:260px; height:260px; left:-145px; bottom:-170px; border-radius:50%; background:rgba(8,168,207,.07); pointer-events:none; } .qnx-sw-showcase::after{ content:""; position:absolute; width:220px; height:220px; right:-125px; top:-145px; border-radius:50%; background:rgba(121,201,28,.06); pointer-events:none; } /* ========================================================= PANELS ========================================================= */ .qnx-sw-panel{ display:none; position:relative; z-index:2; width:100%; height:100%; padding:20px 25px; animation:qnxSWFade .35s ease; } .qnx-sw-panel.active{ display:block; } @keyframes qnxSWFade{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:translateY(0); } } /* ========================================================= CASE STUDY ========================================================= */ .qnx-sw-case-slide{ display:none; height:100%; animation:qnxCaseFade .35s ease; } .qnx-sw-case-slide.active{ display:block; } @keyframes qnxCaseFade{ from{ opacity:0; transform:translateX(10px); } to{ opacity:1; transform:translateX(0); } } .qnx-sw-case-grid{ display:grid; grid-template-columns: .88fr 1.38fr .62fr; gap:24px; align-items:center; height:100%; } .qnx-sw-case-content{ padding:0 0 0 3px; } .qnx-sw-mini-label{ display:inline-flex; align-items:center; padding:5px 9px; border-radius:30px; background:rgba(8,168,207,.09); color:var(--qnx-cyan); font-size:10px; font-weight:900; letter-spacing:1px; } .qnx-sw-case-content h3, .qnx-sw-video-content h3, .qnx-sw-review-intro h3, .qnx-sw-seo-intro h3{ margin:12px 0 8px; color:var(--qnx-dark); font-size:32px; line-height:1.1; letter-spacing:-1px; } .qnx-sw-case-content h3 span, .qnx-sw-video-content h3 span, .qnx-sw-review-intro h3 span, .qnx-sw-seo-intro h3 span{ display:block; color:var(--qnx-blue2); } .qnx-sw-case-intro{ margin:0 0 12px; color:var(--qnx-muted); font-size:13.5px; line-height:1.5; } .qnx-sw-story-list{ display:grid; gap:7px; } .qnx-sw-story{ display:flex; gap:8px; } .qnx-sw-story-icon{ flex:0 0 30px; width:30px; height:30px; display:grid; place-items:center; border-radius:8px; color:var(--qnx-blue2); background:rgba(7,88,216,.06); font-size:11px; font-weight:900; } .qnx-sw-story-icon.result{ color:var(--qnx-green); background:rgba(22,185,138,.09); } .qnx-sw-story h4{ margin:0 0 2px; color:var(--qnx-dark); font-size:13px; font-weight:800; } .qnx-sw-story p{ margin:0; color:var(--qnx-muted); font-size:11.5px; line-height:1.4; } .qnx-sw-primary-btn{ display:inline-flex; align-items:center; gap:9px; margin-top:12px; padding:8px 13px; border-radius:30px; color:#fff; background: linear-gradient( 100deg, var(--qnx-lime), var(--qnx-green), var(--qnx-blue2) ); font-size:9px; font-weight:800; text-decoration:none; box-shadow: 0 9px 20px rgba(22,185,138,.14); transition:.3s ease; } .qnx-sw-primary-btn:hover{ transform:translateY(-2px); } .qnx-sw-primary-btn span{ font-size:14px; } /* ========================================================= LAPTOP ========================================================= */ .qnx-sw-device-area{ position:relative; min-width:0; text-align:center; } .qnx-sw-laptop{ position:relative; width:min(100%,540px); margin:0 auto; padding:10px 10px 0; transform: perspective(1200px) rotateX(1deg); } .qnx-sw-laptop-screen{ position:relative; height:350px; overflow:hidden; border:5px solid #123e70; border-bottom-width:7px; border-radius:10px 10px 4px 4px; background:#dfeeff; box-shadow: 0 15px 32px rgba(7,88,216,.17), inset 0 0 0 1px rgba(255,255,255,.35); } .qnx-sw-screen-scroll{ position:absolute; inset:0; overflow:hidden; cursor:ns-resize; } .qnx-sw-screen-scroll img{ display:block; width:100%; height:auto; object-fit:cover; object-position:top center; transform:translateY(0); transition: transform 2.8s cubic-bezier(.22,.61,.36,1); user-select:none; -webkit-user-drag:none; } .qnx-sw-screen-scroll.is-scrolling img{ transition: transform var(--qnx-scroll-duration,5s) cubic-bezier(.42,0,.18,1); transform: translateY( var(--qnx-scroll-distance,-500px) ) !important; } .qnx-sw-laptop-base{ position:relative; width:112%; height:14px; margin-left:-6%; border-radius: 0 0 28px 28px; background: linear-gradient( 180deg, #d7e8f8, #9fbcd8 ); box-shadow: 0 10px 16px rgba(7,88,216,.13); } .qnx-sw-laptop-base::after{ content:""; position:absolute; left:36%; right:36%; bottom:2px; height:3px; border-radius:20px; background: rgba(7,88,216,.15); } .qnx-sw-result-badge{ position:absolute; top:-9px; right:0; z-index:4; min-width:94px; padding:7px 10px; border-radius:12px; color:#fff; text-align:left; background: linear-gradient( 135deg, var(--qnx-green), var(--qnx-cyan) ); box-shadow: 0 10px 20px rgba(22,185,138,.2); } .qnx-sw-result-badge strong{ display:block; font-size:17px; line-height:1; } .qnx-sw-result-badge small{ display:block; margin-top:3px; font-size:7px; opacity:.85; } .qnx-sw-hover-tip{ display:inline-flex; align-items:center; gap:5px; margin-top:7px; color:var(--qnx-muted); font-size:8px; font-weight:700; } .qnx-sw-hover-tip span{ color:var(--qnx-cyan); font-size:13px; } .qnx-sw-mini-projects{ display:flex; justify-content:center; gap:7px; margin-top:9px; } .qnx-sw-mini-project{ width:53px; padding:0; border:0; background:transparent; cursor:pointer; } .qnx-sw-mini-project span{ display:block; height:26px; border:1px solid var(--qnx-line); border-radius:6px; background: linear-gradient( 135deg, rgba(7,88,216,.13), rgba(8,168,207,.10) ); transition:.3s ease; } .qnx-sw-mini-project:nth-child(2) span{ background: linear-gradient( 135deg, rgba(22,185,138,.15), rgba(121,201,28,.10) ); } .qnx-sw-mini-project:nth-child(3) span{ background: linear-gradient( 135deg, rgba(8,126,231,.13), rgba(8,168,207,.10) ); } .qnx-sw-mini-project:nth-child(4) span{ background: linear-gradient( 135deg, rgba(121,201,28,.15), rgba(22,185,138,.10) ); } .qnx-sw-mini-project.active span{ border:2px solid var(--qnx-green); box-shadow: 0 5px 12px rgba(22,185,138,.14); } .qnx-sw-mini-project small{ display:block; margin-top:3px; color:var(--qnx-muted); font-size:6.5px; } /* ========================================================= RIGHT INFO ========================================================= */ .qnx-sw-project-info{ min-width:0; } .qnx-sw-client-brand{ display:flex; align-items:center; gap:8px; padding-bottom:10px; border-bottom: 1px solid var(--qnx-line); } .qnx-sw-brand-mark{ width:33px; height:33px; display:grid; place-items:center; border-radius:9px; color:#fff; background: linear-gradient( 135deg, var(--qnx-blue), var(--qnx-green) ); font-size:13px; font-weight:900; } .qnx-sw-client-brand strong{ display:block; color:var(--qnx-dark); font-size:14px; } .qnx-sw-client-brand small{ display:block; margin-top:2px; color:var(--qnx-muted); font-size:10px; } .qnx-sw-metrics{ display:grid; gap:8px; padding:12px 0; } .qnx-sw-metric{ display:flex; align-items:center; gap:7px; } .qnx-sw-metric > span{ flex:0 0 27px; width:27px; height:27px; display:grid; place-items:center; border-radius:7px; color:var(--qnx-blue2); background: rgba(8,126,231,.06); font-size:12px; } .qnx-sw-metric small{ display:block; color:var(--qnx-muted); font-size:10px; } .qnx-sw-metric strong{ display:block; margin-top:1px; color:var(--qnx-dark); font-size:12px; } .qnx-sw-quote{ padding:10px; border:1px solid rgba(8,168,207,.12); border-radius:11px; background: linear-gradient( 145deg, rgba(8,168,207,.05), rgba(121,201,28,.05) ); } .qnx-sw-quote-mark{ display:block; color:var(--qnx-green); font-size:22px; font-weight:900; line-height:.7; } .qnx-sw-quote p{ margin:5px 0 8px; color:var(--qnx-text); font-size:10.5px; line-height:1.5; } .qnx-sw-quote-person{ display:flex; align-items:center; gap:6px; } .qnx-sw-avatar{ width:24px; height:24px; display:grid; place-items:center; border-radius:50%; color:#fff; background: linear-gradient( 135deg, var(--qnx-blue), var(--qnx-green) ); font-size:7px; font-weight:900; } .qnx-sw-quote-person strong{ display:block; color:var(--qnx-dark); font-size:10.5px; } .qnx-sw-quote-person small{ display:block; color:var(--qnx-muted); font-size:9.5px; } /* ========================================================= VIDEO TESTIMONIAL ========================================================= */ .qnx-sw-video-slides, .qnx-sw-review-slides, .qnx-sw-seo-slides{ height:100%; } .qnx-sw-video-slide, .qnx-sw-review-slide, .qnx-sw-seo-slide{ display:none; height:100%; animation:qnxInnerFade .35s ease; } .qnx-sw-video-slide.active, .qnx-sw-review-slide.active, .qnx-sw-seo-slide.active{ display:block; } @keyframes qnxInnerFade{ from{ opacity:0; transform:translateX(9px); } to{ opacity:1; transform:translateX(0); } } .qnx-sw-video-grid{ display:grid; grid-template-columns:1.45fr .75fr; align-items:center; gap:35px; height:100%; padding:8px 25px; } .qnx-sw-video-player{ position:relative; height:330px; overflow:hidden; border-radius:17px; background: linear-gradient( 135deg, var(--qnx-blue), var(--qnx-cyan), var(--qnx-green) ); box-shadow: 0 20px 42px rgba(7,88,216,.15); } .qnx-sw-video-player::before{ content:""; position:absolute; inset:20px; z-index:2; border: 1px solid rgba(255,255,255,.16); border-radius:12px; pointer-events:none; } .qnx-sw-youtube-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:1; } .qnx-sw-video-number{ position:absolute; top:14px; left:16px; z-index:4; padding:5px 8px; border-radius:20px; color:#fff; background:rgba(7,45,122,.68); font-size:8px; font-weight:800; letter-spacing:1px; } .qnx-sw-video-content{ padding-right:10px; } .qnx-sw-video-content p, .qnx-sw-review-intro p, .qnx-sw-seo-intro p{ color:var(--qnx-muted); font-size:11px; line-height:1.55; } .qnx-sw-video-person{ display:flex; align-items:center; gap:8px; margin-top:18px; } .qnx-sw-video-person .qnx-sw-avatar{ width:37px; height:37px; font-size:9px; } .qnx-sw-video-person strong{ display:block; color:var(--qnx-dark); font-size:10px; } .qnx-sw-video-person small{ display:block; margin-top:2px; color:var(--qnx-muted); font-size:7px; } .qnx-sw-video-progress{ display:flex; gap:5px; margin-top:22px; } .qnx-sw-video-progress span{ width:6px; height:6px; border-radius:50%; background: rgba(7,88,216,.18); } .qnx-sw-video-progress span.active{ width:19px; border-radius:10px; background: linear-gradient( 90deg, var(--qnx-blue), var(--qnx-green) ); } /* ========================================================= REVIEWS ========================================================= */ .qnx-sw-review-layout{ display:grid; grid-template-columns:.7fr 1.3fr; align-items:center; gap:45px; height:100%; padding:15px 45px; } .qnx-sw-rating{ display:flex; align-items:center; gap:11px; margin-top:20px; } .qnx-sw-rating > strong{ color:var(--qnx-dark); font-size:38px; line-height:1; } .qnx-sw-rating span{ display:block; color:var(--qnx-lime); font-size:14px; letter-spacing:1.5px; } .qnx-sw-rating small{ display:block; margin-top:2px; color:var(--qnx-muted); font-size:7px; } .qnx-sw-review-card{ position:relative; padding:35px 40px; border-radius:19px; background: linear-gradient( 135deg, rgba(7,88,216,.05), rgba(8,168,207,.05), rgba(121,201,28,.05) ); border: 1px solid var(--qnx-line); } .qnx-sw-review-mark{ color:var(--qnx-green); font-size:52px; line-height:.45; font-weight:900; } .qnx-sw-review-card > p{ max-width:680px; margin:17px 0 25px; color:var(--qnx-dark); font-size:17px; line-height:1.45; font-weight:600; } .qnx-sw-review-footer{ display:flex; align-items:center; gap:10px; } .qnx-sw-avatar.large{ width:39px; height:39px; } .qnx-sw-review-footer strong{ display:block; color:var(--qnx-dark); font-size:10px; } .qnx-sw-review-footer small{ display:block; margin-top:2px; color:var(--qnx-muted); font-size:7px; } .qnx-sw-review-count{ margin-left:auto; color:var(--qnx-blue2); font-size:8px; font-weight:800; } /* ========================================================= SEO RESULTS ========================================================= */ .qnx-sw-seo-layout{ display:grid; grid-template-columns:.72fr 1.28fr; align-items:center; gap:42px; height:100%; padding:15px 45px; } .qnx-sw-seo-intro{ max-width:350px; } .qnx-sw-seo-stat{ display:flex; align-items:center; gap:10px; margin-top:20px; } .qnx-sw-seo-stat strong{ color:var(--qnx-blue2); font-size:48px; line-height:1; } .qnx-sw-seo-stat span{ color:var(--qnx-muted); font-size:8px; line-height:1.35; font-weight:700; } /* PREMIUM SEO TABLE */ .qnx-sw-ranking-box{ position:relative; overflow:hidden; border: 1px solid rgba(7,88,216,.12); border-radius:17px; background: rgba(255,255,255,.96); box-shadow: 0 18px 38px rgba(7,88,216,.07); } .qnx-sw-ranking-box::before{ content:""; position:absolute; top:0; left:0; width:4px; height:100%; background: linear-gradient( 180deg, var(--qnx-blue), var(--qnx-cyan), var(--qnx-green), var(--qnx-lime) ); } .qnx-sw-ranking-head{ display:grid; grid-template-columns:1fr 95px; align-items:center; min-height:39px; padding:0 18px; color:#fff; background: linear-gradient( 100deg, var(--qnx-blue), var(--qnx-cyan) ); font-size:8px; font-weight:900; letter-spacing:1px; } .qnx-sw-ranking-head span:last-child{ text-align:right; } .qnx-sw-ranking-page{ display:block; } .qnx-sw-ranking-row{ position:relative; display:grid; grid-template-columns:1fr 95px; align-items:center; min-height:49px; padding:0 18px; border-bottom: 1px solid rgba(7,88,216,.07); transition: background .25s ease, transform .25s ease; } .qnx-sw-ranking-row:last-child{ border-bottom:0; } .qnx-sw-ranking-row:hover{ background: linear-gradient( 90deg, rgba(8,168,207,.04), rgba(121,201,28,.05) ); transform:translateX(3px); } .qnx-sw-ranking-row span{ color:var(--qnx-text); font-size:10px; font-weight:700; } .qnx-sw-ranking-row strong{ position:relative; justify-self:end; min-width:37px; padding:5px 8px; border-radius:20px; color:var(--qnx-green); background: rgba(22,185,138,.09); text-align:center; font-size:9px; font-weight:900; } .qnx-sw-ranking-row strong::before{ content:""; display:inline-block; width:5px; height:5px; margin-right:5px; vertical-align:middle; border-radius:50%; background:var(--qnx-lime); box-shadow: 0 0 0 3px rgba(121,201,28,.10); } /* ========================================================= BOTTOM DOWN ARROW ONLY CHANGES ITEM INSIDE CURRENT PHASE ========================================================= */ .qnx-sw-bottom-navigation{ position:relative; z-index:5; display:flex; align-items:center; justify-content:center; gap:12px; margin-top:10px; } .qnx-sw-case-prev, .qnx-sw-case-next{ width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--qnx-line); border-radius:50%; color:var(--qnx-blue); background:#fff; cursor:pointer; font-size:16px; box-shadow: 0 6px 16px rgba(7,88,216,.07); transition:.3s ease; } .qnx-sw-case-prev:hover, .qnx-sw-case-next:hover{ color:#fff; background: linear-gradient( 135deg, var(--qnx-blue), var(--qnx-green) ); border-color:transparent; transform:scale(1.06); box-shadow: 0 9px 20px rgba(7,88,216,.16); } .qnx-sw-case-prev span, .qnx-sw-case-next span{ display:block; line-height:1; } /* COUNTER */ .qnx-sw-item-counter{ display:flex; align-items:center; gap:6px; color:var(--qnx-muted); font-size:8px; font-weight:700; letter-spacing:.5px; } .qnx-sw-counter-label{ color:var(--qnx-cyan); font-size:8px; font-weight:900; letter-spacing:1px; } .qnx-sw-item-counter strong{ color:var(--qnx-dark); font-size:11px; } .qnx-sw-item-counter i{ color:var(--qnx-muted); font-style:normal; } .qnx-sw-item-counter > span:last-child{ font-size:8px; } /* ========================================================= TABLET ========================================================= */ @media(max-width:1180px){ .qnx-sw-container{ width:min(100% - 45px,1100px); } .qnx-sw-showcase{ height:455px; min-height:455px; } .qnx-sw-case-grid{ grid-template-columns:.84fr 1.25fr .62fr; gap:18px; } .qnx-sw-laptop-screen{ height:245px; } .qnx-sw-case-content h3{ font-size:22px; } } /* ========================================================= TABLET / MOBILE ========================================================= */ @media(max-width:980px){ .qnx-selected-work{ padding:70px 0 50px; } .qnx-sw-heading{ align-items:flex-start; flex-direction:column; margin-bottom:25px; } .qnx-sw-heading-note{ display:none; } .qnx-sw-tabs-wrap{ overflow-x:auto; padding-bottom:4px; } .qnx-sw-tabs{ min-width:760px; } .qnx-sw-arrow{ display:none; } .qnx-sw-showcase{ height:auto; min-height:600px; } .qnx-sw-panel{ height:auto; min-height:600px; padding:24px; } .qnx-sw-case-grid{ grid-template-columns:1fr; height:auto; gap:25px; } .qnx-sw-case-content{ max-width:720px; margin:0 auto; } .qnx-sw-device-area{ max-width:700px; width:100%; margin:0 auto; } .qnx-sw-project-info{ max-width:700px; width:100%; margin:0 auto; } .qnx-sw-client-brand{ margin-top:5px; } .qnx-sw-metrics{ grid-template-columns:repeat(2,1fr); } .qnx-sw-video-grid, .qnx-sw-review-layout, .qnx-sw-seo-layout{ grid-template-columns:1fr; height:auto; min-height:550px; padding:20px; gap:28px; } .qnx-sw-video-player{ height:320px; } .qnx-sw-review-card{ padding:35px; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:620px){ .qnx-selected-work{ padding:65px 0 45px; } .qnx-sw-container{ width:calc(100% - 26px); } .qnx-sw-heading{ margin-bottom:25px; } .qnx-sw-heading h2{ font-size:38px; letter-spacing:-1.7px; } .qnx-sw-heading p{ font-size:13px; } .qnx-sw-tabs{ min-width:700px; } .qnx-sw-tab{ min-height:59px; padding:9px 11px; } .qnx-sw-tab-icon{ flex-basis:34px; width:34px; height:34px; } .qnx-sw-showcase{ min-height:650px; } .qnx-sw-panel{ min-height:650px; padding:17px; } .qnx-sw-case-content h3, .qnx-sw-video-content h3, .qnx-sw-review-intro h3, .qnx-sw-seo-intro h3{ font-size:25px; } .qnx-sw-laptop-screen{ height:210px; } .qnx-sw-laptop-base{ height:12px; } .qnx-sw-result-badge{ right:-4px; top:-7px; min-width:88px; padding:7px 9px; } .qnx-sw-result-badge strong{ font-size:16px; } .qnx-sw-video-player{ height:245px; } .qnx-sw-review-card{ padding:27px; } .qnx-sw-review-card > p{ font-size:17px; } .qnx-sw-ranking-head, .qnx-sw-ranking-row{ grid-template-columns:1fr 70px; } .qnx-sw-ranking-row{ padding:0 14px; } .qnx-sw-ranking-row span{ font-size:9px; } } /* ========================================================= QNIX DIGITAL — SECTION 7 - Results & Trust CSS ========================================================= */ /* ========================================================= QNIX DIGITAL — SECTION 8 - Client Perspective CSS ========================================================= */ /* ================================================================== QNIX DIGITAL — SECTION 9 - FINAL CTA / CONTACT SECTION CSS ================================================================== */ .qnx-final-cta{ position:relative; overflow:hidden; padding:88px 0 82px; background: radial-gradient( circle at 8% 20%, rgba(11,120,219,.22) 0%, rgba(11,120,219,.08) 25%, transparent 46% ), radial-gradient( circle at 88% 18%, rgba(16,164,180,.16) 0%, rgba(16,164,180,.06) 24%, transparent 44% ), radial-gradient( circle at 86% 90%, rgba(123,197,31,.10) 0%, rgba(123,197,31,.035) 22%, transparent 42% ), linear-gradient( 120deg, #03245f 0%, #043a91 24%, #0758d8 50%, #0869c9 72%, #087d91 100% ); border-top:1px solid rgba(255,255,255,.14); } /* ========================================================= BACKGROUND LAYER ========================================================= */ .qnx-final-cta-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; } /* ========================================================= PREMIUM ORBS ========================================================= */ .qnx-cta-orb{ position:absolute; border-radius:50%; pointer-events:none; filter:blur(4px); } .qnx-cta-orb-1{ width:460px; height:460px; left:-220px; top:-220px; background: radial-gradient( circle, rgba(11,120,219,.20) 0%, rgba(7,88,216,.08) 42%, transparent 70% ); } .qnx-cta-orb-2{ width:500px; height:500px; right:-240px; bottom:-260px; background: radial-gradient( circle, rgba(123,197,31,.12) 0%, rgba(16,164,180,.07) 40%, transparent 70% ); } /* ========================================================= PREMIUM TECH GRID ========================================================= */ .qnx-cta-grid{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.075; background-image: linear-gradient( rgba(255,255,255,.22) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.22) 1px, transparent 1px ); background-size:52px 52px; mask-image: linear-gradient( to bottom, transparent 0%, #000 18%, #000 82%, transparent 100% ); -webkit-mask-image: linear-gradient( to bottom, transparent 0%, #000 18%, #000 82%, transparent 100% ); } /* ========================================================= MAIN CONTAINER ========================================================= */ .qnx-final-cta-container{ position:relative; z-index:5; width:min(1220px,92%); margin:0 auto; display:grid; grid-template-columns: minmax(0,1fr) minmax(500px,.90fr); gap:78px; align-items:center; } /* ========================================================= LEFT CONTENT ========================================================= */ .qnx-final-content{ max-width:620px; } /* ========================================================= EYEBROW ========================================================= */ .qnx-final-eyebrow{ display:flex; align-items:center; gap:11px; margin-bottom:20px; color:#d8f77a; font-size:12px; font-weight:900; letter-spacing:2.7px; } .qnx-final-eyebrow span{ width:34px; height:2px; flex:0 0 34px; border-radius:20px; background: linear-gradient( 90deg, #d8f77a, rgba(255,255,255,.85) ); } /* ========================================================= MAIN HEADING ========================================================= */ .qnx-final-content h2{ margin:0; color:#ffffff; font-size:clamp( 52px, 5.5vw, 78px ); line-height:.94; letter-spacing:-4px; font-weight:900; text-wrap:balance; text-shadow: 0 8px 30px rgba(0,20,70,.24); } .qnx-final-content h2 span{ display:block; background: linear-gradient( 100deg, #ffffff 0%, #e8fbff 48%, #d8f77a 100% ); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ========================================================= DESCRIPTION ========================================================= */ .qnx-final-description{ max-width:540px; margin:26px 0 31px; color:rgba(255,255,255,.82); font-size:16px; line-height:1.72; } /* ========================================================= BENEFITS ========================================================= */ .qnx-final-points{ display:grid; gap:14px; } .qnx-final-point{ display:flex; align-items:center; gap:13px; } .qnx-point-icon{ flex:0 0 39px; width:39px; height:39px; display:grid; place-items:center; border-radius:11px; color:#d8f77a; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.17); box-shadow: 0 7px 20px rgba(0,35,100,.12); font-size:17px; font-weight:800; } .qnx-final-point strong{ display:block; color:#ffffff; font-size:13px; font-weight:850; } .qnx-final-point small{ display:block; margin-top:3px; color:rgba(255,255,255,.66); font-size:11px; } /* ========================================================= LIVE STATUS ========================================================= */ .qnx-final-note{ display:flex; align-items:center; gap:9px; margin-top:32px; color:rgba(255,255,255,.64); font-size:11px; font-weight:700; } .qnx-final-live-dot{ width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:#d8f77a; box-shadow: 0 0 0 5px rgba(216,247,122,.09), 0 0 14px rgba(216,247,122,.35); animation:qnxCtaPulse 2s infinite; } @keyframes qnxCtaPulse{ 0%, 100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.18); opacity:.72; } } /* ========================================================= FORM CARD ========================================================= */ .qnx-final-form-wrap{ position:relative; padding:30px; border:1px solid rgba(255,255,255,.30); border-radius:26px; background: linear-gradient( 145deg, #ffffff 0%, #f8fcff 100% ); box-shadow: 0 30px 75px rgba(0,30,90,.22), 0 8px 25px rgba(0,45,120,.10); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); } /* ========================================================= FORM PREMIUM TOP LINE ========================================================= */ .qnx-final-form-wrap::before{ content:""; position:absolute; left:25px; right:25px; top:0; height:3px; border-radius:20px; background: linear-gradient( 90deg, #0758d8, #0b78db, #10a4b4, #7bc51f, #b7e51c ); box-shadow: 0 0 18px rgba(16,164,180,.14); } /* ========================================================= FORM HEADER ========================================================= */ .qnx-form-topline{ display:flex; align-items:center; justify-content:space-between; padding-bottom:21px; border-bottom:1px solid #e3eaf4; } .qnx-form-topline span{ display:block; margin-bottom:6px; color:#10a4b4; font-size:9px; font-weight:900; letter-spacing:1.9px; } .qnx-form-topline strong{ display:block; color:#0d1730; font-size:21px; line-height:1.2; letter-spacing:-.3px; } /* ========================================================= FORM ARROW ========================================================= */ .qnx-form-arrow{ width:43px; height:43px; display:grid; place-items:center; flex:0 0 43px; border-radius:13px; color:#ffffff; background: linear-gradient( 135deg, #0758d8, #0b78db 45%, #10a4b4 ); font-size:19px; box-shadow: 0 9px 22px rgba(7,88,216,.18); } /* ========================================================= FORM BODY ========================================================= */ .qnx-final-form{ padding-top:21px; } /* ========================================================= FORM ROW ========================================================= */ .qnx-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:15px; } /* ========================================================= FORM FIELD ========================================================= */ .qnx-form-field{ margin-bottom:16px; } .qnx-form-field label{ display:block; margin-bottom:7px; color:#0d1730; font-size:10px; font-weight:850; } .qnx-form-field input, .qnx-form-field select, .qnx-form-field textarea{ width:100%; box-sizing:border-box; border:1px solid #d8e4f1; border-radius:11px; outline:none; background: linear-gradient( 180deg, #fbfdff, #f7fbff ); color:#0d1730; font-family:inherit; font-size:12px; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; } /* ========================================================= INPUTS ========================================================= */ .qnx-form-field input, .qnx-form-field select{ height:46px; padding:0 13px; } .qnx-form-field textarea{ min-height:112px; padding:13px; resize:vertical; line-height:1.55; } /* ========================================================= PLACEHOLDER ========================================================= */ .qnx-form-field input::placeholder, .qnx-form-field textarea::placeholder{ color:#91a0b4; } /* ========================================================= INPUT HOVER ========================================================= */ .qnx-form-field input:hover, .qnx-form-field select:hover, .qnx-form-field textarea:hover{ border-color:rgba(7,88,216,.22); } /* ========================================================= INPUT FOCUS ========================================================= */ .qnx-form-field input:focus, .qnx-form-field select:focus, .qnx-form-field textarea:focus{ border-color:rgba(7,88,216,.48); background:#ffffff; box-shadow: 0 0 0 3px rgba(7,88,216,.065), 0 5px 16px rgba(7,88,216,.045); } /* ========================================================= FORM BOTTOM ========================================================= */ .qnx-form-bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:3px; } .qnx-form-bottom p{ margin:0; max-width:200px; color:#5d6b84; font-size:9px; line-height:1.5; } /* ========================================================= SUBMIT BUTTON ========================================================= */ .qnx-final-submit{ display:inline-flex; align-items:center; justify-content:center; gap:13px; min-height:47px; padding:0 20px; border:0; border-radius:30px; cursor:pointer; color:#ffffff; background: linear-gradient( 100deg, #0758d8 0%, #0b78db 40%, #10a4b4 72%, #7bc51f 100% ); font-family:inherit; font-size:11px; font-weight:850; letter-spacing:.1px; box-shadow: 0 11px 27px rgba(7,88,216,.20); transition: transform .3s ease, box-shadow .3s ease, filter .3s ease; } .qnx-final-submit b{ display:grid; place-items:center; width:23px; height:23px; border-radius:50%; background:rgba(255,255,255,.18); font-size:14px; transition: transform .3s ease, background .3s ease; } .qnx-final-submit:hover{ transform:translateY(-3px); filter:saturate(1.06); box-shadow: 0 16px 32px rgba(7,88,216,.25); } .qnx-final-submit:hover b{ transform:translateX(3px); background:rgba(255,255,255,.23); } /* ========================================================= TABLET ========================================================= */ @media(max-width:980px){ .qnx-final-cta-container{ grid-template-columns:1fr; gap:48px; } .qnx-final-content{ max-width:720px; } .qnx-final-form-wrap{ max-width:700px; width:100%; box-sizing:border-box; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:620px){ .qnx-final-cta{ padding:64px 0 60px; } .qnx-final-cta-container{ width:min(92%,520px); } .qnx-final-content h2{ font-size:47px; letter-spacing:-2.7px; line-height:.95; } .qnx-final-description{ margin-top:21px; font-size:14px; line-height:1.68; } .qnx-final-point strong{ font-size:12px; } .qnx-final-point small{ font-size:10px; } .qnx-final-form-wrap{ padding:21px; border-radius:20px; } .qnx-form-row{ grid-template-columns:1fr; gap:0; } .qnx-form-topline strong{ font-size:19px; } .qnx-form-bottom{ align-items:stretch; flex-direction:column; } .qnx-form-bottom p{ max-width:none; } .qnx-final-submit{ width:100%; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media(max-width:420px){ .qnx-final-content h2{ font-size:42px; letter-spacing:-2.3px; } .qnx-final-description{ font-size:13px; } .qnx-final-form-wrap{ padding:18px; } .qnx-form-topline{ padding-bottom:17px; } .qnx-form-arrow{ width:39px; height:39px; flex-basis:39px; } } /* ========================================================= QNIX CTA — PREMIUM BLUE GLASS BACKGROUND ========================================================= */ section.qnx-final-cta, .qnx-final-cta{ background-color:#052b68 !important; background-image: radial-gradient( circle at 18% 28%, rgba(7,88,216,.38) 0%, rgba(7,88,216,.14) 24%, transparent 48% ), radial-gradient( circle at 78% 20%, rgba(16,164,180,.22) 0%, rgba(16,164,180,.07) 25%, transparent 46% ), radial-gradient( circle at 92% 82%, rgba(123,197,31,.13) 0%, rgba(123,197,31,.035) 22%, transparent 40% ), linear-gradient( 120deg, #031f50 0%, #063b91 25%, #0758d8 48%, #0874c9 68%, #087f91 100% ) !important; background-blend-mode:normal !important; } /* Subtle premium light */ .qnx-final-cta::before, .qnx-final-cta::after{ background:transparent !important; } /* Background layer */ .qnx-final-cta .qnx-final-cta-bg{ background:transparent !important; } /* Premium glow */ .qnx-final-cta .qnx-cta-orb-1{ background: radial-gradient( circle, rgba(72,164,255,.18), rgba(7,88,216,.06) 42%, transparent 72% ) !important; } .qnx-final-cta .qnx-cta-orb-2{ background: radial-gradient( circle, rgba(216,247,122,.10), rgba(16,164,180,.06) 40%, transparent 72% ) !important; } /* Fine tech grid */ .qnx-final-cta .qnx-cta-grid{ opacity:.055 !important; background-image: linear-gradient( rgba(255,255,255,.20) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.20) 1px, transparent 1px ) !important; background-size:54px 54px !important; } /* Keep form card clean */ .qnx-final-cta .qnx-final-form-wrap{ background: linear-gradient( 145deg, #ffffff 0%, #f8fcff 100% ) !important; } /* ================================================================== QNIX DIGITAL — SECTION 10 - PARTNERS WE WORK WITH CSS ================================================================== */ .qnx-partner-strip{ position:relative; width:100%; min-height:154px; padding:28px 0; overflow:hidden; background: linear-gradient( 180deg, #ffffff 0%, #f8fbff 100% ); border-top:1px solid #e8eef7; border-bottom:1px solid #dce7f4; } /* ========================================================= BACKGROUND ========================================================= */ .qnx-partner-strip::before{ content:""; position:absolute; inset:0; background: linear-gradient( 90deg, transparent 0%, rgba(7,88,216,.035) 50%, transparent 100% ); pointer-events:none; } .qnx-partner-strip::after{ content:""; position:absolute; width:520px; height:180px; left:50%; top:50%; transform:translate(-50%,-50%); background: radial-gradient( ellipse, rgba(16,164,180,.055), transparent 68% ); pointer-events:none; } /* ========================================================= MAIN CONTAINER ========================================================= */ .qnx-partner-strip-inner{ position:relative; z-index:2; width:min(1460px,92%); min-height:98px; margin:auto; display:flex; align-items:center; gap:34px; } /* ========================================================= LEFT LABEL ========================================================= */ .qnx-partner-strip-label{ position:relative; flex:0 0 220px; display:flex; align-items:center; gap:13px; } /* Vertical divider */ .qnx-partner-strip-label::after{ content:""; position:absolute; right:-17px; top:50%; width:1px; height:42px; transform:translateY(-50%); background: linear-gradient( 180deg, transparent, #cbdced, transparent ); } /* Green live indicator */ .qnx-partner-live{ position:relative; width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:#7bc51f; box-shadow: 0 0 0 4px rgba(123,197,31,.10); } .qnx-partner-live::after{ content:""; position:absolute; inset:-4px; border:1px solid rgba(123,197,31,.20); border-radius:50%; animation:qnxPartnerPulse 2.5s ease-in-out infinite; } /* Label typography */ .qnx-partner-strip-label small{ display:block; margin-bottom:5px; color:#7b879a; font-size:8px; font-weight:800; letter-spacing:2px; line-height:1; } .qnx-partner-strip-label strong{ display:block; color:#062d7a; font-size:13px; font-weight:850; letter-spacing:.4px; line-height:1.25; } /* ========================================================= PARTNER RAIL ========================================================= */ .qnx-partner-logos{ position:relative; flex:1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 5px; } /* Horizontal connection rail */ .qnx-partner-logos::before{ content:""; position:absolute; left:25px; right:25px; top:50%; height:1px; transform:translateY(-50%); background: linear-gradient( 90deg, transparent, #d6e5f5 10%, #c9dced 50%, #d6e5f5 90%, transparent ); z-index:0; } /* ========================================================= PARTNER CARD ========================================================= */ .qnx-partner-logo{ position:relative; z-index:2; width:158px; height:70px; flex:0 1 158px; display:flex; align-items:center; justify-content:center; padding:8px 12px; border-radius:14px; border:1px solid rgba(7,88,216,.14); background: linear-gradient( 145deg, #0b78db 0%, #0758d8 55%, #10a4b4 100% ); box-shadow: 0 7px 20px rgba(17,55,110,.10), inset 0 1px 0 rgba(255,255,255,.22); transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease; } /* Remove bottom connector point */ .qnx-partner-logo::before{ display:none !important; } /* Subtle card highlight */ .qnx-partner-logo::after{ content:""; position:absolute; width:100px; height:100px; top:-65px; right:-55px; border-radius:50%; background: radial-gradient( circle, rgba(255,255,255,.12), transparent 68% ); pointer-events:none; } /* ========================================================= REMOVE 01 / 02 / 03 / 04 / 05 / 06 ========================================================= */ .qnx-partner-logo span{ display:none !important; } /* ========================================================= PARTNER IMAGE ========================================================= */ .qnx-partner-logo img{ position:relative; z-index:2; display:block; width:auto; max-width:132px; max-height:45px; object-fit:contain; opacity:1; filter:none; transition: transform .32s ease; } /* ========================================================= HOVER ========================================================= */ .qnx-partner-logo:hover{ transform: translateY(-5px) scale(1.025); border-color: rgba(183,229,28,.45); box-shadow: 0 15px 30px rgba(17,55,110,.14), 0 0 0 3px rgba(16,164,180,.045), inset 0 1px 0 rgba(255,255,255,.25); } .qnx-partner-logo:hover img{ transform:scale(1.08); } /* ========================================================= RIGHT SIGNAL ========================================================= */ .qnx-partner-strip-end{ flex:0 0 38px; display:flex; align-items:center; justify-content:center; gap:4px; } .qnx-partner-strip-end span{ width:4px; height:4px; border-radius:50%; background:#10a4b4; opacity:.55; } .qnx-partner-strip-end i{ width:16px; height:1px; display:block; background: linear-gradient( 90deg, rgba(16,164,180,.20), #7bc51f, rgba(16,164,180,.20) ); opacity:.7; animation:qnxPartnerSignal 2.3s ease-in-out infinite; } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes qnxPartnerPulse{ 0%,100%{ transform:scale(.85); opacity:.4; } 50%{ transform:scale(1.1); opacity:1; } } @keyframes qnxPartnerSignal{ 0%,100%{ opacity:.3; transform:scaleX(.7); } 50%{ opacity:.9; transform:scaleX(1); } } /* ========================================================= LARGE DESKTOP ========================================================= */ @media (min-width:1500px){ .qnx-partner-strip-inner{ width:min(1520px,92%); gap:38px; } .qnx-partner-strip-label{ flex-basis:235px; } .qnx-partner-logo{ width:170px; height:72px; flex-basis:170px; } .qnx-partner-logo img{ max-width:142px; max-height:48px; } } /* ========================================================= LAPTOP ========================================================= */ @media (max-width:1200px){ .qnx-partner-strip-inner{ width:94%; gap:24px; } .qnx-partner-strip-label{ flex-basis:185px; } .qnx-partner-logo{ width:140px; height:64px; flex-basis:140px; } .qnx-partner-logo img{ max-width:112px; max-height:38px; } .qnx-partner-strip-end{ display:none; } } /* ========================================================= TABLET ========================================================= */ @media (max-width:950px){ .qnx-partner-strip{ padding:24px 0; } .qnx-partner-strip-inner{ display:block; } .qnx-partner-strip-label{ justify-content:center; margin-bottom:20px; } .qnx-partner-strip-label::after{ display:none; } .qnx-partner-logos{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; padding:0; } .qnx-partner-logos::before{ display:none; } .qnx-partner-logo{ width:100%; height:64px; flex:none; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:768px){ .qnx-partner-strip{ min-height:auto; padding:22px 0; } .qnx-partner-strip-inner{ width:90%; } .qnx-partner-strip-label{ gap:10px; margin-bottom:17px; } .qnx-partner-strip-label small{ font-size:7px; letter-spacing:1.6px; } .qnx-partner-strip-label strong{ font-size:12px; } .qnx-partner-logos{ grid-template-columns: repeat(3,1fr); gap:9px; } .qnx-partner-logo{ height:58px; padding:7px 5px; border-radius:11px; } .qnx-partner-logo img{ max-width:92px; max-height:34px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px){ .qnx-partner-strip{ padding:20px 0; } .qnx-partner-strip-label{ margin-bottom:15px; } .qnx-partner-strip-label strong{ font-size:11px; } .qnx-partner-logos{ grid-template-columns: repeat(2,1fr); gap:8px; } .qnx-partner-logo{ height:57px; } .qnx-partner-logo img{ max-width:100px; max-height:35px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion:reduce){ .qnx-partner-live::after, .qnx-partner-strip-end i{ animation:none; } .qnx-partner-logo, .qnx-partner-logo img{ transition:none; } } /* ========================================================= QNIX DIGITAL — INNER PAGE HERO FULL QNIX BRAND COLOR BACKGROUND ========================================================= */ .qnix-inner-hero{ position:relative; width:100%; min-height:215px; display:flex; align-items:center; justify-content:center; overflow:hidden; isolation:isolate; background: linear-gradient( 135deg, #0758d8 0%, #087ee7 20%, #10a4b4 42%, #16b98a 63%, #5dc43b 80%, #79c91c 92%, #b7e51c 100% ); } /* Premium depth over the gradient */ .qnix-inner-hero::before{ content:""; position:absolute; inset:0; z-index:0; background: radial-gradient( circle at 15% 20%, rgba(255,255,255,.12), transparent 28% ), radial-gradient( circle at 82% 75%, rgba(255,255,255,.08), transparent 30% ), linear-gradient( 110deg, rgba(2,25,70,.18), transparent 38%, rgba(2,25,70,.08) ); pointer-events:none; } /* Subtle technical grid */ .qnix-inner-hero-grid{ position:absolute; inset:0; z-index:1; opacity:.10; background-image: linear-gradient( rgba(255,255,255,.32) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.32) 1px, transparent 1px ); background-size:64px 64px; pointer-events:none; } /* ========================================================= TITLE ========================================================= */ .qnix-inner-hero-content{ position:relative; z-index:5; width:min(1180px, calc(100% - 70px)); display:flex; align-items:center; justify-content:center; gap:22px; } .qnix-inner-hero-line{ width:55px; height:1px; flex:0 0 55px; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.85) ); } .qnix-inner-hero-line-right{ background: linear-gradient( 90deg, rgba(255,255,255,.85), transparent ); } .qnix-inner-hero h1{ margin:0; color:#fff; font-size:clamp(30px, 3.8vw, 48px); font-weight:800; line-height:1; letter-spacing:.065em; text-align:center; white-space:nowrap; text-shadow: 0 7px 24px rgba(0,25,70,.25); } /* Bottom premium accent */ .qnix-inner-hero::after{ content:""; position:absolute; left:50%; bottom:0; width:150px; height:2px; transform:translateX(-50%); background: linear-gradient( 90deg, transparent, #fff, transparent ); opacity:.75; z-index:4; } /* ========================================================= TABLET ========================================================= */ @media(max-width:991px){ .qnix-inner-hero{ min-height:200px; } .qnix-inner-hero-content{ width:calc(100% - 50px); gap:17px; } .qnix-inner-hero-line{ width:42px; flex-basis:42px; } .qnix-inner-hero h1{ font-size:clamp(28px, 5vw, 40px); } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:600px){ .qnix-inner-hero{ min-height:170px; } .qnix-inner-hero-content{ width:calc(100% - 30px); gap:10px; } .qnix-inner-hero-line{ width:22px; flex-basis:22px; } .qnix-inner-hero h1{ font-size:clamp(20px, 6vw, 30px); letter-spacing:.045em; white-space:normal; line-height:1.15; overflow-wrap:break-word; } .qnix-inner-hero-grid{ background-size:50px 50px; } } /* ========================================================= QNIX DIGITAL — ABOUT US PREMIUM PAGE CSS ========================================================= */ .qnix-about-container{ width:min(1280px, calc(100% - 12vw)); margin:0 auto; } .qnix-about-intro, .qnix-about-approach, .qnix-about-capabilities, .qnix-about-mission, .qnix-about-closing{ position:relative; width:100%; overflow:hidden; } /* ========================================================= KICKER ========================================================= */ .qnix-about-kicker{ display:flex; align-items:center; gap:10px; color:#0758d8; font-size:10px; font-weight:900; letter-spacing:2px; } .qnix-about-kicker span{ width:27px; height:2px; background:linear-gradient( 90deg, #0758d8, #16b98a ); } /* ========================================================= INTRO ========================================================= */ .qnix-about-intro{ padding:90px 6vw; background:#fff; } .qnix-about-intro-grid{ display:grid; grid-template-columns:1fr 1fr; gap:75px; align-items:center; } .qnix-about-intro-copy{ max-width:600px; } .qnix-about-intro-copy h2{ margin:20px 0 25px; color:#0d1730; font-size:clamp(45px,5vw,72px); line-height:.96; letter-spacing:-3.5px; } .qnix-about-intro-copy h2 em{ display:block; font-style:normal; font-weight:800; background:linear-gradient( 90deg, #0758d8, #087ee7, #10a4b4 ); -webkit-background-clip:text; background-clip:text; color:transparent; } .qnix-about-intro-lead{ max-width:570px; margin:0 0 15px; color:#20345c; font-size:20px; line-height:1.55; font-weight:600; } .qnix-about-intro-text{ max-width:560px; margin:0; color:#68778e; font-size:14px; line-height:1.85; } /* BUTTON */ .qnix-about-btn{ display:inline-flex; align-items:center; gap:15px; margin-top:26px; padding:15px 21px; background:#0758d8; color:#fff; border-radius:4px; text-decoration:none; font-size:10px; font-weight:900; letter-spacing:1.5px; transition:.3s ease; } .qnix-about-btn span{ font-size:18px; } .qnix-about-btn:hover{ background:#062d7a; transform:translateY(-3px); box-shadow: 0 15px 35px rgba(7,88,216,.22); } /* ========================================================= BLUEPRINT VISUAL ========================================================= */ .qnix-about-blueprint{ position:relative; height:475px; padding:18px; border-radius:18px; overflow:hidden; background: linear-gradient( 135deg, #062d7a 0%, #0758d8 44%, #087ee7 72%, #10a4b4 100% ); box-shadow: 0 30px 80px rgba(6,45,122,.20); } .qnix-blueprint-header, .qnix-blueprint-footer{ position:relative; z-index:5; display:flex; justify-content:space-between; color:rgba(255,255,255,.68); font-size:8px; font-weight:900; letter-spacing:1.8px; } .qnix-blueprint-header span:last-child{ color:#b7e51c; } .qnix-blueprint-footer{ position:absolute; left:18px; right:18px; bottom:18px; } /* CANVAS */ .qnix-blueprint-canvas{ position:absolute; top:55px; left:18px; right:18px; bottom:48px; overflow:hidden; } .qnix-blueprint-grid{ position:absolute; inset:0; opacity:.15; background-image: linear-gradient( rgba(255,255,255,.55) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.55) 1px, transparent 1px ); background-size:42px 42px; } /* FRAMES */ .qnix-blueprint-frame{ position:absolute; left:50%; top:50%; border:1px solid rgba(255,255,255,.2); transform:translate(-50%,-50%) rotate(45deg); } .frame-one{ width:235px; height:235px; } .frame-two{ width:160px; height:160px; border-color:rgba(183,229,28,.5); animation:qnixBlueprintRotate 14s linear infinite; } @keyframes qnixBlueprintRotate{ from{ transform:translate(-50%,-50%) rotate(45deg); } to{ transform:translate(-50%,-50%) rotate(405deg); } } /* CROSS */ .qnix-blueprint-cross{ position:absolute; left:50%; top:50%; background:rgba(255,255,255,.22); } .cross-one{ width:1px; height:100%; transform:translateX(-50%); } .cross-two{ width:100%; height:1px; transform:translateY(-50%); } /* CENTER */ .qnix-blueprint-center{ position:absolute; left:50%; top:50%; width:100px; height:100px; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; background: radial-gradient( circle, rgba(255,255,255,.20), rgba(255,255,255,.04) 70% ); border:1px solid rgba(255,255,255,.3); box-shadow: 0 0 50px rgba(255,255,255,.12); } .qnix-blueprint-center span{ color:#fff; font-size:36px; font-weight:900; } .qnix-blueprint-center small{ margin-top:2px; color:#b7e51c; font-size:7px; font-weight:900; letter-spacing:2px; } /* LABELS */ .qnix-blueprint-label{ position:absolute; display:flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid rgba(255,255,255,.24); border-radius:4px; background:rgba(6,45,122,.35); backdrop-filter:blur(8px); color:#fff; } .qnix-blueprint-label b{ color:#b7e51c; font-size:8px; } .qnix-blueprint-label span{ font-size:8px; font-weight:900; letter-spacing:1px; } .label-top{ top:8%; left:50%; transform:translateX(-50%); } .label-right{ right:3%; top:50%; transform:translateY(-50%); } .label-bottom{ bottom:8%; left:50%; transform:translateX(-50%); } .label-left{ left:3%; top:50%; transform:translateY(-50%); } /* SIGNAL */ .qnix-blueprint-signal{ position:absolute; left:50%; bottom:2%; transform:translateX(-50%); display:flex; align-items:center; gap:7px; padding:7px 11px; border-radius:30px; background:rgba(255,255,255,.1); color:rgba(255,255,255,.72); white-space:nowrap; font-size:7px; font-weight:900; letter-spacing:1px; } .qnix-blueprint-signal i{ width:6px; height:6px; border-radius:50%; background:#b7e51c; box-shadow: 0 0 12px #b7e51c; } /* ========================================================= APPROACH ========================================================= */ .qnix-about-approach{ padding:90px 6vw; background:#f4f8ff; } .qnix-about-heading-row{ display:grid; grid-template-columns:1.15fr .85fr; gap:80px; align-items:end; } .qnix-about-heading-row h2{ margin:18px 0 0; color:#0d1730; font-size:clamp(38px,4vw,58px); line-height:1; letter-spacing:-2.5px; } .qnix-about-heading-row h2 strong{ display:block; color:#0758d8; } .qnix-about-heading-row > p{ margin:0; color:#66758c; font-size:14px; line-height:1.85; } /* THINKING */ .qnix-about-thinking{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:55px; border-top:1px solid #d8e4f1; } .qnix-about-thinking article{ min-height:280px; padding:24px; border-right:1px solid #d8e4f1; transition:.35s ease; } .qnix-about-thinking article:first-child{ border-left:1px solid #d8e4f1; } .qnix-about-thinking article:hover{ background:#fff; transform:translateY(-5px); box-shadow: 0 20px 45px rgba(17,55,110,.08); } .qnix-thinking-number{ color:#8999b2; font-size:9px; font-weight:900; } .qnix-thinking-symbol{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; margin-top:32px; border:1px solid #c8d9eb; color:#0758d8; font-size:18px; transition:.3s ease; } .qnix-about-thinking article:hover .qnix-thinking-symbol{ background:#0758d8; color:#fff; border-color:#0758d8; } .qnix-about-thinking h3{ margin:25px 0 14px; color:#0d1730; font-size:19px; line-height:1.12; } .qnix-about-thinking h3 strong{ color:#0758d8; } .qnix-about-thinking p{ margin:0; color:#6d7c92; font-size:12px; line-height:1.75; } /* ========================================================= CAPABILITIES ========================================================= */ .qnix-about-capabilities{ padding:95px 6vw; background:#fff; } .qnix-capabilities-intro{ max-width:650px; } .qnix-capabilities-intro h2{ margin:18px 0 20px; color:#0d1730; font-size:clamp(39px,4vw,58px); line-height:.98; letter-spacing:-2.5px; } .qnix-capabilities-intro h2 strong{ display:block; color:#0758d8; } .qnix-capabilities-intro p{ max-width:540px; margin:0; color:#69788f; font-size:14px; line-height:1.8; } /* LIST */ .qnix-about-capability-list{ margin-top:55px; border-top:1px solid #dbe5f0; } .qnix-about-capability{ display:grid; grid-template-columns:55px 1fr 38px; min-height:94px; align-items:center; gap:20px; border-bottom:1px solid #dbe5f0; transition:.3s ease; } .qnix-about-capability:hover{ padding-left:12px; border-bottom-color:#0758d8; } .qnix-capability-id{ color:#8a9ab4; font-size:9px; font-weight:900; } .qnix-capability-main h3{ margin:0 0 5px; color:#0d1730; font-size:19px; } .qnix-capability-main p{ margin:0; color:#748197; font-size:11px; } .qnix-capability-arrow{ width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:1px solid #d4e0ec; color:#0758d8; transition:.3s ease; } .qnix-about-capability:hover .qnix-capability-arrow{ background:#0758d8; border-color:#0758d8; color:#fff; } /* ========================================================= MISSION ========================================================= */ .qnix-about-mission{ padding:85px 6vw; color:#fff; background: linear-gradient( 125deg, #062d7a 0%, #0758d8 48%, #087ee7 75%, #10a4b4 100% ); } .qnix-about-mission-lines{ position:absolute; inset:0; opacity:.11; background-image: linear-gradient( rgba(255,255,255,.6) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.6) 1px, transparent 1px ); background-size:55px 55px; } .qnix-about-mission-layout{ position:relative; z-index:2; display:grid; grid-template-columns:150px 1fr; gap:70px; } .qnix-mission-side{ display:flex; justify-content:space-between; padding-top:10px; border-top:1px solid rgba(255,255,255,.3); color:rgba(255,255,255,.68); font-size:8px; font-weight:900; letter-spacing:1.8px; } .qnix-mission-side b{ color:#b7e51c; } .qnix-mission-main{ max-width:900px; } .qnix-mission-word{ margin-bottom:20px; color:#b7e51c; font-size:10px; font-weight:900; letter-spacing:3px; } .qnix-mission-main h2{ margin:0 0 24px; color:#fff; font-size:clamp(39px,4.8vw,66px); line-height:.98; letter-spacing:-3px; } .qnix-mission-main h2 strong{ display:block; color:#b7e51c; } .qnix-mission-main p{ max-width:650px; margin:0; color:rgba(255,255,255,.75); font-size:14px; line-height:1.85; } /* ========================================================= CLOSING ========================================================= */ .qnix-about-closing{ padding:90px 6vw; background: linear-gradient( 135deg, #062d7a, #0758d8 48%, #087ee7 78%, #10a4b4 ); } .qnix-about-closing-grid{ position:absolute; inset:0; opacity:.1; background-image: linear-gradient( rgba(255,255,255,.7) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.7) 1px, transparent 1px ); background-size:60px 60px; } .qnix-about-closing-content{ position:relative; z-index:2; max-width:900px; margin:auto; text-align:center; } .qnix-closing-label{ margin-bottom:18px; color:#b7e51c; font-size:9px; font-weight:900; letter-spacing:2px; } .qnix-about-closing h2{ margin:0 0 22px; color:#fff; font-size:clamp(43px,5vw,70px); line-height:.98; letter-spacing:-3px; } .qnix-about-closing h2 strong{ display:block; color:#b7e51c; } .qnix-about-closing p{ max-width:600px; margin:0 auto 30px; color:rgba(255,255,255,.75); font-size:14px; line-height:1.8; } .qnix-about-closing-btn{ display:inline-flex; align-items:center; gap:14px; padding:16px 23px; background:#fff; color:#0758d8; border-radius:4px; text-decoration:none; font-size:10px; font-weight:900; letter-spacing:1.5px; transition:.3s ease; } .qnix-about-closing-btn span{ font-size:18px; } .qnix-about-closing-btn:hover{ background:#b7e51c; color:#062d7a; transform:translateY(-4px); box-shadow: 0 15px 35px rgba(0,0,0,.18); } /* ========================================================= TABLET ========================================================= */ @media(max-width:1050px){ .qnix-about-intro-grid{ grid-template-columns:1fr; gap:55px; } .qnix-about-intro-copy{ max-width:760px; } .qnix-about-blueprint{ max-width:760px; } .qnix-about-heading-row{ grid-template-columns:1fr; gap:25px; } .qnix-about-thinking{ grid-template-columns:repeat(2,1fr); } .qnix-about-thinking article:nth-child(2){ border-right:0; } .qnix-about-thinking article:nth-child(n+3){ border-top:1px solid #d8e4f1; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:700px){ .qnix-about-container{ width:calc(100% - 44px); } .qnix-about-intro{ padding:65px 22px; } .qnix-about-intro-copy h2{ font-size:42px; letter-spacing:-2px; } .qnix-about-intro-lead{ font-size:18px; } .qnix-about-blueprint{ height:390px; padding:14px; } .qnix-blueprint-canvas{ top:50px; left:14px; right:14px; bottom:43px; } .frame-one{ width:205px; height:205px; } .frame-two{ width:140px; height:140px; } .qnix-blueprint-center{ width:88px; height:88px; } .qnix-blueprint-center span{ font-size:30px; } .qnix-blueprint-label{ padding:7px 8px; } .qnix-blueprint-label span{ font-size:7px; } .label-left{ left:0; } .label-right{ right:0; } .qnix-about-approach{ padding:65px 22px; } .qnix-about-heading-row h2{ font-size:39px; letter-spacing:-2px; } .qnix-about-thinking{ grid-template-columns:1fr; } .qnix-about-thinking article, .qnix-about-thinking article:first-child{ border-left:1px solid #d8e4f1; border-right:1px solid #d8e4f1; } .qnix-about-thinking article + article{ border-top:1px solid #d8e4f1; } .qnix-about-capabilities{ padding:65px 22px; } .qnix-capabilities-intro h2{ font-size:40px; letter-spacing:-2px; } .qnix-about-capability{ grid-template-columns:36px 1fr 30px; gap:10px; } .qnix-capability-main h3{ font-size:15px; } .qnix-capability-main p{ font-size:10px; line-height:1.5; } .qnix-about-mission{ padding:65px 22px; } .qnix-about-mission-layout{ grid-template-columns:1fr; gap:30px; } .qnix-mission-main h2{ font-size:40px; letter-spacing:-2px; } .qnix-about-closing{ padding:70px 22px; } .qnix-about-closing h2{ font-size:42px; letter-spacing:-2px; } } /* ========================================================= QNIX DIGITAL — WHY CHOOSE US UNIQUE PAGE DESIGN ========================================================= */ .qnix-why-wrap{ width:min(1240px, calc(100% - 10vw)); margin:0 auto; } .qnix-why-opening, .qnix-why-matrix, .qnix-why-model, .qnix-why-trust, .qnix-why-final{ position:relative; overflow:hidden; } /* ========================================================= COMMON EYEBROW ========================================================= */ .qnix-why-eyebrow{ display:inline-flex; align-items:center; gap:10px; color:#0758d8; font-size:10px; font-weight:900; letter-spacing:2px; } .qnix-why-eyebrow::before{ content:""; width:27px; height:2px; background:linear-gradient( 90deg, #0758d8, #16b98a ); } /* ========================================================= SECTION 01 — OPENING ========================================================= */ .qnix-why-opening{ padding:82px 0; background:#fff; } .qnix-why-opening .qnix-why-wrap{ display:grid; grid-template-columns:1.15fr .85fr; gap:90px; align-items:center; } .qnix-why-opening-left h2{ max-width:700px; margin:18px 0 0; color:#0d1730; font-size:clamp(48px,5.4vw,76px); line-height:.94; letter-spacing:-4px; } .qnix-why-opening-left h2 span{ display:block; background:linear-gradient( 90deg, #0758d8, #087ee7, #10a4b4 ); -webkit-background-clip:text; background-clip:text; color:transparent; } .qnix-why-opening-right{ padding-left:35px; border-left:2px solid #dce7f3; } .qnix-why-opening-lead{ margin:0 0 18px; color:#24385d; font-size:18px; line-height:1.65; font-weight:600; } .qnix-why-opening-right p:last-child{ margin:0; color:#718097; font-size:13px; line-height:1.85; } /* ========================================================= SECTION 02 — ADVANTAGE MATRIX ========================================================= */ .qnix-why-matrix{ padding:90px 0; background:#f4f8ff; } .qnix-why-matrix-head{ display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:45px; } .qnix-why-matrix-head h2{ margin:18px 0 0; color:#0d1730; font-size:clamp(40px,4.5vw,60px); line-height:.96; letter-spacing:-3px; } .qnix-why-matrix-head h2 span{ color:#0758d8; } .qnix-why-matrix-index{ display:flex; align-items:end; gap:12px; padding-bottom:4px; } .qnix-why-matrix-index strong{ color:#0758d8; font-size:42px; line-height:1; letter-spacing:-2px; } .qnix-why-matrix-index span{ color:#8797ae; font-size:8px; font-weight:900; letter-spacing:1.5px; } /* MATRIX BOARD */ .qnix-why-matrix-board{ position:relative; overflow:hidden; border:1px solid #d3e0ed; background:#fff; box-shadow:0 25px 60px rgba(17,55,110,.08); } .qnix-why-matrix-top{ display:flex; justify-content:space-between; padding:15px 22px; border-bottom:1px solid #dce6f0; color:#8a9ab0; font-size:8px; font-weight:900; letter-spacing:1.7px; } .qnix-why-matrix-top span:last-child{ color:#0758d8; } /* FEATURE */ .qnix-why-feature{ position:relative; display:grid; grid-template-columns:65px 1fr 75px; gap:25px; align-items:center; min-height:145px; padding:24px 25px; border-bottom:1px solid #dce6f0; transition:.35s ease; } .qnix-why-feature:hover{ background:#f7fbff; } .qnix-why-feature-main{ background:#fff; } .qnix-why-feature-number{ align-self:start; padding-top:4px; color:#8798b0; font-size:10px; font-weight:900; letter-spacing:1px; } .qnix-why-feature-content span{ display:block; margin-bottom:8px; color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1.8px; } .qnix-why-feature-content h3{ margin:0 0 8px; color:#0d1730; font-size:25px; line-height:1.05; letter-spacing:-.8px; } .qnix-why-feature-content h3 em{ color:#0758d8; font-style:normal; } .qnix-why-feature-content p{ max-width:650px; margin:0; color:#718097; font-size:11px; line-height:1.7; } .qnix-why-feature-symbol{ width:45px; height:45px; display:flex; align-items:center; justify-content:center; justify-self:end; border:1px solid #cddcea; color:#0758d8; font-size:18px; transition:.3s ease; } .qnix-why-feature:hover .qnix-why-feature-symbol{ background:#0758d8; border-color:#0758d8; color:#fff; } /* FIRST FEATURE SPECIAL MARK */ .qnix-why-feature-mark{ justify-self:end; display:flex; align-items:end; gap:5px; height:45px; } .qnix-why-feature-mark i{ display:block; width:5px; background:#0758d8; } .qnix-why-feature-mark i:nth-child(1){ height:18px; opacity:.4; } .qnix-why-feature-mark i:nth-child(2){ height:31px; opacity:.7; } .qnix-why-feature-mark i:nth-child(3){ height:45px; background:#79c91c; } /* MATRIX FOOTER */ .qnix-why-matrix-footer{ display:flex; justify-content:space-between; gap:15px; padding:16px 22px; background:#062d7a; color:rgba(255,255,255,.62); font-size:7px; font-weight:900; letter-spacing:1.5px; } .qnix-why-matrix-footer span:nth-child(3){ color:#b7e51c; } /* ========================================================= SECTION 03 — WORKING MODEL ========================================================= */ .qnix-why-model{ padding:95px 0; background:#fff; } .qnix-why-model-intro{ max-width:650px; } .qnix-why-model-intro h2{ margin:18px 0 20px; color:#0d1730; font-size:clamp(42px,4.5vw,60px); line-height:.96; letter-spacing:-3px; } .qnix-why-model-intro h2 span{ display:block; color:#0758d8; } .qnix-why-model-intro p{ max-width:580px; margin:0; color:#718097; font-size:13px; line-height:1.85; } /* PROCESS */ .qnix-why-process{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:25px; margin-top:70px; } .qnix-why-process-line{ position:absolute; top:25px; left:7%; right:7%; height:1px; background:linear-gradient( 90deg, #0758d8, #10a4b4, #79c91c ); } .qnix-why-process-item{ position:relative; z-index:2; } .qnix-why-process-dot{ width:51px; height:51px; display:flex; align-items:center; justify-content:center; margin-bottom:25px; border:1px solid #0758d8; border-radius:50%; background:#fff; color:#0758d8; font-size:9px; font-weight:900; } .qnix-why-process-item:nth-child(3) .qnix-why-process-dot{ border-color:#10a4b4; color:#10a4b4; } .qnix-why-process-item:nth-child(4) .qnix-why-process-dot{ border-color:#79c91c; color:#5b970e; } .qnix-why-process-card{ padding:25px 22px; border:1px solid #dce6f0; min-height:175px; transition:.3s ease; } .qnix-why-process-card:hover{ transform:translateY(-6px); border-color:#0758d8; box-shadow:0 18px 40px rgba(17,55,110,.08); } .qnix-why-process-card small{ color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1.7px; } .qnix-why-process-card h3{ margin:13px 0 10px; color:#0d1730; font-size:21px; } .qnix-why-process-card p{ margin:0; color:#718097; font-size:11px; line-height:1.7; } /* ========================================================= SECTION 04 — TRUST ========================================================= */ .qnix-why-trust{ padding:90px 0; background:#f4f8ff; } .qnix-why-trust-layout{ display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; align-items:start; } .qnix-why-trust-intro{ position:sticky; top:30px; } .qnix-why-trust-intro h2{ margin:18px 0 20px; color:#0d1730; font-size:clamp(40px,4vw,56px); line-height:.98; letter-spacing:-2.7px; } .qnix-why-trust-intro h2 span{ display:block; color:#0758d8; } .qnix-why-trust-intro p{ max-width:450px; margin:0; color:#718097; font-size:13px; line-height:1.85; } /* TRUST GRID */ .qnix-why-trust-grid{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #d5e1ed; border-left:1px solid #d5e1ed; } .qnix-why-trust-item{ min-height:185px; padding:25px; border-right:1px solid #d5e1ed; border-bottom:1px solid #d5e1ed; background:#fff; transition:.3s ease; } .qnix-why-trust-item:hover{ background:#0758d8; } .qnix-why-trust-item strong{ color:#8b9bb2; font-size:9px; } .qnix-why-trust-item h3{ margin:30px 0 10px; color:#0d1730; font-size:18px; } .qnix-why-trust-item p{ margin:0; color:#718097; font-size:11px; line-height:1.7; } .qnix-why-trust-item:hover strong, .qnix-why-trust-item:hover h3, .qnix-why-trust-item:hover p{ color:#fff; } .qnix-why-trust-item:hover strong{ color:#b7e51c; } /* ========================================================= SECTION 05 — UNIQUE FINAL CTA ========================================================= */ .qnix-why-final{ padding:70px 0; background:#062d7a; } .qnix-why-final-glow{ position:absolute; width:550px; height:550px; right:-180px; top:-250px; border-radius:50%; background:radial-gradient( circle, rgba(16,164,180,.45), transparent 68% ); } .qnix-why-final-box{ position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:70px; padding:48px 55px; border:1px solid rgba(255,255,255,.18); background: linear-gradient( 110deg, rgba(7,88,216,.65), rgba(8,126,231,.35) ); } .qnix-why-final-left > span{ color:#b7e51c; font-size:9px; font-weight:900; letter-spacing:2px; } .qnix-why-final-left h2{ max-width:650px; margin:15px 0 0; color:#fff; font-size:clamp(40px,4.5vw,60px); line-height:.97; letter-spacing:-3px; } .qnix-why-final-left h2 strong{ display:block; color:#b7e51c; } .qnix-why-final-right{ padding-left:35px; border-left:1px solid rgba(255,255,255,.25); } .qnix-why-final-right p{ margin:0 0 24px; color:rgba(255,255,255,.72); font-size:13px; line-height:1.8; } .qnix-why-final-button{ display:inline-flex; align-items:center; gap:14px; padding:15px 20px; background:#fff; color:#0758d8; text-decoration:none; border-radius:3px; font-size:9px; font-weight:900; letter-spacing:1.5px; transition:.3s ease; } .qnix-why-final-button span{ font-size:18px; } .qnix-why-final-button:hover{ background:#b7e51c; color:#062d7a; transform:translateY(-3px); } /* ========================================================= TABLET ========================================================= */ @media(max-width:1050px){ .qnix-why-opening .qnix-why-wrap{ grid-template-columns:1fr; gap:45px; } .qnix-why-opening-right{ max-width:700px; padding-left:25px; } .qnix-why-process{ grid-template-columns:1fr 1fr; gap:35px 25px; } .qnix-why-process-line{ display:none; } .qnix-why-trust-layout{ grid-template-columns:1fr; gap:50px; } .qnix-why-trust-intro{ position:static; } .qnix-why-final-box{ grid-template-columns:1fr; gap:35px; } .qnix-why-final-right{ padding-left:0; padding-top:30px; border-left:0; border-top:1px solid rgba(255,255,255,.25); } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:700px){ .qnix-why-wrap{ width:calc(100% - 40px); } .qnix-why-opening, .qnix-why-matrix, .qnix-why-model, .qnix-why-trust{ padding:65px 0; } .qnix-why-opening-left h2{ font-size:43px; letter-spacing:-2.5px; } .qnix-why-opening-right{ padding-left:18px; } .qnix-why-opening-lead{ font-size:16px; } .qnix-why-matrix-head{ align-items:start; flex-direction:column; gap:25px; } .qnix-why-matrix-head h2{ font-size:40px; letter-spacing:-2px; } .qnix-why-feature{ grid-template-columns:35px 1fr 38px; gap:12px; min-height:145px; padding:22px 16px; } .qnix-why-feature-content h3{ font-size:18px; } .qnix-why-feature-content p{ font-size:10px; } .qnix-why-feature-symbol{ width:34px; height:34px; font-size:15px; } .qnix-why-feature-mark{ gap:3px; } .qnix-why-feature-mark i{ width:4px; } .qnix-why-matrix-footer{ flex-wrap:wrap; gap:10px 15px; } .qnix-why-model-intro h2{ font-size:40px; letter-spacing:-2px; } .qnix-why-process{ grid-template-columns:1fr; gap:20px; margin-top:45px; } .qnix-why-process-item{ display:grid; grid-template-columns:51px 1fr; gap:15px; align-items:start; } .qnix-why-process-dot{ margin:0; } .qnix-why-process-card{ min-height:auto; padding:20px; } .qnix-why-process-card h3{ font-size:18px; } .qnix-why-trust-intro h2{ font-size:39px; letter-spacing:-2px; } .qnix-why-trust-grid{ grid-template-columns:1fr; } .qnix-why-trust-item{ min-height:155px; } .qnix-why-final{ padding:45px 0; } .qnix-why-final-box{ padding:32px 24px; gap:28px; } .qnix-why-final-left h2{ font-size:40px; letter-spacing:-2px; } } /* ========================================================= QNIX DIGITAL — PARTNERS PAGE COMPLETE PAGE CSS ========================================================= */ .qnix-partners-intro, .qnix-partners-network, .qnix-partners-philosophy, .qnix-partners-flow, .qnix-partners-cta{ position:relative; overflow:hidden; } /* ========================================================= PARTNERS INTRO ========================================================= */ .qnix-partners-intro{ background:#fff; padding:95px 6vw 85px; } .qnix-partners-intro-grid{ position:absolute; inset:0; pointer-events:none; background-image: linear-gradient(rgba(7,88,216,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.035) 1px,transparent 1px); background-size:55px 55px; mask-image:linear-gradient(to bottom,black,transparent 90%); } .qnix-partners-intro-inner{ position:relative; z-index:2; max-width:1240px; margin:auto; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:80px; } .qnix-partners-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:11px; font-weight:800; letter-spacing:2.5px; color:#0758d8; } .qnix-partners-eyebrow::before{ content:""; width:25px; height:2px; background:#b7e51c; } .qnix-partners-intro-copy h2{ margin:22px 0 25px; font-size:clamp(42px,5vw,72px); line-height:.98; letter-spacing:-2.8px; color:#0d1730; font-weight:400; } .qnix-partners-intro-copy h2 strong{ color:#0758d8; font-weight:800; } .qnix-partners-intro-copy p{ max-width:600px; margin:0; color:#5d6b84; font-size:16px; line-height:1.8; } /* ========================================================= INTRO VISUAL ========================================================= */ .qnix-partners-intro-visual{ position:relative; width:430px; height:430px; margin:auto; display:grid; place-items:center; } .qnix-partners-signal{ position:absolute; width:100%; height:100%; } .qnix-partners-signal span{ position:absolute; width:6px; height:6px; border-radius:50%; background:#10a4b4; box-shadow:0 0 18px rgba(16,164,180,.45); } .qnix-partners-signal span:nth-child(1){ top:17%; left:22%; } .qnix-partners-signal span:nth-child(2){ top:72%; right:15%; background:#7bc51f; } .qnix-partners-signal span:nth-child(3){ bottom:17%; left:20%; } .qnix-partners-signal span:nth-child(4){ top:28%; right:18%; background:#0758d8; } .qnix-partners-orbit{ position:absolute; border:1px solid rgba(7,88,216,.16); border-radius:50%; transform:rotate(-18deg); } .qnix-partners-orbit.orbit-one{ width:330px; height:185px; } .qnix-partners-orbit.orbit-two{ width:390px; height:250px; transform:rotate(55deg); border-color:rgba(16,164,180,.16); } .qnix-partners-core{ width:150px; height:150px; border-radius:50%; background:linear-gradient( 145deg, #062d7a, #0758d8 65%, #10a4b4 ); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; box-shadow: 0 25px 65px rgba(7,88,216,.25), 0 0 0 12px rgba(7,88,216,.035); } .qnix-partners-core b{ font-size:48px; line-height:1; font-weight:800; } .qnix-partners-core small{ margin-top:9px; text-align:center; font-size:8px; line-height:1.3; letter-spacing:2px; opacity:.8; } /* ========================================================= PARTNER NETWORK ========================================================= */ .qnix-partners-network{ padding:100px 6vw; background:#f4f8ff; } .qnix-partners-network-head{ max-width:1240px; margin:0 auto 58px; display:grid; grid-template-columns:1fr .7fr; gap:70px; align-items:end; } .qnix-partners-network-head h2{ margin:17px 0 0; font-size:clamp(34px,4vw,55px); line-height:1.05; letter-spacing:-2px; color:#0d1730; font-weight:400; } .qnix-partners-network-head h2 strong{ color:#0758d8; font-weight:800; } .qnix-partners-network-head > p{ margin:0; color:#5d6b84; line-height:1.75; font-size:15px; } /* ========================================================= PARTNER LOGO BOARD EXTRA GAP / BREATHING SPACE ========================================================= */ .qnix-partner-board{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; border:0; } .qnix-partner-node{ position:relative; min-height:250px; padding:28px 30px; background:#fff; border:1px solid #dce6f3; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .qnix-partner-node:hover{ transform:translateY(-6px); z-index:2; border-color:rgba(7,88,216,.25); box-shadow:0 22px 55px rgba(7,88,216,.12); } .qnix-partner-node-featured{ background:linear-gradient( 145deg, #fff 0%, #f7fbff 100% ); } .qnix-partner-index{ font-size:10px; font-weight:800; letter-spacing:2px; color:#9aabc3; } /* ========================================================= PARTNER LOGO ========================================================= */ .qnix-partner-logo{ height:115px; display:flex; align-items:center; justify-content:center; padding:18px 18px; } .qnix-partner-logo img{ display:block; max-width:195px; max-height:72px; width:auto; height:auto; object-fit:contain; transition: transform .35s ease, filter .35s ease; } .qnix-partner-node:hover .qnix-partner-logo img{ transform:scale(1.06); } /* ========================================================= LOGO META ========================================================= */ .qnix-partner-line{ height:1px; background:#e3eaf4; position:relative; } .qnix-partner-line::after{ content:""; position:absolute; left:0; top:-1px; width:30px; height:3px; background:#b7e51c; } .qnix-partner-meta{ display:flex; justify-content:space-between; align-items:center; gap:15px; margin-top:18px; } .qnix-partner-meta strong{ font-size:12px; letter-spacing:1.2px; color:#0d1730; } .qnix-partner-meta span{ text-align:right; font-size:8px; line-height:1.35; letter-spacing:1px; color:#7a8aa3; } /* ========================================================= PARTNERSHIP PHILOSOPHY ========================================================= */ .qnix-partners-philosophy{ padding:105px 6vw; background:#fff; } .qnix-partners-philosophy-label{ max-width:1240px; margin:0 auto 55px; display:flex; align-items:center; gap:20px; } .qnix-partners-philosophy-label span{ font-size:10px; letter-spacing:2.5px; font-weight:800; color:#0758d8; } .qnix-partners-philosophy-label i{ flex:1; height:1px; background:#e3eaf4; } .qnix-partners-philosophy-content{ max-width:1240px; margin:auto; display:grid; grid-template-columns:1fr .72fr; gap:100px; align-items:end; } .qnix-partners-philosophy-content h2{ margin:0; font-size:clamp(38px,4.5vw,62px); line-height:1.02; letter-spacing:-2.5px; font-weight:400; color:#0d1730; } .qnix-partners-philosophy-content h2 em{ color:#0758d8; font-style:normal; font-weight:800; } .qnix-partners-philosophy-content p{ margin:0; color:#5d6b84; font-size:15px; line-height:1.85; } /* ========================================================= PILLARS ========================================================= */ .qnix-partners-pillars{ max-width:1240px; margin:75px auto 0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #e3eaf4; } .qnix-partner-pillar{ padding:30px 35px 15px 0; border-right:1px solid #e3eaf4; } .qnix-partner-pillar:not(:first-child){ padding-left:35px; } .qnix-partner-pillar:last-child{ border-right:0; } .qnix-partner-pillar span{ display:block; margin-bottom:25px; font-size:10px; font-weight:800; color:#0758d8; letter-spacing:1.5px; } .qnix-partner-pillar strong{ display:block; color:#0d1730; font-size:12px; letter-spacing:1.5px; } .qnix-partner-pillar p{ margin:12px 0 0; color:#5d6b84; font-size:13px; line-height:1.7; } /* ========================================================= COLLABORATION FLOW ========================================================= */ .qnix-partners-flow{ padding:105px 6vw; background:#062d7a; color:#fff; } .qnix-partners-flow::before{ content:""; position:absolute; inset:0; background: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size:52px 52px; } .qnix-partners-flow-top, .qnix-partners-flow-track{ position:relative; z-index:2; max-width:1240px; margin-left:auto; margin-right:auto; } .qnix-partners-flow .qnix-partners-eyebrow{ color:#b7e51c; } .qnix-partners-flow-top h2{ margin:20px 0 55px; font-size:clamp(38px,4.5vw,60px); line-height:1.03; letter-spacing:-2.5px; font-weight:400; } .qnix-partners-flow-top h2 strong{ color:#b7e51c; font-weight:800; } .qnix-partners-flow-track{ display:grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:20px; } .qnix-flow-step{ min-width:0; transition: transform .4s ease, opacity .4s ease; } .qnix-flow-step:hover{ transform:translateY(-5px); } .qnix-flow-number{ width:44px; height:44px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.22); color:#b7e51c; font-size:10px; font-weight:800; margin-bottom:25px; } .qnix-flow-step small{ display:block; color:#72cce0; font-size:8px; letter-spacing:2px; font-weight:800; } .qnix-flow-step h3{ margin:8px 0 10px; font-size:17px; color:#fff; } .qnix-flow-step p{ margin:0; color:rgba(255,255,255,.62); font-size:12px; line-height:1.65; } .qnix-flow-connector{ width:42px; height:1px; background:linear-gradient( 90deg, #10a4b4, #b7e51c ); opacity:.65; } /* ========================================================= FINAL CTA ========================================================= */ .qnix-partners-cta{ background: linear-gradient( 115deg, #041e56 0%, #062d7a 48%, #0758d8 100% ); padding:85px 6vw; color:#fff; } .qnix-partners-cta-glow{ position:absolute; width:430px; height:430px; right:-130px; top:-190px; border-radius:50%; background:rgba(16,164,180,.16); filter:blur(35px); } .qnix-partners-cta-inner{ max-width:1240px; margin:auto; position:relative; z-index:2; } .qnix-partners-cta-label{ display:flex; align-items:center; gap:18px; margin-bottom:40px; } .qnix-partners-cta-label span{ font-size:9px; letter-spacing:2.5px; font-weight:800; color:#b7e51c; } .qnix-partners-cta-label i{ width:55px; height:1px; background:rgba(255,255,255,.25); } .qnix-partners-cta-main{ display:grid; grid-template-columns:1.2fr .8fr; gap:90px; align-items:end; } .qnix-partners-cta-main h2{ margin:0; font-size:clamp(38px,4.5vw,62px); line-height:1.03; letter-spacing:-2.5px; font-weight:400; } .qnix-partners-cta-main h2 strong{ color:#b7e51c; font-weight:800; } .qnix-partners-cta-action p{ margin:0 0 25px; color:rgba(255,255,255,.68); font-size:13px; line-height:1.75; } .qnix-partners-cta-action a{ display:inline-flex; align-items:center; gap:25px; padding:15px 18px 15px 20px; background:#b7e51c; color:#062d7a; text-decoration:none; font-size:10px; font-weight:900; letter-spacing:1.5px; transition:.3s ease; } .qnix-partners-cta-action a b{ width:30px; height:30px; display:grid; place-items:center; background:#062d7a; color:#b7e51c; font-size:15px; transition:.3s ease; } .qnix-partners-cta-action a:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.18); } .qnix-partners-cta-action a:hover b{ transform:rotate(45deg); } /* ========================================================= TABLET ========================================================= */ @media(max-width:1050px){ .qnix-partners-intro-inner{ grid-template-columns:1fr; gap:45px; } .qnix-partners-intro-visual{ width:350px; height:350px; } .qnix-partners-network-head{ grid-template-columns:1fr; gap:30px; } .qnix-partners-philosophy-content{ grid-template-columns:1fr; gap:35px; } .qnix-partners-cta-main{ grid-template-columns:1fr; gap:35px; } .qnix-partner-board{ grid-template-columns:repeat(2,1fr); gap:20px; } .qnix-partners-flow-track{ grid-template-columns:1fr 1fr; gap:40px 30px; } .qnix-flow-connector{ display:none; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:700px){ .qnix-partners-intro, .qnix-partners-network, .qnix-partners-philosophy, .qnix-partners-flow, .qnix-partners-cta{ padding-left:20px; padding-right:20px; } /* INTRO */ .qnix-partners-intro{ padding-top:65px; padding-bottom:65px; } .qnix-partners-intro-copy h2{ font-size:42px; letter-spacing:-1.8px; } .qnix-partners-intro-copy p{ font-size:14px; } .qnix-partners-intro-visual{ width:280px; height:280px; } .qnix-partners-orbit.orbit-one{ width:220px; height:125px; } .qnix-partners-orbit.orbit-two{ width:260px; height:165px; } .qnix-partners-core{ width:105px; height:105px; } .qnix-partners-core b{ font-size:34px; } /* NETWORK */ .qnix-partners-network{ padding-top:70px; padding-bottom:70px; } .qnix-partners-network-head{ margin-bottom:40px; } .qnix-partners-network-head h2{ font-size:39px; letter-spacing:-1.7px; } /* LOGOS */ .qnix-partner-board{ grid-template-columns:1fr; gap:18px; } .qnix-partner-node{ min-height:220px; padding:25px 24px; } .qnix-partner-logo{ height:105px; padding:15px; } .qnix-partner-logo img{ max-width:180px; max-height:65px; } .qnix-partner-meta{ align-items:flex-start; flex-direction:column; gap:7px; } .qnix-partner-meta span{ text-align:left; } /* PHILOSOPHY */ .qnix-partners-philosophy{ padding-top:75px; padding-bottom:75px; } .qnix-partners-philosophy-content h2{ font-size:40px; letter-spacing:-1.8px; } .qnix-partners-pillars{ grid-template-columns:1fr; margin-top:55px; } .qnix-partner-pillar, .qnix-partner-pillar:not(:first-child){ padding:25px 0; border-right:0; border-bottom:1px solid #e3eaf4; } .qnix-partner-pillar:last-child{ border-bottom:0; } /* FLOW */ .qnix-partners-flow{ padding-top:75px; padding-bottom:75px; } .qnix-partners-flow-top h2{ margin-bottom:40px; font-size:40px; letter-spacing:-1.8px; } .qnix-partners-flow-track{ grid-template-columns:1fr; gap:30px; } .qnix-flow-number{ margin-bottom:17px; } /* CTA */ .qnix-partners-cta{ padding-top:65px; padding-bottom:65px; } .qnix-partners-cta-main{ gap:30px; } .qnix-partners-cta-main h2{ font-size:40px; letter-spacing:-1.7px; } .qnix-partners-cta-action a{ width:100%; justify-content:space-between; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media(max-width:420px){ .qnix-partners-intro-copy h2{ font-size:37px; } .qnix-partners-intro-visual{ width:245px; height:245px; } .qnix-partners-orbit.orbit-one{ width:190px; height:108px; } .qnix-partners-orbit.orbit-two{ width:225px; height:145px; } .qnix-partners-core{ width:92px; height:92px; } .qnix-partners-core b{ font-size:30px; } .qnix-partners-network-head h2, .qnix-partners-philosophy-content h2, .qnix-partners-flow-top h2, .qnix-partners-cta-main h2{ font-size:35px; } .qnix-partner-node{ min-height:210px; } } /* ========================================================= QNIX DIGITAL — INDUSTRIES PAGE ========================================================= */ .qnix-industries-intro, .qnix-industries-directory, .qnix-industries-perspective, .qnix-industries-framework, .qnix-industries-cta{ position:relative; overflow:hidden; } .qnix-industries-eyebrow{ display:inline-flex; align-items:center; gap:11px; color:#0758d8; font-size:10px; font-weight:900; letter-spacing:2.4px; } .qnix-industries-eyebrow::before{ content:""; width:25px; height:2px; background:#b7e51c; } /* INTRO */ .qnix-industries-intro{ padding:105px 6vw 95px; background:#fff; } .qnix-industries-intro-grid{ position:absolute; inset:0; pointer-events:none; background-image: linear-gradient(rgba(7,88,216,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.035) 1px,transparent 1px); background-size:58px 58px; mask-image:linear-gradient(to right,black,transparent 85%); } .qnix-industries-intro-inner{ position:relative; z-index:2; max-width:1240px; margin:auto; display:grid; grid-template-columns:1.25fr .75fr; gap:90px; align-items:center; } .qnix-industries-intro-copy h2{ max-width:850px; margin:22px 0 27px; color:#0d1730; font-size:clamp(45px,5.5vw,76px); line-height:.98; letter-spacing:-3.2px; font-weight:400; } .qnix-industries-intro-copy h2 strong{ display:block; color:#0758d8; font-weight:800; } .qnix-industries-intro-copy p{ max-width:650px; margin:0; color:#5d6b84; font-size:16px; line-height:1.85; } .qnix-industries-intro-index{ min-height:285px; padding:35px; border:1px solid #dce6f3; background: linear-gradient(145deg,#f8fbff,#fff); box-shadow:0 20px 55px rgba(17,55,110,.07); } .qnix-industries-index-label{ display:block; color:#7a8aa3; font-size:9px; letter-spacing:2px; font-weight:800; } .qnix-industries-index-number{ display:flex; align-items:flex-end; gap:18px; margin-top:55px; } .qnix-industries-index-number strong{ color:#0758d8; font-size:92px; line-height:.75; letter-spacing:-5px; font-weight:800; } .qnix-industries-index-number span{ color:#0d1730; font-size:9px; line-height:1.5; letter-spacing:1.8px; font-weight:800; } .qnix-industries-index-line{ width:100%; height:1px; margin:30px 0 18px; background:#dfe7f1; } .qnix-industries-index-note{ color:#5d6b84; font-size:11px; line-height:1.6; } /* DIRECTORY */ .qnix-industries-directory{ padding:105px 6vw 115px; background:#f4f8ff; } .qnix-industries-directory-head{ max-width:1240px; margin:0 auto 65px; display:grid; grid-template-columns:1fr .72fr; gap:90px; align-items:end; } .qnix-industries-directory-head h2{ max-width:700px; margin:20px 0 0; color:#0d1730; font-size:clamp(38px,4.5vw,60px); line-height:1.02; letter-spacing:-2.4px; font-weight:400; } .qnix-industries-directory-head h2 strong{ color:#0758d8; font-weight:800; } .qnix-industries-directory-head > p{ margin:0; color:#5d6b84; font-size:14px; line-height:1.85; } .qnix-industries-list{ max-width:1240px; margin:auto; border-top:1px solid #d7e2ef; } .qnix-industry-row{ position:relative; min-height:105px; display:grid; grid-template-columns:85px 1fr 55px; align-items:center; gap:25px; padding:15px 20px; border-bottom:1px solid #d7e2ef; cursor:default; transition: background .35s ease, padding .35s ease; } .qnix-industry-row::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#b7e51c; transform:scaleY(0); transform-origin:center; transition:transform .35s ease; } .qnix-industry-row:hover{ padding-left:30px; background:#fff; } .qnix-industry-row:hover::before{ transform:scaleY(1); } .qnix-industry-number{ color:#91a2ba; font-size:10px; font-weight:900; letter-spacing:1.5px; } .qnix-industry-name h3{ margin:0; color:#0d1730; font-size:23px; line-height:1.15; font-weight:700; letter-spacing:-.5px; transition:color .3s ease; } .qnix-industry-name h3 em{ color:#0758d8; font-style:normal; font-weight:400; } .qnix-industry-row:hover .qnix-industry-name h3{ color:#0758d8; } .qnix-industry-name p{ margin:7px 0 0; color:#718099; font-size:11px; line-height:1.5; } .qnix-industry-arrow{ width:38px; height:38px; display:grid; place-items:center; border:1px solid #d5e0ed; color:#0758d8; font-size:17px; transition: background .3s ease, color .3s ease, transform .3s ease, border-color .3s ease; } .qnix-industry-row:hover .qnix-industry-arrow{ background:#0758d8; border-color:#0758d8; color:#fff; transform:rotate(45deg); } /* PERSPECTIVE */ .qnix-industries-perspective{ min-height:540px; padding:105px 6vw; background:#062d7a; color:#fff; } .qnix-industries-perspective-mark{ position:absolute; right:-40px; bottom:-95px; color:rgba(255,255,255,.035); font-size:260px; line-height:1; font-weight:900; letter-spacing:-18px; pointer-events:none; } .qnix-industries-perspective-inner{ position:relative; z-index:2; max-width:1240px; margin:auto; } .qnix-industries-perspective-label{ display:flex; align-items:center; gap:20px; } .qnix-industries-perspective-label span{ color:#b7e51c; font-size:9px; font-weight:900; letter-spacing:2.5px; } .qnix-industries-perspective-label i{ width:80px; height:1px; background:rgba(255,255,255,.22); } .qnix-industries-perspective-content{ max-width:1120px; margin-top:75px; display:grid; grid-template-columns:1.15fr .65fr; gap:100px; align-items:end; } .qnix-industries-perspective-content h2{ margin:0; font-size:clamp(43px,5vw,70px); line-height:.99; letter-spacing:-3px; font-weight:400; } .qnix-industries-perspective-content h2 strong{ display:block; color:#b7e51c; font-weight:800; } .qnix-industries-perspective-content p{ margin:0; color:rgba(255,255,255,.65); font-size:14px; line-height:1.9; } /* FRAMEWORK */ .qnix-industries-framework{ padding:105px 6vw; background:#fff; } .qnix-industries-framework-head{ max-width:1240px; margin:auto; } .qnix-industries-framework-head h2{ margin:20px 0 65px; color:#0d1730; font-size:clamp(38px,4.5vw,60px); line-height:1.02; letter-spacing:-2.5px; font-weight:400; } .qnix-industries-framework-head h2 strong{ color:#0758d8; font-weight:800; } .qnix-industries-framework-grid{ max-width:1240px; margin:auto; display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid #dfe7f1; border-left:1px solid #dfe7f1; } .qnix-industry-factor{ min-height:180px; padding:35px; display:grid; grid-template-columns:55px 1fr; gap:20px; border-right:1px solid #dfe7f1; border-bottom:1px solid #dfe7f1; transition: background .3s ease, transform .3s ease; } .qnix-industry-factor:hover{ background:#f7faff; } .qnix-industry-factor > span{ color:#0758d8; font-size:10px; font-weight:900; letter-spacing:1.5px; } .qnix-industry-factor strong{ display:block; color:#0d1730; font-size:12px; letter-spacing:1.8px; } .qnix-industry-factor p{ max-width:330px; margin:13px 0 0; color:#687890; font-size:12px; line-height:1.7; } /* CTA */ .qnix-industries-cta{ padding:90px 6vw; background: linear-gradient( 115deg, #041e56 0%, #062d7a 46%, #0758d8 100% ); color:#fff; } .qnix-industries-cta-grid{ position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:55px 55px; pointer-events:none; } .qnix-industries-cta-inner{ position:relative; z-index:2; max-width:1240px; margin:auto; display:grid; grid-template-columns:1.1fr .9fr; gap:80px; align-items:end; } .qnix-industries-cta-copy > span{ color:#b7e51c; font-size:9px; font-weight:900; letter-spacing:2.5px; } .qnix-industries-cta-copy h2{ max-width:750px; margin:20px 0 20px; font-size:clamp(42px,5vw,67px); line-height:1; letter-spacing:-2.8px; font-weight:400; } .qnix-industries-cta-copy h2 strong{ color:#b7e51c; font-weight:800; } .qnix-industries-cta-copy p{ max-width:520px; margin:0; color:rgba(255,255,255,.66); font-size:13px; line-height:1.8; } .qnix-industries-cta-action{ display:flex; justify-content:flex-end; } .qnix-industries-cta-action a{ display:inline-flex; align-items:center; gap:28px; padding:15px 16px 15px 21px; color:#062d7a; background:#b7e51c; text-decoration:none; font-size:10px; font-weight:900; letter-spacing:1.5px; transition: transform .3s ease, box-shadow .3s ease; } .qnix-industries-cta-action a b{ width:34px; height:34px; display:grid; place-items:center; background:#062d7a; color:#b7e51c; font-size:16px; transition:transform .3s ease; } .qnix-industries-cta-action a:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.2); } .qnix-industries-cta-action a:hover b{ transform:rotate(45deg); } /* TABLET */ @media(max-width:1050px){ .qnix-industries-intro-inner{ grid-template-columns:1fr; gap:55px; } .qnix-industries-intro-index{ max-width:500px; } .qnix-industries-directory-head{ grid-template-columns:1fr; gap:30px; } .qnix-industries-perspective-content{ grid-template-columns:1fr; gap:45px; } .qnix-industries-cta-inner{ grid-template-columns:1fr; gap:40px; } .qnix-industries-cta-action{ justify-content:flex-start; } } /* MOBILE */ @media(max-width:700px){ .qnix-industries-intro, .qnix-industries-directory, .qnix-industries-perspective, .qnix-industries-framework, .qnix-industries-cta{ padding-left:20px; padding-right:20px; } .qnix-industries-intro{ padding-top:70px; padding-bottom:70px; } .qnix-industries-intro-copy h2{ font-size:42px; letter-spacing:-2px; } .qnix-industries-intro-copy p{ font-size:14px; } .qnix-industries-intro-index{ padding:28px; min-height:245px; } .qnix-industries-index-number{ margin-top:42px; } .qnix-industries-index-number strong{ font-size:75px; } .qnix-industries-directory{ padding-top:75px; padding-bottom:75px; } .qnix-industries-directory-head h2, .qnix-industries-framework-head h2{ font-size:39px; letter-spacing:-1.7px; } .qnix-industries-directory-head{ margin-bottom:45px; } .qnix-industry-row{ min-height:105px; grid-template-columns:35px 1fr 38px; gap:12px; padding:15px 8px; } .qnix-industry-row:hover{ padding-left:15px; } .qnix-industry-name h3{ font-size:17px; line-height:1.2; } .qnix-industry-name p{ font-size:10px; line-height:1.5; } .qnix-industry-arrow{ width:34px; height:34px; font-size:14px; } .qnix-industries-perspective{ min-height:auto; padding-top:75px; padding-bottom:80px; } .qnix-industries-perspective-content{ margin-top:55px; gap:35px; } .qnix-industries-perspective-content h2{ font-size:41px; letter-spacing:-1.8px; } .qnix-industries-perspective-mark{ font-size:150px; right:-25px; bottom:-35px; } .qnix-industries-framework{ padding-top:75px; padding-bottom:75px; } .qnix-industries-framework-head h2{ margin-bottom:45px; } .qnix-industries-framework-grid{ grid-template-columns:1fr; } .qnix-industry-factor{ min-height:150px; padding:28px 22px; grid-template-columns:40px 1fr; gap:15px; } .qnix-industries-cta{ padding-top:70px; padding-bottom:70px; } .qnix-industries-cta-copy h2{ font-size:41px; letter-spacing:-1.8px; } .qnix-industries-cta-action a{ width:100%; justify-content:space-between; } } /* SMALL MOBILE */ @media(max-width:420px){ .qnix-industries-intro-copy h2, .qnix-industries-directory-head h2, .qnix-industries-framework-head h2, .qnix-industries-perspective-content h2, .qnix-industries-cta-copy h2{ font-size:36px; } .qnix-industry-row{ grid-template-columns:28px 1fr 34px; gap:9px; } .qnix-industry-name h3{ font-size:15px; } .qnix-industry-name p{ font-size:9px; } } /* ========================================================= QNIX DIGITAL — TECHNOLOGIES PAGE ========================================================= */ .qnix-tech-ecosystem, .qnix-tech-stream, .qnix-tech-intelligence, .qnix-tech-capability, .qnix-tech-final{ position:relative; overflow:hidden; } .qnix-tech-ecosystem{ display:grid; grid-template-columns:.78fr 1.22fr; gap:70px; align-items:center; padding:105px 7%; background:#fff; } .qnix-tech-eco-copy{ max-width:570px; } .qnix-tech-kicker{ display:inline-flex; align-items:center; gap:10px; margin-bottom:20px; font-size:11px; font-weight:800; letter-spacing:2.4px; color:#0758d8; } .qnix-tech-kicker::before{ content:""; width:28px; height:2px; background:linear-gradient(90deg,#0758d8,#10a4b4); } .qnix-tech-eco-copy h2, .qnix-tech-stream-head h2, .qnix-tech-intelligence-copy h2, .qnix-tech-capability-heading h2, .qnix-tech-final-content h2{ margin:0; color:#0d1730; font-size:clamp(38px,4vw,66px); line-height:1.04; letter-spacing:-2.5px; font-weight:700; } .qnix-tech-eco-copy h2 strong, .qnix-tech-stream-head h2 span, .qnix-tech-intelligence-copy h2 strong, .qnix-tech-capability-heading h2 span{ display:block; color:#0758d8; } .qnix-tech-eco-copy p{ max-width:510px; margin:28px 0 0; color:#5d6b84; font-size:16px; line-height:1.85; } .qnix-tech-eco-tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; } .qnix-tech-eco-tags span{ padding:9px 13px; border:1px solid #dce6f3; color:#0d1730; font-size:10px; font-weight:800; letter-spacing:1.5px; background:#f4f8ff; } /* FLOW */ .qnix-tech-flow{ position:relative; min-height:570px; border:1px solid #dfe8f4; background: linear-gradient(rgba(7,88,216,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.045) 1px,transparent 1px), #f8fbff; background-size:34px 34px; box-shadow:0 30px 80px rgba(17,55,110,.08); } .qnix-tech-flow::after{ content:""; position:absolute; inset:18px; border:1px solid rgba(7,88,216,.08); pointer-events:none; } .qnix-tech-flow-center{ position:absolute; left:50%; top:50%; width:145px; height:145px; transform:translate(-50%,-50%); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(145deg,#062d7a,#0758d8 60%,#10a4b4); color:#fff; box-shadow: 0 0 0 12px rgba(7,88,216,.06), 0 0 0 28px rgba(7,88,216,.035), 0 25px 55px rgba(7,88,216,.25); z-index:5; } .qnix-tech-flow-center b{ font-size:28px; letter-spacing:2px; } .qnix-tech-flow-center small{ margin-top:5px; font-size:8px; letter-spacing:2px; opacity:.8; } .flow-pulse{ position:absolute; width:8px; height:8px; right:28px; top:28px; border-radius:50%; background:#b7e51c; box-shadow:0 0 18px rgba(183,229,28,.9); } .qnix-tech-node{ position:absolute; z-index:4; width:220px; min-height:105px; padding:20px 20px 18px; background:#fff; border:1px solid #dce6f3; box-shadow:0 15px 40px rgba(17,55,110,.08); transition:.35s ease; } .qnix-tech-node:hover{ transform:translateY(-7px); border-color:#75a9ec; box-shadow:0 25px 55px rgba(7,88,216,.15); } .qnix-tech-node strong{ display:block; margin-top:11px; color:#0d1730; font-size:15px; } .qnix-tech-node small{ display:block; margin-top:5px; color:#5d6b84; font-size:10px; line-height:1.5; } .node-icon{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; background:#f0f6ff; color:#0758d8; font-size:17px; font-weight:700; } .node-web{ left:6%; top:9%; } .node-platform{ right:6%; top:9%; } .node-ai{ right:4%; top:42%; border-color:#9ad9df; } .node-data{ right:7%; bottom:9%; } .node-growth{ left:6%; bottom:9%; } .node-connect{ left:4%; top:42%; } .qnix-tech-flow-line{ position:absolute; height:1px; background:linear-gradient(90deg,transparent,#72a8ea,transparent); transform-origin:left center; opacity:.8; z-index:2; } .line-a{ width:190px; left:25%; top:30%; transform:rotate(25deg); } .line-b{ width:190px; right:24%; top:30%; transform:rotate(155deg); } .line-c{ width:205px; left:25%; bottom:30%; transform:rotate(-25deg); } /* STREAM */ .qnix-tech-stream{ padding:105px 7%; background:#f4f8ff; } .qnix-tech-stream-head{ display:grid; grid-template-columns:1fr 1fr; column-gap:80px; align-items:end; margin-bottom:65px; } .qnix-tech-stream-head p{ max-width:450px; margin:0 0 5px; color:#5d6b84; font-size:16px; line-height:1.8; } .qnix-tech-stream-list{ border-top:1px solid #cfdbea; } .qnix-tech-stream-item{ display:grid; grid-template-columns:1.1fr .9fr 1.3fr; gap:45px; align-items:center; padding:32px 0; border-bottom:1px solid #cfdbea; transition:.3s ease; } .qnix-tech-stream-item:hover{ padding-left:16px; border-bottom-color:#75a9ec; } .stream-title span{ display:block; color:#0d1730; font-size:21px; font-weight:700; } .stream-title em{ display:block; margin-top:7px; color:#0758d8; font-size:9px; font-style:normal; font-weight:800; letter-spacing:1.5px; } .qnix-tech-stream-item p{ margin:0; color:#5d6b84; font-size:13px; line-height:1.7; } .stream-points{ display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; } .stream-points span{ padding:8px 11px; background:#fff; border:1px solid #dce6f3; color:#0d1730; font-size:9px; font-weight:800; letter-spacing:.6px; } /* INTELLIGENCE */ .qnix-tech-intelligence{ display:grid; grid-template-columns:1fr 1fr; min-height:610px; background:#062d7a; } .qnix-tech-intelligence-visual{ position:relative; display:flex; align-items:center; justify-content:center; min-height:610px; overflow:hidden; background: linear-gradient(135deg,rgba(7,88,216,.7),rgba(6,45,122,.95)), #062d7a; } .qnix-tech-intelligence-visual::before, .qnix-tech-intelligence-visual::after{ content:""; position:absolute; border:1px solid rgba(255,255,255,.1); transform:rotate(45deg); } .qnix-tech-intelligence-visual::before{ width:390px; height:390px; } .qnix-tech-intelligence-visual::after{ width:260px; height:260px; } .tech-signal{ position:absolute; height:1px; width:72%; background:linear-gradient(90deg,transparent,rgba(16,164,180,.7),transparent); } .signal-one{ transform:rotate(18deg); } .signal-two{ transform:rotate(-18deg); } .signal-three{ transform:rotate(90deg); } .tech-intelligence-panel{ position:relative; z-index:3; width:320px; padding:34px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(12px); box-shadow:0 35px 80px rgba(0,0,0,.2); } .panel-label{ display:block; color:#b7e51c; font-size:9px; font-weight:800; letter-spacing:2px; } .panel-wave{ display:flex; align-items:center; gap:5px; height:95px; margin:25px 0; } .panel-wave i{ width:3px; border-radius:4px; background:linear-gradient(#10a4b4,#b7e51c); animation:qnixTechWave 1.8s ease-in-out infinite; } .panel-wave i:nth-child(1){height:22%;animation-delay:.1s} .panel-wave i:nth-child(2){height:45%;animation-delay:.2s} .panel-wave i:nth-child(3){height:72%;animation-delay:.3s} .panel-wave i:nth-child(4){height:90%;animation-delay:.4s} .panel-wave i:nth-child(5){height:60%;animation-delay:.5s} .panel-wave i:nth-child(6){height:100%;animation-delay:.6s} .panel-wave i:nth-child(7){height:68%;animation-delay:.7s} .panel-wave i:nth-child(8){height:42%;animation-delay:.8s} .panel-wave i:nth-child(9){height:78%;animation-delay:.9s} .panel-wave i:nth-child(10){height:35%;animation-delay:1s} .tech-intelligence-panel strong{ display:block; color:#fff; font-size:23px; letter-spacing:1px; } .tech-intelligence-panel small{ display:block; margin-top:6px; color:rgba(255,255,255,.6); font-size:9px; letter-spacing:2px; } @keyframes qnixTechWave{ 0%,100%{transform:scaleY(.65)} 50%{transform:scaleY(1)} } .qnix-tech-intelligence-copy{ display:flex; flex-direction:column; justify-content:center; padding:90px 9%; background:#062d7a; } .qnix-tech-intelligence-copy .qnix-tech-kicker{ color:#b7e51c; } .qnix-tech-intelligence-copy .qnix-tech-kicker::before{ background:#b7e51c; } .qnix-tech-intelligence-copy h2{ color:#fff; font-size:clamp(38px,4vw,60px); } .qnix-tech-intelligence-copy p{ max-width:570px; margin:28px 0 34px; color:rgba(255,255,255,.72); font-size:15px; line-height:1.85; } .qnix-tech-button, .qnix-tech-final-button{ display:inline-flex; align-items:center; justify-content:space-between; gap:25px; width:max-content; min-width:220px; padding:15px 17px 15px 20px; background:#fff; color:#062d7a; text-decoration:none; font-size:10px; font-weight:900; letter-spacing:1.3px; transition:.3s ease; } .qnix-tech-button span, .qnix-tech-final-button span{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; background:#b7e51c; color:#062d7a; font-size:15px; } .qnix-tech-button:hover, .qnix-tech-final-button:hover{ transform:translateY(-4px); box-shadow:0 18px 35px rgba(0,0,0,.2); } /* CAPABILITY */ .qnix-tech-capability{ padding:110px 7%; background:#fff; } .qnix-tech-capability-heading{ max-width:720px; margin-bottom:65px; } .qnix-tech-capability-grid{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #dce6f3; border-left:1px solid #dce6f3; } .tech-capability-card{ position:relative; min-height:245px; padding:35px 30px; border-right:1px solid #dce6f3; border-bottom:1px solid #dce6f3; transition:.35s ease; } .tech-capability-card:hover{ background:#f4f8ff; transform:translateY(-5px); } .cap-line{ display:block; width:42px; height:3px; margin-bottom:50px; background:linear-gradient(90deg,#0758d8,#10a4b4); } .tech-capability-card h3{ margin:0; color:#0d1730; font-size:21px; } .tech-capability-card p{ margin:12px 0 28px; color:#5d6b84; font-size:13px; line-height:1.7; } .tech-capability-card strong{ color:#0758d8; font-size:9px; letter-spacing:1.3px; } /* FINAL */ .qnix-tech-final{ margin:0 7% 100px; min-height:430px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg,#062d7a,#0758d8 65%,#10a4b4); } .qnix-tech-final-grid{ position:absolute; inset:0; background: linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:45px 45px; } .qnix-tech-final-content{ position:relative; z-index:2; max-width:820px; padding:75px 30px; text-align:center; } .qnix-tech-final-content .qnix-tech-kicker{ color:#b7e51c; } .qnix-tech-final-content .qnix-tech-kicker::before{ background:#b7e51c; } .qnix-tech-final-content h2{ color:#fff; font-size:clamp(38px,4.5vw,64px); } .qnix-tech-final-content p{ max-width:620px; margin:25px auto 32px; color:rgba(255,255,255,.75); line-height:1.8; font-size:15px; } .qnix-tech-final-button{ margin:auto; } /* TABLET */ @media(max-width:1100px){ .qnix-tech-ecosystem{ grid-template-columns:1fr; } .qnix-tech-eco-copy{ max-width:750px; } .qnix-tech-capability-grid{ grid-template-columns:repeat(2,1fr); } .qnix-tech-stream-item{ grid-template-columns:1fr 1fr; } .stream-points{ grid-column:1/-1; justify-content:flex-start; } } /* MOBILE */ @media(max-width:760px){ .qnix-tech-ecosystem, .qnix-tech-stream, .qnix-tech-capability{ padding:70px 5%; } .qnix-tech-eco-copy h2, .qnix-tech-stream-head h2, .qnix-tech-intelligence-copy h2, .qnix-tech-capability-heading h2, .qnix-tech-final-content h2{ font-size:38px; letter-spacing:-1.5px; } .qnix-tech-flow{ min-height:780px; } .qnix-tech-flow-center{ width:120px; height:120px; } .qnix-tech-flow-center b{ font-size:23px; } .qnix-tech-node{ width:175px; min-height:92px; padding:15px; } .node-web{ left:4%; top:5%; } .node-platform{ right:4%; top:5%; } .node-ai{ right:4%; top:38%; } .node-data{ right:4%; bottom:5%; } .node-growth{ left:4%; bottom:5%; } .node-connect{ left:4%; top:38%; } .qnix-tech-flow-line{ opacity:.4; } .qnix-tech-stream-head{ display:block; margin-bottom:45px; } .qnix-tech-stream-head p{ margin-top:22px; } .qnix-tech-stream-item{ display:block; padding:28px 0; } .qnix-tech-stream-item p{ margin-top:18px; } .stream-points{ margin-top:18px; } .qnix-tech-intelligence{ grid-template-columns:1fr; } .qnix-tech-intelligence-visual{ min-height:430px; } .qnix-tech-intelligence-copy{ padding:70px 6%; } .qnix-tech-capability-grid{ grid-template-columns:1fr; } .tech-capability-card{ min-height:210px; } .qnix-tech-final{ margin:0 5% 65px; } .qnix-tech-final-content{ padding:65px 20px; } .qnix-tech-button, .qnix-tech-final-button{ width:100%; } } .qnix-tech-node, .qnix-tech-stream-item, .tech-capability-card, .qnix-tech-intelligence-copy{ opacity:0; transform:translateY(24px); transition:opacity .65s ease, transform .65s ease; } .qnix-tech-active{ opacity:1; transform:translateY(0); } /* ========================================================= QNIX DIGITAL — CAREERS PAGE ========================================================= */ .qnix-careers-intro, .qnix-openings, .qnix-career-culture, .qnix-career-journey, .qnix-careers-cta{ width:100%; position:relative; } .qnix-careers-intro{ min-height:510px; display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch; overflow:hidden; background:#f4f8ff; border-bottom:1px solid #e3eaf4; } .qnix-careers-intro-grid{ position:absolute; inset:0 0 0 50%; background-image: linear-gradient(rgba(7,88,216,.08) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.08) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(90deg,transparent,#000 35%,#000); opacity:.8; } .qnix-careers-intro-copy{ position:relative; z-index:2; padding:90px 7vw 80px; display:flex; justify-content:center; flex-direction:column; } .qnix-careers-eyebrow{ display:inline-flex; align-items:center; gap:10px; color:#0758d8; font-size:12px; font-weight:800; letter-spacing:2px; margin-bottom:20px; } .qnix-careers-eyebrow:before{ content:""; width:30px; height:2px; background:linear-gradient(90deg,#0758d8,#10a4b4); } .qnix-careers-intro-copy h2{ margin:0; max-width:700px; color:#0d1730; font-size:clamp(42px,5vw,72px); line-height:1.02; letter-spacing:-2.8px; font-weight:700; } .qnix-careers-intro-copy h2 strong{ color:#0758d8; font-weight:800; } .qnix-careers-intro-copy p{ max-width:610px; margin:26px 0 0; color:#5d6b84; font-size:17px; line-height:1.8; } .qnix-careers-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; } .qnix-careers-tags span{ padding:9px 14px; border:1px solid #d5e1f1; background:#fff; color:#315174; font-size:12px; font-weight:700; letter-spacing:.3px; } .qnix-careers-visual{ position:relative; z-index:2; min-height:510px; display:flex; align-items:center; justify-content:center; padding:55px; } .qnix-careers-visual-frame{ position:relative; width:min(440px,100%); aspect-ratio:1/1; background:linear-gradient(145deg,#062d7a,#0758d8 58%,#08a8cf); overflow:hidden; box-shadow:0 35px 80px rgba(7,88,216,.2); } .qnix-careers-visual-frame:before, .qnix-careers-visual-frame:after{ content:""; position:absolute; border:1px solid rgba(255,255,255,.2); transform:rotate(45deg); } .qnix-careers-visual-frame:before{ width:240px; height:240px; left:90px; top:100px; } .qnix-careers-visual-frame:after{ width:320px; height:320px; left:50px; top:60px; } .career-orbit{ position:absolute; border:1px solid rgba(183,229,28,.55); border-radius:50%; } .orbit-a{ width:260px; height:90px; left:90px; top:170px; transform:rotate(-25deg); } .orbit-b{ width:360px; height:120px; left:40px; top:150px; transform:rotate(25deg); border-color:rgba(255,255,255,.22); } .career-dot{ position:absolute; width:9px; height:9px; border-radius:50%; background:#b7e51c; box-shadow:0 0 20px rgba(183,229,28,.7); } .dot-a{top:135px;left:115px} .dot-b{top:315px;right:92px} .dot-c{bottom:92px;left:205px} .career-visual-word{ position:absolute; left:50%; top:50%; transform:translate(-50%,-58%); color:#fff; font-size:82px; line-height:1; font-weight:900; letter-spacing:-5px; } .career-visual-sub{ position:absolute; left:50%; bottom:70px; transform:translateX(-50%); color:rgba(255,255,255,.72); font-size:10px; letter-spacing:3px; font-weight:800; white-space:nowrap; } /* OPENINGS */ .qnix-openings{ padding:105px 7vw 110px; background:#fff; } .qnix-section-heading{ max-width:780px; margin:0 auto 52px; text-align:center; } .qnix-section-heading h2{ margin:0; color:#0d1730; font-size:clamp(34px,4vw,52px); line-height:1.08; letter-spacing:-1.8px; } .qnix-section-heading p{ max-width:680px; margin:18px auto 0; color:#5d6b84; line-height:1.75; font-size:15px; } .qnix-job-list{ max-width:1180px; margin:0 auto; border-top:1px solid #dce6f3; } .qnix-job-card{ border-bottom:1px solid #dce6f3; background:#fff; transition:.35s ease; } .qnix-job-card:hover{ background:#f8fbff; } .qnix-job-trigger{ width:100%; border:0; background:none; padding:30px 26px; display:grid; grid-template-columns:minmax(0,1fr) auto 42px; gap:35px; align-items:center; text-align:left; cursor:pointer; } .qnix-job-main{ display:flex; flex-direction:column; gap:5px; } .qnix-job-main small{ color:#0758d8; font-size:9px; font-weight:900; letter-spacing:1.6px; } .qnix-job-main strong{ color:#0d1730; font-size:23px; line-height:1.2; font-weight:800; } .qnix-job-main em{ color:#5d6b84; font-style:normal; font-size:13px; } .qnix-job-meta{ display:flex; align-items:center; gap:10px; } .qnix-job-meta b{ padding:8px 12px; border:1px solid #dce6f3; color:#49627d; background:#fff; font-size:10px; font-weight:800; white-space:nowrap; } .qnix-job-arrow{ width:38px; height:38px; border:1px solid #cfdceb; display:flex; align-items:center; justify-content:center; color:#0758d8; font-size:21px; transition:.3s ease; } .qnix-job-card.is-open .qnix-job-arrow{ transform:rotate(45deg); background:#0758d8; color:#fff; border-color:#0758d8; } .qnix-job-details{ max-height:0; overflow:hidden; opacity:0; transition:max-height .55s ease,opacity .35s ease; } .qnix-job-card.is-open .qnix-job-details{ max-height:1000px; opacity:1; } .qnix-job-overview{ margin:0 26px; padding:24px 0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #e7edf5; border-bottom:1px solid #e7edf5; } .qnix-job-overview div{ padding:0 20px; border-right:1px solid #e4ebf4; } .qnix-job-overview div:first-child{ padding-left:0; } .qnix-job-overview div:last-child{ border-right:0; } .qnix-job-overview span{ display:block; margin-bottom:7px; color:#7a8aa0; font-size:9px; font-weight:900; letter-spacing:1.3px; } .qnix-job-overview strong{ color:#263d5a; font-size:12px; line-height:1.5; } .qnix-job-content{ margin:0 26px; padding:30px 0 25px; display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:35px; } .qnix-job-content h4{ margin:0 0 10px; color:#0d1730; font-size:14px; font-weight:800; } .qnix-job-content p, .qnix-job-content li{ color:#5d6b84; font-size:13px; line-height:1.75; } .qnix-job-content p{ margin:0; } .qnix-job-content ul{ padding-left:18px; margin:0; } .qnix-job-content li{ margin-bottom:5px; } .qnix-job-apply{ display:flex; width:max-content; margin:0 26px 32px; padding:13px 19px; background:#0758d8; color:#fff; text-decoration:none; font-size:12px; font-weight:800; transition:.3s ease; } .qnix-job-apply span{ margin-left:15px; transition:.3s ease; } .qnix-job-apply:hover{ background:#062d7a; transform:translateY(-2px); } .qnix-job-apply:hover span{ transform:translate(3px,-3px); } /* CULTURE */ .qnix-career-culture{ display:grid; grid-template-columns:.95fr 1.05fr; min-height:590px; background:#f4f8ff; overflow:hidden; } .qnix-culture-visual{ position:relative; min-height:590px; background:linear-gradient(145deg,#062d7a,#0758d8); overflow:hidden; } .qnix-culture-visual:before{ content:""; position:absolute; width:520px; height:520px; border:1px solid rgba(255,255,255,.18); transform:rotate(35deg); left:-100px; top:70px; } .culture-line{ position:absolute; width:1px; height:100%; left:25%; background:rgba(255,255,255,.13); } .culture-word{ position:absolute; left:16%; top:31%; color:#fff; font-size:clamp(55px,7vw,100px); font-weight:900; letter-spacing:-6px; line-height:.9; } .culture-word-second{ top:47%; left:30%; color:#b7e51c; } .culture-corner{ position:absolute; right:12%; bottom:12%; width:100px; height:100px; border-right:2px solid #b7e51c; border-bottom:2px solid #b7e51c; } .qnix-culture-copy{ padding:90px 8vw; display:flex; justify-content:center; flex-direction:column; } .qnix-culture-copy h2{ margin:0; color:#0d1730; font-size:clamp(38px,4vw,58px); line-height:1.04; letter-spacing:-2px; } .qnix-culture-copy h2 strong{ color:#0758d8; } .qnix-culture-copy > p{ max-width:560px; margin:22px 0 35px; color:#5d6b84; font-size:16px; line-height:1.8; } .qnix-culture-values{ max-width:600px; display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #dce6f3; } .qnix-culture-values div{ padding:20px 22px 20px 0; border-bottom:1px solid #dce6f3; } .qnix-culture-values div:nth-child(odd){ border-right:1px solid #dce6f3; } .qnix-culture-values div:nth-child(even){ padding-left:22px; } .qnix-culture-values strong{ display:block; margin-bottom:5px; color:#0d1730; font-size:14px; } .qnix-culture-values span{ color:#6b7b91; font-size:12px; line-height:1.5; } /* JOURNEY */ .qnix-career-journey{ padding:105px 7vw 115px; background:#fff; } .career-journey-heading{ text-align:left; max-width:650px; margin:0 0 70px; } .career-journey-heading h2{ font-size:clamp(38px,4vw,56px); } .qnix-journey-track{ max-width:1180px; margin:auto; position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:40px; } .journey-progress{ position:absolute; left:0; right:0; top:9px; height:1px; background:#cddaea; } .journey-item{ position:relative; padding-top:42px; } .journey-node{ position:absolute; top:0; left:0; width:19px; height:19px; background:#fff; border:4px solid #0758d8; box-shadow:0 0 0 6px #eef5ff; } .journey-item:nth-child(3) .journey-node{ border-color:#10a4b4; } .journey-item:nth-child(4) .journey-node{ border-color:#16b98a; } .journey-item:nth-child(5) .journey-node{ border-color:#b7e51c; } .journey-item strong{ display:block; color:#0d1730; font-size:17px; margin-bottom:8px; } .journey-item p{ margin:0; max-width:220px; color:#66768d; font-size:13px; line-height:1.7; } /* CTA */ .qnix-careers-cta{ max-width:1280px; margin:0 auto 90px; min-height:270px; padding:55px 70px; display:flex; align-items:center; justify-content:space-between; gap:40px; overflow:hidden; background:linear-gradient(115deg,#062d7a,#0758d8 58%,#08a8cf); } .qnix-careers-cta-glow{ position:absolute; width:350px; height:350px; right:-100px; top:-130px; border-radius:50%; border:1px solid rgba(183,229,28,.35); box-shadow: 0 0 0 45px rgba(183,229,28,.05), 0 0 0 90px rgba(183,229,28,.025); } .qnix-careers-cta-copy{ position:relative; z-index:2; } .qnix-careers-cta-copy span{ display:block; margin-bottom:12px; color:#b7e51c; font-size:10px; font-weight:900; letter-spacing:2px; } .qnix-careers-cta-copy h2{ margin:0; color:#fff; font-size:clamp(30px,4vw,48px); line-height:1.08; letter-spacing:-1.5px; } .qnix-careers-cta-copy h2 strong{ color:#b7e51c; } .qnix-careers-cta-btn{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:25px; padding:16px 20px; background:#fff; color:#0758d8; text-decoration:none; font-size:12px; font-weight:900; white-space:nowrap; transition:.3s ease; } .qnix-careers-cta-btn span{ transition:.3s ease; } .qnix-careers-cta-btn:hover{ background:#b7e51c; color:#062d7a; transform:translateY(-3px); } .qnix-careers-cta-btn:hover span{ transform:translate(3px,-3px); } /* RESPONSIVE */ @media(max-width:1100px){ .qnix-careers-intro-copy{ padding-left:5vw; padding-right:4vw; } .qnix-careers-visual{ padding:35px; } .qnix-job-trigger{ grid-template-columns:minmax(0,1fr) auto 42px; gap:20px; } .qnix-job-meta{ flex-direction:column; align-items:flex-end; } .qnix-job-content{ grid-template-columns:1fr 1fr; } .qnix-job-content > div:last-child{ grid-column:1/-1; } .qnix-careers-cta{ margin-left:25px; margin-right:25px; } } @media(max-width:800px){ .qnix-careers-intro{ grid-template-columns:1fr; } .qnix-careers-intro-grid{ inset:45% 0 0; } .qnix-careers-intro-copy{ padding:70px 7vw 45px; } .qnix-careers-visual{ min-height:430px; padding:25px 7vw 65px; } .qnix-careers-visual-frame{ max-width:390px; } .qnix-career-culture{ grid-template-columns:1fr; } .qnix-culture-visual{ min-height:420px; } .qnix-culture-copy{ padding:65px 7vw; } .qnix-career-journey{ padding:80px 7vw; } .qnix-journey-track{ grid-template-columns:1fr 1fr; gap:45px 30px; } .journey-progress{ display:none; } .qnix-careers-cta{ padding:45px 35px; flex-direction:column; align-items:flex-start; } } @media(max-width:600px){ .qnix-careers-intro-copy h2{ font-size:43px; letter-spacing:-2px; } .qnix-careers-intro-copy p{ font-size:15px; } .qnix-careers-visual{ min-height:350px; } .career-visual-word{ font-size:62px; } .qnix-openings{ padding:75px 5vw; } .qnix-section-heading{ margin-bottom:35px; } .qnix-job-trigger{ grid-template-columns:1fr 35px; padding:25px 12px; } .qnix-job-meta{ display:none; } .qnix-job-main strong{ font-size:19px; } .qnix-job-overview{ grid-template-columns:1fr 1fr; gap:20px 0; margin:0 12px; } .qnix-job-overview div{ padding:0 12px; border-right:0; } .qnix-job-overview div:nth-child(odd){ padding-left:0; } .qnix-job-content{ grid-template-columns:1fr; margin:0 12px; gap:25px; } .qnix-job-content > div:last-child{ grid-column:auto; } .qnix-job-apply{ margin-left:12px; margin-right:12px; } .qnix-culture-visual{ min-height:330px; } .culture-word{ left:10%; top:30%; font-size:62px; } .culture-word-second{ left:23%; top:48%; } .qnix-culture-copy{ padding:60px 6vw; } .qnix-culture-values{ grid-template-columns:1fr; } .qnix-culture-values div:nth-child(odd){ border-right:0; } .qnix-culture-values div:nth-child(even){ padding-left:0; } .qnix-career-journey{ padding:70px 6vw; } .qnix-journey-track{ grid-template-columns:1fr; gap:35px; } .journey-item{ padding:0 0 0 38px; } .journey-node{ top:2px; } .qnix-careers-cta{ margin:0 15px 55px; padding:42px 28px; } .qnix-careers-cta-copy h2{ font-size:34px; } .qnix-careers-cta-btn{ width:100%; justify-content:space-between; } } /* ========================================================= QNIX DIGITAL — FAQ PAGE ========================================================= */ .qnix-faq-intro, .qnix-faq-workspace, .qnix-faq-contact-strip{ width:100%; position:relative; } /* ========================================================= INTRO ========================================================= */ .qnix-faq-intro{ min-height:525px; display:grid; grid-template-columns:1.05fr .95fr; overflow:hidden; background:#f4f8ff; border-bottom:1px solid #dfe8f3; } .qnix-faq-intro-bg{ position:absolute; inset:0; background: radial-gradient(circle at 72% 42%,rgba(8,168,207,.12),transparent 25%), radial-gradient(circle at 85% 75%,rgba(121,201,28,.09),transparent 18%); } .qnix-faq-intro-copy{ position:relative; z-index:2; padding:85px 7vw; display:flex; flex-direction:column; justify-content:center; } .qnix-faq-label{ display:flex; align-items:center; gap:10px; color:#0758d8; font-size:10px; font-weight:900; letter-spacing:2px; margin-bottom:22px; } .qnix-faq-label:before{ content:""; width:28px; height:2px; background:linear-gradient(90deg,#0758d8,#10a4b4); } .qnix-faq-intro-copy h2{ max-width:680px; margin:0; color:#0d1730; font-size:clamp(48px,6vw,82px); line-height:.98; letter-spacing:-4px; font-weight:700; } .qnix-faq-intro-copy h2 strong{ display:block; color:#0758d8; font-weight:900; } .qnix-faq-intro-copy p{ max-width:610px; margin:26px 0 30px; color:#5d6b84; font-size:16px; line-height:1.8; } .qnix-faq-search{ width:min(590px,100%); height:60px; display:flex; align-items:center; background:#fff; border:1px solid #d8e3f0; box-shadow:0 15px 40px rgba(17,55,110,.08); } .qnix-faq-search-icon{ padding-left:19px; color:#0758d8; font-size:25px; line-height:1; } .qnix-faq-search input{ flex:1; height:100%; min-width:0; padding:0 15px; border:0; outline:0; background:transparent; color:#0d1730; font:inherit; font-size:13px; } .qnix-faq-search input::placeholder{ color:#91a0b3; } .qnix-faq-search-key{ margin-right:10px; padding:7px 9px; background:#f1f6fc; color:#708198; font-size:9px; font-weight:900; letter-spacing:1px; } /* INTRO VISUAL */ .qnix-faq-intro-visual{ position:relative; min-height:525px; overflow:hidden; background:linear-gradient(140deg,#062d7a 0%,#0758d8 55%,#08a8cf 100%); } .faq-visual-grid{ position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px); background-size:38px 38px; mask-image:linear-gradient(90deg,transparent 0%,#000 25%,#000 100%); } .faq-question-mark{ position:absolute; left:50%; top:50%; transform:translate(-50%,-53%); color:rgba(255,255,255,.92); font-size:240px; line-height:.8; font-weight:900; letter-spacing:-20px; text-shadow: 15px 15px 0 rgba(183,229,28,.13), 30px 30px 0 rgba(255,255,255,.04); } .faq-floating{ position:absolute; min-width:155px; padding:14px 16px; background:rgba(255,255,255,.96); box-shadow:0 20px 45px rgba(0,20,70,.2); animation:faqFloat 5s ease-in-out infinite; } .faq-floating span{ display:block; margin-bottom:5px; color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1.5px; } .faq-floating b{ color:#0d1730; font-size:12px; } .faq-float-one{ left:8%; top:18%; } .faq-float-two{ right:7%; top:28%; animation-delay:-1.5s; } .faq-float-three{ left:17%; bottom:16%; border-left:3px solid #b7e51c; animation-delay:-3s; } @keyframes faqFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} } /* ========================================================= FAQ WORKSPACE ========================================================= */ .qnix-faq-workspace{ max-width:1380px; margin:0 auto; padding:95px 5vw 110px; display:grid; grid-template-columns:270px minmax(0,1fr); gap:80px; } .qnix-faq-sidebar{ position:sticky; top:35px; align-self:start; } .faq-sidebar-title{ margin-bottom:17px; color:#7a8aa0; font-size:9px; font-weight:900; letter-spacing:1.8px; } .faq-filter{ width:100%; min-height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 13px; border:0; border-left:2px solid transparent; background:transparent; color:#5d6b84; text-align:left; cursor:pointer; transition:.25s ease; } .faq-filter span{ font-size:12px; font-weight:700; } .faq-filter b{ color:#93a0b2; font-size:9px; font-weight:900; } .faq-filter:hover{ background:#f4f8ff; color:#0758d8; } .faq-filter.active{ border-left-color:#0758d8; background:#f1f6ff; color:#0758d8; } .faq-filter.active b{ color:#0758d8; } .faq-location-card{ position:relative; margin-top:45px; padding:24px 20px; overflow:hidden; background:#062d7a; color:#fff; } .faq-location-card:after{ content:""; position:absolute; width:95px; height:95px; right:-35px; bottom:-40px; border:1px solid rgba(183,229,28,.55); transform:rotate(45deg); } .faq-location-card span{ display:block; margin-bottom:8px; color:#b7e51c; font-size:8px; font-weight:900; letter-spacing:1.5px; } .faq-location-card strong{ display:block; margin-bottom:10px; font-size:20px; } .faq-location-card p{ position:relative; z-index:2; margin:0; color:rgba(255,255,255,.68); font-size:11px; line-height:1.7; } /* FAQ CONTENT */ .qnix-faq-content{ min-width:0; } .faq-category-heading{ padding:0 0 23px; margin:0; border-bottom:1px solid #dfe7f1; } .faq-category-heading:not(:first-child){ margin-top:70px; } .faq-category-heading span{ display:block; margin-bottom:10px; color:#0758d8; font-size:9px; font-weight:900; letter-spacing:1.8px; } .faq-category-heading h3{ margin:0; color:#0d1730; font-size:27px; line-height:1.2; letter-spacing:-.7px; } .qnix-faq-item{ border-bottom:1px solid #e1e8f1; transition:.3s ease; } .qnix-faq-item.hidden{ display:none; } .qnix-faq-question{ width:100%; min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:25px; padding:18px 5px; border:0; background:transparent; color:#172b46; text-align:left; cursor:pointer; } .qnix-faq-question span{ font-size:15px; font-weight:750; transition:.25s ease; } .qnix-faq-question i{ width:30px; height:30px; flex:0 0 30px; display:flex; align-items:center; justify-content:center; border:1px solid #d6e1ee; color:#0758d8; font-style:normal; font-size:19px; font-weight:400; transition:.35s ease; } .qnix-faq-question:hover span{ color:#0758d8; } .qnix-faq-item.open{ padding-left:18px; background:#f8fbff; border-left:2px solid #0758d8; } .qnix-faq-item.open .qnix-faq-question i{ transform:rotate(45deg); background:#0758d8; border-color:#0758d8; color:#fff; } .qnix-faq-answer{ max-height:0; overflow:hidden; opacity:0; transition:max-height .45s ease,opacity .3s ease; } .qnix-faq-item.open .qnix-faq-answer{ max-height:400px; opacity:1; } .qnix-faq-answer p{ max-width:780px; margin:0; padding:0 55px 25px 0; color:#62738a; font-size:13px; line-height:1.85; } .qnix-faq-no-results{ display:none; margin-top:25px; padding:35px; background:#f4f8ff; border:1px solid #dce6f2; text-align:center; } .qnix-faq-no-results.show{ display:block; } .qnix-faq-no-results strong{ display:block; margin-bottom:7px; color:#0d1730; font-size:16px; } .qnix-faq-no-results span{ color:#718197; font-size:12px; } /* ========================================================= CONTACT STRIP ========================================================= */ .qnix-faq-contact-strip{ max-width:1280px; min-height:260px; margin:0 auto 90px; padding:50px 65px; display:grid; grid-template-columns:95px 1fr auto; align-items:center; gap:35px; overflow:hidden; background:linear-gradient(120deg,#062d7a,#0758d8 60%,#08a8cf); } .faq-contact-mark{ width:78px; height:78px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(183,229,28,.65); color:#b7e51c; font-size:42px; font-weight:900; transform:rotate(45deg); } .faq-contact-mark::first-letter{ transform:rotate(-45deg); } .faq-contact-copy{ position:relative; z-index:2; } .faq-contact-copy span{ display:block; margin-bottom:9px; color:#b7e51c; font-size:9px; font-weight:900; letter-spacing:1.8px; } .faq-contact-copy h2{ margin:0; color:#fff; font-size:clamp(28px,3.5vw,45px); line-height:1.08; letter-spacing:-1.5px; } .faq-contact-copy p{ max-width:600px; margin:12px 0 0; color:rgba(255,255,255,.68); font-size:13px; line-height:1.7; } .faq-contact-button{ position:relative; z-index:2; display:inline-flex; align-items:center; justify-content:space-between; gap:30px; min-width:160px; padding:16px 18px; background:#fff; color:#0758d8; text-decoration:none; font-size:12px; font-weight:900; transition:.3s ease; } .faq-contact-button span{ transition:.3s ease; } .faq-contact-button:hover{ background:#b7e51c; color:#062d7a; transform:translateY(-3px); } .faq-contact-button:hover span{ transform:translate(4px,-4px); } /* ========================================================= RESPONSIVE ========================================================= */ @media(max-width:1050px){ .qnix-faq-workspace{ grid-template-columns:220px minmax(0,1fr); gap:45px; } .qnix-faq-contact-strip{ margin-left:25px; margin-right:25px; } .faq-question-mark{ font-size:190px; } } @media(max-width:800px){ .qnix-faq-intro{ grid-template-columns:1fr; } .qnix-faq-intro-copy{ padding:70px 7vw 55px; } .qnix-faq-intro-visual{ min-height:390px; } .qnix-faq-workspace{ display:block; padding:75px 6vw 85px; } .qnix-faq-sidebar{ position:relative; top:auto; margin-bottom:55px; } .faq-sidebar-title{ margin-bottom:10px; } .faq-filter{ width:calc(50% - 4px); display:inline-flex; margin-right:4px; margin-bottom:5px; border:1px solid #dfe7f1; } .faq-filter.active{ border-left:2px solid #0758d8; } .faq-location-card{ margin-top:25px; } .qnix-faq-contact-strip{ grid-template-columns:70px 1fr; padding:45px 35px; } .faq-contact-button{ grid-column:2; width:max-content; } .faq-contact-mark{ width:60px; height:60px; font-size:32px; } } @media(max-width:600px){ .qnix-faq-intro-copy{ padding:60px 6vw 45px; } .qnix-faq-intro-copy h2{ font-size:48px; letter-spacing:-2.5px; } .qnix-faq-intro-copy p{ font-size:14px; } .qnix-faq-search{ height:54px; } .qnix-faq-intro-visual{ min-height:330px; } .faq-question-mark{ font-size:150px; } .faq-floating{ min-width:125px; padding:11px 12px; } .faq-floating b{ font-size:10px; } .faq-float-one{ left:5%; top:13%; } .faq-float-two{ right:5%; top:25%; } .faq-float-three{ left:10%; bottom:12%; } .qnix-faq-workspace{ padding:60px 5vw 70px; } .faq-filter{ width:100%; margin-right:0; } .faq-category-heading:not(:first-child){ margin-top:55px; } .faq-category-heading h3{ font-size:23px; } .qnix-faq-question{ min-height:70px; padding:17px 3px; } .qnix-faq-question span{ font-size:14px; line-height:1.45; } .qnix-faq-item.open{ padding-left:12px; } .qnix-faq-answer p{ padding-right:12px; font-size:12px; } .qnix-faq-contact-strip{ margin:0 15px 55px; padding:38px 25px; display:flex; flex-direction:column; align-items:flex-start; gap:25px; } .faq-contact-mark{ align-self:flex-start; } .faq-contact-copy h2{ font-size:31px; } .faq-contact-button{ width:100%; } } /* ========================================================= QNIX DIGITAL — AWARDS & CERTIFICATIONS PAGE ========================================================= */ .qnix-awards-intro, .qnix-credential-showcase, .qnix-recognition-panel, .qnix-awards-cta{ position:relative; overflow:hidden; } .qnix-awards-intro{ padding:86px 7% 78px; background:#fff; } .qnix-awards-intro-inner{ max-width:1280px; margin:auto; min-height:390px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:70px; } .qnix-awards-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:11px; font-weight:800; letter-spacing:2.2px; color:#0758d8; } .qnix-awards-eyebrow:before{ content:""; width:27px; height:2px; background:linear-gradient(90deg,#0758d8,#16b98a); } .qnix-awards-intro-copy h2, .qnix-showcase-head h2, .qnix-recognition-copy h2, .qnix-awards-cta h2{ margin:18px 0 18px; color:#0d1730; font-size:clamp(38px,4.2vw,64px); line-height:1.02; letter-spacing:-2.8px; font-weight:500; } .qnix-awards-intro-copy h2 strong, .qnix-showcase-head h2 strong, .qnix-recognition-copy h2 strong, .qnix-awards-cta h2 strong{ color:#0758d8; font-weight:800; } .qnix-awards-intro-copy p{ max-width:590px; margin:0; color:#5d6b84; font-size:17px; line-height:1.8; } .qnix-awards-intro-visual{ position:relative; min-height:360px; display:flex; align-items:center; justify-content:center; } .qnix-awards-paper-stack{ position:relative; width:290px; height:340px; transform:rotate(5deg); } .qnix-paper{ position:absolute; width:245px; height:300px; border-radius:7px; border:1px solid #dce6f3; background:#f4f8ff; } .qnix-paper.p-one{ left:20px; top:18px; transform:rotate(-10deg); } .qnix-paper.p-two{ left:36px; top:10px; transform:rotate(-4deg); background:#fff; } .qnix-paper-main{ position:absolute; left:48px; top:0; width:245px; height:315px; padding:34px; background:#fff; border:1px solid #d8e4f2; box-shadow:0 30px 70px rgba(7,88,216,.16); overflow:hidden; } .qnix-paper-main:before{ content:""; position:absolute; width:190px; height:190px; right:-80px; bottom:-90px; border-radius:50%; background:linear-gradient(135deg,#0758d8,#08a8cf,#79c91c); opacity:.15; } .qnix-paper-corner{ position:absolute; top:0; right:0; width:62px; height:62px; background:linear-gradient(135deg,#0758d8,#08a8cf); clip-path:polygon(100% 0,100% 100%,0 0); } .qnix-paper-mark{ width:62px; height:62px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:linear-gradient(135deg,#0758d8,#08a8cf); color:#fff; font-size:30px; font-weight:900; box-shadow:0 12px 30px rgba(7,88,216,.22); } .qnix-paper-lines{ margin-top:35px; } .qnix-paper-lines i{ display:block; height:6px; margin:13px 0; border-radius:10px; background:#e3eaf4; } .qnix-paper-lines i:first-child{ width:75%; background:#0758d8; } .qnix-paper-lines i:nth-child(2){ width:90%; } .qnix-paper-lines i:nth-child(3){ width:62%; } .qnix-paper-seal{ position:absolute; right:32px; bottom:28px; width:48px; height:48px; border:2px solid #79c91c; border-radius:50%; } .qnix-paper-seal:after{ content:""; position:absolute; inset:8px; border:1px dashed #79c91c; border-radius:50%; } .qnix-intro-orbit{ position:absolute; border:1px solid rgba(7,88,216,.12); border-radius:50%; } .qnix-intro-orbit.orbit-a{ width:390px; height:230px; transform:rotate(-20deg); } .qnix-intro-orbit.orbit-b{ width:310px; height:170px; transform:rotate(28deg); } .qnix-credential-showcase{ padding:84px 7% 105px; background:#f4f8ff; } .qnix-showcase-head{ max-width:1280px; margin:0 auto 54px; display:flex; justify-content:space-between; align-items:flex-end; gap:50px; } .qnix-showcase-head h2{ font-size:clamp(34px,3.8vw,54px); margin-bottom:0; } .qnix-showcase-head p{ max-width:400px; margin:0 0 5px; color:#5d6b84; line-height:1.75; font-size:15px; } .qnix-certificate-stage{ max-width:1280px; margin:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:38px; } .qnix-certificate-card{ position:relative; padding:14px; background:#fff; border:1px solid #dce6f3; transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease; } .qnix-certificate-card:nth-child(2), .qnix-certificate-card:nth-child(4), .qnix-certificate-card:nth-child(6){ transform:translateY(46px); } .qnix-certificate-card:hover{ transform:translateY(-7px); border-color:#9bc4f5; box-shadow:0 30px 70px rgba(7,88,216,.14); } .qnix-certificate-card:nth-child(2):hover, .qnix-certificate-card:nth-child(4):hover, .qnix-certificate-card:nth-child(6):hover{ transform:translateY(38px); } .qnix-cert-image{ position:relative; height:365px; overflow:hidden; background:#edf4fc; display:flex; align-items:center; justify-content:center; } .qnix-cert-image:after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(7,88,216,.06),transparent 45%,rgba(121,201,28,.05)); pointer-events:none; } .qnix-cert-image img{ width:100%; height:100%; object-fit:contain; display:block; transition:transform .5s ease; } .qnix-certificate-card:hover .qnix-cert-image img{ transform:scale(1.035); } .qnix-cert-expand{ position:absolute; right:18px; bottom:18px; z-index:2; padding:10px 14px; background:#fff; color:#0758d8; font-size:10px; font-weight:900; letter-spacing:1.4px; box-shadow:0 10px 25px rgba(7,88,216,.15); opacity:0; transform:translateY(8px); transition:.3s ease; } .qnix-certificate-card:hover .qnix-cert-expand{ opacity:1; transform:translateY(0); } .qnix-cert-caption{ height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 8px; } .qnix-cert-caption span{ color:#9aa8bc; font-size:11px; font-weight:800; letter-spacing:1.5px; } .qnix-cert-caption strong{ color:#0d1730; font-size:18px; } .qnix-recognition-panel{ padding:105px 7%; background:#062d7a; } .qnix-recognition-panel:before{ content:""; position:absolute; width:520px; height:520px; right:-220px; top:-240px; border-radius:50%; border:1px solid rgba(255,255,255,.12); } .qnix-recognition-panel:after{ content:""; position:absolute; width:300px; height:300px; left:-170px; bottom:-180px; border-radius:50%; background:rgba(8,168,207,.16); filter:blur(10px); } .qnix-recognition-grid{ position:relative; z-index:2; max-width:1280px; margin:auto; display:grid; grid-template-columns:1.05fr .95fr; gap:100px; align-items:center; } .qnix-recognition-copy .qnix-awards-eyebrow{ color:#b7e51c; } .qnix-recognition-copy .qnix-awards-eyebrow:before{ background:#b7e51c; } .qnix-recognition-copy h2{ color:#fff; font-size:clamp(36px,4vw,58px); } .qnix-recognition-copy h2 strong{ color:#7bd8ed; } .qnix-recognition-copy p{ max-width:650px; color:rgba(255,255,255,.72); line-height:1.85; font-size:16px; margin:0; } .qnix-recognition-lines{ border-top:1px solid rgba(255,255,255,.17); } .qnix-recognition-line{ min-height:96px; display:grid; grid-template-columns:55px 1fr; align-items:center; gap:18px; border-bottom:1px solid rgba(255,255,255,.17); } .qnix-recognition-line > span{ color:#b7e51c; font-size:11px; font-weight:900; letter-spacing:1.5px; } .qnix-recognition-line strong{ display:block; color:#fff; font-size:17px; margin-bottom:5px; } .qnix-recognition-line small{ color:rgba(255,255,255,.58); font-size:13px; } .qnix-awards-cta{ padding:100px 7%; background:linear-gradient(125deg,#062d7a 0%,#0758d8 52%,#087ee7 76%,#10a4b4 100%); } .qnix-awards-cta-glow{ position:absolute; width:400px; height:400px; right:-130px; top:-180px; border-radius:50%; background:rgba(183,229,28,.14); filter:blur(55px); } .qnix-awards-cta-content{ position:relative; z-index:2; max-width:1100px; margin:auto; text-align:center; } .qnix-awards-cta .qnix-awards-eyebrow{ color:#b7e51c; } .qnix-awards-cta .qnix-awards-eyebrow:before{ background:#b7e51c; } .qnix-awards-cta h2{ color:#fff; font-size:clamp(40px,5vw,68px); } .qnix-awards-cta h2 strong{ color:#b7e51c; } .qnix-awards-cta p{ max-width:590px; margin:0 auto 30px; color:rgba(255,255,255,.78); line-height:1.75; } .qnix-awards-btn{ display:inline-flex; align-items:center; gap:18px; padding:15px 21px 15px 24px; background:#fff; color:#0758d8; text-decoration:none; font-size:11px; font-weight:900; letter-spacing:1.5px; transition:.3s ease; } .qnix-awards-btn span{ width:31px; height:31px; display:flex; align-items:center; justify-content:center; background:#0758d8; color:#fff; font-size:17px; transition:.3s ease; } .qnix-awards-btn:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.18); } .qnix-awards-btn:hover span{ background:#79c91c; color:#0d1730; } .qnix-cert-lightbox{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:40px; background:rgba(6,45,122,.94); opacity:0; visibility:hidden; transition:.3s ease; } .qnix-cert-lightbox.active{ opacity:1; visibility:visible; } .qnix-cert-lightbox-inner{ max-width:1000px; max-height:90vh; display:flex; align-items:center; justify-content:center; } .qnix-cert-lightbox-inner img{ max-width:100%; max-height:88vh; object-fit:contain; background:#fff; box-shadow:0 30px 100px rgba(0,0,0,.35); } .qnix-cert-close{ position:absolute; top:22px; right:28px; width:48px; height:48px; border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff; font-size:30px; line-height:1; cursor:pointer; } .qnix-awards-reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease,transform .8s ease; } .qnix-awards-reveal.qnix-awards-visible{ opacity:1; transform:translateY(0); } @media(max-width:1000px){ .qnix-awards-intro-inner, .qnix-recognition-grid{ grid-template-columns:1fr; gap:45px; } .qnix-awards-intro-visual{ min-height:330px; } .qnix-showcase-head{ display:block; } .qnix-showcase-head p{ margin-top:20px; } .qnix-certificate-stage{ gap:25px; } .qnix-certificate-card:nth-child(2), .qnix-certificate-card:nth-child(4), .qnix-certificate-card:nth-child(6){ transform:none; } .qnix-certificate-card:nth-child(2):hover, .qnix-certificate-card:nth-child(4):hover, .qnix-certificate-card:nth-child(6):hover{ transform:translateY(-7px); } } @media(max-width:700px){ .qnix-awards-intro{ padding:65px 6% 60px; } .qnix-awards-intro-inner{ min-height:auto; } .qnix-awards-intro-copy h2, .qnix-showcase-head h2, .qnix-recognition-copy h2{ letter-spacing:-1.8px; } .qnix-awards-intro-copy p{ font-size:15px; } .qnix-awards-intro-visual{ min-height:300px; transform:scale(.86); } .qnix-credential-showcase{ padding:65px 6% 75px; } .qnix-certificate-stage{ grid-template-columns:1fr; } .qnix-cert-image{ height:330px; } .qnix-recognition-panel{ padding:75px 6%; } .qnix-recognition-grid{ gap:40px; } .qnix-awards-cta{ padding:75px 6%; } .qnix-awards-cta h2{ letter-spacing:-2px; } .qnix-cert-lightbox{ padding:20px; } .qnix-cert-close{ top:14px; right:15px; } } /* ========================================================= QNIX DIGITAL — PRIVACY POLICY PAGE ========================================================= */ .qnix-privacy-intro, .qnix-privacy-layout{ position:relative; overflow:hidden; } .qnix-privacy-intro{ padding:82px 7% 76px; background:#fff; } .qnix-privacy-intro-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:90px; } .qnix-privacy-eyebrow{ display:inline-flex; align-items:center; gap:10px; color:#0758d8; font-size:11px; font-weight:900; letter-spacing:2px; } .qnix-privacy-eyebrow:before{ content:""; width:28px; height:2px; background:linear-gradient(90deg,#0758d8,#16b98a); } .qnix-privacy-intro h2{ margin:18px 0 20px; color:#0d1730; font-size:clamp(40px,5vw,68px); line-height:1; letter-spacing:-3px; font-weight:500; } .qnix-privacy-intro h2 strong{ color:#0758d8; font-weight:800; } .qnix-privacy-intro-copy > p{ max-width:620px; margin:0; color:#5d6b84; font-size:16px; line-height:1.8; } .qnix-privacy-meta{ display:flex; gap:10px; margin-top:32px; } .qnix-privacy-meta span{ padding:9px 13px; border:1px solid #dce6f3; color:#5d6b84; background:#f4f8ff; font-size:10px; font-weight:800; letter-spacing:1.2px; } .qnix-privacy-document{ position:relative; width:285px; min-height:355px; margin:auto; padding:25px; background:#fff; border:1px solid #dce6f3; box-shadow:0 28px 70px rgba(7,88,216,.13); transform:rotate(4deg); } .qnix-privacy-document:before{ content:""; position:absolute; width:125px; height:125px; left:-65px; bottom:-55px; border-radius:50%; background:rgba(8,168,207,.12); filter:blur(3px); } .qnix-privacy-document:after{ content:""; position:absolute; width:80px; height:80px; right:-25px; top:-25px; border-radius:50%; background:#b7e51c; opacity:.72; } .qnix-document-top{ position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; padding-bottom:19px; border-bottom:1px solid #e3eaf4; } .qnix-document-top span{ color:#0758d8; font-size:16px; font-weight:900; letter-spacing:1px; } .qnix-document-top i{ width:35px; height:5px; border-radius:10px; background:linear-gradient(90deg,#0758d8,#08a8cf); } .qnix-document-body{ padding-top:30px; } .qnix-document-line{ height:6px; width:100%; margin:14px 0; border-radius:10px; background:#e7edf6; } .qnix-document-line.line-wide{ width:86%; background:#0758d8; } .qnix-document-line.line-short{ width:57%; } .qnix-document-lock{ position:relative; width:76px; height:76px; margin:27px auto; display:flex; align-items:center; justify-content:center; border:1px solid #cddced; border-radius:50%; background:#f4f8ff; } .qnix-document-lock:before{ content:""; position:absolute; width:22px; height:20px; top:24px; border:3px solid #0758d8; border-bottom:0; border-radius:15px 15px 0 0; } .qnix-document-lock span{ width:30px; height:25px; margin-top:16px; border-radius:4px; background:#0758d8; } .qnix-document-footer{ position:absolute; left:25px; right:25px; bottom:22px; display:flex; justify-content:space-between; align-items:center; padding-top:14px; border-top:1px solid #e3eaf4; } .qnix-document-footer span{ color:#5d6b84; font-size:9px; letter-spacing:1.5px; } .qnix-document-footer strong{ color:#79c91c; font-size:11px; letter-spacing:1.5px; } .qnix-privacy-layout{ padding:85px 7% 105px; background:#f4f8ff; display:grid; grid-template-columns:250px minmax(0,850px); justify-content:center; align-items:start; gap:85px; } .qnix-privacy-index{ position:sticky; top:110px; padding:23px 0; border-top:2px solid #0758d8; } .qnix-privacy-index-label{ display:block; margin-bottom:18px; color:#0d1730; font-size:10px; font-weight:900; letter-spacing:1.8px; } .qnix-privacy-index a{ position:relative; display:block; padding:10px 0 10px 17px; color:#5d6b84; text-decoration:none; font-size:13px; line-height:1.4; transition:.25s ease; } .qnix-privacy-index a:before{ content:""; position:absolute; left:0; top:17px; width:5px; height:5px; border-radius:50%; background:#c6d2e2; transition:.25s ease; } .qnix-privacy-index a:hover{ color:#0758d8; transform:translateX(4px); } .qnix-privacy-index a:hover:before{ background:#79c91c; } .qnix-privacy-content{ width:100%; } .qnix-policy-section{ display:grid; grid-template-columns:62px 1fr; gap:24px; padding:0 0 48px; margin-bottom:48px; border-bottom:1px solid #dce6f3; } .qnix-policy-number{ display:flex; align-items:flex-start; justify-content:center; padding-top:5px; color:#0758d8; font-size:11px; font-weight:900; letter-spacing:1px; } .qnix-policy-section h3{ margin:0 0 16px; color:#0d1730; font-size:26px; line-height:1.2; } .qnix-policy-section p{ margin:0 0 15px; color:#5d6b84; font-size:15px; line-height:1.85; } .qnix-policy-section p:last-child{ margin-bottom:0; } .qnix-policy-section ul{ margin:20px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px 25px; } .qnix-policy-section li{ position:relative; padding-left:18px; color:#5d6b84; font-size:14px; line-height:1.6; } .qnix-policy-section li:before{ content:""; position:absolute; left:0; top:9px; width:6px; height:6px; background:#79c91c; border-radius:50%; } .qnix-privacy-contact{ position:relative; display:grid; grid-template-columns:72px 1fr auto; gap:25px; align-items:center; padding:34px; background:linear-gradient(120deg,#062d7a,#0758d8 65%,#08a8cf); overflow:hidden; } .qnix-privacy-contact:after{ content:""; position:absolute; width:190px; height:190px; right:-85px; top:-90px; border-radius:50%; border:1px solid rgba(255,255,255,.18); } .qnix-contact-mark{ position:relative; z-index:2; width:65px; height:65px; display:flex; align-items:center; justify-content:center; background:#b7e51c; color:#0d1730; font-size:27px; font-weight:900; } .qnix-privacy-contact > div:nth-child(2){ position:relative; z-index:2; } .qnix-privacy-contact .qnix-privacy-eyebrow{ color:#b7e51c; } .qnix-privacy-contact .qnix-privacy-eyebrow:before{ background:#b7e51c; } .qnix-privacy-contact h3{ margin:7px 0 5px; color:#fff; font-size:25px; } .qnix-privacy-contact p{ margin:0; max-width:520px; color:rgba(255,255,255,.74); font-size:13px; line-height:1.7; } .qnix-privacy-contact > a{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:12px; padding:13px 16px; background:#fff; color:#0758d8; text-decoration:none; font-size:10px; font-weight:900; letter-spacing:1.2px; white-space:nowrap; transition:.3s ease; } .qnix-privacy-contact > a span{ font-size:16px; } .qnix-privacy-contact > a:hover{ transform:translateY(-3px); box-shadow:0 15px 30px rgba(0,0,0,.15); } .qnix-privacy-reveal{ opacity:0; transform:translateY(25px); transition:opacity .7s ease,transform .7s ease; } .qnix-privacy-reveal.qnix-privacy-visible{ opacity:1; transform:translateY(0); } @media(max-width:950px){ .qnix-privacy-intro-inner{ grid-template-columns:1fr; gap:55px; } .qnix-privacy-document{ margin-right:12%; } .qnix-privacy-layout{ grid-template-columns:1fr; gap:45px; } .qnix-privacy-index{ position:relative; top:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:3px 20px; } .qnix-privacy-index-label{ grid-column:1/-1; } } @media(max-width:650px){ .qnix-privacy-intro{ padding:65px 6%; } .qnix-privacy-intro h2{ font-size:42px; letter-spacing:-2px; } .qnix-privacy-document{ width:250px; min-height:320px; margin:auto; transform:rotate(3deg) scale(.94); } .qnix-privacy-layout{ padding:65px 6% 75px; } .qnix-privacy-index{ display:block; } .qnix-policy-section{ grid-template-columns:1fr; gap:10px; padding-bottom:35px; margin-bottom:35px; } .qnix-policy-number{ justify-content:flex-start; padding-top:0; } .qnix-policy-section h3{ font-size:23px; } .qnix-policy-section ul{ grid-template-columns:1fr; } .qnix-privacy-contact{ grid-template-columns:1fr; gap:18px; padding:27px; } .qnix-privacy-contact > a{ justify-self:start; } } /* ========================================================= QNIX DIGITAL — TERMS & CONDITIONS PAGE ========================================================= */ .qnix-terms-intro, .qnix-terms-layout{ position:relative; overflow:hidden; } .qnix-terms-intro{ padding:82px 7% 78px; background:#fff; } .qnix-terms-intro-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:90px; } .qnix-terms-eyebrow{ display:inline-flex; align-items:center; gap:10px; color:#0758d8; font-size:11px; font-weight:900; letter-spacing:2px; } .qnix-terms-eyebrow:before{ content:""; width:28px; height:2px; background:linear-gradient(90deg,#0758d8,#16b98a); } .qnix-terms-copy h2{ margin:18px 0 20px; color:#0d1730; font-size:clamp(40px,5vw,68px); line-height:1; letter-spacing:-3px; font-weight:500; } .qnix-terms-copy h2 strong{ color:#0758d8; font-weight:800; } .qnix-terms-copy > p{ max-width:610px; margin:0; color:#5d6b84; font-size:16px; line-height:1.8; } .qnix-terms-signature{ display:flex; align-items:center; gap:12px; margin-top:32px; } .qnix-terms-signature span{ color:#0d1730; font-size:10px; font-weight:900; letter-spacing:1.5px; } .qnix-terms-signature i{ width:35px; height:1px; background:#79c91c; } .qnix-terms-signature small{ color:#8b99ad; font-size:9px; letter-spacing:1.4px; } .qnix-terms-visual{ position:relative; min-height:370px; display:flex; justify-content:center; align-items:center; } .qnix-terms-sheet{ position:absolute; width:270px; height:350px; border:1px solid #dce6f3; } .sheet-back{ background:#f4f8ff; transform:rotate(-8deg) translate(-12px,12px); } .sheet-front{ position:relative; z-index:2; padding:27px; background:#fff; box-shadow:0 28px 65px rgba(7,88,216,.15); transform:rotate(4deg); } .sheet-front:before{ content:""; position:absolute; right:0; top:0; width:75px; height:75px; background:linear-gradient(135deg,#0758d8,#08a8cf); clip-path:polygon(100% 0,100% 100%,0 0); } .qnix-sheet-head{ display:flex; justify-content:space-between; align-items:center; padding-bottom:18px; border-bottom:1px solid #e3eaf4; } .qnix-sheet-head strong{ color:#0758d8; font-size:16px; letter-spacing:1px; } .qnix-sheet-head span{ color:#5d6b84; font-size:9px; font-weight:900; letter-spacing:1.5px; } .qnix-sheet-title{ width:62%; height:12px; margin:27px 0 24px; border-radius:8px; background:#0758d8; } .qnix-sheet-row{ width:100%; height:6px; margin:13px 0; border-radius:8px; background:#e3eaf4; } .qnix-sheet-row.wide{ width:88%; } .qnix-sheet-row.short{ width:57%; } .qnix-sheet-rule{ width:100%; height:1px; margin:27px 0; background:#dce6f3; } .qnix-sheet-seal{ position:absolute; right:28px; bottom:28px; width:53px; height:53px; display:flex; align-items:center; justify-content:center; border:2px solid #79c91c; border-radius:50%; } .qnix-sheet-seal:after{ content:""; position:absolute; inset:7px; border:1px dashed #79c91c; border-radius:50%; } .qnix-sheet-seal span{ position:relative; z-index:2; color:#0758d8; font-size:20px; font-weight:900; } .qnix-terms-dot{ position:absolute; border-radius:50%; } .dot-one{ width:14px; height:14px; right:8%; top:19%; background:#b7e51c; box-shadow:0 0 0 10px rgba(183,229,28,.12); } .dot-two{ width:9px; height:9px; left:10%; bottom:15%; background:#08a8cf; } .qnix-terms-layout{ padding:88px 7% 105px; background:#f4f8ff; display:grid; grid-template-columns:250px minmax(0,850px); justify-content:center; align-items:start; gap:85px; } .qnix-terms-index{ position:sticky; top:110px; padding:23px 0; border-top:2px solid #0758d8; } .qnix-terms-index > span{ display:block; margin-bottom:17px; color:#0d1730; font-size:10px; font-weight:900; letter-spacing:1.8px; } .qnix-terms-index a{ position:relative; display:block; padding:10px 0 10px 17px; color:#5d6b84; text-decoration:none; font-size:13px; line-height:1.4; transition:.25s ease; } .qnix-terms-index a:before{ content:""; position:absolute; left:0; top:17px; width:5px; height:5px; border-radius:50%; background:#c6d2e2; transition:.25s ease; } .qnix-terms-index a:hover{ color:#0758d8; transform:translateX(4px); } .qnix-terms-index a:hover:before{ background:#79c91c; } .qnix-terms-section{ display:grid; grid-template-columns:62px 1fr; gap:24px; padding-bottom:48px; margin-bottom:48px; border-bottom:1px solid #dce6f3; } .qnix-terms-number{ display:flex; justify-content:center; align-items:flex-start; padding-top:5px; color:#0758d8; font-size:11px; font-weight:900; letter-spacing:1px; } .qnix-terms-section h3{ margin:0 0 16px; color:#0d1730; font-size:26px; line-height:1.2; } .qnix-terms-section p{ margin:0 0 15px; color:#5d6b84; font-size:15px; line-height:1.85; } .qnix-terms-section p:last-child{ margin-bottom:0; } .qnix-terms-section ul{ margin:20px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px 25px; } .qnix-terms-section li{ position:relative; padding-left:18px; color:#5d6b84; font-size:14px; line-height:1.6; } .qnix-terms-section li:before{ content:""; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background:#79c91c; } .qnix-terms-contact{ position:relative; display:grid; grid-template-columns:72px 1fr auto; gap:25px; align-items:center; padding:34px; background:linear-gradient(120deg,#062d7a,#0758d8 65%,#08a8cf); overflow:hidden; } .qnix-terms-contact:after{ content:""; position:absolute; width:190px; height:190px; right:-85px; top:-90px; border:1px solid rgba(255,255,255,.18); border-radius:50%; } .qnix-terms-contact-mark{ position:relative; z-index:2; width:65px; height:65px; display:flex; align-items:center; justify-content:center; background:#b7e51c; color:#0d1730; font-size:27px; font-weight:900; } .qnix-terms-contact > div:nth-child(2){ position:relative; z-index:2; } .qnix-terms-contact .qnix-terms-eyebrow{ color:#b7e51c; } .qnix-terms-contact .qnix-terms-eyebrow:before{ background:#b7e51c; } .qnix-terms-contact h3{ margin:7px 0 5px; color:#fff; font-size:25px; } .qnix-terms-contact p{ max-width:520px; margin:0; color:rgba(255,255,255,.74); font-size:13px; line-height:1.7; } .qnix-terms-contact > a{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:12px; padding:13px 16px; background:#fff; color:#0758d8; text-decoration:none; font-size:10px; font-weight:900; letter-spacing:1.2px; white-space:nowrap; transition:.3s ease; } .qnix-terms-contact > a span{ font-size:16px; } .qnix-terms-contact > a:hover{ transform:translateY(-3px); box-shadow:0 15px 30px rgba(0,0,0,.15); } .qnix-terms-reveal{ opacity:0; transform:translateY(25px); transition:opacity .7s ease,transform .7s ease; } .qnix-terms-reveal.qnix-terms-visible{ opacity:1; transform:translateY(0); } @media(max-width:950px){ .qnix-terms-intro-inner{ grid-template-columns:1fr; gap:55px; } .qnix-terms-layout{ grid-template-columns:1fr; gap:45px; } .qnix-terms-index{ position:relative; top:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:3px 20px; } .qnix-terms-index > span{ grid-column:1/-1; } } @media(max-width:650px){ .qnix-terms-intro{ padding:65px 6%; } .qnix-terms-copy h2{ font-size:42px; letter-spacing:-2px; } .qnix-terms-visual{ min-height:320px; transform:scale(.9); } .qnix-terms-layout{ padding:65px 6% 75px; } .qnix-terms-index{ display:block; } .qnix-terms-section{ grid-template-columns:1fr; gap:10px; padding-bottom:35px; margin-bottom:35px; } .qnix-terms-number{ justify-content:flex-start; padding-top:0; } .qnix-terms-section h3{ font-size:23px; } .qnix-terms-section ul{ grid-template-columns:1fr; } .qnix-terms-contact{ grid-template-columns:1fr; gap:18px; padding:27px; } .qnix-terms-contact > a{ justify-self:start; } } /* ========================================================= QNIX DIGITAL — REFUND POLICY PAGE ========================================================= */ .qnix-refund-intro, .qnix-refund-layout{ position:relative; overflow:hidden; } .qnix-refund-intro{ padding:84px 7% 78px; background:#fff; } .qnix-refund-intro-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:85px; } .qnix-refund-eyebrow{ display:inline-flex; align-items:center; gap:10px; color:#0758d8; font-size:11px; font-weight:900; letter-spacing:2px; } .qnix-refund-eyebrow:before{ content:""; width:28px; height:2px; background:linear-gradient(90deg,#0758d8,#16b98a); } .qnix-refund-copy h2{ margin:18px 0 20px; color:#0d1730; font-size:clamp(40px,5vw,68px); line-height:1; letter-spacing:-3px; font-weight:500; } .qnix-refund-copy h2 strong{ color:#0758d8; font-weight:800; } .qnix-refund-copy > p{ max-width:620px; margin:0; color:#5d6b84; font-size:16px; line-height:1.8; } .qnix-refund-note{ max-width:500px; margin-top:30px; padding:17px 19px; display:flex; align-items:center; gap:14px; background:#f4f8ff; border-left:3px solid #79c91c; } .qnix-refund-note-icon{ width:34px; height:34px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#0758d8; color:#fff; font-size:14px; font-weight:900; } .qnix-refund-note strong{ display:block; color:#0d1730; font-size:13px; margin-bottom:3px; } .qnix-refund-note small{ color:#5d6b84; font-size:12px; } .qnix-refund-visual{ position:relative; min-height:365px; display:flex; align-items:center; justify-content:center; } .qnix-refund-ring{ position:absolute; border:1px solid rgba(7,88,216,.14); border-radius:50%; } .ring-one{ width:360px; height:210px; transform:rotate(-18deg); } .ring-two{ width:270px; height:150px; transform:rotate(28deg); border-color:rgba(16,164,180,.2); } .qnix-refund-panel{ position:relative; z-index:2; width:270px; height:300px; padding:25px; background:#fff; border:1px solid #dce6f3; box-shadow:0 28px 70px rgba(7,88,216,.15); transform:rotate(4deg); } .qnix-refund-panel:before{ content:""; position:absolute; right:0; top:0; width:70px; height:70px; background:linear-gradient(135deg,#0758d8,#08a8cf); clip-path:polygon(100% 0,100% 100%,0 0); } .qnix-refund-panel-top{ display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid #e3eaf4; } .qnix-refund-panel-top span{ color:#0758d8; font-size:16px; font-weight:900; letter-spacing:1px; } .qnix-refund-panel-top i{ width:34px; height:5px; border-radius:10px; background:#79c91c; } .qnix-refund-symbol{ width:75px; height:75px; margin:35px auto 19px; display:flex; align-items:center; justify-content:center; border:1px solid #cddced; border-radius:50%; background:#f4f8ff; } .qnix-refund-symbol span{ color:#0758d8; font-size:32px; font-weight:500; } .qnix-refund-panel > strong{ display:block; color:#0d1730; text-align:center; font-size:20px; line-height:1.05; letter-spacing:1px; } .qnix-refund-panel > small{ display:block; margin-top:17px; color:#5d6b84; text-align:center; font-size:8px; font-weight:900; letter-spacing:1.2px; } .qnix-refund-layout{ padding:88px 7% 105px; background:#f4f8ff; display:grid; grid-template-columns:250px minmax(0,850px); justify-content:center; align-items:start; gap:85px; } .qnix-refund-index{ position:sticky; top:110px; padding:23px 0; border-top:2px solid #0758d8; } .qnix-refund-index > span{ display:block; margin-bottom:17px; color:#0d1730; font-size:10px; font-weight:900; letter-spacing:1.8px; } .qnix-refund-index a{ position:relative; display:block; padding:10px 0 10px 17px; color:#5d6b84; text-decoration:none; font-size:13px; transition:.25s ease; } .qnix-refund-index a:before{ content:""; position:absolute; left:0; top:17px; width:5px; height:5px; border-radius:50%; background:#c6d2e2; transition:.25s ease; } .qnix-refund-index a:hover{ color:#0758d8; transform:translateX(4px); } .qnix-refund-index a:hover:before{ background:#79c91c; } .qnix-refund-section{ display:grid; grid-template-columns:65px 1fr; gap:24px; padding-bottom:48px; margin-bottom:48px; border-bottom:1px solid #dce6f3; } .qnix-refund-section-head{ display:flex; align-items:flex-start; justify-content:center; gap:10px; } .qnix-refund-section-head span{ color:#0758d8; font-size:11px; font-weight:900; letter-spacing:1px; } .qnix-refund-section-head i{ display:block; width:1px; height:34px; background:#b7e51c; } .qnix-refund-section h3{ margin:0 0 16px; color:#0d1730; font-size:26px; line-height:1.2; } .qnix-refund-section p{ margin:0 0 15px; color:#5d6b84; font-size:15px; line-height:1.85; } .qnix-refund-section p:last-child{ margin-bottom:0; } .qnix-refund-highlight{ position:relative; margin:0 0 48px; padding:42px 45px; overflow:hidden; background:linear-gradient(120deg,#062d7a,#0758d8 68%,#08a8cf); color:#fff; } .qnix-refund-highlight:after{ content:""; position:absolute; width:190px; height:190px; right:-75px; top:-80px; border:1px solid rgba(255,255,255,.18); border-radius:50%; } .qnix-refund-highlight-label{ position:relative; z-index:2; color:#b7e51c; font-size:10px; font-weight:900; letter-spacing:1.8px; } .qnix-refund-highlight h3{ position:relative; z-index:2; max-width:690px; margin:15px 0 14px; color:#fff; font-size:30px; line-height:1.25; } .qnix-refund-highlight p{ position:relative; z-index:2; max-width:690px; margin:0; color:rgba(255,255,255,.75); font-size:14px; line-height:1.8; } .qnix-refund-monthly{ position:relative; margin:0 0 48px; padding:32px; background:#fff; border:1px solid #dce6f3; box-shadow:0 18px 50px rgba(17,55,110,.07); } .qnix-monthly-top{ display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid #e3eaf4; } .qnix-monthly-top span{ color:#0758d8; font-size:10px; font-weight:900; letter-spacing:1.6px; } .qnix-monthly-top strong{ color:#79c91c; font-size:10px; letter-spacing:1.2px; } .qnix-monthly-flow{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:18px; margin:28px 0; } .qnix-monthly-flow > div{ padding:18px; background:#f4f8ff; border:1px solid #e3eaf4; } .qnix-monthly-flow small{ display:block; margin-bottom:6px; color:#8b99ad; font-size:9px; font-weight:800; letter-spacing:1px; } .qnix-monthly-flow strong{ color:#0d1730; font-size:14px; } .qnix-monthly-flow > b{ color:#0758d8; font-size:20px; } .qnix-refund-monthly > p{ margin:0; color:#5d6b84; font-size:14px; line-height:1.8; } .qnix-refund-principles{ margin-bottom:48px; padding:38px; display:grid; grid-template-columns:1fr 1fr; gap:50px; background:#fff; border:1px solid #dce6f3; } .qnix-refund-principles > div:first-child > span{ color:#0758d8; font-size:10px; font-weight:900; letter-spacing:1.7px; } .qnix-refund-principles h3{ margin:15px 0 0; color:#0d1730; font-size:28px; line-height:1.15; } .qnix-refund-principles h3 strong{ color:#0758d8; } .qnix-refund-principle-list{ border-top:1px solid #e3eaf4; } .qnix-refund-principle-list p{ margin:0; padding:13px 0; border-bottom:1px solid #e3eaf4; color:#5d6b84; font-size:13px; line-height:1.5; } .qnix-refund-principle-list b{ display:inline-block; width:32px; color:#0758d8; font-size:10px; } .qnix-refund-contact{ position:relative; display:grid; grid-template-columns:72px 1fr auto; gap:25px; align-items:center; padding:34px; background:linear-gradient(120deg,#062d7a,#0758d8 65%,#08a8cf); overflow:hidden; } .qnix-refund-contact:after{ content:""; position:absolute; width:190px; height:190px; right:-85px; top:-90px; border:1px solid rgba(255,255,255,.18); border-radius:50%; } .qnix-refund-contact-mark{ position:relative; z-index:2; width:65px; height:65px; display:flex; align-items:center; justify-content:center; background:#b7e51c; color:#0d1730; font-size:27px; font-weight:900; } .qnix-refund-contact > div:nth-child(2){ position:relative; z-index:2; } .qnix-refund-contact .qnix-refund-eyebrow{ color:#b7e51c; } .qnix-refund-contact .qnix-refund-eyebrow:before{ background:#b7e51c; } .qnix-refund-contact h3{ margin:7px 0 5px; color:#fff; font-size:25px; } .qnix-refund-contact p{ max-width:520px; margin:0; color:rgba(255,255,255,.74); font-size:13px; line-height:1.7; } .qnix-refund-contact > a{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:12px; padding:13px 16px; background:#fff; color:#0758d8; text-decoration:none; font-size:10px; font-weight:900; letter-spacing:1.2px; white-space:nowrap; transition:.3s ease; } .qnix-refund-contact > a span{ font-size:16px; } .qnix-refund-contact > a:hover{ transform:translateY(-3px); box-shadow:0 15px 30px rgba(0,0,0,.15); } .qnix-refund-reveal{ opacity:0; transform:translateY(25px); transition:opacity .7s ease,transform .7s ease; } .qnix-refund-reveal.qnix-refund-visible{ opacity:1; transform:translateY(0); } @media(max-width:950px){ .qnix-refund-intro-inner{ grid-template-columns:1fr; gap:55px; } .qnix-refund-layout{ grid-template-columns:1fr; gap:45px; } .qnix-refund-index{ position:relative; top:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:3px 20px; } .qnix-refund-index > span{ grid-column:1/-1; } .qnix-refund-principles{ grid-template-columns:1fr; gap:35px; } } @media(max-width:650px){ .qnix-refund-intro{ padding:65px 6%; } .qnix-refund-copy h2{ font-size:42px; letter-spacing:-2px; } .qnix-refund-visual{ min-height:320px; transform:scale(.9); } .qnix-refund-layout{ padding:65px 6% 75px; } .qnix-refund-index{ display:block; } .qnix-refund-section{ grid-template-columns:1fr; gap:10px; padding-bottom:35px; margin-bottom:35px; } .qnix-refund-section-head{ justify-content:flex-start; } .qnix-refund-highlight{ padding:32px 27px; } .qnix-refund-highlight h3{ font-size:24px; } .qnix-refund-monthly{ padding:25px; } .qnix-monthly-top{ display:block; } .qnix-monthly-top strong{ display:block; margin-top:8px; } .qnix-monthly-flow{ grid-template-columns:1fr; gap:8px; } .qnix-monthly-flow > b{ text-align:center; transform:rotate(90deg); } .qnix-refund-principles{ padding:27px; } .qnix-refund-contact{ grid-template-columns:1fr; gap:18px; padding:27px; } .qnix-refund-contact > a{ justify-self:start; } } /* ========================================================= QNIX DIGITAL — CANCELLATION POLICY ========================================================= */ .qnix-cancel-intro, .qnix-cancel-rules, .qnix-cancel-flow, .qnix-cancel-notes, .qnix-cancel-contact{ font-family:inherit; } .qnix-cancel-intro{ padding:78px 24px 86px; background: radial-gradient(circle at 88% 18%,rgba(8,168,207,.16),transparent 25%), linear-gradient(135deg,#f7fbff 0%,#eef6ff 55%,#f9fcff 100%); overflow:hidden; } .qnix-cancel-intro-wrap{ max-width:1220px; margin:auto; display:grid; grid-template-columns:1.35fr .65fr; gap:70px; align-items:center; } .qnix-cancel-kicker, .qnix-cancel-heading span, .qnix-cancel-flow-copy>span, .qnix-cancel-note-main>span, .qnix-cancel-contact-box span{ display:inline-block; color:#0758d8; font-size:11px; font-weight:800; letter-spacing:2px; } .qnix-cancel-intro-copy h2{ margin:15px 0 20px; color:#0d1730; font-size:clamp(42px,5vw,72px); line-height:.98; letter-spacing:-3px; } .qnix-cancel-intro-copy h2 em{ color:#0758d8; font-style:normal; } .qnix-cancel-intro-copy p{ max-width:690px; margin:0; color:#5d6b84; font-size:17px; line-height:1.8; } .qnix-cancel-status{ position:relative; padding:34px; background:#fff; border:1px solid #dce7f5; box-shadow:0 22px 65px rgba(17,55,110,.10); } .qnix-cancel-status:before{ content:""; position:absolute; width:85px; height:85px; right:-20px; top:-20px; border-radius:50%; background:linear-gradient(135deg,#087ee7,#08a8cf,#79c91c); opacity:.12; } .qnix-cancel-status-top{ display:flex; align-items:center; gap:9px; color:#5d6b84; font-size:10px; font-weight:800; letter-spacing:1.6px; } .qnix-status-dot{ width:8px; height:8px; border-radius:50%; background:#16b98a; box-shadow:0 0 0 5px rgba(22,185,138,.12); } .qnix-cancel-status strong{ display:block; margin:28px 0 8px; color:#0d1730; font-size:24px; } .qnix-cancel-status small{ display:block; color:#5d6b84; line-height:1.65; } .qnix-cancel-line{ height:1px; margin:28px 0 22px; background:#e3eaf4; } .qnix-cancel-meta{ display:flex; justify-content:space-between; align-items:center; } .qnix-cancel-meta span{ color:#5d6b84; font-size:10px; font-weight:800; letter-spacing:1.4px; } .qnix-cancel-meta b{ color:#0758d8; font-size:20px; } .qnix-cancel-rules{ padding:95px 24px; background:#fff; } .qnix-cancel-shell{ max-width:1220px; margin:auto; } .qnix-cancel-heading{ max-width:700px; margin-bottom:48px; } .qnix-cancel-heading h2{ margin:12px 0 12px; color:#0d1730; font-size:clamp(34px,4vw,54px); line-height:1.05; letter-spacing:-2px; } .qnix-cancel-heading p{ margin:0; color:#5d6b84; font-size:16px; line-height:1.75; } .qnix-cancel-rule-list{ border-top:1px solid #dfe7f2; } .qnix-cancel-rule{ display:grid; grid-template-columns:70px 1fr 100px; gap:30px; align-items:start; padding:34px 0; border-bottom:1px solid #dfe7f2; transition:.35s ease; } .qnix-cancel-rule:hover{ padding-left:14px; padding-right:14px; background:#f7fbff; } .qnix-rule-mark{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid #cddbed; color:#0758d8; font-size:11px; font-weight:800; } .qnix-rule-content span{ color:#0758d8; font-size:10px; font-weight:800; letter-spacing:1.6px; } .qnix-rule-content h3{ margin:8px 0 10px; color:#0d1730; font-size:24px; letter-spacing:-.6px; } .qnix-rule-content p{ max-width:780px; margin:0; color:#5d6b84; font-size:15px; line-height:1.8; } .qnix-rule-side{ padding-top:10px; text-align:right; color:#dbe6f4; font-size:30px; font-weight:800; letter-spacing:-1px; } .qnix-cancel-flow{ padding:86px 24px; background: linear-gradient(115deg,#062d7a 0%,#0758d8 52%,#087ee7 100%); color:#fff; overflow:hidden; } .qnix-cancel-flow-inner{ max-width:1220px; margin:auto; display:grid; grid-template-columns:.75fr 1.25fr; gap:70px; align-items:center; } .qnix-cancel-flow-copy>span{ color:#b7e51c; } .qnix-cancel-flow-copy h2{ margin:14px 0 18px; font-size:clamp(36px,4vw,54px); line-height:1.02; letter-spacing:-2px; } .qnix-cancel-flow-copy p{ max-width:470px; margin:0; color:rgba(255,255,255,.76); line-height:1.8; } .qnix-cancel-process{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:18px; } .qnix-process-step{ min-height:170px; padding:25px; border:1px solid rgba(255,255,255,.20); background:rgba(255,255,255,.07); backdrop-filter:blur(10px); } .qnix-process-step span{ display:block; margin-bottom:25px; color:#b7e51c; font-size:9px; font-weight:800; letter-spacing:1.6px; } .qnix-process-step strong{ display:block; margin-bottom:8px; font-size:17px; } .qnix-process-step p{ margin:0; color:rgba(255,255,255,.68); font-size:13px; line-height:1.6; } .qnix-process-arrow{ color:#b7e51c; font-size:25px; } .qnix-cancel-notes{ padding:92px 24px; background:#f4f8ff; } .qnix-cancel-notes-wrap{ max-width:1220px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; } .qnix-cancel-note-main h2{ margin:14px 0 18px; color:#0d1730; font-size:clamp(34px,4vw,52px); line-height:1.04; letter-spacing:-2px; } .qnix-cancel-note-main p{ max-width:600px; margin:0; color:#5d6b84; font-size:16px; line-height:1.8; } .qnix-cancel-note-list{ border-top:1px solid #d8e3f1; } .qnix-cancel-note-list div{ display:grid; grid-template-columns:45px 1fr; gap:15px; align-items:center; padding:19px 0; border-bottom:1px solid #d8e3f1; } .qnix-cancel-note-list b{ color:#0758d8; font-size:11px; } .qnix-cancel-note-list span{ color:#0d1730; font-size:14px; } .qnix-cancel-contact{ padding:76px 24px 92px; background:#f4f8ff; } .qnix-cancel-contact-box{ position:relative; max-width:1220px; margin:auto; padding:52px 58px; display:flex; align-items:center; justify-content:space-between; gap:40px; overflow:hidden; background: linear-gradient(120deg,#062d7a 0%,#0758d8 58%,#08a4b4 100%); box-shadow:0 25px 65px rgba(7,88,216,.20); } .qnix-cancel-contact-box:after{ content:""; position:absolute; width:180px; height:180px; right:8%; top:-90px; border-radius:50%; border:30px solid rgba(183,229,28,.10); } .qnix-cancel-contact-box>div{ position:relative; z-index:1; } .qnix-cancel-contact-box span{ color:#b7e51c; } .qnix-cancel-contact-box h2{ margin:10px 0 10px; color:#fff; font-size:clamp(32px,4vw,48px); letter-spacing:-1.5px; } .qnix-cancel-contact-box p{ max-width:620px; margin:0; color:rgba(255,255,255,.76); line-height:1.7; } .qnix-cancel-contact-btn{ position:relative; z-index:2; flex:none; display:inline-flex; align-items:center; gap:18px; padding:17px 22px; background:#fff; color:#0758d8; text-decoration:none; font-size:11px; font-weight:800; letter-spacing:1px; transition:.3s ease; } .qnix-cancel-contact-btn span{ color:#0758d8; font-size:18px; transition:.3s ease; } .qnix-cancel-contact-btn:hover{ background:#b7e51c; color:#062d7a; transform:translateY(-3px); } .qnix-cancel-contact-btn:hover span{ color:#062d7a; transform:translate(3px,-3px); } @media(max-width:900px){ .qnix-cancel-intro-wrap, .qnix-cancel-flow-inner, .qnix-cancel-notes-wrap{ grid-template-columns:1fr; gap:45px; } .qnix-cancel-intro-copy h2{ letter-spacing:-2px; } .qnix-cancel-process{ grid-template-columns:1fr; } .qnix-process-arrow{ display:none; } .qnix-process-step{ min-height:auto; } .qnix-cancel-contact-box{ align-items:flex-start; flex-direction:column; } } @media(max-width:640px){ .qnix-cancel-intro{ padding:60px 18px 65px; } .qnix-cancel-rules, .qnix-cancel-flow, .qnix-cancel-notes{ padding:65px 18px; } .qnix-cancel-contact{ padding:55px 18px 65px; } .qnix-cancel-status{ padding:27px; } .qnix-cancel-rule{ grid-template-columns:48px 1fr; gap:18px; padding:27px 0; } .qnix-rule-side{ display:none; } .qnix-rule-content h3{ font-size:20px; } .qnix-rule-content p{ font-size:14px; } .qnix-cancel-contact-box{ padding:38px 27px; } .qnix-cancel-contact-btn{ width:100%; justify-content:center; } } /* ========================================================= QNIX DIGITAL — CONTACT US ========================================================= */ .qnix-contact-main, .qnix-contact-location, .qnix-contact-reasons, .qnix-contact-final{ font-family:inherit; } .qnix-contact-main{ position:relative; padding:82px 24px 92px; background: radial-gradient(circle at 8% 18%,rgba(8,168,207,.10),transparent 24%), radial-gradient(circle at 94% 82%,rgba(123,197,31,.08),transparent 22%), #f5f9ff; overflow:hidden; } .qnix-contact-main:before{ content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(7,88,216,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.035) 1px,transparent 1px); background-size:55px 55px; pointer-events:none; } .qnix-contact-main-grid{ position:relative; z-index:1; max-width:1240px; margin:auto; display:grid; grid-template-columns:.82fr 1.18fr; gap:70px; align-items:center; } .qnix-contact-eyebrow, .qnix-contact-location>span, .qnix-reasons-head span, .qnix-contact-final span{ display:inline-block; color:#0758d8; font-size:10px; font-weight:800; letter-spacing:2px; } .qnix-contact-intro h2{ margin:17px 0 22px; color:#0d1730; font-size:clamp(46px,5.5vw,78px); line-height:.96; letter-spacing:-4px; } .qnix-contact-intro h2 strong{ display:block; color:#0758d8; font-weight:700; } .qnix-contact-intro>p{ max-width:570px; margin:0; color:#5d6b84; font-size:16px; line-height:1.85; } .qnix-contact-direct{ margin-top:42px; display:flex; flex-direction:column; gap:13px; } .qnix-contact-direct a{ display:flex; align-items:center; gap:16px; width:max-content; color:#0d1730; text-decoration:none; } .qnix-contact-direct-icon{ width:43px; height:43px; display:flex; align-items:center; justify-content:center; border:1px solid #cddbed; color:#0758d8; font-size:17px; transition:.3s ease; } .qnix-contact-direct a:hover .qnix-contact-direct-icon{ background:#0758d8; border-color:#0758d8; color:#fff; transform:translateY(-2px); } .qnix-contact-direct small{ display:block; margin-bottom:3px; color:#7b879b; font-size:8px; font-weight:800; letter-spacing:1.5px; } .qnix-contact-direct strong{ display:block; font-size:15px; font-weight:700; } .qnix-contact-response{ margin-top:43px; padding-top:25px; display:flex; align-items:flex-start; gap:13px; border-top:1px solid #dce6f3; max-width:510px; } .qnix-response-dot{ width:9px; height:9px; flex:none; margin-top:6px; border-radius:50%; background:#16b98a; box-shadow:0 0 0 6px rgba(22,185,138,.10); } .qnix-contact-response strong{ display:block; color:#0d1730; font-size:14px; } .qnix-contact-response p{ margin:4px 0 0; color:#7b879b; font-size:12px; } .qnix-contact-form-wrap{ position:relative; padding:43px 45px 45px; background:#fff; border:1px solid #dce6f3; box-shadow:0 28px 80px rgba(17,55,110,.13); } .qnix-contact-form-wrap:before{ content:""; position:absolute; top:0; left:0; width:95px; height:4px; background:linear-gradient(90deg,#0758d8,#08a8cf,#79c91c); } .qnix-contact-form-head{ margin-bottom:30px; } .qnix-contact-form-head>span{ color:#0758d8; font-size:9px; font-weight:800; letter-spacing:1.8px; } .qnix-contact-form-head h3{ margin:10px 0 8px; color:#0d1730; font-size:32px; letter-spacing:-1.2px; } .qnix-contact-form-head p{ max-width:620px; margin:0; color:#6b7890; font-size:13px; line-height:1.7; } .qnix-contact-form{ display:flex; flex-direction:column; gap:19px; } .qnix-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .qnix-contact-form label{ display:block; } .qnix-contact-form label>span{ display:block; margin-bottom:8px; color:#68758b; font-size:9px; font-weight:800; letter-spacing:1.3px; } .qnix-contact-form input, .qnix-contact-form select, .qnix-contact-form textarea{ width:100%; box-sizing:border-box; border:1px solid #d8e2ef; outline:none; background:#fbfdff; color:#0d1730; padding:13px 14px; font-family:inherit; font-size:13px; border-radius:0; transition:.25s ease; } .qnix-contact-form input, .qnix-contact-form select{ height:47px; } .qnix-contact-form textarea{ resize:vertical; min-height:120px; line-height:1.6; } .qnix-contact-form input::placeholder, .qnix-contact-form textarea::placeholder{ color:#a3afc0; } .qnix-contact-form input:focus, .qnix-contact-form select:focus, .qnix-contact-form textarea:focus{ border-color:#087ee7; background:#fff; box-shadow:0 0 0 3px rgba(8,126,231,.08); } .qnix-form-bottom{ margin-top:4px; display:flex; align-items:center; justify-content:space-between; gap:25px; } .qnix-form-bottom>span{ max-width:310px; color:#8793a6; font-size:10px; line-height:1.55; } .qnix-form-bottom button{ flex:none; display:inline-flex; align-items:center; gap:18px; border:0; padding:15px 20px; background:#0758d8; color:#fff; cursor:pointer; font-family:inherit; font-size:10px; font-weight:800; letter-spacing:1px; transition:.3s ease; } .qnix-form-bottom button b{ font-size:17px; font-weight:400; transition:.3s ease; } .qnix-form-bottom button:hover{ background:#062d7a; transform:translateY(-2px); } .qnix-form-bottom button:hover b{ transform:translate(3px,-3px); } /* FORM STATUS */ .qnix-form-message{ display:flex; align-items:flex-start; gap:13px; margin:0 0 25px; padding:16px 18px; border:1px solid; } .qnix-form-message strong{ display:block; margin-bottom:4px; font-size:13px; } .qnix-form-message p{ margin:0; font-size:11px; line-height:1.6; } .qnix-message-icon{ width:25px; height:25px; flex:none; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; } .qnix-form-success{ border-color:rgba(22,185,138,.28); background:rgba(22,185,138,.07); color:#087b62; } .qnix-form-success .qnix-message-icon{ background:#16b98a; color:#fff; } .qnix-form-error{ border-color:rgba(7,88,216,.22); background:rgba(7,88,216,.05); color:#0758d8; } .qnix-form-error .qnix-message-icon{ background:#0758d8; color:#fff; } /* LOCATION */ .qnix-contact-location{ padding:0; background:#062d7a; color:#fff; overflow:hidden; } .qnix-location-inner{ max-width:1400px; margin:auto; display:grid; grid-template-columns:.8fr 1.2fr; min-height:560px; } .qnix-location-copy{ padding:90px 60px 90px max(24px,calc((100vw - 1240px)/2)); display:flex; justify-content:center; flex-direction:column; } .qnix-location-copy>span{ color:#b7e51c; } .qnix-location-copy h2{ margin:15px 0 20px; font-size:clamp(38px,4vw,59px); line-height:1; letter-spacing:-2.5px; } .qnix-location-copy h2 em{ color:#08a8cf; font-style:normal; } .qnix-location-copy>p{ max-width:500px; margin:0; color:rgba(255,255,255,.67); font-size:14px; line-height:1.85; } .qnix-address{ margin-top:38px; display:flex; align-items:flex-start; gap:15px; } .qnix-address-pin{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(183,229,28,.5); color:#b7e51c; font-size:20px; } .qnix-address small{ display:block; margin-bottom:7px; color:#08a8cf; font-size:9px; font-weight:800; letter-spacing:1.5px; } .qnix-address strong{ display:block; color:#fff; font-size:14px; line-height:1.7; font-weight:600; } /* MAP VISUAL */ .qnix-location-visual{ position:relative; min-height:560px; overflow:hidden; background: radial-gradient(circle at 55% 48%,rgba(8,168,207,.17),transparent 27%), linear-gradient(135deg,#052763,#0758d8 55%,#087ee7); } .qnix-map-grid{ position:absolute; inset:0; opacity:.35; background-image: linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px); background-size:45px 45px; transform:perspective(600px) rotateX(55deg) scale(1.6); transform-origin:center bottom; } .qnix-map-route{ position:absolute; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); transform-origin:left center; } .route-one{ width:68%; left:9%; top:38%; transform:rotate(24deg); } .route-two{ width:56%; left:27%; top:60%; transform:rotate(-19deg); } .route-three{ width:42%; left:43%; top:28%; transform:rotate(72deg); } .qnix-map-node{ position:absolute; width:6px; height:6px; border-radius:50%; background:#b7e51c; box-shadow:0 0 0 7px rgba(183,229,28,.09); } .node-one{ left:23%; top:41%; } .node-two{ left:73%; top:37%; } .node-three{ left:64%; top:70%; } .qnix-map-pin{ position:absolute; left:53%; top:49%; width:88px; height:88px; transform:translate(-50%,-50%); border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.35); box-shadow: 0 0 0 18px rgba(255,255,255,.025), 0 0 0 38px rgba(183,229,28,.025); backdrop-filter:blur(8px); } .qnix-map-pin span{ position:absolute; width:17px; height:17px; border-radius:50%; background:#b7e51c; box-shadow:0 0 25px rgba(183,229,28,.8); } .qnix-map-pin b{ position:absolute; top:calc(100% + 18px); color:#fff; font-size:9px; letter-spacing:2px; } .qnix-map-label{ position:absolute; left:55%; top:66%; padding:12px 15px; border-left:2px solid #b7e51c; background:rgba(6,45,122,.72); backdrop-filter:blur(8px); } .qnix-map-label small{ display:block; color:#b7e51c; font-size:8px; font-weight:800; letter-spacing:1.5px; } .qnix-map-label strong{ display:block; margin-top:3px; color:#fff; font-size:11px; letter-spacing:1px; } .qnix-map-coordinates{ position:absolute; right:35px; bottom:30px; color:rgba(255,255,255,.45); font-size:9px; line-height:1.7; letter-spacing:1px; } /* REASONS */ .qnix-contact-reasons{ padding:100px 24px; background:#fff; } .qnix-reasons-head{ max-width:1240px; margin:0 auto 55px; } .qnix-reasons-head h2{ margin:14px 0 0; color:#0d1730; font-size:clamp(38px,4.5vw,62px); line-height:1; letter-spacing:-2.8px; } .qnix-reasons-grid{ max-width:1240px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #dce6f3; border-left:1px solid #dce6f3; } .qnix-reasons-grid article{ min-height:260px; padding:28px; border-right:1px solid #dce6f3; border-bottom:1px solid #dce6f3; transition:.35s ease; } .qnix-reasons-grid article:hover{ background:#f5f9ff; box-shadow:inset 0 3px 0 #0758d8; } .qnix-reason-number{ color:#0758d8; font-size:10px; font-weight:800; letter-spacing:1px; } .qnix-reasons-grid h3{ margin:58px 0 12px; color:#0d1730; font-size:21px; letter-spacing:-.5px; } .qnix-reasons-grid p{ margin:0; color:#69768c; font-size:13px; line-height:1.75; } /* FINAL */ .qnix-contact-final{ position:relative; padding:95px 24px; background: linear-gradient(120deg,#062d7a 0%,#0758d8 56%,#08a4b4 100%); overflow:hidden; } .qnix-contact-final-glow{ position:absolute; width:420px; height:420px; right:-120px; top:-170px; border-radius:50%; border:70px solid rgba(183,229,28,.08); } .qnix-final-inner{ position:relative; z-index:1; max-width:1240px; margin:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:70px; } .qnix-contact-final span{ color:#b7e51c; } .qnix-contact-final h2{ margin:14px 0 0; color:#fff; font-size:clamp(45px,6vw,76px); line-height:.95; letter-spacing:-4px; } .qnix-contact-final h2 em{ color:#b7e51c; font-style:normal; } .qnix-final-side{ max-width:400px; } .qnix-final-side p{ margin:0 0 20px; color:rgba(255,255,255,.72); font-size:14px; line-height:1.75; } .qnix-final-side a{ display:inline-flex; align-items:center; gap:20px; padding-bottom:9px; border-bottom:1px solid rgba(183,229,28,.7); color:#fff; text-decoration:none; font-size:14px; font-weight:700; } .qnix-final-side a b{ color:#b7e51c; font-size:18px; font-weight:400; transition:.3s ease; } .qnix-final-side a:hover b{ transform:translate(4px,-4px); } /* RESPONSIVE */ @media(max-width:1050px){ .qnix-contact-main-grid{ grid-template-columns:1fr; gap:55px; } .qnix-contact-intro>p{ max-width:700px; } .qnix-contact-form-wrap{ max-width:850px; } .qnix-location-inner{ grid-template-columns:1fr; } .qnix-location-copy{ padding:75px 24px; max-width:850px; margin:auto; width:100%; box-sizing:border-box; } .qnix-location-visual{ min-height:480px; } .qnix-reasons-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:760px){ .qnix-contact-main{ padding:60px 18px 70px; } .qnix-contact-intro h2{ font-size:48px; letter-spacing:-2.5px; } .qnix-contact-form-wrap{ padding:32px 24px; } .qnix-form-row{ grid-template-columns:1fr; gap:19px; } .qnix-form-bottom{ align-items:flex-start; flex-direction:column; } .qnix-form-bottom button{ width:100%; justify-content:center; } .qnix-location-copy{ padding:65px 20px; } .qnix-location-visual{ min-height:410px; } .qnix-reasons-grid{ grid-template-columns:1fr; } .qnix-contact-reasons{ padding:70px 18px; } .qnix-reasons-grid article{ min-height:210px; } .qnix-reasons-grid h3{ margin-top:38px; } .qnix-contact-final{ padding:70px 20px; } .qnix-final-inner{ align-items:flex-start; flex-direction:column; gap:38px; } } @media(max-width:480px){ .qnix-contact-intro h2{ font-size:42px; } .qnix-contact-form-head h3{ font-size:27px; } .qnix-contact-direct a{ width:100%; } .qnix-contact-direct strong{ font-size:14px; } .qnix-map-pin{ left:50%; top:47%; width:72px; height:72px; } .qnix-map-label{ left:52%; top:65%; } .qnix-map-coordinates{ right:20px; bottom:20px; } .qnix-contact-final h2{ font-size:48px; letter-spacing:-2.5px; } } /* ========================================================= QNIX DIGITAL — CASE STUDIES PAGE ========================================================= */ .qnix-case-intro{ position:relative; padding:82px 7% 72px; background:#fff; overflow:hidden; } .qnix-case-intro-inner{ max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:60px; } .qnix-case-intro-copy{ max-width:720px; } .qnix-case-kicker, .qnix-case-heading > span, .qnix-case-method-title > span, .qnix-case-cta-content > span{ display:inline-block; margin-bottom:18px; font-size:11px; font-weight:800; letter-spacing:2.4px; color:#0758d8; } .qnix-case-intro h2{ margin:0; font-size:clamp(42px,5vw,72px); line-height:1.02; letter-spacing:-2.8px; color:#0d1730; font-weight:700; } .qnix-case-intro h2 strong{ color:#0758d8; font-weight:800; } .qnix-case-intro p{ max-width:650px; margin:25px 0 0; color:#5d6b84; font-size:17px; line-height:1.8; } .qnix-case-intro-mark{ width:170px; height:170px; position:relative; flex:0 0 170px; display:flex; align-items:center; justify-content:center; border:1px solid #dce7f4; border-radius:50%; background: radial-gradient(circle at 50% 50%,rgba(8,126,231,.12),transparent 58%), #f4f8ff; } .qnix-case-intro-mark span{ position:relative; z-index:2; font-size:92px; line-height:1; font-weight:900; font-style:italic; color:#0758d8; } .qnix-case-intro-mark i{ position:absolute; width:14px; height:14px; right:22px; top:27px; background:#b7e51c; transform:rotate(45deg); box-shadow:0 0 22px rgba(183,229,28,.55); } .qnix-case-showcase{ padding:88px 5.5% 105px; background:#f4f8ff; position:relative; } .qnix-case-heading{ max-width:1280px; margin:0 auto 46px; } .qnix-case-heading h2{ margin:0; color:#0d1730; font-size:clamp(32px,4vw,54px); letter-spacing:-2px; line-height:1.05; } .qnix-case-heading p{ margin:16px 0 0; color:#5d6b84; font-size:15px; } .qnix-case-grid{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 28px; } .qnix-case-card{ min-width:0; } .qnix-case-card-wide{ grid-column:1 / -1; } .qnix-case-image-wrap{ position:relative; padding:10px; background:#fff; border:1px solid #dce6f3; box-shadow:0 15px 45px rgba(17,55,110,.08); overflow:hidden; } .qnix-case-image-window{ position:relative; height:500px; overflow:hidden; background:#062d7a; cursor:crosshair; } .qnix-case-card-wide .qnix-case-image-window{ height:610px; } .qnix-case-image-window img{ position:absolute; top:0; left:0; width:100%; height:auto; min-height:100%; display:block; object-fit:cover; object-position:top center; transform:translateY(0); transition:transform 5s cubic-bezier(.22,.61,.36,1); will-change:transform; } .qnix-case-image-window:hover img{ transform:translateY(calc(-100% + 500px)); } .qnix-case-card-wide .qnix-case-image-window:hover img{ transform:translateY(calc(-100% + 610px)); } .qnix-case-image-window:after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient( 180deg, rgba(6,45,122,.04), transparent 15%, transparent 80%, rgba(6,45,122,.20) ); } .qnix-case-preview{ position:absolute; z-index:4; left:22px; bottom:20px; padding:9px 13px; background:rgba(255,255,255,.94); color:#0758d8; font-size:9px; font-weight:900; letter-spacing:1.7px; opacity:0; transform:translateY(8px); transition:.35s ease; } .qnix-case-image-window:hover .qnix-case-preview{ opacity:1; transform:translateY(0); } .qnix-case-scroll-line{ position:absolute; z-index:5; right:18px; top:18px; width:2px; height:45px; background:rgba(255,255,255,.72); border-radius:10px; opacity:.8; } .qnix-case-scroll-line:after{ content:""; position:absolute; left:-3px; bottom:-5px; width:8px; height:8px; border-radius:50%; background:#b7e51c; box-shadow:0 0 16px rgba(183,229,28,.8); animation:qnixCaseScrollDot 2s ease-in-out infinite; } @keyframes qnixCaseScrollDot{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(28px)} } .qnix-case-info{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding:20px 5px 0; } .qnix-case-info span{ display:block; margin-bottom:7px; color:#087ee7; font-size:9px; font-weight:900; letter-spacing:1.8px; } .qnix-case-info h3{ margin:0; color:#0d1730; font-size:21px; letter-spacing:-.5px; line-height:1.25; } .qnix-case-info strong{ color:#0758d8; font-size:13px; font-weight:900; padding-top:2px; } .qnix-case-method{ padding:95px 7%; background:#fff; } .qnix-case-method-inner{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:100px; align-items:start; } .qnix-case-method-title h2{ margin:0; color:#0d1730; font-size:clamp(34px,4vw,58px); line-height:1.05; letter-spacing:-2.3px; } .qnix-case-method-title h2 strong{ color:#0758d8; } .qnix-case-method-list{ border-top:1px solid #dce6f3; } .qnix-case-method-list > div{ display:grid; grid-template-columns:150px 1fr; gap:30px; padding:23px 0; border-bottom:1px solid #dce6f3; } .qnix-case-method-list span{ color:#0758d8; font-size:10px; font-weight:900; letter-spacing:1.6px; } .qnix-case-method-list p{ margin:0; color:#5d6b84; font-size:15px; line-height:1.65; } .qnix-case-cta{ position:relative; max-width:1280px; margin:0 auto 90px; min-height:340px; overflow:hidden; display:flex; align-items:center; padding:55px 70px; background: radial-gradient(circle at 85% 15%,rgba(183,229,28,.18),transparent 24%), radial-gradient(circle at 72% 90%,rgba(8,168,207,.28),transparent 30%), linear-gradient(115deg,#062d7a 0%,#0758d8 52%,#087ee7 100%); } .qnix-case-cta-glow{ position:absolute; width:360px; height:360px; right:-100px; bottom:-190px; border-radius:50%; border:1px solid rgba(255,255,255,.18); box-shadow: 0 0 0 35px rgba(255,255,255,.025), 0 0 0 70px rgba(255,255,255,.02); } .qnix-case-cta-content{ position:relative; z-index:2; } .qnix-case-cta-content > span{ color:#b7e51c; margin-bottom:14px; } .qnix-case-cta-content h2{ margin:0 0 28px; color:#fff; font-size:clamp(35px,4vw,58px); line-height:1.03; letter-spacing:-2.2px; } .qnix-case-cta-content h2 strong{ color:#d9f68b; } .qnix-case-cta-content a{ display:inline-flex; align-items:center; gap:16px; padding:14px 20px; background:#fff; color:#0758d8; text-decoration:none; font-size:10px; font-weight:900; letter-spacing:1.4px; transition:.3s ease; } .qnix-case-cta-content a b{ font-size:17px; line-height:1; } .qnix-case-cta-content a:hover{ background:#b7e51c; color:#062d7a; transform:translateX(5px); } .qnix-case-cta-q{ position:absolute; right:8%; top:50%; transform:translateY(-50%); color:rgba(255,255,255,.10); font-size:230px; line-height:1; font-weight:900; font-style:italic; } @media(max-width:900px){ .qnix-case-intro{ padding:65px 6%; } .qnix-case-intro-inner{ gap:35px; } .qnix-case-intro-mark{ width:130px; height:130px; flex-basis:130px; } .qnix-case-intro-mark span{ font-size:68px; } .qnix-case-showcase{ padding:70px 5%; } .qnix-case-image-window{ height:430px; } .qnix-case-card-wide .qnix-case-image-window{ height:500px; } .qnix-case-image-window:hover img{ transform:translateY(calc(-100% + 430px)); } .qnix-case-card-wide .qnix-case-image-window:hover img{ transform:translateY(calc(-100% + 500px)); } .qnix-case-method{ padding:75px 6%; } .qnix-case-method-inner{ gap:55px; } .qnix-case-cta{ margin:0 5% 70px; padding:48px; } } @media(max-width:700px){ .qnix-case-intro{ padding:55px 6%; } .qnix-case-intro-inner{ display:block; } .qnix-case-intro h2{ font-size:43px; letter-spacing:-1.8px; } .qnix-case-intro p{ font-size:15px; } .qnix-case-intro-mark{ margin:30px 0 0 auto; } .qnix-case-showcase{ padding:60px 5%; } .qnix-case-heading{ margin-bottom:32px; } .qnix-case-grid{ grid-template-columns:1fr; gap:40px; } .qnix-case-card-wide{ grid-column:auto; } .qnix-case-image-window, .qnix-case-card-wide .qnix-case-image-window{ height:410px; } .qnix-case-image-window:hover img, .qnix-case-card-wide .qnix-case-image-window:hover img{ transform:translateY(calc(-100% + 410px)); } .qnix-case-method{ padding:65px 6%; } .qnix-case-method-inner{ grid-template-columns:1fr; gap:45px; } .qnix-case-method-list > div{ grid-template-columns:110px 1fr; gap:18px; } .qnix-case-cta{ min-height:330px; margin:0 4% 55px; padding:40px 28px; } .qnix-case-cta-q{ right:-20px; top:auto; bottom:-50px; transform:none; font-size:180px; } .qnix-case-cta-content{ max-width:100%; } } @media(max-width:480px){ .qnix-case-intro h2{ font-size:37px; } .qnix-case-image-wrap{ padding:7px; } .qnix-case-image-window, .qnix-case-card-wide .qnix-case-image-window{ height:350px; } .qnix-case-image-window:hover img, .qnix-case-card-wide .qnix-case-image-window:hover img{ transform:translateY(calc(-100% + 350px)); } .qnix-case-info h3{ font-size:18px; } .qnix-case-method-list > div{ grid-template-columns:1fr; gap:8px; } .qnix-case-cta-content h2{ font-size:35px; } } /* ========================================================= QNIX DIGITAL — CLIENT REVIEWS PAGE ========================================================= */ .qnix-reviews-intro{ padding:82px 7% 75px; background:#fff; overflow:hidden; } .qnix-reviews-intro-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:1fr 280px; gap:80px; align-items:center; } .qnix-reviews-intro-copy > span, .qnix-reviews-wall-heading > span, .qnix-reviews-values-head > span, .qnix-reviews-cta-content > span{ display:inline-block; margin-bottom:17px; color:#0758d8; font-size:10px; font-weight:900; letter-spacing:2.2px; } .qnix-reviews-intro-copy h2{ margin:0; max-width:850px; color:#0d1730; font-size:clamp(42px,5vw,70px); line-height:1.02; letter-spacing:-3px; } .qnix-reviews-intro-copy h2 strong{ color:#0758d8; } .qnix-reviews-intro-copy p{ max-width:700px; margin:24px 0 0; color:#5d6b84; font-size:16px; line-height:1.8; } .qnix-reviews-signal{ width:230px; height:230px; position:relative; margin:auto; display:flex; align-items:center; justify-content:center; } .qnix-review-signal-ring{ position:absolute; border:1px solid #dce6f3; border-radius:50%; } .ring-one{ inset:10px; } .ring-two{ inset:38px; border-color:#9ed5ed; } .qnix-review-signal-core{ width:110px; height:110px; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; background:linear-gradient(145deg,#0758d8,#08a8cf); box-shadow:0 20px 50px rgba(7,88,216,.22); } .qnix-review-signal-core strong{ color:#fff; font-size:58px; line-height:.8; font-style:italic; } .qnix-review-signal-core span{ margin-top:9px; color:#b7e51c; font-size:8px; font-weight:900; letter-spacing:2px; } .qnix-reviews-feature{ padding:0 7% 90px; background:#fff; } .qnix-review-feature-card{ max-width:1280px; min-height:390px; margin:auto; position:relative; overflow:hidden; display:grid; grid-template-columns:120px 1fr 130px; align-items:center; background: radial-gradient(circle at 82% 15%,rgba(183,229,28,.18),transparent 25%), linear-gradient(125deg,#062d7a,#0758d8 65%,#087ee7); box-shadow:0 25px 70px rgba(6,45,122,.18); } .qnix-review-quote-mark{ align-self:start; padding:35px 0 0 35px; color:rgba(255,255,255,.15); font-family:Georgia,serif; font-size:130px; line-height:.7; } .qnix-review-feature-content{ padding:55px 20px; } .qnix-review-label{ display:block; margin-bottom:20px; color:#b7e51c; font-size:9px; font-weight:900; letter-spacing:2px; } .qnix-review-feature-content blockquote{ max-width:850px; margin:0; color:#fff; font-size:clamp(24px,3vw,38px); line-height:1.3; letter-spacing:-1px; } .qnix-review-client{ margin-top:32px; display:flex; align-items:center; gap:14px; } .qnix-review-avatar{ width:43px; height:43px; flex:0 0 43px; display:flex; justify-content:center; align-items:center; border-radius:50%; background:#f4f8ff; color:#0758d8; font-size:11px; font-weight:900; } .qnix-review-client strong, .qnix-review-person strong{ display:block; color:#fff; font-size:13px; } .qnix-review-client span, .qnix-review-person span{ display:block; margin-top:4px; color:rgba(255,255,255,.65); font-size:10px; } .qnix-review-feature-side{ align-self:stretch; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:35px 20px; border-left:1px solid rgba(255,255,255,.15); } .qnix-review-feature-side span{ color:rgba(255,255,255,.6); font-size:9px; line-height:1.6; letter-spacing:1.7px; font-weight:900; } .qnix-review-feature-side strong{ color:#b7e51c; font-size:14px; } .qnix-reviews-wall{ padding:95px 6%; background:#f4f8ff; } .qnix-reviews-wall-heading{ max-width:1280px; margin:0 auto 45px; } .qnix-reviews-wall-heading h2{ margin:0; color:#0d1730; font-size:clamp(35px,4vw,55px); line-height:1.04; letter-spacing:-2.2px; } .qnix-reviews-wall-heading h2 strong{ color:#0758d8; } .qnix-review-grid{ max-width:1280px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .qnix-review-card{ min-height:320px; padding:28px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid #dce6f3; transition:.35s ease; } .qnix-review-card:hover{ transform:translateY(-7px); box-shadow:0 25px 55px rgba(17,55,110,.12); } .review-white{ background:#fff; } .review-blue{ background:#0758d8; } .review-dark{ background:#062d7a; } .review-green{ background:#16b98a; } .qnix-review-top{ display:flex; justify-content:space-between; align-items:start; } .qnix-review-top span{ font-size:9px; font-weight:900; letter-spacing:1.6px; } .review-white .qnix-review-top span{ color:#0758d8; } .review-blue .qnix-review-top span, .review-dark .qnix-review-top span, .review-green .qnix-review-top span{ color:#b7e51c; } .qnix-review-top b{ font-family:Georgia,serif; font-size:48px; line-height:.5; } .review-white .qnix-review-top b{ color:#0758d8; } .review-blue .qnix-review-top b, .review-dark .qnix-review-top b, .review-green .qnix-review-top b{ color:rgba(255,255,255,.25); } .qnix-review-card > p{ margin:25px 0; font-size:15px; line-height:1.75; } .review-white > p{ color:#5d6b84; } .review-blue > p, .review-dark > p, .review-green > p{ color:#fff; } .qnix-review-person{ display:flex; align-items:center; gap:12px; } .review-white .qnix-review-person strong{ color:#0d1730; } .review-white .qnix-review-person span{ color:#5d6b84; } .review-blue .qnix-review-avatar, .review-dark .qnix-review-avatar, .review-green .qnix-review-avatar{ background:#fff; } .qnix-reviews-values{ padding:95px 7%; background:#fff; } .qnix-reviews-values-head{ max-width:700px; margin-bottom:55px; } .qnix-reviews-values-head h2{ margin:0; color:#0d1730; font-size:clamp(34px,4vw,53px); line-height:1.06; letter-spacing:-2px; } .qnix-reviews-values-head h2 strong{ color:#0758d8; } .qnix-review-values-line{ max-width:1280px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #dce6f3; } .qnix-review-values-line > div{ padding:28px 30px 20px 0; border-right:1px solid #dce6f3; } .qnix-review-values-line > div:not(:first-child){ padding-left:30px; } .qnix-review-values-line > div:last-child{ border-right:0; } .qnix-review-values-line strong{ color:#0758d8; font-size:11px; } .qnix-review-values-line h3{ margin:18px 0 10px; color:#0d1730; font-size:21px; } .qnix-review-values-line p{ margin:0; color:#5d6b84; font-size:14px; line-height:1.7; } .qnix-reviews-cta{ max-width:1280px; min-height:340px; margin:0 auto 90px; position:relative; overflow:hidden; display:flex; align-items:center; padding:55px 70px; background: radial-gradient(circle at 80% 20%,rgba(183,229,28,.16),transparent 25%), linear-gradient(120deg,#062d7a,#0758d8 58%,#08a8cf); } .qnix-reviews-cta-content{ position:relative; z-index:3; } .qnix-reviews-cta-content > span{ color:#b7e51c; } .qnix-reviews-cta-content h2{ margin:0 0 27px; color:#fff; font-size:clamp(36px,4vw,57px); line-height:1.03; letter-spacing:-2.2px; } .qnix-reviews-cta-content h2 strong{ color:#dff59b; } .qnix-reviews-cta-content a{ display:inline-flex; align-items:center; gap:15px; padding:14px 20px; background:#fff; color:#0758d8; text-decoration:none; font-size:9px; font-weight:900; letter-spacing:1.5px; transition:.3s ease; } .qnix-reviews-cta-content a b{ font-size:17px; } .qnix-reviews-cta-content a:hover{ background:#b7e51c; color:#062d7a; transform:translateX(5px); } .qnix-reviews-cta-art{ position:absolute; right:7%; top:50%; width:280px; height:280px; transform:translateY(-50%); } .qnix-reviews-cta-art div{ position:absolute; inset:25px; border:1px solid rgba(255,255,255,.18); transform:rotate(45deg); } .qnix-reviews-cta-art:before, .qnix-reviews-cta-art:after{ content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,.09); border-radius:50%; } .qnix-reviews-cta-art:after{ inset:55px; } .qnix-reviews-cta-art span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.13); font-size:150px; font-weight:900; font-style:italic; } @media(max-width:950px){ .qnix-reviews-intro-inner{ grid-template-columns:1fr 190px; gap:40px; } .qnix-reviews-signal{ width:180px; height:180px; } .qnix-review-signal-core{ width:90px; height:90px; } .qnix-review-signal-core strong{ font-size:45px; } .qnix-review-grid{ grid-template-columns:repeat(2,1fr); } .qnix-review-card:last-child{ grid-column:1 / -1; } } @media(max-width:700px){ .qnix-reviews-intro{ padding:60px 6%; } .qnix-reviews-intro-inner{ grid-template-columns:1fr; } .qnix-reviews-intro-copy h2{ font-size:42px; letter-spacing:-1.8px; } .qnix-reviews-signal{ margin:15px 0 0 auto; } .qnix-reviews-feature{ padding:0 5% 65px; } .qnix-review-feature-card{ grid-template-columns:1fr; } .qnix-review-quote-mark{ position:absolute; top:25px; left:25px; padding:0; font-size:100px; } .qnix-review-feature-content{ padding:65px 28px 45px; } .qnix-review-feature-content blockquote{ font-size:25px; } .qnix-review-feature-side{ display:none; } .qnix-reviews-wall{ padding:65px 5%; } .qnix-review-grid{ grid-template-columns:1fr; } .qnix-review-card:last-child{ grid-column:auto; } .qnix-reviews-values{ padding:65px 6%; } .qnix-review-values-line{ grid-template-columns:1fr; } .qnix-review-values-line > div, .qnix-review-values-line > div:not(:first-child){ padding:25px 0; border-right:0; border-bottom:1px solid #dce6f3; } .qnix-review-values-line > div:last-child{ border-bottom:0; } .qnix-reviews-cta{ margin:0 4% 55px; padding:45px 28px; min-height:330px; } .qnix-reviews-cta-art{ right:-55px; top:auto; bottom:-80px; transform:none; opacity:.75; } } @media(max-width:480px){ .qnix-reviews-intro-copy h2{ font-size:36px; } .qnix-review-feature-content blockquote{ font-size:22px; } .qnix-review-card{ min-height:300px; } .qnix-reviews-cta-content h2{ font-size:34px; } } /* ========================================================= QNIX DIGITAL — VIDEO TESTIMONIALS PAGE ========================================================= */ .qnix-video-testimonials-intro{ padding:82px 7% 76px; background:#fff; overflow:hidden; } .qnix-video-intro-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:1fr 250px; gap:80px; align-items:center; } .qnix-video-intro-copy > span, .qnix-video-feature-copy > span, .qnix-video-library-heading span, .qnix-video-belief-copy > span, .qnix-video-cta span{ display:inline-block; margin-bottom:17px; color:#0758d8; font-size:10px; font-weight:900; letter-spacing:2.2px; } .qnix-video-intro-copy h2{ margin:0; color:#0d1730; font-size:clamp(42px,5vw,70px); line-height:1.02; letter-spacing:-3px; } .qnix-video-intro-copy h2 strong{ color:#0758d8; } .qnix-video-intro-copy p{ max-width:700px; margin:25px 0 0; color:#5d6b84; font-size:16px; line-height:1.8; } .qnix-video-intro-play{ width:220px; height:220px; margin:auto; position:relative; display:flex; align-items:center; justify-content:center; } .qnix-video-play-ring{ position:absolute; border:1px solid #dce6f3; border-radius:50%; } .ring-a{ inset:0; animation:qnixVideoPulse 4s ease-in-out infinite; } .ring-b{ inset:27px; border-color:#9bd5e8; } @keyframes qnixVideoPulse{ 0%,100%{transform:scale(.96);opacity:.6} 50%{transform:scale(1.04);opacity:1} } .qnix-video-play-button{ width:92px; height:92px; position:relative; z-index:2; display:flex; align-items:center; justify-content:center; border-radius:50%; background:linear-gradient(145deg,#0758d8,#08a8cf); box-shadow:0 20px 55px rgba(7,88,216,.24); transition:.35s ease; } .qnix-video-intro-play:hover .qnix-video-play-button{ transform:scale(1.08); box-shadow:0 25px 65px rgba(7,88,216,.32); } .qnix-video-play-button span{ color:#fff; font-size:25px; margin-left:4px; } .qnix-video-intro-play small{ position:absolute; bottom:0; color:#0758d8; font-size:8px; font-weight:900; letter-spacing:2px; } .qnix-video-feature{ padding:0 6% 95px; background:#fff; } .qnix-video-feature-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:1.45fr .8fr; gap:50px; align-items:center; } .qnix-video-player{ min-width:0; } .qnix-video-frame{ position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; background:#062d7a; box-shadow:0 28px 70px rgba(17,55,110,.16); } .qnix-video-frame:before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border:1px solid rgba(255,255,255,.14); } .qnix-video-frame iframe{ width:100%; height:100%; border:0; display:block; } .qnix-video-player-bar{ min-height:58px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:20px; background:#062d7a; } .qnix-video-player-bar span{ color:#b7e51c; font-size:9px; font-weight:900; letter-spacing:1.7px; } .qnix-video-player-bar strong{ color:#fff; font-size:9px; letter-spacing:1.4px; } .qnix-video-feature-copy{ padding-right:15px; } .qnix-video-feature-copy h2{ margin:0; color:#0d1730; font-size:clamp(34px,3.5vw,52px); line-height:1.05; letter-spacing:-2px; } .qnix-video-feature-copy h2 strong{ color:#0758d8; } .qnix-video-feature-copy p{ margin:22px 0 30px; color:#5d6b84; font-size:15px; line-height:1.75; } .qnix-video-story-line{ border-top:1px solid #dce6f3; } .qnix-video-story-line div{ display:flex; align-items:center; gap:20px; padding:14px 0; border-bottom:1px solid #dce6f3; } .qnix-video-story-line strong{ color:#0758d8; font-size:10px; } .qnix-video-story-line span{ color:#0d1730; font-size:10px; font-weight:900; letter-spacing:1.2px; } .qnix-video-library{ padding:92px 6% 105px; background:#f4f8ff; } .qnix-video-library-heading{ max-width:1280px; margin:0 auto 45px; display:flex; justify-content:space-between; align-items:end; gap:50px; } .qnix-video-library-heading h2{ margin:0; color:#0d1730; font-size:clamp(36px,4vw,55px); line-height:1.04; letter-spacing:-2.2px; } .qnix-video-library-heading h2 strong{ color:#0758d8; } .qnix-video-library-heading p{ max-width:420px; margin:0; color:#5d6b84; font-size:14px; line-height:1.7; } .qnix-video-grid{ max-width:1280px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .qnix-video-card{ overflow:hidden; background:#fff; border:1px solid #dce6f3; transition:.35s ease; } .qnix-video-card:hover{ transform:translateY(-7px); box-shadow:0 25px 55px rgba(17,55,110,.12); } .qnix-video-card-media{ position:relative; aspect-ratio:16 / 9; overflow:hidden; background:#062d7a; } .qnix-video-card-media iframe{ width:100%; height:100%; border:0; display:block; } .qnix-video-card-tag{ position:absolute; left:13px; bottom:13px; z-index:3; padding:7px 9px; background:#fff; color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1.2px; } .qnix-video-card-info{ padding:23px 22px 25px; } .qnix-video-card-info > span{ color:#087ee7; font-size:8px; font-weight:900; letter-spacing:1.5px; } .qnix-video-card-info h3{ margin:9px 0 22px; color:#0d1730; font-size:20px; line-height:1.25; } .qnix-video-client{ display:flex; align-items:center; gap:11px; } .qnix-video-client-avatar{ width:38px; height:38px; flex:0 0 38px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#eaf4ff; color:#0758d8; font-size:9px; font-weight:900; } .qnix-video-client strong{ display:block; color:#0d1730; font-size:11px; } .qnix-video-client small{ display:block; margin-top:3px; color:#5d6b84; font-size:9px; } .qnix-video-belief{ padding:100px 7%; background:#fff; } .qnix-video-belief-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:170px 1fr .8fr; gap:65px; align-items:center; } .qnix-video-belief-mark{ width:145px; height:145px; display:flex; align-items:center; justify-content:center; background:#0758d8; transform:rotate(45deg); } .qnix-video-belief-mark span{ color:#b7e51c; font-size:90px; font-weight:900; font-style:italic; transform:rotate(-45deg); } .qnix-video-belief-copy h2{ margin:0; color:#0d1730; font-size:clamp(32px,3.7vw,52px); line-height:1.05; letter-spacing:-2px; } .qnix-video-belief-copy h2 strong{ color:#0758d8; } .qnix-video-belief-copy p{ max-width:620px; margin:20px 0 0; color:#5d6b84; font-size:15px; line-height:1.75; } .qnix-video-belief-points{ border-top:1px solid #dce6f3; } .qnix-video-belief-points div{ padding:16px 0; border-bottom:1px solid #dce6f3; } .qnix-video-belief-points strong{ display:inline-block; margin-right:8px; color:#0758d8; font-size:13px; } .qnix-video-belief-points span{ color:#5d6b84; font-size:12px; } .qnix-video-cta{ max-width:1280px; margin:0 auto 90px; padding:55px 70px; min-height:300px; display:flex; align-items:center; background: radial-gradient(circle at 84% 15%,rgba(183,229,28,.17),transparent 25%), linear-gradient(120deg,#062d7a,#0758d8 58%,#08a8cf); } .qnix-video-cta-inner{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:40px; } .qnix-video-cta span{ color:#b7e51c; } .qnix-video-cta h2{ margin:0; color:#fff; font-size:clamp(35px,4vw,55px); line-height:1.03; letter-spacing:-2px; } .qnix-video-cta h2 strong{ color:#def59a; } .qnix-video-cta a{ display:inline-flex; align-items:center; gap:15px; padding:15px 21px; white-space:nowrap; background:#fff; color:#0758d8; text-decoration:none; font-size:9px; font-weight:900; letter-spacing:1.5px; transition:.3s ease; } .qnix-video-cta a b{ font-size:17px; } .qnix-video-cta a:hover{ background:#b7e51c; color:#062d7a; transform:translateX(5px); } @media(max-width:950px){ .qnix-video-intro-inner{ grid-template-columns:1fr 190px; gap:45px; } .qnix-video-intro-play{ width:180px; height:180px; } .qnix-video-feature-inner{ grid-template-columns:1fr; gap:45px; } .qnix-video-feature-copy{ max-width:760px; } .qnix-video-grid{ grid-template-columns:repeat(2,1fr); } .qnix-video-card:last-child{ grid-column:1 / -1; max-width:calc(50% - 12px); } .qnix-video-belief-inner{ grid-template-columns:130px 1fr; } .qnix-video-belief-points{ grid-column:2; } .qnix-video-cta{ margin-left:5%; margin-right:5%; } } @media(max-width:700px){ .qnix-video-testimonials-intro{ padding:60px 6%; } .qnix-video-intro-inner{ grid-template-columns:1fr; } .qnix-video-intro-copy h2{ font-size:41px; letter-spacing:-1.8px; } .qnix-video-intro-play{ margin:10px 0 0 auto; } .qnix-video-feature{ padding:0 5% 65px; } .qnix-video-player-bar{ min-height:52px; } .qnix-video-player-bar strong{ display:none; } .qnix-video-library{ padding:65px 5%; } .qnix-video-library-heading{ display:block; } .qnix-video-library-heading p{ margin-top:18px; } .qnix-video-grid{ grid-template-columns:1fr; } .qnix-video-card:last-child{ grid-column:auto; max-width:none; } .qnix-video-belief{ padding:70px 6%; } .qnix-video-belief-inner{ grid-template-columns:1fr; gap:40px; } .qnix-video-belief-points{ grid-column:auto; } .qnix-video-belief-mark{ width:115px; height:115px; } .qnix-video-belief-mark span{ font-size:70px; } .qnix-video-cta{ min-height:320px; margin:0 4% 55px; padding:45px 28px; } .qnix-video-cta-inner{ display:block; } .qnix-video-cta a{ margin-top:28px; } } @media(max-width:480px){ .qnix-video-intro-copy h2{ font-size:36px; } .qnix-video-feature-copy h2{ font-size:34px; } .qnix-video-card-info h3{ font-size:18px; } .qnix-video-cta h2{ font-size:34px; } } /* ========================================================= QNIX DIGITAL — SEO RESULTS PAGE ========================================================= */ .qnix-seo-results-intro, .qnix-seo-results-showcase, .qnix-seo-insight, .qnix-seo-results-cta{ position:relative; overflow:hidden; } .qnix-seo-results-intro{ padding:82px 7% 76px; background: radial-gradient(circle at 82% 28%,rgba(8,168,207,.13),transparent 30%), linear-gradient(135deg,#f4f8ff 0%,#ffffff 56%,#eef8ff 100%); } .qnix-seo-results-intro-inner{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:70px; } .qnix-seo-results-copy{ max-width:650px; } .qnix-seo-results-eyebrow, .qnix-seo-results-heading > span, .qnix-seo-insight-copy > span, .qnix-seo-results-cta span{ display:inline-flex; align-items:center; gap:9px; font-size:11px; font-weight:800; letter-spacing:.18em; color:#0758d8; } .qnix-seo-results-eyebrow:before{ content:""; width:27px; height:2px; background:linear-gradient(90deg,#0758d8,#16b98a); } .qnix-seo-results-copy h2{ margin:17px 0 20px; font-size:clamp(40px,4.5vw,66px); line-height:1.02; letter-spacing:-.045em; color:#0d1730; font-weight:800; } .qnix-seo-results-copy h2 span{ display:block; background:linear-gradient(90deg,#0758d8,#08a8cf,#16b98a); -webkit-background-clip:text; background-clip:text; color:transparent; } .qnix-seo-results-copy p{ max-width:590px; margin:0; color:#5d6b84; font-size:16px; line-height:1.8; } .qnix-seo-results-meta{ margin-top:34px; display:flex; flex-wrap:wrap; gap:28px; } .qnix-seo-results-meta div{ padding-left:15px; border-left:2px solid #dbe7f4; } .qnix-seo-results-meta strong{ display:block; color:#0758d8; font-size:12px; letter-spacing:.1em; } .qnix-seo-results-meta span{ display:block; margin-top:5px; color:#5d6b84; font-size:12px; } .qnix-seo-results-visual{ min-height:410px; position:relative; display:flex; justify-content:center; align-items:center; } .qnix-seo-grid-lines{ position:absolute; inset:15px 0; background-image: linear-gradient(rgba(7,88,216,.08) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.08) 1px,transparent 1px); background-size:38px 38px; mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent); opacity:.75; } .qnix-seo-search-card{ width:min(430px,88%); padding:27px; position:relative; z-index:2; background:rgba(255,255,255,.95); border:1px solid #dce7f4; box-shadow:0 28px 70px rgba(17,55,110,.14); transform:rotate(-2deg); } .qnix-seo-search-card:before{ content:""; position:absolute; inset:-1px; border:1px solid rgba(8,168,207,.2); transform:translate(10px,10px); z-index:-1; } .qnix-seo-search-top{ display:flex; align-items:center; gap:10px; color:#5d6b84; font-size:10px; font-weight:800; letter-spacing:.14em; } .qnix-seo-dot{ width:8px; height:8px; border-radius:50%; background:#16b98a; box-shadow:0 0 0 6px rgba(22,185,138,.1); } .qnix-seo-search-bar{ margin-top:25px; height:51px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; border:1px solid #dce6f3; border-radius:7px; color:#0d1730; font-size:14px; background:#f8fbff; } .qnix-seo-search-bar b{ color:#0758d8; font-size:22px; } .qnix-seo-rank-line{ margin-top:24px; display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#5d6b84; } .qnix-seo-rank-line strong{ color:#16b98a; font-size:11px; letter-spacing:.1em; } .qnix-seo-bars{ margin-top:19px; display:flex; align-items:flex-end; gap:9px; height:78px; } .qnix-seo-bars i{ flex:1; display:block; background:linear-gradient(180deg,#08a8cf,#0758d8); border-radius:4px 4px 0 0; opacity:.88; } .qnix-seo-bars i:nth-child(1){height:27%} .qnix-seo-bars i:nth-child(2){height:39%} .qnix-seo-bars i:nth-child(3){height:51%} .qnix-seo-bars i:nth-child(4){height:69%} .qnix-seo-bars i:nth-child(5){ height:92%; background:linear-gradient(180deg,#16b98a,#79c91c); } .qnix-seo-floating-tag{ position:absolute; z-index:3; padding:10px 14px; background:#fff; border:1px solid #dce6f3; box-shadow:0 14px 35px rgba(17,55,110,.11); color:#0758d8; font-size:9px; font-weight:800; letter-spacing:.13em; } .qnix-seo-tag-one{ top:64px; right:10px; transform:rotate(5deg); } .qnix-seo-tag-two{ bottom:58px; left:18px; color:#16b98a; transform:rotate(-5deg); } .qnix-seo-results-showcase{ padding:92px 7% 95px; background:#fff; } .qnix-seo-results-heading{ max-width:780px; margin:0 auto 50px; text-align:center; } .qnix-seo-results-heading > span{ color:#08a8cf; } .qnix-seo-results-heading h2{ margin:15px 0 15px; font-size:clamp(30px,3.4vw,47px); line-height:1.1; letter-spacing:-.035em; color:#0d1730; } .qnix-seo-results-heading p{ max-width:650px; margin:0 auto; color:#5d6b84; font-size:15px; line-height:1.75; } .qnix-seo-result-list{ max-width:1240px; margin:0 auto; display:grid; gap:25px; } .qnix-seo-result-card{ position:relative; background:#fff; border:1px solid #dfe8f3; box-shadow:0 14px 42px rgba(17,55,110,.06); transition:.4s ease; } .qnix-seo-result-card:hover{ transform:translateY(-5px); box-shadow:0 24px 55px rgba(7,88,216,.11); border-color:#c8d9ed; } .qnix-seo-client-head{ min-height:91px; padding:18px 25px; display:flex; align-items:center; justify-content:space-between; gap:20px; background: linear-gradient(90deg,#f7fbff,#fff 70%); border-bottom:1px solid #e5ebf3; } .qnix-seo-client-brand{ display:flex; align-items:center; gap:17px; } .qnix-seo-logo{ width:61px; height:61px; flex:0 0 61px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#fff; border:1px solid #dce6f3; } .qnix-seo-logo img{ width:100%; height:100%; object-fit:contain; display:block; } .qnix-seo-client-brand span{ display:block; margin-bottom:5px; color:#08a8cf; font-size:9px; font-weight:800; letter-spacing:.16em; } .qnix-seo-client-brand h3{ margin:0; color:#0d1730; font-size:18px; letter-spacing:-.02em; } .qnix-seo-status{ display:flex; align-items:center; gap:8px; color:#5d6b84; font-size:9px; font-weight:800; letter-spacing:.12em; } .qnix-seo-status span{ width:7px; height:7px; border-radius:50%; background:#16b98a; box-shadow:0 0 0 5px rgba(22,185,138,.1); } .qnix-seo-table-wrap{ overflow-x:auto; } .qnix-seo-table{ width:100%; min-width:680px; border-collapse:collapse; } .qnix-seo-table th{ padding:15px 25px; text-align:left; background:#f4f8ff; color:#5d6b84; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } .qnix-seo-table td{ padding:16px 25px; border-top:1px solid #edf1f6; color:#4e5d76; font-size:13px; } .qnix-seo-table td:first-child{ color:#0d1730; font-weight:600; } .qnix-seo-table td strong{ display:inline-flex; min-width:67px; justify-content:center; padding:7px 10px; border-radius:30px; background:rgba(22,185,138,.09); color:#159f77; font-size:10px; font-weight:800; letter-spacing:.04em; } .qnix-seo-insight{ padding:88px 7%; background: radial-gradient(circle at 85% 20%,rgba(8,168,207,.15),transparent 28%), linear-gradient(125deg,#062d7a,#0758d8 60%,#087ee7); } .qnix-seo-insight-inner{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1fr .95fr; align-items:center; gap:70px; } .qnix-seo-insight-copy{ max-width:610px; } .qnix-seo-insight-copy > span{ color:#b7e51c; } .qnix-seo-insight-copy h2{ margin:15px 0 20px; color:#fff; font-size:clamp(33px,4vw,53px); line-height:1.08; letter-spacing:-.04em; } .qnix-seo-insight-copy h2 em{ display:block; color:#b7e51c; font-style:normal; } .qnix-seo-insight-copy p{ margin:0; color:rgba(255,255,255,.78); line-height:1.8; font-size:15px; } .qnix-seo-insight-panel{ padding:7px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.055); backdrop-filter:blur(12px); } .qnix-seo-insight-item{ padding:21px 23px; display:grid; grid-template-columns:45px 1fr; gap:3px 12px; border-bottom:1px solid rgba(255,255,255,.12); } .qnix-seo-insight-item:last-child{ border-bottom:0; } .qnix-seo-insight-item strong{ grid-row:span 2; color:#b7e51c; font-size:12px; letter-spacing:.08em; } .qnix-seo-insight-item span{ color:#fff; font-size:14px; font-weight:800; } .qnix-seo-insight-item p{ margin:0; color:rgba(255,255,255,.68); font-size:12px; line-height:1.5; } .qnix-seo-results-cta{ padding:60px 7%; background:#062d7a; } .qnix-seo-results-cta-glow{ position:absolute; width:380px; height:380px; border-radius:50%; background:rgba(8,168,207,.18); filter:blur(70px); right:-130px; top:-180px; } .qnix-seo-results-cta-inner{ max-width:1240px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:35px; position:relative; z-index:2; } .qnix-seo-results-cta-inner > div span{ color:#b7e51c; } .qnix-seo-results-cta h2{ margin:10px 0 0; max-width:700px; color:#fff; font-size:clamp(27px,3vw,40px); line-height:1.1; letter-spacing:-.035em; } .qnix-seo-results-btn{ flex:0 0 auto; display:inline-flex; align-items:center; gap:13px; padding:15px 21px; background:#fff; color:#0758d8; text-decoration:none; font-size:12px; font-weight:800; transition:.3s ease; } .qnix-seo-results-btn span{ color:#0758d8; font-size:17px; } .qnix-seo-results-btn:hover{ background:#b7e51c; color:#062d7a; transform:translateY(-3px); } .qnix-seo-results-btn:hover span{ color:#062d7a; } /* REVEAL */ .qnix-seo-result-card, .qnix-seo-insight-copy, .qnix-seo-insight-panel, .qnix-seo-results-cta-inner{ opacity:0; transform:translateY(24px); transition: opacity .75s ease, transform .75s cubic-bezier(.22,.61,.36,1); } .qnix-seo-result-card.qnix-seo-visible, .qnix-seo-insight-copy.qnix-seo-visible, .qnix-seo-insight-panel.qnix-seo-visible, .qnix-seo-results-cta-inner.qnix-seo-visible{ opacity:1; transform:translateY(0); } /* RESPONSIVE */ @media(max-width:980px){ .qnix-seo-results-intro{ padding:65px 6%; } .qnix-seo-results-intro-inner{ grid-template-columns:1fr; gap:40px; } .qnix-seo-results-copy{ max-width:760px; } .qnix-seo-results-visual{ min-height:350px; } .qnix-seo-insight-inner{ grid-template-columns:1fr; gap:40px; } .qnix-seo-results-cta-inner{ align-items:flex-start; flex-direction:column; } } @media(max-width:700px){ .qnix-seo-results-intro{ padding:52px 20px 55px; } .qnix-seo-results-copy h2{ font-size:39px; } .qnix-seo-results-copy p{ font-size:14px; line-height:1.7; } .qnix-seo-results-meta{ gap:17px; } .qnix-seo-results-visual{ min-height:300px; } .qnix-seo-search-card{ width:90%; padding:20px; } .qnix-seo-floating-tag{ display:none; } .qnix-seo-results-showcase{ padding:65px 20px; } .qnix-seo-results-heading{ margin-bottom:35px; } .qnix-seo-results-heading h2{ font-size:31px; } .qnix-seo-client-head{ padding:16px; align-items:flex-start; flex-direction:column; } .qnix-seo-status{ padding-left:78px; } .qnix-seo-table th, .qnix-seo-table td{ padding:13px 16px; } .qnix-seo-insight{ padding:65px 20px; } .qnix-seo-insight-copy h2{ font-size:34px; } .qnix-seo-results-cta{ padding:48px 20px; } .qnix-seo-results-cta h2{ font-size:29px; } .qnix-seo-results-btn{ width:100%; justify-content:center; } } @media(prefers-reduced-motion:reduce){ .qnix-seo-result-card, .qnix-seo-insight-copy, .qnix-seo-insight-panel, .qnix-seo-results-cta-inner{ opacity:1; transform:none; transition:none; } .qnix-seo-result-card:hover, .qnix-seo-results-btn:hover{ transform:none; } } /* ========================================================= QNIX DIGITAL — SEO PACKAGES ========================================================= */ .qnix-seo-pricing-intro, .qnix-seo-packages, .qnix-seo-compare, .qnix-seo-value, .qnix-seo-note, .qnix-seo-pricing-cta{ position:relative; overflow:hidden; } /* INTRO */ .qnix-seo-pricing-intro{ padding:82px 7% 78px; background: radial-gradient(circle at 82% 20%,rgba(8,168,207,.12),transparent 28%), linear-gradient(135deg,#f4f8ff 0%,#fff 58%,#edf8ff 100%); } .qnix-seo-pricing-intro-inner{ max-width:1240px; margin:auto; display:grid; grid-template-columns:1fr .9fr; align-items:center; gap:70px; } .qnix-seo-pricing-copy{ max-width:670px; } .qnix-seo-pricing-eyebrow, .qnix-seo-packages-heading > span, .qnix-seo-compare-head > span, .qnix-seo-value-copy > span, .qnix-seo-note-inner > div:last-child > span, .qnix-seo-pricing-cta span{ display:inline-flex; align-items:center; gap:9px; color:#0758d8; font-size:10px; font-weight:800; letter-spacing:.18em; } .qnix-seo-pricing-eyebrow:before{ content:""; width:28px; height:2px; background:linear-gradient(90deg,#0758d8,#16b98a); } .qnix-seo-pricing-copy h2{ margin:17px 0 20px; color:#0d1730; font-size:clamp(40px,4.7vw,65px); line-height:1.02; letter-spacing:-.045em; } .qnix-seo-pricing-copy h2 span{ display:block; background:linear-gradient(90deg,#0758d8,#08a8cf,#16b98a); -webkit-background-clip:text; background-clip:text; color:transparent; } .qnix-seo-pricing-copy p{ max-width:600px; margin:0; color:#5d6b84; font-size:15px; line-height:1.8; } .qnix-seo-pricing-points{ margin-top:30px; display:flex; flex-wrap:wrap; gap:9px; } .qnix-seo-pricing-points span{ padding:9px 12px; border:1px solid #dbe5f1; background:#fff; color:#506079; font-size:10px; font-weight:700; } /* VISUAL */ .qnix-seo-pricing-visual{ min-height:360px; position:relative; display:flex; justify-content:center; align-items:center; } .qnix-seo-orbit{ position:absolute; border:1px solid rgba(7,88,216,.12); border-radius:50%; } .orbit-one{ width:320px; height:320px; } .orbit-two{ width:235px; height:235px; border-color:rgba(22,185,138,.17); } .qnix-seo-visibility-panel{ position:relative; z-index:2; width:min(430px,90%); padding:25px; background:rgba(255,255,255,.95); border:1px solid #dbe5f1; box-shadow:0 28px 70px rgba(17,55,110,.14); transform:rotate(-2deg); } .qnix-seo-panel-top{ display:flex; justify-content:space-between; color:#5d6b84; font-size:9px; font-weight:800; letter-spacing:.14em; } .qnix-seo-panel-top b{ color:#0758d8; } .qnix-seo-panel-main{ margin-top:34px; display:flex; align-items:center; justify-content:space-between; gap:9px; } .qnix-seo-panel-main strong{ color:#0d1730; font-size:11px; letter-spacing:.08em; } .qnix-seo-panel-main span{ color:#08a8cf; font-size:16px; } .qnix-seo-signal{ height:78px; margin-top:27px; display:flex; align-items:flex-end; gap:7px; } .qnix-seo-signal i{ flex:1; border-radius:4px 4px 0 0; background:linear-gradient(180deg,#08a8cf,#0758d8); } .qnix-seo-signal i:nth-child(1){height:22%} .qnix-seo-signal i:nth-child(2){height:34%} .qnix-seo-signal i:nth-child(3){height:42%} .qnix-seo-signal i:nth-child(4){height:52%} .qnix-seo-signal i:nth-child(5){height:63%} .qnix-seo-signal i:nth-child(6){height:76%} .qnix-seo-signal i:nth-child(7){ height:92%; background:linear-gradient(180deg,#16b98a,#79c91c); } .qnix-seo-panel-bottom{ margin-top:19px; padding-top:15px; border-top:1px solid #e5ebf3; display:flex; justify-content:space-between; color:#6b7890; font-size:9px; } .qnix-seo-float{ position:absolute; z-index:4; padding:9px 13px; background:#fff; border:1px solid #dbe5f1; box-shadow:0 13px 30px rgba(17,55,110,.1); color:#0758d8; font-size:9px; font-weight:800; letter-spacing:.13em; } .float-a{ top:48px; right:5px; transform:rotate(5deg); } .float-b{ bottom:45px; left:8px; color:#16b98a; transform:rotate(-5deg); } /* PACKAGES */ .qnix-seo-packages{ padding:90px 7% 100px; background:#fff; } .qnix-seo-packages-heading{ max-width:760px; margin:0 auto 48px; text-align:center; } .qnix-seo-packages-heading > span{ color:#08a8cf; } .qnix-seo-packages-heading h2{ margin:14px 0; color:#0d1730; font-size:clamp(31px,3.5vw,47px); line-height:1.08; letter-spacing:-.04em; } .qnix-seo-packages-heading p{ max-width:650px; margin:auto; color:#5d6b84; font-size:14px; line-height:1.75; } .qnix-seo-plan-grid{ max-width:1280px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch; } .qnix-seo-plan{ position:relative; min-width:0; min-height:690px; padding:30px 25px 25px; display:flex; flex-direction:column; background: linear-gradient(#fff,#fff) padding-box, linear-gradient(145deg,#dfe7f1,#edf3f9) border-box; border:1px solid transparent; box-shadow:0 13px 38px rgba(17,55,110,.055); transition:.4s ease; } .qnix-seo-plan:hover{ transform:translateY(-8px); box-shadow:0 27px 58px rgba(7,88,216,.12); } .qnix-seo-plan-accent{ position:absolute; top:0; left:25px; right:25px; height:3px; background:linear-gradient(90deg,#0758d8,#08a8cf,#16b98a); transform:scaleX(.35); transform-origin:left; transition:.4s ease; } .qnix-seo-plan:hover .qnix-seo-plan-accent{ transform:scaleX(1); } .qnix-seo-plan-featured{ background: linear-gradient(#fff,#fff) padding-box, linear-gradient(145deg,#0758d8,#08a8cf,#16b98a) border-box; border:1px solid transparent; box-shadow:0 20px 55px rgba(7,88,216,.14); } .qnix-seo-plan-featured .qnix-seo-plan-accent{ transform:scaleX(1); } .qnix-seo-popular{ position:absolute; top:0; right:20px; padding:8px 11px; background:#0758d8; color:#fff; font-size:8px; font-weight:800; letter-spacing:.12em; } .qnix-seo-plan-label{ color:#08a8cf; font-size:9px; font-weight:800; letter-spacing:.16em; } .qnix-seo-plan h3{ margin:10px 0 10px; color:#0d1730; font-size:28px; letter-spacing:-.035em; } .qnix-seo-plan-top p{ min-height:72px; margin:0; color:#68758b; font-size:12px; line-height:1.65; } .qnix-seo-price{ margin-top:25px; display:flex; align-items:baseline; gap:5px; } .qnix-seo-price strong{ color:#0758d8; font-size:37px; line-height:1; letter-spacing:-.045em; } .qnix-seo-price span{ color:#6b7890; font-size:11px; } .qnix-seo-keyword-box{ margin-top:22px; padding:13px; display:flex; align-items:center; gap:12px; border:1px solid #dce6f1; background:#f7faff; } .qnix-keyword-featured{ border-color:#bfd6f1; background: linear-gradient(90deg,rgba(7,88,216,.055),rgba(22,185,138,.055)); } .qnix-seo-keyword-icon{ width:37px; height:37px; flex:0 0 37px; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,#0758d8,#08a8cf); color:#fff; font-size:12px; font-weight:800; } .qnix-seo-keyword-box strong{ display:block; color:#0d1730; font-size:13px; } .qnix-seo-keyword-box span{ display:block; margin-top:3px; color:#7a8799; font-size:9px; } .qnix-seo-plan-divider{ height:1px; margin:22px 0 16px; background:#e6ecf3; } .qnix-seo-plan ul{ flex:1; margin:0; padding:0; list-style:none; } .qnix-seo-plan li{ position:relative; padding:6px 0 6px 19px; color:#536178; font-size:10.5px; line-height:1.5; } .qnix-seo-plan li:before{ content:""; position:absolute; left:0; top:11px; width:6px; height:6px; border-radius:50%; background:#16b98a; box-shadow:0 0 0 4px rgba(22,185,138,.08); } /* BUTTON — ALWAYS BOTTOM */ .qnix-seo-plan-btn{ width:100%; min-height:48px; margin-top:24px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; border:1px solid #cddaea; background:#fff; color:#0758d8; text-decoration:none; font-size:11px; font-weight:800; transition:.3s ease; } .qnix-seo-plan-btn b{ font-size:17px; font-weight:500; } .qnix-seo-plan-btn:hover{ background:#0758d8; border-color:#0758d8; color:#fff; transform:translateY(-2px); } .qnix-seo-plan-btn-featured{ background:linear-gradient(100deg,#0758d8,#087ee7); border-color:#0758d8; color:#fff; } .qnix-seo-plan-btn-featured:hover{ background:#062d7a; border-color:#062d7a; } /* COMPARISON */ .qnix-seo-compare{ padding:88px 7%; background:#f4f8ff; } .qnix-seo-compare-head{ max-width:720px; margin:0 auto 42px; text-align:center; } .qnix-seo-compare-head > span{ color:#0758d8; } .qnix-seo-compare-head h2{ margin:14px 0 0; color:#0d1730; font-size:clamp(30px,3.3vw,44px); line-height:1.1; letter-spacing:-.035em; } .qnix-seo-compare-table-wrap{ max-width:1180px; margin:auto; overflow-x:auto; background:#fff; border:1px solid #dce6f1; box-shadow:0 15px 45px rgba(17,55,110,.06); } .qnix-seo-compare-table{ width:100%; min-width:780px; border-collapse:collapse; } .qnix-seo-compare-table th{ padding:17px 20px; background:#062d7a; color:#fff; text-align:left; font-size:9px; font-weight:800; letter-spacing:.12em; } .qnix-seo-compare-table th:not(:first-child){ text-align:center; } .qnix-seo-compare-table td{ padding:16px 20px; border-bottom:1px solid #e8edf4; color:#56647b; font-size:12px; } .qnix-seo-compare-table td:not(:first-child){ text-align:center; color:#0758d8; font-weight:800; } .qnix-seo-compare-table tr:last-child td{ border-bottom:0; } .qnix-seo-compare-table tr:hover td{ background:#f8fbff; } /* SEO CYCLE */ .qnix-seo-value{ padding:90px 7%; background: radial-gradient(circle at 80% 30%,rgba(8,168,207,.15),transparent 25%), linear-gradient(125deg,#062d7a,#0758d8 60%,#087ee7); } .qnix-seo-value-inner{ max-width:1200px; margin:auto; display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:center; } .qnix-seo-value-copy{ max-width:500px; } .qnix-seo-value-copy > span{ color:#b7e51c; } .qnix-seo-value-copy h2{ margin:14px 0 18px; color:#fff; font-size:clamp(34px,4vw,51px); line-height:1.06; letter-spacing:-.04em; } .qnix-seo-value-copy p{ margin:0; color:rgba(255,255,255,.76); font-size:14px; line-height:1.8; } .qnix-seo-value-flow{ border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.055); } .qnix-seo-flow-item{ display:grid; grid-template-columns:45px 1fr; gap:3px 15px; padding:20px 23px; border-bottom:1px solid rgba(255,255,255,.13); } .qnix-seo-flow-item:last-child{ border-bottom:0; } .qnix-seo-flow-item b{ grid-row:span 2; color:#b7e51c; font-size:10px; letter-spacing:.08em; } .qnix-seo-flow-item strong{ color:#fff; font-size:14px; } .qnix-seo-flow-item span{ color:rgba(255,255,255,.67); font-size:11px; line-height:1.55; } /* NOTE */ .qnix-seo-note{ padding:55px 7%; background:#fff; } .qnix-seo-note-inner{ max-width:1100px; margin:auto; padding:27px 30px; display:grid; grid-template-columns:65px 1fr; gap:22px; align-items:center; border:1px solid #dce6f2; background:#f8fbff; } .qnix-seo-note-mark{ width:55px; height:55px; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,#0758d8,#08a8cf); color:#fff; font-size:26px; font-weight:800; } .qnix-seo-note-inner > div:last-child > span{ color:#0758d8; } .qnix-seo-note h3{ margin:8px 0 6px; color:#0d1730; font-size:19px; } .qnix-seo-note p{ margin:0; max-width:850px; color:#68758b; font-size:12px; line-height:1.7; } /* CTA */ .qnix-seo-pricing-cta{ padding:62px 7%; background:#062d7a; } .qnix-seo-pricing-cta-inner{ max-width:1200px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:35px; } .qnix-seo-pricing-cta span{ color:#b7e51c; } .qnix-seo-pricing-cta h2{ max-width:690px; margin:10px 0 0; color:#fff; font-size:clamp(28px,3vw,40px); line-height:1.1; letter-spacing:-.035em; } .qnix-seo-cta-btn{ display:inline-flex; align-items:center; gap:13px; padding:15px 22px; background:#fff; color:#0758d8; text-decoration:none; font-size:11px; font-weight:800; white-space:nowrap; transition:.3s ease; } .qnix-seo-cta-btn span{ color:#0758d8; font-size:17px; } .qnix-seo-cta-btn:hover{ background:#b7e51c; color:#062d7a; transform:translateY(-3px); } .qnix-seo-cta-btn:hover span{ color:#062d7a; } /* REVEAL */ .qnix-seo-plan, .qnix-seo-compare-table-wrap, .qnix-seo-value-copy, .qnix-seo-value-flow, .qnix-seo-note-inner, .qnix-seo-pricing-cta-inner{ opacity:0; transform:translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); } .qnix-seo-visible{ opacity:1 !important; transform:translateY(0) !important; } /* RESPONSIVE */ @media(max-width:1120px){ .qnix-seo-plan-grid{ grid-template-columns:repeat(2,1fr); } .qnix-seo-plan{ min-height:650px; } .qnix-seo-value-inner{ grid-template-columns:1fr; gap:45px; } } @media(max-width:900px){ .qnix-seo-pricing-intro-inner{ grid-template-columns:1fr; gap:40px; } .qnix-seo-pricing-copy{ max-width:760px; } .qnix-seo-pricing-visual{ min-height:310px; } .qnix-seo-pricing-cta-inner{ align-items:flex-start; flex-direction:column; } } @media(max-width:650px){ .qnix-seo-pricing-intro{ padding:55px 20px; } .qnix-seo-pricing-copy h2{ font-size:39px; } .qnix-seo-pricing-copy p{ font-size:14px; } .qnix-seo-pricing-points{ gap:7px; } .qnix-seo-pricing-points span{ font-size:9px; } .qnix-seo-pricing-visual{ min-height:280px; } .orbit-one{ width:260px; height:260px; } .orbit-two{ width:190px; height:190px; } .qnix-seo-visibility-panel{ padding:19px; } .qnix-seo-float{ display:none; } .qnix-seo-packages{ padding:65px 20px; } .qnix-seo-packages-heading{ margin-bottom:35px; } .qnix-seo-packages-heading h2{ font-size:31px; } .qnix-seo-plan-grid{ grid-template-columns:1fr; gap:16px; } .qnix-seo-plan{ min-height:0; padding:27px 22px 22px; } .qnix-seo-plan-top p{ min-height:auto; } .qnix-seo-plan ul{ flex:none; } .qnix-seo-compare{ padding:65px 20px; } .qnix-seo-compare-head h2{ font-size:31px; } .qnix-seo-value{ padding:65px 20px; } .qnix-seo-value-copy h2{ font-size:34px; } .qnix-seo-note{ padding:42px 20px; } .qnix-seo-note-inner{ padding:22px; grid-template-columns:1fr; gap:15px; } .qnix-seo-pricing-cta{ padding:48px 20px; } .qnix-seo-pricing-cta h2{ font-size:29px; } .qnix-seo-cta-btn{ width:100%; justify-content:center; } } @media(prefers-reduced-motion:reduce){ .qnix-seo-plan, .qnix-seo-compare-table-wrap, .qnix-seo-value-copy, .qnix-seo-value-flow, .qnix-seo-note-inner, .qnix-seo-pricing-cta-inner{ opacity:1; transform:none; transition:none; } .qnix-seo-plan:hover, .qnix-seo-cta-btn:hover, .qnix-seo-plan-btn:hover{ transform:none; } } /* ========================================================= QNIX DIGITAL — SMO PACKAGES ========================================================= */ .qnix-smo-intro, .qnix-smo-packages, .qnix-smo-platforms, .qnix-smo-compare, .qnix-smo-workflow, .qnix-smo-note, .qnix-smo-cta{ position:relative; overflow:hidden; } /* ========================================================= INTRO ========================================================= */ .qnix-smo-intro{ padding:82px 7% 78px; background: radial-gradient(circle at 82% 25%,rgba(8,168,207,.13),transparent 27%), linear-gradient(135deg,#f4f8ff 0%,#fff 57%,#edf9ff 100%); } .qnix-smo-intro-inner{ max-width:1240px; margin:auto; display:grid; grid-template-columns:1fr .9fr; align-items:center; gap:70px; } .qnix-smo-intro-copy{ max-width:670px; } .qnix-smo-eyebrow, .qnix-smo-heading > span, .qnix-smo-platform-copy > span, .qnix-smo-compare-head > span, .qnix-smo-workflow-copy > span, .qnix-smo-note-inner > div:last-child > span, .qnix-smo-cta span{ display:inline-flex; align-items:center; gap:9px; color:#0758d8; font-size:10px; font-weight:800; letter-spacing:.18em; } .qnix-smo-eyebrow:before{ content:""; width:28px; height:2px; background:linear-gradient(90deg,#0758d8,#16b98a); } .qnix-smo-intro-copy h2{ margin:17px 0 20px; color:#0d1730; font-size:clamp(40px,4.7vw,65px); line-height:1.02; letter-spacing:-.045em; } .qnix-smo-intro-copy h2 span{ display:block; background:linear-gradient(90deg,#0758d8,#08a8cf,#16b98a); -webkit-background-clip:text; background-clip:text; color:transparent; } .qnix-smo-intro-copy p{ max-width:610px; margin:0; color:#5d6b84; font-size:15px; line-height:1.8; } .qnix-smo-channel-row{ margin-top:30px; display:flex; flex-wrap:wrap; gap:9px; } .qnix-smo-channel-row span{ padding:9px 12px; border:1px solid #dbe5f1; background:#fff; color:#506079; font-size:10px; font-weight:700; } /* ========================================================= SOCIAL VISUAL ========================================================= */ .qnix-smo-social-visual{ position:relative; min-height:360px; display:flex; align-items:center; justify-content:center; } .qnix-smo-ring{ position:absolute; border:1px solid rgba(7,88,216,.12); border-radius:50%; } .ring-one{ width:325px; height:325px; } .ring-two{ width:235px; height:235px; border-color:rgba(22,185,138,.16); } .qnix-smo-social-board{ position:relative; z-index:2; width:min(430px,90%); padding:25px; background:rgba(255,255,255,.96); border:1px solid #dbe5f1; box-shadow:0 28px 70px rgba(17,55,110,.14); transform:rotate(-2deg); } .qnix-smo-board-top{ display:flex; align-items:center; justify-content:space-between; color:#68758b; font-size:9px; font-weight:800; letter-spacing:.14em; } .qnix-smo-board-top b{ color:#0758d8; } .qnix-smo-profile{ margin-top:28px; display:flex; align-items:center; gap:12px; } .qnix-smo-avatar{ width:43px; height:43px; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,#0758d8,#08a8cf); color:#fff; font-size:17px; font-weight:800; } .qnix-smo-profile strong{ display:block; color:#0d1730; font-size:13px; } .qnix-smo-profile span{ display:block; margin-top:3px; color:#7a8799; font-size:9px; } .qnix-smo-post-grid{ margin-top:22px; display:grid; grid-template-columns:repeat(3,1fr); gap:7px; } .qnix-smo-post-grid i{ aspect-ratio:1; display:block; background: linear-gradient(145deg,rgba(7,88,216,.9),rgba(8,168,207,.55)), linear-gradient(#fff,#fff); } .qnix-smo-post-grid i:nth-child(2){ background:linear-gradient(145deg,#08a8cf,#0758d8); } .qnix-smo-post-grid i:nth-child(3){ background:linear-gradient(145deg,#16b98a,#087ee7); } .qnix-smo-post-grid i:nth-child(4){ background:linear-gradient(145deg,#0758d8,#16b98a); } .qnix-smo-post-grid i:nth-child(5){ background:linear-gradient(145deg,#087ee7,#08a8cf); } .qnix-smo-post-grid i:nth-child(6){ background:linear-gradient(145deg,#16b98a,#79c91c); } .qnix-smo-engagement{ margin-top:20px; padding-top:15px; border-top:1px solid #e5ebf3; display:flex; justify-content:space-between; } .qnix-smo-engagement span{ color:#68758b; font-size:8px; font-weight:800; letter-spacing:.12em; } .qnix-smo-float{ position:absolute; z-index:4; padding:9px 13px; background:#fff; border:1px solid #dbe5f1; box-shadow:0 13px 30px rgba(17,55,110,.1); color:#0758d8; font-size:9px; font-weight:800; letter-spacing:.13em; } .smo-float-one{ top:45px; right:4px; transform:rotate(5deg); } .smo-float-two{ left:4px; bottom:48px; color:#16b98a; transform:rotate(-5deg); } /* ========================================================= PACKAGES ========================================================= */ .qnix-smo-packages{ padding:90px 7% 100px; background:#fff; } .qnix-smo-heading{ max-width:760px; margin:0 auto 48px; text-align:center; } .qnix-smo-heading > span{ color:#08a8cf; } .qnix-smo-heading h2{ margin:14px 0; color:#0d1730; font-size:clamp(31px,3.5vw,47px); line-height:1.08; letter-spacing:-.04em; } .qnix-smo-heading p{ max-width:650px; margin:auto; color:#5d6b84; font-size:14px; line-height:1.75; } .qnix-smo-plan-grid{ max-width:1280px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch; } .qnix-smo-plan{ position:relative; min-height:690px; padding:30px 25px 25px; display:flex; flex-direction:column; background: linear-gradient(#fff,#fff) padding-box, linear-gradient(145deg,#dfe7f1,#edf3f9) border-box; border:1px solid transparent; box-shadow:0 13px 38px rgba(17,55,110,.055); transition:.4s ease; } .qnix-smo-plan:hover{ transform:translateY(-8px); box-shadow:0 27px 58px rgba(7,88,216,.12); } .qnix-smo-plan-accent{ position:absolute; top:0; left:25px; right:25px; height:3px; background:linear-gradient(90deg,#0758d8,#08a8cf,#16b98a); transform:scaleX(.35); transform-origin:left; transition:.4s ease; } .qnix-smo-plan:hover .qnix-smo-plan-accent, .qnix-smo-plan-featured .qnix-smo-plan-accent{ transform:scaleX(1); } .qnix-smo-plan-featured{ background: linear-gradient(#fff,#fff) padding-box, linear-gradient(145deg,#0758d8,#08a8cf,#16b98a) border-box; border:1px solid transparent; box-shadow:0 20px 55px rgba(7,88,216,.14); } .qnix-smo-popular{ position:absolute; top:0; right:20px; padding:8px 11px; background:#0758d8; color:#fff; font-size:8px; font-weight:800; letter-spacing:.12em; } .qnix-smo-plan-label{ color:#08a8cf; font-size:9px; font-weight:800; letter-spacing:.16em; } .qnix-smo-plan h3{ margin:10px 0; color:#0d1730; font-size:28px; letter-spacing:-.035em; } .qnix-smo-plan-top p{ min-height:72px; margin:0; color:#68758b; font-size:12px; line-height:1.65; } .qnix-smo-price{ margin-top:25px; display:flex; align-items:baseline; gap:5px; } .qnix-smo-price strong{ color:#0758d8; font-size:37px; line-height:1; letter-spacing:-.045em; } .qnix-smo-price span{ color:#6b7890; font-size:11px; } .qnix-smo-post-box{ margin-top:22px; padding:13px; display:flex; align-items:center; gap:12px; border:1px solid #dce6f1; background:#f7faff; } .qnix-smo-post-featured{ border-color:#bfd6f1; background:linear-gradient( 90deg, rgba(7,88,216,.055), rgba(22,185,138,.055) ); } .qnix-smo-post-icon{ width:37px; height:37px; flex:0 0 37px; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,#0758d8,#08a8cf); color:#fff; font-size:12px; font-weight:800; } .qnix-smo-post-box strong{ display:block; color:#0d1730; font-size:13px; } .qnix-smo-post-box span{ display:block; margin-top:3px; color:#7a8799; font-size:9px; } .qnix-smo-divider{ height:1px; margin:22px 0 16px; background:#e6ecf3; } .qnix-smo-plan ul{ flex:1; margin:0; padding:0; list-style:none; } .qnix-smo-plan li{ position:relative; padding:6px 0 6px 19px; color:#536178; font-size:10.5px; line-height:1.5; } .qnix-smo-plan li:before{ content:""; position:absolute; left:0; top:11px; width:6px; height:6px; border-radius:50%; background:#16b98a; box-shadow:0 0 0 4px rgba(22,185,138,.08); } /* BUTTON — ALWAYS AFTER FEATURES */ .qnix-smo-plan-btn{ width:100%; min-height:48px; margin-top:24px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; border:1px solid #cddaea; background:#fff; color:#0758d8; text-decoration:none; font-size:11px; font-weight:800; transition:.3s ease; } .qnix-smo-plan-btn b{ font-size:17px; font-weight:500; } .qnix-smo-plan-btn:hover{ background:#0758d8; border-color:#0758d8; color:#fff; transform:translateY(-2px); } .qnix-smo-plan-btn-featured{ background:linear-gradient(100deg,#0758d8,#087ee7); border-color:#0758d8; color:#fff; } .qnix-smo-plan-btn-featured:hover{ background:#062d7a; border-color:#062d7a; } /* ========================================================= PLATFORMS ========================================================= */ .qnix-smo-platforms{ padding:90px 7%; background:#f4f8ff; } .qnix-smo-platform-inner{ max-width:1200px; margin:auto; display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:center; } .qnix-smo-platform-copy{ max-width:500px; } .qnix-smo-platform-copy > span{ color:#0758d8; } .qnix-smo-platform-copy h2{ margin:14px 0 18px; color:#0d1730; font-size:clamp(34px,4vw,51px); line-height:1.06; letter-spacing:-.04em; } .qnix-smo-platform-copy p{ margin:0; color:#5d6b84; font-size:14px; line-height:1.8; } .qnix-smo-platform-map{ position:relative; min-height:420px; border:1px solid #dbe5f1; background: linear-gradient(rgba(7,88,216,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.045) 1px,transparent 1px), #fff; background-size:42px 42px; box-shadow:0 20px 50px rgba(17,55,110,.07); } .qnix-smo-platform-core{ position:absolute; left:50%; top:50%; width:145px; height:100px; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(145deg,#062d7a,#0758d8); color:#fff; box-shadow:0 20px 45px rgba(7,88,216,.25); } .qnix-smo-platform-core span{ font-size:9px; letter-spacing:.2em; color:#b7e51c; } .qnix-smo-platform-core strong{ margin-top:7px; font-size:17px; letter-spacing:.08em; } .qnix-smo-platform-node{ position:absolute; z-index:3; width:110px; padding:14px 10px; display:flex; flex-direction:column; align-items:center; gap:7px; background:#fff; border:1px solid #dbe5f1; box-shadow:0 12px 30px rgba(17,55,110,.08); } .qnix-smo-platform-node strong{ color:#0758d8; font-size:20px; } .qnix-smo-platform-node span{ color:#526079; font-size:9px; font-weight:800; } .node-facebook{ top:55px; left:70px; } .node-instagram{ top:55px; right:70px; } .node-linkedin{ bottom:55px; left:50%; transform:translateX(-50%); } .qnix-smo-platform-line{ position:absolute; height:1px; background:linear-gradient(90deg,#0758d8,#08a8cf); transform-origin:left; } .line-a{ width:190px; left:165px; top:140px; transform:rotate(28deg); } .line-b{ width:190px; right:165px; top:140px; transform:rotate(152deg); } .line-c{ width:150px; left:50%; bottom:150px; transform:translateX(-50%) rotate(90deg); background:linear-gradient(90deg,#16b98a,#0758d8); } /* ========================================================= COMPARISON ========================================================= */ .qnix-smo-compare{ padding:88px 7%; background:#fff; } .qnix-smo-compare-head{ max-width:720px; margin:0 auto 42px; text-align:center; } .qnix-smo-compare-head > span{ color:#08a8cf; } .qnix-smo-compare-head h2{ margin:14px 0 0; color:#0d1730; font-size:clamp(30px,3.3vw,44px); line-height:1.1; letter-spacing:-.035em; } .qnix-smo-table-wrap{ max-width:1180px; margin:auto; overflow-x:auto; background:#fff; border:1px solid #dce6f1; box-shadow:0 15px 45px rgba(17,55,110,.06); } .qnix-smo-table{ width:100%; min-width:780px; border-collapse:collapse; } .qnix-smo-table th{ padding:17px 20px; background:#062d7a; color:#fff; text-align:left; font-size:9px; font-weight:800; letter-spacing:.12em; } .qnix-smo-table th:not(:first-child){ text-align:center; } .qnix-smo-table td{ padding:16px 20px; border-bottom:1px solid #e8edf4; color:#56647b; font-size:12px; } .qnix-smo-table td:not(:first-child){ text-align:center; color:#0758d8; font-weight:800; } .qnix-smo-table tr:last-child td{ border-bottom:0; } .qnix-smo-table tr:hover td{ background:#f8fbff; } /* ========================================================= WORKFLOW ========================================================= */ .qnix-smo-workflow{ padding:90px 7%; background: radial-gradient(circle at 80% 30%,rgba(8,168,207,.15),transparent 25%), linear-gradient(125deg,#062d7a,#0758d8 60%,#087ee7); } .qnix-smo-workflow-inner{ max-width:1200px; margin:auto; display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:center; } .qnix-smo-workflow-copy{ max-width:500px; } .qnix-smo-workflow-copy > span{ color:#b7e51c; } .qnix-smo-workflow-copy h2{ margin:14px 0 18px; color:#fff; font-size:clamp(34px,4vw,51px); line-height:1.06; letter-spacing:-.04em; } .qnix-smo-workflow-copy p{ margin:0; color:rgba(255,255,255,.76); font-size:14px; line-height:1.8; } .qnix-smo-workflow-track{ border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.055); } .qnix-smo-work-item{ padding:22px 25px; display:grid; grid-template-columns:100px 1fr; gap:18px; border-bottom:1px solid rgba(255,255,255,.13); } .qnix-smo-work-item:last-child{ border-bottom:0; } .qnix-smo-work-item b{ color:#b7e51c; font-size:10px; letter-spacing:.15em; } .qnix-smo-work-item span{ color:rgba(255,255,255,.74); font-size:12px; line-height:1.6; } /* ========================================================= NOTE ========================================================= */ .qnix-smo-note{ padding:55px 7%; background:#fff; } .qnix-smo-note-inner{ max-width:1100px; margin:auto; padding:27px 30px; display:grid; grid-template-columns:65px 1fr; gap:22px; align-items:center; border:1px solid #dce6f2; background:#f8fbff; } .qnix-smo-note-mark{ width:55px; height:55px; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,#0758d8,#08a8cf); color:#fff; font-size:26px; font-weight:800; } .qnix-smo-note-inner > div:last-child > span{ color:#0758d8; } .qnix-smo-note h3{ margin:8px 0 6px; color:#0d1730; font-size:19px; } .qnix-smo-note p{ margin:0; max-width:850px; color:#68758b; font-size:12px; line-height:1.7; } /* ========================================================= CTA ========================================================= */ .qnix-smo-cta{ padding:62px 7%; background:#062d7a; } .qnix-smo-cta-inner{ max-width:1200px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:35px; } .qnix-smo-cta span{ color:#b7e51c; } .qnix-smo-cta h2{ max-width:690px; margin:10px 0 0; color:#fff; font-size:clamp(28px,3vw,40px); line-height:1.1; letter-spacing:-.035em; } .qnix-smo-cta-btn{ display:inline-flex; align-items:center; gap:13px; padding:15px 22px; background:#fff; color:#0758d8; text-decoration:none; font-size:11px; font-weight:800; white-space:nowrap; transition:.3s ease; } .qnix-smo-cta-btn b{ font-size:17px; font-weight:500; } .qnix-smo-cta-btn:hover{ background:#b7e51c; color:#062d7a; transform:translateY(-3px); } /* ========================================================= REVEAL ========================================================= */ .qnix-smo-plan, .qnix-smo-table-wrap, .qnix-smo-platform-copy, .qnix-smo-platform-map, .qnix-smo-workflow-copy, .qnix-smo-workflow-track, .qnix-smo-note-inner, .qnix-smo-cta-inner{ opacity:0; transform:translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); } .qnix-smo-visible{ opacity:1 !important; transform:translateY(0) !important; } /* ========================================================= RESPONSIVE ========================================================= */ @media(max-width:1120px){ .qnix-smo-plan-grid{ grid-template-columns:repeat(2,1fr); } .qnix-smo-plan{ min-height:650px; } .qnix-smo-platform-inner, .qnix-smo-workflow-inner{ grid-template-columns:1fr; gap:45px; } } @media(max-width:900px){ .qnix-smo-intro-inner{ grid-template-columns:1fr; gap:40px; } .qnix-smo-intro-copy{ max-width:760px; } .qnix-smo-social-visual{ min-height:310px; } .qnix-smo-cta-inner{ align-items:flex-start; flex-direction:column; } } @media(max-width:650px){ .qnix-smo-intro{ padding:55px 20px; } .qnix-smo-intro-copy h2{ font-size:39px; } .qnix-smo-intro-copy p{ font-size:14px; } .qnix-smo-channel-row{ gap:7px; } .qnix-smo-channel-row span{ font-size:9px; } .qnix-smo-social-visual{ min-height:280px; } .ring-one{ width:260px; height:260px; } .ring-two{ width:190px; height:190px; } .qnix-smo-social-board{ padding:19px; } .qnix-smo-float{ display:none; } .qnix-smo-packages{ padding:65px 20px; } .qnix-smo-heading{ margin-bottom:35px; } .qnix-smo-heading h2{ font-size:31px; } .qnix-smo-plan-grid{ grid-template-columns:1fr; gap:16px; } .qnix-smo-plan{ min-height:0; padding:27px 22px 22px; } .qnix-smo-plan-top p{ min-height:auto; } .qnix-smo-plan ul{ flex:none; } .qnix-smo-platforms{ padding:65px 20px; } .qnix-smo-platform-copy h2{ font-size:34px; } .qnix-smo-platform-map{ min-height:330px; } .qnix-smo-platform-node{ width:88px; padding:11px 7px; } .node-facebook{ left:25px; top:38px; } .node-instagram{ right:25px; top:38px; } .node-linkedin{ bottom:30px; } .qnix-smo-platform-core{ width:125px; height:85px; } .qnix-smo-platform-line{ display:none; } .qnix-smo-compare{ padding:65px 20px; } .qnix-smo-compare-head h2{ font-size:31px; } .qnix-smo-workflow{ padding:65px 20px; } .qnix-smo-workflow-copy h2{ font-size:34px; } .qnix-smo-work-item{ grid-template-columns:1fr; gap:7px; padding:19px 20px; } .qnix-smo-note{ padding:42px 20px; } .qnix-smo-note-inner{ padding:22px; grid-template-columns:1fr; gap:15px; } .qnix-smo-cta{ padding:48px 20px; } .qnix-smo-cta h2{ font-size:29px; } .qnix-smo-cta-btn{ width:100%; justify-content:center; } } @media(prefers-reduced-motion:reduce){ .qnix-smo-plan, .qnix-smo-table-wrap, .qnix-smo-platform-copy, .qnix-smo-platform-map, .qnix-smo-workflow-copy, .qnix-smo-workflow-track, .qnix-smo-note-inner, .qnix-smo-cta-inner{ opacity:1; transform:none; transition:none; } .qnix-smo-plan:hover, .qnix-smo-cta-btn:hover, .qnix-smo-plan-btn:hover{ transform:none; } } /* ========================================================= QNIX DIGITAL — WEB DESIGN PACKAGES ========================================================= */ .qnix-wd-intro, .qnix-wd-packages, .qnix-wd-experience, .qnix-wd-compare, .qnix-wd-process, .qnix-wd-note, .qnix-wd-cta{ position:relative; overflow:hidden; } /* ========================================================= INTRO ========================================================= */ .qnix-wd-intro{ padding:82px 7% 78px; background: radial-gradient(circle at 82% 22%,rgba(8,168,207,.13),transparent 28%), linear-gradient(135deg,#f4f8ff 0%,#fff 58%,#eefaff 100%); } .qnix-wd-intro-inner{ max-width:1240px; margin:auto; display:grid; grid-template-columns:1fr .9fr; align-items:center; gap:70px; } .qnix-wd-intro-copy{ max-width:680px; } .qnix-wd-eyebrow, .qnix-wd-heading > span, .qnix-wd-experience-copy > span, .qnix-wd-compare-head > span, .qnix-wd-process-copy > span, .qnix-wd-note-inner > div:last-child > span, .qnix-wd-cta span{ display:inline-flex; align-items:center; gap:9px; color:#0758d8; font-size:10px; font-weight:800; letter-spacing:.18em; } .qnix-wd-eyebrow:before{ content:""; width:28px; height:2px; background:linear-gradient(90deg,#0758d8,#16b98a); } .qnix-wd-intro-copy h2{ margin:17px 0 20px; color:#0d1730; font-size:clamp(40px,4.7vw,65px); line-height:1.02; letter-spacing:-.045em; } .qnix-wd-intro-copy h2 span{ display:block; background:linear-gradient(90deg,#0758d8,#08a8cf,#16b98a); -webkit-background-clip:text; background-clip:text; color:transparent; } .qnix-wd-intro-copy p{ max-width:610px; margin:0; color:#5d6b84; font-size:15px; line-height:1.8; } .qnix-wd-tags{ margin-top:30px; display:flex; flex-wrap:wrap; gap:9px; } .qnix-wd-tags span{ padding:9px 12px; border:1px solid #dbe5f1; background:#fff; color:#506079; font-size:10px; font-weight:700; } /* ========================================================= BROWSER VISUAL ========================================================= */ .qnix-wd-visual{ position:relative; min-height:380px; display:flex; align-items:center; justify-content:center; } .qnix-wd-grid{ position:absolute; width:340px; height:340px; background: linear-gradient(rgba(7,88,216,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.07) 1px,transparent 1px); background-size:34px 34px; transform:rotate(-4deg); } .qnix-wd-browser{ position:relative; z-index:2; width:min(440px,91%); background:#fff; border:1px solid #d8e3ef; box-shadow:0 30px 70px rgba(17,55,110,.16); transform:rotate(2deg); } .qnix-wd-browser-bar{ height:42px; padding:0 15px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e5ebf3; background:#f9fbfe; } .qnix-wd-dots{ display:flex; gap:5px; } .qnix-wd-dots i{ width:6px; height:6px; border-radius:50%; background:#b8c7d8; } .qnix-wd-browser-bar span{ color:#8290a3; font-size:8px; font-weight:700; letter-spacing:.08em; } .qnix-wd-browser-body{ padding:22px; } .qnix-wd-nav{ display:flex; align-items:center; gap:12px; } .qnix-wd-nav b{ width:26px; height:26px; display:flex; align-items:center; justify-content:center; background:#0758d8; color:#fff; font-size:11px; } .qnix-wd-nav span{ width:42px; height:4px; background:#dce5ef; } .qnix-wd-nav span:nth-child(2){ margin-left:auto; } .qnix-wd-hero-lines{ margin-top:35px; } .qnix-wd-hero-lines i{ display:block; height:9px; margin-bottom:8px; background:#dce6f2; } .qnix-wd-hero-lines i:first-child{ width:68%; height:18px; background:linear-gradient(90deg,#0758d8,#08a8cf); } .qnix-wd-hero-lines i:nth-child(2){ width:48%; } .qnix-wd-hero-lines i:nth-child(3){ width:58%; } .qnix-wd-content-blocks{ margin-top:30px; display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:8px; } .qnix-wd-content-blocks i{ height:75px; background:#edf4fb; } .qnix-wd-content-blocks i:first-child{ background:linear-gradient(145deg,#0758d8,#08a8cf); } .qnix-wd-content-blocks i:nth-child(3){ background:linear-gradient(145deg,#16b98a,#79c91c); } .qnix-wd-floating{ position:absolute; z-index:4; padding:9px 13px; background:#fff; border:1px solid #dbe5f1; box-shadow:0 13px 30px rgba(17,55,110,.1); color:#0758d8; font-size:9px; font-weight:800; letter-spacing:.13em; } .wd-float-a{ top:52px; right:2px; transform:rotate(5deg); } .wd-float-b{ bottom:50px; left:2px; color:#16b98a; transform:rotate(-5deg); } /* ========================================================= PACKAGES ========================================================= */ .qnix-wd-packages{ padding:90px 7% 100px; background:#fff; } .qnix-wd-heading{ max-width:760px; margin:0 auto 48px; text-align:center; } .qnix-wd-heading > span{ color:#08a8cf; } .qnix-wd-heading h2{ margin:14px 0; color:#0d1730; font-size:clamp(31px,3.5vw,47px); line-height:1.08; letter-spacing:-.04em; } .qnix-wd-heading p{ max-width:650px; margin:auto; color:#5d6b84; font-size:14px; line-height:1.75; } .qnix-wd-plan-grid{ max-width:1280px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch; } .qnix-wd-plan{ position:relative; min-height:690px; padding:30px 25px 25px; display:flex; flex-direction:column; background: linear-gradient(#fff,#fff) padding-box, linear-gradient(145deg,#dfe7f1,#edf3f9) border-box; border:1px solid transparent; box-shadow:0 13px 38px rgba(17,55,110,.055); transition:.4s ease; } .qnix-wd-plan:hover{ transform:translateY(-8px); box-shadow:0 27px 58px rgba(7,88,216,.12); } .qnix-wd-plan-accent{ position:absolute; top:0; left:25px; right:25px; height:3px; background:linear-gradient(90deg,#0758d8,#08a8cf,#16b98a); transform:scaleX(.35); transform-origin:left; transition:.4s ease; } .qnix-wd-plan:hover .qnix-wd-plan-accent, .qnix-wd-plan-featured .qnix-wd-plan-accent{ transform:scaleX(1); } .qnix-wd-plan-featured{ background: linear-gradient(#fff,#fff) padding-box, linear-gradient(145deg,#0758d8,#08a8cf,#16b98a) border-box; border:1px solid transparent; box-shadow:0 20px 55px rgba(7,88,216,.14); } .qnix-wd-popular{ position:absolute; top:0; right:20px; padding:8px 11px; background:#0758d8; color:#fff; font-size:8px; font-weight:800; letter-spacing:.12em; } .qnix-wd-plan-label{ color:#08a8cf; font-size:9px; font-weight:800; letter-spacing:.16em; } .qnix-wd-plan h3{ margin:10px 0; color:#0d1730; font-size:28px; letter-spacing:-.035em; } .qnix-wd-plan-top p{ min-height:72px; margin:0; color:#68758b; font-size:12px; line-height:1.65; } .qnix-wd-price{ margin-top:25px; display:flex; align-items:baseline; gap:5px; } .qnix-wd-price strong{ color:#0758d8; font-size:37px; line-height:1; letter-spacing:-.045em; } .qnix-wd-price span{ color:#6b7890; font-size:11px; } .qnix-wd-page-box{ margin-top:22px; padding:13px; display:flex; align-items:center; gap:12px; border:1px solid #dce6f1; background:#f7faff; } .qnix-wd-page-featured{ border-color:#bfd6f1; background:linear-gradient( 90deg, rgba(7,88,216,.055), rgba(22,185,138,.055) ); } .qnix-wd-page-icon{ width:37px; height:37px; flex:0 0 37px; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,#0758d8,#08a8cf); color:#fff; font-size:10px; font-weight:800; } .qnix-wd-page-box strong{ display:block; color:#0d1730; font-size:13px; } .qnix-wd-page-box span{ display:block; margin-top:3px; color:#7a8799; font-size:9px; } .qnix-wd-divider{ height:1px; margin:22px 0 16px; background:#e6ecf3; } .qnix-wd-plan ul{ flex:1; margin:0; padding:0; list-style:none; } .qnix-wd-plan li{ position:relative; padding:6px 0 6px 19px; color:#536178; font-size:10.5px; line-height:1.5; } .qnix-wd-plan li:before{ content:""; position:absolute; left:0; top:11px; width:6px; height:6px; border-radius:50%; background:#16b98a; box-shadow:0 0 0 4px rgba(22,185,138,.08); } /* BUTTON — ALWAYS BOTTOM */ .qnix-wd-plan-btn{ width:100%; min-height:48px; margin-top:24px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; border:1px solid #cddaea; background:#fff; color:#0758d8; text-decoration:none; font-size:11px; font-weight:800; transition:.3s ease; } .qnix-wd-plan-btn b{ font-size:17px; font-weight:500; } .qnix-wd-plan-btn:hover{ background:#0758d8; border-color:#0758d8; color:#fff; transform:translateY(-2px); } .qnix-wd-plan-btn-featured{ background:linear-gradient(100deg,#0758d8,#087ee7); border-color:#0758d8; color:#fff; } .qnix-wd-plan-btn-featured:hover{ background:#062d7a; border-color:#062d7a; } /* ========================================================= EXPERIENCE ========================================================= */ .qnix-wd-experience{ padding:90px 7%; background: radial-gradient(circle at 78% 30%,rgba(8,168,207,.14),transparent 25%), linear-gradient(125deg,#062d7a,#0758d8 62%,#087ee7); } .qnix-wd-experience-inner{ max-width:1200px; margin:auto; display:grid; grid-template-columns:.8fr 1.2fr; gap:75px; align-items:center; } .qnix-wd-experience-copy{ max-width:500px; } .qnix-wd-experience-copy > span{ color:#b7e51c; } .qnix-wd-experience-copy h2{ margin:14px 0 18px; color:#fff; font-size:clamp(34px,4vw,51px); line-height:1.06; letter-spacing:-.04em; } .qnix-wd-experience-copy p{ margin:0; color:rgba(255,255,255,.76); font-size:14px; line-height:1.8; } .qnix-wd-system{ position:relative; display:grid; grid-template-columns:1fr 1fr; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); } .qnix-wd-system-item{ position:relative; min-height:155px; padding:25px; display:flex; flex-direction:column; justify-content:center; border-right:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); } .qnix-wd-system-item:nth-child(3n){ border-right:0; } .qnix-wd-system-item:nth-last-child(-n+2){ border-bottom:0; } .qnix-wd-system-item b{ color:#b7e51c; font-size:9px; letter-spacing:.15em; } .qnix-wd-system-item strong{ margin-top:10px; color:#fff; font-size:15px; } .qnix-wd-system-item span{ margin-top:7px; color:rgba(255,255,255,.65); font-size:11px; line-height:1.6; } /* ========================================================= COMPARISON ========================================================= */ .qnix-wd-compare{ padding:88px 7%; background:#f4f8ff; } .qnix-wd-compare-head{ max-width:720px; margin:0 auto 42px; text-align:center; } .qnix-wd-compare-head > span{ color:#0758d8; } .qnix-wd-compare-head h2{ margin:14px 0 0; color:#0d1730; font-size:clamp(30px,3.3vw,44px); line-height:1.1; letter-spacing:-.035em; } .qnix-wd-table-wrap{ max-width:1180px; margin:auto; overflow-x:auto; background:#fff; border:1px solid #dce6f1; box-shadow:0 15px 45px rgba(17,55,110,.06); } .qnix-wd-table{ width:100%; min-width:780px; border-collapse:collapse; } .qnix-wd-table th{ padding:17px 20px; background:#062d7a; color:#fff; text-align:left; font-size:9px; font-weight:800; letter-spacing:.12em; } .qnix-wd-table th:not(:first-child){ text-align:center; } .qnix-wd-table td{ padding:16px 20px; border-bottom:1px solid #e8edf4; color:#56647b; font-size:12px; } .qnix-wd-table td:not(:first-child){ text-align:center; color:#0758d8; font-weight:800; } .qnix-wd-table tr:last-child td{ border-bottom:0; } .qnix-wd-table tr:hover td{ background:#f8fbff; } /* ========================================================= PROCESS ========================================================= */ .qnix-wd-process{ padding:90px 7%; background:#fff; } .qnix-wd-process-inner{ max-width:1200px; margin:auto; display:grid; grid-template-columns:.8fr 1.2fr; gap:75px; align-items:center; } .qnix-wd-process-copy{ max-width:500px; } .qnix-wd-process-copy > span{ color:#08a8cf; } .qnix-wd-process-copy h2{ margin:14px 0 18px; color:#0d1730; font-size:clamp(34px,4vw,51px); line-height:1.06; letter-spacing:-.04em; } .qnix-wd-process-copy p{ margin:0; color:#5d6b84; font-size:14px; line-height:1.8; } .qnix-wd-process-track{ border-left:2px solid #dce6f1; } .qnix-wd-process-item{ position:relative; padding:19px 25px 19px 35px; border-bottom:1px solid #e5ebf3; } .qnix-wd-process-item:last-child{ border-bottom:0; } .qnix-wd-process-item:before{ content:""; position:absolute; left:-6px; top:23px; width:10px; height:10px; border-radius:50%; background:#0758d8; box-shadow:0 0 0 5px #f4f8ff; } .qnix-wd-process-item b{ display:block; color:#0758d8; font-size:9px; letter-spacing:.16em; } .qnix-wd-process-item span{ display:block; margin-top:7px; color:#68758b; font-size:12px; line-height:1.6; } /* ========================================================= NOTE ========================================================= */ .qnix-wd-note{ padding:55px 7%; background:#f4f8ff; } .qnix-wd-note-inner{ max-width:1100px; margin:auto; padding:27px 30px; display:grid; grid-template-columns:65px 1fr; gap:22px; align-items:center; border:1px solid #dce6f2; background:#fff; } .qnix-wd-note-mark{ width:55px; height:55px; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,#0758d8,#08a8cf); color:#fff; font-size:26px; font-weight:800; } .qnix-wd-note-inner > div:last-child > span{ color:#0758d8; } .qnix-wd-note h3{ margin:8px 0 6px; color:#0d1730; font-size:19px; } .qnix-wd-note p{ margin:0; max-width:850px; color:#68758b; font-size:12px; line-height:1.7; } /* ========================================================= CTA ========================================================= */ .qnix-wd-cta{ padding:62px 7%; background:#062d7a; } .qnix-wd-cta-inner{ max-width:1200px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:35px; } .qnix-wd-cta span{ color:#b7e51c; } .qnix-wd-cta h2{ max-width:690px; margin:10px 0 0; color:#fff; font-size:clamp(28px,3vw,40px); line-height:1.1; letter-spacing:-.035em; } .qnix-wd-cta-btn{ display:inline-flex; align-items:center; gap:13px; padding:15px 22px; background:#fff; color:#0758d8; text-decoration:none; font-size:11px; font-weight:800; white-space:nowrap; transition:.3s ease; } .qnix-wd-cta-btn b{ font-size:17px; font-weight:500; } .qnix-wd-cta-btn:hover{ background:#b7e51c; color:#062d7a; transform:translateY(-3px); } /* ========================================================= REVEAL ========================================================= */ .qnix-wd-plan, .qnix-wd-table-wrap, .qnix-wd-experience-copy, .qnix-wd-system, .qnix-wd-process-copy, .qnix-wd-process-track, .qnix-wd-note-inner, .qnix-wd-cta-inner{ opacity:0; transform:translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); } .qnix-wd-visible{ opacity:1 !important; transform:translateY(0) !important; } /* ========================================================= RESPONSIVE ========================================================= */ @media(max-width:1120px){ .qnix-wd-plan-grid{ grid-template-columns:repeat(2,1fr); } .qnix-wd-plan{ min-height:650px; } .qnix-wd-experience-inner, .qnix-wd-process-inner{ grid-template-columns:1fr; gap:45px; } } @media(max-width:900px){ .qnix-wd-intro-inner{ grid-template-columns:1fr; gap:40px; } .qnix-wd-intro-copy{ max-width:760px; } .qnix-wd-visual{ min-height:310px; } .qnix-wd-cta-inner{ align-items:flex-start; flex-direction:column; } } @media(max-width:650px){ .qnix-wd-intro{ padding:55px 20px; } .qnix-wd-intro-copy h2{ font-size:39px; } .qnix-wd-intro-copy p{ font-size:14px; } .qnix-wd-tags{ gap:7px; } .qnix-wd-tags span{ font-size:9px; } .qnix-wd-visual{ min-height:275px; } .qnix-wd-grid{ width:260px; height:260px; } .qnix-wd-floating{ display:none; } .qnix-wd-packages{ padding:65px 20px; } .qnix-wd-heading{ margin-bottom:35px; } .qnix-wd-heading h2{ font-size:31px; } .qnix-wd-plan-grid{ grid-template-columns:1fr; gap:16px; } .qnix-wd-plan{ min-height:0; padding:27px 22px 22px; } .qnix-wd-plan-top p{ min-height:auto; } .qnix-wd-plan ul{ flex:none; } .qnix-wd-experience{ padding:65px 20px; } .qnix-wd-experience-copy h2{ font-size:34px; } .qnix-wd-system{ grid-template-columns:1fr; } .qnix-wd-system-item{ min-height:125px; border-right:0; border-bottom:1px solid rgba(255,255,255,.12); } .qnix-wd-system-item:last-child{ border-bottom:0; } .qnix-wd-compare{ padding:65px 20px; } .qnix-wd-compare-head h2{ font-size:31px; } .qnix-wd-process{ padding:65px 20px; } .qnix-wd-process-copy h2{ font-size:34px; } .qnix-wd-note{ padding:42px 20px; } .qnix-wd-note-inner{ padding:22px; grid-template-columns:1fr; gap:15px; } .qnix-wd-cta{ padding:48px 20px; } .qnix-wd-cta h2{ font-size:29px; } .qnix-wd-cta-btn{ width:100%; justify-content:center; } } @media(prefers-reduced-motion:reduce){ .qnix-wd-plan, .qnix-wd-table-wrap, .qnix-wd-experience-copy, .qnix-wd-system, .qnix-wd-process-copy, .qnix-wd-process-track, .qnix-wd-note-inner, .qnix-wd-cta-inner{ opacity:1; transform:none; transition:none; } .qnix-wd-plan:hover, .qnix-wd-cta-btn:hover, .qnix-wd-plan-btn:hover{ transform:none; } } /* ========================================================= QNIX DIGITAL — WEB DEVELOPMENT PACKAGES ========================================================= */ .qnix-dev-intro, .qnix-dev-packages, .qnix-dev-stack, .qnix-dev-compare, .qnix-dev-process, .qnix-dev-note, .qnix-dev-cta{ font-family:inherit; box-sizing:border-box; } .qnix-dev-intro *, .qnix-dev-packages *, .qnix-dev-stack *, .qnix-dev-compare *, .qnix-dev-process *, .qnix-dev-note *, .qnix-dev-cta *{ box-sizing:border-box; } .qnix-dev-intro{ padding:82px 24px 74px; background: radial-gradient(circle at 82% 35%,rgba(8,168,207,.13),transparent 28%), linear-gradient(135deg,#f7faff 0%,#eef6ff 58%,#f7fff8 100%); overflow:hidden; } .qnix-dev-intro-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:1fr .82fr; gap:70px; align-items:center; } .qnix-dev-intro-copy{ max-width:700px; } .qnix-dev-eyebrow{ display:inline-flex; align-items:center; gap:10px; color:#0758d8; font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; } .qnix-dev-eyebrow:before{ content:""; width:28px; height:2px; background:linear-gradient(90deg,#0758d8,#16b98a); } .qnix-dev-intro h2{ margin:18px 0 20px; color:#0d1730; font-size:clamp(40px,5vw,68px); line-height:1.02; letter-spacing:-2.8px; max-width:680px; } .qnix-dev-intro p{ margin:0; max-width:650px; color:#5d6b84; font-size:17px; line-height:1.8; } .qnix-dev-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; } .qnix-dev-tags span{ padding:10px 15px; border:1px solid #d8e4f2; border-radius:50px; background:#fff; color:#36506f; font-size:12px; font-weight:700; box-shadow:0 8px 24px rgba(17,55,110,.05); } .qnix-dev-code-visual{ position:relative; min-height:390px; display:flex; align-items:center; justify-content:center; } .qnix-dev-window{ width:min(470px,100%); padding:18px; border:1px solid rgba(7,88,216,.18); border-radius:24px; background:rgba(255,255,255,.92); box-shadow: 0 35px 80px rgba(7,88,216,.16), 0 0 0 12px rgba(7,88,216,.035); transform:perspective(900px) rotateY(-7deg) rotateX(3deg); position:relative; z-index:2; } .qnix-dev-window-top{ display:flex; gap:7px; padding-bottom:16px; border-bottom:1px solid #e6edf6; } .qnix-dev-window-top span{ width:8px; height:8px; border-radius:50%; background:#b7e51c; } .qnix-dev-window-top span:nth-child(2){ background:#08a8cf; } .qnix-dev-window-top span:nth-child(3){ background:#0758d8; } .qnix-dev-code{ padding:26px 18px 18px; } .code-line{ height:8px; margin-bottom:13px; border-radius:10px; background:linear-gradient(90deg,#0758d8,#08a8cf); opacity:.8; } .code-wide{width:88%} .code-medium{width:64%} .code-short{width:43%} .code-tiny{width:29%} .code-panel{ margin:22px 0; padding:17px; border-radius:14px; background:linear-gradient(135deg,#f1f7ff,#f3fff8); border:1px solid #dce8f4; } .code-panel div{ height:6px; width:70%; margin-bottom:9px; border-radius:8px; background:#79c91c; } .code-panel div:nth-child(2){ width:52%; background:#08a8cf; } .code-panel div:nth-child(3){ width:80%; margin-bottom:0; background:#0758d8; } .qnix-dev-status{ display:flex; align-items:center; gap:8px; padding:13px 14px; border-radius:12px; background:#f5f9ff; color:#49617e; font-size:10px; font-weight:800; letter-spacing:1.5px; } .status-dot{ width:7px; height:7px; border-radius:50%; background:#79c91c; box-shadow:0 0 0 5px rgba(121,201,28,.12); } .qnix-dev-orbit-dot{ position:absolute; border-radius:50%; z-index:1; } .dot-one{ width:110px; height:110px; right:3%; top:4%; background:linear-gradient(135deg,rgba(8,168,207,.16),rgba(7,88,216,.02)); } .dot-two{ width:65px; height:65px; left:6%; bottom:8%; background:linear-gradient(135deg,rgba(121,201,28,.18),rgba(22,185,138,.04)); } /* PACKAGES */ .qnix-dev-packages{ padding:90px 24px; background:#fff; } .qnix-dev-section-head{ max-width:760px; margin:0 auto 50px; text-align:center; } .qnix-dev-section-head h2{ margin:15px 0 13px; color:#0d1730; font-size:clamp(30px,4vw,48px); line-height:1.08; letter-spacing:-1.8px; } .qnix-dev-section-head p{ margin:0 auto; max-width:650px; color:#5d6b84; font-size:15px; line-height:1.75; } .qnix-dev-plan-grid{ max-width:1380px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch; } .qnix-dev-plan{ position:relative; min-height:680px; display:flex; flex-direction:column; padding:30px 26px 25px; border:1px solid #dce6f2; border-radius:22px; background:#fff; box-shadow:0 16px 45px rgba(17,55,110,.07); transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease; overflow:hidden; } .qnix-dev-plan:before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#0758d8,#08a8cf,#79c91c); opacity:.5; } .qnix-dev-plan:hover{ transform:translateY(-8px); border-color:#b9d0ee; box-shadow:0 28px 65px rgba(7,88,216,.13); } .qnix-dev-plan-featured{ border-color:#087ee7; box-shadow:0 25px 65px rgba(7,88,216,.14); background: linear-gradient(180deg,rgba(247,251,255,.95),#fff 45%); } .qnix-dev-plan-featured:before{ opacity:1; } .qnix-dev-popular{ position:absolute; top:18px; right:18px; padding:7px 10px; border-radius:30px; background:#0758d8; color:#fff; font-size:9px; font-weight:800; letter-spacing:1.1px; } .qnix-dev-plan-label{ color:#0758d8; font-size:11px; font-weight:800; letter-spacing:1.8px; } .qnix-dev-plan-top h3{ margin:20px 0 0; color:#0d1730; font-size:43px; line-height:1; letter-spacing:-1.7px; } .qnix-dev-plan-unit{ margin:7px 0 0; color:#8492a7; font-size:12px; } .qnix-dev-plan-meta{ margin:28px 0 23px; padding:17px 0; border-top:1px solid #e4ebf4; border-bottom:1px solid #e4ebf4; } .qnix-dev-plan-meta strong{ display:block; color:#0d1730; font-size:15px; } .qnix-dev-plan-meta span{ display:block; margin-top:5px; color:#687990; font-size:12px; } .qnix-dev-feature-list{ margin:0; padding:0; list-style:none; } .qnix-dev-feature-list li{ position:relative; padding:0 0 12px 23px; color:#50627a; font-size:12px; line-height:1.55; } .qnix-dev-feature-list li:before{ content:""; position:absolute; left:0; top:5px; width:8px; height:8px; border-radius:2px; transform:rotate(45deg); background:linear-gradient(135deg,#0758d8,#79c91c); } .qnix-dev-plan-btn{ display:flex; align-items:center; justify-content:space-between; gap:15px; width:100%; margin-top:auto; padding:14px 16px; border:1px solid #d5e1ef; border-radius:12px; background:#f7faff; color:#0758d8; text-decoration:none; font-size:12px; font-weight:800; transition:.3s ease; } .qnix-dev-plan-btn span{ font-size:18px; transition:transform .3s ease; } .qnix-dev-plan-btn:hover{ background:#0758d8; border-color:#0758d8; color:#fff; } .qnix-dev-plan-btn:hover span{ transform:translateX(4px); } .qnix-dev-plan-btn-main{ background:#0758d8; border-color:#0758d8; color:#fff; } .qnix-dev-plan-btn-main:hover{ background:#062d7a; border-color:#062d7a; } /* FOUNDATION */ .qnix-dev-stack{ padding:90px 24px; background:#f4f8ff; } .qnix-dev-stack-inner{ max-width:1240px; margin:auto; display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:center; } .qnix-dev-stack-copy h2{ margin:17px 0 18px; color:#0d1730; font-size:clamp(32px,4vw,51px); line-height:1.08; letter-spacing:-2px; } .qnix-dev-stack-copy p{ margin:0; max-width:520px; color:#5d6b84; font-size:15px; line-height:1.8; } .qnix-dev-stack-list{ border-top:1px solid #d9e4f1; } .qnix-dev-stack-item{ display:grid; grid-template-columns:50px 1fr; gap:18px; padding:23px 0; border-bottom:1px solid #d9e4f1; transition:.3s ease; } .qnix-dev-stack-item:hover{ padding-left:10px; } .qnix-dev-stack-item > span{ color:#0758d8; font-size:11px; font-weight:800; letter-spacing:1px; padding-top:4px; } .qnix-dev-stack-item h3{ margin:0 0 6px; color:#0d1730; font-size:17px; } .qnix-dev-stack-item p{ margin:0; color:#667891; font-size:13px; line-height:1.6; } /* COMPARISON */ .qnix-dev-compare{ padding:90px 24px; background:#fff; } .qnix-dev-table-wrap{ max-width:1240px; margin:auto; overflow-x:auto; border:1px solid #dce6f2; border-radius:18px; box-shadow:0 18px 50px rgba(17,55,110,.07); } .qnix-dev-table{ width:100%; min-width:850px; border-collapse:collapse; background:#fff; } .qnix-dev-table th{ padding:19px 18px; background:#062d7a; color:#fff; font-size:11px; text-align:left; letter-spacing:.8px; text-transform:uppercase; } .qnix-dev-table th:not(:first-child){ text-align:center; } .qnix-dev-table td{ padding:17px 18px; border-bottom:1px solid #e6edf5; color:#5d6b84; font-size:12px; } .qnix-dev-table td:not(:first-child){ text-align:center; } .qnix-dev-table tbody tr:last-child td{ border-bottom:0; } .qnix-dev-table tbody tr:hover{ background:#f7faff; } .qnix-dev-table td:first-child{ color:#0d1730; font-weight:700; } /* PROCESS */ .qnix-dev-process{ padding:90px 24px; background: linear-gradient(135deg,#062d7a 0%,#0758d8 55%,#08a8cf 100%); position:relative; overflow:hidden; } .qnix-dev-process:after{ content:""; position:absolute; width:500px; height:500px; right:-180px; top:-230px; border:1px solid rgba(255,255,255,.13); border-radius:50%; } .qnix-dev-process-inner{ position:relative; z-index:2; max-width:1240px; margin:auto; } .qnix-dev-process .qnix-dev-eyebrow{ color:#b7e51c; } .qnix-dev-process .qnix-dev-eyebrow:before{ background:#b7e51c; } .qnix-dev-process-heading h2{ max-width:650px; margin:16px 0 50px; color:#fff; font-size:clamp(32px,4vw,50px); line-height:1.08; letter-spacing:-1.8px; } .qnix-dev-process-track{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.2); } .qnix-dev-process-item{ min-height:205px; padding:27px 25px 20px; border-right:1px solid rgba(255,255,255,.16); } .qnix-dev-process-item:first-child{ padding-left:0; } .qnix-dev-process-item:last-child{ border-right:0; } .qnix-dev-process-item strong{ color:#b7e51c; font-size:11px; letter-spacing:1px; } .qnix-dev-process-item h3{ margin:27px 0 10px; color:#fff; font-size:20px; } .qnix-dev-process-item p{ margin:0; max-width:230px; color:rgba(255,255,255,.72); font-size:13px; line-height:1.7; } /* NOTE */ .qnix-dev-note{ padding:38px 24px; background:#f4f8ff; } .qnix-dev-note-inner{ max-width:1000px; margin:auto; display:flex; align-items:center; gap:24px; padding:25px 30px; border:1px solid #dbe6f2; border-radius:18px; background:#fff; } .qnix-dev-note-mark{ flex:0 0 52px; width:52px; height:52px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(135deg,#0758d8,#08a8cf); color:#fff; font-size:22px; font-weight:800; } .qnix-dev-note span{ color:#0758d8; font-size:9px; font-weight:800; letter-spacing:1.6px; } .qnix-dev-note h3{ margin:6px 0 4px; color:#0d1730; font-size:18px; } .qnix-dev-note p{ margin:0; color:#667891; font-size:12px; line-height:1.6; } /* CTA */ .qnix-dev-cta{ padding:78px 24px; background: radial-gradient(circle at 82% 50%,rgba(8,168,207,.24),transparent 25%), linear-gradient(115deg,#061f5c 0%,#0758d8 54%,#087ee7 78%,#10a4b4 100%); } .qnix-dev-cta-inner{ max-width:1180px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:40px; } .qnix-dev-cta .qnix-dev-eyebrow{ color:#b7e51c; } .qnix-dev-cta .qnix-dev-eyebrow:before{ background:#b7e51c; } .qnix-dev-cta h2{ max-width:700px; margin:15px 0 9px; color:#fff; font-size:clamp(30px,4vw,48px); line-height:1.08; letter-spacing:-1.8px; } .qnix-dev-cta p{ margin:0; color:rgba(255,255,255,.75); font-size:14px; } .qnix-dev-cta-btn{ flex:0 0 auto; display:flex; align-items:center; gap:18px; padding:16px 21px; border-radius:12px; background:#fff; color:#0758d8; text-decoration:none; font-size:12px; font-weight:800; box-shadow:0 15px 35px rgba(0,0,0,.15); transition:.3s ease; } .qnix-dev-cta-btn span{ font-size:18px; transition:transform .3s ease; } .qnix-dev-cta-btn:hover{ transform:translateY(-3px); box-shadow:0 20px 42px rgba(0,0,0,.2); } .qnix-dev-cta-btn:hover span{ transform:translateX(5px); } /* REVEAL */ .qnix-dev-plan, .qnix-dev-stack-item, .qnix-dev-process-item, .qnix-dev-note-inner{ opacity:0; transform:translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); } .qnix-dev-visible{ opacity:1 !important; transform:translateY(0) !important; } /* RESPONSIVE */ @media(max-width:1120px){ .qnix-dev-plan-grid{ grid-template-columns:repeat(2,1fr); max-width:850px; } .qnix-dev-plan{ min-height:650px; } .qnix-dev-intro-inner{ grid-template-columns:1fr .75fr; gap:40px; } .qnix-dev-stack-inner{ gap:45px; } } @media(max-width:850px){ .qnix-dev-intro{ padding:65px 20px; } .qnix-dev-intro-inner{ grid-template-columns:1fr; } .qnix-dev-intro-copy{ max-width:760px; } .qnix-dev-code-visual{ min-height:330px; } .qnix-dev-window{ transform:none; } .qnix-dev-stack-inner{ grid-template-columns:1fr; } .qnix-dev-process-track{ grid-template-columns:repeat(2,1fr); } .qnix-dev-process-item:nth-child(2){ border-right:0; } .qnix-dev-process-item:nth-child(3), .qnix-dev-process-item:nth-child(4){ border-top:1px solid rgba(255,255,255,.16); } .qnix-dev-cta-inner{ flex-direction:column; align-items:flex-start; } } @media(max-width:620px){ .qnix-dev-intro h2{ font-size:40px; letter-spacing:-1.8px; } .qnix-dev-intro p{ font-size:15px; } .qnix-dev-code-visual{ min-height:280px; } .qnix-dev-window{ padding:14px; border-radius:18px; } .qnix-dev-code{ padding:20px 12px 14px; } .qnix-dev-packages, .qnix-dev-stack, .qnix-dev-compare, .qnix-dev-process{ padding:70px 18px; } .qnix-dev-plan-grid{ grid-template-columns:1fr; } .qnix-dev-plan{ min-height:0; padding:28px 23px 23px; } .qnix-dev-plan-top h3{ font-size:40px; } .qnix-dev-process-track{ grid-template-columns:1fr; } .qnix-dev-process-item, .qnix-dev-process-item:first-child{ min-height:auto; padding:24px 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.16); } .qnix-dev-process-item:last-child{ border-bottom:0; } .qnix-dev-process-item:nth-child(3), .qnix-dev-process-item:nth-child(4){ border-top:0; } .qnix-dev-note{ padding:28px 18px; } .qnix-dev-note-inner{ align-items:flex-start; padding:22px; } .qnix-dev-note-mark{ flex-basis:44px; width:44px; height:44px; font-size:19px; } .qnix-dev-cta{ padding:65px 20px; } .qnix-dev-cta-btn{ width:100%; justify-content:space-between; } } @media(prefers-reduced-motion:reduce){ .qnix-dev-plan, .qnix-dev-stack-item, .qnix-dev-process-item, .qnix-dev-note-inner{ opacity:1; transform:none; transition:none; } .qnix-dev-plan, .qnix-dev-plan-btn, .qnix-dev-cta-btn{ transition:none; } } /* ========================================================= QNIX DIGITAL — PAY NOW PAGE ========================================================= */ .qnix-pay-page{ position:relative; overflow:hidden; background: radial-gradient(circle at 15% 20%,rgba(8,168,207,.16),transparent 27%), radial-gradient(circle at 90% 70%,rgba(121,201,28,.10),transparent 23%), linear-gradient(135deg,#f4f8ff 0%,#ffffff 52%,#f2fbf8 100%); color:#0d1730; } .qnix-pay-shell{ position:relative; z-index:2; max-width:1180px; min-height:690px; margin:0 auto; padding:90px 24px 80px; display:grid; grid-template-columns:1fr 480px; align-items:center; gap:80px; } /* INTRO */ .qnix-pay-intro{ max-width:650px; } .qnix-pay-eyebrow{ display:inline-flex; align-items:center; gap:10px; color:#0758d8; font-size:10px; font-weight:800; letter-spacing:2px; } .qnix-pay-eyebrow:before{ content:""; width:30px; height:2px; background:linear-gradient(90deg,#0758d8,#16b98a); } .qnix-pay-intro h1{ margin:20px 0 22px; color:#0d1730; font-size:clamp(42px,5.2vw,67px); line-height:1.02; letter-spacing:-3px; } .qnix-pay-intro h1 span{ background:linear-gradient(90deg,#0758d8,#08a8cf,#16b98a); -webkit-background-clip:text; background-clip:text; color:transparent; } .qnix-pay-intro p{ max-width:590px; margin:0; color:#5d6b84; font-size:16px; line-height:1.8; } .qnix-pay-trust-row{ display:flex; flex-wrap:wrap; margin-top:42px; border-top:1px solid #dce6f2; border-bottom:1px solid #dce6f2; } .qnix-pay-trust-row > div{ min-width:125px; padding:18px 24px 18px 0; margin-right:24px; border-right:1px solid #dce6f2; } .qnix-pay-trust-row > div:last-child{ border-right:0; margin-right:0; } .qnix-pay-trust-row strong{ display:block; color:#0758d8; font-size:13px; letter-spacing:1px; } .qnix-pay-trust-row span{ display:block; margin-top:5px; color:#718198; font-size:10px; } /* PAYMENT CARD */ .qnix-pay-card{ position:relative; padding:32px; border:1px solid rgba(7,88,216,.14); border-radius:24px; background:rgba(255,255,255,.94); box-shadow: 0 30px 80px rgba(17,55,110,.14), 0 0 0 10px rgba(7,88,216,.025); } .qnix-pay-card:before{ content:""; position:absolute; top:0; left:28px; right:28px; height:3px; border-radius:0 0 8px 8px; background:linear-gradient(90deg,#0758d8,#08a8cf,#79c91c); } .qnix-pay-card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding-bottom:23px; border-bottom:1px solid #e5ebf3; } .qnix-pay-label{ color:#0758d8; font-size:9px; font-weight:800; letter-spacing:1.7px; } .qnix-pay-card h2{ margin:8px 0 0; color:#0d1730; font-size:25px; letter-spacing:-.7px; } .qnix-pay-secure{ display:flex; align-items:center; gap:7px; padding:7px 10px; border-radius:30px; background:#f3f9ee; color:#4f761e; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; } .qnix-pay-secure-dot{ width:6px; height:6px; border-radius:50%; background:#79c91c; box-shadow:0 0 0 4px rgba(121,201,28,.13); } /* FORM */ .qnix-pay-form{ padding-top:28px; } .qnix-pay-field label{ display:block; margin-bottom:10px; color:#0d1730; font-size:12px; font-weight:800; } .qnix-pay-input-wrap{ position:relative; display:flex; align-items:center; height:64px; border:1px solid #d7e2ef; border-radius:14px; background:#fbfdff; overflow:hidden; transition:.3s ease; } .qnix-pay-input-wrap:focus-within{ border-color:#087ee7; box-shadow:0 0 0 4px rgba(7,88,216,.08); background:#fff; } .qnix-pay-currency{ padding-left:18px; color:#0758d8; font-size:25px; font-weight:800; } .qnix-pay-input-wrap input{ width:100%; height:100%; padding:0 12px; border:0; outline:0; background:transparent; color:#0d1730; font-size:24px; font-weight:700; font-family:inherit; } .qnix-pay-input-wrap input::placeholder{ color:#b1bdcc; } .qnix-pay-input-wrap input::-webkit-outer-spin-button, .qnix-pay-input-wrap input::-webkit-inner-spin-button{ margin:0; } .qnix-pay-usd{ padding-right:18px; color:#7c8ba0; font-size:10px; font-weight:800; letter-spacing:1px; } .qnix-pay-field small{ display:block; margin-top:9px; color:#8492a6; font-size:10px; line-height:1.5; } /* SUMMARY */ .qnix-pay-summary{ margin-top:25px; border:1px solid #e1e8f1; border-radius:14px; overflow:hidden; } .qnix-pay-summary > div{ display:flex; align-items:center; justify-content:space-between; gap:15px; padding:13px 15px; border-bottom:1px solid #e8edf4; } .qnix-pay-summary > div:last-child{ border-bottom:0; } .qnix-pay-summary span{ color:#78889d; font-size:10px; } .qnix-pay-summary strong{ color:#0d1730; font-size:11px; } .qnix-pay-summary .qnix-pay-total{ background:#f5f9ff; padding-top:17px; padding-bottom:17px; } .qnix-pay-total span{ color:#0758d8; font-weight:800; text-transform:uppercase; letter-spacing:1px; } .qnix-pay-total strong{ color:#0758d8; font-size:20px; } /* BUTTON */ .qnix-pay-submit{ width:100%; margin-top:18px; padding:17px 19px; display:flex; align-items:center; justify-content:space-between; gap:20px; border:0; border-radius:13px; background: linear-gradient(110deg,#062d7a,#0758d8 55%,#087ee7); color:#fff; font-family:inherit; font-size:12px; font-weight:800; cursor:pointer; box-shadow:0 15px 32px rgba(7,88,216,.22); transition:.3s ease; } .qnix-pay-submit b{ font-size:19px; font-weight:500; transition:transform .3s ease; } .qnix-pay-submit:hover{ transform:translateY(-3px); box-shadow:0 20px 42px rgba(7,88,216,.28); } .qnix-pay-submit:hover b{ transform:translateX(5px); } .qnix-pay-note{ margin:13px 0 0; color:#8a98aa; text-align:center; font-size:9px; line-height:1.5; } /* BOTTOM STRIP */ .qnix-pay-bottom{ position:relative; z-index:2; padding:25px 24px; border-top:1px solid rgba(7,88,216,.1); background:#fff; } .qnix-pay-bottom-inner{ max-width:1180px; margin:auto; display:flex; align-items:center; gap:16px; } .qnix-pay-bottom-mark{ width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:11px; background:linear-gradient(135deg,#0758d8,#08a8cf); color:#fff; font-size:17px; font-weight:800; } .qnix-pay-bottom-inner > div:nth-child(2){ flex:1; } .qnix-pay-bottom-inner strong{ display:block; color:#0d1730; font-size:12px; } .qnix-pay-bottom-inner span{ display:block; margin-top:3px; color:#7a899d; font-size:10px; } .qnix-pay-bottom-inner > a{ display:flex; align-items:center; gap:10px; color:#0758d8; text-decoration:none; font-size:11px; font-weight:800; } .qnix-pay-bottom-inner > a b{ font-size:17px; transition:transform .3s ease; } .qnix-pay-bottom-inner > a:hover b{ transform:translateX(4px); } /* RESPONSIVE */ @media(max-width:950px){ .qnix-pay-shell{ grid-template-columns:1fr; max-width:700px; gap:50px; padding-top:70px; padding-bottom:65px; } .qnix-pay-intro{ max-width:100%; text-align:center; } .qnix-pay-eyebrow{ justify-content:center; } .qnix-pay-intro p{ margin-left:auto; margin-right:auto; } .qnix-pay-trust-row{ justify-content:center; text-align:left; } .qnix-pay-card{ max-width:520px; width:100%; margin:auto; } } @media(max-width:600px){ .qnix-pay-shell{ padding:55px 18px 50px; gap:35px; } .qnix-pay-intro h1{ font-size:40px; letter-spacing:-1.8px; } .qnix-pay-intro p{ font-size:14px; } .qnix-pay-trust-row{ display:grid; grid-template-columns:repeat(3,1fr); text-align:center; } .qnix-pay-trust-row > div{ min-width:0; margin:0; padding:16px 8px; border-right:1px solid #dce6f2; } .qnix-pay-trust-row > div:last-child{ border-right:0; } .qnix-pay-card{ padding:25px 20px 22px; border-radius:19px; } .qnix-pay-card-top{ align-items:center; } .qnix-pay-card h2{ font-size:22px; } .qnix-pay-secure{ padding:6px 8px; font-size:8px; } .qnix-pay-bottom-inner{ flex-wrap:wrap; } .qnix-pay-bottom-inner > div:nth-child(2){ min-width:calc(100% - 60px); } .qnix-pay-bottom-inner > a{ width:100%; justify-content:center; padding-top:8px; } } @media(prefers-reduced-motion:reduce){ .qnix-pay-submit, .qnix-pay-bottom-inner > a b{ transition:none; } } /* ========================================================= QNIX DIGITAL — TECHNICAL SEO ========================================================= */ .qnix-techseo-intro, .qnix-techseo-foundation, .qnix-techseo-diagnostic, .qnix-techseo-scope, .qnix-techseo-outcome, .qnix-techseo-final{ font-family:inherit; } .qnix-techseo-intro{ position:relative; padding:90px 6%; background:#f4f8ff; overflow:hidden; } .qnix-techseo-intro:before{ content:""; position:absolute; width:460px; height:460px; right:-190px; top:-210px; border-radius:50%; background:radial-gradient(circle,#08a8cf 0%,#0758d8 48%,transparent 72%); opacity:.13; } .qnix-techseo-intro-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:1fr .9fr; gap:75px; align-items:center; } .qnix-techseo-copy{ max-width:650px; } .qnix-techseo-eyebrow{ display:inline-flex; align-items:center; gap:10px; color:#0758d8; font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; } .qnix-techseo-eyebrow:before{ content:""; width:28px; height:2px; background:#79c91c; } .qnix-techseo-copy h2, .qnix-techseo-section-head h2, .qnix-techseo-diagnostic-copy h2, .qnix-techseo-scope-head h2, .qnix-techseo-outcome-content h2, .qnix-techseo-final h2{ margin:18px 0 20px; color:#0d1730; font-size:clamp(38px,4.1vw,64px); line-height:1.02; letter-spacing:-.045em; } .qnix-techseo-copy h2 em, .qnix-techseo-diagnostic-copy h2 em{ color:#0758d8; font-style:normal; } .qnix-techseo-copy p, .qnix-techseo-diagnostic-copy p, .qnix-techseo-section-head p, .qnix-techseo-outcome-content p{ color:#5d6b84; font-size:16px; line-height:1.85; max-width:650px; } .qnix-techseo-tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:28px; } .qnix-techseo-tags span{ padding:9px 13px; border:1px solid #dce6f3; background:#fff; color:#0d1730; font-size:11px; font-weight:700; letter-spacing:.04em; } .qnix-techseo-blueprint{ position:relative; min-height:440px; padding:20px; overflow:hidden; background:#062d7a; border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 70px rgba(6,45,122,.22); } .qnix-techseo-blueprint:before{ content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px); background-size:32px 32px; } .qnix-techseo-blueprint-top, .qnix-techseo-blueprint-foot{ position:relative; z-index:2; display:flex; justify-content:space-between; font-size:9px; letter-spacing:.16em; color:rgba(255,255,255,.62); } .qnix-techseo-blueprint-top b{ color:#b7e51c; font-weight:700; } .qnix-techseo-scan{ position:absolute; inset:65px 35px 55px; } .qnix-techseo-scan:before, .qnix-techseo-scan:after{ content:""; position:absolute; background:rgba(8,168,207,.35); } .qnix-techseo-scan:before{ width:1px; height:100%; left:50%; top:0; } .qnix-techseo-scan:after{ height:1px; width:100%; left:0; top:50%; } .qnix-techseo-scan-line{ position:absolute; width:76%; height:76%; left:12%; top:12%; border:1px solid rgba(8,168,207,.45); transform:rotate(45deg); } .qnix-techseo-core{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:125px; height:125px; display:flex; flex-direction:column; justify-content:center; align-items:center; background:linear-gradient(145deg,#087ee7,#0758d8); border:1px solid rgba(255,255,255,.28); box-shadow:0 0 55px rgba(8,168,207,.3); color:#fff; z-index:4; } .qnix-techseo-core strong{ font-size:25px; letter-spacing:.08em; } .qnix-techseo-core small{ margin-top:6px; text-align:center; font-size:8px; line-height:1.5; letter-spacing:.16em; opacity:.7; } .qnix-techseo-node{ position:absolute; z-index:5; display:flex; align-items:center; gap:8px; color:#fff; font-size:9px; font-weight:800; letter-spacing:.13em; } .qnix-techseo-node i{ width:8px; height:8px; border-radius:50%; background:#b7e51c; box-shadow:0 0 15px rgba(183,229,28,.7); } .node-a{left:0;top:12%;} .node-b{right:0;top:29%;} .node-c{left:3%;bottom:25%;} .node-d{right:1%;bottom:11%;} .qnix-techseo-blueprint-foot{ position:absolute; left:20px; right:20px; bottom:18px; } .qnix-techseo-foundation{ padding:105px 6%; background:#fff; } .qnix-techseo-section-head{ max-width:1280px; margin:0 auto 55px; display:grid; grid-template-columns:1fr .72fr; gap:80px; align-items:end; } .qnix-techseo-section-head h2{ font-size:clamp(36px,4vw,58px); } .qnix-techseo-layers{ max-width:1280px; margin:auto; border-top:1px solid #dce6f3; } .qnix-techseo-layer{ position:relative; min-height:145px; display:grid; grid-template-columns:80px 1fr 130px; gap:30px; align-items:center; padding:25px 10px; border-bottom:1px solid #dce6f3; transition:.35s ease; } .qnix-techseo-layer:hover{ padding-left:25px; background:#f4f8ff; } .layer-code{ color:#087ee7; font-size:11px; font-weight:800; letter-spacing:.12em; } .qnix-techseo-layer h3{ margin:0 0 8px; color:#0d1730; font-size:22px; } .qnix-techseo-layer p{ margin:0; max-width:720px; color:#5d6b84; font-size:14px; line-height:1.7; } .qnix-techseo-layer > strong{ justify-self:end; color:#0758d8; font-size:9px; letter-spacing:.15em; } .qnix-techseo-diagnostic{ padding:100px 6%; background:#062d7a; color:#fff; overflow:hidden; } .qnix-techseo-diagnostic-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:.8fr 1fr; gap:100px; align-items:center; } .qnix-techseo-diagnostic-copy .qnix-techseo-eyebrow{ color:#b7e51c; } .qnix-techseo-diagnostic-copy .qnix-techseo-eyebrow:before{ background:#b7e51c; } .qnix-techseo-diagnostic-copy h2{ color:#fff; font-size:clamp(38px,4vw,58px); } .qnix-techseo-diagnostic-copy p{ color:rgba(255,255,255,.68); } .qnix-techseo-btn, .qnix-techseo-final-btn{ display:inline-flex; align-items:center; justify-content:space-between; gap:28px; min-width:225px; margin-top:28px; padding:15px 17px 15px 20px; text-decoration:none; background:#087ee7; color:#fff; font-size:12px; font-weight:800; transition:.35s ease; } .qnix-techseo-btn b, .qnix-techseo-final-btn b{ display:grid; place-items:center; width:31px; height:31px; background:#b7e51c; color:#062d7a; font-size:17px; } .qnix-techseo-btn:hover, .qnix-techseo-final-btn:hover{ transform:translateY(-4px); background:#08a8cf; } .qnix-techseo-diagnostic-map{ position:relative; padding:10px 0; } .diagnostic-track{ position:absolute; width:1px; left:28px; top:35px; bottom:35px; background:linear-gradient(#08a8cf,#b7e51c); opacity:.5; } .diagnostic-item{ position:relative; display:grid; grid-template-columns:57px 1fr; align-items:center; min-height:105px; } .diagnostic-item > span{ position:relative; z-index:2; width:57px; height:57px; display:grid; place-items:center; background:#062d7a; border:1px solid rgba(255,255,255,.22); color:rgba(255,255,255,.5); font-size:10px; } .diagnostic-item.active > span{ border-color:#b7e51c; color:#b7e51c; box-shadow:0 0 25px rgba(183,229,28,.16); } .diagnostic-item div{ padding-left:28px; } .diagnostic-item b{ display:block; color:#fff; font-size:13px; letter-spacing:.12em; } .diagnostic-item small{ display:block; margin-top:7px; color:rgba(255,255,255,.5); font-size:12px; } .qnix-techseo-scope{ padding:105px 6%; background:#f4f8ff; } .qnix-techseo-scope-head{ max-width:1280px; margin:0 auto 50px; } .qnix-techseo-scope-head h2{ font-size:clamp(38px,4vw,58px); } .qnix-techseo-scope-grid{ max-width:1280px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #dce6f3; border-left:1px solid #dce6f3; } .qnix-techseo-scope-card{ min-height:215px; padding:28px; background:#fff; border-right:1px solid #dce6f3; border-bottom:1px solid #dce6f3; transition:.35s ease; } .qnix-techseo-scope-card:hover{ transform:translateY(-5px); box-shadow:0 20px 45px rgba(17,55,110,.09); } .qnix-techseo-scope-card span{ color:#087ee7; font-size:10px; font-weight:800; letter-spacing:.14em; } .qnix-techseo-scope-card h3{ margin:34px 0 9px; color:#0d1730; font-size:21px; } .qnix-techseo-scope-card p{ margin:0; color:#5d6b84; font-size:13px; line-height:1.7; } .qnix-techseo-outcome{ padding:95px 6%; background:#fff; } .qnix-techseo-outcome-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:190px 1fr; gap:70px; padding:65px; background:linear-gradient(120deg,#0758d8,#087ee7 55%,#10a4b4); position:relative; overflow:hidden; } .qnix-techseo-outcome-inner:after{ content:""; position:absolute; width:310px; height:310px; right:-100px; bottom:-150px; border-radius:50%; border:55px solid rgba(183,229,28,.13); } .qnix-techseo-outcome-label span{ color:#b7e51c; font-size:10px; font-weight:800; letter-spacing:.16em; } .qnix-techseo-outcome-content{ position:relative; z-index:2; } .qnix-techseo-outcome-content h2{ margin-top:0; color:#fff; font-size:clamp(35px,4vw,56px); } .qnix-techseo-outcome-content p{ color:rgba(255,255,255,.72); max-width:780px; } .qnix-techseo-outcome-points{ display:flex; flex-wrap:wrap; gap:10px; margin-top:25px; } .qnix-techseo-outcome-points span{ padding:9px 12px; border:1px solid rgba(255,255,255,.2); color:#fff; font-size:10px; letter-spacing:.04em; } .qnix-techseo-final{ padding:85px 6%; background:#0d1730; } .qnix-techseo-final-inner{ max-width:1280px; margin:auto; display:flex; justify-content:space-between; align-items:center; gap:50px; } .qnix-techseo-final .qnix-techseo-eyebrow{ color:#08a8cf; } .qnix-techseo-final .qnix-techseo-eyebrow:before{ background:#b7e51c; } .qnix-techseo-final h2{ margin-bottom:0; color:#fff; font-size:clamp(34px,3.7vw,54px); } .qnix-techseo-final-btn{ flex-shrink:0; background:#0758d8; } .qnix-techseo-reveal{ opacity:0; transform:translateY(25px); transition:opacity .7s ease,transform .7s ease; } .qnix-techseo-reveal.qnix-techseo-visible{ opacity:1; transform:translateY(0); } @media(max-width:1100px){ .qnix-techseo-intro-inner, .qnix-techseo-diagnostic-inner{ grid-template-columns:1fr; gap:55px; } .qnix-techseo-section-head{ grid-template-columns:1fr; gap:10px; } .qnix-techseo-scope-grid{ grid-template-columns:repeat(2,1fr); } .qnix-techseo-outcome-inner{ grid-template-columns:1fr; gap:25px; padding:50px; } .qnix-techseo-final-inner{ align-items:flex-start; flex-direction:column; } } @media(max-width:720px){ .qnix-techseo-intro, .qnix-techseo-foundation, .qnix-techseo-diagnostic, .qnix-techseo-scope, .qnix-techseo-outcome{ padding:65px 20px; } .qnix-techseo-final{ padding:60px 20px; } .qnix-techseo-copy h2, .qnix-techseo-section-head h2, .qnix-techseo-diagnostic-copy h2, .qnix-techseo-scope-head h2, .qnix-techseo-outcome-content h2, .qnix-techseo-final h2{ font-size:36px; } .qnix-techseo-blueprint{ min-height:350px; } .qnix-techseo-layer{ grid-template-columns:45px 1fr; gap:15px; } .qnix-techseo-layer > strong{ display:none; } .qnix-techseo-scope-grid{ grid-template-columns:1fr; } .qnix-techseo-outcome-inner{ padding:35px 25px; } .qnix-techseo-final-inner{ gap:25px; } .qnix-techseo-final-btn{ width:100%; min-width:0; } .qnix-techseo-node{ font-size:7px; } .qnix-techseo-core{ width:105px; height:105px; } .qnix-techseo-core strong{ font-size:21px; } } @media(prefers-reduced-motion:reduce){ .qnix-techseo-reveal{ opacity:1; transform:none; transition:none; } .qnix-techseo-layer, .qnix-techseo-scope-card, .qnix-techseo-btn, .qnix-techseo-final-btn{ transition:none; } } /* ========================================================= QNIX DIGITAL — LOCAL SEO ========================================================= */ .qnix-localseo-hero, .qnix-localseo-intent, .qnix-localseo-system, .qnix-localseo-services, .qnix-localseo-market, .qnix-localseo-results, .qnix-localseo-final{ font-family:inherit; } .qnix-localseo-hero{ padding:88px 6%; background:#fff; overflow:hidden; } .qnix-localseo-hero-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:1fr .9fr; gap:70px; align-items:center; } .qnix-localseo-hero-copy{ max-width:650px; } .qnix-localseo-eyebrow{ display:inline-flex; align-items:center; gap:10px; color:#0758d8; font-size:11px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; } .qnix-localseo-eyebrow:before{ content:""; width:28px; height:2px; background:#79c91c; } .qnix-localseo-hero h2, .qnix-localseo-intent-head h2, .qnix-localseo-system-copy h2, .qnix-localseo-services-head h2, .qnix-localseo-market-copy h2, .qnix-localseo-results-head h2, .qnix-localseo-final h2{ margin:18px 0 20px; color:#0d1730; font-size:clamp(38px,4.3vw,65px); line-height:1.02; letter-spacing:-.045em; } .qnix-localseo-hero h2 em{ color:#0758d8; font-style:normal; } .qnix-localseo-hero p, .qnix-localseo-intent-head p, .qnix-localseo-system-copy p, .qnix-localseo-services-head p, .qnix-localseo-market-copy p, .qnix-localseo-results-head p{ color:#5d6b84; font-size:16px; line-height:1.85; } .qnix-localseo-hero-points, .qnix-localseo-market-points{ display:flex; flex-wrap:wrap; gap:9px; margin-top:28px; } .qnix-localseo-hero-points span, .qnix-localseo-market-points span{ padding:9px 13px; border:1px solid #dce6f3; background:#f4f8ff; color:#0d1730; font-size:10px; font-weight:800; letter-spacing:.04em; } .qnix-localseo-map{ position:relative; min-height:460px; overflow:hidden; background:#062d7a; box-shadow:0 30px 75px rgba(6,45,122,.18); } .qnix-localseo-map-grid, .territory-grid{ position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px); background-size:35px 35px; } .qnix-localseo-road{ position:absolute; height:1px; background:linear-gradient(90deg,transparent,rgba(8,168,207,.7),transparent); transform-origin:left center; } .road-one{ width:110%; top:32%; left:-5%; transform:rotate(18deg); } .road-two{ width:105%; top:62%; left:-4%; transform:rotate(-23deg); } .road-three{ width:95%; top:78%; left:8%; transform:rotate(4deg); } .qnix-localseo-pin{ position:absolute; z-index:4; display:flex; align-items:center; gap:7px; color:#fff; font-size:8px; font-weight:800; letter-spacing:.14em; } .qnix-localseo-pin i{ width:9px; height:9px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:#b7e51c; box-shadow:0 0 18px rgba(183,229,28,.75); } .pin-one{left:17%;top:24%;} .pin-two{right:14%;top:39%;} .pin-three{left:23%;bottom:18%;} .qnix-localseo-map-core{ position:absolute; z-index:5; left:50%; top:52%; transform:translate(-50%,-50%); width:150px; height:150px; display:flex; flex-direction:column; justify-content:center; align-items:center; color:#fff; background:linear-gradient(145deg,#087ee7,#0758d8); box-shadow:0 0 60px rgba(8,168,207,.35); } .qnix-localseo-map-core strong{ font-size:48px; line-height:1; font-weight:900; } .qnix-localseo-map-core small{ margin-top:8px; font-size:8px; line-height:1.4; letter-spacing:.16em; text-align:center; opacity:.72; } .map-core-ring{ position:absolute; inset:-18px; border:1px solid rgba(183,229,28,.45); border-radius:50%; animation:qnixLocalPulse 3.5s ease-in-out infinite; } .qnix-localseo-map-label{ position:absolute; z-index:6; left:22px; right:22px; bottom:20px; display:flex; justify-content:space-between; color:rgba(255,255,255,.55); font-size:8px; letter-spacing:.15em; } .qnix-localseo-map-label b{ color:#b7e51c; } @keyframes qnixLocalPulse{ 0%,100%{transform:scale(.94);opacity:.45;} 50%{transform:scale(1.08);opacity:1;} } .qnix-localseo-intent{ padding:105px 6%; background:#f4f8ff; } .qnix-localseo-intent-head{ max-width:850px; margin:0 auto 55px; text-align:center; } .qnix-localseo-intent-head .qnix-localseo-eyebrow{ justify-content:center; } .qnix-localseo-intent-head h2{ font-size:clamp(36px,4vw,58px); } .qnix-localseo-intent-grid{ max-width:1280px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #dce6f3; border-left:1px solid #dce6f3; } .qnix-localseo-intent-card{ min-height:300px; padding:28px; background:#fff; border-right:1px solid #dce6f3; border-bottom:1px solid #dce6f3; transition:.35s ease; } .qnix-localseo-intent-card:hover{ transform:translateY(-7px); box-shadow:0 22px 50px rgba(17,55,110,.1); } .intent-icon{ color:#087ee7; font-size:10px; font-weight:900; letter-spacing:.15em; } .qnix-localseo-intent-card h3{ margin:60px 0 12px; color:#0d1730; font-size:23px; } .qnix-localseo-intent-card p{ color:#5d6b84; font-size:13px; line-height:1.75; } .qnix-localseo-intent-card > span{ display:block; margin-top:28px; color:#79c91c; font-size:9px; font-weight:900; letter-spacing:.15em; } .qnix-localseo-system{ padding:105px 6%; background:#fff; overflow:hidden; } .qnix-localseo-system-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:.75fr 1fr; gap:90px; align-items:center; } .qnix-localseo-system-copy{ max-width:540px; } .qnix-localseo-system-copy h2{ font-size:clamp(38px,4vw,58px); } .qnix-localseo-button, .qnix-localseo-final-button{ display:inline-flex; align-items:center; justify-content:space-between; gap:25px; min-width:235px; margin-top:25px; padding:15px 17px 15px 20px; text-decoration:none; color:#fff; background:#0758d8; font-size:11px; font-weight:800; transition:.35s ease; } .qnix-localseo-button b, .qnix-localseo-final-button b{ display:grid; place-items:center; width:31px; height:31px; background:#b7e51c; color:#062d7a; font-size:17px; } .qnix-localseo-button:hover, .qnix-localseo-final-button:hover{ background:#087ee7; transform:translateY(-4px); } .qnix-localseo-system-visual{ position:relative; min-height:500px; background:#062d7a; overflow:hidden; } .system-line{ position:absolute; background:rgba(8,168,207,.35); } .line-top, .line-bottom{ width:75%; height:1px; left:12.5%; } .line-top{top:22%;} .line-bottom{bottom:22%;} .line-left, .line-right{ width:1px; height:75%; top:12.5%; } .line-left{left:20%;} .line-right{right:20%;} .system-center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:125px; height:125px; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; background:linear-gradient(145deg,#087ee7,#0758d8); box-shadow:0 0 55px rgba(8,168,207,.32); color:#fff; z-index:4; } .system-center strong{ font-size:20px; letter-spacing:.12em; } .system-center small{ margin-top:5px; color:#b7e51c; font-size:8px; letter-spacing:.17em; } .system-node{ position:absolute; z-index:5; min-width:125px; padding:12px 14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#fff; } .system-node b{ display:block; color:#b7e51c; font-size:10px; letter-spacing:.15em; } .system-node span{ display:block; margin-top:5px; color:rgba(255,255,255,.58); font-size:9px; } .system-node-one{left:7%;top:12%;} .system-node-two{right:7%;top:15%;} .system-node-three{left:6%;bottom:13%;} .system-node-four{right:7%;bottom:15%;} .system-node-five{left:39%;top:7%;} .system-node-six{left:39%;bottom:7%;} .qnix-localseo-services{ padding:105px 6%; background:#0d1730; } .qnix-localseo-services-head{ max-width:1280px; margin:0 auto 50px; } .qnix-localseo-services-head .qnix-localseo-eyebrow{ color:#08a8cf; } .qnix-localseo-services-head .qnix-localseo-eyebrow:before{ background:#b7e51c; } .qnix-localseo-services-head h2{ color:#fff; font-size:clamp(38px,4vw,58px); } .qnix-localseo-services-head p{ max-width:700px; color:rgba(255,255,255,.63); } .qnix-localseo-services-list{ max-width:1280px; margin:auto; border-top:1px solid rgba(255,255,255,.12); } .qnix-localseo-service-row{ display:grid; grid-template-columns:70px 1fr 110px; gap:30px; align-items:center; min-height:145px; padding:22px 10px; border-bottom:1px solid rgba(255,255,255,.12); transition:.35s ease; } .qnix-localseo-service-row:hover{ padding-left:25px; background:rgba(8,126,231,.08); } .service-number{ color:#b7e51c; font-size:10px; font-weight:900; letter-spacing:.14em; } .qnix-localseo-service-row h3{ margin:0 0 8px; color:#fff; font-size:21px; } .qnix-localseo-service-row p{ margin:0; max-width:760px; color:rgba(255,255,255,.55); font-size:13px; line-height:1.7; } .qnix-localseo-service-row > b{ justify-self:end; color:#08a8cf; font-size:8px; letter-spacing:.15em; } .qnix-localseo-market{ padding:105px 6%; background:#fff; } .qnix-localseo-market-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:.8fr 1fr; gap:85px; align-items:center; } .qnix-localseo-market-copy{ max-width:550px; } .qnix-localseo-market-copy h2{ font-size:clamp(38px,4vw,58px); } .qnix-localseo-territory{ position:relative; min-height:430px; background:#0758d8; overflow:hidden; } .territory-circle{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid rgba(183,229,28,.55); border-radius:50%; } .circle-large{ width:390px; height:390px; } .circle-medium{ width:260px; height:260px; } .circle-small{ width:130px; height:130px; background:rgba(8,168,207,.16); } .territory-center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:82px; height:82px; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; background:#b7e51c; color:#062d7a; z-index:3; } .territory-center span{ font-size:7px; font-weight:800; letter-spacing:.12em; } .territory-center b{ margin-top:3px; font-size:20px; } .territory-label{ position:absolute; z-index:3; padding:8px 10px; background:rgba(6,45,122,.75); color:#fff; font-size:8px; letter-spacing:.12em; } .label-one{top:17%;left:13%;} .label-two{right:10%;top:39%;} .label-three{left:12%;bottom:17%;} .qnix-localseo-results{ padding:105px 6%; background:#f4f8ff; } .qnix-localseo-results-head{ max-width:800px; margin:0 auto 50px; text-align:center; } .qnix-localseo-results-head .qnix-localseo-eyebrow{ justify-content:center; } .qnix-localseo-results-head h2{ font-size:clamp(38px,4vw,58px); } .qnix-localseo-results-grid{ max-width:1280px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .qnix-localseo-result{ padding:35px; min-height:260px; background:#fff; border:1px solid #dce6f3; transition:.35s ease; } .qnix-localseo-result:hover{ transform:translateY(-6px); box-shadow:0 20px 50px rgba(17,55,110,.1); } .qnix-localseo-result strong{ color:#0758d8; font-size:9px; letter-spacing:.16em; } .qnix-localseo-result h3{ margin:45px 0 10px; color:#0d1730; font-size:23px; } .qnix-localseo-result p{ margin:0; color:#5d6b84; font-size:13px; line-height:1.75; } .qnix-localseo-final{ padding:85px 6%; background:linear-gradient(120deg,#062d7a,#0758d8 55%,#10a4b4); } .qnix-localseo-final-inner{ max-width:1280px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:55px; } .qnix-localseo-final .qnix-localseo-eyebrow{ color:#b7e51c; } .qnix-localseo-final .qnix-localseo-eyebrow:before{ background:#b7e51c; } .qnix-localseo-final h2{ margin-bottom:15px; color:#fff; font-size:clamp(36px,4vw,57px); } .qnix-localseo-final p{ max-width:650px; margin:0; color:rgba(255,255,255,.68); font-size:15px; line-height:1.8; } .qnix-localseo-final-button{ flex-shrink:0; background:#087ee7; } .qnix-localseo-reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease; } .qnix-localseo-reveal.qnix-localseo-visible{ opacity:1; transform:translateY(0); } @media(max-width:1100px){ .qnix-localseo-hero-inner, .qnix-localseo-system-inner, .qnix-localseo-market-inner{ grid-template-columns:1fr; gap:55px; } .qnix-localseo-intent-grid{ grid-template-columns:repeat(2,1fr); } .qnix-localseo-results-grid{ grid-template-columns:1fr; } .qnix-localseo-final-inner{ align-items:flex-start; flex-direction:column; } } @media(max-width:720px){ .qnix-localseo-hero, .qnix-localseo-intent, .qnix-localseo-system, .qnix-localseo-services, .qnix-localseo-market, .qnix-localseo-results{ padding:65px 20px; } .qnix-localseo-final{ padding:60px 20px; } .qnix-localseo-hero h2, .qnix-localseo-intent-head h2, .qnix-localseo-system-copy h2, .qnix-localseo-services-head h2, .qnix-localseo-market-copy h2, .qnix-localseo-results-head h2, .qnix-localseo-final h2{ font-size:36px; } .qnix-localseo-map{ min-height:360px; } .qnix-localseo-intent-grid{ grid-template-columns:1fr; } .qnix-localseo-intent-card{ min-height:240px; } .qnix-localseo-system-visual{ min-height:410px; } .system-node{ min-width:100px; padding:9px; } .system-node span{ font-size:7px; } .qnix-localseo-service-row{ grid-template-columns:40px 1fr; gap:15px; } .qnix-localseo-service-row > b{ display:none; } .qnix-localseo-service-row h3{ font-size:18px; } .qnix-localseo-territory{ min-height:340px; } .circle-large{ width:300px; height:300px; } .circle-medium{ width:200px; height:200px; } .qnix-localseo-final-button{ width:100%; min-width:0; } } @media(prefers-reduced-motion:reduce){ .qnix-localseo-reveal{ opacity:1; transform:none; transition:none; } .map-core-ring{ animation:none; } .qnix-localseo-intent-card, .qnix-localseo-service-row, .qnix-localseo-button, .qnix-localseo-final-button{ transition:none; } } /* ========================================================= QNIX DIGITAL — ENTERPRISE SEO ========================================================= */ .qnix-entseo-opening, .qnix-entseo-challenge, .qnix-entseo-framework, .qnix-entseo-capabilities, .qnix-entseo-scale, .qnix-entseo-measure, .qnix-entseo-final{ font-family:inherit; } .qnix-entseo-opening{ padding:90px 6%; background:#f4f8ff; overflow:hidden; } .qnix-entseo-opening-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:1fr .9fr; gap:75px; align-items:center; } .qnix-entseo-opening-copy{ max-width:660px; } .qnix-entseo-eyebrow{ display:inline-flex; align-items:center; gap:10px; color:#0758d8; font-size:11px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; } .qnix-entseo-eyebrow:before{ content:""; width:28px; height:2px; background:#79c91c; } .qnix-entseo-opening h2, .qnix-entseo-challenge-head h2, .qnix-entseo-framework-copy h2, .qnix-entseo-capabilities-head h2, .qnix-entseo-scale-copy h2, .qnix-entseo-measure-head h2, .qnix-entseo-final h2{ margin:18px 0 20px; color:#0d1730; font-size:clamp(38px,4.25vw,64px); line-height:1.02; letter-spacing:-.045em; } .qnix-entseo-opening h2 em{ color:#0758d8; font-style:normal; } .qnix-entseo-opening p, .qnix-entseo-challenge-head p, .qnix-entseo-framework-copy p, .qnix-entseo-capabilities-head p, .qnix-entseo-scale-copy p, .qnix-entseo-measure-head p{ color:#5d6b84; font-size:16px; line-height:1.85; } .qnix-entseo-opening-pills{ display:flex; flex-wrap:wrap; gap:9px; margin-top:28px; } .qnix-entseo-opening-pills span{ padding:9px 13px; border:1px solid #dce6f3; background:#fff; color:#0d1730; font-size:10px; font-weight:800; } .qnix-entseo-command{ position:relative; min-height:455px; padding:20px; background:#062d7a; overflow:hidden; box-shadow:0 30px 70px rgba(6,45,122,.2); } .qnix-entseo-command:before{ content:""; position:absolute; inset:0; background: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:31px 31px; } .qnix-entseo-command-top, .qnix-entseo-command-bottom{ position:relative; z-index:5; display:flex; justify-content:space-between; color:rgba(255,255,255,.55); font-size:8px; letter-spacing:.16em; } .qnix-entseo-command-top b{ color:#b7e51c; } .qnix-entseo-grid{ position:absolute; inset:65px 30px 55px; } .qnix-entseo-grid:before, .qnix-entseo-grid:after{ content:""; position:absolute; background:rgba(8,168,207,.28); } .qnix-entseo-grid:before{ width:1px; height:100%; left:50%; } .qnix-entseo-grid:after{ width:100%; height:1px; top:50%; } .grid-mark{ position:absolute; width:9px; height:9px; border:1px solid #08a8cf; } .mark-1{left:14%;top:18%;} .mark-2{right:13%;top:27%;} .mark-3{left:24%;bottom:17%;} .mark-4{right:20%;bottom:22%;} .mark-5{left:50%;top:12%;} .mark-6{left:50%;bottom:9%;} .ent-center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:145px; height:145px; display:flex; flex-direction:column; justify-content:center; align-items:center; background:linear-gradient(145deg,#087ee7,#0758d8); color:#fff; box-shadow:0 0 60px rgba(8,168,207,.3); z-index:4; } .ent-center strong{ font-size:19px; letter-spacing:.12em; } .ent-center small{ margin-top:7px; color:#b7e51c; font-size:8px; line-height:1.5; text-align:center; letter-spacing:.15em; } .ent-node{ position:absolute; z-index:6; padding:12px 14px; min-width:125px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.055); color:#fff; } .ent-node b{ display:block; color:#b7e51c; font-size:9px; letter-spacing:.15em; } .ent-node span{ display:block; margin-top:5px; color:rgba(255,255,255,.55); font-size:9px; } .ent-node-a{left:3%;top:15%;} .ent-node-b{right:3%;top:18%;} .ent-node-c{left:4%;bottom:15%;} .ent-node-d{right:4%;bottom:18%;} .qnix-entseo-command-bottom{ position:absolute; left:20px; right:20px; bottom:18px; } .qnix-entseo-challenge{ padding:105px 6%; background:#fff; } .qnix-entseo-challenge-head{ max-width:850px; margin:0 auto 55px; text-align:center; } .qnix-entseo-challenge-head .qnix-entseo-eyebrow, .qnix-entseo-measure-head .qnix-entseo-eyebrow{ justify-content:center; } .qnix-entseo-challenge-head h2, .qnix-entseo-measure-head h2{ font-size:clamp(38px,4vw,58px); } .qnix-entseo-challenge-board{ max-width:1280px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #dce6f3; border-left:1px solid #dce6f3; } .challenge-column{ min-height:300px; padding:30px; border-right:1px solid #dce6f3; border-bottom:1px solid #dce6f3; transition:.35s ease; } .challenge-column:hover{ background:#f4f8ff; transform:translateY(-5px); } .challenge-column > span{ color:#087ee7; font-size:10px; font-weight:900; letter-spacing:.15em; } .challenge-column h3{ margin:62px 0 12px; color:#0d1730; font-size:23px; } .challenge-column p{ margin:0; color:#5d6b84; font-size:13px; line-height:1.75; } .qnix-entseo-framework{ padding:105px 6%; background:#062d7a; overflow:hidden; } .qnix-entseo-framework-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:.72fr 1fr; gap:90px; align-items:center; } .qnix-entseo-framework-copy{ max-width:550px; } .qnix-entseo-framework-copy .qnix-entseo-eyebrow, .qnix-entseo-final .qnix-entseo-eyebrow{ color:#08a8cf; } .qnix-entseo-framework-copy .qnix-entseo-eyebrow:before, .qnix-entseo-final .qnix-entseo-eyebrow:before{ background:#b7e51c; } .qnix-entseo-framework-copy h2{ color:#fff; font-size:clamp(38px,4vw,58px); } .qnix-entseo-framework-copy p{ color:rgba(255,255,255,.63); } .qnix-entseo-button, .qnix-entseo-final-button{ display:inline-flex; align-items:center; justify-content:space-between; gap:25px; min-width:225px; margin-top:26px; padding:15px 17px 15px 20px; text-decoration:none; color:#fff; background:#087ee7; font-size:11px; font-weight:800; transition:.35s ease; } .qnix-entseo-button b, .qnix-entseo-final-button b{ display:grid; place-items:center; width:31px; height:31px; background:#b7e51c; color:#062d7a; font-size:17px; } .qnix-entseo-button:hover, .qnix-entseo-final-button:hover{ transform:translateY(-4px); background:#08a8cf; } .qnix-entseo-framework-visual{ position:relative; min-height:480px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.1); overflow:hidden; } .framework-axis{ position:absolute; background:rgba(8,168,207,.28); } .axis-horizontal{ left:8%; right:8%; top:50%; height:1px; } .axis-vertical{ top:8%; bottom:8%; left:50%; width:1px; } .framework-layer{ position:absolute; width:170px; padding:16px; background:#fff; box-shadow:0 18px 45px rgba(0,0,0,.12); } .framework-layer span{ display:block; color:#0758d8; font-size:8px; font-weight:900; letter-spacing:.14em; } .framework-layer b{ display:block; margin-top:7px; color:#0d1730; font-size:13px; } .layer-tech{left:8%;top:15%;} .layer-content{right:8%;top:21%;} .layer-authority{left:10%;bottom:17%;} .layer-data{right:10%;bottom:22%;} .framework-core{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:125px; height:125px; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; background:#0758d8; color:#fff; border:1px solid rgba(183,229,28,.45); box-shadow:0 0 50px rgba(8,126,231,.35); } .framework-core strong{ font-size:20px; letter-spacing:.12em; } .framework-core small{ margin-top:6px; color:#b7e51c; font-size:7px; line-height:1.5; text-align:center; letter-spacing:.14em; } .qnix-entseo-capabilities{ padding:105px 6%; background:#f4f8ff; } .qnix-entseo-capabilities-head{ max-width:800px; margin:0 auto 50px; text-align:center; } .qnix-entseo-capabilities-head .qnix-entseo-eyebrow{ justify-content:center; } .qnix-entseo-capabilities-head h2{ font-size:clamp(38px,4vw,58px); } .qnix-entseo-capabilities-list{ max-width:1280px; margin:auto; } .qnix-entseo-capability-list{ max-width:1280px; margin:auto; border-top:1px solid #dce6f3; } .qnix-entseo-capability{ display:grid; grid-template-columns:55px 1fr 100px; gap:25px; align-items:center; min-height:145px; padding:22px 10px; border-bottom:1px solid #dce6f3; transition:.35s ease; } .qnix-entseo-capability:hover{ padding-left:25px; background:#fff; } .capability-letter{ width:38px; height:38px; display:grid; place-items:center; border:1px solid #087ee7; color:#0758d8; font-size:10px; font-weight:900; } .qnix-entseo-capability h3{ margin:0 0 8px; color:#0d1730; font-size:21px; } .qnix-entseo-capability p{ max-width:780px; margin:0; color:#5d6b84; font-size:13px; line-height:1.7; } .qnix-entseo-capability > strong{ justify-self:end; color:#087ee7; font-size:8px; letter-spacing:.14em; } .qnix-entseo-scale{ padding:105px 6%; background:#fff; } .qnix-entseo-scale-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:.75fr 1fr; gap:90px; align-items:center; } .qnix-entseo-scale-copy{ max-width:560px; } .qnix-entseo-scale-copy h2{ font-size:clamp(38px,4vw,58px); } .qnix-entseo-scale-visual{ position:relative; min-height:390px; padding:45px; background:#0758d8; overflow:hidden; } .qnix-entseo-scale-visual:before{ content:""; position:absolute; inset:0; background: linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px); background-size:28px 28px; } .scale-line{ position:absolute; height:1px; background:rgba(183,229,28,.42); transform-origin:left center; } .scale-line-one{ width:70%; left:15%; top:27%; transform:rotate(12deg); } .scale-line-two{ width:68%; left:17%; top:50%; transform:rotate(-9deg); } .scale-line-three{ width:65%; left:20%; top:73%; transform:rotate(7deg); } .scale-bar{ position:absolute; z-index:2; height:46px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; background:#fff; color:#0d1730; box-shadow:0 15px 35px rgba(6,45,122,.18); } .scale-bar span{ font-size:9px; font-weight:900; letter-spacing:.12em; } .scale-bar b{ color:#0758d8; font-size:10px; } .bar-one{ width:42%; left:8%; top:19%; } .bar-two{ width:54%; left:20%; top:39%; } .bar-three{ width:67%; left:31%; top:59%; } .bar-four{ width:78%; left:14%; top:79%; background:#b7e51c; } .bar-four b{ color:#062d7a; } .qnix-entseo-measure{ padding:105px 6%; background:#f4f8ff; } .qnix-entseo-measure-head{ max-width:820px; margin:0 auto 50px; text-align:center; } .qnix-entseo-measure-grid{ max-width:1280px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .measure-card{ min-height:260px; padding:30px; background:#fff; border:1px solid #dce6f3; transition:.35s ease; } .measure-card:hover{ transform:translateY(-6px); box-shadow:0 20px 45px rgba(17,55,110,.09); } .measure-card span{ color:#0758d8; font-size:9px; font-weight:900; letter-spacing:.15em; } .measure-card h3{ margin:52px 0 10px; color:#0d1730; font-size:22px; } .measure-card p{ margin:0; color:#5d6b84; font-size:13px; line-height:1.7; } .qnix-entseo-final{ padding:85px 6%; background:linear-gradient(120deg,#062d7a,#0758d8 55%,#10a4b4); } .qnix-entseo-final-inner{ max-width:1280px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:55px; } .qnix-entseo-final h2{ margin-bottom:15px; color:#fff; font-size:clamp(36px,4vw,57px); } .qnix-entseo-final p{ max-width:650px; margin:0; color:rgba(255,255,255,.68); font-size:15px; line-height:1.8; } .qnix-entseo-final-button{ flex-shrink:0; } .qnix-entseo-reveal{ opacity:0; transform:translateY(25px); transition:opacity .7s ease,transform .7s ease; } .qnix-entseo-reveal.qnix-entseo-visible{ opacity:1; transform:translateY(0); } @media(max-width:1100px){ .qnix-entseo-opening-inner, .qnix-entseo-framework-inner, .qnix-entseo-scale-inner{ grid-template-columns:1fr; gap:55px; } .qnix-entseo-challenge-board, .qnix-entseo-measure-grid{ grid-template-columns:repeat(2,1fr); } .qnix-entseo-final-inner{ align-items:flex-start; flex-direction:column; } } @media(max-width:720px){ .qnix-entseo-opening, .qnix-entseo-challenge, .qnix-entseo-framework, .qnix-entseo-capabilities, .qnix-entseo-scale, .qnix-entseo-measure{ padding:65px 20px; } .qnix-entseo-final{ padding:60px 20px; } .qnix-entseo-opening h2, .qnix-entseo-challenge-head h2, .qnix-entseo-framework-copy h2, .qnix-entseo-capabilities-head h2, .qnix-entseo-scale-copy h2, .qnix-entseo-measure-head h2, .qnix-entseo-final h2{ font-size:36px; } .qnix-entseo-command{ min-height:370px; } .qnix-entseo-challenge-board, .qnix-entseo-measure-grid{ grid-template-columns:1fr; } .challenge-column{ min-height:230px; } .qnix-entseo-framework-visual{ min-height:390px; } .framework-layer{ width:120px; padding:11px; } .framework-layer b{ font-size:10px; } .framework-core{ width:105px; height:105px; } .qnix-entseo-capability{ grid-template-columns:45px 1fr; gap:15px; } .qnix-entseo-capability > strong{ display:none; } .qnix-entseo-capability h3{ font-size:18px; } .qnix-entseo-scale-visual{ min-height:330px; padding:25px; } .scale-bar{ height:40px; } .qnix-entseo-final-button{ width:100%; min-width:0; } } @media(prefers-reduced-motion:reduce){ .qnix-entseo-reveal{ opacity:1; transform:none; transition:none; } .challenge-column, .qnix-entseo-capability, .measure-card, .qnix-entseo-button, .qnix-entseo-final-button{ transition:none; } } /* ========================================================= QNIX DIGITAL — GOOGLE ADS MANAGEMENT ========================================================= */ .qnix-gads-opening, .qnix-gads-intent, .qnix-gads-management, .qnix-gads-performance, .qnix-gads-report, .qnix-gads-final{ position:relative; overflow:hidden; } .qnix-gads-opening{ padding:92px 7%; background:#f4f8ff; } .qnix-gads-opening-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:1fr .95fr; gap:70px; align-items:center; } .qnix-gads-kicker, .qnix-gads-section-head>span, .qnix-gads-management-copy>span, .qnix-gads-performance-top>span, .qnix-gads-report-copy>span, .qnix-gads-final-content>span{ display:block; margin-bottom:15px; color:#0758d8; font-size:11px; font-weight:800; letter-spacing:2.2px; } .qnix-gads-opening h2{ max-width:650px; margin:0; color:#0d1730; font-size:clamp(42px,5vw,72px); line-height:1.03; letter-spacing:-2.8px; } .qnix-gads-opening h2 em, .qnix-gads-section-head h2 em, .qnix-gads-management-copy h2 em, .qnix-gads-performance-top h2 em, .qnix-gads-report-copy h2 em, .qnix-gads-final h2 em{ color:#0758d8; font-style:normal; } .qnix-gads-opening p{ max-width:590px; margin:26px 0 30px; color:#5d6b84; font-size:16px; line-height:1.8; } .qnix-gads-opening-actions{ display:flex; align-items:center; gap:22px; } .qnix-gads-primary, .qnix-gads-final-btn{ display:inline-flex; align-items:center; gap:24px; padding:15px 18px 15px 22px; background:#0758d8; color:#fff; text-decoration:none; font-size:13px; font-weight:800; transition:.3s ease; } .qnix-gads-primary b, .qnix-gads-final-btn b{ display:grid; width:32px; height:32px; place-items:center; background:#b7e51c; color:#0d1730; } .qnix-gads-primary:hover, .qnix-gads-final-btn:hover{ transform:translateY(-4px); background:#062d7a; } .qnix-gads-note{ color:#5d6b84; font-size:11px; letter-spacing:1px; font-weight:700; } .qnix-gads-live-visual{ position:relative; min-height:450px; display:flex; align-items:center; justify-content:center; } .qnix-gads-ad-window{ position:relative; z-index:3; width:min(100%,410px); padding:30px; background:#fff; border:1px solid #dce6f3; box-shadow:0 30px 80px rgba(7,88,216,.16); transform:rotate(-3deg); } .qnix-gads-ad-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:25px; } .qnix-gads-ad-top span{ padding:5px 9px; background:#f4f8ff; color:#0758d8; font-size:9px; font-weight:800; letter-spacing:1px; } .qnix-gads-ad-top i{ width:38px; height:5px; border-radius:10px; background:#b7e51c; } .qnix-gads-ad-url{ margin-bottom:9px; color:#16b98a; font-size:11px; font-weight:700; } .qnix-gads-ad-window h3{ margin:0 0 10px; color:#0d1730; font-size:25px; line-height:1.15; } .qnix-gads-ad-window p{ margin:0 0 24px; color:#5d6b84; font-size:12px; line-height:1.65; } .qnix-gads-ad-link{ display:flex; align-items:center; justify-content:space-between; padding-top:17px; border-top:1px solid #e3eaf4; color:#0758d8; font-size:11px; font-weight:800; } .qnix-gads-ad-link b{ font-size:18px; } .qnix-gads-signal{ position:absolute; z-index:5; display:flex; flex-direction:column; gap:5px; padding:13px 16px; background:#fff; border:1px solid #dce6f3; box-shadow:0 15px 35px rgba(7,88,216,.12); } .qnix-gads-signal strong{ color:#0d1730; font-size:9px; letter-spacing:1.2px; } .qnix-gads-signal span{ color:#0758d8; font-size:17px; font-weight:900; } .signal-click{ top:50px; left:0; border-radius:24px 8px 24px 8px; } .signal-convert{ right:0; bottom:60px; border-radius:8px 24px 8px 24px; } .qnix-gads-cursor{ position:absolute; z-index:6; right:18%; top:40%; color:#0758d8; font-size:48px; transform:rotate(-25deg); } .qnix-gads-orbit-line{ position:absolute; border:1px solid rgba(7,88,216,.16); border-radius:50%; transform:rotate(-12deg); } .line-one{ width:510px; height:280px; } .line-two{ width:430px; height:340px; transform:rotate(32deg); border-color:rgba(16,164,180,.18); } .qnix-gads-intent{ padding:90px 7%; background:#fff; } .qnix-gads-section-head{ max-width:1280px; margin:0 auto 55px; } .qnix-gads-section-head h2, .qnix-gads-performance-top h2{ margin:0; color:#0d1730; font-size:clamp(35px,4vw,56px); line-height:1.08; letter-spacing:-2px; } .qnix-gads-intent-flow{ max-width:1280px; margin:auto; display:grid; grid-template-columns:1fr 60px 1fr 60px 1fr; align-items:center; gap:15px; } .qnix-gads-intent-item{ text-align:center; } .qnix-gads-intent-shape{ width:170px; height:170px; margin:0 auto 24px; display:flex; flex-direction:column; justify-content:center; align-items:center; background:#0758d8; color:#fff; border-radius:48% 52% 58% 42% / 44% 39% 61% 56%; transform:rotate(-5deg); box-shadow:0 25px 55px rgba(7,88,216,.18); } .qnix-gads-intent-shape.shape-teal{ background:#08a8cf; border-radius:55% 45% 43% 57% / 52% 58% 42% 48%; transform:rotate(6deg); } .qnix-gads-intent-shape.shape-green{ background:#16b98a; border-radius:42% 58% 52% 48% / 58% 44% 56% 42%; transform:rotate(-4deg); } .qnix-gads-intent-shape span{ font-size:10px; opacity:.75; margin-bottom:7px; } .qnix-gads-intent-shape b{ font-size:16px; letter-spacing:1.5px; } .qnix-gads-intent-item p{ max-width:280px; margin:auto; color:#5d6b84; font-size:13px; line-height:1.7; } .qnix-gads-flow-arrow{ color:#0758d8; font-size:27px; text-align:center; } .qnix-gads-management{ padding:95px 7%; background:#062d7a; } .qnix-gads-management-wrap{ max-width:1280px; margin:auto; display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:center; } .qnix-gads-management-copy>span, .qnix-gads-performance-top>span, .qnix-gads-report-copy>span{ color:#b7e51c; } .qnix-gads-management-copy h2{ margin:0 0 22px; color:#fff; font-size:clamp(35px,4vw,54px); line-height:1.08; letter-spacing:-2px; } .qnix-gads-management-copy h2 em{ color:#08a8cf; } .qnix-gads-management-copy p{ max-width:500px; margin:0; color:rgba(255,255,255,.72); line-height:1.8; font-size:14px; } .qnix-gads-mini-line{ display:flex; align-items:center; gap:12px; margin-top:30px; color:#fff; font-size:11px; font-weight:800; } .qnix-gads-mini-line i{ width:35px; height:2px; background:#b7e51c; } .qnix-gads-system{ position:relative; min-height:470px; } .qnix-gads-system-track{ position:absolute; left:50%; top:40px; bottom:40px; width:1px; background:linear-gradient(to bottom,transparent,#08a8cf,transparent); } .qnix-gads-system-core{ position:absolute; left:50%; top:50%; width:104px; height:104px; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; background:#0758d8; border:1px solid rgba(183,229,28,.55); box-shadow:0 0 0 15px rgba(8,126,231,.10),0 0 60px rgba(8,168,207,.28); } .qnix-gads-system-core span{ color:#fff; font-size:11px; font-weight:900; letter-spacing:2px; } .qnix-gads-system-core b{ margin-top:6px; color:#b7e51c; font-size:20px; } .qnix-gads-system-item{ position:absolute; width:42%; padding:19px 21px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(10px); } .qnix-gads-system-item small{ display:block; margin-bottom:7px; color:#b7e51c; font-size:9px; font-weight:800; } .qnix-gads-system-item strong{ display:block; margin-bottom:7px; color:#fff; font-size:14px; } .qnix-gads-system-item span{ display:block; color:rgba(255,255,255,.58); font-size:11px; line-height:1.55; } .item-a{left:0;top:20px;border-radius:18px 5px 5px 5px;} .item-b{right:0;top:112px;border-radius:5px 18px 5px 5px;} .item-c{left:0;bottom:112px;border-radius:5px 5px 5px 18px;} .item-d{right:0;bottom:20px;border-radius:5px 5px 18px 5px;} .qnix-gads-performance{ padding:90px 7%; background:#f4f8ff; } .qnix-gads-performance-top{ max-width:1280px; margin:0 auto 50px; } .qnix-gads-metrics{ max-width:1280px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#dce6f3; border:1px solid #dce6f3; } .qnix-gads-metric{ min-height:230px; padding:30px; background:#fff; transition:.3s ease; } .qnix-gads-metric:hover{ transform:translateY(-7px); box-shadow:0 20px 50px rgba(7,88,216,.10); } .metric-icon{ width:43px; height:43px; margin-bottom:35px; display:grid; place-items:center; background:#0758d8; color:#b7e51c; font-size:21px; font-weight:900; } .qnix-gads-metric:nth-child(2) .metric-icon{background:#08a8cf;} .qnix-gads-metric:nth-child(3) .metric-icon{background:#16b98a;} .qnix-gads-metric:nth-child(4) .metric-icon{background:#79c91c;color:#0d1730;} .qnix-gads-metric h3{ margin:0 0 10px; color:#0d1730; font-size:16px; } .qnix-gads-metric p{ margin:0; color:#5d6b84; font-size:12px; line-height:1.7; } .qnix-gads-report{ padding:90px 7%; background:#fff; } .qnix-gads-report-panel{ max-width:1280px; min-height:430px; margin:auto; padding:65px 7%; display:grid; grid-template-columns:.8fr 1.2fr; gap:50px; align-items:center; background:linear-gradient(120deg,#0758d8,#087ee7 55%,#08a8cf); } .qnix-gads-report-copy h2{ margin:0 0 22px; color:#fff; font-size:clamp(38px,4vw,58px); line-height:1.04; letter-spacing:-2px; } .qnix-gads-report-copy h2 em{ color:#b7e51c; } .qnix-gads-report-copy p{ max-width:430px; margin:0; color:rgba(255,255,255,.78); font-size:14px; line-height:1.8; } .qnix-gads-loop{ position:relative; width:360px; height:300px; margin:auto; } .loop-node{ position:absolute; z-index:3; width:105px; height:70px; display:grid; place-items:center; background:#fff; color:#0758d8; box-shadow:0 15px 35px rgba(6,45,122,.18); font-size:11px; } .node-one{left:0;top:20px;border-radius:25px 5px 25px 5px;} .node-two{right:0;top:20px;border-radius:5px 25px 5px 25px;} .node-three{right:0;bottom:20px;border-radius:5px 25px 5px 25px;} .node-four{left:0;bottom:20px;border-radius:25px 5px 25px 5px;} .loop-path{ position:absolute; z-index:1; border:1px dashed rgba(255,255,255,.7); } .path-one{ left:52px; top:54px; width:255px; height:195px; border-bottom:0; border-radius:100px 100px 0 0; } .path-two{ right:52px; top:54px; width:255px; height:195px; border-left:0; border-radius:0 100px 100px 0; } .path-three{ left:52px; bottom:54px; width:255px; height:195px; border-top:0; border-radius:0 0 100px 100px; } .path-four{ left:52px; top:54px; width:255px; height:195px; border-right:0; border-radius:100px 0 0 100px; } .qnix-gads-final{ padding:105px 7%; background:#0d1730; text-align:center; } .qnix-gads-final-glow{ position:absolute; width:500px; height:500px; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,rgba(8,126,231,.24),transparent 68%); pointer-events:none; } .qnix-gads-final-content{ position:relative; z-index:2; max-width:800px; margin:auto; } .qnix-gads-final-content>span{ color:#b7e51c; } .qnix-gads-final h2{ margin:0 0 20px; color:#fff; font-size:clamp(40px,5vw,68px); line-height:1.04; letter-spacing:-2.5px; } .qnix-gads-final h2 em{ color:#08a8cf; } .qnix-gads-final p{ max-width:580px; margin:0 auto 30px; color:rgba(255,255,255,.65); font-size:14px; line-height:1.8; } .qnix-gads-final-btn{ background:#0758d8; } .qnix-gads-reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s ease; } .qnix-gads-reveal.qnix-gads-visible{ opacity:1; transform:none; } @media(max-width:1050px){ .qnix-gads-opening-inner, .qnix-gads-management-wrap, .qnix-gads-report-panel{ grid-template-columns:1fr; gap:55px; } .qnix-gads-opening-copy{ text-align:center; } .qnix-gads-opening h2, .qnix-gads-opening p{ margin-left:auto; margin-right:auto; } .qnix-gads-opening-actions{ justify-content:center; } .qnix-gads-metrics{ grid-template-columns:repeat(2,1fr); } .qnix-gads-management-copy{ text-align:center; } .qnix-gads-management-copy p{ margin:auto; } .qnix-gads-mini-line{ justify-content:center; } } @media(max-width:760px){ .qnix-gads-opening, .qnix-gads-intent, .qnix-gads-management, .qnix-gads-performance, .qnix-gads-report{ padding:65px 5%; } .qnix-gads-opening h2{ font-size:40px; letter-spacing:-1.8px; } .qnix-gads-opening-actions{ flex-direction:column; gap:15px; } .qnix-gads-live-visual{ min-height:380px; } .qnix-gads-ad-window{ width:calc(100% - 45px); padding:24px; } .signal-click{ left:0; top:25px; } .signal-convert{ right:0; bottom:25px; } .line-one{ width:95%; height:240px; } .line-two{ width:85%; height:280px; } .qnix-gads-intent-flow{ grid-template-columns:1fr; gap:25px; } .qnix-gads-flow-arrow{ transform:rotate(90deg); } .qnix-gads-intent-shape{ width:145px; height:145px; } .qnix-gads-system{ min-height:650px; } .qnix-gads-system-track{ left:25px; } .qnix-gads-system-core{ left:25px; top:50%; } .qnix-gads-system-item{ width:calc(100% - 75px); left:75px!important; right:auto!important; } .item-a{top:20px;} .item-b{top:180px;} .item-c{top:340px;bottom:auto;} .item-d{top:500px;bottom:auto;} .qnix-gads-metrics{ grid-template-columns:1fr; } .qnix-gads-metric{ min-height:auto; } .qnix-gads-report-panel{ padding:45px 7%; } .qnix-gads-report-copy{ text-align:center; } .qnix-gads-report-copy p{ margin:auto; } .qnix-gads-loop{ transform:scale(.82); transform-origin:center; margin:-15px auto; } .qnix-gads-final{ padding:75px 5%; } } @media(max-width:430px){ .qnix-gads-opening h2{ font-size:35px; } .qnix-gads-note{ text-align:center; } .qnix-gads-loop{ transform:scale(.68); width:330px; margin-left:50%; transform-origin:center; translate:-50% 0; } } @media(prefers-reduced-motion:reduce){ .qnix-gads-reveal{ opacity:1; transform:none; transition:none; } .qnix-gads-primary, .qnix-gads-final-btn, .qnix-gads-metric{ transition:none; } } /* ========================================================= QNIX DIGITAL — FACEBOOK & INSTAGRAM ADS MANAGEMENT ========================================================= */ .qnix-socialads-opening, .qnix-socialads-attention, .qnix-socialads-creative, .qnix-socialads-audience, .qnix-socialads-management, .qnix-socialads-results, .qnix-socialads-final{ position:relative; overflow:hidden; } .qnix-socialads-opening{ padding:90px 7%; background:#f4f8ff; } .qnix-socialads-wrap{ max-width:1280px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; } .qnix-socialads-kicker, .qnix-socialads-attention-head>span, .qnix-socialads-creative-copy>span, .qnix-socialads-audience-head>span, .qnix-socialads-management-title>span, .qnix-socialads-results .results-copy>span, .qnix-socialads-final-inner>span{ display:block; margin-bottom:16px; color:#0758d8; font-size:11px; font-weight:800; letter-spacing:2.1px; } .qnix-socialads-copy h2{ max-width:650px; margin:0; color:#0d1730; font-size:clamp(43px,5vw,70px); line-height:1.02; letter-spacing:-3px; } .qnix-socialads-copy h2 em, .qnix-socialads-attention-head h2 em, .qnix-socialads-creative-copy h2 em, .qnix-socialads-audience-head h2 em, .qnix-socialads-management-title h2 em, .qnix-socialads-results h2 em, .qnix-socialads-final h2 em{ color:#0758d8; font-style:normal; } .qnix-socialads-copy>p{ max-width:570px; margin:27px 0 31px; color:#5d6b84; font-size:15px; line-height:1.85; } .qnix-socialads-btn, .qnix-socialads-final-btn{ display:inline-flex; align-items:center; gap:22px; padding:15px 17px 15px 21px; background:#0758d8; color:#fff; text-decoration:none; font-size:12px; font-weight:800; transition:.3s ease; } .qnix-socialads-btn b, .qnix-socialads-final-btn b{ width:32px; height:32px; display:grid; place-items:center; background:#b7e51c; color:#0d1730; } .qnix-socialads-btn:hover, .qnix-socialads-final-btn:hover{ background:#062d7a; transform:translateY(-4px); } .qnix-socialads-feed{ position:relative; min-height:530px; display:flex; align-items:center; justify-content:center; } .qnix-socialads-feed-label{ position:absolute; right:5%; top:15px; display:flex; align-items:center; gap:9px; color:#0758d8; font-size:9px; font-weight:900; letter-spacing:1.5px; } .qnix-socialads-feed-label i{ width:7px; height:7px; border-radius:50%; background:#79c91c; box-shadow:0 0 0 6px rgba(121,201,28,.13); } .qnix-socialads-post{ position:relative; z-index:2; width:365px; padding:17px; background:#fff; border:1px solid #dce6f3; box-shadow:0 30px 80px rgba(7,88,216,.15); transform:rotate(2.5deg); } .qnix-socialads-post-head{ display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:10px; margin-bottom:13px; } .qnix-socialads-avatar{ width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#0758d8; color:#b7e51c; font-weight:900; } .qnix-socialads-post-head strong{ display:block; color:#0d1730; font-size:11px; } .qnix-socialads-post-head small{ display:block; margin-top:3px; color:#5d6b84; font-size:8px; } .qnix-socialads-post-head>b{ color:#5d6b84; letter-spacing:2px; font-size:10px; } .qnix-socialads-post-visual{ position:relative; height:285px; overflow:hidden; background:linear-gradient(135deg,#062d7a,#0758d8 52%,#08a8cf); } .qnix-socialads-post-visual span{ position:absolute; z-index:4; left:24px; bottom:25px; color:#fff; font-size:31px; line-height:.93; font-weight:900; letter-spacing:-1.4px; } .social-shape{ position:absolute; border-radius:50%; } .shape-one{ width:230px; height:230px; right:-55px; top:-60px; background:#16b98a; } .shape-two{ width:190px; height:190px; left:-85px; bottom:-65px; background:#b7e51c; opacity:.9; } .shape-three{ width:95px; height:95px; right:65px; bottom:60px; background:#087ee7; border:1px solid rgba(255,255,255,.5); } .qnix-socialads-post-actions{ display:flex; gap:17px; align-items:center; padding:14px 3px 8px; color:#0758d8; font-size:18px; } .qnix-socialads-post-actions b{ margin-left:auto; font-size:14px; } .qnix-socialads-post>p{ margin:3px 0 14px; color:#5d6b84; font-size:10px; line-height:1.55; } .qnix-socialads-post button{ width:100%; padding:11px; border:0; background:#0758d8; color:#fff; font-size:10px; font-weight:800; } .qnix-socialads-floating{ position:absolute; z-index:4; min-width:105px; padding:14px 16px; background:#fff; border:1px solid #dce6f3; box-shadow:0 15px 40px rgba(7,88,216,.12); } .qnix-socialads-floating small{ display:block; margin-bottom:5px; color:#5d6b84; font-size:8px; letter-spacing:1px; font-weight:800; } .qnix-socialads-floating strong{ color:#0758d8; font-size:19px; } .floating-reach{ left:0; top:105px; border-radius:23px 5px 23px 5px; } .floating-action{ right:0; bottom:85px; border-radius:5px 23px 5px 23px; } .qnix-socialads-attention{ padding:90px 7%; background:#fff; } .qnix-socialads-attention-head{ max-width:1280px; margin:auto; } .qnix-socialads-attention-head h2, .qnix-socialads-audience-head h2{ margin:0; color:#0d1730; font-size:clamp(36px,4vw,56px); line-height:1.06; letter-spacing:-2px; } .qnix-socialads-journey{ max-width:1280px; margin:60px auto 0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #dce6f3; border-bottom:1px solid #dce6f3; } .qnix-socialads-journey-item{ display:grid; grid-template-columns:65px 1fr; gap:22px; padding:35px 30px; border-right:1px solid #dce6f3; } .qnix-socialads-journey-item:last-child{ border-right:0; } .journey-number{ width:49px; height:49px; display:grid; place-items:center; background:#0758d8; color:#b7e51c; border-radius:50%; font-size:12px; font-weight:900; } .qnix-socialads-journey-item:nth-child(2) .journey-number{ background:#08a8cf; } .qnix-socialads-journey-item:nth-child(3) .journey-number{ background:#16b98a; } .qnix-socialads-journey-item h3{ margin:4px 0 10px; color:#0d1730; font-size:16px; } .qnix-socialads-journey-item p{ margin:0; color:#5d6b84; font-size:12px; line-height:1.7; } .qnix-socialads-creative{ padding:95px 7%; background:#f4f8ff; } .qnix-socialads-creative-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:.85fr 1.15fr; gap:85px; align-items:center; } .qnix-socialads-creative-copy h2{ margin:0 0 22px; color:#0d1730; font-size:clamp(35px,4vw,54px); line-height:1.08; letter-spacing:-2px; } .qnix-socialads-creative-copy p{ max-width:500px; margin:0; color:#5d6b84; font-size:14px; line-height:1.8; } .qnix-socialads-testing{ position:relative; min-height:390px; } .testing-line{ position:absolute; left:50%; width:1px; background:#d2deed; transform:rotate(28deg); } .line-top{ top:0; height:150px; } .line-bottom{ bottom:0; height:150px; transform:rotate(-28deg); } .creative-card{ position:absolute; width:205px; padding:21px; background:#fff; border:1px solid #dce6f3; box-shadow:0 18px 45px rgba(7,88,216,.08); transition:.35s ease; } .creative-card:hover{ transform:translateY(-8px) rotate(0); box-shadow:0 25px 60px rgba(7,88,216,.14); } .creative-card small{ display:block; margin-bottom:12px; color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1.5px; } .creative-card strong{ display:block; margin-bottom:5px; color:#0d1730; font-size:15px; } .creative-card span{ color:#5d6b84; font-size:10px; } .creative-a{ left:0; top:30px; border-radius:22px 4px 22px 4px; } .creative-b{ right:0; top:145px; border-radius:4px 22px 4px 22px; } .creative-c{ left:13%; bottom:5px; border-radius:22px 4px 22px 4px; } .testing-result{ position:absolute; left:50%; top:50%; width:100px; height:100px; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; background:#0758d8; box-shadow:0 0 0 13px rgba(7,88,216,.08); } .testing-result span{ color:rgba(255,255,255,.65); font-size:8px; letter-spacing:1px; } .testing-result strong{ margin:5px 0; color:#fff; font-size:12px; } .testing-result b{ color:#b7e51c; } .qnix-socialads-audience{ padding:90px 7%; background:#fff; } .qnix-socialads-audience-head{ max-width:1280px; margin:auto; } .qnix-socialads-audience-map{ position:relative; max-width:1000px; height:390px; margin:55px auto 0; } .audience-center{ position:absolute; left:50%; top:50%; z-index:3; width:145px; height:145px; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; background:#062d7a; box-shadow:0 20px 55px rgba(6,45,122,.17); } .audience-center span{ color:#b7e51c; font-size:9px; letter-spacing:1.5px; font-weight:800; } .audience-center strong{ margin-top:7px; color:#fff; font-size:16px; } .audience-path{ position:absolute; left:50%; top:50%; width:650px; height:260px; transform:translate(-50%,-50%); border:1px dashed #b9cee7; border-radius:50%; } .path-b{ width:820px; height:180px; transform:translate(-50%,-50%) rotate(24deg); border-color:rgba(8,168,207,.35); } .path-c{ width:500px; height:340px; transform:translate(-50%,-50%) rotate(-28deg); border-color:rgba(22,185,138,.32); } .audience-label{ position:absolute; z-index:4; display:flex; flex-direction:column; padding:14px 18px; background:#fff; border:1px solid #dce6f3; box-shadow:0 15px 35px rgba(7,88,216,.08); } .audience-label span{ color:#0758d8; font-size:8px; font-weight:900; } .audience-label strong{ margin:4px 0; color:#0d1730; font-size:11px; } .audience-label small{ color:#5d6b84; font-size:9px; } .label-one{ left:5%; top:48px; border-radius:20px 4px 20px 4px; } .label-two{ right:4%; top:45px; border-radius:4px 20px 4px 20px; } .label-three{ right:12%; bottom:25px; border-radius:20px 4px 20px 4px; } .qnix-socialads-management{ padding:95px 7%; background:#062d7a; } .qnix-socialads-management-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:.65fr 1.35fr; gap:90px; } .qnix-socialads-management-title>span{ color:#b7e51c; } .qnix-socialads-management-title h2{ margin:0; color:#fff; font-size:clamp(40px,5vw,64px); line-height:1; letter-spacing:-2.5px; } .qnix-socialads-management-title h2 em{ color:#08a8cf; } .qnix-socialads-management-list{ border-top:1px solid rgba(255,255,255,.15); } .management-row{ display:grid; grid-template-columns:45px 1fr 25px; gap:20px; align-items:center; padding:24px 0; border-bottom:1px solid rgba(255,255,255,.15); transition:.3s ease; } .management-row:hover{ padding-left:12px; } .management-row>span{ color:#b7e51c; font-size:9px; font-weight:900; } .management-row strong{ display:block; margin-bottom:6px; color:#fff; font-size:15px; } .management-row p{ margin:0; color:rgba(255,255,255,.58); font-size:11px; line-height:1.55; } .management-row>b{ color:#08a8cf; } .qnix-socialads-results{ padding:90px 7%; background:#f4f8ff; } .qnix-socialads-results-inner{ max-width:1180px; margin:auto; display:grid; grid-template-columns:.65fr 1.35fr; gap:80px; align-items:center; } .results-word{ position:relative; min-height:250px; display:flex; flex-direction:column; justify-content:center; padding-left:40px; } .results-word:before{ content:""; position:absolute; left:0; top:0; width:7px; height:100%; background:linear-gradient(#0758d8,#08a8cf,#16b98a,#b7e51c); } .results-word span{ color:#5d6b84; font-size:10px; font-weight:800; letter-spacing:2px; } .results-word strong{ color:#0758d8; font-size:clamp(70px,10vw,130px); line-height:.8; letter-spacing:-7px; } .qnix-socialads-results h2{ margin:0 0 20px; color:#0d1730; font-size:clamp(35px,4vw,54px); line-height:1.05; letter-spacing:-2px; } .results-copy>p{ max-width:600px; margin:0; color:#5d6b84; font-size:14px; line-height:1.8; } .results-signals{ display:flex; align-items:center; gap:12px; margin-top:30px; color:#0758d8; font-size:10px; font-weight:800; } .results-signals i{ width:32px; height:1px; background:#b7e51c; } .qnix-socialads-final{ padding:100px 7%; background:#0d1730; text-align:center; } .qnix-socialads-final-inner{ max-width:800px; margin:auto; } .qnix-socialads-final-inner>span{ color:#b7e51c; } .qnix-socialads-final h2{ margin:0 0 20px; color:#fff; font-size:clamp(42px,5vw,68px); line-height:1.02; letter-spacing:-2.8px; } .qnix-socialads-final h2 em{ color:#08a8cf; } .qnix-socialads-final p{ max-width:590px; margin:0 auto 30px; color:rgba(255,255,255,.63); font-size:14px; line-height:1.8; } .qnix-socialads-final-btn{ background:#0758d8; } .qnix-socialads-reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s ease; } .qnix-socialads-reveal.qnix-socialads-visible{ opacity:1; transform:none; } @media(max-width:1050px){ .qnix-socialads-wrap, .qnix-socialads-creative-inner, .qnix-socialads-management-inner, .qnix-socialads-results-inner{ grid-template-columns:1fr; gap:55px; } .qnix-socialads-copy{ text-align:center; } .qnix-socialads-copy h2, .qnix-socialads-copy>p{ margin-left:auto; margin-right:auto; } .qnix-socialads-feed{ max-width:550px; width:100%; margin:auto; } .qnix-socialads-creative-copy{ text-align:center; } .qnix-socialads-creative-copy p{ margin:auto; } .qnix-socialads-management-title{ text-align:center; } .qnix-socialads-results-inner{ max-width:850px; } } @media(max-width:760px){ .qnix-socialads-opening, .qnix-socialads-attention, .qnix-socialads-creative, .qnix-socialads-audience, .qnix-socialads-management, .qnix-socialads-results{ padding:65px 5%; } .qnix-socialads-copy h2{ font-size:39px; letter-spacing:-1.8px; } .qnix-socialads-feed{ min-height:460px; } .qnix-socialads-post{ width:min(340px,calc(100% - 45px)); } .qnix-socialads-post-visual{ height:250px; } .floating-reach{ left:0; top:80px; } .floating-action{ right:0; bottom:55px; } .qnix-socialads-journey{ grid-template-columns:1fr; } .qnix-socialads-journey-item{ border-right:0; border-bottom:1px solid #dce6f3; } .qnix-socialads-journey-item:last-child{ border-bottom:0; } .qnix-socialads-testing{ min-height:470px; transform:scale(.86); transform-origin:center; margin:-35px auto; } .qnix-socialads-audience-map{ height:430px; transform:scale(.82); transform-origin:center; margin-top:20px; } .qnix-socialads-management-title h2{ font-size:48px; } .results-word{ min-height:170px; padding-left:28px; } .results-word strong{ font-size:85px; } .qnix-socialads-results h2{ font-size:38px; } .results-signals{ flex-wrap:wrap; } .qnix-socialads-final{ padding:75px 5%; } } @media(max-width:450px){ .qnix-socialads-feed{ min-height:410px; } .qnix-socialads-post{ width:calc(100% - 35px); padding:13px; } .qnix-socialads-post-visual{ height:225px; } .qnix-socialads-post-visual span{ font-size:26px; } .qnix-socialads-floating{ min-width:90px; padding:11px 12px; } .qnix-socialads-floating strong{ font-size:16px; } .qnix-socialads-testing{ transform:scale(.68); margin:-65px auto; } .qnix-socialads-audience-map{ transform:scale(.65); margin-top:-25px; margin-bottom:-25px; } .qnix-socialads-management-title h2{ font-size:43px; } } @media(prefers-reduced-motion:reduce){ .qnix-socialads-reveal{ opacity:1; transform:none; transition:none; } .qnix-socialads-btn, .qnix-socialads-final-btn, .creative-card, .management-row{ transition:none; } } /* ========================================================= QNIX DIGITAL — LEAD GENERATION CAMPAIGNS ========================================================= */ .qnix-lead-opening, .qnix-lead-capture, .qnix-lead-system, .qnix-lead-qualification, .qnix-lead-management, .qnix-lead-final{ position:relative; overflow:hidden; } .qnix-lead-opening{ padding:92px 7%; background:#f4f8ff; } .qnix-lead-opening-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center; } .qnix-lead-kicker, .qnix-lead-section-head>span, .qnix-lead-system-copy>span, .qnix-lead-qualification-copy>span, .qnix-lead-management-head>span, .qnix-lead-final-content>span{ display:block; margin-bottom:16px; color:#0758d8; font-size:11px; font-weight:800; letter-spacing:2.1px; } .qnix-lead-opening-copy h2{ max-width:650px; margin:0; color:#0d1730; font-size:clamp(43px,5vw,70px); line-height:1.02; letter-spacing:-3px; } .qnix-lead-opening-copy h2 em, .qnix-lead-section-head h2 em, .qnix-lead-system-copy h2 em, .qnix-lead-qualification-copy h2 em, .qnix-lead-management-head h2 em, .qnix-lead-final h2 em{ color:#0758d8; font-style:normal; } .qnix-lead-opening-copy>p{ max-width:570px; margin:27px 0 31px; color:#5d6b84; font-size:15px; line-height:1.85; } .qnix-lead-primary, .qnix-lead-final-btn{ display:inline-flex; align-items:center; gap:22px; padding:15px 17px 15px 21px; background:#0758d8; color:#fff; text-decoration:none; font-size:12px; font-weight:800; transition:.3s ease; } .qnix-lead-primary b, .qnix-lead-final-btn b{ width:32px; height:32px; display:grid; place-items:center; background:#b7e51c; color:#0d1730; } .qnix-lead-primary:hover, .qnix-lead-final-btn:hover{ background:#062d7a; transform:translateY(-4px); } .qnix-lead-pipeline{ position:relative; min-height:450px; } .qnix-lead-pipeline-line{ position:absolute; left:11%; right:11%; top:50%; height:2px; background:linear-gradient(90deg,#0758d8,#08a8cf,#16b98a,#79c91c); transform:translateY(-50%); } .qnix-lead-pipeline-line:before{ content:""; position:absolute; left:0; top:-4px; width:10px; height:10px; border-radius:50%; background:#0758d8; box-shadow:0 0 0 8px rgba(7,88,216,.09); } .qnix-lead-pipeline-line:after{ content:""; position:absolute; right:0; top:-4px; width:10px; height:10px; border-radius:50%; background:#79c91c; box-shadow:0 0 0 8px rgba(121,201,28,.10); } .qnix-lead-stage{ position:absolute; z-index:3; width:145px; padding:18px 17px; background:#fff; border:1px solid #dce6f3; box-shadow:0 18px 45px rgba(7,88,216,.09); transition:.35s ease; } .qnix-lead-stage:hover{ transform:translateY(-8px); box-shadow:0 25px 60px rgba(7,88,216,.14); } .qnix-lead-stage .stage-dot{ display:block; width:14px; height:14px; margin-bottom:16px; border-radius:50%; background:#0758d8; box-shadow:0 0 0 7px rgba(7,88,216,.08); } .qnix-lead-stage small{ display:block; color:#0758d8; font-size:8px; font-weight:900; } .qnix-lead-stage strong{ display:block; margin:5px 0; color:#0d1730; font-size:12px; letter-spacing:1px; } .qnix-lead-stage em{ color:#5d6b84; font-size:9px; font-style:normal; } .stage-one{ left:0; top:70px; border-radius:25px 5px 5px 5px; } .stage-two{ left:29%; bottom:50px; border-radius:5px 25px 5px 5px; } .stage-two .stage-dot{ background:#08a8cf; box-shadow:0 0 0 7px rgba(8,168,207,.08); } .stage-three{ right:27%; top:60px; border-radius:5px 5px 5px 25px; } .stage-three .stage-dot{ background:#16b98a; box-shadow:0 0 0 7px rgba(22,185,138,.08); } .stage-four{ right:0; bottom:45px; border-radius:5px 25px 5px 5px; } .stage-four .stage-dot{ background:#79c91c; box-shadow:0 0 0 7px rgba(121,201,28,.08); } .qnix-lead-pulse{ position:absolute; z-index:2; width:8px; height:8px; border-radius:50%; background:#b7e51c; box-shadow:0 0 0 7px rgba(183,229,28,.10); } .pulse-one{ left:21%; top:50%; } .pulse-two{ left:53%; top:50%; } .pulse-three{ left:79%; top:50%; } .qnix-lead-capture{ padding:90px 7%; background:#fff; } .qnix-lead-section-head{ max-width:1280px; margin:auto; } .qnix-lead-section-head h2, .qnix-lead-management-head h2{ margin:0; color:#0d1730; font-size:clamp(36px,4vw,56px); line-height:1.06; letter-spacing:-2px; } .qnix-lead-journey{ position:relative; max-width:1280px; margin:60px auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; } .qnix-lead-journey-line{ position:absolute; left:8%; right:8%; top:34px; height:1px; background:#d7e3f1; } .qnix-lead-journey-step{ position:relative; z-index:2; padding:0 28px; } .journey-marker{ width:68px; height:68px; margin-bottom:24px; display:grid; place-items:center; border-radius:50%; background:#0758d8; color:#b7e51c; font-size:12px; font-weight:900; box-shadow:0 0 0 10px #fff,0 0 0 11px #dce6f3; } .qnix-lead-journey-step:nth-child(3) .journey-marker{ background:#08a8cf; } .qnix-lead-journey-step:nth-child(4) .journey-marker{ background:#16b98a; } .qnix-lead-journey-step:nth-child(5) .journey-marker{ background:#79c91c; color:#0d1730; } .qnix-lead-journey-step h3{ margin:0 0 9px; color:#0d1730; font-size:16px; } .qnix-lead-journey-step p{ max-width:220px; margin:0; color:#5d6b84; font-size:12px; line-height:1.7; } .qnix-lead-system{ padding:95px 7%; background:#062d7a; } .qnix-lead-system-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:.75fr 1.25fr; gap:90px; align-items:center; } .qnix-lead-system-copy>span{ color:#b7e51c; } .qnix-lead-system-copy h2{ margin:0 0 22px; color:#fff; font-size:clamp(38px,4vw,56px); line-height:1.05; letter-spacing:-2.2px; } .qnix-lead-system-copy h2 em{ color:#08a8cf; } .qnix-lead-system-copy p{ max-width:490px; margin:0; color:rgba(255,255,255,.65); font-size:14px; line-height:1.8; } .qnix-lead-system-visual{ position:relative; min-height:420px; } .system-connector{ position:absolute; z-index:1; height:1px; background:rgba(255,255,255,.23); transform-origin:left center; } .connector-one{ left:25%; top:27%; width:30%; transform:rotate(24deg); } .connector-two{ left:25%; top:72%; width:30%; transform:rotate(-24deg); } .connector-three{ left:55%; top:50%; width:25%; } .system-node{ position:absolute; z-index:3; width:175px; min-height:115px; padding:20px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.17); backdrop-filter:blur(12px); transition:.35s ease; } .system-node:hover{ background:rgba(255,255,255,.13); transform:translateY(-7px); } .system-node span{ color:#b7e51c; font-size:8px; font-weight:900; } .system-node strong{ display:block; margin:8px 0 6px; color:#fff; font-size:14px; } .system-node small{ color:rgba(255,255,255,.54); font-size:9px; } .node-target{ left:0; top:15%; border-radius:20px 4px 20px 4px; } .node-message{ left:0; bottom:8%; border-radius:4px 20px 4px 20px; } .node-landing{ right:0; top:15%; border-radius:4px 20px 4px 20px; } .node-data{ right:0; bottom:8%; border-radius:20px 4px 20px 4px; } .system-tag{ position:absolute; z-index:5; left:50%; top:50%; width:125px; height:125px; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; background:#0758d8; border:1px solid rgba(183,229,28,.5); box-shadow:0 0 0 14px rgba(8,126,231,.10),0 0 55px rgba(8,168,207,.22); } .system-tag span{ color:#fff; font-size:11px; font-weight:900; letter-spacing:2px; } .system-tag b{ margin-top:6px; color:#b7e51c; font-size:22px; } .qnix-lead-qualification{ padding:95px 7%; background:#f4f8ff; } .qnix-lead-qualification-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; } .qnix-lead-qualification-visual{ position:relative; min-height:410px; background:#fff; border:1px solid #dce6f3; overflow:hidden; } .qualification-grid{ position:absolute; inset:0; background-image: linear-gradient(rgba(7,88,216,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.06) 1px,transparent 1px); background-size:35px 35px; } .qualification-signal{ position:absolute; z-index:3; display:flex; align-items:center; gap:10px; padding:12px 17px; background:#fff; border:1px solid #dce6f3; box-shadow:0 14px 35px rgba(7,88,216,.08); } .qualification-signal span{ width:10px; height:10px; border-radius:50%; background:#0758d8; } .qualification-signal strong{ color:#0d1730; font-size:9px; letter-spacing:1px; } .signal-cold{ left:9%; top:17%; } .signal-warm{ left:30%; top:48%; } .signal-warm span{ background:#08a8cf; } .signal-hot{ left:54%; top:24%; } .signal-hot span{ background:#16b98a; } .qualification-arrow{ position:absolute; z-index:2; right:26%; top:48%; color:#0758d8; font-size:35px; } .qualification-end{ position:absolute; z-index:4; right:7%; bottom:13%; padding:17px 20px; background:#062d7a; border-radius:4px 22px 4px 22px; box-shadow:0 20px 45px rgba(6,45,122,.18); } .qualification-end small{ display:block; color:#b7e51c; font-size:8px; letter-spacing:1.5px; } .qualification-end strong{ display:block; margin-top:5px; color:#fff; font-size:11px; } .qnix-lead-qualification-copy h2{ margin:0 0 21px; color:#0d1730; font-size:clamp(36px,4vw,53px); line-height:1.06; letter-spacing:-2px; } .qnix-lead-qualification-copy>p{ max-width:520px; margin:0 0 25px; color:#5d6b84; font-size:14px; line-height:1.8; } .qnix-lead-qualification-copy ul{ margin:0; padding:0; list-style:none; border-top:1px solid #dce6f3; } .qnix-lead-qualification-copy li{ display:flex; justify-content:space-between; gap:20px; padding:15px 0; border-bottom:1px solid #dce6f3; } .qnix-lead-qualification-copy li b{ color:#0d1730; font-size:11px; } .qnix-lead-qualification-copy li span{ color:#5d6b84; font-size:10px; } .qnix-lead-management{ padding:90px 7%; background:#fff; } .qnix-lead-management-head{ max-width:1280px; margin:auto auto 48px; } .qnix-lead-management-list{ max-width:1280px; margin:auto; border-top:1px solid #dce6f3; } .lead-manage-row{ display:grid; grid-template-columns:55px 1fr 35px; align-items:center; gap:25px; padding:23px 10px; border-bottom:1px solid #dce6f3; transition:.3s ease; } .lead-manage-row:hover{ padding-left:22px; background:#f4f8ff; } .manage-icon{ width:42px; height:42px; display:grid; place-items:center; background:#0758d8; color:#b7e51c; font-size:17px; font-weight:900; border-radius:13px 3px 13px 3px; } .lead-manage-row:nth-child(2) .manage-icon{ background:#08a8cf; } .lead-manage-row:nth-child(3) .manage-icon{ background:#16b98a; } .lead-manage-row:nth-child(4) .manage-icon{ background:#79c91c; color:#0d1730; } .lead-manage-row strong{ display:block; margin-bottom:5px; color:#0d1730; font-size:14px; } .lead-manage-row p{ margin:0; color:#5d6b84; font-size:11px; line-height:1.55; } .lead-manage-row>span{ color:#0758d8; font-size:9px; font-weight:900; } .qnix-lead-final{ padding:100px 7%; background:#0d1730; text-align:center; } .qnix-lead-final-shape{ position:absolute; border-radius:50%; pointer-events:none; } .shape-a{ width:420px; height:420px; left:-180px; top:-190px; background:radial-gradient(circle,rgba(7,88,216,.30),transparent 68%); } .shape-b{ width:350px; height:350px; right:-140px; bottom:-180px; background:radial-gradient(circle,rgba(8,168,207,.22),transparent 68%); } .qnix-lead-final-content{ position:relative; z-index:2; max-width:800px; margin:auto; } .qnix-lead-final-content>span{ color:#b7e51c; } .qnix-lead-final h2{ margin:0 0 20px; color:#fff; font-size:clamp(42px,5vw,68px); line-height:1.03; letter-spacing:-2.7px; } .qnix-lead-final h2 em{ color:#08a8cf; } .qnix-lead-final p{ max-width:590px; margin:0 auto 30px; color:rgba(255,255,255,.63); font-size:14px; line-height:1.8; } .qnix-lead-reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s ease; } .qnix-lead-reveal.qnix-lead-visible{ opacity:1; transform:none; } @media(max-width:1050px){ .qnix-lead-opening-inner, .qnix-lead-system-inner, .qnix-lead-qualification-inner{ grid-template-columns:1fr; gap:60px; } .qnix-lead-opening-copy{ text-align:center; } .qnix-lead-opening-copy h2, .qnix-lead-opening-copy>p{ margin-left:auto; margin-right:auto; } .qnix-lead-pipeline{ max-width:700px; width:100%; margin:auto; } .qnix-lead-system-copy, .qnix-lead-management-head{ text-align:center; } .qnix-lead-qualification-copy{ text-align:center; } .qnix-lead-qualification-copy>p{ margin-left:auto; margin-right:auto; } .qnix-lead-qualification-copy ul{ text-align:left; } } @media(max-width:760px){ .qnix-lead-opening, .qnix-lead-capture, .qnix-lead-system, .qnix-lead-qualification, .qnix-lead-management{ padding:65px 5%; } .qnix-lead-opening-copy h2{ font-size:39px; letter-spacing:-1.8px; } .qnix-lead-pipeline{ min-height:570px; } .qnix-lead-pipeline-line{ left:50%; right:auto; top:35px; bottom:35px; width:2px; height:auto; background:linear-gradient(180deg,#0758d8,#08a8cf,#16b98a,#79c91c); transform:translateX(-50%); } .qnix-lead-pipeline-line:before{ top:0; left:-4px; } .qnix-lead-pipeline-line:after{ top:auto; bottom:0; right:-4px; } .qnix-lead-stage{ width:145px; } .stage-one{ left:0; top:20px; } .stage-two{ left:auto; right:0; bottom:auto; top:160px; } .stage-three{ left:0; right:auto; top:300px; } .stage-four{ right:0; bottom:auto; top:440px; } .pulse-one, .pulse-two, .pulse-three{ display:none; } .qnix-lead-journey{ grid-template-columns:1fr 1fr; row-gap:45px; } .qnix-lead-journey-line{ display:none; } .qnix-lead-journey-step{ padding:0 10px; } .qnix-lead-system-visual{ min-height:600px; } .system-node{ width:150px; } .node-target{ left:0; top:6%; } .node-message{ left:0; bottom:6%; } .node-landing{ right:0; top:27%; } .node-data{ right:0; bottom:27%; } .connector-one, .connector-two, .connector-three{ display:none; } .qnix-lead-qualification-visual{ min-height:360px; } .qnix-lead-management-head h2{ font-size:39px; } .lead-manage-row{ grid-template-columns:45px 1fr 25px; gap:15px; } .lead-manage-row p{ display:none; } .qnix-lead-final{ padding:75px 5%; } } @media(max-width:480px){ .qnix-lead-pipeline{ transform:scale(.88); transform-origin:center; margin:-30px auto; } .qnix-lead-journey{ grid-template-columns:1fr; } .qnix-lead-system-visual{ transform:scale(.83); transform-origin:center; margin:-45px auto; } .qnix-lead-qualification-visual{ min-height:320px; } .signal-cold{ left:5%; } .signal-warm{ left:24%; } .signal-hot{ left:46%; } .qualification-end{ right:4%; } .qnix-lead-final h2{ font-size:40px; } } @media(prefers-reduced-motion:reduce){ .qnix-lead-reveal{ opacity:1; transform:none; transition:none; } .qnix-lead-primary, .qnix-lead-final-btn, .qnix-lead-stage, .system-node, .lead-manage-row{ transition:none; } } /* ========================================================= QNIX DIGITAL — SEO CONTENT MARKETING ========================================================= */ .qnix-content-intro, .qnix-intent-section, .qnix-content-stack, .qnix-content-services, .qnix-content-cta{ font-family:inherit; } .qnix-content-intro{ padding:90px 7% 82px; background:#fff; overflow:hidden; } .qnix-content-intro-inner{ max-width:1240px; margin:auto; display:grid; grid-template-columns:1.05fr .95fr; gap:80px; align-items:center; } .qnix-content-kicker, .qnix-intent-heading > span, .qnix-stack-heading > span, .qnix-services-intro > span, .qnix-content-cta-content > span{ display:block; margin-bottom:15px; color:#0758d8; font-size:12px; font-weight:800; letter-spacing:2.2px; } .qnix-content-copy h2{ max-width:720px; margin:0 0 22px; color:#0d1730; font-size:clamp(38px,4.2vw,66px); line-height:1.04; letter-spacing:-2.4px; } .qnix-content-copy p{ max-width:650px; margin:0; color:#5d6b84; font-size:17px; line-height:1.8; } .qnix-content-signals{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; } .qnix-content-signals span{ padding:10px 15px; border:1px solid #dbe6f3; color:#0758d8; font-size:12px; font-weight:700; letter-spacing:.5px; background:#f4f8ff; } .qnix-content-editor{ position:relative; min-height:365px; padding:34px; background: linear-gradient(135deg,#062d7a 0%,#0758d8 58%,#08a8cf 100%); overflow:hidden; box-shadow:0 28px 70px rgba(7,88,216,.18); } .qnix-content-editor:before{ content:""; position:absolute; inset:0; background: repeating-linear-gradient( 90deg, rgba(255,255,255,.08) 0, rgba(255,255,255,.08) 1px, transparent 1px, transparent 54px ); opacity:.45; } .qnix-editor-top, .qnix-editor-line, .qnix-editor-keywords, .qnix-editor-bottom{ position:relative; z-index:2; } .qnix-editor-top{ display:flex; justify-content:space-between; align-items:center; color:#fff; font-size:11px; font-weight:800; letter-spacing:1.6px; } .qnix-editor-top b{ padding:6px 9px; background:#79c91c; color:#0d1730; font-size:9px; letter-spacing:1px; } .qnix-editor-line{ height:13px; margin-top:45px; background:rgba(255,255,255,.76); width:88%; } .qnix-editor-line-lg{ height:24px; width:96%; margin-top:60px; } .qnix-editor-line-sm{ width:62%; margin-top:15px; opacity:.48; } .qnix-editor-keywords{ display:flex; flex-wrap:wrap; gap:8px; margin-top:45px; } .qnix-editor-keywords span{ padding:8px 10px; border:1px solid rgba(255,255,255,.28); color:#fff; font-size:9px; font-weight:800; letter-spacing:1px; } .qnix-editor-bottom{ display:flex; align-items:center; gap:7px; margin-top:42px; color:rgba(255,255,255,.72); font-size:10px; } .qnix-editor-bottom i{ width:6px; height:6px; display:block; background:#b7e51c; transform:rotate(45deg); } .qnix-intent-section{ padding:85px 7%; background:#f4f8ff; } .qnix-intent-heading{ max-width:720px; margin:0 auto 55px; text-align:center; } .qnix-intent-heading h2, .qnix-stack-heading h2, .qnix-services-intro h2{ margin:0 0 18px; color:#0d1730; font-size:clamp(31px,3.4vw,50px); line-height:1.08; letter-spacing:-1.7px; } .qnix-intent-heading p{ margin:0; color:#5d6b84; line-height:1.8; font-size:16px; } .qnix-intent-track{ max-width:1240px; margin:auto; display:flex; align-items:stretch; } .qnix-intent-step{ flex:1; min-height:170px; padding:27px 25px; background:#fff; border-top:4px solid #0758d8; transition:.35s ease; } .qnix-intent-step:hover{ transform:translateY(-7px); box-shadow:0 20px 45px rgba(7,88,216,.10); } .qnix-intent-step strong{ display:block; margin-bottom:24px; color:#087ee7; font-size:11px; letter-spacing:1px; } .qnix-intent-step h3{ margin:0 0 9px; color:#0d1730; font-size:20px; } .qnix-intent-step p{ margin:0; color:#5d6b84; font-size:13px; line-height:1.65; } .qnix-intent-connector{ width:28px; align-self:center; height:2px; background:#b7e51c; flex:none; } .qnix-content-stack{ padding:92px 7%; background:#fff; } .qnix-stack-heading{ max-width:1240px; margin:0 auto 45px; } .qnix-stack-visual{ max-width:1240px; margin:auto; display:grid; grid-template-columns:1.35fr 1fr 1fr; align-items:stretch; } .qnix-stack-column{ position:relative; min-height:245px; padding:34px 32px; border-left:1px solid #dce6f3; overflow:hidden; } .qnix-stack-column:last-child{ border-right:1px solid #dce6f3; } .qnix-stack-column:after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:5px; background:linear-gradient(90deg,#0758d8,#08a8cf,#79c91c); transform:scaleX(0); transform-origin:left; transition:.45s ease; } .qnix-stack-column:hover:after{ transform:scaleX(1); } .qnix-stack-main{ background:#f4f8ff; } .qnix-stack-label{ display:block; margin-bottom:28px; color:#087ee7; font-size:10px; font-weight:800; letter-spacing:1.7px; } .qnix-stack-column h3{ margin:0 0 14px; color:#0d1730; font-size:24px; line-height:1.2; } .qnix-stack-column p{ margin:0; color:#5d6b84; font-size:14px; line-height:1.75; } .qnix-content-services{ padding:88px 7%; background:#062d7a; } .qnix-services-intro{ max-width:1240px; margin:auto; display:grid; grid-template-columns:.7fr 1.3fr; gap:50px; align-items:end; margin-bottom:42px; } .qnix-services-intro > span{ color:#b7e51c; margin:0; } .qnix-services-intro h2{ color:#fff; margin:0; max-width:720px; } .qnix-service-list{ max-width:1240px; margin:auto; border-top:1px solid rgba(255,255,255,.18); } .qnix-service-row{ display:grid; grid-template-columns:1fr 1.3fr 45px; gap:30px; align-items:center; min-height:82px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.15); transition:.3s ease; } .qnix-service-row:hover{ padding-left:15px; padding-right:15px; background:rgba(255,255,255,.045); } .qnix-service-row span{ color:#fff; font-size:17px; font-weight:700; } .qnix-service-row p{ margin:0; color:rgba(255,255,255,.66); font-size:13px; line-height:1.6; } .qnix-service-row b{ width:34px; height:34px; display:grid; place-items:center; color:#062d7a; background:#b7e51c; font-size:16px; transition:.3s ease; } .qnix-service-row:hover b{ transform:translate(3px,-3px); } .qnix-content-cta{ position:relative; min-height:330px; padding:72px 7%; display:grid; grid-template-columns:1fr auto; align-items:center; gap:70px; overflow:hidden; background:linear-gradient(118deg,#062d7a 0%,#0758d8 48%,#08a8cf 100%); } .qnix-content-cta:before{ content:""; position:absolute; top:-130px; right:9%; width:360px; height:360px; border:1px solid rgba(255,255,255,.18); transform:rotate(45deg); } .qnix-content-cta:after{ content:""; position:absolute; bottom:-180px; left:42%; width:420px; height:240px; border-top:2px solid rgba(183,229,28,.38); transform:skewX(-35deg); } .qnix-content-cta-glow{ position:absolute; width:180px; height:180px; left:8%; top:30%; background:#79c91c; opacity:.12; filter:blur(70px); } .qnix-content-cta-content{ position:relative; z-index:2; max-width:760px; } .qnix-content-cta-content > span{ color:#b7e51c; } .qnix-content-cta-content h2{ margin:0 0 17px; color:#fff; font-size:clamp(32px,4vw,58px); line-height:1.05; letter-spacing:-2px; } .qnix-content-cta-content p{ margin:0; max-width:650px; color:rgba(255,255,255,.78); line-height:1.75; font-size:15px; } .qnix-content-cta-action{ position:relative; z-index:3; display:flex; align-items:center; gap:22px; min-width:225px; padding:19px 21px; background:#fff; color:#0758d8; text-decoration:none; font-size:14px; font-weight:800; box-shadow:0 18px 45px rgba(6,45,122,.22); transition:.35s ease; } .qnix-content-cta-action b{ margin-left:auto; font-size:20px; transition:.3s ease; } .qnix-content-cta-action:hover{ background:#b7e51c; color:#062d7a; transform:translateY(-5px); } .qnix-content-cta-action:hover b{ transform:translate(4px,-4px); } @media(max-width:900px){ .qnix-content-intro-inner{ grid-template-columns:1fr; gap:45px; } .qnix-intent-track{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .qnix-intent-connector{ display:none; } .qnix-stack-visual{ grid-template-columns:1fr; } .qnix-stack-column, .qnix-stack-column:last-child{ border:1px solid #dce6f3; } .qnix-services-intro{ grid-template-columns:1fr; gap:15px; } .qnix-content-cta{ grid-template-columns:1fr; gap:35px; } } @media(max-width:600px){ .qnix-content-intro, .qnix-intent-section, .qnix-content-stack, .qnix-content-services{ padding:65px 20px; } .qnix-content-copy h2{ font-size:38px; letter-spacing:-1.5px; } .qnix-content-editor{ min-height:320px; padding:25px; } .qnix-intent-track{ grid-template-columns:1fr; } .qnix-intent-heading h2, .qnix-stack-heading h2, .qnix-services-intro h2{ font-size:32px; } .qnix-service-row{ grid-template-columns:1fr 35px; gap:15px; padding:18px 0; } .qnix-service-row p{ grid-column:1; grid-row:2; } .qnix-service-row b{ grid-column:2; grid-row:1 / span 2; } .qnix-content-cta{ padding:60px 20px; } .qnix-content-cta-content h2{ font-size:36px; letter-spacing:-1.4px; } } /* ========================================================= QNIX DIGITAL — AI SEO ========================================================= */ .qnix-ai-seo-opening, .qnix-ai-intelligence, .qnix-ai-pathway, .qnix-ai-capability, .qnix-ai-signal, .qnix-ai-final{ font-family:inherit; overflow:hidden; } /* ========================================================= OPENING ========================================================= */ .qnix-ai-seo-opening{ padding:88px 7%; background:#fff; } .qnix-ai-seo-wrap{ max-width:1240px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:85px; align-items:center; } .qnix-ai-seo-label, .qnix-ai-intelligence-head > span, .qnix-ai-pathway-title > span, .qnix-ai-capability-intro > span, .qnix-signal-copy > span, .qnix-ai-final-copy > span{ display:block; margin-bottom:15px; color:#0758d8; font-size:11px; font-weight:800; letter-spacing:2.2px; } .qnix-ai-seo-copy h2{ max-width:690px; margin:0 0 23px; color:#0d1730; font-size:clamp(40px,4.5vw,67px); line-height:1.02; letter-spacing:-2.7px; } .qnix-ai-seo-copy p{ max-width:650px; margin:0; color:#5d6b84; font-size:16px; line-height:1.85; } .qnix-ai-seo-tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:29px; } .qnix-ai-seo-tags span{ padding:9px 14px; border-left:3px solid #0758d8; background:#f4f8ff; color:#0d1730; font-size:11px; font-weight:700; } /* ========================================================= AI QUERY VISUAL ========================================================= */ .qnix-ai-query{ position:relative; min-height:390px; padding:30px; background:#062d7a; box-shadow:0 30px 70px rgba(7,88,216,.18); transform:perspective(1100px) rotateY(-3deg); transition:.5s ease; } .qnix-ai-query:hover{ transform:perspective(1100px) rotateY(0deg) translateY(-5px); } .qnix-ai-query:before{ content:""; position:absolute; inset:0; background: linear-gradient( 90deg, transparent 49.7%, rgba(255,255,255,.07) 50%, transparent 50.3% ), linear-gradient( 0deg, transparent 49.7%, rgba(255,255,255,.07) 50%, transparent 50.3% ); background-size:44px 44px; opacity:.55; } .qnix-ai-query-head{ position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; color:#fff; font-size:10px; font-weight:800; letter-spacing:1.8px; } .qnix-ai-query-head i{ width:8px; height:8px; background:#b7e51c; transform:rotate(45deg); box-shadow:0 0 18px rgba(183,229,28,.7); } .qnix-ai-question{ position:relative; z-index:2; margin-top:72px; color:#fff; font-size:24px; line-height:1.4; font-weight:600; } .qnix-ai-cursor{ display:inline-block; width:3px; height:25px; margin-right:9px; vertical-align:-4px; background:#b7e51c; animation:qnixAiCursor 1s infinite; } @keyframes qnixAiCursor{ 50%{ opacity:.2; } } .qnix-ai-stream{ position:relative; z-index:2; margin-top:34px; } .qnix-stream-line{ height:3px; margin-bottom:11px; background:linear-gradient( 90deg, #087ee7, #08a8cf, #79c91c ); transform-origin:left; animation:qnixAiStream 3s infinite ease-in-out; } .line-a{width:91%} .line-b{width:74%;animation-delay:.25s} .line-c{width:83%;animation-delay:.5s} .line-d{width:57%;animation-delay:.75s} @keyframes qnixAiStream{ 0%,100%{ transform:scaleX(.72); opacity:.55; } 50%{ transform:scaleX(1); opacity:1; } } .qnix-ai-response{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:34px; padding:16px 0; border-top:1px solid rgba(255,255,255,.15); border-bottom:1px solid rgba(255,255,255,.15); } .qnix-ai-response span{ color:#b7e51c; font-size:9px; font-weight:800; letter-spacing:1.4px; } .qnix-ai-response strong{ color:#fff; font-size:12px; } .qnix-ai-query-foot{ position:absolute; z-index:2; left:30px; right:30px; bottom:24px; display:flex; justify-content:space-between; color:rgba(255,255,255,.45); font-size:8px; letter-spacing:1.5px; font-weight:800; } .qnix-ai-query-foot b{ color:#08a8cf; } /* ========================================================= INTELLIGENCE ========================================================= */ .qnix-ai-intelligence{ padding:92px 7%; background:#f4f8ff; } .qnix-ai-intelligence-head{ max-width:720px; margin:0 auto 52px; text-align:center; } .qnix-ai-intelligence-head h2, .qnix-ai-capability-intro h2{ margin:0 0 17px; color:#0d1730; font-size:clamp(32px,3.5vw,51px); line-height:1.08; letter-spacing:-1.8px; } .qnix-ai-intelligence-head p{ margin:0; color:#5d6b84; font-size:15px; line-height:1.8; } .qnix-ai-layers{ max-width:1120px; margin:auto; position:relative; } .qnix-ai-layers:before{ content:""; position:absolute; left:42px; top:30px; bottom:30px; width:1px; background:linear-gradient( #0758d8, #08a8cf, #79c91c ); } .qnix-ai-layer{ position:relative; z-index:2; display:grid; grid-template-columns:85px 1fr; gap:30px; align-items:center; margin-bottom:14px; padding:24px 30px; background:#fff; border:1px solid #dce6f3; transition:.35s ease; } .qnix-ai-layer:hover, .qnix-ai-layer.active{ transform:translateX(12px); border-color:#087ee7; box-shadow:0 16px 42px rgba(7,88,216,.09); } .qnix-layer-index{ width:25px; height:25px; display:grid; place-items:center; background:#0758d8; color:#fff; font-size:9px; font-weight:800; } .qnix-ai-layer:nth-child(3) .qnix-layer-index{ background:#08a8cf; } .qnix-ai-layer:nth-child(4) .qnix-layer-index{ background:#79c91c; color:#0d1730; } .qnix-ai-layer h3{ margin:0 0 7px; color:#0d1730; font-size:20px; } .qnix-ai-layer p{ max-width:800px; margin:0; color:#5d6b84; font-size:13px; line-height:1.65; } /* ========================================================= AI SIGNAL PATHWAY ========================================================= */ .qnix-ai-pathway{ padding:92px 7%; background:#fff; } .qnix-ai-pathway-title{ max-width:1240px; margin:0 auto 58px; } .qnix-ai-pathway-title h2{ max-width:720px; margin:0; color:#0d1730; font-size:clamp(32px,3.5vw,51px); line-height:1.08; letter-spacing:-1.8px; } .qnix-ai-signal-flow{ max-width:1240px; margin:auto; display:flex; align-items:center; } .qnix-ai-signal-item{ position:relative; z-index:2; flex:1; min-width:0; display:grid; grid-template-columns:62px 1fr; gap:18px; align-items:center; padding:25px 18px; background:#f4f8ff; border-top:1px solid #dce6f3; border-bottom:1px solid #dce6f3; transition:.4s ease; } .qnix-ai-signal-item:hover{ background:#fff; border-color:#087ee7; transform:translateY(-8px); box-shadow:0 20px 45px rgba(7,88,216,.10); } .qnix-ai-signal-icon{ position:relative; width:54px; height:54px; display:grid; place-items:center; background:#fff; border:1px solid #d7e4f2; overflow:hidden; } .qnix-ai-result .qnix-ai-signal-icon{ background:#062d7a; border-color:#062d7a; } .qnix-ai-signal-text small{ display:block; margin-bottom:5px; color:#087ee7; font-size:8px; font-weight:800; letter-spacing:1.5px; } .qnix-ai-signal-text strong{ display:block; color:#0d1730; font-size:20px; line-height:1.1; } .qnix-ai-signal-text p{ margin:8px 0 0; color:#5d6b84; font-size:11px; line-height:1.55; } .qnix-ai-result .qnix-ai-signal-text small{ color:#08a8cf; } .qnix-ai-result .qnix-ai-signal-text strong{ color:#0758d8; } .qnix-ai-flow-line{ position:relative; width:45px; height:2px; flex:none; background:#d2dfed; } .qnix-ai-flow-line i{ position:absolute; top:50%; left:0; width:9px; height:9px; margin-top:-4px; background:#08a8cf; transform:rotate(45deg); animation:qnixAiFlow 2.2s infinite linear; } @keyframes qnixAiFlow{ 0%{ left:0; opacity:0; } 20%{ opacity:1; } 80%{ opacity:1; } 100%{ left:calc(100% - 9px); opacity:0; } } .signal-dot{ width:13px; height:13px; background:#0758d8; transform:rotate(45deg); } .signal-pulse{ position:absolute; width:32px; height:32px; border:1px solid #08a8cf; transform:rotate(45deg); animation:qnixPulse 2s infinite ease-out; } @keyframes qnixPulse{ 0%{ opacity:.8; transform:rotate(45deg) scale(.55); } 100%{ opacity:0; transform:rotate(45deg) scale(1.2); } } .signal-bars{ display:flex; align-items:flex-end; gap:4px; height:28px; } .signal-bars b{ display:block; width:5px; background:#087ee7; animation:qnixBars 1.4s infinite ease-in-out; } .signal-bars b:nth-child(1){ height:13px; } .signal-bars b:nth-child(2){ height:23px; background:#08a8cf; animation-delay:.15s; } .signal-bars b:nth-child(3){ height:18px; background:#79c91c; animation-delay:.3s; } @keyframes qnixBars{ 50%{ transform:scaleY(.55); } } .signal-links{ position:relative; width:34px; height:34px; } .signal-links b{ position:absolute; width:9px; height:9px; background:#0758d8; transform:rotate(45deg); } .signal-links b:nth-child(1){ top:2px; left:12px; } .signal-links b:nth-child(2){ bottom:3px; left:3px; background:#08a8cf; } .signal-links b:nth-child(3){ bottom:3px; right:3px; background:#79c91c; } .signal-links:before, .signal-links:after{ content:""; position:absolute; width:16px; height:1px; background:#9ab5d5; transform-origin:left; } .signal-links:before{ top:15px; left:14px; transform:rotate(135deg); } .signal-links:after{ top:15px; left:20px; transform:rotate(45deg); } .signal-scan{ position:relative; width:29px; height:29px; border:1px solid #08a8cf; } .signal-scan:before{ content:""; position:absolute; left:4px; right:4px; top:13px; height:2px; background:#b7e51c; box-shadow:0 0 12px rgba(183,229,28,.8); animation:qnixScan 1.7s infinite ease-in-out; } .signal-scan:after{ content:""; position:absolute; inset:7px; border-left:2px solid #087ee7; border-right:2px solid #087ee7; } @keyframes qnixScan{ 0%,100%{ transform:translateY(-6px); } 50%{ transform:translateY(6px); } } .qnix-ai-flow-caption{ max-width:960px; margin:40px auto 0; display:flex; align-items:center; justify-content:center; gap:14px; color:#5d6b84; font-size:9px; font-weight:800; letter-spacing:1.5px; } .qnix-ai-flow-caption i{ width:22px; height:1px; background:#b7e51c; } /* ========================================================= CAPABILITIES ========================================================= */ .qnix-ai-capability{ padding:90px 7%; background:#f4f8ff; } .qnix-ai-capability-intro{ max-width:1240px; margin:0 auto 42px; display:grid; grid-template-columns:.75fr 1.25fr; gap:60px; align-items:end; } .qnix-ai-capability-intro h2{ margin:0; max-width:760px; } .qnix-ai-capability-list{ max-width:1240px; margin:auto; border-top:1px solid #d6e2ef; } .qnix-ai-capability-row{ display:grid; grid-template-columns:70px 1fr 50px; gap:30px; align-items:center; min-height:112px; border-bottom:1px solid #d6e2ef; transition:.35s ease; } .qnix-ai-capability-row:hover{ padding-left:16px; padding-right:16px; background:#fff; } .qnix-ai-symbol{ color:#0758d8; font-size:10px; font-weight:800; letter-spacing:1px; } .qnix-ai-capability-row h3{ margin:0 0 7px; color:#0d1730; font-size:19px; } .qnix-ai-capability-row p{ margin:0; max-width:760px; color:#5d6b84; font-size:13px; line-height:1.65; } .qnix-ai-capability-row > span{ width:38px; height:38px; display:grid; place-items:center; color:#062d7a; background:#b7e51c; font-weight:800; transition:.3s ease; } .qnix-ai-capability-row:hover > span{ transform:translate(4px,-4px); } /* ========================================================= AI SIGNAL BOARD ========================================================= */ .qnix-ai-signal{ padding:88px 7%; background:#062d7a; } .qnix-ai-signal-inner{ max-width:1240px; margin:auto; display:grid; grid-template-columns:1fr .9fr; gap:90px; align-items:center; } .qnix-signal-copy > span{ color:#b7e51c; } .qnix-signal-copy h2{ margin:0 0 20px; color:#fff; font-size:clamp(32px,3.8vw,54px); line-height:1.07; letter-spacing:-1.8px; } .qnix-signal-copy p{ max-width:650px; margin:0; color:rgba(255,255,255,.7); font-size:15px; line-height:1.8; } .qnix-signal-board{ padding:30px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.14); } .qnix-signal-top, .qnix-signal-footer{ display:flex; justify-content:space-between; align-items:center; color:rgba(255,255,255,.58); font-size:9px; font-weight:800; letter-spacing:1.6px; } .qnix-signal-top b{ color:#b7e51c; } .qnix-signal-bars{ margin:52px 0 38px; } .qnix-signal-bars > div{ margin-bottom:24px; } .qnix-signal-bars span{ display:block; margin-bottom:8px; color:#fff; font-size:9px; font-weight:800; letter-spacing:1.3px; } .qnix-signal-bars i{ display:block; width:100%; height:7px; background:rgba(255,255,255,.1); } .qnix-signal-bars i:after{ content:""; display:block; width:var(--w); height:100%; background:linear-gradient( 90deg, #0758d8, #08a8cf, #79c91c ); animation:qnixSignalGrow 1.5s ease both; } @keyframes qnixSignalGrow{ from{ width:0; } to{ width:var(--w); } } .qnix-signal-footer em{ color:#08a8cf; font-style:normal; } /* ========================================================= UNIQUE FINAL CTA ========================================================= */ .qnix-ai-final{ position:relative; display:grid; grid-template-columns:150px 1fr auto; gap:45px; align-items:center; padding:62px 7%; background:#fff; } .qnix-ai-final:before{ content:""; position:absolute; left:0; top:0; width:100%; height:5px; background:linear-gradient( 90deg, #0758d8, #087ee7, #08a8cf, #79c91c ); } .qnix-ai-final-mark{ position:relative; width:115px; height:115px; display:grid; place-items:center; border:2px solid #0758d8; transform:rotate(45deg); } .qnix-ai-final-mark span{ transform:rotate(-45deg); color:#0758d8; font-size:30px; font-weight:900; letter-spacing:-2px; } .qnix-ai-final-mark i, .qnix-ai-final-mark b{ position:absolute; display:block; width:8px; height:8px; transform:rotate(-45deg); } .qnix-ai-final-mark i{ top:-5px; right:16px; background:#08a8cf; } .qnix-ai-final-mark b{ bottom:-5px; left:16px; background:#79c91c; } .qnix-ai-final-copy{ max-width:720px; } .qnix-ai-final-copy > span{ margin-bottom:11px; } .qnix-ai-final-copy h2{ margin:0 0 12px; color:#0d1730; font-size:clamp(29px,3.2vw,46px); line-height:1.08; letter-spacing:-1.5px; } .qnix-ai-final-copy p{ margin:0; color:#5d6b84; font-size:14px; line-height:1.7; } .qnix-ai-final-btn{ display:flex; align-items:center; gap:25px; min-width:205px; padding:18px 20px; background:#0758d8; color:#fff; text-decoration:none; font-size:13px; font-weight:800; transition:.35s ease; } .qnix-ai-final-btn b{ margin-left:auto; font-size:20px; } .qnix-ai-final-btn:hover{ background:#062d7a; transform:translateY(-5px); box-shadow:0 18px 40px rgba(7,88,216,.18); } /* ========================================================= TABLET ========================================================= */ @media(max-width:1100px){ .qnix-ai-signal-flow{ display:grid; grid-template-columns:1fr 35px 1fr; } .qnix-ai-flow-line{ width:35px; } .qnix-ai-signal-item{ min-height:145px; } .qnix-ai-signal-flow .qnix-ai-flow-line:nth-of-type(2){ display:none; } } @media(max-width:950px){ .qnix-ai-seo-wrap, .qnix-ai-signal-inner{ grid-template-columns:1fr; gap:50px; } .qnix-ai-capability-intro{ grid-template-columns:1fr; gap:15px; } .qnix-ai-final{ grid-template-columns:100px 1fr; } .qnix-ai-final-btn{ grid-column:2; } .qnix-ai-final-mark{ width:90px; height:90px; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:700px){ .qnix-ai-seo-opening, .qnix-ai-intelligence, .qnix-ai-pathway, .qnix-ai-capability, .qnix-ai-signal{ padding:65px 20px; } .qnix-ai-seo-copy h2{ font-size:39px; letter-spacing:-1.7px; } .qnix-ai-query{ min-height:350px; padding:24px; } .qnix-ai-question{ margin-top:55px; font-size:20px; } .qnix-ai-layers:before{ left:29px; } .qnix-ai-layer{ grid-template-columns:55px 1fr; gap:15px; padding:21px 18px; } .qnix-ai-layer:hover, .qnix-ai-layer.active{ transform:translateX(5px); } .qnix-ai-signal-flow{ display:block; } .qnix-ai-signal-item{ min-height:auto; grid-template-columns:60px 1fr; padding:23px 18px; } .qnix-ai-flow-line{ width:2px; height:30px; margin:0 auto; background:#d2dfed; } .qnix-ai-flow-line i{ left:50%; top:0; margin-left:-4px; margin-top:0; animation:qnixAiFlowMobile 1.8s infinite linear; } @keyframes qnixAiFlowMobile{ 0%{ top:0; opacity:0; } 20%{ opacity:1; } 80%{ opacity:1; } 100%{ top:21px; opacity:0; } } .qnix-ai-flow-caption{ flex-wrap:wrap; line-height:1.7; gap:9px; } .qnix-ai-flow-caption i{ width:14px; } .qnix-ai-capability-row{ grid-template-columns:45px 1fr 35px; gap:14px; min-height:125px; } .qnix-ai-capability-row:hover{ padding-left:8px; padding-right:8px; } .qnix-ai-final{ grid-template-columns:1fr; gap:28px; padding:55px 20px; } .qnix-ai-final-mark{ width:80px; height:80px; } .qnix-ai-final-btn{ grid-column:auto; width:100%; } } /* ========================================================= QNIX DIGITAL — GENERATIVE ENGINE OPTIMIZATION ========================================================= */ .qnix-geo-opening{ position:relative; padding:92px 6%; background:#f4f8ff; overflow:hidden; } .qnix-geo-opening:before{ content:""; position:absolute; width:520px; height:520px; right:-230px; top:-250px; background:linear-gradient(135deg,#0758d8,#08a8cf,#16b98a); border-radius:50%; opacity:.09; } .qnix-geo-opening-wrap{ max-width:1280px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; } .qnix-geo-opening-copy{ max-width:610px; } .qnix-geo-kicker, .qnix-geo-shift-head span, .qnix-geo-eco-head span, .qnix-geo-optimise-intro span, .qnix-geo-lab-copy span, .qnix-geo-final-label{ display:block; font-size:12px; font-weight:800; letter-spacing:2.3px; color:#0758d8; } .qnix-geo-opening-copy h2{ margin:18px 0 20px; font-size:clamp(42px,5vw,70px); line-height:1.02; letter-spacing:-2.8px; color:#0d1730; } .qnix-geo-opening-copy p{ max-width:570px; margin:0; color:#5d6b84; font-size:17px; line-height:1.8; } .qnix-geo-tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; } .qnix-geo-tags span{ padding:9px 14px; border:1px solid #d6e3f3; background:#fff; color:#0758d8; font-size:12px; font-weight:700; } .qnix-geo-answer{ position:relative; min-height:480px; padding:25px; background:#062d7a; box-shadow:0 28px 70px rgba(7,88,216,.20); overflow:hidden; } .qnix-geo-answer:before{ content:""; position:absolute; inset:0; background: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:34px 34px; } .qnix-geo-answer-top, .qnix-geo-answer-foot{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; color:#fff; font-size:10px; font-weight:800; letter-spacing:1.6px; } .qnix-geo-answer-top i{ width:34px; height:2px; background:#b7e51c; } .qnix-geo-answer-top b{ color:#8ee7ff; } .qnix-geo-prompt{ position:relative; z-index:2; margin-top:48px; padding:20px; border-left:2px solid #08a8cf; background:rgba(255,255,255,.06); } .qnix-geo-prompt span{ display:block; color:#79c91c; font-size:10px; font-weight:800; letter-spacing:1.5px; margin-bottom:8px; } .qnix-geo-prompt p{ margin:0; color:#fff; font-size:16px; line-height:1.5; } .qnix-geo-thinking{ position:relative; z-index:2; margin:34px 0; } .qnix-thinking-line{ width:82%; height:3px; margin:12px 0; background:linear-gradient(90deg,#08a8cf,#16b98a,transparent); animation:qnixGeoScan 2.8s ease-in-out infinite; } .qnix-thinking-line.short{ width:58%; animation-delay:.4s; } .qnix-geo-answer-box{ position:relative; z-index:2; padding:25px; border:1px solid rgba(255,255,255,.16); background:rgba(5,35,96,.72); } .qnix-answer-label{ color:#8ee7ff; font-size:10px; font-weight:800; letter-spacing:1.6px; } .qnix-answer-word{ display:flex; gap:10px; margin:22px 0; } .qnix-answer-word span{ padding:9px 12px; border:1px solid rgba(255,255,255,.18); color:#fff; font-size:10px; font-weight:700; } .qnix-answer-word span:nth-child(2){ border-color:#08a8cf; } .qnix-answer-word span:nth-child(3){ border-color:#79c91c; } .qnix-answer-progress{ width:100%; height:4px; background:rgba(255,255,255,.10); overflow:hidden; } .qnix-answer-progress span{ display:block; width:76%; height:100%; background:linear-gradient(90deg,#0758d8,#08a8cf,#b7e51c); animation:qnixGeoProgress 3s ease-in-out infinite alternate; } .qnix-geo-answer-foot{ margin-top:28px; opacity:.65; } .qnix-geo-shift{ padding:105px 6%; background:#fff; } .qnix-geo-shift-head{ max-width:1280px; margin:auto; display:grid; grid-template-columns:1fr 1.25fr .85fr; gap:50px; align-items:end; } .qnix-geo-shift-head h2{ margin:0; color:#0d1730; font-size:clamp(34px,4vw,54px); line-height:1.08; letter-spacing:-2px; } .qnix-geo-shift-head p{ margin:0; color:#5d6b84; line-height:1.75; } .qnix-geo-shift-track{ max-width:1280px; margin:70px auto 0; border-top:1px solid #dfe7f2; } .qnix-geo-track-row{ min-height:92px; display:grid; grid-template-columns:150px 1fr 230px; gap:35px; align-items:center; border-bottom:1px solid #dfe7f2; } .qnix-geo-track-name{ color:#0758d8; font-size:12px; font-weight:900; letter-spacing:1.7px; } .qnix-geo-track-line{ height:2px; background:#e3eaf4; position:relative; overflow:hidden; } .qnix-geo-track-line span{ position:absolute; left:-15%; top:0; width:15%; height:100%; background:linear-gradient(90deg,#0758d8,#08a8cf,#79c91c); animation:qnixGeoTravel 3s linear infinite; } .qnix-geo-track-result{ color:#5d6b84; font-size:14px; } .qnix-geo-ecosystem{ padding:110px 6%; background:#f4f8ff; overflow:hidden; } .qnix-geo-eco-head{ max-width:1280px; margin:auto; display:flex; justify-content:space-between; align-items:flex-end; gap:40px; } .qnix-geo-eco-head h2{ margin:0; color:#0d1730; font-size:clamp(38px,4.5vw,60px); line-height:1; letter-spacing:-2.4px; } .qnix-geo-map{ max-width:1150px; height:570px; margin:50px auto 0; position:relative; } .qnix-geo-map-center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:190px; height:105px; display:flex; align-items:center; justify-content:center; text-align:center; background:linear-gradient(135deg,#0758d8,#087ee7); color:#fff; font-size:15px; font-weight:900; letter-spacing:2px; box-shadow:0 22px 50px rgba(7,88,216,.25); z-index:3; } .qnix-geo-map-center:after{ content:""; position:absolute; inset:-9px; border:1px solid #08a8cf; opacity:.55; } .qnix-geo-connection{ position:absolute; z-index:3; width:190px; padding:18px; background:#fff; border:1px solid #dce6f3; box-shadow:0 15px 40px rgba(17,55,110,.08); } .qnix-geo-connection b{ display:block; color:#0758d8; font-size:11px; letter-spacing:1.5px; } .qnix-geo-connection span{ display:block; margin-top:6px; color:#5d6b84; font-size:12px; line-height:1.5; } .geo-one{left:4%;top:7%} .geo-two{right:4%;top:8%} .geo-three{left:0;bottom:8%} .geo-four{right:0;bottom:8%} .geo-five{left:50%;top:2%;transform:translateX(-50%)} .qnix-geo-map-line{ position:absolute; height:1px; background:linear-gradient(90deg,transparent,#08a8cf,#0758d8,transparent); transform-origin:left center; opacity:.55; } .line-one{width:360px;left:22%;top:30%;transform:rotate(25deg)} .line-two{width:360px;right:22%;top:30%;transform:rotate(155deg)} .line-three{width:380px;left:20%;bottom:29%;transform:rotate(-25deg)} .line-four{width:380px;right:20%;bottom:29%;transform:rotate(205deg)} .line-five{ width:180px; left:50%; top:19%; transform:translateX(-50%) rotate(90deg); background:#79c91c; } .qnix-geo-optimise{ padding:105px 6%; background:#fff; } .qnix-geo-optimise-intro{ max-width:1280px; margin:auto; } .qnix-geo-optimise-intro h2{ margin:16px 0 60px; color:#0d1730; font-size:clamp(38px,4.5vw,58px); line-height:1.04; letter-spacing:-2.3px; } .qnix-geo-optimise-list{ max-width:1280px; margin:auto; border-top:1px solid #dce6f3; } .qnix-geo-item{ display:grid; grid-template-columns:70px 1fr 40px; gap:30px; align-items:center; min-height:125px; border-bottom:1px solid #dce6f3; transition:.35s ease; } .qnix-geo-item:hover{ padding-left:18px; background:#f4f8ff; } .qnix-geo-item-symbol{ width:46px; height:46px; display:flex; align-items:center; justify-content:center; border:1px solid #b9cde8; color:#0758d8; font-size:22px; transition:.35s ease; } .qnix-geo-item:hover .qnix-geo-item-symbol{ background:#0758d8; color:#fff; border-color:#0758d8; } .qnix-geo-item h3{ margin:0 0 8px; color:#0d1730; font-size:19px; } .qnix-geo-item p{ margin:0; max-width:760px; color:#5d6b84; font-size:14px; line-height:1.7; } .qnix-geo-item-arrow{ color:#0758d8; font-size:23px; transition:.35s ease; } .qnix-geo-item:hover .qnix-geo-item-arrow{ transform:translateX(7px); color:#16b98a; } .qnix-geo-answer-lab{ position:relative; padding:105px 6%; background:#062d7a; overflow:hidden; } .qnix-geo-lab-grid{ position:absolute; inset:0; background: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:45px 45px; } .qnix-geo-lab-inner{ position:relative; z-index:2; max-width:1280px; margin:auto; display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; align-items:center; } .qnix-geo-lab-copy span{ color:#8ee7ff; } .qnix-geo-lab-copy h2{ margin:18px 0; color:#fff; font-size:clamp(38px,4.5vw,58px); line-height:1.04; letter-spacing:-2.2px; } .qnix-geo-lab-copy p{ margin:0; color:rgba(255,255,255,.72); line-height:1.8; font-size:16px; } .qnix-geo-lab-screen{ position:relative; padding:28px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.045); backdrop-filter:blur(8px); } .qnix-lab-query{ padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.12); } .qnix-lab-query span, .qnix-lab-result span{ display:block; color:#79c91c; font-size:10px; font-weight:800; letter-spacing:1.5px; margin-bottom:9px; } .qnix-lab-query strong{ color:#fff; font-size:17px; } .qnix-lab-source{ display:flex; align-items:center; gap:18px; padding:20px 0; border-bottom:1px solid rgba(255,255,255,.09); } .qnix-lab-source > span{ width:32px; color:#08a8cf; font-size:11px; font-weight:900; } .qnix-lab-source b{ display:block; color:#fff; font-size:14px; } .qnix-lab-source small{ display:block; margin-top:4px; color:rgba(255,255,255,.55); font-size:11px; } .qnix-lab-result{ margin-top:22px; padding:20px; background:rgba(7,88,216,.25); } .qnix-lab-result-line{ width:88%; height:5px; margin:11px 0; background:linear-gradient(90deg,#08a8cf,#16b98a,transparent); } .qnix-lab-result-line:nth-child(3){ width:72%; } .qnix-lab-result-line.small{ width:48%; } .qnix-geo-final{ position:relative; min-height:460px; padding:90px 6%; display:flex; align-items:center; overflow:hidden; background:linear-gradient(115deg,#0d1730 0%,#062d7a 45%,#0758d8 100%); } .qnix-geo-final-beam{ position:absolute; width:900px; height:2px; right:-100px; top:50%; background:linear-gradient(90deg,transparent,#08a8cf,#b7e51c,transparent); transform:rotate(-25deg); opacity:.7; } .qnix-geo-final-content{ position:relative; z-index:3; max-width:760px; margin-left:max(0px,calc((100vw - 1280px)/2)); } .qnix-geo-final-label{ color:#b7e51c; } .qnix-geo-final h2{ margin:18px 0; color:#fff; font-size:clamp(42px,5vw,68px); line-height:1; letter-spacing:-2.8px; } .qnix-geo-final p{ max-width:590px; margin:0 0 30px; color:rgba(255,255,255,.72); line-height:1.75; font-size:16px; } .qnix-geo-final-btn{ display:inline-flex; align-items:center; gap:18px; padding:15px 20px 15px 24px; background:#fff; color:#0758d8; text-decoration:none; font-size:13px; font-weight:800; transition:.35s ease; } .qnix-geo-final-btn b{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:#0758d8; color:#fff; transition:.35s ease; } .qnix-geo-final-btn:hover{ transform:translateY(-4px); box-shadow:0 18px 45px rgba(0,0,0,.18); } .qnix-geo-final-btn:hover b{ background:#16b98a; transform:rotate(45deg); } .qnix-geo-final-signal{ position:absolute; z-index:2; right:11%; top:50%; transform:translateY(-50%); width:220px; height:220px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(142,231,255,.35); } .qnix-geo-final-signal:before, .qnix-geo-final-signal:after{ content:""; position:absolute; inset:25px; border:1px solid rgba(255,255,255,.13); } .qnix-geo-final-signal:after{ inset:55px; border-color:#08a8cf; } .qnix-geo-final-signal span{ position:relative; z-index:3; color:#fff; font-size:48px; font-weight:900; letter-spacing:-3px; } .qnix-geo-final-signal small{ position:absolute; right:-32px; bottom:12px; color:#b7e51c; font-size:9px; line-height:1.4; letter-spacing:1.5px; font-weight:800; } .qnix-signal-pulse{ position:absolute; width:10px; height:10px; right:20px; top:20px; background:#b7e51c; box-shadow:0 0 0 0 rgba(183,229,28,.6); animation:qnixGeoPulse 2s infinite; } @keyframes qnixGeoScan{ 0%,100%{transform:translateX(0);opacity:.55} 50%{transform:translateX(35px);opacity:1} } @keyframes qnixGeoProgress{ from{width:55%} to{width:88%} } @keyframes qnixGeoTravel{ from{left:-15%} to{left:100%} } @keyframes qnixGeoPulse{ 0%{box-shadow:0 0 0 0 rgba(183,229,28,.55)} 70%{box-shadow:0 0 0 15px rgba(183,229,28,0)} 100%{box-shadow:0 0 0 0 rgba(183,229,28,0)} } @media(max-width:1000px){ .qnix-geo-opening-wrap, .qnix-geo-lab-inner{ grid-template-columns:1fr; gap:55px; } .qnix-geo-shift-head{ grid-template-columns:1fr; gap:22px; } .qnix-geo-map{ height:650px; } .qnix-geo-final-signal{ right:5%; opacity:.45; } } @media(max-width:700px){ .qnix-geo-opening, .qnix-geo-shift, .qnix-geo-ecosystem, .qnix-geo-optimise, .qnix-geo-answer-lab{ padding:70px 5%; } .qnix-geo-opening-copy h2, .qnix-geo-shift-head h2, .qnix-geo-eco-head h2, .qnix-geo-optimise-intro h2, .qnix-geo-lab-copy h2, .qnix-geo-final h2{ letter-spacing:-1.6px; } .qnix-geo-answer{ min-height:410px; padding:20px; } .qnix-geo-track-row{ grid-template-columns:90px 1fr; gap:18px; min-height:105px; } .qnix-geo-track-result{ grid-column:2; margin-top:-28px; font-size:12px; } .qnix-geo-eco-head{ display:block; } .qnix-geo-eco-head h2{ margin-top:18px; } .qnix-geo-map{ height:620px; } .qnix-geo-map-center{ width:145px; height:85px; font-size:12px; } .qnix-geo-connection{ width:145px; padding:13px; } .qnix-geo-connection span{ font-size:10px; } .geo-one{left:0;top:7%} .geo-two{right:0;top:7%} .geo-three{left:0;bottom:5%} .geo-four{right:0;bottom:5%} .geo-five{top:1%} .qnix-geo-map-line{ display:none; } .qnix-geo-item{ grid-template-columns:48px 1fr 25px; gap:14px; min-height:145px; } .qnix-geo-item p{ font-size:12px; } .qnix-geo-item-symbol{ width:40px; height:40px; } .qnix-geo-final{ min-height:560px; padding:75px 5%; align-items:flex-start; } .qnix-geo-final-content{ margin:0; } .qnix-geo-final-signal{ right:50%; top:auto; bottom:35px; transform:translateX(50%); width:150px; height:150px; } .qnix-geo-final-signal span{ font-size:34px; } .qnix-geo-final-signal small{ right:-25px; } } /* ========================================================= QNIX DIGITAL — CHATGPT SEO ========================================================= */ .qnx-cgpt-intro{ position:relative; padding:78px 5%; background:#f4f8ff; overflow:hidden; } .qnx-cgpt-intro-inner{ width:100%; max-width:1380px; margin:auto; display:grid; grid-template-columns:minmax(380px,.82fr) minmax(560px,1.18fr); gap:55px; align-items:center; } .qnx-cgpt-intro-copy{ min-width:0; } .qnx-cgpt-label, .qnx-cgpt-section-head span, .qnx-signal-intro>span, .qnx-map-head>span, .qnx-work-head>span, .qnx-cta-left>span{ display:block; color:#0758d8; font-size:10px; font-weight:900; letter-spacing:2px; } .qnx-cgpt-intro-copy h2{ margin:15px 0 19px; color:#0d1730; font-size:clamp(42px,5vw,70px); line-height:.98; letter-spacing:-3px; } .qnx-cgpt-intro-copy p{ max-width:580px; margin:0; color:#5d6b84; font-size:15px; line-height:1.8; } .qnx-cgpt-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:25px; } .qnx-cgpt-tags span{ padding:8px 10px; border:1px solid #d5e2f1; background:#fff; color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1.2px; } .qnx-cgpt-interface{ position:relative; width:100%; min-width:0; height:545px; background:#fff; border:1px solid #d5e1ef; box-shadow:0 30px 70px rgba(17,55,110,.14); overflow:hidden; } .qnx-cgpt-topbar{ height:69px; padding:0 22px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e3eaf4; } .qnx-cgpt-brand{ display:flex; align-items:center; gap:12px; } .qnx-cgpt-brand>b{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0758d8,#08a8cf); color:#fff; font-size:14px; font-weight:900; } .qnx-cgpt-brand strong{ display:block; color:#0d1730; font-size:13px; } .qnx-cgpt-brand small{ display:block; margin-top:3px; color:#77869a; font-size:9px; } .qnx-cgpt-dots{ display:flex; gap:5px; } .qnx-cgpt-dots i{ width:5px; height:5px; background:#c8d5e4; } .qnx-cgpt-dots i:first-child{ background:#0758d8; } .qnx-cgpt-screen{ position:relative; height:425px; padding:24px 25px; background: linear-gradient(rgba(7,88,216,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.035) 1px,transparent 1px); background-size:28px 28px; } .qnx-cgpt-question{ width:70%; margin-left:auto; padding:15px 17px; background:#0758d8; color:#fff; box-shadow:0 12px 25px rgba(7,88,216,.14); } .qnx-cgpt-question small{ display:block; margin-bottom:7px; color:#b7e51c; font-size:8px; font-weight:900; letter-spacing:1.4px; } .qnx-cgpt-question strong{ display:block; font-size:13px; line-height:1.5; } .qnx-cgpt-thinking{ width:75%; margin-top:17px; display:flex; align-items:center; gap:11px; } .qnx-cgpt-ai-icon{ width:31px; height:31px; display:flex; align-items:center; justify-content:center; background:#eaf4ff; color:#0758d8; font-size:8px; font-weight:900; } .qnx-cgpt-thinking-body{ flex:1; padding:12px 15px; background:#fff; border:1px solid #dce6f1; } .qnx-cgpt-thinking-body>span{ color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1px; } .qnx-thinking-bars{ display:flex; gap:5px; margin-top:9px; } .qnx-thinking-bars i{ display:block; width:8px; height:8px; background:#08a8cf; animation:qnxThink 1.1s infinite ease-in-out; } .qnx-thinking-bars i:nth-child(2){ animation-delay:.15s; background:#16b98a; } .qnx-thinking-bars i:nth-child(3){ animation-delay:.3s; background:#79c91c; } .qnx-cgpt-context{ width:92%; margin-top:17px; margin-left:auto; padding:15px; background:rgba(244,248,255,.94); border:1px solid #d7e3ef; } .qnx-context-head{ display:flex; align-items:center; justify-content:space-between; } .qnx-context-head span{ color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1.3px; } .qnx-context-head b{ padding:4px 7px; background:#eaf8e8; color:#16b98a; font-size:7px; letter-spacing:1px; } .qnx-context-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px; } .qnx-context-item{ position:relative; padding:11px; background:#fff; border:1px solid #e0e8f1; } .qnx-context-item em{ display:block; margin-bottom:9px; color:#08a8cf; font-size:7px; font-style:normal; font-weight:900; } .qnx-context-item strong{ display:block; color:#0d1730; font-size:10px; } .qnx-context-item small{ display:block; margin-top:3px; color:#78869a; font-size:8px; } .qnx-context-track{ height:4px; margin-top:12px; background:#dce6f0; overflow:hidden; } .qnx-context-track span{ display:block; width:82%; height:100%; background:linear-gradient(90deg,#0758d8,#08a8cf,#16b98a); } .qnx-cgpt-answer{ width:82%; margin-top:17px; padding:14px 16px; background:#fff; border-left:3px solid #16b98a; box-shadow:0 8px 20px rgba(17,55,110,.06); } .qnx-answer-head{ display:flex; justify-content:space-between; } .qnx-answer-head span{ color:#16b98a; font-size:8px; font-weight:900; letter-spacing:1.2px; } .qnx-answer-head b{ color:#0758d8; font-size:7px; letter-spacing:1px; } .qnx-answer-content{ margin-top:10px; } .qnx-answer-content i{ display:block; height:5px; margin:5px 0; background:#dce6f0; } .qnx-answer-content i:first-child{ width:91%; } .qnx-answer-content i:nth-child(2){ width:72%; } .qnx-answer-content i:nth-child(3){ width:54%; } .qnx-answer-footer{ margin-top:10px; display:flex; align-items:center; justify-content:space-between; } .qnx-answer-footer span{ color:#7a8798; font-size:7px; font-weight:900; letter-spacing:1px; } .qnx-answer-footer strong{ color:#16b98a; font-size:10px; } .qnx-cgpt-input{ position:absolute; left:20px; right:20px; bottom:17px; height:43px; padding-left:14px; display:flex; align-items:center; border:1px solid #d7e2ee; background:#fff; color:#8a96a7; font-size:10px; } .qnx-cgpt-input b{ width:31px; height:31px; margin-left:auto; margin-right:5px; display:flex; align-items:center; justify-content:center; background:#0758d8; color:#fff; } .qnx-cgpt-signal{ position:absolute; width:7px; height:7px; background:#b7e51c; box-shadow:0 0 0 6px rgba(183,229,28,.08); } .signal-a{ left:18px; top:135px; } .signal-b{ right:18px; top:270px; background:#08a8cf; } .signal-c{ left:30px; bottom:70px; background:#16b98a; } .qnx-cgpt-shift{ padding:90px 5%; background:#fff; } .qnx-cgpt-section-head{ max-width:1380px; margin:auto; display:grid; grid-template-columns:1fr .85fr; gap:90px; align-items:end; } .qnx-cgpt-section-head h2{ margin:15px 0 0; color:#0d1730; font-size:clamp(39px,4.5vw,60px); line-height:1; letter-spacing:-2.5px; } .qnx-cgpt-section-head p{ margin:0; color:#5d6b84; font-size:14px; line-height:1.8; } .qnx-cgpt-flow{ max-width:1380px; margin:48px auto 0; display:grid; grid-template-columns:1fr 38px 1fr 38px 1fr 38px 1fr; align-items:stretch; } .qnx-flow-step{ position:relative; min-height:190px; padding:23px; border:1px solid #dce6f1; background:#f4f8ff; transition:.35s ease; } .qnx-flow-step:hover{ transform:translateY(-5px); border-color:#087ee7; } .qnx-flow-step.active{ background:#eefaff; border-color:#08a8cf; } .qnx-flow-step.final{ background:#0758d8; border-color:#0758d8; } .qnx-flow-step>span{ color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1.5px; } .qnx-flow-step.final>span{ color:#b7e51c; } .qnx-flow-step h3{ margin:13px 0 7px; color:#0d1730; font-size:16px; } .qnx-flow-step.final h3{ color:#fff; } .qnx-flow-step p{ margin:0; color:#5d6b84; font-size:11px; line-height:1.65; } .qnx-flow-step.final p{ color:rgba(255,255,255,.7); } .qnx-flow-step>b{ position:absolute; right:18px; bottom:15px; color:#d1ddeb; font-size:20px; } .qnx-flow-step.final>b{ color:rgba(255,255,255,.3); } .qnx-flow-connector{ align-self:center; height:1px; background:#b9c9dc; position:relative; } .qnx-flow-connector:after{ content:""; position:absolute; right:0; top:-3px; width:6px; height:6px; background:#08a8cf; } .qnx-cgpt-signals{ padding:90px 5%; background:#f4f8ff; } .qnx-signal-layout{ max-width:1380px; margin:auto; display:grid; grid-template-columns:.78fr 1.22fr; gap:70px; } .qnx-signal-intro h2{ margin:15px 0; max-width:560px; color:#0d1730; font-size:clamp(38px,4.4vw,58px); line-height:1.02; letter-spacing:-2.3px; } .qnx-signal-intro>p{ max-width:540px; margin:0; color:#5d6b84; font-size:14px; line-height:1.8; } .qnx-signal-mini{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:28px; } .qnx-signal-mini div{ padding:13px; background:#fff; border:1px solid #dbe5f0; } .qnx-signal-mini strong{ display:block; color:#0758d8; font-size:8px; letter-spacing:1.2px; } .qnx-signal-mini span{ display:block; margin-top:5px; color:#718096; font-size:8px; } .qnx-signal-list{ border-top:1px solid #d6e2ee; } .qnx-signal-item{ min-height:135px; display:grid; grid-template-columns:50px 1fr 145px; gap:22px; align-items:center; border-bottom:1px solid #d6e2ee; transition:.3s ease; } .qnx-signal-item:hover{ padding-left:10px; background:#fff; } .qnx-signal-index{ color:#0758d8; font-size:9px; font-weight:900; } .qnx-signal-text>span{ color:#08a8cf; font-size:8px; font-weight:900; letter-spacing:1.3px; } .qnx-signal-text h3{ margin:7px 0 5px; color:#0d1730; font-size:16px; } .qnx-signal-text p{ max-width:580px; margin:0; color:#5d6b84; font-size:11px; line-height:1.65; } .qnx-signal-meter{ height:4px; background:#d9e4ef; } .qnx-signal-meter i{ display:block; width:78%; height:100%; background:linear-gradient(90deg,#0758d8,#08a8cf); } .qnx-signal-item:nth-child(2) .qnx-signal-meter i{ width:88%; background:linear-gradient(90deg,#08a8cf,#16b98a); } .qnx-signal-item:nth-child(3) .qnx-signal-meter i{ width:71%; background:linear-gradient(90deg,#16b98a,#79c91c); } .qnx-signal-item:nth-child(4) .qnx-signal-meter i{ width:82%; } .qnx-cgpt-map{ padding:90px 5%; background:#062d7a; overflow:hidden; } .qnx-map-head{ max-width:1380px; margin:auto; display:grid; grid-template-columns:1fr .8fr; gap:100px; align-items:end; } .qnx-map-head>span{ color:#7de6ff; } .qnx-map-head h2{ margin:15px 0 0; color:#fff; font-size:clamp(39px,4.5vw,60px); line-height:1; letter-spacing:-2.5px; } .qnx-map-head p{ margin:0; color:rgba(255,255,255,.68); font-size:14px; line-height:1.8; } .qnx-map-system{ position:relative; max-width:1200px; height:500px; margin:35px auto 0; } .qnx-map-core{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:205px; min-height:120px; padding:23px; display:flex; flex-direction:column; justify-content:center; text-align:center; background:#0758d8; box-shadow:0 25px 55px rgba(0,0,0,.2); z-index:5; } .qnx-map-core small{ color:#b7e51c; font-size:8px; font-weight:900; letter-spacing:1.5px; } .qnx-map-core strong{ margin:8px 0 4px; color:#fff; font-size:18px; } .qnx-map-core span{ color:rgba(255,255,255,.65); font-size:8px; } .qnx-map-node{ position:absolute; width:225px; padding:16px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.17); z-index:4; transition:.3s ease; } .qnx-map-node:hover{ background:rgba(8,168,207,.12); border-color:#08a8cf; transform:translateY(-4px); } .qnx-map-node small{ display:block; margin-bottom:7px; color:#08a8cf; font-size:8px; font-weight:900; letter-spacing:1.4px; } .qnx-map-node strong{ color:#fff; font-size:11px; line-height:1.55; } .node-one{ left:0; top:8%; } .node-two{ right:0; top:8%; } .node-three{ left:0; bottom:10%; } .node-four{ right:0; bottom:10%; } .qnx-map-line{ position:absolute; height:1px; background:linear-gradient(90deg,transparent,#08a8cf,#79c91c,transparent); opacity:.65; transform-origin:left center; z-index:2; } .line-one{ width:390px; left:18%; top:38%; transform:rotate(18deg); } .line-two{ width:390px; right:18%; top:38%; transform:rotate(162deg); } .line-three{ width:390px; left:18%; bottom:38%; transform:rotate(-18deg); } .line-four{ width:390px; right:18%; bottom:38%; transform:rotate(198deg); } .qnx-map-dot{ position:absolute; width:7px; height:7px; background:#b7e51c; z-index:6; box-shadow:0 0 0 5px rgba(183,229,28,.08); } .dot-one{ left:28%; top:38%; } .dot-two{ right:28%; top:38%; background:#08a8cf; } .dot-three{ left:28%; bottom:38%; background:#16b98a; } .dot-four{ right:28%; bottom:38%; background:#b7e51c; } .qnx-map-bottom{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); display:flex; align-items:center; gap:14px; padding:10px 18px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); white-space:nowrap; } .qnx-map-bottom span{ color:rgba(255,255,255,.68); font-size:8px; font-weight:900; letter-spacing:1.2px; } .qnx-map-bottom span:nth-of-type(2){ color:#08a8cf; } .qnx-map-bottom span:nth-of-type(3){ color:#16b98a; } .qnx-map-bottom span:nth-of-type(4){ color:#b7e51c; } .qnx-map-bottom b{ color:#08a8cf; font-size:12px; } .qnx-cgpt-work{ padding:90px 5%; background:#fff; } .qnx-work-head{ max-width:1380px; margin:auto; } .qnx-work-head h2{ margin:15px 0 45px; color:#0d1730; font-size:clamp(39px,4.5vw,60px); line-height:1; letter-spacing:-2.5px; } .qnx-work-grid{ max-width:1380px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #dbe5ef; border-left:1px solid #dbe5ef; } .qnx-work-grid article{ position:relative; min-height:235px; padding:24px; border-right:1px solid #dbe5ef; border-bottom:1px solid #dbe5ef; transition:.35s ease; } .qnx-work-grid article:hover{ background:#f4f8ff; } .qnx-work-grid article>span{ color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1.4px; } .qnx-work-grid article h3{ margin:17px 0 9px; color:#0d1730; font-size:17px; } .qnx-work-grid article p{ margin:0; color:#5d6b84; font-size:11px; line-height:1.7; } .qnx-work-grid article>b{ position:absolute; right:20px; bottom:18px; color:#0758d8; font-size:18px; } .qnx-cgpt-cta{ padding:82px 5%; display:grid; grid-template-columns:1fr .85fr; gap:90px; align-items:center; background:linear-gradient(125deg,#062d7a 0%,#0758d8 50%,#08a8cf 100%); overflow:hidden; } .qnx-cta-left{ max-width:680px; margin-left:max(0px,calc((100vw - 1380px)/2)); } .qnx-cta-left>span{ color:#b7e51c; } .qnx-cta-left h2{ margin:15px 0; color:#fff; font-size:clamp(42px,5vw,68px); line-height:.98; letter-spacing:-2.8px; } .qnx-cta-left p{ max-width:570px; margin:0; color:rgba(255,255,255,.72); font-size:14px; line-height:1.8; } .qnx-cta-chat{ max-width:520px; padding:22px; background:#fff; border:1px solid rgba(255,255,255,.35); box-shadow:0 25px 60px rgba(0,30,90,.22); } .qnx-cta-head{ padding-bottom:13px; display:flex; justify-content:space-between; border-bottom:1px solid #e1e8f1; } .qnx-cta-head span{ color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1.5px; } .qnx-cta-head i{ width:7px; height:7px; background:#79c91c; } .qnx-cta-user, .qnx-cta-ai{ max-width:86%; margin-top:17px; padding:13px; } .qnx-cta-user{ margin-left:auto; background:#0758d8; color:#fff; } .qnx-cta-ai{ background:#f4f8ff; border-left:3px solid #08a8cf; } .qnx-cta-user small, .qnx-cta-ai small{ display:block; margin-bottom:5px; font-size:7px; font-weight:900; letter-spacing:1.2px; } .qnx-cta-ai small{ color:#0758d8; } .qnx-cta-user p, .qnx-cta-ai p{ margin:0; font-size:11px; line-height:1.6; } .qnx-cta-button{ margin-top:18px; padding:11px; display:flex; align-items:center; justify-content:space-between; text-decoration:none; background:#0d1730; color:#fff; font-size:10px; font-weight:800; } .qnx-cta-button b{ width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:#08a8cf; transition:.3s ease; } .qnx-cta-button:hover{ background:#0758d8; } .qnx-cta-button:hover b{ transform:translateX(4px); background:#16b98a; } @keyframes qnxThink{ 0%,100%{ transform:scaleY(.55); opacity:.4; } 50%{ transform:scaleY(1.3); opacity:1; } } @media(max-width:1150px){ .qnx-cgpt-intro-inner{ grid-template-columns:1fr; } .qnx-cgpt-intro-copy{ max-width:750px; } .qnx-cgpt-interface{ width:100%; } .qnx-cgpt-section-head, .qnx-signal-layout, .qnx-map-head, .qnx-cgpt-cta{ grid-template-columns:1fr; gap:40px; } .qnx-cgpt-flow{ grid-template-columns:1fr 30px 1fr; gap:15px; } .qnx-flow-step.final{ grid-column:3; } .qnx-flow-connector:nth-of-type(4), .qnx-flow-connector:nth-of-type(6){ display:none; } .qnx-work-grid{ grid-template-columns:repeat(2,1fr); } .qnx-cta-left{ margin:0; } .qnx-cta-chat{ max-width:none; } } @media(max-width:760px){ .qnx-cgpt-intro, .qnx-cgpt-shift, .qnx-cgpt-signals, .qnx-cgpt-map, .qnx-cgpt-work, .qnx-cgpt-cta{ padding:65px 5%; } .qnx-cgpt-intro-copy h2, .qnx-cgpt-section-head h2, .qnx-signal-intro h2, .qnx-map-head h2, .qnx-work-head h2, .qnx-cta-left h2{ letter-spacing:-1.8px; } .qnx-cgpt-interface{ height:535px; } .qnx-cgpt-screen{ padding:18px; } .qnx-cgpt-question{ width:88%; } .qnx-cgpt-thinking{ width:92%; } .qnx-cgpt-context{ width:100%; } .qnx-context-grid{ grid-template-columns:repeat(2,1fr); } .qnx-cgpt-answer{ width:100%; } .qnx-cgpt-flow{ grid-template-columns:1fr; } .qnx-flow-step.final{ grid-column:auto; } .qnx-flow-connector{ display:none!important; } .qnx-flow-step{ min-height:155px; } .qnx-signal-mini{ grid-template-columns:1fr; } .qnx-signal-item{ grid-template-columns:38px 1fr; gap:13px; padding:18px 0; } .qnx-signal-meter{ grid-column:2; } .qnx-map-system{ height:620px; } .qnx-map-core{ width:155px; min-height:105px; padding:18px 12px; } .qnx-map-node{ width:145px; padding:12px; } .node-one{ left:0; top:5%; } .node-two{ right:0; top:5%; } .node-three{ left:0; bottom:12%; } .node-four{ right:0; bottom:12%; } .qnx-map-line, .qnx-map-dot{ display:none; } .qnx-map-bottom{ bottom:0; gap:7px; padding:9px 10px; } .qnx-map-bottom span{ font-size:6px; } .qnx-map-bottom b{ font-size:9px; } .qnx-work-grid{ grid-template-columns:1fr; } .qnx-work-grid article{ min-height:190px; } .qnx-cgpt-cta{ gap:35px; } .qnx-cta-chat{ padding:17px; } } /* ========================================================= QNIX DIGITAL — GEMINI SEO ========================================================= */ .qnx-gemini-intro{ padding:82px 5%; background:#f4f8ff; overflow:hidden; } .qnx-gemini-intro-inner{ max-width:1380px; margin:auto; display:grid; grid-template-columns:.78fr 1.22fr; gap:65px; align-items:center; } .qnx-gemini-label, .qnx-gemini-section-head span, .qnx-engine-header span, .qnx-multi-head span, .qnx-optimise-head span, .qnx-gemini-cta-copy span{ display:block; color:#0758d8; font-size:10px; font-weight:900; letter-spacing:2px; } .qnx-gemini-copy h2{ margin:15px 0 20px; color:#0d1730; font-size:clamp(43px,5vw,69px); line-height:.98; letter-spacing:-3px; } .qnx-gemini-copy p{ max-width:580px; margin:0; color:#5d6b84; font-size:15px; line-height:1.8; } .qnx-gemini-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:26px; } .qnx-gemini-tags span{ padding:8px 10px; background:#fff; border:1px solid #d8e3f0; color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1.2px; } .qnx-gemini-visual{ position:relative; min-width:0; min-height:530px; padding:22px; background:#fff; border:1px solid #d7e2ef; box-shadow:0 28px 70px rgba(17,55,110,.13); overflow:hidden; } .qnx-gemini-visual:before{ content:""; position:absolute; inset:0; background: linear-gradient(rgba(7,88,216,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.035) 1px,transparent 1px); background-size:30px 30px; } .qnx-gemini-visual-top{ position:relative; z-index:2; height:36px; display:flex; justify-content:space-between; align-items:center; } .qnx-gemini-visual-top span{ color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1.5px; } .qnx-gemini-visual-top b{ padding:5px 8px; background:#eaf8e6; color:#16b98a; font-size:7px; letter-spacing:1px; } .qnx-gemini-input{ position:relative; z-index:3; margin-top:22px; padding:16px; display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #d8e3ee; box-shadow:0 10px 25px rgba(17,55,110,.06); } .qnx-gemini-input-icon{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0758d8,#08a8cf); color:#fff; font-weight:900; } .qnx-gemini-input small{ display:block; color:#0758d8; font-size:7px; font-weight:900; letter-spacing:1.3px; } .qnx-gemini-input strong{ display:block; margin-top:5px; color:#0d1730; font-size:12px; } .qnx-gemini-scan{ position:relative; z-index:2; height:220px; margin-top:18px; border:1px solid #dbe6f1; background:rgba(244,248,255,.65); overflow:hidden; } .qnx-gemini-scan:before, .qnx-gemini-scan:after{ content:""; position:absolute; background:#d6e2ef; } .qnx-gemini-scan:before{ left:50%; top:0; bottom:0; width:1px; } .qnx-gemini-scan:after{ top:50%; left:0; right:0; height:1px; } .qnx-scan-line{ position:absolute; left:0; right:0; top:50%; height:2px; background:linear-gradient(90deg,transparent,#08a8cf,#79c91c,transparent); z-index:4; animation:qnxGeminiScan 3.5s ease-in-out infinite; } .qnx-scan-block{ position:absolute; z-index:5; padding:11px 14px; background:#fff; border:1px solid #d6e2ee; box-shadow:0 8px 20px rgba(17,55,110,.06); } .qnx-scan-block span{ display:block; margin-bottom:5px; color:#08a8cf; font-size:7px; font-weight:900; letter-spacing:1.2px; } .qnx-scan-block b{ color:#0d1730; font-size:10px; } .block-a{left:20px;top:20px} .block-b{right:20px;top:20px} .block-c{left:20px;bottom:20px} .block-d{right:20px;bottom:20px} .qnx-scan-data{ position:absolute; z-index:3; color:#0758d8; font-size:9px; font-weight:900; } .data-one{ left:47%; top:26%; } .data-two{ left:47%; bottom:24%; color:#16b98a; } .data-three{ right:47%; top:48%; color:#79c91c; } .qnx-gemini-result{ position:relative; z-index:5; margin-top:18px; padding:16px; background:#fff; border:1px solid #d8e3ef; } .qnx-result-title{ display:flex; align-items:center; justify-content:space-between; } .qnx-result-title span{ color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1.3px; } .qnx-result-title i{ width:7px; height:7px; background:#79c91c; } .qnx-result-columns{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; } .qnx-result-columns div{ padding:10px; background:#f4f8ff; } .qnx-result-columns small{ display:block; color:#7b889a; font-size:7px; font-weight:900; letter-spacing:1px; } .qnx-result-columns strong{ display:block; margin-top:5px; color:#0d1730; font-size:10px; } .qnx-result-progress{ height:4px; margin-top:12px; background:#dce5ef; } .qnx-result-progress span{ display:block; width:87%; height:100%; background:linear-gradient(90deg,#0758d8,#08a8cf,#16b98a); } .qnx-gemini-orbit{ position:absolute; border:1px solid rgba(8,168,207,.18); border-radius:50%; pointer-events:none; } .orbit-one{ width:370px; height:370px; right:-210px; top:90px; } .orbit-two{ width:240px; height:240px; left:-150px; bottom:-80px; border-color:rgba(121,201,28,.16); } .qnx-gemini-context{ padding:90px 5%; background:#fff; } .qnx-gemini-section-head{ max-width:1380px; margin:auto; display:grid; grid-template-columns:1fr .8fr; gap:100px; align-items:end; } .qnx-gemini-section-head h2{ margin:15px 0 0; color:#0d1730; font-size:clamp(40px,4.5vw,60px); line-height:1; letter-spacing:-2.5px; } .qnx-gemini-section-head p{ margin:0; color:#5d6b84; font-size:14px; line-height:1.8; } .qnx-context-stack{ max-width:1380px; margin:48px auto 0; } .qnx-context-layer{ min-height:105px; display:grid; grid-template-columns:70px 1fr 310px 30px; gap:25px; align-items:center; padding:0 25px; border-top:1px solid #d9e4ef; transition:.35s ease; } .qnx-context-layer:last-child{ border-bottom:1px solid #d9e4ef; } .qnx-context-layer:hover{ padding-left:35px; background:#f4f8ff; } .qnx-layer-marker{ color:#0758d8; font-size:10px; font-weight:900; } .qnx-layer-content span{ color:#08a8cf; font-size:8px; font-weight:900; letter-spacing:1.4px; } .qnx-layer-content h3{ margin:6px 0 0; color:#0d1730; font-size:16px; } .qnx-context-layer p{ margin:0; color:#5d6b84; font-size:11px; line-height:1.6; } .qnx-context-layer>b{ color:#0758d8; font-size:18px; } .qnx-gemini-engine{ padding:90px 5%; background:#062d7a; overflow:hidden; } .qnx-engine-header{ max-width:1380px; margin:auto; } .qnx-engine-header span{ color:#7ee7ff; } .qnx-engine-header h2{ margin:15px 0 50px; color:#fff; font-size:clamp(40px,4.5vw,60px); line-height:1; letter-spacing:-2.5px; } .qnx-engine-system{ max-width:1180px; margin:auto; display:grid; grid-template-columns:1fr .9fr 1fr; gap:45px; align-items:center; } .qnx-engine-column{ display:flex; flex-direction:column; gap:15px; } .qnx-engine-item{ position:relative; padding:19px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.13); transition:.35s ease; } .qnx-engine-item:hover{ background:rgba(8,168,207,.11); border-color:#08a8cf; transform:translateX(5px); } .qnx-engine-item span{ display:block; color:#08a8cf; font-size:7px; font-weight:900; letter-spacing:1.3px; } .qnx-engine-item strong{ display:block; margin-top:7px; color:#fff; font-size:14px; } .qnx-engine-item small{ display:block; margin-top:4px; color:rgba(255,255,255,.5); font-size:9px; } .qnx-engine-middle{ position:relative; min-height:350px; display:flex; align-items:center; justify-content:center; } .qnx-engine-core{ position:relative; z-index:3; width:185px; height:185px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:linear-gradient(145deg,#0758d8,#087ee7); box-shadow:0 20px 55px rgba(0,0,0,.2); transform:rotate(45deg); } .qnx-engine-core>*{ transform:rotate(-45deg); } .qnx-engine-core small{ color:#b7e51c; font-size:8px; font-weight:900; letter-spacing:1.4px; } .qnx-engine-core strong{ margin:8px 0; color:#fff; font-size:16px; line-height:1.05; } .qnx-engine-core span{ color:rgba(255,255,255,.62); font-size:7px; } .qnx-engine-line{ position:absolute; left:-15px; right:-15px; height:1px; background:linear-gradient(90deg,transparent,#08a8cf,transparent); z-index:1; } .engine-line-one{top:28%} .engine-line-two{top:50%} .engine-line-three{top:72%} .qnx-gemini-multimodal{ padding:90px 5%; background:#f4f8ff; } .qnx-multi-head{ max-width:1380px; margin:auto; } .qnx-multi-head h2{ margin:15px 0; color:#0d1730; font-size:clamp(40px,4.5vw,60px); line-height:1; letter-spacing:-2.5px; } .qnx-multi-head p{ max-width:650px; margin:0; color:#5d6b84; font-size:14px; line-height:1.8; } .qnx-multi-stage{ max-width:1380px; margin:48px auto 0; display:grid; grid-template-columns:1fr 100px .9fr; gap:30px; align-items:center; } .qnx-multi-source{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .qnx-source-card{ min-height:205px; padding:18px; background:#fff; border:1px solid #d9e4ef; transition:.35s ease; } .qnx-source-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(17,55,110,.09); } .qnx-source-card>span{ color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1.3px; } .qnx-source-card>strong{ display:block; margin-top:14px; color:#0d1730; font-size:13px; } .source-text i{ display:block; width:90%; height:5px; margin-top:16px; background:#dbe5ef; } .source-text i:nth-child(3){ width:70%; } .source-text i:nth-child(4){ width:52%; } .qnx-image-pattern{ position:relative; height:82px; margin-top:18px; border:1px solid #dce6f0; background:#eef7ff; overflow:hidden; } .qnx-image-pattern b{ position:absolute; width:35px; height:35px; border:1px solid #08a8cf; transform:rotate(45deg); } .qnx-image-pattern b:first-child{ left:18px; top:20px; } .qnx-image-pattern b:nth-child(2){ left:60px; top:30px; border-color:#16b98a; } .qnx-image-pattern b:nth-child(3){ right:15px; top:12px; border-color:#79c91c; } .qnx-entity-tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:18px; } .qnx-entity-tags em{ padding:6px 7px; background:#f4f8ff; color:#0758d8; font-size:7px; font-style:normal; font-weight:900; } .qnx-multi-connector{ position:relative; height:150px; } .qnx-multi-connector:before, .qnx-multi-connector:after{ content:""; position:absolute; left:50%; width:1px; height:48%; background:linear-gradient(#0758d8,#08a8cf); } .qnx-multi-connector:before{ top:0; } .qnx-multi-connector:after{ bottom:0; background:linear-gradient(#16b98a,#79c91c); } .qnx-multi-connector span{ position:absolute; left:50%; width:7px; height:7px; background:#08a8cf; transform:translateX(-50%); } .qnx-multi-connector span:first-child{ top:18%; } .qnx-multi-connector span:nth-child(2){ top:47%; background:#79c91c; } .qnx-multi-connector span:last-child{ top:76%; background:#16b98a; } .qnx-multi-result{ padding:30px; min-height:265px; background:#0758d8; position:relative; overflow:hidden; } .qnx-multi-result:after{ content:""; position:absolute; width:240px; height:240px; right:-130px; bottom:-130px; border:1px solid rgba(255,255,255,.18); transform:rotate(45deg); } .qnx-multi-result>small{ color:#b7e51c; font-size:8px; font-weight:900; letter-spacing:1.5px; } .qnx-multi-result h3{ margin:16px 0 12px; color:#fff; font-size:27px; line-height:1.08; } .qnx-multi-result p{ max-width:430px; margin:0; color:rgba(255,255,255,.7); font-size:11px; line-height:1.7; } .qnx-multi-status{ display:flex; flex-wrap:wrap; gap:5px; margin-top:22px; } .qnx-multi-status span{ padding:6px 7px; background:rgba(255,255,255,.1); color:#fff; font-size:7px; font-weight:900; letter-spacing:1px; } .qnx-gemini-optimise{ padding:90px 5%; background:#fff; } .qnx-optimise-head{ max-width:1380px; margin:auto; } .qnx-optimise-head h2{ margin:15px 0 45px; color:#0d1730; font-size:clamp(40px,4.5vw,60px); line-height:1; letter-spacing:-2.5px; } .qnx-optimise-list{ max-width:1380px; margin:auto; border-top:1px solid #dbe5ef; } .qnx-optimise-list article{ min-height:115px; display:grid; grid-template-columns:55px 1fr 30px; gap:25px; align-items:center; border-bottom:1px solid #dbe5ef; transition:.35s ease; } .qnx-optimise-list article:hover{ padding-left:12px; background:#f4f8ff; } .qnx-opt-number{ color:#0758d8; font-size:10px; font-weight:900; } .qnx-optimise-list article span{ color:#08a8cf; font-size:8px; font-weight:900; letter-spacing:1.3px; } .qnx-optimise-list h3{ margin:6px 0; color:#0d1730; font-size:16px; } .qnx-optimise-list p{ margin:0; color:#5d6b84; font-size:11px; line-height:1.6; } .qnx-optimise-list article>b{ color:#0758d8; font-size:18px; } .qnx-gemini-cta{ padding:82px 5%; background:linear-gradient(125deg,#062d7a,#0758d8 55%,#08a8cf); overflow:hidden; } .qnx-gemini-cta-inner{ max-width:1380px; margin:auto; display:grid; grid-template-columns:1fr .8fr; gap:90px; align-items:center; } .qnx-gemini-cta-copy{ max-width:700px; } .qnx-gemini-cta-copy span{ color:#b7e51c; } .qnx-gemini-cta-copy h2{ margin:15px 0; color:#fff; font-size:clamp(43px,5vw,68px); line-height:.98; letter-spacing:-2.8px; } .qnx-gemini-cta-copy p{ max-width:570px; margin:0; color:rgba(255,255,255,.72); font-size:14px; line-height:1.8; } .qnx-gemini-cta-panel{ padding:23px; background:#fff; box-shadow:0 25px 60px rgba(0,30,90,.22); } .qnx-cta-panel-top{ display:flex; align-items:center; justify-content:space-between; padding-bottom:13px; border-bottom:1px solid #e0e7ef; } .qnx-cta-panel-top span{ color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1.4px; } .qnx-cta-panel-top b{ color:#08a8cf; font-size:8px; letter-spacing:1px; } .qnx-cta-question{ margin-top:18px; padding:16px; background:#f4f8ff; border-left:3px solid #08a8cf; } .qnx-cta-question small{ display:block; color:#0758d8; font-size:7px; font-weight:900; letter-spacing:1.2px; } .qnx-cta-question strong{ display:block; margin-top:7px; color:#0d1730; font-size:13px; line-height:1.5; } .qnx-cta-signals{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:10px; } .qnx-cta-signals div{ padding:11px; background:#fff; border:1px solid #dce5ef; } .qnx-cta-signals span{ display:block; color:#7c899b; font-size:7px; font-weight:900; letter-spacing:1px; } .qnx-cta-signals b{ display:block; margin-top:5px; color:#16b98a; font-size:9px; } .qnx-gemini-button{ margin-top:16px; padding:11px; display:flex; align-items:center; justify-content:space-between; text-decoration:none; background:#0d1730; color:#fff; font-size:10px; font-weight:800; transition:.3s ease; } .qnx-gemini-button b{ width:29px; height:29px; display:flex; align-items:center; justify-content:center; background:#08a8cf; transition:.3s ease; } .qnx-gemini-button:hover{ background:#0758d8; } .qnx-gemini-button:hover b{ transform:translateX(5px); background:#16b98a; } @keyframes qnxGeminiScan{ 0%,100%{ transform:translateY(-100px); opacity:.35; } 50%{ transform:translateY(100px); opacity:1; } } @media(max-width:1150px){ .qnx-gemini-intro-inner, .qnx-gemini-section-head, .qnx-engine-system, .qnx-gemini-cta-inner{ grid-template-columns:1fr; } .qnx-gemini-copy{ max-width:760px; } .qnx-engine-middle{ min-height:250px; } .qnx-multi-stage{ grid-template-columns:1fr; } .qnx-multi-connector{ height:60px; width:100%; } .qnx-multi-connector:before, .qnx-multi-connector:after{ top:50%; bottom:auto; left:0; width:50%; height:1px; } .qnx-multi-connector:after{ left:50%; } .qnx-multi-connector span{ top:50%!important; left:20%; transform:translate(-50%,-50%); } .qnx-multi-connector span:nth-child(2){ left:50%; } .qnx-multi-connector span:last-child{ left:80%; } .qnx-gemini-cta-copy{ max-width:750px; } } @media(max-width:720px){ .qnx-gemini-intro, .qnx-gemini-context, .qnx-gemini-engine, .qnx-gemini-multimodal, .qnx-gemini-optimise, .qnx-gemini-cta{ padding:65px 5%; } .qnx-gemini-copy h2, .qnx-gemini-section-head h2, .qnx-engine-header h2, .qnx-multi-head h2, .qnx-optimise-head h2, .qnx-gemini-cta-copy h2{ letter-spacing:-1.8px; } .qnx-gemini-visual{ min-height:520px; padding:17px; } .qnx-gemini-scan{ height:210px; } .qnx-scan-block{ padding:9px; } .qnx-scan-block b{ font-size:9px; } .qnx-result-columns{ grid-template-columns:1fr; } .qnx-context-layer{ grid-template-columns:35px 1fr 25px; gap:12px; padding:18px 0; } .qnx-context-layer p{ display:none; } .qnx-engine-core{ width:145px; height:145px; } .qnx-engine-item{ padding:15px; } .qnx-multi-source{ grid-template-columns:1fr; } .qnx-source-card{ min-height:165px; } .qnx-multi-result{ min-height:230px; } .qnx-optimise-list article{ grid-template-columns:35px 1fr 25px; gap:12px; min-height:130px; } .qnx-cta-signals{ grid-template-columns:1fr; } .qnx-gemini-orbit{ display:none; } } /* ========================================================= QNIX DIGITAL — GOOGLE AI OVERVIEW OPTIMIZATION ========================================================= */ .qnx-aio-intro, .qnx-aio-shift, .qnx-aio-map, .qnx-aio-work, .qnx-aio-insight, .qnx-aio-cta{ position:relative; overflow:hidden; font-family:inherit; } .qnx-aio-intro{ padding:95px 6%; background:#fff; } .qnx-aio-intro-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center; } .qnx-aio-eyebrow, .qnx-aio-mini, .qnx-aio-section-head>span, .qnx-aio-work-head>span, .qnx-aio-insight-title>span, .qnx-aio-cta-copy>span{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:2px; color:#0758d8; } .qnx-aio-intro-copy h2{ margin:18px 0 20px; font-size:clamp(40px,4.2vw,67px); line-height:1.02; letter-spacing:-2.5px; color:#0d1730; } .qnx-aio-intro-copy h2 strong, .qnx-aio-section-head h2 strong, .qnx-aio-map-copy h2 strong, .qnx-aio-work-head h2 strong, .qnx-aio-insight-title h2 strong, .qnx-aio-cta-copy h2 strong{ color:#0758d8; } .qnx-aio-intro-copy p{ max-width:610px; margin:0 0 30px; color:#5d6b84; font-size:16px; line-height:1.8; } .qnx-aio-intro-btn, .qnx-aio-cta-copy a{ display:inline-flex; align-items:center; gap:18px; padding:15px 18px 15px 23px; background:#0758d8; color:#fff; text-decoration:none; font-size:13px; font-weight:800; transition:.3s ease; } .qnx-aio-intro-btn b, .qnx-aio-cta-copy a b{ width:34px; height:34px; display:grid; place-items:center; background:#b7e51c; color:#0d1730; font-size:17px; } .qnx-aio-intro-btn:hover, .qnx-aio-cta-copy a:hover{ transform:translateY(-3px); background:#062d7a; } .qnx-aio-search-stage{ position:relative; min-height:475px; padding:35px; background: linear-gradient(135deg,#f4f8ff 0%,#fff 55%,#eefaff 100%); border:1px solid #dce7f4; } .qnx-aio-search-stage:before{ content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(7,88,216,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.055) 1px,transparent 1px); background-size:34px 34px; pointer-events:none; } .qnx-aio-searchbar{ position:relative; z-index:2; height:58px; padding:0 18px; display:flex; align-items:center; gap:13px; background:#fff; border:1px solid #dbe5f1; box-shadow:0 12px 35px rgba(17,55,110,.08); color:#5d6b84; font-size:14px; } .qnx-aio-search-icon{ font-size:28px; color:#0758d8; line-height:0; } .qnx-aio-searchbar i{ margin-left:auto; font-style:normal; font-size:19px; } .qnx-aio-overview{ position:relative; z-index:2; width:88%; margin:24px auto 0; padding:28px; background:#fff; border:1px solid #dce7f4; box-shadow:0 25px 55px rgba(17,55,110,.11); } .qnx-aio-overview-head{ display:flex; justify-content:space-between; align-items:center; } .qnx-aio-overview-head small, .qnx-aio-source-line span, .qnx-aio-query span, .qnx-aio-answer span{ display:block; font-size:9px; font-weight:800; letter-spacing:1.7px; color:#5d6b84; } .qnx-aio-overview-head strong{ display:block; margin-top:6px; font-size:17px; color:#0d1730; } .qnx-aio-spark{ color:#087ee7; font-size:27px; } .qnx-aio-thinking{ margin:23px 0 18px; display:flex; align-items:center; gap:6px; } .qnx-aio-thinking span{ width:8px; height:8px; border-radius:50%; background:#087ee7; animation:qnxAioPulse 1.2s infinite ease-in-out; } .qnx-aio-thinking span:nth-child(2){animation-delay:.15s} .qnx-aio-thinking span:nth-child(3){animation-delay:.3s} .qnx-aio-thinking em{ margin-left:8px; color:#5d6b84; font-size:11px; font-style:normal; } .qnx-aio-overview p{ margin:0; color:#5d6b84; font-size:13px; line-height:1.65; } .qnx-aio-source-line{ display:flex; align-items:center; gap:9px; margin-top:24px; } .qnx-aio-source-line b{ width:26px; height:7px; border-radius:8px; background:#e3eaf4; } .qnx-aio-result-lines{ position:absolute; right:28px; bottom:48px; width:140px; } .qnx-aio-result-lines span{ display:block; height:8px; margin-top:9px; background:#dce7f4; } .qnx-aio-result-lines span:nth-child(2){width:75%} .qnx-aio-result-lines span:nth-child(3){width:88%} .qnx-aio-signal{ position:absolute; z-index:4; left:28px; bottom:30px; padding:13px 17px; background:#062d7a; color:#fff; box-shadow:0 18px 40px rgba(6,45,122,.22); } .qnx-aio-signal i{ display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#b7e51c; } .qnx-aio-signal strong{ font-size:11px; letter-spacing:1px; } .qnx-aio-signal span{ display:block; margin-top:5px; font-size:10px; color:#dbe8ff; } @keyframes qnxAioPulse{ 0%,100%{opacity:.35;transform:scale(.8)} 50%{opacity:1;transform:scale(1.15)} } .qnx-aio-shift{ padding:90px 6%; background:#f4f8ff; } .qnx-aio-section-head, .qnx-aio-work-head{ max-width:1280px; margin:0 auto 45px; } .qnx-aio-section-head h2, .qnx-aio-work-head h2{ margin:14px 0 0; font-size:clamp(34px,4vw,56px); line-height:1.05; letter-spacing:-2px; color:#0d1730; } .qnx-aio-shift-track{ max-width:1280px; margin:auto; display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:20px; } .qnx-aio-shift-item{ min-height:215px; padding:30px; background:#fff; border-top:3px solid #0758d8; box-shadow:0 14px 40px rgba(17,55,110,.07); transition:.35s ease; } .qnx-aio-shift-item:hover{ transform:translateY(-6px); box-shadow:0 22px 50px rgba(7,88,216,.12); } .qnx-aio-shift-number{ margin-bottom:25px; font-size:13px; font-weight:900; color:#087ee7; } .qnx-aio-shift-item small{ font-size:10px; letter-spacing:1.5px; font-weight:800; color:#5d6b84; } .qnx-aio-shift-item h3{ margin:7px 0 9px; font-size:21px; color:#0d1730; } .qnx-aio-shift-item p{ margin:0; color:#5d6b84; font-size:13px; line-height:1.7; } .qnx-aio-shift-arrow{ font-size:27px; color:#08a8cf; } .qnx-aio-map{ padding:100px 6%; background:#fff; } .qnx-aio-map-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:.7fr 1.3fr; gap:75px; align-items:center; } .qnx-aio-map-copy h2{ margin:15px 0 18px; font-size:clamp(36px,4vw,56px); line-height:1.05; letter-spacing:-2px; color:#0d1730; } .qnx-aio-map-copy p{ margin:0; color:#5d6b84; line-height:1.8; font-size:15px; } .qnx-aio-signal-map{ display:grid; grid-template-columns:1fr 70px 1fr 70px 1fr; align-items:center; min-height:360px; padding:30px; background:#f4f8ff; border:1px solid #dce7f4; } .qnx-aio-map-column{ display:flex; flex-direction:column; gap:10px; } .qnx-aio-map-column>span{ margin-bottom:10px; font-size:10px; font-weight:900; letter-spacing:1.5px; color:#5d6b84; } .qnx-aio-map-column div{ padding:16px 17px; background:#fff; border-left:3px solid #0758d8; color:#0d1730; font-size:13px; font-weight:800; box-shadow:0 8px 25px rgba(17,55,110,.06); } .qnx-aio-map-middle div{ border-left-color:#08a8cf; } .qnx-aio-map-final div{ border-left-color:#79c91c; } .qnx-aio-connector{ position:relative; height:170px; } .qnx-aio-connector:before{ content:""; position:absolute; left:50%; top:10px; bottom:10px; border-left:1px dashed #9bb5d8; } .qnx-aio-connector i{ position:absolute; left:calc(50% - 4px); width:8px; height:8px; border-radius:50%; background:#087ee7; animation:qnxAioFlow 2.2s infinite ease-in-out; } .qnx-aio-connector i:nth-child(1){top:20px} .qnx-aio-connector i:nth-child(2){top:80px;animation-delay:.4s} .qnx-aio-connector i:nth-child(3){top:140px;animation-delay:.8s} @keyframes qnxAioFlow{ 0%,100%{transform:translateY(0);opacity:.35} 50%{transform:translateY(18px);opacity:1} } .qnx-aio-work{ padding:90px 6%; background:#f4f8ff; } .qnx-aio-work-list{ max-width:1280px; margin:auto; border-top:1px solid #d7e2ef; } .qnx-aio-work-list article{ display:grid; grid-template-columns:70px 1fr 35px; gap:25px; align-items:center; padding:27px 8px; border-bottom:1px solid #d7e2ef; transition:.3s ease; } .qnx-aio-work-list article:hover{ padding-left:20px; background:#fff; } .qnx-aio-work-mark{ width:42px; height:42px; display:grid; place-items:center; border:1px solid #b9d0eb; color:#0758d8; font-size:12px; font-weight:900; } .qnx-aio-work-list h3{ margin:0 0 5px; color:#0d1730; font-size:19px; } .qnx-aio-work-list p{ margin:0; max-width:760px; color:#5d6b84; font-size:13px; line-height:1.7; } .qnx-aio-work-list article>span{ color:#087ee7; font-size:20px; } .qnx-aio-insight{ padding:100px 6%; background:#062d7a; color:#fff; } .qnx-aio-insight-grid{ max-width:1280px; margin:auto; display:grid; grid-template-columns:.65fr 1.35fr; gap:70px; align-items:center; } .qnx-aio-insight-title>span{ color:#b7e51c; } .qnx-aio-insight-title h2{ margin:15px 0 0; font-size:clamp(38px,4vw,57px); line-height:1.04; letter-spacing:-2px; } .qnx-aio-insight-title h2 strong{ color:#b7e51c; } .qnx-aio-insight-panel{ padding:28px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14); } .qnx-aio-query{ padding-bottom:25px; border-bottom:1px solid rgba(255,255,255,.13); } .qnx-aio-query span, .qnx-aio-answer span{ color:#8fc7ff; } .qnx-aio-query strong{ display:block; margin-top:9px; font-size:20px; line-height:1.45; } .qnx-aio-analysis{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:24px 0; } .qnx-aio-analysis div{ padding:18px; background:rgba(255,255,255,.06); border-left:2px solid #087ee7; } .qnx-aio-analysis small{ display:block; margin-bottom:8px; font-size:9px; letter-spacing:1.4px; color:#8fc7ff; } .qnx-aio-analysis strong{ font-size:13px; } .qnx-aio-answer{ padding-top:21px; } .qnx-aio-answer-line{ height:9px; margin-top:11px; background:linear-gradient(90deg,#087ee7,#08a8cf); } .qnx-aio-answer-line.short{ width:68%; } .qnx-aio-cta{ padding:95px 6%; background: radial-gradient(circle at 15% 30%,rgba(8,168,207,.22),transparent 28%), radial-gradient(circle at 88% 70%,rgba(121,201,28,.13),transparent 22%), linear-gradient(115deg,#062d7a 0%,#0758d8 55%,#087ee7 100%); } .qnx-aio-cta-grid{ position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(90deg,transparent,black 25%,black 75%,transparent); } .qnx-aio-cta-inner{ position:relative; z-index:2; max-width:1180px; margin:auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:75px; align-items:center; } .qnx-aio-cta-visual{ display:flex; justify-content:center; } .qnx-aio-cta-window{ width:min(100%,430px); padding:20px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(8px); transform:rotate(-3deg); box-shadow:0 30px 70px rgba(0,0,0,.18); } .qnx-aio-cta-window-top{ display:flex; gap:6px; margin-bottom:22px; } .qnx-aio-cta-window-top span{ width:7px; height:7px; border-radius:50%; background:#b7e51c; } .qnx-aio-cta-search{ display:flex; align-items:center; gap:13px; padding:17px; background:#fff; color:#5d6b84; } .qnx-aio-cta-search span{ font-size:25px; color:#0758d8; } .qnx-aio-cta-search b{ font-size:12px; } .qnx-aio-cta-scan{ position:relative; margin-top:15px; padding:30px 20px; background:#062d7a; overflow:hidden; } .qnx-aio-cta-scan i{ display:block; height:8px; width:85%; margin-bottom:12px; background:#087ee7; } .qnx-aio-cta-scan i:nth-child(2){width:68%;background:#08a8cf} .qnx-aio-cta-scan i:nth-child(3){width:78%;background:#79c91c} .qnx-aio-cta-scan strong{ display:block; margin-top:23px; font-size:10px; letter-spacing:2px; color:#fff; } .qnx-aio-cta-copy>span{ color:#b7e51c; } .qnx-aio-cta-copy h2{ margin:15px 0 18px; color:#fff; font-size:clamp(40px,4.4vw,64px); line-height:1.03; letter-spacing:-2.5px; } .qnx-aio-cta-copy p{ max-width:600px; margin:0 0 28px; color:#dce9ff; font-size:15px; line-height:1.75; } .qnx-aio-cta-copy a{ background:#fff; color:#062d7a; } .qnx-aio-cta-copy a b{ background:#b7e51c; } @media(max-width:1050px){ .qnx-aio-intro-inner, .qnx-aio-map-inner, .qnx-aio-insight-grid, .qnx-aio-cta-inner{ grid-template-columns:1fr; } .qnx-aio-intro-copy{ max-width:760px; } .qnx-aio-shift-track{ grid-template-columns:1fr; } .qnx-aio-shift-arrow{ transform:rotate(90deg); text-align:center; } .qnx-aio-signal-map{ grid-template-columns:1fr; gap:20px; } .qnx-aio-connector{ height:50px; } .qnx-aio-connector:before{ left:10px; right:10px; top:50%; bottom:auto; border-left:0; border-top:1px dashed #9bb5d8; } .qnx-aio-connector i{ top:calc(50% - 4px); left:auto; animation-name:qnxAioFlowHorizontal; } .qnx-aio-connector i:nth-child(1){left:20%} .qnx-aio-connector i:nth-child(2){left:50%} .qnx-aio-connector i:nth-child(3){left:80%} .qnx-aio-cta-visual{ order:2; } } @keyframes qnxAioFlowHorizontal{ 0%,100%{transform:translateX(0);opacity:.35} 50%{transform:translateX(15px);opacity:1} } @media(max-width:700px){ .qnx-aio-intro, .qnx-aio-shift, .qnx-aio-map, .qnx-aio-work, .qnx-aio-insight, .qnx-aio-cta{ padding:65px 20px; } .qnx-aio-intro-inner{ gap:45px; } .qnx-aio-search-stage{ min-height:410px; padding:20px; } .qnx-aio-overview{ width:100%; padding:20px; } .qnx-aio-result-lines{ display:none; } .qnx-aio-signal{ left:20px; bottom:20px; } .qnx-aio-analysis{ grid-template-columns:1fr; } .qnx-aio-work-list article{ grid-template-columns:48px 1fr; gap:15px; } .qnx-aio-work-list article>span{ display:none; } .qnx-aio-cta-window{ transform:none; } } /* ========================================================= QNIX DIGITAL — AI CONTENT OPTIMIZATION ========================================================= */ .qnx-aic-intro, .qnx-aic-problem, .qnx-aic-flow, .qnx-aic-services, .qnx-aic-lab, .qnx-aic-cta{ position:relative; overflow:hidden; font-family:inherit; } .qnx-aic-intro{ padding:95px 6%; background:#fff; } .qnx-aic-intro-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:.78fr 1.22fr; gap:70px; align-items:center; } .qnx-aic-eyebrow, .qnx-aic-problem-title>span, .qnx-aic-flow-head>span, .qnx-aic-services-intro>span, .qnx-aic-lab-copy>span, .qnx-aic-cta-copy>span{ display:inline-block; font-size:11px; font-weight:900; letter-spacing:2px; color:#0758d8; } .qnx-aic-intro-copy h2{ margin:18px 0 21px; color:#0d1730; font-size:clamp(40px,4.3vw,66px); line-height:1.02; letter-spacing:-2.6px; } .qnx-aic-intro-copy h2 strong, .qnx-aic-problem-title h2 strong, .qnx-aic-flow-head h2 strong, .qnx-aic-services-intro h2 strong, .qnx-aic-lab-copy h2 strong, .qnx-aic-cta-copy h2 strong{ color:#0758d8; } .qnx-aic-intro-copy p{ max-width:600px; margin:0 0 31px; color:#5d6b84; font-size:15px; line-height:1.85; } .qnx-aic-intro-btn, .qnx-aic-cta-copy a{ display:inline-flex; align-items:center; gap:17px; padding:15px 17px 15px 22px; background:#0758d8; color:#fff; text-decoration:none; font-size:13px; font-weight:900; transition:.3s ease; } .qnx-aic-intro-btn b, .qnx-aic-cta-copy a b{ width:34px; height:34px; display:grid; place-items:center; background:#b7e51c; color:#0d1730; font-size:17px; } .qnx-aic-intro-btn:hover, .qnx-aic-cta-copy a:hover{ background:#062d7a; transform:translateY(-3px); } .qnx-aic-editor{ position:relative; background:#f4f8ff; border:1px solid #d9e5f2; box-shadow:0 25px 65px rgba(17,55,110,.10); } .qnx-aic-editor-top{ height:58px; padding:0 22px; display:flex; align-items:center; justify-content:space-between; background:#062d7a; color:#fff; } .qnx-aic-editor-brand{ display:flex; align-items:center; gap:9px; font-size:10px; font-weight:900; letter-spacing:1.6px; } .qnx-aic-editor-dot{ width:8px; height:8px; border-radius:50%; background:#b7e51c; box-shadow:0 0 14px rgba(183,229,28,.8); } .qnx-aic-editor-status{ color:#b7e51c; font-size:9px; font-weight:800; letter-spacing:1.4px; } .qnx-aic-editor-body{ display:grid; grid-template-columns:1fr 90px 1fr; align-items:center; gap:18px; padding:35px; } .qnx-aic-document{ min-height:285px; padding:25px; background:#fff; border:1px solid #dce6f1; } .qnx-aic-document-label{ margin-bottom:21px; font-size:9px; font-weight:900; letter-spacing:1.5px; color:#5d6b84; } .qnx-aic-document h3{ margin:0 0 14px; color:#0d1730; font-size:19px; line-height:1.35; } .qnx-aic-document p{ margin:0; color:#5d6b84; font-size:12px; line-height:1.75; } .qnx-aic-text-lines{ margin-top:25px; } .qnx-aic-text-lines span{ display:block; height:6px; margin-top:8px; background:#e3eaf4; } .qnx-aic-text-lines span:nth-child(2){ width:82%; } .qnx-aic-text-lines span:nth-child(3){ width:63%; } .qnx-aic-optimised{ border-top:3px solid #16b98a; } .qnx-aic-optimised .qnx-aic-document-label{ color:#16b98a; } .qnx-aic-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:22px; } .qnx-aic-tags span{ padding:6px 8px; background:#f4f8ff; color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1px; } .qnx-aic-transform{ display:flex; flex-direction:column; align-items:center; gap:10px; } .qnx-aic-transform span{ color:#5d6b84; font-size:8px; font-weight:900; letter-spacing:1.5px; } .qnx-aic-transform-line{ width:1px; height:75px; background:linear-gradient(#dce6f1,#0758d8,#16b98a); } .qnx-aic-transform b{ width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:#0758d8; color:#fff; font-size:18px; box-shadow:0 10px 25px rgba(7,88,216,.22); } .qnx-aic-editor-bottom{ min-height:50px; padding:0 25px; display:flex; align-items:center; gap:12px; border-top:1px solid #dce6f1; background:#fff; color:#5d6b84; font-size:9px; font-weight:800; letter-spacing:1px; } .qnx-aic-editor-bottom i{ width:30px; height:1px; background:#b9cee7; } .qnx-aic-editor-bottom strong{ margin-left:auto; color:#16b98a; letter-spacing:1.3px; } .qnx-aic-problem{ padding:90px 6%; background:#f4f8ff; } .qnx-aic-problem-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:1fr .8fr; gap:100px; align-items:start; } .qnx-aic-problem-title h2, .qnx-aic-flow-head h2, .qnx-aic-services-intro h2, .qnx-aic-lab-copy h2{ margin:15px 0 0; color:#0d1730; font-size:clamp(35px,4vw,55px); line-height:1.05; letter-spacing:-2.2px; } .qnx-aic-problem-copy{ padding-top:15px; } .qnx-aic-problem-copy>p{ margin:0; color:#5d6b84; font-size:15px; line-height:1.85; } .qnx-aic-question{ position:relative; margin-top:28px; padding:24px 25px; background:#fff; border-left:4px solid #087ee7; box-shadow:0 15px 35px rgba(17,55,110,.07); } .qnx-aic-question span{ display:block; margin-bottom:9px; color:#0758d8; font-size:9px; font-weight:900; letter-spacing:1.5px; } .qnx-aic-question strong{ color:#0d1730; font-size:17px; line-height:1.5; } .qnx-aic-flow{ padding:95px 6%; background:#fff; } .qnx-aic-flow-head{ max-width:1280px; margin:0 auto 45px; } .qnx-aic-flow-track{ max-width:1280px; margin:auto; display:grid; grid-template-columns:1fr 100px 1fr 100px 1fr; align-items:center; } .qnx-aic-flow-stage{ min-height:260px; padding:30px; border-bottom:3px solid #0758d8; background:#f4f8ff; transition:.35s ease; } .qnx-aic-flow-stage:hover{ transform:translateY(-6px); box-shadow:0 20px 45px rgba(17,55,110,.09); } .qnx-aic-flow-highlight{ background:#062d7a; border-bottom-color:#b7e51c; } .qnx-aic-flow-word{ margin-bottom:34px; color:#0758d8; font-size:28px; font-weight:900; letter-spacing:-1px; } .qnx-aic-flow-highlight .qnx-aic-flow-word{ color:#b7e51c; } .qnx-aic-flow-stage small{ font-size:9px; font-weight:900; letter-spacing:1.6px; color:#5d6b84; } .qnx-aic-flow-highlight small{ color:#8fc7ff; } .qnx-aic-flow-stage p{ margin:10px 0 0; color:#5d6b84; font-size:13px; line-height:1.75; } .qnx-aic-flow-highlight p{ color:#dbe8ff; } .qnx-aic-flow-bridge{ position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; } .qnx-aic-flow-bridge span{ width:45px; height:1px; background:#a9bfda; } .qnx-aic-flow-bridge b{ color:#087ee7; font-size:17px; } .qnx-aic-services{ padding:90px 6%; background:#f4f8ff; } .qnx-aic-services-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:.65fr 1.35fr; gap:80px; } .qnx-aic-service-stream{ border-top:1px solid #d7e2ef; } .qnx-aic-service-stream article{ display:grid; grid-template-columns:55px 1fr 30px; gap:20px; align-items:center; padding:24px 8px; border-bottom:1px solid #d7e2ef; transition:.3s ease; } .qnx-aic-service-stream article:hover{ padding-left:18px; background:#fff; } .qnx-aic-service-index{ color:#087ee7; font-size:12px; font-weight:900; } .qnx-aic-service-content h3{ margin:0 0 6px; color:#0d1730; font-size:18px; } .qnx-aic-service-content p{ max-width:650px; margin:0; color:#5d6b84; font-size:12px; line-height:1.7; } .qnx-aic-service-arrow{ color:#0758d8; font-size:19px; } .qnx-aic-lab{ padding:100px 6%; background:#062d7a; color:#fff; } .qnx-aic-lab-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:.8fr 1.2fr; gap:85px; align-items:center; } .qnx-aic-lab-copy>span{ color:#b7e51c; } .qnx-aic-lab-copy h2{ color:#fff; } .qnx-aic-lab-copy h2 strong{ color:#b7e51c; } .qnx-aic-lab-copy p{ max-width:550px; margin:22px 0 0; color:#d7e6ff; font-size:14px; line-height:1.85; } .qnx-aic-lab-screen{ padding:28px; background:#081f50; border:1px solid rgba(255,255,255,.15); box-shadow:0 25px 60px rgba(0,0,0,.18); } .qnx-aic-lab-query{ padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.12); } .qnx-aic-lab-query small{ display:block; color:#8fc7ff; font-size:9px; font-weight:900; letter-spacing:1.5px; } .qnx-aic-lab-query strong{ display:block; margin-top:8px; color:#fff; font-size:20px; } .qnx-aic-lab-reading{ padding:25px 0; } .qnx-aic-lab-reading>span{ display:block; margin:15px 0 7px; color:#9ebbe0; font-size:9px; font-weight:900; letter-spacing:1.3px; } .qnx-aic-lab-reading>div{ height:7px; overflow:hidden; background:rgba(255,255,255,.09); } .qnx-aic-lab-reading i{ display:block; height:100%; background:linear-gradient(90deg,#0758d8,#08a8cf,#16b98a); transform-origin:left; } .qnx-aic-lab-footer{ padding-top:21px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; align-items:center; color:#b7e51c; font-size:9px; font-weight:900; letter-spacing:1.4px; } .qnx-aic-lab-footer b{ width:27px; height:27px; display:grid; place-items:center; background:#b7e51c; color:#062d7a; border-radius:50%; } .qnx-aic-cta{ padding:95px 6%; background: radial-gradient(circle at 82% 20%,rgba(8,168,207,.20),transparent 25%), radial-gradient(circle at 15% 85%,rgba(121,201,28,.13),transparent 23%), linear-gradient(120deg,#062d7a,#0758d8 58%,#087ee7); } .qnx-aic-cta-lines{ position:absolute; inset:0; background-image: linear-gradient(120deg,transparent 48%,rgba(255,255,255,.06) 49%,transparent 50%), linear-gradient(60deg,transparent 48%,rgba(255,255,255,.045) 49%,transparent 50%); background-size:85px 85px; } .qnx-aic-cta-inner{ position:relative; z-index:2; max-width:1200px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:85px; align-items:center; } .qnx-aic-cta-editor{ position:relative; transform:rotate(-2deg); background:#fff; box-shadow:0 30px 70px rgba(0,0,0,.18); } .qnx-aic-cta-toolbar{ display:flex; gap:20px; padding:15px 20px; background:#062d7a; color:#9fc8ff; font-size:8px; font-weight:900; letter-spacing:1.3px; } .qnx-aic-cta-page{ padding:28px; } .qnx-aic-cta-heading{ width:65%; height:14px; margin-bottom:20px; background:#0758d8; } .qnx-aic-cta-line{ width:94%; height:7px; margin-top:9px; background:#e3eaf4; } .qnx-aic-cta-line.medium{ width:75%; } .qnx-aic-cta-line.short{ width:55%; } .qnx-aic-cta-highlight{ display:flex; gap:7px; margin:23px 0; padding:17px; background:#f4f8ff; border-left:3px solid #16b98a; } .qnx-aic-cta-highlight span{ display:block; height:7px; flex:1; background:#c9dced; } .qnx-aic-cta-highlight span:nth-child(2){ flex:1.5; background:#08a8cf; } .qnx-aic-cta-ready{ display:flex; align-items:center; gap:8px; padding:13px 18px; background:#16b98a; color:#fff; font-size:9px; font-weight:900; letter-spacing:1.5px; } .qnx-aic-cta-ready i{ width:7px; height:7px; border-radius:50%; background:#b7e51c; } .qnx-aic-cta-copy>span{ color:#b7e51c; } .qnx-aic-cta-copy h2{ margin:16px 0 19px; color:#fff; font-size:clamp(40px,4.3vw,62px); line-height:1.03; letter-spacing:-2.5px; } .qnx-aic-cta-copy h2 strong{ color:#b7e51c; } .qnx-aic-cta-copy p{ max-width:570px; margin:0 0 28px; color:#dbe8ff; font-size:15px; line-height:1.8; } .qnx-aic-cta-copy a{ background:#fff; color:#062d7a; } .qnx-aic-cta-copy a b{ background:#b7e51c; } @media(max-width:1050px){ .qnx-aic-intro-inner, .qnx-aic-problem-inner, .qnx-aic-services-inner, .qnx-aic-lab-inner, .qnx-aic-cta-inner{ grid-template-columns:1fr; } .qnx-aic-editor-body{ grid-template-columns:1fr; } .qnx-aic-transform{ flex-direction:row; } .qnx-aic-transform-line{ width:70px; height:1px; } .qnx-aic-flow-track{ grid-template-columns:1fr; gap:18px; } .qnx-aic-flow-bridge{ flex-direction:row; justify-content:center; } .qnx-aic-services-inner{ gap:50px; } .qnx-aic-cta-editor{ max-width:650px; } } @media(max-width:700px){ .qnx-aic-intro, .qnx-aic-problem, .qnx-aic-flow, .qnx-aic-services, .qnx-aic-lab, .qnx-aic-cta{ padding:65px 20px; } .qnx-aic-intro-inner{ gap:45px; } .qnx-aic-editor-body{ padding:20px; } .qnx-aic-document{ min-height:auto; } .qnx-aic-editor-bottom{ flex-wrap:wrap; padding:15px; } .qnx-aic-editor-bottom strong{ margin-left:0; } .qnx-aic-problem-inner{ gap:40px; } .qnx-aic-service-stream article{ grid-template-columns:35px 1fr; gap:13px; } .qnx-aic-service-arrow{ display:none; } .qnx-aic-cta-editor{ transform:none; } .qnx-aic-cta-toolbar{ gap:10px; flex-wrap:wrap; } } /* ========================================================= QNIX DIGITAL — LLM OPTIMIZATION ========================================================= */ .qnx-llm-intro, .qnx-llm-shift, .qnx-llm-architecture, .qnx-llm-optimise, .qnx-llm-semantic, .qnx-llm-cta{ position:relative; overflow:hidden; font-family:inherit; } .qnx-llm-intro{ padding:95px 6%; background:#fff; } .qnx-llm-intro-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:.78fr 1.22fr; gap:75px; align-items:center; } .qnx-llm-eyebrow, .qnx-llm-shift-heading>span, .qnx-llm-architecture-copy>span, .qnx-llm-optimise-head>span, .qnx-llm-semantic-copy>span, .qnx-llm-cta-copy>span{ display:inline-block; font-size:11px; font-weight:900; letter-spacing:2px; color:#0758d8; } .qnx-llm-intro-copy h2{ margin:18px 0 20px; color:#0d1730; font-size:clamp(40px,4.3vw,66px); line-height:1.02; letter-spacing:-2.7px; } .qnx-llm-intro-copy h2 strong, .qnx-llm-shift-heading h2 strong, .qnx-llm-architecture-copy h2 strong, .qnx-llm-optimise-head h2 strong, .qnx-llm-semantic-copy h2 strong, .qnx-llm-cta-copy h2 strong{ color:#0758d8; } .qnx-llm-intro-copy p{ max-width:590px; margin:0 0 30px; color:#5d6b84; font-size:15px; line-height:1.85; } .qnx-llm-intro-btn, .qnx-llm-cta-copy a{ display:inline-flex; align-items:center; gap:17px; padding:15px 17px 15px 22px; background:#0758d8; color:#fff; text-decoration:none; font-size:13px; font-weight:900; transition:.3s ease; } .qnx-llm-intro-btn b, .qnx-llm-cta-copy a b{ width:34px; height:34px; display:grid; place-items:center; background:#b7e51c; color:#0d1730; font-size:17px; } .qnx-llm-intro-btn:hover, .qnx-llm-cta-copy a:hover{ background:#062d7a; transform:translateY(-3px); } .qnx-llm-context-visual{ position:relative; min-height:430px; background:#f4f8ff; border:1px solid #d9e5f2; box-shadow:0 25px 65px rgba(17,55,110,.10); } .qnx-llm-context-top{ height:56px; padding:0 22px; display:flex; align-items:center; justify-content:space-between; background:#062d7a; color:#fff; } .qnx-llm-context-top span{ font-size:10px; font-weight:900; letter-spacing:1.6px; } .qnx-llm-context-top b{ color:#b7e51c; font-size:9px; letter-spacing:1.5px; } .qnx-llm-token-field{ position:relative; min-height:295px; padding:45px 35px; overflow:hidden; background: linear-gradient(rgba(7,88,216,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.045) 1px,transparent 1px); background-size:30px 30px; } .qnx-llm-token-row{ position:relative; z-index:2; display:flex; justify-content:center; gap:10px; margin-bottom:18px; } .qnx-llm-token-row span{ padding:8px 11px; border:1px solid #cddceb; background:rgba(255,255,255,.9); color:#5d6b84; font-size:9px; font-weight:800; } .qnx-llm-token-row-main{ margin:30px 0; } .qnx-llm-token-row-main span{ padding:13px 15px; border-color:#9fc6eb; color:#0758d8; font-size:11px; font-weight:900; box-shadow:0 8px 22px rgba(17,55,110,.07); } .qnx-llm-token-row-main span:nth-child(2){ background:#0758d8; color:#fff; border-color:#0758d8; } .qnx-llm-scan{ position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,transparent,#08a8cf,#b7e51c,transparent); box-shadow:0 0 18px rgba(8,168,207,.55); animation:qnxLlmScan 3s infinite ease-in-out; } @keyframes qnxLlmScan{ 0%{top:12%;opacity:.15} 50%{top:86%;opacity:1} 100%{top:12%;opacity:.15} } .qnx-llm-context-bottom{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #d9e5f2; background:#fff; } .qnx-llm-context-bottom div{ padding:17px 20px; border-right:1px solid #d9e5f2; } .qnx-llm-context-bottom div:last-child{ border-right:0; } .qnx-llm-context-bottom small{ display:block; color:#5d6b84; font-size:8px; font-weight:900; letter-spacing:1.3px; } .qnx-llm-context-bottom strong{ display:block; margin-top:5px; color:#16b98a; font-size:10px; letter-spacing:1px; } .qnx-llm-shift{ padding:90px 6%; background:#f4f8ff; } .qnx-llm-shift-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:.75fr 1.25fr; gap:90px; align-items:center; } .qnx-llm-shift-heading h2, .qnx-llm-architecture-copy h2, .qnx-llm-optimise-head h2, .qnx-llm-semantic-copy h2{ margin:15px 0 0; color:#0d1730; font-size:clamp(35px,4vw,55px); line-height:1.05; letter-spacing:-2.2px; } .qnx-llm-shift-flow{ border-top:1px solid #d4e0ee; } .qnx-llm-shift-line{ min-height:66px; display:grid; grid-template-columns:125px 1fr 130px; gap:20px; align-items:center; border-bottom:1px solid #d4e0ee; } .qnx-llm-shift-line span{ color:#0758d8; font-size:9px; font-weight:900; letter-spacing:1.5px; } .qnx-llm-shift-line i{ position:relative; height:1px; background:#a9c1dd; } .qnx-llm-shift-line i:after{ content:""; position:absolute; left:0; top:-3px; width:7px; height:7px; border-radius:50%; background:#08a8cf; animation:qnxLlmMove 2.3s infinite ease-in-out; } .qnx-llm-shift-line:nth-child(2) i:after{animation-delay:.25s} .qnx-llm-shift-line:nth-child(3) i:after{animation-delay:.5s} .qnx-llm-shift-line:nth-child(4) i:after{animation-delay:.75s} .qnx-llm-shift-line strong{ color:#0d1730; font-size:14px; } @keyframes qnxLlmMove{ 0%,100%{left:0;opacity:.35} 50%{left:calc(100% - 7px);opacity:1} } .qnx-llm-architecture{ padding:100px 6%; background:#fff; } .qnx-llm-architecture-inner{ max-width:1280px; margin:auto; } .qnx-llm-architecture-copy{ max-width:760px; margin-bottom:55px; } .qnx-llm-architecture-copy p{ max-width:690px; margin:22px 0 0; color:#5d6b84; font-size:14px; line-height:1.8; } .qnx-llm-architecture-board{ display:grid; grid-template-columns:1fr 80px 1.2fr 80px 1fr; align-items:center; padding:30px; background:#f4f8ff; border:1px solid #d9e5f2; } .qnx-llm-board-source, .qnx-llm-board-context, .qnx-llm-board-output{ min-height:290px; } .qnx-llm-board-source small, .qnx-llm-board-context>small, .qnx-llm-board-output>small{ display:block; margin-bottom:17px; color:#5d6b84; font-size:9px; font-weight:900; letter-spacing:1.5px; } .qnx-llm-board-source div{ padding:16px; margin-top:8px; background:#fff; border-left:3px solid #0758d8; color:#0d1730; font-size:12px; font-weight:800; } .qnx-llm-board-path{ position:relative; height:230px; } .qnx-llm-board-path:before{ content:""; position:absolute; top:20px; bottom:20px; left:50%; border-left:1px dashed #9cb7d6; } .qnx-llm-board-path span{ position:absolute; left:calc(50% - 4px); width:8px; height:8px; border-radius:50%; background:#087ee7; } .qnx-llm-board-path span:nth-child(1){top:40px} .qnx-llm-board-path span:nth-child(2){top:110px} .qnx-llm-board-path span:nth-child(3){top:180px} .qnx-llm-board-path b{ position:absolute; left:calc(50% - 10px); bottom:-3px; color:#0758d8; font-size:18px; } .qnx-llm-context-band{ padding:17px; margin-top:9px; background:#062d7a; color:#fff; } .qnx-llm-context-band:nth-child(3){ background:#0758d8; } .qnx-llm-context-band:nth-child(4){ background:#08a8cf; } .qnx-llm-context-band span{ display:block; margin-bottom:5px; color:#b7e51c; font-size:8px; font-weight:900; letter-spacing:1.3px; } .qnx-llm-context-band strong{ font-size:12px; } .qnx-llm-output{ display:flex; flex-direction:column; justify-content:center; padding:25px; background:#fff; border-right:4px solid #16b98a; } .qnx-llm-board-output strong{ color:#0d1730; font-size:22px; line-height:1.35; } .qnx-llm-output-wave{ display:flex; align-items:end; gap:5px; height:70px; margin-top:25px; } .qnx-llm-output-wave i{ width:13px; height:25px; background:#0758d8; animation:qnxLlmWave 1.4s infinite ease-in-out; } .qnx-llm-output-wave i:nth-child(2){height:42px;animation-delay:.1s;background:#087ee7} .qnx-llm-output-wave i:nth-child(3){height:58px;animation-delay:.2s;background:#08a8cf} .qnx-llm-output-wave i:nth-child(4){height:38px;animation-delay:.3s;background:#16b98a} .qnx-llm-output-wave i:nth-child(5){height:50px;animation-delay:.4s;background:#79c91c} @keyframes qnxLlmWave{ 0%,100%{transform:scaleY(.65);opacity:.55} 50%{transform:scaleY(1);opacity:1} } .qnx-llm-optimise{ padding:90px 6%; background:#f4f8ff; } .qnx-llm-optimise-head{ max-width:1280px; margin:auto auto 45px; } .qnx-llm-optimise-grid{ max-width:1280px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #d5e1ef; border-left:1px solid #d5e1ef; } .qnx-llm-optimise-grid article{ min-height:285px; padding:28px; background:#fff; border-right:1px solid #d5e1ef; border-bottom:1px solid #d5e1ef; transition:.35s ease; } .qnx-llm-optimise-grid article:hover{ transform:translateY(-6px); box-shadow:0 22px 50px rgba(7,88,216,.10); } .qnx-llm-optimise-top{ display:flex; justify-content:space-between; align-items:center; } .qnx-llm-optimise-top span{ color:#087ee7; font-size:10px; font-weight:900; } .qnx-llm-optimise-top b{ color:#0758d8; font-size:17px; } .qnx-llm-optimise-grid h3{ margin:42px 0 11px; color:#0d1730; font-size:19px; } .qnx-llm-optimise-grid p{ margin:0; color:#5d6b84; font-size:12px; line-height:1.75; } .qnx-llm-optimise-line{ width:45px; height:3px; margin-top:28px; background:#0758d8; } .qnx-llm-optimise-grid article:nth-child(2) .qnx-llm-optimise-line{ background:#087ee7; } .qnx-llm-optimise-grid article:nth-child(3) .qnx-llm-optimise-line{ background:#08a8cf; } .qnx-llm-optimise-grid article:nth-child(4) .qnx-llm-optimise-line{ background:#79c91c; } .qnx-llm-semantic{ padding:100px 6%; background:#fff; } .qnx-llm-semantic-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:.65fr 1.35fr; gap:80px; align-items:center; } .qnx-llm-semantic-copy p{ max-width:500px; margin:22px 0 0; color:#5d6b84; font-size:14px; line-height:1.85; } .qnx-llm-semantic-map{ position:relative; min-height:430px; background:#f4f8ff; border:1px solid #d9e5f2; overflow:hidden; } .qnx-llm-semantic-map:before{ content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(7,88,216,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.045) 1px,transparent 1px); background-size:36px 36px; } .qnx-llm-semantic-brand{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; width:170px; height:90px; display:grid; place-items:center; align-content:center; background:#0758d8; color:#fff; font-size:13px; font-weight:900; letter-spacing:1.2px; box-shadow:0 20px 45px rgba(7,88,216,.22); } .qnx-llm-semantic-brand small{ display:block; margin-top:6px; color:#b7e51c; font-size:7px; letter-spacing:1.4px; } .qnx-llm-semantic-node{ position:absolute; z-index:3; width:145px; padding:17px; background:#fff; border:1px solid #cfddec; box-shadow:0 12px 30px rgba(17,55,110,.08); } .qnx-llm-semantic-node span{ display:block; margin-bottom:12px; color:#087ee7; font-size:8px; font-weight:900; } .qnx-llm-semantic-node strong{ display:block; color:#0d1730; font-size:13px; } .qnx-llm-semantic-node small{ display:block; margin-top:5px; color:#5d6b84; font-size:7px; letter-spacing:1px; font-weight:900; } .qnx-llm-node-one{left:8%;top:10%} .qnx-llm-node-two{right:8%;top:10%} .qnx-llm-node-three{left:8%;bottom:10%} .qnx-llm-node-four{right:8%;bottom:10%} .qnx-llm-map-line{ position:absolute; z-index:1; height:1px; width:34%; background:linear-gradient(90deg,#087ee7,#08a8cf); transform-origin:left center; } .qnx-llm-map-line-one{ left:25%; top:31%; transform:rotate(24deg); } .qnx-llm-map-line-two{ left:58%; top:31%; transform:rotate(-24deg); } .qnx-llm-map-line-three{ left:25%; top:69%; transform:rotate(-24deg); } .qnx-llm-map-line-four{ left:58%; top:69%; transform:rotate(24deg); } .qnx-llm-cta{ padding:95px 6%; background: radial-gradient(circle at 78% 18%,rgba(8,168,207,.20),transparent 26%), radial-gradient(circle at 15% 82%,rgba(121,201,28,.12),transparent 22%), linear-gradient(120deg,#062d7a,#0758d8 58%,#087ee7); } .qnx-llm-cta-grid{ position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:44px 44px; } .qnx-llm-cta-inner{ position:relative; z-index:2; max-width:1200px; margin:auto; display:grid; grid-template-columns:1.05fr .95fr; gap:80px; align-items:center; } .qnx-llm-cta-terminal{ background:#071c47; border:1px solid rgba(255,255,255,.17); box-shadow:0 30px 70px rgba(0,0,0,.22); } .qnx-llm-terminal-head{ height:52px; padding:0 20px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(255,255,255,.12); color:#fff; } .qnx-llm-terminal-head span{ font-size:9px; font-weight:900; letter-spacing:1.5px; } .qnx-llm-terminal-head b{ color:#b7e51c; font-size:8px; letter-spacing:1.3px; } .qnx-llm-terminal-body{ padding:28px 25px; } .qnx-llm-terminal-row{ display:grid; grid-template-columns:25px 1fr auto; gap:10px; align-items:center; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.08); } .qnx-llm-terminal-row span{ color:#08a8cf; font-size:12px; } .qnx-llm-terminal-row strong{ color:#e8f2ff; font-size:11px; font-weight:700; } .qnx-llm-terminal-row em{ color:#16b98a; font-size:8px; font-style:normal; font-weight:900; letter-spacing:1px; } .qnx-llm-terminal-final{ border-bottom:0; } .qnx-llm-terminal-final strong{ color:#b7e51c; } .qnx-llm-terminal-cursor{ width:7px; height:15px; margin:0 0 20px 25px; background:#b7e51c; animation:qnxLlmCursor .9s infinite; } @keyframes qnxLlmCursor{ 0%,45%{opacity:1} 46%,100%{opacity:0} } .qnx-llm-cta-copy>span{ color:#b7e51c; } .qnx-llm-cta-copy h2{ margin:16px 0 19px; color:#fff; font-size:clamp(40px,4.3vw,63px); line-height:1.03; letter-spacing:-2.5px; } .qnx-llm-cta-copy h2 strong{ color:#b7e51c; } .qnx-llm-cta-copy p{ max-width:570px; margin:0 0 28px; color:#dce9ff; font-size:15px; line-height:1.8; } .qnx-llm-cta-copy a{ background:#fff; color:#062d7a; } .qnx-llm-cta-copy a b{ background:#b7e51c; } @media(max-width:1100px){ .qnx-llm-intro-inner, .qnx-llm-shift-inner, .qnx-llm-semantic-inner, .qnx-llm-cta-inner{ grid-template-columns:1fr; } .qnx-llm-shift-inner{ gap:50px; } .qnx-llm-architecture-board{ grid-template-columns:1fr; gap:20px; } .qnx-llm-board-path{ height:55px; } .qnx-llm-board-path:before{ left:20px; right:20px; top:50%; bottom:auto; border-left:0; border-top:1px dashed #9cb7d6; } .qnx-llm-board-path span{ top:calc(50% - 4px); } .qnx-llm-board-path span:nth-child(1){left:25%} .qnx-llm-board-path span:nth-child(2){left:50%} .qnx-llm-board-path span:nth-child(3){left:75%} .qnx-llm-board-path b{ left:auto; right:10px; bottom:calc(50% - 10px); } .qnx-llm-optimise-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:700px){ .qnx-llm-intro, .qnx-llm-shift, .qnx-llm-architecture, .qnx-llm-optimise, .qnx-llm-semantic, .qnx-llm-cta{ padding:65px 20px; } .qnx-llm-intro-inner{ gap:45px; } .qnx-llm-context-visual{ min-height:390px; } .qnx-llm-token-field{ padding:35px 15px; } .qnx-llm-token-row{ flex-wrap:wrap; } .qnx-llm-context-bottom div{ padding:14px 10px; } .qnx-llm-shift-line{ grid-template-columns:90px 1fr; } .qnx-llm-shift-line strong{ grid-column:2; margin-top:-12px; } .qnx-llm-optimise-grid{ grid-template-columns:1fr; } .qnx-llm-optimise-grid article{ min-height:auto; } .qnx-llm-semantic-map{ min-height:390px; } .qnx-llm-semantic-brand{ width:145px; } .qnx-llm-semantic-node{ width:115px; padding:13px; } .qnx-llm-node-one{left:4%;top:7%} .qnx-llm-node-two{right:4%;top:7%} .qnx-llm-node-three{left:4%;bottom:7%} .qnx-llm-node-four{right:4%;bottom:7%} .qnx-llm-terminal-row{ grid-template-columns:18px 1fr; } .qnx-llm-terminal-row em{ grid-column:2; } } /* ========================================================= QNIX DIGITAL — CUSTOM WEB DESIGN ========================================================= */ .qnx-cwd-intro, .qnx-cwd-thinking, .qnx-cwd-canvas, .qnx-cwd-responsive, .qnx-cwd-detail-section, .qnx-cwd-final{ position:relative; overflow:hidden; font-family:inherit; } .qnx-cwd-intro{ background:#f4f8ff; padding:95px 6vw 105px; } .qnx-cwd-intro-wrap{ max-width:1320px; margin:auto; display:grid; grid-template-columns:.82fr 1.18fr; gap:70px; align-items:center; } .qnx-cwd-intro-copy{ position:relative; z-index:2; } .qnx-cwd-kicker{ display:inline-flex; align-items:center; gap:10px; color:#0758d8; font-size:11px; font-weight:800; letter-spacing:2.4px; } .qnx-cwd-kicker:before{ content:""; width:27px; height:2px; background:linear-gradient(90deg,#0758d8,#16b98a); } .qnx-cwd-intro h2, .qnx-cwd-section-head h2, .qnx-cwd-canvas-top h2, .qnx-cwd-responsive-copy h2, .qnx-cwd-detail-intro h2, .qnx-cwd-final h2{ margin:18px 0 22px; color:#0d1730; font-size:clamp(40px,4.3vw,67px); line-height:1.03; letter-spacing:-2.8px; font-weight:500; } .qnx-cwd-intro h2 strong, .qnx-cwd-section-head h2 strong, .qnx-cwd-canvas-top h2 strong, .qnx-cwd-responsive-copy h2 strong, .qnx-cwd-detail-intro h2 strong, .qnx-cwd-final h2 strong{ color:#0758d8; font-weight:800; } .qnx-cwd-intro-copy p, .qnx-cwd-section-head p, .qnx-cwd-canvas-top p, .qnx-cwd-responsive-copy p, .qnx-cwd-detail-intro p, .qnx-cwd-final p{ max-width:620px; color:#5d6b84; font-size:16px; line-height:1.85; margin:0; } .qnx-cwd-main-btn, .qnx-cwd-final-btn{ display:inline-flex; align-items:center; gap:18px; margin-top:32px; padding:15px 18px 15px 22px; background:#0758d8; color:#fff; text-decoration:none; font-size:13px; font-weight:800; letter-spacing:.2px; transition:.35s ease; } .qnx-cwd-main-btn b, .qnx-cwd-final-btn b{ width:35px; height:35px; display:grid; place-items:center; background:#b7e51c; color:#0d1730; font-size:17px; transition:.35s ease; } .qnx-cwd-main-btn:hover, .qnx-cwd-final-btn:hover{ transform:translateY(-4px); box-shadow:0 18px 35px rgba(7,88,216,.2); } .qnx-cwd-main-btn:hover b, .qnx-cwd-final-btn:hover b{ transform:rotate(45deg); } /* DESIGN STAGE */ .qnx-cwd-design-stage{ position:relative; min-height:570px; display:flex; align-items:center; justify-content:center; } .qnx-cwd-stage-label{ position:absolute; top:0; right:8px; color:#5d6b84; font-size:9px; letter-spacing:2px; font-weight:800; } .qnx-cwd-browser{ position:relative; width:min(700px,100%); background:#fff; border:1px solid #dce6f3; box-shadow:0 35px 80px rgba(17,55,110,.14); transform:rotate(-2deg); transition:.55s ease; } .qnx-cwd-design-stage:hover .qnx-cwd-browser{ transform:rotate(0deg) translateY(-7px); } .qnx-cwd-browser-top{ height:48px; display:flex; align-items:center; padding:0 15px; border-bottom:1px solid #e3eaf4; background:#fff; } .qnx-cwd-dots{ display:flex; gap:5px; } .qnx-cwd-dots i{ width:7px; height:7px; border-radius:50%; background:#cbd8e9; } .qnx-cwd-url{ flex:1; text-align:center; color:#8b99ae; font-size:9px; letter-spacing:1px; } .qnx-cwd-live{ color:#16b98a; font-size:8px; font-weight:800; letter-spacing:1px; } .qnx-cwd-browser-body{ position:relative; min-height:450px; padding:27px; background: linear-gradient(rgba(7,88,216,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.055) 1px,transparent 1px), #f7faff; background-size:34px 34px; } .qnx-cwd-mini-nav{ display:flex; justify-content:space-between; align-items:center; margin-bottom:52px; } .qnx-cwd-mini-logo{ width:32px; height:32px; display:grid; place-items:center; background:#0758d8; color:#fff; font-size:15px; font-weight:900; } .qnx-cwd-mini-nav div{ display:flex; gap:8px; } .qnx-cwd-mini-nav i{ width:38px; height:4px; background:#dbe5f3; } .qnx-cwd-visual-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:24px; align-items:end; } .qnx-cwd-big-type{ position:relative; z-index:2; } .qnx-cwd-big-type small{ display:block; color:#10a4b4; font-size:9px; letter-spacing:2px; font-weight:900; margin-bottom:10px; } .qnx-cwd-big-type strong{ display:block; color:#0d1730; font-size:clamp(55px,7vw,90px); line-height:.82; letter-spacing:-5px; } .qnx-cwd-art{ position:relative; min-height:245px; overflow:hidden; background:linear-gradient(135deg,#0758d8,#08a8cf); } .qnx-cwd-art:before{ content:""; position:absolute; width:160px; height:160px; right:-35px; top:-35px; border:30px solid rgba(255,255,255,.14); transform:rotate(35deg); } .qnx-cwd-art-panel{ position:absolute; left:27px; bottom:28px; width:70%; height:90px; background:#fff; transform:skewX(-14deg); } .qnx-cwd-art-line{ position:absolute; width:130%; height:1px; left:-10%; background:rgba(255,255,255,.5); transform:rotate(-35deg); } .line-a{top:30%} .line-b{top:58%} .qnx-cwd-art span{ position:absolute; right:18px; bottom:15px; color:#b7e51c; font-size:11px; font-weight:900; } .qnx-cwd-browser-bottom{ display:flex; justify-content:space-between; margin-top:45px; padding-top:15px; border-top:1px solid #dbe5f3; } .qnx-cwd-browser-bottom span{ color:#5d6b84; font-size:8px; letter-spacing:1.2px; font-weight:800; } .qnx-cwd-float{ position:absolute; padding:13px 16px; background:#fff; border:1px solid #dce6f3; box-shadow:0 15px 35px rgba(17,55,110,.12); } .qnx-cwd-float span{ display:block; color:#8a98ad; font-size:8px; letter-spacing:1.4px; margin-bottom:5px; } .qnx-cwd-float strong{ color:#0758d8; font-size:13px; } .qnx-cwd-float-one{ top:80px; left:0; } .qnx-cwd-float-two{ right:-5px; bottom:62px; } .qnx-cwd-cursor{ position:absolute; right:80px; top:90px; width:47px; height:47px; display:grid; place-items:center; background:#b7e51c; color:#0d1730; border-radius:50%; box-shadow:0 10px 25px rgba(123,197,31,.25); animation:qnxCwdCursor 3s ease-in-out infinite; } @keyframes qnxCwdCursor{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(-17px,24px)} } /* THINKING */ .qnx-cwd-thinking{ background:#fff; padding:105px 6vw; } .qnx-cwd-section-head{ max-width:1320px; margin:0 auto 65px; display:grid; grid-template-columns:1fr 1fr; column-gap:80px; } .qnx-cwd-section-head .qnx-cwd-kicker{ grid-column:1/-1; } .qnx-cwd-section-head h2{ margin-bottom:0; } .qnx-cwd-section-head p{ align-self:end; padding-bottom:5px; } .qnx-cwd-editorial{ max-width:1320px; margin:auto; display:grid; grid-template-columns:1.2fr .8fr; border-top:1px solid #dce6f3; border-bottom:1px solid #dce6f3; } .qnx-cwd-editorial-main{ min-height:350px; padding:60px 55px; display:grid; grid-template-columns:90px 1fr; gap:35px; background:#f4f8ff; } .qnx-cwd-editorial-number{ font-size:82px; line-height:1; color:#0758d8; font-weight:900; } .qnx-cwd-editorial-main span{ color:#10a4b4; font-size:10px; font-weight:900; letter-spacing:2px; } .qnx-cwd-editorial-main h3{ margin:13px 0 17px; color:#0d1730; font-size:34px; line-height:1.12; letter-spacing:-1.4px; } .qnx-cwd-editorial-main p{ max-width:470px; margin:0; color:#5d6b84; line-height:1.75; font-size:14px; } .qnx-cwd-editorial-side{ padding:24px 34px; background:#fff; } .qnx-cwd-side-item{ min-height:100px; display:grid; grid-template-columns:45px 1fr; gap:15px; align-items:center; border-bottom:1px solid #e3eaf4; } .qnx-cwd-side-item:last-child{ border-bottom:0; } .qnx-cwd-side-item > span{ color:#0758d8; font-size:11px; font-weight:900; } .qnx-cwd-side-item strong{ color:#0d1730; font-size:16px; } .qnx-cwd-side-item p{ margin:5px 0 0; color:#708096; font-size:12px; line-height:1.55; } /* CANVAS */ .qnx-cwd-canvas{ background:#0d1730; padding:100px 6vw; color:#fff; } .qnx-cwd-canvas:before{ content:""; position:absolute; width:480px; height:480px; right:-220px; top:-220px; border:1px solid rgba(8,168,207,.35); transform:rotate(45deg); } .qnx-cwd-canvas-top{ max-width:1320px; margin:auto; display:grid; grid-template-columns:1fr .8fr; gap:100px; align-items:end; } .qnx-cwd-canvas-top .qnx-cwd-kicker{ color:#b7e51c; } .qnx-cwd-canvas-top .qnx-cwd-kicker:before{ background:#b7e51c; } .qnx-cwd-canvas-top h2{ color:#fff; } .qnx-cwd-canvas-top h2 strong{ color:#08a8cf; } .qnx-cwd-canvas-top p{ color:#aab9ce; max-width:500px; } .qnx-cwd-canvas-board{ max-width:1320px; margin:65px auto 0; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.035); } .qnx-cwd-board-rail{ height:46px; padding:0 20px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(255,255,255,.1); color:#7890ad; font-size:8px; letter-spacing:2px; } .qnx-cwd-board-rail b{ color:#b7e51c; font-size:8px; } .qnx-cwd-board-content{ display:grid; grid-template-columns:repeat(3,1fr); } .qnx-cwd-board-column{ min-height:350px; padding:42px 34px; border-right:1px solid rgba(255,255,255,.1); position:relative; overflow:hidden; } .qnx-cwd-board-column:last-child{ border-right:0; } .qnx-cwd-board-column.active{ background:linear-gradient(145deg,rgba(7,88,216,.3),rgba(8,168,207,.08)); } .qnx-cwd-board-column small{ color:#6e88a8; font-size:9px; letter-spacing:1.7px; font-weight:800; } .qnx-cwd-board-column h3{ margin:28px 0 35px; color:#fff; font-size:31px; line-height:1.05; letter-spacing:-1px; } .qnx-cwd-swatch-row{ display:flex; gap:0; margin-bottom:28px; } .qnx-cwd-swatch-row i{ width:34px; height:34px; display:block; } .qnx-cwd-swatch-row i:nth-child(1){background:#0758d8} .qnx-cwd-swatch-row i:nth-child(2){background:#087ee7} .qnx-cwd-swatch-row i:nth-child(3){background:#08a8cf} .qnx-cwd-swatch-row i:nth-child(4){background:#16b98a} .qnx-cwd-flow{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:25px; } .qnx-cwd-flow span{ padding:8px 9px; border:1px solid rgba(255,255,255,.16); color:#d9e4f2; font-size:7px; letter-spacing:1px; } .qnx-cwd-flow b{ color:#08a8cf; font-size:12px; } .qnx-cwd-detail{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; } .qnx-cwd-detail span{ padding:7px 11px; background:rgba(183,229,28,.09); color:#b7e51c; font-size:8px; letter-spacing:1px; } .qnx-cwd-board-column p{ margin:0; color:#8195ae; font-size:12px; line-height:1.7; } /* RESPONSIVE */ .qnx-cwd-responsive{ padding:105px 6vw; background:#f4f8ff; } .qnx-cwd-responsive{ display:grid; grid-template-columns:.82fr 1.18fr; gap:70px; align-items:center; } .qnx-cwd-responsive-copy{ max-width:620px; margin-left:auto; } .qnx-cwd-checks{ display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:30px; } .qnx-cwd-checks span{ position:relative; padding-left:22px; color:#0d1730; font-size:12px; font-weight:700; } .qnx-cwd-checks span:before{ content:""; position:absolute; left:0; top:5px; width:9px; height:9px; background:#16b98a; transform:rotate(45deg); } .qnx-cwd-devices{ position:relative; min-height:440px; } .qnx-cwd-device{ position:absolute; transition:.5s ease; } .qnx-cwd-device-screen{ position:relative; overflow:hidden; background:#0d1730; border:5px solid #d7e1ef; box-shadow:0 30px 55px rgba(17,55,110,.18); } .qnx-cwd-device-screen:before{ content:""; position:absolute; inset:0; background: linear-gradient(rgba(8,168,207,.08) 1px,transparent 1px), linear-gradient(90deg,rgba(8,168,207,.08) 1px,transparent 1px); background-size:22px 22px; } .qnx-cwd-device-screen span, .qnx-cwd-device-screen strong, .qnx-cwd-device-screen i{ position:absolute; z-index:2; } .qnx-cwd-device-screen span{ left:20px; top:20px; color:#b7e51c; font-size:8px; letter-spacing:1.5px; font-weight:900; } .qnx-cwd-device-screen strong{ left:20px; bottom:25px; color:#fff; font-size:25px; line-height:.95; letter-spacing:-1px; } .qnx-cwd-device-screen i{ width:85px; height:85px; right:24px; top:48px; border:18px solid #087ee7; transform:rotate(45deg); } .qnx-cwd-desktop{ left:0; top:25px; z-index:1; } .qnx-cwd-desktop .qnx-cwd-device-screen{ width:390px; height:255px; } .qnx-cwd-desktop > b{ display:block; width:150px; height:12px; margin:0 auto; background:#c7d4e5; border-radius:0 0 10px 10px; } .qnx-cwd-tablet{ right:115px; top:115px; z-index:2; } .qnx-cwd-tablet .qnx-cwd-device-screen{ width:190px; height:250px; } .qnx-cwd-tablet > b{ display:block; width:65px; height:6px; margin:0 auto; background:#c7d4e5; border-radius:0 0 7px 7px; } .qnx-cwd-mobile{ right:0; bottom:20px; z-index:3; } .qnx-cwd-mobile .qnx-cwd-device-screen{ width:115px; height:225px; border-width:4px; border-radius:15px; } .qnx-cwd-mobile .qnx-cwd-device-screen strong{ font-size:15px; } .qnx-cwd-mobile .qnx-cwd-device-screen i{ width:45px; height:45px; border-width:9px; right:16px; top:55px; } .qnx-cwd-mobile > b{ display:block; width:35px; height:5px; margin:0 auto; background:#c7d4e5; border-radius:0 0 6px 6px; } /* DETAIL */ .qnx-cwd-detail-section{ background:#fff; padding:105px 6vw; } .qnx-cwd-detail-intro{ max-width:1320px; margin:auto; } .qnx-cwd-detail-intro h2{ font-size:clamp(38px,4vw,58px); } .qnx-cwd-detail-list{ max-width:1320px; margin:60px auto 0; border-top:1px solid #dce6f3; } .qnx-cwd-detail-row{ display:grid; grid-template-columns:80px 1fr 45px; align-items:center; gap:20px; min-height:130px; padding:20px 15px; border-bottom:1px solid #dce6f3; transition:.35s ease; } .qnx-cwd-detail-row > span{ color:#0758d8; font-size:11px; font-weight:900; } .qnx-cwd-detail-row h3{ margin:0 0 6px; color:#0d1730; font-size:22px; } .qnx-cwd-detail-row p{ margin:0; color:#6b7990; font-size:13px; line-height:1.65; } .qnx-cwd-detail-row > b{ width:36px; height:36px; display:grid; place-items:center; border:1px solid #dce6f3; color:#0758d8; transition:.35s ease; } .qnx-cwd-detail-row:hover{ padding-left:30px; background:#f4f8ff; } .qnx-cwd-detail-row:hover > b{ background:#0758d8; color:#b7e51c; border-color:#0758d8; transform:rotate(45deg); } /* FINAL */ .qnx-cwd-final{ min-height:510px; display:flex; align-items:center; justify-content:center; padding:90px 6vw; background: radial-gradient(circle at 20% 25%,rgba(8,168,207,.22),transparent 30%), linear-gradient(125deg,#062d7a 0%,#0758d8 55%,#087ee7 78%,#10a4b4 100%); } .qnx-cwd-final-grid{ position:absolute; inset:0; opacity:.16; background: linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px); background-size:70px 70px; mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 75%,transparent); } .qnx-cwd-final:after{ content:""; position:absolute; width:280px; height:280px; right:7%; bottom:-170px; border:45px solid rgba(183,229,28,.11); transform:rotate(45deg); } .qnx-cwd-final-content{ position:relative; z-index:2; max-width:820px; text-align:center; } .qnx-cwd-final-content .qnx-cwd-kicker{ color:#b7e51c; } .qnx-cwd-final-content .qnx-cwd-kicker:before{ background:#b7e51c; } .qnx-cwd-final h2{ color:#fff; margin-top:20px; } .qnx-cwd-final h2 strong{ color:#b7e51c; } .qnx-cwd-final p{ max-width:680px; margin:auto; color:#dbe7f6; } .qnx-cwd-final-btn{ background:#fff; color:#0758d8; } .qnx-cwd-final-btn b{ background:#b7e51c; color:#0d1730; } .qnx-cwd-final-mark{ width:55px; height:55px; margin:0 auto 25px; display:grid; place-items:center; background:#b7e51c; color:#0d1730; font-size:22px; font-weight:900; transform:rotate(45deg); box-shadow:0 0 0 10px rgba(183,229,28,.08); } .qnx-cwd-final-mark span{ transform:rotate(-45deg); } /* REVEAL */ .qnx-cwd-intro-copy, .qnx-cwd-browser, .qnx-cwd-editorial, .qnx-cwd-board-column, .qnx-cwd-device, .qnx-cwd-detail-row{ opacity:0; transform:translateY(25px); transition:opacity .8s ease,transform .8s ease; } .qnx-cwd-visible{ opacity:1 !important; transform:translateY(0) !important; } /* TABLET */ @media(max-width:1050px){ .qnx-cwd-intro-wrap, .qnx-cwd-responsive{ grid-template-columns:1fr; } .qnx-cwd-design-stage{ min-height:520px; } .qnx-cwd-section-head, .qnx-cwd-canvas-top{ grid-template-columns:1fr; gap:25px; } .qnx-cwd-editorial{ grid-template-columns:1fr; } .qnx-cwd-board-content{ grid-template-columns:1fr; } .qnx-cwd-board-column{ min-height:280px; border-right:0; border-bottom:1px solid rgba(255,255,255,.1); } .qnx-cwd-devices{ max-width:650px; width:100%; margin:auto; } .qnx-cwd-responsive-copy{ margin:0; } } /* MOBILE */ @media(max-width:700px){ .qnx-cwd-intro, .qnx-cwd-thinking, .qnx-cwd-canvas, .qnx-cwd-responsive, .qnx-cwd-detail-section{ padding:72px 20px; } .qnx-cwd-intro h2, .qnx-cwd-section-head h2, .qnx-cwd-canvas-top h2, .qnx-cwd-responsive-copy h2, .qnx-cwd-detail-intro h2, .qnx-cwd-final h2{ font-size:39px; letter-spacing:-1.8px; } .qnx-cwd-design-stage{ min-height:390px; } .qnx-cwd-browser{ width:100%; } .qnx-cwd-browser-body{ min-height:320px; padding:17px; } .qnx-cwd-mini-nav{ margin-bottom:35px; } .qnx-cwd-visual-grid{ gap:10px; } .qnx-cwd-big-type strong{ font-size:45px; letter-spacing:-3px; } .qnx-cwd-art{ min-height:175px; } .qnx-cwd-art-panel{ height:65px; left:15px; bottom:18px; } .qnx-cwd-browser-bottom{ margin-top:28px; } .qnx-cwd-browser-bottom span{ font-size:6px; } .qnx-cwd-float{ display:none; } .qnx-cwd-cursor{ right:25px; top:50px; width:37px; height:37px; } .qnx-cwd-stage-label{ display:none; } .qnx-cwd-section-head{ display:block; } .qnx-cwd-section-head p{ margin-top:25px; } .qnx-cwd-editorial-main{ grid-template-columns:55px 1fr; padding:35px 24px; gap:20px; } .qnx-cwd-editorial-number{ font-size:55px; } .qnx-cwd-editorial-main h3{ font-size:27px; } .qnx-cwd-editorial-side{ padding:15px 22px; } .qnx-cwd-board-column{ padding:32px 24px; } .qnx-cwd-board-column h3{ font-size:27px; } .qnx-cwd-checks{ grid-template-columns:1fr; } .qnx-cwd-devices{ min-height:350px; transform:scale(.76); transform-origin:center; margin:-20px auto -20px; width:130%; left:-15%; } .qnx-cwd-desktop{ left:0; } .qnx-cwd-tablet{ right:80px; } .qnx-cwd-mobile{ right:-5px; } .qnx-cwd-detail-row{ grid-template-columns:40px 1fr 35px; gap:12px; min-height:120px; } .qnx-cwd-detail-row h3{ font-size:17px; } .qnx-cwd-detail-row p{ font-size:11px; } .qnx-cwd-detail-row:hover{ padding-left:15px; } .qnx-cwd-final{ min-height:470px; padding:70px 20px; } .qnx-cwd-final-mark{ width:48px; height:48px; } } /* ========================================================= QNIX DIGITAL — E-COMMERCE WEB DESIGN ========================================================= */ .qnx-ecd-opening, .qnx-ecd-discovery, .qnx-ecd-product, .qnx-ecd-interface, .qnx-ecd-growth, .qnx-ecd-final{ position:relative; overflow:hidden; font-family:inherit; } /* OPENING */ .qnx-ecd-opening{ padding:95px 6vw 105px; background:#fff; } .qnx-ecd-opening-wrap{ max-width:1320px; min-height:600px; margin:auto; position:relative; display:grid; grid-template-columns:.72fr 1.28fr; gap:75px; align-items:center; } .qnx-ecd-copy{ position:relative; z-index:5; } .qnx-ecd-kicker{ display:inline-flex; align-items:center; gap:10px; color:#0758d8; font-size:10px; font-weight:900; letter-spacing:2.4px; } .qnx-ecd-kicker:before{ content:""; width:27px; height:2px; background:linear-gradient(90deg,#0758d8,#16b98a); } .qnx-ecd-copy h2, .qnx-ecd-discovery-head h2, .qnx-ecd-product-copy h2, .qnx-ecd-interface-head h2, .qnx-ecd-growth-copy h2, .qnx-ecd-final h2{ color:#0d1730; font-size:clamp(40px,4.3vw,66px); line-height:1.02; letter-spacing:-3px; font-weight:500; margin:18px 0 23px; } .qnx-ecd-copy h2 strong, .qnx-ecd-discovery-head h2 strong, .qnx-ecd-product-copy h2 strong, .qnx-ecd-interface-head h2 strong, .qnx-ecd-growth-copy h2 strong{ color:#0758d8; font-weight:850; } .qnx-ecd-copy p, .qnx-ecd-discovery-head p, .qnx-ecd-product-copy > p, .qnx-ecd-growth-copy > p, .qnx-ecd-final p{ color:#5d6b84; font-size:15px; line-height:1.85; max-width:575px; margin:0; } .qnx-ecd-btn, .qnx-ecd-final-btn{ display:inline-flex; align-items:center; gap:17px; margin-top:31px; padding:14px 16px 14px 21px; background:#0758d8; color:#fff; text-decoration:none; font-size:12px; font-weight:850; transition:.35s ease; } .qnx-ecd-btn b, .qnx-ecd-final-btn b{ width:35px; height:35px; display:grid; place-items:center; background:#b7e51c; color:#0d1730; font-size:17px; transition:.35s ease; } .qnx-ecd-btn:hover, .qnx-ecd-final-btn:hover{ transform:translateY(-4px); box-shadow:0 20px 38px rgba(7,88,216,.2); } .qnx-ecd-btn:hover b, .qnx-ecd-final-btn:hover b{ transform:rotate(45deg); } /* STORE */ .qnx-ecd-storefront{ position:relative; min-height:535px; padding:22px; background:#f4f8ff; border:1px solid #dbe5f2; box-shadow:0 35px 75px rgba(17,55,110,.13); transform:rotate(1.5deg); transition:.6s ease; } .qnx-ecd-storefront:hover{ transform:rotate(0) translateY(-7px); box-shadow:0 42px 85px rgba(17,55,110,.18); } .qnx-ecd-store-top{ height:40px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #dce6f3; } .qnx-ecd-store-brand{ color:#0d1730; font-size:9px; font-weight:900; letter-spacing:1.8px; } .qnx-ecd-store-links{ display:flex; align-items:center; gap:22px; } .qnx-ecd-store-links span{ color:#65758d; font-size:7px; font-weight:800; letter-spacing:1.1px; } .qnx-ecd-store-links i{ width:20px; height:20px; border:1px solid #0758d8; position:relative; } .qnx-ecd-store-links i:after{ content:""; position:absolute; width:6px; height:6px; border:1px solid #0758d8; border-radius:50%; right:3px; top:3px; } .qnx-ecd-store-hero{ min-height:390px; display:grid; grid-template-columns:1fr .9fr; align-items:center; gap:25px; padding:35px 15px 15px; } .qnx-ecd-store-heading small{ color:#16b98a; font-size:8px; font-weight:900; letter-spacing:1.6px; } .qnx-ecd-store-heading h3{ margin:17px 0 24px; color:#0d1730; font-size:clamp(43px,5vw,68px); line-height:.86; letter-spacing:-4px; } .qnx-ecd-store-heading h3 em{ color:#0758d8; font-style:normal; } .qnx-ecd-store-heading > span{ color:#0758d8; font-size:10px; font-weight:900; } .qnx-ecd-product-art{ position:relative; height:340px; overflow:hidden; background:linear-gradient(145deg,#062d7a,#0758d8 55%,#08a8cf); } .qnx-ecd-product-art:before{ content:""; position:absolute; width:280px; height:280px; border:1px solid rgba(255,255,255,.3); border-radius:50%; left:-80px; top:25px; } .qnx-ecd-product-art:after{ content:""; position:absolute; width:190px; height:190px; border:1px solid rgba(183,229,28,.5); transform:rotate(45deg); right:-70px; bottom:-60px; } .qnx-ecd-product-shape{ position:absolute; width:130px; height:230px; left:50%; top:47%; transform:translate(-50%,-50%) rotate(-7deg); border-radius:48px 48px 30px 30px; background:linear-gradient(90deg,#fff,#dfe9f5,#fff); box-shadow:25px 25px 40px rgba(6,45,122,.28); z-index:3; } .qnx-ecd-product-shape:before{ content:""; position:absolute; width:68px; height:34px; left:31px; top:-25px; background:#0d1730; border-radius:10px 10px 4px 4px; } .qnx-ecd-product-shape:after{ content:""; position:absolute; width:78px; height:85px; left:26px; top:78px; background:#0758d8; } .qnx-ecd-product-shadow{ position:absolute; width:180px; height:35px; left:50%; bottom:52px; transform:translateX(-50%); background:rgba(6,45,122,.35); filter:blur(15px); } .qnx-ecd-product-art > span{ position:absolute; left:18px; bottom:15px; color:#b7e51c; font-size:8px; line-height:1.5; letter-spacing:1.3px; font-weight:900; z-index:4; } .qnx-ecd-product-strip{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #dce6f3; } .qnx-ecd-product-strip div{ padding:15px 13px 5px; border-right:1px solid #dce6f3; } .qnx-ecd-product-strip div:last-child{ border:0; } .qnx-ecd-product-strip small{ display:block; color:#8090a7; font-size:7px; letter-spacing:1px; } .qnx-ecd-product-strip strong{ display:block; margin-top:3px; color:#0758d8; font-size:12px; } .qnx-ecd-floating{ position:absolute; padding:12px 15px; background:#fff; border:1px solid #dce6f3; box-shadow:0 15px 35px rgba(17,55,110,.13); z-index:6; } .qnx-ecd-floating span{ display:block; color:#8090a7; font-size:7px; letter-spacing:1.2px; margin-bottom:4px; } .qnx-ecd-floating strong{ color:#0758d8; font-size:13px; } .qnx-ecd-floating-a{ top:90px; right:-18px; } .qnx-ecd-floating-b{ bottom:70px; left:40%; } /* DISCOVERY */ .qnx-ecd-discovery{ padding:105px 6vw; background:#f4f8ff; } .qnx-ecd-discovery-head{ max-width:1320px; margin:auto; display:grid; grid-template-columns:1fr .8fr; column-gap:90px; align-items:end; } .qnx-ecd-discovery-head .qnx-ecd-kicker{ grid-column:1/-1; } .qnx-ecd-discovery-head h2{ margin-bottom:0; } .qnx-ecd-discovery-head p{ padding-bottom:5px; } .qnx-ecd-journey{ max-width:1320px; margin:75px auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; } .qnx-ecd-journey-line{ position:absolute; top:38px; left:9%; right:9%; height:1px; background:linear-gradient(90deg,#0758d8,#08a8cf,#16b98a,#79c91c); } .qnx-ecd-journey-item{ position:relative; padding:0 27px; z-index:2; } .qnx-ecd-journey-symbol{ position:relative; width:76px; height:76px; display:grid; place-items:center; margin-bottom:27px; background:#f4f8ff; border:1px solid #cbd9e9; } .qnx-ecd-journey-symbol i{ width:26px; height:26px; display:block; border:5px solid #0758d8; transform:rotate(45deg); } .qnx-ecd-journey-item:nth-child(3) .qnx-ecd-journey-symbol i{ border-color:#08a8cf; } .qnx-ecd-journey-item:nth-child(4) .qnx-ecd-journey-symbol i{ border-color:#16b98a; } .qnx-ecd-journey-item:nth-child(5) .qnx-ecd-journey-symbol i{ border-color:#79c91c; } .qnx-ecd-journey-symbol span{ position:absolute; right:-8px; bottom:-7px; padding:5px 7px; background:#0d1730; color:#fff; font-size:7px; font-weight:900; } .qnx-ecd-journey-item small{ color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1.8px; } .qnx-ecd-journey-item h3{ margin:10px 0 10px; color:#0d1730; font-size:21px; } .qnx-ecd-journey-item p{ margin:0; color:#68778e; font-size:12px; line-height:1.7; } /* PRODUCT */ .qnx-ecd-product{ padding:110px 6vw; background:#fff; } .qnx-ecd-product-layout{ max-width:1320px; margin:auto; display:grid; grid-template-columns:.92fr 1.08fr; gap:95px; align-items:center; } .qnx-ecd-product-preview{ padding:18px; background:#0d1730; box-shadow:0 30px 65px rgba(17,55,110,.17); transform:rotate(-1.5deg); } .qnx-ecd-preview-label{ padding:3px 5px 15px; color:#7890ad; font-size:7px; letter-spacing:1.7px; } .qnx-ecd-product-image{ position:relative; height:450px; overflow:hidden; background: linear-gradient(rgba(8,168,207,.1) 1px,transparent 1px), linear-gradient(90deg,rgba(8,168,207,.1) 1px,transparent 1px), linear-gradient(145deg,#062d7a,#0758d8); background-size:34px 34px,34px 34px,auto; } .qnx-ecd-image-glow{ position:absolute; width:270px; height:270px; left:50%; top:48%; transform:translate(-50%,-50%); border-radius:50%; background:rgba(8,168,207,.25); filter:blur(25px); } .qnx-ecd-bottle{ position:absolute; width:155px; height:285px; left:50%; top:50%; transform:translate(-50%,-48%) rotate(7deg); border-radius:35px 35px 22px 22px; background:linear-gradient(90deg,#eef5fb,#fff,#d2e0ef); box-shadow:28px 35px 45px rgba(6,45,122,.4); z-index:3; } .qnx-ecd-bottle-cap{ position:absolute; width:70px; height:48px; left:42px; top:-37px; border-radius:10px 10px 3px 3px; background:#0d1730; } .qnx-ecd-bottle-label{ position:absolute; width:100%; height:110px; left:0; top:85px; padding:15px; background:#0758d8; color:#fff; text-align:center; } .qnx-ecd-bottle-label small{ display:block; color:#b7e51c; font-size:8px; letter-spacing:2px; font-weight:900; } .qnx-ecd-bottle-label strong{ display:block; margin:10px 0 5px; font-size:25px; letter-spacing:-1px; } .qnx-ecd-bottle-label span{ font-size:6px; letter-spacing:1.2px; } .qnx-ecd-image-number{ position:absolute; right:18px; top:15px; color:#b7e51c; font-size:45px; font-weight:900; opacity:.55; } .qnx-ecd-preview-bottom{ display:flex; justify-content:space-between; align-items:center; padding:15px 4px 2px; } .qnx-ecd-preview-bottom span{ color:#7890ad; font-size:7px; letter-spacing:1.5px; } .qnx-ecd-preview-bottom b{ color:#b7e51c; font-size:16px; } .qnx-ecd-product-copy .qnx-ecd-kicker{ color:#10a4b4; } .qnx-ecd-product-copy .qnx-ecd-kicker:before{ background:#10a4b4; } .qnx-ecd-product-copy h2{ margin-bottom:24px; } .qnx-ecd-feature-list{ margin-top:38px; border-top:1px solid #dce6f3; } .qnx-ecd-feature-list > div{ display:grid; grid-template-columns:38px 1fr; gap:17px; padding:20px 0; border-bottom:1px solid #dce6f3; } .qnx-ecd-feature-list > div > span{ color:#0758d8; font-size:9px; font-weight:900; } .qnx-ecd-feature-list strong{ color:#0d1730; font-size:15px; } .qnx-ecd-feature-list p{ margin:5px 0 0; color:#6c7b91; font-size:12px; line-height:1.65; } /* INTERFACE */ .qnx-ecd-interface{ padding:100px 6vw; background:#f4f8ff; } .qnx-ecd-interface-head{ max-width:1320px; margin:auto; } .qnx-ecd-interface-head h2{ font-size:clamp(39px,4vw,58px); } .qnx-ecd-interface-board{ max-width:1320px; margin:60px auto 0; display:grid; grid-template-columns:125px 1fr; min-height:420px; background:#0d1730; border:1px solid #d6e1ee; box-shadow:0 30px 65px rgba(17,55,110,.12); } .qnx-ecd-interface-sidebar{ padding:25px 18px; display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid rgba(255,255,255,.1); } .qnx-ecd-interface-sidebar span{ color:#08a8cf; font-size:8px; line-height:1.7; letter-spacing:1.5px; font-weight:900; } .qnx-ecd-interface-sidebar b{ color:#b7e51c; font-size:7px; letter-spacing:1px; } .qnx-ecd-interface-content{ padding:22px 30px; } .qnx-ecd-ui-row{ min-height:85px; display:grid; grid-template-columns:145px 1fr; align-items:center; border-bottom:1px solid rgba(255,255,255,.1); } .qnx-ecd-ui-row:last-child{ border-bottom:0; } .qnx-ecd-ui-label{ display:flex; align-items:center; gap:15px; } .qnx-ecd-ui-label small{ color:#5d789b; font-size:8px; } .qnx-ecd-ui-label strong{ color:#fff; font-size:13px; letter-spacing:1px; } .qnx-ecd-ui-track{ display:flex; gap:8px; flex-wrap:wrap; } .qnx-ecd-ui-track span{ padding:9px 12px; border:1px solid rgba(255,255,255,.13); color:#a8bad0; font-size:8px; letter-spacing:.7px; transition:.3s ease; } .qnx-ecd-ui-row:hover .qnx-ecd-ui-track span{ border-color:#08a8cf; color:#fff; transform:translateY(-2px); } .qnx-ecd-ui-row-large{ min-height:105px; } .qnx-ecd-ui-row-large .qnx-ecd-ui-track span:first-child{ background:#0758d8; border-color:#0758d8; color:#fff; } /* GROWTH */ .qnx-ecd-growth{ padding:110px 6vw; background:#fff; } .qnx-ecd-growth-inner{ max-width:1320px; margin:auto; display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:center; } .qnx-ecd-growth-copy h2{ font-size:clamp(40px,4vw,60px); } .qnx-ecd-growth-points{ display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; } .qnx-ecd-growth-points span{ padding:10px 13px; background:#f4f8ff; border-left:3px solid #0758d8; color:#34465f; font-size:10px; font-weight:750; } .qnx-ecd-growth-visual{ position:relative; height:420px; overflow:hidden; background:#f4f8ff; border:1px solid #dce6f3; } .qnx-ecd-growth-axis{ position:absolute; width:600px; height:600px; border:1px solid #cbd9e8; transform:rotate(45deg); right:-150px; top:-90px; } .qnx-ecd-growth-axis:before, .qnx-ecd-growth-axis:after{ content:""; position:absolute; background:#0758d8; } .qnx-ecd-growth-axis:before{ width:1px; height:780px; left:50%; top:-90px; transform:rotate(-45deg); } .qnx-ecd-growth-axis:after{ width:780px; height:1px; left:-90px; top:50%; transform:rotate(-45deg); } .qnx-ecd-growth-word{ position:absolute; font-size:clamp(29px,3vw,48px); font-weight:900; letter-spacing:-2px; } .word-one{ left:45px; top:55px; color:#0758d8; } .word-two{ left:32%; top:47%; color:#08a8cf; } .word-three{ right:35px; bottom:45px; color:#16b98a; } .qnx-ecd-growth-arrow{ position:absolute; width:55px; height:55px; display:grid; place-items:center; right:33%; top:30%; background:#b7e51c; color:#0d1730; font-size:22px; font-weight:900; transform:rotate(45deg); box-shadow:0 15px 30px rgba(123,197,31,.22); } .qnx-ecd-growth-arrow::first-letter{ transform:rotate(-45deg); } .qnx-ecd-growth-caption{ position:absolute; left:25px; bottom:18px; display:flex; gap:12px; align-items:center; color:#708096; font-size:7px; letter-spacing:1.5px; font-weight:900; } .qnx-ecd-growth-caption strong{ color:#0758d8; font-size:12px; } /* FINAL */ .qnx-ecd-final{ min-height:500px; padding:90px 6vw; display:flex; justify-content:center; align-items:center; background: radial-gradient(circle at 75% 30%,rgba(8,168,207,.25),transparent 27%), linear-gradient(120deg,#062d7a,#0758d8 56%,#087ee7 80%,#10a4b4); } .qnx-ecd-final-grid{ position:absolute; inset:0; background: linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px); background-size:62px 62px; opacity:.25; } .qnx-ecd-final-shape{ position:absolute; width:360px; height:360px; right:-130px; bottom:-170px; border:50px solid rgba(183,229,28,.11); transform:rotate(45deg); } .qnx-ecd-final-content{ position:relative; z-index:3; max-width:820px; text-align:center; } .qnx-ecd-final-content .qnx-ecd-kicker{ color:#b7e51c; } .qnx-ecd-final-content .qnx-ecd-kicker:before{ background:#b7e51c; } .qnx-ecd-final h2{ color:#fff; margin-top:20px; } .qnx-ecd-final h2 strong{ color:#b7e51c; } .qnx-ecd-final p{ max-width:680px; margin:auto; color:#dbe7f4; } .qnx-ecd-final-btn{ background:#fff; color:#0758d8; } .qnx-ecd-cart-mark{ width:60px; height:48px; margin:0 auto 25px; position:relative; border:3px solid #b7e51c; border-top:0; transform:skewX(-8deg); } .qnx-ecd-cart-mark:before{ content:""; position:absolute; width:70px; height:3px; left:-8px; top:-7px; background:#b7e51c; } .qnx-ecd-cart-mark:after{ content:""; position:absolute; width:9px; height:9px; border-radius:50%; background:#b7e51c; left:10px; bottom:-16px; box-shadow:34px 0 0 #b7e51c; } .qnx-ecd-cart-mark span{ display:none; } .qnx-ecd-cart-mark i{ position:absolute; width:24px; height:24px; right:10px; top:8px; border:2px solid #08a8cf; } /* REVEAL */ .qnx-ecd-copy, .qnx-ecd-storefront, .qnx-ecd-journey-item, .qnx-ecd-product-preview, .qnx-ecd-product-copy, .qnx-ecd-interface-board, .qnx-ecd-growth-copy, .qnx-ecd-growth-visual, .qnx-ecd-final-content{ opacity:0; transform:translateY(25px); transition:opacity .8s ease,transform .8s ease; } .qnx-ecd-visible{ opacity:1 !important; transform:translateY(0) !important; } /* TABLET */ @media(max-width:1050px){ .qnx-ecd-opening-wrap, .qnx-ecd-product-layout, .qnx-ecd-growth-inner{ grid-template-columns:1fr; } .qnx-ecd-copy{ max-width:700px; } .qnx-ecd-storefront{ max-width:850px; width:100%; margin:auto; } .qnx-ecd-discovery-head{ grid-template-columns:1fr; gap:25px; } .qnx-ecd-journey{ grid-template-columns:repeat(2,1fr); row-gap:55px; } .qnx-ecd-journey-line{ display:none; } .qnx-ecd-product-preview{ max-width:620px; margin:auto; } .qnx-ecd-growth-copy{ max-width:650px; } } /* MOBILE */ @media(max-width:700px){ .qnx-ecd-opening, .qnx-ecd-discovery, .qnx-ecd-product, .qnx-ecd-interface, .qnx-ecd-growth{ padding:72px 20px; } .qnx-ecd-copy h2, .qnx-ecd-discovery-head h2, .qnx-ecd-product-copy h2, .qnx-ecd-interface-head h2, .qnx-ecd-growth-copy h2, .qnx-ecd-final h2{ font-size:39px; letter-spacing:-1.8px; } .qnx-ecd-opening-wrap{ min-height:0; } .qnx-ecd-storefront{ min-height:420px; padding:14px; transform:none; } .qnx-ecd-store-top{ height:34px; } .qnx-ecd-store-links span{ display:none; } .qnx-ecd-store-hero{ min-height:310px; grid-template-columns:1fr .85fr; padding:25px 5px 8px; } .qnx-ecd-store-heading h3{ font-size:42px; letter-spacing:-2.8px; } .qnx-ecd-product-art{ height:270px; } .qnx-ecd-product-shape{ width:95px; height:180px; } .qnx-ecd-product-shape:before{ width:52px; height:29px; left:21px; top:-22px; } .qnx-ecd-product-shape:after{ width:58px; height:65px; left:18px; top:60px; } .qnx-ecd-floating{ display:none; } .qnx-ecd-journey{ grid-template-columns:1fr; gap:38px; margin-top:50px; } .qnx-ecd-journey-item{ padding:0; display:grid; grid-template-columns:78px 1fr; column-gap:18px; } .qnx-ecd-journey-symbol{ grid-row:span 3; margin:0; } .qnx-ecd-journey-item small{ align-self:end; } .qnx-ecd-journey-item h3{ margin:5px 0 7px; } .qnx-ecd-journey-item p{ margin-bottom:5px; } .qnx-ecd-product-image{ height:370px; } .qnx-ecd-bottle{ transform:translate(-50%,-48%) rotate(5deg) scale(.85); } .qnx-ecd-interface-board{ grid-template-columns:1fr; margin-top:45px; } .qnx-ecd-interface-sidebar{ min-height:75px; flex-direction:row; align-items:center; border-right:0; border-bottom:1px solid rgba(255,255,255,.1); } .qnx-ecd-interface-content{ padding:10px 18px; } .qnx-ecd-ui-row{ grid-template-columns:90px 1fr; min-height:105px; } .qnx-ecd-ui-track{ gap:5px; } .qnx-ecd-ui-track span{ padding:7px 8px; font-size:7px; } .qnx-ecd-growth-visual{ height:330px; } .qnx-ecd-growth-word{ font-size:27px; } .qnx-ecd-growth-arrow{ width:45px; height:45px; right:27%; } .qnx-ecd-final{ min-height:460px; padding:70px 20px; } } /* ========================================================= QNIX DIGITAL — BUSINESS WEBSITE DESIGN ========================================================= */ .qnx-bwd-opening, .qnx-bwd-story, .qnx-bwd-identity, .qnx-bwd-business, .qnx-bwd-pages, .qnx-bwd-responsive, .qnx-bwd-final{ position:relative; overflow:hidden; font-family:inherit; } /* OPENING */ .qnx-bwd-opening{ padding:95px 6vw 105px; background:#f4f8ff; } .qnx-bwd-opening-wrap{ max-width:1320px; min-height:570px; margin:auto; position:relative; display:grid; grid-template-columns:.78fr 1.22fr; gap:75px; align-items:center; } .qnx-bwd-copy{ position:relative; z-index:4; } .qnx-bwd-kicker{ display:inline-flex; align-items:center; gap:10px; color:#0758d8; font-size:10px; font-weight:900; letter-spacing:2.4px; } .qnx-bwd-kicker:before{ content:""; width:27px; height:2px; background:linear-gradient(90deg,#0758d8,#16b98a); } .qnx-bwd-copy h2, .qnx-bwd-story-head h2, .qnx-bwd-identity-copy h2, .qnx-bwd-business-head h2, .qnx-bwd-pages-head h2, .qnx-bwd-responsive-copy h2, .qnx-bwd-final h2{ margin:18px 0 22px; color:#0d1730; font-size:clamp(40px,4.25vw,65px); line-height:1.03; letter-spacing:-2.8px; font-weight:500; } .qnx-bwd-copy h2 strong, .qnx-bwd-story-head h2 strong, .qnx-bwd-identity-copy h2 strong, .qnx-bwd-business-head h2 strong, .qnx-bwd-pages-head h2 strong, .qnx-bwd-responsive-copy h2 strong{ color:#0758d8; font-weight:850; } .qnx-bwd-copy p, .qnx-bwd-story-head p, .qnx-bwd-identity-copy > p, .qnx-bwd-business-head p, .qnx-bwd-pages-copy > p, .qnx-bwd-responsive-copy > p, .qnx-bwd-final p{ max-width:590px; margin:0; color:#5d6b84; font-size:15px; line-height:1.85; } .qnx-bwd-btn, .qnx-bwd-final-btn{ display:inline-flex; align-items:center; gap:17px; margin-top:31px; padding:14px 16px 14px 21px; background:#0758d8; color:#fff; text-decoration:none; font-size:12px; font-weight:850; transition:.35s ease; } .qnx-bwd-btn b, .qnx-bwd-final-btn b{ width:35px; height:35px; display:grid; place-items:center; background:#b7e51c; color:#0d1730; font-size:17px; transition:.35s ease; } .qnx-bwd-btn:hover, .qnx-bwd-final-btn:hover{ transform:translateY(-4px); box-shadow:0 18px 38px rgba(7,88,216,.2); } .qnx-bwd-btn:hover b, .qnx-bwd-final-btn:hover b{ transform:rotate(45deg); } /* BRAND BOARD */ .qnx-bwd-brand-board{ position:relative; min-height:520px; background:#fff; border:1px solid #d9e4f1; box-shadow:0 35px 75px rgba(17,55,110,.13); transform:rotate(1.3deg); transition:.55s ease; } .qnx-bwd-brand-board:hover{ transform:rotate(0) translateY(-7px); } .qnx-bwd-board-top{ height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; border-bottom:1px solid #e0e8f2; } .qnx-bwd-board-top span{ color:#718198; font-size:7px; letter-spacing:1.7px; font-weight:900; } .qnx-bwd-board-top b{ color:#0758d8; font-size:8px; letter-spacing:1.2px; } .qnx-bwd-board-main{ min-height:405px; display:grid; grid-template-columns:.82fr 1.18fr; } .qnx-bwd-brand-column{ position:relative; padding:32px; background:#0758d8; overflow:hidden; } .qnx-bwd-brand-column:before{ content:""; position:absolute; width:300px; height:300px; border:1px solid rgba(255,255,255,.25); transform:rotate(45deg); right:-160px; top:-80px; } .qnx-bwd-brand-column small{ position:relative; color:#b7e51c; font-size:8px; letter-spacing:1.5px; font-weight:900; } .qnx-bwd-brand-column > strong{ position:relative; display:block; margin-top:55px; color:#fff; font-size:42px; line-height:.88; letter-spacing:-2px; } .qnx-bwd-brand-mark{ position:absolute; width:100px; height:100px; right:28px; bottom:55px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.4); transform:rotate(45deg); } .qnx-bwd-brand-mark span{ color:#b7e51c; font-size:35px; font-weight:900; transform:rotate(-45deg); } .qnx-bwd-brand-column p{ position:absolute; bottom:20px; left:32px; color:#dbe8f6; font-size:9px; line-height:1.6; letter-spacing:1px; } .qnx-bwd-board-message{ padding:48px 42px; background: linear-gradient(rgba(7,88,216,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.055) 1px,transparent 1px), #f9fbfe; background-size:35px 35px; } .qnx-bwd-board-message > span{ color:#16b98a; font-size:8px; letter-spacing:1.8px; font-weight:900; } .qnx-bwd-board-message h3{ margin:28px 0; color:#0d1730; font-size:clamp(42px,5vw,68px); line-height:.86; letter-spacing:-4px; } .qnx-bwd-board-message h3 em{ color:#0758d8; font-style:normal; } .qnx-bwd-message-line{ width:85%; height:2px; margin:30px 0; background:linear-gradient(90deg,#0758d8,#08a8cf,#16b98a); } .qnx-bwd-board-message small{ color:#7b8aa0; font-size:8px; letter-spacing:1.3px; } .qnx-bwd-board-footer{ height:66px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #dce6f3; } .qnx-bwd-board-footer span{ display:grid; place-items:center; border-right:1px solid #dce6f3; color:#63738b; font-size:7px; letter-spacing:1.3px; font-weight:900; } .qnx-bwd-board-footer span:last-child{ border:0; color:#0758d8; } .qnx-bwd-floating{ position:absolute; z-index:5; padding:12px 15px; background:#fff; border:1px solid #dce6f3; box-shadow:0 15px 35px rgba(17,55,110,.13); } .qnx-bwd-floating small{ display:block; color:#8190a6; font-size:7px; letter-spacing:1.2px; margin-bottom:4px; } .qnx-bwd-floating strong{ color:#0758d8; font-size:13px; } .qnx-bwd-floating-a{ top:75px; right:-22px; } .qnx-bwd-floating-b{ left:40%; bottom:48px; } /* STORY */ .qnx-bwd-story{ padding:105px 6vw; background:#fff; } .qnx-bwd-story-head{ max-width:1320px; margin:auto; display:grid; grid-template-columns:1fr .8fr; column-gap:100px; align-items:end; } .qnx-bwd-story-head .qnx-bwd-kicker{ grid-column:1/-1; } .qnx-bwd-story-head h2{ margin-bottom:0; } .qnx-bwd-story-head p{ padding-bottom:4px; } .qnx-bwd-story-track{ max-width:1320px; margin:75px auto 0; display:grid; grid-template-columns:repeat(4,1fr); position:relative; } .qnx-bwd-story-line{ position:absolute; left:8%; right:8%; top:39px; height:1px; background:linear-gradient(90deg,#0758d8,#087ee7,#08a8cf,#16b98a); } .qnx-bwd-story-step{ position:relative; padding:0 25px; z-index:2; } .qnx-bwd-story-icon{ position:relative; width:78px; height:78px; margin-bottom:26px; display:grid; place-items:center; background:#fff; border:1px solid #cdd9e7; } .qnx-bwd-story-icon i{ width:28px; height:28px; border:5px solid #0758d8; transform:rotate(45deg); } .qnx-bwd-story-step:nth-child(3) .qnx-bwd-story-icon i{ border-color:#087ee7; } .qnx-bwd-story-step:nth-child(4) .qnx-bwd-story-icon i{ border-color:#08a8cf; } .qnx-bwd-story-step:nth-child(5) .qnx-bwd-story-icon i{ border-color:#16b98a; } .qnx-bwd-story-icon span{ position:absolute; right:-7px; bottom:-7px; padding:5px 7px; background:#0d1730; color:#fff; font-size:7px; font-weight:900; } .qnx-bwd-story-step small{ color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1.7px; } .qnx-bwd-story-step h3{ margin:10px 0; color:#0d1730; font-size:21px; } .qnx-bwd-story-step p{ margin:0; color:#68778e; font-size:12px; line-height:1.7; } /* IDENTITY */ .qnx-bwd-identity{ padding:110px 6vw; background:#f4f8ff; } .qnx-bwd-identity-wrap{ max-width:1320px; margin:auto; display:grid; grid-template-columns:1fr .9fr; gap:95px; align-items:center; } .qnx-bwd-identity-visual{ position:relative; min-height:510px; overflow:hidden; background:#0d1730; box-shadow:0 30px 65px rgba(17,55,110,.15); } .qnx-bwd-identity-grid{ position:absolute; inset:0; background: linear-gradient(rgba(8,168,207,.09) 1px,transparent 1px), linear-gradient(90deg,rgba(8,168,207,.09) 1px,transparent 1px); background-size:42px 42px; } .qnx-bwd-identity-label{ position:absolute; top:22px; left:23px; right:23px; display:flex; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.12); } .qnx-bwd-identity-label span{ color:#08a8cf; font-size:7px; letter-spacing:1.5px; font-weight:900; } .qnx-bwd-identity-label b{ color:#b7e51c; font-size:7px; } .qnx-bwd-identity-word{ position:absolute; left:35px; top:145px; display:flex; flex-direction:column; color:#fff; font-size:clamp(65px,7vw,105px); line-height:.72; letter-spacing:-7px; font-weight:900; } .qnx-bwd-identity-word span{ color:#087ee7; } .qnx-bwd-identity-word strong{ color:#fff; } .qnx-bwd-identity-shape{ position:absolute; border:1px solid rgba(183,229,28,.55); transform:rotate(45deg); } .shape-one{ width:250px; height:250px; right:-75px; top:50px; } .shape-two{ width:120px; height:120px; right:110px; bottom:40px; border-color:rgba(8,168,207,.5); } .qnx-bwd-identity-note{ position:absolute; right:28px; bottom:28px; width:190px; padding:18px; background:#0758d8; } .qnx-bwd-identity-note small{ display:block; color:#b7e51c; font-size:7px; letter-spacing:1.5px; font-weight:900; } .qnx-bwd-identity-note strong{ display:block; margin-top:9px; color:#fff; font-size:14px; line-height:1.25; } .qnx-bwd-identity-copy .qnx-bwd-kicker{ color:#10a4b4; } .qnx-bwd-identity-copy .qnx-bwd-kicker:before{ background:#10a4b4; } .qnx-bwd-principles{ margin-top:38px; border-top:1px solid #d8e3ef; } .qnx-bwd-principles > div{ display:grid; grid-template-columns:38px 1fr; gap:17px; padding:19px 0; border-bottom:1px solid #d8e3ef; } .qnx-bwd-principles > div > span{ color:#0758d8; font-size:9px; font-weight:900; } .qnx-bwd-principles strong{ color:#0d1730; font-size:15px; } .qnx-bwd-principles p{ margin:5px 0 0; color:#6c7b91; font-size:12px; line-height:1.65; } /* BUSINESS MAP */ .qnx-bwd-business{ padding:105px 6vw; background:#fff; } .qnx-bwd-business-head{ max-width:1320px; margin:auto; } .qnx-bwd-business-head h2{ font-size:clamp(40px,4vw,58px); } .qnx-bwd-business-map{ max-width:1000px; height:560px; margin:65px auto 0; position:relative; } .qnx-bwd-map-center{ position:absolute; left:50%; top:50%; width:205px; height:205px; transform:translate(-50%,-50%); display:flex; flex-direction:column; justify-content:center; align-items:center; background:#0758d8; color:#fff; box-shadow:0 25px 55px rgba(7,88,216,.22); z-index:4; } .qnx-bwd-map-center:before{ content:""; position:absolute; inset:-15px; border:1px solid #cbd9e8; transform:rotate(45deg); z-index:-1; } .qnx-bwd-map-center span{ color:#b7e51c; font-size:8px; letter-spacing:2px; font-weight:900; } .qnx-bwd-map-center strong{ margin:9px 0; font-size:29px; letter-spacing:-1px; } .qnx-bwd-map-center small{ color:#cddff1; font-size:7px; letter-spacing:1.4px; } .qnx-bwd-map-item{ position:absolute; width:220px; padding:18px; background:#f4f8ff; border:1px solid #d5e0ed; box-shadow:0 15px 35px rgba(17,55,110,.08); z-index:3; transition:.35s ease; } .qnx-bwd-map-item:hover{ transform:translateY(-6px); border-color:#0758d8; box-shadow:0 22px 45px rgba(7,88,216,.13); } .qnx-bwd-map-item b{ display:block; color:#0758d8; font-size:8px; margin-bottom:9px; } .qnx-bwd-map-item strong{ display:block; color:#0d1730; font-size:13px; letter-spacing:1px; } .qnx-bwd-map-item span{ display:block; margin-top:6px; color:#6d7c92; font-size:10px; line-height:1.5; } .map-top{ left:50%; top:0; transform:translateX(-50%); } .map-right{ right:0; top:50%; transform:translateY(-50%); } .map-bottom{ left:50%; bottom:0; transform:translateX(-50%); } .map-left{ left:0; top:50%; transform:translateY(-50%); } .map-top:hover, .map-bottom:hover{ transform:translateX(-50%) translateY(-6px); } .map-right:hover, .map-left:hover{ transform:translateY(-50%) translateY(-6px); } .qnx-bwd-map-connector{ position:absolute; background:#cbd9e8; z-index:1; } .connector-one{ width:1px; height:125px; left:50%; top:95px; } .connector-two{ height:1px; width:145px; right:205px; top:50%; } .connector-three{ width:1px; height:125px; left:50%; bottom:95px; } .connector-four{ height:1px; width:145px; left:205px; top:50%; } /* PAGES */ .qnx-bwd-pages{ padding:105px 6vw; background:#f4f8ff; } .qnx-bwd-pages-head{ max-width:1320px; margin:auto; } .qnx-bwd-pages-head h2{ font-size:clamp(40px,4vw,58px); } .qnx-bwd-pages-layout{ max-width:1320px; margin:65px auto 0; display:grid; grid-template-columns:1fr .8fr; gap:110px; align-items:center; } .qnx-bwd-page-stack{ position:relative; height:440px; } .qnx-bwd-page{ position:absolute; width:410px; height:290px; padding:25px; background:#fff; border:1px solid #d8e3ef; box-shadow:0 25px 50px rgba(17,55,110,.11); } .qnx-bwd-page small{ color:#7c8ca1; font-size:7px; letter-spacing:1.5px; } .qnx-bwd-page strong{ display:block; margin-top:35px; color:#0d1730; font-size:33px; line-height:.95; letter-spacing:-1.5px; } .page-back{ left:95px; top:65px; transform:rotate(8deg); background:#087ee7; } .page-back strong{ color:#fff; } .page-middle{ left:48px; top:35px; transform:rotate(-5deg); background:#08a8cf; } .page-middle strong{ color:#fff; } .page-front{ left:0; top:0; transform:rotate(-1deg); background:#fff; } .qnx-bwd-page-arrow{ position:absolute; right:25px; bottom:23px; width:42px; height:42px; display:grid; place-items:center; background:#b7e51c; color:#0d1730; font-weight:900; } .qnx-bwd-pages-copy > p{ max-width:470px; } .qnx-bwd-page-list{ margin-top:35px; border-top:1px solid #d7e2ee; } .qnx-bwd-page-list div{ display:grid; grid-template-columns:105px 1fr; padding:16px 0; border-bottom:1px solid #d7e2ee; } .qnx-bwd-page-list span{ color:#0758d8; font-size:9px; font-weight:900; letter-spacing:1px; } .qnx-bwd-page-list p{ margin:0; color:#64748b; font-size:11px; } /* RESPONSIVE */ .qnx-bwd-responsive{ padding:105px 6vw; background:#fff; display:grid; grid-template-columns:.85fr 1.15fr; gap:90px; align-items:center; } .qnx-bwd-responsive-copy{ max-width:600px; margin-left:auto; } .qnx-bwd-responsive-points{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:30px; } .qnx-bwd-responsive-points span{ padding:10px 12px; background:#f4f8ff; border-left:3px solid #0758d8; color:#31445e; font-size:10px; font-weight:750; } .qnx-bwd-screen-stage{ position:relative; min-height:430px; } .qnx-bwd-screen{ position:absolute; overflow:hidden; background:#0d1730; border:5px solid #d6e1ed; box-shadow:0 30px 55px rgba(17,55,110,.17); transition:.5s ease; } .qnx-bwd-screen-top{ height:35px; padding:0 12px; display:flex; justify-content:space-between; align-items:center; background:#fff; } .qnx-bwd-screen-top span{ color:#6f7e94; font-size:6px; letter-spacing:1.2px; font-weight:900; } .qnx-bwd-screen-top i{ width:25px; height:4px; background:#0758d8; } .qnx-bwd-screen-content{ position:relative; height:100%; padding:30px; overflow:hidden; } .qnx-bwd-screen-content:before{ content:""; position:absolute; width:180px; height:180px; right:-65px; top:25px; border:35px solid rgba(8,168,207,.25); transform:rotate(45deg); } .qnx-bwd-screen-content small{ position:relative; z-index:2; color:#b7e51c; font-size:7px; letter-spacing:1.2px; } .qnx-bwd-screen-content strong{ position:relative; z-index:2; display:block; margin-top:28px; color:#fff; font-size:38px; line-height:.85; letter-spacing:-2px; } .qnx-bwd-screen-content b{ position:absolute; left:30px; bottom:35px; width:85px; height:4px; background:#087ee7; } .desktop-screen{ left:0; top:25px; width:500px; height:325px; z-index:1; } .mobile-screen{ right:35px; bottom:20px; width:155px; height:290px; z-index:3; border-radius:14px; } .mobile-screen .qnx-bwd-screen-content{ padding:22px 18px; } .mobile-screen .qnx-bwd-screen-content strong{ font-size:23px; } .mobile-screen .qnx-bwd-screen-content b{ left:18px; bottom:25px; width:55px; } /* FINAL */ .qnx-bwd-final{ min-height:500px; padding:90px 6vw; display:flex; align-items:center; justify-content:center; background: radial-gradient(circle at 20% 30%,rgba(8,168,207,.24),transparent 28%), linear-gradient(125deg,#062d7a,#0758d8 55%,#087ee7 78%,#10a4b4); } .qnx-bwd-final-lines{ position:absolute; inset:0; background: linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px); background-size:68px 68px; opacity:.23; } .qnx-bwd-final-content{ position:relative; z-index:3; max-width:820px; text-align:center; } .qnx-bwd-final-content .qnx-bwd-kicker{ color:#b7e51c; } .qnx-bwd-final-content .qnx-bwd-kicker:before{ background:#b7e51c; } .qnx-bwd-final h2{ color:#fff; margin-top:20px; } .qnx-bwd-final h2 strong{ color:#b7e51c; } .qnx-bwd-final p{ max-width:670px; margin:auto; color:#dce8f5; } .qnx-bwd-final-btn{ background:#fff; color:#0758d8; } .qnx-bwd-final-mark{ width:58px; height:58px; margin:0 auto 25px; display:grid; place-items:center; background:#b7e51c; color:#0d1730; font-size:22px; font-weight:900; transform:rotate(45deg); box-shadow:0 0 0 10px rgba(183,229,28,.08); } .qnx-bwd-final-mark span{ transform:rotate(-45deg); } /* REVEAL */ .qnx-bwd-copy, .qnx-bwd-brand-board, .qnx-bwd-story-step, .qnx-bwd-identity-visual, .qnx-bwd-identity-copy, .qnx-bwd-map-item, .qnx-bwd-page-stack, .qnx-bwd-pages-copy, .qnx-bwd-responsive-copy, .qnx-bwd-screen, .qnx-bwd-final-content{ opacity:0; transform:translateY(25px); transition:opacity .8s ease,transform .8s ease; } .qnx-bwd-visible{ opacity:1 !important; transform:translateY(0) !important; } /* TABLET */ @media(max-width:1050px){ .qnx-bwd-opening-wrap, .qnx-bwd-identity-wrap, .qnx-bwd-pages-layout, .qnx-bwd-responsive{ grid-template-columns:1fr; } .qnx-bwd-copy{ max-width:700px; } .qnx-bwd-brand-board{ max-width:850px; width:100%; margin:auto; } .qnx-bwd-story-head{ grid-template-columns:1fr; gap:25px; } .qnx-bwd-story-track{ grid-template-columns:repeat(2,1fr); row-gap:55px; } .qnx-bwd-story-line{ display:none; } .qnx-bwd-identity-copy{ max-width:680px; } .qnx-bwd-business-map{ transform:scale(.9); transform-origin:center; } .qnx-bwd-pages-copy{ max-width:650px; } .qnx-bwd-responsive-copy{ margin:0; } .qnx-bwd-screen-stage{ max-width:650px; width:100%; margin:auto; } } /* MOBILE */ @media(max-width:700px){ .qnx-bwd-opening, .qnx-bwd-story, .qnx-bwd-identity, .qnx-bwd-business, .qnx-bwd-pages, .qnx-bwd-responsive{ padding:72px 20px; } .qnx-bwd-copy h2, .qnx-bwd-story-head h2, .qnx-bwd-identity-copy h2, .qnx-bwd-business-head h2, .qnx-bwd-pages-head h2, .qnx-bwd-responsive-copy h2, .qnx-bwd-final h2{ font-size:39px; letter-spacing:-1.8px; } .qnx-bwd-opening-wrap{ min-height:0; } .qnx-bwd-brand-board{ min-height:420px; transform:none; } .qnx-bwd-board-main{ min-height:305px; } .qnx-bwd-brand-column{ padding:22px; } .qnx-bwd-brand-column > strong{ margin-top:35px; font-size:31px; } .qnx-bwd-brand-mark{ width:65px; height:65px; right:15px; bottom:48px; } .qnx-bwd-brand-mark span{ font-size:24px; } .qnx-bwd-board-message{ padding:30px 22px; } .qnx-bwd-board-message h3{ font-size:39px; letter-spacing:-2.5px; } .qnx-bwd-board-footer{ height:55px; } .qnx-bwd-board-footer span{ font-size:5.5px; letter-spacing:.5px; } .qnx-bwd-floating{ display:none; } .qnx-bwd-story-track{ grid-template-columns:1fr; gap:35px; margin-top:50px; } .qnx-bwd-story-step{ display:grid; grid-template-columns:78px 1fr; column-gap:17px; padding:0; } .qnx-bwd-story-icon{ grid-row:span 3; margin:0; } .qnx-bwd-story-step small{ align-self:end; } .qnx-bwd-story-step h3{ margin:5px 0 7px; } .qnx-bwd-identity-visual{ min-height:380px; } .qnx-bwd-identity-word{ left:22px; top:125px; font-size:65px; letter-spacing:-5px; } .qnx-bwd-identity-note{ width:155px; right:15px; bottom:15px; padding:13px; } .qnx-bwd-business-map{ height:500px; transform:none; margin-top:35px; } .qnx-bwd-map-center{ width:150px; height:150px; } .qnx-bwd-map-center strong{ font-size:23px; } .qnx-bwd-map-item{ width:135px; padding:12px; } .qnx-bwd-map-item strong{ font-size:10px; } .qnx-bwd-map-item span{ font-size:8px; } .map-top{ top:5px; } .map-right{ right:-2px; } .map-bottom{ bottom:5px; } .map-left{ left:-2px; } .connector-one, .connector-three{ height:90px; } .connector-two, .connector-four{ width:90px; } .connector-two{ right:133px; } .connector-four{ left:133px; } .qnx-bwd-pages-layout{ gap:30px; } .qnx-bwd-page-stack{ height:340px; transform:scale(.76); transform-origin:left center; width:130%; } .qnx-bwd-page{ width:370px; } .qnx-bwd-responsive-points{ grid-template-columns:1fr; } .qnx-bwd-screen-stage{ min-height:350px; transform:scale(.78); transform-origin:center; width:128%; left:-14%; margin-top:-20px; } .desktop-screen{ width:430px; } .mobile-screen{ right:10px; } .qnx-bwd-final{ min-height:470px; padding:70px 20px; } .qnx-bwd-final-mark{ width:50px; height:50px; } } /* ========================================================= QNIX DIGITAL — CORPORATE WEB DESIGN ========================================================= */ .qnx-corporate-opening, .qnx-corporate-principles, .qnx-corporate-navigation, .qnx-corporate-detail, .qnx-corporate-conversion{ position:relative; overflow:hidden; font-family:inherit; } .qnx-corporate-opening{ min-height:610px; display:flex; align-items:center; background:#062d7a; color:#fff; } .qnx-corporate-opening-grid{ position:absolute; inset:0; opacity:.18; background-image: linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px); background-size:72px 72px; } .qnx-corporate-opening-grid:after{ content:""; position:absolute; width:600px; height:600px; right:-220px; top:-250px; border:1px solid rgba(183,229,28,.35); transform:rotate(45deg); } .qnx-corporate-opening-inner{ position:relative; z-index:2; width:min(1320px,86vw); margin:auto; display:grid; grid-template-columns:1fr .8fr; gap:85px; align-items:center; } .qnx-corporate-opening-copy{ max-width:720px; } .qnx-corporate-eyebrow, .qnx-corporate-section-intro>span, .qnx-corporate-navigation-heading>span, .qnx-corporate-detail-copy>span, .qnx-corporate-conversion-left>span{ display:block; color:#b7e51c; font-size:10px; font-weight:800; letter-spacing:2.5px; } .qnx-corporate-opening h2{ margin:20px 0 25px; font-size:clamp(48px,6vw,84px); line-height:.97; letter-spacing:-4px; font-weight:800; } .qnx-corporate-opening h2 em{ display:block; color:#08a8cf; font-style:normal; } .qnx-corporate-opening-copy p{ max-width:610px; margin:0; color:rgba(255,255,255,.72); font-size:16px; line-height:1.8; } .qnx-corporate-link{ display:inline-flex; align-items:center; gap:22px; margin-top:32px; padding:6px 7px 6px 20px; color:#062d7a; background:#fff; text-decoration:none; font-size:12px; font-weight:800; transition:.3s ease; } .qnx-corporate-link b{ width:37px; height:37px; display:grid; place-items:center; color:#062d7a; background:#b7e51c; font-size:18px; } .qnx-corporate-link:hover{ transform:translateY(-3px); box-shadow:0 15px 35px rgba(0,0,0,.18); } .qnx-corporate-opening-art{ position:relative; min-height:440px; padding:28px; border-left:1px solid rgba(255,255,255,.18); border-top:1px solid rgba(255,255,255,.18); background:linear-gradient(145deg,rgba(8,126,231,.28),rgba(8,168,207,.05)); } .qnx-corporate-art-top{ display:flex; justify-content:space-between; color:rgba(255,255,255,.5); font-size:9px; letter-spacing:1.5px; } .qnx-corporate-art-top b{ color:#b7e51c; } .qnx-corporate-art-word{ position:absolute; left:30px; right:20px; top:50%; transform:translateY(-50%); } .qnx-corporate-art-word span{ display:block; color:rgba(255,255,255,.48); font-size:16px; font-weight:700; letter-spacing:8px; } .qnx-corporate-art-word strong{ display:block; margin:7px 0; color:#fff; font-size:clamp(40px,5vw,67px); line-height:.95; letter-spacing:-3px; } .qnx-corporate-art-line{ position:absolute; left:30px; bottom:76px; width:70%; height:2px; background:linear-gradient(90deg,#16b98a,#b7e51c,transparent); } .qnx-corporate-art-meta{ position:absolute; left:30px; right:30px; bottom:28px; display:flex; justify-content:space-between; } .qnx-corporate-art-meta span{ color:rgba(255,255,255,.45); font-size:8px; letter-spacing:2px; } .qnx-corporate-principles{ background:#fff; padding:100px 7vw; } .qnx-corporate-principles-inner{ max-width:1320px; margin:auto; } .qnx-corporate-section-intro{ max-width:920px; } .qnx-corporate-section-intro>span{ color:#0758d8; } .qnx-corporate-section-intro h2{ margin:18px 0 0; color:#0d1730; font-size:clamp(40px,5vw,68px); line-height:1.02; letter-spacing:-3px; } .qnx-corporate-section-intro h2 strong{ color:#0758d8; font-weight:800; } .qnx-corporate-principle-stage{ margin-top:70px; display:grid; grid-template-columns:145px 1fr; border-top:1px solid #dce6f3; } .qnx-corporate-principle-index{ position:relative; padding-top:30px; } .qnx-corporate-principle-index span{ display:block; color:#0758d8; font-size:60px; line-height:1; font-weight:900; } .qnx-corporate-principle-index i{ display:block; width:35px; height:3px; margin:22px 0; background:#b7e51c; } .qnx-corporate-principle-index small{ color:#5d6b84; font-size:9px; letter-spacing:1.5px; writing-mode:vertical-rl; } .qnx-corporate-principle-content{ border-left:1px solid #dce6f3; } .qnx-corporate-principle-content article{ display:grid; grid-template-columns:90px 1fr; gap:28px; padding:35px 0 35px 42px; border-bottom:1px solid #dce6f3; transition:.35s ease; } .qnx-corporate-principle-content article:last-child{ border-bottom:0; } .qnx-corporate-principle-content article:hover{ padding-left:55px; background:#f4f8ff; } .qnx-corporate-principle-mark{ width:64px; height:64px; display:grid; place-items:center; color:#0758d8; border:1px solid #b9cce6; font-size:22px; font-weight:800; } .qnx-corporate-principle-content h3{ margin:0; color:#0d1730; font-size:26px; } .qnx-corporate-principle-content p{ max-width:690px; margin:9px 0 0; color:#5d6b84; font-size:15px; line-height:1.75; } .qnx-corporate-navigation{ padding:100px 7vw; background:#f4f8ff; } .qnx-corporate-navigation-inner{ max-width:1320px; margin:auto; } .qnx-corporate-navigation-heading{ max-width:790px; } .qnx-corporate-navigation-heading>span{ color:#08a8cf; } .qnx-corporate-navigation-heading h2{ margin:17px 0 17px; color:#0d1730; font-size:clamp(40px,5vw,66px); line-height:1.02; letter-spacing:-3px; } .qnx-corporate-navigation-heading h2 em{ color:#0758d8; font-style:normal; } .qnx-corporate-navigation-heading p{ max-width:650px; margin:0; color:#5d6b84; font-size:15px; line-height:1.8; } .qnx-corporate-navigation-map{ position:relative; min-height:470px; margin-top:70px; } .qnx-corporate-map-axis{ position:absolute; left:50%; top:20px; bottom:20px; width:1px; background:#b9cce6; } .qnx-corporate-map-axis:after{ content:""; position:absolute; top:50%; left:-300px; width:600px; height:1px; background:#b9cce6; } .qnx-corporate-map-node{ position:absolute; width:220px; padding:22px; background:#fff; border:1px solid #d5e1ef; box-shadow:0 12px 35px rgba(17,55,110,.06); transition:.35s ease; } .qnx-corporate-map-node:hover{ transform:translateY(-7px); border-color:#0758d8; box-shadow:0 20px 45px rgba(7,88,216,.12); } .qnx-corporate-map-node small{ display:block; color:#08a8cf; font-size:9px; font-weight:800; letter-spacing:1.5px; } .qnx-corporate-map-node strong{ display:block; margin-top:8px; color:#0d1730; font-size:15px; letter-spacing:.5px; } .qnx-corporate-map-node span{ display:block; margin-top:5px; color:#5d6b84; font-size:11px; } .qnx-map-main{ width:260px; left:50%; top:50%; transform:translate(-50%,-50%); padding:30px; background:#0758d8; border:0; text-align:center; z-index:3; } .qnx-map-main:hover{ transform:translate(-50%,-57%); } .qnx-map-main small, .qnx-map-main strong, .qnx-map-main span{ color:#fff; } .qnx-map-main strong{ font-size:22px; } .qnx-map-main span{ color:rgba(255,255,255,.7); } .qnx-map-one{ left:4%; top:18%; } .qnx-map-two{ right:4%; top:18%; } .qnx-map-three{ left:4%; bottom:18%; } .qnx-map-four{ right:4%; bottom:18%; } .qnx-corporate-detail{ background:#fff; padding:100px 7vw; } .qnx-corporate-detail-inner{ max-width:1320px; margin:auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:95px; align-items:center; } .qnx-corporate-detail-visual{ position:relative; min-height:500px; padding-left:48px; } .qnx-corporate-vertical-text{ position:absolute; left:0; top:0; bottom:0; display:flex; align-items:center; writing-mode:vertical-rl; transform:rotate(180deg); color:#0758d8; font-size:9px; font-weight:800; letter-spacing:3px; } .qnx-corporate-detail-panel{ position:relative; min-height:500px; padding:45px; overflow:hidden; background:#062d7a; } .qnx-corporate-detail-panel:before{ content:""; position:absolute; right:-170px; bottom:-170px; width:430px; height:430px; border:1px solid rgba(183,229,28,.3); transform:rotate(45deg); } .qnx-corporate-detail-panel>span{ position:relative; color:#b7e51c; font-size:9px; font-weight:800; letter-spacing:2px; } .qnx-corporate-detail-lines{ position:absolute; top:125px; left:45px; right:45px; display:flex; flex-direction:column; gap:14px; } .qnx-corporate-detail-lines i{ height:1px; background:rgba(255,255,255,.15); } .qnx-corporate-detail-lines i:nth-child(2){ width:75%; } .qnx-corporate-detail-lines i:nth-child(3){ width:48%; } .qnx-corporate-detail-lines i:nth-child(4){ width:87%; } .qnx-corporate-detail-lines i:nth-child(5){ width:60%; } .qnx-corporate-detail-panel>strong{ position:absolute; left:45px; bottom:70px; color:#fff; font-size:47px; line-height:.93; letter-spacing:-2px; } .qnx-corporate-detail-corner{ position:absolute; right:25px; bottom:25px; display:flex; align-items:center; gap:10px; } .qnx-corporate-detail-corner b{ color:#062d7a; background:#b7e51c; width:30px; height:30px; display:grid; place-items:center; font-size:15px; } .qnx-corporate-detail-corner span{ color:rgba(255,255,255,.5); font-size:7px; letter-spacing:1.5px; } .qnx-corporate-detail-copy{ max-width:650px; } .qnx-corporate-detail-copy>span{ color:#0758d8; } .qnx-corporate-detail-copy h2{ margin:18px 0 20px; color:#0d1730; font-size:clamp(40px,4.8vw,64px); line-height:1.02; letter-spacing:-3px; } .qnx-corporate-detail-copy>p{ margin:0; color:#5d6b84; font-size:15px; line-height:1.8; } .qnx-corporate-detail-points{ margin-top:38px; border-top:1px solid #dce6f3; } .qnx-corporate-detail-points div{ padding:17px 0; border-bottom:1px solid #dce6f3; } .qnx-corporate-detail-points strong{ display:block; color:#0d1730; font-size:14px; } .qnx-corporate-detail-points span{ display:block; margin-top:5px; color:#5d6b84; font-size:12px; } .qnx-corporate-conversion{ padding:95px 7vw; background:#0758d8; } .qnx-corporate-conversion-bg{ position:absolute; width:520px; height:520px; right:-250px; top:-260px; border:1px solid rgba(183,229,28,.35); transform:rotate(45deg); } .qnx-corporate-conversion-inner{ position:relative; max-width:1320px; margin:auto; display:grid; grid-template-columns:1.15fr .85fr; gap:90px; align-items:end; } .qnx-corporate-conversion-left>span{ color:#b7e51c; } .qnx-corporate-conversion-line{ width:90px; height:2px; margin:22px 0; background:#16b98a; } .qnx-corporate-conversion-left h2{ max-width:780px; margin:0; color:#fff; font-size:clamp(44px,5.5vw,74px); line-height:.98; letter-spacing:-3.5px; } .qnx-corporate-conversion-left h2 em{ display:block; color:#b7e51c; font-style:normal; } .qnx-corporate-conversion-right{ padding-bottom:5px; } .qnx-corporate-conversion-right p{ margin:0; color:rgba(255,255,255,.74); font-size:15px; line-height:1.8; } .qnx-corporate-conversion-right a{ display:inline-flex; align-items:center; gap:22px; margin-top:28px; padding:6px 7px 6px 20px; color:#062d7a; background:#fff; text-decoration:none; font-size:12px; font-weight:800; transition:.3s ease; } .qnx-corporate-conversion-right a b{ width:38px; height:38px; display:grid; place-items:center; background:#b7e51c; } .qnx-corporate-conversion-right a:hover{ transform:translateY(-3px); } .qnx-corporate-conversion-right small{ display:block; margin-top:28px; color:rgba(255,255,255,.42); font-size:8px; letter-spacing:1.8px; } @media(max-width:1050px){ .qnx-corporate-opening-inner, .qnx-corporate-detail-inner{ gap:55px; } .qnx-corporate-opening h2{ font-size:58px; } .qnx-corporate-map-node{ width:185px; } .qnx-map-main{ width:225px; } .qnx-corporate-conversion-inner{ gap:55px; } } @media(max-width:760px){ .qnx-corporate-opening, .qnx-corporate-principles, .qnx-corporate-navigation, .qnx-corporate-detail, .qnx-corporate-conversion{ padding-left:22px; padding-right:22px; } .qnx-corporate-opening{ min-height:auto; padding-top:65px; padding-bottom:65px; } .qnx-corporate-opening-inner, .qnx-corporate-detail-inner, .qnx-corporate-conversion-inner{ grid-template-columns:1fr; } .qnx-corporate-opening-inner{ gap:50px; } .qnx-corporate-opening h2{ font-size:43px; letter-spacing:-2px; } .qnx-corporate-opening-art{ min-height:300px; } .qnx-corporate-art-word strong{ font-size:42px; } .qnx-corporate-principles, .qnx-corporate-navigation, .qnx-corporate-detail{ padding-top:65px; padding-bottom:65px; } .qnx-corporate-section-intro h2, .qnx-corporate-navigation-heading h2, .qnx-corporate-detail-copy h2{ font-size:39px; letter-spacing:-1.8px; } .qnx-corporate-principle-stage{ margin-top:45px; grid-template-columns:1fr; } .qnx-corporate-principle-index{ display:flex; align-items:center; gap:15px; padding:0 0 20px; } .qnx-corporate-principle-index span{ font-size:42px; } .qnx-corporate-principle-index i{ margin:0; } .qnx-corporate-principle-index small{ writing-mode:initial; } .qnx-corporate-principle-content{ border-left:0; border-top:1px solid #dce6f3; } .qnx-corporate-principle-content article{ grid-template-columns:58px 1fr; padding:28px 0; gap:18px; } .qnx-corporate-principle-content article:hover{ padding-left:8px; } .qnx-corporate-principle-mark{ width:48px; height:48px; } .qnx-corporate-principle-content h3{ font-size:22px; } .qnx-corporate-navigation-map{ min-height:580px; margin-top:45px; } .qnx-corporate-map-axis{ display:none; } .qnx-corporate-map-node{ position:absolute; width:calc(50% - 8px); padding:16px; } .qnx-map-main{ width:180px; left:50%; top:50%; padding:22px; } .qnx-map-one{ left:0; top:5%; } .qnx-map-two{ right:0; top:5%; } .qnx-map-three{ left:0; bottom:5%; } .qnx-map-four{ right:0; bottom:5%; } .qnx-corporate-detail-inner{ gap:45px; } .qnx-corporate-detail-visual{ min-height:390px; padding-left:32px; } .qnx-corporate-detail-panel{ min-height:390px; padding:30px; } .qnx-corporate-detail-lines{ left:30px; right:30px; top:105px; } .qnx-corporate-detail-panel>strong{ left:30px; bottom:55px; font-size:38px; } .qnx-corporate-conversion{ padding-top:65px; padding-bottom:65px; } .qnx-corporate-conversion-inner{ gap:40px; } .qnx-corporate-conversion-left h2{ font-size:43px; letter-spacing:-2px; } } /* ========================================================= QNIX DIGITAL — RESPONSIVE WEB DESIGN ========================================================= */ .qnx-rwd-opening, .qnx-rwd-fluid, .qnx-rwd-breakpoints, .qnx-rwd-performance, .qnx-rwd-final{ position:relative; overflow:hidden; font-family:inherit; } /* ========================= OPENING ========================= */ .qnx-rwd-opening{ min-height:650px; display:flex; align-items:center; background: linear-gradient(115deg,#062d7a 0%,#0758d8 55%,#08a8cf 100%); } .qnx-rwd-opening:before{ content:""; position:absolute; width:700px; height:700px; right:-310px; top:-250px; border:1px solid rgba(183,229,28,.3); border-radius:50%; } .qnx-rwd-opening-inner{ position:relative; z-index:2; width:min(1320px,86vw); margin:auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:55px; align-items:center; } .qnx-rwd-opening-copy{ max-width:650px; } .qnx-rwd-kicker, .qnx-rwd-fluid-heading>span, .qnx-rwd-breakpoints-head>span, .qnx-rwd-performance-copy>span, .qnx-rwd-final-copy>span{ display:block; color:#b7e51c; font-size:10px; font-weight:800; letter-spacing:2.5px; } .qnx-rwd-opening h2{ margin:20px 0 24px; color:#fff; font-size:clamp(52px,6vw,82px); line-height:.94; letter-spacing:-4px; } .qnx-rwd-opening h2 strong{ display:block; color:#b7e51c; font-weight:800; } .qnx-rwd-opening-copy p{ max-width:570px; margin:0; color:rgba(255,255,255,.76); font-size:16px; line-height:1.8; } .qnx-rwd-primary{ display:inline-flex; align-items:center; gap:22px; margin-top:32px; padding:6px 7px 6px 20px; color:#062d7a; background:#fff; text-decoration:none; font-size:12px; font-weight:800; transition:.3s ease; } .qnx-rwd-primary b{ width:38px; height:38px; display:grid; place-items:center; background:#b7e51c; font-size:17px; } .qnx-rwd-primary:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.18); } /* DEVICE VISUAL */ .qnx-rwd-opening-visual{ position:relative; min-height:510px; } .qnx-rwd-orbit{ position:absolute; left:50%; top:50%; border:1px solid rgba(255,255,255,.2); border-radius:50%; transform:translate(-50%,-50%); } .orbit-one{ width:470px; height:470px; } .orbit-two{ width:350px; height:350px; border-color:rgba(183,229,28,.2); } .qnx-rwd-device{ position:absolute; background:#fff; box-shadow:0 28px 65px rgba(4,29,76,.32); } .qnx-rwd-device-screen{ position:absolute; inset:10px; overflow:hidden; background:#f4f8ff; } .device-monitor{ width:400px; height:255px; left:50%; top:50%; transform:translate(-45%,-52%); border-radius:9px; z-index:2; } .device-monitor:after{ content:""; position:absolute; width:85px; height:15px; left:50%; bottom:-24px; transform:translateX(-50%); background:#d7e2ef; } .device-tablet{ width:185px; height:250px; left:13%; top:31%; border-radius:17px; transform:rotate(-8deg); z-index:3; } .device-phone{ width:105px; height:205px; right:12%; bottom:15%; border-radius:17px; transform:rotate(8deg); z-index:4; } .rwd-screen-top{ height:17px; margin:14px 15px 0; background:#0758d8; } .rwd-screen-title{ width:54%; height:15px; margin:20px 15px 12px; background:#0d1730; } .rwd-screen-content{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:0 15px; } .rwd-screen-content i{ height:58px; background:#dce8f5; border-left:3px solid #08a8cf; } .device-tablet .rwd-screen-content{ grid-template-columns:1fr 1fr; } .device-tablet .rwd-screen-content i:last-child{ display:none; } .device-phone .rwd-screen-content{ grid-template-columns:1fr; } .device-phone .rwd-screen-content i{ height:35px; } .device-phone .rwd-screen-content i:nth-child(3){ display:none; } .qnx-rwd-visual-label{ position:absolute; right:1%; top:9%; z-index:5; padding:12px 16px; background:#062d7a; border-left:3px solid #b7e51c; } .qnx-rwd-visual-label span, .qnx-rwd-visual-label strong{ display:block; } .qnx-rwd-visual-label span{ color:#b7e51c; font-size:8px; letter-spacing:2px; } .qnx-rwd-visual-label strong{ margin-top:5px; color:#fff; font-size:14px; } /* ========================= FLUID SECTION ========================= */ .qnx-rwd-fluid{ padding:105px 7vw; background:#fff; } .qnx-rwd-fluid-inner{ max-width:1320px; margin:auto; } .qnx-rwd-fluid-heading{ max-width:900px; } .qnx-rwd-fluid-heading>span{ color:#0758d8; } .qnx-rwd-fluid-heading h2{ margin:18px 0 0; color:#0d1730; font-size:clamp(42px,5vw,68px); line-height:1.02; letter-spacing:-3px; } .qnx-rwd-fluid-heading h2 em{ display:block; color:#0758d8; font-style:normal; } .qnx-rwd-fluid-layout{ margin-top:70px; display:grid; grid-template-columns:.75fr 1.25fr; gap:100px; align-items:center; } .qnx-rwd-fluid-text{ border-left:4px solid #79c91c; padding-left:30px; } .qnx-rwd-fluid-text p{ margin:0 0 22px; color:#5d6b84; font-size:15px; line-height:1.85; } .qnx-rwd-fluid-text p:last-child{ margin-bottom:0; } .qnx-rwd-fluid-bars{ padding:30px 0; border-top:1px solid #dce6f3; border-bottom:1px solid #dce6f3; } .rwd-fluid-row{ display:grid; grid-template-columns:110px 1fr 90px; gap:20px; align-items:center; padding:19px 0; border-bottom:1px solid #e3eaf4; } .rwd-fluid-row:last-child{ border-bottom:0; } .rwd-fluid-row>span{ color:#0d1730; font-size:10px; font-weight:800; letter-spacing:1.4px; } .rwd-fluid-track{ height:5px; background:#e6edf6; } .rwd-fluid-track i{ display:block; height:100%; background:linear-gradient(90deg,#0758d8,#08a8cf,#16b98a); } .rwd-fluid-row b{ color:#0758d8; font-size:9px; text-align:right; letter-spacing:1px; } /* ========================= BREAKPOINTS ========================= */ .qnx-rwd-breakpoints{ padding:100px 7vw; background:#f4f8ff; } .qnx-rwd-breakpoints-inner{ max-width:1320px; margin:auto; } .qnx-rwd-breakpoints-head{ max-width:800px; } .qnx-rwd-breakpoints-head>span{ color:#08a8cf; } .qnx-rwd-breakpoints-head h2{ margin:16px 0 15px; color:#0d1730; font-size:clamp(42px,5vw,65px); line-height:1; letter-spacing:-3px; } .qnx-rwd-breakpoints-head p{ max-width:620px; margin:0; color:#5d6b84; font-size:15px; line-height:1.8; } .qnx-rwd-device-flow{ margin-top:70px; display:grid; grid-template-columns:1.35fr 1fr .7fr; gap:18px; align-items:end; } .qnx-rwd-flow-item{ position:relative; padding:25px; background:#fff; border:1px solid #dce6f3; transition:.4s ease; } .qnx-rwd-flow-item:hover{ transform:translateY(-8px); border-color:#0758d8; box-shadow:0 22px 50px rgba(7,88,216,.1); } .flow-wide{ min-height:420px; } .flow-medium{ min-height:360px; } .flow-small{ min-height:300px; } .qnx-rwd-flow-number{ color:#08a8cf; font-size:10px; font-weight:800; letter-spacing:2px; } .qnx-rwd-flow-visual{ height:190px; display:flex; align-items:center; justify-content:center; } .rwd-wide-box{ width:80%; height:105px; padding:13px; display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:7px; background:#062d7a; } .rwd-wide-box i{ background:#fff; opacity:.8; } .rwd-wide-box i:nth-child(2){ background:#08a8cf; } .rwd-wide-box i:nth-child(3){ background:#b7e51c; } .rwd-medium-box{ width:70%; height:145px; padding:12px; display:grid; grid-template-columns:1fr 1fr; gap:7px; background:#0758d8; } .rwd-medium-box i{ background:#fff; opacity:.8; } .rwd-medium-box i:first-child{ grid-column:span 2; } .rwd-medium-box i:last-child{ background:#b7e51c; } .rwd-small-box{ width:70px; height:155px; padding:10px; display:grid; grid-template-rows:15px 1fr 1fr; gap:7px; background:#062d7a; border-radius:8px; } .rwd-small-box i{ background:#fff; opacity:.75; } .rwd-small-box i:first-child{ background:#08a8cf; } .qnx-rwd-flow-item h3{ margin:0; color:#0d1730; font-size:23px; } .qnx-rwd-flow-item p{ margin:9px 0 0; color:#5d6b84; font-size:13px; line-height:1.7; } /* ========================= PERFORMANCE ========================= */ .qnx-rwd-performance{ padding:105px 7vw; background:#fff; } .qnx-rwd-performance-inner{ max-width:1320px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:95px; align-items:center; } .qnx-rwd-performance-visual{ position:relative; min-height:490px; background:#062d7a; overflow:hidden; } .rwd-performance-grid{ position:absolute; inset:0; opacity:.2; background-image: linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px); background-size:42px 42px; } .rwd-performance-core{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:220px; height:220px; display:flex; flex-direction:column; justify-content:center; align-items:center; background:#0758d8; border:1px solid rgba(183,229,28,.6); box-shadow:18px 18px 0 rgba(8,168,207,.35); } .rwd-performance-core span{ color:#b7e51c; font-size:8px; font-weight:800; letter-spacing:2px; } .rwd-performance-core strong{ margin:7px 0; color:#fff; font-size:72px; line-height:.8; } .rwd-performance-core small{ color:rgba(255,255,255,.6); font-size:8px; letter-spacing:1.4px; } .rwd-performance-tag{ position:absolute; padding:13px 17px; background:#fff; box-shadow:0 12px 28px rgba(0,0,0,.14); } .rwd-performance-tag b, .rwd-performance-tag span{ display:block; } .rwd-performance-tag b{ color:#0758d8; font-size:9px; letter-spacing:1.3px; } .rwd-performance-tag span{ margin-top:4px; color:#5d6b84; font-size:11px; } .tag-a{ left:35px; top:60px; } .tag-b{ right:35px; top:105px; } .tag-c{ left:55px; bottom:65px; } .qnx-rwd-performance-copy>span{ color:#0758d8; } .qnx-rwd-performance-copy h2{ margin:17px 0 20px; color:#0d1730; font-size:clamp(40px,4.7vw,62px); line-height:1.03; letter-spacing:-2.7px; } .qnx-rwd-performance-copy>p{ margin:0; color:#5d6b84; font-size:15px; line-height:1.8; } .qnx-rwd-performance-list{ margin-top:35px; border-top:1px solid #dce6f3; } .qnx-rwd-performance-list div{ padding:16px 0; border-bottom:1px solid #dce6f3; } .qnx-rwd-performance-list strong{ display:block; color:#0d1730; font-size:14px; } .qnx-rwd-performance-list span{ display:block; margin-top:4px; color:#5d6b84; font-size:12px; } /* ========================= FINAL ========================= */ .qnx-rwd-final{ padding:90px 7vw; background: linear-gradient(120deg,#062d7a 0%,#0758d8 65%,#10a4b4 100%); } .qnx-rwd-final:before{ content:""; position:absolute; width:380px; height:380px; left:-210px; bottom:-250px; border:1px solid rgba(183,229,28,.3); transform:rotate(45deg); } .qnx-rwd-final-inner{ position:relative; max-width:1320px; margin:auto; display:grid; grid-template-columns:1.15fr .85fr; gap:80px; align-items:center; } .qnx-rwd-final-copy>span{ color:#b7e51c; } .qnx-rwd-final-copy h2{ max-width:800px; margin:18px 0; color:#fff; font-size:clamp(45px,5.5vw,74px); line-height:.98; letter-spacing:-3.5px; } .qnx-rwd-final-copy h2 em{ color:#b7e51c; font-style:normal; } .qnx-rwd-final-copy p{ max-width:600px; margin:0; color:rgba(255,255,255,.72); font-size:15px; line-height:1.8; } .qnx-rwd-final-action{ display:flex; flex-direction:column; align-items:flex-start; } .qnx-rwd-final-device{ position:relative; width:190px; height:120px; margin-bottom:25px; border:7px solid #fff; background:#08a8cf; box-shadow:18px 18px 0 rgba(183,229,28,.8); } .qnx-rwd-final-device:after{ content:""; position:absolute; width:45px; height:8px; left:50%; bottom:-20px; transform:translateX(-50%); background:#fff; } .qnx-rwd-final-device span{ position:absolute; width:65%; height:7px; left:18%; top:25px; background:#fff; box-shadow:0 18px 0 rgba(255,255,255,.6),0 36px 0 rgba(255,255,255,.35); } .qnx-rwd-final-action>a{ display:inline-flex; align-items:center; gap:22px; padding:6px 7px 6px 20px; color:#062d7a; background:#fff; text-decoration:none; font-size:12px; font-weight:800; transition:.3s ease; } .qnx-rwd-final-action>a b{ width:38px; height:38px; display:grid; place-items:center; background:#b7e51c; } .qnx-rwd-final-action>a:hover{ transform:translateY(-3px); } /* ========================= RESPONSIVE ========================= */ @media(max-width:1050px){ .qnx-rwd-opening-inner{ gap:35px; } .qnx-rwd-opening h2{ font-size:58px; } .qnx-rwd-opening-visual{ transform:scale(.86); } .qnx-rwd-fluid-layout, .qnx-rwd-performance-inner{ gap:55px; } .qnx-rwd-device-flow{ grid-template-columns:1fr 1fr; } .flow-small{ grid-column:span 2; min-height:280px; } } @media(max-width:760px){ .qnx-rwd-opening, .qnx-rwd-fluid, .qnx-rwd-breakpoints, .qnx-rwd-performance, .qnx-rwd-final{ padding-left:22px; padding-right:22px; } .qnx-rwd-opening{ min-height:auto; padding-top:65px; padding-bottom:65px; } .qnx-rwd-opening-inner, .qnx-rwd-fluid-layout, .qnx-rwd-performance-inner, .qnx-rwd-final-inner{ grid-template-columns:1fr; } .qnx-rwd-opening-inner{ gap:35px; } .qnx-rwd-opening h2{ font-size:44px; letter-spacing:-2px; } .qnx-rwd-opening-visual{ min-height:350px; transform:none; } .orbit-one{ width:300px; height:300px; } .orbit-two{ width:225px; height:225px; } .device-monitor{ width:245px; height:155px; } .device-tablet{ width:120px; height:170px; left:2%; } .device-phone{ width:72px; height:145px; right:4%; } .qnx-rwd-visual-label{ right:0; top:3%; } .qnx-rwd-fluid, .qnx-rwd-breakpoints, .qnx-rwd-performance{ padding-top:65px; padding-bottom:65px; } .qnx-rwd-fluid-heading h2, .qnx-rwd-breakpoints-head h2, .qnx-rwd-performance-copy h2{ font-size:39px; letter-spacing:-1.8px; } .qnx-rwd-fluid-layout{ margin-top:45px; gap:35px; } .rwd-fluid-row{ grid-template-columns:85px 1fr; gap:12px; } .rwd-fluid-row b{ grid-column:2; text-align:left; } .qnx-rwd-device-flow{ margin-top:45px; grid-template-columns:1fr; } .flow-wide, .flow-medium, .flow-small{ grid-column:auto; min-height:320px; } .qnx-rwd-flow-visual{ height:150px; } .qnx-rwd-performance-inner{ gap:45px; } .qnx-rwd-performance-visual{ min-height:370px; } .rwd-performance-core{ width:170px; height:170px; } .rwd-performance-core strong{ font-size:55px; } .rwd-performance-tag{ padding:10px 12px; } .tag-a{ left:15px; top:35px; } .tag-b{ right:15px; top:70px; } .tag-c{ left:25px; bottom:35px; } .qnx-rwd-final{ padding-top:65px; padding-bottom:65px; } .qnx-rwd-final-inner{ gap:45px; } .qnx-rwd-final-copy h2{ font-size:44px; letter-spacing:-2px; } } /* ========================================================= QNIX DIGITAL — UI/UX DESIGN ========================================================= */ .qnx-uiux-intro, .qnx-uiux-thinking, .qnx-uiux-flow, .qnx-uiux-system, .qnx-uiux-services, .qnx-uiux-cta{ position:relative; overflow:hidden; font-family:inherit; } .qnx-uiux-intro{ background:#f4f8ff; padding:92px 30px 100px; } .qnx-uiux-intro-inner{ max-width:1280px; margin:auto; } .qnx-uiux-kicker, .qnx-uiux-section-label span, .qnx-uiux-flow-heading span, .qnx-uiux-system-copy span, .qnx-uiux-services-head span, .qnx-uiux-cta-label{ display:inline-flex; align-items:center; gap:10px; font-size:11px; font-weight:800; letter-spacing:2.4px; color:#0758d8; } .qnx-uiux-kicker:before, .qnx-uiux-cta-label:before{ content:""; width:27px; height:2px; background:#b7e51c; } .qnx-uiux-intro-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:90px; align-items:end; margin-top:25px; } .qnx-uiux-intro-title h2{ margin:0; color:#0d1730; font-size:clamp(48px,6.3vw,91px); line-height:.94; letter-spacing:-4px; font-weight:800; } .qnx-uiux-intro-title em{ color:#0758d8; font-style:normal; } .qnx-uiux-intro-copy{ max-width:470px; padding-bottom:7px; } .qnx-uiux-intro-copy p{ margin:0 0 17px; color:#5d6b84; font-size:16px; line-height:1.75; } .qnx-uiux-text-link{ display:inline-flex; align-items:center; gap:12px; margin-top:12px; color:#0758d8; font-size:14px; font-weight:800; text-decoration:none; } .qnx-uiux-text-link span{ transition:.3s ease; } .qnx-uiux-text-link:hover span{ transform:translate(4px,-4px); } .qnx-uiux-interface{ position:relative; margin-top:70px; min-height:480px; background:#062d7a; border:1px solid rgba(8,168,207,.28); box-shadow:0 35px 80px rgba(6,45,122,.17); overflow:hidden; } .qnx-uiux-interface:before{ content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px); background-size:44px 44px; opacity:.5; } .qnx-uiux-interface-top{ position:relative; z-index:2; height:58px; display:flex; justify-content:space-between; align-items:center; padding:0 25px; border-bottom:1px solid rgba(255,255,255,.13); color:rgba(255,255,255,.7); font-size:9px; letter-spacing:2px; } .qnx-uiux-interface-body{ position:relative; z-index:2; display:grid; grid-template-columns:180px 1fr; min-height:420px; } .qnx-uiux-sidebar{ display:flex; flex-direction:column; gap:10px; padding:40px 25px; border-right:1px solid rgba(255,255,255,.12); } .qnx-uiux-sidebar span{ padding:13px 12px; color:rgba(255,255,255,.42); font-size:12px; transition:.3s ease; } .qnx-uiux-sidebar .qnx-uiux-side-active{ color:#fff; background:rgba(8,126,231,.22); border-left:2px solid #b7e51c; } .qnx-uiux-screen{ margin:42px; background:#fff; box-shadow:0 25px 60px rgba(0,0,0,.2); transform:perspective(1100px) rotateX(2deg) rotateY(-2deg); transition:.6s ease; } .qnx-uiux-screen:hover{ transform:perspective(1100px) rotateX(0) rotateY(0) translateY(-5px); } .qnx-uiux-screen-head{ display:flex; justify-content:space-between; align-items:center; padding:27px 32px; border-bottom:1px solid #e3eaf4; } .qnx-uiux-screen-head small{ display:block; margin-bottom:7px; color:#5d6b84; font-size:8px; letter-spacing:1.8px; } .qnx-uiux-screen-head strong{ color:#0d1730; font-size:20px; } .qnx-uiux-screen-head i{ width:31px; height:31px; border-radius:50%; background:linear-gradient(135deg,#0758d8,#08a8cf); } .qnx-uiux-screen-main{ display:grid; grid-template-columns:1.25fr .75fr; min-height:280px; } .qnx-uiux-feature{ display:flex; flex-direction:column; justify-content:space-between; padding:32px; background:linear-gradient(135deg,#0758d8,#087ee7); color:#fff; } .qnx-uiux-feature span{ font-size:8px; letter-spacing:2px; opacity:.7; } .qnx-uiux-feature b{ font-size:39px; line-height:1; letter-spacing:-1.5px; } .qnx-uiux-feature small{ color:#b7e51c; font-size:10px; font-weight:800; } .qnx-uiux-data{ display:flex; flex-direction:column; justify-content:center; gap:1px; background:#f4f8ff; } .qnx-uiux-data div{ padding:22px 25px; border-bottom:1px solid #e3eaf4; } .qnx-uiux-data span{ display:block; margin-bottom:7px; color:#5d6b84; font-size:8px; letter-spacing:1.5px; } .qnx-uiux-data b{ color:#0d1730; font-size:16px; } .qnx-uiux-cursor{ position:absolute; right:8%; bottom:55px; z-index:4; display:flex; align-items:center; gap:8px; padding:9px 13px; background:#b7e51c; color:#062d7a; font-size:8px; font-weight:900; letter-spacing:1px; box-shadow:0 10px 25px rgba(0,0,0,.18); transform:rotate(-5deg); } .qnx-uiux-cursor span{ width:8px; height:8px; background:#062d7a; clip-path:polygon(0 0,100% 50%,0 100%); } .qnx-uiux-thinking{ background:#fff; padding:105px 30px; } .qnx-uiux-thinking-inner{ max-width:1280px; margin:auto; } .qnx-uiux-section-label{ display:flex; justify-content:space-between; align-items:center; padding-bottom:28px; border-bottom:1px solid #e3eaf4; } .qnx-uiux-section-label b{ max-width:450px; color:#0d1730; font-size:19px; font-weight:700; } .qnx-uiux-thinking-layout{ display:grid; grid-template-columns:.8fr 1.2fr; gap:110px; padding-top:65px; } .qnx-uiux-thinking-statement p{ margin:0; color:#5d6b84; font-size:20px; line-height:1.7; } .qnx-uiux-principles{ border-top:1px solid #0d1730; } .qnx-uiux-principle{ display:grid; grid-template-columns:55px 1fr; gap:20px; padding:25px 0; border-bottom:1px solid #e3eaf4; transition:.35s ease; } .qnx-uiux-principle:hover{ padding-left:15px; background:#f4f8ff; } .qnx-uiux-principle > span{ color:#0758d8; font-size:11px; font-weight:800; } .qnx-uiux-principle h3{ margin:0 0 7px; color:#0d1730; font-size:20px; } .qnx-uiux-principle p{ margin:0; max-width:600px; color:#5d6b84; font-size:14px; line-height:1.7; } .qnx-uiux-flow{ background:#f4f8ff; padding:105px 30px; } .qnx-uiux-flow-inner{ max-width:1280px; margin:auto; } .qnx-uiux-flow-heading{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:70px; } .qnx-uiux-flow-heading h2{ margin:0; color:#0d1730; font-size:clamp(38px,4.7vw,65px); line-height:1; letter-spacing:-2.5px; } .qnx-uiux-flow-board{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid #cdd9e9; border-bottom:1px solid #cdd9e9; } .qnx-uiux-flow-line{ position:absolute; top:0; left:12.5%; right:12.5%; height:1px; background:linear-gradient(90deg,#0758d8,#08a8cf,#16b98a,#79c91c); } .qnx-uiux-flow-step{ position:relative; min-height:300px; padding:50px 30px 35px; border-right:1px solid #dbe4ef; transition:.4s ease; } .qnx-uiux-flow-step:last-child{ border-right:0; } .qnx-uiux-flow-step:hover{ background:#fff; transform:translateY(-8px); box-shadow:0 20px 45px rgba(17,55,110,.08); } .qnx-uiux-flow-number{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; margin-bottom:55px; border:1px solid #0758d8; color:#0758d8; font-size:13px; font-weight:800; transition:.3s ease; } .qnx-uiux-flow-step:hover .qnx-uiux-flow-number{ background:#0758d8; color:#fff; transform:rotate(45deg); } .qnx-uiux-flow-step:hover .qnx-uiux-flow-number{ border-radius:0; } .qnx-uiux-flow-content small{ display:block; margin-bottom:8px; color:#5d6b84; font-size:8px; letter-spacing:1.8px; } .qnx-uiux-flow-content h3{ margin:0 0 10px; color:#0d1730; font-size:24px; } .qnx-uiux-flow-content p{ margin:0; color:#5d6b84; font-size:13px; line-height:1.65; } .qnx-uiux-system{ background:#062d7a; color:#fff; padding:105px 30px; } .qnx-uiux-system-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:.75fr 1.25fr; gap:100px; align-items:center; } .qnx-uiux-system-copy span{ color:#b7e51c; } .qnx-uiux-system-copy h2{ margin:22px 0 20px; max-width:480px; font-size:clamp(42px,5vw,70px); line-height:.98; letter-spacing:-3px; } .qnx-uiux-system-copy p{ max-width:450px; margin:0; color:rgba(255,255,255,.65); font-size:15px; line-height:1.75; } .qnx-uiux-system-visual{ position:relative; padding:30px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.035); } .qnx-uiux-system-visual > div:not(.qnx-uiux-system-corner){ display:grid; grid-template-columns:100px 1fr; align-items:center; min-height:105px; border-bottom:1px solid rgba(255,255,255,.12); } .qnx-uiux-system-visual > div:last-of-type{ border-bottom:0; } .qnx-uiux-system-visual span{ color:rgba(255,255,255,.45); font-size:9px; letter-spacing:2px; } .qnx-uiux-type-line strong{ margin-right:20px; color:#fff; font-size:47px; font-weight:400; } .qnx-uiux-type-line b{ color:#08a8cf; font-size:13px; } .qnx-uiux-color-line{ display:flex !important; gap:13px; } .qnx-uiux-color-line i{ width:48px; height:48px; background:#0758d8; } .qnx-uiux-color-line i:nth-child(2){ background:#087ee7; } .qnx-uiux-color-line i:nth-child(3){ background:#08a8cf; } .qnx-uiux-color-line i:nth-child(4){ background:#16b98a; } .qnx-uiux-button-line{ display:flex !important; gap:12px; } .qnx-uiux-button-line button{ border:0; padding:13px 19px; background:#b7e51c; color:#062d7a; font:inherit; font-size:11px; font-weight:800; } .qnx-uiux-button-line button.secondary{ background:transparent; border:1px solid rgba(255,255,255,.35); color:#fff; } .qnx-uiux-spacing-line{ display:flex !important; gap:20px; } .qnx-uiux-spacing-line > div{ display:flex; align-items:flex-end; gap:9px; } .qnx-uiux-spacing-line b{ display:block; width:12px; background:#08a8cf; } .qnx-uiux-spacing-line b:nth-child(1){height:18px} .qnx-uiux-spacing-line b:nth-child(2){height:28px} .qnx-uiux-spacing-line b:nth-child(3){height:42px} .qnx-uiux-spacing-line b:nth-child(4){height:57px} .qnx-uiux-spacing-line b:nth-child(5){height:72px} .qnx-uiux-system-corner{ position:absolute; right:18px; bottom:13px; color:rgba(255,255,255,.35); font-size:8px; letter-spacing:1.5px; } .qnx-uiux-services{ background:#fff; padding:105px 30px 110px; } .qnx-uiux-services-inner{ max-width:1280px; margin:auto; } .qnx-uiux-services-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:55px; } .qnx-uiux-services-head h2{ margin:0; color:#0d1730; font-size:clamp(38px,4.5vw,62px); line-height:1; letter-spacing:-2.5px; } .qnx-uiux-services-list{ border-top:1px solid #0d1730; } .qnx-uiux-service-row{ display:grid; grid-template-columns:65px 1fr 45px; gap:25px; align-items:center; min-height:120px; border-bottom:1px solid #dfe7f1; transition:.35s ease; } .qnx-uiux-service-row > span{ color:#0758d8; font-size:11px; font-weight:800; } .qnx-uiux-service-row h3{ margin:0 0 6px; color:#0d1730; font-size:23px; transition:.3s ease; } .qnx-uiux-service-row p{ margin:0; max-width:650px; color:#5d6b84; font-size:13px; line-height:1.6; } .qnx-uiux-service-row > b{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid #d5e0ee; color:#0758d8; font-size:17px; transition:.35s ease; } .qnx-uiux-service-row:hover{ padding:0 18px; background:#f4f8ff; } .qnx-uiux-service-row:hover h3{ color:#0758d8; } .qnx-uiux-service-row:hover > b{ background:#0758d8; border-color:#0758d8; color:#fff; transform:rotate(-8deg); } .qnx-uiux-cta{ min-height:490px; display:flex; align-items:center; background:linear-gradient(115deg,#062d7a 0%,#0758d8 48%,#087ee7 72%,#08a8cf 100%); } .qnx-uiux-cta:after{ content:""; position:absolute; inset:0; background-image: linear-gradient(120deg,transparent 0 48%,rgba(255,255,255,.06) 48.1%,transparent 48.4%), linear-gradient(120deg,transparent 0 67%,rgba(183,229,28,.08) 67.1%,transparent 67.5%); } .qnx-uiux-cta-inner{ position:relative; z-index:3; width:min(1280px,calc(100% - 60px)); margin:auto; } .qnx-uiux-cta-label{ color:#fff; } .qnx-uiux-cta h2{ margin:22px 0 20px; color:#fff; font-size:clamp(48px,6vw,82px); line-height:.94; letter-spacing:-3.5px; } .qnx-uiux-cta h2 em{ color:#b7e51c; font-style:normal; } .qnx-uiux-cta p{ max-width:570px; margin:0 0 30px; color:rgba(255,255,255,.78); font-size:15px; line-height:1.7; } .qnx-uiux-cta-button{ display:inline-flex; align-items:center; gap:20px; padding:16px 19px 16px 23px; background:#fff; color:#0758d8; text-decoration:none; font-size:12px; font-weight:800; box-shadow:0 15px 40px rgba(6,45,122,.2); transition:.35s ease; } .qnx-uiux-cta-button b{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; background:#b7e51c; color:#062d7a; font-size:16px; transition:.35s ease; } .qnx-uiux-cta-button:hover{ transform:translateY(-4px); } .qnx-uiux-cta-button:hover b{ transform:translate(3px,-3px); } .qnx-uiux-cta-shape{ position:absolute; z-index:1; border:1px solid rgba(255,255,255,.14); transform:rotate(24deg); } .qnx-uiux-cta-shape-one{ width:420px; height:420px; right:8%; top:-170px; } .qnx-uiux-cta-shape-two{ width:220px; height:220px; right:20%; bottom:-120px; border-color:rgba(183,229,28,.22); } @media(max-width:1000px){ .qnx-uiux-intro-grid, .qnx-uiux-thinking-layout, .qnx-uiux-system-inner{ grid-template-columns:1fr; gap:55px; } .qnx-uiux-intro-grid{ gap:35px; } .qnx-uiux-flow-board{ grid-template-columns:repeat(2,1fr); } .qnx-uiux-flow-step:nth-child(2){ border-bottom:1px solid #dbe4ef; } .qnx-uiux-system-inner{ gap:50px; } } @media(max-width:700px){ .qnx-uiux-intro, .qnx-uiux-thinking, .qnx-uiux-flow, .qnx-uiux-system, .qnx-uiux-services{ padding-left:20px; padding-right:20px; } .qnx-uiux-intro{ padding-top:65px; padding-bottom:70px; } .qnx-uiux-intro-title h2{ font-size:48px; letter-spacing:-2.5px; } .qnx-uiux-interface{ min-height:400px; margin-top:45px; } .qnx-uiux-interface-body{ grid-template-columns:1fr; } .qnx-uiux-sidebar{ display:none; } .qnx-uiux-screen{ margin:28px; } .qnx-uiux-screen-main{ grid-template-columns:1fr; } .qnx-uiux-data{ display:none; } .qnx-uiux-feature{ min-height:220px; } .qnx-uiux-cursor{ right:18px; bottom:25px; } .qnx-uiux-section-label, .qnx-uiux-flow-heading, .qnx-uiux-services-head{ display:block; } .qnx-uiux-section-label b{ margin-top:15px; } .qnx-uiux-thinking{ padding-top:70px; padding-bottom:75px; } .qnx-uiux-thinking-layout{ padding-top:45px; } .qnx-uiux-thinking-statement p{ font-size:17px; } .qnx-uiux-flow{ padding-top:75px; padding-bottom:75px; } .qnx-uiux-flow-heading{ margin-bottom:45px; } .qnx-uiux-flow-heading h2{ margin-top:15px; font-size:43px; } .qnx-uiux-flow-board{ grid-template-columns:1fr; } .qnx-uiux-flow-step{ min-height:220px; border-right:0; border-bottom:1px solid #dbe4ef; } .qnx-uiux-flow-step:last-child{ border-bottom:0; } .qnx-uiux-flow-line{ display:none; } .qnx-uiux-flow-number{ margin-bottom:35px; } .qnx-uiux-system{ padding-top:75px; padding-bottom:75px; } .qnx-uiux-system-copy h2{ font-size:47px; } .qnx-uiux-system-visual{ padding:18px; } .qnx-uiux-system-visual > div:not(.qnx-uiux-system-corner){ grid-template-columns:72px 1fr; } .qnx-uiux-color-line i{ width:30px; height:30px; } .qnx-uiux-button-line button{ padding:11px 12px; font-size:9px; } .qnx-uiux-services{ padding-top:75px; padding-bottom:80px; } .qnx-uiux-services-head h2{ margin-top:15px; font-size:43px; } .qnx-uiux-service-row{ grid-template-columns:35px 1fr 35px; gap:10px; min-height:135px; } .qnx-uiux-service-row h3{ font-size:18px; } .qnx-uiux-service-row p{ font-size:12px; } .qnx-uiux-service-row > b{ width:31px; height:31px; } .qnx-uiux-cta{ min-height:510px; } .qnx-uiux-cta-inner{ width:calc(100% - 40px); } .qnx-uiux-cta h2{ font-size:48px; letter-spacing:-2px; } .qnx-uiux-cta-shape-one{ right:-180px; } } /* ========================================================= QNIX DIGITAL — LANDING PAGE DESIGN ========================================================= */ .qnx-lp-opening, .qnx-lp-attention, .qnx-lp-story, .qnx-lp-campaign-types, .qnx-lp-build, .qnx-lp-final{ position:relative; overflow:hidden; font-family:inherit; } .qnx-lp-opening{ padding:82px 30px 100px; background:#062d7a; color:#fff; } .qnx-lp-opening-grid, .qnx-lp-final-grid{ position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent); } .qnx-lp-opening-inner{ position:relative; z-index:2; max-width:1280px; margin:auto; } .qnx-lp-opening-meta{ display:flex; justify-content:space-between; align-items:center; padding-bottom:25px; border-bottom:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.55); font-size:9px; letter-spacing:2px; } .qnx-lp-opening-meta span{ color:#b7e51c; font-weight:800; } .qnx-lp-opening-main{ display:grid; grid-template-columns:1.2fr .8fr; gap:100px; align-items:end; padding:62px 0 75px; } .qnx-lp-opening-title h2{ margin:0; font-size:clamp(55px,7.3vw,104px); line-height:.87; letter-spacing:-5px; font-weight:800; } .qnx-lp-opening-title span{ color:#08a8cf; } .qnx-lp-opening-side{ max-width:450px; padding-bottom:5px; } .qnx-lp-opening-side p{ margin:0 0 27px; color:rgba(255,255,255,.7); font-size:16px; line-height:1.75; } .qnx-lp-opening-link{ display:inline-flex; align-items:center; gap:16px; color:#fff; text-decoration:none; font-size:13px; font-weight:800; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:9px; } .qnx-lp-opening-link strong{ color:#b7e51c; font-size:17px; } .qnx-lp-campaign{ position:relative; min-height:510px; background:linear-gradient(120deg,#0758d8,#087ee7 60%,#08a8cf); border:1px solid rgba(255,255,255,.17); box-shadow:0 35px 80px rgba(0,0,0,.2); } .qnx-lp-campaign-top{ height:55px; display:flex; justify-content:space-between; align-items:center; padding:0 25px; border-bottom:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.65); font-size:8px; letter-spacing:2px; } .qnx-lp-campaign-body{ display:grid; grid-template-columns:.9fr 1.1fr; min-height:455px; } .qnx-lp-campaign-copy{ display:flex; flex-direction:column; justify-content:center; padding:55px; } .qnx-lp-campaign-copy small{ color:#b7e51c; font-size:9px; font-weight:800; letter-spacing:2px; } .qnx-lp-campaign-copy h3{ margin:18px 0 35px; font-size:56px; line-height:.92; letter-spacing:-3px; } .qnx-lp-campaign-copy h3 em{ color:#b7e51c; font-style:normal; } .qnx-lp-campaign-action{ display:flex; align-items:center; justify-content:space-between; width:220px; padding:13px 14px 13px 18px; border:1px solid rgba(255,255,255,.35); font-size:8px; font-weight:800; letter-spacing:1.4px; } .qnx-lp-campaign-action b{ width:29px; height:29px; display:flex; align-items:center; justify-content:center; background:#b7e51c; color:#062d7a; font-size:15px; } .qnx-lp-campaign-art{ position:relative; min-height:455px; display:flex; align-items:center; justify-content:center; background:rgba(6,45,122,.22); border-left:1px solid rgba(255,255,255,.12); } .qnx-lp-art-window{ position:relative; width:78%; height:315px; background:#fff; box-shadow:0 25px 60px rgba(6,45,122,.28); transform:rotate(2deg); transition:.6s ease; } .qnx-lp-campaign:hover .qnx-lp-art-window{ transform:rotate(0) translateY(-7px); } .qnx-lp-art-nav{ display:flex; align-items:center; gap:6px; height:36px; padding:0 14px; border-bottom:1px solid #e3eaf4; } .qnx-lp-art-nav i{ width:6px; height:6px; background:#0758d8; } .qnx-lp-art-nav span{ margin-left:auto; color:#5d6b84; font-size:7px; letter-spacing:1.2px; } .qnx-lp-art-content{ display:flex; flex-direction:column; justify-content:center; height:calc(100% - 36px); padding:30px; background:linear-gradient(135deg,#f4f8ff,#fff); } .qnx-lp-art-content small{ color:#0758d8; font-size:7px; font-weight:800; letter-spacing:1.5px; } .qnx-lp-art-content strong{ margin-top:13px; color:#0d1730; font-size:35px; line-height:.9; letter-spacing:-1.5px; } .qnx-lp-art-button{ width:95px; height:20px; margin-top:25px; background:#0758d8; } .qnx-lp-art-tag{ position:absolute; padding:8px 12px; background:#b7e51c; color:#062d7a; font-size:7px; font-weight:900; letter-spacing:1px; box-shadow:0 8px 20px rgba(0,0,0,.15); } .tag-one{ top:18%; left:6%; transform:rotate(-6deg); } .tag-two{ top:67%; right:4%; transform:rotate(5deg); } .tag-three{ bottom:9%; left:20%; transform:rotate(-3deg); } .qnx-lp-attention{ background:#fff; padding:110px 30px; } .qnx-lp-attention-inner{ max-width:1280px; margin:auto; } .qnx-lp-attention-heading span, .qnx-lp-types-intro span, .qnx-lp-build-copy > span{ color:#0758d8; font-size:10px; font-weight:800; letter-spacing:2.3px; } .qnx-lp-attention-heading h2{ margin:20px 0 0; max-width:900px; color:#0d1730; font-size:clamp(45px,6vw,78px); line-height:.96; letter-spacing:-4px; } .qnx-lp-attention-heading em{ color:#0758d8; font-style:normal; } .qnx-lp-attention-layout{ display:grid; grid-template-columns:.8fr 1.2fr; gap:110px; margin-top:85px; } .qnx-lp-attention-copy p{ margin:0 0 20px; color:#5d6b84; font-size:16px; line-height:1.8; } .qnx-lp-attention-stack{ border-top:1px solid #0d1730; } .qnx-lp-attention-item{ display:grid; grid-template-columns:45px 1fr 35px; align-items:center; gap:20px; min-height:92px; border-bottom:1px solid #e3eaf4; transition:.35s ease; } .qnx-lp-attention-item > span{ color:#0758d8; font-size:10px; font-weight:800; } .qnx-lp-attention-item small{ display:block; margin-bottom:5px; color:#5d6b84; font-size:7px; letter-spacing:1.5px; } .qnx-lp-attention-item h3{ margin:0; color:#0d1730; font-size:20px; } .qnx-lp-attention-item b{ width:30px; height:30px; display:flex; align-items:center; justify-content:center; border:1px solid #dce5f0; color:#0758d8; transition:.35s ease; } .qnx-lp-attention-item:hover, .qnx-lp-attention-item.active{ padding-left:17px; background:#f4f8ff; } .qnx-lp-attention-item:hover b, .qnx-lp-attention-item.active b{ background:#0758d8; border-color:#0758d8; color:#fff; } .qnx-lp-story{ background:#f4f8ff; padding:105px 30px 120px; } .qnx-lp-story-inner{ max-width:1280px; margin:auto; } .qnx-lp-story-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:50px; margin-bottom:70px; } .qnx-lp-story-top span{ color:#0758d8; font-size:10px; font-weight:800; letter-spacing:2.2px; } .qnx-lp-story-top h2{ margin:0; color:#0d1730; font-size:clamp(42px,5vw,67px); line-height:.96; letter-spacing:-3px; } .qnx-lp-story-rail{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); } .qnx-lp-story-rail:before{ content:""; position:absolute; top:46px; left:5%; right:5%; height:1px; background:linear-gradient(90deg,#0758d8,#087ee7,#08a8cf,#79c91c); } .qnx-lp-story-block{ position:relative; min-height:330px; padding:0 20px; } .qnx-lp-story-index{ position:relative; z-index:2; width:44px; height:44px; display:flex; align-items:center; justify-content:center; margin-bottom:50px; background:#f4f8ff; border:1px solid #0758d8; color:#0758d8; font-size:12px; font-weight:800; transition:.35s ease; } .qnx-lp-story-block:hover .qnx-lp-story-index{ background:#0758d8; color:#fff; transform:translateY(-5px); } .qnx-lp-story-card{ padding:25px; background:#fff; border-top:3px solid #0758d8; box-shadow:0 15px 40px rgba(17,55,110,.07); transition:.4s ease; } .qnx-lp-story-block:nth-child(2) .qnx-lp-story-card{ border-top-color:#087ee7; } .qnx-lp-story-block:nth-child(3) .qnx-lp-story-card{ border-top-color:#08a8cf; } .qnx-lp-story-block:nth-child(4) .qnx-lp-story-card{ border-top-color:#79c91c; } .qnx-lp-story-block:hover .qnx-lp-story-card{ transform:translateY(-8px); } .qnx-lp-story-card small{ color:#5d6b84; font-size:7px; letter-spacing:1.5px; } .qnx-lp-story-card h3{ margin:15px 0 10px; color:#0d1730; font-size:24px; } .qnx-lp-story-card p{ margin:0; color:#5d6b84; font-size:13px; line-height:1.65; } .qnx-lp-campaign-types{ background:#fff; padding:110px 30px; } .qnx-lp-campaign-types-inner{ max-width:1280px; margin:auto; } .qnx-lp-types-intro{ display:flex; justify-content:space-between; align-items:flex-end; gap:50px; margin-bottom:60px; } .qnx-lp-types-intro h2{ margin:0; color:#0d1730; font-size:clamp(40px,5vw,65px); line-height:.97; letter-spacing:-3px; } .qnx-lp-types-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .qnx-lp-type-card{ position:relative; min-height:330px; padding:32px; background:#f4f8ff; border:1px solid #e1e9f3; overflow:hidden; transition:.4s ease; } .qnx-lp-type-card:after{ content:""; position:absolute; width:190px; height:190px; right:-95px; bottom:-95px; border:1px solid #08a8cf; transform:rotate(45deg); transition:.5s ease; } .qnx-lp-type-card:hover{ transform:translateY(-8px); box-shadow:0 25px 55px rgba(17,55,110,.1); } .qnx-lp-type-card:hover:after{ transform:rotate(25deg) scale(1.15); } .qnx-lp-type-card.featured{ background:#0758d8; border-color:#0758d8; } .qnx-lp-type-symbol{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; margin-bottom:45px; border:1px solid #0758d8; color:#0758d8; font-size:19px; } .qnx-lp-type-card.featured .qnx-lp-type-symbol{ border-color:#b7e51c; color:#b7e51c; } .qnx-lp-type-card small{ color:#5d6b84; font-size:8px; font-weight:800; letter-spacing:1.7px; } .qnx-lp-type-card.featured small{ color:rgba(255,255,255,.65); } .qnx-lp-type-card h3{ margin:13px 0 17px; color:#0d1730; font-size:27px; line-height:1; } .qnx-lp-type-card.featured h3{ color:#fff; } .qnx-lp-type-card p{ max-width:340px; margin:0; color:#5d6b84; font-size:13px; line-height:1.7; } .qnx-lp-type-card.featured p{ color:rgba(255,255,255,.7); } .qnx-lp-type-line{ position:absolute; left:32px; bottom:28px; width:50px; height:2px; background:#0758d8; } .qnx-lp-type-card.featured .qnx-lp-type-line{ background:#b7e51c; } .qnx-lp-build{ background:#062d7a; padding:115px 30px; color:#fff; } .qnx-lp-build-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:1fr .9fr; gap:100px; align-items:center; } .qnx-lp-build-visual{ position:relative; min-height:510px; padding:30px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.15); } .qnx-lp-build-label{ color:rgba(255,255,255,.5); font-size:8px; letter-spacing:2px; } .qnx-lp-blueprint{ position:relative; width:72%; height:400px; margin:35px auto 0; padding:18px; background:#fff; box-shadow:0 30px 60px rgba(0,0,0,.25); transform:rotate(-2deg); transition:.5s ease; } .qnx-lp-build-visual:hover .qnx-lp-blueprint{ transform:rotate(0) translateY(-8px); } .qnx-lp-blueprint-bar{ width:100%; height:18px; margin-bottom:20px; background:#0758d8; } .qnx-lp-blueprint-head{ display:flex; justify-content:space-between; color:#5d6b84; font-size:7px; letter-spacing:1.3px; } .qnx-lp-blueprint-head b{ color:#0758d8; } .qnx-lp-blueprint-title{ display:flex; flex-direction:column; gap:7px; margin-top:25px; } .qnx-lp-blueprint-title i{ display:block; width:80%; height:10px; background:#0d1730; } .qnx-lp-blueprint-title i:nth-child(2){ width:63%; } .qnx-lp-blueprint-title i:nth-child(3){ width:40%; background:#08a8cf; } .qnx-lp-blueprint-content{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:30px; } .qnx-lp-blueprint-content div{ height:85px; background:#f4f8ff; border:1px solid #e3eaf4; } .qnx-lp-blueprint-proof{ display:flex; gap:7px; margin-top:18px; } .qnx-lp-blueprint-proof span{ padding:7px 9px; background:#eef5ff; color:#0758d8; font-size:6px; font-weight:800; } .qnx-lp-blueprint-cta{ display:flex; align-items:center; justify-content:center; height:32px; margin-top:17px; background:#0758d8; color:#fff; font-size:7px; font-weight:800; letter-spacing:1px; } .qnx-lp-blueprint-note{ position:absolute; padding:9px 12px; background:#b7e51c; color:#062d7a; font-size:7px; font-weight:900; letter-spacing:1px; box-shadow:0 8px 25px rgba(0,0,0,.2); } .note-a{ top:23%; right:4%; } .note-b{ bottom:28%; left:2%; } .note-c{ bottom:10%; right:11%; } .qnx-lp-build-copy > span{ color:#b7e51c; } .qnx-lp-build-copy h2{ margin:20px 0; max-width:500px; color:#fff; font-size:clamp(45px,5.5vw,73px); line-height:.95; letter-spacing:-3px; } .qnx-lp-build-copy > p{ max-width:500px; margin:0 0 35px; color:rgba(255,255,255,.67); font-size:15px; line-height:1.75; } .qnx-lp-build-points{ border-top:1px solid rgba(255,255,255,.16); } .qnx-lp-build-points div{ display:flex; justify-content:space-between; gap:30px; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.12); } .qnx-lp-build-points strong{ color:#fff; font-size:13px; } .qnx-lp-build-points span{ color:rgba(255,255,255,.48); font-size:12px; } .qnx-lp-final{ min-height:520px; display:flex; align-items:center; background:linear-gradient(115deg,#062d7a,#0758d8 48%,#087ee7 72%,#08a8cf); } .qnx-lp-final-inner{ position:relative; z-index:3; width:min(1280px,calc(100% - 60px)); margin:auto; } .qnx-lp-final-label{ display:flex; align-items:center; gap:10px; color:#fff; font-size:10px; font-weight:800; letter-spacing:2.3px; } .qnx-lp-final-label:before{ content:""; width:28px; height:2px; background:#b7e51c; } .qnx-lp-final h2{ margin:22px 0; color:#fff; font-size:clamp(48px,6.3vw,84px); line-height:.94; letter-spacing:-4px; } .qnx-lp-final h2 em{ color:#b7e51c; font-style:normal; } .qnx-lp-final p{ max-width:580px; margin:0 0 32px; color:rgba(255,255,255,.76); font-size:15px; line-height:1.7; } .qnx-lp-final-button{ display:inline-flex; align-items:center; gap:20px; padding:16px 18px 16px 23px; background:#fff; color:#0758d8; text-decoration:none; font-size:12px; font-weight:800; box-shadow:0 18px 45px rgba(6,45,122,.22); transition:.35s ease; } .qnx-lp-final-button b{ width:31px; height:31px; display:flex; align-items:center; justify-content:center; background:#b7e51c; color:#062d7a; font-size:16px; transition:.3s ease; } .qnx-lp-final-button:hover{ transform:translateY(-4px); } .qnx-lp-final-button:hover b{ transform:translate(4px,-4px); } .qnx-lp-final-mark{ position:absolute; right:7%; bottom:-45px; z-index:2; color:rgba(255,255,255,.055); font-size:190px; font-weight:900; letter-spacing:-15px; } @media(max-width:1000px){ .qnx-lp-opening-main, .qnx-lp-attention-layout, .qnx-lp-build-inner{ grid-template-columns:1fr; gap:55px; } .qnx-lp-story-rail{ grid-template-columns:repeat(2,1fr); row-gap:35px; } .qnx-lp-story-rail:before{ display:none; } .qnx-lp-story-block{ min-height:290px; } .qnx-lp-types-grid{ grid-template-columns:1fr; } .qnx-lp-type-card{ min-height:280px; } .qnx-lp-build-visual{ max-width:700px; } } @media(max-width:700px){ .qnx-lp-opening, .qnx-lp-attention, .qnx-lp-story, .qnx-lp-campaign-types, .qnx-lp-build{ padding-left:20px; padding-right:20px; } .qnx-lp-opening{ padding-top:60px; padding-bottom:75px; } .qnx-lp-opening-meta b{ display:none; } .qnx-lp-opening-main{ padding:48px 0 55px; } .qnx-lp-opening-title h2{ font-size:55px; letter-spacing:-3px; } .qnx-lp-campaign-body{ grid-template-columns:1fr; } .qnx-lp-campaign-copy{ padding:35px; min-height:310px; } .qnx-lp-campaign-copy h3{ font-size:45px; } .qnx-lp-campaign-art{ min-height:340px; } .qnx-lp-art-window{ width:82%; height:245px; } .qnx-lp-art-content strong{ font-size:28px; } .qnx-lp-attention, .qnx-lp-campaign-types{ padding-top:75px; padding-bottom:80px; } .qnx-lp-attention-heading h2{ font-size:46px; letter-spacing:-2.5px; } .qnx-lp-attention-layout{ margin-top:55px; } .qnx-lp-story{ padding-top:75px; padding-bottom:85px; } .qnx-lp-story-top{ display:block; margin-bottom:45px; } .qnx-lp-story-top h2{ margin-top:15px; font-size:45px; } .qnx-lp-story-rail{ grid-template-columns:1fr; row-gap:18px; } .qnx-lp-story-block{ min-height:245px; } .qnx-lp-types-intro{ display:block; margin-bottom:40px; } .qnx-lp-types-intro h2{ margin-top:15px; font-size:45px; } .qnx-lp-type-card{ min-height:275px; } .qnx-lp-build{ padding-top:75px; padding-bottom:80px; } .qnx-lp-build-visual{ min-height:410px; padding:20px; } .qnx-lp-blueprint{ width:82%; height:315px; } .qnx-lp-blueprint-content div{ height:58px; } .qnx-lp-build-copy h2{ font-size:47px; } .qnx-lp-build-points div{ display:block; } .qnx-lp-build-points span{ display:block; margin-top:5px; } .qnx-lp-final{ min-height:500px; } .qnx-lp-final-inner{ width:calc(100% - 40px); } .qnx-lp-final h2{ font-size:49px; letter-spacing:-2.5px; } .qnx-lp-final-mark{ right:-15px; font-size:105px; bottom:5px; } } /* ========================================================= QNIX DIGITAL — CUSTOM WEB DEVELOPMENT ========================================================= */ .qnx-cwd-intro, .qnx-cwd-architecture, .qnx-cwd-capability, .qnx-cwd-process, .qnx-cwd-usecases, .qnx-cwd-final{ position:relative; overflow:hidden; } .qnx-cwd-intro{ padding:105px 6%; background:#f4f8ff; } .qnx-cwd-intro-grid{ max-width:1280px; margin:auto; display:grid; grid-template-columns:1fr .9fr; gap:80px; align-items:center; } .qnx-cwd-eyebrow, .qnx-cwd-section-head > span, .qnx-cwd-process-head > span, .qnx-cwd-usecases-copy > span, .qnx-cwd-final-inner > div > span{ display:block; margin-bottom:18px; color:#0758d8; font-size:11px; font-weight:800; letter-spacing:2.5px; } .qnx-cwd-intro-copy h2{ max-width:700px; margin:0; color:#0d1730; font-size:clamp(42px,5vw,72px); line-height:.98; letter-spacing:-3px; font-weight:500; } .qnx-cwd-intro-copy h2 strong{ color:#0758d8; font-weight:700; } .qnx-cwd-intro-copy p{ max-width:650px; margin:30px 0 0; color:#5d6b84; font-size:17px; line-height:1.8; } .qnx-cwd-intro-points{ display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; } .qnx-cwd-intro-points span{ padding:10px 15px; border:1px solid #dce6f3; background:#fff; color:#0d1730; font-size:12px; font-weight:700; } .qnx-cwd-code-stage{ min-height:460px; position:relative; overflow:hidden; background:#062d7a; border-radius:8px; box-shadow:0 30px 70px rgba(6,45,122,.18); transform:rotate(1.2deg); } .qnx-cwd-code-stage:before{ content:""; position:absolute; inset:0; background: linear-gradient(rgba(8,168,207,.08) 1px,transparent 1px), linear-gradient(90deg,rgba(8,168,207,.08) 1px,transparent 1px); background-size:34px 34px; } .qnx-cwd-code-top{ position:relative; z-index:2; height:58px; padding:0 22px; display:flex; align-items:center; gap:7px; border-bottom:1px solid rgba(255,255,255,.1); } .qnx-cwd-code-top > span{ width:8px; height:8px; border-radius:50%; background:#16b98a; } .qnx-cwd-code-top > span:nth-child(2){ background:#79c91c; } .qnx-cwd-code-top > span:nth-child(3){ background:#08a8cf; } .qnx-cwd-code-top b{ margin-left:auto; color:rgba(255,255,255,.48); font-size:10px; letter-spacing:1.5px; font-weight:600; } .qnx-cwd-code-body{ position:relative; z-index:2; padding:48px 30px; } .qnx-cwd-line{ display:flex; align-items:center; gap:13px; min-height:43px; color:#fff; font-family:monospace; font-size:14px; } .qnx-cwd-line.indent{ padding-left:26px; } .qnx-cwd-line i{ width:22px; color:rgba(255,255,255,.25); font-style:normal; font-size:10px; } .qnx-cwd-line em{ color:#08a8cf; font-style:normal; } .qnx-cwd-line strong{ color:rgba(255,255,255,.4); font-weight:400; } .qnx-cwd-line b{ color:#b7e51c; font-weight:600; } .qnx-cwd-build-status{ position:absolute; left:30px; right:30px; bottom:28px; z-index:2; display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.55); font-size:9px; letter-spacing:1.8px; } .qnx-cwd-status-dot{ width:7px; height:7px; border-radius:50%; background:#79c91c; box-shadow:0 0 16px rgba(121,201,28,.7); } .qnx-cwd-build-status strong{ margin-left:auto; color:#fff; } .qnx-cwd-architecture{ padding:105px 6%; background:#fff; } .qnx-cwd-section-head{ max-width:760px; margin:0 auto 70px; text-align:center; } .qnx-cwd-section-head > span{ color:#10a4b4; } .qnx-cwd-section-head h2, .qnx-cwd-process-head h2{ margin:0; color:#0d1730; font-size:clamp(36px,4.2vw,58px); line-height:1.03; letter-spacing:-2.3px; } .qnx-cwd-section-head p{ max-width:680px; margin:25px auto 0; color:#5d6b84; font-size:16px; line-height:1.75; } .qnx-cwd-architecture-map{ max-width:1100px; min-height:540px; margin:auto; position:relative; } .qnx-cwd-map-track{ position:absolute; left:50%; top:50%; width:420px; height:420px; transform:translate(-50%,-50%); border:1px dashed #b9d0ea; border-radius:50%; } .qnx-cwd-map-track:before, .qnx-cwd-map-track:after{ content:""; position:absolute; inset:48px; border:1px solid #e3eaf4; border-radius:50%; } .qnx-cwd-map-track:after{ inset:105px; border-color:#c9e9ef; } .qnx-cwd-architecture-core{ position:absolute; left:50%; top:50%; width:150px; height:150px; transform:translate(-50%,-50%); border-radius:50%; background:linear-gradient(145deg,#0758d8,#08a8cf); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; text-align:center; box-shadow:0 25px 60px rgba(7,88,216,.22); } .qnx-cwd-architecture-core span{ font-size:9px; letter-spacing:3px; opacity:.75; } .qnx-cwd-architecture-core strong{ margin-top:8px; font-size:16px; line-height:1.15; letter-spacing:1px; } .qnx-cwd-layer{ position:absolute; width:235px; padding:20px 22px; background:#fff; border:1px solid #dfe8f3; box-shadow:0 15px 40px rgba(17,55,110,.08); transition:.35s ease; } .qnx-cwd-layer:hover{ transform:translateY(-6px); border-color:#08a8cf; box-shadow:0 22px 55px rgba(7,88,216,.12); } .qnx-cwd-layer small{ display:block; color:#0758d8; font-size:9px; letter-spacing:2px; font-weight:800; } .qnx-cwd-layer strong{ display:block; margin-top:8px; color:#0d1730; font-size:17px; } .qnx-cwd-layer p{ margin:8px 0 0; color:#5d6b84; font-size:12px; line-height:1.6; } .qnx-cwd-layer-a{ left:0; top:35px; } .qnx-cwd-layer-b{ right:0; top:35px; } .qnx-cwd-layer-c{ left:0; bottom:35px; } .qnx-cwd-layer-d{ right:0; bottom:35px; } .qnx-cwd-capability{ padding:105px 6%; display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; background:#f4f8ff; } .qnx-cwd-capability-visual{ position:relative; min-height:470px; display:flex; align-items:center; justify-content:center; } .qnx-cwd-browser{ width:min(100%,570px); background:#fff; border:1px solid #d9e4f2; box-shadow:0 30px 70px rgba(17,55,110,.13); transform:rotate(-2deg); } .qnx-cwd-browser-bar{ height:50px; display:flex; align-items:center; gap:7px; padding:0 18px; border-bottom:1px solid #e6edf5; } .qnx-cwd-browser-bar > span{ width:7px; height:7px; border-radius:50%; background:#0758d8; } .qnx-cwd-browser-bar > span:nth-child(2){ background:#10a4b4; } .qnx-cwd-browser-bar > span:nth-child(3){ background:#79c91c; } .qnx-cwd-browser-bar b{ margin-left:15px; color:#7b8aa0; font-size:9px; font-weight:500; } .qnx-cwd-browser-screen{ padding:24px; } .qnx-cwd-screen-header{ height:15px; width:42%; background:#0758d8; margin-bottom:26px; } .qnx-cwd-screen-main{ display:grid; grid-template-columns:100px 1fr; gap:22px; } .qnx-cwd-screen-sidebar{ padding:16px 12px; background:#f4f8ff; } .qnx-cwd-screen-sidebar span{ display:block; height:7px; margin-bottom:16px; background:#d7e2f0; } .qnx-cwd-screen-sidebar span:first-child{ background:#08a8cf; } .qnx-cwd-screen-title{ width:58%; height:12px; margin:10px 0 25px; background:#0d1730; } .qnx-cwd-screen-columns{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .qnx-cwd-screen-columns span{ height:72px; background:#f4f8ff; border:1px solid #e3eaf4; } .qnx-cwd-screen-columns span:nth-child(2){ background:#e9f7f7; } .qnx-cwd-screen-table{ margin-top:18px; } .qnx-cwd-screen-table i{ display:block; height:7px; margin:9px 0; background:#dfe7f1; } .qnx-cwd-screen-table i:nth-child(2){ width:75%; } .qnx-cwd-screen-table i:nth-child(3){ width:88%; } .qnx-cwd-screen-table i:nth-child(4){ width:65%; } .qnx-cwd-floating-tag{ position:absolute; right:2%; bottom:38px; padding:13px 17px; background:#b7e51c; color:#0d1730; font-size:10px; font-weight:900; letter-spacing:1.5px; box-shadow:0 12px 30px rgba(121,201,28,.22); } .qnx-cwd-capability-copy{ max-width:610px; } .qnx-cwd-capability-copy h2{ margin:0; color:#0d1730; font-size:clamp(35px,4vw,56px); line-height:1.04; letter-spacing:-2px; } .qnx-cwd-capability-copy > p{ margin:25px 0 0; color:#5d6b84; font-size:16px; line-height:1.8; } .qnx-cwd-capability-list{ margin-top:35px; border-top:1px solid #dce5f1; } .qnx-cwd-capability-list div{ padding:18px 0; display:grid; grid-template-columns:170px 1fr; gap:20px; border-bottom:1px solid #dce5f1; } .qnx-cwd-capability-list strong{ color:#0d1730; font-size:13px; } .qnx-cwd-capability-list span{ color:#5d6b84; font-size:12px; line-height:1.55; } .qnx-cwd-process{ padding:105px 6%; background:#062d7a; } .qnx-cwd-process-head{ max-width:760px; margin:0 auto 70px; text-align:center; } .qnx-cwd-process-head > span{ color:#b7e51c; } .qnx-cwd-process-head h2{ color:#fff; } .qnx-cwd-process-road{ max-width:1200px; margin:auto; position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:25px; } .qnx-cwd-road-line{ position:absolute; top:13px; left:7%; right:7%; height:1px; background:linear-gradient(90deg,#08a8cf,#16b98a,#79c91c,#b7e51c); } .qnx-cwd-process-road article{ position:relative; padding-top:45px; } .qnx-cwd-process-road article:before{ content:""; position:absolute; top:7px; left:0; width:14px; height:14px; border:3px solid #b7e51c; background:#062d7a; border-radius:50%; } .qnx-cwd-process-road article span{ color:#08a8cf; font-size:9px; font-weight:800; letter-spacing:2px; } .qnx-cwd-process-road article h3{ margin:12px 0 10px; color:#fff; font-size:24px; } .qnx-cwd-process-road article p{ margin:0; color:rgba(255,255,255,.62); font-size:13px; line-height:1.7; max-width:235px; } .qnx-cwd-usecases{ padding:105px 6%; background:#fff; display:grid; grid-template-columns:.85fr 1.15fr; gap:100px; align-items:start; } .qnx-cwd-usecases-copy{ position:sticky; top:100px; } .qnx-cwd-usecases-copy > span{ color:#16b98a; } .qnx-cwd-usecases-copy h2{ margin:0; color:#0d1730; font-size:clamp(36px,4vw,55px); line-height:1.04; letter-spacing:-2px; } .qnx-cwd-usecases-copy p{ margin:25px 0 0; color:#5d6b84; font-size:15px; line-height:1.8; } .qnx-cwd-usecases-list{ border-top:1px solid #dce5f1; } .qnx-cwd-usecases-list div{ display:grid; grid-template-columns:50px 1fr; column-gap:20px; padding:28px 0; border-bottom:1px solid #dce5f1; } .qnx-cwd-usecases-list span{ grid-row:span 2; color:#0758d8; font-size:11px; font-weight:800; letter-spacing:1px; } .qnx-cwd-usecases-list strong{ color:#0d1730; font-size:18px; } .qnx-cwd-usecases-list p{ margin:8px 0 0; color:#5d6b84; font-size:13px; line-height:1.6; } .qnx-cwd-final{ padding:95px 6%; background:linear-gradient(125deg,#062d7a 0%,#0758d8 52%,#08a8cf 100%); } .qnx-cwd-final-grid{ position:absolute; inset:0; opacity:.13; background: linear-gradient(90deg,transparent 49.7%,#fff 50%,transparent 50.3%), linear-gradient(transparent 49.7%,#fff 50%,transparent 50.3%); background-size:70px 70px; } .qnx-cwd-final:after{ content:""; position:absolute; width:320px; height:320px; right:-100px; top:-130px; border:1px solid rgba(183,229,28,.45); transform:rotate(35deg); } .qnx-cwd-final-inner{ position:relative; z-index:2; max-width:1280px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:60px; } .qnx-cwd-final-inner > div{ max-width:750px; } .qnx-cwd-final-inner > div > span{ color:#b7e51c; } .qnx-cwd-final-inner h2{ margin:0; color:#fff; font-size:clamp(38px,5vw,66px); line-height:1; letter-spacing:-2.5px; } .qnx-cwd-final-inner p{ max-width:620px; margin:24px 0 0; color:rgba(255,255,255,.72); font-size:15px; line-height:1.75; } .qnx-cwd-final-action{ min-width:235px; min-height:235px; border:1px solid rgba(255,255,255,.28); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; color:#fff; text-decoration:none; transition:.4s ease; background:rgba(255,255,255,.06); backdrop-filter:blur(8px); } .qnx-cwd-final-action span{ font-size:12px; font-weight:800; letter-spacing:1px; } .qnx-cwd-final-action b{ font-size:28px; font-weight:400; color:#b7e51c; transition:.3s ease; } .qnx-cwd-final-action:hover{ transform:translateY(-8px) rotate(4deg); border-color:#b7e51c; background:rgba(7,88,216,.2); } .qnx-cwd-final-action:hover b{ transform:translate(5px,-5px); } .qnx-cwd-final-mark{ position:relative; z-index:2; max-width:1280px; margin:65px auto 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.38); font-size:9px; letter-spacing:3px; } @media(max-width:1050px){ .qnx-cwd-intro-grid, .qnx-cwd-capability, .qnx-cwd-usecases{ gap:55px; } .qnx-cwd-intro{ padding:80px 5%; } .qnx-cwd-architecture, .qnx-cwd-capability, .qnx-cwd-process, .qnx-cwd-usecases{ padding:85px 5%; } .qnx-cwd-layer{ width:205px; } .qnx-cwd-map-track{ width:370px; height:370px; } } @media(max-width:800px){ .qnx-cwd-intro-grid, .qnx-cwd-capability, .qnx-cwd-usecases{ grid-template-columns:1fr; } .qnx-cwd-code-stage{ transform:none; min-height:400px; } .qnx-cwd-architecture-map{ min-height:720px; } .qnx-cwd-layer{ width:220px; } .qnx-cwd-layer-a{ left:0; top:20px; } .qnx-cwd-layer-b{ right:0; top:20px; } .qnx-cwd-layer-c{ left:0; bottom:20px; } .qnx-cwd-layer-d{ right:0; bottom:20px; } .qnx-cwd-process-road{ grid-template-columns:1fr 1fr; gap:45px 30px; } .qnx-cwd-road-line{ display:none; } .qnx-cwd-usecases-copy{ position:relative; top:auto; } .qnx-cwd-final-inner{ flex-direction:column; align-items:flex-start; } .qnx-cwd-final-action{ min-width:190px; min-height:190px; } } @media(max-width:560px){ .qnx-cwd-intro{ padding:65px 20px; } .qnx-cwd-architecture, .qnx-cwd-capability, .qnx-cwd-process, .qnx-cwd-usecases{ padding:65px 20px; } .qnx-cwd-intro-copy h2{ font-size:43px; letter-spacing:-1.8px; } .qnx-cwd-intro-copy p{ font-size:14px; } .qnx-cwd-code-stage{ min-height:360px; } .qnx-cwd-code-body{ padding:35px 18px; } .qnx-cwd-line{ gap:8px; font-size:11px; } .qnx-cwd-line.indent{ padding-left:10px; } .qnx-cwd-layer{ position:relative; left:auto!important; right:auto!important; top:auto!important; bottom:auto!important; width:100%; margin-bottom:14px; } .qnx-cwd-architecture-map{ min-height:auto; display:flex; flex-direction:column; } .qnx-cwd-architecture-core{ position:relative; left:auto; top:auto; transform:none; margin:0 auto 25px; width:130px; height:130px; } .qnx-cwd-map-track{ display:none; } .qnx-cwd-screen-main{ grid-template-columns:70px 1fr; gap:12px; } .qnx-cwd-browser-screen{ padding:15px; } .qnx-cwd-screen-columns span{ height:50px; } .qnx-cwd-floating-tag{ right:0; bottom:10px; } .qnx-cwd-capability-list div{ grid-template-columns:1fr; gap:7px; } .qnx-cwd-process-road{ grid-template-columns:1fr; gap:30px; } .qnx-cwd-process-road article{ padding-top:0; padding-left:30px; } .qnx-cwd-process-road article:before{ top:2px; left:0; } .qnx-cwd-final{ padding:70px 20px; } .qnx-cwd-final-inner h2{ font-size:43px; } .qnx-cwd-final-action{ min-width:165px; min-height:165px; } } /* ========================================================= QNIX DIGITAL — WORDPRESS DEVELOPMENT ========================================================= */ .qnx-wpd-opening, .qnx-wpd-control, .qnx-wpd-builder, .qnx-wpd-stack, .qnx-wpd-fit, .qnx-wpd-final{ position:relative; overflow:hidden; } .qnx-wpd-opening{ padding:100px 6%; background:#fff; } .qnx-wpd-opening-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:75px; align-items:center; } .qnx-wpd-label, .qnx-wpd-control-heading > span, .qnx-wpd-stack-head > span, .qnx-wpd-fit-copy > span, .qnx-wpd-final-copy > span{ display:block; margin-bottom:17px; color:#0758d8; font-size:10px; font-weight:900; letter-spacing:2.6px; } .qnx-wpd-opening-copy h2{ margin:0; color:#0d1730; font-size:clamp(43px,5vw,70px); line-height:.98; letter-spacing:-3px; font-weight:500; } .qnx-wpd-opening-copy h2 strong{ color:#0758d8; font-weight:750; } .qnx-wpd-opening-copy p{ max-width:610px; margin:28px 0 0; color:#5d6b84; font-size:16px; line-height:1.8; } .qnx-wpd-opening-meta{ display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; } .qnx-wpd-opening-meta span{ padding:9px 13px; border-left:3px solid #08a8cf; background:#f4f8ff; color:#0d1730; font-size:11px; font-weight:750; } .qnx-wpd-admin{ min-height:470px; background:#0d1730; box-shadow:0 28px 70px rgba(13,23,48,.17); position:relative; } .qnx-wpd-admin:after{ content:""; position:absolute; width:180px; height:180px; right:-70px; bottom:-80px; border:1px solid rgba(183,229,28,.35); transform:rotate(45deg); } .qnx-wpd-admin-top{ height:76px; padding:0 25px; display:flex; align-items:center; gap:14px; border-bottom:1px solid rgba(255,255,255,.1); } .qnx-wpd-wp-mark{ width:37px; height:37px; border:2px solid #08a8cf; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; font-weight:800; } .qnx-wpd-admin-top small{ display:block; color:#08a8cf; font-size:8px; letter-spacing:2px; } .qnx-wpd-admin-top strong{ display:block; margin-top:3px; color:#fff; font-size:12px; letter-spacing:.7px; } .qnx-wpd-admin-top > b{ margin-left:auto; color:#79c91c; font-size:9px; letter-spacing:1px; } .qnx-wpd-admin-body{ display:grid; grid-template-columns:145px 1fr; min-height:320px; } .qnx-wpd-admin-body aside{ padding:25px 15px; border-right:1px solid rgba(255,255,255,.08); } .qnx-wpd-admin-body aside span{ display:block; padding:11px 12px; margin-bottom:4px; color:rgba(255,255,255,.42); font-size:10px; } .qnx-wpd-admin-body aside span.active{ color:#fff; background:#0758d8; } .qnx-wpd-admin-content{ padding:42px 35px; } .qnx-wpd-admin-content small{ color:#10a4b4; font-size:8px; letter-spacing:2px; } .qnx-wpd-admin-content h3{ margin:10px 0 30px; color:#fff; font-size:25px; font-weight:500; } .qnx-wpd-admin-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .qnx-wpd-admin-stats div{ padding:18px 12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); } .qnx-wpd-admin-stats b{ display:block; color:#b7e51c; font-size:24px; } .qnx-wpd-admin-stats span{ color:rgba(255,255,255,.4); font-size:8px; letter-spacing:1px; } .qnx-wpd-admin-line{ height:7px; width:85%; margin-top:28px; background:rgba(255,255,255,.12); } .qnx-wpd-admin-line.short{ width:58%; margin-top:10px; background:rgba(8,168,207,.35); } .qnx-wpd-admin-footer{ height:58px; padding:0 25px; display:flex; align-items:center; border-top:1px solid rgba(255,255,255,.08); } .qnx-wpd-admin-footer span{ color:rgba(255,255,255,.35); font-size:8px; letter-spacing:2px; } .qnx-wpd-admin-footer b{ margin-left:auto; color:#79c91c; font-size:8px; letter-spacing:1.5px; } .qnx-wpd-control{ padding:100px 6%; background:#f4f8ff; } .qnx-wpd-control-heading{ max-width:760px; margin:0 auto 65px; text-align:center; } .qnx-wpd-control-heading > span{ color:#10a4b4; } .qnx-wpd-control-heading h2, .qnx-wpd-stack-head h2{ margin:0; color:#0d1730; font-size:clamp(38px,4.5vw,59px); line-height:1; letter-spacing:-2.5px; } .qnx-wpd-control-heading p{ max-width:650px; margin:23px auto 0; color:#5d6b84; font-size:15px; line-height:1.75; } .qnx-wpd-control-board{ max-width:1180px; min-height:440px; margin:auto; display:grid; grid-template-columns:1fr 120px 1fr; background:#fff; border:1px solid #dfe8f3; box-shadow:0 20px 55px rgba(17,55,110,.07); } .qnx-wpd-control-column{ padding:42px; } .qnx-wpd-control-column > small{ color:#0758d8; font-size:9px; font-weight:900; letter-spacing:2px; } .qnx-wpd-control-column > div{ padding:25px 0; border-bottom:1px solid #e3eaf4; } .qnx-wpd-control-column > div:last-child{ border-bottom:0; } .qnx-wpd-control-column strong{ display:block; color:#0d1730; font-size:17px; } .qnx-wpd-control-column span{ display:block; margin-top:8px; color:#5d6b84; font-size:12px; line-height:1.65; } .qnx-wpd-control-divider{ position:relative; display:flex; align-items:center; justify-content:center; background:#062d7a; } .qnx-wpd-control-divider:before{ content:""; position:absolute; width:1px; height:75%; background:linear-gradient(#08a8cf,#b7e51c); } .qnx-wpd-control-divider span{ position:relative; z-index:2; width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#0758d8; color:#fff; font-size:11px; font-weight:900; box-shadow:0 10px 30px rgba(7,88,216,.35); } .qnx-wpd-builder{ padding:105px 6%; display:grid; grid-template-columns:1fr .9fr; gap:95px; align-items:center; background:#fff; } .qnx-wpd-builder-visual{ min-height:500px; position:relative; display:flex; align-items:center; justify-content:center; } .qnx-wpd-page-frame{ width:min(100%,580px); background:#fff; border:1px solid #d9e4f1; box-shadow:0 30px 70px rgba(17,55,110,.14); transform:rotate(-1.5deg); } .qnx-wpd-frame-top{ height:46px; display:flex; align-items:center; gap:6px; padding:0 17px; border-bottom:1px solid #e5ebf3; } .qnx-wpd-frame-top span{ width:7px; height:7px; border-radius:50%; background:#0758d8; } .qnx-wpd-frame-top span:nth-child(2){ background:#08a8cf; } .qnx-wpd-frame-top span:nth-child(3){ background:#79c91c; } .qnx-wpd-frame-top b{ margin-left:15px; color:#718198; font-size:8px; font-weight:500; } .qnx-wpd-frame-content{ padding:28px; } .qnx-wpd-hero-block{ min-height:190px; padding:28px; background:linear-gradient(135deg,#062d7a,#0758d8); } .qnx-wpd-hero-block small{ color:#b7e51c; font-size:8px; letter-spacing:2px; } .qnx-wpd-hero-block strong{ display:block; margin-top:17px; color:#fff; font-size:28px; line-height:1.05; } .qnx-wpd-hero-block i{ display:block; width:90px; height:4px; margin-top:25px; background:#08a8cf; } .qnx-wpd-content-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:15px; } .qnx-wpd-content-row span{ height:70px; background:#f4f8ff; border:1px solid #e3eaf4; } .qnx-wpd-content-row span:nth-child(2){ background:#e8f7f7; } .qnx-wpd-content-wide{ height:35px; width:65%; margin-top:16px; background:#e3eaf4; } .qnx-wpd-module{ position:absolute; padding:11px 15px; background:#fff; border:1px solid #d8e3f1; color:#0758d8; font-size:9px; font-weight:900; letter-spacing:1.5px; box-shadow:0 10px 25px rgba(17,55,110,.1); } .module-one{ top:65px; right:2%; } .module-two{ left:0; top:47%; color:#10a4b4; } .module-three{ right:7%; bottom:55px; color:#16b98a; } .qnx-wpd-builder-copy{ max-width:620px; } .qnx-wpd-builder-copy h2{ margin:0; color:#0d1730; font-size:clamp(36px,4vw,56px); line-height:1.04; letter-spacing:-2px; } .qnx-wpd-builder-copy > p{ margin:24px 0 0; color:#5d6b84; font-size:15px; line-height:1.8; } .qnx-wpd-feature-stack{ margin-top:35px; border-top:1px solid #dce5f1; } .qnx-wpd-feature-stack article{ display:grid; grid-template-columns:42px 1fr; gap:18px; padding:20px 0; border-bottom:1px solid #dce5f1; } .qnx-wpd-feature-stack article > b{ color:#08a8cf; font-size:10px; letter-spacing:1px; } .qnx-wpd-feature-stack strong{ color:#0d1730; font-size:14px; } .qnx-wpd-feature-stack p{ margin:6px 0 0; color:#5d6b84; font-size:12px; line-height:1.6; } .qnx-wpd-stack{ padding:100px 6%; background:#062d7a; } .qnx-wpd-stack-head{ max-width:700px; margin:0 auto 60px; text-align:center; } .qnx-wpd-stack-head > span{ color:#b7e51c; } .qnx-wpd-stack-head h2{ color:#fff; } .qnx-wpd-stack-system{ max-width:820px; margin:auto; display:flex; flex-direction:column; align-items:center; } .qnx-wpd-stack-layer{ width:min(100%,680px); min-height:115px; padding:23px 30px; display:grid; grid-template-columns:55px 1fr; align-items:center; column-gap:20px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); transition:.35s ease; } .qnx-wpd-stack-layer:hover{ transform:translateX(10px); border-color:#08a8cf; background:rgba(8,168,207,.09); } .qnx-wpd-stack-layer span{ grid-row:span 2; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:1px solid #08a8cf; color:#b7e51c; font-size:10px; } .qnx-wpd-stack-layer strong{ color:#fff; font-size:19px; } .qnx-wpd-stack-layer p{ margin:6px 0 0; color:rgba(255,255,255,.55); font-size:12px; line-height:1.5; } .qnx-wpd-stack-connector{ width:1px; height:38px; background:linear-gradient(#08a8cf,#b7e51c); } .qnx-wpd-stack-note{ max-width:680px; margin:45px auto 0; padding:20px 25px; border-left:3px solid #b7e51c; background:rgba(255,255,255,.04); } .qnx-wpd-stack-note span{ color:#b7e51c; font-size:9px; font-weight:900; letter-spacing:2px; } .qnx-wpd-stack-note p{ margin:9px 0 0; color:rgba(255,255,255,.6); font-size:12px; line-height:1.7; } .qnx-wpd-fit{ padding:105px 6%; display:grid; grid-template-columns:.85fr 1.15fr; gap:100px; background:#f4f8ff; } .qnx-wpd-fit-copy{ position:sticky; top:100px; align-self:start; } .qnx-wpd-fit-copy > span{ color:#16b98a; } .qnx-wpd-fit-copy h2{ margin:0; color:#0d1730; font-size:clamp(36px,4vw,54px); line-height:1.04; letter-spacing:-2px; } .qnx-wpd-fit-copy p{ margin:24px 0 0; color:#5d6b84; font-size:14px; line-height:1.8; } .qnx-wpd-fit-list{ border-top:1px solid #d8e3ef; } .qnx-wpd-fit-list div{ padding:27px 0; border-bottom:1px solid #d8e3ef; } .qnx-wpd-fit-list span{ display:block; color:#0758d8; font-size:9px; font-weight:900; letter-spacing:2px; } .qnx-wpd-fit-list strong{ display:block; margin-top:9px; color:#0d1730; font-size:19px; } .qnx-wpd-fit-list p{ margin:7px 0 0; color:#5d6b84; font-size:12px; line-height:1.6; } .qnx-wpd-final{ padding:95px 6%; background:linear-gradient(125deg,#062d7a 0%,#0758d8 56%,#10a4b4 100%); } .qnx-wpd-final-orbit{ position:absolute; width:500px; height:500px; right:-180px; top:-200px; border:1px solid rgba(183,229,28,.32); border-radius:50%; } .qnx-wpd-final-orbit:before{ content:""; position:absolute; inset:70px; border:1px solid rgba(255,255,255,.13); border-radius:50%; } .qnx-wpd-final-inner{ position:relative; z-index:2; max-width:1280px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:70px; } .qnx-wpd-final-copy{ max-width:760px; } .qnx-wpd-final-copy > span{ color:#b7e51c; } .qnx-wpd-final-copy h2{ margin:0; color:#fff; font-size:clamp(39px,4.8vw,63px); line-height:1; letter-spacing:-2.4px; } .qnx-wpd-final-copy p{ max-width:620px; margin:23px 0 0; color:rgba(255,255,255,.7); font-size:15px; line-height:1.75; } .qnx-wpd-final-button{ width:205px; height:205px; flex:0 0 205px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px; border:1px solid rgba(255,255,255,.32); border-radius:50%; color:#fff; text-decoration:none; background:rgba(255,255,255,.05); transition:.4s ease; backdrop-filter:blur(7px); } .qnx-wpd-final-button span{ font-size:11px; font-weight:800; letter-spacing:1px; } .qnx-wpd-final-button b{ color:#b7e51c; font-size:27px; font-weight:400; } .qnx-wpd-final-button:hover{ transform:translateY(-8px); border-color:#b7e51c; background:rgba(7,88,216,.2); } .qnx-wpd-final-line{ position:relative; z-index:2; max-width:1280px; margin:65px auto 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.18); display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.35); font-size:8px; letter-spacing:2.5px; } .qnx-wpd-final-line i{ width:4px; height:4px; background:#b7e51c; border-radius:50%; } @media(max-width:1000px){ .qnx-wpd-opening-inner, .qnx-wpd-builder, .qnx-wpd-fit{ gap:55px; } .qnx-wpd-opening, .qnx-wpd-control, .qnx-wpd-builder, .qnx-wpd-stack, .qnx-wpd-fit{ padding:85px 5%; } .qnx-wpd-control-board{ grid-template-columns:1fr; } .qnx-wpd-control-divider{ min-height:80px; } .qnx-wpd-control-divider:before{ width:75%; height:1px; } } @media(max-width:800px){ .qnx-wpd-opening-inner, .qnx-wpd-builder, .qnx-wpd-fit{ grid-template-columns:1fr; } .qnx-wpd-admin{ min-height:430px; } .qnx-wpd-builder-visual{ min-height:430px; } .qnx-wpd-fit-copy{ position:relative; top:auto; } .qnx-wpd-final-inner{ flex-direction:column; align-items:flex-start; } } @media(max-width:560px){ .qnx-wpd-opening, .qnx-wpd-control, .qnx-wpd-builder, .qnx-wpd-stack, .qnx-wpd-fit{ padding:65px 20px; } .qnx-wpd-opening-copy h2{ font-size:43px; letter-spacing:-1.8px; } .qnx-wpd-opening-copy p{ font-size:14px; } .qnx-wpd-admin-body{ grid-template-columns:88px 1fr; } .qnx-wpd-admin-body aside span{ padding:9px 7px; font-size:8px; } .qnx-wpd-admin-content{ padding:30px 18px; } .qnx-wpd-admin-content h3{ font-size:20px; } .qnx-wpd-admin-stats{ gap:6px; } .qnx-wpd-admin-stats div{ padding:13px 7px; } .qnx-wpd-admin-stats b{ font-size:19px; } .qnx-wpd-control-column{ padding:28px 22px; } .qnx-wpd-page-frame{ transform:none; } .qnx-wpd-builder-visual{ min-height:350px; } .qnx-wpd-frame-content{ padding:15px; } .qnx-wpd-hero-block{ min-height:145px; padding:20px; } .qnx-wpd-hero-block strong{ font-size:22px; } .qnx-wpd-module{ padding:8px 10px; font-size:7px; } .module-one{ top:25px; } .module-two{ left:0; } .module-three{ bottom:25px; } .qnx-wpd-stack-layer{ padding:20px; grid-template-columns:45px 1fr; } .qnx-wpd-final{ padding:70px 20px; } .qnx-wpd-final-copy h2{ font-size:42px; } .qnx-wpd-final-button{ width:175px; height:175px; flex-basis:175px; } .qnx-wpd-final-line{ flex-wrap:wrap; } } /* ========================================================= QNIX DIGITAL — E-COMMERCE DEVELOPMENT ========================================================= */ .qnx-ecd-reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease,transform .8s ease; } .qnx-ecd-reveal.qnx-ecd-visible{ opacity:1; transform:translateY(0); } .qnx-ecd-kicker{ display:inline-flex; align-items:center; gap:10px; color:#0758d8; font-size:11px; font-weight:800; letter-spacing:2.4px; } .qnx-ecd-kicker:before{ content:""; width:24px; height:2px; background:linear-gradient(90deg,#0758d8,#16b98a); } .qnx-ecd-intro{ position:relative; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; min-height:620px; padding:85px 7%; background:#f4f8ff; } .qnx-ecd-intro-grid{ position:absolute; inset:0; opacity:.42; background-image: linear-gradient(rgba(7,88,216,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.055) 1px,transparent 1px); background-size:54px 54px; mask-image:linear-gradient(90deg,#000,transparent 75%); } .qnx-ecd-intro-copy{ position:relative; z-index:2; max-width:650px; } .qnx-ecd-intro-copy h2{ margin:20px 0 22px; color:#0d1730; font-size:clamp(42px,5vw,72px); line-height:1.02; letter-spacing:-3px; font-weight:800; } .qnx-ecd-intro-copy p{ max-width:570px; margin:0; color:#5d6b84; font-size:17px; line-height:1.8; } .qnx-ecd-intro-points{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; } .qnx-ecd-intro-points span{ padding:10px 15px; border:1px solid #dbe6f3; background:#fff; color:#0d1730; font-size:12px; font-weight:700; } .qnx-ecd-store-scene{ position:relative; z-index:2; min-height:440px; display:flex; align-items:center; justify-content:center; } .qnx-ecd-browser{ width:min(600px,100%); overflow:hidden; background:#fff; border:1px solid #d7e2ef; box-shadow:0 30px 75px rgba(7,88,216,.16); } .qnx-ecd-browser-top{ height:46px; display:flex; align-items:center; gap:6px; padding:0 16px; background:#062d7a; } .qnx-ecd-browser-top span{ width:7px; height:7px; border-radius:50%; background:#fff; opacity:.6; } .qnx-ecd-browser-top b{ margin-left:auto; color:#fff; font-size:9px; letter-spacing:2px; } .qnx-ecd-store-body{ padding:25px; } .qnx-ecd-store-nav{ display:flex; align-items:center; gap:20px; padding-bottom:20px; border-bottom:1px solid #e3eaf4; } .qnx-ecd-store-nav strong{ color:#0d1730; font-size:15px; } .qnx-ecd-store-nav div{ width:100px; height:5px; margin-left:auto; background:#e8eef7; } .qnx-ecd-store-nav i{ width:25px; height:25px; border:1px solid #dbe5f1; } .qnx-ecd-store-content{ display:grid; grid-template-columns:1fr 1fr; gap:28px; padding-top:28px; } .qnx-ecd-product-image{ min-height:245px; display:flex; align-items:flex-end; padding:20px; background: linear-gradient(135deg,#087ee7,#08a8cf 58%,#16b98a); } .qnx-ecd-product-image span{ color:#fff; font-size:10px; font-weight:800; letter-spacing:2px; } .qnx-ecd-product-copy small{ color:#0758d8; font-size:9px; font-weight:800; letter-spacing:1.5px; } .qnx-ecd-product-copy h3{ margin:12px 0; color:#0d1730; font-size:28px; line-height:1.1; } .qnx-ecd-product-copy p{ color:#5d6b84; font-size:13px; line-height:1.7; } .qnx-ecd-price-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:24px; } .qnx-ecd-price-row strong{ color:#0d1730; font-size:21px; } .qnx-ecd-price-row button{ border:0; padding:12px 14px; background:#0758d8; color:#fff; font-size:9px; font-weight:800; letter-spacing:1px; cursor:pointer; } .qnx-ecd-floating-cart{ position:absolute; right:-8px; bottom:30px; width:155px; padding:17px; background:#fff; border-left:4px solid #79c91c; box-shadow:0 18px 40px rgba(7,88,216,.15); } .qnx-ecd-floating-cart span{ display:block; color:#5d6b84; font-size:8px; font-weight:800; letter-spacing:1.5px; } .qnx-ecd-floating-cart strong{ display:inline-block; margin-top:5px; color:#0758d8; font-size:27px; } .qnx-ecd-floating-cart small{ margin-left:5px; color:#5d6b84; font-size:9px; } /* BUYING JOURNEY */ .qnx-ecd-journey{ padding:105px 7%; background:#fff; } .qnx-ecd-section-head{ max-width:760px; margin:0 auto 58px; text-align:center; } .qnx-ecd-section-head h2{ margin:18px 0 14px; color:#0d1730; font-size:clamp(34px,4vw,54px); line-height:1.08; letter-spacing:-2px; } .qnx-ecd-section-head p{ margin:0 auto; max-width:620px; color:#5d6b84; font-size:16px; line-height:1.8; } .qnx-ecd-journey-board{ position:relative; max-width:1320px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .qnx-ecd-journey-line{ position:absolute; left:11%; right:11%; top:76px; height:1px; background:linear-gradient(90deg,#0758d8,#08a8cf,#16b98a,#79c91c); opacity:.35; } .qnx-ecd-journey-card{ position:relative; z-index:2; min-height:390px; padding:30px 27px; background:#fff; border:1px solid #dce6f2; box-shadow:0 12px 35px rgba(17,55,110,.055); transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease; } .qnx-ecd-journey-card:hover{ transform:translateY(-8px); border-color:#b9d3f4; box-shadow:0 24px 55px rgba(7,88,216,.13); } .qnx-ecd-step{ position:absolute; top:20px; right:20px; color:#d7e5f7; font-size:11px; font-weight:800; letter-spacing:1px; } .qnx-ecd-card-icon{ width:54px; height:54px; display:flex; align-items:center; justify-content:center; margin-bottom:42px; background:#f0f6ff; border:1px solid #d7e7fa; } .qnx-ecd-card-icon i{ position:relative; display:block; width:22px; height:22px; } .qnx-ecd-icon-eye{ border:2px solid #0758d8; border-radius:70% 10%; transform:rotate(45deg); } .qnx-ecd-icon-eye:after{ content:""; position:absolute; width:6px; height:6px; left:6px; top:6px; border-radius:50%; background:#16b98a; } .qnx-ecd-icon-search{ border:2px solid #0758d8; border-radius:50%; } .qnx-ecd-icon-search:after{ content:""; position:absolute; width:9px; height:2px; right:-7px; bottom:-4px; background:#16b98a; transform:rotate(45deg); } .qnx-ecd-icon-cart{ border:2px solid #0758d8; border-top:0; height:14px !important; margin-top:6px; } .qnx-ecd-icon-cart:before{ content:""; position:absolute; left:-4px; top:-7px; width:8px; height:7px; border-top:2px solid #0758d8; border-left:2px solid #0758d8; } .qnx-ecd-icon-cart:after{ content:"• •"; position:absolute; bottom:-13px; left:1px; color:#16b98a; letter-spacing:3px; font-size:12px; } .qnx-ecd-icon-repeat{ border:2px solid #0758d8; border-left-color:transparent; border-radius:50%; } .qnx-ecd-icon-repeat:after{ content:""; position:absolute; right:-2px; top:-2px; border-style:solid; border-width:4px 0 4px 6px; border-color:transparent transparent transparent #16b98a; } .qnx-ecd-journey-card > span{ color:#0758d8; font-size:10px; font-weight:800; letter-spacing:2px; } .qnx-ecd-journey-card h3{ margin:12px 0 14px; color:#0d1730; font-size:23px; line-height:1.2; } .qnx-ecd-journey-card p{ margin:0; color:#5d6b84; font-size:13px; line-height:1.75; } .qnx-ecd-journey-card b{ position:absolute; left:27px; bottom:25px; color:#0758d8; font-size:11px; } /* BUILT FOR REAL COMMERCE */ .qnx-ecd-commerce{ padding:105px 7%; background:#f4f8ff; overflow:hidden; } .qnx-ecd-commerce-wrap{ max-width:1320px; margin:auto; display:grid; grid-template-columns:.82fr 1.18fr; gap:80px; align-items:center; } .qnx-ecd-commerce-copy h2{ max-width:650px; margin:18px 0; color:#0d1730; font-size:clamp(38px,4.5vw,61px); line-height:1.04; letter-spacing:-2.5px; } .qnx-ecd-commerce-copy > p{ max-width:570px; color:#5d6b84; font-size:16px; line-height:1.8; } .qnx-ecd-commerce-points{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:32px; } .qnx-ecd-commerce-points div{ display:flex; align-items:center; gap:12px; min-height:64px; padding:12px 15px; background:#fff; border:1px solid #dce7f3; } .qnx-ecd-commerce-points strong{ color:#0758d8; font-size:10px; } .qnx-ecd-commerce-points span{ color:#0d1730; font-size:11px; line-height:1.4; font-weight:700; } .qnx-ecd-performance{ overflow:hidden; background:#062d7a; border:1px solid rgba(255,255,255,.1); box-shadow:0 28px 65px rgba(6,45,122,.2); } .qnx-ecd-performance-top{ display:flex; justify-content:space-between; align-items:center; padding:23px 27px; border-bottom:1px solid rgba(255,255,255,.1); } .qnx-ecd-performance-top small{ display:block; margin-bottom:5px; color:#7bb9ff; font-size:8px; letter-spacing:1.7px; font-weight:800; } .qnx-ecd-performance-top strong{ color:#fff; font-size:17px; } .qnx-ecd-live{ display:flex; align-items:center; gap:6px; color:#b7e51c; font-size:9px; font-weight:800; letter-spacing:1px; } .qnx-ecd-live i{ width:6px; height:6px; border-radius:50%; background:#79c91c; box-shadow:0 0 12px rgba(121,201,28,.8); } .qnx-ecd-performance-main{ display:grid; grid-template-columns:170px 1fr; gap:35px; padding:35px 27px; } .qnx-ecd-health{ padding-right:25px; border-right:1px solid rgba(255,255,255,.1); } .qnx-ecd-health span{ display:block; color:#8cb5df; font-size:8px; font-weight:800; letter-spacing:1.4px; } .qnx-ecd-health strong{ display:block; margin:13px 0 3px; color:#fff; font-size:50px; line-height:1; letter-spacing:-2px; } .qnx-ecd-health small{ color:#8cb5df; font-size:9px; } .qnx-ecd-bars{ display:flex; flex-direction:column; justify-content:center; gap:18px; } .qnx-ecd-bars > div{ display:grid; grid-template-columns:105px 1fr 25px; gap:10px; align-items:center; } .qnx-ecd-bars label{ color:#c7d8eb; font-size:9px; } .qnx-ecd-bars > div > span{ height:6px; overflow:hidden; background:rgba(255,255,255,.1); } .qnx-ecd-bars > div > span i{ display:block; height:100%; background:linear-gradient(90deg,#087ee7,#08a8cf,#79c91c); } .qnx-ecd-bars b{ color:#fff; font-size:9px; text-align:right; } .qnx-ecd-performance-bottom{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.1); } .qnx-ecd-performance-bottom div{ padding:18px 20px; border-right:1px solid rgba(255,255,255,.1); } .qnx-ecd-performance-bottom div:last-child{ border-right:0; } .qnx-ecd-performance-bottom span{ display:block; margin-bottom:6px; color:#8cb5df; font-size:7px; letter-spacing:1px; } .qnx-ecd-performance-bottom strong{ color:#b7e51c; font-size:10px; } /* SYSTEM */ .qnx-ecd-system{ padding:105px 7%; background:#fff; } .qnx-ecd-system-board{ max-width:1180px; margin:auto; display:grid; grid-template-columns:1.2fr .8fr; min-height:390px; border:1px solid #dce6f2; box-shadow:0 20px 55px rgba(17,55,110,.07); } .qnx-ecd-system-main{ position:relative; overflow:hidden; padding:55px; background:linear-gradient(135deg,#0758d8,#087ee7 60%,#08a8cf); } .qnx-ecd-system-main:after{ content:""; position:absolute; width:420px; height:420px; right:-190px; bottom:-240px; border:70px solid rgba(255,255,255,.08); transform:rotate(25deg); } .qnx-ecd-system-main > span{ color:#b7e51c; font-size:9px; font-weight:800; letter-spacing:2px; } .qnx-ecd-system-main h3{ position:relative; z-index:2; max-width:470px; margin:18px 0 12px; color:#fff; font-size:42px; line-height:1.05; letter-spacing:-1.5px; } .qnx-ecd-system-main p{ position:relative; z-index:2; max-width:500px; margin:0; color:rgba(255,255,255,.82); font-size:14px; line-height:1.75; } .qnx-ecd-system-status{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:9px; margin-top:35px; } .qnx-ecd-system-status span{ display:flex; align-items:center; gap:7px; padding:9px 11px; color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); font-size:8px; font-weight:800; letter-spacing:1px; } .qnx-ecd-system-status i{ width:5px; height:5px; border-radius:50%; background:#b7e51c; } .qnx-ecd-system-side{ padding:24px; background:#f7faff; } .qnx-ecd-system-side div{ display:flex; flex-direction:column; justify-content:center; min-height:84px; padding:15px 18px; border-bottom:1px solid #dfe8f3; } .qnx-ecd-system-side div:last-child{ border-bottom:0; } .qnx-ecd-system-side strong{ color:#0758d8; font-size:10px; letter-spacing:1.5px; } .qnx-ecd-system-side span{ margin-top:5px; color:#5d6b84; font-size:11px; } /* GROWTH */ .qnx-ecd-growth{ padding:100px 7%; background:#f4f8ff; } .qnx-ecd-growth-inner{ max-width:1250px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:85px; align-items:center; } .qnx-ecd-growth-copy h2{ margin:18px 0; color:#0d1730; font-size:clamp(36px,4vw,55px); line-height:1.06; letter-spacing:-2px; } .qnx-ecd-growth-copy p{ max-width:570px; color:#5d6b84; font-size:15px; line-height:1.8; } .qnx-ecd-growth-map{ border-top:1px solid #cfdceb; } .qnx-ecd-growth-row{ display:grid; grid-template-columns:85px 28px 1fr; gap:15px; align-items:center; min-height:78px; border-bottom:1px solid #cfdceb; } .qnx-ecd-growth-row span{ color:#0758d8; font-size:9px; font-weight:800; letter-spacing:1.5px; } .qnx-ecd-growth-row i{ width:9px; height:9px; border:2px solid #0758d8; background:#fff; } .qnx-ecd-growth-row b{ color:#0d1730; font-size:13px; } /* FINAL */ .qnx-ecd-final{ position:relative; overflow:hidden; min-height:430px; display:flex; align-items:center; justify-content:center; padding:75px 7%; background:linear-gradient(125deg,#062d7a 0%,#0758d8 48%,#087ee7 76%,#08a8cf 100%); } .qnx-ecd-final-grid{ position:absolute; inset:0; opacity:.18; background-image: linear-gradient(rgba(255,255,255,.3) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.3) 1px,transparent 1px); background-size:55px 55px; } .qnx-ecd-final-content{ position:relative; z-index:2; max-width:850px; text-align:center; } .qnx-ecd-final .qnx-ecd-kicker{ color:#b7e51c; } .qnx-ecd-final .qnx-ecd-kicker:before{ background:#b7e51c; } .qnx-ecd-final h2{ margin:18px 0 15px; color:#fff; font-size:clamp(38px,5vw,63px); line-height:1.03; letter-spacing:-2.5px; } .qnx-ecd-final p{ max-width:650px; margin:0 auto; color:rgba(255,255,255,.82); font-size:15px; line-height:1.8; } .qnx-ecd-final-btn{ display:inline-flex; align-items:center; gap:18px; margin-top:30px; padding:15px 18px 15px 22px; color:#0d1730; background:#fff; text-decoration:none; font-size:11px; font-weight:800; letter-spacing:.4px; transition:.3s ease; } .qnx-ecd-final-btn b{ display:flex; align-items:center; justify-content:center; width:31px; height:31px; background:#b7e51c; color:#062d7a; font-size:16px; } .qnx-ecd-final-btn:hover{ transform:translateY(-4px); box-shadow:0 18px 35px rgba(6,45,122,.25); } /* RESPONSIVE */ @media(max-width:1100px){ .qnx-ecd-intro{ grid-template-columns:1fr; gap:45px; } .qnx-ecd-store-scene{ max-width:700px; width:100%; margin:auto; } .qnx-ecd-journey-board{ grid-template-columns:1fr 1fr; } .qnx-ecd-journey-line{ display:none; } .qnx-ecd-commerce-wrap, .qnx-ecd-growth-inner{ grid-template-columns:1fr; gap:55px; } .qnx-ecd-system-board{ grid-template-columns:1fr; } } @media(max-width:700px){ .qnx-ecd-intro, .qnx-ecd-journey, .qnx-ecd-commerce, .qnx-ecd-system, .qnx-ecd-growth{ padding:70px 20px; } .qnx-ecd-intro{ min-height:auto; } .qnx-ecd-intro-copy h2{ font-size:42px; letter-spacing:-2px; } .qnx-ecd-store-content{ grid-template-columns:1fr; } .qnx-ecd-product-image{ min-height:180px; } .qnx-ecd-floating-cart{ right:0; bottom:8px; } .qnx-ecd-journey-board{ grid-template-columns:1fr; } .qnx-ecd-journey-card{ min-height:330px; } .qnx-ecd-commerce-points{ grid-template-columns:1fr; } .qnx-ecd-performance-main{ grid-template-columns:1fr; } .qnx-ecd-health{ padding:0 0 20px; border-right:0; border-bottom:1px solid rgba(255,255,255,.1); } .qnx-ecd-bars > div{ grid-template-columns:90px 1fr 22px; } .qnx-ecd-performance-bottom{ grid-template-columns:1fr; } .qnx-ecd-performance-bottom div{ border-right:0; border-bottom:1px solid rgba(255,255,255,.1); } .qnx-ecd-performance-bottom div:last-child{ border-bottom:0; } .qnx-ecd-system-main{ padding:38px 28px; } .qnx-ecd-system-main h3{ font-size:34px; } .qnx-ecd-system-side{ padding:12px; } .qnx-ecd-growth-row{ grid-template-columns:70px 20px 1fr; gap:10px; } .qnx-ecd-final{ min-height:400px; padding:65px 20px; } .qnx-ecd-final h2{ font-size:40px; letter-spacing:-2px; } } /* ========================================================= QNIX DIGITAL — SHOPIFY DEVELOPMENT ========================================================= */ .qnx-shp-reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease,transform .8s ease; } .qnx-shp-reveal.qnx-shp-visible{ opacity:1; transform:translateY(0); } .qnx-shp-kicker{ display:inline-flex; align-items:center; gap:10px; color:#0758d8; font-size:10px; font-weight:800; letter-spacing:2.3px; } .qnx-shp-kicker:before{ content:""; width:23px; height:2px; background:linear-gradient(90deg,#0758d8,#16b98a); } /* OPENING */ .qnx-shp-opening{ position:relative; overflow:hidden; display:grid; grid-template-columns:.82fr 1.18fr; gap:70px; align-items:center; min-height:680px; padding:85px 7%; background:#f4f8ff; } .qnx-shp-opening-grid{ position:absolute; inset:0; opacity:.32; background-image: linear-gradient(rgba(7,88,216,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.055) 1px,transparent 1px); background-size:48px 48px; } .qnx-shp-opening-copy{ position:relative; z-index:2; } .qnx-shp-opening-copy h2{ max-width:610px; margin:20px 0 22px; color:#0d1730; font-size:clamp(43px,5vw,72px); line-height:1.02; letter-spacing:-3px; } .qnx-shp-opening-copy p{ max-width:570px; color:#5d6b84; font-size:16px; line-height:1.8; } .qnx-shp-tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; } .qnx-shp-tags span{ padding:10px 14px; background:#fff; border:1px solid #dce7f3; color:#0d1730; font-size:10px; font-weight:700; } /* CREATIVE WORKSPACE */ .qnx-shp-workspace{ position:relative; z-index:2; min-height:500px; display:flex; align-items:center; justify-content:center; } .qnx-shp-browser{ position:relative; z-index:2; width:min(660px,100%); overflow:hidden; background:#fff; border:1px solid #d5e1ef; box-shadow:0 30px 70px rgba(7,88,216,.17); } .qnx-shp-browser-bar{ display:flex; align-items:center; height:45px; padding:0 16px; background:#062d7a; } .qnx-shp-dots{ display:flex; gap:5px; } .qnx-shp-dots i{ width:6px; height:6px; border-radius:50%; background:#fff; opacity:.65; } .qnx-shp-browser-bar > span{ margin-left:22px; color:#a9c6e8; font-size:9px; } .qnx-shp-browser-bar b{ margin-left:auto; color:#b7e51c; font-size:8px; letter-spacing:1.5px; } .qnx-shp-store{ padding:25px; } .qnx-shp-store-head{ display:flex; align-items:center; gap:30px; padding-bottom:18px; border-bottom:1px solid #e3eaf4; } .qnx-shp-store-head strong{ color:#0d1730; font-size:13px; letter-spacing:1px; } .qnx-shp-store-head nav{ display:flex; gap:18px; margin:auto; } .qnx-shp-store-head nav span{ color:#5d6b84; font-size:9px; } .qnx-shp-store-tools{ display:flex; gap:8px; } .qnx-shp-store-tools i{ width:20px; height:20px; border:1px solid #dbe5f0; } .qnx-shp-store-hero{ display:grid; grid-template-columns:1fr .9fr; gap:20px; margin-top:22px; min-height:245px; } .qnx-shp-store-hero > div:first-child{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; } .qnx-shp-store-hero small{ color:#0758d8; font-size:8px; font-weight:800; letter-spacing:1.7px; } .qnx-shp-store-hero h3{ max-width:280px; margin:12px 0 18px; color:#0d1730; font-size:32px; line-height:1.05; letter-spacing:-1.2px; } .qnx-shp-store-hero button{ border:0; padding:11px 14px; background:#0758d8; color:#fff; font-size:8px; font-weight:800; letter-spacing:1px; } .qnx-shp-product-art{ position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:18px; background:linear-gradient(135deg,#0758d8,#08a8cf 58%,#16b98a); } .qnx-shp-product-art:before, .qnx-shp-product-art:after{ content:""; position:absolute; border:1px solid rgba(255,255,255,.25); transform:rotate(18deg); } .qnx-shp-product-art:before{ width:170px; height:230px; right:30px; top:-40px; } .qnx-shp-product-art:after{ width:110px; height:160px; left:30px; bottom:-50px; } .qnx-shp-product-art span{ position:relative; z-index:2; color:#fff; font-size:9px; line-height:1.6; font-weight:800; letter-spacing:1.5px; } .qnx-shp-products{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:15px; } .qnx-shp-products > div{ display:grid; grid-template-columns:42px 1fr; column-gap:9px; align-items:center; padding:8px; border:1px solid #e2eaf3; } .qnx-shp-products > div span{ grid-row:span 2; width:42px; height:42px; background:#eaf2fc; } .qnx-shp-products b{ color:#0d1730; font-size:8px; } .qnx-shp-products small{ color:#0758d8; font-size:8px; } .qnx-shp-admin-panel{ position:absolute; z-index:4; right:-12px; bottom:28px; width:230px; background:#fff; border:1px solid #dce6f2; box-shadow:0 22px 50px rgba(7,88,216,.18); } .qnx-shp-admin-top{ display:flex; justify-content:space-between; padding:13px 15px; background:#0d1730; } .qnx-shp-admin-top span{ color:#fff; font-size:7px; letter-spacing:1.5px; font-weight:800; } .qnx-shp-admin-top i{ width:6px; height:6px; border-radius:50%; background:#79c91c; } .qnx-shp-admin-body{ display:flex; } .qnx-shp-admin-nav{ width:62px; padding:12px 7px; background:#f1f6fc; } .qnx-shp-admin-nav span, .qnx-shp-admin-nav b{ display:block; padding:7px 5px; color:#5d6b84; font-size:6px; } .qnx-shp-admin-nav b{ color:#0758d8; background:#fff; } .qnx-shp-admin-content{ flex:1; padding:13px; } .qnx-shp-admin-stat{ padding:9px 0; border-bottom:1px solid #e3eaf4; } .qnx-shp-admin-stat:last-child{ border-bottom:0; } .qnx-shp-admin-stat small{ display:block; color:#5d6b84; font-size:6px; letter-spacing:1px; } .qnx-shp-admin-stat strong{ display:block; margin:3px 0; color:#0d1730; font-size:15px; } .qnx-shp-admin-stat span{ color:#16b98a; font-size:6px; font-weight:800; } /* FOUNDATION */ .qnx-shp-theme{ padding:105px 7%; background:#fff; } .qnx-shp-section-heading{ max-width:760px; margin:0 auto 55px; text-align:center; } .qnx-shp-section-heading h2{ margin:18px 0 14px; color:#0d1730; font-size:clamp(36px,4.3vw,57px); line-height:1.05; letter-spacing:-2px; } .qnx-shp-section-heading p{ max-width:610px; margin:auto; color:#5d6b84; font-size:15px; line-height:1.8; } .qnx-shp-layer-stack{ max-width:1160px; margin:auto; } .qnx-shp-layer{ position:relative; display:grid; grid-template-columns:70px 1fr 220px; gap:30px; align-items:center; min-height:175px; padding:25px 30px; border:1px solid #dce6f2; margin-bottom:12px; overflow:hidden; transition:.35s ease; } .qnx-shp-layer:hover{ transform:translateX(8px); box-shadow:0 18px 40px rgba(7,88,216,.09); } .qnx-shp-layer-number{ color:#c6d7ea; font-size:14px; font-weight:800; } .qnx-shp-layer-content span{ color:#0758d8; font-size:9px; font-weight:800; letter-spacing:1.8px; } .qnx-shp-layer-content h3{ margin:9px 0 8px; color:#0d1730; font-size:23px; } .qnx-shp-layer-content p{ max-width:600px; margin:0; color:#5d6b84; font-size:12px; line-height:1.7; } .qnx-shp-layer-visual{ height:100px; display:flex; align-items:center; justify-content:center; gap:7px; } .qnx-shp-layer-visual div{ display:block; width:32px; background:#dceafa; } .qnx-shp-layer-theme .qnx-shp-layer-visual div:nth-child(1){ height:48px; } .qnx-shp-layer-theme .qnx-shp-layer-visual div:nth-child(2){ height:78px; background:#0758d8; } .qnx-shp-layer-theme .qnx-shp-layer-visual div:nth-child(3){ height:60px; background:#08a8cf; } .qnx-shp-layer-products .qnx-shp-layer-visual div{ height:38px; background:#e4edf8; } .qnx-shp-layer-products .qnx-shp-layer-visual div:nth-child(2){ background:#087ee7; } .qnx-shp-layer-products .qnx-shp-layer-visual div:nth-child(3){ height:58px; background:#16b98a; } .qnx-shp-layer-products .qnx-shp-layer-visual div:nth-child(4){ height:48px; background:#79c91c; } .qnx-shp-layer-checkout .qnx-shp-layer-visual div{ height:60px; border:1px solid #cbdcf0; background:#fff; } .qnx-shp-layer-checkout .qnx-shp-layer-visual div:nth-child(2){ height:80px; border-color:#0758d8; } .qnx-shp-layer-checkout .qnx-shp-layer-visual div:nth-child(3){ height:45px; background:#08a8cf; border:0; } .qnx-shp-layer-operations .qnx-shp-layer-visual div{ height:12px; width:85px; background:#dce7f4; } .qnx-shp-layer-operations .qnx-shp-layer-visual div:nth-child(2){ width:125px; background:#0758d8; } .qnx-shp-layer-operations .qnx-shp-layer-visual div:nth-child(3){ width:105px; background:#79c91c; } /* CUSTOM */ .qnx-shp-custom{ padding:110px 7%; background:#f4f8ff; } .qnx-shp-custom-inner{ max-width:1250px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; } .qnx-shp-editor{ overflow:hidden; background:#0d1730; border:1px solid #18345f; box-shadow:0 28px 60px rgba(6,45,122,.17); } .qnx-shp-editor-top{ display:flex; gap:0; border-bottom:1px solid rgba(255,255,255,.08); } .qnx-shp-editor-top span{ padding:13px 15px; color:#9cb7d8; border-right:1px solid rgba(255,255,255,.08); font-size:7px; } .qnx-shp-editor-top span:first-child{ color:#fff; background:#062d7a; } .qnx-shp-editor-body{ padding:22px 20px; } .qnx-shp-line{ display:grid; grid-template-columns:28px 65px 75px 1fr; gap:8px; padding:5px 0; color:#d5e5f7; font-family:monospace; font-size:9px; } .qnx-shp-line b{ color:#506b8e; font-weight:400; } .qnx-shp-line span{ color:#08a8cf; } .qnx-shp-line em{ color:#79c91c; font-style:normal; } .qnx-shp-line strong{ color:#b7e51c; font-weight:400; } .qnx-shp-editor-status{ display:flex; flex-wrap:wrap; gap:8px; padding:13px 20px; border-top:1px solid rgba(255,255,255,.08); } .qnx-shp-editor-status span{ color:#9cb7d8; font-size:7px; } .qnx-shp-editor-status span:first-child{ color:#b7e51c; } .qnx-shp-editor-status i{ display:inline-block; width:5px; height:5px; margin-right:4px; border-radius:50%; background:#79c91c; } .qnx-shp-custom-copy h2{ max-width:600px; margin:18px 0; color:#0d1730; font-size:clamp(38px,4.2vw,57px); line-height:1.05; letter-spacing:-2px; } .qnx-shp-custom-copy > p{ max-width:560px; color:#5d6b84; font-size:15px; line-height:1.8; } .qnx-shp-custom-list{ margin-top:30px; } .qnx-shp-custom-list div{ padding:15px 0; border-bottom:1px solid #d8e3ef; } .qnx-shp-custom-list strong{ display:block; color:#0d1730; font-size:12px; } .qnx-shp-custom-list span{ display:block; margin-top:4px; color:#5d6b84; font-size:11px; } /* ECOSYSTEM */ .qnx-shp-apps{ padding:105px 7%; background:#fff; } .qnx-shp-apps-head{ max-width:800px; margin:0 auto 60px; text-align:center; } .qnx-shp-apps-head h2{ margin:18px 0 0; color:#0d1730; font-size:clamp(36px,4vw,55px); line-height:1.05; letter-spacing:-2px; } .qnx-shp-ecosystem{ position:relative; max-width:920px; height:510px; margin:auto; } .qnx-shp-eco-main{ position:absolute; left:50%; top:50%; z-index:3; width:245px; height:155px; padding:28px; transform:translate(-50%,-50%); background:#0758d8; box-shadow:0 22px 50px rgba(7,88,216,.2); } .qnx-shp-eco-main span{ display:block; color:#b7e51c; font-size:8px; font-weight:800; letter-spacing:2px; } .qnx-shp-eco-main strong{ display:block; margin:11px 0 8px; color:#fff; font-size:25px; line-height:1; } .qnx-shp-eco-main small{ color:rgba(255,255,255,.75); font-size:8px; line-height:1.5; } .qnx-shp-eco-item{ position:absolute; z-index:4; width:185px; min-height:92px; padding:18px; background:#fff; border:1px solid #dce6f2; box-shadow:0 15px 35px rgba(17,55,110,.08); } .qnx-shp-eco-item b{ display:block; color:#0758d8; font-size:9px; letter-spacing:1.5px; } .qnx-shp-eco-item span{ display:block; margin-top:7px; color:#5d6b84; font-size:10px; line-height:1.5; } .qnx-shp-eco-top{ left:50%; top:15px; transform:translateX(-50%); } .qnx-shp-eco-right{ right:20px; top:50%; transform:translateY(-50%); } .qnx-shp-eco-bottom{ left:50%; bottom:15px; transform:translateX(-50%); } .qnx-shp-eco-left{ left:20px; top:50%; transform:translateY(-50%); } .qnx-shp-eco-line{ position:absolute; z-index:1; background:#b8cde5; } .qnx-shp-line-top{ left:50%; top:105px; width:1px; height:105px; } .qnx-shp-line-right{ right:205px; top:50%; width:210px; height:1px; } .qnx-shp-line-bottom{ left:50%; bottom:105px; width:1px; height:105px; } .qnx-shp-line-left{ left:205px; top:50%; width:210px; height:1px; } /* BUILD */ .qnx-shp-build{ padding:105px 7%; background:#f4f8ff; } .qnx-shp-build-wrap{ max-width:1250px; margin:auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:85px; align-items:center; } .qnx-shp-build-copy h2{ max-width:590px; margin:18px 0; color:#0d1730; font-size:clamp(38px,4.2vw,57px); line-height:1.05; letter-spacing:-2px; } .qnx-shp-build-copy p{ max-width:560px; color:#5d6b84; font-size:15px; line-height:1.8; } .qnx-shp-build-track{ border-top:1px solid #cfdceb; } .qnx-shp-build-item{ display:grid; grid-template-columns:75px 1fr; gap:15px; padding:20px 0; border-bottom:1px solid #cfdceb; } .qnx-shp-build-item span{ color:#0758d8; font-size:8px; font-weight:800; letter-spacing:1.6px; } .qnx-shp-build-item strong{ color:#0d1730; font-size:14px; } .qnx-shp-build-item p{ grid-column:2; margin:-8px 0 0; color:#5d6b84; font-size:11px; line-height:1.6; } /* FINAL */ .qnx-shp-final{ position:relative; overflow:hidden; min-height:450px; display:flex; align-items:center; justify-content:center; padding:75px 7%; background:linear-gradient(125deg,#062d7a,#0758d8 48%,#087ee7 75%,#08a8cf); } .qnx-shp-final-pattern{ position:absolute; inset:0; opacity:.17; background-image: linear-gradient(45deg,rgba(255,255,255,.25) 1px,transparent 1px), linear-gradient(-45deg,rgba(255,255,255,.2) 1px,transparent 1px); background-size:42px 42px; } .qnx-shp-final-content{ position:relative; z-index:2; max-width:820px; text-align:center; } .qnx-shp-final .qnx-shp-kicker{ color:#b7e51c; } .qnx-shp-final .qnx-shp-kicker:before{ background:#b7e51c; } .qnx-shp-final h2{ margin:18px 0 16px; color:#fff; font-size:clamp(40px,5vw,64px); line-height:1.02; letter-spacing:-2.5px; } .qnx-shp-final p{ max-width:650px; margin:auto; color:rgba(255,255,255,.82); font-size:15px; line-height:1.8; } .qnx-shp-final-btn{ display:inline-flex; align-items:center; gap:17px; margin-top:30px; padding:14px 17px 14px 21px; color:#0d1730; background:#fff; text-decoration:none; font-size:10px; font-weight:800; letter-spacing:.5px; transition:.3s ease; } .qnx-shp-final-btn b{ display:flex; align-items:center; justify-content:center; width:31px; height:31px; background:#b7e51c; color:#062d7a; font-size:16px; } .qnx-shp-final-btn:hover{ transform:translateY(-4px); box-shadow:0 18px 35px rgba(6,45,122,.25); } /* RESPONSIVE */ @media(max-width:1100px){ .qnx-shp-opening{ grid-template-columns:1fr; gap:55px; } .qnx-shp-workspace{ max-width:720px; width:100%; margin:auto; } .qnx-shp-custom-inner, .qnx-shp-build-wrap{ grid-template-columns:1fr; gap:55px; } .qnx-shp-ecosystem{ max-width:760px; } } @media(max-width:700px){ .qnx-shp-opening, .qnx-shp-theme, .qnx-shp-custom, .qnx-shp-apps, .qnx-shp-build{ padding:70px 20px; } .qnx-shp-opening{ min-height:auto; } .qnx-shp-opening-copy h2{ font-size:42px; letter-spacing:-2px; } .qnx-shp-store-head nav{ display:none; } .qnx-shp-store-hero{ grid-template-columns:1fr; } .qnx-shp-product-art{ min-height:180px; } .qnx-shp-admin-panel{ position:relative; right:auto; bottom:auto; width:80%; margin:-35px 0 0 auto; } .qnx-shp-layer{ grid-template-columns:42px 1fr; gap:15px; } .qnx-shp-layer-visual{ display:none; } .qnx-shp-layer-content h3{ font-size:20px; } .qnx-shp-editor-top{ overflow:hidden; } .qnx-shp-editor-top span{ white-space:nowrap; padding:12px 9px; font-size:6px; } .qnx-shp-line{ grid-template-columns:20px 48px 58px 1fr; gap:5px; font-size:7px; } .qnx-shp-custom-copy h2, .qnx-shp-build-copy h2{ font-size:39px; } .qnx-shp-ecosystem{ height:620px; } .qnx-shp-eco-main{ top:50%; width:215px; } .qnx-shp-eco-item{ width:145px; } .qnx-shp-eco-top{ top:20px; } .qnx-shp-eco-bottom{ bottom:20px; } .qnx-shp-eco-left{ left:0; } .qnx-shp-eco-right{ right:0; } .qnx-shp-line-top, .qnx-shp-line-bottom{ height:95px; } .qnx-shp-line-left{ left:145px; width:75px; } .qnx-shp-line-right{ right:145px; width:75px; } .qnx-shp-build-item{ grid-template-columns:65px 1fr; } .qnx-shp-build-item p{ grid-column:2; } .qnx-shp-final{ min-height:420px; padding:65px 20px; } .qnx-shp-final h2{ font-size:40px; letter-spacing:-2px; } } /* ========================================================= QNIX DIGITAL — WOOCOMMERCE DEVELOPMENT ========================================================= */ .qnx-wc-reveal{ opacity:0; transform:translateY(30px); transition:opacity .8s ease,transform .8s ease; } .qnx-wc-reveal.qnx-wc-visible{ opacity:1; transform:translateY(0); } .qnx-wc-kicker{ display:inline-flex; align-items:center; gap:10px; color:#0758d8; font-size:10px; font-weight:800; letter-spacing:2.2px; } .qnx-wc-kicker:before{ content:""; width:23px; height:2px; background:linear-gradient(90deg,#0758d8,#16b98a); } /* OPENING */ .qnx-wc-opening{ position:relative; overflow:hidden; display:grid; grid-template-columns:.88fr 1.12fr; gap:75px; align-items:center; min-height:670px; padding:85px 7%; background:#fff; } .qnx-wc-opening:after{ content:""; position:absolute; width:520px; height:520px; right:-230px; top:-230px; border:95px solid #f1f6fc; transform:rotate(25deg); } .qnx-wc-opening-noise{ position:absolute; inset:0; opacity:.32; background-image: linear-gradient(rgba(7,88,216,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.045) 1px,transparent 1px); background-size:50px 50px; } .qnx-wc-opening-copy{ position:relative; z-index:3; } .qnx-wc-opening-copy h2{ max-width:650px; margin:20px 0 22px; color:#0d1730; font-size:clamp(42px,5vw,70px); line-height:1.02; letter-spacing:-3px; } .qnx-wc-opening-copy p{ max-width:570px; color:#5d6b84; font-size:16px; line-height:1.8; } .qnx-wc-opening-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; } .qnx-wc-opening-meta span{ padding:10px 14px; background:#f4f8ff; border:1px solid #dce6f2; color:#0d1730; font-size:9px; font-weight:800; } /* ORDER WORKSPACE */ .qnx-wc-order-workspace{ position:relative; z-index:3; overflow:hidden; background:#fff; border:1px solid #d5e1ef; box-shadow:0 28px 75px rgba(7,88,216,.15); } .qnx-wc-workspace-top{ display:flex; align-items:center; justify-content:space-between; height:48px; padding:0 20px; background:#062d7a; } .qnx-wc-workspace-top span{ color:#b9d1eb; font-size:8px; letter-spacing:1.7px; font-weight:800; } .qnx-wc-workspace-top b{ color:#b7e51c; font-size:8px; letter-spacing:1px; } .qnx-wc-workspace-body{ display:flex; min-height:430px; } .qnx-wc-side-nav{ width:110px; padding:20px 12px; background:#f3f7fc; border-right:1px solid #dce6f2; } .qnx-wc-side-nav strong{ display:block; width:35px; height:35px; margin:0 auto 28px; padding-top:9px; background:#0758d8; color:#fff; text-align:center; font-size:11px; } .qnx-wc-side-nav span{ display:block; margin-bottom:7px; padding:9px 7px; color:#5d6b84; font-size:8px; } .qnx-wc-side-nav span.active{ background:#fff; color:#0758d8; box-shadow:0 4px 15px rgba(7,88,216,.07); font-weight:800; } .qnx-wc-order-area{ flex:1; min-width:0; padding:28px; } .qnx-wc-order-head{ display:flex; justify-content:space-between; align-items:flex-start; } .qnx-wc-order-head small{ color:#0758d8; font-size:8px; letter-spacing:1.6px; font-weight:800; } .qnx-wc-order-head h3{ margin:7px 0 0; color:#0d1730; font-size:22px; } .qnx-wc-order-live{ display:flex; align-items:center; gap:6px; color:#16b98a; font-size:8px; font-weight:800; } .qnx-wc-order-live i{ width:6px; height:6px; border-radius:50%; background:#79c91c; } .qnx-wc-order-summary{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:25px 0; } .qnx-wc-order-summary div{ padding:14px; background:#f4f8ff; border:1px solid #e0e9f3; } .qnx-wc-order-summary small{ display:block; color:#5d6b84; font-size:7px; letter-spacing:1.2px; } .qnx-wc-order-summary strong{ display:block; margin:7px 0 3px; color:#0d1730; font-size:22px; } .qnx-wc-order-summary span{ color:#16b98a; font-size:7px; font-weight:800; } .qnx-wc-order-table{ border:1px solid #e0e8f2; } .qnx-wc-table-head, .qnx-wc-table-row{ display:grid; grid-template-columns:1.1fr 1.2fr .7fr .8fr; gap:10px; align-items:center; padding:12px 14px; } .qnx-wc-table-head{ background:#f4f8ff; color:#5d6b84; font-size:7px; font-weight:800; letter-spacing:1px; } .qnx-wc-table-row{ border-top:1px solid #e7edf5; color:#0d1730; font-size:8px; } .qnx-wc-table-row b{ font-size:9px; } .qnx-wc-table-row em{ color:#16b98a; font-style:normal; font-size:7px; font-weight:800; } /* ARCHITECTURE */ .qnx-wc-architecture{ padding:105px 7%; background:#f4f8ff; } .qnx-wc-section-heading{ max-width:760px; margin:0 auto 55px; text-align:center; } .qnx-wc-section-heading h2{ margin:18px 0 14px; color:#0d1730; font-size:clamp(36px,4.3vw,57px); line-height:1.05; letter-spacing:-2px; } .qnx-wc-section-heading p{ max-width:620px; margin:auto; color:#5d6b84; font-size:15px; line-height:1.8; } .qnx-wc-architecture-board{ max-width:1250px; margin:auto; display:grid; grid-template-columns:1fr 80px 1fr 80px 1fr; align-items:stretch; } .qnx-wc-architecture-column{ position:relative; overflow:hidden; min-height:350px; padding:35px 30px; background:#fff; border:1px solid #dce6f2; } .qnx-wc-architecture-column > span{ display:block; color:#c6d7e9; font-size:12px; font-weight:800; } .qnx-wc-architecture-column > small{ display:block; margin-top:30px; color:#0758d8; font-size:8px; font-weight:800; letter-spacing:1.6px; } .qnx-wc-architecture-column h3{ margin:10px 0 12px; color:#0d1730; font-size:28px; } .qnx-wc-architecture-column p{ color:#5d6b84; font-size:12px; line-height:1.75; } .qnx-wc-wordpress{ border-top:4px solid #087ee7; } .qnx-wc-woocommerce{ background:#062d7a; border-color:#062d7a; border-top:4px solid #79c91c; } .qnx-wc-woocommerce > span{ color:#5577a3; } .qnx-wc-woocommerce > small{ color:#b7e51c; } .qnx-wc-woocommerce h3{ color:#fff; } .qnx-wc-woocommerce p{ color:#a9bfdc; } .qnx-wc-business{ border-top:4px solid #16b98a; } .qnx-wc-column-lines{ position:absolute; right:25px; bottom:25px; display:flex; align-items:flex-end; gap:6px; height:75px; } .qnx-wc-column-lines i{ display:block; width:9px; height:30px; background:#dce9f7; } .qnx-wc-column-lines i:nth-child(2){ height:55px; background:#087ee7; } .qnx-wc-column-lines i:nth-child(3){ height:42px; background:#16b98a; } .qnx-wc-woocommerce .qnx-wc-column-lines i{ background:#23477b; } .qnx-wc-woocommerce .qnx-wc-column-lines i:nth-child(2){ background:#087ee7; } .qnx-wc-woocommerce .qnx-wc-column-lines i:nth-child(3){ background:#b7e51c; } .qnx-wc-connector{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; } .qnx-wc-connector span{ width:100%; height:1px; background:#b9cce2; } .qnx-wc-connector b{ color:#7890ac; font-size:6px; letter-spacing:1px; white-space:nowrap; } /* PRODUCTS */ .qnx-wc-products{ padding:110px 7%; background:#fff; } .qnx-wc-products-wrap{ max-width:1250px; margin:auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:85px; align-items:center; } .qnx-wc-products-copy h2{ max-width:600px; margin:18px 0; color:#0d1730; font-size:clamp(38px,4.2vw,57px); line-height:1.05; letter-spacing:-2px; } .qnx-wc-products-copy > p{ max-width:560px; color:#5d6b84; font-size:15px; line-height:1.8; } .qnx-wc-product-points{ margin-top:30px; } .qnx-wc-product-points div{ padding:14px 0; border-bottom:1px solid #dce6f2; } .qnx-wc-product-points strong{ display:block; color:#0d1730; font-size:12px; } .qnx-wc-product-points span{ display:block; margin-top:4px; color:#5d6b84; font-size:10px; line-height:1.5; } .qnx-wc-product-screen{ overflow:hidden; background:#fff; border:1px solid #d8e3ef; box-shadow:0 24px 60px rgba(17,55,110,.1); } .qnx-wc-product-screen-top{ display:flex; justify-content:space-between; padding:15px 18px; background:#0d1730; } .qnx-wc-product-screen-top span{ color:#9cb8d8; font-size:7px; letter-spacing:1.3px; } .qnx-wc-product-screen-top b{ color:#b7e51c; font-size:7px; } .qnx-wc-product-screen-main{ display:grid; grid-template-columns:1fr 1fr; gap:30px; padding:28px; } .qnx-wc-product-photo{ min-height:350px; display:flex; align-items:flex-end; padding:20px; background:linear-gradient(145deg,#0758d8,#087ee7 55%,#16b98a); } .qnx-wc-product-photo span{ color:#fff; font-size:9px; line-height:1.6; font-weight:800; letter-spacing:1.6px; } .qnx-wc-product-info{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; } .qnx-wc-product-info > small{ color:#0758d8; font-size:8px; font-weight:800; letter-spacing:1.5px; } .qnx-wc-product-info h3{ margin:12px 0; color:#0d1730; font-size:30px; line-height:1.05; } .qnx-wc-rating{ display:flex; gap:8px; align-items:center; margin-bottom:18px; } .qnx-wc-rating span{ color:#79c91c; font-size:10px; letter-spacing:2px; } .qnx-wc-rating small{ color:#5d6b84; font-size:8px; } .qnx-wc-product-price{ color:#0d1730; font-size:23px; } .qnx-wc-option{ width:100%; margin:20px 0; padding:12px; border:1px solid #dce6f2; } .qnx-wc-option span{ display:block; color:#5d6b84; font-size:7px; letter-spacing:1px; } .qnx-wc-option b{ display:block; margin-top:6px; color:#0d1730; font-size:10px; } .qnx-wc-demo-cart{ width:100%; border:0; padding:14px; background:#0758d8; color:#fff; font-size:9px; font-weight:800; letter-spacing:1px; cursor:pointer; transition:.3s ease; } .qnx-wc-demo-cart:hover{ background:#16b98a; } .qnx-wc-product-screen-bottom{ display:flex; gap:25px; padding:14px 20px; border-top:1px solid #e0e8f2; } .qnx-wc-product-screen-bottom span{ color:#5d6b84; font-size:7px; letter-spacing:1px; } /* CHECKOUT */ .qnx-wc-checkout{ padding:105px 7%; background:#f4f8ff; } .qnx-wc-checkout-top{ max-width:760px; margin:0 auto 60px; text-align:center; } .qnx-wc-checkout-top h2{ margin:18px 0 14px; color:#0d1730; font-size:clamp(36px,4.2vw,56px); line-height:1.05; letter-spacing:-2px; } .qnx-wc-checkout-top p{ color:#5d6b84; font-size:15px; line-height:1.8; } .qnx-wc-checkout-track{ max-width:1250px; margin:auto; display:grid; grid-template-columns:1fr 45px 1fr 45px 1fr 45px 1fr; align-items:center; } .qnx-wc-check-step{ min-height:225px; padding:25px; background:#fff; border:1px solid #dce6f2; transition:.35s ease; } .qnx-wc-check-step:hover{ transform:translateY(-7px); box-shadow:0 20px 45px rgba(7,88,216,.1); } .qnx-wc-check-icon{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; margin-bottom:25px; background:#0758d8; } .qnx-wc-check-icon span{ color:#b7e51c; font-size:9px; font-weight:800; } .qnx-wc-check-step small{ color:#0758d8; font-size:8px; letter-spacing:1.5px; font-weight:800; } .qnx-wc-check-step h3{ margin:8px 0; color:#0d1730; font-size:21px; } .qnx-wc-check-step p{ margin:0; color:#5d6b84; font-size:10px; line-height:1.7; } .qnx-wc-check-arrow{ color:#0758d8; text-align:center; font-size:24px; } /* BUSINESS */ .qnx-wc-business{ position:relative; overflow:hidden; padding:110px 7%; background:#062d7a; } .qnx-wc-business-grid{ position:absolute; inset:0; opacity:.12; background-image: linear-gradient(rgba(255,255,255,.4) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.4) 1px,transparent 1px); background-size:55px 55px; } .qnx-wc-business-inner{ position:relative; z-index:2; max-width:1250px; margin:auto; display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:center; } .qnx-wc-business-copy .qnx-wc-kicker{ color:#b7e51c; } .qnx-wc-business-copy .qnx-wc-kicker:before{ background:#b7e51c; } .qnx-wc-business-copy h2{ max-width:570px; margin:20px 0; color:#fff; font-size:clamp(38px,4.3vw,58px); line-height:1.04; letter-spacing:-2px; } .qnx-wc-business-copy p{ max-width:550px; color:#a9c0dc; font-size:15px; line-height:1.8; } .qnx-wc-business-console{ overflow:hidden; background:#fff; box-shadow:0 25px 65px rgba(0,0,0,.2); } .qnx-wc-console-head{ display:flex; justify-content:space-between; padding:16px 20px; background:#0d1730; } .qnx-wc-console-head span{ color:#fff; font-size:8px; letter-spacing:1.5px; font-weight:800; } .qnx-wc-console-head b{ color:#79c91c; font-size:7px; } .qnx-wc-console-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#dce6f2; } .qnx-wc-console-card{ padding:22px 15px; background:#fff; } .qnx-wc-console-card small{ display:block; color:#5d6b84; font-size:7px; letter-spacing:1px; } .qnx-wc-console-card strong{ display:block; margin:8px 0 4px; color:#0d1730; font-size:23px; } .qnx-wc-console-card span{ color:#16b98a; font-size:7px; font-weight:800; } .qnx-wc-console-feed{ padding:10px 20px 15px; } .qnx-wc-console-feed div{ display:grid; grid-template-columns:10px 1fr auto; gap:8px; align-items:center; padding:11px 0; border-bottom:1px solid #e4ebf3; } .qnx-wc-console-feed div:last-child{ border-bottom:0; } .qnx-wc-console-feed i{ width:5px; height:5px; border-radius:50%; background:#79c91c; } .qnx-wc-console-feed span{ color:#0d1730; font-size:8px; } .qnx-wc-console-feed b{ color:#0758d8; font-size:7px; } /* BUILD */ .qnx-wc-build{ padding:105px 7%; background:#fff; } .qnx-wc-build-list{ max-width:1050px; margin:auto; border-top:1px solid #d7e2ef; } .qnx-wc-build-list > div{ display:grid; grid-template-columns:120px 1fr; gap:25px; padding:24px 0; border-bottom:1px solid #d7e2ef; } .qnx-wc-build-list span{ color:#0758d8; font-size:8px; font-weight:800; letter-spacing:1.6px; } .qnx-wc-build-list strong{ color:#0d1730; font-size:15px; } .qnx-wc-build-list p{ grid-column:2; margin:-10px 0 0; color:#5d6b84; font-size:11px; line-height:1.6; } /* FINAL */ .qnx-wc-final{ position:relative; overflow:hidden; min-height:440px; display:flex; align-items:center; justify-content:center; padding:75px 7%; background:linear-gradient(120deg,#062d7a 0%,#0758d8 48%,#087ee7 78%,#08a8cf 100%); } .qnx-wc-final-lines{ position:absolute; inset:0; opacity:.15; background-image: linear-gradient(135deg,transparent 48%,rgba(255,255,255,.45) 49%,transparent 50%), linear-gradient(45deg,transparent 48%,rgba(255,255,255,.35) 49%,transparent 50%); background-size:75px 75px; } .qnx-wc-final-content{ position:relative; z-index:2; max-width:820px; text-align:center; } .qnx-wc-final .qnx-wc-kicker{ color:#b7e51c; } .qnx-wc-final .qnx-wc-kicker:before{ background:#b7e51c; } .qnx-wc-final h2{ margin:18px 0; color:#fff; font-size:clamp(40px,5vw,64px); line-height:1.02; letter-spacing:-2.5px; } .qnx-wc-final p{ max-width:650px; margin:auto; color:rgba(255,255,255,.82); font-size:15px; line-height:1.8; } .qnx-wc-final-btn{ display:inline-flex; align-items:center; gap:17px; margin-top:30px; padding:14px 17px 14px 21px; background:#fff; color:#0d1730; text-decoration:none; font-size:10px; font-weight:800; letter-spacing:.5px; transition:.3s ease; } .qnx-wc-final-btn b{ display:flex; align-items:center; justify-content:center; width:31px; height:31px; background:#b7e51c; color:#062d7a; font-size:16px; } .qnx-wc-final-btn:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(6,45,122,.25); } /* RESPONSIVE */ @media(max-width:1100px){ .qnx-wc-opening{ grid-template-columns:1fr; gap:55px; } .qnx-wc-order-workspace{ max-width:760px; width:100%; margin:auto; } .qnx-wc-architecture-board{ grid-template-columns:1fr; gap:15px; } .qnx-wc-connector{ flex-direction:row; height:35px; } .qnx-wc-products-wrap, .qnx-wc-business-inner{ grid-template-columns:1fr; gap:55px; } .qnx-wc-checkout-track{ grid-template-columns:1fr 35px 1fr; gap:10px; } .qnx-wc-check-arrow:nth-of-type(2){ display:none; } .qnx-wc-check-arrow:nth-of-type(4){ display:none; } } @media(max-width:700px){ .qnx-wc-opening, .qnx-wc-architecture, .qnx-wc-products, .qnx-wc-checkout, .qnx-wc-business, .qnx-wc-build{ padding:70px 20px; } .qnx-wc-opening{ min-height:auto; } .qnx-wc-opening-copy h2{ font-size:42px; letter-spacing:-2px; } .qnx-wc-workspace-body{ min-height:auto; } .qnx-wc-side-nav{ width:70px; } .qnx-wc-side-nav span{ font-size:6px; } .qnx-wc-order-area{ padding:18px; } .qnx-wc-order-summary{ grid-template-columns:1fr; } .qnx-wc-table-head, .qnx-wc-table-row{ grid-template-columns:1fr 1fr; row-gap:8px; } .qnx-wc-table-head span:nth-child(3), .qnx-wc-table-head span:nth-child(4){ display:none; } .qnx-wc-architecture-column{ min-height:290px; } .qnx-wc-products-copy h2, .qnx-wc-business-copy h2{ font-size:40px; } .qnx-wc-product-screen-main{ grid-template-columns:1fr; } .qnx-wc-product-photo{ min-height:230px; } .qnx-wc-product-screen-bottom{ gap:12px; overflow:hidden; } .qnx-wc-product-screen-bottom span{ white-space:nowrap; } .qnx-wc-checkout-track{ grid-template-columns:1fr; } .qnx-wc-check-arrow{ display:none; } .qnx-wc-check-step{ min-height:190px; } .qnx-wc-console-grid{ grid-template-columns:1fr 1fr; } .qnx-wc-build-list > div{ grid-template-columns:80px 1fr; gap:15px; } .qnx-wc-build-list p{ grid-column:2; } .qnx-wc-final{ min-height:420px; padding:65px 20px; } .qnx-wc-final h2{ font-size:40px; letter-spacing:-2px; } } /* ========================================================= QNIX DIGITAL — REACT DEVELOPMENT ========================================================= */ .qnx-react-opening, .qnx-react-component-section, .qnx-react-capability, .qnx-react-process, .qnx-react-quality, .qnx-react-final{ position:relative; width:100%; overflow:hidden; } .qnx-react-opening{ padding:92px 7%; background: radial-gradient(circle at 78% 22%,rgba(8,168,207,.16),transparent 28%), linear-gradient(135deg,#f4f8ff 0%,#fff 48%,#eef7ff 100%); } .qnx-react-opening-grid{ max-width:1320px; margin:auto; display:grid; grid-template-columns:.86fr 1.14fr; gap:70px; align-items:center; } .qnx-react-kicker{ display:inline-flex; align-items:center; gap:10px; font-size:11px; font-weight:800; letter-spacing:2.3px; color:#0758d8; } .qnx-react-kicker:before{ content:""; width:25px; height:2px; background:linear-gradient(90deg,#0758d8,#16b98a); } .qnx-react-copy h2, .qnx-react-component-intro h2, .qnx-react-capability-top h2, .qnx-react-process-copy h2, .qnx-react-quality-copy h2, .qnx-react-final-content h2{ margin:18px 0 18px; color:#0d1730; font-size:clamp(38px,4.2vw,67px); line-height:1.03; letter-spacing:-2.8px; font-weight:700; } .qnx-react-copy h2 strong, .qnx-react-component-intro h2 strong, .qnx-react-capability-top h2 strong, .qnx-react-process-copy h2 strong, .qnx-react-quality-copy h2 strong{ color:#0758d8; } .qnx-react-copy p, .qnx-react-component-intro p, .qnx-react-process-copy p, .qnx-react-quality-copy p{ max-width:620px; margin:0; color:#5d6b84; font-size:16px; line-height:1.8; } .qnx-react-points{ display:flex; flex-wrap:wrap; gap:9px; margin:28px 0 32px; } .qnx-react-points span, .qnx-react-quality-tags span{ padding:9px 13px; border:1px solid #dce7f4; background:#fff; color:#0d1730; font-size:12px; font-weight:700; } .qnx-react-primary, .qnx-react-final-btn{ display:inline-flex; align-items:center; gap:22px; padding:15px 20px 15px 22px; color:#fff; background:#0758d8; text-decoration:none; font-size:13px; font-weight:800; transition:.35s ease; } .qnx-react-primary b, .qnx-react-final-btn b{ width:30px; height:30px; display:grid; place-items:center; background:#b7e51c; color:#062d7a; font-size:16px; } .qnx-react-primary:hover{ transform:translateY(-3px); background:#062d7a; } /* EDITOR */ .qnx-react-editor-wrap{ position:relative; min-height:570px; display:flex; align-items:center; justify-content:center; } .qnx-react-editor{ width:min(700px,100%); background:#0d1730; border:1px solid rgba(8,168,207,.28); box-shadow:0 35px 80px rgba(6,45,122,.18); transform:perspective(1200px) rotateY(-4deg) rotateX(2deg); } .qnx-react-editor-top{ height:48px; display:flex; align-items:center; gap:16px; padding:0 18px; background:#062d7a; color:#fff; font-size:11px; letter-spacing:1px; } .qnx-react-editor-top em{ margin-left:auto; padding:5px 9px; background:#16b98a; color:#fff; font-size:9px; font-style:normal; font-weight:800; } .qnx-react-dots{ display:flex; gap:6px; } .qnx-react-dots i{ width:8px; height:8px; border-radius:50%; background:#08a8cf; } .qnx-react-dots i:nth-child(2){ background:#16b98a; } .qnx-react-dots i:nth-child(3){ background:#79c91c; } .qnx-react-editor-body{ display:grid; grid-template-columns:34px 1fr 245px; min-height:475px; } .qnx-react-lines{ padding:20px 7px; display:flex; flex-direction:column; gap:11px; background:#09152c; color:#516987; font:10px/1 monospace; text-align:right; } .qnx-react-code{ padding:22px 15px; color:#b9d2f4; font:12px/1.9 monospace; overflow:hidden; } .qnx-react-code p{ margin:0; white-space:nowrap; } .qnx-react-code b{ color:#08a8cf; } .qnx-react-code i{ color:#79c91c; font-style:normal; } .qnx-react-code strong{ color:#b7e51c; font-weight:500; } .qnx-react-code span{ color:#16b98a; } .qnx-react-code .indent{ padding-left:20px; } .qnx-react-code .indent2{ padding-left:40px; } .qnx-react-code .indent3{ padding-left:60px; color:#8fb3dd; } .qnx-react-live{ padding:18px; background:#f4f8ff; } .qnx-react-live-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; font-size:9px; font-weight:800; letter-spacing:1.5px; color:#5d6b84; } .qnx-react-live-head i{ width:7px; height:7px; border-radius:50%; background:#16b98a; box-shadow:0 0 0 5px rgba(22,185,138,.12); } .qnx-react-browser{ height:335px; background:#fff; border:1px solid #dce6f3; box-shadow:0 12px 30px rgba(17,55,110,.08); } .qnx-react-browser-bar{ height:25px; display:flex; align-items:center; gap:4px; padding-left:9px; border-bottom:1px solid #e3eaf4; } .qnx-react-browser-bar span{ width:5px; height:5px; border-radius:50%; background:#08a8cf; } .qnx-react-browser-bar span:nth-child(2){ background:#16b98a; } .qnx-react-browser-bar span:nth-child(3){ background:#79c91c; } .qnx-react-browser-content{ padding:18px 14px; } .qnx-react-ui-nav{ width:72%; height:8px; background:#0758d8; margin-bottom:20px; } .qnx-react-ui-title{ display:flex; flex-direction:column; gap:6px; margin-bottom:20px; } .qnx-react-ui-title span:first-child{ width:72%; height:13px; background:#0d1730; } .qnx-react-ui-title span:last-child{ width:48%; height:6px; background:#dbe6f3; } .qnx-react-ui-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; } .qnx-react-ui-grid div{ height:115px; background:linear-gradient(145deg,#e8f2ff,#b9e7f0); border:1px solid #d6e5f2; } .qnx-react-ui-grid div:nth-child(2){ background:linear-gradient(145deg,#e9f9f3,#c8efd9); } .qnx-react-ui-grid div:nth-child(3){ background:linear-gradient(145deg,#eef8dd,#d8f19f); } .qnx-react-ui-button{ width:82px; height:20px; margin-top:16px; background:#0758d8; } .qnx-react-float{ position:absolute; padding:12px 15px; background:#fff; border:1px solid #dce6f3; box-shadow:0 16px 35px rgba(17,55,110,.12); min-width:130px; } .qnx-react-float span{ display:block; margin-bottom:5px; font-size:8px; font-weight:800; letter-spacing:1.4px; color:#5d6b84; } .qnx-react-float strong{ color:#0758d8; font-size:12px; } .qnx-react-component{ top:6%; left:0; } .qnx-react-state{ right:0; top:31%; } .qnx-react-build{ left:8%; bottom:7%; } .qnx-react-component:before, .qnx-react-state:before, .qnx-react-build:before{ content:""; position:absolute; width:30px; height:1px; background:#08a8cf; } .qnx-react-component:before{ right:-30px; } .qnx-react-state:before{ left:-30px; } .qnx-react-build:before{ right:-30px; } /* COMPONENT SECTION */ .qnx-react-component-section{ padding:105px 7%; background:#fff; } .qnx-react-component-intro{ max-width:1320px; margin:0 auto 58px; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end; } .qnx-react-component-intro h2{ margin-bottom:0; } .qnx-react-component-intro p{ align-self:end; } .qnx-react-component-stage{ max-width:1320px; min-height:410px; margin:auto; display:grid; grid-template-columns:310px 1fr; border:1px solid #dce6f3; background:#f4f8ff; } .qnx-react-tree{ padding:28px; border-right:1px solid #dce6f3; background:#fff; } .qnx-react-tree-title{ margin-bottom:24px; font-size:10px; letter-spacing:2px; font-weight:800; color:#5d6b84; } .qnx-react-tree-row{ padding:11px 12px; color:#0d1730; font:13px monospace; } .qnx-react-tree-row span{ margin-right:8px; color:#0758d8; } .qnx-react-tree-row.active{ background:#eaf3ff; color:#0758d8; font-weight:700; } .qnx-react-tree-row.child{ padding-left:25px; } .qnx-react-tree-row.child2{ padding-left:48px; color:#5d6b84; } .qnx-react-flow{ position:relative; min-height:410px; padding:45px; display:grid; grid-template-columns:repeat(3,1fr); align-items:center; gap:28px; } .qnx-react-flow-line{ position:absolute; left:12%; right:12%; top:50%; height:1px; background:linear-gradient(90deg,#0758d8,#08a8cf,#16b98a); } .qnx-react-flow-node{ position:relative; z-index:1; padding:27px; min-height:170px; background:#fff; border:1px solid #dce6f3; box-shadow:0 14px 35px rgba(17,55,110,.07); } .qnx-react-flow-node small{ display:block; color:#08a8cf; font-weight:800; margin-bottom:22px; } .qnx-react-flow-node strong{ display:block; font-size:13px; letter-spacing:1px; color:#0d1730; } .qnx-react-flow-node p{ margin:12px 0 0; color:#5d6b84; font-size:12px; line-height:1.6; } /* CAPABILITIES */ .qnx-react-capability{ padding:100px 7%; background:#f4f8ff; } .qnx-react-capability-top{ max-width:1320px; margin:0 auto 55px; } .qnx-react-capability-top h2{ margin-bottom:0; } .qnx-react-capability-list{ max-width:1320px; margin:auto; border-top:1px solid #cfdceb; } .qnx-react-capability-list article{ display:grid; grid-template-columns:70px 1fr 40px; gap:25px; align-items:center; padding:28px 8px; border-bottom:1px solid #cfdceb; transition:.3s ease; } .qnx-react-capability-list article:hover{ padding-left:20px; background:#fff; } .qnx-react-cap-no{ font-size:12px; font-weight:900; color:#0758d8; } .qnx-react-capability-list h3{ margin:0 0 7px; font-size:20px; color:#0d1730; } .qnx-react-capability-list p{ max-width:720px; margin:0; color:#5d6b84; font-size:13px; line-height:1.65; } .qnx-react-arrow{ width:34px; height:34px; display:grid; place-items:center; border:1px solid #cfdceb; color:#0758d8; transition:.3s ease; } .qnx-react-capability-list article:hover .qnx-react-arrow{ background:#0758d8; color:#fff; border-color:#0758d8; } /* PROCESS */ .qnx-react-process{ padding:105px 7%; background:#fff; } .qnx-react-process-copy{ max-width:1320px; margin:auto; } .qnx-react-process-copy h2{ margin-bottom:18px; } .qnx-react-process-track{ max-width:1320px; margin:65px auto 0; display:grid; grid-template-columns:1fr 55px 1fr 55px 1fr 55px 1fr; align-items:center; } .qnx-react-process-item{ min-height:190px; padding:25px; border-left:3px solid #0758d8; background:#f4f8ff; } .qnx-react-process-item span{ font-size:10px; font-weight:900; color:#08a8cf; } .qnx-react-process-item h3{ margin:25px 0 10px; color:#0d1730; font-size:19px; } .qnx-react-process-item p{ margin:0; color:#5d6b84; font-size:12px; line-height:1.7; } .qnx-react-process-connector{ height:1px; background:linear-gradient(90deg,#0758d8,#16b98a); } /* QUALITY */ .qnx-react-quality{ padding:105px 7%; display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; background:#062d7a; } .qnx-react-quality-copy .qnx-react-kicker{ color:#b7e51c; } .qnx-react-quality-copy .qnx-react-kicker:before{ background:#b7e51c; } .qnx-react-quality-copy h2{ color:#fff; } .qnx-react-quality-copy h2 strong{ color:#b7e51c; } .qnx-react-quality-copy p{ color:#b8c9e0; } .qnx-react-quality-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:25px; } .qnx-react-quality-tags span{ border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff; } .qnx-react-quality-visual{ min-height:330px; display:grid; place-items:center; } .qnx-react-quality-window{ width:min(550px,100%); background:#0d1730; border:1px solid rgba(183,229,28,.2); box-shadow:0 30px 70px rgba(0,0,0,.2); } .qnx-react-quality-top{ display:flex; justify-content:space-between; padding:17px 20px; color:#8ea9ca; font-size:9px; letter-spacing:1.5px; border-bottom:1px solid rgba(255,255,255,.08); } .qnx-react-quality-top b{ color:#b7e51c; } .qnx-react-quality-row{ display:flex; justify-content:space-between; padding:20px; border-bottom:1px solid rgba(255,255,255,.07); color:#d7e3f3; font-size:12px; } .qnx-react-quality-row i{ color:#16b98a; font-style:normal; font-weight:700; } .qnx-react-quality-progress{ height:5px; margin:20px; background:#142646; } .qnx-react-quality-progress span{ display:block; width:86%; height:100%; background:linear-gradient(90deg,#0758d8,#08a8cf,#16b98a,#79c91c); } /* FINAL */ .qnx-react-final{ min-height:470px; padding:90px 7%; display:flex; align-items:center; background: linear-gradient(125deg,#062d7a 0%,#0758d8 48%,#087ee7 74%,#10a4b4 100%); } .qnx-react-final-grid{ position:absolute; inset:0; opacity:.12; background-image: linear-gradient(rgba(255,255,255,.8) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.8) 1px,transparent 1px); background-size:58px 58px; } .qnx-react-final-content{ position:relative; z-index:2; max-width:760px; } .qnx-react-final-content .qnx-react-kicker{ color:#b7e51c; } .qnx-react-final-content .qnx-react-kicker:before{ background:#b7e51c; } .qnx-react-final-content h2{ color:#fff; } .qnx-react-final-content h2 strong{ color:#b7e51c; } .qnx-react-final-content p{ max-width:620px; margin:0 0 30px; color:#dceaff; font-size:15px; line-height:1.8; } .qnx-react-final-btn{ background:#0d1730; } .qnx-react-final-btn:hover{ transform:translateY(-3px); background:#062d7a; } .qnx-react-final-code{ position:absolute; right:7%; bottom:65px; z-index:2; display:flex; flex-direction:column; align-items:flex-start; font:14px/1.9 monospace; color:rgba(255,255,255,.75); } .qnx-react-final-code span:nth-child(2){ padding-left:25px; color:#b7e51c; } .qnx-react-final-code span:nth-child(3){ padding-left:25px; color:#16b98a; } .qnx-react-final-code span:last-child{ color:#fff; } /* RESPONSIVE */ @media(max-width:1100px){ .qnx-react-opening-grid{ grid-template-columns:1fr; gap:45px; } .qnx-react-editor-wrap{ max-width:800px; margin:auto; width:100%; } .qnx-react-component-intro{ grid-template-columns:1fr; gap:20px; } .qnx-react-quality{ grid-template-columns:1fr; gap:45px; } .qnx-react-quality-copy{ order:-1; } .qnx-react-final-code{ opacity:.5; } } @media(max-width:850px){ .qnx-react-opening, .qnx-react-component-section, .qnx-react-capability, .qnx-react-process, .qnx-react-quality, .qnx-react-final{ padding-left:5%; padding-right:5%; } .qnx-react-editor-body{ grid-template-columns:28px 1fr; } .qnx-react-live{ display:none; } .qnx-react-component{ left:-5px; } .qnx-react-state{ right:-5px; } .qnx-react-component-stage{ grid-template-columns:240px 1fr; } .qnx-react-flow{ padding:25px; gap:15px; } .qnx-react-flow-node{ padding:20px; } .qnx-react-process-track{ grid-template-columns:1fr 1fr; gap:18px; } .qnx-react-process-connector{ display:none; } .qnx-react-final-code{ display:none; } } @media(max-width:620px){ .qnx-react-opening, .qnx-react-component-section, .qnx-react-capability, .qnx-react-process, .qnx-react-quality, .qnx-react-final{ padding-top:70px; padding-bottom:70px; } .qnx-react-copy h2, .qnx-react-component-intro h2, .qnx-react-capability-top h2, .qnx-react-process-copy h2, .qnx-react-quality-copy h2, .qnx-react-final-content h2{ font-size:37px; letter-spacing:-1.8px; } .qnx-react-editor-wrap{ min-height:430px; } .qnx-react-editor{ transform:none; } .qnx-react-editor-body{ min-height:360px; } .qnx-react-code{ font-size:10px; } .qnx-react-float{ transform:scale(.82); transform-origin:center; } .qnx-react-component{ left:-25px; } .qnx-react-state{ right:-25px; } .qnx-react-build{ left:0; } .qnx-react-component-stage{ grid-template-columns:1fr; } .qnx-react-tree{ border-right:0; border-bottom:1px solid #dce6f3; } .qnx-react-flow{ grid-template-columns:1fr; gap:12px; } .qnx-react-flow-line{ display:none; } .qnx-react-flow-node{ min-height:auto; } .qnx-react-capability-list article{ grid-template-columns:38px 1fr; gap:12px; padding:23px 0; } .qnx-react-arrow{ display:none; } .qnx-react-process-track{ grid-template-columns:1fr; margin-top:40px; } .qnx-react-process-item{ min-height:auto; } .qnx-react-quality-window{ width:100%; } .qnx-react-final{ min-height:430px; } } /* ========================================================= QNIX DIGITAL — NEXT.JS DEVELOPMENT ========================================================= */ .qnx-next-opening, .qnx-next-routing, .qnx-next-rendering, .qnx-next-system, .qnx-next-usecases, .qnx-next-final{ position:relative; width:100%; overflow:hidden; } .qnx-next-opening{ padding:90px 7%; background: radial-gradient(circle at 82% 18%,rgba(8,168,207,.14),transparent 30%), linear-gradient(135deg,#f4f8ff 0%,#fff 52%,#edf7ff 100%); } .qnx-next-opening-grid{ max-width:1320px; margin:auto; display:grid; grid-template-columns:.82fr 1.18fr; gap:70px; align-items:center; } .qnx-next-kicker{ display:inline-flex; align-items:center; gap:10px; color:#0758d8; font-size:11px; font-weight:800; letter-spacing:2.2px; } .qnx-next-kicker:before{ content:""; width:25px; height:2px; background:linear-gradient(90deg,#0758d8,#16b98a); } .qnx-next-opening-copy h2, .qnx-next-routing-intro h2, .qnx-next-rendering-head h2, .qnx-next-system-copy h2, .qnx-next-usecases-head h2, .qnx-next-final-content h2{ margin:18px 0; color:#0d1730; font-size:clamp(39px,4.3vw,67px); line-height:1.03; letter-spacing:-2.8px; font-weight:700; } .qnx-next-opening-copy h2 strong, .qnx-next-routing-intro h2 strong, .qnx-next-rendering-head h2 strong, .qnx-next-system-copy h2 strong, .qnx-next-usecases-head h2 strong{ color:#0758d8; } .qnx-next-opening-copy p, .qnx-next-routing-intro p, .qnx-next-system-copy>p{ max-width:620px; margin:0; color:#5d6b84; font-size:16px; line-height:1.8; } .qnx-next-opening-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:27px 0 31px; } .qnx-next-opening-tags span{ padding:9px 12px; border:1px solid #dce6f3; background:#fff; color:#0d1730; font-size:11px; font-weight:700; } .qnx-next-primary, .qnx-next-final-btn{ display:inline-flex; align-items:center; gap:20px; padding:15px 19px 15px 22px; background:#0758d8; color:#fff; text-decoration:none; font-size:13px; font-weight:800; transition:.35s ease; } .qnx-next-primary b, .qnx-next-final-btn b{ width:30px; height:30px; display:grid; place-items:center; background:#b7e51c; color:#062d7a; font-size:16px; } .qnx-next-primary:hover{ transform:translateY(-3px); background:#062d7a; } /* OPENING ARCHITECTURE */ .qnx-next-architecture{ position:relative; min-height:550px; } .qnx-next-browser{ position:absolute; top:35px; left:0; width:78%; background:#fff; border:1px solid #dce6f3; box-shadow:0 32px 75px rgba(17,55,110,.16); transform:perspective(1300px) rotateY(-5deg) rotateX(2deg); transition:transform .35s ease; } .qnx-next-browser-top{ height:48px; display:flex; align-items:center; gap:15px; padding:0 15px; background:#062d7a; } .qnx-next-window-dots{ display:flex; gap:5px; } .qnx-next-window-dots i{ width:7px; height:7px; border-radius:50%; background:#08a8cf; } .qnx-next-window-dots i:nth-child(2){ background:#16b98a; } .qnx-next-window-dots i:nth-child(3){ background:#79c91c; } .qnx-next-url{ flex:1; height:25px; display:flex; align-items:center; padding:0 10px; background:rgba(255,255,255,.08); color:#9bb4d2; font:9px monospace; } .qnx-next-status{ display:flex; align-items:center; gap:5px; color:#b7e51c; font-size:8px; font-weight:800; } .qnx-next-status span{ width:6px; height:6px; border-radius:50%; background:#16b98a; } .qnx-next-browser-body{ min-height:395px; padding:20px 24px; background:#fff; } .qnx-next-site-nav{ display:flex; align-items:center; gap:17px; padding-bottom:22px; border-bottom:1px solid #e3eaf4; } .qnx-next-site-nav strong{ margin-right:auto; color:#0758d8; font-size:15px; } .qnx-next-site-nav span{ width:55px; height:5px; background:#dbe5f1; } .qnx-next-page-heading{ padding:30px 0 25px; } .qnx-next-page-heading i{ display:block; width:68%; height:16px; background:#0d1730; margin-bottom:10px; } .qnx-next-page-heading b{ display:block; width:43%; height:7px; background:#dce7f3; } .qnx-next-page-heading em{ display:block; width:30%; height:7px; background:#dce7f3; margin-top:6px; } .qnx-next-page-layout{ display:grid; grid-template-columns:1.6fr .7fr; gap:15px; } .qnx-next-page-main{ min-height:185px; padding:20px; background:linear-gradient(145deg,#edf6ff,#c8ebf4); } .qnx-next-page-main span{ display:block; height:9px; margin-bottom:13px; background:rgba(7,88,216,.28); } .qnx-next-page-main span:nth-child(1){ width:70%; } .qnx-next-page-main span:nth-child(2){ width:85%; } .qnx-next-page-main span:nth-child(3){ width:45%; } .qnx-next-page-side{ padding:18px; background:#f4f8ff; border:1px solid #dce6f3; } .qnx-next-page-side span{ display:block; height:42px; margin-bottom:10px; background:#d8eef1; } .qnx-next-page-side span:last-child{ background:#dff2c0; } .qnx-next-code-panel{ position:absolute; right:0; bottom:28px; width:42%; min-height:310px; background:#0d1730; border:1px solid rgba(8,168,207,.3); box-shadow:0 25px 60px rgba(6,45,122,.25); z-index:2; } .qnx-next-code-head{ display:flex; justify-content:space-between; padding:16px 18px; background:#062d7a; color:#fff; font-size:9px; letter-spacing:1.5px; } .qnx-next-code-head b{ color:#b7e51c; } .qnx-next-file-tree{ padding:20px; color:#9db8d8; font:11px/2.05 monospace; } .qnx-next-file-tree strong{ color:#08a8cf; } .qnx-next-file-tree .next-indent{ padding-left:17px; } .qnx-next-file-tree .next-indent2{ padding-left:38px; color:#16b98a; } .qnx-next-architecture-label{ position:absolute; right:2%; top:4%; padding:12px 16px; background:#fff; border:1px solid #dce6f3; box-shadow:0 12px 30px rgba(17,55,110,.1); } .qnx-next-architecture-label span{ display:block; margin-bottom:4px; color:#5d6b84; font-size:8px; letter-spacing:1.5px; font-weight:800; } .qnx-next-architecture-label strong{ color:#0758d8; font:13px monospace; } /* ROUTING */ .qnx-next-routing{ padding:105px 7%; background:#fff; } .qnx-next-routing-intro{ max-width:1320px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:end; } .qnx-next-routing-intro h2{ margin-bottom:0; } .qnx-next-route-map{ max-width:1320px; margin:70px auto 0; display:grid; grid-template-columns:1fr 60px 1.25fr 60px 1fr; align-items:center; } .qnx-next-route-column{ min-height:330px; padding:28px; background:#f4f8ff; border:1px solid #dce6f3; } .qnx-next-route-column.route-main{ background:#fff; box-shadow:0 20px 50px rgba(17,55,110,.1); border-top:3px solid #0758d8; } .qnx-next-route-label{ display:block; margin-bottom:27px; color:#5d6b84; font-size:9px; font-weight:900; letter-spacing:2px; } .qnx-next-route-file{ padding:16px 14px; margin-bottom:10px; background:#fff; border:1px solid #dce6f3; } .qnx-next-route-file b{ display:block; color:#0758d8; font:13px monospace; } .qnx-next-route-file small{ display:block; margin-top:6px; color:#5d6b84; font-size:10px; } .qnx-next-route-bridge{ height:1px; background:linear-gradient(90deg,#0758d8,#16b98a); position:relative; } .qnx-next-route-bridge:after{ content:""; position:absolute; right:0; top:-3px; width:6px; height:6px; background:#16b98a; } /* RENDERING */ .qnx-next-rendering{ padding:100px 7%; background:#f4f8ff; } .qnx-next-rendering-head{ max-width:1320px; margin:auto; } .qnx-next-rendering-head h2{ margin-bottom:0; } .qnx-next-rendering-board{ max-width:1320px; margin:60px auto 0; display:grid; grid-template-columns:1fr 95px 1fr; align-items:stretch; } .qnx-next-render-layer{ min-height:330px; padding:35px; background:#fff; border:1px solid #dce6f3; } .qnx-next-render-layer.client-layer{ border-top:3px solid #08a8cf; } .qnx-next-render-layer.server-layer{ border-top:3px solid #0758d8; } .qnx-next-layer-top{ display:flex; justify-content:space-between; color:#0758d8; font-size:9px; letter-spacing:2px; font-weight:900; } .qnx-next-layer-top b{ color:#5d6b84; } .qnx-next-render-layer h3{ margin:48px 0 13px; color:#0d1730; font-size:23px; } .qnx-next-render-layer p{ max-width:430px; color:#5d6b84; font-size:13px; line-height:1.7; } .qnx-next-layer-lines{ margin-top:35px; } .qnx-next-layer-lines span{ display:block; height:7px; margin-bottom:8px; background:#e1ebf5; } .qnx-next-layer-lines span:nth-child(1){ width:82%; } .qnx-next-layer-lines span:nth-child(2){ width:64%; } .qnx-next-layer-lines span:nth-child(3){ width:44%; } .qnx-next-render-divider{ position:relative; display:flex; align-items:center; justify-content:center; } .qnx-next-render-divider:before{ content:""; position:absolute; top:18%; bottom:18%; width:1px; background:linear-gradient(#0758d8,#16b98a); } .qnx-next-render-divider span{ position:relative; z-index:1; padding:8px 5px; background:#f4f8ff; color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1.5px; writing-mode:vertical-rl; } .qnx-next-render-note{ max-width:1320px; margin:22px auto 0; display:flex; align-items:center; gap:15px; padding:15px 18px; background:#fff; border-left:3px solid #b7e51c; } .qnx-next-render-note strong{ color:#0758d8; font-size:12px; } .qnx-next-render-note span{ color:#5d6b84; font-size:12px; } /* SYSTEM / DEPLOYMENT */ .qnx-next-system{ padding:110px 7%; display:grid; grid-template-columns:1.05fr .95fr; gap:90px; align-items:center; background:#062d7a; } .qnx-next-system-visual{ position:relative; } .qnx-next-terminal{ background:#0d1730; border:1px solid rgba(8,168,207,.3); box-shadow:0 30px 70px rgba(0,0,0,.25); } .qnx-next-terminal-top{ display:flex; align-items:center; gap:18px; padding:15px 18px; border-bottom:1px solid rgba(255,255,255,.08); color:#8ea9ca; font:10px monospace; } .qnx-next-terminal-top div{ display:flex; gap:5px; } .qnx-next-terminal-top i{ width:7px; height:7px; border-radius:50%; background:#08a8cf; } .qnx-next-terminal-top i:nth-child(2){ background:#16b98a; } .qnx-next-terminal-top i:nth-child(3){ background:#79c91c; } .qnx-next-terminal-body{ padding:28px; min-height:300px; color:#a8c1df; font:12px/2 monospace; } .qnx-next-terminal-body p{ margin:0; } .qnx-next-terminal-body p span{ color:#16b98a; } .qnx-next-terminal-body .muted{ color:#607b9e; } .qnx-next-terminal-body .ready-line{ color:#b7e51c; margin-top:10px; } .qnx-next-terminal-progress{ height:5px; margin:20px 0 10px; background:#142646; } .qnx-next-terminal-progress span{ display:block; width:88%; height:100%; background:linear-gradient(90deg,#0758d8,#08a8cf,#16b98a,#79c91c); } .qnx-next-deploy-track{ display:grid; grid-template-columns:1fr 35px 1fr 35px 1fr 35px 1fr; align-items:center; margin-top:28px; } .qnx-next-deploy-track div{ padding:13px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); } .qnx-next-deploy-track small{ display:block; color:#08a8cf; font-size:8px; margin-bottom:5px; } .qnx-next-deploy-track strong{ color:#fff; font-size:9px; letter-spacing:1px; } .qnx-next-deploy-track>span{ height:1px; background:linear-gradient(90deg,#0758d8,#16b98a); } .qnx-next-system-copy .qnx-next-kicker{ color:#b7e51c; } .qnx-next-system-copy .qnx-next-kicker:before{ background:#b7e51c; } .qnx-next-system-copy h2{ color:#fff; } .qnx-next-system-copy h2 strong{ color:#b7e51c; } .qnx-next-system-copy>p{ color:#b8c9e0; } .qnx-next-system-list{ margin-top:30px; } .qnx-next-system-list>div{ display:grid; grid-template-columns:35px 1fr; column-gap:12px; padding:17px 0; border-bottom:1px solid rgba(255,255,255,.1); } .qnx-next-system-list span{ color:#08a8cf; font-size:10px; font-weight:900; } .qnx-next-system-list strong{ color:#fff; font-size:14px; } .qnx-next-system-list p{ grid-column:2; margin:5px 0 0; color:#91aac8; font-size:11px; line-height:1.6; } /* USE CASES */ .qnx-next-usecases{ padding:105px 7%; background:#fff; } .qnx-next-usecases-head{ max-width:1320px; margin:auto; } .qnx-next-usecases-head h2{ margin-bottom:0; } .qnx-next-usecases-grid{ max-width:1320px; margin:60px auto 0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #dce6f3; border-left:1px solid #dce6f3; } .qnx-next-usecases-grid article{ min-height:250px; padding:30px; border-right:1px solid #dce6f3; border-bottom:1px solid #dce6f3; transition:.3s ease; } .qnx-next-usecases-grid article:hover{ background:#f4f8ff; transform:translateY(-5px); } .qnx-next-usecases-grid article>span{ color:#0758d8; font-size:10px; font-weight:900; } .qnx-next-usecases-grid h3{ margin:55px 0 12px; color:#0d1730; font-size:19px; } .qnx-next-usecases-grid p{ margin:0; color:#5d6b84; font-size:12px; line-height:1.7; } /* FINAL */ .qnx-next-final{ min-height:470px; padding:90px 7%; display:flex; align-items:center; background: linear-gradient(125deg,#062d7a 0%,#0758d8 48%,#087ee7 74%,#10a4b4 100%); } .qnx-next-final-grid{ position:absolute; inset:0; opacity:.12; background-image: linear-gradient(rgba(255,255,255,.8) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.8) 1px,transparent 1px); background-size:58px 58px; } .qnx-next-final-content{ position:relative; z-index:2; max-width:780px; } .qnx-next-final-content .qnx-next-kicker{ color:#b7e51c; } .qnx-next-final-content .qnx-next-kicker:before{ background:#b7e51c; } .qnx-next-final-content h2{ color:#fff; } .qnx-next-final-content h2 strong{ color:#b7e51c; } .qnx-next-final-content p{ max-width:620px; margin:0 0 30px; color:#dceaff; font-size:15px; line-height:1.8; } .qnx-next-final-btn{ background:#0d1730; } .qnx-next-final-btn:hover{ transform:translateY(-3px); background:#062d7a; } .qnx-next-final-stack{ position:absolute; right:7%; bottom:65px; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:6px; font:12px monospace; color:rgba(255,255,255,.68); } .qnx-next-final-stack span:nth-child(1){ color:#b7e51c; } .qnx-next-final-stack span:nth-child(3){ color:#16b98a; } /* RESPONSIVE */ @media(max-width:1100px){ .qnx-next-opening-grid{ grid-template-columns:1fr; gap:50px; } .qnx-next-architecture{ max-width:850px; width:100%; margin:auto; } .qnx-next-routing-intro{ grid-template-columns:1fr; gap:20px; } .qnx-next-system{ grid-template-columns:1fr; gap:55px; } .qnx-next-system-copy{ order:-1; } .qnx-next-usecases-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:850px){ .qnx-next-opening, .qnx-next-routing, .qnx-next-rendering, .qnx-next-system, .qnx-next-usecases, .qnx-next-final{ padding-left:5%; padding-right:5%; } .qnx-next-route-map{ grid-template-columns:1fr; gap:15px; margin-top:45px; } .qnx-next-route-column{ min-height:auto; } .qnx-next-route-bridge{ width:1px; height:30px; margin:auto; background:linear-gradient(#0758d8,#16b98a); } .qnx-next-route-bridge:after{ right:-3px; top:auto; bottom:0; } .qnx-next-rendering-board{ grid-template-columns:1fr; gap:15px; } .qnx-next-render-divider{ min-height:55px; } .qnx-next-render-divider:before{ left:15%; right:15%; top:50%; bottom:auto; width:auto; height:1px; background:linear-gradient(90deg,#0758d8,#16b98a); } .qnx-next-render-divider span{ writing-mode:initial; padding:7px 10px; } .qnx-next-usecases-grid{ grid-template-columns:1fr 1fr; } .qnx-next-deploy-track{ grid-template-columns:1fr 20px 1fr 20px 1fr 20px 1fr; } } @media(max-width:620px){ .qnx-next-opening, .qnx-next-routing, .qnx-next-rendering, .qnx-next-system, .qnx-next-usecases, .qnx-next-final{ padding-top:70px; padding-bottom:70px; } .qnx-next-opening-copy h2, .qnx-next-routing-intro h2, .qnx-next-rendering-head h2, .qnx-next-system-copy h2, .qnx-next-usecases-head h2, .qnx-next-final-content h2{ font-size:37px; letter-spacing:-1.8px; } .qnx-next-architecture{ min-height:420px; } .qnx-next-browser{ width:90%; left:0; top:20px; transform:none; } .qnx-next-browser-body{ min-height:280px; padding:15px; } .qnx-next-page-layout{ grid-template-columns:1fr; } .qnx-next-page-side{ display:none; } .qnx-next-code-panel{ width:58%; min-height:230px; bottom:0; } .qnx-next-file-tree{ padding:13px; font-size:9px; line-height:1.9; } .qnx-next-architecture-label{ right:0; top:0; transform:scale(.8); transform-origin:right top; } .qnx-next-route-column{ padding:22px; } .qnx-next-render-layer{ min-height:auto; padding:25px; } .qnx-next-system{ gap:40px; } .qnx-next-terminal-body{ padding:20px; min-height:260px; font-size:10px; } .qnx-next-deploy-track{ grid-template-columns:1fr; gap:7px; } .qnx-next-deploy-track>span{ width:1px; height:15px; margin:auto; } .qnx-next-usecases-grid{ grid-template-columns:1fr; margin-top:40px; } .qnx-next-usecases-grid article{ min-height:200px; } .qnx-next-final{ min-height:430px; } .qnx-next-final-stack{ display:none; } } /* ========================================================= QNIX DIGITAL — WEBSITE SPEED OPTIMIZATION ========================================================= */ .qnx-speed-intro, .qnx-speed-before, .qnx-speed-optimise, .qnx-speed-metrics, .qnx-speed-results, .qnx-speed-final{ position:relative; overflow:hidden; font-family:inherit; } .qnx-speed-intro{ padding:95px 6vw 105px; background: radial-gradient(circle at 82% 18%,rgba(8,168,207,.13),transparent 28%), linear-gradient(135deg,#f7fbff 0%,#fff 55%,#f2f8ff 100%); } .qnx-speed-intro-inner{ max-width:1320px; margin:auto; display:grid; grid-template-columns:.82fr 1.18fr; gap:70px; align-items:center; } .qnx-speed-copy{ position:relative; z-index:2; } .qnx-speed-kicker, .qnx-speed-section-head span, .qnx-speed-optimise-head span, .qnx-speed-metrics-copy>span, .qnx-speed-results-top span, .qnx-speed-final-content>span{ display:inline-block; color:#0758d8; font-size:11px; font-weight:800; letter-spacing:.2em; } .qnx-speed-copy h2{ margin:18px 0 20px; color:#0d1730; font-size:clamp(43px,4.8vw,72px); line-height:.98; letter-spacing:-.045em; font-weight:700; } .qnx-speed-copy h2 strong{ color:#0758d8; } .qnx-speed-copy p{ max-width:570px; margin:0; color:#5d6b84; font-size:16px; line-height:1.85; } .qnx-speed-points{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; } .qnx-speed-points span{ padding:9px 13px; border:1px solid #dce7f5; background:#fff; color:#0d1730; font-size:12px; font-weight:700; border-radius:30px; } .qnx-speed-runway{ min-height:440px; padding:30px; position:relative; border:1px solid #dce7f5; background:#fff; box-shadow:0 25px 70px rgba(7,88,216,.10); } .qnx-speed-runway:before{ content:""; position:absolute; width:250px; height:250px; right:-110px; top:-110px; border-radius:50%; background:rgba(8,168,207,.08); } .qnx-speed-runway-top{ display:flex; justify-content:space-between; align-items:center; color:#5d6b84; font-size:10px; letter-spacing:.16em; font-weight:800; } .qnx-speed-runway-top b{ color:#16b98a; font-size:10px; } .qnx-speed-track{ height:250px; margin:48px 5px 30px; position:relative; } .qnx-speed-track-line{ position:absolute; left:25px; right:25px; top:124px; height:2px; background:linear-gradient(90deg,#dfe8f4,#0758d8,#08a8cf,#79c91c); } .qnx-speed-track-line:after{ content:""; position:absolute; inset:-5px 0; background:linear-gradient(90deg,transparent,#08a8cf,transparent); opacity:.16; filter:blur(7px); } .qnx-speed-stage{ position:absolute; top:98px; z-index:3; display:flex; flex-direction:column; align-items:center; gap:9px; transform:translateX(-50%); } .qnx-speed-stage:nth-of-type(2){left:5%} .qnx-speed-stage:nth-of-type(3){left:35%} .qnx-speed-stage:nth-of-type(4){left:65%} .qnx-speed-stage:nth-of-type(5){left:95%} .qnx-speed-stage i{ width:20px; height:20px; border:5px solid #fff; border-radius:50%; background:#0758d8; box-shadow:0 0 0 2px #0758d8,0 8px 22px rgba(7,88,216,.25); } .qnx-speed-stage:nth-of-type(5) i{ background:#79c91c; box-shadow:0 0 0 2px #79c91c,0 8px 22px rgba(121,201,28,.25); } .qnx-speed-stage span{ font-size:9px; color:#5d6b84; font-weight:800; letter-spacing:.13em; } .qnx-speed-stage strong{ font-size:10px; color:#b6c1d0; } .qnx-speed-runner{ position:absolute; top:117px; left:8%; width:55px; height:7px; border-radius:20px; background:linear-gradient(90deg,transparent,#08a8cf,#b7e51c); filter:drop-shadow(0 0 8px rgba(8,168,207,.5)); animation:qnxSpeedRun 3.2s linear infinite; } @keyframes qnxSpeedRun{ 0%{transform:translateX(0);opacity:0} 10%{opacity:1} 88%{opacity:1} 100%{transform:translateX(520px);opacity:0} } .qnx-speed-readout{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #e3eaf4; padding-top:22px; gap:15px; } .qnx-speed-readout div{ display:flex; flex-direction:column; gap:6px; } .qnx-speed-readout small{ color:#8b98aa; font-size:9px; letter-spacing:.14em; } .qnx-speed-readout strong{ color:#0d1730; font-size:13px; } .qnx-speed-before{ padding:105px 6vw; background:#fff; } .qnx-speed-section-head{ max-width:720px; margin:0 auto 55px; text-align:center; } .qnx-speed-section-head h2, .qnx-speed-optimise-head h2, .qnx-speed-results-top h2{ margin:15px 0 16px; color:#0d1730; font-size:clamp(38px,4.2vw,61px); line-height:1; letter-spacing:-.04em; } .qnx-speed-section-head p, .qnx-speed-results-top p{ margin:0; color:#5d6b84; line-height:1.8; font-size:15px; } .qnx-speed-loss-map{ max-width:1260px; margin:auto; display:grid; grid-template-columns:1.1fr .9fr; gap:55px; align-items:center; } .qnx-speed-loss-main{ height:470px; position:relative; overflow:hidden; border-radius:24px; background: linear-gradient(145deg,#062d7a,#0758d8 58%,#08a8cf); box-shadow:0 30px 75px rgba(7,88,216,.17); } .qnx-speed-browser-bar{ height:54px; padding:0 22px; display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.10); border-bottom:1px solid rgba(255,255,255,.14); } .qnx-speed-browser-bar span{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.65); } .qnx-speed-browser-bar b{ margin-left:15px; color:rgba(255,255,255,.75); font-size:10px; letter-spacing:.08em; } .qnx-speed-browser-content{ width:74%; height:315px; margin:42px auto 0; padding:25px; position:relative; background:rgba(255,255,255,.97); border-radius:9px; box-shadow:0 25px 60px rgba(0,20,70,.25); } .qnx-speed-browser-hero{ width:58%; height:92px; background:linear-gradient(135deg,#0758d8,#08a8cf); border-radius:5px; } .qnx-speed-browser-lines{ position:absolute; top:38px; right:25px; width:27%; } .qnx-speed-browser-lines i{ display:block; height:7px; margin-bottom:10px; border-radius:10px; background:#dbe5f3; } .qnx-speed-browser-lines i:first-child{ width:90%; background:#0758d8; } .qnx-speed-browser-blocks{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:27px; } .qnx-speed-browser-blocks span{ height:95px; border:1px solid #e2e9f3; background:#f5f8fc; border-radius:5px; } .qnx-speed-scan-line{ position:absolute; left:0; right:0; top:95px; height:1px; background:#b7e51c; box-shadow:0 0 15px #b7e51c; opacity:.75; animation:qnxScan 3s ease-in-out infinite; } @keyframes qnxScan{ 0%,100%{top:85px} 50%{top:405px} } .qnx-speed-loss-items{ display:flex; flex-direction:column; gap:0; } .qnx-speed-loss-items>div{ padding:25px 0; border-bottom:1px solid #e3eaf4; display:grid; grid-template-columns:45px 1fr; column-gap:18px; } .qnx-speed-loss-items>div:first-child{ border-top:1px solid #e3eaf4; } .qnx-speed-loss-items b{ grid-row:span 2; color:#08a8cf; font-size:11px; padding-top:3px; } .qnx-speed-loss-items strong{ color:#0d1730; font-size:17px; } .qnx-speed-loss-items span{ margin-top:7px; color:#5d6b84; font-size:13px; line-height:1.65; } .qnx-speed-optimise{ padding:105px 6vw 115px; background:#f4f8ff; } .qnx-speed-optimise-head{ max-width:1250px; margin:auto; } .qnx-speed-optimise-flow{ max-width:1250px; margin:65px auto 0; display:grid; grid-template-columns:repeat(4,1fr); position:relative; } .qnx-speed-flow-line{ position:absolute; top:41px; left:7%; right:7%; height:1px; background:#cbd9eb; } .qnx-speed-optimise-flow article{ position:relative; padding:0 28px; } .qnx-speed-optimise-flow article:not(:last-child){ border-right:1px solid #dce5f1; } .qnx-speed-optimise-flow em{ position:absolute; top:0; right:27px; color:#b7c3d2; font-style:normal; font-size:10px; font-weight:800; } .qnx-speed-flow-icon{ width:82px; height:82px; position:relative; display:flex; align-items:center; justify-content:center; margin-bottom:30px; background:#fff; border:1px solid #dbe5f1; box-shadow:0 15px 35px rgba(7,88,216,.08); } .qnx-speed-icon-assets{ gap:5px; } .qnx-speed-icon-assets span{ width:7px; height:31px; border-radius:5px; background:#0758d8; } .qnx-speed-icon-assets span:nth-child(2){ height:44px; background:#08a8cf; } .qnx-speed-icon-assets span:nth-child(3){ height:23px; background:#79c91c; } .qnx-speed-icon-code{ gap:5px; color:#0758d8; font-size:18px; font-weight:800; } .qnx-speed-icon-request{ flex-direction:column; gap:5px; } .qnx-speed-icon-request span{ width:43px; height:4px; background:#0758d8; } .qnx-speed-icon-request span:nth-child(2){ width:31px; background:#08a8cf; } .qnx-speed-icon-request span:nth-child(3){ width:20px; background:#79c91c; } .qnx-speed-icon-server span{ width:38px; height:45px; border:2px solid #0758d8; position:relative; } .qnx-speed-icon-server span:before, .qnx-speed-icon-server span:after{ content:""; position:absolute; left:7px; right:7px; height:3px; background:#08a8cf; } .qnx-speed-icon-server span:before{top:10px} .qnx-speed-icon-server span:after{bottom:10px} .qnx-speed-optimise-flow h3{ margin:0 0 9px; color:#0d1730; font-size:22px; } .qnx-speed-optimise-flow p{ margin:0; color:#5d6b84; font-size:13px; line-height:1.75; } .qnx-speed-metrics{ min-height:610px; padding:95px 8vw; display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:60px; background:#062d7a; } .qnx-speed-metrics:before{ content:""; position:absolute; width:500px; height:500px; right:-150px; top:-180px; border-radius:50%; background:rgba(8,168,207,.13); } .qnx-speed-metrics-copy{ position:relative; z-index:2; } .qnx-speed-metrics-copy>span{ color:#b7e51c; } .qnx-speed-metrics-copy h2{ margin:16px 0; color:#fff; font-size:clamp(40px,4.5vw,65px); line-height:1; letter-spacing:-.045em; } .qnx-speed-metrics-copy h2 strong{ color:#08a8cf; } .qnx-speed-metrics-copy p{ max-width:530px; margin:0; color:rgba(255,255,255,.68); line-height:1.85; font-size:15px; } .qnx-speed-btn, .qnx-speed-final-btn{ display:inline-flex; align-items:center; justify-content:space-between; gap:25px; margin-top:32px; padding:15px 17px 15px 21px; min-width:215px; text-decoration:none; color:#0d1730; background:#b7e51c; font-size:12px; font-weight:800; transition:.3s ease; } .qnx-speed-btn b, .qnx-speed-final-btn b{ width:28px; height:28px; display:grid; place-items:center; background:#0758d8; color:#fff; font-size:14px; } .qnx-speed-btn:hover{ transform:translateY(-3px); box-shadow:0 15px 35px rgba(183,229,28,.18); } .qnx-speed-meter{ min-height:440px; position:relative; display:flex; justify-content:center; align-items:center; } .qnx-speed-meter-ring{ width:350px; height:350px; border-radius:50%; border:1px solid rgba(255,255,255,.15); display:grid; place-items:center; position:relative; background: radial-gradient(circle,#0758d8 0 28%,transparent 29%), conic-gradient(from 205deg,transparent 0 18%,#08a8cf 19% 43%,#b7e51c 44% 55%,#0758d8 56% 78%,transparent 79%); box-shadow:0 0 80px rgba(8,168,207,.14); } .qnx-speed-meter-ring:before{ content:""; position:absolute; inset:22px; border:1px dashed rgba(255,255,255,.2); border-radius:50%; } .qnx-speed-meter-core{ width:175px; height:175px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#062d7a; border:1px solid rgba(255,255,255,.2); box-shadow:0 0 50px rgba(0,0,0,.18); z-index:2; } .qnx-speed-meter-core small{ color:rgba(255,255,255,.5); font-size:8px; letter-spacing:.18em; } .qnx-speed-meter-core strong{ margin:7px 0; color:#fff; font-size:23px; letter-spacing:.04em; } .qnx-speed-meter-core span{ color:#b7e51c; font-size:9px; letter-spacing:.15em; font-weight:800; } .qnx-speed-meter-label{ position:absolute; padding:10px 13px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13); backdrop-filter:blur(10px); display:flex; flex-direction:column; gap:3px; } .qnx-speed-meter-label b{ color:#fff; font-size:10px; } .qnx-speed-meter-label span{ color:rgba(255,255,255,.45); font-size:8px; letter-spacing:.1em; } .qnx-speed-meter-a{left:4%;top:18%} .qnx-speed-meter-b{right:3%;top:35%} .qnx-speed-meter-c{left:14%;bottom:10%} .qnx-speed-results{ padding:105px 6vw; background:#fff; } .qnx-speed-results-top{ max-width:1250px; margin:auto; display:grid; grid-template-columns:1fr .65fr; gap:80px; align-items:end; } .qnx-speed-results-top h2{ margin-bottom:0; } .qnx-speed-results-top p{ padding-bottom:5px; } .qnx-speed-result-grid{ max-width:1250px; margin:65px auto 0; display:grid; grid-template-columns:1.3fr .7fr .7fr; grid-template-rows:auto auto; gap:18px; } .qnx-speed-result-large{ grid-row:span 2; min-height:390px; padding:38px; position:relative; overflow:hidden; background:#f4f8ff; border:1px solid #dce7f3; } .qnx-speed-result-large:after{ content:""; position:absolute; width:280px; height:280px; right:-80px; bottom:-110px; border-radius:50%; background:linear-gradient(135deg,#0758d8,#08a8cf); opacity:.11; } .qnx-speed-result-large small{ color:#0758d8; font-size:9px; letter-spacing:.16em; font-weight:800; } .qnx-speed-result-large h3{ margin:45px 0 10px; color:#0d1730; font-size:38px; letter-spacing:-.035em; } .qnx-speed-result-large p{ max-width:400px; color:#5d6b84; line-height:1.8; font-size:14px; } .qnx-speed-mini-bars{ position:absolute; left:38px; right:38px; bottom:38px; height:90px; display:flex; align-items:end; gap:10px; } .qnx-speed-mini-bars i{ width:16%; height:35%; background:#0758d8; } .qnx-speed-mini-bars i:nth-child(2){height:55%;background:#087ee7} .qnx-speed-mini-bars i:nth-child(3){height:45%;background:#08a8cf} .qnx-speed-mini-bars i:nth-child(4){height:75%;background:#16b98a} .qnx-speed-mini-bars i:nth-child(5){height:95%;background:#79c91c} .qnx-speed-result-card{ min-height:185px; padding:30px; border:1px solid #dfe7f1; background:#fff; } .qnx-speed-result-card span{ color:#08a8cf; font-size:10px; font-weight:800; } .qnx-speed-result-card strong{ display:block; margin:22px 0 8px; color:#0d1730; font-size:18px; } .qnx-speed-result-card p{ margin:0; color:#5d6b84; font-size:12px; line-height:1.7; } .qnx-speed-result-accent{ background:#0758d8; border-color:#0758d8; } .qnx-speed-result-accent span, .qnx-speed-result-accent strong{ color:#fff; } .qnx-speed-result-accent p{ color:rgba(255,255,255,.68); } .qnx-speed-final{ min-height:470px; padding:95px 7vw; display:grid; place-items:center; background: linear-gradient(125deg,#062d7a 0%,#0758d8 52%,#08a8cf 100%); } .qnx-speed-final-grid{ position:absolute; inset:0; opacity:.14; background-image: linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px); background-size:55px 55px; } .qnx-speed-final-content{ position:relative; z-index:2; max-width:760px; text-align:center; } .qnx-speed-final-content>span{ color:#b7e51c; } .qnx-speed-final-content h2{ margin:17px 0; color:#fff; font-size:clamp(44px,5.5vw,76px); line-height:.95; letter-spacing:-.05em; } .qnx-speed-final-content h2 strong{ color:#b7e51c; } .qnx-speed-final-content p{ max-width:610px; margin:0 auto; color:rgba(255,255,255,.75); font-size:15px; line-height:1.8; } .qnx-speed-final-btn{ margin-top:30px; background:#fff; } .qnx-speed-final-btn:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,20,80,.2); } .qnx-speed-final-orb{ position:absolute; width:320px; height:320px; right:-120px; bottom:-180px; border-radius:50%; border:1px solid rgba(183,229,28,.28); } @media(max-width:1050px){ .qnx-speed-intro-inner, .qnx-speed-metrics{ grid-template-columns:1fr; } .qnx-speed-copy{ max-width:720px; } .qnx-speed-runway{ max-width:800px; width:100%; } .qnx-speed-loss-map{ grid-template-columns:1fr; } .qnx-speed-loss-main{ max-width:850px; width:100%; margin:auto; } .qnx-speed-result-grid{ grid-template-columns:1fr 1fr; } .qnx-speed-result-large{ grid-row:auto; grid-column:span 2; min-height:320px; } .qnx-speed-results-top{ grid-template-columns:1fr; gap:20px; } } @media(max-width:800px){ .qnx-speed-intro, .qnx-speed-before, .qnx-speed-optimise, .qnx-speed-results{ padding-left:5vw; padding-right:5vw; } .qnx-speed-intro{ padding-top:70px; padding-bottom:75px; } .qnx-speed-runway{ min-height:390px; padding:22px; } .qnx-speed-track{ margin-top:35px; } .qnx-speed-optimise-flow{ grid-template-columns:1fr 1fr; gap:35px 0; } .qnx-speed-flow-line{ display:none; } .qnx-speed-optimise-flow article:nth-child(2){ border-right:0; } .qnx-speed-optimise-flow article:nth-child(3), .qnx-speed-optimise-flow article:nth-child(4){ padding-top:10px; } .qnx-speed-meter{ min-height:430px; } } @media(max-width:600px){ .qnx-speed-copy h2{ font-size:43px; } .qnx-speed-runway{ min-height:360px; padding:18px; } .qnx-speed-track{ margin-left:0; margin-right:0; } .qnx-speed-stage span{ font-size:7px; } .qnx-speed-stage strong{ display:none; } .qnx-speed-readout{ gap:8px; } .qnx-speed-readout strong{ font-size:10px; } .qnx-speed-loss-main{ height:390px; } .qnx-speed-browser-content{ width:84%; height:255px; margin-top:35px; padding:17px; } .qnx-speed-browser-hero{ height:70px; } .qnx-speed-browser-blocks span{ height:70px; } .qnx-speed-loss-items>div{ padding:20px 0; } .qnx-speed-optimise-flow{ grid-template-columns:1fr; gap:30px; } .qnx-speed-optimise-flow article{ padding:0 0 28px; border-right:0!important; border-bottom:1px solid #dce5f1; } .qnx-speed-optimise-flow article:last-child{ border-bottom:0; } .qnx-speed-meter-ring{ width:280px; height:280px; } .qnx-speed-meter-core{ width:145px; height:145px; } .qnx-speed-meter-label{ transform:scale(.85); } .qnx-speed-meter-a{left:0} .qnx-speed-meter-b{right:0} .qnx-speed-meter-c{left:5%} .qnx-speed-result-grid{ grid-template-columns:1fr; } .qnx-speed-result-large{ grid-column:auto; min-height:330px; } .qnx-speed-result-card{ min-height:160px; } .qnx-speed-final{ min-height:430px; padding:75px 6vw; } .qnx-speed-final-content h2{ font-size:46px; } .qnx-speed-final-btn{ min-width:0; width:100%; } } /* ========================================================= QNIX DIGITAL — CORE WEB VITALS OPTIMIZATION ========================================================= */ .qnx-cwv-intro, .qnx-cwv-understand, .qnx-cwv-diagnostics, .qnx-cwv-improve, .qnx-cwv-experience, .qnx-cwv-final{ position:relative; overflow:hidden; font-family:inherit; } .qnx-cwv-intro{ padding:95px 6vw 105px; background:#f5f9ff; } .qnx-cwv-intro-grid{ position:absolute; inset:0; opacity:.38; background-image: linear-gradient(#dfe9f5 1px,transparent 1px), linear-gradient(90deg,#dfe9f5 1px,transparent 1px); background-size:70px 70px; mask-image:linear-gradient(90deg,black,transparent 85%); } .qnx-cwv-intro-inner{ max-width:1320px; margin:auto; position:relative; z-index:2; display:grid; grid-template-columns:.75fr 1.25fr; gap:70px; align-items:center; } .qnx-cwv-intro-copy{ max-width:600px; } .qnx-cwv-kicker, .qnx-cwv-understand-head>span, .qnx-cwv-diagnostics-copy>span, .qnx-cwv-improve-head>span, .qnx-cwv-experience-copy>span, .qnx-cwv-final-content>span{ display:inline-block; color:#0758d8; font-size:11px; font-weight:800; letter-spacing:.2em; } .qnx-cwv-intro-copy h2{ margin:18px 0 22px; color:#0d1730; font-size:clamp(45px,5vw,74px); line-height:.96; letter-spacing:-.05em; } .qnx-cwv-intro-copy h2 strong{ color:#0758d8; } .qnx-cwv-intro-copy p{ margin:0; max-width:570px; color:#5d6b84; font-size:16px; line-height:1.85; } .qnx-cwv-signal-tags{ display:flex; gap:10px; margin-top:30px; } .qnx-cwv-signal-tags span{ min-width:50px; padding:10px 14px; text-align:center; background:#fff; border:1px solid #dbe6f4; color:#0758d8; font-size:11px; font-weight:800; box-shadow:0 10px 25px rgba(7,88,216,.06); } .qnx-cwv-lab{ position:relative; padding:27px; background:#0d1730; border:1px solid rgba(255,255,255,.08); box-shadow:0 30px 75px rgba(7,45,122,.16); } .qnx-cwv-lab:before{ content:""; position:absolute; inset:0; background: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:38px 38px; pointer-events:none; } .qnx-cwv-lab-top{ position:relative; z-index:2; display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.09); } .qnx-cwv-lab-top div{ display:flex; flex-direction:column; gap:6px; } .qnx-cwv-lab-top span{ color:rgba(255,255,255,.4); font-size:8px; letter-spacing:.18em; } .qnx-cwv-lab-top strong{ color:#fff; font-size:12px; letter-spacing:.06em; } .qnx-cwv-status{ display:flex; align-items:center; gap:7px; color:#79c91c; font-size:9px; letter-spacing:.1em; } .qnx-cwv-status i{ width:7px; height:7px; border-radius:50%; background:#79c91c; box-shadow:0 0 12px rgba(121,201,28,.8); animation:qnxCwvPulse 1.8s infinite; } @keyframes qnxCwvPulse{ 0%,100%{opacity:1} 50%{opacity:.35} } .qnx-cwv-viewport{ position:relative; z-index:2; margin:24px 0; padding:10px; background:#fff; box-shadow:0 18px 45px rgba(0,0,0,.2); } .qnx-cwv-browser{ height:35px; padding:0 12px; display:flex; align-items:center; gap:5px; background:#edf3f9; border-bottom:1px solid #dfe7ef; } .qnx-cwv-browser>span{ width:6px; height:6px; border-radius:50%; background:#a9b8c9; } .qnx-cwv-browser b{ margin-left:9px; color:#7d8da2; font-size:8px; font-weight:700; } .qnx-cwv-page{ min-height:235px; padding:20px; position:relative; overflow:hidden; background:#f8fbff; } .qnx-cwv-page-head{ display:flex; justify-content:space-between; } .qnx-cwv-page-head i{ width:15%; height:7px; background:#0758d8; } .qnx-cwv-page-head i:nth-child(2){ width:8%; background:#d8e2ef; } .qnx-cwv-page-head i:nth-child(3){ width:5%; background:#d8e2ef; } .qnx-cwv-page-hero{ margin-top:23px; display:grid; grid-template-columns:1fr .45fr; gap:20px; } .qnx-cwv-page-hero>span{ height:78px; background:linear-gradient(135deg,#0758d8,#08a8cf); } .qnx-cwv-page-hero div{ display:flex; flex-direction:column; gap:8px; justify-content:center; } .qnx-cwv-page-hero i{ display:block; width:90%; height:6px; background:#d8e3ef; } .qnx-cwv-page-hero i:first-child{ width:65%; background:#0d1730; } .qnx-cwv-page-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; } .qnx-cwv-page-grid span{ height:55px; background:#e8f0f8; } .qnx-cwv-paint-line{ position:absolute; left:0; right:0; top:75px; height:1px; background:#b7e51c; box-shadow:0 0 13px #b7e51c; animation:qnxCwvPaint 3.5s ease-in-out infinite; } @keyframes qnxCwvPaint{ 0%{top:45px;opacity:0} 20%{opacity:1} 80%{opacity:1} 100%{top:220px;opacity:0} } .qnx-cwv-live-signals{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .qnx-cwv-live-item{ padding:14px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08); } .qnx-cwv-live-item small{ display:block; color:rgba(255,255,255,.42); font-size:8px; letter-spacing:.15em; } .qnx-cwv-live-item strong{ display:block; margin:6px 0; color:#fff; font-size:20px; } .qnx-cwv-live-item span{ font-size:8px; letter-spacing:.1em; font-weight:800; } .qnx-cwv-good{ color:#79c91c; } .qnx-cwv-understand{ padding:105px 6vw; background:#fff; } .qnx-cwv-understand-head{ max-width:720px; margin:0 auto 60px; text-align:center; } .qnx-cwv-understand-head h2, .qnx-cwv-improve-head h2{ margin:16px 0; color:#0d1730; font-size:clamp(40px,4.5vw,62px); line-height:1; letter-spacing:-.045em; } .qnx-cwv-understand-head p{ margin:0; color:#5d6b84; font-size:15px; line-height:1.8; } .qnx-cwv-metric-board{ max-width:1260px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #dce6f2; border-bottom:1px solid #dce6f2; } .qnx-cwv-metric{ padding:30px; min-height:510px; position:relative; } .qnx-cwv-metric:not(:last-child){ border-right:1px solid #dce6f2; } .qnx-cwv-metric-index{ color:#b4c0cf; font-size:10px; font-weight:800; } .qnx-cwv-metric-visual{ height:210px; margin:28px 0; position:relative; overflow:hidden; background:#f4f8ff; border:1px solid #e1e9f3; } .qnx-cwv-loading-frame{ position:absolute; left:25px; right:25px; top:45px; height:115px; border:1px solid #d9e4f0; background:#fff; padding:18px; } .qnx-cwv-loading-frame span{ display:block; height:9px; width:75%; margin-bottom:10px; background:#dce6f1; } .qnx-cwv-loading-frame span:first-child{ width:45%; background:#0758d8; } .qnx-cwv-loading-frame span:last-of-type{ width:60%; } .qnx-cwv-loading-frame b, .qnx-cwv-interaction-frame>b, .qnx-cwv-stability-frame>b{ position:absolute; bottom:14px; left:18px; color:#0758d8; font-size:8px; letter-spacing:.12em; } .qnx-cwv-loading-frame:after{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#08a8cf; animation:qnxLcpLine 2.6s ease-in-out infinite; } @keyframes qnxLcpLine{ 0%,100%{height:15%} 50%{height:90%} } .qnx-cwv-interaction-frame{ position:absolute; inset:28px; border:1px solid #d9e4f0; background:#fff; } .qnx-cwv-response-bar{ position:absolute; left:30px; right:30px; top:85px; height:7px; background:#e1eaf3; } .qnx-cwv-response-bar:after{ content:""; display:block; width:70%; height:100%; background:#08a8cf; animation:qnxInpResponse 2s ease-in-out infinite; } @keyframes qnxInpResponse{ 0%,100%{width:20%} 55%{width:85%} } .qnx-cwv-cursor{ position:absolute; left:52px; top:43px; width:0; height:0; border-left:8px solid #0758d8; border-top:12px solid transparent; border-bottom:3px solid transparent; transform:rotate(-25deg); z-index:3; animation:qnxCursorMove 2.5s ease-in-out infinite; } @keyframes qnxCursorMove{ 0%,100%{left:45px;top:38px} 55%{left:120px;top:78px} } .qnx-cwv-click-ring{ position:absolute; left:50px; top:43px; width:20px; height:20px; border:1px solid #08a8cf; border-radius:50%; animation:qnxClickRing 2.5s ease-in-out infinite; } @keyframes qnxClickRing{ 0%,40%{opacity:0;transform:scale(.5)} 50%{opacity:1;transform:scale(1)} 75%,100%{opacity:0;transform:scale(1.7)} } .qnx-cwv-stability-frame{ position:absolute; inset:30px; border:1px solid #d9e4f0; background:#fff; } .qnx-cwv-layout-before, .qnx-cwv-layout-after{ position:absolute; display:block; width:70px; height:70px; border:1px solid #0758d8; } .qnx-cwv-layout-before{ left:28px; top:40px; background:#eaf3ff; } .qnx-cwv-layout-after{ right:28px; top:82px; border-color:#08a8cf; background:#e9fbff; } .qnx-cwv-stability-frame:after{ content:""; position:absolute; left:98px; top:67px; width:65px; height:1px; background:#b7e51c; transform:rotate(25deg); } .qnx-cwv-metric-copy small{ color:#0758d8; font-size:9px; font-weight:800; letter-spacing:.13em; } .qnx-cwv-metric-copy h3{ margin:8px 0; color:#0d1730; font-size:31px; letter-spacing:-.03em; } .qnx-cwv-metric-copy p{ margin:0; color:#5d6b84; font-size:13px; line-height:1.75; } .qnx-cwv-diagnostics{ padding:105px 7vw; background:#062d7a; } .qnx-cwv-diagnostics-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:.8fr 1.2fr; gap:75px; align-items:center; } .qnx-cwv-diagnostics-copy{ position:relative; z-index:2; } .qnx-cwv-diagnostics-copy>span{ color:#b7e51c; } .qnx-cwv-diagnostics-copy h2{ margin:16px 0 18px; color:#fff; font-size:clamp(38px,4.2vw,60px); line-height:1; letter-spacing:-.045em; } .qnx-cwv-diagnostics-copy h2 strong{ color:#08a8cf; } .qnx-cwv-diagnostics-copy>p{ max-width:520px; margin:0; color:rgba(255,255,255,.66); font-size:14px; line-height:1.85; } .qnx-cwv-diagnostic-list{ margin-top:32px; border-top:1px solid rgba(255,255,255,.12); } .qnx-cwv-diagnostic-list div{ display:grid; grid-template-columns:35px 1fr auto; align-items:center; gap:15px; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.12); } .qnx-cwv-diagnostic-list b{ color:#08a8cf; font-size:10px; } .qnx-cwv-diagnostic-list span{ color:#fff; font-size:12px; } .qnx-cwv-diagnostic-list i{ color:rgba(255,255,255,.38); font-size:8px; letter-spacing:.13em; font-style:normal; } .qnx-cwv-diagnostic-screen{ padding:25px; background:#0d1730; border:1px solid rgba(255,255,255,.1); box-shadow:0 30px 70px rgba(0,0,0,.2); } .qnx-cwv-screen-header{ display:flex; justify-content:space-between; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.08); } .qnx-cwv-screen-header span, .qnx-cwv-screen-header b{ font-size:9px; letter-spacing:.15em; } .qnx-cwv-screen-header span{ color:rgba(255,255,255,.4); } .qnx-cwv-screen-header b{ color:#b7e51c; } .qnx-cwv-timeline{ padding:45px 20px 35px; } .qnx-cwv-time-labels{ margin-left:80px; display:grid; grid-template-columns:repeat(5,1fr); color:rgba(255,255,255,.25); font-size:8px; } .qnx-cwv-timeline-row{ display:grid; grid-template-columns:60px 1fr 65px; align-items:center; gap:15px; margin-top:27px; } .qnx-cwv-timeline-row small{ color:#fff; font-size:10px; font-weight:800; } .qnx-cwv-timeline-row>div{ height:9px; position:relative; background:rgba(255,255,255,.07); } .qnx-cwv-timeline-row>div:before, .qnx-cwv-timeline-row>div:after{ content:""; position:absolute; top:-5px; bottom:-5px; width:1px; background:rgba(255,255,255,.06); } .qnx-cwv-timeline-row>div:before{left:25%} .qnx-cwv-timeline-row>div:after{left:50%} .qnx-cwv-timeline-row i{ display:block; height:100%; background:#08a8cf; position:relative; } .qnx-cwv-time-lcp{ width:52%; } .qnx-cwv-time-inp{ width:23%; background:#79c91c!important; } .qnx-cwv-time-cls{ width:12%; background:#b7e51c!important; } .qnx-cwv-timeline-row strong{ color:#fff; font-size:11px; text-align:right; } .qnx-cwv-diagnostic-footer{ display:flex; justify-content:space-between; padding-top:20px; border-top:1px solid rgba(255,255,255,.08); } .qnx-cwv-diagnostic-footer span{ color:rgba(255,255,255,.35); font-size:8px; letter-spacing:.16em; } .qnx-cwv-diagnostic-footer strong{ color:#79c91c; font-size:9px; letter-spacing:.12em; } .qnx-cwv-improve{ padding:105px 6vw; background:#f4f8ff; } .qnx-cwv-improve-head{ max-width:1250px; margin:auto; } .qnx-cwv-improve-head h2{ margin-bottom:0; } .qnx-cwv-improve-layout{ max-width:1250px; margin:65px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; } .qnx-cwv-improve-visual{ min-height:480px; position:relative; display:grid; place-items:center; } .qnx-cwv-browser-stack{ width:75%; position:relative; } .qnx-cwv-stack-window{ padding:10px; background:#fff; border:1px solid #d9e4f0; box-shadow:0 25px 55px rgba(7,88,216,.12); } .qnx-cwv-stack-top{ height:30px; display:flex; align-items:center; gap:5px; border-bottom:1px solid #e7edf4; } .qnx-cwv-stack-top span{ width:6px; height:6px; border-radius:50%; background:#b6c4d3; } .qnx-cwv-stack-content{ min-height:280px; padding:28px; display:grid; grid-template-columns:repeat(2,1fr); gap:15px; } .qnx-cwv-stack-content i{ display:block; background:#eaf1f8; min-height:75px; } .qnx-cwv-stack-content i:first-child{ grid-column:span 2; min-height:95px; background:linear-gradient(135deg,#0758d8,#08a8cf); } .qnx-cwv-stack-note{ position:absolute; padding:12px 15px; background:#fff; border:1px solid #dce6f2; box-shadow:0 15px 35px rgba(7,88,216,.12); display:flex; flex-direction:column; gap:5px; } .qnx-cwv-stack-note b{ color:#0758d8; font-size:9px; letter-spacing:.13em; } .qnx-cwv-stack-note span{ color:#5d6b84; font-size:9px; } .qnx-cwv-note-a{ top:35px; left:-95px; } .qnx-cwv-note-b{ right:-105px; top:175px; } .qnx-cwv-note-c{ left:-65px; bottom:35px; } .qnx-cwv-improve-list{ border-top:1px solid #dbe5f0; } .qnx-cwv-improve-list article{ display:grid; grid-template-columns:45px 1fr; gap:18px; padding:24px 0; border-bottom:1px solid #dbe5f0; } .qnx-cwv-improve-list article>span{ color:#08a8cf; font-size:10px; font-weight:800; } .qnx-cwv-improve-list h3{ margin:0 0 7px; color:#0d1730; font-size:17px; } .qnx-cwv-improve-list p{ margin:0; color:#5d6b84; font-size:13px; line-height:1.7; } .qnx-cwv-experience{ padding:100px 7vw; background: linear-gradient(135deg,#0758d8 0%,#062d7a 72%); } .qnx-cwv-experience-grid{ position:absolute; inset:0; opacity:.12; background-image: linear-gradient(rgba(255,255,255,.7) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.7) 1px,transparent 1px); background-size:60px 60px; } .qnx-cwv-experience-inner{ max-width:1280px; margin:auto; position:relative; z-index:2; display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center; } .qnx-cwv-experience-copy>span{ color:#b7e51c; } .qnx-cwv-experience-copy h2{ margin:17px 0; color:#fff; font-size:clamp(38px,4.5vw,62px); line-height:1; letter-spacing:-.045em; } .qnx-cwv-experience-copy h2 strong{ color:#b7e51c; } .qnx-cwv-experience-copy p{ max-width:560px; margin:0; color:rgba(255,255,255,.7); font-size:15px; line-height:1.85; } .qnx-cwv-experience-btn, .qnx-cwv-final-btn{ display:inline-flex; align-items:center; justify-content:space-between; gap:25px; margin-top:30px; padding:15px 16px 15px 21px; min-width:245px; text-decoration:none; color:#0d1730; background:#fff; font-size:12px; font-weight:800; transition:.3s ease; } .qnx-cwv-experience-btn b, .qnx-cwv-final-btn b{ width:28px; height:28px; display:grid; place-items:center; color:#fff; background:#0758d8; } .qnx-cwv-experience-btn:hover, .qnx-cwv-final-btn:hover{ transform:translateY(-3px); } .qnx-cwv-experience-panel{ padding:35px; background:rgba(13,23,48,.65); border:1px solid rgba(255,255,255,.12); } .qnx-cwv-experience-row{ display:grid; grid-template-columns:70px 1fr 80px; align-items:center; gap:18px; margin-bottom:28px; } .qnx-cwv-experience-row>span{ color:rgba(255,255,255,.5); font-size:9px; letter-spacing:.13em; } .qnx-cwv-experience-row>div{ height:8px; background:rgba(255,255,255,.08); } .qnx-cwv-experience-row i{ display:block; height:100%; background:linear-gradient(90deg,#0758d8,#08a8cf,#79c91c); } .qnx-cwv-experience-row b{ color:#79c91c; font-size:8px; text-align:right; letter-spacing:.1em; } .qnx-cwv-panel-foot{ margin-top:38px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; } .qnx-cwv-panel-foot span{ color:rgba(255,255,255,.35); font-size:8px; letter-spacing:.14em; } .qnx-cwv-panel-foot strong{ color:#b7e51c; font-size:9px; } .qnx-cwv-final{ min-height:450px; padding:90px 7vw; display:grid; place-items:center; background:#fff; } .qnx-cwv-final-lines{ position:absolute; inset:0; opacity:.5; background: linear-gradient(90deg,transparent 49.8%,#e7edf5 50%,transparent 50.2%); } .qnx-cwv-final-content{ max-width:760px; position:relative; z-index:2; text-align:center; } .qnx-cwv-final-content>span{ color:#0758d8; } .qnx-cwv-final-content h2{ margin:17px 0; color:#0d1730; font-size:clamp(45px,5.5vw,75px); line-height:.95; letter-spacing:-.05em; } .qnx-cwv-final-content h2 strong{ color:#0758d8; } .qnx-cwv-final-content p{ max-width:600px; margin:0 auto; color:#5d6b84; font-size:15px; line-height:1.8; } .qnx-cwv-final-btn{ background:#0758d8; color:#fff; } .qnx-cwv-final-btn b{ background:#b7e51c; color:#0d1730; } @media(max-width:1050px){ .qnx-cwv-intro-inner, .qnx-cwv-diagnostics-inner, .qnx-cwv-experience-inner{ grid-template-columns:1fr; } .qnx-cwv-intro-copy{ max-width:750px; } .qnx-cwv-lab{ max-width:850px; width:100%; } .qnx-cwv-diagnostics-copy{ max-width:750px; } .qnx-cwv-metric-board{ grid-template-columns:1fr; } .qnx-cwv-metric:not(:last-child){ border-right:0; border-bottom:1px solid #dce6f2; } .qnx-cwv-metric{ min-height:430px; } .qnx-cwv-improve-layout{ grid-template-columns:1fr; } .qnx-cwv-browser-stack{ max-width:600px; } } @media(max-width:700px){ .qnx-cwv-intro, .qnx-cwv-understand, .qnx-cwv-diagnostics, .qnx-cwv-improve, .qnx-cwv-experience, .qnx-cwv-final{ padding-left:5vw; padding-right:5vw; } .qnx-cwv-intro{ padding-top:70px; padding-bottom:75px; } .qnx-cwv-lab{ padding:18px; } .qnx-cwv-live-signals{ gap:6px; } .qnx-cwv-live-item{ padding:11px; } .qnx-cwv-live-item strong{ font-size:16px; } .qnx-cwv-metric{ padding:25px; } .qnx-cwv-diagnostic-screen{ padding:17px; } .qnx-cwv-timeline{ padding-left:5px; padding-right:5px; } .qnx-cwv-time-labels{ margin-left:55px; } .qnx-cwv-timeline-row{ grid-template-columns:45px 1fr 55px; gap:9px; } .qnx-cwv-browser-stack{ width:80%; } .qnx-cwv-stack-note{ transform:scale(.82); } .qnx-cwv-note-a{ left:-90px; } .qnx-cwv-note-b{ right:-95px; } .qnx-cwv-note-c{ left:-75px; } .qnx-cwv-experience-panel{ padding:23px 17px; } } @media(max-width:520px){ .qnx-cwv-intro-copy h2{ font-size:44px; } .qnx-cwv-live-signals{ grid-template-columns:1fr; } .qnx-cwv-page{ min-height:205px; } .qnx-cwv-metric-visual{ height:190px; } .qnx-cwv-browser-stack{ width:100%; } .qnx-cwv-stack-note{ display:none; } .qnx-cwv-improve-visual{ min-height:360px; } .qnx-cwv-experience-row{ grid-template-columns:55px 1fr; } .qnx-cwv-experience-row b{ display:none; } .qnx-cwv-experience-btn, .qnx-cwv-final-btn{ width:100%; min-width:0; } .qnx-cwv-final-content h2{ font-size:46px; } } /* ========================================================= QNIX DIGITAL — WEBSITE MAINTENANCE ========================================================= */ .qnx-maint-intro, .qnx-maint-care, .qnx-maint-dashboard, .qnx-maint-protection, .qnx-maint-console, .qnx-maint-final{ position:relative; overflow:hidden; font-family:inherit; } .qnx-maint-intro{ padding:95px 6vw 105px; background:#f5f9ff; } .qnx-maint-intro-bg{ position:absolute; inset:0; opacity:.42; background: linear-gradient(90deg,transparent 0 49%,#e2ebf5 49.1% 49.2%,transparent 49.3%), linear-gradient(#e2ebf5 1px,transparent 1px); background-size:100% 100%,100% 65px; } .qnx-maint-intro-inner{ max-width:1320px; margin:auto; position:relative; z-index:2; display:grid; grid-template-columns:.82fr 1.18fr; gap:75px; align-items:center; } .qnx-maint-copy{ max-width:600px; } .qnx-maint-kicker, .qnx-maint-care-head>span, .qnx-maint-dashboard-copy>span, .qnx-maint-protection-head>span, .qnx-maint-console-copy>span, .qnx-maint-final-content>span{ display:inline-block; color:#0758d8; font-size:11px; font-weight:800; letter-spacing:.2em; } .qnx-maint-copy h2{ margin:18px 0 22px; color:#0d1730; font-size:clamp(44px,5vw,73px); line-height:.96; letter-spacing:-.05em; } .qnx-maint-copy h2 strong{ color:#0758d8; } .qnx-maint-copy>p{ margin:0; max-width:560px; color:#5d6b84; font-size:16px; line-height:1.85; } .qnx-maint-status-line{ margin-top:30px; display:flex; align-items:center; gap:22px; } .qnx-maint-status-line span{ display:flex; align-items:center; gap:8px; color:#0d1730; font-size:10px; font-weight:800; letter-spacing:.12em; } .qnx-maint-status-line i{ width:8px; height:8px; border-radius:50%; background:#79c91c; box-shadow:0 0 13px rgba(121,201,28,.65); } .qnx-maint-status-line b{ color:#16b98a; font-size:9px; letter-spacing:.14em; } .qnx-maint-control{ position:relative; padding:28px; background:#0d1730; border:1px solid rgba(255,255,255,.08); box-shadow:0 30px 75px rgba(7,45,122,.15); } .qnx-maint-control:before{ content:""; position:absolute; inset:0; opacity:.35; background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:40px 40px; } .qnx-maint-control-head{ position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.09); } .qnx-maint-control-head div{ display:flex; flex-direction:column; gap:6px; } .qnx-maint-control-head small{ color:rgba(255,255,255,.4); font-size:8px; letter-spacing:.18em; } .qnx-maint-control-head strong{ color:#fff; font-size:13px; letter-spacing:.05em; } .qnx-maint-control-head>span{ color:#79c91c; font-size:9px; letter-spacing:.14em; } .qnx-maint-control-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:30px 0; } .qnx-maint-health{ min-height:265px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.025); } .qnx-maint-health-ring{ width:175px; height:175px; border-radius:50%; display:grid; place-items:center; background: conic-gradient(#79c91c 0 87%,rgba(255,255,255,.07) 87% 100%); position:relative; box-shadow:0 0 40px rgba(121,201,28,.08); } .qnx-maint-health-ring:before{ content:""; position:absolute; inset:13px; border-radius:50%; background:#0d1730; } .qnx-maint-health-ring>div{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:6px; } .qnx-maint-health-ring small{ color:rgba(255,255,255,.4); font-size:8px; letter-spacing:.15em; } .qnx-maint-health-ring strong{ color:#79c91c; font-size:15px; letter-spacing:.07em; } .qnx-maint-mini-status{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .qnx-maint-mini-status div{ padding:17px; display:flex; flex-direction:column; justify-content:space-between; min-height:120px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.07); } .qnx-maint-mini-status span{ color:rgba(255,255,255,.38); font-size:8px; letter-spacing:.12em; } .qnx-maint-mini-status b{ color:#fff; font-size:10px; } .qnx-maint-mini-status div:nth-child(2) b, .qnx-maint-mini-status div:nth-child(4) b{ color:#79c91c; } .qnx-maint-control-foot{ position:relative; z-index:2; padding-top:17px; border-top:1px solid rgba(255,255,255,.09); display:flex; justify-content:space-between; } .qnx-maint-control-foot span{ color:rgba(255,255,255,.35); font-size:8px; letter-spacing:.14em; } .qnx-maint-control-foot b{ color:#08a8cf; font-size:9px; letter-spacing:.12em; } .qnx-maint-care{ padding:105px 6vw; background:#fff; } .qnx-maint-care-head{ max-width:720px; margin:0 auto 60px; text-align:center; } .qnx-maint-care-head h2, .qnx-maint-protection-head h2{ margin:16px 0; color:#0d1730; font-size:clamp(40px,4.5vw,62px); line-height:1; letter-spacing:-.045em; } .qnx-maint-care-head p{ margin:0; color:#5d6b84; font-size:15px; line-height:1.8; } .qnx-maint-care-board{ max-width:1250px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #dce6f2; border-bottom:1px solid #dce6f2; } .qnx-maint-care-board article{ min-height:390px; padding:30px; position:relative; } .qnx-maint-care-board article:not(:last-child){ border-right:1px solid #dce6f2; } .qnx-maint-care-icon{ width:76px; height:76px; margin-bottom:35px; position:relative; border:1px solid #dce6f2; background:#f5f9ff; } .qnx-maint-icon-monitor{ padding:18px; } .qnx-maint-icon-monitor i{ display:block; height:5px; margin-bottom:7px; background:#0758d8; } .qnx-maint-icon-monitor i:nth-child(2){ width:75%; background:#08a8cf; } .qnx-maint-icon-monitor i:nth-child(3){ width:50%; background:#79c91c; } .qnx-maint-icon-update{ display:flex; align-items:center; justify-content:center; gap:8px; } .qnx-maint-icon-update i{ width:15px; height:34px; border:2px solid #0758d8; } .qnx-maint-icon-update i:last-child{ height:20px; border-color:#08a8cf; } .qnx-maint-icon-backup{ display:grid; place-items:center; } .qnx-maint-icon-backup i{ width:34px; height:38px; border:2px solid #0758d8; position:relative; } .qnx-maint-icon-backup i:after{ content:""; position:absolute; left:7px; right:7px; top:10px; height:3px; background:#79c91c; box-shadow:0 8px #08a8cf; } .qnx-maint-icon-fix{ display:flex; align-items:center; justify-content:center; gap:5px; } .qnx-maint-icon-fix i{ width:6px; height:34px; background:#0758d8; } .qnx-maint-icon-fix i:nth-child(2){ height:46px; background:#08a8cf; } .qnx-maint-icon-fix i:nth-child(3){ height:23px; background:#79c91c; } .qnx-maint-care-board article>span{ color:#b1bfce; font-size:10px; font-weight:800; } .qnx-maint-care-board h3{ margin:12px 0 9px; color:#0d1730; font-size:24px; } .qnx-maint-care-board p{ margin:0; color:#5d6b84; font-size:13px; line-height:1.75; } .qnx-maint-dashboard{ padding:105px 7vw; background:#f4f8ff; } .qnx-maint-dashboard-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center; } .qnx-maint-dashboard-copy>span{ color:#0758d8; } .qnx-maint-dashboard-copy h2{ margin:16px 0 18px; color:#0d1730; font-size:clamp(40px,4.5vw,62px); line-height:1; letter-spacing:-.045em; } .qnx-maint-dashboard-copy h2 strong{ color:#0758d8; } .qnx-maint-dashboard-copy>p{ max-width:530px; margin:0; color:#5d6b84; font-size:15px; line-height:1.8; } .qnx-maint-task-list{ margin-top:35px; border-top:1px solid #dbe5f0; } .qnx-maint-task-list div{ display:grid; grid-template-columns:75px 1fr auto; align-items:center; gap:12px; padding:17px 0; border-bottom:1px solid #dbe5f0; } .qnx-maint-task-list b{ color:#0758d8; font-size:8px; letter-spacing:.13em; } .qnx-maint-task-list span{ color:#0d1730; font-size:12px; } .qnx-maint-task-list i{ color:#16b98a; font-size:8px; letter-spacing:.12em; font-style:normal; font-weight:800; } .qnx-maint-calendar{ padding:28px; background:#fff; border:1px solid #dce6f2; box-shadow:0 25px 60px rgba(7,88,216,.08); } .qnx-maint-calendar-top{ display:flex; justify-content:space-between; padding-bottom:20px; border-bottom:1px solid #e3eaf4; } .qnx-maint-calendar-top span, .qnx-maint-calendar-top b{ font-size:9px; letter-spacing:.14em; } .qnx-maint-calendar-top span{ color:#5d6b84; } .qnx-maint-calendar-top b{ color:#0758d8; } .qnx-maint-calendar-grid{ margin-top:25px; display:grid; grid-template-columns:repeat(5,1fr); gap:7px; } .qnx-maint-day{ min-height:65px; position:relative; border:1px solid #e5ebf3; background:#f8fbff; } .qnx-maint-day-head{ min-height:35px; display:grid; place-items:center; border:0; background:transparent; color:#9aa8b9; font-size:8px; font-weight:800; letter-spacing:.1em; } .qnx-maint-day>i{ width:8px; height:8px; border-radius:50%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#d5dfeb; } .qnx-maint-dot-blue{background:#0758d8!important} .qnx-maint-dot-cyan{background:#08a8cf!important} .qnx-maint-dot-green{background:#79c91c!important} .qnx-maint-calendar-events{ margin-top:25px; padding-top:20px; border-top:1px solid #e3eaf4; display:flex; flex-wrap:wrap; gap:18px; } .qnx-maint-calendar-events div{ display:flex; align-items:center; gap:7px; } .qnx-maint-calendar-events span{ width:7px; height:7px; border-radius:50%; } .qnx-maint-calendar-events b{ color:#5d6b84; font-size:9px; } .qnx-maint-event-blue{background:#0758d8} .qnx-maint-event-cyan{background:#08a8cf} .qnx-maint-event-green{background:#79c91c} .qnx-maint-protection{ padding:105px 6vw 115px; background:#fff; } .qnx-maint-protection-head{ max-width:1250px; margin:auto; } .qnx-maint-protection-head>span{ color:#0758d8; } .qnx-maint-protection-head h2 strong{ color:#08a8cf; } .qnx-maint-response{ max-width:1250px; margin:70px auto 0; display:grid; grid-template-columns:repeat(4,1fr); position:relative; } .qnx-maint-response-line{ position:absolute; left:7%; right:7%; top:42px; height:1px; background:#d3dfec; } .qnx-maint-response article{ padding:0 28px; position:relative; } .qnx-maint-response article:not(:last-child){ border-right:1px solid #dfe7f1; } .qnx-maint-response-node{ width:84px; height:84px; position:relative; display:grid; place-items:center; margin-bottom:30px; background:#f4f8ff; border:1px solid #dbe6f2; } .qnx-maint-response-node span{ position:absolute; top:7px; right:8px; color:#aebccc; font-size:8px; font-weight:800; } .qnx-maint-response-node i{ width:17px; height:17px; border-radius:50%; background:#0758d8; box-shadow:0 0 0 7px rgba(7,88,216,.08); } .qnx-maint-response article:nth-of-type(2) .qnx-maint-response-node i{ background:#08a8cf; } .qnx-maint-response article:nth-of-type(3) .qnx-maint-response-node i{ background:#16b98a; } .qnx-maint-response article:nth-of-type(4) .qnx-maint-response-node i{ background:#79c91c; } .qnx-maint-response article small{ color:#0758d8; font-size:8px; font-weight:800; letter-spacing:.16em; } .qnx-maint-response article h3{ margin:10px 0 8px; color:#0d1730; font-size:20px; } .qnx-maint-response article p{ margin:0; color:#5d6b84; font-size:12px; line-height:1.7; } .qnx-maint-console{ padding:100px 7vw; background: linear-gradient(135deg,#062d7a,#0758d8 70%,#08a8cf); } .qnx-maint-console-grid{ position:absolute; inset:0; opacity:.12; background-image: linear-gradient(rgba(255,255,255,.8) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.8) 1px,transparent 1px); background-size:58px 58px; } .qnx-maint-console-inner{ max-width:1280px; margin:auto; position:relative; z-index:2; display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center; } .qnx-maint-console-copy>span{ color:#b7e51c; } .qnx-maint-console-copy h2{ margin:16px 0 18px; color:#fff; font-size:clamp(40px,4.5vw,62px); line-height:1; letter-spacing:-.045em; } .qnx-maint-console-copy h2 strong{ color:#b7e51c; } .qnx-maint-console-copy p{ max-width:540px; margin:0; color:rgba(255,255,255,.7); font-size:15px; line-height:1.85; } .qnx-maint-console-btn, .qnx-maint-final-btn{ display:inline-flex; align-items:center; justify-content:space-between; gap:25px; min-width:240px; margin-top:30px; padding:15px 16px 15px 21px; text-decoration:none; background:#fff; color:#0d1730; font-size:12px; font-weight:800; transition:.3s ease; } .qnx-maint-console-btn b, .qnx-maint-final-btn b{ width:28px; height:28px; display:grid; place-items:center; background:#0758d8; color:#fff; } .qnx-maint-console-btn:hover, .qnx-maint-final-btn:hover{ transform:translateY(-3px); } .qnx-maint-console-screen{ padding:28px; background:rgba(13,23,48,.72); border:1px solid rgba(255,255,255,.13); box-shadow:0 30px 70px rgba(0,0,0,.18); } .qnx-maint-console-head{ display:flex; justify-content:space-between; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.1); } .qnx-maint-console-head span{ color:rgba(255,255,255,.4); font-size:8px; letter-spacing:.15em; } .qnx-maint-console-head b{ color:#79c91c; font-size:8px; letter-spacing:.14em; } .qnx-maint-console-row{ display:flex; align-items:center; justify-content:space-between; padding:21px 0; border-bottom:1px solid rgba(255,255,255,.08); } .qnx-maint-console-row div{ display:flex; flex-direction:column; gap:7px; } .qnx-maint-console-row small{ color:rgba(255,255,255,.35); font-size:8px; letter-spacing:.14em; } .qnx-maint-console-row strong{ color:#fff; font-size:12px; letter-spacing:.04em; } .qnx-maint-check{ width:22px; height:22px; border-radius:50%; position:relative; background:rgba(121,201,28,.12); border:1px solid rgba(121,201,28,.35); } .qnx-maint-check:after{ content:""; position:absolute; width:7px; height:4px; left:6px; top:7px; border-left:2px solid #79c91c; border-bottom:2px solid #79c91c; transform:rotate(-45deg); } .qnx-maint-console-foot{ padding-top:20px; display:flex; justify-content:space-between; } .qnx-maint-console-foot span{ color:rgba(255,255,255,.35); font-size:8px; letter-spacing:.14em; } .qnx-maint-console-foot strong{ color:#b7e51c; font-size:9px; } .qnx-maint-final{ min-height:450px; padding:90px 7vw; display:grid; place-items:center; background:#f4f8ff; } .qnx-maint-final-shape{ position:absolute; width:560px; height:560px; right:-190px; top:-240px; border-radius:50%; border:1px solid #d4e1f0; } .qnx-maint-final-shape:after{ content:""; position:absolute; inset:70px; border-radius:50%; border:1px solid #e0e8f2; } .qnx-maint-final-content{ max-width:760px; position:relative; z-index:2; text-align:center; } .qnx-maint-final-content>span{ color:#0758d8; } .qnx-maint-final-content h2{ margin:17px 0; color:#0d1730; font-size:clamp(45px,5.5vw,75px); line-height:.95; letter-spacing:-.05em; } .qnx-maint-final-content h2 strong{ color:#0758d8; } .qnx-maint-final-content p{ max-width:590px; margin:0 auto; color:#5d6b84; font-size:15px; line-height:1.8; } .qnx-maint-final-btn{ background:#0758d8; color:#fff; } .qnx-maint-final-btn b{ background:#b7e51c; color:#0d1730; } @media(max-width:1050px){ .qnx-maint-intro-inner, .qnx-maint-dashboard-inner, .qnx-maint-console-inner{ grid-template-columns:1fr; } .qnx-maint-copy, .qnx-maint-dashboard-copy, .qnx-maint-console-copy{ max-width:750px; } .qnx-maint-care-board{ grid-template-columns:1fr 1fr; } .qnx-maint-care-board article:nth-child(2){ border-right:0; } .qnx-maint-care-board article:nth-child(-n+2){ border-bottom:1px solid #dce6f2; } .qnx-maint-response{ grid-template-columns:1fr 1fr; gap:40px 0; } .qnx-maint-response-line{ display:none; } .qnx-maint-response article:nth-child(2){ border-right:0; } .qnx-maint-response article:nth-child(-n+2){ border-bottom:1px solid #dfe7f1; padding-bottom:35px; } } @media(max-width:700px){ .qnx-maint-intro, .qnx-maint-care, .qnx-maint-dashboard, .qnx-maint-protection, .qnx-maint-console, .qnx-maint-final{ padding-left:5vw; padding-right:5vw; } .qnx-maint-intro{ padding-top:70px; padding-bottom:75px; } .qnx-maint-control{ padding:18px; } .qnx-maint-control-grid{ grid-template-columns:1fr; } .qnx-maint-health{ min-height:220px; } .qnx-maint-care-board{ grid-template-columns:1fr; } .qnx-maint-care-board article{ min-height:320px; border-right:0!important; border-bottom:1px solid #dce6f2; } .qnx-maint-care-board article:last-child{ border-bottom:0; } .qnx-maint-response{ grid-template-columns:1fr; } .qnx-maint-response article{ border-right:0!important; border-bottom:1px solid #dfe7f1; padding-bottom:30px; } .qnx-maint-response article:last-child{ border-bottom:0; } .qnx-maint-calendar{ padding:18px; } .qnx-maint-day{ min-height:50px; } .qnx-maint-calendar-events{ flex-direction:column; gap:10px; } .qnx-maint-console-screen{ padding:19px; } .qnx-maint-console-btn, .qnx-maint-final-btn{ width:100%; min-width:0; } } @media(max-width:500px){ .qnx-maint-copy h2{ font-size:44px; } .qnx-maint-mini-status{ grid-template-columns:1fr 1fr; } .qnx-maint-task-list div{ grid-template-columns:65px 1fr; } .qnx-maint-task-list i{ display:none; } .qnx-maint-final-content h2{ font-size:46px; } } /* ========================================================= QNIX DIGITAL — WEBSITE SECURITY ========================================================= */ .qnx-sec-intro, .qnx-sec-layers, .qnx-sec-surface, .qnx-sec-access, .qnx-sec-foundation, .qnx-sec-response, .qnx-sec-final{ position:relative; overflow:hidden; } .qnx-sec-intro{ background:#f4f8ff; padding:92px 7%; } .qnx-sec-intro-grid{ max-width:1320px; margin:0 auto; display:grid; grid-template-columns:.88fr 1.12fr; gap:70px; align-items:center; } .qnx-sec-intro-copy{ position:relative; z-index:3; } .qnx-sec-kicker{ display:inline-flex; align-items:center; gap:10px; margin-bottom:22px; font-size:11px; line-height:1; letter-spacing:2.4px; font-weight:800; color:#0758d8; } .qnx-sec-kicker:before{ content:""; width:27px; height:2px; background:#79c91c; } .qnx-sec-intro h2, .qnx-sec-section-head h2, .qnx-sec-access-head h2, .qnx-sec-surface-copy h2, .qnx-sec-foundation-copy h2, .qnx-sec-response-copy h2, .qnx-sec-final h2{ margin:0; color:#0d1730; font-size:clamp(40px,4.7vw,72px); line-height:.98; letter-spacing:-2.8px; font-weight:400; } .qnx-sec-intro h2 strong, .qnx-sec-section-head h2 strong, .qnx-sec-access-head h2 strong, .qnx-sec-surface-copy h2 strong, .qnx-sec-foundation-copy h2 strong, .qnx-sec-response-copy h2 strong, .qnx-sec-final h2 strong{ color:#0758d8; font-weight:800; } .qnx-sec-intro-copy > p{ max-width:590px; margin:28px 0 0; color:#5d6b84; font-size:17px; line-height:1.75; } .qnx-sec-intro-points{ display:flex; flex-wrap:wrap; gap:9px; margin:27px 0 32px; } .qnx-sec-intro-points span{ padding:9px 13px; border:1px solid #d7e3f2; background:#fff; color:#0d1730; font-size:11px; font-weight:800; letter-spacing:.6px; } .qnx-sec-primary-btn, .qnx-sec-outline-btn, .qnx-sec-final-btn{ display:inline-flex; align-items:center; justify-content:space-between; gap:30px; min-width:205px; padding:14px 16px 14px 20px; text-decoration:none; font-size:13px; font-weight:800; color:#fff; background:#0758d8; border:1px solid #0758d8; transition:.3s ease; } .qnx-sec-primary-btn b, .qnx-sec-outline-btn b, .qnx-sec-final-btn b{ width:31px; height:31px; display:grid; place-items:center; background:#b7e51c; color:#0d1730; font-size:16px; } .qnx-sec-primary-btn:hover{ transform:translateY(-3px); background:#062d7a; border-color:#062d7a; } .qnx-sec-perimeter{ min-height:535px; position:relative; background:#062d7a; overflow:hidden; border:1px solid rgba(8,168,207,.28); box-shadow:0 35px 80px rgba(6,45,122,.20); transform-style:preserve-3d; } .qnx-sec-perimeter:before{ content:""; position:absolute; inset:0; background: linear-gradient(rgba(8,168,207,.08) 1px,transparent 1px), linear-gradient(90deg,rgba(8,168,207,.08) 1px,transparent 1px); background-size:44px 44px; } .qnx-sec-perimeter:after{ content:""; position:absolute; width:440px; height:440px; top:-160px; right:-110px; background:radial-gradient(circle,rgba(8,168,207,.22),transparent 68%); } .qnx-sec-defense{ position:absolute; border:1px solid rgba(8,168,207,.35); transform:skewY(-7deg); } .defense-one{ inset:65px 55px 72px 55px; } .defense-two{ inset:92px 82px 99px 82px; border-color:rgba(22,185,138,.42); } .defense-three{ inset:120px 112px 127px 112px; border-color:rgba(183,229,28,.48); } .qnx-sec-site{ position:absolute; left:50%; top:50%; width:390px; max-width:65%; transform:translate(-50%,-50%); background:#fff; box-shadow:0 28px 70px rgba(0,0,0,.25); z-index:5; } .qnx-sec-site-top{ height:42px; display:flex; align-items:center; gap:8px; padding:0 13px; border-bottom:1px solid #e3eaf4; } .qnx-sec-dot{ width:8px; height:8px; border-radius:50%; background:#16b98a; box-shadow:0 0 0 5px rgba(22,185,138,.10); } .qnx-sec-site-url{ flex:1; color:#5d6b84; font-size:10px; font-weight:700; } .qnx-sec-lock{ padding:5px 7px; background:#eaf9f2; color:#16b98a; font-size:8px; font-weight:900; letter-spacing:.6px; } .qnx-sec-site-body{ min-height:245px; padding:30px; } .qnx-sec-site-brand{ color:#0758d8; font-size:10px; font-weight:900; letter-spacing:1.5px; } .qnx-sec-site-line{ width:76%; height:9px; margin-top:23px; background:#e3eaf4; } .qnx-sec-site-line.large{ width:90%; height:22px; margin-top:30px; background:#dbe8fa; } .qnx-sec-site-line.short{ width:53%; margin-top:10px; } .qnx-sec-site-status{ display:inline-flex; align-items:center; gap:8px; margin-top:35px; padding:8px 10px; background:#f4f8ff; color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1px; } .qnx-sec-site-status span{ width:6px; height:6px; background:#79c91c; border-radius:50%; } .qnx-sec-shield{ position:absolute; right:9%; top:12%; width:80px; height:94px; clip-path:polygon(50% 0,91% 15%,84% 69%,50% 100%,16% 69%,9% 15%); display:grid; place-items:center; background:linear-gradient(145deg,#08a8cf,#0758d8); box-shadow:0 15px 35px rgba(8,168,207,.22); z-index:7; } .qnx-sec-shield:after{ content:""; position:absolute; inset:7px; clip-path:inherit; border:1px solid rgba(255,255,255,.42); } .qnx-sec-shield span{ position:relative; z-index:2; color:#fff; font-size:8px; font-weight:900; letter-spacing:1px; } .qnx-sec-signal{ position:absolute; left:7%; bottom:8%; display:flex; align-items:center; gap:9px; color:#fff; font-size:9px; letter-spacing:1.2px; font-weight:800; z-index:8; } .qnx-sec-signal span{ width:8px; height:8px; border-radius:50%; background:#b7e51c; box-shadow:0 0 0 6px rgba(183,229,28,.10),0 0 18px rgba(183,229,28,.7); } .qnx-sec-threat{ position:absolute; z-index:9; display:flex; align-items:center; gap:8px; color:#fff; font-size:8px; font-weight:800; letter-spacing:1px; opacity:.75; } .qnx-sec-threat i{ width:7px; height:7px; border-radius:50%; background:#08a8cf; box-shadow:0 0 14px #08a8cf; } .qnx-sec-threat-a{ left:4%; top:27%; animation:qnxSecThreatA 4s ease-in-out infinite; } .qnx-sec-threat-b{ right:5%; top:48%; animation:qnxSecThreatB 4.7s ease-in-out infinite; } .qnx-sec-threat-c{ left:10%; bottom:23%; animation:qnxSecThreatC 5s ease-in-out infinite; } @keyframes qnxSecThreatA{ 0%,100%{transform:translateX(0);opacity:.45} 50%{transform:translateX(26px);opacity:1} } @keyframes qnxSecThreatB{ 0%,100%{transform:translateX(0);opacity:.45} 50%{transform:translateX(-24px);opacity:1} } @keyframes qnxSecThreatC{ 0%,100%{transform:translateY(0);opacity:.45} 50%{transform:translateY(-18px);opacity:1} } .qnx-sec-layers{ padding:105px 7%; background:#fff; } .qnx-sec-section-head{ max-width:850px; margin:0 auto 65px; text-align:center; } .qnx-sec-section-head p{ max-width:680px; margin:25px auto 0; color:#5d6b84; line-height:1.75; font-size:16px; } .qnx-sec-layer-map{ max-width:1180px; margin:auto; position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid #dce6f3; border-left:1px solid #dce6f3; } .qnx-sec-layer{ position:relative; min-height:245px; padding:34px 38px; display:grid; grid-template-columns:45px 1fr; gap:22px; border-right:1px solid #dce6f3; border-bottom:1px solid #dce6f3; background:#fff; transition:.35s ease; } .qnx-sec-layer:hover{ background:#f4f8ff; box-shadow:inset 4px 0 #0758d8; } .qnx-sec-layer-index{ color:#0758d8; font-size:11px; font-weight:900; letter-spacing:1px; } .qnx-sec-layer span{ color:#08a8cf; font-size:10px; letter-spacing:1.7px; font-weight:900; } .qnx-sec-layer h3{ margin:12px 0 10px; color:#0d1730; font-size:22px; line-height:1.15; } .qnx-sec-layer p{ margin:0; color:#5d6b84; line-height:1.7; font-size:14px; } .qnx-sec-surface{ padding:105px 7%; background:#062d7a; color:#fff; } .qnx-sec-surface:before{ content:""; position:absolute; width:600px; height:600px; right:-250px; top:-250px; border:1px solid rgba(8,168,207,.22); transform:rotate(45deg); } .qnx-sec-surface-inner{ max-width:1240px; margin:auto; display:grid; grid-template-columns:.75fr 1.25fr; gap:85px; align-items:center; } .qnx-sec-surface-copy .qnx-sec-kicker{ color:#b7e51c; } .qnx-sec-surface-copy .qnx-sec-kicker:before{ background:#08a8cf; } .qnx-sec-surface-copy h2{ color:#fff; font-size:clamp(38px,4.3vw,63px); } .qnx-sec-surface-copy h2 strong{ color:#08a8cf; } .qnx-sec-surface-copy p{ margin:27px 0 0; color:rgba(255,255,255,.72); line-height:1.75; font-size:16px; } .qnx-sec-surface-grid{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid rgba(255,255,255,.14); border-left:1px solid rgba(255,255,255,.14); } .qnx-sec-surface-item{ min-height:205px; padding:29px; border-right:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); transition:.35s ease; } .qnx-sec-surface-item:hover{ background:rgba(8,168,207,.08); } .qnx-sec-surface-item span{ display:block; color:#b7e51c; font-size:10px; font-weight:900; margin-bottom:27px; } .qnx-sec-surface-item strong{ display:block; color:#fff; font-size:18px; } .qnx-sec-surface-item p{ margin:10px 0 0; color:rgba(255,255,255,.62); line-height:1.6; font-size:13px; } .qnx-sec-access{ padding:105px 7%; background:#f4f8ff; } .qnx-sec-access-head{ max-width:760px; margin:0 auto 60px; text-align:center; } .qnx-sec-flow{ max-width:1280px; margin:auto; display:grid; grid-template-columns:1fr 35px 1fr 35px 1fr 35px 1fr; align-items:center; } .qnx-sec-flow-step{ min-height:290px; padding:28px; background:#fff; border:1px solid #dce6f3; position:relative; transition:.35s ease; } .qnx-sec-flow-step:hover{ transform:translateY(-7px); box-shadow:0 20px 50px rgba(7,88,216,.10); } .qnx-sec-flow-number{ position:absolute; right:20px; top:18px; color:#d6e4f5; font-size:11px; font-weight:900; } .qnx-sec-flow-icon{ width:52px; height:52px; margin-bottom:42px; position:relative; display:flex; align-items:center; justify-content:center; background:#f4f8ff; border:1px solid #dce6f3; } .request-icon{ gap:4px; } .request-icon i{ width:5px; height:19px; background:#0758d8; } .request-icon i:nth-child(2){ height:29px; background:#08a8cf; } .request-icon i:nth-child(3){ height:14px; background:#79c91c; } .verify-icon i{ width:19px; height:19px; border:2px solid #0758d8; transform:rotate(45deg); } .verify-icon i:after{ content:""; position:absolute; width:7px; height:3px; border-left:2px solid #16b98a; border-bottom:2px solid #16b98a; transform:rotate(-45deg) translate(1px,-2px); } .allow-icon i{ width:23px; height:23px; border:2px solid #16b98a; border-radius:50%; } .allow-icon i:after{ content:""; position:absolute; width:9px; height:4px; border-left:2px solid #16b98a; border-bottom:2px solid #16b98a; transform:rotate(-45deg); } .monitor-icon{ gap:4px; align-items:flex-end; } .monitor-icon i{ width:6px; background:#0758d8; } .monitor-icon i:nth-child(1){height:15px} .monitor-icon i:nth-child(2){height:28px;background:#08a8cf} .monitor-icon i:nth-child(3){height:21px;background:#79c91c} .qnx-sec-flow-step small{ color:#0758d8; font-size:9px; font-weight:900; letter-spacing:1.5px; } .qnx-sec-flow-step h3{ margin:10px 0 9px; color:#0d1730; font-size:19px; } .qnx-sec-flow-step p{ margin:0; color:#5d6b84; font-size:13px; line-height:1.65; } .qnx-sec-flow-connector{ height:1px; background:#9eb8d7; position:relative; } .qnx-sec-flow-connector:after{ content:""; position:absolute; right:0; top:-3px; width:7px; height:7px; border-top:1px solid #0758d8; border-right:1px solid #0758d8; transform:rotate(45deg); } .qnx-sec-foundation{ padding:110px 7%; background:#fff; } .qnx-sec-foundation-wrap{ max-width:1260px; margin:auto; display:grid; grid-template-columns:1.05fr .95fr; gap:80px; align-items:center; } .qnx-sec-foundation-visual{ min-height:500px; position:relative; background:#eaf3ff; border:1px solid #dce6f3; overflow:hidden; } .qnx-sec-foundation-grid{ position:absolute; inset:0; background: linear-gradient(#d8e7f7 1px,transparent 1px), linear-gradient(90deg,#d8e7f7 1px,transparent 1px); background-size:35px 35px; opacity:.7; } .qnx-sec-foundation-browser{ position:absolute; left:12%; top:15%; width:76%; background:#fff; box-shadow:0 28px 60px rgba(17,55,110,.15); } .qnx-sec-browser-bar{ height:36px; display:flex; gap:5px; align-items:center; padding:0 13px; border-bottom:1px solid #e3eaf4; } .qnx-sec-browser-bar span{ width:6px; height:6px; border-radius:50%; background:#b9cce4; } .qnx-sec-browser-content{ padding:34px; min-height:250px; } .qnx-sec-browser-title{ width:72%; height:20px; background:#dce9f8; } .qnx-sec-browser-text{ width:88%; height:8px; margin-top:23px; background:#e9eff6; } .qnx-sec-browser-text.small{ width:63%; margin-top:9px; } .qnx-sec-browser-checks{ display:flex; flex-wrap:wrap; gap:8px; margin-top:42px; } .qnx-sec-browser-checks span{ padding:8px 10px; border:1px solid #dce6f3; color:#0758d8; font-size:8px; font-weight:900; letter-spacing:.8px; } .qnx-sec-foundation-bar{ position:absolute; left:8%; right:8%; bottom:10%; display:flex; align-items:center; justify-content:space-between; padding:14px 17px; background:#062d7a; color:#fff; font-size:9px; letter-spacing:1px; font-weight:900; } .qnx-sec-foundation-bar b{ color:#b7e51c; } .qnx-sec-foundation-copy h2{ font-size:clamp(38px,4vw,60px); } .qnx-sec-foundation-list{ margin-top:38px; border-top:1px solid #dce6f3; } .qnx-sec-foundation-list div{ display:grid; grid-template-columns:150px 1fr; gap:20px; padding:17px 0; border-bottom:1px solid #e3eaf4; } .qnx-sec-foundation-list b{ color:#0758d8; font-size:12px; } .qnx-sec-foundation-list span{ color:#5d6b84; font-size:13px; line-height:1.5; } .qnx-sec-response{ padding:100px 7%; background:#0758d8; color:#fff; } .qnx-sec-response-inner{ max-width:1240px; margin:auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:85px; align-items:center; } .qnx-sec-response-copy .qnx-sec-kicker{ color:#b7e51c; } .qnx-sec-response-copy .qnx-sec-kicker:before{ background:#08a8cf; } .qnx-sec-response-copy h2{ color:#fff; font-size:clamp(38px,4vw,60px); } .qnx-sec-response-copy h2 strong{ color:#b7e51c; } .qnx-sec-response-copy p{ max-width:570px; margin:25px 0 32px; color:rgba(255,255,255,.76); line-height:1.75; } .qnx-sec-outline-btn{ background:transparent; border-color:rgba(255,255,255,.38); } .qnx-sec-outline-btn:hover{ background:#062d7a; border-color:#062d7a; transform:translateY(-3px); } .qnx-sec-response-visual{ position:relative; padding:55px 10px; } .qnx-sec-response-line{ position:absolute; left:30px; right:30px; top:82px; height:1px; background:rgba(255,255,255,.28); } .qnx-sec-response-node{ position:relative; display:grid; grid-template-columns:20px 1fr; gap:4px 12px; margin-bottom:42px; padding-left:0; } .qnx-sec-response-node span{ grid-row:1 / 3; width:13px; height:13px; margin-top:2px; border:2px solid rgba(255,255,255,.45); background:#0758d8; border-radius:50%; z-index:2; } .qnx-sec-response-node.active span{ border-color:#b7e51c; background:#b7e51c; box-shadow:0 0 0 7px rgba(183,229,28,.12); } .qnx-sec-response-node b{ font-size:10px; letter-spacing:1.6px; color:#b7e51c; } .qnx-sec-response-node small{ color:rgba(255,255,255,.65); font-size:12px; } .qnx-sec-final{ padding:105px 7%; background:#f4f8ff; text-align:center; } .qnx-sec-final-glow{ position:absolute; width:550px; height:550px; left:50%; top:50%; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(8,168,207,.10),transparent 67%); } .qnx-sec-final-content{ position:relative; z-index:2; max-width:820px; margin:auto; } .qnx-sec-final h2{ font-size:clamp(40px,5vw,72px); } .qnx-sec-final h2 strong{ color:#0758d8; } .qnx-sec-final p{ max-width:650px; margin:25px auto 32px; color:#5d6b84; line-height:1.75; } .qnx-sec-final-btn{ min-width:215px; } .qnx-sec-final-btn:hover{ transform:translateY(-3px); background:#062d7a; border-color:#062d7a; } .qnx-sec-reveal{ opacity:0; transform:translateY(28px); transition:opacity .75s ease,transform .75s ease; } .qnx-sec-visible{ opacity:1; transform:translateY(0); } @media(max-width:1100px){ .qnx-sec-intro-grid, .qnx-sec-surface-inner, .qnx-sec-foundation-wrap, .qnx-sec-response-inner{ grid-template-columns:1fr; gap:55px; } .qnx-sec-intro{ padding:75px 5%; } .qnx-sec-perimeter{ min-height:500px; } .qnx-sec-flow{ grid-template-columns:1fr 1fr; gap:18px; } .qnx-sec-flow-connector{ display:none; } } @media(max-width:760px){ .qnx-sec-intro, .qnx-sec-layers, .qnx-sec-surface, .qnx-sec-access, .qnx-sec-foundation, .qnx-sec-response, .qnx-sec-final{ padding:70px 5%; } .qnx-sec-intro-grid{ gap:45px; } .qnx-sec-intro h2, .qnx-sec-section-head h2, .qnx-sec-access-head h2, .qnx-sec-surface-copy h2, .qnx-sec-foundation-copy h2, .qnx-sec-response-copy h2, .qnx-sec-final h2{ font-size:39px; letter-spacing:-1.8px; } .qnx-sec-perimeter{ min-height:420px; } .qnx-sec-site{ width:330px; max-width:70%; } .qnx-sec-shield{ transform:scale(.78); transform-origin:top right; } .qnx-sec-threat{ font-size:7px; } .qnx-sec-layer-map, .qnx-sec-surface-grid{ grid-template-columns:1fr; } .qnx-sec-layer{ min-height:auto; padding:27px; } .qnx-sec-flow{ grid-template-columns:1fr; } .qnx-sec-flow-step{ min-height:auto; } .qnx-sec-foundation-visual{ min-height:410px; } .qnx-sec-foundation-list div{ grid-template-columns:1fr; gap:7px; } .qnx-sec-response-visual{ padding:35px 0 10px; } .qnx-sec-response-line{ display:none; } .qnx-sec-response-node{ margin-bottom:27px; } .qnx-sec-primary-btn, .qnx-sec-outline-btn, .qnx-sec-final-btn{ width:100%; max-width:300px; } } @media(max-width:480px){ .qnx-sec-perimeter{ min-height:360px; } .qnx-sec-site{ max-width:73%; } .qnx-sec-site-body{ min-height:205px; padding:22px; } .qnx-sec-site-line.large{ margin-top:23px; } .qnx-sec-site-status{ margin-top:25px; } .qnx-sec-defense{ transform:skewY(-5deg); } .defense-one{ inset:45px 25px 52px; } .defense-two{ inset:70px 48px 77px; } .defense-three{ inset:94px 70px 101px; } .qnx-sec-shield{ right:4%; top:8%; transform:scale(.65); } .qnx-sec-signal{ left:5%; bottom:5%; } .qnx-sec-layer{ grid-template-columns:32px 1fr; gap:13px; } .qnx-sec-surface-item{ min-height:auto; } .qnx-sec-foundation-browser{ left:7%; width:86%; } .qnx-sec-browser-content{ padding:24px; } .qnx-sec-foundation-bar{ left:5%; right:5%; bottom:6%; } } /* ========================================================= QNIX DIGITAL — WEBSITE MIGRATION ========================================================= */ .qnx-mig-intro, .qnx-mig-principles, .qnx-mig-map, .qnx-mig-preserve, .qnx-mig-validation, .qnx-mig-final{ position:relative; overflow:hidden; } .qnx-mig-intro{ padding:92px 7%; background:#fff; } .qnx-mig-intro-wrap{ max-width:1320px; margin:auto; display:grid; grid-template-columns:.86fr 1.14fr; gap:72px; align-items:center; } .qnx-mig-kicker{ display:inline-flex; align-items:center; gap:10px; margin-bottom:21px; color:#0758d8; font-size:10px; line-height:1; letter-spacing:2.5px; font-weight:900; } .qnx-mig-kicker:before{ content:""; width:28px; height:2px; background:#79c91c; } .qnx-mig-intro h2, .qnx-mig-principles-head h2, .qnx-mig-map-copy h2, .qnx-mig-preserve-copy h2, .qnx-mig-validation-copy h2, .qnx-mig-final h2{ margin:0; color:#0d1730; font-size:clamp(40px,4.7vw,71px); line-height:.98; letter-spacing:-3px; font-weight:400; } .qnx-mig-intro h2 strong, .qnx-mig-principles-head h2 strong, .qnx-mig-map-copy h2 strong, .qnx-mig-preserve-copy h2 strong, .qnx-mig-validation-copy h2 strong, .qnx-mig-final h2 strong{ color:#0758d8; font-weight:800; } .qnx-mig-intro-copy > p{ max-width:600px; margin:28px 0 0; color:#5d6b84; font-size:16px; line-height:1.78; } .qnx-mig-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:27px 0 31px; } .qnx-mig-tags span{ padding:9px 12px; border:1px solid #dce6f3; background:#f4f8ff; color:#0d1730; font-size:10px; font-weight:800; } .qnx-mig-primary-btn, .qnx-mig-light-btn, .qnx-mig-final-btn{ display:inline-flex; align-items:center; justify-content:space-between; gap:28px; min-width:210px; padding:14px 15px 14px 20px; background:#0758d8; border:1px solid #0758d8; color:#fff; text-decoration:none; font-size:12px; font-weight:800; transition:.3s ease; } .qnx-mig-primary-btn b, .qnx-mig-light-btn b, .qnx-mig-final-btn b{ width:31px; height:31px; display:grid; place-items:center; background:#b7e51c; color:#0d1730; font-size:16px; } .qnx-mig-primary-btn:hover, .qnx-mig-final-btn:hover{ transform:translateY(-3px); background:#062d7a; border-color:#062d7a; } /* INTRO MIGRATION VISUAL */ .qnx-mig-visual{ min-height:540px; position:relative; background:#f4f8ff; border:1px solid #dce6f3; overflow:hidden; } .qnx-mig-visual:before{ content:""; position:absolute; inset:0; background: linear-gradient(90deg,rgba(7,88,216,.05) 1px,transparent 1px), linear-gradient(rgba(7,88,216,.05) 1px,transparent 1px); background-size:38px 38px; } .qnx-mig-old-server, .qnx-mig-new-server{ position:absolute; top:115px; width:205px; height:255px; background:#fff; border:1px solid #cbdced; box-shadow:0 20px 45px rgba(17,55,110,.12); z-index:3; } .qnx-mig-old-server{ left:6%; } .qnx-mig-new-server{ right:6%; border-color:#9bded1; } .qnx-mig-server-top{ height:43px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid #e3eaf4; } .qnx-mig-server-top span{ color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1px; } .qnx-mig-server-top i{ width:7px; height:7px; border-radius:50%; background:#079ed1; } .qnx-mig-new-server .qnx-mig-server-top i{ background:#79c91c; box-shadow:0 0 0 5px rgba(121,201,28,.10); } .qnx-mig-server-stack{ padding:20px 17px; display:grid; gap:10px; } .qnx-mig-server-stack div{ display:flex; align-items:center; gap:11px; padding:12px 10px; background:#f4f8ff; border:1px solid #e3eaf4; } .qnx-mig-server-stack b{ color:#0d1730; font-size:8px; letter-spacing:.8px; } .mig-folder{ width:17px; height:13px; background:#0758d8; position:relative; } .mig-folder:before{ content:""; position:absolute; top:-3px; left:2px; width:7px; height:4px; background:#087ee7; } .mig-database{ width:17px; height:17px; border-radius:50%; border:2px solid #08a8cf; } .mig-files{ width:15px; height:18px; border:2px solid #16b98a; } .qnx-mig-old-server > small, .qnx-mig-new-server > small{ position:absolute; bottom:14px; left:17px; color:#5d6b84; font-size:7px; letter-spacing:1.3px; font-weight:900; } .qnx-mig-new-screen{ margin:22px 17px; padding:17px; background:#f4f8ff; border:1px solid #dce6f3; } .mig-screen-line{ width:83%; height:7px; margin-bottom:9px; background:#d5e2f1; } .mig-screen-line.large{ width:95%; height:18px; background:#cbdff6; margin-bottom:17px; } .mig-screen-line.short{ width:57%; } .mig-screen-status{ display:inline-flex; align-items:center; gap:6px; margin-top:22px; padding:6px 8px; background:#eaf9f2; color:#16b98a; font-size:7px; font-weight:900; letter-spacing:.8px; } .mig-screen-status span{ width:5px; height:5px; background:#79c91c; border-radius:50%; } .qnx-mig-bridge{ position:absolute; left:21%; right:21%; top:145px; height:200px; z-index:5; } .qnx-mig-bridge-line{ position:absolute; top:50%; left:0; right:0; height:2px; background:#b8cee5; } .qnx-mig-bridge-line:before, .qnx-mig-bridge-line:after{ content:""; position:absolute; top:-5px; width:11px; height:11px; border-top:2px solid #0758d8; border-right:2px solid #0758d8; } .qnx-mig-bridge-line:before{ left:-1px; transform:rotate(-135deg); } .qnx-mig-bridge-line:after{ right:-1px; transform:rotate(45deg); } .qnx-mig-transfer{ position:absolute; display:flex; align-items:center; gap:6px; padding:6px 8px; background:#fff; border:1px solid #dce6f3; box-shadow:0 7px 20px rgba(17,55,110,.08); color:#0758d8; font-size:7px; font-weight:900; letter-spacing:.6px; } .qnx-mig-transfer i{ width:6px; height:6px; border-radius:50%; background:#08a8cf; } .transfer-one{ top:15px; left:20%; animation:qnxMigMoveOne 3.5s ease-in-out infinite; } .transfer-two{ top:82px; left:42%; animation:qnxMigMoveTwo 4s ease-in-out infinite; } .transfer-three{ top:148px; left:63%; animation:qnxMigMoveThree 3.8s ease-in-out infinite; } @keyframes qnxMigMoveOne{ 0%,100%{transform:translateX(-12px)} 50%{transform:translateX(32px)} } @keyframes qnxMigMoveTwo{ 0%,100%{transform:translateX(-25px)} 50%{transform:translateX(28px)} } @keyframes qnxMigMoveThree{ 0%,100%{transform:translateX(-15px)} 50%{transform:translateX(30px)} } .qnx-mig-bridge-label{ position:absolute; top:67px; left:50%; transform:translateX(-50%); padding:10px 13px; background:#062d7a; color:#fff; text-align:center; font-size:7px; line-height:1.5; letter-spacing:1.2px; z-index:4; } .qnx-mig-bridge-label strong{ color:#b7e51c; } .qnx-mig-progress{ position:absolute; left:27%; right:27%; bottom:53px; display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:center; z-index:8; } .qnx-mig-progress span, .qnx-mig-progress b{ color:#5d6b84; font-size:7px; font-weight:900; letter-spacing:1px; } .qnx-mig-progress b{ color:#0758d8; } .qnx-mig-progress > div{ height:4px; background:#d9e5f2; overflow:hidden; } .qnx-mig-progress > div i{ display:block; width:86%; height:100%; background:linear-gradient(90deg,#0758d8,#08a8cf,#79c91c); } /* PRINCIPLES */ .qnx-mig-principles{ padding:105px 7%; background:#f4f8ff; } .qnx-mig-principles-head{ max-width:850px; margin:0 auto 62px; text-align:center; } .qnx-mig-principles-head p{ max-width:670px; margin:25px auto 0; color:#5d6b84; line-height:1.75; } .qnx-mig-principles-grid{ max-width:1180px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #d6e2f0; border-left:1px solid #d6e2f0; } .qnx-mig-principles-grid article{ min-height:320px; padding:32px 28px; background:#fff; border-right:1px solid #d6e2f0; border-bottom:1px solid #d6e2f0; transition:.35s ease; } .qnx-mig-principles-grid article:hover{ transform:translateY(-6px); box-shadow:0 20px 45px rgba(7,88,216,.09); } .qnx-mig-principle-icon{ width:50px; height:50px; margin-bottom:44px; display:flex; align-items:center; justify-content:center; background:#f4f8ff; border:1px solid #dce6f3; } .icon-structure{ gap:4px; } .icon-structure i{ width:6px; height:22px; background:#0758d8; } .icon-structure i:nth-child(2){ height:31px; background:#08a8cf; } .icon-structure i:nth-child(3){ height:15px; background:#79c91c; } .icon-content{ position:relative; } .icon-content i{ position:absolute; width:25px; height:17px; border:2px solid #0758d8; } .icon-content i:nth-child(1){ transform:translate(-5px,-6px); } .icon-content i:nth-child(2){ transform:translate(5px,5px); border-color:#08a8cf; } .icon-content i:nth-child(3){ width:8px; height:8px; border:0; background:#79c91c; transform:translate(11px,9px); } .icon-data i{ width:27px; height:27px; border:2px solid #08a8cf; border-radius:50%; position:relative; } .icon-data i:before, .icon-data i:after{ content:""; position:absolute; background:#08a8cf; } .icon-data i:before{ width:9px; height:2px; left:7px; top:11px; } .icon-data i:after{ width:2px; height:9px; left:11px; top:7px; } .icon-function{ gap:5px; } .icon-function i{ width:20px; height:20px; border:2px solid #0758d8; } .icon-function i:nth-child(2){ margin-top:12px; margin-left:-10px; background:#08a8cf; border-color:#08a8cf; } .qnx-mig-principles-grid article > span{ color:#08a8cf; font-size:9px; font-weight:900; letter-spacing:1.8px; } .qnx-mig-principles-grid h3{ margin:12px 0 11px; color:#0d1730; font-size:19px; line-height:1.2; } .qnx-mig-principles-grid p{ margin:0; color:#5d6b84; font-size:13px; line-height:1.7; } /* MIGRATION MAP */ .qnx-mig-map{ padding:110px 7%; background:#062d7a; color:#fff; } .qnx-mig-map-inner{ max-width:1230px; margin:auto; display:grid; grid-template-columns:.78fr 1.22fr; gap:100px; align-items:start; } .qnx-mig-map-copy .qnx-mig-kicker{ color:#b7e51c; } .qnx-mig-map-copy .qnx-mig-kicker:before{ background:#08a8cf; } .qnx-mig-map-copy h2{ color:#fff; } .qnx-mig-map-copy h2 strong{ color:#08a8cf; } .qnx-mig-map-copy p{ max-width:450px; margin:27px 0 0; color:rgba(255,255,255,.68); line-height:1.75; } .qnx-mig-route{ position:relative; padding:4px 0; } .qnx-mig-route-line{ position:absolute; top:23px; bottom:23px; left:8px; width:1px; background:linear-gradient(#08a8cf,#16b98a,#b7e51c); } .qnx-mig-route-item{ position:relative; min-height:88px; display:grid; grid-template-columns:18px 1fr; gap:24px; padding-bottom:22px; } .route-dot{ width:17px; height:17px; margin-top:1px; background:#062d7a; border:2px solid #4773b7; border-radius:50%; z-index:2; } .qnx-mig-route-item.active .route-dot{ border-color:#b7e51c; background:#b7e51c; box-shadow:0 0 0 7px rgba(183,229,28,.10); } .qnx-mig-route-item small{ display:block; margin-bottom:6px; color:#08a8cf; font-size:8px; letter-spacing:1.4px; font-weight:900; } .qnx-mig-route-item b{ display:block; color:#fff; font-size:16px; letter-spacing:.4px; } .qnx-mig-route-item p{ margin:5px 0 0; color:rgba(255,255,255,.58); font-size:12px; } /* PRESERVE */ .qnx-mig-preserve{ padding:110px 7%; background:#fff; } .qnx-mig-preserve-wrap{ max-width:1280px; margin:auto; display:grid; grid-template-columns:1.1fr .9fr; gap:85px; align-items:center; } .qnx-mig-preserve-visual{ min-height:450px; position:relative; background:#f4f8ff; border:1px solid #dce6f3; } .qnx-mig-browser{ position:absolute; top:88px; width:57%; background:#fff; border:1px solid #d5e2ef; box-shadow:0 20px 45px rgba(17,55,110,.12); } .old-browser{ left:5%; transform:rotate(-3deg); } .new-browser{ right:5%; top:117px; transform:rotate(3deg); z-index:3; border-color:#a9ddcf; } .qnx-mig-browser-bar{ height:38px; display:flex; align-items:center; gap:5px; padding:0 11px; border-bottom:1px solid #e3eaf4; } .qnx-mig-browser-bar > span{ width:6px; height:6px; border-radius:50%; background:#b9cce0; } .qnx-mig-browser-bar b{ margin-left:auto; color:#5d6b84; font-size:7px; letter-spacing:1px; } .qnx-mig-browser-body{ padding:23px; } .mig-block{ height:8px; margin-bottom:9px; background:#e1e9f3; } .mig-block.hero{ height:65px; width:100%; margin-bottom:19px; background:#d6e7fb; } .mig-block.hero.new{ background:linear-gradient(135deg,#0758d8,#08a8cf); } .mig-block.text{ width:82%; } .mig-block.text.short{ width:57%; } .mig-browser-columns{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:25px; } .mig-browser-columns i{ height:42px; background:#eef4fa; } .new-browser .mig-browser-columns i:nth-child(2){ background:#dff6ef; } .qnx-mig-arrow{ position:absolute; left:50%; top:43%; transform:translate(-50%,-50%); width:78px; height:78px; display:grid; place-items:center; background:#062d7a; color:#fff; z-index:8; box-shadow:0 12px 30px rgba(6,45,122,.22); } .qnx-mig-arrow span{ position:absolute; top:-18px; color:#0758d8; font-size:7px; letter-spacing:1.4px; font-weight:900; } .qnx-mig-arrow b{ font-size:27px; color:#b7e51c; } .qnx-mig-preserve-copy h2{ font-size:clamp(38px,4vw,59px); } .qnx-mig-preserve-list{ margin-top:38px; border-top:1px solid #dce6f3; } .qnx-mig-preserve-list div{ display:grid; grid-template-columns:30px 1fr; gap:7px 13px; padding:16px 0; border-bottom:1px solid #e3eaf4; } .qnx-mig-preserve-list span{ grid-row:1 / 3; color:#0758d8; font-size:9px; font-weight:900; } .qnx-mig-preserve-list b{ color:#0d1730; font-size:13px; } .qnx-mig-preserve-list p{ margin:0; color:#5d6b84; font-size:12px; line-height:1.5; } /* VALIDATION */ .qnx-mig-validation{ padding:105px 7%; background:#0758d8; color:#fff; } .qnx-mig-validation-inner{ max-width:1240px; margin:auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:85px; align-items:center; } .qnx-mig-validation-copy .qnx-mig-kicker{ color:#b7e51c; } .qnx-mig-validation-copy .qnx-mig-kicker:before{ background:#08a8cf; } .qnx-mig-validation-copy h2{ color:#fff; font-size:clamp(38px,4vw,60px); } .qnx-mig-validation-copy h2 strong{ color:#b7e51c; } .qnx-mig-validation-copy p{ max-width:550px; margin:26px 0 32px; color:rgba(255,255,255,.74); line-height:1.75; } .qnx-mig-light-btn{ background:transparent; border-color:rgba(255,255,255,.35); } .qnx-mig-light-btn:hover{ background:#062d7a; border-color:#062d7a; transform:translateY(-3px); } .qnx-mig-checkboard{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid rgba(255,255,255,.17); border-left:1px solid rgba(255,255,255,.17); } .qnx-mig-check{ min-height:145px; padding:25px; display:grid; grid-template-columns:15px 1fr; gap:7px 12px; align-content:center; border-right:1px solid rgba(255,255,255,.17); border-bottom:1px solid rgba(255,255,255,.17); } .qnx-mig-check > span{ grid-row:1 / 3; width:12px; height:12px; border:1px solid #b7e51c; position:relative; } .qnx-mig-check > span:after{ content:""; position:absolute; width:6px; height:3px; left:2px; top:2px; border-left:1px solid #b7e51c; border-bottom:1px solid #b7e51c; transform:rotate(-45deg); } .qnx-mig-check b{ color:#fff; font-size:13px; } .qnx-mig-check small{ color:rgba(255,255,255,.48); font-size:7px; letter-spacing:1.3px; font-weight:900; } /* FINAL */ .qnx-mig-final{ padding:108px 7%; background:#f4f8ff; text-align:center; } .qnx-mig-final-shape{ position:absolute; width:540px; height:540px; left:-240px; top:-250px; border:1px solid rgba(7,88,216,.10); transform:rotate(45deg); } .qnx-mig-final-content{ position:relative; z-index:2; max-width:900px; margin:auto; } .qnx-mig-final h2{ font-size:clamp(40px,4.8vw,70px); } .qnx-mig-final p{ max-width:680px; margin:25px auto 32px; color:#5d6b84; line-height:1.75; } .qnx-mig-reveal{ opacity:0; transform:translateY(28px); transition:opacity .75s ease,transform .75s ease; } .qnx-mig-visible{ opacity:1; transform:translateY(0); } @media(max-width:1100px){ .qnx-mig-intro-wrap, .qnx-mig-map-inner, .qnx-mig-preserve-wrap, .qnx-mig-validation-inner{ grid-template-columns:1fr; gap:55px; } .qnx-mig-principles-grid{ grid-template-columns:1fr 1fr; } .qnx-mig-map-inner{ gap:60px; } } @media(max-width:760px){ .qnx-mig-intro, .qnx-mig-principles, .qnx-mig-map, .qnx-mig-preserve, .qnx-mig-validation, .qnx-mig-final{ padding:70px 5%; } .qnx-mig-intro h2, .qnx-mig-principles-head h2, .qnx-mig-map-copy h2, .qnx-mig-preserve-copy h2, .qnx-mig-validation-copy h2, .qnx-mig-final h2{ font-size:39px; letter-spacing:-1.8px; } .qnx-mig-visual{ min-height:450px; } .qnx-mig-old-server, .qnx-mig-new-server{ width:160px; height:225px; } .qnx-mig-old-server{ left:3%; } .qnx-mig-new-server{ right:3%; } .qnx-mig-bridge{ left:16%; right:16%; } .qnx-mig-server-stack{ padding:15px 11px; } .qnx-mig-server-stack div{ padding:9px 7px; } .qnx-mig-progress{ left:18%; right:18%; } .qnx-mig-principles-grid{ grid-template-columns:1fr; } .qnx-mig-principles-grid article{ min-height:auto; } .qnx-mig-preserve-visual{ min-height:390px; } .qnx-mig-browser{ width:65%; } .old-browser{ left:2%; } .new-browser{ right:2%; } .qnx-mig-arrow{ width:60px; height:60px; } .qnx-mig-arrow b{ font-size:21px; } .qnx-mig-checkboard{ grid-template-columns:1fr; } .qnx-mig-check{ min-height:105px; } } @media(max-width:500px){ .qnx-mig-visual{ min-height:390px; } .qnx-mig-old-server, .qnx-mig-new-server{ width:130px; height:200px; top:105px; } .qnx-mig-server-top{ height:35px; padding:0 9px; } .qnx-mig-server-top span{ font-size:6px; } .qnx-mig-server-stack{ gap:6px; padding:12px 8px; } .qnx-mig-server-stack div{ padding:7px 5px; } .qnx-mig-server-stack b{ font-size:6px; } .qnx-mig-new-screen{ margin:15px 9px; padding:11px; } .mig-screen-line.large{ height:13px; } .qnx-mig-bridge{ left:14%; right:14%; top:130px; } .qnx-mig-transfer{ font-size:6px; padding:5px 6px; } .qnx-mig-bridge-label{ font-size:6px; } .qnx-mig-progress{ left:12%; right:12%; bottom:34px; gap:8px; } .qnx-mig-progress span{ display:none; } .qnx-mig-browser{ width:72%; } .old-browser{ top:72px; } .new-browser{ top:112px; } .qnx-mig-preserve-visual{ min-height:340px; } .qnx-mig-browser-body{ padding:15px; } .mig-block.hero{ height:45px; } .qnx-mig-arrow{ width:50px; height:50px; } .qnx-mig-arrow b{ font-size:17px; } .qnx-mig-arrow span{ font-size:6px; } } /* ========================================================= QNIX DIGITAL — WEBSITE HOSTING ========================================================= */ .qnx-host-intro, .qnx-host-foundation, .qnx-host-architecture, .qnx-host-performance, .qnx-host-stack, .qnx-host-final{ position:relative; overflow:hidden; } .qnx-host-intro{ padding:92px 7%; background:#f4f8ff; } .qnx-host-intro-wrap{ max-width:1320px; margin:auto; display:grid; grid-template-columns:.82fr 1.18fr; gap:72px; align-items:center; } .qnx-host-kicker{ display:inline-flex; align-items:center; gap:10px; margin-bottom:21px; color:#0758d8; font-size:10px; line-height:1; letter-spacing:2.5px; font-weight:900; } .qnx-host-kicker:before{ content:""; width:28px; height:2px; background:#79c91c; } .qnx-host-intro h2, .qnx-host-foundation-head h2, .qnx-host-architecture-copy h2, .qnx-host-performance-copy h2, .qnx-host-stack-head h2, .qnx-host-final h2{ margin:0; color:#0d1730; font-size:clamp(40px,4.6vw,70px); line-height:.98; letter-spacing:-3px; font-weight:400; } .qnx-host-intro h2 strong, .qnx-host-foundation-head h2 strong, .qnx-host-architecture-copy h2 strong, .qnx-host-performance-copy h2 strong, .qnx-host-stack-head h2 strong, .qnx-host-final h2 strong{ color:#0758d8; font-weight:800; } .qnx-host-copy > p{ max-width:590px; margin:28px 0 0; color:#5d6b84; font-size:16px; line-height:1.78; } .qnx-host-metrics{ display:flex; flex-wrap:wrap; gap:8px; margin:27px 0 31px; } .qnx-host-metrics span{ padding:9px 12px; background:#fff; border:1px solid #dce6f3; color:#0d1730; font-size:10px; font-weight:800; } .qnx-host-primary-btn, .qnx-host-final-btn{ display:inline-flex; align-items:center; justify-content:space-between; gap:28px; min-width:210px; padding:14px 15px 14px 20px; background:#0758d8; border:1px solid #0758d8; color:#fff; text-decoration:none; font-size:12px; font-weight:800; transition:.3s ease; } .qnx-host-primary-btn b, .qnx-host-final-btn b{ width:31px; height:31px; display:grid; place-items:center; background:#b7e51c; color:#0d1730; font-size:16px; } .qnx-host-primary-btn:hover, .qnx-host-final-btn:hover{ transform:translateY(-3px); background:#062d7a; border-color:#062d7a; } /* SERVER SCENE */ .qnx-host-server-scene{ min-height:555px; position:relative; background:#062d7a; border:1px solid rgba(8,168,207,.28); box-shadow:0 30px 70px rgba(6,45,122,.18); overflow:hidden; transform-style:preserve-3d; } .qnx-host-server-scene:before{ content:""; position:absolute; inset:0; background: linear-gradient(rgba(8,168,207,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(8,168,207,.07) 1px,transparent 1px); background-size:42px 42px; } .qnx-host-server-scene:after{ content:""; position:absolute; width:500px; height:500px; right:-210px; top:-210px; border:1px solid rgba(8,168,207,.16); border-radius:50%; } .qnx-host-rack{ position:absolute; left:18%; top:58px; width:50%; min-width:310px; background:#0a397f; border:1px solid rgba(255,255,255,.12); padding:16px; box-shadow:0 25px 55px rgba(0,0,0,.24); z-index:3; } .qnx-host-rack-head{ height:35px; display:flex; align-items:center; justify-content:space-between; padding:0 8px 11px; border-bottom:1px solid rgba(255,255,255,.11); } .qnx-host-rack-head span{ color:#fff; font-size:8px; letter-spacing:1.3px; font-weight:900; } .qnx-host-rack-head b{ color:#b7e51c; font-size:7px; letter-spacing:1px; } .qnx-host-server-unit{ height:77px; margin-top:10px; padding:13px; display:grid; grid-template-columns:58px 48px 1fr; align-items:center; gap:12px; background:#062d7a; border:1px solid rgba(255,255,255,.08); } .qnx-host-unit-label{ display:flex; flex-direction:column; gap:4px; } .qnx-host-unit-label span{ color:#08a8cf; font-size:8px; font-weight:900; letter-spacing:1px; } .qnx-host-unit-label b{ color:rgba(255,255,255,.4); font-size:8px; } .qnx-host-leds{ display:flex; gap:5px; } .qnx-host-leds i{ width:6px; height:6px; border-radius:50%; background:#079ed1; box-shadow:0 0 10px rgba(8,168,207,.55); } .qnx-host-server-unit:nth-child(3) .qnx-host-leds i:nth-child(2){ background:#79c91c; } .qnx-host-server-unit:nth-child(4) .qnx-host-leds i:nth-child(3){ background:#b7e51c; } .qnx-host-bars{ display:flex; align-items:center; gap:4px; } .qnx-host-bars span{ height:5px; flex:1; background:#0d4c95; } .qnx-host-bars span:nth-child(2){ background:#087ee7; } .qnx-host-bars span:nth-child(4){ background:#08a8cf; } .qnx-host-side-panel{ position:absolute; right:7%; top:120px; width:150px; padding:18px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); z-index:5; } .qnx-host-side-panel > span{ display:block; color:rgba(255,255,255,.55); font-size:7px; letter-spacing:1.2px; font-weight:900; } .qnx-host-load{ height:4px; margin:17px 0 11px; background:rgba(255,255,255,.10); } .qnx-host-load i{ display:block; width:42%; height:100%; background:linear-gradient(90deg,#0758d8,#08a8cf,#79c91c); } .qnx-host-side-panel > b{ color:#b7e51c; font-size:18px; } .qnx-host-side-panel small{ display:block; margin-top:8px; color:rgba(255,255,255,.4); font-size:6px; letter-spacing:1px; } .qnx-host-traffic{ position:absolute; left:9%; bottom:65px; width:210px; padding:17px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); z-index:5; } .traffic-title{ display:block; color:rgba(255,255,255,.55); font-size:7px; letter-spacing:1.2px; font-weight:900; } .qnx-host-traffic-bars{ height:55px; display:flex; align-items:flex-end; gap:5px; margin-top:13px; } .qnx-host-traffic-bars i{ flex:1; height:30%; background:#087ee7; animation:qnxHostTraffic 2.8s ease-in-out infinite alternate; } .qnx-host-traffic-bars i:nth-child(2){height:65%;animation-delay:.2s} .qnx-host-traffic-bars i:nth-child(3){height:44%;animation-delay:.4s} .qnx-host-traffic-bars i:nth-child(4){height:80%;background:#08a8cf;animation-delay:.1s} .qnx-host-traffic-bars i:nth-child(5){height:55%;animation-delay:.5s} .qnx-host-traffic-bars i:nth-child(6){height:91%;background:#16b98a;animation-delay:.3s} .qnx-host-traffic-bars i:nth-child(7){height:67%;animation-delay:.6s} .qnx-host-traffic-bars i:nth-child(8){height:78%;background:#79c91c;animation-delay:.25s} @keyframes qnxHostTraffic{ from{transform:scaleY(.75)} to{transform:scaleY(1.12)} } .qnx-host-traffic strong{ display:block; margin-top:13px; color:#b7e51c; font-size:7px; letter-spacing:1px; } .qnx-host-signal{ position:absolute; right:7%; bottom:48px; display:flex; align-items:center; gap:8px; color:#fff; font-size:8px; font-weight:800; letter-spacing:1px; z-index:6; } .qnx-host-signal span{ width:7px; height:7px; border-radius:50%; background:#79c91c; box-shadow:0 0 0 6px rgba(121,201,28,.08),0 0 16px #79c91c; } /* FOUNDATION */ .qnx-host-foundation{ padding:105px 7%; background:#fff; } .qnx-host-foundation-head{ max-width:850px; margin:0 auto 62px; text-align:center; } .qnx-host-foundation-head p{ max-width:680px; margin:25px auto 0; color:#5d6b84; line-height:1.75; } .qnx-host-foundation-grid{ max-width:1200px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #dce6f3; border-left:1px solid #dce6f3; } .qnx-host-resource{ min-height:335px; padding:30px 27px; border-right:1px solid #dce6f3; border-bottom:1px solid #dce6f3; background:#fff; transition:.35s ease; } .qnx-host-resource:hover{ background:#f4f8ff; transform:translateY(-5px); box-shadow:0 20px 45px rgba(7,88,216,.08); } .qnx-host-resource-icon{ width:52px; height:52px; margin-bottom:45px; display:flex; align-items:center; justify-content:center; background:#f4f8ff; border:1px solid #dce6f3; } .resource-compute .qnx-host-resource-icon{ align-items:flex-end; gap:4px; padding:12px; } .resource-compute .qnx-host-resource-icon i{ width:6px; height:16px; background:#0758d8; } .resource-compute .qnx-host-resource-icon i:nth-child(2){ height:27px; background:#08a8cf; } .resource-compute .qnx-host-resource-icon i:nth-child(3){ height:21px; background:#79c91c; } .resource-storage .qnx-host-resource-icon i{ width:25px; height:25px; border:2px solid #0758d8; position:relative; } .resource-storage .qnx-host-resource-icon i:before{ content:""; position:absolute; left:5px; right:5px; bottom:5px; height:2px; background:#08a8cf; } .resource-database .qnx-host-resource-icon{ position:relative; } .resource-database .qnx-host-resource-icon i{ width:27px; height:11px; border:2px solid #08a8cf; border-radius:50%; position:absolute; } .resource-database .qnx-host-resource-icon i:nth-child(1){ top:13px; } .resource-database .qnx-host-resource-icon i:nth-child(2){ top:24px; border-top:0; border-radius:0 0 50% 50%; height:12px; } .resource-network .qnx-host-resource-icon{ gap:6px; } .resource-network .qnx-host-resource-icon i{ width:7px; height:7px; border-radius:50%; background:#0758d8; } .resource-network .qnx-host-resource-icon i:nth-child(2), .resource-network .qnx-host-resource-icon i:nth-child(4){ background:#08a8cf; } .qnx-host-resource > span{ color:#08a8cf; font-size:9px; font-weight:900; letter-spacing:1.8px; } .qnx-host-resource h3{ margin:11px 0 11px; color:#0d1730; font-size:20px; } .qnx-host-resource p{ margin:0; color:#5d6b84; font-size:13px; line-height:1.7; } .qnx-host-resource-meter{ display:flex; justify-content:space-between; margin-top:28px; padding-top:13px; border-top:1px solid #e3eaf4; } .qnx-host-resource-meter span{ color:#7b8ba4; font-size:7px; letter-spacing:1px; font-weight:900; } .qnx-host-resource-meter b{ color:#0758d8; font-size:7px; letter-spacing:1px; } /* ARCHITECTURE */ .qnx-host-architecture{ padding:110px 7%; background:#062d7a; color:#fff; } .qnx-host-architecture-inner{ max-width:1250px; margin:auto; display:grid; grid-template-columns:.76fr 1.24fr; gap:90px; align-items:center; } .qnx-host-architecture-copy .qnx-host-kicker{ color:#b7e51c; } .qnx-host-architecture-copy .qnx-host-kicker:before{ background:#08a8cf; } .qnx-host-architecture-copy h2{ color:#fff; font-size:clamp(39px,4.2vw,62px); } .qnx-host-architecture-copy h2 strong{ color:#08a8cf; } .qnx-host-architecture-copy p{ max-width:500px; margin:26px 0 0; color:rgba(255,255,255,.67); line-height:1.75; } .qnx-host-network{ min-height:360px; position:relative; border:1px solid rgba(255,255,255,.10); background: linear-gradient(rgba(8,168,207,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(8,168,207,.05) 1px,transparent 1px); background-size:38px 38px; } .qnx-host-network-node{ position:absolute; width:115px; height:115px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:#0a397f; border:1px solid rgba(255,255,255,.16); box-shadow:0 15px 30px rgba(0,0,0,.15); z-index:4; } .visitor-node{ left:5%; top:50%; transform:translateY(-50%); } .web-node{ left:32%; top:19%; } .data-node{ left:53%; bottom:13%; } .delivery-node{ right:5%; top:50%; transform:translateY(-50%); } .node-symbol{ color:#08a8cf; font-size:18px; font-weight:900; } .web-node .node-symbol, .data-node .node-symbol{ color:#b7e51c; font-size:12px; } .delivery-node .node-symbol{ color:#79c91c; } .qnx-host-network-node b{ color:#fff; font-size:8px; letter-spacing:1px; } .qnx-host-network-node small{ color:rgba(255,255,255,.42); font-size:6px; letter-spacing:1px; } .qnx-host-network-link{ position:absolute; height:1px; background:linear-gradient(90deg,#08a8cf,#16b98a); transform-origin:left center; z-index:2; } .link-one{ left:20%; top:47%; width:25%; transform:rotate(-24deg); } .link-two{ left:44%; top:49%; width:18%; transform:rotate(29deg); } .link-three{ left:66%; top:52%; width:24%; transform:rotate(-8deg); } .qnx-host-network-link i{ position:absolute; right:-2px; top:-3px; width:7px; height:7px; border-radius:50%; background:#b7e51c; } .qnx-host-packet{ position:absolute; width:7px; height:7px; border-radius:50%; background:#b7e51c; box-shadow:0 0 14px rgba(183,229,28,.75); z-index:6; } .packet-one{ top:45%; left:22%; animation:qnxHostPacketOne 3s linear infinite; } .packet-two{ top:51%; left:48%; animation:qnxHostPacketTwo 3.5s linear infinite; } .packet-three{ top:51%; left:70%; animation:qnxHostPacketThree 3.2s linear infinite; } @keyframes qnxHostPacketOne{ 0%{transform:translateX(0);opacity:0} 20%{opacity:1} 100%{transform:translate(110px,-38px);opacity:0} } @keyframes qnxHostPacketTwo{ 0%{transform:translate(0,0);opacity:0} 20%{opacity:1} 100%{transform:translate(75px,42px);opacity:0} } @keyframes qnxHostPacketThree{ 0%{transform:translate(0,0);opacity:0} 20%{opacity:1} 100%{transform:translate(100px,-10px);opacity:0} } /* PERFORMANCE */ .qnx-host-performance{ padding:110px 7%; background:#fff; } .qnx-host-performance-wrap{ max-width:1250px; margin:auto; display:grid; grid-template-columns:1.1fr .9fr; gap:80px; align-items:center; } .qnx-host-performance-visual{ padding:25px; background:#f4f8ff; border:1px solid #dce6f3; } .qnx-host-performance-title{ display:flex; align-items:center; justify-content:space-between; padding-bottom:17px; border-bottom:1px solid #dce6f3; } .qnx-host-performance-title span{ color:#0d1730; font-size:9px; letter-spacing:1.5px; font-weight:900; } .qnx-host-performance-title b{ color:#16b98a; font-size:8px; letter-spacing:1px; } .qnx-host-performance-chart{ height:280px; display:grid; grid-template-columns:35px 1fr; grid-template-rows:1fr 25px; padding-top:25px; } .chart-y{ display:flex; flex-direction:column; justify-content:space-between; padding-bottom:3px; } .chart-y span, .chart-x span{ color:#91a1b8; font-size:7px; } .chart-area{ position:relative; overflow:hidden; } .chart-grid{ position:absolute; inset:0; background: linear-gradient(#dce6f3 1px,transparent 1px), linear-gradient(90deg,#e7eef6 1px,transparent 1px); background-size:100% 25%,25% 100%; } .chart-area svg{ position:absolute; inset:0; width:100%; height:100%; } .chart-point{ position:absolute; width:8px; height:8px; border-radius:50%; background:#b7e51c; box-shadow:0 0 0 5px rgba(183,229,28,.12); } .point-a{left:30%;top:49%} .point-b{left:51%;top:38%} .point-c{left:71%;top:25%} .point-d{left:90%;top:22%} .chart-x{ grid-column:2; display:flex; justify-content:space-between; align-items:end; } .qnx-host-performance-stats{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:20px; border-top:1px solid #dce6f3; } .qnx-host-performance-stats div{ padding:17px 10px 3px; border-right:1px solid #dce6f3; } .qnx-host-performance-stats div:last-child{ border-right:0; } .qnx-host-performance-stats span{ display:block; color:#7b8ba4; font-size:7px; letter-spacing:1px; font-weight:900; } .qnx-host-performance-stats b{ display:block; margin-top:7px; color:#0758d8; font-size:13px; } .qnx-host-performance-copy h2{ font-size:clamp(39px,4vw,60px); } .qnx-host-performance-copy > p{ margin:27px 0 32px; color:#5d6b84; line-height:1.75; } .qnx-host-fit-list{ border-top:1px solid #dce6f3; } .qnx-host-fit-list div{ display:grid; grid-template-columns:30px 1fr; gap:5px 12px; padding:15px 0; border-bottom:1px solid #e3eaf4; } .qnx-host-fit-list span{ grid-row:1 / 3; color:#0758d8; font-size:9px; font-weight:900; } .qnx-host-fit-list b{ color:#0d1730; font-size:13px; } .qnx-host-fit-list small{ color:#5d6b84; font-size:11px; line-height:1.5; } /* STACK */ .qnx-host-stack{ padding:105px 7%; background:#f4f8ff; } .qnx-host-stack-head{ max-width:820px; margin:0 auto 60px; text-align:center; } .qnx-host-stack-visual{ max-width:920px; margin:auto; display:flex; flex-direction:column; gap:10px; } .qnx-host-stack-layer{ position:relative; min-height:82px; display:grid; grid-template-columns:65px 1fr auto; align-items:center; gap:22px; padding:0 28px; border:1px solid #dce6f3; background:#fff; transition:.35s ease; } .qnx-host-stack-layer:hover{ transform:translateX(10px); border-color:#08a8cf; box-shadow:0 15px 35px rgba(7,88,216,.08); } .qnx-host-stack-layer > span{ color:#0758d8; font-size:9px; font-weight:900; } .qnx-host-stack-layer b{ display:block; color:#0d1730; font-size:13px; letter-spacing:.8px; } .qnx-host-stack-layer small{ display:block; margin-top:4px; color:#5d6b84; font-size:11px; } .qnx-host-stack-layer:after{ content:""; width:10px; height:10px; border-top:1px solid #08a8cf; border-right:1px solid #08a8cf; transform:rotate(45deg); } .layer-site{ border-left:4px solid #0758d8; } .layer-app{ margin-left:5%; border-left:4px solid #087ee7; } .layer-data{ margin-left:10%; border-left:4px solid #08a8cf; } .layer-server{ margin-left:15%; border-left:4px solid #16b98a; } .layer-network{ margin-left:20%; border-left:4px solid #79c91c; } /* FINAL */ .qnx-host-final{ padding:108px 7%; background:#fff; text-align:center; } .qnx-host-final-glow{ position:absolute; width:600px; height:600px; right:-280px; bottom:-330px; border:1px solid rgba(8,168,207,.13); border-radius:50%; } .qnx-host-final-content{ position:relative; z-index:2; max-width:850px; margin:auto; } .qnx-host-final h2{ font-size:clamp(40px,4.8vw,70px); } .qnx-host-final p{ max-width:660px; margin:25px auto 32px; color:#5d6b84; line-height:1.75; } .qnx-host-reveal{ opacity:0; transform:translateY(28px); transition:opacity .75s ease,transform .75s ease; } .qnx-host-visible{ opacity:1; transform:translateY(0); } @media(max-width:1100px){ .qnx-host-intro-wrap, .qnx-host-architecture-inner, .qnx-host-performance-wrap{ grid-template-columns:1fr; gap:55px; } .qnx-host-foundation-grid{ grid-template-columns:1fr 1fr; } .qnx-host-server-scene{ max-width:900px; margin:auto; } .qnx-host-architecture-copy{ max-width:700px; } .qnx-host-performance-copy{ max-width:700px; } } @media(max-width:760px){ .qnx-host-intro, .qnx-host-foundation, .qnx-host-architecture, .qnx-host-performance, .qnx-host-stack, .qnx-host-final{ padding:70px 5%; } .qnx-host-intro h2, .qnx-host-foundation-head h2, .qnx-host-architecture-copy h2, .qnx-host-performance-copy h2, .qnx-host-stack-head h2, .qnx-host-final h2{ font-size:39px; letter-spacing:-1.8px; } .qnx-host-server-scene{ min-height:500px; } .qnx-host-rack{ left:7%; width:57%; min-width:0; } .qnx-host-side-panel{ right:5%; width:135px; } .qnx-host-traffic{ left:7%; bottom:42px; } .qnx-host-signal{ right:5%; bottom:45px; } .qnx-host-foundation-grid{ grid-template-columns:1fr; } .qnx-host-resource{ min-height:auto; } .qnx-host-network{ min-height:430px; } .qnx-host-network-node{ width:95px; height:95px; } .visitor-node{ left:2%; } .web-node{ left:30%; } .data-node{ left:51%; bottom:15%; } .delivery-node{ right:2%; } .qnx-host-performance-visual{ padding:18px; } .qnx-host-performance-chart{ height:230px; } .qnx-host-stack-layer{ grid-template-columns:40px 1fr auto; gap:13px; padding:0 17px; } .layer-app{ margin-left:3%; } .layer-data{ margin-left:6%; } .layer-server{ margin-left:9%; } .layer-network{ margin-left:12%; } } @media(max-width:500px){ .qnx-host-server-scene{ min-height:420px; } .qnx-host-rack{ top:45px; left:4%; width:62%; padding:10px; } .qnx-host-server-unit{ height:58px; padding:8px; grid-template-columns:38px 35px 1fr; gap:7px; } .qnx-host-server-unit:nth-child(4), .qnx-host-server-unit:nth-child(5){ display:none; } .qnx-host-side-panel{ top:80px; right:4%; width:105px; padding:12px; } .qnx-host-side-panel > span{ font-size:6px; } .qnx-host-traffic{ width:150px; left:4%; bottom:30px; padding:12px; } .qnx-host-signal{ right:4%; bottom:28px; font-size:6px; } .qnx-host-network{ min-height:370px; } .qnx-host-network-node{ width:76px; height:76px; } .qnx-host-network-node b{ font-size:6px; } .qnx-host-network-node small{ font-size:5px; } .node-symbol{ font-size:13px; } .link-one{ width:24%; } .link-two{ width:17%; } .link-three{ width:21%; } .qnx-host-performance-stats{ grid-template-columns:1fr; } .qnx-host-performance-stats div{ border-right:0; border-bottom:1px solid #dce6f3; padding:12px 5px; } .qnx-host-stack-layer{ min-height:72px; } .qnx-host-stack-layer small{ font-size:9px; } .qnx-host-stack-layer:after{ display:none; } } /* ========================================================= QNIX DIGITAL — SSL & HTTPS SETUP ========================================================= */ .qnx-ssl-intro, .qnx-ssl-explain, .qnx-ssl-transition, .qnx-ssl-certificate-section, .qnx-ssl-flow, .qnx-ssl-final{ position:relative; width:100%; overflow:hidden; } .qnx-ssl-intro{ padding:105px 7%; background:#f4f8ff; } .qnx-ssl-intro-wrap{ max-width:1320px; margin:auto; display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:center; } .qnx-ssl-intro-copy{ position:relative; z-index:2; } .qnx-ssl-kicker{ display:inline-flex; align-items:center; gap:10px; color:#0758d8; font-size:11px; font-weight:800; letter-spacing:2.2px; } .qnx-ssl-kicker:before{ content:""; width:26px; height:2px; background:#79c91c; } .qnx-ssl-intro h2{ margin:18px 0 20px; color:#0d1730; font-size:clamp(42px,4.7vw,72px); line-height:1.02; letter-spacing:-3px; font-weight:500; } .qnx-ssl-intro h2 strong{ color:#0758d8; font-weight:800; } .qnx-ssl-intro p{ max-width:570px; margin:0; color:#5d6b84; font-size:16px; line-height:1.85; } .qnx-ssl-intro-points{ margin-top:34px; display:flex; flex-wrap:wrap; gap:9px; } .qnx-ssl-intro-points span{ padding:10px 14px; border:1px solid #dce6f3; background:#fff; color:#0d1730; font-size:11px; font-weight:700; } /* CONNECTION VISUAL */ .qnx-ssl-connection{ position:relative; min-height:520px; padding:48px; display:flex; flex-direction:column; justify-content:center; background:#062d7a; border-radius:26px; box-shadow:0 28px 70px rgba(6,45,122,.18); isolation:isolate; } .qnx-ssl-connection:before{ content:""; position:absolute; inset:20px; border:1px solid rgba(8,168,207,.22); border-radius:18px; pointer-events:none; } .qnx-ssl-connection:after{ content:""; position:absolute; width:240px; height:240px; right:-90px; bottom:-100px; border-radius:50%; background:rgba(121,201,28,.13); filter:blur(20px); z-index:-1; } .qnx-ssl-browser{ position:relative; width:100%; max-width:650px; margin:0 auto; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 22px 55px rgba(0,0,0,.22); } .qnx-ssl-browser-top{ height:48px; display:flex; align-items:center; gap:18px; padding:0 18px; background:#edf4fc; border-bottom:1px solid #dbe5f1; } .qnx-ssl-dots{ display:flex; gap:5px; } .qnx-ssl-dots i{ width:7px; height:7px; border-radius:50%; background:#b8c7d9; } .qnx-ssl-address{ flex:1; height:30px; display:flex; align-items:center; gap:8px; padding:0 12px; border-radius:7px; background:#fff; color:#52637d; font-size:10px; } .qnx-ssl-address-status{ color:#16b98a; font-weight:900; } .qnx-ssl-browser-body{ position:relative; height:205px; padding:30px; background:linear-gradient(135deg,#fff 0%,#f4f8ff 100%); } .qnx-ssl-page-line{ width:58%; height:8px; margin-bottom:10px; border-radius:10px; background:#dce7f3; } .qnx-ssl-page-line.large{ width:72%; height:13px; background:#0758d8; } .qnx-ssl-page-line.short{ width:34%; } .qnx-ssl-page-content{ position:absolute; right:30px; bottom:26px; width:220px; padding:18px; border-left:3px solid #79c91c; background:#fff; box-shadow:0 12px 30px rgba(17,55,110,.08); } .qnx-ssl-page-content span{ display:block; margin-bottom:7px; color:#08a8cf; font-size:8px; font-weight:800; letter-spacing:1.5px; } .qnx-ssl-page-content b{ color:#0d1730; font-size:14px; } /* SECURE PATH */ .qnx-ssl-secure-path{ display:grid; grid-template-columns:auto 1fr auto 1fr auto; align-items:center; gap:12px; margin:32px auto 20px; width:100%; max-width:650px; } .qnx-ssl-path-node{ padding:9px 12px; border:1px solid rgba(255,255,255,.17); color:#b8cce9; font-size:8px; font-weight:800; letter-spacing:1.3px; text-align:center; } .qnx-ssl-path-node.active{ color:#062d7a; background:#b7e51c; border-color:#b7e51c; } .qnx-ssl-path-line{ height:2px; display:flex; justify-content:space-between; align-items:center; background:rgba(8,168,207,.3); } .qnx-ssl-path-line i{ width:4px; height:4px; border-radius:50%; background:#08a8cf; } .qnx-ssl-certificate{ width:100%; max-width:650px; margin:0 auto; padding:16px 18px; display:flex; align-items:center; gap:13px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); } .qnx-ssl-cert-mark{ width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:#16b98a; color:#fff; font-weight:900; } .qnx-ssl-certificate div:nth-child(2){ display:flex; flex-direction:column; gap:3px; flex:1; } .qnx-ssl-certificate small{ color:#79c91c; font-size:7px; letter-spacing:1.5px; font-weight:800; } .qnx-ssl-certificate strong{ color:#fff; font-size:12px; } .qnx-ssl-cert-status{ color:#b7e51c; font-size:8px; font-weight:900; letter-spacing:1px; } /* EXPLAIN */ .qnx-ssl-explain{ padding:110px 7%; background:#fff; } .qnx-ssl-explain-head{ max-width:760px; margin:0 auto 58px; text-align:center; } .qnx-ssl-explain-head h2{ margin:18px 0 16px; color:#0d1730; font-size:clamp(34px,4vw,58px); line-height:1.06; letter-spacing:-2px; } .qnx-ssl-explain-head p{ max-width:650px; margin:auto; color:#5d6b84; line-height:1.8; } .qnx-ssl-benefit-strip{ max-width:1280px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #dce6f3; border-bottom:1px solid #dce6f3; } .qnx-ssl-benefit-strip article{ min-height:240px; padding:34px 28px; border-right:1px solid #dce6f3; transition:.35s ease; } .qnx-ssl-benefit-strip article:last-child{ border-right:0; } .qnx-ssl-benefit-strip article:hover{ background:#f4f8ff; transform:translateY(-5px); } .qnx-ssl-benefit-icon{ display:block; margin-bottom:40px; color:#087ee7; font-size:10px; font-weight:900; letter-spacing:1.5px; } .qnx-ssl-benefit-strip h3{ margin:0 0 10px; color:#0d1730; font-size:22px; } .qnx-ssl-benefit-strip p{ margin:0; color:#5d6b84; font-size:13px; line-height:1.7; } /* HTTP → HTTPS */ .qnx-ssl-transition{ padding:105px 7%; background:#f4f8ff; } .qnx-ssl-transition-top{ max-width:1200px; margin:auto; display:grid; grid-template-columns:1fr .75fr; gap:80px; align-items:end; } .qnx-ssl-transition-top h2{ margin:18px 0 0; color:#0d1730; font-size:clamp(42px,5vw,70px); line-height:1; letter-spacing:-3px; } .qnx-ssl-transition-top h2 strong{ color:#0758d8; } .qnx-ssl-transition-top p{ margin:0; color:#5d6b84; line-height:1.85; } .qnx-ssl-transform{ max-width:1200px; margin:65px auto 30px; display:grid; grid-template-columns:1fr .45fr 1fr; align-items:center; gap:28px; } .qnx-ssl-state{ min-height:180px; padding:35px; display:flex; flex-direction:column; justify-content:center; border:1px solid #dce6f3; background:#fff; } .qnx-ssl-state span{ color:#0d1730; font-size:46px; font-weight:900; letter-spacing:-2px; } .qnx-ssl-state small{ margin-top:10px; color:#5d6b84; font-size:11px; } .qnx-ssl-http{ border-left:5px solid #5d6b84; } .qnx-ssl-https{ border-left:5px solid #16b98a; box-shadow:0 20px 50px rgba(7,88,216,.08); } .qnx-ssl-https span{ color:#0758d8; } .qnx-ssl-transform-arrow{ text-align:center; } .qnx-ssl-transform-arrow span{ display:block; margin-bottom:12px; color:#79c91c; font-size:8px; font-weight:900; letter-spacing:1.5px; } .qnx-ssl-transform-arrow div{ width:100%; height:2px; background:#087ee7; } .qnx-ssl-transform-arrow b{ display:block; margin-top:-16px; margin-left:auto; width:32px; background:#f4f8ff; color:#0758d8; font-size:26px; } .qnx-ssl-transition-note{ max-width:1200px; margin:auto; display:flex; justify-content:center; align-items:center; gap:22px; color:#5d6b84; font-size:10px; font-weight:800; letter-spacing:1px; } .qnx-ssl-transition-note b{ color:#08a8cf; } /* CERTIFICATE */ .qnx-ssl-certificate-section{ padding:115px 7%; background:#fff; } .qnx-ssl-certificate-section{ display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; max-width:1400px; margin:auto; } .qnx-ssl-cert-visual{ min-height:470px; display:grid; place-items:center; background:#062d7a; position:relative; } .qnx-ssl-cert-visual:before, .qnx-ssl-cert-visual:after{ content:""; position:absolute; border:1px solid rgba(8,168,207,.3); } .qnx-ssl-cert-visual:before{ inset:28px; } .qnx-ssl-cert-visual:after{ width:110px; height:110px; right:35px; bottom:35px; border-color:rgba(183,229,28,.35); } .qnx-ssl-cert-sheet{ position:relative; width:min(78%,390px); background:#fff; box-shadow:0 25px 55px rgba(0,0,0,.2); z-index:2; } .qnx-ssl-cert-header{ padding:24px; display:flex; align-items:center; gap:14px; background:#0758d8; color:#fff; } .qnx-ssl-cert-header span{ font-size:30px; font-weight:900; } .qnx-ssl-cert-header small{ font-size:9px; letter-spacing:1.8px; font-weight:800; } .qnx-ssl-cert-body{ padding:26px; } .qnx-ssl-cert-row{ padding:16px 0; display:flex; justify-content:space-between; gap:15px; border-bottom:1px solid #e3eaf4; } .qnx-ssl-cert-row span{ color:#5d6b84; font-size:8px; letter-spacing:1px; font-weight:800; } .qnx-ssl-cert-row strong{ color:#0d1730; font-size:10px; text-align:right; } .qnx-ssl-cert-row:nth-child(2) strong{ color:#16b98a; } .qnx-ssl-cert-row:nth-child(3) strong{ color:#0758d8; } .qnx-ssl-cert-footer{ padding:17px 26px; display:flex; align-items:center; gap:10px; background:#f4f8ff; color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1.3px; } .qnx-ssl-cert-footer i{ width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:#79c91c; color:#fff; font-style:normal; } .qnx-ssl-cert-copy h2{ margin:18px 0; color:#0d1730; font-size:clamp(34px,4vw,55px); line-height:1.06; letter-spacing:-2.2px; } .qnx-ssl-cert-copy > p{ max-width:560px; color:#5d6b84; line-height:1.85; } .qnx-ssl-config-list{ margin-top:32px; border-top:1px solid #dce6f3; } .qnx-ssl-config-list div{ display:flex; justify-content:space-between; padding:15px 0; border-bottom:1px solid #dce6f3; } .qnx-ssl-config-list span{ color:#5d6b84; font-size:12px; } .qnx-ssl-config-list b{ color:#0758d8; font-size:11px; } /* FLOW */ .qnx-ssl-flow{ padding:110px 7%; background:#0d1730; } .qnx-ssl-flow-heading{ max-width:1200px; margin:auto; } .qnx-ssl-flow-heading .qnx-ssl-kicker{ color:#b7e51c; } .qnx-ssl-flow-heading h2{ margin:18px 0 55px; color:#fff; font-size:clamp(38px,4.5vw,62px); line-height:1.05; letter-spacing:-2.5px; } .qnx-ssl-flow-board{ max-width:1200px; margin:auto; border-top:1px solid rgba(255,255,255,.15); } .qnx-ssl-flow-item{ display:grid; grid-template-columns:90px 1fr; gap:30px; padding:28px 0; border-bottom:1px solid rgba(255,255,255,.15); transition:.35s ease; } .qnx-ssl-flow-item:hover{ padding-left:15px; border-color:#08a8cf; } .qnx-ssl-flow-number{ color:#08a8cf; font-size:10px; font-weight:900; letter-spacing:1px; } .qnx-ssl-flow-item strong{ display:block; margin-bottom:6px; color:#fff; font-size:18px; } .qnx-ssl-flow-item p{ margin:0; color:#9eb1cd; font-size:13px; line-height:1.7; } /* FINAL */ .qnx-ssl-final{ min-height:560px; display:grid; place-items:center; padding:100px 7%; background:linear-gradient(120deg,#062d7a 0%,#0758d8 52%,#08a8cf 100%); } .qnx-ssl-final-grid{ position:absolute; inset:0; opacity:.18; background-image: linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size:55px 55px; } .qnx-ssl-final-content{ position:relative; z-index:2; max-width:760px; text-align:center; } .qnx-ssl-final-content .qnx-ssl-kicker{ color:#b7e51c; } .qnx-ssl-final-content h2{ margin:18px 0; color:#fff; font-size:clamp(42px,5vw,70px); line-height:1; letter-spacing:-3px; } .qnx-ssl-final-content p{ max-width:620px; margin:0 auto; color:rgba(255,255,255,.8); line-height:1.8; } .qnx-ssl-final-btn{ margin-top:32px; display:inline-flex; align-items:center; gap:24px; padding:15px 17px 15px 24px; background:#fff; color:#0758d8; text-decoration:none; font-size:12px; font-weight:800; transition:.3s ease; } .qnx-ssl-final-btn b{ width:34px; height:34px; display:grid; place-items:center; background:#0758d8; color:#fff; font-size:17px; } .qnx-ssl-final-btn:hover{ transform:translateY(-4px); box-shadow:0 16px 35px rgba(0,0,0,.18); } .qnx-ssl-final-badge{ position:absolute; right:7%; bottom:70px; z-index:2; width:145px; height:145px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.3); border-radius:50%; color:#fff; transform:rotate(-8deg); } .qnx-ssl-final-badge span{ color:#b7e51c; font-size:25px; font-weight:900; } .qnx-ssl-final-badge small{ margin-top:5px; font-size:7px; letter-spacing:1.3px; } /* REVEAL */ .qnx-ssl-reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s ease; } .qnx-ssl-visible{ opacity:1; transform:translateY(0); } /* RESPONSIVE */ @media(max-width:1100px){ .qnx-ssl-intro-wrap{ grid-template-columns:1fr; gap:55px; } .qnx-ssl-intro-copy{ max-width:800px; } .qnx-ssl-benefit-strip{ grid-template-columns:repeat(2,1fr); } .qnx-ssl-benefit-strip article:nth-child(2){ border-right:0; } .qnx-ssl-benefit-strip article:nth-child(-n+2){ border-bottom:1px solid #dce6f3; } .qnx-ssl-transition-top{ grid-template-columns:1fr; gap:25px; } .qnx-ssl-certificate-section{ grid-template-columns:1fr; gap:60px; } .qnx-ssl-cert-copy{ max-width:750px; } } @media(max-width:760px){ .qnx-ssl-intro, .qnx-ssl-explain, .qnx-ssl-transition, .qnx-ssl-flow{ padding:75px 6%; } .qnx-ssl-certificate-section{ padding:75px 6%; } .qnx-ssl-intro h2{ font-size:42px; letter-spacing:-2px; } .qnx-ssl-connection{ min-height:430px; padding:30px 20px; border-radius:18px; } .qnx-ssl-browser-body{ height:165px; padding:22px; } .qnx-ssl-page-content{ right:20px; bottom:20px; width:175px; padding:13px; } .qnx-ssl-page-content b{ font-size:11px; } .qnx-ssl-secure-path{ gap:6px; } .qnx-ssl-path-node{ padding:7px 5px; font-size:6px; } .qnx-ssl-certificate{ padding:12px; } .qnx-ssl-cert-mark{ width:27px; height:27px; } .qnx-ssl-benefit-strip{ grid-template-columns:1fr; } .qnx-ssl-benefit-strip article{ min-height:auto; border-right:0; border-bottom:1px solid #dce6f3; } .qnx-ssl-benefit-strip article:last-child{ border-bottom:0; } .qnx-ssl-benefit-strip article:nth-child(2){ border-bottom:1px solid #dce6f3; } .qnx-ssl-transform{ grid-template-columns:1fr; gap:18px; margin-top:45px; } .qnx-ssl-transform-arrow{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; } .qnx-ssl-transform-arrow span{ margin:0; } .qnx-ssl-transform-arrow div{ width:100%; } .qnx-ssl-transform-arrow b{ margin:0; background:transparent; } .qnx-ssl-transition-note{ flex-wrap:wrap; gap:10px; line-height:1.6; } .qnx-ssl-cert-visual{ min-height:390px; } .qnx-ssl-cert-sheet{ width:82%; } .qnx-ssl-flow-item{ grid-template-columns:45px 1fr; gap:15px; } .qnx-ssl-final{ min-height:500px; padding:80px 6%; } .qnx-ssl-final-content h2{ font-size:43px; letter-spacing:-2px; } .qnx-ssl-final-badge{ width:105px; height:105px; right:20px; bottom:25px; opacity:.65; } .qnx-ssl-final-badge span{ font-size:18px; } .qnx-ssl-final-badge small{ font-size:5px; } } @media(max-width:460px){ .qnx-ssl-intro-points{ display:grid; grid-template-columns:1fr; } .qnx-ssl-browser-top{ gap:8px; padding:0 10px; } .qnx-ssl-address{ font-size:8px; } .qnx-ssl-page-content{ position:relative; right:auto; bottom:auto; margin-top:28px; width:100%; } .qnx-ssl-browser-body{ height:190px; } .qnx-ssl-cert-row{ flex-direction:column; gap:5px; } .qnx-ssl-cert-row strong{ text-align:left; } .qnx-ssl-final-badge{ display:none; } } /* ========================================================= QNIX DIGITAL — ANDROID APP DEVELOPMENT ========================================================= */ .qnx-android-intro, .qnx-android-experience, .qnx-android-architecture, .qnx-android-capabilities, .qnx-android-build, .qnx-android-quality, .qnx-android-final{ position:relative; width:100%; overflow:hidden; } .qnx-android-intro{ padding:105px 7%; background:#f4f8ff; } .qnx-android-intro-wrap{ max-width:1320px; margin:auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center; } .qnx-android-kicker{ display:inline-flex; align-items:center; gap:10px; color:#0758d8; font-size:10px; font-weight:900; letter-spacing:2px; } .qnx-android-kicker:before{ content:""; width:25px; height:2px; background:#79c91c; } .qnx-android-intro-copy h2{ margin:18px 0 20px; color:#0d1730; font-size:clamp(43px,5vw,72px); line-height:1; letter-spacing:-3px; font-weight:500; } .qnx-android-intro-copy h2 strong{ color:#0758d8; font-weight:850; } .qnx-android-intro-copy p{ max-width:570px; margin:0; color:#5d6b84; font-size:16px; line-height:1.85; } .qnx-android-tags{ margin-top:30px; display:flex; flex-wrap:wrap; gap:8px; } .qnx-android-tags span{ padding:10px 13px; background:#fff; border:1px solid #dce6f3; color:#0d1730; font-size:10px; font-weight:750; } /* DEVICE LAB */ .qnx-android-device-lab{ position:relative; min-height:570px; display:flex; align-items:center; justify-content:center; background:#062d7a; border-radius:28px; isolation:isolate; } .qnx-android-device-lab:before{ content:""; position:absolute; inset:24px; border:1px solid rgba(8,168,207,.22); border-radius:20px; } .qnx-android-device-lab:after{ content:""; position:absolute; width:280px; height:280px; right:-100px; bottom:-120px; border-radius:50%; background:rgba(121,201,28,.12); filter:blur(30px); z-index:-1; } .qnx-android-lab-label{ position:absolute; top:45px; left:48px; right:48px; display:flex; justify-content:space-between; color:#86a3ce; font-size:8px; letter-spacing:1.5px; font-weight:800; } .qnx-android-lab-label b{ color:#b7e51c; } .qnx-android-phone{ position:relative; width:270px; height:525px; padding:14px; border:7px solid #0d1730; border-radius:38px; background:#fff; box-shadow:0 35px 70px rgba(0,0,0,.28); transform:rotate(-3deg); transition:transform .5s ease; z-index:3; } .qnx-android-phone:hover{ transform:rotate(0deg) translateY(-7px); } .qnx-android-phone:before{ content:""; position:absolute; top:-3px; left:50%; width:72px; height:17px; transform:translateX(-50%); border-radius:0 0 12px 12px; background:#0d1730; } .qnx-android-phone-top{ height:25px; display:flex; align-items:center; justify-content:space-between; padding:0 9px; color:#0d1730; font-size:8px; font-weight:800; } .qnx-android-phone-top div{ display:flex; gap:3px; } .qnx-android-phone-top i{ width:7px; height:4px; border-radius:2px; background:#0d1730; } .qnx-android-app-head{ height:48px; display:flex; align-items:center; gap:11px; padding:0 7px; border-bottom:1px solid #e3eaf4; } .qnx-android-app-head strong{ flex:1; color:#0d1730; font-size:12px; } .qnx-android-menu{ color:#0758d8; font-size:14px; } .qnx-android-avatar{ width:27px; height:27px; display:grid; place-items:center; border-radius:50%; background:#0758d8; color:#fff; font-size:10px; font-weight:900; } .qnx-android-welcome{ padding:23px 9px 17px; } .qnx-android-welcome small{ display:block; margin-bottom:5px; color:#08a8cf; font-size:7px; font-weight:900; letter-spacing:1.2px; } .qnx-android-welcome strong{ color:#0d1730; font-size:16px; } .qnx-android-stat{ display:flex; align-items:center; justify-content:space-between; margin:0 8px; padding:17px; border-radius:12px; background:#f4f8ff; } .qnx-android-stat small{ display:block; margin-bottom:5px; color:#5d6b84; font-size:7px; font-weight:800; } .qnx-android-stat strong{ color:#0758d8; font-size:28px; } .qnx-android-mini-chart{ height:45px; display:flex; align-items:end; gap:4px; } .qnx-android-mini-chart i{ width:5px; border-radius:4px 4px 0 0; background:#08a8cf; } .qnx-android-mini-chart i:nth-child(1){height:17px} .qnx-android-mini-chart i:nth-child(2){height:26px} .qnx-android-mini-chart i:nth-child(3){height:21px} .qnx-android-mini-chart i:nth-child(4){height:35px} .qnx-android-mini-chart i:nth-child(5){height:29px} .qnx-android-mini-chart i:nth-child(6){height:42px;background:#79c91c} .qnx-android-app-row{ margin:13px 8px; display:grid; grid-template-columns:repeat(3,1fr); gap:7px; } .qnx-android-app-row div{ padding:12px 8px; border:1px solid #e3eaf4; border-radius:9px; } .qnx-android-app-row span{ display:block; color:#5d6b84; font-size:6px; } .qnx-android-app-row b{ display:block; margin-top:5px; color:#0d1730; font-size:14px; } .qnx-android-bottom-nav{ position:absolute; left:14px; right:14px; bottom:12px; height:48px; display:flex; align-items:center; justify-content:space-around; border-top:1px solid #e3eaf4; background:#fff; } .qnx-android-bottom-nav span{ color:#8a98ad; font-size:14px; } .qnx-android-bottom-nav .active{ color:#0758d8; } .qnx-android-float{ position:absolute; z-index:4; padding:11px 14px; background:#fff; box-shadow:0 16px 35px rgba(0,0,0,.18); } .qnx-android-float span{ display:block; margin-bottom:3px; color:#08a8cf; font-size:7px; font-weight:900; letter-spacing:1px; } .qnx-android-float b{ color:#0d1730; font-size:10px; } .qnx-android-float-one{ top:145px; left:50px; } .qnx-android-float-two{ right:42px; top:270px; } .qnx-android-float-three{ left:65px; bottom:80px; } /* EXPERIENCE */ .qnx-android-experience{ padding:110px 7%; background:#fff; } .qnx-android-section-head{ max-width:800px; margin:0 auto 60px; text-align:center; } .qnx-android-section-head h2{ margin:18px 0; color:#0d1730; font-size:clamp(35px,4vw,57px); line-height:1.05; letter-spacing:-2px; } .qnx-android-section-head p{ max-width:650px; margin:auto; color:#5d6b84; line-height:1.8; } .qnx-android-experience-board{ max-width:1250px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #dce6f3; border-bottom:1px solid #dce6f3; } .qnx-android-experience-board article{ min-height:250px; padding:32px 27px; border-right:1px solid #dce6f3; transition:.35s ease; } .qnx-android-experience-board article:last-child{ border-right:0; } .qnx-android-experience-board article:hover{ background:#f4f8ff; transform:translateY(-5px); } .qnx-android-exp-icon{ margin-bottom:55px; color:#0758d8; font-size:9px; font-weight:900; letter-spacing:1.5px; } .qnx-android-experience-board h3{ margin:0 0 10px; color:#0d1730; font-size:22px; } .qnx-android-experience-board p{ margin:0; color:#5d6b84; font-size:13px; line-height:1.7; } /* ARCHITECTURE */ .qnx-android-architecture{ padding:110px 7%; display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; background:#f4f8ff; } .qnx-android-architecture-copy{ max-width:620px; margin-left:auto; } .qnx-android-architecture-copy h2{ margin:18px 0; color:#0d1730; font-size:clamp(36px,4vw,58px); line-height:1.04; letter-spacing:-2.2px; } .qnx-android-architecture-copy > p{ color:#5d6b84; line-height:1.8; } .qnx-android-layer-list{ margin-top:35px; border-top:1px solid #dce6f3; } .qnx-android-layer-list div{ display:grid; grid-template-columns:35px 1fr; column-gap:12px; padding:15px 0; border-bottom:1px solid #dce6f3; } .qnx-android-layer-list span{ color:#08a8cf; font-size:8px; font-weight:900; } .qnx-android-layer-list strong{ color:#0d1730; font-size:13px; } .qnx-android-layer-list small{ grid-column:2; margin-top:3px; color:#5d6b84; font-size:10px; } .qnx-android-architecture-visual{ min-height:520px; position:relative; display:flex; align-items:center; justify-content:center; background:#062d7a; } .qnx-android-architecture-visual:before{ content:""; position:absolute; inset:30px; border:1px solid rgba(255,255,255,.12); } .qnx-android-arch-device{ position:relative; width:220px; padding:13px; border:5px solid #0d1730; border-radius:27px; background:#fff; box-shadow:0 25px 55px rgba(0,0,0,.25); z-index:3; } .qnx-android-arch-device > span{ display:block; padding:5px; color:#0758d8; font-size:7px; font-weight:900; letter-spacing:1px; } .qnx-android-arch-screen{ padding:20px 14px; background:#f4f8ff; } .qnx-android-screen-bar{ width:55%; height:7px; background:#0758d8; } .qnx-android-screen-title{ width:75%; height:14px; margin:13px 0; background:#0d1730; } .qnx-android-screen-blocks{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; } .qnx-android-screen-blocks i{ height:65px; background:#fff; border:1px solid #dce6f3; } .qnx-android-screen-blocks i:nth-child(2){ background:#08a8cf; } .qnx-android-screen-blocks i:nth-child(3){ background:#79c91c; } .qnx-android-screen-button{ margin-top:14px; padding:9px; text-align:center; background:#0758d8; color:#fff; font-size:7px; font-weight:800; } .qnx-android-arch-lines{ position:absolute; right:25%; display:flex; flex-direction:column; gap:28px; z-index:1; } .qnx-android-arch-lines span{ width:100px; height:1px; background:#08a8cf; } .qnx-android-arch-stack{ position:absolute; right:10%; display:flex; flex-direction:column; gap:10px; } .qnx-android-arch-stack div{ width:135px; padding:15px; background:#fff; box-shadow:0 10px 25px rgba(0,0,0,.16); } .qnx-android-arch-stack b{ display:block; color:#0758d8; font-size:10px; } .qnx-android-arch-stack span{ display:block; margin-top:3px; color:#5d6b84; font-size:7px; letter-spacing:1px; } /* CAPABILITIES */ .qnx-android-capabilities{ padding:110px 7%; background:#fff; } .qnx-android-capabilities-head{ max-width:1250px; margin:auto; } .qnx-android-capabilities-head h2{ margin:18px 0 55px; color:#0d1730; font-size:clamp(37px,4.3vw,60px); line-height:1.02; letter-spacing:-2.5px; } .qnx-android-capability-grid{ max-width:1250px; margin:auto; border-top:1px solid #dce6f3; } .qnx-android-capability{ min-height:125px; display:grid; grid-template-columns:70px 1fr 35px; align-items:center; gap:20px; padding:20px 15px; border-bottom:1px solid #dce6f3; transition:.35s ease; } .qnx-android-capability:hover{ padding-left:28px; background:#f4f8ff; } .qnx-android-capability > span{ color:#08a8cf; font-size:9px; font-weight:900; } .qnx-android-capability h3{ margin:0 0 7px; color:#0d1730; font-size:19px; } .qnx-android-capability p{ max-width:680px; margin:0; color:#5d6b84; font-size:12px; line-height:1.65; } .qnx-android-capability > b{ color:#0758d8; font-size:21px; transition:.3s ease; } .qnx-android-capability:hover > b{ transform:translate(4px,-4px); } /* BUILD */ .qnx-android-build{ padding:105px 7%; background:#0d1730; } .qnx-android-build-inner{ max-width:1250px; margin:auto; } .qnx-android-build-title{ display:flex; justify-content:space-between; align-items:end; gap:50px; } .qnx-android-build-title .qnx-android-kicker{ color:#b7e51c; } .qnx-android-build-title h2{ margin:18px 0 0; color:#fff; font-size:clamp(37px,4vw,57px); line-height:1.03; letter-spacing:-2px; } .qnx-android-build-track{ margin-top:65px; display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:18px; } .qnx-android-build-step{ min-height:165px; padding:23px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.035); } .qnx-android-build-step span{ color:#08a8cf; font-size:8px; font-weight:900; letter-spacing:1.5px; } .qnx-android-build-step strong{ display:block; margin:24px 0 8px; color:#fff; font-size:19px; } .qnx-android-build-step p{ margin:0; color:#91a5c4; font-size:11px; line-height:1.65; } .qnx-android-build-arrow{ color:#79c91c; font-size:22px; } /* QUALITY */ .qnx-android-quality{ padding:110px 7%; background:#f4f8ff; } .qnx-android-quality-wrap{ max-width:1250px; margin:auto; display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; align-items:center; } .qnx-android-quality-visual{ min-height:470px; display:grid; place-items:center; background:#fff; border:1px solid #dce6f3; } .qnx-android-quality-phone{ width:225px; height:395px; padding:15px; border:6px solid #0d1730; border-radius:30px; background:#fff; box-shadow:0 22px 50px rgba(17,55,110,.14); } .qnx-android-quality-status{ width:65px; height:8px; margin:0 auto 28px; border-radius:10px; background:#0d1730; } .qnx-android-quality-card{ padding:20px; background:#0758d8; } .qnx-android-quality-card small{ display:block; color:#b7e51c; font-size:7px; font-weight:900; letter-spacing:1px; } .qnx-android-quality-card strong{ display:block; margin:8px 0 17px; color:#fff; font-size:24px; } .qnx-android-quality-bar{ height:4px; background:rgba(255,255,255,.25); } .qnx-android-quality-bar i{ display:block; width:84%; height:100%; background:#b7e51c; } .qnx-android-quality-list{ margin-top:18px; display:grid; grid-template-columns:1fr auto; } .qnx-android-quality-list span, .qnx-android-quality-list b{ padding:11px 0; border-bottom:1px solid #e3eaf4; font-size:9px; } .qnx-android-quality-list span{ color:#5d6b84; } .qnx-android-quality-list b{ color:#16b98a; } .qnx-android-quality-copy h2{ margin:18px 0; color:#0d1730; font-size:clamp(37px,4vw,57px); line-height:1.04; letter-spacing:-2.2px; } .qnx-android-quality-copy > p{ max-width:600px; color:#5d6b84; line-height:1.85; } .qnx-android-quality-points{ margin-top:30px; display:grid; grid-template-columns:1fr 1fr; gap:10px; } .qnx-android-quality-points span{ padding:13px 15px; background:#fff; border-left:3px solid #0758d8; color:#0d1730; font-size:10px; font-weight:750; } /* FINAL */ .qnx-android-final{ min-height:540px; display:grid; place-items:center; padding:100px 7%; background:linear-gradient(120deg,#062d7a 0%,#0758d8 58%,#08a8cf 100%); } .qnx-android-final-glow{ position:absolute; width:420px; height:420px; right:-100px; top:-160px; border-radius:50%; background:rgba(183,229,28,.11); filter:blur(25px); } .qnx-android-final-content{ position:relative; z-index:2; max-width:800px; text-align:center; } .qnx-android-final-content .qnx-android-kicker{ color:#b7e51c; } .qnx-android-final-content h2{ margin:18px 0; color:#fff; font-size:clamp(43px,5vw,70px); line-height:1; letter-spacing:-3px; } .qnx-android-final-content p{ max-width:620px; margin:auto; color:rgba(255,255,255,.8); line-height:1.8; } .qnx-android-final-btn{ margin-top:32px; display:inline-flex; align-items:center; gap:20px; padding:14px 15px 14px 23px; background:#fff; color:#0758d8; text-decoration:none; font-size:11px; font-weight:850; transition:.3s ease; } .qnx-android-final-btn b{ width:35px; height:35px; display:grid; place-items:center; background:#0758d8; color:#fff; font-size:17px; } .qnx-android-final-btn:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.2); } .qnx-android-final-device{ position:absolute; right:7%; bottom:60px; width:130px; height:205px; padding:25px 13px; display:flex; flex-direction:column; justify-content:flex-end; border:4px solid rgba(255,255,255,.3); border-radius:24px; transform:rotate(9deg); opacity:.5; } .qnx-android-final-device span{ color:#b7e51c; font-size:18px; font-weight:900; } .qnx-android-final-device small{ margin-top:5px; color:#fff; font-size:6px; letter-spacing:1px; } /* RESPONSIVE */ @media(max-width:1100px){ .qnx-android-intro-wrap, .qnx-android-quality-wrap{ grid-template-columns:1fr; } .qnx-android-intro-copy{ max-width:800px; } .qnx-android-experience-board{ grid-template-columns:1fr 1fr; } .qnx-android-experience-board article:nth-child(2){ border-right:0; } .qnx-android-experience-board article:nth-child(-n+2){ border-bottom:1px solid #dce6f3; } .qnx-android-architecture{ grid-template-columns:1fr; } .qnx-android-architecture-copy{ margin:0; max-width:800px; } .qnx-android-build-track{ grid-template-columns:1fr 1fr; } .qnx-android-build-arrow{ display:none; } .qnx-android-quality-copy{ max-width:800px; } } @media(max-width:760px){ .qnx-android-intro, .qnx-android-experience, .qnx-android-architecture, .qnx-android-capabilities, .qnx-android-build, .qnx-android-quality{ padding:75px 6%; } .qnx-android-intro-copy h2{ font-size:43px; } .qnx-android-device-lab{ min-height:520px; } .qnx-android-float-one{ left:20px; } .qnx-android-float-two{ right:18px; } .qnx-android-float-three{ left:25px; bottom:45px; } .qnx-android-experience-board{ grid-template-columns:1fr; } .qnx-android-experience-board article{ border-right:0; border-bottom:1px solid #dce6f3; } .qnx-android-experience-board article:last-child{ border-bottom:0; } .qnx-android-experience-board article:nth-child(2){ border-bottom:1px solid #dce6f3; } .qnx-android-architecture-visual{ min-height:430px; } .qnx-android-arch-device{ width:180px; } .qnx-android-arch-stack{ right:4%; } .qnx-android-arch-stack div{ width:105px; padding:11px; } .qnx-android-arch-lines{ right:24%; } .qnx-android-build-track{ grid-template-columns:1fr; } .qnx-android-build-step{ min-height:auto; } .qnx-android-quality-visual{ min-height:410px; } .qnx-android-quality-points{ grid-template-columns:1fr; } .qnx-android-final{ min-height:500px; padding:80px 6%; } .qnx-android-final-content h2{ font-size:43px; } .qnx-android-final-device{ display:none; } } @media(max-width:460px){ .qnx-android-intro-copy h2{ font-size:39px; letter-spacing:-2px; } .qnx-android-device-lab{ min-height:490px; } .qnx-android-phone{ width:245px; height:470px; } .qnx-android-lab-label{ left:25px; right:25px; top:28px; } .qnx-android-float{ transform:scale(.85); } .qnx-android-float-one{ left:5px; } .qnx-android-float-two{ right:2px; } .qnx-android-float-three{ left:8px; bottom:20px; } .qnx-android-architecture-visual{ min-height:380px; } .qnx-android-arch-device{ width:150px; } .qnx-android-arch-stack{ right:2%; } .qnx-android-arch-stack div{ width:85px; } .qnx-android-capability{ grid-template-columns:35px 1fr 20px; gap:10px; } .qnx-android-final-content h2{ font-size:39px; letter-spacing:-2px; } } /* ========================================================= QNIX DIGITAL — IOS APP DEVELOPMENT ========================================================= */ .qnx-ios-intro, .qnx-ios-philosophy, .qnx-ios-interaction, .qnx-ios-product, .qnx-ios-capabilities, .qnx-ios-craft, .qnx-ios-build, .qnx-ios-final{ position:relative; width:100%; overflow:hidden; } .qnx-ios-intro{ padding:105px 7%; background:#f4f8ff; } .qnx-ios-intro-wrap{ max-width:1320px; margin:auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:85px; align-items:center; } .qnx-ios-kicker{ display:inline-flex; align-items:center; gap:10px; color:#0758d8; font-size:10px; font-weight:900; letter-spacing:2px; } .qnx-ios-kicker:before{ content:""; width:25px; height:2px; background:#79c91c; } .qnx-ios-intro-copy h2{ margin:18px 0 20px; color:#0d1730; font-size:clamp(43px,5vw,72px); line-height:1; letter-spacing:-3px; font-weight:500; } .qnx-ios-intro-copy h2 strong{ color:#0758d8; font-weight:850; } .qnx-ios-intro-copy p{ max-width:570px; margin:0; color:#5d6b84; font-size:16px; line-height:1.85; } .qnx-ios-intro-meta{ margin-top:30px; display:flex; flex-wrap:wrap; gap:8px; } .qnx-ios-intro-meta span{ padding:10px 14px; background:#fff; border:1px solid #dce6f3; color:#0d1730; font-size:10px; font-weight:750; } /* IOS STAGE */ .qnx-ios-stage{ position:relative; min-height:570px; display:flex; justify-content:center; align-items:center; background:#fff; border:1px solid #dce6f3; isolation:isolate; } .qnx-ios-stage:before{ content:""; position:absolute; inset:26px; border:1px solid #e3eaf4; } .qnx-ios-stage:after{ content:""; position:absolute; width:300px; height:300px; border-radius:50%; background:rgba(8,168,207,.07); filter:blur(8px); z-index:-1; } .qnx-ios-stage-word{ position:absolute; top:35px; right:45px; color:#e3eaf4; font-size:90px; line-height:1; font-weight:900; letter-spacing:-7px; } .qnx-ios-phone{ position:relative; width:275px; height:535px; padding:14px; border:7px solid #0d1730; border-radius:39px; background:#fff; box-shadow:0 30px 65px rgba(13,23,48,.18); transform:rotate(2deg); transition:.45s ease; z-index:3; } .qnx-ios-phone:hover{ transform:rotate(0deg) translateY(-8px); } .qnx-ios-phone:before{ content:""; position:absolute; top:-2px; left:50%; width:80px; height:20px; transform:translateX(-50%); border-radius:0 0 13px 13px; background:#0d1730; } .qnx-ios-dynamic{ position:absolute; top:7px; left:50%; width:58px; height:7px; transform:translateX(-50%); border-radius:10px; background:#000; z-index:5; } .qnx-ios-status{ height:29px; padding:0 9px; display:flex; justify-content:space-between; align-items:center; color:#0d1730; font-size:8px; font-weight:800; } .qnx-ios-status div{ display:flex; gap:3px; } .qnx-ios-status i{ width:7px; height:4px; border-radius:2px; background:#0d1730; } .qnx-ios-appbar{ padding:14px 9px 19px; border-bottom:1px solid #e3eaf4; } .qnx-ios-appbar small{ display:block; margin-bottom:5px; color:#08a8cf; font-size:6px; font-weight:900; letter-spacing:1.2px; } .qnx-ios-appbar strong{ color:#0d1730; font-size:22px; letter-spacing:-.5px; } .qnx-ios-appbar > span{ float:right; color:#0758d8; font-size:13px; } .qnx-ios-feature{ margin:17px 8px 10px; padding:20px; background:#0758d8; border-radius:14px; color:#fff; } .qnx-ios-feature span{ display:block; margin-bottom:9px; color:#b7e51c; font-size:7px; font-weight:900; letter-spacing:1.2px; } .qnx-ios-feature strong{ display:block; margin-bottom:14px; font-size:34px; letter-spacing:-2px; } .qnx-ios-progress{ height:4px; background:rgba(255,255,255,.22); } .qnx-ios-progress i{ display:block; width:84%; height:100%; background:#b7e51c; } .qnx-ios-cards{ margin:10px 8px; display:grid; grid-template-columns:1fr 1fr; gap:8px; } .qnx-ios-cards div{ padding:15px; border:1px solid #e3eaf4; border-radius:11px; } .qnx-ios-cards small{ display:block; color:#5d6b84; font-size:7px; } .qnx-ios-cards b{ display:block; margin-top:5px; color:#0d1730; font-size:22px; } .qnx-ios-action{ margin:13px 8px; padding:14px; display:flex; justify-content:space-between; align-items:center; border:1px solid #dce6f3; border-radius:11px; color:#0d1730; font-size:9px; font-weight:700; } .qnx-ios-action b{ color:#0758d8; font-size:17px; } .qnx-ios-tabbar{ position:absolute; left:14px; right:14px; bottom:12px; height:47px; display:flex; justify-content:space-around; align-items:center; border-top:1px solid #e3eaf4; background:#fff; } .qnx-ios-tabbar span{ color:#9aa7b9; font-size:14px; } .qnx-ios-tabbar .active{ color:#0758d8; } .qnx-ios-float{ position:absolute; padding:13px 16px; background:#fff; box-shadow:0 15px 35px rgba(17,55,110,.12); z-index:4; } .qnx-ios-float small{ display:block; margin-bottom:4px; color:#08a8cf; font-size:7px; font-weight:900; letter-spacing:1px; } .qnx-ios-float strong{ color:#0d1730; font-size:10px; } .qnx-ios-float-one{ left:45px; top:165px; } .qnx-ios-float-two{ right:40px; bottom:150px; } /* PHILOSOPHY */ .qnx-ios-philosophy{ padding:110px 7%; background:#fff; } .qnx-ios-philosophy-head{ max-width:780px; margin:0 auto 60px; text-align:center; } .qnx-ios-philosophy-head h2{ margin:18px 0; color:#0d1730; font-size:clamp(37px,4vw,58px); line-height:1.04; letter-spacing:-2.4px; } .qnx-ios-philosophy-head p{ max-width:650px; margin:auto; color:#5d6b84; line-height:1.8; } .qnx-ios-principles{ max-width:1250px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #dce6f3; border-bottom:1px solid #dce6f3; } .qnx-ios-principles article{ min-height:270px; padding:30px 27px; border-right:1px solid #dce6f3; transition:.35s ease; } .qnx-ios-principles article:last-child{ border-right:0; } .qnx-ios-principles article:hover{ background:#f4f8ff; transform:translateY(-5px); } .qnx-ios-principles article > span{ color:#0758d8; font-size:9px; font-weight:900; } .qnx-ios-principle-line{ width:35px; height:2px; margin:45px 0 18px; background:#79c91c; } .qnx-ios-principles h3{ margin:0 0 10px; color:#0d1730; font-size:22px; } .qnx-ios-principles p{ margin:0; color:#5d6b84; font-size:13px; line-height:1.7; } /* INTERACTION */ .qnx-ios-interaction{ padding:110px 7%; background:#f4f8ff; } .qnx-ios-interaction-wrap{ max-width:1250px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; } .qnx-ios-interaction-visual{ position:relative; min-height:530px; display:grid; place-items:center; background:#062d7a; overflow:hidden; } .qnx-ios-interaction-visual:before{ content:""; position:absolute; inset:25px; border:1px solid rgba(8,168,207,.2); } .qnx-ios-gesture-phone{ position:relative; width:250px; height:470px; padding:14px; border:6px solid #0d1730; border-radius:35px; background:#fff; transform:rotate(-5deg); box-shadow:0 28px 55px rgba(0,0,0,.25); z-index:3; } .qnx-ios-gesture-top{ width:70px; height:15px; margin:0 auto 14px; border-radius:0 0 10px 10px; background:#0d1730; } .qnx-ios-gesture-screen{ height:385px; padding:35px 20px; background:linear-gradient(145deg,#f4f8ff,#fff); } .qnx-ios-gesture-screen > span{ display:block; color:#08a8cf; font-size:7px; font-weight:900; letter-spacing:1.5px; } .qnx-ios-gesture-screen > strong{ display:block; margin-top:14px; color:#0d1730; font-size:27px; line-height:1.05; letter-spacing:-1.2px; } .qnx-ios-swipe-card{ position:relative; margin-top:65px; padding:20px; background:#0758d8; box-shadow:0 15px 35px rgba(7,88,216,.2); } .qnx-ios-swipe-card small{ display:block; color:#b7e51c; font-size:7px; font-weight:900; letter-spacing:1px; } .qnx-ios-swipe-card b{ display:block; margin-top:8px; color:#fff; font-size:14px; } .qnx-ios-swipe-card i{ position:absolute; right:18px; bottom:17px; color:#fff; font-style:normal; font-size:18px; } .qnx-ios-gesture-home{ position:absolute; bottom:7px; left:50%; width:65px; height:4px; transform:translateX(-50%); border-radius:5px; background:#0d1730; } .qnx-ios-gesture-trail{ position:absolute; left:18%; top:48%; display:flex; gap:9px; } .qnx-ios-gesture-trail i{ width:8px; height:8px; border-radius:50%; background:#b7e51c; } .qnx-ios-gesture-trail i:nth-child(2){ opacity:.6; } .qnx-ios-gesture-trail i:nth-child(3){ opacity:.25; } .qnx-ios-gesture-label{ position:absolute; right:32px; top:40px; color:#b7e51c; font-size:8px; font-weight:900; letter-spacing:1.3px; } .qnx-ios-interaction-copy h2{ margin:18px 0; color:#0d1730; font-size:clamp(38px,4vw,58px); line-height:1.04; letter-spacing:-2.4px; } .qnx-ios-interaction-copy > p{ color:#5d6b84; line-height:1.85; } .qnx-ios-interaction-list{ margin-top:32px; border-top:1px solid #dce6f3; } .qnx-ios-interaction-list div{ padding:15px 0; display:flex; justify-content:space-between; border-bottom:1px solid #dce6f3; } .qnx-ios-interaction-list span{ color:#5d6b84; font-size:11px; } .qnx-ios-interaction-list b{ color:#0758d8; font-size:11px; } /* PRODUCT MAP */ .qnx-ios-product{ padding:110px 7%; background:#fff; } .qnx-ios-product-head{ max-width:1250px; margin:auto; } .qnx-ios-product-head h2{ margin:18px 0 60px; color:#0d1730; font-size:clamp(38px,4.5vw,60px); line-height:1; letter-spacing:-2.5px; } .qnx-ios-product-map{ max-width:1250px; margin:auto; display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:18px; align-items:center; } .qnx-ios-product-screen{ min-height:240px; padding:25px; border:1px solid #dce6f3; background:#f4f8ff; transition:.35s ease; } .qnx-ios-product-screen:hover{ transform:translateY(-7px); box-shadow:0 20px 45px rgba(17,55,110,.1); } .qnx-ios-product-screen small{ color:#08a8cf; font-size:7px; font-weight:900; letter-spacing:1.2px; } .qnx-ios-product-screen strong{ display:block; margin:25px 0; color:#0d1730; font-size:27px; letter-spacing:-1px; } .qnx-ios-screen-button{ padding:12px; text-align:center; background:#0758d8; color:#fff; font-size:8px; font-weight:900; } .qnx-ios-screen-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7px; } .qnx-ios-screen-grid i{ height:55px; background:#fff; border:1px solid #dce6f3; } .qnx-ios-screen-grid i:nth-child(2){ background:#08a8cf; } .qnx-ios-screen-grid i:nth-child(3){ background:#0758d8; } .qnx-ios-screen-grid i:nth-child(4){ background:#79c91c; } .qnx-ios-check{ width:65px; height:65px; display:grid; place-items:center; border-radius:50%; background:#16b98a; color:#fff; font-size:27px; font-weight:900; } .qnx-ios-product-connector{ display:flex; align-items:center; gap:6px; } .qnx-ios-product-connector span{ width:55px; height:1px; background:#08a8cf; } .qnx-ios-product-connector b{ color:#0758d8; font-size:20px; } /* CAPABILITIES */ .qnx-ios-capabilities{ padding:110px 7%; background:#f4f8ff; } .qnx-ios-capabilities-wrap{ max-width:1250px; margin:auto; display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; } .qnx-ios-capabilities-title h2{ margin:18px 0; color:#0d1730; font-size:clamp(38px,4vw,58px); line-height:1.03; letter-spacing:-2.3px; } .qnx-ios-capability-list{ border-top:1px solid #dce6f3; } .qnx-ios-capability-list > div{ min-height:120px; display:grid; grid-template-columns:45px 1fr 30px; align-items:center; gap:20px; padding:18px 12px; border-bottom:1px solid #dce6f3; transition:.35s ease; } .qnx-ios-capability-list > div:hover{ padding-left:25px; background:#fff; } .qnx-ios-capability-list > div > span{ color:#08a8cf; font-size:8px; font-weight:900; } .qnx-ios-capability-list h3{ margin:0 0 7px; color:#0d1730; font-size:18px; } .qnx-ios-capability-list p{ margin:0; color:#5d6b84; font-size:11px; line-height:1.65; } .qnx-ios-capability-list > div > b{ color:#0758d8; font-size:19px; } /* CRAFT */ .qnx-ios-craft{ padding:110px 7%; background:#062d7a; } .qnx-ios-craft-grid{ position:absolute; inset:0; opacity:.12; background-image: linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px); background-size:60px 60px; } .qnx-ios-craft-wrap{ position:relative; z-index:2; max-width:1250px; margin:auto; display:grid; grid-template-columns:1fr .9fr; gap:100px; align-items:center; } .qnx-ios-craft-copy .qnx-ios-kicker{ color:#b7e51c; } .qnx-ios-craft-copy h2{ margin:18px 0; color:#fff; font-size:clamp(38px,4vw,58px); line-height:1.04; letter-spacing:-2.4px; } .qnx-ios-craft-copy > p{ max-width:580px; color:#9db0cc; line-height:1.85; } .qnx-ios-craft-points{ margin-top:30px; display:grid; grid-template-columns:1fr 1fr; gap:9px; } .qnx-ios-craft-points span{ padding:13px; border:1px solid rgba(255,255,255,.13); color:#fff; font-size:9px; } .qnx-ios-craft-stack{ position:relative; min-height:400px; } .qnx-ios-stack-layer{ position:absolute; width:330px; height:180px; padding:28px; display:flex; flex-direction:column; justify-content:flex-end; box-shadow:0 25px 50px rgba(0,0,0,.2); } .qnx-ios-stack-layer small{ color:#08a8cf; font-size:7px; font-weight:900; letter-spacing:1.4px; } .qnx-ios-stack-layer strong{ margin-top:7px; color:#0d1730; font-size:22px; } .layer-back{ top:30px; left:20px; background:#dce9f8; transform:rotate(-7deg); } .layer-middle{ top:95px; left:65px; background:#fff; transform:rotate(3deg); } .layer-front{ top:165px; left:110px; background:#087ee7; transform:rotate(-2deg); } .layer-front small{ color:#b7e51c; } .layer-front strong{ color:#fff; } .layer-front span{ position:absolute; right:22px; top:20px; color:rgba(255,255,255,.5); font-size:9px; font-weight:900; } /* BUILD */ .qnx-ios-build{ padding:105px 7%; background:#fff; } .qnx-ios-build-head{ max-width:1250px; margin:auto; } .qnx-ios-build-head h2{ margin:18px 0 60px; color:#0d1730; font-size:clamp(38px,4vw,58px); line-height:1.03; letter-spacing:-2.3px; } .qnx-ios-build-line{ max-width:1250px; margin:auto; display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:18px; } .qnx-ios-build-line > div{ min-height:170px; padding:23px; border-top:3px solid #0758d8; background:#f4f8ff; } .qnx-ios-build-line > div span{ color:#08a8cf; font-size:8px; font-weight:900; letter-spacing:1.4px; } .qnx-ios-build-line > div strong{ display:block; margin:23px 0 8px; color:#0d1730; font-size:19px; } .qnx-ios-build-line > div p{ margin:0; color:#5d6b84; font-size:11px; line-height:1.65; } .qnx-ios-build-line > i{ color:#0758d8; font-style:normal; font-size:22px; } /* FINAL */ .qnx-ios-final{ min-height:550px; display:grid; place-items:center; padding:100px 7%; background:linear-gradient(120deg,#062d7a 0%,#0758d8 55%,#08a8cf 100%); } .qnx-ios-final-glow{ position:absolute; width:400px; height:400px; right:-100px; top:-160px; border-radius:50%; background:rgba(183,229,28,.1); filter:blur(25px); } .qnx-ios-final-content{ position:relative; z-index:2; max-width:800px; text-align:center; } .qnx-ios-final-content .qnx-ios-kicker{ color:#b7e51c; } .qnx-ios-final-content h2{ margin:18px 0; color:#fff; font-size:clamp(43px,5vw,70px); line-height:1; letter-spacing:-3px; } .qnx-ios-final-content p{ max-width:620px; margin:auto; color:rgba(255,255,255,.8); line-height:1.8; } .qnx-ios-final-btn{ margin-top:32px; display:inline-flex; align-items:center; gap:20px; padding:14px 15px 14px 23px; background:#fff; color:#0758d8; text-decoration:none; font-size:11px; font-weight:850; transition:.3s ease; } .qnx-ios-final-btn b{ width:35px; height:35px; display:grid; place-items:center; background:#0758d8; color:#fff; font-size:17px; } .qnx-ios-final-btn:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.2); } .qnx-ios-final-mark{ position:absolute; right:7%; bottom:55px; width:135px; height:185px; padding:24px 16px; display:flex; flex-direction:column; justify-content:flex-end; border:3px solid rgba(255,255,255,.25); border-radius:28px; transform:rotate(8deg); opacity:.5; } .qnx-ios-final-mark span{ color:#b7e51c; font-size:24px; font-weight:900; } .qnx-ios-final-mark small{ margin-top:5px; color:#fff; font-size:6px; line-height:1.6; letter-spacing:1.2px; } /* RESPONSIVE */ @media(max-width:1100px){ .qnx-ios-intro-wrap, .qnx-ios-interaction-wrap, .qnx-ios-craft-wrap{ grid-template-columns:1fr; } .qnx-ios-intro-copy{ max-width:800px; } .qnx-ios-principles{ grid-template-columns:1fr 1fr; } .qnx-ios-principles article:nth-child(2){ border-right:0; } .qnx-ios-principles article:nth-child(-n+2){ border-bottom:1px solid #dce6f3; } .qnx-ios-capabilities-wrap{ grid-template-columns:1fr; gap:50px; } .qnx-ios-product-map{ grid-template-columns:1fr; } .qnx-ios-product-connector{ justify-content:center; transform:rotate(90deg); } .qnx-ios-build-line{ grid-template-columns:1fr 1fr; } .qnx-ios-build-line > i{ display:none; } } @media(max-width:760px){ .qnx-ios-intro, .qnx-ios-philosophy, .qnx-ios-interaction, .qnx-ios-product, .qnx-ios-capabilities, .qnx-ios-craft, .qnx-ios-build{ padding:75px 6%; } .qnx-ios-intro-copy h2{ font-size:43px; } .qnx-ios-stage{ min-height:530px; } .qnx-ios-float-one{ left:15px; } .qnx-ios-float-two{ right:15px; } .qnx-ios-principles{ grid-template-columns:1fr; } .qnx-ios-principles article{ border-right:0; border-bottom:1px solid #dce6f3; } .qnx-ios-principles article:last-child{ border-bottom:0; } .qnx-ios-principles article:nth-child(2){ border-bottom:1px solid #dce6f3; } .qnx-ios-interaction-visual{ min-height:500px; } .qnx-ios-gesture-phone{ width:225px; height:435px; } .qnx-ios-gesture-screen{ height:350px; } .qnx-ios-swipe-card{ margin-top:50px; } .qnx-ios-craft-stack{ min-height:390px; } .qnx-ios-stack-layer{ width:275px; height:160px; } .layer-middle{ left:40px; } .layer-front{ left:75px; } .qnx-ios-build-line{ grid-template-columns:1fr; } .qnx-ios-final{ min-height:500px; padding:80px 6%; } .qnx-ios-final-content h2{ font-size:43px; } .qnx-ios-final-mark{ display:none; } } @media(max-width:460px){ .qnx-ios-intro-copy h2{ font-size:39px; letter-spacing:-2px; } .qnx-ios-stage{ min-height:500px; } .qnx-ios-phone{ width:245px; height:480px; } .qnx-ios-stage-word{ font-size:70px; right:20px; } .qnx-ios-float{ transform:scale(.82); } .qnx-ios-float-one{ left:-2px; } .qnx-ios-float-two{ right:-3px; } .qnx-ios-product-screen{ min-height:210px; } .qnx-ios-craft-stack{ min-height:350px; } .qnx-ios-stack-layer{ width:235px; height:145px; } .layer-middle{ left:25px; } .layer-front{ left:50px; } .qnx-ios-final-content h2{ font-size:39px; letter-spacing:-2px; } } /* ========================================================= QNIX DIGITAL — ENTERPRISE MOBILE APPLICATIONS ========================================================= */ .qnx-enterprise-intro, .qnx-enterprise-workflow, .qnx-enterprise-roles, .qnx-enterprise-stack, .qnx-enterprise-capabilities, .qnx-enterprise-scale, .qnx-enterprise-final{ position:relative; overflow:hidden; font-family:inherit; } .qnx-enterprise-intro{ min-height:680px; background:#f4f8ff; padding:88px 6%; } .qnx-enterprise-intro-grid, .qnx-enterprise-final-grid{ position:absolute; inset:0; pointer-events:none; opacity:.45; background-image: linear-gradient(rgba(7,88,216,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.055) 1px,transparent 1px); background-size:54px 54px; } .qnx-enterprise-intro-inner{ position:relative; z-index:2; max-width:1320px; margin:auto; display:grid; grid-template-columns:.88fr 1.12fr; gap:70px; align-items:center; } .qnx-enterprise-intro-copy{ max-width:600px; } .qnx-enterprise-kicker, .qnx-enterprise-section-head > span, .qnx-enterprise-roles-copy > span, .qnx-enterprise-stack-heading > span, .qnx-enterprise-capabilities-head > span, .qnx-enterprise-scale-copy > span, .qnx-enterprise-final-content > span{ display:block; color:#0758d8; font-size:11px; font-weight:800; letter-spacing:2.2px; margin-bottom:18px; } .qnx-enterprise-intro h2{ margin:0; color:#0d1730; font-size:clamp(42px,4.7vw,72px); line-height:.98; letter-spacing:-3px; font-weight:800; } .qnx-enterprise-intro-copy > p{ margin:27px 0 28px; max-width:540px; color:#5d6b84; font-size:17px; line-height:1.75; } .qnx-enterprise-intro-points{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:31px; } .qnx-enterprise-intro-points span{ padding:9px 13px; border:1px solid #dbe5f2; background:#fff; color:#0d1730; font-size:11px; font-weight:700; } .qnx-enterprise-intro-btn, .qnx-enterprise-scale-btn, .qnx-enterprise-final-btn{ display:inline-flex; align-items:center; gap:22px; padding:15px 18px 15px 22px; color:#fff; background:#0758d8; text-decoration:none; font-size:13px; font-weight:800; transition:.3s ease; } .qnx-enterprise-intro-btn b, .qnx-enterprise-scale-btn b, .qnx-enterprise-final-btn b{ width:30px; height:30px; display:grid; place-items:center; background:#b7e51c; color:#062d7a; font-size:15px; transition:.3s ease; } .qnx-enterprise-intro-btn:hover, .qnx-enterprise-scale-btn:hover{ transform:translateY(-3px); background:#062d7a; } .qnx-enterprise-intro-btn:hover b, .qnx-enterprise-scale-btn:hover b{ transform:rotate(45deg); } .qnx-enterprise-command{ position:relative; min-height:470px; padding:21px; background:#0d1730; box-shadow:0 35px 80px rgba(6,45,122,.20); overflow:hidden; } .qnx-enterprise-command:before{ content:""; position:absolute; inset:0; background: linear-gradient(135deg,rgba(7,126,231,.18),transparent 42%), linear-gradient(315deg,rgba(16,164,180,.13),transparent 45%); } .qnx-enterprise-command-top, .qnx-enterprise-command-body{ position:relative; z-index:2; } .qnx-enterprise-command-top{ display:flex; align-items:center; justify-content:space-between; padding:4px 3px 20px; border-bottom:1px solid rgba(255,255,255,.10); } .qnx-enterprise-command-top small{ display:block; color:#7d8ca8; font-size:9px; letter-spacing:1.8px; margin-bottom:5px; } .qnx-enterprise-command-top strong{ color:#fff; font-size:17px; } .qnx-enterprise-live{ display:flex; align-items:center; gap:7px; color:#b7e51c; font-size:9px; font-weight:800; letter-spacing:1px; } .qnx-enterprise-live i{ width:7px; height:7px; border-radius:50%; background:#79c91c; box-shadow:0 0 12px rgba(121,201,28,.75); } .qnx-enterprise-command-body{ display:grid; grid-template-columns:130px 1fr; min-height:390px; } .qnx-enterprise-side{ padding:25px 14px 0 4px; border-right:1px solid rgba(255,255,255,.08); } .qnx-enterprise-side span{ display:block; padding:11px 12px; margin-bottom:4px; color:#72819c; font-size:11px; font-weight:700; transition:.25s ease; } .qnx-enterprise-side span.active, .qnx-enterprise-side span:hover{ color:#fff; background:rgba(7,126,231,.17); } .qnx-enterprise-workspace{ padding:25px 0 0 24px; } .qnx-enterprise-workspace-head{ display:flex; justify-content:space-between; align-items:end; margin-bottom:18px; } .qnx-enterprise-workspace-head small{ display:block; color:#687993; font-size:9px; letter-spacing:1.5px; margin-bottom:5px; } .qnx-enterprise-workspace-head strong{ color:#fff; font-size:18px; } .qnx-enterprise-workspace-head > span{ color:#79c91c; font-size:10px; font-weight:700; } .qnx-enterprise-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .qnx-enterprise-metrics > div{ padding:15px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035); } .qnx-enterprise-metrics small{ display:block; color:#66758f; font-size:9px; margin-bottom:8px; } .qnx-enterprise-metrics strong{ display:block; color:#fff; font-size:24px; line-height:1; } .qnx-enterprise-metrics em{ display:block; margin-top:8px; color:#79c91c; font-size:9px; font-style:normal; } .qnx-enterprise-activity{ margin-top:13px; border:1px solid rgba(255,255,255,.08); } .qnx-enterprise-activity-head{ display:flex; justify-content:space-between; padding:14px; border-bottom:1px solid rgba(255,255,255,.08); } .qnx-enterprise-activity-head span{ color:#6e7e99; font-size:9px; letter-spacing:1.3px; } .qnx-enterprise-activity-head b{ color:#08a8cf; font-size:9px; } .qnx-enterprise-activity-row{ display:grid; grid-template-columns:10px 1fr auto; gap:10px; align-items:center; padding:13px 14px; border-bottom:1px solid rgba(255,255,255,.055); } .qnx-enterprise-activity-row:last-child{ border-bottom:0; } .qnx-enterprise-dot{ width:7px; height:7px; border-radius:50%; } .qnx-enterprise-dot.green{background:#79c91c} .qnx-enterprise-dot.blue{background:#087ee7} .qnx-enterprise-dot.teal{background:#08a8cf} .qnx-enterprise-activity-row strong{ display:block; color:#eaf1ff; font-size:10px; } .qnx-enterprise-activity-row small{ display:block; color:#687993; font-size:8px; margin-top:3px; } .qnx-enterprise-activity-row > b{ color:#7e8da5; font-size:8px; } .qnx-enterprise-command-glow{ position:absolute; width:230px; height:230px; right:-110px; bottom:-110px; border-radius:50%; background:#08a8cf; filter:blur(80px); opacity:.15; } .qnx-enterprise-workflow{ padding:105px 6%; background:#fff; } .qnx-enterprise-section-head{ max-width:720px; margin:0 auto 62px; text-align:center; } .qnx-enterprise-section-head h2, .qnx-enterprise-stack-heading h2, .qnx-enterprise-capabilities-head h2{ margin:0; color:#0d1730; font-size:clamp(34px,4vw,56px); line-height:1.02; letter-spacing:-2px; } .qnx-enterprise-section-head p{ margin:20px auto 0; max-width:610px; color:#5d6b84; line-height:1.75; font-size:15px; } .qnx-enterprise-flow{ position:relative; max-width:1200px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:35px; } .qnx-enterprise-flow-line{ position:absolute; top:25px; left:9%; right:9%; height:1px; background:#cdd9ea; } .qnx-enterprise-flow-item{ position:relative; z-index:2; } .qnx-enterprise-flow-icon{ width:50px; height:50px; display:grid; place-items:center; margin-bottom:24px; border:1px solid #0758d8; background:#fff; color:#0758d8; font-size:10px; font-weight:800; } .qnx-enterprise-flow-item:nth-child(3) .qnx-enterprise-flow-icon{ border-color:#08a8cf; color:#08a8cf; } .qnx-enterprise-flow-item:nth-child(4) .qnx-enterprise-flow-icon{ border-color:#16b98a; color:#16b98a; } .qnx-enterprise-flow-item h3{ margin:0 0 10px; color:#0d1730; font-size:18px; } .qnx-enterprise-flow-item p{ margin:0; color:#68768e; font-size:13px; line-height:1.7; } .qnx-enterprise-roles{ padding:105px 6%; background:#f4f8ff; display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; } .qnx-enterprise-roles-visual{ position:relative; min-height:500px; } .qnx-enterprise-role-card{ position:absolute; width:260px; padding:23px; background:#fff; border:1px solid #dce6f3; box-shadow:0 20px 50px rgba(17,55,110,.09); transition:.4s ease; } .qnx-enterprise-role-card:hover{ transform:translateY(-7px); } .qnx-enterprise-role-one{ left:4%; top:25px; } .qnx-enterprise-role-two{ right:3%; top:145px; } .qnx-enterprise-role-three{ left:17%; bottom:20px; } .qnx-enterprise-role-card span{ display:block; color:#0758d8; font-size:8px; font-weight:800; letter-spacing:1.7px; margin-bottom:10px; } .qnx-enterprise-role-card strong{ display:block; color:#0d1730; font-size:20px; margin-bottom:6px; } .qnx-enterprise-role-card small{ color:#7a879c; font-size:10px; } .qnx-enterprise-progress{ height:6px; margin:22px 0 9px; background:#e8eef7; } .qnx-enterprise-progress i{ display:block; width:72%; height:100%; background:linear-gradient(90deg,#0758d8,#08a8cf); } .qnx-enterprise-role-card > b{ color:#0758d8; font-size:9px; } .qnx-enterprise-approval{ display:flex; justify-content:space-between; align-items:center; margin-top:22px; padding:12px; background:#f4f8ff; } .qnx-enterprise-approval em{ color:#5d6b84; font-size:10px; font-style:normal; } .qnx-enterprise-approval b{ color:#0758d8; } .qnx-enterprise-data-bars{ height:75px; margin-top:18px; display:flex; align-items:end; gap:7px; } .qnx-enterprise-data-bars i{ display:block; width:22%; background:#0758d8; } .qnx-enterprise-data-bars i:nth-child(1){height:38%} .qnx-enterprise-data-bars i:nth-child(2){height:62%;background:#087ee7} .qnx-enterprise-data-bars i:nth-child(3){height:50%;background:#08a8cf} .qnx-enterprise-data-bars i:nth-child(4){height:82%;background:#16b98a} .qnx-enterprise-role-label{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; color:#0758d8; font-size:10px; letter-spacing:2px; line-height:1.8; pointer-events:none; } .qnx-enterprise-role-label b{ color:#0d1730; } .qnx-enterprise-roles-copy{ max-width:600px; } .qnx-enterprise-roles-copy h2{ margin:0; color:#0d1730; font-size:clamp(35px,4vw,54px); line-height:1.03; letter-spacing:-2px; } .qnx-enterprise-roles-copy > p{ margin:22px 0 30px; color:#5d6b84; font-size:15px; line-height:1.75; } .qnx-enterprise-role-list > div{ display:grid; grid-template-columns:38px 1fr; gap:15px; padding:17px 0; border-top:1px solid #dce6f3; } .qnx-enterprise-role-list > div:last-child{ border-bottom:1px solid #dce6f3; } .qnx-enterprise-role-list > div > span{ color:#0758d8; font-size:10px; font-weight:800; } .qnx-enterprise-role-list strong{ display:block; color:#0d1730; font-size:14px; } .qnx-enterprise-role-list p{ margin:5px 0 0; color:#718097; font-size:12px; line-height:1.6; } .qnx-enterprise-stack{ padding:105px 6%; background:#fff; } .qnx-enterprise-stack-heading{ max-width:760px; margin:0 auto 65px; text-align:center; } .qnx-enterprise-stack-map{ max-width:1180px; margin:auto; display:grid; grid-template-columns:1fr 80px 1fr 80px 1fr; align-items:center; } .qnx-enterprise-stack-column{ min-height:190px; padding:28px; border:1px solid #dbe5f2; background:#f8fbff; display:flex; flex-direction:column; justify-content:center; transition:.35s ease; } .qnx-enterprise-stack-column:hover{ transform:translateY(-6px); box-shadow:0 18px 45px rgba(7,88,216,.10); } .qnx-enterprise-stack-column.featured{ background:#0758d8; border-color:#0758d8; } .qnx-enterprise-stack-column small{ color:#0758d8; font-size:9px; font-weight:800; letter-spacing:1.6px; margin-bottom:12px; } .qnx-enterprise-stack-column.featured small{ color:#b7e51c; } .qnx-enterprise-stack-column strong{ color:#0d1730; font-size:22px; } .qnx-enterprise-stack-column.featured strong{ color:#fff; } .qnx-enterprise-stack-column span{ margin-top:10px; color:#697891; font-size:11px; } .qnx-enterprise-stack-column.featured span{ color:#c7d7f5; } .qnx-enterprise-stack-connector{ display:flex; align-items:center; gap:4px; } .qnx-enterprise-stack-connector i{ flex:1; height:1px; background:#cbd8e9; } .qnx-enterprise-stack-connector b{ color:#0758d8; font-size:8px; letter-spacing:1px; } .qnx-enterprise-capabilities{ padding:105px 6%; background:#f4f8ff; } .qnx-enterprise-capabilities-head{ max-width:780px; margin:0 auto 55px; text-align:center; } .qnx-enterprise-capability-list{ max-width:1120px; margin:auto; } .qnx-enterprise-capability{ position:relative; display:grid; grid-template-columns:1fr 45px; gap:25px; align-items:start; padding:24px 0; border-top:1px solid #d5e0ee; transition:.3s ease; } .qnx-enterprise-capability:last-child{ border-bottom:1px solid #d5e0ee; } .qnx-enterprise-capability:hover{ padding-left:14px; padding-right:14px; background:#fff; } .qnx-enterprise-capability strong{ display:block; color:#0d1730; font-size:20px; } .qnx-enterprise-capability p{ max-width:700px; margin:8px 0 0; color:#65748b; font-size:13px; line-height:1.7; } .qnx-enterprise-capability > span{ grid-column:2; grid-row:1 / span 2; color:#0758d8; font-size:10px; font-weight:800; text-align:right; } .qnx-enterprise-scale{ padding:100px 6%; background:#fff; } .qnx-enterprise-scale-panel{ max-width:1250px; min-height:530px; margin:auto; display:grid; grid-template-columns:1fr 1fr; background:#062d7a; overflow:hidden; } .qnx-enterprise-scale-copy{ padding:70px; display:flex; flex-direction:column; justify-content:center; } .qnx-enterprise-scale-copy > span{ color:#b7e51c; } .qnx-enterprise-scale-copy h2{ margin:0; color:#fff; font-size:clamp(36px,4vw,56px); line-height:1.02; letter-spacing:-2px; } .qnx-enterprise-scale-copy p{ max-width:500px; margin:22px 0 30px; color:#c2d1ec; font-size:14px; line-height:1.75; } .qnx-enterprise-scale-btn{ align-self:flex-start; background:#087ee7; } .qnx-enterprise-scale-visual{ position:relative; min-height:530px; background: linear-gradient(135deg,rgba(7,126,231,.42),rgba(8,168,207,.08)), #0758d8; overflow:hidden; } .qnx-enterprise-scale-line{ position:absolute; height:1px; background:rgba(255,255,255,.28); transform-origin:left center; } .line-one{ width:360px; left:19%; top:32%; transform:rotate(12deg); } .line-two{ width:320px; left:29%; top:65%; transform:rotate(-17deg); } .line-three{ width:280px; left:43%; top:40%; transform:rotate(76deg); } .qnx-enterprise-scale-node{ position:absolute; width:84px; height:84px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.42); background:rgba(6,45,122,.52); color:#fff; font-size:8px; font-weight:800; letter-spacing:1px; transform:rotate(45deg); transition:.4s ease; } .qnx-enterprise-scale-node:hover{ transform:rotate(45deg) scale(1.08); background:#062d7a; } .qnx-enterprise-scale-node::after{ content:""; position:absolute; inset:10px; border:1px solid rgba(183,229,28,.42); } .qnx-enterprise-scale-node{ --tx:0; --ty:0; } .qnx-enterprise-scale-node{ display:grid; } .qnx-enterprise-scale-node::first-line{ transform:rotate(-45deg); } .node-a{ left:12%; top:22%; } .node-b{ right:12%; top:17%; } .node-c{ left:18%; bottom:16%; } .node-d{ right:10%; bottom:21%; } .qnx-enterprise-scale-center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:150px; height:150px; border:1px solid rgba(255,255,255,.55); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(6,45,122,.32); box-shadow:0 0 70px rgba(183,229,28,.10); } .qnx-enterprise-scale-center span{ color:#b7e51c; font-size:10px; letter-spacing:2px; font-weight:800; } .qnx-enterprise-scale-center strong{ color:#fff; font-size:18px; letter-spacing:1px; } .qnx-enterprise-scale-center small{ color:#bcd0ed; font-size:8px; letter-spacing:2px; margin-top:4px; } .qnx-enterprise-final{ padding:110px 6%; background:linear-gradient(135deg,#062d7a 0%,#0758d8 48%,#087ee7 76%,#10a4b4 100%); } .qnx-enterprise-final-grid{ opacity:.16; background-image: linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px); } .qnx-enterprise-final-content{ position:relative; z-index:2; max-width:850px; margin:auto; text-align:center; } .qnx-enterprise-final-content > span{ color:#b7e51c; } .qnx-enterprise-final-content h2{ margin:0; color:#fff; font-size:clamp(40px,5vw,68px); line-height:1; letter-spacing:-3px; } .qnx-enterprise-final-content p{ max-width:650px; margin:22px auto 30px; color:#d3e1f7; font-size:15px; line-height:1.75; } .qnx-enterprise-final-btn{ background:#fff; color:#0758d8; } .qnx-enterprise-final-btn b{ background:#b7e51c; color:#062d7a; } .qnx-enterprise-final-btn:hover{ transform:translateY(-3px); background:#f4f8ff; } /* RESPONSIVE */ @media(max-width:1100px){ .qnx-enterprise-intro-inner{ grid-template-columns:1fr; } .qnx-enterprise-intro-copy{ max-width:760px; } .qnx-enterprise-command{ max-width:900px; width:100%; margin:auto; } .qnx-enterprise-roles{ gap:45px; } .qnx-enterprise-role-card{ width:220px; } .qnx-enterprise-stack-map{ grid-template-columns:1fr; gap:14px; } .qnx-enterprise-stack-connector{ max-width:180px; margin:auto; transform:rotate(90deg); } } @media(max-width:850px){ .qnx-enterprise-intro, .qnx-enterprise-workflow, .qnx-enterprise-roles, .qnx-enterprise-stack, .qnx-enterprise-capabilities, .qnx-enterprise-scale, .qnx-enterprise-final{ padding-left:5%; padding-right:5%; } .qnx-enterprise-flow{ grid-template-columns:1fr 1fr; gap:35px 25px; } .qnx-enterprise-flow-line{ display:none; } .qnx-enterprise-roles{ grid-template-columns:1fr; } .qnx-enterprise-roles-visual{ max-width:650px; width:100%; margin:auto; } .qnx-enterprise-scale-panel{ grid-template-columns:1fr; } .qnx-enterprise-scale-copy{ padding:55px 45px; } .qnx-enterprise-scale-visual{ min-height:440px; } } @media(max-width:600px){ .qnx-enterprise-intro{ padding-top:65px; padding-bottom:70px; } .qnx-enterprise-intro h2{ font-size:42px; letter-spacing:-2px; } .qnx-enterprise-intro-copy > p{ font-size:14px; } .qnx-enterprise-command{ min-height:430px; padding:14px; } .qnx-enterprise-command-body{ grid-template-columns:1fr; } .qnx-enterprise-side{ display:flex; overflow:auto; border-right:0; border-bottom:1px solid rgba(255,255,255,.08); padding:9px 0; } .qnx-enterprise-side span{ flex:0 0 auto; margin:0 3px; padding:9px 10px; } .qnx-enterprise-workspace{ padding:20px 0 0; } .qnx-enterprise-metrics{ grid-template-columns:1fr 1fr 1fr; gap:6px; } .qnx-enterprise-metrics > div{ padding:10px; } .qnx-enterprise-metrics strong{ font-size:19px; } .qnx-enterprise-flow{ grid-template-columns:1fr; } .qnx-enterprise-roles-visual{ min-height:570px; } .qnx-enterprise-role-card{ width:190px; padding:17px; } .qnx-enterprise-role-one{ left:0; top:15px; } .qnx-enterprise-role-two{ right:0; top:185px; } .qnx-enterprise-role-three{ left:8%; bottom:25px; } .qnx-enterprise-role-label{ top:50%; } .qnx-enterprise-scale-copy{ padding:45px 25px; } .qnx-enterprise-scale-visual{ min-height:390px; } .qnx-enterprise-scale-center{ width:115px; height:115px; } .qnx-enterprise-scale-center strong{ font-size:14px; } .qnx-enterprise-scale-node{ width:65px; height:65px; font-size:7px; } .line-one{ width:230px; } .line-two{ width:220px; } .line-three{ width:180px; } .qnx-enterprise-final{ padding-top:80px; padding-bottom:80px; } .qnx-enterprise-final-content h2{ font-size:42px; letter-spacing:-2px; } } /* ========================================================= QNIX DIGITAL — E-COMMERCE MOBILE SOLUTIONS ========================================================= */ .qnx-commerce-intro, .qnx-commerce-journey, .qnx-commerce-product-experience, .qnx-commerce-checkout, .qnx-commerce-connected, .qnx-commerce-capabilities, .qnx-commerce-growth, .qnx-commerce-final{ position:relative; overflow:hidden; font-family:inherit; } .qnx-commerce-intro{ min-height:700px; padding:85px 6%; background:#f4f8ff; } .qnx-commerce-intro-pattern, .qnx-commerce-final-shape{ position:absolute; pointer-events:none; } .qnx-commerce-intro-pattern{ inset:0; opacity:.38; background-image: linear-gradient(rgba(7,88,216,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.05) 1px,transparent 1px); background-size:50px 50px; } .qnx-commerce-intro-inner{ position:relative; z-index:2; max-width:1320px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; } .qnx-commerce-copy{ max-width:650px; } .qnx-commerce-kicker, .qnx-commerce-journey-head > span, .qnx-commerce-product-copy > span, .qnx-commerce-checkout-copy > span, .qnx-commerce-connected-head > span, .qnx-commerce-capabilities-head > span, .qnx-commerce-growth-copy > span, .qnx-commerce-final-content > span{ display:block; margin-bottom:18px; color:#0758d8; font-size:11px; font-weight:800; letter-spacing:2px; } .qnx-commerce-copy h2{ margin:0; color:#0d1730; font-size:clamp(42px,4.8vw,70px); line-height:.98; letter-spacing:-3px; } .qnx-commerce-copy > p{ max-width:560px; margin:27px 0; color:#5d6b84; font-size:16px; line-height:1.75; } .qnx-commerce-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px; } .qnx-commerce-tags span{ padding:9px 12px; background:#fff; border:1px solid #dce6f3; color:#0d1730; font-size:10px; font-weight:700; } .qnx-commerce-intro-btn, .qnx-commerce-growth-btn{ display:inline-flex; align-items:center; gap:20px; padding:15px 18px 15px 21px; background:#0758d8; color:#fff; text-decoration:none; font-size:12px; font-weight:800; transition:.3s ease; } .qnx-commerce-intro-btn b, .qnx-commerce-growth-btn b{ width:30px; height:30px; display:grid; place-items:center; background:#b7e51c; color:#062d7a; transition:.3s ease; } .qnx-commerce-intro-btn:hover, .qnx-commerce-growth-btn:hover{ background:#062d7a; transform:translateY(-3px); } .qnx-commerce-intro-btn:hover b, .qnx-commerce-growth-btn:hover b{ transform:rotate(45deg); } /* PHONE */ .qnx-commerce-phone-scene{ position:relative; min-height:570px; display:grid; place-items:center; } .qnx-commerce-phone{ position:relative; width:295px; height:565px; padding:15px; border:7px solid #0d1730; border-radius:38px; background:#fff; box-shadow:0 35px 75px rgba(6,45,122,.20); overflow:hidden; z-index:3; transition:transform .45s ease; } .qnx-commerce-notch{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:92px; height:21px; border-radius:0 0 14px 14px; background:#0d1730; } .qnx-commerce-phone-head{ margin-top:20px; display:flex; justify-content:space-between; align-items:center; } .qnx-commerce-phone-head > span{ color:#0d1730; font-size:15px; font-weight:900; letter-spacing:1px; } .qnx-commerce-phone-head div{ display:flex; gap:10px; } .qnx-commerce-phone-head b{ color:#0758d8; font-size:17px; } .qnx-commerce-search{ display:flex; justify-content:space-between; margin-top:18px; padding:10px 12px; background:#f4f8ff; color:#8793a5; font-size:9px; } .qnx-commerce-search span{ color:#0758d8; } .qnx-commerce-banner{ position:relative; height:140px; margin-top:14px; padding:18px; background:linear-gradient(135deg,#0758d8,#08a8cf); overflow:hidden; } .qnx-commerce-banner:after{ content:""; position:absolute; width:130px; height:130px; right:-35px; bottom:-50px; border-radius:50%; background:#b7e51c; opacity:.55; } .qnx-commerce-banner small{ display:block; color:#b7e51c; font-size:7px; font-weight:800; letter-spacing:1.5px; } .qnx-commerce-banner strong{ display:block; margin-top:10px; color:#fff; font-size:23px; line-height:1; } .qnx-commerce-banner span{ position:absolute; bottom:14px; left:18px; color:#fff; font-size:8px; font-weight:700; } .qnx-commerce-phone-title{ display:flex; justify-content:space-between; margin-top:17px; } .qnx-commerce-phone-title strong{ color:#0d1730; font-size:12px; } .qnx-commerce-phone-title span{ color:#0758d8; font-size:8px; font-weight:700; } .qnx-commerce-products{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:11px; } .qnx-commerce-product-art{ height:110px; position:relative; overflow:hidden; } .qnx-commerce-product-art:before, .qnx-commerce-product-art:after{ content:""; position:absolute; } .art-one{ background:linear-gradient(145deg,#dcecff,#087ee7); } .art-one:before{ width:55px; height:75px; left:50%; top:20px; transform:translateX(-50%); background:#fff; border-radius:12px 12px 18px 18px; } .art-two{ background:linear-gradient(145deg,#e2f8ef,#16b98a); } .art-two:before{ width:65px; height:65px; left:50%; top:25px; transform:translateX(-50%) rotate(20deg); background:#fff; border-radius:50%; } .qnx-commerce-product small{ display:block; margin-top:7px; color:#8793a5; font-size:7px; } .qnx-commerce-product strong{ display:block; color:#0d1730; font-size:9px; margin-top:3px; } .qnx-commerce-product b{ display:block; margin-top:4px; color:#0758d8; font-size:9px; } .qnx-commerce-cart{ position:absolute; left:15px; right:15px; bottom:14px; padding:11px 13px; display:flex; align-items:center; gap:10px; background:#0758d8; color:#fff; } .qnx-commerce-cart span{ font-size:8px; opacity:.75; } .qnx-commerce-cart strong{ margin-left:auto; font-size:9px; } .qnx-commerce-cart b{ color:#b7e51c; } .qnx-commerce-floating{ position:absolute; z-index:5; padding:14px; background:#fff; border:1px solid #dce6f3; box-shadow:0 18px 45px rgba(17,55,110,.13); } .floating-one{ top:80px; right:0; width:150px; } .floating-two{ left:0; bottom:90px; width:160px; display:flex; align-items:center; gap:10px; } .qnx-commerce-floating small{ display:block; color:#7d899d; font-size:7px; letter-spacing:1.2px; } .qnx-commerce-floating strong{ display:block; margin-top:5px; color:#0d1730; font-size:11px; } .qnx-commerce-floating i{ display:block; width:100%; height:3px; margin-top:9px; background:linear-gradient(90deg,#0758d8,#16b98a); } .floating-two > span{ width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:#16b98a; color:#fff; font-size:11px; } /* JOURNEY */ .qnx-commerce-journey{ padding:105px 6%; background:#fff; } .qnx-commerce-journey-head{ max-width:750px; margin:0 auto 65px; text-align:center; } .qnx-commerce-journey-head h2, .qnx-commerce-connected-head h2, .qnx-commerce-capabilities-head h2{ margin:0; color:#0d1730; font-size:clamp(35px,4vw,56px); line-height:1.03; letter-spacing:-2px; } .qnx-commerce-journey-head p{ margin:20px auto 0; max-width:600px; color:#5d6b84; line-height:1.75; font-size:14px; } .qnx-commerce-journey-track{ position:relative; max-width:1180px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .qnx-commerce-journey-line{ position:absolute; top:25px; left:8%; right:8%; height:1px; background:#d1dce9; } .qnx-commerce-step{ position:relative; z-index:2; } .qnx-commerce-step-number{ width:50px; height:50px; display:grid; place-items:center; background:#fff; border:1px solid #0758d8; color:#0758d8; font-size:9px; font-weight:800; margin-bottom:23px; } .qnx-commerce-step:nth-child(3) .qnx-commerce-step-number{ border-color:#08a8cf; color:#08a8cf; } .qnx-commerce-step:nth-child(4) .qnx-commerce-step-number{ border-color:#16b98a; color:#16b98a; } .qnx-commerce-step strong{ color:#0d1730; font-size:17px; } .qnx-commerce-step p{ margin:9px 0 0; color:#6b7890; font-size:12px; line-height:1.7; } /* PRODUCT */ .qnx-commerce-product-experience{ padding:105px 6%; display:grid; grid-template-columns:1.15fr .85fr; gap:80px; align-items:center; background:#f4f8ff; } .qnx-commerce-product-screen{ max-width:720px; padding:22px; background:#0d1730; box-shadow:0 28px 65px rgba(6,45,122,.16); } .qnx-commerce-screen-top{ display:flex; justify-content:space-between; color:#8391aa; font-size:8px; letter-spacing:1.5px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.10); } .qnx-commerce-product-display{ display:grid; grid-template-columns:1fr 1fr; gap:25px; padding-top:24px; } .qnx-commerce-large-art{ min-height:350px; background:linear-gradient(145deg,#0758d8,#08a8cf); position:relative; overflow:hidden; } .qnx-commerce-large-art:before{ content:""; position:absolute; width:160px; height:230px; left:50%; top:50%; transform:translate(-50%,-50%) rotate(8deg); background:#fff; border-radius:20px; box-shadow:0 20px 45px rgba(6,45,122,.20); } .qnx-commerce-large-art:after{ content:""; position:absolute; width:90px; height:90px; right:25px; top:25px; border-radius:50%; background:#b7e51c; opacity:.65; } .qnx-commerce-product-info{ padding:12px 4px; } .qnx-commerce-product-info small{ color:#b7e51c; font-size:8px; letter-spacing:1.4px; } .qnx-commerce-product-info h3{ margin:13px 0; color:#fff; font-size:26px; line-height:1.1; } .qnx-commerce-product-info p{ color:#8493ad; font-size:11px; line-height:1.7; } .qnx-commerce-price-row{ display:flex; justify-content:space-between; align-items:center; margin:20px 0; } .qnx-commerce-price-row strong{ color:#fff; font-size:22px; } .qnx-commerce-price-row span{ color:#b7e51c; font-size:10px; } .qnx-commerce-options{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; color:#7786a0; font-size:9px; } .qnx-commerce-options b{ width:27px; height:27px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.16); color:#fff; font-size:8px; } .qnx-commerce-options b.selected{ border-color:#b7e51c; color:#b7e51c; } .qnx-commerce-product-info button, .qnx-commerce-checkout-card button{ width:100%; border:0; padding:13px; margin-top:20px; background:#087ee7; color:#fff; font-size:10px; font-weight:800; cursor:pointer; } .qnx-commerce-product-info button span, .qnx-commerce-checkout-card button span{ float:right; color:#b7e51c; } .qnx-commerce-product-copy{ max-width:560px; } .qnx-commerce-product-copy h2, .qnx-commerce-checkout-copy h2, .qnx-commerce-growth-copy h2{ margin:0; color:#0d1730; font-size:clamp(35px,4vw,54px); line-height:1.04; letter-spacing:-2px; } .qnx-commerce-product-copy > p, .qnx-commerce-checkout-copy > p, .qnx-commerce-growth-copy > p{ margin:22px 0 28px; color:#5d6b84; font-size:14px; line-height:1.75; } .qnx-commerce-product-points{ border-top:1px solid #d9e3ef; } .qnx-commerce-product-points div{ display:flex; gap:15px; padding:14px 0; border-bottom:1px solid #d9e3ef; } .qnx-commerce-product-points strong{ color:#0758d8; font-size:9px; } .qnx-commerce-product-points span{ color:#0d1730; font-size:12px; font-weight:700; } /* CHECKOUT */ .qnx-commerce-checkout{ padding:105px 6%; background:#fff; display:grid; grid-template-columns:.9fr 1.1fr; gap:100px; align-items:center; } .qnx-commerce-checkout-copy{ max-width:560px; } .qnx-commerce-checkout-list > div{ display:grid; grid-template-columns:35px 1fr; gap:14px; padding:14px 0; border-top:1px solid #dce5f0; } .qnx-commerce-checkout-list > div:last-child{ border-bottom:1px solid #dce5f0; } .qnx-commerce-checkout-list > div > span{ color:#0758d8; font-size:9px; font-weight:800; } .qnx-commerce-checkout-list strong{ color:#0d1730; font-size:13px; } .qnx-commerce-checkout-list p{ margin:4px 0 0; color:#748197; font-size:11px; } .qnx-commerce-checkout-visual{ position:relative; min-height:540px; display:grid; place-items:center; background:#f4f8ff; overflow:hidden; } .qnx-commerce-checkout-visual:before{ content:""; position:absolute; width:390px; height:390px; border-radius:50%; background:linear-gradient(135deg,#0758d8,#08a8cf); opacity:.08; } .qnx-commerce-checkout-card{ position:relative; z-index:2; width:330px; padding:23px; background:#fff; border:1px solid #dce6f3; box-shadow:0 30px 65px rgba(17,55,110,.13); } .qnx-commerce-checkout-top{ display:flex; justify-content:space-between; color:#0758d8; font-size:9px; font-weight:800; letter-spacing:1.2px; padding-bottom:18px; border-bottom:1px solid #e4ebf4; } .qnx-commerce-order{ display:grid; grid-template-columns:45px 1fr auto; gap:11px; align-items:center; margin-top:18px; } .qnx-commerce-order-thumb{ height:50px; background:linear-gradient(145deg,#0758d8,#08a8cf); } .qnx-commerce-order strong{ display:block; color:#0d1730; font-size:11px; } .qnx-commerce-order small{ display:block; margin-top:4px; color:#8792a5; font-size:8px; } .qnx-commerce-order > b{ color:#0758d8; font-size:11px; } .qnx-commerce-summary{ margin-top:20px; display:grid; grid-template-columns:1fr auto; gap:11px; padding:17px 0; border-top:1px solid #e4ebf4; border-bottom:1px solid #e4ebf4; } .qnx-commerce-summary span{ color:#8792a5; font-size:9px; } .qnx-commerce-summary b{ color:#0d1730; font-size:9px; } .qnx-commerce-summary .total{ color:#0d1730; font-weight:800; } .qnx-commerce-summary strong{ color:#0758d8; font-size:15px; } .qnx-commerce-payment{ display:flex; align-items:center; gap:10px; margin-top:18px; padding:13px; background:#f4f8ff; } .qnx-commerce-payment > span{ color:#0758d8; } .qnx-commerce-payment small{ display:block; color:#8792a5; font-size:7px; } .qnx-commerce-payment strong{ display:block; margin-top:4px; color:#0d1730; font-size:10px; } .qnx-commerce-payment > b{ margin-left:auto; color:#16b98a; } .qnx-commerce-secure{ position:absolute; right:10%; bottom:55px; z-index:3; display:flex; gap:10px; align-items:center; padding:13px; background:#0d1730; color:#fff; box-shadow:0 15px 35px rgba(6,45,122,.18); } .qnx-commerce-secure > span{ color:#b7e51c; } .qnx-commerce-secure strong{ display:block; font-size:9px; } .qnx-commerce-secure small{ display:block; margin-top:3px; color:#7e8da5; font-size:7px; } /* CONNECTED */ .qnx-commerce-connected{ padding:105px 6%; background:#f4f8ff; } .qnx-commerce-connected-head{ max-width:760px; margin:0 auto 60px; text-align:center; } .qnx-commerce-system{ max-width:1180px; margin:auto; display:grid; grid-template-columns:1fr 70px 1fr 70px 1fr; align-items:center; } .qnx-commerce-system-app, .qnx-commerce-system-core{ min-height:175px; padding:28px; display:flex; flex-direction:column; justify-content:center; border:1px solid #dce6f3; background:#fff; } .qnx-commerce-system-core{ background:#0758d8; border-color:#0758d8; } .qnx-commerce-system-app small, .qnx-commerce-system-core small{ color:#0758d8; font-size:8px; letter-spacing:1.6px; font-weight:800; } .qnx-commerce-system-core small{ color:#b7e51c; } .qnx-commerce-system-app strong{ margin-top:10px; color:#0d1730; font-size:21px; } .qnx-commerce-system-core strong{ margin-top:10px; color:#fff; font-size:21px; } .qnx-commerce-system-app span, .qnx-commerce-system-core span{ margin-top:9px; color:#718097; font-size:10px; } .qnx-commerce-system-core span{ color:#c8d7ef; } .qnx-commerce-system-arrow{ text-align:center; color:#0758d8; font-size:25px; } /* CAPABILITIES */ .qnx-commerce-capabilities{ padding:105px 6%; background:#fff; } .qnx-commerce-capabilities-head{ max-width:780px; margin:0 auto 55px; text-align:center; } .qnx-commerce-capability-grid{ max-width:1150px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #d9e3ef; border-left:1px solid #d9e3ef; } .qnx-commerce-capability-grid > div{ min-height:190px; padding:27px; border-right:1px solid #d9e3ef; border-bottom:1px solid #d9e3ef; transition:.3s ease; } .qnx-commerce-capability-grid > div:hover{ background:#f4f8ff; transform:translateY(-4px); } .qnx-commerce-capability-grid i{ display:block; color:#0758d8; font-size:9px; font-style:normal; font-weight:800; margin-bottom:22px; } .qnx-commerce-capability-grid strong{ display:block; color:#0d1730; font-size:17px; } .qnx-commerce-capability-grid p{ margin:9px 0 0; color:#68768e; font-size:11px; line-height:1.7; } /* GROWTH */ .qnx-commerce-growth{ padding:100px 6%; background:#062d7a; } .qnx-commerce-growth-inner{ max-width:1250px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; } .qnx-commerce-growth-copy{ max-width:600px; } .qnx-commerce-growth-copy > span{ color:#b7e51c; } .qnx-commerce-growth-copy h2{ color:#fff; } .qnx-commerce-growth-copy > p{ color:#c4d2ea; } .qnx-commerce-growth-btn{ background:#087ee7; } .qnx-commerce-growth-visual{ position:relative; min-height:460px; display:grid; place-items:center; background:linear-gradient(145deg,#0758d8,#08a8cf); overflow:hidden; } .qnx-commerce-growth-visual:before{ content:""; position:absolute; width:420px; height:420px; border:1px solid rgba(255,255,255,.18); border-radius:50%; } .qnx-commerce-growth-phone{ position:relative; z-index:2; width:265px; padding:25px 22px; background:#fff; box-shadow:0 30px 65px rgba(6,45,122,.25); } .qnx-commerce-growth-phone-top{ display:flex; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid #e1e8f1; } .qnx-commerce-growth-phone-top span{ color:#0d1730; font-size:10px; font-weight:900; } .qnx-commerce-growth-phone-top b{ color:#0758d8; font-size:8px; } .qnx-commerce-route{ position:relative; display:flex; justify-content:space-between; margin:35px 3px 12px; } .qnx-commerce-route-line{ position:absolute; left:0; right:0; top:10px; height:2px; background:#dce6f3; z-index:0; } .qnx-commerce-route span{ position:relative; z-index:2; width:21px; height:21px; display:grid; place-items:center; border-radius:50%; background:#e5ecf5; color:#7b879b; font-size:7px; } .qnx-commerce-route span.done{ background:#16b98a; color:#fff; } .qnx-commerce-route span.active{ background:#0758d8; color:#fff; } .qnx-commerce-route-labels{ display:flex; justify-content:space-between; color:#8995a7; font-size:6px; } .qnx-commerce-delivery{ margin-top:35px; padding:20px; background:#f4f8ff; } .qnx-commerce-delivery small{ display:block; color:#7d8ba0; font-size:7px; letter-spacing:1px; } .qnx-commerce-delivery strong{ display:block; margin-top:8px; color:#0758d8; font-size:25px; } .qnx-commerce-delivery span{ display:block; margin-top:6px; color:#68768e; font-size:9px; } .qnx-commerce-growth-badge{ position:absolute; z-index:3; right:8%; top:70px; padding:16px; background:#fff; box-shadow:0 15px 35px rgba(6,45,122,.18); } .qnx-commerce-growth-badge strong{ display:block; color:#0758d8; font-size:23px; } .qnx-commerce-growth-badge span{ display:block; margin-top:3px; color:#758298; font-size:8px; } /* FINAL CTA */ .qnx-commerce-final{ padding:110px 6%; background:linear-gradient(135deg,#0758d8,#087ee7 58%,#08a8cf); } .qnx-commerce-final-shape{ width:520px; height:520px; right:-170px; top:-230px; border:1px solid rgba(255,255,255,.18); border-radius:50%; box-shadow: 0 0 0 60px rgba(255,255,255,.035), 0 0 0 120px rgba(183,229,28,.025); } .qnx-commerce-final-content{ position:relative; z-index:2; max-width:900px; margin:auto; text-align:center; } .qnx-commerce-final-content > span{ color:#b7e51c; } .qnx-commerce-final-content h2{ margin:0; color:#fff; font-size:clamp(40px,5vw,67px); line-height:1; letter-spacing:-3px; } .qnx-commerce-final-content p{ max-width:650px; margin:23px auto 30px; color:#d5e3f8; font-size:14px; line-height:1.75; } .qnx-commerce-final-actions{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:20px; } .qnx-commerce-final-actions a{ display:inline-flex; align-items:center; gap:18px; padding:15px 18px 15px 21px; background:#fff; color:#0758d8; text-decoration:none; font-size:12px; font-weight:800; transition:.3s ease; } .qnx-commerce-final-actions a b{ width:28px; height:28px; display:grid; place-items:center; background:#b7e51c; color:#062d7a; } .qnx-commerce-final-actions a:hover{ transform:translateY(-3px); } .qnx-commerce-final-actions span{ color:#d3e0f4; font-size:9px; } /* RESPONSIVE */ @media(max-width:1100px){ .qnx-commerce-intro-inner{ grid-template-columns:1fr; } .qnx-commerce-copy{ max-width:760px; } .qnx-commerce-phone-scene{ max-width:650px; width:100%; margin:auto; } .qnx-commerce-product-experience, .qnx-commerce-checkout{ grid-template-columns:1fr; } .qnx-commerce-product-screen{ max-width:760px; margin:auto; } .qnx-commerce-product-copy, .qnx-commerce-checkout-copy{ max-width:760px; margin:auto; } .qnx-commerce-system{ grid-template-columns:1fr; gap:15px; } .qnx-commerce-system-arrow{ transform:rotate(90deg); } } @media(max-width:850px){ .qnx-commerce-intro, .qnx-commerce-journey, .qnx-commerce-product-experience, .qnx-commerce-checkout, .qnx-commerce-connected, .qnx-commerce-capabilities, .qnx-commerce-growth, .qnx-commerce-final{ padding-left:5%; padding-right:5%; } .qnx-commerce-journey-track{ grid-template-columns:1fr 1fr; gap:35px 25px; } .qnx-commerce-journey-line{ display:none; } .qnx-commerce-capability-grid{ grid-template-columns:1fr 1fr; } .qnx-commerce-growth-inner{ grid-template-columns:1fr; } .qnx-commerce-growth-copy{ max-width:760px; } } @media(max-width:600px){ .qnx-commerce-intro{ padding-top:65px; } .qnx-commerce-copy h2{ font-size:42px; letter-spacing:-2px; } .qnx-commerce-phone-scene{ min-height:560px; transform:scale(.92); } .floating-one{ right:-4px; } .floating-two{ left:-4px; } .qnx-commerce-journey-track{ grid-template-columns:1fr; } .qnx-commerce-product-display{ grid-template-columns:1fr; } .qnx-commerce-large-art{ min-height:260px; } .qnx-commerce-checkout{ gap:55px; } .qnx-commerce-checkout-visual{ min-height:480px; } .qnx-commerce-checkout-card{ width:285px; } .qnx-commerce-secure{ right:5%; bottom:30px; } .qnx-commerce-capability-grid{ grid-template-columns:1fr; } .qnx-commerce-growth-visual{ min-height:400px; } .qnx-commerce-growth-badge{ right:3%; top:45px; } .qnx-commerce-final{ padding-top:80px; padding-bottom:80px; } .qnx-commerce-final-content h2{ font-size:42px; letter-spacing:-2px; } } /* ========================================================= QNIX DIGITAL — APP UI/UX DESIGN ========================================================= */ .qnx-appux-intro, .qnx-appux-thinking, .qnx-appux-interface, .qnx-appux-gesture, .qnx-appux-system, .qnx-appux-prototype, .qnx-appux-services, .qnx-appux-final{ position:relative; overflow:hidden; font-family:inherit; } .qnx-appux-intro{ min-height:690px; padding:90px 6%; background:#f4f8ff; } .qnx-appux-intro-grid{ position:absolute; inset:0; opacity:.38; background-image: linear-gradient(rgba(7,88,216,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.055) 1px,transparent 1px); background-size:54px 54px; } .qnx-appux-intro-inner{ position:relative; z-index:2; max-width:1320px; margin:auto; display:grid; grid-template-columns:.95fr 1.05fr; gap:80px; align-items:center; } .qnx-appux-intro-copy{ max-width:640px; } .qnx-appux-kicker, .qnx-appux-thinking-head > span, .qnx-appux-interface-copy > span, .qnx-appux-gesture-copy > span, .qnx-appux-system-head > span, .qnx-appux-prototype-copy > span, .qnx-appux-services-head > span, .qnx-appux-final-content > span{ display:block; color:#0758d8; font-size:11px; font-weight:800; letter-spacing:2px; margin-bottom:18px; } .qnx-appux-intro-copy h2{ margin:0; color:#0d1730; font-size:clamp(42px,4.7vw,70px); line-height:.98; letter-spacing:-3px; } .qnx-appux-intro-copy > p{ max-width:560px; margin:26px 0; color:#5d6b84; font-size:16px; line-height:1.75; } .qnx-appux-intro-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px; } .qnx-appux-intro-tags span{ padding:9px 12px; background:#fff; border:1px solid #dce6f3; color:#0d1730; font-size:10px; font-weight:700; } .qnx-appux-intro-btn, .qnx-appux-final-link{ display:inline-flex; align-items:center; gap:20px; padding:15px 18px 15px 21px; background:#0758d8; color:#fff; text-decoration:none; font-size:12px; font-weight:800; transition:.3s ease; } .qnx-appux-intro-btn b, .qnx-appux-final-link b{ width:30px; height:30px; display:grid; place-items:center; background:#b7e51c; color:#062d7a; transition:.3s ease; } .qnx-appux-intro-btn:hover{ transform:translateY(-3px); background:#062d7a; } .qnx-appux-intro-btn:hover b, .qnx-appux-final-link:hover b{ transform:rotate(45deg); } /* BLUEPRINT */ .qnx-appux-blueprint{ min-height:470px; padding:23px; background:#0d1730; box-shadow:0 30px 70px rgba(6,45,122,.17); } .qnx-appux-blueprint-top{ display:flex; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.10); } .qnx-appux-blueprint-top span, .qnx-appux-blueprint-top b{ color:#8290aa; font-size:9px; letter-spacing:1.7px; } .qnx-appux-flow{ position:relative; min-height:355px; } .qnx-appux-flow-node{ position:absolute; width:135px; padding:18px; background:#fff; box-shadow:0 15px 35px rgba(0,0,0,.14); transition:.35s ease; } .qnx-appux-flow-node:hover{ transform:translateY(-6px); } .qnx-appux-flow-node small{ display:block; color:#0758d8; font-size:7px; letter-spacing:1.5px; font-weight:800; margin-bottom:8px; } .qnx-appux-flow-node strong{ color:#0d1730; font-size:14px; } .node-start{ left:4%; top:50px; } .node-main{ left:34%; top:150px; } .node-action{ right:5%; top:60px; } .node-end{ right:29%; bottom:25px; } .qnx-appux-flow-line{ position:absolute; height:1px; background:#087ee7; transform-origin:left center; } .line-a{ width:180px; left:17%; top:105px; transform:rotate(28deg); } .line-b{ width:170px; left:49%; top:190px; transform:rotate(-28deg); } .line-c{ width:145px; left:43%; top:270px; transform:rotate(-28deg); } .qnx-appux-cursor{ position:absolute; right:31%; bottom:112px; width:37px; height:37px; display:grid; place-items:center; border-radius:50%; background:#b7e51c; color:#062d7a; font-size:14px; box-shadow:0 0 0 8px rgba(183,229,28,.08); } .qnx-appux-blueprint-footer{ display:flex; justify-content:space-between; border-top:1px solid rgba(255,255,255,.10); padding-top:16px; } .qnx-appux-blueprint-footer span{ color:#687993; font-size:8px; letter-spacing:1.4px; } /* THINKING */ .qnx-appux-thinking{ padding:105px 6%; background:#fff; } .qnx-appux-thinking-head{ max-width:760px; margin:0 auto 60px; text-align:center; } .qnx-appux-thinking-head h2, .qnx-appux-system-head h2, .qnx-appux-services-head h2{ margin:0; color:#0d1730; font-size:clamp(35px,4vw,56px); line-height:1.03; letter-spacing:-2px; } .qnx-appux-thinking-head p, .qnx-appux-system-head p{ max-width:600px; margin:20px auto 0; color:#5d6b84; font-size:14px; line-height:1.75; } .qnx-appux-thinking-grid{ max-width:1120px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #dbe4ef; border-left:1px solid #dbe4ef; } .qnx-appux-thinking-grid article{ min-height:245px; padding:28px; border-right:1px solid #dbe4ef; border-bottom:1px solid #dbe4ef; transition:.35s ease; } .qnx-appux-thinking-grid article:hover{ background:#f4f8ff; transform:translateY(-5px); } .qnx-appux-thinking-mark{ width:38px; height:38px; display:grid; place-items:center; margin-bottom:50px; border:1px solid #0758d8; color:#0758d8; font-size:10px; font-weight:800; } .qnx-appux-thinking-grid article:nth-child(3) .qnx-appux-thinking-mark{ border-color:#08a8cf; color:#08a8cf; } .qnx-appux-thinking-grid article:nth-child(4) .qnx-appux-thinking-mark{ border-color:#16b98a; color:#16b98a; } .qnx-appux-thinking-grid strong{ display:block; color:#0d1730; font-size:18px; } .qnx-appux-thinking-grid p{ margin:9px 0 0; color:#6c7990; font-size:12px; line-height:1.7; } /* INTERFACE */ .qnx-appux-interface{ padding:105px 6%; background:#f4f8ff; display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; } .qnx-appux-interface-visual{ position:relative; min-height:570px; display:grid; place-items:center; } .qnx-appux-device{ position:relative; width:285px; height:545px; padding:15px; border:7px solid #0d1730; border-radius:38px; background:#fff; box-shadow:0 30px 70px rgba(6,45,122,.18); overflow:hidden; z-index:2; transition:transform .4s ease; } .qnx-appux-device-top{ width:90px; height:20px; margin:-15px auto 16px; border-radius:0 0 13px 13px; background:#0d1730; } .qnx-appux-device-header{ display:flex; justify-content:space-between; align-items:center; color:#0d1730; font-size:12px; font-weight:800; } .qnx-appux-device-header b{ color:#16b98a; font-size:9px; } .qnx-appux-device-card{ margin-top:18px; padding:19px; background:linear-gradient(135deg,#0758d8,#08a8cf); } .qnx-appux-device-card small{ display:block; color:#cfe1f8; font-size:7px; letter-spacing:1.2px; } .qnx-appux-device-card strong{ display:block; margin-top:7px; color:#fff; font-size:34px; } .qnx-appux-device-card > div{ height:5px; margin-top:10px; background:rgba(255,255,255,.22); } .qnx-appux-device-card > div i{ display:block; width:82%; height:100%; background:#b7e51c; } .qnx-appux-device-card > span{ display:block; margin-top:9px; color:#d9e7f8; font-size:7px; } .qnx-appux-device-title{ display:flex; justify-content:space-between; margin-top:19px; } .qnx-appux-device-title strong{ color:#0d1730; font-size:11px; } .qnx-appux-device-title span{ color:#0758d8; font-size:8px; } .qnx-appux-device-actions{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; } .qnx-appux-device-actions div{ padding:10px 5px; background:#f4f8ff; text-align:center; } .qnx-appux-device-actions b{ width:25px; height:25px; display:grid; place-items:center; margin:auto; border-radius:7px; background:#fff; color:#0758d8; font-size:10px; } .qnx-appux-device-actions span{ display:block; margin-top:5px; color:#65748b; font-size:7px; } .qnx-appux-device-list{ margin-top:13px; } .qnx-appux-device-list > div{ display:grid; grid-template-columns:8px 1fr auto; gap:8px; align-items:center; padding:11px 0; border-top:1px solid #e4ebf3; } .qnx-appux-device-list > div > i{ width:7px; height:7px; border-radius:50%; background:#0758d8; } .qnx-appux-device-list strong{ display:block; color:#0d1730; font-size:8px; } .qnx-appux-device-list small{ display:block; margin-top:3px; color:#8995a7; font-size:6px; } .qnx-appux-device-list > div > b{ color:#0758d8; font-size:10px; } .qnx-appux-device-nav{ position:absolute; left:15px; right:15px; bottom:10px; display:flex; justify-content:space-around; padding:10px 0; background:#fff; border-top:1px solid #e4ebf3; } .qnx-appux-device-nav span{ color:#9aa5b5; font-size:11px; } .qnx-appux-device-nav span.active{ color:#0758d8; } .qnx-appux-measure{ position:absolute; z-index:3; padding:10px 12px; background:#0d1730; color:#fff; box-shadow:0 12px 30px rgba(6,45,122,.15); } .qnx-appux-measure span{ display:block; width:30px; height:1px; margin-bottom:6px; background:#b7e51c; } .qnx-appux-measure b{ display:block; color:#b7e51c; font-size:11px; } .qnx-appux-measure small{ display:block; margin-top:3px; color:#8a98ad; font-size:7px; } .measure-one{ top:85px; right:4%; } .measure-two{ left:3%; top:45%; } .measure-three{ right:7%; bottom:75px; } .qnx-appux-interface-copy{ max-width:570px; } .qnx-appux-interface-copy h2, .qnx-appux-gesture-copy h2, .qnx-appux-prototype-copy h2{ margin:0; color:#0d1730; font-size:clamp(35px,4vw,55px); line-height:1.03; letter-spacing:-2px; } .qnx-appux-interface-copy > p, .qnx-appux-gesture-copy > p, .qnx-appux-prototype-copy > p{ margin:21px 0 28px; color:#5d6b84; font-size:14px; line-height:1.75; } .qnx-appux-design-rules{ border-top:1px solid #d9e3ef; } .qnx-appux-design-rules div{ display:grid; grid-template-columns:120px 1fr; gap:20px; padding:14px 0; border-bottom:1px solid #d9e3ef; } .qnx-appux-design-rules strong{ color:#0d1730; font-size:11px; } .qnx-appux-design-rules span{ color:#6c7990; font-size:11px; } /* GESTURE */ .qnx-appux-gesture{ padding:105px 6%; display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:center; background:#fff; } .qnx-appux-gesture-copy{ max-width:570px; } .qnx-appux-gesture-list > div{ display:grid; grid-template-columns:35px 1fr; gap:15px; padding:14px 0; border-top:1px solid #dce5ef; } .qnx-appux-gesture-list > div:last-child{ border-bottom:1px solid #dce5ef; } .qnx-appux-gesture-list > div > b{ color:#0758d8; font-size:9px; } .qnx-appux-gesture-list strong{ color:#0d1730; font-size:13px; } .qnx-appux-gesture-list p{ margin:4px 0 0; color:#738097; font-size:10px; } .qnx-appux-gesture-visual{ position:relative; min-height:520px; display:grid; place-items:center; background:#062d7a; overflow:hidden; } .qnx-appux-gesture-visual:before{ content:""; position:absolute; width:420px; height:420px; border:1px solid rgba(255,255,255,.12); transform:rotate(45deg); } .qnx-appux-gesture-phone{ position:relative; z-index:2; width:275px; height:485px; padding:16px; border:6px solid #fff; border-radius:35px; background:#0758d8; box-shadow:0 30px 70px rgba(0,0,0,.22); } .qnx-appux-gesture-phone-top{ width:82px; height:17px; margin:-16px auto 20px; background:#fff; border-radius:0 0 12px 12px; } .qnx-appux-gesture-screen{ height:420px; padding:25px 18px; background:linear-gradient(160deg,#087ee7,#08a8cf); } .qnx-appux-gesture-screen > small{ color:#b7e51c; font-size:7px; letter-spacing:1.5px; } .qnx-appux-gesture-screen > strong{ display:block; margin-top:14px; color:#fff; font-size:25px; line-height:1.05; } .qnx-appux-swipe-card{ margin-top:38px; padding:20px; background:#fff; box-shadow:0 20px 40px rgba(6,45,122,.18); transition:transform .45s ease; } .qnx-appux-swipe-card:hover{ transform:translateX(13px); } .qnx-appux-swipe-card span{ display:block; color:#0758d8; font-size:7px; font-weight:800; letter-spacing:1.3px; } .qnx-appux-swipe-card b{ display:block; width:55px; height:55px; margin:22px 0; display:grid; place-items:center; background:#f4f8ff; color:#0758d8; font-size:22px; } .qnx-appux-swipe-card strong{ display:block; color:#0d1730; font-size:15px; } .qnx-appux-swipe-card small{ display:block; margin-top:5px; color:#8793a6; font-size:8px; } .qnx-appux-swipe-indicator{ display:flex; justify-content:center; gap:5px; margin-top:20px; } .qnx-appux-swipe-indicator i{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.4); } .qnx-appux-swipe-indicator i:first-child{ width:18px; border-radius:4px; background:#b7e51c; } .qnx-appux-finger{ position:absolute; z-index:5; right:-17px; bottom:110px; width:55px; height:55px; display:grid; place-items:center; border-radius:50%; background:#b7e51c; color:#062d7a; font-size:20px; box-shadow:0 0 0 10px rgba(183,229,28,.10); } .qnx-appux-gesture-label{ position:absolute; left:7%; bottom:55px; color:#fff; } .qnx-appux-gesture-label span{ display:block; color:#b7e51c; font-size:8px; letter-spacing:1.5px; } .qnx-appux-gesture-label strong{ display:block; margin-top:5px; font-size:13px; } /* SYSTEM */ .qnx-appux-system{ padding:105px 6%; background:#f4f8ff; } .qnx-appux-system-head{ max-width:760px; margin:0 auto 58px; text-align:center; } .qnx-appux-system-board{ max-width:1160px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #d8e2ee; background:#fff; } .qnx-appux-system-column{ min-height:240px; padding:25px; border-right:1px solid #d8e2ee; } .qnx-appux-system-column:last-child{ border-right:0; } .qnx-appux-system-column > small{ color:#0758d8; font-size:8px; font-weight:800; letter-spacing:1.5px; } .qnx-appux-type-demo{ margin-top:40px; } .qnx-appux-type-demo strong{ display:block; color:#0d1730; font-size:42px; } .qnx-appux-type-demo span{ display:block; margin-top:8px; color:#7b8799; font-size:9px; } .qnx-appux-button-demo{ margin-top:40px; } .qnx-appux-button-demo button{ display:block; width:100%; padding:10px; margin-bottom:9px; border:0; background:#0758d8; color:#fff; font-size:8px; font-weight:800; } .qnx-appux-button-demo button:last-child{ background:#f4f8ff; color:#0758d8; border:1px solid #dbe5f1; } .qnx-appux-component-demo{ margin-top:35px; } .qnx-appux-component-demo span{ display:block; padding:11px; margin-bottom:7px; background:#f4f8ff; color:#68768e; font-size:9px; } .qnx-appux-state-demo{ margin-top:48px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .qnx-appux-state-demo i{ width:25px; height:25px; border:1px solid #cbd7e6; border-radius:50%; } .qnx-appux-state-demo i.selected{ border-color:#0758d8; background:#0758d8; box-shadow:inset 0 0 0 6px #fff; } .qnx-appux-state-demo b{ display:block; width:100%; margin-top:10px; color:#8793a5; font-size:8px; font-weight:500; } /* PROTOTYPE */ .qnx-appux-prototype{ padding:105px 6%; background:#fff; } .qnx-appux-prototype-inner{ max-width:1250px; min-height:520px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; padding:70px; background:#0d1730; } .qnx-appux-prototype-copy{ max-width:570px; } .qnx-appux-prototype-copy > span{ color:#b7e51c; } .qnx-appux-prototype-copy h2{ color:#fff; } .qnx-appux-prototype-copy > p{ color:#b9c9e3; } .qnx-appux-prototype-path{ display:flex; align-items:center; margin-top:35px; } .qnx-appux-prototype-path > div{ display:flex; flex-direction:column; align-items:center; gap:7px; } .qnx-appux-prototype-path b{ width:33px; height:33px; display:grid; place-items:center; border:1px solid #657590; color:#8c9ab0; font-size:8px; } .qnx-appux-prototype-path .active b{ border-color:#b7e51c; color:#b7e51c; } .qnx-appux-prototype-path span{ color:#78869d; font-size:7px; } .qnx-appux-prototype-path i{ width:45px; height:1px; background:#52627d; margin:0 5px; } .qnx-appux-prototype-stack{ position:relative; min-height:350px; } .qnx-appux-stack-layer{ position:absolute; width:330px; height:190px; padding:25px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid rgba(255,255,255,.18); transition:.4s ease; } .qnx-appux-stack-layer:hover{ transform:translateY(-8px) rotate(0deg); } .qnx-appux-stack-layer span{ color:#8796ae; font-size:8px; letter-spacing:1.5px; } .qnx-appux-stack-layer b{ color:#fff; font-size:20px; } .layer-back{ left:10px; top:15px; transform:rotate(-8deg); background:#062d7a; } .layer-mid{ left:45px; top:70px; transform:rotate(4deg); background:#0758d8; } .layer-front{ left:20px; top:125px; background:#087ee7; } .layer-front span{ color:#b7e51c; } .layer-front i{ align-self:flex-end; color:#b7e51c; font-style:normal; font-size:22px; } /* SERVICES */ .qnx-appux-services{ padding:105px 6%; background:#f4f8ff; } .qnx-appux-services-head{ max-width:760px; margin:0 auto 55px; text-align:center; } .qnx-appux-service-list{ max-width:1100px; margin:auto; } .qnx-appux-service-list > div{ display:grid; grid-template-columns:45px 1fr 1fr; gap:25px; align-items:center; padding:22px 0; border-top:1px solid #d5e0ed; transition:.3s ease; } .qnx-appux-service-list > div:last-child{ border-bottom:1px solid #d5e0ed; } .qnx-appux-service-list > div:hover{ padding-left:14px; padding-right:14px; background:#fff; } .qnx-appux-service-list span{ color:#0758d8; font-size:9px; font-weight:800; } .qnx-appux-service-list strong{ color:#0d1730; font-size:17px; } .qnx-appux-service-list p{ margin:0; color:#69778e; font-size:11px; line-height:1.6; } /* FINAL */ .qnx-appux-final{ padding:105px 6%; background:linear-gradient(135deg,#062d7a 0%,#0758d8 52%,#087ee7 78%,#08a8cf 100%); } .qnx-appux-final-grid{ position:absolute; inset:0; opacity:.13; background-image: linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px); background-size:55px 55px; } .qnx-appux-final-content{ position:relative; z-index:2; max-width:900px; margin:auto; text-align:center; } .qnx-appux-final-marker{ display:flex; justify-content:center; align-items:center; gap:14px; margin-bottom:25px; } .qnx-appux-final-marker span{ color:#fff; font-size:9px; font-weight:800; letter-spacing:1.5px; } .qnx-appux-final-marker span:first-child{ color:#b7e51c; } .qnx-appux-final-marker b{ color:rgba(255,255,255,.5); font-size:12px; } .qnx-appux-final-content h2{ margin:0; color:#fff; font-size:clamp(40px,5vw,68px); line-height:1; letter-spacing:-3px; } .qnx-appux-final-content > p{ max-width:620px; margin:22px auto 30px; color:#d1e0f5; font-size:14px; line-height:1.75; } .qnx-appux-final-link{ background:#fff; color:#0758d8; } .qnx-appux-final-link:hover{ transform:translateY(-3px); } /* RESPONSIVE */ @media(max-width:1050px){ .qnx-appux-intro-inner, .qnx-appux-interface, .qnx-appux-gesture{ grid-template-columns:1fr; } .qnx-appux-intro-copy{ max-width:760px; } .qnx-appux-blueprint{ max-width:800px; width:100%; margin:auto; } .qnx-appux-interface-visual{ max-width:700px; width:100%; margin:auto; } .qnx-appux-interface-copy, .qnx-appux-gesture-copy{ max-width:760px; margin:auto; } .qnx-appux-system-board{ grid-template-columns:1fr 1fr; } .qnx-appux-system-column:nth-child(2){ border-right:0; } .qnx-appux-system-column:nth-child(-n+2){ border-bottom:1px solid #d8e2ee; } .qnx-appux-prototype-inner{ grid-template-columns:1fr; } } @media(max-width:800px){ .qnx-appux-thinking-grid{ grid-template-columns:1fr 1fr; } .qnx-appux-service-list > div{ grid-template-columns:40px 1fr; } .qnx-appux-service-list p{ grid-column:2; } } @media(max-width:600px){ .qnx-appux-intro, .qnx-appux-thinking, .qnx-appux-interface, .qnx-appux-gesture, .qnx-appux-system, .qnx-appux-prototype, .qnx-appux-services, .qnx-appux-final{ padding-left:5%; padding-right:5%; } .qnx-appux-intro{ padding-top:65px; } .qnx-appux-intro-copy h2{ font-size:42px; letter-spacing:-2px; } .qnx-appux-blueprint{ min-height:430px; padding:15px; } .qnx-appux-flow{ min-height:320px; } .qnx-appux-flow-node{ width:110px; padding:13px; } .node-start{ left:0; } .node-action{ right:0; } .node-main{ left:31%; top:145px; } .node-end{ right:22%; bottom:25px; } .line-a{ width:120px; left:19%; } .line-b{ width:110px; left:48%; } .line-c{ width:100px; left:42%; } .qnx-appux-thinking-grid{ grid-template-columns:1fr; } .qnx-appux-thinking-grid article{ min-height:190px; } .qnx-appux-thinking-mark{ margin-bottom:30px; } .qnx-appux-interface-visual{ min-height:550px; } .qnx-appux-device{ transform:scale(.9); } .measure-one{ right:0; } .measure-two{ left:0; } .measure-three{ right:0; } .qnx-appux-gesture-visual{ min-height:500px; } .qnx-appux-system-board{ grid-template-columns:1fr; } .qnx-appux-system-column{ border-right:0; border-bottom:1px solid #d8e2ee; } .qnx-appux-system-column:last-child{ border-bottom:0; } .qnx-appux-prototype-inner{ padding:40px 25px; } .qnx-appux-prototype-path{ overflow-x:auto; padding-bottom:8px; } .qnx-appux-prototype-stack{ transform:scale(.82); transform-origin:center; min-height:330px; } .qnx-appux-service-list > div{ grid-template-columns:35px 1fr; gap:15px; } .qnx-appux-service-list p{ grid-column:2; } .qnx-appux-final{ padding-top:80px; padding-bottom:80px; } .qnx-appux-final-content h2{ font-size:42px; letter-spacing:-2px; } } /* ========================================================= QNIX DIGITAL — FLUTTER APP DEVELOPMENT ========================================================= */ .qnx-flutter-intro, .qnx-flutter-foundation, .qnx-flutter-adaptive, .qnx-flutter-capabilities, .qnx-flutter-native, .qnx-flutter-delivery, .qnx-flutter-fit, .qnx-flutter-final{ position:relative; overflow:hidden; font-family:inherit; } .qnx-flutter-intro{ min-height:590px; padding:88px 7%; display:grid; grid-template-columns:1fr 1.05fr; gap:70px; align-items:center; background: radial-gradient(circle at 78% 18%,rgba(8,168,207,.15),transparent 30%), linear-gradient(135deg,#f8fbff 0%,#eef6ff 54%,#fff 100%); } .qnx-flutter-intro-grid{ position:absolute; inset:0; opacity:.32; background-image: linear-gradient(rgba(7,88,216,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.06) 1px,transparent 1px); background-size:46px 46px; mask-image:linear-gradient(90deg,black,transparent 78%); } .qnx-flutter-intro-copy{ position:relative; z-index:2; max-width:650px; } .qnx-flutter-kicker, .qnx-flutter-section-head span, .qnx-flutter-adaptive-copy>span, .qnx-flutter-capabilities-top>span, .qnx-flutter-native-copy>span, .qnx-flutter-delivery-title>span, .qnx-flutter-fit-intro>span{ display:inline-block; margin-bottom:18px; font-size:11px; font-weight:800; letter-spacing:2.6px; color:#0758d8; } .qnx-flutter-intro-copy h2{ margin:0; color:#0d1730; font-size:clamp(48px,5.6vw,82px); line-height:.94; letter-spacing:-3.8px; font-weight:500; } .qnx-flutter-intro-copy h2 strong{ color:#0758d8; font-weight:800; } .qnx-flutter-intro-copy p{ max-width:590px; margin:28px 0 0; color:#5d6b84; font-size:17px; line-height:1.75; } .qnx-flutter-intro-points{ display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; } .qnx-flutter-intro-points span{ padding:9px 14px; border:1px solid #d6e2f2; background:#fff; color:#0d1730; font-size:11px; font-weight:800; letter-spacing:.6px; } .qnx-flutter-architecture{ position:relative; min-height:390px; display:flex; align-items:center; justify-content:center; z-index:2; } .qnx-flutter-code{ width:min(440px,100%); background:#0d1730; border:1px solid rgba(8,168,207,.3); box-shadow:0 30px 70px rgba(6,45,122,.18); transform:rotate(-2deg); transition:.45s ease; } .qnx-flutter-code:hover{ transform:rotate(0) translateY(-7px); } .qnx-flutter-code-top{ height:48px; display:flex; align-items:center; gap:7px; padding:0 18px; border-bottom:1px solid rgba(255,255,255,.08); } .qnx-flutter-code-top span{ width:7px; height:7px; border-radius:50%; background:#087ee7; } .qnx-flutter-code-top span:nth-child(2){background:#08a8cf} .qnx-flutter-code-top span:nth-child(3){background:#79c91c} .qnx-flutter-code-top b{ margin-left:12px; color:#9bb1d2; font-size:10px; letter-spacing:1px; } .qnx-flutter-code-lines{ padding:25px 25px 27px; display:grid; gap:14px; } .qnx-flutter-code-lines i{ font-style:normal; color:#dce8ff; font-size:13px; font-family:monospace; } .qnx-flutter-code-lines em{ display:inline-block; width:28px; color:#10a4b4; font-style:normal; } .qnx-flutter-branch{ position:absolute; right:-5px; top:50%; transform:translateY(-50%); display:grid; gap:17px; width:175px; } .qnx-flutter-branch-line{ position:absolute; width:54px; height:92px; left:-54px; top:39px; border-top:2px solid #08a8cf; border-right:2px solid #08a8cf; border-radius:0 25px 0 0; } .qnx-flutter-platform{ position:relative; display:grid; grid-template-columns:35px 1fr 20px; gap:10px; align-items:center; padding:13px 12px; background:#fff; border:1px solid #dbe6f4; box-shadow:0 13px 35px rgba(7,88,216,.09); } .qnx-flutter-platform-icon{ width:35px; height:35px; display:grid; place-items:center; background:#0758d8; color:#fff; font-weight:800; } .qnx-flutter-platform small{ display:block; color:#8290a6; font-size:8px; letter-spacing:1px; } .qnx-flutter-platform strong{ color:#0d1730; font-size:13px; } .qnx-flutter-platform>b{ color:#0758d8; } .qnx-flutter-foundation{ padding:105px 7%; background:#fff; } .qnx-flutter-section-head{ max-width:620px; margin-bottom:65px; } .qnx-flutter-section-head h2, .qnx-flutter-capabilities-top h2, .qnx-flutter-delivery-title h2, .qnx-flutter-fit-intro h2{ margin:0; color:#0d1730; font-size:clamp(38px,4.2vw,62px); line-height:1; letter-spacing:-2.8px; font-weight:500; } .qnx-flutter-section-head h2 strong, .qnx-flutter-capabilities-top h2 strong, .qnx-flutter-delivery-title h2 strong, .qnx-flutter-fit-intro h2 strong{ color:#0758d8; font-weight:800; } .qnx-flutter-section-head p{ margin:25px 0 0; max-width:570px; color:#5d6b84; line-height:1.75; font-size:16px; } .qnx-flutter-foundation-map{ position:relative; min-height:420px; max-width:1100px; margin:auto; } .qnx-flutter-core{ position:absolute; width:220px; height:220px; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-content:center; text-align:center; background:linear-gradient(145deg,#0758d8,#087ee7 62%,#08a8cf); color:#fff; box-shadow:0 28px 65px rgba(7,88,216,.2); clip-path:polygon(14% 0,86% 0,100% 14%,100% 86%,86% 100%,14% 100%,0 86%,0 14%); } .qnx-flutter-core span{ font-size:10px; letter-spacing:3px; font-weight:800; opacity:.8; } .qnx-flutter-core strong{ margin-top:10px; font-size:22px; line-height:1.05; letter-spacing:-.7px; } .qnx-flutter-map-item{ position:absolute; width:240px; padding:20px; background:#f4f8ff; border:1px solid #dce7f5; } .qnx-flutter-map-item:after{ content:""; position:absolute; background:#b8d6f4; } .qnx-flutter-map-item b{ display:block; color:#0758d8; font-size:11px; letter-spacing:1px; } .qnx-flutter-map-item small{ display:block; margin-top:7px; color:#5d6b84; line-height:1.5; } .qnx-flutter-map-a{left:0;top:25px} .qnx-flutter-map-b{right:0;top:25px} .qnx-flutter-map-c{left:0;bottom:25px} .qnx-flutter-map-d{right:0;bottom:25px} .qnx-flutter-map-a:after, .qnx-flutter-map-c:after{ width:115px; height:1px; right:-115px; top:50%; } .qnx-flutter-map-b:after, .qnx-flutter-map-d:after{ width:115px; height:1px; left:-115px; top:50%; } .qnx-flutter-adaptive{ padding:105px 7%; display:grid; grid-template-columns:1.05fr .95fr; gap:80px; align-items:center; background:#f4f8ff; } .qnx-flutter-adaptive-visual{ position:relative; min-height:390px; display:flex; align-items:center; justify-content:center; gap:26px; } .qnx-flutter-screen{ width:245px; height:330px; padding:18px; background:#fff; border:1px solid #d6e2f2; box-shadow:0 22px 55px rgba(7,88,216,.11); transition:.45s ease; } .qnx-flutter-screen-left{ transform:rotate(-5deg) translateY(8px); } .qnx-flutter-screen-right{ transform:rotate(5deg) translateY(-8px); } .qnx-flutter-screen:hover{ transform:translateY(-10px) rotate(0); } .qnx-flutter-screen-bar{ width:55%; height:6px; background:#0758d8; margin-bottom:27px; } .qnx-flutter-screen-title{ width:76%; height:25px; background:#0d1730; margin-bottom:22px; } .qnx-flutter-screen-block{ height:100px; background:linear-gradient(135deg,#0758d8,#08a8cf); margin-bottom:16px; } .qnx-flutter-screen-card{ height:100px; border:1px solid #dce6f2; background:#f4f8ff; margin-bottom:16px; } .qnx-flutter-screen-row{ width:90%; height:8px; background:#dce7f4; margin-bottom:9px; } .qnx-flutter-screen-row.short{width:55%} .qnx-flutter-adaptive-divider{ position:absolute; z-index:3; display:grid; place-items:center; gap:7px; } .qnx-flutter-adaptive-divider span{ padding:7px 11px; background:#b7e51c; color:#0d1730; font-size:8px; font-weight:900; letter-spacing:1.5px; } .qnx-flutter-adaptive-divider i{ width:38px; height:1px; background:#0758d8; } .qnx-flutter-adaptive-copy{ max-width:570px; } .qnx-flutter-adaptive-copy h2, .qnx-flutter-native-copy h2{ margin:0; color:#0d1730; font-size:clamp(38px,4.3vw,61px); line-height:1; letter-spacing:-2.7px; font-weight:500; } .qnx-flutter-adaptive-copy h2 strong, .qnx-flutter-native-copy h2 strong{ color:#0758d8; font-weight:800; } .qnx-flutter-adaptive-copy>p, .qnx-flutter-native-copy>p{ margin:25px 0 0; color:#5d6b84; line-height:1.75; font-size:16px; } .qnx-flutter-adaptive-list{ margin-top:30px; border-top:1px solid #d7e2ef; } .qnx-flutter-adaptive-list div{ display:flex; gap:20px; align-items:center; padding:15px 0; border-bottom:1px solid #d7e2ef; } .qnx-flutter-adaptive-list strong{ color:#0758d8; font-size:11px; } .qnx-flutter-adaptive-list span{ color:#0d1730; font-size:14px; font-weight:700; } .qnx-flutter-capabilities{ padding:105px 7%; background:#fff; } .qnx-flutter-capabilities-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:50px; margin-bottom:55px; } .qnx-flutter-capabilities-top h2{ max-width:680px; } .qnx-flutter-capability-list{ max-width:1180px; margin:auto; border-top:1px solid #d9e4f1; } .qnx-flutter-capability-list article{ display:grid; grid-template-columns:75px 1fr 40px; align-items:center; gap:30px; min-height:120px; padding:20px 5px; border-bottom:1px solid #d9e4f1; transition:.35s ease; } .qnx-flutter-capability-list article:hover{ padding-left:22px; background:#f4f8ff; } .qnx-flutter-cap-number{ color:#08a8cf; font-size:12px; font-weight:900; } .qnx-flutter-capability-list h3{ margin:0; color:#0d1730; font-size:22px; } .qnx-flutter-capability-list p{ max-width:650px; margin:8px 0 0; color:#5d6b84; font-size:14px; line-height:1.55; } .qnx-flutter-capability-list article>span{ color:#0758d8; font-size:22px; } .qnx-flutter-native{ padding:105px 7%; display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center; background:#0d1730; } .qnx-flutter-native-copy{ max-width:570px; } .qnx-flutter-native-copy h2{ color:#fff; } .qnx-flutter-native-copy h2 strong{ color:#08a8cf; } .qnx-flutter-native-copy>p{ color:#a9b8d0; } .qnx-flutter-native-copy>span{ color:#79c91c; } .qnx-flutter-native-board{ position:relative; min-height:430px; border:1px solid rgba(255,255,255,.1); background: linear-gradient(rgba(8,126,231,.08) 1px,transparent 1px), linear-gradient(90deg,rgba(8,126,231,.08) 1px,transparent 1px); background-size:42px 42px; } .qnx-flutter-native-center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:155px; height:155px; display:grid; place-content:center; text-align:center; background:#0758d8; border:8px solid #0d1730; outline:1px solid #087ee7; color:#fff; } .qnx-flutter-native-center span{ font-size:9px; letter-spacing:2px; opacity:.75; } .qnx-flutter-native-center strong{ font-size:22px; margin-top:7px; } .qnx-flutter-native-chip{ position:absolute; padding:11px 15px; background:#fff; color:#0d1730; font-size:11px; font-weight:800; box-shadow:0 12px 30px rgba(0,0,0,.18); } .chip-one{left:8%;top:16%} .chip-two{right:7%;top:17%} .chip-three{left:6%;bottom:19%} .chip-four{right:8%;bottom:20%} .chip-five{left:36%;top:5%} .chip-six{left:38%;bottom:5%} .qnx-flutter-delivery{ padding:105px 7%; background:#fff; } .qnx-flutter-delivery-title{ max-width:650px; margin-bottom:65px; } .qnx-flutter-delivery-track{ max-width:1200px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #d7e2ef; border-bottom:1px solid #d7e2ef; } .qnx-flutter-delivery-step{ min-height:205px; padding:30px 25px; border-right:1px solid #d7e2ef; transition:.35s ease; } .qnx-flutter-delivery-step:last-child{ border-right:0; } .qnx-flutter-delivery-step:hover{ background:#f4f8ff; transform:translateY(-5px); } .qnx-flutter-delivery-step>b{ display:block; color:#0758d8; font-size:11px; margin-bottom:42px; } .qnx-flutter-delivery-step strong{ display:block; color:#0d1730; font-size:20px; } .qnx-flutter-delivery-step span{ display:block; margin-top:8px; color:#5d6b84; line-height:1.5; font-size:13px; } .qnx-flutter-fit{ padding:105px 7%; background:#f4f8ff; } .qnx-flutter-fit-intro{ display:flex; align-items:flex-end; justify-content:space-between; gap:50px; margin-bottom:55px; } .qnx-flutter-fit-grid{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #d6e2f0; border-bottom:1px solid #d6e2f0; } .qnx-flutter-fit-grid>div{ min-height:235px; padding:27px 24px; border-right:1px solid #d6e2f0; transition:.35s ease; } .qnx-flutter-fit-grid>div:last-child{ border-right:0; } .qnx-flutter-fit-grid>div:hover{ background:#fff; transform:translateY(-5px); box-shadow:0 18px 45px rgba(7,88,216,.08); } .qnx-flutter-fit-grid strong{ color:#08a8cf; font-size:11px; } .qnx-flutter-fit-grid h3{ margin:55px 0 10px; color:#0d1730; font-size:19px; } .qnx-flutter-fit-grid p{ margin:0; color:#5d6b84; line-height:1.6; font-size:13px; } .qnx-flutter-final{ min-height:500px; padding:85px 7%; display:grid; grid-template-columns:1fr .8fr; align-items:center; gap:70px; background:linear-gradient(115deg,#062d7a 0%,#0758d8 55%,#08a8cf 100%); } .qnx-flutter-final:before{ content:""; position:absolute; width:500px; height:500px; right:-230px; bottom:-260px; border:1px solid rgba(183,229,28,.4); transform:rotate(45deg); } .qnx-flutter-final-line{ position:absolute; left:0; top:0; width:31%; height:5px; background:#b7e51c; } .qnx-flutter-final-main{ position:relative; z-index:2; max-width:690px; } .qnx-flutter-final-main>span{ color:#b7e51c; font-size:10px; font-weight:900; letter-spacing:2.5px; } .qnx-flutter-final-main h2{ margin:18px 0 0; color:#fff; font-size:clamp(42px,5vw,70px); line-height:.96; letter-spacing:-3px; font-weight:500; } .qnx-flutter-final-main h2 strong{ color:#b7e51c; font-weight:800; } .qnx-flutter-final-main p{ max-width:570px; margin:25px 0 30px; color:#d8e5fa; line-height:1.7; font-size:15px; } .qnx-flutter-final-btn{ display:inline-flex; align-items:center; gap:30px; min-width:250px; justify-content:space-between; padding:15px 17px 15px 20px; background:#fff; color:#0758d8; text-decoration:none; font-size:12px; font-weight:900; letter-spacing:.5px; transition:.35s ease; } .qnx-flutter-final-btn b{ width:34px; height:34px; display:grid; place-items:center; background:#b7e51c; color:#0d1730; font-size:16px; } .qnx-flutter-final-btn:hover{ transform:translateX(7px); box-shadow:0 18px 40px rgba(0,0,0,.18); } .qnx-flutter-final-platforms{ position:relative; z-index:2; display:flex; flex-direction:column; gap:16px; align-items:flex-start; } .qnx-flutter-final-platforms>div{ min-width:245px; padding:18px 20px; border-left:3px solid rgba(183,229,28,.9); background:rgba(255,255,255,.08); backdrop-filter:blur(8px); } .qnx-flutter-final-platforms small{ display:block; color:#a9c5e9; font-size:8px; letter-spacing:2px; } .qnx-flutter-final-platforms strong{ display:block; margin-top:5px; color:#fff; font-size:14px; letter-spacing:1px; } .qnx-flutter-final-platforms i{ width:1px; height:25px; margin-left:20px; background:rgba(183,229,28,.55); } @media(max-width:1050px){ .qnx-flutter-intro{ grid-template-columns:1fr; gap:40px; } .qnx-flutter-architecture{ max-width:650px; width:100%; margin:auto; } .qnx-flutter-adaptive, .qnx-flutter-native{ grid-template-columns:1fr; } .qnx-flutter-adaptive-copy, .qnx-flutter-native-copy{ max-width:700px; } .qnx-flutter-delivery-track, .qnx-flutter-fit-grid{ grid-template-columns:repeat(2,1fr); } .qnx-flutter-fit-grid>div:nth-child(2){ border-right:0; } .qnx-flutter-fit-grid>div:nth-child(-n+2){ border-bottom:1px solid #d6e2f0; } .qnx-flutter-final{ grid-template-columns:1fr; } } @media(max-width:720px){ .qnx-flutter-intro, .qnx-flutter-foundation, .qnx-flutter-adaptive, .qnx-flutter-capabilities, .qnx-flutter-native, .qnx-flutter-delivery, .qnx-flutter-fit, .qnx-flutter-final{ padding:70px 20px; } .qnx-flutter-intro{ min-height:auto; } .qnx-flutter-intro-copy h2{ font-size:46px; letter-spacing:-2.4px; } .qnx-flutter-architecture{ min-height:500px; align-items:flex-start; padding-top:20px; } .qnx-flutter-code{ width:82%; margin-right:auto; } .qnx-flutter-branch{ right:0; top:auto; bottom:15px; transform:none; width:155px; } .qnx-flutter-branch-line{ display:none; } .qnx-flutter-foundation-map{ min-height:600px; } .qnx-flutter-core{ width:175px; height:175px; } .qnx-flutter-map-item{ width:190px; } .qnx-flutter-map-a{left:0;top:0} .qnx-flutter-map-b{right:0;top:115px} .qnx-flutter-map-c{left:0;bottom:115px} .qnx-flutter-map-d{right:0;bottom:0} .qnx-flutter-map-item:after{ display:none; } .qnx-flutter-adaptive-visual{ min-height:330px; gap:8px; } .qnx-flutter-screen{ width:47%; height:280px; } .qnx-flutter-capabilities-top, .qnx-flutter-fit-intro{ display:block; } .qnx-flutter-capabilities-top h2{ margin-top:10px; } .qnx-flutter-capability-list article{ grid-template-columns:45px 1fr 25px; gap:14px; } .qnx-flutter-capability-list h3{ font-size:18px; } .qnx-flutter-delivery-track, .qnx-flutter-fit-grid{ grid-template-columns:1fr; } .qnx-flutter-delivery-step{ border-right:0; border-bottom:1px solid #d7e2ef; } .qnx-flutter-fit-grid>div{ border-right:0; border-bottom:1px solid #d6e2f0; } .qnx-flutter-fit-grid>div:last-child{ border-bottom:0; } .qnx-flutter-native-board{ min-height:360px; } .qnx-flutter-native-chip{ font-size:9px; padding:9px 10px; } .chip-five{left:28%} .chip-six{left:30%} .qnx-flutter-final-main h2{ font-size:44px; letter-spacing:-2px; } .qnx-flutter-final-platforms>div{ min-width:210px; } } /* ========================================================= QNIX DIGITAL — REACT NATIVE APP DEVELOPMENT ========================================================= */ .qnx-rn-intro, .qnx-rn-system, .qnx-rn-native, .qnx-rn-data, .qnx-rn-interface, .qnx-rn-build, .qnx-rn-solutions, .qnx-rn-final{ position:relative; overflow:hidden; font-family:inherit; } .qnx-rn-intro{ min-height:600px; padding:90px 7%; display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; background:#fff; } .qnx-rn-intro-bg{ position:absolute; inset:0; background: radial-gradient(circle at 80% 50%,rgba(8,168,207,.13),transparent 28%), linear-gradient(90deg,#f4f8ff 0%,#fff 62%); } .qnx-rn-intro-bg:after{ content:""; position:absolute; width:480px; height:480px; right:-170px; top:-160px; border:1px solid rgba(7,88,216,.12); transform:rotate(45deg); } .qnx-rn-intro-copy{ position:relative; z-index:2; max-width:650px; } .qnx-rn-kicker, .qnx-rn-system-heading>span, .qnx-rn-native-copy>span, .qnx-rn-data-heading>span, .qnx-rn-interface-copy>span, .qnx-rn-build-heading>span, .qnx-rn-solutions-top>span{ display:inline-block; margin-bottom:18px; color:#0758d8; font-size:11px; font-weight:900; letter-spacing:2.5px; } .qnx-rn-intro-copy h2{ margin:0; color:#0d1730; font-size:clamp(50px,6vw,84px); line-height:.93; letter-spacing:-4px; font-weight:500; } .qnx-rn-intro-copy h2 strong{ color:#0758d8; font-weight:800; } .qnx-rn-intro-copy p{ max-width:570px; margin:28px 0 0; color:#5d6b84; font-size:17px; line-height:1.75; } .qnx-rn-intro-tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; } .qnx-rn-intro-tags span{ padding:9px 14px; border:1px solid #dbe5f1; background:#fff; color:#0d1730; font-size:10px; font-weight:800; } .qnx-rn-architecture{ position:relative; z-index:2; padding:28px; background:#0d1730; box-shadow:0 28px 70px rgba(6,45,122,.18); transform:rotate(1.5deg); transition:.5s ease; } .qnx-rn-architecture:hover{ transform:rotate(0) translateY(-7px); } .qnx-rn-arch-top{ display:grid; grid-template-columns:1fr auto; gap:6px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.1); } .qnx-rn-arch-top span{ grid-column:1/-1; color:#08a8cf; font-size:8px; letter-spacing:2px; font-weight:900; } .qnx-rn-arch-top strong{ color:#fff; font-size:20px; } .qnx-rn-arch-top b{ color:#b7e51c; font-size:10px; align-self:end; } .qnx-rn-arch-flow{ display:grid; grid-template-columns:1fr 40px 1fr 40px 1fr; align-items:center; gap:8px; margin-top:25px; } .qnx-rn-flow-node{ min-height:125px; padding:17px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.035); transition:.35s ease; } .qnx-rn-flow-node.active{ background:#0758d8; border-color:#087ee7; } .qnx-rn-flow-node small{ display:block; color:#08a8cf; font-size:8px; font-weight:900; } .qnx-rn-flow-node.active small{ color:#b7e51c; } .qnx-rn-flow-node strong{ display:block; margin-top:25px; color:#fff; font-size:16px; } .qnx-rn-flow-node span{ display:block; margin-top:5px; color:#9db0cb; font-size:9px; line-height:1.4; } .qnx-rn-flow-node.active span{ color:#dbe8fa; } .qnx-rn-flow-node+i{ height:1px; background:#087ee7; position:relative; } .qnx-rn-flow-node+i:after{ content:"›"; position:absolute; right:-2px; top:-9px; color:#08a8cf; font-size:15px; } .qnx-rn-device-strip{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; } .qnx-rn-device-strip div{ padding:13px 15px; display:flex; align-items:center; justify-content:space-between; border-left:2px solid #79c91c; background:rgba(255,255,255,.06); } .qnx-rn-device-strip span{ color:#fff; font-size:9px; font-weight:800; letter-spacing:1.5px; } .qnx-rn-device-strip b{ color:#b7e51c; } .qnx-rn-system{ padding:105px 7%; background:#f4f8ff; } .qnx-rn-system-heading{ max-width:700px; margin-bottom:65px; } .qnx-rn-system-heading h2, .qnx-rn-interface-copy h2, .qnx-rn-build-heading h2, .qnx-rn-solutions-top h2{ margin:0; color:#0d1730; font-size:clamp(40px,4.4vw,64px); line-height:1; letter-spacing:-3px; font-weight:500; } .qnx-rn-system-heading h2 strong, .qnx-rn-interface-copy h2 strong, .qnx-rn-build-heading h2 strong, .qnx-rn-solutions-top h2 strong{ color:#0758d8; font-weight:800; } .qnx-rn-system-heading p{ max-width:620px; margin:24px 0 0; color:#5d6b84; line-height:1.75; font-size:16px; } .qnx-rn-system-map{ max-width:1200px; min-height:400px; margin:auto; display:grid; grid-template-columns:1fr 90px .8fr 90px 1fr; align-items:center; } .qnx-rn-map-column{ display:grid; gap:14px; } .qnx-rn-map-column>small{ margin-bottom:4px; color:#0758d8; font-size:9px; font-weight:900; letter-spacing:2px; } .qnx-rn-map-box{ padding:22px; background:#fff; border:1px solid #dce6f3; box-shadow:0 15px 40px rgba(7,88,216,.06); transition:.35s ease; } .qnx-rn-map-box:hover{ transform:translateY(-5px); border-color:#087ee7; } .qnx-rn-map-box strong{ display:block; color:#0d1730; font-size:17px; } .qnx-rn-map-box span{ display:block; margin-top:6px; color:#5d6b84; font-size:12px; line-height:1.5; } .qnx-rn-map-column.center{ justify-items:center; text-align:center; } .qnx-rn-core{ width:185px; height:185px; display:grid; place-content:center; background:#0758d8; color:#fff; text-align:center; box-shadow:0 25px 55px rgba(7,88,216,.22); clip-path:polygon(50% 0,91% 14%,100% 50%,91% 86%,50% 100%,9% 86%,0 50%,9% 14%); } .qnx-rn-core span{ color:#b7e51c; font-size:10px; font-weight:900; letter-spacing:3px; } .qnx-rn-core strong{ margin-top:9px; font-size:20px; line-height:1.05; } .qnx-rn-map-connector{ display:flex; flex-direction:column; gap:8px; } .qnx-rn-map-connector i{ display:block; height:1px; background:#75b8ed; position:relative; } .qnx-rn-map-connector i:nth-child(2){ width:65%; margin-left:auto; } .qnx-rn-map-connector.reverse i:nth-child(2){ margin-left:0; } .qnx-rn-native{ padding:105px 7%; display:grid; grid-template-columns:1fr 1fr; gap:85px; align-items:center; background:#fff; } .qnx-rn-native-visual{ position:relative; min-height:450px; display:grid; place-items:center; background: linear-gradient(rgba(7,88,216,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.055) 1px,transparent 1px); background-size:40px 40px; } .qnx-rn-device-panel{ width:min(420px,90%); padding:20px; background:#0d1730; box-shadow:0 25px 60px rgba(6,45,122,.2); position:relative; z-index:2; } .qnx-rn-device-top{ display:flex; align-items:center; justify-content:space-between; padding-bottom:17px; border-bottom:1px solid rgba(255,255,255,.1); } .qnx-rn-device-top span{ color:#fff; font-size:10px; font-weight:800; letter-spacing:1.5px; } .qnx-rn-device-top b{ padding:5px 8px; background:#79c91c; color:#0d1730; font-size:8px; } .qnx-rn-device-row{ display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:12px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.08); } .qnx-rn-service-icon{ width:38px; height:38px; display:grid; place-items:center; background:#0758d8; color:#b7e51c; font-weight:900; } .qnx-rn-device-row strong{ display:block; color:#fff; font-size:12px; } .qnx-rn-device-row small{ display:block; margin-top:4px; color:#8396b5; font-size:9px; } .qnx-rn-device-row>b{ color:#08a8cf; font-size:8px; } .qnx-rn-native-pulse{ position:absolute; width:210px; height:210px; border:1px solid rgba(8,168,207,.35); transform:rotate(45deg); animation:qnxRnPulse 5s ease-in-out infinite; } @keyframes qnxRnPulse{ 0%,100%{transform:rotate(45deg) scale(.9)} 50%{transform:rotate(45deg) scale(1.08)} } .qnx-rn-native-copy{ max-width:590px; } .qnx-rn-native-copy h2{ margin:0; color:#0d1730; font-size:clamp(39px,4.2vw,60px); line-height:1; letter-spacing:-2.7px; font-weight:500; } .qnx-rn-native-copy h2 strong{ color:#0758d8; font-weight:800; } .qnx-rn-native-copy>p{ margin:25px 0 0; color:#5d6b84; font-size:16px; line-height:1.75; } .qnx-rn-native-points{ margin-top:30px; border-top:1px solid #dbe5f0; } .qnx-rn-native-points>div{ display:grid; grid-template-columns:35px 1fr; column-gap:14px; padding:15px 0; border-bottom:1px solid #dbe5f0; } .qnx-rn-native-points b{ color:#08a8cf; font-size:10px; } .qnx-rn-native-points strong{ color:#0d1730; font-size:14px; } .qnx-rn-native-points span{ grid-column:2; color:#5d6b84; font-size:12px; margin-top:4px; } .qnx-rn-data{ padding:105px 7%; background:#0d1730; } .qnx-rn-data-heading{ max-width:580px; margin-bottom:60px; } .qnx-rn-data-heading>span{ color:#b7e51c; } .qnx-rn-data-heading h2{ margin:0; color:#fff; font-size:clamp(40px,4.5vw,65px); line-height:1; letter-spacing:-3px; font-weight:500; } .qnx-rn-data-heading h2 strong{ color:#08a8cf; font-weight:800; } .qnx-rn-data-flow{ max-width:1250px; margin:auto; display:grid; grid-template-columns:1fr 60px 1fr 60px 1fr 60px 1fr; align-items:center; } .qnx-rn-data-node{ min-height:145px; padding:22px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.035); transition:.35s ease; } .qnx-rn-data-node:hover, .qnx-rn-data-node.highlighted{ background:#0758d8; border-color:#087ee7; transform:translateY(-7px); } .qnx-rn-data-node small{ color:#08a8cf; font-size:8px; font-weight:900; letter-spacing:2px; } .qnx-rn-data-node strong{ display:block; margin-top:27px; color:#fff; font-size:17px; } .qnx-rn-data-node span{ display:block; margin-top:7px; color:#92a7c7; font-size:10px; } .qnx-rn-data-node.highlighted small{ color:#b7e51c; } .qnx-rn-data-node.highlighted span{ color:#d3e4fb; } .qnx-rn-data-line{ height:1px; background:#087ee7; position:relative; } .qnx-rn-data-line:after{ content:"›"; position:absolute; right:-3px; top:-10px; color:#08a8cf; font-size:16px; } .qnx-rn-interface{ padding:105px 7%; display:grid; grid-template-columns:.85fr 1.15fr; gap:90px; align-items:center; background:#f4f8ff; } .qnx-rn-interface-copy{ max-width:550px; } .qnx-rn-interface-copy p{ margin:25px 0 0; color:#5d6b84; font-size:16px; line-height:1.75; } .qnx-rn-component-board{ position:relative; min-height:390px; padding:30px; background:#fff; border:1px solid #d8e4f1; box-shadow:0 25px 60px rgba(7,88,216,.09); } .qnx-rn-component-main{ width:72%; background:#0d1730; box-shadow:0 20px 45px rgba(6,45,122,.15); } .qnx-rn-component-head{ display:flex; justify-content:space-between; padding:15px 18px; border-bottom:1px solid rgba(255,255,255,.1); } .qnx-rn-component-head span{ color:#08a8cf; font-size:8px; letter-spacing:1.5px; font-weight:900; } .qnx-rn-component-head b{ color:#9db0cb; font-size:9px; font-family:monospace; } .qnx-rn-component-preview{ min-height:210px; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; } .qnx-rn-component-preview button{ border:0; padding:13px 20px; background:#0758d8; color:#fff; font-weight:800; cursor:pointer; } .qnx-rn-component-preview button.secondary{ background:#b7e51c; color:#0d1730; } .qnx-rn-component-side{ position:absolute; right:20px; top:65px; width:31%; display:grid; gap:14px; } .qnx-rn-component-side>div{ padding:17px; background:#f4f8ff; border:1px solid #dce6f2; } .qnx-rn-component-side small{ display:block; margin-bottom:12px; color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1px; } .qnx-rn-component-side strong{ display:block; color:#0d1730; font-size:10px; margin-top:6px; } .qnx-rn-component-footer{ position:absolute; left:30px; right:30px; bottom:25px; display:flex; justify-content:space-between; gap:10px; } .qnx-rn-component-footer span{ color:#5d6b84; font-size:8px; font-weight:800; letter-spacing:1px; } .qnx-rn-build{ padding:105px 7%; background:#fff; } .qnx-rn-build-heading{ max-width:650px; margin-bottom:60px; } .qnx-rn-build-track{ max-width:1200px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); border-left:1px solid #d9e4f0; } .qnx-rn-build-step{ min-height:250px; padding:25px; border-right:1px solid #d9e4f0; border-top:1px solid #d9e4f0; border-bottom:1px solid #d9e4f0; transition:.35s ease; } .qnx-rn-build-step:hover{ background:#f4f8ff; transform:translateY(-5px); } .qnx-rn-build-marker{ width:42px; height:42px; display:grid; place-items:center; background:#0758d8; color:#b7e51c; font-weight:900; margin-bottom:65px; } .qnx-rn-build-step h3{ margin:0; color:#0d1730; font-size:20px; } .qnx-rn-build-step p{ margin:9px 0 0; color:#5d6b84; line-height:1.55; font-size:13px; } .qnx-rn-solutions{ padding:105px 7%; background:#f4f8ff; } .qnx-rn-solutions-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:50px; margin-bottom:55px; } .qnx-rn-solutions-top h2{ max-width:700px; } .qnx-rn-solutions-grid{ max-width:1200px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #d6e2ef; border-bottom:1px solid #d6e2ef; } .qnx-rn-solutions-grid article{ min-height:245px; padding:27px 23px; border-right:1px solid #d6e2ef; transition:.35s ease; } .qnx-rn-solutions-grid article:last-child{ border-right:0; } .qnx-rn-solutions-grid article:hover{ background:#fff; transform:translateY(-6px); box-shadow:0 20px 45px rgba(7,88,216,.07); } .qnx-rn-solutions-grid article>span{ color:#08a8cf; font-size:10px; font-weight:900; } .qnx-rn-solutions-grid h3{ margin:55px 0 10px; color:#0d1730; font-size:19px; } .qnx-rn-solutions-grid p{ margin:0; color:#5d6b84; font-size:13px; line-height:1.6; } .qnx-rn-final{ min-height:430px; padding:75px 7%; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto 1fr; column-gap:70px; align-items:center; background: linear-gradient(120deg,#062d7a 0%,#0758d8 57%,#10a4b4 100%); } .qnx-rn-final:after{ content:"RN"; position:absolute; right:4%; bottom:-100px; color:rgba(255,255,255,.05); font-size:300px; line-height:1; font-weight:900; letter-spacing:-20px; } .qnx-rn-final-topline{ grid-column:1/-1; display:flex; align-items:center; gap:18px; } .qnx-rn-final-topline span{ color:#b7e51c; font-size:10px; font-weight:900; letter-spacing:2.5px; } .qnx-rn-final-topline i{ width:90px; height:1px; background:#b7e51c; } .qnx-rn-final-content{ position:relative; z-index:2; max-width:720px; } .qnx-rn-final-content h2{ margin:0; color:#fff; font-size:clamp(40px,4.8vw,67px); line-height:.98; letter-spacing:-3px; font-weight:500; } .qnx-rn-final-content h2 strong{ color:#b7e51c; font-weight:800; } .qnx-rn-final-content p{ max-width:620px; margin:24px 0 0; color:#d8e6fa; line-height:1.7; font-size:15px; } .qnx-rn-final-action{ position:relative; z-index:3; display:flex; align-items:center; gap:35px; min-width:285px; padding:8px 8px 8px 21px; background:#fff; color:#0758d8; text-decoration:none; font-size:11px; font-weight:900; letter-spacing:.7px; transition:.35s ease; } .qnx-rn-final-action b{ width:48px; height:48px; display:grid; place-items:center; background:#b7e51c; color:#0d1730; font-size:20px; transition:.35s ease; } .qnx-rn-final-action:hover{ transform:translateX(8px); } .qnx-rn-final-action:hover b{ transform:rotate(-45deg); } .qnx-rn-reveal{ opacity:0; transform:translateY(28px); transition:opacity .75s ease,transform .75s ease; } .qnx-rn-visible{ opacity:1; transform:translateY(0); } .qnx-rn-capability, .qnx-rn-row-active{ transition:.35s ease; } @media(max-width:1050px){ .qnx-rn-intro{ grid-template-columns:1fr; gap:45px; } .qnx-rn-architecture{ max-width:700px; width:100%; margin:auto; } .qnx-rn-native, .qnx-rn-interface{ grid-template-columns:1fr; } .qnx-rn-native-copy, .qnx-rn-interface-copy{ max-width:700px; } .qnx-rn-system-map{ grid-template-columns:1fr; gap:25px; } .qnx-rn-map-connector{ display:none; } .qnx-rn-map-column.center{ order:-1; } .qnx-rn-data-flow{ grid-template-columns:1fr; gap:15px; } .qnx-rn-data-line{ width:1px; height:28px; margin:auto; } .qnx-rn-data-line:after{ display:none; } .qnx-rn-build-track, .qnx-rn-solutions-grid{ grid-template-columns:repeat(2,1fr); } .qnx-rn-solutions-grid article:nth-child(2){ border-right:0; } .qnx-rn-solutions-grid article:nth-child(-n+2){ border-bottom:1px solid #d6e2ef; } .qnx-rn-final{ grid-template-columns:1fr; grid-template-rows:auto auto auto; row-gap:35px; } .qnx-rn-final-action{ width:max-content; } } @media(max-width:720px){ .qnx-rn-intro, .qnx-rn-system, .qnx-rn-native, .qnx-rn-data, .qnx-rn-interface, .qnx-rn-build, .qnx-rn-solutions, .qnx-rn-final{ padding:70px 20px; } .qnx-rn-intro-copy h2{ font-size:47px; letter-spacing:-2.5px; } .qnx-rn-intro-copy p{ font-size:15px; } .qnx-rn-architecture{ padding:20px; transform:none; } .qnx-rn-arch-flow{ grid-template-columns:1fr; gap:8px; } .qnx-rn-flow-node{ min-height:auto; } .qnx-rn-flow-node+i{ width:1px; height:22px; margin:auto; } .qnx-rn-flow-node+i:after{ display:none; } .qnx-rn-device-strip{ grid-template-columns:1fr; } .qnx-rn-system-heading h2, .qnx-rn-interface-copy h2, .qnx-rn-build-heading h2, .qnx-rn-solutions-top h2{ font-size:40px; letter-spacing:-2px; } .qnx-rn-map-box{ padding:18px; } .qnx-rn-native-visual{ min-height:390px; } .qnx-rn-device-panel{ width:94%; } .qnx-rn-component-board{ min-height:510px; padding:20px; } .qnx-rn-component-main{ width:100%; } .qnx-rn-component-side{ position:relative; right:auto; top:auto; width:100%; display:grid; grid-template-columns:1fr 1fr; margin-top:15px; } .qnx-rn-component-footer{ left:20px; right:20px; bottom:17px; flex-wrap:wrap; } .qnx-rn-build-track, .qnx-rn-solutions-grid{ grid-template-columns:1fr; } .qnx-rn-build-step{ border-right:1px solid #d9e4f0; border-bottom:0; } .qnx-rn-build-step:last-child{ border-bottom:1px solid #d9e4f0; } .qnx-rn-solutions-grid article{ border-right:0; border-bottom:1px solid #d6e2ef; } .qnx-rn-solutions-grid article:last-child{ border-bottom:0; } .qnx-rn-solutions-top{ display:block; } .qnx-rn-final-content h2{ font-size:43px; letter-spacing:-2px; } .qnx-rn-final-action{ width:100%; min-width:0; justify-content:space-between; } .qnx-rn-final:after{ font-size:180px; bottom:-40px; } } /* ========================================================= QNIX DIGITAL — CUSTOM SOFTWARE DEVELOPMENT ========================================================= */ .qnx-csd-intro, .qnx-csd-problem, .qnx-csd-architecture, .qnx-csd-capabilities, .qnx-csd-process, .qnx-csd-fit, .qnx-csd-final{ position:relative; overflow:hidden; font-family:inherit; } .qnx-csd-intro{ min-height:610px; padding:90px 7%; display:grid; grid-template-columns:1fr 1.05fr; gap:75px; align-items:center; background:#fff; } .qnx-csd-intro-grid{ position:absolute; inset:0; background: linear-gradient(rgba(7,88,216,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.045) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(90deg,black,transparent 85%); } .qnx-csd-intro-copy{ position:relative; z-index:2; max-width:650px; } .qnx-csd-kicker, .qnx-csd-problem-heading>span, .qnx-csd-architecture-copy>span, .qnx-csd-capabilities-top>span, .qnx-csd-process-heading>span, .qnx-csd-fit-copy>span, .qnx-csd-final-content>span{ display:inline-block; margin-bottom:18px; color:#0758d8; font-size:11px; font-weight:900; letter-spacing:2.5px; } .qnx-csd-intro-copy h2{ margin:0; color:#0d1730; font-size:clamp(48px,5.8vw,82px); line-height:.94; letter-spacing:-4px; font-weight:500; } .qnx-csd-intro-copy h2 strong{ color:#0758d8; font-weight:800; } .qnx-csd-intro-copy p{ max-width:590px; margin:28px 0 0; color:#5d6b84; font-size:17px; line-height:1.75; } .qnx-csd-intro-tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; } .qnx-csd-intro-tags span{ padding:9px 14px; border:1px solid #dbe5f1; background:#f4f8ff; color:#0d1730; font-size:10px; font-weight:800; } .qnx-csd-blueprint{ position:relative; z-index:2; background:#0d1730; padding:24px; box-shadow:0 30px 75px rgba(6,45,122,.2); transform:rotate(1.4deg); transition:.5s ease; } .qnx-csd-blueprint:hover{ transform:rotate(0) translateY(-7px); } .qnx-csd-blueprint-head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.1); } .qnx-csd-blueprint-head span{ color:#08a8cf; font-size:9px; letter-spacing:2px; font-weight:900; } .qnx-csd-blueprint-head b{ color:#91a7c5; font-size:8px; letter-spacing:1px; } .qnx-csd-blueprint-canvas{ position:relative; min-height:385px; margin-top:20px; background: linear-gradient(rgba(8,126,231,.09) 1px,transparent 1px), linear-gradient(90deg,rgba(8,126,231,.09) 1px,transparent 1px); background-size:35px 35px; } .qnx-csd-module{ position:absolute; width:145px; padding:15px; background:#fff; box-shadow:0 14px 30px rgba(0,0,0,.14); transition:.35s ease; } .qnx-csd-module:hover{ transform:translateY(-6px); } .qnx-csd-module small{ display:block; color:#08a8cf; font-size:8px; font-weight:900; } .qnx-csd-module strong{ display:block; margin-top:14px; color:#0d1730; font-size:14px; } .qnx-csd-module span{ display:block; margin-top:4px; color:#5d6b84; font-size:9px; } .module-a{left:5%;top:7%} .module-b{right:5%;top:7%} .module-c{left:5%;bottom:7%} .module-d{right:5%;bottom:7%} .qnx-csd-build-core{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:155px; height:155px; display:grid; place-content:center; text-align:center; background:#0758d8; color:#fff; clip-path:polygon(50% 0,91% 14%,100% 50%,91% 86%,50% 100%,9% 86%,0 50%,9% 14%); box-shadow:0 20px 45px rgba(7,88,216,.3); } .qnx-csd-build-core span{ color:#b7e51c; font-size:8px; letter-spacing:2px; font-weight:900; } .qnx-csd-build-core strong{ margin-top:8px; font-size:17px; line-height:1.05; } .qnx-csd-blueprint-lines i{ position:absolute; display:block; background:#08a8cf; height:1px; width:25%; opacity:.7; } .qnx-csd-blueprint-lines i:nth-child(1){ left:27%; top:25%; } .qnx-csd-blueprint-lines i:nth-child(2){ right:27%; top:25%; } .qnx-csd-blueprint-lines i:nth-child(3){ left:27%; bottom:25%; } .qnx-csd-blueprint-lines i:nth-child(4){ right:27%; bottom:25%; } .qnx-csd-problem{ padding:105px 7%; background:#f4f8ff; } .qnx-csd-problem-heading{ max-width:700px; margin-bottom:60px; } .qnx-csd-problem-heading h2, .qnx-csd-architecture-copy h2, .qnx-csd-capabilities-top h2, .qnx-csd-process-heading h2, .qnx-csd-fit-copy h2{ margin:0; color:#0d1730; font-size:clamp(39px,4.4vw,63px); line-height:1; letter-spacing:-3px; font-weight:500; } .qnx-csd-problem-heading h2 strong, .qnx-csd-architecture-copy h2 strong, .qnx-csd-capabilities-top h2 strong, .qnx-csd-process-heading h2 strong, .qnx-csd-fit-copy h2 strong{ color:#0758d8; font-weight:800; } .qnx-csd-problem-heading p{ max-width:610px; margin:24px 0 0; color:#5d6b84; font-size:16px; line-height:1.75; } .qnx-csd-problem-board{ max-width:1200px; margin:auto; border-top:1px solid #d4e0ed; } .qnx-csd-problem-row{ min-height:125px; display:grid; grid-template-columns:55px 1.2fr 50px 1fr; align-items:center; gap:25px; border-bottom:1px solid #d4e0ed; transition:.35s ease; } .qnx-csd-problem-row:hover{ padding-left:18px; background:#fff; } .qnx-csd-problem-index{ color:#08a8cf; font-size:12px; font-weight:900; } .qnx-csd-problem-row>div:nth-child(2) strong{ display:block; color:#0d1730; font-size:17px; } .qnx-csd-problem-row>div:nth-child(2) span{ display:block; margin-top:5px; color:#5d6b84; font-size:12px; } .qnx-csd-problem-row>b{ color:#0758d8; font-size:22px; } .qnx-csd-problem-result{ padding:14px 18px; border-left:3px solid #b7e51c; background:#fff; } .qnx-csd-problem-result small{ display:block; color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1.5px; } .qnx-csd-problem-result strong{ display:block; margin-top:5px; color:#0d1730; font-size:13px; } .qnx-csd-architecture{ padding:105px 7%; display:grid; grid-template-columns:.85fr 1.15fr; gap:90px; align-items:center; background:#fff; } .qnx-csd-architecture-copy{ max-width:570px; } .qnx-csd-architecture-copy p{ margin:25px 0 0; color:#5d6b84; font-size:16px; line-height:1.75; } .qnx-csd-stack{ display:grid; gap:8px; max-width:650px; } .qnx-csd-stack-layer{ min-height:90px; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:25px; border-left:5px solid #0758d8; background:#f4f8ff; transition:.35s ease; } .qnx-csd-stack-layer:hover{ transform:translateX(9px); box-shadow:0 15px 35px rgba(7,88,216,.08); } .qnx-csd-stack-layer small{ display:block; color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1.5px; } .qnx-csd-stack-layer strong{ display:block; margin-top:5px; color:#0d1730; font-size:17px; } .qnx-csd-stack-layer span{ color:#5d6b84; font-size:10px; text-align:right; } .layer-application{border-left-color:#087ee7} .layer-data{border-left-color:#08a8cf} .layer-connect{border-left-color:#79c91c} .qnx-csd-capabilities{ padding:105px 7%; background:#f4f8ff; } .qnx-csd-capabilities-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:50px; margin-bottom:55px; } .qnx-csd-capabilities-top h2{ max-width:700px; } .qnx-csd-capability-list{ max-width:1200px; margin:auto; border-top:1px solid #d5e0ed; } .qnx-csd-capability-list article{ min-height:125px; display:grid; grid-template-columns:70px 1fr 35px; align-items:center; gap:25px; border-bottom:1px solid #d5e0ed; transition:.35s ease; } .qnx-csd-capability-list article:hover{ padding-left:18px; background:#fff; } .qnx-csd-cap-icon{ width:48px; height:48px; display:grid; place-items:center; background:#0758d8; color:#b7e51c; font-size:9px; font-weight:900; } .qnx-csd-capability-list h3{ margin:0; color:#0d1730; font-size:20px; } .qnx-csd-capability-list p{ max-width:680px; margin:7px 0 0; color:#5d6b84; font-size:13px; line-height:1.55; } .qnx-csd-capability-list article>b{ color:#0758d8; font-size:21px; } .qnx-csd-process{ padding:105px 7%; background:#fff; } .qnx-csd-process-heading{ max-width:650px; margin-bottom:60px; } .qnx-csd-process-board{ max-width:1200px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #d7e2ee; border-left:1px solid #d7e2ee; } .qnx-csd-process-step{ min-height:270px; padding:25px; border-right:1px solid #d7e2ee; border-bottom:1px solid #d7e2ee; transition:.35s ease; } .qnx-csd-process-step:hover{ background:#f4f8ff; transform:translateY(-5px); } .qnx-csd-process-letter{ width:42px; height:42px; display:grid; place-items:center; background:#0d1730; color:#b7e51c; font-size:12px; font-weight:900; margin-bottom:65px; } .qnx-csd-process-step small{ color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1.5px; } .qnx-csd-process-step h3{ margin:7px 0 0; color:#0d1730; font-size:19px; } .qnx-csd-process-step p{ margin:9px 0 0; color:#5d6b84; font-size:13px; line-height:1.6; } .qnx-csd-fit{ padding:105px 7%; display:grid; grid-template-columns:1fr 1fr; gap:85px; align-items:center; background:#f4f8ff; } .qnx-csd-fit-visual{ min-height:430px; display:grid; place-items:center; background: linear-gradient(rgba(7,88,216,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.06) 1px,transparent 1px); background-size:40px 40px; } .qnx-csd-fit-window{ width:min(480px,90%); background:#fff; border:1px solid #d8e4f1; box-shadow:0 28px 60px rgba(7,88,216,.12); } .qnx-csd-fit-window-top{ height:50px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; border-bottom:1px solid #e0e7f0; } .qnx-csd-fit-window-top span{ color:#0d1730; font-size:9px; font-weight:900; letter-spacing:1.5px; } .qnx-csd-fit-window-top b{ color:#0758d8; font-size:8px; } .qnx-csd-fit-window-body{ display:grid; grid-template-columns:70px 1fr; min-height:300px; } .qnx-csd-mini-nav{ padding:18px 12px; background:#0d1730; display:grid; align-content:start; gap:12px; } .qnx-csd-mini-nav i{ display:block; height:7px; background:#087ee7; } .qnx-csd-mini-nav i:nth-child(2){width:70%} .qnx-csd-mini-nav i:nth-child(3){width:85%;background:#08a8cf} .qnx-csd-mini-nav i:nth-child(4){width:55%;background:#79c91c} .qnx-csd-mini-content{ padding:25px; } .qnx-csd-mini-title{ width:50%; height:17px; background:#0d1730; } .qnx-csd-mini-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:25px; } .qnx-csd-mini-metrics span{ height:55px; background:#f4f8ff; border:1px solid #e0e7f0; } .qnx-csd-mini-metrics span:nth-child(2){ border-top:3px solid #087ee7; } .qnx-csd-mini-metrics span:nth-child(3){ border-top:3px solid #79c91c; } .qnx-csd-mini-chart{ height:110px; margin-top:18px; display:flex; align-items:flex-end; gap:8px; padding:10px; background:#f4f8ff; border:1px solid #e0e7f0; } .qnx-csd-mini-chart i{ flex:1; background:#0758d8; } .qnx-csd-mini-chart i:nth-child(1){height:35%} .qnx-csd-mini-chart i:nth-child(2){height:50%} .qnx-csd-mini-chart i:nth-child(3){height:42%} .qnx-csd-mini-chart i:nth-child(4){height:68%;background:#08a8cf} .qnx-csd-mini-chart i:nth-child(5){height:58%} .qnx-csd-mini-chart i:nth-child(6){height:82%;background:#79c91c} .qnx-csd-fit-copy{ max-width:590px; } .qnx-csd-fit-copy p{ margin:25px 0 0; color:#5d6b84; font-size:16px; line-height:1.75; } .qnx-csd-fit-list{ margin-top:30px; border-top:1px solid #d5e0ed; } .qnx-csd-fit-list>div{ padding:16px 0; border-bottom:1px solid #d5e0ed; } .qnx-csd-fit-list strong{ display:block; color:#0d1730; font-size:14px; } .qnx-csd-fit-list span{ display:block; margin-top:5px; color:#5d6b84; font-size:12px; line-height:1.5; } .qnx-csd-final{ min-height:470px; padding:80px 7%; display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:center; background:linear-gradient(125deg,#062d7a 0%,#0758d8 65%,#08a8cf 100%); } .qnx-csd-final:after{ content:""; position:absolute; right:-150px; top:-150px; width:430px; height:430px; border:1px solid rgba(183,229,28,.4); transform:rotate(45deg); } .qnx-csd-final-blueprint{ position:relative; z-index:2; padding:30px; border-left:2px solid #b7e51c; display:grid; gap:16px; } .qnx-csd-final-blueprint span, .qnx-csd-final-blueprint b{ color:#c6d8ef; font-size:10px; font-weight:900; letter-spacing:1.8px; } .qnx-csd-final-blueprint strong{ color:#fff; font-size:27px; letter-spacing:-1px; } .qnx-csd-final-blueprint i{ width:75px; height:1px; background:#b7e51c; } .qnx-csd-final-content{ position:relative; z-index:2; } .qnx-csd-final-content>span{ color:#b7e51c; } .qnx-csd-final-content h2{ margin:0; color:#fff; font-size:clamp(42px,5vw,70px); line-height:.96; letter-spacing:-3px; font-weight:500; } .qnx-csd-final-content h2 strong{ color:#b7e51c; font-weight:800; } .qnx-csd-final-content p{ max-width:580px; margin:24px 0 30px; color:#d9e7fa; font-size:15px; line-height:1.7; } .qnx-csd-final-action{ display:inline-flex; align-items:center; gap:30px; padding:8px 8px 8px 20px; background:#fff; color:#0758d8; text-decoration:none; font-size:11px; font-weight:900; letter-spacing:.5px; transition:.35s ease; } .qnx-csd-final-action b{ width:42px; height:42px; display:grid; place-items:center; background:#b7e51c; color:#0d1730; font-size:17px; } .qnx-csd-final-action:hover{ transform:translateX(8px); } @media(max-width:1050px){ .qnx-csd-intro, .qnx-csd-architecture, .qnx-csd-fit{ grid-template-columns:1fr; } .qnx-csd-blueprint{ max-width:720px; width:100%; margin:auto; } .qnx-csd-architecture-copy, .qnx-csd-fit-copy{ max-width:700px; } .qnx-csd-process-board{ grid-template-columns:repeat(2,1fr); } .qnx-csd-final{ grid-template-columns:1fr; gap:45px; } .qnx-csd-final-blueprint{ max-width:500px; } } @media(max-width:720px){ .qnx-csd-intro, .qnx-csd-problem, .qnx-csd-architecture, .qnx-csd-capabilities, .qnx-csd-process, .qnx-csd-fit, .qnx-csd-final{ padding:70px 20px; } .qnx-csd-intro-copy h2{ font-size:46px; letter-spacing:-2.5px; } .qnx-csd-intro-copy p{ font-size:15px; } .qnx-csd-blueprint{ transform:none; padding:17px; } .qnx-csd-blueprint-canvas{ min-height:430px; } .qnx-csd-module{ width:120px; padding:12px; } .qnx-csd-build-core{ width:135px; height:135px; } .qnx-csd-problem-heading h2, .qnx-csd-architecture-copy h2, .qnx-csd-capabilities-top h2, .qnx-csd-process-heading h2, .qnx-csd-fit-copy h2{ font-size:40px; letter-spacing:-2px; } .qnx-csd-problem-row{ grid-template-columns:35px 1fr; gap:12px; padding:20px 0; } .qnx-csd-problem-row>b{ display:none; } .qnx-csd-problem-result{ grid-column:2; } .qnx-csd-capabilities-top{ display:block; } .qnx-csd-capability-list article{ grid-template-columns:55px 1fr 25px; gap:14px; } .qnx-csd-capability-list h3{ font-size:17px; } .qnx-csd-stack-layer{ display:block; } .qnx-csd-stack-layer span{ display:block; margin-top:7px; text-align:left; } .qnx-csd-process-board{ grid-template-columns:1fr; } .qnx-csd-process-step{ min-height:230px; } .qnx-csd-fit-visual{ min-height:350px; } .qnx-csd-fit-window{ width:96%; } .qnx-csd-final-content h2{ font-size:44px; letter-spacing:-2px; } .qnx-csd-final-action{ width:100%; justify-content:space-between; } } /* ========================================================= QNIX DIGITAL — CRM DEVELOPMENT ========================================================= */ .qnx-crm-intro, .qnx-crm-journey, .qnx-crm-pipeline, .qnx-crm-view, .qnx-crm-team, .qnx-crm-integrations, .qnx-crm-final{ position:relative; overflow:hidden; font-family:inherit; } .qnx-crm-intro{ min-height:620px; padding:95px 7%; display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:85px; background:#fff; } .qnx-crm-intro:before{ content:""; position:absolute; width:520px; height:520px; right:-210px; top:-220px; border:1px solid #dbe7f4; transform:rotate(45deg); } .qnx-crm-intro-copy{ position:relative; z-index:2; max-width:610px; } .qnx-crm-kicker, .qnx-crm-section-heading>span, .qnx-crm-pipeline-copy>span, .qnx-crm-view-copy>span, .qnx-crm-team-heading>span, .qnx-crm-integration-copy>span, .qnx-crm-final-copy>span{ display:inline-block; margin-bottom:18px; color:#0758d8; font-size:11px; font-weight:900; letter-spacing:2.5px; } .qnx-crm-intro-copy h2{ margin:0; color:#0d1730; font-size:clamp(48px,5.6vw,78px); line-height:.95; letter-spacing:-4px; font-weight:500; } .qnx-crm-intro-copy h2 strong{ color:#0758d8; font-weight:800; } .qnx-crm-intro-copy p{ max-width:580px; margin:28px 0 0; color:#5d6b84; font-size:17px; line-height:1.75; } .qnx-crm-intro-points{ display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; } .qnx-crm-intro-points span{ padding:9px 14px; background:#f4f8ff; border:1px solid #dce6f1; color:#0d1730; font-size:10px; font-weight:800; } .qnx-crm-relationship{ position:relative; z-index:2; max-width:660px; width:100%; margin:auto; background:#0d1730; box-shadow:0 30px 70px rgba(6,45,122,.18); transform:rotate(-1deg); transition:.45s ease; } .qnx-crm-relationship:hover{ transform:rotate(0) translateY(-7px); } .qnx-crm-window-head{ min-height:72px; padding:18px 24px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(255,255,255,.1); } .qnx-crm-window-head small{ display:block; color:#08a8cf; font-size:8px; font-weight:900; letter-spacing:2px; } .qnx-crm-window-head strong{ display:block; margin-top:5px; color:#fff; font-size:18px; } .qnx-crm-window-head>b{ padding:6px 10px; color:#b7e51c; border:1px solid rgba(183,229,28,.35); font-size:8px; letter-spacing:1.5px; } .qnx-crm-profile{ margin:22px; padding:17px; display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:14px; background:#fff; } .qnx-crm-avatar{ width:43px; height:43px; display:grid; place-items:center; background:#0758d8; color:#b7e51c; font-size:11px; font-weight:900; } .qnx-crm-profile strong{ display:block; color:#0d1730; font-size:14px; } .qnx-crm-profile span{ display:block; margin-top:4px; color:#5d6b84; font-size:10px; } .qnx-crm-profile em{ color:#16b98a; font-size:8px; font-style:normal; font-weight:900; } .qnx-crm-timeline{ margin:0 22px 25px; padding:5px 5px 5px 30px; border-left:1px solid #087ee7; } .qnx-crm-event{ position:relative; display:grid; grid-template-columns:1fr auto; gap:15px; padding:18px 18px; margin-bottom:8px; background:rgba(255,255,255,.055); transition:.35s ease; } .qnx-crm-event:hover, .qnx-crm-event.active{ background:rgba(8,168,207,.12); } .qnx-crm-event>i{ position:absolute; left:-35px; top:25px; width:9px; height:9px; background:#087ee7; border:2px solid #0d1730; } .qnx-crm-event.active>i{ background:#b7e51c; } .qnx-crm-event small{ display:block; color:#08a8cf; font-size:8px; font-weight:900; letter-spacing:1.5px; } .qnx-crm-event strong{ display:block; margin-top:5px; color:#fff; font-size:13px; } .qnx-crm-event span{ display:block; margin-top:4px; color:#8ea3c1; font-size:9px; } .qnx-crm-event time{ color:#8ea3c1; font-size:9px; } .qnx-crm-journey{ padding:105px 7%; background:#f4f8ff; } .qnx-crm-section-heading{ max-width:680px; margin-bottom:65px; } .qnx-crm-section-heading h2, .qnx-crm-pipeline-copy h2, .qnx-crm-view-copy h2, .qnx-crm-team-heading h2, .qnx-crm-integration-copy h2{ margin:0; color:#0d1730; font-size:clamp(40px,4.5vw,63px); line-height:1; letter-spacing:-3px; font-weight:500; } .qnx-crm-section-heading h2 strong, .qnx-crm-pipeline-copy h2 strong, .qnx-crm-view-copy h2 strong, .qnx-crm-team-heading h2 strong, .qnx-crm-integration-copy h2 strong{ color:#0758d8; font-weight:800; } .qnx-crm-section-heading p{ max-width:600px; margin:25px 0 0; color:#5d6b84; font-size:16px; line-height:1.75; } .qnx-crm-journey-line{ max-width:1200px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #cfdce9; } .qnx-crm-stage{ position:relative; min-height:245px; padding:28px 24px; border-right:1px solid #cfdce9; transition:.35s ease; } .qnx-crm-stage:first-child{ border-left:1px solid #cfdce9; } .qnx-crm-stage:hover{ background:#fff; transform:translateY(-6px); box-shadow:0 20px 45px rgba(7,88,216,.08); } .qnx-crm-stage-marker{ width:39px; height:39px; display:grid; place-items:center; margin-bottom:55px; background:#0d1730; color:#b7e51c; font-size:9px; font-weight:900; } .qnx-crm-stage small{ color:#0758d8; font-size:8px; letter-spacing:1.5px; font-weight:900; } .qnx-crm-stage h3{ margin:6px 0 0; color:#0d1730; font-size:21px; } .qnx-crm-stage p{ margin:8px 0 0; color:#5d6b84; font-size:12px; line-height:1.6; } .qnx-crm-pipeline{ padding:105px 7%; display:grid; grid-template-columns:.7fr 1.3fr; align-items:center; gap:80px; background:#fff; } .qnx-crm-pipeline-copy{ max-width:480px; } .qnx-crm-pipeline-copy p{ margin:25px 0 0; color:#5d6b84; font-size:15px; line-height:1.75; } .qnx-crm-pipeline-note{ margin-top:30px; padding:17px 20px; border-left:3px solid #b7e51c; background:#f4f8ff; } .qnx-crm-pipeline-note b{ display:block; color:#0758d8; font-size:8px; letter-spacing:1.5px; } .qnx-crm-pipeline-note span{ display:block; margin-top:5px; color:#0d1730; font-size:12px; } .qnx-crm-pipeline-board{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:15px; background:#0d1730; box-shadow:0 25px 55px rgba(6,45,122,.17); } .qnx-crm-column{ min-height:360px; padding:9px; background:#f4f8ff; } .qnx-crm-column-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 5px 14px; } .qnx-crm-column-head strong{ color:#0d1730; font-size:8px; letter-spacing:1px; } .qnx-crm-column-head span{ color:#0758d8; font-size:9px; font-weight:900; } .qnx-crm-deal{ position:relative; margin-bottom:8px; padding:14px; background:#fff; border:1px solid #e0e8f1; transition:.3s ease; } .qnx-crm-deal:hover{ transform:translateY(-4px); box-shadow:0 12px 25px rgba(7,88,216,.09); } .qnx-crm-deal.featured{ border-top:3px solid #087ee7; } .qnx-crm-deal.won{ border-top:3px solid #79c91c; } .qnx-crm-deal strong{ display:block; color:#0d1730; font-size:11px; } .qnx-crm-deal span{ display:block; margin-top:5px; color:#5d6b84; font-size:9px; } .qnx-crm-deal b{ position:absolute; right:10px; bottom:10px; color:#0758d8; font-size:12px; } .qnx-crm-deal.won b{ color:#79c91c; } .qnx-crm-view{ padding:105px 7%; display:grid; grid-template-columns:1.1fr .9fr; gap:85px; align-items:center; background:#f4f8ff; } .qnx-crm-view-visual{ display:grid; grid-template-columns:70px 1fr; min-height:430px; background:#0d1730; box-shadow:0 25px 60px rgba(6,45,122,.15); } .qnx-crm-view-sidebar{ padding:25px 16px; display:flex; flex-direction:column; align-items:center; gap:23px; background:#062d7a; } .qnx-crm-view-sidebar span{ color:#b7e51c; font-size:9px; font-weight:900; } .qnx-crm-view-sidebar i{ width:17px; height:17px; border:1px solid #5680bc; } .qnx-crm-view-sidebar i.selected{ background:#08a8cf; border-color:#08a8cf; } .qnx-crm-view-main{ padding:25px; } .qnx-crm-view-top{ display:flex; justify-content:space-between; align-items:center; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.1); } .qnx-crm-view-top small{ display:block; color:#08a8cf; font-size:8px; letter-spacing:1.5px; font-weight:900; } .qnx-crm-view-top strong{ display:block; margin-top:5px; color:#fff; font-size:17px; } .qnx-crm-view-top>span{ color:#b7e51c; font-size:8px; font-weight:900; } .qnx-crm-view-grid{ margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:9px; } .qnx-crm-view-card{ min-height:120px; padding:17px; background:#fff; transition:.35s ease; } .qnx-crm-view-card:hover{ transform:translateY(-4px); } .qnx-crm-view-card small{ color:#0758d8; font-size:7px; font-weight:900; letter-spacing:1px; } .qnx-crm-view-card strong{ display:block; margin-top:16px; color:#0d1730; font-size:13px; } .qnx-crm-view-card span{ display:block; margin-top:5px; color:#5d6b84; font-size:9px; line-height:1.4; } .qnx-crm-view-card.activity{ border-top:3px solid #08a8cf; } .qnx-crm-view-card.deal{ border-top:3px solid #087ee7; } .qnx-crm-view-card.tasks{ border-top:3px solid #79c91c; } .qnx-crm-view-copy{ max-width:560px; } .qnx-crm-view-copy p{ margin:25px 0 0; color:#5d6b84; font-size:16px; line-height:1.75; } .qnx-crm-view-list{ margin-top:28px; border-top:1px solid #d6e1ed; } .qnx-crm-view-list>div{ padding:16px 0; border-bottom:1px solid #d6e1ed; } .qnx-crm-view-list strong{ display:block; color:#0d1730; font-size:14px; } .qnx-crm-view-list span{ display:block; margin-top:5px; color:#5d6b84; font-size:12px; line-height:1.5; } .qnx-crm-team{ padding:105px 7%; background:#fff; } .qnx-crm-team-heading{ max-width:850px; margin-bottom:55px; } .qnx-crm-team-board{ max-width:1200px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #d6e1ed; border-left:1px solid #d6e1ed; } .qnx-crm-team-role{ min-height:230px; padding:28px; border-right:1px solid #d6e1ed; border-bottom:1px solid #d6e1ed; transition:.35s ease; } .qnx-crm-team-role:hover{ background:#f4f8ff; transform:translateY(-5px); } .qnx-crm-role-icon{ width:46px; height:46px; display:grid; place-items:center; background:#0758d8; color:#b7e51c; font-size:9px; font-weight:900; } .qnx-crm-team-role small{ display:block; margin-top:48px; color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1.5px; } .qnx-crm-team-role strong{ display:block; margin-top:6px; color:#0d1730; font-size:19px; } .qnx-crm-team-role p{ margin:8px 0 0; color:#5d6b84; font-size:12px; line-height:1.6; } .qnx-crm-integrations{ min-height:600px; padding:105px 7%; display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:80px; background:#f4f8ff; } .qnx-crm-integration-copy{ max-width:570px; } .qnx-crm-integration-copy p{ margin:25px 0 0; color:#5d6b84; font-size:16px; line-height:1.75; } .qnx-crm-connection-map{ position:relative; width:500px; height:500px; margin:auto; } .qnx-crm-map-center{ position:absolute; left:50%; top:50%; width:145px; height:105px; transform:translate(-50%,-50%); display:grid; place-content:center; text-align:center; background:#0758d8; box-shadow:0 20px 45px rgba(7,88,216,.2); z-index:3; } .qnx-crm-map-center small{ color:#b7e51c; font-size:8px; letter-spacing:2px; font-weight:900; } .qnx-crm-map-center strong{ margin-top:5px; color:#fff; font-size:25px; letter-spacing:-1px; } .qnx-crm-map-node{ position:absolute; width:150px; min-height:72px; padding:15px; background:#fff; border:1px solid #d7e2ee; box-shadow:0 15px 30px rgba(7,88,216,.08); z-index:3; } .qnx-crm-map-node b{ display:block; color:#0d1730; font-size:9px; letter-spacing:1px; } .qnx-crm-map-node span{ display:block; margin-top:5px; color:#5d6b84; font-size:9px; } .node-top{ left:50%; top:20px; transform:translateX(-50%); } .node-right{ right:0; top:50%; transform:translateY(-50%); } .node-bottom{ left:50%; bottom:20px; transform:translateX(-50%); } .node-left{ left:0; top:50%; transform:translateY(-50%); } .qnx-crm-map-line{ position:absolute; display:block; background:#8eb1d9; z-index:1; } .line-top, .line-bottom{ width:1px; height:150px; left:50%; } .line-top{top:92px} .line-bottom{bottom:92px} .line-left, .line-right{ width:150px; height:1px; top:50%; } .line-left{left:92px} .line-right{right:92px} .qnx-crm-final{ min-height:570px; padding:90px 7%; background:linear-gradient(125deg,#062d7a 0%,#0758d8 58%,#08a8cf 100%); } .qnx-crm-final:before{ content:""; position:absolute; width:600px; height:600px; right:-300px; bottom:-350px; border:1px solid rgba(183,229,28,.35); transform:rotate(45deg); } .qnx-crm-final-strip{ position:relative; z-index:2; max-width:1200px; margin:0 auto 75px; padding:18px 0; display:grid; grid-template-columns:1fr 35px 1fr 35px 1fr 35px 1fr; align-items:center; border-top:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18); } .qnx-crm-final-strip>div{ padding:5px 16px; } .qnx-crm-final-strip small{ display:block; color:#b7d2ef; font-size:7px; letter-spacing:1.5px; font-weight:900; } .qnx-crm-final-strip strong{ display:block; margin-top:5px; color:#fff; font-size:13px; } .qnx-crm-final-strip>span{ color:#b7e51c; text-align:center; font-size:20px; } .qnx-crm-final-strip .final-highlight{ border-left:2px solid #b7e51c; } .qnx-crm-final-copy{ position:relative; z-index:2; max-width:900px; margin:auto; text-align:center; } .qnx-crm-final-copy>span{ color:#b7e51c; } .qnx-crm-final-copy h2{ margin:0; color:#fff; font-size:clamp(43px,5.4vw,72px); line-height:.96; letter-spacing:-3px; font-weight:500; } .qnx-crm-final-copy h2 strong{ color:#b7e51c; font-weight:800; } .qnx-crm-final-copy p{ max-width:630px; margin:24px auto 32px; color:#dceafa; font-size:15px; line-height:1.7; } .qnx-crm-final-link{ display:inline-flex; align-items:center; gap:22px; padding:6px 7px 6px 20px; background:#fff; color:#0758d8; text-decoration:none; font-size:11px; font-weight:900; transition:.35s ease; } .qnx-crm-final-link b{ width:42px; height:42px; display:grid; place-items:center; background:#b7e51c; color:#0d1730; font-size:20px; transition:.35s ease; } .qnx-crm-final-link:hover{ transform:translateY(-4px); } .qnx-crm-final-link:hover b{ transform:rotate(90deg); } @media(max-width:1100px){ .qnx-crm-intro, .qnx-crm-pipeline, .qnx-crm-view, .qnx-crm-integrations{ grid-template-columns:1fr; } .qnx-crm-relationship{ max-width:750px; } .qnx-crm-pipeline-copy, .qnx-crm-view-copy, .qnx-crm-integration-copy{ max-width:700px; } .qnx-crm-pipeline-board{ max-width:850px; } .qnx-crm-team-board{ grid-template-columns:1fr 1fr; } } @media(max-width:760px){ .qnx-crm-intro, .qnx-crm-journey, .qnx-crm-pipeline, .qnx-crm-view, .qnx-crm-team, .qnx-crm-integrations, .qnx-crm-final{ padding:70px 20px; } .qnx-crm-intro-copy h2{ font-size:46px; letter-spacing:-2.5px; } .qnx-crm-relationship{ transform:none; } .qnx-crm-profile{ grid-template-columns:42px 1fr; } .qnx-crm-profile em{ grid-column:2; } .qnx-crm-journey-line{ grid-template-columns:1fr; } .qnx-crm-stage{ min-height:205px; border-left:1px solid #cfdce9; } .qnx-crm-pipeline-board{ grid-template-columns:1fr 1fr; } .qnx-crm-column{ min-height:300px; } .qnx-crm-view-visual{ grid-template-columns:55px 1fr; } .qnx-crm-view-grid{ grid-template-columns:1fr; } .qnx-crm-view-main{ padding:18px; } .qnx-crm-team-board{ grid-template-columns:1fr; } .qnx-crm-connection-map{ width:100%; height:440px; } .qnx-crm-map-node{ width:125px; } .line-left, .line-right{ width:110px; } .line-left{left:65px} .line-right{right:65px} .qnx-crm-final-strip{ grid-template-columns:1fr; gap:12px; margin-bottom:55px; } .qnx-crm-final-strip>span{ display:none; } .qnx-crm-final-strip>div{ border-left:2px solid rgba(255,255,255,.18); } .qnx-crm-final-strip .final-highlight{ border-left:2px solid #b7e51c; } .qnx-crm-final-copy h2{ font-size:44px; letter-spacing:-2px; } .qnx-crm-final-link{ width:100%; justify-content:space-between; } } /* ========================================================= QNIX DIGITAL — ERP SOLUTIONS ========================================================= */ .qnx-erp-intro, .qnx-erp-connected, .qnx-erp-modules, .qnx-erp-visibility, .qnx-erp-workflow, .qnx-erp-implementation, .qnx-erp-final{ position:relative; overflow:hidden; font-family:inherit; } .qnx-erp-intro{ min-height:640px; padding:95px 7%; display:grid; grid-template-columns:.82fr 1.18fr; align-items:center; gap:75px; background:#fff; } .qnx-erp-intro-copy{ position:relative; z-index:2; max-width:610px; } .qnx-erp-kicker, .qnx-erp-section-heading>span, .qnx-erp-modules-heading>span, .qnx-erp-visibility-copy>span, .qnx-erp-workflow-copy>span, .qnx-erp-implementation-heading>span, .qnx-erp-final-copy>span{ display:inline-block; margin-bottom:18px; color:#0758d8; font-size:11px; font-weight:900; letter-spacing:2.5px; } .qnx-erp-intro-copy h2{ margin:0; color:#0d1730; font-size:clamp(48px,5.6vw,80px); line-height:.94; letter-spacing:-4px; font-weight:500; } .qnx-erp-intro-copy h2 strong{ color:#0758d8; font-weight:800; } .qnx-erp-intro-copy p{ max-width:590px; margin:28px 0 0; color:#5d6b84; font-size:17px; line-height:1.75; } .qnx-erp-intro-meta{ display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; } .qnx-erp-intro-meta span{ padding:9px 14px; background:#f4f8ff; border:1px solid #dce6f1; color:#0d1730; font-size:10px; font-weight:800; } .qnx-erp-command-board{ position:relative; z-index:2; padding:22px; background:#0d1730; box-shadow:0 30px 75px rgba(6,45,122,.2); transform:rotate(1deg); transition:.45s ease; } .qnx-erp-command-board:hover{ transform:rotate(0) translateY(-6px); } .qnx-erp-board-head{ min-height:58px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(255,255,255,.1); } .qnx-erp-board-head small{ display:block; color:#08a8cf; font-size:8px; font-weight:900; letter-spacing:2px; } .qnx-erp-board-head strong{ display:block; margin-top:5px; color:#fff; font-size:17px; } .qnx-erp-board-head>b{ color:#b7e51c; font-size:8px; letter-spacing:1.5px; } .qnx-erp-departments{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:18px; } .qnx-erp-dept{ min-height:112px; padding:16px; background:#fff; border-top:3px solid #0758d8; transition:.35s ease; } .qnx-erp-dept:hover{ transform:translateY(-5px); box-shadow:0 15px 30px rgba(0,0,0,.15); } .qnx-erp-dept.sales{border-top-color:#087ee7} .qnx-erp-dept.inventory{border-top-color:#08a8cf} .qnx-erp-dept.hr{border-top-color:#16b98a} .qnx-erp-dept.procurement{border-top-color:#79c91c} .qnx-erp-dept.operations{border-top-color:#b7e51c} .qnx-erp-dept span{ display:block; color:#0758d8; font-size:7px; font-weight:900; letter-spacing:1.3px; } .qnx-erp-dept strong{ display:block; margin-top:15px; color:#0d1730; font-size:16px; } .qnx-erp-dept small{ display:block; margin-top:4px; color:#5d6b84; font-size:8px; } .qnx-erp-data-band{ min-height:58px; margin-top:8px; padding:0 18px; display:grid; grid-template-columns:1fr 45px 1fr 45px 1fr; align-items:center; background:#0758d8; } .qnx-erp-data-band span, .qnx-erp-data-band b{ color:#cfe0f6; font-size:7px; letter-spacing:1px; font-weight:900; } .qnx-erp-data-band strong{ color:#b7e51c; text-align:center; font-size:10px; letter-spacing:1px; } .qnx-erp-data-band i{ width:100%; height:1px; background:#08a8cf; } .qnx-erp-connected{ padding:105px 7%; background:#f4f8ff; } .qnx-erp-section-heading{ max-width:680px; margin-bottom:65px; } .qnx-erp-section-heading h2, .qnx-erp-modules-heading h2, .qnx-erp-visibility-copy h2, .qnx-erp-workflow-copy h2, .qnx-erp-implementation-heading h2{ margin:0; color:#0d1730; font-size:clamp(40px,4.5vw,63px); line-height:1; letter-spacing:-3px; font-weight:500; } .qnx-erp-section-heading h2 strong, .qnx-erp-modules-heading h2 strong, .qnx-erp-visibility-copy h2 strong, .qnx-erp-workflow-copy h2 strong, .qnx-erp-implementation-heading h2 strong{ color:#0758d8; font-weight:800; } .qnx-erp-section-heading p{ max-width:620px; margin:25px 0 0; color:#5d6b84; font-size:16px; line-height:1.75; } .qnx-erp-flow-board{ max-width:1200px; margin:auto; background:#fff; border:1px solid #d5e0ec; box-shadow:0 20px 45px rgba(7,88,216,.06); } .qnx-erp-flow-row{ min-height:160px; padding:25px; display:grid; grid-template-columns:1fr 50px 1fr 50px 1fr 50px 1fr; align-items:center; gap:10px; } .qnx-erp-flow-label{ min-height:95px; padding:17px; display:flex; flex-direction:column; justify-content:center; background:#f4f8ff; border-left:4px solid #0758d8; transition:.35s ease; } .qnx-erp-flow-label:hover{ transform:translateY(-5px); box-shadow:0 14px 28px rgba(7,88,216,.08); } .qnx-erp-flow-label:nth-of-type(3){ border-left-color:#08a8cf; } .qnx-erp-flow-label:nth-of-type(5){ border-left-color:#16b98a; } .qnx-erp-flow-label.final{ border-left-color:#79c91c; } .qnx-erp-flow-label small{ color:#0758d8; font-size:7px; letter-spacing:1.4px; font-weight:900; } .qnx-erp-flow-label strong{ margin-top:9px; color:#0d1730; font-size:15px; } .qnx-erp-flow-arrow{ color:#087ee7; text-align:center; font-size:22px; } .qnx-erp-flow-caption{ padding:16px 25px; display:flex; justify-content:space-between; border-top:1px solid #d8e2ed; } .qnx-erp-flow-caption span{ color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1.5px; } .qnx-erp-flow-caption strong{ color:#5d6b84; font-size:8px; letter-spacing:1.2px; } .qnx-erp-modules{ padding:105px 7%; background:#fff; } .qnx-erp-modules-heading{ max-width:700px; margin-bottom:55px; } .qnx-erp-module-grid{ max-width:1200px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #d6e1ed; border-left:1px solid #d6e1ed; } .qnx-erp-module-card{ min-height:275px; padding:26px; border-right:1px solid #d6e1ed; border-bottom:1px solid #d6e1ed; transition:.35s ease; } .qnx-erp-module-card:hover{ background:#f4f8ff; transform:translateY(-5px); } .qnx-erp-module-card.featured{ background:#0758d8; } .qnx-erp-module-symbol{ width:45px; height:45px; display:grid; place-items:center; background:#0d1730; color:#b7e51c; font-size:9px; font-weight:900; } .qnx-erp-module-card.featured .qnx-erp-module-symbol{ background:#b7e51c; color:#0d1730; } .qnx-erp-module-card>small{ display:block; margin-top:40px; color:#0758d8; font-size:8px; font-weight:900; } .qnx-erp-module-card.featured>small{ color:#b7e51c; } .qnx-erp-module-card h3{ margin:6px 0 0; color:#0d1730; font-size:19px; } .qnx-erp-module-card.featured h3{ color:#fff; } .qnx-erp-module-card p{ margin:9px 0 0; color:#5d6b84; font-size:12px; line-height:1.6; } .qnx-erp-module-card.featured p{ color:#d8e8fb; } .qnx-erp-module-card>b{ display:block; margin-top:20px; color:#0758d8; font-size:8px; letter-spacing:1.2px; } .qnx-erp-module-card.featured>b{ color:#b7e51c; } .qnx-erp-visibility{ padding:105px 7%; display:grid; grid-template-columns:1.15fr .85fr; gap:85px; align-items:center; background:#f4f8ff; } .qnx-erp-visibility-screen{ padding:22px; background:#0d1730; box-shadow:0 25px 60px rgba(6,45,122,.16); } .qnx-erp-screen-head{ min-height:58px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.1); } .qnx-erp-screen-head small{ display:block; color:#08a8cf; font-size:7px; font-weight:900; letter-spacing:1.5px; } .qnx-erp-screen-head strong{ display:block; margin-top:5px; color:#fff; font-size:17px; } .qnx-erp-screen-head>span{ color:#b7e51c; font-size:8px; font-weight:900; } .qnx-erp-screen-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:16px; } .qnx-erp-screen-metrics>div{ padding:14px; background:#fff; } .qnx-erp-screen-metrics small{ display:block; color:#0758d8; font-size:7px; font-weight:900; } .qnx-erp-screen-metrics strong{ display:block; margin-top:9px; color:#0d1730; font-size:18px; } .qnx-erp-screen-metrics b{ display:block; margin-top:4px; color:#16b98a; font-size:7px; } .qnx-erp-screen-body{ margin-top:8px; display:grid; grid-template-columns:1.35fr .65fr; gap:8px; } .qnx-erp-screen-chart, .qnx-erp-screen-status{ padding:18px; background:#fff; } .qnx-erp-chart-head{ display:flex; justify-content:space-between; } .qnx-erp-chart-head span{ color:#0d1730; font-size:8px; font-weight:900; } .qnx-erp-chart-head b{ color:#0758d8; font-size:7px; } .qnx-erp-bars{ height:160px; margin-top:20px; display:flex; align-items:flex-end; gap:8px; border-bottom:1px solid #dce5ef; } .qnx-erp-bars i{ flex:1; min-height:20px; background:#0758d8; } .qnx-erp-bars i:nth-child(1){height:35%} .qnx-erp-bars i:nth-child(2){height:48%} .qnx-erp-bars i:nth-child(3){height:42%} .qnx-erp-bars i:nth-child(4){height:64%;background:#087ee7} .qnx-erp-bars i:nth-child(5){height:56%} .qnx-erp-bars i:nth-child(6){height:72%;background:#08a8cf} .qnx-erp-bars i:nth-child(7){height:66%} .qnx-erp-bars i:nth-child(8){height:88%;background:#79c91c} .qnx-erp-screen-status>span{ display:block; color:#0d1730; font-size:8px; font-weight:900; margin-bottom:18px; } .qnx-erp-screen-status>div{ display:grid; grid-template-columns:8px 1fr auto; gap:7px; align-items:center; margin-top:15px; color:#0d1730; font-size:8px; } .qnx-erp-screen-status>div>b{ width:7px; height:7px; background:#16b98a; } .qnx-erp-screen-status>div em{ color:#5d6b84; font-size:7px; font-style:normal; } .qnx-erp-visibility-copy{ max-width:560px; } .qnx-erp-visibility-copy p{ margin:25px 0 0; color:#5d6b84; font-size:16px; line-height:1.75; } .qnx-erp-visibility-points{ margin-top:28px; border-top:1px solid #d4dfeb; } .qnx-erp-visibility-points>div{ padding:16px 0; border-bottom:1px solid #d4dfeb; } .qnx-erp-visibility-points strong{ display:block; color:#0d1730; font-size:14px; } .qnx-erp-visibility-points span{ display:block; margin-top:5px; color:#5d6b84; font-size:12px; line-height:1.5; } .qnx-erp-workflow{ padding:105px 7%; display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:85px; background:#fff; } .qnx-erp-workflow-copy{ max-width:570px; } .qnx-erp-workflow-copy p{ margin:25px 0 0; color:#5d6b84; font-size:16px; line-height:1.75; } .qnx-erp-approval{ padding:22px; background:#0d1730; box-shadow:0 25px 55px rgba(6,45,122,.15); } .qnx-erp-approval-head{ display:flex; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.1); } .qnx-erp-approval-head span{ color:#fff; font-size:10px; font-weight:900; } .qnx-erp-approval-head b{ color:#08a8cf; font-size:8px; letter-spacing:1.5px; } .qnx-erp-approval-step{ min-height:85px; display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:15px; border-bottom:1px solid rgba(255,255,255,.08); } .qnx-erp-approval-step:last-child{ border-bottom:0; } .qnx-erp-approval-step>div{ width:31px; height:31px; display:grid; place-items:center; border:1px solid #536d91; color:#8da4c0; font-size:9px; font-weight:900; } .qnx-erp-approval-step.complete>div{ background:#16b98a; border-color:#16b98a; color:#fff; } .qnx-erp-approval-step.active>div{ border-color:#b7e51c; color:#b7e51c; } .qnx-erp-approval-step small{ display:block; color:#08a8cf; font-size:7px; font-weight:900; letter-spacing:1.5px; } .qnx-erp-approval-step strong{ display:block; margin-top:5px; color:#fff; font-size:12px; } .qnx-erp-approval-step>span{ color:#7e96b5; font-size:7px; font-weight:900; } .qnx-erp-approval-step.complete>span{ color:#16b98a; } .qnx-erp-approval-step.active>span{ color:#b7e51c; } .qnx-erp-implementation{ padding:105px 7%; background:#f4f8ff; } .qnx-erp-implementation-heading{ max-width:700px; margin-bottom:60px; } .qnx-erp-implementation-track{ max-width:1200px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #cfdce9; } .qnx-erp-implementation-step{ position:relative; min-height:235px; padding:28px 24px; border-right:1px solid #cfdce9; transition:.35s ease; } .qnx-erp-implementation-step:first-child{ border-left:1px solid #cfdce9; } .qnx-erp-implementation-step:hover{ background:#fff; transform:translateY(-5px); } .qnx-erp-step-line{ width:45px; height:3px; margin-bottom:50px; background:#0758d8; } .qnx-erp-implementation-step:nth-child(2) .qnx-erp-step-line{ background:#087ee7; } .qnx-erp-implementation-step:nth-child(3) .qnx-erp-step-line{ background:#08a8cf; } .qnx-erp-implementation-step:nth-child(4) .qnx-erp-step-line{ background:#79c91c; } .qnx-erp-implementation-step small{ color:#0758d8; font-size:8px; font-weight:900; letter-spacing:1.5px; } .qnx-erp-implementation-step strong{ display:block; margin-top:6px; color:#0d1730; font-size:20px; } .qnx-erp-implementation-step p{ margin:8px 0 0; color:#5d6b84; font-size:12px; line-height:1.6; } .qnx-erp-final{ min-height:540px; padding:85px 7%; display:grid; grid-template-columns:.75fr 1.25fr; align-items:center; gap:90px; background:linear-gradient(125deg,#062d7a 0%,#0758d8 58%,#08a8cf 100%); } .qnx-erp-final-grid{ position:absolute; inset:0; background: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:45px 45px; } .qnx-erp-final-left, .qnx-erp-final-copy{ position:relative; z-index:2; } .qnx-erp-final-stamp{ width:260px; height:260px; padding:30px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid rgba(183,229,28,.55); background:rgba(6,45,122,.32); transform:rotate(-4deg); } .qnx-erp-final-stamp span{ color:#b7e51c; font-size:12px; font-weight:900; letter-spacing:3px; } .qnx-erp-final-stamp strong{ color:#fff; font-size:28px; line-height:.95; letter-spacing:-1px; } .qnx-erp-final-status{ margin-top:22px; display:flex; align-items:center; gap:9px; } .qnx-erp-final-status i{ width:7px; height:7px; background:#b7e51c; box-shadow:0 0 0 5px rgba(183,229,28,.12); } .qnx-erp-final-status span{ color:#c9dbef; font-size:8px; letter-spacing:1.5px; font-weight:900; } .qnx-erp-final-copy>span{ color:#b7e51c; } .qnx-erp-final-copy h2{ margin:0; color:#fff; font-size:clamp(44px,5.4vw,74px); line-height:.95; letter-spacing:-3px; font-weight:500; } .qnx-erp-final-copy h2 strong{ color:#b7e51c; font-weight:800; } .qnx-erp-final-copy p{ max-width:600px; margin:25px 0 32px; color:#dbe9f8; font-size:15px; line-height:1.7; } .qnx-erp-final-action{ display:inline-flex; align-items:center; gap:35px; padding:7px 7px 7px 20px; background:#fff; color:#0758d8; text-decoration:none; font-size:11px; font-weight:900; transition:.35s ease; } .qnx-erp-final-action b{ width:45px; height:45px; display:grid; place-items:center; background:#b7e51c; color:#0d1730; font-size:19px; transition:.35s ease; } .qnx-erp-final-action:hover{ transform:translateX(8px); } .qnx-erp-final-action:hover b{ transform:translateX(4px); } @media(max-width:1100px){ .qnx-erp-intro, .qnx-erp-visibility, .qnx-erp-workflow, .qnx-erp-final{ grid-template-columns:1fr; } .qnx-erp-command-board{ max-width:780px; width:100%; margin:auto; } .qnx-erp-visibility-screen, .qnx-erp-approval{ max-width:800px; width:100%; margin:auto; } .qnx-erp-final{ gap:55px; } .qnx-erp-final-left{ max-width:400px; } } @media(max-width:850px){ .qnx-erp-module-grid{ grid-template-columns:1fr 1fr; } .qnx-erp-implementation-track{ grid-template-columns:1fr 1fr; } .qnx-erp-implementation-step:nth-child(3){ border-left:1px solid #cfdce9; } } @media(max-width:720px){ .qnx-erp-intro, .qnx-erp-connected, .qnx-erp-modules, .qnx-erp-visibility, .qnx-erp-workflow, .qnx-erp-implementation, .qnx-erp-final{ padding:70px 20px; } .qnx-erp-intro-copy h2{ font-size:46px; letter-spacing:-2.5px; } .qnx-erp-command-board{ transform:none; padding:15px; } .qnx-erp-departments{ grid-template-columns:1fr 1fr; } .qnx-erp-dept{ min-height:100px; } .qnx-erp-data-band{ grid-template-columns:1fr; gap:8px; padding:13px; text-align:center; } .qnx-erp-data-band i{ display:none; } .qnx-erp-section-heading h2, .qnx-erp-modules-heading h2, .qnx-erp-visibility-copy h2, .qnx-erp-workflow-copy h2, .qnx-erp-implementation-heading h2{ font-size:40px; letter-spacing:-2px; } .qnx-erp-flow-row{ grid-template-columns:1fr; gap:7px; } .qnx-erp-flow-arrow{ transform:rotate(90deg); } .qnx-erp-flow-caption{ display:block; } .qnx-erp-flow-caption strong{ display:block; margin-top:7px; } .qnx-erp-module-grid{ grid-template-columns:1fr; } .qnx-erp-screen-metrics{ grid-template-columns:1fr; } .qnx-erp-screen-body{ grid-template-columns:1fr; } .qnx-erp-visibility-screen{ padding:15px; } .qnx-erp-approval{ padding:15px; } .qnx-erp-implementation-track{ grid-template-columns:1fr; } .qnx-erp-implementation-step, .qnx-erp-implementation-step:first-child, .qnx-erp-implementation-step:nth-child(3){ border-left:1px solid #cfdce9; } .qnx-erp-final-stamp{ width:220px; height:220px; } .qnx-erp-final-copy h2{ font-size:44px; letter-spacing:-2px; } .qnx-erp-final-action{ width:100%; justify-content:space-between; } } /* ========================================================= QNIX DIGITAL — SAAS PRODUCT DEVELOPMENT ========================================================= */ .qnx-saas-intro, .qnx-saas-architecture, .qnx-saas-mvp, .qnx-saas-system, .qnx-saas-release, .qnx-saas-fit, .qnx-saas-cta{ position:relative; overflow:hidden; } .qnx-saas-intro{ padding:92px 7%; background:#fff; } .qnx-saas-intro-wrap{ max-width:1320px; margin:auto; display:grid; grid-template-columns:43% 57%; align-items:center; gap:60px; } .qnx-saas-eyebrow, .qnx-saas-section-head>span, .qnx-saas-system-head>span, .qnx-saas-release-left>span, .qnx-saas-fit-head>span, .qnx-saas-cta-content>span{ display:block; color:#0758d8; font-size:11px; font-weight:800; letter-spacing:2.4px; margin-bottom:18px; } .qnx-saas-intro-copy h2{ margin:0; max-width:560px; color:#0d1730; font-size:clamp(42px,5vw,72px); line-height:1.02; letter-spacing:-3px; font-weight:700; } .qnx-saas-intro-copy h2 strong{ color:#0758d8; font-weight:800; } .qnx-saas-intro-copy p{ max-width:560px; margin:26px 0 0; color:#5d6b84; font-size:16px; line-height:1.8; } .qnx-saas-intro-tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; } .qnx-saas-intro-tags span{ padding:10px 14px; border:1px solid #dce6f3; background:#f4f8ff; color:#0d1730; font-size:11px; font-weight:700; } .qnx-saas-evolution{ position:relative; min-height:470px; padding:28px; background:#062d7a; box-shadow:0 28px 70px rgba(7,88,216,.16); } .qnx-saas-evolution:before{ content:""; position:absolute; inset:0; background: linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px); background-size:34px 34px; opacity:.7; } .qnx-saas-evolution>*{ position:relative; z-index:1; } .qnx-saas-evolution-head{ display:flex; justify-content:space-between; align-items:center; color:#fff; font-size:10px; letter-spacing:1.8px; } .qnx-saas-evolution-head b{ color:#b7e51c; font-size:11px; } .qnx-saas-evolution-line{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:48px 0 30px; position:relative; } .qnx-saas-evolution-line:before{ content:""; position:absolute; left:6px; right:6px; top:8px; height:1px; background:rgba(255,255,255,.28); } .qnx-saas-stage{ position:relative; z-index:2; color:#fff; } .qnx-saas-stage-dot{ display:block; width:17px; height:17px; margin-bottom:14px; border:4px solid #062d7a; background:#087ee7; box-shadow:0 0 0 1px rgba(255,255,255,.28); } .qnx-saas-stage-active .qnx-saas-stage-dot{ background:#b7e51c; box-shadow:0 0 0 1px #b7e51c,0 0 24px rgba(183,229,28,.45); } .qnx-saas-stage strong{ display:block; font-size:11px; letter-spacing:1.4px; } .qnx-saas-stage small{ display:block; margin-top:5px; color:rgba(255,255,255,.55); font-size:10px; } .qnx-saas-product-window{ position:relative; margin-top:26px; background:#fff; min-height:235px; border:1px solid rgba(255,255,255,.18); box-shadow:0 22px 45px rgba(0,0,0,.18); } .qnx-saas-window-top{ height:36px; display:flex; align-items:center; gap:6px; padding:0 13px; border-bottom:1px solid #e3eaf4; background:#f4f8ff; } .qnx-saas-window-top span{ width:7px; height:7px; border-radius:50%; background:#0758d8; opacity:.35; } .qnx-saas-window-top b{ margin-left:8px; color:#5d6b84; font-size:9px; letter-spacing:1px; } .qnx-saas-window-body{ display:grid; grid-template-columns:58px 1fr; min-height:198px; } .qnx-saas-window-sidebar{ padding:20px 16px; background:#062d7a; } .qnx-saas-window-sidebar i{ display:block; width:25px; height:4px; margin-bottom:15px; background:#fff; opacity:.28; } .qnx-saas-window-sidebar i:first-child{ background:#b7e51c; opacity:1; } .qnx-saas-window-main{ padding:25px; } .qnx-saas-window-title{ width:38%; height:10px; background:#0d1730; opacity:.82; } .qnx-saas-window-bars{ display:flex; align-items:end; gap:8px; height:70px; margin-top:25px; padding-bottom:8px; border-bottom:1px solid #e3eaf4; } .qnx-saas-window-bars span{ display:block; width:15%; background:#087ee7; } .qnx-saas-window-bars span:nth-child(1){height:35%;} .qnx-saas-window-bars span:nth-child(2){height:62%;background:#08a8cf;} .qnx-saas-window-bars span:nth-child(3){height:84%;background:#16b98a;} .qnx-saas-window-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:18px; } .qnx-saas-window-grid span{ height:22px; background:#f4f8ff; border:1px solid #e3eaf4; } .qnx-saas-architecture{ padding:100px 7%; background:#f4f8ff; } .qnx-saas-section-head{ max-width:760px; margin:0 auto 55px; text-align:center; } .qnx-saas-section-head h2, .qnx-saas-system-head h2, .qnx-saas-release-left h2, .qnx-saas-fit-head h2{ margin:0; color:#0d1730; font-size:clamp(34px,4vw,56px); line-height:1.08; letter-spacing:-2px; } .qnx-saas-section-head p, .qnx-saas-system-head p, .qnx-saas-release-left p{ margin:20px auto 0; color:#5d6b84; line-height:1.8; font-size:15px; max-width:700px; } .qnx-saas-stack{ max-width:1020px; margin:auto; background:#fff; padding:30px; border:1px solid #dce6f3; box-shadow:0 24px 60px rgba(17,55,110,.08); } .qnx-saas-stack-intro{ display:flex; justify-content:space-between; align-items:center; padding:0 5px 22px; border-bottom:1px solid #e3eaf4; } .qnx-saas-stack-intro span{ color:#0758d8; font-size:10px; font-weight:800; letter-spacing:2px; } .qnx-saas-stack-intro strong{ color:#0d1730; font-size:13px; } .qnx-saas-layer{ display:grid; grid-template-columns:55px 1fr 45px; align-items:center; min-height:82px; margin-top:10px; padding:14px 20px; border-left:4px solid #0758d8; background:#f4f8ff; transition:.3s ease; } .qnx-saas-layer:nth-of-type(3){border-left-color:#087ee7;} .qnx-saas-layer:nth-of-type(4){border-left-color:#08a8cf;} .qnx-saas-layer:nth-of-type(5){border-left-color:#16b98a;} .qnx-saas-layer:nth-of-type(6){border-left-color:#79c91c;} .qnx-saas-layer:nth-of-type(7){border-left-color:#b7e51c;} .qnx-saas-layer:hover{ transform:translateX(8px); background:#fff; box-shadow:0 12px 35px rgba(7,88,216,.08); } .qnx-saas-layer>span{ color:#0758d8; font-size:10px; font-weight:800; } .qnx-saas-layer strong{ display:block; color:#0d1730; font-size:12px; letter-spacing:1px; } .qnx-saas-layer small{ display:block; margin-top:5px; color:#5d6b84; font-size:12px; } .qnx-saas-layer>b{ color:#087ee7; font-size:20px; text-align:right; } .qnx-saas-mvp{ padding:100px 7%; display:grid; grid-template-columns:1.15fr .85fr; gap:80px; align-items:center; background:#fff; } .qnx-saas-mvp-visual{ min-width:0; } .qnx-saas-mvp-label{ margin-bottom:25px; color:#0758d8; font-size:10px; font-weight:800; letter-spacing:2px; } .qnx-saas-mvp-track{ display:grid; grid-template-columns:1fr 35px 1fr 35px 1fr 35px 1fr; align-items:stretch; } .qnx-saas-mvp-card{ min-height:250px; padding:24px; border:1px solid #dce6f3; background:#f4f8ff; transition:.35s ease; } .qnx-saas-mvp-card:hover, .qnx-saas-mvp-active{ background:#062d7a; border-color:#062d7a; transform:translateY(-8px); box-shadow:0 20px 45px rgba(6,45,122,.18); } .qnx-saas-mvp-card span{ display:block; margin-bottom:65px; color:#0758d8; font-size:10px; font-weight:800; } .qnx-saas-mvp-card strong{ display:block; color:#0d1730; font-size:12px; letter-spacing:1.4px; } .qnx-saas-mvp-card p{ margin:12px 0 0; color:#5d6b84; font-size:12px; line-height:1.7; } .qnx-saas-mvp-card:hover span, .qnx-saas-mvp-active span{ color:#b7e51c; } .qnx-saas-mvp-card:hover strong, .qnx-saas-mvp-active strong{ color:#fff; } .qnx-saas-mvp-card:hover p, .qnx-saas-mvp-active p{ color:rgba(255,255,255,.68); } .qnx-saas-mvp-arrow{ display:flex; justify-content:center; align-items:center; color:#087ee7; font-size:22px; } .qnx-saas-mvp-copy{ padding-top:10px; } .qnx-saas-mvp-copy>span{ display:block; margin-bottom:18px; color:#0758d8; font-size:10px; font-weight:800; letter-spacing:2px; } .qnx-saas-mvp-copy h2{ margin:0; color:#0d1730; font-size:clamp(34px,4vw,54px); line-height:1.08; letter-spacing:-2px; } .qnx-saas-mvp-copy>p{ margin:22px 0 0; color:#5d6b84; line-height:1.8; font-size:15px; } .qnx-saas-mvp-points{ margin-top:30px; } .qnx-saas-mvp-points div{ padding:16px 0; border-top:1px solid #e3eaf4; } .qnx-saas-mvp-points b{ display:block; color:#0d1730; font-size:12px; } .qnx-saas-mvp-points span{ display:block; margin-top:5px; color:#5d6b84; font-size:12px; } .qnx-saas-system{ padding:100px 7%; background:#062d7a; } .qnx-saas-system-head{ max-width:760px; margin:0 auto 55px; text-align:center; } .qnx-saas-system-head>span{ color:#b7e51c; } .qnx-saas-system-head h2{ color:#fff; } .qnx-saas-system-head p{ color:rgba(255,255,255,.65); } .qnx-saas-system-board{ max-width:1180px; margin:auto; display:grid; grid-template-columns:1fr 90px 1.15fr 90px 1fr; align-items:center; } .qnx-saas-system-user, .qnx-saas-system-core, .qnx-saas-system-admin{ min-height:180px; padding:30px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.055); } .qnx-saas-system-core{ background:#0758d8; border-color:#087ee7; box-shadow:0 22px 55px rgba(0,0,0,.18); } .qnx-saas-system-user small, .qnx-saas-system-core small, .qnx-saas-system-admin small{ display:block; color:#b7e51c; font-size:9px; font-weight:800; letter-spacing:1.8px; } .qnx-saas-system-user strong, .qnx-saas-system-core strong, .qnx-saas-system-admin strong{ display:block; margin-top:28px; color:#fff; font-size:18px; } .qnx-saas-system-user span, .qnx-saas-system-core span, .qnx-saas-system-admin span{ display:block; margin-top:10px; color:rgba(255,255,255,.58); font-size:11px; line-height:1.6; } .qnx-saas-system-connector{ display:flex; align-items:center; justify-content:center; gap:5px; } .qnx-saas-system-connector i{ width:7px; height:7px; background:#08a8cf; border-radius:50%; animation:qnxSaasPulse 1.8s infinite ease-in-out; } .qnx-saas-system-connector i:nth-child(2){animation-delay:.25s;} .qnx-saas-system-connector i:nth-child(3){animation-delay:.5s;} @keyframes qnxSaasPulse{ 0%,100%{opacity:.25;transform:translateX(0);} 50%{opacity:1;transform:translateX(7px);} } .qnx-saas-system-bottom{ max-width:1180px; margin:45px auto 0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.14); } .qnx-saas-system-bottom div{ padding:22px 20px; border-right:1px solid rgba(255,255,255,.14); } .qnx-saas-system-bottom div:last-child{ border-right:0; } .qnx-saas-system-bottom b{ display:block; color:#fff; font-size:10px; letter-spacing:1.2px; } .qnx-saas-system-bottom span{ display:block; margin-top:8px; color:rgba(255,255,255,.55); font-size:11px; line-height:1.6; } .qnx-saas-release{ padding:100px 7%; background:#f4f8ff; display:grid; grid-template-columns:.75fr 1.25fr; gap:80px; align-items:center; } .qnx-saas-release-left h2{ max-width:500px; } .qnx-saas-release-left p{ max-width:520px; margin-left:0; } .qnx-saas-release-board{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .qnx-saas-release-column{ min-height:260px; padding:22px; background:#fff; border:1px solid #dce6f3; transition:.3s ease; } .qnx-saas-release-column:hover{ transform:translateY(-7px); box-shadow:0 20px 45px rgba(7,88,216,.09); } .qnx-saas-release-column strong{ display:block; padding-bottom:18px; border-bottom:2px solid #087ee7; color:#0d1730; font-size:10px; letter-spacing:1.3px; } .qnx-saas-release-column span{ display:block; padding:15px 0; border-bottom:1px solid #e3eaf4; color:#5d6b84; font-size:11px; } .qnx-saas-release-final{ background:#0758d8; border-color:#0758d8; } .qnx-saas-release-final strong{ color:#fff; border-color:#b7e51c; } .qnx-saas-release-final span{ color:rgba(255,255,255,.7); border-color:rgba(255,255,255,.15); } .qnx-saas-fit{ padding:100px 7%; background:#fff; } .qnx-saas-fit-head{ max-width:760px; margin-bottom:45px; } .qnx-saas-fit-list{ max-width:1180px; margin:auto; border-top:1px solid #dce6f3; } .qnx-saas-fit-list>div{ display:grid; grid-template-columns:280px 1fr; gap:40px; padding:28px 0; border-bottom:1px solid #dce6f3; transition:.3s ease; } .qnx-saas-fit-list>div:hover{ padding-left:15px; border-bottom-color:#087ee7; } .qnx-saas-fit-list strong{ color:#0758d8; font-size:11px; letter-spacing:1.5px; } .qnx-saas-fit-list p{ margin:0; max-width:650px; color:#5d6b84; font-size:14px; line-height:1.7; } .qnx-saas-cta{ min-height:420px; padding:75px 7%; display:grid; grid-template-columns:150px 1fr 170px; align-items:center; gap:60px; background: linear-gradient(120deg,#062d7a 0%,#0758d8 48%,#087ee7 78%,#08a8cf 100%); } .qnx-saas-cta:before{ content:""; position:absolute; width:430px; height:430px; right:-130px; top:-170px; border:1px solid rgba(183,229,28,.35); transform:rotate(28deg); } .qnx-saas-cta-side{ display:flex; flex-direction:column; gap:13px; } .qnx-saas-cta-side span{ color:rgba(255,255,255,.42); font-size:10px; font-weight:800; letter-spacing:2px; } .qnx-saas-cta-side span:nth-child(2){ color:#b7e51c; } .qnx-saas-cta-content{ max-width:760px; } .qnx-saas-cta-content>span{ color:#b7e51c; } .qnx-saas-cta-content h2{ margin:0; color:#fff; font-size:clamp(36px,4.5vw,64px); line-height:1.04; letter-spacing:-2.5px; } .qnx-saas-cta-content p{ max-width:650px; margin:22px 0 30px; color:rgba(255,255,255,.72); font-size:14px; line-height:1.8; } .qnx-saas-cta-link{ display:inline-flex; align-items:center; gap:18px; padding:15px 18px 15px 20px; background:#fff; color:#0758d8; text-decoration:none; font-size:12px; font-weight:800; transition:.3s ease; } .qnx-saas-cta-link b{ display:grid; place-items:center; width:28px; height:28px; background:#b7e51c; color:#062d7a; font-size:16px; } .qnx-saas-cta-link:hover{ transform:translateX(7px); box-shadow:0 14px 35px rgba(0,0,0,.16); } .qnx-saas-cta-mark{ position:relative; z-index:2; width:150px; height:150px; border:1px solid rgba(255,255,255,.3); display:flex; flex-direction:column; justify-content:center; align-items:center; transform:rotate(8deg); } .qnx-saas-cta-mark span{ color:#fff; font-size:19px; font-weight:900; letter-spacing:2px; } .qnx-saas-cta-mark b{ margin-top:8px; color:#b7e51c; font-size:30px; } .qnx-saas-reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s ease; } .qnx-saas-visible{ opacity:1; transform:translateY(0); } @media(max-width:1100px){ .qnx-saas-intro-wrap, .qnx-saas-mvp, .qnx-saas-release{ grid-template-columns:1fr; } .qnx-saas-intro-wrap{ gap:50px; } .qnx-saas-mvp-track{ grid-template-columns:1fr 35px 1fr; } .qnx-saas-mvp-arrow:nth-child(4), .qnx-saas-mvp-card:nth-child(5){ display:none; } .qnx-saas-system-board{ grid-template-columns:1fr; gap:16px; } .qnx-saas-system-connector{ transform:rotate(90deg); height:45px; } .qnx-saas-system-bottom{ grid-template-columns:repeat(2,1fr); } .qnx-saas-system-bottom div:nth-child(2){ border-right:0; } .qnx-saas-system-bottom div:nth-child(-n+2){ border-bottom:1px solid rgba(255,255,255,.14); } } @media(max-width:760px){ .qnx-saas-intro, .qnx-saas-architecture, .qnx-saas-mvp, .qnx-saas-system, .qnx-saas-release, .qnx-saas-fit{ padding:70px 5%; } .qnx-saas-intro-copy h2{ font-size:42px; letter-spacing:-2px; } .qnx-saas-evolution{ padding:20px; } .qnx-saas-evolution-line{ gap:7px; } .qnx-saas-stage strong{ font-size:9px; } .qnx-saas-stage small{ font-size:8px; } .qnx-saas-stack{ padding:18px; } .qnx-saas-stack-intro{ display:block; } .qnx-saas-stack-intro strong{ display:block; margin-top:8px; } .qnx-saas-layer{ grid-template-columns:38px 1fr; padding:14px; } .qnx-saas-layer>b{ display:none; } .qnx-saas-mvp-track{ display:block; } .qnx-saas-mvp-card{ min-height:auto; margin-bottom:10px; } .qnx-saas-mvp-card span{ margin-bottom:28px; } .qnx-saas-mvp-arrow{ display:none; } .qnx-saas-system-bottom{ grid-template-columns:1fr; } .qnx-saas-system-bottom div{ border-right:0; border-bottom:1px solid rgba(255,255,255,.14); } .qnx-saas-system-bottom div:last-child{ border-bottom:0; } .qnx-saas-release-board{ grid-template-columns:1fr 1fr; } .qnx-saas-fit-list>div{ grid-template-columns:1fr; gap:10px; } .qnx-saas-cta{ min-height:auto; padding:65px 5%; grid-template-columns:1fr; gap:35px; } .qnx-saas-cta-mark{ width:110px; height:110px; } } @media(max-width:480px){ .qnx-saas-intro-copy h2{ font-size:36px; } .qnx-saas-evolution-head{ display:block; } .qnx-saas-evolution-head b{ display:block; margin-top:8px; } .qnx-saas-window-body{ grid-template-columns:42px 1fr; } .qnx-saas-window-sidebar{ padding:18px 10px; } .qnx-saas-window-main{ padding:18px; } .qnx-saas-release-board{ grid-template-columns:1fr; } .qnx-saas-cta-content h2{ font-size:38px; } } /* ========================================================= QNIX DIGITAL — CLOUD SOFTWARE DEVELOPMENT ========================================================= */ .qnx-cloud-intro, .qnx-cloud-foundation, .qnx-cloud-data, .qnx-cloud-api, .qnx-cloud-reliability, .qnx-cloud-deploy, .qnx-cloud-cta{ position:relative; overflow:hidden; } .qnx-cloud-intro{ padding:95px 7%; background:#fff; } .qnx-cloud-intro-wrap{ max-width:1320px; margin:auto; display:grid; grid-template-columns:.88fr 1.12fr; gap:70px; align-items:center; } .qnx-cloud-eyebrow, .qnx-cloud-section-head>span, .qnx-cloud-data-copy>span, .qnx-cloud-api-head>span, .qnx-cloud-reliability-copy>span, .qnx-cloud-deploy-head>span, .qnx-cloud-cta-copy>span{ display:block; margin-bottom:18px; color:#0758d8; font-size:10px; font-weight:800; letter-spacing:2.4px; } .qnx-cloud-intro-copy h2{ margin:0; max-width:570px; color:#0d1730; font-size:clamp(43px,5vw,72px); line-height:1.01; letter-spacing:-3px; } .qnx-cloud-intro-copy h2 strong{ color:#0758d8; } .qnx-cloud-intro-copy p{ max-width:560px; margin:26px 0 0; color:#5d6b84; font-size:15px; line-height:1.85; } .qnx-cloud-intro-points{ display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; } .qnx-cloud-intro-points span{ padding:10px 14px; background:#f4f8ff; border:1px solid #dce6f3; color:#0d1730; font-size:10px; font-weight:700; } .qnx-cloud-architecture-art{ position:relative; min-height:510px; padding:30px; background:#062d7a; box-shadow:0 28px 65px rgba(7,88,216,.16); } .qnx-cloud-architecture-art:before{ content:""; position:absolute; inset:0; background: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:32px 32px; } .qnx-cloud-art-label{ position:relative; z-index:2; color:#b7e51c; font-size:10px; font-weight:800; letter-spacing:2px; } .qnx-cloud-user-node{ position:absolute; left:38px; top:225px; width:92px; height:92px; display:flex; flex-direction:column; justify-content:center; align-items:center; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); } .qnx-cloud-user-node span{ color:#fff; font-size:10px; font-weight:800; } .qnx-cloud-user-node b{ margin-top:7px; color:#08a8cf; font-size:9px; } .qnx-cloud-flow-line{ position:absolute; height:1px; background:linear-gradient(90deg,#08a8cf,#087ee7); } .qnx-cloud-flow-a{ left:130px; top:270px; width:110px; } .qnx-cloud-flow-b{ right:190px; top:270px; width:105px; } .qnx-cloud-flow-line:after{ content:""; position:absolute; width:7px; height:7px; top:-3px; left:0; background:#b7e51c; border-radius:50%; box-shadow:0 0 16px rgba(183,229,28,.65); animation:qnxCloudFlow 2s infinite linear; } @keyframes qnxCloudFlow{ 0%{left:0;opacity:0;} 15%{opacity:1;} 85%{opacity:1;} 100%{left:100%;opacity:0;} } .qnx-cloud-service-node{ position:absolute; left:235px; top:185px; width:180px; min-height:170px; padding:24px; background:#0758d8; border:1px solid #087ee7; box-shadow:0 20px 45px rgba(0,0,0,.18); } .qnx-cloud-service-node small{ color:#b7e51c; font-size:8px; font-weight:800; letter-spacing:1.5px; } .qnx-cloud-service-node strong{ display:block; margin-top:18px; color:#fff; font-size:22px; letter-spacing:1px; } .qnx-cloud-service-node i{ display:inline-block; width:28px; height:4px; margin:25px 5px 0 0; background:rgba(255,255,255,.35); } .qnx-cloud-service-node i:nth-child(2){ background:#08a8cf; } .qnx-cloud-service-node i:nth-child(3){ background:#16b98a; } .qnx-cloud-cloud-shape{ position:absolute; right:35px; top:185px; width:185px; min-height:170px; padding:25px; border:1px solid rgba(255,255,255,.2); background:rgba(8,168,207,.11); } .qnx-cloud-cloud-shape:before{ content:""; position:absolute; inset:12px; border:1px dashed rgba(183,229,28,.32); } .qnx-cloud-cloud-shape>*{ position:relative; z-index:1; } .qnx-cloud-cloud-shape>span{ color:#08a8cf; font-size:8px; font-weight:800; letter-spacing:2px; } .qnx-cloud-cloud-shape strong{ display:block; margin-top:22px; color:#fff; font-size:18px; line-height:1.2; } .qnx-cloud-mini{ display:flex; gap:7px; margin-top:25px; } .qnx-cloud-mini i{ display:block; width:25px; height:25px; border:1px solid rgba(255,255,255,.22); background:#062d7a; } .qnx-cloud-art-footer{ position:absolute; left:30px; right:30px; bottom:28px; display:flex; justify-content:space-between; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); } .qnx-cloud-art-footer span{ color:rgba(255,255,255,.5); font-size:8px; font-weight:800; letter-spacing:1.5px; } .qnx-cloud-foundation{ padding:100px 7%; background:#f4f8ff; } .qnx-cloud-section-head{ max-width:760px; margin:0 auto 55px; text-align:center; } .qnx-cloud-section-head h2, .qnx-cloud-api-head h2, .qnx-cloud-reliability-copy h2, .qnx-cloud-deploy-head h2{ margin:0; color:#0d1730; font-size:clamp(35px,4vw,56px); line-height:1.07; letter-spacing:-2px; } .qnx-cloud-section-head p{ max-width:700px; margin:20px auto 0; color:#5d6b84; font-size:15px; line-height:1.8; } .qnx-cloud-foundation-layout{ max-width:1200px; margin:auto; display:grid; grid-template-columns:1.15fr .85fr; gap:70px; align-items:center; } .qnx-cloud-foundation-visual{ padding:28px; background:#062d7a; box-shadow:0 24px 55px rgba(17,55,110,.12); } .qnx-cloud-foundation-top{ display:grid; grid-template-columns:1fr 30px 1fr 30px 1fr; align-items:center; padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.13); } .qnx-cloud-foundation-top span{ color:#fff; font-size:9px; font-weight:800; letter-spacing:1.5px; } .qnx-cloud-foundation-top b{ color:#b7e51c; text-align:center; } .qnx-cloud-foundation-layers{ margin-top:18px; } .qnx-cloud-foundation-layer{ display:grid; grid-template-columns:190px 1fr; align-items:center; min-height:68px; margin-top:8px; padding:12px 18px; background:rgba(255,255,255,.055); border-left:3px solid #087ee7; transition:.3s ease; } .qnx-cloud-foundation-layer:nth-child(2){border-left-color:#08a8cf;} .qnx-cloud-foundation-layer:nth-child(3){border-left-color:#16b98a;} .qnx-cloud-foundation-layer:nth-child(4){border-left-color:#79c91c;} .qnx-cloud-foundation-layer:nth-child(5){border-left-color:#b7e51c;} .qnx-cloud-foundation-layer:hover{ transform:translateX(8px); background:rgba(255,255,255,.09); } .qnx-cloud-foundation-layer strong{ color:#fff; font-size:9px; letter-spacing:1.1px; } .qnx-cloud-foundation-layer span{ color:rgba(255,255,255,.55); font-size:10px; } .qnx-cloud-copy-row{ display:grid; grid-template-columns:40px 1fr; gap:20px; padding:24px 0; border-bottom:1px solid #dce6f3; } .qnx-cloud-copy-row>b{ color:#0758d8; font-size:10px; } .qnx-cloud-copy-row strong{ color:#0d1730; font-size:14px; } .qnx-cloud-copy-row p{ margin:8px 0 0; color:#5d6b84; font-size:12px; line-height:1.7; } .qnx-cloud-data{ padding:100px 7%; display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:center; background:#fff; } .qnx-cloud-data-copy h2{ margin:0; color:#0d1730; font-size:clamp(35px,4vw,55px); line-height:1.08; letter-spacing:-2px; } .qnx-cloud-data-copy>p{ max-width:560px; margin:22px 0 0; color:#5d6b84; font-size:14px; line-height:1.8; } .qnx-cloud-data-list{ margin-top:28px; border-top:1px solid #e3eaf4; } .qnx-cloud-data-list div{ padding:16px 0; border-bottom:1px solid #e3eaf4; } .qnx-cloud-data-list strong{ display:block; color:#0758d8; font-size:10px; letter-spacing:1.3px; } .qnx-cloud-data-list span{ display:block; margin-top:5px; color:#5d6b84; font-size:11px; } .qnx-cloud-data-visual{ min-height:380px; padding:25px; background:#062d7a; box-shadow:0 25px 55px rgba(17,55,110,.12); } .qnx-cloud-data-topbar{ display:flex; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.14); } .qnx-cloud-data-topbar span{ color:#fff; font-size:9px; font-weight:800; letter-spacing:1.5px; } .qnx-cloud-data-topbar b{ color:#b7e51c; font-size:8px; letter-spacing:1px; } .qnx-cloud-data-stream{ display:grid; grid-template-columns:100px 1fr 120px 1fr 100px; align-items:center; margin-top:90px; } .qnx-cloud-data-source{ min-height:105px; display:flex; flex-direction:column; justify-content:center; padding:18px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.055); } .qnx-cloud-data-source small{ color:#08a8cf; font-size:8px; font-weight:800; letter-spacing:1px; } .qnx-cloud-data-source strong{ margin-top:12px; color:#fff; font-size:15px; } .qnx-cloud-data-api{ background:#0758d8; border-color:#087ee7; } .qnx-cloud-data-store{ border-color:#16b98a; } .qnx-cloud-stream-path{ position:relative; height:1px; background:rgba(255,255,255,.25); } .qnx-cloud-stream-path i{ position:absolute; top:-3px; width:7px; height:7px; border-radius:50%; background:#b7e51c; animation:qnxCloudStream 2.4s infinite linear; } .qnx-cloud-stream-path i:nth-child(2){animation-delay:.35s;} .qnx-cloud-stream-path i:nth-child(3){animation-delay:.7s;} .qnx-cloud-stream-path i:nth-child(4){animation-delay:1.05s;} .qnx-cloud-stream-path i:nth-child(5){animation-delay:1.4s;} @keyframes qnxCloudStream{ 0%{left:0;opacity:0;} 15%{opacity:1;} 85%{opacity:1;} 100%{left:100%;opacity:0;} } .qnx-cloud-data-events{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:70px; } .qnx-cloud-data-events span{ padding:11px; border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.55); text-align:center; font-size:8px; letter-spacing:1px; } .qnx-cloud-api{ padding:100px 7%; background:#f4f8ff; } .qnx-cloud-api-head{ max-width:800px; margin:0 auto 55px; text-align:center; } .qnx-cloud-api-map{ max-width:1250px; margin:auto; display:grid; grid-template-columns:1fr 90px 1.1fr 90px 1fr; align-items:center; } .qnx-cloud-api-side, .qnx-cloud-api-center{ min-height:220px; padding:30px; border:1px solid #dce6f3; background:#fff; } .qnx-cloud-api-side span, .qnx-cloud-api-center small{ display:block; color:#0758d8; font-size:9px; font-weight:800; letter-spacing:1.5px; } .qnx-cloud-api-side strong, .qnx-cloud-api-center strong{ display:block; margin-top:25px; color:#0d1730; font-size:20px; } .qnx-cloud-api-side small{ display:block; margin-top:12px; color:#5d6b84; font-size:11px; line-height:1.7; } .qnx-cloud-api-center{ background:#0758d8; border-color:#0758d8; box-shadow:0 20px 45px rgba(7,88,216,.16); } .qnx-cloud-api-center small{ color:#b7e51c; } .qnx-cloud-api-center strong{ color:#fff; } .qnx-cloud-api-center div{ display:flex; flex-wrap:wrap; gap:7px; margin-top:24px; } .qnx-cloud-api-center div span{ padding:7px 9px; border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.7); font-size:8px; } .qnx-cloud-api-route{ position:relative; display:flex; justify-content:center; align-items:center; gap:5px; } .qnx-cloud-api-route:before{ content:""; position:absolute; left:0; right:0; height:1px; background:#087ee7; } .qnx-cloud-api-route i{ position:relative; z-index:2; width:7px; height:7px; border-radius:50%; background:#b7e51c; } .qnx-cloud-api-route span{ position:relative; z-index:3; color:#0758d8; font-size:18px; background:#f4f8ff; padding-left:8px; } .qnx-cloud-api-services{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .qnx-cloud-api-services div{ min-height:105px; padding:20px; border:1px solid #dce6f3; background:#fff; } .qnx-cloud-api-services b{ display:block; color:#0d1730; font-size:10px; letter-spacing:1px; } .qnx-cloud-api-services span{ display:block; margin-top:8px; color:#5d6b84; font-size:9px; } .qnx-cloud-reliability{ padding:100px 7%; background:#fff; } .qnx-cloud-reliability-wrap{ max-width:1200px; margin:auto; display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:center; } .qnx-cloud-reliability-copy h2{ max-width:520px; } .qnx-cloud-reliability-copy p{ max-width:520px; margin:22px 0 0; color:#5d6b84; font-size:14px; line-height:1.8; } .qnx-cloud-reliability-board{ padding:28px; background:#062d7a; box-shadow:0 25px 55px rgba(17,55,110,.13); } .qnx-cloud-health{ padding:25px; background:#0758d8; } .qnx-cloud-health-head{ display:flex; justify-content:space-between; } .qnx-cloud-health-head span{ color:#fff; font-size:9px; font-weight:800; letter-spacing:1.5px; } .qnx-cloud-health-head b{ color:#b7e51c; font-size:8px; letter-spacing:1px; } .qnx-cloud-health-line{ display:flex; align-items:end; gap:7px; height:95px; margin-top:25px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.15); } .qnx-cloud-health-line span{ flex:1; background:#08a8cf; animation:qnxCloudBars 2.5s infinite ease-in-out; } .qnx-cloud-health-line span:nth-child(1){height:35%;} .qnx-cloud-health-line span:nth-child(2){height:50%;animation-delay:.1s;} .qnx-cloud-health-line span:nth-child(3){height:43%;animation-delay:.2s;} .qnx-cloud-health-line span:nth-child(4){height:75%;animation-delay:.3s;} .qnx-cloud-health-line span:nth-child(5){height:60%;animation-delay:.4s;} .qnx-cloud-health-line span:nth-child(6){height:88%;animation-delay:.5s;} .qnx-cloud-health-line span:nth-child(7){height:70%;animation-delay:.6s;} .qnx-cloud-health-line span:nth-child(8){height:94%;background:#b7e51c;animation-delay:.7s;} @keyframes qnxCloudBars{ 50%{opacity:.5;transform:scaleY(.82);} } .qnx-cloud-health-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; } .qnx-cloud-health-metrics div{ padding:12px; border:1px solid rgba(255,255,255,.12); } .qnx-cloud-health-metrics small{ display:block; color:rgba(255,255,255,.5); font-size:7px; letter-spacing:1px; } .qnx-cloud-health-metrics strong{ display:block; margin-top:6px; color:#fff; font-size:9px; } .qnx-cloud-reliability-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; } .qnx-cloud-reliability-tags span{ padding:8px 11px; border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.6); font-size:8px; } .qnx-cloud-deploy{ padding:100px 7%; background:#f4f8ff; } .qnx-cloud-deploy-head{ max-width:750px; margin:0 auto 55px; text-align:center; } .qnx-cloud-deploy-track{ max-width:1180px; margin:auto; display:grid; grid-template-columns:1fr 80px 1fr 80px 1fr 80px 1fr; align-items:center; } .qnx-cloud-deploy-step{ min-height:190px; padding:25px; background:#fff; border:1px solid #dce6f3; transition:.3s ease; } .qnx-cloud-deploy-step:hover, .qnx-cloud-deploy-active{ transform:translateY(-7px); border-color:#087ee7; box-shadow:0 18px 40px rgba(7,88,216,.1); } .qnx-cloud-deploy-step span{ display:block; color:#0758d8; font-size:9px; font-weight:800; } .qnx-cloud-deploy-step strong{ display:block; margin-top:55px; color:#0d1730; font-size:12px; letter-spacing:1.4px; } .qnx-cloud-deploy-step small{ display:block; margin-top:8px; color:#5d6b84; font-size:10px; line-height:1.6; } .qnx-cloud-deploy-line{ position:relative; height:1px; background:#087ee7; } .qnx-cloud-deploy-line:after{ content:"→"; position:absolute; right:-4px; top:-10px; color:#0758d8; font-size:18px; } .qnx-cloud-cta{ min-height:500px; padding:80px 7%; display:grid; grid-template-columns:1fr 430px; gap:80px; align-items:center; background:linear-gradient(120deg,#062d7a 0%,#0758d8 48%,#087ee7 100%); } .qnx-cloud-cta-grid{ position:absolute; inset:0; background: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:45px 45px; } .qnx-cloud-cta-copy, .qnx-cloud-cta-terminal{ position:relative; z-index:2; } .qnx-cloud-cta-copy{ max-width:760px; } .qnx-cloud-cta-copy>span{ color:#b7e51c; } .qnx-cloud-cta-copy h2{ margin:0; color:#fff; font-size:clamp(40px,5vw,68px); line-height:1.03; letter-spacing:-3px; } .qnx-cloud-cta-copy p{ max-width:650px; margin:23px 0 30px; color:rgba(255,255,255,.7); font-size:14px; line-height:1.8; } .qnx-cloud-cta-button{ display:inline-flex; align-items:center; gap:18px; padding:14px 15px 14px 20px; background:#fff; color:#0758d8; text-decoration:none; font-size:11px; font-weight:800; transition:.3s ease; } .qnx-cloud-cta-button b{ display:grid; place-items:center; width:30px; height:30px; background:#b7e51c; color:#062d7a; font-size:16px; } .qnx-cloud-cta-button:hover{ transform:translateX(7px); box-shadow:0 15px 40px rgba(0,0,0,.18); } .qnx-cloud-cta-terminal{ background:#0d1730; border:1px solid rgba(255,255,255,.15); box-shadow:0 28px 65px rgba(0,0,0,.22); } .qnx-cloud-terminal-head{ display:flex; justify-content:space-between; padding:15px 18px; border-bottom:1px solid rgba(255,255,255,.1); } .qnx-cloud-terminal-head span{ color:rgba(255,255,255,.55); font-family:monospace; font-size:10px; } .qnx-cloud-terminal-head b{ color:#b7e51c; font-size:8px; } .qnx-cloud-terminal-body{ padding:25px; } .qnx-cloud-terminal-body p{ margin:0 0 14px; color:rgba(255,255,255,.58); font-family:monospace; font-size:11px; } .qnx-cloud-terminal-body p i{ margin-right:8px; color:#08a8cf; font-style:normal; } .qnx-cloud-terminal-body strong{ display:block; margin-top:30px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); color:#b7e51c; font-family:monospace; font-size:11px; } @media(max-width:1100px){ .qnx-cloud-intro-wrap, .qnx-cloud-foundation-layout, .qnx-cloud-data, .qnx-cloud-reliability-wrap{ grid-template-columns:1fr; } .qnx-cloud-intro-wrap{ gap:55px; } .qnx-cloud-api-map{ grid-template-columns:1fr; gap:15px; } .qnx-cloud-api-route{ height:55px; transform:rotate(90deg); } .qnx-cloud-api-route:before{ left:20%; right:20%; } .qnx-cloud-deploy-track{ grid-template-columns:1fr; gap:12px; } .qnx-cloud-deploy-line{ width:1px; height:35px; margin:auto; } .qnx-cloud-deploy-line:after{ content:"↓"; right:-5px; top:10px; } .qnx-cloud-cta{ grid-template-columns:1fr; } } @media(max-width:760px){ .qnx-cloud-intro, .qnx-cloud-foundation, .qnx-cloud-data, .qnx-cloud-api, .qnx-cloud-reliability, .qnx-cloud-deploy{ padding:70px 5%; } .qnx-cloud-intro-copy h2{ font-size:40px; letter-spacing:-2px; } .qnx-cloud-architecture-art{ min-height:430px; padding:22px; } .qnx-cloud-user-node{ left:22px; top:190px; width:72px; height:72px; } .qnx-cloud-service-node{ left:105px; top:155px; width:145px; min-height:145px; padding:20px; } .qnx-cloud-cloud-shape{ right:20px; top:155px; width:140px; min-height:145px; padding:20px; } .qnx-cloud-flow-a{ left:94px; top:225px; width:12px; } .qnx-cloud-flow-b{ right:155px; top:225px; width:12px; } .qnx-cloud-art-footer{ left:22px; right:22px; } .qnx-cloud-foundation-layer{ grid-template-columns:1fr; gap:7px; } .qnx-cloud-data-stream{ grid-template-columns:1fr; gap:12px; margin-top:45px; } .qnx-cloud-stream-path{ width:1px; height:35px; margin:auto; } .qnx-cloud-stream-path i{ top:auto; left:-3px; animation-name:qnxCloudStreamVertical; } .qnx-cloud-data-events{ margin-top:40px; } .qnx-cloud-health-metrics{ grid-template-columns:1fr; } .qnx-cloud-cta{ padding:70px 5%; } .qnx-cloud-cta-copy h2{ font-size:42px; letter-spacing:-2px; } } @keyframes qnxCloudStreamVertical{ 0%{top:0;opacity:0;} 15%{opacity:1;} 85%{opacity:1;} 100%{top:100%;opacity:0;} } @media(max-width:480px){ .qnx-cloud-intro-copy h2{ font-size:35px; } .qnx-cloud-architecture-art{ min-height:390px; } .qnx-cloud-service-node{ left:78px; width:125px; } .qnx-cloud-cloud-shape{ width:120px; } .qnx-cloud-flow-a{ left:90px; } .qnx-cloud-flow-b{ right:138px; } .qnx-cloud-foundation-top{ grid-template-columns:1fr; gap:8px; } .qnx-cloud-foundation-top b{ display:none; } .qnx-cloud-data-events{ grid-template-columns:1fr; } } /* ========================================================= QNIX DIGITAL — ENTERPRISE SOFTWARE SOLUTIONS ========================================================= */ .qnx-enterprise-intro, .qnx-enterprise-complexity, .qnx-enterprise-control, .qnx-enterprise-integration, .qnx-enterprise-visibility, .qnx-enterprise-governance, .qnx-enterprise-scale, .qnx-enterprise-cta{ position:relative; overflow:hidden; } .qnx-enterprise-intro{ padding:95px 7%; background:#fff; } .qnx-enterprise-intro-wrap{ max-width:1320px; margin:auto; display:grid; grid-template-columns:.85fr 1.15fr; gap:75px; align-items:center; } .qnx-enterprise-eyebrow, .qnx-enterprise-section-head>span, .qnx-enterprise-control-copy>span, .qnx-enterprise-integration-head>span, .qnx-enterprise-visibility-copy>span, .qnx-enterprise-governance-head>span, .qnx-enterprise-scale-copy>span, .qnx-enterprise-cta-copy>span{ display:block; margin-bottom:18px; color:#0758d8; font-size:10px; font-weight:800; letter-spacing:2.4px; } .qnx-enterprise-intro-copy h2{ margin:0; max-width:600px; color:#0d1730; font-size:clamp(43px,5vw,72px); line-height:1.02; letter-spacing:-3px; } .qnx-enterprise-intro-copy h2 strong{ color:#0758d8; } .qnx-enterprise-intro-copy>p{ max-width:560px; margin:26px 0 0; color:#5d6b84; font-size:15px; line-height:1.85; } .qnx-enterprise-intro-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; } .qnx-enterprise-intro-meta span{ padding:10px 13px; border:1px solid #dce6f3; background:#f4f8ff; color:#0d1730; font-size:10px; font-weight:700; } .qnx-enterprise-architecture{ position:relative; min-height:520px; padding:27px; background:#062d7a; box-shadow:0 28px 70px rgba(7,88,216,.15); } .qnx-enterprise-architecture:before{ content:""; position:absolute; inset:0; background: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:34px 34px; } .qnx-enterprise-arch-top{ position:relative; z-index:2; display:flex; justify-content:space-between; padding-bottom:17px; border-bottom:1px solid rgba(255,255,255,.14); } .qnx-enterprise-arch-top span{ color:#b7e51c; font-size:9px; font-weight:800; letter-spacing:1.8px; } .qnx-enterprise-arch-top b{ color:rgba(255,255,255,.48); font-size:8px; letter-spacing:1px; } .qnx-enterprise-executive{ position:absolute; left:50%; top:90px; width:245px; transform:translateX(-50%); padding:20px; text-align:center; background:#0758d8; border:1px solid #087ee7; box-shadow:0 20px 45px rgba(0,0,0,.18); z-index:3; } .qnx-enterprise-executive small{ display:block; color:#b7e51c; font-size:8px; font-weight:800; letter-spacing:1.5px; } .qnx-enterprise-executive strong{ display:block; margin-top:12px; color:#fff; font-size:15px; letter-spacing:1px; } .qnx-enterprise-executive span{ display:block; margin-top:7px; color:rgba(255,255,255,.62); font-size:9px; } .qnx-enterprise-vertical-line{ position:absolute; left:50%; top:168px; width:1px; height:74px; background:#08a8cf; } .qnx-enterprise-departments{ position:absolute; left:50px; right:50px; top:240px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .qnx-enterprise-departments:before{ content:""; position:absolute; left:16.5%; right:16.5%; top:-17px; height:1px; background:#08a8cf; } .qnx-enterprise-departments>div{ position:relative; min-height:105px; padding:18px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14); } .qnx-enterprise-departments>div:before{ content:""; position:absolute; left:50%; top:-18px; width:1px; height:18px; background:#08a8cf; } .qnx-enterprise-departments small{ color:#08a8cf; font-size:8px; font-weight:800; letter-spacing:1.3px; } .qnx-enterprise-departments strong{ display:block; margin-top:18px; color:#fff; font-size:11px; } .qnx-enterprise-data-line{ position:absolute; left:50%; top:345px; width:1px; height:48px; background:#16b98a; } .qnx-enterprise-data-core{ position:absolute; left:50%; top:393px; width:310px; transform:translateX(-50%); padding:18px; text-align:center; border:1px solid rgba(22,185,138,.5); background:rgba(22,185,138,.08); } .qnx-enterprise-data-core span{ color:#16b98a; font-size:8px; font-weight:800; letter-spacing:1.5px; } .qnx-enterprise-data-core strong{ display:block; margin-top:9px; color:#fff; font-size:12px; } .qnx-enterprise-data-core small{ display:block; margin-top:6px; color:rgba(255,255,255,.5); font-size:8px; } .qnx-enterprise-arch-foot{ position:absolute; left:27px; right:27px; bottom:22px; display:grid; grid-template-columns:repeat(4,1fr); padding-top:16px; border-top:1px solid rgba(255,255,255,.12); } .qnx-enterprise-arch-foot span{ color:rgba(255,255,255,.42); text-align:center; font-size:8px; font-weight:800; letter-spacing:1.2px; } .qnx-enterprise-complexity{ padding:100px 7%; background:#f4f8ff; } .qnx-enterprise-section-head{ max-width:800px; margin:0 auto 55px; text-align:center; } .qnx-enterprise-section-head h2, .qnx-enterprise-integration-head h2, .qnx-enterprise-governance-head h2{ margin:0; color:#0d1730; font-size:clamp(35px,4vw,56px); line-height:1.07; letter-spacing:-2px; } .qnx-enterprise-section-head p, .qnx-enterprise-integration-head p{ max-width:700px; margin:20px auto 0; color:#5d6b84; font-size:15px; line-height:1.8; } .qnx-enterprise-problems{ max-width:1180px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #dce6f3; border-left:1px solid #dce6f3; } .qnx-enterprise-problem{ min-height:285px; padding:27px; background:#fff; border-right:1px solid #dce6f3; border-bottom:1px solid #dce6f3; transition:.35s ease; } .qnx-enterprise-problem:hover{ background:#0758d8; transform:translateY(-7px); box-shadow:0 22px 45px rgba(7,88,216,.13); } .qnx-enterprise-problem-mark{ color:#0758d8; font-size:9px; font-weight:800; letter-spacing:1px; } .qnx-enterprise-problem strong{ display:block; margin-top:75px; color:#0d1730; font-size:15px; } .qnx-enterprise-problem p{ margin:10px 0 0; color:#5d6b84; font-size:11px; line-height:1.7; } .qnx-enterprise-problem:hover .qnx-enterprise-problem-mark, .qnx-enterprise-problem:hover strong{ color:#b7e51c; } .qnx-enterprise-problem:hover p{ color:rgba(255,255,255,.68); } .qnx-enterprise-control{ padding:100px 7%; display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:center; background:#fff; } .qnx-enterprise-control-copy h2, .qnx-enterprise-visibility-copy h2, .qnx-enterprise-scale-copy h2{ margin:0; color:#0d1730; font-size:clamp(35px,4vw,55px); line-height:1.07; letter-spacing:-2px; } .qnx-enterprise-control-copy>p, .qnx-enterprise-visibility-copy>p, .qnx-enterprise-scale-copy>p{ max-width:560px; margin:22px 0 0; color:#5d6b84; font-size:14px; line-height:1.8; } .qnx-enterprise-role-list{ margin-top:30px; border-top:1px solid #e3eaf4; } .qnx-enterprise-role-list div{ padding:15px 0; border-bottom:1px solid #e3eaf4; } .qnx-enterprise-role-list b{ display:block; color:#0758d8; font-size:9px; letter-spacing:1.4px; } .qnx-enterprise-role-list span{ display:block; margin-top:5px; color:#5d6b84; font-size:11px; } .qnx-enterprise-control-visual{ padding:27px; background:#062d7a; box-shadow:0 25px 55px rgba(17,55,110,.13); } .qnx-enterprise-control-bar{ display:flex; justify-content:space-between; padding-bottom:17px; border-bottom:1px solid rgba(255,255,255,.13); } .qnx-enterprise-control-bar span{ color:#fff; font-size:9px; font-weight:800; letter-spacing:1.4px; } .qnx-enterprise-control-bar b{ color:#b7e51c; font-size:8px; } .qnx-enterprise-permission{ margin-top:20px; background:#fff; } .qnx-enterprise-user{ display:flex; align-items:center; gap:15px; padding:20px; background:#f4f8ff; border-bottom:1px solid #e3eaf4; } .qnx-enterprise-avatar{ width:38px; height:38px; display:grid; place-items:center; background:#0758d8; color:#fff; font-weight:800; } .qnx-enterprise-user strong{ display:block; color:#0d1730; font-size:11px; } .qnx-enterprise-user span{ display:block; margin-top:4px; color:#5d6b84; font-size:9px; } .qnx-enterprise-permission-row{ display:flex; justify-content:space-between; padding:17px 20px; border-bottom:1px solid #e3eaf4; } .qnx-enterprise-permission-row span{ color:#5d6b84; font-size:10px; } .qnx-enterprise-permission-row b{ color:#0758d8; font-size:8px; letter-spacing:1px; } .qnx-enterprise-permission-row:last-child b{ color:#79c91c; } .qnx-enterprise-integration{ padding:100px 7%; background:#f4f8ff; } .qnx-enterprise-integration-head{ max-width:800px; margin:0 auto 55px; text-align:center; } .qnx-enterprise-integration-map{ max-width:1100px; margin:auto; display:grid; grid-template-columns:repeat(5,1fr); gap:12px; align-items:center; } .qnx-enterprise-system-card{ min-height:155px; padding:20px; background:#fff; border:1px solid #dce6f3; transition:.35s ease; } .qnx-enterprise-system-card:hover{ transform:translateY(-7px); box-shadow:0 18px 40px rgba(7,88,216,.09); } .qnx-enterprise-system-card small{ display:block; color:#0758d8; font-size:7px; font-weight:800; letter-spacing:1.2px; } .qnx-enterprise-system-card strong{ display:block; margin-top:30px; color:#0d1730; font-size:17px; } .qnx-enterprise-system-card span{ display:block; margin-top:7px; color:#5d6b84; font-size:9px; } .qnx-enterprise-main-system{ background:#0758d8; border-color:#0758d8; transform:translateY(-15px); box-shadow:0 22px 45px rgba(7,88,216,.18); } .qnx-enterprise-main-system small{ color:#b7e51c; } .qnx-enterprise-main-system strong{ color:#fff; } .qnx-enterprise-main-system span{ color:rgba(255,255,255,.62); } .qnx-enterprise-integration-flow{ max-width:750px; margin:45px auto 0; display:grid; grid-template-columns:1fr 50px 1fr 50px 1fr 50px 1fr; align-items:center; } .qnx-enterprise-integration-flow span{ text-align:center; color:#0758d8; font-size:8px; font-weight:800; letter-spacing:1px; } .qnx-enterprise-integration-flow i{ height:1px; background:#087ee7; } .qnx-enterprise-visibility{ padding:100px 7%; background:#fff; } .qnx-enterprise-visibility-wrap{ max-width:1200px; margin:auto; display:grid; grid-template-columns:1.15fr .85fr; gap:80px; align-items:center; } .qnx-enterprise-visibility-screen{ padding:25px; background:#062d7a; box-shadow:0 25px 55px rgba(17,55,110,.12); } .qnx-enterprise-screen-head{ display:flex; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.13); } .qnx-enterprise-screen-head span{ color:#fff; font-size:9px; font-weight:800; letter-spacing:1.4px; } .qnx-enterprise-screen-head b{ color:#b7e51c; font-size:8px; } .qnx-enterprise-screen-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:20px; } .qnx-enterprise-screen-metrics div{ padding:17px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.1); } .qnx-enterprise-screen-metrics small{ display:block; color:rgba(255,255,255,.46); font-size:7px; letter-spacing:1px; } .qnx-enterprise-screen-metrics strong{ display:block; margin-top:14px; color:#fff; font-size:25px; } .qnx-enterprise-screen-metrics span{ display:block; margin-top:5px; color:#08a8cf; font-size:8px; } .qnx-enterprise-screen-chart{ margin-top:18px; padding:20px; background:#fff; } .qnx-enterprise-chart-label{ display:flex; justify-content:space-between; } .qnx-enterprise-chart-label span{ color:#0d1730; font-size:8px; font-weight:800; } .qnx-enterprise-chart-label b{ color:#0758d8; font-size:7px; } .qnx-enterprise-chart{ height:130px; display:flex; align-items:end; gap:7px; margin-top:25px; padding-bottom:8px; border-bottom:1px solid #e3eaf4; } .qnx-enterprise-chart i{ flex:1; background:#087ee7; opacity:.8; } .qnx-enterprise-chart i:nth-child(1){height:35%;} .qnx-enterprise-chart i:nth-child(2){height:48%;} .qnx-enterprise-chart i:nth-child(3){height:40%;} .qnx-enterprise-chart i:nth-child(4){height:62%;} .qnx-enterprise-chart i:nth-child(5){height:52%;} .qnx-enterprise-chart i:nth-child(6){height:74%;} .qnx-enterprise-chart i:nth-child(7){height:67%;} .qnx-enterprise-chart i:nth-child(8){height:84%;} .qnx-enterprise-chart i:nth-child(9){height:76%;} .qnx-enterprise-chart i:nth-child(10){height:92%;} .qnx-enterprise-chart i:nth-child(11){height:82%;} .qnx-enterprise-chart i:nth-child(12){ height:98%; background:#b7e51c; } .qnx-enterprise-visibility-copy>p{ margin-bottom:30px; } .qnx-enterprise-visibility-points{ border-top:1px solid #e3eaf4; } .qnx-enterprise-visibility-points div{ padding:15px 0; border-bottom:1px solid #e3eaf4; } .qnx-enterprise-visibility-points b{ display:block; color:#0d1730; font-size:11px; } .qnx-enterprise-visibility-points span{ display:block; margin-top:5px; color:#5d6b84; font-size:10px; } .qnx-enterprise-governance{ padding:100px 7%; background:#062d7a; } .qnx-enterprise-governance-head{ max-width:800px; margin:0 auto 55px; text-align:center; } .qnx-enterprise-governance-head>span{ color:#b7e51c; } .qnx-enterprise-governance-head h2{ color:#fff; } .qnx-enterprise-governance-grid{ max-width:1100px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); border:1px solid rgba(255,255,255,.12); } .qnx-enterprise-governance-item{ min-height:210px; padding:27px; border-right:1px solid rgba(255,255,255,.12); transition:.3s ease; } .qnx-enterprise-governance-item:last-child{ border-right:0; } .qnx-enterprise-governance-item:hover{ background:#0758d8; } .qnx-enterprise-governance-item strong{ display:block; color:#b7e51c; font-size:10px; letter-spacing:1.5px; } .qnx-enterprise-governance-item p{ margin:55px 0 0; color:rgba(255,255,255,.6); font-size:11px; line-height:1.7; } .qnx-enterprise-scale{ padding:100px 7%; display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:center; background:#fff; } .qnx-enterprise-scale-copy h2{ max-width:560px; } .qnx-enterprise-scale-map{ max-width:650px; margin-left:auto; } .qnx-enterprise-scale-row{ display:grid; grid-template-columns:75px 1fr; align-items:center; min-height:90px; padding:15px 20px; border:1px solid #dce6f3; background:#f4f8ff; } .qnx-enterprise-scale-row>span{ color:#0758d8; font-size:9px; font-weight:800; letter-spacing:1px; } .qnx-enterprise-scale-row b{ display:block; color:#0d1730; font-size:12px; } .qnx-enterprise-scale-row small{ display:block; margin-top:5px; color:#5d6b84; font-size:10px; } .qnx-enterprise-scale-arrow{ height:40px; display:grid; place-items:center; color:#087ee7; font-size:20px; } .qnx-enterprise-scale-final{ background:#0758d8; border-color:#0758d8; } .qnx-enterprise-scale-final>span, .qnx-enterprise-scale-final b{ color:#fff; } .qnx-enterprise-scale-final small{ color:rgba(255,255,255,.62); } .qnx-enterprise-cta{ min-height:470px; padding:80px 7%; display:grid; grid-template-columns:1fr 220px; gap:80px; align-items:center; background:linear-gradient(125deg,#062d7a 0%,#0758d8 58%,#087ee7 100%); } .qnx-enterprise-cta-pattern{ position:absolute; inset:0; background: linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.045) 50%,transparent 50.2%), linear-gradient(0deg,transparent 49.8%,rgba(255,255,255,.045) 50%,transparent 50.2%); background-size:70px 70px; } .qnx-enterprise-cta-copy, .qnx-enterprise-cta-stamp{ position:relative; z-index:2; } .qnx-enterprise-cta-copy{ max-width:800px; } .qnx-enterprise-cta-copy>span{ color:#b7e51c; } .qnx-enterprise-cta-copy h2{ margin:0; color:#fff; font-size:clamp(40px,5vw,68px); line-height:1.03; letter-spacing:-3px; } .qnx-enterprise-cta-copy p{ max-width:650px; margin:22px 0 30px; color:rgba(255,255,255,.7); font-size:14px; line-height:1.8; } .qnx-enterprise-cta-button{ display:inline-flex; align-items:center; gap:18px; padding:14px 15px 14px 20px; background:#fff; color:#0758d8; text-decoration:none; font-size:11px; font-weight:800; transition:.3s ease; } .qnx-enterprise-cta-button b{ width:30px; height:30px; display:grid; place-items:center; background:#b7e51c; color:#062d7a; font-size:16px; } .qnx-enterprise-cta-button:hover{ transform:translateX(8px); box-shadow:0 15px 40px rgba(0,0,0,.18); } .qnx-enterprise-cta-stamp{ width:190px; height:190px; display:flex; flex-direction:column; justify-content:center; align-items:center; border:1px solid rgba(255,255,255,.3); transform:rotate(-7deg); } .qnx-enterprise-cta-stamp span{ color:#fff; font-size:14px; font-weight:900; letter-spacing:2px; } .qnx-enterprise-cta-stamp strong{ margin:8px 0; color:#b7e51c; font-size:48px; line-height:1; } .qnx-enterprise-cta-stamp small{ color:rgba(255,255,255,.45); font-size:7px; letter-spacing:1.1px; } @media(max-width:1100px){ .qnx-enterprise-intro-wrap, .qnx-enterprise-control, .qnx-enterprise-visibility, .qnx-enterprise-scale{ grid-template-columns:1fr; } .qnx-enterprise-problems{ grid-template-columns:1fr 1fr; } .qnx-enterprise-integration-map{ grid-template-columns:repeat(3,1fr); } .qnx-enterprise-main-system{ order:-1; grid-column:1/-1; transform:none; } .qnx-enterprise-governance-grid{ grid-template-columns:1fr 1fr; } .qnx-enterprise-governance-item:nth-child(2){ border-right:0; } .qnx-enterprise-governance-item:nth-child(-n+2){ border-bottom:1px solid rgba(255,255,255,.12); } .qnx-enterprise-cta{ grid-template-columns:1fr; } } @media(max-width:760px){ .qnx-enterprise-intro, .qnx-enterprise-complexity, .qnx-enterprise-control, .qnx-enterprise-integration, .qnx-enterprise-visibility, .qnx-enterprise-governance, .qnx-enterprise-scale{ padding:70px 5%; } .qnx-enterprise-intro-copy h2{ font-size:40px; letter-spacing:-2px; } .qnx-enterprise-architecture{ min-height:470px; padding:20px; } .qnx-enterprise-departments{ left:25px; right:25px; gap:7px; } .qnx-enterprise-departments>div{ padding:12px; } .qnx-enterprise-departments strong{ font-size:9px; } .qnx-enterprise-data-core{ width:240px; } .qnx-enterprise-problems{ grid-template-columns:1fr; } .qnx-enterprise-problem{ min-height:220px; } .qnx-enterprise-problem strong{ margin-top:50px; } .qnx-enterprise-integration-map{ grid-template-columns:1fr 1fr; } .qnx-enterprise-main-system{ grid-column:1/-1; } .qnx-enterprise-integration-flow{ grid-template-columns:1fr; gap:10px; } .qnx-enterprise-integration-flow i{ width:1px; height:25px; margin:auto; } .qnx-enterprise-screen-metrics{ grid-template-columns:1fr; } .qnx-enterprise-governance-grid{ grid-template-columns:1fr; } .qnx-enterprise-governance-item{ border-right:0; border-bottom:1px solid rgba(255,255,255,.12); } .qnx-enterprise-governance-item:last-child{ border-bottom:0; } .qnx-enterprise-scale-map{ margin:0; } .qnx-enterprise-cta{ padding:70px 5%; } .qnx-enterprise-cta-copy h2{ font-size:42px; letter-spacing:-2px; } .qnx-enterprise-cta-stamp{ width:145px; height:145px; } } @media(max-width:480px){ .qnx-enterprise-intro-copy h2{ font-size:35px; } .qnx-enterprise-architecture{ min-height:430px; } .qnx-enterprise-executive{ width:190px; top:82px; } .qnx-enterprise-departments{ top:225px; } .qnx-enterprise-data-line{ top:325px; } .qnx-enterprise-data-core{ top:373px; width:205px; } .qnx-enterprise-arch-foot{ display:none; } .qnx-enterprise-integration-map{ grid-template-columns:1fr; } .qnx-enterprise-main-system{ grid-column:auto; } .qnx-enterprise-scale-row{ grid-template-columns:55px 1fr; } } /* ========================================================= QNIX DIGITAL — BUSINESS AUTOMATION SOFTWARE ========================================================= */ .qnx-automation-opening, .qnx-automation-friction, .qnx-automation-logic, .qnx-automation-scenario, .qnx-automation-human, .qnx-automation-connect, .qnx-automation-opportunity, .qnx-automation-before-after, .qnx-automation-final{ position:relative; overflow:hidden; font-family:inherit; } .qnx-automation-opening{ min-height:680px; padding:92px 6vw 78px; background: radial-gradient(circle at 82% 18%,rgba(8,168,207,.18),transparent 27%), linear-gradient(125deg,#062d7a 0%,#0758d8 58%,#087ee7 100%); color:#fff; display:grid; grid-template-columns:.78fr 1.22fr; align-items:center; gap:70px; } .qnx-automation-opening-grid{ position:absolute; inset:0; opacity:.12; background-image: linear-gradient(rgba(255,255,255,.22) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.22) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to right,transparent,#000 35%,#000); } .qnx-automation-opening-copy, .qnx-automation-engine{ position:relative; z-index:2; } .qnx-automation-eyebrow, .qnx-automation-opening-copy>span, .qnx-automation-friction-head>span, .qnx-automation-logic-copy>span, .qnx-automation-scenario-head>span, .qnx-automation-human-copy>span, .qnx-automation-connect-head>span, .qnx-automation-opportunity-copy>span, .qnx-automation-ba-head>span, .qnx-automation-final-content>span{ display:block; font-size:11px; font-weight:800; letter-spacing:.2em; } .qnx-automation-eyebrow{ margin-bottom:24px; color:#b7e51c; } .qnx-automation-opening-copy h2{ max-width:620px; margin:0; font-size:clamp(48px,5.7vw,82px); line-height:.95; letter-spacing:-.055em; font-weight:300; } .qnx-automation-opening-copy h2 strong{ color:#b7e51c; font-weight:700; } .qnx-automation-opening-copy p{ max-width:550px; margin:30px 0 34px; color:rgba(255,255,255,.78); font-size:17px; line-height:1.8; } .qnx-automation-opening-link{ display:inline-flex; align-items:center; gap:20px; color:#fff; text-decoration:none; font-weight:800; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.45); } .qnx-automation-opening-link b{ color:#b7e51c; font-size:22px; transition:.3s ease; } .qnx-automation-opening-link:hover b{ transform:translate(5px,-5px); } .qnx-automation-engine{ min-height:430px; padding:25px; background:rgba(5,35,105,.52); border:1px solid rgba(255,255,255,.2); box-shadow:0 35px 80px rgba(3,25,80,.3); backdrop-filter:blur(12px); } .qnx-automation-engine-top{ display:flex; align-items:center; gap:12px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.14); font-size:10px; letter-spacing:.16em; font-weight:800; } .qnx-automation-engine-top i{ width:7px; height:7px; border-radius:50%; background:#b7e51c; box-shadow:0 0 15px #b7e51c; } .qnx-automation-engine-top small{ margin-left:auto; color:#b7e51c; } .qnx-automation-flow{ display:flex; align-items:center; gap:10px; padding:70px 0 58px; } .qnx-automation-flow-node{ flex:1; min-width:0; min-height:130px; padding:19px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.065); position:relative; } .qnx-automation-flow-node:before{ content:""; position:absolute; left:0; top:0; width:4px; height:100%; background:#b7e51c; } .qnx-automation-flow-node span{ display:block; color:#b7e51c; font-size:9px; letter-spacing:.14em; font-weight:800; margin-bottom:16px; } .qnx-automation-flow-node strong{ display:block; font-size:15px; line-height:1.2; color:#fff; } .qnx-automation-flow-node small{ display:block; margin-top:10px; color:rgba(255,255,255,.5); font-size:10px; } .qnx-automation-flow-line{ width:28px; height:1px; flex:none; background:linear-gradient(90deg,#b7e51c,#08a8cf); position:relative; } .qnx-automation-flow-line:after{ content:""; position:absolute; right:0; top:-3px; width:7px; height:7px; border-top:1px solid #b7e51c; border-right:1px solid #b7e51c; transform:rotate(45deg); } .qnx-automation-engine-foot{ display:flex; justify-content:space-between; gap:20px; color:rgba(255,255,255,.45); font-size:9px; letter-spacing:.12em; } .qnx-automation-friction{ padding:105px 7vw; background:#fff; } .qnx-automation-friction-head{ max-width:800px; margin-bottom:55px; } .qnx-automation-friction-head>span, .qnx-automation-logic-copy>span, .qnx-automation-scenario-head>span, .qnx-automation-human-copy>span, .qnx-automation-connect-head>span, .qnx-automation-opportunity-copy>span, .qnx-automation-ba-head>span{ color:#0758d8; } .qnx-automation-friction-head h2, .qnx-automation-logic-copy h2, .qnx-automation-scenario-head h2, .qnx-automation-human-copy h2, .qnx-automation-connect-head h2, .qnx-automation-opportunity-copy h2, .qnx-automation-ba-head h2{ margin:16px 0 18px; color:#0d1730; font-size:clamp(38px,4.3vw,62px); line-height:1; letter-spacing:-.045em; font-weight:300; } .qnx-automation-friction-head h2 strong, .qnx-automation-logic-copy h2 strong, .qnx-automation-scenario-head h2 strong, .qnx-automation-human-copy h2 strong, .qnx-automation-connect-head h2 strong, .qnx-automation-opportunity-copy h2 strong, .qnx-automation-ba-head h2 strong{ font-weight:750; color:#0758d8; } .qnx-automation-friction-head p, .qnx-automation-logic-copy>p, .qnx-automation-human-copy>p, .qnx-automation-opportunity-copy>p{ color:#5d6b84; line-height:1.8; font-size:16px; max-width:650px; } .qnx-automation-friction-board{ max-width:1250px; margin:auto; border-top:1px solid #dce6f3; } .qnx-automation-friction-row{ min-height:105px; display:grid; grid-template-columns:70px 1fr 1.2fr 100px; gap:25px; align-items:center; border-bottom:1px solid #dce6f3; transition:.3s ease; } .qnx-automation-friction-row:hover{ padding-left:15px; background:#f4f8ff; } .qnx-automation-friction-row>span{ color:#087ee7; font-size:11px; font-weight:800; } .qnx-automation-friction-row strong{ color:#0d1730; font-size:18px; } .qnx-automation-friction-row p{ color:#5d6b84; margin:0; line-height:1.6; font-size:14px; } .qnx-automation-friction-row>b{ color:#087ee7; font-size:9px; letter-spacing:.16em; text-align:right; } .qnx-automation-logic{ padding:105px 7vw; display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; background:#f4f8ff; } .qnx-automation-logic-visual{ padding:28px; background:#062d7a; box-shadow:0 30px 65px rgba(6,45,122,.18); } .qnx-automation-rulebar{ display:flex; justify-content:space-between; color:#fff; font-size:10px; letter-spacing:.15em; font-weight:800; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.14); } .qnx-automation-rulebar b{ color:#b7e51c; } .qnx-automation-rule{ display:grid; grid-template-columns:70px 1fr; gap:18px; align-items:center; margin-top:25px; } .qnx-automation-rule-label{ color:#08a8cf; font-size:10px; letter-spacing:.15em; font-weight:800; } .qnx-automation-rule-box{ padding:20px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); } .qnx-automation-rule-box strong{ display:block; color:#fff; font-size:15px; } .qnx-automation-rule-box span{ display:block; margin-top:7px; color:rgba(255,255,255,.45); font-size:9px; letter-spacing:.1em; } .qnx-automation-rule-condition{ border-color:rgba(8,168,207,.55); } .qnx-automation-rule-action{ border-color:rgba(183,229,28,.5); } .qnx-automation-rule-connector{ width:1px; height:22px; margin-left:34px; background:linear-gradient(#08a8cf,#b7e51c); } .qnx-automation-rule-footer{ display:flex; gap:12px; margin-top:30px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.45); font-size:9px; letter-spacing:.12em; } .qnx-automation-logic-points{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:35px; } .qnx-automation-logic-points div{ padding-top:18px; border-top:2px solid #087ee7; } .qnx-automation-logic-points strong, .qnx-automation-logic-points span{ display:block; } .qnx-automation-logic-points strong{ color:#0d1730; font-size:14px; } .qnx-automation-logic-points span{ margin-top:6px; color:#5d6b84; font-size:12px; } .qnx-automation-scenario{ padding:105px 6vw; background:#fff; } .qnx-automation-scenario-head{ max-width:800px; margin-bottom:60px; } .qnx-automation-scenario-track{ max-width:1400px; margin:auto; display:flex; align-items:stretch; gap:12px; } .qnx-automation-scenario-step{ flex:1; min-height:180px; padding:25px; background:#f4f8ff; border-top:3px solid #0758d8; transition:.35s ease; } .qnx-automation-scenario-step:hover{ transform:translateY(-8px); box-shadow:0 22px 45px rgba(7,88,216,.1); } .qnx-automation-scenario-step small{ display:block; color:#0758d8; font-size:9px; font-weight:800; letter-spacing:.14em; } .qnx-automation-scenario-step strong{ display:block; margin-top:24px; color:#0d1730; font-size:17px; } .qnx-automation-scenario-step p{ margin:10px 0 0; color:#5d6b84; font-size:12px; line-height:1.6; } .qnx-automation-scenario-final{ border-top-color:#79c91c; background:#f7fce9; } .qnx-automation-scenario-arrow{ display:flex; align-items:center; color:#08a8cf; font-size:23px; } .qnx-automation-human{ padding:105px 7vw; background:#0d1730; color:#fff; display:grid; grid-template-columns:.9fr 1.1fr; gap:100px; align-items:center; } .qnx-automation-human-copy h2{ color:#fff; } .qnx-automation-human-copy h2 strong{ color:#b7e51c; } .qnx-automation-human-copy>p{ color:rgba(255,255,255,.62); } .qnx-automation-human-link{ display:inline-flex; align-items:center; gap:20px; margin-top:22px; color:#fff; text-decoration:none; font-weight:800; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.3); } .qnx-automation-human-link b{ color:#b7e51c; font-size:20px; } .qnx-automation-human-flow{ position:relative; padding-left:50px; } .qnx-automation-human-line{ position:absolute; left:14px; top:25px; bottom:25px; width:1px; background:linear-gradient(#08a8cf,#b7e51c); } .qnx-automation-human-item{ position:relative; display:flex; gap:22px; align-items:center; margin:22px 0; padding:22px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.045); } .qnx-automation-human-item>span{ width:30px; height:30px; flex:none; display:grid; place-items:center; border:1px solid #08a8cf; color:#08a8cf; font-size:10px; font-weight:800; } .qnx-automation-human-item strong{ display:block; font-size:15px; } .qnx-automation-human-item small{ display:block; margin-top:6px; color:rgba(255,255,255,.48); } .qnx-automation-human-approval{ border-color:rgba(183,229,28,.4); } .qnx-automation-human-approval>span{ border-color:#b7e51c; color:#b7e51c; } .qnx-automation-connect{ padding:110px 7vw 120px; background:#fff; } .qnx-automation-connect-head{ max-width:850px; margin-bottom:60px; } .qnx-automation-connect-map{ position:relative; max-width:1050px; height:500px; margin:auto; border:1px solid #dce6f3; background: linear-gradient(rgba(7,88,216,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.055) 1px,transparent 1px); background-size:50px 50px; } .qnx-automation-connect-center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:190px; height:120px; background:#0758d8; color:#fff; display:grid; place-items:center; align-content:center; box-shadow:0 25px 55px rgba(7,88,216,.25); z-index:2; } .qnx-automation-connect-center span{ color:#b7e51c; font-size:9px; letter-spacing:.18em; font-weight:800; } .qnx-automation-connect-center strong{ margin-top:8px; text-align:center; font-size:14px; line-height:1.2; } .qnx-automation-connect-map:before, .qnx-automation-connect-map:after{ content:""; position:absolute; background:#08a8cf; opacity:.5; } .qnx-automation-connect-map:before{ left:15%; right:15%; top:50%; height:1px; } .qnx-automation-connect-map:after{ top:15%; bottom:15%; left:50%; width:1px; } .qnx-automation-connect-node{ position:absolute; z-index:3; min-width:140px; padding:15px 18px; background:#fff; border:1px solid #dce6f3; box-shadow:0 15px 35px rgba(17,55,110,.08); } .qnx-automation-connect-node b, .qnx-automation-connect-node span{ display:block; } .qnx-automation-connect-node b{ color:#0758d8; font-size:11px; letter-spacing:.1em; } .qnx-automation-connect-node span{ margin-top:5px; color:#5d6b84; font-size:10px; } .qnx-node-crm{left:8%;top:12%} .qnx-node-form{right:8%;top:12%} .qnx-node-mail{left:8%;bottom:12%} .qnx-node-pay{right:8%;bottom:12%} .qnx-node-calendar{left:37%;top:6%} .qnx-node-tools{right:34%;bottom:6%} .qnx-automation-opportunity{ padding:105px 7vw; background:#f4f8ff; display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:start; } .qnx-automation-opportunity-copy{ position:sticky; top:30px; } .qnx-automation-opportunity-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; } .qnx-automation-opportunity-item{ min-height:145px; padding:25px; background:#fff; border-left:4px solid #087ee7; transition:.3s ease; } .qnx-automation-opportunity-item:hover{ transform:translateX(7px); border-left-color:#79c91c; box-shadow:0 20px 40px rgba(7,88,216,.08); } .qnx-automation-opportunity-item span{ display:block; color:#087ee7; font-size:9px; letter-spacing:.15em; font-weight:800; } .qnx-automation-opportunity-item strong{ display:block; margin-top:25px; color:#0d1730; font-size:16px; } .qnx-automation-before-after{ padding:105px 7vw; background:#fff; } .qnx-automation-ba-head{ max-width:800px; margin-bottom:55px; } .qnx-automation-ba-board{ max-width:1200px; margin:auto; display:grid; grid-template-columns:1fr 100px 1fr; align-items:stretch; border:1px solid #dce6f3; } .qnx-automation-ba-side{ padding:35px; } .qnx-automation-ba-side label{ display:block; font-size:10px; letter-spacing:.16em; font-weight:800; margin-bottom:25px; } .qnx-automation-before{ background:#f4f8ff; } .qnx-automation-before label{ color:#5d6b84; } .qnx-automation-after{ background:#f7fce9; } .qnx-automation-after label{ color:#16b98a; } .qnx-automation-ba-side div{ display:grid; grid-template-columns:45px 1fr; align-items:center; min-height:62px; border-top:1px solid #dce6f3; } .qnx-automation-ba-side div span{ color:#087ee7; font-size:10px; font-weight:800; } .qnx-automation-ba-side div strong{ color:#0d1730; font-size:14px; } .qnx-automation-ba-divider{ display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; background:#fff; } .qnx-automation-ba-divider i{ width:1px; flex:1; background:#dce6f3; } .qnx-automation-ba-divider strong{ width:48px; height:48px; display:grid; place-items:center; border:1px solid #087ee7; color:#087ee7; font-size:20px; } .qnx-automation-final{ min-height:520px; padding:100px 7vw; display:flex; align-items:center; background: radial-gradient(circle at 80% 30%,rgba(8,168,207,.22),transparent 25%), linear-gradient(125deg,#062d7a,#0758d8 55%,#087ee7); color:#fff; } .qnx-automation-final-pattern{ position:absolute; right:-100px; top:-100px; width:550px; height:550px; border:1px solid rgba(255,255,255,.15); transform:rotate(25deg); } .qnx-automation-final-pattern:before, .qnx-automation-final-pattern:after{ content:""; position:absolute; inset:55px; border:1px solid rgba(255,255,255,.1); } .qnx-automation-final-pattern:after{ inset:110px; } .qnx-automation-final-content{ position:relative; z-index:2; max-width:780px; } .qnx-automation-final-content>span{ color:#b7e51c; } .qnx-automation-final-content h2{ margin:18px 0; font-size:clamp(44px,5.5vw,76px); line-height:.96; letter-spacing:-.05em; font-weight:300; } .qnx-automation-final-content p{ max-width:580px; color:rgba(255,255,255,.72); font-size:16px; line-height:1.7; } .qnx-automation-final-button{ display:inline-flex; align-items:center; gap:22px; margin-top:30px; padding:17px 22px; background:#b7e51c; color:#062d7a; text-decoration:none; font-size:13px; font-weight:900; transition:.3s ease; } .qnx-automation-final-button b{ font-size:21px; } .qnx-automation-final-button:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(183,229,28,.2); } .qnx-automation-final-mark{ position:absolute; right:7vw; bottom:70px; display:flex; flex-direction:column; align-items:flex-end; color:rgba(255,255,255,.13); font-size:72px; line-height:.78; letter-spacing:-.08em; } .qnx-automation-final-mark strong{ font-weight:900; } .qnx-automation-final-mark span{ font-weight:200; } @media(max-width:1100px){ .qnx-automation-opening{ grid-template-columns:1fr; gap:45px; } .qnx-automation-engine{ max-width:900px; width:100%; margin:auto; } .qnx-automation-human, .qnx-automation-logic, .qnx-automation-opportunity{ grid-template-columns:1fr; gap:55px; } .qnx-automation-opportunity-copy{ position:static; } .qnx-automation-scenario-track{ overflow-x:auto; padding-bottom:15px; } .qnx-automation-scenario-step{ min-width:190px; } } @media(max-width:800px){ .qnx-automation-opening, .qnx-automation-friction, .qnx-automation-logic, .qnx-automation-scenario, .qnx-automation-human, .qnx-automation-connect, .qnx-automation-opportunity, .qnx-automation-before-after, .qnx-automation-final{ padding-left:5vw; padding-right:5vw; } .qnx-automation-opening{ padding-top:75px; padding-bottom:65px; } .qnx-automation-flow{ flex-direction:column; align-items:stretch; padding:45px 0; } .qnx-automation-flow-line{ width:1px; height:24px; margin:auto; background:linear-gradient(#b7e51c,#08a8cf); } .qnx-automation-flow-line:after{ top:auto; bottom:0; right:-3px; transform:rotate(135deg); } .qnx-automation-friction-row{ grid-template-columns:50px 1fr; gap:12px; padding:20px 0; } .qnx-automation-friction-row p{ grid-column:2; } .qnx-automation-friction-row>b{ display:none; } .qnx-automation-logic-points{ grid-template-columns:1fr; } .qnx-automation-scenario-arrow{ display:none; } .qnx-automation-human{ gap:45px; } .qnx-automation-connect-map{ height:620px; } .qnx-automation-connect-center{ width:170px; } .qnx-node-crm{left:4%;top:10%} .qnx-node-form{right:4%;top:10%} .qnx-node-mail{left:4%;bottom:10%} .qnx-node-pay{right:4%;bottom:10%} .qnx-node-calendar{left:50%;top:27%;transform:translateX(-50%)} .qnx-node-tools{right:auto;left:50%;bottom:27%;transform:translateX(-50%)} .qnx-automation-opportunity-grid{ grid-template-columns:1fr; } .qnx-automation-ba-board{ grid-template-columns:1fr; } .qnx-automation-ba-divider{ height:75px; flex-direction:row; } .qnx-automation-ba-divider i{ height:1px; width:100%; } .qnx-automation-ba-divider strong{ flex:none; } .qnx-automation-final-mark{ right:5vw; bottom:30px; font-size:45px; } } @media(max-width:520px){ .qnx-automation-opening-copy h2{ font-size:45px; } .qnx-automation-engine{ padding:18px; } .qnx-automation-engine-foot{ flex-direction:column; gap:7px; } .qnx-automation-rule{ grid-template-columns:1fr; gap:8px; } .qnx-automation-rule-connector{ margin-left:8px; } .qnx-automation-human-flow{ padding-left:35px; } .qnx-automation-connect-map{ height:570px; } .qnx-automation-connect-node{ min-width:118px; padding:12px; } .qnx-automation-connect-node span{ font-size:9px; } .qnx-automation-ba-side{ padding:24px 20px; } } /* ========================================================= QNIX DIGITAL — SERVICES ========================================================= */ .qnx-services-intro, .qnx-services-directory, .qnx-services-direction{ position:relative; overflow:hidden; font-family:inherit; } .qnx-services-intro{ min-height:650px; padding:80px 6vw 0; color:#fff; background: radial-gradient(circle at 82% 20%,rgba(8,168,207,.24),transparent 26%), linear-gradient(125deg,#062d7a 0%,#0758d8 58%,#087ee7 100%); } .qnx-services-intro-grid{ position:absolute; inset:0; opacity:.12; background-image: linear-gradient(rgba(255,255,255,.22) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.22) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(90deg,#000 30%,transparent 85%); } .qnx-services-intro-inner{ position:relative; z-index:2; max-width:1380px; min-height:520px; margin:auto; display:grid; grid-template-columns:1fr .9fr; gap:60px; align-items:center; } .qnx-services-intro-copy{ max-width:720px; } .qnx-services-kicker, .qnx-services-intro-bottom, .qnx-services-directory-head>div>span, .qnx-family-heading>div:nth-child(2)>span, .qnx-direction-word{ letter-spacing:.18em; font-weight:800; } .qnx-services-kicker{ display:block; color:#b7e51c; font-size:11px; margin-bottom:25px; } .qnx-services-intro-copy h2{ margin:0; font-size:clamp(48px,5.8vw,82px); line-height:.95; letter-spacing:-.06em; font-weight:300; } .qnx-services-intro-copy h2 strong{ display:block; color:#b7e51c; font-weight:750; } .qnx-services-intro-copy p{ max-width:640px; margin:28px 0 35px; color:rgba(255,255,255,.76); font-size:17px; line-height:1.8; } .qnx-services-intro-actions{ display:flex; align-items:center; gap:28px; } .qnx-services-primary, .qnx-services-secondary{ text-decoration:none; } .qnx-services-primary{ display:inline-flex; align-items:center; gap:22px; padding:15px 19px; color:#062d7a; background:#b7e51c; font-size:13px; font-weight:900; transition:.3s ease; } .qnx-services-primary b{ font-size:20px; } .qnx-services-primary:hover{ transform:translateY(-4px); box-shadow:0 15px 35px rgba(183,229,28,.2); } .qnx-services-secondary{ color:#fff; font-size:13px; font-weight:800; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.4); } .qnx-services-secondary b{ margin-left:12px; color:#b7e51c; } .qnx-services-intro-visual{ position:relative; height:430px; display:flex; align-items:center; justify-content:center; } .qnx-services-core{ position:relative; z-index:3; width:190px; height:190px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(145deg,#087ee7,#0758d8); border:1px solid rgba(255,255,255,.35); box-shadow: 0 0 0 18px rgba(255,255,255,.035), 0 0 0 55px rgba(8,168,207,.055), 0 30px 70px rgba(0,25,90,.3); } .qnx-services-core span{ color:#b7e51c; font-size:12px; letter-spacing:.2em; font-weight:900; } .qnx-services-core strong{ margin-top:8px; font-size:23px; letter-spacing:.08em; } .qnx-services-core small{ margin-top:9px; color:rgba(255,255,255,.5); font-size:7px; letter-spacing:.17em; } .qnx-services-orbit-line{ position:absolute; border:1px solid rgba(255,255,255,.2); border-radius:50%; } .qnx-services-orbit-one{ width:350px; height:350px; transform:rotate(-18deg); } .qnx-services-orbit-two{ width:510px; height:220px; transform:rotate(28deg); border-color:rgba(183,229,28,.2); } .qnx-services-node{ position:absolute; z-index:4; padding:10px 15px; background:rgba(6,45,122,.8); border:1px solid rgba(255,255,255,.22); color:#fff; font-size:9px; letter-spacing:.12em; font-weight:800; backdrop-filter:blur(8px); } .qnx-services-node-a{top:58px;left:8%} .qnx-services-node-b{top:38px;right:4%} .qnx-services-node-c{bottom:62px;left:3%} .qnx-services-node-d{bottom:35px;right:9%} .qnx-services-intro-bottom{ position:relative; z-index:2; max-width:1380px; margin:auto; padding:20px 0; border-top:1px solid rgba(255,255,255,.16); display:flex; align-items:center; gap:18px; color:rgba(255,255,255,.5); font-size:9px; } .qnx-services-intro-bottom i{ width:4px; height:4px; border-radius:50%; background:#b7e51c; } .qnx-services-directory{ padding:105px 7vw 115px; background:#fff; } .qnx-services-directory-head{ max-width:1280px; margin:0 auto 75px; display:flex; justify-content:space-between; align-items:flex-end; gap:60px; } .qnx-services-directory-head>div>span{ color:#0758d8; font-size:10px; } .qnx-services-directory-head h2{ margin:15px 0 0; color:#0d1730; font-size:clamp(42px,4.5vw,64px); line-height:1; letter-spacing:-.05em; font-weight:300; } .qnx-services-directory-head h2 strong{ color:#0758d8; font-weight:750; } .qnx-services-directory-head>p{ max-width:430px; margin:0; color:#5d6b84; font-size:15px; line-height:1.8; } .qnx-service-family{ max-width:1280px; margin:0 auto; padding:65px 0 75px; border-top:1px solid #dce6f3; } .qnx-family-heading{ display:grid; grid-template-columns:75px 1fr auto; gap:30px; align-items:start; margin-bottom:38px; } .qnx-family-index{ width:52px; height:52px; display:grid; place-items:center; border:1px solid #dce6f3; color:#0758d8; font-size:11px; font-weight:900; } .qnx-family-heading>div:nth-child(2)>span{ display:block; color:#087ee7; font-size:9px; } .qnx-family-heading h3{ margin:10px 0 8px; color:#0d1730; font-size:clamp(30px,3vw,43px); line-height:1; letter-spacing:-.04em; } .qnx-family-heading p{ max-width:680px; margin:0; color:#5d6b84; font-size:14px; line-height:1.7; } .qnx-family-count{ padding-top:8px; color:#5d6b84; font-size:9px; letter-spacing:.16em; font-weight:800; white-space:nowrap; } .qnx-service-links{ margin-left:105px; display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid #e3eaf4; } .qnx-service-links a{ position:relative; min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 18px 0 0; border-bottom:1px solid #e3eaf4; color:#0d1730; text-decoration:none; font-size:15px; font-weight:700; transition:.3s ease; } .qnx-service-links a:nth-child(odd){ margin-right:28px; } .qnx-service-links a:nth-child(even){ padding-left:28px; border-left:1px solid #e3eaf4; } .qnx-service-links a:before{ content:""; position:absolute; left:-1px; top:0; bottom:0; width:3px; background:#087ee7; transform:scaleY(0); transform-origin:center; transition:.3s ease; } .qnx-service-links a:nth-child(even):before{ left:0; } .qnx-service-links a:hover{ color:#0758d8; padding-left:14px; background:#f4f8ff; } .qnx-service-links a:nth-child(even):hover{ padding-left:40px; } .qnx-service-links a:hover:before{ transform:scaleY(1); } .qnx-service-links a b{ color:#087ee7; font-size:19px; font-weight:400; transition:.3s ease; } .qnx-service-links a:hover b{ transform:translate(5px,-5px); color:#16b98a; } .qnx-family-ai{ background:linear-gradient(90deg,transparent 0%,rgba(8,168,207,.035) 100%); } .qnx-family-security{ background:linear-gradient(90deg,rgba(7,88,216,.025),transparent); } .qnx-family-mobile{ background:linear-gradient(90deg,transparent,rgba(123,197,31,.035)); } .qnx-family-software{ padding-bottom:35px; } .qnx-services-direction{ min-height:500px; padding:90px 7vw; color:#fff; background: radial-gradient(circle at 75% 30%,rgba(8,168,207,.18),transparent 27%), linear-gradient(125deg,#062d7a,#0758d8 60%,#087ee7); display:grid; grid-template-columns:1fr .9fr; align-items:center; gap:70px; } .qnx-services-direction-line{ position:absolute; top:0; left:0; width:7px; height:100%; background:linear-gradient(#b7e51c,#16b98a,#08a8cf); } .qnx-services-direction-copy{ position:relative; z-index:2; max-width:650px; } .qnx-services-direction-copy>span{ color:#b7e51c; font-size:10px; letter-spacing:.2em; font-weight:800; } .qnx-services-direction-copy h2{ margin:18px 0; font-size:clamp(43px,5vw,68px); line-height:.96; letter-spacing:-.05em; font-weight:300; } .qnx-services-direction-copy h2 strong{ color:#b7e51c; font-weight:750; } .qnx-services-direction-copy p{ max-width:590px; color:rgba(255,255,255,.7); line-height:1.8; font-size:16px; } .qnx-services-direction-copy a{ display:inline-flex; align-items:center; gap:20px; margin-top:22px; padding:16px 20px; background:#fff; color:#062d7a; text-decoration:none; font-size:13px; font-weight:900; transition:.3s ease; } .qnx-services-direction-copy a b{ color:#0758d8; font-size:20px; } .qnx-services-direction-copy a:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.16); } .qnx-services-direction-visual{ position:relative; height:350px; border-left:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18); } .qnx-direction-word{ position:absolute; color:rgba(255,255,255,.12); font-size:clamp(30px,4vw,55px); white-space:nowrap; } .qnx-direction-word-one{ top:18px; left:30px; color:rgba(183,229,28,.55); } .qnx-direction-word-two{ top:88px; left:90px; } .qnx-direction-word-three{ top:158px; left:20px; color:rgba(8,168,207,.35); } .qnx-direction-word-four{ top:228px; left:105px; } @media(max-width:1050px){ .qnx-services-intro-inner{ grid-template-columns:1fr; padding-bottom:45px; } .qnx-services-intro{ min-height:auto; } .qnx-services-intro-visual{ max-width:700px; width:100%; margin:auto; } .qnx-services-intro-bottom{ display:none; } .qnx-services-directory-head{ align-items:flex-start; flex-direction:column; } .qnx-services-direction{ grid-template-columns:1fr; } } @media(max-width:800px){ .qnx-services-intro, .qnx-services-directory, .qnx-services-direction{ padding-left:5vw; padding-right:5vw; } .qnx-services-intro{ padding-top:65px; } .qnx-services-intro-actions{ flex-wrap:wrap; } .qnx-services-intro-visual{ height:370px; } .qnx-services-core{ width:165px; height:165px; } .qnx-services-orbit-one{ width:300px; height:300px; } .qnx-services-orbit-two{ width:410px; height:180px; } .qnx-services-node-a{left:2%} .qnx-services-node-b{right:0} .qnx-services-node-c{left:0} .qnx-services-node-d{right:2%} .qnx-service-family{ padding-top:55px; padding-bottom:60px; } .qnx-family-heading{ grid-template-columns:55px 1fr; gap:20px; } .qnx-family-count{ grid-column:2; padding-top:0; } .qnx-service-links{ margin-left:75px; grid-template-columns:1fr; } .qnx-service-links a:nth-child(odd){ margin-right:0; } .qnx-service-links a:nth-child(even){ padding-left:0; border-left:0; } .qnx-service-links a:nth-child(even):before{ left:-1px; } .qnx-service-links a:nth-child(even):hover{ padding-left:14px; } .qnx-services-direction{ padding-top:75px; padding-bottom:75px; } } @media(max-width:520px){ .qnx-services-intro-copy h2{ font-size:44px; } .qnx-services-intro-copy p{ font-size:15px; } .qnx-services-intro-visual{ height:320px; } .qnx-services-core{ width:135px; height:135px; } .qnx-services-core strong{ font-size:18px; } .qnx-services-orbit-one{ width:230px; height:230px; } .qnx-services-orbit-two{ width:300px; height:140px; } .qnx-services-node{ padding:8px 10px; font-size:7px; } .qnx-services-node-a{top:30px} .qnx-services-node-b{top:22px} .qnx-services-node-c{bottom:35px} .qnx-services-node-d{bottom:20px} .qnx-services-directory{ padding-top:75px; padding-bottom:80px; } .qnx-services-directory-head{ margin-bottom:45px; } .qnx-services-directory-head h2{ font-size:39px; } .qnx-family-heading{ grid-template-columns:1fr; gap:18px; } .qnx-family-index{ width:44px; height:44px; } .qnx-family-heading h3{ font-size:30px; } .qnx-service-links{ margin-left:0; } .qnx-service-links a{ min-height:65px; font-size:13px; } .qnx-services-direction-visual{ height:250px; } } /* ========================================================= QNIX DIGITAL — AI SOLUTIONS ========================================================= */ .qnx-ai-intro, .qnx-ai-capabilities, .qnx-ai-architecture, .qnx-ai-final{ position:relative; overflow:hidden; font-family:inherit; } .qnx-ai-intro{ min-height:650px; padding:70px 7vw 0; color:#fff; background: radial-gradient(circle at 78% 45%,rgba(8,168,207,.22),transparent 28%), radial-gradient(circle at 15% 20%,rgba(123,197,31,.08),transparent 22%), linear-gradient(125deg,#062d7a 0%,#0758d8 58%,#087ee7 100%); } .qnx-ai-grid{ position:absolute; inset:0; opacity:.11; background-image: linear-gradient(rgba(255,255,255,.22) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.22) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(90deg,#000 0%,transparent 90%); } .qnx-ai-glow{ position:absolute; border-radius:50%; filter:blur(50px); pointer-events:none; } .qnx-ai-glow-one{ width:260px; height:260px; right:8%; top:20%; background:rgba(8,168,207,.13); } .qnx-ai-glow-two{ width:180px; height:180px; left:25%; bottom:5%; background:rgba(123,201,28,.08); } .qnx-ai-intro-inner{ position:relative; z-index:2; max-width:1350px; min-height:520px; margin:auto; display:grid; grid-template-columns:1fr .9fr; align-items:center; gap:60px; } .qnx-ai-intro-copy{ max-width:720px; } .qnx-ai-kicker{ display:block; margin-bottom:24px; color:#b7e51c; font-size:10px; letter-spacing:.2em; font-weight:900; } .qnx-ai-intro-copy h2{ margin:0; font-size:clamp(48px,5.5vw,78px); line-height:.94; letter-spacing:-.06em; font-weight:300; } .qnx-ai-intro-copy h2 strong{ display:block; color:#b7e51c; font-weight:750; } .qnx-ai-intro-copy p{ max-width:640px; margin:28px 0 34px; color:rgba(255,255,255,.73); font-size:16px; line-height:1.8; } .qnx-ai-actions{ display:flex; align-items:center; gap:28px; } .qnx-ai-btn{ display:inline-flex; align-items:center; gap:20px; padding:15px 18px; background:#b7e51c; color:#062d7a; text-decoration:none; font-size:12px; font-weight:900; transition:.3s ease; } .qnx-ai-btn b{ font-size:19px; } .qnx-ai-btn:hover{ transform:translateY(-4px); box-shadow:0 15px 35px rgba(183,229,28,.2); } .qnx-ai-text-btn{ padding-bottom:9px; border-bottom:1px solid rgba(255,255,255,.4); color:#fff; text-decoration:none; font-size:12px; font-weight:800; } .qnx-ai-text-btn b{ margin-left:10px; color:#b7e51c; } .qnx-ai-system{ position:relative; width:500px; max-width:100%; height:500px; margin:auto; display:grid; place-items:center; } .qnx-ai-system-ring{ position:absolute; border:1px solid rgba(255,255,255,.18); border-radius:50%; } .qnx-ai-ring-one{ width:300px; height:300px; } .qnx-ai-ring-two{ width:410px; height:250px; transform:rotate(35deg); border-color:rgba(8,168,207,.3); } .qnx-ai-ring-three{ width:470px; height:170px; transform:rotate(-35deg); border-color:rgba(183,229,28,.2); } .qnx-ai-system-core{ position:relative; z-index:5; width:165px; height:165px; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; background: radial-gradient(circle at 35% 30%,#087ee7,#0758d8 70%,#062d7a); border:1px solid rgba(255,255,255,.4); box-shadow: 0 0 0 16px rgba(255,255,255,.035), 0 0 70px rgba(8,168,207,.25), 0 30px 70px rgba(0,30,90,.3); } .qnx-ai-system-core span{ color:#b7e51c; font-size:10px; letter-spacing:.2em; font-weight:900; } .qnx-ai-system-core strong{ margin-top:2px; color:#fff; font-size:48px; line-height:1; font-weight:800; } .qnx-ai-system-core small{ margin-top:8px; color:rgba(255,255,255,.48); font-size:7px; line-height:1.5; text-align:center; letter-spacing:.16em; } .qnx-ai-signal{ position:absolute; z-index:6; display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid rgba(255,255,255,.2); background:rgba(6,45,122,.72); backdrop-filter:blur(10px); color:rgba(255,255,255,.8); font-size:8px; letter-spacing:.13em; font-weight:800; } .qnx-ai-signal i{ width:5px; height:5px; border-radius:50%; background:#b7e51c; box-shadow:0 0 10px rgba(183,229,28,.8); } .qnx-ai-signal-one{top:88px;left:8px} .qnx-ai-signal-two{top:42px;right:10px} .qnx-ai-signal-three{bottom:88px;left:5px} .qnx-ai-signal-four{bottom:43px;right:5px} .qnx-ai-bottom-line{ position:relative; z-index:2; max-width:1350px; margin:auto; padding:18px 0; border-top:1px solid rgba(255,255,255,.16); display:flex; align-items:center; gap:16px; color:rgba(255,255,255,.45); font-size:8px; letter-spacing:.16em; font-weight:800; } .qnx-ai-bottom-line i{ width:4px; height:4px; border-radius:50%; background:#b7e51c; } .qnx-ai-capabilities{ padding:105px 7vw 110px; background:#fff; } .qnx-ai-section-head{ max-width:1280px; margin:0 auto 70px; display:flex; justify-content:space-between; align-items:flex-end; gap:60px; } .qnx-ai-section-head>div>span, .qnx-ai-capability-content>span, .qnx-ai-architecture-copy>span, .qnx-ai-final-inner>span{ color:#0758d8; font-size:9px; letter-spacing:.19em; font-weight:900; } .qnx-ai-section-head h2{ margin:15px 0 0; color:#0d1730; font-size:clamp(42px,4.5vw,63px); line-height:.98; letter-spacing:-.055em; font-weight:300; } .qnx-ai-section-head h2 strong{ color:#0758d8; font-weight:750; } .qnx-ai-section-head>p{ max-width:440px; margin:0; color:#5d6b84; font-size:15px; line-height:1.8; } .qnx-ai-capability-stage{ max-width:1280px; margin:0 auto; min-height:410px; padding:65px 0; border-top:1px solid #dfe7f1; display:grid; grid-template-columns:80px 1.1fr .85fr; gap:40px; align-items:center; } .qnx-ai-stage-reverse{ grid-template-columns:80px .85fr 1.1fr; } .qnx-ai-stage-label{ align-self:start; display:flex; flex-direction:column; gap:10px; } .qnx-ai-stage-label span{ color:#087ee7; font-size:10px; font-weight:900; } .qnx-ai-stage-label b{ color:#0d1730; font-size:8px; letter-spacing:.16em; writing-mode:vertical-rl; transform:rotate(180deg); } .qnx-ai-capability-content{ max-width:570px; } .qnx-ai-capability-content>span{ color:#087ee7; } .qnx-ai-capability-content h3{ margin:14px 0 15px; color:#0d1730; font-size:clamp(31px,3.2vw,45px); line-height:1.02; letter-spacing:-.045em; font-weight:300; } .qnx-ai-capability-content h3 strong{ color:#0758d8; font-weight:750; } .qnx-ai-capability-content>p{ margin:0; color:#5d6b84; font-size:14px; line-height:1.8; } .qnx-ai-link-row{ margin-top:27px; display:flex; flex-wrap:wrap; gap:9px; } .qnx-ai-link-row a{ display:inline-flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid #dce5f1; color:#0d1730; text-decoration:none; background:#fff; font-size:10px; font-weight:800; transition:.3s ease; } .qnx-ai-link-row a b{ color:#087ee7; font-size:14px; font-weight:400; } .qnx-ai-link-row a:hover{ color:#0758d8; border-color:#087ee7; background:#f4f8ff; transform:translateY(-2px); } .qnx-ai-stage-visual{ position:relative; min-height:300px; display:grid; place-items:center; overflow:hidden; background:#f4f8ff; border:1px solid #dfe8f3; } .qnx-ai-stage-visual:before{ content:""; position:absolute; inset:0; opacity:.35; background-image: linear-gradient(#dbe5f0 1px,transparent 1px), linear-gradient(90deg,#dbe5f0 1px,transparent 1px); background-size:28px 28px; } .qnx-ai-search-window{ position:relative; z-index:2; width:76%; padding:18px; background:#fff; border:1px solid #dbe5f0; box-shadow:0 20px 50px rgba(17,55,110,.1); } .qnx-ai-search-top{ display:flex; gap:5px; margin-bottom:18px; } .qnx-ai-search-top span{ width:6px; height:6px; border-radius:50%; background:#d7e2ef; } .qnx-ai-search-query{ height:42px; display:flex; align-items:center; gap:10px; padding:0 12px; background:#f4f8ff; color:#5d6b84; font-size:9px; } .qnx-ai-search-query i{ width:10px; height:10px; border:2px solid #087ee7; border-radius:50%; position:relative; } .qnx-ai-search-query i:after{ content:""; position:absolute; width:5px; height:2px; right:-5px; bottom:-2px; background:#087ee7; transform:rotate(45deg); } .qnx-ai-answer{ margin-top:16px; } .qnx-ai-answer small{ color:#0758d8; font-size:7px; letter-spacing:.15em; font-weight:900; } .qnx-ai-answer div{ width:92%; height:7px; margin-top:11px; background:#dce8f6; } .qnx-ai-answer div:nth-of-type(2){ width:80%; } .qnx-ai-answer div:nth-of-type(3){ width:48%; } .qnx-ai-answer .short{ width:28%; background:#b7e51c; } .qnx-ai-flow{ position:relative; z-index:2; width:80%; display:flex; align-items:center; justify-content:center; } .qnx-ai-flow-node{ width:76px; height:76px; display:grid; place-items:center; border:1px solid #d6e2f0; background:#fff; color:#5d6b84; font-size:8px; letter-spacing:.12em; font-weight:900; box-shadow:0 12px 30px rgba(17,55,110,.08); } .qnx-ai-flow-node.active{ width:92px; height:92px; border-color:#087ee7; color:#0758d8; box-shadow:0 0 0 9px rgba(8,126,231,.06),0 15px 35px rgba(17,55,110,.1); } .qnx-ai-flow-line{ flex:1; height:1px; background:linear-gradient(90deg,#dbe5f0,#087ee7,#dbe5f0); } .qnx-ai-flow-status{ position:absolute; bottom:24px; z-index:2; display:flex; align-items:center; gap:8px; color:#5d6b84; font-size:8px; letter-spacing:.12em; font-weight:800; } .qnx-ai-flow-status i{ width:6px; height:6px; border-radius:50%; background:#79c91c; box-shadow:0 0 10px rgba(121,201,28,.7); } .qnx-ai-content-stack{ position:relative; z-index:2; width:70%; height:190px; } .qnx-ai-content-card{ position:absolute; width:100%; height:145px; border:1px solid #d6e2f0; background:#fff; } .card-back{ top:0; left:-25px; transform:rotate(-5deg); opacity:.45; } .card-mid{ top:10px; left:15px; transform:rotate(3deg); opacity:.75; } .card-front{ top:25px; left:0; padding:24px; box-shadow:0 18px 40px rgba(17,55,110,.1); } .card-front span{ color:#087ee7; font-size:7px; letter-spacing:.15em; font-weight:900; } .card-front strong{ display:block; margin-top:14px; color:#0d1730; font-size:17px; } .qnx-ai-mini-bars{ display:flex; align-items:flex-end; gap:6px; height:35px; margin-top:15px; } .qnx-ai-mini-bars i{ display:block; width:12px; height:15px; background:#087ee7; } .qnx-ai-mini-bars i:nth-child(2){ height:25px; background:#08a8cf; } .qnx-ai-mini-bars i:nth-child(3){ height:33px; background:#b7e51c; } .qnx-ai-code-window{ position:relative; z-index:2; width:74%; min-height:205px; padding:18px; background:#062d7a; border:1px solid rgba(8,126,231,.35); box-shadow:0 25px 50px rgba(6,45,122,.2); } .qnx-ai-code-head{ display:flex; gap:5px; margin-bottom:25px; } .qnx-ai-code-head span{ width:6px; height:6px; border-radius:50%; background:#087ee7; } .qnx-ai-code-head span:last-child{ background:#b7e51c; } .qnx-ai-code-lines i{ display:block; height:6px; margin:11px 0; background:rgba(255,255,255,.15); } .qnx-ai-code-lines .l1{width:72%;background:rgba(8,168,207,.55)} .qnx-ai-code-lines .l2{width:88%} .qnx-ai-code-lines .l3{width:52%;background:rgba(183,229,28,.6)} .qnx-ai-code-lines .l4{width:76%} .qnx-ai-code-lines .l5{width:44%} .qnx-ai-code-lines .l6{width:65%;background:rgba(8,126,231,.65)} .qnx-ai-code-tag{ position:absolute; right:14px; bottom:14px; color:#b7e51c; font-size:7px; letter-spacing:.16em; font-weight:900; } .qnx-ai-architecture{ padding:105px 7vw; background:#f4f8ff; } .qnx-ai-architecture-inner{ max-width:1280px; margin:auto; display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:80px; } .qnx-ai-architecture-copy{ max-width:520px; } .qnx-ai-architecture-copy h2{ margin:16px 0; color:#0d1730; font-size:clamp(43px,4.5vw,62px); line-height:.98; letter-spacing:-.055em; font-weight:300; } .qnx-ai-architecture-copy h2 strong{ color:#0758d8; font-weight:750; } .qnx-ai-architecture-copy p{ margin:0; color:#5d6b84; font-size:15px; line-height:1.8; } .qnx-ai-architecture-map{ position:relative; height:410px; border:1px solid #d9e5f2; background:#fff; overflow:hidden; } .qnx-ai-architecture-map:before, .qnx-ai-architecture-map:after{ content:""; position:absolute; inset:0; background-image: linear-gradient(#e8eef6 1px,transparent 1px), linear-gradient(90deg,#e8eef6 1px,transparent 1px); background-size:42px 42px; opacity:.5; } .qnx-map-center{ position:absolute; z-index:4; left:50%; top:50%; transform:translate(-50%,-50%); width:120px; height:120px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(145deg,#0758d8,#087ee7); color:#fff; box-shadow:0 0 0 15px rgba(7,88,216,.06),0 25px 50px rgba(7,88,216,.2); } .qnx-map-center span{ color:#b7e51c; font-size:8px; letter-spacing:.2em; font-weight:900; } .qnx-map-center strong{ font-size:35px; line-height:1; } .qnx-map-line{ position:absolute; z-index:2; left:50%; top:50%; width:150px; height:1px; transform-origin:left center; background:linear-gradient(90deg,#087ee7,rgba(8,168,207,.15)); } .map-line-one{transform:rotate(0deg)} .map-line-two{transform:rotate(90deg)} .map-line-three{transform:rotate(180deg)} .map-line-four{transform:rotate(270deg)} .qnx-map-node{ position:absolute; z-index:5; padding:11px 15px; background:#fff; border:1px solid #d6e2ef; color:#0d1730; font-size:8px; letter-spacing:.12em; font-weight:900; box-shadow:0 12px 25px rgba(17,55,110,.08); } .map-node-one{top:55px;left:50%;transform:translateX(-50%)} .map-node-two{right:40px;top:50%;transform:translateY(-50%)} .map-node-three{bottom:55px;left:50%;transform:translateX(-50%)} .map-node-four{left:40px;top:50%;transform:translateY(-50%)} .qnx-ai-final{ min-height:480px; padding:90px 7vw; display:grid; place-items:center; text-align:center; color:#fff; background: radial-gradient(circle at 50% 40%,rgba(8,168,207,.2),transparent 30%), linear-gradient(125deg,#062d7a,#0758d8 58%,#087ee7); } .qnx-ai-final-glow{ position:absolute; width:500px; height:500px; border:1px solid rgba(255,255,255,.08); border-radius:50%; box-shadow: 0 0 0 70px rgba(255,255,255,.02), 0 0 0 140px rgba(255,255,255,.015); } .qnx-ai-final-inner{ position:relative; z-index:2; max-width:720px; } .qnx-ai-final-inner>span{ color:#b7e51c; } .qnx-ai-final-inner h2{ margin:17px 0; font-size:clamp(48px,5.5vw,75px); line-height:.94; letter-spacing:-.06em; font-weight:300; } .qnx-ai-final-inner h2 strong{ color:#b7e51c; font-weight:750; } .qnx-ai-final-inner p{ max-width:590px; margin:0 auto; color:rgba(255,255,255,.7); font-size:15px; line-height:1.8; } .qnx-ai-final-inner a{ display:inline-flex; align-items:center; gap:20px; margin-top:30px; padding:16px 21px; color:#062d7a; background:#fff; text-decoration:none; font-size:12px; font-weight:900; transition:.3s ease; } .qnx-ai-final-inner a b{ color:#0758d8; font-size:19px; } .qnx-ai-final-inner a:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.16); } @media(max-width:1050px){ .qnx-ai-intro-inner{ grid-template-columns:1fr; padding-bottom:60px; } .qnx-ai-system{ width:480px; height:440px; } .qnx-ai-bottom-line{ display:none; } .qnx-ai-section-head{ flex-direction:column; align-items:flex-start; } .qnx-ai-capability-stage, .qnx-ai-stage-reverse{ grid-template-columns:65px 1fr; } .qnx-ai-stage-visual{ grid-column:2; } .qnx-ai-architecture-inner{ grid-template-columns:1fr; } } @media(max-width:750px){ .qnx-ai-intro, .qnx-ai-capabilities, .qnx-ai-architecture, .qnx-ai-final{ padding-left:5vw; padding-right:5vw; } .qnx-ai-intro{ padding-top:60px; } .qnx-ai-intro-copy h2{ font-size:45px; } .qnx-ai-system{ width:100%; height:360px; } .qnx-ai-system-core{ width:135px; height:135px; } .qnx-ai-system-core strong{ font-size:39px; } .qnx-ai-ring-one{ width:240px; height:240px; } .qnx-ai-ring-two{ width:320px; height:200px; } .qnx-ai-ring-three{ width:380px; height:140px; } .qnx-ai-signal{ font-size:7px; padding:7px 9px; } .qnx-ai-signal-one{left:0} .qnx-ai-signal-two{right:0} .qnx-ai-signal-three{left:0} .qnx-ai-signal-four{right:0} .qnx-ai-capabilities{ padding-top:75px; padding-bottom:80px; } .qnx-ai-section-head{ margin-bottom:50px; } .qnx-ai-section-head h2{ font-size:39px; } .qnx-ai-capability-stage, .qnx-ai-stage-reverse{ grid-template-columns:1fr; gap:25px; padding:55px 0; } .qnx-ai-stage-label{ flex-direction:row; align-items:center; } .qnx-ai-stage-label b{ writing-mode:initial; transform:none; } .qnx-ai-stage-visual{ grid-column:auto; min-height:260px; } .qnx-ai-link-row a{ font-size:9px; } .qnx-ai-architecture{ padding-top:75px; padding-bottom:75px; } .qnx-ai-architecture-copy h2{ font-size:41px; } .qnx-ai-architecture-map{ height:340px; } .qnx-map-node{ font-size:7px; padding:9px 10px; } .map-node-two{right:10px} .map-node-four{left:10px} .qnx-ai-final{ min-height:420px; } .qnx-ai-final-inner h2{ font-size:47px; } } @media(max-width:480px){ .qnx-ai-actions{ flex-wrap:wrap; } .qnx-ai-system{ height:300px; } .qnx-ai-ring-one{ width:205px; height:205px; } .qnx-ai-ring-two{ width:270px; height:165px; } .qnx-ai-ring-three{ width:320px; height:120px; } .qnx-ai-signal{ transform:scale(.86); } .qnx-ai-signal-one{top:30px} .qnx-ai-signal-two{top:12px} .qnx-ai-signal-three{bottom:30px} .qnx-ai-signal-four{bottom:12px} .qnx-ai-stage-visual{ min-height:230px; } .qnx-ai-flow-node{ width:58px; height:58px; font-size:7px; } .qnx-ai-flow-node.active{ width:72px; height:72px; } .qnx-ai-search-window{ width:84%; } .qnx-ai-content-stack{ width:78%; } .qnx-ai-code-window{ width:82%; } .qnx-ai-architecture-map{ height:300px; } .qnx-map-center{ width:95px; height:95px; } .qnx-map-center strong{ font-size:28px; } .qnx-map-line{ width:105px; } .qnx-ai-final-inner h2{ font-size:43px; } } /* ========================================================= QNIX DIGITAL — PORTFOLIO ========================================================= */ .qnx-portfolio-intro, .qnx-portfolio-showcase, .qnx-portfolio-cta{ position:relative; overflow:hidden; } .qnx-portfolio-intro{ padding:76px 6vw 72px; background: radial-gradient(circle at 80% 35%,rgba(8,168,207,.18),transparent 27%), linear-gradient(135deg,#062d7a,#0758d8 62%,#087ee7); color:#fff; } .qnx-portfolio-intro-grid{ position:absolute; inset:0; opacity:.12; background-image: linear-gradient(rgba(255,255,255,.3) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.3) 1px,transparent 1px); background-size:70px 70px; mask-image:linear-gradient(to right,transparent,#000 25%,#000 75%,transparent); } .qnx-portfolio-intro-inner{ position:relative; z-index:2; max-width:1320px; margin:auto; display:grid; grid-template-columns:1fr .42fr; gap:70px; align-items:end; } .qnx-portfolio-intro-copy{ max-width:800px; } .qnx-portfolio-eyebrow{ display:inline-flex; align-items:center; gap:10px; color:#b7e51c; font-size:10px; font-weight:900; letter-spacing:2.5px; } .qnx-portfolio-eyebrow:before{ content:""; width:28px; height:2px; background:#b7e51c; } .qnx-portfolio-intro h2{ margin:17px 0 21px; font-size:clamp(43px,5.3vw,75px); line-height:.98; letter-spacing:-3.5px; } .qnx-portfolio-intro h2 span{ color:#b7e51c; } .qnx-portfolio-intro p{ max-width:650px; margin:0; color:rgba(255,255,255,.76); font-size:15px; line-height:1.8; } .qnx-portfolio-intro-side{ min-height:170px; padding-left:30px; border-left:1px solid rgba(255,255,255,.2); display:flex; flex-direction:column; justify-content:space-between; } .qnx-portfolio-count strong{ display:block; color:#fff; font-size:10px; letter-spacing:2px; } .qnx-portfolio-count span{ display:block; margin-top:8px; color:rgba(255,255,255,.55); font-size:12px; } .qnx-portfolio-scroll{ display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.55); font-size:9px; letter-spacing:1.7px; } .qnx-portfolio-scroll span{ width:32px; height:1px; background:#b7e51c; } .qnx-portfolio-showcase{ background:#f4f8ff; padding:82px 6vw 90px; } .qnx-portfolio-filter-wrap{ max-width:1320px; margin:0 auto 48px; display:flex; justify-content:space-between; align-items:end; gap:40px; } .qnx-portfolio-filter-heading > span{ color:#0758d8; font-size:9px; font-weight:900; letter-spacing:2px; } .qnx-portfolio-filter-heading h2{ margin:8px 0 0; color:#0d1730; font-size:37px; letter-spacing:-1.7px; } .qnx-portfolio-filters{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; } .qnx-portfolio-filter{ border:1px solid #dce6f3; background:#fff; color:#5d6b84; padding:10px 14px; border-radius:30px; font-family:inherit; font-size:10px; font-weight:800; cursor:pointer; transition:.25s ease; } .qnx-portfolio-filter:hover{ color:#0758d8; border-color:#087ee7; } .qnx-portfolio-filter.active{ background:#0758d8; border-color:#0758d8; color:#fff; box-shadow:0 8px 20px rgba(7,88,216,.16); } .qnx-portfolio-grid{ max-width:1320px; margin:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:38px 30px; } .qnx-portfolio-item{ min-width:0; transition:opacity .3s ease,transform .3s ease; } .qnx-portfolio-item.is-hidden{ display:none; } .qnx-project-preview{ position:relative; height:455px; overflow:hidden; border-radius:8px; background:#062d7a; border:1px solid #dce6f3; box-shadow:0 16px 42px rgba(17,55,110,.08); } .qnx-project-browser{ position:absolute; z-index:5; top:0; left:0; right:0; height:32px; display:flex; align-items:center; gap:5px; padding-left:13px; background:rgba(6,45,122,.94); border-bottom:1px solid rgba(255,255,255,.1); } .qnx-project-browser span{ width:6px; height:6px; border-radius:50%; background:#08a8cf; } .qnx-project-browser span:nth-child(2){ background:#087ee7; } .qnx-project-browser span:nth-child(3){ background:#79c91c; } .qnx-project-image{ position:absolute; inset:32px 0 0; overflow:hidden; background:#fff; } .qnx-project-image img{ display:block; width:100%; height:auto; min-height:100%; object-fit:cover; object-position:top center; transition:transform 18s cubic-bezier(.16,1,.3,1); } .qnx-portfolio-item:hover .qnx-project-image img{ transform:translateY( calc(-1 * (100% - 423px)) ); } .qnx-project-hover{ position:absolute; z-index:6; left:20px; right:20px; bottom:20px; display:flex; align-items:center; justify-content:space-between; padding:11px 13px 11px 16px; border:1px solid rgba(255,255,255,.18); background:rgba(6,45,122,.84); backdrop-filter:blur(12px); color:#fff; opacity:0; transform:translateY(12px); transition:.35s ease; } .qnx-portfolio-item:hover .qnx-project-hover{ opacity:1; transform:translateY(0); } .qnx-project-hover span{ font-size:9px; letter-spacing:1.5px; font-weight:900; } .qnx-project-hover b{ width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#b7e51c; color:#0d1730; font-size:14px; } .qnx-project-info{ padding:21px 4px 0; } .qnx-project-meta{ display:flex; gap:7px; flex-wrap:wrap; } .qnx-project-meta span{ padding:6px 9px; border:1px solid #dce6f3; background:#fff; color:#0758d8; border-radius:3px; font-size:8px; font-weight:900; letter-spacing:1px; } .qnx-project-info h3{ margin:14px 0 8px; color:#0d1730; font-size:25px; letter-spacing:-1px; } .qnx-project-info p{ max-width:580px; margin:0; color:#5d6b84; font-size:13px; line-height:1.7; } .qnx-project-info a{ display:inline-flex; align-items:center; gap:12px; margin-top:16px; color:#0758d8; text-decoration:none; font-size:11px; font-weight:900; } .qnx-project-info a span{ font-size:17px; transition:.25s ease; } .qnx-project-info a:hover span{ transform:translateX(5px); } .qnx-portfolio-note{ max-width:1320px; margin:48px auto 0; padding-top:20px; border-top:1px solid #dce6f3; display:flex; align-items:center; gap:12px; } .qnx-portfolio-note span{ width:7px; height:7px; border-radius:50%; background:#79c91c; box-shadow:0 0 12px rgba(121,201,28,.45); } .qnx-portfolio-note p{ margin:0; color:#5d6b84; font-size:11px; } .qnx-portfolio-cta{ padding:88px 6vw; background: radial-gradient(circle at 78% 30%,rgba(8,168,207,.18),transparent 28%), linear-gradient(130deg,#062d7a,#0758d8 58%,#087ee7); color:#fff; text-align:center; } .qnx-portfolio-cta-inner{ position:relative; z-index:2; max-width:820px; margin:auto; } .qnx-portfolio-cta h2{ margin:17px 0 18px; font-size:clamp(39px,5vw,65px); line-height:1; letter-spacing:-3px; } .qnx-portfolio-cta h2 span{ color:#b7e51c; } .qnx-portfolio-cta p{ max-width:620px; margin:auto; color:rgba(255,255,255,.72); font-size:14px; line-height:1.8; } .qnx-portfolio-cta a{ display:inline-flex; align-items:center; gap:20px; margin-top:30px; padding:14px 17px 14px 21px; background:#fff; color:#0758d8; text-decoration:none; font-size:12px; font-weight:900; transition:.3s ease; } .qnx-portfolio-cta a b{ width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#0758d8; color:#fff; } .qnx-portfolio-cta a:hover{ transform:translateY(-3px); box-shadow:0 16px 35px rgba(0,0,0,.18); } @media(max-width:1000px){ .qnx-portfolio-intro-inner{ grid-template-columns:1fr; gap:35px; } .qnx-portfolio-intro-side{ min-height:auto; padding:20px 0 0; border-left:0; border-top:1px solid rgba(255,255,255,.18); flex-direction:row; align-items:center; } .qnx-portfolio-filter-wrap{ align-items:flex-start; flex-direction:column; gap:25px; } .qnx-portfolio-filters{ justify-content:flex-start; } .qnx-portfolio-grid{ grid-template-columns:1fr; max-width:760px; } } @media(max-width:650px){ .qnx-portfolio-intro{ padding:58px 5vw 55px; } .qnx-portfolio-intro h2{ font-size:42px; letter-spacing:-2.2px; } .qnx-portfolio-intro p{ font-size:13px; } .qnx-portfolio-intro-side{ flex-direction:column; align-items:flex-start; gap:22px; } .qnx-portfolio-showcase{ padding:62px 5vw 70px; } .qnx-portfolio-filter-heading h2{ font-size:32px; } .qnx-portfolio-filters{ gap:6px; } .qnx-portfolio-filter{ padding:8px 11px; font-size:9px; } .qnx-portfolio-grid{ gap:35px; } .qnx-project-preview{ height:390px; } .qnx-portfolio-item:hover .qnx-project-image img{ transform:translateY( calc(-1 * (100% - 358px)) ); } .qnx-project-hover{ opacity:1; transform:none; bottom:14px; left:14px; right:14px; } .qnx-project-info h3{ font-size:23px; } .qnx-portfolio-cta{ padding:68px 5vw; } .qnx-portfolio-cta h2{ font-size:41px; letter-spacing:-2px; } } @media(max-width:430px){ .qnx-portfolio-intro h2{ font-size:37px; } .qnx-project-preview{ height:350px; } .qnx-portfolio-item:hover .qnx-project-image img{ transform:translateY( calc(-1 * (100% - 318px)) ); } .qnx-project-info h3{ font-size:21px; } .qnx-portfolio-cta h2{ font-size:36px; } } /* ========================================================= QNIX DIGITAL — 404 PAGE ========================================================= */ .qnx-404{ --blue:#0758d8; --blue2:#087ee7; --deep:#062d7a; --teal:#10a4b4; --green:#16b98a; --lime:#b7e51c; --ink:#0d1730; --muted:#5d6b84; --line:#e3eaf4; --soft:#f4f8ff; position:relative; min-height:650px; overflow:hidden; background: radial-gradient(circle at 78% 35%, rgba(8,168,207,.10), transparent 27%), radial-gradient(circle at 15% 75%, rgba(7,88,216,.07), transparent 28%), linear-gradient(135deg,#ffffff 0%,#f7faff 52%,#eef6ff 100%); display:flex; align-items:center; isolation:isolate; } .qnx-404-grid{ position:absolute; inset:0; opacity:.52; background-image: linear-gradient(rgba(7,88,216,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(7,88,216,.045) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 80%,transparent 100%); pointer-events:none; } .qnx-404-glow{ position:absolute; border-radius:50%; filter:blur(4px); pointer-events:none; } .qnx-404-glow-one{ width:300px; height:300px; right:-120px; top:-100px; background:rgba(8,126,231,.08); } .qnx-404-glow-two{ width:240px; height:240px; left:-110px; bottom:-120px; background:rgba(16,164,180,.07); } .qnx-404-wrap{ position:relative; z-index:2; width:min(1180px,92%); margin:0 auto; display:grid; grid-template-columns:46% 54%; align-items:center; gap:30px; padding:72px 0 65px; } .qnx-404-visual{ position:relative; width:410px; height:410px; margin:auto; display:flex; align-items:center; justify-content:center; } .qnx-404-orbit{ position:absolute; border:1px solid rgba(7,88,216,.13); border-radius:50%; transform:rotate(-18deg); } .orbit-one{ width:285px; height:285px; } .orbit-two{ width:350px; height:190px; border-color:rgba(8,168,207,.19); transform:rotate(36deg); } .orbit-three{ width:395px; height:250px; border-color:rgba(123,197,31,.15); transform:rotate(-42deg); } .qnx-404-core{ position:relative; width:205px; height:205px; border-radius:50%; background: radial-gradient(circle at 35% 30%,#1685ea 0%,#0758d8 42%,#062d7a 100%); box-shadow: 0 28px 65px rgba(7,88,216,.25), inset 0 0 0 1px rgba(255,255,255,.20); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; z-index:3; } .qnx-404-core:before{ content:""; position:absolute; inset:13px; border:1px solid rgba(255,255,255,.18); border-radius:50%; } .qnx-404-core-line{ position:absolute; width:42px; height:2px; top:48px; background:linear-gradient(90deg,transparent,#b7e51c,transparent); } .qnx-404-core strong{ font-size:68px; line-height:1; letter-spacing:-4px; font-weight:800; } .qnx-404-core small{ margin-top:8px; font-size:9px; letter-spacing:2.6px; color:#d9efff; font-weight:700; } .qnx-404-node{ position:absolute; width:9px; height:9px; border-radius:50%; background:#b7e51c; box-shadow:0 0 0 5px rgba(183,229,28,.10),0 0 18px rgba(183,229,28,.35); z-index:5; } .node-one{ top:63px; left:91px; } .node-two{ right:56px; top:137px; background:#08a8cf; box-shadow:0 0 0 5px rgba(8,168,207,.10),0 0 18px rgba(8,168,207,.30); } .node-three{ bottom:68px; left:113px; } .node-four{ left:55px; top:196px; background:#087ee7; box-shadow:0 0 0 5px rgba(8,126,231,.10),0 0 18px rgba(8,126,231,.30); } .qnx-404-content{ max-width:570px; padding-left:15px; } .qnx-404-kicker{ display:inline-flex; align-items:center; gap:9px; font-size:11px; font-weight:800; letter-spacing:2.1px; color:var(--blue); margin-bottom:18px; } .qnx-404-kicker i{ width:25px; height:2px; display:block; background:linear-gradient(90deg,var(--blue),var(--lime)); } .qnx-404-content h2{ margin:0; color:var(--ink); font-size:clamp(43px,5vw,68px); line-height:1.02; letter-spacing:-3.2px; font-weight:800; max-width:620px; } .qnx-404-content h2 span{ display:block; background:linear-gradient(90deg,var(--blue),var(--blue2),var(--teal)); -webkit-background-clip:text; background-clip:text; color:transparent; } .qnx-404-content p{ margin:22px 0 0; max-width:520px; color:var(--muted); font-size:16px; line-height:1.75; } .qnx-404-actions{ display:flex; align-items:center; gap:14px; margin-top:30px; flex-wrap:wrap; } .qnx-404-primary, .qnx-404-secondary{ text-decoration:none; transition:.3s ease; } .qnx-404-primary{ display:inline-flex; align-items:center; gap:18px; padding:14px 18px 14px 21px; border-radius:10px; color:#fff; background:linear-gradient(110deg,var(--deep),var(--blue),var(--blue2)); box-shadow:0 14px 30px rgba(7,88,216,.19); font-size:13px; font-weight:750; } .qnx-404-primary b{ width:31px; height:31px; display:grid; place-items:center; border-radius:7px; background:rgba(255,255,255,.14); font-size:15px; font-weight:500; } .qnx-404-primary:hover{ transform:translateY(-3px); box-shadow:0 18px 35px rgba(7,88,216,.25); } .qnx-404-secondary{ display:inline-flex; align-items:center; gap:9px; padding:13px 4px; color:var(--ink); font-size:13px; font-weight:750; border-bottom:1px solid rgba(7,88,216,.22); } .qnx-404-secondary b{ color:var(--blue); font-size:17px; transition:.3s ease; } .qnx-404-secondary:hover{ color:var(--blue); } .qnx-404-secondary:hover b{ transform:translateX(5px); } .qnx-404-path{ display:flex; align-items:center; gap:9px; margin-top:34px; font-size:10px; letter-spacing:1px; color:#8190a7; text-transform:uppercase; } .qnx-404-path i{ width:26px; height:1px; background:var(--line); } .path-dot{ width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(183,229,28,.12); } .qnx-404-bottom{ position:absolute; z-index:3; bottom:20px; left:50%; transform:translateX(-50%); width:min(1180px,92%); display:flex; align-items:center; gap:10px; color:#8390a5; font-size:10px; letter-spacing:.7px; } .qnx-404-bottom span:first-child{ color:var(--blue); font-weight:800; } .qnx-404-bottom i{ width:25px; height:1px; background:var(--line); } @media(max-width:900px){ .qnx-404{ min-height:auto; } .qnx-404-wrap{ grid-template-columns:1fr; padding:55px 0 70px; text-align:center; } .qnx-404-visual{ width:350px; height:350px; order:1; } .qnx-404-content{ order:2; padding-left:0; margin:auto; } .qnx-404-kicker{ justify-content:center; } .qnx-404-content h2{ margin:auto; } .qnx-404-content p{ margin-left:auto; margin-right:auto; } .qnx-404-actions{ justify-content:center; } .qnx-404-path{ justify-content:center; } .qnx-404-bottom{ justify-content:center; position:relative; left:auto; bottom:auto; transform:none; padding:0 0 22px; margin:auto; } } @media(max-width:560px){ .qnx-404-wrap{ width:88%; padding:40px 0 55px; } .qnx-404-visual{ width:290px; height:290px; } .qnx-404-core{ width:155px; height:155px; } .qnx-404-core strong{ font-size:51px; } .qnx-404-core small{ font-size:7px; letter-spacing:2px; } .orbit-one{ width:215px; height:215px; } .orbit-two{ width:275px; height:145px; } .orbit-three{ width:295px; height:185px; } .node-one{ top:48px; left:62px; } .node-two{ right:35px; top:102px; } .node-three{ bottom:48px; left:79px; } .node-four{ left:35px; top:145px; } .qnx-404-content h2{ font-size:40px; letter-spacing:-2px; } .qnx-404-content p{ font-size:14px; line-height:1.65; margin-top:18px; } .qnx-404-actions{ flex-direction:column; align-items:center; margin-top:25px; } .qnx-404-primary{ width:100%; max-width:245px; justify-content:space-between; } .qnx-404-secondary{ margin-top:2px; } .qnx-404-path{ margin-top:27px; font-size:8px; } .qnx-404-bottom{ width:88%; font-size:8px; gap:7px; } } /* ========================================================= QNIX DIGITAL — SITEMAP MIDDLE SECTION ========================================================= */ .qdx-sitemap-section { position: relative; padding: 78px 0 90px; overflow: hidden; background: radial-gradient(circle at 5% 18%, rgba(8,168,207,.06), transparent 25%), radial-gradient(circle at 95% 48%, rgba(22,185,138,.05), transparent 25%), #f8fbff; } .qdx-sitemap-container { width: min(1240px, calc(100% - 48px)); margin: 0 auto; } .qdx-sitemap-intro { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 60px; align-items: end; margin-bottom: 42px; } .qdx-sitemap-intro-copy { max-width: 760px; } .qdx-sitemap-eyebrow { display: inline-block; margin-bottom: 13px; color: #0758d8; font-size: 10px; font-weight: 900; letter-spacing: .16em; } .qdx-sitemap-intro h2 { margin: 0; color: #0d1730; font-size: clamp(34px,4.2vw,58px); line-height: 1.02; letter-spacing: -.045em; } .qdx-sitemap-intro h2 span { display: block; background: linear-gradient( 90deg, #0758d8, #087ee7, #08a8cf, #16b98a ); -webkit-background-clip: text; background-clip: text; color: transparent; } .qdx-sitemap-intro-copy p { max-width: 700px; margin: 20px 0 0; color: #5d6b84; font-size: 15px; line-height: 1.75; } .qdx-sitemap-intro-stats { display: flex; gap: 10px; } .qdx-sitemap-stat { min-width: 110px; padding: 18px; border: 1px solid #e3eaf4; border-radius: 16px; background: #fff; box-shadow: 0 12px 35px rgba(17,55,110,.06); } .qdx-sitemap-stat strong { display: block; color: #0758d8; font-size: 30px; line-height: 1; } .qdx-sitemap-stat span { display: block; margin-top: 7px; color: #5d6b84; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } /* SEARCH */ .qdx-sitemap-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 12px; } .qdx-sitemap-search { position: relative; width: min(440px,100%); } .qdx-sitemap-search svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: #0758d8; stroke-width: 1.8; } .qdx-sitemap-search input { width: 100%; height: 50px; padding: 0 45px 0 47px; border: 1px solid #e3eaf4; border-radius: 12px; outline: none; background: #fff; color: #0d1730; font: inherit; font-size: 13px; box-shadow: 0 10px 30px rgba(17,55,110,.05); transition: .25s ease; } .qdx-sitemap-search input:focus { border-color: rgba(7,88,216,.35); box-shadow: 0 0 0 4px rgba(7,88,216,.07); } .qdx-sitemap-search-clear { position: absolute; right: 9px; top: 50%; width: 30px; height: 30px; transform: translateY(-50%); border: 0; border-radius: 8px; background: transparent; color: #5d6b84; font-size: 20px; cursor: pointer; opacity: 0; pointer-events: none; } .qdx-sitemap-search-clear.is-visible { opacity: 1; pointer-events: auto; } .qdx-sitemap-toolbar-actions { display: flex; gap: 8px; } .qdx-sitemap-toolbar-actions button { height: 38px; padding: 0 13px; border: 1px solid #e3eaf4; border-radius: 9px; background: #fff; color: #5d6b84; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; transition: .2s ease; } .qdx-sitemap-toolbar-actions button:hover { color: #0758d8; border-color: rgba(7,88,216,.25); background: #f4f8ff; } .qdx-sitemap-result { min-height: 34px; padding: 7px 12px; border-left: 3px solid #08a8cf; background: linear-gradient( 90deg, rgba(8,168,207,.07), transparent ); color: #5d6b84; font-size: 11px; font-weight: 700; } /* HOME */ .qdx-sitemap-home { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin: 14px 0 18px; padding: 20px 23px; border: 1px solid rgba(7,88,216,.14); border-radius: 18px; background: #fff; text-decoration: none; box-shadow: 0 13px 38px rgba(17,55,110,.055); transition: .25s ease; } .qdx-sitemap-home:hover { transform: translateY(-2px); border-color: rgba(7,88,216,.25); box-shadow: 0 20px 45px rgba(17,55,110,.08); } .qdx-sitemap-home-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: linear-gradient( 135deg, #0758d8, #087ee7, #08a8cf ); } .qdx-sitemap-home-icon svg { width: 25px; height: 25px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .qdx-sitemap-home-content small { display: block; margin-bottom: 4px; color: #0758d8; font-size: 8px; font-weight: 900; letter-spacing: .13em; } .qdx-sitemap-home-content strong { display: block; color: #0d1730; font-size: 20px; } .qdx-sitemap-home-content span { display: block; margin-top: 3px; color: #8995a8; font-family: monospace; font-size: 9px; } .qdx-sitemap-arrow { color: #0758d8; font-size: 22px; } /* GRID */ .qdx-sitemap-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; } .qdx-sitemap-card { overflow: hidden; border: 1px solid #e3eaf4; border-radius: 17px; background: #fff; box-shadow: 0 10px 30px rgba(17,55,110,.04); transition: .25s ease; } .qdx-sitemap-card:hover { border-color: rgba(7,88,216,.18); box-shadow: 0 18px 40px rgba(17,55,110,.07); } .qdx-sitemap-card summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 82px; padding: 16px 18px; cursor: pointer; list-style: none; } .qdx-sitemap-card summary::-webkit-details-marker { display: none; } .qdx-sitemap-card-title { display: flex; align-items: center; gap: 12px; min-width: 0; } .qdx-sitemap-number { display: grid; place-items: center; flex: 0 0 auto; width: 37px; height: 37px; border-radius: 10px; background: #f4f8ff; color: #0758d8; font-size: 10px; font-weight: 900; } .qdx-sitemap-card-title small { display: block; margin-bottom: 3px; color: #0758d8; font-size: 8px; font-weight: 900; letter-spacing: .11em; } .qdx-sitemap-card-title h3 { margin: 0; color: #0d1730; font-size: 16px; line-height: 1.2; letter-spacing: -.02em; } .qdx-sitemap-card-meta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .qdx-sitemap-card-meta span { color: #5d6b84; font-size: 9px; font-weight: 800; } .qdx-sitemap-card-meta i { width: 9px; height: 9px; border-right: 1.5px solid #0758d8; border-bottom: 1.5px solid #0758d8; transform: rotate(45deg); transition: .25s ease; } .qdx-sitemap-card[open] .qdx-sitemap-card-meta i { transform: rotate(225deg); } .qdx-sitemap-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 6px 10px 12px; border-top: 1px solid #e3eaf4; } .qdx-sitemap-links a { display: flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 8px 11px; border-radius: 8px; text-decoration: none; transition: .2s ease; } .qdx-sitemap-links a:hover { background: #f4f8ff; transform: translateX(2px); } .qdx-sitemap-links a span { color: #0d1730; font-size: 11px; font-weight: 750; line-height: 1.35; } .qdx-sitemap-links a:hover span { color: #0758d8; } .qdx-sitemap-links a small { margin-top: 3px; color: #8a96aa; font-family: monospace; font-size: 8px; } .qdx-sitemap-links a.is-hidden { display: none; } .qdx-sitemap-card.qdx-sitemap-filtered-out { display: none; } /* NO RESULTS */ .qdx-sitemap-no-results { margin-top: 18px; padding: 45px 20px; border: 1px dashed rgba(7,88,216,.22); border-radius: 17px; background: #fff; text-align: center; } .qdx-sitemap-no-results[hidden] { display: none; } .qdx-sitemap-no-results-icon { margin-bottom: 10px; color: #0758d8; font-size: 30px; } .qdx-sitemap-no-results h3 { margin: 0; color: #0d1730; font-size: 21px; } .qdx-sitemap-no-results p { margin: 7px 0 16px; color: #5d6b84; font-size: 12px; } .qdx-sitemap-no-results button { padding: 10px 15px; border: 0; border-radius: 9px; background: #0758d8; color: #fff; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; } /* BOTTOM */ .qdx-sitemap-bottom { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 22px; padding: 24px 27px; border-radius: 18px; background: linear-gradient( 115deg, #062d7a, #0758d8 48%, #087ee7 76%, #08a8cf ); box-shadow: 0 18px 45px rgba(7,88,216,.15); } .qdx-sitemap-bottom-copy > span { color: #b7e51c; font-size: 8px; font-weight: 900; letter-spacing: .15em; } .qdx-sitemap-bottom-copy h3 { margin: 5px 0 3px; color: #fff; font-size: 18px; } .qdx-sitemap-bottom-copy p { margin: 0; color: rgba(255,255,255,.7); font-size: 11px; } .qdx-sitemap-bottom > a { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; background: rgba(255,255,255,.09); color: #fff; font-size: 10px; font-weight: 800; text-decoration: none; white-space: nowrap; transition: .2s ease; } .qdx-sitemap-bottom > a:hover { background: rgba(255,255,255,.17); transform: translateY(-2px); color: #fff; } /* RESPONSIVE */ @media (max-width: 900px) { .qdx-sitemap-intro { grid-template-columns: 1fr; gap: 25px; } .qdx-sitemap-grid { grid-template-columns: 1fr; } } @media (max-width: 650px) { .qdx-sitemap-section { padding: 55px 0 65px; } .qdx-sitemap-container { width: calc(100% - 28px); } .qdx-sitemap-intro h2 { font-size: 34px; } .qdx-sitemap-intro-copy p { font-size: 13px; } .qdx-sitemap-intro-stats { width: 100%; } .qdx-sitemap-stat { flex: 1; } .qdx-sitemap-toolbar { flex-direction: column; align-items: stretch; } .qdx-sitemap-search { width: 100%; } .qdx-sitemap-toolbar-actions { width: 100%; } .qdx-sitemap-toolbar-actions button { flex: 1; } .qdx-sitemap-home { grid-template-columns: auto 1fr; } .qdx-sitemap-arrow { display: none; } .qdx-sitemap-links { grid-template-columns: 1fr; } .qdx-sitemap-card-meta span { display: none; } .qdx-sitemap-bottom { align-items: flex-start; flex-direction: column; } .qdx-sitemap-bottom > a { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .qdx-sitemap-section *, .qdx-sitemap-section *::before, .qdx-sitemap-section *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ========================================= QNIX DIGITAL — TOPBAR LOCATION ========================================= */ .location-pin { width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 17px; } .location-pin svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ========================================= QNIX DIGITAL — TOPBAR SOCIAL ICONS ========================================= */ .social-mini { display: flex; align-items: center; gap: 7px; } .social-mini a { width: 27px; height: 27px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #fff; text-decoration: none; transition: transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease; } .social-mini a svg { width: 13px; height: 13px; fill: currentColor; stroke: none; } .social-mini a:hover { background: #087ee7; border-color: #087ee7; color: #fff; transform: translateY(-2px); } .social-mini a:focus-visible { outline: 2px solid #79c91c; outline-offset: 2px; } /* Instagram — 3rd icon */ .social-mini a:nth-child(3) svg { fill: none; stroke: currentColor; stroke-width: 1.8; } .social-mini a:nth-child(3) svg circle:last-child { fill: currentColor; stroke: none; } /* LinkedIn — 4th icon */ .social-mini a:nth-child(4) svg { fill: currentColor; } /* YouTube — 5th icon */ .social-mini a:nth-child(5) svg { fill: none; stroke: currentColor; stroke-width: 1.7; } .social-mini a:nth-child(5) .yt-play { fill: currentColor; stroke: none; } /* ========================================= RESPONSIVE ========================================= */ @media (max-width: 900px) { .welcome > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; } } @media (max-width: 700px) { .social-mini { gap: 5px; } .social-mini a { width: 25px; height: 25px; } .social-mini a svg { width: 12px; height: 12px; } } /* ========================================================= QNIX DIGITAL COMPLETE PREMIUM FOOTER ========================================================= */ .qnix-footer{ --qnix-deep:#06388F; --qnix-blue:#0758D8; --qnix-electric:#087EE7; --qnix-cyan:#08A8CF; --qnix-green:#16B98A; --qnix-lime:#B7E51C; position:relative; overflow:hidden; margin:0; padding:0; background:#06388F; color:#fff; } /* ========================================================= SHELL ========================================================= */ .qnix-footer-shell{ position:relative; width:min(1440px,100%); margin:0 auto; padding:0 42px; } /* ========================================================= TOP AREA ========================================================= */ .qnix-footer-top{ position:relative; display:grid; grid-template-columns: minmax(0,1fr) minmax(460px,1.08fr); gap:28px; min-height:390px; padding:58px 0 42px; border-bottom: 1px solid rgba(255,255,255,.15); } /* ========================================================= BRAND ========================================================= */ .qnix-footer-brand{ position:relative; z-index:4; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding: 15px 30px 15px 8px; } .qnix-footer-logo{ display:inline-flex; align-items:center; text-decoration:none; margin-bottom:26px; } .qnix-footer-logo img{ display:block; width:255px; max-width:100%; height:auto; filter: brightness(0) invert(1); } .qnix-footer-intro{ max-width:535px; margin:0; color: rgba(255,255,255,.78); font-size:16px; line-height:1.85; font-weight:400; } /* ========================================================= SOCIAL ICONS ========================================================= */ .qnix-footer-social{ display:flex; align-items:center; gap:11px; margin-top:30px; } .qnix-footer-social a{ position:relative; display:flex; align-items:center; justify-content:center; width:49px; height:49px; border: 1px solid rgba(255,255,255,.24); border-radius:14px; background: rgba(255,255,255,.08); color:#fff; text-decoration:none; transition: transform .28s ease, background .28s ease, border-color .28s ease, color .28s ease, box-shadow .28s ease; } .qnix-footer-social svg{ display:block; width:21px; height:21px; fill:currentColor; stroke:currentColor; stroke-width:1.5; } .qnix-footer-social a:hover{ transform: translateY(-5px); background: #B7E51C; border-color: #B7E51C; color: #06388F; box-shadow: 0 12px 28px rgba(183,229,28,.28); } /* ========================================================= CREATIVE VISUAL ========================================================= */ /* ========================================================= QNIX DIGITAL — PREMIUM EXPERIENCE PULSE ========================================================= */ .qnix-rating-visual { position: relative; width: 100%; min-height: 285px; overflow: hidden; isolation: isolate; border: 1px solid rgba(8, 168, 207, .34); border-radius: 24px; background: radial-gradient( circle at 88% 18%, rgba(8, 168, 207, .28), transparent 34% ), radial-gradient( circle at 12% 88%, rgba(7, 88, 216, .34), transparent 38% ), linear-gradient( 125deg, #062d7a 0%, #0758d8 48%, #087ee7 76%, #08a8cf 100% ); box-shadow: 0 24px 55px rgba(6, 45, 122, .20), inset 0 1px 0 rgba(255,255,255,.18); transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease; } .qnix-rating-visual:hover { transform: translateY(-3px); border-color: rgba(183, 229, 28, .48); box-shadow: 0 30px 65px rgba(6, 45, 122, .26), 0 0 45px rgba(8, 168, 207, .14), inset 0 1px 0 rgba(255,255,255,.20); } /* BACKGROUND GRID */ .qnix-rating-bg-grid { position: absolute; inset: 0; z-index: -3; opacity: .17; pointer-events: none; background-image: linear-gradient( rgba(255,255,255,.32) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.32) 1px, transparent 1px ); background-size: 44px 44px; mask-image: linear-gradient( 90deg, transparent 0%, #000 18%, #000 82%, transparent 100% ); } /* GLOW ORBS */ .qnix-rating-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(4px); z-index: -2; } .qnix-rating-glow-one { width: 180px; height: 180px; right: -65px; top: -70px; background: radial-gradient( circle, rgba(183,229,28,.20) 0%, rgba(8,168,207,.12) 38%, transparent 70% ); animation: qnixRatingFloatOne 7s ease-in-out infinite; } .qnix-rating-glow-two { width: 230px; height: 230px; left: -120px; bottom: -150px; background: radial-gradient( circle, rgba(8,168,207,.26) 0%, transparent 68% ); animation: qnixRatingFloatTwo 9s ease-in-out infinite; } /* LARGE Q — DECORATIVE, NOT DOMINANT */ .qnix-rating-mark { position: absolute; right: 31%; top: 50%; width: 180px; height: 180px; transform: translate(50%, -50%) rotate(-8deg); pointer-events: none; z-index: -1; opacity: .075; } .qnix-rating-mark span { display: block; font-size: 210px; line-height: .8; font-weight: 900; letter-spacing: -18px; color: #fff; text-shadow: 0 0 30px rgba(255,255,255,.28); } /* INNER */ .qnix-rating-inner { position: relative; width: 100%; min-height: 285px; padding: 32px 38px; display: flex; align-items: center; } /* NORMAL STATE */ .qnix-rating-normal { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .78fr); align-items: center; gap: 45px; transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); } /* COPY */ .qnix-rating-copy { position: relative; max-width: 510px; } .qnix-rating-brand { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 8px; color: #fff; font-size: 11px; line-height: 1; font-weight: 800; letter-spacing: .20em; } .qnix-rating-brand::before { content: ""; width: 18px; height: 2px; border-radius: 99px; background: linear-gradient( 90deg, #b7e51c, rgba(183,229,28,.15) ); } .qnix-rating-kicker { margin-bottom: 15px; color: rgba(255,255,255,.70); font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; } .qnix-rating-title { margin: 0; color: #fff; font-size: clamp(28px, 3vw, 42px); line-height: 1.04; font-weight: 800; letter-spacing: -.035em; } .qnix-rating-description { max-width: 445px; margin: 15px 0 0; color: rgba(255,255,255,.74); font-size: 13px; line-height: 1.7; } /* RIGHT ACTION */ .qnix-rating-action { min-height: 155px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 26px; border-left: 1px solid rgba(255,255,255,.18); position: relative; } .qnix-rating-action::before { content: ""; position: absolute; inset: 14px 0 14px 0; border-radius: 18px; background: linear-gradient( 135deg, rgba(255,255,255,.09), rgba(255,255,255,.025) ); border: 1px solid rgba(255,255,255,.09); pointer-events: none; } .qnix-rating-label { position: relative; z-index: 2; margin-bottom: 17px; color: rgba(255,255,255,.67); font-size: 9px; font-weight: 800; letter-spacing: .22em; } /* STARS */ .qnix-stars { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; } .qnix-star { width: 43px; height: 43px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.23); border-radius: 12px; background: rgba(255,255,255,.065); color: rgba(255,255,255,.65); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.10); transition: transform .28s cubic-bezier(.2,.8,.2,1), color .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease; } .qnix-star svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform .28s ease, filter .28s ease; } .qnix-star:hover { transform: translateY(-5px) scale(1.07); color: #b7e51c; border-color: rgba(183,229,28,.65); background: rgba(183,229,28,.12); box-shadow: 0 9px 22px rgba(183,229,28,.18), 0 0 18px rgba(183,229,28,.10); } .qnix-star:hover svg { transform: rotate(-5deg) scale(1.08); } .qnix-star.is-hovered { color: #b7e51c; border-color: rgba(183,229,28,.55); background: rgba(183,229,28,.10); } .qnix-star.is-hovered svg { fill: currentColor; filter: drop-shadow( 0 0 8px rgba(183,229,28,.48) ); } .qnix-rating-hint { position: relative; z-index: 2; margin-top: 16px; color: rgba(255,255,255,.53); font-size: 11px; line-height: 1.4; } /* ========================================================= THANK YOU STATE ========================================================= */ .qnix-rating-thankyou { position: absolute; inset: 0; padding: 28px 42px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; opacity: 0; visibility: hidden; transform: scale(.94) translateY(12px); pointer-events: none; transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1), visibility .45s ease; } /* ICON */ .qnix-thankyou-icon { width: 40px; height: 40px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(183,229,28,.55); border-radius: 50%; background: rgba(183,229,28,.12); color: #b7e51c; box-shadow: 0 0 28px rgba(183,229,28,.17); } .qnix-thankyou-icon svg { width: 19px; height: 19px; fill: currentColor; } /* SELECTED RATING */ .qnix-thankyou-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; } .qnix-thankyou-stars { color: #b7e51c; font-size: 17px; letter-spacing: 3px; text-shadow: 0 0 13px rgba(183,229,28,.34); } .qnix-thankyou-score { padding-left: 10px; border-left: 1px solid rgba(255,255,255,.24); color: rgba(255,255,255,.62); font-size: 10px; font-weight: 700; letter-spacing: .10em; } /* THANK YOU COPY */ .qnix-thankyou-kicker { margin-bottom: 8px; color: rgba(255,255,255,.58); font-size: 9px; font-weight: 800; letter-spacing: .23em; } .qnix-thankyou-title { margin: 0; color: #fff; font-size: clamp(27px, 3vw, 39px); line-height: 1.08; font-weight: 800; letter-spacing: -.035em; } .qnix-thankyou-number { color: #b7e51c; text-shadow: 0 0 18px rgba(183,229,28,.24); } .qnix-thankyou-text { max-width: 580px; margin: 11px auto 0; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.65; } /* BOTTOM MICRO LABEL */ .qnix-thankyou-footer { width: min(390px, 75%); margin-top: 17px; display: flex; align-items: center; gap: 12px; } .qnix-thankyou-footer span { flex: 1; height: 1px; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.25) ); } .qnix-thankyou-footer span:last-child { background: linear-gradient( 90deg, rgba(255,255,255,.25), transparent ); } .qnix-thankyou-footer strong { color: rgba(255,255,255,.60); font-size: 8px; font-weight: 800; letter-spacing: .23em; white-space: nowrap; } /* THANK YOU ACTIVE */ .qnix-rating-visual.qnix-rating-thanks .qnix-rating-normal { opacity: 0; transform: scale(.94) translateY(-10px); pointer-events: none; } .qnix-rating-visual.qnix-rating-thanks .qnix-rating-thankyou { opacity: 1; visibility: visible; transform: scale(1) translateY(0); pointer-events: auto; } /* THANK YOU LIGHT SWEEP */ .qnix-rating-visual.qnix-rating-thanks::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 105deg, transparent 20%, rgba(255,255,255,.09) 47%, transparent 70% ); transform: translateX(-100%); animation: qnixRatingSweep 1.1s ease-out forwards; } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes qnixRatingSweep { to { transform: translateX(100%); } } @keyframes qnixRatingFloatOne { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-15px,10px,0) scale(1.08); } } @keyframes qnixRatingFloatTwo { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(18px,-12px,0); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .qnix-rating-inner { padding: 28px; } .qnix-rating-normal { grid-template-columns: minmax(0, 1fr) minmax(250px, .75fr); gap: 25px; } .qnix-rating-action { padding-left: 20px; padding-right: 20px; } .qnix-star { width: 39px; height: 39px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 680px) { .qnix-rating-visual { min-height: 430px; border-radius: 20px; } .qnix-rating-inner { min-height: 430px; padding: 27px 22px; } .qnix-rating-normal { grid-template-columns: 1fr; gap: 22px; text-align: center; } .qnix-rating-copy { max-width: 100%; } .qnix-rating-brand { justify-content: center; } .qnix-rating-title { font-size: 30px; } .qnix-rating-description { margin-left: auto; margin-right: auto; max-width: 390px; } .qnix-rating-action { min-height: 145px; padding: 20px; border-left: 0; border-top: 1px solid rgba(255,255,255,.15); } .qnix-rating-action::before { inset: 7px 0; } .qnix-star { width: 42px; height: 42px; } .qnix-rating-mark { right: 50%; top: 45%; opacity: .055; } .qnix-rating-thankyou { padding: 24px 20px; } .qnix-thankyou-title { font-size: 29px; } .qnix-thankyou-text { max-width: 420px; } .qnix-thankyou-footer { width: 88%; } } /* SMALL MOBILE */ @media (max-width: 420px) { .qnix-rating-visual, .qnix-rating-inner { min-height: 445px; } .qnix-rating-title { font-size: 27px; } .qnix-star { width: 39px; height: 39px; } .qnix-stars { gap: 6px; } .qnix-thankyou-title { font-size: 26px; } .qnix-thankyou-stars { font-size: 15px; } } /* ========================================================= ACCENT DOTS ========================================================= */ .qnix-brand-accent{ position:absolute; right:33px; top:28px; display:flex; gap:7px; } .qnix-brand-accent i{ display:block; width:7px; height:7px; border-radius:50%; background:#B7E51C; } .qnix-brand-accent i:nth-child(2){ opacity:.55; } .qnix-brand-accent i:nth-child(3){ opacity:.25; } /* ========================================================= NAVIGATION ========================================================= */ .qnix-footer-navigation{ display:grid; grid-template-columns: minmax(150px,.72fr) minmax(390px,1.75fr) minmax(180px,.82fr) minmax(160px,.72fr); gap:0; border-bottom: 1px solid rgba(255,255,255,.15); } /* ========================================================= NAV BLOCKS ========================================================= */ .qnix-footer-nav-block, .qnix-footer-services{ min-height:390px; padding: 42px 30px 46px; border-right: 1px solid rgba(255,255,255,.13); } .qnix-footer-nav-block:first-child{ padding-left:8px; } .qnix-footer-nav-block:last-child{ border-right:0; } /* ========================================================= LABEL ========================================================= */ .qnix-footer-label{ position:relative; display:flex; align-items:center; gap:12px; margin-bottom:26px; color: rgba(255,255,255,.55); font-size:11px; font-weight:800; letter-spacing:.18em; } .qnix-footer-label::before{ content:""; width:24px; height:2px; background:#B7E51C; } /* ========================================================= NORMAL LINKS ========================================================= */ .qnix-footer-nav-block a{ position:relative; display:block; width:max-content; max-width:100%; margin: 0 0 15px; color: rgba(255,255,255,.84); text-decoration:none; font-size:14px; line-height:1.4; transition: color .22s ease, transform .22s ease; } .qnix-footer-nav-block a::after{ content:""; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:#B7E51C; transition: width .25s ease; } .qnix-footer-nav-block a:hover{ color:#fff; transform: translateX(4px); } .qnix-footer-nav-block a:hover::after{ width:100%; } /* ========================================================= SERVICES ========================================================= */ .qnix-footer-services{ background: linear-gradient( 180deg, rgba(8,126,231,.18), rgba(8,126,231,.04) ); } .qnix-service-links{ display:grid; grid-template-columns: 1fr 1fr; column-gap:28px; } .qnix-service-links a{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:50px; padding:7px 0; border-bottom: 1px solid rgba(255,255,255,.13); color:#fff; text-decoration:none; font-size:16px; line-height:1.35; font-weight:650; transition: color .25s ease, padding .25s ease; } .qnix-service-links a:nth-child(1), .qnix-service-links a:nth-child(2){ border-top: 1px solid rgba(255,255,255,.13); } .qnix-service-links a:hover{ color:#B7E51C; padding-left:7px; } .qnix-service-links i{ flex:0 0 auto; font-size:17px; font-style:normal; color: rgba(255,255,255,.42); transition: color .25s ease, transform .25s ease; } .qnix-service-links a:hover i{ color:#B7E51C; transform: translate(3px,-3px); } /* ========================================================= CONTACT ========================================================= */ .qnix-footer-contact{ display:grid; grid-template-columns:245px 1fr; gap:40px; align-items:center; padding:34px 8px; border-bottom: 1px solid rgba(255,255,255,.15); } .qnix-contact-heading{ display:flex; flex-direction:column; gap:5px; } .qnix-contact-heading span{ color:#B7E51C; font-size:10px; font-weight:800; letter-spacing:.2em; } .qnix-contact-heading strong{ color:#fff; font-size:25px; font-weight:750; letter-spacing:-.03em; } .qnix-contact-items{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; } .qnix-contact-item{ display:flex; align-items:center; gap:14px; min-height:70px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.13); border-radius:15px; background: rgba(255,255,255,.055); color:#fff; text-decoration:none; transition: transform .25s ease, background .25s ease, border-color .25s ease; } .qnix-contact-item:hover{ transform: translateY(-3px); background: rgba(8,126,231,.30); border-color: rgba(183,229,28,.42); } .qnix-contact-icon{ flex:0 0 39px; width:39px; height:39px; display:flex; align-items:center; justify-content:center; border-radius:11px; background: rgba(183,229,28,.10); color:#B7E51C; } .qnix-contact-icon svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .qnix-contact-item > span:last-child{ min-width:0; color: rgba(255,255,255,.87); font-size:12px; line-height:1.45; } .qnix-contact-item small{ display:block; margin-bottom:3px; color: rgba(255,255,255,.43); font-size:9px; font-weight:800; letter-spacing:.15em; } /* ========================================================= BOTTOM ========================================================= */ .qnix-footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:25px; min-height:82px; padding:0 8px; } .qnix-footer-copy{ color: rgba(255,255,255,.55); font-size:12px; } .qnix-footer-legal{ display:flex; align-items:center; gap:13px; } .qnix-footer-legal a{ color: rgba(255,255,255,.62); text-decoration:none; font-size:12px; transition: color .22s ease; } .qnix-footer-legal a:hover{ color:#B7E51C; } .qnix-footer-legal span{ width:4px; height:4px; border-radius:50%; background:#B7E51C; } /* ========================================================= FLOATING BACK TO TOP ========================================================= */ .qnix-floating-top{ position:fixed; right:28px; bottom:28px; z-index:99999; width:52px; height:52px; display:flex; align-items:center; justify-content:center; border: 1px solid rgba(183,229,28,.60); border-radius:16px; background:#0758D8; color:#B7E51C; box-shadow: 0 12px 30px rgba(6,56,143,.30); opacity:0; visibility:hidden; pointer-events:none; transform: translateY(15px); transition: opacity .3s ease, visibility .3s ease, transform .3s ease, background .25s ease, color .25s ease; } .qnix-floating-top.show{ opacity:1; visibility:visible; pointer-events:auto; transform: translateY(0); } .qnix-floating-top svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .qnix-floating-top:hover{ background:#B7E51C; color:#06388F; transform: translateY(-4px); box-shadow: 0 15px 32px rgba(183,229,28,.30); } /* ========================================================= TABLET ========================================================= */ @media (max-width:1100px){ .qnix-footer-shell{ padding: 0 28px; } .qnix-footer-top{ grid-template-columns:1fr; gap:25px; min-height:auto; } .qnix-footer-brand{ padding-left:0; padding-right:0; } .qnix-footer-visual{ min-height:275px; } .qnix-footer-navigation{ grid-template-columns: 1fr 1.7fr; } .qnix-footer-nav-block, .qnix-footer-services{ min-height:350px; } .qnix-footer-navigation > :nth-child(2){ border-right:0; } .qnix-footer-navigation > :nth-child(3), .qnix-footer-navigation > :nth-child(4){ border-top: 1px solid rgba(255,255,255,.13); } .qnix-footer-contact{ grid-template-columns:1fr; gap:25px; } .qnix-contact-items{ grid-template-columns: repeat(3,1fr); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:720px){ .qnix-footer-shell{ padding: 0 18px; } .qnix-footer-top{ padding: 40px 0 30px; } .qnix-footer-logo img{ width:205px; } .qnix-footer-intro{ font-size:14px; line-height:1.75; } .qnix-footer-social{ margin-top:24px; gap:9px; } .qnix-footer-social a{ width:45px; height:45px; border-radius:13px; } .qnix-footer-visual{ min-height:235px; border-radius:22px; } .qnix-brand-visual-text{ left:24px; top:25px; } .qnix-brand-visual-text strong{ font-size:39px; } .qnix-brand-mark{ right:-35px; bottom:-55px; width:185px; height:185px; } .qnix-brand-mark span{ font-size:175px; } .qnix-footer-navigation{ grid-template-columns:1fr; } .qnix-footer-nav-block, .qnix-footer-services{ min-height:auto; padding: 32px 0; border-right:0; border-bottom: 1px solid rgba(255,255,255,.13); } .qnix-footer-navigation > :nth-child(3), .qnix-footer-navigation > :nth-child(4){ border-top:0; } .qnix-service-links{ grid-template-columns:1fr; column-gap:0; } .qnix-service-links a:nth-child(2){ border-top:0; } .qnix-footer-contact{ padding: 30px 0; } .qnix-contact-items{ grid-template-columns:1fr; gap:10px; } .qnix-footer-bottom{ flex-direction:column; align-items:flex-start; justify-content:center; gap:13px; min-height:100px; padding: 22px 0; } .qnix-footer-legal{ flex-wrap:wrap; } .qnix-floating-top{ right:18px; bottom:18px; width:48px; height:48px; border-radius:14px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:420px){ .qnix-footer-shell{ padding: 0 15px; } .qnix-footer-logo img{ width:190px; } .qnix-footer-visual{ min-height:215px; } .qnix-brand-visual-text strong{ font-size:35px; } .qnix-brand-mark{ width:170px; height:170px; right:-42px; } .qnix-brand-mark span{ font-size:160px; } .qnix-footer-copy, .qnix-footer-legal a{ font-size:11px; } }