:root{--bg:#050b15;--panel:#091424;--line:#173451;--cyan:#12dff3;--blue:#1475ff;--text:#f7fbff;--muted:#9db0c7}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}a{color:inherit;text-decoration:none}header{height:76px;position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:32px;padding:0 5vw;background:rgba(4,10,19,.88);backdrop-filter:blur(18px);border-bottom:1px solid #14283c}.brand{display:flex;align-items:center;font-weight:900;font-size:22px;letter-spacing:-1px}.brand img{width:44px;height:44px;object-fit:contain;margin-right:9px}.brand span span{color:var(--cyan)}nav{display:flex;gap:24px;margin:auto;font-size:14px;color:#c9d6e5}nav a:hover{color:var(--cyan)}.actions{display:flex;gap:10px;align-items:center}select,textarea{background:#091728;color:#fff;border:1px solid #24415f;border-radius:10px;padding:11px}.btn{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(110deg,#1475ff,#13dce9);padding:14px 20px;border-radius:10px;font-weight:800;box-shadow:0 8px 30px #0575ff35;border:0;color:white}.btn.small{padding:10px 15px;font-size:13px}.ghost{display:inline-flex;padding:13px 18px;border:1px solid #31506e;border-radius:10px;color:#d8e5f3}.hero{min-height:660px;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;padding:70px 5vw;position:relative;overflow:hidden;background:radial-gradient(circle at 70% 30%,#063f7135,transparent 35%)}.hero-copy{z-index:2;max-width:700px}.eyebrow,.kicker{color:var(--cyan);font-size:12px;letter-spacing:3px;font-weight:800}.hero h1{font-size:clamp(48px,6vw,86px);line-height:.98;letter-spacing:-4px;margin:20px 0}.hero h1 em{font-style:normal;background:linear-gradient(90deg,#fff,#42dce9,#2b80ff);-webkit-background-clip:text;color:transparent}.hero p,.lead{color:var(--muted);font-size:18px;line-height:1.7}.hero-buttons{display:flex;gap:12px;margin:30px 0}.proof{display:flex;gap:20px;color:#a8bdd2;font-size:13px}.hero-art{position:absolute;right:-13%;width:72%;opacity:.42;mask-image:linear-gradient(90deg,transparent,#000 30%);filter:saturate(1.2)}.hero-art img{width:100%}.trust{display:flex;justify-content:center;gap:30px;padding:24px;border-block:1px solid #132b42;color:#7592ad;letter-spacing:7px;font-size:12px}.trust i{color:var(--cyan)}.section{padding:100px 6vw;max-width:1500px;margin:auto}.section h2{font-size:clamp(38px,5vw,64px);max-width:900px;letter-spacing:-2px;margin:14px 0}.dark{max-width:none;background:#07111e;border-block:1px solid #132b42}.dark>*{max-width:1320px;margin-left:auto;margin-right:auto}.grid{display:grid;gap:18px}.services{grid-template-columns:repeat(3,1fr);margin-top:50px}.services article,.pricing article,.templates article{background:linear-gradient(145deg,#0a1727,#07101c);border:1px solid #18324b;border-radius:18px;padding:28px;transition:.25s}.services article:hover,.templates article:hover{transform:translateY(-5px);border-color:#168ed1}.services b{color:#2c5374}.services h3{font-size:23px}.services p,.pricing p,.templates p{color:var(--muted);line-height:1.6}.services a,.templates a{color:var(--cyan);font-weight:700}.templates{grid-template-columns:repeat(3,1fr);margin-top:45px}.mock{height:230px;border-radius:12px;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;font-size:30px;font-weight:900;letter-spacing:-1px;background:radial-gradient(circle at 80% 20%,#13dcea55,transparent 30%),linear-gradient(135deg,#12253a,#07101a);border:1px solid #1c4462}.mock span{font-size:12px;letter-spacing:2px;color:#b5c8db}.m2{background:radial-gradient(circle at 20% 20%,#176eff55,transparent 30%),linear-gradient(135deg,#101d32,#07101a)}.m3{background:radial-gradient(circle at 50% 30%,#00b6d655,transparent 30%),linear-gradient(135deg,#132538,#07101a)}.templates article>div:last-child{display:flex;justify-content:space-between;align-items:center}.currency-pills{display:flex;gap:8px;margin:30px 0}.currency-pills button{padding:9px 15px;border:1px solid #24425e;background:#081524;color:#b7c8d9;border-radius:30px;cursor:pointer}.currency-pills button.active{background:#0b65d6;color:white;border-color:#21d7e9}.pricing{grid-template-columns:repeat(4,1fr)}.pricing article{position:relative}.pricing article.featured{border-color:#1bd8e9;box-shadow:0 0 40px #0c91e126}.popular{position:absolute;top:-13px;right:20px;background:var(--cyan);color:#031019;padding:6px 10px;border-radius:20px;font-size:10px;font-weight:900}.pricing h3{font-size:45px;margin:10px 0 0}.pricing small{color:#6f8ba6}.pricing ul{list-style:none;padding:0;color:#b6c8d9;line-height:2}.pricing li:before{content:'✓';color:var(--cyan);margin-right:8px}.case{margin-top:45px;border:1px solid #173853;border-radius:22px;padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:40px;background:linear-gradient(120deg,#0b1929,#06101c)}.case h3{font-size:36px}.tags{display:flex;gap:8px;flex-wrap:wrap}.tags i{font-style:normal;border:1px solid #25506d;border-radius:20px;padding:6px 10px;color:#8fc8e6}.dashboard{background:#071523;border:1px solid #1b405d;border-radius:15px;padding:25px}.bar{height:12px;background:linear-gradient(90deg,#18dce9 35%,#1b75ff 35%);border-radius:10px}.stats{display:flex;justify-content:space-between;padding:30px 0;color:#d8f6ff}.chart{height:150px;background:linear-gradient(170deg,transparent 48%,#16ddeb 49%,#16ddeb 51%,transparent 52%),linear-gradient(10deg,transparent 48%,#1575ff 49%,#1575ff 51%,transparent 52%);opacity:.8}.about{display:grid;grid-template-columns:1fr 1fr;gap:80px}.about p{color:var(--muted);font-size:18px;line-height:1.8}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}.metrics b{font-size:24px}.metrics small{display:block;color:#7d98b1;font-size:11px;margin-top:7px}.quote{display:grid;grid-template-columns:1fr 1fr;gap:70px;background:radial-gradient(circle at 70% 50%,#0a5c8d35,transparent 35%)}form{display:grid;gap:14px;background:#091625;border:1px solid #1b3a55;padding:28px;border-radius:18px}label{display:grid;gap:8px;color:#9eb5ca;font-size:13px}textarea{min-height:120px;resize:vertical}.contact{padding:70px 7vw;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(110deg,#0b2340,#06111e);border-top:1px solid #1a4160}.contact img{width:70px}.contact h2{font-size:40px;margin:8px 0}.contact-links{display:grid;gap:12px;font-size:18px}.contact-links a{border:1px solid #245071;border-radius:12px;padding:15px 18px}footer{display:flex;justify-content:space-between;padding:30px 6vw;color:#68839d;font-size:12px}footer div:last-child{display:flex;gap:20px}.wa{position:fixed;right:25px;bottom:25px;width:55px;height:55px;border-radius:50%;display:grid;place-items:center;background:#1fc66b;font-size:25px;z-index:20;box-shadow:0 10px 35px #0008}@media(max-width:1000px){nav{display:none}.hero{grid-template-columns:1fr;min-height:720px}.hero-art{width:120%;right:-55%;opacity:.25}.services,.templates{grid-template-columns:1fr 1fr}.pricing{grid-template-columns:1fr 1fr}.quote,.about,.case{grid-template-columns:1fr}.actions select{display:none}}@media(max-width:650px){header{padding:0 18px}.brand{font-size:18px}.hero{padding:70px 22px}.hero h1{font-size:50px;letter-spacing:-2px}.hero-buttons,.proof{flex-direction:column;align-items:flex-start}.trust{gap:9px;letter-spacing:2px;font-size:9px}.section{padding:70px 22px}.services,.templates,.pricing{grid-template-columns:1fr}.section h2{font-size:39px}.contact{flex-direction:column;align-items:flex-start;gap:25px;padding:50px 22px}.contact h2{font-size:32px}.contact-links{font-size:14px;width:100%}footer{flex-direction:column;gap:18px}.actions .btn{display:none}} /* V2 exact brand header */ .brand{flex:0 0 auto;min-width:250px} .brand img{width:250px;height:58px;object-fit:contain;object-position:left center;margin:0} .founder{display:flex;flex-direction:column;line-height:1.05;white-space:nowrap;padding-left:14px;border-left:1px solid #23435f} .founder small{font-size:9px;letter-spacing:2px;color:#67dff0;font-weight:800} .founder strong{font-size:12px;letter-spacing:.8px;margin-top:5px;color:#f7fbff} .currency-pills{flex-wrap:wrap} @media(max-width:1250px){header{gap:18px}.brand{min-width:205px}.brand img{width:205px}nav{gap:14px}.founder{display:none}} @media(max-width:650px){.brand{min-width:180px}.brand img{width:180px;height:50px}} /* V3 premium composition + two-font system */ body{font-family:'Manrope',ui-sans-serif,system-ui,sans-serif} h1,h2,h3,.brand,.btn,.kicker,.eyebrow,.founder,.pricing h3,.trust{font-family:'Space Grotesk','Manrope',ui-sans-serif,sans-serif} header{height:82px} .actions select#language{min-width:74px} .hero{min-height:720px;grid-template-columns:minmax(0,1.03fr) minmax(440px,.97fr);gap:5vw;padding:72px 6vw;background:radial-gradient(circle at 78% 30%,#07578930,transparent 34%),radial-gradient(circle at 20% 70%,#123f7b1f,transparent 35%)} .hero-copy{max-width:720px;position:relative} .hero h1{font-size:clamp(52px,5.7vw,84px);max-width:760px} .hero-visual{position:relative;z-index:2;width:100%;display:flex;align-items:center;justify-content:center} .hero-frame{width:100%;max-width:690px;aspect-ratio:1.38/1;position:relative;overflow:hidden;border:1px solid #24506f;border-radius:28px;background:#081626;box-shadow:0 35px 90px #0009,0 0 60px #0789dc1c} .hero-frame:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 50%,#03101be6 100%);pointer-events:none} .hero-frame img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02)} .visual-badge{position:absolute;z-index:2;left:24px;right:24px;bottom:22px;padding:16px 18px;border:1px solid #3b6c8b80;border-radius:14px;background:#05111bd9;backdrop-filter:blur(14px);display:flex;justify-content:space-between;gap:20px;align-items:center} .visual-badge span{font:700 10px 'Space Grotesk',sans-serif;letter-spacing:2px;color:#27dff0}.visual-badge strong{font-size:13px;color:#e9f5ff} @media(max-width:1120px){.hero{grid-template-columns:1fr;gap:48px}.hero-copy{max-width:850px}.hero-visual{justify-content:flex-start}.hero-frame{max-width:850px}.founder{display:none}} @media(max-width:650px){header{height:72px}.actions #language{display:block;max-width:72px;padding:9px 7px}.hero{min-height:auto;padding:58px 22px 70px;gap:34px}.hero h1{font-size:48px}.hero-frame{border-radius:18px;aspect-ratio:1.15/1}.visual-badge{left:12px;right:12px;bottom:12px;padding:12px;display:block}.visual-badge strong{display:block;margin-top:5px}.hero-art{display:none}} /* V4 full-width promotional slider */ .promo{position:relative;width:100%;height:clamp(340px,38vw,620px);overflow:hidden;background:#030914}.promo-track,.promo-slide{position:absolute;inset:0}.promo-slide{opacity:0;visibility:hidden;transition:opacity .9s ease,transform 5.5s ease;transform:scale(1.025);pointer-events:none}.promo-slide.active{opacity:1;visibility:visible;transform:scale(1);pointer-events:auto}.promo-slide img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}.promo-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,8,17,.02) 45%,rgba(3,10,20,.34) 78%,#050b15 100%)}.promo-blend{position:absolute;z-index:4;left:0;right:0;bottom:-1px;height:35%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(5,11,21,.22) 28%,rgba(5,11,21,.78) 72%,#050b15);mask-image:linear-gradient(to bottom,transparent,#000 58%)}.promo-arrow{position:absolute;z-index:8;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid #87d8ff55;background:#030d197a;backdrop-filter:blur(14px);color:#fff;font:500 30px/1 'Space Grotesk';cursor:pointer;opacity:.72}.promo:hover .promo-arrow{opacity:1}.promo-arrow.prev{left:26px}.promo-arrow.next{right:26px}.promo-dots{position:absolute;z-index:9;left:50%;bottom:34px;transform:translateX(-50%);display:flex;gap:9px}.promo-dots button{width:9px;height:9px;border:0;border-radius:50%;padding:0;background:#9ab1c5;opacity:.45;cursor:pointer}.promo-dots button.active{width:30px;border-radius:10px;background:#1adff0;opacity:1}.hero.hero-v4{min-height:auto!important;display:block!important;padding:28px 6vw 84px!important;margin-top:-32px;overflow:visible;background:radial-gradient(circle at 50% -30%,#0c69a53d,transparent 42%),#050b15}.hero-copy-centered{max-width:1040px!important;margin:auto;text-align:center;z-index:6}.hero-v4 h1{font-size:clamp(44px,5vw,76px)!important;line-height:1.02!important;letter-spacing:-3.5px!important;max-width:980px!important;margin:18px auto 24px!important}.hero-v4 p{max-width:820px;margin:auto}.hero-v4 .hero-buttons,.hero-v4 .proof{justify-content:center}.hero-v4 .proof{flex-wrap:wrap}@media(max-width:650px){.promo{height:330px}.promo-arrow{display:none}.promo-dots{bottom:22px}.promo-blend{height:44%}.hero.hero-v4{padding:18px 22px 62px!important;margin-top:-18px}.hero-v4 h1{font-size:44px!important;letter-spacing:-2px!important}.hero-v4 .hero-buttons{align-items:stretch}.hero-v4 .hero-buttons a{justify-content:center}}@media(prefers-reduced-motion:reduce){.promo-slide{transition:none;transform:none!important}} /* ========================================================= SOFTTECH V7 CANONICAL PRICING BORDER ANIMATION OWNER Target: .grid.pricing > article ========================================================= */ .grid.pricing > article{ position:relative; isolation:isolate; overflow:visible; } .grid.pricing > article > *:not(.w9-pricing-orbit-v7){ position:relative; z-index:2; } .w9-pricing-orbit-v7{ position:absolute !important; z-index:1 !important; /* * Slightly outside original border so animated light * remains fully visible. */ inset:-2px !important; display:block !important; pointer-events:none !important; overflow:visible !important; border-radius:20px; } .w9-pricing-orbit-v7 svg{ position:absolute; inset:0; display:block; width:100%; height:100%; overflow:visible; } .w9-pricing-orbit-v7 rect{ fill:none; vector-effect:non-scaling-stroke; } .w9-orbit-base{ stroke:rgba(27,216,233,.18); stroke-width:1; } /* * Large blurred moving segment. */ .w9-orbit-glow{ stroke:#168cff; stroke-width:5; stroke-linecap:round; stroke-dasharray:15 85; opacity:.42; filter: blur(1px) drop-shadow(0 0 5px #16dff3) drop-shadow(0 0 12px rgba(20,117,255,.95)); animation: w9PricingOrbitV7 3.8s linear infinite; } /* * Sharp white/cyan moving segment. */ .w9-orbit-light{ stroke:#35efff; stroke-width:2.2; stroke-linecap:round; stroke-dasharray:12 88; filter: drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 4px #27efff) drop-shadow(0 0 9px #1475ff); animation: w9PricingOrbitV7 3.8s linear infinite; } /* stagger each card */ .grid.pricing > article:nth-child(1) .w9-orbit-glow, .grid.pricing > article:nth-child(1) .w9-orbit-light{ animation-delay:0s; } .grid.pricing > article:nth-child(2) .w9-orbit-glow, .grid.pricing > article:nth-child(2) .w9-orbit-light{ animation-delay:-.95s; } .grid.pricing > article:nth-child(3) .w9-orbit-glow, .grid.pricing > article:nth-child(3) .w9-orbit-light{ animation-delay:-1.90s; } .grid.pricing > article:nth-child(4) .w9-orbit-glow, .grid.pricing > article:nth-child(4) .w9-orbit-light{ animation-delay:-2.85s; } /* Business / Most Popular stronger */ .grid.pricing > article.featured .w9-orbit-light{ stroke:#62f6ff; stroke-width:2.8; stroke-dasharray:16 84; } .grid.pricing > article.featured .w9-orbit-glow{ stroke:#18dcff; stroke-width:6; opacity:.55; } /* Hover */ .grid.pricing > article:hover .w9-orbit-light, .grid.pricing > article:hover .w9-orbit-glow{ animation-duration:2.6s; } .grid.pricing > article:hover .w9-orbit-light{ stroke:#ffffff; stroke-width:3; } .grid.pricing > article:hover .w9-orbit-glow{ opacity:.70; } /* * pathLength=100 means exactly one complete perimeter * revolution per animation cycle. */ @keyframes w9PricingOrbitV7{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-100; } } /* ========================================================= SOFTTECH V8 — FULL CONTINUOUS STROKE VISUAL OWNER Base stroke always visible. Bright highlight travels over the full stroke. ========================================================= */ .grid.pricing > article{ border:1px solid rgba(26,210,235,.72) !important; box-shadow: inset 0 0 0 1px rgba(20,115,180,.08), 0 0 12px rgba(16,196,232,.08) !important; } /* Full permanent SVG stroke */ .grid.pricing > article .w9-orbit-base{ stroke:#16d8ed !important; stroke-width:1.65 !important; opacity:.82 !important; filter: drop-shadow(0 0 2px rgba(23,220,244,.48)); } /* * Soft moving glow. * Longer segment so it feels like illumination travelling * over a COMPLETE border, not disconnected lines. */ .grid.pricing > article .w9-orbit-glow{ stroke:#168cff !important; stroke-width:4.2 !important; stroke-dasharray:22 78 !important; stroke-linecap:round !important; opacity:.32 !important; filter: blur(.8px) drop-shadow(0 0 5px rgba(31,229,255,.75)) drop-shadow(0 0 10px rgba(22,113,255,.55)) !important; animation: w9PricingOrbitV8 5.2s linear infinite !important; } /* Sharp travelling highlight */ .grid.pricing > article .w9-orbit-light{ stroke:#eaffff !important; stroke-width:2.1 !important; stroke-dasharray:8 92 !important; stroke-linecap:round !important; opacity:.95 !important; filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 5px #21efff) drop-shadow(0 0 8px rgba(22,135,255,.75)) !important; animation: w9PricingOrbitV8 5.2s linear infinite !important; } /* Keep cards staggered */ .grid.pricing > article:nth-child(1) .w9-orbit-glow, .grid.pricing > article:nth-child(1) .w9-orbit-light{ animation-delay:0s !important; } .grid.pricing > article:nth-child(2) .w9-orbit-glow, .grid.pricing > article:nth-child(2) .w9-orbit-light{ animation-delay:-1.3s !important; } .grid.pricing > article:nth-child(3) .w9-orbit-glow, .grid.pricing > article:nth-child(3) .w9-orbit-light{ animation-delay:-2.6s !important; } .grid.pricing > article:nth-child(4) .w9-orbit-glow, .grid.pricing > article:nth-child(4) .w9-orbit-light{ animation-delay:-3.9s !important; } /* MOST POPULAR — slightly stronger complete frame */ .grid.pricing > article.featured{ border-color:#20e5f4 !important; box-shadow: 0 0 0 1px rgba(27,230,246,.10), 0 0 18px rgba(20,211,241,.13) !important; } .grid.pricing > article.featured .w9-orbit-base{ stroke:#32effb !important; stroke-width:2 !important; opacity:1 !important; } .grid.pricing > article.featured .w9-orbit-glow{ opacity:.42 !important; } /* Hover = brighter, NOT broken */ .grid.pricing > article:hover .w9-orbit-base{ stroke:#43f2ff !important; opacity:1 !important; } .grid.pricing > article:hover .w9-orbit-light, .grid.pricing > article:hover .w9-orbit-glow{ animation-duration:3.8s !important; } @keyframes w9PricingOrbitV8{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-100; } } /* ========================================================= SOFTTECH V9 — CANONICAL FULL FLOWING STROKE Complete perimeter is always illuminated. No travelling dash/comet. ========================================================= */ /* * Hide the old V7/V8 SVG runner completely. * We retain its DOM only to avoid unnecessary HTML mutation. */ .grid.pricing > article .w9-pricing-orbit-v7{ display:none !important; } /* * Card itself becomes the mask/container. */ .grid.pricing > article{ position:relative !important; isolation:isolate !important; /* * Transparent physical border reserves exactly the * border area occupied by the animated gradient. */ border:2px solid transparent !important; /* * Layer 1 = normal dark card surface. * Layer 2 = COMPLETE animated gradient border. */ background: linear-gradient( #091827, #091827 ) padding-box, conic-gradient( from var(--softtech-flow-angle), #00d9ff 0deg, #1285ff 55deg, #23f0ff 105deg, #dffeff 145deg, #21e7ff 185deg, #176cff 235deg, #00eaff 285deg, #ffffff 325deg, #00d9ff 360deg ) border-box !important; box-shadow: 0 0 8px rgba(20,218,244,.20), 0 0 18px rgba(18,126,255,.08), inset 0 0 12px rgba(18,203,235,.025) !important; animation: softtechFullStrokeFlow 5.5s linear infinite !important; } /* * Full-border ambient glow. * This is NOT a runner — the whole perimeter glows. */ .grid.pricing > article::after{ content:"" !important; display:block !important; position:absolute !important; inset:-4px !important; z-index:-1 !important; border-radius:inherit !important; background: conic-gradient( from var(--softtech-flow-angle), rgba(0,218,255,.36), rgba(23,105,255,.22), rgba(34,239,255,.34), rgba(255,255,255,.22), rgba(17,216,255,.32), rgba(22,100,255,.22), rgba(0,231,255,.35) ) !important; filter:blur(8px) !important; opacity:.38 !important; pointer-events:none !important; animation: softtechFullStrokeFlow 5.5s linear infinite !important; } /* * Do NOT allow any old ::before animation owner. */ .grid.pricing > article::before{ animation:none !important; } /* MOST POPULAR — same effect, slightly more premium */ .grid.pricing > article.featured{ border-width:2px !important; box-shadow: 0 0 10px rgba(32,235,249,.30), 0 0 24px rgba(15,137,255,.14), inset 0 0 15px rgba(29,226,247,.035) !important; } .grid.pricing > article.featured::after{ opacity:.52 !important; filter:blur(9px) !important; } /* Hover = richer glow, geometry remains unchanged */ .grid.pricing > article:hover{ box-shadow: 0 0 12px rgba(35,237,255,.34), 0 0 28px rgba(20,124,255,.15), inset 0 0 14px rgba(30,232,250,.035) !important; } .grid.pricing > article:hover::after{ opacity:.58 !important; } /* * Rotating the gradient means the ENTIRE border changes * continuously rather than one light segment travelling. */ @property --softtech-flow-angle{ syntax:""; initial-value:0deg; inherits:false; } @keyframes softtechFullStrokeFlow{ from{ --softtech-flow-angle:0deg; } to{ --softtech-flow-angle:360deg; } } /* ========================================================== SOFTTECH V10 — PORTFOLIO PRODUCT SHOWCASE ========================================================== */ .case .portfolio-dashboard{ position:relative; padding:0; overflow:hidden; min-height:0; aspect-ratio:1672/941; background: radial-gradient(circle at 50% 50%,rgba(18,223,243,.10),transparent 62%), #06111e; border:1px solid #1b405d; border-radius:18px; box-shadow: 0 28px 70px rgba(0,0,0,.42), 0 0 44px rgba(18,223,243,.07); } .case .portfolio-dashboard img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; } .case .portfolio-dashboard:after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(90,220,255,.08); } @media(max-width:1000px){ .case .portfolio-dashboard{ width:100%; max-width:900px; } } /* ========================================================== SOFTTECH V11 — PROMOTION SOURCE-RATIO OWNER Source banners: 2172 × 724 ≈ 3:1 Full artwork visible / no horizontal crop ========================================================== */ .promo{ width:100% !important; height:auto !important; aspect-ratio:2172 / 724 !important; min-height:0 !important; max-height:none !important; position:relative !important; overflow:hidden !important; background:#030914 !important; } .promo-track{ position:absolute !important; inset:0 !important; } .promo-slide{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; } .promo-slide img{ display:block !important; width:100% !important; height:100% !important; object-fit:contain !important; object-position:center center !important; } /* Keep the transition, but disable image/container geometry from creating artificial crop. */ .promo-slide{ transform:none !important; } .promo-slide.active{ transform:none !important; } /* Preserve premium lower blend without covering artwork heavily */ .promo-shade{ background: linear-gradient( 180deg, rgba(2,8,17,0) 60%, rgba(3,10,20,.14) 82%, rgba(5,11,21,.38) 100% ) !important; } .promo-blend{ height:20% !important; } /* Mobile still keeps the ORIGINAL banner ratio. No old forced 330px height. */ @media(max-width:650px){ .promo{ height:auto !important; aspect-ratio:2172 / 724 !important; } .promo-slide img{ object-fit:contain !important; } .promo-dots{ bottom:12px !important; } .promo-blend{ height:22% !important; } } /* ========================================================== SOFTTECH V12 — PREMIUM CINEMATIC BOTTOM BLEND Keeps V11 full-banner / zero-crop geometry untouched ========================================================== */ .promo{ isolation:isolate; } /* Gentle cinematic grading across the artwork */ .promo-shade{ z-index:3 !important; pointer-events:none !important; background: linear-gradient( 180deg, rgba(2,7,14,0) 48%, rgba(3,9,18,.04) 60%, rgba(4,10,19,.15) 73%, rgba(5,11,21,.42) 87%, rgba(5,11,21,.82) 100% ) !important; } /* Main seamless fade into website background */ .promo-blend{ display:block !important; position:absolute !important; z-index:6 !important; left:0 !important; right:0 !important; bottom:-2px !important; height:38% !important; pointer-events:none !important; background: linear-gradient( 180deg, rgba(5,11,21,0) 0%, rgba(5,11,21,.03) 16%, rgba(5,11,21,.12) 34%, rgba(5,11,21,.34) 55%, rgba(5,11,21,.68) 76%, rgba(5,11,21,.94) 93%, #050b15 100% ) !important; -webkit-mask-image: linear-gradient( to bottom, transparent 0%, rgba(0,0,0,.20) 20%, #000 58%, #000 100% ) !important; mask-image: linear-gradient( to bottom, transparent 0%, rgba(0,0,0,.20) 20%, #000 58%, #000 100% ) !important; } /* Soft atmospheric glow at transition point */ .promo:after{ content:""; position:absolute; z-index:5; pointer-events:none; left:8%; right:8%; bottom:-8%; height:34%; background: radial-gradient( ellipse at center, rgba(13,118,190,.14) 0%, rgba(8,70,120,.07) 35%, transparent 72% ); filter:blur(30px); } /* Keep dots readable above cinematic layer */ .promo-dots{ z-index:9 !important; } /* arrows remain above everything */ .promo-arrow{ z-index:10 !important; } @media(max-width:650px){ .promo-blend{ height:44% !important; } .promo:after{ left:0; right:0; height:38%; filter:blur(20px); } } /* ========================================================== SOFTTECH V13 — TRUE SEAMLESS CINEMATIC DISSOLVE V11 geometry remains canonical. ========================================================== */ .promo{ isolation:isolate !important; overflow:visible !important; margin-bottom:0 !important; z-index:5 !important; } /* Keep actual image clipped to its correct 3:1 canvas. Only the cinematic overlay is allowed to extend below it. */ .promo-track{ overflow:hidden !important; z-index:1 !important; } /* Do NOT darken half of the actual artwork */ .promo-shade{ z-index:2 !important; background: linear-gradient( to bottom, transparent 0%, transparent 68%, rgba(5,11,21,.04) 78%, rgba(5,11,21,.18) 90%, rgba(5,11,21,.36) 100% ) !important; } /* MAIN CINEMATIC OWNER Starts INSIDE the final part of banner, crosses the actual banner boundary, and continues into the following section. */ .promo-blend{ display:block !important; position:absolute !important; z-index:7 !important; left:0 !important; right:0 !important; bottom:-105px !important; height:210px !important; pointer-events:none !important; background: linear-gradient( to bottom, rgba(5,11,21,0) 0%, rgba(5,11,21,.025) 10%, rgba(5,11,21,.07) 20%, rgba(5,11,21,.16) 31%, rgba(5,11,21,.31) 43%, rgba(5,11,21,.52) 55%, rgba(5,11,21,.72) 67%, rgba(5,11,21,.87) 78%, rgba(5,11,21,.96) 89%, #050b15 100% ) !important; -webkit-mask-image:none !important; mask-image:none !important; } /* Wide soft atmospheric haze. This removes the visible straight transition line. */ .promo:after{ content:"" !important; display:block !important; position:absolute !important; z-index:6 !important; left:-3% !important; right:-3% !important; bottom:-90px !important; height:185px !important; pointer-events:none !important; background: radial-gradient( ellipse 75% 80% at 50% 35%, rgba(14,126,197,.12) 0%, rgba(8,72,124,.075) 34%, rgba(5,25,45,.04) 55%, transparent 76% ) !important; filter:blur(34px) !important; } /* Hero must visually sit underneath the dissolve. Pull it slightly upward so there is no dead horizontal strip. */ .hero.hero-v4{ position:relative !important; z-index:2 !important; margin-top:-1px !important; padding-top:70px !important; background: radial-gradient( ellipse at 50% 0%, rgba(10,92,145,.16), transparent 42% ), #050b15 !important; } /* Put headline safely below transition */ .hero-copy-centered{ position:relative !important; z-index:8 !important; } /* dots float cleanly above fade */ .promo-dots{ z-index:12 !important; bottom:20px !important; } /* arrows stay above artwork */ .promo-arrow{ z-index:12 !important; } /* ---------------------------------------------------------- DESKTOP LARGE ---------------------------------------------------------- */ @media(min-width:1200px){ .promo-blend{ bottom:-120px !important; height:240px !important; } .promo:after{ bottom:-105px !important; height:210px !important; } .hero.hero-v4{ padding-top:82px !important; } } /* ---------------------------------------------------------- MOBILE ---------------------------------------------------------- */ @media(max-width:650px){ .promo-blend{ bottom:-62px !important; height:125px !important; } .promo:after{ bottom:-55px !important; height:115px !important; filter:blur(22px) !important; } .promo-dots{ bottom:10px !important; } .hero.hero-v4{ margin-top:0 !important; padding-top:48px !important; } } /* ========================================================== SOFTTECH V14 — FULL WEBSITE BACKGROUND OWNER Asset: assets/site-background.png IMPORTANT: Opacity applies ONLY to background artwork. Website content itself remains 100% opaque. ========================================================== */ html{ background:#050b15 !important; } body{ position:relative !important; isolation:isolate !important; background:#050b15 !important; } /* Permanent fixed artwork layer. */ body::before{ content:"" !important; position:fixed !important; z-index:-2 !important; inset:0 !important; width:100vw !important; height:100vh !important; pointer-events:none !important; background-image:url("assets/site-background.png") !important; background-repeat:no-repeat !important; background-position:center center !important; background-size:cover !important; opacity:.11 !important; filter: saturate(.90) contrast(1.04) brightness(.78) !important; transform:translateZ(0); } /* Very light dark grading layer. Prevents bright parts of artwork interfering with text. */ body::after{ content:"" !important; position:fixed !important; z-index:-1 !important; inset:0 !important; pointer-events:none !important; background: linear-gradient( 180deg, rgba(3,8,16,.16) 0%, rgba(3,8,16,.24) 45%, rgba(3,8,16,.32) 100% ) !important; } /* ---------------------------------------------------------- ALLOW BACKGROUND TO SHOW THROUGH MAIN PAGE AREAS We are NOT making cards transparent. Only large section canvases get a subtle translucent layer. ---------------------------------------------------------- */ main{ position:relative; background:transparent !important; } .hero.hero-v4, #solutions, #templates, #pricing, #portfolio, #about, #contact{ position:relative; background-color:rgba(5,11,21,.82) !important; } /* Slight variation prevents the whole site looking like one flat transparent sheet. */ #solutions, #pricing, #about{ background-color:rgba(5,11,21,.78) !important; } #templates, #portfolio, #contact{ background-color:rgba(4,10,19,.84) !important; } /* Keep important UI surfaces strong/readable. */ .card, .price-card, .case, .dashboard, .modal-card{ backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); } /* Header stays premium and readable */ header, .site-header{ background-color:rgba(3,9,18,.92) !important; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); } /* Promotion banners retain their own artwork. Full-site background must NOT visually contaminate them. */ .promo{ background:#050b15 !important; } /* ---------------------------------------------------------- MOBILE Fixed background rendering can be expensive on phones. Keep same visual but simplify processing. ---------------------------------------------------------- */ @media(max-width:768px){ body::before{ opacity:.09 !important; background-position:center top !important; filter: saturate(.85) brightness(.72) !important; } body::after{ background:rgba(3,8,16,.24) !important; } .hero.hero-v4, #solutions, #templates, #pricing, #portfolio, #about, #contact{ background-color:rgba(5,11,21,.84) !important; } } /* ========================================================== SOFTTECH V15 — BACKGROUND VISIBILITY CORRECTION V14 asset retained. ========================================================== */ /* Background artwork itself */ body::before{ opacity:.17 !important; background-image: url("assets/site-background.png") !important; background-size:cover !important; background-position:center center !important; background-repeat:no-repeat !important; filter: saturate(.92) contrast(1.05) brightness(.92) !important; } /* V14 grading was hiding too much artwork. Keep only a very light readability tint. */ body::after{ background: linear-gradient( 180deg, rgba(3,8,16,.05) 0%, rgba(3,8,16,.10) 48%, rgba(3,8,16,.16) 100% ) !important; } /* Main page canvas must actually expose the global artwork */ main{ background:transparent !important; } /* LARGE SECTIONS Previous .78-.84 opacity effectively concealed the image. These values let the artwork breathe through while preserving the premium dark visual language. */ .hero.hero-v4{ background: linear-gradient( 180deg, rgba(5,11,21,.52), rgba(5,11,21,.43) ) !important; } #solutions{ background:rgba(5,11,21,.43) !important; } #templates{ background:rgba(4,10,19,.49) !important; } #pricing{ background:rgba(5,11,21,.42) !important; } #portfolio{ background:rgba(4,10,19,.48) !important; } #about{ background:rgba(5,11,21,.42) !important; } #contact{ background:rgba(4,10,19,.50) !important; } /* Keep actual content surfaces readable. Background can show BETWEEN the cards, not through all text. */ .card, .price-card, .case, .dashboard, .modal-card{ background-color:rgba(6,18,31,.86) !important; backdrop-filter: blur(10px) saturate(1.08) !important; -webkit-backdrop-filter: blur(10px) saturate(1.08) !important; } /* Subtle glass tint around large content groups. No artificial white haze. */ section{ background-image: radial-gradient( circle at 50% 50%, rgba(13,117,180,.025), transparent 65% ); } /* Header remains strongly readable */ header, .site-header{ background-color:rgba(3,9,18,.91) !important; backdrop-filter:blur(18px) !important; -webkit-backdrop-filter:blur(18px) !important; } /* Promo remains independent. Never place site background over promotion artwork. */ .promo{ background:#050b15 !important; } /* Mobile — still visible, slightly more conservative */ @media(max-width:768px){ body::before{ opacity:.14 !important; filter: saturate(.88) brightness(.86) !important; } body::after{ background:rgba(3,8,16,.10) !important; } .hero.hero-v4, #solutions, #templates, #pricing, #portfolio, #about, #contact{ background-color:rgba(5,11,21,.52) !important; } } /* ========================================================== SOFTTECH V16 — SINGLE GLOBAL BACKGROUND OWNER RULE: - ONE global artwork - NO separate dark section canvases - cards remain readable - header remains glass/dark - promo remains isolated ========================================================== */ /* ---------- PAGE FOUNDATION ---------- */ html{ background:#050b15 !important; } body{ position:relative !important; isolation:isolate !important; background:#050b15 !important; } /* ---------- ONE GLOBAL BACKGROUND ---------- */ body::before{ content:"" !important; position:fixed !important; z-index:-2 !important; inset:0 !important; width:100vw !important; height:100vh !important; pointer-events:none !important; background-image:url("assets/site-background.png") !important; background-repeat:no-repeat !important; background-position:center center !important; background-size:cover !important; /* Subtle enough for premium texture, visible enough in empty areas. */ opacity:.13 !important; filter: saturate(.88) brightness(.78) contrast(1.06) !important; transform:translateZ(0); } /* Very light global readability grade only */ body::after{ content:"" !important; position:fixed !important; z-index:-1 !important; inset:0 !important; pointer-events:none !important; background: linear-gradient( 180deg, rgba(3,8,16,.05) 0%, rgba(3,8,16,.10) 50%, rgba(3,8,16,.14) 100% ) !important; } /* ========================================================== REMOVE SECTION CANVASES ========================================================== */ main, .hero, .hero.hero-v4, #solutions, #templates, #pricing, #portfolio, #about, #contact{ background-color:transparent !important; background-image:none !important; } /* Generic sections should NOT create another full-width dark rectangle over the global artwork. */ main > section:not(.promo){ background-color:transparent !important; } /* Remove the V15 generic radial layer. */ section:not(.promo){ background-image:none !important; } /* ========================================================== HERO No rectangular background. Only a localized readability halo behind hero content. ========================================================== */ .hero.hero-v4{ position:relative !important; isolation:isolate !important; } .hero.hero-v4::before{ content:"" !important; position:absolute !important; z-index:-1 !important; left:8% !important; right:8% !important; top:8% !important; bottom:8% !important; pointer-events:none !important; background: radial-gradient( ellipse at center, rgba(4,10,19,.52) 0%, rgba(4,10,19,.30) 42%, rgba(4,10,19,.08) 68%, transparent 82% ) !important; filter:blur(20px) !important; } /* ========================================================== SECTION CONTENT READABILITY Headings/text get no solid container. ========================================================== */ #solutions, #templates, #pricing, #portfolio, #about, #contact{ position:relative !important; } /* ========================================================== ACTUAL CARDS / CONTENT SURFACES These SHOULD remain dark glass. ========================================================== */ .card, .price-card, .case, .dashboard, .modal-card, .grid.pricing > article{ background-color:rgba(6,18,31,.84) !important; backdrop-filter: blur(12px) saturate(1.08) !important; -webkit-backdrop-filter: blur(12px) saturate(1.08) !important; } /* Keep subtle borders on actual cards. */ .card, .case, .dashboard{ box-shadow: 0 18px 50px rgba(0,0,0,.20); } /* ========================================================== HEADER Header stays separate for navigation readability. ========================================================== */ header, .site-header{ background:rgba(3,9,18,.91) !important; backdrop-filter: blur(18px) saturate(1.08) !important; -webkit-backdrop-filter: blur(18px) saturate(1.08) !important; } /* ========================================================== PROMOTION AREA Promotion artwork remains completely independent. ========================================================== */ .promo{ background:#050b15 !important; } /* ========================================================== OPTIONAL SECTION SEPARATION No background blocks. Only extremely subtle divider lines. ========================================================== */ #solutions, #templates, #pricing, #portfolio, #about, #contact{ border-top-color:rgba(71,154,211,.10) !important; } /* ========================================================== MOBILE ========================================================== */ @media(max-width:768px){ body::before{ opacity:.10 !important; background-position:center top !important; filter: saturate(.82) brightness(.72) contrast(1.05) !important; } body::after{ background: linear-gradient( 180deg, rgba(3,8,16,.08), rgba(3,8,16,.15) ) !important; } main, main > section:not(.promo), .hero, .hero.hero-v4, #solutions, #templates, #pricing, #portfolio, #about, #contact{ background-color:transparent !important; background-image:none !important; } .hero.hero-v4::before{ left:0 !important; right:0 !important; background: radial-gradient( ellipse at center, rgba(4,10,19,.50), rgba(4,10,19,.20) 55%, transparent 82% ) !important; } } /* ========================================================== SOFTTECH V17 — PREMIUM MOBILE NAVIGATION Desktop: completely dormant Mobile: logo + language + hamburger + glass drawer ========================================================== */ .w9-mobile-menu-toggle, .w9-mobile-overlay, .w9-mobile-drawer{ display:none; } /* ========================================================== MOBILE OWNER ========================================================== */ @media(max-width:1000px){ /* Existing desktop nav is already hidden at this breakpoint. Keep desktop structure untouched. */ header{ position:sticky !important; top:0 !important; z-index:1000 !important; } /* ---------- HAMBURGER ---------- */ .w9-mobile-menu-toggle{ width:43px; height:43px; flex:0 0 43px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; margin-left:2px; padding:0; border:1px solid rgba(70,171,230,.32); border-radius:11px; background: linear-gradient( 145deg, rgba(13,35,57,.92), rgba(5,17,30,.94) ); box-shadow: inset 0 1px rgba(255,255,255,.04), 0 8px 25px rgba(0,0,0,.22); cursor:pointer; position:relative; z-index:1002; } .w9-mobile-menu-toggle span{ display:block; width:19px; height:2px; border-radius:10px; background:#dffaff; box-shadow:0 0 8px rgba(24,221,240,.25); transition: transform .28s ease, opacity .2s ease; } /* ---------- OVERLAY ---------- */ .w9-mobile-overlay{ display:block; position:fixed; z-index:1998; inset:0; background:rgba(0,5,12,.66); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); opacity:0; visibility:hidden; pointer-events:none; transition: opacity .32s ease, visibility .32s ease; } body.w9-mobile-menu-open .w9-mobile-overlay{ opacity:1; visibility:visible; pointer-events:auto; } /* ---------- DRAWER ---------- */ .w9-mobile-drawer{ display:flex; position:fixed; z-index:1999; top:0; right:0; bottom:0; width:min(88vw,390px); flex-direction:column; padding: max(20px,env(safe-area-inset-top)) 20px max(22px,env(safe-area-inset-bottom)); overflow-y:auto; overscroll-behavior:contain; background: radial-gradient( circle at 100% 0%, rgba(20,117,255,.17), transparent 30% ), radial-gradient( circle at 0% 35%, rgba(18,223,243,.08), transparent 28% ), rgba(5,14,25,.97); border-left:1px solid rgba(51,144,201,.30); box-shadow: -25px 0 80px rgba(0,0,0,.52), inset 1px 0 rgba(255,255,255,.025); backdrop-filter:blur(24px) saturate(1.15); -webkit-backdrop-filter:blur(24px) saturate(1.15); transform:translate3d(105%,0,0); visibility:hidden; transition: transform .36s cubic-bezier(.2,.75,.2,1), visibility .36s; } body.w9-mobile-menu-open .w9-mobile-drawer{ transform:translate3d(0,0,0); visibility:visible; } /* ---------- DRAWER HEADER ---------- */ .w9-mobile-drawer-head{ display:flex; align-items:center; justify-content:space-between; gap:15px; padding-bottom:18px; border-bottom:1px solid rgba(60,132,181,.18); } .w9-mobile-drawer-brand img{ display:block; width:185px; max-width:100%; height:auto; } .w9-mobile-menu-close{ width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; padding:0; border:1px solid rgba(71,158,214,.30); border-radius:50%; background:rgba(9,27,44,.78); color:#eafaff; font: 300 28px/1 'Space Grotesk', 'Manrope', sans-serif; cursor:pointer; } /* ---------- FOUNDER ---------- */ .w9-mobile-founder{ display:flex; flex-direction:column; margin:22px 0 13px; padding:15px 16px; border:1px solid rgba(38,121,175,.24); border-radius:13px; background: linear-gradient( 110deg, rgba(12,35,56,.72), rgba(7,20,34,.42) ); } .w9-mobile-founder span{ color:#62e7f3; font-size:9px; font-weight:800; letter-spacing:2.3px; } .w9-mobile-founder strong{ margin-top:6px; color:#f5fbff; font-family: 'Space Grotesk', 'Manrope', sans-serif; font-size:13px; letter-spacing:.8px; } /* ---------- NAV ---------- */ .w9-mobile-nav{ display:grid !important; width:100%; gap:0; margin:5px 0 18px; color:#e7f4ff; } .w9-mobile-nav a{ position:relative; display:flex; align-items:center; justify-content:space-between; min-height:51px; padding:0 5px; border-bottom:1px solid rgba(67,126,169,.14); font-size:15px; font-weight:600; letter-spacing:.1px; } .w9-mobile-nav a::after{ content:"›"; color:#33dceb; font-size:23px; font-weight:300; opacity:.75; } .w9-mobile-nav a:active{ color:#28ddec; } /* ---------- CONTROLS ---------- */ .w9-mobile-controls{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:2px; } .w9-mobile-controls label{ display:grid; gap:7px; } .w9-mobile-controls label > span{ color:#668aa7; font-size:8px; font-weight:800; letter-spacing:1.7px; } .w9-mobile-controls select{ display:block !important; width:100%; min-width:0; padding:11px 10px; border:1px solid rgba(50,120,169,.36); border-radius:10px; background:#081827; color:#eefaff; font-size:12px; } /* ---------- CTA ---------- */ .w9-mobile-quote{ width:100%; margin-top:14px; min-height:48px; font-size:13px; } /* ---------- FOOT ---------- */ .w9-mobile-drawer-foot{ display:flex; flex-direction:column; gap:5px; margin-top:auto; padding-top:25px; color:#32ddec; } .w9-mobile-drawer-foot span{ font-size:9px; font-weight:800; letter-spacing:2.2px; } .w9-mobile-drawer-foot small{ color:#58758d; font-size:7px; letter-spacing:1.7px; } body.w9-mobile-menu-open{ overflow:hidden; } } /* ========================================================== PHONE HEADER ========================================================== */ @media(max-width:650px){ header{ height:72px !important; gap:8px !important; padding: 0 max(13px,env(safe-area-inset-right)) 0 max(13px,env(safe-area-inset-left)) !important; } header .brand{ min-width:0 !important; flex:1 1 auto; overflow:hidden; } header .brand img{ width:150px !important; max-width:100% !important; height:47px !important; margin:0 !important; object-fit:contain !important; object-position:left center !important; } /* On phone keep ONLY language in original header. Currency is available inside drawer. */ header .actions{ display:flex !important; flex:0 0 auto; gap:0 !important; } header .actions #language{ display:block !important; width:58px !important; max-width:58px !important; padding:8px 5px !important; font-size:10px !important; border-radius:9px !important; } header .actions #currency, header .actions .btn{ display:none !important; } .w9-mobile-menu-toggle{ width:39px; height:39px; flex-basis:39px; } .w9-mobile-drawer{ width:min(91vw,370px); } } /* Tiny phones */ @media(max-width:370px){ header .brand img{ width:130px !important; } header .actions #language{ width:54px !important; } .w9-mobile-controls{ grid-template-columns:1fr; } } /* ========================================================== SOFTTECH V18 — MOBILE HEADER FOUNDER OWNER PHONE HEADER: LOGO | FOUNDER | HAMBURGER LANGUAGE + CURRENCY: DRAWER ONLY ========================================================== */ @media(max-width:650px){ header{ height:72px !important; display:grid !important; grid-template-columns: minmax(112px,1fr) auto 39px !important; align-items:center !important; column-gap:7px !important; padding: 0 max(11px,env(safe-area-inset-right)) 0 max(11px,env(safe-area-inset-left)) !important; } /* ------------------------- LOGO ------------------------- */ header .brand{ grid-column:1 !important; min-width:0 !important; width:auto !important; overflow:hidden !important; } header .brand img{ display:block !important; width:min(100%,145px) !important; height:48px !important; margin:0 !important; object-fit:contain !important; object-position:left center !important; } /* ------------------------- CANONICAL FOUNDER Show it directly in header. ------------------------- */ header .founder{ grid-column:2 !important; display:flex !important; min-width:0 !important; max-width:128px !important; flex-direction:column !important; justify-content:center !important; padding-left:8px !important; border-left:1px solid rgba(72,146,194,.30) !important; white-space:nowrap !important; line-height:1 !important; } header .founder small{ display:block !important; overflow:hidden !important; color:#5fe7f3 !important; font-size:6px !important; font-weight:800 !important; letter-spacing:1.25px !important; text-overflow:ellipsis !important; } header .founder strong{ display:block !important; overflow:hidden !important; margin-top:4px !important; color:#f4faff !important; font-size:8px !important; font-weight:800 !important; letter-spacing:.25px !important; text-overflow:ellipsis !important; } /* ------------------------- DESKTOP ACTIONS Hide complete action block on phone. Therefore header EN disappears. Drawer becomes sole mobile language / currency owner. ------------------------- */ header .actions{ display:none !important; } /* ------------------------- MENU ------------------------- */ header .w9-mobile-menu-toggle{ grid-column:3 !important; display:flex !important; width:39px !important; height:39px !important; min-width:39px !important; margin:0 !important; justify-self:end !important; } /* Drawer already contains founder from V17. We don't need the SAME founder twice on one mobile view. Header owns identity. Drawer owns navigation/settings. */ .w9-mobile-drawer .w9-mobile-founder{ display:none !important; } /* Drawer controls remain the ONE mobile language/currency location. */ .w9-mobile-controls{ display:grid !important; } #w9-mobile-language, #w9-mobile-currency{ display:block !important; } } /* ---------------------------------------------------------- VERY SMALL PHONE ---------------------------------------------------------- */ @media(max-width:390px){ header{ grid-template-columns: minmax(105px,1fr) auto 37px !important; column-gap:5px !important; } header .brand img{ width:min(100%,132px) !important; } header .founder{ max-width:112px !important; padding-left:6px !important; } header .founder small{ font-size:5.5px !important; letter-spacing:1px !important; } header .founder strong{ font-size:7px !important; } header .w9-mobile-menu-toggle{ width:37px !important; height:37px !important; min-width:37px !important; } } /* ---------------------------------------------------------- ULTRA SMALL Founder remains present; scale rather than hide. ---------------------------------------------------------- */ @media(max-width:340px){ header .brand img{ width:min(100%,115px) !important; } header .founder{ max-width:98px !important; } header .founder small{ font-size:5px !important; } header .founder strong{ font-size:6.5px !important; } } /* ========================================================== SOFTTECH V20 — FINAL PREMIUM 4-COLOR PRICING OWNER 1 STARTER = BLUE 2 BUSINESS = PURPLE / PINK 3 PROFESSIONAL = EMERALD / TEAL 4 ENTERPRISE = GOLD / ORANGE ========================================================== */ /* ---------- SHARED ---------- */ .grid.pricing > article{ position:relative !important; isolation:isolate !important; overflow:hidden !important; border-width:1px !important; transition: transform .28s ease, box-shadow .28s ease !important; } /* labels */ .grid.pricing > article > span:not(.w9-pricing-orbit-v7){ position:relative !important; z-index:3 !important; font-family: 'Space Grotesk', 'Manrope', ui-sans-serif, sans-serif !important; font-weight:800 !important; letter-spacing:.15px !important; color:#f7fbff !important; } /* PRICE */ .grid.pricing > article h3{ position:relative !important; z-index:3 !important; font-family: 'Space Grotesk', 'Manrope', ui-sans-serif, sans-serif !important; font-size:48px !important; line-height:1 !important; font-weight:900 !important; letter-spacing:-1.8px !important; margin:12px 0 8px !important; } /* description */ .grid.pricing > article p{ position:relative !important; z-index:3 !important; font-weight:600 !important; } /* features */ .grid.pricing > article ul{ position:relative !important; z-index:3 !important; } .grid.pricing > article li{ font-weight:600 !important; } /* CTA */ .grid.pricing > article > a{ position:relative !important; z-index:3 !important; font-family: 'Space Grotesk', 'Manrope', ui-sans-serif, sans-serif !important; font-weight:800 !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important; } .grid.pricing > article > a:hover{ transform:translateY(-2px) !important; } /* ========================================================== STARTER — ELECTRIC BLUE ========================================================== */ .grid.pricing > article:nth-child(1){ border-color:#168cff !important; background: radial-gradient( circle at 72% 8%, rgba(26,116,255,.30), transparent 38% ), radial-gradient( circle at 0% 100%, rgba(0,119,255,.16), transparent 44% ), linear-gradient( 150deg, #092454 0%, #071b3e 48%, #06152e 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 30px rgba(20,117,255,.14), 0 22px 55px rgba(0,0,0,.30) !important; } .grid.pricing > article:nth-child(1) h3{ color:#42c8ff !important; text-shadow: 0 0 24px rgba(25,147,255,.28) !important; } .grid.pricing > article:nth-child(1) li::before{ color:#20a4ff !important; } .grid.pricing > article:nth-child(1) > a{ border-color:#168cff !important; box-shadow: inset 0 0 20px rgba(22,140,255,.05) !important; } /* ========================================================== BUSINESS — PURPLE / MAGENTA ========================================================== */ .grid.pricing > article:nth-child(2){ border-color:#b14cff !important; background: radial-gradient( circle at 72% 8%, rgba(213,48,255,.32), transparent 39% ), radial-gradient( circle at 0% 100%, rgba(93,46,255,.24), transparent 46% ), linear-gradient( 150deg, #351064 0%, #26104f 48%, #15143c 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 38px rgba(188,62,255,.20), 0 22px 60px rgba(0,0,0,.32) !important; } .grid.pricing > article:nth-child(2) h3{ color:#ff4fc7 !important; text-shadow: 0 0 26px rgba(255,52,196,.30) !important; } .grid.pricing > article:nth-child(2) li::before{ color:#ff42c0 !important; } /* Most Popular */ .grid.pricing > article:nth-child(2) .popular{ background: linear-gradient( 90deg, #a82cff 0%, #ff42c2 55%, #ff8ce4 100% ) !important; color:#13051d !important; font-weight:900 !important; box-shadow: 0 0 22px rgba(239,55,255,.28) !important; } /* Business button */ .grid.pricing > article:nth-child(2) > a.btn{ background: linear-gradient( 100deg, #ff2eae 0%, #c12dff 52%, #654cff 100% ) !important; border:1px solid rgba(255,130,235,.65) !important; color:#fff !important; box-shadow: 0 10px 28px rgba(192,45,255,.25) !important; } /* ========================================================== PROFESSIONAL — EMERALD / TEAL ========================================================== */ .grid.pricing > article:nth-child(3){ border-color:#13d9a1 !important; background: radial-gradient( circle at 72% 8%, rgba(18,222,171,.27), transparent 39% ), radial-gradient( circle at 0% 100%, rgba(0,165,129,.18), transparent 46% ), linear-gradient( 150deg, #073f3c 0%, #07312f 48%, #061f29 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 34px rgba(19,217,161,.15), 0 22px 55px rgba(0,0,0,.30) !important; } .grid.pricing > article:nth-child(3) h3{ color:#20e2b4 !important; text-shadow: 0 0 24px rgba(20,220,169,.27) !important; } .grid.pricing > article:nth-child(3) li::before{ color:#18dba6 !important; } .grid.pricing > article:nth-child(3) > a{ border-color:#16cfa0 !important; box-shadow: inset 0 0 20px rgba(22,207,160,.05) !important; } /* ========================================================== ENTERPRISE — GOLD / ORANGE ========================================================== */ .grid.pricing > article:nth-child(4){ border-color:#ffb315 !important; background: radial-gradient( circle at 76% 10%, rgba(255,161,24,.28), transparent 40% ), radial-gradient( circle at 0% 100%, rgba(255,119,0,.17), transparent 47% ), linear-gradient( 150deg, #402815 0%, #2e2118 48%, #1c1c20 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 34px rgba(255,173,24,.15), 0 22px 55px rgba(0,0,0,.30) !important; } .grid.pricing > article:nth-child(4) h3{ color:#ffc342 !important; text-shadow: 0 0 25px rgba(255,179,21,.27) !important; } .grid.pricing > article:nth-child(4) li::before{ color:#ffad19 !important; } .grid.pricing > article:nth-child(4) > a{ border-color:#eaa313 !important; box-shadow: inset 0 0 20px rgba(255,174,22,.05) !important; } /* ========================================================== EXACT EXISTING SVG ORBIT COLORS Preserve V7/V8 dash animation. ========================================================== */ /* base full frame */ .grid.pricing > article:nth-child(1) .w9-orbit-base{ stroke:#147dff !important; } .grid.pricing > article:nth-child(2) .w9-orbit-base{ stroke:#a63fff !important; } .grid.pricing > article:nth-child(3) .w9-orbit-base{ stroke:#11c996 !important; } .grid.pricing > article:nth-child(4) .w9-orbit-base{ stroke:#e9a414 !important; } /* moving glow */ .grid.pricing > article:nth-child(1) .w9-orbit-glow{ stroke:#169cff !important; } .grid.pricing > article:nth-child(2) .w9-orbit-glow{ stroke:#e144ff !important; } .grid.pricing > article:nth-child(3) .w9-orbit-glow{ stroke:#19e6ac !important; } .grid.pricing > article:nth-child(4) .w9-orbit-glow{ stroke:#ffb619 !important; } /* bright moving light */ .grid.pricing > article:nth-child(1) .w9-orbit-light{ stroke:#d8f5ff !important; } .grid.pricing > article:nth-child(2) .w9-orbit-light{ stroke:#ffd5ff !important; } .grid.pricing > article:nth-child(3) .w9-orbit-light{ stroke:#d8fff1 !important; } .grid.pricing > article:nth-child(4) .w9-orbit-light{ stroke:#fff2c2 !important; } /* ========================================================== HOVER ========================================================== */ .grid.pricing > article:hover{ transform:translateY(-5px) !important; } .grid.pricing > article:nth-child(1):hover{ box-shadow: 0 0 45px rgba(20,125,255,.24), 0 28px 65px rgba(0,0,0,.34) !important; } .grid.pricing > article:nth-child(2):hover{ box-shadow: 0 0 48px rgba(194,55,255,.27), 0 28px 65px rgba(0,0,0,.34) !important; } .grid.pricing > article:nth-child(3):hover{ box-shadow: 0 0 45px rgba(18,215,160,.22), 0 28px 65px rgba(0,0,0,.34) !important; } .grid.pricing > article:nth-child(4):hover{ box-shadow: 0 0 45px rgba(255,174,22,.22), 0 28px 65px rgba(0,0,0,.34) !important; } /* ========================================================== MOBILE ========================================================== */ @media(max-width:650px){ .grid.pricing > article h3{ font-size:43px !important; } .grid.pricing > article:hover{ transform:none !important; } } /* ===== END SOFTTECH V20 ===== */ /* ========================================================== SOFTTECH V21 — CANONICAL ARROW ASSETS ========================================================== */ :root{ --softtech-banner-arrow: url("/assets/ui/banner-nav-arrow.png"); --softtech-cta-arrow: url("/assets/ui/cta-right-arrow.png"); } /* ---------------------------------------------------------- BANNER / HERO NAVIGATION Existing button remains the click owner. PNG only replaces the visual glyph. ---------------------------------------------------------- */ .hero button[aria-label*="Previous" i], .hero button[aria-label*="Prev" i], .hero button[aria-label*="Next" i], .hero-slider button[aria-label*="Previous" i], .hero-slider button[aria-label*="Prev" i], .hero-slider button[aria-label*="Next" i], .slider button[aria-label*="Previous" i], .slider button[aria-label*="Prev" i], .slider button[aria-label*="Next" i], .carousel button[aria-label*="Previous" i], .carousel button[aria-label*="Prev" i], .carousel button[aria-label*="Next" i], [class*="hero"] [class*="prev"], [class*="hero"] [class*="next"], [class*="slider"] [class*="prev"], [class*="slider"] [class*="next"]{ font-size:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; } /* one canonical visual asset */ .hero button[aria-label*="Previous" i]::after, .hero button[aria-label*="Prev" i]::after, .hero button[aria-label*="Next" i]::after, .hero-slider button[aria-label*="Previous" i]::after, .hero-slider button[aria-label*="Prev" i]::after, .hero-slider button[aria-label*="Next" i]::after, .slider button[aria-label*="Previous" i]::after, .slider button[aria-label*="Prev" i]::after, .slider button[aria-label*="Next" i]::after, .carousel button[aria-label*="Previous" i]::after, .carousel button[aria-label*="Prev" i]::after, .carousel button[aria-label*="Next" i]::after, [class*="hero"] [class*="prev"]::after, [class*="hero"] [class*="next"]::after, [class*="slider"] [class*="prev"]::after, [class*="slider"] [class*="next"]::after{ content:"" !important; display:block !important; width:26px !important; height:26px !important; background-image:var(--softtech-banner-arrow) !important; background-repeat:no-repeat !important; background-position:center !important; background-size:contain !important; filter: drop-shadow(0 0 5px rgba(0,215,255,.55)) drop-shadow(0 0 11px rgba(0,145,255,.25)); transition: transform .2s ease, filter .2s ease !important; } /* LEFT = uploaded asset */ .hero button[aria-label*="Previous" i]::after, .hero button[aria-label*="Prev" i]::after, .hero-slider button[aria-label*="Previous" i]::after, .hero-slider button[aria-label*="Prev" i]::after, .slider button[aria-label*="Previous" i]::after, .slider button[aria-label*="Prev" i]::after, .carousel button[aria-label*="Previous" i]::after, .carousel button[aria-label*="Prev" i]::after, [class*="hero"] [class*="prev"]::after, [class*="slider"] [class*="prev"]::after{ transform:none !important; } /* RIGHT = same uploaded asset rotated */ .hero button[aria-label*="Next" i]::after, .hero-slider button[aria-label*="Next" i]::after, .slider button[aria-label*="Next" i]::after, .carousel button[aria-label*="Next" i]::after, [class*="hero"] [class*="next"]::after, [class*="slider"] [class*="next"]::after{ transform:rotate(180deg) !important; } /* ---------------------------------------------------------- CTA ARROW OWNER JS adds .softtech-cta-arrow-owner only to elements that actually contained the text arrow "→". Therefore language/menu/dropdown chevrons remain untouched. ---------------------------------------------------------- */ .softtech-cta-arrow-owner{ display:inline-flex !important; align-items:center !important; justify-content:center; gap:9px !important; } .softtech-cta-arrow-owner::after{ content:"" !important; display:inline-block !important; flex:0 0 auto !important; width:18px !important; height:18px !important; background-image:var(--softtech-cta-arrow) !important; background-repeat:no-repeat !important; background-position:center !important; background-size:contain !important; filter: brightness(0) invert(1) drop-shadow(0 0 4px rgba(255,255,255,.20)); transition:transform .18s ease !important; } .softtech-cta-arrow-owner:hover::after{ transform:translateX(3px) !important; } /* smaller inline CTAs */ a.softtech-cta-arrow-owner:not(.btn), button.softtech-cta-arrow-owner:not(.btn){ gap:7px !important; } /* mobile */ @media(max-width:650px){ .hero button[aria-label*="Previous" i]::after, .hero button[aria-label*="Prev" i]::after, .hero button[aria-label*="Next" i]::after, .hero-slider button::after, .slider button[aria-label*="Previous" i]::after, .slider button[aria-label*="Prev" i]::after, .slider button[aria-label*="Next" i]::after{ width:20px !important; height:20px !important; } .softtech-cta-arrow-owner::after{ width:15px !important; height:15px !important; } } /* ===== END SOFTTECH V21 ===== */ /* ========================================================== SOFTTECH V21R1 — EXACT PROMO NAVIGATION ARROW OWNER ========================================================== */ .promo-arrow{ font-size:0 !important; line-height:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:visible !important; } /* Kill old textual < / > visual */ .promo-arrow::before{ content:none !important; } /* canonical PNG visual */ .promo-arrow::after{ content:"" !important; display:block !important; flex:none !important; width:30px !important; height:30px !important; background-image: url("/assets/ui/banner-nav-arrow.png") !important; background-repeat:no-repeat !important; background-position:center !important; background-size:contain !important; opacity:1 !important; filter: drop-shadow(0 0 4px rgba(0,220,255,.60)) drop-shadow(0 0 10px rgba(0,145,255,.35)) !important; transition: transform .18s ease, filter .18s ease !important; pointer-events:none !important; } /* uploaded PNG points LEFT */ .promo-arrow.prev::after{ transform:none !important; } /* same PNG reused for RIGHT */ .promo-arrow.next::after{ transform:rotate(180deg) !important; } /* hover */ .promo-arrow.prev:hover::after{ transform:scale(1.10) !important; filter: drop-shadow(0 0 6px rgba(0,225,255,.85)) drop-shadow(0 0 14px rgba(0,145,255,.50)) !important; } .promo-arrow.next:hover::after{ transform: rotate(180deg) scale(1.10) !important; filter: drop-shadow(0 0 6px rgba(0,225,255,.85)) drop-shadow(0 0 14px rgba(0,145,255,.50)) !important; } /* mobile */ @media(max-width:650px){ .promo-arrow::after{ width:22px !important; height:22px !important; } } /* ===== END V21R1 ===== */ /* ========================================================== SOFTTECH V21R2 — ICE CYAN PROMO ARROWS ========================================================== */ .promo-arrow{ background: rgba(2,15,27,.68) !important; border: 1px solid rgba(39,203,255,.58) !important; box-shadow: inset 0 0 15px rgba(18,172,255,.08), 0 0 14px rgba(0,173,255,.12) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } /* black source PNG -> bright ice cyan */ .promo-arrow::after{ filter: invert(83%) sepia(35%) saturate(1778%) hue-rotate(156deg) brightness(111%) contrast(104%) drop-shadow(0 0 3px rgba(95,225,255,.95)) drop-shadow(0 0 8px rgba(0,190,255,.58)) !important; } /* hover glass */ .promo-arrow:hover{ border-color: rgba(92,226,255,.92) !important; background: rgba(4,31,48,.82) !important; box-shadow: inset 0 0 18px rgba(34,210,255,.13), 0 0 22px rgba(0,190,255,.24) !important; } /* preserve LEFT transform */ .promo-arrow.prev:hover::after{ transform: scale(1.10) !important; filter: invert(88%) sepia(42%) saturate(1680%) hue-rotate(153deg) brightness(118%) contrast(105%) drop-shadow(0 0 4px rgba(175,247,255,1)) drop-shadow(0 0 11px rgba(0,211,255,.82)) !important; } /* preserve RIGHT rotation */ .promo-arrow.next:hover::after{ transform: rotate(180deg) scale(1.10) !important; filter: invert(88%) sepia(42%) saturate(1680%) hue-rotate(153deg) brightness(118%) contrast(105%) drop-shadow(0 0 4px rgba(175,247,255,1)) drop-shadow(0 0 11px rgba(0,211,255,.82)) !important; } /* ===== END V21R2 ===== */ /* ========================================================== SOFTTECH V22R2 — EXACT HEADER VISUAL OWNER DESKTOP: LOGO | FOUNDER | NAV | ACTIONS ========================================================== */ @media (min-width:1251px){ header{ gap:0 !important; } /* ---------- LOGO ---------- */ header > .brand{ flex:0 0 auto !important; min-width:250px !important; margin:0 !important; } /* ---------- FOUNDER BESIDE LOGO ---------- */ header > .founder{ display:flex !important; flex:0 0 auto !important; flex-direction:column !important; justify-content:center !important; margin-left:18px !important; margin-right:0 !important; padding: 3px 0 3px 16px !important; border-left: 1px solid rgba(47,210,255,.42) !important; white-space:nowrap !important; line-height:1.05 !important; } header > .founder small{ margin:0 !important; font-family: "Space Grotesk", "Manrope", Inter, sans-serif !important; font-size:9px !important; font-weight:900 !important; letter-spacing:2.2px !important; color:#2bddff !important; text-shadow: 0 0 9px rgba(31,213,255,.32) !important; } header > .founder strong{ margin-top:5px !important; font-family: "Space Grotesk", "Manrope", Inter, sans-serif !important; font-size:12px !important; font-weight:900 !important; letter-spacing:.55px !important; color:#f6f9ff !important; } /* ---------- DESKTOP NAV ---------- */ header > nav{ display:flex !important; flex:1 1 auto !important; align-items:center !important; justify-content:center !important; gap:25px !important; margin: 0 22px !important; } header > nav > a{ position:relative !important; font-family: "Space Grotesk", "Manrope", Inter, ui-sans-serif, sans-serif !important; font-size:14px !important; font-weight:800 !important; letter-spacing:.1px !important; color:#e4eefb !important; transition: color .18s ease, text-shadow .18s ease, transform .18s ease !important; } header > nav > a:hover{ color:#37ddff !important; text-shadow: 0 0 11px rgba(39,213,255,.38) !important; transform: translateY(-1px) !important; } header > nav > a::after{ content:"" !important; position:absolute !important; left:50% !important; bottom:-8px !important; width:0 !important; height:2px !important; border-radius:10px !important; background: linear-gradient( 90deg, #1684ff, #28e4ff ) !important; box-shadow: 0 0 8px rgba(38,218,255,.52) !important; transform: translateX(-50%) !important; transition: width .18s ease !important; } header > nav > a:hover::after{ width:70% !important; } /* ---------- RIGHT ACTIONS ---------- */ header > .actions{ flex:0 0 auto !important; margin-left:auto !important; } } /* Tablet navigation typography only */ @media (min-width:1001px) and (max-width:1250px){ header > nav > a{ font-weight:800 !important; color:#e4eefb !important; } } /* Mobile drawer — identity wording/weight only. Existing mobile layout remains untouched. */ @media (max-width:1000px){ .w9-mobile-founder span{ font-weight:900 !important; color:#2bddff !important; } .w9-mobile-nav > a{ font-weight:800 !important; } } /* ===== END SOFTTECH V22R2 ===== */ /* ========================================================== SOFTTECH V23 — CURRENT SECTION NAV HIGHLIGHT ========================================================== */ header > nav > a.w9-nav-active{ color:#35ddff !important; font-weight:900 !important; text-shadow: 0 0 7px rgba(53,221,255,.42), 0 0 16px rgba(20,150,255,.22) !important; } /* Existing V22 underline owner already uses ::after. Active state keeps that underline permanently visible. */ header > nav > a.w9-nav-active::after{ width:72% !important; background: linear-gradient( 90deg, #1684ff, #35e7ff ) !important; box-shadow: 0 0 5px rgba(53,225,255,.85), 0 0 12px rgba(18,156,255,.42) !important; } /* Mobile drawer follows same current section */ .w9-mobile-nav > a.w9-nav-active{ color:#35ddff !important; font-weight:900 !important; background: linear-gradient( 90deg, rgba(23,137,255,.12), rgba(36,224,255,.04) ) !important; border-color: rgba(49,215,255,.24) !important; text-shadow: 0 0 9px rgba(42,218,255,.28) !important; } /* ===== END SOFTTECH V23 ===== */ /* ========================================================== SOFTTECH V24 — PREMIUM LANGUAGE FLAG ========================================================== */ .w9-language-flag-wrap{ position:relative !important; display:inline-flex !important; align-items:center !important; flex:0 0 auto !important; } /* Actual uploaded PNG */ .w9-language-flag{ position:absolute !important; left:11px !important; top:50% !important; width:20px !important; height:20px !important; object-fit:contain !important; transform: translateY(-50%) !important; z-index:2 !important; pointer-events:none !important; border-radius:50% !important; filter: drop-shadow( 0 0 4px rgba(38,210,255,.24) ) !important; } /* Make room for flag while preserving native select functionality and existing dropdown chevron. */ .w9-language-flag-wrap > select{ padding-left:38px !important; } /* Desktop premium micro-glow */ header .w9-language-flag{ box-shadow: 0 0 0 1px rgba(99,220,255,.16), 0 0 8px rgba(26,178,255,.10) !important; } /* Mobile selector */ @media(max-width:1000px){ .w9-language-flag{ left:8px !important; width:16px !important; height:16px !important; } .w9-language-flag-wrap > select{ padding-left:30px !important; } } /* ===== END SOFTTECH V24 ===== */ /* ========================================================== SOFTTECH V24R1 — BANGLADESH FLAG VISIBLE SCALE Uploaded BD PNG contains internal transparent breathing room. US flag remains unchanged. ========================================================== */ .w9-language-flag.w9-flag-bd{ width:28px !important; height:28px !important; left:7px !important; transform: translateY(-50%) scale(1.08) !important; filter: drop-shadow(0 0 4px rgba(20,220,190,.24)) drop-shadow(0 0 7px rgba(0,170,150,.12)) !important; } /* US stays at canonical V24 dimensions */ .w9-language-flag.w9-flag-us{ width:20px !important; height:20px !important; left:11px !important; transform: translateY(-50%) !important; } @media(max-width:1000px){ .w9-language-flag.w9-flag-bd{ width:24px !important; height:24px !important; left:4px !important; transform: translateY(-50%) scale(1.08) !important; } .w9-language-flag.w9-flag-us{ width:16px !important; height:16px !important; left:8px !important; } } /* ===== END SOFTTECH V24R1 ===== */ /* ========================================================== SOFTTECH V24R2 — CANONICAL EQUAL FLAG SIZE BD source is now physically cropped. ========================================================== */ .w9-language-flag.w9-flag-bd, .w9-language-flag.w9-flag-us{ width:20px !important; height:20px !important; left:11px !important; object-fit:contain !important; transform: translateY(-50%) !important; } /* Both badges receive identical visual treatment */ .w9-language-flag.w9-flag-bd{ filter: drop-shadow(0 0 4px rgba(22,215,190,.24)) !important; } .w9-language-flag.w9-flag-us{ filter: drop-shadow(0 0 4px rgba(38,210,255,.24)) !important; } @media(max-width:1000px){ .w9-language-flag.w9-flag-bd, .w9-language-flag.w9-flag-us{ width:16px !important; height:16px !important; left:8px !important; transform: translateY(-50%) !important; } } /* ===== END SOFTTECH V24R2 ===== */ /* ========================================================== SOFTTECH V24R3 — BD FLAG FINAL VISUAL FIT US remains canonical. ========================================================== */ /* US — keep current good appearance */ .w9-language-flag.w9-flag-us{ width:20px !important; height:20px !important; left:11px !important; transform:translateY(-50%) !important; } /* BD PNG has substantial internal canvas/breathing room. Give BD a larger render box while keeping the same visual center inside the language control. */ .w9-language-flag.w9-flag-bd{ width:32px !important; height:32px !important; left:5px !important; object-fit:contain !important; transform: translateY(-50%) !important; max-width:none !important; max-height:none !important; border-radius:50% !important; filter: drop-shadow(0 0 3px rgba(0,210,180,.30)) drop-shadow(0 0 6px rgba(0,140,120,.16)) !important; } /* Keep text position identical. Larger BD render box must not push বাংলা. */ .w9-language-flag-wrap > select{ padding-left:38px !important; } @media(max-width:1000px){ .w9-language-flag.w9-flag-us{ width:16px !important; height:16px !important; left:8px !important; } .w9-language-flag.w9-flag-bd{ width:27px !important; height:27px !important; left:3px !important; max-width:none !important; max-height:none !important; } .w9-language-flag-wrap > select{ padding-left:30px !important; } } /* ===== END SOFTTECH V24R3 ===== */ /* ========================================================== SOFTTECH V24R5 — FINAL EXACT FLAG GEOMETRY US + BD = EXACT SAME VISIBLE CIRCLE ========================================================== */ /* Kill every previous country-specific size/glow/ring override. */ .w9-language-flag.w9-flag-us, .w9-language-flag.w9-flag-bd{ position:absolute !important; width:20px !important; height:20px !important; min-width:20px !important; min-height:20px !important; max-width:20px !important; max-height:20px !important; left:11px !important; top:50% !important; margin:0 !important; padding:0 !important; display:block !important; border:0 !important; outline:0 !important; border-radius:50% !important; box-shadow:none !important; filter:none !important; transform: translateY(-50%) !important; transform-origin:center center !important; overflow:hidden !important; box-sizing:border-box !important; pointer-events:none !important; } /* US already looks correct. Preserve its natural image fitting. */ .w9-language-flag.w9-flag-us{ object-fit:cover !important; object-position:center !important; } /* BD: fill the SAME 20x20 circle. No larger element. No larger cyan ring. */ .w9-language-flag.w9-flag-bd{ object-fit:cover !important; object-position:center center !important; } /* One identical subtle ring for BOTH. The ring is INSIDE the same 20px geometry. */ .w9-language-flag.w9-flag-us, .w9-language-flag.w9-flag-bd{ border: 1px solid rgba(42,202,255,.28) !important; } /* Selector spacing remains identical */ .w9-language-flag-wrap > select{ padding-left:38px !important; } /* MOBILE */ @media(max-width:1000px){ .w9-language-flag.w9-flag-us, .w9-language-flag.w9-flag-bd{ width:16px !important; height:16px !important; min-width:16px !important; min-height:16px !important; max-width:16px !important; max-height:16px !important; left:8px !important; border-radius:50% !important; object-fit:cover !important; box-shadow:none !important; filter:none !important; transform: translateY(-50%) !important; } } /* ===== END SOFTTECH V24R5 ===== */ /* ========================================================== SOFTTECH V24R6 — LANGUAGE FLAG ALIGNMENT Position correction only. ========================================================== */ .w9-language-flag-wrap{ position:relative !important; display:inline-flex !important; align-items:center !important; } /* 20px flag. Left icon area is 38px. Center flag inside that area: (38 - 20) / 2 = 9px */ .w9-language-flag.w9-flag-us, .w9-language-flag.w9-flag-bd{ position:absolute !important; left:9px !important; top:50% !important; width:20px !important; height:20px !important; min-width:20px !important; min-height:20px !important; max-width:20px !important; max-height:20px !important; margin:0 !important; transform: translateY(-50%) !important; transform-origin:center !important; z-index:3 !important; pointer-events:none !important; } /* Give flag a proper dedicated slot before text. */ .w9-language-flag-wrap > select{ padding-left:39px !important; } /* Mobile */ @media(max-width:1000px){ /* 16px flag in 30px icon area: (30 - 16) / 2 = 7px */ .w9-language-flag.w9-flag-us, .w9-language-flag.w9-flag-bd{ left:7px !important; width:16px !important; height:16px !important; min-width:16px !important; min-height:16px !important; max-width:16px !important; max-height:16px !important; } .w9-language-flag-wrap > select{ padding-left:31px !important; } } /* ===== END SOFTTECH V24R6 ===== */ /* ========================================================== SOFTTECH V24R7 — BALANCED LANGUAGE CONTROL ========================================================== */ /* Previous versions placed the flag at 7/9/11px from the button edge. Override all of those. Desktop control: flag center = 18px from left 20px flag => left = 8px BUT the SELECT itself receives symmetric visual spacing so the complete FLAG + TEXT + CHEVRON group is balanced. */ .w9-language-flag-wrap{ position:relative !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } /* ---------- DESKTOP ---------- */ .w9-language-flag.w9-flag-us, .w9-language-flag.w9-flag-bd{ position:absolute !important; width:20px !important; height:20px !important; min-width:20px !important; min-height:20px !important; max-width:20px !important; max-height:20px !important; /* Move flag inward from previous left-biased position. */ left:14px !important; top:50% !important; margin:0 !important; padding:0 !important; border-radius:50% !important; transform: translateY(-50%) !important; object-fit:cover !important; object-position:center !important; z-index:4 !important; pointer-events:none !important; } /* Enough room for: flag + gap + text + native chevron Flag begins at 14px and ends at 34px. Text starts at 43px => 9px clean gap. */ .w9-language-flag-wrap > select{ padding-left:43px !important; padding-right:31px !important; text-align:left !important; } /* ---------- MOBILE ---------- */ @media(max-width:1000px){ .w9-language-flag.w9-flag-us, .w9-language-flag.w9-flag-bd{ width:16px !important; height:16px !important; min-width:16px !important; min-height:16px !important; max-width:16px !important; max-height:16px !important; left:12px !important; transform: translateY(-50%) !important; } .w9-language-flag-wrap > select{ padding-left:36px !important; padding-right:27px !important; } } /* ===== END SOFTTECH V24R7 ===== */ /* ========================================================== SOFTTECH V25 — CANONICAL LANGUAGE CONTROL FLAG + LABEL + CHEVRON = SAME FLEX ROW ========================================================== */ /* Old V24 injected owner must never participate. */ header .w9-language-flag-wrap{ display:contents !important; } header .w9-language-flag{ display:none !important; } /* NEW CONTROL */ header .w9-language-v25{ position:relative !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; height:42px !important; min-width:104px !important; margin:0 !important; padding:0 !important; border:1px solid #24415f !important; border-radius:11px !important; background:#091728 !important; overflow:hidden !important; box-sizing:border-box !important; } /* THIS is the visible row. No absolute flag. No fake left icon slot. */ header .w9-language-v25-visual{ width:100% !important; height:100% !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; padding: 0 10px !important; pointer-events:none !important; box-sizing:border-box !important; } /* US + BD EXACT SAME OUTER GEOMETRY */ header .w9-language-v25-flag-shell{ flex: 0 0 20px !important; width:20px !important; height:20px !important; display:block !important; margin:0 !important; padding:0 !important; overflow:hidden !important; border-radius:50% !important; border: 1px solid rgba(61,207,255,.35) !important; background:#07131f !important; box-sizing:border-box !important; } /* Image fills SAME circle. */ header .w9-language-v25-flag{ display:block !important; width:100% !important; height:100% !important; min-width:0 !important; min-height:0 !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; object-fit:cover !important; object-position:center center !important; transform:none !important; box-shadow:none !important; filter:none !important; } /* LABEL */ header .w9-language-v25-label{ display:block !important; margin:0 !important; padding:0 !important; color:#fff !important; font-size:13px !important; font-weight:700 !important; line-height:1 !important; white-space:nowrap !important; } /* CHEVRON is now part of SAME row. */ header .w9-language-v25-chevron{ display:flex !important; align-items:center !important; justify-content:center !important; width:12px !important; height:16px !important; flex: 0 0 12px !important; margin: -3px 0 0 1px !important; padding:0 !important; color:#d9e7f4 !important; font-size:17px !important; font-weight:700 !important; line-height:1 !important; } /* REAL SELECT: full-control transparent interaction layer. Browser keeps native language switching behavior. */ header .w9-language-v25 > #language{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; opacity:0 !important; cursor:pointer !important; z-index:5 !important; } /* Hover/focus polish. */ header .w9-language-v25:hover{ border-color: rgba(48,205,255,.72) !important; background: #0b1b2d !important; } header .w9-language-v25:focus-within{ border-color: #35d9ff !important; box-shadow: 0 0 0 2px rgba(30,190,255,.12) !important; } /* Critical: all previous V24 absolute-position declarations lose because old elements are hidden and V25 uses new classes. */ /* ===== END SOFTTECH V25 ===== */ /* ========================================================== SOFTTECH V25R1 — TRUE CENTERED LANGUAGE CONTENT ========================================================== */ /* CONTROL: fixed geometry independent of old SELECT dimensions. */ header .actions .w9-language-v25{ position:relative !important; width:auto !important; min-width:0 !important; height:42px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; margin:0 !important; box-sizing:border-box !important; } /* VISIBLE CONTENT: [ 20 flag ] [ label ] [ 12 chevron ] Equal 11px left/right edges. */ header .actions .w9-language-v25-visual{ position:relative !important; width:auto !important; height:40px !important; display:grid !important; grid-template-columns: 20px max-content 12px !important; align-items:center !important; justify-content:center !important; column-gap:8px !important; padding: 0 11px !important; margin:0 !important; box-sizing:border-box !important; pointer-events:none !important; } /* FLAG SHELL: exact same geometry for BOTH languages. */ header .actions .w9-language-v25-flag-shell{ position:static !important; grid-column:1 !important; width:20px !important; height:20px !important; min-width:20px !important; min-height:20px !important; max-width:20px !important; max-height:20px !important; margin:0 !important; padding:0 !important; align-self:center !important; justify-self:center !important; overflow:hidden !important; border-radius:50% !important; box-sizing:border-box !important; } /* Actual flag fills shell. */ header .actions .w9-language-v25-flag{ position:static !important; display:block !important; width:100% !important; height:100% !important; min-width:0 !important; min-height:0 !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; object-fit:cover !important; object-position:center !important; transform:none !important; border-radius:50% !important; box-shadow:none !important; } /* LABEL */ header .actions .w9-language-v25-label{ grid-column:2 !important; position:static !important; display:block !important; width:auto !important; margin:0 !important; padding:0 !important; align-self:center !important; justify-self:center !important; line-height:1 !important; white-space:nowrap !important; } /* CHEVRON */ header .actions .w9-language-v25-chevron{ grid-column:3 !important; position:static !important; display:flex !important; align-items:center !important; justify-content:center !important; width:12px !important; height:18px !important; margin:0 !important; padding:0 !important; transform:none !important; line-height:1 !important; } /* REAL SELECT: overlay ONLY. It cannot influence layout width anymore. */ header .actions .w9-language-v25 > #language{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; min-width:0 !important; max-width:none !important; margin:0 !important; padding:0 !important; opacity:0 !important; z-index:10 !important; cursor:pointer !important; } /* Kill ALL legacy flag geometry. */ header .actions .w9-language-v25 .w9-language-flag, header .actions .w9-language-v25 .w9-flag-us, header .actions .w9-language-v25 .w9-flag-bd{ position:static !important; left:auto !important; right:auto !important; top:auto !important; transform:none !important; } /* ===== END SOFTTECH V25R1 ===== */ /* ========================================================== SOFTTECH V26 — CANONICAL BANGLA TYPOGRAPHY Ekush: general Bangla UI / body / menu / buttons / text Alinur Kurigram: Bangla headings / headlines / titles only English typography remains unchanged. ========================================================== */ @font-face{ font-family:'Softtech Ekush'; src:url('/assets/fonts/bangla/Ekush-Regular.ttf') format('truetype'); font-style:normal; font-weight:400 900; font-display:swap; } @font-face{ font-family:'Softtech Alinur Kurigram'; src:url('/assets/fonts/bangla/AlinurKurigram-Unicode.ttf') format('truetype'); font-style:normal; font-weight:400 900; font-display:swap; } /* ---------------------------------------------------------- BANGLA GENERAL OWNER Applied only while document language is Bangla. English Manrope / Space Grotesk remain untouched. ---------------------------------------------------------- */ html[lang="bn"] body, html[lang="bn"] button, html[lang="bn"] input, html[lang="bn"] select, html[lang="bn"] textarea, html[lang="bn"] nav, html[lang="bn"] a, html[lang="bn"] p, html[lang="bn"] li, html[lang="bn"] label, html[lang="bn"] small, html[lang="bn"] footer, html[lang="bn"] .btn, html[lang="bn"] .ghost, html[lang="bn"] .founder, html[lang="bn"] .actions, html[lang="bn"] .w9-language-v25-label{ font-family: 'Softtech Ekush', 'Noto Sans Bengali', sans-serif !important; } /* ---------------------------------------------------------- BANGLA HEADLINE OWNER Alinur ONLY for actual headline/title typography. ---------------------------------------------------------- */ html[lang="bn"] h1, html[lang="bn"] h2, html[lang="bn"] h3, html[lang="bn"] h4, html[lang="bn"] h5, html[lang="bn"] h6, html[lang="bn"] .hero h1, html[lang="bn"] .section h2, html[lang="bn"] .services h3, html[lang="bn"] .pricing h3, html[lang="bn"] .case h3, html[lang="bn"] .contact h2, html[lang="bn"] .mock, html[lang="bn"] .headline, html[lang="bn"] .heading, html[lang="bn"] .section-title, html[lang="bn"] .hero-title, html[lang="bn"] .card-title{ font-family: 'Softtech Alinur Kurigram', 'Softtech Ekush', 'Noto Sans Bengali', sans-serif !important; /* Alinur has its own Bengali proportions. Kill English negative tracking on headings. */ letter-spacing:0 !important; } /* Headline readability */ html[lang="bn"] h1, html[lang="bn"] .hero h1{ line-height:1.12 !important; } html[lang="bn"] h2, html[lang="bn"] h3, html[lang="bn"] h4, html[lang="bn"] .section-title, html[lang="bn"] .card-title{ line-height:1.2 !important; } /* Navigation is GENERAL UI, therefore Ekush, NOT Alinur. */ html[lang="bn"] header nav, html[lang="bn"] header nav a{ font-family: 'Softtech Ekush', 'Noto Sans Bengali', sans-serif !important; letter-spacing:0 !important; } /* Buttons are also general UI. */ html[lang="bn"] .btn, html[lang="bn"] button{ font-family: 'Softtech Ekush', 'Noto Sans Bengali', sans-serif !important; letter-spacing:0 !important; } /* Eyebrow/kicker are small UI labels rather than headlines. */ html[lang="bn"] .eyebrow, html[lang="bn"] .kicker, html[lang="bn"] .trust{ font-family: 'Softtech Ekush', 'Noto Sans Bengali', sans-serif !important; letter-spacing:.08em !important; } /* ---------------------------------------------------------- MOBILE — SAME OWNERS ---------------------------------------------------------- */ @media(max-width:1000px){ html[lang="bn"] body, html[lang="bn"] nav, html[lang="bn"] button, html[lang="bn"] a, html[lang="bn"] p, html[lang="bn"] li, html[lang="bn"] label, html[lang="bn"] select{ font-family: 'Softtech Ekush', 'Noto Sans Bengali', sans-serif !important; } html[lang="bn"] h1, html[lang="bn"] h2, html[lang="bn"] h3, html[lang="bn"] h4, html[lang="bn"] h5, html[lang="bn"] h6, html[lang="bn"] .headline, html[lang="bn"] .heading, html[lang="bn"] .section-title, html[lang="bn"] .hero-title, html[lang="bn"] .card-title{ font-family: 'Softtech Alinur Kurigram', 'Softtech Ekush', 'Noto Sans Bengali', sans-serif !important; letter-spacing:0 !important; } } /* ===== END SOFTTECH V26 ===== */ /* ========================================================== SOFTTECH V26R1 — ALINUR BANGLA GLYPH CLIP FIX Preserve font + font size. Fix vertical geometry only. ========================================================== */ /* Alinur Bengali glyphs extend substantially above/below normal Latin metrics. Give headings a safe line box. */ html[lang="bn"] h1, html[lang="bn"] h2, html[lang="bn"] h3, html[lang="bn"] h4, html[lang="bn"] h5, html[lang="bn"] h6, html[lang="bn"] .headline, html[lang="bn"] .heading, html[lang="bn"] .section-title, html[lang="bn"] .hero-title, html[lang="bn"] .card-title{ line-height:1.32 !important; overflow:visible !important; padding-top:.14em !important; padding-bottom:.14em !important; box-sizing:content-box !important; } /* Main hero headline needs slightly more room because it uses the largest font size on the site. */ html[lang="bn"] .hero h1{ line-height:1.30 !important; padding-top:.18em !important; padding-bottom:.18em !important; margin-top:10px !important; margin-bottom:12px !important; overflow:visible !important; } /* Containers surrounding the hero copy must not clip Alinur ascenders/descenders. */ html[lang="bn"] .hero-copy, html[lang="bn"] .hero-copy > *, html[lang="bn"] .section, html[lang="bn"] .section > *{ overflow:visible; } /* Do NOT inherit the English negative letter spacing. */ html[lang="bn"] .hero h1, html[lang="bn"] .section h2, html[lang="bn"] h1, html[lang="bn"] h2, html[lang="bn"] h3{ letter-spacing:0 !important; } /* Mobile keeps the same safe Bengali metrics. */ @media(max-width:650px){ html[lang="bn"] .hero h1{ line-height:1.32 !important; padding-top:.18em !important; padding-bottom:.18em !important; } html[lang="bn"] h2, html[lang="bn"] h3{ line-height:1.34 !important; } } /* ===== END SOFTTECH V26R1 ===== */ /* ========================================================== SOFTTECH V26R2 PROMO -> HERO CLEAN TRANSITION OWNER Remove old artificial transition shape/blank slab. Preserve actual promo/banner and hero content. ========================================================== */ /* Kill ONLY the generated transition pseudo shape */ .promo::after{ content:none !important; display:none !important; background:none !important; height:0 !important; min-height:0 !important; opacity:0 !important; } /* * Old blend layer must not create a large dark block. * Keep only a very shallow edge fade over the banner itself. */ .promo-blend{ height:42px !important; bottom:0 !important; background:linear-gradient( 180deg, rgba(5,11,21,0) 0%, rgba(5,11,21,.34) 55%, #050b15 100% ) !important; -webkit-mask-image:none !important; mask-image:none !important; } /* * Hero begins directly after banner. * No artificial negative/positive transition slab. */ .hero.hero-v4{ margin-top:0 !important; padding-top:28px !important; } /* Hero content itself stays visible and unclipped */ .hero.hero-v4, .hero.hero-v4 .hero-copy, .hero.hero-v4 .hero-copy-centered{ overflow:visible !important; } /* Keep localized hero readability halo only */ .hero.hero-v4::before{ pointer-events:none !important; } /* Mobile: same clean transition */ @media (max-width:650px){ .promo-blend{ height:28px !important; } .hero.hero-v4{ margin-top:0 !important; padding-top:18px !important; } } /* ========================================================== SOFTTECH V27 — CANONICAL WHATSAPP ICON ========================================================== */ .wa{ width:56px !important; height:56px !important; padding:0 !important; overflow:hidden !important; display:flex !important; align-items:center !important; justify-content:center !important; background: rgba(5,18,25,.92) url('/assets/ui/whatsapp.png') center/38px 38px no-repeat !important; border:1px solid rgba(40,255,172,.52) !important; border-radius:50% !important; font-size:0 !important; color:transparent !important; box-shadow: 0 8px 28px rgba(0,0,0,.42), 0 0 20px rgba(31,198,107,.20) !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important; } .wa:hover{ transform:translateY(-3px) scale(1.04) !important; border-color:rgba(55,255,180,.88) !important; box-shadow: 0 12px 34px rgba(0,0,0,.52), 0 0 26px rgba(31,198,107,.34) !important; } .wa img, .wa svg{ display:none !important; } @media(max-width:650px){ .wa{ width:50px !important; height:50px !important; right:16px !important; bottom:16px !important; background-size:34px 34px !important; } } /* ========================================================== SOFTTECH V27R1 — PREMIUM WHATSAPP CONTACT TYPOGRAPHY ========================================================== */ /* * Contact WhatsApp text/card. * Keep geometry and actual number unchanged. */ a[href*="wa.me"]:not(.wa), a[href*="whatsapp"]:not(.wa), .whatsapp-contact, .whatsapp-number, .contact-whatsapp{ font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif !important; font-size:17px !important; font-weight:650 !important; line-height:1.15 !important; letter-spacing:.012em !important; color:#f4f8ff !important; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums lining-nums; text-shadow: 0 0 16px rgba(50,210,255,.10) !important; } /* * Bangla mode must NOT replace phone-number typography * with the Bengali body font. */ html[lang="bn"] a[href*="wa.me"]:not(.wa), html[lang="bn"] a[href*="whatsapp"]:not(.wa), html[lang="bn"] .whatsapp-contact, html[lang="bn"] .whatsapp-number, html[lang="bn"] .contact-whatsapp{ font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif !important; font-weight:650 !important; letter-spacing:.012em !important; } /* Mobile */ @media(max-width:650px){ a[href*="wa.me"]:not(.wa), a[href*="whatsapp"]:not(.wa), .whatsapp-contact, .whatsapp-number, .contact-whatsapp{ font-size:15px !important; font-weight:650 !important; letter-spacing:.006em !important; } } /* ===== END SOFTTECH V27R1 ===== */ /* ========================================================== SOFTTECH V27R2 — WHATSAPP CONTACT EXACT OWNER ========================================================== */ /* Contact link: REAL WhatsApp asset immediately before text. */ a[href*="wa.me"]:not(.wa), a[href*="whatsapp"]:not(.wa), .whatsapp-contact, .contact-whatsapp{ position:relative !important; display:inline-flex !important; align-items:center !important; justify-content:flex-start !important; gap:5px !important; padding-left:14px !important; font-family:Arial, Helvetica, sans-serif !important; font-weight:700 !important; letter-spacing:0 !important; white-space:nowrap !important; } /* Real uploaded WhatsApp asset. */ a[href*="wa.me"]:not(.wa)::before, a[href*="whatsapp"]:not(.wa)::before, .whatsapp-contact::before, .contact-whatsapp::before{ content:"" !important; display:block !important; flex:0 0 18px !important; width:18px !important; height:18px !important; margin:0 !important; padding:0 !important; background: url('/assets/ui/whatsapp.png') center center / contain no-repeat !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; } /* NUMBER: Arial specifically. */ .whatsapp-number, a[href*="wa.me"]:not(.wa){ font-family:Arial, Helvetica, sans-serif !important; font-variant-numeric:tabular-nums !important; font-weight:700 !important; letter-spacing:0 !important; } /* Remove old decorative/text-circle owner if it is implemented as another pseudo element. */ a[href*="wa.me"]:not(.wa)::after, a[href*="whatsapp"]:not(.wa)::after, .whatsapp-contact::after, .contact-whatsapp::after{ content:none !important; display:none !important; } /* Bangla state must not replace this contact font */ html[lang="bn"] a[href*="wa.me"]:not(.wa), html[lang="bn"] a[href*="whatsapp"]:not(.wa), html[lang="bn"] .whatsapp-contact, html[lang="bn"] .contact-whatsapp, html[lang="bn"] .whatsapp-number{ font-family:Arial, Helvetica, sans-serif !important; letter-spacing:0 !important; } @media(max-width:650px){ a[href*="wa.me"]:not(.wa), a[href*="whatsapp"]:not(.wa), .whatsapp-contact, .contact-whatsapp{ gap:4px !important; } a[href*="wa.me"]:not(.wa)::before, a[href*="whatsapp"]:not(.wa)::before, .whatsapp-contact::before, .contact-whatsapp::before{ width:17px !important; height:17px !important; flex-basis:17px !important; } } /* ===== END SOFTTECH V27R2 ===== */ /* ========================================================== SOFTTECH V27R3 — WHATSAPP EXACT DISPLAY OWNER ========================================================== */ a[href*="wa.me"]:not(.wa), a[href*="whatsapp"]:not(.wa), .whatsapp-contact, .contact-whatsapp, .whatsapp-number{ font-family:Arial, Helvetica, sans-serif !important; letter-spacing:0 !important; word-spacing:0 !important; font-kerning:normal !important; font-variant-numeric:normal !important; } /* Real uploaded asset stays immediately beside the label */ a[href*="wa.me"]:not(.wa)::before, a[href*="whatsapp"]:not(.wa)::before, .whatsapp-contact::before, .contact-whatsapp::before{ content:"" !important; width:18px !important; height:18px !important; flex:0 0 18px !important; margin:0 4px 0 0 !important; padding:0 !important; background: url('/assets/ui/whatsapp.png') center/contain no-repeat !important; } /* No generated secondary icon */ a[href*="wa.me"]:not(.wa)::after, a[href*="whatsapp"]:not(.wa)::after, .whatsapp-contact::after, .contact-whatsapp::after{ content:none !important; display:none !important; } /* ===== END SOFTTECH V27R3 ===== */ /* ========================================================== SOFTTECH V27R4 — LANGUAGE CHEVRON EXACT ALIGNMENT ========================================================== */ header .actions .w9-language-v25-chevron{ position:relative !important; width:12px !important; height:12px !important; display:flex !important; align-items:center !important; justify-content:center !important; /* slightly left + true optical vertical center */ left:-2px !important; top:-1px !important; margin:0 !important; padding:0 !important; line-height:12px !important; transform:none !important; } /* If chevron is rendered as text/SVG inside the owner, center that child as well. */ header .actions .w9-language-v25-chevron > *{ display:block !important; margin:0 !important; padding:0 !important; position:static !important; transform:none !important; } /* Mobile needs the same optical alignment */ @media(max-width:650px){ header .actions .w9-language-v25-chevron{ left:-2px !important; top:-1px !important; } } /* ===== END SOFTTECH V27R4 ===== */ /* ========================================================== SOFTTECH V27R5 — CHEVRON VERTICAL OPTICAL CENTER ========================================================== */ header .actions .w9-language-v25-chevron{ top:-3px !important; /* retain V27R4 horizontal correction */ left:-2px !important; } /* ===== END SOFTTECH V27R5 ===== */ /* ========================================================== SOFTTECH V27R6 — LANGUAGE TRUE CENTER ========================================================== */ /* * One row owns ALL THREE elements. * No optical top/left hacks. */ header .actions .w9-language-v25-visual{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; gap:7px !important; height:40px !important; min-height:40px !important; padding:0 10px !important; margin:0 !important; line-height:1 !important; box-sizing:border-box !important; } /* FLAG — centered on same axis */ header .actions .w9-language-v25-flag-shell{ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; flex:0 0 20px !important; width:20px !important; height:20px !important; margin:0 !important; padding:0 !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; transform:none !important; align-self:center !important; } /* LABEL — centered on same axis */ header .actions .w9-language-v25-label{ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; height:20px !important; margin:0 !important; padding:0 !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; transform:none !important; line-height:20px !important; align-self:center !important; } /* CHEVRON — TRUE CENTER, ZERO OFFSET */ header .actions .w9-language-v25-chevron{ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; flex:0 0 12px !important; width:12px !important; height:20px !important; margin:0 !important; padding:0 !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; transform:none !important; line-height:20px !important; align-self:center !important; } /* * Whatever actual glyph/SVG is inside the chevron: * center it inside the 12×20 box. */ header .actions .w9-language-v25-chevron > *{ position:static !important; display:flex !important; align-items:center !important; justify-content:center !important; width:12px !important; height:20px !important; margin:0 !important; padding:0 !important; transform:none !important; line-height:20px !important; } /* Same geometry on mobile */ @media(max-width:650px){ header .actions .w9-language-v25-visual{ align-items:center !important; gap:7px !important; } header .actions .w9-language-v25-chevron{ top:auto !important; left:auto !important; transform:none !important; align-self:center !important; } } /* ===== END SOFTTECH V27R6 ===== */ /* ========================================================== V27R6A — LANGUAGE CHEVRON FINAL OPTICAL ALIGNMENT ========================================================== */ header .actions .w9-language-v25-chevron{ position:relative !important; /* retain horizontal position */ left:auto !important; right:auto !important; /* ONLY correction required */ top:-2px !important; margin:0 !important; padding:0 !important; transform:none !important; } /* ===== END V27R6A ===== */ /* ========================================================== V27R6C — CHEVRON GLYPH-ONLY CORRECTION Browser measurement: LANG WRAP centerY = 40.5px USD SELECT centerY = 40.5px Therefore NO control movement is required. Only the baseline-sensitive text glyph is replaced. ========================================================== */ header .actions .w9-language-v25-chevron{ /* * Preserve measured existing box: * top 28.5 → bottom 48.5 = 20px * box center = 38.5, but DO NOT reposition this owner; * visual V is independently centered relative to the * control axis using the existing flex geometry. */ position:relative !important; width:12px !important; height:20px !important; flex:0 0 12px !important; margin:0 !important; padding:0 !important; font-size:0 !important; line-height:0 !important; color:transparent !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; transform:none !important; align-self:center !important; } /* * A single border-based V. * No font baseline exists anymore. * * 7×7 square rotated 45deg: * right + bottom borders form the downward chevron. */ header .actions .w9-language-v25-chevron::after{ content:"" !important; position:absolute !important; width:6px !important; height:6px !important; left:50% !important; top:50% !important; margin:0 !important; padding:0 !important; border:0 !important; border-right:2px solid #dbe8f5 !important; border-bottom:2px solid #dbe8f5 !important; background:transparent !important; box-sizing:border-box !important; /* * translate centers the SHAPE first; * rotate then produces the V. */ transform: translate(-50%, -50%) rotate(45deg) !important; transform-origin:center !important; pointer-events:none !important; } /* Prevent any historical pseudo-owner collision */ header .actions .w9-language-v25-chevron::before{ content:none !important; display:none !important; } /* ===== END V27R6C ===== */ /* ========================================================== SOFTTECH V28 — MOBILE PROMO/BANNER ARROW OWNER Desktop rules remain untouched. ========================================================== */ @media (max-width:650px){ /* * Both navigation buttons: * compact mobile touch target. */ .promo-arrow{ width:42px !important; height:42px !important; min-width:42px !important; min-height:42px !important; padding:0 !important; margin:0 !important; position:absolute !important; top:50% !important; bottom:auto !important; transform:translateY(-50%) !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important; z-index:20 !important; } /* LEFT — close to banner edge */ .promo-arrow.prev{ left:10px !important; right:auto !important; } /* RIGHT — close to banner edge */ .promo-arrow.next{ right:10px !important; left:auto !important; } /* * Canonical arrow PNG itself. * Desktop-sized image must NOT fill mobile button. */ .promo-arrow img{ display:block !important; width:17px !important; height:17px !important; max-width:17px !important; max-height:17px !important; object-fit:contain !important; margin:0 !important; padding:0 !important; position:static !important; } /* * If arrow asset is implemented through pseudo-elements * instead of IMG, constrain that path too. */ .promo-arrow::before, .promo-arrow::after{ background-size:17px 17px !important; background-repeat:no-repeat !important; background-position:center !important; } /* * LEFT asset remains normal. * RIGHT uses same canonical asset rotated 180deg. */ .promo-arrow.prev img{ transform:none !important; } .promo-arrow.next img{ transform:rotate(180deg) !important; } } /* Extra-small phones */ @media (max-width:390px){ .promo-arrow{ width:38px !important; height:38px !important; min-width:38px !important; min-height:38px !important; } .promo-arrow.prev{ left:8px !important; } .promo-arrow.next{ right:8px !important; } .promo-arrow img{ width:15px !important; height:15px !important; max-width:15px !important; max-height:15px !important; } } /* ===== END SOFTTECH V28 ===== */ /* ========================================================== SOFTTECH V28R1 — MOBILE ARROW SIZE ONLY V28 position is intentionally preserved. ========================================================== */ @media (max-width:650px){ /* smaller circular navigation control */ .promo-arrow{ width:28px !important; height:28px !important; min-width:28px !important; min-height:28px !important; max-width:28px !important; max-height:28px !important; padding:0 !important; /* KEEP V28 POSITION */ top:50% !important; transform:translateY(-50%) !important; } .promo-arrow.prev{ left:10px !important; } .promo-arrow.next{ right:10px !important; } /* actual PNG arrow */ .promo-arrow img{ width:10px !important; height:10px !important; min-width:10px !important; min-height:10px !important; max-width:10px !important; max-height:10px !important; object-fit:contain !important; } /* * Cover CSS background-image implementations too. */ .promo-arrow{ background-size:10px 10px !important; background-position:center !important; background-repeat:no-repeat !important; } .promo-arrow::before, .promo-arrow::after{ background-size:10px 10px !important; } } /* Very small phones */ @media (max-width:390px){ .promo-arrow{ width:26px !important; height:26px !important; min-width:26px !important; min-height:26px !important; max-width:26px !important; max-height:26px !important; } .promo-arrow img{ width:9px !important; height:9px !important; min-width:9px !important; min-height:9px !important; max-width:9px !important; max-height:9px !important; } .promo-arrow{ background-size:9px 9px !important; } .promo-arrow::before, .promo-arrow::after{ background-size:9px 9px !important; } } /* ===== END SOFTTECH V28R1 ===== */ /* ========================================================== SOFTTECH V29 — CONTACT BOX TRUE CENTER Website + WhatsApp ========================================================== */ /* * Contact pills/buttons. * Covers common href owners without changing destination. */ a[href*="softtechbd.world"], a[href*="wa.me"], a[href*="whatsapp"], .contact-info a[href*="softtechbd.world"], .contact-info a[href*="wa.me"], .contact-info a[href*="whatsapp"]{ display:flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; gap:7px !important; min-height:46px !important; padding:0 16px !important; box-sizing:border-box !important; line-height:1 !important; } /* * Text: * slightly larger and clean. */ a[href*="softtechbd.world"], a[href*="wa.me"], a[href*="whatsapp"]{ font-size:15px !important; font-weight:700 !important; } /* * Every icon/image inside both contact controls. */ a[href*="softtechbd.world"] img, a[href*="wa.me"] img, a[href*="whatsapp"] img{ width:20px !important; height:20px !important; min-width:20px !important; min-height:20px !important; max-width:20px !important; max-height:20px !important; flex:0 0 20px !important; object-fit:contain !important; margin:0 !important; padding:0 !important; position:static !important; transform:none !important; vertical-align:middle !important; } /* * Icon-font / SVG owners. */ a[href*="softtechbd.world"] svg, a[href*="wa.me"] svg, a[href*="whatsapp"] svg{ width:20px !important; height:20px !important; flex:0 0 20px !important; margin:0 !important; position:static !important; transform:none !important; } /* * Remove inherited offset from children. */ a[href*="softtechbd.world"] > *, a[href*="wa.me"] > *, a[href*="whatsapp"] > *{ top:auto !important; bottom:auto !important; left:auto !important; right:auto !important; align-self:center !important; } /* ---------------------------------------------------------- MOBILE Keep same true-center contract. Slightly compact box, but text/icon remain clearly visible. ---------------------------------------------------------- */ @media (max-width:650px){ a[href*="softtechbd.world"], a[href*="wa.me"], a[href*="whatsapp"], .contact-info a[href*="softtechbd.world"], .contact-info a[href*="wa.me"], .contact-info a[href*="whatsapp"]{ display:flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; gap:6px !important; min-height:42px !important; padding:0 12px !important; font-size:14px !important; font-weight:700 !important; line-height:1 !important; } a[href*="softtechbd.world"] img, a[href*="wa.me"] img, a[href*="whatsapp"] img, a[href*="softtechbd.world"] svg, a[href*="wa.me"] svg, a[href*="whatsapp"] svg{ width:18px !important; height:18px !important; min-width:18px !important; min-height:18px !important; max-width:18px !important; max-height:18px !important; flex:0 0 18px !important; margin:0 !important; } } /* ===== END SOFTTECH V29 ===== */ /* ========================================================== SOFTTECH V29R1 — CONTACT LINKS EXACT CENTER OWNER Verified DOM:
WEBSITE WHATSAPP
========================================================== */ /* Parent owns only stacking/spacing */ .contact-links{ width:100% !important; display:grid !important; grid-template-columns:minmax(0,1fr) !important; justify-items:stretch !important; align-items:stretch !important; gap:10px !important; padding:0 !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; } /* * ACTUAL TWO BOXES. * * justify-content:center = horizontal middle * align-items:center = vertical middle */ .contact-links > a{ width:100% !important; min-width:0 !important; min-height:48px !important; display:flex !important; flex-direction:row !important; justify-content:center !important; align-items:center !important; text-align:center !important; gap:7px !important; margin:0 !important; padding:0 14px !important; box-sizing:border-box !important; font-family:Arial, Helvetica, sans-serif !important; font-size:16px !important; font-weight:700 !important; line-height:1 !important; white-space:nowrap !important; text-indent:0 !important; position:relative !important; } /* * Remove inherited alignment hacks from actual links. */ .contact-links > a:first-child, .contact-links > a:last-child{ justify-content:center !important; align-items:center !important; text-align:center !important; padding-left:14px !important; padding-right:14px !important; transform:none !important; } /* ---------------------------------------------------------- MOBILE Same center contract — not left aligned. ---------------------------------------------------------- */ @media (max-width:650px){ .contact-links{ width:100% !important; gap:8px !important; } .contact-links > a{ width:100% !important; min-height:44px !important; display:flex !important; justify-content:center !important; align-items:center !important; text-align:center !important; padding:0 10px !important; font-family:Arial, Helvetica, sans-serif !important; font-size:14px !important; font-weight:700 !important; line-height:1 !important; white-space:nowrap !important; } } /* Small phones — still centered */ @media (max-width:390px){ .contact-links > a{ min-height:42px !important; font-size:13px !important; padding-left:8px !important; padding-right:8px !important; } } /* ===== END SOFTTECH V29R1 ===== */ /* ========================================================== SOFTTECH V30 — CONTACT TEXT PREMIUM ANIMATION ========================================================== */ /* * Keep current box geometry/centering completely intact. */ .contact-links > a{ overflow:hidden !important; } /* * Premium animated text effect. * Background is clipped to glyphs only. */ .contact-links > a{ color:transparent !important; background-image: linear-gradient( 105deg, #ffffff 0%, #ffffff 30%, #35e8ff 44%, #ffffff 55%, #ffffff 100% ) !important; background-size:220% 100% !important; background-position:100% 50%; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; animation: softtechContactShimmer 3.8s ease-in-out infinite !important; } /* * WhatsApp gets a very subtle green highlight, * while keeping the same premium animation style. */ .contact-links > a[href*="wa.me"]{ background-image: linear-gradient( 105deg, #ffffff 0%, #ffffff 30%, #42f58d 44%, #ffffff 55%, #ffffff 100% ) !important; animation-delay:.65s !important; } @keyframes softtechContactShimmer{ 0%{ background-position:120% 50%; filter: brightness(1) drop-shadow(0 0 0 rgba(53,232,255,0)); } 42%{ filter: brightness(1) drop-shadow(0 0 0 rgba(53,232,255,0)); } 55%{ background-position:-20% 50%; filter: brightness(1.12) drop-shadow(0 0 3px rgba(53,232,255,.30)); } 72%, 100%{ background-position:-20% 50%; filter: brightness(1) drop-shadow(0 0 0 rgba(53,232,255,0)); } } /* * Do not animate geometry on hover. */ .contact-links > a:hover{ transform:none !important; } /* * Accessibility: * user requesting reduced motion gets static text. */ @media (prefers-reduced-motion:reduce){ .contact-links > a{ animation:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important; background-image:none !important; filter:none !important; } } /* ===== END SOFTTECH V30 ===== */ /* ========================================================== SOFTTECH V31 — PREMIUM HEADLINE MOTION ========================================================== */ /* ---------------------------------------------------------- BASE SHIMMER ENGINE Only actual textual headings. Pricing amounts are explicitly excluded below. ---------------------------------------------------------- */ h1, h2, h3:not([data-price]){ background-size:240% 100% !important; background-position:100% 50%; -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; -webkit-text-fill-color:transparent !important; will-change:background-position,filter; } /* ---------------------------------------------------------- HERO H1 WHITE → ELECTRIC CYAN → BLUE → WHITE ---------------------------------------------------------- */ h1{ background-image:linear-gradient( 105deg, #ffffff 0%, #ffffff 28%, #48efff 42%, #178cff 50%, #8cf7ff 57%, #ffffff 70%, #ffffff 100% ) !important; animation: w9HeadlineHero 6.2s ease-in-out infinite !important; } @keyframes w9HeadlineHero{ 0%,18%{ background-position:110% 50%; filter:drop-shadow(0 0 0 rgba(40,220,255,0)); } 52%{ background-position:-10% 50%; filter:drop-shadow(0 0 5px rgba(40,220,255,.20)); } 70%,100%{ background-position:-10% 50%; filter:drop-shadow(0 0 0 rgba(40,220,255,0)); } } /* * Existing hero emphasized phrase remains stronger. */ h1 em{ color:inherit !important; -webkit-text-fill-color:inherit !important; font-style:inherit; } /* ---------------------------------------------------------- SOLUTIONS CYAN / ICE BLUE ---------------------------------------------------------- */ h2[data-i18n="solutionsTitle"], h3[data-i18n^="service"]{ background-image:linear-gradient( 110deg, #ffffff 0%, #ffffff 30%, #36f1ff 45%, #3ca8ff 52%, #ffffff 66%, #ffffff 100% ) !important; animation: w9HeadlineCyan 5.6s ease-in-out infinite !important; } /* ---------------------------------------------------------- TEMPLATES VIOLET / MAGENTA / ICE ---------------------------------------------------------- */ h2[data-i18n="templatesTitle"], #templates h3{ background-image:linear-gradient( 110deg, #ffffff 0%, #ffffff 28%, #b967ff 42%, #ff4fd8 50%, #7beeff 58%, #ffffff 70%, #ffffff 100% ) !important; animation: w9HeadlineViolet 6.4s ease-in-out infinite !important; } /* ---------------------------------------------------------- PRICING SECTION TITLE ONLY GOLD / CYAN $99 / $199 / $349 / Custom cards stay untouched. ---------------------------------------------------------- */ h2[data-i18n="pricingTitle"]{ background-image:linear-gradient( 110deg, #ffffff 0%, #ffffff 28%, #ffd75a 42%, #ff9f1c 49%, #48efff 58%, #ffffff 70%, #ffffff 100% ) !important; animation: w9HeadlineGold 6.1s ease-in-out infinite !important; } /* Restore pricing H3 values completely */ h3[data-price]{ background-image:none !important; animation:none !important; color:inherit !important; -webkit-text-fill-color:initial !important; filter:none !important; } /* ---------------------------------------------------------- WORK / PORTFOLIO GREEN → CYAN ---------------------------------------------------------- */ h2[data-i18n="workTitle"], #portfolio h3{ background-image:linear-gradient( 110deg, #ffffff 0%, #ffffff 30%, #36f5a5 43%, #22d9ff 52%, #ffffff 68%, #ffffff 100% ) !important; animation: w9HeadlineGreen 6.6s ease-in-out infinite !important; } /* ---------------------------------------------------------- ABOUT CYAN → VIOLET ---------------------------------------------------------- */ h2[data-i18n="aboutTitle"]{ background-image:linear-gradient( 110deg, #ffffff 0%, #ffffff 30%, #48efff 43%, #8f6bff 52%, #ffffff 68%, #ffffff 100% ) !important; animation: w9HeadlineViolet 6.8s ease-in-out infinite !important; } /* ---------------------------------------------------------- QUOTE BLUE → CYAN ---------------------------------------------------------- */ h2[data-i18n="quoteTitle"]{ background-image:linear-gradient( 110deg, #ffffff 0%, #ffffff 30%, #198cff 43%, #36efff 52%, #ffffff 68%, #ffffff 100% ) !important; animation: w9HeadlineCyan 6.2s ease-in-out infinite !important; } /* ---------------------------------------------------------- CONTACT CYAN → GREEN ---------------------------------------------------------- */ h2[data-i18n="contactTitle"]{ background-image:linear-gradient( 110deg, #ffffff 0%, #ffffff 30%, #36efff 43%, #42f58d 52%, #ffffff 68%, #ffffff 100% ) !important; animation: w9HeadlineGreen 6.4s ease-in-out infinite !important; } /* ========================================================== SHARED MOTION ========================================================== */ @keyframes w9HeadlineCyan{ 0%,20%{ background-position:115% 50%; } 55%{ background-position:-15% 50%; filter:drop-shadow(0 0 4px rgba(54,239,255,.18)); } 72%,100%{ background-position:-15% 50%; filter:none; } } @keyframes w9HeadlineViolet{ 0%,24%{ background-position:115% 50%; } 58%{ background-position:-15% 50%; filter:drop-shadow(0 0 4px rgba(185,103,255,.18)); } 76%,100%{ background-position:-15% 50%; filter:none; } } @keyframes w9HeadlineGold{ 0%,22%{ background-position:115% 50%; } 56%{ background-position:-15% 50%; filter:drop-shadow(0 0 4px rgba(255,196,60,.18)); } 74%,100%{ background-position:-15% 50%; filter:none; } } @keyframes w9HeadlineGreen{ 0%,26%{ background-position:115% 50%; } 60%{ background-position:-15% 50%; filter:drop-shadow(0 0 4px rgba(54,245,165,.16)); } 78%,100%{ background-position:-15% 50%; filter:none; } } /* ========================================================== CTA TEXT + ARROW Exact verified owner: .softtech-cta-arrow-owner Banner .promo-arrow is NOT targeted. ========================================================== */ .softtech-cta-arrow-owner{ position:relative !important; color:#52efff !important; transition: color .25s ease, text-shadow .25s ease !important; animation: w9CtaColor 3.8s ease-in-out infinite !important; } /* * Existing CTA arrow owner. * Add premium horizontal breathing motion. */ .softtech-cta-arrow-owner::after{ animation: w9CtaArrowMove 1.55s ease-in-out infinite !important; will-change:transform; } @keyframes w9CtaColor{ 0%,100%{ color:#52efff; text-shadow:0 0 0 rgba(82,239,255,0); } 50%{ color:#ffffff; text-shadow:0 0 7px rgba(82,239,255,.42); } } @keyframes w9CtaArrowMove{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(4px); } } /* * Hover = slightly stronger but still controlled. */ .softtech-cta-arrow-owner:hover{ color:#ffffff !important; text-shadow: 0 0 8px rgba(55,232,255,.55) !important; } /* ========================================================== MOBILE Same premium colors, softer effects. ========================================================== */ @media (max-width:650px){ h1, h2, h3:not([data-price]){ background-size:260% 100% !important; } h1{ animation-duration:7.2s !important; } h2, h3:not([data-price]){ animation-duration:7.5s !important; } .softtech-cta-arrow-owner{ animation-duration:4.5s !important; } .softtech-cta-arrow-owner::after{ animation-duration:1.8s !important; } @keyframes w9CtaArrowMove{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(3px); } } } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion:reduce){ h1, h2, h3:not([data-price]), .softtech-cta-arrow-owner, .softtech-cta-arrow-owner::after{ animation:none !important; filter:none !important; } h1, h2, h3:not([data-price]){ background-position:50% 50% !important; } } /* ===== END SOFTTECH V31 ===== */ /* ========================================================== SOFTTECH V32 — SOLUTIONS PREMIUM ASSET OWNER ========================================================== */ #solutions .services > article{ overflow:hidden !important; display:flex !important; flex-direction:column !important; position:relative !important; padding-top:0 !important; } /* * Premium visual viewport. * Original image ratio = 1672 / 941 ≈ 1.7779. */ #solutions .softtech-service-visual{ width:calc(100% + 2px) !important; aspect-ratio:1672 / 941 !important; margin: -1px -1px 22px -1px !important; position:relative !important; overflow:hidden !important; border-radius: inherit inherit 14px 14px !important; background:#06111d !important; isolation:isolate !important; } /* Asset itself */ #solutions .softtech-service-visual > img{ display:block !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; margin:0 !important; padding:0 !important; transform:scale(1.001); transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease !important; } /* * Bottom integration gradient. * Makes visual naturally merge into card body. */ #solutions .softtech-service-visual::after{ content:"" !important; position:absolute !important; inset:0 !important; pointer-events:none !important; background: linear-gradient( to bottom, transparent 58%, rgba(6,17,29,.18) 72%, rgba(6,17,29,.72) 100% ) !important; z-index:1 !important; } /* * Very subtle premium hover. * No card/layout movement. */ @media (hover:hover){ #solutions .services > article:hover .softtech-service-visual > img{ transform:scale(1.035); filter: brightness(1.06) saturate(1.06); } } /* * Existing content needs original horizontal card padding * because only the image touches the card edges. */ #solutions .services > article > b, #solutions .services > article > h3, #solutions .services > article > p, #solutions .services > article > a{ margin-left:28px !important; margin-right:28px !important; } #solutions .services > article > b{ margin-top:0 !important; } #solutions .services > article > a{ margin-top:auto !important; margin-bottom:28px !important; } /* ---------------------------------------------------------- TABLET ---------------------------------------------------------- */ @media (max-width:900px){ #solutions .softtech-service-visual{ margin-bottom:18px !important; } #solutions .services > article > b, #solutions .services > article > h3, #solutions .services > article > p, #solutions .services > article > a{ margin-left:22px !important; margin-right:22px !important; } #solutions .services > article > a{ margin-bottom:22px !important; } } /* ---------------------------------------------------------- MOBILE Full image remains readable; ratio preserved. ---------------------------------------------------------- */ @media (max-width:650px){ #solutions .softtech-service-visual{ width:calc(100% + 2px) !important; aspect-ratio:1672 / 941 !important; margin: -1px -1px 16px -1px !important; border-radius: inherit inherit 11px 11px !important; } #solutions .softtech-service-visual > img{ object-fit:cover !important; object-position:center !important; transform:none !important; } #solutions .services > article > b, #solutions .services > article > h3, #solutions .services > article > p, #solutions .services > article > a{ margin-left:18px !important; margin-right:18px !important; } #solutions .services > article > a{ margin-bottom:20px !important; } } /* Reduced motion */ @media (prefers-reduced-motion:reduce){ #solutions .softtech-service-visual > img{ transition:none !important; transform:none !important; } } /* ===== END SOFTTECH V32 ===== */ /* ========================================================== SOFTTECH V33 SOLUTIONS — PREMIUM FLOATING PRODUCT SHOWCASE ========================================================== */ /* * Card composition: * no numbered label, * no banner-like image, * generous visual stage, * image blends naturally into card. */ #solutions .services > article{ position:relative !important; overflow:hidden !important; display:flex !important; flex-direction:column !important; padding:0 30px 30px !important; background: radial-gradient( circle at 50% 12%, rgba(38,151,255,.075), transparent 35% ), linear-gradient( 180deg, rgba(7,22,36,.98) 0%, rgba(5,18,31,.99) 100% ) !important; } /* * Visual stage. * It deliberately does NOT touch card edges. */ #solutions .softtech-service-visual{ width:100% !important; height:205px !important; aspect-ratio:auto !important; margin:10px auto 12px !important; display:flex !important; align-items:center !important; justify-content:center !important; position:relative !important; overflow:visible !important; border:0 !important; border-radius:0 !important; background:transparent !important; isolation:isolate !important; } /* * Soft atmospheric glow behind the product render. */ #solutions .softtech-service-visual::before{ content:"" !important; position:absolute !important; left:10% !important; right:10% !important; bottom:12px !important; height:48% !important; border-radius:50% !important; background: radial-gradient( ellipse at center, rgba(0,180,255,.14) 0%, rgba(0,123,255,.065) 42%, transparent 72% ) !important; filter:blur(18px) !important; pointer-events:none !important; z-index:0 !important; } /* Kill V32 banner integration overlay. */ #solutions .softtech-service-visual::after{ content:none !important; display:none !important; } /* * Product image: * contain = absolutely no crop. * It becomes a floating showcase rather than a thumbnail. */ #solutions .softtech-service-visual > img{ display:block !important; width:auto !important; height:auto !important; max-width:100% !important; max-height:195px !important; object-fit:contain !important; object-position:center !important; margin:0 auto !important; padding:0 !important; position:relative !important; z-index:1 !important; transform:scale(.96) !important; filter: drop-shadow(0 18px 22px rgba(0,0,0,.30)) saturate(1.05) contrast(1.025) !important; transition: transform .55s cubic-bezier(.2,.75,.2,1), filter .55s ease !important; } /* * Existing V32 content margins are overridden because * V33 card itself now owns horizontal padding. */ #solutions .services > article > h3, #solutions .services > article > p, #solutions .services > article > a{ margin-left:0 !important; margin-right:0 !important; } /* Title sits close to visual, without numbered dead-space. */ #solutions .services > article > h3{ margin-top:4px !important; margin-bottom:12px !important; position:relative !important; z-index:2 !important; } /* Description gets clean premium breathing room. */ #solutions .services > article > p{ margin-top:0 !important; margin-bottom:24px !important; line-height:1.65 !important; position:relative !important; z-index:2 !important; } /* CTA remains aligned at card bottom. */ #solutions .services > article > a{ margin-top:auto !important; margin-bottom:0 !important; position:relative !important; z-index:2 !important; } /* * Extra subtle top highlight. */ #solutions .services > article::before{ content:"" !important; position:absolute !important; top:0 !important; left:13% !important; right:13% !important; height:1px !important; background: linear-gradient( 90deg, transparent, rgba(73,196,255,.34), transparent ) !important; pointer-events:none !important; } /* Desktop hover: product itself comes forward. */ @media (hover:hover){ #solutions .services > article:hover .softtech-service-visual > img{ transform: translateY(-4px) scale(1.01) !important; filter: drop-shadow(0 22px 28px rgba(0,0,0,.38)) saturate(1.10) contrast(1.035) brightness(1.035) !important; } } /* ========================================================== TABLET ========================================================== */ @media (max-width:900px){ #solutions .services > article{ padding: 0 24px 26px !important; } #solutions .softtech-service-visual{ height:190px !important; margin: 8px auto 10px !important; } #solutions .softtech-service-visual > img{ max-height:180px !important; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width:650px){ #solutions .services > article{ padding: 0 20px 24px !important; } #solutions .softtech-service-visual{ width:100% !important; height:auto !important; aspect-ratio:1672 / 941 !important; margin: 8px auto 8px !important; overflow:visible !important; background:transparent !important; } #solutions .softtech-service-visual > img{ width:100% !important; height:100% !important; max-width:100% !important; max-height:none !important; object-fit:contain !important; transform:scale(.96) !important; filter: drop-shadow(0 12px 18px rgba(0,0,0,.28)) saturate(1.04) !important; } #solutions .services > article > h3{ margin-top:2px !important; margin-bottom:10px !important; } #solutions .services > article > p{ margin-bottom:20px !important; line-height:1.6 !important; } } /* Small phones */ @media (max-width:390px){ #solutions .services > article{ padding: 0 17px 22px !important; } #solutions .softtech-service-visual{ margin-bottom:6px !important; } } /* Accessibility */ @media (prefers-reduced-motion:reduce){ #solutions .softtech-service-visual > img{ transition:none !important; transform:scale(.96) !important; } } /* ===== END SOFTTECH V33 ===== */ /* ========================================================== SOFTTECH V34 — CINEMATIC SOLUTIONS SHOWCASE Asset/DOM mapping untouched. ========================================================== */ /* ---------------------------------------------------------- CARD — remove obvious "image inside frame" feeling ---------------------------------------------------------- */ #solutions .services{ gap:20px !important; } #solutions .services > article{ position:relative !important; isolation:isolate !important; overflow:hidden !important; min-height:455px !important; padding: 0 30px 30px !important; border: 1px solid rgba(119,201,255,.14) !important; border-radius:22px !important; background: linear-gradient( 180deg, rgba(7,23,38,.76) 0%, rgba(5,17,29,.94) 55%, rgba(4,14,25,.99) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 24px 60px rgba(0,0,0,.16) !important; transition: transform .55s cubic-bezier(.2,.75,.2,1), border-color .55s ease, box-shadow .55s ease !important; } /* Remove previous generic top line */ #solutions .services > article::before{ content:none !important; } /* ---------------------------------------------------------- CINEMATIC VISUAL STAGE Deliberately wider than the content area. Artwork now visually belongs to the card rather than looking like a thumbnail placed inside it. ---------------------------------------------------------- */ #solutions .softtech-service-visual{ position:relative !important; width:calc(100% + 60px) !important; height:238px !important; margin: 0 -30px 2px !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; border:0 !important; border-radius:0 !important; background:transparent !important; isolation:isolate !important; } /* * Atmospheric light. * Default blue/cyan; individual cards override it below. */ #solutions .softtech-service-visual::before{ content:"" !important; display:block !important; position:absolute !important; width:105% !important; height:110% !important; left:50% !important; top:-12% !important; transform:translateX(-50%) !important; border-radius:50% !important; background: radial-gradient( ellipse at 50% 48%, rgba(22,155,255,.20) 0%, rgba(15,112,235,.10) 38%, transparent 70% ) !important; filter:blur(25px) !important; pointer-events:none !important; z-index:0 !important; } /* * Cinematic edge/bottom blend. * This is the important part that removes the rectangular * image/frame appearance. */ #solutions .softtech-service-visual::after{ content:"" !important; display:block !important; position:absolute !important; inset:0 !important; pointer-events:none !important; z-index:2 !important; background: linear-gradient( 90deg, rgba(5,17,29,.94) 0%, transparent 10%, transparent 90%, rgba(5,17,29,.94) 100% ), linear-gradient( 180deg, rgba(5,17,29,.18) 0%, transparent 18%, transparent 62%, rgba(5,17,29,.18) 76%, rgba(5,17,29,.90) 100% ) !important; } /* ---------------------------------------------------------- ARTWORK Larger, cinematic, no crop. ---------------------------------------------------------- */ #solutions .softtech-service-visual > img{ position:relative !important; z-index:1 !important; display:block !important; width:calc(100% - 18px) !important; height:228px !important; max-width:none !important; max-height:none !important; margin:0 auto !important; padding:0 !important; object-fit:contain !important; object-position:center !important; transform: translateY(2px) scale(1.08) !important; filter: saturate(1.10) contrast(1.04) brightness(1.025) drop-shadow(0 24px 24px rgba(0,0,0,.38)) !important; transition: transform .75s cubic-bezier(.18,.8,.2,1), filter .75s ease !important; } /* ---------------------------------------------------------- PER-CARD CINEMATIC LIGHTING Preserve each asset's unique palette. ---------------------------------------------------------- */ /* 01 — Business Websites: cyan / royal blue */ #solutions .services > article:nth-child(1) .softtech-service-visual::before{ background: radial-gradient( ellipse at center, rgba(0,194,255,.26) 0%, rgba(31,98,255,.13) 40%, transparent 72% ) !important; } /* 02 — Custom Software: violet / purple */ #solutions .services > article:nth-child(2) .softtech-service-visual::before{ background: radial-gradient( ellipse at center, rgba(150,65,255,.24) 0%, rgba(62,101,255,.12) 42%, transparent 72% ) !important; } /* 03 — Admin Panels: amber / emerald */ #solutions .services > article:nth-child(3) .softtech-service-visual::before{ background: radial-gradient( ellipse at center, rgba(255,164,25,.22) 0%, rgba(21,189,128,.09) 43%, transparent 72% ) !important; } /* 04 — E-commerce: magenta / pink */ #solutions .services > article:nth-child(4) .softtech-service-visual::before{ background: radial-gradient( ellipse at center, rgba(255,30,194,.25) 0%, rgba(118,51,255,.12) 43%, transparent 72% ) !important; } /* 05 — Cloud & DevOps: orange / amber */ #solutions .services > article:nth-child(5) .softtech-service-visual::before{ background: radial-gradient( ellipse at center, rgba(255,132,0,.27) 0%, rgba(255,187,38,.10) 42%, transparent 72% ) !important; } /* 06 — Maintenance: red / green */ #solutions .services > article:nth-child(6) .softtech-service-visual::before{ background: radial-gradient( ellipse at 48% 50%, rgba(255,40,48,.23) 0%, rgba(0,216,135,.09) 43%, transparent 72% ) !important; } /* ---------------------------------------------------------- CONTENT — cinematic hierarchy ---------------------------------------------------------- */ #solutions .services > article > h3{ position:relative !important; z-index:4 !important; margin: 2px 0 12px !important; font-size:clamp(22px,1.75vw,27px) !important; line-height:1.15 !important; letter-spacing:-.025em !important; text-shadow: 0 4px 18px rgba(0,0,0,.35) !important; } #solutions .services > article > p{ position:relative !important; z-index:4 !important; margin: 0 0 24px !important; line-height:1.68 !important; color:rgba(215,229,241,.74) !important; } #solutions .services > article > a{ position:relative !important; z-index:4 !important; margin: auto 0 0 !important; } /* ---------------------------------------------------------- PREMIUM HOVER — restrained, cinematic ---------------------------------------------------------- */ @media (hover:hover){ #solutions .services > article:hover{ transform:translateY(-5px) !important; border-color: rgba(105,205,255,.28) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 30px 70px rgba(0,0,0,.25) !important; } #solutions .services > article:hover .softtech-service-visual > img{ transform: translateY(-3px) scale(1.125) !important; filter: saturate(1.15) contrast(1.055) brightness(1.055) drop-shadow( 0 29px 28px rgba(0,0,0,.42) ) !important; } } /* ---------------------------------------------------------- TABLET ---------------------------------------------------------- */ @media (max-width:900px){ #solutions .services > article{ min-height:430px !important; padding: 0 24px 26px !important; } #solutions .softtech-service-visual{ width:calc(100% + 48px) !important; height:220px !important; margin: 0 -24px 0 !important; } #solutions .softtech-service-visual > img{ width:calc(100% - 12px) !important; height:210px !important; transform:scale(1.07) !important; } } /* ---------------------------------------------------------- MOBILE — cinematic without oversized card ---------------------------------------------------------- */ @media (max-width:650px){ #solutions .services{ gap:16px !important; } #solutions .services > article{ min-height:0 !important; padding: 0 20px 24px !important; border-radius:19px !important; } #solutions .softtech-service-visual{ width:calc(100% + 40px) !important; height:auto !important; aspect-ratio:1.68 / 1 !important; margin: 0 -20px 0 !important; } #solutions .softtech-service-visual > img{ width:calc(100% - 8px) !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:contain !important; transform:scale(1.075) !important; filter: saturate(1.08) contrast(1.025) drop-shadow( 0 18px 20px rgba(0,0,0,.34) ) !important; } #solutions .softtech-service-visual::after{ background: linear-gradient( 90deg, rgba(5,17,29,.80) 0%, transparent 7%, transparent 93%, rgba(5,17,29,.80) 100% ), linear-gradient( 180deg, transparent 52%, rgba(5,17,29,.88) 100% ) !important; } #solutions .services > article > h3{ margin-top:0 !important; font-size: clamp(21px,6vw,25px) !important; } #solutions .services > article > p{ margin-bottom:20px !important; } } /* ---------------------------------------------------------- SMALL MOBILE ---------------------------------------------------------- */ @media (max-width:390px){ #solutions .services > article{ padding: 0 17px 22px !important; } #solutions .softtech-service-visual{ width:calc(100% + 34px) !important; margin-left:-17px !important; margin-right:-17px !important; } } /* Accessibility */ @media (prefers-reduced-motion:reduce){ #solutions .services > article, #solutions .softtech-service-visual > img{ transition:none !important; } } /* ===== END SOFTTECH V34 ===== */ /* ========================================================== SOFTTECH V35 — QUOTE FORM CONTRAST OWNER ========================================================== */ /* What do you need? / Budget / Project details */ #quote label{ font-weight:700 !important; color:#e8f3ff !important; opacity:1 !important; letter-spacing:.005em !important; } /* Selected values inside fields */ #quote select{ font-weight:600 !important; color:#f4f9ff !important; } /* Project details typed text */ #quote textarea{ color:#f4f9ff !important; font-weight:500 !important; } /* Keep placeholder secondary but clearly readable */ #quote textarea::placeholder{ color:rgba(205,220,235,.62) !important; opacity:1 !important; } /* * WhatsApp CTA: * force high-contrast white text over blue/cyan gradient. */ #quote button, #quote button *, #quote .btn, #quote .btn *{ color:#ffffff !important; } /* Main CTA typography */ #quote button, #quote .btn{ font-weight:800 !important; text-shadow:0 1px 3px rgba(0,0,0,.22) !important; } /* Any generated/pseudo arrow remains white */ #quote button::before, #quote button::after, #quote .btn::before, #quote .btn::after{ color:#ffffff !important; } /* Prevent gradient-text rules from leaking into CTA children */ #quote button span, #quote button strong, #quote button b, #quote .btn span, #quote .btn strong, #quote .btn b{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; background-image:none !important; background-clip:border-box !important; -webkit-background-clip:border-box !important; opacity:1 !important; } /* Mobile remains strong/readable */ @media(max-width:650px){ #quote label{ font-weight:700 !important; } #quote button, #quote .btn{ font-weight:800 !important; } } /* ===== END SOFTTECH V35 ===== */ /* ========================================================== SOFTTECH — PREMIUM CTA ARROW FINISH Scope: canonical text CTA owner ONLY. IMPORTANT: - .promo-arrow is intentionally NOT targeted. - language/currency chevrons are NOT targeted. - navigation arrows are NOT targeted. ========================================================== */ .softtech-cta-arrow-owner{ display:inline-flex !important; align-items:center !important; gap:9px !important; } .softtech-cta-arrow-owner::after{ content:"" !important; display:inline-block !important; flex:0 0 auto !important; width:18px !important; height:18px !important; margin-left:2px !important; background-image: url("/assets/ui/cta-right-arrow.png") !important; background-repeat:no-repeat !important; background-position:center !important; background-size:contain !important; opacity:.96 !important; filter: drop-shadow(0 0 3px rgba(255,255,255,.50)) drop-shadow(0 0 7px rgba(18,223,243,.42)) !important; transform:translate3d(0,0,0) !important; animation: softtechPremiumArrowFloat 1.8s cubic-bezier(.4,0,.2,1) infinite !important; transition: transform .24s ease, filter .24s ease, opacity .24s ease !important; } a.softtech-cta-arrow-owner:not(.btn)::after, button.softtech-cta-arrow-owner:not(.btn)::after{ width:17px !important; height:17px !important; } .softtech-cta-arrow-owner:hover::after{ opacity:1 !important; transform:translate3d(5px,0,0) scale(1.06) !important; filter: drop-shadow(0 0 4px rgba(255,255,255,.72)) drop-shadow(0 0 10px rgba(18,223,243,.68)) drop-shadow(0 0 16px rgba(20,117,255,.30)) !important; animation-play-state:paused !important; } .softtech-cta-arrow-owner:focus-visible::after{ transform:translate3d(4px,0,0) !important; } @keyframes softtechPremiumArrowFloat{ 0%,100%{ transform:translate3d(0,0,0); } 48%{ transform:translate3d(3px,0,0); } 62%{ transform:translate3d(3px,0,0); } } @media (max-width:650px){ .softtech-cta-arrow-owner{ gap:7px !important; } .softtech-cta-arrow-owner::after{ width:16px !important; height:16px !important; } a.softtech-cta-arrow-owner:not(.btn)::after, button.softtech-cta-arrow-owner:not(.btn)::after{ width:15px !important; height:15px !important; } } @media (prefers-reduced-motion:reduce){ .softtech-cta-arrow-owner::after{ animation:none !important; } .softtech-cta-arrow-owner:hover::after{ transform:translate3d(3px,0,0) !important; } } /* END SOFTTECH PREMIUM CTA ARROW FINISH */ /* ========================================================== SOFTTECH PREMIUM VECTOR CTA ICON — V2 Canonical text CTA arrows only. Promo/banner navigation is intentionally untouched. ========================================================== */ .softtech-cta-arrow-owner{ display:inline-flex !important; align-items:center !important; gap:10px !important; } /* Override the previous PNG arrow completely. No bitmap is rendered here. */ .softtech-cta-arrow-owner::after{ content:"➜" !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; flex:0 0 auto !important; width:24px !important; height:24px !important; margin-left:1px !important; box-sizing:border-box !important; background: linear-gradient( 145deg, rgba(31,224,255,.18), rgba(10,110,180,.12) ) !important; background-image:none !important; border:1px solid rgba(67,224,255,.46) !important; border-radius:999px !important; color:#eaffff !important; font-family: Arial, Helvetica, sans-serif !important; font-size:14px !important; font-weight:700 !important; line-height:1 !important; text-indent:0 !important; opacity:1 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 0 10px rgba(26,207,255,.08), 0 0 8px rgba(20,207,255,.16) !important; filter: drop-shadow(0 0 3px rgba(86,232,255,.38)) !important; transform:translate3d(0,0,0) !important; animation: softtechVectorArrowPulse 2.4s cubic-bezier(.4,0,.2,1) infinite !important; transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease, filter .22s ease !important; } .softtech-cta-arrow-owner:hover::after{ color:#ffffff !important; border-color:rgba(120,240,255,.88) !important; background: linear-gradient( 145deg, rgba(36,221,255,.30), rgba(18,125,230,.20) ) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 0 12px rgba(41,219,255,.14), 0 0 10px rgba(31,220,255,.36), 0 0 20px rgba(22,146,255,.18) !important; filter: drop-shadow(0 0 4px rgba(145,246,255,.65)) !important; transform: translate3d(4px,0,0) scale(1.06) !important; animation-play-state:paused !important; } .softtech-cta-arrow-owner:focus-visible::after{ border-color:rgba(151,246,255,.92) !important; box-shadow: 0 0 0 2px rgba(25,210,255,.15), 0 0 12px rgba(25,210,255,.36) !important; } @keyframes softtechVectorArrowPulse{ 0%,100%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(2px,0,0); } } /* Hero/form buttons get a slightly stronger icon */ .btn.softtech-cta-arrow-owner::after{ width:25px !important; height:25px !important; border-color:rgba(184,249,255,.62) !important; background: linear-gradient( 145deg, rgba(255,255,255,.18), rgba(23,198,255,.18) ) !important; } /* Smaller text-link CTAs */ a.softtech-cta-arrow-owner:not(.btn)::after{ width:23px !important; height:23px !important; font-size:13px !important; } @media (max-width:650px){ .softtech-cta-arrow-owner{ gap:8px !important; } .softtech-cta-arrow-owner::after, a.softtech-cta-arrow-owner:not(.btn)::after{ width:21px !important; height:21px !important; font-size:12px !important; } .btn.softtech-cta-arrow-owner::after{ width:22px !important; height:22px !important; } } @media (prefers-reduced-motion:reduce){ .softtech-cta-arrow-owner::after{ animation:none !important; } } /* END SOFTTECH PREMIUM VECTOR CTA ICON V2 */ /* ========================================================== SOFTTECH — SHARED LIBRARY CTA ICON V3 Real source: /srv/shared-assets/icons/arrows/ angle-circle-arrow-right-icon.svg Promo/banner arrows are NOT targeted. ========================================================== */ .softtech-cta-arrow-owner{ display:inline-flex !important; align-items:center !important; gap:9px !important; } .softtech-cta-arrow-owner::after{ content:"" !important; display:inline-block !important; flex:0 0 auto !important; width:21px !important; height:21px !important; margin-left:1px !important; border:0 !important; border-radius:0 !important; background-color:transparent !important; background-image: url("/assets/ui/premium-cta-arrow.svg") !important; background-repeat:no-repeat !important; background-position:center !important; background-size:contain !important; color:transparent !important; font-size:0 !important; line-height:0 !important; box-shadow:none !important; opacity:.96 !important; filter: invert(87%) sepia(49%) saturate(1205%) hue-rotate(143deg) brightness(106%) contrast(104%) drop-shadow(0 0 4px rgba(39,220,255,.42)) !important; transform:translate3d(0,0,0) !important; animation:none !important; transition: transform .22s ease, filter .22s ease, opacity .22s ease !important; } .softtech-cta-arrow-owner:hover::after{ opacity:1 !important; transform: translate3d(4px,0,0) scale(1.08) !important; filter: invert(96%) sepia(31%) saturate(1290%) hue-rotate(150deg) brightness(112%) contrast(106%) drop-shadow(0 0 5px rgba(75,230,255,.70)) drop-shadow(0 0 10px rgba(24,177,255,.30)) !important; } .softtech-cta-arrow-owner:focus-visible::after{ transform:translate3d(3px,0,0) !important; } .btn.softtech-cta-arrow-owner::after{ width:22px !important; height:22px !important; } @media (max-width:650px){ .softtech-cta-arrow-owner{ gap:8px !important; } .softtech-cta-arrow-owner::after{ width:19px !important; height:19px !important; } .btn.softtech-cta-arrow-owner::after{ width:20px !important; height:20px !important; } } /* END SOFTTECH SHARED LIBRARY CTA ICON V3 */ /* ========================================================== SOFTTECH — PEARL ICE LIGHT HEADER V1 Premium light / frosted glass header family. Header scope only. ========================================================== */ header, .site-header{ background: linear-gradient( 108deg, rgba(249,253,254,.985) 0%, rgba(235,247,250,.982) 32%, rgba(244,250,252,.985) 66%, rgba(255,255,255,.99) 100% ) !important; border-bottom: 1px solid rgba(19,163,201,.24) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(13,180,218,.07), 0 9px 30px rgba(21,66,84,.10), 0 2px 8px rgba(10,125,165,.055) !important; backdrop-filter: blur(22px) saturate(1.08) !important; -webkit-backdrop-filter: blur(22px) saturate(1.08) !important; } /* Soft pearl reflection */ header::before, .site-header::before{ content:"" !important; position:absolute !important; inset:0 !important; z-index:-1 !important; pointer-events:none !important; background: radial-gradient( circle at 18% -30%, rgba(255,255,255,.96), transparent 36% ), radial-gradient( circle at 76% 140%, rgba(55,205,234,.09), transparent 34% ), linear-gradient( 110deg, transparent 18%, rgba(255,255,255,.38) 44%, transparent 66% ) !important; } /* Fine brand edge */ header::after, .site-header::after{ content:"" !important; position:absolute !important; left:0 !important; right:0 !important; bottom:-1px !important; height:1px !important; pointer-events:none !important; background: linear-gradient( 90deg, transparent 0%, rgba(15,175,218,.12) 15%, rgba(0,198,232,.58) 50%, rgba(27,146,211,.16) 84%, transparent 100% ) !important; box-shadow: 0 1px 8px rgba(0,187,225,.13) !important; } /* ---------------------------------------------------------- HEADER TYPOGRAPHY — LIGHT SURFACE CONTRAST ---------------------------------------------------------- */ header nav a, .site-header nav a, header .nav a, .site-header .nav a{ color:#172936 !important; text-shadow:none !important; } header nav a:hover, .site-header nav a:hover, header .nav a:hover, .site-header .nav a:hover{ color:#009fc5 !important; } header nav a.active, .site-header nav a.active, header .nav a.active, .site-header .nav a.active{ color:#009fc5 !important; } /* Founder block */ header .founder, .site-header .founder, header [class*="founder"], .site-header [class*="founder"]{ color:#162b38; } header .founder-label, .site-header .founder-label{ color:#008fb4 !important; } /* ---------------------------------------------------------- HEADER SELECT / CONTROL SURFACES ---------------------------------------------------------- */ header select, .site-header select, header .language-select, .site-header .language-select, header .currency-select, .site-header .currency-select, header [class*="language"], .site-header [class*="language"], header [class*="currency"], .site-header [class*="currency"]{ color:#132936; } /* Preserve component geometry. Only common header control surfaces receive pearl glass. */ header select, .site-header select{ background-color: rgba(255,255,255,.72) !important; border-color: rgba(22,114,151,.24) !important; color:#132936 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 4px 12px rgba(31,79,99,.06) !important; } /* ---------------------------------------------------------- QUOTE CTA Keep brand identity, increase contrast against light glass. ---------------------------------------------------------- */ header .btn-primary, .site-header .btn-primary, header a[href="#quote"].btn, .site-header a[href="#quote"].btn{ box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 7px 18px rgba(0,151,220,.20) !important; } /* Mobile header uses same pearl family */ @media (max-width:900px){ header, .site-header{ background: linear-gradient( 112deg, rgba(249,253,254,.99), rgba(235,247,250,.99) 52%, rgba(255,255,255,.99) ) !important; } } /* END SOFTTECH PEARL ICE LIGHT HEADER V1 */