/* =========================================================
Nexlinx Trade — Global Styles (FINAL)
========================================================= */
/* THEME TOKENS
- Dark is default on
- Light overrides on
*/
:root{
--transition: .2s ease;
/* Floating controls */
--float-speed: 0.30; /* Lower = faster (0.30 noticeable, 0.25 fast) */
--float-amp: 1.2; /* Movement multiplier */
--float-op-min: 0.06; /* Opacity range for shapes */
--float-op-max: 0.11;
}
/* DARK THEME */
:root[data-theme="dark"]{
--bg:#0e1523;
--panel:#111a2e;
--card:#0f182a;
--ink:#eef3fb;
--muted:#b6c1d3;
--brand:#12bdb2;
--brand-2:#f0b35a;
--line:#22314f;
--shadow:0 12px 28px rgba(0,0,0,.28);
--footer:#0b1220;
/* Floating shape palette (dark) */
--shape1:#12bdb2;
--shape2:#f0b35a;
--shape3:#7aa2d8;
--shape4:#9aa5b1;
}
/* LIGHT THEME (default) */
:root[data-theme="light"]{
--bg:#ffffff;
--panel:#ffffff;
--card:#ffffff;
--ink:#0e1523;
--muted:#475569;
--brand:#0aa3a8;
--brand-2:#e7a84f;
--line:#dde3ee;
--shadow:0 12px 28px rgba(10,20,40,.10);
--footer:#e9eef6;
/* Floating shape palette (light) */
--shape1:#0aa3a8;
--shape2:#e7a84f;
--shape3:#7aa2d8;
--shape4:#9aa5b1;
}
*{box-sizing:border-box}
/* Prevent horizontal scroll + clip any shape bleed */
html, body { overflow-x: hidden; }
.bg-shapes { overflow: hidden; contain: layout paint; }
html,body{height:100%}
body{
margin:0; color:var(--ink);
font-family:Inter,system-ui,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
background:var(--bg);
transition: background var(--transition), color var(--transition);
position: relative; /* anchor for bg-shapes absolute positioning */
}
img{max-width:100%;display:block}
a{color:var(--ink);text-decoration:none;transition:opacity var(--transition), color var(--transition)}
a:hover{opacity:.9}
.container{width:min(1200px,94%);margin:0 auto}
/* ---------------------------------------------------------
Header
--------------------------------------------------------- */
.site-header{
position:sticky;top:0;z-index:60;
background:color-mix(in srgb, var(--panel) 70%, transparent);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--line);
}
.header-wrap{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:.8rem 0}
.brand{display:flex;align-items:center;gap:.6rem}
.main-nav ul{display:flex;gap:1.2rem;list-style:none;margin:0;padding:0}
.nav-link{
padding:.5rem .6rem;border-radius:.6rem;
transition:background var(--transition), color var(--transition);
}
/* Menu hover → brand green text */
.nav-link:hover{color:var(--brand); background:transparent}
.btn{
background:var(--brand);color:#07131b;border:1px solid var(--brand);
border-radius:.8rem;padding:.68rem 1rem;font-weight:700;
box-shadow:var(--shadow);transition:transform var(--transition), filter var(--transition), background var(--transition), border-color var(--transition)
}
.btn:hover{transform:translateY(-2px);filter:saturate(1.08)}
.btn-ghost{background:transparent;border-color:var(--brand);color:var(--ink)}
.btn-cta{background:var(--brand-2);border-color:var(--brand-2);color:#0b0f18}
.btn-cta:hover{background:color-mix(in srgb, var(--brand-2) 88%, white 12%);border-color:color-mix(in srgb, var(--brand-2) 88%, white 12%)}
/* Theme toggle */
.theme-toggle{
display:inline-flex;align-items:center;justify-content:center;
width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
background:var(--panel);cursor:pointer;margin-right:.6rem;transition:transform var(--transition), background var(--transition)
}
.theme-toggle:hover{transform:translateY(-2px)}
.theme-toggle svg{fill:var(--ink)}
:root[data-theme="dark"] #iconSun{display:none}
:root[data-theme="light"] #iconMoon{display:none}
/* Mobile nav */
.nav-toggle{display:none;background:none;border:0;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px}
/* ---------------------------------------------------------
FLOATING SVG BACKGROUND (FULL-PAGE COVERAGE)
--------------------------------------------------------- */
.bg-shapes{
position:absolute; inset:0;
z-index:0; pointer-events:none;
}
.bg-shapes .shape{
position:absolute; display:block;
opacity:var(--op, .08);
color:var(--col, var(--shape1)); /* currentColor for SVG */
filter: blur(var(--blur, 0px));
}
.bg-shapes .shape svg{
width:100%; height:100%; display:block;
transform: translate3d(0,0,0);
animation: var(--anim, none) var(--dur, 22s) ease-in-out var(--delay, 0s) infinite alternate;
will-change: transform;
animation-duration: calc(var(--dur, 22s) * var(--float-speed));
}
/* Floating animations (noticeable but not crazy) */
@keyframes floatY {
from { transform: translateY(0) rotate(var(--rot, 0deg)); }
to { transform: translateY(calc(var(--ampY, 26px) * var(--float-amp))) rotate(calc(var(--rot, 0deg) + var(--spin, 0deg))); }
}
@keyframes floatX {
from { transform: translateX(0) rotate(var(--rot, 0deg)); }
to { transform: translateX(calc(var(--ampX, 26px) * var(--float-amp))) rotate(calc(var(--rot, 0deg) + var(--spin, 0deg))); }
}
@keyframes floatXY {
0% { transform: translate(0,0) rotate(var(--rot, 0deg)); }
50% { transform: translate(calc(var(--ampX, 22px) * var(--float-amp)), calc(var(--ampY, 22px) * var(--float-amp))) rotate(calc(var(--rot, 0deg) + var(--spin, 0deg))); }
100% { transform: translate(calc(var(--ampX, -22px) * var(--float-amp)), calc(var(--ampY, -22px) * var(--float-amp))) rotate(calc(var(--rot, 0deg) + var(--spin, 0deg))); }
}
/* approximate circular/orbit motion */
@keyframes orbit {
0% { transform: translate(0, calc(var(--r, 18px) * -1)) rotate(var(--rot, 0deg)); }
25% { transform: translate(var(--r, 18px), 0) rotate(calc(var(--rot, 0deg) + var(--spin, 0deg))); }
50% { transform: translate(0, var(--r, 18px)) rotate(calc(var(--rot, 0deg) + var(--spin, 0deg))); }
75% { transform: translate(calc(var(--r, 18px) * -1), 0) rotate(calc(var(--rot, 0deg) + var(--spin, 0deg))); }
100% { transform: translate(0, calc(var(--r, 18px) * -1)) rotate(calc(var(--rot, 0deg) + var(--spin, 0deg))); }
}
/* Reduce motion support */
@media (prefers-reduced-motion: reduce){
.bg-shapes .shape svg{ animation: none !important; }
}
/* ---------------------------------------------------------
Hero (standard two-column hero)
--------------------------------------------------------- */
.hero{padding:88px 0 36px;border-bottom:1px solid var(--line); position:relative; z-index:1;}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:42px;align-items:center}
.hero h1{font-size:clamp(32px,4.6vw,48px);line-height:1.05;margin:0 0 .45rem}
.accent{color:var(--brand)}
.lead{color:var(--muted);max-width:56ch}
.hero-ctas{display:flex;gap:.8rem;margin-top:.8rem}
.hero-points{display:flex;gap:.6rem;list-style:none;padding:0;margin:1rem 0 0}
.hero-points li{border:1px dashed var(--line);padding:.4rem .6rem;border-radius:.6rem;color:var(--muted);font-size:.9rem}
/* ---------------------------------------------------------
HERO COVER (full-width background image hero with overlay)
Usage:
--------------------------------------------------------- */
.hero-cover{
position:relative;min-height:58vh;display:grid;place-items:center;
background: #0b1322 center/cover no-repeat;
border-bottom:1px solid var(--line);
z-index:1;
}
.hero-cover::before{
content:"";
position:absolute; inset:0; z-index:0;
background:
radial-gradient(80% 60% at 50% 30%, rgba(0,0,0,.35), transparent 60%),
linear-gradient(to bottom, rgba(10,16,28,.65), rgba(10,16,28,.65));
}
.hero-cover .hero-inner{position:relative; z-index:1; width:min(1200px,94%); margin:0 auto;}
.hero-cover .hero-grid{grid-template-columns:1.05fr .95fr; gap:34px;}
.hero-cover .hero-copy{color:#f6f8fc; text-shadow:0 1px 14px rgba(0,0,0,.45);}
.hero-cover .hero-copy .lead{color:#e2e7f2}
.hero-cover .hero-points li{border-color:rgba(255,255,255,.25); color:#e9eef6}
/* ---------------------------------------------------------
Carousel
--------------------------------------------------------- */
.carousel{position:relative;border-radius:1rem;overflow:hidden;border:1px solid var(--line);background:transparent; z-index:1;}
.slide{display:none}
.slide.is-active{display:block;animation:fade .6s ease}
.cbtn{position:absolute;top:50%;transform:translateY(-50%);background:color-mix(in srgb, #000 35%, transparent);border:1px solid var(--line);color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer}
.cbtn.prev{left:8px}.cbtn.next{right:8px}
.dots{position:absolute;display:flex;gap:.35rem;bottom:10px;left:50%;transform:translateX(-50%)}
.dots button{width:8px;height:8px;border-radius:999px;border:0;background:color-mix(in srgb, var(--muted) 60%, transparent);opacity:.7}
.dots button.is-active{opacity:1;background:#fff}
/* ---------------------------------------------------------
Cards (shared)
--------------------------------------------------------- */
.pillars{padding:48px 0; position:relative; z-index:1;}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
background:transparent; border:1px solid var(--line);
border-radius:1rem;padding:16px;transition:transform var(--transition);
position:relative; overflow:hidden;
}
.card img{border-radius:.8rem;margin-bottom:12px; transition: transform .5s ease;}
.card:hover{transform:translateY(-4px)}
.link{color:var(--brand)}
.lift{opacity:0;transform:translateY(12px);animation:lift .7s ease forwards}
.lift.delay-1{animation-delay:.12s}.lift.delay-2{animation-delay:.24s}
/* IMG-centered splash (JS injects inside .card) */
.card::after{ display:none !important; } /* ensure old style off */
.card .splash{
position:absolute;
width:40%; height:40%;
left:var(--x,50%); top:var(--y,50%);
transform:translate(-50%,-50%) scale(.2);
background: color-mix(in srgb, var(--brand) 22%, transparent);
border-radius:14px; opacity:0; pointer-events:none;
animation: splash .7s ease-out both;
}
@keyframes splash{
0% {opacity:.0; transform:translate(-50%,-50%) scale(.2);}
40% {opacity:.35; transform:translate(-50%,-50%) scale(1);}
100% {opacity:0; transform:translate(-50%,-50%) scale(1.8);}
}
.card:hover img{ transform: scale(1.03); }
/* ---------------------------------------------------------
Products
--------------------------------------------------------- */
.products{
padding:48px 0;
border-top:1px solid var(--line);
position:relative; z-index:1;
}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:16px}
.filters{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{border:1px solid var(--line);background:transparent;color:var(--ink);padding:.4rem .7rem;border-radius:999px;cursor:pointer;transition:background var(--transition), border-color var(--transition)}
.chip.is-active,.chip:hover{border-color:var(--brand);background:color-mix(in srgb, var(--brand) 12%, transparent)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.product h3{font-size:1rem;margin:.5rem 0 .25rem}
.product p{color:var(--muted);font-size:.92rem}
/* Keep 4-col grid when revealing more */
.grid > .more-products{display:contents;}
.more-products.is-hidden{display:none}
.center{text-align:center}
.mt-24{margin-top:24px}
/* ---------------------------------------------------------
Footer
--------------------------------------------------------- */
.site-footer{padding:28px 0;border-top:1px solid var(--line);background:var(--footer); position:relative; z-index:1;}
.foot-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px}
.site-footer nav{display:flex;gap:12px;flex-wrap:wrap}
.site-footer nav a{transition: color var(--transition)}
.site-footer nav a:hover{ color: var(--brand); } /* Footer hover → brand */
.muted{color:var(--muted)} .small{font-size:.9rem}
/* Scroll to Top — left side */
#toTop{
position:fixed;left:14px;bottom:14px;width:40px;height:40px;border-radius:999px;border:1px solid var(--line);
background:color-mix(in srgb, var(--panel) 90%, transparent);color:var(--ink);
cursor:pointer;display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px); z-index:70;
}
#toTop:hover{background:color-mix(in srgb, var(--panel) 100%, transparent)}
/* ---------------------------------------------------------
Utilities / small helpers
--------------------------------------------------------- */
.rounded{border-radius:1rem}
.shadow{box-shadow:var(--shadow)}
.brand-color{ color: var(--brand); } /* Theme-green text utility */
/* Contact page helpers moved to global (so inline CSS not needed) */
.info-card{ text-align:center; }
.info-card svg{ width:64px; height:64px; display:block; margin:0 auto 12px; fill: var(--brand); }
/* Match both form buttons */
.contact-actions .btn,
.contact-actions .btn-ghost{
display:inline-flex; align-items:center; justify-content:center;
min-height:48px;
padding:.9rem 1.1rem;
font-size:1rem;
line-height:1;
}
/* ---------------------------------------------------------
Responsive
--------------------------------------------------------- */
@media (max-width: 1020px){
.hero-grid{grid-template-columns:1fr}
.hero-cover .hero-grid{grid-template-columns:1fr}
.cards-3{grid-template-columns:1fr}
.grid{grid-template-columns:repeat(2,1fr)}
.main-nav{display:none}
.btn-cta{display:none}
.nav-toggle{display:block}
.site-footer .foot-grid{grid-template-columns:1fr}
}
@media (max-width: 520px){
.grid{grid-template-columns:1fr}
}
/* ---------------------------------------------------------
Animations
--------------------------------------------------------- */
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes lift{to{opacity:1;transform:translateY(0)}}
/* =========================================================
ABOUT PAGE scope
(single-surface look; sections split by line)
========================================================= */
main.about .section { padding:64px 0; position:relative; z-index:1; }
main.about .section + .section { border-top:1px solid var(--line); }
main.about .section-head{ margin-bottom:18px; }
main.about .section-head h2{ margin:0; }
main.about .cards-2{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; }
main.about .cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
main.about .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
main.about .card{ background:transparent; border:1px solid var(--line); border-radius:1rem; padding:16px; }
main.about .card img{ border-radius:.8rem; margin-bottom:12px; }
main.about .about-intro p.lead{ margin-bottom:.6rem; }
main.about .badge-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.8rem; }
/* dashed badges like Contact hero points */
main.about .badge{ border:1px dashed var(--line); padding:.35rem .6rem; border-radius:.6rem; color:var(--muted); font-size:.9rem; }
main.about .metric-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:14px; }
main.about .metric{ background:transparent; border:1px solid var(--line); border-radius:1rem; padding:16px; text-align:center; }
main.about .metric h3{ margin:.2rem 0 0; font-size:1.6rem; }
main.about .metric p{ margin:.2rem 0 0; color:var(--muted); }
main.about .faq-wrap{ max-width:960px; margin:0 auto; }
main.about .faq-box{ border:1px solid var(--line); border-radius:1rem; padding:18px; background:transparent; }
main.about .faq-list details{ background:transparent; border:1px solid var(--line); border-radius:.8rem; padding:12px; }
main.about .faq-list > details + details{ margin-top:10px; }
main.about .faq-list summary{ cursor:pointer; font-weight:600; }
main.about .faq-list p{ margin:.6rem 0 0; color:var(--muted); }
/* About responsive */
@media (max-width:1020px){
main.about .cards-2{ grid-template-columns:1fr; }
main.about .cards-3{ grid-template-columns:1fr; }
main.about .grid-3 { grid-template-columns:1fr; }
main.about .metric-row{ grid-template-columns:repeat(2,1fr); }
}
/* ===== WhatsApp Floating Button (global) ===== */
#whatsappFab{
position: fixed;
left: 14px;
bottom: 14px; /* #toTop (bottom:14px) se thora upar */
width: 52px; height: 52px;
border-radius: 999px;
border: 1px solid var(--brand);
background: var(--brand);
color: #07131b;
display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow);
z-index: 75; /* header/top-btn se upar */
cursor: pointer;
transition: transform var(--transition), filter var(--transition), background var(--transition), border-color var(--transition);
}
#whatsappFab:hover{
transform: translateY(-2px);
filter: saturate(1.08);
}
#whatsappFab svg{
width: 40px; height: 40px;
fill: #07131b; /* dark text over brand */
}
@media (max-width:520px){
#whatsappFab{ width: 48px; height: 48px; bottom: 72px; left: 12px; }
}
@media print{
#whatsappFab{ display:none; }
}
/* ===== HumanChat launcher safety (avoid global tinting) ===== */
#hb-widget, #hb-root, [id^="hb-"], [class*="hb-"]{
color: inherit !important;
background: transparent !important;
}
#hb-widget img, #hb-root img,
#hb-widget svg, #hb-root svg{
filter: none !important;
mix-blend-mode: normal !important;
opacity: 1 !important;
}
/* HumanBot: launcher bubble → black */
[id^="hb-"] [class*="launch"],
[id^="hb-"] [class*="Launch"],
#hb-root button, #hb-widget button {
background: #000 !important;
border-color: #000 !important;
box-shadow: none !important;
}
/* icon ko white rakho (agar svg ya img ho) */
#hb-root button svg path,
#hb-widget button svg path {
fill: #fff !important;
}
#hb-root button img,
#hb-widget button img {
filter: none !important;
opacity: 1 !important;
}