/* ========================================================================== Najd Robotics — Design System Light · clean · corporate · high-tech. Hand-crafted, no build step. ========================================================================== */ /* ----- Tokens ----------------------------------------------------------- */ :root{ /* Brand palette (sampled from the logo) */ --cyan:#0db4eb; /* signature accent */ --cyan-600:#0a9bcc; --cyan-050:#e6f7fd; --blue:#3a55a8; /* primary brand blue */ --blue-deep:#22356f; /* deep navy-blue */ --indigo:#5262a4; --ink:#0e1b2e; /* headings / strong text */ --slate:#56657b; /* body text */ --slate-2:#8493a6; /* muted */ --line:#e7edf4; /* hairline borders */ --line-2:#dde6f0; --surface:#ffffff; --surface-2:#f4f7fb; /* light section bg */ --surface-3:#eef3f9; --white:#ffffff; --grad:linear-gradient(135deg,var(--blue) 0%,var(--cyan) 100%); --grad-soft:linear-gradient(135deg,#eef2fb 0%,#e7f6fd 100%); --grad-deep:linear-gradient(150deg,#1a2c5e 0%,#22356f 45%,#0e1b2e 100%); /* Type */ --font-display:"Space Grotesk",system-ui,sans-serif; --font-body:"Inter",system-ui,-apple-system,sans-serif; /* Radii */ --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px; /* Shadow */ --sh-xs:0 1px 2px rgba(14,27,46,.06); --sh-sm:0 4px 14px rgba(20,40,80,.07); --sh:0 14px 40px -18px rgba(20,40,80,.22); --sh-lg:0 30px 70px -28px rgba(18,35,75,.34); --sh-cyan:0 18px 50px -16px rgba(13,180,235,.45); /* Spacing rhythm */ --section:clamp(4.5rem,9vw,8rem); --gap:clamp(1.25rem,2.4vw,2rem); --container:1200px; --container-wide:1320px; --header-h:74px; } /* ----- Reset ------------------------------------------------------------ */ *,*::before,*::after{box-sizing:border-box} *{margin:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} html:focus-within{scroll-padding-top:calc(var(--header-h) + 1.25rem)} body{ font-family:var(--font-body); color:var(--slate); background:var(--surface); line-height:1.65; font-size:1.0625rem; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img,picture,svg,video{display:block;max-width:100%} img{height:auto} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:0;background:none;color:inherit} ul{list-style:none;padding:0} input,textarea,select{font:inherit;color:inherit} :focus-visible{outline:2.5px solid var(--cyan);outline-offset:3px;border-radius:4px} ::selection{background:var(--cyan);color:#fff} /* ----- Typography ------------------------------------------------------- */ h1,h2,h3,h4,h5{ font-family:var(--font-display); color:var(--ink); line-height:1.08; font-weight:700; letter-spacing:-.02em; } h1{font-size:clamp(2.5rem,5.4vw,4.25rem)} h2{font-size:clamp(2rem,3.8vw,3.1rem)} h3{font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.18} h4{font-size:1.18rem;line-height:1.3} p{text-wrap:pretty} strong{color:var(--ink);font-weight:600} .lead{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.6;color:#445268} .grad-text{ background:var(--grad);-webkit-background-clip:text;background-clip:text; color:transparent; } /* ----- Layout ----------------------------------------------------------- */ .container{width:min(100% - 2.5rem,var(--container));margin-inline:auto} .container-wide{width:min(100% - 2.5rem,var(--container-wide));margin-inline:auto} .section{padding-block:var(--section);position:relative} .section--tight{padding-block:clamp(3rem,6vw,5rem)} .section--alt{background:var(--surface-2)} .section--deep{background:var(--grad-deep);color:#c9d6ec} .section--deep h1,.section--deep h2,.section--deep h3,.section--deep h4{color:#fff} .grid{display:grid;gap:var(--gap)} @media(min-width:640px){.sm\:2{grid-template-columns:repeat(2,1fr)}} @media(min-width:880px){ .md\:2{grid-template-columns:repeat(2,1fr)} .md\:3{grid-template-columns:repeat(3,1fr)} .md\:4{grid-template-columns:repeat(4,1fr)} } /* Eyebrow + section heading */ .eyebrow{ display:inline-flex;align-items:center;gap:.6rem; font-family:var(--font-display); font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:var(--blue); } .eyebrow::before{ content:"";width:26px;height:2px;border-radius:2px; background:var(--grad); } .eyebrow--center{justify-content:center} .section-head{max-width:60ch} .section-head--center{max-width:64ch;margin-inline:auto;text-align:center} .section-head h2{margin-top:.9rem} .section-head p{margin-top:1rem;font-size:1.075rem} .section--deep .eyebrow{color:var(--cyan)} .section--deep .section-head p{color:#aebbd4} /* ----- Buttons ---------------------------------------------------------- */ .btn{ --bg:var(--grad); display:inline-flex;align-items:center;justify-content:center;gap:.55rem; font-family:var(--font-display);font-weight:600;font-size:.97rem;letter-spacing:.01em; padding:.85rem 1.5rem;border-radius:var(--r-pill); background:var(--bg);color:#fff;white-space:nowrap; box-shadow:var(--sh-sm); transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,filter .25s; will-change:transform; } .btn svg{width:18px;height:18px} .btn:hover{transform:translateY(-3px);box-shadow:var(--sh-cyan)} .btn:active{transform:translateY(-1px)} .btn--ghost{background:#fff;color:var(--blue-deep);box-shadow:inset 0 0 0 1.5px var(--line-2),var(--sh-xs)} .btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--cyan),var(--sh);color:var(--blue)} .btn--light{background:#fff;color:var(--blue-deep)} .btn--outline-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)} .btn--outline-light:hover{box-shadow:inset 0 0 0 1.5px #fff;background:rgba(255,255,255,.08)} .btn--lg{padding:1rem 1.85rem;font-size:1.03rem} .btn--block{display:flex;width:100%} .link-arrow{ display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-display); font-weight:600;color:var(--blue);font-size:.97rem; } .link-arrow svg{width:16px;height:16px;transition:transform .25s} .link-arrow:hover{color:var(--cyan-600)} .link-arrow:hover svg{transform:translateX(4px)} /* Chips */ .chip{ display:inline-flex;align-items:center;gap:.5rem; padding:.4rem .85rem;border-radius:var(--r-pill); background:var(--cyan-050);color:var(--blue-deep); font-size:.82rem;font-weight:600;font-family:var(--font-display); border:1px solid #cdeefb; } .chip .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan)} .chip--ghost{background:rgba(255,255,255,.08);color:#dbe6fb;border-color:rgba(255,255,255,.18)} /* ----- Header ----------------------------------------------------------- */ .site-header{ position:fixed;inset:0 0 auto 0;z-index:60;height:var(--header-h); display:flex;align-items:center; transition:background .3s,box-shadow .3s,height .3s,border-color .3s; border-bottom:1px solid transparent; } .site-header.scrolled{ background:rgba(255,255,255,.82);backdrop-filter:saturate(160%) blur(14px); border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgba(20,40,80,.5); } .site-header .container-wide{display:flex;align-items:center;gap:1.5rem;width:min(100% - 2rem,var(--container-wide))} .brand{display:flex;align-items:center;gap:.7rem;margin-right:auto} .brand img{height:42px;width:auto} .nav{display:none;align-items:center;gap:.35rem} .nav a{ font-family:var(--font-display);font-weight:500;font-size:.95rem;color:#36465c; padding:.55rem .85rem;border-radius:var(--r-pill);position:relative;transition:color .2s,background .2s; } .nav a:hover{color:var(--blue-deep);background:var(--surface-2)} .nav a.active{color:var(--blue)} .nav a.active::after{ content:"";position:absolute;left:50%;bottom:.28rem;translate:-50% 0; width:5px;height:5px;border-radius:50%;background:var(--cyan); } .header-cta{display:none} .nav-toggle{ display:inline-flex;flex-direction:column;justify-content:center;gap:5px; width:46px;height:46px;border-radius:12px;border:1px solid var(--line-2);background:#fff; padding:0 11px;margin-left:auto; } .nav-toggle span{height:2px;width:100%;background:var(--ink);border-radius:2px;transition:transform .3s,opacity .2s} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* Mobile menu */ .mobile-menu{ position:fixed;inset:var(--header-h) 0 auto 0;z-index:55; background:rgba(255,255,255,.97);backdrop-filter:blur(12px); border-bottom:1px solid var(--line);box-shadow:var(--sh); padding:1rem 1.25rem 1.5rem; display:grid;gap:.2rem; transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none; transition:opacity .25s,transform .25s,visibility .25s; } .mobile-menu.open{transform:none;opacity:1;visibility:visible;pointer-events:auto} .mobile-menu a{ font-family:var(--font-display);font-weight:500;font-size:1.05rem;color:var(--ink); padding:.85rem .5rem;border-bottom:1px solid var(--line); } .mobile-menu a.active{color:var(--blue)} .mobile-menu .btn{margin-top:1rem} @media(min-width:1000px){ .nav{display:flex} .header-cta{display:inline-flex} .nav-toggle{display:none} } /* ----- Hero ------------------------------------------------------------- */ .hero{position:relative;padding-top:calc(var(--header-h) + clamp(2.5rem,6vw,5rem));padding-bottom:var(--section);overflow:hidden} .hero::before{ /* soft brand glow */ content:"";position:absolute;top:-18%;right:-10%;width:60vw;height:60vw;max-width:780px;max-height:780px; background:radial-gradient(circle,rgba(13,180,235,.16),transparent 62%);z-index:-1; } .hero::after{ /* subtle grid */ content:"";position:absolute;inset:0;z-index:-1;opacity:.5; background: linear-gradient(rgba(58,85,168,.04) 1px,transparent 1px) 0 0/52px 52px, linear-gradient(90deg,rgba(58,85,168,.04) 1px,transparent 1px) 0 0/52px 52px; -webkit-mask-image:radial-gradient(circle at 30% 30%,#000,transparent 75%); mask-image:radial-gradient(circle at 30% 30%,#000,transparent 75%); } .hero-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center} @media(min-width:960px){.hero-grid{grid-template-columns:1.05fr .95fr}} .hero h1{margin-block:1.1rem 1.25rem} .hero .lead{max-width:42ch} .hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.9rem} .hero-meta{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:2.4rem;padding-top:1.7rem;border-top:1px solid var(--line)} .hero-meta div{display:flex;flex-direction:column} .hero-meta b{font-family:var(--font-display);font-size:1.7rem;color:var(--ink);line-height:1} .hero-meta span{font-size:.82rem;color:var(--slate-2);margin-top:.35rem;letter-spacing:.02em} .hero-visual{position:relative} .hero-frame{ position:relative;border-radius:var(--r-xl);overflow:hidden; box-shadow:var(--sh-lg);border:1px solid rgba(255,255,255,.6); aspect-ratio:4/3.05;background:#0e1b2e; } .hero-frame img{width:100%;height:100%;object-fit:cover} .hero-frame .scanline{ position:absolute;left:0;right:0;height:2px;top:0; background:linear-gradient(90deg,transparent,var(--cyan),transparent); box-shadow:0 0 18px 3px rgba(13,180,235,.6); animation:scan 4.6s ease-in-out infinite; } @keyframes scan{0%{top:4%}50%{top:96%}100%{top:4%}} .hero-badge{ position:absolute;left:-18px;bottom:26px;z-index:2; background:#fff;border-radius:var(--r);box-shadow:var(--sh); padding:.85rem 1.1rem;display:flex;align-items:center;gap:.75rem; border:1px solid var(--line); } .hero-badge .ic{width:40px;height:40px;border-radius:11px;background:var(--grad);display:grid;place-items:center;flex:none} .hero-badge .ic svg{width:21px;height:21px;color:#fff} .hero-badge b{font-family:var(--font-display);color:var(--ink);font-size:.98rem;display:block;line-height:1.2} .hero-badge span{font-size:.78rem;color:var(--slate-2)} @media(max-width:520px){.hero-badge{left:8px;bottom:8px;padding:.7rem .85rem}} /* ----- Marquee / trust -------------------------------------------------- */ .trust{border-block:1px solid var(--line);background:var(--surface)} .trust .container{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;justify-content:center;padding-block:1.4rem} .trust span{font-size:.86rem;color:var(--slate-2);font-weight:500} .trust b{font-family:var(--font-display);color:var(--blue-deep)} /* ----- Stats ------------------------------------------------------------ */ .stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} @media(min-width:640px){.stats{grid-template-columns:repeat(2,1fr)}} @media(min-width:980px){.stats{grid-template-columns:repeat(4,1fr)}} .stat{background:#fff;padding:2rem 1.6rem;text-align:center} .stat .num{font-family:var(--font-display);font-size:clamp(2.4rem,4vw,3.2rem);font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.03em} .stat .num .suffix{color:var(--cyan)} .stat p{margin-top:.6rem;font-size:.92rem;color:var(--slate)} .section--deep .stat{background:transparent} .section--deep .stat .num{color:#fff} .section--deep .stats{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.16)} .section--deep .stat p{color:#aebbd4} /* ----- Cards ------------------------------------------------------------ */ .card{ background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:2rem;position:relative;overflow:hidden; transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s; } .card::before{ /* top accent on hover */ content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad); transform:scaleX(0);transform-origin:left;transition:transform .35s; } .card:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:transparent} .card:hover::before{transform:scaleX(1)} .card .ic{ width:54px;height:54px;border-radius:15px;display:grid;place-items:center;margin-bottom:1.3rem; background:var(--grad-soft);color:var(--blue); } .card .ic svg{width:27px;height:27px} .card h3{margin-bottom:.6rem} .card p{font-size:.98rem} .card .card-list{margin-top:1.1rem;display:grid;gap:.5rem} .card .card-list li{display:flex;gap:.55rem;font-size:.92rem;color:var(--slate)} .card .card-list svg{width:17px;height:17px;color:var(--cyan);flex:none;margin-top:.28rem} /* Service media card (image header) */ .scard{ display:flex;flex-direction:column;background:#fff;border:1px solid var(--line); border-radius:var(--r-lg);overflow:hidden; transition:transform .3s,box-shadow .3s,border-color .3s; } .scard:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:transparent} .scard .media{aspect-ratio:16/10;overflow:hidden;position:relative;background:#0e1b2e} .scard .media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)} .scard:hover .media img{transform:scale(1.06)} .scard .media .tag{position:absolute;left:1rem;top:1rem;background:rgba(14,27,46,.62);color:#fff;backdrop-filter:blur(4px); padding:.32rem .75rem;border-radius:var(--r-pill);font-size:.74rem;font-weight:600;font-family:var(--font-display);letter-spacing:.04em} .scard .body{padding:1.6rem;display:flex;flex-direction:column;flex:1} .scard .body h3{font-size:1.3rem;margin-bottom:.5rem} .scard .body p{font-size:.96rem} .scard .body .link-arrow{margin-top:1.1rem} .scard .card-list{margin-top:1rem;display:grid;gap:.45rem} .scard .card-list li{display:flex;gap:.5rem;font-size:.9rem;color:var(--slate)} .scard .card-list svg{width:16px;height:16px;color:var(--cyan);flex:none;margin-top:.26rem} /* Pill badge list (NDT methods etc.) */ .pill-grid{display:flex;flex-wrap:wrap;gap:.6rem} .pill{ display:inline-flex;align-items:center;gap:.55rem;padding:.6rem 1rem;border-radius:var(--r-pill); background:#fff;border:1px solid var(--line-2);font-weight:500;font-size:.92rem;color:var(--ink); transition:border-color .2s,transform .2s,box-shadow .2s; } .pill:hover{border-color:var(--cyan);transform:translateY(-2px);box-shadow:var(--sh-xs)} .pill abbr{font-family:var(--font-display);font-weight:700;color:var(--blue);text-decoration:none} /* Value cards */ .value{padding:1.8rem;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);position:relative} .value .ic{width:50px;height:50px;border-radius:14px;background:var(--grad);display:grid;place-items:center;margin-bottom:1.1rem} .value .ic svg{width:25px;height:25px;color:#fff} .value h3{font-size:1.2rem;margin-bottom:.5rem} .value p{font-size:.94rem} /* ----- Split feature ---------------------------------------------------- */ .split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center} @media(min-width:920px){.split{grid-template-columns:1fr 1fr}.split.reverse>.split-media{order:2}} .split-media{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh);aspect-ratio:4/3.2;background:#0e1b2e} .split-media img{width:100%;height:100%;object-fit:cover} .split-media.framed{border:1px solid var(--line)} .feature-list{display:grid;gap:1.1rem;margin-top:1.6rem} .feature-list li{display:flex;gap:.85rem} .feature-list .fic{width:38px;height:38px;border-radius:11px;background:var(--cyan-050);display:grid;place-items:center;flex:none} .feature-list .fic svg{width:19px;height:19px;color:var(--cyan-600)} .feature-list b{display:block;color:var(--ink);font-family:var(--font-display);font-size:1.02rem;margin-bottom:.15rem} .feature-list span{font-size:.93rem;color:var(--slate)} /* ----- Equipment cards -------------------------------------------------- */ .equip{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} @media(min-width:780px){.equip{grid-template-columns:repeat(2,1fr)}} .equip-card{background:#fff;display:flex;flex-direction:column} .equip-card .media{aspect-ratio:16/10;background:linear-gradient(160deg,#0e1b2e,#1a2c5e);overflow:hidden;position:relative} .equip-card .media img{width:100%;height:100%;object-fit:cover} .equip-card .body{padding:1.7rem} .equip-card .kicker{font-family:var(--font-display);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-600);font-weight:600} .equip-card h3{margin:.5rem 0 .55rem} .equip-card p{font-size:.95rem} .equip-card .specs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem} .equip-card .specs .chip{font-size:.76rem;padding:.32rem .7rem} /* ----- Capability matrix ------------------------------------------------ */ .matrix-controls{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.6rem} .filter-btn{ font-family:var(--font-display);font-weight:600;font-size:.9rem;color:var(--slate); padding:.6rem 1.15rem;border-radius:var(--r-pill);border:1px solid var(--line-2);background:#fff; transition:.22s; } .filter-btn:hover{border-color:var(--cyan);color:var(--blue-deep)} .filter-btn.active{background:var(--blue-deep);color:#fff;border-color:var(--blue-deep)} .matrix-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);-webkit-overflow-scrolling:touch} table.matrix{width:100%;border-collapse:collapse;min-width:560px;background:#fff} table.matrix th,table.matrix td{padding:1rem 1.15rem;text-align:left;border-bottom:1px solid var(--line)} table.matrix thead th{ background:var(--surface-2);font-family:var(--font-display);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase; color:var(--blue-deep);position:sticky;top:0; } table.matrix thead th.plat{text-align:center;width:150px} table.matrix tbody th{font-weight:600;color:var(--ink);font-family:var(--font-body);font-size:.96rem} table.matrix td.cell{text-align:center} table.matrix tbody tr:hover{background:#f8fbff} table.matrix tbody tr:last-child th,table.matrix tbody tr:last-child td{border-bottom:0} .dim{opacity:.32;transition:opacity .3s} .mk{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;font-weight:700} .mk.yes{background:var(--cyan-050);color:var(--cyan-600)} .mk.no{background:#f1f4f8;color:#aeb9c7} .mk.sec{background:#fff3e0;color:#d98326;font-size:.66rem;width:auto;padding:0 .6rem;border-radius:var(--r-pill);font-family:var(--font-display);letter-spacing:.04em} .matrix-note{margin-top:1rem;font-size:.85rem;color:var(--slate-2);display:flex;flex-wrap:wrap;gap:1.2rem} .matrix-note span{display:inline-flex;align-items:center;gap:.45rem} /* ----- Gallery + lightbox ----------------------------------------------- */ .gallery{columns:3 240px;column-gap:1rem} .gallery .g-item{break-inside:avoid;margin-bottom:1rem;border-radius:var(--r);overflow:hidden;position:relative; cursor:zoom-in;border:1px solid var(--line);background:#0e1b2e;box-shadow:var(--sh-xs);transition:transform .3s,box-shadow .3s} .gallery .g-item img{width:100%;display:block;transition:transform .5s} .gallery .g-item:hover{transform:translateY(-4px);box-shadow:var(--sh)} .gallery .g-item:hover img{transform:scale(1.05)} .gallery .g-cap{ position:absolute;inset:auto 0 0 0;padding:1.4rem .9rem .7rem; background:linear-gradient(transparent,rgba(14,27,46,.82)); color:#fff;font-size:.82rem;font-weight:600;font-family:var(--font-display); opacity:0;transition:opacity .3s; } .gallery .g-item:hover .g-cap{opacity:1} .lightbox{ position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem); background:rgba(8,15,28,.88);backdrop-filter:blur(6px); opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s; } .lightbox.open{opacity:1;visibility:visible} .lightbox img{max-width:100%;max-height:82vh;border-radius:var(--r);box-shadow:var(--sh-lg)} .lightbox .lb-cap{color:#cdd9ec;margin-top:1rem;text-align:center;font-size:.95rem;font-family:var(--font-display)} .lightbox button{position:absolute;color:#fff;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;transition:.2s} .lightbox button:hover{background:rgba(255,255,255,.24)} .lightbox button svg{width:24px;height:24px} .lb-close{top:1.4rem;right:1.4rem} .lb-prev{left:1.4rem;top:50%;translate:0 -50%} .lb-next{right:1.4rem;top:50%;translate:0 -50%} @media(max-width:600px){.lb-prev{left:.5rem}.lb-next{right:.5rem}.lightbox button{width:44px;height:44px}} /* ----- Industries ------------------------------------------------------- */ .ind-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} @media(min-width:560px){.ind-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:880px){.ind-grid{grid-template-columns:repeat(3,1fr)}} .ind{background:#fff;padding:1.7rem;display:flex;align-items:center;gap:1rem;transition:background .25s} .ind:hover{background:var(--surface-2)} .ind .ic{width:46px;height:46px;border-radius:12px;background:var(--cyan-050);display:grid;place-items:center;flex:none} .ind .ic svg{width:23px;height:23px;color:var(--blue)} .ind b{font-family:var(--font-display);color:var(--ink);font-size:1.02rem} .ind span{display:block;font-size:.85rem;color:var(--slate-2)} /* ----- Leadership ------------------------------------------------------- */ .leader{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:2rem;display:flex;flex-direction:column} .leader .top{display:flex;align-items:center;gap:1.1rem;margin-bottom:1.3rem} .avatar{width:74px;height:74px;border-radius:20px;background:var(--grad);display:grid;place-items:center;flex:none; font-family:var(--font-display);font-weight:700;font-size:1.6rem;color:#fff;box-shadow:var(--sh-cyan)} .leader .top h3{font-size:1.3rem;margin-bottom:.2rem} .leader .role{color:var(--cyan-600);font-weight:600;font-family:var(--font-display);font-size:.9rem} .leader p{font-size:.95rem} .leader .creds{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem} .leader .creds .chip{font-size:.74rem;padding:.3rem .7rem} /* ----- CTA band --------------------------------------------------------- */ .cta-band{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--grad-deep); padding:clamp(2.5rem,5vw,4.2rem);color:#cdd9ec;text-align:center} .cta-band::before{content:"";position:absolute;top:-40%;left:50%;translate:-50% 0;width:120%;height:140%; background:radial-gradient(ellipse at center,rgba(13,180,235,.22),transparent 60%);pointer-events:none} .cta-band h2{color:#fff;position:relative} .cta-band p{max-width:54ch;margin:1rem auto 0;position:relative;color:#b9c6de} .cta-band .hero-actions{justify-content:center;position:relative} /* ----- Contact ---------------------------------------------------------- */ .contact-grid{display:grid;gap:var(--gap)} @media(min-width:920px){.contact-grid{grid-template-columns:1fr 1.1fr}} .contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.6rem,3vw,2.4rem)} .cinfo{display:grid;gap:1.1rem;margin-top:1.6rem} .cinfo a,.cinfo div{display:flex;align-items:flex-start;gap:.95rem;color:var(--slate);transition:color .2s} .cinfo a:hover{color:var(--blue)} .cinfo .ic{width:46px;height:46px;border-radius:13px;background:var(--grad-soft);display:grid;place-items:center;flex:none} .cinfo .ic svg{width:22px;height:22px;color:var(--blue)} .cinfo b{display:block;color:var(--ink);font-family:var(--font-display);font-size:1rem;margin-bottom:.1rem} .cinfo span{font-size:.9rem} .field{display:grid;gap:.45rem;margin-bottom:1.1rem} .field label{font-family:var(--font-display);font-weight:600;font-size:.86rem;color:var(--ink)} .field input,.field textarea,.field select{ width:100%;padding:.85rem 1rem;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface-2); transition:border-color .2s,background .2s,box-shadow .2s; } .field input:focus,.field textarea:focus,.field select:focus{ outline:none;border-color:var(--cyan);background:#fff;box-shadow:0 0 0 4px rgba(13,180,235,.12) } .field textarea{min-height:130px;resize:vertical} .map-wrap{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-sm);min-height:380px;background:var(--grad-soft)} .map-wrap::before{content:"Loading map…";position:absolute;inset:0;display:grid;place-items:center;color:var(--slate-2);font-family:var(--font-display);font-size:.9rem} .map-wrap iframe{position:relative;width:100%;height:100%;min-height:380px;border:0;display:block;filter:grayscale(.12)} /* ----- Page hero (inner pages) ------------------------------------------ */ .page-hero{position:relative;padding-top:calc(var(--header-h) + clamp(3rem,6vw,5rem));padding-bottom:clamp(2.5rem,5vw,4rem); background:var(--grad-soft);overflow:hidden;border-bottom:1px solid var(--line)} .page-hero::after{content:"";position:absolute;top:-30%;right:-8%;width:46vw;height:46vw;max-width:560px;max-height:560px; background:radial-gradient(circle,rgba(13,180,235,.16),transparent 64%);z-index:0} .page-hero .container{position:relative;z-index:1} .page-hero h1{margin:1rem 0 1rem;max-width:18ch} .page-hero p{max-width:60ch;font-size:1.1rem;color:#445268} .breadcrumb{display:flex;gap:.5rem;align-items:center;font-size:.85rem;color:var(--slate-2);font-family:var(--font-display)} .breadcrumb a:hover{color:var(--blue)} .breadcrumb svg{width:14px;height:14px} /* ----- Footer ----------------------------------------------------------- */ .site-footer{background:var(--surface-2);border-top:1px solid var(--line);padding-block:clamp(3rem,5vw,4.5rem) 2rem;margin-top:0} .footer-grid{display:grid;gap:2.5rem} @media(min-width:760px){.footer-grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr}} .footer-brand img{height:44px;margin-bottom:1.1rem} .footer-brand p{font-size:.93rem;max-width:34ch} .footer-tag{display:inline-flex;gap:.5rem;margin-top:1.1rem;font-family:var(--font-display);font-weight:600;color:var(--blue);font-size:.9rem} .footer-col h4{font-family:var(--font-display);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-2);margin-bottom:1.1rem} .footer-col ul{display:grid;gap:.7rem} .footer-col a{font-size:.95rem;color:#45556b;transition:color .2s} .footer-col a:hover{color:var(--blue)} .footer-col a:hover .ico{color:var(--cyan)} .footer-contact a{display:flex;gap:.6rem;align-items:flex-start} .footer-contact svg{width:18px;height:18px;color:var(--blue);flex:none;margin-top:.18rem} .footer-bottom{border-top:1px solid var(--line);margin-top:2.8rem;padding-top:1.6rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center} .footer-bottom p{font-size:.85rem;color:var(--slate-2)} .socials{display:flex;gap:.6rem} .socials a{width:40px;height:40px;border-radius:11px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--slate);background:#fff;transition:.22s} .socials a:hover{color:#fff;background:var(--grad);border-color:transparent;transform:translateY(-3px)} .socials svg{width:18px;height:18px} /* ----- Decorative diamond motif ---------------------------------------- */ .diamond-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:url("../img/brand/pattern-light.jpg");background-size:480px;background-position:center; -webkit-mask-image:linear-gradient(transparent,#000 40%,#000 60%,transparent); mask-image:linear-gradient(transparent,#000 40%,#000 60%,transparent)} /* ----- Reveal animations (only when JS is active, so no-JS shows all) ---- */ .js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)} .js .reveal.in{opacity:1;transform:none} .js .reveal[data-delay="1"]{transition-delay:.08s} .js .reveal[data-delay="2"]{transition-delay:.16s} .js .reveal[data-delay="3"]{transition-delay:.24s} .js .reveal[data-delay="4"]{transition-delay:.32s} /* Utility */ .center{text-align:center} .mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem} .mb-0{margin-bottom:0} .muted{color:var(--slate-2)} .nowrap{white-space:nowrap} .hide{display:none} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .reveal,.js .reveal{opacity:1;transform:none} .hero-frame .scanline{display:none} } /* ========================================================================== WordPress integration (appended for the theme conversion) ========================================================================== */ /* Active nav state via WP menu classes (mirrors the original .nav a.active) */ .nav .current-menu-item>a, .nav .current_page_item>a, .nav .current-menu-ancestor>a, .nav .current-menu-parent>a{color:var(--blue)} .nav .current-menu-item>a::after, .nav .current_page_item>a::after, .nav .current-menu-ancestor>a::after{ content:"";position:absolute;left:50%;bottom:.28rem;translate:-50% 0; width:5px;height:5px;border-radius:50%;background:var(--cyan); } .mobile-menu .current-menu-item>a, .mobile-menu .current_page_item>a, .mobile-menu .current-menu-ancestor>a{color:var(--blue)} /* Let wp_nav_menu